@media (max-width: 1100px) {
    #loginMain {
        flex-direction: column;
        width: 100vw;
        height: auto;
    }
    #loginCol1 {
        padding: 100px 0px;
    }
    #loginCol1Logo {
        margin: 0px 0px 4vh 0px;
    }
    #loginCol1,
    #loginCol2 {
        width: 100%;
    }
}

@media (max-width: 700px) {
    #loginCol1 {
        padding: 30px 20px;
    }
    #loginCol1Content {
        width: 100%;
    }
    .loginCol1TextLine {
        font-size: 26px;
    }
}
@media (max-width: 1400px) {
    #indexMainMenu,
    #indexMainTopLogo {
        display: none;
    }

    .indexMain.menu-mobile-open #indexMainMenu {
        display: flex !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        z-index: 9999;
        box-shadow: 2px 0 10px rgba(0,0,0,0.3);
        padding-top: 60px;
    }

    .indexMain.menu-mobile-open #indexMainTopLogo {
        display: flex !important;
        position: fixed;
        left: 0;
        top: 0;
        width: 80px;
        height: 60px;
        z-index: 10000;
    }

    .indexMain.menu-mobile-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(2px);
        z-index: 9998;
    }
}

@media (max-width: 1350px) {
    .indexMainHomeContent {
        height: auto;
        overflow-y: visible;
    }
    .indexMainHomeLayout {
        flex-direction: column;
        height: auto;
    }
    .indexMainHomeLeft {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        overflow: visible;
    }
    .indexMainHome .indexMainHomeRight {
        width: 100%;
        height: auto;
    }
    .indexMainHomeSalesList {
        height: 500px;
    }
    .indexMainHome .indexMainHomeCardLarge {
        height: 500px;
        min-height: 500px;
        display: flex;
        flex-direction: column;
    }
    .indexMainHomeChartBody {
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .indexMainHomeChartArea {
        flex: 1;
        position: relative;
        height: 100%;
        display: block;
        padding-right: 20px;
    }
    .indexMainHomeChartBars {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: stretch;
    }
    .indexMainHomeChartTrack {
        height: 100%;
        display: flex;
        align-items: flex-end;
    }
}

@media (max-width: 1100px) {
    .indexMainContentBody { padding: 0px; }
    .indexMainHomeContent, .extractContent, .indexMainApi, .indexMainAdminContent { padding: 20px; }
    .indexMainHomeHeader, .extractHeader { padding: 20px; }
    .payContent { padding: 20px; }
    .payHeader { padding: 20px; }
    .indexMainApiGrid { grid-template-columns: 120px auto; row-gap: 8px; column-gap: 12px; }
    .indexMainApiTitle { font-size: 15px; }
    .indexMainApiLine { font-size: 13px; }
    .indexMainApiActions { justify-content: flex-start; }
    .indexMainApiCodeBox { font-size: 12px; }
    .indexMainMenu { width: 72px; min-width: 72px; flex: 0 0 72px; }
    .indexMainMenuItem { min-height: 60px; height: 60px; font-size: 15px; }
    .indexMain.menu-mobile-open #indexMainTopLogo { width: 72px; min-width: 72px; }
}

@media (max-width: 950px) {
    .indexMainHomeContent, .extractContent, .indexMainApi, .indexMainAdminContent { padding: 10px; }
    .indexMainHomeHeader, .extractHeader { padding: 10px; }
    .payContent { padding: 10px; }
    .payHeader { padding: 10px; }
}

@media (max-width: 900px) {
    .indexMainHomeTopRow {
        display: contents;
    }
    .indexMainHome .indexMainHomeCardSmall {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .indexMainHomeCardSmall:nth-child(1) { order: 1; }
    .indexMainHomeCardLarge { order: 2; margin-bottom: 20px; }
    .indexMainHomeCardSmall:nth-child(2) { order: 3; }
    .indexMainHomeCardSmall:nth-child(3) { order: 4; }
    .indexMainHomeCardFlags { order: 5; }

    .indexMainHomeFlagsList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .indexMainHomeFlagItem {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 800px) {
    .impersonateContainer {
        position: fixed;
        top: 75px;
        left: 10px;
        right: 10px;
        width: auto;
        margin-top: 0;
    }
    .impersonateContainer::before {
        display: none;
    }
    #indexMainTopBtnImpersonate.active::after {
        content: '';
        position: absolute;
        bottom: -22px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #FFFFFF;
        border-top: 1px solid #E0E0E0;
        border-left: 1px solid #E0E0E0;
        z-index: 2001;
    }
}

@media (max-width: 700px) {
    .indexMainContentBody { padding: 0px; }
    .indexMainHomeContent, .extractContent, .indexMainApi, .indexMainAdminContent { padding: 10px; }
    .indexMainHomeHeader, .extractHeader { padding: 10px; }
    .indexMainHome .indexMainHomeCardLarge {
        height: 350px;
        min-height: 350px;
    }
    .indexMainApiGrid { grid-template-columns: 1fr; row-gap: 8px; }
    .indexMainApiKey { font-size: 13px; }

    .indexMainApiTitle { font-size: 14px; }
    .indexMainApiLine { font-size: 12px; }

    .indexMainApiCodeBox { font-size: 12px; }
    .indexMainMenu { width: 64px; min-width: 64px; flex: 0 0 64px; }
    .indexMainMenuItem { min-height: 54px; height: 54px; font-size: 14px; }
    .indexMain.menu-mobile-open #indexMainTopLogo { width: 64px; min-width: 64px; }
}

@media (max-width: 600px) {
    .indexMainHome .indexMainHomeCardLarge {
        height: 320px;
        min-height: 320px;
    }
}

@media (max-width: 550px) {
    .indexMainHome .indexMainHomeCardLarge {        height: 290px;
        min-height: 290px;
    }
}


@media (max-width: 600px) {
    .extractFilters {
        flex-wrap: wrap;
    }
    .extractSearchContainer {
        order: 2;
        width: 100%;
        margin-right: 0;
    }
    .extractSearchContainer .extractSearchInput,
    .extractSearchContainer .extractSearchInput:focus {
        width: 100%;
    }
    .extractTitleFull {
        display: none;
    }
    .extractTitleAbbr {
        display: inline;
    }
    .indexMainTopProfileName,
    .indexMainTopProfileArrow {
        display: none;
    }
    .indexMainTopProfile {
        padding: 0 10px;
    }
    .indexMainTopProfileAvatar {
        margin-left: 0;
    }
    .slidePanel {
        width: calc(100% - 10px);
        max-width: 100%;
    }
    .slidePanelHeader, .slidePanelBody {
        padding: 15px;
    }
}

@media (max-width: 400px) {
    .indexMainTopBarRight {
        padding-right: 0;
    }
}

/* Pay Page Responsive */
@media (max-width: 900px) {
    .payContent {
        flex-direction: column;
    }
    .payColumnLeft, .payColumnRight {
        width: 100%;
        flex: auto;
        height: 50%;
    }
}

@media (max-width: 900px) {
    .paySubMenu #payMobileToggleHistory {
        display: flex;
    }
    .indexMainPay .payColumnRight {
        display: none;
    }
    .indexMainPay.show-history #payListLeft {
        display: none;
    }
    .indexMainPay.show-history #payMobileHistory {
        display: block;
    }
}