/* Page Layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

form#webForm {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the form takes up at least the viewport height */
    position: relative;
}

.wrapper {
    display: flex;
    flex: 1;
}

.aside {
    position: absolute;
    width: 100px;
    height: 100%;
    top: 0;
    left: 0;
    background: #e2e2e2;
    font-family: 'Open Sans', sans-serif !important;
}

    .aside ul {
        position: absolute;
        text-align: center;
    }

.content {
    margin-left: 100px;
    padding: 20px;
    width: 100%;
    font-family: 'Open Sans', sans-serif !important;
    min-height: 900px;
}

.footer {
    width: 100%;
    background: #24303B;
    color: #fff;
    padding: 10px;
    text-align: center;
    position: relative;
}

/* Menu */
.menu > li > a {
    padding: 0.4rem;
    display: block;
    line-height: 1;
    text-align: center;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

    .menu > li > a:hover {
        text-decoration: none !important;
    }

        .menu > li > a:hover > i {
            color: #24303B !important;
        }

    .menu > li > a img, .menu > li > a i, .menu > li > a svg {
        margin-right: 0.25rem;
        display: block;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .menu > li > a > span {
        font-size: 12px;
        color: #222E3A;
        font-weight: bold;
    }

a.dashboardButton {
    text-decoration: none !important;
}

.customsMenu {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0px !important;
    display: inline-block !important;
    position: relative;
}

    .customsMenu:hover .customsSwap {
        display: inline !important;
    }

    .customsMenu > img {
        margin-bottom: 0px !important;
    }

.customsSwap {
    padding-left: 15px;
    padding-right: 15px;
    display: none !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

a.logOutButton {
    text-decoration: none !important;
}

.submenu {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 10px;
}

    .submenu li a:hover {
        border-top-right-radius: 10px;
        color: #24303B !important;
        text-decoration: none !important;
        font-weight: bold !important;
    }

.is-dropdown-submenu {
    background: #e2e2e2 !important;
    border: 0px solid #cacaca !important;
}

a.newPageButton {
    line-height: inherit;
    color: #222E3A !important;
    cursor: pointer;
    font-weight: normal !important;
}

/* Layout Help */
.inLineClass {
    display: inline !important;
}
.left {
    float: left;
}
.textRight td {   
    text-align: right;
}
.gapLeft {
    padding-left: 50px;
}
.marginSmall {
    margin-left: 60px;
}

.userChoicesLeft {
    background: inherit;
    border: 0px !important;
    width: 200px;
    float: left;
    vertical-align: top;
}
.userChoicesRight {
    width: 400px;
    float: left;
    vertical-align: top;
}

/* Divs */
.contentRow {
    max-width: 75rem;
    margin-right: auto;
    margin-left: auto;
}

.marginDiv {
    margin: .93rem .93rem .93rem .93rem;
}

.inputDiv {
    border-width: 0px !important;
    margin: 1px 0 1px 0;
    padding: .93rem .93rem .93rem .93rem;
    border-radius: 10px;
    width: 100%;
}
.inputDivFlex {
    border-width: 0px !important;
    margin: 1px 0 1px 0;
    border-radius: 10px;
    width: 100%;
    display: flex;
}

.inputDivHalf {
    border-width: 0px !important;
    margin: 1px 0 1px 0;
    padding: .46rem .46rem .46rem .46rem;
    border-radius: 10px;
    width: 50%;
}
.inputDivHalfFlex {
    border-width: 0px !important;
    margin: 1px 0 1px 0;
    padding: .46rem .46rem .46rem .46rem;
    border-radius: 10px;
    width: 50%;
    display: flex;
}

.divBox {
    background-color: #e2e2e2;
    border-radius: 30px;
    background-clip: content-box;
}
.entrytabsmall {
    max-width: 380px;
    clear: left; /*  font-size: 12px;*/
}

    .entrytabsmall > div {
        max-width: 380px;
        clear: left;
        padding-left: 5px;
        display: -webkit-flex; /* Safari */
        display: flex; /* equal height of the children */
        padding-top: 5px;
    }

        .entrytabsmall > div > label {
            width: 120px;
            padding: 0px 10px 0 0;
            float: left;
            display: block;
            text-align: right;
        }

            .entrytabsmall > div > label.c4InputLabelBoxSmall {
                font-size: .83rem !important;
                padding-top: 2px;
            }

.entrytabmedium {
    max-width: 650px;
    clear: left; /*  font-size: 12px;*/
    width: 100%;
}

    .entrytabmedium > div {
        max-width: 650px;
        clear: left;
        padding-left: 5px;
        display: -webkit-flex; /* Safari */
        display: flex; /* equal height of the children */
        padding-top: 5px;
        align-items: center;
    }


        .entrytabmedium > div > label {
            float: left;
            display: block;
            width: 200px;
            padding: 0px 20px 0 0;
            text-align: right;
            font-size: 100%;
        }
            .entrytabmedium > div > label.c4InputLabelBoxVerySmall {
                font-size: .83rem !important;
                padding-top: 0px;
                padding-bottom: 0px;
                line-height: 20px !important;
            }
            .entrytabmedium > div > label.c4InputLabelBoxSmall {
                font-size: .83rem !important;
                padding-top: 2px;
            }

        .entrytabmedium > div > span {
            width: 100%;
            line-height: 1.5;
        }

.entrytablarge {
    max-width: 950px;
    clear: left; /*  font-size: 12px;*/
}
    .entrytablarge > div {
        max-width: 950px;
        clear: left;
        padding-left: 5px;
        display: -webkit-flex; /* Safari */
        display: flex; /* equal height of the children */
        padding-top: 5px;
        align-items: center;
    }
        .entrytablarge > div > label {
            float: left;
            display: block;
            width: 300px;
            padding: 0px 30px 0 0;
            text-align: right;
            font-size: 100% !important;
        }
        .entrytablarge > div > label.c4InputLabelBoxSmall {
            font-size: .83rem !important;
            padding-top: 2px;
        }


.entrytablarge2col:after {
    content: "";
    display: table;
    clear: both;
}
.entrytablarge1of2col {
    float: left;
    width: 100px;
}
.entrytablarge1of2col145 {
    float: left;
    width: 145px;
}
.entrytablarge1of2col150 {
    float: left;
    width: 150px;
}
.entrytablarge1of2col200 {
    float: left;
    width: 150px;
}
.entrytablarge2of2col {
    float: left;
}
.entrytabsmallnopadding {
    max-width: 380px;
    clear: left; /*  font-size: 12px;*/
}
    .entrytabsmallnopadding > div {
        max-width: 380px;
        clear: left;
        padding-left: 5px;
        display: -webkit-flex; /* Safari */
        display: flex; /* equal height of the children */
    }

        .entrytabsmallnopadding > div > label {
            float: left;
            display: block;
            width: 120px;
            padding: 0px 10px 0 0;
            text-align: right;
            font-size: 100% !important;
        }

        .entrytabsmallnopadding > div > span {
            line-height: 1.5;
            width: 100%;
        }

    .entrytabsmallnopadding > label {
        font-size: 100% !important;
    }


.colSmall {
    width: 60px;
}
.colMedium {
    width: 125px;
}
.colQuiteLarge {
    width: 175px;
}
.colLarge {
    width: 200px;
}
.col100 {
    width: 100%;
}

.smallertab {
    max-width: 280px;
    clear: left; /*  font-size: 12px;*/
}
.smalltab {
    max-width: 400px;
    clear: left; /*  font-size: 12px;*/
}
.quitesmalltab {
    max-width: 550px;
    clear: left; /*  font-size: 12px;*/
}
.mediumtab {
    max-width: 670px;
    clear: left; /*  font-size: 12px;*/
}
.largetab {
    max-width: 970px;
    clear: left;
}
.vlargetab {
    max-width: 1300px;
    clear: left; /*  font-size: 12px;*/
}
.vvlargetab {
    max-width: 1800px;
    clear: left; /*  font-size: 12px;*/
}

.C4CustDropdown {
     float: right;   
     vertical-align: middle;
}

.C4Border {
    border-style: dashed;
    border-color: black;
    border-width: 1px;
}

/* Tables */

.stdheader {
    border-top-color: #f0ecec !important;
    border-top-style: none !important;
}

    .stdheader > th {
        color: #222E3A;
        font-size: 15px;
    }

        .stdheader > th:first-child {
            border-top-left-radius: 10px;
        }

        .stdheader > th:last-child {
            border-top-right-radius: 10px;
        }
.noTopLine {
    border-top-color: #f0ecec !important;
    border-top-style: none !important;
}
.clsOuterTable td {
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

table.clsOuterTable > tbody {
    background-color: transparent !important;
    border-top-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-right-style: none;
}

    table.clsOuterTable > tbody > tr {
        background-color: transparent !important;
    }


.clsNormalTable table tr td {
    /*   font-size: 1rem !important;*/
    font-size: 14px !important;
    color: black;
    font-weight: normal;
}

.datagrid table {
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}

    .datagrid table thead, .datagrid table tbody, .datagrid table tfoot {
        border: none;
    }
        .datagrid table thead th:first-child {
            border-top-left-radius: 10px;
        }

        .datagrid table thead th:last-child {
            border-top-right-radius: 10px;
        }

.datagrid table td, .datagrid table th {
    padding: 3px 10px;
}

.datagrid table tbody tr {
    background-color: #f8f8f8;
    border: solid;
    border-width: 1px 0 0 0;
}
    .datagrid table tbody tr > .grouper {
        background-color: lightgray !important;
        color: black !important;
        border-width: 1px !important;
        border-style: dashed !important;
        border-color: black !important;
    }

.datagrid table tbody td {
    font-size: 14px;
    font-weight: bold;
    color: #222E3A;
    padding: 6px 10px;
}
.datagrid table tbody tr:nth-child(2n) {
    border-bottom: 0;
    background-color: #f4f4f4;
}
    .datagrid table tbody tr:nth-child(2n) > td.stditem {
        background-color: #f8f8f8;
    }

.datagrid table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.datagrid table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.datagrid2 table thead th {
    background-color: grey !important;
    color: black !important;
    text-align: left !important;
}

.datagrid2 table tbody tr {
    background-color: lightgray !important;
}

.datagrid2 table tbody td {
    color: black !important;
    font-weight: normal !important;
}

    .datagrid2 table tbody tr:nth-child(2n) {
        background-color: white !important;
        color: black !important;
    }


.datagrid2 table tbody tr.PinkBackground {
    background-color: #F5D5D3 !important;
}

    .datagrid2 table tbody tr.PinkBackground:nth-child(2n) {
        background-color: #FFDFDD !important;
    }

.plainTableNoPadding > tbody > tr > td {
    padding-left: 0px;
    padding-right: 1px;
}
.plainTableNoPaddingTB > tbody > tr > td {
    padding-top: 0px;
    padding-bottom: 1px;
}
.plainTable {
    background-color: inherit !important;
    border-width: 0px;
    margin-bottom: 0px;
}

    .plainTable > tbody {
        background-color: inherit !important;
        border-width: 0px;
    }

        .plainTable > tbody > tr {
            background-color: inherit !important;
            border-width: 0px;
            border-top-color: #f0ecec !important;
            border-top-style: none !important;
        }

.roundedTopTR td:first-child {
    border-top-left-radius: 10px;
}

.roundedTopTR td:last-child {
    border-top-right-radius: 10px;
}

.roundedBottomTR td:first-child {
    border-bottom-left-radius: 10px;
}

.roundedBottomTR td:last-child {
    border-bottom-right-radius: 10px;
}

.roundedTop {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.roundedBottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.alignedTable tr {
    border-top-color: #f0ecec !important;
    border-top-style: none !important;
}
    .alignedTable tr td {
        padding-left: 0px !important;
        border-left: 0px !important;
        padding-right: 0px !important;
        border-right: 0px !important;
    }
.smallerTable tr td {
    border-bottom: 0px !important;
    border-top: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

.greyTable {
    background-color: #e2e2e2;
    padding: 6px 10px;
}
/* Checkboxes Boxes */

.smallCheckBox > input[type="checkbox"] {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}
.FullyCompactCheckBox > input {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.CompactCheckBox > input {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}
.plainButtonList {
    background-color: inherit;
}

    .plainButtonList tr {
        background-color: inherit !important;
    }

    .plainButtonList tbody {
        background-color: inherit !important;
        border-bottom-style: none;
        border-top-style: none;
        border-left-style: none;
        border-right-style: none;
    }

    .plainButtonList > tbody > tr > td > span > input[type="radio"] {
    }

        .plainButtonList > tbody > tr > td > span > input[type="radio"] + label {
            font-size: 13.28px !important;
        }



/* Input Boxes */
.loginTextBox {
    width: 400px;
    border-radius: 10px;
}

.smallestInput {
    max-width: 47px !important;
    border-radius: 10px;
}
.smallerInput {
    max-width: 60px !important;
    border-radius: 10px;
}
.smallInput {
    max-width: 100px !important;
    border-radius: 10px;
}

.aboveSmallInput {
    max-width: 110px !important;
    border-radius: 10px;
}
.mediumInput {
    max-width: 150px !important;
    border-radius: 10px;
}
.mediumInputSettings {
    max-width: 170px !important;
    border-radius: 10px;
}
.aboveMediumInput {
    max-width: 220px !important;
    border-radius: 10px;
}
.largeInput {
    max-width: 280px !important;
    border-radius: 10px;
}
.aboveLargeInput {
    max-width: 350px !important;
    border-radius: 10px;
}
.largerInput {
    max-width: 450px !important;
}


.xSmallInputBox {
    font-size: .75rem;
    height: 25px;
    margin-top: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: black;
    font-weight: normal;
    background-color: #cacaca;
    border-color: black;
    border-radius: 10px;
}
.smallInputBox {
    font-size: .75rem;
    height: 25px;
    margin-top: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: black;
    font-weight: normal;
    background-color: #e2e2e2;
    border-color: black;
    border-radius: 10px;
}
.verySmallFilterInputBox {
    font-size: .75rem;
    height: 20px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: black;
    font-weight: normal;
    border-radius: 10px;
}

.smallFilterInputBox {
    font-size: .75rem;
    height: 25px;
    margin-top: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
    color: black;
    font-weight: normal;
    border-radius: 10px;
}
.inputmediumfixedsize {
    width: 180px;
    min-width: 180px;
}
.inputlargerfixedsize {
    width: 280px;
    min-width: 280px;
}
.inputlargefixedsize {
    width: 380px;
    min-width: 380px;
}

.ui-autocomplete {
    background: #F0F0F0; /*very pale grey*/
    border-width: 1px;
    border-style: solid;
    border-color: #5A6570; /* darker grey */
    width: 200px;
    height: 300px;
    overflow: auto;
}

    .ui-autocomplete > li {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #5A6570; /* darker grey */
        padding: 5px 5px 5px 5px;
    }

        .ui-autocomplete > li:hover {
            background: #F8F8F8; /*very pale grey*/
        }

.ui-helper-hidden-accessible {
    display: none;
}
.newPageLB {
    border-radius: 10px;
}

/* Calendar */
.datePickerClass {
    border-radius: 10px;
}
.datePickerExtraWidth {
    width: 150px !important;
}
.ui-datepicker {
    background: #F0F0F0; /*very pale grey*/
    border-width: 5px;
    border-style: solid;
    border-color: #F8F8F8; /*very pale grey*/
    border-radius: 10px;
}
.ui-datepicker-today {
    border: 1px solid #0000FF; 
}

.ui-datepicker-current-day {
    border: 1px solid #0000FF; 
}
a.ui-state-default {
    color: #0000FF !important;
}
.ui-datepicker-title {
    color: #0000FF;
    padding-left: 5px;
}
.ui-datepicker-prev {
    padding-left: 5px;
    padding-right: 5px;
    color: #0000FF !important; 
}

.ui-datepicker-next {
    padding-left: 5px;
    padding-right: 5px;
    color: #0000FF !important;
}

/* Labels */
.c4InputLabel {
    font-size: 1rem !important;
    color: #222E3A; /*Text*/
}
.c4InputLabelBox {
    line-height: 2.5 !important;
    font-size: 1rem !important; 
    color: #222E3A; 
}
.c4InputLabelBoxSmall {
    font-size: .83rem !important;
    padding-top: 2px;
}
.c4InputLabelOnBlack {
    font-size: 14px !important;
    font-weight: bold !important;
}
.c4ErrorMessage {
    color: #E72D2B !important;
    font-size: 20px;
}
.c4InstrNormal {
    color: black;
    font-weight: normal;
}
.c4MandReminderVSmall {
    color: #E72D2B !important;
    padding-top: 0px;
    padding-left: 0px;
}
.c4MandReminderSmall {
    color: #E72D2B !important;
    padding-top: 0px;
    padding-left: 5px;
    line-height: 20px;
}
.c4MandReminderDummy {
    color: transparent !important;
    padding-top: 5px;
    padding-left: 5px;
    font-weight: bold !important;
}
.c4MandReminder {
    color: #E72D2B !important;
    padding-top: 5px;
    padding-left: 5px;
    font-weight: bold !important;
}

.c4ErrorMessageOnBlack {
    color: #E72D2B !important;
    font-size: 20px;
    font-weight: bold !important;
}

.c4SubHeader {
    padding-bottom: 10px;
    font-size: 20px;
}



/* Buttons */
.button.primary {
    border-radius: 10px;
    background: #0000FF !important;
    color: #FFFFFF !important;
}

    .button.primary:hover {
        color: white !important;
        background: #24303B !important;
    }
.smallButton {
    margin-bottom: 2px;
    margin-top: 2px;
    padding-top: 5px;
    padding-bottom: 2px;
    height: 25px !important;
}
.shortestButton {
    height: 20px;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
    border-radius: 5px !important;
}

.btnn {
    height: 20px;
    padding-bottom: 1px !important;
    padding-top: 1px !important;
}

a.aspNetDisabled {
    opacity: 0.25;
    cursor: not-allowed;
}


/* Background on Customer Portal */
#imageBGTopRight {
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0px !important;
    mix-blend-mode: multiply;
}

#imageBGBottomLeft {
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: 100px;
    border-radius: 0px !important;
    mix-blend-mode: multiply;
}

/* Customer Portal KPI Icons */
.big-icon .fa {
    font-size: 5em !important;
}

.bgHover {
    color: black;
    border-radius: 10px;
}

    .bgHover:hover {
        background-color: black !important;
        color: white;
        border-radius: 10px;
    }

h6.value-sub {
    font-size: 12px;
}

.value-sub {
    line-height: 20px;
    margin-top: 19px;
    margin-left: 4px;
}
.stats-row {
    margin: 10px 0px 20px 0px;
}

/* Links */
a {
    line-height: inherit;
    color: #0000FF !important; /* blue */
    cursor: pointer;
    text-decoration: none;
    font-weight: bold !important;
    font-size: 14px !important;
}

    a:hover, a:focus {
        color: #003399 !important; /* royalBlue */
        transition: 0.2s;
        text-decoration: underline;
    }

    a img {
        border: 0;
    }

.menuLink {
    color: #DF1622 !important; /* MenuRed */
}

    .menuLink:hover {
        color: #24303B !important; /* darkGrey */
    }

/* Colours */
.amber {
    color: #FFBF00 !important;
}
.red {
    color: #E72D2B !important;
}
.lightBlue {
    color: #61CBEA !important;
}
.blue {
    color: #0000FF !important;
}
.royalBlue {
    color: #003399 !important;
}
.yellow {
    color: #f8ec08 !important;
}
.green {
    color: #008000 !important;
}
.purple {
    color: #7F00FF !important;
}
.orange {
    color: #f6a600 !important;
}
.grey {
    color: #4C4A4A !important;
}
.dark {
    color: #24303B !important; /* darkGrey */
}

#mobile-menu .is-dropdown-submenu {
    position: relative;
    top: 0;
    left: 30%;
    z-index: 1;
    min-width: 200px;
    border: 0px solid #cacaca;
    width: 100%;
}


#mobile-menu .menu > li > ul > li > a {
    display: block;
    padding: 0.3rem 0rem;
    line-height: 1;
    text-align: left;
    margin-bottom: 0.1rem;
    text-transform: uppercase;
    font-size: 0.7em !important;
}

#mobile-menu .customsMenu {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    margin-bottom: 0px !important;
    display: inline-block !important;
    position: relative;
}

    #mobile-menu .customsMenu:hover .customsSwap {
        display: inline !important;
    }

    #mobile-menu .customsMenu > img {
        margin-bottom: 0px !important;
    }

