@font-face {
    font-family: "Jameel Noori Nastaleeq";
    src: url("jameel.woff?v=3") format("woff"), url("jameel.ttf?v=3") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Jameel Noori Nastaleeq";
    src: url("jameel-kasheeda.woff?v=3") format("woff"), url("jameel-kasheeda.ttf?v=3") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body,
#main-container,
.panel,
.modal,
.table,
.form-control,
.btn,
label,
select,
textarea,
input,
button,
#hurdu,
#purdu {
    font-family: "Jameel Noori Nastaleeq", "Alvi Lahori Nastaleeq", "Alvi Nastaleeq", "Nafees Web Naskh", "Urdu Naskh Asiatype", Arial, Tahoma, sans-serif;
    letter-spacing: 0;
}

html[dir="rtl"],
body {
    direction: rtl;
    unicode-bidi: embed;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
}

h1, h2, h3, h4, h5, h6,
.panel-title,
.modal-title,
.table,
.table th,
.table td,
.nav,
.navigation,
.mainNav,
.sidebar-admin-name,
.sidebar-admin-role,
.alert,
.breadcrumb,
.pagination,
.legend-list,
.quick-link,
.metric-label,
.metric-value,
.metric-note,
.dash-role,
.dash-name,
.dash-meta,
option {
    font-family: "Jameel Noori Nastaleeq", "Alvi Lahori Nastaleeq", "Alvi Nastaleeq", "Nafees Web Naskh", "Urdu Naskh Asiatype", Arial, Tahoma, sans-serif !important;
}

select.form-control,
input.form-control,
textarea.form-control,
button,
.btn {
    font-family: "Jameel Noori Nastaleeq", "Alvi Lahori Nastaleeq", "Alvi Nastaleeq", "Nafees Web Naskh", "Urdu Naskh Asiatype", Arial, Tahoma, sans-serif;
}

#hurdu {
    font-size: 32px;
}

#purdu {
    font-size: 24px;
}

.fa,
[class^="fa-"],
[class*=" fa-"] {
    font-family: FontAwesome;
}

.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"] {
    font-family: "Glyphicons Halflings";
}

.ls-circle-widget {
    overflow: visible;
    padding-top: 18px;
}

.ls-circle-widget h1,
.ls-circle-widget:hover h1,
.ls-circle-widget.active h1 {
    opacity: 1;
    color: #fff;
    font-size: 22px;
    line-height: 1.45;
    padding: 0 8px;
    margin: 0;
}

.ls-circle-widget i,
.ls-circle-widget:hover i,
.ls-circle-widget.active i {
    display: block;
    line-height: 70px;
    padding-top: 18px;
    font-size: 46px;
}

