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

@font-face {
   font-family: Officina;
   src: url('itc_officina_sans_book-webfont.eot');
   src: local('Officina'), url('itc_officina_sans_book-webfont.ttf');
   font-weight: normal;
}

@font-face {
   font-family: Officina;
   src: url('itc_officina_sans_bold-webfont.eot');
   src: local('Officina'), url('itc_officina_sans_bold-webfont.ttf');
   font-weight: bold;
}

@font-face {
   font-family: LetterGothic;
   src: url('LetterGothicStd.otf');
   src: local('LetterGothic'), url('LetterGothicStd.otf'), format('opentype');
   font-weight: normal;
}

@font-face {
   font-family: LetterGothic;
   src: url('LetterGothicStd-Bold.otf');
   src: local('LetterGothic'), url('LetterGothicStd-Bold.otf'), format('opentype');
   font-weight: bold;
}

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

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

body {
   background-color: #808E89;
   margin: 0px;
   font-family: Officina;
   font-size: 12px;
   margin-bottom: 0px !important;
}


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

.admin-div .header .title { padding-left: 20px; }
.admin-div .body {
   padding: 20px;
}

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

.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;
   overflow: hidden;
}

.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 {
   flex: 1;
   overflow: hidden;
   position: relative;
   width: 100%;
}
.casper-legacy-component .role-content { max-height: 306px; }

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

.admin-div .header,
.casper-component .role-subheader {
   border-style: solid;
   border-width: 0 0 1px 0;
   display: flex;
   flex: 0;
   width: 100%;
}

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

.admin-div .header .title,
.casper-component .role-subheader .role-title {
   flex: 1;
   font-weight: bold;
   line-height: 28px;
   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: 1; }
.casper-component .role-subheader .role-tools {order: 99; }

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

.casper-component .role-subheader .role-tools .dropdown-component .display-wrapper .list-toggle { width: 17px; }

/* ============================= *
 * ## 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,
.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%;
}

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

.casper-chart-component .role-content .content-wrapper,
.f3-rendered .role-content .content-wrapper {
   padding: 0;
}
.noise-chart .role-content .content-wrapper { padding-top: 14px; }
.vp-chart .role-content .content-wrapper { padding-top: 0; }


/* ================ *
 * ## 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%;
   opacity: .5;
   stroke-width: 0;
   width: 19px;

   transition: opacity .33s;
}
.role-tools > .gui-button .role-button:hover { opacity: .75; }

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

.role-tools > .coupling-button .role-button {
   stroke-width: 1px;
   width: 14px;
}

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


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

.role-tools .tools-dropdown.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 .tools-dropdown.list-open:not(:last-child):after { border-right-width: 1px; }

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

.role-tools .tools-dropdown .list-toggle {
   opacity: .5;
   transition: opacity .33s;
}
.role-tools .tools-dropdown.list-closed .display-wrapper:hover .list-toggle { opacity: .75; }
.role-tools .tools-dropdown.list-open .list-toggle { opacity: 1; }

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

.role-tools .tools-dropdown .list-container .gui-button {
   flex-direction: row;
   pointer-events: all;
}

.role-tools .tools-dropdown .list-container .gui-button .role-button {
   height: 22px;
   opacity: .5;
   order: 1;
   padding: 4px 0;
   width: 16px;

   transition: opacity .25s;
}
.role-tools .tools-dropdown .list-container .gui-button .icon {
   height: 100%;
   pointer-events: none;
   width: 100%;
}
.role-tools .tools-dropdown .list-container .gui-button:hover .role-button { opacity: 1; }
.role-tools .tools-dropdown .list-container .gui-button .icon.radar-icon:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   background-color: #FF00FF;
   width: 100%;
   height: 100%;
}

.role-tools .tools-dropdown .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 .tools-dropdown .tip-container { height: 1px; }
.role-tools .tools-dropdown .lc-collapsed + .tip-container { height: 0px; }


/* ============= *
 * ## 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.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;
   padding: 5px 5px 0 5px;
   z-index: 0;
}

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

   transition: padding .33s;
}

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

.page .main {
   clear: left;
   display: flex;
   float: left;
   height: 490px;
   margin-bottom: 5px;
   max-width: calc(100vw - 30px);
   position: relative;
   width: 100%;
}

.page .main .lists { flex: 0; }
.page .main .lists .list-component {
   height: 100%;
   width: 675px;
}

.page .panels {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   float: left;
   position: relative;
}

.page .panels > * {
   height: 335px;
   margin: 0 5px 5px 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 .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: 225px; }
.page .panels .casper-legacy-component.flightext { width: 455px; }
.page .panels .casper-legacy-component.issue { width: 605px; }
.page .panels .rt-audio-component { width: 500px; }

.page #pageSettings {
   display: none;
   background-color: #FFFFFF;
   border-radius: 6px 0px 6px 6px;
   box-sizing: border-box;
   float: left;
   margin: 0px 5px 5px 0px;
   overflow: hidden;
   padding: 6px 6px 6px 6px;
   position: relative;
   width: 100%;
}


/* ==================== *
 * ## 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; }


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

.page .map-container {
   flex: 1;
   float: left;
   height: 100%;
   padding: 5px;
   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 {
   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 {
   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: Officina !important; }


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

.page .main[map-size="flexible"] .map-container { min-width: 690px; }
.page .main[map-size="large"] .map-container {}

.page .main[map-size="small"] { width: auto; }
.page .main[map-size="small"] .map-container {
   max-width: 700px;
   width: 700px;
}


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

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


/* ================== *
 * ## 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;
   justify-content: flex-end;
   right: 10px;
   top: 10px;
}

.map-controls .top-right > div {
   flex: 0 0 30px;
   margin-right: 5px;
}
.map-controls .top-right > div:last-child { margin-right: 0; }

.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-options-control > .role-list > .list-container {
   border-radius: 5px 0 5px 5px;
   box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
   float: right;
}

.map-controls .map-controls-button {
   border-radius: 4px;
   box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25);
   height: 30px;
   pointer-events: all;
}

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

.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 !important;
}

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

.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-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 .top-right > .interaction-buttons { margin-right: 15px; }

.map-controls .interaction-buttons .map-interaction-button {
   border-left: 1px solid rgba(0,0,0,.25);
   border-radius: 0;
   width: 30px;
}
.map-controls .interaction-buttons .map-interaction-button:first-child {
   border-left: 0px;
   border-radius: 4px 0 0 4px;
}
.map-controls .interaction-buttons .map-interaction-button:last-child { border-radius: 0 4px 4px 0; }

/* ## 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 .top-right .location-search { margin-right: 15px; }
.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: 11px;
   position: relative;
}

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

/* ## map options ## */
.map-controls .map-options-container .map-options {
   display: flex;
   flex: 1;
   flex-direction: row;
   padding: 10px 0;
}

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

