/*
Copyright © 2023 Netas Ltd., Switzerland.
All rights reserved.
@author  Lukas Buchs, lukas.buchs@netas.ch
@date    2023-10-12
*/
/*
    Created on : 12.10.2023, 17:37:21
    Author     : Lukas Buchs
*/
/*
-------------------------
Design defaults
-------------------------
*/
.mdl-layout__header {
  background-color: #e6e6e6;
  color: #3d4963;
}
.mdl-layout__header .mdl-layout__drawer-button {
  color: #3d4963;
}
.mdl-layout__header .xct-icon {
  width: 150px;
  height: 100%;
  background-image: url(../resources/img/xctracer.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
@media only screen and (max-width: 200px) {
  .mdl-layout__header .xct-icon {
    background-image: url(../resources/img/xctracer_small.svg);
    width: 40px;
  }
}
.mdl-layout__header .back-button {
  display: block;
  height: 48px;
  width: 48px;
  border: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  font-size: 26px;
  line-height: 56px;
  font-family: Helvetica, Arial, sans-serif;
  top: 0;
  left: 0;
  z-index: 4;
  margin: 4px;
  color: #3d4963;
  position: absolute;
  background-color: inherit;
}
.mdl-layout__header .mdl-layout-title.material-icons.ble,
.mdl-layout__header .mdl-layout-title.material-icons.shutdown {
  cursor: pointer;
}
dialog {
  outline: none;
}
/* Menu */
.mdl-layout__drawer .spacer {
  flex: 1;
}
.mdl-layout__drawer .version {
  font-size: 0.9em;
  padding: 10px 10px;
  color: #cccccc;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
/*
-------------------------
Window Controls Overlay
-------------------------
*/
.window-controlls {
  position: fixed;
  left: env(titlebar-area-x);
  top: env(titlebar-area-y);
  width: env(titlebar-area-width);
  height: env(titlebar-area-height);
  background-color: #af161e;
}
#main-layout {
  margin-top: env(titlebar-area-height);
}
.mdl-layout__content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.mdl-layout__content .page-content {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  flex: 1;
  overflow: auto;
}
/*
-------------------------
Load-Mask
-------------------------
*/
.loadmask {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 100000;
}
/*
-------------------------
Login
-------------------------
*/
.login {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.login > .login-inner {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  margin: auto;
}
.login > .login-inner h6 {
  margin: 0;
  padding: 0;
}
.login > .login-inner .mdl-textfield {
  width: 100%;
}
.login > .login-inner .stay-logged-in {
  margin-bottom: 20px;
}
.login > .login-inner #forgot_pw_button {
  margin-left: 10px;
}
.login > .login-inner p.no-account {
  margin: 20px 0 0 0;
}
/*
-------------------------
Change Password
-------------------------
*/
.changePassword {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.changePassword > .changePassword-inner {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  margin: auto;
}
.changePassword > .changePassword-inner h6 {
  margin: 0;
  padding: 0;
}
.changePassword > .changePassword-inner .mdl-textfield {
  width: 100%;
}
.changePassword > .changePassword-inner #cancel_button {
  margin-left: 10px;
}
/*
-------------------------
Registration
-------------------------
*/
.register {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.register > .register-inner {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  margin: auto;
}
.register > .register-inner h6 {
  margin: 0;
  padding: 0;
}
.register > .register-inner .mdl-textfield {
  width: 100%;
}
.register > .register-inner #cancel_button {
  margin-left: 10px;
}
/*
-------------------------
Account
-------------------------
*/
.account {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.account > .account-inner {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  margin: auto;
}
.account > .account-inner h6 {
  margin: 0;
  padding: 0;
}
.account > .account-inner .mdl-textfield {
  width: 100%;
}
.account > .account-inner .units {
  padding-bottom: 20px;
}
.account > .account-inner .units > p {
  color: #af161e;
  font-size: 12px;
  margin: 0;
}
.account > .account-inner .units > label {
  margin-right: 20px;
}
.account > .account-inner .flightcalculationfactor,
.account > .account-inner .language {
  padding-bottom: 20px;
}
.account > .account-inner .flightcalculationfactor > p,
.account > .account-inner .language > p {
  color: #af161e;
  font-size: 12px;
  margin: 0;
}
.account > .account-inner .flightcalculationfactor select,
.account > .account-inner .language select {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /*display: block;*/
  font-size: 16px;
  font-family: 'Roboto', "Helvetica", "Arial", sans-serif;
  margin: 4px 0 0 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}
.account > .account-inner #delete_account_button {
  margin-left: 10px;
}
/*
-------------------------
About
-------------------------
*/
.about {
  display: flex;
  width: 100%;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.about > .about-inner {
  margin: auto;
  max-width: 800px;
  padding: 20px;
}
/*
-------------------------
Flight List
-------------------------
*/
.flightlist {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flightlist > .flightlist-inner {
  max-width: 900px;
  padding: 20px;
}
.flightlist > .flightlist-inner .header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0px 10px;
}
.flightlist > .flightlist-inner .header h6 {
  flex: 1;
}
.flightlist > .flightlist-inner .header .yearChooser select {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /*display: block;*/
  font-size: 16px;
  font-family: 'Roboto', "Helvetica", "Arial", sans-serif;
  margin: 4px 0 0 0;
  padding: 4px 12px;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}
.flightlist .list {
  border-top: 2px solid rgba(0, 0, 0, 0.12);
}
.flightlist .list .no-flights {
  max-width: 100%;
  margin: 60px 0;
  font-style: italic;
}
.flightlist .list .listEl {
  display: flex;
  flex-direction: row;
  /*background-color: #efefef;*/
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  color: #757575;
  transition: background-color 0.2s;
  cursor: pointer;
}
@media (pointer: fine) {
  .flightlist .list .listEl:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
.flightlist .list .listEl .flightNo {
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flightlist .list .listEl .flightNo > .ht {
  font-size: 1.5em;
}
.flightlist .list .listEl .flightNo > .value {
  padding-left: 4px;
  font-size: 2em;
}
@media only screen and (max-width: 430px) {
  .flightlist .list .listEl .flightNo {
    padding: 0 2px 0 0;
  }
  .flightlist .list .listEl .flightNo > .ht {
    font-size: 1.1em;
  }
  .flightlist .list .listEl .flightNo > .value {
    padding-left: 2px;
    font-size: 1.5em;
  }
}
.flightlist .list .listEl .flag {
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flightlist .list .listEl .flag > img {
  margin: 5px 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}
@media only screen and (max-width: 430px) {
  .flightlist .list .listEl .flag {
    width: 22px;
  }
  .flightlist .list .listEl .flag > img {
    margin: 5px 0;
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
}
.flightlist .list .listEl .flightInfo {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.flightlist .list .listEl .flightInfo > div {
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
.flightlist .list .listEl .flightInfo > div > .material-icons {
  font-size: 18px;
}
.flightlist .list .listEl .flightInfo > div.siteName > .value {
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;
  max-width: calc(100% - 23px);
}
.flightlist .list .listEl .menu {
  padding-right: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flightlist .list .listEl.highlight {
  animation: list-hightlight 3s;
}
@keyframes list-hightlight {
  from {
    background-color: rgba(0, 0, 0, 0.1);
  }
  to {
    background-color: transparent;
  }
}
.flight-addbutton {
  position: fixed;
  bottom: 15px;
  right: 15px;
}
/*
-------------------------
Flight Detail
-------------------------
*/
.flightdetail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flightdetail > .top {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  overflow: auto;
}
.flightdetail > .top .flightdetail-inner {
  max-width: 900px;
  padding: 20px;
  margin: auto;
}
.flightdetail > .top .flightdetail-inner .detail-header {
  display: flex;
  flex-direction: row;
}
.flightdetail > .top .flightdetail-inner .detail-header h6 {
  flex: 1;
  margin: 10px 0;
}
.flightdetail > .top .flightdetail-inner .detail-header .actionButton {
  position: relative;
}
.flightdetail > .top .flightdetail-inner .flightvalues {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px 20px;
}
.flightdetail > .top .flightdetail-inner .flightvalues table tr td:first-child {
  color: #666666;
  padding-right: 2px;
}
.flightdetail > .map {
  flex: 2;
}
.flightdetail > .map .leaflet-control .show_chart .material-icons {
  margin-top: 6px;
  font-size: 18px;
}
.flightdetail > .graph {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 200px;
  background-color: rgba(255, 255, 255, 0.68);
  z-index: 2000;
}
dialog.flightdetail-actions .mdl-dialog__content button {
  width: 100%;
  margin-top: 10px;
  height: auto;
  line-height: 19px;
  padding: 8px 0;
}
dialog.changeglider-dialog input {
  color: rgba(0, 0, 0, 0.87);
}
/*
-------------------------
DHV XC
-------------------------
*/
div.dhvxc {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
div.dhvxc > .dhvxc-inner {
  max-width: 400px;
  width: 100%;
  padding: 90px 20px 20px 20px;
  background-image: url(../resources/img/dhvxc.png);
  background-repeat: no-repeat;
  background-position: top 10px right 10px;
  background-size: 100px;
}
div.dhvxc > .dhvxc-inner h6 {
  margin: 0;
  padding: 0;
}
div.dhvxc > .dhvxc-inner .mdl-textfield {
  width: 100%;
}
div.dhvxc > .dhvxc-inner #cancel_button {
  margin-left: 10px;
}
/*
-------------------------
FFVL CFD
-------------------------
*/
div.cfd {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
div.cfd > .cfd-inner {
  max-width: 400px;
  width: 100%;
  padding: 90px 20px 20px 20px;
  background-image: url(../resources/img/ffvl.png);
  background-repeat: no-repeat;
  background-position: top 10px right 10px;
  background-size: 50px;
}
div.cfd > .cfd-inner h6 {
  margin: 0;
  padding: 0;
}
div.cfd > .cfd-inner .mdl-textfield {
  width: 100%;
}
div.cfd > .cfd-inner #cancel_button {
  margin-left: 10px;
}
/*
-------------------------
XContest
-------------------------
*/
div.xcontest {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
div.xcontest > .xcontest-inner {
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: 10px 20px;
  background-image: url(../resources/img/xcontest.png);
  background-repeat: no-repeat;
  background-position: top 10px right 10px;
  background-size: 100px;
}
div.xcontest > .xcontest-inner h6 {
  margin: 0;
  padding: 0;
}
div.xcontest > .xcontest-inner .phase2 {
  margin-top: 30px;
}
div.xcontest > .xcontest-inner .phase2 .select-element {
  padding: 10px 0;
}
div.xcontest > .xcontest-inner .phase2 .select-element label.select-label {
  color: #af161e;
}
div.xcontest > .xcontest-inner .phase2 .select-element select {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /*display: block;*/
  font-size: 16px;
  font-family: 'Roboto', "Helvetica", "Arial", sans-serif;
  margin: 4px 0 0 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}
div.xcontest > .xcontest-inner .phase2 div.message {
  border: 1px solid grey;
  padding: 1px 5px;
  margin-bottom: 5px;
}
div.xcontest > .xcontest-inner .phase2 div.message.error {
  border-color: red;
}
div.xcontest > .xcontest-inner .phase2 .checkbox-container {
  margin-top: 10px;
}
div.xcontest > .xcontest-inner .phase2 .checkbox-container .checkbox-label {
  color: #af161e;
}
div.xcontest > .xcontest-inner .mdl-textfield {
  width: 100%;
}
div.xcontest > .xcontest-inner #cancel_button {
  margin-left: 10px;
}
/*
-------------------------
Device List
-------------------------
*/
.devicelist {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.devicelist > .devicelist-inner {
  max-width: 900px;
  padding: 20px;
}
.devicelist > .devicelist-inner .header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0px 10px;
}
.devicelist > .devicelist-inner .header h6 {
  flex: 1;
}
.devicelist .list {
  border-top: 2px solid rgba(0, 0, 0, 0.12);
}
.devicelist .list .no-devices {
  max-width: 100%;
  margin: 60px 0;
  font-style: italic;
}
.devicelist .list .listEl {
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  color: #757575;
  transition: background-color 0.2s;
  margin: 20px 0;
  padding: 0 0 20px 0;
}
.devicelist .list .listEl > .row {
  display: flex;
  flex-direction: row;
}
.devicelist .list .listEl > .row .image {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.devicelist .list .listEl > .row .image img {
  max-width: 100px;
  max-height: 100px;
  margin: 10px 10px 10px 0;
}
.devicelist .list .listEl > .row .labels {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.devicelist .list .listEl > .row .labels p {
  margin: 0;
  padding: 0;
}
.devicelist .list .listEl > .row .labels p.deviceName {
  color: #1e1e1e;
}
.devicelist .list .listEl > .row .labels p.radioId {
  line-height: 12px;
  margin-bottom: 7px;
  color: #8e8e8e;
}
.devicelist .list .listEl > .row .labels p.flarm-expired {
  color: #c80303;
  font-weight: bold;
}
.devicelist .list .listEl > .row .labels p.flarm-expired::before {
  content: '⚠️ ';
}
.devicelist .list .listEl > .row .labels p.update-available {
  color: #212121;
  font-weight: bold;
}
.devicelist .list .listEl > .row .labels p.update-available::before {
  content: '⚙️️ ';
}
.devicelist .list .listEl > .row > .menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.devicelist .list .listEl > .buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px 6px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.device-addbutton {
  position: fixed;
  bottom: 15px;
  right: 15px;
}
/*
-------------------------
Device Detail
-------------------------
*/
.devicedetail {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
  /* airspace  */
}
.devicedetail > .devicedetail-inner {
  width: 400px;
  max-width: 900px;
  padding: 20px;
}
.devicedetail .radio-out-of-date {
  background-color: #F09797;
  border: 2px solid red;
  margin: 20px 0;
  padding: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.devicedetail .radio-out-of-date > div:first-child .material-icons {
  color: red;
  margin-right: 10px;
  font-size: 40px;
}
.devicedetail .radio-out-of-date .message {
  font-weight: bold;
}
.devicedetail .flight-list > div:nth-child(even) {
  background-color: #f2f2f2;
}
.devicedetail .flight-list .mdl-list__item .material-icons {
  font-size: 26px;
  text-align: center;
  line-height: 40px;
}
.devicedetail .flight-list .mdl-list__item .material-icons.cloud_download {
  background-color: #18007e;
}
.devicedetail .flight-list .mdl-list__item .material-icons.cloud_done {
  background-color: #187e00;
}
.devicedetail form.device-settings .sections {
  border-bottom: 1px solid #9e9e9e;
  margin-bottom: 20px;
}
.devicedetail form.device-settings .sections .head {
  font-size: 15px;
  font-weight: bold;
  border-top: 1px solid #9e9e9e;
  padding: 14px 0;
  margin: 0;
  cursor: pointer;
}
.devicedetail form.device-settings .sections .head::after {
  content: '–';
  float: right;
  margin-right: 10px;
  font-size: 20px;
}
.devicedetail form.device-settings .sections .head .material-icons {
  vertical-align: middle;
}
.devicedetail form.device-settings .sections .collapsible > .section {
  height: auto;
  transition: height 0.5s ease-in-out;
  overflow: hidden;
}
.devicedetail form.device-settings .sections .collapsible.collapsed > .section {
  height: 0;
}
.devicedetail form.device-settings .sections .collapsible.collapsed > .head::after {
  content: '+';
}
.devicedetail form.device-settings .section > .mdl-switch {
  margin-bottom: 10px;
}
.devicedetail form.device-settings .section > .mdl-textfield {
  padding-bottom: 0;
  padding-top: 0;
}
.devicedetail form.device-settings .mdl-textfield {
  width: 100%;
}
.devicedetail form.device-settings > button.cancel {
  margin-left: 15px;
}
.devicedetail form.device-settings .desc {
  color: #b1b1b1;
}
.devicedetail form.device-settings .combo-select {
  margin-top: 10px;
  margin-bottom: 15px;
}
.devicedetail form.device-settings .combo-select > label {
  color: #af161e;
  font-size: 12px;
  margin: 0;
}
.devicedetail form.device-settings .combo-select > select {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /* display: block; */
  font-size: 16px;
  font-family: 'Roboto', "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}
.devicedetail form.device-settings .audio-test {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 10px;
}
.devicedetail form.device-settings .audio-test .description {
  font-style: italic;
  flex: 1;
}
.devicedetail form.airspace-select {
  margin-top: 10px;
}
.devicedetail form.airspace-select .combo-select {
  margin-top: 10px;
  margin-bottom: 15px;
}
.devicedetail form.airspace-select .combo-select > label {
  color: #af161e;
  font-size: 12px;
  margin: 0;
}
.devicedetail form.airspace-select .combo-select > select {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 16px;
  font-family: 'Roboto', "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}
.devicedetail form.airspace-select > button.cancel {
  margin-left: 15px;
}
.devicedetail div.airspace-map .leaflet-control .my-location .material-icons {
  margin-top: 6px;
  font-size: 18px;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.devicedetail div.airspace-map .leaflet-control .my-location.search-location .material-icons {
  animation: rotating 2s linear infinite;
}
.devicedetail .device-info h6 {
  color: grey;
  margin: 0;
}
.devicedetail .device-info p {
  font-weight: bold;
}
dialog.device-changelog {
  width: 500px;
  height: 600px;
  max-width: 90%;
  max-height: 90%;
  border-radius: 20px;
  border: 0;
  display: flex;
  flex-direction: column;
  padding: 30px;
}
dialog.device-changelog > div.log {
  flex: 1;
  overflow: auto;
}
dialog.device-changelog > div.log > div {
  padding-right: 5px;
}
dialog.device-changelog > div.log > div h6 {
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: bold;
}
dialog.device-changelog > div.buttons {
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/*
-------------------------
Statistics
-------------------------
*/
.flightstatistics {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.flightstatistics > .flightstatistics-inner {
  width: 100%;
  max-width: 900px;
  padding: 0 20px;
  margin: auto;
}
.flightstatistics .chartselectorcombo {
  padding: 0 20px;
  margin-top: 10px;
}
.flightstatistics .chartselectorcombo > label {
  color: #af161e;
  font-size: 12px;
  margin: 0;
}
.flightstatistics .chartselectorcombo > select {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  /* display: block; */
  font-size: 16px;
  font-family: 'Roboto', "Helvetica", "Arial", sans-serif;
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}
.flightstatistics .datagroup {
  padding: 0 20px;
}
.flightstatistics .datagroup h6 {
  margin: 10px 0 0 0;
  font-weight: 500;
}
.flightstatistics .datagroup table tr td:first-child {
  color: #666666;
  padding-right: 2px;
}
/*
-------------------------
USERS
-------------------------
*/
.userlist {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.userlist .userlist-inner {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
}
.userlist .userlist-inner .scroller {
  flex: 1;
}
.userlist .userlist-inner .scroller > div {
  overflow: auto;
  max-height: 80vh;
}
.userlist .userlist-inner .list {
  display: table;
  border-collapse: collapse;
}
.userlist .userlist-inner .list .listEl {
  display: table-row;
}
.userlist .userlist-inner .list .listEl.header .cell {
  font-weight: 500;
}
.userlist .userlist-inner .list .listEl .cell {
  display: table-cell;
  margin: 0;
  padding: 5px;
  border-top: 1px solid gray;
}
.userlist .userlist-inner .list .listEl:nth-child(even) {
  background-color: #e8e8e8;
}
.user-addbutton {
  position: fixed;
  bottom: 15px;
  right: 15px;
}
.userlist-detail {
  border: 0;
  background-color: white;
}
.userlist-detail .userlist-detail-inner > div {
  margin: 10px 0;
}
.userlist-detail .userlist-detail-inner > div label {
  display: inline-block;
  width: 100px;
}
.userlist-detail .userlist-detail-inner > div input,
.userlist-detail .userlist-detail-inner > div select {
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  box-sizing: border-box;
  padding: 6px 6px 6px 3px;
  border: 1px solid #1b1b1b;
  border-radius: 3px;
}
/*
VARIO ANIM
 */
body > .vario-dialog {
  background-image: url(../resources/img/cloudanim/bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  border: 0;
}
body > .vario-dialog > .btns {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: right;
  align-items: center;
}
body > .vario-dialog > .btns button {
  margin-right: 13px;
}
body > .vario-dialog > .anim {
  user-select: none;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
body > .vario-dialog > .anim .slider {
  position: absolute;
  z-index: 10;
  cursor: ns-resize;
}
body > .vario-dialog > .anim .sliderpointer {
  position: absolute;
  font-weight: bold;
  z-index: 10;
  color: #d5d5d5;
}
body > .vario-dialog > .anim .pg-image {
  position: absolute;
  z-index: 5;
}
body > .vario-dialog > .anim .cloud {
  position: absolute;
  transition: width 0.6s linear, left 0.5s linear;
  z-index: 7;
}
/*Cl
-------------------------
MAP
-------------------------
*/
.windmap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.windmap .map {
  flex: 1;
}
.windmap .buttons {
  position: absolute;
  display: grid;
  top: 10px;
  left: 10px;
  width: 100%;
  z-index: 800;
  justify-content: center;
  column-gap: 10px;
  row-gap: 10px;
  grid-template-areas: "wind wind wind wind wind wind";
}
.windmap .buttons > div {
  width: 40px;
  height: 40px;
  margin: 0 10px 0 10px;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: center;
}
.windmap .buttons > div.valleywind-1 {
  background-image: url(../resources/img/valleywind-1.svg);
}
.windmap .buttons > div.valleywind-1.active {
  background-color: rgba(0, 219, 21, 0.4);
}
@media (pointer: fine) {
  .windmap .buttons > div.valleywind-1.active:hover {
    background-color: rgba(0, 219, 21, 0.8);
  }
}
.windmap .buttons > div.valleywind-2 {
  background-image: url(../resources/img/valleywind-2.svg);
}
.windmap .buttons > div.valleywind-2.active {
  background-color: rgba(219, 111, 0, 0.4);
}
@media (pointer: fine) {
  .windmap .buttons > div.valleywind-2.active:hover {
    background-color: rgba(219, 111, 0, 0.8);
  }
}
.windmap .buttons > div.valleywind-3 {
  background-image: url(../resources/img/valleywind-3.svg);
}
.windmap .buttons > div.valleywind-3.active {
  background-color: rgba(219, 33, 0, 0.4);
}
@media (pointer: fine) {
  .windmap .buttons > div.valleywind-3.active:hover {
    background-color: rgba(219, 33, 0, 0.8);
  }
}
.windmap .buttons > div.upwind {
  background-image: url(../resources/img/upwind.svg);
}
.windmap .buttons > div.upwind.active {
  background-color: rgba(157, 219, 0, 0.4);
}
@media (pointer: fine) {
  .windmap .buttons > div.upwind.active:hover {
    background-color: rgba(157, 219, 0, 0.8);
  }
}
.windmap .buttons > div.downwind {
  background-image: url(../resources/img/downwind.svg);
}
.windmap .buttons > div.downwind.active {
  background-color: rgba(0, 0, 0, 0.4);
}
@media (pointer: fine) {
  .windmap .buttons > div.downwind.active:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
}
.windmap .buttons > div.convergence {
  background-image: url(../resources/img/convergence.svg);
}
.windmap .buttons > div.convergence.active {
  background-color: rgba(0, 36, 219, 0.4);
}
@media (pointer: fine) {
  .windmap .buttons > div.convergence.active:hover {
    background-color: rgba(0, 36, 219, 0.8);
  }
}
@media (pointer: fine) {
  .windmap .buttons > div:hover {
    background-color: rgba(200, 200, 200, 0.4);
  }
}
.windmap div.mapStyle {
  position: absolute;
  display: grid;
  bottom: 40px;
  left: 40px;
  width: 71px;
  height: 71px;
  background-image: url(https://b.tile.opentopomap.org/11/1070/725.png);
  background-size: cover;
  border: 4px solid #656565;
  box-shadow: 4px 3px 12px 1px rgba(0, 0, 0, 0.34);
  border-radius: 4px;
  z-index: 800;
  cursor: pointer;
}
@media (pointer: fine) {
  .windmap div.mapStyle:hover {
    border: 4px solid #f8f8f8;
  }
}
.windmap .admin {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 10px;
  right: 10px;
  width: 200px;
  z-index: 800;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 5px;
}
.windmap .admin h3 {
  margin: 0;
  font-size: 15px;
  line-height: initial;
  font-weight: bold;
}
.windmap .admin .cb_showpoints {
  margin: 10px 0;
}
.windmap .admin .nbr_showpoints input {
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  box-sizing: border-box;
  padding: 6px 6px 6px 3px;
  border: 1px solid #1b1b1b;
  border-radius: 3px;
}
.windmap .admin button {
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
  padding: 6px 6px 6px 3px;
  border: 1px solid #1b1b1b;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.windmap .admin button::before {
  content: '💾 ';
}
@media (pointer: fine) {
  .windmap .admin button:hover {
    background-color: rgba(200, 200, 200, 0.8);
  }
}
.windmap .admin h3.users {
  margin-top: 10px;
}
.windmap .admin .usercontainer {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 70vh;
}
.windmap .admin .usercontainer > p {
  margin: 0;
  padding: 0;
  line-height: initial;
}
.windmap .admin .usercontainer > p > label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  text-wrap: nowrap;
  max-width: 100%;
}
.windmap .export-point-marker {
  background: none;
  border: 0;
}
.windmap .contextmenu {
  position: absolute;
  background-color: #d8d8d8;
  border: 1px solid #a5a5a5;
  z-index: 900;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.windmap .contextmenu button {
  flex: 1;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.2s;
  background: transparent;
  padding: 10px 30px 10px 5px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
@media (pointer: fine) {
  .windmap .contextmenu button:hover {
    background-color: rgba(200, 200, 200, 0.8);
  }
}
/*# sourceMappingURL=flightbook.css.map */