@import url('https://fonts.googleapis.com/css2?family=Solitreo&display=swap');
*{
  margin: 0px;
  padding:0px;
  
  
}

body{

 
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
}

.itemdata{
  padding: 20px;
  display: flex;
  justify-content: right;
  
}
.itemdata .dataitem{
  padding: 5px;

  
}
.itemdata .dataitem .dataname{
  font-size: 30px;
  text-align: right;
  font-weight: 900;
  color: #000f;
  width: 200px;
}
.itemdata .dataitem .datacompny{
  font-size: 13px;
  font-weight: 800;
  color: #0008;
  text-align: right;
  
}
.itemdata .dataitem .mnydata{
  font-size: 10px;
  font-weight: 900;
  color: #000f;
  display: flex;
  justify-content: right;
  
}
.itemdata .dataitem .mnydata .aed{
  font-size: 15px;
  font-weight: 900;
  color: #000f;
  margin-top: 13px;
  
  
}
.itemdata .dataitem .mnydata .mnys{
  font-size: 30px;
  font-weight: 900;
  color: #000f;
  
  
}
.itemdata .dataitem .datarate{
  padding: 5px;
  display: flex;
  justify-content:right;
  align-items: center;
  margin-top: 3px;
  
  
}

.itemdata .dataitem .datarate .imgcompnys img{
  width:15px; 
  height:15px;
  
  
  
}

.itemdata .dataitem .datarate .licke{
  padding: 5px;
  font-size: 4px;
  box-shadow: -2px 0px 1px rgba(200,150,240,0.5);
  display: flex;
  margin-right: 10px;
  margin-left: 10px;
  
}
.itemdata .dataitem .datarate .bayitem{
  padding: 2px;
  font-size: 3px;
  box-shadow: 2px 0px 1px rgba(200,150,240,0.5);
  display: flex;
}
.itemdata .dataitem .datarate .bayitem .nubmerbay{
  margin-right: 3px;
  margin-left: 3px;
  color: #0007;

}
.itemdata .dataitem .btncart{
  padding: 5px;
  height: 70px;
  margin-top: 20px;
  text-align: center;
}

.itemdata .dataitem .btncart button{
  font-size: 20px;
  padding: 0px 15px;
  text-align: center;
 
    height: 28px;
   
  
   
    color: #fff;
    border-radius: 10px;
    border: none;
    box-shadow: 0px 2px 3px rgba(10, 10, 10, 0.3);
}



.itemdata .imgdataitem{
  padding: 5px;
}
.itemdata .imgdataitem img{
  width: 150px;
  height: 200px;
  margin-left: 10px;
}


.datarates {
  
  padding: 20px;
  justify-content: right;
  
}



.dataitem .datarates .dem{
  color: #0006;
  font-size: 8px;
  font-weight: 500;
  text-align: right;
}

.imgdataitem .datai {
  display: none;
}

.datai .datacolor{
  margin: 2px;
}

.datai .datacolor h3{
  font-size: 10px;
  font-weight: 900;
  color: #0007;
  text-align: right;
}

.datai .datacolor .itemc{
  display: flex;
  justify-content: right;
  
  
}
.datai .datacolor .itemc .sd{
  margin-right: 8px;
  padding: 4px;
  border-radius: 10px;
}
.datai .datacolor .itemc .sd input{
  display: block;
}


.datai .datacolor .itemc .sd .w{
  width: 10px;
  height: 10px;
  margin-bottom: 3px;
  
  border: 1px solid #0003;
  background: #f0f0f0;
  border-radius: 50%;
}
.sd label{
  padding: 4px;
  color: #0007;
}
.sd label:before{
  content: '\2605';
}
.sd input:checked  +   .sd label:before,
.sd input:checked  ~ .sd label:hover{
  color: #ff0;
}
.datai .datacolor .itemc .sd .b{
  width: 10px;
  height: 10px;
  margin-bottom: 3px;
  background: #77f;
  border-radius: 50%;
}
.datai .datacolor .itemc .sd .r{
  width: 10px;
  height: 10px;
  margin-bottom: 3px;

  background: #f33;
  border-radius: 10px;
}
.dtati .datasizes{
  margin-right:  8px;
}
.datai .datasizes h3{
  font-size: 10px;
  font-weight: 900;
  text-align: right;
  color: #0007;
}
.datai .datasizes .sizesi{
  display: flex;
  justify-content: right;
}
.datai .datasizes .sizesi .sd{
  margin-right: 8px;
  font-size: 9px;
  padding: 4px;
  border-radius: 10px;
}
.datai .datasizes .sizesi .sd h5{
  color: #0007;
}
.is{
  width: 10px;
  height: 10px;
}
.itemdata .dataitem .rateing{
  justify-content: right;
  text-align: right;
  display: flex;
}
.itemdata .dataitem .rateing .textrateing{
  font-size: 10px;
  font-weight: 900;
  margin-right: 3px;
  color: #000f;
}
.itemdata .dataitem .rateing .namerateing{
  font-size: 9px;
  font-weight: 900;
  margin-right: 5px;
  color: #0008;
}
.dataitem .rateing .itemrateing{
  display: flex;
  text-align: right;
  justify-content: right;
  
}
 .dataitem .rateing .itemrateing .stri{
  display: none;
}
.dataitem .rateing .itemrateing .star{

  border-radius: 50%;
  font-size: 9px;
  color: #aaa;
  cursor:pointer;
  
}
.dataitem .rateing .itemrateing .star:before{
  content: '\2605';
  
}
.stri:checked  +  .star:before,
 .stri:checked  ~  .star:hover{
   
  color: #f09020;
}


.barrateing{
  padding: 20px 10px;
}
.barrateing img{
  width: 350px;
  height: 350px;
  
}
.barrateing .s1s{
  width: 350px;
  height: 200px;
  
}
.barrateing .s2s{
  width: 350px;
  height: 200px;
  
}