@import "dark.css";
@import "images.css";
@import "light.css";
@import "gradients.css";
@import "opacity.css";
@import "fonts.css";


body {
    width: auto;
    height: auto;
}
.rounded-top-left-none {
    border-top-left-radius: 0 !important;
}

.rounded-top-right-none {
    border-top-right-radius: 0 !important;
}

.rounded-bottom-left-none {
    border-bottom-left-radius: 0 !important;
}

.rounded-bottom-left {
    border-bottom-left-radius: 0.375em !important;
}

.rounded-bottom-right-none {
    border-bottom-right-radius: 0 !important;
}




.left-side-bar-icon-menu .list-group-item {
    border: 0;
    background: transparent;
    padding: 15px;
}

.left-side-bar-icon-menu .list-group-item.active {
    margin-left: 5px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #0d6efd !important;
}

.left-side-bar-icon-menu.light .list-group-item.active {
    background-color: #fff !important;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.left-side-bar-icon-menu.dark .list-group-item.active {
    background-color: #1a1e21 !important;
    border-top: 1px solid #131317;
    border-left: 1px solid #131317;
    border-bottom: 1px solid #131317;
}

.left-side-bar-icon-menu .list-group-item:hover {
    background-color: #f1f1f1;
}

.left-side-bar-icon-menu.dark {
    background-color: #212529 !important;
    border-right: 1px solid #131317 !important;
}

.left-side-bar-icon-menu.light {
    background-color: transparent;
    border-right: 1px solid #ddd;
}

.left-side-bar-icon-menu {
    position: fixed;
    top: 56px;
    left:0px;
    height: 100%;
    width: 53px;
}

.nav-bar-logo {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 12px;
    width: 53px;
    height: 56px;
    position: fixed;
    top: 0px;
    left: 0px;
}

.nav-bar-logo.light {
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
}

.nav-bar-logo.dark {
    background-color: #212529;
    border-right: 1px solid #131317;
}

.left-side-bar.light {
    background-color: #fff;
    border-right: 1px solid #ddd;
}

.left-side-bar.dark {
    background-color: #1a1e21;
    border-right: 1px solid #131317;
}

.left-side-bar {
    position: fixed;
    top: 0px;
    left: 53px;
    height: 100%;
    width: 210px;
}

body.dark .left-menu-full {
    background-color: #212529 !important;
    border-right: 1px solid #495057 !important;
}

.icon-menu .list-group a, .icon-menu .list-group button {
    text-align: center;
    border-bottom:0;
    border-right: 0;
    background-color: transparent;
}

.icon-menu .list-group a.active {
    border:0;
}

.icon-menu {
    width: 50px !important;
    position: fixed;
    left: 0;
    top: 49px;
    height: 100%;
}

.left-sub-menu .list-group a {
    border-bottom:0;
    border-right: 0;
    background-color: transparent;
}

.left-sub-menu {
    position: fixed;
    left: 50px;
    top: 49px;
    height: 100%;
    width: 180px;
}

.left-menu-full {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 230px;
    background-color: #fbfbfb !important;
}


.admin-top-options-ns {
    margin-right: 0px;
    margin-top: 0px;
    padding-top: 20px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    position: fixed;
    left: 53px;
    top: 56px;
    right:0px;
    z-index: 1040;
}

.admin-main-body {
    margin-right: 0px;
    margin-left: 230px;
    margin-top: 0px;
}

.admin-top-options {
    margin-right: 0px;
    /*margin-left: 273px;*/
    margin-top: 0px;
    padding-top: 20px;
    position: fixed;
    left: 230px;
    top: 0px;
    right:0px;
    z-index: 1040;
}

.left-side-bar.dark .list-group-item-action {
    background-color: #1a1e21;
}

.left-side-bar .list-group-item-action {
    margin-top: 5px;
    border: 0;
}

.left-side-bar.dark .list-group-item-action.active {
    background-color: #0d6efd;
}

.left-side-bar .list-group-item-action.active, .left-side-bar .list-group-item-action:hover {
    margin-top: 5px !important;
    border-radius: 8px;
}


/*
.admin-main-body.no-program-sidebar {
    margin-right: 0px;
    margin-left: 53px;
    margin-top: 0px;
}
*/
.lined {
    overflow: hidden;
    text-align: center;
    color: #808080 !important;
}

.lined::before, .lined::after {
    background-color: #ddd;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.lined::before {
    right: 0.5em;
    margin-left: -50%;
}

.lined::after {
    left: 0.5em;
    margin-right: -50%;
}

