/*CONTENT-TOP*/
@media (min-width: 1830px){
      div.content-top
      {
        margin-left:       -250px !important;
        padding-left:       250px !important;
      }
}

div.content-top
{
    margin:                 0;
    padding:                0;
    margin-top:             38px;
    background-color:       #2B3A41;
    color:                  #FFF;
    border-bottom:          1px solid #FFF;
    box-shadow:             -3px 3px 9px #111;
    -webkit-box-shadow:     -3px 1px 3px #111; 
    position:               fixed;
    width:                  100%;
    z-index:                800;
    overflow:               hidden;
    text-align:             center !important;
    -webkit-transition:     all ease 0.5s;
    transition:             all ease 0.5s;
}

div.content-top.switch_mode
{
    margin-top:        0px !important;
    margin-left:       0px !important;
    padding-left:      0px !important;
}

div.top-fix-element, div.main-fix-element
{
    display:                block;
    margin:                 0;
    padding:                0;
}

.phase-prev
{
    cursor:                 pointer;
    font-size:              14px;
    margin-right:           25px;
    text-shadow:            0px 0px 1px #111;
    -webkit-text-shadow:    0px 0px 1px #111;
}
.phase-pause
{
    cursor:                 pointer;
    font-size:              14px;
    text-shadow:            0px 0px 1px #111;
    -webkit-text-shadow:    0px 0px 1px #111;
}
.phase-next
{
    cursor:                 pointer;
    font-size:              14px;
    margin-left:            25px;
    text-shadow:            0px 0px 1px #111;
    -webkit-text-shadow:    0px 0px 1px #111;
}
.phase-pause.fa-play
{
    margin-right:           0.5px;
    margin-left:            0.5px;
}
/*CONTENT-TOP-END*/

@media (max-width: 590px){
    div.module-wrap
    {
        width:354px;
    }
}

div.content-top
{
    -webkit-box-shadow: none;
    box-shadow:         none;
    border-bottom:      none;
    background-color:   transparent !important;
    overflow:           visible !important;
}

div.top-fix-element
{
    -ms-transition:     all ease 0s;
    -moz-transition:    all ease 0s;
    -webkit-transition: all ease 0s;
    transition:         all ease 0s;
}

div.module-wrap
{
    overflow:       hidden;
    margin:         auto;
    height:         77px;
    padding-left:   0px;
    padding-top:    3px;
}

div.module-wrap.v-extend
{
    height:154px;
}

div.t-module
{
    margin:         0;
    padding:        0;
    height:         71px;
    width:          167px;
    display:        inline-block;
    overflow:       hidden;
}


#topDock-container
{
    text-align:         right;
    height:             1px;
    overflow:           visible;
}
#topDock
{
    display:            inline-block;
    z-index:            800;
    border-radius:      0 0 6px 6px;
    color:              #777;
    cursor:             default;
    text-align:         right;
    position:           relative;
}

#topDock-ctrs
{
    border:             none;
    height:             0px;
    background:         #2B3A41;
    border-radius:      0 0 0 6px;

    -ms-transition:     all ease 0.39s;
    -moz-transition:    all ease 0.39s;
    -webkit-transition: all ease 0.39s;
    transition:         all ease 0.39s;

    overflow:           hidden;

    box-shadow:         0px 0px 1px #000;
    -webkit-box-shadow: 0px 0px 1px #000;
}
#top-ctrs
{
    border-radius:      0 0 0 6px;
    width:              100%;
    height:             100%;
    border-left:        1px solid #999;
    border-bottom:      1px solid #999;
    background:         #2B3A41;
    overflow:           hidden;
}
#top-ctrs-inner
{
    width:              100%;
    height:             100%;
    background:         transparent;
    border-left:        2px solid white;
    border-bottom:      2px solid white;
    border-radius:      0 0 0 6px;
    text-align:         center;
    padding-top:        9px;
    padding-left:       9px;
    padding-right:      9px;
}
#topDock-trigger
{
    height:             25px;
    width:              45px;
    background:         #dedede;
    display:            inline-block;
    z-index:            800;
    border-radius:      0 0 6px 6px;
    color:              #777;
    cursor:             pointer;
    border:             1px solid #999;
    text-align:         center;
    font-size:          17px;
    position:           relative;
    border-top:         none;
}
#mods-container
{
    margin:             0;
    padding:            0;
    border-bottom:      2px solid #FFF;
    -webkit-box-shadow: none;
    box-shadow:         none;
    z-index:            1000;
    background-color:   #222D32;
    /*background-color:   #131e23;*/
    box-shadow:         -2px 3px 12px #111;
    -webkit-box-shadow: -2px 3px 12px #111;
}



/*===single module trigger buttons===*/
button.modBtn
{
    height:             24px;
    padding:            0;
    margin:             0;
    line-height:        13px;
    font-size:          13px;
    font-weight:        700;
    color:              #888;
    padding-left:       4px;
    padding-right:      4px;
    border-radius:      3px;
    border:             none;
    border:             1px solid #555;
    background-color:   #dedede;
    margin-left:        1px;
    margin-right:       1px;
}
button.modBtn:hover
{
    color:              #333;
    background-color:   #CCC;
}
button.modBtn.modActive
{
    color:              #222D32;
    background-color:   #FDA921;
}
button.modBtn.modActive:hover
{
    color:              #222D32;
    background-color:   #FDA921;
}
/*===single module trigger buttons===*/

div.cModule.triple-ext > .mHeading
{
    line-height:10px;height:12px;
}

.modLine
{
    margin:         0;
    padding:        0;
}
#modCarousel
{
    padding:        10px;
    color:          #FDA921;
}

@media (min-width: 1878px){
    div.cModule
    {
        margin-right:   6px !important;
    }
    div.cModule.triple-ext
    {
        margin-left:    6px !important;
    }
    div.cModule.double 
    {
        width:          343px !important;
    }
}


@media (max-width: 1830px){
    @media (min-width: 1630px){
        div.cModule
        {
            margin-right:   6px !important;
        }
        div.cModule.triple-ext
        {
            margin-left:    6px !important;
        }
        div.cModule.double 
        {
            width:          343px !important;
        }        
    }
}


@media (max-width: 1577px){
    @media (min-width: 1361px){
            div.cModule
            {
                margin-right:   30px !important;
            }
            div.cModule.triple-ext
            {
                margin-left:    30px !important;
            }
            div.cModule.double 
            {
                width:          367px !important;
            } 
    }
}



@media (max-width: 1360px){
    @media (min-width: 1301px){
            div.cModule
            {
                margin-right:   20px !important;
            }
            div.cModule.triple-ext
            {
                margin-left:    20px !important;
            }
            div.cModule.double 
            {
                width:          357px !important;
            } 
    }
}


@media (max-width: 1300px){
    @media (min-width: 1188px){
        div.cModule
        {
            margin-right:   6px !important;
        }
        div.cModule.triple-ext
        {
            margin-left:    6px !important;
        }
        div.cModule.double 
        {
            width:          343px !important;
        }        
    }
}


@media (max-width: 1034px){
    @media (min-width: 900px){
        @media (min-height: 780px){
            div.cModule
            {
                margin-right:   6px !important;
            }
            div.cModule.triple-ext
            {
                margin-left:    6px !important;
            }
            div.cModule.double 
            {
                width:          343px !important;
            }
        }
    }
}

@media (max-width: 864px){
    @media (min-width: 768px){

            div.cModule
            {
                margin-right:   17px !important;
            }
            div.cModule.triple-ext
            {
                margin-left:    17px !important;
            }
            div.cModule.double 
            {
                width:          354px !important;
            }
    }
}

@media (max-width: 694px){
    @media (min-width: 370px){
        div.cModule
        {
            margin-right:   6px !important;
        }
        div.cModule.triple-ext
        {
            margin-left:    6px !important;
        }
        div.cModule.double 
        {
            width:          343px !important;
        }        
    }
}

/*canvas single module*/
div.cModule
{
    display:        inline-block;
    width:          167px;
    height:         70px;
    background:     #222D32;
    padding:        0;
    margin:         0;
    border:         none;
    margin-left:    3px;
    margin-right:   0px;
}
div.cModule.double
{
    width:          337px;
}
div.cModule.triple
{
    width:          515px;
}
div.cModule.triple-ext
{
    width:          475px;
}

div.cModule.triple-ext.wdg-extend
{
    width:          1405px !important;
}

div.left-bordered
{
    border-left:1px solid #CCC;
}

