@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap");

:root {
    --primary: #2C4180;
    --dark-primary: #2db3d6;
    --app-primary: #744aa1;
    --app-secondary-light: #b5e7f1;
    --app-secondary: #2db3d6;
}

* {
    font-family: var(--app-font);
    text-align: right !important;
}

a:hover {
    color: var(--app-primary);
}

input {
    text-align: right !important;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased
}

.glyphicon-asterisk:before {
    content: "\002a"
}

.glyphicon-plus:before {
    content: "\002b"
}

.glyphicon-euro:before,
.glyphicon-eur:before {
    content: "\20ac"
}

.glyphicon-minus:before {
    content: "\2212"
}

.glyphicon-cloud:before {
    content: "\2601"
}

.glyphicon-envelope:before {
    content: "\2709"
}

.glyphicon-pencil:before {
    content: "\270f"
}

.glyphicon-glass:before {
    content: "\e001"
}

.glyphicon-music:before {
    content: "\e002"
}

.glyphicon-search:before {
    content: "\e003"
}

.glyphicon-heart:before {
    content: "\e005"
}

.glyphicon-star:before {
    content: "\e006"
}

.glyphicon-star-empty:before {
    content: "\e007"
}

.glyphicon-user:before {
    content: "\e008"
}

.glyphicon-film:before {
    content: "\e009"
}

.glyphicon-th-large:before {
    content: "\e010"
}

.glyphicon-th:before {
    content: "\e011"
}

.glyphicon-th-list:before {
    content: "\e012"
}

.glyphicon-ok:before {
    content: "\e013"
}

.glyphicon-remove:before {
    content: "\e014"
}

.glyphicon-zoom-in:before {
    content: "\e015"
}

.glyphicon-zoom-out:before {
    content: "\e016"
}

.glyphicon-off:before {
    content: "\e017"
}

.glyphicon-signal:before {
    content: "\e018"
}

.glyphicon-cog:before {
    content: "\e019"
}

.glyphicon-trash:before {
    content: "\e020"
}

.glyphicon-home:before {
    content: "\e021"
}

.glyphicon-file:before {
    content: "\e022"
}

.glyphicon-time:before {
    content: "\e023"
}

.glyphicon-road:before {
    content: "\e024"
}

.glyphicon-download-alt:before {
    content: "\e025"
}

.glyphicon-download:before {
    content: "\e026"
}

.glyphicon-upload:before {
    content: "\e027"
}

.glyphicon-inbox:before {
    content: "\e028"
}

.glyphicon-play-circle:before {
    content: "\e029"
}

.glyphicon-repeat:before {
    content: "\e030"
}

.glyphicon-refresh:before {
    content: "\e031"
}

.glyphicon-list-alt:before {
    content: "\e032"
}

.glyphicon-lock:before {
    content: "\e033"
}

.glyphicon-flag:before {
    content: "\e034"
}

.glyphicon-headphones:before {
    content: "\e035"
}

.glyphicon-volume-off:before {
    content: "\e036"
}

.glyphicon-volume-down:before {
    content: "\e037"
}

.glyphicon-volume-up:before {
    content: "\e038"
}

.glyphicon-qrcode:before {
    content: "\e039"
}

.glyphicon-barcode:before {
    content: "\e040"
}

.glyphicon-tag:before {
    content: "\e041"
}

.glyphicon-tags:before {
    content: "\e042"
}

.glyphicon-book:before {
    content: "\e043"
}

.glyphicon-bookmark:before {
    content: "\e044"
}

.glyphicon-print:before {
    content: "\e045"
}

.glyphicon-camera:before {
    content: "\e046"
}

.glyphicon-font:before {
    content: "\e047"
}

.glyphicon-bold:before {
    content: "\e048"
}

.glyphicon-italic:before {
    content: "\e049"
}

.glyphicon-text-height:before {
    content: "\e050"
}

.glyphicon-text-width:before {
    content: "\e051"
}

.glyphicon-align-left:before {
    content: "\e052"
}

.glyphicon-align-center:before {
    content: "\e053"
}

.glyphicon-align-right:before {
    content: "\e054"
}

.glyphicon-align-justify:before {
    content: "\e055"
}

.glyphicon-list:before {
    content: "\e056"
}

.glyphicon-indent-left:before {
    content: "\e057"
}

.glyphicon-indent-right:before {
    content: "\e058"
}

.glyphicon-facetime-video:before {
    content: "\e059"
}

.glyphicon-picture:before {
    content: "\e060"
}

.glyphicon-map-marker:before {
    content: "\e062"
}

.glyphicon-adjust:before {
    content: "\e063"
}

.glyphicon-tint:before {
    content: "\e064"
}

.glyphicon-edit:before {
    content: "\e065"
}

.glyphicon-share:before {
    content: "\e066"
}

.glyphicon-check:before {
    content: "\e067"
}

.glyphicon-move:before {
    content: "\e068"
}

.glyphicon-step-backward:before {
    content: "\e069"
}

.glyphicon-fast-backward:before {
    content: "\e070"
}

.glyphicon-backward:before {
    content: "\e071"
}

.glyphicon-play:before {
    content: "\e072"
}

.glyphicon-pause:before {
    content: "\e073"
}

.glyphicon-stop:before {
    content: "\e074"
}

.glyphicon-forward:before {
    content: "\e075"
}

.glyphicon-fast-forward:before {
    content: "\e076"
}

.glyphicon-step-forward:before {
    content: "\e077"
}

.glyphicon-eject:before {
    content: "\e078"
}

.glyphicon-chevron-left:before {
    content: "\e079"
}

.glyphicon-chevron-right:before {
    content: "\e080"
}

.glyphicon-plus-sign:before {
    content: "\e081"
}

.glyphicon-minus-sign:before {
    content: "\e082"
}

.glyphicon-remove-sign:before {
    content: "\e083"
}

.glyphicon-ok-sign:before {
    content: "\e084"
}

.glyphicon-question-sign:before {
    content: "\e085"
}

.glyphicon-info-sign:before {
    content: "\e086"
}

.glyphicon-screenshot:before {
    content: "\e087"
}

.glyphicon-remove-circle:before {
    content: "\e088"
}

.glyphicon-ok-circle:before {
    content: "\e089"
}

.glyphicon-ban-circle:before {
    content: "\e090"
}

.glyphicon-arrow-left:before {
    content: "\e091"
}

.glyphicon-arrow-right:before {
    content: "\e092"
}

.glyphicon-arrow-up:before {
    content: "\e093"
}

.glyphicon-arrow-down:before {
    content: "\e094"
}

.glyphicon-share-alt:before {
    content: "\e095"
}

.glyphicon-resize-full:before {
    content: "\e096"
}

.glyphicon-resize-small:before {
    content: "\e097"
}

.glyphicon-exclamation-sign:before {
    content: "\e101"
}

.glyphicon-gift:before {
    content: "\e102"
}

.glyphicon-leaf:before {
    content: "\e103"
}

.glyphicon-fire:before {
    content: "\e104"
}

.glyphicon-eye-open:before {
    content: "\e105"
}

.glyphicon-eye-close:before {
    content: "\e106"
}

.glyphicon-warning-sign:before {
    content: "\e107"
}

.glyphicon-plane:before {
    content: "\e108"
}

.glyphicon-calendar:before {
    content: "\e109"
}

.glyphicon-random:before {
    content: "\e110"
}

.glyphicon-comment:before {
    content: "\e111"
}

.glyphicon-magnet:before {
    content: "\e112"
}

.glyphicon-chevron-up:before {
    content: "\e113"
}

.glyphicon-chevron-down:before {
    content: "\e114"
}

.glyphicon-retweet:before {
    content: "\e115"
}

.glyphicon-shopping-cart:before {
    content: "\e116"
}

.glyphicon-folder-close:before {
    content: "\e117"
}

.glyphicon-folder-open:before {
    content: "\e118"
}

.glyphicon-resize-vertical:before {
    content: "\e119"
}

.glyphicon-resize-horizontal:before {
    content: "\e120"
}

.glyphicon-hdd:before {
    content: "\e121"
}

.glyphicon-bullhorn:before {
    content: "\e122"
}

.glyphicon-bell:before {
    content: "\e123"
}

.glyphicon-certificate:before {
    content: "\e124"
}

.glyphicon-thumbs-up:before {
    content: "\e125"
}

.glyphicon-thumbs-down:before {
    content: "\e126"
}

.glyphicon-hand-right:before {
    content: "\e127"
}

.glyphicon-hand-left:before {
    content: "\e128"
}

.glyphicon-hand-up:before {
    content: "\e129"
}

.glyphicon-hand-down:before {
    content: "\e130"
}

.glyphicon-circle-arrow-right:before {
    content: "\e131"
}

.glyphicon-circle-arrow-left:before {
    content: "\e132"
}

.glyphicon-circle-arrow-up:before {
    content: "\e133"
}

.glyphicon-circle-arrow-down:before {
    content: "\e134"
}

.glyphicon-globe:before {
    content: "\e135"
}

.glyphicon-wrench:before {
    content: "\e136"
}

.glyphicon-tasks:before {
    content: "\e137"
}

.glyphicon-filter:before {
    content: "\e138"
}

.glyphicon-briefcase:before {
    content: "\e139"
}

.glyphicon-fullscreen:before {
    content: "\e140"
}

.glyphicon-dashboard:before {
    content: "\e141"
}

.glyphicon-paperclip:before {
    content: "\e142"
}

.glyphicon-heart-empty:before {
    content: "\e143"
}

.glyphicon-link:before {
    content: "\e144"
}

.glyphicon-phone:before {
    content: "\e145"
}

.glyphicon-pushpin:before {
    content: "\e146"
}

.glyphicon-usd:before {
    content: "\e148"
}

.glyphicon-gbp:before {
    content: "\e149"
}

.glyphicon-sort:before {
    content: "\e150"
}

.glyphicon-sort-by-alphabet:before {
    content: "\e151"
}

.glyphicon-sort-by-alphabet-alt:before {
    content: "\e152"
}

.glyphicon-sort-by-order:before {
    content: "\e153"
}

.glyphicon-sort-by-order-alt:before {
    content: "\e154"
}

.glyphicon-sort-by-attributes:before {
    content: "\e155"
}

.glyphicon-sort-by-attributes-alt:before {
    content: "\e156"
}

.glyphicon-unchecked:before {
    content: "\e157"
}

.glyphicon-expand:before {
    content: "\e158"
}

.glyphicon-collapse-down:before {
    content: "\e159"
}

.glyphicon-collapse-up:before {
    content: "\e160"
}

.glyphicon-log-in:before {
    content: "\e161"
}

.glyphicon-flash:before {
    content: "\e162"
}

.glyphicon-log-out:before {
    content: "\e163"
}

.glyphicon-new-window:before {
    content: "\e164"
}

.glyphicon-record:before {
    content: "\e165"
}

.glyphicon-save:before {
    content: "\e166"
}

.glyphicon-open:before {
    content: "\e167"
}

.glyphicon-saved:before {
    content: "\e168"
}

.glyphicon-import:before {
    content: "\e169"
}

.glyphicon-export:before {
    content: "\e170"
}

.glyphicon-send:before {
    content: "\e171"
}

.glyphicon-floppy-disk:before {
    content: "\e172"
}

.glyphicon-floppy-saved:before {
    content: "\e173"
}

.glyphicon-floppy-remove:before {
    content: "\e174"
}

.glyphicon-floppy-save:before {
    content: "\e175"
}

.glyphicon-floppy-open:before {
    content: "\e176"
}

.glyphicon-credit-card:before {
    content: "\e177"
}

.glyphicon-transfer:before {
    content: "\e178"
}

.glyphicon-cutlery:before {
    content: "\e179"
}

.glyphicon-header:before {
    content: "\e180"
}

.glyphicon-compressed:before {
    content: "\e181"
}

.glyphicon-earphone:before {
    content: "\e182"
}

.glyphicon-phone-alt:before {
    content: "\e183"
}

.glyphicon-tower:before {
    content: "\e184"
}

.glyphicon-stats:before {
    content: "\e185"
}

.glyphicon-sd-video:before {
    content: "\e186"
}

.glyphicon-hd-video:before {
    content: "\e187"
}

.glyphicon-subtitles:before {
    content: "\e188"
}

.glyphicon-sound-stereo:before {
    content: "\e189"
}

.glyphicon-sound-dolby:before {
    content: "\e190"
}

.glyphicon-sound-5-1:before {
    content: "\e191"
}

.glyphicon-sound-6-1:before {
    content: "\e192"
}

.glyphicon-sound-7-1:before {
    content: "\e193"
}

.glyphicon-copyright-mark:before {
    content: "\e194"
}

.glyphicon-registration-mark:before {
    content: "\e195"
}

.glyphicon-cloud-download:before {
    content: "\e197"
}

.glyphicon-cloud-upload:before {
    content: "\e198"
}

.glyphicon-tree-conifer:before {
    content: "\e199"
}

.glyphicon-tree-deciduous:before {
    content: "\e200"
}

.glyphicon-cd:before {
    content: "\e201"
}

.glyphicon-save-file:before {
    content: "\e202"
}

.glyphicon-open-file:before {
    content: "\e203"
}

.glyphicon-level-up:before {
    content: "\e204"
}

.glyphicon-copy:before {
    content: "\e205"
}

.glyphicon-paste:before {
    content: "\e206"
}

.glyphicon-alert:before {
    content: "\e209"
}

.glyphicon-equalizer:before {
    content: "\e210"
}

.glyphicon-king:before {
    content: "\e211"
}

.glyphicon-queen:before {
    content: "\e212"
}

.glyphicon-pawn:before {
    content: "\e213"
}

.glyphicon-bishop:before {
    content: "\e214"
}

.glyphicon-knight:before {
    content: "\e215"
}

.glyphicon-baby-formula:before {
    content: "\e216"
}

.glyphicon-tent:before {
    content: "\26fa"
}

.glyphicon-blackboard:before {
    content: "\e218"
}

.glyphicon-bed:before {
    content: "\e219"
}

.glyphicon-apple:before {
    content: "\f8ff"
}

.glyphicon-erase:before {
    content: "\e221"
}

.glyphicon-hourglass:before {
    content: "\231b"
}

.glyphicon-lamp:before {
    content: "\e223"
}

.glyphicon-duplicate:before {
    content: "\e224"
}

.glyphicon-piggy-bank:before {
    content: "\e225"
}

.glyphicon-scissors:before {
    content: "\e226"
}

.glyphicon-bitcoin:before {
    content: "\e227"
}

.glyphicon-btc:before {
    content: "\e227"
}

.glyphicon-xbt:before {
    content: "\e227"
}

.glyphicon-yen:before {
    content: "\00a5"
}

.glyphicon-jpy:before {
    content: "\00a5"
}

.glyphicon-ruble:before {
    content: "\20bd"
}

.glyphicon-rub:before {
    content: "\20bd"
}

.glyphicon-scale:before {
    content: "\e230"
}

.glyphicon-ice-lolly:before {
    content: "\e231"
}

.glyphicon-ice-lolly-tasted:before {
    content: "\e232"
}

.glyphicon-education:before {
    content: "\e233"
}

.glyphicon-option-horizontal:before {
    content: "\e234"
}

.glyphicon-option-vertical:before {
    content: "\e235"
}

.glyphicon-menu-hamburger:before {
    content: "\e236"
}

.glyphicon-modal-window:before {
    content: "\e237"
}

.glyphicon-oil:before {
    content: "\e238"
}

.glyphicon-grain:before {
    content: "\e239"
}

.glyphicon-sunglasses:before {
    content: "\e240"
}

.glyphicon-text-size:before {
    content: "\e241"
}

.glyphicon-text-color:before {
    content: "\e242"
}

.glyphicon-text-background:before {
    content: "\e243"
}

.glyphicon-object-align-top:before {
    content: "\e244"
}

.glyphicon-object-align-bottom:before {
    content: "\e245"
}

.glyphicon-object-align-horizontal:before {
    content: "\e246"
}

.glyphicon-object-align-left:before {
    content: "\e247"
}

.glyphicon-object-align-vertical:before {
    content: "\e248"
}

.glyphicon-object-align-right:before {
    content: "\e249"
}

.glyphicon-triangle-right:before {
    content: "\e250"
}

.glyphicon-triangle-left:before {
    content: "\e251"
}

.glyphicon-triangle-bottom:before {
    content: "\e252"
}

.glyphicon-triangle-top:before {
    content: "\e253"
}

.glyphicon-console:before {
    content: "\e254"
}

.glyphicon-superscript:before {
    content: "\e255"
}

.glyphicon-subscript:before {
    content: "\e256"
}

.glyphicon-menu-left:before {
    content: "\e257"
}

.glyphicon-menu-right:before {
    content: "\e258"
}

.glyphicon-menu-down:before {
    content: "\e259"
}

.glyphicon-menu-up:before {
    content: "\e260"
}

.left_col {
    /* background: #2A3F54 */
    background: white;
}

.container {
    width: 100%;
    padding: 0;
    max-width: 100%
}

.nav-sm .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 70px;
    padding: 0;
    z-index: 9999;
    right: 0;
    position: absolute
}

.nav-sm .container.body .col-md-3.left_col.menu_fixed {
    position: fixed;
    height: 100%
}

.nav-sm .container.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox {
    overflow: visible
}

.nav-sm .hidden-small {
    visibility: hidden
}

.nav-sm .container.body .right_col {
    padding: 10px 20px;
    margin-right: 70px;
    z-index: 2
}

.nav-sm .navbar.nav_title {
    width: 70px
}

.nav-sm .navbar.nav_title a span {
    display: none
}

.nav-sm .navbar.nav_title a i {
    font-size: 27px;
    margin: 13px 0 0 3px
}

.nav-sm .main_container .top_nav {
    display: block;
    margin-left: 70px;
    z-index: 2
}

.nav-sm .nav.side-menu li a {
    text-align: center !important;
    font-weight: bold;
    font-size: 12px;
    padding: 10px 5px;
    text-align: center !important;
}

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active-sm {
    border-right: 5px solid var(--app-primary)
}

.nav-sm ul.nav.child_menu ul,
.nav-sm .nav.side-menu li.active-sm ul ul {
    position: static;
    width: 200px;
    background: none
}

.nav-sm>.nav.side-menu>li.active-sm>a {
    color: #1ABB9C !important
}

.nav-sm .nav.side-menu li a i.toggle-up {
    display: none !important
}

.nav-sm .nav.side-menu li a i {
    font-size: 25px !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 5px
}

.nav-sm ul.nav.child_menu {
    position: static;
    width: 100%;
    background: white;
    display: none
}

.nav-sm ul.nav.child_menu li {
    padding: 0 1px
}

.nav-sm .profile {
    display: none
}

.menu_section {
    margin-bottom: 35px
}

.menu_section h3 {
    padding-left: 23px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 0;
    margin-top: 0;
    text-shadow: 1px 1px #000
}

.menu_section>ul {
    display: block;
    text-align: left;
    padding-right: 0;
}

.profile_pic {
    width: 35%;
    float: left
}

.img-circle.profile_img {
    width: 70%;
    background: #fff;
    margin-left: 15%;
    z-index: 1000;
    position: inherit;
    margin-top: 20px;
    border: 1px solid rgba(52, 73, 94, 0.44);
    padding: 4px
}

.profile_info {
    padding: 25px 10px 10px;
    text-align: left;
}

.profile_info span {
    font-size: 13px;
    line-height: 30px;
    color: white;
    font-weight: bold;
}

.profile_info h2 {
    font-size: 14px;
    color: white;
    margin: 0;
    font-weight: 300
}

.profile.img_2 {
    text-align: center
}

.profile.img_2 .profile_pic {
    width: 100%
}

.profile.img_2 .profile_pic .img-circle.profile_img {
    width: 50%;
    margin: 10px 0 0
}

.profile.img_2 .profile_info {
    padding: 15px 10px 0;
    width: 100%;
    margin-bottom: 10px;
    float: right
}

.side-menu a span.fa {
    float: left;
    text-align: center;
    margin-top: 5px;
    font-size: 10px;
    min-width: inherit;
    color: black !important;
    /* color: #C4CFDA */
}

.side-menu li.active a span.fa {
    text-align: left !important;
    margin-right: 4px;
    color: white !important;
}

.nav-sm .menu_section {
    margin: 0
}

.nav-sm span.fa,
.nav-sm .menu_section h3 {
    display: none
}

.nav-sm li li span.fa {
    display: inline-block
}

.nav_menu {
    /* float: left; */
    display: flex;
    justify-content: space-between;
    background: white;
    border-bottom: 1px solid #D9DEE4;
    /* margin-bottom: 10px; */
    width: 100%;
    position: relative
}

.info-number .badge {
    font-size: 10px;
    font-weight: normal;
    line-height: 13px;
    padding: 2px 6px;
    position: absolute;
    right: -12px;
    top: -8px
}

@media (min-width: 480px) {
    .nav_menu {
        position: static
    }

    .item {
        display: block
    }
}

.nav-md .container.body .col-md-3.left_col {
    min-height: 100%;
    width: 230px;
    padding: 0;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0;
    z-index: 1
}

.nav-md .container.body .col-md-3.left_col.menu_fixed {
    height: 100%;
    position: fixed
}


.nav-md .container.body .right_col {
    padding: 10px 20px 0;
    margin-right: 230px;
    border-right: 3px solid gray;
}

.nav_title {
    width: 230px;
    float: left;
    /* background: #2A3F54; */
    background: #00003f;
    border-radius: 0;
    /*height: 57px;*/
    padding: 0px
}

@media (max-width: 991px) {

    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav {

        width: 100%;
        margin: 0
    }

    .right_col {
        padding: 10px !important
    }
}

@media (max-width: 1200px) {
    .x_title h2 {
        width: 62%;
        font-size: 17px
    }

    .tile,
    .graph {
        zoom: 76%;
        height: inherit
    }
}

@media (max-width: 1270px) and (min-width: 192px) {
    .x_title h2 small {
        display: none
    }
}

.left_col .mCSB_scrollTools {
    width: 6px
}

.left_col .mCSB_dragger {
    max-height: 400px !important
}

.blue {
    color: #3498DB
}

.purple {
    color: #9B59B6
}

.green {
    color: #1ABB9C
}

.aero {
    color: #9CC2CB
}

.red {
    color: #E74C3C
}

.dark {
    color: #34495E
}

.border-blue {
    border-color: #3498DB !important
}

.border-purple {
    border-color: #9B59B6 !important
}

.border-green {
    border-color: #1ABB9C !important
}

.border-aero {
    border-color: #9CC2CB !important
}

.border-red {
    border-color: #E74C3C !important
}

.border-dark {
    border-color: #34495E !important
}

.bg-white {
    background: #fff !important;
    border: 1px solid #fff !important;
}

.bg-green {
    background: #1ABB9C !important;
    border: 1px solid #1ABB9C !important;
    color: #fff
}

.bg-red {
    background: #E74C3C !important;
    border: 1px solid #E74C3C !important;
    color: #fff
}

.bg-blue {
    background: #3498DB !important;
    border: 1px solid #3498DB !important;
    color: #fff
}

.bg-orange {
    background: #F39C12 !important;
    border: 1px solid #F39C12 !important;
    color: #fff
}

.bg-purple {
    background: #9B59B6 !important;
    border: 1px solid #9B59B6 !important;
    color: #fff
}

.bg-blue-sky {
    background: #50C1CF !important;
    border: 1px solid #50C1CF !important;
    color: #fff
}

