.space-x-1>*:not(:first-child) {
    margin-left: 0.25rem !important;
}

.space-x-2>*:not(:first-child) {
    margin-left: 0.5rem !important;
}

.space-x-3>*:not(:first-child) {
    margin-left: 0.75rem !important;
}

.space-x-4>*:not(:first-child) {
    margin-left: 1rem !important;
}

.space-x-5>*:not(:first-child) {
    margin-left: 1.25rem !important;
}

.space-x-6>*:not(:first-child) {
    margin-left: 1.5rem !important;
}

.space-x-7>*:not(:first-child) {
    margin-left: 1.75rem !important;
}

.space-x-8>*:not(:first-child) {
    margin-left: 2rem !important;
}

.space-y-1>*:not(:first-child) {
    margin-top: 0.25rem !important;
}

.space-y-2>*:not(:first-child) {
    margin-top: 0.5rem !important;
}

.space-y-3>*:not(:first-child) {
    margin-top: 0.75rem !important;
}

.space-y-4>*:not(:first-child) {
    margin-top: 1rem !important;
}

.space-y-5>*:not(:first-child) {
    margin-top: 1.25rem !important;
}

.space-y-6>*:not(:first-child) {
    margin-top: 1.5rem !important;
}

.space-y-7>*:not(:first-child) {
    margin-top: 1.75rem !important;
}

.space-y-8>*:not(:first-child) {
    margin-top: 2rem !important;
}

/* ------------------------------------------------------------------------ */
.mw-200 {
    max-width: 200px;
}

.mw-300 {
    max-width: 300px;
}

.mw-400 {
    max-width: 400px;
}

.mw-500 {
    max-width: 500px;
}

.mw-600 {
    max-width: 600px;
}

.mw-700 {
    max-width: 700px;
}

.mw-800 {
    max-width: 800px;
}

.mw-900 {
    max-width: 900px;
}

.mw-1000 {
    max-width: 1000px;
}

.mw-1200 {
    max-width: 1200px;
}

.mw-1400 {
    max-width: 1400px;
}

.hidden-container{
    display: none;
}
/* ========== for FUI home page ================================================= */
html {
    overflow-y: auto;
    font-family: Roboto, sans-serif;
}

b {
    font-weight: 500;
}

.wrs_editor .wrs_tickContainer {
    display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* ================================================================================================= */
.v-list-item__spacer{
    width: 10px !important;
}

.v-btn {
    font-weight: 400;
}

.v-input--density-compact{
    --v-input-control-height:36px;
    --v-input-padding-top: 6px;
}

.v-input--density-compact .v-field--no-label, .v-input--density-compact .v-field--single-line, .v-input--density-compact .v-field--variant-outlined {
    --v-field-padding-bottom: 6px;
}

.v-alert--density-compact {
    padding-bottom: 6px;
    padding-top: 6px;
}

.v-textarea .v-field__input {
    height: auto;
}

.v-container {
    padding: 12px;
}

/* ========================= grid ======================================================================== */

.v-container.grid-list-none .v-row .v-col {
    padding: 0px
}

.v-container.grid-list-none .v-row:only-child {
    margin: 0px
}

.v-container.grid-list-none .v-row:not(:only-child) {
    margin: auto 0px
}

.v-container.grid-list-none :not(:only-child) .v-row:first-child {
    margin-top: 0px
}

.v-container.grid-list-none :not(:only-child) .v-row:last-child {
    margin-bottom: 0px
}

.v-container.grid-list-xs .v-row .v-col {
    padding: 1px
}

.v-container.grid-list-xs .v-row:only-child {
    margin: -1px
}

.v-container.grid-list-xs .v-row:not(:only-child) {
    margin: auto -1px
}

.v-container.grid-list-xs :not(:only-child) .v-row:first-child {
    margin-top: -1px
}

.v-container.grid-list-xs :not(:only-child) .v-row:last-child {
    margin-bottom: -1px
}

.v-container.grid-list-sm .v-row .v-col {
    padding: 2px
}

.v-container.grid-list-sm .v-row:only-child {
    margin: -2px
}

.v-container.grid-list-sm .v-row:not(:only-child) {
    margin: auto -2px
}

.v-container.grid-list-sm :not(:only-child) .v-row:first-child {
    margin-top: -2px
}

.v-container.grid-list-sm :not(:only-child) .v-row:last-child {
    margin-bottom: -2px
}

.v-container.grid-list-md .v-row .v-col {
    padding: 4px
}

.v-container.grid-list-md .v-row:only-child {
    margin: -4px
}

.v-container.grid-list-md .v-row:not(:only-child) {
    margin: auto -4px
}

.v-container.grid-list-md :not(:only-child) .v-row:first-child {
    margin-top: -4px
}

.v-container.grid-list-md :not(:only-child) .v-row:last-child {
    margin-bottom: -4px
}

.v-container.grid-list-lg .v-row .v-col {
    padding: 8px
}

.v-container.grid-list-lg .v-row:only-child {
    margin: -8px
}

.v-container.grid-list-lg .v-row:not(:only-child) {
    margin: auto -8px
}

.v-container.grid-list-lg :not(:only-child) .v-row:first-child {
    margin-top: -8px
}

.v-container.grid-list-lg :not(:only-child) .v-row:last-child {
    margin-bottom: -8px
}

.v-container.grid-list-xl .v-row .v-col {
    padding: 12px
}

.v-container.grid-list-xl .v-row:only-child {
    margin: -12px
}

.v-container.grid-list-xl .v-row:not(:only-child) {
    margin: auto -12px
}

.v-container.grid-list-xl :not(:only-child) .v-row:first-child {
    margin-top: -12px
}

.v-container.grid-list-xl :not(:only-child) .v-row:last-child {
    margin-bottom: -12px
}

/* ----------------------------------------------------------------- */
.grow {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: content;
}

.shrink {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: content;
}

/* ================================================================================================= */
/* json ace_editor  */

.ace_editor.ace-jsoneditor {
    font-size: 1em !important;
    line-height: 1.5em !important
}

.jsoneditor-poweredBy {
    display: none;
}


/* jconfirm  */
@media only screen and (min-width: 600px) {
    .jconfirm .jconfirm-box {
        min-width: 460px;
        max-width: 500px;
    }
}

.jconfirm .jconfirm-box {
    font-family: Roboto, sans-serif !important;
    border-top: 0 !important;
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
    font-weight: 400 !important;
    font-size: .9rem !important;
}

.jconfirm .jconfirm-box-container {
    margin: auto;
}

.jconfirm .jconfirm-box .jconfirm-buttons>button {
    margin-left: 10px !important;
    margin-right: 10px !important;

}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
    font-size: 2.9em !important;
    margin: 0 !important;
}

