* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: roboto;
    font-size: 1vw;
}

@media (min-width:1200px) and (max-width:1400px) {
    * {
        font-size: 1.5vw;
    }
}

@media (min-width:1000px) and (max-width:1200px) {
    * {
        font-size: 1.7vw;
    }
}

@media (min-width:800px) and (max-width:1000px) {
    * {
        font-size: 2.1vw;
    }
}

@media (min-width:600px) and (max-width:800px) {
    * {
        font-size: 2.3vw;
    }
}

@media (min-width:400px) and (max-width:600px) {
    * {
        font-size: 2.5vw;
    }
}

@media (max-width:400px) {
    * {
        font-size: 2.7vw;
    }
}

@font-face {
    font-family: roboto;
    src: url(./fonts/roboto/Roboto-Regular.ttf);
}

.index-body {
    height: fit-content;
    padding-top: 2%;
}




/* /////////////////////////////////////////////////////////   INDEX PAGE   ///////////////////////////////////////////////////////// */




/* //////////////////////////     NAV     //////////////////////////  */




.index-body nav {
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0% 10%;
}

@media (max-width:1400px) {
    .index-body nav {
        padding: 0% 5%;
    }
}

.index-body nav h1 {
    width: 50%;
    height: fit-content;
    font-size: 2vw;
    color: rgb(34 30 31);
}

@media (min-width:1200px) and (max-width:1400px) {
    .index-body nav h1 {
        font-size: 2.1vw;
    }
}

@media (min-width:1000px) and (max-width:1200px) {
    .index-body nav h1 {
        font-size: 2.3vw;
    }
}

@media (min-width:800px) and (max-width:1000px) {
    .index-body nav h1 {
        font-size: 2.8vw;
    }
}

@media (min-width:600px) and (max-width:800px) {
    .index-body nav h1 {
        font-size: 3.3vw;
    }
}

@media (min-width:400px) and (max-width:600px) {
    .index-body nav h1 {
        font-size: 3.8vw;
    }
}

@media (max-width:400px) {
    .index-body nav h1 {
        font-size: 4.3vw;
    }
}

.index-body nav img {
    width: fit-content;
    height: 100%;
    object-fit: cover;
}

@media (min-width:600px) and (max-width:800px) {
    .index-body nav img {
        height: 70%;
    }
}

@media (min-width:400px) and (max-width:600px) {
    .index-body nav img {
        height: 50%;
    }
}

@media (max-width:400px) {
    .index-body nav img {
        height: 40%;
    }
}



/* //////////////////////////     SECTION     //////////////////////////  */




.index-body section {
    width: 100%;
    height: fit-content;
    padding: 10% 0% 15% 0%;
}

.index-body section form {
    width: 80%;
    height: fit-content;
    margin-left: 10%;
}


@media (max-width:1400px) {
    .index-body section form {
        width: 90%;
        margin-left: 5%;
    }
}



/* ////////////     General Table     //////////// */


.index-body section form table {
    width: 100%;
    height: fit-content;
    background-color: white;
    border-collapse: collapse;
    border: 1px solid black;
}

.index-body section form table th {
    width: 25%;
    text-align: start;
    background-color: rgb(220 221 223);
    color: rgb(87 80 69);
    border: 1px solid black;
    padding: 1%;
    padding-left: 3%;
    font-weight: bold;
}

.index-body section form table td {
    padding: 1% 3%;
    border: 1px solid black;
}

.index-body section form input[type='radio'] {
    width: 1.1vw;
    height: 1.1vh;
}

@media (min-width:400px) and (max-width:800px) {
    .index-body section form input[type='radio'] {
        width: 1.2vw;
        height: 1.2vh;
    }
}

@media (max-width:400px) {
    .index-body section form input[type='radio'] {
        width: 1.3vw;
        height: 1.3vh;
    }
}




/* ////////////     Event Details Table     //////////// */



/* .event-details-table .event-details-table-speakers-cell {
    text-align: justify;
} */

.event-details-table .event-details-table td {
    text-align: start !important;
}



/* ////////////     Attendees Table     //////////// */


