/*#app-header {
    color: white;
    /*font-size: 22px;
    font-weight: 200;*/
    /*padding: 8px 15px;
    text-shadow: 0 1px 0 #fff;
    /*background-image:  url(images/DarkBlue.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}*/
#app-msg {
    background: #D1DDEF;
    border: 1px solid #ACC3E4;
    padding: 3px 15px;
    font-weight: bold;
    font-size: 13px;
    position: absolute;
    right: 0;
    top: 0;
}
#map-panel{
 float:left;
 position:absolute;
}
.x-panel-ghost {
    z-index: 1;
}
.x-border-layout-ct {
    background: #DFE8F6;
}
.x-portal-body {
    padding: 0 0 0 8px;
}
.x-portal .x-portal-column {
    /* columns must have vertical padding to avoid losing dimensions when empty */
    padding: 8px 8px 0 0;
}
.x-portal .x-panel-dd-spacer {
    border: 2px dashed #99bbe8;
    background: #f6f6f6;
    border-radius: 4px;
    -moz-border-radius: 4px;
    margin-bottom: 10px;
}
.x-portlet {
    margin-bottom:10px;
    padding: 1px;
}
.x-portlet .x-panel-body {
    background: #fff;
}
.portlet-content {
    padding: 10px;
    font-size: 11px;
}

#app-options .portlet-content {
    padding: 5px;
    font-size: 12px;
}
.settings {
    background-image:url(images/folder_wrench.png);
}

.info {
    background-image:url(images/information.png);
}
.save {
 
    background-size: contain;
}
.add {

    background-size: contain;
}

.icons, .submit, .search, .list1, .graph2, .icon-ok, .cancel .clearable{
    background-size: 600% 110%;
    background-image: url(icons.png);
    
    margin: 0;
    padding: 0;
   
   
}
.cancel {
  
    background-position: -65 -1 !important;
}
.submit {
    background-position: 1 -2 !important;
    
}
.search {    
     background-position: -51 -1 !important;
}
.list1 {
    
     background-position: -35 -1 !important;
}


.graph2 {
    
     background-position: -20 -1 !important;
}
.icon-ok {
   
    background-position: -125px -1 !important;
    top: 3px !important;
    left: 5px !important;
    width: 25px !important;

}
 .ovron-row .x-grid-cell { 
    background-color: #ffe2e2; 
    color: #900; 
} 
 .nav-left {
    border-radius: 4px 0px;
    border-width: 0px;
 }
  .nav-right {
    border-width: 0px;
    border-radius: 0px 4px;
 }
   .login-top {
    top: 10px;
    margin-right : 10px;
 }
    .log-nav{

    margin-right : 10px;
 }
  
.ovroff-row .x-grid-cell { 
 
    color: black; 
}
.active {
    font-weight: bold;
}
.navbar-title {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    color:white;
}
.navbar-project-name{
    margin-left: 80px;
    margin-top: 5px;
}
.error-field {
    border-color: rgba(255, 0, 0, 0.21);
    color: red;
    background-color: rgba(255, 0, 0, 0.08);
    background-image: none;
}
#btnLogmein {


margin-right : 30px;
}


#btnLogmeout {

margin-right : 30px;

}
.nav > li > a { 

font-weight:bold;
cursor: pointer; }
.announcements_tpl {
    font:normal 12px tahoma, arial, helvetica, sans-serif;
    padding:3px 10px 3px 10px;
    border:1px solid #fff;
    border-bottom:1px solid #eeeeee;
    white-space:normal;
    color:#555;
}
.announcements_tpl h3 {
    display:block;
    font:inherit;
    font-weight:bold;
    color:#222;
}

.announcements_tpl h3 span {
    float: right;
    font-weight:normal;
    margin:0 0 5px 5px;
    width:100px;
    display:block;
    clear:none;
}
#logolist {
    position: relative;
   
}

#logolist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: -2px;
}

#logolist li, #logolist a {
    height: 32px;
    display: block;

}
.logo-image {
    background-size: 100% 300%;
    background-image:url('logos.png');
    width: 35px;
}

#dost {
    left: 0px;
    background-position: 0 32px;
}

#pagasa {
    left: 40px;
        background-position: 0 64px;
   
}

#asti {
    left: 80px;
    background-position: 0 0;
  
}
.custom-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Sit on top */
    padding-top: 5%;
    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 */
.custom-modal-content {
    border-radius: 10px;
    background-color: #fefefe;
    border: 1px solid #888;
    width: 30%;
    position: absolute;
    margin: 0 auto;
    /*display: table;*/
    position: absolute;
    left: 0;
    right: 0;
    top: 25%;
}
.custom-modal-content-title {
    padding: 3px 5px 0 5px;
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
    border-bottom: 1px solid #DAD1D1;
    background-color: #cbddf3;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#dae7f6),color-stop(45%,#cddef3),color-stop(46%,#abc7ec),color-stop(50%,#abc7ec),color-stop(51%,#b8cfee),color-stop(100%,#cbddf3));
  
}
.custom-modal-content-body{
    padding: 20px;
}

/* The Close Button */
.custom-close {
    color: #aaaaaa;
    font-size: 18px;
}

.custom-close:hover,
.custom-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.li-first{
    color: #04408c;
    font-size: 12px;
    font-weight: bold;
    font-family: tahoma,arial,verdana,sans-serif;
    line-height: 15px;
    padding: 0 2px 1px;
    text-transform: none;
    float: left;

}
.li-last{
float: right;
}
.custom-loading{
    /* height: 100;
    background-size: 20%;
    height: 100px;
    background-size: 15%; */
    background-image: url(loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.custom-loading:before {
  /* content: "\e032";*/
}
.tbl-window{
    background-color: white !important;
    font-size: 14px !important;
}
.station-info tr>td{
    font-size:11px ;
    padding: 2px 2px;
  /*   background-color: white !important;
    
    color: #0C0C0C;
    text-shadow: 1px 1px rgba(242, 243, 247, 0.75);
      
      border:1px solid grey;*/
}

.location{
        text-align: center;
   color: #0C0C0C;
    text-shadow: 1px 1px rgba(242, 243, 247, 0.75);
  /*border: 1px solid rgba(128, 128, 128, 0.09);*/
   /*background: linear-gradient(to bottom right, rgba(4, 125, 171, 0.39), rgb(7, 96, 206)) !important;*/
  font-weight: bold;
}
.station-lat{
      font-size:10px ;
     padding-right:5px !important;
        text-align: center;
  /*  color: #0C0C0C;
    text-shadow: 1px 1px rgba(242, 243, 247, 0.75);
  border: 1px solid rgba(128, 128, 128, 0.09);
    background: linear-gradient(to bottom right, rgba(4, 125, 171, 0.39), rgb(7, 96, 206)) !important;
  */
}
.station-long{
    font-size:10px ;
    padding-left:5px !important;
        text-align: center;
  /*  color: #0C0C0C;
    text-shadow: 1px 1px rgba(242, 243, 247, 0.75);
  border: 1px solid rgba(128, 128, 128, 0.09);
    background: linear-gradient(to bottom right, rgba(4, 125, 171, 0.39), rgb(7, 96, 206)) !important;
  */
}
.extmvc-popup{
 height: 250;
 width:390;

/* margin:5px !important;*/
padding:3px 5px 5px 3px;
}


    
 .label {
 z-index: 1!important;
}
.highcharts-tooltip{
    background-color:white !important;
opacity:1 !important;
}
.highcharts-tooltip span {
    
    background-color:white;
    padding: 0px  !important;
    margin:0px !important;
    /*border:1px solid green;*/
    opacity:1 !important;
    z-index:9999!important;
}
.warning-station{
    font-size: 13px !important;
}
.warning-title{
    text-align: center;
    background: linear-gradient(to bottom right, rgba(4, 125, 171, 0.39), rgb(7, 96, 206)) !important;
    color: #F7F4F4;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
}
span .warning-datetime{
    font-style: italic;
    font-size: 11px;
    text-align: right;
}
.type-head {
      width: 100%;
    /* margin: 5; */
    z-index: 9;
    position: absolute;
    /* display: block; */
    /* top: 45px; */
    /* height: 50px; */
    background: #00000047;
    
}
.th-right{
    float:right;
    right: 20px;
}
.th-left{
    float:left;
    left: 20px;
}
.form-group {
    margin: 10px;
   

}
.search-form-input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.clearable{

    background-color: white !important;
    background: url(images/delete.png) no-repeat right -10px center;
    border: 1px solid #999;
    padding: 3px 18px 3px 4px;
    border-radius: 5px;
    transition: background 0.4s;

}
.clearable.x{
  background-position: right 5px center;
}
.clearable.onX{
  cursor:pointer;
}
#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}
.suggestion{
    font-size: 10px;
    font-style: italic;
    font-family: tahoma,arial,verdana,sans-serif;
    font-weight: bold;
    color: #000000c2;
}
.zoom-button {
    width: 30px !important;
    /* display: initial !important; */
    font-weight: bold !important;
    font-size: 10px !important;
    padding: 0 !important;
    background: #fffffff7;
    opacity: 0.77;
    /* text-shadow: 1px 1px 1px #06060663; */
    background: #fffffff7;
    text-shadow: 1px 1px 1px #ecf2fb;
    /* background-color: #f9f9f9; */
    border: 1px solid #f0f1f3 !important;
    /* text-shadow: 1px 1px 1px #0a0a0a00; */
    /* background-color: #f9f9f9; */
}
.zoom-button:hover {
    /*color:  #fffffff7;
    background:  #fffffff7;*/
    /* text-shadow: 1px 1px 1px #0a0a0a00; */
    /* background-color: #f9f9f9; */
}
.stat-yellow{
    color: #131111;
    font-weight: bold;
    text-shadow: 4x 4x white;
    text-shadow: 0px 0px 2px white !important;
    background: linear-gradient(to bottom right, rgb(243, 240, 161), rgb(246, 247, 25)) !important;
}
.stat-orange{
    color: #131111;
    font-weight: bold;
    text-shadow: 4x 4x white;
    text-shadow: 0px 0px 2px white !important;
    background: linear-gradient(to bottom right, rgba(236, 190, 133, 0.39), rgb(218, 153, 12)) !important;
}
.stat-red {
    color: #131111;
    font-weight: bold;
    text-shadow: 4x 4x white;
    text-shadow: 0px 0px 2px white !important;
    background: linear-gradient(to bottom right, rgba(230, 127, 151, 0.39), rgb(234, 11, 36)) !important;
}

.stat-green{
      color: #131111;
    font-weight: bold;
    text-shadow: 4x 4x white;
    text-shadow: 0px 0px 2px white !important;
    background: linear-gradient(to bottom right, rgba(148, 230, 154, 0.39), rgb(55, 228, 58)) !important;
}
#zoom-out {
    float: right;
}
#zoom-in{
    float: left;
}
.zoom-nav{
    /*background: #0e0d0d5c;*/
    width: 200px;
    border-radius: 4px 4px;
}
.slidecontainer {
    width: 100%;
}

