.title
{
    color:#00b0f0;
    font-size:16px;
    font-weight:bolder;
    font-style:italic;
}


.date_slider
{
    position:fixed;
    top:77%;
    left:20%;
    right:20%;
    z-index:220;
    display:none;
}

.rzslider .rz-bubble {
    color: #03acfe;
}

.rzslider .rz-bubble.rz-limit {
    color: #03acfe;
}

.box {
    width: 200px;
    height: 200px;
    line-height: 200px;
    color: white;
    text-align: center;
    vertical-align: middle;
    background: -webkit-linear-gradient(blue, #ccc); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(blue, #ccc); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(blue, #ccc); /* For Firefox 3.6 to 15 */
    background: linear-gradient(blue, #ccc); /* Standard syntax */
}

.layer_list_animation_class
{
    position: fixed; 
    top:20%;
    left:40%;
    z-index:220;
}

.chart {
    height: 200px;
}

.spacer {
    height: 200px;
}

.cyclone_info_class
{
    position: fixed; 
    top: 20%; 
    left: 38%; 
    width: 600px;
    max-height:600px; 
    /*z-index: 500;*/
    display: block;
    /*    overflow-x: auto;
        overflow-y: auto;*/
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    background: rgba(40,40,40,.65);
    color:white;
}

.only_cyclone_info_class
{
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    max-height:600px; 
}

.satellite_listing
{
    position: fixed; 
    top: 48px; 
    left: 400px; 
    width: 450px;
    max-height:500px; 
    z-index: 220;
    display: block;
    /*    overflow-x: auto;
        overflow-y: auto;*/
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    background: rgba(40,40,40,.65);
    color:white;
}

.site_info_class
{
    position: fixed; 
    top: 48px; 
    left: 400px; 
    width: 500px;
    max-height:500px; 
    /*z-index: 500;*/
    display: block;
    /*    overflow-x: auto;
        overflow-y: auto;*/
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    background: rgba(40,40,40,.65);
    color:white;
}

.only_site_info_class
{
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    max-height:400px; 


}


.datebased_time_listing
{
    position:fixed;
    top: 200px; 
    left: 600px; 
    width: 180px; 
    color:black;
    margin:2px 0 2px 5px; 
    z-index:700;
    display:none;
    /*  max-height:500px; */ 
    /*z-index: 500;*/
    background: white; 
    /* background: rgba(40,40,40,0); */
}



.only_satellite_listing
{
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    max-height:400px; 

}



md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) {
    color: #fff !important;
}

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon {
    color: #00B0F0 !important;
}



.show_calendar{
    background-color: white; 
    position: fixed; 
    bottom: 10%; 
    left: 30%; 
    width: 300px; 
    /*height: 45%;*/ 
    /*z-index: 500;*/
    display:none;
    overflow: auto;
    overflow-y: auto;

}




.layer_list_timeseries_hide{
    background-color: white; 
    position: fixed; 
    bottom: 20%; 
    left: 30%; 
    width: 200px; 
    /*height: 45%;*/ 
    /*z-index: 500;*/
    display: hidden;
    overflow: hidden;
    overflow-y: auto;

}


.layer_list_timeseries_show{
    background-color: black; 
    position: fixed; 
    bottom: 20%; 
    left: 30%; 
    width: 200px; 
    /*height: 45%;*/ 
    /*z-index: 500;*/
    display: block;
    overflow: hidden;
    overflow-y: auto;

}

.fadein{
    background-color: black; 
    color:white;
    border: 1px solid grey; 
    border-radius:20px; 
    position: fixed; 
    bottom: 20%; 
    left: 30%; 
    width: 40%; 
    height: 45%; 
    z-index: 500;
    display: block;
    padding:30px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-transition:opacity 1s;
    transition: opacity 1s;
    opacity:0.8;
}
.fadeout{
    background-color: black; 
    color:white;
    border: 1px solid grey; 
    border-radius:20px; 
    position: fixed; 
    bottom: 20%; 
    left: 30%; 
    width: 40%; 
    height: 45%; 
    z-index: 500;
    display: block;
    padding:30px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-transition:opacity 1s;
    transition: opacity 1s;
    opacity:0;
}

#rssfeed_close
{
    cursor:pointer; 
    width:2%; 
    position:absolute; 
    right: 6%;
    color:gainsboro; 
    font-size: 30px;
}

#copyright
{
    height:auto;
    width:auto;
    position:fixed;
    left:10px;
    bottom:10px;
    z-index:110;
}

#copyright a{
    color: white; 
    font-weight:bold; 
    font-size: 18px;
    cursor: pointer;
}

