/* ==========================================================================
   Table of Contents
   ==========================================================================
   1. Global Styles
   2. Typography
   3. Layout Helpers
   3.1 Main Content Layout
   4. Header
   5. Navigation
   6. Forms
   6.1 Buttons
   6.2 Typeahead
   6.3 Specific Components (k-editor)
   7. Tables
   8. Footer
   9. jQuery UI (Includes Date Picker Styles)
   10. Icomoon Icons
   11. JT Custom Styles (General)
   11.1 Home/Welcome Content
   11.2 Modals/Popups (JT Custom)
   12. Login/Register
   13. Document List
   14. Purchase Agreement
   15. Mobile Styles
   16. Print Styles
    17. Plans Layout
   ========================================================================== */

/* Add @charset at the very top */
@charset "UTF-8";

/* ==========================================================================
   1. Global Styles
   ========================================================================== */

html {
    font-size: 14px;
    -ms-text-size-adjust: 100%; /* Normalize */
    -webkit-text-size-adjust: 100%; /* Normalize */
    position: relative; /* From original */
    min-height: 100%; /* From original */
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-size: 1em; /* HTML5 Boilerplate */
    line-height: 1.4; /* HTML5 Boilerplate */
    font-family: 'Open Sans', Arial, sans-serif; /* From original */
    color: #333333; /* From original */
    background-color: #FFFFFF; /* From original */
    margin: 0; /* Normalize/HTML5 Boilerplate - overrides original margin-bottom */
    min-width: 0; /* From original */
    /* Note: The margin-bottom: 60px; in the original was likely for a sticky footer.
     The normalize/html5bp resets margin to 0.
     If a sticky footer is needed, add margin-bottom to body or padding-bottom to a container.
     Keeping the original body margin-bottom style commented out for reference:
     margin-bottom: 60px;
  */
}

.indexContent {
    max-width: 1200px;
}

/* Normalize HTML5 display definitions */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
    *display: inline; /* IE6/7 fallback */
    *zoom: 1; /* IE6/7 fallback */
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden] {
    display: none;
}

/* Normalize Base */
html, button, input, select, textarea {
    font-family: sans-serif;
    outline: 0; /* From original */
}

/* Normalize Links */
a:focus {
    outline: thin dotted; /* Normalize */
}

a:active,
a:hover {
    outline: 0; /* Normalize */
}

/* Global Link Styles */
a {
    color: #0066b4; /* From original */
    text-decoration: none; /* From original */
    opacity: 1; /* From original */
    -webkit-transition-property: opacity, background; /* From original */
    -moz-transition-property: opacity, background; /* From original */
    -o-transition-property: opacity, background; /* From original */
    transition-property: opacity, background; /* From original */
    -webkit-transition-duration: 200ms; /* From original */
    -moz-transition-duration: 200ms; /* From original */
    -o-transition-duration: 200ms; /* From original */
    transition-duration: 200ms; /* From original */
    -webkit-transition-timing-function: ease; /* From original */
    -moz-transition-timing-function: ease; /* From original */
    -o-transition-timing-function: ease; /* From original */
    transition-timing-function: ease; /* From original */
}

    a:hover {
        opacity: .7; /* From original */
    }

    /* Link overrides from original */
    a.btn:not([href]) {
        color: white !important; /* From original */
        background-color: #2485cf !important; /* From original */
        text-decoration: none !important; /* From original */
        cursor: pointer !important; /* From original */
    }

    a:not([href]) {
        color: #2485cf !important; /* From original */
        background-color: transparent !important; /* From original */
        text-decoration: underline !important; /* From original */
        cursor: pointer !important; /* From original */
    }


/* Focus states for common interactive elements */
.btn:focus, .btn:active:focus, .nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; /* From original */
}

/* Selection styles (HTML5 Boilerplate) */
::-moz-selection {
    background: #dddddd;
    text-shadow: none;
    color: white;
}

::selection {
    background: #dddddd;
    text-shadow: none;
    color: white;
}


/* ==========================================================================
   2. Typography
   ========================================================================== */

/* Normalize Typography */
h1 {
    font-size: 2em;
    margin: 0 0 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0; /* From original */
}

h3 {
    font-size: 1.17em;
    margin: 0 0 1em 0;
}

h4 {
    font-size: 1em;
    margin: 0 0 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 0 0 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 0 0 2.33em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold; /* Normalize */
}

blockquote {
    margin: 1em 40px;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

p, pre {
    margin: 0 0 1em 0; /* Normalize */
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace; /* IE hack */
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

    q:before,
    q:after {
        content: '';
        content: none;
    }

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* Specific Title Styles (from original) */
.title {
    font-family: CabinSketch-Bold, Cabin Sketch;
    color: #4e67c8;
    font-weight: 700;
    font-size: 62px;
}

.pageTitle {
    font-family: CabinSketch-Bold, Cabin Sketch;
    color: #4e67c8;
    font-weight: 700;
    font-size: 36px;
    white-space: pre-wrap;
}
.pageSubtitle {
    font-family: Montserrat, serif;
    color: blue;
    font-weight: 600;
    font-size: 20px;
}

.tableTitle {
    font-family: CabinSketch-Bold, Cabin Sketch;
    color: #4e67c8;
    font-weight: 700;
    font-size: 24px;
}

.subTitle {
    font-family: Montserrat, serif;
    color: #e6fd5c;
    font-weight: 600;
    font-size: 20px;
}

.introText {
    font-family: Didact Gothic;
    color: black;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

p.instructions,
.instructions {
    font-size: 13px; /* From original */
    margin-bottom: 20px; /* From original */
}

/* Strong helper class */
.strong {
    font-weight: bold; /* From original */
}

/* ==========================================================================
   3. Layout Helpers
   ========================================================================== */



.content-constraint {
    margin: 0 auto; /* From original */
}

@media (min-width: 768px) {
    .content-constraint {
        /*max-width: 1260px;*/ /* Commented out in original */
    }
}

.lt-ie9 .content-constraint {
    /*max-width: 1260px;*/ /* Commented out in original */
    margin: 0 auto;
}

.content-constraint.padded {
    padding: 0 15px; /* From original */
}

@media (min-width: 768px) {
    .content-constraint.padded {
        /*max-width: 1160px;*/ /* Commented out in original */
        padding: 0 50px; /* From original */
    }
}

.lt-ie9 .content-constraint.padded {
    /*max-width: 1160px;*/ /* Commented out in original */
    padding: 0 50px;
}


/* Width helpers */
.width-3-4 {
    width: 75%; /* From original */
}

.width-4-4 {
    width: 100%; /* From original */
}

/* Text transformation */
.upcase {
    text-transform: uppercase !important; /* From original */
}

/* Row/Clearfix */
.row {
    display: block; /* From original */
    clear: both; /* From original */
}

/* Display helpers */
@media (min-width: 768px) {
    .hide-desktop {
        display: none; /* From original */
    }
}

.lt-ie9 .hide-desktop {
    display: none;
}

.hide-mobile {
    display: none; /* From original */
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block; /* From original */
    }
}

.lt-ie9 .hide-mobile {
    display: block;
}

.clear {
    clear: both; /* From original */
}

.hide {
    display: none; /* From original */
}

/* Alignment helpers */
.alignleft {
    text-align: left; /* From original */
}

.alignright {
    text-align: right; /* From original */
}

.aligncenter {
    text-align: center; /* From original */
}

@media (min-width: 768px) {
    .alignleft-desktop {
        text-align: left; /* From original */
    }
}

.lt-ie9 .alignleft-desktop {
    text-align: left;
}

@media (min-width: 768px) {
    .alignright-desktop {
        text-align: unset !important; /* From original */
    }
}

.lt-ie9 .alignright-desktop {
    text-align: right;
}

@media (min-width: 768px) {
    .aligncenter-desktop {
        text-align: center; /* From original */
    }
}

.lt-ie9 .aligncenter-desktop {
    text-align: center;
}

/* Float helpers */
.floatright {
    float: right; /* From original */
}

@media (min-width: 768px) {
    .floatright-desktop {
        float: right; /* From original */
    }
}

.lt-ie9 .floatright-desktop {
    float: right;
}

/* Specific layout for button in h1 */
h1 .btn.floatright {
    position: relative; /* From original */
    margin-left: 5px; /* From original */
    top: 11px; /* From original */
}

/* Specific column width */
.wide-end-column {
    width: 17%; /* From original */
}

    .wide-end-column .relative-container {
        min-width: 180px; /* From original */
    }

/* Required indicator */
span.required,
i.required,
small.required {
    color: #f5782f; /* From original */
}

/* Relative positioning helper */
.relative-container {
    display: block; /* From original */
    position: relative; /* From original */
}

/* Grid-related Styles (from original) */
@media (min-width: 768px) {
    body .span-1-1-2 {
        width: 48.64865%;
        float: left;
        margin-right: 20%;
        margin-left: 0%;
        clear: none;
    }

    body .span-1-2-2 {
        width: 48%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
    }

    body .span-1-1-3 {
        width: 30.76923%;
        float: left;
        margin-right: -100%;
        margin-left: 0%;
        clear: none;
    }

    body .span-2-2-3 {
        width: 65.38462%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
    }

    body .span-1-1-3-no-gutter {
        width: 33.33333%;
        clear: right;
        float: left;
        margin-left: 0%;
        margin-right: 0%;
    }

    body .span-1-2-3-no-gutter {
        width: 33.33333%;
        clear: right;
        float: left;
        margin-right: 0%;
    }

    body .span-1-3-3-no-gutter {
        width: 33.33333%;
        clear: right;
        float: right;
        margin-right: 0%;
    }

    body .span-1-1-4 {
        width: 25%;
        float: left;
        margin-right: -100%;
        margin-left: 0%;
        clear: none;
    }

    body .span-2-2-4 {
        width: 48.14815%;
        float: left;
        margin-right: -100%;
        margin-left: 25.92593%;
        clear: none;
    }

    body .span-3-2-4 {
        width: 74.07407%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
    }

    body .span-1-4-4 {
        width: 22.22222%;
        float: right;
        margin-left: 0;
        margin-right: 0;
        clear: none;
    }

    body .span-1-1-5 {
        width: 16.66667%;
        clear: right;
        float: left;
        margin-left: 0%;
        margin-right: 4.16667%;
    }

    body .span-2-1-5 {
        width: 37.5%;
        clear: right;
        float: left;
        margin-left: 0%;
        margin-right: 4.16667%;
    }

    body .span-3-2-5 {
        width: 58.33333%;
        clear: right;
        float: left;
        margin-right: 4.16667%;
    }

    body .span-3-3-5 {
        width: 58.33333%;
        clear: right;
        float: right;
        margin-right: 0%;
    }

    body .span-4-2-5 {
        width: 79.16667%;
        clear: right;
        float: right;
        margin-right: 0%;
    }

    body .span-1-5-5 {
        width: 16.66667%;
        clear: right;
        float: right;
        margin-right: 0%;
    }

    body .span-6-1-23-no-gutter {
        width: 26.08696%;
        clear: right;
        float: left;
        margin-left: 0%;
        margin-right: 0%;
    }

    body .span-17-7-23-no-gutter {
        width: 73.91304%;
        clear: right;
        float: right;
        margin-right: 0%;
    }

    body .span-6-1-23 {
        width: 25%;
        clear: right;
        float: left;
        margin-left: 0%;
        margin-right: 1.47059%;
    }

    body .span-17-7-23 {
        width: 73.52941%;
        clear: right;
        float: right;
        margin-right: 0%;
    }

    body .span-3-1-4-no-gutter {
        width: 75%;
        clear: right;
        float: left;
        margin-left: 0%;
        margin-right: 0%;
    }
}

/* IE9 Grid Hacks */
.lt-ie9 body .span-1-1-2 {
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
}

.lt-ie9 body .span-1-2-2 {
    width: 48%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
}

.lt-ie9 body .span-1-1-3 {
    width: 30.76923%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
}

.lt-ie9 body .span-2-2-3 {
    width: 65.38462%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
}

.lt-ie9 body .span-1-1-3-no-gutter {
    width: 33.33333%;
    clear: right;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
}

.lt-ie9 body .span-1-2-3-no-gutter {
    width: 33.33333%;
    clear: right;
    float: left;
    margin-right: 0%;
}

.lt-ie9 body .span-1-3-3-no-gutter {
    width: 33.33333%;
    clear: right;
    float: right;
    margin-right: 0%;
}

.lt-ie9 body .span-1-1-4 {
    width: 25%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
}

.lt-ie9 body .span-2-2-4 {
    width: 48.14815%;
    float: left;
    margin-right: -100%;
    margin-left: 25.92593%;
    clear: none;
}

.lt-ie9 body .span-3-2-4 {
    width: 74.07407%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
}

.lt-ie9 body .span-1-4-4 {
    width: 22.22222%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
}

.lt-ie9 body .span-1-1-5 {
    width: 16.66667%;
    clear: right;
    float: left;
    margin-left: 0%;
    margin-right: 4.16667%;
}

.lt-ie9 body .span-2-1-5 {
    width: 37.5%;
    clear: right;
    float: left;
    margin-left: 0%;
    margin-right: 4.16667%;
}

.lt-ie9 body .span-3-2-5 {
    width: 58.33333%;
    clear: right;
    float: left;
    margin-right: 4.16667%;
}

.lt-ie9 body .span-3-3-5 {
    width: 58.33333%;
    clear: right;
    float: right;
    margin-right: 0%;
}

.lt-ie9 body .span-4-2-5 {
    width: 79.16667%;
    clear: right;
    float: right;
    margin-right: 0%;
}

.lt-ie9 body .span-1-5-5 {
    width: 16.66667%;
    clear: right;
    float: right;
    margin-right: 0%;
}

.lt-ie9 body .span-6-1-23-no-gutter {
    width: 26.08696%;
    clear: right;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
}

.lt-ie9 body .span-17-7-23-no-gutter {
    width: 73.91304%;
    clear: right;
    float: right;
    margin-right: 0%;
}

.lt-ie9 body .span-6-1-23 {
    width: 25%;
    clear: right;
    float: left;
    margin-left: 0%;
    margin-right: 1.47059%;
}

.lt-ie9 body .span-17-7-23 {
    width: 73.52941%;
    clear: right;
    float: right;
    margin-right: 0%;
}

.lt-ie9 body .span-3-1-4-no-gutter {
    width: 75%;
    clear: right;
    float: left;
    margin-left: 0%;
    margin-right: 0%;
}

@media (min-width: 768px) and (max-width: 1340px) {
    #StatusList {
        padding-left: 90px !important; /* From original */
    }
}

/* Specific ID layout adjustments */
body #AltDirectory {
    margin-left: 10% !important; /* From original */
}

body #InviteBtn {
    top: 80% !important; /* From original */
    left: -440% !important; /* From original */
}


/* ==========================================================================
   3.1 Main Content Layout
   ========================================================================== */

#main-content {
    background: #fff; /* From original */
    padding-top: 2px; /* From original */
    padding-bottom: 5px; /* From original */
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px 0px; /* From original */
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px 0px; /* From original */
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px 0px; /* From original */
    box-sizing: unset !important; /* From original */
    width: fit-content !important; /* From original */
    margin: 0 41.5px !important; /* From original */
}

@media (min-width: 1260px) {
    #main-content {
        -webkit-border-radius: 6px; /* From original */
        -moz-border-radius: 6px; /* From original */
        -ms-border-radius: 6px; /* From original */
        -o-border-radius: 6px; /* From original */
        border-radius: 6px; /* From original */
        padding-top: 50px; /* From original */
        padding-bottom: 90px; /* From original */
        min-height: 540px; /* From original */
    }

    .admin #main-content {
        padding-top: 5px; /* From original */
    }
}

.lt-ie9 #main-content {
    -webkit-border-radius: 6px; /* From original */
    -moz-border-radius: 6px; /* From original */
    -ms-border-radius: 6px; /* From original */
    -o-border-radius: 6px; /* From original */
    border-radius: 6px; /* From original */
    padding-top: 50px; /* From original */
    padding-bottom: 90px; /* From original */
    min-height: 540px; /* From original */
}

.admin .lt-ie9 #main-content {
    padding-top: 55px; /* From original */
}

/* Main content header styles */
#main-content h1 {
    font-size: 29px; /* From original */
    color: #4b9fe7; /* From original */
    font-family: 'Maven Pro', sans-serif; /* From original */
    font-weight: 500; /* From original */
}

    #main-content h1.border-bottom {
        border-bottom: 1px solid #d5d5d5; /* From original */
        padding-bottom: 5px; /* From original */
    }

@media (min-width: 768px) {
    #main-content h1.border-bottom {
        padding-bottom: 15px; /* From original */
    }
}

.lt-ie9 #main-content h1.border-bottom {
    padding-bottom: 15px;
}

#main-content .main-content-header .btn-container .btn {
    position: relative; /* From original */
    top: -10px; /* From original */
    margin-bottom: 10px; /* From original */
}

@media (min-width: 768px) {
    #main-content .main-content-header .btn-container .btn {
        top: 10px; /* From original */
        margin-bottom: 0px; /* From original */
    }
}

.lt-ie9 #main-content .main-content-header .btn-container .btn {
    top: 10px;
    margin-bottom: 0px;
}

#main-content .main-content-header .inner-tab-menu {
    padding-top: 8px; /* From original */
}

    #main-content .main-content-header .inner-tab-menu a {
        font-size: 12px; /* From original */
        color: #e68c44; /* From original */
        font-weight: 700; /* From original */
        text-transform: uppercase; /* From original */
        display: inline-block; /* From original */
        padding: 4px 10px 3px 10px; /* From original */
        -webkit-border-radius: 3px; /* From original */
        -moz-border-radius: 3px; /* From original */
        -ms-border-radius: 3px; /* From original */
        -o-border-radius: 3px; /* From original */
        border-radius: 3px; /* From original */
    }

        #main-content .main-content-header .inner-tab-menu a.active {
            background: #e68c44; /* From original */
            color: white; /* From original */
            position: relative; /* From original */
        }

            #main-content .main-content-header .inner-tab-menu a.active:after {
                content: " "; /* From original */
                display: block; /* From original */
                width: 0; /* From original */
                height: 0; /* From original */
                position: absolute; /* From original */
                bottom: -5px; /* From original */
                left: 50%; /* From original */
                margin: 0 0 0 -10px; /* From original */
                border-left: 5px solid transparent; /* From original */
                border-right: 5px solid transparent; /* From original */
                border-top: 5px solid #e68c44; /* From original */
            }

#main-content .main-content-header .expand-controls {
    color: #999999; /* From original */
    margin-top: 20px; /* From original */
    margin-bottom: 20px; /* From original */
    font-size: 12px; /* From original */
}

    #main-content .main-content-header .expand-controls a {
        color: #0066b4; /* From original */
        display: inline-block; /* From original */
        margin: 0 2px; /* From original */
    }

        #main-content .main-content-header .expand-controls a:first-child {
            margin-left: 0; /* From original */
        }

@media (min-width: 1260px) {
    #main-content .main-content-header .expand-controls {
        margin-top: 0; /* From original */
        position: relative; /* From original */
        top: -6px; /* From original */
    }
}

.lt-ie9 #main-content .main-content-header .expand-controls {
    margin-top: 0;
    position: relative;
    top: -6px;
}

/* Breadcrumbs */
#main-content .breadcrumbs {
    font-size: 0px; /* From original */
    color: #878787; /* From original */
    margin-top: 10px; /* From original */
    margin-bottom: 20px; /* From original */
}

    #main-content .breadcrumbs a {
        font-size: 12px; /* From original */
        display: inline-block; /* From original */
    }

        #main-content .breadcrumbs a:after {
            display: inline-block; /* From original */
            content: ">"; /* From original */
            color: #878787; /* From original */
            margin: 0 8px; /* From original */
        }

    #main-content .breadcrumbs .current {
        font-size: 12px; /* From original */
    }

@media (min-width: 1260px) {
    #main-content .breadcrumbs {
        margin-bottom: 0; /* From original */
        margin-top: 0; /* From original */
    }

        #main-content .breadcrumbs.top {
            position: relative; /* From original */
            top: -20px; /* From original */
        }
}

.lt-ie9 #main-content .breadcrumbs {
    margin-bottom: 0;
    margin-top: 0;
}

    .lt-ie9 #main-content .breadcrumbs.top {
        position: relative;
        top: -20px;
    }

/* Breadcrumb style from original */
.myBreadcrumb {
    align-content: flex-start; /* From original */
    text-align: left; /* From original */
    font-size: 22px; /* From original */
}

/* Content Table layout helper */
.contentTable {
    width: auto; /* From original */
    margin-right: auto; /* From original */
    margin-left: 0px; /* From original */
    background-color: #F1F1F1; /* From original */
}


/* ==========================================================================
   4. Header
   ========================================================================== */

#header {
    height: 64px; /* From original */
    padding: 0; /* From original */
    margin: 0 auto; /* From original */
    margin-bottom: 5px; /* From original */
}

    #header .content-constraint {
        position: relative; /* From original */
        padding-top: 6px; /* From original */
        height: 64px; /* From original */
    }

@media (min-width: 768px) {
    #header .content-constraint {
        padding-top: 6px; /* From original */
    }
}

.lt-ie9 #header .content-constraint {
    padding-top: 32px;
}


/* JT Custom Header Backgrounds (from original) */
/* Header */
.navHeader {
    background-color: #A7EA52;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden;
}

.header-content {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    flex-wrap: nowrap;
    margin-left: 170px;
}

/* Alternative: If .header-content--centered is STANDALONE */
.header-content--centered-standalone {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    white-space: nowrap; /* Inherited from .header-content in the other example */
    overflow: hidden; /* Inherited */
    flex-wrap: nowrap; /* Inherited */
    padding: 0 20px; /* Example symmetrical padding */
    /* No margin-left: 170px here unless specifically desired */
}

