:root {
    --atlas-ink: #252a26;
    --atlas-muted: #687067;
    --atlas-paper: #f4f0e6;
    --atlas-paper-light: #fbf9f3;
    --atlas-olive: #3f4b3e;
    --atlas-olive-dark: #2c352c;
    --atlas-brass: #b49352;
    --atlas-rust: #8b3e32;
    --atlas-border: #d7cfbd;
    --atlas-shadow: 0 12px 30px rgba(48, 45, 36, 0.10);
}

html {
    background: var(--atlas-paper);
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--atlas-ink);
    background-color: var(--atlas-paper);
    background-image:
        linear-gradient(rgba(99, 91, 70, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 91, 70, 0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: #365b70;
}

a:hover {
    color: #243f4e;
}

#header {
    position: relative;
    width: 100%;
    background: var(--atlas-olive-dark);
    color: #fff;
    border-bottom: 3px solid var(--atlas-brass);
}

.viewport-badge {
    position: absolute;
    top: .75rem;
    right: 1rem;
    padding: .28rem .55rem;
    color: #e8ddc3;
    background: rgba(16, 20, 16, .48);
    border: 1px solid rgba(216, 198, 156, .42);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-tools-hidden .admin-only-tool {
    display: none !important;
}

.admin-tools-toggle {
    position: absolute;
    right: 1rem;
    bottom: .75rem;
    padding: .3rem .58rem;
    color: #e8ddc3;
    background: rgba(16, 20, 16, .48);
    border: 1px solid rgba(216, 198, 156, .42);
    border-radius: .3rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
}

.admin-tools-toggle:hover,
.admin-tools-toggle:focus {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: var(--atlas-brass);
    outline: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    min-height: 112px;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

.site-brand,
.site-brand:hover {
    display: inline-flex;
    flex-direction: column;
    color: #fff;
    text-decoration: none;
}

.site-brand__eyebrow {
    margin-bottom: .2rem;
    color: #d8c69c;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.site-brand__title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 4vw, 3.1rem);
    line-height: 1;
    letter-spacing: -.02em;
}

#header a:link, #header a:visited {
    color: #fff;
}

#header a:focus , #header a:hover {
    text-decoration: underline;
}

.site-nav {
    position: relative;
    z-index: 1000;
    background: var(--atlas-paper-light);
    border-bottom: 1px solid var(--atlas-border);
    box-shadow: 0 4px 14px rgba(50, 46, 36, .08);
}

.site-nav__inner {
    overflow-x: auto;
    scrollbar-width: thin;
}

.site-nav__links {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

.site-nav__link {
    display: block;
    padding: .9rem 1rem;
    color: var(--atlas-ink);
    border-bottom: 3px solid transparent;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__link.is-active {
    color: var(--atlas-rust);
    border-bottom-color: var(--atlas-rust);
    text-decoration: none;
}

.site-nav__link.is-active {
    background: #eee8da;
}

.map-page {
    padding-top: 1.5rem;
}

.map-heading {
    width: min(920px, calc(100% - 2rem));
    margin: 0 auto 1rem;
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: rgba(251, 249, 243, .92);
    border: 1px solid var(--atlas-border);
    border-top: 3px solid var(--atlas-brass);
    border-radius: .45rem;
    box-shadow: var(--atlas-shadow);
}

.map-heading__eyebrow {
    margin: 0 0 .25rem;
    color: var(--atlas-rust);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.map-heading__title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.1;
}

.map-heading__date {
    display: block;
    color: var(--atlas-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.15rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
}

.map-heading__title--context {
    margin-top: .55rem;
    color: var(--atlas-muted);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(.9rem, 2vw, 1.15rem);
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.25;
    text-transform: uppercase;
}

.map-heading__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem 1rem;
    margin-top: .55rem;
    color: var(--atlas-muted);
    font-size: .84rem;
    font-weight: 600;
}

.map-heading__meta > * + * {
    position: relative;
}

.map-heading__meta > * + *::before {
    position: absolute;
    left: -.58rem;
    color: var(--atlas-brass);
    content: "\2022";
}

.map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: .65rem;
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto 1rem;
    padding: .85rem;
    background: rgba(251, 249, 243, .94);
    border: 1px solid var(--atlas-border);
    border-radius: .45rem;
    box-shadow: 0 6px 18px rgba(48, 45, 36, .08);
}

.map-toolbar__item,
#main,
#main-rt {
    padding: 0;
    transition: none;
}

.map-toolbar .openbtn {
    min-height: 40px;
    padding: .45rem .75rem;
    font-size: .82rem;
    line-height: 1.25;
}

.map-toolbar__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.map-toolbar__label {
    margin: 0 0 .25rem .1rem;
    color: var(--atlas-muted);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.map-toolbar #mapdateform {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.map-toolbar #mapdateform .form-group,
.map-toolbar #mapdateform .form-actions {
    margin: 0;
}

.map-toolbar input[type="date"] {
    min-height: 40px;
    color: var(--atlas-ink);
    background: #fff;
    border-color: #bdb5a3;
}