#icon_panel_content
{
    position: fixed;
    padding-top : 28px;
    height:68%;
    width:120px;
    bottom:19%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*    padding: 0;*/
    overflow-x:hidden;
    overflow-y:hidden;
}

#icon_panel_content:hover
{
    overflow-y:auto;
}

.iconpanel
{
    position: absolute;
    z-index: 200;
    height:auto;
    width:110px;
    text-align: center;
    bottom:10%;
    right:20px;
    margin: -100px 0 0 -150px;
    /* background: rgba(40,40,40,.85);*/
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.iconpanelcontent
{

    position: relative;
    z-index: 2;
    height: auto;
    width:110px;
    float: left;
    text-align: center;
    float:left;
    /*background: rgba(40,40,40,.85);*/
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}


.class1{
    right: 20px;

}

.class2{
    right: -140px;
}


.class1-add, .class1-remove {
    transition: all ease-in-out 1s;
}


.class2-add, .class2-remove  {
    transition: all ease-in-out 1s;
}

.canvas{border:1px solid red;
        width:0px;
        height:0px;
}

.fill-space
{
    flex:1 1 auto; 
}

.dropdown-menu {
    position: relative; 
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.ol-zoomslider {
    position: absolute;
    top: 4.5em;
    left: .5em;
    background: #eee;
    background: rgba(242,242,255,.4);
    width: 24px;
    height: 200px;
}
.ol-zoom {
    /* top: 0em; */
    top:1%;
    right: 0em;
    /*  display:none; */
}
.ol-full-screen {
    /* right: 2em; */
/*     right: 4%; */
	
/* 	right: 1%; */
/*     top:1%; */
    
/*     right: 34px; */

	right: 5px;

    top:0.5em;
    
    /*top: 0em;*/
}
.ol-rotate {
    /*  top: 4em; */
    /* right: 4em; */
    right: 35px;
    top:0.5em;
    /* top: 0em;*/
}
.color_style
{
    background-color:#000000;
}
.ol-mouse-position {
    top: 1%;
    /* right: 80px; */
/*     right: 12%; */
	right: 5%;
    position: absolute;
    font-weight:800;
}   


.sidemenu {  
    /*border: 1px solid #333;*/
    /*  border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    */  
    position: absolute;
    z-index: 210;
    /* width: 286px; */
    width: 362px;
    left: 20px;
    /*  background: rgba(40,40,40,.85); */
    top: 50px;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;

}

.titlemenu {  
    /*border: 1px solid #333;*/
    /*  border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    */  
    position: absolute;
    z-index: 210;
    /* width: 286px; */
    width: 460px;
/*     left: 20px; */
	left: 40px;
    /*  background: rgba(40,40,40,.85); */
    top: 20px;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;

}


.on_off{
    background: rgba(40,40,40,.65);
}

whole_content
{
    background: rgba(40,40,40,.65);
}

/*
.toast_message
{
    left:70%;
    top:20px;
    color:whitesmoke;
    fomt-size:20px;
    z-index:210;
    position:absolute;
     background: rgba(40,40,40,.65);
}
*/

md-dialog.md-transition-in {
    opacity: 1;
    transition: all .00001s cubic-bezier(.25,.8,.25,1);
    -webkit-transform: translate(0,0) scale(1);
    transform: translate(0,0) scale(1);
}

md-checkbox {
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 0px; 
    white-space: nowrap;
    cursor: pointer;
    outline: 0;
    -webkit-user-select: none;
    min-height:55px;
}


md-checkbox .md-container {
    position: absolute;
    top: 30%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 10px;
    height: 10px;
    left: 0;
    right: auto;
}

md-checkbox .md-label {
    box-sizing: border-box;
    position: absolute;
    top:30%;
    display: inline-block;
    /* vertical-align: middle; */
    white-space: normal;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    margin-left: 30px;
    margin-right: 0;
}

md-content.md-default-theme, md-content {
    color: rgba(0,0,255,0.85);
    /* background-color: rgb(128,128,128); */ 
    background: rgba(40,40,40,.6);

    /* background-color: rgb(211,211,211); */
}

md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
    /*background-color: rgb(63,81,181);*/
    /*background-color: rgb(119,136,153);*/

    /*color: rgba(255,255,255,0.87); */
    background-color:rgba(40,40,40,.6);
    height: 30px;
}

.md-toolbar-tools {
    /* background-color: rgb(119,136,153); */
    font-size: 20px;
    letter-spacing: .005em;
    box-sizing: border-box;
    font-weight: 400;
    display: -webkit-flex;
    disply: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 50px;
    /* max-height: 64px; */
    /* padding: 0 16px; */
    /* margin: 0; */
}




.toolbar {
    position: absolute;
    z-index: 30;
    left: 20px;
    top: 80px;
    /*min-width: 500px; */
    min-height:500px;

}

.md-toolbar-tools {
    /*background-color: rgb(119,136,153);   */
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

md-toolbar {

    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    position: relative;
    z-index: 2;
    font-size: 20px;
    min-height: 50px;
    width: 100%;

}

.md-button.md-layer
{
    /* background-color: #d54e21 */ /*#b9df63; aed9e5; d0d4ff; 00adff; */
    background-color: #00adff;
}



.layout-row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    font: 100 13px/13px "Lucida Sans",Arial,Sans-Serif;
    color:white;
    min-width:0px;

}


.rotateimg90 {
    -webkit-transform:rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    float:left;
    /* margin-left:200px;*/
    transform-origin:left top;
    white-space: nowrap;
    height:100px;
    /*left:20px;*/
    /* display:block;*/
    /*left:0px;*/
}


.layout-padding, .layout-padding-gt-sm, .layout-padding-gt-sm>*, .layout-padding-md, .layout-padding-md>*, .layout-padding>*, .layout-padding>.flex, .layout-padding>.flex-gt-sm, .layout-padding>.flex-md {
    padding: 2px;
}  
#scale-line-container {
    border-radius: 2px;
    background: white none repeat scroll 0 0;
    bottom: 8px;
    left: 8px;
    font-size: 10px;
    position: absolute;
    z-index: 1000;
    padding: 5px;
    text-align: center;
}

