/* =============== *
 * ## Variables ##
 * =============== */

:root {
   --list-width: 690px;
   --main-height: 460px;
   --map-width-small: 690px;
}


/* =========== *
 * ## Fonts ##
 * =========== */

@font-face {
   font-family: "Open Sans";
   src: url("fonts/OpenSans/OpenSans-Bold.ttf");
   font-weight: bold;
}

@font-face {
   font-family: "Open Sans";
   src: url("fonts/OpenSans/OpenSans-BoldItalic.ttf");
   font-style: italic;
   font-weight: bold;
}

@font-face {
   font-family: "Open Sans";
   src: url("fonts/OpenSans/OpenSans-Italic.ttf");
   font-style: italic;
}

@font-face {
   font-family: "Open Sans";
   src: url("fonts/OpenSans/OpenSans-Regular.ttf");
   font-weight: normal;
}

@font-face {
   font-family: "Azeret Mono";
   src: url("fonts/AzeretMono/AzeretMono.ttf");
   font-weight: normal;
}

@font-face {
   font-family: "Azeret Mono";
   src: url("fonts/AzeretMono/AzeretMono-italic.ttf");
   font-style: italic;
}

@font-face {
   font-family: "Droid Sans Mono";
   src: url("fonts/DroidSans/DroidSansMono.ttf");
   font-style: normal;
}


/* ============= *
 * ## General ##
 * ============= */

html, body {
   height: 100%;
   width: 100%;
}

body {
   background-color: #808E89;
   margin: 0px;
   font-family: 'Open Sans', sans-serif;
   font-size: 10px;
   margin-bottom: 0px !important;
}

.container-column,
.container-row {
   display: flex;
   overflow: hidden;
}

.container-column { flex-direction: column; }
.container-row { flex-direction: row; }

.dropdown-component.list-open .list-toggle .icon {
   transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
}

/* ================= *
 * ## Admin Pages ##
 * ================= */

.admin-div .header .title,
.page-container > .page > .header {
   padding-left: 10px;
}

.admin-div .body {
   padding: 10px;
}

.admin-div .admin-table {
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
   margin-bottom: 15px;
   max-height: 400px;
}

.admin-div .panel {
   margin-top: 10px;
}

.admin-div .tab-table {
   max-height: 217px;
}

.admin-div .tab-table-large {
   max-height: 391px;
}

.admin-div .admin-table th {
   text-align: left;
}

.admin-div .select {
   padding-bottom: 20px;
}

.admin-div select[name="nmt"] + button { margin-left: 10px; }

.admin-div .subheader {
   font-size: 14px;
   font-weight: bold;
   padding: 20px 0 10px 0;
}
.admin-div .subheader:first-child { padding-top: 0; }
.admin-div .admin-table.result { margin-bottom: 0; }
.admin-div form .filters { margin-bottom: 20px; }

.admin-div .system_table {
   margin-bottom: 10px;
}

.admin-div .system_table tr {
   height: 24px;
   line-height: 24px;
   vertical-align: top;
}

.admin-div .system_table .system_label {
   text-align: left;
   width: 50px;
}

.admin-div .system_table .system_options {
   align-items: center;
   display: flex;
}

.admin-div .system_table .system_options input {
   margin-left: 20px;
   margin-right: 5px;
}
.admin-div .system_table .system_options input:first-child { margin-left: 0; }
.admin-div #new_qcvalue { margin-left: 10px; }


/* =================== *
 * ## Admin Enquiry ##
 * =================== */

.admin-enquiry {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.admin-div button { text-transform: lowercase; }

.admin-enquiry .admin-table td {
   font-weight: normal;
}

.admin-enquiry .body {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding-bottom: 0px;
}

.admin-enquiry .enquiry-row {
   display: flex;
   flex: 0;
   width: 100%;
}

.admin-enquiry .tabs-row {
   flex: 1;
}

.admin-enquiry .enquiry { overflow-y: auto; }

.admin-enquiry .enquiry,
.admin-enquiry .extras {
   height: 490px;
}

.admin-enquiry #enquiry {
   max-width: 620px;
   min-width: 620px;
}

.admin-enquiry .enquiry_help {
   flex: 0 1 1200px;
   height: 100%;
   overflow: auto;
}

.admin-enquiry .tabContainer {
   height: 100%;
   margin-top: 0;
   padding: 20px 0 10px 0;
}

.admin-enquiry .tabContainer .buttonContainer button {
   font-size: 1.5em;
   font-weight: bold;
   text-transform: initial;
}

.admin-enquiry .tabContainer .tabPanel {
   height: calc(100% - 38px);
   max-height: 230px;
}

.admin-enquiry .tabContainer .tabPanel { text-align: left; }
.admin-enquiry .tabContainer .tabPanel .phonecalls,
.admin-enquiry .tabContainer .tabPanel .phonecalls .admin-table,
.admin-enquiry .tabContainer .tabPanel .issues,
.admin-enquiry .tabContainer .tabPanel .issues .admin-table {
   height: 100%;
}


/* ============================ *
 * ## Admin Enquiry (extras) ##
 * ============================ */

.admin-enquiry .extras {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding-left: 20px;
}

.admin-enquiry .extras .pinfo-container { flex: 0; }
.admin-enquiry .extras .issue-list-container {
   display: flex;
   flex: 1;
   flex-direction: column;
}

.admin-enquiry .extras .issue-list-container > h2 { flex: 0; }
.admin-enquiry .extras .issue-list-container .issues {
   flex: 1;
   overflow: hidden;
}

.admin-enquiry .extras .issue-list-container .issues .admin-table {
   height: 100%;
}

/* ====================== *
 * ## Casper Component ##
 * ====================== */

.casper-component {
   display: flex;
   flex-direction: column;
}

.casper-component.cInactive { pointer-events: none; }

.casper-component .role-content {
   border-radius: 0 0 6px 6px;
   flex: 1;
   overflow: hidden;
   position: relative;
   width: 100%;
}
.casper-legacy-component .role-content { max-height: 307px; }

.casper-component .role-content .content-wrapper,
.f3-rendered.role-content .content-wrapper {
   float: left;
   height: 100%;
   overflow: hidden;
   padding: 5px;
   position: relative;
   width: 100%;
}
.casper-component .role-content .content-wrapper .legacy-chart-component {
   height: 100%;
   overflow: hidden;
}

.admin-div > .header,
.casper-component .role-subheader {
   display: flex;
   flex: 0;
   z-index: 2;
}

.admin-div > .header,
.casper-component .role-subheader,
.columns-dropdown .column-assignment-container > .header,
.page-container > .page > .header {
   border-radius: 6px 6px 0 0;
   border-style: solid;
   border-width: 0 0 1px 0;
   width: 100%;
}

.casper-component .role-subheader .role-icon {
   display: none;
   flex: 0 1 24px;
   height: 28px;
}

.casper-component .role-subheader .role-title { padding-left: 5px; }

.admin-div .header .title,
.casper-component .role-subheader .role-title {
   flex: 1;
}

.admin-div .header .title,
.casper-component .role-subheader .role-title,
.columns-dropdown .column-assignment-container > .header,
.page-container > .page > .header .title {
   font-weight: bold;
   height: 27px;
   line-height: 27px;
   text-transform: uppercase;
}

.casper-component .role-subheader .pagination-component,
.casper-component .role-subheader .role-tools {
   display: flex;
   flex-direction: row;
}

.casper-component .role-subheader .pagination-component {
   pointer-events: none;
}

.casper-component .role-subheader .pagination-component .role-display {
   line-height: 27px;
   white-space: nowrap;
}

.casper-component .role-subheader .pagination-component .role-next,
.casper-component .role-subheader .pagination-component .role-prev {
   cursor: pointer;
   pointer-events: all;
   width: 10px;
}

.casper-component .role-subheader .role-icon {
   order: 0;
   padding: 5px;
}
.casper-component .role-subheader .role-title { order: 0; }
.casper-component .role-subheader .role-tools {order: 99; }

.casper-component .role-subheader .role-tools > * {
   float: left;
   padding: 0 6px;
   position: relative;
}

.casper-component .role-subheader .role-tools .dropdown-component .display-wrapper .list-toggle,
.casper-component .role-subheader .role-tools .tool-button .icon {
   width: 16px;
}

.casper-component .role-subheader .role-tools .tool-button { cursor: pointer; }
.casper-component .role-subheader .role-tools .tool-button .icon {
   float: left;
   height: 100%;
   position: relative;
   transition: fill .33s;
   -webkit-transition: fill .33s;
};

/* ============================= *
 * ## Casper Legacy Component ##
 * ============================= */

.casper-legacy-component .content-wrapper > * { height: 100%; }

.casper-legacy-component .content-wrapper .part {
   float: left;
   overflow: auto;
   margin: 0 3px;
   position: relative;
   width: 100%;
}
.casper-legacy-component .content-wrapper .part:first-child {
   margin-left: 0;
   z-index: 1;
}
.casper-legacy-component .content-wrapper .part:last-child {
   margin-right: 0;
   z-index: 0;
}

.casper-legacy-component.allow_overflow { z-index: 9999 !important; }

.casper-legacy-component.allow_overflow .role-content { z-index: 2; }
.casper-legacy-component.allow_overflow .role-subheader { z-index: 1; }

.casper-legacy-component.allow_overflow .role-content,
.casper-legacy-component.allow_overflow .content-wrapper {
   overflow: visible;
}

.casper-legacy-component.allow_overflow .content-wrapper .part { position: unset; }

.casper-legacy-component.block-editing .field {
   border-bottom: none;
   cursor: default !important;
   pointer-events: none !important;
}

.casper-legacy-component.issue .role-subheader .role-icon {
   fill: none;
   stroke-width: 4px;
}

.casper-legacy-component.issue .role-lock {
   flex: 1;
   font-weight: bold;
   line-height: 28px;
   margin-left: 20px;
   opacity: 0;
   order: 90;
   padding-left: 12px;
   pointer-events: none;
   position: relative;
   white-space: nowrap;
}
.casper-legacy-component.issue .role-lock:after {
   content: "\01F441";
   font-size: 16px;
   left: 0;
   pointer-events: all;
   position: absolute;
   transform: translate(-50%, 0);
}
.casper-legacy-component.issue.locked .role-lock { opacity: 1 }
.casper-legacy-component.issue .role-title { flex: 0; }

.casper-legacy-component.nmt-details .table-header.header { display: none; }
.casper-legacy-component.nmt-details img.photo {
   float: left;
   position: relative;
   width: 100%;
}

.casper-legacy-component.nmt-details .content-wrapper {
   display: flex;
   flex-direction: column;
}

.casper-legacy-component.nmt-details .nmt-photo {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

/* ===================== *
 * ## Chart Component ##
 * ===================== */

.page .panels .casper-chart-component .role-content .content-wrapper,
.page .panels .f3-rendered .role-content .content-wrapper {
   padding: 3px;
}

.page .panels .noise-chart.noise-levels-chart .role-content .content-wrapper,
.page .panels .noise-chart.noise-events-chart .role-content .content-wrapper {
   /padding-top: 14px;
}

/* ## vertical profile charts ## */
.vp-chart .role-content .content-wrapper { padding-top: 0; }
.vp-chart .role-listitems {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding: 5px 0;
}

.vp-chart .radiobutton-container {
   display: flex;
   flex-direction: column;
}

.vp-chart .radiobutton-container .buttons,
.vp-chart .radiobutton-container .title {
   width: 100%;
}

.vp-chart .radiobutton-container .buttons {
   display: flex;
   flex-direction: row;
}

.vp-chart .radiobutton-container .title {
   display: flex;
   font-weight: bold;
   justify-content: end;
   padding-right: 5px;
}

body > .vertical-profile-settings.ui-popup {
   opacity: 0;
}

/* ## noise level charts ## */
.noise-level-canvas-chart .role-content .content-wrapper {
   display: flex;
   flex-direction: column;
   padding-bottom: 0px;
}

.noise-chart .role-tools .dropdown-component.list-open:after { border-width: 0 1px; }
.noise-chart .role-tools .dropdown-component .role-listitems { border-width: 1px; }

/* =========================== *
 * ## CPA Display Component ##
 * =========================== */

.cpa-display.cpa-display-component .visual-container > .display-container { height: 75px; }
.cpa-display.cpa-display-component .visual-container { padding: 0 0 20px 0; }
.cpa-display.cpa-display-component .role-from-display {
   height: 24px;
   width: 24px;
}


/* ================ *
 * ## Dashboards ##
 * ================ */

.dashboard-header {
   float: left;
   font-size: 16px;
   line-height: 30px;
   padding: 0 6px;
   position: relative;
   text-shadow: 1px 1px 0px #141a17;
   text-transform: uppercase;
   white-space: nowrap;
}


/* =========== *
 * ## Tools ##
 * =========== */

.role-tools > .gui-button .role-button {
   cursor: pointer;
   height: 100%;
   stroke-width: 0;
   width: 19px;
}

.role-tools > .gui-button .role-button .icon {
   height: 100%;
   pointer-events: none;
   width: 100%;

   transition: fill .33s;
}

.role-tools > .coupling-button .role-button {
   width: 16px;
}

.role-tools > .scope-reload-button .role-button { width: 16px; }

.change-columns-button {
   cursor: pointer;
   height: 100%;
}

.change-columns-button .role-button {
   display: flex;
   flex-direction: row;
   height: 100%;
   justify-content: space-between;
   padding: 8px;
   width: 28px;
}

.change-columns-button .role-button .column {
   border-radius: 2px;
   height: 100%;
   width: 15%;
}


/* ==================== *
 * ## Tools Dropdown ##
 * ==================== */

.role-tools .dropdown-component.list-open:after {
   border-style: solid;
   border-width: 0 0 0 1px;
   content: "";
   height: 100%;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
}
.role-tools .dropdown-component.list-open:not(:last-child):after { border-right-width: 1px; }

.role-tools .dropdown-component.list-open:before {
   bottom: -1px;
   content: "";
   height: 2px;
   left: 1px;
   position: absolute;
   width: calc(100% - 2px);
   z-index: 9999;

   background: #FFF;
}

.role-tools .dropdown-component .list-container { float: right; }

.role-tools .dropdown-component .role-listitems {
   border-style: solid;
   border-width: 1px 0 1px 1px;
}
.role-tools .dropdown-component:not(:last-child) .role-listitems { border-right-width: 1px; }
.role-tools .dropdown-component .role-listitems > * { cursor: pointer; }

.role-tools .dropdown-component .list-container .gui-button {
   flex-direction: row;
   opacity: 1;
   padding: 0 5px;
   pointer-events: all;

   transition: opacity .25s;
}

.role-tools .dropdown-component .list-container .gui-button[disabled] {
   opacity: .5;
   pointer-events: none;
}

.role-tools .dropdown-component .list-container .gui-button .role-button {
   height: 22px;
   order: 1;
   overflow: hidden;
   padding: 2px 0;
   stroke-width: 0px;
   width: 16px;
}
.role-tools .dropdown-component .list-container .gui-button .icon {
   height: 100%;
   pointer-events: none;
   width: 100%;
}
.role-tools .dropdown-component .list-container .gui-button .icon.radar-icon:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   background-color: #FF00FF;
   width: 100%;
   height: 100%;
}

.role-tools .dropdown-component .list-container .gui-button .role-label {
   flex: 1;
   line-height: 22px;
   order: 0;
   padding-right: 6px;
   text-align: right;
   transition: color .33s;
   white-space: nowrap;
}

.role-tools .dropdown-component .tip-container { height: 1px; }
.role-tools .dropdown-component .lc-collapsed + .tip-container { height: 0px; }


/* ===================== *
 * ## Export Dropdown ##
 * ===================== */

.export-dropdown-component .export-button {
   display: flex;
   flex-direction: row;
   gap: 5px;
   padding: 0 5px;
}

.export-dropdown-component .export-button .icon {
   height: 22px;
   opacity: 1;
   order: 1;
   padding: 3px;
   width: 22px;
   transition: opacity .33s;
}

.export-dropdown-component .export-button:hover .icon { opacity: 1; }

.export-dropdown-component .export-button .label {
   flex: 1;
   font-weight: normal;
   line-height: 22px;
   order: 0;
   text-align: right;
   transition: color .33s;
   white-space: nowrap;
}


/* ============= *
 * ## Buttons ##
 * ============= */

/* ## radio  ## */
.radio-button .role-button #center {
   opacity: .5;

   transform: scale(0);
   transform-origin: center center;
   transition: opacity .25s, transform .25s;

   -webkit-transform: scale(0);
   -webkit-transform-origin: center center;
   -webkit-transition: opacity .25s, transform: 25s;
}
.radio-button:not(.checked):hover .role-button #center {
   transform: scale(.75);
   -webkit-transform: scale(.75);
}

.radio-button.checked .role-button #center {
   opacity: 1;
   transform: scale(1);
   -webkit-transform: scale(1);
}


/* ================ *
 * ## Grid areas ##
 * ================ */

.casper-component.aircraft { grid-area: page_c2; }
.casper-component.client { grid-area: page_c3; }
.casper-component.flight { grid-area: page_c1; }
.casper-component.flightext { grid-area: page_c1; }
.casper-component.issue { grid-area: page_c2; }
.casper-component.meteo { grid-area: page_c3; }
.casper-component.movements { grid-area: page_c1; }
.casper-component.runwayuse { grid-area: page_c1; }
.casper-component.noise-event { grid-area: page_c2; }
.casper-component.noise-events-chart { grid-area: ch_br; }
.casper-component.noise-levels-chart { grid-area: ch_tr; }
.casper-component.vp-inbound { grid-area: ch_tl; }
.casper-component.vp-outbound { grid-area: ch_bl; }

/* overwrites */
#page[data-page="flights_overview"] .casper-component.noise-event { grid-area: page_c4; }


/* ## - ## \/ Move to layout.css ## - ## */
/* ========== *
 * ## Page ##
 * ========== */

.page-container {
   flex: 1;
   z-index: 0;
}

.page-container > .page {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   float: left;
   height: 100%;
   padding-bottom: 50px;
   overflow: hidden;
   position: relative;
   width: 100%;

   transition: padding .33s;
}

.page-container > .page.contain {
   overflow: hidden;
   padding-bottom: 0;
}

.casper-tc-closed .page-container > .page { padding-bottom: 50px; }
.casper.tc-open .page-container > .page { padding-bottom: 130px; }

.page-container > .page.contain .body {
   height: 100%;
   overflow: hidden;
}

.page .main {
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   clear: left;
   display: flex;
   float: left;
   height: var(--main-height);
   max-width: calc(100vw - 30px);
   position: relative;
}

.page .main.full { height: 100%; }

.page .main .lists {
   max-width: calc(100% - var(--map-width-small));
   position: relative;
}

.page .main .lists .coupling-list,
.page .main .lists .overview-list {
   height: 100%;
}

.page .main .lists .coupling-list .role-list-container .list-row,
.page .main .lists .overview-list .role-list-container .list-row {
   font-family: "Droid Sans Mono";
   line-height: 20px;
}

.page .panels {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   float: left;
   padding: 10px 10px 0 10px;
   position: relative;
   width: 100%;
}

.page .panels > * {
   height: 335px;
   margin-bottom: 5px;
   margin-left: 5px;
}
.page .panels > *:first-child { margin-left: 0; }

.page .panels .column.nc_hidden {
   margin-right: 0;
}

.page .panels .column > * {
   clear: both;
   float: left;
   position: relative;
}
.page .panels .column > *:not(:last-child) { margin-bottom: 5px; }
.page .panels .noise-wrapper {
   border-radius: 6px;
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
}
.page .panels .casper-chart-component {
   height: 165px;
   width: 245px;
}

.page .panels .casper-chart-component.enlarged {
   height: 335px;
   width: 495px;
}

.page .panels .casper-chart-component.nc_hidden {
   opacity: 0;
   pointer-events: none;
   position: absolute;
}

.page .panels > .casper-legacy-component { width: 226px; }
.page .panels > .cpa-display {
   height: 165px;
   width: 245px;
}
.page .panels > .casper-legacy-component.flightext { width: 455px; }
.page .panels > .casper-legacy-component.movements { width: 455px; }
.page .panels > .casper-legacy-component.runwayuse { width: 455px; }
.page .panels > .casper-legacy-component.atis { width: 455px; }
.page .panels > .casper-legacy-component.issue { width: 605px; }
.page .panels > .casper-legacy-component.legacynoiselevel { width: 455px; }
.page .panels > .rt-audio-component { width: 500px; }
.page .panels .casper-chart-component.noise-direction { width: 300px; height: 335px; }

.page #pageSettings {
   display: none;
   background-color: #FFFFFF;
   box-sizing: border-box;
   float: left;
   overflow: hidden;
   padding: 10px;
   position: relative;
   width: 100%;
   z-index: 2;
}

.page #pageSettings .flex-row .flex-column {
   border-style: solid;
   border-width: 0 0 0 1px;
   float: left;
   margin-left: 20px;
   padding-left: 20px;
   position: relative;
}


/* ==================== *
 * ## Page (reports) ##
 * ==================== */

.page[data-page="reports"] .main {
   height: auto;
   padding: 10px;
}

.page[data-page="reports"] .main form { padding-bottom: 10px; }
.page[data-page="reports"] .main form table tr { line-height: 24px; }
.page[data-page="reports"] .main form table tr td:first-child { padding-right: 10px; }


/* =============== *
 * ## Page View ##
 * =============== */

.page-view-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   height: 100%;
   left: 0;
   position: relative;
   width: 100%;
}

.page-view-container.page-view-transition {
   left: -100%;
   transition: left 2s;
}

.page-view-container .page-view {
   flex: 0 0 100%;
   height: 100%;
}

.page-view-container .page-view.page-carousel-current { order: 0; }
.page-view-container .page-view.page-carousel-next { order: 1; }
.page-view-container .page-view.page-carousel-inactive { order: 999; }


/* ===================== *
 * ## Section Carousel ##
 * ===================== */

