.width-100{
    width: 100%!important;
}

.width-90{
    width: 90%!important;
}

.action-dropdown-menu-start{
    margin-right: 110px !important;
}

.datatable-design th,
.datatable-design td:not(.modal-element)
{
    padding-top: 3px!important;
    padding-bottom: 3px!important;
    padding-left: 3px!important;
    font-size: 12px!important;
    line-height: 12px!important;
}

.datatable-design th::after,
.datatable-design th::before {
    position: absolute!important;
    top: 1px!important;
    right: 5px!important;
}

.datatable-design .btn:not(.modal-element)
{
    padding-top: 0!important;
    padding-bottom: 0!important;
    font-size: 12px!important;
    line-height: 12px!important;
}

.datatable-design-0 th, .datatable-design-0 td{
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.datatable-design-0 .sorting_desc{
    padding-top: 0!important;
}

.datatable-design select:not(.modal-element),
.datatable-design input:not(.modal-element),
.dataTables_info,
.paginate_button,
.dataTables_length,
.dataTables_filter
{
    font-size: 12px!important;
    padding-top: 0!important;
}

.datatable-design .form-control-sm:not(.modal-element){
    padding-top: 0!important;
    padding-bottom: 0!important;
    font-size: 12px!important;
    line-height: 12px!important;
    height: 20px!important;
}

#order-table .dataTables_length, #order-table .dataTables_filter{
    /*display: none!important;*/
}

.datatable-design .first-input{
    float:left!important;
    width: calc( 100% - 20px )!important;
}
.datatable-design .second-input{
    float: left!important;
    width: 20px!important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../img/icons/filter_black.png") white no-repeat 50% !important;
    background-size: 10px 10px!important;
}

.page-link{
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}

.chosen-tr{
    background-color: darkgreen!important;
    color: white!important;
}

/* Tabs */

.harmony-tabs .nav-link{
    font-size: 12px!important;
}

.harmony-tabs .nav-link.active{
    background-color: darkgray;
    color: white;
}

.harmony-tabs .nav-link i{
    margin-left: 5px!important;
}

.harmony-tabs .dropdown-item{
    font-size: 12px!important;
}

/* Action Menu */

.action-menu .btn{
    padding-top: 2px!important;
    padding-bottom: 2px!important;
    font-size: 12px!important;
}

.livewire-table th, .livewire-table td{
    white-space: nowrap!important;
}

/* btn app

 */

.breadcrumb .btn-app{
    height: 50px!important;
}

.breadcrumb i{
    font-size: 15px!important;
}