.navbar-nav>li>a,
.navbar-brand,
.navbar-nav>li>a {
    color: #fff !important
}

body {
    font-family: var(--app-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.471
}

.main_container .top_nav {
    display: block;
    margin-left: 230px
}

.progress-bar-dark {
    background-color: #34495E !important
}

.progress-bar-gray {
    background-color: #BDC3C7 !important
}

table.no-margin .progress {
    margin-bottom: 0
}

.col-md-55 {
    width: 50%;
    margin-bottom: 10px
}

@media (min-width: 768px) {
    .col-md-55 {
        width: 20%
    }
}

@media (min-width: 992px) {
    .col-md-55 {
        width: 20%
    }
}

@media (min-width: 1200px) {
    .col-md-55 {
        width: 20%
    }
}

@media (min-width: 192px) and (max-width: 1270px) {
    table.tile_info span.right {
        margin-right: 7px;
        float: left
    }
}

/* .col-md-5,
.col-xs-12,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    position: relative;
    min-height: 1px;
    float: left;
    padding-right: 10px;
    padding-left: 10px
} */

/* .row {
    margin-right: -10px;
    margin-left: -10px
} */

.grid_slider .col-md-6 {
    padding: 0 40px
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 10px;
    margin-bottom: 10px
}

a {
    color: black;
    text-decoration: none;
    font-size: 1rem;
}

a,
a:visited,
a:focus,
a:active,
:focus,
:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: 0
}

a:hover,
a:focus {
    text-decoration: none
}

.navbar {
    margin-bottom: 0
}

.navbar-header {
    background: #34495E
}

.navbar-right {
    margin-right: 0
}

.top_nav .navbar-right {
    margin: 13px;
    width: auto;
    float: right
}

.top_nav .navbar-right li {
    display: inline-block;
    /* float: right; */
    position: static
}

.top_nav .dropdown-menu li {
    width: 100%
}

.dropdown-item {
    width: 100%;
    padding: 12px 20px
}

.top_nav li a i {
    font-size: 15px
}

.navbar-static-top {
    position: fixed;
    top: 0;
    width: 100%
}

.sidebar-header {
    border-bottom: 0;
    margin-top: 46px
}

.sidebar-header:first-of-type {
    margin-top: 0
}

.nav>li {
    position: relative;
    display: block
}

.nav.side-menu>li {
    position: relative;
    display: block;
    cursor: pointer;
    direction: initial;
}

.nav.side-menu>li>a {
    margin-bottom: 6px
}

.nav.side-menu>li>a:hover {
    color: var(--app-primary) !important
}

.nav.side-menu>li>a:hover,
.nav>li>a:focus {
    text-decoration: none;
    background: transparent
}

.nav.child_menu {
    display: none
}

.nav.child_menu li:hover,
.nav.child_menu li.active {
    background-color: rgba(255, 255, 255, 0.06)
}

.nav.child_menu li {
    padding-right: 36px
}

.nav-md ul.nav.child_menu li:before {
    background: transparent;
    border: 2px solid #8297a9;
    bottom: auto;
    content: "";
    height: 8px;
    right: 23px;
    margin-top: 15px;
    position: absolute;
    left: auto;
    width: 8px;
    z-index: 1;
    border-radius: 50%
}

.nav-md ul.nav.child_menu li:after {
    border-left: 1px solid #b8c8d6;
    bottom: 0;
    left: 27px;
    position: absolute;
    top: 0
}

.nav-md ul.nav.child_menu li:last-child::after {
    bottom: 50%
}

.nav.side-menu>li>a,
.nav.child_menu>li>a {
    color: black;
    font-weight: bold;
    font-size: 15px;
    direction: rtl;
    text-align: right !important;
}

.nav.child_menu li li:hover,
.nav.child_menu li li.active {
    background: none
}

.nav.child_menu li li a:hover,
.nav.child_menu li li a.active {
    color: #fff
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 13px 15px 12px
}

.nav.side-menu>li.current-page,
.nav.side-menu>li.active {
    /* border-right: 5px solid #1ABB9C */
    /* border-right: 6px solid #33c6ae; */
}

.nav li.current-page {
    background: rgba(255, 255, 255, 0.05)
}

.nav li li li.current-page {
    background: none
}

.nav li li.current-page a {
    color: var(--app-primary)
}

.nav.side-menu>li.active>a {
    text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
    background: var(--app-primary);
    color: white !important;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
    box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0
}

.navbar-brand,
.navbar-nav>li>a {
    font-weight: 500;
    color: #ECF0F1 !important;
    margin-left: 0 !important;
    line-height: 32px
}

.nav.navbar-nav>li>a {
    color: #515356 !important
}

.nav.top_menu>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #34495E !important
}

.nav>li>a:hover,
.nav>li>a:focus {
    background-color: transparent
}

.top_search .form-control {
    border-right: 0;
    -webkit-box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
    border-radius: 25px 0px 0px 25px;
    padding-left: 20px;
    border: 1px solid rgba(221, 226, 232, 0.49)
}

.top_search .form-control:focus {
    border: 1px solid rgba(221, 226, 232, 0.49);
    border-right: 0
}

.top_search .input-group-btn button {
    border-radius: 0px 25px 25px 0px;
    border: 1px solid rgba(221, 226, 232, 0.49);
    border-left: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: #93A2B2;
    margin-bottom: 0 !important
}

.toggle {
    /* float: left; */
    margin: 0;
    /*width: 70px*/
}

.toggle a {
    padding: 15px 15px 0;
    margin: 0;
    cursor: pointer
}

.toggle a i {
    font-size: 26px
}

.nav.child_menu>li>a {
    /* color: rgba(255, 255, 255, 0.75); */
    /* color: white; */
    font-size: 14px;
    padding: 9px
}

.panel_toolbox {
    float: right;
    padding-right: 0;
}

.panel_toolbox>li {
    float: left;
    cursor: pointer
}

.panel_toolbox>li>a {
    padding: 5px;
    /* color: #C5C7CB; */
    font-size: 14px
}


.panel_toolbox>li>a:hover {
    background: #F5F7FA !important;
    color: black !important;
}

.panel_toolbox>li>a.add-btn.bg-app-primary:hover {
    background-color: var(--dark-primary) !important;
    color: white !important;
}

.panel_toolbox>li>a:focus {
    color: white !important;
}

.main_menu_side {
    padding: 0
}

.bs-docs-sidebar .nav>li>a {
    display: block;
    padding: 4px 6px
}

footer {
    background: #fff;
    padding: 10px 20px;
    display: block
}

.nav-sm footer {
    margin-right: 70px
}

.footer_fixed footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%
}

.tile-stats.sparkline {
    padding: 10px;
    text-align: center
}

.jqstooltip {
    background: #34495E !important;
    width: 30px !important;
    height: 22px !important;
    text-decoration: none
}

.tooltip {
    display: block !important
}

.tiles {
    border-top: 1px solid #ccc;
    margin-top: 15px;
    padding-top: 5px;
    margin-bottom: 0
}

.tile {
    overflow: hidden
}

.top_tiles {
    margin-bottom: 0
}

.top_tiles .tile h2 {
    font-size: 30px;
    line-height: 30px;
    margin: 3px 0 7px;
    font-weight: bold
}

article.media {
    width: 100%
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.expand {
    display: block;
    text-decoration: none;
    color: #555;
    cursor: pointer
}

.expand h2 {
    width: 85%;
    float: left
}

h2 {
    font-size: 18px;
    font-weight: 400
}

#left,
#right {
    display: table
}

#sup {
    display: table-cell;
    vertical-align: middle;
    width: 80%
}

.detail a {
    text-decoration: none;
    color: #C0392B;
    border: 1px solid #C0392B;
    padding: 6px 10px 5px;
    font-size: 13px;
    margin-right: 7px
}

.detail {
    margin: 10px 0 10px 0px;
    display: none;
    line-height: 22px;
    height: 150px
}

.detail span {
    margin: 0
}

.right-arrow {
    width: 10px;
    float: right;
    font-weight: bold;
    font-size: 20px
}

.accordion .panel {
    margin-bottom: 5px;
    border-radius: 0;
    border-bottom: 1px solid #efefef
}

.accordion .panel-heading {
    background: #F2F5F7;
    padding: 13px;
    width: 100%;
    display: block
}

.accordion .panel:hover {
    background: #F2F5F7
}

.x_panel {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    /* padding: 10px 17px; */
    display: inline-block;
    /* background: #fff;
    border: 1px solid #E6E9ED; */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.x_title {
    border-bottom: 2px solid #E6E9ED;
    padding: 1px 5px 6px;
    margin-bottom: 10px
}

.x_title .filter {
    width: 40%;
    float: right
}

.x_title h2 {
    margin: 5px 0 6px;
    /* float: left; */
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: black;
    font-weight: bold;
}

.x_title h2 small {
    margin-left: 10px
}

.x_title span {}

.x_content {
    padding: 0 3px 6px;
    position: relative;
    width: 100%;
    /* float: left; */
    clear: both;
    margin-top: 5px
}

.x_content h4 {
    font-size: 16px;
    font-weight: 500
}

legend {
    padding-bottom: 7px
}

.demo-placeholder {
    height: 280px
}

.profile_details:nth-child(3n) {
    clear: both
}

.profile_details .profile_view {
    display: inline-block;
    padding: 10px 0 0;
    background: #fff
}

.profile_details .profile_view .divider {
    border-top: 1px solid #e5e5e5;
    padding-top: 5px;
    margin-top: 5px
}

.profile_details .profile_view .ratings {
    margin-bottom: 0
}

.profile_details .profile_view .left {
    margin-top: 20px
}

.profile_details .profile_view .left p {
    margin-bottom: 3px
}

.profile_details .profile_view .right {
    margin-top: 0px;
    padding: 10px
}

.profile_details .profile_view .img-circle {
    border: 1px solid #E6E9ED;
    padding: 2px
}

.profile_details .profile_view h2 {
    margin: 5px 0
}

.brief {
    margin: 0;
    font-weight: 300
}

.profile_details .profile_left {
    background: white
}

table.tile h3,
table.tile h4,
table.tile span {
    font-weight: bold;
    vertical-align: middle !important
}

table.tile th,
table.tile td {
    text-align: center
}

table.tile th {
    border-bottom: 1px solid #E6ECEE
}

table.tile td {
    padding: 5px 0
}

table.tile td ul {
    text-align: left;
    padding-left: 0
}

table.tile td ul li {
    list-style: none;
    width: 100%
}

table.tile td ul li a {
    width: 100%
}

table.tile td ul li a big {
    right: 0;
    float: right;
    margin-right: 13px
}

table.tile_info {
    width: 100%
}

table.tile_info td {
    text-align: left;
    padding: 1px;
    font-size: 15px
}

table.tile_info td p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 28px
}

table.tile_info td i {
    margin-right: 8px;
    font-size: 17px;
    float: left;
    width: 18px;
    line-height: 28px
}

table.tile_info td:first-child {
    width: 83%
}

td span {
    line-height: 28px
}

.sidebar-widget {
    overflow: hidden
}

.error-number {
    font-size: 90px;
    line-height: 90px;
    margin: 20px 0
}

.col-middle {
    margin-top: 5%
}

h3.degrees {
    font-size: 22px;
    font-weight: 400;
    text-align: center
}

.degrees:after {
    content: "o";
    position: relative;
    top: -12px;
    font-size: 13px;
    font-weight: 300
}

.weather-days .col-sm-2 {
    overflow: hidden;
    width: 16.66666667%
}

.weather .row {
    margin-bottom: 0
}

.bulk-actions {
    display: none
}

table.countries_list {
    width: 100%
}

table.countries_list td {
    padding: 0 10px;
    line-height: 30px;
    border-top: 1px solid #eeeeee
}

.dataTables_paginate a {
    padding: 6px 9px !important;
    background: #ddd !important;
    border-color: #ddd !important
}

table.jambo_table {
    border: 1px solid rgba(221, 221, 221, 0.78)
}

table thead {
    background: #f7f7f7;
    /* color: #ECF0F1 */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: white;
}

table tbody tr:hover td {
    background: rgba(38, 185, 154, 0.07);
    border-top: 1px solid rgba(38, 185, 154, 0.11);
    border-bottom: 1px solid rgba(38, 185, 154, 0.11)
}

table tbody tr.selected {
    background: rgba(38, 185, 154, 0.16)
}

table tbody tr.selected td {
    border-top: 1px solid rgba(38, 185, 154, 0.4);
    border-bottom: 1px solid rgba(38, 185, 154, 0.4)
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 30px;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px 0;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: white
}

.dataTables_info {
    width: 60%;
    float: left
}

.dataTables_paginate {
    float: right;
    text-align: left
}

table.dataTable th.focus,
table.dataTable td.focus {
    outline: 2px solid #1ABB9C !important;
    outline-offset: -1px
}

table.display {
    margin: 0 auto;
    clear: both;
    width: 100%
}

table.display thead th {
    background-color: white;
    padding: 14px !important;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer
}

table.display tfoot th {
    padding: 3px 18px 3px 10px;
    border-top: 1px solid black;
    font-weight: bold
}

table.display tr.heading2 td {
    border-bottom: 1px solid #aaa
}

table.display td {
    padding: 12px !important
}


table.display td.center {
    text-align: center
}

table.display thead th:active,
table.display thead td:active {
    outline: none
}

.dataTables_scroll {
    clear: both
}

table th,
table td {
    color: black;
}

.dataTables_scrollBody {
    margin-top: -1px;
    -webkit-overflow-scrolling: touch
}

.top .dataTables_info {
    float: none
}

.clear {
    clear: both
}

.dataTables_empty {
    text-align: center
}

tfoot input {
    margin: 0.5em 0;
    width: 100%;
    color: #444
}

td.group {
    background-color: #d1cfd0;
    border-bottom: 2px solid #A19B9E;
    border-top: 2px solid #A19B9E
}

td.details {
    background-color: #d1cfd0;
    border: 2px solid #A19B9E
}

.example_alt_pagination div.dataTables_info {
    width: 40%
}

table.display tr.even.row_selected td {
    background-color: #B0BED9
}

table.display tr.odd.row_selected td {
    background-color: #9FAFD1
}

div.box {
    height: 100px;
    padding: 10px;
    overflow: auto;
    border: 1px solid #8080FF;
    background-color: #E5E5FF
}

ul.msg_list li {
    background: #f7f7f7;
    padding: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 6px 6px 0;
    width: 96% !important
}

ul.msg_list li:last-child {
    margin-bottom: 6px;
    padding: 10px
}

ul.msg_list li a {
    padding: 3px 5px !important
}

ul.msg_list li a .image img {
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    float: left;
    margin-right: 10px;
    width: 11%
}

ul.msg_list li a .time {
    font-size: 11px;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    /* right: 35px */
}

ul.msg_list li a .message {
    display: block !important;
    font-size: 11px
}

.dropdown-menu.msg_list span {
    white-space: normal
}

.dropdown-menu {
    border: medium none;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: none;
    float: left;
    font-size: 12px;
    left: 0;
    list-style: none outside none;
    padding: 0;
    position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: 9998;
    border: 1px solid #D9DEE4;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.dropdown-menu>li>a {
    color: #5A738E
}

.navbar-nav .open .dropdown-menu {
    position: absolute;
    background: #fff;
    margin-top: 0;
    border: 1px solid #D9DEE4;
    -webkit-box-shadow: none;
    right: auto;
    left: auto;
    text-align: left;
    /* width: 220px */
}

.navbar-nav .open .dropdown-menu.msg_list {
    width: 300px !important
}

.dashboard-widget-content .sidebar-widget {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border: 1px solid #abd9ea;
    border-radius: 5px;
    text-align: center;
    float: right;
    padding: 2px;
    margin-top: 10px
}

span.right {
    float: right;
    font-size: 14px !important
}

.tile_info a {
    text-overflow: ellipsis
}

.sidebar-footer {
    bottom: 0px;
    clear: both;
    display: block;
    padding: 5px 0 0 0;
    position: fixed;
    width: 230px;
    /* background: #2A3F54; */
    background: #00003f;
}

.sidebar-footer a {
    padding: 7px 0 3px;
    text-align: center;
    width: 25%;
    font-size: 17px;
    display: block;
    float: left;
    background: #172D44
}

.sidebar-footer a:hover {
    background: #425567
}

.tile_count {
    margin-bottom: 20px;
    margin-top: 20px
}

.tile_count .tile_stats_count {
    border-bottom: 1px solid #D9DEE4;
    padding: 0 10px 0 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative
}

.tile_count .tile_stats_count:before {
    content: "";
    position: absolute;
    left: 0;
    height: 65px;
    border-left: 2px solid #ADB2B5;
    margin-top: 10px
}

.tile_count .tile_stats_count .count {
    font-size: 30px;
    line-height: 47px;
    font-weight: 600
}

@media (min-width: 992px) and (max-width: 1100px) {
    .tile_count .tile_stats_count .count {
        font-size: 30px
    }
}

.tile_count .tile_stats_count span {
    font-size: 12px
}

.tile_count .tile_stats_count .count_bottom i {
    width: 12px
}

.dashboard_graph .col-md-9,
.dashboard_graph .col-md-3 {
    padding: 0
}

a.user-profile {
    color: black !important;
    font-size: 1rem;
}

.user-profile img {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    margin-left: 8px
}

ul.top_profiles {
    width: 100%
}

ul.top_profiles li {
    margin: 0;
    padding: 3px 5px
}

ul.top_profiles li:nth-child(odd) {
    background-color: #eee
}

.media .profile_thumb {
    border: 1px solid;
    width: 50px;
    height: 50px;
    margin: 5px 10px 5px 0;
    border-radius: 50%;
    padding: 9px 12px
}

.media .profile_thumb i {
    font-size: 30px
}

.media .date {
    background: #ccc;
    width: 52px;
    margin-right: 10px;
    /* border-radius: 10px; */
    padding: 5px
}

.media .date .month {
    margin: 0;
    text-align: center;
    color: #fff
}

.media .date .day {
    text-align: center;
    color: #fff;
    font-size: 27px;
    margin: 0;
    line-height: 27px;
    font-weight: bold
}

.event .media-body a.title {
    font-weight: bold
}

.event .media-body p {
    margin-bottom: 0
}

.fontawesome-icon-list .fa-hover a:hover {
    background-color: #ddd;
    color: #fff;
    text-decoration: none
}

.fontawesome-icon-list .fa-hover a {
    display: block;
    line-height: 32px;
    height: 32px;
    padding-left: 10px;
    border-radius: 4px
}

.fontawesome-icon-list .fa-hover a:hover .fa {
    font-size: 28px;
    vertical-align: -6px
}

.fontawesome-icon-list .fa-hover a .fa {
    width: 32px;
    font-size: 16px;
    display: inline-block;
    text-align: left;
    margin-right: 10px
}

.main_menu .fa {
    /* width: 26px; */
    opacity: .99;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.tile-stats {
    position: relative;
    display: block;
    margin-bottom: 12px;
    border: 1px solid #E4E4E4;
    -webkit-border-radius: 5px;
    overflow: hidden;
    padding-bottom: 5px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 5px;
    -moz-background-clip: padding;
    border-radius: 5px;
    background-clip: padding-box;
    background: #FFF;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

.tile-stats:hover .icon i {
    animation-name: tansformAnimation;
    animation-duration: .5s;
    animation-iteration-count: 1;
    color: rgba(58, 58, 58, 0.41);
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: tansformAnimation;
    -webkit-animation-duration: .5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: tansformAnimation;
    -moz-animation-duration: .5s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards
}

.tile-stats .icon {
    width: 20px;
    height: 20px;
    color: #BAB8B8;
    position: absolute;
    right: 53px;
    top: 22px;
    z-index: 1
}

.tile-stats .icon i {
    margin: 0;
    font-size: 60px;
    line-height: 0;
    vertical-align: bottom;
    padding: 0
}

.tile-stats .count {
    font-size: 38px;
    font-weight: bold;
    line-height: 1.65857143
}

.tile-stats .count,
.tile-stats h3,
.tile-stats p {
    position: relative;
    margin: 0;
    margin-left: 10px;
    z-index: 5;
    padding: 0
}

.tile-stats h3 {
    color: #BAB8B8
}

.tile-stats p {
    margin-top: 5px;
    font-size: 12px
}

.tile-stats>.dash-box-footer {
    position: relative;
    text-align: center;
    margin-top: 5px;
    padding: 3px 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none
}

.tile-stats>.dash-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.15)
}

table.tile_info span.right {
    margin-right: 0;
    float: right;
    position: absolute;
    right: 4%
}

.tile:hover {
    text-decoration: none
}

.tile_header {
    border-bottom: transparent;
    padding: 7px 15px;
    margin-bottom: 15px;
    background: #E7E7E7
}

.tile_head h4 {
    margin-top: 0;
    margin-bottom: 5px
}

.tiles-bottom {
    padding: 5px 10px;
    margin-top: 10px;
    background: rgba(194, 194, 194, 0.3);
    text-align: left
}

a.star {
    color: #428bca !important
}

.list-btn-mail {
    margin-bottom: 15px
}

.list-btn-mail.active {
    border-bottom: 1px solid #39B3D7;
    padding: 0 0 14px
}

.list-btn-mail>i {
    float: left;
    font-size: 18px;
    font-style: normal;
    width: 33px
}

.list-btn-mail>.cn {
    background: none repeat scroll 0 0 #39B3D7;
    border-radius: 12px;
    color: #FFFFFF;
    float: right;
    font-style: normal;
    padding: 0 5px
}

button,
.buttons,
.btn,
.modal-footer .btn+.btn {
    margin-bottom: 5px;
    margin-right: 5px
}

.btn-group-vertical .btn,
.btn-group .btn {
    margin-bottom: 0;
    margin-right: 0
}

.mail_list .badge {
    padding: 3px 6px;
    font-size: 8px;
    background: #BAB7B7
}

.attachment {
    margin-top: 30px
}

.attachment ul {
    width: 100%;
    list-style: none;
    padding-left: 0;
    display: inline-block;
    margin-bottom: 30px
}

.attachment ul li {
    float: left;
    width: 150px;
    margin-right: 10px;
    margin-bottom: 10px
}

.attachment ul li img {
    height: 150px;
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 10px
}

.attachment ul li span {
    float: right
}

.attachment .links {
    width: 100%;
    display: inline-block
}

.compose {
    padding: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    border: 1px solid #D9DEE4;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 5px;
    z-index: 9999;
    display: none
}

.compose .compose-body .editor.btn-toolbar {
    margin: 0
}

.editor.btn-toolbar {
    zoom: 1;
    background: #F7F7F7;
    margin: 5px 2px;
    padding: 3px 0;
    border: 1px solid #EFEFEF
}

.input-group {
    margin-bottom: 10px
}

.ln_solid {
    border-top: 1px solid #e5e5e5;
    color: #ffffff;
    background-color: #ffffff;
    /* height: 1px; */
    margin: 20px 0
}

span.section {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: inherit;
    color: var(--app-primary);
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 12px;
}

.form-control {
    border-radius: 0;
    width: 100%;
    font-size: 15px;
    color: black;
    font-weight: bold;
    border-width: 2px;
}

input[type=file] {
    font-size: 16px;
    font-weight: bold;
}

option {
    font-weight: bold;
    font-size: 16px;
    color: black;

}

label {
    font-size: 16px;
    font-weight: bold;
    color: black;
}

