/* ================================================================
   MICROTECH CLOUD — Dashboard Theme
   "Keeping You Connected"
   Nairobi, Kenya · ISP · Cloud · Fiber · Security
   ================================================================
   Drop-in replacement: all original class names preserved.
   Primary: #ed1c24 | Dark: #c8141b | Soft: rgba(237,28,36,.12)
   ================================================================ */

:root {
    --primary:      #ed1c24;
    --primary-dark: #c8141b;
    --primary-deep: #8f0f13;
    --primary-soft: rgba(237,28,36,.10);
    --primary-glow: rgba(237,28,36,.22);
    --primary-grad: linear-gradient(135deg, #c8141b 0%, #ed1c24 100%);

    --bg:         #f0f2f6;
    --surface:    #ffffff;
    --surface-2:  #f7f8fc;
    --surface-3:  #eef0f5;
    --border:     #e2e6ef;
    --border-2:   #d0d5e4;

    --text-1: #1a1f36;
    --text-2: #515778;
    --text-3: #8b93b5;

    --success:    #0fa87e;
    --success-bg: #e4f9f4;
    --danger:     #e8445a;
    --danger-bg:  #fde9ec;
    --warning:    #f59e0b;
    --warning-bg: #fef3d8;
    --info:       #7352f2;
    --info-bg:    #ece8ff;

    --shadow-xs: 0 1px 3px rgba(26,31,54,.05);
    --shadow-sm: 0 2px 10px rgba(26,31,54,.07), 0 1px 2px rgba(26,31,54,.04);
    --shadow-md: 0 6px 24px rgba(26,31,54,.09), 0 2px 6px rgba(26,31,54,.05);
    --shadow-lg: 0 12px 40px rgba(26,31,54,.12), 0 4px 10px rgba(26,31,54,.06);
    --shadow-red: 0 6px 22px rgba(237,28,36,.30);

    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-xl:   18px;
    --r-2xl:  24px;
    --r-full: 999px;

    --ff: 'Poppins', sans-serif;
    --ease: cubic-bezier(.4,0,.2,1);
    --dur:  0.2s;
}

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

body, html { font-size: 14px; width: 100%; min-height: 100vh; }
html { overflow-x: hidden; }

body {
    font-family: var(--ff);
    background: var(--bg);
    font-weight: 400;
    color: var(--text-2);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--primary-dark); }
a:active, a:focus { outline: 0 !important; text-decoration: none !important; }
p { line-height: 1.65; margin-bottom: .75rem; }
small { font-size: 80%; font-weight: 400; }
menu { padding-left: 0; }
a, body, span, text { font-family: var(--ff); }
.bold, b, strong { font-weight: 600; }
dt { font-weight: 500; }
h1,h2,h3,h4,h5,h6 { font-family: var(--ff); color: var(--text-1); line-height: 1.3; }

.divider { display:block; width:100%; height:1px; background:var(--border); margin:28px 0; }
.no-s{margin:0!important;padding:0!important}.no-m{margin:0}.no-p{padding:0}.m{margin:15px}
.m-t-xxs{margin-top:5px}.m-r-xxs{margin-right:5px}.m-b-xxs{margin-bottom:5px}.m-l-xxs{margin-left:5px}
.m-t-xs{margin-top:10px}.m-r-xs{margin-right:10px}.m-b-xs{margin-bottom:10px}.m-l-xs{margin-left:10px}
.m-t-sm{margin-top:15px}.m-r-sm{margin-right:15px}.m-b-sm{margin-bottom:15px}.m-l-sm{margin-left:15px}
.m-t-md{margin-top:20px}.m-r-md{margin-right:20px}.m-b-md{margin-bottom:20px}.m-l-md{margin-left:20px}
.m-t-lg{margin-top:25px}.m-r-lg{margin-right:25px}.m-b-lg{margin-bottom:25px}.m-l-lg{margin-left:25px}
.m-t-xxl{margin-top:30px}.m-r-xxl{margin-right:30px}.m-b-xxl{margin-bottom:30px}.m-l-xxl{margin-left:30px}
.m-t-n-xxs{margin-top:-5px}.m-r-n-xxs{margin-right:-5px}.m-b-n-xxs{margin-bottom:-5px}.m-l-n-xxs{margin-left:-5px}
.m-t-n-xs{margin-top:-10px}.m-r-n-xs{margin-right:-10px}.m-b-n-xs{margin-bottom:-10px}.m-l-n-xs{margin-left:-10px}
.m-t-n-sm{margin-top:-15px}.m-r-n-sm{margin-right:-15px}.m-b-n-sm{margin-bottom:-15px}.m-l-n-sm{margin-left:-15px}
.m-t-n-md{margin-top:-20px}.m-r-n-md{margin-right:-20px}.m-b-n-md{margin-bottom:-20px}.m-l-n-md{margin-left:-20px}
.m-t-n-lg{margin-top:-25px}.m-r-n-lg{margin-right:-25px}.m-b-n-lg{margin-bottom:-25px}.m-l-n-lg{margin-left:-25px}
.m-t-n-xxl{margin-top:-30px}.m-r-n-xxl{margin-right:-30px}.m-b-n-xxl{margin-bottom:-30px}.m-l-n-xxl{margin-left:-30px}
.p{padding:15px}
.p-h-xxs{padding-left:5px;padding-right:5px}.p-h-xs{padding-left:10px;padding-right:10px}
.p-h-sm{padding-left:15px;padding-right:15px}.no-p-h{padding-left:0;padding-right:0}
.no-p-v{padding-top:0;padding-bottom:0}.p-h-md{padding-left:20px;padding-right:20px}
.p-h-lg{padding-left:25px;padding-right:25px}.p-h-xxl{padding-left:30px;padding-right:30px}
.p-v-xxs{padding-top:5px;padding-bottom:5px}.p-v-xs{padding-top:10px;padding-bottom:10px}
.p-v-sm{padding-top:15px;padding-bottom:15px}.p-v-md{padding-top:20px;padding-bottom:20px}
.p-v-lg{padding-top:25px;padding-bottom:25px}.p-v-xxl{padding-top:30px;padding-bottom:30px}
.full-height{height:100%!important}.full-width{width:100%!important}
.w-xxs{width:50px}.w-xs{width:90px}.w-sm{width:140px}.w{width:200px}
.w-md{width:240px}.w-lg{width:280px}.w-xl{width:330px}.w-xxl{width:370px}
.w-auto{width:auto}.h-auto{height:auto}
.no-b{border:0!important}
.b{border:1px solid var(--border)}.b-t{border-top:1px solid var(--border)}
.b-r{border-right:1px solid var(--border)}.b-b{border-bottom:1px solid var(--border)}
.b-l{border-left:1px solid var(--border)}
.b-default{border-color:var(--border)}.b-primary{border-color:var(--primary)}
.b-info{border-color:var(--info)}.b-success{border-color:var(--success)}
.b-warning{border-color:var(--warning)}.b-danger{border-color:var(--danger)}
.b-2{border-width:2px}.b-3{border-width:3px}.b-4{border-width:4px}
.b-n-t{border-top:0}.b-n-r{border-right:0}.b-n-b{border-bottom:0}.b-n-l{border-left:0}
.no-r{border-radius:0!important}.r{border-radius:var(--r-xl)}
.r-t-l{border-top-left-radius:var(--r-xl)}.r-t-r{border-top-right-radius:var(--r-xl)}
.r-b-l{border-bottom-left-radius:var(--r-xl)}.r-b-r{border-bottom-right-radius:var(--r-xl)}
.no-r-t-l{border-top-left-radius:0!important}.no-r-t-r{border-top-right-radius:0!important}
.no-r-b-l{border-bottom-left-radius:0!important}.no-r-b-r{border-bottom-right-radius:0!important}

