*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
    
  .rev-section{
  margin: auto;
  padding: 0 1rem;
  max-width: 1100px;
  text-align: left;
  }
  .rev-placed{
    font-size: 1rem;
    text-transform: none;
    text-align: left;
    font-style: italic;
    color: rgb(23, 75, 105);
    margin-bottom: .5rem;
    }
  .rev-lidsinds{
    font-size: 1rem;
    text-transform: none;
    text-align: right;
    color: rgb(43, 42, 42);
    margin-bottom: .5rem;
    }

  .rev-title{
  font-size: 1.5rem;
  text-transform: none;
  text-align: left;
  color: rgb(50, 50, 50);
  margin-bottom: .5rem;
  }
  .rev-note{
    font-size: 1.1rem;
    color: rgb(150, 150, 150);
    font-style: italic;
    color: red;  
  }
  
  .rev-reviews{
    margin: 2rem auto;
    display: flex;
    flex-wrap: wrap;
  }
  .rev-review{
    margin: 0 1rem;
    min-width: 300px;
    flex: 1;
  }
  
  .rev-head-review{
    margin: 1.75rem auto;
    width: 150px;
    height: 150px;
  }
  .rev-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
  }
  
  .rev-body-review{
    background-color: rgb(238, 238, 238);
    padding: 2.5rem;
    box-shadow: 2px 2px 10px 3px rgb(225, 225, 225);
  }
  .rev-name-review{
    font-size: 1.5rem;
    text-align: right;
    color: rgb(50, 50, 50);
    margin-bottom: .25rem;
  }
  .rev-place-review{
    font-size: 1.5rem;
    text-align: right;
    color: red;
    font-style: italic;
  }
  .review-rating{
    text-align: left;
    margin: 1rem 0;
  }
  .review_rating{
    text-align: right;
    margin: 1rem 0;
  }
  .rev-rating{
    color: rgb(253, 180, 42);
    margin: 1rem 0;
  }
  .rev-desc-review{
    text-align: left;
    line-height: 1.5rem;
    letter-spacing: 1px;
    color: rgb(150, 150, 150);
  }
  
  @media (max-width: 678px){
  .review{
    margin-top: 1.5rem;
    }
  }
  .checked {
    color: orange;
  }
  *{
    margin: 0;
    padding: 0;
}
.rate {
    float: left;
    height: 50px;
    padding: 0 10px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
    visibility: hidden;
}
.rate:not(:checked) > label {
    float:right;
    width:1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:50px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
/* Half star trick */
.rate .half:before {
  content: "★"; /* half star no outline */
  position: absolute;
  padding-right: 0;
}
.rate > input:checked ~ label {
    color: #ffc700;    
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
    color: #c59b08;
}

/* Half star trick */
.rate .half:before {
  content: "\f089 "; /* half star no outline */
  position: absolute;
  padding-right: 0;
}


.stars {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(https://i.stack.imgur.com/KaEDC.png);
  }
  .stars-2 {
    width: 26px;
  }
  .stars-3 {
    width: 39px;
  }
  .stars-4 {
    width: 52px;
  }
  .stars-5 {
    width: 65px;
  }

  .checked {
    color: orange;
  }
 
*{
  box-sizing: border-box;
}
body{
font-family: sans-serif;
padding: 0;
margin: 0;
background: #f5f5f5;
}
.h12,.h22{
text-align: left;
}
.h13,.h4{
text-align: center;
}
.h15,.h66{
text-align: right;
}
.rating-container,.card-container{
margin: 5px auto;
max-width: 1050px;
background-color: #FFF;
padding: 10px;
border: 1px solid rgba(0,0,0,.1);
}
.star_pgs{
background: #cccccc;
margin: 5px 0;
overflow: hidden;
height: 15px;
}
.star_pgb{
height: 15px;
width:0;
}
._5_star{
background: #04AA6D;
}
._4_star{
background: #2196F3;
}
._3_star{
background: #00bcd4;
}
._2_star{
background: #ff9800;
}
._1_star{
background: #f44336;
}
.star_count{
display: flex;
font-size: 14px;
color: orange;
}
.star_count span:first-child{
flex: 1;
color: #000000;
}
.star_count span:last-child{
color: #888888;
}
.rating-wrapper{
max-width: 100px;

}
.star_input_num{
width: 100%;
}
#sub-btn{
background-color: #0079c1;
border: 1px solid rgba(0,0,0,.1);
color: #FFF;
text-transform: uppercase;
padding:5px 10px;
font-size: 14px;
cursor: pointer;
outline: none;
width: 100%;

}
table{
border-collapse: collapse;

}
table td{
border: 1px solid #cccccc;
padding: 5px;
}
input[type='number']{
padding: 10px;
border: 1px solid rgba(0,0,0,.2);
}

.fa_custom_up {
  color: #0e9753;
  padding: 50px;
}
.fa_custom_down {
  color: #fa2727;
  padding: 75px;
}
.fa_custom_middle {
  color: #d49113;
  padding: 100px;
}
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.popup-content button {
  margin: 10px;
  padding: 10px 20px;
  cursor: pointer;
}