div.cModule > div.mHeading
{
    border:         none;
    font-size:      10px;
    font-weight:    bold;
    background:     #596D82;
    border-radius:  2px;
    border:         1px solid #425261;
    font-family:    'Oswald';
    padding:        0;
    line-height:    10px;
    height:         12px;
}
div.cModule > div.mBody
{
    border:         none;
    margin:         0;
    margin-top:     3px;
    height:         55px;
    font-size:      11px;
    line-height:    12px;
    font-weight:    bold;
    background:     #302D2C;
    background:     #131E23; /*on trial*/
    border-radius:  0px;
    padding:        0;
    padding-left:   2px;
    padding-right:  2px;
}

/*name module block*/
div.nModule
{
    display:        inline-block;
    position:       relative;
    top:            -15px;
    width:          55px;
    color:          #FFF;
    background:     #222D32;
    /*background:     #131e23;*/
    overflow:       hidden;
}
div.nModule > div
{
    height:         40px;
    margin-top:     15px;
    font-weight:    bold;
    font-size:      12px;
    line-height:    17px;
}
div.nModule span
{
    font-size:      12px;
    letter-spacing: -1px;
    position:relative;
    left:-2px;
}
div.nModule > div > span > small
{
    font-size:      11px;
    letter-spacing: -1px;
}
div.nModule > div > small
{
    font-size:      10px;
    display:        block;
}

/*apply different styles on module center title if wrpped inside small tags*/
div.nModule > span > small:nth-child(1)
{
    position:relative;
    top:10px;
    font-size:96%;
    left:-2px;
}
div.nModule > span > small:nth-child(2)
{
    position:relative;
    top:3px;
    font-size:96%;
    left:1px;
}
div.nModule > span > small:nth-child(2)::before
{
    content: "\000A";
}




canvas.s-pie
{
    margin-top:6px;
}


/*======ABSOULTE POSITIONED METER BLOCKS======*/
div.mod-top-left
{
    width:          39px;
    height:         22px;
    font-size:      9px;
    line-height:    22px;
    position:       absolute;
    top:            3px;
    left:           0;
    text-align:     left;
    padding-left:   3px;
}
div.mod-top-right
{
    width:          128px;
    height:         22px;
    position:       absolute;
    top:            3px;
    left:           36px;
    font-size:      9px;
    line-height:    22px;
}
div.mod-bottom-left
{
    width:          39px;
    height:         22px;
    font-size:      9px;
    /*line-height:    22px;*/
    position:       absolute;
    bottom:         3px;
    left:           0;
    text-align:     left;
    padding-left:   3px;
}
div.mod-bottom-right
{
    width:          128px;
    height:         22px;
    position:       absolute;
    bottom:         3px;
    left:           36px;
    z-index:        100;
    font-size:      9px;
    line-height:    22px;
}

div.top-meter-back-double
{
    width:          296px;
    height:         3px;
    background:     #374850;
    position:       absolute;
    left:           36px;
    bottom:         22px;
}
div.top-meter-back-large
{
    width:          399px;
    height:         3px;
    background:     #374850;
    position:       absolute;
    left:           36px;
    bottom:         22px;
}


div.top-meter-front
{
    width:          73px;
    height:         3px;
    background:     #FDA921;
    position:       absolute;
    left:           36px;
    bottom:         22px;
}

div.bottom-meter-back-double
{
    width:          296px;
    height:         3px;
    background:     #374850;
    position:       absolute;
    left:           36px;
    bottom:         7px;
}
div.bottom-meter-back-large
{
    width:          399px;
    height:         3px;
    background:     #374850;
    position:       absolute;
    left:           36px;
    bottom:         7px;
}

div.bottom-meter-front
{
    width:          73px;
    height:         3px;
    background:     #FDA921;
    position:       absolute;
    left:           36px;
    bottom:         7px;
}

.asc
{
    will-change: width;
}
.desc
{
    will-change: width;
}

.mPeakTop.second
{
    top:3px;
}
.mPeakBottom.second
{    
    top:18px;
}

