/* стилі "налаштувань доступності" під ноути */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
    .settings-modal {
        width: 405px !important;
        height: 450px !important;
        padding: 0 30px 0 30px !important;


        position: fixed;
        top: 133px !important;
        right: 35px !important;
        z-index: 20 !important;
    }

    .settings-modal h3 {
        position: relative;
        top: 20px;
        left: 0px;
        font-size: 25px;
        margin-top: 0px;
        margin-bottom: 20px;
        font-family: Circe, sans-serif;
        color: #FBFFFF;
    }

    .settings-modal button {
        height: 40px !important;
        min-width: 50px !important;
    }

    .og_b1 {
        position: relative !important;
        top: -50px !important;
        left: 65px !important;
    }

    .og_b2 {
        position: relative !important;
        top: -50px !important;
        left: 80px !important;
        width: 70px;
    }

    .read_line {
        position: relative;
        top: -55px !important;
        left: 0px !important;
    }

    .underline_hover {
        position: relative;
        top: -55px !important;
        left: 0px !important;
    }

    .option-group-cancel {
        position: relative;
        top: -123px;
        left: 250px;
    }

    .settings-modal .close-button {
        width: 50px !important;
        height: 50px !important;
    }
}


@media screen and (min-width:425px) and (max-width:768px) {


    .header-button {
        max-width: 180px;
        left: 90px !important;
    }

    .header-button img {
        width: 30px !important;
        height: 30px !important;
    }

    .header-button p {
        margin-bottom: 0px;
        font-family: Circe, sans-serif;
        color: #fff;
        font-size: 3.75vw;
        line-height: 5.625vw;
        font-weight: 700;
        width: 110px !important;
    }

    .settings-modal {
        width: 359px !important;
        height: 587px !important;
        padding: 20px 20px !important;
        margin-top: 125px;
        top: 0% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .settings-modal h3 {
        position: relative;
        top: 0px;
        left: 0px;
        font-size: 25px;
        margin-top: 0px;
        margin-bottom: 20px;
        font-family: Circe, sans-serif;
        color: #FBFFFF;
    }

    .settings-modal .option-group p {
        top: -25% !important;
    }

    .settings-modal .option-group {
        margin-bottom: 0px !important;
    }

    .mob-switchers-div>.header-button {
        height: 10.968vw !important;
        z-index: 10;
    }

    .mob-switchers-div>.eng-ukr-switch-div {
        left: 88% !important;
        z-index: 10 !important;
    }
}

/* стилі "налаштувань доступності" під телефони */
@media screen and (min-width:360px) and (max-width: 425px) {
    @media screen and (min-width:375px) {
        .settings-modal {
            margin-top: 130px !important;
        }
    }

    @media screen and (max-width:425px) {
        .settings-modal {
            margin-top: 147px !important;
        }
    }

    .settings-modal {
        width: 359px !important;
        height: 587px !important;
        padding: 20px 20px !important;
        margin-top: 125px;
        top: 0% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .settings-modal h3 {
        position: relative;
        top: 0px;
        left: 0px;
        font-size: 25px;
        margin-top: 0px;
        margin-bottom: 20px;
        font-family: Circe, sans-serif;
        color: #FBFFFF;
    }

    .header-button {
        left: 75px !important;
        width: 175px !important;
    }

    .header-button img {
        width: 40px !important;
        height: 40px !important;
        left: 15px !important;
    }

    .settings-modal .option-group p {
        top: -25% !important;
    }

    .settings-modal .option-group {
        margin-bottom: 0px !important;
    }

    .mob-switchers-div>.header-button {
        height: 10.968vw !important;
        z-index: 10;
    }

    .mob-switchers-div>.eng-ukr-switch-div {
        left: 88% !important;
        z-index: 10 !important;
    }
    .mob-switchers-div>.eng-ukr-switch-div-2{
        display: flex;
            width: 3.968vw;
            height: 3.968vw;
            justify-content: center;
            align-items: center;
            border-radius: 0.661vw;
            background-color: #5150a3;
            text-decoration: none;
            position: absolute;
            top: 20px;
            left: 95%;
            transform: translate(-50%, 0%);
    }
    .popup {
        grid-template-columns: 250px !important;
        grid-template-rows: repeat(6, 100px) !important;
        grid-column-gap: 0px !important;
        grid-row-gap: 7px !important;
        max-width: 360px !important;
        height: 644px !important;
        top: 390px !important;
    }

    #visitSite1 {
        grid-area: 1 / 1 / 2 / 2 !important;
    }

    #visitSite2 {
        grid-area: 2 / 1 / 3 / 2 !important;
    }

    #visitSite3 {
        grid-area: 3 / 1 / 4 / 2 !important;
    }

    #visitSite4 {
        grid-area: 4 / 1 / 5 / 2 !important;
    }

    #visitSite5 {
        grid-area: 5 / 1 / 6 / 2 !important;
    }

    #visitSite6 {
        grid-area: 6 / 1 / 7 / 2 !important;
    }

    .btn-148 {
        height: 100px !important;
    }
}