.section-carousel-container {
   --sc-gap: 10px;
   display: block;
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.section-carousel {
   display: flex;
   flex-wrap: nowrap;
   height: 100%;
   position: relative;
   width: 100%;
}

.section-carousel[data-direction="bottom"],
.section-carousel[data-direction="top"] {
   flex-direction: column;
}

.section-carousel[data-direction="left"],
.section-carousel[data-direction="right"] {
   flex-direction: column;
}

.section-carousel[data-direction="bottom"] { bottom: 0; }
.section-carousel[data-direction="left"] { left: 0; }
.section-carousel[data-direction="right"] { right: 0; }
.section-carousel[data-direction="top"] { top: 0; }

.section-carousel[data-direction="bottom"] .section-carousel-current { transform: translate(0, 0); }
.section-carousel[data-direction="buttom"] .section-carousel-next {
   margin-top: var(--sc-gap);
   transform: translate(0, calc(0px - var(--sc-gap)));
}

.section-carousel[data-direction="left"] .section-carousel-current { transform: translate(0, 0); }
.section-carousel[data-direction="left"] .section-carousel-next {
   margin-right: var(--sc-gap);
   transform: translate(calc(0px - var(--sc-gap)), 0);
}

.section-carousel[data-direction="right"] .section-carousel-current { transform: translate(0, 0); }
.section-carousel[data-direction="right"] .section-carousel-next {
   margin-left: var(--sc-gap);
   transform: translate(var(--sc-gap), 0);
}

.section-carousel[data-direction="top"] .section-carousel-current { transform: translate(0, 0); }
.section-carousel[data-direction="top"] .section-carousel-next {
   margin-bottom: var(--sc-gap);
   transform: translate(0, var(--sc-gap))
}

.section-carousel .section {
   flex: 0 0 100%;
   height: 100%;
   width: 100%;
}

.section-carousel .section > .grid-container { padding: 0; }

.section-carousel[data-direction="bottom"].section-transition .section-carousel-current,
.section-carousel[data-direction="bottom"].section-transition .section-carousel-next,
.section-carousel[data-direction="left"].section-transition .section-carousel-current,
.section-carousel[data-direction="left"].section-transition .section-carousel-next,
.section-carousel[data-direction="right"].section-transition .section-carousel-current,
.section-carousel[data-direction="right"].section-transition .section-carousel-next,
.section-carousel[data-direction="top"].section-transition .section-carousel-current,
.section-carousel[data-direction="top"].section-transition .section-carousel-next {
   transition: transform 2s;
}


.section-carousel[data-direction="bottom"].section-transition {
   bottom: -100%;
   transition: bottom 2s;
}
.section-carousel[data-direction="bottom"].section-transition .section-carousel-current { transform: translate(0, var(--sc-gap)); }
.section-carousel[data-direction="bottom"].section-transition .section-carousel-next { transform: translate(0, 0); }

.section-carousel[data-direction="left"].section-transition {
   left: -100%;
   transition: left 2s;
}
.section-carousel[data-direction="left"].section-transition .section-carousel-current { transform: translate(var(--sc-gap), 0); }
.section-carousel[data-direction="left"].section-transition .section-carousel-next { transform: translate(0, 0); }

.section-carousel[data-direction="right"].section-transition {
   right: -100%;
   transition: right 2s;
}
.section-carousel[data-direction="right"].section-transition .section-carousel-current { transform: translate(calc(0px - var(--sc-gap)), 0); }
.section-carousel[data-direction="right"].section-transition .section-carousel-next { transform: translate(0, 0); }

.section-carousel[data-direction="top"].section-transition {
   top: -100%;
   transition: top 2s;
}
.section-carousel[data-direction="top"].section-transition .section-carousel-current { transform: translate(0, calc(0px - var(--sc-gap))); }
.section-carousel[data-direction="top"].section-transition .section-carousel-next { transform: translate(0, 0); }

.section-carousel .section.section-carousel-current { order: 0; }
.section-carousel .section.section-carousel-next { order: 1; }
.section-carousel .section.section-carousel-inactive { order: 999; }


/* ========= *
 * ## Map ##
 * ========= */

.page .map-container {
   flex: 1;
   float: left;
   height: 100%;
   position: relative;
}

.page .map-container .casper-map { z-index: 0; }
.page .map-container .casper-map[data-map-interaction="area-select"] .casper-map-tiles.leaflet-container,
.page .map-container .casper-map[data-map-interaction="distance"] .casper-map-tiles.leaflet-container,
.page .map-container .casper-map[data-map-interaction="line-select"] .casper-map-tiles.leaflet-container,
.page .map-container .casper-map[data-map-interaction="marker"] .casper-map-tiles.leaflet-container {
   cursor: url('../images/cursor_interaction.png') 7 7, auto;
}

.page .map-container .casper-map.map-interaction[data-map-interaction="area-select"] .casper-map-tiles.leaflet-container,
.page .map-container .casper-map.map-interaction[data-map-interaction="distance"] .casper-map-tiles.leaflet-container,
.page .map-container .casper-map.map-interaction[data-map-interaction="line-select"] .casper-map-tiles.leaflet-container,
.page .map-container .casper-map.map-interaction[data-map-interaction="marker"] .casper-map-tiles.leaflet-container {
   cursor: url('../images/cursor_interaction.png') 7 7, auto !important;
}


.page .map-container .map-controls {
   display: grid;
   height: 100%;
   pointer-events: none;
   position: absolute;
   width: 100%;
   z-index: 1;

   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   grid-template-areas: 
    "top_left top_right"
    "bottom_left bottom_right";
}

.casper-map.map-scale-nautic .leaflet-control-scale-line { text-transform: uppercase; }
.casper-map.f3-rendered .leaflet-control-scale-line { font-family: "Open Sans", sans-serif !important; }


/* =============== *
 * ## Map Sizes ##
 * =============== */

.page .main[map-size] .map-container,
.map-fullscreen-container .map-container {
   pointer-events: all;
}

.page .main[map-size="flexible"] .map-container { min-width: var(--map-width-small); }

.page .main[map-size="large"] {
   height: calc(var(--main-height) * 2);
   width: auto;
}
.page .main[map-size="large"] .lists { max-width: calc(100% - (var(--map-width-small) * 2)); }

.page .main[map-size="large"] .map-container {
   max-width: calc(var(--map-width-small) * 2);
   min-width: calc(var(--map-width-small) * 2);
   width: calc(var(--map-width-small) * 2);
}

.page .main[map-size="small"] { width: auto; }
.page .main[map-size="small"] .map-container {
   max-width: var(--map-width-small);
   min-width: var(--map-width-small);
   width: var(--map-width-small);
}

.page .main[map-size="small"] .lists {
   flex: 1;
}

.map-fullscreen-container {
   display: flex;
   height: 100vh;
   left: 0;
   pointer-events: none;
   position: fixed;
   top: 0;
   width: 100vw;
   z-index: 997;
}


/* ====================== *
 * ## Location Overlay ##
 * ====================== */

.location-label { border-width: 0; }


/* ======================= *
 * ## Locations Overlay ##
 * ======================= */

.locations-layer .location-container .map-icon-container .icon {
   background-color: #684C82;
   border-color: #4B2E66;
}

.locations-layer .location-container .map-icon-container[data-home-location="true"] .map-icon,
.locations-layer .role-label_container .map-icon-container .map-icon-label[data-home-location="true"],
.locations-layer[data-showhomeranges="false"] .location-container .map-icon-container[data-home-location="true"] .ranges {
   display: none !important;
}


/* ================== *
 * ## Map Controls ##
 * ================== */

.leaflet-control-container .leaflet-bottom .leaflet-control-scale {
   margin-left: 10px;
   margin-bottom: 10px;
}

.map-controls .map-controls-section {
   display: flex;
   pointer-events: none;
   position: absolute;
}

.map-controls .bottom-left {
   bottom: 10px;
   grid-area: bottom_left;
   left: 10px;
}

.map-controls .bottom-right {
   bottom: 20px;
   grid-area: bottom_right;
   right: 10px;
}

.map-controls .top-left {
   grid-area: top_left;
   left: 10px;
   top: 10px;
}

.map-controls .top-right {
   grid-area: top_right;
   right: 10px;
   top: 10px;
   justify-content: flex-end;
}

.map-controls .top-right .map-controls-button-container {
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   display: flex;
   flex: 0;
   flex-direction: row;
   position: relative;
}

.map-controls .top-right .map-controls-button-container > .map-controls-button:not(.map-options-control) { min-width: 30px; }
/*.map-controls .top-right .map-controls-button-container > div.location-marker-popup { min-width: 26px; }*/

.map-controls .top-right .map-controls-button-container > .map-controls-button { position: relative; }
.map-controls .top-right .map-controls-button-container > .map-controls-button + .map-controls-button:before {
   content: "";
   display: block;
   height: 10px;
   left: 0;
   position: absolute;
   top: 50%;
   width: 1px;
   transform: translate(0,-50%);
}

.map-controls .top-right .map-controls-button-container > .map-controls-button:hover:before,
.map-controls .top-right .map-controls-button-container > .map-controls-button:hover + .map-controls-button:before,
.map-controls .top-right .map-controls-button-container > .map-controls-button.checked:before,
.map-controls .top-right .map-controls-button-container > .map-controls-button.checked + .map-controls-button:before,
.map-controls .top-right .map-controls-button-container > .dropdown-component.list-open:before,
.map-controls .top-right .map-controls-button-container > .dropdown-component.list-open + .map-controls-button:before {
   display: none;
}

.map-controls .top-right .map-controls-button-container > .dropdown-component .list-toggle .icon {
   transition: transform .33s;
   -webkit-transition: -webkit-transform .33s;
}

.map-controls .map-controls-button > .role-list,
.map-controls .map-options-control > .role-list {
   padding-top: 15px;
}

/*.map-controls .map-controls-button > .role-list > .list-container,*/
.map-controls .map-controls-button-container > .dropdown-component > .role-list > .list-container {
   border-radius: 6px;
}
.map-controls .map-controls-button-container > .dropdown-component.list-open > .role-list > .list-container {
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
}

.map-controls .map-controls-button {
   height: 30px;
   pointer-events: all;
}

.casper-map.map-interaction + .map-controls,
.casper-map.map-interaction + .map-controls .map-controls-button {
   pointer-events: none;
}

.casper-map:not([data-map-interaction="default"]) .casper-map-layers > *:not(.casper-map-interaction-layer),
.casper-map:not([data-map-interaction="default"]) .casper-map-layers > *:not(.casper-map-interaction-layer) .map-icon,
.casper-map[data-map-interaction="default"].map-dragging .casper-map-layers > *,
.casper-map[data-map-interaction="default"].map-dragging .casper-map-layers > * .map-icon {
   pointer-events: none;
}

.casper-map[data-map-interaction="marker"] .casper-map-layer.locations-layer .map-icon {
   pointer-events: auto;
}

.casper-map .map-icon-label .annotation,
.casper-map .map-shape-label .annotation {
   white-space: pre;
}

.map-controls .map-controls-button:not(.dropdown-component) .icon {
   cursor: pointer;
   padding: 8px;
}
.map-controls .map-controls-button.reset-button .role-button .icon,
.map-controls .map-controls-button.save-button .role-button .icon {
   padding: 7px;
}

.map-controls .map-controls-button:not(.dropdown-component) .role-button,
.map-controls .map-controls-button:not(.dropdown-component) .role-button .icon {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.map-controls .map-controls-button .map-controls-button-title {
   border-radius: 6px;
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   font-weight: bold;
   left: 50%;
   margin-top: 12px;
   opacity: 0;
   padding: 5px 10px;
   pointer-events: none;
   position: absolute;
   text-transform: uppercase;
   top: 100%;
   transform: translate(-50%, 0);
   width: 150px;

   background: var(--white);
}
.map-controls .map-controls-button .map-controls-button-title:after {
   content: "";
   height: 8px;
   left: 50%;
   position: absolute;
   top: 0;
   width: 8px;

   transform-origin: center center;
   transform: translate(-50%, -50%) rotate(-45deg);

   background-color: var(--white);
}

.map-controls .map-controls-button:hover .map-controls-button-title { opacity: 1; }

.map-controls .map-legend-container {
   border-radius: 4px 0 4px 4px;
   box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
   opacity: 0;
   padding: 10px;
   width: 300px;

   transition: opacity .33s;
}

.map-controls .map-legend-container .legend-item-group { order: 0; }
.map-controls .map-legend-container .legend-item-group .legend-item-label { text-transform: uppercase; }
.map-controls .map-legend-container .role-title {
   order: 1;
   text-align: right;
   text-transform: uppercase;
}

/* ## interaction buttons ## */
.map-controls .interaction-buttons { display: flex; }

.map-controls .interaction-buttons .map-interaction-button,
.map-controls .screenshot-buttons,
.map-controls .location-search {
   width: 30px;
}

/* ## search location ## */
.map-controls .map-controls-button .search-location-component {
   float: left;
   padding: 10px 0;
   position: relative;
   width: 300px;
}

.map-controls .map-controls-button .search-location-component .search-location-input { padding: 0 10px; }

.map-controls .search-location-component .search-location-input,
.map-controls .search-location-component .search-location-input .button-container {
   display: flex;
}

.map-controls .search-location-component .role-clearInput,
.map-controls .search-location-component .role-search {
   cursor: pointer;
   height: 22px;
   width: 22px;
}

.map-controls .search-location-component .role-clearInput { padding: 4px; }
.map-controls .search-location-component .role-search { padding: 3px; }

.map-controls .search-location-component .role-clearInput .icon,
.map-controls .search-location-component .role-search .icon {
   pointer-events: none;
}

.map-controls .search-location-component .search-location-input .button-container .inactive { display: none; }

.map-controls .search-location-component .input-container { flex: 1; }
.map-controls .search-location-component .location-input {
   border: 0;
   line-height: 22px;
   width: 100%;
}

.map-controls .search-location-component .role-ac-list { top: 25px; }
.map-controls .search-location-component .role-ac-list .search-location-autocomplete-container {
   border-radius: 5px 0 5px 5px;
   box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
   overflow: hidden;
}

.map-controls .search-location-component .role-ac-list .pac-item:first-child { border-top: 0; }
.map-controls .search-location-component .role-ac-list .pac-item { padding: 0 10px; }

/* when searching */
.map-controls .lc-expanded .search-location-component.input-searching .role-ac-list { overflow: visible; }
.map-controls .search-location-component.input-searching .role-ac-list .tip-container {
   left: 0;
   top: -15px;
   width: 30px;
}


/* ## dropdown component ## */
.map-controls .dropdown-component .list-toggle { padding: 8px; }
.map-controls .dropdown-component.list-open .list-toggle .icon {
   transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
}

.map-controls .dropdown-component .role-list .tip {
   left: 50%;
   top: 25px;
}
.map-controls .dropdown-component.list-open .role-list .tip { top: 15px; }

/* ## location search ## */
.map-controls .location-search .role-list .list-container.lc-expanded { overflow: initial; }
.map-controls .location-search .role-list .list-container.lc-expanded .role-listitems { overflow: visible; }

/* ## map options ## */
.map-controls .map-options-control > .display-wrapper .list-toggle { padding: 4px; }
.map-controls .map-options-control > .display-wrapper .label {
   font-weight: bold;
   line-height: 30px;
   margin-left: 8px;
   text-transform: uppercase;
   white-space: nowrap;
}

.map-controls .role-listitems { overflow-x: hidden; }

.map-controls .map-options-container {
   display: flex;
   flex-direction: column;
   float: left;
   font-size: 9px;
   padding: 10px 0;
   position: relative;
}

.map-controls .map-options-container .map-options {
   display: flex;
   flex-direction: row;
   float: left;
   position: relative;
   width: 100%;
}

.map-controls .map-options .map-options-column {
   border-style: solid;
   border-width: 0 0 0 1px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   height: 290px;
   padding: 0 10px;
}
.map-controls .map-options .map-options-column:first-child {
   border-width: 0;
}

.map-controls .map-options-column .map-options-section {
   display: flex;
   flex-direction: column;
   max-height: 100%;
   overflow: hidden;
}
.map-controls .map-options-column .map-options-section:first-child { padding-top: 0; }

.map-controls .section-header,
.map-controls .map-options-button,
.map-controls .map-options-group {
   float: left;
   position: relative;
   width: 100%;
}

.map-controls .map-options-group .role-listitems { overflow-y: hidden; }

.map-controls .section-header {
   font-weight: bold;
   padding-bottom: 5px;
   text-transform: uppercase;
   white-space: nowrap;
}

.map-controls .section-content {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
}

.map-controls .map-options-button {
   cursor: pointer;
   flex-direction: row;
   height: 22px;
}

.map-controls .map-options-button .role-button,
.map-controls .map-options-group .role-master-switch {
   height: 100%;
   overflow: hidden;
   width: 12px;
}

.map-controls .map-options-button .role-button .icon,
.map-controls .map-options-group .role-master-switch .icon {
   height: 100%;
   width: 100%;
}

/* ## checkbox ## */
.map-controls .map-options-button.checkbox .role-button .icon,
.map-controls .map-options-button.group-checkbox .role-button .icon,
.map-controls .map-options-group .role-master-switch .icon {
   padding: 1px;
   opacity: 0;
   overflow: visible;
   stroke-width: 4px;

   transition: opacity .25s;
}

.map-controls .map-options-button.checkbox:not(.checked):hover .role-button .icon,
.map-controls .map-options-button.group-checkbox:not(.checked):hover .role-button .icon {
   opacity: .5;
}
.map-controls .map-options-button.checkbox.checked .role-button .icon,
.map-controls .map-options-button.group-checkbox.checked .role-button .icon {
   opacity: 1
}

.map-controls .map-options-button .additional-info,
.map-controls .map-options-button .role-label,
.map-controls .map-options-group .label {
   font-weight: bold;
   line-height: 22px;
   text-transform: uppercase;
   white-space: nowrap;
}

.map-controls .map-options-button .role-label,
.map-controls .map-options-group .label {
   padding-left: 10px;
}

.map-controls .map-options-button .additional-info
{
   font-style: italic;
   color: var(--grey-dark);
   max-width: 100px;
   overflow: hidden;
   padding-left: 5px;
   text-overflow: ellipsis;
}

.map-controls .map-options-group .map-options-button .label { padding-left: 20px; }

/* ## map-options-group ## */
.map-controls .map-options-group .display-wrapper .label { padding-left: 22px; }
.map-controls .map-options-group .display-wrapper .role-button { z-index: 1; }
.map-controls .map-options-group .role-master-switch {
   cursor: pointer;
   left: 0;
   position: absolute;
   top: 0;
   z-index: 2;
}
.map-controls .map-options-group .role-master-switch .icon { pointer-events: none }
.map-controls .map-options-group.switch-off .role-master-switchhover .icon,
.map-controls .map-options-group.switch-semi-on .role-master-switch .icon {
   opacity: .5;
}
.map-controls .map-options-group.switch-on .role-master-switch .icon,
.map-controls .map-options-group.switch-semi-on .role-master-switch:hover .icon {
   opacity: 1;
}

.map-controls .map-options-group .display-wrapper .list-toggle {
   height: 22px;        /* Somewhat magic numbers but flex and SVG elements don't play together well */
   padding: 7px;
   width: 22px;         /* Somewhat magic numbers but flex and SVG elements don't play together well */
}

.map-controls .map-options-group .display-wrapper .list-toggle .icon {
   transform: rotate(0deg);
   transition: transform .33s;

   -webkit-transform: rotate(0deg);
   -webkit-transition: transform .33s;
}

.map-controls .map-options-group.list-open .display-wrapper .list-toggle .icon { transform: rotate(180deg); }
.map-controls .map-options-group .role-list {
   position: relative;
   top: 0;
}

/* ## screenshot buttons ## */
.map-controls .screenshot-button,
.map-controls .screenshot-button .role-button {
   float: right;
   position: relative;
}

.map-controls .screenshot-button .role-button {
   cursor: pointer;
   display: flex;
   flex-direction: row-reverse;
   height: 30px;
}

.map-controls .screenshot-button[data-value='issue'] { display: none; }

.map-controls .screenshot-button .role-button .label {
   font-weight: bold;
   flex: 1;
   line-height: 30px;
   padding-left: 8px;
   text-transform: uppercase;
   white-space: nowrap;
}

.map-controls .screenshot-button .role-button .icon {
   height: 100%;
   padding: 8px;
   width: 30px;
}


/* ============================ *
 * ## Map Controls (compass) ##
 * ============================ */

.map-controls .compass-container {
   float: left;
   height: 24px;
   margin-left: 10px;
   opacity: 0;
   pointer-events: none;
   position: relative;
   width: 24px;

   transition: opacity .33s;
}

.map-controls .compass-container:after {
   content: "N";
   font-size: 12px;
   font-weight: bold;
   left: 0;
   line-height: 12px;
   position: absolute;
   text-align: center;
   top: 100%;
   width: 100%;
}

.map-controls .compass-container .icon { overflow: visible; }
.map-controls .compass-container .icon #background {
   fill-opacity: 0;
   stroke-width: 4px;
}


/* ========================== *
 * ## Map Options Ordering ##
 * ========================== */

/* ## flight ## */
/* labels */
.map-controls #mo_flight #mo_section_labels { order: 0; }
.map-controls #mo_flight #mo_section_labels .__all { order: 2; }
.map-controls #mo_flight #mo_section_labels .__interactive { order: 1; }
.map-controls #mo_flight #mo_section_labels .__none { order: 0; }
.map-controls #mo_flight #mo_section_labels [data-setting="transparent-labels"] { order: 3; }


/* ## issue ## */
/* display */
.map-controls #mo_issue #mo_section_display { order: 1; }
.map-controls #mo_issue #mo_section_display .__complaints { order: 1; }
.map-controls #mo_issue #mo_section_display .__complainants { order: 2; }
.map-controls #mo_issue #mo_section_display .__icon { order: 0; }

/* groups */
.map-controls #mo_issue #mo_section_groups { order: 1; }
.map-controls #mo_issue #mo_section_groups .map-options-button { order: 5; }
.map-controls #mo_issue #mo_section_groups .__city { order: 1; }
.map-controls #mo_issue #mo_section_groups .__code { order: 2; }
.map-controls #mo_issue #mo_section_groups .__county { order: 0; }
.map-controls #mo_issue #mo_section_groups .__exact { order: 4; }
.map-controls #mo_issue #mo_section_groups .__neighborhood { order: 3; }

/* labels */
.map-controls #mo_issue #mo_section_labels { order: 0; }
.map-controls #mo_issue #mo_section_labels .__all { order: 2; }
.map-controls #mo_issue #mo_section_labels .__none { order: 0; }
.map-controls #mo_issue #mo_section_labels .__interactive { order: 1; }

/* options */
.map-controls #mo_issue #mo_section_options { order: 2; }

/* overlay */
.map-controls #mo_issue #mo_section_overlay { order: 0; }
.map-controls #mo_issue #mo_section_overlay .__all { order: 3; }
.map-controls #mo_issue #mo_section_overlay .__current { order: 2; }
.map-controls #mo_issue #mo_section_overlay .__none { order: 0; }
.map-controls #mo_issue #mo_section_overlay .__selected { order: 1; }


/* ## map ## */
/* overlay */
.map-controls #mo_map #mo_section_overlay { order: 0; }
.map-controls #mo_map #mo_section_overlay [data-setting="airport-layer-active"] { order: 2; }
.map-controls #mo_map #mo_section_overlay [data-setting="grid-layer-active"] { order: 3; }
.map-controls #mo_map #mo_section_overlay [data-setting="noise-layer-active"] { order: 0; }
.map-controls #mo_map #mo_section_overlay [data-setting="show-compass"] { order: 5; }
.map-controls #mo_map #mo_section_overlay [data-setting="precipitation-layer-active"] { order: 4; }
.map-controls #mo_map #mo_section_overlay .map-options-group { order: 9; }
.map-controls #mo_map #mo_section_overlay .map-options-group.airports { order: 2; }
.map-controls #mo_map #mo_section_overlay .map-options-group.airspace { order: 1; }

/* size */
.map-controls #mo_map #mo_section_size { order: 1; }
.map-controls #mo_map #mo_section_size .__flexible { order: 2; }
.map-controls #mo_map #mo_section_size .__fullscreen { order: 3; }
.map-controls #mo_map #mo_section_size .__large { order: 1; }
.map-controls #mo_map #mo_section_type .__small { order: 0; }

/* type */
.map-controls #mo_map #mo_section_type { order: 0; }
.map-controls #mo_map #mo_section_type .__contrast\:osm { order: 4; }
.map-controls #mo_map #mo_section_type .__dark { order: 5; }
.map-controls #mo_map #mo_section_type .__hybrid { order: 2; }
.map-controls #mo_map #mo_section_type .__none { order: 6; }
.map-controls #mo_map #mo_section_type .__osm { order: 0; }
.map-controls #mo_map #mo_section_type .__satellite { order: 1; }
.map-controls #mo_map #mo_section_type .__terrain { order: 3; }


/* ## track ## */
/* colors */
.map-controls #mo_track #mo_section_colors { order: 1; }
.map-controls #mo_track #mo_section_colors .__all { order: 0; }
.map-controls #mo_track #mo_section_colors .__airport { order: 1; }
.map-controls #mo_track #mo_section_colors .__altitude { order: 2; }
.map-controls #mo_track #mo_section_colors .__flighttype { order: 3; }
.map-controls #mo_track #mo_section_colors .__operating_type { order: 4; }
.map-controls #mo_track #mo_section_colors .__wvc { order: 5; }

/* options */
.map-controls #mo_track #mo_section_options { order: 0; }
.map-controls #mo_track #mo_section_options .__all { order: 3; }
.map-controls #mo_track #mo_section_options .__area { order: 2; }
.map-controls #mo_track #mo_section_options .__density { order: 4; }
.map-controls #mo_track #mo_section_options .__none { order: 0; }
.map-controls #mo_track #mo_section_options .__selected { order: 1; }
.map-controls #mo_track #mo_section_options [data-setting="indicatorsegments-layer-active"] { order: 5; }

.map-controls #mo_track #mo_section_overlay { order: 1; }
.map-controls #mo_track #mo_section_overlay [data-setting="aircraft-layer-active"] { order: 0; }
.map-controls #mo_track #mo_section_overlay [data-setting="average-track-layer-active"] { order: 3; }
.map-controls #mo_track #mo_section_overlay [data-setting="flight-corridor-layer-active"] { order: 1; }
.map-controls #mo_track #mo_section_overlay [data-setting="flight-route-layer-active"] { order: 2; }

/* labels */
.map-controls #mo_track #mo_section_p_labels { order: 0; }
.map-controls #mo_track #mo_section_p_labels .__all { order: 2; }
.map-controls #mo_track #mo_section_p_labels .__interactive { order: 1; }
.map-controls #mo_track #mo_section_p_labels .__none { order: 0; }

/* display */
.map-controls #mo_track #mo_section_p_display { order: 0; }
.map-controls #mo_track #mo_section_p_display .__ALT\:500 { order: 2; }
.map-controls #mo_track #mo_section_p_display .__ALT\:1000 { order: 3; }
.map-controls #mo_track #mo_section_p_display .__ALT\:2000 { order: 4; }
.map-controls #mo_track #mo_section_p_display .__NONE\:0 { order: 0; }
.map-controls #mo_track #mo_section_p_display .__NONE\:1 { order: 1; }
.map-controls #mo_track #mo_section_p_display .__TIME\:60 { order: 5; }
.map-controls #mo_track #mo_section_p_display .__TIME\:300 { order: 6; }
.map-controls #mo_track #mo_section_p_display [data-setting="trackpoints-show-labels-only"] { order: 7; }


/* ==================================== *
 * ## Map Options Additional Styling ##
 * ==================================== */

.map-controls #mo_section_areas { flex: 1; }


/* ===================== *
 * ## Map Interaction ##
 * ===================== */

.mi-distance-container .map-icon .icon {
   border-radius: 50%;
   border-width: 0;
}

.mi-distance-container .map-icon-label span.usstandard { text-transform: lowercase; }


/* =========================== *
 * ## Map Options Component ##
 * =========================== */

.map-options-component .role-button-tooltip,
.map-options-component .role-button-tooltip .label {
   left: 0;
   position: absolute;

   /transition: left .25s;
}

.map-options-component .role-button-tooltip {
   margin-top: 12px;
   pointer-events: none;
   opacity: 0;
   top: 100%;
}

.map-options-component .role-button-tooltip:after {
   content: "";
   height: 8px;
   left: 0;
   position: absolute;
   top: 0;
   width: 8px;
   z-index: 1;

   transform-origin: center center;
   transform: translate(-50%, -50%) rotate(-45deg);

   background-color: var(--white);
}

.map-options-component .role-button-tooltip .label {
   border-radius: 6px;
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   font-size: 8px;
   font-weight: bold;
   padding: 5px 10px;
   text-transform: uppercase;
   top: 0;
   white-space: nowrap;
   z-index: 0;

   background: var(--white);
}


/* ======================== *
 * ## Details Components ##
 * ======================== */

.details-table {
   line-height: 17px;
   max-height: 18px;
   text-align: left;
   width: 100%;
   word-break: break-word;
}

.details-table > tbody > tr > th {
   cursor: default;
   font-weight: bold;
   padding-left: 5px;
   text-align: left;
   text-transform: uppercase;
   vertical-align: top;
   white-space: nowrap;
}

.details-table > tbody > tr > td {
   vertical-align: middle;
   padding-left: 5px;
   width: 100%;
   cursor: default;
}
.details-table > tbody > tr > td.split { padding-left: 0; }
.details-table > tbody > tr > td.split > div {
   background-color: #CCCCCC;
   height: 1px;
   position: relative;
   width: 100%;
}

.details-table td.shrink { width: 1px; }
.details-table td + th { padding-left: 20px; }

.details-table.list td { width: auto; }


/* =================== *
 * ## Enquiry table ##
 * =================== */

.enquiry-table, .enquiry-table td, .enquiry-table th {
   /border: 1px solid black;
}

.enquiry-table { line-height: 24px; }

.enquiry-table > tbody > tr > th {
   padding-top: 4px;
}

.enquiry-table > tbody > tr > td,
.enquiry-table > tbody > tr > th {
   padding: 0 10px 0 0;
   vertical-align: middle;
   white-space: nowrap;
   width: 1px;
}
.enquiry-table > tbody > tr > td:last-child { padding-right: 0px; }
.enquiry-table tbody td.grow { width: auto; }

.enquiry-table #cur_client span {
   display: block;
   line-height: 16px;
}

