/* ==========================================================================
   Hoodie Sign In / Sign Up / Sign out stylings
   ========================================================================== */

body, html, #Root {
  height: 100%;
  overflow: hidden;
  font-size: 16px;
  font-family: 'Droid Sans', Gill Sans,Gill Sans MT,Calibri,sans-serif; 
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

a{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.container {
  position: relative;
  background: #fff;
  margin-top: -10px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}


/* hide contents until we know if user is signed in or not */
body .hoodie-account-signedin,
body .hoodie-account-signedout,
body .hoodie-account-error {
  display: none;
}

html[data-hoodie-account-status=signedin]  .hoodie-account-signedin,
html[data-hoodie-account-status=error]     .hoodie-account-error,
html[data-hoodie-account-status=signedout] .hoodie-account-signedout {
  display: block;
}

.hoodie-accountbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;

}

.content {
  padding: 10px;
  float: left;
  width: 380px;
}
.code {
  margin: 0 0 0 400px;
  position: relative;
}
.code:before {
  content: 'main.js';
  display: block;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 48px;

  color: rgba(255, 255, 255, 0.1);
}

.code pre {
  border-radius: 0; 
  border-width: 0 0 0 1px;
  margin: 0;
  padding-left: 20px;
}

.copy {
  padding: 10px;
  margin: 30px 0 0;
  border-radius: 5px;
}
.hero-unit,
.copy {
  background: #EBE7DA;
  margin: 0;
  border-radius: 0;
}
.copy p {
  margin: 0;
}

#map {
  height: 100%;
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}


.col #map{
  width: auto;
  left: 0;
}

#Report{
  position: absolute;
  top: 0;
  right: 0;
  left: 0; 
  height: 100%;
  overflow: auto;
  z-index: 2000;
  background-color: white;
  padding: 0 2em;
  display: none;
}
#Report body{
  padding: 1em;
}

#Report td{
  padding: .5em 1em;
}

#Report .logo{
  width: 15em;
  margin: 1em 0;
  position: relative;
 
}

#ProjectSelect{
  padding: 20px 0 ;
  text-align: center;
}

#ErrorTypes{
  position: absolute;
  width: 50%;
  left: 0px;
  top: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 200;
  -webkit-box-shadow:  1px 0px 2px 0px rgba(0, 0, 0, 0.2);
  box-shadow:  1px 1px 2px 0px rgba(0, 0, 0, 0.2);
  background: #EEE;
}

.col #ErrorTypes{
  display: none;
}

#ErrorTypes > ol{
  padding: 10px 0 10px 50px;
  background-color: #FFF;
  margin: 0 0 30px 0;
  border-bottom: #DDD 1px solid;
  border-top: #DDD 1px solid;
}

#ErrorTypes ol ol{
  margin: 0 ;
	display: none;
}


#ErrorTypes a{
  color: #444;
  text-decoration: none;
}



#ErrorTypes > ol li{
  cursor: pointer;
  font-size: 18px;
  color: #CCC;
}

#ErrorTypes > ol > li > a{
  padding: 10px 0;
	display: block;
  margin: 0;    

}

#ErrorTypes  ol  ol  {
  
  margin: 0;
  padding:  5px 0 20px 10px;
  border-bottom: 1px solid #EEE;
}


#ErrorTypes  ol  ol li {
  font-size: 16px;
  padding: 10px 5px 10px 0;
  margin: 0 0;
}
#ErrorTypes  ol  ol li a{

  padding: 5px 25px 5px 2px;
  max-width: 95%;
  text-overflow: ellipsis;
 
  white-space: nowrap;
  display: block;
  position: relative;
}

#ErrorTypes > ol > li a i{
  position: absolute;
  right: -10px;
  top: 0;
  margin-right: 1em;
  cursor: pointer;
  background-color: #eee;
  border: 5px solid #eee;
}
#ErrorTypes > ol > li a i.active{
  
  background-color: #FF00BA;
  border: 5px solid #FF00BA;
}


#Centerbutton{
  background: url("/assets/images/map_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2000;    
  
}

#FilterPoints{
  background: url("/assets/images/point_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 80px;
  right: 10px;
  z-index: 2000; 
}
#Centerbutton span, #FilterPoints span, #FilterStations span, #FilterScan span ,#FilterDanger span{
  position: relative;
  top: 45px;
  width: 55px;
  text-align: center;
  display: block;
  font-weight: bold;
  text-shadow: 0 0 px  #FFF; 
}

#FilterStations span, #FilterDanger span{
  top: 40px;    
}

#FilterScan span{
  top: 40px;    
}