.header-content--centered {
    align-items: center; /* Just this one! */
    display: flex; /* (or you can omit if it's already flex from .header-content) */
}


/* Navigation Links */
.nav-links {
    display: inline-flex;
    gap: 20px;
    margin-left: 0;
}

    .nav-links a {
        color: #4e67c8;
        text-decoration: none;
        font-weight: normal;
        line-height: 1;
    }

.nav-dropdown-link {
    display: flex;
    align-items: center;
}

.nav-dropdown-link .nav-linkz {
    font-size: 16px;
    color: #4e67c8;
    text-decoration: none;
    font-weight: normal;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s ease-in-out;
}

    .nav-dropdown-link .nav-linkz:hover,
    .nav-dropdown-link .nav-linkz:focus {
        color: #2c3e99; /* Slightly darker on hover (adjust if needed) */
        text-decoration: none;
    }

/* Remove default Bootstrap arrow if not wanted */
.nav-dropdown-link .dropdown-toggle::after {
    margin-left: 0.3em;
    vertical-align: middle;
}


/* Login Links */
.login-links {
    display: inline-flex;
    gap: 10px;
    margin-left: 0;
}

    .login-links a {
        color: #fc8c04;
        text-decoration: none;
        font-weight: normal;
        line-height: 1;
    }

.logo-container {
    position: absolute;
    top: 20px;
    left: 20px;
    white-space: nowrap;
    width: 600px;
}
    

/* Title Section */
.title-section {
    position: absolute;
    margin-top: -150px;
    margin-left: 400px;
    width: 700px; /* or however wide you need */
    white-space: nowrap; /* prevent text wrap */
    overflow: hidden; /* optional, hides overflow if needed */
}
.title-section--centered {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-55%);
    white-space: nowrap;
    text-align: center;
    width: 700px; /* or however wide you need */
    white-space: nowrap; /* prevent text wrap */
    overflow: hidden; /* optional, hides overflow if needed */
}


.title-section--centered-loggedin {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-65%);
    white-space: nowrap;
    text-align: center;
    width: 700px; /* or however wide you need */
    white-space: nowrap; /* prevent text wrap */
    overflow: hidden; /* optional, hides overflow if needed */
}

.title-section-loggedin {
    position: absolute;
    top: 50px;
    left: 300px;
    white-space: nowrap;
    text-align: center;
    width: 600px; 
}

.title-section-not-loggedin {
    position: absolute;
    top: 50px;
    left: 300px;
    white-space: nowrap;
    text-align: center;
    width: 600px;
}


.titleHomeHeader {
    font-family: CabinSketch-Bold, Cabin Sketch;
    color: #4e67c8;
    font-weight: 700;
    font-size: 62px;
    align-content:flex-start;
    margin-bottom: 0;
    line-height: 1;
}

.subTitleHomeHeader {
    font-family: Montserrat, serif;
    color: #EDFF82;
    font-weight: 600;
    font-size: 20px;
    margin-top: 0;
    align-content: flex-start;
}

.homeHeaderSection {
    margin-top: 80px;
    width: 100%;
    height: 500px;
}


.static-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 1200px; /* fixed width container */
    margin: 0 auto 0px auto; /* center and no space below */
}

.img-pains-gains {
    max-width: 100%;
    height: auto;
}


.pains-gains {
    width: 100%;
    position: relative;
    top: 120px;
    max-height: 700px;
}

.scroll-arrow-container {
    position: absolute;
    left: 548px;
    text-align: center;
}

.arrow-row {
    width: 100%;
    margin: auto;
    position: relative;
    height: 60px; /* adjust as needed */
}

.static-row-wrapper {
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

.static-cell {
    padding: 0 10px;
    box-sizing: border-box;
    flex: 0 0 auto; /* prevent growth or shrink */
}

.static-img {
    width: 350px; /* fixed width image */
    height: auto;
    display: block;
}

.static-cell.text-header-home {
    width: 350px; /* fixed text block width */
    text-align: center;
}

.text-header-home {
    padding: 0 20px;
    box-sizing: border-box;
}

.static-spacer {
    width: 48px;
    min-width: 48px;
    flex: 0 0 48px;
}

.text-content {
    font-family: "Didact Gothic", sans-serif;
    color: black;
    font-weight: 400;
    font-size: 21px;
    text-align: left;
    padding: 10px 0;
}

.hrDiv {
    background-color: #4d68c8;
    height: 2px;
    width: 300px;
    margin: 0 auto;
}



@media (max-width: 1199px) {
    .arrow-row {
        display: none;
    }
}

.scroll-arrow {
    display: block;
    width: 95px;
    height: 36px;
    margin: 0 auto;
    cursor: pointer;
}

#hoverText {
    display: none;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2px 10px;
    border-radius: 5px;
    white-space: nowrap;
}
/* ==========================================================================
   5. Navigation
   ========================================================================== */

/* Base navigation styles (mobile state) */
#header #main-navigation {
    background: #3f8dcf; /* From original */
    position: fixed; /* From original */
    width: 70%; /* From original */
    right: -70%; /* From original */
    top: 0; /* From original */
    height: 100%; /* From original */
    min-height: 100%; /* From original */
    z-index: 49; /* From original */
    padding: 10px 0 0 0; /* From original */
    margin: 0; /* From original */
    /* Transitions */
    -webkit-transition-property: right; /* From original */
    -moz-transition-property: right; /* From original */
    -o-transition-property: right; /* From original */
    transition-property: right; /* From original */
    -webkit-transition-duration: 200ms; /* From original */
    -moz-transition-duration: 200ms; /* From original */
    -o-transition-duration: 200ms; /* From original */
    transition-duration: 200ms; /* From original */
    -webkit-transition-timing-function: ease; /* From original */
    -moz-transition-timing-function: ease; /* From original */
    -o-transition-timing-function: ease; /* From original */
    transition-timing-function: ease; /* From original */
}

    #header #main-navigation ul {
        padding: 0; /* From original */
        margin: 0; /* From original */
    }

    #header #main-navigation a {
        border-bottom: 1px solid #63abed; /* From original */
        display: block; /* From original */
        padding: 10px 20px; /* From original */
        overflow: hidden; /* From original */
        color: white; /* From original */
        margin: 0; /* From original */
        font-weight: 700; /* From original */
        font-size: 16px; /* From original */
    }

        #header #main-navigation a.mobile-menu-btn {
            border: 0; /* From original */
            padding: 0; /* From original */
        }

        #header #main-navigation a:hover {
            opacity: 1; /* From original */
        }

    /* Top menu (mobile state) */
    #header #main-navigation #top-menu {
        border-top: 1px solid #63abed; /* From original */
    }

        #header #main-navigation #top-menu a {
            font-weight: 400; /* From original */
            font-size: 15px; /* From original */
            background: #2778bf; /* From original */
        }

        #header #main-navigation #top-menu li.greeting span {
            display: none; /* From original */
        }

    /* Tab menu (mobile state) */
    #header #main-navigation #tab-menu .sub-menu {
        display: none; /* From original */
    }

        #header #main-navigation #tab-menu .sub-menu a {
            background: #4b9fe7; /* From original */
            font-weight: 500; /* From original */
            padding: 10px 20px 10px 40px; /* From original */
            border-bottom: 1px solid #3f8dcf; /* From original */
        }

    #header #main-navigation #tab-menu li.active .sub-menu {
        display: block; /* From original */
    }


/* Desktop navigation styles */
@media (min-width: 768px) {
    #header #main-navigation {
        position: static; /* From original */
        height: auto; /* From original */
        min-height: auto; /* From original */
        padding: 0 0 0 10px; /* From original */
        background: none; /* From original */
        width: auto; /* From original */
    }

        /* Top menu (desktop state) */
        #header #main-navigation #top-menu {
            background: none; /* From original */
            padding: 0; /* From original */
            margin: 0; /* From original */
            position: absolute; /* From original */
            right: 50px; /* From original */
            top: 20px; /* From original */
            border-top: 0; /* From original */
        }

            #header #main-navigation #top-menu li {
                display: inline; /* From original */
                font-size: 0; /* From original */
            }

                #header #main-navigation #top-menu li a {
                    background: none; /* From original */
                    display: inline-block; /* From original */
                    color: #878787; /* From original */
                    font-size: 13px; /* From original */
                    padding: 0; /* From original */
                    border: 0; /* From original */
                    margin: 0 0 0 24px; /* From original */
                    vertical-align: bottom; /* From original */
                }

                    #header #main-navigation #top-menu li a:hover {
                        background: none; /* From original */
                        opacity: .7; /* From original */
                    }

                #header #main-navigation #top-menu li.active a {
                    font-weight: 600; /* From original */
                }

                #header #main-navigation #top-menu li.greeting span {
                    background: none; /* From original */
                    display: inline-block; /* From original */
                    color: #0066b4; /* From original */
                    font-size: 13px; /* From original */
                    padding: 0; /* From original */
                    border: 0; /* From original */
                    vertical-align: bottom; /* From original */
                    margin: 0 0 0 24px; /* From original */
                }

        /* Tab menu (desktop state) */
        #header #main-navigation #tab-menu {
            padding: 0; /* From original */
            margin: 0; /* From original */
            position: absolute; /* From original */
            right: 50px; /* From original */
            bottom: 0; /* From original */
            height: 35px; /* From original */
        }

            #header #main-navigation #tab-menu li {
                display: inline; /* From original */
                font-size: 0; /* From original */
            }

                #header #main-navigation #tab-menu li a {
                    display: inline-block; /* From original */
                    color: white; /* From original */
                    font-weight: 700; /* From original */
                    font-size: 16px; /* From original */
                    background: #adadad; /* From original */
                    font-family: 'Maven Pro', sans-serif; /* From original */
                    padding: 11px 18px 8px 18px; /* From original */
                    border: 0; /* From original */
                    margin: 0 0 0 2px; /* From original */
                    min-width: 86px; /* From original */
                    width: auto; /* From original */
                    text-align: center; /* From original */
                    line-height: 1; /* From original */
                }

                    #header #main-navigation #tab-menu li a:hover {
                        opacity: .7; /* From original */
                    }

                #header #main-navigation #tab-menu li:first-child a {
                    -webkit-border-radius: 6px 0 0 0; /* From original */
                    -moz-border-radius: 6px 0 0 0; /* From original */
                    -ms-border-radius: 6px 0 0 0; /* From original */
                    -o-border-radius: 6px 0 0 0; /* From original */
                    border-radius: 6px 0 0 0; /* From original */
                }

                #header #main-navigation #tab-menu li:last-child a {
                    -webkit-border-radius: 0 6px 0 0; /* From original */
                    -moz-border-radius: 0 6px 0 0; /* From original */
                    -ms-border-radius: 0 6px 0 0; /* From original */
                    -o-border-radius: 0 6px 0 0; /* From original */
                    border-radius: 0 6px 0 0; /* From original */
                }

                #header #main-navigation #tab-menu li.active a {
                    color: #0066b4; /* From original */
                    background: white; /* From original */
                    position: relative; /* From original */
                    margin-top: -4px; /* From original */
                    padding: 14px 18px 9px 18px; /* From original */
                }

                    #header #main-navigation #tab-menu li.active a:hover {
                        opacity: 1; /* From original */
                    }

            #header #main-navigation #tab-menu .sub-menu {
                background: none; /* From original */
                padding: 0; /* From original */
                margin: 0; /* From original */
                position: absolute; /* From original */
                left: 0px; /* From original */
                top: 51px; /* From original */
                border-top: 0; /* From original */
            }

                #header #main-navigation #tab-menu .sub-menu li {
                    display: inline-block; /* From original */
                    font-size: 0; /* From original */
                    overflow: visible; /* From original */
                }

                    #header #main-navigation #tab-menu .sub-menu li:first-child a {
                        padding: 0; /* From original */
                    }

                        #header #main-navigation #tab-menu .sub-menu li:first-child a:before {
                            display: none; /* From original */
                        }

                    #header #main-navigation #tab-menu .sub-menu li a {
                        background: none; /* From original */
                        display: inline-block; /* From original */
                        color: #9a9a9a; /* From original */
                        font-weight: 500; /* From original */
                        font-size: 15px; /* From original */
                        padding: 0 0 0 20px; /* From original */
                        border: 0; /* From original */
                        margin: 0 20px 0 0; /* From original */
                        min-width: 0; /* From original */
                        position: relative; /* From original */
                    }

                        #header #main-navigation #tab-menu .sub-menu li a:hover {
                            background: none; /* From original */
                            opacity: .7; /* From original */
                        }

                        #header #main-navigation #tab-menu .sub-menu li a:before {
                            content: " "; /* From original */
                            height: 16px; /* From original */
                            width: 1px; /* From original */
                            background: #9a9a9a; /* From original */
                            display: block; /* From original */
                            left: 0; /* From original */
                            top: 0; /* From original */
                            position: absolute; /* From original */
                        }

                    #header #main-navigation #tab-menu .sub-menu li.active a {
                        color: #0066b4; /* From original */
                    }
}

/* IE9 Navigation Hacks */
.lt-ie9 #header #main-navigation {
    position: static;
    height: auto;
    min-height: auto;
    padding: 0 0 0 10px;
    background: none;
    width: auto;
}

    .lt-ie9 #header #main-navigation #top-menu {
        background: none;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 50px;
        top: 20px;
        border-top: 0;
    }

        .lt-ie9 #header #main-navigation #top-menu li {
            display: inline;
            font-size: 0;
        }

            .lt-ie9 #header #main-navigation #top-menu li a {
                background: none;
                display: inline-block;
                color: #878787;
                font-size: 13px;
                padding: 0;
                border: 0;
                margin: 0 0 0 24px;
                vertical-align: bottom;
            }

                .lt-ie9 #header #main-navigation #top-menu li a:hover {
                    background: none;
                    opacity: .7;
                }

            .lt-ie9 #header #main-navigation #top-menu li.active a {
                font-weight: 600;
            }

            .lt-ie9 #header #main-navigation #top-menu li.greeting span {
                background: none;
                display: inline-block;
                color: #0066b4;
                font-size: 13px;
                padding: 0;
                border: 0;
                vertical-align: bottom;
                margin: 0 0 0 24px;
            }

    .lt-ie9 #header #main-navigation #tab-menu {
        padding: 0;
        margin: 0;
        position: absolute;
        right: 50px;
        bottom: 0;
        height: 35px;
    }

        .lt-ie9 #header #main-navigation #tab-menu li {
            display: inline;
            font-size: 0;
        }

            .lt-ie9 #header #main-navigation #tab-menu li a {
                display: inline-block;
                color: white;
                font-weight: 700;
                font-size: 16px;
                background: #adadad;
                font-family: 'Maven Pro', sans-serif;
                padding: 11px 18px 8px 18px;
                border: 0;
                margin: 0 0 0 2px;
                min-width: 86px;
                width: auto;
                text-align: center;
                line-height: 1;
            }

                .lt-ie9 #header #main-navigation #tab-menu li a:hover {
                    opacity: .7;
                }

            .lt-ie9 #header #main-navigation #tab-menu li:first-child a {
                -webkit-border-radius: 6px 0 0 0;
                -moz-border-radius: 6px 0 0 0;
                -ms-border-radius: 6px 0 0 0;
                -o-border-radius: 6px 0 0 0;
                border-radius: 6px 0 0 0;
            }

            .lt-ie9 #header #main-navigation #tab-menu li:last-child a {
                -webkit-border-radius: 0 6px 0 0;
                -moz-border-radius: 0 6px 0 0;
                -ms-border-radius: 0 6px 0 0;
                -o-border-radius: 0 6px 0 0;
                border-radius: 0 6px 0 0;
            }

            .lt-ie9 #header #main-navigation #tab-menu li.active a {
                color: #0066b4;
                background: white;
                position: relative;
                margin-top: -4px;
                padding: 14px 18px 9px 18px;
            }

                .lt-ie9 #header #main-navigation #tab-menu li.active a:hover {
                    opacity: 1;
                }

        .lt-ie9 #header #main-navigation #tab-menu .sub-menu {
            background: none;
            padding: 0;
            margin: 0;
            position: absolute;
            left: 0px;
            top: 51px;
            border-top: 0;
        }

            .lt-ie9 #header #main-navigation #tab-menu .sub-menu li {
                display: inline-block;
                font-size: 0;
                overflow: visible;
            }

                .lt-ie9 #header #main-navigation #tab-menu .sub-menu li:first-child a {
                    padding: 0;
                }

                    .lt-ie9 #header #main-navigation #tab-menu .sub-menu li:first-child a:before {
                        display: none;
                    }

                .lt-ie9 #header #main-navigation #tab-menu .sub-menu li a {
                    background: none;
                    display: inline-block;
                    color: #9a9a9a;
                    font-weight: 500;
                    font-size: 15px;
                    padding: 0 0 0 20px;
                    border: 0;
                    margin: 0 20px 0 0;
                    min-width: 0;
                    position: relative;
                }

                    .lt-ie9 #header #main-navigation #tab-menu .sub-menu li a:hover {
                        background: none;
                        opacity: .7;
                    }

                    .lt-ie9 #header #main-navigation #tab-menu .sub-menu li a:before {
                        content: " ";
                        height: 16px;
                        width: 1px;
                        background: #9a9a9a;
                        display: block;
                        left: 0;
                        top: 0;
                        position: absolute;
                    }

                .lt-ie9 #header #main-navigation #tab-menu .sub-menu li.active a {
                    color: #0066b4;
                }

/* JT Custom Navigation Styles (from original) */
.navAnchor {
    font-size: 14px; /* From original */
    color: #4E67C8; /* From original */
    font-weight: 500; /* From original */
    font-family: "Archivo, Helvetica Neue", Helvetica, Arial, sans-serif; /* From original */
    display: inline-block; /* From original */
    padding: 10px 20px; /* From original */
}

.adminNavAnchor {
    font-size: 20px; /* From original */
    color: #4E67C8; /* From original */
    font-weight: 500; /* From original */
    font-family: "Archivo, Helvetica Neue", Helvetica, Arial, sans-serif; /* From original */
}

.nav-select {
    font-family: 'Archivo', sans-serif; /* Match the font family - From original */
    font-size: 16px; /* Match the font size - From original */
    color: #4E67C8; /* Match the text color - From original */
    text-decoration: none; /* Remove text decoration - From original */
    padding: 8px; /* From original */
    border: none; /* Remove border - From original */
    background-color: transparent; /* Transparent background - From original */
    cursor: pointer; /* From original */
    width: 100%; /* From original */
    max-width: 200px; /* Adjust width as needed - From original */
    appearance: none; /* Remove default styling - From original */
    -webkit-appearance: none; /* Remove default styling for WebKit browsers - From original */
    -moz-appearance: none; /* Remove default styling for Firefox - From original */
    position: relative; /* Position for custom arrow - From original */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%234E67C8' d='M2 5L0 3h4z'/%3E%3C/svg%3E"); /* From original */
    background-repeat: no-repeat; /* From original */
    background-position: right 10px center; /* From original */
    background-size: 8px 10px; /* From original */
}

    .nav-select:hover {
        opacity: 0.7; /* Match hover effect - From original */
    }

.navTable {
    width: 100%; /* From original */
    background-color: #A7EA52; /* From original */
    margin: 0 auto; /* Center the table - From original */
    border-collapse: collapse; /* From original */
}

.navTablePlans {
    width: 100%; /* From original */
    background-color: #59A8D1; /* From original */
    margin: 0 auto; /* Center the table - From original */
    border-collapse: collapse; /* From original */
}

.nav-item {
    padding: 10px; /* From original */
}

.nav-item-icon {
    padding: 2px; /* From original */
    text-align: center; /* From original */
    white-space: nowrap; /* From original */
}

.nav-linkz {
    color: #4E67C8; /* Adjust the color as needed - From original */
    font-family: 'Archivo', sans-serif; /* Use a consistent font - From original */
    font-size: 16px; /* Adjust font size - From original */
    text-decoration: none; /* From original */
}

    .nav-linkz:hover {
        opacity: 0.7; /* From original */
    }

.nav-linkoz {
    color: #FC8C04; /* Adjust the color as needed - From original */
    font-family: 'Archivo', sans-serif; /* Use a consistent font - From original */
    font-size: 16px; /* Adjust font size - From original */
    text-decoration: none; /* From original */
}

    .nav-linkoz:hover {
        opacity: 0.7; /* From original */
    }

.nav-linkx {
    color: #000000; /* Adjust the color as needed - From original */
    font-family: 'Archivo', sans-serif; /* Use a consistent font - From original */
    font-size: 14px; /* Adjust font size - From original */
    text-decoration: none; /* From original */
}

    .nav-linkx:hover {
        opacity: 0.7; /* From original */
    }

.icon-img {
    width: 24px; /* Adjust size as needed - From original */
    height: auto; /* From original */
    margin: 0 5px; /* From original */
    vertical-align: middle; /* From original */
}

    .icon-img.help-icon {
        max-width: 15px; /* Smaller width for the help icon */
    }

/* Logout Button (used in header/nav) */
.logout-btn {
    background: none; /* From original */
    border: none; /* From original */
    color: #000000; /* Matches nav-linkx color - From original */
    font-family: 'Archivo', sans-serif; /* Matches nav-linkx font - From original */
    font-size: 14px; /* Matches nav-linkx font size - From original */
    text-decoration: none; /* Removes default button styles - From original */
    cursor: pointer; /* Ensures it acts like a link - From original */
    padding: 0; /* From original */
    display: inline; /* Keeps it inline like a link - From original */
}

    .logout-btn:hover {
        opacity: 0.7; /* Matches nav-linkx hover effect - From original */
    }


