/* define color names that can be used as classes in HTML code */

/* HRSL thresholds used in TZ:
   --HRSL_A :  0 to  3  ppp
   --HRSL_B :  3 to  5  ppp
   --HRSL_C :  5 to 10  ppp
   --HRSL_D : 10 to 40  ppp
   --HRSL_E : 40 to inf ppp
*/

:root {
    --Main: #9EB4CC;
    --GSMA_Black_100 : #000000;
    --GSMA_Red_100 : #DE002B;
    --GSMA_Grey_100 : #808285;
    --GSMA_Teal_100 : #99CCCC;
    --GSMA_Yellow_100 : #FCBB2C;
    --GSMA_Orange_100 : #FF6600;
    --GSMA_Blue_100 : #00568F;
    --GSMA_Mint_100 : #00A182;
    --GSMA_Purple_100 : #95226C;
    --GSMA_Purple_80 : #BA6099;
    --GSMA_Purple_60 : #CB89B3;
    --GSMA_Purple_40 : #DCB0CD;
    --GSMA_Purple_20 : #EDD7E5;
    --GSMA_Green_100 : #9CB227;
    --GSMA_Cyan_100 : #00A6C9;
    --GSMA_Pink_100 : #EE3772;
    --GSMA_Charcoal_100: #231F20;
    --HRSL_A : #FFFFB2;
    --HRSL_B : #FECA55;
    --HRSL_C : #FD8D3C;
    --HRSL_D : #F03B20;
    --HRSL_E : #BD0026;
}

.gsma_red {
    background: var(--GSMA_Red_100);
}

.gsma_teal {
    background: var(--GSMA_Teal_100);
}


body{
  margin:0px;
  font-family: Arial, Helvetica, sans-serif;
  height:100vh;
  min-height:100vh;
/*  overflow:hidden;*/
}

.navbar{
 background: #000;
 color: white;
}
.navbar-default{
  color: white;
}

.navbar-brand{
  color: white;
}

.title-nav{
  color: white;
}

.content-box{
position: relative;
top:0;
bottom:0;
padding-left:30px;
padding-right:45px;

}


#map{
overflow:hidden;
height: 100%;
position:relative;
}


@media-breakpoint-up(sm) {
  h1 {
    font-size: 8em;
  }
}

@media-breakpoint-up(md) {
  h1 {
    font-size: 20em;
  }
}

@media-breakpoint-up(lg) {
  h1 {
    font-size: 48em;
  }
}

