﻿/* 
1. Geral
2. Layout
    2.1 Navegação Menu Tópicos
    2.2 Navegação entre páginas
    2.3 Flex Grid
3. Elementos
    3.1 Video Interprete
    3.2 Figuras (imagens)
    3.3 Icone
    3.4 Código
    3.5 Destaque
    3.6 Box Info
    3.7 Exemplos
    3.8 Pagination / division
    3.9 Video conteudo
4. Abas
    4.1 Páginas 
5. Conteudo
    5.1 Introdução
    5.2 Titulos
    5.3 Definition list
    5.4 Lista de termos
    5.5 Tabela
    5.6 Lista como figura
6. Accessibilidade
    6.1 barra de accessibilidade mobile
    6.2 Auto-contraste
        6.1.1 Contraste Menu Tópico

7. mobile
    7.1 mostrar/ocultar plataforma/mobile

*/

/************************/
/******* 1. GERAL *******/
/************************/

* {
    margin: 0px;
    padding: 0px;
}
table{
    border-spacing: 1px !important;
}

.clearfix:after {     content:".";     display:block;     height:0;     clear:both;     visibility: hidden; } .clearfix {display:inline;} * html .clearfix {height: 1%;} .clearfix {display: block;}

body {
    background-color: #f2f2f2;
}

/* Tipografia / leitura */
.maxWidth { 
	/* max-width: 615px; */
	margin-left:auto;
	margin-right:auto;}
	/*.maxWidth code { text-align:center; } */
    .maxWidth .codeSmall { text-align:center; }
	
.max-height-400 { max-height:400px; overflow:auto;}
.max-height-500 { max-height:500px; overflow:auto;}
.max-height-600 {max-height:600px; overflow:auto;}

.max-width-500 { max-width:500px; margin-left:auto;margin-right:auto;}
.max-width-800 { max-width:800px; margin-left:auto;margin-right:auto;}

p {
	text-indent:20px;
	/* max-width:615px; */
	margin-left:auto;
	margin-right:auto;
	/* line-height:21px; */
	margin-bottom:16px;
    text-align: justify;
	}

h1, h2, h3, h4, h5 {
    margin-left: 1%;
    margin-right: 1%;
    color: #007DB8;
    font-weight: bold;
}


.btn { font-size: 100%; }

li.pagina  a:link, li.pagina  a:visited { color:blue;}
	
li.pagina  a:link, li.pagina  a:visited { color:blue;}

ul li { margin-bottom:5px;}
  ul li.pagina { margin-bottom:inherit;}/* margin-bottom slide */
  ul.irpagina li { margin-bottom:inherit;}/* margin-bottom menu ir pagina */

li.pagina ul, li.pagina ol { 
  	/* max-width:615px; */
	margin-left:auto;
	margin-right:auto;
	padding-left:60px;
	margin-bottom:20px;
    text-align: justify;
	}

ul.tituloLista, ol.tituloLista { padding-left:inherit !important;  }
	
ul.margin-inherit { margin-left:20px; margin-right: inherit;}

ul.margin-left, ol.margin-left { margin-left:60px; }

ul.margin-left li, ol.margin-left li {margin-bottom:10px;}
	

/*************************/
/******* 2. LAYOUT *******/
/*************************/

.interno {
    /* display: flex;
    flex-wrap: no-wrap;
    justify-content: space-around;
    flex-direction: column; */
    display: block;
    padding: 20px;
    padding-top: 0;
    background-color: #f2f2f2;
    overflow-x: auto;
    height: 800px;/* controlar mobile */
}

.mobile .interno {
    height: inherit;
}

.auditivo {
    border-left: 3px solid #d4d7d8;
}

.interno header {
    /* flex: 1 1 auto; */
}

.interno .aula {
   /* flex: 1 1 auto; */
}

.aula-interno {
    display: flex;
    flex-wrap: no-wrap;
    justify-content: space-around;
}