.map-toolbar input[type="submit"] {
    min-height: 40px;
}

.date-stepper {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #bdb5a3;
    border-radius: .3rem;
}

.btn-atlas-secondary {
    color: var(--atlas-ink);
    background: #eee8da;
    border: 0;
    border-right: 1px solid #cfc7b6;
    border-radius: 0;
    font-size: .78rem;
    font-weight: 600;
}

.btn-atlas-secondary:last-child {
    border-right: 0;
}

.btn-atlas-secondary:hover,
.btn-atlas-secondary:focus {
    color: var(--atlas-rust);
    background: #e3dac7;
    box-shadow: none;
}

.theater-tree-mobile {
    width: min(680px, calc(100% - 2rem));
    margin: 0 auto .75rem;
}

.theater-tree-desktop,
.theater-tree-mobile {
    color: var(--atlas-ink);
    font-size: .78rem;
}

.theater-tree-card {
    padding: 1rem;
    background: var(--atlas-paper-light);
    border-top: 3px solid var(--atlas-brass);
    box-shadow: var(--atlas-shadow);
}

.theater-tree-card ul,
.theater-tree-mobile ul {
    margin-bottom: 0;
    padding-left: 1.15rem;
}

#footer {
    width: 100%;
    margin-top: 2.5rem;
    padding: 1rem;
    background: var(--atlas-olive-dark);
    color: #e9e3d5;
    border-top: 3px solid var(--atlas-brass);
}

#footer .container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.btn-primary,
.btn-primary:focus {
    color: #fff;
    background: var(--atlas-olive);
    border-color: var(--atlas-olive);
    border-radius: .3rem;
    box-shadow: none;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--atlas-olive-dark);
    border-color: var(--atlas-olive-dark);
}

.modal-content,
.card,
.collapse.show {
    border-color: var(--atlas-border);
    border-radius: .45rem;
}

.image-fallback {
    object-fit: contain;
    background: #eee9dc;
}

.map-frame-row {
    margin-right: 0;
    margin-left: 0;
}

.leaflet-container {
    border: 1px solid #bdb5a3;
    border-radius: .45rem;
    box-shadow: var(--atlas-shadow);
}

.unit-stack-icon-wrap {
    background: transparent;
    border: 0;
}

.unit-stack-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    background: var(--atlas-olive-dark);
    border: 3px solid var(--atlas-brass);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(24, 27, 23, .4);
    font-family: "Open Sans", sans-serif;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.unit-stack-icon:hover {
    color: var(--atlas-olive-dark);
    background: #f4f0e6;
    transform: scale(1.08);
}

.spider-leg {
    stroke-dasharray: 2 3;
}

.leaflet-tooltip.unit-name-tooltip {
    padding: .18rem .38rem;
    color: #f8f5ec;
    background: rgba(44, 53, 44, .96);
    border: 1px solid rgba(180, 147, 82, .75);
    border-radius: .2rem;
    box-shadow: 0 2px 7px rgba(20, 24, 20, .25);
    font-family: "Open Sans", sans-serif;
    font-size: .62rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
}

.leaflet-tooltip-top.unit-name-tooltip::before {
    border-top-color: rgba(44, 53, 44, .96);
}

.leaflet-marker-icon {
    transition: opacity .2s ease;
}

.progress {
    height: .55rem;
    background: #ddd6c7;
    border-radius: 999px;
}

.progress-bar.bg-success {
    background-color: var(--atlas-rust) !important;
}

.stats-summary {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-summary__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    color: #f4f0e6;
    background: var(--atlas-olive-dark);
    border: 1px solid #202820;
    border-top: 3px solid var(--atlas-brass);
    border-radius: .4rem;
    box-shadow: var(--atlas-shadow);
}

.stats-summary__item {
    display: flex;
    flex: 1 1 130px;
    flex-direction: column;
    align-items: center;
    padding: .7rem 1rem;
    border-right: 1px solid rgba(216, 198, 156, .22);
    text-align: center;
}

.stats-summary__item:last-child {
    border-right: 0;
}

.stats-summary__label {
    color: #cfc4aa;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.stats-summary__value {
    margin-top: .12rem;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 600;
}

h1, h2, h3, h4 {
    color: var(--atlas-ink);
    font-family: Georgia, "Times New Roman", serif;
}

.site-header h1,
.site-header h2,
.site-header h3,
.site-header h4 {
    color: #fff;
}

