/* ===================================================================== */
/*  Root - CSS Variables                                                 */
/* ===================================================================== */
.login-screen {
    background-image: url('./Images/Airpland_LandingPage.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
  }
  .center-item-vertical{
    display: flex; 
    justify-content: center; 
    align-items: center;
  }
  
  /* Login and Splash Color */
  
  .login-screen,
  .layout-native .login-screen {
    background-color:#1e622a;
  }
  
  /* Header Color */
  
  .header,
  .header a,
  .menu-back {
    color: #ffffff;
  }
  
  .submenu-item,
  .submenu.active .submenu-item,
  .desktop .submenu.active .submenu-header:hover .submenu-item,
  .submenu.active .submenu-item a {
    color: #ffffff;
    opacity: 0.8;
  }
  
  .submenu-icon:before {
    border: 1px solid #ffffff;
    border-top: 0;
    border-right: 0;
    opacity: 0.8;
  }
  
  .submenu.active .submenu-icon:before {
    border: 1px solid #ffffff;
    border-top: 0;
    border-right: 0;
  }
  
  .submenu:hover .submenu-icon:before {
    border: 1px solid #ffffff;  
    border-top: 0;
    border-right: 0;  
    opacity: 1;
  }
  
  .app-menu-links a {
    color: #ffffff;
    opacity: 0.8;
  }
  
  .desktop .submenu:hover .submenu-item,
  .desktop .submenu-item a:hover {
    color: #ffffff;
    opacity: 1;
  }
  
  .desktop .submenu-items a:hover {
    background-color: #1e622a;
    color: #ffffff;
  }
  
  .layout-side .app-menu-content,
  .aside-overlay .app-menu-content,
  .tablet .app-menu-content,
  .phone .app-menu-content {
    background-color: #37b24d;
    color: #ffffff;
  }
  
  .submenu-items a.active, 
  .desktop .submenu-items a.active:hover, 
  .submenu.active.open .submenu-item
  .app-menu-links a:hover, 
  .app-menu-links a.active {
    color: #ffffff;
  }
  
  .menu-icon-line {
    background-color: #fff;
  }
  
  /* Username Color - applies the same header rules defined in the Theme Editor */
  .username-built-with-theme-editor {
    color: #ffffff;
  }
  
  .header i {
    color: #ffffff;
  }
  
  /* Footer Color - applies the same header rules defined in the Theme Editor */
  .footer-built-with-theme-editor {
    color: #ffffff;
  }
  
  .footer-built-with-theme-editor a,
  .footer-built-with-theme-editor a:visited {
    color: #ffffff;
    text-decoration-color: #ffffff;
  }
  
  
  .text-white {
  color: #fff;
  }
  
  .divider {
  display: flex;
  align-items: center;
  text-align: center;
  }
  
  .divider::after,
  .divider::before {
  content: "";
  border-bottom: 0.1em solid #fff;
  flex: 1;
  }
  
  .divider:not(:empty)::before {
  margin-right:1em;
  }
  
  .divider:not(:empty)::after {
  margin-left:1em;
  }
  hr {
    margin-top:40px;
    margin-bottom: 40px;
    border: 0.05em solid #e8ecef;
  }
  
  
  
  /* =========== Custom CSS =========== */
  /* ICON FONT */
  
  @font-face {
    font-family: 'icomoon';
    src:  url('./IconFonts/icomoon.eot');
    src:  url('./IconFonts/icomoon.eot') format('embedded-opentype'),
      url('./IconFonts/icomoon.ttf') format('truetype'),
      url('./IconFonts/icomoon.woff') format('woff'),
      url('./IconFonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-air-menu"], [class*=" icon-air-menu"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-air-menunoun_Airspace_1638214:before {
    content: "\e904";
  }
  .icon-air-menuarrow-shuffle:before {
    content: "\e900";
  }
  .icon-air-menuflow-switch:before {
    content: "\e901";
  }
  .icon-air-menuweather-partly-sunny:before {
    content: "\e902";
  }
  .icon-air-menunoun_aerospace_3944049:before {
    content: "\e903";
  }
  
  @font-face {
    font-family: 'Meteocons';
    src:  url('./IconFonts/Meteocons.eot');
    src:  url('./IconFonts/Meteocons.eot') format('embedded-opentype'),
      url('./IconFonts/Meteocons.ttf') format('truetype'),
      url('./IconFonts/Meteocons.woff') format('woff'),
      url('./IconFonts/Meteocons.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-meteocons-"], [class*=" icon-meteocons-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'Meteocons' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  */
  
  [class^="icon-ht-"], [class*=" icon-ht-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'HumidTemperature' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-meteocons-sunrise:before {
      content: "\e900";
    }
    .icon-meteocons-sun:before {
      content: "\e901";
    }
    .icon-meteocons-moon:before {
      content: "\e902";
    }
    .icon-meteocons-sun1:before {
      content: "\e903";
    }
    .icon-meteocons-windy:before {
      content: "\e904";
    }
    .icon-meteocons-wind:before {
      content: "\e905";
    }
    .icon-meteocons-snowflake:before {
      content: "\e906";
    }
    .icon-meteocons-cloudy:before {
      content: "\e907";
    }
    .icon-meteocons-cloud:before {
      content: "\e908";
    }
    .icon-meteocons-weather:before {
      content: "\e909";
    }
    .icon-meteocons-weather1:before {
      content: "\e90a";
    }
    .icon-meteocons-weather2:before {
      content: "\e90b";
    }
    .icon-meteocons-lines:before {
      content: "\e90c";
    }
    .icon-meteocons-cloud1:before {
      content: "\e90d";
    }
    .icon-meteocons-lightning:before {
      content: "\e90e";
    }
    .icon-meteocons-lightning1:before {
      content: "\e90f";
    }
    .icon-meteocons-rainy:before {
      content: "\e910";
    }
    .icon-meteocons-rainy1:before {
      content: "\e911";
    }
    .icon-meteocons-windy1:before {
      content: "\e912";
    }
    .icon-meteocons-windy2:before {
      content: "\e913";
    }
    .icon-meteocons-snowy:before {
      content: "\e914";
    }
    .icon-meteocons-snowy1:before {
      content: "\e915";
    }
    .icon-meteocons-snowy2:before {
      content: "\e916";
    }
    .icon-meteocons-weather3:before {
      content: "\e917";
    }
    .icon-meteocons-cloudy1:before {
      content: "\e918";
    }
    .icon-meteocons-cloud2:before {
      content: "\e919";
    }
    .icon-meteocons-lightning2:before {
      content: "\e91a";
    }
    .icon-meteocons-sun2:before {
      content: "\e91b";
    }
    .icon-meteocons-moon1:before {
      content: "\e91c";
    }
    .icon-meteocons-cloudy2:before {
      content: "\e91d";
    }
    .icon-meteocons-cloud3:before {
      content: "\e91e";
    }
    .icon-meteocons-cloud4:before {
      content: "\e91f";
    }
    .icon-meteocons-lightning3:before {
      content: "\e920";
    }
    .icon-meteocons-rainy2:before {
      content: "\e921";
    }
    .icon-meteocons-rainy3:before {
      content: "\e922";
    }
    .icon-meteocons-windy3:before {
      content: "\e923";
    }
    .icon-meteocons-windy4:before {
      content: "\e924";
    }
    .icon-meteocons-snowy3:before {
      content: "\e925";
    }
    .icon-meteocons-snowy4:before {
      content: "\e926";
    }
    .icon-meteocons-weather4:before {
      content: "\e927";
    }
    .icon-meteocons-cloudy3:before {
      content: "\e928";
    }
    .icon-meteocons-lightning4:before {
      content: "\e929";
    }
    .icon-meteocons-thermometer:before {
      content: "\e92a";
    }
    .icon-meteocons-compass:before {
      content: "\e92b";
    }
    .icon-meteocons-none:before {
      content: "\e92c";
    }
    .icon-meteocons-Celsius:before {
      content: "\e92d";
    }
    .icon-meteocons-Fahrenheit:before {
      content: "\e92e";
    }
    
    @font-face {
      font-family: 'HumidTemperature';
      src:  url('./IconFonts/HumidTemperature.eot');
      src:  url('./IconFonts/HumidTemperature.eot') format('embedded-opentype'),
        url('./IconFonts/HumidTemperature.ttf') format('truetype'),
        url('./IconFonts/HumidTemperature.woff') format('woff'),
        url('./IconFonts/HumidTemperature.svg') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
    
    @font-face {
      font-family: 'HumidTemperature';
      src:  url('./IconFonts/HumidTemperature.eot');
      src:  url('./IconFonts/HumidTemperature.eot') format('embedded-opentype'),
        url('./IconFonts/HumidTemperature.ttf') format('truetype'),
        url('./IconFonts/HumidTemperature.woff') format('woff'),
        url('./IconFonts/HumidTemperature.svg') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
      
    .icon-ht-humidity:before {
      content: "\e900";
    }
    .icon-ht-temperature:before {
      content: "\e901";
    }
    
    @font-face {
      font-family: 'ruler';
      src:  url('./IconFonts/ruler.eot');
      src:  url('./IconFonts/ruler.eot') format('embedded-opentype'),
        url('./IconFonts/ruler.ttf') format('truetype'),
        url('./IconFonts/ruler.woff') format('woff'),
        url('./IconFonts/ruler.svg') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
    
    .icon-ruler-ruler:before {
      content: "\e900";
    }
    
    .forecast-card {
        color: #fff;
        background-color: #61B16E;
        border-radius: 10px;
        padding: 20px;
    }
    .four-day-outlook-icon {
        font-size: 21px;
        height: 19px;
        margin-right: 5px;
    }
    .twenty-four-hour-forecast-icon {
        font-size: 38px;
        height: 34px;
        margin-right: 10px;
    }
    
    @font-face {
      font-family: 'Wind';
      src:  url('./IconFonts/Wind.eot');
      src:  url('./IconFonts/Wind.eot') format('embedded-opentype'),
        url('./IconFonts/Wind.ttf') format('truetype'),
        url('./IconFonts/Wind.woff') format('woff'),
        url('./IconFonts/Wind.svg') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
  
    .icon-wind-speed:before {
      content: "\e900";
    }
    .icon-wind-wind:before {
      content: "\e901";
    }
    .icon-wind-chevron-up:before {
      content: "\e902";
    }
    
    @font-face {
      font-family: 'project-overlay';
      src:  url('./IconFonts/project-overlay.eot');
      src:  url('./IconFonts/project-overlay.eot') format('embedded-opentype'),
        url('./IconFonts/project-overlay.ttf') format('truetype'),
        url('./IconFonts/project-overlay.woff') format('woff'),
        url('./IconFonts/project-overlay.svg') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
    
    [class^="icon-proj-"], [class*=" icon-proj-"] {
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'project-overlay' !important;
      speak: never;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
    
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-proj-permit:before {
      content: "\e902";
    }
    .icon-proj-start:before {
      content: "\e900";
    }
    .icon-proj-end:before {
      content: "\e901";
    }
    
    .airspace-popup .mapboxgl-popup-content {
      background-color: black;
      color: #ffffff;
      opacity: 0.8;
    }
    
    .airspace-popup .mapboxgl-popup-tip {
      opacity: 0.8;
    }
    
    .airspace-popup .mapboxgl-popup-tip {
        border-top-color: black;
        border-bottom-color: black;
    }
    
    .airspace-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
    .airspace-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    
    .airspace-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
        border-right-color: black;
    }
    
    .airspace-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
        border-left-color: black;
    }
    
    .airspace-popup .mapboxgl-popup-content .mapboxgl-popup-close-button {
        color: #eee;
    }
    
    .capitalize {
        text-transform: lowercase;
    }
    
    .capitalize:first-letter {
        text-transform: capitalize;
    }
    
    /* CSS Spinners https://github.com/jlong/css-spinners 
    
       *** MIT License ***
    */
    
    /* @-moz-keyframes timer-loader {
      0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes timer-loader {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes timer-loader {
      0% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    } */
    /* :not(:required) hides this rule from IE9 and below */
    /* .timer-loader:not(:required) {
      border: 6px solid #f7821c;
      -moz-border-radius: 24px;
      -webkit-border-radius: 24px;
      border-radius: 24px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      overflow: hidden;
      position: relative;
      text-indent: -9999px;
      width: 48px;
      height: 48px;
    } */
    /* .timer-loader:not(:required)::before {
      -moz-animation: timer-loader 1250ms infinite linear;
      -webkit-animation: timer-loader 1250ms infinite linear;
      animation: timer-loader 1250ms infinite linear;
      -moz-transform-origin: 3px 3px;
      -ms-transform-origin: 3px 3px;
      -webkit-transform-origin: 3px 3px;
      transform-origin: 3px 3px;
      background: #f7821c;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      content: '';
      display: block;
      position: absolute;
      width: 6px;
      height: 19.2px;
      left: 15px;
      top: 15px;
    } */
    /* .timer-loader:not(:required)::after {
      -moz-animation: timer-loader 15000ms infinite linear;
      -webkit-animation: timer-loader 15000ms infinite linear;
      animation: timer-loader 15000ms infinite linear;
      -moz-transform-origin: 3px 3px;
      -ms-transform-origin: 3px 3px;
      -webkit-transform-origin: 3px 3px;
      transform-origin: 3px 3px;
      background: #f7821c;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      content: '';
      display: block;
      position: absolute;
      width: 6px;
      height: 16px;
      left: 15px;
      top: 15px;
    } */
    
    .timer-loader {
        transform: scale(0.5); 
        margin: -8px;
    }
    
    .smaller-timer {
        transform: scale(0.4); 
        margin: -14px;
        margin-top: -10px;
    
    }
    
    .larger-timer {
        transform: none; 
        margin: 0;
    }
    
    .button-grp-is-loading-3d {
        filter: saturate(0);
    }
  /*   
    .smaller-timer:not(:required)::after, .smaller-timer:not(:required)::before {
        background: white;
    }
    
    .smaller-timer:not(:required) {
      border: 6px solid white;
    } */
    
    #loading-indicator-ortho-popup,
    #loading-message-ortho-popup {
        display: none;
    }
    
    #loading-box {
        transition: height 1s;
    }
    
    .details-button-group-item, .button-group-item.details-button-group-item {
        height: auto;
        padding: 4px 16px 4px 16px;
        font-size: 12px;
    }
    
    .button-group-item.button-group-selected-item.mission-item {
        background-color: #70C476;
        color: #ffffff;
    }
    
    .button-group-item.mission-item {
        border-color: #70C476;
        color: #70C476;
    }
    
    .select-on-map-btn, .btn.select-on-map-btn {
        height: 30px;
        width: 100%;
        margin-bottom: 10px;
    }
    .login-form {
        box-shadow: 0 0;
    }
    
    [data-upload].kml-upload {
        padding: 0;
        padding-left: 16px;
        padding-right: 16px;
    }
  
  
  .map-container {
    overflow: hidden;
    width:100%;
    height: 400px;
    position: absolute;
    top: 0px;
    z-index: 0;
  }
  
  .map-control{
    bottom: 30px;
    position: absolute;
    right: 10px;
    pointer-events: auto;
    background-color: white;
    /* opacity: 0.5;
     background-color: rgba(255,255,255, 0.6);*/
    padding: 5px;
    border-radius: 10px;
    z-index: 1;
  }
  .mapboxgl-ctrl-group.mapboxgl-ctrl button {
    filter: invert(63%) sepia(25%) saturate(723%) hue-rotate(78deg) brightness(95%) contrast(86%);
  }
  
  /* @import url(/AirPland/mapbox-gl.css);
  @import url(/AirPland/mapbox-gl-draw.css);
  
  .mapbox-div {
      width: 100%;
      height: 600px;
  }
  
  .map-layer-button-large {
      height: 75px;
      width: 75px;
      border-radius: 37.5px;
  }
  
  .map-layer-button-small {
      height: 50px;
      width: 50px;
      border-radius: 25px;
  }
  
  .map-layer-button, .btn-primary.center.display-flex.flex-direction-column.map-layer-button {
      margin-bottom: 0px;
      padding: 5px 6px 5px 6px;
  }
  
  .map-layer-button-top-margin {
      margin-top: 5px;
  }
  
  .map-layer-button-disabled {
      background-color: #25252588 !important;
      color: rgba(255,255,255, 0.8) !important;
      border-style: solid !important;
      border-width: 1px !important;
      border-color: rgba(50,50,50,0.4) !important;
  
  }
  
  .map-layer-toggle-box {
      border-top-left-radius: 40px;
      border-top-right-radius: 40px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      background-color: rgba(255,255,255, 0.6);
      padding: 5px;
  }
  
  .info-window-icon {
      font-size: 35px;
      opacity: 0.6;
      padding: 5px 2px 0px 2px;
  }
  
  .desktop .map-layer-button:hover {
      -webkit-filter: brightness(0.9);
              filter: brightness(0.9);
  }
  
  .map-layer-button:hover:active {
      -webkit-filter: brightness(0.8);
              filter: brightness(0.8);
  }
  
  .add-attribution {
      color: black !important;
  }
  
  .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
      border: 1px solid var(--color-primary);
  }
  
  .mapboxgl-ctrl-logo {
      border: 0;
  }
  
  .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl.mapboxgl-ctrl-group {
      border: 1px solid var(--color-primary);
  }
  
  .mapboxgl-ctrl-group:not(:empty) {
      box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
  }
  
  .mapbox-btn-shadow {
      box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
  }
  
  .mapboxgl-ctrl-group button {
      width: 35px;
      height: 35px;
  }
  
  .mapbox-btn-shadow.outsystems-toggle {
      border-radius: 4px;
  } */