.layout-menu-fixed .layout-navbar-full .layout-menu,
.layout-menu-fixed-offcanvas .layout-navbar-full .layout-menu {
  top: 64px !important;
}
.layout-page {
  padding-top: 64px !important;
}
.content-wrapper {
  padding-bottom: 54px !important;
}
/* Define Slide Down Animation */
@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply to Toast when it is shown */
#successToast.show {
    animation: slideInDown 0.5s ease-out forwards;
}

/* --- Data Table Header Input Styles --- */
div.dt-container div.dt-search input {
    height: 38px;
    width: 100%;
}
div.dt-container div.dt-search {
    width: 100%;
}
div.dt-container div.dt-length select {
    height: 38px;
}
div.dt-container div.dt-length,
div.dt-container div.dt-search {
    margin-block: 5px;
}
div.dt-container div.dt-length {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dt-length, .dt-search {
    opacity: 1;
    transition: opacity 0.3s ease;
}
.tap_view, .tap_publish {
    width: 20vw;
}
.tap_submited_by {
    width: 30vw;
}
.switch_width {
    width: 94%;
}
.switch_width_email {
    width: 97%;
}
.my-dark-theme {
    background-color: #ccc !important;
    color: #000 !important;
}
@media (max-width: 767px) {
    .dt-length, .dt-search {
        width: 95%;
    }
    div.dt-container div.dt-search {
        width: 90%;
    }
    .tap_view, .tap_publish, .tap_submited_by {
        width: 100%;
    }
    .switch_width {
        width: 90%;
    }
    .switch_width_email {
        width: 94%;
    }
}
@media (max-width: 425px) {
    .switch_width {
        width: 90%;
    }
    .switch_width_email {
        width: 89%;
    }
}

/* --- Dropzone Image Upload Styles --- */
.dz-box {
    border: 2px dashed #ccc;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    text-align: center;
    transition: border-color 0.3s ease;
    overflow: hidden;
    cursor: pointer;
}
.dz-box:hover {
    border-color: #999;
}
.image-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.image-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    transition: opacity 0.3s ease;
}
.image-wrapper .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 15px;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}
.image-wrapper:hover .overlay {
    opacity: 1;
}
.image-wrapper:hover img {
    opacity: 0.85;
}
.image-wrapper .btn {
    padding: 10px 30px;
    font-size: 14px;
    border-radius: 6px;
    opacity: 0.95;
}
.dz-logo,
.dz-favicon,
.dz-icon {
    margin-block: 2rem 0rem !important;
}
#logo-dropzone-image .dz-message::before,
#favicon-dropzone-image .dz-message::before,
#icon-dropzone-image .dz-message::before {
    inset-block-start: 1rem !important;
}

/* --- Utility Classes --- */
.header-elements {
    min-height: 155px;
}
.min-h-344 {
    min-height: 344px;
}
.min-h-445 {
    min-height: 445px;
}
.min-h-140,
.min-h-150 {
    min-height: 140px;
}

