/* ==============================================================
   XLX026_ACCESSIBILITY_COMPACT_V1

   Somente layout.
   Nenhum JavaScript.
   Nenhum áudio.
   Nenhum polling.
   ============================================================== */


/* ==============================================================
   CAIXA PRINCIPAL
   ============================================================== */

#xlxA11yV5E{

    top:58px !important;
    right:10px !important;

    width:320px !important;

    max-width:
        calc(100vw - 20px) !important;

    /*
     * A caixa não possui mais área interna rolável.
     */
    max-height:none !important;

    overflow:visible !important;

    font-size:11.5px !important;

    border-radius:11px !important;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.48) !important;
}


/* ==============================================================
   CABEÇALHO
   ============================================================== */

#xlxA11yV5E
.xlx-a11y-head{

    min-height:38px !important;

    padding:
        6px 8px !important;
}


#xlxA11yV5E
.xlx-a11y-head strong{

    font-size:13px !important;
}


#xlxA11yCloseV5E{

    width:29px !important;
    height:29px !important;

    min-width:29px !important;
    min-height:29px !important;

    padding:0 !important;

    border-radius:6px !important;

    font-size:17px !important;
    line-height:1 !important;
}


/* ==============================================================
   CORPO
   ============================================================== */

#xlxA11yV5E
.xlx-a11y-body{

    padding:
        6px 8px 8px !important;
}


/* títulos */

#xlxA11yV5E
.xlx-a11y-title{

    margin:
        6px 0 3px !important;

    font-size:9px !important;

    line-height:1.15 !important;

    letter-spacing:.7px !important;
}


/* texto auxiliar */

#xlxA11yV5E
.xlx-a11y-note{

    margin:
        0 0 4px !important;

    font-size:9.5px !important;

    line-height:1.2 !important;
}


/* ==============================================================
   BOTÕES ON / OFF
   ============================================================== */

#xlxA11yV5E
.xlx-a11y-option{

    min-height:33px !important;

    margin:
        3px 0 !important;

    padding:
        4px 7px !important;

    gap:5px !important;

    border-radius:7px !important;

    font-size:10.5px !important;

    line-height:1.15 !important;
}


#xlxA11yV5E
.xlx-a11y-option::after{

    min-width:34px !important;

    padding:
        2px 4px !important;

    font-size:8px !important;

    line-height:1.2 !important;
}


/* ==============================================================
   ÁUDIO
   ============================================================== */

/*
 * Áudio continua em uma coluna para manter leitura clara.
 */

#xlxA11yMasterV5E,
#xlxA11yVoiceV5E,
#xlxA11yBeepsV5E{

    width:100% !important;

    display:flex !important;
}


/* ==============================================================
   TESTAR BIP / RESET
   ============================================================== */

#xlxA11yV5E
.xlx-a11y-action{

    min-height:31px !important;

    margin:
        3px 0 !important;

    padding:
        4px 7px !important;

    border-radius:7px !important;

    font-size:10px !important;
}


/* ==============================================================
   TAMANHO DO TEXTO
   ============================================================== */

#xlxA11yV5E
.xlx-a11y-font-row{

    gap:4px !important;

    margin:
        2px 0 4px !important;
}


#xlxA11yV5E
.xlx-a11y-font-row button{

    min-width:42px !important;

    min-height:30px !important;

    height:30px !important;

    padding:
        2px 5px !important;

    border-radius:6px !important;

    font-size:10px !important;
}


#xlxA11yFontValueV5E{

    font-size:10px !important;

    line-height:30px !important;
}


/* ==============================================================
   RECURSOS VISUAIS EM DUAS COLUNAS
   ============================================================== */

/*
 * Isso reduz bastante a altura total da caixa.
 */

#xlxA11yContrastV5E,
#xlxA11yLinksV5E,
#xlxA11yControlsV5E,
#xlxA11yMotionV5E,
#xlxA11yFocusV5E{

    display:inline-flex !important;

    vertical-align:top !important;

    width:
        calc(50% - 3px) !important;

    min-height:33px !important;

    margin:
        2px 1px !important;

    padding:
        4px 5px !important;

    font-size:9.5px !important;
}


/*
 * O indicador ON/OFF fica menor nessa seção.
 */

#xlxA11yContrastV5E::after,
#xlxA11yLinksV5E::after,
#xlxA11yControlsV5E::after,
#xlxA11yMotionV5E::after,
#xlxA11yFocusV5E::after{

    min-width:29px !important;

    padding:
        2px 3px !important;

    font-size:7px !important;
}


/* ==============================================================
   VIEWPORTS COM POUCA ALTURA
   ============================================================== */

/*
 * Sem barra de rolagem.
 * Apenas reduz visualmente a caixa para continuar inteira.
 */

@media
(max-height:620px)
and
(min-width:601px){

    #xlxA11yV5E{

        top:48px !important;

        transform:
            scale(.90) !important;

        transform-origin:
            top right !important;
    }
}


@media
(max-height:530px)
and
(min-width:601px){

    #xlxA11yV5E{

        top:42px !important;

        transform:
            scale(.80) !important;

        transform-origin:
            top right !important;
    }
}


/* ==============================================================
   CELULAR
   ============================================================== */

@media (max-width:600px){

    #xlxA11yV5E{

        top:52px !important;

        left:6px !important;
        right:6px !important;

        width:auto !important;

        max-width:none !important;

        max-height:none !important;

        overflow:visible !important;

        font-size:11px !important;
    }
}


/*
 * Celular baixo:
 * continua sem barra interna.
 */

@media
(max-width:600px)
and
(max-height:620px){

    #xlxA11yV5E{

        transform:
            scale(.88) !important;

        transform-origin:
            top center !important;
    }
}


/* /XLX026_ACCESSIBILITY_COMPACT_V1 */