#overlay {
    background: #cccccc;
    opacity: 0.5;
    color: #666666;
   
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    display:none;
 


}

#overlay-visible {
    background: #cccccc;
    opacity: 0.5;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
 
}


#spinner {
    position: fixed;
    left: 50%;
    top: 30%;
    z-index: 10000;
    /*margin-top: 20%;*/
    /*margin-left: -20px;*/
}

/* The footer (scripts/footer.html), on every page. It follows the content; on a short page the
   body fills the window and the footer takes the space left, so it sits at the bottom without
   covering anything. Colors are written out because the login pages don't load css/theme.css. */

body:has(> .g-footer) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}

.g-footer {
    flex-shrink: 0;
    margin-top: auto;
    font-size: 12px;
    color: #888;
    border-top: 1px solid #e7eaec;
}

.g-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
}

.g-footer-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
}

.g-footer-brand img {
    opacity: 0.75;
}

.g-footer-dot {
    color: #c2c2c2;
}

/* The build the site runs (GOPS.ReleaseInfo): quiet for a release from master, amber for a
   release from another branch, loud for a development copy, so nobody mistakes one for another. */
.g-footer-version {
    margin-left: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
    cursor: default;
}

.g-footer-version.is-dev {
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
    background: #e8590c;
    border-color: #e8590c;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.18);
}

.g-footer-version.is-branch {
    font-weight: 600;
    color: #8a5a00;
    background: #fff4d6;
    border-color: #f0c35a;
}

.g-footer-version.is-dev::before,
.g-footer-version.is-branch::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    vertical-align: 1px;
    background: currentColor;
    border-radius: 50%;
}

.g-footer-links {
    display: flex;
    gap: 20px;
}

.g-footer-links a {
    color: #888;
}

.g-footer-links a:hover,
.g-footer-links a:focus {
    color: #4a6590;
    text-decoration: none;
}

@media (max-width: 600px) {
    .g-footer-inner {
        flex-direction: column;
        padding: 14px 16px;
    }
}

@media print {
    .g-footer {
        display: none;
    }
}

.form-horizontal label {
    margin-top: 0.1rem;
    padding-right: 0px;
    text-align: right;
}

.btn-xs {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

textarea#MESSAGETEXT {
    height: 150px !important;
}


#personnel-edit-form input:read-only, .form-control:disabled, .form-control[readonly], #edit-form input:read-only, {
    background: #EEEEEE;
    border: solid 1px;
    border-color: #CCCCCC;
}



#personnel-edit-form .form-control, #edit-form .form-control, #simple-edit-form .form-control, .edit-form .form-control {
    height: 1.8em !important;
    padding: 2px !important;
}



.ReactTable .rt-td {
    padding: 2px 5px !important;
}


div.ReactTable {
    height: 400px;
    width: 100%;
}

div.AttendanceGrid {
    height: 300px !important;
    width: 100%;
}

div.MaintenanceGrid {
    height: 200px !important;
    width: 100%;
}

/* Grid beside the data entry fields: use the height of the window */
div.MaintenanceGrid.MaintenanceGridTall {
    height: calc(100vh - 220px) !important;
    min-height: 400px;
}

.tda-modal {
    width: 75% !important;
    max-width: none !important;
 
}

.third-modal {
    width: 30% !important;
    max-width: none !important;
}

.status-modal {
    width: 40% !important;
    max-width: none !important;
}

.half-modal {
    width: 50% !important;
    max-width: none !important;
}

.tda-table-div {
    overflow: auto !important;
    height: 500px;
}

.tda-table {
    width: 100%;
    border-collapse: collapse;
}

/* TDA tables (TDA maintenance, the TDA assignment page and the TDA report), in the site
   theme (theme.css). The Excel download styles the same classes in ViewExcel.aspx. */
.tda-table td {
    border: 0;
    border-bottom: 1px solid var(--g-border-light);
}

.tda-table thead th {
    padding: 6px;
    border: 0;
    border-bottom: 1px solid var(--g-border);
    font-size: var(--g-font-label);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--g-text-label);
    background-color: var(--g-bg-subtle); /* opaque, so rows don't show through the sticky header */
    position: sticky;
    top: 0;
    z-index: 1;
}

