/*
====================================
large Screen - Others
====================================
*/
@media screen and (min-width: 1200px) and (max-width: 1399px) {



}

/*
====================================
Medium Screen - Others
====================================
*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .gap-x-40 {
        row-gap: 50px;
    }

    .sectionTop {
        flex-direction: column;
        align-items: start;
    }

}

/*
====================================
Small Screen - Tablate
====================================
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
    .gap-x-40 {
        row-gap: 45px;
    }

    .overview-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .sectionTop {
        flex-direction: column;
        align-items: start;
    }


}

/*
====================================
Xtra Small Screen - Small Mobile
====================================
*/
@media screen and (max-width: 767px) {
    .gap-x-40 {
        row-gap: 38px;
    }

    /* login page  */
    body.login-page {
        background: #FFF8DD !important;
    }
    .loginMian-area {
        gap: 22px;
    }
    .loginMian-area .loginFormWp {
        padding: 27px 21px;
        padding-top: 21px;
    }

    /* deshboard page  */

    .header-wrapper {
        justify-content: space-between;
    }

    .overview-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    /* operator area  */

    .riderList {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: unset;
    }
    .riderHeader {
        padding: 22px 16px;
    }
    .riderInfoCard {
        height: fit-content;
        max-height: fit-content;
        padding-block: 22px;
    }

    .sectionTop {
        flex-direction: column;
        align-items: start;
    }
    .filterWp h4 {
        display: none;
    }
    .sectionTopRight {
        flex-direction: column;
        gap: 8px;
    }
    .sectionTopRight > h4 {
        color: #000;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .firstSection {
        margin-top: 0;
    }
    .ContentSection {
        border-top: none;
    }
}



@media screen and (max-width: 575px) {

    .riderLicence {
        padding: 0;
        flex-direction: column;
        align-items: start;
        gap: 15px;
    }
    .riderBasicInfo {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .showPage {
        padding-inline: 0;
    }
    .selectOperators {
        padding-inline: 0;
    }
    .refresh {
        padding-inline: 0;
    }
    .refresh button span {
        display: none;
    }

}