.big{
    color: #37cbeb;
}

h1 {
    font-size: 55px;
}

h2 {
    font-size: 39px;
    font-family: 'Comic Sans MS'
}

h3 {
    font-size: 20px;
    font-family: 'Comic Sans MS';
    font-style: italic;
}

.cursive {
    font-family: 'Sacramento', cursive;
    font-style: italic;
    line-height: 50px;
}

.slab {
    font-family: 'Slabo 27px', serif;
}

.container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    background: url('../images/main_bg.png');
}

#first_part {
    padding: 20px;
}

.color_violet {
    color: #793279;
}

.color_cyan {
    color: #39d7e8;
}

p {
    font-size: 20px;
    letter-spacing: 1px;
    padding: 0px 30px;
}

.title_img {
    width: 180px;
}

.fa-heart {
    font-size: 40px;
}

.rating_food,
.rating_service,
.rating_speed,
.rating_service2,
.rating_store,
.rating_clean {
    text-align: center;
    width: 300px;
    padding: 5px 30px;
    margin: auto;
    border-radius: 30px;
    background: #FFF;
    overflow: hidden;
    box-shadow: 0 1px #CCC, 0 5px #DDD, 0 9px 6px -3px #999;
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating_food:not(:checked)>input {
    display: none;
}

.rating_service:not(:checked)>input {
    display: none;
}

.rating_service2:not(:checked)>input {
    display: none;
}

.rating_speed:not(:checked)>input {
    display: none;
}

.rating_store:not(:checked)>input {
    display: none;
}

.rating_clean:not(:checked)>input {
    display: none;
}

#food {
    bottom: -65px;
}

#food:not(:checked)>label,
#service:not(:checked)>label,
#store:not(:checked)>label,
#speed:not(:checked)>label,
#service2:not(:checked)>label,
#clean:not(:checked)>label {
    cursor: pointer;
    float: right;
    width: 46px;
    height: 30px;
    display: block;
    color: rgba(20, 20, 20, 0.65);
    line-height: 33px;
    text-align: center;
    font-size: 55px;
}

#food:not(:checked)>label:hover,
#food:not(:checked)>label:hover~label {
    color: rgba(233, 54, 40, 1);
}

#food>input:checked+label:hover,
#food>input:checked+label:hover~label,
#food>input:checked~label:hover,
#food>input:checked~label:hover~label,
#food>label:hover~input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#food>input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#service {
    bottom: -65px;
}

#service:not(:checked)>label:hover,
#service:not(:checked)>label:hover~label {
    color: rgba(233, 54, 40, 1);
}

#service>input:checked+label:hover,
#service>input:checked+label:hover~label,
#service>input:checked~label:hover,
#service>input:checked~label:hover~label,
#service>label:hover~input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#service>input:checked~label {
    color: rgba(233, 54, 40, 1);
}


#service2 {
    bottom: -65px;
}

#service2:not(:checked)>label:hover,
#service2:not(:checked)>label:hover~label {
    color: rgba(233, 54, 40, 1);
}

#service2>input:checked+label:hover,
#service2>input:checked+label:hover~label,
#service2>input:checked~label:hover,
#service2>input:checked~label:hover~label,
#service2>label:hover~input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#service2>input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#speed {
    bottom: -65px;
}

#speed:not(:checked)>label:hover,
#speed:not(:checked)>label:hover~label {
    color: rgba(233, 54, 40, 1);
}

#speed>input:checked+label:hover,
#speed>input:checked+label:hover~label,
#speed>input:checked~label:hover,
#speed>input:checked~label:hover~label,
#speed>label:hover~input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#speed>input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#store {
    bottom: -65px;
}

#store:not(:checked)>label:hover,
#store:not(:checked)>label:hover~label {
    color: rgba(233, 54, 40, 1);
}

#store>input:checked+label:hover,
#store>input:checked+label:hover~label,
#store>input:checked~label:hover,
#store>input:checked~label:hover~label,
#store>label:hover~input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#store>input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#clean {
    bottom: -65px;
}