.aula-interno .col-vd {
    flex: 1 1 25%;
    display: flex;
    align-items: stretch; /* altura 100% video center vertical */
}

    .aula-interno .col-vd.ocultar {
        flex: 0 0 0;
    }
    
.aula-interno .col-content {
    flex: 3 3 75%;
}





div.titulo {
    display: none;
}

.abas {
    border: 1px solid #DCD9D9;
    border-bottom: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    /* max-width: 900px; */
}
.conteudo-abas {
    border-top: 1px solid #dcd9d9;
}





/******* 2.1 Navegação Menu Tópicos *******/

nav {
    background: #f9f9f9;
    padding: 10px 10px 0 10px;
}

/* Sobre-escrever Bootstrap */
.nav-tabs {
    border-bottom: inherit;/* Evitar border-bottom dupla */
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border-bottom-color: #00885C;
    background: #0088c5;
    color: #FFF;
    font-weight: bold;

}

/* Mobile menu button */
#nav-menu {
    display: none;
}

/******* 2.2 Navegação entre páginas *******/

.paginacao {
    display: block;
    text-align: center;
}

    .paginacao div.btn-group {
        margin-left: auto;
        margin-right: auto;
    }

.paginacao .irpagina {
    overflow: auto;
    max-height: 500px;
}

/******* 2.3 Flex Grid *******/

.flex-box12 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.flex3 { flex: 1 1 0; }
.flex9 { flex: 3 3 0; }

.flex4 { flex: 2 2 0; }
.flex8 { flex: 4 4 0; }

.flex5 { flex: 5 5 0; }
.flex7 { flex: 7 7 0; }


.flex-auto { flex: 1 1 auto; } /* Extra space distributed */

.flex-equal { flex: 1 1 0; } /* coluna igual tamanho */

/****************************/
/******* 3. Elementos *******/
/****************************/

/******* 3.1 Video Interprete *******/

video {
   /* width: 75%;
    height: auto;*/
    margin-left: auto;
    margin-right: auto;
}

div.conteudoVideoLibras {
    display: flex;
    align-items: center;
    padding-right: 20px; /* equilibrar o  padding div.interno de 20px lado esquerdo */
}
div.conteudoVideoLibras video { 
    width: 100%;
    height: auto;
    max-width: initial;
    border: 0 solid white;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    background-color: white;
}

div.video {
    text-align: center;
}
    
    .mobile video.conteudoVideoLibras {
        max-width: 90%;
    }

/******* 3.2 Figuras (imagens) *******/	
	.figura { border:5px solid white;box-shadow:0 0 5px rgba(0,0,0,0.4);  margin-left:auto; margin-right:auto; margin-bottom:16px; }

	figure {
		display:block; 
		text-align: center;
		margin:20px auto 10px auto;
		}
	figure img {
		border:5px solid white;
		box-shadow:0 0 5px rgba(0,0,0,0.4);
        margin-left: auto;
        margin-right: auto;
		}
	figure.fig-inherit img {
		border:inherit;
		box-shadow:inherit;
        background-color: inherit;
        text-align: center;
		}
	figure figcaption {
		font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
		font-size:90%;
		display:block;
		margin-top:5px;
		}
		figure figcaption span { font-size: 75%; }
	figure.float-esquerda {
		float:left;
		display:inherit;
		padding-right:30px;
		}
		figure.float-direita {
		float:right;
		display:inherit;
		padding-left:30px;
        }
    figure.margin-bottom { margin: 0 auto 20px auto; }

    figure.pull-left { margin-right: 20px; margin-top: inherit; }
    figure.pull-right { margin-left: 20px; margin-top: inherit; }

/******* 3.3 Icone *******/
.iconBox {
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    clear: both;
    margin-bottom: 20px;
}
.iconBox-icon {
    /* flex: 1 1 162px; */
    flex: 1 1 0;
    display: flex;
    align-items: center;
}
.iconBox-icon img {
    margin-left: auto; margin-right: auto;
}

