﻿/* Menu e páginas de Acessibilidade para todas Hípicas - OS 31319*/

html {
    overflow-x: auto;
}

:root {
    --zoom-padrao: 100%;
    --zoom-mais10: calc(var(--zoom-padrao) + 10%);
    --zoom-mais30: calc(var(--zoom-mais10) + 20%);
    --zoom-mais50: calc(var(--zoom-mais30) + 20%);
    --zoom-mais70: calc(var(--zoom-mais50) + 20%);
    --zoom-menos10: calc(var(--zoom-padrao) - 10%);
    --zoom-menos30: calc(var(--zoom-menos10) - 20%);
    --zoom-menos50: calc(var(--zoom-menos30) - 20%);
    --zoom-menos70: calc(var(--zoom-menos50) - 20%);
    --circle-stroke: #000;
    --bg-container-atalho-teclado: #000;
}

body div[vw] {
    top: 65%;
}
body .vw-links .vw-tooltip__item {
    z-index: 9999;
}
.acessibilidade {
    width: fit-content;
    height: 40px;
    margin-top: -3px !important;
    float: right;
}

    .acessibilidade a:hover, .acessibilidade a:focus {
        text-decoration: none;
        fill: var(--cor-svg-acessibilidade);

    }

    .acessibilidade svg {
        margin: 0 3px;
        fill: var(--cor-svg-acessibilidade);
        cursor: pointer;
        transform: scale(1.0);
        transition-duration: 0.3s;
    }

        .acessibilidade svg:hover, .acessibilidade svg:active {
            fill: var(--cor-svg-acessibilidade-hover);
            transform: scale(1.2);
            transition-duration: 0.3s;
        }

        .acessibilidade svg g #Ellipse_1 {
            stroke: var(--cor-svg-acessibilidade);
        }

        .acessibilidade svg:hover g #Ellipse_1, .acessibilidade svg:active g #Ellipse_1 {
            stroke: var(--cor-svg-acessibilidade-hover);
        }


.zoom-mais10, .zoom-mais30, .zoom-mais50, .zoom-mais70 {
    overflow-x: auto;
}

.zoom-mais10 {
    zoom: var(--zoom-mais10);
}

.zoom-mais30 {
    zoom: var(--zoom-mais30);
}

.zoom-mais50 {
    zoom: var(--zoom-mais50);
}

.zoom-mais70 {
    zoom: var(--zoom-mais70);
}


.zoom-menos10 {
    zoom: var(--zoom-menos10);
}

.zoom-menos30 {
    zoom: var(--zoom-menos30);
}

.zoom-menos50 {
    zoom: var(--zoom-menos50);
}

.zoom-menos70 {
    zoom: var(--zoom-menos70);
}

.zoom-menos70 .menu-container .menu > .navbar a {
    font-size: 14px;
}

.contrastePretoBranco {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%)
}

.contrasteCoresInvertidas {
    filter: invert(1);
}



.col-md-4.col-sm-6.col-lg-5.col-xs-12.naologado.pull-right {
    width: fit-content;
}

#breadcrumb ul,
body.zoom-mais10 #breadcrumb ul, body.zoom-menos10 #breadcrumb ul,
body.zoom-menos30 #breadcrumb ul, body.zoom-menos50 #breadcrumb ul { /* consertar bug gerado no breadcrumb no zoom-mais10 apenas para o @media especificado */
    height: 24px;
    width: max-content;
    float: inherit;
}

body.zoom-menos70 #breadcrumb ul {
    height: 30px;
    width: max-content;
    float: inherit;
}

.tabela-reponsiva {
    overflow-x: auto;
}


/* INÍCIO página Acessibilidade */

.container.container-acessibilidade, .container.container-mapa {
    background: #fff;
}

.acessibilidade-titulo {
    color: #999;
    padding-bottom: 5px;
    border-bottom: 1px solid #999;
}

.cabecalho-container-atalhos {
    background: #f5f6f8;
    display: flex;
    margin: 15px 0;
    align-items: center;
}

    .cabecalho-container-atalhos h4 {
        color: #333;
        margin: 0 0 0 10px;
        line-height: 26px;
    }