.jconfirm .jconfirm-box div.jconfirm-title-c {
    display: grid;
    line-height: inherit;
    text-align: center;
    font-size: 1.1rem !important;
}

.jconfirm .jconfirm-box .jconfirm-content-pane .jconfirm-content,
.jconfirm .jconfirm-box .jconfirm-buttons{
    text-align: center;
    float: inherit;
}


/* ============================================================== */

.ck.ck-editor {
    overflow-x: hidden;
    font-size: initial;
}

/* =================================================================================================== */
.tTable {
    border-top: thin solid rgba(0, 0, 0, .12) !important;
    border-radius: 0;
}

.tTable .divider {
    border-right: 1px solid rgba(0, 0, 0, .12);
}


/* ===================================================================================================
=============== scrollbar Style ============================================================================
===================================================================================================  */
/* Thanh cuộn mảnh, ẩn khi không hover, hiện dần khi rê chuột vào (giống #content-left-box của ME).
   Màu thumb đi qua biến --fp-scrollbar; phải đăng ký @property thì biến mới transition được
   (biến chưa đăng ký chỉ nhảy giá trị, không có hiệu ứng mờ dần). */
@property --fp-scrollbar {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

.fpScrollbar, .v-navigation-drawer__content {
    overflow-y: auto;
    --fp-scrollbar: transparent;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--fp-scrollbar) transparent;
    /* CHỈ transition biến. Thêm "scrollbar-color" vào đây thì mỗi khung hình biến đổi màu lại khởi động lại
       transition của scrollbar-color từ đầu ⇒ màu đổi từng nấc, chậm gấp 2–3 lần (đo trên lhu-docs). */
    transition: --fp-scrollbar 600ms ease;
}

.fpScrollbar:hover, .v-navigation-drawer__content:hover {
    --fp-scrollbar: rgba(0, 0, 0, 0.25);
    transition: --fp-scrollbar 300ms ease;
}

/* Chrome/Edge/Safari cũ. Từ Chrome 121, đã khai scrollbar-color thì Chrome BỎ QUA ::-webkit-scrollbar
   ⇒ thanh thực tế rộng ~10px (mức "thin" của trình duyệt), không phải 5px. */
.fpScrollbar::-webkit-scrollbar, .v-navigation-drawer__content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.fpScrollbar::-webkit-scrollbar-track, .v-navigation-drawer__content::-webkit-scrollbar-track {
    background: transparent;
}

.fpScrollbar::-webkit-scrollbar-thumb, .v-navigation-drawer__content::-webkit-scrollbar-thumb {
    background-color: var(--fp-scrollbar);
    border-radius: 4px;
}

/* ===================================================================================================
=============== Loader ============================================================================
===================================================================================================  */

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

.loader-wrapper .loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 111px;
    height: 111px;
    margin: -59px 0 0 -59px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: fui-loader-spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: fui-loader-spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}

.loader-wrapper .loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: fui-loader-spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: fui-loader-spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

.loader-wrapper .loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: fui-loader-spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: fui-loader-spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes fui-loader-spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes fui-loader-spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
/* ==============================================================================*/
.fui-loading {
    --color-1: #1867c0;
    --size: 0.8px;
  
    width: calc(48 * var(--size));
    height: calc(48 * var(--size));
    border: calc(5 * var(--size)) dotted var(--color-1);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 4s linear infinite;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
/* ===================================================================================================
=============== Loader ============================================================================
===================================================================================================  */