.app-brand-text { color: #CCC; }

.menu .app-brand {
 padding-inline: 20px !important; 
}

.tox .tox-edit-area::before, .tox .tox-textarea-wrap .tox-textarea:focus, .tox .tox-custom-editor:focus-within, .tox .tox-focusable-wrapper:focus, .tox .tox-listboxfield .tox-listbox--select:focus, .tox .tox-textarea-wrap:focus-within, .tox .tox-textarea:focus, .tox .tox-textfield:focus, .tox .tox-toolbar-textfield:focus {
    color: var(--bs-heading-color) !important;
    background-color: transparent !important;
    border-color: var(--bs-primary) !important;
    outline: 0 !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(var(--bs-primary-rgb), 0.4) !important;
}
.tox-editor-header {
    background-color: transparent !important;
    color: rgb(56, 69, 81) !important;
}

.tox .tox-button {
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-color: var(--bs-primary-contrast) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: var(--bs-primary-contrast) !important;
    --bs-btn-hover-bg: 
 color-mix(in sRGB, #000 10%, var(--bs-primary)) !important;
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg) !important;
    --bs-btn-active-color: var(--bs-primary-contrast) !important;
    --bs-btn-active-bg: 
 color-mix(in sRGB, #000 10%, var(--bs-primary)) !important;
    --bs-btn-active-border-color: var(--bs-btn-active-bg) !important;
    --bs-btn-box-shadow-rgb: var(--bs-primary-rgb) !important;
    --bs-btn-disabled-color: var(--bs-primary-contrast) !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
    --bs-btn-group-border-color: 
 color-mix(in sRGB, #000 10%, var(--bs-primary)) !important;
}

.tox .tox-button {
    background-color:var(--bs-primary) !important;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    border-color: var(--bs-primary) !important;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--bs-primary-contrast) !important;
    cursor: pointer;
}

.tox-button.tox-button--secondary {
  background-color: transparent !important;
  border: 1px solid #6c757d !important; 
  color: #6c757d !important;
  border-radius: 0.375rem;             
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  transition: all 0.2s ease-in-out;
}

.tox-button.tox-button--secondary:hover {
  background-color: #6c757d !important;
  color: #fff !important;
}

.tox-button.tox-button--secondary:focus,
.tox-button.tox-button--secondary:active {
  background-color: #545b62 !important;
  border-color: #545b62 !important;
  color: #fff !important;
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(108,117,125,.5);
}

.tox-toolbar__group .tox-tbtn {
  background-color: transparent !important;
  color: #fff !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tox-toolbar__group .tox-tbtn:hover {
  background-color: var(--bs-primary) !important; /* define in :root */
  color: #fff !important;
}

.tox-toolbar__group .tox-tbtn:focus,
.tox-toolbar__group .tox-tbtn:active {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

.tox .tox-tbtn--bespoke {
    background-color: #fff !important;
    border-radius: 0.375 rem !important;
    border: 1px solid #cfd2d5 !important;
    padding: 0.543rem 2.625rem 0.543rem 0.9375rem !important;
    color: #394552 !important;
}
.tox .tox-tbtn__select-chevron svg {
    color: #394552 !important;
}

[data-bs-theme="dark"] {
  
  .tox .tox-tbtn--bespoke {
    background-color: #2b2c40 !important;
    border-radius: 0.375 rem !important;
    border: 1px solid #545567 !important;
    padding: 0.543rem 2.625rem 0.543rem 0.9375rem !important;
    color: #d1d1de !important;
}
.tox .tox-tbtn__select-chevron svg {
    color: #d1d1de !important;
}
  
  .tox .tox-dialog,
  .tox .tox-dialog__header,
  .tox .tox-dialog__footer {
    background:#2b2c40 !important;
    color:#eee !important;
  }
  
.tox-tinymce { border: 1px solid #cfd2d5; }

  .tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea, .tox .tox-textarea-wrap .tox-textarea:focus, .tox .tox-textfield, .tox .tox-toolbar-textfield {
    background-color: #2b2c40 !important;
    border-color: var(--bs-primary) !important;
  }

  .tox .tox-menu,
  .tox .tox-collection .tox-collection--list {
    background-color: #2b2c40 !important;
    border-color: var(--bs-primary) !important;
  }
  
  
}

.tox-collection__item--active {
    background-color: var(--bs-primary) !important;
    color: #fff;
}

.tox-collection__item-label h1, .tox-collection__item-label h2, .tox-collection__item-label h3, .tox-collection__item-label h4, .tox-collection__item-label h5, .tox-collection__item-label h6, .tox-collection__item-label pre, .tox-collection__item-label p, .tox-collection__item--active { background: transparent !important; }

.tox-collection__item-label:hover, .tox-collection__item--active:hover, .tox-collection__item--active, .tox .tox-collection--list .tox-collection__item--enabled:not(.tox-collection__item--state-disabled) {
    background-color: var(--bs-primary) !important;
    color: #fff;
}

.tox .tox-edit-area::before {
  border-color: transparent !important;
}

.dropzone .image-wrapper:has(img) {
  background: #fff !important;
}

.CodeMirror-cursor {
  border-left: 2px solid var(--bs-primary, #0d6efd) !important;
}

.tox .tox-dialog__body-nav-item--active {
  border-bottom: 2px solid var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

/* --- SweetAlert2 Custom Title --- */
.swal2-container .swal2-modal.swal2-popup .swal2-title {
    margin-block: 0px !important;
    font-size: 24px !important;
    text-transform: uppercase;
    text-align: center;
    max-inline-size: 100%;
    overflow-wrap: break-word;
    font-weight: 600 !important;
    color: var(--bs-heading-color) !important;
}

div.dt-container div.dt-search label {
    display: none;
}

/* Force full width on screens 375px or smaller */
@media (max-width: 375px) {
    .mobile-full-width {
        width: 100%;
    }
}