/* .tblCalendar */
@media screen and (max-width:600px) {
    #calendarContainerTable, #tblCalendar

{
    width: 50px;
    /* text-align: center; */
    /* margin-left: auto;
        margin-right: auto;
        font-size: 10px;
        width: 90px;
        transition: .5s; */
}

}

#PageContainer {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: hidden;
}

.sidePanelleftRight {
    padding-left: 5px;
    background-position: center;
    background-image: url(../../images/calSidepanelLeftRight.png);
    background-size: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap');

.cr-body *, .cr-body *::before, .cr-body *::after {
    box-sizing: border-box;
}

.cr-body {
    font-family: 'DM Sans',sans-serif;
    padding: 6px 4px;
}

/* Entry chooser */
.cr-chooser {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0 10px;
}

.cr-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 2px solid #d3dce8;
    background: #ffffff;
    cursor: pointer;
    transition: all .18s;
}

    .cr-option:hover {
        border-color: #0fa0a0;
        background: #f0fbfb;
        transform: translateX(3px);
    }

.cr-opt-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 10px;
    /* background: #f4f7fb;*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s;
}

.cr-option:hover .cr-opt-icon {
    background: rgba(15,160,160,.15);
}

.cr-opt-text strong {
    font-size: 14px;
    font-weight: 600;
    color: #1a2c42;
    display: block;
}

.cr-opt-text span {
    font-size: 12px;
    color: #8fa1b3;
}

.cr-opt-arrow {
    margin-left: auto;
    color: #8fa1b3;
    font-size: 18px;
    line-height: 1;
    transition: transform .18s;
}

.cr-option:hover .cr-opt-arrow {
    transform: translateX(4px);
    color: #0fa0a0;
}

/* Form cards */
.cr-card {
    background: #f4f7fb;
    border: 1px solid #d3dce8;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    animation: crFadeUp .22s ease both;
}

    .cr-card:nth-child(2) {
        animation-delay: .05s;
    }

    .cr-card:nth-child(3) {
        animation-delay: .10s;
    }

    .cr-card:nth-child(4) {
        animation-delay: .15s;
    }

@keyframes crFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cr-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #4a5c72;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Fields */
.cr-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cr-field-full {
    grid-column: 1/-1;
}

.cr-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .cr-field label {
        font-size: 12px;
        font-weight: 500;
        color: #516275;
    }

    .cr-field input, .cr-field select {
        background: #fff;
        border: 1.5px solid #d3dce8;
        border-radius: 8px;
        padding: 8px 12px;
        font-family: 'DM Sans',sans-serif;
        font-size: 13.5px;
        color: #1a2c42;
        outline: none;
        width: 100%;
        transition: border-color .15s,box-shadow .15s;
    }

        .cr-field input:focus, .cr-field select:focus {
            border-color: #0fa0a0;
            box-shadow: 0 0 0 3px rgba(15,160,160,.12);
        }

/* Assignment grid */
.cr-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(175px,1fr));
    gap: 6px;
    max-height: 155px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: #d3dce8 transparent;
}

.cr-assign-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #d3dce8;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}

    .cr-assign-item:hover {
        border-color: #0fa0a0;
        background: #f0fbfb;
    }

    .cr-assign-item.cr-selected {
        border-color: #0fa0a0;
        background: rgba(15,160,160,.08);
    }

.cr-assign-box {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1.5px solid #d3dce8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    position: relative;
}

.cr-assign-item.cr-selected .cr-assign-box {
    background: #0fa0a0;
    border-color: #0fa0a0;
}

    .cr-assign-item.cr-selected .cr-assign-box::after {
        content: '';
        width: 8px;
        height: 5px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg) translateY(-1px);
        display: block;
    }

.cr-assign-name {
    font-size: 12px;
    color: #1a2c42;
    line-height: 1.3;
}

.cr-assign-org {
    font-size: 10.5px;
    color: #8fa1b3;
}

/* Toggle */
.cr-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    background: #fff;
    border: 1.5px solid #d3dce8;
    border-radius: 9px;
    margin-top: 12px;
}

.cr-toggle-info strong {
    font-size: 13px;
    font-weight: 500;
    color: #1a2c42;
    display: block;
}

.cr-toggle-info span {
    font-size: 11.5px;
    color: #8fa1b3;
}

.cr-toggle-visual {
    width: 38px;
    height: 22px;
    background: #d3dce8;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
}

    .cr-toggle-visual.cr-on {
        background: #0fa0a0;
    }

    .cr-toggle-visual::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: transform .2s cubic-bezier(.34,1.56,.64,1);
        box-shadow: 0 1px 4px rgba(0,0,0,.2);
    }

    .cr-toggle-visual.cr-on::after {
        transform: translateX(16px);
    }

/* Recurrence */
.cr-day-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.cr-day-pill {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1.5px solid #d3dce8;
    background: #fff;
    font-size: 11.5px;
    font-weight: 500;
    color: #4a5c72;
    cursor: pointer;
    transition: all .15s;
}

    .cr-day-pill:hover {
        border-color: #4a5c72;
    }

    .cr-day-pill.cr-active {
        border-color: #0fa0a0;
        background: rgba(15,160,160,.1);
        color: #0fa0a0;
    }

/* Recurring end date visibility container */
#crRecurEndWrap {
    margin-top: 12px;
    opacity: .35;
    transition: opacity .25s;
    pointer-events: none;
}

    #crRecurEndWrap.cr-visible {
        opacity: 1;
        pointer-events: auto;
    }

/* Bulk upload */
.cr-dropzone {
    border: 2px dashed #d3dce8;
    border-radius: 10px;
    padding: 32px 20px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: all .2s;
}

    .cr-dropzone:hover {
        border-color: #0fa0a0;
        background: #f0fbfb;
    }

.cr-dropzone-icon {
    width: 46px;
    height: 46px;
    background: #f4f7fb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.cr-dropzone-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a2c42;
    margin-bottom: 4px;
}

.cr-dropzone-sub {
    font-size: 12px;
    color: #8fa1b3;
    margin-bottom: 12px;
}

.cr-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: 'DM Sans',sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s;
}

.cr-btn-ghost {
    background: transparent;
    color: #4a5c72;
    border: 1.5px solid #d3dce8;
}

    .cr-btn-ghost:hover {
        background: #e8f0f7;
        border-color: #4a5c72;
    }

.cr-format-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

    .cr-format-table th {
        background: #0f1e36;
        color: #fff;
        padding: 8px 11px;
        text-align: left;
        font-weight: 600;
    }

        .cr-format-table th:first-child {
            border-radius: 7px 0 0 0;
        }

        .cr-format-table th:last-child {
            border-radius: 0 7px 0 0;
        }

    .cr-format-table td {
        padding: 7px 11px;
    }

    .cr-format-table tr:nth-child(1) td {
        background: #fffbf0;
        color: #516275;
        font-style: italic;
    }

    .cr-format-table tr:nth-child(2) td {
        background: #f4f7fb;
        color: #8fa1b3;
        font-size: 11px;
    }

.cr-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #d3dce8;
}

.cr-section-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cr-format-dl {
    font-size: 12px;
    color: #0fa0a0;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}

    .cr-format-dl:hover {
        color: #0cc8c8;
    }



/* Table body rows — hover and cursor (cr-format-table only styles rows 1-2) */
.cr-format-table tbody tr {
    border-bottom: 1px solid #f0f4f8;
    cursor: pointer;
    transition: background .12s;
}

    .cr-format-table tbody tr:hover {
        background: #f0fbfb;
    }

        .cr-format-table tbody tr:hover .cr-row-actions {
            opacity: 1;
        }

.cr-format-table tbody td {
    background: #fff; /* override the nth-child rules for rows 1–2 */
    color: #1a2c42;
    font-style: normal;
    font-size: 12.5px;
    padding: 10px 12px;
    vertical-align: middle;
}

/* Row number cell */
.cr-row-num {
    text-align: center;
    font-size: 11px;
    color: #b8c6d4;
    font-weight: 500;
    width: 36px;
}

/* Type badge — reuses cr-assign-item palette */
.cr-type-badge {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(15,160,160,.1);
    color: #0c7a7a;
    white-space: nowrap;
}

.cr-type-empty {
    color: #b8c6d4;
    font-style: italic;
    font-size: 11.5px;
}

/* Clipped text cell */
.cr-cell-clip {
    font-size: 12px;
    color: #516275;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    display: block;
}

/* Date cell */
.cr-date-cell {
    font-size: 11.5px;
    color: #8fa1b3;
    white-space: nowrap;
}

/* Row action buttons — hidden until row hover */
.cr-row-actions {
    opacity: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity .15s;
}
/***********************************************************************/





#edit_icon {
    background-image: url("352547_edit_mode_icon.png");
    float: right;
}

