/*iSno External CSS*/

/*-------------*/
/*#id selectors*/
/*-------------*/

#iSno_Login {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 345px;
    height: 245px;
    z-index: 100;
    margin: auto;
    position: absolute;
    background-position: -5px, -5px;
    background-repeat: no-repeat;
    background-image: url('../Images/iSno_Login_BG.png');
    display: none;
}

    #iSno_Login.fr {
        background-image: url('../Images/iSno_Login_BG_fr.png');
    }

#iSno_Site {
    left: 0px;
    top: 0px;
    width: 1920px;
    /*height: 935px;*/
    height: 100%; 
    position: absolute;
    border-style: none;
    background-color: rgb(114,114,114);
    z-index: 1;
}

#Navigation_Bar {
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 56px; 
    z-index: 10000; 
    position: sticky; 
    background-color: rgba(0,0,0,.5); 
}

#User_Panel {
    width: 544px;
    height: 42px;
    z-index: 1000;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: 6px 5px;
    background-image: url('../Images/iSno_Logo_2.png');
    display: inline;
    float: left;
    padding: 0px;
    border: 1px solid #FF9900;
    margin: 6px;
}

    #User_Panel.fr {
        width: 498px;
    }

#Server_DT {
    left: 175px; 
    top: 2px; 
    width: 150px; 
    height: 16px; 
    border-style: none; 
    font-weight: bold; 
    font-size: 10pt; 
    z-index: 104; 
    vertical-align: middle; 
    color: #FFFFFF; 
    font-family: Verdana; 
    position: relative; 
    background-color: transparent; 
    text-align: center; 
    border-radius: 5px;
    margin-left: 2px;
}

#Username_Label {
    left: 175px;
    width: 130px;
    height: 16px;
    border-style: none;
    font-weight: normal;
    font-size: 10pt;
    z-index: 114;
    vertical-align: middle;
    color: #FFFFFF;
    font-family: verdana;
    position: relative;
    background-color: transparent;
    text-align: left;
    display: block;
    margin: 2px;
}

#Current_User {
    left: 280px;
    top: 28px;
    width: 110px;
    z-index: 1000;
    vertical-align: middle;
    text-align: left;
    border-radius: 5px;
    font-family: verdana;
    font-size: 10pt;
    color: yellow;
    background-color: transparent;
    border-style: none;
    height: 16px;
    position: absolute;
    display: block;
    float: left;
}

    #Current_User.fr {
        left: 265px;
    }

#Trends_Nav_Panel {
    z-index: 1000;
    border-radius: 10px;
    display: inline;
    padding: 0px;
    border: 1px solid rgb(21, 101, 192);
    bottom: 0px;
    right: 0px;
    margin: 6px;
    position: absolute;
    background-color: rgba(0,0,0,.7);
}

#Tracker_Status_Panel {
    height: 42px;
    z-index: 1000;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: 6px 3px;
    padding: 0px;
    border: 1px solid #FF9900;
    margin: 6px 6px 6px 0px;
    position:relative;
    display: inline;
    float: right;
}

#Tracker_Nav_Panel {
    z-index: 1000;
    border-radius: 5px;
    display:none;
    padding: 0px;
    border: 1px solid #FF9900;
    top: 56px; 
    right:0px;
    margin: 6px;
    position: absolute;
    background-color: rgba(0,0,0,.7);
}

#Tracker_Legend_Panel {
    z-index: 1000;
    border-radius: 5px;
    background-color: rgba(0,0,0,.7);
    display: inline;
    float: left;
    right: 0px;
    left: 25px;
    border: 1px solid #FF9900;
    top: 0px; 
    margin: 0px;
    position: relative;
    min-width: 210px;
    min-height: 275px;
    opacity: 0;
    transition: 1s;
}

#Tracker_SnowDepth_Panel {
    z-index: 1000;
    border-radius: 5px;
    background-color: rgba(0,0,0,.7);
    display: inline;
    float: left;
    right: 0px;
    border: 1px solid #FF9900;
    top: 0px;
    margin: 0px;
    position: absolute;
    min-width: 210px;
    min-height: 236px;
    opacity: 0;
    transition: 1s;
}

#Tracker_Trail_Select_Panel {
    z-index: 1000;
    width: 320px;
    bottom: 100px; /*0px;*/
    position: absolute;
    border: 1px solid #FF9900;
    border-radius: 5px 5px 5px 5px;
    overflow-y: hidden;
    top: 0px;
    margin: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0,.7);
    opacity: 0;
    transition: 1s;
}

#Tracker_Righthand_Panel {
    position: absolute;
    top: 106px;
    width: 322px;
    margin: 6px;
    float: left;
    bottom: 120px;
    right: -328px;
    transition: 1s;
}

#Tracker_Legend_Container_Panel {
    position: relative;
    top: 0px;
    width: 262px;
    margin: 0px;
    float: left;
    bottom: 65px;
    right: 25px;
    transition: 1s;
}

#Tracker_Trail_Select_Header_Panel {
    position: absolute;
    z-index: 100;
    border-radius: 5px 5px 0px 0px;
    width: 320px;
    height: 35px;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.7);
}

#Tracker_Trail_Select_Table_Body_Panel {
    position: absolute;
    z-index: 100;
    width: 320px;
    bottom: 0px;
    left: 0px;
    top: 35px;
    background-color: rgba(192, 192, 192, 0.7);
    overflow-x: hidden;
    overflow-y: scroll;
}

#Tracker_Trail_Tables_Container {
    left: -448px;
    top: 56px;
    bottom: 313px;
    margin: 6px;
    width: 440px;
    position: absolute;
    /*background-color: aquamarine;*/
    transition: 1s;
    opacity: 0;
}

#Tracker_Trail_Table1_Container_Panel {
    z-index: 1000;
    width: 440px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0);
    opacity: 1;
    transition: 1s;
}

#Tracker_Trail_Table2_Container_Panel {
    z-index: 1000;
    width: 855px;
    bottom: 0px;
    position: absolute;
    top: 0px;
    left: 419px;
    background-color: rgba(0, 0, 0, 0);
    display: none;
}