.enquiry-table textarea.edit {
   height: 70px;
   width: 100%;
}

.enquiry-table textarea[name='description'],
.enquiry-table textarea.edit {
   resize: vertical;
}

.enquiry-table td .datetime_display,
.enquiry-table td .datetime_display + span {
   display: inline-block;
   float: left;
   margin-right: 5px;
}
.enquiry-table td .datetime_display { width: 140px; }

.enquiry-table td .datetime_display input[name='rdate'],
.enquiry-table td .datetime_display .datetime.date,
.enquiry-table td .datetime_display .period_end.date {
   width: calc(70% - 5px);
}
.enquiry-table td .datetime_display input[name='rtime'],
.enquiry-table td .datetime_display .datetime.time,
.enquiry-table td .datetime_display .period_end.time {
   width: 30%;
}

.enquiry-table button { width: 100%; }
.enquiry-table #actions button,
.enquiry-table #add_datetime,
.enquiry-table #add_period {
   width: auto;
}

.enquiry-table #rdatetime td > * { float: left; }

.enquiry-table td .period {
   float: left;
   position: relative;
   width: 100%;
}
.enquiry-table td .period .delete {
   background-position: left center;
   float: left;
   height: 25px;
}

.enquiry .enquiry-table .edit.small { width: 75px; }

.enquiry .content-container {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
}

.enquiry .button-container {
   border-style: solid;
   border-width: 1px 0 0 0;
   flex: 0;
   float: left;
   margin-top: 5px;
   padding-top: 5px;
   width: 100%;
}

.enquiry .button-container #import_complaints,
.enquiry .button-container #save_complainant,
.enquiry .button-container #save_new,
.enquiry .button-container #save_next {
   float: right;
   margin-left: 5px;
}

.enquiry .content {
   flex: 1;
   overflow: hidden auto;
}

.enquiry .title {
   flex: 0;
   position: relative;
   width: 100%;
}
.enquiry .title .required {
   position: absolute;
   right: 5px;
   top: 0;
}

#enquiry_help {
   float: right;
   width: 690px !important;
   overflow: auto;
}

.enquiry #active {
   white-space: nowrap;
}

.enquiry th {
   text-align: left;
   white-space: nowrap;
   color: #A3B870;
}

.enquiry input:not([type]) {
   border: 1px solid #A9A9A9;
   margin-right: 5px;
   padding-left: 5px;
   width: 100%;
}