.tdHeightLimited {
    height: 20px;
}

.bulleit {
    font-size: 12px;
    padding-left: 15px;
}

.circle-with-text {
    /* Sizing */
    padding:5px;
    /* Circle shape and color */
    /*background-color: rgb(0, 102, 204);  Example RGB color (a shade of blue) */
    border-radius: 50%;
    /* Text styling */
    color: white; /* Color of the text */
    font-size: 10px;
    font-family: Arial, sans-serif;
    /* Centering the text using Flexbox */
    display: inline;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
}

.colorDot {
    display:inline-block;
    padding-right: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.simpleHover {
    cursor:pointer;
}
    .simpleHover:hover {
        background-color: rgb(255,255,183);
    }

.dragHdrs {
    cursor:grab;
}
    .dragHdrs:hover {
        background-color:lightblue;
    }

    .xdropfolder {
        color: white;
        border: solid 2px gray;
        border-radius: 5px;
        background-color: orange;
    }
    .xdropfolder:-moz-drag-over {
        padding: 50px;
    }

.dragLinesIcon {
    cursor:grab;
    height:8px;
    width:8px;
}
    .dragLinesIcon:hover {
        height: 15px;
        width: 15px;
    }

.w100 {
    width:95%;
}
.jchartHdrs {
    font-weight: bold;
    font-size: 9px;
    padding-left: 10px;
    padding-bottom: 0px;
    /*height: 20px;*/
    /*border-radius: 25px;*/
    /*border: 2px solid rgb(87,172,255);*/
    /*background-image: linear-gradient(white, rgb(188,222,255))*/
}
.jchartHdrsOuter {
    background-image: linear-gradient(white, rgb(229,234,244))
}

    .jchartHdrsOuter:hover {
        background-image: linear-gradient(whitesmoke, lightblue)
    }
.jchartHdrsOuterSorted {
    background-image: linear-gradient(white, orange)
}

    .jchartHdrsOuterSorted:hover {
        background-image: linear-gradient(whitesmoke, lightblue)
    }

.jchartHiddenHdrs {
    font-weight: bold;
    font-size: 8px;
    padding-left: 10px;
    height: 20px;
    /*border-radius: 25px;*/
    /*border: 2px solid rgb(87,172,255);*/
    visibility:hidden;
}

/*code:20240524 201pm Changes That Include the drag Icon*/
.dragIcon {
    background-image: url(../images/drag.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}

.bgRightArrow {
    background-image: url(../images/dblRightArrow.png);
    background-size: 8px;
    background-repeat: no-repeat;
    background-position: right;
}

.tblHdr {
    background-color: whitesmoke;
    font-weight: bold;
    font-size: 10px;
    border: solid .5px gray;
    box-shadow: .5px 1px gray;
    padding: 4px;
}

.DropMenu {
    background-color: white;
    font-weight: normal;
    font-size: 10px;
    border: solid .5px gray;
    box-shadow: .5px 1px gray;
    padding: 5px;
    position: absolute;
    z-index: 5000;
    min-width: 170px;
}

.blueHdr {
    background-color: steelblue;
    color: white;
    padding: 5px;
    border-bottom: solid whitesmoke 4px;
    text-align: center;
}

.tblCol {
    background-color: white;
    font-weight: normal;
    font-size: 10px;
    border: solid .5px silver;
    padding: 4px;
}

.bulkUploadtable {
    text-align: left;
    position: relative;
    border-collapse: collapse;
}

th.sticky {
    background: silver;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

.grayButton {
    background-color: silver;
    color: black;
    box-shadow: 2px 2px #888888;
    cursor: pointer;
}

    .grayButton:hover {
        background-color: gray;
        color: white;
    }

.expandSection {
    background-color: whitesmoke;
    color: black;
    height: 35px;
    cursor: pointer;
    border: solid 1px gray;
    background-image: url(../images/expandPanel_downarrow.png);
    background-size: 15px;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/
    background-position: right;
}

    .expandSection:hover {
        border-bottom: solid 2px gray;
        border-right: solid 2px gray;
    }

/*code: 20240924: 430pm*/
.singleDspTablesIA {
    background-color: white;
    padding: 10px;
    border: 2px solid lightgray;
    width: 90%;
}

#user_administration {
    /* height: 100%; */
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    font-size: 20px;
}

    #user_administration button {
        width: 40%;
        align-self: center;
        position: relative;
        height: 2em;
    }

#new_user_details_div, #new_group_details_div {
    display: flex;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    /* background-color: aqua; */
}

#new_user_form, #new_group_form {
    width: 50%;
    height: 2em;
    font-size: 16px;
}



#new_user_groups {
    padding-right: 10%;
    width: 50%;
}

#new_group_parts {
    width: 100%;
}


    #new_user_groups label, #new_group_parts label {
        position: relative;
        padding-left: 10%;
        height: 2em;
        width: 120%;
    }


#new_user_form input, #new_group_form input {
    display: block;
    outline: none;
    border: none;
    height: 1.25em;
    font-size: 16px;
    margin-bottom: 1px;
    border-bottom: 1px solid #333;
    width: 120%;
}

    #new_user_form input:focus, #new_group_form input:focus {
        border-bottom: 1px solid #0572ce;
        box-shadow: 0 1px 0 0 #0572ce;
    }


#users_list {
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.styled-list {
    padding: 1px 18px 18px 1px;
    /* padding-bottom: 15%; */
    width: 92.5%;
    border-radius: 5px;
    list-style-type: circle;
}

    .styled-list:hover {
        background-color: whitesmoke;
        border-radius: 5px;
        width: 94%;
    }

.styled-form {
    padding: 12px;
    width: 92.5%;
    border-radius: 12px;
    list-style-type: circle;
}

    .styled-form:hover {
        background-color: #D3D3D3;
        border-radius: 12px;
        width: 100%;
    }

#help_icon {
    padding-left: 1%;
}







.miniArrow {
    padding-top: 4px;
    padding-right: 4px;
    width: 12px;
    height: 10px;
    float: right
}


.shSection {
    cursor: pointer;
    color: rgb(31,41,67);
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .shSection:hover {
        background-color: rgb(229,233,240);
    }

.chartBottomLine {
    background-color: rgb(253, 252, 238);
    font-weight: bold;
    color: steelblue;
}

    .chartBottomLine:hover {
        background-color: rgb(232,241,255)
    }






#mainTbl {
    width: 100%;
    border-collapse: collapse;
    margin: 20px;
}

.header {
    border: none;
    font-weight: bold;
    padding-left: 20px;
}


.name_td {
    width: 20%;
    background-color: white;
    /* border:6px solid #FAFBFD; */
    border: 4px solid #F8F8F8;
}

.count_td {
    width: 3%;
    text-align: center;
    background-color: white;
    color: #6A4548;
    /* border:6px solid #FAFBFD; */
    border: 4px solid #F8F8F8;
}

.spacing-td {
    border: none;
}

.textStretch {
    width: fit-content;
    block-size: fit-content;
}

#horizontal_Ln {
    border-color: 4px solid #F8F8F8;
}




red {
    background-color: crimson;
    color: white;
    padding: 2px
}

orange {
    background-color: orange;
    padding: 2px
}

yellow {
    background-color: yellow;
    padding: 2px
}

lightgreen {
    background-color: lightgreen;
    padding: 2px
}

green {
    background-color: lawngreen;
    padding: 2px
}

/*----------------------------------------------------------------------------------------------------------*/

ired {
    color: crimson;
    padding: 2px
}

iorange {
    color: orange;
    padding: 2px
}

iyellow {
    color: yellow;
    padding: 2px
}

ilightgreen {
    color: lightgreen;
    padding: 2px
}

igreen {
    color: lawngreen;
    padding: 2px
}

/*----------------------------------------------------------------------------------------------------------*/


.fileViewer {
    border-radius: 10px;
    z-index: 2000;
    border: solid 1px black;
    background-color: white;
    box-shadow: 2px 2px silver;
    position: absolute;
    top: 50px;
    left: 100px;
    resize: both;
    /*overflow: auto;*/
}

.fileViewer_inner {
    /*height: 100%;*/
    width: 100%;
    overflow-x: auto;
    /*resize: none;*/
}


.PopUp {
    border-radius: 10px;
    position: absolute;
    height: 500px;
    width: 60%;
    background-color: white;
    border: solid 1.5px black;
    box-shadow: 2px 2px silver;
    /*resize: horizontal;
    overflow: auto;
    min-width:500px;*/
}

