:root,
[data-bs-theme=semi-dark] body  {
    /* BODY */
    --vu-body-bgcolor: #f8f8ff;
    --vu-body-bgcolor: #f7f8fa;
    --vu-body-color: #000000;
    /* SCROLL_BAR */
    --vu-scroll_track-bgcolor: transparent;
    --vu-scroll_thumb-bgcolor: #939393;
    --vu-scroll_thumb-hover-bgcolor: #9c9c9c;
    --vu-scroll_thumb-active-bgcolor: #939393;
    /* TABS */
    --vu-tabs_button-color: #ffffff;
    --vu-tabs_button-bgcolor: #141E30;
    --vu-tabs_button-active-color: #ffffff;
    --vu-tabs_button-active-bgcolor: #00B4DB;
    --vu-tabs_button-bg: linear-gradient(to left, #243B55, #141E30);
    --vu-tabs_button-active-bg: linear-gradient(to right, #0083B0, #00B4DB);
    /* CONTENT */
    --vu-popup_overlay-bgcolor: #f8f8ff;
    --vu-dt_box_cntnt-bgcolor: #FFFFFF;
    --vu-dt_box_hd-color: #383b57;
    /* CONTENT_HEAD_BUTTON */
    --vu-dt_box_hd_button-color: #111827;
    --vu-dt_box_hd_button-bgcolor: #FFFFFF;
    --vu-dt_box_hd_button-hover-bgcolor: #f4f4f4;
    --vu-dt_box_hd_button-border_color: #d6d6d6;
}

[data-bs-theme=  dark] body  {
    --vu-body-bgcolor: #171718;
    --vu-body-color: #000000;
    /* SCROLL_BAR */
    --vu-scroll_track-bgcolor: #484848;
    --vu-scroll_thumb-bgcolor: #313131;
    --vu-scroll_thumb-hover-bgcolor: #2b2b2b;
    --vu-scroll_thumb-active-bgcolor: #939393;
    /* TABS */
    --vu-tabs_button-color: #ffffff;
    --vu-tabs_button-bgcolor: #141E30;
    --vu-tabs_button-active-color: #000000;
    --vu-tabs_button-active-bgcolor: #00B4DB;
    --vu-tabs_button-bg: linear-gradient(to left, #243B55, #141E30);
    --vu-tabs_button-active-bg: linear-gradient(to right, #0083B0, #00B4DB);
    /* CONTENT */
    --vu-popup_overlay-bgcolor: #000000;
    --vu-dt_box_hd-color: #ffffff;
    --vu-dt_box_hd_button-color: #fff;
    --vu-dt_box_hd_button-bgcolor: #000000;
    --vu-dt_box_hd_button-hover-bgcolor: #000000;
    --vu-dt_box_hd_button-border_color: #ffffff61;
    --vu-dt_box_cntnt-bgcolor: #000000;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    background-color: var(--vu-scroll_track-bgcolor);
}

::-webkit-scrollbar-thumb {
    cursor: pointer;
    background-color: var(--vu-scroll_thumb-bgcolor);
    border-radius: 0px;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--vu-scroll_thumb-hover-bgcolor);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--vu-scroll_thumb-active-bgcolor);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

* {
    margin: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    font-size: 16px;
    /* font-size: 15px; */
    background-color:  var(--vu-body-bgcolor);
    color: var(--vu-body-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(138deg, #dfe8ffc2, #ffffff, #fdeaff7a);
    /* background: url('../images/bg/bg14.jpg'); */
    background-position: bottom right;
    background-size: cover;
}

main {
    flex-grow: 1;
}

header,
footer {
    flex-grow: 0;
    flex-shrink: 0;
}

@media only screen and (min-width: 915px) {
    .not-in-pc {
        display: none !important;
    }
}

@media only screen and (max-width: 914px) {
    .not-in-mob {
        display: none !important;
    }
}

button {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: 0.1s;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    user-select: none;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: 0.1s;
    color: inherit;
    font-family: inherit;
}

.wrapper {
    width: 100%;
}

.nowrap {
    white-space: nowrap;
}

.initial-hidden {
    display: none;
}

img {
    max-width: 100%;
}

i {
    line-height: 0;
}