#Tracker_Trail_Table1_Body_Panel {
    border: 1px solid rgb(244, 145, 30);
    position: absolute;
    z-index: 100;
    width: 440px;
    bottom: 66px;
    left: 0px;
    top: 60px;
    background-color: rgba(192, 192, 192, 0.7);
    overflow-x: hidden;
    overflow-y: scroll;
}

#Tracker_Trail_Table2_Body_Panel {
    border-right: 1px solid rgb(244, 145, 30);
    border-top: 1px solid rgb(244, 145, 30);
    border-bottom: 1px solid rgb(244, 145, 30);
    position: absolute;
    z-index: 100;
    width: 855px;
    bottom: 66px;
    left: 0px;
    top: 60px;
    background-color: rgba(192, 192, 192, 0.7);
    overflow-x: hidden;
    overflow-y: scroll;
}

#Tracker_Trail_Table1_Footer_Panel {
    border: 1px solid rgb(244, 145, 30);
    position: absolute;
    z-index: 999;
    width: 440px;
    height: 65px;
    left: 0px;
    bottom: 0px;
    background-color: rgba(128, 128, 128, 0.7);
    border-radius: 0px 0px 5px 5px;
}

#Tracker_Trail_Table2_Footer_Panel {
    border: 1px solid rgb(244, 145, 30);
    border-left: none;
    position: absolute;
    z-index: 999;
    width: 855px;
    height: 65px;
    left: 0px;
    bottom: 0px;
    background-color: rgba(128, 128, 128, 0.7);
    border-radius: 0px 0px 5px 0px;
}

#iSno_Map_Panel {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: -1;
}

#iSno_Overview_Map_Panel {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: -1;
}

#iSno_Climate_Control_Panel {
    left: 49px;
    top: 415px;
    width: 435px;
    height: 282px;
    z-index: 1000;
    position: absolute;
    font-size: 16pt;
    font-weight: bold;
    font-family: Verdana;
    color: white;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-image: url('../Images/climate_control_detail.png');
    display: none;
}


/*----------------*/
/*.class selectors*/
/*----------------*/

/*Basic elements*/
.iSno_panel {
    left: 0px;
    top: 0px;
    width: 100%; /*1915px;*/
    height: 100%; /*935px;*/
    min-width: 1920px;
    min-height: 935px;
    position: absolute;
    z-index: 100;
    background-repeat: no-repeat;
    display: none;
    overflow: hidden;
}

.hover_fade {
    opacity: 0;
    transition: opacity 0.3s ease-in;
    backface-visibility: hidden;
    -o-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    -webkit-transition: opacity 0.3s ease-in;
}

    .hover_fade:hover {
        opacity: 1;
        transition: opacity 0.2s ease-out;
        -o-transition: opacity 0.2s ease-out;
        -moz-transition: opacity 0.2s ease-out;
        -webkit-transition: opacity 0.2s ease-out;
    }

/*Status and Alarm Styles*/
.indicator_light {
    z-index: 100;
    left: 95px;
    width: 29px;
    position: absolute;
    top: 207px;
    height: 29px;
    opacity: 0;
    transition: 0.5s all;
}

    .indicator_light.show {
        opacity: 1;
    }

    .indicator_light.flash {
        animation: fade_in_and_out .5s infinite alternate;
        animation-timing-function: linear;
    }