.custom-labels label {
    margin-left: 2%;
}

.form-horizontal .control-label {
    padding-top: 8px
}

.form-control:focus,
.form-select:focus {

    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0
}

.form-control-feedback {
    position: absolute;
    margin-top: 8px;
    height: 23px;
    color: #bbb;
    line-height: 24px;
    font-size: 15px;
    top: 0px;
    width: 34px;
    text-align: center
}

.form-control-feedback.left {
    border-right: 1px solid #ccc;
    left: 13px
}

.form-control-feedback.right {
    border-left: 1px solid #ccc;
    right: 13px
}

.form-control.has-feedback-left {
    padding-left: 45px
}

.form-control.has-feedback-right {
    padding-right: 45px
}

.form-group {
    margin-bottom: 10px
}

.validate {
    margin-top: 10px
}

.invalid-form-error-message {
    margin-top: 10px;
    padding: 5px
}

.invalid-form-error-message.filled {
    border-left: 2px solid #E74C3C
}

p.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6
}

p.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7
}

ul.parsley-errors-list {
    list-style: none;
    color: #E74C3C;
    padding-left: 0
}

input.parsley-error,
textarea.parsley-error,
select.parsley-error {
    background: #FAEDEC;
    border: 1px solid #E85445
}

.btn-group .parsley-errors-list {
    display: none
}

.bad input,
.bad select,
.bad textarea {
    border: 1px solid #CE5454;
    -webkit-box-shadow: 0 0 4px -2px #CE5454;
    box-shadow: 0 0 4px -2px #CE5454;
    position: relative;
    left: 0;
    -moz-animation: .7s 1 shake linear;
    -webkit-animation: 0.7s 1 shake linear
}

.item input,
.item textarea {
    -webkit-transition: 0.42s;
    transition: 0.42s
}

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #CE5454;
    max-width: 170px;
    white-space: pre;
    position: relative;
    left: -15px;
    opacity: 0;
    z-index: 1;
    -webkit-transition: 0.15s ease-out;
    transition: 0.15s ease-out
}

.item .alert::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-color: transparent #CE5454 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    left: -13px;
    top: 1px
}

.item.bad .alert {
    left: 0;
    opacity: 1
}

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
}

.well .markup {
    background: #fff;
    color: #777;
    position: relative;
    padding: 45px 15px 15px;
    margin: 15px 0 0 0;
    background-color: #fff;
    border-radius: 0 0 4px 4px;
    -webkit-box-shadow: none;
    box-shadow: none
}

.well .markup::after {
    content: "Example";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px
}

.autocomplete-suggestions {
    border: 1px solid #e4e4e4;
    background: #F4F4F4;
    cursor: default;
    overflow: auto
}

.autocomplete-suggestion {
    padding: 2px 5px;
    font-size: 1.2em;
    white-space: nowrap;
    overflow: hidden
}

.autocomplete-selected {
    background: #f0f0f0
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399ff;
    font-weight: bolder
}

.btn {
    border-radius: 3px;
    font-weight: bold;
}

a.btn-success,
a.btn-primary,
a.btn-warning,
a.btn-danger {
    color: #fff !important
}

.btn-success {
    background: #26B99A;
    border: 1px solid #169F85
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
    background: #169F85
}

.btn-dark {
    color: #E9EDEF;
    background-color: #4B5F71;
    border-color: #364B5F
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.open .dropdown-toggle.btn-dark {
    color: #FFFFFF;
    background-color: #394D5F;
    border-color: #394D5F
}

.btn-round {
    border-radius: 30px
}

.btn.btn-app {
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    background-color: #fafafa;
    font-size: 12px
}

.btn.btn-app>.fa,
.btn.btn-app>.glyphicon,
.btn.btn-app>.ion {
    font-size: 20px;
    display: block
}

.btn.btn-app:hover {
    background: #f4f4f4;
    color: #444;
    border-color: #aaa
}

.btn.btn-app:active,
.btn.btn-app:focus {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}

.btn.btn-app>.badge {
    position: absolute;
    top: -3px;
    right: -10px;
    font-size: 10px;
    font-weight: 400
}

textarea {
    padding: 10px;
    vertical-align: top;
    width: 200px
}

textarea:focus {
    outline-style: solid;
    outline-width: 2px
}

.btn_ {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6));
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0)";
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
}

.bs-glyphicons {
    margin: 0 -10px 20px;
    overflow: hidden
}

.bs-glyphicons-list {
    padding-left: 0;
    list-style: none
}

.bs-glyphicons li {
    float: left;
    width: 25%;
    height: 115px;
    padding: 10px;
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #fff
}

.bs-glyphicons .glyphicon {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 24px
}

.bs-glyphicons .glyphicon-class {
    display: block;
    text-align: center;
    word-wrap: break-word
}

.bs-glyphicons li:hover {
    color: #fff;
    background-color: #1ABB9C
}

.tagsinput {
    border: 1px solid #CCC;
    background: #FFF;
    padding: 6px 6px 0;
    width: 300px;
    overflow-y: auto
}

span.tag {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: block;
    float: left;
    padding: 5px 9px;
    text-decoration: none;
    background: #1ABB9C;
    color: #F1F6F7;
    margin-right: 5px;
    font-weight: 500;
    margin-bottom: 5px;
    font-family: var(--app-font);
}

span.tag a {
    color: #F1F6F7 !important
}

.tagsinput span.tag a {
    font-weight: bold;
    color: #82ad2b;
    text-decoration: none;
    font-size: 11px
}

.tagsinput input {
    width: 80px;
    margin: 0px;
    font-family: var(--app-font);
    font-size: 13px;
    border: 1px solid transparent;
    padding: 3px;
    background: transparent;
    color: #000;
    outline: 0px
}

.tagsinput div {
    display: block;
    float: left
}

.tags_clear {
    clear: both;
    width: 100%;
    height: 0px
}

.not_valid {
    background: #FBD8DB !important;
    color: #90111A !important
}

ul.bar_tabs {
    overflow: visible;
    background: #F5F7FA;
    height: 25px;
    margin: 21px 0 14px;
    padding-left: 14px;
    position: relative;
    z-index: 1;
    width: 100%;
    border-bottom: 1px solid #E6E9ED
}

ul.bar_tabs>li {
    border: 1px solid #E6E9ED;
    color: #333 !important;
    margin-top: -17px;
    margin-left: 8px;
    background: #fff;
    border-bottom: none;
    border-radius: 4px 4px 0 0
}

ul.bar_tabs>li.active {
    border-right: 6px solid #D3D6DA;
    border-top: 0;
    margin-top: -15px
}

ul.bar_tabs>li a {
    padding: 10px 17px;
    background: #F5F7FA;
    margin: 0;
    border-top-right-radius: 0
}

ul.bar_tabs>li a:hover {
    border: 1px solid transparent
}

ul.bar_tabs>li.active a {
    border-bottom: none
}

ul.bar_tabs.right {
    padding-right: 14px
}

ul.bar_tabs.right li {
    float: right
}

a:focus {
    outline: none
}

ul.timeline li {
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    clear: both
}

.timeline .block {
    margin: 0;
    border-left: 3px solid #e8e8e8;
    overflow: visible;
    padding: 10px 15px;
    margin-left: 105px
}

.timeline.widget {
    min-width: 0;
    max-width: inherit
}

.timeline.widget .block {
    margin-left: 5px
}

.timeline .tags {
    position: absolute;
    top: 15px;
    left: 0;
    width: 84px
}

.timeline .tag {
    display: block;
    height: 30px;
    font-size: 13px;
    padding: 8px
}

.timeline .tag span {
    display: block;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis
}

.tag {
    line-height: 1;
    background: #1ABB9C;
    color: #fff !important
}

.tag:after {
    content: " ";
    height: 30px;
    width: 0;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    pointer-events: none;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 11px solid #1ABB9C
}

.timeline h2.title {
    position: relative;
    font-size: 16px;
    margin: 0
}

.timeline h2.title:before {
    content: "";
    position: absolute;
    left: -23px;
    top: 3px;
    display: block;
    width: 14px;
    height: 14px;
    border: 3px solid #d2d3d2;
    border-radius: 14px;
    background: #f9f9f9
}

ul.social li {
    border: 0
}

.social-sidebar {
    float: right
}

.social-sidebar {
    background: #EDEDED;
    width: 22%
}

.thumb img {
    width: 50px;
    height: 50px;
    border-radius: 50%
}

.chat .thumb img {
    width: 27px;
    height: 27px;
    border-radius: 50%
}

.chat .status {
    float: left;
    margin: 16px 0 0 -16px;
    font-size: 14px;
    font-weight: bold;
    width: 12px;
    height: 12px;
    display: block;
    border: 2px solid #FFF;
    z-index: 12312;
    border-radius: 50%
}

.chat .status.online {
    background: #1ABB9C
}

.chat .status.away {
    background: #F39C12
}

.chat .status.offline {
    background: #ccc
}

.chat .media-body {
    padding-top: 5px
}

.chart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center
}

.chart canvas {
    position: absolute;
    top: 0;
    left: 0
}

.percent {
    display: inline-block;
    line-height: 110px;
    z-index: 2;
    font-size: 18px
}

.percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em
}

.angular {
    margin-top: 100px
}

.angular .chart {
    margin-top: 0
}

.widget {
    min-width: 250px;
    max-width: 310px
}

.widget_tally_box .btn-group button {
    text-align: center
}

ul.widget_tally .count {
    width: 30%;
    float: left;
    text-align: left
}

ul.widget_profile_box {
    width: 100%;
    height: 42px;
    padding: 3px;
    background: #ececec;
    margin-top: 40px;
    margin-left: 1px
}

ul.widget_profile_box li:first-child {
    width: 25%;
    float: left
}

ul.widget_profile_box li:first-child a {
    float: left
}

ul.widget_profile_box li:last-child {
    width: 25%;
    float: right
}

ul.widget_profile_box li:last-child a {
    float: right
}

ul.widget_profile_box li a {
    font-size: 22px;
    text-align: center;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(52, 73, 94, 0.44);
    display: block;
    border-radius: 50%;
    padding: 0px
}

ul.widget_profile_box li a:hover {
    color: #1ABB9C !important;
    border: 1px solid #26b99a
}

ul.widget_profile_box li .profile_img {
    width: 85px;
    height: 85px;
    margin: 0;
    margin-top: -28px
}

.widget .verticle_bars li .progress.vertical.progress_wide {
    width: 65%
}

ul.count2 {
    width: 100%;
    margin-left: 1px;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    padding: 10px 0;
    display: inherit
}

ul.count2 li {
    width: 30%;
    text-align: center
}

ul.count2 li h3 {
    font-weight: 400;
    margin: 0
}

ul.count2 li span {
    font-weight: 300
}

.divider {
    border-bottom: 1px solid #ddd;
    margin: 10px
}

ul.messages {
    padding: 0;
    list-style: none
}

ul.messages li,
.tasks li {
    border-bottom: 1px dotted #e6e6e6;
    padding: 8px 0
}

ul.messages li img.avatar,
img.avatar {
    height: 32px;
    width: 32px;
    float: left;
    display: inline-block;
    border-radius: 2px;
    padding: 2px;
    background: #f7f7f7;
    border: 1px solid #e6e6e6
}

ul.user_data li .progress {
    width: 90%
}

.project_progress .progress {
    margin-bottom: 3px !important;
    margin-top: 5px
}

.projects .list-inline {
    margin: 0
}

.profile_title {
    background: #F5F7FA;
    border: 0;
    padding: 7px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.avatar img {
    border-radius: 50%;
    max-width: 45px
}

.pricing {
    background: #fff
}

.pricing .title {
    background: #1ABB9C;
    height: 110px;
    color: #fff;
    padding: 15px 0 0;
    text-align: center
}

.pricing .title h2 {
    text-transform: capitalize;
    font-size: 18px;
    border-radius: 5px 5px 0 0;
    margin: 0;
    font-weight: 400
}

.pricing .title h1 {
    font-size: 25px;
    margin: 12px
}

.pricing .title span {
    background: rgba(51, 51, 51, 0.28);
    padding: 2px 5px
}

.ui-ribbon-container {
    position: relative
}

.ui-ribbon-container .ui-ribbon-wrapper {
    position: absolute;
    overflow: hidden;
    width: 85px;
    height: 88px;
    top: -3px;
    right: -3px
}

.ui-ribbon-container.ui-ribbon-primary .ui-ribbon {
    background-color: #5b90bf
}

.ui-ribbon-container .ui-ribbon {
    position: relative;
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    line-height: 20px;
    background-color: #555;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)
}

.ui-ribbon-container.ui-ribbon-primary .ui-ribbon:after,
.ui-ribbon-container.ui-ribbon-primary .ui-ribbon:before {
    border-top: 2px solid #5b90bf
}

.ui-ribbon-container .ui-ribbon:before {
    left: 0;
    bottom: -1px
}

.ui-ribbon-container .ui-ribbon:after,
.ui-ribbon-container .ui-ribbon:before {
    position: absolute;
    content: " ";
    line-height: 0;
    border-top: 2px solid #555;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent
}

.thumbnail .image {
    height: 120px;
    overflow: hidden
}

.caption {
    padding: 9px 5px;
    background: #F7F7F7
}

.caption p {
    margin-bottom: 5px
}

.thumbnail {
    height: 190px;
    overflow: hidden
}

.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-box-shadow: 1px 1px 2px #e6e6e6;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default
}

.view .mask,
.view .content {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0
}

.view img {
    display: block;
    position: relative
}

.view .tools {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.35);
    margin: 43px 0 0 0
}

.view .tools a {
    display: inline-block;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    padding: 0 4px
}

.view p {
    font-family: var(--app-font);
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    -webkit-box-shadow: 0 0 1px #000;
    box-shadow: 0 0 1px #000
}

/*!
 * bootstrap-vertical-tabs - v1.2.1
 * https://dbtek.github.io/bootstrap-vertical-tabs
 * 2014-11-07
 * Copyright (c) 2014 Ä°smail Demirbilek
 * License: MIT
 */
.tabs-left,
.tabs-right {
    border-bottom: none;
    padding-top: 2px
}

.tabs-left {
    border-right: 1px solid #F7F7F7
}

.tabs-right {
    border-left: 1px solid #F7F7F7
}

.tabs-left>li,
.tabs-right>li {
    float: none;
    margin-bottom: 2px
}

.tabs-left>li {
    margin-right: -1px
}

.tabs-right>li {
    margin-left: -1px
}

.tabs-left>li.active>a,
.tabs-left>li.active>a:hover,
.tabs-left>li.active>a:focus {
    border-bottom-color: #F7F7F7;
    border-right-color: transparent
}

.tabs-right>li.active>a,
.tabs-right>li.active>a:hover,
.tabs-right>li.active>a:focus {
    border-bottom: 1px solid #F7F7F7;
    border-left-color: transparent
}

.tabs-left>li>a {
    border-radius: 4px 0 0 4px;
    margin-right: 0;
    display: block;
    background: #F7F7F7;
    text-overflow: ellipsis;
    overflow: hidden
}

.tabs-right>li>a {
    border-radius: 0 4px 4px 0;
    margin-right: 0;
    background: #F7F7F7;
    text-overflow: ellipsis;
    overflow: hidden
}

.sideways {
    margin-top: 50px;
    border: none;
    position: relative
}

.sideways>li {
    height: 20px;
    width: 120px;
    margin-bottom: 100px
}

.sideways>li>a {
    border-bottom: 1px solid #ddd;
    border-right-color: transparent;
    text-align: center;
    border-radius: 4px 4px 0px 0px
}

.sideways>li.active>a,
.sideways>li.active>a:hover,
.sideways>li.active>a:focus {
    border-bottom-color: transparent;
    border-right-color: #ddd;
    border-left-color: #ddd
}

.sideways.tabs-left {
    left: -50px
}

.sideways.tabs-right {
    right: -50px
}

.sideways.tabs-right>li {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.sideways.tabs-left>li {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.morris-hover {
    position: absolute;
    z-index: 1000
}

.morris-hover.morris-default-style {
    padding: 6px;
    color: #666;
    background: rgba(243, 242, 243, 0.8);
    border: solid 2px rgba(195, 194, 196, 0.8);
    font-family: var(--app-font);
    font-size: 12px;
    text-align: center
}

.morris-hover.morris-default-style .morris-hover-row-label {
    font-weight: bold;
    margin: 0.25em 0
}

.morris-hover.morris-default-style .morris-hover-point {
    white-space: nowrap;
    margin: 0.1em 0
}

.price {
    font-size: 40px;
    font-weight: 400;
    color: #26B99A;
    margin: 0
}

.product_price {
    margin: 20px 0;
    padding: 5px 10px;
    background-color: #FFFFFF;
    text-align: left;
    border: 2px dashed #E0E0E0
}

.login {
    background: #F7F7F7
}

.login .fa-paw {
    font-size: 26px
}

.animate {
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -o-animation-duration: 0.5s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    -ms-animation-duration: 0.5s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both
}

.left {
    float: left
}

.calendar.left {
    float: initial !important
}

.alignleft {
    float: left;
    margin-right: 15px
}

.alignright {
    float: right;
    margin-left: 15px
}

.clearfix:after,
form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}


.login_content .btn-default:hover {
    text-decoration: none
}

#username {
    background-position: 10px 10px !important
}

#password {
    background-position: 10px -53px !important
}

.separator {
    border-top: 1px solid #D8D8D8;
    margin-top: 10px;
    padding-top: 10px
}

.button {
    background: #f7f9fa;
    background: -webkit-gradient(linear, left top, left bottom, from(#f7f9fa), to(#f0f0f0));
    background: linear-gradient(to bottom, #f7f9fa 0%, #f0f0f0 100%);
    filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0)";
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
    border-radius: 0 0 5px 5px;
    border-top: 1px solid #CFD5D9;
    padding: 15px 0
}


#content form .submit {
    float: left;
    margin-left: 38px
}

.button a {
    background: url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
    color: #7E7E7E;
    font-size: 17px;
    padding: 2px 0 2px 40px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.button a:hover {
    background-position: 0 -135px;
    color: #00aeef
}

header {
    width: 100%
}

#nprogress .bar {
    background: #1ABB9C
}

#nprogress .peg {
    -webkit-box-shadow: 0 0 10px #1ABB9C, 0 0 5px #1ABB9C;
    box-shadow: 0 0 10px #1ABB9C, 0 0 5px #1ABB9C
}

#nprogress .spinner-icon {
    border-top-color: #1ABB9C;
    border-left-color: #1ABB9C
}

.editor-wrapper {
    min-height: 250px;
    background-color: white;
    border-collapse: separate;
    border: 1px solid #ccc;
    padding: 4px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
    box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    overflow: scroll;
    outline: none
}

.voiceBtn {
    width: 20px;
    color: transparent;
    background-color: transparent;
    transform: scale(2, 2);
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
    -webkit-box-shadow: none
}

div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.dropdown-menu a {
    cursor: pointer
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 2px solid #ced4da !important;
    border-radius: 5px !important;
    min-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: black;
    padding-top: 5px;
    font-size: 16px;
    line-height: 28px;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-top: 3px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 8px 8px 0 8px !important;
    margin-left: -2px !important;
    margin-top: 0px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888 transparent !important;
    border-width: 0 8px 8px 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px
}


.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    margin-top: 2px;
    border: none;
    border-radius: 0;
    padding: 3px 5px
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 2px solid #ccc !important
}

.select2-container--default .select2-selection--multiple {
    border: 2px solid #ccc !important;
    border-radius: 6px !important;
}

.select2-container .select2-search--inline .select2-search__field {
    padding: 2px !important;
    font-size: 15px !important;
    font-weight: bold;
}

.switchery {
    width: 32px;
    height: 20px
}

.switchery>small {
    width: 20px;
    height: 20px
}

fieldset {
    border: none;
    margin: 0;
    padding: 0
}


.cropper .img-preview {
    background-color: #f7f7f7;
    width: 100%;
    text-align: center
}

.x_panel h3 {
    color: var(--app-primary);
}

.cropper .img-preview {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: hidden
}

.cropper .img-preview>img {
    max-width: 100%
}

.cropper .docs-data>.input-group {
    margin-bottom: 10px
}

.cropper .docs-data>.input-group>label {
    min-width: 80px
}

.cropper .docs-data>.input-group>span {
    min-width: 50px
}

.cropper .docs-buttons>.btn,
.cropper .docs-buttons>.btn-group,
.cropper .docs-buttons>.form-control {
    margin-right: 5px;
    margin-bottom: 10px
}

.cropper .docs-toggles>.btn,
.cropper .docs-toggles>.btn-group,
.cropper .docs-toggles>.dropdown {
    margin-bottom: 10px
}

.cropper .docs-tooltip {
    display: block;
    margin: -6px -12px;
    padding: 6px 12px
}

.cropper .docs-tooltip>.icon {
    margin: 0 -3px;
    vertical-align: top
}

.cropper .tooltip-inner {
    white-space: normal
}

.cropper .btn-upload .tooltip-inner,
.cropper .btn-toggle .tooltip-inner {
    white-space: nowrap
}

.cropper .btn-toggle {
    padding: 6px
}

.cropper .btn-toggle>.docs-tooltip {
    margin: -6px;
    padding: 6px
}

.label-align {
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    color: black;
}

@media (max-width: 414px) {
    .item {
        display: block
    }
}

@media (max-width: 400px) {
    .cropper .btn-group-crop {
        margin-right: -15px !important
    }

    .cropper .btn-group-crop>.btn {
        padding-left: 5px;
        padding-right: 5px
    }

    .cropper .btn-group-crop .docs-tooltip {
        margin-left: -5px;
        margin-right: -5px;
        padding-left: 5px;
        padding-right: 5px
    }
}

.cropper .docs-options .dropdown-menu {
    width: 100%
}

.cropper .docs-options .dropdown-menu>li {
    padding: 3px 20px
}

.cropper .docs-options .dropdown-menu>li:hover {
    background-color: #f7f7f7
}

.cropper .docs-options .dropdown-menu>li>label {
    display: block
}

.cropper .docs-cropped .modal-body {
    text-align: center
}

.cropper .docs-cropped .modal-body>img,
.cropper .docs-cropped .modal-body>canvas {
    max-width: 100%
}

.cropper .docs-diagram .modal-dialog {
    max-width: 352px
}

.wizard_verticle .stepContainer {
    width: 80%;
    float: left;
    padding: 0 10px
}

.actionBar {
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 10px 5px;
    text-align: left;
    margin-top: 10px
}

.actionBar .buttonDisabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none
}

.actionBar a {
    margin: 0 3px
}

.progress {
    border-radius: 0
}

.progress-bar-info {
    background-color: #3498DB
}

.progress-bar-success {
    background-color: #26B99A
}

.progress_summary .progress {
    margin: 5px 0 12px !important
}

.progress_summary .row {
    margin-bottom: 5px
}

.progress_summary .row .col-xs-2 {
    padding: 0
}

.progress_summary .more_info span {
    text-align: left;
    float: right
}

.progress_summary .data span {
    text-align: left;
    float: right
}

.progress_summary p {
    margin-bottom: 3px;
    width: 100%
}

.progress_title .left {
    float: left;
    text-align: left
}

.progress_title .right {
    float: right;
    text-align: left;
    font-weight: 300
}

.progress.progress_sm {
    border-radius: 0;
    margin-bottom: 18px;
    height: 10px !important
}

.progress.progress_sm .progress-bar {
    height: 10px !important
}