.PopUpHdr {
    border-radius: 35px;
    background-color: white;
    width: 100%;
    padding: 5px;
    border-bottom: solid whitesmoke 4px;
    font-weight: bold;
}

.icon {
    height: 20px;
    width: 36px;
    padding-right: 6px;
    vertical-align: top;
}

.iconRefresh {
    width: 20px;
    height: 16px;
    cursor: pointer
}

    .iconRefresh:hover {
        background-color: lightblue;
    }

.buildForm {
    border: solid 1px black;
    height: 25px;
    cursor: pointer;
    background-color: whitesmoke;
}

gray {
    color: gray;
}

.BuildFormAddBtn {
    vertical-align: middle;
    text-align: center;
    width: 10px;
    border: solid 1px whitesmoke;
    color: steelblue;
    cursor: pointer
}

    .BuildFormAddBtn:hover {
        background-color: whitesmoke;
    }

.DynamicFormElems {
    width: 100%;
}

.wht {
    background-color: white;
}

.cursor {
    cursor: pointer
}

.pad10 {
    padding: 10px
}

.pad30 {
    padding: 30px
}

.pad5 {
    padding: 5px
}

.padRight10 {
    padding-right: 10px
}

.padRight30 {
    padding-right: 30px
}

.padLeft10 {
    padding-left: 10px
}

.padLeft30 {
    padding-left: 30px
}

.padLeft5 {
    padding-left: 5px
}

.padBottom30 {
    padding-bottom: 30px
}

.padBottom10 {
    padding-bottom: 10px
}

.padBottom5 {
    padding-bottom: 5px
}

.padTop10 {
    padding-top: 10px
}

.padTop5 {
    padding-top: 5px
}

.bold {
    font-weight: bold;
}

.underlined {
    text-decoration: underline;
}

.centered {
    text-align: center;
}

.righted {
    text-align: right;
}

.bright {
    background-color: white;
}

.dim {
    background-color: whitesmoke;
}

.dimmer {
    background-color: silver;
}

.dimmest {
    background-color: gray;
}

.nospace {
    border-collapse: collapse;
}

.nowrap {
    white-space: nowrap;
}

.bsolid {
    border: solid 1px black;
}

.bsolidRt {
    border-right: solid 1px black;
}

.bsolidLt {
    border-Left: solid 1px black;
}

.bsolidBm {
    border-bottom: solid 1px black;
}

.bsolidTp {
    border-top: solid 1px gray;
}

.iBtn {
    border: solid 0px red;
}

    .iBtn:hover {
        border: solid 1px red;
        box-shadow: 1px 1px #888888;
    }

.royalLink {
    color: blue;
    text-decoration: none;
    cursor: pointer;
}

    .royalLink:hover {
        text-decoration: solid;
    }

.xxxdragNdrop:hover {
    border: solid 1px red;
}


.innerTab {
    background-color: white;
    border: solid 1px silver;
    padding: 5px;
    cursor: pointer;
}

    .innerTab:hover {
        background-color: whitesmoke;
    }

.innerTabBold {
    background-color: white;
    border: solid 1.5px black;
    padding: 5px;
    cursor: pointer;
    font-weight: normal
}

    .innerTabBold:hover {
        background-color: whitesmoke;
    }
/******************************************************************** */
body {
    background-color: rgb(31,41,67);
    height: 100vh;
    overflow-y: hidden;
}


/* Small devices (portrait phones, less than 600px) code: 20240814: 0200pm     code: 20240814: 0300pm*/
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .container {
        width: 95%;
        padding: 5px;
    }

    .floating-modal {
        width: 95%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

/* Medium devices (landscape phones, tablets, 600px to 900px) code: 20240814: 0200pm    code: 20240814: 0300pm*/
@media (min-width: 600px) and (max-width: 900px) {
    body {
        font-size: 16px;
    }

    .container {
        width: 90%;
    }
}

/* Large devices (laptops/desktops, 900px and up) code: 20240814: 0200pm  code: 20240814: 0300pm*/
@media (min-width: 900px) {
    body {
        font-size: 18px;
    }

    .container {
        width: 80%;
    }

    .floating-modal {
        width: 85%;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    }
}

/* Extra large devices (large desktops, 1200px and up) code: 20240814: 0200pm  code: 20240814: 0300pm*/
@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }

    .container {
        width: 75%;
    }
}


.err {
    width: 500px;
    color: red;
    font-size: 10px;
}

.tab {
    cursor: pointer;
    color: black;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    font-size: 10px;
    height: 22px;
    width: 150px;
    text-align: center;
    background: url(../images/tab150.png);
    background-size: 100% 90%;
    padding-left: 10px;
    padding-right: 10px;
    background-repeat: no-repeat;
    cursor: pointer;
    border: solid 2px transparent;
}

    .tab:hover {
        /*font-weight: bold;*/
        padding: 2px;
        background: url(../images/tab150-selected.png);
        background-repeat: no-repeat;
        color: white;
        border: solid 0px transparent;
    }

.tabSelected {
    cursor: pointer;
    color: black;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    font-size: 10px;
    height: 22px;
    width: 150px;
    text-align: center;
    background: url(../images/tab150slctd.png);
    background-size: 100% 90%;
    padding-left: 10px;
    padding-right: 10px;
    background-repeat: no-repeat;
    cursor: pointer;
    border: solid 2px transparent;
}

    .tabSelected:hover {
        /*font-weight: bold;*/
        padding: 2px;
        font-weight:bold;
        background: url(../images/tab150slctd-selected.png);
        background-repeat: no-repeat;
        color: black;
        border: solid 0px transparent;
    }

.boxlink {
    cursor: pointer;
    border: solid 1px black;
}

    .boxlink:hover {
        background-color: whitesmoke;
    }

.plusLink {
    padding: 4px;
    border: solid 1px steelblue;
    color: steelblue;
    cursor: pointer;
}

    .plusLink:hover {
        color: red;
        border-color: red;
    }

.myFolder {
    cursor: pointer;
}

    .myFolder:hover {
    }

.optWindow {
    position: absolute;
    top: 10%;
    left: 10%;
    height: 500px;
    width: 60%;
    background-color: white;
    border: solid 1.5px black;
    box-shadow: 2px 2px #888888;
}


.DashboardHdrLink {
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

    .DashboardHdrLink:hover {
        background-color: whitesmoke;
    }

.optBox {
    position: absolute;
    padding: 5px;
    top: 10%;
    left: 10%;
    background-color: white;
    border: solid 1px black;
    box-shadow: 1.5px 1.5px #888888;
}

.confirmWindow {
    position: absolute;
    top: 20%;
    left: 20%;
    /*height: 40%;
    width: 40%;*/
    padding: 10px;
    background-color: white;
    border: solid 1.5px black;
    box-shadow: 2px 2px #888888;
}

.showOptions {
    cursor: pointer;
    display: inline-block;
}

    .showOptions:hover {
        /*border-bottom:1px solid black;*/
        padding-left: 20px;
        background: url("../images/options.png") no-repeat;
        background-size: 18px 18px;
    }

.gearboxSelected {
    width: 15px;
    height: 15px;
}

.gearbox {
    content: url(../images/gearbox.png);
}

    .gearbox:hover {
        content: url(../images/gearbox-dark.png);
    }

.bluelink {
    color: steelblue;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

.redButton {
    padding: 2px;
    color: red;
    border: solid 1px red;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    box-shadow: 4px 4px 10px gray;
    padding-left:4px;
    padding-right:4px;
}

    .redButton:hover {
        background-color: red;
        color:white;
    }

.blueButton {
    padding: 2px;
    color: steelblue;
    border: solid 1px steelblue;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    width: 100px;
    text-align: center;
    cursor: pointer;
}

    .blueButton:hover {
        background-color: whitesmoke;
    }

    .blueButton:disabled {
        background-color: silver;
        color: gray;
    }

.orangeButton {
    padding: 2px;
    color: black;
    border: solid 1px orange;
    background-color: orange;
    font-size: 10px;
    font-weight: bold;
    width: 100px;
    text-align: center;
    cursor: pointer;
}

    .orangeButton:hover {
        background-color: whitesmoke;
    }

    .orangeButton:disabled {
        background-color: silver;
        color: gray;
    }

.smorangebutton {
    padding: 2px;
    color: black;
    border: solid 1px orange;
    background-color: orange;
    font-size: 8px;
    font-weight: normal;
    width: 100px;
    text-align: center;
    cursor: pointer;
}

    .smorangebutton:hover {
        background-color: whitesmoke;
    }

    .smorangebutton:disabled {
        background-color: silver;
        color: gray;
    }

.filterButton {
    padding: 2px;
    padding-left:4px; 
    padding-right:4px;
    color: black;
    border: solid 1px orange;
    background-color: white;
    font-size: 10px;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
}

    .filterButton:hover {
        background-color: orange;
    }

    .filterButton:disabled {
        background-color: silver;
        color: gray;
    }


.longgrayButton {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: gray;
    border: solid 1px gray;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    /*width: 100px;*/
    text-align: center;
    cursor: pointer;
}

.longblueButton {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: steelblue;
    border: solid 1px steelblue;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    /*width: 100px;*/
    text-align: center;
    cursor: pointer;
}

    .longblueButton:hover {
        background-color: whitesmoke;
    }


    .longblueButton:disabled {
        background-color: silver;
        color: gray;
    }



.longgreenButton {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: steelblue;
    border: solid 1px #00FF00;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    /*width: 100px;*/
    text-align: center;
    cursor: pointer;
}

    .longgreenButton:hover {
        background-color: #00FF00;
    }

.longorangeButton {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: steelblue;
    border: solid 1px orange;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    /*width: 100px;*/
    text-align: center;
    cursor: pointer;
}

    .longorangeButton:hover {
        background-color: orange;
        color:white;
    }

.longredButton {
    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;
    color: steelblue;
    border: solid 1px red;
    background-color: white;
    font-size: 10px;
    font-weight: bold;
    /*width: 100px;*/
    text-align: center;
    cursor: pointer;
}

    .longredButton:hover {
        background-color: red;
        color:white;
    }


.bluelink:hover {
    border-bottom: solid 1px steelblue;
}

#waffleIcon {
    background: url("../images/waffle.png");
}

    #waffleIcon:hover {
        background: url("../images/waffleGold.png");
    }