/* ==========================================================================
   6. Forms
   ========================================================================== */

/* Normalize Forms */
form {
    margin: 0; /* Normalize */
    font-size: 12px; /* From original */
}

fieldset {
    border: 1px solid #c0c0c0; /* Normalize */
    margin: 0 2px; /* Normalize */
    padding: 0.35em 0.625em 0.75em; /* Normalize */
}

legend {
    border: 0; /* Normalize */
    padding: 0; /* Normalize */
    white-space: normal; /* Normalize */
    *margin-left: -7px; /* IE6/7 hack */
}

button, input, select, textarea {
    font-size: 100%; /* Normalize */
    margin: 0; /* Normalize */
    vertical-align: baseline; /* Normalize */
    *vertical-align: middle; /* IE6/7 hack */
}

button, input {
    line-height: normal; /* Normalize */
}

button, select {
    text-transform: none; /* Normalize */
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* Normalize */
    cursor: pointer; /* Normalize */
    *overflow: visible; /* IE7 hack */
}

    button[disabled],
    html input[disabled] {
        cursor: default; /* Normalize */
    }

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* Normalize */
    padding: 0; /* Normalize */
    *height: 13px; /* IE6/7 hack */
    *width: 13px; /* IE6/7 hack */
}

input[type="search"] {
    -webkit-appearance: textfield; /* Normalize */
    -moz-box-sizing: border-box; /* Normalize */
    -webkit-box-sizing: border-box; /* Normalize */
    box-sizing: border-box; /* Normalize */
}

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none; /* Normalize */
    }

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0; /* Normalize */
    padding: 0; /* Normalize */
}

textarea {
    overflow: auto; /* Normalize */
    vertical-align: top; /* Normalize */
    resize: vertical; /* HTML5 Boilerplate */
}

/* Form specific styles (from original) */
form.border-top {
    border: none; /* From original */
    padding-bottom: 10px; /* From original */
    padding-top: 25px; /* From original */
}

form .form-input {
    max-width: 580px; /* From original */
    margin: unset; /* From original */
}

    form .form-input .date {
        font-size: 13px; /* From original */
    }

form input.text {
    border: 1px solid #cccccc; /* From original */
    border-radius: 3px; /* From original */
    width: 95%; /* From original */
    padding: 4px 0 5px 2%; /* From original */
    font-size: 13px; /* From original */
    color: black; /* From original */
}

    form input.text.span-all {
        width: 100%; /* From original */
        border: 1px inset solid #cccccc; /* From original */
        -webkit-box-sizing: border-box; /* From original */
        -moz-box-sizing: border-box; /* From original */
        box-sizing: border-box; /* From original */
    }

form input {
    font-family: 'Open Sans', Arial, sans-serif; /* From original */
}

form select {
    font-size: 13px; /* From original */
    font-family: 'Open Sans', Arial, sans-serif; /* From original */
    width: 100%; /* From original */
}

form fieldset {
    border-top: 1px dotted #b1b1b1; /* From original */
    padding-bottom: 10px; /* From original */
    padding-top: 25px; /* From original */
}

    form fieldset > .checkbox {
        margin-bottom: 20px; /* From original */
        margin-top: -10px; /* From original */
    }

        form fieldset > .checkbox label {
            color: #333333; /* From original */
            margin-left: 5px; /* From original */
        }

    form fieldset:first-child {
        border-top: 0; /* From original */
        padding-top: 5px; /* From original */
    }

    form fieldset.no-border {
        border-top: 0; /* From original */
    }

form label {
    display: block; /* From original */
    font-weight: 700; /* From original */
    font-size: 13px; /* From original */
    line-height: 1.3; /* From original */
    margin-bottom: 5px; /* From original */
    color: black; /* From original */
    font-family: 'Open Sans', Arial, sans-serif; /* From original */
}

    form label small {
        font-size: 12px; /* From original */
        font-weight: 400; /* From original */
        display: inline-block; /* From original */
        margin-left: 4px; /* From original */
    }

    form label.required:after {
        content: "*"; /* From original */
        color: #f5782f; /* From original */
        font-weight: 700; /* From original */
    }

@media (min-width: 768px) {
    form label.pad-left {
        padding-left: 30px; /* From original */
    }
}

.lt-ie9 form label.pad-left {
    padding-left: 30px;
}

form .checkbox,
form .radio {
    margin-bottom: 0px; /* From original */
    padding-left: 3px; /* From original */
}

    form .checkbox label,
    form .radio label {
        display: inline; /* From original */
        font-weight: 400; /* From original */
        color: black; /* From original */
        font-size: 12px; /* From original */
        margin-left: 10px; /* From original */
    }

@media (min-width: 768px) {
    form .checkbox label,
    form .radio label {
        display: inline-block; /* From original */
    }
}

.lt-ie9 form .checkbox label, .lt-ie9
form .radio label {
    display: inline-block;
}

form .checkbox input,
form .radio input {
    margin-bottom: 5px; /* From original */
}

form .checkbox.last,
form .radio.last {
    margin-bottom: 5px; /* From original */
}

@media (min-width: 768px) {
    form .checkbox input,
    form .radio input {
        margin-bottom: 0; /* From original */
    }

    form .checkbox.last,
    form .radio.last {
        margin-bottom: 5px; /* From original */
    }
}

.lt-ie9 form .checkbox input, .lt-ie9
form .radio input {
    margin-bottom: 0;
}

.lt-ie9 form .checkbox.last, .lt-ie9
form .radio.last {
    margin-bottom: 5px;
}

/* form button { ... } (commented out in original) */

form.processing {
    opacity: .5; /* From original */
}

    form.processing .processing-instructions {
        display: block; /* From original */
    }

form .date-picker-wrap {
    position: relative; /* From original */
}

    form .date-picker-wrap i {
        position: absolute; /* From original */
        right: 7px; /* From original */
        top: 8px; /* From original */
    }

    form .date-picker-wrap .icon-calendar {
        color: #4ba713; /* From original */
    }

form .upload-widget {
    font-size: 12px; /* From original */
    color: #999999; /* From original */
}

    form .upload-widget .upload-meta {
        background: #f9f9f9; /* From original */
        -webkit-border-radius: 0 0 4px 4px; /* From original */
        -moz-border-radius: 0 0 4px 4px; /* From original */
        -ms-border-radius: 0 0 4px 4px; /* From original */
        -o-border-radius: 0 0 4px 4px; /* From original */
        border-radius: 0 0 4px 4px; /* From original */
        border-top: 1px dotted #b1b1b1; /* From original */
        border-bottom: 1px solid #cccccc; /* From original */
        border-left: 1px solid #cccccc; /* From original */
        border-right: 1px solid #cccccc; /* From original */
        position: relative; /* From original */
        overflow: hidden; /* From original */
        text-align: right; /* From original */
        padding: 5px 10px 2px 10px; /* From original */
    }

        form .upload-widget .upload-meta.datepicker, form .upload-widget .upload-meta.has-input {
            padding: 0; /* From original */
        }

        form .upload-widget .upload-meta i {
            display: block; /* From original */
            position: absolute; /* From original */
            right: 7px; /* From original */
            top: 8px; /* From original */
            z-index: 2; /* From original */
            pointer-events: none; /* From original */
        }

        form .upload-widget .upload-meta .icon-calendar {
            color: #4ba713; /* From original */
            font-size: 14px; /* From original */
        }

        form .upload-widget .upload-meta .icon-file {
            font-size: 14px; /* From original */
            color: #ef803e; /* From original */
        }

        form .upload-widget .upload-meta input {
            background: transparent !important; /* From original */
            padding: 7px 0; /* From original */
            border: 0; /* From original */
            width: 91%; /* From original */
            color: #333333; /* From original */
            text-indent: 7px; /* From original */
            padding-right: 9%; /* From original */
            text-align: right; /* From original */
        }

        form .upload-widget .upload-meta label {
            display: inline-block; /* From original */
            font-weight: 400; /* From original */
            font-size: 12px; /* From original */
            margin-right: 2px; /* From original */
            color: #999999; /* From original */
        }

        form .upload-widget .upload-meta select {
            margin-left: 2px; /* From original */
            width: auto; /* From original */
        }

form .dropzone-area {
    padding: 7px; /* From original */
    min-height: 100px; /* From original */
    border-left: 1px solid #cccccc; /* From original */
    border-right: 1px solid #cccccc; /* From original */
    border-top: 1px solid #cccccc; /* From original */
    -webkit-border-radius: 4px 4px 0 0; /* From original */
    -moz-border-radius: 4px 4px 0 0; /* From original */
    -ms-border-radius: 4px 4px 0 0; /* From original */
    -o-border-radius: 4px 4px 0 0; /* From original */
    border-radius: 4px 4px 0 0; /* From original */
}

    form .dropzone-area.border-bottom {
        border: 1px solid #cccccc; /* From original */
        -webkit-border-radius: 4px; /* From original */
        -moz-border-radius: 4px; /* From original */
        -ms-border-radius: 4px; /* From original */
        -o-border-radius: 4px; /* From original */
        border-radius: 4px; /* From original */
    }

    form .dropzone-area .dz-details {
        padding: 0 0 10px 0; /* From original */
    }

        form .dropzone-area .dz-details .dz-filename,
        form .dropzone-area .dz-details .dz-size {
            display: inline-block; /* From original */
            color: #333333; /* From original */
        }

        form .dropzone-area .dz-details img {
            display: none; /* From original */
        }

    form .dropzone-area .dz-upload {
        display: none; /* From original */
    }

    form .dropzone-area .dz-success-mark {
        display: none; /* From original */
    }

    form .dropzone-area .dz-error-mark {
        display: none; /* From original */
    }

    form .dropzone-area .dz-error-message {
        color: #ed8700; /* From original */
    }

    form .dropzone-area .dz-file-preview.dz-error .dz-details {
        display: none; /* From original */
    }

form .upload-instructions {
    pointer-events: none; /* From original */
}

form .total-progress {
    -webkit-transition-property: width; /* From original */
    -moz-transition-property: width; /* From original */
    -o-transition-property: width; /* From original */
    transition-property: width; /* From original */
    -webkit-transition-duration: 200ms; /* From original */
    -moz-transition-duration: 200ms; /* From original */
    -o-transition-duration: 200ms; /* From original */
    transition-duration: 200ms; /* From original */
    -webkit-transition-timing-function: ease; /* From original */
    -moz-transition-timing-function: ease; /* From original */
    -o-transition-timing-function: ease; /* From original */
    transition-timing-function: ease; /* From original */
    height: 10px; /* From original */
    margin-bottom: 10px; /* From original */
    background: #4ba713; /* From original */
    display: none; /* From original */
}

form .processing-instructions {
    display: none; /* From original */
    font-size: 12px; /* From original */
    margin-top: 10px; /* From original */
    color: #878787; /* From original */
}

form #spin-container {
    position: relative; /* From original */
    display: inline-block; /* From original */
    width: 20px; /* From original */
    margin-left: 10px; /* From original */
    vertical-align: middle; /* From original */
}

form .form-Resouces {
    margin-top: -10px; /* From original */
}

    form .form-Resouces.relative-container .exit {
        top: 0px; /* From original */
        margin: 10px 0; /* From original */
        display: block; /* From original */
    }

@media (min-width: 768px) {
    form .form-Resouces.relative-container .exit {
        position: absolute; /* From original */
        right: 0px; /* From original */
        top: -2px; /* From original */
    }
}

.lt-ie9 form .form-Resouces.relative-container .exit {
    position: absolute;
    right: 0px;
    top: -2px;
}

form .form-Resouces .exit {
    display: inline-block; /* From original */
    position: relative; /* From original */
    top: 6px; /* From original */
    font-size: 13px; /* From original */
}

form .form-Resouces .btn-group .btn {
    margin-left: 4px; /* From original */
}

    form .form-Resouces .btn-group .btn:first-child {
        margin-left: 0; /* From original */
    }

.terms {
    padding-top: 30px; /* From original */
    max-width: 860px; /* From original */
    margin: 0 auto; /* From original */
}

    .terms p {
        color: #999999; /* From original */
    }

/* Validation feedback */
.field-validation-error {
    color: red; /* From original */
}

.validation-summary-errors {
    color: red; /* From original */
}

/* Placeholder styles */
form ::-webkit-input-placeholder,
form :-moz-placeholder,
form ::-moz-placeholder,
form :-ms-input-placeholder,
form input[placeholder],
form input:-moz-placeholder {
    color: #adadad; /* From original */
    opacity: 1; /* From original */
}


/* ==========================================================================
   6.1 Buttons
   ========================================================================== */

/* Button-like link */
.my-btn-link {
    padding: 0; /* From original */
    border: none; /* From original */
    background: none; /* From original */
    color: #0056b3; /* From original */
}

/* JT Custom Button Styles (from original) */
.buttonContainer {
    display: flex; /* Use Flexbox for layout - From original */
    justify-content: flex-start; /* Align buttons to the left - From original */
    margin-top: 10px; /* Optional: Add margin to separate from text - From original */
}

/* Base button styling */
.buttonBase {
    font-family: "Didact Gothic", serif;
    padding: 4px 15px; /* From original */
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25); /* From original */
    border-color: transparent; /* Use transparent for #FFFFFF00 - From original */
    border-width: 1px; /* From original */
    border-style: solid; /* From original */
    border-radius: 4px; /* From original */
    font-size: 18px; /* From original */
    font-weight: 700;
    color: #fff; /* White text color - From original */
    text-align: center; /* Center text inside the button - From original */
    cursor: pointer; /* Pointer cursor for buttons - From original */
    margin-right: 10px; /* Margin for spacing between buttons - From original */
    text-decoration: none; /* Remove underline for links - From original */
    display: inline-block; /* Ensure buttons are inline - From original */
}

/* Specific button styles */
.PlansButtons {
    background: #4E67C8; /* From original */
}

.MeasuresButtons {
    background: #59A8D1; /* From original */
}

.ManagerButtons {
    background: #87C552; /* From original */
}

.MeetingsButtons {
    background: #9B70DA; /* From original */
}

.DashboardButtons {
    background: #FC5104; /* From original */
}

.PlansPageButtons {
    background: #FC8C04;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    color: white; /* Added color: white here */
}

/* Hover effect for all buttons */
.buttonBase:hover {
    opacity: 0.8; /* Slightly reduce opacity on hover - From original */
}

/* General Button Styles (from original) */
.btn {
    font-family: 'Open Sans', sans-serif; /* From original */
    font-size: 11px; /* From original */
    display: inline-block; /* From original */
    text-align: center; /* From original */
    background: #cccccc; /* From original */
    padding: 5px 8px; /* From original */
    width: auto; /* From original */
    border: 1px solid #cccccc; /* From original */
    text-transform: uppercase; /* From original */
    line-height: 1; /* From original */
    -webkit-border-radius: 6px; /* From original */
    -moz-border-radius: 6px; /* From original */
    -ms-border-radius: 6px; /* From original */
    -o-border-radius: 6px; /* From original */
    border-radius: 6px; /* From original */
}

    .btn:hover {
        opacity: .7; /* From original */
        border: 1px solid #cccccc; /* From original */
    }

    .btn.green {
        color: #007700; /* From original */
    }

    .btn.red {
        border: 0; /* From original */
        background: #ff4d4d; /* From original */
        color: #feffff; /* From original */
    }

        .btn.red:hover {
            opacity: .7; /* From original */
        }

    .btn.blue {
        color: #0066b4; /* From original */
    }

    .btn.blue2 {
        border: 0; /* From original */
        background: #2485cf; /* From original */
        color: #feffff; /* From original */
        margin-bottom: 5px !important; /* From original */
    }

        .btn.blue2:hover {
            opacity: .7; /* From original */
        }

    .btn.small {
        font-weight: 600; /* From original */
        padding: 5px 8px; /* From original */
        width: 94px; /* From original */
        font-size: 11px; /* From original */
    }

        .btn.small.no-border {
            padding: 6px 9px; /* From original */
        }

    .btn.small2 {
        font-weight: 700; /* From original */
        padding: 5px 8px; /* From original */
        width: auto; /* From original */
        text-transform: none; /* From original */
        font-size: 11px; /* From original */
    }

        .btn.small2.no-border {
            padding: 6px 9px; /* From original */
        }

    .btn.small3 {
        font-weight: 700; /* From original */
        padding: 5px 8px; /* From original */
        width: 42px; /* From original */
        text-transform: none; /* From original */
        font-size: 11px; /* From original */
    }

        .btn.small3.no-border {
            padding: 6px 9px; /* From original */
        }

    .btn.medium {
        font-weight: 600; /* From original */
        font-size: 14px; /* From original */
        padding: 7px 10px; /* From original */
        text-transform: none; /* From original */
    }

        .btn.medium.no-border {
            padding: 8px 11px; /* From original */
        }

@media (min-width: 768px) {
    .btn.medium {
        padding: 7px 17px; /* From original */
    }

        .btn.medium.no-border {
            padding: 8px 18px; /* From original */
        }
}

.lt-ie9 .btn.medium {
    padding: 7px 17px;
}

    .lt-ie9 .btn.medium.no-border {
        padding: 8px 18px;
    }

.btn.medium2 {
    font-weight: 700; /* From original */
    padding: 7px 10px; /* From original */
    text-transform: none; /* From original */
    font-size: 14px; /* From original */
}

    .btn.medium2.no-border {
        padding: 8px 11px; /* From original */
    }

@media (min-width: 768px) {
    .btn.medium2 {
        padding: 7px 17px; /* From original */
    }

        .btn.medium2.no-border {
            padding: 8px 18px; /* From original */
        }
}

.lt-ie9 .btn.medium2 {
    padding: 7px 17px;
}

    .lt-ie9 .btn.medium2.no-border {
        padding: 8px 18px;
    }

.btn .rarr {
    font-family: Arial, sans-serif; /* From original */
    font-size: 14px; /* From original */
}


/* ==========================================================================
   6.2 Typeahead
   ========================================================================== */

.tt-input, /* UPDATE: newer versions use tt-input instead of tt-query */ /* From original */
.tt-hint {
    width: 400px; /* From original */
    height: 30px; /* From original */
    padding: 8px 12px; /* From original */
    font-size: 24px; /* From original */
    line-height: 30px; /* From original */
    border: 2px solid #ccc; /* From original */
    border-radius: 8px; /* From original */
    outline: none; /* From original */
}

.tt-input { /* UPDATE: newer versions use tt-input instead of tt-query */ /* From original */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* From original */
}

.tt-hint {
    color: #999; /* From original */
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */ /* From original */
    width: 422px; /* From original */
    margin-top: 12px; /* From original */
    padding: 8px 0; /* From original */
    background-color: #fff; /* From original */
    border: 1px solid #ccc; /* From original */
    border: 1px solid rgba(0, 0, 0, 0.2); /* From original */
    border-radius: 8px; /* From original */
    box-shadow: 0 5px 10px rgba(0,0,0,.2); /* From original */
}

.tt-suggestion {
    padding: 3px 20px; /* From original */
    font-size: 18px; /* From original */
    line-height: 24px; /* From original */
}

    .tt-suggestion.tt-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */ /* From original */
        color: #fff; /* From original */
        background-color: #0097cf; /* From original */
    }

    .tt-suggestion p {
        margin: 0; /* From original */
    }

typeahead {
    font-size: 4px; /* From original */
}


/* ==========================================================================
   6.3 Specific Components (k-editor)
   ========================================================================== */

k-editor {
    height: 750px; /* From original */
}


/* ==========================================================================
   7. Tables
   ========================================================================== */

/* Normalize Tables */
table {
    border-collapse: collapse; /* Normalize */
    border-spacing: 0; /* Normalize */
    /* From original: */
    border: none;
    margin-bottom: 16px;
    width: 100%;
    background-color: white;
}

    /* Table cell padding (from original - duplicate, consolidated) */
    table th, table td {
        padding: 9px 10px;
    }

    /* Table header styles */
    table thead th {
        background: #F1F1F1; /* From original */
        background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #F1F1F1), color-stop(100%, #ffffff)); /* From original */
        background: -webkit-linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
        background: -moz-linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
        background: -o-linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
        background: linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
        /* From original: */
        font-family: 'Open Sans', sans-serif;
        font-size: 11px;
        color: #010000;
        text-align: left;
        font-weight: 600;
        position: relative;
        overflow: hidden;
    }

    table th span {
        display: inline-block; /* From original */
        overflow: hidden; /* From original */
        position: relative; /* From original */
        padding-right: 16px; /* From original */
    }

    table th .checkbox {
        margin-right: 15px; /* From original */
    }

@media (min-width: 1024px) {
    table th {
        font-size: 13px; /* From original */
    }
}

.lt-ie9 table th {
    font-size: 13px;
}

/* Sortable header styles */
table th.sorting {
    cursor: pointer; /* From original */
    background-color: white; /* From original */
}

    table th.sorting span {
        cursor: pointer !important; /* From original */
    }

table th.sorting_desc .sort-icon {
    vertical-align: middle; /* From original */
    display: inline-block; /* From original */
    content: " "; /* From original */
    position: absolute; /* From original */
    top: 8px; /* From original */
    right: 0px; /* From original */
    width: 0; /* From original */
    height: 0; /* From original */
    border: none; /* From original */
}

table th.sorting_desc span {
    cursor: pointer !important; /* From original */
}

table th.sorting_asc {
    cursor: pointer; /* From original */
}

    table th.sorting_asc .sort-icon {
        display: inline-block; /* From original */
        vertical-align: middle; /* From original */
        content: " "; /* From original */
        position: absolute; /* From original */
        top: 8px; /* From original */
        right: 0px; /* From original */
        width: 0; /* From original */
        height: 0; /* From original */
        border: none; /* From original */
    }

    table th.sorting_asc span {
        cursor: pointer !important; /* From original */
    }

/* Table data cell styles */
table td {
    color: #333333; /* From original */
    font-size: 13px; /* Added for consistency, from original media query */
}

@media (min-width: 1024px) {
    table td {
        font-size: 13px; /* From original */
    }
}

.lt-ie9 table td {
    font-size: 13px;
}

table td .btn-group .btn {
    margin-right: 4px; /* From original */
}

    table td .btn-group .btn:last-child {
        margin-right: 0; /* From original */
    }

table td input.text {
    width: 80px; /* From original */
    -webkit-border-radius: 4px; /* From original */
    -moz-border-radius: 4px; /* From original */
    -ms-border-radius: 4px; /* From original */
    -o-border-radius: 4px; /* From original */
    border-radius: 4px; /* From original */
    margin-left: 2px; /* From original */
}

/* Delete row icon (in table cells) */
table td .delete-row {
    vertical-align: middle; /* From original */
    margin-left: 5px; /* From original */
    color: #bfbfbf; /* From original */
    font-size: 16px; /* From original */
    position: absolute; /* From original */
    right: 0; /* From original */
    top: 2px; /* From original */
}

    table td .delete-row:hover {
        opacity: 1; /* From original */
    }

@media (min-width: 1025px) {
    table td .delete-row {
        visibility: hidden; /* From original */
    }
}

.lt-ie9 table td .delete-row {
    visibility: hidden;
}

table tr:hover .delete-row,
table tr:hover .delete-row {
    visibility: visible; /* From original */
}

/* Alternating row colors */
table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th {
    background-color: #f0f5fa !important; /* From original */
}

/* Specific table styles */
.NoBorder {
    border-top: 0; /* From original */
    border-bottom: 0; /* From original */
    border-left: 0; /* From original */
    border-right: 0; /* From original */
    margin-bottom: 2px; /* From original */
    /*width: 100%;*/ /* Commented out in original */
    background-color: white; /* From original */
    padding: 0 0 0 0; /* From original */
    text-wrap: avoid; /* From original */
    /*width:auto;*/ /* Commented out in original */
    /*min-width:400px;*/ /* Commented out in original */
}

/* JT Custom home table header (override alternating colors) */
.homeHeaderTable tbody tr:nth-child(even) td,
.homeHeaderTable tbody tr:nth-child(even) th {
    background-color: transparent !important; /* Override with transparent background - From original */
}

/* Icons within tables */
table .icon-with-link {
    display: inline-block; /* From original */
    position: relative; /* From original */
}

    table .icon-with-link a {
        position: absolute; /* From original */
        left: 100%; /* From original */
        top: 6px; /* From original */
        margin-left: 3px; /* From original */
        font-size: 12px; /* From original */
        font-family: 'Open Sans', sans-serif; /* From original */
    }

table .icon {
    display: block; /* From original */
    margin: 0 auto; /* From original */
    font-size: 20px; /* From original */
    width: 24px; /* From original */
    text-align: center; /* From original */
    padding: 4px 0; /* From original */
}

    table .icon.inlineblock {
        display: inline-block; /* From original */
    }

    table .icon.icon-clock {
        color: #878787; /* From original */
        padding: 2px 0; /* From original */
    }

    table .icon.icon-checkmark {
        color: #4ba713; /* From original */
        font-size: 16px; /* From original */
    }

    table .icon.icon-close {
        color: #ef803e; /* From original */
        font-size: 14px; /* From original */
        padding: 5px 0; /* From original */
    }

    table .icon.icon-docs {
        margin-top: 4px; /* From original */
    }

    table .icon.icon-add-docs {
        margin-top: 5px; /* From original */
    }

    table .icon.icon-edit {
        color: #399eb0; /* From original */
    }

/* Resource table styles */
.table-Resouces .btn-group {
    font-size: 0px; /* From original */
}

    .table-Resouces .btn-group .btn {
        margin-right: 5px; /* From original */
    }

.table-Resouces .pagination {
    float: right; /* From original */
}

    .table-Resouces .pagination .page-info {
        font-size: 12px; /* From original */
        color: #676767; /* From original */
        display: inline-block; /* From original */
        margin-right: 10px; /* From original */
    }

    .table-Resouces .pagination .page-buttons {
        font-size: 0; /* From original */
    }

        .table-Resouces .pagination .page-buttons .btn {
            color: #787878; /* From original */
            padding: 7px 10px; /* From original */
        }

            .table-Resouces .pagination .page-buttons .btn.prev {
                -webkit-border-radius: 6px 0px 0px 6px; /* From original */
                -moz-border-radius: 6px 0px 0px 6px; /* From original */
                -ms-border-radius: 6px 0px 0px 6px; /* From original */
                -o-border-radius: 6px 0px 0px 6px; /* From original */
                border-radius: 6px 0px 0px 6px; /* From original */
            }

            .table-Resouces .pagination .page-buttons .btn.next {
                -webkit-border-radius: 0px 6px 6px 0px; /* From original */
                -moz-border-radius: 0px 6px 6px 0px; /* From original */
                -ms-border-radius: 0px 6px 6px 0px; /* From original */
                -o-border-radius: 0px 6px 6px 0px; /* From original */
                border-radius: 0px 6px 6px 0px; /* From original */
                border-left: 0; /* From original */
            }


/* ==========================================================================
  8. Footer
  ========================================================================== */

#footer {
    padding-bottom: 50px;
    padding-top: 12px;
    background-color: #E1FD39 !important;
}

    #footer p {
        color: gray;
        font-size: 11px;
    }

    #footer a {
        text-decoration: none;
    }

    #footer .footer-links {
        display: block;
        margin-top: 5px;
    }

@media (min-width: 768px) {
    #footer .footer-links {
        display: inline;
        margin-top: 0;
    }
}

.lt-ie9 #footer .footer-links {
    display: inline;
    margin-top: 0;
}

/* Footer Styles */
.footer-content {
    padding: 20px;
}

.footer-title {
    margin-bottom: 10px;
    font-family: CabinSketch-Bold, Cabin Sketch;
    color: #4e67c8;
    font-weight: 700;
    font-size: 42px;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
}

.footer-column {
    width: 48%;
}

.footer-column-title {
    font-weight: bold;
    margin-bottom: 5px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #000000;
}

.coming-soon {
    color: red; /* Make "Coming soon!" red */
    font-family: 'Archivo', sans-serif; /* Use a consistent font */
    font-size: 14px; /* Adjust font size */
}

.nav-linkx {
    display: block; /* Keep block display */
    margin-bottom: 5px;
    color: #000000;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    text-decoration: none;
}

    .nav-linkx:hover {
        opacity: 0.7;
    }


.footer-column .nav-linkx {
    line-height: 2; /* Increase line spacing */
}



.footer-bottom {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-top: 20px;
    padding-top: 10px;
    /* border-top: 1px solid #ccc; Remove this line */
}

.blogo-container {
    width: 175px;
    height: 82px;
    position: relative;
}

.blogo-image {
    width: 92px;
    height: 82px;
}

.footer-bottom-text {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    margin-left: 10px; /* Add some space between logo and text */
}

.footer-copyright {
    font-size: 0.7em;
    margin-left: 0px; /* Adjust left alignment */
}

.footer-links {
    font-size: 0.7em;
    margin-left: 0px; /* Adjust left alignment */
}

.footer-link {
    color: #4E67C8;
    text-decoration: none;
    transition: color 0.3s;
}

    .footer-link:hover {
        color: #2E4A9E;
        text-decoration: underline;
    }

/* For specific nav-linkx elements in the footer that need to be inline */
.footer-column .inline-footer-link { /* Increased specificity to win cascade */
    display: inline-block !important; /* Force inline-block, overriding any stubborn 'block' */
    width: auto !important; /* Force width to be content-based, overriding any 'width: 100%' */
    margin-bottom: 0; /* Override the default 5px margin-bottom from .nav-linkx */
    vertical-align: middle; /* Helps align text if font sizes differ slightly within the line */
    line-height: 1.2; /* Ensure proper line height for inline elements */
}

    /* Ensure the .coming-soon span within these inline links doesn't cause issues */
    .footer-column .inline-footer-link .coming-soon { /* Increased specificity */
        display: inline; /* Explicitly keep it inline within the link */
    }

.footer-bottom-text {
    position: relative; /* allow child absolute positioning */
    margin-left: 10px;
    width: 0; /* collapse width so positioning starts from logo edge */
}

/* Staggered positions, relative to the logo */
.stagger-1 {
    position: absolute;
    bottom: -25px;
    left: -90px; /* offset right of logo */
    font-size: 0.6em;
    color: #2E4A9E;
    cursor: default;
}

.stagger-2 {
    position: absolute;
    bottom: -50px;
    left: -100px;
    font-size: 0.6em;
}

.stagger-3 {
    position: absolute;
    bottom: -75px;
    left: -120px;
    font-size: 0.6em;
}

/* ==========================================================================
   9. jQuery UI (Includes Date Picker Styles)
   ========================================================================== */

/* jQuery UI Core Styles (from original) */
.ui-helper-hidden {
    display: none;
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
    content: "";
    display: table;
    border-collapse: collapse;
}

.ui-helper-clearfix:after {
    clear: both;
}

.ui-helper-clearfix {
    min-height: 0;
    /* support: IE7 */
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.ui-front {
    z-index: 100;
    /* position: relative; display: inline; - from first block, removed in second*/
}

/* Interaction Cues */
.ui-state-disabled {
    cursor: default !important;
}

/* Icons */
.ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    width: 16px; /* From icon block */
    height: 16px; /* From icon block */
}

/* Misc visuals */
/* Overlays */
.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* From theme block: */
    background: rgba(255, 255, 255, 0.5);
}

/* Draggable */
.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

/* Resizable */
.ui-resizable {
    position: relative;
}

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
    /* From dialog block: */
    background-position: 16px 16px;
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

/* Button */
.ui-button {
    display: inline-block;
    position: relative;
    padding: 0;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    overflow: visible;
    /* removes extra width in IE */
}

    .ui-button,
    .ui-button:link,
    .ui-button:visited,
    .ui-button:hover,
    .ui-button:active {
        text-decoration: none;
    }

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
    width: 2.2em;
}

/* button elements seem to need a little more width */
button.ui-button-icon-only {
    width: 2.4em;
}

.ui-button-icons-only {
    width: 3.4em;
}

button.ui-button-icons-only {
    width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
    display: block;
    line-height: normal;
}

.ui-button-text-only .ui-button-text {
    padding: 0;
    line-height: 1;
}

.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
    padding: .4em;
    text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 1em .4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
    padding: .4em 2.1em .4em 1em;
}

.ui-button-text-icons .ui-button-text {
    padding-left: 2.1em;
    padding-right: 2.1em;
}

/* no icon support for input elements, provide padding by default */
input.ui-button {
    padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
    position: absolute;
    top: 50%;
    margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
    left: 50%;
    margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
    left: .5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
    right: .5em;
}

/* button sets */
.ui-buttonset {
    margin-right: 7px;
}

    .ui-buttonset .ui-button {
        margin-left: 0;
        margin-right: -.3em;
    }

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Dialog */
.ui-dialog {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    /* From first block: */
    padding: .2em;
    outline: 0;
    -webkit-box-shadow: 0px 0px 10px px rgba(50, 50, 50, 0.25);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.25);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.25);
    /* From second block: */
    padding: 0;
}

    .ui-dialog .ui-dialog-titlebar {
        padding: .4em 20px;
        position: relative;
        /* From second block: */
        display: none;
    }

    .ui-dialog .ui-dialog-title {
        float: left;
        margin: .1em 0;
        white-space: nowrap;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        position: absolute;
        right: .3em;
        top: 50%;
        width: 20px;
        margin: -10px 0 0 0;
        padding: 1px;
        height: 20px;
    }

    .ui-dialog .ui-dialog-content {
        position: relative;
        border: 0;
        background: none;
        overflow: auto;
        /* From first block: */
        padding: 1em 20px 0 20px;
        /* From second block: */
        padding: 1.5em 20px 0 20px;
    }

    .ui-dialog .ui-dialog-buttonpane {
        border: 0;
        background-image: none;
        margin-top: .5em;
        padding: 0 1em .5em .4em;
        /* From second block: */
        text-align: center;
        margin-top: 0;
        padding: .25em 1em 2em .4em;
        margin-top: 0 !important;
        /* From third block: */
        margin: .5em .4em .5em 0;
        cursor: pointer;
    }

    .ui-dialog .ui-resizable-se {
        width: 12px;
        height: 12px;
        right: -5px;
        bottom: -5px;
        background-position: 16px 16px;
    }

.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}

/* jQuery UI Theme Styles (from original) */
/* Component containers */
.ui-widget {
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

    .ui-widget .ui-widget {
        font-size: 1em;
    }

    .ui-widget input,
    .ui-widget select,
    .ui-widget textarea,
    .ui-widget {
        font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
        font-size: 1em;
    }

.ui-widget-content {
    border: 1px solid #cccccc;
    background: white;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

    .ui-widget-content a {
        color: #333333;
    }

.ui-widget-header,
.ui-widget-header.ui-corner-all {
    border: 0;
    background: #f1f1f1;
    color: #4ca2e6;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    -webkit-border-radius: 10px 10px 0 0 !important;
    -moz-border-radius: 10px 10px 0 0 !important;
    -ms-border-radius: 10px 10px 0 0 !important;
    -o-border-radius: 10px 10px 0 0 !important;
    border-radius: 10px 10px 0 0 !important;
    font-family: 'Maven Pro', sans-serif;
}

    .ui-widget-header a {
        color: #ffffff;
    }

    /* Interaction states */
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default {
        border: 1px solid #cccccc;
        background: #f6f6f6;
        font-weight: bold;
        color: #1c94c4;
    }

        .ui-state-default a,
        .ui-state-default a:link,
        .ui-state-default a:visited {
            color: #1c94c4;
            text-decoration: none;
        }

    .ui-state-hover,
    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-state-focus,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        border: 1px solid #fbcb09;
        background: #fdf5ce;
        font-weight: bold;
        color: #c77405;
    }

        .ui-state-hover a,
        .ui-state-hover a:hover,
        .ui-state-hover a:link,
        .ui-state-hover a:visited,
        .ui-state-focus a,
        .ui-state-focus a:hover,
        .ui-state-focus a:link,
        .ui-state-focus a:visited {
            color: #c77405;
            text-decoration: none;
        }

    .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        border: 1px solid #fbd850;
        background: #ffffff;
        font-weight: bold;
        color: #eb8f00;
    }

        .ui-state-active a,
        .ui-state-active a:link,
        .ui-state-active a:visited {
            color: #eb8f00;
            text-decoration: none;
        }

    /* Interaction Cues */
    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        border: 1px solid #fed22f;
        background: #4286f4;
        color: #ffffff;
        text-align: center;
    }

        .ui-state-highlight a,
        .ui-widget-content .ui-state-highlight a,
        .ui-widget-header .ui-state-highlight a {
            color: #363636;
        }

    .ui-state-error,
    .ui-widget-content .ui-state-error,
    .ui-widget-header .ui-state-error {
        border: 1px solid #cccccc;
        background: #b81900;
        color: #ffffff;
    }

        .ui-state-error a,
        .ui-widget-content .ui-state-error a,
        .ui-widget-header .ui-state-error a {
            color: #ffffff;
        }

    .ui-state-error-text,
    .ui-widget-content .ui-state-error-text,
    .ui-widget-header .ui-state-error-text {
        color: #ffffff;
    }

    .ui-priority-primary,
    .ui-widget-content .ui-priority-primary,
    .ui-widget-header .ui-priority-primary {
        font-weight: bold;
    }

    .ui-priority-secondary,
    .ui-widget-content .ui-priority-secondary,
    .ui-widget-header .ui-priority-secondary {
        opacity: .7;
        filter: Alpha(Opacity=70);
        font-weight: normal;
    }

    .ui-state-disabled,
    .ui-widget-content .ui-state-disabled,
    .ui-widget-header .ui-state-disabled {
        opacity: .35;
        filter: Alpha(Opacity=35);
        background-image: none;
    }

        .ui-state-disabled .ui-icon {
            filter: Alpha(Opacity=35);
            /* For IE8 - See #6059 */
        }

/* Icons positioning */
.ui-icon-blank {
    background-position: 16px 16px;
}

.ui-icon-carat-1-n {
    background-position: 0 0;
}

.ui-icon-carat-1-ne {
    background-position: -16px 0;
}

.ui-icon-carat-1-e {
    background-position: -32px 0;
}

.ui-icon-carat-1-se {
    background-position: -48px 0;
}

.ui-icon-carat-1-s {
    background-position: -64px 0;
}

.ui-icon-carat-1-sw {
    background-position: -80px 0;
}

.ui-icon-carat-1-w {
    background-position: -96px 0;
}

.ui-icon-carat-1-nw {
    background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
    background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
    background-position: -144px 0;
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
    background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
    background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
    background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px;
}

.ui-icon-arrow-4 {
    background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px;
}

.ui-icon-extlink {
    background-position: -32px -80px;
}

.ui-icon-newwin {
    background-position: -48px -80px;
}

.ui-icon-refresh {
    background-position: -64px -80px;
}

.ui-icon-shuffle {
    background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px;
}

.ui-icon-folder-open {
    background-position: -16px -96px;
}

.ui-icon-document {
    background-position: -32px -96px;
}

.ui-icon-document-b {
    background-position: -48px -96px;
}

.ui-icon-note {
    background-position: -64px -96px;
}

.ui-icon-mail-closed {
    background-position: -80px -96px;
}

.ui-icon-mail-open {
    background-position: -96px -96px;
}

.ui-icon-suitcase {
    background-position: -112px -96px;
}

.ui-icon-comment {
    background-position: -128px -96px;
}

.ui-icon-person {
    background-position: -144px -96px;
}

.ui-icon-print {
    background-position: -160px -96px;
}

.ui-icon-trash {
    background-position: -176px -96px;
}

.ui-icon-locked {
    background-position: -192px -96px;
}

.ui-icon-unlocked {
    background-position: -208px -96px;
}

.ui-icon-bookmark {
    background-position: -224px -96px;
}

.ui-icon-tag {
    background-position: -240px -96px;
}

.ui-icon-home {
    background-position: 0 -112px;
}

.ui-icon-flag {
    background-position: -16px -112px;
}

.ui-icon-calendar {
    background-position: -32px -112px;
}

.ui-icon-cart {
    background-position: -48px -112px;
}

.ui-icon-pencil {
    background-position: -64px -112px;
}

.ui-icon-clock {
    background-position: -80px -112px;
}

.ui-icon-disk {
    background-position: -96px -112px;
}

.ui-icon-calculator {
    background-position: -112px -112px;
}

.ui-icon-zoomin {
    background-position: -128px -112px;
}

.ui-icon-zoomout {
    background-position: -144px -112px;
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-icon-wrench {
    background-position: -176px -112px;
}

.ui-icon-gear {
    background-position: -192px -112px;
}

.ui-icon-heart {
    background-position: -208px -112px;
}

.ui-icon-star {
    background-position: -224px -112px;
}

.ui-icon-link {
    background-position: -240px -112px;
}

.ui-icon-cancel {
    background-position: 0 -128px;
}

.ui-icon-plus {
    background-position: -16px -128px;
}

.ui-icon-plusthick {
    background-position: -32px -128px;
}

.ui-icon-minus {
    background-position: -48px -128px;
}

.ui-icon-minusthick {
    background-position: -64px -128px;
}

.ui-icon-close {
    background-position: -80px -128px;
}

.ui-icon-closethick {
    background-position: -96px -128px;
}

.ui-icon-key {
    background-position: -112px -128px;
}

.ui-icon-lightbulb {
    background-position: -128px -128px;
}

.ui-icon-scissors {
    background-position: -144px -128px;
}

.ui-icon-clipboard {
    background-position: -160px -128px;
}

.ui-icon-copy {
    background-position: -176px -128px;
}

.ui-icon-contact {
    background-position: -192px -128px;
}

.ui-icon-image {
    background-position: -208px -128px;
}

.ui-icon-video {
    background-position: -224px -128px;
}

.ui-icon-script {
    background-position: -240px -128px;
}

.ui-icon-alert {
    background-position: 0 -144px;
}

.ui-icon-info {
    background-position: -16px -144px;
}

.ui-icon-notice {
    background-position: -32px -144px;
}

.ui-icon-help {
    background-position: -48px -144px;
}

.ui-icon-check {
    background-position: -64px -144px;
}

.ui-icon-bullet {
    background-position: -80px -144px;
}

.ui-icon-radio-on {
    background-position: -96px -144px;
}

.ui-icon-radio-off {
    background-position: -112px -144px;
}

.ui-icon-pin-w {
    background-position: -128px -144px;
}

.ui-icon-pin-s {
    background-position: -144px -144px;
}

.ui-icon-play {
    background-position: 0 -160px;
}

.ui-icon-pause {
    background-position: -16px -160px;
}

.ui-icon-seek-next {
    background-position: -32px -160px;
}

.ui-icon-seek-prev {
    background-position: -48px -160px;
}

.ui-icon-seek-end {
    background-position: -64px -160px;
}

.ui-icon-seek-start {
    background-position: -80px -160px;
}
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
    background-position: -80px -160px;
}

.ui-icon-stop {
    background-position: -96px -160px;
}

.ui-icon-eject {
    background-position: -112px -160px;
}

.ui-icon-volume-off {
    background-position: -128px -160px;
}

.ui-icon-volume-on {
    background-position: -144px -160px;
}

