:root {
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;

    --radius: 4px;
    --radius-2: 6px;
    --radius-3: 12px;
    --radius-4: 20px;
    --radius-5: 30px;
}

/* ---------------------- ------------- ---------------- */


body, html {
    height: 100%;
    margin: 0px !important;
    padding: 0px !important;
    scroll-behavior: smooth;
}

/* auth screens */
.auth-content-container {
    height: 100%;
    background:
    radial-gradient(
      circle at 20% 80%,
      rgba(247, 217, 255, 0.8),
      transparent 60%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(136, 147, 246, 0.8),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      #f6f7fb,
      #eef2ff
    );
    /* / */
    display: flex;
    align-items: center;
    justify-content: center;
}

._card {
    border-radius: 20px;
    padding: 15px;
    background: var(--card);
}

.auth-card {
    width: 40%;
    margin: auto;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.9);
    /* background: linear-gradient(to bottom, #b9b0fc, rgba(255, 255, 255, 0.7) 20%);  */
}

/* fonts */
p, a { font-size: var(--text-sm); font-family: 'inter'; }

p, h1, h2, h3, h4, h5, span, i, label { color: var(--primary-color) }

a {
    text-decoration: none !important;
    color: var(--primary-color);
}

.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-md { font-size: var(--text-md) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-title { font-size: 32px; font-family: 'inter'; font-weight: 500; }
.text-title-2 { font-size: 40px; font-family: 'inter'; font-weight: 600; }

.anuphan {
    font-family: 'anuphan';
    font-weight: 400;
}
.anuphan-2 {
    font-family: 'anuphan';
    font-weight: 500;
}
.anuphan-3 {
    font-family: 'anuphan';
    font-weight: 600;
}

.inter {font-family: 'inter'}
.inter-2 {
    font-family: 'inter';
    font-weight: 600;
}
.inter-3 {
    font-family: 'inter';
    font-weight: 700;
}

.gabarito { font-family: 'gabarito' !important; font-weight: 400; }
.gabarito-2 { font-family: 'gabarito'; font-weight: 600; }
.gabarito-3 { font-family: 'gabarito'; font-weight: 700; }

.chakra-petch {
    font-family: 'Chakra Petch';
    font-weight: 600;
}

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* Colors / Bg */
.primary-color { color: var(--primary-color); }
.secondary-color { color: var(--secondary-color); }
.txt-grey { color: var(--txt-grey); }
.txt-white { color: white; }
.bg-primary {
    background: var(--bg-primary) !important;
}
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-grey-1 { background: var(--bg-grey_1); }
.bg-success-lumus { background: var(--bg-success-lumus) }
.bg-primary-gradient {
    background: linear-gradient(to right, var(--secondary-color), #9081fa);
}
.bg-secondary-lumus {
    background: var(--bg-secondary-lumus);
}
.bg-secondary-lumus-gradient {
    background: linear-gradient(var(--bg-secondary-lumus), #f7e5f7);
}

.color-success { color: var(--color-success); }
.color-danger { color: var(--color-danger); }
.color-waiting { color: var(--color-waiting); }
.color-processing { color: var(--color-processing); }
.color-completed { color: var(--color-completed); }

.fill-primary { fill: var(--primary-color); }
.fill-secondary { fill: var(--secondary-color); }
.fill-secondary .duoicon-primary-layer {
    color: var(--secondary-color);
}

.bg-none { background: none !important; }
.hover-bg:hover { background: var(--hover-bg); }
.modal-body {
    background: var(--bg-modal);
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}


/* nav-header */
.nav-header {
    background: rgba(255, 255, 255, 0.5);
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 60px;
    padding: 0px 20px;
    backdrop-filter: blur(5px);
    align-items: center;
    top: 0;
}


/* Form | Input ---------------------- */
.form-grp {
    position: relative;
    margin: 24px 0px 0px 0px;
}

.form-grp input {
    width: 100%;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px;
    color: var(--primary-color) !important;
    background: transparent;
    height: 46px;
    padding: 0px 14px;
    font-size: 14px;
    font-family: 'inter';
}

.form-grp select{
    width: 100%;
    height: 46px;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px;
    color: var(--primary-color) !important;
    background: transparent;
    padding: 0px 14px;
    font-size: 14px;
    font-family: 'inter';
}

.form-grp .custom-select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px;
    color: var(--primary-color) !important;
    background: transparent;
    padding: 0px 14px;
    font-size: 14px;
    font-family: 'inter';
    position: relative;
    align-items: center;
    display: flex;
}

.form-grp .custom-select .drop-icon {
    position: absolute;
    right: 10px;
    color: var(--txt-grey);
}

input:focus,
select:focus {
    box-shadow: none !important;
    outline: none !important;
}

.form-grp input:focus {
    border: 1px solid var(--input-border-active) !important;
}

/* input icons and text */
.form-grp.has-icon input {
    padding-right: 20% !important;
    position: relative;
}

.form-grp .has-icon.icon-left{
    padding-right: 0;
    padding-left: 40px;
    padding-right: 0px;
}

.form-grp .icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    height: 46px;
    width: auto;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
}

.form-grp .icon-wrapper.left {
    right: auto;
    left: 0;
}

.form-grp .shaded {
    background: var(--input-shaded);
    border: none !important;
}

.form-grp input::placeholder {
    color: #abaaaa;
}
.placeholder-xs::placeholder {
    font-size: 12px;
} 

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: none;
    transition: background-color 5000s ease-in-out 0s;
    background-color: none !important;
    -webkit-text-fill-color: var(--primary-color);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


/* Buttons */
button {
    background: var(--secondary-color);
    border: none;
    border-radius: 8px;
    text-align: center;
    color: #fff;
    width: 100%;
    font-family: 'inter';
    font-size: 14px;
    height: 45px;
}
button:focus {
    outline: 0px;
    box-shadow: 0px;
    -webkit-box-shadow: none;
    border: none !important;
}
button:hover {
    opacity: .9;
}

button.rounded { border-radius: 30px !important; }
button.gradient {
    background: linear-gradient(to right, #715ff6, var(--secondary-color));
}
button.lumin {
    background: #e5e2fb;
    color: var(--secondary-color);
}
button:disabled{
    opacity: .8;
}
button.grey {
    background-color: var(--btn-grey);
    color: var(--primary-color);
}
button.white {
    background-color: var(--bg-primary);
    color: var(--primary-color);
}
button.danger {
    background-color: var(--bg-danger);
    color: #fff;
}
button.outline {
    background: none;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
}
button.small {
    height: 30px;
    font-size: 12px;
}
button.medium {
    height: 35px;
}
button.bnw{
    background: var(--bnw-btn-bg);
    color: var(--bnw-btn-color);
}

.radius {
    border-radius: var(--radius);
}
.radius-2 {
    border-radius: var(--radius-2) !important;
}
.radius-3 {
    border-radius: var(--radius-3) !important;
}
.radius-4 {
    border-radius: var(--radius-4) !important;
}
.radius-5 {
    border-radius: var(--radius-5) !important;
}

/* Box Sizing / layout */
.min-h-100 {
    min-height: 100% !important;
}
.min-w-100 {
    min-width: 100% !important;
}
.vh-100 {
    height: 100vh;
}
.vw-100 {
    width: 100vw;
}
.w-fit-content {
    width: fit-content;
}
.h-fit-content {
    height: fit-content;
}

.position-relative {
    position: relative;
}
.position-absolute {
    position: absolute;
}

/* sidenav */
.sidenav {
    background: var(--bg-primary);
    min-height: 100vh;
    padding: 8px;
    transition: width 0.3s ease;
}

.sidenav .side-link {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 8px;
    border-radius: 8px;
    margin: 4px 0px;
}
.sidenav .side-link span {
    font-family: 'inter';
    font-size: 15px;
    font-weight: 500;
}

.sidenav .side-link.active {
    background: var(--sidenav-active-bg);
    /* border-left: 3px solid var(--secondary-color); */
}
.sidenav .side-link:hover{
    background: var(--sidenav-active-bg);
}

.sidenav .side-link-icon {
    fill: var(--primary-color);
    width: 18px;
    height: 18px;
}

.sidenav.collapsed {
    max-width: 6%;
}
.sidenav.collapsed .side-link span {
    display: none;
}
.sidenav.collapsed .side-link-icon {
    width: 20px;
    height: 20px;
}
.sidenav.collapsed .side-link {
    width: 80%;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    margin: 4px auto;
    border: none;
}

.sidenav .side-link .duoicon .duoicon-primary-layer {
    color: var(--secondary-color);
}
.sidenav .side-link .duoicon .duoicon-secondary-layer {
    color: var(--secondary-color_2);
}

.app-content-expanded {
    min-width: 93.5%;
}


/* Tab ==== */
.tab-container {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
    font-family: 'inter';
    font-weight: 500;
}
.tab-container .tab-toggle {
    margin: 0;
    padding: 8px 4px;
    color: var(--txt-grey);
    cursor: pointer;
}
.tab-container .tab-toggle.active {
    border-bottom: 3px solid var(--secondary-color);
    color: var(--primary-color);
}
.tab-container .tab-toggle.active.bnw {
    border-bottom: 3px solid var(--primary-color);
}

.context-menu {
    background: var(--card);
    position: absolute;
    width: 100%;
    z-index: 99;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 4px;
    /* overflow: scroll; */
    border: 3px solid var(--bg-grey_1);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: none;
}

/* back line text */
.bk-line-text {
    position: relative;
    background: var(--border-color);
    height: 1px;
}
.bk-line-text .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    width: fit-content;
}

/* Index */
.ind-sec-1 {
    position: relative;
    min-height: 100vh;
    /* overflow: hidden; */
    background: #f7f8fa;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

/* Background wrapper */
.bg-coins {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Coins */
.coin {
    position: absolute;
    opacity: 0.35;
    filter: blur(6px);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* Different positions */
/* Existing coins */
.c1 { top: 8%; left: 12%; width: 140px; animation: floatUpDown 7s infinite; }
.c2 { top: 75%; left: 8%; width: 90px; animation: floatDownUp 9s infinite; }
.c3 { top: 15%; right: 18%; width: 110px; animation: floatSide 8s infinite; }
.c4 { bottom: 10%; right: 20%; width: 160px; animation: floatDiagonal 11s infinite; }
.c5 { top: 50%; left: 50%; width: 100px; animation: floatUpDown 10s infinite; }

/* New ones */
.c6 { top: 30%; left: 5%; width: 80px; filter: blur(4px); animation: floatSide 12s infinite; }
.c7 { bottom: 25%; right: 5%; width: 120px; filter: blur(8px); animation: floatDiagonal 9s infinite; }
.c8 { top: 5%; right: 40%; width: 70px; filter: blur(3px); animation: floatDownUp 13s infinite; }
.c9 { bottom: 5%; left: 35%; width: 130px; filter: blur(7px); animation: floatUpDown 8s infinite; }
.c10 { top: 60%; right: 35%; width: 95px; filter: blur(5px); animation: floatSide 10s infinite; }

/* Soft white overlay */
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    z-index: 2;
}

/* Foreground content */
.content {
    position: relative;
    z-index: 3;
    /* text-align: center; */
    width: 100%;
}

.content h1 {
    font-size: 38px;
    font-weight: 700;
}
@media (max-width: 576px) {
    .content h1 {
        font-size: 30px;
    }
}

/* Index nav sheet */
.index-nav-sheet {
    background: rgba(253, 252, 252, 0.95);
    min-height: 300px;
    width: 30%;
    position: fixed;
    right: 30px;
    top: 60px;
    z-index: 99;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-color);
    padding: 15px;
    display: none;
}
.index-nav-sheet-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    z-index: 44;
    border-width: 0px;
    display: none;
}
.index-nav-sheet .duoicon .duoicon-primary-layer {
    color: var(--secondary-color);
}
.index-nav-sheet .duoicon .duoicon-secondary-layer {
    color: var(--secondary-color_2);
}

/* Notification / announcement sheet */
.notify-sheet {
    background: #fff;
    width: 40%;
    position: fixed;
    right: 60px;
    top: 60px;
    z-index: 99;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: none;
}
.notify-sheet-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    z-index: 44;
    border-width: 0px;
    display: none;
}
.notify-badge {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--secondary-color);
    animation: pulse 1.5s infinite;
}



/* Others ============ // */

.border-left-dashed {
    border-left: 1px dashed var(--border-color);
}
.border-none {
    border: none !important;
}

.pointer { cursor: pointer; }

.blur-overlay {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table td, 
.table th {
    vertical-align: middle;
}
.custom-tb-header th {
    border: none;
    border-bottom: none !important;
}
.tb-border-none td { border: none }

.network-icon {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    position: absolute;
    right: -2px;
    bottom: 0;
}

.network-list {
    position: absolute;
    right: 10px;
    max-height: 200px;
    width: 170px;
    top: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    z-index: 4;
}
.top-nav-offset {
    margin-top: 80px;
}

.overlay-hidden { overflow: hidden; }
.overlay-scroll { overflow: scroll; }
.overlay-auto { overflow: auto; }