.event-attendees-table {
    margin-top: 5%;
}

.index-body section form .event-attendees-table td {
    padding: 0%;
    text-align: center;
}

.index-body section form .event-attendees-table input {
    width: 100%;
    height: 100%;
    padding: 1% 4%;
    border: none;
    outline: none;
    transition: all ease 0.3s;
}

.index-body section form .event-attendees-table input:hover {
    background-color: rgb(220 221 223);
}

#event_attendees_table_input:valid {
    background-color: rgb(220 221 223) !important;
}


/* ////////////     Ratings Table     //////////// */


.event-rating-table {
    margin-top: 5%;
}

.event-rating-table td {
    padding: 1% !important;
}

.event-rating-table thead {
    background-color: rgb(220 221 223);
}

.event-rating-table thead td {
    color: rgb(87 80 69);
    font-weight: bolder;
    text-align: center;
}

.event-rating-table thead td:first-of-type {
    text-align: start;
    padding-left: 3% !important;
}

.event-rating-table tbody {
    padding: 1%;
}

.event-rating-table tbody th {
    width: 40% !important;
}

.event-rating-table tbody td {
    text-align: center;
    width: 15% !important;
}

@media (min-width:1200px) and (max-width:1400px) {
    .event-rating-table tbody td {
        width: 14% !important;
    }
}

@media (min-width:1000px) and (max-width:1200px) {
    .event-rating-table tbody td {
        width: 12% !important;
    }
}

@media (min-width:500px) and (max-width:1000px) {
    .event-rating-table tbody td {
        width: 11% !important;
    }
}

@media (max-width:500px) {
    .event-rating-table tbody td {
        width: 13% !important;
    }
}

.seperate-speakers-rating td {
    border: none !important;
    background-color: rgb(220 221 223);
}

.seperate-speakers-rating p {
    opacity: 0.0;
}




/* ////////////     opinions Table     //////////// */


legend {
    width: 100%;
    height: fit-content;
    padding: 1%;
    background-color: rgb(220 221 223);
    color: rgb(87 80 69);
    margin-top: 5%;
    padding-left: 3%;
    border: 1px solid black;
    border-bottom: unset;
    font-weight: bolder;
}

.pragram-opinions-table {
    margin-top: 0%;
}

.pragram-opinions-table td {
    padding: 1% !important;
}

.pragram-opinions-table thead {
    background-color: rgb(220 221 223);
}

.pragram-opinions-table thead td {
    color: rgb(87 80 69);
    font-weight: bolder;
    text-align: center;
}

.pragram-opinions-table thead td:first-of-type {
    text-align: start;
    padding-left: 3% !important;
}

.pragram-opinions-table tbody {
    padding: 1%;
}

.pragram-opinions-table tbody th {
    width: 40% !important;
}

.pragram-opinions-table tbody td {
    text-align: center;
    width: 15% !important;
}


/* ////////////     Textarea Group     //////////// */


.textarea-group {
    width: 100%;
    height: fit-content;
    margin-top: 5%;
}

.textarea-group label {
    width: 100%;
    height: fit-content;
    display: block;
    padding: 1%;
    padding-left: 5%;
    background-color: rgb(220 221 223);
    color: rgb(87 80 69);
    font-weight: bolder;
    border: 1px solid black;
}

.textarea-group textarea {
    width: 100%;
    height: 300px;
    padding: 2% 5%;
    outline: none;
}

.textarea-group .signature-group {
    width: 100%;
    height: fit-content;
    display: flex;
    border: 1px solid black;
    /* border-top: unset; */
    transform: translateY(-1.5vh);
} 

.textarea-group .signature-group label {
    width: 50%;
    height: fit-content;
    display: block;
    padding: 1%;
    padding-left: 5%;
    background-color: rgb(220 221 223);
    color: rgb(87 80 69);
    font-weight: bolder;
    border: none;
    border-right: 1px solid black;
}

.textarea-group .signature-group input {
    width: 50%;
    height: fit-content;
    display: block;
    padding: 1%;
    padding-left: 5%;
    border: none;
    outline: none;
    transition: all ease 0.3s;
}

