@font-face {
    font-family: saira;
    src: url(../fonts/Saira-Regular.ttf)
}

body {
    margin: 0px;
    padding: 0px;
    background: #14282f;
    font-family: saira !important;
    /*background: #808080;*/
}

.cabecalho {
    color: #FFF;
    list-style: none;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 2px;
    float: center;
    height: 25px;
    /* border-bottom: 1px solid #0f9139;*/
    /*border-left: 1px solid #999;*/
    width: 100%;
    /*background: #0f9139;*/
    /* border-bottom: 1px solid #0f9139;*/
}

footer {
    list-style: none;
    margin: 0px;
    padding-left: 3px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
    height: 60px;
    position: fixed;
    vertical-align: bottom;
    border-left: 1px solid #999;
    width: 100%;
    background: #d1d1d1;
    background: -moz-linear-gradient(top, #d1d1d1 0%, #fefefe 0%, #dbdbdb 80%, #dbdbdb 85%, #dbdbdb 90%, #dbdbdb 95%, #e2e2e2 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #d1d1d1), color-stop(0%, #fefefe), color-stop(80%, #dbdbdb), color-stop(85%, #dbdbdb), color-stop(90%, #dbdbdb), color-stop(95%, #dbdbdb), color-stop(100%, #e2e2e2));
    background: -webkit-linear-gradient(top, #d1d1d1 0%, #fefefe 0%, #dbdbdb 80%, #dbdbdb 85%, #dbdbdb 90%, #dbdbdb 95%, #e2e2e2 100%);
    background: -o-linear-gradient(top, #d1d1d1 0%, #fefefe 0%, #dbdbdb 80%, #dbdbdb 85%, #dbdbdb 90%, #dbdbdb 95%, #e2e2e2 100%);
    background: -ms-linear-gradient(top, #d1d1d1 0%, #fefefe 0%, #dbdbdb 80%, #dbdbdb 85%, #dbdbdb 90%, #dbdbdb 95%, #e2e2e2 100%);
}

#status {
    float: left;
    margin-right: 10px;
    height: 40px;
    border: 1px solid #999;
    margin-top: 4px;
    padding-left: 1cm;
    padding-right: 1cm;
    color: #000;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #fff;
    font: bold;
    display: block;
    font-size: 14px;
    outline: none;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

#status.conectado {
    background: rgb(180, 227, 145);
    background: -moz-linear-gradient(top, rgba(180, 227, 145, 1) 0%, rgba(130, 226, 56, 1) 60%, rgba(97, 196, 25, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(180, 227, 145, 1) 0%, rgba(130, 226, 56, 1) 60%, rgba(97, 196, 25, 1) 100%);
    background: linear-gradient(to bottom, rgba(180, 227, 145, 1) 0%, rgba(130, 226, 56, 1) 60%, rgba(97, 196, 25, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#61c419', GradientType=0);
}

.dotBlack {
    height: 12px;
    width: 12px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: ping 2s ease-in-out infinite;
    animation: ping 2s ease-in-out infinite;
}

@-webkit-keyframes ping {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0.8;
    }
    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes ping {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0.8;
    }
    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0;
    }
}

#status.desconectado {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#febbbb+0,fe9090+29,ff5c5c+100 */
    background: rgb(254, 187, 187);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 29%, rgba(255, 92, 92, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 29%, rgba(255, 92, 92, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(254, 187, 187, 1) 0%, rgba(254, 144, 144, 1) 29%, rgba(255, 92, 92, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#febbbb', endColorstr='#ff5c5c', GradientType=0);
    /* IE6-9 */
}

.ativo {
    float: left;
    margin-right: 10px;
    height: 60px;
    line-height: 31px;
    border: 1px solid #999;
    margin-bottom: -1px;
    margin-top: 2px;
    padding-left: 2cm;
    padding-right: 2cm;
    color: #000;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #fff;
    font: bold;
    display: block;
    font-size: 1.2em;
    outline: none;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b4e391+0,82e238+60,61c419+100 */
    background: rgb(180, 227, 145);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(180, 227, 145, 1) 0%, rgba(130, 226, 56, 1) 60%, rgba(97, 196, 25, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(180, 227, 145, 1) 0%, rgba(130, 226, 56, 1) 60%, rgba(97, 196, 25, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(180, 227, 145, 1) 0%, rgba(130, 226, 56, 1) 60%, rgba(97, 196, 25, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#61c419', GradientType=0);
    /* IE6-9 */
}

.ferramentas {
    float: left;
    margin-right: 10px;
    height: 30px;
    line-height: 31px;
    border: 1px solid #999;
    margin-bottom: -1px;
    margin-top: 2px;
    color: #000;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #fff;
    font: bold;
    display: block;
    font-size: 1.2em;
    outline: none;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.opcoes {
    float: right;
    margin-right: 10px;
    height: 35px;
    width: 160px;
    border: 1px solid #999;
    margin-top: 5px;
    color: #000;
    text-align: center;
    text-shadow: 1px 1px 1px #fff;
    vertical-align: middle;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.itensrodape {
    float: right;
    margin-right: 10px;
    height: 35px;
    width: 45px;
    margin-top: 5px;
    border: 1px solid #999;
    padding-top: 5px;
    text-align: center;
    vertical-align: middle;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.alarmes_alerta {
    animation: blinker 1s linear infinite;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f85032+0,f16f5c+1,f6290c+51,f02f17+71,e73827+100 */
    background: #f85032;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 1%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f85032 0%, #f16f5c 1%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f85032 0%, #f16f5c 1%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=0);
    /* IE6-9 */
    float: left;
    margin-right: 10px;
    height: 40px;
    border: 1px solid #999;
    margin-top: 4px;
    padding-left: 1cm;
    padding-right: 1cm;
    color: #000;
    font-size: 1em;
    outline: none;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.alerta_num {
    animation: blinker 1s linear infinite;
    color: rgb(255, 27, 46);
    font-size: 30px;
    padding-top: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px #ccc;
}

.alarme {
    float: left;
    vertical-align: middle;
    margin-right: 10px;
    height: 40px;
    border: 1px solid #999;
    margin-top: 4px;
    padding-left: 1cm;
    padding-right: 1cm;
    color: #000;
    text-shadow: 1px 1px 1px #fff;
    font: bold;
    font-size: 1em;
    outline: none;
    background: linear-gradient(90deg, rgba(170, 165, 9, 1) 0%, rgba(243, 240, 41, 1) 61%);
    /* IE6-9 */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.alarmeText {
    padding-top: 10px;
    vertical-align: middle !important;
}

.carvtech {
    float: left;
    vertical-align: middle;
    margin-right: 10px;
    height: 40px;
    margin-top: 4px;
    padding-left: 5px;
    padding-right: 5px;
}

.btnlateral {
    background: linear-gradient(90deg, rgba(17, 36, 32, 1) 34%, rgba(33, 56, 48, 1) 61%);
    border: 2px inset rgba(33, 56, 48, 1) !important;
    width: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    color: #fff;
    height: 50px;
    box-shadow: 1px 1px 1px black;
    margin-bottom: 5px;
    font-family: saira;
}