.enquiry button {
   margin-right: 10px;
   line-height: 14px;
   vertical-align: middle;
   white-space: nowrap;
}

/* ## Enquiry (issue) ## */
.enquiry .issue .enquiry-table select { min-width: 140px; }

.message-field,
.popup-field {
   cursor: pointer;
}

.message-field-div,
.popup-field-div,
.popup-field-div2 {
   display: none;
}

.update-field-div {
   background-color: #ffffff;
   border: 1px solid black;
   border-radius: 5px;
   display: none;
   opacity: 0;
   padding: 4px;
   pointer-events: none;
   position: absolute;
   text-transform: uppercase;
   white-space: nowrap;
   z-index: 1;
}

/*
.update-field-div.out-of-bounds {
   transform: translate(-5px, calc(-100% - 18px));
}
*/

.update-field-div.field-processed { display: block; }
.update-field-div.show {
   display: block;
   opacity: 1;
   pointer-events: all;
}
.update-field-div .apply { cursor: pointer; }

.update-field-div[field=assigned_to] { text-transform: none; }

.update-field-div div[value] {
   padding-left: 2px;
   padding-right: 2px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

.update-field-div div[value]:hover { background-color: #ffd9b3; }

.update-field-div .custom_scroll { height: 100%; }


/* STATUS MODULE */

.filters-panel {
   display: none;
}

.filters-available.filters-panel {
   display: block;
}

.filters-panel .search-group .form-field.advanced-filter { display: none; }
.filters-panel.show-advanced-filters .search-group .form-field.advanced-filter { display: block; }

.filter-module {
   position: relative;
   right: 0px;
   top: 0px;
   height: 28px;
   text-align: right;
   white-space: nowrap;
}

.filter-item {
   display: inline-block;
   vertical-align: top;
   padding: 0px 10px;
   position: relative;
   margin: 4px 0px;
   line-height: 20px;
}
.filter-item:before {
   content: "";
   display: block;
   height: 10px;
   left: 0px;
   position: absolute;
   top: 50%;
   width: 1px;
   transform: translate(0, -50%);
}
.filter-item:first-child:before {width: 0; }

.filter-container {
   display: inline-block;
   vertical-align: top;
   overflow: hidden;
   white-space: nowrap;
}

.filter-header {
   color: #FFFFFF;
}

.filter-label {
   display: inline-block;
   vertical-align: top;
   color: #b0bfba;
}

.filter-value {
   display: inline-block;
   vertical-align: top;
   padding-left: 10px;
   text-align: left;
   overflow: hidden;
   white-space: nowrap;
   max-width: 120px;
   text-overflow: ellipsis;
}

.filter-button {
   cursor: pointer;
   color: #b0bfba;
}

.filter-button:hover {
   color: #FFFFFF;
}

.filter-icon:after {
   content: "";
   display: inline-block;
   width: 18px;
   height: 14px;
   margin-left: 2px;
}

.filter-icon-reset:after {
   background: url('../images/menu_glyphs.png') -142px -143px;
}

.filter-icon-open:after {
   background: url('../images/menu_glyphs.png') -162px -161px;
}

.filters-open .filter-icon-open:after {
   background: url('../images/menu_glyphs.png') -180px -178px;
}

.search-module {
   display: none;
}

/* It looks like "flex-wrap column" is buggy/broken in most browsers (parent container does not grow wider),
   so use an ingenious hack:
   https://stackoverflow.com/questions/23408539/how-can-i-make-a-displayflex-container-expand-horizontally-with-its-wrapped-con/41209546#41209546
 */
.search-group {
   grid-auto-flow: column;
   grid-template-rows: repeat(10, 1fr);
   gap: 10px;
}

.search-group div[id] { display: none; }
.search-group div[id].form-field {
   display: block;
}

.search-group-wrapper {
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   clear: both;
   user-select: none;
   width: 100%;
   z-index: 100;
}

.search-module:after {
   display: table;
   content: "";
   clear: both;
}

.search-module .form-field-changed {
   display: inline;
}

.filters-open .search-module {
   display: block;
   background: #fff;
   text-align: left;
   position: absolute;
   width: 100%;
}

.search-actions,
.search-group {
   border-style: solid;
   border-width: 0 0 0 1px;
   box-sizing: border-box;
   display: table-cell;
   padding: 12px 10px 12px 10px;
   vertical-align: top;
}

.thin-y-scroll {
   /*overflow-y: scroll;*/
}

.search-actions {
   border-left: 0px;
   clear: both;
   float: right;
   margin: 0;
   padding: 10px;
   width: 100%;
}

.search-actions > .search-col {
   display: flex;
   flex-direction: row;
   float: right;
   gap: 10px;
}

.search-actions > .search-col > div {
   border-radius: 3px;
   cursor: pointer;
   height: 24px;
   font-size: 10px;
   line-height: 24px;
   padding: 0 10px;
   position: relative;
}

.search-actions > .search-col > div[disabled] { cursor: default; }

.search-group-wrapper {
   float: left;
   max-width: 100%;
   position: relative;
}

.search-group-scrollcontainer {
   border-style: solid;
   border-width: 0 1px 1px 0;
   box-sizing: border-box;
   display: flex;
   max-height: 550px;
   position: relative;
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
}

.search-group-scrollcontainer.scroll {
   overflow-x: auto;
}

.search-group-scrollcontainer.custom_scroll::-webkit-scrollbar-track {
   border-top: 1px solid #969696;
}

/* ==================== *
 * ## Admin components ##
 * ==================== */

.admin-div {
   position: relative;
   background-color: #ffffff;
   clear: left;
   float: left;
   grid-column: 1 / 5;
   grid-row: 1 / 10;
   width: 100%;
   /*padding: 20px;
   min-height: 200px;*/
}
.admin-div button { margin: 0; }

.list-table {
   white-space: nowrap;
   border-spacing: 0 0;
   user-select: none;
}

.selectable {
   user-select: auto;
}

.list-table tr:not(.list-header):hover {
   background-color: #ffd9b3;
}

.list-table tr.current {
   background-color: #C6F15D;
}

.list-table td {
   cursor: pointer;
}

.list-table td img {
   position: relative;
   top: 2px;
}

.list-table th, .maintenance-feed tr, .maintenance-header tr {
   cursor: default;
}

.list-table > tbody > tr > td:first-of-type {
   border-bottom-left-radius: 6px;
   border-top-left-radius: 6px;
}

.list-table > tbody > tr > td:last-of-type {
   border-bottom-right-radius: 6px;
   border-top-right-radius: 6px;
}

.list-table th {
   padding: 0 8px;
   text-transform: uppercase;
   font-size: 10px;
   font-weight: normal;
   line-height: 24px;
}

.list-table td, .header-table td {
   box-sizing: content-box;
   padding-left: 8px;
   padding-right: 8px;
}

.bands .listtable td, .bands-header .headertable td {
   padding-left: 4px;
   padding-right: 4px;
   min-width: 34px;
   max-width: 34px;
}

.bands-per-second-header .headertable td:not(:first-of-type) {
   padding-left: 0px;
   padding-right: 0px;
   min-width: 24px;
   max-width: 24px;
}

.bands-per-second .listtable td {
   padding-left: 0px;
   padding-right: 0px;
   width: 24px;
}

.bands-per-second .listtable td.half {
   width: 10px;
}

.header-table {
   border-spacing: 0 0;
}

/* ==================== *
 * ## List component ##
 * ==================== */

.list-component .role-content .content-wrapper {
   display: flex;
   min-width: 100%;
   overflow-x: hidden;
   padding: 0;
}

.list-component .role-content .content-wrapper .content-scroller {
   display: flex;
   flex: 1;
   flex-direction: column;
   height: 100%;
   padding: 0 5px 5px 10px;
   position: relative;
   width: 100%;
}
.list-component .role-content .content-wrapper .content-scroller:before {
   background-color: var(--black);
   content: "";
   height: 22px;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   z-index: -1;
}

.list-component .list-row {
   cursor: pointer;
   line-height: 20px;
}

.list-component .role-content .role-list-header .list-row,
.list-component .role-content .role-list-header-visual .list-row {
   line-height: 22px;
}

.list-component .list-row.no-coupling .list-cell.coupling { pointer-events: none; }
.list-component .list-row.no-coupling .list-cell.coupling svg { opacity: 0; }

.list-component .list-row .list-cell {
   padding: 0 8px;
   position: relative;
   transition: background-color .25s;
   white-space: nowrap;
}
.list-component .list-row .list-cell:after {
   content: "";
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   z-index: -1;
}
.list-component .role-list-header-visual .list-cell.sort-column:after { z-index: 1; }

.list-component .list-row .list-cell:first-child,
.list-component .list-row .list-cell:first-child:after {
   border-radius: 6px 0 0 6px;
}

.list-component .list-row .list-cell:last-child,
.list-component .list-row .list-cell:last-child:after {
   border-radius: 0 6px 6px 0;
}
.list-component .list-row .list-cell.sort-column { padding-left: 20px; }

.list-component .role-list-header-visual {
   overflow-x: hidden;
   margin-bottom: 5px;
   margin-right: 6px;
}

.list-component .role-list-scroller {
   flex: 1;
   overflow-x: auto;
   width: 100%;
}

.list-component .role-list-header .list-cell,
.list-component .role-list-header-visual .list-cell {
   font-size: 10px;
   text-transform: uppercase;
}

.list-component .role-list-header-visual .list-cell.sort-column:after {
   content: "\25BC";
   font-size: 14px;
   height: 100%;
   left: 3px;
   line-height: 20px;
   position: absolute;
   top: 0;
   width: 16px;
}
.list-component.sort-reverse .role-list-header-visual .list-cell.sort-column:after { content: "\25B2"; }

.casper-chart-component .role-HC { height: 100%; }

.list-component .role-list-total.list-total-none { display: none; }

.columns-dropdown .column-assignment-container > .header,
.list-component .role-title {
   pointer-events: none;
}

.list-component .role-content,
.list-component .role-subheader {
   border-radius: 0;
}

.list-component .role-subheader .role-title { padding-left: 8px; }
.list-component .role-subheader .role-title .encapsulate { padding: 0 10px; }

/*.list-component .direction_icon_column { 
   display: block;
   width: 20px;
}*/

.list-component .icon_boolean,
.list-component .icon_direction,
.list-component .icon_issue_subtype,
.list-component .icon_public,
.list-component .icon_windy {
   height: 20px;
   left: 0;
   position: absolute;
   top: 0;
   width: 20px;
}

.list-component .icon_boolean,
.list-component .icon_direction,
.list-component .icon_public {
   padding: 5px;
}
.list-component .icon_issue_subtype,
.list-component .icon_windy {
   padding: 3px;
}


/* ==================== *
 * ## Coupling Lists ##
 * ==================== */

.issue-list[data-coupling="true"],
.noise-list[data-coupling="true"],
.issue-coupling-list:not([data-coupling="true"]),
.noise-coupling-list:not([data-coupling="true"]) {
   display: none;
}

.issue-list .coupling-button,
.noise-list .coupling-button {
   opacity: 0;
   pointer-events: none;
   transition: opacity .33s;
}

.issue-list .coupling-button[data-issue]:not([data-issue="null"]):not([data-issue="undefined"]),
.noise-list .coupling-button[data-noise_event]:not([data-noise_event="null"]):not([data-noise_event="undefined"]){
   opacity: 1;
   pointer-events: all;
}

.issue-coupling-list .correlate_icon_column,
.noise-coupling-list .correlate_icon_column {
   display: block;
   width: 20px;
}

.issue-coupling-list .icon_correlate,
.noise-coupling-list .icon_correlate {
   height: 20px;
   left: 0;
   padding: 4px;
   position: absolute;
   top: 0;
   width: 20px;
}


/* ==================== *
 * ## Popup and overlay ##
 * ==================== */

.popup-overlay {
   background-color: rgba(0, 0, 0, 0.33);
   display: none;
   height: 100%;
   left: 0px;
   //opacity: 0;
   //pointer-events: none;
   position: fixed;
   text-align: center;
   top: 0px;
   width: 100%;
   z-index: 999;

   transition: opacity .33s;
}
.popup-overlay.show {
   display: block;
   //opacity: 1;
   //pointer-events: all;
}

.popup-overlay:before {
   content: "";
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}

.popup-overlay .popup-container {
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   left: 50%;
   max-height: 90vh;
   position: absolute;
   top: 50%;
   transform: translate(-50%,-50%);
}

.popup-container > div {
   box-sizing: border-box;
   clear: both;
   float: left;
   padding: 0px 10px;
   width: 100%;
}

.popup-container > .content {
   border-bottom: 1px solid #cccccc;
   border-top: 1px solid #cccccc;
   display: flex;
   flex-direction: column;
   float: left;
   padding-top: 10px;
   padding-bottom: 10px;
   position: relative;
   text-align: left;
   max-height: 640px;
   overflow-y: auto;
}
.popup-container > .content .cke { width: 800px; }

.popup-container > .footer {
   padding-bottom: 10px;
   padding-top: 5px;
   height: auto;
   display: block;
}

.popup-container > .header {
   cursor: move;
   padding-bottom: 5px;
   padding-top: 10px;
}

.popup-container > .header > .title {
   float: left;
   line-height: 15px;
   pointer-events: none;
   text-transform: uppercase;
}

.popup-container > .header > .close {
   background-image: url("../images/cross.png");
   cursor: pointer;
   float: right;
}
.popup-container > .footer > .apply {
   background-image: url("../images/check.png");
   float: right;
}
.popup-container > div > .button {
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
   height: 15px;
   width: 15px;
}

.popup-container > .content > textarea {
   float: left;
   height: 300px;
   position: relative;
   width: 800px;
}


/* ====================== *
 * ## Annotation Popup ##
 * ====================== */

.popup-container[data-type='annotations'] .content textarea { height: 20px; }
.popup-container[data-type='annotations'] .annotation {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-bottom: 5px;
   padding-left: 30px;
   position: relative;
}

.popup-container[data-type='annotations'] .annotation .button.delete {
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   width: 20px;
}

.popup-container[data-type='annotations'] .annotation .date {
   flex: 0;
   white-space: nowrap;
}
.popup-container[data-type='annotations'] .annotation .user {
   flex: 1;
   padding-left: 10px;
}
.popup-container[data-type='annotations'] .annotation .value { flex: 1 0 100%; }

/* ======================= *
 * ## New Version Popup ##
 * ======================= */

.new-version-popup,
.new-version-detected-popup {
   display: none !important;
}


/* ========================== *
 * ## Restore Period Popup ##
 * ========================== */

.restore-period-popup { display: none !important; }

.popup-container[data-type="restore-period-popup"] .content .text-container {
   float: left;
   left: 50%;
   position: relative;
   transform: translate(-50%,0);
}

.popup-container[data-type="restore-period-popup"] .content span {
   clear: both;
   display: block;
   float: left;
   margin-bottom: 10px;
   position: relative;
   text-align: center;
   width: 100%;
}

.popup-container[data-type="restore-period-popup"] .period-label { font-weight: bold; }

.popup-container[data-type="restore-period-popup"] .button-container {
   display: flex;
   float: left;
   justify-content: space-around;
   width: 100%;
}

.popup-container[data-type="restore-period-popup"] .header .button.close {
   display: none;
}

.popup-container[data-type="restore-period-popup"] .title {
   left: 50%;
   position: relative;
   transform: translate(-50%,0);
}

/* ======================== *
 * ## Session Lost Popup ##
 * ======================== */

.session-lost-popup { display: none !important; }

.popup-container[data-type="session-lost-popup"] .button-container {
   padding-top: 10px;
   text-align: center;
}


/* ==================== *
 * ## Component Menu ##
 * ==================== */

.component-menu {
   width: 100%;
   height: 100%;
   cursor: pointer;
   background-repeat: no-repeat;
   background-position: center;
   position: relative;
}

.component-menu-items {
   position: absolute;
   top: 100%;
   right: 0;
   background: #ECEDED;
   z-index: 1;
}

.component-menu-items > * {
   display: block;
   padding: 5px 10px;
   text-decoration: none;
   color: #000;
   white-space: nowrap;
}

.component-menu-items > *:hover {
   text-decoration: none;
   background-color: #fff;
}

.close.component-menu .component-menu-items {
   display: none;
}

.open.component-menu .component-menu-items {
   display: block;
}

.icon-excel {
   background-image: url(../images/icon_import_excel.png);
}

/* ======================= *
 * ## FlightExt Details ##
 * ======================= */

.casper-legacy-component.noise-event .noise-event-item { display: none; }

.casper-legacy-component.flight .flight-item,
.casper-legacy-component.flightext .flight-item,
.casper-legacy-component.noise-event .noise-event-item-current,
.casper-legacy-component.issue .issue-item {
   display: flex;
   height: 100%;
}


/* ========================= *
 * ## Noise Event Details ##
 * ========================= */

.casper-legacy-component.noise-event .role-coupling,
.casper-legacy-component.noise-event .role-create-and-couple {
   display: none;
}

.casper-legacy-component.noise-event .role-coupling.show,
.casper-legacy-component.noise-event .role-create-and-couple.show {
   display: block;
}

.casper-legacy-component.noise-event .role-coupling .icon #decoupling { display: none }
.casper-legacy-component.noise-event .role-coupling.decouple .icon #coupling { display: none; }
.casper-legacy-component.noise-event .role-coupling.decouple .icon #decoupling { display: block; }

.casper-legacy-component.noise-event .role-coupling .role-button,
.casper-legacy-component.noise-event .role-create-and-couple .role-button {
   width: 16px;
}

#page[data-page="alerts"] .casper-legacy-component.noise-event .role-coupling,
#page[data-page="complaints"] .casper-legacy-component.noise-event .role-coupling {
   display: none !important;
}


/* ================ *
 * ## Map Layers ##
 * ================ */

.casper-map-layer {                                z-index: 0; }
.casper-map-layer.casper-tracks-layer {            z-index: 10; }
.casper-map-layer.highlighted-tracks-layer {       z-index: 11; }
.casper-map-layer.selected-tracks-layer {          z-index: 12; }
.casper-map-layer.current-tracks-layer {           z-index: 13; }
.casper-map-layer.indicator-segment-layer {        z-index: 14; }
.casper-map-layer.casper-cpa-layer {               z-index: 20; }
.casper-map-layer.airspace-layer {                 z-index: 21; }
.casper-map-layer.airports-layer {                 z-index: 22; }
.casper-map-layer.casper-track-points-layer {      z-index: 30; }
.casper-map-layer.casper-trail-layer {             z-index: 40; }
.casper-map-layer.casper-location-layer {          z-index: 50; }
.casper-map-layer.casper-noise-dot-layer {         z-index: 60; }
.casper-map-layer.casper-noise-monitor-layer {     z-index: 61; }
.casper-map-layer.nmt-positions-layer {            z-index: 62; }
.casper-map-layer.issue-layer {                    z-index: 70; }
.casper-map-layer.issue-selected-layer {           z-index: 71; }
.casper-map-layer.issue-current-layer {            z-index: 72; }
.casper-map-layer.casper-aircraft-layer {          z-index: 80; }
.casper-map-layer.casper-map-interaction-layer {   z-index: 90; }

.casper-label-layer {                              z-index: 0; }
.casper-label-layer.casper-cpa-layer {             z-index: 20; }
.casper-label-layer.airspace-layer {               z-index: 21; }
.casper-label-layer.airports-layer {               z-index: 22; }
.casper-label-layer.casper-track-points-layer {    z-index: 30; }
.casper-label-layer.casper-tracks-layer {          z-index: 31; }
.casper-label-layer.casper-trail-layer {           z-index: 40; }
.casper-label-layer.casper-location-layer {        z-index: 50; }
.casper-label-layer.casper-noise-dot-layer {       z-index: 60; }
.casper-label-layer.casper-noise-monitor-layer {   z-index: 61; }
.casper-label-layer.nmt-positions-layer {          z-index: 62; }
.casper-label-layer.issue-layer {                  z-index: 70; }
.casper-label-layer.issue-selected-layer {         z-index: 71; }
.casper-label-layer.issue-current-layer {          z-index: 72; }
.casper-label-layer.casper-aircraft-layer {        z-index: 80; }
.casper-label-layer.casper-map-interaction-layer { z-index: 90; }


/* ======================== *
 * ## Track Points Layer ##
 * ======================== */

.casper-label-layer.casper-track-points-layer:not([data-labellayout="condensed"]) .plot-container [data-layout="condensed"] { display: none; }
.casper-label-layer.casper-track-points-layer:not([data-labellayout="extended"]) .plot-container [data-layout="extended"] { display: none; }


/* ===================================== *
 * ## Databrowser NMT positions layer ##
 * ===================================== */

.nmt-positions-layer .map-icon-label {
   left: 0;
   transform: translate(-50%, -104px);
   -webkit-transform: translate(-50%, -104px);
}

.nmt-positions-layer .graphic-container.highlight .map-icon-label,
.nmt-positions-layer .graphic-container.select .map-icon-label {
   transform: translate(-50%, -104px);
   -webkit-transform: translate(-50%, -104px);
}

.nmt-positions-layer .nmt-pos-container {
   transform: translate(0,0);
   -webkit-transform: translate(0,0);
}

.nmt-positions-layer.casper-label-layer .nmt-pos-container {
   height: 90px;
   width: 60px;
}

.nmt-positions-layer .nmt-pos-icon-container,
.nmt-positions-layer .nmt-pos-icon-container .nmt-pos-icon {
   position: relative;
}

.nmt-positions-layer .nmt-pos-icon-container { 
   height: 90px;
   width: 60px;

   transform-origin: top left;
   transition: transform .25s;

   -webkit-transform-origin: top left;
   -webkit-transition: -webkit-transform .25s;
}

.nmt-positions-layer .nmt-pos-icon-container .nmt-pos-icon {
   height: 100%;
   cursor: pointer;
   pointer-events: none;
   width: 100%;

   transform: translate(-30px,-80px);
   -webkit-transform: translate(-30px,-80px);
}

.nmt-positions-layer .nmt-pos-icon-container .nmt-pos-icon #background { pointer-events: all; }
.nmt-positions-layer.cInactive .nmt-pos-icon-container .nmt-pos-icon #background { pointer-events: none !important; }

.nmt-positions-layer .nmt-pos-icon-container .nmt-pos-icon #noise_level {
   font-weight: bold;
   font-size: 25px;
   text-anchor: middle;
}

/* ====================== *
 * ## Airspace Overlay ##
 * ====================== */

.airspace-layer .airspace-icon-container .map-icon-label
{
   background-color: transparent;
   box-shadow: none;
   border: none;
   font-size: 12px;
   left: 100%;
   line-height: 18px;
   margin-left: 10px;
   min-width: auto;
   opacity: 1;
   padding: 0;
   text-align: left;
   top: 0;
   transform: translate(0,0);
   -webkit-transform: translate(0,0);
}

.airspace-layer .airspace-icon-container .map-icon-label:after,
.airspace-layer .airspace-icon-container .map-icon-label:before {
   display: none !important;
}

.airspace-layer .airspace-icon-container .map-icon { 
   cursor: default;
   pointer-events: none;
}


/* ===================== *
 * ## Airport Overlay ##
 * ===================== */

.airports-layer .airport-icon-container {
   height: 28px;
   width: 28px;
}

.airports-layer .airport-icon-container .map-icon {
   height: 100%;
   padding: 6px;
   position: absolute;
   width: 100%;
}

.airports-layer .map-icon-label { transform: translate(-50%, -15px); }

.airports-layer .airport-icon-container .bg {
   border-radius: 50%;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 0;

   background-color: #62766F;
}


/* ======================== *
 * ## Noise Event Player ##
 * ======================== */

.noise-event-player .button-container {
   height: 100%;
   position: relative;
   width: 9px;
}

.noise-event-player .role-play_button,
.noise-event-player .role-pause_button {
   cursor: pointer;
   display: none;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

.noise-event-player.paused .role-play_button,
.noise-event-player.stopped .role-play_button,
.noise-event-player.playing .role-pause_button {
   display: block;
}

.noise-event-player .role-play_button .icon,
.noise-event-player .role-pause_button .icon {
   height: 100%;
   opacity: .5;
   width: 100%;

   transition: opacity .33s;
}

.noise-event-player .role-play_button:hover .icon,
.noise-event-player .role-pause_button:hover .icon {
   opacity: .75;
}


/* ======================== *
 * ## Noise Event Charts ##
 * ======================== */

.noise-chart .nmt-name {
   font-size: 10px;
   height: 16px;
   left: 0;
   line-height: 20px;
   padding-right: 10px;
   pointer-events: none;
   position: absolute;
   text-align: right;
   text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
   top: 0;
   width: 100%;
}


/* ================= *
 * ## Issue Layers ##
 * ================= */

/* ## combined ## */
.issue-current-layer .map-icon-container .map-icon-label,
.issue-current-layer .map-icon-container .map-icon-label-tether,
.issue-highlighted-layer .map-icon-container .map-icon-label,
.issue-highlighted-layer .map-icon-container .map-icon-label-tether,
.issue-selected-layer .map-icon-container .map-icon-label,
.issue-selected-layer .map-icon-container .map-icon-label-tether {
   opacity: 1;
}

.issue-layer .issue-icon-container .issue-icon,
.issue-current-layer .issue-icon-container .issue-icon,
.issue-highlighted-layer .issue-icon-container .issue-icon,
.issue-selected-layer .issue-icon-container .issue-icon {
   overflow: visible;
   stroke-width: 4px;
}

.issue-layer .issue-icon-container .map-icon-container,
.issue-current-layer .issue-icon-container .map-icon-container,
.issue-highlighted-layer .issue-icon-container .map-icon-container,
.issue-selected-layer .issue-icon-container .map-icon-container {
   height: 15px;
   width: 15px;
}

.issue-layer .issue-icon-container .map-icon-label,
.issue-current-layer .issue-icon-container .map-icon-label,
.issue-highlighted-layer .issue-icon-container .map-icon-label,
.issue-selected-layer .issue-icon-container .map-icon-label {
   transform: translate(-50%, -24px);
   -webkit-transform: translate(-50%, -24px);
}


/* ## general (all/selected) ## */
.issue-layer .map-icon-label .table-content tbody tr.ni,
.issue-layer .map-icon-label .table-content tbody tr.nc,
.issue-layer .map-icon-label .table-content .amount {
   display: none;
}

.issue-layer[data-display="complaints"] .map-icon-label .table-content tbody tr.ni,
.issue-layer[data-display="complainants"] .map-icon-label .table-content tbody tr.ni {
   display: block;
}
.issue-layer[data-display="complainants"] .map-icon-label .table-content tbody tr.nc { display: block; }

.issue-layer .map-icon-label .table-content .amount { padding-left: 5px; }
.issue-layer[data-show-amount="true"] .map-icon-label .table-content .amount { display: inline-block; }


/* ## current ## */
#page[data-page="complaints"] .issue-current-layer .issue-icon-container .map-icon-container,
#page[data-page="complaints"] .issue-highlighted-layer .issue-icon-container .map-icon-container,
#page[data-page="complaints"] .issue-selected-layer .issue-icon-container .map-icon-container {
   height: 20px;
   width: 20px;
}

