.topdata{
    width: 100%;
      padding-left: 3%;
      padding-right: 3%;
      height: 108px;
      background-color: gainsboro;
   }
   .top1{
    font-size: 24px;
    text-align: center;
   }
   .top{
     font-size: 24px;
   }
   .eight_left .left, .eight_right .left{
        background-color: cadetblue;
    }
    .eight_left{
        
        background-color: white;
        padding: 3%
    }
    .eight_right{
        
        background-color: white;
        padding: 3%
    }
    .inspection_result{
        background-color: white;
    }
    .title{
        font-size: 24px;
        color: cornsilk;
        font-weight: 800;
        padding: 3%
    }
    td{
        font-size: 20px;
        padding: 5px;
         font-weight: 800;
    }
    .score{
        font-size: 28px;
        color: green;
        font-weight: 700;
        text-align: center;
    }
    .date{
        font-size: 20px; 
        text-align: right;
        font-weight: 800;
        background-color: white;
        margin-top: 3%;
        margin-right: 3%;
    }
    .eight_score{
        border-bottom: 1px solid black;
        padding-left:3%;
        padding-right: 3%;
    }
    .eight_score_left{
      font-size: 16px;
    }
    .eight_description {
        padding-left:3%;
        padding-right: 3%;
    }
    .eight {
        padding-left: 3%;
        padding-right: 3%;
        font-weight: 800;
        font-size: 20px;

    }
    .brain_star {
        padding-left:3%;
        padding-right: 3%;
        float:left;
        font-weight: 800;
        font-size: 20px;
    }
    .brain_description{
        padding-left:  3%;
        padding-right: 3%;
        margin-bottom: 2%;
    }
    .table_score{
        padding-left:  3%;
        padding-right: 3%;
    }
    .show1{
        width: 100%;              
        display: flex;
        justify-content: center;             
    }
    .progress-bar {
      height: inherit;
    }
    @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

        /****** Style Star Rating Widget *****/
.rating { 
  border: none;
  float: none;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */


.rating > input:checked ~ label:hover,
.rating >  input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label { color: #FFED85;  } 


.rating1 { 
  border: none;
  float: none;
}

.rating1 > input { display: none; } 
.rating1 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating1 > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating1 > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating1 > input:checked ~ label, /* show gold star when clicked */


.rating1 > input:checked ~ label:hover,
.rating1 >  input:checked ~ label, /* lighten current selection */
.rating1 > input:checked ~ label { color: #FFED85;  } 

.rating2 { 
  border: none;
  float: none;
}

.rating2 > input { display: none; } 
.rating2 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating2 > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating2 > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating2 > input:checked ~ label, /* show gold star when clicked */


.rating2 > input:checked ~ label:hover,
.rating2 >  input:checked ~ label, /* lighten current selection */
.rating2 > input:checked ~ label { color: #FFED85;  } 

.rating3 { 
  border: none;
  float: none;
}

.rating3 > input { display: none; } 
.rating3 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating3 > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating3 > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating3 > input:checked ~ label, /* show gold star when clicked */


.rating3 > input:checked ~ label:hover,
.rating3 >  input:checked ~ label, /* lighten current selection */
.rating3 > input:checked ~ label { color: #FFED85;  } 
.col3{
  width: 100%;
}
.col4{
  width: 100%;
}
@media(max-width:480px) {
    fieldset{
        display: none;
    }
    .img{
      display: none;
    }
    .top{
      font-size: 16px;
    }
    .date{
      font-size: 18px;
    }
     .brain_star{
    font-size: 24px;
   }

}

@media (max-width: 768px){
  .img{
      display: none;
    }
    .col1{
      width: 100%;
    }
    .col2{
      width: 100%;
    }
    .col3{
      width: 100%;
    }
    .col4{
      width: 100%;
    }
     .top1{
    font-size: 18px;
    text-align: initial;
   }
   .score{
    text-align: initial;
   }
   .show1{            
        display: block !important; 
    }
	body{
		font-size: 18px !important; 
	}
	.score {
		font-size: 18px !important; 
	}
   /*.brain_star{
    font-size: 24px;
   }*/
 /*  .brain_description{
        font-size: 18px;
    }*/
  
}
@page {
  size: A4;
  margin: 0 70px;
}
@media print {
  html, body {
    width: 250mm;
    height: 297mm;
	background-image: url("http://gold.gyrigym.com/brand/img/bg0630.png") !important;
	background-repeat: no-repeat !important;
  }
  footer{
	  display: none;
  }
/****** Style Star Rating Widget *****/
.rating { 
  border: none;
  float: none;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label:before { 
 color: #ddd !important; 
 float: left !important;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */


.rating > input:checked ~ label:hover,
.rating >  input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:before { color: #FFED85 !important;  } 


.rating1 { 
  border: none;
  float: none;
}

.rating1 > input { display: none; } 
.rating1 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating1 > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating1 > label:before { 
  color: #ddd !important;
  float: left !important; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating1 > input:checked ~ label, /* show gold star when clicked */


.rating1 > input:checked ~ label:hover,
.rating1 >  input:checked ~ label, /* lighten current selection */
.rating1 > input:checked ~ label:before { color: #FFED85 !important;  } 

.rating2 { 
  border: none;
  float: none;
}

.rating2 > input { display: none; } 
.rating2 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating2 > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating2 > label:before { 
  color: #ddd !important; 
  float: left !important; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating2 > input:checked ~ label, /* show gold star when clicked */


.rating2 > input:checked ~ label:hover,
.rating2 >  input:checked ~ label, /* lighten current selection */
.rating2 > input:checked ~ label:before { color: #FFED85 !important;  } 

.rating3 { 
  border: none;
  float: none;
}

.rating3 > input { display: none; } 
.rating3 > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating3 > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating3 > label:before { 
 color: #ddd !important; 
 float: left !important; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating3 > input:checked ~ label, /* show gold star when clicked */


.rating3 > input:checked ~ label:hover,
.rating3 >  input:checked ~ label, /* lighten current selection */
.rating3 > input:checked ~ label:before { color: #FFED85 !important;  } 
}
/*@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
	-webkit-print-color-adjust: exact;
	background-image: url("http://gold.gyrigym.com/brand/img/paperbg.png") !important;
	background-color: #fef1bc !important;
	background-repeat: no-repeat !important;
  }
  footer{
	  display: none;
  }
  .title {
		font-size: 28px !important;
		color: #af1e41 !important;
  }
  .top1 {
	margin-top: 30px !important;
    font-size: 24px !important;
   }
   .score {
		font-size: 28px !important;
		color: green !important;
	}
	.eight {
		margin-top: 15px !important;
		margin-bottom: 5px !important;
		color: cadetblue !important;
		font-weight: 900 !important;
	}
}*/