/*DOUBLE-METER STYLE MODULES SCALE HELPERS*/
div.dbm-helper{position:absolute;width:3px;height:3px;background-color:#FFF;opacity:.75;z-index:900;}
div.dbm-helper.top{top:33px;}
div.dbm-helper.btm{top:48px;}
div.dbm-helper.top_s{top:3px;}
div.dbm-helper.btm_s{top:18px;}
div.dbm-helper._1{left:36px;}
div.dbm-helper._2{left:52px;}
div.dbm-helper._3{left:84px;}
div.dbm-helper._4{left:116px;}
div.dbm-helper._5{left:144px;}
div.dbm-helper._6{left:172px;}
div.dbm-helper._7{left:200px;}
div.dbm-helper._8{left:228px;}
div.dbm-helper._9{left:256px;}
div.dbm-helper._9_1{left:284px;}
div.dbm-helper._10{left:308px;}
div.dbm-helper._11{left:332px;}

div.dbm-helper._01{left:52px;}
div.dbm-helper._02{left:80px;}
div.dbm-helper._03{left:108px;}
div.dbm-helper._04{left:136px;}
div.dbm-helper._05{left:164px;}
div.dbm-helper._06{left:192px;}
div.dbm-helper._07{left:220px;}
div.dbm-helper._08{left:248px;}
div.dbm-helper._09{left:276px;}
div.dbm-helper._010{left:304px;}
div.dbm-helper._011{left:332px;}

/*ACTIVATE ANIMATION-TRANSITIONS ONLY FOR LARGE SCREENS*/
@media (min-width: 1400px){
    .asc
    {
        -ms-transition:     width ease-out 0.25s;
        -moz-transition:    width ease-out 0.25s;
        -webkit-transition: width ease-out 0.25s;
        transition:         width ease-out 0.25s;
    }
    .desc
    {
        -ms-transition:     width ease-out 3.5s;
        -moz-transition:    width ease-out 3.5s;
        -webkit-transition: width ease-out 3.5s;
        transition:         width ease-out 3.5s;
    }

    .mPeakTop
    {
        position:absolute;top:33px;left:37px;width:4px;height:3px;background-color:red;opacity:.75;z-index:950;
        -ms-transition:     left ease 0.25s;
        -moz-transition:    left ease 0.25s;
        -webkit-transition: left ease 0.25s;
        transition:         left ease 0.25s;
    }
    .mPeakBottom
    {
        -ms-transition:     left ease 0.25s;
        -moz-transition:    left ease 0.25s;
        -webkit-transition: left ease 0.25s;
        transition:         left ease 0.25s;
    }

    div.left-meter-front
    {
        -ms-transition:             all ease 0.25s;
        -moz-transition:            all ease 0.25s;
        -webkit-transition:         all ease 0.25s;
        transition:                 all ease 0.25s;
    }   

    div.right-meter-front
    {
        -ms-transition:             all ease 0.25s;
        -moz-transition:            all ease 0.25s;
        -webkit-transition:         all ease 0.25s;
        transition:                 all ease 0.25s;
    }

    .metFront
    {
        transition:width ease 0.6s;
    }

    div.c-bar
    {
        -webkit-transition: height ease-in-out 0.5s;
        transition:         height ease-in-out 0.5s;
    }  
}

.mPeakTop
{
    position:absolute;top:33px;left:37px;width:4px;height:3px;background-color:red;opacity:.75;z-index:950;
    will-change:    left;
}
.mPeakBottom
{
    position:absolute;top:48px;left:37px;width:4px;height:3px;background-color:red;opacity:.75;z-index:950;
    will-change:    left;
}

.mPeakLeft
{
    position:absolute;bottom:5px;right:22px;width:2px;height:4px;background-color:red;opacity:.8;z-index:900;
}
.mPeakRight
{
    position:absolute;bottom:5px;right:17px;width:2px;height:4px;background-color:red;opacity:.8;z-index:900;
}

div.left-meter-back
{
    position:       absolute;
    right:          21px;
    bottom:         4px;
    width:          3px;
    height:         48px;
    background:     #374850;
}   

div.right-meter-back
{
    position:       absolute;
    right:          16px;
    bottom:         4px;
    width:          3px;
    height:         48px;
    background:     #374850;
}

div.left-meter-front
{
    position:       absolute;
    right:          21px;
    bottom:         4px;
    width:          3px;
    height:         25px;
    background:     #FDA921;
}   

div.right-meter-front
{
    position:       absolute;
    right:          16px;
    bottom:         4px;
    width:          3px;
    height:         25px;
    background:     #FDA921;
}

div.mod-top-group
{
    width:          9px;
    height:         22px;
    font-size:      9px;
    line-height:    22px;
    position:       absolute;
    top:            3px;
    text-align:     left;
    padding-left:   2px;
}
div.mod-top-cnv
{
    width:          51px;
    height:         22px;
    position:       absolute;
    top:            3px;
    font-size:      9px;
    line-height:    22px;
}

div.mod-bottom-group
{
    width:          9px;
    height:         22px;
    font-size:      9px;
    line-height:    22px;
    position:       absolute;
    bottom:         3px;
    text-align:     left;
    padding-left:   3px;
}
div.mod-bottom-cnv
{
    width:          51px;
    height:         22px;
    position:       absolute;
    bottom:         3px;
    z-index:        100;
    font-size:      9px;
    line-height:    22px;
}

/*sixed style*/
div.cnvpos_1{left:3px;}
div.cnvpos_2{left:60px !important;}
div.cnvpos_3{left:117px !important;}

/*======ABSOULTE POSITIONED METER BLOCKS======*/


/*led-status default colors*/
.l-ON{color:#FDA921 !important;}
.l-MID{color:#FFF;border:1px solid #FFF !important;}
.l-OFF{color:#374850 !important;}

.l-ON-w{color:#FFF !important;}
.l-OFF-b{color:#211C20 !important;}
.l-RED{color:#CD1214 !important;border:1px solid #CD1214 !important;}
.l-RED-noBrd{color:#CD1214 !important;border:none;}

div.modTag
{
    min-width:              22px;
    border-radius:          2px;
    -webkit-border-radius:  2px;
    float:                  right;
    margin-left:            4px;
    text-align:             center;
    font-size:              9px;
    line-height:            9px;
    padding-left:           1px;
    padding-right:          1px;
    padding-top:            2px;
    padding-bottom:         3px;
}

div.modTag.inline
{
    float:          left;
    font-size:      9px;
    padding-left:   2px;
    padding-right:  2px;
}
@-moz-document url-prefix() 
{ 
    div.modTag.inline
    {
        float:          left;
        font-size:      9px;
        padding-left:   1px;
        padding-right:  1px;
    }
}

div.modTag.l-ON
{
    border:         1px solid #FDA921;
}
div.modTag.l-OFF
{
    border:         1px solid #374850;
}
div.modTag.large
{
    min-width:      34px !important;
}
div.modTag.small
{
    height:                 12px;
    font-size:              8.5px;
    line-height:            7px;
    padding:                0;
    padding-top:            2px;
    margin-left:            0px;
    margin-right:           3px;
    margin-bottom:          2px;
    padding-left:           1px;
    padding-right:          1px;
    float:                  left;
}
div.modTag.block
{
    float:          none;
    clear:          both;
    margin-right:   0px;
    min-width:      30px;
}
div.modTag.small.fixed
{
    width:          36px;
}

.modTag-hidden
{
    visibility:  hidden;
    height:      10px !important;
}


div.modIco
{
    width:                  20px;
    height:                 20px;
    margin:                 auto;
    border:                 none;
    border-radius:          3px;
    background-image:       url('/app/custom/assets/img/mod_ico_ON.png');
    background-repeat:      no-repeat;
}
div.modIco.OFF
{
    background-image:       url('/app/custom/assets/img/mod_ico_OFF.png');
}
div.modIco.icoMail
{
    background-position:    -6px -15px;
    width:                  27px;
}
div.modIco.icoLogs
{
    background-position:    -37px -15px;
    width:                  27px;
}
div.modIco.icoExtended
{
    background-position:    -71px -14px;
    width:                  27px;
    height:                 36px;
    margin-left:            0px;
    margin-top:             1px !important;
}

div.modIco.icoScheduler
{
    background-position:    -108px -14px;
    width:                  20px;
}
div.modIco.icoAlarm
{
    background-position:    -133px -14px;
    width:                  30px;
}
div.modIco.icoClock
{
    background-position:    -269px -14px;
    width:                  26px;
}
div.modIco.icoNTP
{
    background-position:    -414px -14px;
    width:                  26px;
}
div.modIco.icoRSS
{
    background-position:    -167px -14px;
    width:                  24px;
}
div.modIco.icoRest
{
    background-position:    -193px -14px;
    width:                  24px;
}
div.modIco.icoSamba
{
    background-position:    -219px -16px;
    width:                  24px;
}
div.modIco.icoGPS
{
    background-position:    -244px -15px;
    width:                  24px;
}

div.modIco.icoCPU
{
    background-position:    -298px -7px;
    width:                  36px;
    height:                 36px;
    margin-top:             -6px;
}
div.modIco.icoRAM
{
    background-position:    -341px -13px;
    width:                  36px;
    height:                 36px;
}
div.modIco.icoTEMP
{
    background-position:    -380px -9px;
    width:                  30px;
    height:                 30px;
}
div.modIco.icoRDS
{
    background-position:    -420px -14px;
    width:                  26px;
}


@media screen and (-webkit-min-device-pixel-ratio:0) 
{
    div.modTag
    {
        padding-top:    3px;
    }
}

div.in-mod
{
    position:       absolute;
    border:         1px solid #222D32;
    width:          83px;
    height:         27px;
    overflow:       hidden;
    line-height:    27px;
    color:          #FDA921;
    text-align:     left;
    font-size:      9px;
    text-transform: uppercase;
}
div.in-mod.sect-1
{
    top:0;
    left:0;   
}
div.in-mod.sect-2
{
    top:0;
    right:0px;
}
div.in-mod.sect-3
{
    top:28px;
    left:0;
}
div.in-mod.sect-4
{
    top:28px;
    right:0px;
}

div.in-mod > .modIco
{
    float:          left;
    margin-top:     3px;
    margin-right:   2px;
}


div.inner-leds
{
    position:       absolute;
    border:         1px solid transparent;
    height:         27px;
    text-align:     left;
    line-height:    27px;
}
div.inner-leds span
{
    float:          left;
    margin-right:   4px;
    width:          27px;
}
div.inner-leds i
{
    float:              left;
    font-size:          15px;
    margin-top:         5px;
    margin-right:       3px;
    color:              #374850;
}
div.inner-leds i.big
{
    font-size:          18px;
    margin-top:         4px;
    margin-left:        3px;
}
div.inner-leds small
{
    margin-left:        -12px;
    float:              left;
    color:              #211C20;
}
div.inner-leds i.big + small
{
    margin-left:        -13.5px;
    font-size:          10px;
}

div.vert-leds
{
    position:           absolute;
    top:                0;
    left:               0;
    width:              15px;
    height:             55px;
    border:             1px solid transparent;
    color:              #374850;
}
div.vert-leds-nums
{
    position:           absolute;
    top:                -1px;
    left:               -15px;
    width:              15px;
    height:             55px;
    border:             1px solid transparent;
    color:              #211C20;
    overflow:           visible;
    z-index:            1000;
}
div.vert-leds-nums > small
{
    margin-right:       -30.5px;
    display:            block;
}


div.charts-info-block span
{
    display:    inline-block;
    width:      100%;
}


div.fault-warning > i
{
    font-size:      13px;
    margin-left:    10px;
    border-width:   2px;
    border-style:   solid;
    border-radius:  50%;
    height:         19px;
    padding-top:    2px;
    width:          19px;
    padding-right:  0px;
}


/*double custom meters rules*/

div.cMet
{
    position:absolute;height:2px;
}

.metBack
{
    width:47px;background-color:#374850;
}
.metFront
{
    width:0px;background-color:#FDA921;
    will-change: width;
}

.topLeft01
{
    top:9px;left:114px;
}
.topLeft02
{
    top:14px;left:114px;
}
.bottomLeft01
{
    bottom:11px;left:114px;
}
.bottomLeft02
{
    bottom:6px;left:114px;
}

.topRight01
{
    top:9px;left:283px;
}
.topRight02
{
    top:14px;left:283px;
}
.bottomRight01
{
    bottom:11px;left:283px;
}
.bottomRight02
{
    bottom:6px;left:283px;
}

.msh
{
    width:2px;background-color:#CCC;opacity:.7;
}
.msh.l2
{
    left:129px;
}
.msh.l3
{
    left:144px;
}
.msh.l4
{
    left:159px;
}
.msh.r2
{
    left:298px;
}
.msh.r3
{
    left:313px;
}
.msh.r4
{
    left:328px;
}

.metPeak
{
    width:4px !important;background-color:red;opacity:.8;z-index:900;
    /*for test only*/
    /*
    transition:all ease 0.6s;
    */
}

/*double custom meters rules*/


/*BAR-CHARTS RULES*/
        div.charts-bars
        {
            padding:0;
            margin:0;
            font-size:9px;
            height:57px;
        }

        div.bars-holder
        {
            border:         1px solid transparent;
            height:         1px;
            height:         100%;
            width:          315px;
            position:       absolute;
            bottom:         0px;
            left:           20px;
            overflow:       visible;
        }

        div.c-bar
        {
            width:              20px;
            height:             20px;
            background-color:   #FFF;
            position:           absolute;
            bottom:             3px;
            left:               0px;
            will-change:        height;
        }

        div.charts-def
        {
            padding:0;
            margin:0;
            font-size:9px;
            height:57px;
            margin-top:-2px;
            padding-left:32px;
            line-height:11px;
        }
        div.charts-def div
        {
            padding:0;
            margin:0;
            text-align:left;
        }
        span.c-def
        {
            color:#FFF;
            display:inline-block;
        }
        span.c-def.left
        {
            /*width:33px;*/
            width:64px;
        }
        span.c-def.right
        {
            /*width:63px;*/
        }
        span.c-def-val
        {
            color:#FDA921;
            display:inline-block;
            width:26px;
            text-align:right;
        }
        span.c-def-val-unit
        {
            color:#FDA921;
            display:inline-block;
            width:18px;
        }
/*BAR-CHARTS RULES*/



/*BREAK CENELEC TITLES*/
    .strBreak
    {
        line-height: 10px !important;
    }
/*BREAK CENELEC TITLES*/



/*AUDIO VOLUME SLIDER RULES*/
    div.volSlider {
        position: absolute;
        top: 39px;
        left: 33px;
    }

    div.volSlider > input[type=range] {
        -webkit-appearance: none;
        margin: 0;
        width: 100%;
        outline: none;
        opacity: .7;
        -webkit-opacity: .7;
        -moz-opacity: .7;
      }
    div.volSlider > input[type=range]:hover {
        outline: none;
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;  
      }
    div.volSlider > input[type=range]:focus {
        outline: none;
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;  
    }
    div.volSlider > input[type=range]:active {
        outline: none;
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;  
    }

    div.volSlider.disabled > input[type=range]:hover {
        opacity: .7;
        -webkit-opacity: .7;
        -moz-opacity: .7;  
      }
    div.volSlider.disabled > input[type=range]:focus {
        opacity: .7;
        -webkit-opacity: .7;
        -moz-opacity: .7;  
    }
    div.volSlider.disabled > input[type=range]:active {
        opacity: .7;
        -webkit-opacity: .7;
        -moz-opacity: .7;  
    }

    /*webkit fixes*/
    div.volSlider > input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #87a0aa;
        border-radius: 25px;
        border: 1px solid #4a6068;
    }
    div.volSlider > input[type=range]::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        border: 1px solid #ca7d02;
        height: 20px;
        width: 9px;
        border-radius: 7px;
        background: #fda921;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -7.8px;
    }
    div.volSlider > input[type=range]:focus::-webkit-slider-runnable-track {
        background: #87a0aa;
    }   

    div.volSlider.disabled > input[type=range]::-webkit-slider-runnable-track
    {
        cursor: not-allowed !important;
        background: #ccc;
        border: 1px solid #555;
        opacity: .6 !important;
        -webkit-opacity: .6 !important;
    }
    div.volSlider.disabled > input[type=range]::-webkit-slider-thumb
    {
        cursor: not-allowed !important;
        background: #ccc;
        border: 1px solid #555;
        opacity: .6 !important;
        -webkit-opacity: .6 !important;
    }    

    /*mozilla fixes*/
    div.volSlider > input[type=range]::-moz-focus-outer {
        border: 0;
    }
    div.volSlider > input[type=range]::-moz-range-track {
        width: 100%;
        height: 6px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #87a0aa;
        border-radius: 25px;
        border: 1px solid #4a6068;
    }
    div.volSlider > input[type=range]::-moz-range-thumb {
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        border: 1px solid #ca7d02;
        height: 20px;
        width: 9px;
        border-radius: 7px;
        background: #fda921;
        cursor: pointer;
    }   


    div.volSlider.disabled > input[type=range]::-moz-range-track {
        background: #ccc;
        border: 1px solid #555;
        cursor: not-allowed;
    }
    div.volSlider.disabled > input[type=range]::-moz-range-thumb {
        background: #ccc;
        border: 1px solid #555;
        cursor: not-allowed;
    }

    /*edge fixes*/
    div.volSlider > input[type=range]::-ms-track 
    {
        background: transparent;
        border-color: transparent;
        color: transparent;

        width: 100%;
        height: 6px;
        cursor: pointer;
        animate: 0.2s;
        
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #87a0aa;
        border-radius: 25px;
        border: 1px solid #4a6068;

        cursor: pointer !important;
    }
    
    div.volSlider > input[type=range]::-ms-fill-lower 
    {
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #87a0aa;
        border-radius: 25px;
        border: 0px solid #4a6068;
        cursor: pointer !important;
    }

    div.volSlider > input[type=range]::-ms-fill-upper
    {     
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #87a0aa;
        border-radius: 25px;
        border: 0px solid #4a6068;
        cursor: pointer !important;
    }

    div.volSlider > input[type=range]::-ms-thumb 
    {      
        margin-top: 0px !important;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        border: 1px solid #ca7d02;
        height: 16px !important;
        width: 5px;
        border-radius: 7px;
        background: #fda921;
        cursor: pointer !important;
    }    
/*AUDIO VOLUME SLIDER RULES--END*/


/*AUDIO-MONITOR STYLE MODULES SCALE HELPERS*/
div.am-helper{position:absolute;width:3px;height:3px;background-color:#FFF;opacity:.75;z-index:900;}
div.am-helper.top{top:32px;}
div.am-helper.btm{top:47px;}
div.am-helper._1{left:36px;}
div.am-helper._2{left:52px;}
div.am-helper._3{left:76px;}
div.am-helper._4{left:116px;}
div.am-helper._5{left:156px;}
div.am-helper._6{left:196px;}
div.am-helper._7{left:236px;}
div.am-helper._8{left:276px;}
div.am-helper._9{left:316px;}
div.am-helper._9_1{left:335px;}
div.am-helper._10{left:356px;}
div.am-helper._11{left:396px;}
div.am-helper._12{left:436px;}

/*encoder player button rules*/
.strPlay
{
    cursor:pointer;
    padding:2px;
    font-size:11px;
    font-weight:bold;
    width:51px;
    margin-top:-5px;
    margin-left:6px;
    background-color:#374750 !important;
    border:1px solid #FDA921 !important;
}
.strPlay:hover
{
    background-color: #2e3c44 !important;
    border-color: #b1720b !important;
}
.strPlayDis
{
    cursor:not-allowed !important;
    pointer-events:auto !important;
    background-color: #2e3c44 !important;
    border-color: #b1720b !important;
}

/*INFO_TEXT RIGHT MODULE*/
div.info-r-txt > div, div.info-r-txt > canvas
{
    position:absolute;
}
div.info-r-txt > div:nth-child(1)
{
    top:9px;left:0px;
}
div.info-r-txt > div:nth-child(2)
{
    top:36px;left:0px;
}
div.info-r-txt > canvas:nth-child(3)
{
    top:4px;left:39px;
}
div.info-r-txt > canvas:nth-child(4)
{
    top:31px;left:39px;
}

/*COMPRESSOR VIEWS*/
.vu_ll
{
    position: absolute;
    left: 0px;
    top: -2px;
    width: 12px;
    border: none;
    height: 100%;
}
.vu_ll > i
{
    display: block;
    margin-top: 8px;
}

.spin_load 
{
    color: #FFF;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 2000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 2000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin { 
    from { 
        -ms-transform: rotate(0deg); 
    } to { 
        -ms-transform: rotate(360deg); 
    }
}
@-moz-keyframes spin { 
    from { 
        -moz-transform: rotate(0deg); 
    } to { 
        -moz-transform: rotate(360deg); 
    }
}
@-webkit-keyframes spin { 
    from { 
        -webkit-transform: rotate(0deg); 
    } to { 
        -webkit-transform: rotate(360deg); 
    }
}
@keyframes spin { 
    from { 
        transform: rotate(0deg); 
    } to { 
        transform: rotate(360deg); 
    }
}

.spin_load.off { display: none; }
.spin_load.on  { display: inline-block; }

/*mode module*/
.m-mod-tag
{
    display: inline-block;
    padding: 1px;
    line-height: 10px;
    border: 1px solid #323c42;
    background-color: #323c42;
    color: #131e23;
    border-radius: 3px;
    margin: 0 1px;
    text-shadow: none !important;
    -webkit-transition:     all ease 0.25s;
    transition:             all ease 0.25s;
}
.m-mod-tag.ON
{
    border: 1px solid #fda921;
    background-color: #fda921;
}
.m-mod-tag.ALARM
{
    border: 1px solid #e12c32;
    background-color: #e12c32;
}