﻿
html {
}

/* Universal Styles */
body, input, select, button, label {
   font-family: "Segoe UI",Inter, system-ui,  Arial, sans-serif;
    line-height: normal;
    font-size: 16px !important;
}

body {
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 16px;
    box-sizing: border-box;
}
/*

.small {
    font-size: 0.875rem;
}

.title {
    font-size: 1.5rem;
}

    */

textarea {
    line-height: normal;
    height: auto;
}



.dyn-content {
}

.content-scroll-div {
    height: calc(100vh - 225px);
    overflow-y: auto;
}

.DynReportHeader {
    background-color: #2b8ecf;
    color: white;
    font-weight: lighter;
    text-align: left !important;
    white-space: nowrap;
}

.CBStyle {
    display: inline-block;
}

.CbContainer {
    display: flex;
    align-items: center;
}

.groupedElement {
    display: flex;
    white-space: nowrap;
    margin-top: 2px;
    gap: 5px;
}

/* Grid Container */
.grid-container {
    width: 100%; /* Expand to fit the container */
    border-collapse: collapse; /* Collapse borders */
}

    /* Grid Headers */
    .grid-container thead {
        background-color: #E0E0E0; /* Gray header */
    }

    .grid-container th {
        padding: 8px; /* Padding inside headers */
        text-align: left; /* Align text to the left */
        font-weight: bold; /* Bold font for headers */
    }

    /* Grid Rows */
    .grid-container tr:nth-child(odd) {
        background-color: #F7F7F7; /* Light gray for odd rows */
    }

    .grid-container tr:nth-child(even) {
        background-color: #FFFFFF; /* White for even rows */
    }

    /* Grid Cells */
    .grid-container td {
        padding: 8px; /* Padding inside cells */
        text-align: left; /* Align text to the left */
        white-space: nowrap; /* Keep content on one line */
    }

    /* Text Styles */
    .grid-container th, .grid-container td {
        color: black; /* Black text */
    }

.GridViewCheckbox {
    transform: scale(1.4); /* You can adjust the scaling factor */
    margin: 0 auto; /* Center the checkbox if it's inside a container */
}

.sticky-header th {
    position: sticky;
    top: 0;
    z-index: 300;
}

#gridContainer::-webkit-scrollbar {
    width: 7px;
}

#gridContainer::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

#gridContainer::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

    #gridContainer::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }



/* Dropdown Use in Lang CB*/
.custom-dropdown {
    /*  font-size: 18px; HERE */
    padding: 5px;
    border: 0px solid #ccc;
    border-radius: 2px;
    text-align: right;
    color: #0a0572; /* Harmonized Text color */
}

    .custom-dropdown:focus {
        border-color: #007bff;
        text-align: right;
    }

/* Image */
#LogoImage {
    float: left;
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    max-height: 80px;
}


input[type="text"] {
    /*font-size: 14px;  HERE*/
}

/* Subtle Div Border */
.int-div {
    border: 0.1px solid #e0e0e0;
    padding: 7px;
    margin: 7px;
    width: 95%;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Buttons */
.nice-button {
    background-color: white;
    color: #7f8084;
    padding: 5px 5px;
    border: solid 1px;
    border-radius: 2px;
    cursor: pointer;
    /*   font-size: 18px; HERE */
    transition: background-color 0.3s ease;
}

    .nice-button:hover {
        color: #2b8ecf; /* Harmonized color */
    }


.label-textbox-container label,
.label-textbox-container input[type="text"] {
    display: block; /* Make them block-level elements so they stack vertically */
    margin-bottom: 15px; /* Add some space below each element */
}


.EligibilityDataEntryContainer {
    float: left;
    vertical-align: middle;
    line-height: 18px;
}

.ElegibilityDataEntryDivContainer {
    margin: 15px;
}

.res-table {
    border-collapse: collapse;
    max-width: 80%;
    margin-bottom: 12px;
}

    .res-table th, .res-table td {
        border: 0.1px solid #ddd;
        text-align: left;
        padding: 2px;
        padding-right: 10px;
    }

    .res-table th {
        background-color: #e5e5e5;
    }

    .res-table tr {
        border-bottom: 1px solid #000;
    }

        .res-table tr:last-child {
            border-bottom: none;
        }





.Elg-Font {
    color: #0a1c64;
    gap: 5px;
    line-height: 1.8;
}

.Elg-form-group {
    margin-top: 5px;
    margin-bottom: 5px;
}

.Elg-form-label {
}

.Elg-form-input {
}


.Elg-error-label {
    color: Red;
    line-height: 1.8;
    margin-top: 7px;
}

.Elg-form-CheckBox input[type="checkbox"] {
    margin-top: 15px;
    transform: scale(1.5);
    margin-left: 10px;
}


.DynField-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}