#mobile-menu .customsSwap {
    padding-left: 15px;
    padding-right: 15px;
    display: none !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}


#mobile-menu .fa {
    width: 2em;
    font-size: 1.5em;
    float: left;
    vertical-align: middle;
    line-height: 0.2em
}

#mobile-menu .app-dashboard-sidebar-text {
    font-size: 0.7em;
    float: left;
}

#mobile-menu .menu > li, .menu.horizontal > li {
    display: block;
    float: left;
    clear: both;
}

#mobile-menu .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-bottom-width: 6px;
    border-top-style: inset;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    content: '';
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: #1779ba transparent transparent;
    right: 5px;
    margin-top: 3px;
}
.largeInputForce {
/* not really sure why this is needed but the box size is wrong without it*/
    width: 280px !important;
    }
.largerInputForce {
    /* not really sure why this is needed but the box size is wrong without it*/
    width: 355px !important;
}

.responsive-row {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    gap: 0px; /* Optional: adds space between columns */
}
.responsive-rowFull {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0px; /* Optional: adds space between columns */
}

.Column4DivGrid {
    flex: 1 1 25%; /* Grow, shrink, basis: roughly 4 columns */
    min-width: 150px; /* Prevents columns from getting too small */
    box-sizing: border-box;
}
.Column3DivGrid {
    flex: 1 1 33%; /* Grow, shrink, basis: roughly 4 columns */
    min-width: 150px; /* Prevents columns from getting too small */
    box-sizing: border-box;
}
.cblist > tbody > tr > td {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 1100px) {
    .Column4DivGrid {
        flex-basis: 50%; /* 2 columns */
    }
    .Column3DivGrid {
        flex-basis: 50%; /* 2 columns */
    }
    .responsive-row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0px; /* Optional: adds space between columns */
    }
}