.mainHdr {
    padding: 10px;
    /*background-color: rgb(31,41,67);
    color: white;*/
    background-color: white;
    color: rgb(31,41,67);
    border-bottom: solid 2px navy;
    font-size: 12px;
}

.fittedContainer {
}

.mainBody {
    padding: 10px;
    background-color: rgb(31,41,67);
    color: white;
    font-size: 12px;
}

.sidebar {
    border-top: solid 1px black;
    border-right: solid 1px black;
    padding: 10px;
    padding-left: 20px;
    /*background-color: rgb(31,41,67);
    color: white;*/
    background-color: whitesmoke;
    color: rgb(31,41,67);
    font-size: 14px;
    /* width: 350px;*/
    width: 20%;
    overflow-y: auto;
}

#mainNav {
    height: 80vh;
    overflow-y: auto;
}

#nextNav {
    height: 80vh;
    overflow-y: auto;
}

.sidebarHid {
    border-top: solid 1px black;
    border-right: solid 1px black;
    padding: 5px;
    padding-left: 5px;
    padding-right: 5px;
    /*background-color: rgb(31,41,67);
    color: white;*/
    background-color: whitesmoke;
    color: rgb(31,41,67);
    font-size: 10px;
    /* width: 20px;*/
    width: 2%;
    overflow-y: auto;
}

.optSidebar {
    display: inline-block;
    position: relative;
}

.navIconDescription {
    margin-left: 20px;
    margin-top: -10px;
    padding-left: 10px;
    position: absolute;
    padding: 10px;
    background-color: white;
    color: black;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    z-index: 2000;
}

.divFolder, .divFile {
    padding-top:10px;
}


.mainContainer {
    padding: 10px;
    background-color: white;
    color: black;
    font-size: 12px;
}

.divMainWrapper {
    /*position: relative;
    height: 100vh;
    overflow:hidden;*/
}

.disabled {
    cursor: none;
}

.divMainContainer {
    /*position: fixed;*/
    /*border: solid 5px black;*/
    height: 90vh;
    width: 100%;
}

.disputeTable {
    height: 45vh;
    overflow: auto;
}

boldTxt {
    font-weight: bold;
    font-size: 14px;
}

td {
    vertical-align: top;
}

.FileHover {
    background-color: whitesmoke;
    padding: 5px;
    border: solid 1px gray;
    box-shadow: 2px 2px silver;
    position: absolute;
    z-index: 2000;
}

.med {
    font-weight:normal; 
    font-size:12px; 
    color:black;
}

.sm {
    font-weight: normal;
    font-size: 10px;
    color: gray;
}

.smnormal {
    font-weight: normal;
    font-size: 10px;
}


.smwhite {
    font-weight: normal;
    font-size: 10px;
    color: whitesmoke;
}

.smred {
    font-weight: normal;
    font-size: 10px;
    color: red;
}

.smorange {
    font-size: 10px;
    color: orange;
}

.smgreen {
    font-weight: normal;
    font-size: 10px;
    color: darkgreen;
}

.lg {
    font-weight: normal;
    font-size: 18px;
    color: gray;
}

.red {
    color: red
}

.xoptSidebar {
    color: gray;
    font-weight: normal;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 4px;
}

.optSidebar {
    /* color: white;*/
    color: rgb(31,41,67);
    cursor: pointer;
    font-weight: normal;
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 4px;
}

.smoptSidebar {
    /* color: white;*/
    color: rgb(31,41,67);
    cursor: pointer;
    font-weight: normal;
    font-size: 10px;
    padding-top: 5px;
    /*padding-bottom: 10px;*/
    padding-left: 4px;
}
    /*.optSidebar:before {
        content: url("../images/block.png");
    }*/
    .smoptSidebar:hover {
        background-color: rgb(229,233,240);
        color: black;
    }

.optSidebarYellow {
    color: yellow;
    cursor: pointer;
    font-weight: normal;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 4px;
}
    /*.optSidebar:before {
        content: url("../images/block.png");
    }*/
    .optSidebarYellow:hover {
        background-color: rgb(229,233,240);
        color: black;
    }

.innerSidePanel {
    padding: 2px;
    border-right: solid 1px silver;
    /* width: 160px;*/
    width: 5%; /*  code: 20240820: 0432pm Change Units from px to %*/
}

.shadowSection {
    background-color: white;
    width: 100%;
    padding: 5px;
    border-bottom: solid whitesmoke 4px;
}

.shadowSectionBtn {
    background-color: white;
    font-weight: bold;
    width: 100%;
    padding: 5px;
    border-bottom: solid whitesmoke 4px;
    cursor: pointer
}

    .shadowSectionBtn:hover {
        padding: 10px
    }

.titleSection {
    background-color: white;
    width: 100%;
    padding: 5px;
    border-bottom: solid whitesmoke 4px;
    height: 50px;
    font-weight: bold;
    font-size: 16px;
}


.tableGrid {
    padding: 10px;
}

.smTableGridTD {
    font-size: 10px;
    padding: 10px;
    border: solid 2px whitesmoke;
    width: 300px;
    background-color: white;
}

.smTableGridTDsm {
    font-size: 10px;
    padding: 10px;
    border: solid 2px whitesmoke;
    background-color: white;
}

.tableGridTD {
    font-size: 18px;
    padding: 10px;
    border: solid 2px whitesmoke;
    width: 300px;
    background-color: white;
}

.tableGridTDsm {
    font-size: 18px;
    padding: 10px;
    border: solid 2px whitesmoke;
    background-color: white;
}

.tableGridTDhdr {
    font-weight: bold;
    color: gray;
    font-size: 14px;
    padding: 10px;
    width: 300px;
}

h1 {
    font-size: 18px;
    font-weight: bold;
}

.xhdr {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 4px;
    color: rebeccapurple;
}

.xtbl {
    padding-left: 30px;
}

.selectedhdrLink {
    font-size: 14px;
    color: gray;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: solid 2px navy;
    padding-bottom: 2px;
}

    .selectedhdrLink:hover {
        background-color: rgb(229,233,240);
    }

.hoverGray {
}

    .hoverGray:hover {
        background-color: rgb(229,233,240);
    }

.hdrLink {
    font-size: 14px;
    color: gray;
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    padding-bottom: 8px;
}

    .hdrLink:hover {
        background-color: rgb(229,233,240);
    }

.alink {
    color: cornflowerblue;
}

    .alink:hover {
        border-bottom: solid 1px gray;
        cursor: pointer;
    }

.redlink {
    color: red;
}

    .redlink:hover {
        border-bottom: solid 1px gray;
        cursor: pointer;
    }

.redx {
    color: red;
    padding:5px;
    cursor:pointer;
}

    .redx:hover {
        background-color: rgb(229,233,240);
    }