.scale-line-top-inner {
    border-style: none solid solid solid;
    border-width: medium 2px 2px 2px;
}

.scale-line-bottom-inner {
    border-style: solid solid none;
    border-width: 2px 2px medium;
    margin-top: -2px;
}



.tooltip-measure-all {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;

}
.tooltip-measure-one {
    opacity: 1;
    font-weight: bold;

}
.tooltip-static-one {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
    display:none
}
.tooltip-measure-one:before,
.tooltip-static-one:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static-one:before {
    border-top-color: #ffcc33;
} 

.layer-display{
    color:white;
    font-size:15px;
    background-color:#4e4E5E;
    padding-top: 2px;
    padding-bottom: 2px;
}



.input-group-addon, .input-group-btn {   
    width: 1%;                                              /*Calendar*/
    white-space: nowrap;
    vertical-align: top;
}


.md-button.md-fab {
    z-index: 20;
    line-height: 36px; 
    min-width: 0;
    width: 36px;
    height: 36px;
    vertical-align: middle;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
    transition: all .3s cubic-bezier(.55,0,.55,.2);
    transition-property: background-color,box-shadow,-webkit-transform;
    transition-property: background-color,box-shadow,transform;
}


.md-button.md-button-font-black {
    color: #9B9B9B;
}




.tooltip{position:absolute;z-index:1070;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;filter:alpha(opacity=0);opacity:0;line-break:auto}.tooltip.in{filter:alpha(opacity=90);opacity:.9}.tooltip.top{padding:5px 0;margin-top:-3px}.tooltip.right{padding:0 5px;margin-left:3px}.tooltip.bottom{padding:5px 0;margin-top:3px}.tooltip.left{padding:0 5px;margin-left:-3px}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:4px}.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#000}