/* Application-wide mobile layer. Desktop rules remain untouched. */
@media screen and (max-width: 991px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #main-container,
    #min-wrapper,
    #main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 100vh;
    }

    #min-wrapper {
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    #main-content {
        padding: 10px 0 24px !important;
    }

    #main-content > .container-fluid,
    #main-content .container-fluid {
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }

    #left-navigation {
        position: relative !important;
        inset: auto !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        z-index: 30;
    }

    #left-navigation .sidebar-brand-pad {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 12px !important;
    }

    #left-navigation .user-image {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px;
        margin: 0 !important;
    }

    #left-navigation .sidebar-admin-name {
        font-size: 19px !important;
        margin: 0 !important;
    }

    #left-navigation .phone-nav-box {
        display: block !important;
        padding: 8px 12px !important;
        text-align: center;
        cursor: pointer;
    }

    #left-navigation ul.mainNav {
        display: none !important;
        width: 100%;
        padding: 0 !important;
        max-height: 65vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #left-navigation ul.mainNav.is-mobile-open {
        display: block !important;
    }

    #left-navigation ul.mainNav li a {
        min-height: 46px;
        padding: 9px 14px !important;
        font-size: 21px !important;
    }

    #left-navigation ul.mainNav li ul.childNav li a {
        padding-right: 38px !important;
        font-size: 19px !important;
    }

    nav,
    .top-navigation,
    .top-navigation ul {
        max-width: 100%;
    }

    .top-navigation ul li a {
        padding: 8px 10px;
    }

    .navigation .container-fluid {
        min-height: 48px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .navigation .header-logo {
        max-width: calc(100% - 48px);
    }

    .top-navigation {
        max-width: 100%;
    }

    .top-navigation > ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0;
    }

    .top-navigation ul .package-countdown-li {
        max-width: calc(100vw - 70px);
        margin: 0 !important;
    }

    .top-navigation .package-countdown {
        max-width: 100%;
        margin-top: 4px !important;
        padding: 5px 8px !important;
        font-size: 16px !important;
        line-height: 1.5;
        white-space: normal;
    }

    .row {
        margin-right: -5px;
        margin-left: -5px;
    }

    [class*="col-xs-"], [class*="col-sm-"], [class*="col-md-"], [class*="col-lg-"] {
        min-width: 0;
        padding-right: 5px;
        padding-left: 5px;
    }

    .panel,
    .widget,
    .ls-widget-box,
    .modal-content {
        max-width: 100%;
    }

    .widget-head,
    .widget-body,
    .page-header,
    .page-title,
    .breadcrumb,
    .well {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .panel-heading,
    .panel-body,
    .modal-header,
    .modal-body,
    .modal-footer {
        padding-right: 10px;
        padding-left: 10px;
    }

    .panel-title,
    .modal-title,
    #hurdu {
        font-size: 26px;
        overflow-wrap: anywhere;
    }

    #purdu {
        font-size: 20px;
    }

    .form-control,
    input.form-control,
    select.form-control,
    textarea.form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 44px;
        font-size: 18px !important;
    }

    textarea.form-control {
        height: auto !important;
        min-height: 90px;
    }

    .form-horizontal .control-label {
        padding-top: 0;
        margin-bottom: 4px;
        text-align: right;
    }

    .input-group {
        width: 100%;
    }

    .form-group > [class*="col-"] {
        margin-bottom: 7px;
    }

    .btn,
    button,
    input[type="submit"] {
        max-width: 100%;
        min-height: 40px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .btn-group,
    .btn-toolbar,
    .client-heading-actions,
    .bs-filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-width: 100%;
    }

    .btn-group > .btn,
    .client-heading-actions > .btn,
    .client-heading-actions > a {
        float: none !important;
        margin: 0 !important;
        flex: 1 1 auto;
    }

    .table-responsive,
    .ls-table,
    .dataTables_wrapper,
    .tablewrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table,
    .ls-table > table,
    .dataTables_wrapper table {
        width: max-content !important;
        min-width: 720px;
        margin-bottom: 0;
    }

    table th,
    table td {
        white-space: normal;
        overflow-wrap: anywhere;
        vertical-align: middle !important;
    }

    table .btn {
        min-height: 32px;
        margin: 2px !important;
        padding: 4px 8px;
    }

    .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 20px);
        margin: 10px auto !important;
    }

    .modal-content {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }

    img,
    video,
    canvas,
    svg {
        max-width: 100%;
    }

    iframe,
    object,
    embed {
        max-width: 100%;
    }

    .chart,
    .chart-container,
    .flot-chart,
    .dashboard-chart,
    .dashboard-chart-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
    }

    .pagination > li > a,
    .pagination > li > span {
        float: none;
        padding: 6px 9px;
    }
}

@media screen and (max-width: 575px) {
    #main-content > .container-fluid,
    #main-content .container-fluid {
        padding-right: 7px;
        padding-left: 7px;
    }

    .panel-title,
    .modal-title,
    #hurdu {
        font-size: 23px;
    }

    #purdu {
        font-size: 18px;
    }

    .btn-lg {
        padding: 7px 11px;
        font-size: 18px;
    }

    .panel-body {
        padding: 8px;
    }

    #left-navigation .sidebar-brand-pad {
        padding: 7px 10px 5px !important;
    }

    #left-navigation .user-image {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 3px !important;
    }

    #left-navigation .sidebar-admin-name {
        font-size: 18px !important;
    }

    .btn-group,
    .btn-toolbar,
    .client-heading-actions,
    .bs-filter-actions {
        width: 100%;
    }

    .btn-group > .btn,
    .client-heading-actions > .btn,
    .client-heading-actions > a,
    .bs-filter-actions > .btn,
    .bs-filter-actions > a {
        flex: 1 1 calc(50% - 6px);
    }

    .nav-tabs,
    .nav-pills {
        display: flex;
        flex-wrap: wrap;
    }

    .nav-tabs > li,
    .nav-pills > li {
        float: none;
        flex: 1 1 50%;
        margin: 0;
    }

    .nav-tabs > li > a,
    .nav-pills > li > a {
        text-align: center;
        margin: 1px;
    }
}

@media print {
    #left-navigation,
    nav,
    .phone-nav-box,
    .no-print {
        display: none !important;
    }
}

.ls-circle-widget.square-hover:hover,
.ls-circle-widget.square-hover.active {
    border-radius: 50%;
}