.greenlink {
    color: green;
}

    .greenlink:hover {
        border-bottom: solid 1px gray;
        cursor: pointer;
    }


.xnavlink {
    color: gray;
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.borderBottom {
    border-bottom: solid 2px silver;
}

.anavlink {
    color: rgb(31,41,67);
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(229,233,240);
}

.navlink {
    cursor: pointer;
    color: rgb(31,41,67);
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .navlink:hover {
        background-color: rgb(229,233,240);
    }

.navlinkSelected {
    cursor: pointer;
    color: rgb(31,41,67);
    font-weight:bold;
    padding-left: 30px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(229,233,240);
}

    .navlinkSelected:hover {
        background-color: rgb(229,233,240);
    }

.navlinkLeft {
    cursor: pointer;
    color: rgb(31,41,67);
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .navlinkLeft:hover {
        background-color: rgb(229,233,240);
    }

.navlinkLeftSelected {
    cursor: pointer;
    color: rgb(31,41,67);
    background-color: whitesmoke;
    border: solid 2px rgb(229,233,240);
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .navlinkLeftSelected:hover {
        background-color: rgb(229,233,240);
    }


.navsect {
    cursor: pointer;
    color: rgb(31,41,67);
}

    .navsect:hover {
        background-color: rgb(229,233,240);
    }

.folder0 {
    padding-left: 10px
}

.folder1 {
    padding-left: 50px
}

.folder2 {
    padding-left: 90px
}

.folder3 {
    padding-left: 130px
}

.normal {
    font-weight: normal;
    font-size: 12px;
    color: black;
}

.closeLink {
    font-weight: normal;
    font-size: 12px;
    color: steelblue;
    padding: 5px;
}

    .closeLink:hover {
        border: solid 1px steelblue;
    }
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: cornflowerblue;
    cursor: pointer;
}


.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

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

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}





input[name="multifile"] {
    position: absolute;
    left: 10px;
    top: 4px;
    opacity: 0;
    width: 100%;
}

input[name="replacefile"] {
    position: absolute;
    left: 10px;
    top: 4px;
    opacity: 0;
    width: 100%;
}

.multifile_dropzone {
    position: absolute;
    left: 20px;
    top: 0px;
    bottom: 0;
    width: 100%;
    border: solid 0px red;
}

.lblmultifile {
    padding-left: 10px;
    display: inline-block;
    position: relative;
}

.file_total__badge {
    background-color: white;
    border-radius: 2px;
    color: maroon;
    padding: 1px 3px;
    font-size: 8px;
    position: relative;
    top: 5px;
    left: -10px;
}

.file_total__badge_empty {
    border-radius: 2px;
    color: white;
    padding: 1px 3px;
    font-size: 5px;
    position: relative;
    top: 5px;
    left: -70%;
}

.file_total__badge_inner {
    left: -25%;
}

.file_total__badge {
    background-color: white;
    border-radius: 2px;
    color: maroon;
    padding: 1px 3px;
    font-size: 8px;
    position: relative;
    top: 5px;
    left: -10px;
}

.file_total__badge_empty {
    border-radius: 2px;
    color: white;
    padding: 1px 3px;
    font-size: 5px;
    position: relative;
    top: 5px;
    left: -70%;
}

.file_total__badge_inner {
    left: -25%;
}

.wizardList:hover {
    background-color: #E0E0E0;
    border-radius: 10px;
    cursor: pointer;
}

#onboardingProjectTable {
    height: 100%;
}

#onboardingProjectTable_leftPanel {
    overflow-y: auto;
    background-color: #304767;
    height: 100%;
    color: white;
}

/*left-side-start*/
.left-heading {
    color: #fff;
}

.steps-content {
    margin-top: 30px;
    color: #fff;
}

    .steps-content p {
        font-size: 12px;
        margin-top: 15px;
    }

.progress-bar {
    list-style: none;
    background-color: #304767;
    margin-top: 30px;
    font-size: 13px;
    font-weight: 700;
    counter-reset: container 0;
}

    .progress-bar li {
        position: relative;
        margin-left: 40px;
        margin-top: 50px;
        counter-increment: container 1;
        color: #4f6581;
    }

        .progress-bar li::before {
            content: counter(container);
            line-height: 25px;
            text-align: center;
            position: absolute;
            height: 25px;
            width: 25px;
            border: 1px solid #4f6581;
            border-radius: 50%;
            left: -40px;
            top: -5px;
            z-index: 10;
            background-color: #304767;
        }


        .progress-bar li::after {
            content: '';
            position: absolute;
            height: 90px;
            width: 2px;
            background-color: #4f6581;
            z-index: 1;
            left: -27px;
            top: -70px;
        }


        .progress-bar li.active::after {
            background-color: #fff;
        }

        .progress-bar li:first-child:after {
            display: none;
        }

        /*.progress-bar li:last-child:after{*/
        /*  display:none;  */
        /*}*/
        .progress-bar li.active::before {
            color: #fff;
            border: 1px solid #fff;
        }

        .progress-bar li.active {
            color: #fff;
        }

.d-none {
    display: none;
}







/*right-side-start*/
.main {
    display: none;
}

.active {
    display: block;
}

.main {
    padding: 40px;
}

    .main small {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2px;
        height: 30px;
        width: 30px;
        background-color: #ccc;
        border-radius: 50%;
        color: yellow;
        font-size: 19px;
    }

.nextBackBtn {
    height: 40px;
    width: 100px;
    border: none;
    border-radius: 5px;
    background-color: #0075ff;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}

.step-h {
    display: none;
}

.active {
    display: block;
}

.blueHdr {
    background-color: #304767;
    color: white;
    padding: 5px;
    border-bottom: solid whitesmoke 4px;
    text-align: center;
}

.task_List {
    font-size: 20px;
    cursor: pointer;
    padding-left: 10px;
}

    .task_List:hover {
        font-size: 20px;
        background-color: #304767;
        color: white;
        border-radius: 10px;
    }

.lightbluehover:hover {
    background-color: #F0F8FF;
}

.worksheet {
    width: 500px;
    overflow-x: scroll;
}




.wizard-steps {
    list-style: none;
    background-color: #304767;
    font-size: 13px;
    font-weight: 700;
    counter-reset: container 0;
}

    .wizard-steps li {
        position: relative;
        margin-left: 40px;
        margin-top: 50px;
        counter-increment: container 1;
        color: #4f6581;
    }

        .wizard-steps li::before {
            content: counter(container);
            line-height: 25px;
            text-align: center;
            position: absolute;
            height: 25px;
            width: 25px;
            border: 1px solid #4f6581;
            border-radius: 50%;
            left: -40px;
            top: -5px;
            z-index: 10;
            background-color: #304767;
        }


        .wizard-steps li::after {
            content: '';
            position: absolute;
            height: 90px;
            width: 2px;
            background-color: #4f6581;
            z-index: 1;
            left: -27px;
            top: -70px;
        }


        .wizard-steps li.active::after {
            background-color: #fff;
        }

        .wizard-steps li:first-child:after {
            display: none;
        }

        /*.wizard-steps li:last-child:after{*/
        /*  display:none;  */
        /*}*/
        .wizard-steps li.active::before {
            color: #fff;
            border: 1px solid #fff;
        }

        .wizard-steps li.active {
            color: #fff;
        }

.floatright {
    float: right;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 5px;
}

.showHideAll {
    display: block;
}

#helpSearchInput {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    outline: none;
    width: 80%;
    padding-bottom: 5px;
}

    #helpSearchInput:focus {
        border-color: #007bff;
    }

.questionModalPopUp:hover .floating-modal {
    opacity: 1;
}
/*code: 07192024 4:00pm This is the floating-modal class in site.css that is added and removed when you hover over or move out of the answer div*/
.floating-modal {
    position: sticky;
    top: 5px;
    background-color: white;
    border: 1px solid #ccc;
    /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
    width: 85%;
    margin: 0px;
    /* height:70px; */ /*2024 code: 07232024 5:00pm*/
}

/*@media (max-width: 600px) {
    .floating-modal {
        width: 95%;  More space on smaller screens 
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);  Lighter shadow 
    }
}*/
.preview-question { /*code: 01242025 1:00pm*/
    display: "";
}
/*code:20012025 1:00pm*/
.navigation-buttons {
    /*position: fixed;*/ /* Fix the position relative to the viewport */
    /*bottom: 50px;*/ /* Distance from the bottom of the screen */
    /*left: 200px;*/ /* Distance from the left side of the screen */
    margin-left: 35px;
    display: flex; /* Arrange buttons flexibly */
    flex-direction: row; /*Stack buttons vertically */
    gap: 10px; /*Space between buttons */
    /*border: 1px solid #ccc;*/ /* Optional border */
    z-index: 1001; /* Ensure it appears above other elements */
    background-color: transparent; /* Transparent background */
}

    .navigation-buttons button {
        padding: 5px 10px;
        border: none;
        background-color: #007bff;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        width: auto; /* Adjusts width based on content */
    }

        .navigation-buttons button:hover {
            background-color: #0056b3;
        }