@keyframes fade_in_and_out {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pump_status {
    text-align: left;
    border: 2px solid;
    border-radius: 5px;
    display: inline-block;
    padding: 1px 6px 1px 6px;
    font-size: small;
    font-family: Verdana;
    color: aqua;
    background-color: black;
    transition: 1s;
}

    .pump_status.available {
        color: forestgreen;
    }

    .pump_status.enabled {
        color: lime;
    }

    .pump_status.disabled {
        color: rgb(192, 192, 192);
    }

    .pump_status.warning {
        color: yellow;
    }

    .pump_status.local_manual {
        color: deeppink;
    }

    .pump_status.manual_in_stop {
        color: fuchsia;
    }

    .pump_status.alarm_static {
        color: red;
    }

    .pump_status.manual {
        color: red;
    }

    .pump_status.alarm {
        color: red;
        animation: alarm .5s infinite alternate;
    }

    .pump_status.hide {
        opacity: 0;
        transition: opacity .5s;
    }

.alarm {
    color: red;
    animation: alarm .5s infinite alternate;
}

.alarm_status {
    text-align: left;
    border: inset;
    border-radius: 5px;
    display: inline-block;
    padding: 1px 6px 1px 6px;
    font-size: small;
    font-family: Verdana;
    border-width: 2px;
    border-style: solid;
    color: red;
    background-color: black;
    transition: .25s;
    animation: alarm .5s infinite alternate;
    opacity: 0;
}

    .alarm_status.enabled {
        opacity: 1;
    }

    .alarm_status.disabled {
        opacity: 0;
    }

    .alarm_status.warning {
        color: yellow;
        animation: none;
    }

    .alarm_status.static {
        color: red;
        animation: none;
    }

    .alarm_status.benign {
        color: cyan;
        animation: none;
    }

@keyframes alarm {
    from {
        color: red;
    }

    to {
        color: yellow;
    }
}

/*Text and data display*/
.master_alarm_text {
    font-weight: bold;
    font-size: small;
    z-index: 100;
    left: 58px;
    width: 98px;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    margin-top: 9px;
    margin-bottom: 0px;
}

.basic_text {
    border-style: none;
    font-weight: normal;
    font-size: 10pt;
    z-index: 100;
    vertical-align: middle;
    color: black;
    direction: ltr;
    padding-top: 0px;
    font-family: Verdana;
    position: absolute;
    height: 18px;
    background-color: transparent;
    text-align: left;
}

.data_box {
    font-weight: bold; 
    font-size: 10pt; 
    z-index: 100; 
    font-family: Verdana; 
    vertical-align: middle; 
    padding: 0;
    position: absolute; 
    height: 18px; 
    width: 52px; 
    background-color: white; 
    text-align: center; 
    border-radius: 5px;
}

    .data_box.enabled {
        background: lime;
    }

    .data_box.disabled {
        background: rgb(192, 192, 192);
    }

    .data_box.disabled_2 {
        color: dimgray;
        background: rgb(192, 192, 192);
    }

    .data_box.big_text {
        font-size: 11pt;
    }

    .data_box.gray {
        background-color: silver;
    }

    .data_box.green {
        background-color: lime;
    }

    .data_box.yellow {
        background-color: yellow;
    }

    .data_box.red {
        color: white;
        background-color: red;
    }

.data_display {
    border-style: none; 
    font-weight: normal;
    font-size: 10pt; 
    z-index: 100; 
    color: aqua; 
    direction: ltr; 
    padding-top: 0;
    font-family: Verdana; 
    position: absolute;
    height: 18px; 
    background-color: transparent; 
    text-align: left; 
    border-radius: 5px 0 0 5px; 
    margin-left: 2px;
    transition: .5s all;
}

    .data_display.enabled {
        color: lime;
    }

    .data_display.disabled {
        color: rgb(192, 192, 192);
    }

    .data_display.warning {
        color: yellow;
    }

    .data_display.alarm {
        color: red;
        animation: alarm .5s infinite alternate;
    }

.large_data_display {
    border-style: none;
    font-weight: normal;
    font-size: 14pt;
    z-index: 100;
    vertical-align: middle;
    color: aqua;
    direction: ltr;
    font-family: Verdana;
    position: absolute;
    height: 24px;
    background-color: transparent;
    text-align: center;
    border-radius: 5px 0 0 5px;
    transition: .25s;
    visibility: visible;
    opacity: 1;
}

    .large_data_display.enabled {
        color: lime;
    }

    .large_data_display.disabled {
        color: rgb(192, 192, 192);
    }

    .large_data_display.alarm {
        color: red;
        animation: alarm .5s infinite alternate;
    }

    .large_data_display.manual {
        color: rgb(255, 0, 0);
    }

    .large_data_display.hidden {
        visibility: hidden;
        opacity: 0;
    }

.data_input {
    border-style: none;
    font-weight: normal;
    font-size: 10pt;
    z-index: 100;
    left: 132px;
    text-align: left;
    color: aqua;
    direction: ltr;
    padding-top: 0;
    padding-left: 6px;
    font-family: Verdana;
    position: absolute;
    height: 18px;
    background-color: transparent;
    border-radius: 5px 0 0 5px;
    transition: .5s all;
    transition-delay: .5s;
}

    .data_input:focus {
        color: red;
        background-color: white;
        transition: 0s all;
    }

.data_light { /*Status Indicator Light*/
    font-weight: normal;
    font-size: 10pt;
    z-index: 100;
    color: aqua;
    direction: ltr;
    padding: 0;
    font-family: Verdana;
    position: absolute;
    height: 19px;
    width: 19px;
    background-color: transparent;
    text-align: left;
    border-radius: 6px;
    border-width: 1px;
    border-color: white;
    border-style: solid;
    transition: 1s all;
}

    .data_light.selection {
        border-color: yellow;
        border-width: 2px;
        height: 17px;
        width: 17px;
    }

    .data_light.enabled {
        background-color: lime;
    }

    .data_light.disabled {
        background-color: red;
    }

.status_display { /*Status with White Text and Color Background*/
    border: 1px solid white;
    font-weight: normal;
    font-size: 10pt;
    z-index: 100;
    vertical-align: middle;
    padding: 0;
    color: white;
    font-family: Verdana;
    position: absolute;
    height: 20px;
    background-color: rgb(128, 128, 128); 
    text-align: center;
    border-radius: 5px;
    transition: 1s;
}

    .status_display.enabled {
        color: white;
        background-color: rgb(0, 128, 0);
    }

    .status_display.manual {
        color: white;
        background-color: red;
    }

    .status_display.low {
        color: black;
        background-color: rgb(0, 235, 235);
    }

    .status_display.high {
        color: white;
        background-color: rgb(0, 0, 255);
    }

.status_box { /*Status with Color Text and Black Background*/
    font-weight: bold;
    font-size: 10pt;
    z-index: 100;
    vertical-align: middle;
    padding: 0px;
    direction: ltr;
    font-family: Verdana;
    position: absolute;
    background-color: black;
    color: red;
    text-align: center;
    border-radius: 5px;
}

    .status_box.enabled {
        color: lime;
        background-color: black;
        transition: 1s;
    }

    .status_box.disabled {
        color: red;
        background-color: black;
        transition: 1s;
    }

/*Nav Bar Elements*/
.tracker_label{
    border-style: none; 
    font-weight: normal; 
    font-size: 10pt; 
    z-index: 106; 
    left: 2px; 
    color: white; 
    font-family: verdana; 
    top: 10px; 
    height: 18px; 
    background-color: transparent; 
    position: relative;
    display: inline;
    float: left;
    padding: 2px;
    padding-right:6px;
    margin: 2px;
}

.nav_data_display {
    top: 11px; 
    font-weight: normal; 
    font-size: 10pt; 
    z-index: 107; 
    width: 60px; 
    color: #00FFFF; 
    font-family: verdana; 
    background-color: black; 
    text-align: center; 
    border-radius: 5px;
    position: relative;
    display: inline;
    float: left;
    pointer-events: none;
}

.languagepicker {
    font-family: Verdana;
    font-weight: bold;
    font-size: 9pt;
    background-color: #FFF;
    display: inline-block;
    padding: 0;
    height: 30px;
    width: 150px;
    overflow: hidden;
    transition: all .2s ease;
    margin: 0 50px 10px 0;
    vertical-align: middle;
    text-align: left;
    float: left;
    border-radius: 5px;
    top: 13px;
    left: 395px;
    z-index: 111;
    position: absolute;
}

    .languagepicker.fr {
        left: 349px;
    }

    .languagepicker:hover {
     /*don't forget the 1px border*/ 
    height: 30px; /*64px;*/
    }

    .languagepicker a {
        color: #000;
        text-decoration: none;
    }

    .languagepicker li {
        display: block;
        padding: 0px 10px;
        line-height: 30px;
        border-top: 1px solid #EEE;
    }

        .languagepicker li:hover {
            background-color: #EEE;
        }

    .languagepicker a:first-child li {
        border: none;
        background: #FFF !important;
    }

    .languagepicker li img {
        margin-right: 5px;
    }

/*Panel Styles*/
.control_panel { /*Base Class for Control Panels*/
    left: 0px;
    top: 0px;
    z-index: 1000;
    pointer-events: none;
    position: absolute;
    opacity: 0;
    /*visibility: hidden;*/
    transition: .25s;
}

    .control_panel.visible {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transition: .25s;
    }

    .control_panel.pump {
        left: 55px;
        top: 5px;
        width: 107px;
        height: 87px;
        background-image: url('../Images/Pump_Control_BG.png');
    }

    .control_panel.aftercooler {
        left: 0px;
        top: 0px;
        width: 135px;
        height: 79px;
        background-image: url('../Images/Aftercooler_Inverse.png');
    }

    .control_panel.cooling_pump {
        left: 120px;
        top: 1px;
        width: 107px;
        height: 87px;
        background-image: url('../Images/Pump_Control_BG.png');
    }

    .control_panel.compressor {
        left: 12px;
        top: 131px;
        width: 137px;
        height: 117px;
        background-image: url('../Images/Compressor_Control_BG.png');
    }

    .control_panel.valve {
        left: 55px;
        top: 2px;
        height: 66px;
        width: 107px;
        background-image: url('../Images/Valve_control.png');
    }

/*Button Styles*/
.nav_button {
    top: 6px;
    width: 111px; /*116px;*/
    height: 44px;
    border-width: 2px;
    border-color: ButtonFace;
    font-weight: bold;
    font-size: 10pt;
    z-index: 1000;
    color: white;
    background-color: rgb(22,24,27);
    background-repeat: no-repeat;
    font-family: Verdana;
    padding: 0px 6px 0px 6px;
    margin-right: 6px;
    border-radius: 10px;
    position: relative;
    display: inline;
    float: left;
}

    .nav_button:hover {
        text-decoration: underline;
    }

    .nav_button.active {
        background-color: rgb(62,64,67);
    }

.basic_button {
    background-position: center center;
    font-weight: normal;
    font-size: 9pt;
    z-index: 100;
    vertical-align: middle;
    padding: 0;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    background-color: buttonface;
    text-align: center;
    border-radius: 5px;
    height: 22px;
    transition: 0.5s all;
}

    .basic_button:active:hover { /*when clicking*/
        background-color: darkgray;
        transition: 0s all;
    }

    .basic_button.reset_button {
        width: 152px;
        height: 27px;
    }

        .basic_button.reset_button.enabled {
            background-color: hsl(60, 100%, 50%);
        }

            .basic_button.reset_button.enabled:active:hover {
                background-color: hsl(60, 100%, 40%);
            }

    .basic_button.auto_button {
        left: 4px;
        top: 26px;
        width: 75px;
        height: 22px;
    }

    .basic_button.manual_button {
        left: 83px;
        top: 26px;
        width: 75px;
        height: 22px;
    }

    .basic_button.small_reset_button {
        width: 152px;
        height: 27px;
    }

.tracker_nav_button {
    margin: 6px;
    margin-right: 1px;
    margin-left: 1px;
    padding: 4px;
    display: inline;
    border-radius: 5px;
    font-size: 10pt;
    font-family: 'Arial';
    min-width: 30px;
    min-height: 30px;
    position: relative;
}

    .tracker_nav_button.first_button {
        margin-left: 6px;
    }

    .tracker_nav_button.last_button {
        margin-right: 6px;
    }

.trend_button.active {
    color: white;
    background-color: rgb(21, 101, 192);
}

.small_button {
    background-position: center center;
    font-weight: normal;
    font-size: 7pt;
    z-index: 100;
    vertical-align: middle;
    padding: 0;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    background-color: buttonface;
    text-align: center;
    border-radius: 5px;
    transition: 0.5s all;
}

    .small_button:active:hover {
        background-color: darkgray;
        transition: 0s all;
    }

.small_close_button {
    right: 5px;
    top: 3px;
    width: 18px;
    height: 18px;
    padding: 0;
    background-position: center center;
    font-weight: bold;
    font-size: 10pt;
    z-index: 200;
    vertical-align: middle;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border: 1px solid gray;
    border-radius: 3px;
}

    .small_close_button:active:hover {
        background-color: darkgray;
    }

.start_button { /*Base Class for Start Button*/
    padding: 0;
    color: white;
    background-color: green;
    font-size: 16pt;
    font-weight: bold;
    z-index: 100;
    vertical-align: middle;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    transition: all .2s;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3) inset;
}

    .start_button:hover {
        filter: brightness(90%);
    }

    .start_button.disabled {
        box-shadow: none;
        color: dimgray;
        background-color: silver;
    }

        .start_button.disabled:hover {
            filter: unset;
        }

    .start_button.pump {
        left: 5px;
        top: 28px;
        width: 46px;
        height: 55px;
    }

    .start_button.cooling_pump {
        left: 5px;
        top: 28px;
        width: 46px;
        height: 55px;
    }

    .start_button.aftercooler {
        left: 17px;
        top: 25px;
        width: 54px;
        height: 49px;
    }

    .start_button.compressor {
        left: 5px;
        top: 29px;
        width: 61px;
        height: 55px;
        font-size: 16pt;
    }

    .start_button.compressor_detail {
        left: 16px;
        top: 50px;
        width: 40px;
        height: 40px;
    }

    .start_button.oilpump {
        left: 5px;
        top: 83px;
        width: 61px;
        height: 29px;
        font-size: 13pt;
    }

    .start_button.blower {
        left: 57px;
        top: 26px;
        width: 49px;
        height: 40px;
    }

    .start_button.valve {
        left: 5px;
        top: 28px;
        height: 34px;
        width: 46px;
        font-size: 7pt;
    }