.circle-lg {
    height: 8rem;
    width: 8rem;
}

.initials-lg {
    font-size: calc(10rem / 2.2); /* 50% of parent */
    line-height: 1;
    top: calc(7rem / 4); /* 25% of parent */
}

.circle-sm {
    height: 4rem;
    width: 4rem;
}

.initials-sm {
    font-size: calc(4rem / 2.2); /* 50% of parent */
    line-height: 1;
    top: calc(4rem / 4); /* 25% of parent */
}

.txt-ellipsis {
    text-overflow: ellipsis !important;
}

.circle-lg, .circle-sm {
    background-color: #ccc;
    border-radius: 50%;
    text-align: center;
}

.initials-lg, .initials-sm {
    position: relative;
}

.outer {position:relative}

.inner-max-h {
    overflow: auto;
    margin-left: 0px;
    height: calc(100vh - 179px) !important;
    width: auto;
}

.bhiBtE.active {
    --tab-icon-color: #232529;
    --tab-text-color: #232529;
    background-color: rgb(251, 251, 251);
    box-shadow: rgb(238, 239, 241) 0px 0px 0px 1px inset;
}

.inner {
    overflow: auto;
    margin-left: 0px;
    height: calc(100vh - 184px) !important;
    width: auto;
}

.w-40p {
    width: 40px !important;
}

.w-50p {
    width: 50px !important;
}

.w-60p {
    width: 60px !important;
}

.w-70p {
    width: 70px !important;
}

.w-90p {
    width: 90px !important;
}

#main-data-display {
    top: 119px;
    left: 0;
    right: 0px;
    position: relative;
}

#main-data-display.tabs {
    top: 150px !important;
}

table {
    table-layout: fixed;
    width: 100%;
    *margin-left: -100px;/*ie7*/
}

th {
    font-weight: 600 !important;

}

td, th {
    vertical-align: top;
    /*border-top: 1px solid #ccc;*/
    padding:10px;
    text-overflow: ellipsis;
    width:300px !important;
    overflow:hidden;
    border-left: 0 !important;
    font-size: 93%;
}

td.sm, th.sm {
    width: 120px !important;
}

td.md, th.md {
    width: 160px !important;
}

td.xs, th.xs {
    width: 60px !important;
}



#main-data-display.no-tabs {
    /*margin-top: 150px !important;*/
}

#main-data-display-sm {
    margin-top: 114px;
}


.main-side-nav .list-group-item-action:hover {
    background-color: #ddd !important;
}

.pb-2-5 {
    padding-bottom: 0.65rem !important;
}
.pt-2-5 {
    padding-top: 0.65rem !important;
}

.main-side-nav .list-group-item {
    border: none;
    background-color: transparent;
}

.bottom-side-nav {
    position: absolute;
    left:0;
    bottom:0;
    width: 250px;
}

.bottom-side-nav .list-group-item {
    border: none;
    background-color: transparent;
}

.th-stick-top-left {
    position: sticky;
    top:0px;
}

body.light .th-stick-top-left {
    border-right: 1px solid #ddd !important;
    box-shadow: inset -1px -1px 0 #ddd !important;
    background-color: #fafcff !important;
}

body.dark .th-stick-top-left {
    border-right: 1px solid #495057;
    box-shadow: inset -1px -1px 0 #495057 !important;
    background-color: #212529 !important;
}


body.light .th-stick-top {
    border-right: 1px solid #ddd !important;
    box-shadow: inset 0px -1px 0 #ddd !important;
    background-color: #fafcff !important;
}

body.dark .th-stick-top{
    background-color: #212529 !important;
    box-shadow: inset -1px -1px 0 #495057;
}

.th-stick-top {
    position: sticky;
    top:0px;
}

body.light .th-sticky {
    box-shadow: inset 0px -1px 0 #ddd;
}

.th-sticky {
    position: sticky;
    left:0px;
    top:0;
    z-index:999;
    width:300px !important;
    /*background-color: #f3f6fc !important;border-right: 1px solid #ddd;*/
}

.offcanvas-backdrop {
    z-index: 1050 !important;
}

.offcanvas {
    z-index: 1051 !important;
}

body.dark .td-sticky.text-bg-success {
    background-color: #051b11 !important;
    color: #75b798 !important;
}

body.light .td-sticky.text-bg-success {
    background-color: #eafaf1 !important;
    color: #0a3622 !important;
}

body.light .td-sticky {
    background-color: #fff !important;
    border-right: 1px solid #ddd;
    box-shadow: inset -1px 0 0px 0px #ddd;
}