.slider {
    direction: rtl;
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    /* border-radius: 5px; */
    background: #ffffff9c;
    outline: none;
    opacity: 0.4;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover, .zoom-button:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 10%;
    background:  #fffffff7;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 10%;
    background:  #fffffff7;
    cursor: pointer;
}
.zoom-div-slider{
    top: 12;
    height: 10px;
}
.zoom-div-slider, .zoom-div{
    width: 140px;
    flex: 1000;
    display: initial;
    position: absolute;

}
.zoom-div {

    top: 12;
    height: 30px;
    background: #0e0d0d54;
    box-shadow: 0px 0px 2px 2px #afadad4f;
}
.float-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 80;
    width: 300px;
    /* height: 400px; */
    background-image: none;
    /* background: #00000014; */
    z-index : 1;
}
.wrap-text > .x-grid-cell-inner{
    white-space: normal;
}
@media only screen and (max-width: 550px) {
    .clearable{
        /*width:120px !important;*/
        background-color: white !important;
        background: url(images/delete.png) no-repeat right -10px center;
        border: 1px solid #999;
        padding: 3px 18px 3px 4px;
        border-radius: 5px;
        transition: background 0.4s

    }
    .th-right {
        /* float: right; */
        /* right: 20px; */
        position: fixed;
        bottom: 20;
        left: 20;
        right: 20;
        /* display: inline-grid; */
    }
    .zoom-nav {
        float: right;
        position: relative;
        /* background: #0e0d0d5c; */
        width: 100%;
        border-radius: 4px 4px;
    }
    .zoom-div {
        top: 2;
        float: left;
        height: 30px;
        background: #00000047;
    /* box-shadow: 0px 0px 2px 2px #afadad4f; */
    }
    .zoom-div-slider, .zoom-div {
        width: 80%;
        /* flex: 1000; */
        display: initial;
        position: relative;
    }
    #zoom-in {
        float: left;
     /* float: right; */
        position: relative;
    }
    #zoom-out {
        float: left;
        position: initial;
    }
    .zoom-button {
        width: 30px !important;
     /* display: initial !important; */
        font-weight: bold !important;
        font-size: 10px !important;
        padding: 0 !important;
        background: #fffffff7;
        opacity: 1;
        /* text-shadow: 1px 1px 1px #06060663; */
        background: #fffffff7;
        text-shadow: 1px 1px 1px #ecf2fb;
        /* background-color: #f9f9f9; */
        border: 1px solid #f0f1f3 !important;
        /* text-shadow: 1px 1px 1px #0a0a0a00; */
        /* background-color: #f9f9f9; */
    }

    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .zoom-button {
        width: 30px !important;
        /* display: initial !important; */
        font-weight: bold !important;
        font-size: 10px !important;
        padding: 0 !important;
        background: #fffffff7;
        opacity: 1;
        /* text-shadow: 1px 1px 1px #06060663; */
        background: #fffffff7;
        text-shadow: 1px 1px 1px #ecf2fb;
        /* background-color: #f9f9f9; */
        border: 1px solid #f0f1f3 !important;
        /* text-shadow: 1px 1px 1px #0a0a0a00; */
        /* background-color: #f9f9f9; */
    }

    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .slider {
        direction: rtl;
        -webkit-appearance: none;
        width: 100%;
        height: 5px;
        /* border-radius: 5px; */
        background: #ffffff9c;
        outline: none;
        opacity: 1;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }
    .navbar-project-name {
        top: 0;
        margin-left: 150px !important;
        /* margin-top: 5px; */
    }
    .navbar-title {
        /* float: left; */
        /* height: 50px; */
        padding: 5px 5px;
        font-size: 18px;
        /* line-height: 20px; */
        font-weight: bold;
        color: white;
    }
    .navbar-nav {
        margin: 0px 0px;
    }
    #header{
        margin-left: 20px;
    }
}
.legend {
    /* height: 100%; */
    top: 80%;
    /* bottom: 0; */
    display: flex;
    width: 100%;
    position: absolute;

}
.legend-list {
    position: absolute;
    top: 80px;
    right: 0;
    width: 320;
    height: 300;
    border: 3px solid #99bce8;
    background: #ffffff;
    box-shadow: 4px 4px 4px #94919159;
    border-radius: 10px;
}
.icon-default-level{
    background-image:url(images/icons/warning.svg);
}
.icon-alert-level {
    background-image:url(images/icons/warning_alert.svg);
}
.icon-alarm-level {
    background-image:url(images/icons/warning_alarm.svg);
}
    