.tda-table .bdeRow {
    font-weight: 600;
    background-color: var(--g-heading-bg);
    color: var(--g-heading-text);
}

.tda-table .paraRow {
    font-weight: 600;
}

.tda-table .rowEven,
.tda-table .rowOdd {
    background-color: var(--g-bg);
}

.tda-table .tda-selectable:hover,
.tda-maint-table .rowEven:hover,
.tda-maint-table .rowOdd:hover {
    background-color: var(--g-bg-subtle);
}

/* The selected slot on the TDA assignment page, as in the personnel search. */
.tda-table tr.hilight-row td {
    background-color: var(--g-accent-soft);
}

.tda-table tr.hilight-row td:first-child {
    box-shadow: inset 3px 0 0 var(--g-accent);
}

   
/*
.rowEven:hover, .rowOdd:hover {
    background-color: #e1e1e1;
}

.rowEven:hover td, .rowOdd:hover td {
        background-color: #e1e1e1;
    }
    */
.hilight-row {
    background-color: skyblue !important;
}



.month tr td {
   
    height: 25px;
    width: 25px;
    text-align: center;
    border: 1px solid lightgray;
}

.month .month-name {
    background-color: #DDDDDD;
    font-weight: bold;

}

.month .dow {
    font-weight: bold;
    background-color: #ccddfd;
}


.hr-2 {
    background-color: #ff9090;
    font-weight: bold;
}

.hr-4 {
    background-color: #Ffff80;
    font-weight: bold;
}

.hr-8 {
    background-color: #80FF80;
    font-weight: bold;
}

.swal2-container {
    z-index: 10000 !important;
}


.modal-body .ibox-title {
    background-color: #202080;
    font-weight: bold;
    color: #FFFFFF;
}

textarea#DESCRIPTION.form-control.w-100, textarea#SKILLS.form-control.w-100 {
    height: 70px !important;
    margin-bottom: 5px;
}


.deleteIcon {
    color: darkred;
    font-size: 18px;
    padding-top: 7px !important;
}

.deleteIcon:hover {
    color: red;
    font-size: 18px;
    padding-top: 7px !important;
}

.deleteIconInvisible {
    
    font-size: 18px;
    padding-top: 7px !important;
    visibility: hidden
}

.personnel-autocomplete {

    background-image: url('/images/loader.gif');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position-x: right;
}

.mission-row td {
    border: 1px solid #AAAAAA;
    /*padding-left: 0px;
    padding-right: 0px;*/
}

.mission-row-selected {
    background-color: yellow;
}

.mission-table {
    table-layout: auto;
}

.mission-table thead {
    /*padding-left: 0px;
    padding-right: 0px;*/
    border: 1px solid #AAAAAA;
    
    background-color: navy;
}

.mission-table td {
    /*padding-left: 0px;
    padding-right: 0px;*/
    border: 1px solid #AAAAAA;
    
  
}

.draft-mission {
    background-color: #BC3A3A;
    color: white;
    font-weight: bold;
}

.g1-mission {
    background-color: #F5FA03;
    color: #C02020;
    font-weight: bold;
}

.g3-mission {
    background-color: #999B49;
    color: white;
    font-weight: bold;
}

.otag-mission {
    background-color: #FC5E05;
    color: white;
    font-weight: bold;
}

.approved-mission {
    background-color: #111AE7;
    color: #F5F2A0;
    font-weight: bold;
}

.started-mission {
    background-color: white;
    color: #EC2F2F;
    font-weight: bold;
}

.ended-mission {
    background-color: #149C08;
    color: white;
    font-weight: bold;
}

.cancelled-mission {
    background-color: black;
    color: #FF0303;
    font-weight: bold;
}

.strength-table {
    margin-left: auto;
    margin-right: auto;
}

    .strength-table td {
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #AAAAAA;
    }

    .correct-attendance-table td {
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #AAAAAA;
    }

    .correct-attendance-table .label {
        text-align: right;
        font-weight: bold;
        background-color: #DDDDDD;
        font-size: 13px;
    }

.correct-attendance-table .name {
    font-weight: bold;
    padding-right: 5px;
    background-color: #DDDDDD;
    font-size: 13px;
    white-space: nowrap;
}