/*2024 code: 07232024 5:00pm*/
.floating-modal .navigation-buttons button {
    margin: 0 0px; /* Space between buttons */
}

.remSearch-container {
    position: relative;
}

.remPopup-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0;
    max-height: 250px;
    display: block; /* Initially hidden so this ensures that it's visible */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 330px;
    margin-left: 160px; /*code: 20240807: 0240pm*/ /*code: 20240807: 0400pm*/
    border-radius: 10px;
    margin-top: -10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/*code: 20240802: 0330pm*/
/*code: 20240802: 0310pm.*/
.innerDiv {
    float: right;
    margin-top: -30px;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
}

.xxinnerDiv {
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px
}

[name=navOpts] {
    cursor: pointer;
}
/*code: 20240904 4:02pm SO*/
.questionTD {
    width: 65%;
}
/*code: 20240904 4:02pm SO*/
.answerTD {
    width: 35%;
    border-left: 3px solid white;
}




/*toggle css code: 16012025 3:00pm SO*/

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 30px; /* Halved width */
    height: 17px; /* Halved height */
}

    .toggle-switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 17px; /* Match height for rounded edges */
}

    .slider:before {
        position: absolute;
        content: "";
        height: 13px; /* Halved size */
        width: 13px; /* Halved size */
        left: 2px; /* Adjusted for smaller size */
        bottom: 2px; /* Adjusted for smaller size */
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: #2196f3;
}

    input:checked + .slider:before {
        transform: translateX(13px); /* Adjusted for smaller width */
    }


/*2025 code: 04006025 4:00pm*/
.fileCountBadge {
    background-color: white;
    border-radius: 2px;
    color: maroon;
    padding: 1px 3px;
    font-size: 8px;
    position: relative;
    top: 23px;
    left: -15px;
    border: 0.2px solid gray;
}



img[src*="shared_"] {
    transform: none !important;
    transform-origin: center center !important;
}
.rotateBadge {
    transform: none !important;
    transform-origin: center center !important;
}

/* Add this to your main .css file */

.icon-badge-overlay {
    position: absolute !important;
    display: inline-block !important; /* Force this display type */
    width: 20px !important; /* Assuming the icon should be wider than tall */
    height: 10px !important; /* Adjust these to the icon's natural orientation */
    top: -5px !important;
    left: -20px !important;
    box-sizing: border-box !important;
    /* These reset any problematic inherited styles */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    transform: rotate(-90deg);
}

/* Prevents the tooltip from intercepting mouse events and causing flicker */
.google-visualization-tooltip {
    pointer-events: none !important;
}


/* Form cards */
.cr-card {
    background: #f4f7fb;
    border: 1px solid #d3dce8;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    animation: crFadeUp .22s ease both;
}

    .cr-card:nth-child(2) {
        animation-delay: .05s;
    }

    .cr-card:nth-child(3) {
        animation-delay: .10s;
    }

    .cr-card:nth-child(4) {
        animation-delay: .15s;
    }


#MainWindow {
    height:calc(100% - 50px);
}



/********************************  xChart STYLES **********************************************************/
.dcTbl-wrap {
    height: calc(100% - 5px);
    max-height: calc(100% - 5px);
    width: calc(100% - 25px);
    /*max-width:calc(100% - 50px);*/
    overflow: auto;
    border: 0.5px solid rgba(0,0,0,0.15);
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
}

    .dcTbl-wrap::-webkit-scrollbar {
        width: 6px;
    }

    .dcTbl-wrap::-webkit-scrollbar-track {
        background: transparent;
    }

    .dcTbl-wrap::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 3px;
    }

.dcTbl {
    display: grid;
    /*grid-template-columns: 2fr 1.2fr 1fr 1fr 1fr;*/
    width: 100%;
}




.dcTbl-head {
    display: contents;
}

    .dcTbl-head .cell {
        position: sticky;
        top: 0;
        z-index: 2;
        /*background: #f1efea;*/
        background-image: linear-gradient(white, rgb(229,234,244));
        
        border-bottom: 0.5px solid rgba(0,0,0,0.2);
        font-size: 12px;
        font-weight: 500;
        color: #888780;
        padding: 10px 14px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 2px;
        max-width: 500px;
        /*min-width: 60px;*/
        border: solid 1px whitesmoke;
    }

        .dcTbl-head .cell:hover {
            background-image: linear-gradient(whitesmoke, lightblue);
        }

    .dcTbl-head .cellSorted {
        position: sticky;
        top: 0;
        z-index: 2;
        /*background: #f1efea;*/
        background-image: linear-gradient(white, orange);
        border-bottom: 0.5px solid rgba(0,0,0,0.2);
        font-size: 12px;
        font-weight: 500;
        color: #888780;
        padding: 10px 14px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
        padding: 2px;
        max-width: 500px;
        /*min-width: 60px;*/
        border: solid 1px whitesmoke;
    }

        .dcTbl-head .cellSorted:hover {
            background-image: linear-gradient(orange, white);
        }

    .dcTbl-row {
        display: contents;
    }

.dashedButton {
    width: 100%;
    padding: 11px;
    font-size: 13px;
    border: 1.5px dashed #bbb;
    background: none;
    border-radius: 10px;
    color: #666;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

    .dashedButton:hover {
        border-color: #378ADD;
        color: #378ADD;
        background: #EBF4FD;
    }

    .dashedButton:active {
        background: #d0e8f8;
        border-color: #185FA5;
        color: #185FA5;
    }




/* ── System Administration popup ──────────────────────── */

.ua-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

/* Card base — works with existing .cr-card */
.ua-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    overflow: hidden;
   /* background: whitesmoke;*/
    background: #f4f7fb;
    border: 1px solid #d3dce8;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    animation: crFadeUp .22s ease both;
}

    .ua-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 12px 12px 0 0;
    }

.ua-card-users::before {
    background: #3b82f6;
}

.ua-card-co::before {
    background: #059669;
}

.ua-card-teams::before {
    background: #7c3aed;
}

.ua-card-platform::before {
    background: #d97706;
}

.ua-card-timeout::before {
    background: #64748b;
}

/* Card header row */
.ua-card-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e8f2;
    margin-bottom: 2px;
}

.ua-card-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.ua-icon-blue {
    background: #e6f1fb;
}

.ua-icon-green {
    background: #eaf3de;
}

.ua-icon-purple {
    background: #eeedfe;
}

.ua-icon-amber {
    background: #faeeda;
}

.ua-icon-gray {
    background: #f1efe8;
}

.ua-card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #3b4f6b;
}

/* Full-width buttons — override longblueButton width */
.ua-full-btn {
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.ua-disabled-label {
    font-size: 12px;
    color: #aab;
    font-style: italic;
    padding: 2px 0;
}

/* Timeout card (full width, below grid) */
.ua-timeout-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.ua-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ua-label {
    min-width: 155px;
    font-size: 13px;
    color: #4a5568;
}

.ua-number-input {
    width: 90px;
    border: 1px solid #c5d1e0;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    color: #2c3e5a;
    background: #fff;
}

    .ua-number-input:focus {
        outline: none;
        border-color: #5b8bd5;
        box-shadow: 0 0 0 3px rgba(91,139,213,.12);
    }

.ua-status-msg {
    font-size: 12px;
    color: #6b8cb0;
    min-height: 16px;
    padding-top: 2px;
}
    
    .dcTbl-row .cell {
        padding: 11px 14px;
        color: #1a1a18;
        border-bottom: 0.5px solid rgba(0,0,0,0.08);
        display: flex;
        align-items: center;
        background: #fff;
        transition: background 0.1s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 500px;
        /*min-width: 60px;*/
        border: solid 1px whitesmoke;
    }

    .dcTbl-row:hover .cell {
        background: #f9f8f6;
    }

    .dcTbl-row:last-child .cell {
        border-bottom: none;
    }

.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 99px;
}

.badge-green {
    background: #EAF3DE;
    color: #3B6D11;
}

.badge-amber {
    background: #FAEEDA;
    color: #854F0B;
}

