html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        font-family: 'Open Sans', sans-serif;
        color:rgb(96,96,96);
        font-size:14px;
        
        }

      h1 {
        //width:90%;
        //font-size:24px; 
        font-size:22px;
        color:white;
        text-shadow: 0 0 5px #000;
        margin-top:10px;
        //display:block;
        
       }

       #title {
        width:90%;
        
       }
       
       
       #datum {
        width:100px; 
        font-size:16px;
        font-weight:bold;
        color:white;
        padding-top:20px;
        
        
       }
       
       #title a {
        text-decoration:none;
        
       }
       
       h2 {
        font-size:14px;
        //text-decoration:underline;
       }
       
       h3 {
        font-size:14px;
        text-decoration:underline;
        margin-top:20px;
       }
       

       ul, ol {
        padding-left:20px;
        margin-top:20px;
       }
       
       
       li {
        
        margin-bottom:10px;
       }


       a {
        color:rgb(106,106,106);
       }
       
       p {
        text-align:justify;
       }

       .bold {
        font-weight:bold;
       }
      
        

      #main-container {
        margin:10px;
        //border: 5px solid rgb(0,153,255);
        border: 5px solid rgb(0,122,194);
        border-radius: 15px 15px 15px 15px;

      }


      #header {
        display:flex;
        position:relative;
        height:81px;
        //background-color:rgb(0,153,255);
        background-color:rgb(0,122,194);
        color:rgb(0,153,255);
        border-bottom:2px solid rgb(0,153,255);
        //background-image: linear-gradient(to right, rgb(0,153,255), white,rgb(0,153,255));
        background-image: linear-gradient(to right, rgb(0,122,194), white,rgb(0,122,194));
        padding:0px 10px 0px 10px;
      }

      .header-logo{
        width:50px;
        height:50px;
        margin-top:10px;
        padding:5px;
        border: 1px solid white;
        border-radius:10px;
        background-color:white;
        margin-left:15px;
      }
      
      .header-logo-zeta{
        width:223px;
        height:50px;
        
      }


      #header-upper {
        display:flex;
        height:53px;
      }

      .logo {
      width:35px;
      height:35px;
      margin-right:10px;
      }

      #menu {
        display:flex;
        height:30px;
        position:absolute;
        top:53px;
        left:10px;
       }

      .tab {
        margin:0px 10px 0px 0px;
        padding:5px 10px 0px 10px;
        border: 2px solid white;
        //border-bottom: 2px solid rgb(0,153,255);
        border-bottom: 2px solid rgb(0,122,194);  
        
        border-radius:10px 10px 0px 0px;
        font-size:14px;
        //background-color:rgb(0,153,255);
        background-color:rgb(0,122,194);
        color:white;
        cursor:pointer;
        font-weight:bold;
        text-shadow: 0 0 1px #000;
      }

      .tab.active {
        background-color:white;
        //color:rgb(0,153,255);
        color:rgb(0,122,194);
        border-bottom: 2px solid white;
        font-weight:bold;
        text-shadow: none;
      }

      .content {
        min-height:600px;
        display:none;
        border-top:0px;
        padding:10px;
        //padding:20px;
      }
      
      
      #dev-registr-vypusti-ukazka {
        //width:1000px;
        width:100%;
        margin-bottom:20px;
      }
      
      
      #application, #help , #about-project{
      display:none;

      }


      #help-steps{
      width:100%;
      
      }
      
      #help-steps li{
      margin-bottom:5px;
      
      }
     
     #help-steps-columns{
      width:100%;
      display:flex;

      } 
      

      #help-steps-columns ul{
       
      }
      
      #help-steps-columns div{
      width:33%;
      display:block;
      text-align:justify; 
      }

      #help-steps-columns div.middle{
      padding: 0px 10px 0px 10px; 
      }
      
      
      
      #help-schemas{
      display:block;

      }

      .help-schema{
      width:100%;
      margin:10px 0px 15px 0px;
      }
      
      
      #quick-help{
        margin-bottom:20px;
        border-radius: 10px 10px 10px 10px;
        padding: 5px 10px 5px 20px;
        border: 1px solid rgb(96,96,96);
        
      }
      

      
      #about-project-container{
      width:100%;
      display:flex;

      }
      
      #about-project-container p{
      margin-bottom:25px;

      }
      
      #about-project-container ul{
      margin-top:0px;

      }

      .left{
      width:40%;
      //padding-right:40px;
      text-align: justify;

      }
      
      .right{
      width:60%;
      padding:20px 0px 0px 50px;
      }
      
      
      .left-right-container{
      display:flex;
      }

      #application{
        overflow: hidden;
      }

      #upper-toolbar {
        height:65px;
        display: flex;
        padding:10px;
        border: 1px solid rgb(0,153,255);
        border-radius:10px;
        background-image: linear-gradient(to right, rgb(0,153,255), white,rgb(0,153,255));
        margin-bottom:10px;
      }



      select {
        margin-right:10px;
        border: 2px solid black;
        border-radius:10px;
        background-color:rgb(255,255,153);
        font-weight:bold;
        color:grey;
        color:black;
      }

     
      .parameters-select {
        display:none;
      }
      
      #parameters-select-2 {
        background-color:white;
        margin-top:20px;
      }

      #parameters-layers-switch-container {
        display: none;
      }
      
      

      .disabled {
        color:grey;
        border-color:grey;
      }

      

      #opacity-slider {
        width: 150px;
        margin:30px 10px 0px 10px;
        background-color:transparent;
      }


      #background-map-opacity-slider{
        margin-top:15px;
      }

      .upper-toolbar-switch {
        display:none;
        padding:5px 10px 5px 10px;
        margin:0px 0px 0px 10px;
        border: 1px solid black;
        border-radius:10px;
        font-size:12px;
        font-weight:bold;
        background-color:white;
        cursor:pointer;
        color:black;

      }


     .upper-toolbar-switch:hover {
        background-color:rgb(96,96,96);
        color:white;
        border: 2px solid white;
        font-weight:bold;
      }


      .switch-box {
        padding:10px;
        margin:10px;
        border: 1px solid rgb(96,96,96);
        border-radius:10px;
        position:absolute;
        background-color: white;
        opacity: 0.9;
        font-weight:bold;
        
      }
      
      #mode-switch-div {
        display:none;
        position:relative;
        margin:0px 0px 0px 10px;
        padding:3px 10px 2px 5px;
        opacity: 1;
        color:black;
        border: 1px solid black;
      }
      
      
      #background-maps-switch-div {
        width: 130px;
        top:0px;
        left:60px;
      }
      
      #background-maps-switch-div input {
        margin-bottom:4px;
      }
      
      
      #layers-switch-div {
        width: 190px;
        top:125px;
        left:0px;
      }
      
      
      
      #layers-switch-div div {
        margin-bottom:3px;
      }
      
      
      .layer-switch-symbol {
       width: 18px;
       height: 17px;
       margin:0px 10px -3px 10px;
      }
      
     
      #another-map-tools{
        position:absolute;
        top:225px;
        left:10px;
        }
        
        
      #layers-switch{
        position:absolute;
        top:140px;
        left:10px;
        }  
        
        

      .another-map-tools-expand{
        margin-bottom:10px;
      }



      #measurement-toolbar{
        position:absolute;
        top:-32px;
        left:32px;
        display:flex;
      }


      #measurement-toolbar button{
        margin-right:5px;
      }



      #distance{
        margin-bottom:5px;
      }

      #area{
        margin-bottom:5px;
      }

      #viewDiv {
        width: 100%;
        height: 74%;
        position:relative;
        margin-bottom:15px;
        //padding:10px;
      }


      #dates-slider-toolbar {
        //margin:auto;
        //margin:0px 10px 0px 10px;;
        padding:15px 5px 10px 40px;
        width: 99%;
        //height:95px;
        height:100px;
        position:absolute;
        bottom:15px;
        //left:170px;
        left:10px;
        right:10px;
        //margin-left:20px;
        border: 1px solid rgb(96,96,96);
        border-radius:10px;
        background-color: rgb(0,153,255);
        background-color: white;
        opacity: 0.9;
        display:none;
        font-weight:bold;
      }



      .dates-slider-container {
        width: 100%;
        display:flex;
      }
      
      .date{
        width:130px;
        font-weight:bold;
        //margin-left:50px;
        margin:0px 10px 0px 60px;
        font-size:20px;
        
        border: 0px solid rgb(96,96,96);
        border-radius:10px;
        background-color: rgb(96,96,96);
        color: white;
        //padding:5px;
        padding:5px 10px 5px 10px;
        height: 30px;
        
      }

      #dates-slider-1 {
        width:100%;
        margin:0px 0px 40px 0px;
      }



      #dates-slider-2 {
       width:100%;
      }





      .popup-image {
      width:100%;
      border: 1px solid gray;
      border-radius: 10px;
      margin-top:10px;
      align:center;
      }


      #coordsWidget{
      position:absolute;
      //bottom:60px;
      bottom:135px;
      left:10px;
      background-color: white;
      opacity:0.9;
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      padding: 7px 0px 5px 10px;
      }


      #coordsWidget span{
      font-weight:bold;
      margin-right:10px;
      margin-top:10px;
      }


      .organisation-name{
      display:flex;
      margin-bottom:10px;
      }

      .organisation{
      display:flex;
      }



      #back-to-selected-locality-button{
        display:none;
        padding-top:15px;
        text-align:center;
      }

      
      #sketch-toolbar-expand, #print-toolbar-expand, #measurement-toolbar-expand  {
      background-color: transparent;
      box-shadow:none;
      }
      
      
      
      
      #finals{
        background-color:rgb(0,153,255);
        color:white;
        margin-top:50px;
        border-radius: 10px 10px 10px 10px;
        padding: 5px 10px 5px 10px;
        
      }
      
      #finals a{
        color:white;
      }
      
      #webmap-app-link{
        text-decoration:underline;
        cursor:pointer;
      }
      
      

      .esri-zoom{
      background-color: none;
      position:absolute;
      left:-5px;
      top:-5px;
      }

      
      .esri-search{
      position:absolute;
      left:235px;
      top:-5px;
      width:310px;
      }



      .esri-slider__segment{
      background-color: rgb(96,96,96);
      height:5px;
      border-radius: 5px 5px 5px 5px;
      }



      .esri-scale-bar__bar-container{
      position:absolute;
      left:-5px;
      //bottom:-15px;
      bottom:175px;
      padding:5px 10px 5px 10px;
      background-color: white;
      opacity:0.9;
      border-radius: 5px 5px 5px 5px;
      border:1px solid rgb(96,96,96);
      }


      .esri-legend {
      padding:5px 10px 5px 10px;
      background-color: white;
      opacity:0.9;
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      height:215px;
      
      }

      .esri-widget--panel{
      background-color: white;
      }


      .esri-legend__service{
      background-color: white;
      }

     .esri-ui-corner .esri-expand .esri-widget--panel, .esri-ui-corner .esri-expand .esri-widget--panel-height-only, .esri-ui-corner .esri-component > .esri-widget--panel, .esri-ui-corner .esri-component.esri-widget--panel {
    width: 200px;
    background-color: white;
    }

      .esri-view-height-xsmall .esri-expand .esri-widget--panel, .esri-view-height-xsmall .esri-expand .esri-widget--panel-height-only, .esri-view-height-xsmall .esri-ui-corner .esri-component.esri-widget--panel, .esri-view-height-xsmall .esri-ui-corner .esri-component.esri-widget--panel-height-only {
    max-height: 500px;
    }


      .esri-popup__header-title{
      color:rgb(96,96,96);
      }


      .esri-popup__main-container{
      padding:5px 10px 5px 10px;
      background-color: white;
      opacity:0.9;
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      width:300px;
      }

      .esri-popup--shadow{
      box-shadow:none;
      }



      .esri-sketch{
      position:absolute;
      top:-42px;
      left:22px;
      background-color: white;
      opacity:0.9;
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      margin:10px;
      }

      .esri-slider--horizontal .esri-slider__tick-label {
      margin-top: 10px;

      }

      .esri-print {
      top:-32px;
      left:32px;
      background-color:white;
      width:350px;
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      }

      

      .esri-search__input{
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      margin-right:5px;
      }

      
      
      

      .esri-search__suggestions-menu{
      border-radius: 10px 10px 10px 10px;
      border:1px solid rgb(96,96,96);
      margin-top:10px;
      }

      
      .esri-ui-corner .esri-component {
      box-shadow: none;
      }

      
      .esri-view-width-xlarge .esri-popup__main-container{
      width:300px;
      }
         
      
      .esri-search__clear-button{
      margin-right:5px;
      }




      .esri-component {
      background-color:transparent;
      box-shadow: none;
      }
      
      .esri-ui-corner .esri-component .esri-home {
      }
      
      .esri-home{
      position:absolute;
      left:-5px;
      top:65px;
      }


      .esri-home:hover{
      background-color: rgb(0,153,255);
      }

      
      .esri-expand__panel{
      background-color: transparent;
      }

      
      .esri-widget--button{
        cursor: default;
        border: 1px solid rgb(96,96,96);
        border-radius: 5px 5px 5px 5px;
        background-color: white;
      }

      .esri-widget--button:hover{
        background-color: rgb(0,153,255);
      }

      .esri-widget--button.active{
        background-color: rgb(0,153,255);
       }
       
  
  
  
  
  
  
 /*uprava scrollovani legendy*/ 
 

.esri-ui-corner .esri-expand .esri-widget--panel, .esri-ui-corner .esri-expand .esri-widget--panel-height-only,
.esri-ui-corner .esri-component > .esri-widget--panel, .esri-ui-corner .esri-component.esri-widget--panel {
    
    overflow: hidden;
}




.esri-legend__layer-body {
    
    overflow-y: scroll;
    height: 90px;
}


h3.esri-widget__heading, h4.esri-widget__heading, h5.esri-widget__heading, h6.esri-widget__heading {
    font-size: 12px;
}