html{
    box-sizing: border-box;
    background:white;
	font-family: 'Roboto', sans-serif;
	color:#333;
}

*, *:before, *:after {
    box-sizing: inherit;
  }


body{
     background:white;
	 font-family: 'Roboto', sans-serif;
     color:#333;

}
 .column-layout{
     max-width:1700px;
     margin: 10px auto 0 auto;
     line-height:1.65;
}
 .main-column{
     padding:10px;
     flex:2;
     order:2;
     background:#fff;
     box-sizing:border-box;
     margin-bottom:0px;
     flex-basis:60%;
}
 .sidebar1{
     /* border: 2px dotted gray; */
     padding:20px;
     flex:1;
     order:1;
     box-sizing:border-box;
     margin-bottom:0px;
     flex-basis:20%;
}

.sidebar1 h2{
	margin-top:0;
	color:#333;
}
 .sidebar2{
    /* border: 2px dotted gray; */
     padding:10px;
     flex:1;
     order:3;
     text-align:center;
     box-sizing:border-box;
     margin-bottom:0px;
     flex-basis:20%;
}

        /*Nav Bar*/
        
        .topnav {
            overflow: hidden;
            background-color: #2C3E50;
            font-size: 15px;
            align-content: center;
        }
        
        .topnav a {
            float: right;
            padding:18px;
            color: #f2f2f2;
            text-decoration: none;
        }
        
        .topnav a:hover {
            border-radius:7px;
            
            font-weight: bold;
            color: #333;
            background-color: #FAC789
        }
        
        #title {
            padding-bottom: 15px;
          
		}
        
        #description{
            padding-bottom: 15px;
        }

		


 .call-outs-container{
    /* border: 2px dotted gray; */
     max-width:1700px;
     margin:0px auto 0 auto;
}
 .call-out{
    /* border: 2px dotted gray; */
     padding:0px;
     box-sizing:border-box;
     margin-bottom:0px;
     flex-basis:30%;
}
 .call-out:nth-child(1){
    /* border: 2px dotted gray; */
    text-align:left;
	order:1
}

#data-btn{
    float: right;
    padding: 5px;
    background-color: #cce3fd;
    border-radius:7px;

}

.lgd-btn{

    padding: 5px;
    background-color:rgba(255,255,255,0.9);
    border: solid white;
    border-radius:7px;
    -webkit-box-shadow: 3px 5px 23px -2px rgba(0,0,0,0.81);
    -moz-box-shadow: 3px 5px 23px -2px rgba(0,0,0,0.81);
    box-shadow: 3px 5px 23px -2px rgba(0,0,0,0.81);
}

.lgd-btn:hover{
    background-color: #fde6cc 
}

#data-btn:hover{
    background-color: #fde6cc;
}


.call-out:nth-child(1) img{
  margin-left: auto;
  margin-right: auto;
  display: block;
}


 .call-out:nth-child(2){
    /*border: 2px dotted gray;*/
	order:2;
    
    align-content: center;

}
 .call-out:nth-child(3){
    /* border: 2px dotted gray; */
    order:3;
    text-align:right;
}





 @media(min-width:1025px){
     .call-outs-container{
         display: flex;
         justify-content:space-between 
    }
	
	 .column-layout{
     display:flex;
}
}
 
#mapid{
	height:80vh;
    -webkit-box-shadow: 3px 5px 23px -2px rgba(0,0,0,0.81);
    -moz-box-shadow: 3px 5px 23px -2px rgba(0,0,0,0.81);
    box-shadow: 3px 5px 23px -2px rgba(0,0,0,0.81);
    z-index: 996;
}

#charts{
    height:80vh;
    align-content: center;	
}

#wocbaCnt{
	font-weight:bold;
	background:#f8a747;
	margin-bottom: 10px;
	text-align:center;
	height: 15vh;
    border-radius:1em;
    min-width: 130px;
    min-height: 140px;
    
}

#avgDriveTime{
	font-weight:bold;
	background:#fde6cc;
	min-width: 130px;
    min-height: 140px;
	margin-bottom: 10px;
	text-align:center;
	height: 15vh;
	border-radius:1em;

}

#vehiclesPHH{
	font-weight:bold;
    background:#87d0cf;
    min-width: 130px;
    min-height: 140px;
	margin-bottom: 10px;
	text-align:center;
	height: 15vh;
	border-radius:1em;
}

#barChartTitle{
	font-size:1.2em;
	text-align:center;
	padding-bottom:0.7em;
}

#donutChartTitle{
	font-size:1.2em;
	text-align:center;
	padding-bottom:0.7em;
}

a.leaflet-draw-edit-remove{
background-image:url(spritesheet.png);
background-position: -240px -2px;	
}

#ifs-logo{
    float:left;
    padding:10px;
}

#ifs-logo:hover{
    background-color: #2C3E50;
    float:left;
    padding:10px;
}


#copyright{
text-align: center;
padding-top: 1.5em;
bottom:0px;
z-index:990;
}
#myChart{
    max-height: 300px;
    max-width: 340px;
    
}
#myDonutChart{
    max-height: 300px;
    max-width:340px
    
}





.showLgdBtn{
    position:relative;
    width:15%;
    top:95%;
    left:90%;
    z-index:1000;
}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index:1000;
    left: 0;
    top: 0;
    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.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    z-index: 1000;

  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }