body {
    /*background-image: linear-gradient(#ffffff, #ccccff);*/
    background: url(../img/Fundo.jpg) center center no-repeat fixed !important;
    background-size: cover !important;
    font-family: open sans,'sans serif' !important;
}
#contain {
    background: rgba(255,255,255,.4);
    height: 60%;
}

.panzoom {
    -webkit-transition: .1s !important;
}

/*------------BOTÕES----------------*/
.zoom-in, .zoom-out, .reset {
    background: white;
    opacity: 0.5;
    color: black;
}
.zoom-in:hover, .zoom-out:hover, .reset:hover {
    background: white;
    opacity:  0.5;
    color: black;
}
.zoom-in:active, .zoom-out:active, .reset:active {
    background: black;
    opacity:  0.5;
    color: white;
}
.zoom-in:focus, .zoom-out:focus, .reset:focus {
    background: black;
    opacity: 0.5;
    color: white;
}
.labels
{
    font-size:16px;     
    color: white;

}
.labels2
{
    font-size: 14px;     
    color: white;

}
.css-combo {
    padding: 5px;
    font-size: 14px;
    border-width: 0px;
    border-color: #CCCCCC;
    background-color: #FFFFFF;
    color: #000000;
    border-style: solid;
    border-radius: 0px;
    box-shadow: 0px 0px 0px rgba(66,66,66,.75);
    text-shadow: undefined 0px 0px 5px px rgba(66,66,66,.75);
}

@-webkit-keyframes fadeIn 
{
    0% { opacity: 0; }
    100% { opacity: 1; } 
}
@-moz-keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1; }
}
@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.fadeIn {
    -webkit-animation: fadeIn 1s ease-in-out;
    -moz-animation: fadeIn 1s ease-in-out;
    -o-animation: fadeIn 1s ease-in-out;
    animation: fadeIn 1s ease-in-out;
}
/*------------INPUT RANGE----------------*/
input[type=range] {
    -webkit-appearance: none;
    /*margin: 10px 0;*/
    width: 100%;
    background: transparent;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000;
    background: white;
    border-radius: 14px;
    border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: none;
    height: 9px;
    width: 40px;
    border-radius: 0px;
    background: black;
    opacity: 0.7;
    cursor: pointer;
    -webkit-appearance: none;
    /*margin-top: 0.5px;*/
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #F5DEB3;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000;
    background: white;
    border-radius: 14px;
    border: 0px solid #000000;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px;
    height: 9px;
    width: 40px;
    border-radius: 12px;
    background: #000000;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 19px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #B0B0B0;
    border: 0px solid #000000;
    border-radius: 28px;
    box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
    background: #B0B0B0;
    border: 0px solid #000000;
    border-radius: 28px;
    box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #19A3FF;
    height: 18px;
    width: 40px;
    border-radius: 12px;
    background: #000000;
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: white;
}
input[type=range]:focus::-ms-fill-upper {
    background: white;
}
/*------------FIM ESTILO INPUT RANGE----------------*/
/* cores antigas
.txt-disponivel { color: #FFFFFF; } 
.txt-reservado { color: #F59100; }
.txt-vendido { color: #008000; } 
.txt-assinado { color: #4682B4; } 
.txt-indisponivel { color: #FF0000; } 
*/

/* ---- alteração feita pelo jão em 11/10/2018 ------
.disponivel { background-color: #FFFFFF; } /*White
.reservado { background-color: #FE940E; } /*Laranja
.vendido { background-color: #49D866; } /*Green
.assinado { background-color: #107AFD; } /*SteelBlue
.indisponivel { background-color: #FE3B30; } /*Red

.txt-disponivel { color: #FFFFFF; } /*White
.txt-reservado { color: #FE940E; } /*Laranja
.txt-vendido { color: #49D866; } /*Green
.txt-assinado { color: #107AFD; } /*SteelBlue
.txt-indisponivel { color: #FE3B30; } /*Red
*/

/* ---- alteração feita por rodrigo em 16/10/2018 ------ */
.disponivel { background-color: #FFFFFF; } /*branco*/
.reservado { background-color: #FF8800; } /*laranja*/
.vendido { background-color: #006400; } /*verde*/
.assinado { background-color: #0000EE; } /*azul*/
.indisponivel { background-color: #EE0000; } /*vermelho*/

.txt-disponivel { color: #FFFFFF; } /*branco*/
.txt-reservado { color: #FF8800; } /*laranja*/
.txt-vendido { color: #006400; } /*verde*/
.txt-assinado { color: #0000EE; } /*azul*/
.txt-indisponivel { color: #EE0000; } /*vermelho*/


.statusLote { 
    position: absolute;
    border-radius: 50%;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%;
/*    color: green;
    font-size: 5pt;*/
}

#textbox
{
    position: block;
    border-radius: 10px;
    opacity: 10%;
    align-items: left;
}

#legenda label {
    display: block;
    align-items: right;
    text-align: left;
    padding: 1;
    color: white;
    font-style:"Opensans";
    float: left;

}

.bola {
    display: block;
    height: 18px;
    width: 18px;
    border-radius: 20px;
    float: left;
}

/*------------CELULAR----------------*/
@media(max-width: 767px) {
    .statusLote {
        width:3px; 
        height:3px;
    }

    #legenda label {
        padding-left: 10%;
    }
}

/*------------TABLET VERTICAL----------------*/
@media(min-width: 768px) AND (max-width: 991px) {
    .statusLote {
        width:4px; 
        height:4px; 
    }
}

/*------------TABLET LANDSCAPE / MONITOR---------------*/
@media(min-width: 992px) AND (max-width: 1199px) {                
    .statusLote {
        width:6px; 
        height:6px; 
    }
}

/*------------MONITOR--------------*/
@media(min-width: 1200px) {
    .statusLote {
        width:9px; 
        height:9px;
        /*padding: 0 1px;*/
    }
}