/* Grid Container */
.GridStyle1 {
    width: 100%; /* Expand to fit the container */
    border-collapse: collapse; /* Collapse borders */
}

    /* Grid Headers */
    .GridStyle1 thead {
        background-color: #E0E0E0; /* Gray header */
    }

    .GridStyle1 th {
        padding: 3px; /* Padding inside headers */
        padding-right: 5px;
        text-align: left; /* Align text to the left */
        font-weight: bold; /* Bold font for headers */
        white-space: nowrap;
    }

    /* Grid Rows */
    .GridStyle1 tr:nth-child(odd) {
        background-color: #F7F7F7; /* Light gray for odd rows */
    }

    .GridStyle1 tr:nth-child(even) {
        background-color: #FFFFFF; /* White for even rows */
    }

    /* Grid Cells */
    .GridStyle1 td {
        padding: 3px; /* Padding inside cells */
        text-align: left; /* Align text to the left */
        white-space: nowrap; /* Keep content on one line */
    }

    /* Text Styles */
    .GridStyle1 th, .GridStyle1 td {
        color: black; /* Black text */
    }


/* For input controls: TextBox and DropDownList */
.input-style, .input-style[type='text'], .input-style select {
    max-width: 100px;
}

.input-date {
    max-width: 150px;
    width: 150px;
}

.input-styleMe, .input-styleMe[type='text'], .input-style[type='email'], .input-styleMe select {
    max-width: 150px;
    width: 150px;
}

.input-styleLo, .input-styleLo[type='text'] {
    max-width: 280px;
}

.input-style-cb-Lo {
    max-width: 283px !important;
}

    .input-style-cb-Lo[disabled] {
        color: black; /* Keeps text color black */
        background-color: #f3f3f3; /* A light gray background to simulate disabled appearance */
    }



.no-arrow {
    -webkit-appearance: none; /* Remove arrow for WebKit browsers like Chrome and Safari */
    -moz-appearance: none; /* Remove arrow for Firefox */
    appearance: none; /* Remove arrow for modern browsers that support this property */
    /* Optional: Add some background with a down arrow if you want a custom arrow image */
    /* background: white url('down-arrow.png') no-repeat right; */
    /* background-position: right 10px center; Adjust the position of your custom image */

    background: white url('Imgs/icons/White.png') no-repeat right;
}



.input-styleML {
    max-width: 90%;
    width: 90%;
    height: 200px;
}


.fieldset {
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 7px; /* Rounded corners */
    padding: 5px; /* Space inside the fieldset */
    margin: 5px 0; /* Space outside the fieldset */
    /* background-color: #f9f9f9; /* Light background */
    box-sizing: border-box;
    width: 800px;
    display: block;
}

.legend {
    padding: 0 5px;
    font-weight: bold;
    color: #333; /* Dark grey color for the text */
    padding: 3px 5px; /* Space around the text */
    border-radius: 7px; /* Rounded corners for the legend */
    width: auto;
}



.div-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.label-grid-pair {
    display: flex;
    flex-direction: column;
}


/*------------------------------------------------------*/
.InputGrp {
    display: inline-block;
    margin: 3px;
}


/* Responsive Design */
@media only screen and (max-width: 600px) {
    html {
        /*  font-size: 18px; HERE */
    }
}
