@media only screen and (max-width: 992px)
{
    .side-nav.fixed {
        transform: translateX(0);
    }
    #importModal{
        width: 46%;
        left: 0px !important;
        top: 24% !important;
    }
    .container {
        left: 0px !important;
        width: calc(100% - 0px) !important;
        padding: 0px 30px !important;
    }
}
@media only screen and (min-width: 980px)
{
    .container {
        left: 150px;
        width: calc(100% - 300px);
        padding: 0px 30px;
    }

    #statistics-iframe {
        width: 100% ;
        height: calc(100% - 65px);
        overflow: hidden;
    }

    #importModal{
        width: 37%;
        left: 290px;
    }
    #add-user-modal {
      width: 25%;
    }
}
html, body{
    font-family: 'Roboto', 'Roboto', Sans serif;
    color: #4e4e4e;
    height: 100%;
    overflow: hidden;
}


body.login-body{
    background: #f9f9f9; /*linear-gradient(to bottom, #757575 0%,#2f2f2f 100%);*/
    display: flex;
    /*align-items: center;*/
    height: 100vh;
    }

#statistics-iframe {
    width: 100%;
    height: calc(100% - 65px);
    margin-top: 0px;
    overflow: hidden;
}

nav{
    background-color: #70a559;
}

.nav-title{
    position: relative;
    top: 10px;
    left: 20px;
    font-size: 24
}

nav .brand-logo{
    padding-left: 45px;
    background-image: url('../img/admin_white_48.png');
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: 0 15px;
}

.logo-img{
    padding-right: 20px;
}

#login-page{
	width: 100%;
    /*max-width: 600px;
    background-color: rgb(134, 160, 52);
    min-width: 50%;
    margin: auto;*/
}

.custom-btn {
	background-color: #2ecc71; 
}

.custom-btn:hover {
	background-color: #23b360;
}

.bottom-command {
    display: flex;
    position: fixed;
    bottom: -7px;
    right: 7px;
    border-radius: 5px;
    z-index: 10;
    justify-content: flex-end;
    align-items: flex-end;
    background-color: rgba(224, 224, 224,0.5);
}

.bottom-command > li {
    margin: 10px;
}

.input-field .prefix.active{
    color: #4e4e4e;
}

.side-nav li , .side-nav li a, .side-nav li>a>i, .side-nav li>a>i.material-icons{
    /* line-height: 65px; */
    height: 40px;
    /* display: flex; */
    /* align-items: center; */
}

.side-nav li a i{
    display: flex;
    align-items: center;
}

#transport-menu{
    padding-left: 15px;

}


.side-nav li a, #transport-menu div, #transport-menu i li span  {
    display: flex;
    align-items: center;
        color: #757575;
}

.side-nav li a span{
    display: flex;
    align-items: center;
    line-height: 20px;
}


.side-nav li:hover{
    box-shadow: none;
}

.logs-form{
    height: calc(100% - 40px);
}

#pp-cfp-trigger {
    bottom: 50px;
    position: absolute;
    right: 10px;
}

#logs
{
    overflow: auto;
    font-size: 12px;
    padding: 10px;
}

#logs pre{
    margin: 0;
    overflow: visible;
}

#catalog-list .collection {
    width: 100%;
}
#catalog-list
{
    /*height:calc(100vh - 392px) !important;*/
    overflow:hidden;
}
#admin-catalog-left .collapsible-header{
    background-image: url("../../ui/img/data_mapservice_48.png");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 10px 10px;
    padding-left: 40px;
    font-weight: 700;
    }


#catalog-list i{
    margin-right: 10px;
    
}

#layerProperties .row
{
    margin-bottom: 5px;
    color: #4e4e4e;
}

.collection-item.active{
    background-color: #2ECC71;
    color: #fff;
}

tr.loader td{
    text-align: center;
}

.dropdown-content li>a, .dropdown-content li>span{
    color: #4e4e4e;
}

.dropdown-content li.active>span{
    color: #2ECC71;
}

.select-wrapper input.select-dropdown {
    border-bottom: 1.2px solid #9e9e9e;
    }


