FEA_12_CLINIC/src/style/checkBoxWindow.scss

$header-color: #d4d5d7;
$main-title-color: #3b3b3b;
$main-text-color: #101010;
$main-color:   #789084;
$hover-color: #b1e8ca;
$opacity-color: rgba(17,17,17,0.8);

.check-container {
    position: absolute;
    right: 15px;
    left: 15px;
    top: 55px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: $opacity-color;
    margin: 5% auto;
    width: 85%;
    font-size: 0.8em;
    z-index: 2;
}
.check-speciality {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    text-align: start;
    width: 30%;
    margin: 10px;
    padding: 5px 10px;
    border: 1px solid $main-color;
    .check-elem {
        margin: 5px 0;
    }
}
input[type = "checkbox"] {
    display: none;
  }
  .check {
    padding-left: 20px;
  }
  .check::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: $opacity-color;
    border: 1px solid $main-color;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: -10px;
    margin-right: 10px;
  
  }
   input[type = "checkbox"]:checked + .check::before {
    content: "";
    color: $main-color;
    text-align: center;
    font-size: 16px;
    background-color: $hover-color;
    // background-image: url(../assets/images/checked.png);
    font-weight: bold;
    vertical-align: top;
  }
  .wrap-check-off {
    position: fixed;
    top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: $opacity-color;
  opacity: 0.5;
  }