.font_bold {
    font-family: "db_tula_xbold", sans-serif;
}
.font_medium {
    font-family: "promptmedium", sans-serif;
}

.font_regular {
    font-family: "db_tula_xregular", sans-serif;
}
.font_light {
    font-family: "db_tula_xlight", sans-serif;
}
.font_Bro_regular {
    font-family: "Brother_1816_Regular", sans-serif;
    font-style: normal;
}
.font_Bro_medium {
    font-family: "BBrother_1816_Medium", sans-serif;
    font-style: normal;
}

.font_Bro_black {
    font-family: "Brother_1816_Black", sans-serif;
    font-style: normal;
}
.font_Bro_bold {
    font-family: "Brother_1816_BOLD", sans-serif;
    font-style: normal;
}
.font_Bro_exbold {
    font-family: "Brother_1816_Extrabold", sans-serif;
    font-style: normal;
}
#section_banner {
    background-image: url("../images/banner_mobile_small.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* etiqueta <p> con la opcion selecionada  */
.selecionado_opcion {
    width: 96%;
    display: block;
    margin: 0px;
    cursor: pointer;
}
#section_vote {
    background: rgb(255, 255, 255);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(233, 234, 240, 1) 100%
    );
    height: auto;
}
.rating {
    & * {
        &:checked,
        &[aria-checked="true"],
        &[aria-current="true"],
        &:has(~ *:checked, ~ *[aria-checked="true"], ~ *[aria-current="true"]) {
            opacity: 100%;
        }
    }
}
.rating {
    & :where(*) {
        &:is(input) {
            cursor: pointer;
            opacity: 50%;
        }
    }
}
.verticalline {
    content: " ";
    position: absolute;
    border-left: 2px #000000 solid;
    top: 5px;
    height: 80%;
    margin-top: auto;
    margin-bottom: auto;
    left: 49%;
}
#section_thankyou {
    background: rgb(255, 255, 255);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(233, 234, 240, 1) 100%
    );
    background-image: url("../images/bubble_mobile.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 99%;
}

.rating {
    & input {
        appearance: none;
        border: none;
        background-color: #ffffff !important;
    }
}
.mask-star {
    background-color: #ffffff !important;
}

.custom-select {
    font-family: "Brother_1816_Medium", sans-serif;
    position: relative;
}
.alwaySHow {
    display: flex !important;
}
.custom-select select {
    display: none; /*hide original SELECT element:*/
}

.select-selected {
    background-color: transparent;
}

.select-selected:after {
    position: absolute;
    content: "";
    width: 29px;
    height: 18px;
    right: 0px;
    top: 20px;
    background-image: url("../images/arrow_dropdown.webp");
}
.select-selected.select-arrow-active:after {
    width: 29px;
    height: 18px;
    right: 0px;
    top: 20px;
    background-image: url("../images/arrow_dropdown_up.webp");
}
.select-selected {
    color: #000000;
    padding: 9px 5px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 1) transparent;
    cursor: pointer;
    user-select: none;
}
.select-items div {
    color: #000000;
    padding: 9px 5px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.3) transparent;
    cursor: pointer;
    user-select: none;
    background-color: #ffffff;
}
.select-items {
    position: absolute;
    background-color: transparent;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
.select-hide {
    display: none;
}
.select-items div:hover,
.same-as-selected {
    background-color: rgb(246, 246, 246);
}
.text-red {
    color: red !important;
}
@media (width >= 80rem) {
    #section_banner {
        background-image: url("../images/banner_hires_small.webp");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .custom-select {
        font-family: "Brother_1816_BOLD", sans-serif;
    }
    #section_thankyou {
        background: rgb(255, 255, 255);
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(216, 222, 229, 1) 100%
        );
        background-image: url("../images/bubble.png");
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 99%;
    }
}