@media (max-width: 767.98px) {
    .site-header__inner {
        min-height: 88px;
        justify-content: center;
        text-align: center;
    }

    .site-brand__eyebrow {
        font-size: .62rem;
    }

    .viewport-badge {
        top: .45rem;
        right: .45rem;
        font-size: .55rem;
    }

    .admin-tools-toggle {
        right: .45rem;
        bottom: .45rem;
        font-size: .55rem;
    }

    .site-nav__inner {
        padding-right: 0;
        padding-left: 0;
    }

    .site-nav__links {
        width: 100%;
    }

    .site-nav__link {
        flex: 1 0 auto;
        padding: .75rem .85rem;
        text-align: center;
    }

    .map-page {
        padding-top: 1rem;
        padding-right: 0;
        padding-left: 0;
    }

    .map-heading,
    .map-toolbar {
        width: calc(100% - 1rem);
    }

    .map-heading {
        padding: 1rem;
    }

    .map-toolbar {
        align-items: stretch;
        gap: .5rem;
        padding: .65rem;
    }

    .map-toolbar__date {
        order: -1;
        flex: 1 0 100%;
        align-items: center;
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--atlas-border);
    }

    .map-toolbar__item {
        flex: 1 1 auto;
    }

    .map-toolbar__item .btn {
        width: 100%;
        min-height: 40px;
        padding-right: .55rem;
        padding-left: .55rem;
        font-size: .72rem;
    }

    .date-stepper {
        order: 5;
        flex: 1 0 100%;
    }

    .date-stepper .btn {
        flex: 1;
        padding: .55rem .25rem;
        font-size: .68rem;
    }

    .map-heading__meta > * + *::before {
        content: "";
    }

    #map,
    #mapnew {
        height: 62vh !important;
        min-height: 430px;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .stats-summary__item {
        flex-basis: 50%;
        border-bottom: 1px solid rgba(216, 198, 156, .22);
    }
}

#branding {
    float: left;
}

#branding h1 {
    padding: 0;
    margin: 0 20px 0 0;
    font-weight: 300;
    font-size: 24px;
    color: #f5dd5d;
}

#branding h1, #branding h1 a:link, #branding h1 a:visited {
    color: #f5dd5d;
}

#branding h2 {
    padding: 0 10px;
    font-size: 14px;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: #ffc;
}

#branding a:hover {
    text-decoration: none;
}

#user-tools {
    float: right;
    padding: 0;
    margin: 0 0 0 20px;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: right;
}

div.breadcrumbs {
    background: #79aec8;
    padding: 10px 40px;
    border: none;
    font-size: 14px;
    color: #c4dce8;
    text-align: left;
}

div.breadcrumbs a {
    color: #fff;
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: #c4dce8;
}

.asteriskField {
    display: none;
}

.customClassForDropDown {
       height: 100px;
       overflow-y: auto;
}

.sidebar,
.sidebar-rt {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 0;
  height: 100%;
  padding-top: 74px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f4f0e6;
  background: var(--atlas-olive-dark);
  box-shadow: 0 0 30px rgba(22, 25, 21, .34);
  transition: width .35s ease;
}

.sidebar {
  left: 0;
  border-right: 3px solid var(--atlas-brass);
}

.sidebar-rt {
  right: 0;
  border-left: 3px solid var(--atlas-brass);
}

.drawer-title {
  margin: 0 1.25rem 1rem;
  padding-bottom: .75rem;
  color: #f4f0e6;
  border-bottom: 1px solid rgba(216, 198, 156, .35);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  letter-spacing: .02em;
}

.sidebar .closebtn,
.sidebar-rt .closebtn {
  position: absolute;
  top: 14px;
  right: 18px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #e5dac0;
  border: 1px solid rgba(216, 198, 156, .45);
  border-radius: 50%;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
}

.sidebar .closebtn:hover,
.sidebar-rt .closebtn:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: var(--atlas-olive);
  color: white;
  padding: 10px 15px;
  border: 1px solid var(--atlas-olive);
}

.openbtn:hover {
  background-color: var(--atlas-olive-dark);
  border-color: var(--atlas-olive-dark);
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin 0.5s; /* If you want a transition effect */
  padding: 10px;
}

#main-sm {
  transition: margin 0.5s; /* If you want a transition effect */
  padding: 10px;
}

#main-rt {
  transition: margin 0.5s; /* If you want a transition effect */
  padding: 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

.menu-ui {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--atlas-paper-light);
  border: 1px solid rgba(216, 198, 156, .75);
  border-radius: .45rem;
  box-shadow: 0 8px 18px rgba(18, 21, 18, .18);
}

.drawer-menu {
  width: calc(100% - 2.5rem);
  margin: 0 1.25rem 1.5rem;
}

.filter-group {
  width: calc(100% - 2.5rem);
  margin: 0 1.25rem 1rem;
}

.menu-ui a,
.sidebar .menu-ui a,
.sidebar-rt .menu-ui a {
  display: block;
  margin: 0;
  padding: .62rem .75rem;
  color: var(--atlas-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--atlas-border);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.menu-ui a:last-child {
  border-bottom: 0;
}

.menu-ui a:hover {
  color: var(--atlas-rust);
  background: #eee8da;
}

.menu-ui a.active,
.menu-ui a.active:hover {
  color: #fff;
  background: var(--atlas-olive);
}

.menu-ui img {
  max-width: 36px;
  object-fit: contain;
}

.customPopup {
    color: #000000;
    font-size:10px;
}

.insignia-img {
    width: 100px;
    height: auto;
    display: block;
    margin: 1rem auto;
    border: 1px solid #444;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    background-color: #f8f8f8;

    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}