#page[data-page="complaints"] .issue-current-layer .issue-icon-container .map-icon-label,
#page[data-page="complaints"] .issue-highlighted-layer .issue-icon-container .map-icon-label,
#page[data-page="complaints"] .issue-selected-layer .issue-icon-container .map-icon-label {
   transform: translate(-50%, -25px);
   -webkit-transform: translate(-50%, -25px);
}


/* ===================== *
 * ## Chart Component ##
 * ===================== */

.casper-chart-component .chart-export-button {
   display: flex;
   flex-direction: row;
   gap: 5px;
   padding: 0 5px;
}

.casper-chart-component .chart-export-button .icon {
   height: 22px;
   opacity: 1;
   order: 1;
   padding: 3px;
   width: 22px;
   transition: opacity .33s;
}

.casper-chart-component .chart-export-button:hover .icon { opacity: 1; }

.casper-chart-component .chart-export-button .label {
   flex: 1;
   line-height: 22px;
   order: 0;
   text-align: right;
   transition: color .33s;
   white-space: nowrap;
}

.casper-chart-component .role-enlarge {
   cursor: pointer;
   order: 999;
   flex: 0 1 24px;
   height: 28px;
   padding: 5px;
   position: relative;
}

.casper-chart-component .role-enlarge svg {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;

   transition: fill .33s;
}

.casper-chart-component .role-enlarge #resize_enlarge { display: block; }
.casper-chart-component .role-enlarge #resize_shrink { display: none; }

.casper-chart-component.enlarged .role-enlarge #resize_enlarge { display: none; }
.casper-chart-component.enlarged .role-enlarge #resize_shrink { display: block; }


/* ============================ *
 * ## Legacy Chart Component ##
 * ============================ */

/*.legacy-chart-component {
   height: 204px;
   padding-bottom: 5px;
   padding-right: 5px;
   width: 189px;
}*/

.legacy-chart-component .role-HC {
   height: 100%;
   width: 100%;
}

.legacy-chart-component .role-content { max-height: none; }

