/**********
 * Define a fonte OpenDyslexic usando uma URL dinâmica
 *********************/
@font-face {
    font-family: 'OpenDyslexic';
    src: url('https://dev-aula.ufpel.edu.br/local/a11y4mdl/fonts/OpenDyslexic-Regular.otf') format('opentype'),
         url('https://dev-aula.ufpel.edu.br/local/a11y4mdl/fonts/OpenDyslexic-Regular.woff2') format('woff2'),
         url('https://dev-aula.ufpel.edu.br/local/a11y4mdl/fonts/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/**********
 * Botão Flutuante
 *********************/
.a11y4mdl-floating_button {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: #0073e6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 24px;
    z-index: 9999;
    font-family: initial !important;
}

/**********
 * Posicionamentos do Botão Flutuante
 *********************/
.a11y4mdl-floating_button.bottom-right { bottom: 20px; right: 20px; }
.a11y4mdl-floating_button.bottom-left { bottom: 20px; left: 20px; }
.a11y4mdl-floating_button.top-right { top: 20px; right: 20px; }
.a11y4mdl-floating_button.top-left { top: 20px; left: 20px; }

/**********
 * Popover
 *********************/
.a11y4mdl-popover {
    position: fixed;
    bottom: 80px;
    right: 20px;
    background: white;
    padding: 0;
    border-radius: 5px;
    display: none;
    z-index: 1050;
    width: 400px;
    height: 600px;
    font-family: initial !important;
    line-height: initial !important;
    word-spacing: initial !important;
    letter-spacing: initial !important;
    font-size: 12px !important;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.a11y4mdl-popover.open { display: block !important; }

/**********
 * Posicionamentos do Popover
 *********************/
.a11y4mdl-popover.bottom-right { bottom: 80px; right: 20px; }
.a11y4mdl-popover.bottom-left { bottom: 80px; left: 20px; }
.a11y4mdl-popover.top-right { top: 80px; right: 20px; }
.a11y4mdl-popover.top-left { top: 80px; left: 20px; }

/**********
 * Cabeçalho do Popover
 *********************/
.popover_header {
    background-color: #0073e6;
    border-radius: 5px 5px 0 0;
    padding: 10px 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.popover_header h2 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem;
    margin: 0;
}
.popover_header .icon_reset, 
.popover_header .icon_close {
    color: #ffffff;
    padding: 2px 3px 4px 7px;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.8rem;
    text-decoration: none;
}
.popover_header .icon_reset:hover, 
.popover_header .icon_close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/**********
 * Conteúdo do Popover
 *********************/
.popover_content {
    padding: 10px 15px;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 530px;
    border-left: solid 1px #dddddd;
    border-right: solid 1px #dddddd;
    font-family: Arial, Helvetica, sans-serif !important;
}
.popover_content .section_title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f6cbf;
    margin-bottom: 0.3rem;
}
.popover_content .section_options {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: stretch;
    margin-bottom: 12px;
    border-bottom: dotted 1px #ddd;
    padding-bottom: 10px;
}
.popover_content .section_options_two {
    padding: 5px 10px;
    text-align: center;
    background-color: #f1f1f1;
    margin: 5px;
    border-radius: 5px;
    color: #000000;
    text-decoration: none;
    outline: none !important;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.popover_content .section_options .options_item {
    font-family: Arial, Helvetica, sans-serif !important;
    width: calc(50% - 5px - 5px); /* 50% - margin-left - margin-right */
    padding: 5px 10px;
    text-align: center;
    background-color: #f1f1f1;
    height: 50px;
    margin: 5px;
    align-content: center;
    border-radius: 5px;
    color: #000000;
    text-decoration: none;
    outline: none !important;
}
.popover_content .section_options_two .options_item {
    font-family: Arial, Helvetica, sans-serif !important;
    width: calc(16% - 5px - 5px); /* 50% - margin-left - margin-right */
    padding: 5px 10px;
    text-align: center;
    background-color: #ffffff;
    height: 35px;
    margin: 5px;
    align-content: center;
    border-radius: 5px;
    color: #000000;
    text-decoration: none;
    outline: none !important;
}
.popover_content .section_options .options_item:hover {
    outline: none !important;
}
.popover_content .section_options .options_item[aria-checked="true"] {
    background-color: #0073e6;
    color: white;
    outline: none !important;
}
.popover_content .section_options .options_item i {
    display: block;
    font-size: 16px !important;
}

/**********
 * Personalização da Barra de Rolagem do Popover
 *********************/
.popover_content::-webkit-scrollbar { width: 4px; }
.popover_content::-webkit-scrollbar-track { background: #F4F4F4; }
.popover_content::-webkit-scrollbar-thumb { background-color: #dad7d7; border-radius: 2px; border: 0px solid #F4F4F4; }

/**********
 * Rodapé do Popover
 *********************/
.popover_footer {
    background-color: #dddddd;
    border-radius: 0 0 5px 5px;
    height: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}
.popover_footer .icon_help {
    color: #0f6cb;
    padding: 2px 7px 2px 7px;
    border-radius: 3px;
    font-size: 0.8rem;
    text-decoration: none;
}
.popover_footer .icon_help:hover {
    color: #0f6cb;
    background-color: rgba(255, 255, 255, 0.7);
}

/**********
 * Estilos de Acessibilidade - Fonte Legível
 *********************/
.a11y4mdl-legiblefont *:not(#a11y4mdl-popover *, i) {
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
    font-family: Arial, Helvetica, sans-serif !important;
}

/**********
 * Estilos de Acessibilidade - Fonte Amigável (OpenDyslexic)
 *********************/
.a11y4mdl-friendfont *:not(#a11y4mdl-popover *, i) {
    font-family: 'OpenDyslexic', 'Open-Dyslexic', Arial, sans-serif !important;
}

/**********
 * Estilos de Acessibilidade - Tamanho da Font
 *********************/
.a11y4mdl-textsize_large:not(#a11y4mdl-popover *) { font-size: 1.125rem !important; }
.a11y4mdl-textsize_extralarge:not(#a11y4mdl-popover *) { font-size: 1.25rem !important; }
.a11y4mdl-textsize_big:not(#a11y4mdl-popover *) { font-size: 1.375rem !important; }

/**********
 * Estilos de Acessibilidade - Altura da Linha
 *********************/
.a11y4mdl-lineheight_large *:not(#a11y4mdl-popover *) { line-height: 2 !important; }
.a11y4mdl-lineheight_extralarge *:not(#a11y4mdl-popover *) { line-height: 2.7 !important; }
.a11y4mdl-lineheight_big *:not(#a11y4mdl-popover *) { line-height: 3.4 !important; }

/**********
 * Estilos de Acessibilidade - Epaçamento entre Letras e Palavras
 *********************/
.a11y4mdl-textspacing_large:not(#a11y4mdl-popover *) { word-spacing: 0.28em !important; letter-spacing: 0.08em !important; }
.a11y4mdl-textspacing_extralarge:not(#a11y4mdl-popover *) { word-spacing: 0.38em !important; letter-spacing: 0.18em !important; }
.a11y4mdl-textspacing_big:not(#a11y4mdl-popover *) { word-spacing: 0.48em !important; letter-spacing: 0.28em !important; }

/**********
 * Estilos de Acessibilidade - Contraste Escuro
 *********************/
.a11y4mdl-darkcontrast {
    mix-blend-mode: normal !important;
    filter: invert(100%) hue-rotate(180deg) !important;
    overflow-x: hidden;
}
.a11y4mdl-darkcontrast :is(iframe,video,img) {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/**********
 * Estilos de Acessibilidade - Contraste Claro
 *********************/
.a11y4mdl-lightcontrast {
    mix-blend-mode: normal !important;
    filter: brightness(95%) contrast(100%) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #dddddd !important;
    overflow-x: hidden;
}

/**********
 * Estilos de Acessibilidade - Inverter Cores
 *********************/
.a11y4mdl-invertcolors {
    mix-blend-mode: normal !important;
    color: #000000 !important;
    border-color: #282828 !important;
    background-color: #181818 !important;
    filter: invert(1) !important;
    overflow-x: hidden;
}
.a11y4mdl-invertcolors :is(iframe,video,img) {
    filter: invert(100%) !important;
}

/**********
 * Estilos de Acessibilidade - Mudar Cores
 *********************/
.a11y4mdl-changecolors { filter: hue-rotate(90deg) !important; overflow-x: hidden; }
.a11y4mdl-changecolors :is(iframe,video,img) { filter: hue-rotate(270deg) !important; }

/**********
 * Estilos de Acessibilidade - Alto Contraste
 *********************/
.a11y4mdl-highcontrast { filter: contrast(135%) !important; overflow-x: hidden; }
.a11y4mdl-highcontrast:is(.a11y4mdl-darkcontrast) { filter: invert(100%) hue-rotate(180deg) contrast(135%) !important; }

/**********
 * Estilos de Acessibilidade - Alta Saturação
 *********************/
.a11y4mdl-highsaturation { filter: saturate(200%) !important; overflow-x: hidden; }
.a11y4mdl-highsaturation:is(.a11y4mdl-darkcontrast) { filter: invert(100%) hue-rotate(180deg) saturate(200%) !important; }

/**********
 * Estilos de Acessibilidade - Baixa Saturação
 *********************/
.a11y4mdl-lowsaturation { filter: saturate(50%) !important; overflow-x: hidden; }
.a11y4mdl-lowsaturation:is(.a11y4mdl-darkcontrast) { filter: invert(100%) hue-rotate(180deg) saturate(50%) !important; }
/**********
 * Estilos de Acessibilidade - Monocromático
 *********************/
.a11y4mdl-monochrome { filter: grayscale(100%) !important; overflow-x: hidden; }
.a11y4mdl-monochrome:is(.a11y4mdl-darkcontrast) { filter: invert(100%) hue-rotate(180deg) grayscale(100%) !important; }
/**********
 * Estilos de Acessibilidade - Cursor Grande e Preto
 *********************/
.a11y4mdl-blackcursor {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="48" viewBox="0 0 24 24"><path fill="%23000" d="M19.27 15.32 7.77 1.61A1 1 0 0 0 6 2.25v17.89a1 1 0 0 0 1.64.77l3.08-2.58 1.56 4.3a1 1 0 0 0 1.28.6l1.88-.68a1 1 0 0 0 .6-1.28l-1.56-4.3h4.02a1 1 0 0 0 .77-1.64Z"></path></svg>') 12 12, auto !important;
}
.a11y4mdl-blackcursor a,
.a11y4mdl-blackcursor button,
.a11y4mdl-blackcursor .clickable {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23000" stroke="%23000" stroke-width="2" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>') 12 12, auto !important;
}

/**********
 * Estilos de Acessibilidade - Cursor Grande e Branco
 *********************/
.a11y4mdl-whitecursor {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="72" height="48" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" stroke-linejoin="round" d="M18 14.88 8.16 3.15c-.26-.31-.76-.12-.76.28v15.31c0 .36.42.56.7.33l3.1-2.6 1.55 4.25c.08.22.33.34.55.26l1.61-.59a.43.43 0 0 0 .26-.55l-1.55-4.25h4.05c.36 0 .56-.42.33-.7Z"></path></svg>') 12 12, auto !important;
}
.a11y4mdl-whitecursor a,
.a11y4mdl-whitecursor button,
.a11y4mdl-whitecursor .clickable {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" stroke-linejoin="round" d="M10 11V8.99c0-.88.59-1.64 1.44-1.86h.05A1.99 1.99 0 0 1 14 9.05V12v-2c0-.88.6-1.65 1.46-1.87h.05A1.98 1.98 0 0 1 18 10.06V13v-1.94a2 2 0 0 1 1.51-1.94h0A2 2 0 0 1 22 11.06V14c0 .6-.08 1.27-.21 1.97a7.96 7.96 0 0 1-7.55 6.48 54.98 54.98 0 0 1-4.48 0 7.96 7.96 0 0 1-7.55-6.48C2.08 15.27 2 14.59 2 14v-1.49c0-1.11.9-2.01 2.01-2.01h0a2 2 0 0 1 2.01 2.03l-.01.97v-10c0-1.1.9-2 2-2h0a2 2 0 0 1 2 2V11Z"></path></svg>') 12 12, auto !important;
}

/**********
 * Estilos de Acessibilidade - Destacar Títulos
 *********************/
.a11y4mdl-highlighttitles h1:not(#a11y4mdl-popover h1),
.a11y-highlighttitles h2:not(#a11y4mdl-popover h2),
.a11y-highlighttitles h3:not(#a11y4mdl-popover h3) {
    background: yellow !important;
    padding: 5px !important;
    border-radius: 5px !important;
}

/**********
 * Estilos de Acessibilidade - Destacar Links
 *********************/
.a11y4mdl-highlightlinks a:not(#a11y4mdl-popover a) {
    background: yellow !important;
    color: black !important;
    text-decoration: underline !important;
    border-radius: 5px !important;
}

/**********
 * Estilos de Acessibilidade - Destacar Botões
 *********************/
.a11y4mdl-highlightbuttons button:not(#a11y4mdl-popover button) {
    background: yellow !important;
    color: black !important;
}

/**********
 * Estilos de Acessibilidade - Ocultar Imagens
 *********************/
.a11y4mdl-hideimages img {
    display: none !important;
}

/**********
 * Estilos de Acessibilidade - Guia de Leitura
 *********************/
.a11y4mdl-readingguide {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background-color: #000;
    border-top: solid 2px #ffed00;
    border-bottom: solid 2px #ffed00;
    z-index: 10000000000;
    /* box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5); */
}
.a11y4mdl-readingguide.active { visibility: visible; }
#a11y4mdl-readingguide.isMobile {
    position: fixed !important;
    top: 50%;
}
/**********
 * Estilos de Acessibilidade - Máscara de Leitura
 *********************/
#a11y4mdl-readingmask {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path 0.1s ease-in-out;
}

/**********
 * Estilos de Acessibilidade - Pausar Animações
 *********************/
.a11y4mdl-pauseanimations * {
    animation: none !important;
    transition: none !important;
}