#Centerbutton span{
  top: 50px;
}

#Shortcuts{
  position: absolute;
  top: 320px;
  right: 15px;
  z-index: 2000;    
}

a.shortcut{
  background-color: #EEE;
  border: #222 1px solid;
  padding: 1em;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.25);
  margin: 10px;
  transition: all 0.2s ease;
  display: block;
  color: 000;
}
.shortcut:active{
  background-color: #009640;
  color: white;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}



#DeletePointButton{
  background: url("/assets/images/point_delete.png") 50% 50% no-repeat ;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 10px;
  right: 140px;
  z-index: 2000; 
  display: none;    
}

#DeletePointButton.active{
  display: block;   
}

#FilterStations{
  background: url("/assets/images/filter_stations_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 140px;
  right: 10px;
  z-index: 2000;
  border-radius: 5px;
}

#FilterDanger{
  background: url("/assets/images/filter_danger_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 200px;
  right: 10px;
  z-index: 2000; 
}



#FilterScan{
  background: url("/assets/images/filter_scan_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 265px;
  right: 10px;
  z-index: 2000; 
}

.dangers{
  color: #FF00BA;
}


.scan{
  color: rgb(29, 121, 183);
}


#FilterScan.active{
  background: url("/assets/images/filter_scan_on.png")  50% 50% no-repeat ;
  cursor: pointer;
}
#FilterStations.active {
  background: url("/assets/images/filter_stations_on.png")  50% 50% no-repeat ;
  cursor: pointer;
}
#FilterDanger.active{
  background: url("/assets/images/filter_danger_on.png")  50% 50% no-repeat ;
  cursor: pointer;
}


#FilterPoints.active{
  background: url("/assets/images/point_on.png")  50% 50% no-repeat ;
  cursor: pointer;
}

#Centerbutton.active{
  background: url("/assets/images/map_on.png") 50% 50% no-repeat;
  cursor: pointer;
}


#NewPointbutton{
  background: url("/assets/images/add_point_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 10px;
  right: 80px;
  z-index: 2000;

}


#Pointbutton{
  background: url("/assets/images/pin-m+555.png") 50% 50% no-repeat;
  width: 30px;
  height: 70px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2000;
}

#DangerPointbutton{
 background: url("/assets/images/danger_point_off.png") 50% 50% no-repeat;
  width: 53px;
  height: 53px;
  position: absolute;
  top: 10px;
  left: 60px;
  z-index: 2000;
  display: none;
}

#ZoomExtents{
  background: url("/assets/images/extents.png") 50% 50% no-repeat;
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2000;

}

#DangerPointbutton.active{
  background: url("/assets/images/danger_point_on.png") 50% 50% no-repeat;
}


#ZoomExtents:active{
  background: url("/assets/images/extents_down.png") 50% 50% no-repeat;
  

}

#Pointbutton.active{
  background: url("/assets/images/pin-m+E8AF0C.png") 50% 50% no-repeat;   
}





#NewPointbutton.active{
  background: url("/assets/images/add_point_on.png") 50% 50% no-repeat;
  cursor: pointer;
}

#CenterPoint {
  
}

#CenterPoint .center{
  position: absolute;
  bottom: 50%;
  left: 50%;
  margin: -1px -2px;
  width: 1px;
  height: 1px;
  z-index: 200;

  background-color: rgba(255, 255, 255, 0.5);
  box-shadow:  0 0 0 3px rgba(0, 0, 0, 0.5);
  border-radius: 1px;
  
  
}

#CenterPointbutton.active{
  background: url("/assets/images/point_on.png");
  cursor: pointer;
}

#ActiveList.active{
  display: block;
  text-align: center;    
}

#ActiveList{
  display: none;
  position: absolute;
  left:50%;
  top: 70px;
  margin-left: -200px;
  z-index: 2000;
  width: 400px;
  overflow: visible;
  text-align: right;
}

#ActiveList span{
  -webkit-border-radius: 20px;
  border-radius: 20px;
  padding: 6px 8px;
  display: inline-block;    
  margin: 5px 10px 0 0;
  color: #FFF;
}

#ActiveList .latlng span{
  padding: 10px 0;
  display: inline-block;
  margin: 0;
  color: #222;
  pointer-events: none;
}

#ActiveList .latlng{
  padding: 0px 10px;
  color: #222;
  font-size: 1.6em;
  max-width: 200px;
  margin: -55px auto 10px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
}

#ActiveList .latlng.alert{
  padding-right: 0;
  background-color: rgba(255, 0, 0, 0.1);
  border-radius: 20px;
  border-color: red;
  color: red;
}
#ActiveList .latlng.alert span{
  
  color: darkred;
  font-weight: bold;
}


