body {
    /*font-family: "Tajawal", sans-serif;*/
    font-family: "Baloo Bhaijaan 2", system-ui;
    overflow: hidden;
}

.num {
    font-family: 'Roboto Mono', monospace !important;
}

.me-show { display: unset !important; }
.me-hide { display: none !important; }

.d-grid-center {
    display: grid;
    place-content: center;
    place-items: center;
}

.page-content {
     height: calc(100vh - 150px);
     overflow-y: scroll;
}


.bx-fix { transform: translateY(1px); }
.bx-fix-0 { transform: translateY(0px); }
.bx-fix-2 { transform: translateY(2px); }
.bx-fix-3 { transform: translateY(3px); }

.dir-ltr {
    direction: ltr !important;
}

.empty-container {
    height: calc(100vh - 330px);
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.empty-container.max-h {
    height: calc(100vh - 280px);
}

.empty-container.max-h2 {
    height: calc(100vh - 360px);
}

.empty-container.max-h3 {
    height: calc(100vh - 370px);
}

.empty-container img {

    max-width: 350px;
    width: 80%;
    margin: 0 auto;
}

.empty-container .empty-title {

    font-size: 20px;
    font-weight: 300;
}

[theme="dark"] .filepond--panel-root{
    background-color: #111 !important;
}

.panel-loading-cpntainer {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: grid;
    place-content: center;
    display: none;
    z-index: 999 !important;

}

[data-bs-theme="dark"] .panel-loading-cpntainer {
    background-color: rgba(0, 0, 0, 0.9);
}
.panel-loading-cpntainer.show {
    display: grid !important;
}

/* Progrees Bar */

.me-progress{
    position:absolute;
    width:100%;
    left: 0;
    right: 0;
    top:0;
    height:5px;
    overflow-x: hidden;
  }

  .me-line{
    position:absolute;
    opacity: 0.4;
    background : transparent;
    width:150%;
    height:5px;
  }

  .me-subline{
    position:absolute;
    background: #1188ee;
    height:5px;
  }
  .me-inc{
    animation: increase 2s infinite;
  }
  .me-dec{
    animation: decrease 2s 0.5s infinite;
  }

  @keyframes increase {
     from { left: -5%; width: 5%; }
     to { left: 130%; width: 100%;}
  }
  @keyframes decrease {
     from { left: -80%; width: 80%; }
     to { left: 110%; width: 10%;}
  }


/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(farthest-side,#1188ee 94%,#0000) top/8px 8px no-repeat,
      conic-gradient(#0000 30%,#1188ee);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
}
@keyframes l13{
    100%{transform: rotate(1turn)}
}



/* FilePond */
.upload-component[size="lg"] [data-style-panel-layout="circle"]{
    width: 200px !important;
}
.upload-component[size="md"] [data-style-panel-layout="circle"]{
    width: 150px !important;
}

.upload-component[size="sm"] [data-style-panel-layout="circle"]{
    width: 100px !important;
}

.modal-backdrop {
    z-index: 109;
}
.modal {
    z-index: 110 !important;
}


.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: #efefef;
    border: 1px solid #ccc;
}

[lang="ar"] .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after{
    right: unset !important;
    left: 1.25rem !important;
}

[lang="en"] .is-delete {
   border-left: 3px solid red !important;
}

[lang="ar"] .is-delete {
    border-right: 3px solid red !important;
}



/* LOOOOOOOOOOOOOOOOOOOOOOOOOOk */

.lock-overlay {
    width: 100vw;
    height: 100vh;
    /*background-color: rgba(255, 255, 255, .5); */
    background-color: rgba(0 ,0 ,0, .6);
    position: fixed;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 999;
}

.lock-container {
    position: fixed;
    max-width: 500px;
    width: 100%;
    padding: 50px 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 1000;
    display: grid;
    place-content: center;
    border-radius: 20px;

}


.lock-input {
    display: block;
    width: 250px;
    margin: 20px auto !important;
    height: 55px;
    border: 0;
    border-radius: 140px;
    appearance: none;
    outline: none;
    padding: 10px 40px;
    text-align: center;
    border: 1px solid #ccc;
    color: #fff;
    font-size: 25px;
    font-weight: bolder;
    letter-spacing: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all ease-in-out .3s;

}


.lock-input::placeholder {
    font-size: 19px;
    letter-spacing: 10px;
    color: #fff;
    font-weight: 200;
}

.lock-input:focus {
    box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, .06);
    transition: all ease-in-out .3s;
}


.lock-loading {
    top: 0;
    display: grid;
    place-content: center;
    place-items: center;
    width: 250px;
    margin: 20px auto !important;
    height: 55px;
    border: 0;
    border-radius: 140px;
    appearance: none;
    outline: none;
    padding: 10px 40px;
    text-align: center;
    font-weight: bolder;
    letter-spacing: 10px;
    background-color: transparent;
    transition: all ease-in-out .3s;
}


.lock-loading span {
    display: block;
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
    border-radius: 50%;
    border-left-color: transparent ;
    border-top-color: transparent ;
    animation: loadspin 1s linear infinite;
}

.lock-container button {
    width: 50px;
    height: 50px;
    background-color: var(--bs-primary);
    margin: 0 auto;
    font-size: 20px;
    color: #fff;
    border-radius: 50%;
    appearance: none;
    outline: none;
    border: none;
    margin-top: 20px ;
    transition: all ease-in-out .3s;
}

.lock-container button:hover {
    box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, .06) , 0px 0px 0px 20px rgba(255, 255, 255, 0.1);
    transition: all ease-in-out .3s;
}

.lock-container button i {
    font-size: 20px;
    color: #fff;
    transform: translateY(3px);
}



.drawer-container{
    max-width: 4
    50px;
    width: 100%;
    transform: translateX(100%) !important;
    transition: all ease-in-out .4s;
}

[lang="ar"] .drawer-container{
    transform: translateX(-450px) !important;
}

.drawer-container.drawer-on{
    transform: translateX(0) !important;
    transition: all ease-in-out .4s;
}

.drawer-sm{
    max-width: 350px;
    transform: translateX(-350px);
}

.drawer-md{
    max-width: 450px;
    transform: translateX(-500px);

}

.drawer-lg{
    max-width: 600px;
    transform: translateX(-600px);
}

.drawer-overlayx {
    display: none;
}
.drawer-overlay.drawer-overlay-on{
    display: block;
}


[lang="ar"] .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove
{
    left: 5px;
}

.lang-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}


[dir="rtl"] .flatpickr-rContainer , [dir="rtl"] .flatpickr-months {
    direction: rtl !important;
}

[dir="rtl"] .flatpickr-months .flatpickr-next-month.flatpickr-prev-month, [dir="rtl"] .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month
{
    right: 1rem !important;
    left: unset !important;
    transform: rotate(180deg);
}

[dir="rtl"] .flatpickr-months .flatpickr-next-month.flatpickr-next-month, [dir="rtl"] .flatpickr-months .flatpickr-prev-month.flatpickr-next-month {
    left: 1rem !important;
    right: unset !important;
    transform: rotate(180deg);

}

.app-sidebar-navs-default .menu-title {
    margin-top: 5px;
}

.file-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding-top: 20px;
}