.progress.vertical.progress_wide {
    width: 35px
}

.alert-success {
    color: #ffffff;
    background-color: rgba(38, 185, 154, 0.88);
    border-color: rgba(38, 185, 154, 0.88)
}

.alert-info {
    color: #E9EDEF;
    background-color: rgba(52, 152, 219, 0.88);
    border-color: rgba(52, 152, 219, 0.88)
}

.alert-warning {
    color: white;
    background-color: rgba(243, 156, 18, 0.88);
    border-color: rgba(243, 156, 18, 0.88)
}

.alert-danger,
.alert-error {
    color: white;
    font-size: 18px;
    ;
    background-color: rgba(231, 76, 60, 0.88);
    border-color: rgba(231, 76, 60, 0.88)
}

.ui-pnotify.dark .ui-pnotify-container {
    color: white;
    background-color: rgba(52, 73, 94, 0.88);
    border-color: rgba(52, 73, 94, 0.88)
}

ul.notifications {
    float: right;
    display: block;
    margin-bottom: 7px;
    padding: 0;
    width: 100%
}

.notifications li {
    float: right;
    margin: 3px;
    width: 36px;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
}

.notifications li:last-child {
    margin-left: 0
}

.notifications a {
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 9px 8px
}

.tabbed_notifications .text {
    padding: 5px 15px;
    height: 140px;
    border-radius: 7px;
    -webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3)
}

.tabbed_notifications div p {
    display: inline-block
}

.tabbed_notifications h2 {
    font-weight: bold;
    text-transform: uppercase;
    width: 80%;
    float: left;
    height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block
}

.tabbed_notifications .close {
    padding: 5px;
    color: #E9EDEF;
    float: right;
    opacity: 1
}

.join-btn {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.input-group-sm>.input-group-addon {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc
}

.profile-bottom {
    background: #F2F5F7;
    padding: 9px 0;
    border-top: 1px solid #E6E9ED
}

@media (min-width: 360px) and (max-width: 812px) {
    .info-number .badge {
        font-size: 10px;
        font-weight: normal;
        line-height: 13px;
        padding: 2px 6px;
        position: absolute;
        right: 0px;
        top: -7px
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .info-number .badge {
        font-size: 10px;
        font-weight: normal;
        line-height: 13px;
        padding: 2px 6px;
        position: absolute;
        right: -2px;
        top: -6px
    }
}

.fc-state-default {
    background: #f5f5f5;
}

.fc-state-down,
.fc-state-active {
    color: #333;
    background: #ccc
}

.dropzone {
    min-height: 300px;
    border: 1px solid #e5e5e5
}


.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
    background: #536A7F;
    border: 1px solid #536A7F;
    color: #fff
}

.daterangepicker .input-mini {
    background-color: #eee;
    border: 1px solid #ccc;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.daterangepicker .input-mini.active {
    border: 1px solid #ccc
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default;
    height: 30px;
    border: 1px solid #ADB2B5;
    line-height: 30px;
    border-radius: 0px !important
}

.daterangepicker select.monthselect {
    margin-right: 2%
}

.daterangepicker td.in-range {
    background: #E4E7EA;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #536A7F;
    color: #fff
}

.daterangepicker th.available:hover {
    background: #eee;
    color: #34495E
}

.daterangepicker:before,
.daterangepicker:after {
    content: none
}

.daterangepicker .calendar.single {
    margin: 0 0 4px 0
}

.daterangepicker .calendar.single .calendar-table {
    width: 224px;
    padding: 0 0 4px 0 !important
}

.daterangepicker .calendar.single .calendar-table thead tr:first-child th {
    padding: 8px 5px
}

.daterangepicker .calendar.single .calendar-table thead th {
    border-radius: 0
}

.daterangepicker.picker_1 {
    color: #fff;
    background: #34495E
}

.daterangepicker.picker_1 .calendar-table {
    background: #34495E
}

.daterangepicker.picker_1 .calendar-table thead tr {
    background: #213345
}

.daterangepicker.picker_1 .calendar-table thead tr:first-child {
    background: #1ABB9C
}

.daterangepicker.picker_1 .calendar-table td.off {
    background: #34495E;
    color: #999
}

.daterangepicker.picker_1 .calendar-table td.available:hover {
    color: #34495E
}

.daterangepicker.picker_2 .calendar-table thead tr {
    color: #1ABB9C
}

.daterangepicker.picker_2 .calendar-table thead tr:first-child {}

.daterangepicker.picker_3 .calendar-table thead tr:first-child {
    color: #fff;
    background: #1ABB9C
}

.daterangepicker.picker_4 .calendar-table thead tr:first-child {
    color: #fff;
    background: #34495E
}

.daterangepicker.picker_4 .calendar-table td,
.daterangepicker.picker_4 .calendar-table td.off {
    background: #ECF0F1;
    border: 1px solid #fff;
    border-radius: 0
}

.daterangepicker.picker_4 .calendar-table td.active {
    background: #34495E
}

.calendar-exibit .show-calendar.picker_1 {
    background: #34495E
}

.calendar-exibit .calendar-table {
    padding: 0 0 4px 0
}

#slash {
    display: none;
}

.rtl {
    /*direction: rtl;*/
}


table.custom-table thead th {
    font-size: 16px;
    font-weight: bold;
}

table.custom-table tbody td {
    font-size: 15px;
    font-weight: bold;
}

table.custom-table tr td a {
    font-weight: bold !important;
}

.text-font {
    color: black !important;
    font-size: 17px;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none;
    color: black;
    font-weight: bold;
}

.select2-results__option {
    padding: 6px;
    user-select: none;
    -webkit-user-select: none;
    color: black;
    font-weight: bold;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: black !important;
}



.show-hide {
    position: absolute;
    left: 15px;
    top: 7px;
}

.card-overlay a {
    display: block;
    text-align: center !important;
    color: white;
    padding: 2%;
    font-size: 19px;
    background: #80808073;
    margin-top: 6%;
}

.alert-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

input[type=date],
input[type=time] {
    text-align-last: justify;
}

.scroll-overflow {
    height: calc(100vh - 52px);
    overflow-y: auto;
    overflow-x: hidden;
}

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar {
    width: 4px;
    background-color: var(--app-primary);
}

#style-3::-webkit-scrollbar-thumb {
    background-color: var(--app-primary);
}

#myTable_wrapper>.row:nth-child(3) .col-md-5 {
    display: none;
}

#myTable_wrapper>.row:nth-child(1) .col-md-6:nth-child(2) {
    display: none;
}

.bg-custom-light {
    background-color: #F8F9FA;
}

.table.display thead th {
    background-color: white !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border-color: #eee;
    border-style: solid;
    border-width: 1px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    ;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid;
    background: transparent;
}

.active>.page-link,
.page-link.active {

    z-index: 3;
    color: white !important;
    background-color: var(--primary) !important;
    border-color: #0d6efd;
}

#myTable_length label {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_length select {
    width: 70px;
    margin: 0px 7px;
}

.form-select {
    font-weight: bold;
    border-width: 2px;
}

.bg-app-primary {
    background-color: var(--primary) !important;
}

.bg-app-primary:focus,
.bg-app-primary:hover {
    background-color: var(--dark-primary) !important;
}

.add-btn {
    width: 35px;
    height: 35px;
    cursor: pointer;

}

.add-btn.bg-app-primary:hover {
    background-color: var(--dark-primary);
}

.add-btn.bg-success:hover {
    background-color: rgb(22 86 57) !important;
}

.add-btn.bg-primary:hover {
    background-color: rgb(18 92 202) !important;
}

::placeholder {
    color: var(--primary) !important;
}

.page-link:focus {
    color: white;
    background-color: var(--primary);
    box-shadow: none;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--app-primary);
}

.nav-pills .nav-link {
    font-size: 16px;
    color: dimgray;
}

.table-custom-danger {
    background: #f8d7da !important;
    ;
}

.table-custom-primary {
    background: #cfe2ff !important;
}

.table-custom-warning {
    background-color: #fff3cd !important;
}

.table-custom-success {
    background-color: #d1e7dd !important;
}

.min-height {
    min-height: auto !important;
}

.custom-breadcrumb-font {
    font-size: 16px;
}

.text-hover:hover {
    color: var(--app-primary);
    cursor: pointer;
}

.dow,
.datepicker-switch .datepicker-days .next,
.datepicker-days .prev {
    border-radius: 0px !important;
}

.select2 {
    width: 100% !important;
}

.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    text-align: right !important;
}

.pagination {
    flex-direction: row-reverse !important;
}

.custom-scroll-design {

    overflow-y: auto;
    overflow-x: hidden;
}

.style-4::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

.style-4::-webkit-scrollbar {
    width: 4px;
    background-color: var(--app-primary);
}

.style-4::-webkit-scrollbar-thumb {
    background-color: var(--app-primary);
}

.form-switch .form-check-input {
    font-size: 19px;
}

.max-height-400 {
    max-height: 400px;
}

.tableOverflow {
    overflow-x: auto;
    overflow-y: hidden;
}

.bg-login {
    /* background: linear-gradient(9deg, #efc083, #a62e2ed4); */

    /* background-image: url(https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?cs=srgb&dl=pexels-stywo-1261728.jpg&fm=jpg); */
    background-size: cover;
    /* background-image: url(https://media.industrialinfo.com/analytics_forecasting/images/forecast_cards-bg.png); */
    background-image: url(https://www.shutterstock.com/image-vector/hud-interface-virtual-hologram-future-260nw-764856502.jpg);
}

.bg-blur {
    box-shadow: inset 0px 0px 2px #fefefed1;
    -webkit-backdrop-filter: saturate(200%) blur(30px);
    backdrop-filter: saturate(200%) blur(30px);
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.bg-smowhite {
    background-color: #f5f4f1;
}

.form-check-input {
    width: 1.4em;
    height: 1.4em;
}

.form-check-input:checked {
    background-color: var(--app-primary);
    border-color: var(--app-secondar);
}

.form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgb(224 167 93 / 28%);
}

button.close {
    background: #dc3545;
    color: white;
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    border: 2px solid;
    border-radius: 5px;
}

.modal-title {
    color: var(--app-primary);
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    color: black;
    font-size: 19px;
}

.bg-app-secondary {
    /* background-color: var(--app-primary); */
    background-color: var(--app-secondary);
}

.bg-btn-primary {
    background-color: var(--app-primary);
    color: white;
}

td p {
    margin-bottom: 0;
}

.btn.bg-btn-primary:hover {
    background-color: #c74242;
}

.text-app-primary {
    color: var(--app-primary);
}

.bg-secondary-text-primary {
    color: var(--app-primary);
    background-color: var(--app-secondary);
}

.app-bg-secondary-light {
    background-color: var(--app-secondary-light);
}

.app-border-primary {
    border-color: var(--app-primary) !important;
}

a.text-app-primary:hover {
    color: black;
}

.user-profile.dropdown-toggle::after {
    /* display: none; */
    vertical-align: .155em;
    border-top: .4em solid;
    border-left: .4em solid transparent;
    border-bottom: 0;
    border-right: .4em solid transparent;
}

input.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    border-width: 1px;
}

table.dataTable tbody td,
tbody td {
    font-size: 18px;
}

table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled,
table.dataTable thead>tr>td.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting_asc_disabled,
table.dataTable thead>tr>td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 10px;
    padding-left: 26px;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    right: auto;
    left: 10px;
}

.custom-tabs-style.nav-pills .nav-link.active,
.custom-tabs-style.nav-pills .show>.nav-link {
    background-color: white;
    color: var(--app-primary);
    border-bottom: 2px solid;
    border-radius: 0;

}

.custom-tabs-style.nav-pills .nav-link {
    font-size: 18px;
    font-weight: bold;
}

.bg-gray {
    background-color: #F8F9FA;
    color: var(--app-primary);
}

.form-checkbox-control:checked {
    background-color: var(--app-primary);
}

/* ============================================================
   Auth pages (login / forget-password) — body.login scope
   ============================================================ */
:root {
    --login-primary: var(--app-primary, #734AA4);
    --login-secondary: var(--app-secondary, #2BB4CC);
    --login-font: 'IBM Plex Sans Arabic', sans-serif;
}

body.login {
    min-height: 100vh !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--login-primary), var(--login-secondary)) !important;
    background-attachment: fixed !important;
}

body.login,
body.login .login-title,
body.login .login-subtitle,
body.login label,
body.login input,
body.login button,
body.login .login-remember,
body.login .login-forgot,
body.login .login-footer,
body.login .login-back {
    font-family: var(--login-font) !important;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 30px 70px -25px rgba(20, 24, 45, .45);
    padding: 42px 36px;
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.login-logo img {
    max-height: 76px;
}

.login-logo .login-logo-fallback {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 27px;
    background: linear-gradient(135deg, var(--login-primary), var(--login-secondary));
}

.login-title {
    font-weight: 700;
    font-size: 1.45rem;
    color: #1f2533;
    text-align: center !important;
    margin: 0 0 6px;
}

.login-subtitle {
    text-align: center !important;
    font-size: .92rem;
    margin: 0 0 26px;
    line-height: 1.7;
}

.login-field {
    margin-bottom: 18px;
}

.login-field label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    color: #4a5163;
    margin-bottom: 8px;
    text-align: right !important;
}

.login-input {
    position: relative;
}

.login-input .login-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #b2b8c7;
    font-size: 15px;
    pointer-events: none;
    transition: color .2s ease;
}

.login-input input {
    width: 100%;
    height: 52px;
    border: 1px solid #e3e7f0;
    border-radius: 13px;
    background: #fafbfd;
    padding: 0 46px 0 46px;
    font-size: .95rem;
    color: #1f2533;
    text-align: right !important;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.login-input input::placeholder {
    color: #b6bccb;
}

.login-input input:focus {
    outline: none;
    background: #fff;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 4px rgba(115, 74, 164, .14);
}

.login-input input:focus~.login-icon {
    color: var(--login-primary);
}

.login-toggle {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #b2b8c7;
    cursor: pointer;
    font-size: 15px;
    padding: 4px;
}

.login-toggle:hover {
    color: var(--login-primary);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 24px;
    font-size: .85rem;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4a5163;
    margin: 0;
    cursor: pointer;
}

.login-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--login-primary);
    cursor: pointer;
}

.login-forgot {
    color: var(--login-secondary);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.login-forgot:hover {
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    height: 53px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    background: linear-gradient(135deg, var(--login-primary), var(--login-secondary));
    box-shadow: 0 14px 26px -10px rgba(115, 74, 164, .65);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px -12px rgba(115, 74, 164, .75);
}

.login-btn:active {
    transform: translateY(0);
    opacity: .92;
}

.login-back {
    display: inline-block;
    margin-top: 18px;
    color: #6b7280;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.login-back:hover {
    color: var(--login-primary);
}

.login-footer {
    text-align: center !important;
    margin-top: 22px;
    color: #ffffff;
    opacity: .85;
    font-size: .8rem;
}

.login-back-wrap {
    text-align: center !important;
}

/* ============================================================
   Dashboard redesign — Light minimal sidebar + white top bar
   ============================================================ */

/* ---------- TOP BAR ---------- */
.top_nav .nav_menu {
    background: #fff !important;
    border-bottom: 1px solid #eef0f5 !important;
    box-shadow: 0 2px 12px -6px rgba(20, 24, 45, .18);
    min-height: 62px;
}

#menu_toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #4a5163;
    font-size: 19px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

#menu_toggle:hover {
    background: #f3f4f8;
    color: var(--app-primary);
}

.top_nav .nav.toggle h4 {
    color: #1f2533;
    font-size: 1.15rem;
}

/* Notification + profile triggers */
.top_nav .user-profile,
.top_nav .info-number {
    font-weight: 600;
    border-radius: 11px;
    padding: 7px 10px !important;
    transition: background .18s ease, color .18s ease;
    display: inline-flex;
    align-items: center;
}

.top_nav .user-profile:hover,
.top_nav .info-number:hover {
    background: #f3f4f8;
    color: var(--app-primary) !important;
}

.top_nav .info-number .fa-bell-o {
    color: var(--app-primary) !important;
}

.top_nav .user-profile img {
    border: 2px solid #eef0f5;
    box-shadow: 0 0 0 3px rgba(115, 74, 164, .06);
}

/* Badges in brand colors */
.top_nav .info-number .badge,
#notification_counter {
    background: linear-gradient(135deg, var(--app-primary), var(--app-secondary)) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 4px 10px -4px rgba(115, 74, 164, .6);
}

/* Dropdowns */
.top_nav .dropdown-menu,
.dropdown-usermenu {
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 48px -20px rgba(20, 24, 45, .35) !important;
    padding: 8px !important;
    margin-top: 8px;
}

.top_nav .dropdown-menu .dropdown-item {
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
}

.top_nav .dropdown-menu .dropdown-item:hover {
    background: #f3f4f8 !important;
    color: var(--app-primary) !important;
}

/* ---------- SIDEBAR ---------- */
.left_col,
.left_col .scroll-view {
    background: #fff !important;
}

.nav-md .container.body .col-md-3.left_col {
    border-left: 1px solid #eef0f5;
    box-shadow: -8px 0 28px -22px rgba(20, 24, 45, .22);
}

.nav-md .container.body .right_col {
    border-right: 0 !important;
}

.navbar.nav_title {
    background: transparent !important;
}

.main_menu_side {
    padding: 14px 8px !important;
}

.menu_section {
    margin-bottom: 6px !important;
}

#sidebar-menu hr {
    border: 0 !important;
    border-top: 1px solid #f0f1f5 !important;
    margin: 6px 12px !important;
}

/* Parent items */
.nav.side-menu>li>a,
.nav.child_menu>li>a {
    font-weight: 600 !important;
    font-size: 14px !important;
}

.nav.side-menu>li>a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 14px !important;
    margin: 0 6px 4px !important;
    border-radius: 12px !important;
    transition: background .15s ease, color .15s ease;
}

.nav.side-menu>li>a:hover {
    background: #f3f4f8 !important;
    color: var(--app-primary) !important;
}

.nav.side-menu>li>a>i:first-child {
    width: 22px;
    text-align: center;
    font-size: 16px;
    flex: 0 0 auto;
}

/* Chevron */
.side-menu a span.fa {
    color: #b6bccb !important;
    float: left !important;
    margin-top: 3px;
    margin-right: auto;
    transition: transform .2s ease, color .2s ease;
}

.side-menu li.active>a span.fa {
    color: var(--app-primary) !important;
    transform: rotate(-180deg);
}

/* Active parent */
.nav.side-menu>li.active>a {
    background: rgba(115, 74, 164, .10) !important;
    color: var(--app-primary) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.nav.side-menu>li.active>a i {
    color: var(--app-primary) !important;
}

.nav.side-menu>li {
    position: relative;
}

.nav.side-menu>li.active::before {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(var(--app-primary), var(--app-secondary));
}

/* Child items */
.nav.child_menu {
    background: transparent;
    padding: 2px 0 6px;
}

.nav.child_menu li {
    padding-right: 0 !important;
}

.nav.child_menu li a,
.nav.child_menu>li>a {
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 8px 42px 8px 14px !important;
    margin: 0 6px;
    border-radius: 10px;
    display: block;
    transition: background .15s ease, color .15s ease;
}

.nav.child_menu li a:hover {
    background: #f3f4f8 !important;
    color: var(--app-primary) !important;
}

.nav.child_menu li a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #cfd4e0;
    margin-left: 10px;
    vertical-align: middle;
    transition: background .15s ease;
}

.nav.child_menu li a:hover::before {
    background: var(--app-primary);
}

.nav.child_menu li.current-page>a,
.nav li.current-page>a,
li.current-page>a {
    color: var(--app-primary) !important;
    font-weight: 600 !important;
    background: rgba(115, 74, 164, .08) !important;
}

.nav.child_menu li.current-page>a::before,
li.current-page>a::before {
    background: var(--app-primary) !important;
}

/* Remove old Gentelella tree markers for a cleaner look */
.nav-md ul.nav.child_menu li:before,
.nav-md ul.nav.child_menu li:after {
    display: none !important;
}

/* howto buttons inside menu */
#sidebar-menu .child_menu .btn {
    text-align: right;
    width: 100%;
}

/* ============================================================
   Dashboard responsive — mobile off-canvas sidebar (<= 991px)
   Hooks into theme's #menu_toggle (nav-md = closed, nav-sm = open)
   ============================================================ */
@media (max-width: 991px) {

    /* Content takes full width, sidebar no longer reserves space */
    .nav-md .container.body .right_col,
    .nav-sm .container.body .right_col,
    .main_container .top_nav {
        margin: 0 !important;
        width: 100% !important;
        border: 0 !important;
    }

    .nav-md .container.body .right_col,
    .nav-sm .container.body .right_col {
        padding: 14px !important;
    }

    /* Sidebar becomes a fixed off-canvas drawer (RTL: slides from the right) */
    .nav-md .container.body .col-md-3.left_col,
    .nav-sm .container.body .col-md-3.left_col {
        position: fixed !important;
        top: 62px !important;
        right: 0 !important;
        left: auto !important;
        width: 260px !important;
        height: calc(100vh - 62px) !important;
        z-index: 10050 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #fff !important;
        transition: transform .25s ease !important;
        box-shadow: -12px 0 34px -14px rgba(20, 24, 45, .4) !important;
    }

    /* Closed (default nav-md) */
    .nav-md .container.body .col-md-3.left_col {
        transform: translateX(100%) !important;
    }

    /* Open (after tapping the hamburger -> nav-sm) */
    .nav-sm .container.body .col-md-3.left_col {
        transform: translateX(0) !important;
    }

    /* Inside the drawer always show the FULL menu (undo icon-only collapse) */
    .nav-sm .nav.side-menu>li>a {
        display: flex !important;
        align-items: center;
        gap: 10px;
        text-align: right !important;
        padding: 11px 14px !important;
        margin: 0 6px 4px !important;
        border-radius: 12px !important;
        width: auto !important;
    }

    .nav-sm .nav.side-menu li a i,
    .nav-sm .nav.side-menu>li>a>i:first-child {
        font-size: 16px !important;
        width: 22px !important;
        text-align: center !important;
    }

    .nav-sm span.fa,
    .nav-sm .menu_section h3 {
        display: inline-block !important;
    }

    .nav-sm .menu_section {
        margin: 0 !important;
    }

    /* Child menus expand inline (not as absolute fly-outs) */
    .nav-sm .nav.child_menu,
    .nav-sm li.active-sm .nav.child_menu {
        position: static !important;
        width: auto !important;
        left: auto !important;
        right: auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .nav-sm .nav.child_menu li a {
        text-align: right !important;
        padding: 8px 42px 8px 14px !important;
    }

    /* Dimmed backdrop behind the open drawer */
    body.nav-sm::after {
        content: "";
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 18, 34, .45);
        z-index: 10040;
    }
}