/*a.md-button.md-default-theme.md-fab, a.md-button.md-fab, .md-button.md-default-theme.md-fab,  */
.md-button.md-fab {
    /*background-color: rgb(0,64,129); */
    background-color: #00adff;
/*     top: 3.5em; */
    top: -3.5em;
    /* left: 0px; */
    right: 51px;
}


.ol-timeseries {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 50px;
    left: 50px;
    width:500px;
    /*height:200px;*/
}

.ol-timeseries-new {
    position: relative;
    z-index: 4;
    background: rgba(40,40,40,.65);
    padding: 15px;
    border-radius:0px;
    border: 0px solid #cccccc;
    /*bottom: 0px;
    left: 0px;
    */
    width:95% !important;

    height:80% !important;
}


.ol-popup {
    background:rgba(40,40,40,.65);
    color:white;
    position: absolute;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    width:250px;
}

.ol-popup-marker {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    width:250px;
}

.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;

}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content: "X";
}
.ol-timeseries-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-timeseries-closer:after {
    content: "X";
}

.animation_info_class
{
    position: absolute;
    z-index: 30;
    left: 45%;
    top: 10px;
    /*min-width: 500px; */
    min-height:500px; 
    color:#00B0F0;
}
.animation_custom_class
{
    position: absolute;
    z-index: 30;
    left: 45%;
    top: 80px;
    /*min-width: 500px; */
    min-height:500px; 
}


.wait_info_class
{
    position: absolute;
    z-index: 30;
    width:100%;
    height:100%;
    background-color:#000000;
    text-align:center;
    vertical-align:middle;

    /*left: 45%;
    top: 50%;
    min-width: 500px; 
    min-height:500px; */
}

.wait_info_class img
{
    margin-top:150px;
}

._md-select-menu-container._md-active {
    display: block;
    opacity: 1;
}


.dropdown_select.md-content.md-default-theme, md-content {
    color: rgba(0, 0, 0, 0.87);
}

.dropdown_select.md-select-menu.md-default-theme md-content, md-select-menu md-content {
    background: rgb(250,255,255);
}

.noBorder
{
    border:none !important;    
}




#range_table th,td{
    padding-left:1px;
    text-align:left;
}

#range_table_one {

    border-collapse:collapse;
    border-spacing:0px;  
    padding-top:5px;
    padding-bottom:5px;
    float:left;
    color:white;
    width:350px;



}
#range_table_one,label{
    margin-top:0px;
    margin-bottom:0px;
    font-weight:lighter;
    font-size:12px;
}
.range_table_button,md-button{

    margin:0px;
    min-width:60px;
    line-height:24px;
    min-height:24px;
    font-size:12px;
   /* background-color:#54524D;  */
    background-color:#08AAFB;
    margin-right:2px;
}

.search_class
{
    position: fixed; 
    top: 48px; 
    left: 400px; 
    width: 350px;
    max-height:500px; 
    z-index: 220;
    display: none;
    /*    overflow-x: auto;
        overflow-y: auto;*/
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(40,40,40,.65);
    color:white;  
}
div.search_class th,
div.search_class td{
    padding:0px;
    margin:0px;
    text-align:left;
    color:white;

}

.sec_table{
    background :rgba(40,40,40,.65);
    color:white; 
}
.sec_table th,td{
    /* padding:7px; */
    text-align:center;

}

.scrollable
{
    width:100%;
    height:60px;
    margin:0;
    padding:0;
    overflow-y:scroll;
    /* background:blue; */
    background :rgba(40,40,40,.85); 
    color:white; 
    /*overflow:auto;*/
}