.correct-attendance-table input {
    font-size: 13px;
    padding : 2px;
    border: none;
}

.modified-max-weight-cell,
.modified-max-weight-cell input {
    background-color: #fff3cd !important;
}

/* Weights have at most three digits, so the inputs only need room for those. Without the number
   spinners the female and male tables fit side by side; the arrow keys still change the value. */
.max-weight-table input {
    width: 3.25rem;
    padding: 0.25rem;
    text-align: center;
    -moz-appearance: textfield;
}

.max-weight-table input::-webkit-outer-spin-button,
.max-weight-table input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.max-weight-table th,
.max-weight-table td {
    padding: 0.25rem;
    text-align: center;
    vertical-align: middle;
}

.correct-attendance-table thead th {
    font-weight: bold;
    background-color: navy;
    font-size: 13px;
    color: white;
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* Don't forget this, required for the stickiness */
}







.report-table td {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #AAAAAA;
    font-size: 11px;
}

.report-table .label {
    text-align: right;
    font-weight: bold;
    background-color: #DDDDDD;
    font-size: 11px;
}

.report-table .name {
    font-weight: bold;
    padding-right: 5px;
    background-color: #DDDDDD;
    font-size: 11px;
    white-space: nowrap;
}

.report-table input {
    font-size: 11px;
    padding: 2px;
    border: none;
}

.report-table thead th {
    font-weight: bold;
    background-color: navy;
    font-size: 11px;
    color: white;
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* Don't forget this, required for the stickiness */
}









.my-custom-scrollbar {
    position: relative;
    height: 450px;
    overflow: auto;
}

.annexa-scrollbar {
    position: relative;
    height: 450px;
    overflow: auto;
}

.scrollable-table {
    position: relative;
    /*height: 450px;*/
    overflow: auto;
}



.table-wrapper-scroll-y {
    display: block;
}


#table-1 thead {
    position: -webkit-sticky;
    position: sticky;
}

div.MissionGrid {
    height: 500px !important;
    width: 100%;
}

.batch-row-selected {
    background-color: yellow !important;
}

.strength-table thead th {
    font-weight: bold;
    background-color: navy;
    font-size: 13px;
    color: white;
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    border: 1px solid white;
}

.tr-even {
    background-color: white;
}

.tr-odd {
    background-color: lightgray;
}

.tr-total {
    background-color:darkgreen;
    color: white;
    font-weight: bold;
}

.danger-row {
    /*border-color: red;
    border-width: 3px;
    border-style: solid;*/
    background-color: rgba(255, 200, 200, 0.70);
}

.success-row {
 
    background-color: rgba(200, 255, 200, 0.70);
}

.danger-row-selected {
    background-color: rgba(255, 160, 60, 0.70) !important;
}

.badge-green {
    background-color: green;
    color: white;
}


.form-control-textarea {
    background-color: #e9ecef;
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 2px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    font-size: 14px;
}

.form-control-textarea-notes {
    
    background-image: none;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 2px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    font-size: 14px;
}


.red-background {
    background-color: #FFE0E0 !important;
}

.report-row-1 {
    background-color: #FFDDDD;
    font-weight: bold;
}

.report-row-2 {
    background-color: #DDDDFF;
    font-weight: bold;
}

.table-search-box {
    display: inline;
    margin-bottom: 8px;

}

/* TDA maintenance: edit in place */
.tda-maint-div {
    height: calc(100vh - 320px);
    min-height: 400px;
}

.tda-maint-table td {
    padding: 2px 6px;
    vertical-align: middle;
}

.tda-maint-table .tda-editing td {
    background-color: #fff3cd;
}

.tda-maint-table .tda-add-row td {
    border: none;
    padding: 0 6px 6px;
}

.tda-maint-table .tda-actions {
    width: 1%;
}

.tda-maint-table .tda-actions .btn {
    padding: 0 6px;
    line-height: 1.6;
}

.tda-maint-table .tda-move .btn {
    padding: 0 4px;
}

.tda-maint-table .tda-actions-spacer {
    display: inline-block;
    width: 1.9rem;
}

.tda-maint-table .tda-key-input {
    width: 4.5rem;
}

.tda-maint-table .tda-assigned {
    white-space: nowrap;
}

