{% load static %}



/* GLOBAL */
html {
    scroll-behavior: smooth;
    -ms-scroll-chaining: chained;
}

.runda{
    border-radius: 15px;
}

@font-face {
    font-family: 'Apex';
    font-weight: normal;
    src: local('Apex'), url("/static/fonts/apex/ufonts.com_apexnew-book-opentype.3dced24e6e6f.otf") format('opentype');
}

@font-face {
    font-family: 'Apex';
    font-weight: bold;
    font-style: normal;
    src: local('Apex'),  url("/static/fonts/apex/ufonts.com_apexnew-bold-opentype .efb00de3e3a7.otf") format('opentype');
}


.block-table-fixed thead tr{
    display:table;
    table-layout:fixed;
    width:100%;
}

.block-table-fixed tbody{

    width: auto;
    display: block;
    table-layout: fixed;

}

.block-table-fixed tbody.slim{
    height:auto;
}

table.block-table-fixed tbody tr{
    table-layout: fixed;
    display: table;
    width:100%;
}
table.block-table-fixed tbody tr td{
    overflow:hidden;
    position:relative;
}

table.block-table-fixed tbody tr td:hover{
  overflow: visible;
  z-index: 2;
}

table.block-table-fixed tbody tr td span.text{
    background: white;
    padding-right:.5rem;
}


table.block-table-fixed thead tr th{
    overflow:hidden;
    position:relative;
}
table.block-table-fixed thead tr th:hover{
    overflow: visible;
    z-index: 2;
}
table.block-table-fixed thead tr td span.text{
    background: black;
    padding-right:.5rem;
}

.leaflet-control-layers label:after {content: ""}

body {
      font-family: "Apex";
      font-weight: normal;
      background-color: #e6f8fe;
}
#main{
    top:100px;
    width:100%;
    position:absolute;
    min-height:calc(100vh - 100px);

}

.list-group-horizontal{
    display:inline-block;

}
.list-group-horizontal .list-group-item {
    display:inline-block;
    margin:5px;
    padding: 0px;
    background: rgba(0,0,0,0);
    border:0px;
    color: rgba(0,0,0,0.5);
    cursor: pointer;
}

.list-group-horizontal .list-group-item:hover{
    color: rgba(0,0,0,1)
}
.list-group-horizontal .list-group-item.time-choice.selected{
    color: rgba(0,0,0,1);
}

.no-bullet-list{
    list-style: none;
    list-style-position: inside;
    padding-left: 5px;
    font-family: "Apex";
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
 }

 ul.no-bullet-list li ul{
    list-style: none;
    list-style-position: inside;
 }
  ul.no-bullet-list li label:after{
    content:""
 }

.tooltip-inner {
    text-align:left !important;
    max-width:250px !important;
}


.header-button{
    width:25px;
    height:25px;
    display:inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-width:0px;
    border-radius:10%;
    font-size:13px;
    text-decoration: none;
}

.header-button span{
    font-weight:bold;
    color:white;

}

.my-table-header{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
}

.typehide{
    display: none;
}

#openicons {
    fill: black;
}

#openicons_settings{
    top:4px;
}

#openicons_help{
    top:-2px;
}


.bildmane {
    transition: all 0.3s;
    width:80%;
}

.bildmane:hover {
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5));
}

.bildholdermane {
    padding: 50px;
}

.bildholdermane .header{
    font-weight:bold;
    font-size:100%;
}
a {
    border: none;
    outline: none;
}

select {
    font-family: "Arial";
    background-color: #ffffff;
    border: none;
}

select:focus {
    outline: none;
}

.help-block{
    color:red;
}
.page-container{

    height:100%;
}

select {

    -webkit-box-sizing: border-box;
    padding:4px 5px;
    font-size: 24px;
}

#modal-help{
    z-index:9999;
}

.modal-body {
    background-color:  #e6f8fe;
    border-top: 4px solid #F6B45F;
    border-bottom: 4px solid #F6B45F;
}

/* NAVBAR */
@media all and (min-width: 0px) and (max-width: 767px) {
    #logo {
        display:none;
    }
}
.nav-item .oi {
    color: black;
    font-size: 40px;
    filter: opacity(.3) drop-shadow(0 0 0 white);
}
.nav-item .nav-link span:hover {
    color: #fd9d24;
    filter: opacity(1);
}

.nav-item .form-control {
    margin-top: 10px;
    margin-left: 10px;
    font-family: 'Arial';
}

.navbar {
    min-height:30px;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
#navigationen {
    background-color: #ffffff;
    border-bottom: 4px solid #F6B45F;
    padding:0px 10px;
}
.navbar-toggler {
  width: 30%;
  float: none;
  margin-right: 0;
  min-height:20px;
  height:25px;

}
.navbar-toggler-icon{
    height:15px !important;
}
.navbar-nav.kart-nav {
        flex-direction:row !important;
}

.navbar ul{
    display: none;
}

.navbar-icon-list,.navbar-link-list {
    margin-top:15px;
}

.nav-item a{
    font-size: 28px;
}

.navbar .navbar-brand img{
      height: 40px;
      width: 237px;
}

.nav-logo {
    filter: opacity(.3) drop-shadow(0 0 0 white);
}

.nav-logo:hover {
    filter: opacity(1);
}

.nav-link {
    width: 61px;
    padding:5px !important;
}

.nav-installation-link {
  background: url("/static/icons/sensor-black.a9058fc7b7a6.svg") no-repeat;
  background-position: left center;
  height: 40px;
}