div.range_table_one_id th,
div.range_table_one_id td{
    padding:0px;
    margin:0px;
    text-align:left;
    color:white;

}



.toppanel
{

    position: absolute;
    z-index: 200;
    height:auto;
    text-align: center;
    bottom:0%;
    /* left:150px; */
    right:150px;
    width:80%;
    margin: -100px 0 0 -150px;
    /* background: rgba(40,40,40,0); */
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}


.toppanel_timeseries_class
{

    position: absolute;
    z-index: 5;
  /*  height:235px; */
    text-align: center;
    bottom:80px;
    /* left:150px; */
    right:150px;
   /* width:600px; */
    /* margin: -100px 0 0 -150px; */
    /* background: rgba(40,40,40,0); */
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin:10px;
    width:500px;
    height:360px;
}


.toppanelcontent
{

    position: relative;
    z-index: 2;
    height:auto;
    text-align: center;
    float:left;
    /* background: rgba(40,40,40,.85); */
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}


.clickedicon{
    border:5px solid red; 
    border-radius:60px;
}

.unclickedicon
{
    border:none;
}

.animate-hide
{
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 4s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 4s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 4s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 4s;
    line-height:20px;
    opacity:1;
    padding:10px;
    border:1px solid black;
    background:white;
    position: absolute;
    left: 0;
}

.animate-hide .ng-hide{
    left: -100%;
    opacity:0;
    padding:0 10px;

}

#top_panel_button
{
    color:white;
}

.ol-attribution.ol-logo-only {
    background: 0 0;
    bottom: 0em;
    height: 0em;
    line-height: 0em;
}

#scale-line-container {
    border-radius: 0px;
    background: none repeat scroll 0 0;
}

.clicked_button
{
    color:rgba(1,172,254,1); 
    border:5px solid red;
    border-radius : 15px;
}

.unclicked_button
{
    color:white;
}


.tooltip-one {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.7;
    white-space: nowrap;
}
.tooltip-measure {
    opacity: 1;
    font-weight: bold;
}
.tooltip-static-polygon {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static-polygon:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static-polygon:before {
    border-top-color: #ffcc33;
} 

.tooltip-static-line {
    background-color: #ffcc33;
    color: black;
    border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static-line:before {
    border-top: 6px solid rgba(0, 0, 0, 0.5);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -7px;
    left: 50%;
}
.tooltip-static-line:before {
    border-top-color: #ffcc33;
} 

.measuretooltip-static {
    display: none;
}

.overlay_selection,md-checkbox
{
    min-height:30px; 
}



#canvas-layout
{
    width:700px;
    position:relative;
}
.canvas-layout-class
{
    width:200px;
    position:absolute;
}

.range_selection
{ 
    margin:2px 0 2px 5px; 
    /* margin-left:5px; */
}

.calendar_class
{
    position: absolute;
    z-index: 200;
    width: 600px;
    left: 400px;
    top: 200px;
    display:none;

}



.range_select,md-select
{
    margin:2px 0 2px 5px; 
    /*margin-left:5px;*/
}
.range_select,md-select
{
    /* margin:2px 0 2px 5px; */
    font-size:12px;
    /*margin-left:5px;*/
}


.panel-button-class,md-button
{
    min-width:20px;
    margin: 6px 8px;
}


md-option {
    height:26px;   
}
md-option .md-text
{
    font-size:12px;  
}


#map{
    width:100%;
    height:100%;
    position:relative;
}
div.fill{
    width:100%;
    height:100%;
}
#windyMap{
    background-color:transparent;
    position:absolute;
    z-index:8;
    pointer-events:none;
}
/* .ol-control{ */
/*     z-index:2; */
/* } */