.bg-primary{background-color:var(--primary)!important}
.bg-secondary{background-color:var(--surface-3)!important}
.bg-success{background-color:var(--success)!important}
.bg-danger{background-color:var(--danger)!important}
.bg-warning{background-color:var(--warning)!important}
.bg-info{background-color:var(--info)!important}
.bg-light{background-color:var(--surface-2)!important}
.bg-dark{background-color:#1a1f36!important}
.text-white{color:#fff}
.text-primary{color:var(--primary)!important}
.text-secondary{color:var(--text-3)!important}
.text-success{color:var(--success)!important}
.text-danger{color:var(--danger)!important}
.text-warning{color:var(--warning)!important}
.text-info{color:var(--info)!important}
.text-light{color:var(--surface-2)!important}
.text-dark{color:var(--text-1)!important}

/* ---- LAYOUT ---- */
.page-container { padding: 20px; position: relative; display: block; }

.page-header {
    background: var(--surface);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-sm);
    position: fixed;
    width: calc(100% - 40px);
    z-index: 999;
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
}

.page-header::before {
    content: '';
    display: block;
    width: 100%;
    height: 110px;
    background: linear-gradient(to bottom, rgba(240,242,246,.97) 0%, rgba(240,242,246,.55) 65%, transparent 100%);
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
}

.page-header .navbar {
    background: transparent;
    border-radius: var(--r-2xl);
    padding: 13px 24px;
    display: flex !important;
}

.page-header .navbar .logo { display: flex !important; flex: 2; }

.page-header .navbar #navbarNav #leftNav > li > a {
    color: var(--text-2);
    font-size: 14px;
    transition: all var(--dur) var(--ease);
    border-radius: var(--r-md);
    padding: 8px 10px;
    line-height: 22px;
}

.page-header .navbar #navbarNav #leftNav > li > a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.page-header .navbar #navbarNav #leftNav > li > a i { line-height: 22px; vertical-align: middle; font-size: 22px; }

.page-header .navbar #navbarNav #leftNav > li > a#sidebar-toggle {
    padding: 8px 0; margin-right: 10px;
    transform: rotate(0);
    transition: all var(--dur) var(--ease);
}

body.sidebar-hidden .page-header .navbar #navbarNav #leftNav > li > a#sidebar-toggle { transform: rotate(-180deg); }
.page-header .navbar #navbarNav #leftNav > li > a#sidebar-toggle:hover { background: none; }
.page-header .navbar #headerNav,
.page-header .navbar #navbarNav { display: flex !important; flex: 10; }
.page-header .navbar #headerNav .navbar-nav,
.page-header .navbar #navbarNav .navbar-nav { flex-direction: row !important; }
.page-header #sidebar-toggle svg { width: 22px; height: 22px; }
.page-header .navbar #headerNav > ul > li > a { padding: 8px 0; margin: 0 10px; color: var(--text-2); transition: all var(--dur) var(--ease); }
.page-header .navbar #headerNav > ul > li > a svg { line-height: 22px; vertical-align: middle; width: 20px; height: 20px; }
.page-header .navbar #headerNav > ul > li > a:hover { color: var(--primary); }
.page-header .navbar #headerNav > ul > li > a.notifications-dropdown {
    padding: 7px 13px;
    background: var(--danger-bg);
    color: var(--danger);
    line-height: 22px;
    border-radius: var(--r-full);
    min-width: 36px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
}
.page-header .navbar #headerNav > ul > li > a.profile-dropdown { padding: 0; margin-right: 0; }
.page-header .navbar #headerNav > ul > li > a img { width: 38px; border-radius: var(--r-full); border: 2px solid var(--border); }
.page-header .navbar .navbar-nav { flex: 10; padding: 0; }
.page-header .navbar .navbar-brand { margin-right: 0; background: url(../images/logo@2x.png) center center no-repeat; background-size: cover; width: 38px; height: 38px; margin: 0 auto; }
.page-header #headerNav { flex: 10; align-items: flex-end; flex-direction: column; }
.page-header .header-notif { padding: 12px 22px; transition: background var(--dur) var(--ease); }
.page-header .header-notif:hover { background: var(--surface-2); }
.page-header .header-notif .notif-image { float: left; margin-right: 10px; margin-top: 3px; border-radius: 50%; }
.page-header .header-notif .notif-image span { width: 38px; height: 38px; display: inline-block; line-height: 38px; text-align: center; border-radius: 100%; }
.page-header .header-notif .notif-image img { width: 38px; height: 38px; border-radius: 50%; }
.page-header .header-notif .notif-text { width: 218px; display: inline-block; padding: 0 5px; color: var(--text-2); font-weight: 400; }
.page-header .header-notif .notif-text .bold-notif-text { font-weight: 600; }
.page-header .header-notif .notif-text p { margin: 0; }
.page-header .header-notif .notif-text small { opacity: .6; }

