.header_image {
    border-radius: 20px;
    color: #fff;
    width: 200px;
    margin-bottom: 18px;
}

.container_form {
    background-size: cover;
    background-image: url('https://digitalbondmena.com/qsystemformproject/frontend/water/main-ltr/images/b.g.png');

}
.form-control{
    height: 6rem;
}

.forward {
    background-color: #1976D2;
}

.forward:hover {
    background-color: #145ca4;
}


input_form{
    height: 20px;
}

.left_side {
    background-size: cover;
    background-image: url(https://digitalbondmena.com/qsystemformproject/frontend/water/main-ltr/images/back.png);
     display: none !important;

}


h3.main_question strong {
    display: block;
    margin-bottom: 5px;
}

.form_scroll{
    background-color: #d3e8f7;
    border-radius: 20px;
    padding: 18px;
    width: 100% !important;
}
#evaluationDiv{
    background-color: #d3e8f7;
    border-radius: 20px;
    padding: 35px;
}
.form_body{
    height: 100%;
    justify-content: center;
}


.feedbackTextarea{
    height: 145px;
}

.main_question{
    font-size: 2.2rem !important;
}



#wizard_container{
    display: flex;
    align-items: center;
    width: 100%;
}

.form-label{
    font-size: 36px !important;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-group{
    min-height: 250px;
}

.form-group-star{
    min-height: auto;
}

.cancel_button{
    background-color: #ef4444;
    color:white;
    font-size: 30px;
    border: none;
    padding: 7px 24px;
    margin-bottom: 18px;
    float:inline-start;
}

.cancel_button_evaluation{
    background-color: #ef4444;
    color:white;
    font-size: 30px;
    border: none;
    padding: 7px 24px;
    margin-bottom: 18px;
    float:inline-end;
    margin-top: 10px;

}
.cancel_button:hover{
    background-color: #ec1616;
}

.cancel_button_evaluation:hover{
    background-color: #ec1616;
}

.button_form{
    font-size: 30px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.form_input{
    font-size: 23px;
}

span.error{
    right: auto;
    left: 5px;
    top:18px;
    font-size: 23px;
    height: auto;
}

button.backward:hover{
    background-color: #beb7b7;
}

.disabled-button {
    pointer-events: none; 
    cursor: not-allowed; 
}

.form_container, #evaluationDiv{
    width: 87%;
}


label.disappear{
    display:none;
}

label.error{
    color: red;
    font-size: 24px;
    margin-right: 33px;
    display: inline-block !important;
}


@media (max-width: 600px)
{
    .form_scroll{
        width: 94% !important;
        margin:auto;
    }
    label.error{
        margin-right: 0px;
    }
}

@media (max-width: 766px) {
    .keyboard{
        grid-template-columns: repeat(8, 1fr) !important;
    }
    .form_container,#evaluationDiv{
        width: 90%;
    }
}

@media (min-height: 1000px) {
    .left_side{
        display: none !important;
    }
}


.submit_image{
    margin-bottom: 2.2rem;   
}

.submit_div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}
.submit_form{
    text-align : center;
}

.submit_form p{
    margin-bottom: 0px;
}


.radio-container {
    display: flex;
    align-items: center;
}
.radio-container input[type="radio"] {
    display: none;
}
.radio-container label {
    cursor: pointer;
    margin-right: 10px;
    font-size: 24px;
}
.radio-container input[type="radio"]:checked + label {
    color: #007bff;
}
.icon-group {
    display: inline-block;
    margin-right: 5px;
}

[class*=" icon-"], [class^=icon-]{

}

.form-group i{
    font-size: 8.125rem;
    position: relative;
    display: flex;
    gap: 4.7rem;
    color:black;
    top:-7px;
}

.form_icon{
    display: flex;
    flex-direction: column-reverse;
    min-height: auto;
    margin-bottom: 81px;
}

.i-group i:hover {
    color: #ffcc00; /* Change to desired hover color */
}

.i-group.selected i {
    color: #ff6600; /* Change to desired selected color */
}

.icon_form_group{
    display: flex;
    gap:8.7rem;
    min-height: 5rem;
    margin-top: 1rem;
    justify-content: center;
    margin-left: 7.7rem;
}

.star-rating {
    display: flex;
    gap:0.1rem;
    justify-content: center;
    flex-direction: row-reverse;
}
.star-rating input {
    display: none; /* Hide radio inputs */
}
.star-rating label {
    font-size: 9.7rem;
    color: #ccc;
    cursor: pointer;
    transition: color 0.3s;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffcc00; /* Color for selected and hovered stars */
}
.star-rating input:checked ~ label.star-1,
.star-rating input:checked ~ label.star-2,
.star-rating input:checked ~ label.star-3,
.star-rating input:checked ~ label.star-4,
.star-rating input:checked ~ label.star-5 {
    color: #ffcc00; /* Color for selected stars */
}


@media (max-width: 2000px) and (max-height: 1200px) {
    .header_image{
        width: 128px;
    }
    .main_question{
        font-size: 27px !important;
    }
    .form_input{
        font-size: 18px ;
    }
    .form-control,.form-group {
        height: auto;
        min-height: auto;
    }
    .form-label{
        font-size: 24px !important;
    }
    .cancel_button, .button_form,.cancel_button_evaluation{
     font-size: 20px !important;
     
    }
    span.error{
        top:9px;
        font-size:18px;
    }
    label.error{
        font-size: 17px;
        margin-right: 15px;
    }
    .form_icon{
        margin-bottom: 20px;
    }
    .form-group i{
        font-size: 4.125rem;
    }
    .icon_form_group{
        gap: 3.7rem;
        margin-top: 5px;
        justify-content:flex-start;
        margin-left: 0px;
    }
    .star-rating label {
        font-size: 3.5rem;
    }
    
    .star-rating {
        justify-content: flex-end;
        flex-direction: row-reverse;
    }
    .form_container, #evaluationDiv{
        width: 70%;
    }
}

@media (max-width: 600px)
{
    .form-group i{
        font-size:2.125rem;
    }

    .icon_form_group {
        gap: 1.2rem;
        min-height:3rem;
    }
    .button_form,.cancel_button_evaluation{
        padding:12px 20px !important;
    }
    .cancel_button{
        padding: 8px 20px !important;
    }
    .cancel_button, .button_form,.cancel_button_evaluation{
        font-size: 16px !important;
    }
   
}