/* CSS Applicable to whole page */
:root {
    --fontSize: 1.0rem;
    --grid-row-hover-color: #fef6a7;
    --grid-row-select-color: #666666;
}

* {
    /*    --fontSize: 1.0rem;*/
    font-family: 'Trebuchet MS';
    line-height: calc(1.5 * var(--fontSize));
    font-size: var(--fontSize);
}

h1, h2, h3, h4 {
    font-weight: bold;
    font-size: 1.125rem;
}

h1 {
    font-size: 1.5rem;
}

h3, h4 {
    margin-top: 0;
}

input {
    border-color: black;
}

    input[type=text]:focus,
    input[type=submit]:focus {
        outline: 2px solid black;
        outline-offset: 2px;
    }


table {
    width: 100%;
}

.button {
    background-color: rgb(0,25,112);
    color: white;
    margin-left: 5%;
    border-color: black;
}

.displayOff {
    display: none;
    visibility: hidden;
}

/* Main Content CSS */
.mainForm {
    max-width: 98vw;
    font-family: 'Trebuchet MS';
}

/* Main CSS Grid Styling Start */
.mainGridContainer {
    margin: 0 15% 0 15%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.75fr 0.5fr 0.5fr 0.5fr;
    grid-template-areas:
        "appInfo"
        "disclaimerInfo"
        "searchInfo"
        "gridviewInfo"
        "footerInfo"
}

.gridContainerItem1 {
    grid-area: appInfo;
    align-self: self-end;
}

.gridContainerItem2 {
    grid-area: disclaimerInfo;
    align-self: center;
}

.gridContainerItem3 {
    grid-area: searchInfo;
    align-self: start;
}

.gridContainerItem4 {
    grid-area: gridviewInfo;
}

.gridContainerItem5 {
    grid-area: footerInfo;
    text-align: center;
    align-self: self-end;
    border-top: solid black 1px;
}

.searchControls {
    padding-bottom: 5%;
    border-bottom: solid black 1px;
}
/* Main CSS Grid Styling End */ /* This is main css grid structure for a specific page and should be moved to that page. */
.center {
    align-content: center;
    text-align: center;
}

/* Input Business Legal/Trade Grid Styling Start */
.searchContainer {
    display: grid;
    grid-template-rows: 55% 50%;
    grid-template-columns: 1.5fr 0.5fr 1.5fr;
    grid-template-areas:
        "legalNameSearch"
        "tradeNameSearch";
    row-gap: 10%;
    margin: 0 0 5% 0;
}

.searchContainerItem1 {
    grid-area: legalNameSearch;
    display: grid;
    grid-template-columns: 2fr 0.75fr 1fr;
}

.searchContainerItem2 {
    grid-area: tradeNameSearch;
    display: grid;
    grid-template-columns: 2fr 0.75fr 1fr;
}

.searchContainerItem3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4%;
}
/* Input Business Legal/Trade Grid Styling End */
/* ********************************* */
/*       CSS for gridsviews          */
/* ********************************* */
.gridView {
    height: 40vh;
    overflow-y: scroll;
    width: 100%;
    margin: 0 0 5% 0;
}

.businessHeader {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.businessGridBtnCol input {
    background-color: rgb(0,25,112);
    color: white;
    width: 72px;
    height: 28px;
}

.fixedHeader {
    position: sticky;
    top: 0;
    background-color: rgb(0,25,112);
    color: white;
    border: solid white 2px;
}


.table-hover tbody tr:not(tr.fixedHeader):hover,
.table-hover tbody tr:not(tr.fixedHeader):focus {
    background-color: var(--grid-row-hover-color);
    color: black;
    outline: 2px solid #005A9C;
}

.table tbody tr.selected {
    background-color: var(--grid-row-select-color);
    color: white;
}


/* Media Query for 200% zoom */
/*@media (min-resolution: 2dppx) {
    .mainGridContainer {
        margin: 0 30% 0 0;
    }

    #warningMessage {
        width: 100px;
    }
}

@media (min-resolution: 2dppx) {
    .mainGridContainer {
        margin: 0 30% 0 0;
    }

    #warningMessage {
        width: 100px;
    }
}
*/
tr.selectedRow {
    background-color: #666666;
    color: white;
}
#warningMessage, 
.warningMessage

{
    color: red;
    outline: 2px solid red;
    outline-offset: 2px;
}

.warningOff{
    display: none;
    visibility: hidden;
}

.warningOn {
    text-align: center;
    margin-left: 0;
    height: fit-content;
    color: red;
    outline: 2px solid red;
    outline-offset: 2px;
}

#employerResult{
    position: sticky;
}

#employerGridCaptionDiv{
    text-align: center;
    display: none;
}

caption{
    color: black !important;
    background-color: white !important;
}

/*table caption {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    padding: 10px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}*/

@media (max-width: 384px) {
    .mainGridContainer,
    .searchContainer {
        display: block;
        grid-template-columns: none;
        gap: 0;
        margin: 0;
    }

        /* Ensure content doesn't overflow */
        .mainGridContainer > section,
        .searchContainer > div {
            width: 100%;
            margin: 10px 0;
        }
}