.ol-control {
    position: absolute;
    background-color: transparent;
    border-radius: 4px;
    padding: 2px;
    z-index:2;
}
.wind-control {
    top: 150px;
    right: 1.4em;
    z-index:10;
}
.ol-unselectable{background: none;}
.ol-unselectable:hover{background: none;}
.ol-touch .wind-control {
    top: 150px;
}
.toast_message{
    /*background-color: black; */ 
    color:white;
    /*border: 1px solid grey; 
    border-radius:20px;
    */
    position: fixed; 
    font-size:30px;
    right: -400px; 
    top:74%;
    /*width: 40%; 
    height: 45%; 
    */
    z-index: 500;
    display: block;
    padding:2px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-transition:opacity 1s;
    /* transition: opacity 1s;
    */
    transition:1s;
    opacity:0.8;

}



.drag_drop_layer_class {
    right: 4em;
    top: 3em;
    width:20px;
    position: fixed; 
    z-index: 500;
}


.dygraph-legend {
	background-color: rgba(200, 200, 255, 0.75) !important;
	padding: 4px;
	border: 1px solid #000;
	border-radius: 10px;
	box-shadow: 4px 4px 4px #888;
	pointer-events: none;
	/* width: 150px; Change at 22JUL2019 */
	width:250px;
	font-size: 11px; /*Change at 22JUL2019 */
}


#div_g {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 40px;
	bottom: 10px;
}

.dygraph-axis-label {
/* position: absolute; */
color: white;
}

.ol-control button {
    display: block;
    margin: 1px;
    padding: 0;
    color: #fff;
    font-size: 1.54em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    height: 1.375em;
    width: 1.375em;
    line-height: .4em;
    background-color: rgba(0,60,136,.5);
    border: none;
    border-radius: 2px;
}

.layer-switcher button {
    float: right;
    /*     width: 38px; */
    /*     height: 38px; */
    width: 38px;
    height: 38px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==') /*logo.png*/;
    background-repeat: no-repeat;
    background-position: 2px;
    background-color: transparent;
    border: none;
}

img.rotate270{
	/*width:100px;*/ 
 	/*height:900px;*/ 
/* 	background-color: burlywood; */
/* 	background-color: black; */

	background-color: transparent;

	/*-ms-transform:rotate(270deg);*/
	-webkit-transform:rotate(270deg);
/* 	margin-right: 70px; */

/* 	margin-right: 10vw; */
/* 	margin-left: 10vw; */

/* 	margin-right: 12vw; */
/* 	margin-left: 13vw; */
	
	margin-right: 7vh;
	margin-left: 7vh;
	
	
/* 	transform:rotate(270deg); */
}

/* .ol-attribution img { */
/* 	text-align: right;  */
/*     bottom: .5em; */
/*     right: .5em; */
/*     max-width: calc(100% - 1.3em); */
/*     max-height: 20em; */
/*     max-width: inherit; */
/*     vertical-align: middle; */
/* } */

/* .ol-attribution.ol-unselectable.ol-control{text-align:right;bottom:0.5em;right:.5em;max-width:calc(100% - 1.3em);} */

/* .ol-attribution.ol-unselectable.ol-control{text-align:right;bottom:0.5vw;right:0.5vw;max-width:calc(100vw - 27vw);} */

.ol-attribution.ol-unselectable.ol-control{text-align:right;bottom:0.5vw;right:0.5vw;max-width:calc(100vw - 0vw);}

.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}

.ol-attribution li{display:inline;list-style:none;line-height:inherit}

.ol-attribution li:not(:last-child):after{content:" "}

/* .ol-attribution img{max-height:30em;max-width:30em;vertical-align:bottom } */
/* max-width:7vh; */
/* .ol-attribution img{max-height:30vw;max-width:10vh;vertical-align:middle;margin-top:-4.5vh;margin-bottom:-4.5vh; } */

/* .ol-attribution img{max-height:42vw;max-width:10vh;vertical-align:middle;margin-top:-5vh;margin-bottom:-5vh; } */

.ol-attribution img{max-height:24vh;max-width:10vh;vertical-align:middle;margin-top:-6vh;margin-bottom:-6vh; }

.ol-attribution button,.ol-attribution ul{display:inline-block; vertical-align: bottom;}

.ol-attribution.ol-collapsed ul{display:none}

.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}

.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}

.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}

.ol-attribution.ol-uncollapsible button{display:none}