.badge-red {
    background: #FCEBEB;
    color: #A32D2D;
}

.badge-gray {
    background: #F1EFE8;
    color: #5F5E5A;
}

.muted {
    color: #888780;
}

.num {
    font-variant-numeric: tabular-nums;
}

.ug-hidden-cb {
    display: none;
}

.ugSubmitBtn {
    background: #0FA0A0;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
    .ugSubmitBtn:hover {
        background: #12b8b8;
        border-color: rgba(255,255,255,0.7);
    }
.ugDeleteBtn {
    background: #7B1C2E;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
    .ugDeleteBtn:hover {
        background: #9b2439;
        border-color: rgba(255,255,255,0.7);
    }



.ugCancelBtn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

    .ugCancelBtn:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.7);
    }


.ua-nav-btn {
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    background: white;
}

    .ua-nav-btn::after {
        content: '›';
        font-size: 18px;
        color: #8fa1b3;
        line-height: 1;
        transition: transform .15s, color .15s;
    }

    .ua-nav-btn:hover {
        border-color: #0FA0A0 !important;
        color: #0FA0A0 !important;
    }

        .ua-nav-btn:hover::after {
            transform: translateX(3px);
            color: #0FA0A0;
        }

/* Company Group — File Share Warning */
.cg-warning-card {
    background: #FAEEDA;
    border: 1.5px solid #EF9F27;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    color: #633806;
    line-height: 1.55;
    margin-bottom: 14px;
}

.cg-warning-textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1.5px solid #d3dce8;
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    resize: vertical;
    outline: none;
    min-height: 100px;
    transition: border-color .15s, background .15s;
}

.cg-textarea-valid {
    border-color: #3B6D11 !important;
    background: #EAF3DE;
}

.cg-textarea-invalid {
    border-color: #A32D2D !important;
}

.cg-continue-btn {
    background: #EF9F27;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

    .cg-continue-btn:hover {
        background: #d4891f;
    }

/* ── Team Groups two-panel layout ─────────────────── */
.tg-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.tg-panel {
    border: 1px solid #d3dce8;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

.tg-panel-hdr {
    background: #1A2A4A;
    color: #fff;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tg-panel-hdr-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.tg-panel-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: #fff;
}

.tg-panel-body {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.tg-desc-textarea {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid #d3dce8;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: #1a2c42;
    resize: none;
    outline: none;
    min-height: 260px;
    transition: border-color .15s, box-shadow .15s;
}

    .tg-desc-textarea:focus {
        border-color: #0FA0A0;
        box-shadow: 0 0 0 3px rgba(15,160,160,.12);
    }

.tg-company-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: #d3dce8 transparent;
}

/* ── Company Toggles ──────────────────────────────── */
.ct-list-wrap {
    position: relative;
    min-height: 180px;
}

.ct-company-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: #d3dce8 transparent;
}

.ct-admin-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    z-index: 10;
    text-align: center;
}

/* ── Manage Notifications ──────────────────────────── */
.nm-notify-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.nm-teams-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.nm-folder-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: #d3dce8 transparent;
}

.nm-notify-icon {
    font-size: 15px;
    color: #4a5c72;
    flex-shrink: 0;
}

.cr-assign-item.cr-selected .nm-notify-icon {
    color: #0c7a7a;
}

.nm-folder-icon {
    font-size: 13px;
    color: #8fa1b3;
    flex-shrink: 0;
}

.cr-assign-item.cr-selected .nm-folder-icon {
    color: #0FA0A0;
}

/* ── Edit / New User ──────────────────────────────── */
.ue-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

    .ue-team-row .cr-assign-item {
        flex: 1;
        min-width: 0;
    }

.ue-pills-wrap {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    transition: opacity .2s;
}

.ue-pills-disabled {
    opacity: .3;
    pointer-events: none;
}


/* ── NEO Mail ──────────────────────────────────────── */
.mail-layout {
    display: grid;
    grid-template-columns: 200px 300px 1fr;
    height: 100%;
}

.mail-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e0e8f2;
}

    .mail-panel:last-child {
        border-right: none;
    }

.mail-panel-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d3dce8 transparent;
}

/* Folder items */
.mail-folder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 2px 6px;
    border-radius: 8px;
    font-size: 13px;
    color: #4a5c72;
    cursor: pointer;
    transition: background .15s;
}

    .mail-folder-item:hover {
        background: #f4f7fb;
    }

    .mail-folder-item.mail-active {
        background: rgba(15,160,160,.1);
        color: #0FA0A0;
        font-weight: 600;
    }

.mail-folder-badge {
    margin-left: auto;
    background: #0FA0A0;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

/* Message action bar — small pill buttons */
.mail-action-bar {
    display: flex;
    gap: 5px;
    padding: 7px 10px;
    border-bottom: 1px solid #e0e8f2;
    flex-shrink: 0;
}

.mail-action-btn {
    background: #fff;
    border: 1.5px solid #d3dce8;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 11px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    color: #4a5c72;
    cursor: pointer;
    transition: all .15s;
}

    .mail-action-btn:hover {
        border-color: #0FA0A0;
        color: #0FA0A0;
    }

    .mail-action-btn.mail-disabled {
        opacity: .35;
        pointer-events: none;
    }

/* Message list rows */
.mail-msg-item {
    padding: 9px 12px;
    border-bottom: 1px solid #f0f4f8;
    cursor: pointer;
    transition: background .1s;
}

    .mail-msg-item:hover {
        background: #f8fbff;
    }

    .mail-msg-item.mail-selected {
        border-left: 3px solid #0FA0A0;
        background: rgba(15,160,160,.06);
    }

.mail-msg-row1 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
}

.mail-sender {
    font-size: 12.5px;
    font-weight: 600;
    color: #1a2c42;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .mail-sender.mail-read {
        font-weight: 400;
        color: #516275;
    }

.mail-subject-preview {
    font-size: 11.5px;
    color: #8fa1b3;
    padding-left: 22px;
}

.mail-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0FA0A0;
    flex-shrink: 0;
}

/* Preview pane */
.mail-preview-subject {
    font-size: 15px;
    font-weight: 600;
    color: #1a2c42;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f0f4f8;
}

.mail-preview-meta {
    padding: 8px 14px;
    border-bottom: 1px solid #f0f4f8;
    font-size: 12px;
    color: #8fa1b3;
    line-height: 1.8;
}

    .mail-preview-meta span {
        color: #1a2c42;
    }

.mail-preview-body {
    padding: 14px;
    font-size: 13px;
    color: #1a2c42;
    line-height: 1.65;
}

.mail-reply-bar {
    display: flex;
    gap: 7px;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f4f8;
}

/* Header search */
.mail-search-input {
    width: 220px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    outline: none;
}

    .mail-search-input::placeholder {
        color: rgba(255,255,255,0.6);
    }

    .mail-search-input:focus {
        border-color: rgba(255,255,255,0.7);
    }




/* ================================================================
   CMS Login Page 
   ================================================================ */

/* ── PAGE BACKGROUND ───────────────────────────────────────────── */
.lg-outer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 16px 48px; /* was 4px bottom — this is the main culprit */
    background-color: #f4f5f7;
    height: auto;
    /*    min-height: 100vh;*/
    min-height: auto;
    overflow: visible;
    box-sizing: border-box;
    font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
}
/* ── SIGN-IN CARD ──────────────────────────────────────────────── */
.lg-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    padding: 4px 36px 8px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    margin-bottom: 0;
}

.lg-card-title {
    font-size: 26px;
    font-weight: 700;
    color: #1a2a4a;
    text-align: center;
    margin: 0 0 6px 0;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

/* ── FIELD GROUPS ──────────────────────────────────────────────── */
.lg-field-group {
    margin-bottom: 16px;
}

.lg-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.lg-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.lg-field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #9ca3af;
    pointer-events: none;
    line-height: 1;
    user-select: none;
    z-index: 1;
}

.lg-field-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #111827;
    background: #ffffff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    line-height: 1.5;
}

    .lg-field-input:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    .lg-field-input::placeholder {
        color: #9ca3af;
        font-weight: 400;
    }

    /* Password field needs right padding for the eye toggle */
    .lg-field-input.lg-has-eye {
        padding-right: 42px;
    }

.lg-field-eye {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 15px;
    color: #9ca3af;
    user-select: none;
    padding: 4px;
    line-height: 1;
    transition: color 0.12s ease;
    z-index: 1;
}

    .lg-field-eye:hover {
        color: #6b7280;
    }

    .lg-field-eye.lg-eye-visible {
        color: #2563eb;
        opacity: 0.7;
    }