.stop_button { /*Base Class for Stop Button*/
    padding: 0;
    color: white;
    background-color: red;
    font-size: 19pt;
    font-weight: bold;
    z-index: 100;
    vertical-align: middle;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    transition: all .2s;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3) inset;
}

    .stop_button:hover {
        filter: brightness(90%);
    }

    .stop_button.disabled {
        box-shadow: none;
        color: dimgray;
        background-color: silver;
    }

        .stop_button.disabled:hover {
            filter: unset;
        }

    .stop_button.pump { 
        left: 56px;
        top: 28px;
        width: 46px;
        height: 55px;
    }

    .stop_button.cooling_pump {
        left: 56px;
        top: 28px;
        width: 46px;
        height: 55px;
    }

    .stop_button.aftercooler {
        left: 76px;
        top: 25px;
        width: 54px;
        height: 49px;
    }

    .stop_button.compressor {
        left: 71px;
        top: 29px;
        width: 61px;
        height: 55px;
        font-size: 19pt;
    }

    .stop_button.compressor_detail {
        left: 60px;
        top: 50px;
        width: 40px;
        height: 40px;
    }

    .stop_button.oilpump {
        left: 71px;
        top: 83px;
        width: 61px;
        height: 29px;
        font-size: 14pt;
    }

    .stop_button.blower {
        left: 110px;
        top: 26px;
        width: 49px;
        height: 40px;
    }

    .stop_button.valve {
        left: 56px;
        top: 28px;
        height: 34px;
        width: 46px;
        font-size: 7pt;
    }

.load_button {
    padding: 0;
    color: black;
    background-color: aqua;
    font-size: 16pt;
    font-weight: bold;
    z-index: 100;
    vertical-align: middle;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    transition: all .2s;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3) inset;
}

    .load_button:hover {
        filter: brightness(90%);
    }

    .load_button.compressor_detail {
        left: 336px;
        top: 50px;
        width: 40px;
        height: 40px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
    }

.unload_button {
    padding: 0;
    color: black;
    background-color: magenta;
    font-size: 16pt;
    font-weight: bold;
    z-index: 100;
    vertical-align: middle;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    transition: all .2s;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3) inset;
}

    .unload_button:hover {
        filter: brightness(90%);
    }

    .unload_button.compressor_detail {
        left: 380px;
        top: 50px;
        width: 40px;
        height: 40px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
    }

.compressor_detail_load {
    left: 336px;
    top: 50px;
    width: 40px;
    height: 40px;
    color: black;
    background-color: aqua;
    font-size: 16pt;
    font-weight: bold;
    z-index: 100;
    vertical-align: middle;
    color: black;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    padding: 0px;
    transition: .2s all;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4) inset;
}

    .compressor_detail_load:hover {
        box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.6) inset;
    }

.compressor_detail_unload {
    left: 380px;
    top: 50px;
    width: 40px;
    height: 40px;
    color: black;
    background-color: magenta;
    font-size: 16pt;
    font-weight: bold;
    z-index: 100;
    vertical-align: middle;
    color: black;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    padding: 0px;
    transition: .2s all;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.4) inset;
}

    .compressor_detail_unload:hover {
        box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.6) inset;
    }

/*Overview Panel Elements*/
.overview_panel {
    z-index: 1;
    width: 318px;
    height: 302px;
    position: absolute;
}

.overview_title {
    border-style: none;
    font-weight: bold;
    font-size: 11pt;
    z-index: 100;
    vertical-align: middle;
    color: white;
    direction: ltr;
    font-family: Verdana;
    position: absolute;
    top: 1px;
    height: 18px;
    background-color: transparent;
    text-align: center;
    pointer-events: none;
    width: 100%;
    margin: 2px auto;
}

/*Misc Pump Panel Elements*/
.pump_panel { /*Vertical Pump*/
    left: 160px;
    top: 548px;
    height: 96px;
    width: 165px;
    z-index: 121;
    position: absolute;
}

.pump_hover {
    left: 0px;
    top: 0px;
    height: 96px;
    width: 44px;
    z-index: 97;
    position: absolute;
    opacity: 0;
    transition: 0.5s all;
}

.pump_image {
    left: 0px;
    top: 0px;
    height: 96px;
    width: 44px;
    z-index: 97;
    position: absolute;
    opacity: 0;
    transition: 0.5s all;
}

    .pump_image.show {
        opacity: 1;
    }

    .pump_image.flash {
        animation: fade_in_and_out .5s infinite alternate;
        animation-timing-function: linear;
    }


.pump2_panel { /*Horizontal Pump*/
    left: 160px;
    top: 548px;
    height: 87px;
    width: 227px;
    z-index: 121;
    position: absolute;
}

.pump2_image {
    left: 0px;
    top: 19px;
    height: 54px;
    width: 109px;
    z-index: 97;
    position: absolute;
}

.pump_amps {
    left: 61px;
    top: 35px;
    height: 18px;
    width: 44px;
    transition: 0.5s all;
}

.pump_hours {
    left: 61px;
    top: 63px;
    height: 18px;
    width: 58px;
}

.control_text {
    font-weight: bold;
    font-size: small;
    z-index: 100;
    left: 8px;
    width: 88px;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    margin-top: 4px;
    color: white;
}

.panel_text {
    margin: 0px;
    text-align: right;
    font-family: verdana;
    font-size: 9pt;
    font-weight: bold;
    position: relative;
}

/*Panel Switches*/
.panel_switch {
    left: 7px;
    top: 27px;
    width: 33px;
    height: 41px;
    z-index: 100;
    position: absolute;
    transition: .5s;
    transform-origin: 16.5px 16.5px;
}

    .panel_switch.on {
        transform: rotate(45deg);
    }

    .panel_switch.off {
        transform: rotate(-45deg);
    }

/*Misc Images*/
.valve_hover {
    left: 0px;
    top: 0px;
    width: 47px;
    height: 46px;
    z-index: 97;
    position: absolute;
    opacity: 0;
    transition: 0.5s all;
}

    .valve_hover.manual {
        width: 35px;
        height: 46px;
    }

.valve_image {
    left: 0px;
    top: 0px;
    width: 47px;
    height: 46px;
    z-index: 97;
    position: absolute;
    opacity: 0;
    transition: 0.5s all;
}

    .valve_image.show {
        opacity: 1;
    }

    .valve_image.manual {
        width: 35px;
        height: 46px;
    }

.cog_image {
    left: 0px;
    top: 0px;
    height: 24px;
    width: 24px;
    z-index: 97;
    position: absolute;
}

.instrument_air_image {
    left: 5px; 
    top: 26px; 
    height: 41px;
    width: 51px;
    z-index: 97;  
    position: absolute; 
}

.air_blast_image {
    left: 3px; 
    top: 27px; 
    height: 37px;
    width: 41px;
    z-index: 97;  
    position: absolute; 
}

