/* ############################################################################################################################ */
/* ############################################################################################################################ */
@media (max-width: 479px) {
    .container-blocks-account-frame {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 100vh;
    }
    .blocks-account-frame {
        display: flex;
        width: 97%;
    }
    .container-content-account-frame {
        display: flex;
        flex-direction: column;
    }

    /* другое отображение для мобильной версии */
    .block-menu-account-frame {
        display: flex;
        min-width: 160px;
        border: 1px solid #2b2a4c;
        border-radius: 5px;
        background-color: #2b2a4c;
        flex-direction: column;
        font-size: 14px;
        gap: 20px;
        position: absolute;
        left: 5px;
        margin-top: 60px;
        z-index: 10;

        transform: translateX(0%);
        transition: transform 0.5s;
    }
    .block-menu-account-frame.not-active {
        transform: translateX(-110%);
    }

    /* ярлык открытия бокового меню */
    .label-menu-mob-open {
        position: absolute;
        display: flex;
        width: 50px;
        height: 50px;
        border: 1px solid #2b2a4c;
        margin-top: 65px;
        left: -27px;
        background-color: #2b2a4c;
        z-index: 10;
        border-radius: 50%;
        color: white;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;

        transform: translateX(0%);
        transition: transform 0.2s;
    }
    .label-menu-mob-open.not-active {
        transform: translateX(-50%);
    }

    .label-menu-mob-close {
        color: white;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }



    .symbol-open {
        font-size: 22px;
        margin-right: 3px;
    }
    .symbol-close {
        font-size: 22px;
        margin-right: 8px;
        cursor: pointer;
    }



    .btn-menu-account-frame {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: flex-end;
        text-decoration: none;
        color: #8E8E8E;
        padding: 0 15px;
    }
    .active-menu-account-frame {
        color: white !important;
        font-size: 16px !important;
    }
    .menu-account-frame-first-btn {
        margin-top: 10px;
    }

    .block-content-account-frame {
        display: flex;
        overflow-y: auto;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 15px;
    }

}