ul.select-dropdown{
    max-height: 320px;
}

ul.select-dropdown li{
    max-height: 30px;
}

td.news-title span, td.news-content span, td.news-docs span {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-height: 80px; /* Fallback for non-webkit */
  min-width: 20vh;
  margin: 0 auto;
  font-size: 16px;
  line-height: 20px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.news-title span, td.news-content span {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-height: 80px; /* Fallback for non-webkit */
  min-width: 10vh;
  margin: 0 auto;
  font-size: 16px;
  line-height: 20px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#news-table td{
    padding: 5px;
}

#news-table i{
    color: #4e4e4e;
    border: 1px solid #e0e0e0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    font-size: 20px;
    text-align: center;
    line-height: 24px;
    margin: 6px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    transition: box-shadow 200ms, color 200ms;
}

#news-table i:hover{
    color: #757575;
    box-shadow: 0 4px 6px rgba(0,0,0,.2);
}

#news-table i:active{
    color: #2ECC71;
    box-shadow: 0 0px 2px rgba(0,0,0,.2);
}

#news-table tr:nth-child(even):hover{
    background-color: initial;
}

#docs-select select {
    margin-bottom: 5px;
}

#docs-select select option.selected {
    background-color: #2ECC71;
}

#docs-select ul li:hover {
    /* text-decoration: line-through; */
    /* border-color: #f44336; */
    /* color: #f44336; */
    background-color: #9e9e9e;
    cursor: pointer;
    box-shadow: 0px 3px 10px rgba(0,0,0,.3);
    padding: 5px 10px;
}


#docs-select ul li i {
    overflow: hidden;
    margin: 0;
    width: 0px;
    transition: width 0.05s ease-in-out;
}

#docs-select ul li:hover i {
    content: 'delete';
    font-family: 'Material Icons';
    margin: 0 5px 0 0;
    width: 15px;
    font-size: 16px;
}

#docs-select ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

#docs-select ul li {
    flex: 0 0 auto;
    min-width: 100px;
    padding: 5px 20px;
    margin: 5px;
    /* border: thin solid #4e4e4e; */
    border-radius: 50px;
    text-align: center;
    background-color: #a6a6a6;
    color: white;
    box-shadow: 0px 0px 0px rgba(0,0,0,.3);
    transition: box-shadow 0.15s ease-in-out;
    display: flex;
    align-items: center;
}