/* TDA maintenance: titles (level 1), subtitles (level 2) and their sub-titles (level 3) */
.tda-maint-table .tda-para-level-1 td {
    background-color: darkgreen;
    color: white;
}

.tda-maint-table .tda-para-level-2 td {
    background-color: #3d8b3d;
    color: white;
}

.tda-maint-table .tda-para-level-3 td {
    background-color: #c8e6c9;
    color: #1b3d1b;
}

.tda-maint-table .tda-para-level-1 .tda-para-title { padding-left: 0.5rem; }
.tda-maint-table .tda-para-level-2 .tda-para-title { padding-left: 2rem; }
.tda-maint-table .tda-para-level-3 .tda-para-title { padding-left: 3.5rem; }

.tda-maint-table .tda-para-number {
    display: inline-block;
    min-width: 3.5rem;
}

.tda-maint-table .tda-para-level-3 .btn-outline-light {
    color: #1b3d1b;
    border-color: #1b3d1b;
}

.tda-maint-table .paraRow.tda-editing td {
    background-color: #fff3cd;
    color: inherit;
}

/* TDA maintenance: unsaved changes */
.tda-change-bar {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    background-color: var(--g-bg-subtle);
}

.tda-change-bar-pending {
    border-color: #ffc107;
    background-color: #fff8e1;
    font-weight: bold;
}

.tda-maint-table .tda-row-new td:first-child {
    border-left: 4px solid #28a745;
}

.tda-maint-table .tda-row-changed td:first-child {
    border-left: 4px solid #ffc107;
}

.tda-maint-table tr.rowEven.tda-row-new td,
.tda-maint-table tr.rowOdd.tda-row-new td {
    background-color: #e8f5e9;
}

.tda-maint-table tr.rowEven.tda-row-changed td,
.tda-maint-table tr.rowOdd.tda-row-changed td {
    background-color: #fff8e1;
}

/* TDA maintenance: help dialog, one action per item with its icon in front */
.tda-help-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.tda-help-list li {
    display: flex;
    align-items: flex-start;
    padding: 0.4rem 0;
    border-bottom: 1px solid #eeeeee;
}

.tda-help-list li:last-child {
    border-bottom: none;
}

.tda-help-icon {
    flex: 0 0 4rem;
    text-align: center;
    color: var(--g-accent);
}

.tda-help-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 1rem;
    vertical-align: middle;
}

.tda-help-swatch-new {
    background-color: #e8f5e9;
    border-left: 4px solid #28a745;
}

.tda-help-swatch-changed {
    background-color: #fff8e1;
    border-left: 4px solid #ffc107;
}

.tda-help-button {
    pointer-events: none;
}

/* TDA report (ReportUtils.WriteTDA), laid out like TDA maintenance */
.tda-report-table .tda-vacant {
    color: var(--g-text-muted);
    font-style: italic;
}

.tda-report-table .tda-no-title {
    font-weight: normal;
    font-style: italic;
}

/* TDA report: company and platoon headings, shown when the report covers more than one; the
   paragraph titles are indented as on TDA maintenance. */
.tda-report-table .tda-company-row td {
    background-color: var(--g-heading-bg);
    color: var(--g-heading-text);
    font-weight: 600;
}

.tda-report-table .tda-platoon-row td {
    background-color: var(--g-subheading-bg);
    color: var(--g-subheading-text);
    font-weight: 600;
}

.tda-report-table .tda-company-row .tda-para-title { padding-left: 0.5rem; }
.tda-report-table .tda-platoon-row .tda-para-title { padding-left: 0.5rem; }

/* TDA assignment page and slot picker (TDATable.jsx): clickable slots; in the dialog the table
   takes most of the window, on the page TDATable sizes it to reach the bottom. */
.tda-report-table .tda-selectable {
    cursor: pointer;
}

.tda-table-div.tda-modal-div {
    height: 65vh;
}

/* User menu at the top right of the navbar (MainPage.jsx renderCurrentUser): the compact soldier
   banner (components/shared/SoldierBanner.jsx), then the items. The frame and items come from the
   g-menu classes in theme.css. */
.dropdown-menu.user-menu {
    width: 290px;
}

.user-menu .sb-banner {
    margin-bottom: 6px;
}