h1 {
    font-size: 1.5rem !important;
    line-height: 2.25rem !important;
    font-weight: 400 !important;
}

h2 {
    font-size: 1.25rem !important;
    line-height: 1.875rem !important;
    font-weight: 400 !important;
}

h3 {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 400 !important;
}

h4 {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    font-weight: 400 !important;
}

html {
    font-size: var(--base-font-size);
}

#feed-app .card-body:not(.with-bg) .text-adjust .text p,
#feed-app .card-body:not(.with-bg) .text-adjust .text span,
#feed-app .card-body:not(.with-bg) .text-adjust .text a {
    font-size: var(--base-font-size-adjust);
    line-height: calc(var(--base-font-size-adjust) * 1.5);
}

body {
    font-family: 'CS ChatThaiUI';
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--black);
}

body button {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--black);
}

body a {
    font-weight: 400;
    font-size: 0.813rem;
    line-height: 1.25rem;
    color: var(--black);
}

body label,
body span,
body p {
    font-family: inherit;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.125rem;
}

#feed-app .card-body.with-bg .text-adjust .text p,
#feed-app .card-body.with-bg .text-adjust .text span,
#feed-app .card-body.with-bg .text-adjust .text a {
    font-size: 2.5rem !important;
    line-height: 3.75rem !important;
    color: #ffffff !important;
}

body#full-layout main {
    margin-top: var(--header-height) !important;
    margin-left: 345px;
    margin-right: 0px;
    margin-bottom: var(--footer-height) !important;
    overflow: auto;
    background: #f3f4f5;
}

body#full-layout .right-side-container>.right-side-container {
    transition-duration: 0s;
}

body#full-layout.mobile main {
    margin-left: 0px !important;
}

body#full-layout.mobile.menu-sub-hidden .sub-menu {
    left: 0px !important;
    transform: translateX(-250px) !important;
}

body#full-layout.mobile.main-hidden .main-menu {
    transform: translateX(-95px);
}

body#full-layout.menu-sub-hidden .sub-menu,
body#full-layout.no-menu-sub .sub-menu {
    left: 0px !important;
}

body#full-layout.menu-sub-hidden main,
body#full-layout.no-menu-sub main {
    margin-left: 95px;
    margin-right: 0px;
}

body#full-layout.freezing {
    overflow: hidden !important;
}

body#full-layout .scroll {
    height: 100% !important;
}

body#full-layout.can-toggle-sidebar main {
    margin-left: 95px !important;
}

body#full-layout.can-toggle-sidebar.mobile main {
    margin-left: 0px !important;
}

body#full-layout.can-toggle-rightside .right-side-container {
    position: fixed !important;
    right: 0;
    transform: translateX(340px);
    transition-duration: 0.5s;
}

body#full-layout.can-toggle-rightside .right-side-container>.right-side-container {
    transition-duration: 0s;
}

.width-100 {
    min-width: 100px !important;
    max-width: 100px !important;
}

.slimScrollDiv {
    height: 100% !important;
}

.toggle-right-side {
    display: none;
    position: absolute;
    right: 5px;
    z-index: 1;
    border: 1px solid var(--border-gray);
    color: #ffffff;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #ffffff;
    color: var(--black);
    margin-top: -1px;
    border-right: 0px;
    border-bottom-left-radius: 5px;
    transform: translateX(5px);
    transition-duration: 0.5s;
}

.toggle-right-side .fa-icon:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f100";
}

.toggle-right-side.show {
    right: 0px;
    transform: translateX(-305px);
}

.toggle-right-side.show .fa-icon:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f101";
}

body.mobile .search-section {
    position: absolute !important;
    width: 270px !important;
    left: 35px !important;
}

body.can-toggle-rightside .toggle-right-side {
    display: block !important;
}

body.can-toggle-rightside .close-right-side {
    display: none !important;
}

body.can-toggle-rightside.show-right-side-menu .right-side-container {
    width: 305px !important;
    transform: translateX(0px) !important;
    z-index: 1;
}

body.can-toggle-rightside.show-right-side-menu .right-side-container .right-side-container-content {
    padding: 10px !important;
}

[v-cloak] {
    display: none;
}

input,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

@media only screen and (max-width: 768px) {
    body main {
        margin-right: 0px !important;
    }

    body.menu-sub-hidden .sub-menu {
        transform: translateX(-250px) !important;
    }
}

.image {
    position: relative;
    overflow: hidden;
}

.v-popover {
    position: relative;
}

.v-popover>div {
    width: 100%;
}

.tooltip {
    display: block !important;
    z-index: 10000;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 15px, rgba(0, 0, 0, 0.1) 0px 1px 6px;
    border-color: var(--border-gray);
}

.tooltip:focus {
    outline: none !important;
}

.tooltip .tooltip-inner {
    background: #ffffff;
    color: inherit !important;
    padding: 5px 10px 4px;
    border: 0px !important;
    background-color: transparent !important;
}

.tooltip .tooltip-inner:focus {
    outline: none !important;
}

.tooltip .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
}

.tooltip[x-placement^="top"] {
    margin-bottom: 5px;
}

.tooltip[x-placement^="top"] .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-color: #ffffff;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    bottom: -10px;
    height: 10px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
}

.tooltip[x-placement^="bottom"] {
    margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-color: #ffffff;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    height: 10px;
    top: -10px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
    background: transparent;
}

.tooltip[x-placement^="right"] {
    margin-left: 5px;
}

.tooltip[x-placement^="right"] .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-color: #ffffff;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    left: -20px;
    width: 20px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    background: transparent;
}

.tooltip[x-placement^="left"] {
    margin-right: 5px;
}

.tooltip[x-placement^="left"] .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-color: #ffffff;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    right: -20px;
    width: 20px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
    background: transparent;
}

.tooltip[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s;
}

.tooltip[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s;
}

b,
strong {
    font-weight: bold !important;
}

b label,
strong label,
b span,
strong span,
b p,
strong p {
    font-weight: inherit;
}

a:hover,
a:active {
    color: var(--primary);
}

.border-primary,
.border-theme-1 {
    border-color: var(--primary) !important;
}

.dropdown-item.active,
.dropdown-item:focus,
.dropdown-item:active {
    background: var(--primary) !important;
    color: var(--primary-btn-text) !important;
}

.text-primary,
.text-theme-1 {
    color: var(--primary) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--primary) !important;
}

.nav-tabs.separator-tabs .nav-link.active::before,
.nav-tabs.separator-tabs .nav-item.show .nav-link::before {
    background: var(--primary) !important;
}

.form-control:focus,
.bootstrap-tagsinput.focus {
    border-color: var(--primary-60);
}

.fc-day-header {
    color: var(--primary);
}

[role="button"] {
    cursor: pointer;
}

.custom-switch-primary .switch input:checked+.slider {
    background-color: var(--primary);
}