/*Main page catalog*/
#admin-catalog-left .collection a{
    color: #4e4e4e;
    width: 300px;
    height: 180px;
}
.arcgisComUrl{
    font-size: 18px;
    margin-top: 25%;
    margin-left: 35%;
    background-color: #dfdfdf;
    border-radius: 10px;
    display: flex;
    padding: 5px 10px;
    width: 110px;
}
.infobull-help
{
    margin-top: 18px !important;
    position: relative !important;
}
.tooltip{
    width: 50% !important;
}
.input-field label:not(.label-icon).active {
    font-size: .8rem;
    margin-top: -15px;
    margin-left: 10px !important;
}
.collection .collection-item:last-child {
    border-bottom: 1px solid #e0e0e0;
}
.collapsible .collection li:hover{
        background-color: rgba(139, 195, 74, 0.41);
        color: #4e4e4e;
}
.spinner-green, .spinner-green-only {
    border-color: #2ECC71;
}
#catalog-list .collection-item{
    width: 100%;
    z-index: 0;
}
.mapPreview {
    position: absolute;
    height: 180px;
    width: 300px;
    cursor:pointer;
}
.layerTitle
{   color: #4e4e4e !important;
    font-size: 20px;
    font-weight: 500;
}
.btnDelete
{
    color: #2ECC71 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}

.proprRow
{
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom-color:rgba(158, 158, 158, 0.26);
    border-bottom-style:solid;
    border-bottom-width:0.5px;
}
.proprRow :last-child {
     border-bottom: solid 0px #555;
}
.proprName
{
    color: #4e4e4e !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.proprVal
{
    color: #4e4e4e !important;

}
.collection .collection-item.active {
    background-color: rgba(139, 195, 74, 0.41);
}
.dropdown-content li:hover {
    background-color: rgba(139, 195, 74, 0.41);
}
.enableSort{
    background-color: #2ECC71;
    color: white !important;
}
.disabledSort{
    color: #2ECC71 !important;
}
.imgLayer
{
    border: solid 1px #dfdfdf;
}
.layerDelete
{
    text-align:right;
    margin-top: -45px;
}
.btnReafresh
{
    color: white;
    font-size: 30px;
    text-align: center;
}
.LoadingReafresh
{
   animation:mymove 2s linear infinite;
   cursor:default;
   font-size: 33px;
}
@keyframes mymove {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.hypertexte{
    color: #2ECC71;
}
.flex
{
    display: flex;
}
.MenuFixed 
{
    position: fixed;
    background-color: white;
}
.more{
    height: 163px;
    -moz-transition: height 0.3s 0.5s linear;
    -ms-transition: height 0.3s 0.5s linear;
    -o-transition: height 0.3s 0.5s linear;
    -webkit-transition: height 0.3s 0.5s linear;
    transition: height 0.5s 0.3s linear;
}
.less{
    height: 24px;
    -moz-transition: height 0.3s 0.5s linear;
    -ms-transition: height 0.3s 0.5s linear;
    -o-transition: height 0.3s 0.5s linear;
    -webkit-transition: height 0.3s 0.5s linear;
    transition: height 0.3s 0.5s linear;
}
.textarea {
    width: 100%;
    word-wrap: break-word !important;
    background-color: transparent !important;
    /* IE scroll bug
    overflow-y: hidden;
    overflow-x: hidden;
    border:0px;
    */ 
}
#tags{
        margin-top: -10px;
        margin-bottom: 0px !important;
}
#additem{
    margin-top: 0px;
    height: 68px;
    border-bottom: 0.5px solid #80808085;
    padding-top: 13px;
    padding-left: 42px;
}
#mainCatalog {
    height:100%;
    min-height:800px;
    display: block;
}

#layerEdit {
    height: 89vh;
    padding: 0;
    overflow-y: hidden;
    background-color: white;
}

#styleModal {
    overflow: visible;
}

#styleModal .modal-content {
    overflow: hidden;
}

#styleModal .modal-body {
    height: 50vh;
    overflow-y: scroll;
}

#layerAdd {
    height: 89vh;
    padding: 0px 0px;
    display: none;
    overflow-y: hidden;
}

#clearSearch:hover {
    color: blue;
}

#formAddContent .input-field label {
    transform: none;
    pointer-events: all;
}

.tagit-autocomplete{
    border:1px solid #aaaaaa !important;
}
.spinner-green, .spinner-green-only {
    border-color: #2ECC71 !important;
}
.preloader{
    display:none;
    margin-top: 17px; 
    /*margin-left: 30%;*/
    position: absolute;
}
.tableLayers{
    background-color: #fff;
    border: 1px solid #4e4e4e;
    overflow: scroll;
    max-height: 250px;
    position: relative;
}
.dropdownbtn {
  position: relative;
  display: inline-block;
}
.dropdownbtn-item:hover {
	background-color: #2ECC71 !important;
	color: white !important;
}
.dropdownbtn-item label {
	color: rgba(0, 0, 0, 0.87) !important;
	cursor: pointer;
}
.dropdownbtn-item:hover label {
	color: white !important;
}
.dropdownbtn-item label {
    font-size: 14px;
    font-weight: bold;
}
.dropdownbtn-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 190px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 4px 4px;
  z-index: 1000;
  top: 35px;
  right: 0px;
}

.dropdownbtn:hover .dropdownbtn-content {
  display: block;
}
.striped {
overflow: scroll;
    max-height: 250px;	
}
td, th {
    padding: 10px !important;
}
[type=checkbox]+label {
    position: sticky !important;
}
.fa-check-circle{
    font-size: 29px;
    margin-top: 13px;
    color: #2ECC71;
}
.fa-times-circle{
    font-size: 29px;
    margin-top: 13px;
    color: red;
}
.ui-widget-content{
    max-height: 20% !important;
    overflow-y:auto !important;
}
.valideURL{
      background-color: rgba(139, 195, 74, 0.87) !important;
      color:#fff;
}
.unvalideURL{
      background-color: #f44336 !important;
      color:#fff;
}
.tooltipTXT{
    text-align: left;
}
.tooltipTXT i{
    font-size: 7px;
}

