main.scss

/* Main Application */
@import "template_mixin.scss";
@import "Drawer.scss";
html,body {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    font-family: Arial,Helvetica,sans-serif;
    color: $font-color;
}

.ac-label {
  background-color : #4C8140;
}
#mapDiv {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.hidden{
    display:none;
}

.ac-container{
    width:$drawer-width;
}
.ac-container label{
    padding:2px 20px;
    position:relative;
    z-index:20;
    display:block;
    height:30px;
    cursor:pointer;
    color: $font-color-dark;
    line-height:33px;
    font-size:1.2em;
    font-weight:500;
    @include transparent(rgb(163,163,163), 0.5); 
}
.ac-container label:hover{
     @include transparent(rgb(189,189,189), 0.5);
}
.esriRTL .ac-container label{
    float:right;
}

.ac-container label:after,
.ac-container input:checked + label:after{
    font-family: "simple";
    font-style: normal;
    font-weight: normal;
    content: '\e803'; /*down arrow*/
    position: absolute;
    right: 25px;
    cursor:pointer;
}

.ac-container input:checked + label:after{
    content: '\e804'; /*up arrow*/
    cursor:pointer;
}


.ac-container input{
    display: none;
}
.ac-container .article{
    @include transparent(rgb(255,255,255), 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
    @include transition(height, 0.3s, ease-in-out);
    @include transition(box-shadow, 0.6s, linear);
    /*transition: 
        height 0.3s ease-in-out, 
        box-shadow 0.6s linear;*/
}

.ac-container input:checked ~ div.ac-medium, .ac-container input:checked ~ div.ac-large{
    @include transition(height, 0.5s, ease-in-out);
    @include transition(box-shadow, 0.1s, linear);
    /*transition: 
        height 0.5s ease-in-out, 
        box-shadow 0.1s linear;*/

}
.simpleGeocoder .esriGeocoderMenu{
    color: #333;
}
.ac-container input:checked ~ div.ac-medium{
    height: 20%;
}
.ac-container input:checked ~ div.ac-large{
    height: 80%;
}
.calcite label{
    margin-bottom:0 !important;
}

.panel_content{
    padding:10px;
    max-width:$panel-width - 40;
    font-size: $panel-font-size;
}
.esriSimpleSlider{
    display:none;
    left:2px;
    @include respond-to(850){
        display:block;
    }
}
#search{
    position:absolute;
    top:0;
    padding:2px 4px;
    right:8px;
}

.open-drawer{
 /*Hide geocoder for small screen sizes when drawer is open*/
    display:none;
    @include respond-to(450){
     display:block;
    }
}
/* Esri Jvascript API*/
.simpleGeocoder .esriGeocoderResult{
  color:#333;
}
.esriPopup .pointer.bottom , .esriPopup .pointer.bottomLeft, .esriPopup .pointer.bottomRight{
    background: #f7f7f7 !important;
}
#locateDiv{
    position: absolute;
    top:55px;
    left:4px;
    z-index: 50;
    @include respond-to(850){
        top:130px;
    }
}

#homeDiv{
  position:absolute;
  top:100px;
  left:4px;
  z-index:50;
  @include respond-to(850){
    top:175px;
  }
}
.esriSimpleSlider {
    top: 55px;
    left:4px;
}
@font-face {
  font-family: 'simple';
  src: url('../font/simple.eot?14672126');
  src: url('../font/simple.eot?14672126#iefix') format('embedded-opentype'),
       url('../font/simple.woff?14672126') format('woff'),
       url('../font/simple.ttf?14672126') format('truetype'),
       url('../font/simple.svg?14672126#simple') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "simple";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
     
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-menu:before { content: '\e801'; } /* '' */
.icon-down-open:before { content: '\e803'; } /* '' */
.icon-up-open:before { content: '\e804'; } /* '' */