.legacy-chart-component .role-subheader .role-icon { flex: 0 1 6px; }
.legacy-chart-component .role-subheader .role-title {
   font-weight: normal;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.legacy-chart-component .role-no-data { display: none; }

.legacy-chart-component.cs_2 { width: 378px; }
.legacy-chart-component.cs_3 { width: 567px; }
.legacy-chart-component.cs_4 { width: 756px; }
.legacy-chart-component.cs_5 { width: 945px; }
.legacy-chart-component.cs_6 { width: 1134px; }
.legacy-chart-component.cs_7 { width: 1323px; }
.legacy-chart-component.cs_8 { width: 1512px; }
.legacy-chart-component.cs_9 { width: 1701px; }
.legacy-chart-component.cs_10 { width: 1890px; }

.legacy-chart-component.rs_2 { height: 408px; }
.legacy-chart-component.rs_3 { height: 612px; }
.legacy-chart-component.rs_4 { height: 816px; }


/* ============================== *
 * ## Legacy Noise Level Chart ##
 * ============================== */

.legacynoiselevel .button-container {
   align-items: center;
   display: flex;
   flex-direction: row;
   gap: 10px;
   margin-right: 10px;
   order: 2;
}
.legacynoiselevel .button-container > div { cursor: pointer; }

.legacynoiselevel .button-container .download {
   height: 17px;
   order: 1;
   width: 17px;
}

.legacynoiselevel .button-container .pause,
.legacynoiselevel .button-container .play {
   height: 14px;
   margin-right: 0;
   order: 0;
   width: 10px;
}


/* ========== *
 * ## Grid ##
 * ========== */

.grid-container {
   float: left;
   padding: 10px 10px 0 10px;
   z-index: 1;
}
.grid-container + .grid-container { padding: 0 10px; }

.page[data-page="dashboard"] > .grid-container {
   order: 1;
   overflow: hidden;
}
.page[data-page="dashboard"] > .page-ui-element-container {
   background-color: var(--white);
   order: 0;
   padding: 10px;
}

.grid-header {
   background: #FFFFFF;
   border-radius: 6px;
   box-shadow: 0px 1px 5px 1px rgba(0 0 0 / 25%);
   display: flex;
   font-size: 14px;
   font-weight: bold;
   height: 30px;
   line-height: 30px;
   padding-left: 10px;
   text-transform: uppercase;
}

.dashboard-grid {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 10px;
}

.dashboard-grid .grid-container,
.dashboard-grid .grid-container + .grid-container {
   padding: 0;
}


/* ============== *
 * ## Analysis ##
 * ============== */

.analysis-chart { height: 100%; }

.analysis-chart-settings {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
}

.analysis-chart-settings .flex-column { gap: 10px; }
.analysis-chart-settings .content-row { gap: 10px; }
.analysis-chart-settings .content-row .row-total + .column { margin-left: 10px; }

.analysis-chart-settings .chart-row { z-index: 90; }
.analysis-chart-settings .table-row-1 { z-index: 80; }
.analysis-chart-settings .table-row-2 { z-index: 70; }

.analysis-prop-list {
   width: 150px;
}
.analysis-prop-list .display-wrapper,
.analysis-prop-list .role-listitems {
   border-style: solid;
   border-width: 1px;
}

.analysis-prop-list .display-wrapper { height: 20px }
.analysis-prop-list .role-listitems .list-item[data-value] { height: 20px; }

.analysis-prop-list .role-display,
.analysis-prop-list .role-listitems .list-item[data-value],
.analysis-prop-list .role-placeholder {
   line-height: 20px;
   text-transform: uppercase;
}

.analysis-prop-list .role-list { padding-top: 15px; }

.analysis-prop-list .role-list .tip { top: 25px; }
.analysis-prop-list .role-list .tip-container { height: 16px; }
.analysis-prop-list.list-open .role-list .tip {
   border-width: 1px 0 0 1px;
   border-style: solid;
   top: 15px;
}

.analysis-prop-list .display-wrapper .list-toggle {
   padding: 3px;
   width: 20px;
}

.analysis-prop-list .role-listitems .list-item[data-value].select { font-weight: bold; }

.analysis-prop-list-label {
   float: left;
   line-height: 20px;
   padding-right: 5px;
   position: relative;
   text-transform: uppercase;
}
.analysis-prop-list-label:after {
   content: ":";
   position: absolute;
   right: 0;
   top: 0;
}

.analysis-prop-list + .analysis-prop-list-label { margin-left: 20px; }

.analysis-chart-settings .flex-row .row-label {
   line-height: 20px;
   text-transform: uppercase;
}

.analysis-chart-settings .aggregate-row,
.analysis-chart-settings .display-row {
   gap: 20px;
}

.analysis-chart-settings .checkbox,
.analysis-chart-settings .group-checkbox {
   flex-direction: row;
   gap: 5px;
   height: 20px;
}

.analysis-chart-settings .checkbox .role-label,
.analysis-chart-settings .group-checkbox .role-label {
   line-height: 20px;
   order: 1;
   text-transform: uppercase;
}

.analysis-chart-settings .checkbox .role-button,
.analysis-chart-settings .group-checkbox .role-button {
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
   height: 100%;
   padding: 4px;
   width: 20px;
}

.analysis-chart-settings .checkbox .role-button .icon,
.analysis-chart-settings .group-checkbox .role-button .icon {
   height: 100%;
   opacity: 0;
   width: 100%;

   transition: opacity .33s;
}

.analysis-chart-settings .checkbox:not(.checked) .role-button:hover .icon,
.analysis-chart-settings .group-checkbox:not(.checked) .role-button:hover .icon {
   opacity: .5;
}

.analysis-chart-settings .checkbox.checked .role-button .icon,
.analysis-chart-settings .group-checkbox.checked .role-button .icon {
   opacity: 1;
}


/* ================== *
 * ## Tracks Layer ##
 * ================== */

.tracks-layer .map-icon-label-container .map-icon-label { text-transform: uppercase; }


/* ======================= *
 * ## Track Point Layer ##
 * ======================= */

.track-point-label {
   display: flex;
   flex-direction: column;

   -webkit-transition: bottom .25s, transform .5s
}

.track-point-label .label-row.callsign { font-weight: bold; }
.track-point-label .label-row.altitude,
.track-point-label .label-row.speed {
   display: flex;
   flex-direction: row;
   gap: 5px;
}

.track-point-label .label-row.callsign       { order: 0; }
.track-point-label .label-row.datetime       { order: 1; }
.track-point-label .label-row.position       { order: 2; }
.track-point-label .label-row.altitude       { order: 3; }
.track-point-label .label-row.speed          { order: 4; }

.track-point-label .label-row.altitude .aal  { order: 0; }
.track-point-label .label-row.altitude .msl  { order: 1; }
.track-point-label .label-row.altitude .palt { order: 2; }
.track-point-label .label-row.altitude .fl   { order: 3; }

.track-point-label .label-row.speed .gs      { order: 0; }
.track-point-label .label-row.speed .ias     { order: 1; }
.track-point-label .label-row.speed .tas     { order: 2; }


/* ==================== *
 * ## Noise Editable ##
 * ==================== */

.noise-editable.set-shown .role-content {
   z-index: 9;
}

.noise-editable [data-role='edit'] {
   float: left;
   position: relative;
   text-transform: uppercase;
}

.noise-editable [data-role='edit'] > span {
   position: relative;
   float: left;
}
.noise-editable [data-role='edit'] > span + span { margin-left: 5px; }

.noise-editable [data-role='edit'] > .btn {
   border-style: dotted;
   border-width: 0 0 1px 0;
   cursor: pointer;
}

.noise-editable [data-role='edit'][data-edit-type='annotation'] > .btn,
.noise-editable [data-role='edit'][data-edit-type='boolean'] > .btn {
   border-width: 0;
}

.noise-editable [data-role='edit'][data-edit-type='annotation'] > .btn { font-size: 16px; }

.noise-editable [data-role='edit'] > .btn:hover,
.noise-editable [data-role='edit'].set-shown > .btn {
   border-style: solid;
}

.noise-editable [data-role='edit'][data-edit-type='annotation'] > .btn:hover,
.noise-editable [data-role='edit'][data-edit-type='boolean'] > .btn:hover {
   font-weight: bold;
}

.noise-editable .edit-set-container {
   border-radius: 4px;
   border-style: solid;
   border-width: 1px;
   display: flex;
   flex-direction: column;
   max-height: 100px;
   overflow-y: auto;
   padding: 4px;
   position: absolute;
   z-index: 9999;
}

.noise-editable .edit-set-container[horizontal-align="left"] { left: 0; }
.noise-editable .edit-set-container[horizontal-align="right"] { right: 0; }

.noise-editable .edit-set-container[vertical-align="bottom"] {
   margin-top: 5px;
   top: 100%;
}
.noise-editable .edit-set-container[vertical-align="top"] {
   top: 0;
   transform: translate(0, -100%); 
}

.noise-editable .edit-set-container .edit-set-value {
   cursor: pointer;
   height: 18px;
   line-height: 18px;
   white-space: nowrap;
}
.noise-editable .edit-set-container .edit-set-value.selected { font-weight: bold; }

.noise-editable.allow-overflow { z-index: 999; }
.noise-editable.allow-overflow .role-content,
.noise-editable.allow-overflow .role-content .content-wrapper {
   overflow: visible;
}


/* =================== *
 * ## Noise Wrapper ##
 * =================== */

.grid-item .noise-wrapper {
   height: 100%;
   width: 100%;
}

.grid-item .noise-wrapper .role-content { max-height: none; }

.noise-wrapper { position: relative; }
.noise-wrapper.single-out { z-index: 9999; }

.noise-wrapper:before {
   background-color: rgba(0,0,0,.33);
   content: "";
   height: 100vh;
   left: 0;
   opacity: 0;
   pointer-events: none;
   position: fixed;
   top: 0;
   width: 100vw;

   transition: opacity .33s;
}

.noise-wrapper.single-out:before {
   opacity: 1;
   pointer-events: all;
}

.noise-wrapper > * { z-index: 1; }
.noise-wrapper:before { z-index: 0; }


/* ============================================================================= *
 * ## TESTING - Only use this section for temporarily testing functionalities ##
 * ============================================================================= */

.alert-list .list-row .alert-class .icon {
   border-radius: 50%;
   height: 10px;
   left: 5px;
   position: absolute;
   top: 5px;
   width: 10px;
}

.alert-list .list-row .alert-class.RED .icon { background-color: #EE042B; }
.alert-list .list-row .alert-class.AMBER .icon { background-color: #E28743; }

.page .panels .noise-levels-over-time { width: 455px; }


/* ================= *
 * ## Highcharts  ##
 * ================= */

.casper-component:not(.legacy-chart-component) .highcharts-container svg text {
   font-family: "Open Sans", sans-serif;
}

/* ======================= *
 * ## Columns Interface ##
 * ======================= */

.columns-dropdown {
   left: 0;
   position: absolute;
   top: 0;
   width: auto;
}

.columns-dropdown { order: -1; }
.columns-dropdown > .role-list > .list-container {
   border-radius: 6px;
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   margin-right: 15px;
   min-width: auto;
   position: absolute;
   right: 100%;
   top: 0;
}

.columns-dropdown > .role-list > .list-container > .header {
   text-align: center;
}

.columns-dropdown > .role-list > .list-container > .role-listitems {
   background-color: #FFF;
}

.columns-dropdown .column-assignment-container {
   height: 490px;
   pointer-events: all;
}

.columns-dropdown .column-assignment-container > .container-row { padding: 0 10px; }
.columns-dropdown .column-assignment-container > .container-row:last-child { padding-bottom: 10px; }

.columns-dropdown .column-assignment-container > .header {
   padding: 0 10px;
   margin-bottom: 10px;
}


/* ==================== *
 * ## Query Dropdown ##
 * ==================== */

.popup-dropdown {
   left: 0;
   order: -1;
   position: absolute;
   top: 0;
   width: auto;
}

.popup-dropdown > .role-list > .list-container {
   border-radius: 6px;
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   margin-right: 15px;
   min-width: auto;
   position: absolute;
   right: 100%;
   top: 0;
   z-index: 9999;
}

.popup-dropdown .load-query,
.popup-dropdown .save-query {
   pointer-events: all;
}

.popup-dropdown .header,
.popup-dropdown .prop-container .label {
   font-weight: bold;
   text-transform: uppercase;
}

.popup-dropdown .header {
   border-radius: 6px 6px 0 0;
   border-style: solid;
   border-width: 0 0 1px 0;
   height: 28px;
   line-height: 28px;
   padding: 0 10px;
   pointer-events: none;
   width: 100%;
}


.popup-dropdown .group-checkbox,
.popup-dropdown .html-cb-container,
.popup-dropdown .html-rb-container {
   display: flex;
   flex-direction: row;
   gap: 10px;
   height: 20px;
   pointer-events: all;
   position: relative;
}

.popup-dropdown .group-checkbox .role-button,
.popup-dropdown .html-cb-container .btn {
   border-style: solid;
   border-width: 1px;
   cursor: pointer;
   height: 100%;
   order: 1;
   padding: 4px;
   width: 20px;
}

.popup-dropdown .html-cb-container .btn {
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;

   background: #DBDBDB;
   border-color: #B0B0B0;
}

.popup-dropdown .group-checkbox .role-button .icon,
.popup-dropdown .html-cb-container .btn .icon {
   height: 100%;
   opacity: 0;
   width: 100%;

   transition: opacity .33s;
}

.popup-dropdown .group-checkbox .role-button:hover .icon,
.popup-dropdown .html-cb-container input:not(:disabled):hover + .btn .icon {
   opacity: .5;
}

.popup-dropdown .group-checkbox.checked .role-button .icon,
.popup-dropdown .html-cb-container input:checked + .btn .icon {
   opacity: 1;
}

.popup-dropdown .html-cb-container input:disabled,
.popup-dropdown .html-cb-container input:disabled ~ .btn,
.popup-dropdown .html-cb-container input:disabled ~ label {
   cursor: default !important;
}

.popup-dropdown .html-cb-container input:disabled ~ .btn,
.popup-dropdown .html-cb-container input:disabled ~ label {
   opacity: .5;
}

.popup-dropdown .group-checkbox .role-label,
.popup-dropdown .html-cb-container label,
.popup-dropdown .html-rb-container label {
   cursor: pointer;
   line-height: 20px;
   order: 3;
   padding-left: 0;
   text-transform: uppercase;
   white-space: nowrap;
}

.popup-dropdown .html-cb-container input,
.popup-dropdown .html-rb-container input {
   cursor: pointer;
   height: 20px;
   opacity: 0;
   order: 1;
   width: 20px;
}

.popup-dropdown .html-rb-container .icon {
   cursor: pointer;
   height: 100%;
   left: 0;
   order: 2;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 20px;
}

.popup-dropdown .html-rb-container .icon:after,
.popup-dropdown .html-rb-container .icon:before {
   border-radius: 50%;
   content: "";
   cursor: pointer;
   height: 12px;
   left: 50%;
   position: absolute;
   top: 50%;
   width: 12px;

   transform: translate(-50%, -50%);
}

.popup-dropdown .html-rb-container .icon:after {
   opacity: 0;
   z-index: 1;

   background-color: #000000;

   transition: opacity .33s;
}
.popup-dropdown .html-rb-container input:hover + .icon:after { opacity: .5; }
.popup-dropdown .html-rb-container input:checked + .icon:after { opacity: 1; }

.popup-dropdown .html-rb-container .icon:before {
   z-index: 0;

   background-color: #DBDBDB;
   border: 1px solid #B0B0B0;
}


.popup-dropdown .prop-container .label {
   height: 20px;
   line-height: 20px;
}

.popup-dropdown .container-row { padding: 0 10px; }
.popup-dropdown .container-row:last-child { padding-bottom: 10px; }

.popup-dropdown .description textarea {
   border-color: #B0B0B0;
   height: 100px;
   width: 300px;
}

.popup-dropdown .title input {
   border-color: #B0B0B0;
   background-color: #FFF;
   border-width: 1px;
   border-style: solid;
}

.popup-dropdown .container-row.buttons {
   justify-content: end;
}

.popup-dropdown .container-row.buttons .gui-button {
   background: #636363;
   border-radius: 4px;
   cursor: pointer;
   height: 20px;
   line-height: 20px;
   pointer-events: all;
   position: relative;
   text-align: center;
   text-transform: uppercase;
}

.popup-dropdown .container-row.buttons .gui-button:hover { background: #2681FD; }
.popup-dropdown .container-row.buttons .gui-button .role-label {
   color: #FFF;
   padding: 0 10px;
   z-index: 0;
}

.popup-dropdown .container-row.buttons .gui-button .role-button {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
}

.popup-dropdown .query-list { width: 500px; }

.popup-dropdown .query-list .list-row .list-cell[data-column='delete'] {
   padding: 0;
   width: 20px;
}

.popup-dropdown .query-list .list-row .list-cell[data-column='delete'] .icon_interaction {
   height: 20px;
   left: 0;
   padding: 4px;
   position: absolute;
   stroke-width: 3px;
   top: 0;
   width: 20px;
}
.popup-dropdown .query-list .list-row .list-cell[data-column='delete']:hover .icon_interaction {
   stroke-width: 8px;
}

.popup-dropdown .save-query .disclaimer {
   color: var(--grey);
   font-style: italic;
}

/* ================ *
 * ## Query List ##
 * ================ */

.query-list span.description {
   display: block;
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.query-list .role-list-scroller {
   max-height: 250px;
   min-height: 250px;
}


/* ===================== *
 * ## Generate Report ##
 * ===================== */

.generate-report-component .role-selectors {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.generate-report-component .role-selectors .row {
   display: flex;
   flex-direction: row;
   font-size: 11px;
   gap: 10px;

   --order: 999;
}

/* ordering and z-indexing */
.generate-report-component .row[data-selector="CAS_PERIOD"] {  --order: 0; }
.generate-report-component .row[data-selector="FROM"] {        --order: 1; }
.generate-report-component .row[data-selector="UPTO"] {        --order: 2; }
.generate-report-component .row[data-selector="YEAR"] {        --order: 3; }
.generate-report-component .row[data-selector="SEASON"] {      --order: 4; }
.generate-report-component .row[data-selector="QUARTER"] {     --order: 5; }
.generate-report-component .row[data-selector="MONTH"] {       --order: 6; }
.generate-report-component .row[data-selector="WEEK"] {        --order: 7; }
.generate-report-component .row[data-selector="DAY"] {         --order: 8; }
.generate-report-component .row[data-selector="NMT"] {         --order: 9; }
.generate-report-component .row[data-selector="STATION"] {     --order: 10; }

.generate-report-component .role-selectors .row {
   order: var(--order);
   z-index: calc(999 - var(--order));
}

.generate-report-component .role-selectors .row > .label {
   flex: 1;
   font-weight: bold;
   height: 22px;
   line-height: 22px;
   text-transform: capitalize;
}

.generate-report-component .role-selectors .row > .value {
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   width: 200px;
}

.generate-report-component .role-selectors .period-label {
   float: left;
   line-height: 22px;
   position: relative;
}


/* =================== *
 * ## Analysis Page ##
 * =================== */

.analysis-page {
   padding: 0 10px 10px 10px;
}

.analysis-page .chart-settings .row-set-x { z-index: 3; }
.analysis-page .chart-settings .row-set-serie { z-index: 2; }
.analysis-page .chart-settings .row-set-charttype { z-index: 1; }
.analysis-page .chart-settings .row-set-stacking { z-index: 0; }

.analysis-page .options-container { padding-top: 10px; }

.analysis-page .result-container {
   flex: 1;
   overflow: auto;
}

.analysis-page .result-container > .chart {
   border-color: #E0E0E0;
   border-style: solid;
   border-width: 0px 1px 1px;
   min-height: 100%;
}

.analysis-page .pivot-container,
.analysis-page .pivot-container .ui-header {
   border-color: var(--grey-light);
   border-style: solid;
}

.analysis-page .pivot-container {
   border-width: 0 1px 1px 1px;
   height: 100%;
}

.analysis-page .pivot-container .ui-header {
   border-width: 0 0 1px 0;
   display: flex;
   flex-direction: row;
}

.analysis-page .pivot-container .ui-header .title {
   flex: 1;
   padding-left: 5px;
}

.analysis-page .pivot-container .ui-header .role-tools > * {
   float: left;
   height: 100%;
   padding: 0 6px;
   position: relative;
}

.analysis-page .pivot-container .ui-header .role-tools .dropdown-component .display-wrapper .list-toggle { width: 16px; }

.analysis-page .pivot-container .role-pivot {
   padding: 5px;
}

.analysis-page .ui-dynamic-list {
   float: left;
   position: relative;
   width: 300px;
}

.analysis-page .ui-dynamic-list .list {
   max-height: 60px;
   min-height: 60px;
}

.analysis-page .row-code-print { justify-content: end; }
.analysis-page .row-code-print .value { align-items: end; }
.analysis-page .row-switch-values { justify-content: center; }

/* z-indexes */
.analysis-page .row-output {              z-index: 99; }
.analysis-page .row-x-row {               z-index: 98; }
.analysis-page .row-switch-values {       z-index: 97; }
.analysis-page .row-serie-column {        z-index: 96; }
.analysis-page .row-value {               z-index: 95; }
.analysis-page .row-set-charttype {       z-index: 94; }
.analysis-page .row-set-stacking {        z-index: 93; }
.analysis-page .row-zero-value {          z-index: 92; }
.analysis-page .row-percentage-format {   z-index: 91; }

.column-to-row-popup,
.row-to-column-popup {
   max-width: 300px;
}

/* ================= *
 * ## Job Manager ##
 * ================= */

.job_manager-table .popup-field .ui-button {
   height: 18px;
   line-height: 18px;
}

.movement-n {
   display: flex;
   flex-direction: row;
   user-select: none;
}

.movement-n svg {
   cursor: pointer;
   width: 10px;
}

.movement-n .n {
   margin-left: 2px;
   margin-right: 2px;
}

.movement-n svg.plusminus > * {
    pointer-events: none;
}


/* =================== *
 * ## Alert Details ##
 * =================== */

.alert-details .details-table[data-type] tr[data-types] { display: none; }

.alert-details .details-table[data-type="GATE"] tr[data-types*="GATE"],
.alert-details .details-table[data-type="NOISE_EVENT"] tr[data-types*="NOISE_EVENT"] {
   display: table-row;
}


/* ============================== *
 * ## Query Dropdown Component ##
 * ============================== */

.query-dropdown-component .role-name {
   display: none;
   float: left;
   font-weight: bold;
   line-height: 27px;
   padding-right: 10px;
   position: relative;
   text-transform: uppercase;
   white-space: nowrap;
}

.query-dropdown-component.query-active .role-name { display: block; }


/* ====================== *
 * ## Alert Admin Page ##
 * ====================== */

.alert-definition-form .level-type-selectors {
   display: flex;
   flex-direction: row;
   gap: 10px;
}

input[type="checkbox"] {
   position: relative;
   top: 3px;
   margin: 0px 2px;
}


/* ==================== *
 * ## NMT Admin Page ##
 * ==================== */

.nmt-job-popup .content {
   gap: 4px;
}

.nmt-job-popup .content .popup-subheader,
.nmt-job-popup .content .popup-options > span {
   font-weight: bold;
   line-height: 20px;
   text-transform: uppercase;
}

.nmt-job-popup .popup-options,
.nmt-job-popup .popup-subheader {
   width: 100%;
}

.nmt-job-popup .popup-subheader {
   height: 20px;
   line-height: 20px;
}

.nmt-job-popup .popup-options{
   display: grid;
   gap: 4px;
   grid-template-columns: auto auto;
}

.nmt-job-popup .popup-options .script-cb {
   display: grid;
   gap: 0 4px;
   grid-template-columns: 20px auto;
   grid-template-rows: 20px;
   line-height: 20px;
   white-space: nowrap;
}

.nmt-job-popup .popup-options .script-cb input {
   line-height: 20px;
   margin: 2px;
   top: 0;
}


/* ================================= *
 * ## Top Aircraft Type - Airline ##
 * ================================= */

.top-ac_type-airline {
   display: flex;
   height: 100%;
   width: 100%;
}

.top-ac_type-airline .type-column {
   height: 100%;
   width: 50%;
}

.top-ac_type-airline .type-column {
   border-color: var(--grey-light);
   border-style: solid;
}
.top-ac_type-airline .type-column[data-type='airlines'] { border-width: 0 2px 0 0; }
.top-ac_type-airline .type-column[data-type='ac_types'] { border-width: 0 0 0 2px; }


.top-ac_type-airline .type-column > .header,
.top-ac_type-airline .type-column > .rows {
   width: 100%;
}

.top-ac_type-airline .type-column > .header {
   flex: 0 0 10%;
   text-align: center;
}
.top-ac_type-airline .type-column > .rows { flex: 1; }

.top-ac_type-airline .type-column .rows .num {
   display: flex;
   justify-content: center;
}

.top-ac_type-airline .type-container { flex: 1; }

.top-ac_type-airline .rows .airline {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   height: 50%;
   width: calc(100% - 40px);
}


/* ==================== *
 * ## Live Dashboard ##
 * ==================== */

body.live-dashboard[data-live-dashboard] { overflow: hidden; }


/* ===================== *
 * ## Page Init Steps ##
 * ===================== */

.period_warning_grid {
   display: grid;
   float: left;
   font-weight: bold;
   grid-template-columns: min-content min-content;
   grid-template-rows: auto auto;
   grid-column-gap: 10px;
   left: 50%;
   position: relative;
   transform: translate(-50%, 0);
   white-space: nowrap;
}