.ui-icon-power {
    background-position: 0 -176px;
}

.ui-icon-signal-diag {
    background-position: -16px -176px;
}

.ui-icon-signal {
    background-position: -32px -176px;
}

.ui-icon-battery-0 {
    background-position: -48px -176px;
}

.ui-icon-battery-1 {
    background-position: -64px -176px;
}

.ui-icon-battery-2 {
    background-position: -80px -176px;
}

.ui-icon-battery-3 {
    background-position: -96px -176px;
}

.ui-icon-circle-plus {
    background-position: 0 -192px;
}

.ui-icon-circle-minus {
    background-position: -16px -192px;
}

.ui-icon-circle-close {
    background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px;
}

.ui-icon-circle-check {
    background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px;
}

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 10px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 10px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 10px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 10px;
}

/* Overlays (shadow) */
.ui-widget-shadow {
    margin: -5px 0 0 -5px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    opacity: .2;
    filter: Alpha(Opacity=20);
    border-radius: 5px;
}

/* Specific dialog button styles */
body .ui-dialog-buttonset .ui-button.ui-state-default:first-child {
    font-family: 'Open Sans', sans-serif; /* From original */
    display: inline-block; /* From original */
    text-align: center; /* From original */
    width: auto; /* From original */
    line-height: 1; /* From original */
    -webkit-border-radius: 6px; /* From original */
    -moz-border-radius: 6px; /* From original */
    -ms-border-radius: 6px; /* From original */
    -o-border-radius: 6px; /* From original */
    border-radius: 6px; /* From original */
    border: 0; /* From original */
    background: #2485cf; /* From original */
    background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #2485cf), color-stop(100%, #75b0ed)); /* From original */
    background: -webkit-linear-gradient(bottom center, #2485cf, #75b0ed); /* From original */
    background: -moz-linear-gradient(bottom center, #2485cf, #75b0ed); /* From original */
    background: -o-linear-gradient(bottom center, #2485cf, #75b0ed); /* From original */
    background: linear-gradient(bottom center, #2485cf, #75b0ed); /* From original */
    color: #feffff; /* From original */
    font-weight: 600; /* From original */
    font-size: 14px; /* From original */
    text-transform: none; /* From original */
    padding: 8px 11px; /* From original */
}

    body .ui-dialog-buttonset .ui-button.ui-state-default:first-child:hover {
        opacity: .7; /* From original */
    }

@media (min-width: 768px) {
    body .ui-dialog-buttonset .ui-button.ui-state-default:first-child {
        padding: 8px 18px; /* From original */
    }
}

.lt-ie9 body .ui-dialog-buttonset .ui-button.ui-state-default:first-child {
    padding: 8px 18px;
}

body .ui-dialog-buttonset .ui-button.ui-state-default {
    font-family: 'Open Sans', sans-serif; /* From original */
    display: inline-block; /* From original */
    text-align: center; /* From original */
    width: auto; /* From original */
    margin: 0 4px; /* From original */
    line-height: 1; /* From original */
    -webkit-border-radius: 6px; /* From original */
    -moz-border-radius: 6px; /* From original */
    -ms-border-radius: 6px; /* From original */
    -o-border-radius: 6px; /* From original */
    border-radius: 6px; /* From original */
    border: 1px solid #cccccc; /* From original */
    background: white !important; /* From original */
    background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #F1F1F1), color-stop(100%, #ffffff)); /* From original */
    background: -webkit-linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
    background: -moz-linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
    background: -o-linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
    background: linear-gradient(bottom center, #F1F1F1, #ffffff); /* From original */
    color: #0066b4; /* From original */
    font-weight: 600; /* From original */
    font-size: 14px; /* From original */
    padding: 7px 10px; /* From original */
    text-transform: none; /* From original */
}

    body .ui-dialog-buttonset .ui-button.ui-state-default:hover {
        opacity: .7; /* From original */
    }

@media (min-width: 768px) {
    body .ui-dialog-buttonset .ui-button.ui-state-default {
        padding: 7px 17px; /* From original */
    }
}

.lt-ie9 body .ui-dialog-buttonset .ui-button.ui-state-default {
    padding: 7px 17px;
}


/* Pickadate Styles (from original) */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
    font-size: 16px;
    text-align: left;
    line-height: 1.2;
    color: #000000;
    position: absolute;
    z-index: 10000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
 * The picker input element.
 */
.picker__input {
    cursor: default;
}

    /**
 * When the picker is opened, the input element is “activated”.
 */
    .picker__input.picker__input--active {
        border-color: #0089ec;
    }

/**
 * The holder is the only “scrollable” top-level container element.
 */
.picker__holder {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
}

/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
    position: fixed;
    -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
    -moz-transition: background 0.15s ease-out, top 0s 0.15s;
    transition: background 0.15s ease-out, top 0s 0.15s;
}

/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
    position: absolute;
    margin: 0 auto;
    min-width: 256px;
    max-width: 666px;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    bottom: auto !important;
    top: 20% !important;
}

@media (min-height: 33.875em) {
    .picker__frame {
        overflow: visible;
        top: auto;
        bottom: -100%;
        max-height: 80%;
    }
}

@media (min-height: 40.125em) {
    .picker__frame {
        margin-bottom: 7.5%;
    }
}
/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
    display: table;
    width: 90%;
    height: 100%;
}

@media (min-height: 33.875em) {
    .picker__wrap {
        display: block;
    }
}
/**
 * The box contains all the picker contents.
 */
.picker__box {
    background: #ffffff;
    display: table-cell;
    vertical-align: middle;
}

@media (min-height: 26.5em) {
    .picker__box {
        font-size: 1.25em;
    }
}

@media (min-height: 33.875em) {
    .picker__box {
        display: block;
        font-size: 1.33em;
        border: 1px solid #777777;
        border-top-color: #898989;
        border-bottom-width: 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
        -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
        box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
    }
}

@media (min-height: 40.125em) {
    .picker__box {
        font-size: 1.5em;
        border-bottom-width: 1px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
}
/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
    top: 0;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
    zoom: 1;
    background: rgba(0, 0, 0, 0.32);
    -webkit-transition: background 0.15s ease-out;
    -moz-transition: background 0.15s ease-out;
    transition: background 0.15s ease-out;
}

.picker--opened .picker__frame {
    top: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

@media (min-height: 33.875em) {
    .picker--opened .picker__frame {
        top: auto;
        bottom: 0;
    }
}
/* ==========================================================================
 * $BASE-DATE-PICKER
 * ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
    padding: 0 1em;
}

/**
 * The header containing the month and year stuff.
 */
.picker__header {
    text-align: center;
    position: relative;
    margin-top: .75em;
}

/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
    font-weight: 500;
    font-size: .9em;
    display: inline-block;
    margin-left: .5em;
    margin-right: .5em;
}

.picker__year {
    color: #999999;
    font-style: italic;
}

/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
    border: 1px solid #b7b7b7;
    height: auto;
    padding: .5em;
    margin-left: .25em;
    margin-right: .25em;
}

@media (min-width: 24.5em) {
    .picker__select--month,
    .picker__select--year {
        margin-top: -0.5em;
    }
}

.picker__select--month {
    width: 35%;
}

.picker__select--year {
    width: 22.5%;
    position: relative;
}

.picker__month {
    position: relative;
}

.picker__select--month:focus,
.picker__select--year:focus {
    border-color: #0089ec;
}

/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
    position: absolute;
    padding: .5em 1.25em;
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    top: -0.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--prev,
    .picker__nav--next {
        top: -0.33em;
    }
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--prev {
        padding-right: 1.5em;
    }
}

.picker__nav--next {
    right: -1em;
    padding-left: 1.25em;
}

@media (min-width: 24.5em) {
    .picker__nav--next {
        padding-left: 1.5em;
    }
}

.picker__nav--prev:before,
.picker__nav--next:before {
    content: " ";
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-right: 0.65em solid #4b4b4b;
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
}

.picker__nav--next:before {
    border-right: 0;
    border-left: 0.65em solid #4b4b4b;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    cursor: pointer;
    color: #000000;
    background: #ffffff;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
    cursor: default;
    background: none;
    border-right-color: #f5f5f5;
    border-left-color: #f5f5f5;
}

/**
 * The calendar table of dates
 */
.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: inherit;
    width: 100%;
    margin-top: .75em;
    margin-bottom: .5em;
}

@media (min-height: 33.875em) {
    .picker__table {
        margin-bottom: .75em;
    }
}

.picker__table td {
    margin: 0;
    padding: 0;
}

/**
 * The weekday labels
 */
.picker__weekday {
    width: 14.285714286%;
    padding-bottom: .25em;
    color: #999999;
    text-align: center;
    font-size: .6em;
    text-transform: uppercase;
    font-weight: 700;
    /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
    .picker__weekday {
        padding-bottom: .5em;
    }
}
/**
 * The days on the calendar
 */
.picker__day {
    border: 1px solid transparent;
    text-align: center;
    font-size: 1.1em;
    padding: .5em 0;
    font-weight: 400;
    color: #333333;
}

.picker__day--today {
    position: relative;
}

    .picker__day--today:before {
        content: " ";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: 0.5em solid #4b9fe7;
        border-left: .5em solid transparent;
    }

.picker__day--disabled:before {
    border-top-color: #aaaaaa;
}

.picker__day--outfocus {
    color: #dddddd;
}

    .picker__day--infocus:hover,
    .picker__day--outfocus:hover {
        cursor: pointer;
        color: #000000;
        background: #bddfff;
    }

.picker__day--highlighted {
    border-color: #bddfff;
}

    .picker__day--highlighted:hover,
    .picker--focused .picker__day--highlighted {
        cursor: pointer;
        color: #000000;
        background: #bddfff;
    }

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background: #0066b4;
    color: #ffffff;
}

.picker__day--disabled,
.picker__day--disabled:hover {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
    background: #bbbbbb;
}

/**
 * The footer containing the "today" and "clear" buttons.
 */
.picker__footer {
    text-align: center;
}

.picker__button--today,
.picker__button--clear {
    border: 1px solid #ffffff;
    background: #ffffff;
    width: 50%;
    display: inline-block;
    vertical-align: bottom;
    font-size: .6em;
    padding: 1em 0;
    font-weight: normal;
}

    .picker__button--today:hover,
    .picker__button--clear:hover {
        cursor: pointer;
        color: #666666;
        background: #ffffff;
        border-bottom-color: #b1dcfb;
    }

    .picker__button--today:focus,
    .picker__button--clear:focus {
        background: #b1dcfb;
        border-color: #0066b4;
        outline: none;
    }

    .picker__button--today:before,
    .picker__button--clear:before {
        position: relative;
        display: inline-block;
        height: 0;
    }

    .picker__button--today:before {
        content: " ";
        margin-right: .45em;
        top: -0.05em;
        width: 0;
        border-top: 0.66em solid #4b9fe7;
        border-left: .66em solid transparent;
    }

    .picker__button--clear:before {
        content: "\D7";
        margin-right: .35em;
        top: -0.1em;
        color: #ee2200;
        vertical-align: top;
        font-size: 1.1em;
    }


/* ==========================================================================
   10. Icomoon Icons
   ========================================================================== */

@font-face {
    font-family: 'icomoon';
    src: url("../fonts/icomoon.eot?-nkk4o9");
    src: url("../fonts/icomoon.eot?#iefix-nkk4o9") format("embedded-opentype"), url("../fonts/icomoon.woff?-nkk4o9") format("woff"), url("../fonts/icomoon.ttf?-nkk4o9") format("truetype"), url("../fonts/icomoon.svg?-nkk4o9#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Image-based icons */
.icon-add-docs {
    width: 18px;
    height: 20px;
    background: url(../img/add-docs-icon.png) 0 0 no-repeat;
    display: inline-block;
    text-indent: -100000px;
    overflow: hidden;
}

.icon-docs {
    width: 15px;
    height: 19px;
    background: url(../img/docs-icon.png) 0 0 no-repeat;
    display: inline-block;
    text-indent: -100000px;
    overflow: hidden;
}

/* Font icons using :before */
.icon-add-docs:before {
    content: "\e600";
}

.icon-docs:before {
    content: "\e601";
}

.icon-clock:before {
    content: "\e602";
}

.icon-minus:before {
    content: "\e603";
}

.icon-plus:before {
    content: "\e604";
}

.icon-close:before {
    content: "\e605";
}

.icon-check:before {
    content: "\e606";
}

.icon-remove:before {
    content: "\e607";
}

.icon-checkmark:before {
    content: "\f00c";
}

.icon-x:before {
    content: "\f00d";
}

.icon-clock-o:before {
    content: "\f017";
}

.icon-chevron-left:before {
    content: "\f053";
}

.icon-chevron-right:before {
    content: "\f054";
}

.icon-calendar:before {
    content: "\f073";
}

.icon-navicon:before {
    content: "\f0c9";
}

.icon-caret-down:before {
    content: "\f0d7";
}

.icon-caret-up:before {
    content: "\f0d8";
}

.icon-file:before {
    content: "\f0f6";
}

.icon-edit:before {
    content: "\e608";
}


/* ==========================================================================
   11. JT Custom Styles (General)
   ========================================================================== */

/* Specific title colors (from original) */
.MeasuresTitle {
    color: #59A8D1; /* Measures color */
}

.ManagerTitle {
    color: #87C552; /* Manager color */
}

.MeetingsTitle {
    color: #9B70DA; /* Meetings color */
}

.DashboardTitle {
    color: #FC5104; /* Dashboard color */
}

/* Box Shadow Helpers (from original) */
.boxShadowRight {
    box-shadow: 13px 0px 1px #CCCCCC;
    background-color: none; /* Note: 'none' is not a valid background-color value. Should be 'transparent' or removed. Keeping original for now. */
}

.boxShadowBoth {
    box-shadow: 13px 13px 1px #CCCCCC;
    background-color: none; /* Note: 'none' is not a valid background-color value. Should be 'transparent' or removed. Keeping original for now. */
}


/* ==========================================================================
   11.1 Home/Welcome Content
   ========================================================================== */

/* Home/Welcome Header Section (from original) */
#main-content .welcome-header {
    -webkit-border-radius: 6px; /* From original */
    -moz-border-radius: 6px; /* From original */
    -ms-border-radius: 6px; /* From original */
    -o-border-radius: 6px; /* From original */
    border-radius: 6px; /* From original */
    overflow: hidden; /* From original */
    margin-bottom: 27px; /* From original */
}

    #main-content .welcome-header .hd, #main-content .welcome-header .img {
        height: 120px; /* From original */
    }

    #main-content .welcome-header .hd {
        background: #4295d3; /* From original */
        position: relative; /* From original */
        vertical-align: top; /* From original */
    }

        #main-content .welcome-header .hd h1 {
            color: white; /* From original */
            position: absolute; /* From original */
            bottom: 7px; /* From original */
            right: 9px; /* From original */
            line-height: 1; /* From original */
            margin: 0; /* From original */
            font-size: 24px; /* From original */
        }

    #main-content .welcome-header .img {
        -webkit-background-size: cover; /* From original */
        -moz-background-size: cover; /* From original */
        -o-background-size: cover; /* From original */
        background-size: cover; /* From original */
        width: 100%; /* From original */
    }

/* Home/Welcome Content Section (from original) */
#main-content .welcome-content {
    position: relative; /* From original */
}

    #main-content .welcome-content h1 {
        font-size: 24px; /* From original */
    }

    #main-content .welcome-content h2 {
        font-family: 'Open Sans', sans-serif; /* From original */
        font-size: 14px; /* From original */
        margin-bottom: 1.5em; /* From original */
        font-weight: 600; /* From original */
    }

    #main-content .welcome-content p {
        font-size: 13px; /* From original */
    }

    #main-content .welcome-content table {
        margin-bottom: 22px; /* From original */
    }

    #main-content .welcome-content .content-inner {
        margin-bottom: 30px; /* From original */
    }

    #main-content .welcome-content .company-logo {
        display: block; /* From original */
        margin: 20px 0 40px 0; /* From original */
        max-width: 100%; /* From original */
        height: auto; /* From original */
    }

@media (min-width: 768px) {
    #main-content .welcome-content:before {
        content: " "; /* From original */
        position: absolute; /* From original */
        left: 26.08696%; /* From original */
        height: 100%; /* From original */
        border-left: 1px dotted #b4b4b4; /* From original */
    }

    #main-content .welcome-content .content-inner.left {
        padding-right: 35px; /* From original */
    }

    #main-content .welcome-content .content-inner.right {
        padding-left: 34px; /* From original */
    }
}

.lt-ie9 #main-content .welcome-content:before {
    content: " ";
    position: absolute;
    left: 26.08696%;
    height: 100%;
    border-left: 1px dotted #b4b4b4;
}

.lt-ie9 #main-content .welcome-content .content-inner.left {
    padding-right: 35px;
}

.lt-ie9 #main-content .welcome-content .content-inner.right {
    padding-left: 34px;
}

.contentMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* <-- New: allows better wrapping on small screens */
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 10px;
    gap: 8px; /* <-- Less spacing between items */
}

    .contentMenu a,
    .contentMenu .dot {
        display: inline-flex; /* <-- Important: keep them aligned in row */
        align-items: center;
    }


.dot {
    width: 9px; /* or 9px or 13px, as desired */
    height: 9px;
    border-radius: 100px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px; /* or as you have */
    margin-right: 0;
    border: 1px solid #000000; /* <--  OUTLINE */
    box-sizing: border-box; /* Ensures border doesn't mess up size */
}

.contentMenu {
    flex-wrap: nowrap;
}

/* Link colors for content menu */
.PlansLink {
    color: #4e67c8; /* Plans color - From original */
}

.MeasuresLink {
    color: #59A8D1; /* Measures color - From original */
}

.ManagerLink {
    color: #87C552; /* Manager color - From original */
}

.MeetingsLink {
    color: #9B70DA; /* Meetings color - From original */
}

.DashboardLink {
    color: #FC5104; /* Dashboard color - From original */
}

.contentMenu a {
    white-space: nowrap;
}

/* Custom HR styles */
.customHr {
    opacity: 0.25; /* 25% opacity - From original */
    border-width: 5px; /* Border width - From original */
    border-style: solid; /* Border style - From original */
    width: 100%; /* Full width - From original */
    margin: 20px 0; /* Optional: Add margin for spacing - From original */
}

.PlansHr {
    border-color: #4e67c8; /* From original */
}

.MeasuresHr {
    border-color: #59A8D1; /* From original */
}

.ManagerHr {
    border-color: #87C552; /* From original */
}

.MeetingsHr {
    border-color: #9B70DA; /* From original */
}

/* Home Page Content Grid Layout */
.HPcontentContainer {
    display: grid; /* From original */
    grid-template-columns: 1fr 1fr; /* Two equal columns - From original */
    gap: 20px; /* Space between columns - From original */
    padding: 20px; /* Padding around the container - From original */
    margin-bottom: 20px; /* Space between containers - From original */
    align-items: center; /*  content vertically - From original */
    justify-items: flex-start; /*  content horizontally - From original */
}

.HPcontentContainer-full-width {
    max-width: none; /* Or 100% */
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.gridCell {
    width: 100%; /* Ensure cells take full width of their column - From original */
    height: auto; /* Allow height to adjust based on content - From original */
    background-color: white; /* Optional: background color for cells - From original */
    display: flex; /* From original */
    flex-direction: column; /* Stack items vertically - From original */
    align-items: flex-start; /* Center items horizontally - From original */
    justify-content: left; /* Center items vertically - From original */
    padding: 10px; /* Add padding for better spacing - From original */
}

/* These are doubled??? Ensure base styles for HPcontentContainer and gridCell are present and correct */
/* These are crucial for the internal spacing and padding within the new columns */
.HPcontentContainer {
    display: flex; /* This was likely already there, makes its children flex items */
    margin-bottom: 20px; /* Space between rows/sections */
    /* Add any common padding/alignment for rows */
}

.gridCell {
    padding: 15px; /* Padding inside each cell */
    box-sizing: border-box; /* Crucial for width calculations */
    flex-grow: 1; /* Allow gridCell to take up available space within its HPcontentContainer */
    /* Add any common borders, backgrounds, etc. */
}

.right-column-gridCell {
    background-color: transparent; /* Ensures the background is fully transparent */
    text-align: center; /* Centers all text and inline content within this cell */
}

    /* Make images responsive within their grid cells */
    .gridCell img {
        max-width: 100%; /* Ensures image doesn't exceed parent's width */
        height: auto; /* Maintains aspect ratio */
        display: block; /* Removes any extra space below the image */
    }

/* Styles for the compound image wrapper */
.compound-image-wrapper.overlap {
    position: relative;
    width: 100%;
    padding-top: 66%; /* Maintain aspect ratio container (e.g. 3:2) */
    margin: 15px auto;
}

/* Shared styles for both images */
.compound-image-wrapper img {
    position: absolute;
    object-fit: contain;
    width: 60%;
    height: 60%;
    transition: transform 0.2s ease;
}

/* First image (top-left, slightly behind) */
.compound-image-wrapper .img-behind {
    top: 0;
    left: 0;
    z-index: 1;
    transform: scale(1.1); /* Slightly larger */
}

/* Second image (bottom-right, in front) */
.compound-image-wrapper .img-front {
    bottom: 0;
    right: 0;
    z-index: 2;
    transform: scale(1.1); /* Same scale for subtle overlap */
}

/* Final Full-Width Row Centering (reusing and ensuring it works) */
.gridCell-full {
    flex: 0 0 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 150px;
}


/* --- SeeMore Page Specific Styles --- */

/* p-head style */
.SeeMore-p-head {
    color: #232323;
    font-family: "Diadact Gothic", sans-serif; /* Added sans-serif fallback */
    font-size: 18px;
    font-weight: normal; /* Regular */
    margin: 0; /* Reset default margins */
}

/* p-Bold style */
.SeeMore-p-Bold {
    color: #606060;
    font-family: "Diadact Gothic", sans-serif; /* Added sans-serif fallback */
    font-size: 15px;
    font-weight: bold; /* Bold */
    margin: 0; /* Reset default margins */
}

/* p-regular style */
.SeeMore-p-regular {
    color: #606060;
    font-family: "Diadact Gothic", sans-serif; /* Added sans-serif fallback */
    font-size: 15px;
    font-weight: normal; /* Regular */
    margin: 0; /* Reset default margins */
}

/* --- Plans Page Specific Grid Layout --- */

/* Optional: Overall container for the Plans page content, if you want to constrain/center the entire page */
.plans-page-container {
    max-width: 1200px; /* Example: Constrain overall page width */
    margin: 0 auto; /* Center the page content */
    padding: 0 20px; /* Add some padding on the sides */
    color: #4E67C8;
}

    .plans-page-container a {
        color: #4E67C8;
    }

/* --- QI Plans Page Specific Styles --- */

/* Overall container for the Plans page content */
.qi-plans-HPcontentContainer.qi-plans-plans-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px; /* Consistent padding */
    display: grid; /* Use CSS Grid for the main layout */
    grid-template-columns: 1fr; /* Single column layout for now */
    gap: 20px; /* Spacing between sections */
    color: #4E67C8; /* Default text color */
}