.icon-critical-level{
    background-image:url(images/icons/warning_critical.svg);
}
    
.icon-recession-level{
    background-image:url(images/icons/warning_recession.svg);
}    
.icon-default-wlms {
    background-image:url(images/icons/wlms.svg);
}
.icon-alert-wlms {
    background-image:url(images/icons/wlms_alert.svg);
}
.icon-alarm-wlms {
    background-image:url(images/icons/wlms_alarm.svg);
}
.icon-critical-wlms {
    background-image:url(images/icons/wlms_critical.svg);
}
.icon-default-tandem {
    background-image:url(images/icons/tandem.svg);
}
.icon-alert-tandem {
    background-image:url(images/icons/tandem_alert.svg);
}
.icon-alarm-tandem {
    background-image:url(images/icons/tandem_alarm.svg);
}
.icon-critical-tandem {
    background-image:url(images/icons/tandem_critical.svg);
}
.icon-default-rainfall {
    background-image:url(images/icons/raingauge.svg);
}
.legend-header {
    align-content: center;
    text-align: center;
    color: #04408c;
    padding: 10px;
    margin: unset;
    background-color: #cbddf3;
   background-image: -webkit-linear-gradient(top,#dae7f6,#cddef3 45%,#abc7ec 46%,#abc7ec 50%,#b8cfee 51%,#cbddf3);
}
.icon-sz {
    height: 30px;
    width: 30px;
    background-size: cover;
}
#tbl-legend {
    overflow: auto;
}
#tbl-legend > table, #tbl-legend > table > tbody> tr >th, #tbl-legend > table > tbody >  tr > td {  
    border: 1px solid #dddddd47;
    /*text-align: left;*/
  }
  
  #tbl-legend > table {
    border-collapse: collapse;
    width: 100%;
  }
  
  #tbl-legend th ,  #tbl-legend td {
    padding: 5px;
    font-size: 14px;
    text-align: center ;
  
  }
 /* .content-center {
   /* display: flex;
    justify-content: center;
    vertical-align: middle;
  }*/
  .legend-note > p{
    padding: 10px;
  }
  .mgn-nml{
    margin-left: 20%
}
.mgn-alrt{
    margin-left: 5%
}
  .mgn-alrm{
    margin-left: 15%
}

  .mgn-crtl{
       margin-left: 20%
  }