/*Compressor Elements*/
.compressor_panel {
    z-index: 100; 
    width: 321px; 
    position: absolute; 
    top: 158px; 
    height: 115px
}

.compressor_panel_large {
    z-index: 100;
    width: 321px;
    position: absolute;
    top: 158px;
    height: 138px
}

.compressor_vertical_panel {
    z-index: 100;
    width: 160px;
    position: absolute;
    top: 158px;
    height: 248px
}

.compressor_title {
    left: 2px;
    width: 130px;
    font-weight: bold;
    font-size: small;
    z-index: 100;
    font-family: Verdana;
    position: absolute;
    text-align: center;
    margin-top: 4px;
}

.compressor_amps {
    left: 6px;
    top: 30px;
    width: 44px;
    height: 18px;
    transition: 0.5s all;
}

.compressor_hours {
    left: 6px; 
    top: 58px; 
    width: 58px;
}

.compressor_status1 {
    left: 6px; 
    top: 89px; 
    width: 120px; 
    height: 18px; 
    text-align: center;
    margin: 0px;
}

.compressor_status2 {
    left: 7px;
    top: 112px;
    width: 120px;
    height: 18px;
    text-align: center;
    margin: 0px;
}

.compressor_detail_status1 {
    left: 184px; 
    top: 50px; 
    width: 120px; 
    height: 18px; 
    text-align: center;
}

.compressor_detail_status2 {
    left: 184px; 
    top: 72px; 
    width: 120px; 
    height: 18px; 
    text-align: center;
}

.compressor_el_image {
    left: 0px;
    top: 0px;
    width: 160px;
    height: 128px;
    z-index: 97;
    position: absolute;
}

.compressor_ir_image {
    left: 0px;
    top: 0px;
    width: 184px;
    height: 123px;
    z-index: 97;
    position: absolute;
}

.compressor_mum_image {
    left: 0px; 
    top: 0px; 
    width: 162px; 
    height: 116px;
    z-index: 97; 
    position: absolute; 
}

.compressor_boge_image {
    left: 7px; 
    top: 13px; 
    width: 148px; 
    height: 123px;
    z-index: 97; 
    position: absolute; 
}

.compressor_detail_setpoint {
    left: 137px; 
    width: 34px; 
    top: 103px; 
    height: 18px;
}

.compressor_detail_setpoint_button {
    left: 214px; 
    width: 32px; 
    top: 102px; 
    height: 21px; 
}

.compressor_detail_reset_button {
    left: 299px; 
    width: 42px; 
    top: 152px; 
    height: 21px; 
    font-size: 7pt;
}

/*Pid Panel Elements*/ 
.pid_panel{
    height: 102px;
    width: 240px;
    z-index: 156;  
    position: absolute;  
}

.pid_status{
    left: 162px; 
    top: 26px; 
    height: 20px;
    width: 72px; 
}

.auto_setpoint {
    left: 132px;
    top: 53px;
    height: 18px;
    width: 34px;
}

.manual_setpoint {
    left: 132px;
    top: 78px;
    height: 18px;
    width: 34px;
}

.auto_setpoint_button {
    left: 204px;
    top: 52px;
    height: 21px;
    width: 32px;
}

.manual_setpoint_button {
    left: 204px;
    top: 77px;
    height: 21px;
    width: 32px;
}

/*Detail Windows*/
.detail_window { /*Base class for Detail Windows*/
    z-index: 1000;
    position: absolute;
    border-radius: 10px;
    background-repeat: no-repeat;
    display: none;
}

    .detail_window.report {
        left: 675px;
        top: 56px;
        width: 279px;
        height: 329px;
        background-image: url('../Images/Report_Detail.png');
    }

    .detail_window.report.fr {
        background-image: url('../Images/Report_Detail_fr.png');
    }

    .detail_window.compressor_mum {
        left: 400px;
        top: 123px;
        width: 435px;
        height: 290px;
        background-image: url('../Images/compressor_mum_detail.png');
    }

    .detail_window.compressor_ir {
        left: 400px;
        top: 123px;
        width: 435px;
        height: 340px;
        background-image: url('../Images/compressor_ir_detail.png');
    }

    .detail_window.sequencing {
        left: 520px;
        top: 113px;
        width: 696px;
        height: 497px;
        background-image: url('../Images/Primary_Sequencing_detail.png');
    }

.detail_window_title {
    border-style: none;
    font-weight: bold;
    font-size: 14pt;
    z-index: 100;
    color: white;
    line-height: 32px;
    font-family: Verdana;
    position: relative;
    height: 32px;
    background-color: transparent;
    text-align: left;
    padding-left: 4px;
    margin: 4px;
    border-radius: 5px;
}

    .detail_window_title:active {
        color: rgb(65, 105, 225);
        background-color: aqua;
    }

    .detail_window_title.alert {
        color: white;
        background-color: rgb(225, 65, 65);
    }

        .detail_window_title.alert:active {
            color: rgb(225, 65, 65);
            background-color: rgb(225, 255, 35);
        }

.large_close_button {
    right: 5px;
    top: 5px;
    width: 30px;
    height: 30px;
    background-position: center center;
    font-weight: normal;
    font-size: 14pt;
    z-index: 100;
    vertical-align: middle;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    padding-bottom: 2px;
    text-align: center;
    border: 1px solid gray;
    border-radius: 5px;
}

    .large_close_button:active:hover {
        background-color: darkgray;
    }

.large_minimize_button {
    right: 40px;
    top: 5px;
    width: 30px;
    height: 30px;
    background-position: center center;
    font-weight: normal;
    font-size: 14pt;
    z-index: 100;
    vertical-align: middle;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    padding-bottom: 2px;
    text-align: center;
    border: 1px solid gray;
}

    .large_minimize_button:active:hover {
        background-color: darkgray;
    }

.minimized {
    height: 39px !important;
    top: unset !important;
    bottom: 1px !important;
}

/*Aftercoolers*/
.aftercooler_box_image { /*Box aftercooler*/
    left: 0px;
    top: 0px;
    width: 135px;
    height: 79px;
    z-index: 100;
    position: absolute;
}

.aftercooler_panel { /*Fan aftercooler*/
    left: 0px;
    top: 0px;
    width: 102px;
    height: 123px;
    z-index: 100;
    position: absolute;
}