.qi-plans-plans-page-container a {
    color: #4E67C8; /* Link color */
}

/* Grid cell styles */
.qi-plans-gridCell {
    background-color: white;
    padding: 20px; /* Consistent padding */
    display: grid; /* Use CSS Grid within the cell */
    grid-template-columns: 1fr auto; /* Title and buttons */
    grid-template-rows: auto auto; /* Title/buttons and description */
    gap: 10px;
    align-items: start;
}

/* Title styles */
.qi-plans-titleHomeHeader {
    font-family: CabinSketch-Bold, Cabin Sketch;
    color: #4e67c8;
    font-weight: 700;
    font-size: 62px;
    margin-bottom: 0;
    line-height: 1;
    grid-column: 1;
    grid-row: 1;
}

/* Button container styles */
.qi-plans-button-container {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns the entire column of buttons to the right within its grid cell */
    gap: 5px;
    /* Optional: If you want the button container itself to only be as wide as its content,
     you might add `width: fit-content;` or `width: max-content;` here.
     However, for buttons to be the same size, they usually stretch to a common width. */
}

/* Plans page button styles - APPLIED TO BOTH BUTTON AND LINK */
.qi-plans-PlansPageButtons {
    background: #FC8C04; /* Orange background */
    color: white; /* Text color for both buttons */
    text-decoration: none; /* Remove underline from the link */
    display: block; /* Ensure both elements behave as blocks for width control */
    width: 100%; /* Make both buttons fill the width of their parent container */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    text-align: center; /* Center the text within the button */
    padding: 10px 15px; /* Consistent padding for a button-like appearance */
    border: none; /* Remove default button border */
    cursor: pointer; /* Ensure cursor is a pointer for both */
    font-size: 1em; /* Ensure consistent font size */
    line-height: 1.2; /* Consistent line height */
    white-space: nowrap; /* Prevent text from wrapping inside the button */
    /* Add transition for smooth hover effects */
    transition: background 0.3s ease, color 0.3s ease;
}

/* Specific rule for the link to ensure white color, overriding any default link styles */
/* This is often needed because general 'a' tag styles can have higher specificity */
a.qi-plans-PlansPageButtons {
    color: white !important; /* Force white text for the link */
}

/* New class to make the button auto-width instead of 100% */
.qi-plans-AutoWidthButton {
    width: auto; /* Override the 100% width from .qi-plans-PlansPageButtons */
    /* Adjust horizontal padding for a better visual appearance when not stretched */
    padding-left: 25px;
    padding-right: 25px;
}

/* Hover and active states for both buttons */
.qi-plans-PlansPageButtons:hover,
.qi-plans-PlansPageButtons:active {
    background: #e07b00; /* Slightly darker orange on hover/active */
    color: white; /* Keep text white on hover/active */
    text-decoration: none; /* Ensure no underline on hover for links */
}

/* Plan description styles */
.qi-plans-planDescription {
    grid-column: 1 / span 2;
    grid-row: 2;
    font-family: Montserrat, sans-serif;
    font-weight: normal;
    color: #033076;
    font-size: 18px;
    margin: 0;
}

/* h3 styles within the grid cell */
.qi-plans-gridCell-h3 {
    color: #4E67C8;
    font-family: "Archivo Black", sans-serif; /* Added sans-serif fallback */
    font-size: 30px;
    font-weight: normal; /* Regular */
    margin: 0; /* Reset default margins */
}

/* p styles within the grid cell */
.qi-plans-gridCell-p {
    color: #4E67C8;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: normal; /* Regular */
    margin: 0; /* Reset default margins */
}

/* Wrapper for the two main columns (checkbox list and rectangle) */
.main-content-wrapper {
    display: flex; /* Enables flexbox for side-by-side layout */
    justify-content: space-between; /* Pushes columns to edges, creating space between them */
    align-items: flex-start; /* Aligns items to the top of the container */
    width: 100%; /* Ensures the wrapper takes full available width */
    margin-top: 20px; /* Example: Add some space above this section if needed */
}

    /* TARGETED RULE: Only applies to HPcontentContainer when it's a direct child of main-content-wrapper */
    .main-content-wrapper > .HPcontentContainer {
        flex: 0 0 63%; /* Allocate 63% for content, giving more to the rectangle */
    }

/* Container for the new rectangle */
.rectangle-container {
    /* INCREASED: Allocate 35% for the rectangle container */
    flex: 0 0 35%;
    position: relative; /* Essential for absolutely positioning the rectangle inside it */
    min-height: 250px; /* Ensures this container is tall enough for vertical positioning */
    min-width: 400px; /* (380px width + 2*8px padding + 2*1px border = 398px) */
}

/* The rectangle itself */
.info-rectangle {
    position: absolute; /* Allows precise positioning within .rectangle-container */
    /* REVISED POSITIONING for new height */
    top: 170px; /* Centered around the 7th list item, accounting for new height */
    left: 35%; /* Moved further left as requested */
    transform: translateX(-50%); /* Still move back by half its own width to center relative to 'left' */
    /* REVISED DIMENSIONS */
    width: 280px; /* Significantly increased width */
    height: 100px; /* Increased height */

    border: 1px solid black; /* Black border (stroke) */
    background-color: beige; /* Beige fill */
    padding: 8px; /* SLIGHTLY REDUCED PADDING from 10px to 8px */
    box-sizing: border-box; /* Ensures padding is included in the width/height */
    color: #333; /* Darker text for contrast */
    overflow: hidden; /* Content will be clipped if it overflows */
    display: flex; /* Use flexbox for internal layout of title and paragraph */
    flex-direction: column; /* Stack title and paragraph vertically */
}

/* NEW: Box Title Styling */
.box-title {
    font-family: 'Didact Gothic', sans-serif; /* Specified font */
    font-size: 18px; /* Specified size */
    font-weight: bold; /* Make it stand out */
    color: #033076; /* Example: Match main text color */
    margin-bottom: 5px; /* Space between title and lorem ipsum */
    text-align: center; /* Center the title */
}

/* Adjust lorem ipsum text styles */
.info-rectangle p {
    font-size: 12px; /* Smaller font for lorem ipsum */
    line-height: 1.4; /* Good line spacing for readability */
    text-align: justify; /* Makes the text fill the rectangle nicely */
    margin: 0; /* Remove default paragraph margin */
    flex-grow: 1; /* Allow paragraph to take remaining space */
    word-wrap: break-word; /* Allows long words to break and wrap */
    overflow: hidden; /* Ensure text doesn't spill out */
}


/* --- MODIFIED EXISTING STYLES --- */

/* Checkbox List Styling */

.qi-plans-checkbox-intro {
    color: #FC8C04;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px; /* Add some space below the paragraph */
}

.qi-plans-checkbox-list {
    /* Add any styling for the overall list container here */
}

.qi-plans-notify-option {
    display: flex;
    align-items: center;
    margin-top: 5px;
    cursor: pointer;
    color: #033076;
}

    .qi-plans-notify-option.selected {
        font-weight: bold;
    }

.qi-plans-option-checkbox {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 1px solid #033076;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .qi-plans-option-checkbox::after {
        content: '\f00c'; /* Font Awesome check icon */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 12px;
        color: #fff; /* White checkmark */
        display: none;
    }

.qi-plans-notify-option.selected .qi-plans-option-checkbox {
    background-color: #8FC946; /* Green when selected */
}

    .qi-plans-notify-option.selected .qi-plans-option-checkbox::after {
        display: block;
    }

.qi-plans-option-txt {
    font-size: 14px;
    color: #033076;
    font-weight: bold;
    margin-right: 5px;
    /* REMOVED: white-space: nowrap; */ /* This will now allow the text to wrap */
    /* REMOVED: flex-shrink: 0; */ /* This will allow the text to shrink if needed */
}

/* More Info Link Styles */
.qi-plans-more-info-txt {
    color: #FEB522; /* Set the default color */
    font-family: "Archivo Black", sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none; /* Remove underline from links */
    margin-left: 10px; /* This already provides space between text and link */
    white-space: nowrap; /* Prevents the link from wrapping to the next line */
}

    .qi-plans-more-info-txt:hover {
        color: #FFA500; /* Slightly darker orange on hover */
        text-decoration: underline; /* Add underline on hover */
    }

    /* Override general link styles */
    .qi-plans-more-info-txt,
    .qi-plans-more-info-txt:link,
    .qi-plans-more-info-txt:visited {
        color: #FEB522; /* Force the orange color */
    }
    
    /* NEW: Wrapper for the main 80/20 split */
.main-80-20-wrapper {
    display: flex; /* Enables flexbox for the two main columns */

}

/* NEW: Left Column (80%) */
.left-column {
    flex: 0 0 70%; /* Don't grow, don't shrink, basis 80% */
    /* max-width: 70%; /* Optional: if flex-basis isn't strictly respected by browser */
}

/* NEW: Right Column (20%) with continuous blue background */
.right-column {
    flex: 0 0 30%; /* Don't grow, don't shrink, basis 20% */
    background-color: #D5E9F3; /* Continuous blue background */
}

/* --- Styles specifically for the content within the right column's gridCells --- */

/* This is the main container for content within each right column section */
.right-column-gridCell {
    /* Inherited from .gridCell: background-color: white; padding: 20px; */
    /* We'll explicitly set them here to ensure consistency for this specific gridCell */
    background-color: transparent;
    padding: 20px;
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center children horizontally (as blocks) */
    /* REMOVED: text-align: center; -- This is now handled by align-items: center for block-level children */
    /* REMOVED: Any duplicate text-align: center; rules */
}

/* Styles for the main title paragraph in the right column */
.right-column-title {
    color: #033076; /* Specified font color */
    font-size: 28px; /* Specified font size */
    font-weight: bold; /* Specified font weight */
    font-family: 'Assistant', sans-serif; /* Assuming 'Assistant' is loaded, with a fallback */
    background-color: transparent; /* Ensures the paragraph background is transparent */
    margin-top: 0; /* Ensure no top margin */
    margin-bottom: 5px; /* NEW: Small gap (5px) between title and subtitle */
    text-align: center; /* Ensure text within title is centered, though align-items: center helps */
}

/* Styles for the subtitle paragraph in the right column */
.right-column-subtitle {
    color: #4D91B4; /* Specified font color */
    font-size: 14px; /* Specified font size */
    font-weight: normal; /* Specified font weight (regular) */
    font-family: 'Assistant', sans-serif; /* Assuming 'Assistant' is loaded, with a fallback */
    background-color: transparent; /* Ensures the paragraph background is transparent */
    margin-top: 0; /* Ensure no top margin (already handled by .right-column-gridCell p, but explicit is fine) */
    margin-bottom: 15px; /* NEW: Add a consistent 15px space below subtitles */
    text-align: center; /* Ensure text within subtitle is centered */
}

/* REMOVED: .right-column-subtitle { border: 1px solid red !important; } -- Temporary debugging border */


/* Styles for all paragraphs within the right column's gridCells */
.right-column-gridCell p {
    margin-top: 0;
    margin-bottom: 0; /* NEW: Remove default margins to allow precise control by specific classes */
    /* text-align: center; -- Already handled by .right-column-title and .right-column-subtitle, or by align-items: center for the block */
}

    /* Optional: Remove bottom margin from the very last paragraph in a cell to prevent extra space */
    .right-column-gridCell p:last-child {
        margin-bottom: 0;
    }


/* Ensure images are responsive within their cells and properly spaced */
/* This rule is more specific than the global .gridCell img, so it takes precedence */
.right-column-gridCell img {
    max-width: 100%; /* Ensures image doesn't exceed parent's width */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Ensures the image behaves as a block element */
    margin: 15px auto; /* NEW: Add 15px vertical margin around images, center horizontally */
    /* REMOVED: margin: 0 auto; -- This was for horizontal centering, now handled by parent flexbox align-items: center */
}



/* --- Custom Table Styles for Plans Page --- */
.qi-plans-table-custom {
    width: 100%; /* Stretch full length of the gridCell */
    border-collapse: collapse; /* Remove space between table cells */
    margin-top: 10px; /* Add some space above the table */
}

    /* Header Styling */
    .qi-plans-table-custom thead th {
        /* OLD: background-color: white; */
        /* NEW: Use the background shorthand to ensure any default background-image (like a gradient) is removed */
        background: white; /* This sets background-color to white AND background-image to none */

        color: #033076; /* Keep this dark blue for good contrast on white */
        font-family: Montserrat, sans-serif;
        font-weight: bold;
        font-size: 13px;
        padding: 10px 15px;
        text-align: left;
        border-bottom: 2px solid #59A8D1;
    }

        /* Specific styling for the empty header cell (first column) */
        .qi-plans-table-custom thead th:first-child {
            padding-left: 0; /* Remove padding if desired for the empty header */
            padding-right: 0;
            /* If you want this cell to also have the header background, remove the line above */
        }

    /* Cell (td) Styling - General */
    .qi-plans-table-custom tbody td {
        padding: 10px 15px; /* Consistent padding for data cells */
        vertical-align: middle; /* Vertically align content in the middle */
        color: #033076; /* Default text color for data cells */
        background: transparent; /* <--- ADD THIS LINE */
    }

    /* Row Styling - Alternating Backgrounds */
    .qi-plans-table-custom tbody tr:nth-child(odd) {
        background: #FEFEFF; /* Odd rows */
    }

    .qi-plans-table-custom tbody tr:nth-child(even) {
        background: #EBEBEB; /* Even rows */
    }

    /* Column 1 (View) Styling */
    .qi-plans-table-custom tbody td:nth-child(1) {
        padding-left: 0; /* Adjust padding for the first column */
        padding-right: 0;
    }

/* MODIFIED: View Link Styles to match More Info link behavior */
.qi-plans-view-link {
    font-family: "Archivo Black", sans-serif; /* Ensure Archivo Black is loaded */
    font-weight: normal; /* Regular */
    font-size: 12pt;
    /* OLD: color: #FC8C04; */
    color: #FEB522; /* NEW: Match More Info default orange */
    text-decoration: none; /* Remove underline */
    white-space: nowrap; /* Prevent "View" from wrapping */
}

    /* NEW: Override general link styles for View link to ensure consistent orange */
    .qi-plans-view-link,
    .qi-plans-view-link:link,
    .qi-plans-view-link:visited {
        color: #FEB522; /* Force the orange color for all states (unvisited, visited) */
    }

        .qi-plans-view-link:hover,
        .qi-plans-view-link:active { /* Added :active for completeness, using hover color */
            /* OLD: color: #e07b00; */
            color: #FFA500; /* NEW: Match More Info hover orange */
            text-decoration: underline; /* Add underline on hover */
        }

/* Column 2 (Plan Name) Styling */
.qi-plans-table-custom tbody td:nth-child(2) label { /* Targeting the label inside the td */
    font-family: Assistant, sans-serif; /* Ensure Assistant is loaded */
    font-weight: bold;
    font-size: 12pt;
    color: #033076;
}

/* Columns 3, 4, 5 (Plan Description, Plan Type, Plan Status) Styling */
.qi-plans-table-custom tbody td:nth-child(3) label,
.qi-plans-table-custom tbody td:nth-child(4) label,
.qi-plans-table-custom tbody td:nth-child(5) label { /* Targeting labels inside these tds */
    font-family: Assistant, sans-serif; /* Ensure Assistant is loaded */
    font-weight: normal; /* Regular */
    font-size: 12pt;
    color: #033076;
}

/* Post-Table Styling */
.qi-plans-table-custom + .qi-plans-table-footer-line { /* Selects the element immediately following the table */
    margin-top: 2px; /* 2pt blank pad */
    height: 10px; /* 10pt thick line */
    background-color: #59A8D1; /* Solid thick line color */
    width: 100%; /* Ensure it spans full width */
    display: block; /* Ensure it's a block element to take width and height */
}
/* --- END of Plans Page Specific Grid Layout --- */

.titleContainer {
    display: flex; /* From original */
    flex-direction: row; /* Keep divs on the same line - From original */
    align-items: flex-end; /* Align items vertically in the center - From original */
    justify-content: left; /* Center items vertically - From original */
    gap: 10px;
}

.textContainer {
    display: flex; /* From original */
    flex-direction: column; /* Stack paragraphs vertically - From original */
    align-items: flex-start; /* align paragraphs horizontally - From original */
    width: 100%; /* Ensure full width for alignment - From original */
}


/* ==========================================================================
   11.2 Modals/Popups (JT Custom)
   ========================================================================== */

/* Styles likely for a modal or sidebar popup (from original) */
.md-side-lg {
    width: 100%; /* From original */
    max-width: 50px; /* From original */
}

/* Close button specific to modals/popups */
.close-btn {
    cursor: pointer; /* From original */
    width: 20px; /* From original */
}

.md-separator {
    border-bottom: 1px solid #ddd; /* From original */
    margin: 15px 0; /* From original */
}

.sb-hd {
    font-weight: bold; /* From original */
    margin-bottom: 10px; /* From original */
}

.notify-option {
    display: flex; /* From original */
    align-items: center; /* From original */
    margin-bottom: 10px; /* From original */
}

.option-checkbox {
    margin-right: 10px; /* From original */
}

.submit-btn {
    background-color: #007bff; /* From original */
    color: white; /* From original */
    border: none; /* From original */
    padding: 10px 20px; /* From original */
    cursor: pointer; /* From original */
}

    .submit-btn.disabled {
        background-color: #ccc; /* From original */
        cursor: not-allowed; /* From original */
    }


/* ==========================================================================
   12. Login / Register
   ========================================================================== */

.login-register {
    padding-top: 38px; /* From original */
    padding-bottom: 15px; /* From original */
    min-height: 100%; /* From original */
    /*background: url(../img/login-register-bg.jpg) center center no-repeat white;*/ /* Commented out in original */
    background-image: url(../img/login-register-bg.ice.jpg); /* From original */
    background-color: white; /* Used if the image is unavailable - From original */
    height: 500px; /* You must set a specified height - From original */
    background-position: center; /* From original */
    background-repeat: no-repeat; /* Do not repeat the image - From original */
    background-size: auto; /* From original */
    -webkit-background-size: cover; /* From original */
    -moz-background-size: cover; /* From original */
    -o-background-size: cover; /* From original */
    background-size: cover; /* From original */
}

.login-register-distribber {
    padding-top: 38px; /* From original */
    padding-bottom: 15px; /* From original */
    min-height: 100%; /* From original */
    /*background: url(../img/login-register-bg.jpg) center center no-repeat white;*/ /* Commented out in original */
    background-image: url(../img/login-register-bg.ice.jpg); /* From original */
    background-color: white; /* Used if the image is unavailable - From original */
    height: 500px; /* You must set a specified height - From original */
    background-position: center; /* From original */
    background-repeat: no-repeat; /* Do not repeat the image - From original */
    background-size: auto; /* From original */
    -webkit-background-size: cover; /* From original */
    -moz-background-size: cover; /* From original */
    -o-background-size: cover; /* From original */
    background-size: cover; /* From original */
}

@media (min-width: 768px) {
    .login-register {
        background-image: url(../img/login-register-bg.ice.jpg); /* From original */
        background-color: white; /* Used if the image is unavailable - From original */
        width: 500px; /* You must set a specified height - From original */
        background-position: center; /* From original */
        background-repeat: no-repeat; /* Do not repeat the image - From original */
        background-size: auto; /* From original */
        -webkit-background-size: auto; /* From original */
        -moz-background-size: auto; /* From original */
        -o-background-size: auto; /* From original */
        background-size: auto; /* From original */
        padding-top: 5px; /* From original */
    }

    .login-register-distribber {
        background-image: url(../img/RebrandedDistribberSmaller.jpg), url(../img/login-register-bg.right.jpg), url(../img/login-register-bg.ice.jpg); /* From original */
        background-color: white; /* Used if the image is unavailable - From original */
        width: 500px, 500px, 500px; /* You must set a specified height - From original */
        background-position: left, right, center; /* From original */
        background-repeat: no-repeat; /* Do not repeat the image - From original */
        background-size: auto; /* From original */
        -webkit-background-size: auto; /* From original */
        -moz-background-size: auto; /* From original */
        -o-background-size: auto; /* From original */
        background-size: auto; /* From original */
        padding-top: 5px; /* From original */
    }
}