/* Keep top-bar items tidy on very small phones */
@media (max-width: 575px) {
    .top_nav .user-profile {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top_nav .nav.toggle h4 {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top_nav .nav_menu {
        min-height: 56px;
    }

    .nav-md .container.body .col-md-3.left_col,
    .nav-sm .container.body .col-md-3.left_col {
        top: 56px !important;
        height: calc(100vh - 56px) !important;
    }

    body.nav-sm::after {
        top: 56px;
    }
}

/* Responsive refinements */
@media (max-width: 991px) {

    html,
    body.nav-md,
    body.nav-sm {
        overflow-x: hidden !important;
    }

    .nav-md .container.body .col-md-3.left_col,
    .nav-sm .container.body .col-md-3.left_col {
        display: block !important;
    }
}

/* ============================================================
   Responsive FIX v2 — decouple mobile drawer from nav-md/nav-sm
   Drawer visibility is driven by body.sidebar-open (set via JS)
   ============================================================ */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 991px) {

    /* Sidebar hidden by default in BOTH nav states */
    .nav-md .container.body .col-md-3.left_col,
    .nav-sm .container.body .col-md-3.left_col {
        transform: translateX(100%) !important;
    }

    /* Open only when body.sidebar-open is set */
    body.sidebar-open .container.body .col-md-3.left_col {
        transform: translateX(0) !important;
    }

    /* Kill the old nav-sm pseudo backdrop (could show with no drawer) */
    body.nav-sm::after {
        display: none !important;
    }

    /* Real, clickable backdrop element */
    body.sidebar-open .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 18, 34, .45);
        z-index: 10040;
    }
}

@media (max-width: 575px) {
    body.sidebar-open .sidebar-backdrop {
        top: 56px;
    }
}

/* Sidebar scrollbar — subtle, replaces the solid purple bar */
#style-3::-webkit-scrollbar,
.left_col .scroll-overflow::-webkit-scrollbar {
    width: 6px !important;
    background-color: transparent !important;
}

#style-3::-webkit-scrollbar-track {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

#style-3::-webkit-scrollbar-thumb {
    background-color: #d8dce6 !important;
    border-radius: 8px !important;
}

#style-3::-webkit-scrollbar-thumb:hover {
    background-color: #b9bfce !important;
}

/* ============================================================
   Collapsed sidebar (nav-sm) on desktop — clean icon-only rail
   ============================================================ */
@media (min-width: 992px) {
    .nav-sm .nav.side-menu>li>a {
        display: block !important;
        text-align: center !important;
        padding: 14px 0 !important;
        margin: 0 !important;
        font-size: 0 !important;
        /* hide the text label */
        border-radius: 0 !important;
        gap: 0 !important;
    }

    .nav-sm .nav.side-menu>li>a>i:first-child {
        font-size: 18px !important;
        width: auto !important;
        margin: 0 !important;
    }

    .nav-sm .side-menu a span.fa {
        display: none !important;
    }

    .nav-sm .nav.side-menu>li.active>a {
        background: rgba(115, 74, 164, .10) !important;
    }

    .nav-sm .nav.side-menu>li.active::before {
        top: 0 !important;
        bottom: 0 !important;
    }

    /* Fly-out child menu when hovering a collapsed item */
    .nav-sm .nav.side-menu li:hover>.child_menu {
        font-size: 13px !important;
    }
}

/* ============================================================
   Collapsed sidebar submenu -> proper pop-out panel (desktop)
   ============================================================ */
@media (min-width: 992px) {

    /* Let the fly-out escape the rail's clipping */
    .nav-sm .left_col,
    .nav-sm .scroll-overflow,
    .nav-sm #style-3,
    .nav-sm .left_col .scroll-view {
        overflow: visible !important;
    }

    .nav-sm .nav.side-menu>li {
        position: relative !important;
    }

    /* The pop-out child panel */
    .nav-sm ul.nav.child_menu {
        position: absolute !important;
        top: 0 !important;
        right: 100% !important;
        /* opens to the LEFT of the rail (RTL) */
        left: auto !important;
        width: 230px !important;
        background: #fff !important;
        border: 1px solid #eef0f5 !important;
        border-radius: 12px !important;
        box-shadow: -10px 12px 34px -12px rgba(20, 24, 45, .35) !important;
        padding: 8px !important;
        margin: 0 6px 0 0 !important;
        display: none !important;
        z-index: 10060 !important;
    }

    /* Show on hover or when the theme marks it active */
    .nav-sm .nav.side-menu>li:hover>ul.nav.child_menu,
    .nav-sm .nav.side-menu>li.active-sm>ul.nav.child_menu,
    .nav-sm .nav.side-menu>li.active>ul.nav.child_menu {
        display: block !important;
    }

    .nav-sm ul.nav.child_menu li {
        padding: 0 !important;
    }

    .nav-sm ul.nav.child_menu li a {
        text-align: right !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
        white-space: normal !important;
    }
}

/* Lift collapsed sidebar above content so the pop-out submenu overlays it */
@media (min-width: 992px) {
    .nav-sm .container.body .main_container {
        z-index: 10000 !important;
    }
}

/* Collapsed submenu: show ONLY the hovered item's pop-out (avoid overlap) */
@media (min-width: 992px) {

    .nav-sm .nav.side-menu>li.active>ul.nav.child_menu,
    .nav-sm .nav.side-menu>li.active-sm>ul.nav.child_menu {
        display: none !important;
    }

    .nav-sm .nav.side-menu>li:hover>ul.nav.child_menu {
        display: block !important;
    }
}

/* Mobile: drop sticky on main_container so the fixed drawer overlays content */
@media (max-width: 991px) {
    .container.body .main_container {
        position: static !important;
    }
}

/* ============================================================
   Top nav responsive (mobile)
   ============================================================ */
@media (max-width: 767px) {
    .top_nav .nav_menu {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Hide the brand text to free space (hamburger stays) */
    .top_nav .nav.toggle a.text-dark h4 {
        display: none !important;
    }

    .top_nav .navbar-right {
        margin: 6px 0 !important;
        padding: 0 !important;
    }

    .top_nav .navbar-right>li,
    .top_nav #items_notifications {
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    .top_nav .user-profile {
        padding: 5px 6px !important;
    }

    .top_nav .user-profile img {
        width: 28px !important;
        height: 28px !important;
    }

    #menu_toggle {
        margin-left: 4px !important;
        margin-right: 0 !important;
    }
}

/* Very small phones: hide profile name, keep avatar */
@media (max-width: 430px) {
    .top_nav .navbar-right>li:last-child .user-profile {
        font-size: 0 !important;
        gap: 0 !important;
    }

    .top_nav .navbar-right>li:last-child .user-profile img {
        margin: 0 !important;
    }

    .top_nav .navbar-right>li,
    .top_nav #items_notifications {
        margin-left: 3px !important;
        margin-right: 3px !important;
    }
}

/* ============================================================
   Notifications dropdown — responsive (was a fixed 400px)
   ============================================================ */
.notif-menu {
    width: 380px !important;
    max-width: 92vw !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 48px -20px rgba(20, 24, 45, .35) !important;
    padding: 6px !important;
}

.notif-menu .dropdown-item,
.notif-menu .notificaitonItem {
    text-align: right !important;
    white-space: normal !important;
    border-radius: 10px !important;
    border-bottom: 1px solid #f0f1f5 !important;
}

.notif-menu .notificaitonItem:last-child {
    border-bottom: 0 !important;
}

.notif-menu .dropdown-item p.row {
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 12px !important;
}

/* On phones make it a fixed panel that can't overflow the screen */
@media (max-width: 575px) {
    #notificationsMenu.notif-menu {
        position: fixed !important;
        top: 60px !important;
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        inset: 60px 8px auto 8px !important;
    }
}

/* ============================================================
   Dashboard home — welcome hero + sections + stat cards
   ============================================================ */
.dash-hero {
    background: linear-gradient(135deg, var(--app-primary, #734AA4), var(--app-secondary, #2BB4CC));
    border-radius: 20px;
    color: #fff;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    box-shadow: 0 20px 44px -22px rgba(115, 74, 164, .65);
}

.dash-hero-title {
    font-size: 1.55rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #fff;
}

.dash-hero-sub {
    margin: 0;
    opacity: .9;
    font-size: .95rem;
}

.dash-hero-icon {
    font-size: 2.4rem;
    opacity: .9;
    flex: 0 0 auto;
}

.dash-section {
    margin-bottom: 28px;
}

.dash-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.08rem;
    font-weight: 700;
    color: #1f2533;
    margin: 0 0 16px;
}

.dash-section-title::before {
    content: "";
    width: 6px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(var(--app-primary, #734AA4), var(--app-secondary, #2BB4CC));
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}

.dash-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 18px;
    padding: 20px;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dash-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -22px rgba(20, 24, 45, .38);
    border-color: #e2e6f0;
}

.dash-card-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.dash-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash-card-num {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1f2533;
    line-height: 1.1;
}

.dash-card-label {
    font-weight: 600;
    font-size: .9rem;
}

/* Color variants */
.dash-card--purple .dash-card-icon {
    background: rgba(115, 74, 164, .12);
    color: #734AA4;
}

.dash-card--teal .dash-card-icon {
    background: rgba(43, 180, 204, .15);
    color: #1f93a8;
}

.dash-card--green .dash-card-icon {
    background: rgba(39, 174, 96, .14);
    color: #1e8e54;
}

.dash-card--blue .dash-card-icon {
    background: rgba(55, 138, 221, .14);
    color: #2b78c4;
}

.dash-card--amber .dash-card-icon {
    background: rgba(239, 159, 39, .16);
    color: #c9821a;
}

.dash-card--slate .dash-card-icon {
    background: rgba(90, 99, 120, .14);
    color: #4a5163;
}

@media (max-width: 575px) {
    .dash-hero {
        padding: 20px 22px;
        border-radius: 16px;
    }

    .dash-hero-title {
        font-size: 1.25rem;
    }

    .dash-card {
        padding: 16px;
        gap: 12px;
    }

    .dash-card-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .dash-card-num {
        font-size: 1.45rem;
    }
}

/* ============================================================
   Dashboard home redesign
   ============================================================ */
.dash-wrap {
    max-width: 1280px;
}

.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(120deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
    color: #fff;
    border-radius: 20px;
    padding: 22px 26px;
    margin-bottom: 26px;
    box-shadow: 0 18px 40px -22px rgba(115, 74, 164, .6);
}

.dash-hero__title {
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 4px;
    color: #fff;
}

.dash-hero__sub {
    margin: 0;
    opacity: .85;
    font-size: .9rem;
}

.dash-hero__icon {
    font-size: 38px;
    opacity: .9;
}

.dash-section {
    margin-bottom: 24px;
}

.dash-section__title {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2533;
    margin: 0 4px 14px;
    position: relative;
    padding-right: 14px;
}

.dash-section__title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 18px;
    padding: 18px;
    text-decoration: none;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(20, 24, 45, .3);
    border-color: #e2e6f0;
    text-decoration: none;
}

.stat-card__icon {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.stat-card__body {
    display: flex;
    flex-direction: column;
}

.stat-card__num {
    font-weight: 700;
    font-size: 1.7rem;
    color: #1f2533;
    line-height: 1.1;
}

.stat-card__label {
    color: #8a92a6;
    font-weight: 600;
    font-size: .85rem;
}

.sc-purple .stat-card__icon {
    background: rgba(116, 74, 161, .12);
    color: #744aa1;
}

.sc-teal .stat-card__icon {
    background: rgba(45, 179, 214, .14);
    color: #2db3d6;
}

.sc-green .stat-card__icon {
    background: rgba(29, 158, 117, .14);
    color: #1d9e75;
}

.sc-amber .stat-card__icon {
    background: rgba(186, 117, 23, .14);
    color: #ba7517;
}

.sc-blue .stat-card__icon {
    background: rgba(55, 138, 221, .14);
    color: #378add;
}

.sc-dark .stat-card__icon {
    background: rgba(45, 49, 66, .10);
    color: #2d3142;
}

.dash-chart-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 18px;
    padding: 18px 18px 10px;
    height: 100%;
}

.dash-chart-card__title {
    font-weight: 700;
    font-size: .95rem;
    color: #1f2533;
    margin-bottom: 12px;
}

.dash-chart-card__canvas {
    position: relative;
    height: 280px;
}

/* ============================================================
   Notifications dropdown redesign
   ============================================================ */
.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 10px;
    border-bottom: 1px solid #f0f1f5;
    margin-bottom: 6px;
}

.notif-head__title {
    font-weight: 700;
    color: #1f2533;
    font-size: .95rem;
}

.notif-head__count {
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
}

.notif-item {
    border-radius: 12px;
}

.notif-item__link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .15s ease;
    position: relative;
}

.notif-item__link:hover {
    background: #f3f4f8;
    text-decoration: none;
}

.notif-item__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(116, 74, 161, .12);
    color: #744aa1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.notif-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.notif-item__title {
    font-weight: 600;
    color: #1f2533;
    font-size: .85rem;
}

.notif-item__text {
    color: #6b7280;
    font-size: .8rem;
    white-space: normal;
}

.notif-item__time {
    color: #aeb4c2;
    font-size: .72rem;
}

.notif-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-secondary, #2db3d6);
    flex: 0 0 auto;
    margin-top: 6px;
}

.notif-item.is-unread .notif-item__link {
    background: rgba(45, 179, 214, .06);
}

.notif-empty {
    text-align: center;
    color: #aeb4c2;
    padding: 26px 10px;
}

.notif-empty i {
    font-size: 26px;
    display: block;
    margin-bottom: 8px;
    opacity: .6;
}

.notif-empty span {
    font-size: .85rem;
}

/* ============================================================
   Account / profile dropdown redesign
   ============================================================ */
.acct-menu {
    min-width: 240px !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 48px -20px rgba(20, 24, 45, .35) !important;
    padding: 10px !important;
    margin-top: 8px;
}

.acct-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 10px;
}

.acct-head__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #eef0f5;
}

.acct-head__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acct-head__name {
    font-weight: 700;
    color: #1f2533;
    font-size: .9rem;
}

.acct-head__sub {
    color: #8a92a6;
    font-size: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.acct-divider {
    height: 1px;
    background: #f0f1f5;
    margin: 4px 0 8px;
}

.acct-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #4a5163;
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.acct-item i {
    width: 18px;
    text-align: center;
}

.acct-item:hover {
    background: #f3f4f8;
    color: var(--app-primary, #744aa1);
    text-decoration: none;
}

.acct-item--danger:hover {
    background: rgba(226, 75, 74, .1);
    color: #e24b4a;
}

@media (max-width: 575px) {
    .dash-hero {
        padding: 18px;
    }

    .dash-hero__title {
        font-size: 1.15rem;
    }

    .dash-hero__icon {
        font-size: 28px;
    }

    .stat-card__num {
        font-size: 1.4rem;
    }

    .dash-chart-card__canvas {
        height: 240px;
    }
}

/* ============================================================
   Language switcher dropdown redesign
   ============================================================ */
.lang-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.lang-toggle>i {
    font-size: 14px;
    color: #8a92a6;
}

.lang-menu {
    min-width: 170px !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 48px -20px rgba(20, 24, 45, .35) !important;
    padding: 8px !important;
    margin-top: 8px;
}

.lang-menu__head {
    font-weight: 700;
    color: #1f2533;
    font-size: .82rem;
    padding: 4px 8px 8px;
    border-bottom: 1px solid #f0f1f5;
    margin-bottom: 6px;
}

.lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: #4a5163;
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.lang-item i {
    width: 18px;
    text-align: center;
    color: #b6bccb;
}

.lang-item:hover {
    background: #f3f4f8;
    color: var(--app-primary, #744aa1);
    text-decoration: none;
}

.lang-item:hover i {
    color: var(--app-primary, #744aa1);
}

/* ============================================================
   List page redesign (roles, reusable)
   ============================================================ */
.list-page {
    max-width: 1100px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 2px 18px;
    flex-wrap: wrap;
}

.page-head__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-head__icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
    box-shadow: 0 10px 22px -10px rgba(115, 74, 164, .6);
}

.page-head__title h4 {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
    color: #1f2533;
}

.page-head__count {
    color: #8a92a6;
    font-size: .82rem;
    font-weight: 600;
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: .86rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.pbtn i {
    font-size: 13px;
}

.pbtn--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
    box-shadow: 0 12px 24px -12px rgba(115, 74, 164, .6);
}

.pbtn--primary:hover {
    transform: translateY(-1px);
    color: #fff;
}

.pbtn--ghost {
    color: #4a5163;
    background: #fff;
    border-color: #e3e7f0;
}

.pbtn--ghost:hover {
    color: var(--app-primary, #744aa1);
    border-color: var(--app-primary, #744aa1);
    background: #faf9fd;
}

.page-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 14px 34px -24px rgba(20, 24, 45, .25);
}

.clean-table {
    margin: 0;
}

.clean-table thead th {
    background: #f7f8fb !important;
    color: #6b7280 !important;
    font-weight: 700;
    font-size: .8rem;
    border: 0 !important;
    padding: 12px 14px;
}

.clean-table thead th:first-child {
    border-radius: 0 10px 10px 0;
}

.clean-table thead th:last-child {
    border-radius: 10px 0 0 10px;
}

.clean-table tbody td {
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 14px;
    vertical-align: middle;
    color: #1f2533;
}

.clean-table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.clean-table tbody tr:hover td {
    background: #f9fafc;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f2533;
}

.role-pill i {
    color: var(--app-primary, #744aa1);
    width: 18px;
    text-align: center;
}

.ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e3e7f0;
    background: #fff;
    cursor: pointer;
    margin-inline-start: 4px;
    transition: .15s ease;
    text-decoration: none;
}

.ibtn--edit {
    color: var(--app-primary, #744aa1);
}

.ibtn--edit:hover {
    background: rgba(116, 74, 161, .1);
    border-color: var(--app-primary, #744aa1);
}

.ibtn--del {
    color: #e24b4a;
}

.ibtn--del:hover {
    background: rgba(226, 75, 74, .1);
    border-color: #e24b4a;
}

@media (max-width: 575px) {
    .page-head__actions .pbtn span {
        display: none;
    }

    .page-head__actions .pbtn {
        padding: 9px 11px;
    }
}

/* Roles page tweaks: full width, colored buttons */
.list-page {
    max-width: none !important;
}

.pbtn--green {
    color: #fff;
    background: #1d9e75;
    box-shadow: 0 12px 24px -12px rgba(29, 158, 117, .55);
}

.pbtn--green:hover {
    color: #fff;
    transform: translateY(-1px);
    background: #178a65;
}

.pbtn--blue {
    color: #fff;
    background: #378add;
    box-shadow: 0 12px 24px -12px rgba(55, 138, 221, .5);
}

.pbtn--blue:hover {
    color: #fff;
    transform: translateY(-1px);
    background: #2f78c2;
}

.pbtn--amber {
    color: #fff;
    background: #e89a2c;
    box-shadow: 0 12px 24px -12px rgba(186, 117, 23, .5);
}

.pbtn--amber:hover {
    color: #fff;
    transform: translateY(-1px);
    background: #cf8420;
}

/* ============================================================
   Unified list / panel pages (global .x_panel restyle)
   ============================================================ */
.right_col .x_panel {
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px -24px rgba(20, 24, 45, .25) !important;
    padding: 6px 8px 12px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Panel header (both .border-bottom header and .x_title) */
.right_col .x_panel>.border-bottom,
.right_col .x_panel .x_title {
    border-bottom: 1px solid #f0f1f5 !important;
    padding: 14px 12px 12px !important;
    margin-bottom: 12px !important;
}

.right_col .x_panel h3,
.right_col .x_panel .x_title h2 {
    font-weight: 700 !important;
    font-size: 1.18rem !important;
    color: #1f2533 !important;
    margin: 0 !important;
}

.right_col .x_content {
    padding: 4px 12px 8px !important;
}

/* Toolbox action buttons -> squircle, consistent size, keep their colors */
.panel_toolbox {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.panel_toolbox>li {
    float: none !important;
}

.panel_toolbox .add-btn,
.panel_toolbox>li>a,
.panel_toolbox>li>button,
.panel_toolbox .btn,
.panel_toolbox .rounded-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    box-shadow: 0 10px 22px -10px rgba(20, 24, 45, .4) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.panel_toolbox .add-btn:hover,
.panel_toolbox>li>a:hover,
.panel_toolbox>li>button:hover,
.panel_toolbox .btn:hover {
    transform: translateY(-2px) !important;
}

/* Clean table inside panels */
.right_col .x_panel table.table {
    margin: 0 !important;
}

.right_col .x_panel table.table thead th {
    background: #f7f8fb !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    border: 0 !important;
    padding: 12px 14px !important;
    vertical-align: middle;
}

.right_col .x_panel table.table tbody td {
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    color: #1f2533 !important;
}

.right_col .x_panel table.table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.right_col .x_panel table.table tbody tr:hover td {
    background: #f9fafc !important;
}

/* DataTables controls (search / length / pagination) */
.right_col .dataTables_wrapper .dataTables_filter input,
.right_col .dataTables_wrapper .dataTables_length select {
    border: 1px solid #e3e7f0 !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    outline: none !important;
}

.right_col .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--app-primary, #744aa1) !important;
    box-shadow: 0 0 0 3px rgba(115, 74, 164, .12) !important;
}

.right_col .dataTables_wrapper .paginate_button {
    border-radius: 9px !important;
    margin: 0 2px !important;
}

.right_col .dataTables_wrapper .paginate_button.current {
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6)) !important;
    border: 0 !important;
    color: #fff !important;
}

/* Filter form inputs on list pages */
.right_col .x_content form .form-control,
.right_col .x_content form .form-select {
    border: 1px solid #e3e7f0 !important;
    border-radius: 10px !important;
}

.right_col .x_content form .form-control:focus,
.right_col .x_content form .form-select:focus {
    border-color: var(--app-primary, #744aa1) !important;
    box-shadow: 0 0 0 3px rgba(115, 74, 164, .12) !important;
}

/* ============================================================
   Role create/edit form + permissions UI
   ============================================================ */
.section-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1f2533;
}

.sub-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1f2533 !important;
    position: relative;
    padding-right: 14px;
}

.sub-title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
}

.role-form label,
.role-form .col-form-label {
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: #4a5163;
}

.role-form .form-control {
    height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #e3e7f0 !important;
    font-size: .95rem !important;
    background: #fafbfd;
}

.role-form .form-control:focus {
    border-color: var(--app-primary, #744aa1) !important;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(115, 74, 164, .12) !important;
}

.role-basic {
    background: #fafbfd;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    padding: 20px;
}

/* Permission module tabs */
.clean-tabs {
    background: #f7f8fb !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    padding: 8px !important;
}

.clean-tabs .nav-link {
    padding: 11px 14px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    color: #4a5163 !important;
    text-align: right !important;
    margin-bottom: 4px;
    transition: background .15s, color .15s;
}

.clean-tabs .nav-link:hover {
    background: #eef0f5 !important;
    color: var(--app-primary, #744aa1) !important;
}

.clean-tabs .nav-link.active {
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6)) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -12px rgba(115, 74, 164, .6);
}

.tab-content.custom-scroll-design,
.role-form .tab-content {
    background: #fff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    padding: 14px !important;
}

/* Submodule blocks */
.role-form .tab-content .border.rounded {
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.submodule-header {
    background: rgba(116, 74, 161, .06) !important;
    color: #1f2533 !important;
    padding: 12px 16px !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #f0f1f5 !important;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px;
}

.permission-item {
    border: 1px solid #e9ecf3;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #4a5163;
    transition: border-color .15s, background .15s;
}

.permission-item:hover {
    border-color: #d9deea;
    background: #fafbfd;
}

.permission-item input[type=checkbox] {
    width: 20px;
    height: 20px;
    transform: none;
    accent-color: var(--app-primary, #744aa1);
    cursor: pointer;
}

.permission-item input[type=checkbox]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .permission-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .permission-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Unify Bootstrap .card containers on dashboard pages
   ============================================================ */
.right_col .card {
    border: 1px solid #eef0f5 !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px -24px rgba(20, 24, 45, .25) !important;
}

.right_col .card>.card-header {
    background: #fff !important;
    border-bottom: 1px solid #f0f1f5 !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 16px 18px !important;
}

.right_col .card .card-header h3,
.right_col .card .card-header h4 {
    font-weight: 700 !important;
    color: #1f2533 !important;
    margin: 0 !important;
}

.right_col .card>.card-body {
    padding: 16px 18px !important;
}

/* Round action buttons in card headers -> squircle (scoped, avatars untouched) */
.right_col .card-header .btn.rounded-circle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    box-shadow: 0 10px 22px -10px rgba(20, 24, 45, .4) !important;
    transition: transform .15s ease;
}

.right_col .card-header .btn.rounded-circle:hover {
    transform: translateY(-2px);
}

/* Clean tables inside .card */
.right_col .card table.table {
    margin: 0 !important;
}

.right_col .card table.table thead th {
    background: #f7f8fb !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    border: 0 !important;
    padding: 12px 14px !important;
    vertical-align: middle;
}

.right_col .card table.table tbody td {
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    color: #1f2533 !important;
}

.right_col .card table.table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.right_col .card table.table tbody tr:hover td {
    background: #f9fafc !important;
}

/* Form inputs inside card bodies */
.right_col .card-body .form-control,
.right_col .card-body .form-select {
    border: 1px solid #e3e7f0 !important;
    border-radius: 11px !important;
}

.right_col .card-body .form-control:focus,
.right_col .card-body .form-select:focus {
    border-color: var(--app-primary, #744aa1) !important;
    box-shadow: 0 0 0 3px rgba(115, 74, 164, .12) !important;
}

/* Consistent brand accent on all list/panel titles (match roles page) */
.right_col .card>.card-header h3,
.right_col .card>.card-header h4,
.right_col .x_panel>.border-bottom h3,
.right_col .x_panel .x_title h2,
.right_col .x_panel .x_content>h3.section,
.right_col .x_panel .x_content>h3.section-title {
    position: relative !important;
    padding-right: 16px !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #1f2533 !important;
    display: inline-block;
}

.right_col .card>.card-header h3::before,
.right_col .card>.card-header h4::before,
.right_col .x_panel>.border-bottom h3::before,
.right_col .x_panel .x_title h2::before,
.right_col .x_panel .x_content>h3.section::before,
.right_col .x_panel .x_content>h3.section-title::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
}

/* ============================================================
   Modals — global redesign (data view, import, delete, image)
   ============================================================ */
.modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 70px -25px rgba(20, 24, 45, .5) !important;
    overflow: hidden;
}

.modal-header {
    background: #fff !important;
    border-bottom: 1px solid #f0f1f5 !important;
    padding: 16px 20px !important;
    align-items: center;
}

.modal-header .modal-title {
    font-weight: 700 !important;
    color: #1f2533 !important;
    font-size: 1.05rem !important;
}

.modal-body {
    padding: 18px 20px !important;
}

.modal-footer {
    border-top: 1px solid #f0f1f5 !important;
    padding: 14px 20px !important;
    gap: 8px;
}

.modal-footer .btn {
    border-radius: 11px !important;
    padding: 8px 18px !important;
    font-weight: 600;
}

.modal .btn-close,
.modal .close {
    border-radius: 9px;
    opacity: .6;
    transition: opacity .15s;
}

.modal .btn-close:hover,
.modal .close:hover {
    opacity: 1;
}

/* data rows inside detail modals */
.modal-body .bg-light {
    background: #fafbfd !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
}

/* PDF / Excel export pill buttons */
.pbtn--pdf {
    color: #fff;
    background: #e24b4a;
    box-shadow: 0 12px 24px -12px rgba(226, 75, 74, .5);
}

.pbtn--pdf:hover {
    color: #fff;
    transform: translateY(-1px);
    background: #c93f3e;
}

.pbtn--excel {
    color: #fff;
    background: #1d9e75;
    box-shadow: 0 12px 24px -12px rgba(29, 158, 117, .5);
}

.pbtn--excel:hover {
    color: #fff;
    transform: translateY(-1px);
    background: #178a65;
}

/* ============================================================
   Search / filter forms (GET forms) — unified filter bar
   ============================================================ */
.right_col form[method="get"],
.right_col form[method="GET"] {
    background: #fafbfd !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
}

.right_col form[method="get"] label,
.right_col form[method="GET"] label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #8a92a6 !important;
    margin-bottom: 6px !important;
}

.right_col form[method="get"] .form-control,
.right_col form[method="GET"] .form-control,
.right_col form[method="get"] .form-select,
.right_col form[method="GET"] .form-select,
.right_col form[method="get"] select,
.right_col form[method="GET"] select,
.right_col form[method="get"] input,
.right_col form[method="GET"] input {
    height: 44px !important;
    border: 1px solid #e3e7f0 !important;
    border-radius: 11px !important;
    background: #fff !important;
    font-size: .9rem !important;
}

.right_col form[method="get"] .form-control:focus,
.right_col form[method="GET"] .form-control:focus,
.right_col form[method="get"] select:focus,
.right_col form[method="GET"] select:focus {
    border-color: var(--app-primary, #744aa1) !important;
    box-shadow: 0 0 0 3px rgba(115, 74, 164, .12) !important;
}

.right_col form[method="get"] button[type="submit"],
.right_col form[method="GET"] button[type="submit"],
.right_col form[method="get"] .btn-primary,
.right_col form[method="GET"] .btn-primary {
    height: 44px !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6)) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px -12px rgba(115, 74, 164, .55) !important;
}

.right_col form[method="get"] .btn-outline-danger,
.right_col form[method="GET"] .btn-outline-danger {
    height: 44px !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
}

/* select2 inside filter bars -> match height/radius */
.right_col .select2-container .select2-selection--single {
    height: 44px !important;
    border: 1px solid #e3e7f0 !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
}

.right_col .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}