#signature_input:hover {
    background-color: rgb(220 221 223);
}

#signature_input:valid {
    background-color: rgb(220 221 223) !important;
}


/* ////////////     Footer     //////////// */



.index-body section input[type='submit'] {
    width: fit-content;
    height: fit-content;
    padding: 1% 3%;
    background-color: rgb(220 221 223);
    color: rgb(87 80 69);
    font-weight: bolder;
    margin-top: 5%;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid black;
}

.index-body section .print-div {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 5%;
}

.index-body section .print-div .form-print-btn {
    width: fit-content;
    height: fit-content;
    padding: 1% 3%;
    background-color: rgb(6, 53, 148);
    color: white;
    font-weight: bolder;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid black;
}

.index-body section .print-div .form-print-btn-note {
    color: red;
    font-weight: bolder;
    margin-left: 5%;
}

.form-note {
    width: 100%;
    height: fit-content;
    margin-top: 5%;
}




/* /////////////////////////////////////////////////////////   HANDLING PAGE   ///////////////////////////////////////////////////////// */




.handling-body {
    display: flex;
    justify-content: center;
    align-items: center;
}


.handling-msg {
    width: 50%;
    height: fit-content;
    background-color: rgb(220 221 223);
    padding: 10% 5%;
    border-radius: 5px;
}

@media (min-width:1000px) {
    .handling-msg {
        padding: 5% 3%;
    }
}

@media (min-width:800px) and (max-width:1000px) {
    .handling-msg {
        width: 70%;
    }
}

@media (min-width:600px) and (max-width:800px) {
    .handling-msg {
        width: 75%;
    }
}

@media (min-width:400px) and (max-width:600px) {
    .handling-msg {
        width: 80%;
    }
}

@media (max-width:400px) {
    .handling-msg {
        width: 85%;
    }
}

.handling-msg span {
    font-size: 2vw;
    font-weight: bolder;
}

@media (min-width:1200px) and (max-width:1400px) {
    .handling-msg span {
        font-size: 2.1vw;
    }
}

@media (min-width:1000px) and (max-width:1200px) {
    .handling-msg span {
        font-size: 2.4vw;
    }
}

@media (min-width:800px) and (max-width:1000px) {
    .handling-msg span {
        font-size: 7vw;
    }
}

@media (min-width:600px) and (max-width:800px) {
    .handling-msg span {
        font-size: 8vw;
    }
}

@media (min-width:400px) and (max-width:600px) {
    .handling-msg span {
        font-size: 9vw;
    }
}

@media (max-width:400px) {
    .handling-msg span {
        font-size: 10vw;
    }
}

.handling-msg p {
    margin-top: 3%;
    color: rgb(87 80 69);
    font-weight: bolder;
}

@media (min-width:800px) and (max-width:1000px) {
    .handling-msg p {
        font-size: 4vw;
    }
}

@media (min-width:600px) and (max-width:800px) {
    .handling-msg p {
        font-size: 5vw;
    }
}

@media (min-width:400px) and (max-width:600px) {
    .handling-msg p {
        font-size: 6vw;
    }
}

@media (max-width:400px) {
    .handling-msg p {
        font-size: 7vw;
    }
}

.handling-msg a {
    width: fit-content;
    height: fit-content;
    display: block;
    margin-top: 3%;
    color: white;
    padding: 2% 3%;
    text-decoration: none;
    border-radius: 5px;
}

@media (min-width:800px) and (max-width:1000px) {
    .handling-msg a {
        font-size: 4vw;
    }
}

@media (min-width:600px) and (max-width:800px) {
    .handling-msg a {
        font-size: 5vw;
    }
}

@media (min-width:400px) and (max-width:600px) {
    .handling-msg a {
        font-size: 6vw;
    }
}

@media (max-width:400px) {
    .handling-msg a {
        font-size: 7vw;
    }
}

.evaluation-scs-msg {
    color: green;
}

.evaluation-scs-msg a {
    background-color: green;
}

.dublicate-evaluation-err-msg span {
    color: red;
}

.dublicate-evaluation-err-msg a {
    background-color: red;
}