.soapTimeCalculator {
  font: 16px Arial;
  background-color: #fff7f4;
  min-width: 300px;
}

.card__img {
  height: 75px;
}

.selectSoapMetod,
.selectCalcWaterMetod {
  border: 0px;
}


/*************************
cardOilReceipt
**************************/
.cardOilReceipt_oilParams {
  font-size: 13px;
  min-width: 30px;
  margin-right: 6px;
}

.cardOilReceipt_oilParams_circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(255 148 83);
  position: relative;
  margin-right: 3px;
}

.cardOilReceipt_oilParams_circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bolder;
  font-size: 13px;
  color: white;
}

.cardOilReceipt_oilAcid {
  font-size: 13px;
  font-weight: bold;
  min-width: 35px;
  margin-right: 6px;
}

.cardOilReceipt_oilAcid_circle {
  width: 28px;
  height: 23px;
  align-content: center;
  border-radius: 25%;
  background: rgb(217 149 243);
  margin-right: 3px;
  text-align: center;
  font-weight: bolder;
  color: white;
}

.cardOilReceipt_btn_close {
  margin-top: 8px;
  margin-left: 3px;

}

.cardOilReceipt_btn_add {
  margin-left: 4px;
}


/*************************
Receipt
**************************/

.receipt_oilParams_circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgb(255 148 83);
  position: relative;
  margin-right: 5px;
}

.receipt_oilParams_circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bolder;
  color: white;
}

.receipt_oilAcid_circle {
  width: 30px;
  height: 25px;
  align-content: center;
  border-radius: 25%;
  background: rgb(217 149 243);
  margin-right: 5px;
  text-align: center;
  font-weight: bolder;
  color: white;
}

.recipeCol2 {
  min-width: 90px;
  width: auto;
}

.recipeCol3 {
  width: 90px;
}



/*************************
searchOil
**************************/
.searchOil_oilParams {
  font-size: 12px;
  margin-right: 6px;
}

.searchOil_oilParams_circle {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgb(255 148 83);
  position: relative;
  margin-right: 3px;
}

.searchOil_oilParams_circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bolder;
  font-size: 12px;
  color: white;
}

.searchOil_oilAcid {
  font-size: 12px;
  margin-right: 6px;
}

.searchOil_oilAcid_circle {
  width: 25px;
  height: 20px;
  align-content: center;
  border-radius: 25%;
  background: rgb(217 149 243);
  margin-right: 3px;
  text-align: center;
  font-weight: bolder;
  color: white;
}




.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
  min-width: 100%;
}

.filterOilList {
  height: auto;
  max-height: 400px;
}

.filterAdditiveList {
  height: auto;
  max-height: 400px;
}

.activeOil {
  background-color: rgb(151, 198, 241);
  ;
}

.btnAcidRow {
  font: 20px Arial;
}


/*******
**************************************************
media запросы
**************************************************
*******/
@media screen and (max-width: 359px) {

  .cardOilReceipt_GramPercentRangeGroup {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }

  .cardOilReceipt_GramPercentGroup {
    min-width: 190px;
    width: 100%;
    max-width: 200px;
  }

  .cardOilReceipt_percentRangeGroup {
    width: 100%;
    max-width: 180px;
  }

}

@media screen and (min-width : 360px) and (max-width: 425px) {
  .cardOilReceipt_name {
    font-size: 18px;
  }

  .cardOilReceipt_oilParams {
    font-size: 12px;
  }

  .cardOilReceipt_oilParams_circle {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgb(255 148 83);
    position: relative;
    margin-right: 3px;
  }

  .cardOilReceipt_oilParams_circle span {
    font-size: 12px;
  }

  .cardOilReceipt_oilAcid {
    font-size: 12px;
  }

  .cardOilReceipt_oilAcid_circle {
    width: 25px;
    height: 21px;
    align-content: center;
    border-radius: 25%;
    background: rgb(217 149 243);
    margin-right: 3px;
    text-align: center;
    font-weight: bolder;
    color: white;
  }

  .cardOilReceipt_GramPercentGroup {
    min-width: 190px;
    max-width: 200px;
  }

  .cardOilReceipt_percentRangeGroup {
    width: auto;
    max-width: 180px;
  }
}

@media (min-width : 426px) and (max-width: 576px) {

  .cardOilReceipt_name {
    font-size: 19px;
  }

  .cardOilReceipt_GramPercentGroup {
    width: 60%;
    max-width: 200px;
  }

  .cardOilReceipt_percentRangeGroup {
    max-width: 180px;
  }
}

@media (min-width : 576px) {
  .soapTimeCalculator {
    font: 18px Arial;
  }

  .card__img {
    height: 120px;
  }

  .selectSoapMetod,
  .selectCalcWaterMetod {
    border-right: 1px solid rgb(108 117 125);
  }

  .autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    min-width: 100%;
  }
}