body{font-weight: 400; min-width: 360px; font-family: "Ubuntu Sans", -apple-system, sans-serif; }
.form-group {margin-bottom: .8rem;}

.codex-editor ::selection {color: #212529;}

._empty:empty{width: 80%; margin: auto;background-color: transparent !important; min-height: 300px !important; display: block !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 120px !important;}
._empty:empty:before {display: block;content: "...";text-align: center;position: relative;top: 160px;font-size: 5rem;font-weight: 700;text-shadow: 0 0 1px #fff;max-width: 400px;margin: auto;line-height: 0;opacity: .2;}

._empty.mini:empty{min-height: 156px !important; background-size: 100px !important;}
._empty.mini:empty:before{font-size: 3rem; top: 136px;}

.page-title {display: flex; justify-content: space-between; align-items: center; gap: 2rem;}

.nav-link {border-radius: 0 !important;}

main { display: flex; background-color: blue; height: 100vh; width: 100%;}
main > #navigation {
    width: 30%; min-width: 276px; max-width: 300px; height: 100%; background-color: #212529; padding: 1rem .8rem; border-right: 1px solid rgba(200, 200, 200, .2); color: var(--bs-light);
}
main > #pageContent { display: flex; flex-direction: column; height: 100%; width: 70%; flex-grow: 1;}
main > #pageContent #appHeader {height: 60px; background-color: #212529; width: 100%; display: flex; flex: 0 0 auto; align-items: center; border-bottom: 1px solid rgba(200, 200, 200, .2);}
main > #pageContent #appContent {flex: 0 1 auto; background-color: #fff; overflow-y: auto; width: 100%; flex-grow: 1; background-color: #000;}

.avatar {aspect-ratio: 1; border-radius: 25%; border: 1px solid rgba(200, 200, 200, .5); background-color: rgba(0,0,0,.25); display: inline-block; vertical-align: middle; }

li a {white-space: nowrap;}

.userstable_info {font-size: .8rem;}

main > #navigation ul { list-style: none; padding: 0; margin: 0; }
main > #navigation ul li { margin-bottom: .3rem; }
main > #navigation ul li a { display: block; padding: .25rem .8rem; border-radius: 5px; color: var(--bs-light); text-decoration: none; }
main > #navigation ul li a:hover, main > #navigation ul li.active a { background-color: var(--bs-primary); color: var(--bs-light); }
main > #navigation ul li a span.bi { font-size: 1.2rem; margin-right: .5rem;}

#editorjs {font-weight: 400;}
.daterangepicker, .codex-editor, .choices__item, .choices__input {color: #212529; font-weight: 400;}

.sub-category::before {content: "\F132"; font-family: bootstrap-icons !important; display: inline-block; position: absolute; left: 1rem; }
.sub-category {padding-left: 1.5rem;}

.cropit-preview {background-color: transparent; border-radius: 0 !important; background-size: cover; outline: 1px solid rgba(255, 255, 255, .1); overflow: hidden; margin-top: 7px; width: 250px; height: 250px; }
.profilepic .cropit-preview-image-container {border-radius: 400px !important;overflow: hidden;border: 2px dashed rgba(255, 255, 255, 0.4);z-index: 2;}
.cropit-preview-image{position: relative; z-index: 1;}
.cropit-preview-image-container{cursor: move !important;}
.cropit-preview-background-container {z-index: -1 !important;}

.offcanvas { z-index: 1081;  }
.offcanvas-backdrop { z-index: 1080; }
.offcanvas.offcanvas-end, .offcanvas.offcanvas-start {width: 480px; min-width: 320px;}
.offcanvas.offcanvas-bottom {height: auto !important;min-height: 20vh;border-top: 0;max-height: 85%;}
.offcanvas.offcanvas-bottom .offcanvas-header {background-color: transparent;}

a.image-box {width: 100%; aspect-ratio: 1; display: block; border: 2px solid transparent}
a.image-box:hover{border-color: #fff;}
a.image-box > img {width: 100%; height: 100%; object-fit: cover; object-position: center;}


#previewImage{overflow: hidden; aspect-ratio: 40/21; border-radius: .5rem;}
#previewImage > img {width: 100%; height: 100%; object-fit: cover; object-position: center; max-height: 300px;}
#previewImage:empty{background-color: #111; aspect-ratio: 3; }

.page-link {line-height: 1;}


.offcanvas-backdrop.fade { background: rgba(0,0,0,.65); opacity: 1 !important; }
.offcanvas-backdrop {backdrop-filter: blur(2px);}

.offcanvas-md { width: 400px; }
.offcanvas-lg { width: 600px; }
.offcanvas-xl { width: 800px; }

.w-flex-25 { width: 25%; }
.w-flex-50 { width: 50%; }

@media (max-width: 576px) {
    .offcanvas-md { width: 100%; }
    .offcanvas.offcanvas-end {width: 100% !important}

}

@media (max-width: 768px) {
    .border-end {border-right: 0 !important; }

    .w-flex-25 { width: 75%; }
    .w-flex-50 { width: 100%; }
}


#cssEditor { height: 300px; border: 1px solid #ccc; }
a {text-decoration: none; white-space: nowrap;}
a.link {text-decoration: underline;}

.char-counter {position: relative; margin-left: .5rem;}
.char-counter > div { position: absolute; z-index: 99; font-size: 13px !important; opacity: 1; background: linear-gradient(#212529, rgba(0, 0, 0, .85)); line-height: 100%; padding: 4px .5rem 4px .5rem; border-radius: 0 0rem .5rem .5rem; display: inline-block; box-shadow: 0 2px 2px 0 rgba(0,0,0,.15) }

.dt-search {margin-bottom: .5rem;}