.button .menu-mode {
    background-color: var(--GSMA_Red_100);
    border: none;
    color: var(--GSMA_Black_100);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.menu-mode-backup {
    background-color: var(--GSMA_Red_100);
    height : 5vw;
    width : 5vw;
    border: none;
    padding: 0px;
    color: var(--GSMA_Black_100);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.menu-mode {
    background-color: var(--GSMA_Red_100);
    border: none;
    padding: 0px;
    margin : 0px;
    color: var(--GSMA_Black_100);
    text-align: center;
    display: inline-block;
}

button.menu-mode{
    float: left;
    border: 1px solid red;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

button.menu-mode:hover {
    background-color: var(--GSMA_Red_100);
    color: white;
}


.poi-back{
z-index:10000;
background-image: url(images/Gizmo_GREY_Map_Location.png);
height:100%;
width:100%;
}

.leaflet-sidebar-back {
background : var(--GSMA_Grey_100);
}

.mode-btn {
    border: none;
    padding: 0px;
    margin : 0px;
    text-align: center;
    display: inline-block;
}

.custom-marker-cluster {
	background-clip: padding-box;
	border-radius: 10px;
	border-color: var(--GSMA_Black_100);
	}
.custom-marker-cluster div {
	width: 65px;
	height: 20px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	/*font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;*/
	}
.custom-marker-cluster span {
    color:"white";
    font-size: 15px;
	line-height: 20px;
	}

/*
done with https://www.w3schools.com/colors/colors_picker.asp
select strong color, and then take light at +5% lighter
*/

/*light color */
.custom-marker-cluster-target{
	background-color: rgba(204, 41, 0, 0.6);
    }

/*strong color */
.custom-marker-cluster-target div{
    background-color:rgba(179, 36, 0, 0.6);
    }

/*light color */
.custom-marker-cluster-airbnb {
	background-color: rgba(255, 133, 51, 0.6);
    }

/*strong color */
.custom-marker-cluster-airbnb div{
    background-color:rgba(255, 117, 26, 0.6);
    }


/*light color */
.custom-marker-cluster-customer {
	background-color: rgba(77, 166, 255,0.6);
    }

/*strong color */
.custom-marker-cluster-customer div{
    background-color:rgba(51, 153, 255,0.6);
    }

/*light color */
.custom-marker-cluster-sett {
	background-color: var(--GSMA_Green_100);
    }

/*strong color */
.custom-marker-cluster-sett div{
    background-color:var(--GSMA_Green_100);
    }
/*light color */
.custom-marker-cluster-pois {
	background-color: var(--GSMA_Red_100);
    }

/*strong color */
.custom-marker-cluster-pois div{
    background-color:var(--GSMA_Red_100);
    }

/*light color */
.custom-marker-cluster-health {
	background-color: var(--GSMA_Red_100);
    }

/*strong color */
.custom-marker-cluster-health div{
    background-color:var(--GSMA_Red_100);
    }

/*light color */
.custom-marker-cluster-schools {
	background-color: var(--GSMA_Mint_100);
    }

/*strong color */
.custom-marker-cluster-schools div{
    background-color:var(--GSMA_Mint_100);
    }

/*light color */
.custom-marker-cluster-airports {
	background-color: var(--GSMA_Blue_100);
    }

/*strong color */
.custom-marker-cluster-airports div{
    background-color:var(--GSMA_Blue_100);
    }

/*light color */
.custom-marker-cluster-camps {
	background-color: var(--GSMA_Orange_100);
    }

/*strong color */
.custom-marker-cluster-camps div{
    background-color:var(--GSMA_Orange_100);
    }


.check {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  input {
    display: none;
    &:checked + .box {
      background-color: #b3ffb7;

      &:after {
        top: 0;
      }
    }
  }

  .box {
    width: 100%;
    height: 100%;
    transition: all 1.1s cubic-bezier(.19,1,.22,1);
    border: 2px solid transparent;
    background-color: white;
    position: relative;
    overflow: hidden;
    cursor: pointer;
      box-shadow: 0 5px rgba(0,0,0,.2);
    &:after {
      width: 50%;
      height: 20%;
      content: '';
      position: absolute;
      border-left: 7.5px solid;
      border-bottom: 7.5px solid;
      border-color: #40c540;
      transform: rotate(-45deg) translate3d(0,0,0);
      transform-origin: center center;
      transition: all 1.1s cubic-bezier(.19,1,.22,1);
      left: 0;
      right: 0;
      top: 200%;
      bottom: 5%;
      margin: auto;
    }
  }
}

.leaflet-horizontalcenter {
    position: absolute;
    left: 50%; /* possible because the placeholder's parent is the map */
    transform: translateX(-50%); /* using the CSS3 Transform technique */
    padding-bottom: 10px;
}

.leaflet-horizontalcenter .leaflet-control {
    margin-bottom: 0px;
}

#cov-bar{
display : flex;
float: left;
box-shadow: 0 0px 0px rgba(0,0,0,0);
border-radius: 0px
}

.icon {
  background-position: center center;
  height: 20px;
  width: 20px;
}

.icon-health {
    content : ' ';
    background-image: url(/static/css/images/Gizmo_BLACK_Health_Checkup.png);
}


.vcellTooltip {
  background: green;
  border: 2px solid cyan;
  color:white;
}
.leaflet-tooltip.vcellTooltip {
  color:white;
  background: var(--Main);
  border: 2px solid var(--Main)
}
.leaflet-tooltip-left.vcellTooltip::before {
  border-left-color: var(--Main);
}
.leaflet-tooltip-right.vcellTooltip::before {
  border-right-color: var(--Main);
}

.nav-tabs{
  background-color:var(--Main);
  color: #fff;
}
.tab-content{
    color:#fff;
    background-color:var(--Main);
    padding:5px
}
.nav-tabs > li > a{
  border: medium none;
  background-color:var(--Main);
  color:#fff;
}
.nav-tabs > li > a:hover{
    border: medium none;
    background-color:var(--Main);
    color:#fff;
}
.nav-tabs > li.active > a{
    background-color:var(--Main);
    color:#fff;
}
.nav-tabs > li.active > a:focus{
    background-color:var(--Main);
    color:#fff;
}
.nav-tabs > li.active > a:hover{
    background-color:var(--Main);
    color:#fff;
}