/* IE9 Login/Register Hacks */
.lt-ie9 .login-register {
    background: url(../img/login-register-bg.jpg) center 210px no-repeat white;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    padding-top: 5px;
}

.lt-ie9 .login-register-distribber {
    background: url(../img/login-register-bg.jpg) center 210px no-repeat white;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    padding-top: 5px;
}

/* Brand/Logo within Login/Register */
.login-register #brand {
    margin: 0 auto 38px auto; /* From original */
    height: auto; /* From original */
    width: auto; /* From original */
    max-width: 100%; /* From original */
    text-align: center; /* From original */
}

.login-register-distribber #brand {
    margin: 0 auto 38px auto; /* From original */
    height: auto; /* From original */
    width: auto; /* From original */
    max-width: 100%; /* From original */
    text-align: center; /* From original */
}

.login-register #brand img {
    max-width: 100%; /* From original */
}

.login-register-distribber #brand img {
    max-width: 100%; /* From original */
}

@media (min-width: 768px) {
    .login-register #brand {
        height: 64px; /* From original */
        width: 100%; /* From original */
    }

    .login-register-distribber #brand {
        height: 64px; /* From original */
        width: 100%; /* From original */
    }
}

.lt-ie9 .login-register #brand {
    height: 42px;
    width: 100%;
}

.lt-ie9 .login-register-distribber #brand {
    height: 42px;
    width: 100%;
}

/* Form within Login/Register */
.login-register form {
    margin: 0 auto 28px auto; /* From original */
    max-width: 415px; /* From original */
    -webkit-border-radius: 5px; /* From original */
    -moz-border-radius: 5px; /* From original */
    -ms-border-radius: 5px; /* From original */
    -o-border-radius: 5px; /* From original */
    border-radius: 5px; /* From original */
}

.login-register-distribber form {
    margin: 0 auto 28px auto; /* From original */
    max-width: 415px; /* From original */
    -webkit-border-radius: 5px; /* From original */
    -moz-border-radius: 5px; /* From original */
    -ms-border-radius: 5px; /* From original */
    -o-border-radius: 5px; /* From original */
    border-radius: 5px; /* From original */
}

.login-register form .form-input {
    margin-bottom: 13px; /* From original */
}

.login-register form .form-input-thin {
    margin-bottom: 5px; /* From original */
}

.login-register form .field-validation-error {
    color: #b40000; /* From original */
}

.login-register form .form-input .field-validation-error {
    display: block; /* From original */
    font-size: 0.85em; /* From original */
    margin: 5px 0; /* From original */
}

.login-register form h1 {
    font-family: 'Maven Pro', sans-serif; /* From original */
    color: #4ca2e6; /* From original */
    font-weight: 500; /* From original */
    line-height: 1; /* From original */
    font-size: 24px; /* From original */
    margin: 0; /* From original */
}

.login-register form .instructions {
    margin: 0 0 20px 0; /* From original */
}

.login-register form p.validation {
    padding: 18px 0 0 0; /* From original */
    font-size: 1.2em; /* From original */
}

.login-register form fieldset {
    border: 0; /* From original */
    margin: 0; /* From original */
    padding: 18px 0 0 0; /* From original */
}

.login-register form label {
    display: inline-block; /* From original */
    font-weight: 400; /* From original */
    font-size: 12px; /* From original */
    margin-left: 2px; /* From original */
    color: #333333; /* From original */
    vertical-align: top; /* From original */
}

.login-register form .form-Resouces {
    margin: 0px; /* From original */
    padding-top: 5px; /* From original */
    overflow: visible; /* From original */
}

    .login-register form .form-Resouces.form-input {
        margin-bottom: 0; /* From original */
    }

    .login-register form .form-Resouces .btn {
        padding-right: 0; /* From original */
        padding-left: 0; /* From original */
        width: 100%; /* From original */
    }

    .login-register form .form-Resouces p {
        padding-top: 15px; /* From original */
        position: relative; /* From original */
        top: 10px; /* From original */
        margin: 0; /* From original */
    }

/* Distribber form within Login/Register */
.login-register-distribber form .form-input {
    margin-bottom: 13px; /* From original */
}

.login-register-distribber form .form-input-thin {
    margin-bottom: 5px; /* From original */
}

.login-register-distribber form .field-validation-error {
    color: #b40000; /* From original */
}

.login-register-distribber form .form-input .field-validation-error {
    display: block; /* From original */
    font-size: 0.85em; /* From original */
    margin: 5px 0; /* From original */
}

.login-register-distribber form h1 {
    font-family: 'Maven Pro', sans-serif; /* From original */
    color: #4ca2e6; /* From original */
    font-weight: 500; /* From original */
    line-height: 1; /* From original */
    font-size: 24px; /* From original */
    margin: 0; /* From original */
}

.login-register-distribber form .instructions {
    margin: 0 0 20px 0; /* From original */
}

.login-register-distribber form p.validation {
    padding: 18px 0 0 0; /* From original */
    font-size: 1.2em; /* From original */
}

.login-register-distribber form fieldset {
    border: 0; /* From original */
    margin: 0; /* From original */
    padding: 18px 0 0 0; /* From original */
}

.login-register-distribber form label {
    display: inline-block; /* From original */
    font-weight: 400; /* From original */
    font-size: 12px; /* From original */
    margin-left: 2px; /* From original */
    color: #333333; /* From original */
    vertical-align: top; /* From original */
}

.login-register-distribber form .form-Resouces {
    margin: 0px; /* From original */
    padding-top: 5px; /* From original */
    overflow: visible; /* From original */
}

    .login-register-distribber form .form-Resouces.form-input {
        margin-bottom: 0; /* From original */
    }

    .login-register-distribber form .form-Resouces .btn {
        padding-right: 0; /* From original */
        padding-left: 0; /* From original */
        width: 100%; /* From original */
    }

    .login-register-distribber form .form-Resouces p {
        padding-top: 15px; /* From original */
        position: relative; /* From original */
        top: 10px; /* From original */
        margin: 0; /* From original */
    }


/* Desktop form within Login/Register */
@media (min-width: 768px) {
    .login-register form {
        border: 1px solid #cccccc; /* From original */
        background: white; /* From original */
    }

        .login-register form h1 {
            background: #f1f1f1; /* From original */
            -webkit-border-radius: 5px 5px 0 0; /* From original */
            -moz-border-radius: 5px 5px 0 0; /* From original */
            -ms-border-radius: 5px 5px 0 0; /* From original */
            -o-border-radius: 5px 5px 0 0; /* From original */
            border-radius: 5px 5px 0 0; /* From original */
            padding: 16px 45px; /* From original */
        }

        .login-register form p.validation {
            padding: 18px 45px 0 45px; /* From original */
        }

        .login-register form fieldset {
            padding: 18px 45px 35px 45px; /* From original */
        }

        .login-register form .span-1-1-2 input.text,
        .login-register form .span-1-2-2 input.text {
            padding-left: 5%; /* From original */
        }

    .login-register-distribber form {
        border: 1px solid #cccccc; /* From original */
        background: white; /* From original */
    }

        .login-register-distribber form h1 {
            background: #f1f1f1; /* From original */
            -webkit-border-radius: 5px 5px 0 0; /* From original */
            -moz-border-radius: 5px 5px 0 0; /* From original */
            -ms-border-radius: 5px 5px 0 0; /* From original */
            -o-border-radius: 5px 5px 0 0; /* From original */
            border-radius: 5px 5px 0 0; /* From original */
            padding: 16px 45px; /* From original */
        }

        .login-register-distribber form p.validation {
            padding: 18px 45px 0 45px; /* From original */
        }

        .login-register-distribber form fieldset {
            padding: 18px 45px 35px 45px; /* From original */
        }

        .login-register-distribber form .span-1-1-2 input.text,
        .login-register-distribber form .span-1-2-2 input.text {
            padding-left: 5%; /* From original */
        }
}

/* IE9 Form Hacks within Login/Register */
.lt-ie9 .login-register form {
    border: 1px solid #cccccc;
    background: white;
}

    .lt-ie9 .login-register form h1 {
        background: #f1f1f1;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -ms-border-radius: 5px 5px 0 0;
        -o-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        padding: 16px 45px;
    }

    .lt-ie9 .login-register form p.validation {
        padding: 18px 45px 0 45px;
    }

    .lt-ie9 .login-register form fieldset {
        padding: 18px 45px 35px 45px;
    }

    .lt-ie9 .login-register form .span-1-1-2 input.text,
    .lt-ie9 .login-register form .span-1-2-2 input.text {
        padding-left: 5%;
    }

.lt-ie9 .login-register-distribber form {
    border: 1px solid #cccccc;
    background: white;
}

    .lt-ie9 .login-register-distribber form h1 {
        background: #f1f1f1;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -ms-border-radius: 5px 5px 0 0;
        -o-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        padding: 16px 45px;
    }

    .lt-ie9 .login-register-distribber form p.validation {
        padding: 18px 45px 0 45px;
    }

    .lt-ie9 .login-register-distribber form fieldset {
        padding: 18px 45px 35px 45px;
    }

    .lt-ie9 .login-register-distribber form .span-1-1-2 input.text,
    .lt-ie9 .login-register-distribber form .span-1-2-2 input.text {
        padding-left: 5%;
    }

/* Footer within Login/Register */
.login-register #footer {
    text-align: center; /* From original */
}

    .login-register #footer .footer-links {
        display: block; /* From original */
    }

.login-register-distribber #footer {
    text-align: center; /* From original */
}

    .login-register-distribber #footer .footer-links {
        display: block; /* From original */
    }

/* Progress steps */
.progress-steps {
    font-size: 0px; /* From original */
    max-width: 860px; /* From original */
    margin: 0 auto 30px auto; /* From original */
    height: 36px; /* From original */
    overflow: hidden; /* From original */
    display: none; /* From original */
}

@media (min-width: 600px) {
    .progress-steps {
        display: block; /* From original */
    }
}

.lt-ie9 .progress-steps {
    display: block;
}

@media (min-width: 768px) {
    .progress-steps {
        height: 38px; /* From original */
    }
}

.lt-ie9 .progress-steps {
    height: 38px;
}

.progress-steps.mobile {
    display: block; /* From original */
}

    .progress-steps.mobile span,
    .progress-steps.mobile a {
        font-weight: 700; /* From original */
    }

@media (min-width: 600px) {
    .progress-steps.mobile {
        display: none; /* From original */
    }
}

.lt-ie9 .progress-steps.mobile {
    display: none;
}

.progress-steps span,
.progress-steps a {
    width: 25%; /* From original */
    font-size: 12px; /* From original */
    line-height: 1; /* From original */
    display: inline-block; /* From original */
    background: #eaf2fa; /* From original */
    padding: 12px 0; /* From original */
    color: #4295d3; /* From original */
    text-align: center; /* From original */
    position: relative; /* From original */
}

@media (min-width: 768px) {
    .progress-steps span,
    .progress-steps a {
        font-size: 14px; /* From original */
    }
}

.lt-ie9 .progress-steps span, .lt-ie9
.progress-steps a {
    font-size: 14px;
}

.progress-steps span:hover,
.progress-steps a:hover {
    opacity: 1; /* From original */
}

.progress-steps span:before,
.progress-steps a:before {
    content: " "; /* From original */
    width: 0; /* From original */
    height: 0; /* From original */
    top: -10px; /* From original */
    right: -11px; /* From original */
    position: absolute; /* From original */
    border-top: 29px solid transparent; /* From original */
    border-bottom: 29px solid transparent; /* From original */
    border-left: 17px solid white; /* From original */
    z-index: 500000000; /* From original */
}

.progress-steps span:after,
.progress-steps a:after {
    content: " "; /* From original */
    width: 0; /* From original */
    height: 0; /* From original */
    top: 0; /* From original */
    right: -6px; /* From original */
    position: absolute; /* From original */
    border-top: 19px solid transparent; /* From original */
    border-bottom: 19px solid transparent; /* From original */
    border-left: 12px solid #eaf2fa; /* From original */
    z-index: 500000001; /* From original */
}

.progress-steps span.active, .progress-steps span.complete,
.progress-steps a.active,
.progress-steps a.complete {
    background: #4295d3; /* From original */
    color: white; /* From original */
}

    .progress-steps span.active:after, .progress-steps span.complete:after,
    .progress-steps a.active:after,
    .progress-steps a.complete:after {
        border-left: 12px solid #4295d3; /* From original */
    }

.progress-steps span.first,
.progress-steps a.first {
    -webkit-border-radius: 5px 0 0 5px; /* From original */
    -moz-border-radius: 5px 0 0 5px; /* From original */
    -ms-border-radius: 5px 0 0 5px; /* From original */
    -o-border-radius: 5px 0 0 5px; /* From original */
    border-radius: 5px 0 0 5px; /* From original */
}

.progress-steps span.last, .progress-steps span.active.last, .progress-steps span.complete.last,
.progress-steps a.last,
.progress-steps a.active.last,
.progress-steps a.complete.last {
    -webkit-border-radius: 0 5px 5px 0; /* From original */
    -moz-border-radius: 0 5px 5px 0; /* From original */
    -ms-border-radius: 0 5px 5px 0; /* From original */
    -o-border-radius: 0 5px 5px 0; /* From original */
    border-radius: 0 5px 5px 0; /* From original */
}

    .progress-steps span.last:before, .progress-steps span.last:after, .progress-steps span.active.last:before, .progress-steps span.active.last:after, .progress-steps span.complete.last:before, .progress-steps span.complete.last:after,
    .progress-steps a.last:before,
    .progress-steps a.last:after,
    .progress-steps a.active.last:before,
    .progress-steps a.active.last:after,
    .progress-steps a.complete.last:before,
    .progress-steps a.complete.last:after {
        content: ""; /* From original */
        display: none; /* From original */
    }

/* Specific datepicker style within login form (override) */
.login-register form .upload-widget .upload-meta.datepicker {
    position: static; /* From original */
}

    .login-register form .upload-widget .upload-meta.datepicker i {
        float: right; /* From original */
        margin-top: -14px; /* From original */
        margin-right: 7px; /* From original */
        position: relative; /* From original */
        top: -8px; /* From original */
        right: auto; /* From original */
    }


/* ==========================================================================
  13. Document List
  ========================================================================== */

/* #main-content fieldset header and its children */
#main-content fieldset header {
    background: #F1F1F1;
    padding: 8px 14px 6px 14px;
    background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #F1F1F1), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(bottom center, #F1F1F1, #ffffff);
    background: -moz-linear-gradient(bottom center, #F1F1F1, #ffffff);
    background: -o-linear-gradient(bottom center, #F1F1F1, #ffffff);
    background: linear-gradient(to top, #F1F1F1, #ffffff); /* Standard syntax */
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1; /* Ensure gradient is above content below */
}

    #main-content fieldset header .expand-collapse {
        float: left;
        display: block;
        color: #b1b1b1;
        vertical-align: middle;
        margin-right: 12px;
        position: relative;
        top: 3px;
        cursor: pointer;
        font-size: 16px; /* Assuming icon font */
        line-height: 1;
    }

    #main-content fieldset header h1 {
        font-family: 'Open Sans', sans-serif;
        color: #010000;
        font-size: 14px;
        margin: 0 0 10px 0;
        font-weight: 600;
        line-height: 1.4;
        display: inline-block;
        vertical-align: middle;
    }

@media (min-width: 768px) {
    #main-content fieldset header h1 {
        margin: 0;
    }
}

.lt-ie9 #main-content fieldset header h1 {
    margin: 0;
    display: inline; /* IE7 inline-block fix */
    zoom: 1;
}

#main-content fieldset header label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 15px; /* Space after label */
    line-height: 1.4;
}

#main-content fieldset header select {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    height: 30px; /* Match button/input height */
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#main-content fieldset header .select-wrap {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    position: relative;
}

#main-content fieldset header .btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px; /* Space before button */
}

    #main-content fieldset header .btn.download-pdf {
        background-color: #d9534f; /* Example color */
        border-color: #d43f3a; /* Example color */
        color: #fff;
    }

/* #main-content form.document-list fieldset and its states */
#main-content form.document-list fieldset,
form.document-list fieldset {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 0; /* Remove default fieldset padding */
    border-radius: 4px;
}

    #main-content form.document-list fieldset.collapsed .document-group-documents,
    form.document-list fieldset.collapsed .document-group-documents {
        display: none; /* Hide content when collapsed */
    }

    #main-content form.document-list fieldset.expanded .document-group-documents,
    form.document-list fieldset.expanded .document-group-documents {
        display: block; /* Show content when expanded */
    }

    /* #main-content form.document-list fieldset .document-group-documents */
    #main-content form.document-list fieldset .document-group-documents,
    form.document-list fieldset .document-group-documents {
        overflow: hidden; /* Clear floats inside */
        /* transition: height 0.3s ease; /* Example transition for expand/collapse */
    }

        /* #main-content form.document-list fieldset .document-group-documents .row */
        #main-content form.document-list fieldset .document-group-documents .row,
        form.document-list fieldset .document-group-documents .row {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            position: relative;
            margin-left: 0; /* Override Bootstrap row margin */
            margin-right: 0; /* Override Bootstrap row margin */
        }

            #main-content form.document-list fieldset .document-group-documents .row:last-child,
            form.document-list fieldset .document-group-documents .row:last-child {
                border-bottom: none; /* No border on the last row */
            }

@media (min-width: 768px) {
    #main-content form.document-list fieldset .document-group-documents .row,
    form.document-list fieldset .document-group-documents .row {
        /* Add responsive adjustments if needed */
    }
}

.lt-ie9 #main-content form.document-list fieldset .document-group-documents .row,
.lt-ie9 form.document-list fieldset .document-group-documents .row {
    /* IE hacks for layout */
}

/* #main-content form.document-list fieldset .document-group-documents .doc-wrap */
#main-content form.document-list fieldset .document-group-documents .doc-wrap,
form.document-list fieldset .document-group-documents .doc-wrap {
    padding: 10px 14px;
    overflow: hidden;
    position: relative;
    border-right: 1px solid #eee; /* Separator between doc details and actions? */
}

@media (max-width: 767px) {
    #main-content form.document-list fieldset .document-group-documents .doc-wrap,
    form.document-list fieldset .document-group-documents .doc-wrap {
        border-right: none; /* Remove border on smaller screens */
        border-bottom: 1px solid #eee; /* Add bottom border instead */
    }
}

.lt-ie9 #main-content form.document-list fieldset .document-group-documents .doc-wrap,
.lt-ie9 form.document-list fieldset .document-group-documents .doc-wrap {
    /* IE hacks */
}

/* #main-content form.document-list fieldset .document-group-documents .doc-wrap .delete-cell */
#main-content form.document-list fieldset .document-group-documents .doc-wrap .delete-cell,
form.document-list fieldset .document-group-documents .doc-wrap .delete-cell {
    padding: 10px 14px;
    text-align: center;
    vertical-align: middle;
    width: 50px; /* Example width for delete column */
    cursor: pointer;
    opacity: 0; /* Hide by default */
    visibility: hidden; /* Hide by default */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#main-content form.document-list fieldset .document-group-documents .row:hover .delete-cell,
form.document-list fieldset .document-group-documents .row:hover .delete-cell {
    opacity: 1; /* Show on row hover */
    visibility: visible; /* Show on row hover */
}

@media (max-width: 767px) {
    #main-content form.document-list fieldset .document-group-documents .doc-wrap .delete-cell,
    form.document-list fieldset .document-group-documents .doc-wrap .delete-cell {
        width: auto; /* Adjust width on mobile */
        opacity: 1; /* Always show on mobile? */
        visibility: visible; /* Always show on mobile? */
        text-align: right;
        padding: 5px 14px; /* Adjust padding */
    }
}

.lt-ie9 #main-content form.document-list fieldset .document-group-documents .doc-wrap .delete-cell,
.lt-ie9 form.document-list fieldset .document-group-documents .doc-wrap .delete-cell {
    /* IE hacks */
}


/* #main-content form.document-list fieldset .document-group-documents .document-image, .document-description */
#main-content form.document-list fieldset .document-group-documents .document-image,
#main-content form.document-list fieldset .document-group-documents .document-description,
form.document-list fieldset .document-group-documents .document-image,
form.document-list fieldset .document-group-documents .document-description {
    display: inline-block;
    vertical-align: top;
    padding-right: 10px; /* Space between image and description */
}

#main-content form.document-list fieldset .document-group-documents .document-image {
    width: 60px; /* Example image width */
    height: auto;
    margin-right: 10px;
}

#main-content form.document-list fieldset .document-group-documents .document-description {
    width: calc(100% - 80px); /* Example width calculation */
}

    #main-content form.document-list fieldset .document-group-documents .document-description input[type="checkbox"] {
        margin-right: 5px;
        vertical-align: middle;
    }

    #main-content form.document-list fieldset .document-group-documents .document-description span {
        font-size: 13px; /* Example font size for metadata */
        color: #666;
        display: block;
        margin-top: 4px;
    }

    #main-content form.document-list fieldset .document-group-documents .document-description strong {
        font-weight: 600;
    }

    #main-content form.document-list fieldset .document-group-documents .document-description h3 {
        font-size: 14px;
        margin: 0 0 5px 0;
        font-weight: 600;
        line-height: 1.3;
    }

@media (max-width: 767px) {
    #main-content form.document-list fieldset .document-group-documents .document-image,
    form.document-list fieldset .document-group-documents .document-image {
        width: 40px; /* Adjust image width on mobile */
        margin-right: 5px;
    }

    #main-content form.document-list fieldset .document-group-documents .document-description,
    form.document-list fieldset .document-group-documents .document-description {
        width: calc(100% - 50px); /* Adjust description width on mobile */
        padding-right: 0;
    }

        #main-content form.document-list fieldset .document-group-documents .document-description h3 {
            font-size: 13px; /* Adjust heading size on mobile */
        }

        #main-content form.document-list fieldset .document-group-documents .document-description span {
            font-size: 11px; /* Adjust metadata size on mobile */
        }
}