.iconBox-content {
    /* flex: 3 3 546px; */
    flex: 3 3 0;
    display: flex;
    align-items: center;
}
.iconBox-content .iconContent { 
    background-color: #EEEEEE;
    border-color: #2095CE;
    margin-top: 1.3em;
    padding: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 4px;

}


/******* 3.4 Código *******/

figure pre {
    /* max-width: 615px; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    padding: 10px;
}

figure pre {
    text-align: left;
}

figure pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}

/******* 3.5 Destaque *******/

.destaque {
    border: 1px solid #337ab7;
    box-shadow: 2px 2px 2px rgba(0,93,117,0.4);
    border-radius: 10px;
    padding: 10px;
    margin: 20px auto 20px auto;
    /* max-width: 615px; */
    background-color: #d9edf7;
}

/******* 3.6 Box Info *******/
.boxInfo {
    padding: 5px;
    background-color: #D9EDF7;
    margin-bottom: 20px;
    max-width: 615px;
    margin-left: auto;
    margin-right: auto;
}

.boxInfoTitle {
    padding: 3px;
    background-color: white;
    border: 1px solid grey;
    width: 80px;
}

.boxAzul {
    background-color: #ADEEEF;
    border-radius: 10px;
    text-align: center;
    padding: 8px;
    background: linear-gradient(rgba(219,237,249,1), rgba(159,198,231,1));
    border: 1px solid #a6b8ca;
    font-weight: bold;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.auto-contraste .boxAzul { background: linear-gradient(rgba(219,237,249,0), rgba(159,198,231,0)); }

.boxAzulSeta { 
    text-align: center;
    padding: 10px;
    }

/******* 3.7 Exemplos *******/
.exemplos {
    width: 90%;
    margin: 5px auto;
    box-shadow: 0 0 5px rgba(0,0,254,0.7);
    padding: 10px;
    font-size: 90%;
}

.titulo-exemplo {
    text-indent: inherit;
    color: rgba(57,153,243,1.00);
    font-weight: bold;
}

.algoritmo-exemplo {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    background-color: #c2e6f8;
    padding: 10px;
}

.algoritmo-tabelizado {
    width:80%;
    margin-top:15px auto 0 auto;
    list-style-type: none;
    padding-left: inherit;
}

li.pagina ul.algoritmo-tabelizado {
    padding-left: inherit;
}

.algoritmo-tabelizado > li {
    color:#FFFFFF;
    background-color: #548dd4;
    padding: 5px;
    margin-bottom: 5px;
}

body.auto-contraste .algoritmo-tabelizado > li {
    color: #FFFFFF;
    background-color: #000;
    border: 1px solid white;
}
body.auto-contraste .algoritmo-tabelizado li.sub ul.subrotina li {
    background-color: #000;
    border: 1px solid white;
}

.algoritmo-tabelizado > li.sub {
    color: inherit;
    background-color: inherit;
    padding: inherit;
    padding-left: 0;
}

.algoritmo-tabelizado  li.sub ul.subrotina {
    list-style-type: none;
    padding-left: 0;
}

.algoritmo-tabelizado  li.sub ul.subrotina  li {
    margin-top:0px;
    margin-bottom:0px;
    background-color: #eaeff7;
    padding: 5px;
    padding-left: 60px;
    margin-bottom: 5px;
}




/******* 3.8 Pagination / division *******/

figure.tabela-dividida {
    border: 1px solid #337ab7;
    box-shadow: 2px 2px 2px rgba(0,93,117,0.4);
    border-radius: 10px;
    padding: 5px;
}

figure.tabela-dividida table {
    margin-top: inherit;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0;
}

figure.tabela-dividida nav {
    padding: inherit;
}

figure.tabela-dividida .pagination {
    margin: 10px 0 0 0;
}

figure.tabela-dividida div.caption {
    color: grey;
}

figure.tabela-dividida .divisao { display: none; text-align: center; color: #337ab7; }
figure.tabela-dividida .divisao.ativo { display: block; }
figure.tabela-dividida nav { background-color: inherit; }
ul.pagination li a:link, ul.pagination li a:visited, ul.pagination li a:active, ul.pagination li a:focus { color: #337ab7 !important; }
ul.pagination li.active a:link, ul.pagination li.active a:visited, ul.pagination li.active a:active, ul.pagination li.active a:focus { color: #FFF !important; }

figure.tabela-dividida .table-line tr:nth-child(2n+1) td {
    padding: 0;
}

figure.tabela-dividida .table-line tr:nth-child(2n+2) td {
    padding: 0;
}

figure.tabela-dividida .table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
    padding: 0;
    text-align: center;
}

/******* 3.9 Video conteudo *******/

.videoSurdoFisico {
    position:relative;
    clear:both;
    min-height: 270px;
}

.videoSurdoFisico .conteudoVideoLibras {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    background-color:#FFFFFF;
    z-index:10;
    display: none;
}

.videoContent {
    max-width: 600px;
    height: auto;
}

.conteudoVideoSemLibras {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    /* background-color:#FFFFFF; */
    z-index:1;
}

figure.videoAdd {
    max-width: 800px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/**********************************/
/******* 4. Abas / Tópicos *******/
/**********************************/


.conteudo {
    /* overflow: hidden; */
    clear: none;
}

.abas .conteudo {
   /*  display: none; */
}

.abas .conteudo .paginas {
    position: relative;
    list-style-type: none;
    margin: 0px;
}




/******* 4.1 Páginas *******/

li.pagina {
    display: none;
    /* width: 740px;
    /* margin: 0 20px; */
    list-style-type: none;
    color: #4c5051;
    padding: 20px;
    margin-bottom: 100px;
    /* height: 500px; */
    min-height: 450px;
    overflow-x: hidden;
    overflow-y: auto;
}

li.pagina.active {
    display: block;
}


/****************************/
/******* 5. Conteúdos *******/
/****************************/

/******* 5.1 Introdução *******/

.abertura {
	display: flex;
    flex-wrap: no-wrap;
    justify-content: space-around;
}
.abertura-box-icon {
   flex: 1 1 226px;
}
.abertura-box-content {
    flex: 2 2 482px;
    padding-right: 10px;
}
.aberturaIcon {
	padding:20px 20px 0 10px;
    
	text-align:center;
}
.aberturaContent {
	vertical-align:top;
	padding:10px 0px 10px 10px; 
	margin-top:0px;}



/* Objetivos */
.objetivosini {
	background-color: #F2F2F2;
    color: #3887AE;
    padding: 20px 20px 10px 25px;
    text-align: justify;
    border: 2px dashed #007DB8;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 40px;
    margin-bottom: 15px;
    clear: both;
    position: relative;
	}
	
	.objetivosico {
        position: absolute;
        left: -2px;
        width: 180px;
        top: -35px;
        height: 35px;
        background-color: #007DB8;
        border: 2px solid #007DB8;
        text-align: center;
        font-size: 1.3em;
        color: #FFFFFF;
        font-weight: bold;
        padding: 4px;
        line-height: 20px;
        font-variant: all-petite-caps;
    }


div.objetivosini ul {
	margin-left:-5px;
	margin-right:inherit;
	padding-left:inherit;
}

/******* 5.2 Titulos *******/
.subtitulo {
	border-bottom:1px solid #2095CE;
	color:#2095CE;
	padding: 0 5px 10px 5px;
	margin:10px 15px 10px 15px;
	font-size:175%;
}

.section {
	color:#2095CE;
	margin:5px auto 20px auto;
	/*max-width:615px;*/
	height:25px;
	padding:inherit;
    max-width: 650px;
}

/******* 5.3 Definition list *******/

dl { 
	/* max-width:615px; */
	margin-left:auto;
	margin-right:auto;}
	.boxDl dt { 
		width:50%; 
		padding:10px;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		color: #FFF; /* bg-primary */
		background-color: #428BCA; /* bg-primary */
		}
	.boxDl dd { 
		padding:10px;
		margin-bottom:20px;
		border-top-right-radius:10px;
		border-bottom-right-radius:10px;
		border-bottom-left-radius:10px;
		background-color: #D9EDF7; /* bg-info */}

dl.list-definicao { /* max-width:615px; */}
 dl.list-definicao	dt { 
		width:50%; 
		padding:10px;
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		color: #FFF; /* bg-primary */
		background-color: #428BCA; /* bg-primary */
		}
	dl.list-definicao dd { 
		padding:10px;
		margin-bottom:20px;
		border-top-right-radius:10px;
		border-bottom-right-radius:10px;
		border-bottom-left-radius:10px;
		background-color: #D9EDF7; /* bg-info */}

/******* 5.4 Lista de termos *******/

.termList {
    display: flex;
    flex-wrap: wrap;
}

.termList dt {
    flex: 1 1 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.termList dd {
    flex: 5 5 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.termList dd > div {
    border-radius: 10px;
    border: 3px solid #95B3D7;
    box-shadow: 2px 2px 2px rgba(149, 179, 215, 0.4);
    text-align: left;
    margin-bottom: 20px;
}
.termList dd > div p {
    padding: 10px;
}

.termList dt > div  {
    width: 90px;
    height: 90px;
    border: 3px solid #95B3D7;
    background-color: #95B3D7;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 130%;
    text-indent: inherit;
    border-radius: 45px;
    line-height: 90px;
    margin-bottom: 20px;
}

/******* 5.5 Tabela *******/

table {
    caption-side: bottom;
    border-spacing: 5px;
    border-collapse: inherit;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
table.tableTextLeft td, table.tableTextLeft th  {
    text-align: left;
}
.table-line tr th {
    background-color: #55a9d8;
    color: #FFF;
    padding: 5px;
}
.table-striped > tbody > tr:nth-child(2n) > td {
    background-color: #C2E6F8;
}
.table-striped > tbody > tr:nth-child(2n+1) > td {
    background-color: #D1D2D4;
}
.table-line tr:nth-child(2n+2) td {
    background-color: #d1d2d4;
    padding: 5px;
}

.table-line tr:nth-child(2n+1) td {
    background-color: #c2e6f8;
    padding: 5px;
}
.table-bordered > tbody > tr > th {
    background-color: #55A9D8;
    color: #FFF;
    text-align: center;
}
table caption {
    font-size: 90%;
    text-align: center;
}

/******* 5.6 Lista como figura *******/

.figura-lista {
    border:1px dotted #337ab7;
}

.figura-lista ul, .figura-lista ol  {
    margin-left:30px; margin-right: inherit;
    padding-right: 20px;
}

/******* 5.7 Referências *******/

li.pagina ul.ul-referencia {
    padding-left:inherit;
}

li.pagina ul.ul-referencia li {
    margin-bottom: 15px;
}

/**********************************/
/******* 6. ACCESSIBILIDADE *******/
/**********************************/


/******* 6.1 barra de accessibilidade mobile *******/

#accessibilidadeMobile {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 10;
}

#accessibilidadeMobile button { display: none; }
#accessibilidadeMobile button.config { display: block; }




/************************/
/******* 6. Mobile *******/
/************************/

/* body.mobile #accessibilidadeMobile { display: block; } */

body.mobile main > header { display: block; }

body.mobile .conteudoVideoLibras {
    position: fixed;
    top: 25%;
    left: 10px;
    padding-right: inherit;
}

body.mobile li.pagina {
    height: inherit;
    overflow-x: inherit;
    overflow-y: inherit;
}

body.mobile .paginacao {
    position: fixed;
    bottom: 15px;
    text-align: center;
}

body.mobile li.pagina {
    max-height: inherit;
    overflow-y: visible;
}

body.mobile .btn-group {
    background-color: white;
}

/* menu topico mobile */

body.mobile #nav-menu {
    display: block;
    float: left;
    cursor: pointer;
}

body.mobile .nav-pills {
    margin-left: 20px;
}

body.mobile .nav-pills > li {
	display: block;
	float: inherit;
}
body.mobile .menuTopicoFechado > li {
	display: none;    
	float: inherit;
}
body.mobile .menuTopicoFechado > li.active {
	display: block;    
	float: inherit;
}



/******* 6.2 mostrar/ocultar plataforma/mobile *******/

.videoMobile {
    display: none;
}

.videoPlataforma {
    display: block;
}

body.mobile .videoMobile {
    display: block;
}

body.mobile .videoPlataforma {
    display: none;
}

mobile-hide {
    display: none;
}

/******* 7.1 Auto-contraste *******/

.auto-contraste {
	background: #000;
}

.auto-contraste html {
    background-color: #000;
}

.auto-contraste * {
	background-color: #000;
	color: #fff !important;
}
.auto-contraste a, .auto-contraste a:visited, .auto-contraste a:active {
    color: yellow !important;
}
.auto-contraste .paginacao { background-color: transparent; }
.auto-contraste .well { background-image:inherit; }
.auto-contraste .expression {
	border: 1px solid #FFF;
}
.auto-contraste .subtitulo {
	border-bottom: 1px solid #FFF;
}
.auto-contraste .objetivosini {
	border: 2px dotted #FFF;
}
.auto-contraste .objetivosico {
	border: 2px dotted #FFF;
}
.auto-contraste .destaque {
	border: 2px solid #FFF;
	box-shadow: 2px 2px 2px rgba(256, 256, 256, 0.4);
}

.auto-contraste .iconBox-content .iconContent, .auto-contraste .figura-lista {
    background-image: inherit;
    background-color: #000;
    border: 1px solid #FFF;
}

/* 7.1.1 Contraste Menu Tópico Plataforma */
.auto-contraste .nav-tabs > li.active > a, .auto-contraste .nav-tabs > li.active > a:focus, .auto-contraste .nav-tabs > li.active > a:hover {
    color: yellow !important;
    cursor: default;
    background-color: #000;
    border: 1px solid yellow;
    border-bottom-color: transparent;
}

.auto-contraste .nav-tabs > li > a:hover {
    border-color: #fff;
}
.auto-contraste .nav > li > a:focus, .auto-contraste .nav > li > a:hover {
    text-decoration: none;
    background-color: #000;
}

.auto-contraste .dropdown-menu > li > a:focus, .auto-contraste .dropdown-menu > li > a:hover {
    background-color: #000;
    border-top: 1px dotted yellow;
    border-bottom: 1px dotted yellow;
    color: yellow !important;
    background-image: inherit;
}

body.auto-contraste .open > .dropdown-toggle.btn-default {
    color: yellow;
    background-color: inherit;
    border-color: yellow;
}

/* 7.1.2 Contraste Menu Tópico Mobile */
.auto-contraste .nav-pills > li.active > a, .auto-contraste .nav-pills > li.active > a:focus, .auto-contraste .nav-tabs > li.active > a:hover {
    color: yellow !important;
    cursor: default;
    background-color: #000;
    border: 1px solid yellow;
}

.auto-contraste .nav-pills > li > a:hover {
    border-color: #fff;
}
.auto-contraste .nav > li > a:focus, .auto-contraste .nav > li > a:hover {
    text-decoration: none;
    background-color: #000;
}

/* 7.1.3 Menu Navegacao e ferramentas */

.auto-contraste .btn-default {
    text-shadow: inherit;
    background-image: inherit;
    background-image: inherit;
    background-image: inherit;
    background-image: inherit;
    filter: inherit;
    filter: inherit;
    background-repeat: inherit;
    background-color: #000;
    border: 2px solid yellow;
}
.auto-contraste .btn-default.sr-only {
    background-color: #000 !important;
}

.auto-contraste .btn-default, .auto-contraste .btn-default span, .auto-contraste #nav-menu {
    color: yellow !important;
}

.auto-contraste .dropup .dropdown-menu, .auto-contraste .navbar-fixed-bottom .dropdown .dropdown-menu {
    border: 1px solid yellow;
}

.auto-contraste .dropdown-menu > li > a:focus, .auto-contraste .dropdown-menu > li > a:hover {
    background-color: black;
    color: yellow;
}

body.auto-contraste .table-bordered {
    border: 1px solid yellow;
}

body.auto-contraste .table-line {
   border: 1px solid yellow; 
}
body.auto-contraste .table-line > tbody > tr > td, body.auto-contraste .table-line > tbody > tr > th, body.auto-contraste .table-line > tfoot > tr > td, body.auto-contraste .table-line > tfoot > tr > th, body.auto-contraste .table-line > thead > tr > td, body.auto-contraste .table-line > thead > tr > th {
    border: 1px solid #fff;
}


body.auto-contraste .table-bordered > tbody > tr > th, body.auto-contraste .table-line > tbody > tr > th {
    background-color: #000;
    color: yellow !important;
    text-align: center;
}
body.auto-contraste .table-striped > tbody > tr:nth-child(2n) > td {
    background-color: #000;
}
body.auto-contraste .table-striped > tbody > tr:nth-child(2n+1) > td {
    background-color: #000;
}
body.auto-contraste .table-line tr:nth-child(2n+2) td {
    background-color: #000;
}
body.auto-contraste .table-line tr:nth-child(2n+1) td {
    background-color: #000;
}


body.auto-contraste a, body.auto-contraste a:visited, body.auto-contraste a:active { 
    color: yellow !important;
    text-decoration: underline;
}

body.auto-contraste ol.quiz a, body.auto-contraste ol.quiz a:visited, body.auto-contraste ol.quiz a:active { 
    color: white !important;
    text-decoration: none;
}

body.auto-contraste a figcaption, body.auto-contraste a:visited figcaption, body.auto-contraste a:active figcaption {
    text-decoration: none;
}

body.auto-contraste  .hljs {
    background: black;
}

body.auto-contraste  .boxDl dt, body.auto-contraste  .boxDl dd {
    background: black;
    border:1px solid white;
}


/******* 7.2 Deficientes visuais *******/

/* ocultar botão para cego na barra de navegação */
button.sr-only {
    width: 0px;
    height: 0px;
    padding: 0;
    margin: 0;
    font-size: 0px;
}


-webkit-media-controls-fullscreen-button {
    display: none;
}

media-controls-fullscreen-button {
    display: none;
}

table figure.margin-0 {
    margin: 0;
}

table pre { padding: 0; }

table figure pre {
    margin-top: 0;
    margin-bottom:0;
    padding: 0;
}

table code.hljs {
    padding: 0;
    padding-left: 5px;
}

.divcentral {
         width: 100vw;
         height: 100vh;
         background: #6C7A89;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center
     }

  .centralizado {
         display: flex;
         text-align: center;
}

video::-internal-media-controls-download-button {
   display:none;
}

video::-webkit-media-controls-enclosure {
   overflow:hidden;
}

video::-webkit-media-controls-panel {
   width: calc(100% + 30px);
}

body.auto-contraste .vjs-poster, body.auto-contraste video, body.auto-contraste .video-js .vjs-tech, body.auto-contraste .video-js, body.auto-contraste .vjs-text-track-display,  body.auto-contraste .vjs-text-track-display div {
    background-color: initial !important;
}
 
body.auto-contraste .btn-group .btn + .btn, body.auto-contraste .btn-group .btn + .btn-group, body.auto-contraste .btn-group .btn-group + .btn, body.auto-contraste .btn-group .btn-group + .btn-group, body.auto-contraste .btn-group-vertical .btn + .btn, body.auto-contraste .btn-group-vertical .btn + .btn-group, body.auto-contraste .btn-group-vertical .btn-group + .btn, body.auto-contraste .btn-group-vertical .btn-group + .btn-group {
    margin-left: inherit;
}

.dont-break-out {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    
    }