.page {
    width: 70%;
    margin: 0 auto;
}

.page-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.page-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.header a {
    color: #212529 !important;
    text-decoration: none;
}

    .header a:hover {
        text-decoration: underline;
    }

.page-header-offset {
    padding-top: 120px;
}

.footer a {
    color: #ffffff !important;
    text-decoration: none;
}

    .footer a:hover {
        text-decoration: underline;
    }

.nav-link {
    display: inline-block;
    padding: .5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
}

    .nav-link:hover,
    .nav-link:focus {
        color: #0a58ca;
        text-decoration: underline;
    }

    .nav-link:active {
        color: #0a53be;
    }

/* =====================================
         IMG ALIGNMENT
   ===================================== */

.img-wrap {
    display: block;
    padding: 5px;
    max-width: 100%;
    height: auto;
}

.img-box {
    border-radius: 6px;
    box-shadow: 0 0 4px #b7b7b7;
}

.img-l {
    float: left;
    margin: 0 15px 0 0;
}

.img-r {
    float: right;
    margin: 0 0 0 15px;
}

/* =====================================
         TEXT ALIGNMENT
   ===================================== */

.text-left  { text-align:left !important; }
.text-center{ text-align:center !important; }
.text-right { text-align:right !important; }
.text-decoration-none { text-decoration:none !important; }


/* =====================================
       GRID SYSTEM UTILITIES
   ===================================== */
.row    { display:flex; flex-wrap:wrap; width:100%; }

.col1  { width:100%; }
.col2  { width:50%; }
.col3  { width:33.3333%; }
.col4  { width:25%; }
.col5  { width:20%; }
.col6  { width:16.6667%; }
.col7  { width:14.2857%; }
.col8  { width:12.5%; }
.col9  { width:11.1111%; }
.col10 { width:10%; }
.col11 { width:9.0909%; }
.col12 { width:8.3333%; }


.col-right  { display:flex; justify-content:flex-end; }
.col-left   { display:flex; justify-content:flex-start; }
.col-center { display:flex; justify-content:center; }

/* =====================================
       WIDTH and HEIGHT UTILITIES
   ===================================== */

.w10  { width:10% !important; }
.w20  { width:20% !important; }
.w30  { width:30% !important; }
.w40  { width:40% !important; }
.w50  { width:50% !important; }
.w60  { width:60% !important; }
.w70  { width:70% !important; }
.w80  { width:80% !important; }
.w90  { width:90% !important; }
.w100 { width:100% !important; }
.wauto { width:auto !important; }

.h10  { height:10%  !important; }
.h20  { height:20% !important; }
.h30  { height:30% !important; }
.h40  { height:40% !important; }
.h50  { height:50% !important; }
.h60  { height:60% !important; }
.h70  { height:70% !important; }
.h80  { height:80% !important; }
.h90  { height:90% !important; }
.h100 { height:100% !important; }
.hauto { height:auto !important; }


/* =====================================
       FONT SIZE UTILITIES
   ===================================== */

.fs1 { font-size:1rem !important; }
.fs2 { font-size:1.25rem !important; }
.fs3 { font-size:1.5rem !important; }
.fs4 { font-size:1.75rem !important; }
.fs5 { font-size:2rem !important; }
.fs6 { font-size:2.5rem !important; }

.fsb1 { font-size:1rem !important;    font-weight:700 !important; }
.fsb2 { font-size:1.25rem !important; font-weight:700 !important; }
.fsb3 { font-size:1.5rem !important;  font-weight:700 !important; }
.fsb4 { font-size:1.75rem !important; font-weight:700 !important; }
.fsb5 { font-size:2rem !important;    font-weight:700 !important; }
.fsb6 { font-size:2.5rem !important;  font-weight:700 !important; }



/* =====================================
       FONT COLOR UTILITIES
   ===================================== */

.fc-white   { color:#ffffff !important; }
.fc-black   { color:#212529 !important; }
.fc-navy    { color:#0b1220 !important; }
.fc-gray    { color:#f8f9fa !important; }
.fc-soft    { color:#ececec !important; }
.fc-slate   { color:#495057 !important; }
.fc-muted   { color:#adb5bd !important; }
.fc-blue    { color:#0d6efd !important; }
.fc-ice     { color:#eef3f9 !important; }
.fc-cool    { color:#cbd5e1 !important; }
.fc-indigo { color:#6610f2 !important; }
.fc-violet { color:#6f42c1 !important; }
.fc-purple { color:#7952b3 !important; }
.fc-cyan   { color:#0dcaf0 !important; }
.fc-teal   { color:#20c997 !important; }
.fc-green  { color:#198754 !important; }
.fc-emerald{ color:#2fb380 !important; }
.fc-lime   { color:#84cc16 !important; }
.fc-yellow { color:#ffc107 !important; }
.fc-amber  { color:#ffb020 !important; }
.fc-orange { color:#fd7e14 !important; }
.fc-red    { color:#e40000 !important; }
.fc-rose   { color:#e11d48 !important; }
.fc-pink   { color:#d63384 !important; }
.fc-gold   { color:#ffb703 !important; }
.fc-silver { color:#9ca3af !important; }
.fc-royal   { color:#0A4F8A !important; }

/* =====================================
       BACKGROUND COLOR UTILITIES
   ===================================== */

.bg-white   { background-color:#ffffff !important; }
.bg-black   { background-color:#212529 !important; }
.bg-navy    { background-color:#0b1220 !important; }
.bg-gray    { background-color:#f8f9fa !important; }
.bg-soft    { background-color:#ececec !important; }
.bg-slate   { background-color:#495057 !important; }
.bg-muted   { background-color:#adb5bd !important; }
.bg-blue    { background-color:#0d6efd !important; }
.bg-ice     { background-color:#eef3f9 !important; }
.bg-cool    { background-color:#cbd5e1 !important; }
.bg-indigo  { background-color:#6610f2 !important; }
.bg-violet  { background-color:#6f42c1 !important; }
.bg-purple  { background-color:#7952b3 !important; }
.bg-cyan    { background-color:#0dcaf0 !important; }
.bg-teal    { background-color:#20c997 !important; }
.bg-green   { background-color:#198754 !important; }
.bg-emerald { background-color:#2fb380 !important; }
.bg-lime    { background-color:#84cc16 !important; }
.bg-yellow  { background-color:#ffc107 !important; }
.bg-amber   { background-color:#ffb020 !important; }
.bg-orange  { background-color:#fd7e14 !important; }
.bg-red     { background-color:#e40000 !important; }
.bg-rose    { background-color:#e11d48 !important; }
.bg-pink    { background-color:#d63384 !important; }
.bg-gold    { background-color:#ffb703 !important; }
.bg-silver  { background-color:#9ca3af !important; }
.bg-royal   { background-color:#0A4F8A !important; }

/* =====================================
       PADDING UTILITIES
   ===================================== */

.p0 {padding:0!important;}
.p1 {padding:.25rem!important;}
.p2 {padding:.5rem!important;}
.p3 {padding:1rem!important;}
.p4 {padding:1.5rem!important;}
.p5 {padding:3rem!important;}
.p6 {padding:4rem!important;}
.p7 {padding:5rem!important;}
.p8 {padding:6rem!important;}
.p9 {padding:8rem!important;}
.p10 {padding:10rem!important;}

.pa0  > * { padding:0!important; }
.pa1  > * { padding:.25rem!important; }
.pa2  > * { padding:.5rem!important; }
.pa3  > * { padding:1rem!important; }
.pa4  > * { padding:1.5rem!important; }
.pa5  > * { padding:3rem!important; }
.pa6  > * { padding:4rem!important; }
.pa7  > * { padding:5rem!important; }
.pa8  > * { padding:6rem!important; }
.pa9  > * { padding:8rem!important; }
.pa10 > * { padding:10rem!important; }

.pt1 > * {padding-top:0.125rem;}
.pt2 > * {padding-top:0.25rem;}
.pt3 > * {padding-top:0.375rem;}
.pt4 > * {padding-top:0.5rem;}
.pt5 > * {padding-top:0.75rem;}
.pt6 > * {padding-top:1rem;}
.pt7 > * {padding-top:1.25rem;}
.pt8 > * {padding-top:1.5rem;}
.pt9 > * {padding-top:2rem;}
.pt10 > * {padding-top:3rem;}


/* =====================================
       MARGIN UTILITIES
   ===================================== */

.m0 {margin:0!important;}
.m1 {margin:.25rem!important;}
.m2 {margin:.5rem!important;}
.m3 {margin:1rem!important;}
.m4 {margin:1.5rem!important;}
.m5 {margin:3rem!important;}
.m6 {margin:4rem!important;}
.m7 {margin:5rem!important;}
.m8 {margin:6rem!important;}
.m9 {margin:8rem!important;}
.m10 {margin:10rem!important;}

.ma0  > * { margin:0!important; }
.ma1  > * { margin:.25rem!important; }
.ma2  > * { margin:.5rem!important; }
.ma3  > * { margin:1rem!important; }
.ma4  > * { margin:1.5rem!important; }
.ma5  > * { margin:3rem!important; }
.ma6  > * { margin:4rem!important; }
.ma7  > * { margin:5rem!important; }
.ma8  > * { margin:6rem!important; }
.ma9  > * { margin:8rem!important; }
.ma10 > * { margin:10rem!important; }

.mt1 > * {margin-top:0.125rem;}
.mt2 > * {margin-top:0.25rem;}
.mt3 > * {margin-top:0.375rem;}
.mt4 > * {margin-top:0.5rem;}
.mt5 > * {margin-top:0.75rem;}
.mt6 > * {margin-top:1rem;}
.mt7 > * {margin-top:1.25rem;}
.mt8 > * {margin-top:1.5rem;}
.mt9 > * {margin-top:2rem;}
.mt10 > * {margin-top:3rem;}


/* =====================================
       BUTTON UTILITIES
   ===================================== */

.btn, .btn-xs {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: .375rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-xs {
    padding: .15rem .35rem;
    font-size: .70rem;
    line-height: 1.2;
    border-radius: .25rem;
}

.btn-sm { padding:.25rem .5rem; font-size:.85rem; }
.btn-lg { padding:.5rem 1rem; font-size:1.25rem; }
.btn-xl { padding:.75rem 1.5rem; font-size:1.5rem; }

a.btn, a.btn-xs { color: inherit !important; text-decoration: none !important; }


.btn-blue      { background:#0d6efd; border-color:#0d6efd; color:#fff; }
.btn-royal     { background:#0A4F8A; border-color:#0A4F8A; color:#fff; }
.btn-gold      { background:#0A4F8A; border-color:#ffb100; border:4px solid #ffb100; color:#fff; }
.btn-gray      { background:#6c757d; border-color:#6c757d; color:#fff; }
.btn-green     { background:#198754; border-color:#198754; color:#fff; }
.btn-red       { background:#dc3545; border-color:#dc3545; color:#fff; }
.btn-yellow    { background:#ffe200; border-color:#ffe200; color:#000; }
.btn-cyan      { background:#0dcaf0; border-color:#0dcaf0; color:#000; }
.btn-lightgray { background:#f8f9fa; border-color:#f8f9fa; color:#000; }
.btn-black     { background:#212529; border-color:#212529; color:#fff; }

.btn-blue:hover      { background:#0b5ed7; border-color:#0a58ca; color:#fff; }
.btn-royal:hover     { background:#0C5FA7; border-color:#0b5594; color:#fff; }
.btn-gold:hover      { background:#0C5FA7; border-color:#ffb100; border:4px solid #ffb100; color:#fff; }
.btn-gray:hover      { background:#5c636a; border-color:#565e64; color:#fff; }
.btn-green:hover     { background:#157347; border-color:#146c43; color:#fff; }
.btn-red:hover       { background:#bb2d3b; border-color:#b02a37; color:#fff; }
.btn-yellow:hover    { background:#ffca2c; border-color:#ffcd39; color:#000; }
.btn-cyan:hover      { background:#31d2f2; border-color:#25cff2; color:#000; }
.btn-lightgray:hover { background:#e2e6ea; border-color:#dae0e5; color:#000; }
.btn-black:hover     { background:#1c1f23; border-color:#1a1e21; color:#fff; }

a.btn-blue      { color:#fff !important; }
a.btn-royal     { color:#fff !important; }
a.btn-gold      { color:#fff !important; }
a.btn-gray      { color:#fff !important; }
a.btn-green     { color:#fff !important; }
a.btn-red       { color:#fff !important; }
a.btn-yellow    { color:#000 !important; }
a.btn-cyan      { color:#000 !important; }
a.btn-lightgray { color:#000 !important; }
a.btn-black     { color:#fff !important; }


.btn:focus, .btn-xs:focus,
a.btn:focus, a.btn-xs:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(13,110,253,0.55);
}

.btn:active, .btn-xs:active,
a.btn:active, a.btn-xs:active {
    transform: scale(0.97);
}

/* =====================================
       BOX UTILITIES
   ===================================== */

.box {
    border: 1px solid #ddd;
    border-radius: .375rem;
    background-color: #fff;
    overflow: hidden;
    width: 100%;

}

.box-header {
    padding: .75rem 1rem;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-header-badge {
    background-color: #0d6efd;
    color: #fff;
    padding: .25rem .5rem;
    border-radius: .375rem;
    font-size: .875rem;
    min-width: 24px;
    text-align: center;
}

.box-body {
    padding: 1rem;
}

.minround,
.minsquare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6px;
    height: 6px;
    background-color: currentColor;
}

.minround {
    border-radius: 50%;
}

.minsquare {
    border-radius: 2px;
}

/* =====================================
       UI ANIMATED UTILITIES
   ===================================== */

.ui {
    transition: filter .30s cubic-bezier(.4,0,.2,1);
}

    .ui:hover {
        filter: brightness(.95);
    }

/* =====================================
       BAR AND STATUS UTILITIES
   ===================================== */

.bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 1px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1;
    padding: .4em .8em;
    border-radius: 999px;
    white-space: nowrap;
    user-select: none;
    border: 1px solid rgba(0,0,0,.22);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}


.st {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .4em .8em;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
}

.st-new       { color:#fff; background-color:#e40000; }
.st-pending   { color:#fff; background-color:#14366c; }
.st-open      { color:#fff; background-color:#1178DF; }
.st-transfer  { color:#fff; background-color:#b400c2; }
.st-suspended { color:#333; background-color:#eeeeee; }
.st-complete  { color:#fff; background-color:#238900; }
.st-close     { color:#14366c; background-color:#ffea00; }
.st-active    { color:#fff; background-color:#238900; }
.st-passive   { color:#4b4b4b; background-color:#cecece; }

/* =====================================
       ALERT UTILITIES
   ===================================== */

.alert-box {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    border-radius: .375rem;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    margin-bottom: 1rem;
    width: 100%;
}

.alert-icon   { width:32px; height:32px; margin-right:.75rem; }
.alert-text   { font-size:1rem; color:#212529; }

.alert-info    { background-color:#91c9ff; }
.alert-success { background-color:#549e15; }
.alert-warning { background-color:#ffcc66; }
.alert-alert   { background-color:#ff7a85; }
.alert-delete  { background-color:#c2c2c2; }
.alert-flash   { background-color:#d1d1d1; }
.alert-nothing { background-color:#e9e9e9; }
.alert-under   { background-color:#d8d8d8; }

/* =====================================
       DIALOG CONFIRM UTILITIES
   ===================================== */

.dg-confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); display: none; justify-content: center; align-items: center; z-index: 99999; }
.dg-confirm-box { background: #fff; width: 350px; padding: 20px; border-radius: 8px; animation: fadeIn 0.2s ease-out; box-shadow: 0 0 20px rgba(0,0,0,0.25); }
@keyframes fadeIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dg-confirm-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; }
.dg-confirm-message { font-size: 14px; margin-bottom: 25px; }
.dg-confirm-footer { display: flex; justify-content: flex-end; gap: 10px; }
.dg-btn { padding: 7px 18px; border: 0; cursor: pointer; border-radius: 5px; font-size: 14px; }
.dg-btn-cancel { background: #ccc; color: #000; }
.dg-btn-ok { background: #007bff; color: #fff; }


/* =====================================
       EXTRA
   ===================================== */

.img-25{ width:25px; height:auto; }
.img-50{ width:50px; height:auto; }
.img-100{ width:100px; height:auto; }
.img-150{ width:150px; height:auto; }
.img-200{ width:200px; height:auto; }

/* =====================================
       RESPONSIVE DESIGN
   ===================================== */

@media screen and (max-width: 768px) {
    .page {
        width: 94%;
    }

    .col1,
    .col2,
    .col3,
    .col4,
    .col5,
    .col6,
    .col7,
    .col8,
    .col9,
    .col10,
    .col11,
    .col12 {
        width: 100% !important;
    }

    .btn {
        width: 100%;
    }

    .box-header {
        flex-direction: row;
        gap: 8px;
    }

    .box-body {
        padding: .75rem;
    }

    .row {
        display: block !important;
    }

    .page-header {
        position: static;
    }

    .page-header-offset {
        padding-top: 10px;
    }
}