body, html {
    height: 100%;
    margin: 0;
}

.ocultar {
    display: none !important;
}

i,
i.icon_title {
    color: #289CFF !important;
}

i.icon_section {
    color: #1a254c !important;
}

header.pkp_structure_head {
    position: relative;
}

button.biteca_button_access {
    position: fixed;
    top: 43%;
    right: 5%;
    transform: translateY(-50%);
    background-color: #289CFF;
    border: 2px solid #289CFF;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    font-size: 3.5rem;
    z-index: 1000;
}

div.biteca_accessibility {
    background-color: #fff;
    border: 2px solid #ce7b7b;
    border-radius: 20px;
    box-shadow: 0 0 40px -10px rgba(0,0,0,.75);
    padding: 30px 30px 10px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000000000000000;
    font-weight: 400;
    max-width: 500px;
    font-family: 'Sans-Serif'
}

div.biteca_accessibility__wrapper {
    position: relative;
}

div.biteca_accessibility__tools {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 20px;
    scrollbar-width: thin;
    scrollbar-color: #289CFF transparent !important;
}

button.biteca_accessibility_tools__button__close {
    background-color: transparent;
    border: 2px solid #fff!important;
    color: gray;
    cursor: pointer;
    font-size: 17px;
    position: absolute;
    right: -27px;
    top: -27px;
    transition: .3s;
    width: auto!important;
}

h3.biteca_accessibility_tools__section__color__title,
h3.biteca_accessibility_tools__section__font__title,
h3.biteca_accessibility_tools__section__content__title {
    font-weight: bold !important;
    font-size: 27px !important;
    color: #1a254c;
}

div.biteca_accessibility_tools__section__color__grid,
div.biteca_accessibility_tools__section__font__grid__row,
div.biteca_accessibility_tools__section__content__grid {
    display: flex;
    justify-content: space-between;
}

div.biteca_accessibility_tools__section__color__grid,
div.biteca_accessibility_tools__section__content__grid {
    flex-wrap: wrap;
    width: 100%;
    margin: -5px;
}

div.biteca_accessibility_tools__section__font__grid {
    background-color: #f0f3f5;
    border-radius: 20px;
    padding: 20px;
}

div.biteca_accessibility_tools__section__color__grid__items,
div.biteca_accessibility_tools__section__font__grid__items ,
div.biteca_accessibility_tools__section__content__grid__items {
    flex-basis: calc(50% - 10px);
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
}

div.biteca_accessibility_tools__section__color__grid__items i,
div.biteca_accessibility_tools__section__font__grid__items i,
div.biteca_accessibility_tools__section__content__grid__items i {
    display: block;
    font-size: 56px;
    margin-bottom: 10px;
}
  
div.biteca_accessibility_tools__section__color__grid__items span,
div.biteca_accessibility_tools__section__font__grid__items span,
div.biteca_accessibility_tools__section__content__grid__items span {
    display: block;
    font-size: 21px;
    color: #1a254c;
}

button.biteca_accessibility_tools__section__font__grid__row__button {
    background-color: #f1f3f5;
    border: 2px solid #dcdee0;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 17px;
    color: #1a254c;
    cursor: pointer;
}

span.biteca_accessibility_tools__section__font__grid__row__text {
    display: inline-block;
    font-size: 17px;
}

button.biteca_accessibility_tools__section__font__grid__button__reset {
    margin-top: 6px;
    color: #fff;
    background-color: #289CFF;
    padding: 10px 20px;
    width: 100%;
    border-radius: 10px;
    font-size: 17px;
    cursor: pointer;
}

.disabled {
    cursor: not-allowed !important;
    opacity: .5 !important;
    pointer-events: none !important;
    color: #1a254c !important;
}

.button_active {
    background-color: #289CFF !important;
    border: 1px solid #289CFF !important;
    color: #fff !important
}

.button_active span {
    color: #fff !important;
}

div.biteca_accessibility__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    margin: -5px;
}

div.biteca_accessibility__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    margin: 10px 0px;
}

button.biteca_accessibility__footer__reset,
button.biteca_accessibility__footer__close {
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
}

button.biteca_accessibility__footer__reset {
    background-color: #289CFF;
    color: #fff;
}

button.biteca_accessibility__footer__close {
    background-color: #f1f3f5;
    color: #000;
    margin-left: 5px;
    margin-right: 40px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
    /* STYLES GO HERE */
    div.biteca_accessibility {
        width: 100%;
        padding: 30px 24px 10px;
    }

    div.biteca_accessibility__wrapper {
        padding-right: 0px;
    }

    div.biteca_accessibility__tools {
        max-height: 300px;
        padding-right: 0px;
    }

    div.biteca_accessibility_tools__section__color__grid,
    div.biteca_accessibility_tools__section__font__grid,
    div.biteca_accessibility_tools__section__font__grid__row,
    div.biteca_accessibility_tools__section__content__grid {
        flex-direction: column;
    }

    div.biteca_accessibility_tools__section__font__grid__row span {
        text-align: center;
    }
}