.ol-attribution:not(.ol-collapsed) {
/*     background: burlywood; */
	background: black;
}

/* .ol-attribution { */
/*     text-align: right; */
/*     bottom: .5em; */
/*     right: .5em; */
/*     max-width: calc(100% - 1.3em); */
/*     height: 150px; */
/*     width: 80px; */
/* } */

.ol-zoom {
    /* top: 0em; */
/*     top: 8vh; */
/* 	top: 5.0em; */
/*     right: auto; */
	
/* 	top: 3.5em; */
/*     right: 1%; */

/* 	top: 0.5em; */
	top: 3.5em;
    right: 5px;
    
    left: auto;
    /* display: none; */
}

.titlemenu {
    /* border: 1px solid #333; */
    position: absolute;
    z-index: 210;
    /* width: 286px; */
/*     width: 60vw; */
/* 	width:81vw; */
	
/* 	width:87vw; */

	width:81vw;
	
/*     left: 10px; */

	left: 5px;

    /* left: 3vw; */
    /* background: rgba(40,40,40,.85); */
    top: 1vh;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.ol-mouse-position {
/*     top: 1%; */

	top: 0.5%;

    /* right: 80px; */
    /* right: 12%; */
/*     right: 6%; */
	
	
/* 	right: 4.5em; */

/* 	right: 67.5px; */

/* 	right: 63.5px; */
	right: 40px;
	
    position: absolute;
    font-weight: 800;
    
    background-color: grey;
    opacity: 0.7;
}

.ol-attribution:not(.ol-collapsed) {
    /* background: burlywood; */
    
/*     background: black; */
	background: transparent;
    
/*     opacity: 0.7; */
	opacity: 1;
}

#range_table_one, label {
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: lighter;
    font-size: 12px;
    color: white;
}

.layer-switcher .panel {
    padding: 0 1em 0 0;
    margin: 0;
    border: 4px solid #333;
    border-radius: 4px;
    background-color: black;
    display: none;
    max-height: 100%;
    overflow-y: auto;
    opacity: 0.7;
}

span.date_time{
    position:relative;
    background-color:black;
    opacity:0.7;
    color:white;
/*     font-size: 1em; */
    top: 1vh;
    /*        font-size:1vh;*/
/*     font-size: 2vh; */
/*     font-size: 1em; */
    font-weight:bold;
    /*	position:relative;*/
    /*	top:2vh;*/
    /*	left:-7.5vw;*/
}

span.application_name{
    position:relative;
    background-color:black;
    opacity:1;
/*     color:white; */
/*     font-size: 1em; */
    
/*     top: 1vh; */
    
    /*        font-size:1vh;*/
/*     font-size: 2vh; */
/*     font-size: 1em; */
    font-weight:bold;
    /*	position:relative;*/
    /*	top:2vh;*/
    /*	left:-7.5vw;*/
}


.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}



@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-calendar:before {
    content: "\e109";
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.date_pick{
/* 	top: 9.5em; */
	
/* 	top: 5.5em; */
	
	top: 9.5em;
	
	
/* 	right: auto; */
/* 	right: 1%; */

/* 	left: 10px; */

	left: 5px;

/* 	width: 100vw; */
/*     height: 100vh; */

/* 	z-index: 210; */

	z-index: 1;

	background: none;
	position: absolute;
	border-radius: 4px;
	padding: 2px;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.hide_show_slider {
    display: block;
    margin: 1px;
    padding: 0;
    color: #fff;
    font-size: 1.54em;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    
/*     height: 1.375em; */
/*     width: 1.375em; */
    
    height: 2.375em;
    width: 1.575em;
    
    line-height: .4em;
    background-color: rgba(0,60,136,.5);
    border: none;
    border-radius: 2px;
}

.range-slider_button {
    /* margin-top: 30vh; */
    position: absolute;
    /* margin-top: 80vh; */
    margin-left: 1px;
    /* bottom: 10vh; */
    
/*     bottom: 14vh; */

	bottom: 15vh;
    
    z-index: 310;
}