.aftercooler_speed {
    left: 23px;
    top: 80px;
}

.aftercooler_temperature {
    left: 23px;
    top: 100px;
}

.ac_temperature_label {
    left: unset;
    right: 0px;
    bottom: 0px;
    width: 20px;
    margin: 4px;
}

.aftercooler_speed_label {
    left: auto;
    right: 0px;
    bottom: 20px;
    width: 20px;
    margin: 2px;
}

.aftercooler_temperature_label {
    left: auto;
    right: 0px;
    bottom: 0px;
    width: 20px;
    margin: 4px;
}

.aftercooler_status_text {
    font-size: small;
    z-index: 100;
    font-family: Verdana;
    position: relative;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    text-align: center;
    margin: auto;
    padding: 1px;
    color: aqua;
    left: 0px;
    top: 26px;
    width: 88%;
    background-color: black;
    transition: 1s;
}

    .aftercooler_status_text.available {
        color: forestgreen;
    }

    .aftercooler_status_text.enabled {
        color: lime;
    }

    .aftercooler_status_text.disabled {
        color: rgb(192, 192, 192);
    }

    .aftercooler_status_text.warning {
        color: yellow;
    }

    .aftercooler_status_text.local_manual {
        color: deeppink;
    }

    .aftercooler_status_text.manual_in_stop {
        color: fuchsia;
    }

/*Dynamic Water Level*/
.water_level {
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 50%;
    max-height: 100%;
    z-index: 100;
    transition: 1s;
    background-color: blue;
    position: absolute;
}

    .water_level.normal {
        background-color: hsl(230,70%,50%);
    }

    .water_level.warning {
        background-color: hsl(60,70%,50%);
    }

    .water_level.alarm {
        background-color: hsl(0,80%,50%);
    }

/*Tracker Elements*/
.rotate {
    font-family: Tahoma;
}

.slide_in_from_left {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    transform: translate(448px);
}

.slide_in_from_right {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    transform: translate(-328px);
}

.slide_in_legend {
    opacity: 1 !important;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    transform: translate(-218px);
}