/* ############################################################################################################################ */
/* ############################################################################################################################ */
@media (min-width: 480px) and (max-width: 639px) {
    .container-blocks-account-frame {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 100vh;
    }
    .blocks-account-frame {
        display: flex;
        width: 95%;
        min-width: 465px;
    }
    .container-content-account-frame {
        display: flex;
        flex-direction: column;
    }

    /* другое отображение для мобильной версии */
    .block-menu-account-frame {
        display: flex;
        min-width: 160px;
        border: 1px solid #2b2a4c;
        border-radius: 5px;
        background-color: #2b2a4c;
        flex-direction: column;
        font-size: 14px;
        gap: 20px;
        position: absolute;
        left: 5px;
        margin-top: 60px;
        z-index: 10;

        transform: translateX(0%);
        transition: transform 0.5s;
    }
    .block-menu-account-frame.not-active {
        transform: translateX(-110%);
    }

    /* ярлык открытия бокового меню */
    .label-menu-mob-open {
        position: absolute;
        display: flex;
        width: 50px;
        height: 50px;
        border: 1px solid #2b2a4c;
        margin-top: 65px;
        left: -27px;
        background-color: #2b2a4c;
        z-index: 10;
        border-radius: 50%;
        color: white;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;

        transform: translateX(0%);
        transition: transform 0.2s;
    }
    .label-menu-mob-open.not-active {
        transform: translateX(-50%);
    }

    .label-menu-mob-close {
        color: white;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }



    .symbol-open {
        font-size: 22px;
        margin-right: 3px;
    }
    .symbol-close {
        font-size: 22px;
        margin-right: 8px;
        cursor: pointer;
    }



    .btn-menu-account-frame {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: flex-end;
        text-decoration: none;
        color: #8E8E8E;
        padding: 0 15px;
    }
    .active-menu-account-frame {
        color: white !important;
        font-size: 16px !important;
    }
    .menu-account-frame-first-btn {
        margin-top: 10px;
    }

    .block-content-account-frame {
        display: flex;
        overflow-y: auto;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

}




/* ############################################################################################################################ */
/* ############################################################################################################################ */
@media (min-width: 640px) and (max-width: 959px) {
    .container-blocks-account-frame {
        width: 100%;
        display: flex;
        justify-content: center;
        height: 100vh;
    }
    .blocks-account-frame {
        display: flex;
        width: 95%;
        min-width: 635px;
    }
    .container-content-account-frame {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* другое отображение для мобильной версии */
    .block-menu-account-frame {
        display: flex;
        min-width: 170px;
        border: 1px solid #2b2a4c;
        border-radius: 5px;
        background-color: #2b2a4c;
        flex-direction: column;
        font-size: 14px;
        gap: 20px;
        position: absolute;
        left: 5px;
        margin-top: 60px;
        z-index: 10;

        transform: translateX(0%);
        transition: transform 0.5s;
    }
    .block-menu-account-frame.not-active {
        transform: translateX(-110%);
    }

    /* ярлык открытия бокового меню */
    .label-menu-mob-open {
        position: absolute;
        display: flex;
        width: 50px;
        height: 50px;
        border: 1px solid #2b2a4c;
        margin-top: 65px;
        left: -27px;
        background-color: #2b2a4c;
        z-index: 10;
        border-radius: 50%;
        color: white;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;

        transform: translateX(0%);
        transition: transform 0.2s;
    }
    .label-menu-mob-open.not-active {
        transform: translateX(-50%);
    }

    .label-menu-mob-close {
        color: white;
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }



    .symbol-open {
        font-size: 22px;
        margin-right: 3px;
    }
    .symbol-close {
        font-size: 22px;
        margin-right: 8px;
        cursor: pointer;
    }



    .btn-menu-account-frame {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: flex-end;
        text-decoration: none;
        color: #8E8E8E;
        padding: 0 15px;
    }
    .active-menu-account-frame {
        color: white !important;
        font-size: 16px !important;
    }
    .menu-account-frame-first-btn {
        margin-top: 10px;
    }

    .block-content-account-frame {
        display: flex;
        overflow-y: auto;
        justify-content: center;
        margin-bottom: 15px;
    }
    
}





/* ############################################################################################################################ */
/* ############################################################################################################################ */
@media (min-width: 960px) and (max-width: 1199px) {
    .container-blocks-account-frame {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        height: calc(100vh - 80px);
    }
    .container-content-account-frame {
        display: flex;
        flex-direction: column;
        width: 750px;
    }
    .blocks-account-frame {
        display: flex;
        width: 954px;
    }
    .block-menu-account-frame {
        display: flex;
        min-width: 235px;
        border: 1px solid #2b2a4c;
        border-radius: 5px;
        background-color: #2b2a4c;
        flex-direction: column;
        font-size: 14px;
        gap: 20px;
    }
    .btn-menu-account-frame {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: flex-end;
        text-decoration: none;
        color: #8E8E8E;
        padding: 0 10px;
    }
    .menu-account-frame-first-btn {
        margin-top: 50px;
    }
    .active-menu-account-frame {
        color: white !important;
        font-size: 16px !important;
    }

    /* ярлык открытия бокового меню */
    .label-menu-mob-open {
        display: none;
    }
    .label-menu-mob-close {
        display: none;
    }

    .block-content-account-frame {
        display: flex;
        height: calc(100vh - 80px);
        overflow-y: auto;
    }
    
}






/* ############################################################################################################################ */
/* ############################################################################################################################ */
@media (min-width: 1200px) {
    .container-blocks-account-frame {
        width: 99%;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        height: calc(100vh - 85px);
    }
    .container-content-account-frame {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .blocks-account-frame {
        display: flex;
        width: 90%;
        min-width: 1160px;
        max-width: 1250px;
    }
    .block-menu-account-frame {
        display: flex;
        min-width: 234px;
        border: 1px solid #2b2a4c;
        border-radius: 5px;
        background-color: #2b2a4c;
        flex-direction: column;
        font-size: 14px;
        gap: 20px;
    }
    .btn-menu-account-frame {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: flex-end;
        text-decoration: none;
        color: #8E8E8E;
        padding: 0 10px;
    }
    .menu-account-frame-first-btn {
        margin-top: 50px;
    }
    .active-menu-account-frame {
        color: white !important;
        font-size: 16px !important;
    }

    /* ярлык открытия бокового меню */
    .label-menu-mob-open {
        display: none;
    }
    .label-menu-mob-close {
        display: none;
    }

    .block-content-account-frame {
        display: flex;
        height: calc(100vh - 80px);
        overflow-y: auto;
    }


}


.hidden {
    display: none;
}