.container-atalho-teclado {
    background: var(--bg-container-atalho-teclado);
    width: min-content;
    padding: 5px;
    border-radius: 5px;
}

.container-atalhos {
    background: #f5f6f8;
    margin: 15px 0;
    padding: 20px;
}

    .container-atalhos .container-teclas {
        width: fit-content;
        margin: 0 auto;
    }

        .container-atalhos .container-teclas .row {
            height: 40px;
            display: flex;
            margin: 10px 0 !important;
        }

            .container-atalhos .container-teclas .row .div-teclas {
                border-radius: 5px;
                border: 1px solid #ccc;
                background: #fff;
                padding: 10px 15px;
            }

            .container-atalhos .container-teclas .row .div-operadores {
                font-size: 20px;
                padding: 10px 15px;
                line-height: 15px;
                text-align: center;
            }

.descricao-teclas-acessbilidade {
    align-self: center;
    font-size: 14px;
}

.table-navegadores {
    margin: 15px 0;
}

    .table-navegadores thead {
        background: #f5f6f8;
    }

.container.container-acessibilidade table ul {
    padding: 7px 20px;
}

    .container.container-acessibilidade table ul li strong.destaque {
        color: #06c;
    }

ul.decretos-acessibilidade, ul.lista-navegadores {
    list-style: none;
}

ul.decretos-acessibilidade {
    margin: 0 5px;
}

.table-navegadores td ul.lista-navegadores {
    padding: 0 5px;
}

    .table-navegadores td ul.lista-navegadores li {
        width: max-content;
        margin: 5px;
    }

ul.decretos-acessibilidade li, ul.lista-navegadores li {
    margin-bottom: 10px;
}

    ul.lista-navegadores li svg {
        vertical-align: bottom;
    }

ul.decretos-acessibilidade li {
}

    ul.decretos-acessibilidade li svg {
        margin-left: 4px;
    }

    ul.decretos-acessibilidade li span {
        background: #eee;
        padding: 5px;
        margin: 0 18px 0 2px;
        border-radius: 15px;
    }

@media only screen and (max-width: 767px) {

    .container-atalhos .container-teclas .row .div-operadores {
        padding: 10px 5px;
    }
}

@media only screen and (max-width: 560px) {

    .container-atalhos .container-teclas .row {
        display: table-row;
    }

        .container-atalhos .container-teclas .row .div-teclas {
            text-align: center;
        }

    .descricao-teclas-acessbilidade {
        margin-bottom: 40px;
        text-align: center;
    }
}

@media only screen and (max-width: 280px) {

    .acessibilidade {
        zoom: 0.95;
        margin: 0 45px 0 0;
    }
}

/* FIM página Acessibilidade */


/* INÍCIO página Mapa do Site */

.container-mapa ul {
    list-style: none;
}

ul.menu-mapa {
    padding: 15px 30px;
}

    ul.menu-mapa > li:first-child {
        list-style: disc;
        font-size: 16px;
    }

        ul.menu-mapa > li:first-child a {
            color: #333;
        }

ul.inside {
    list-style: none;
    margin: 5px 0 0 20px;
    font-size: 14px;
}

    ul.inside ul {
        margin: 0 0 0 30px;
    }

/* FIM página Mapa do Site */


@media only screen and (min-width: 1200px) {
    html {
        min-width: fit-content;
    }
}

@media only screen and (max-width: 992px) {

    .acessibilidade {
        margin: 0 60px 0 0;
        position: relative;
        margin-top: 5px !important;
    }
 
    body.zoom-mais30 #main, body.zoom-mais50 #main,
    body.zoom-mais70 #main {
        margin-top: 100px;
    }

    .zoom-mais70 .clock {
        left: 5px;
    }
}

@media only screen and (max-width: 700px) {

    body.zoom-mais50 .col-sm-6.col-xs-12.dataHora,
    body.zoom-mais70 .col-sm-6.col-xs-12.dataHora {
        width: fit-content;
        visibility: hidden;
    }
}

@media only screen and (max-width: 500px) {

    .col-sm-6.col-xs-12.dataHora {
        width: fit-content;
        visibility: hidden;
    }
}