.fade_in {
    opacity: 1 !important;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.trail_table {
    font-family: "Verdana";
    position: absolute;
    /*width: 600px;*/
    text-align: center;
    /*border-collapse: collapse;*/
}

    .trail_table td, .trail_table th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .trail_table tr:nth-child(odd) td {
        background-color: #f2f2f2;
    }

    .trail_table:not(.nohover) tr:hover:not(.nohover) td {
        background-color: #f0e68c;
    }

    .trail_table:not(.nohover) td:hover:not(.nohover) {
        background-color: #f0e68c;
    }

    .trail_table tr td.active_guns {
        background-color: aqua;
    }

    .trail_table th {
        font-weight: bold;
        font-size: 10pt;
        color: white;
        font-family: Verdana;
        height: 16px;
        background-color: black;
        text-align: center;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .trail_table td {
        font-size: 10pt;
        color: black;
        font-family: Verdana;
        height: 16px;
        background-color: white;
        text-align: center;
        padding-top: 2px;
        padding-bottom: 2px;
    }

.tracker_panel_hide_button {
    left: 0px;
    top: 0px;
    width: 26px;
    height: 26px;
    margin: 5px;
    font-weight: bold;
    font-size: 6pt;
    z-index: 100;
    color: #FFF;
    background-color: #000;
    font-family: verdana;
    position: absolute;
    text-align: center;
    border-radius: 3px;
}

.tracker_panel_expand_button {
    font-weight: bold;
    font-size: 6pt;
    z-index: 1000;
    right: 0px;
    width: 26px;
    color: rgb(255, 255, 255);
    font-family: verdana;
    position: absolute;
    top: 0px;
    height: 26px;
    text-align: center;
    background-color: rgb(0, 0, 0);
    border-radius: 3px;
    margin: 5px;
}

.tracker_trail_title {
    left: 31px;
    top: 0px;
    width: 231px;
    height: 22px;
    margin: 5px;
    font-weight: normal;
    border: 1px solid #FFFFFF;
    font-size: 11pt;
    z-index: 100;
    vertical-align: middle;
    color: #00FFFF;
    background-color: #000;
    font-family: verdana;
    position: relative;
    text-align: center;
    border-radius: 3px;
}

.tracker_trail_on_button {
    font-size: 10pt;
    z-index: 100;
    left: 269px;
    width: 40px;
    color: #FFFFFF;
    font-family: verdana;
    position: absolute;
    top: 0px;
    height: 26px;
    text-align: center;
    background-color: #008000;
    border-radius: 3px;
    right: 110px;
    vertical-align: middle;
    margin: 5px;
}

.tracker_trail_off_button {
    font-size: 10pt;
    z-index: 100;
    left: 314px;
    width: 40px;
    color: #FFFFFF;
    font-family: verdana;
    position: absolute;
    top: 0px;
    height: 26px;
    text-align: center;
    background-color: #FF0000;
    border-radius: 3px;
    right: 68px;
    vertical-align: middle;
    margin: 5px;
}

.tracker_trail_status {
    border-width: 2px;
    border-style: inset;
    border-image: initial;
    font-weight: normal;
    font-size: 10pt;
    z-index: 103;
    left: 359px;
    vertical-align: middle;
    width: 36px;
    color: rgb(255, 255, 255);
    direction: ltr;
    font-family: verdana;
    position: absolute;
    top: 0px;
    background-color: rgb(0, 0, 0);
    text-align: center;
    border-radius: 3px;
    height: 20px;
    margin: 5px;
}

.tracker_hydrant_detail_panel {
    border: 1px solid rgb(244, 145, 30);
    z-index: 999;
    left: /*0px;*/ -448px;
    width: /*1273px;*/ 440px;
    position: absolute;
    bottom: 0px;
    height: 305px;
    background-color: rgb(128, 128, 128);
    border-radius: 5px;
    overflow: hidden;
    transition: 1s;
    margin: 6px;
    opacity: 0;
}

.tracker_hydrant_detail_title {
    left: 31px;
    top: 0px;
    width: 290px;
    height: 22px;
    margin: 5px;
    font-weight: normal;
    border: 1px solid #FFFFFF;
    font-size: 11pt;
    z-index: 100;
    vertical-align: middle;
    color: #00FFFF;
    background-color: #000;
    font-family: verdana;
    position: absolute;
    text-align: center;
    border-radius: 3px;
}

.tracker_hydrant_detail_lockout_button {
    background-position: center;
    font-size: 10pt;
    z-index: 126;
    left: 328px;
    width: 71px;
    color: #000000;
    background-repeat: no-repeat;
    font-family: Verdana;
    position: absolute;
    top: 0px;
    height: 26px;
    border-radius: 3px;
    margin: 5px;
}

.button_disabled { /*for tracker panel expand*/
    color: rgb(0, 0, 0);
    background-color: rgb(128, 128, 128);
    pointer-events: none;
}

.expand_tracker_detail {
    width: 1273px;
}

.tracker_detail_notes_panel {
    left: 0px;
    bottom: 0px;
    height: 100px;
    margin: 2px;
    right: 0px;
    max-width: 560px;
    position: absolute;
}

.tracker_detail_notes_text {
    border-style: none;
    font-size: 11pt;
    z-index: 1000;
    width: 100%;
    color: #FFFF00;
    font-family: verdana;
    top: 2px;
    background-color: transparent;
    text-align: center;
    margin: 0 auto;
}

.tracker_detail_notes_positioner {
    left: 3px;
    right: 29px;
    bottom: 3px;
    height: 77px;
    z-index: 100;
    max-width: 560px;
    font-family: verdana;
    position: absolute;
    background-color: orange;
    border-radius: 3px;
}

.tracker_detail_notes {
    width: 100%;
    height: 100%;
    z-index: 100;
    resize: none;
    font-size: 10pt;
    font-family: verdana;
    position: absolute;
    color: white;
    background-color: black;
    border-radius: 3px;
    border: 2px inset #FFFFFF;
    box-sizing: border-box;
}

.tracker_detail_notes_set_button {
    font-size: 8pt;
    z-index: 103;
    right: 3px;
    width: 22px;
    color: #000000;
    font-family: verdana;
    position: absolute;
    bottom: 3px;
    border-radius: 3px;
    font-weight: bold;
    text-indent: -3px;
    height: 77px;
}

.tracker_snowdepth_min_max_field {
    text-align: right;
    border: 1px solid white;
    border-radius: 5px;
    display: inline-block;
    padding: 1px 6px 1px 6px;
    font-size: small;
    font-family: Verdana;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    border-color: white;
    color: white;
    background-color: black;
    transition: 1s;
    min-width: 60px;
}

.tracker_overview_master_alarm{
    color: white;
    border: 1px solid white;
	-webkit-animation: tracker_overview_master_alarm_flash linear 1s infinite;
	animation: tracker_overview_master_alarm_flash linear 1s infinite;
}
@-webkit-keyframes tracker_overview_master_alarm_flash {
	0% { color: white; border: 1px solid white; } 
	50% { color: red; border: 1px solid red;} 
	100% { color: white; border: 1px solid white; }
}
@keyframes tracker_overview_master_alarm_flash {
	0% { color: white; border: 1px solid white; } 
	50% { color: red; border: 1px solid red;} 
	100% { color: white; border: 1px solid white; }
}

.tracker_table_master_alarm{
    color: black;
	-webkit-animation: tracker_table_master_alarm_flash linear 1s infinite;
	animation: tracker_table_master_alarm_flash linear 1s infinite;
}
@-webkit-keyframes tracker_table_master_alarm_flash {
	0% { color: black; } 
	50% { color: yellow;} 
	100% { color: black; }
}
@keyframes tracker_table_master_alarm_flash {
	0% { color: black; } 
	50% { color: yellow;} 
	100% { color: black; }
}

.tracker_detail_master_alarm{
    border: red inset 2px;
    color: yellow;
	-webkit-animation: tracker_detail_master_alarm_flash linear 1s infinite;
	animation: tracker_detail_master_alarm_flash linear 1s infinite;
}
@-webkit-keyframes tracker_detail_master_alarm_flash {
	0% { border: red inset 2px; color: yellow; } 
	50% { border: red inset 2px; color: white;} 
	100% { border: red inset 2px; color: yellow; }
}
@keyframes tracker_detail_master_alarm_flash {
	0% { border: red inset 2px; color: yellow; } 
	50% { border: red inset 2px; color: white;} 
	100% { border: red inset 2px; color: yellow; }
}

.tracker_fan_detail_table_master_alarm{
    color: red;
	-webkit-animation: tracker_fan_detail_table_master_alarm_flash linear 1s infinite;
	animation: tracker_fan_detail_table_master_alarm_flash linear 1s infinite;
}
@-webkit-keyframes tracker_fan_detail_table_master_alarm_flash {
	0% { color: red; } 
	50% { color: yellow;} 
	100% { color: red; }
}
@keyframes tracker_fan_detail_table_master_alarm_flash {
	0% { color: red; } 
	50% { color: yellow;} 
	100% { color: red; }
}

.tracker_target_flow_alarm {
    background-color: yellow;
    color: black;
    -webkit-animation: tracker_target_flow_alarm_flash linear 1s infinite;
    animation: tracker_target_flow_alarm_flash linear 1s infinite;
}
@-webkit-keyframes tracker_target_flow_alarm_flash {
	0% { background-color: black; color: white; } 
	50% { background-color: yellow; color: black;} 
	100% { background-color: black; color: white; }
}
@keyframes tracker_target_flow_alarm_flash {
	0% { background-color: black; color: white; } 
	50% { background-color: yellow; color: black;} 
	100% { background-color: black; color: white; }
}

/* Report Loading */
#Report_Spinner_Panel {
    display: none;
    z-index: 999;
    position: absolute;
    width: 271px;
    height: 286px;
    left: 4px;
    top: 39px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    text-align: center;
}

#Report_Progress_Percent {
    position: relative;
    top: 42%;
    font-family: Verdana;
    font-size: 16pt;
    text-align: center;
    color: yellow;
}

#Report_Progress {
    top: 5%;
    left: 32%;
    color: #1E90FF;
    border: 3px solid white;
    font-size: 90px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: absolute;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}