.map-controls .map-options .map-options-column:first-child { border-width: 0; }

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

.map-controls .map-options-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 .map-options-section-header {
   font-weight: bold;
   padding-bottom: 5px;
   text-transform: uppercase;
   white-space: nowrap;
}

.map-controls .map-options-section-content {
   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%;
   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 .role-label,
.map-controls .map-options-group .label {
   flex: 1;
   font-weight: bold;
   line-height: 22px;
   padding: 0 10px;
   text-transform: uppercase;
   white-space: nowrap;
}

.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; }

/* ## 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 Interaction ##
 * ===================== */

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

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


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

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

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

.details-table > tbody > tr > td {
   font-size: 9pt;
   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%;
}

/* =================== *
 * ## 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 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 {
   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;
   transform: translate(-5px, 5px);
   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;
}

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

.filter-item {
   display: inline-block;
   vertical-align: top;
   border-left: 1px solid #4f5c57;
   padding: 0px 10px;
   margin: 4px 0px;
   line-height: 20px;
}

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

.filter-item:first-child {
   border-left: 0px;
}

.filter-header {
   color: #FFFFFF;
}

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

.filter-value {
   display: inline-block;
   vertical-align: top;
   color: #9dbf4c;
   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 {
   display: inline-flex;
   writing-mode: vertical-lr;
   flex-wrap: wrap;
   align-content: flex-start;
}

.search-group .form-field {
   writing-mode: horizontal-tb;
   margin: 0 5px 15px 5px;
}

.search-group-wrapper {
   width: 100%;
   background: #364741;
   background: rgba(54,71,65, 0.9);
   z-index: 100;
   clear: both;
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   font-weight: bold;
   user-select: none;
}

.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-group, .search-actions {
   border-left: 1px solid rgba(121,136,131,0.5);
   box-sizing: border-box;
   display: table-cell;
   padding: 12px 10px 12px 10px;
   vertical-align: top;
}

.search-actions {
   border-left: 0px;
   border-right: 1px solid rgba(121,136,131,0.5);
   clear: both;
   float: right;
   margin: 0;
   padding: 5px 10px 10px;
   border-top: 1px solid rgba(121,136,131,0.5);
   margin-top: 5px;
   width: 100%;
}

.search-actions > .search-col {
   float: right;
}

.search-actions .search-col > * {
   display: inline-block;
   margin-left: 20px;
   margin-top: 5px;
}

.search-group:first-child { border-left: 0px; }

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

.search-group-scrollcontainer {
   border-bottom: 1px solid rgba(121,136,131,.5);
   border-right: 1px solid rgba(121,136,131,.5);
   box-sizing: border-box;
   display: flex;
   max-height: 550px;
   position: relative;
   width: 100%;
   overflow: auto;
}

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

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

.admin-div {
   position: relative;
   background-color: #ffffff;
   clear: left;
   grid-column: 1 / 5;
   grid-row: 1 / 10;
   /*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 {
   color: #a3b870;
   padding: 0 8px;
   text-transform: uppercase;
   font-size: 11pt;
   font-weight: normal;
}

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

.list-table .list-header th { padding-bottom: 5px; }

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

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

.list-component .role-content .content-wrapper {
   display: flex;
   flex-direction: column;
}

.list-component .list-row {
   cursor: pointer;
   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:first-child { border-radius: 6px 0 0 6px; }
.list-component .list-row .list-cell:last-child { border-radius: 0 6px 6px 0; }
.list-component .list-row .list-cell.sort-column { padding-left: 20px; }

.list-component .role-content .role-list-header-visual { flex: 0; }
.list-component .role-content .role-list-scroller { flex: 1; }

.list-component .role-content .role-list-header .list-cell,
.list-component .role-content .role-list-header-visual .list-cell {
   font-size: 11pt;
   text-transform: uppercase;
}

.list-component .role-content .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-content .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; }
.list-component .role-title {
   pointer-events: none;
   text-align: center;
}
.list-component .role-title .encapsulate { padding: 0 10px; }

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

.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_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 {
   -moz-border-radius: 5px;
   border-radius: 5px;

   display: inline-block;
   vertical-align: middle;
   padding: 10px 0px;
}

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

.popup-container > .header { padding-bottom: 5px; }
.popup-container > .content {
   border-bottom: 1px solid #cccccc;
   border-top: 1px solid #cccccc;
   padding-top: 10px;
   padding-bottom: 10px;
   text-align: left;
   max-height: 640px;
   overflow-y: auto;
}
.popup-container > .content .cke { width: 800px; }

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

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

.popup-container > .header > .close {
   background-image: url("../images/cross.png");
   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 {
   width: 800px;
   height: 300px;
}


/* ======================= *
 * ## 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
}


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

.casper-legacy-component.noise-event .role-coupling { display: none; }
.casper-legacy-component.noise-event .role-coupling.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; }

#page:not([data-page="flights"]) .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.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; }


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

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

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

.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;
   width: 100%;

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

.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;
   text-align: center;

   transform: translate(-50%,-10px);
   -webkit-transform: translate(-50%,-10px);
}

.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;
   opacity: .5;
   position: absolute;
   top: 0;
   width: 100%;

   transition: opacity .33s;
}

.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:hover,
.noise-event-player .role-pause_button:hover {
   opacity: .75;
}

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


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

.noise-chart .nmt-name {
   font-size: 10px;
   left: 0;
   line-height: 14px;
   padding-left: 5px;
   position: absolute;
   top: 0;
}


/* ================= *
 * ## 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%, -20px);
   -webkit-transform: translate(-50%, -20px);
}


/* ## 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;
}

.casper-chart-component .chart-export-button .icon {
   height: 22px;
   opacity: .5;
   order: 1;
   padding: 2px;
   width: 16px;
   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;
   padding-right: 6px;
   text-align: right;
   transition: color .33s;
   white-space: nowrap;
}

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

   transition: opacity .33s;
}

.casper-chart-component .role-enlarge:hover { opacity: 1; }

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

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

.casper-chart-component.enlarged .role-enlarge #enlarge { display: none; }
.casper-chart-component.enlarged .role-enlarge #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; }


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

.grid-container { float: left; }


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

.analysis-chart { height: 100%; }

.analysis-prop-list {
   margin-left: 5px;
   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;
   position: relative;
   text-transform: uppercase;
}

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


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

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


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