﻿
@media(max-width: 1400px) {
    .service-history-table {
        overflow-x: auto;
    }

    .service-history-table .al-tableOuter {
        width: 1500px !important;
    }
}

.clsSeviceDetailTags {
    display: inline-block;
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 6px 1px;
    margin: 2px 0;
}

.modal {
    overflow-x: hidden;
    padding-inline: 24px;
}

.cardList-TwoColumn > * {
    max-width: calc(50% - 5px);
}

.topHeaderOuter .cardList-outer {
    border: none;
}

#mySidebarNotification {
    height: 100%;
    overflow: scroll;
}

.homeColumns-Outer {
    margin-bottom: 10px;
}

.mutliSelectbillingcycle li {
    position: relative;
}

.mutliSelectbillingcycle li .checkbox input[type="checkbox"] {
    position: absolute;
    left: 0;
}

.mutliSelectbillingcycle li .checkbox {
    padding-left: 18px;
}

.closeBtn, button.gm-ui-hover-effect, button.custom-close-popup {
    border-radius: 50%;
}

/**/
@media(max-width: 1439px) {
    .customerServiceLoc-outer .select2.select2-container.select2-container--default {
        width: 460px !important;
    }

    .al-largeScroll-x, .al-mediumscroll-x {
        overflow: auto
    }

    .al-largeScroll-x .tabUnorder-List, .al-largeScroll-x .dataTables_wrapper {
        width: 1400px;
        max-width: initial;
    }

    .al-tableScroll {
        overflow-x:auto !important;
    }

    .al-tableScroll .al-tableOuter {
        width: 1500px !important;
    }

    .al-popupTable {
        overflow-x: auto !important;
    }

    .al-popupTable > div {
        width:900px !important;
    }

    .menuListOuter > li > a {
        padding: 10px 0px 10px 15px;
    }

    #sidebar {
        width: 180px;
    }

    .service_infodescription strong span {
        padding: 2px 8px !important;
    }

    #divRecentActivity .cardRow {
        padding: 5px 0px;
    }

    .innerCard-Content .innerCard-Title, .innerCard-Title,
    .cardList-outer .innerCard-count,
    .menuListOuter > li > a, .sidebar-submenu li a {
        font-size: 14px;
    }

    .sidebarCollapsed .menuListOuter > li > a svg, .menuListOuter > li > a svg {
        width: 16px;
        flex: 0 0 16px;
    }

    .sidebarCollapsed #sidebar {
        width: 52px;
    }

    .sidebarCollapsed #content {
        padding-left: 52px
    }
}


@media(max-width: 1279px) {
    .admin-form-outer .admin-login-form {
        padding: 70px 75px 55px;
    }

    body.login-cls .admin-form-outer .admin-login-form .admin-form-main-title-image {
        max-width: 350px;
        margin: 0 auto;
    }

    .multiregion-cls.hollisiter_league_display {
        width: 250px !important
    }

    .multiregion-cls.hollisiter_league_display .multipleSelectOption {
        width: calc(100% - 117px) !important;
    }

    .menuListOuter .sidebar-submenu {
        max-height: 300px;
        overflow: auto;
    }

    .multi-filters.filterDropown_full .dispatch-filter-content .row [class*="col-"] {
        width: 20%;
    }

}

@media(max-width: 1199px) {
    .cardTitle {
        font-size: 14px;
    }

    .al-ModalOuter .form-label, .modal .form-label, .al-formOuterWrap .form-label, .al-LargeFields .al-sameFields .form-label {
        max-width: 90px;
    }

    .Inner-fieldOuter, .al-LargeFields .al-sameFields .Inner-fieldOuter {
        max-width: calc(100% - 130px);
    }

    .homeColumns-Outer {
        max-height: 650px;
        overflow-y: auto;
    }
}


@media(max-width: 1023px) {
    .topHeaderSearch-Outer .search-box {
        width: 200px;
    }

    .topHeaderOuter .overlay {
        right: -120%;
    }

    .tabUnorder-List .nav-link, .tabUnorder-List a {
        padding: 10px 18px;
    }

    .al-TableScroll-x {
        overflow: auto;
    }

    .al-TableScroll-x .al-tableOuter {
        width: 1086px
    }
}


@media(max-width: 799px) {
    .al-mediumscroll-x .tabUnorder-List, .al-mediumscroll-x .dataTables_wrapper {
        width: 692px;
        max-width: initial;
    }
}

@media(max-width:574px) {
    #mySidebarNotification, #mySidebaruser {
        width: 100% !important;
    }
}
