/* Existing CSS */

body {
    margin: 0;
    padding: 0;
}

.form-area {
    display: flex;
    height: 50vw; /* Set the height to be 50% of the viewport width */
    position: relative; /* Add relative positioning to the form-area */
}

.checkboxes-container {
    position: absolute; /* Position the checkboxes-container absolutely */
    bottom: 8%; /* Position it 20% from the bottom of the form-area */
    left: 50%; /* Position it at the horizontal center of the form-area */
    transform: translateX(-50%); /* Center the checkboxes-container horizontally */
    z-index: 1; /* Ensure checkboxes-container appears above other containers */
    display: flex;
    flex-direction: column; /* Display the checkboxes and labels in a column */
    align-items: center;
    justify-content: center;
    cursor: pointer;

    width: 45%; /* Set the width of the input field */
    height: 50px; /* Set the height of the input field */
    font-size: 22px; /* Adjust the font size */
    padding: 10px; /* Add padding */
    border: 1px solid #ccc; /* Add border */
    border-radius: 5px; /* Add border radius */
    box-sizing: border-box; /* Include padding and border in width calculation */

    background-color: #ddddff;
    opacity: 0.6; /* Set the opacity to 70% (adjust as needed) */
}


.checkboxes-container p {
    display: block;
    margin: 35px 20px; /* Add margin for spacing between lines */
}

.left-form-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ccc;
    background-image: url('./img/she.jpg');
    background-size: contain; /* Scale the image to fit the container */
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
}

.right-form-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ccc;
    background-image: url('./img/he.jpg');
    background-size: contain; /* Scale the image to fit the container */
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
}
.form-container:hover {
    background-color: #f0f0f0;
}

.form-container input[type="date"] {
    font-size: 5vw; /* Set font size to 5% of the viewport width */
    width: 80%;
    margin: 10px;
}

/* Form field styles */
.form-field {
    width: 80%; /* Set the width of the input field */
    height: 50px; /* Set the height of the input field */
    font-size: 16px; /* Adjust the font size */
    padding: 10px; /* Add padding */
    border: 1px solid #ccc; /* Add border */
    border-radius: 5px; /* Add border radius */
    box-sizing: border-box; /* Include padding and border in width calculation */
    opacity: 0.9; /* Set the opacity to 70% (adjust as needed) */
}

.tabs {
    overflow: hidden;
    background-color: #f1f1f1;
}

.tablink {
    display: inline-block;
    width: 24vw; /* Set width to 25% of the viewport width */
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 0;
    transition: background-color 0.3s;
    box-sizing: border-box;
    font-size: 2em;
}

.tablink:hover {
    background-color: #ccc;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

.result td {
    text-align: center;
    color: black; /* Default color for "Yes" */
    height: 3em; /* Set a fixed height for the table cells */
    vertical-align: middle; /* Vertically center the text */
}

.result td[data-value="No"] {
    text-align: center;
    color: #cccccc; /* Light gray */
}

.scrollable-table {
    overflow-x: auto;
    display: block;
    max-width: 100%;
}

.fixed-column {
    position: sticky;
    left: 0;
    background-color: white; /* Adjust background color as needed */
    z-index: 1;
}


/* Styles for form fields */
.form-group {
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Space items evenly */
    align-items: center; /* Align items vertically */
}

.form-group input[type="date"] {
    width: 30%; /* Set width to 45% of the parent container */
    font-size: 3em; /* Set font size to 1em */
}


/* Custom styles for each tab */

/* Women tab */
#womenTab {
    background-color: lightcoral; /* Light red */
}

/* Men tab */
#menTab {
    background-color: lightblue; /* Light blue */
}

/* Pair Skating tab */
#pairSkatingTab {
    background-color: #33cc33; /* light green */
}

/* Ice Dance tab */
#iceDanceTab {
    background-color: #FFCC00; /* yellow aas per isu*/
}

/* Custom styles for the result tab corresponding to each tab */


/* Set font size for the result areas */
.result {
    font-size: 5vw; /* Set font size to 10% of the display width */
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 2;
    cursor: pointer;
    overflow-y: scroll;  
}

/* New CSS for the table font adjustment */

.table {
    font-size: 12px; /* Initial font size */
}

/* Media query for even smaller screens */
@media screen and (max-width: 412px) {
    .table {
        font-size: 8px; /* Adjust font size for very large screens if needed */
    }

        .result {
        font-size: 10px; /* Adjust font size for very large screens if needed */
    }

    /* Adjust tab text font size */
    .tablink {
        font-size: 16px; /* Half the current size */
    }
    
    /* Adjust form field font size */
    .form-field {
        font-size: 18px; /* Double the current size */
    }
}

@media screen and @media screen and (min-width: 413px) and (max-width: 576px) {
    .table {
        font-size: 10px; /* Adjust font size for very large screens if needed */
    }

        .result {
        font-size: 14px; /* Adjust font size for very large screens if needed */
    }

    /* Adjust tab text font size */
    .tablink {
        font-size: 14px; /* Half the current size */
    }
    
    /* Adjust form field font size */
    .form-field {
        font-size: 14px; /* Double the current size */
    }
}


/* Media query for smaller screens */
@media screen and @media screen and (min-width: 577px) and (max-width: 768px) {
    .table {
        font-size: 10px; /* Adjust font size for smaller screens */
    }
}


/* Media query for even smaller screens */
@media screen and @media screen and (min-width: 769px) and (max-width: 1024px) {
    .table {
        font-size: 12px; /* Adjust font size for very large screens if needed */
    }

        .result {
        font-size: 18px; /* Adjust font size for very large screens if needed */
    }

    
    /* Adjust tab text font size */
    .tablink {
        font-size: 16px; /* Half the current size */
    }
    
    /* Adjust form field font size */
    .form-field {
        font-size: 20px; /* Double the current size */
    }
}



/* Media query for very large screens */
@media screen and (min-width: 1025px) {
    .table {
        font-size: 16px; /* Adjust font size for very large screens if needed */
    }

        .result {
        font-size: 44px; /* Adjust font size for very large screens if needed */
    }

    
    /* Adjust tab text font size */
    .tablink {
        font-size: 3em; /* Half the current size */
    }
    
    /* Adjust form field font size */
    .form-field {
        font-size: 32px; /* Double the current size */
    }
}