#clean:not(:checked)>label:hover,
#clean:not(:checked)>label:hover~label {
    color: rgba(233, 54, 40, 1);
}

#clean>input:checked+label:hover,
#clean>input:checked+label:hover~label,
#clean>input:checked~label:hover,
#clean>input:checked~label:hover~label,
#clean>label:hover~input:checked~label {
    color: rgba(233, 54, 40, 1);
}

#clean>input:checked~label {
    color: rgba(233, 54, 40, 1);
}

.img_br {
    width: 100%;
    margin: 0px 0px;
}

.txt_area {
    width: 100%;
    height: 100px;
    padding: 20px;
    border: 1px solid #37cbeb;
    border-radius: 28px;
    box-shadow: 0 1px #CCC, 0 5px #DDD, 0 9px 6px -3px #999;
    unicode-bidi: bidi-override;
    overflow-y: hidden;
}

.select {
    width: 100%;
    padding: 14px;
    border: 1px solid #38cbeb;
    border-radius: 0px;
}

.text_input {
    width: 100%;
    padding: 14px;
    border: 1px solid #38cbeb;
    ;
    border-radius: 0px;
}

.form-control {
    border: 1px solid #38cbeb;
    ;
    border-radius: 0px;
}

.button {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    border-radius: 20px;
    background: #66d6ef;
    border: 0px;
    color: white;
    font-size: 30px;
    letter-spacing: 2px;
    box-shadow: 0 1px #CCC, 0 5px #99ecf7, 0 9px 6px -3px #999;
}

.heart {
    min-width: 22px;
    min-height: 50px;
    font-size: 49px;
    color: rgb(233, 54, 40);
    position: absolute;
    top: -15vh;
    animation: rain 5s linear 1;
    z-index: 0;
}

@keyframes rain {
    0% {
        transform: translateY(-10vh) rotateZ(0deg);
    }

    25% {
        transform: translateY(27vh) rotateZ(20deg);
    }

    50% {
        transform: translateY(55vh) rotateZ(-20deg);
    }

    75% {
        transform: translateY(90vh) rotateZ(20deg);
    }

    100% {
        transform: translateY(110vh) rotateZ(-20deg);
    }
}

.rating-description {
    margin: 0;
    font-family: 'Comic Sans MS';
    font-style: italic;
    text-align: center;
    padding-top: 1rem !important;
    font-size: 13px;
}

input[type='date']:after {
    color: rgb(110, 96, 96);
    content: attr(placeholder);
    margin-left: 7px;
}

input[type='time']:after {
    color: rgb(110, 96, 96);
    content: attr(placeholder);
    margin-left: 7px;
}

input::-webkit-date-and-time-value {
    text-align: left !important;
    padding-right: 5px !important;
}

textarea::-webkit-input-placeholder{
    font-size: 12px;
}

/* Loading */

.container_loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height of the viewport */
}

.container_text{
    margin: 5px 10px;
    font-weight: 600;
    font-family: cursive;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #5c2971 #0000;
    animation: l16 1s infinite linear;
  }
  .loader::before,
  .loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
  }
  .loader::before {
    border-color: #9ce3ff #0000;
    animation: inherit; 
    animation-duration: .6s;
    animation-direction: reverse;
  }
  .loader::after {
    margin: 8px;
  }
  @keyframes l16 { 
    100%{transform: rotate(1turn)}
  }

  @media (min-width: 480px){
    .container_text{
        font-size: 37px;
        font-weight: 600;
        font-family: cursive;
    }

    .loader {
        width: 100px;
        aspect-ratio: 1;
        display: grid;
        border: 4px solid #0000;
        border-radius: 50%;
        border-color: #ffa5f7 #0000;
        animation: l16 1s infinite linear;
    
    }
  }

  @media (min-width: 992px){
    .container_text{
        font-size: 25px;
        font-weight: 600;
        font-family: cursive;
    }

    .loader {
        width: 60px;
        aspect-ratio: 1;
        display: grid;
        border: 4px solid #0000;
        border-radius: 50%;
        border-color: #ffa5f7 #0000;
        animation: l16 1s infinite linear;
    
    }
  }