/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Shared modal close control
   Keeps every Bootstrap modal close action centered and consistently positioned. */
.modal .modal-header {
    align-items: center;
}

.modal .modal-header .btn-close,
.modal .modal-header button.close {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 2.25rem;
    margin: 0 0 0 auto;
    padding: 0;
    place-items: center;
    align-self: center;
    position: relative;
    inset: auto;
    border: 1px solid #d8e5ed;
    border-radius: 0.625rem;
    background-color: #fff;
    background-position: center;
    background-size: 0.75rem;
    color: #526979;
    line-height: 1;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(18, 58, 90, 0.08);
    transform: none;
    transition: border-color 0.2s ease, background-color 0.2s ease,
        box-shadow 0.2s ease, transform 0.2s ease;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header .btn-close:focus,
.modal .modal-header .btn-close:active,
.modal .modal-header button.close:hover,
.modal .modal-header button.close:focus,
.modal .modal-header button.close:active {
    opacity: 1;
    transform: none;
}

.modal .modal-header .btn-close:hover,
.modal .modal-header button.close:hover {
    border-color: #b9d8e9;
    background-color: #eef7fc;
    color: #123a5a;
    box-shadow: 0 4px 12px rgba(18, 58, 90, 0.14);
}

.modal .modal-header .btn-close:focus,
.modal .modal-header button.close:focus {
    border-color: #65acd3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(8, 118, 185, 0.18);
}

html.dark-layout .modal .modal-header .btn-close,
html.dark-layout .modal .modal-header button.close {
    border-color: #46536f;
    background-color: #283046;
    color: #d0d2d6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark-layout .modal .modal-header .btn-close:hover,
html.dark-layout .modal .modal-header button.close:hover {
    border-color: #58718c;
    background-color: #343d55;
}

@media (max-width: 575.98px) {
    .modal .modal-header .btn-close,
    .modal .modal-header button.close {
        width: 2.5rem;
        height: 2.5rem;
        flex-basis: 2.5rem;
    }
}

/* Shared page-header back action
   Used only by Blade views explicitly marked with system-back-wrapper. */
.content-header .system-back-wrapper {
    display: flex;
    width: auto !important;
    min-height: 2.5rem;
    float: right !important;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 0 auto !important;
}

.content-header .system-back-wrapper .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
}

.content-header .system-back-wrapper .breadcrumb-item {
    display: flex;
    padding: 0;
}

.content-header .system-back-wrapper .breadcrumb-item::before {
    display: none !important;
    content: none !important;
}

.content-header .system-back-link {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    color: #123a5a !important;
    border: 1px solid #cbdde7;
    border-radius: 0.55rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(18, 58, 90, 0.06);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.content-header .system-back-link svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 0.95rem;
}

.content-header .system-back-link:hover,
.content-header .system-back-link:focus {
    color: #fff !important;
    border-color: #0876b9;
    background: #0876b9;
    box-shadow: 0 6px 16px rgba(8, 118, 185, 0.18);
    transform: translateY(-1px);
}

.content-header .system-back-link:focus-visible {
    outline: 3px solid rgba(8, 118, 185, 0.2);
    outline-offset: 2px;
}

html.dark-layout .content-header .system-back-link {
    color: #d0d2d6 !important;
    border-color: #46536f;
    background: #283046;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

html.dark-layout .content-header .system-back-link:hover,
html.dark-layout .content-header .system-back-link:focus {
    color: #fff !important;
    border-color: #0876b9;
    background: #0876b9;
}

@media (max-width: 575.98px) {
    .content-header .system-back-wrapper {
        min-height: 2.35rem;
    }

    .content-header .system-back-link {
        min-height: 2.35rem;
        padding: 0.5rem 0.75rem;
    }
}