@keyframes animBorder{
    from {transform:  border-color: #dfdfdf; border-width: 1px;}
    to {transform:  border-color: #2ECC71; border-width: 4px;}
}
.lastLayerAdded
{
   animation:animBorder 1s linear infinite;
   border-style: solid ;
   border-color: #2ECC71;
   margin: 0;
}

/* animation of new layer added */
.animated-box {
  position: relative;
}
.animated-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(120deg, #fff, #2ECC71, #F44336);
  background-size: 300% 300%;
  -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  -o-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  -ms-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  -moz-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

.animated-box.in:after {
   -webkit-animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
   animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}

/* motion */
@keyframes gradient-animation {
  0% {
    background-position: 15% 0%;
  }
  50% {
    background-position: 85% 100%;
  }
  100% {
    background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
     -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
     -o-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
     -ms-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
     -moz-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
     clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
    -o-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
    -ms-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
    -moz-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
    -o-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
    -ms-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
    -moz-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
    -o-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
    -ms-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
    -moz-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
    -o-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
    -ms-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
    -moz-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
    clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
  }
}



input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #2ecc71;
    -webkit-box-shadow: 0 1px 0 0 #2ecc71;
    box-shadow: 0 1px 0 0 #2ecc71;
}

input:not([type]):focus:not([readonly]) + label, input[type=text]:not(.browser-default):focus:not([readonly]) + label, input[type=password]:not(.browser-default):focus:not([readonly]) + label, input[type=email]:not(.browser-default):focus:not([readonly]) + label, input[type=url]:not(.browser-default):focus:not([readonly]) + label, input[type=time]:not(.browser-default):focus:not([readonly]) + label, input[type=date]:not(.browser-default):focus:not([readonly]) + label, input[type=datetime]:not(.browser-default):focus:not([readonly]) + label, input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label, input[type=tel]:not(.browser-default):focus:not([readonly]) + label, input[type=number]:not(.browser-default):focus:not([readonly]) + label, input[type=search]:not(.browser-default):focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #2ecc71;
}
.menu.collapsed {
    width: 60px;
}
.menu .material-icons {
    font-size: 17px;
}
.menu {
    scrollbar-width: thin;
    scrollbar-color: #000 #ccc;
  }
  /* Works on Chrome/Edge/Safari */
  .menu::-webkit-scrollbar {
    width: 5px;
  }
  .menu::-webkit-scrollbar-track {
    background: #ccc;
  }
  .menu::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 20px;
    border: 1px solid #ccc;
  }
  .menu {   
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    outline: none;
    box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #fff;
    z-index: 998;
    margin: 0;
  }
.menu.open {
    width: 270px; 
}

.menu.collapsed li {
    float: none;
    height: 30px;
    /* transition: all .15s linear; */
    cursor: pointer;
    padding: 2px 17px 0px 10px;
    position: relative;
    text-align: center;
}
.menu.open li {
    float: none;
    height: 30px;
    transition: all .15s linear;
    cursor: pointer;
    padding: 2px 17px 0px 10px;
}
.menu li:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.menu li:focus {
    outline: none;
}

.menu.align-bottom {
    margin-top: auto;
}

.menu li img {
    height: 100%;
    vertical-align: top;
}

.menu.collapsed li span.label {
    padding: 2px;
    color: #fff;
    visibility: hidden;
    position: absolute;
    background:rgba(0,0,0,.8);
    top: 0;
    left: 0px;
    line-height: initial;
    font-size: 15px;
    height: 30px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 90px;
    line-height: 24px;
    opacity : 0;
    border-top-right-radius : 3px;
    border-bottom-right-radius : 3px;
}
.menu.open li span.label {
    line-height: initial;
    font-size: 15px;
    height: 35px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 90px;
    line-height: 24px;
    border-top-right-radius : 3px;
    border-bottom-right-radius : 3px;
}
.menu.collapsed li:hover span.label {
    visibility : visible;
    transition: all .28s cubic-bezier(0.070, 0.235, 0.050, 1.320);
    left : 60px;
    opacity : 1;
}