.lg-field-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: -8px;
    margin-bottom: 14px;
    padding-left: 2px;
    line-height: 1.5;
}

/* ── ERROR BOX (invalid credentials) ──────────────────────────── */
.lg-error-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 8px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #991b1b;
    line-height: 1.55;
    box-sizing: border-box;
}

.lg-error-icon {
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.lg-error-text {
    flex: 1;
}

/* ── INFO BOX (IP validation, MFA notice) ──────────────────────── */
.lg-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 8px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.55;
    box-sizing: border-box;
}

.lg-info-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.lg-info-text {
    flex: 1;
}

.lg-info-title {
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

/* "Send Verification Code" button inside IP validation box */
.lg-btn-verify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 13px;
    border: 1.5px solid #93c5fd;
    border-radius: 6px;
    background: #ffffff;
    color: #1e40af;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;
}

    .lg-btn-verify:hover {
        background: #dbeafe;
        border-color: #60a5fa;
    }

/* ── COOKIE / STORAGE NOTICE ───────────────────────────────────── */
.lg-cookie-notice {
    display: none;
    background: #fef9c3;
    border: 1.5px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.5;
    box-sizing: border-box;
}

/* ── PRIMARY BUTTON — Sign In ──────────────────────────────────── */
.lg-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px 20px;
    /*    background: #2563eb;*/
    background: #447ea1;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    letter-spacing: 0.1px;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    margin-bottom: 12px;
    line-height: 1.4;
    -webkit-user-select: none;
    user-select: none;
}

    .lg-btn-primary:hover {
        background: #1d4ed8;
        box-shadow: 0 3px 10px rgba(37,99,235,0.35);
    }

    .lg-btn-primary:active {
        background: #1e40af;
        transform: translateY(1px);
        box-shadow: none;
    }

/* ── SECONDARY LINK — Forgot Password ─────────────────────────── */
.lg-link-secondary {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 0 4px;
    transition: color 0.12s ease;
}

    .lg-link-secondary:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

/* ── CONSENT TEXT (below card) ─────────────────────────────────── */
.lg-consent {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin: 16px auto 10px;
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.65;
    padding: 0 4px;
}

    .lg-consent .lg-alink {
        color: #2563eb;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.12s ease;
    }

        .lg-consent .lg-alink:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

/* ── AUTHORIZED ACCESS TOGGLE ──────────────────────────────────── */
.lg-legal-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1700px;
    width: 100%;
    padding: 11px 16px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    user-select: none;
    box-sizing: border-box;
    transition: background 0.15s ease, border-radius 0.15s ease;
    margin-top: 4px;
}

    .lg-legal-toggle:hover {
        background: #f1f5f9;
    }

    /* When panel is open, square off the bottom corners */
    .lg-legal-toggle.lg-panel-open {
        border-radius: 8px 8px 0 0;
        border-bottom-color: transparent;
    }

.lg-legal-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lg-legal-shield {
    font-size: 15px;
    color: #2563eb;
}

.lg-legal-chevron {
    font-size: 10px;
    color: #6b7280;
    transition: transform 0.2s ease;
    display: inline-block;
    line-height: 1;
}

    .lg-legal-chevron.lg-open {
        transform: rotate(180deg);
    }

/* ── AUTHORIZED ACCESS PANEL ───────────────────────────────────── */
.lg-legal-panel {
    max-width:1700px;
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 14px 16px 16px;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.7;
    box-sizing: border-box;
/*    height:120px;*/
    overflow:auto;
}

.lg-legal-panel-para {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.7;
}

    .lg-legal-panel-para:last-child {
        margin-bottom: 0;
    }

/* Policy links row at the bottom of the panel */
.lg-legal-links {
    margin-top: 8px;
    padding-top: 4px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    align-items: center;
    font-size: 12px;
}

.lg-legal-link {
    color: #2563eb;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.12s ease;
    text-decoration: none;
}

    .lg-legal-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

.lg-legal-sep {
    color: #cbd5e1;
    margin: 0 8px;
    font-size: 12px;
}

/* ── RESET PASSWORD PANEL ──────────────────────────────────────── */
.lg-reset-panel {
    max-width: 480px;
    width: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    box-sizing: border-box;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: none;
}

/* ── PAGE FOOTER ───────────────────────────────────────────────── */
.lg-footer {
    text-align: center;
    margin-top: 24px;
    padding: 16px;
    color: #6b7280;
    font-size: 0.8rem;
    width: 100%;
}
/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .lg-outer {
        padding: 0;
        background-color: #ffffff;
    }

    .lg-card {
        border-radius: 0;
        box-shadow: none;
        padding: 28px 20px 24px;
        border-bottom: 1px solid #f3f4f6;
    }

    .lg-consent,
    .lg-legal-toggle,
    .lg-legal-panel {
        border-radius: 0;
        max-width: 100%;
        border-left: none;
        border-right: none;
    }

        .lg-legal-toggle.lg-panel-open {
            border-radius: 0;
        }

    .lg-footer {
        margin-top: 16px;
    }
}

/* ── RESET / BASE ───────────────────────────────────────────────── */
.pl-page {
    margin: 0;
    padding: 0;
    background-color: #f4f5f7;
    font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #1f2937;
    height:auto;
    box-sizing: border-box;
    overflow:auto;
}

    *, .pl-page * {
        box-sizing: border-box;
    }

/* ── HEADER ─────────────────────────────────────────────────────── */
.pl-header {
    background: #ffffff;
    border-bottom: 3px solid #e8a020; /* gold/orange rule — matches CMS brand */
    padding: 0 40px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl-header-logo {
    height: 40px;
    width: auto;
    display: block;
}

.pl-back-link {
    font-size: 13px;
    font-weight: 500;
    color: #1a2a4a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}

    .pl-back-link:hover {
        color: #2563eb;
        text-decoration: none;
    }

.pl-back-arrow {
    font-size: 14px;
    line-height: 1;
}

/* ── PAGE BODY ──────────────────────────────────────────────────── */
.pl-body {
    max-width: 800px;
    margin: 40px auto 60px;
    padding: 0 20px;
}



/* ── CONTENT CARD ───────────────────────────────────────────────── */
.pl-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    padding: 40px 48px 36px;
    width:100%;
    height:auto;
    overflow:auto;
}

.plOuter {
    max-width: 1500px;
    margin: 40px auto 60px;
    padding: 0 20px;
    box-sizing: border-box;
    overflow:auto;
    height:auto;

}

/* ── DOCUMENT HEADER ────────────────────────────────────────────── */
.pl-doc-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.pl-doc-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a2a4a;
    margin: 0 0 6px 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.pl-doc-date {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

.pl-doc-intro {
    font-size: 14px;
    color: #374151;
    line-height: 1.75;
    margin: 0 0 28px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
}

/* ── SECTIONS ───────────────────────────────────────────────────── */
.pl-section {
    margin-bottom: 22px;
}

.pl-section-heading {
    font-size: 13px;
    font-weight: 700;
    color: #1a2a4a;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.pl-section-body {
    font-size: 15px;
    color: #374151;
    line-height: 1.8;
    margin: 0;
}

    .pl-section-body p {
        margin: 0 0 8px 0;
        font-size: 15px;
    }

        .pl-section-body p:last-child {
            margin-bottom: 0;
            font-size: 15px;
        }

/* Bulleted list inside a section */
.pl-list {
    margin: 6px 0 8px 0;
    padding-left: 20px;
    list-style-type: disc;
}

    .pl-list li {
        font-size: 15px;
        color: #374151;
        line-height: 1.8;
        margin-bottom: 2px;
    }

/* ── VIEW FULL LINK (bottom of card) ────────────────────────────── */
.pl-view-full-wrapper {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
}

.pl-view-full {
    font-size: 15px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.12s ease;
}

    .pl-view-full:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

/* ── CONTACT BLOCK ──────────────────────────────────────────────── */
.pl-contact {
    margin-top: 22px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
}

    .pl-contact strong {
        color: #1a2a4a;
        font-weight: 600;
    }

    .pl-contact a {
        color: #2563eb;
        text-decoration: none;
    }

        .pl-contact a:hover {
            text-decoration: underline;
        }

/* ── FOOTER ─────────────────────────────────────────────────────── */
.pl-footer {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 24px;
    padding-bottom: 16px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pl-header {
        padding: 0 20px;
        height: 56px;
    }

    .pl-body {
        margin: 20px auto 40px;
        padding: 0 12px;
    }

    .pl-card {
        padding: 24px 20px 24px;
        border-radius: 8px;
    }

    .pl-doc-title {
        font-size: 22px;
    }
}