.file-item {
    height: 120px;
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.file-item.overx {
    border-color: green !important;
    cursor: copy; /* Cursor when dragging over drop area */
}

.file-item:hover , .file-item.selected {
    background-color: aliceblue !important;
    border: 1px solid transparent;
}

[theme="dark" ] .file-item:hover , [theme="dark" ] .file-item.selected {
    background-color: #333 !important;
    border-color: transparent;
}

.file-folder img {
    height: 70px;
}

.file-file img {
    height: 70px;
}

.file-file.file-img img{
    object-fit: contain; /* Maintain aspect ratio and cover the container */
    object-position: center; /* Center the image */
    width: calc(100% - 10px );
    margin: 0 5px;
}

.cursor {
    cursor: pointer !important;
}

.custom-menu {
    position: fixed !important;
    display: none;
    background-color: white;
    border: 1px solid #efefef;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.05);
    z-index: 1000;
    list-style: none;
    padding: 0px;
    border-radius: 5px;
    min-width: 150px;
    max-width: 250px;
    overflow: hidden;
}

[theme="dark"] .custom-menu {
    background-color: #1A2130 !important;
    border-color: transparent !important;
}

.custom-menu.show {
    display: block !important;
}
.custom-menu .custom-menu-list::nth-child(1)  {
    border-top-color: transparent !important ;
}
.custom-menu-list {
    display: block;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 15px;
    margin: 0;
    border-radius: 0px;
    color: #333;
    border-top: 1px solid #efefef;
}

[theme="dark"] .custom-menu-list {
    color: #F5F7F8;
    border-top: 1px solid #0000003e;
}

.custom-menu-list:hover {
    background-color: #efefef;
}

[theme="dark"] .custom-menu-list:hover {
    background-color: #2F3645;
}


.custom-menu-list .bx {
    font-size: 15px !important;
}


.custom-menu.theme2 {
    top: 40px !important;
    right: 40px !important;
}

.custom-menu.show2 {
    display: flex;
    min-width: 200px;
    flex-direction: column;
    position: absolute !important;
    top: 40px ;
    right: 40px;
    /*box-shadow: 0px 0px 15px rgba(0,0,0,0.1);*/

}

[dir="rtl"] .custom-menu.show2 {
    right: unset !important;
    left: 5px !important;
}



.file-body {
    min-height: 500px;
    padding-bottom: 200px;
}

.file-navigate {
    display: flex;
    background-color: var(--bs-body-bg);
}

.btn-file {
    width: 35px;
    height: 35px;
    border-radius: 6px;
    border: 1px solid #ccc;
    outline: none;
    display: grid;
    place-content: center;
    place-items: center;
    background-color: transparent;
    transition: all ease-in-out .2s;
}
[theme="dark" ] .btn-file { border-color: #333 !important; }

.btn-file .bx {
    font-size: 16px;
}
.btn-file:hover {
    background-color: #024CAA;
    color: #fff;
    border-color: #024CAA !important;
    transition: all ease-in-out .2s;
}

.file_info-img {
    object-fit: contain;
    object-position: center;
    padding: 0 10px;
    margin-bottom: 20px !important;
    box-shadow: 0 0 5px rgba(0 ,0 ,0, .04);
    border: 1px solid #efefef;
    border-radius: 10px;
    overflow: hidden;
}

.file_info-img img{
    width: 100%;
}

.file_info-video {
    width: 100%;
    box-shadow: 0 0 5px rgba(0 ,0 ,0, .04);
    border: 1px solid #efefef;
    border-radius: 10px;
    margin-bottom: 20px !important;
}

.file_info-audio {
    width: 100%;
    margin-bottom: 20px !important;
}

.file_info-file {
    text-align: center;
    margin-bottom: 20px !important;
}

.file_info-file img {
    height: 100px;
    margin: 0 auto;
}

[theme="dark"] .file_info-img , [theme="dark"] .file_info-video  {
    box-shadow: 0 0 5px rgba(0 ,0 ,0, .04);
    border: 1px solid transparent;
}





.ck-content pre {
    background-color: #373A40 !important;
    border-radius: 4px !important;
}

.ck-content pre code {
    text-shadow: none;
    color: #fff;
    font-size: 16px;
}

.ck.ck-editor__editabl pre {
    position: relative;
}

.ck.ck-editor__editable pre[data-language]:after {
    position: absolute;
    background-color: #151515 !important;
    padding: 2px 7px;
    color: #E4C59E !important;
    top: 0 !important;
    right: 0 !important;
    border-radius: 0px 0px 0px 10px;
}

.ck-powered-by-balloon {
    display: none !important;
}

.blog-panel-img {
    width: 100px;
    height: 80px;
    border-radius: 7px;
    overflow: hidden;

    background-image: var(--blog-img) ;

    background-position: center;
    background-repeat: no-repeat;
    background-clip: padding-box;
    background-size: cover;
}


 /* Galery Card */

 .gallery-cover  {
    background-image: var(--gallery-cover);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 2/1;
    border-radius: 10px;
  }


  .gallery-cover.galery-video{
    background-image: url(/_files/mime-type/video-cover.png) !important;
    border: 1px solid #e2e2e2;
  }


.bgg-gray {
    background-color: #F5F7F8;
}

[theme="dark"] .bgg-gray {
    background-color: #0F0E0E;
}

.portfolio-create-cover {
    width: 100%;
    aspect-ratio: 2/1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #efefef;
}


.portfolio-create-cover img
{
    object-fit: cover;
    object-position: center;
    width: 100%; /* Adjust as needed */
    height: 100%; /* Adjust as needed */

  }


  .uploader {
    position: absolute;
    top: 65px;
    left:0px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
  }


  /* Plyr */

  .volum-side {
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    display: none;
    place-items: center;
    place-content: center;
    color: #fff;
    font-weight: 800;
    text-align: center;
    font-size: 25px;
    border-radius: 100px;
    line-height: 1;
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .volum-side.show {
    display: grid;
  }