#headerMenu {
    flex-direction: row-reverse !important;
}

.main-tabs {
    justify-content: right;
}

#mobile-menu-overlay {
    display: none;
}


@media (max-width: 700px) {
    #mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 101;
    }

    #headerMenu {
       flex-direction: column !important;
       position: absolute !important;
    }
    #header_top {
        position: relative;
    }
}

.login-modal-content {
    min-width: 300px;
}

#login-main {
    min-width: 290px;
}
.main-tabs > li:last-of-type {
    margin-right: 7px;
}
.main-tabs > li:first-of-type {
    margin-right: 0px;
}

@media (max-width: 700px) {
    #headerMenu {
        flex-direction: column !important;
        position: absolute !important;
    }
    .categories_list a {
        font-size: 11px;
        font-weight: bold;
        text-decoration: none;
        margin: 7px 0px;

    }
    .category {
      padding: 0; 
    }
    #header_top {
        position: relative;
        width: 100%;
    }

    #header_top #header_top_center {
        width: 100% !important;
        max-width: 100% !important;
    }

    #header_main {
        width: 100%;
        margin: 0px auto;
        overflow: hidden;
        /*height: 154px !important;*/
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        padding: 0;
    }
    #langs, #logo, #girl {
        display: none;
    }
    #header_main h1 {
        display: none;
    }
    .panel-title {
        color: inherit;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit;
    }

    #categories {
        width: 285px;
        margin: auto !important;
        padding: 30px 0px 20px;
        float: none;
        padding-top: 0;
        overflow: hidden;
        /*display: none;*/
    }

    #category_content {
        float: left;
        height: 0;
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
    }
    #content {
        margin: 0px auto;
        overflow: hidden;
        width: 100%;
        max-width: 412px;
    }

    #content-all-width {
        width: 100%;
    }

    body {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
        /*background-size: 0 0;*/
    }

    html {
        direction: ltr !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .modal-backdrop,
    .modal-backdrop.in {
        opacity: 0.7 !important;
    }

    .modal-dialog.no-ltr {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 95% !important;
    }

    .modal-header.no-ltr .close {
        display: block !important;
        float: none !important;
        text-align: right !important;
        margin: 0 0 4px 0 !important;
    }

    #myModalPlayer #video {
        direction: ltr !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    #myModalPlayer #video,
    #myModalPlayer #videoShort {
        max-height: 240px !important;
        height: 240px !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    .modal-content.no-ltr,
    .modal-body.no-ltr,
    .modal-header.no-ltr,
    #player-title,
    #bottom-title {
        direction: rtl !important;
        text-align: center !important;
    }

    #slogan {
        float: none;
        color: white;
        font-size: 21px;
        font-weight: bold;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 160px;
        line-height: 32px;
        margin-top: 0;
        width: 100%;
    }

    #content_seo {
        display: none !important;
    }

    #content_seo h2 {
        margin-top: 0 !important;
    }

    #footer {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    #footer_container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        text-align: center !important;
        direction: ltr !important;
    }

    #footer_table {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #footer_table td,
    #footer_table a,
    #footer_table tr {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    .footer_logo {
        display: none !important;
    }

    #designer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #footer_table td:has(> a[href="/ThankYouHE"]) {
        display: none !important;
    }

    #user-package-tb {
        width: 100% !important;
        table-layout: fixed !important;
        word-break: break-word !important;
        box-sizing: border-box !important;
    }

    /* screenshot 2: table columns - dates centered, name right-aligned for RTL */
    #user-package-tb > tbody > tr > td:nth-child(1) {
        text-align: right !important;
        width: 50% !important;
    }

    #user-package-tb > tbody > tr > td:nth-child(2),
    #user-package-tb > tbody > tr > td:nth-child(3) {
        text-align: center !important;
        width: 25% !important;
    }

    #user-package-tb td {
        padding: 8px 4px !important;
        font-size: 12px !important;
        word-break: break-word !important;
    }

    #package_continue-btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* screenshot 1: form labels and inputs centered */
    .get-confirm-filed-data {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .get-confirm-filed-data-inline {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 14px !important;
    }

    .get-confirm-filed-data-inline label {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    .get-confirm-filed-data-inline input {
        margin-right: 0 !important;
        text-align: center !important;
        width: 90% !important;
    }

    /* Phone: center the number inside the full-width input */
    #user-phone {
        text-align: center !important;
        width: 100% !important;
    }

    div.intl-tel-input {
        display: block !important;
        width: 90% !important;
    }

    #getconfirm-codes-form-content {
        height: auto !important;
        text-align: center !important;
    }

    /* FTP tab: prevent wide database content from expanding the mobile viewport */
    #collapse8,
    #collapse8 .panel-body,
    #ftp {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #collapse8 pre,
    #collapse8 code,
    #ftp pre,
    #ftp code {
        white-space: pre-wrap !important;
        word-break: break-all !important;
        overflow-x: hidden !important;
        font-size: 11px !important;
        max-width: 100% !important;
    }

    #collapse8 img,
    #ftp img {
        max-width: 100% !important;
        height: auto !important;
    }

    #collapse8 table,
    #ftp table {
        max-width: 100% !important;
        table-layout: fixed !important;
        word-break: break-word !important;
    }

    #collapse8 td, #collapse8 th,
    #ftp td, #ftp th {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Diploma tab native selects are select2 backing elements — keep them hidden */
    #ddlCourses,
    #ddlSpeciality,
    #ddlCourseYears,
    #ddlSpecialityYears {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 6px !important;
        display: none !important;
    }

    #collapse11 .table-button,
    #collapse11 .right-table-button {
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 6px 0 !important;
    }

    #collapse11 input[type="text"] {
        width: 80px !important;
    }

    /* screenshot 5: GetPC - constrain images to screen width */
    #left-PC,
    #right-PC {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #passport-image-data img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .allowed-pc-item {
        width: 100% !important;
    }
    }
}