/* Foundation interface --------------------------------------------------- */
:root {
    --foundation-primary: #2563eb;
    --foundation-primary-dark: #1d4ed8;
    --foundation-sidebar: #111827;
    --foundation-surface: #ffffff;
    --foundation-canvas: #f3f6fb;
    --foundation-border: #e2e8f0;
    --foundation-muted: #64748b;
    --foundation-radius: .65rem;
    --foundation-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

body { color: #1e293b; font-size: .9rem; }
.content-wrapper { background: var(--foundation-canvas); }
.main-header {
    min-height: 3.25rem;
    border-bottom: 1px solid var(--foundation-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.main-header .nav-link { color: #475569 !important; }

.main-sidebar { background: var(--foundation-sidebar) !important; }
.brand-link { min-height: 3.65rem; border-bottom-color: rgba(255,255,255,.1) !important; }
.brand-text { font-weight: 600 !important; letter-spacing: .02em; }
.user-panel { border-bottom-color: rgba(255,255,255,.1) !important; }
.nav-sidebar > .nav-item { margin: .12rem .45rem; }
.nav-sidebar .nav-link {
    border-radius: .45rem;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background: var(--foundation-primary) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
.sidebar-dark-primary .nav-sidebar .nav-link:hover { background: rgba(255,255,255,.08) !important; }
.nav-treeview {
    position: relative;
    margin: .2rem 0 .45rem 1.2rem;
    padding-left: .65rem;
}
.nav-treeview::before {
    content: "";
    position: absolute;
    left: 0;
    top: .25rem;
    bottom: .25rem;
    width: 1px;
    background: rgba(255,255,255,.17);
}
.nav-treeview > .nav-item > .nav-link { padding-left: .7rem !important; font-size: .84rem; }
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background: var(--foundation-primary) !important;
    font-weight: 600;
}

/* Compact sidebar: presentation only; AdminLTE behavior remains unchanged. */
.main-sidebar .brand-link {
    display: flex;
    align-items: center;
    min-height: 3.35rem;
    padding: .55rem .75rem;
}

.main-sidebar .brand-link .brand-image {
    width: 2rem;
    height: 2rem;
    margin: 0 .65rem 0 0;
    padding: .18rem;
    border: 1px solid rgba(147, 197, 253, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22), 0 0 0 2px rgba(255, 255, 255, .06);
    object-fit: contain;
}

.main-sidebar .brand-link .brand-text {
    min-width: 0;
    overflow: hidden;
    font-size: .94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.sidebar-collapse) .main-sidebar .brand-link,
.sidebar-collapse .main-sidebar:hover .brand-link {
    justify-content: center;
    padding-right: .75rem;
    padding-left: .75rem;
    text-align: center;
}

body:not(.sidebar-collapse) .main-sidebar .brand-link .brand-image,
.sidebar-collapse .main-sidebar:hover .brand-link .brand-image {
    flex: 0 0 auto;
    margin-right: .5rem;
    margin-left: 0;
}

.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
    justify-content: center;
    padding-right: 0;
    padding-left: 0;
}

.sidebar-collapse .main-sidebar:not(:hover) .brand-link .brand-image {
    float: none;
    position: absolute;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
}

.main-sidebar .user-panel {
    margin: .65rem 0 .45rem !important;
    padding: .55rem 1rem .65rem !important;
}

.main-sidebar .user-panel .image img {
    display: block;
    width: 1.85rem;
    height: 1.85rem;
    object-fit: cover;
}

.main-sidebar .user-panel .image {
    flex: 0 0 1.85rem;
    padding-left: 0;
}

.sidebar-collapse .main-sidebar:not(:hover) .user-panel {
    margin-right: .4rem !important;
    margin-left: .4rem !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.sidebar-collapse .main-sidebar:not(:hover) .user-panel > .d-flex {
    justify-content: center !important;
}

.sidebar-collapse .main-sidebar:not(:hover) .user-panel > .d-flex > .d-flex {
    width: auto !important;
}

.sidebar-collapse .main-sidebar:not(:hover) .user-panel .image {
    margin: 0 auto;
}

.sidebar-collapse .main-sidebar:not(:hover) .user-panel .info {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

.main-sidebar .user-panel .info {
    min-width: 0;
    padding: 0 0 0 .45rem;
}

.main-sidebar .user-panel .info > a {
    overflow: hidden;
    font-size: .84rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.main-sidebar .sidebar > nav.mt-2 {
    margin-top: .25rem !important;
}

.main-sidebar .nav-sidebar > .nav-item {
    margin: .08rem .4rem;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .38rem .6rem !important;
    border-radius: .42rem;
    font-size: .84rem;
}

.main-sidebar .nav-sidebar .nav-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem !important;
    margin-right: .45rem !important;
    font-size: .88rem !important;
    text-align: center;
}

.main-sidebar .nav-sidebar .nav-link > p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

body:not(.sidebar-collapse) .main-sidebar .nav-sidebar .nav-link > p,
.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p {
    overflow: visible;
    text-overflow: clip;
}

.main-sidebar .nav-sidebar .nav-link > .right {
    top: .68rem;
    right: .65rem;
}

.main-sidebar .nav-sidebar .nav-treeview {
    margin: .12rem 0 .3rem 1.15rem;
    padding: .12rem 0 .12rem .55rem;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item {
    margin: .05rem 0;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    min-height: 2rem;
    padding: .3rem .5rem !important;
    border-radius: .38rem;
    font-size: .79rem;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link::before {
    content: "";
    position: absolute;
    left: -.55rem;
    top: 50%;
    width: .45rem;
    height: 1px;
    background: rgba(255,255,255,.17);
}

.main-sidebar .nav-sidebar .nav-header {
    margin-top: .6rem;
    padding: .55rem .9rem .25rem;
    color: rgba(255,255,255,.42);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.main-sidebar .collapse .nav-link {
    min-height: 2rem;
    padding: .3rem .55rem !important;
    font-size: .78rem;
}

.card {
    border: 1px solid var(--foundation-border);
    border-radius: var(--foundation-radius);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
}
.card-header { padding: .7rem .9rem; border-bottom-color: var(--foundation-border); background: #fff; }
.card-title { font-size: .95rem; font-weight: 600; }
.card-body { padding: .9rem; }
.form-control, .custom-select {
    border-color: #cbd5e1;
    border-radius: .4rem;
}
.form-control:focus, .custom-select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .13);
}
.btn { border-radius: .4rem; font-weight: 600; }
.btn-primary, .bg-primary { background-color: var(--foundation-primary) !important; border-color: var(--foundation-primary) !important; }
.btn-primary:hover { background-color: var(--foundation-primary-dark) !important; border-color: var(--foundation-primary-dark) !important; }
.small-box { border-radius: var(--foundation-radius); box-shadow: var(--foundation-shadow); overflow: hidden; }
.table thead th { color: #475569; font-size: .76rem; letter-spacing: .02em; border-bottom-width: 1px; }
.modal-content { border: 0; border-radius: .75rem; box-shadow: 0 24px 60px rgba(15,23,42,.2); }

.dashboard-chart {
    position: relative;
    width: 100%;
    height: 220px;
}

.dashboard-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.dashboard-quick-links .card-body {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .75rem;
}

.dashboard-quick-links__label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding-right: .85rem;
    border-right: 1px solid var(--foundation-border);
    color: #334155;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.dashboard-quick-links__label i { color: #f59e0b; }

.dashboard-quick-links__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 0;
}

.dashboard-quick-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.15rem;
    padding: .38rem .65rem;
    border: 1px solid #dbe4f0;
    border-radius: .45rem;
    background: #f8fafc;
    color: #334155;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.dashboard-quick-link i {
    width: 1rem;
    color: var(--foundation-primary);
    text-align: center;
}

.dashboard-quick-link:hover,
.dashboard-quick-link:focus {
    border-color: #93c5fd;
    background: #eff6ff;
    color: var(--foundation-primary-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

.dashboard-chart-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    min-width: 0;
}

.dashboard-chart-actions small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-chart-actions .btn-tool {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: .4rem;
    background: #f8fafc;
    color: #64748b;
}

.dashboard-chart-actions .btn-tool:hover,
.dashboard-chart-actions .btn-tool:focus {
    background: #eff6ff;
    color: var(--foundation-primary);
}

@media (max-width: 767.98px) {
    .dashboard-quick-links .card-body { align-items: flex-start; }
    .dashboard-quick-links__label { padding-top: .45rem; }
    .dashboard-chart-actions small { display: none; }
}

@media (max-width: 575.98px) {
    .dashboard-quick-links .card-body { display: block; }
    .dashboard-quick-links__label {
        margin-bottom: .55rem;
        padding: 0;
        border-right: 0;
    }
    .dashboard-quick-link { flex: 1 1 calc(50% - .4rem); }
}

/* Boilerplate-style authentication portal */
.login-page { min-height: 100vh; background: var(--foundation-sidebar) !important; }
.foundation-login-page {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: linear-gradient(135deg, #1a5f96 0%, #164774 42%, #081b33 100%);
}
.foundation-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.04), transparent 25%), radial-gradient(circle at 82% 25%, rgba(147,197,253,.14), transparent 28%), radial-gradient(circle at 20% 85%, rgba(255,255,255,.05), transparent 30%);
    animation: foundationGlow 18s ease-in-out infinite alternate;
}
.foundation-login-page::after {
    content: "";
    position: fixed;
    right: -180px;
    top: -150px;
    width: 720px;
    height: 720px;
    border: 70px solid rgba(255,255,255,.05);
    border-radius: 50%;
    pointer-events: none;
    animation: foundationCircle 22s ease-in-out infinite alternate;
}
.foundation-curve {
    position: fixed;
    left: -150px;
    bottom: -190px;
    width: 620px;
    height: 620px;
    border-radius: 46% 54% 60% 40%;
    background: linear-gradient(135deg, #2779b5, #1a5f96, #0f2f55);
    opacity: .92;
    pointer-events: none;
    transform: rotate(-18deg);
    animation: foundationBlob 20s ease-in-out infinite alternate;
}
.foundation-login-wrapper { position: relative; z-index: 2; display: flex; align-items: center; width: 100%; min-height: 100vh; padding: 40px 24px; }
.foundation-login-container { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(380px,460px); align-items: center; gap: 72px; width: 100%; max-width: 1180px; margin: 0 auto; }
.foundation-brand-panel { padding: 20px; color: #fff; text-align: center; }
.foundation-brand-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 310px; height: 220px; margin: 0 auto 0; }
.foundation-brand-icon::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.18) 0%, rgba(191,219,254,.1) 38%, rgba(147,197,253,.045) 62%, transparent 82%); filter: blur(30px); pointer-events: none; }
.foundation-brand-logo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(255,255,255,.12)) drop-shadow(0 15px 24px rgba(0,0,0,.24)); }
.foundation-title { margin: 0; color: #fff; font-size: clamp(4rem,7vw,6.5rem); font-weight: 800; line-height: .95; letter-spacing: .08em; }
.foundation-subtitle-row { display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.foundation-subtitle-line { width: 82px; height: 1px; background: linear-gradient(90deg,transparent,#93c5fd); }
.foundation-subtitle-line:last-child { background: linear-gradient(90deg,#93c5fd,transparent); }
.foundation-subtitle { margin: 0 22px; color: #dbeafe; font-size: 1.15rem; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; white-space: nowrap; }
.foundation-divider { width: 230px; height: 2px; margin: 18px auto 0; border-radius: 999px; background: linear-gradient(90deg,transparent,#93c5fd,transparent); }
.foundation-system-name { max-width: 620px; margin: 34px auto 0; color: #eaf3ff; font-size: 1.25rem; font-weight: 500; line-height: 1.65; letter-spacing: .025em; }
.foundation-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 55px; }
.foundation-feature { color: #eaf3ff; }
.foundation-feature i { display: block; margin-bottom: 12px; color: #dbeafe; font-size: 2.25rem; }
.foundation-feature-title { font-size: 1rem; font-weight: 600; }
.foundation-feature-description { margin-top: 3px; font-size: .82rem; opacity: .85; }
.foundation-login-card { width: 100%; padding: 38px 36px 34px; border: 1px solid rgba(255,255,255,.45); border-radius: 28px; background: rgba(255,255,255,.975); box-shadow: 0 35px 90px rgba(0,0,0,.35), 0 8px 25px rgba(0,0,0,.12); backdrop-filter: blur(22px); transition: transform .25s ease, box-shadow .25s ease; }
.foundation-login-card:hover { transform: translateY(-1px); box-shadow: 0 42px 100px rgba(0,0,0,.38), 0 10px 28px rgba(0,0,0,.14); }
.foundation-mobile-brand { display: none; margin-bottom: 26px; text-align: center; }
.foundation-mobile-logo { display: block; width: 140px; max-width: 100%; height: 96px; margin: 0 auto 8px; object-fit: contain; }
.foundation-mobile-title { color: #0f172a; font-size: 2rem; font-weight: 800; letter-spacing: .05em; }
.foundation-card-heading { margin-bottom: 30px; text-align: center; }
.foundation-security-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 15px; border-radius: 18px; color: #2563a6; background: #eaf3ff; font-size: 1.45rem; }
.foundation-card-heading h1 { margin-bottom: 7px; color: #0f172a; font-size: 1.9rem; font-weight: 800; }
.foundation-card-heading p { margin: 0; color: #64748b; font-size: .95rem; }
.foundation-label { display: block; margin-bottom: 8px; color: #334155; font-size: .9rem; font-weight: 600; }
.foundation-input-group { position: relative; }
.foundation-input-icon { position: absolute; z-index: 5; left: 16px; top: 50%; color: #64748b; pointer-events: none; transform: translateY(-50%); }
.foundation-control { width: 100%; height: 52px; padding: 0 15px 0 46px; border: 1px solid #cbd5e1; border-radius: 13px; color: #0f172a; background: #fff; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.foundation-control::placeholder { color: #94a3b8; }
.foundation-control:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.foundation-control.is-invalid { border-color: #dc3545; }
.foundation-password-control { padding-right: 54px; }
.foundation-password-toggle { position: absolute; z-index: 6; right: 7px; top: 50%; width: 40px; height: 40px; border: 0; border-radius: 10px; color: #64748b; background: transparent; transform: translateY(-50%); }
.foundation-password-toggle:hover { color: #1e293b; background: #f1f5f9; }
.foundation-remember { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 5px 0 26px; }
.foundation-remember .form-check-label { color: #475569; font-size: .9rem; }
.foundation-authorized { color: #94a3b8; font-size: .78rem; white-space: nowrap; }
.foundation-security-link { color: #2563a6; font-size: .86rem; font-weight: 600; }
.foundation-submit { width: 100%; min-height: 52px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#2563a6,#0f4c81); font-size: .98rem; font-weight: 700; box-shadow: 0 10px 25px rgba(37,99,166,.22); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.foundation-submit:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 13px 30px rgba(37,99,166,.28); }
.foundation-footer { margin-top: 28px; padding: 14px 16px; border-radius: 14px; color: rgba(255,255,255,.72); background: linear-gradient(135deg,#081b33,#1a4670); text-align: center; font-size: .75rem; box-shadow: 0 8px 20px rgba(8,27,51,.14); }
.foundation-login-card .alert { border: 0; border-radius: 12px; font-size: .84rem; }

@keyframes foundationGlow { from { opacity: .75; } to { opacity: 1; } }
@keyframes foundationCircle { from { transform: translate3d(0,0,0); } to { transform: translate3d(-35px,25px,0); } }
@keyframes foundationBlob { from { transform: rotate(-18deg) translate3d(0,0,0); } to { transform: rotate(-12deg) translate3d(35px,-25px,0); } }

@media (max-width: 991.98px) {
    .foundation-login-wrapper { padding: 28px 20px; }
    .foundation-login-container { display: block; max-width: 460px; }
    .foundation-brand-panel { display: none; }
    .foundation-mobile-brand { display: block; }
    .foundation-mobile-logo { width: 220px; height: 150px; margin-bottom: 4px; }
    .foundation-mobile-title,
    .foundation-mobile-brand .small,
    .foundation-security-icon { display: none; }
    .foundation-card-heading { margin-top: 4px; }
}
@media (max-width: 575.98px) {
    .foundation-login-wrapper { align-items: flex-start; padding: 24px 15px; }
    .foundation-login-card { padding: 30px 22px; border-radius: 22px; }
    .foundation-card-heading { margin-bottom: 24px; }
    .foundation-card-heading h1 { font-size: 1.6rem; }
    .foundation-remember { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .foundation-login-page::before, .foundation-login-page::after, .foundation-curve { animation: none !important; }
    .foundation-login-card, .foundation-submit { transition: none !important; }
}