.profile-drop-menu a span { margin-left: 22px; }
.profile-drop-menu a svg  { margin-right: 10px; width: 18px; height: 18px; }
.search-drop-menu  { width: 340px; }
.notif-drop-menu   { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-drop-menu .dropdown-header { margin-bottom: 5px; }
.navbar-nav .dropdown-menu { position: absolute !important; visibility: hidden; opacity: 0; margin-top: 28px; display: block; transition: all var(--dur) var(--ease); }
.navbar-nav .dropdown-menu.show { margin-top: 10px; opacity: 1; visibility: visible; }

/* ---- SIDEBAR ---- */
.slimScrollBar { background: rgba(26,31,54,.12) !important; border-radius: 4px !important; }

.page-sidebar {
    position: fixed;
    height: calc(100% - 148px);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    top: 118px;
    border-radius: var(--r-xl);
    width: 260px;
    transition: all var(--dur) var(--ease);
    transform: scale(1,1);
    transform-origin: left;
    overflow: visible;
    border: 1px solid var(--border);
    border-bottom: 3px solid var(--primary);
}

.page-sidebar .ps__rail-y { margin-top: 8px !important; margin-bottom: 8px !important; background-color: transparent !important; }
.page-sidebar .accordion-menu { height: 100% !important; padding: 16px 12px; }

.page-sidebar .accordion-menu > li > a {
    display: block;
    color: var(--text-2);
    transition: all .15s var(--ease);
    line-height: 44px;
    padding: 0 14px;
    text-decoration: none;
    border-radius: var(--r-lg);
    margin-bottom: 3px;
    font-size: 13.5px;
}

.page-sidebar .accordion-menu > li.active-page > a {
    background: linear-gradient(90deg, rgba(237,28,36,.13) 0%, rgba(237,28,36,.05) 100%);
    color: var(--primary);
    font-weight: 600;
    border-left: 3px solid var(--primary);
    padding-left: 11px;
}

.page-sidebar .accordion-menu > li.active-page > a > svg { color: var(--primary) !important; }
.page-sidebar .accordion-menu > li.active-page ul li a.active { font-weight: 600; color: var(--text-1); }

.page-sidebar .accordion-menu > li > a:hover {
    background: var(--surface-2);
    color: var(--primary);
    padding-left: 18px;
}

.page-sidebar .accordion-menu > li > a:hover svg { color: var(--primary); margin-left: 2px; }

.page-sidebar .accordion-menu > li > a > svg {
    width: 20px; height: 20px;
    line-height: 40px;
    text-align: center;
    vertical-align: text-top;
    color: var(--text-3);
    margin-right: 13px;
    transition: all var(--dur) var(--ease);
}

.page-sidebar .accordion-menu li.sidebar-title {
    font-weight: 700;
    padding: 18px 14px 6px;
    font-size: 0.69rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-sidebar .accordion-menu li a .dropdown-icon { float: right; vertical-align: middle; line-height: 44px; font-size: 10px; transition: all var(--dur) var(--ease); }
.page-sidebar .accordion-menu li.open > a > .dropdown-icon { visibility: visible; transform: rotate(90deg); }
.page-sidebar .accordion-menu li ul { padding: 4px 0; list-style: none; }
.page-sidebar .accordion-menu li ul li a { color: var(--text-2); display: block; padding: 9px 14px 9px 50px; font-size: 13px; position: relative; transition: all .15s var(--ease); text-decoration: none; border-radius: var(--r-md); }
.page-sidebar .accordion-menu li ul li a:hover { margin-left: 4px; color: var(--primary); }
.page-sidebar .accordion-menu li ul li a i { font-size: 10px; padding-right: 18px; padding-left: 5px; }

body.sidebar-hidden .page-sidebar { transform: scale(0,1); }

.page-content { margin-top: 71px; margin-left: 260px; transition: all var(--dur) var(--ease); }
.main-wrapper  { padding: 28px 0 28px 28px; transition: all var(--dur) var(--ease); }
body.sidebar-hidden .page-content { margin-left: 0; }
body.sidebar-hidden .main-wrapper { padding-left: 0; }
.row > * { padding-right: 14px; padding-left: 14px; }

/* ---- CARDS ---- */
.card {
    margin-bottom: 28px;
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }

.card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 22px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--primary-grad);
    border-radius: 2px;
    flex-shrink: 0;
}