.nav-installation-link:hover {
    background: url("/static/icons/sensor-orange.2e7f285a470b.svg") no-repeat;
    background-position: left center;
}

.nav-karta-link {
  background: url("/static/icons/karta-black.9cbe50beff87.svg") no-repeat;
  background-position: left center;
  height: 40px;
}

.nav-karta-link:hover {
    background: url("/static/icons/karta-orange.8219790de299.svg") no-repeat;
    background-position: left center;
}

.nav-item . text-link{
    min-width:150px;
}
.navbar-collapse.show{
    flex-flow: row nowrap !important;
}
.navbar-nav.navbar-icon-list {
    flex-flow: row nowrap;
    width:auto;
}

.navbar-icon-container {
    margin:0px 0px;
    width:100%;
    height:fit-content;
}
.dropbtn {
  background-color: white;
  color: white;
  border: none;
}

.navbar .search-brunn-map {
    display: none;
}

.btn {
    font-weight:bold;
}

.btn span{
    font-weight:bold;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.nav-item .dropdown-content a{
   font-size:19px !important;
   color: #6c6c6c;
   padding: 5px;
}
.nav-item .dropdown-content a:hover{
    color: #fd9d24;
}
.dropdown-content a{
    white-space:nowrap;
}
.dropdown-col{
    white-space:nowrap;
    width:auto;

}
.dropdown-content h5{
    font-weight:bold;
}
.dropdown-content {
  padding:5px 5px;
  visibility:hidden;
  position: absolute;
  background-color: #ffffff;
  min-width:180px;
  width:auto;
  height:0;
  max-height:0;
  z-index: 1;
  border: 1px ridge #f7ddbc;
  -moz-box-shadow: 5px 10px 10px rgba(0,0,0,0.2);;
  -webkit-box-shadow: 5px 10px 10px rgba(0,0,0,0.2);;
  box-shadow: 5px 10px 10px rgba(0,0,0,0.2);;
  left:17px;

}

@media all and (min-width: 0px) and (max-width: 767px) {
    .dropdown-content{
      left:160px;
      top:0px;
    }
}
.dropdown-content a {
  visibility:hidden;
  text-decoration: none;
  display: block;
  font-size: 19px !important;
  max-height:0;
  width:auto;
}

.dropdown-content a:hover {}
.dropdown:hover .dropdown-content {visibility: visible; height:auto; max-height:500px; transition:max-height 0.4s;}
.dropdown:hover .dropdown-content a{visibility:visible; max-height:50px; transition:max-height 0.4s;}
.dropdown:hover .dropbtn {}

.logo {
    padding-right:10px;
    transition: all 0.4s;
}

.logo:hover {
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.2));
}

.leaflet-touch .leaflet-bar {
    border: none;
}

#video-wrapper {
    position:relative;
    padding-bottom: 56.25%;
    width:100%;
}
#video-installation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* MEDIA CORRECTIONS */
@media all and (min-width: 0px) and (max-width: 769px) {
    select {
        padding:8px 5px;
        font-size: 12px;
    }
    .nav-item {
        padding-left:2px;
        padding-right:2px;
        font-size: 12px;
    }
    .nav-item #search-map .form-control{
        margin-right:1px;
        padding-right:1px;

    }
    .dropdown-content{
        display:none !important;
    }

}
@media all and (min-width: 1440px){
    .help-container {
        margin-top: 2%;
    }
}
@media all and (min-width: 1025px) and (max-width: 1440px){
    .help-container{
        margin-top: 6%;
    }
}

@media all and (min-width: 481px) and (max-width: 568px) {

    #main {
        top:55px;
    }
}

@media all and (min-width: 321px) and (max-width: 480px) {

    .tooltip {
        display: none;
    }

    #main {
        top:55px;
    }
}


@media all and (min-width: 0px) and (max-width: 767px) {
    table {
        font-size:10px;
    }
        h3 {
        font-size:18px;
    }
    table .form-control{
        height:14px;
    }
    table .btn {
        font-size:12px;
    }
    .hide-small{
        display:none;
    }
    #mainmap {
        padding-top: 100px !important;
    }
    #main {
        top:55px;
    }

}
@media (min-width: 0px) {
   .modal{
    margin: auto;
    overflow-y: auto;
   }

  .modal-70 {
        max-width: 98%;
        width: 1200px;
        margin: 2% auto;
  }
  .larm-modal {
        max-width: 98%;
        width: 1700px;
        margin: 2% auto;
  }
}

/* SEARCHBAR */
.modal-search {
  display: none; /* Hidden by default */
  position: fixed;
  top:0;
  z-index: 999; /* Sit on top */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-search .my-modal-content{
  background-color: #fff;
  margin: 30% auto; /* 15% from the top and centered */
  padding: 5px;
  width: 250px; /* Could be more or less, depending on screen size */
}

#search-map {
    margin: 0;
    width: 200px;
}


/* TABLES */
.table-container {
    border: 2px solid #F6B45F;

}

.tbody {
    font-family: "Arial, sans-serif";
    font-weight: bold;
    height: 50vh ;
    overflow-y: auto;
    display: block;
}

.table tr {
    width: 100%;
    display: flex;
}

th, td {
    padding: 5px;

    border: 0px !important;
}

th {
    border: 0px !important;
}

.sensor-table{
    border: 0px !important;
}
.sensor-table .tbody{
    height: 200px !important;
}
.sensor-table thead th{
    color:white !important;
}

.data-table {
    border: 0px !important;
}

.data-table thead th{
    color:white !important;
}

.leaflet-popup{
    bottom: -13px !important;
}
.leaflet-popup-tip-container {
   bottom: -15px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}