.lt-ie9 #main-content form.document-list fieldset .document-group-documents .document-image,
.lt-ie9 form.document-list fieldset .document-group-documents .document-image {
    display: inline;
    zoom: 1; /* IE7 inline-block fix */
}

.lt-ie9 #main-content form.document-list fieldset .document-group-documents .document-description,
.lt-ie9 form.document-list fieldset .document-group-documents .document-description {
    display: inline;
    zoom: 1; /* IE7 inline-block fix */
    /* Add width hacks if needed */
}


/* .expand-collapse:before, .expanded .expand-collapse:before, .collapsed .expand-collapse:before */
.expand-collapse:before {
    /* Assuming Icomoon or similar font icon */
    font-family: 'Icomoon'; /* Example font family */
    content: '\e90e'; /* Example icon for a plus/expand sign */
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.expanded .expand-collapse:before {
    content: '\e90f'; /* Example icon for a minus/collapse sign */
}

.collapsed .expand-collapse:before {
    content: '\e90e'; /* Example icon for a plus/expand sign */
}


/* ==========================================================================
  14. Purchase Agreement
  ========================================================================== */

/* .purchase-agreement-form.constrain-860 */
.purchase-agreement-form.constrain-860 {
    max-width: 860px; /* Apply max-width */
    margin-left: auto; /* Center the block */
    margin-right: auto; /* Center the block */
}

/* .purchase-agreement-form label, .purchase-agreement-form input */
.purchase-agreement-form label {
    font-weight: 600; /* Make labels bold */
    margin-bottom: 5px;
    display: block; /* Ensure labels are on their own line */
}

.purchase-agreement-form input[type="text"],
.purchase-agreement-form input[type="email"],
.purchase-agreement-form input[type="password"],
.purchase-agreement-form input[type="number"] {
    width: 100%; /* Make inputs fill container */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in element's total width */
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .purchase-agreement-form input[type="text"],
    .purchase-agreement-form input[type="email"],
    .purchase-agreement-form input[type="password"],
    .purchase-agreement-form input[type="number"] {
        padding: 6px 10px; /* Adjust padding on mobile */
    }
}

.lt-ie9 .purchase-agreement-form input[type="text"],
.lt-ie9 .purchase-agreement-form input[type="email"],
.lt-ie9 .purchase-agreement-form input[type="password"],
.lt-ie9 .purchase-agreement-form input[type="number"] {
    /* IE hacks for box-sizing and width */
    width: 98%; /* Adjust width for padding/border */
}


/* #main-content fieldset.purchase-agreement and its variants */
#main-content fieldset.purchase-agreement {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 4px;
    margin-bottom: 20px;
}

    #main-content fieldset.purchase-agreement.electronic-signature {
        /* Specific styles for electronic signature variant if any */
    }

    /* #main-content fieldset.purchase-agreement .purchase-agreement-text */
    #main-content fieldset.purchase-agreement .purchase-agreement-text {
        padding: 15px;
        background-color: #f9f9f9; /* Light background for text area */
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        max-height: 300px; /* Example max height for scrollable text */
        overflow-y: auto; /* Add scrollbar if text exceeds max height */
    }

    #main-content fieldset.purchase-agreement.expanded .purchase-agreement-text,
    #main-content fieldset.purchase-agreement.electronic-signature.expanded .purchase-agreement-text {
        max-height: none; /* Remove max height when expanded */
        overflow-y: visible; /* Remove scrollbar when expanded */
    }

    #main-content fieldset.purchase-agreement .purchase-agreement-text p {
        margin-bottom: 1em; /* Space between paragraphs */
        line-height: 1.6;
        color: #333;
    }

        #main-content fieldset.purchase-agreement .purchase-agreement-text p:last-child {
            margin-bottom: 0;
        }

    /* #main-content fieldset.purchase-agreement footer */
    #main-content fieldset.purchase-agreement footer {
        padding: 10px 15px;
        background-color: #f1f1f1; /* Footer background */
        text-align: right; /* Align buttons/links to the right */
        border-top: 1px solid #ddd;
    }

        #main-content fieldset.purchase-agreement footer a {
            margin-left: 10px; /* Space between links/buttons in footer */
            /* Add specific link/button styles here if needed */
        }

/* .expand-collapse-alt pseudo-elements */
/* Assuming Icomoon or similar font icon for an alternative toggle */
.expand-collapse-alt:before {
    font-family: 'Icomoon'; /* Example font family */
    content: '\e914'; /* Example icon for a down arrow */
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.expanded .expand-collapse-alt:before {
    content: '\e913'; /* Example icon for an up arrow */
}

.collapsed .expand-collapse-alt:before {
    content: '\e914'; /* Example icon for a down arrow */
}

/* .expand-collapse-alt:after (Uncommon for a simple toggle, perhaps a label or extra indicator?) */
/* Assuming this might be empty or used for clearing/spacing */
.expand-collapse-alt:after {
    content: ''; /* Or specific content */
    display: inline-block; /* Or block/table */
    /* Add other styles like width, height, clear, etc. if needed */
}

.expanded .expand-collapse-alt:after {
    /* Styles specific to expanded state */
}

.collapsed .expand-collapse-alt:after {
    /* Styles specific to collapsed state */
}


/* ==========================================================================
  15. Mobile Styles
  ========================================================================== */

/* Responsive Table Styles (within media query) */
@media only screen and (max-width: 1024px) {
    table.responsive {
        /* Styles to make tables responsive */
        border-collapse: collapse; /* Ensure borders behave well */
        width: 100%;
        display: block; /* Make table behave like a block element */
        overflow-x: auto; /* Add horizontal scroll if needed */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
    }

        table.responsive thead {
            display: block; /* Treat thead as a block */
            float: left; /* Float thead to the left */
        }

        table.responsive tbody {
            display: block; /* Treat tbody as a block */
            width: auto;
            overflow-x: auto; /* Add horizontal scroll to tbody */
            -webkit-overflow-scrolling: touch;
        }

        table.responsive th,
        table.responsive td {
            display: block; /* Treat th and td as blocks */
            padding: 10px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        table.responsive th {
            text-align: right; /* Align headers to the right (next to data) */
            background-color: #f2f2f2;
        }

        table.responsive td {
            border-left: none;
            border-right: none;
            white-space: nowrap; /* Prevent data from wrapping */
        }

            table.responsive td:before {
                /* Add data labels before content */
                content: attr(data-label); /* Requires data-label attribute on td */
                font-weight: bold;
                margin-right: 10px;
            }

        table.responsive .pinned {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            z-index: 1; /* Ensure pinned column is above others */
            background-color: #fff; /* Background for pinned column */
        }

            table.responsive .pinned table {
                border-right: 1px solid #ccc; /* Separator for pinned column */
            }

                table.responsive .pinned table th,
                table.responsive .pinned table td {
                    border-left: none;
                    border-top: none;
                }

            table.responsive .pinned td:last-child {
                border-bottom: none; /* No bottom border on last pinned cell */
            }

    div.table-wrapper {
        /* Wrapper for scrollable table */
        position: relative;
        overflow-x: hidden; /* Hide wrapper scrollbar */
    }

        div.table-wrapper div.scrollable {
            /* Inner div for actual scrolling */
            overflow-x: auto; /* Add scrollbar here */
            -webkit-overflow-scrolling: touch;
        }
}

/* Mobile menu styles */
/* These styles likely work in conjunction with JS toggling classes on the body */
body.mobile-menu-enabled.mobile-menu-open {
    overflow: hidden; /* Prevent scrolling body when menu is open */
}

    body.mobile-menu-enabled.mobile-menu-open #site-constraint {
        /* Transform or position the main content off-screen */
        transform: translateX(250px); /* Example: Push content to the right */
        transition: transform 0.3s ease;
    }

    body.mobile-menu-enabled.mobile-menu-open #header #main-navigation {
        /* Position the navigation menu */
        transform: translateX(0); /* Slide menu into view */
        transition: transform 0.3s ease;
    }

body #site-constraint {
    /* Base state for site constraint */
    transition: transform 0.3s ease; /* Add transition for smooth movement */
    position: relative; /* Needed for transform */
    z-index: 1; /* Ensure content is above menu when closed */
    background-color: #fff; /* Prevent menu showing through */
}

body #main-navigation {
    /* Base state for navigation (off-screen) */
    position: fixed;
    top: 0;
    right: 0; /* Or left: 0 depending on menu direction */
    bottom: 0;
    width: 250px; /* Example menu width */
    background-color: #333; /* Example menu background */
    transform: translateX(250px); /* Example: Hide menu off-screen initially */
    transition: transform 0.3s ease;
    z-index: 1000; /* High z-index for menu */
    overflow-y: auto; /* Add scrolling if menu content is tall */
    -webkit-overflow-scrolling: touch;
    display: block !important; /* Ensure it's block on mobile */
}

body .mobile-menu-btn {
    display: none; /* Hide by default */
    /* Add button styles here */
    position: fixed; /* Or absolute */
    top: 10px; /* Example position */
    right: 10px; /* Example position */
    z-index: 1001; /* Above the menu */
    padding: 10px;
    background-color: #007bff; /* Example button color */
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

@media only screen and (max-width: 1024px) {
    body .mobile-menu-btn {
        display: block; /* Show button on mobile */
    }
    /* Hide regular navigation on mobile if using the mobile menu */
    #header #main-navigation {
        display: none;
    }

    body.mobile-menu-enabled #header #main-navigation {
        display: block; /* Show the fixed mobile menu */
    }
}

body .mobile-menu-btn.open-btn {
    /* Styles for the button when it shows the "open" icon */
}

body .mobile-menu-btn.close-btn {
    /* Styles for the button when it shows the "close" icon */
}


/* ==========================================================================
  16. Print Styles
  ========================================================================== */

@media print {
    /* Consolidate all print styles into one block */

    /* Original block 1 selectors */
    #pager,
    form, /* Hide forms by default when printing? Or specific forms? */
    .no-print, /* Hide elements with this class */
    [data-tooltip], /* Hide tooltips */
    .larger-font /* Maybe reset font size for printing? */ {
        display: none !important; /* Hide elements not meant for print */
    }

    /* Reset font size for specific cases if needed */
    .larger-font {
        font-size: inherit !important;
    }

    /* HTML5 Boilerplate block selectors */
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black text on white background */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline; /* Underline links */
    }

        a[href]:after {
            content: " (" attr(href) ")"; /* Show link URL after text */
        }

    abbr[title]:after {
        content: " (" attr(title) ")"; /* Show abbr title */
    }

    /* Don't show links for images or javascript/internal links */
    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid; /* Avoid breaking inside these blocks */
    }

    thead {
        display: table-header-group; /* Repeat table headers on each page */
    }

    tr,
    img {
        page-break-inside: avoid; /* Avoid breaking rows and images across pages */
    }

    img {
        max-width: 100% !important; /* Ensure images fit within print area */
    }

    @page {
        margin: 0.5cm; /* Set default page margins */
    }

    p,
    h2,
    h3 {
        orphans: 3; /* Minimum number of lines of a paragraph left at the bottom of a page */
        widows: 3; /* Minimum number of lines of a paragraph carried over to the top of a page */
    }

    h2,
    h3 {
        page-break-after: avoid; /* Avoid page breaks immediately after headings */
    }

    /* Add other specific print adjustments here */
    /* For example, hiding site header/footer, adjusting margins, etc. */
    #header,
    #footer {
        display: none !important;
    }

    #main-content {
        padding-top: 0 !important;
    }

    fieldset {
        border: 1px solid #ccc !important; /* Ensure fieldset borders print */
    }

        fieldset header {
            background: #f2f2f2 !important; /* Print-friendly header background */
            border-bottom: 1px solid #ccc !important;
        }

    table {
        border-collapse: collapse !important; /* Ensure tables print correctly */
        width: 100% !important;
    }

    th, td {
        border: 1px solid #ccc !important; /* Ensure table borders print */
        padding: 8px !important;
    }
}

/* End of site.css based on provided blueprint */

/* ===================================================
    17. Plans Pages
    ==================================================
*/

/* === HEADER === */
.navHeaderPlans {
    background-color: #4E67C8;
    color: white;
    padding: 10px 20px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ensure links in header are white and readable */
.navHeaderPlans .nav-linkz,
.navHeaderPlans .navAnchor {
    color: white !important;
    text-decoration: none;
}

    .navHeaderPlans .nav-linkz:hover,
    .navHeaderPlans .navAnchor:hover {
        color: #E1FD39 !important;
    }


/* Dropdown menus (Bootstrap-based) in header */
.navHeaderPlans .dropdown-menu {
    background-color: #4E67C8;
    border: none;
    padding: 0;
}

.navHeaderPlans .dropdown-item {
    color: white;
    padding: 10px 15px;
}

    .navHeaderPlans .dropdown-item:hover {
        background-color: #3c50a0;
        color: #E1FD39;
    }


.plans-logo-container {
    display: flex; /* Use flexbox for horizontal layout */
    align-items: center; /* Vertically align items */
}

.navHeaderPlans-title {
    font-family: CabinSketch-Bold, Cabin Sketch;
    font-size:1.8em; /* Adjust as needed */
    color: green; /* Or your desired color */
    font-weight: bold;
    margin-left: 10px; /* Add some space between logo and title */
    white-space: nowrap; /* Prevent title from wrapping */
    line-height: 0.5;
}

    .navHeaderPlans-title span {
        display: block; /* Make each line a block element */
    }

/* Apply Plans styles to nav content in _Links */
.navHeaderPlans .plans-mode a,
.navHeaderPlans .plans-mode span,
.navHeaderPlans .plans-mode div {
    color: white;
    text-decoration: none;
}

    .navHeaderPlans .plans-mode a:hover {
        color: #E1FD39;
    }


/* Footer */
/* === Plans Footer === */
#footer.plans-footer {
    background-color: #4E67C8 !important; /* CORRECTED BACKGROUND COLOR */
    color: white; /* All general text in the plans footer should be white */
    padding: 20px 0;
    font-family: 'Archivo', sans-serif;
}

/* Outer wrapper like header-inner - KEEP IF USED ELSEWHERE, OTHERWISE CAN BE REMOVED */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* .blogo-container img.blogo-image-plans - KEEP IF THIS IS FOR A DIFFERENT LOGO/CONTEXT, OTHERWISE CAN BE REMOVED */
.blogo-container img.blogo-image-plans {
    max-height: 50px;
}

/* Footer links inline - THIS IS OLD FLEXBOX RULE, NO LONGER NEEDED FOR PLANS FOOTER LAYOUT */
/* .footer-bottom-links-plans {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
} */


/* New Footer Styles (Complementing Plans Footer) */
.footer-content-plans {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* ALIGNS THE ENTIRE LEFT SECTION AND THE RIGHT LOGIN SECTION TO THE TOP */
    padding: 20px;
}

.footer-logo-container-plans {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; /* CHANGED: Second row now only takes height of its content */
    grid-template-areas:
        "logo backtotop"
        ".     links";
    align-items: start;
    gap: 0 20px; /* CHANGED: Row-gap set to 0, column-gap remains 20px */
}

.footer-logo-plans {
    grid-area: logo; /* Assigns the logo to the 'logo' area in the grid */
    width: 100px; /* Keep existing width */
    height: auto; /* Keep existing height */
    align-self: start; /* Explicitly align to the top of its grid cell */
}

/* Specific styling for the "Back to top" link in the plans footer */
.back-to-top-link-plans {
    grid-area: backtotop; /* Assigns the "Back to top" link to the 'backtotop' area */
    align-self: start; /* Explicitly align to the top of its grid cell */
    color: white !important; /* White color for the link */
    text-decoration: none;
    font-size: 14px; /* Match other footer links */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

    .back-to-top-link-plans:hover {
        color: rgba(255, 255, 255, 0.7) !important; /* Subtle shading effect on hover */
    }

/* The 'footer-bottom-links-plans' div now occupies the 'links' grid area */
.footer-bottom-links-plans {
    grid-area: links;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: nowrap;
    align-self: end;
    margin-top: -10px; /* Adjust this value (e.g., -5px, -15px) until it looks perfect */
}

/* General link appearance for plans footer (including all 'a' tags and specific 'footer-link-plans') */
footer.plans-footer a,
footer.plans-footer .nav-linkx,
footer.plans-footer .footer-link-plans {
    color: white !important; /* All links should be white */
    text-decoration: none;
    font-size: 14px;
}

    footer.plans-footer a:hover,
    footer.plans-footer .nav-linkx:hover,
    footer.plans-footer .footer-link-plans:hover {
        color: #E1FD39 !important; /* Specific hover color for general links */
    }

/* Logout button for plans footer */
footer.plans-footer button.logout-btn {
    background: none;
    border: none;
    color: white; /* White color for the button */
    font-size: 14px;
    cursor: pointer;
}

    footer.plans-footer button.logout-btn:hover {
        color: #E1FD39; /* Specific hover color for logout button */
    }

/* The 'footer-right-plans' div will naturally align to the top
   because its parent '.footer-content-plans' has 'align-items: flex-start;' */
.footer-right-plans {
    /* Any specific styles for login partial here */
}


/* === HEADER MEASURES === */
.navHeaderMeasuresView {
    background-color: #A7EA52; /* Measures green */
    color: #4E67C8; /* Primary text/link color */
    padding: 10px 20px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ensure links in header are purple and readable */
.navHeaderMeasures .nav-linkz,
.navHeaderMeasures .navAnchor {
    color: #4E67C8 !important;
    text-decoration: none;
}

    .navHeaderMeasures .nav-linkz:hover,
    .navHeaderMeasures .navAnchor:hover {
        color: #2C3E99 !important;
    }

/* Dropdown menus (Bootstrap-based) in header */
.navHeaderMeasures .dropdown-menu {
    background-color: #A7EA52;
    border: none;
    padding: 0;
}

.navHeaderMeasures .dropdown-item {
    color: #4E67C8;
    padding: 10px 15px;
}

    .navHeaderMeasures .dropdown-item:hover {
        background-color: #90D347;
        color: #2C3E99;
    }

.measures-logo-container {
    display: flex;
    align-items: center;
}

.navHeaderMeasures-title {
    font-family: CabinSketch-Bold, Cabin Sketch;
    font-size: 1.8em;
    color: #4E67C8;
    font-weight: bold;
    margin-left: 10px;
    white-space: nowrap;
    line-height: 0.5;
}

    .navHeaderMeasures-title span {
        display: block;
    }

/* Apply Measures styles to nav content in _Links */
.navHeaderMeasures .measures-mode a,
.navHeaderMeasures .measures-mode span,
.navHeaderMeasures .measures-mode div {
    color: #4E67C8;
    text-decoration: none;
}

    .navHeaderMeasures .measures-mode a:hover {
        color: #2C3E99;
    }
/* === Measures Footer === */
#footer.measures-footer {
    background-color: #A7EA52 !important;
    color: #4e67c8;
    padding: 20px 0;
    font-family: 'Archivo', sans-serif;
}

/* Outer wrapper like header-inner */
/* Keep this if it's used elsewhere, otherwise it might be redundant */
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* New Footer Styles (Complementing Measures Footer) */
.footer-content-measures {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* ALIGNS THE ENTIRE LEFT SECTION AND THE RIGHT LOGIN SECTION TO THE TOP */
    padding: 20px; /* Keep existing padding */
}

.footer-logo-container-measures {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; /* CHANGED: Second row now only takes height of its content */
    grid-template-areas:
        "logo backtotop"
        ".     links";
    align-items: start;
    gap: 0 20px; /* CHANGED: Row-gap set to 0, column-gap remains 20px */
}

.footer-logo-measures {
    grid-area: logo; /* Assigns the logo to the 'logo' area in the grid */
    width: 100px; /* Keep existing width */
    height: auto; /* Keep existing height */
    align-self: start; /* Explicitly align to the top of its grid cell */
}

/* New class for the "Back to top" link */
.back-to-top-link {
    grid-area: backtotop; /* Assigns the "Back to top" link to the 'backtotop' area */
    align-self: start; /* Explicitly align to the top of its grid cell */
    color: #4e67c8 !important; /* Inherit from general link styles */
    text-decoration: none;
    font-size: 14px; /* Match other footer links */
}

    .back-to-top-link:hover {
        color: #2c3e99 !important;
    }

/* The 'footer-bottom-links-measures' div now occupies the 'links' grid area */
.footer-bottom-links-measures {
    grid-area: links;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: nowrap;
    align-self: end;
    margin-top: -10px; /* Adjust this value (e.g., -5px, -15px) until it looks perfect */
}

/* Existing link appearance */
footer.measures-footer a,
footer.measures-footer .nav-linkx,
footer.measures-footer .footer-link {
    color: #4e67c8 !important;
    text-decoration: none;
    font-size: 14px;
}

    footer.measures-footer a:hover,
    footer.measures-footer .nav-linkx:hover,
    footer.measures-footer .footer-link:hover {
        color: #2c3e99 !important;
    }

/* Logout button */
footer.measures-footer button.logout-btn {
    background: none;
    border: none;
    color: #4e67c8;
    font-size: 14px;
    cursor: pointer;
}

    footer.measures-footer button.logout-btn:hover {
        color: #2c3e99;
    }

/* The 'footer-right-measures' div will naturally align to the top
   because its parent '.footer-content-measures' has 'align-items: flex-start;' */
.footer-right-measures {
    /* Any specific styles for login partial here */
}