body.dark .td-sticky {
    background-color: #212529 !important;
    border-right: 1px solid #495057;
    box-shadow: inset -1px 0 0px 0px #495057;
}

.td-sticky {
    position: sticky;
    left:0px;
    align-self: flex-start;
    text-overflow: ellipsis;
}


.display-7 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-8 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-9 {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.2;
}

.title-card-w-search {
    line-height: 1.4 !important;
}


.element-img {

}

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}
.admin-top-options .nav .nav-item a, .admin-top-options-ns .nav .nav-item a {
    border-radius:0;
    text-align: center;
}

.admin-top-options .nav a.active,.admin-top-options-ns .nav a.active{
    border-bottom: 2px solid #0d6efd !important;
    background-color: #fff;
    color: #0d6efd !important;
}

.admin-top-options .nav a.active .badge, .admin-top-options-ns  .nav a.active .badge {
    background-color: #0d6efd;
}

.layered-image, .faded-header {
    position: relative;
    width: 100%;
    height:125px;
    background-size: cover;
}

.layered-image:before {
    content: '';
    position: absolute;
    left: 0;
    bottom:0;
    background-image: linear-gradient(to bottom, transparent, white);
    opacity: 2.5;
    height:105px;
    width:100%;
}

.text-muted-lighter {
    --bs-text-opacity: 1;
    color: #99989f !important;
}

.text-muted-much-lighter {
    --bs-text-opacity: 1;
    color: #d3d3dc !important;
}

.a-little-smaller {
    font-size: 95%;
}

.bg-lightish {
    background-color: #f7f7f9 !important;
    color: #57565b !important;
}

.bg-lightish .active {
    background-color: #57565b !important;
    color: #fff !important;
}

.horizontal-list:after{content:'\00B7';padding-left:5px;padding-right:5px;color:#222;}

.vr-light {
    display: inline-block;
    align-self: stretch;
    width: var(--bs-border-width);
    min-height: 1em;
    background-color: #f2f2f2;
    opacity: 1;
}



/*
.avatar {
    position: relative;
    display: inline-flex;
}*/

.avatar.online::before {
    content: "";
    position: absolute;
    z-index: 10;
    display: block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: green;
    outline-style: solid;
    outline-width: 2px;
    outline-color: green;
    width: 10px;
    height: 10px;
    top: 2%;
    right: 7%;
}
/*
.avatar.placeholder > div {
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar > div {
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.text-neutral-content {
    --tw-text-opacity: 1;
    color: #fff;
}
.bg-neutral {
    --tw-bg-opacity: 1;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rounded-full {
    border-radius: 9999px;
}
.w-24 {
    width: 6rem;
}*/



.fs-x5 {
    font-size: 4.5rem !important;
    font-weight: normal;
}

.a-little-bit-smaller { font-size: 90%; }
.a-tiny-bit-smaller { font-size: 98%; }
.a-lot-smaller { font-size: 85%; }
.way-smaller { font-size: 80%; }
.a-bit-larger { font-size: 1.1em;}
.sorta-larger { font-size: 1.3em;}

#modal-loading-div {
    width: 100%;
    height: 100%;
    position: fixed;
    /*background-color: #f9f9f9;opacity: 0.7;*/
    --bs-backdrop-zindex: 1049;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.3;
    z-index:1055;
    float:left;
    top:0px;
    left:0px;
    backdrop-filter: blur(2px);
}
/*

.admin-table th, .clean-tbl thead th {
    background-color: #f9fafb !important;
    font-weight: 400;
    font-family: "InterRegular", serif !important;

    color: #222 !important;
    padding-bottom: 13px !important;
    padding-top: 15px !important;

}*/

.w-chk-ico {
    width: 20px !important;
}

.w-table-img {
    width: 50px !important;
    align-content: center;
    text-align: center;
}

.w-table-ico {
    width: 50px !important;
    align-content: center;
    text-align: center;
}


.linkme {
    cursor: pointer;
}


.adz {
    border-radius: 9999px;
}

.iwlg {
    width: 200px !important;
}
.ihlg {
    height: 200px !important;
}

.iwsm {
    width: 1.3rem !important;
}
.ihsm {
    height: 1.3rem !important;
}

img.avatar {
    object-fit: contain;
    height: auto;

    display: block;
    vertical-align: middle;
}

.w60 {
    width: 60px !important;
}

.w100 {
    width: 100px !important;
}

.w120 {
    width: 120px !important;
}

.w140 {
    width: 140px !important;
}