.right_col .select2-dropdown {
    border: 1px solid #eef0f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px -18px rgba(20, 24, 45, .3) !important;
}

/* ============================================================
   Table refinements
   ============================================================ */
.right_col .table-responsive {
    border-radius: 14px;
}

.right_col table.table thead th {
    letter-spacing: .2px;
    white-space: nowrap;
}

.right_col table.table tbody td {
    font-size: .9rem;
}

/* status / role badges look */
.right_col table.table .badge {
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 600;
}

/* small action buttons in rows -> soft squircles */
.right_col table.table td .btn-sm.btn-outline-primary,
.right_col table.table td .btn-sm.btn-outline-danger {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.right_col table.table td .btn-sm.btn-primary {
    border-radius: 10px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
    border: 0;
}

/* ============================================================
   Clean ALL data tables (incl. Gentelella tables without .table class)
   ============================================================ */
.right_col .table-responsive>table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

.right_col .table-responsive>table>thead>tr>th,
.right_col .table-responsive>table>thead>tr>td {
    background: #f7f8fb !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    border: 0 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.right_col .table-responsive>table>tbody>tr>td {
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    color: #1f2533 !important;
    background: transparent !important;
    font-size: .9rem;
}

.right_col .table-responsive>table>tbody>tr:last-child>td {
    border-bottom: 0 !important;
}

.right_col .table-responsive>table>tbody>tr:hover>td {
    background: #f9fafc !important;
}

/* neutralize Gentelella heading/column-title borders */
.right_col .table-responsive>table .headings th,
.right_col .table-responsive>table th.column-title {
    border: 0 !important;
}

/* ============================================================
   FORCE clean tables (handles DataTables wrapper + #myTable ID + cell borders)
   ============================================================ */
.right_col .table-responsive table,
.right_col table#myTable,
.right_col table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0 !important;
}

.right_col .table-responsive table thead th,
.right_col .table-responsive table thead td,
.right_col table#myTable thead th,
.right_col table.dataTable thead th {
    background: #f7f8fb !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    border: 0 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.right_col .table-responsive table tbody td,
.right_col table#myTable tbody td,
.right_col table.dataTable tbody td {
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
    color: #1f2533 !important;
    background: transparent !important;
    font-size: .9rem;
}

.right_col .table-responsive table tbody tr:hover td,
.right_col table#myTable tbody tr:hover td {
    background: #f9fafc !important;
}

.right_col .table-responsive table tbody tr:last-child td {
    border-bottom: 0 !important;
}

/* kill ALL vertical/grid borders from theme/datatables */
.right_col .table-responsive table th,
.right_col .table-responsive table td,
.right_col table#myTable th,
.right_col table#myTable td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}

/* Inline row action buttons (replaces dropdown menus) */
.row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.row-actions .ibtn {
    margin: 0 !important;
}

.ibtn--view {
    color: #378add;
}

.ibtn--view:hover {
    background: rgba(55, 138, 221, .1);
    border-color: #378add;
}

.ibtn--on {
    color: #1d9e75;
}

.ibtn--on:hover {
    background: rgba(29, 158, 117, .1);
    border-color: #1d9e75;
}

.ibtn--off {
    color: #e89a2c;
}

.ibtn--off:hover {
    background: rgba(186, 117, 23, .12);
    border-color: #e89a2c;
}

.ibtn--gallery {
    color: #2db3d6;
}

.ibtn--gallery:hover {
    background: rgba(45, 179, 214, .12);
    border-color: #2db3d6;
}

/* ============================================================
   Detail / show pages — key-value tables + section headings
   ============================================================ */
.right_col .x_panel table.table-bordered {
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 18px;
}

.right_col .x_panel table.table-bordered>tbody>tr>th {
    width: 230px;
    background: #fafbfd !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

.right_col .x_panel table.table-bordered>tbody>tr>td {
    color: #1f2533 !important;
    font-weight: 500;
    border: 0 !important;
    border-bottom: 1px solid #f2f3f7 !important;
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

.right_col .x_panel table.table-bordered.table-striped>tbody>tr {
    background: transparent !important;
}

.right_col .x_panel table.table-bordered>tbody>tr:last-child>th,
.right_col .x_panel table.table-bordered>tbody>tr:last-child>td {
    border-bottom: 0 !important;
}

/* stat tables (with header row) inside detail pages */
.right_col .x_panel table.table-bordered>thead>tr>th {
    background: #f7f8fb !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    border: 0 !important;
    padding: 12px 14px !important;
    font-size: .8rem !important;
}

/* Section headings on detail pages */
.right_col .x_panel .x_content h3,
.right_col .x_panel>.row h3,
.right_col .x_panel h3 {
    position: relative;
    padding-right: 14px;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #1f2533 !important;
    margin: 22px 2px 12px !important;
}

.right_col .x_panel .x_content h3::before,
.right_col .x_panel>.row h3::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
}

/* Profile image on detail pages */
.right_col .x_panel .row .col-3 img {
    border-radius: 16px;
    border: 1px solid #eef0f5;
}

/* Detail key-value tables: label column shrinks to content */
.right_col .x_panel table.table-bordered>tbody>tr>th {
    width: 1% !important;
    white-space: nowrap !important;
    min-width: 150px;
}

.right_col .x_panel table.table-bordered>tbody>tr>td {
    text-align: right !important;
}

/* Detail page avatar placeholder */
.detail-avatar {
    width: 120px;
    height: 120px;
    border-radius: 24px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6));
    box-shadow: 0 14px 30px -14px rgba(115, 74, 164, .6);
}

/* ============================================================
   Customer gallery — image grid
   ============================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    padding: 6px 0 16px;
}

.gallery-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(20, 24, 45, .35);
}

.gallery-card__img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #f3f4f8;
    overflow: hidden;
}

.gallery-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.gallery-card:hover .gallery-card__img img {
    transform: scale(1.05);
}

.gallery-card__zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 37, 51, 0);
    color: #fff;
    font-size: 22px;
    opacity: 0;
    transition: .2s ease;
}

.gallery-card:hover .gallery-card__zoom {
    background: rgba(31, 37, 51, .35);
    opacity: 1;
}

.gallery-card__body {
    padding: 12px 14px 4px;
}

.gallery-card__title {
    font-weight: 700;
    color: #1f2533;
    font-size: .92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-card__date {
    color: #8a92a6;
    font-size: .78rem;
    margin-top: 4px;
}

.gallery-card__date i {
    margin-left: 4px;
}

.gallery-card__actions {
    display: flex;
    gap: 6px;
    padding: 10px 14px 14px;
    margin-top: auto;
}

.gallery-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #aeb4c2;
    padding: 40px 10px;
}

.gallery-empty i {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
    opacity: .5;
}

/* Keep pill buttons as pills even inside panel_toolbox / card-header */
.panel_toolbox .pbtn,
.panel_toolbox>li>.pbtn,
.panel_toolbox>li>a.pbtn,
.card-header .pbtn,
.page-head__actions .pbtn {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 9px 16px !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 24px -12px rgba(115, 74, 164, .45) !important;
}

.panel_toolbox .pbtn span,
.card-header .pbtn span {
    display: inline !important;
}

/* Detail modal: brand avatar + polished header */
.modal-body .rounded-circle.bg-secondary {
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6)) !important;
    box-shadow: 0 14px 30px -14px rgba(115, 74, 164, .6) !important;
    border: 0 !important;
}

.modal-header .modal-title.text-primary {
    color: var(--app-primary, #744aa1) !important;
}

.modal-body .row>[class*="col-"] {
    line-height: 1.9;
}

.modal-body .row .fw-bold.text-muted {
    color: #8a92a6 !important;
    font-weight: 600 !important;
}

/* ============================================================
   Card forms (edit/create) -> clean 2-column grid, label above input
   ============================================================ */
.right_col .card-body>form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    align-items: start;
}

.right_col .card-body>form>.row.mb-3,
.right_col .card-body>form>.mb-3.row {
    display: block !important;
    margin: 0 0 16px !important;
}

.right_col .card-body>form>.mb-3.row>label.col-form-label,
.right_col .card-body>form>.row.mb-3>label.col-form-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    color: #4a5163 !important;
    text-align: right !important;
}

.right_col .card-body>form>.mb-3.row>[class*="col-md"],
.right_col .card-body>form>.row.mb-3>[class*="col-md"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

/* full-width rows span both columns */
.right_col .card-body>form>.text-center,
.right_col .card-body>form>.my-4,
.right_col .card-body>form>.mt-4,
.right_col .card-body>form>#countriesArea,
.right_col .card-body>form>#mallsShopsIntances {
    grid-column: 1 / -1 !important;
}

/* update/submit button -> brand gradient pill */
.right_col .card-body>form>.mt-4 .btn-primary,
.right_col .card-body>form .btn-primary[type="submit"],
.right_col .card-body>form button.btn-primary {
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 11px 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 14px 26px -12px rgba(115, 74, 164, .55) !important;
}

/* Fix: password sections must respect the JS toggle (don't force-show) */
.right_col .card-body>form>.password_section[style*="display:none"],
.right_col .card-body>form>.password_section[style*="display: none"] {
    display: none !important;
}

/* Change-password toggle -> clean bar */
.right_col .card-body>form>.my-4 {
    background: #fafbfd !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: right !important;
    margin: 4px 0 18px !important;
}

.right_col .card-body>form>.my-4 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--app-primary, #744aa1);
    cursor: pointer;
    margin: 0;
}

.right_col .card-body>form>.my-4 label {
    margin: 0 !important;
    font-weight: 600 !important;
    color: #4a5163 !important;
    cursor: pointer;
}

/* Create/edit (x_panel) form submit buttons -> gradient pill */
.right_col .x_content form>.form-group .btn.bg-btn-primary,
.right_col .x_content form .btn.bg-btn-primary,
.bg-btn-primary {
    background: linear-gradient(135deg, var(--app-primary, #744aa1), var(--app-secondary, #2db3d6)) !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 11px 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 14px 26px -12px rgba(115, 74, 164, .55) !important;
}

.right_col .x_content form>.form-group {
    margin-top: 8px;
}

/* Fix search/submit buttons in filter bars (text was clipping) */
.right_col form[method="get"] button[type="submit"],
.right_col form[method="GET"] button[type="submit"],
.right_col form[method="get"] .btn-primary,
.right_col form[method="GET"] .btn-primary,
.right_col form[method="get"] .btn-outline-danger,
.right_col form[method="GET"] .btn-outline-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
}

/* ============================================================
   x_panel POST forms with .field.item.form-group -> 2-col grid
   (scoped via :has so .row-based forms are untouched)
   ============================================================ */
.right_col .x_content>form:has(> .field.item.form-group) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    align-items: start;
}

.right_col .x_content>form>.field.item.form-group {
    display: block !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

.right_col .x_content>form>.field.item.form-group>label.col-form-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    color: #4a5163 !important;
    text-align: right !important;
}

.right_col .x_content>form>.field.item.form-group>[class*="col-md"],
.right_col .x_content>form>.field.item.form-group>[class*="col-sm"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

/* divider + submit span both columns */
.right_col .x_content>form>.ln-solid,
.right_col .x_content>form>.form-group:not(.field) {
    grid-column: 1 / -1 !important;
}

.right_col .x_content>form>.ln-solid {
    border: 0;
    border-top: 1px solid #eef0f5;
    margin: 8px 0 14px;
}

/* ============================================================
   Native selects look like selects (arrow) + select2 polish
   ============================================================ */
.right_col .x_content form select.form-control:not([multiple]):not(.select2-hidden-accessible),
.right_col .card-body select.form-control:not([multiple]):not(.select2-hidden-accessible),
.right_col .x_content form select.form-select:not(.select2-hidden-accessible) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a92a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 13px !important;
    padding-left: 38px !important;
    height: 48px !important;
    border: 1px solid #e3e7f0 !important;
    border-radius: 11px !important;
    background-color: #fff !important;
}

/* select2 multiple boxes */
.right_col .select2-container .select2-selection--multiple {
    min-height: 48px !important;
    border: 1px solid #e3e7f0 !important;
    border-radius: 11px !important;
    background: #fff !important;
    padding: 3px 6px !important;
}

.right_col .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: rgba(116, 74, 161, .1) !important;
    border: 0 !important;
    color: var(--app-primary, #744aa1) !important;
    border-radius: 8px !important;
    padding: 4px 9px !important;
    margin: 4px 4px 0 0 !important;
}

.right_col .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--app-primary, #744aa1) !important;
    margin-left: 6px;
}

/* category multi-selects span full width for a cleaner layout */
.right_col .x_content>form>.field.item.form-group:has(#main_customer_category_id),
.right_col .x_content>form>.field.item.form-group:has(#sub_customer_category_id) {
    grid-column: 1 / -1 !important;
}

/* Revert x_content field forms to clean single column (2-col grid broke complex forms) */
.right_col .x_content>form:has(> .field.item.form-group) {
    display: block !important;
    max-width: 720px;
}

.right_col .x_content>form>.field.item.form-group {
    margin: 0 0 16px !important;
}

/* Native Bootstrap-row forms: don't apply the field-grid hack */
.right_col .card-body>form.native-form {
    display: block !important;
    max-width: none !important;
}

.right_col .card-body>form.native-form .form-label {
    font-weight: 600 !important;
    font-size: .88rem !important;
    color: #4a5163 !important;
    margin-bottom: 6px !important;
}

/* Re-enable 2-col grid for .field.item forms (customers no longer uses them) */
.right_col .x_content>form:has(> .field.item.form-group) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 22px !important;
    align-items: start !important;
    max-width: none !important;
}

/* Change-password bar (company/edit etc.) */
.change-pass-bar {
    background: #fafbfd;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.change-pass-bar input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--app-primary, #744aa1);
    cursor: pointer;
    margin: 0;
}

.change-pass-bar label {
    font-weight: 600;
    color: #4a5163;
    cursor: pointer;
}

/* Password eye toggle inside native forms */
.right_col .native-form .position-relative .show-hide {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #b2b8c7;
}

.right_col .native-form .position-relative>input {
    padding-left: 40px !important;
}

/* Document + statement row-action icons */
.ibtn--doc {
    color: #e89a2c;
}

.ibtn--doc:hover {
    background: rgba(186, 117, 23, .12);
    border-color: #e89a2c;
}

.ibtn--stmt {
    color: #1d9e75;
}

.ibtn--stmt:hover {
    background: rgba(29, 158, 117, .12);
    border-color: #1d9e75;
}

