*{

    margin: 0 auto;

    padding:0;

    box-sizing: border-box;

    list-style: none;

    text-decoration: none;

    font-family:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

}



html,

body {

  height: 100%;

  margin: 0;

  overflow: hidden;

}



.box {

  display: flex;

  flex-flow: column;

  height: 100%;

}



.box .row {

  border: 1px dotted grey;

}



.box header {

  flex: 0 1 auto;

  /* The above is shorthand for:

  flex-grow: 0,

  flex-shrink: 1,

  flex-basis: auto

  */

}



.box .row.content {

  flex: 1 1 auto;

}



.box .row{margin: 0;}



.mainContainer{

    border: 9px solid black;

}



.logo {

    /* position: relative;

    right: 194px; */

    margin-left: 0;
    display: inline-block;
}
.logo a{color:#000}

.navbar-brand{margin-top:-34px}
.navbar-brand img{

    width: 10%;

    max-width: 10%;

}



.nav-head {

    border-bottom: 9px solid black;

}



.heading {

    /* position: relative;

    left: 184px; */

    text-align: right;

    margin-right: 0;

}



.large-heading {

    color:#1ea9ff;

    font-weight: 400;

}



/* .container{

    margin: 0px 10px!important;

} */





#range{

    -webkit-transform:rotate(270deg);

     -moz-transform:rotate(270deg);

     -o-transform:rotate(270deg);

     -ms-transform:rotate(270deg);

     transform:rotate(270deg);

     margin: 59px -60px;

}

.top-legend{margin: 15px 0 0 0;width: 200px;

    position: relative;

    z-index: 100;}

.legend-box {

    background-color: #fff;

    border: 1px solid grey;

    padding: 19px 10px;

    float: left;

    max-width: 168px;

}



.legend-box ul li {

    line-height: 22px;

    font-size: 14px;

}



.arrow-btn{

    display: none;

}



.square {

    font-size: 19px;

    margin-right: 5px;

}



.legend-btn {

    transform: rotate( 0deg );

    float: right;

    background: transparent;

    width: 32px;

    height: 99px;

    background-color: #3b3b3b;

    color: white;

    border: 1px solid #3b3b3b;

    border-radius: 0px 4px 4px 0px;

    outline: none;

}



/* .left{

    left:-250px;

}  */



.legend-btn i{

    position: absolute;

    right: 9px;

    top: 6px;

}



.text{

    transform: rotate( 90deg );

    position: absolute;

    right: -14px;

    top: 46px;

    font-weight: 500;

}



.image-sec{

    border-top: 0;

}



.panzoom{text-align: center;}



#layout_tools_wrapper{

    z-index: 300;

    position: absolute;

    background: #353535;

    right: -15px;

    top:15px;

    width: 50px;

}

#layout_tools_wrapper .layout-btn{

    background: #353535;float: right; position: relative;z-index: 300;right: 51px;

}

.layout-tools{

    background-color: #353535;

    height: 100%;

    float: right;

    text-align: center;

}



.zoom ul{

    margin-top: -1rem;

    margin-bottom: 1rem;

}



.zoom ul li{

    margin-bottom: 12px;

}



.layout-tools a{

    font-size: 18px;

    color: white;

}



.layout-tools a:hover{

    text-decoration: none;

    color: white;

}



.layout-tools .slider.slider-vertical{height:130px;}



.mobile_legendbox{

    display: none;

}



text.plot_link{fill :#000 !important}



.plot_link{cursor: pointer;}



.tooltip {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    line-height: 1.42857143;

    text-decoration: none;

    text-shadow: none;

    text-transform: none;

    letter-spacing: normal;

    word-break: normal;

    word-spacing: normal;

    word-wrap: normal;

    white-space: normal;

    max-width: 350px;

    /* ... */

  }



  .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {

    border-right-color: #fff;

}  

.tooltip .tooltip-inner{    max-width: none;

    padding: 4px 25px 4px 10px; border:1px solid #adadad; background:#fff;text-align: left; font-size:16px; color:#000 }

.tooltip .tooltip-inner span{ color:red; }





.isp_modal .modal-content .form-control{font-size: 14px;resize: none;}

.isp_modal .modal-content .form-group{margin-bottom: 2px;padding: 0 5px;width: 100%}

.isp_modal .modal-content .col-form-label{font-size: 15px;

    line-height: 1;}

.isp_modal-body{

    background: #404040;

    height: auto;

}



.isp_modal .modal-content{width: 530px}

.isp_modal .modal-content .modal-footer{background: #191919;font-size: 10px}

.isp_modal .modal-content form{width: 100%}

.isp_modal .modal-content .form-control{font-size: 14px;resize: none;}

.isp_modal .modal-content .form-group{margin-bottom: 2px;padding: 0 2rem;}

.isp_modal .modal-content .col-form-label{font-size: 1rem;

    line-height: 1;}

.isp_modal-body{

    background: #404040;

    height: auto;

}



#printModal .modal-content{

    width: 530px;

}



[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after{

    margin-left: 0;

}

#printModal .modal-body{

    background: #3d3d3d;

    height: 420px;

  }

 #modal-print{

    width: 90%;

    background: white;

    margin: 0px auto;

    padding: 5px;

  }

 .modal-header{

    background: #191919;

    text-align: center;

}

 .modal-footer{

 background: #191919;

}

#modal-print .modal-ul{

/* margin: -50px 0px 0px 260px; */

margin:0px 0px 0px 260px;

position: relative;

z-index: 5;

}

#modal-print .modal-ul ul{

    list-style-type: none;

    border: 1px solid;

    padding: 0px 3px;

    font-size: 10px;

    background: white;

  }

  #modal-print .modal-ul ul li div{

width: 12px;

height: 12px;

border: 1px solid;

border-radius: 3px;

margin-right: 3px;

display: inline-block;

}

     header .container .col-md-12{
      display: flex;
     }
     @media (max-width: 660px){
      header .container .col-md-12{
        flex-direction: column;
      }
     }