#ActiveList span[data-ref]  {
  background: rgba(0, 0, 0, 0.5);
}

#Buttons{
  position: relative;
  bottom: 10px;
  text-align: center;
}

#Buttons .btn{
  margin-bottom: 10px;
}


#Buttons .sync{
  display: none;
}



#LoginForm
{
  padding:  10px 0 0 10px;
  background-color: #EEE;
}

#LoginForm  input
{
	margin: 0 0 10px 0;
  text-align: center;
  max-width: 100px;
}


#LoginForm.invalid input
{
	animation:invalid .5s;
	-webkit-animation:invalid .5s;
  position: relative;

}

#FeilMenu input{
  width: 120px;
  clear: both; 
  margin:10px 0 0;
}


#ToggleSidevbar{
  position: absolute;
  z-index: 999;
  bottom: 0;
  left: 0;
  cursor: pointer;
  padding: 20px;
  background: rgba(255,255,255,0.2);

}


#ToggleSidevbar .col{
  display: none;
  margin: 0;
}
#ToggleSidevbar.col .col{
  display: block;
}

#ToggleSidevbar.col .exp{
  display: none;
  margin:0;
}


@keyframes invalid

0%   {left:20px;}
10%  {left:-20px;}
30%  {left:20px;}
60%  {left:-20px;}
100% {left:0px;}


@-webkit-keyframes invalid /* Safari and Chrome */
{
	0%   {left:20px;}
	10%  {left:-20px;}
	30%  {left:20px;}
	60%  {left:-20px;}
	100% {left:0px;}
}

#WellDone, #Done, #ToBeDone, #DownloadingDone, #Downloading{
  display: none;
}

#AlertArea{
  padding: 2em;
}

#Alerts{
  list-style-type: none;  
  margin: 0;
  padding: 2em 0;
  border-top: 1px dashed grey;
}

#Alerts li{
  padding: .2em 0;
  cursor: pointer;

}

.leaflet-marker-icon{
  background-color: rgba(10,10,10,0.5);
  height: 50px;
  border-radius: 25px;
}

.leaflet-marker-icon.station{

  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(214, 0, 249, 0.8);
}


.leaflet-marker-icon.danger{
  box-shadow: 0 0 3px 3px rgba(255, 0, 186, 0.39);
  text-align: center;
  line-height: 1.3em;

}

.leaflet-marker-icon.scan{
  box-shadow: 0 0 3px 3px rgb(29, 121, 183);
  text-align: center;
  line-height: 1.3em;

}


.leaflet-marker-icon.alert{
  border: 0 ;
  box-shadow: 0 0 10px 3px rgba(150,0,0,0.5);
  text-align: center;
  line-height: 1.3em;
  padding: 0;

}

.leaflet-marker-icon.danger:before{
  color: #FF00BA;
    font-size: 2em;
  content: "⚠";
  margin-top: -7px;
  margin-left: -7px;
  display: block;
}
 
.leaflet-marker-icon.alert:after{
  content: "⚡";
  font-size: 2em;
  color: #FF00BA;
  position: absolute;
  top: -5px;
  right: -5px;
}

.leaflet-marker-icon.scan:before{
  content: "🌲";
    font-size: 2em;
  color: rgb(29, 121, 183);
  margin-top: -7px;
  margin-left: -7px;
  display: block;

}

.leaflet-marker-icon.notDone{
  background-color: rgba(66, 30, 30, 0.8);
}


.leaflet-marker-icon.done{
  background-color: rgba(3, 95, 3, 0.63);
}


.groupIcon{
  display: block;
  padding: 5px 0;
  text-align: center;
  color: white;
  font-weight: bold;
}


.leaflet-marker-icon{
  background-color: rgba(10,10,10,0.5);
  height: 50px;
  border-radius: 25px;
  margin-top: -25px;
  
}




.icon_555{
  background-color: rgba(10,10,10,0.5);
}

.icon_00A707{
  background-color: rgba(0, 167, 7, 0.5);
}

.icon_FF0000{
  background-color: rgba(255, 0, 0, 0.84);
}


.icon_E8AF0C{
  background-color: rgba(232, 175, 12, 0.84);
}

.icon_0099ff{
  background-color: rgb(245, 104, 0);
}

#map.filter .icon_FF0000,
#map.filter .icon_00A707,
#map.filter .done
    {
      display: none;
    }


#Counter{
  padding: 1em 1em 0;
  text-align: center;
  font-size: 1em;
  line-height: 1.5em;
  background-color: #EEE;
}


#Version{
  padding: 2em 1em;
  text-align: center;
  font-size: 0.6em;
  line-height: 1.5em;
  background-color: #EEE;

}


#Danger .arrow{
  position: absolute;
  top: 0;
  left: 95%;
  background: transparent;
  z-index: 110;
  width: 0;
  height: 0;
  border: solid;
  border-width: 10px;
  border-color: transparent transparent black transparent;
  transition: all 0.5s ease;
  opacity: 0.4;
  
  
}

#Danger .arrow.station{
  opacity: 0.8;    
}

#Danger .arrow.danger, #Danger .arrow.scan{
  opacity: 1;    
}

#Danger .arrow.left{
  
  border-color: transparent black transparent  transparent;
  margin-left: -5px;
}
#Danger .arrow.lefttop{
  
  border-color:   black transparent transparent black    ;
  margin-left: 5px;
}
#Danger .arrow.righttop{
  
  border-color:    black black   transparent  transparent   ;
  margin-left: -18px;
}
#Danger .arrow.leftbottom{
  border-color:    transparent transparent black   black  ;
  margin-top: -20px;
  margin-left: 5px;
}
#Danger .arrow.rightbottom{
  
  border-color:  transparent  black black     transparent   ;
  margin-top: -20px;
  margin-left: -20px;
}
#Danger .arrow.top{
  
  margin-top: -5px;
}
#Danger .arrow.right{
  
  border-color:   transparent   transparent   transparent  black ;
  margin-left: -10px;
}
#Danger .arrow.bottom{
  
  border-color: black transparent transparent  transparent;
  margin-top: -12px;

}




#Danger .arrow.danger.left{
  
  border-color: transparent #FF00BA transparent  transparent;
}
#Danger .arrow.danger.lefttop{
  
  border-color:   #FF00BA transparent transparent #FF00BA    ;
}
#Danger .arrow.danger.righttop{
  
  border-color:    #FF00BA #FF00BA   transparent  transparent   ;
}
#Danger .arrow.danger.leftbottom{
  border-color:    transparent transparent #FF00BA   #FF00BA  ;
}
#Danger .arrow.danger.rightbottom{
  
  border-color:  transparent  #FF00BA #FF00BA     transparent   ;
}
#Danger .arrow.danger.top{
  
  border-color: transparent transparent #FF00BA transparent;
}
#Danger .arrow.danger.right{
  
  border-color:   transparent   transparent   transparent  #FF00BA ;
}
#Danger .arrow.danger.bottom{
  
  border-color: #FF00BA transparent transparent  transparent;

}


#Danger .arrow.station.left{
  
  border-color: transparent blue transparent  transparent;
}

#Danger .arrow.station.lefttop{
  
  border-color:   blue transparent transparent blue    ;
}
#Danger .arrow.station.righttop{
  
  border-color:    blue blue   transparent  transparent   ;
}
#Danger .arrow.station.leftbottom{
  border-color:    transparent transparent blue   blue  ;
}
#Danger .arrow.station.rightbottom{
  
  border-color:  transparent  blue blue     transparent   ;
}
#Danger .arrow.station.top{
  
  border-color: transparent transparent blue transparent;
}
#Danger .arrow.station.right{
  
  border-color:   transparent   transparent   transparent  blue ;
}
#Danger .arrow.station.bottom{
  
  border-color: blue transparent transparent  transparent;

}


#Danger .arrow.scan.left{
  
  border-color: transparent  rgb(29, 121, 183) transparent  transparent;
}
#Danger .arrow.scan.lefttop{
  
  border-color:    rgb(29, 121, 183) transparent transparent  rgb(29, 121, 183)    ;
}
#Danger .arrow.scan.righttop{
  
  border-color:     rgb(29, 121, 183)  rgb(29, 121, 183)   transparent  transparent   ;
}
#Danger .arrow.scan.leftbottom{
  border-color:    transparent transparent  rgb(29, 121, 183)    rgb(29, 121, 183)  ;
}
#Danger .arrow.scan.rightbottom{
  
  border-color:  transparent   rgb(29, 121, 183)  rgb(29, 121, 183)     transparent   ;
}
#Danger .arrow.scan.top{
  
  border-color: transparent transparent  rgb(29, 121, 183) transparent;
}
#Danger .arrow.scan.right{
  
  border-color:   transparent   transparent   transparent   rgb(29, 121, 183) ;
}
#Danger .arrow.scan.bottom{
  
  border-color:  rgb(29, 121, 183) transparent transparent  transparent;

}