body{font-weight: 400; font-family: var(--web-font); overflow: hidden !important; }

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

td a {white-space: nowrap;}

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

.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: 237px; height: 100%; background-color: #212529; padding: 1rem .8rem; border-right: 1px solid rgba(200, 200, 200, .2); color: var(--bs-light); position: relative;
}
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;min-width: 560px; overflow-x: auto;}

.bottom-pages {position: absolute; display: flex; bottom: 0; width: 100%; height: 52px; background-color: #000; left: 0; align-items: stretch;padding: .4rem;gap: .5rem;}
.bottom-pages > a {background-color: transparent; flex-grow: 1; align-items: center; display: inline-flex; justify-content: center; font-size: 1.25em;border-radius: .25rem;}
.bottom-pages > a.active, .bottom-pages > a:hover { background-color: var(--web-color); color: #000; }

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(--wa-text-color); }
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;}
.card.xcard {
    transition: .25s ease-out background-image; border: 1px solid #222}
.card.xcard:hover{background-image: linear-gradient(60deg, transparent, var(--web-color) 100%); background-blend-mode: color-burn;}

.user-photo {aspect-ratio: 1; border: 1px solid rgba(0, 0, 0, .2); width: 160px; height: 160px;position: relative;}
.user-photo img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.user-photo img[src=""]::before {content: "NO PHOTO"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);color: #333 ;width: 100%;text-align: center;background: #CCC;height: 100%;display: flex;align-items: center;justify-content: center;}

.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: 0; outline: 0px solid transparent;}
a.image-box:hover, a.selected-image-box{outline: 2px solid #fff;}
a.image-box > img {width: 100%; height: 100%; object-fit: cover; object-position: center;}


.seo-image{overflow: hidden; aspect-ratio: 40/21; border-radius: .5rem;}
.seo-image > img {width: 100%; height: 100%; object-fit: cover; object-position: center; max-height: 300px; }
.seo-image:empty{background-image: var(--vector-add-image); aspect-ratio: 2; background-position: center !important; background-repeat: no-repeat !important; background-size: 25%; background-color: rgba(255, 255, 255, .1);}

.wa-tooltip {z-index: 1090;}

.page-link {line-height: 1;}
hr {opacity: .15 !important;}

.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 { min-width: 25%; width: 300px; }
.w-flex-50 { width: 50%; }

#g_images {margin-top: 1.25rem;}
#g_images > #img_items {display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 1rem; max-height: 300px; overflow-y: auto;}
#g_images > #img_items > div {display: flex; gap: .8rem; align-items: center; width: 50%; border: 1px solid rgba(255, 255, 255, .15); }
#g_images img {object-fit: cover; width: 120px; height: 120px;}

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

@media (max-width: 768px) {
    #g_images > #img_items > div { width: 100% !important; }

    .border-end {border-right: 0 !important; }
    .border-start {border-left: 0 !important; }
    .w-flex-25 { min-width: 25%; width: 200px; }
    .w-flex-50 { width: 100%; }
}

.gallery-item {width: 100%; height: 160px; display: block; border: 0; outline: 0px solid transparent;position: relative;color: #fff;}
.gallery-item:hover .gallery-item-caption {opacity: 1;}
.gallery-item > img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.gallery-item-caption {font-size: .8rem;position: absolute;width: 100%;background: linear-gradient(transparent, rgba(0,0,0,.75));bottom: 0;padding: 1rem;line-height: 125%; opacity: 0; transition: .15s ease-in;}

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

.pages-list {min-height: 400px; overflow-y: auto;}
.pages-list div:not(.content) {margin-bottom: .1rem;}

#dropzone { border: 2px dashed rgba(200,200,200,.5); padding: 20px; text-align: center; height: 100px; cursor: pointer; margin-bottom: .5rem; border-radius: .5rem;} 
#dropzone:hover {border-color: #fff; }
#dropzone:before {content: "Glissez votre media ici"; font-size: 1.2rem; font-weight: 500; line-height: 3; opacity: .5;}
.dragover {background-color: rgba(177, 14, 14, 0.1); border-color: var(--web-color);}

.hover-effect:hover { background-color: rgba(0, 123, 255, 0.1); transition: background-color 0.2s ease; }
.folder-name {font-weight: 500; color: #333; }
.content { transition: max-height 0.3s ease; overflow: hidden; }
.folder-toggle { cursor: pointer; color: #6c757d; }

.box-image-preview { min-width: 64px; min-height: 64px; max-width: 200px; max-height: 200px; object-fit: contain; object-position: center; border: 1px solid rgba(200, 200, 200, .2)}


#Uploader > .upload-item {border: 1px solid #e3e5e8;width: calc(25% - .8rem);background-color: #f3f5f8;position: relative;/*! border-radius: .375rem; */overflow: hidden;position: relative;}
#Uploader.large > .upload-item {width: calc(50% - .5rem);}
#Uploader .typePreview { width: 100%;aspect-ratio: 1;position: relative;display: flex;align-items: center;}
#Uploader .-option > a{padding: 0.2rem;border-radius: .375rem;line-height: 0;background-color: #fff;-webkit-appearance: button;border: 1px solid rgba(0,0,0,.1);font-size: 90%;}
#Uploader .-option {position: absolute;bottom: .5rem;opacity: .5;transition: .25s ease;z-index: 1;flex-direction: row;transform: translateX(-50%);left: 50%;}

.typePreview > img {width: 100%;aspect-ratio: 1;object-fit: cover;max-width: 100%;object-position: center;max-height: 100%;}

.xmedia .typePreview:not(.image):empty:after {font-family: bootstrap-icons !important;font-size: 2.8rem;text-align: center;width: 100%;color: #bbc5d4;position: relative;top: -.6rem;}
.xmedia.-pdf .typePreview:not(.image):empty:after {content: "\F756";}
.xmedia.-doc .typePreview:not(.image):empty:after {content: "\F744";}
.xmedia.-image .typePreview:not(.image):empty:after {content: "\F36D";}
.xmedia.-excel .typePreview:not(.image):empty:after {content: "\F76A";}

#Uploader > .upload-item:hover .-option{opacity: 1;}
#Uploader {display: flex; flex-wrap: wrap; gap: 1rem;}