.card-body { padding: 26px; }
.card-description { margin-bottom: 18px; }
.card-img, .card-img-top { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); }
.card-img, .card-img-bottom { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
.card-footer, .card-header { padding: 14px 26px; background: var(--surface); border-color: var(--border); }
.card-header:first-child { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); }
.card-footer:last-child  { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
.card-img-overlay { border-radius: var(--r-xl); }
.card.bg-primary  .card-header { background: var(--primary-dark); border-color: var(--primary-dark); }
.card.bg-primary  .card-title  { color: #fff; }
.card.bg-primary  .card-title::before { background: rgba(255,255,255,.45); }
.card.bg-success  .card-header { background: var(--success); border-color: var(--success); }
.card.bg-success  .card-title  { color: #fff; }
.card.bg-danger   .card-header { background: var(--danger);  border-color: var(--danger);  }
.card.bg-danger   .card-title  { color: #fff; }
.card.bg-warning  .card-header { background: var(--warning); border-color: var(--warning); }
.card.bg-warning  .card-title  { color: #fff; }
.card.bg-info     .card-header { background: var(--info);    border-color: var(--info);    }
.card.bg-info     .card-title  { color: #fff; }
.card.bg-dark     .card-header { background: #1a1f36; border-color: #1a1f36; }
.card.bg-dark     .card-title  { color: #fff; }
.card.bg-secondary .card-header { background: var(--surface-3); color: var(--text-2); }
.card.bg-secondary .card-body   { color: var(--text-2); }

/* ---- LIST GROUP ---- */
.list-group-item:first-child { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); }
.list-group-item:last-child  { border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
.list-group-item { padding: 13px 16px; border-color: var(--border); transition: background var(--dur) var(--ease); font-size: 13.5px; }
.list-group-item.active { background: var(--primary-grad); border-color: var(--primary-dark); }
.list-group-item-primary  { color: var(--primary);  background: var(--primary-soft); font-weight: 500; }
.list-group-item-secondary{ color: var(--text-2);   background: var(--surface-3);    font-weight: 500; }
.list-group-item-success  { color: var(--success);  background: var(--success-bg);   font-weight: 500; }
.list-group-item-danger   { color: var(--danger);   background: var(--danger-bg);    font-weight: 500; }
.list-group-item-warning  { color: #92400e;         background: var(--warning-bg);   font-weight: 500; }
.list-group-item-info     { color: var(--info);     background: var(--info-bg);      font-weight: 500; }
.list-group-item-light    { color: var(--text-2);   background: var(--surface-2);    font-weight: 500; }
.list-group-item-dark     { color: var(--text-1);   background: var(--surface-3);    font-weight: 500; }

/* ---- NAV ---- */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--primary-grad); box-shadow: var(--shadow-red); }
.nav-pills .nav-link { border-radius: var(--r-lg); font-size: 13.5px; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link, .nav-tabs .nav-link.active { border: 0; }

/* ---- TOAST ---- */
.toast { border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.toast-header { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); padding: 10px 15px; }
.toast-body { padding: 13px 15px; }
.toast-header strong { font-weight: 600; }

/* ---- ALERTS ---- */
.alert { border-radius: var(--r-lg); padding: 11px 16px; font-weight: 500; font-size: 13.5px; border-width: 1px; }
.alert-primary   { background: var(--primary-soft); border-color: rgba(237,28,36,.2);  color: var(--primary-dark); }
.alert-secondary { background: var(--surface-3);    border-color: var(--border);       color: var(--text-2); }
.alert-success   { background: var(--success-bg);   border-color: rgba(15,168,126,.2); color: var(--success); }
.alert-danger    { background: var(--danger-bg);    border-color: rgba(232,68,90,.2);  color: var(--danger); }
.alert-warning   { background: var(--warning-bg);   border-color: rgba(245,158,11,.2); color: #92400e; }
.alert-info      { background: var(--info-bg);      border-color: rgba(115,82,242,.2); color: var(--info); }
.alert-light     { background: var(--surface-2);    border-color: var(--border); }
.alert-dark      { background: var(--surface-3);    border-color: var(--border-2);     color: var(--text-1); }
.alert-primary.outline-alert   { background:#fff; border-color:var(--primary);  color:var(--primary);  font-weight:400; }
.alert-secondary.outline-alert { background:#fff; border-color:var(--border);                          font-weight:400; }
.alert-success.outline-alert   { background:#fff; border-color:var(--success);  color:var(--success);  font-weight:400; }
.alert-danger.outline-alert    { background:#fff; border-color:var(--danger);   color:var(--danger);   font-weight:400; }
.alert-warning.outline-alert   { background:#fff; border-color:var(--warning);  color:#92400e;         font-weight:400; }
.alert-info.outline-alert      { background:#fff; border-color:var(--info);     color:var(--info);     font-weight:400; }
.alert-light.outline-alert     { background:#fff; border-color:var(--border);                          font-weight:400; }
.alert-dark.outline-alert      { background:#fff; border-color:var(--border-2); color:var(--text-1);   font-weight:400; }

/* ---- BADGES ---- */
.badge { font-weight: 600; padding: 5px 10px; font-size: 0.71rem; letter-spacing: .025em; text-transform: uppercase; }
.badge:not(.badge-pill) { border-radius: var(--r-sm); }
.badge.bg-primary   { background: var(--primary-soft) !important; color: var(--primary); }
.badge.bg-secondary { background: var(--surface-3)    !important; color: var(--text-2);  }
.badge.bg-success   { background: var(--success-bg)   !important; color: var(--success); }
.badge.bg-danger    { background: var(--danger-bg)    !important; color: var(--danger);  }
.badge.bg-warning   { background: var(--warning-bg)   !important; color: #92400e;        }
.badge.bg-info      { background: var(--info-bg)       !important; color: var(--info);   }
.badge.bg-dark      { background: var(--surface-3)    !important; color: var(--text-1);  }

/* ---- BUTTONS ---- */
.btn { padding: 8px 20px; border-radius: var(--r-lg); font-weight: 600; font-size: 13.5px; transition: all var(--dur) var(--ease); letter-spacing: .01em; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active { background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); box-shadow: 0 5px 16px rgba(237,28,36,.2); }
.btn-secondary, .btn-secondary.disabled, .btn-secondary:disabled { background: var(--surface-3); border-color: transparent; color: var(--text-2); }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active { background: var(--border); border-color: transparent; color: var(--text-1); }
.btn-success, .btn-success:disabled, .btn-sucess.disabled { background: var(--success-bg); border-color: transparent; color: var(--success); }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background: var(--success-bg); border-color: transparent; color: #0a8060; box-shadow: 0 5px 16px rgba(15,168,126,.2); }
.btn-danger, .btn-danger.disabled, .btn-danger:disabled { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:not(:disabled):not(.disabled):active { background: var(--danger-bg); border-color: transparent; color: #ba2a40; box-shadow: 0 5px 16px rgba(232,68,90,.2); }
.btn-warning, .btn-warning.disabled, .btn-warning:disabled { background: var(--warning-bg); border-color: transparent; color: #92400e; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active { background: var(--warning-bg); border-color: transparent; color: #78350f; box-shadow: 0 5px 16px rgba(245,158,11,.2); }
.btn-info, .btn-info.disabled, .btn-info:disabled { background: var(--info-bg); border-color: transparent; color: var(--info); }
.btn-info:hover, .btn-info:focus, .btn-info:not(:disabled):not(.disabled):active { background: var(--info-bg); border-color: transparent; color: #5a38d4; box-shadow: 0 5px 16px rgba(115,82,242,.2); }
.btn-light, .btn-light.disabled, .btn-light:disabled { background: var(--surface-2); border-color: transparent; color: var(--text-2); }
.btn-light:hover, .btn-light:focus, .btn-light:not(:disabled):not(.disabled):active { background: var(--border); border-color: transparent; color: var(--text-1); }
.btn-dark, .btn-dark.disabled, .btn-dark:disabled { background: var(--surface-3); border-color: transparent; color: var(--text-1); }
.btn-dark:hover, .btn-dark:focus, .btn-dark:not(:disabled):not(.disabled):active { background: var(--border-2); border-color: transparent; color: var(--text-1); }
.btn-link { color: var(--primary); text-decoration: none; }
.btn-link:hover { color: var(--primary-dark); text-decoration: underline; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:not(:disabled):not(.disabled):active { color: #fff; background: var(--primary-grad); border-color: var(--primary); box-shadow: var(--shadow-red); }
.btn-outline-secondary { color: var(--text-2); border-color: var(--border-2); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active { color: var(--text-1); background: var(--surface-3); border-color: var(--border-2); }
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:not(:disabled):not(.disabled):active { color: #fff; background: var(--success); border-color: var(--success); box-shadow: 0 5px 16px rgba(15,168,126,.25); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:not(:disabled):not(.disabled):active { color: #fff; background: var(--danger); border-color: var(--danger); box-shadow: 0 5px 16px rgba(232,68,90,.25); }
.btn-outline-warning { color: #92400e; border-color: var(--warning); }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:not(:disabled):not(.disabled):active { color: #fff; background: var(--warning); border-color: var(--warning); }
.btn-outline-info { color: var(--info); border-color: var(--info); }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:not(:disabled):not(.disabled):active { color: #fff; background: var(--info); border-color: var(--info); box-shadow: 0 5px 16px rgba(115,82,242,.25); }
.btn-outline-dark { color: var(--text-1); border-color: var(--border-2); }
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:not(:disabled):not(.disabled):active { color: var(--text-1); background: var(--surface-3); border-color: var(--border-2); }

/* ---- MODAL ---- */
body.modal-open { overflow: visible; }
.modal-content { border-radius: var(--r-2xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.modal-header { padding: 26px 26px 0; border: 0; }
.modal-footer { padding: 0 26px 26px; border: 0; }
.modal-body   { padding: 18px 26px; }

/* ---- DROPDOWN ---- */
.dropdown-menu { border-radius: var(--r-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 8px 0; margin: 8px 0; }
.dropdown-item { color: var(--text-2); padding: 9px 22px; font-size: 13.5px; }
.dropdown-item:hover { background: var(--primary-soft); color: var(--primary); }
.dropdown-item.active, .dropdown-item:active { color: var(--primary); background: var(--primary-soft); }
.dropdown-divider { border-color: var(--border); }
.dropdown-header { padding: 7px 22px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.dropdown-menu-dark { background-color: var(--surface-3); }
.dropdown-menu-dark .dropdown-item { color: var(--text-2); }
.dropdown-menu-dark .dropdown-item:hover { background: none; color: var(--primary); }
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active { color: var(--primary); background: none; }
.dropdown-menu form { padding: 8px 18px; }

/* ---- PAGINATION ---- */
.page-link { color: var(--primary); border-color: var(--border); }
.page-item.disabled .page-link  { border-color: var(--border); }
.page-item:first-child .page-link { border-top-left-radius: var(--r-md); border-bottom-left-radius: var(--r-md); }
.page-item:last-child  .page-link { border-top-right-radius: var(--r-md); border-bottom-right-radius: var(--r-md); }
.page-item.active .page-link { background: var(--primary-grad); border-color: var(--primary); }

/* ---- PROGRESS ---- */
.progress { background: var(--surface-3); border-radius: var(--r-full); height: 7px; overflow: hidden; }
.progress-bar { background: var(--primary-grad); border-radius: var(--r-full); }

/* ---- ACCORDION ---- */
.accordion-button { border: none; box-shadow: var(--shadow-xs); padding: 17px 20px; font-weight: 500; font-size: 14px; }
.accordion-button:not(.collapsed) { background: var(--primary-soft); color: var(--primary); box-shadow: none; font-weight: 600; }
.accordion-item:first-of-type .accordion-button { border-top-left-radius: var(--r-xl) !important; border-top-right-radius: var(--r-xl) !important; }
.accordion-item:last-of-type  .accordion-button.collapsed { border-bottom-left-radius: var(--r-xl) !important; border-bottom-right-radius: var(--r-xl) !important; }
.accordion-collapse { border: none; }
.accordion-flush .accordion-button { box-shadow: none; }

/* ---- FORMS ---- */
.form-control { border-color: var(--border); border-radius: var(--r-lg); padding: .6rem 1rem; font-size: 13.5px; color: var(--text-1); background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); color: var(--text-1); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--surface-2); color: var(--text-2); }
.form-control-color { padding: 7px; }
.form-select { border-color: var(--border); border-radius: var(--r-lg); padding: .6rem 1rem; font-size: 13.5px; color: var(--text-1); background-color: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-check-input:checked { background-color: var(--info); border-color: var(--info); }
.input-group-text { border-radius: var(--r-lg); background: var(--surface-2); border-color: var(--border); color: var(--text-3); font-size: 13.5px; }
.form-control.is-valid, .form-select.is-valid, .was-validated .form-control:valid, .was-validated .form-select:valid { border-color: var(--success); }
.form-check-input.is-valid ~ .form-check-label, .valid-feedback, .was-validated .form-check-input:valid ~ .form-check-label { color: var(--success); }
.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked { background-color: var(--success); border-color: var(--success); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger); font-size: 12.5px; }
.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label { color: var(--danger); }
.form-check-input.is-invalid, .was-validated .form-check-input:invalid { border-color: var(--danger); }

/* ---- TABLES ---- */
.table { color: var(--text-2); border-color: var(--border); font-size: 13.5px; }
.table img { margin-right: 10px; }
.table-primary   { --bs-table-bg:#fdeced; color:var(--primary);  border-color:#fdeced; }
.table-secondary { --bs-table-bg:var(--surface-3); color:var(--text-2);  border-color:var(--surface-3); }
.table-success   { --bs-table-bg:var(--success-bg); color:var(--success); border-color:var(--success-bg); }
.table-danger    { --bs-table-bg:var(--danger-bg);  color:var(--danger);  border-color:var(--danger-bg); }
.table-warning   { --bs-table-bg:var(--warning-bg); color:#92400e;        border-color:var(--warning-bg); }
.table-info      { --bs-table-bg:var(--info-bg);    color:var(--info);    border-color:var(--info-bg); }
.table-light     { --bs-table-bg:var(--surface-2);  color:var(--text-2);  border-color:var(--surface-2); }
.table-dark      { --bs-table-bg:var(--surface-3);  color:var(--text-1);  border-color:var(--surface-3); }
.table-dark  th { background-color: var(--surface-3); }
.table-light th { background-color: var(--surface-2); }
.table * { border-color: var(--border) !important; }
.table td, .table th { padding: 13px 20px !important; font-weight: 400; vertical-align: middle; }
.table thead th { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; color: var(--text-3); border-bottom: 2px solid var(--border) !important; background: var(--surface-2); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: none; }
.table tfoot tr td, .table tfoot tr th { border-bottom: none; border-top-width: 1px; }
.table-hover > tbody > tr { transition: background var(--dur) var(--ease); }
.table-hover > tbody > tr:hover { --bs-table-hover-bg: transparent; background: var(--primary-soft); }
.table-striped > tbody > tr:nth-of-type(odd) { --bs-table-striped-bg:var(--surface-2); color: var(--text-2); }

/* ---- DATATABLES ---- */
.blockUI.blockOverlay { border-radius: inherit; background: rgba(255,255,255,.92) !important; opacity: .92 !important; }
.blockUI.blockMsg { background: none !important; width: 25px !important; border: 0 !important; height: 25px !important; left: calc(50% - 12.5px) !important; top: calc(50% - 12.5px) !important; }
table.dataTable { margin-top: 20px !important; margin-bottom: 20px !important; }
table.dataTable td, table.dataTable th { padding: 13px 22px !important; border-bottom: 1px solid var(--border) !important; }
table.dataTable tfoot th { border-bottom: 0 !important; }
table.dataTable tfoot th, table.dataTable thead th { font-weight: 700; text-transform: uppercase; font-family: var(--ff); font-size: 11px; letter-spacing: .07em; color: var(--text-3); }
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc_disabled:before { content:'\f077'; font-family:"Font Awesome 5 Free"; font-size:13px; right:10px; bottom:calc(50% - 4px); }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_desc_disabled:after { content:'\f078'; font-family:"Font Awesome 5 Free"; font-size:13px; right:10px; bottom:calc(50% - 13px); }
div.dataTables_wrapper div.dataTables_length select { margin: 0 8px; }
div.dataTables_wrapper div.dataTables_filter input  { margin-left: 8px; }
tr.group { background: var(--surface-2) !important; }

/* ---- WIDGETS ---- */
.stat-widget p   { float: left; opacity: .6; }
.stat-widget h2  { font-size: 26px; float: right; color: var(--text-1); font-weight: 700; }
.stat-widget .progress { clear: both; margin-top: 14px; }
.table-widget img { width: 34px; }
.table-widget .card-body { padding: 26px 0 0; }
.table-widget .card-title { padding: 0 26px; }
.table-widget .table td, .table-widget .table th { padding: 13px 26px !important; }
.table-widget .table { margin-bottom: 0; }

.transactions-list { margin-bottom: 20px; }
.tr-item { display: flex; justify-content: space-between; align-items: center; }
.tr-item .tr-text h4 { font-size: 13.5px; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.tr-item .tr-text p  { font-size: 11.5px; color: var(--text-3); margin-bottom: 0; }
.tr-company-name { display: flex; align-items: center; }
.tr-rate { align-self: center; }
.tr-rate p { margin-bottom: 0; font-weight: 700; color: var(--text-1); }
.tr-icon { margin-right: 14px; }
.tr-card-icon { border-radius: var(--r-lg); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tr-card-icon svg { width: 20px; height: 20px; }
.tr-text { align-self: center; }
.tr-text a { color: var(--text-2); transition: color var(--dur) var(--ease); }
.tr-text a:hover { color: var(--primary); }
.tr-card-bg-primary   { background: var(--primary-soft) !important; color: var(--primary); }
.tr-card-bg-secondary { background: var(--surface-3);               color: var(--text-3);  }
.tr-card-bg-success   { background: var(--success-bg);               color: var(--success); }
.tr-card-bg-danger    { background: var(--danger-bg)   !important;  color: var(--danger);  }
.tr-card-bg-warning   { background: var(--warning-bg)  !important;  color: #92400e;        }
.tr-card-bg-info      { background: var(--info-bg)     !important;  color: var(--info);    }

.card-meet-header { margin-bottom: 20px; }
.card-meet-header .card-meet-day { float: left; padding-right: 16px; margin-right: 16px; text-align: center; border-right: 2px solid var(--border); }
.card-meet-text h6 { font-size: 14.5px; font-weight: 700; color: var(--text-1); }
.io-pricing-table { text-align: center; }
.io-pricing-table li { padding: 16px; }
.icon-list-row { margin-top: 28px; text-align: center; }
.icon-list-row i { font-size: 22px; }
.icon-state-info { color: var(--primary); }

.popover { margin: 16px; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); color: var(--text-2); font-family: var(--ff) !important; }
.popover-header { padding: 14px 20px 0; background: none; border-bottom-color: transparent; font-size: 13px; color: var(--text-3); opacity: 1; }
.popover-body   { padding: 12px 20px 14px; font-size: 13px; color: var(--text-3); }
.popover .arrow:before { display: none; }
.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before, .bs-popover-end > .popover-arrow::before, .bs-popover-start > .popover-arrow::before, .bs-popover-top > .popover-arrow::before { display: none; }

/* ---- LOADER ---- */
.loader { position: fixed; height: 100%; width: 100%; background: var(--surface); z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; transition: all var(--dur) var(--ease); display: flex; align-items: center; justify-content: center; }
.loader .spinner-grow { width: 36px; height: 36px; color: var(--primary); }
.no-loader .loader { visibility: hidden; opacity: 0; }

/* ---- CALENDAR ---- */
.fc-toolbar h2 { font-size: 16px !important; font-weight: 700; color: var(--text-1); }
.fc-next-button.fc-button.fc-button-primary, .fc-next-button.fc-button.fc-button-primary.active, .fc-next-button.fc-button.fc-button-primary:focus, .fc-prev-button.fc-button.fc-button-primary, .fc-prev-button.fc-button.fc-button-primary.active, .fc-prev-button.fc-button.fc-button-primary:focus { background: var(--primary-soft); border-color: transparent; color: var(--primary); border-radius: var(--r-md); padding: 7px 10px; }
.fc-next-button.fc-button.fc-button-primary:hover, .fc-prev-button.fc-button.fc-button-primary:hover { background: var(--primary-soft); border-color: transparent; color: var(--primary-dark); box-shadow: var(--shadow-red); }
.fc-today-button.fc-button.fc-button-primary, .fc-today-button.fc-button.fc-button-primary.active, .fc-today-button.fc-button.fc-button-primary:focus { background: var(--surface-3); border-color: transparent; color: var(--text-2); border-radius: var(--r-md); padding: 7px 16px; }
.fc .fc-button-primary:disabled { background: var(--surface-3); border-color: transparent; color: var(--text-3); }
#calendar a { color: var(--text-2); }
.fc-col-header-cell-cushion { font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.fc .fc-daygrid-day.fc-day-today { background: var(--primary-soft); }
.fc-scrollgrid-section.fc-scrollgrid-section-header { border: none; }
.fc-h-event { background: var(--primary-soft); border-color: transparent; padding: 2px; border-radius: var(--r-sm); }
.fc-event-title.fc-sticky { padding: 2px 8px; color: var(--primary); font-weight: 600; }
.fc-daygrid-event { border-radius: var(--r-sm); }
.fc-daygrid-event:hover { background: rgba(237,28,36,.06); }
.fc-daygrid-dot-event .fc-event-title { font-weight: 400; }
.fc-daygrid-event-dot { border-color: var(--primary); }

/* ---- AUTH ---- */
.login-page .container, .login-page .container .row { height: 100vh; }
.login-page .container .row .login-box-container { top: 50%; transform: translateY(-50%); }
.authent-logo { text-align: center; }
.authent-text { text-align: center; margin: 20px 0; font-size: 15.5px; }
.authent-text p { margin-bottom: 5px; }
.authent-reg   { text-align: center; margin-top: 20px; }
.authent-reg p  { margin-bottom: 0; }
.authent-login  { margin-top: 10px; text-align: center; }
.authent-login p { margin-bottom: 0; }

/* ---- ERROR ---- */
.error-page .container, .error-page .error-container { height: 100%; position: relative; }
.error-info { position: absolute; top: 50%; transform: translateY(-50%); }
.error-info h1 { font-size: 140px; font-weight: 800; color: var(--primary); letter-spacing: -.04em; }
.error-info p  { font-size: 15px; color: var(--text-2); }
.error-image { position: absolute; right: 0; height: 100%; width: 50%; background: url(../images/500.svg) center center no-repeat; background-size: contain; }
body.err-500 .error-image { background: url(../images/500.svg) center center no-repeat; background-size: contain; }
body.error-page .container { max-width: 1140px; }

/* ---- INVOICE ---- */
.invoice-details { margin-top: 20px; margin-bottom: 40px; }
.invoice-details p { margin-bottom: 3px; }
.invoice-details p.info { font-weight: 700; text-transform: uppercase; color: var(--text-1); margin-bottom: 10px; letter-spacing: .04em; font-size: 12px; }
.invoice-info p { margin-bottom: 8px; }
.invoice-info p span { float: right; }
.invoice-table th { font-weight: 600; }
.invoice-table img { width: 34px; height: 34px; }
.invoice-table a { color: var(--text-2); margin-right: 5px; }
.invoice-table svg { width: 17px; height: 17px; }
.invoice-last { margin-top: 40px; }

/* ---- PROFILE ---- */
.profile-cover { width: 100%; display: block; position: relative; border-radius: var(--r-2xl); z-index: 1; height: 340px; background: url(../images/banner.jpeg) center center no-repeat; background-size: cover; }
.profile-cover:after { display: block; content: ' '; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--r-2xl); background: linear-gradient(to bottom, rgba(26,31,54,.2) 0%, rgba(200,20,27,.35) 55%, rgba(26,31,54,.82) 100%); }
.profile-header { display: block; width: 100%; margin-top: -100px; padding: 0 26px; overflow: hidden; z-index: 2; position: relative; margin-bottom: 20px; }
.profile-header .profile-img img { width: 140px; height: 140px; border-radius: 140px; border: 3px solid var(--surface); box-shadow: var(--shadow-md); }
.profile-header .profile-img { float: left; }
.profile-header .profile-name { float: left; margin-top: 44px; margin-left: 24px; }
.profile-header .profile-name h3 { color: #fff; font-weight: 700; font-size: 20px; line-height: 46px; }
.profile-header .profile-header-menu { float: right; height: 100%; margin-top: 34px; }
.profile-header .profile-header-menu ul li { float: left; height: 100%; padding: 20px; }
.profile-header .profile-header-menu ul li a { color: rgba(255,255,255,.65); display: block; font-weight: 500; font-size: 13.5px; transition: all var(--dur) var(--ease); }
.profile-header .profile-header-menu ul li a.active, .profile-header .profile-header-menu ul li a:hover { color: #fff; }
ul.profile-about-list { margin-bottom: 0; }
ul.profile-about-list li { margin-bottom: 10px; }
ul.profile-about-list li.profile-about-list-buttons { margin-bottom: 0; }

/* ---- SOCIAL ---- */
.story-list .story { overflow: hidden; display: block; margin-bottom: 10px; }
.story-list .story:last-child { margin-bottom: 0; }
.story-list .story img { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--primary); padding: 2px; float: left; }
.story-list .story .story-info { float: left; padding: 3px 13px; }
.story-list .story .story-info span.story-author { display: block; line-height: 20px; color: var(--text-2); font-weight: 600; }
.story-list .story .story-info span.story-time   { line-height: 20px; font-size: 12px; color: var(--text-3); }
.post-body, .post-header { display: block; overflow: hidden; width: 100%; }
.post-header img { width: 46px; height: 46px; border-radius: 50%; float: left; }
.post-header .post-info { float: left; padding: 3px 13px 0; }
.post-header .post-info span.post-date   { font-size: 12px; color: var(--text-3); }
.post-header .post-info span.post-author { font-size: 14px; font-weight: 600; color: var(--text-1); }
.post-header .post-header-actions { float: right; padding: 13px 0; }
.post-header .post-header-actions a { line-height: 20px; color: var(--text-3); }
.post-header .post-header-actions a:hover { color: var(--text-1); }
.post-body { padding: 13px 0 0; position: relative; }
.post-body p { margin-bottom: 0; }
.post-body .post-image { display: block; width: 100%; border-radius: var(--r-lg); margin-top: 13px; }
.post-actions, .post-actions ul { display: block; overflow: hidden; margin-bottom: 0; }
.post-actions { margin-top: 13px; padding: 4px 8px 0; }
.post-actions ul li a { float: left; padding: 5px 8px; font-size: 14px; color: var(--text-2); margin-right: 8px; }
.post-actions ul li a:hover { color: var(--text-1); }
.post-actions ul li a.liked { color: var(--info); }
.post-actions ul li a.liked i:before { content: '\f004'; }
.post-actions ul li a i { margin-right: 6px; }
.post-comments { margin-top: 5px; padding-top: 13px; }
.post-comments .post-comm { display: block; margin-bottom: 10px; background: var(--surface-2); border-radius: var(--r-lg); padding: 13px; overflow: hidden; }
.post-comments .post-comm:last-child { margin-bottom: 0; }
.post-comments .post-comm img { width: 30px; height: 30px; border-radius: 30px; float: left; }
.post-comments .post-comm .comment-container { float: left; padding: 0 10px; width: calc(100% - 30px); display: block; }
.post-comments .post-comm .comment-container span.comment-author { color: var(--text-2); display: block; line-height: 30px; font-weight: 600; }
.post-comments .post-comm .comment-container span.comment-author small { float: right; font-size: 12px; color: var(--text-3); }
.post-comments .post-comm .comment-text { padding: 8px 0 0; display: inline-block; }

/* ---- EMAIL ---- */
.email-page .main-wrapper { padding-bottom: 0; }
.email-page .main-wrapper > .row > div > .card { margin-bottom: 0; }
.email-list { max-height: calc(100vh - 207px); overflow-y: auto; }
.email-list ul { margin-bottom: 0; }
.email-list-item { color: var(--text-2); }
.email-list-item .email-author img { width: 34px; border-radius: 100%; }
.email-list-item .email-author span.author-name { margin-left: 7px; line-height: 25px; font-weight: 600; }
.email-list-item .email-author span.email-date  { float: right; color: var(--text-3); line-height: 25px; font-size: 12px; }
.email-list-item .email-info { display: block; margin-top: 7px; }
.email-list-item .email-info .email-subject, .email-list-item .email-info .email-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; }
.email-list-item .email-info .email-text { color: var(--text-3); }
.email-list li a:active, .email-list li a:focus, .email-menu li a:active, .email-menu li a:focus { color: var(--text-2); }
.email-list li a { border-radius: var(--r-lg); display: block; padding: 15px 12px; transition: all var(--dur) var(--ease); }
.email-list li:last-child a { border-color: transparent; }
.email-list li a:hover { background: var(--surface-2); }
.email-list li.active a { background: var(--primary-soft); }
.open-email-content { max-height: calc(100vh - 207px); overflow-y: auto; }
.mail-header { width: 100%; display: block; overflow: hidden; }
.mail-title { float: left; line-height: 20px; padding: 4px 0; max-width: calc(100% - 280px); }
.mail-actions { float: right; }
.mail-info { display: block; width: 100%; overflow: hidden; padding-top: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--border); }
.mail-info .mail-author { float: left; }
.mail-info .mail-author img { width: 46px; border-radius: 50%; border: 3px solid var(--surface-2); float: left; }
.mail-info .mail-author-info { padding: 0 10px; display: inline-block; height: 46px; }
.mail-info .mail-author span.mail-author-name { display: block; line-height: 23px; font-weight: 700; }
.mail-info .mail-author span.mail-author-address { display: block; line-height: 23px; color: var(--text-3); }
.mail-info .mail-other-info { float: right; }
.mail-info .mail-other-info span { line-height: 46px; color: var(--text-3); }
.mail-text { margin-top: 26px; }
.mail-attachment { margin-top: 26px; }
.mail-attachment-files { margin-top: 26px; }
.mail-attachment-files .card { width: 188px; float: left; margin-right: 18px; }
.mail-attachment-files .card .card-body { padding: 14px; font-size: 13.5px; }
.mail-attachment-files .card .card-title { margin-bottom: 8px; font-size: 13.5px; }

/* ---- FILE MANAGER ---- */
.file-manager-menu ul li { padding: 9px; transition: all .1s var(--ease); }
.file-manager-menu ul li a:hover { margin-left: 4px; }
.file-manager-menu ul li a { color: var(--text-2); transition: all .1s var(--ease); }
.file-manager-menu ul li a i { padding-right: 9px; }
.file-manager-menu.label-menu ul li a i { width: 6px; height: 10px; border-radius: 50%; background: #000; display: inline-block; vertical-align: middle; margin: 0 14px 0 5px; }
.fmm-title { text-transform: uppercase; padding: 9px; display: block; font-size: 10.5px; letter-spacing: .07em; color: var(--text-3); }
.file-manager-menu .progress { margin-top: 9px; margin-left: 9px; }
.storage-info-text { padding: 9px; }
.card-file-manager .card-text { color: var(--text-3); }
.card-file-header { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); vertical-align: middle; font-size: 46px; text-align: center; line-height: 130px; background: var(--surface-2); }
.folder .folder-icon { float: left; }
.folder .folder-icon i { font-size: 42px; color: var(--primary); }
.folder .folder-info { display: block; margin-left: 16px; float: left; }
.folder .folder-info a { margin-bottom: 0; display: block; color: var(--text-2); font-weight: 600; }
.folder .folder-info span { color: var(--text-3); }

/* ---- RESPONSIVE ---- */
@media (max-width: 1350px) {
    .page-header .navbar #navbarNav { flex: 0; margin-right: 14px; }
    .page-header .navbar .logo { flex: 0 !important; }
    .page-header .navbar #navbarNav .navbar-nav li a:not(#sidebar-toggle) { display: none; }
    .page-header .navbar #navbarNav #leftNav > li > a#sidebar-toggle { transform: rotate(-180deg); }
    body.sidebar-hidden .page-header .navbar #navbarNav #leftNav > li > a#sidebar-toggle { transform: rotate(0); }
    .page-sidebar { transform: scale(0,1); z-index: 999; }
    body.sidebar-hidden .page-sidebar { transform: scale(1,1); }
    .page-content { margin-left: 0; }
    .page-content .main-wrapper { padding-left: 0; }
    body.sidebar-hidden .page-content { transform: translateX(260px); padding-left: 20px; }
}

@media (max-width: 1200px) {
    .profile-header { margin-top: -55px; }
    .profile-cover  { height: 190px; }
    .profile-img { display: block; float: none !important; }
    .profile-img img { margin: 0 auto; display: inherit; width: 90px !important; height: 90px !important; border-radius: 90px !important; }
    .profile-name { display: block; float: none !important; text-align: center; margin: 0 !important; }
    .profile-name h3 { color: var(--text-1) !important; }
    .profile-header .profile-header-menu { display: block; float: none; margin: 0; text-align: center; }
    .profile-header .profile-header-menu ul li { display: block; padding: 0; width: calc(100% / 6); text-align: center; }
    .profile-header .profile-header-menu ul li a { padding: 10px; height: auto !important; }
    .profile-header .profile-header-menu ul li a.active,
    .profile-header .profile-header-menu ul li a:hover { color: var(--text-1); }
    .mail-actions { display: none; }
    .mail-title { max-width: 100%; }
}

@media (max-width: 992px) {
    .error-image { display: none; }
    .error-info { width: 100%; text-align: center; }
}