/* Row action icons -> show their label (from title) beside the icon */
.row-actions .ibtn {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 7px 12px !important;
    gap: 7px;
    border-radius: 10px !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.row-actions .ibtn::after {
    content: attr(title);
}

/* Floating hover tip for index action buttons (see dashboard.js) */
.dash-hover-tip {
    position: fixed;
    z-index: 20000;
    top: 0;
    left: 0;
    max-width: min(280px, calc(100vw - 16px));
    padding: 6px 10px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
}

.dash-hover-tip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

html[dir="rtl"] .dash-hover-tip {
    font-family: inherit;
}

/* Fix: table buttons with text were forced to 34x34 icon size */
.right_col table.table td .btn-sm.btn-outline-primary,
.right_col table.table td .btn-sm.btn-outline-secondary,
.right_col table.table td .btn-sm.btn-outline-danger,
.right_col .x_panel table td .btn-sm,
.right_col .card table td .btn-sm {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
/* layout: header */
.card-footer,.progress{display:none}.breadcrumb{list-style:none;padding:0;margin:0}.breadcrumb li{display:inline;margin-right:5px}.breadcrumb li::after{content:'>';margin-left:5px;margin-right:5px}.breadcrumb li:last-child::after{content:''}.chat_container{min-height:80vh}.chat_container .row{height:100%}.chat_container .row>*{height:100%}.chat_container #chat-box{height:300px;overflow-y:auto}.message{display:flex;justify-content:end}#chat-box .message.sender{justify-content:start}.dropdown-scroll{max-height:200px !important;overflow-y:auto !important}
/* login / auth pages */
:root{--auth-primary:#0448a2;--auth-accent:#00b8f1;--auth-primary-dark:#033679;--auth-primary-soft:#e5f6fd;--auth-navy:#021c45;--auth-text:#1f2937;--auth-muted:#6b7280;--auth-border:#d9e0e6;--auth-bg:#f4f7f9;--auth-danger:#dc2626;--auth-radius:12px;--auth-font:'Tajawal','Cairo','Segoe UI',Tahoma,sans-serif}body.auth-page{margin:0;min-height:100vh;background:var(--auth-bg);font-family:var(--auth-font);color:var(--auth-text)}.auth-page *,.auth-page *::before,.auth-page *::after{box-sizing:border-box}.auth-shell{display:grid;grid-template-columns:minmax(420px,1fr) minmax(0,1.1fr);min-height:100vh}.auth-form-side{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff}.auth-card{width:100%;max-width:400px}.auth-logo{display:inline-flex;align-items:center;justify-content:center;width:150px;height:84px;margin-bottom:20px;overflow:hidden}.auth-logo img{max-width:100%;max-height:100%;object-fit:contain}.auth-logo-fallback{font-size:30px;color:var(--auth-primary)}.auth-title{margin:0 0 6px;font-size:26px;font-weight:700;line-height:1.35;color:var(--auth-navy)}.auth-title::after{content:'';display:block;width:48px;height:4px;margin-top:12px;border-radius:4px;background:linear-gradient(90deg,var(--auth-primary),var(--auth-accent))}.auth-subtitle{margin:14px 0 28px;font-size:15px;color:var(--auth-muted)}.auth-card .alert{margin-bottom:20px;padding:12px 14px;border-radius:10px;font-size:14px}.auth-field{margin-bottom:18px}.auth-field label{display:block;margin-bottom:7px;font-size:14px;font-weight:600;color:var(--auth-text)}.auth-input{position:relative}.auth-input input[type="email"],.auth-input input[type="password"],.auth-input input[type="text"]{width:100%;height:50px;padding:0 44px;border:1.5px solid var(--auth-border);border-radius:var(--auth-radius);background:#fff;font-family:inherit;font-size:15px;color:var(--auth-text);transition:border-color .15s,box-shadow .15s}.auth-input input::placeholder{color:#9aa5b1}.auth-input input:focus{outline:none;border-color:var(--auth-primary);box-shadow:0 0 0 4px rgba(4,72,162,.14)}.auth-input input[type="email"]{direction:ltr;text-align:right}.auth-icon{position:absolute;top:50%;inset-inline-start:15px;transform:translateY(-50%);font-size:16px;color:#9aa5b1;pointer-events:none}.auth-input input:focus ~ .auth-icon{color:var(--auth-primary)}.auth-toggle{position:absolute;top:50%;inset-inline-end:8px;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:#9aa5b1;cursor:pointer;transition:background .15s,color .15s}.auth-toggle:hover{background:var(--auth-primary-soft);color:var(--auth-primary)}.auth-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 24px;font-size:14px}.auth-remember{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--auth-muted);cursor:pointer;user-select:none}.auth-remember input{width:17px;height:17px;margin:0;accent-color:var(--auth-primary)}.auth-forgot{color:var(--auth-primary);font-weight:600;text-decoration:none}.auth-forgot:hover{color:var(--auth-primary-dark);text-decoration:underline}.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;border:0;border-radius:var(--auth-radius);background:linear-gradient(135deg,var(--auth-primary) 0%,#0a5fc4 100%);font-family:inherit;font-size:16px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 8px 20px rgba(4,72,162,.30);transition:transform .12s,box-shadow .15s,filter .15s}.auth-btn:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(4,72,162,.38)}.auth-btn:active{transform:translateY(1px)}.auth-btn:focus-visible{outline:3px solid rgba(0,184,241,.45);outline-offset:2px}.auth-btn.is-loading{pointer-events:none;opacity:.8}.auth-footer{margin-top:32px;text-align:center;font-size:13px;color:#9aa5b1}.auth-brand-side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;overflow:hidden;color:#fff;background:radial-gradient(circle at 18% 12%,rgba(0,184,241,.35),transparent 45%),radial-gradient(circle at 88% 92%,rgba(0,184,241,.22),transparent 50%),linear-gradient(160deg,#021c45 0%,#033679 50%,#0448a2 100%)}.auth-brand-side::before,.auth-brand-side::after{content:'';position:absolute;inset-inline:-10%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 18px,transparent 18px 36px);transform:rotate(-12deg)}.auth-brand-side::before{top:32%}.auth-brand-side::after{top:68%;opacity:.6}.auth-brand-content{position:relative;z-index:1;max-width:460px;text-align:center}.auth-brand-badge{display:inline-flex;align-items:center;justify-content:center;width:200px;height:200px;margin-bottom:28px;border-radius:32px;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.28),0 0 0 6px rgba(0,184,241,.25);color:var(--auth-primary);font-size:44px;overflow:hidden}.auth-brand-badge img{max-width:92%;max-height:92%;object-fit:contain}.auth-brand-name{margin:0 0 12px;font-size:34px;font-weight:700;line-height:1.3}.auth-brand-text{margin:0;font-size:16px;line-height:1.8;color:rgba(255,255,255,.8)}.auth-brand-dots{display:flex;justify-content:center;gap:8px;margin-top:32px}.auth-brand-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}.auth-brand-dots span:first-child{width:28px;border-radius:8px;background:var(--auth-accent)}@media (max-width:991.98px){.auth-shell{grid-template-columns:1fr}.auth-brand-side{display:none}.auth-form-side{min-height:100vh;padding:32px 20px;background:linear-gradient(180deg,var(--auth-primary-soft) 0,#fff 260px)}}@media (max-width:420px){.auth-title{font-size:22px}.auth-options{flex-direction:column;align-items:flex-start}}.auth-back-wrap{margin-top:22px;text-align:center}.auth-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--auth-muted);text-decoration:none;transition:color .15s}.auth-back:hover{color:var(--auth-primary)}.auth-hint-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;background:var(--auth-primary-soft);color:var(--auth-primary);font-size:20px}
/* admin top nav + side nav */
:root{--nav-primary:#0448a2;--nav-primary-2:#0a5fc4;--nav-primary-dark:#033679;--nav-accent:#00b8f1;--nav-soft:#e8f5fc;--nav-soft-2:#f3f8fd;--nav-text:#1f2937;--nav-muted:#6b7280;--nav-border:#e3e9f0;--nav-radius:12px}.top_nav .nav_menu{position:relative;min-height:64px;background:#fff !important;border-bottom:1px solid var(--nav-border) !important;box-shadow:0 6px 18px -14px rgba(2,28,69,.35)}.top_nav .nav_menu::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--nav-primary),var(--nav-accent))}#menu_toggle{width:42px;height:42px;border-radius:var(--nav-radius);background:var(--nav-soft-2);color:var(--nav-primary);font-size:18px;transition:background .15s,color .15s}#menu_toggle:hover{background:var(--nav-primary);color:#fff}.top_nav .nav.toggle img{height:36px;width:auto;max-width:150px;object-fit:contain}.top_nav .nav.toggle h4{color:var(--nav-primary);font-weight:700}.top_nav .user-profile,.top_nav .info-number{color:var(--nav-text) !important;border:1px solid transparent;border-radius:var(--nav-radius);padding:6px 10px !important;transition:background .15s,border-color .15s,color .15s}.top_nav .user-profile:hover,.top_nav .info-number:hover,.top_nav .dropdown.show > .user-profile,.top_nav .dropdown.show > .info-number{background:var(--nav-soft-2) !important;border-color:var(--nav-border);color:var(--nav-primary) !important}.top_nav .info-number .fa-bell-o{color:var(--nav-primary) !important}.top_nav .user-profile img{border:2px solid #fff;box-shadow:0 0 0 2px var(--nav-accent)}.lang-toggle > i{color:var(--nav-accent);font-size:15px}.top_nav .dropdown-menu,.dropdown-usermenu,.lang-menu,.acct-menu,.notif-menu{border:1px solid var(--nav-border) !important;border-radius:14px !important;box-shadow:0 24px 50px -22px rgba(2,28,69,.40) !important}.acct-head__avatar{border-color:var(--nav-accent)}.acct-head__name,.lang-menu__head,.notif-head__title{color:var(--nav-primary-dark)}.acct-item,.lang-item{color:var(--nav-text)}.acct-item:hover,.lang-item:hover{background:var(--nav-soft);color:var(--nav-primary)}.acct-item i,.lang-item i{color:var(--nav-accent)}.acct-item:hover i,.lang-item:hover i{color:var(--nav-primary)}.acct-item--danger i{color:#ef4444}.acct-item--danger:hover{background:rgba(220,38,38,.08);color:#dc2626}.notif-head__count{background:linear-gradient(135deg,var(--nav-primary),var(--nav-accent))}.left_col,.left_col .scroll-view{background:#fff !important}.nav-md .container.body .col-md-3.left_col,.nav-sm .container.body .col-md-3.left_col{border-left:1px solid var(--nav-border);box-shadow:-14px 0 34px -26px rgba(2,28,69,.45)}.left_col.scrollbar{scrollbar-width:thin;scrollbar-color:#c5d3e3 transparent}.left_col.scrollbar::-webkit-scrollbar{width:6px}.left_col.scrollbar::-webkit-scrollbar-thumb{background:#c5d3e3;border-radius:6px}#sidebar-menu{padding:12px 10px 40px !important}#sidebar-menu hr{display:none}#sidebar-menu .nav.side-menu > li > a{display:flex !important;align-items:center;gap:12px;min-height:46px;margin:0 0 4px !important;padding:6px 8px !important;border-radius:var(--nav-radius) !important;color:var(--nav-text);font-size:14px !important;font-weight:600 !important;transition:background .15s,color .15s}#sidebar-menu .nav.side-menu > li > a > i:first-child{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px !important;height:34px;border-radius:10px;background:var(--nav-soft);color:var(--nav-primary) !important;font-size:16px !important;transition:background .15s,color .15s}#sidebar-menu .nav.side-menu > li > a:hover{background:var(--nav-soft-2) !important;color:var(--nav-primary) !important}#sidebar-menu .nav.side-menu > li > a:hover > i:first-child{background:var(--nav-primary);color:#fff !important}#sidebar-menu .side-menu a span.fa{margin-inline-start:auto;margin-right:0;color:#a3b1c2 !important;font-size:11px}#sidebar-menu .nav.side-menu > li.active > a{background:var(--nav-soft) !important;color:var(--nav-primary) !important;text-shadow:none !important;box-shadow:none !important}#sidebar-menu .nav.side-menu > li.active > a > i:first-child{background:linear-gradient(135deg,var(--nav-primary),var(--nav-primary-2));color:#fff !important;box-shadow:0 6px 14px -6px rgba(4,72,162,.7)}#sidebar-menu .side-menu li.active > a span.fa{color:var(--nav-primary) !important}.nav.side-menu > li.active::before{top:8px;bottom:12px;width:4px;background:linear-gradient(var(--nav-primary),var(--nav-accent))}.side-menu .nav.child_menu.is-open{display:block}#sidebar-menu .nav.child_menu{position:relative;margin:2px 22px 8px 0;padding:4px 0}#sidebar-menu .nav.child_menu::before{content:'';position:absolute;top:6px;bottom:6px;right:0;width:2px;border-radius:2px;background:var(--nav-border)}#sidebar-menu .nav.child_menu li a,#sidebar-menu .nav.child_menu > li > a{display:flex;align-items:center;gap:10px;margin:0 14px 2px 0;padding:8px 12px !important;border-radius:10px;color:var(--nav-muted);font-size:13px !important;font-weight:500 !important;transition:background .15s,color .15s}#sidebar-menu .nav.child_menu li a::before{content:'';flex:0 0 auto;width:6px;height:6px;margin:0;border-radius:50%;background:#c5d3e3;transition:background .15s,box-shadow .15s}#sidebar-menu .nav.child_menu li a:hover{background:var(--nav-soft-2) !important;color:var(--nav-primary) !important}#sidebar-menu .nav.child_menu li a:hover::before{background:var(--nav-accent)}#sidebar-menu .nav.child_menu li.current-page > a{background:var(--nav-soft) !important;color:var(--nav-primary) !important;font-weight:700 !important}#sidebar-menu .nav.child_menu li.current-page > a::before{background:var(--nav-accent) !important;box-shadow:0 0 0 3px rgba(0,184,241,.25)}#sidebar-menu .nav.side-menu > li > a:focus{outline:2px solid rgba(0,184,241,.5);outline-offset:1px}.top_nav .nav_menu{align-items:center;flex-wrap:nowrap;min-height:64px;padding:0 14px !important}.top_nav .nav.toggle{flex-wrap:nowrap;gap:12px;min-width:0}.top_nav .nav.toggle a{display:inline-flex;align-items:center;padding:0;margin:0}.top_nav .nav.toggle a#menu_toggle i{font-size:18px}.top_nav .nav.toggle img{height:44px;max-width:170px}.top_nav .navbar-nav{flex-wrap:nowrap}.top_nav .navbar-right{float:none;margin:0;padding:0;gap:6px;flex-wrap:nowrap}.top_nav .navbar-right > li{margin:0 !important}.top_nav .info-number::after,.top_nav .lang-toggle::after{display:none}.top_nav .user-profile{gap:8px;white-space:nowrap}.top_nav .user-profile img{width:34px;height:34px;margin:0 !important;flex:0 0 auto}.top_nav .user-profile .user-name{max-width:160px;overflow:hidden;text-overflow:ellipsis}.top_nav .user-profile .user-icon{display:none;font-size:24px;color:var(--nav-primary)}@media (max-width:767.98px){.top_nav .nav_menu{min-height:58px;padding:0 10px !important}.top_nav .nav.toggle img{height:36px;max-width:110px}.top_nav .user-profile .user-icon{display:inline-block}.top_nav .lang-toggle span,.top_nav .user-profile .user-name,.top_nav .user-profile::after{display:none}.top_nav .user-profile,.top_nav .info-number{padding:6px !important}}
/* layout: breadcrumb */
.breadcrumb-glass-wrapper{background:transparent}.breadcrumb-glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,0.30);border-radius:14px;border:1px solid rgba(255,255,255,0.35);box-shadow:0 4px 14px rgba(0,0,0,0.06);display:flex;align-items:center;gap:8px}.breadcrumb-item-glass a{color:#222;font-weight:600;text-decoration:none;transition:0.2s}.breadcrumb-item-glass i{margin-right:4px;color:#007bff}.breadcrumb-item-glass a:hover{color:#007bff}.breadcrumb-sep{margin:0 4px;color:#555;opacity:0.6;font-size:14px}
/* layout: messages */
.dash-flash{display:flex;align-items:flex-start;gap:12px;border:0;border-radius:12px;padding:14px 44px 14px 16px;box-shadow:0 8px 24px rgba(15,23,42,.08);position:relative}.dash-flash--success{background:#ecfdf5;color:#065f46}.dash-flash--error{background:#fef2f2;color:#991b1b}.dash-flash--warning{background:#fffbeb;color:#92400e}.dash-flash__icon{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}.dash-flash--success .dash-flash__icon{background:#d1fae5;color:#047857}.dash-flash--error .dash-flash__icon{background:#fee2e2;color:#dc2626}.dash-flash--warning .dash-flash__icon{background:#fde68a;color:#b45309}.dash-flash__body{flex:1;min-width:0}.dash-flash__title{font-weight:800;font-size:.92rem;margin-bottom:2px}.dash-flash__text,.dash-flash__list{font-weight:600;font-size:.9rem;line-height:1.45}.dash-flash__list{padding-inline-start:1.1rem}.dash-flash .close{position:absolute;top:10px;inset-inline-end:12px;opacity:.55}html[dir="rtl"] .dash-flash,html[dir="rtl"] .dash-flash__text,html[dir="rtl"] .dash-flash__title{text-align:start}
/* layout: notifications-dropdown */
#items_notifications{position:relative}.top_nav .info-number{position:relative !important;overflow:visible !important}.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}.notif-bell .fa-bell-o{font-size:20px}.notif-bell__count,#notification_counter{position:absolute !important;top:-4px !important;inset-inline-end:-6px !important;left:auto !important;right:-6px !important;min-width:18px;height:18px;padding:0 5px !important;border-radius:999px;background:#dc2626 !important;color:#fff !important;font-size:11px !important;font-weight:700 !important;line-height:18px !important;text-align:center;display:inline-block !important;box-shadow:0 0 0 2px #fff;z-index:3}[dir="rtl"] .notif-bell__count,[dir="rtl"] #notification_counter{right:auto !important;left:-6px !important}.notif-bell__count[hidden]{display:none !important}#notificationsMenu{min-width:360px;max-width:440px;overflow-x:visible !important}.notif-head__actions{display:flex;align-items:center;gap:8px}.notif-dismiss-all{border:0;background:transparent;color:#dc2626;font-size:12px;font-weight:700;cursor:pointer;padding:2px 4px;white-space:nowrap}.notif-dismiss-all:hover{text-decoration:underline}.notif-item{position:relative;display:flex !important;flex-direction:column;align-items:stretch;padding-bottom:6px}.notif-item__link{flex:1;padding-bottom:6px !important}.notif-item__dismiss{position:static !important;align-self:flex-end;margin:0 10px 8px;border:1px solid #fecaca;background:#fef2f2;color:#dc2626 !important;cursor:pointer;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700;line-height:1.4}.notif-item__dismiss:hover{background:#dc2626;color:#fff !important}.notif-foot{text-align:center;padding:8px 12px;border-top:1px solid #eee}.notif-item.is-unread{background:#f0f7ff}
/* layout: paginate */
.cmp-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:16px 4px;font-family:var(--app-font)}.cmp-pagination .fa{font-family:'FontAwesome' !important}.cmp-pg-info{font-size:13px;color:#64748b}.cmp-pg-info strong{color:#1e293b;font-weight:800}.cmp-pg-list{list-style:none;display:flex;align-items:center;gap:6px;margin:0;padding:0;flex-wrap:wrap}.cmp-pg-item{margin:0}.cmp-pg-link{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1.5px solid #e7eaf0;border-radius:11px;background:#fff;color:#475569;font-size:14px;font-weight:700;text-decoration:none;transition:all .14s ease;cursor:pointer}a.cmp-pg-link:hover{border-color:#4f46e5;color:#4f46e5;transform:translateY(-1px)}.cmp-pg-item.is-active .cmp-pg-link{background:linear-gradient(135deg,#4f46e5,#4338ca);border-color:transparent;color:#fff;box-shadow:0 6px 14px -6px rgba(79,70,229,.7)}.cmp-pg-item.is-disabled .cmp-pg-link{opacity:.45;cursor:not-allowed;background:#f8fafc}.cmp-pg-item.is-gap .cmp-pg-link{border-color:transparent;background:transparent;cursor:default;color:#94a3b8}@media (max-width:575px){.cmp-pg-info{width:100%;text-align:center}.cmp-pagination{justify-content:center}}
/* ===== admin/profile ===== */
.profile-page{max-width:1100px;margin:0 auto;padding:6px 0 30px}
.profile-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start}
.profile-summary{background:#fff;border:1px solid #e3e9f0;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -22px rgba(2,28,69,.35);position:sticky;top:84px}
.profile-summary__cover{height:92px;background:radial-gradient(circle at 20% 20%,rgba(0,184,241,.45),transparent 55%),linear-gradient(135deg,#021c45,#0448a2)}
.profile-summary__body{padding:0 22px 24px;text-align:center}
.profile-summary__initial{width:84px;height:84px;margin:-42px auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#0448a2;font-size:34px;font-weight:700;border:4px solid #fff;box-shadow:0 0 0 3px #00b8f1,0 10px 24px -10px rgba(2,28,69,.5)}
.profile-summary__name{margin:0 0 8px;font-size:20px;font-weight:700;color:#021c45;word-break:break-word}
.profile-summary__role{display:inline-block;padding:4px 14px;border-radius:999px;background:#e8f5fc;color:#0448a2;font-size:13px;font-weight:600}
.profile-summary__list{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid #eef2f6;text-align:start}
.profile-summary__list li{display:flex;align-items:center;gap:10px;padding:7px 0;color:#4b5563;font-size:14px}
.profile-summary__list li i{width:30px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:#f3f8fd;color:#0448a2}
.profile-summary__list li span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.profile-main{display:flex;flex-direction:column;gap:20px}
.profile-panel{background:#fff;border:1px solid #e3e9f0;border-radius:16px;box-shadow:0 10px 30px -24px rgba(2,28,69,.3)}
.profile-panel__head{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid #eef2f6}
.profile-panel__icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:#e8f5fc;color:#0448a2;font-size:16px}
.profile-panel__title{margin:0;font-size:16px;font-weight:700;color:#021c45}
.profile-panel__body{padding:22px}
.profile-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.profile-fields .profile-field:first-child:nth-last-child(odd){grid-column:auto}
.profile-field label{display:block;margin-bottom:7px;font-size:14px;font-weight:600;color:#1f2937}
.profile-required{color:#dc2626}
.profile-input-wrap{position:relative}
.profile-input{width:100%;height:46px;padding:0 14px;border:1.5px solid #d9e0e6;border-radius:12px;background:#fff;font-family:inherit;font-size:15px;color:#1f2937;transition:border-color .15s,box-shadow .15s}
.profile-input--ltr{direction:ltr;text-align:right}
.profile-input:focus{outline:0;border-color:#0448a2;box-shadow:0 0 0 4px rgba(4,72,162,.14)}
.profile-input:disabled{background:#f3f6f9;color:#9aa5b1;cursor:not-allowed}
.profile-input-wrap .profile-input{padding-inline-end:46px}
.profile-eye{position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#9aa5b1;cursor:pointer}
.profile-eye:hover{background:#e8f5fc;color:#0448a2}
#profilePasswordFields.is-disabled .profile-eye{pointer-events:none;opacity:.5}
.profile-switch{display:inline-flex;align-items:center;gap:10px;margin:0 auto 0 0;cursor:pointer;user-select:none;font-size:14px;font-weight:600;color:#4b5563}
.profile-switch input{position:absolute;opacity:0;pointer-events:none}
.profile-switch__track{position:relative;width:42px;height:24px;border-radius:999px;background:#cbd5e1;transition:background .2s}
.profile-switch__track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:inset-inline-start .2s}
.profile-switch input:checked+.profile-switch__track{background:#0448a2}
.profile-switch input:checked+.profile-switch__track::after{inset-inline-start:21px}
.profile-switch input:focus-visible+.profile-switch__track{box-shadow:0 0 0 4px rgba(0,184,241,.35)}
.profile-actions{display:flex;justify-content:flex-start}
.profile-save{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:170px;height:48px;padding:0 26px;border:0;border-radius:12px;background:linear-gradient(135deg,#0448a2,#0a5fc4);color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(4,72,162,.28);transition:filter .15s,transform .12s}
.profile-save:hover{filter:brightness(1.07)}
.profile-save:active{transform:translateY(1px)}
@media (max-width:991.98px){.profile-layout{grid-template-columns:1fr}.profile-summary{position:static}}
@media (max-width:575.98px){.profile-fields{grid-template-columns:1fr}.profile-panel__head{flex-wrap:wrap}.profile-switch{margin:0}.profile-save{width:100%}}
.profile-summary__body{display:flex;flex-direction:column;align-items:center}
.profile-summary__name{width:100%;text-align:center}
.profile-summary__list{width:100%}
/* ===== admin dashboard ===== */
.dsh-page{max-width:1400px;margin:0 auto;padding:6px 0 30px}
.dsh-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 38px;margin-bottom:24px;border-radius:20px;color:#fff;overflow:hidden;background:radial-gradient(circle at 12% 15%,rgba(0,184,241,.38),transparent 46%),radial-gradient(circle at 90% 95%,rgba(0,184,241,.22),transparent 50%),linear-gradient(150deg,#021c45 0%,#033679 50%,#0448a2 100%);box-shadow:0 22px 44px -28px rgba(2,28,69,.7)}
.dsh-hero::before,.dsh-hero::after{content:"";position:absolute;inset-inline:-10%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 16px,transparent 16px 32px);transform:rotate(-8deg)}
.dsh-hero::before{top:30%}
.dsh-hero::after{top:78%;opacity:.55}
.dsh-hero__text{position:relative;z-index:1;min-width:0;flex:1 1 auto}
.dsh-hero__date{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;margin-bottom:14px;border-radius:999px;background:rgba(255,255,255,.14);font-size:13px;font-weight:600;color:#dff4ff}
.dsh-hero__title{margin:0 0 4px;font-size:30px;font-weight:700;line-height:1.35;color:#fff}
.dsh-hero__sub{margin:0 0 22px;font-size:15px;color:rgba(255,255,255,.75)}
.dsh-hero__logo{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:190px;height:120px;padding:14px;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 0 6px rgba(0,184,241,.25)}
.dsh-hero__logo img{max-width:100%;max-height:100%;object-fit:contain}
.dsh-search{position:relative;max-width:420px}
.dsh-search i{position:absolute;top:50%;inset-inline-start:16px;transform:translateY(-50%);color:#8aa3bd;pointer-events:none}
.dsh-search input{width:100%;height:48px;padding:0 46px;border:0;border-radius:14px;background:#fff;font-family:inherit;font-size:15px;color:#1f2937;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.dsh-search input:focus{outline:0;box-shadow:0 0 0 4px rgba(0,184,241,.45)}
.dsh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;align-items:start}
.dsh-card{background:#fff;border:1px solid #e3e9f0;border-radius:16px;box-shadow:0 10px 30px -24px rgba(2,28,69,.35);transition:box-shadow .2s,transform .2s,border-color .2s;overflow:hidden}
.dsh-card:hover{border-color:#b9dcf2;box-shadow:0 18px 38px -24px rgba(4,72,162,.45);transform:translateY(-2px)}
.dsh-card[hidden],.dsh-links li[hidden]{display:none}
.dsh-card__head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #eef2f6;background:linear-gradient(180deg,#f6fbfe,#fff)}
.dsh-card__icon{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#0448a2,#0a5fc4);color:#fff;font-size:18px;box-shadow:0 8px 16px -8px rgba(4,72,162,.7)}
.dsh-card__title{flex:1 1 auto;min-width:0;margin:0;font-size:16px;font-weight:700;color:#021c45}
.dsh-card__count{flex:0 0 auto;min-width:26px;height:26px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#e8f5fc;color:#0448a2;font-size:12px;font-weight:700}
.dsh-links{list-style:none;margin:0;padding:8px}
.dsh-links a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:#4b5563;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}
.dsh-links__dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#c5d3e3;transition:background .15s}
.dsh-links__text{flex:1 1 auto;min-width:0}
.dsh-links__arrow{color:#b6c4d4;transition:transform .15s,color .15s}
.dsh-links a:hover{background:#eef7fd;color:#0448a2}
.dsh-links a:hover .dsh-links__dot{background:#00b8f1}
.dsh-links a:hover .dsh-links__arrow{color:#0448a2;transform:translateX(-3px)}
.dsh-empty{margin:40px 0;text-align:center;color:#6b7280;font-size:15px}
@media (max-width:767.98px){.dsh-hero{flex-direction:column-reverse;align-items:flex-start;padding:24px 20px}.dsh-hero__logo{width:150px;height:90px}.dsh-hero__title{font-size:23px}.dsh-search{max-width:none}.dsh-grid{grid-template-columns:1fr}}
.dsh-grid{display:block;column-width:290px;column-gap:18px}
.dsh-card{display:inline-block;width:100%;margin-bottom:18px;break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:767.98px){.dsh-grid{column-width:auto;columns:1}}
/* ===== list pages v2 (opt-in with .lp-v2) — used by admin/customers ===== */
.lp-v2 .page-head{margin:4px 2px 20px}
.lp-v2 .page-head__title{gap:14px}
.lp-v2 .page-head__icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#0448a2,#0a5fc4);box-shadow:0 10px 20px -10px rgba(4,72,162,.7)}
.lp-v2 .page-head__title h4{font-size:1.3rem;color:#021c45}
.lp-v2 .lp-count{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:28px;padding:0 10px;border-radius:999px;background:#e8f5fc;color:#0448a2;font-size:13px;font-weight:700}
.lp-v2 .page-head__actions .pbtn span{display:inline!important}
.lp-v2 .page-head__actions .pbtn{padding:10px 18px!important;border-radius:12px!important}
.lp-v2 .pbtn--green{color:#fff;background:linear-gradient(135deg,#0448a2,#0a5fc4);box-shadow:0 10px 22px -10px rgba(4,72,162,.65)}
.lp-v2 .pbtn--green:hover{color:#fff;background:linear-gradient(135deg,#033679,#0448a2)}
.lp-v2 .pbtn--blue,.lp-v2 .pbtn--amber{background:#fff;box-shadow:none;border:1px solid #b9dcf2;color:#0448a2}
.lp-v2 .pbtn--blue:hover,.lp-v2 .pbtn--amber:hover{background:#e8f5fc;color:#0448a2;border-color:#00b8f1}
.lp-v2 .pbtn--amber{border-color:#e3e9f0;color:#4b5563}
.lp-v2 .page-card{border:1px solid #e3e9f0;border-radius:18px;padding:18px 20px;box-shadow:0 14px 34px -26px rgba(2,28,69,.35)}
.lp-v2 .adm-filters{padding:16px;border:1px solid #e3e9f0;border-radius:14px;background:#f8fbfe}
.lp-v2 .adm-label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#33506e}
.right_col.lp-v2 form.adm-filters .form-control,.right_col.lp-v2 form.adm-filters .form-select{height:44px!important;border:1.5px solid #d9e0e6!important;border-radius:12px!important;background-color:#fff!important;font-size:14px!important;font-weight:500;color:#1f2937}
.right_col.lp-v2 form.adm-filters .form-control:focus,.right_col.lp-v2 form.adm-filters .form-select:focus{border-color:#0448a2!important;box-shadow:0 0 0 4px rgba(4,72,162,.14)!important}
.right_col.lp-v2 form.adm-filters button[type=submit]{height:44px!important;border-radius:12px!important;background:linear-gradient(135deg,#0448a2,#0a5fc4)!important;color:#fff!important}
.right_col.lp-v2 form.adm-filters .btn-outline-secondary{height:44px;display:inline-flex;align-items:center;justify-content:center;border-color:#d9e0e6;color:#4b5563}
.lp-v2 .lp-col-id{width:60px}
.lp-v2 .lp-col-actions{width:200px}
.lp-v2 .clean-table thead th{background:#eef6fc!important;color:#33506e!important;font-size:.78rem;letter-spacing:.2px;padding:13px 16px}
.lp-v2 .clean-table tbody td{padding:14px 16px;border-bottom:1px solid #eef2f6!important}
.lp-v2 .clean-table tbody tr:hover td{background:#f5faff}
.lp-v2 .lp-cust{display:flex;align-items:center;gap:12px}
.lp-v2 .lp-cust__avatar{flex:0 0 auto;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#e8f5fc,#cfeefb);color:#0448a2;font-size:17px;font-weight:700}
.lp-v2 .lp-cust__info{min-width:0}
.lp-v2 .lp-cust__name{font-weight:700;color:#021c45}
.lp-v2 .lp-cust__sub{margin-top:2px;font-size:12px;color:#8a97a8}
.lp-v2 .lp-phone{display:inline-flex;align-items:center;gap:6px;margin:2px 0;padding:3px 10px;border-radius:8px;background:#f3f8fd;color:#33506e;font-size:13px}
.lp-v2 .lp-phone i{color:#00b8f1;font-size:12px}
.lp-v2 .lp-phone+.lp-phone{margin-inline-start:0}
.lp-v2 .adm-status-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.lp-v2 .adm-status{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.28rem .75rem;font-size:.78rem;font-weight:700}
.lp-v2 .adm-status__dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.lp-v2 .adm-status--on{background:#d1fae5;color:#065f46}
.lp-v2 .adm-status--on .adm-status__dot{background:#10b981}
.lp-v2 .adm-status--off{background:#fee2e2;color:#991b1b}
.lp-v2 .adm-status--off .adm-status__dot{background:#ef4444}
.lp-v2 .adm-status-btn{display:inline-flex;align-items:center;gap:.35rem;border:1px solid transparent;border-radius:10px;padding:.3rem .7rem;font-size:.76rem;font-weight:700;cursor:pointer;transition:.15s ease}
.lp-v2 .adm-status-btn--on{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.lp-v2 .adm-status-btn--on:hover{background:#d1fae5}
.lp-v2 .adm-status-btn--off{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.lp-v2 .adm-status-btn--off:hover{background:#fee2e2}
.lp-v2 .ibtn{width:36px;height:36px;border-radius:10px;border:1px solid #e3e9f0;margin-inline-start:4px}
.lp-v2 .ibtn--edit{color:#0448a2}
.lp-v2 .ibtn--edit:hover{background:#0448a2;border-color:#0448a2;color:#fff}
.lp-v2 .lp-empty{padding:44px 0;text-align:center;color:#8a97a8}
.lp-v2 .lp-empty i{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:12px;border-radius:18px;background:#e8f5fc;color:#0448a2;font-size:26px}
.lp-v2 .lp-empty p{margin:0;font-size:15px}
.lp-v2 .pagination .page-link{border-radius:9px;margin:0 2px;color:#0448a2;border-color:#e3e9f0}
.lp-v2 .pagination .active>.page-link,.lp-v2 .pagination .page-link.active{background:#0448a2!important;border-color:#0448a2!important;color:#fff!important}
@media (max-width:767.98px){.lp-v2 .page-head__actions .pbtn{padding:10px 12px!important}.lp-v2 .lp-count{order:2}}
.lp-v2 .lp-phone{display:flex;width:fit-content}
.lp-v2 .adm-filters .btn,.lp-v2 .adm-filters button{margin:0!important}
.lp-v2 .page-head__actions .pbtn{margin:0!important}
.lp-v2 .page-head__actions .pbtn--blue,.lp-v2 .page-head__actions .pbtn--amber{box-shadow:none!important}
.lp-v2 .page-head__actions .pbtn--green{box-shadow:0 10px 22px -10px rgba(4,72,162,.65)!important}
/* ===== admin/customers/{id} (customer profile) ===== */
.cv-page{max-width:none}
.cv-hero{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:22px 24px;margin-bottom:18px;border-radius:18px;color:#fff;background:radial-gradient(circle at 10% 15%,rgba(0,184,241,.38),transparent 48%),linear-gradient(150deg,#021c45 0%,#033679 50%,#0448a2 100%);box-shadow:0 20px 40px -28px rgba(2,28,69,.7)}
.cv-hero__id{display:flex;align-items:center;gap:16px;min-width:0}
.cv-hero__avatar{flex:0 0 auto;width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;border-radius:18px;background:#fff;color:#0448a2;font-size:28px;font-weight:700;box-shadow:0 0 0 4px rgba(0,184,241,.35)}
.cv-hero__text{min-width:0}
.cv-hero__name{margin:0 0 8px;font-size:24px;font-weight:700;line-height:1.3;color:#fff;word-break:break-word}
.cv-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cv-hero__reg{display:inline-flex;align-items:center;gap:6px;padding:.28rem .75rem;border-radius:999px;background:rgba(255,255,255,.14);font-size:.8rem;font-weight:600;color:#dff4ff}
.cv-hero__actions{display:flex;flex-wrap:wrap;gap:8px}
.cv-page .cv-hero__actions .pbtn{margin:0!important;padding:9px 15px!important;font-size:.84rem}
.cv-page .cv-hero__actions .pbtn--green{background:#fff;color:#0448a2;box-shadow:0 8px 18px -10px rgba(0,0,0,.5)!important}
.cv-page .cv-hero__actions .pbtn--green:hover{background:#e8f5fc;color:#033679}
.cv-page .cv-hero__actions .pbtn--blue,.cv-page .cv-hero__actions .pbtn--amber{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:none!important}
.cv-page .cv-hero__actions .pbtn--blue:hover,.cv-page .cv-hero__actions .pbtn--amber:hover{background:rgba(255,255,255,.24);color:#fff;border-color:#fff}
.cv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.cv-stat{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid #e3e9f0;border-radius:16px;box-shadow:0 10px 26px -22px rgba(2,28,69,.4);color:inherit;text-decoration:none}
.cv-stat__icon{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;background:#e8f5fc;color:#0448a2;font-size:19px}
.cv-stat__body{display:flex;flex-direction:column;min-width:0}
.cv-stat__label{font-size:12.5px;font-weight:600;color:#6b7c93}
.cv-stat__value{font-size:22px;font-weight:700;color:#021c45;line-height:1.3}
.cv-stat__value--sm{font-size:18px;color:#0448a2}
.cv-stat--warn{border-color:#f5d9a8;background:linear-gradient(180deg,#fffaf0,#fff)}
.cv-stat--warn .cv-stat__icon{background:#fdecc8;color:#b45309}
.cv-stat--warn .cv-stat__value{color:#92400e}
.cv-stat--ok .cv-stat__icon{background:#d1fae5;color:#047857}
.cv-stat--ok .cv-stat__value{color:#065f46}
.cv-stat--link:hover{border-color:#00b8f1;box-shadow:0 14px 28px -20px rgba(4,72,162,.5)}
.cv-panel{background:#fff;border:1px solid #e3e9f0;border-radius:18px;box-shadow:0 14px 34px -26px rgba(2,28,69,.35);overflow:hidden}
.cv-tabs{display:flex;gap:6px;margin:0;padding:10px 14px 0;list-style:none;overflow-x:auto;border-bottom:1px solid #e3e9f0;background:#f8fbfe}
.cv-tabs a{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px 12px 0 0;color:#5a6b80;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s,background .15s}
.cv-tabs a i{color:#a3b1c2}
.cv-tabs a:hover{color:#0448a2;background:#eef6fc}
.cv-tabs a.is-active{color:#0448a2;background:#fff;border-bottom-color:#00b8f1}
.cv-tabs a.is-active i{color:#00b8f1}
.cv-panel__body{padding:22px}
.cv-section-title{margin:0;font-size:17px;font-weight:700;color:#021c45}
.cv-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.cv-info__item{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid #e9eef4;border-radius:14px;background:#fbfdff}
.cv-info__item--wide{grid-column:1/-1}
.cv-info__label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#6b7c93}
.cv-info__label i{color:#00b8f1;width:16px;text-align:center}
.cv-info__value{font-size:15px;font-weight:600;color:#021c45;word-break:break-word}
.cv-info__url{display:block;margin-top:8px;font-size:12px;font-weight:400;color:#8a97a8;word-break:break-all}
.cv-info__map{margin:0!important}
.cv-muted{color:#a3b1c2}
.cv-pill{display:inline-flex;align-items:center;padding:.28rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700}
.cv-pill--ok{background:#d1fae5;color:#065f46}
.cv-pill--off{background:#fee2e2;color:#991b1b}
.cv-pill--muted{background:#eef2f6;color:#5a6b80}
.cv-page .panel-body .btn-success,.cv-panel .btn-success{background:linear-gradient(135deg,#0448a2,#0a5fc4);border:0;color:#fff}
.cv-panel .btn-outline-success{border-color:#b9dcf2;color:#0448a2}
.cv-panel .btn-outline-success:hover{background:#0448a2;border-color:#0448a2;color:#fff}
.cv-panel .pbtn{margin:0!important}
@media (max-width:767.98px){.cv-hero{padding:18px}.cv-hero__name{font-size:20px}.cv-panel__body{padding:14px}.cv-info{grid-template-columns:1fr}}

/* ===== typography: one font (Tajawal) for the whole admin ===== */
:root{--app-font:'Tajawal','Cairo','Segoe UI',Tahoma,Arial,sans-serif}
body,button,input,select,textarea,optgroup,
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.btn,.form-control,.form-select,.form-label,.table,.nav-link,.badge,.alert,.card,.modal,.modal-title,
.dropdown-menu,.dropdown-item,.breadcrumb,.pagination,.page-link,
.select2-container,.select2-dropdown,.select2-search__field,.select2-results__option,
.dataTables_wrapper,.dataTables_filter input,.dataTables_length select,
.daterangepicker,.datepicker,.toast,#toast-container,.note-editor{font-family:var(--app-font)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* ===== customer create / edit form ===== */
.cf-form{display:flex;flex-direction:column;gap:18px}
.cf-section{background:#fff;border:1px solid #e3e9f0;border-radius:16px;box-shadow:0 10px 30px -24px rgba(2,28,69,.3)}
.cf-section__head{display:flex;align-items:center;gap:12px;padding:15px 22px;border-bottom:1px solid #eef2f6;background:linear-gradient(180deg,#f6fbfe,#fff);border-radius:16px 16px 0 0}
.cf-section__icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,#0448a2,#0a5fc4);color:#fff;font-size:15px}
.cf-section__head h3{margin:0;font-size:16px;font-weight:700;color:#021c45}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;padding:22px}
.cf-field{min-width:0}
.cf-field--wide{grid-column:1/-1}
.cf-field>label:not(.profile-switch){display:block;margin-bottom:7px;font-size:14px;font-weight:600;color:#1f2937}
.cf-req{color:#dc2626}
.cf-form .cf-input.form-control,.cf-form .cf-input.form-select{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid #d9e0e6;border-radius:12px;background-color:#fff;font-size:15px;font-weight:500;color:#1f2937;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.cf-form textarea.cf-input.form-control{min-height:96px;resize:vertical}
.cf-form .cf-input--ltr{direction:ltr;text-align:right}
.cf-form .cf-input.form-control:focus,.cf-form .cf-input.form-select:focus{border-color:#0448a2;border-width:1.5px;box-shadow:0 0 0 4px rgba(4,72,162,.14)!important;outline:0}
.cf-form .cf-input.is-invalid{border-color:#dc2626;background-image:none}
.cf-hint{display:block;margin-top:6px;font-size:12.5px;color:#8a97a8}
.cf-error{margin-top:6px;font-size:13px;font-weight:600;color:#dc2626}
.cf-password{margin-top:12px}
.cf-field--wide>.profile-switch{margin:0}
.cf-special{padding:16px 18px;border:1px dashed #b9dcf2;border-radius:14px;background:#f6fbfe}
.cf-special .js-special-request-settings{display:block;margin:0!important}
.cf-special .js-special-request-settings>[class*=col-]{width:100%;max-width:100%;flex:0 0 100%;padding:0}
.cf-special .js-special-request-settings>label{display:block;margin-bottom:10px;padding:0;font-size:14px;font-weight:600;color:#1f2937}
.cf-special .form-switch .form-check-input{width:2.6em;height:1.4em;cursor:pointer}
.cf-special .form-check-input:checked{background-color:#0448a2;border-color:#0448a2}
.cf-special .btn-outline-secondary{border-radius:10px;border-color:#b9dcf2;color:#0448a2}
.cf-special .btn-outline-secondary:hover{background:#0448a2;border-color:#0448a2;color:#fff}
.cf-actions{display:flex;align-items:center;gap:12px;padding:4px 0 10px}
.cf-save{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:170px;height:48px;padding:0 26px;border:0;border-radius:12px;background:linear-gradient(135deg,#0448a2,#0a5fc4);color:#fff;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(4,72,162,.28);margin:0!important}
.cf-save:hover{filter:brightness(1.07)}
.cf-cancel{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border:1px solid #d9e0e6;border-radius:12px;background:#fff;color:#4b5563;font-size:15px;font-weight:600;text-decoration:none}
.cf-cancel:hover{border-color:#0448a2;color:#0448a2}
@media (max-width:767.98px){.cf-grid{grid-template-columns:1fr;padding:16px}.cf-actions{flex-direction:column;align-items:stretch}.cf-save,.cf-cancel{width:100%}}
.cf-special .form-switch{padding-right:3.4em;padding-left:0;min-height:1.6em}
.cf-special .form-switch .form-check-input{margin-right:-3.4em;margin-left:0;float:right}
.cf-special .form-switch .form-check-label{font-weight:600;color:#021c45}
/* ===== voucher forms extras ===== */
.cf-locked{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid #cfeefb;border-radius:12px;background:#f3faff}
.cf-locked__icon{margin-inline-start:auto;color:#8aa3bd}
.cf-form .select2-container{width:100%!important}
.cf-form .select2-container--default .select2-selection--single{height:46px;border:1.5px solid #d9e0e6;border-radius:12px;background:#fff;display:flex;align-items:center}
.cf-form .select2-container--default .select2-selection--single .select2-selection__rendered{flex:1 1 auto;line-height:1.4;padding:0 14px;font-size:15px;font-weight:500;color:#1f2937}
.cf-form .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;top:0}
.cf-form .select2-container--default.select2-container--focus .select2-selection--single,.cf-form .select2-container--default.select2-container--open .select2-selection--single{border-color:#0448a2;box-shadow:0 0 0 4px rgba(4,72,162,.14)}
.cf-form .cf-input[type=date]{direction:ltr;text-align:right}
/* ===== special car request form ===== */
.cf-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cf-duo .cf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cf-locked__meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-inline-start:16px}
.cf-locked__price{font-size:13px;color:#5a6b80}
.cf-locked__meta+.cf-locked__icon{margin-inline-start:auto}
.cf-locations{padding:22px}
.cf-loc-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cf-loc-row .cf-input{flex:1 1 auto;min-width:0}
.cf-loc-btn{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid #d9e0e6;border-radius:12px;background:#fff;font-size:16px;cursor:pointer;text-decoration:none;margin:0!important;transition:background .15s,color .15s,border-color .15s}
.cf-loc-btn--map{color:#0448a2}
.cf-loc-btn--map:hover{background:#0448a2;border-color:#0448a2;color:#fff}
.cf-loc-btn--del{color:#dc2626}
.cf-loc-btn--del:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.cf-add{margin:4px 0 0!important}
.cf-locations .cf-hint{margin-top:10px}
@media (max-width:991.98px){.cf-duo{grid-template-columns:1fr}}
@media (max-width:575.98px){.cf-duo .cf-grid{grid-template-columns:1fr}.cf-locations{padding:16px}.cf-locked{flex-wrap:wrap}.cf-locked__meta{margin-inline-start:0;width:100%}}

/* ===== client-cars calendar (cc-*) ===== */
.cc-page .page-head{flex-wrap:wrap;gap:12px}
.cc-page .page-head small{display:block;color:#64748b;font-size:13px;margin-top:2px}
.cc-range{display:flex;flex-wrap:wrap;gap:8px}
.cc-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#eaf6fd;color:#0448a2;font-size:13px;border:1px solid #cdeafb}
.cc-chip i{color:#00b8f1}
.cc-calendar{--fc-border-color:#e2e8f0;--fc-button-bg-color:#0448a2;--fc-button-border-color:#0448a2;--fc-button-hover-bg-color:#033a85;--fc-button-hover-border-color:#033a85;--fc-button-active-bg-color:#00b8f1;--fc-button-active-border-color:#00b8f1;--fc-today-bg-color:rgba(0,184,241,.10);--fc-page-bg-color:#fff;font-family:var(--app-font,'Tajawal',sans-serif)}
.cc-calendar .fc-toolbar-title{font-size:20px;font-weight:800;color:#0f2a55}
.cc-calendar .fc-button{border-radius:8px;font-weight:600;box-shadow:none!important}
.cc-calendar .fc-col-header-cell{background:#f1f7fd}
.cc-calendar .fc-col-header-cell-cushion{color:#0448a2;font-weight:700;padding:10px 4px}
.cc-calendar .fc-daygrid-day-number{color:#334155;font-weight:600}
.cc-calendar .fc-day-today .fc-daygrid-day-number{background:#00b8f1;color:#fff;border-radius:50%;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;margin:4px}
.cc-calendar .cc-in-range{cursor:pointer;transition:background .15s}
.cc-calendar .cc-in-range:hover{background:#eaf6fd}
.cc-calendar .cc-out{background:#f8fafc}
.cc-calendar .cc-out .fc-daygrid-day-number{color:#b6c0cc}
.cc-trip-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 4px 4px;padding:4px 8px;border-radius:12px;background:linear-gradient(135deg,#0448a2,#00b8f1);color:#fff;font-size:12px;font-weight:700}
@media (max-width:575.98px){.cc-calendar .fc-toolbar{flex-direction:column;gap:8px}.cc-trip-badge{font-size:11px;padding:3px 4px}.cc-trip-badge i{display:none}}