.form-control.is-invalid ~ .invalid-feedback {
    display: block !important;
}
button{
    margin-bottom: 0 !important;
}
.btn{
    font-size: 1rem;
}
.show > .btn.btn-default, .btn.btn-default.active, .btn.btn-default:active, .btn.btn-default:hover {
    color: #fff;
    background-color: var(--pt-accent, #344767);
    border-color: var(--pt-accent, #344767);
}
.form-control {
    font-size: 1rem;
}
.image-preview{
    max-width: 200px;
    height: auto;
    max-height: 200px;
    margin: 5px 0;
    border: 1px solid var(--pt-border-strong, #344767);
    border-radius: 5px;
    display: block;
}
/* Modals */
.modal{
    z-index: 9999;
}
.modal-backdrop.show  {
    z-index: 9998;
}
.navbar-vertical.navbar-expand-xs, .sidenav {
    z-index: 1300;
}
.modal .modal-footer button, .modal .modal-footer button:hover{
    background: var(--pt-cta-grad, transparent linear-gradient(310deg, #061221, #061222));
    color: #FFF;
}
.modal#deleteModal .modal-title{
    color: var(--pt-text, #061222) !important;
}
.modal#deleteModal .modal-body{
    color: var(--pt-text-muted, #344767);
}
.modal#deleteModal .modal-footer button{
    background: var(--pt-slate, #344767);
    color: #FFF;
}
.modal#deleteModal .modal-footer button#yes{
    background-color: var(--pt-danger, #061222);
    color: #FFF;
}

/* Menu  */
.navbar .nav-link, .navbar .navbar-brand {
    font-size: 1.1rem;
}
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]::after {
    margin-top: 2px;
}
.navbar-vertical .navbar-nav .nav-link > i {
    margin-top: 3px;
}
.g-sidenav-show .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link .nav-link-text{
    white-space: break-spaces;
}
.g-sidenav-show.g-sidenav-hidden .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link .nav-link-text{
    white-space: nowrap;
}
.navbar-vertical .navbar-nav .nav-link {
    align-items: flex-start;
}
.g-sidenav-show.g-sidenav-hidden .navbar-vertical.navbar-expand-xs {
    max-width: 6rem !important;
}
.g-sidenav-show .navbar-vertical.navbar-expand-xs,
.g-sidenav-show.g-sidenav-pinned .navbar-vertical.navbar-expand-xs {
    max-width: 20rem !important;
}


@media (min-width:1200px){
    .g-sidenav-show.g-sidenav-hidden .navbar-vertical:hover {
        max-width: 20rem !important;
    }
    .g-sidenav-hidden .navbar-vertical .nav-item .nav-link .sidenav-mini-icon {
        opacity: 0;
        width: 0;
    }
    .sidenav.fixed-start + .main-content {
        margin-left: 21rem;
    }
    .g-sidenav-hidden .navbar-vertical:hover.fixed-start + .main-content {
        margin-left: 21rem;
    }
}
@media (max-width: 1199.98px){
    .g-sidenav-show:not(.rtl) .sidenav {
        transform: translateX(-20.7rem);
    }
    .g-sidenav-show.g-sidenav-pinned .sidenav {
        transform: translateX(0);
    }
}
/* Menu */
.kt-form__actions button.btn-brand,
.kt-form__actions button{
    background: var(--pt-cta-grad, transparent linear-gradient(310deg, #061221, #061222));
    color: #FFF;
}
.kt-portlet .kt-portlet__head .kt-portlet__head-label .card-toolbar{
    padding-top: 0 !important;
}
.nav.nav-pills {
    background: transparent;
}
.nav.nav-pills .nav-link {
    background-color: var(--pt-chip, #e9ecef);
    color: var(--pt-text-muted, #3a416f);
    font-weight: 600;
}
.nav.nav-pills .nav-link.moving-tab {
    display: none;
}
.nav-pills .nav-item .nav-link:active, .nav-pills .nav-item .nav-link.active, .nav-pills .nav-item .nav-link.active:hover {
    background-color: var(--pt-accent, #344767);
    border-color: var(--pt-accent, #344767);
    color: #ffffff;
}
.menu-tabs .nav-pills .nav-item .nav-link{
    background-color: var(--pt-chip, #e9ecef);
    color: var(--pt-text, #344767) !important;
    padding-inline: 15px;
    min-height: 30px;
    display: flex;
    align-items: center;
}
.menu-tabs .nav-pills .nav-item .nav-link.active{
    background-color: var(--pt-accent, #344767);
    color: #ffffff !important;
    pointer-events: none;
}
.kt-portlet .kt-portlet__head .kt-portlet__head-toolbar .kt-portlet__head-wrapper a{
    display: inline-block;
}
.kt-portlet .kt-portlet__head .kt-portlet__head-toolbar .kt-portlet__head-wrapper a button{
    margin-bottom: 0 !important;
    transition: all 0.15s ease-in-out;
}
.kt-portlet .kt-portlet__head .kt-portlet__head-toolbar .kt-portlet__head-wrapper a button:hover{
    background-color: var(--pt-accent, #344767);
    color: #FFF;
}
.kt-subheader__toolbar button{
    background: var(--pt-cta-grad, transparent linear-gradient(310deg, #061221, #061222));
    color: #FFF;
}
.kt-subheader__toolbar a{
    background-color: var(--pt-accent, #344767);
    color: #ffffff;
    margin-bottom: 0;
}
.kt-subheader__toolbar a:hover{
    background-color: var(--pt-accent, #344767);
    color: #ffffff;
}
.kt-subheader__toolbar button:hover{
    background: var(--pt-cta-grad, transparent linear-gradient(310deg, #061221, #061222));
    color: #FFF;
}
/* Alert messages — styling handled centrally by premium-theme.css (§14)
   using brand tokens; legacy hardcoded gradients removed. */
/* Radio button*/
.radio-inline input{
    opacity: 1;
    position: relative;
    z-index: 99;
    transition: border 0s;
    border: 1px solid #cbd3da;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-inline-end: 10px
}
.radio-inline  input::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease-in-out;

}
.radio-inline input:checked::after{
    opacity: 1;
}
.radio-inline input:checked {
    background: var(--pt-accent, #061222);
    border: 0;
}
.radio-inline label{
    font-weight: 400;
}
.btn-toolbar button.btn-danger{
    background-color: var(--pt-accent, #061222);
    margin-bottom: 0;
}
/* Image buttons */
button.btn-success.selectMediaFromLibrary{
    background-color: var(--pt-accent, #344767);
    color: #ffffff;
    font-size: 12px;
}
.imageViewerContainer a.btn-warning{
    background-color: var(--pt-accent, #344767);
    color: #ffffff;
    font-size: 12px;
    margin-top: 10px;
    margin-right: 5px;
}
.imageViewerContainer a.btn-danger{
    background-color: var(--pt-danger, #061222);
    color: #FFF;
    font-size:12px;
    margin-top: 10px;
}
.kt-subheader{
    border-radius: 13px;
    padding: 10px 0;
    box-shadow: 0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06) !important;
}
.kt-subheader .kt-subheader__toolbar a.btn-label-brand{
    background-color: var(--pt-chip, #e9ecef);
    color: var(--pt-text-muted, #3a416f);
}
.kt-subheader .kt-subheader__toolbar a.btn-label-brand:hover{
    background-color: var(--pt-accent, #344767);
    color: #ffffff;
}
.kt-subheader .kt-subheader__main .kt-subheader__title{
    font-weight: 700;
}
.kt-subheader .kt-subheader__main .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link:hover {
    color: var(--pt-accent, #344767);
    cursor: default;
}
.kt-subheader .kt-subheader__main .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-home:hover > i {
    color: var(--pt-accent, #344767);
}
/* Checkbox checked */
.kt-checkbox.kt-checkbox--success.kt-checkbox--tick > input:checked ~ span::after,
.kt-checkbox.kt-checkbox--solid > span::after {
    border: solid #FFF;
}
.kt-checkbox.kt-checkbox--success.kt-checkbox--tick > input:checked ~ span,
.kt-checkbox.kt-checkbox--solid > input:checked ~ span{
    background: var(--pt-cta-grad, transparent linear-gradient(310deg, #061221, #061222)) !important;
}
.kt-checkbox-inline div.text-colored{
    margin-inline-start: 10px;
    color: var(--pt-accent, #061222);
}
.kt-checkbox-inline .text-colored label.kt-checkbox{
    padding-inline-start: 24px;
    color: var(--pt-accent, #061222);
}
.kt-checkbox-inline .text-colored label.kt-checkbox:last-child{
    padding-inline-end: 5px;
}
.form-label, label {
    font-size: 1rem;
    font-weight: 400;
}
/* Menu permissions view */
#changeRankMessage {
    color: var(--pt-text, #061222) !important;
}
.panel-footer button, .panel-footer button:hover, .panel-footer button:focus{
    background-color: var(--pt-accent, #344767) !important;
    color: #ffffff !important;
    margin-bottom: 0;
}
.add-button-row .text-success, .add-button-row .text-success::before{
    color: var(--pt-success, #344767) !important;
}
.text-danger{
    color: var(--pt-danger, #061222) !important;
}
.deletePer .text-danger{
    color: var(--pt-danger, #061222) !important;
}
/* datatable pagination button */
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--active
{
    background: var(--pt-accent, #061222) !important;

}
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--active:hover
{
    pointer-events: none;

}
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-info .kt-datatable__pager-size .btn.dropdown-toggle:focus,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-info .kt-datatable__pager-size .btn.dropdown-toggle:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-info .kt-datatable__pager-size.show > .btn.dropdown-toggle,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--first:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--prev:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--next:hover,
.kt-datatable > .kt-datatable__pager > .kt-datatable__pager-nav > li > .kt-datatable__pager-link.kt-datatable__pager-link--last:hover
{
    background: var(--pt-surface-hover, #e9ecef) !important;
    color: var(--pt-text-muted, #8392ab) !important;

}
.kt-datatable.kt-datatable--default > .kt-datatable__pager > .kt-datatable__pager-nav > li {
    border-radius: 50%;
}
.kt-datatable.kt-datatable--default > .kt-datatable__pager > .kt-datatable__pager-nav > li a{
    border-radius: 50% !important;
    border: 1px solid var(--pt-border, #dee2e6);
    color: var(--pt-text-muted, #8392ab) !important;
}
.kt-datatable.kt-datatable--default > .kt-datatable__pager > .kt-datatable__pager-nav > li a:hover{
    background: var(--pt-surface-hover, #e9ecef);
}
.kt-datatable.kt-datatable--default > .kt-datatable__pager > .kt-datatable__pager-info .kt-datatable__pager-size .btn.dropdown-toggle {
    color: var(--pt-text-muted, #8392ab) !important;
}
/* Footer fixed at the bottom */
main.main-content{
    min-height: 100%;
}
main.main-content > div.container-fluid{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}
/* Media library modal */

/* Analytics Tab  */
.analytics-tabs{
    border-radius: 1rem;
    padding: 0 calc(var(--bs-gutter-x)*0.5);;
}
.analytics-tabs .row{
    height: 50px;
}
.analytics-tabs .dashboard-tab{
    text-align: center;
    position: relative;
    cursor: pointer;
    z-index: 0;
    color: var(--pt-text, #344767);
    font-weight: 600;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
}
.analytics-tabs .dashboard-tab.active{
    color: #FFF;
    pointer-events: none;
}
.analytics-tabs .dashboard-tab::before{
    position: absolute;
    inset: 0;
    content: "";
    transform: scaleX(0);
    background: var(--pt-accent, #061222);
    transition: all 0.2s ease-in-out;
    transition-delay: 0ms;
    z-index: -1;
    border-radius: 1rem;
}
.analytics-tabs .dashboard-tab.active::before{
    transform: scaleX(1);
}
/* Analytics Tab  */

/* Tag Style*/
.tagify .tagify__tag {
    background-color: var(--pt-accent, #344767);
    color: #FFF;
    border-radius: 50px;
}
.tagify .tagify__tag div .tagify__tag-text {
    color: #FFF;
}
.tagify .tagify__tag div {
    padding-right: 0.8rem;
    padding-top: 5px;
    padding-bottom: 6px;
}
.tagify .tagify__tag .tagify__tag__removeBtn {
    color: #FFF;
}

/* Subsection Style */
.pageSections .kt-datatable, #adminMenuPermissionForm .table-responsive{
    overflow: hidden;
}
.pageSections button.btn-info{
    background-color: var(--pt-accent, #344767);
}
.pageSections button.btn-danger{
    background-color: var(--pt-danger, #061222);
}
.pageSections .kt-datatable__table .kt-datatable__cell[data-field="Actions"] span button{
    padding: 6px 8px 5px;
    border-radius: 5px;
}
.pageSections .kt-datatable__table button.togglePublish.btn-success{
    background-color: var(--pt-accent, #344767);
}
/* Generator — Add Field button */
#addFieldBtn {
    border: 1.5px solid var(--pt-accent, #344767);
    color: var(--pt-accent, #344767);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
#addFieldBtn:hover {
    background-color: var(--pt-accent, #344767);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Media upload action buttons — consistent 6px gap between Download and Delete */
[id$="ActionBtns"] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
/* Nullify the legacy inline margin-right on Download buttons so flex gap is the sole spacing */
.relation-modal-download-btn {
    margin-right: 0 !important;
}

/* ── Media Library Picker: z-index stacking when opened inside a relation tab modal ── */
/* The picker itself must stay above any relation tab modal (z-index 1050) */
.media-library-modal {
    z-index: 9999 !important;
}
/* When a second Bootstrap backdrop is created (for the picker on top of the relation tab modal),
   it should sit above the relation tab modal (1050) but below the picker (9999) */
.modal-backdrop + .modal-backdrop {
    z-index: 1055 !important;
}