.menu li.bigger {
    padding: 1em;
}
.menu.mobile {
    overflow-y: auto;
    overflow-x: hidden;
}
.menu li a {
    color: #6c777b;
}
li.active {
    background-color: #ccc;
}
li#log-galigeo:hover , .menu-sep:hover{
    background-color: #fff !important;
}
.navbar-fixed {
    margin-left: 80px;
}
.breadcrumb-nav {
	background-color: #ffffff !important;
	box-shadow: none !important;
  }
  .breadcrumb-nav .breadcrumb:last-child {
	color: #647594 !important;
  }
  .breadcrumb-nav .breadcrumb:before {
	color: #647594 !important;
  }
  .breadcrumb-nav .breadcrumb {
	color: #647594 !important;
	font-size: 15px !important;
  }
  .admin-main {
      padding: 0.5rem 2rem;
      height: calc(100vh - 270px);
      overflow-y: auto;
  }

  .admin-main::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #d2d2d2;
    border-radius: 10px;
  }

  .admin-main::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: #b3b3b3;
  }
.btn {
    background-color: #2ECC71; 
}
/*################ menu top bar*/
  .topnav {
    overflow: hidden;
    padding : 0.75rem 2rem;
    height: 48px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px;
    /*border-bottom: 1px solid #2ECC71;*/
  }
  .topnav .floatLeft {
    display: flex;
  }
  .topnav .floatCenter {
    display: flex;
  }
  .topnav .floatRight {
    display: flex;
  }
  .topnav .menu-home {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
  }
  .topnav .menu-item {
    display: block;
    color: #ADB5BD;
    text-align: center;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 30px;
  }
  
  .topnav .icon {
    display: none;
  }
  .topnav .menu-item span, .topnav .menu-item a {
      display: block;
  }
  .topnav .menu-home span , .topnav .menu-home a{
    display: block;
  }
  .topnav .menu-home span i, .topnav .menu-home a i {
    color: #fff;
    display: block;
    height : 2rem;
    width : 2rem;
    border-radius: 15px;
    cursor: pointer;
    font-style: normal;
    border : solid 1px White;
  }
  .home-container {
    border: 1px solid #2ECC71;
    border-radius: 100%;
    margin-right : 0.75rem;
  }
  .topnav .menu-item span i, .topnav .menu-item a i {
    color: #000;
    display: block;
    height : 2rem;
    width : 2rem;
    background-color : #2ECC71;
    margin-right : 0.75rem;
    border-radius: 15px;
    cursor: pointer;
    font-style: normal;
  }
  .topnav .menu-hello {
  color: #fff; 
  margin-right: 2rem;
  font-size: 0.875rem;
  align-self: center;
  
  }
  .topnav .hello-txt {
    font-weight: 500;
  }
  #btn-dropdown-profile {
  color: #000;
  display: block;
  height : 2rem;
  width : 2rem;
  background-color : White;
  margin-right : 0.75rem;
  border-radius: 15px;
  cursor: pointer;
  }
  #btn-dropdown-profile i {
    padding-top: 5px;
  }
  .topnav .menu-item.lang span:hover i{
  border: none;
  }
  
  .topnav .menu-item span:hover i , .topnav .menu-item.active span i, .topnav .menu-item a:hover i , .topnav .menu-item.active a i {
    fill: #fff; 
    background-color: #FD7E14;
    border : solid 1px White;
  }
  
  @media screen and (max-width: 600px) {
    .topnav .menu-hello {
      display: none;
    }
  }
  .topnav .catalogue {
      background: url(../../ui/img/svg/catalogue.svg);
      background-size: 14px;
      background-repeat: no-repeat;
      background-position: 7px center;
  }
  .topnav .avatar {
    background: url(../../ui/img/svg/avatar.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
  }
  .topnav .admin {
    background: url(../../ui/img/svg/admin.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
  }
  .topnav .home {
   /* background: url(../../ui/img/svg/home.svg);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center 5px;*/
    background-color: #2ECC71;
    -webkit-mask:  url(../../ui/img/svg/home.svg) no-repeat center 5px;
    mask: url(../../ui/img/svg/home.svg) no-repeat center 5px;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }
  .topnav .logout {
    background: url(../../ui/img/svg/logout.svg);
    background-position: center center;
      background-repeat: no-repeat;
      background-size: 15px 15px;
  }
  .topnav .user {
  background: url(../../ui/img/svg/user.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  }
  
  .topnav .map-title:hover i {
    margin-left: 5px;
    /*display: inline-block !important;*/
    margin-top: 5px;
    float: right;
  }
  .topnav .settings {
      background: url(../../ui/img/svg/settings.svg);
      background-size: 18px 18px;
      background-repeat: no-repeat;
      background-position: center;
  }
  
  /******************************** Nav Menu *****************************/
  nav.menu-top {
    padding: 0.5rem 2rem;
    background-color: #F8F9FA;
    border-bottom: 1px solid #DEE2E6;
    box-shadow: none;
  }
  .menu-top > ul{
    display: block;
    margin: auto;
  }
  /* This is the very basic steps of creating a horizontal menu */
  
  /* Reset from the regular list definitions above */
  .menu-top, .menu-top ul, .menu-top ul li, .menu-top ul li a,
  .menu-top ul ul, .menu-top ul ul li, .menu-top ul ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  }
  
  /* Clearfix needed only in case of floating the LI, but not when using the inline method.
  .menu:after, .menu-top > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  }
  */
  
  /* list-style-type: none to remove the bullets.
  text-align: center in combination with LI set to inline is centering the whole menu, great.
  If inline cannot be used due to the white-space problem, check this method for absolute centering:
  http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ */
  .menu-top ul {
    list-style-type: none; 
    text-align: center;
  } 
  
  /* position: relative is needed for the position: absolute of submenu to refer to its parent element.
  LI needs to be set to inline to go into horizontal.
  The only disadvantage compared to float:left is a mysterious 4px gap between the elements - 
  on how to remove it see https://css-tricks.com/fighting-the-space-between-inline-block-elements/
  text-align: center makes the A links centered inside their LI containers, only makes sense if A links have a fixed width */
  .menu-top ul li {
    position: relative;
    display: inline-block; 
    text-align: center;
  }
  
  /* text-decoration: none is needed to remove the underlining of links.
  display: inline-block is needed to apply a fixed width or padding to this otherwise inline element of A. */
  .menu-top ul li a {
    text-decoration: none;
    display: inline-block;
    padding: 20px;
    color: #333;
    background: #F8F9FA;
  }
  
  /* Declaration of hover, focus and active state - can be done separately of course if desired */
  .menu-top ul li a:hover, .menu-top ul li a:focus, .menu-top ul li a:active  {
    color: rgb(0, 0, 0);
    background: #F8F9FA;
  }
  
  /* Styling of the arrow that indicates a submenu and which by default is way too big. */
  .menu-top .menu-arrow {
    font-size: 10px;
    margin-left: 5px;
  }
  
  
  
  
  
  /******* Here starts the submenu section. *******/
  /* First, the submenu is positioned in relation to the LI of parent absolutely.
  To not be visible, there are three options: left-9999px, display: none or opactity.
  I have chosen opacity because it allows smooth blending in while not having any disadvantages. 
  Using this method instead of display:none screenreaders will still be able to see the whole menu.
  Yet on veeery large sites this might lead to an information overflow and display:none here and display:initial on the next item might be preferable:
  http://manwithnoblog.com/2009/12/06/the-case-for-the-use-of-display-none/ */
  .menu-top ul ul {
    position: absolute;
    left:0;
    display: none;
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
  }
  
  /* When the parent LI is hovered, submenu is made visible. */
  .menu-top ul li.open ul{
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
    filter: alpha(opacity=100); /* IE 5-7 */
  }
  
  /* The LI of the submenu are set back to block, so they are aligned vertically again. 
  Also text-align is set back to left, because centered entries don't look good in the submenu.*/ 
  .menu-top ul ul li {
    display: block;
    text-align: left;
    width: 100%;
  }
  
  /* Styling of the submenu entries.
  Width: 100% is needed here so the border goes to the end of the LI which is giving the width based on the longest entry.
  Min-width is set to have a more consistent appearance if some submenu items would otherwise be very short.
  White-space is set to nowrap so they stay in one line.
  Border bottom is simply a nice thing in a submenu :) */
  .menu-top ul ul li a {
    width: 100%;
    min-width:200px;
    padding: 20px;
    white-space: nowrap;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
    background: #f5f5f5;
  }
  
  /* Declaration of hover, focus and active state - can be done separately of course if desired */
  .menu-top ul ul li a:hover, .menu-top ul ul li a:focus, .menu-top ul ul li a:active  {
    color: rgb(0, 0, 0);
    background: rgb(197, 200, 201);
  }
  
  
  /* Styles and hides the responsive button.
  This is a pure CSS solution for the moment, using an invisible checkbox as toggle element. */
  .menu-top-responsive-button {
    padding: 20px;
    color: #333;
    font-weight: bold;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid #ccc;
    text-align: center;
    display: none;
  }
  
  /* Permanently hides the checkbox that helps us as a menu toogle element */
  input[id=menu-top-responsive-button] {
    display: none;
  }
  
  /* Shows menu when invisible checkbox is checked */
  input[id=menu-top-responsive-button]:checked ~ .menu-top {
    display: block;
  }
  
  
  /******* Responsiveness *******/
  /* This is the very basic one-step solution without any intermediary stages. 
  The menu is directly collapsing at a certain breakpoint that needs to be set according to the width of the respective menu.
  For later WordPress use, meaning dynamic content, we need to expand this solution.
  */
  @media screen and (max-width : 780px){
  
  /* Shows the responsive button */
  .menu-top-responsive-button {
    display: block;
  }
  
  .menu-top {
    display: none;
  }
  
  /* Reset menu items position to stack up vertically.
  Adding a bottom line for better separation. */
  .menu-top ul li {
    display: block;
    border-bottom: 1px solid #ccc;
  }
  
  /* Making all items full width */
  .menu-top ul li, .menu-top ul li a {
    width: 100%;
  }
  
  /* Reset to position: relative is needed so the submenu is opening inside the element flow, not covering the following parent menu items.
  This is why hiding them can not be done with the left:-9999px method, and also opacity doesn't work here because it leaves an empty space between the parent items. 
  So for the moment it seems that responsive dropdown menus can not be accomplished accessible using CSS only. */
  .menu-top ul ul {
    position: relative;
    display: none;
  }
  
  /* Showing the submenu */
  .menu-top ul li.open ul {
    display: block;
  }
  
  /* text-align is now set to center, because left entries don't look good in a responsive submenu. */ 
  .menu-top ul ul li {
    text-align: center;
  }
  .menu-top ul li .active {
    font-weight: 700 !important;
    background-color: #ccc !important;
  }
  }
  .menu-top nav {
    background-color: #fff !important;
    box-shadow: 0 0px 0px 0 rgb(0 0 0 / 14%), 0 1px 0px 0 rgb(0 0 0 / 12%), 0 0px 0px -2px rgb(0 0 0 / 20%) !important;
  }
  .primary-background {
    background-color: #2ECC71 !important;
  }
  .primary-border {
    border-color: #2ECC71 !important;
  }
  .primary-color {
    color: #2ECC71 !important;
  }
  .secondary-color {
    color: #FD7E14 !important;
  }

#loading-icon.loading {
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

#loading-icon-mfa.loading {
  animation: spin 1s infinite linear;
  -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

#add-user-modal {
  box-shadow: 0px 12px 16px -4px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 17px;
  max-height: 80%;
}

#add-user-modal .modal-action {
  width: 100%;
  text-align: center;
}