.w150 {
    width: 150px !important;
}

.w160 {
    width: 160px !important;
}

.p9 {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.bg-primary-light {
    background-color: #d2e6ff !important;
    border: 1px solid #5098ff !important;
    color: #0d6efd !important;
}

.hkNVzQ {
    --button-background-base: transparent;
    --button-background-hover: rgba(35, 37, 41, 0.05);
    --button-background-active: rgba(35, 37, 41, 0.05);
    margin: 0px;
    outline: none;
    border: medium;
    text-decoration: none;
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    opacity: 1;
    cursor: pointer;
    gap: 4px;
    padding: 4px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.lnOOyu {
    flex: 1 1 100%;
    background-color: rgb(244, 245, 246);
}
.bjjfBa {
    background: rgb(238, 239, 241);
    background-color: rgb(238, 239, 241);
    display: flex;
    flex-shrink: 0;
    height: 1px;
    width: 100%;
}

.active-border-bottom .active {
    border-bottom: 2px solid #1d4ed8 !important;
    border-radius: 0  !important;
    background-color: #fff !important;
    color: #1d4ed8 !important;
}

body.light .view-card-nav li.active a.nav-link {
    border: 1px solid #ddd;
    border-radius: 9px;
    background-color: #fff;
}

body.dark .view-card-nav li.active a.nav-link {
    border: 1px solid #424649;
    border-radius: 9px;
    color: #dee2e6 !important;
    background-color: #3b4046 !important;
}

body.light .split-line-mx {
    background-color: rgb(244, 245, 246);
    border-top: 1px solid #ddd;
}

body.dark .split-line-mx {
    background-color: #212529;
    border-top: 1px solid #424649;
}

.split-line-mx {
    display: inline-block;
    width: 2em;
    margin-left:8px;
}

body.light .section-arrow {
    background-color: #fff !important;
}

body.dark .section-arrow {
    background-color: #212529 !important;
}

.split-line-l {
    display: flex;
    flex-shrink: 0;
    height: 1px;
    width: 100%;
}

.fCuKak {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.bg-secondary-light {
    color: #41464b !important;
    background-color: #e2e3e5 !important;
    border: 1px solid #41464b !important;
}

body.light .bg-light-light {
    color: #41464b !important;
    background-color: #fcfcfc !important;
    border: 1px solid #ddd !important;
}

body.dark .bg-light-light {
    color: #dee2e6 !important;
    background-color: #30353a !important;
    border: 1px solid #434950 !important;
}

.bg-light-success {
    background-color: #3dbe6e !important;
    border: 1px solid #15803d !important;
}

.bg-light-danger {
    background-color: #da4754 !important;
    border: 1px solid #a20716 !important;
}

.bg-danger-light {
    background-color: #f8d7da !important;
    border: 1px solid #f5c2c7 !important;
    color: #dc3545 !important;
}

.bg-success-light {
    background-color: #f0fdf4;
    border: 1px solid #c4ecd2;
    color: #15803d !important;
}

td.light-purple {
    background-color: #faf5ff !important;
}

.bg-primary-light {
    background-color: #eff6ff;
    border: 1px solid #dae5fb;
    color: #1d4ed8 !important;
}


.btn-purple {
    color: #fff !important;
    background-color: #7e22ce !important;
    border: 1px solid #7e22ce !important;
}

.bg-purple-light {
    background-color: #faf5ff;
    border: 1px solid #eedffa;
    color: #7e22ce !important;
}

.bg-info-light {
    color: #055160 !important;
    background-color: #cff4fc;
    border: 1px solid #7db6c2 !important;
}

.bg-light-warning {
    background-color: #fff1c7 !important;
    border: 1px solid #fdbf07 !important;
}
.bg-warning-light {
    background-color: #fefce8;
    border: 1px solid #f4e6ba;
    color: #854d0e !important;
}


.admin-table tbody td {
    padding: 0.9rem 0.5rem;
}

.start-53 {
    left: 53px !important;
}

.avatar-th-w {
    width: 60px !important;
    align-content: center;
    text-align: center;
}

.hidden {
    display: none;
}


.shadow-base {
    box-shadow: 4px 4px 0 #000;
    border: 2px solid black;
}

.deep-shadow-base {
    box-shadow: 5px 5px 0 #000;
    border: 2px solid black !important;
}

.deep-shadow-base-bg-warning-light {
    box-shadow: 5px 5px 0 #000;
    border: 2px solid black !important;
    background-color: #fefce8 !important;
    color: #854d0e !important;
}

.brtl-offcanvas {
    position: fixed;
    bottom: 15px !important;
    top: 10px;
    box-shadow: 5px 5px 0 #000;
    border: 2px solid black !important;
    right: 0 !important;
    width: 500px;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
}


.dark-blue-text {
    color: #172b4d !important;
}

.fw-mediumer {
    font-weight: 600 !important
}

.admin-table tr.table-danger td {
    border-bottom: 1px solid #dee2e6 !important;
    background-color: #fef2f2 !important;
}

.admin-table tr.table-warning td {
    border-bottom: 1px solid #dee2e6 !important;
    background-color: #fefce8 !important;
}

.admin-table tr.table-success td {
    border-bottom: 1px solid #dee2e6 !important;
    background-color: #f0fdf4 !important;
}

body.light .bg-light-grey {
    background-color: #f8f8f8 !important;
}

body.dark .bg-light-grey {
    background-color: #30353a !important;
}

.w15p {
    width: 15% !important;
}

.w85p {
    width: 85% !important;
}


.saved-toast {
    width: 350px;
    max-width: 100%;
    font-size: .875rem;
    pointer-events: auto;
    background-color: rgba(255,255,255,.85);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    border-radius: .25rem;
}

/*
.active-card, .shadow-base-btn-active {
    transition-property: all;
    box-shadow: none;
    transform: translateX(4px) translateY(4px)  !important;
    transition-duration: .15s;
    border: 2px solid black;
}
*/
.shadow-base-btn, .shadow-base-btn:focus {
   /* box-shadow: 4px 4px 0 #000;*/
    border: 2px solid black !important;

    /*transition-property: all;
    transform: translateX(0px) translateY(0px)  !important;
    transition-duration: .15s;*/
}
/*
.shadow-base-btn:hover, .link-card:hover, .shadow-base-btn:active {
    transition-property: all;
    box-shadow: 0 0 0 #000;
    transform: translateX(4px) translateY(4px)  !important;
    transition-duration: .15s;
}
*/


.disabled, .disabled.text-muted {
    color: #727272 !important;
}


.disabled input, .disabled textarea {
    background-color: #f9f9f9; color: #727272 !important;
}

.toast {
    z-index: 1055;
}


.full-page-detail-view {

}


.form-select-xs {
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    padding-left: 0.5rem !important;
    font-size: 0.825rem !important;
}


tr.striked td { text-decoration: line-through; }


.stats-small canvas {
    position: absolute;
    bottom: 0px;
}

.circle-35-avatar {
    width: 37px;
    margin-top:0;
    height: 37px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.circle-40-avatar {
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.circle-150-avatar {
    width: 150px;
    height: 150px;
    padding:3px;
    background-color: #fff;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.circle-180-avatar {
    width: 180px;
    height: 180px;
    padding:3px;
    background-color: #fff;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.card-hover:hover {
    box-shadow: 0 0.5rem 1rem rgb(0,0,0,0.15) !important;
}


.trix-content .attachment--preview {
    width: 100%;
    text-align: center;
}
.trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%;
}
.trix-content img {
    max-width: 100%;
    height:100%;
}

.trix-content .attachment--preview {
    margin: 0.6em 0;
}

.trix-content  .attachment__caption { display: none;}

.dark-gradient {
    display: inline-block;
    color: white;
}


.from-purple-to-pink {
    background: linear-gradient(135deg, #a855f7, #ec4899);
}

.from-pink-to-purple {
    background: linear-gradient(135deg, #ec4899, #a855f7);
}

.from-blue-to-teal {
    background: linear-gradient(135deg, #007cf0, #00dfd8);
}

.from-orange-to-orange {
    background: linear-gradient(135deg, #f86f1a, #f14b3d);
}

.from-grey-to-grey {
    background: linear-gradient(135deg, #65748a, #6b7281);
}

.from-green-to-green {
    background: linear-gradient(135deg, #12ba7d, #21c461);
}

.card-hover:hover {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.from-light-orng-to-light-orng, .card-hover-orng:hover {
    background: linear-gradient(135deg, #fff9f2, #ffefdc);
}

.from-light-purple-to-light-purple {
    background: linear-gradient(125deg, #f0e8f8, #d5c6ee); /* Very light purple gradient */
}

.bg-dark-clr {
    background-color: rgba(35,35,35,0.7) !important;
}


.divider svg {
    background: 0 0 !important;
    /*height: 6vw;*/
}
svg {
    overflow: hidden;
    vertical-align: middle;
}

svg.bg-primary-alt * {
    fill: #fff;
}