@media (max-width: 700px) {
    .Column4DivGrid {
        flex-basis: 100%; /* 1 column */
    }
    .Column3DivGrid {
        flex-basis: 100%; /* 1 column */
    }
}

    @media (max-width: 39.9em) {
        .content {
            margin-left: 0px;
            padding: 0px;
            width: 100%;
            font-family: 'Open Sans', sans-serif !important;
            min-height: 550px;
        }

        .loginTextBox {
            width: 100%;
            border-radius: 10px;
        }

        .column {
            padding-bottom: 0.325rem;
        }

        .submenu {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            padding-top: 0px;
        }

            .submenu li a:hover {
                border-top-right-radius: 10px;
                color: #24303B !important;
                text-decoration: none !important;
                font-weight: bold !important;
            }

        .largeInput {
            width: 45% !important;
            border-radius: 10px;
        }

        .largeInputForce {
            width: 137px !important;
            border-radius: 10px;
        }
        .largerInputForce {
            /* not really sure why this is needed but the box size is wrong without it*/
            width: 137px !important;
        }
        .entrytablarge > div > label {
            float: left;
            display: block;
            width: 45%;
            padding: 0px 30px 0 0;
            text-align: right;
            font-size: 100% !important;
        }

        .mediumInput {
            width: 40% !important;
            border-radius: 10px;
        }

        .smallInput {
            width: 18% !important;
            border-radius: 10px;
        }
    }