/* --------------- variable --------------- */

:root {
    --color-main: #ed3410 !important;
    --color-red: #ff0000 !important;
    --color-white: #ffffff !important;
    --color-white-hov: #a0a0a0 !important;
    --color-blue-200: #65a2ee !important;
    --color-blue: #1560BD !important;
    --color-blue-2: #213256 !important;
    --color-blue-3: #091840 !important;
    --color-blue-2-dark: #1b2946 !important;
    --color-blue-highlight: #407ECA !important;
    --color-gray: #666666 !important;
    --color-gray-2: #333333 !important;
    --color-black: #05121A !important;
    --color-black-2: #050B0F !important;
    --color-invert-border: #FFFFFF !important;
    --color-invert: #FFFFFF !important;
    --border-gray: #273239 !important;
    --bg-invert: #050B0F !important;
    --bg-invert-2: #050B0F !important;
    --bg-blue-invert-3: rgba(5, 18, 26, 1) !important;
    --bg-blue-invert-2: #213256 !important;
    --fs-head-sub: 18px !important;
    --fs-text: 14px !important;
    --fs-small: 12px !important;
    --color-brd: #273239 !important;
}

    :root body:not(.dark-theme) {
        --color-invert: #05121A !important;
        --bg-invert: rgba(236, 244, 255, 1) !important;
        --bg-invert-2: rgba(255, 255, 255, 1) !important;
        --color-invert-border: #05121A !important;
        --color-blue-3: #B2D0F6 !important;
        --bg-blue-invert-2: #B2D0F6 !important;
        --bg-blue-invert-3: rgba(255, 255, 255, 1) !important;
        --color-brd: #dedede !important;
        --border-gray: #dedede !important;
    }

    :root .chart-cards.up {
        --color-chart: #03BB00 !important;
    }

    :root .chart-cards.down {
        --color-chart: #ED340F !important;
    }

.chart-cards.up .img-icon-charts {
    content: url('../img/home-efinance/chart-icon-svg.svg');
}

.chart-cards.down .img-icon-charts {
    content: url('../img/home-efinance/chart-red-icon-svg.svg');
}
/* =============================================================== [ Container ] ================================================================*/
/* .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1299.98px; padding-right: 15px; padding-left: 15px; } */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
text {
    letter-spacing: normal;
    font-family: 'Kanit';
}

h5,
h6 {
    font-family: "Kanit";
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}

span {
    transition: all none !important;
}

small.loading {
    font-size: calc(0.75vw + 5px);
    letter-spacing: 0.2vw;
    text-transform: uppercase;
}
/* .row:not(.gx-0):not(.gx-1):not(.gx-2):not(.gx-3):not(.gx-4):not(.gx-5):not(.gx-20) {
    margin-right: -15px;
    margin-left: -15px;
} */

.gx-20 > * {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-left: 15px;
    padding-right: 15px;
}

* {
    & ::-webkit-scrollbar

{
    width: 4px;
    height: 4px;
}
/* Track */
& ::-webkit-scrollbar-track {
    background: rgba(51, 51, 51, 0.25);
    border-radius: 50px;
}
/* Handle */
& ::-webkit-scrollbar-thumb {
    background: rgba(112, 112, 112, 0.5);
    border-radius: 50px;
}
    /* Handle on hover */
    & ::-webkit-scrollbar-thumb:hover {
        background: var(--color-gray-2);
    }

}

.navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
    color: #65a2ee !important;
}

.ff-sarabun {
    font-family: "Sarabun", sans-serif !important;
}

.info-text-news {
    font-size: 18px;
    margin-bottom: 30px;
}

.info-text-news-highlight {
    font-size: 18px;
    margin-bottom: 30px;
    font-weight: bolder;
    color: var(--color-blue-highlight);
}

.text-news-highlight-main {
    font-weight: 500;
    line-height: 1.3;
}

.stick-menu {
    position: sticky;
    top: 0px;
    padding-bottom: 30px;
    background-color: var(--bg-blue-invert-3);
    z-index: 1059;
}
/* .navbar-collapse.show{ position: fixed; top: 80px; background-color: var(--bg-blue-invert-3); z-index: 9998; width: 100%; } */
/* สำหรับธีมมืด */
.dark-theme .pagination.style-1 a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(39 50 57);
    border-radius: 50%;
    margin-right: 5px;
    font-size: 14px;
    color: var(--color-white);
    line-height: 40px;
    transition: all 0.15s ease-in-out !important;
}

/* สำหรับธีมปกติ */
.pagination.style-1 a {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(211, 211, 211, 1);
    border-radius: 50%;
    margin-right: 5px;
    font-size: 14px;
    color: var(--color-invert);
    line-height: 40px;
    transition: all 0.15s ease-in-out !important;
}

    .pagination.style-1 a .text {
        padding: 3px 10px;
        font-size: 11px;
    }

/* สำหรับหน้าจอขนาดเล็ก (มือถือ ≤ 480px) */
@media (max-width: 450px) {
    .pagination.style-1 a {
        width: 30px !important;
        height: 30px !important;
        font-size: 10px;
        line-height: 30px;
    }

        .pagination.style-1 a .text {
            padding: 1px 5px;
            font-size: 9px;
        }
}



.tags {
    display: none;
}

.dark-theme .tc-widget-tags-style3 a {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.tc-widget-tags-style3 a {
    border-radius: 4px;
    border: 1px solid var(--border-gray);
}

.dark-theme .sharing {
    display: flex;
    align-items: center;
    & .share-icons

{
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    & a

{
    font-size: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-gray);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    transition: all 0.1s ease;
    &:hover

{
    background: var(--color-blue);
    & .img-tiktok

{
    content: url('../img/home-efinance/icon-tiktok-white.svg');
    filter: invert(0);
}

& .img-facebook {
    content: url('../img/home-efinance/icon-facebook-white.svg');
    filter: invert(0);
}

& .img-x {
    content: url('../img/home-efinance/icon-tweet-white.svg');
    filter: invert(0);
}

& .img-line {
    content: url('../img/home-efinance/icon-line-white.svg');
    filter: invert(0);
}

& .img-ig {
    content: url('../img/home-efinance/icon-ig-white.svg');
    filter: invert(0);
}

}
}

& a img {
    width: 18px;
    height: 18px;
    transition: filter 0s ease;
}

& .img-tiktok {
    content: url('../img/home-efinance/icon-tiktok-white.svg');
    filter: invert(0);
}

& .img-facebook {
    content: url('../img/home-efinance/icon-facebook-white.svg');
    filter: invert(0);
}

& .img-x {
    content: url('../img/home-efinance/icon-tweet-white.svg');
    filter: invert(0);
}

& .img-line {
    content: url('../img/home-efinance/icon-line-white.svg');
    filter: invert(0);
}

& .img-ig {
    content: url('../img/home-efinance/icon-ig-white.svg');
    filter: invert(0);
}

}
}

.sharing {
    display: flex;
    align-items: center;
    & .share-icons

{
    margin-left: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    & a

{
    font-size: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-gray);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    transition: all 0.1s ease;
    &:hover

{
    background: var(--color-blue);
    border: 1px solid var(--color-blue);
    & .img-tiktok

{
    content: url('../img/home-efinance/icon-tiktok-white.svg');
    filter: invert(0);
}

& .img-facebook {
    content: url('../img/home-efinance/icon-facebook-white.svg');
    filter: invert(0);
}

& .img-x {
    content: url('../img/home-efinance/icon-tweet-white.svg');
    filter: invert(0);
}

& .img-line {
    content: url('../img/home-efinance/icon-line-white.svg');
    filter: invert(0);
}

& .img-ig {
    content: url('../img/home-efinance/icon-ig-white.svg');
    filter: invert(0);
}

}
}

& a img {
    width: 18px;
    height: 18px;
    transition: filter 0s ease;
}

& .img-tiktok {
    content: url('../img/home-efinance/icon-tiktok-white.svg');
    filter: invert(1);
}

& .img-facebook {
    content: url('../img/home-efinance/icon-facebook-white.svg');
    filter: invert(1);
}

& .img-x {
    content: url('../img/home-efinance/icon-tweet-white.svg');
    filter: invert(1);
}

& .img-line {
    content: url('../img/home-efinance/icon-line-white.svg');
    filter: invert(1);
}

& .img-ig {
    content: url('../img/home-efinance/icon-ig-white.svg');
    filter: invert(1);
}

}
}
/* .dark-theme .tc-widget-tags-style3 a:hover { background-color: var(--color-blue-3); border-color: var(--color-blue-3); color: var(--color-white); } */

.dark-theme {
    & .tc-widget-tags-style3

{
    & a:hover

{
    background-color: var(--color-blue-3);
    border-color: var(--color-blue-3);
    color: var(--color-white);
}

}
}

.tc-widget-tags-style3 a:hover {
    background-color: var(--color-blue-3);
    border-color: var(--color-blue-3);
    color: var(--color-invert);
}

.dark-theme .pagination.color-main a:hover {
    border-color: rgb(39 50 57) !important;
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}

.pagination.color-main a:hover {
    border-color: rgb(211 211 211) !important;
    background-color: var(--color-blue) !important;
    color: var(--color-white) !important;
}

    .pagination.color-main a:hover i {
        color: var(--color-white) !important;
    }

.dark-theme .pagination.color-main a.active {
    color: var(--color-blue) !important;
    border-color: rgb(39 50 57) !important;
    background-color: var(--color-white) !important;
}

.pagination.color-main a.active {
    color: var(--color-white) !important;
    border-color: rgb(211 211 211) !important;
    background-color: #05121A !important;
}

.dark-theme .icon-baket img {
    content: url('../img/home-efinance/baket.svg') !important;
}

.icon-baket img {
    content: url('../img/home-efinance/baket-b.svg') !important;
}

.icon-baket:hover img {
    content: url('../img/home-efinance/baket.svg') !important;
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn .icon-moon.active {
    color: var(--color-blue);
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
    position: relative;
    font-size: 25px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #999;
    cursor: pointer;
}

hr {
    margin: 0.5rem 0 1rem;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto
}
/* @media (min-width:576px) { .container, .container-sm { max-width: 540px } } */

@media (min-width:767.98px) {
    .container,
    .container-md,
    .container-sm {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px
    }
}

@media (min-width:1193.98px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm .container-xl {
        max-width: 1140px
    }
}
/* 
@media (min-width:1193.98px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px
    }
} */

@media (min-width:1300px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1300px
    }
}

@media (min-width:1400px) {
    .tc-breaking-news-style1 .swiper-slide {
        width: max-content !important;
    }
}

.footer-style1 {
    background-color: #ECF4FF;
    border-top: 0px solid #000;
}

.dark-theme .footer-style1 {
    background-color: #000;
    border-color: rgb(255 255 255 / 0%);
}

.tc-latest-posts-style4 .swiper-slide::after {
    position: absolute;
    content: "";
    right: -25px;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
}

.dark-theme .dropdown-item {
    background-color: var(--color-black-2);
    color: var(--color-invert);
}

    .dark-theme .dropdown-item.dropdown-item-01 {
        background-color: var(--color-black-2);
        color: var(--color-blue-200) !important;
    }

.dropdown-item {
    background-color: #ECF4FF;
}

.dark-theme .dropdown-item:focus,
.dark-theme .dropdown-item:hover {
    color: var(--color-blue-200);
    background-color: #09284E;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--color-blue-200);
    background-color: rgba(178, 208, 246, 0.5);
}

.dark-theme .navbar.style-1 .dropdown-menu .dropdown-item:hover,
.dark-theme .navbar.style-1 .dropdownMenu .dropdown-item:hover {
    background-color: #050b0f;
    color: var(--color-blue-200) !important;
}

.dark-theme .navbar.style-1 .dropdown-menu .dropdown-item.dropdown-item-01:hover,
.dark-theme .navbar.style-1 .dropdownMenu .dropdown-item.dropdown-item-01:hover {
    background-color: #050b0f;
    color: var(--color-blue-200) !important;
}

.dropdown-item-01 {
    font-weight: 600;
    padding: 10px 14px !important;
    border-left: 3px solid var(--color-blue-200);
    color: var(--color-blue-200);
}

.dropdown-item.dropdown-item-01:focus,
.dropdown-item.dropdown-item-01:hover {
    color: var(--color-blue-200);
    background-color: #ECF4FF;
}

.text {
    font-size: 14px;
    line-height: 1.5;
}

.text-header {
    font-size: 24px;
    font-weight: 500;
}

.news-header {
    font-size: 36px;
    line-height: 48px;
}

.news-header-small {
    font-size: 14px;
    font-weight: 500;
}

.navbar-expand-lg .navbar-nav {
    /* flex-direction: row; */
    align-items: baseline;
}

.gx-20 {
    --bs-gutter-x: 20px;
}

.navbar.style-1 {
    /* padding: 0; */
    border-bottom: 0px solid #000;
}
/* =============================================================== [ Logo ] ================================================================*/

.top-navbar.style-1 .logo-brand {
    max-width: 300px;
    width: 100%;
    display: block;
    margin: auto;
}

.top-navbar.style-1 {
    padding: 30px 0 0;
    border-bottom: 0px solid var(--border-gray);
    position: relative;
    z-index: 999;
}

.navbar.style-1 .navbar-nav .nav-item .nav-link {
    padding: 0 10px;
    font-size: 16px;
    text-transform: none;
}

.navbar.style-1 .navbar-nav .nav-item .nav-link {
    margin: 0 8px;
}
/* flex-bar */
/* .widgets-sticky {
    position: sticky;
    top: 100px;
} */

h6 {
    font-size: var(--fs-head-sub);
    font-weight: 500;
    display: f;
}

.text-primary {
    color: #1560BD !important;
}

.navbar-toggler[aria-expanded='false'] > .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition: all 0s ease;
}

.navbar-toggler[aria-expanded='true'] > .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M7 7l16 16m0-16L7 23'/%3e%3c/svg%3e");
    transition: all 0s ease;
}

.sidebar-popup-style1 .btn-close,
.navbar-light .navbar-toggler-icon {
    -webkit-filter: invert(1) sepia(0%) saturate(7470%) hue-rotate(350deg) brightness(102%) contrast(99%);
    filter: invert(1) sepia(0%) saturate(7470%) hue-rotate(350deg) brightness(102%) contrast(99%);
}

.dark-theme .sidebar-popup-style1 .btn-close,
.dark-theme .navbar-light .navbar-toggler-icon {
    -webkit-filter: invert(0) sepia(0%) saturate(7470%) hue-rotate(350deg) brightness(102%) contrast(99%);
    filter: invert(0) sepia(0%) saturate(7470%) hue-rotate(350deg) brightness(102%) contrast(99%);
}
/* =============================================================== [ Logo ] ================================================================*/

.dark-theme .icon-link {
    border: 1px solid var(--border-gray);
    padding: 7px;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-link {
    border: 1px solid var(--border-gray);
    padding: 7px;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dark-theme .search-btn-style3 {
    border: 1px solid var(--border-gray);
    background-color: transparent;
    transition: all 0.1s ease;
}

    .dark-theme .search-btn-style3:hover {
        border: 1px solid var(--border-gray);
        background-color: var(--color-blue);
    }

.search-btn-style3 {
    border: 1px solid var(--border-gray);
    background-color: transparent;
    transition: all 0.1s ease;
}

    .search-btn-style3:hover {
        border: 1px solid var(--border-gray);
        background-color: var(--color-blue);
    }

    .search-btn-style3 i {
        filter: invert(0);
    }

.dark-theme .search-btn-style3:hover i {
    filter: invert(0);
}

.search-btn-style3:hover i {
    filter: invert(1);
}

.dark-theme .icon-link-lg {
    border: 1px solid var(--border-gray);
    padding: 9px;
    border-radius: 50%;
    width: 60px !important;
    height: 60px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
}

.icon-link-lg {
    border: 1px solid var(--border-gray);
    padding: 9px;
    border-radius: 50%;
    width: 60px !important;
    height: 60px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ECF4FF;
}

.dark-theme .ion-pdf {
    content: url('../img/home-efinance/icon-pdf.svg');
}

.ion-pdf {
    content: url('../img/home-efinance/icon-pdf-b.svg');
}

.dark-theme .icon-user-mode {
    content: url('../img/home-efinance/icon-user.webp');
}

.icon-user-mode {
    content: url('../img/home-efinance/icon-user-w.webp');
}

.crop-icon-user-mode img {
    width: 25px;
    margin: 0px 5px 2px 0;
}

.text-link-out {
    color: var(--color-main);
}

p.loading {
    font-size: calc(3.5vw + 25px);
    letter-spacing: 0;
    color: #76b72a;
    font-weight: 400;
}

small.loading01 {
    color: var(--color-gray);
}

.dark-theme {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
}

    .dark-theme #Modal-Share .dark-theme {
        background-color: var(--color-black) !important;
        color: var(--color-white) !important;
    }

#Modal-Share .dark-theme {
    background-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

    #Modal-Share .dark-theme h6 {
        color: var(--color-invert);
    }

.dark-theme #Modal-Share .dark-theme .btn-close {
    filter: invert(0);
}

#Modal-Share .dark-theme .btn-close {
    filter: invert(1);
}

.swiper-button-next,
.swiper-button-prev {
    border-radius: 50% !important;
}

.nav-link:hover {
    color: var(--color-blue-200) !important;
}

.navbar.style-1 .navbar-nav .nav-item .nav-link.active {
    color: var(--color-blue) !important;
    font-weight: 500;
    font-size: 16px;
}

.tc-slider-style1 .swiper-button-prev,
.tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    left: 0;
    top: auto;
}

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-container-rtl .swiper-button-prev {
    right: 0;
    top: auto;
}

.tc-slider-style141 .swiper-button-next,
.tc-slider-style141 .swiper-container-rtl .swiper-button-prev {
    right: 0 !important;
    top: -30px !important;
}

.tc-slider-style141 .swiper-button-prev,
.tc-slider-style141 .swiper-container-rtl .swiper-button-next {
    right: 30px;
    left: auto;
    top: -30px !important;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse ul {
        padding: 40px 10px;
        transition: padding 0.25s linear;
    }

    .scrolled-desk .navbar-expand-lg .navbar-collapse ul {
        padding: 25px 10px;
    }
}

@media (max-width:991px) {
    .tc-breaking-news-slider457 .swiper-button-next,
    .tc-breaking-news-slider457 .swiper-container-rtl .swiper-button-prev {
        right: 50px;
        top: auto;
    }

    .tc-breaking-news-slider457 .swiper-button-prev,
    .tc-breaking-news-slider457 .swiper-container-rtl .swiper-button-next {
        left: 50px;
        top: auto;
    }
}

@media (max-width:768px) {
    .tc-breaking-news-slider457 .swiper-button-next,
    .tc-breaking-news-slider457 .swiper-container-rtl .swiper-button-prev {
        right: 0;
        top: auto;
    }

    .tc-breaking-news-slider457 .swiper-button-prev,
    .tc-breaking-news-slider457 .swiper-container-rtl .swiper-button-next {
        left: 0;
        top: auto;
    }
}

@media (max-width:575px) {
    .tc-slider-style1 {
        padding: 0 15px;
    }
}

.text-muted {
    color: var(--color-gray) !important;
}

.mt15 {
    margin-top: 0.15rem;
}

.dark-theme .top-navbar.style-1 {
    border-bottom: 0px solid rgba(255, 255, 255, 0.0666666667);
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 0.1s ease;
}

.top-navbar.style-1 .sClose-btn-1 {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}

.dark-theme .nav-search-style3 {
    display: none;
    padding: 1rem;
    background-color: #050B0F;
}

.nav-search-style3 {
    display: none;
    padding: 1rem;
    background-color: #ECF4FF;
}

    .nav-search-style3 .info h5 {
        text-transform: capitalize;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }


    .nav-search-style3 .info {
        text-transform: capitalize;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }

    .nav-search-style3 .form .form-group {
        position: relative;
    }

.text-search-style-info {
    font-family: "Kanit";
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.dark-theme .nav-search-style3 .form .form-group .form-control {
    width: 100%;
    height: 50px;
    background-color: #1c2d51;
    border: 1px solid var(--border-gray);
    border-radius: 0;
    padding: 0 90px 0 50px;
    font-size: 14px;
}

.nav-search-style3 .form .form-group .form-control {
    width: 100%;
    height: 50px;
    background-color: #f0f0f0;
    border: 1px solid var(--border-gray);
    border-radius: 0;
    padding: 0 90px 0 50px;
    font-size: 14px;
}

.nav-search-style3 .form .form-group .form-control {
    width: 100%;
    height: 50px;
    background-color: #D8E8FB;
    border: 1px solid var(--border-gray);
    border-radius: 0;
    padding: 0 90px 0 50px;
    font-size: 14px;
}

.nav-search-style3 .form .form-group .icon {
    position: absolute;
    bottom: 10px;
    left: 15px;
    z-index: 2;
    font-size: 20px;
}

.section-title-style2 h3 {
    text-transform: initial;
}

.nav-calen li button {
    color: var(--color-gray);
}

    .nav-calen li button:hover {
        color: var(--color-blue-200) !important;
    }

.nav-search-style3 .form .form-group button {
    position: absolute;
    bottom: 14px;
    right: 10px;
    color: var(--color-blue1);
    background: transparent;
    border: 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.dark-theme .icon-link-small {
    border: 1px solid var(--border-gray);
    padding: 2px;
    border-radius: 50%;
    width: 15px !important;
    height: 15px !important;
}

.icon-link-small {
    border: 1px solid var(--border-gray);
    padding: 2px;
    border-radius: 50%;
    width: 15px !important;
    height: 15px !important;
}

.tc-post-grid-default-overlay {
    position: relative;
}

    .tc-post-grid-default-overlay::before,
    .tc-post-grid-default-overlay::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 5;
        width: 5%;
        height: 100%;
    }

    .tc-post-grid-default-overlay::after {
        background: linear-gradient(270deg, rgba(236, 244, 255, 0) 0%, rgba(236, 244, 255, 0) 100%);
        right: -1px;
    }

    .tc-post-grid-default-overlay::before {
        background: linear-gradient(90deg, rgba(236, 244, 255, 0) 0%, rgba(236, 244, 255, 0) 100%);
        left: 0;
    }

.dark-theme .tc-post-grid-default-overlay::after {
    background: linear-gradient(270deg, rgba(5, 18, 26, 0) 0%, rgba(5, 18, 26, 0) 100%);
    right: -1px;
}

.dark-theme .tc-post-grid-default-overlay::before {
    background: linear-gradient(90deg, rgba(5, 18, 26, 0) 0%, rgba(5, 18, 26, 0) 100%);
    left: 0;
}

.tc-post-grid-default-overlay-r {
    position: relative;
}

    .tc-post-grid-default-overlay-r::before,
    .tc-post-grid-default-overlay-r::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 5;
        width: 10%;
        height: 100%;
    }

    .tc-post-grid-default-overlay-r::after {
        background: linear-gradient(270deg, rgba(5, 18, 26, 1) 0%, rgba(5, 18, 26, 0) 100%);
        right: -1px;
    }

    .tc-post-grid-default-overlay-r::before {
        background: linear-gradient(90deg, rgba(5, 18, 26, 1) 0%, rgba(5, 18, 26, 0) 0%);
        left: 0;
    }

.tc-post-grid-default-overlay-esg {
    position: relative;
}
    /* .tc-post-grid-default-overlay-esg::before,
    .tc-post-grid-default-overlay-esg::after {
        content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: 10%; height: 100%;
    }
     */

    .tc-post-grid-default-overlay-esg::after {
        background: linear-gradient(270deg, rgb(33 50 86) 0%, rgb(33 50 86 / 0%) 0%);
        right: -1px;
    }

    .tc-post-grid-default-overlay-esg::before {
        background: linear-gradient(90deg, rgb(33 50 86) 0%, rgb(33 50 86 / 0%) 0%);
        left: 0;
    }

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-button-prev {
    z-index: 10;
    /* Ensure the navigation arrows are above the gradient */
}

.tc-slider-style1-bg-black .swiper-button-next,
.tc-slider-style1-bg-black .swiper-button-prev {
    background-color: rgba(236, 244, 255, 1);
}

.dark-theme .tc-slider-style1-bg-black .swiper-button-next,
.dark-theme .tc-slider-style1-bg-black .swiper-button-prev {
    background-color: #000000;
}

.dark-theme .card-login {
    background-color: transparent;
    border: 1px solid var(--border-gray);
    padding: 1.25rem 1rem 1rem;
    min-height: 508px;
    /* max-height: 508px; */
    height: 100%;
}

.card-login {
    background-color: transparent;
    border: 1px solid var(--border-gray);
    padding: 1.25rem 1rem 1rem;
    min-height: 508px;
    height: 100%;
    /* max-height: 508px; */
}

.dark-theme .bg-crypto-lasted {
    background-color: #213256;
}

.bg-crypto-lasted {
    background-color: #B2D0F6;
}

#Modal-Share .card-login {
    padding: 1.75rem 1rem 2rem;
}

.card-link + .card-link {
    margin-left: 0;
}

.dark-theme .card-login .card-link {
    /* background-color: transparent;
        border: 1px solid var(--border-gray); */
    /* padding: 0.5rem 1rem; */
    color: var(--color-gray) !important;
    transition: all 0.1s ease;
    padding-bottom: 1rem;
    width: 100%
}

    .dark-theme .card-login .card-link:hover {
        /* background-color: var(--color-blue-3);
        border: 1px solid var(--color-blue-3); */
        color: var(--color-blue-200) !important;
    }

.card-login .card-link {
    /* background-color: transparent;
        border: 1px solid var(--border-gray); */
    /* padding: 0.5rem 1rem; */
    color: var(--color-gray);
    transition: all 0.1s ease;
    width: 100%;
    padding-bottom: 1rem;
}

    .card-login .card-link:hover {
        /* background-color: var(--color-blue-3);
        border: 1px solid var(--color-blue-3); */
        color: var(--color-blue-200) !important;
    }

.dark-theme #Modal-Share .card-login .card-link {
    background-color: transparent;
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%
}

    .dark-theme #Modal-Share .card-login .card-link:hover {
        background-color: var(--color-blue-3);
        border: 1px solid var(--color-blue-3);
    }

#Modal-Share .card-login .card-link {
    background-color: transparent;
    border: 1px solid var(--border-gray);
    color: var(--color-invert);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%
}

    #Modal-Share .card-login .card-link:hover {
        background-color: var(--color-blue-3);
        border: 1px solid var(--color-blue-3);
    }

.card-login .card-link-out {
    background-color: transparent;
    border: 0px solid var(--color-gray-2);
    transition: all 0.1s ease;
    /* padding: 0.5rem 1rem; */
    /* color: var(--color-white); */
    /* padding: 0.5rem 0rem; */
    color: var(--color-main) !important;
    width: 100%
}

    .card-login .card-link-out:hover {
        color: var(--color-blue-200) !important;
    }

.dark-theme .card-login .card-link2 {
    background-color: var(--color-black-2);
    border: 0px solid var(--color-gray-2);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    color: var(--color-white);
    width: 100%;
    margin-bottom: 0.5rem;
}

.card-login .card-link2 {
    background-color: #ECF4FF;
    border: 0px solid #ECF4FF;
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    color: var(--color-invert);
    width: 100%;
    margin-bottom: 0.5rem;
}

    .card-login .card-link2:hover {
        background-color: var(--color-blue-3);
    }

.card-footer {
    border: 0;
}

.border-muted-1 {
    border: 1px solid var(--border-gray)
}

.dark-theme .border-muted-1 {
    border: 1px solid var(--border-gray);
}

.dark-theme .card-header {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid var(--border-gray) !important;
}

.card-header {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgb(0 0 0 / 13%) !important;
}

.chang-pass-02 {
    display: none;
}

@media (max-width:991px) {
    .card-pro-login.d-flex {
        display: math !important;
    }

    .card-login .card-link-out {
        padding: 0;
    }

    .chang-pass-01 {
        display: none;
    }

    .chang-pass-02 {
        display: block;
    }

    .card-login .card-link {
        padding-bottom: 0rem;
    }
}

@media (max-width:767px) {
    .card-pro-login.d-flex {
        display: flex !important;
    }

    .card-login .card-link-out {
        padding: 0.5rem 0rem;
    }

    .chang-pass-01 {
        display: block;
    }

    .chang-pass-02 {
        display: none;
    }

    .card-login .card-link {
        padding-bottom: 1rem;
    }
}

.tc-widget-social-style1 .content .social-card:hover .youtube-icon {
    background-color: #ED340F;
}

    .tc-widget-social-style1 .content .social-card:hover .youtube-icon img {
        filter: invert(1) brightness(20);
    }

.footer-style1 .tc-widget-social-style1 .social-card:hover .twitter-icon {
    background-color: #000000;
}

    .footer-style1 .tc-widget-social-style1 .social-card:hover .twitter-icon img {
        filter: invert(0);
    }

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .twitter-icon {
    background-color: #ffffff;
}

    .dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .twitter-icon img {
        filter: invert(0);
    }

.dark-theme .tc-widget-social-style1 .content .social-card .icon.twitter-icon img {
    filter: invert(0);
}

.tc-widget-social-style1 .content .social-card .icon.twitter-icon img {
    filter: invert(1);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .youtube-icon {
    background-color: #ED340F;
}

    .footer-style1 .tc-widget-social-style1 .social-card:hover .youtube-icon img {
        filter: invert(1) brightness(20);
    }

.tc-widget-social-style1 .content .social-card .icon {
    width: 100%;
    height: 100%;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    margin: 0;
    margin-right: 0.25rem;
}

.footer-style1 .tc-widget-social-style1 .social-card .icon {
    width: 100%;
    height: 100%;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    margin: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Modal-Share .tc-widget-social-style1 .content .social-card .icon {
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    margin-right: 0;
}

#Modal-Share .tc-widget-social-style1 .content .social-card .icon {
    font-size: 26px;
}

    #Modal-Share .tc-widget-social-style1 .content .social-card .icon.twitter-icon {
        font-size: 20px;
    }

.dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card .icon.twitter-icon img {
    min-width: 19px;
    min-height: 19px;
    max-width: 19px;
    width: 100%;
    height: 100%;
    max-height: 19px;
    filter: invert(0);
}

#Modal-Share .tc-widget-social-style1 .content .social-card .icon.twitter-icon img {
    min-width: 19px;
    min-height: 19px;
    max-width: 19px;
    width: 100%;
    height: 100%;
    max-height: 19px;
    filter: invert(1);
}

.dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card .icon img {
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    width: 100%;
    height: 100%;
    max-height: 24px;
    filter: invert(0);
}

#Modal-Share .tc-widget-social-style1 .content .social-card:hover .line-icon img {
    filter: brightness(10);
}

#Modal-Share .tc-widget-social-style1 .content .social-card .icon img {
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    width: 100%;
    height: 100%;
    max-height: 24px;
    filter: invert(0);
}

.footer-style1 .content .info .social-links a {
    width: 40px;
    height: 40px;
}

.dark-theme .footer-style1 .content .info .social-links-border a {
    background-color: #000000 !important;
    border: 1px solid rgb(255 255 255 / 13%);
}

.dark-theme .footer-style1 .social-links-border a {
    background-color: transparent !important;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 50px;
    margin-right: 0.5rem;
}

.footer-style1 .social-links-border a {
    background-color: transparent !important;
    border: 1px solid var(--border-gray);
    border-radius: 50px;
    margin-right: 0.5rem;
}

.dark-theme .footer-style1 .social-links-border a:last-child {
    background-color: transparent !important;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 50px;
    margin-right: 0;
}

.footer-style1 .social-links-border a:last-child {
    background-color: transparent !important;
    border: 1px solid var(--border-gray);
    border-radius: 50px;
    margin-right: 0;
}

.tc-post-list-style2 .items .item .content h5.title {
    letter-spacing: normal;
}

.tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 15px;
}

#dp1200 .tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 15px;
}

.lhlh-2 {
    line-height: normal;
}

.tc-widget-social-style1 .content-footer .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 13%;
    margin-bottom: 15px;
}

.tc-widget-social-style1 .content .social-card-1 {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.33%;
    margin-bottom: 15px;
}

.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-next,
.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-prev {
    background-color: var(--bg-invert);
    border: 1px solid rgba(153, 153, 153, 0.5);
}

.dark-theme .img-baket {
    filter: invert(0);
}

.img-baket {
    filter: invert(1);
}

.basket-invert:hover img {
    filter: invert(0) !important;
}

.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-prev,
.tc-latest-posts-style4 .tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    right: 35px;
    left: auto;
}

.tc-widget-social-style1 .content .social-card .social-content {
    display: flex;
    align-items: baseline;
}

.tc-widget-social-style1 .content .social-card:hover .line-icon {
    background-color: #0FD53D;
}

.dark-theme .tc-widget-social-style1 .content .social-card:hover .tiktok-icon {
    background-color: var(--color-white);
}

.tc-widget-social-style1 .content .social-card:hover .tiktok-icon {
    background-color: var(--color-black);
}

.dark-theme .tc-widget-social-style1 .content .social-card:hover .tiktok-icon img {
    filter: invert(100%) brightness(10);
}

.tc-widget-social-style1 .content .social-card .tiktok-icon img {
    filter: invert(1);
}

.tc-widget-social-style1 .content .social-card:hover .tiktok-icon img {
    filter: invert(0);
}

.dark-theme .tc-widget-social-style1 .content .social-card .tiktok-icon img {
    filter: invert(0);
}

.dark-theme .tc-widget-social-style1 .content .social-card:hover .youtube-icon {
    background-color: var(--color-red);
}

.tc-widget-social-style1 .content .social-card:hover .youtube-icon {
    background-color: var(--color-red);
}

.dark-theme .tc-widget-social-style1 .content .social-card:hover .youtube-icon img {
    filter: invert(100%) brightness(10);
}

.tc-widget-social-style1 .content .social-card .youtube-icon img {
    filter: invert(0);
}

.tc-widget-social-style1 .content .social-card:hover .youtube-icon img {
    filter: invert(1) brightness(10);
}

.dark-theme .tc-widget-social-style1 .content .social-card .youtube-icon img {
    filter: invert(0);
}

.tc-widget-social-style1 .content .social-card:hover .line-icon img {
    filter: invert(100%) brightness(10);
}

.dark-theme .tc-widget-social-style1 .content .social-card:hover .twitter-icon {
    background-color: #ffffff;
}

    .dark-theme .tc-widget-social-style1 .content .social-card:hover .twitter-icon img {
        filter: invert(1);
    }

.dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card:hover .twitter-icon {
    background-color: #ffffff;
}

    .dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card:hover .twitter-icon img {
        filter: invert(1);
    }

#Modal-Share .tc-widget-social-style1 .content .social-card:hover .twitter-icon {
    background-color: var(--color-black);
}

    #Modal-Share .tc-widget-social-style1 .content .social-card:hover .twitter-icon img {
        filter: invert(0);
    }

.dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card .tiktok-icon img {
    filter: invert(0);
}

#Modal-Share .tc-widget-social-style1 .content .social-card .tiktok-icon img {
    filter: invert(1);
}

.dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card:hover .tiktok-icon img {
    filter: invert(1);
}

#Modal-Share .tc-widget-social-style1 .content .social-card:hover .tiktok-icon img {
    filter: invert(0);
}

.dark-theme #Modal-Share .tc-widget-social-style1 .content .social-card:hover .tiktok-icon {
    background-color: var(--color-white);
}

#Modal-Share .tc-widget-social-style1 .content .social-card:hover .tiktok-icon {
    background-color: var(--color-black);
}

.tc-widget-social-style1 .content .social-card:hover .twitter-icon {
    background-color: var(--color-black);
}

    .tc-widget-social-style1 .content .social-card:hover .twitter-icon img {
        filter: invert(0);
    }
/* ////////////////////// */

.footer-style1 .tc-widget-social-style1 .social-card:hover .line-icon {
    background-color: #0FD53D;
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .tiktok-icon {
    background-color: var(--color-white);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .tiktok-icon {
    background-color: var(--color-black);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .tiktok-icon img {
    filter: invert(100%) brightness(10);
}

.footer-style1 .tc-widget-social-style1 .social-card .tiktok-icon img {
    filter: invert(1);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .tiktok-icon img {
    filter: invert(0);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card .tiktok-icon img {
    filter: invert(0);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .youtube-icon {
    background-color: var(--color-red);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .youtube-icon {
    background-color: var(--color-red);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .youtube-icon img {
    filter: invert(100%) brightness(10);
}

.footer-style1 .tc-widget-social-style1 .social-card .youtube-icon img {
    filter: invert(0);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card .icon.twitter-icon img {
    filter: invert(0);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card:hover .icon.twitter-icon img {
    filter: invert(1);
}

.footer-style1 .tc-widget-social-style1 .social-card .icon.twitter-icon img {
    filter: invert(1);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .icon.twitter-icon img {
    filter: invert(0);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .youtube-icon img {
    filter: invert(1) brightness(20);
}

.dark-theme .footer-style1 .tc-widget-social-style1 .social-card .youtube-icon img {
    filter: invert(0);
}

.footer-style1 .tc-widget-social-style1 .social-card:hover .line-icon img {
    filter: invert(100%) brightness(10);
}

.sumary-trade-day .sumary-trade-day-head {
    border-bottom: 1px solid var(--border-gray);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.sumary-trade-day .table > :not(caption) > * > * {
    padding: .57rem .57rem;
    background-color: var(--bs-table-bg);
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: var(--border-gray) !important;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    font-weight: 300;
}

.dark-theme .sumary-trade-day .sumary-trade-day-head {
    border-bottom: 1px solid var(--border-gray);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.dark-theme .sumary-trade-day .table > :not(caption) > * > * {
    padding: .57rem .57rem;
    background-color: var(--bs-table-bg);
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    border-bottom-color: var(--border-gray) !important;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    font-weight: 300;
}

.sumary-trade-day .table thead tr th {
    font-weight: 300;
    color: var(--color-gray);
    vertical-align: middle;
}

    .sumary-trade-day .table thead tr th:last-child {
        text-align: right;
    }

.tc-slider-style1 .swiper-button-next:hover,
.tc-slider-style1 .swiper-button-prev:hover {
    background-color: var(--color-blue);
    border-color: rgba(153, 153, 153, 0.5);
}

.tc-slider-style2 .swiper-button-next,
.tc-slider-style2 .swiper-button-prev {
    transition: all 0.1s ease;
}

    .tc-slider-style2 .swiper-button-next:hover,
    .tc-slider-style2 .swiper-button-prev:hover {
        border-color: var(--color-white);
        background-color: var(--color-blue);
    }

        .tc-slider-style2 .swiper-button-next:hover::after,
        .tc-slider-style2 .swiper-button-prev:hover::after {
            color: var(--color-white);
        }

.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-next,
.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-prev {
    width: 25px;
    height: 25px;
}

.tc-slider-style1.slider-color-creamy1 .swiper-button-next,
.tc-slider-style1.slider-color-creamy1 .swiper-button-prev {
    width: 25px;
    height: 25px;
}

.max-h-311px {
    max-height: 225px;
    overflow: auto;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-lg-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: var(--color-invert);
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease;
}

.nav-link-member .nav-link {
    padding: .5rem 0.5rem;
}

.tc-post-overlay-default .img .tags a:hover {
    color: var(--color-blue-200);
}

.nav-link:hover {
    color: var(--color-blue-200);
    background-color: transparent;
    border-radius: 0;
}

.nav-link-800:hover {
    color: #1560BD !important;
    background-color: transparent;
    border-radius: 0;
}

.dark-theme .nav-pills .nav-link.active,
.dark-theme .nav-pills .show > .nav-link {
    color: var(--color-white) !important;
    background-color: var(--color-blue-3);
    border-radius: 0;
    font-weight: 500;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-black) !important;
    background-color: #B2D0F6;
    border-radius: 0;
    font-weight: 500;
}

.dark-theme .tc-latest-posts-style4 {
    background-color: var(--color-blue-2);
    color: #fff;
}

.bg-gray2 {
    background-color: transparent !important;
}

.tc-latest-posts-style4 {
    background-color: var(--color-blue-200);
    color: #fff;
}

.tc-latest-posts-style4 {
    background-color: #B2D0F6;
    color: var(--color-invert);
}

.dark-theme .swiper-wrapper-esg .content {
    background-color: var(--color-black);
}

.swiper-wrapper-esg .content {
    background-color: var(--color-white);
}

.knowledge-style .swiper-wrapper-esg .content {
    background-color: transparent;
}

.tc-latest-posts-style4 .swiper-slide .item {
    min-height: unset;
}

.tc-post-list-style2 .items .item:last-of-type {
    padding-bottom: 16px;
}

.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-next:hover,
.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-prev:hover {
    background-color: var(--color-blue);
}

.tc-post-grid-default-2 .item .img {
    position: relative;
}

    .tc-post-grid-default-2 .item .img .tags {
        position: absolute;
        top: 15px;
        left: 15px;
    }

.tc-post-overlay-default-2 .img::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, 0), transparent);
    z-index: 1;
}

small {
    font-size: 12px;
}

.dark-theme .nav-pills-2 .nav-link.active,
.dark-theme .nav-pills .show > .nav-link {
    color: var(--color-blue) !important;
    background-color: #05112F;
    border-radius: 0;
    font-weight: 500;
}

.dark-theme .bg-blue-200-invert {
    border: 1px solid #05112F;
}

.bg-blue-200-invert {
    border: 0px solid #05112F;
}

.nav-pills-2 .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-blue) !important;
    background-color: #D8E8FB;
    border-radius: 0;
    font-weight: 500;
}

.dark-theme .nav-pills-3 .nav-link.active,
.dark-theme .nav-pills .show > .nav-link {
    color: var(--color-white) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    position: relative;
    /* เพิ่มเพื่อให้ pseudo-element อยู่ในตำแหน่งของ element */
}

.nav-pills-3 .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-invert) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    position: relative;
    /* เพิ่มเพื่อให้ pseudo-element อยู่ในตำแหน่งของ element */
}

.dark-theme .nav-pills-3 .nav-link.active::before,
.dark-theme .nav-pills .show > .nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    /* เลื่อนเส้นลงมาด้านล่าง */
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    /* กำหนดความยาวเส้น 50% */
    border-bottom: 2px solid var(--color-white);
    /* เปลี่ยนขนาด border เป็น 2px */
}

.nav-pills-3 .nav-link.active::before,
.nav-pills .show > .nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    /* เลื่อนเส้นลงมาด้านล่าง */
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    /* กำหนดความยาวเส้น 50% */
    border-bottom: 2px solid var(--color-invert);
    /* เปลี่ยนขนาด border เป็น 2px */
}

.tc-latest-posts-style4 .swiper-wrapper-esg .swiper-slide::after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 0px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0);
}
/* =============================================================== [ container grid ] ================================================================*/

.container-grid {
    display: grid;
    grid-template-columns: 75% auto;
    gap: 30px;
    /* padding: 1rem; */
    align-items: flex-start;
}

    .container-grid .left {
        display: grid;
        grid-template-areas: "item1""item2""item5""item6""item8""item10";
        gap: 30px;
        width: 100%;
    }

    .container-grid .right {
        display: grid;
        grid-template-areas: "item3""item7""item4""item9";
        gap: 30px;
        width: 100%;
    }

@media (max-width: 991px) {
    .container-grid {
        grid-template-columns: 100%;
        grid-template-areas: "item1""item2""item3""item4""item5""item6""item7""item8""item9""item10";
    }

        .container-grid .left,
        .container-grid .right {
            display: contents;
        }

    .footer-style1 .content .info .social-links {
        margin-top: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 767.98px) {
    .lhlh-2 {
        line-height: 1.3;
    }
}

@media (max-width: 575px) {
    .container-grid {
        grid-template-columns: 100%;
        grid-template-areas: "item1""item2""item3""item4""item5""item6""item7""item8""item9""item10";
    }
        /* เอา areas left right ออก */
        .container-grid .left,
        .container-grid .right {
            display: contents;
        }
}

.container-grid .item {
    /* padding: 20px; */
    color: white;
}

.container-grid .item1 {
    /* background-color: #1abc9c; */
    grid-area: item1;
    /* height: 857px; */
}

.container-grid .item2 {
    /* background-color: #2ecc71; */
    grid-area: item2;
    /* height: 390px; */
}

.container-grid .item3 {
    /* background-color: #3498db; */
    grid-area: item3;
    /* height: 677px; */
}

.container-grid .item4 {
    /* background-color: #9b59b6; */
    grid-area: item4;
    /* height: 530px; */
}

.container-grid .item5 {
    /* background-color: #34495e; */
    grid-area: item5;
    /* height: 260px; */
}

.container-grid .item6 {
    /* background-color: #f1c40f; */
    grid-area: item6;
    /* height: 129px; */
}

.container-grid .item7 {
    /* background-color: #e67e22; */
    grid-area: item7;
    /* height: 351px; */
}

.container-grid .item8 {
    /* background-color: #e74c3c; */
    grid-area: item8;
    /* height: 110px; */
}

.container-grid .item9 {
    /* background-color: #ecf0f1; */
    /* color: black; */
    grid-area: item9;
    /* height: 245px; */
}

.container-grid .item10 {
    /* background-color: #95a5a6; */
    grid-area: item10;
    /* height: 90px; */
}

.tc-widget-categories-style6 .icon-title {
    padding: 1rem;
    background-color: var(--color-white);
    min-width: 64px;
    justify-content: center;
}

.tc-widget-categories-style6 .categories-content .item {
    background-color: #213256;
    padding: 0;
    margin-bottom: 15px;
    justify-content: flex-start;
    transition: all 0.1s ease;
}

    .tc-widget-categories-style6 .categories-content .item:hover {
        background-color: var(--color-blue-3);
    }

.tc-widget-categories-style6 .categories-content .numbs {
    padding: 0 15px;
}
/* =============================================================== [ end container grid ] ================================================================*/
/*------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------activities and news---box-calendar----------------------------------------------------------------------------------------------*/

.bg-event-news {
    background: url(../images/bg_tr_news.webp);
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
    width: 100%;
    /* margin-top: 0; */
    margin-top: -3px;
}

.box-calendar {
    background-color: var(--color-black);
    padding: 0px 0;
}

.tex-calendar {
    text-align: center;
    margin: 0px auto;
    color: #fff;
    padding: 20px 0 10px;
    font-size: 23px;
    font-weight: 400;
}
/* .cover_next-event { background-color: #e7eaf1; color: #000; font-size: 16px; padding: 25px 40px; -webkit-box-shadow: 0 12px 34px rgb(0 0 0 / 12%); -moz-box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12); box-shadow: 2px 9px 9px 2px rgb(0 0 0 / 0%); } */

.cover_next-event {
    background-color: #e7eaf1;
    color: #000;
    font-size: 16px;
    padding: 25px 40px;
    -webkit-box-shadow: 0 12px 34px rgb(0 0 0 / 12%);
    -moz-box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
    box-shadow: 2px 9px 9px 2px rgb(0 0 0 / 0%);
    width: 450px;
    height: 300px;
}

    .cover_next-event .head-1 {
        font-size: 18px;
        font-weight: 800;
        margin-bottom: 5px;
    }

.box-day {
    padding: 5px;
    background-color: #ffffff;
    color: #242529;
    font-weight: bold;
    font-size: 14px;
    border-left: solid #031c6c 10px;
}

.cover_calendar-news .content {
    background-color: #fff0;
}

.cover_calendar-news .content {
    position: relative;
    z-index: 1;
}

.box-event-d {
    float: left;
    width: 45%;
}

.responsive-tabs.tap-newsMl {
    margin-left: 40px;
}

.sub-hrad1 {
    border-bottom: 1px solid#000;
    margin-bottom: 15px;
}

.head-2 {
    font-size: 18px;
    margin: 0px auto;
}

.box-bt-news {
    margin: 80px 0;
}

@media screen and (max-width:990.98px) {
    .cover_next-event {
        font-size: 16px;
        padding: 25px 28px;
        width: 330px;
        height: auto;
    }

    .head-2 {
        font-size: 14px;
        margin: 0px auto;
    }

    .box-event-d {
        float: left;
        width: 50%;
    }

    .cover-big-head.cover-big-head-2.sub04 {
        margin-bottom: 34px;
        margin-top: 70px;
    }

    .responsive-tabs.tap-newsMl {
        margin-left: 0px;
    }

    .box-bt-news {
        margin: 20px 0;
    }

    .bg-event-news {
        padding-bottom: 85px;
    }
}

@media screen and (max-width:767px) {
    .cover_next-event {
        font-size: 16px;
        padding: 25px 35px;
        width: 100%;
        height: auto;
    }

    .cover_next-event {
        -webkit-box-shadow: 0 12px 34px rgb(0 0 0 / 12%);
        -moz-box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12);
        box-shadow: 3px 10px 10px 0px rgb(0 0 0 / 2%);
    }

    .tc-post-grid-default-overlay-esg::before {
        background: linear-gradient(90deg, rgb(33 50 86) 0%, rgb(33 50 86 / 0%) 0%);
        left: 0;
    }
}

@media screen and (max-width:414px) {
    .cover-big-head.cover-big-head-2.sub04 {
        margin-top: 50px;
    }
}

@media screen and (max-width:375px) {
    .box-event-d {
        float: left;
        width: 100%;
    }
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: none;
}

.dark-theme .tail-datetime-calendar .calendar-actions {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    display: table;
    border-spacing: 0;
    border-collapse: separate;
    background-color: var(--color-blue-2);
}

.tail-datetime-calendar .calendar-actions {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    display: table;
    border-spacing: 0;
    border-collapse: separate;
    background-color: #B2D0F6;
}

.dark-theme .tail-datetime-calendar .calendar-datepicker {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    /* position: relative; */
    background-color: var(--color-black-2);
}

.tail-datetime-calendar .calendar-datepicker {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    /* position: relative; */
    background-color: #ECF4FF;
}

    .tail-datetime-calendar .calendar-datepicker:after {
        top: 0;
        left: 0;
        right: 0;
        content: "";
        position: absolute;
        border-top: 0px solid #e6e6e6;
    }

    .tail-datetime-calendar .calendar-datepicker table tr th,
    .tail-datetime-calendar .calendar-datepicker table tr td {
        color: var(--color-invert);
        width: 50px;
        height: 35px;
        padding: 0;
        position: relative;
        font-size: 14px;
        text-align: center;
        font-weight: 400;
        text-shadow: none;
        line-height: 30px;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
    }

        .tail-datetime-calendar .calendar-datepicker table tr td.date-today:before {
            display: none;
        }

        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-today,
        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-month.date-today,
        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-year.date-today,
        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade.date-today {
            color: var(--bg-invert);
            border-color: var(--color-invert);
            background-color: var(--color-invert);
            font-weight: 500;
        }

        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select,
        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-month.date-select,
        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-year.date-select,
        .tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade.date-select {
            border-color: var(--color-white);
            color: var(--color-white);
        }

            .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select span,
            .tail-datetime-calendar .calendar-datepicker table tr td.calendar-month.date-select span,
            .tail-datetime-calendar .calendar-datepicker table tr td.calendar-year.date-select span,
            .tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade.date-select span {
                color: var(--color-blue);
                font-weight: 500;
            }

.tail-datetime-calendar .calendar-actions span {
    color: var(--color-invert);
}

.dark-theme .tail-datetime-calendar .calendar-actions span[data-action]:hover {
    opacity: 0.95;
    background-color: var(--color-blue-3);
}

.tail-datetime-calendar .calendar-actions span[data-action]:hover {
    opacity: 0.95;
    background-color: #1560bd;
    color: #ffffff;
}

.box-event {
    background-color: #ECF4FF;
    padding: 1rem;
    & ul

{
    padding: 0 1rem;
    & li.green

{
    list-style: disc;
    color: #0FD53D;
}

& li.red {
    list-style: disc;
    color: #ED340F;
    position: relative;
    left: 20%;
}

& li.blue {
    list-style: disc;
    color: #00C0FF;
}

& li p {
    font-size: 12px;
    font-weight: 200;
}

}

& .list-container {
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
}

    & .list-container p {
        font-size: 10px;
        margin-right: 0.5rem;
    }

& .list-item {
    display: flex;
    align-items: baseline;
}

    & .list-item::before {
        content: "•";
        margin-right: 5px;
        color: var(--color-white);
        font-size: 16px;
        position: relative;
        top: 1px;
    }

& .list-item-green::before {
    content: "•";
    margin-right: 5px;
    color: #0FD53D;
    font-size: 16px;
}

& .list-item-red::before {
    content: "•";
    margin-right: 5px;
    color: #ED340F;
    font-size: 16px;
}

& .list-item-blue::before {
    content: "•";
    margin-right: 5px;
    color: #00C0FF;
    font-size: 16px;
}

}

.mx-h12px {
    max-height: 12px;
}

.bg-green {
    background-color: #03BB00 !important;
}

    .bg-green:hover {
        background-color: #40ff3d !important;
    }

.cyan {
    color: #00C0FF !important;
}

.bg-green-soft {
    background-color: #003800 !important;
    color: #03BB00 !important;
}

.bg-purple-soft {
    background-color: #390756 !important;
    color: #a914fe !important;
}

.scrollable-container {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

.border-bottom-dashed {
    border-bottom-style: dashed !important;
}

.footer-style1 .content {
    padding: 70px 0 55px;
}

    .footer-style1 .content .link-group .f-link:hover {
        color: var(--color-blue-200) !important;
        text-decoration: none !important;
    }

    .footer-style1 .content .info .foot-logo img {
        width: 260px;
        -o-object-fit: contain;
        object-fit: cover;
    }

.footer-style1 .to_top {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.footer-style1 .content .link-group .title {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.4;
}

.dark-theme .footer-style1 .content .link-group .f-link {
    font-size: 12px;
    color: var(--color-gray);
    margin: 4px 0;
}

.footer-style1 .content .link-group .f-link {
    font-size: 12px;
    color: var(--color-gray);
    margin: 4px 0;
}

.footer-style1 .content .info p {
    font-size: 12px;
    color: var(--color-gray);
}

.dark-theme .accordion-button {
    padding: 1rem 0.5rem;
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    color: var(--color-invert);
    border-bottom: 1px solid rgba(255, 255, 255, 0.125);
}

.accordion-button {
    padding: 1rem 0.5rem;
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    color: var(--color-invert);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.accordion-item:last-child .accordion-button {
    border-bottom: 0px solid rgba(255, 255, 255, 0.125);
}

.dark-theme .accordion-body {
    padding: .5rem .75rem;
    background-color: var(--color-black-2);
    ;
    border-bottom: 2px solid rgba(255, 255, 255, 0.125);
}

.accordion-body {
    padding: .5rem .75rem;
    background-color: #e3efff;
    border-bottom: 2px solid rgba(0, 0, 0, 0.125);
}

.accordion-item {
    background-color: transparent;
    border: 0px solid rgba(255, 255, 255, 0.125);
}

.dark-theme .accordion-item:hover {
    background-color: var(--color-black-2);
    border: 0px solid rgba(255, 255, 255, 0.125);
}

.accordion-item:hover {
    background-color: #ECF4FF;
    border: 0px solid rgba(255, 255, 255, 0.125);
}

.accordion-item .f-link {
    font-size: 12px;
    color: var(--color-gray);
    margin-bottom: 4px;
    width: 100%;
}

.text-success {
    color: #03BB00 !important;
}

.text-danger {
    color: #ED340F !important;
}

.text-warning {
    color: #D4A518 !important;
}

.dark-theme .accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    border-bottom: 1px solid rgba(255, 255, 255, 0.125);
}

.accordion-button:focus {
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
}

.accordion-item .f-link:hover {
    font-size: 12px;
    color: var(--color-blue-200);
    margin-bottom: 4px;
}

.dark-theme .accordion-button:not(.collapsed) {
    color: var(--color-invert);
    background-color: transparent;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(255, 255, 255, 0.125);
}

.accordion-button:not(.collapsed) {
    color: var(--color-invert);
    background-color: transparent;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.dark-theme .accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    transition: transform .2s ease;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2305121A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem;
    transition: transform .2s ease;
}

.dark-theme .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.flip-x {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0);
}

.dark-theme .navbar.style-1 {
    border-bottom: 2px solid #eeeeee;
}

.tc-post-overlay-default .img .tags {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 14px;
    padding: 9px 18px;
    background-color: #fff;
    color: #000;
    -webkit-margin-end: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    text-transform: capitalize;
    z-index: 5;
    text-transform: none;
}

.tc-post-overlay-default .content h2.title {
    font-weight: 500;
}

.border-25 {
    background-color: var(--color-blue);
    border-radius: 50px;
    width: 20px;
    height: 20px;
}

.tc-post-overlay-default .img::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
}

.recommend-foryou .tc-post-overlay-default .img::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.opinion-overlay .tc-post-overlay-default .img::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.max-w-90 {
    max-width: 90px !important;
}

.max-w-60 {
    max-width: 60px !important;
}

.max-w-70 {
    max-width: 70px !important;
}

.dark-theme .tc-post-overlay-default .content {
    position: relative;
    top: 0;
    bottom: 0;
    transform: translateY(0);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 5;
    padding: 20px 0;
}

.dark-theme .tc-post-overlay-default .content-1 {
    position: relative;
    top: 0;
    bottom: 0;
    transform: translateY(0);
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 5;
    padding: 20px 0;
}

.dark-theme .market-focus .tc-post-overlay-default .content {
    position: absolute;
    top: auto;
    bottom: -1px;
    width: 100%;
    transform: unset1;
    background: linear-gradient(180deg, rgb(102 102 102 / 0%) 13%, rgb(5 18 26) 90%);
    z-index: 5;
    padding: 0;
    height: 75%;
}

    .dark-theme .market-focus .tc-post-overlay-default .content h6 {
        position: absolute;
        bottom: 0;
    }

@media screen and (max-width:1200px) {
    .dark-theme .market-focus .tc-post-overlay-default .content h6 {
        /* bottom: 16px;   */
    }
}

.dark-theme .tc-post-overlay-default .content-2 {
    /* position: relative; */
    /* top: 0; */
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 5;
}

.opinion-overlay .tc-post-overlay-default .content-2 {
    position: absolute;
    /* top: 0; */
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 5;
    padding-bottom: 15px;
}

.tc-post-overlay-default .content {
    position: relative;
    top: 0;
    bottom: 0;
    transform: translateY(0);
    width: 100%;
    background: linear-gradient(180deg, rgba(236, 244, 255, 1) 0%, rgba(236, 244, 255, 1) 100%);
    z-index: 5;
    padding: 20px 0;
}

.tc-post-overlay-default .content-1 {
    position: relative;
    top: 0;
    bottom: 0;
    transform: translateY(0);
    width: 100%;
    background: linear-gradient(180deg, rgba(236, 244, 255, 1) 0%, rgba(236, 244, 255, 1) 100%);
    z-index: 5;
    padding: 20px 0;
}

.market-focus .tc-post-overlay-default .content {
    position: absolute;
    top: auto;
    bottom: -1px;
    width: 100%;
    transform: unset;
    z-index: 5;
    padding: 0;
    background: linear-gradient(180deg, rgb(102 102 102 / 0%) 13%, rgb(5 18 26) 90%);
    height: 75%;
}

    .market-focus .tc-post-overlay-default .content h6 {
        position: absolute;
        bottom: 0;
    }

@media screen and (max-width:1200px) {
    .market-focus .tc-post-overlay-default .content h6 {
        /* bottom: 16px;   */
    }
}

.tc-post-overlay-default .content-2 {
    /* position: relative; */
    /* top: 0; */
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(236, 244, 255, 1) 0%, rgba(236, 244, 255, 1) 100%);
    z-index: 5;
}

.tc-post-overlay-default .overlay-content::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
}

.dark-theme .bg-black {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 0%);
}

.bg-black {
    background: linear-gradient(180deg, rgba(236, 244, 255, 1) 0%, rgba(236, 244, 255, 1) 0%);
}

.active-bgs .bg-black {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%);
}

.dark-theme .bg-black-2 {
    background-color: var(--color-black-2);
}

.bg-black-2 {
    background-color: #ECF4FF;
}

.img-cover img {
    width: 100%;
    height: 100%;
    /* -o-object-fit: unset; object-fit: unset; object-position: top; aspect-ratio: 16/9; */
}

.img-icon-svg {
    max-width: 12px;
    top: -1px;
}

.img-icon-svg-19 {
    max-width: 19px;
    top: -1px;
    position: relative;
}

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-button-prev {
    width: 25px;
    height: 25px;
}

.mySwiper-new .swiper-button-next,
.mySwiper-new .swiper-button-prev {
    width: 25px;
    height: 25px;
}

.mySwiper-new-2 .swiper-button-next,
.mySwiper-new-2 .swiper-button-prev {
    width: 25px;
    height: 25px;
}

.dark-theme .navbar-light .navbar-toggler {
    /* color: rgb(255 255 255); */
    border-radius: 50px;
    background-color: transparent;
    border: 1px solid var(--border-gray);
    width: 40px;
    height: 40px;
    padding: 0px 8.5px;
    transition: all 0.1s ease;
}

.navbar-light .navbar-toggler {
    /* color: rgb(255 255 255); */
    border-radius: 50px;
    border: 1px solid var(--border-gray);
    width: 40px;
    height: 40px;
    padding: 0px 8.5px;
    transition: all 0.1s ease;
}

    .navbar-light .navbar-toggler:hover {
        border: 1px solid var(--border-gray);
        background-color: var(--color-blue);
    }

        .navbar-light .navbar-toggler:hover span {
            filter: invert(0);
        }

.navbar-toggler-icon {
    width: 1.35rem;
    height: 1.35rem;
    transition: all 0s ease;
}

.item6 {
    .max-w975

{
    max-width: 957px;
}

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-container-rtl .swiper-button-prev {
    right: -30px;
}

.tc-slider-style1 .swiper-button-prev,
.tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    left: -30px;
}

}

.tc-slider-style1.slider-color-creamy1 .swiper-button-next:hover,
.tc-slider-style1.slider-color-creamy1 .swiper-button-prev:hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.tail-datetime-calendar .calendar-actions span {
    padding: 8px 0;
}

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-button-prev,
.mySwiper-new .swiper-button-next,
.mySwiper-new .swiper-button-prev,
.mySwiper-new-2 .swiper-button-next,
.mySwiper-new-2 .swiper-button-prev {
    border: 1px solid rgba(153, 153, 153, 0.5);
    background-color: var(--bg-invert);
    align-items: center;
    transition: all 0.1s ease;
}

    .tc-slider-style1 .swiper-button-next:hover,
    .tc-slider-style1 .swiper-button-prev:hover,
    .mySwiper-new .swiper-button-next:hover,
    .mySwiper-new .swiper-button-prev:hover,
    .mySwiper-new-2 .swiper-button-next:hover,
    .mySwiper-new-2 .swiper-button-prev:hover {
        background-color: var(--color-blue);
    }

    .mySwiper-new .swiper-button-prev:after,
    .mySwiper-new .swiper-container-rtl .swiper-button-next:after {
        content: 'prev';
        font-family: swiper-icons;
        font-size: 10px;
        color: #eeeeee !important;
        line-height: 1.5;
        position: relative;
        top: 0;
        left: 0;
    }

    .mySwiper-new .swiper-button-next:after,
    .mySwiper-new .swiper-container-rtl .swiper-button-prev:after {
        content: 'next';
        font-family: swiper-icons;
        font-size: 10px;
        color: #eeeeee !important;
        line-height: 1.5;
        position: relative;
        top: 0;
        left: 1px;
    }

    .mySwiper-new-2 .swiper-button-prev:after,
    .mySwiper-new-2 .swiper-container-rtl .swiper-button-next:after {
        content: 'prev';
        font-family: swiper-icons;
        font-size: 10px;
        color: #eeeeee !important;
        line-height: 1.5;
        position: relative;
        top: 1px;
        left: 0;
    }

    .mySwiper-new-2 .swiper-button-next:after,
    .mySwiper-new-2 .swiper-container-rtl .swiper-button-prev:after {
        content: 'next';
        font-family: swiper-icons;
        font-size: 10px;
        color: #eeeeee !important;
        line-height: 1.5;
        position: relative;
        top: 1px;
        left: 1px;
    }

.border-bottom-dashed {
    border-bottom-style: dashed !important;
}

.box-news .box-news-body {
    transition: all 0.1s ease;
}

.icon-share-a {
    transition: all 0.1s ease;
    background-color: transparent;
    cursor: pointer;
}

    .icon-share-a:hover {
        background-color: var(--color-blue);
        border: 1px solid var(--border-gray);
    }

.tail-datetime-calendar .calendar-actions span.label {
    line-height: 40px;
}
/* .box-news .box-news-body:hover{ background-color: var(--color-blue-2-dark); } */

.box-news .box-news-body:hover a,
.box-news .box-news-body:hover h5 {
    text-decoration: none !important;
    cursor: pointer;
}

.card-news {
    cursor: pointer;
}

    .card-news h6 {
        color: var(--color-invert);
        transition: all 0.1s ease;
    }

    .card-news .card-box-detail {
        color: var(--color-invert);
        transition: all 0.1s ease;
        font-weight: 500;
        line-height: 1.3;
    }

    .card-news:hover h6 {
        /* color: var(--color-blue); */
        text-decoration: none !important;
        transform: scale(1.015);
    }

    .card-news:hover .card-box-detail {
        /* color: var(--color-blue); */
        text-decoration: none !important;
        transform: scale(1.015);
    }

    .card-news h2 {
        color: var(--color-white)
    }

    .card-news:hover h2 {
        /* color: var(--color-blue); */
        text-decoration: none !important;
    }

.dark-theme .card-news-white h6 {
    color: var(--color-white);
    transition: all 0.1s ease;
}

.card-news-white h6 {
    color: var(--color-white);
    transition: all 0.1s ease;
}

.card-news-white:hover h6 {
    /* color: var(--color-white); */
    text-decoration: none !important;
}

.card-news .img {
    overflow: hidden;
}

    .card-news .img img.img-opinion {
        border-radius: 50%;
    }

    .card-news .img img {
        transform: scale(1);
        overflow: hidden;
        transition: all 0.1s ease;
    }

.card-news:hover .img img {
    transform: scale(1.05);
    background-color: var(--color-blue-2-dark);
}

    .card-news:hover .img img.img-opinion {
        transform: scale(1.00);
        background-color: transparent;
        overflow: unset;
    }

.card-news .img-cover-op {
    overflow: unset;
}

.card-news:hover .img-cover-op img {
    transform: scale(1.025);
    background-color: transparent;
}

.card-news .img-4-3 img {
    /* aspect-ratio: 4/3; object-fit: cover; */
}

.col-img-news {
    flex: 0 0 auto;
    width: 33.33333%;
    min-width: 135px;
    max-width: 135px;
}

.col-content-news {
    flex: 0 0 auto;
    width: 66.66666%;
    padding-left: 0 !important;
}

.news-detail .col-img-news {
    flex: 0 0 auto;
    width: 33.33333%;
    min-width: 135px;
    max-width: 135px;
}

.news-detail .col-content-news {
    flex: 0 0 auto;
    width: 66.66666%;
    padding-left: 0 !important;
}

.box-news-contents a {
    transition: all 0.1s ease;
}

.box-news-contents:hover a {
    color: var(--color-blue-200);
    text-decoration: none !important;
    /* padding-left: 4px; */
}

.box-news-contents-h6 h6 {
    transition: all 0.1s ease;
    cursor: pointer;
}

.box-news-contents-h6:hover h6 {
    color: var(--color-blue-200);
    text-decoration: none !important;
}

.dark-theme .btn-links-outline {
    background-color: var(--color-black-2);
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover

{
    background-color: var(--color-blue-3);
    color: var(--color-white);
    border: 1px solid var(--color-blue-3);
}

}

.dark-theme .btn-links {
    background-color: var(--color-blue);
    border: 1px solid rgb(22 96 189);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    &:hover

{
    background-color: var(--color-blue-3);
    border: 1px solid var(--color-blue-3);
}

}

.btn-links-outline {
    background-color: #ECF4FF;
    border: 1px solid rgba(102, 102, 102, 0.25);
    color: var(--color-black);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: #0F4486;
    color: var(--color-white);
    border: 1px solid #0F4486;
}

}

.btn-links {
    background-color: var(--color-blue);
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    &:hover

{
    background-color: #0F4486;
    color: var(--color-white);
    border: 1px solid #0F4486;
}

}

.btn-links img {
    width: 22px;
}
/* .btn-links-outline { background-color: var(--color-black-2); border: 1px solid var(--border-gray); color: var(--color-white); transition: all 0.1s ease; padding: 0.5rem 1rem; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; &:hover { background-color: var(--color-blue-3); color: var(--color-white); border: 1px solid var(--color-blue-3); } } */
/* .btn-links { background-color: var(--color-blue); border: 1px solid rgb(22 96 189); color: var(--color-white); transition: all 0.1s ease; padding: 0.5rem 1rem; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; &:hover { background-color: var(--color-blue-3); border: 1px solid var(--color-blue-3); } } */

.bg-w-primary-200 {
    background-color: var(--color-blue-200);
    & .text-invert

{
    color: var(--color-black) !important;
}

}

.dark-theme .bg-w-primary-200 {
    background-color: transparent;
    & .text-invert

{
    color: var(--color-white) !important;
}

}

.text-invert {
    color: var(--color-black) !important;
}

.dark-theme .text-invert {
    color: var(--color-white) !important;
}

.dark-theme .form-login .form-select {
    cursor: pointer;
    background-color: #1C2D52;
    border-radius: 0;
    border: 1px solid var(--border-gray);
    color: #eeeeee;
    font-size: 14px;
    font-weight: 300;
    padding: 0.5rem 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-login .form-select {
    cursor: pointer;
    background-color: #D8E8FB;
    border-radius: 0;
    border: 1px solid #ced4da;
    color: var(--bg-invert);
    font-size: 14px;
    font-weight: 300;
    padding: 0.5rem 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.dark-theme .form-login .form-select:focus {
    box-shadow: 0 0 0 .25rem rgb(33 50 86 / 25%);
}

.form-login .form-select:focus {
    box-shadow: 0 0 0 .25rem rgb(33 50 86 / 0%);
}

.dark-theme .form-control:focus {
    border-color: #000000;
}

.form-control:focus {
    border-color: var(--color-blue-200);
}

.dark-theme .form-login .form-control,
.form-login .form-select {
    background-color: #1C2D52;
    min-height: 40px;
    border-radius: 0;
    font-size: 14px;
}

.form-login .form-control,
.form-login .form-select {
    background-color: #D8E8FB;
    min-height: 40px;
    border-radius: 0;
    font-size: 14px;
    color: #05121A;
}

.mw-90 {
    min-width: 90px;
    max-width: 90px;
}

.dark-theme .tc-post-overlay-default .img .tags {
    background-color: var(--color-black-2);
}

.dark-theme .tail-datetime-calendar .calendar-actions span:first-child:before,
.dark-theme .tail-datetime-calendar .calendar-actions span:last-child:before {
    top: 5px;
    bottom: 5px;
    width: 1px;
    height: auto;
    margin: 0;
    padding: 0;
    content: "";
    display: inline-block;
    position: absolute;
    background-color: transparent;
}

.tail-datetime-calendar .calendar-actions span:first-child:before,
.tail-datetime-calendar .calendar-actions span:last-child:before {
    top: 5px;
    bottom: 5px;
    width: 1px;
    height: auto;
    margin: 0;
    padding: 0;
    content: "";
    display: inline-block;
    position: absolute;
    background-color: transparent;
}
/* .navbar.style-1 .dropdown:hover .dropdownMenu { top: 65px; } .navbar.style-1 .dropdown.active .dropdownMenu { opacity: 1; visibility: visible; top: 85.5px; } .dark-theme .navbar.style-1 .dropdown-menu .dropdown-item:hover, .dark-theme .navbar.style-1 .dropdownMenu .dropdown-item:hover { background-color: #050b0f; color: var(--color-blue-200) !important; } .dropdown-toggle::after { position: relative; top: 5px; opacity: 0.8; content: "\f3d0"; display: inline-block; font-family: "Ionicons"; border: 0; line-height: 1; transform: rotate(0deg); transition: transform 0.1s ease; } .dropdown-toggle[aria-expanded='true']::after { position: relative; top: 5px; opacity: 0.8; content: "\f3d0"; display: inline-block; font-family: "Ionicons"; border: 0; line-height: 1; transform: rotate(180deg); } */

.navbar.style-1 .dropdownMenu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.1s ease;
}

.navbar.style-1 .dropdown-2.show .dropdownMenu {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 75.5px;
}

.dropdown-toggle::after {
    position: relative;
    top: 5px;
    opacity: 0.8;
    content: "\f3d0";
    display: inline-block;
    font-family: "Ionicons";
    border: 0;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.1s ease;
}

.dropdown-toggle[aria-expanded='true']::after {
    transform: rotate(180deg);
}

.text-dark {
    color: var(--color-black-2) !important;
}

.modal {
    background-color: rgba(0, 0, 0, 0.75);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: none;
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #fff;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    position: absolute;
    top: 3%;
    right: 4%;
}

.tc-post-list-style2 .items .item {
    padding: 15px 0;
    border-bottom: 1px solid var(--border-gray);
}

.cont {
    flex-wrap: nowrap;
    & small

{
    text-wrap: nowrap;
    width: max-content;
    padding: 0 4px;
    font-size: 14px !important;
}

& b {
    font-weight: 600 !important;
}

}

.ul-calendar {
    display: flex;
    flex-wrap: wrap;
    & li

{
    width: auto;
}

& li p {
    position: relative;
    left: -8px;
}

}

.content-youtube {
    padding: 15px;
    & h6

{
    margin-bottom: 30px;
}

}

.dark-theme .content-youtube {
    background-color: var(--color-black-2);
}

.content-youtube {
    background-color: #ECF4FF;
}

.dark-theme .bg-blue-invert {
    background-color: var(--color-black-2);
}

.bg-blue-invert {
    background-color: #ECF4FF;
}
/* .tc-post-grid-default::after{ background: rgb(0,0,0); background: linear-gradient(90deg, rgb(5 18 26 / 100%) 0%, rgb(5 18 26 / 0%) 15%, rgb(5 18 26 / 0%) 50%, rgb(5 18 26 / 0%) 85%, rgb(5 18 26 / 0%) 100%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; width:5%; height:100%; } */

.dark-theme .top-navbar.style-1 .sub-darkLight .darkLight-btn,
.dark-theme .tc-widget-survey-style1,
.dark-theme .tc-widget-sponsored-style1,
.dark-theme .tc-widget-tags-style2 .tags-content a,
.dark-theme .tc-posts-tabs-style3 .nav-pills,
.dark-theme .results-navbar .content .results-content .game-card .game-name,
.dark-theme .tc-widget-standings-style8 .table thead {
    background-color: #213256;
    width: 90px;
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn,
.tc-widget-survey-style1,
.tc-widget-sponsored-style1,
.tc-widget-tags-style2 .tags-content a,
.tc-posts-tabs-style3 .nav-pills,
.results-navbar .content .results-content .game-card .game-name,
.tc-widget-standings-style8 .table thead {
    background-color: #213256;
    width: 90px;
}

.dark-theme .top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
    color: #213256;
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
    color: #213256;
}

.dark-theme .basket-invert img {
    filter: invert(0);
}

.basket-invert img {
    filter: invert(1);
}
/* min width */

@media screen and (min-width:990.98px) {
    .position-lg-absolute {
        position: absolute;
    }
}

@media screen and (min-width:1193.98px) {
    /* .navbar.style-1 .navbar-nav .nav-item:first-child .nav-link { padding-left: 0; margin-left: 0; } */
    .g-xl-30,
    .gx-xl-30 {
        --bs-gutter-x: 1.875rem;
    }
}

.news-box {
    & a

{
    margin-bottom: 15px;
}

}

.esg-section {
    /* padding: 0; */
    /* margin-left: 28px; */
}

.navbar.style-1-2 {
    margin-top: 0;
    border-bottom: 2px solid var(--color-black);
    width: 100%;
}

.navbar.style-1 .navbar-nav .nav-item .nav-link {
    color: var(--color-black);
}

.background-transition {
    transition: background-color 0.1s ease;
}

.set-stock {
    background-color: var(--bg-invert);
    border: 0;
    padding-left: 0;
    color: var(--color-invert);
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.dark-theme .set-stock {
    background-color: var(--color-black-2);
    border: 0;
    padding-left: 0;
    color: var(--color-invert);
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23666666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.set-stock option {
    padding: 10px 20px;
    background-color: var(--color-white);
    color: var(--color-invert);
    margin: 10px 0;
}

.dark-theme .set-stock option {
    padding: 10px 20px;
    background-color: var(--color-black-2);
    color: var(--color-invert);
    margin: 10px 0;
}

.dark-theme .color-D9D9D9 {
    color: #D9D9D9;
}

.color-D9D9D9 {
    color: #4b4b4b;
}

.border-success-set {
    background-color: rgba(3, 187, 0, 0.2);
    padding: 2px 5px;
    font-size: 10px;
    color: #03BB00;
    height: fit-content;
    display: block;
    margin: auto;
}

.border-danger-set {
    background-color: rgba(237, 52, 15, 0.2);
    padding: 2px 5px;
    font-size: 10px;
    color: #ED340F;
    height: fit-content;
    display: block;
    margin: auto;
}

.border-warning-set {
    background-color: rgba(212, 165, 24, 0.2);
    padding: 2px 5px;
    font-size: 10px;
    color: #D4A518;
    height: fit-content;
    display: block;
    margin: auto;
}

@keyframes textShine {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
}
/* .bg-blue-news{ background: linear-gradient( 115deg, #FF9500 0%, #FF9500 45%, #e5be89 50%, #FF9500 55%, #FF9500 100% ); background-size: 400% auto; animation: textShine 4s ease-in-out infinite; padding: 0 5px 2px; line-height: 1.25; vertical-align: baseline; } */

.bg-blue-news {
    background: linear-gradient(115deg, /* มุม 45 องศา */
    #ED340F 0%, #ED340F 45%, #ffa593 50%, #ED340F 55%, #ED340F 100%);
    background-size: 400% auto;
    animation: textShine 4s ease-in-out infinite;
    padding: 0 5px 2px;
    line-height: 1.25;
    vertical-align: baseline;
}

    .bg-blue-news .text-new-tool {
        font-size: 10px;
        font-weight: 400 !important;
        color: var(--color-white);
    }

.dark-theme .text-new-tool {
    font-size: 10px;
    font-weight: 400 !important;
    color: var(--color-invert);
}

.bg-blue-news .text-new-tool-2 {
    font-size: 12px;
    font-weight: 400 !important;
    color: var(--color-white);
}

.dark-theme .text-new-tool-2 {
    font-size: 12px;
    font-weight: 400 !important;
    color: var(--color-invert);
}

.bg-orange-news {
    background: linear-gradient(115deg, /* มุม 45 องศา */
    #FE9501 0%, #FE9501 45%, #f8cb8d 50%, #FE9501 55%, #FE9501 100%);
    background-size: 400% auto;
    animation: textShine 4s ease-in-out infinite;
    padding: 0 5px 2px;
    line-height: 1.25;
    vertical-align: baseline;
}

    .bg-orange-news .text-new-tool {
        font-size: 10px;
        font-weight: 400 !important;
        color: var(--color-white);
    }

    .bg-orange-news .text-new-tool-2 {
        font-size: 12px;
        font-weight: 400 !important;
        color: var(--color-white);
    }

@keyframes textShine {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
/* max width */

@media screen and (max-width:1399.98px) {
    .dark-theme .tc-post-overlay-default .content {
        position: relative;
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .tc-post-overlay-default .content {
        position: relative;
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .tc-widget-social-style1 .content .social-card {
        flex-direction: row;
    }

    .tc-widget-social-style1 .content .social-card {
        text-align: left;
        display: flex;
        align-items: center;
        /* width: 25%; */
        width: 45%;
        margin-bottom: 15px;
    }
}

@media screen and (max-width:1299.98px) {
    /* .news-box {
        & a {
            margin-bottom: 15px;
        }
    } */
    .nav-search-style {
        margin-bottom: 20px !important;
    }

    .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 0 10px;
        font-size: var(--fs-text);
        margin: 0 8px;
    }

        .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
            color: var(--color-blue) !important;
            font-weight: 500;
            font-size: calc(var(--fs-text) + 0.5px);
            position: relative;
            top: 1px;
        }

    .item6 {
        .max-w975

{
    max-width: 837px;
}

}
}

@media screen and (max-width:1300px) {
    .box-event {
        background-color: #ECF4FF;
        padding: 1rem;
        & ul

{
    padding: 0 1rem;
    & li.green

{
    list-style: disc;
    color: #0FD53D;
}

& li.red {
    list-style: disc;
    color: #ED340F;
    position: relative;
    left: 0;
}

& li.blue {
    list-style: disc;
    color: #00C0FF;
}

& li p {
    font-size: 12px;
    font-weight: 200;
}

}
}

.news-box {
    & a

{
    margin-bottom: 15px;
}

}
}

@media screen and (max-width:1193.98px) {
    #dp1200 .tc-widget-social-style1 .content .social-card {
        flex-direction: row;
    }

    #dp1200 .tc-widget-social-style1 .content .social-card {
        text-align: left;
        display: flex;
        align-items: center;
        width: 25%;
        margin-bottom: 15px;
    }

    .news-box {
        & a

{
    margin-bottom: 15px;
}

}

.navbar.style-1 .dropdown-2.show .dropdownMenu {
    top: 0;
    margin: 0;
}

.navbar.style-1 .dropdown-menu,
.navbar.style-1 .dropdownMenu {
    position: relative;
    min-width: 200px;
    padding: 0;
    border-radius: 0;
    border: 0;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.0666666667);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.0666666667);
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    top: 0;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
}

}

.min-h-350 {
    /* min-height: 115px !important; max-height: 115px !important; */
    aspect-ratio: 16/9;
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
    position: relative;
    font-size: 20px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn {
    gap: 5px;
    padding: 2px;
}

.knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
    position: relative;
    font-size: 20px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn {
    gap: 5px;
    padding: 2px;
}

.dark-theme .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select {
    border-color: var(--color-invert);
}

.tail-datetime-calendar .calendar-datepicker table tr td.calendar-day.date-select {
    border-color: var(--color-invert);
}

.dark-theme .brd-gray,
.dark-theme .form-control {
    border-color: var(--border-gray) !important;
}

.brd-gray,
.form-control {
    border-color: var(--border-gray) !important;
}

.dark-theme .top-navbar.style-1 .sub-darkLight .darkLight-btn,
.dark-theme .tc-widget-survey-style1,
.dark-theme .tc-widget-sponsored-style1,
.dark-theme .tc-widget-tags-style2 .tags-content a,
.dark-theme .tc-posts-tabs-style3 .nav-pills,
.dark-theme .results-navbar .content .results-content .game-card .game-name,
.dark-theme .tc-widget-standings-style8 .table thead {
    width: 60px;
}

.top-navbar.style-1 .sub-darkLight .darkLight-btn,
.tc-widget-survey-style1,
.tc-widget-sponsored-style1,
.tc-widget-tags-style2 .tags-content a,
.tc-posts-tabs-style3 .nav-pills,
.results-navbar .content .results-content .game-card .game-name,
.tc-widget-standings-style8 .table thead {
    width: 60px;
}

.dark-theme.knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn,
.dark-theme.knowledge-style .tc-widget-survey-style1,
.dark-theme.knowledge-style .tc-widget-sponsored-style1,
.dark-theme.knowledge-style .tc-widget-tags-style2 .tags-content a,
.dark-theme.knowledge-style .tc-posts-tabs-style3 .nav-pills,
.dark-theme.knowledge-style .results-navbar .content .results-content .game-card .game-name,
.dark-theme.knowledge-style .tc-widget-standings-style8 .table thead {
    width: 60px;
}

.knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn,
.knowledge-style .tc-widget-survey-style1,
.knowledge-style .tc-widget-sponsored-style1,
.knowledge-style .tc-widget-tags-style2 .tags-content a,
.knowledge-style .tc-posts-tabs-style3 .nav-pills,
.knowledge-style .results-navbar .content .results-content .game-card .game-name,
.knowledge-style .tc-widget-standings-style8 .table thead {
    width: 60px;
}

@media screen and (max-width:1193.98px) {
    .tc-post-grid-default-overlay::after {
        background: linear-gradient(270deg, rgba(236, 244, 255, 1) 0%, rgba(236, 244, 255, 0) 100%);
        right: -1px;
    }

    .tc-post-grid-default-overlay::before {
        background: linear-gradient(90deg, rgba(236, 244, 255, 1) 0%, rgba(236, 244, 255, 0) 100%);
        left: 0;
    }

    .dark-theme .tc-post-grid-default-overlay::after {
        background: linear-gradient(270deg, rgba(5, 18, 26, 1) 0%, rgba(5, 18, 26, 0) 100%);
        right: -1px;
    }

    .dark-theme .tc-post-grid-default-overlay::before {
        background: linear-gradient(90deg, rgba(5, 18, 26, 1) 0%, rgba(5, 18, 26, 0) 100%);
        left: 0;
    }

    .dark-theme .navbar.style-1,
    .navbar.style-1 {
        border-bottom: 0px solid #eeeeee;
        width: 100%;
    }

    .top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
        position: relative;
        font-size: 20px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
    }

    .top-navbar.style-1 .sub-darkLight .darkLight-btn {
        gap: 5px;
        padding: 2px;
    }

    .knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
        position: relative;
        font-size: 20px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
    }

    .knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn {
        gap: 5px;
        padding: 2px;
    }

    .dark-theme .top-navbar.style-1 .sub-darkLight .darkLight-btn,
    .dark-theme .tc-widget-survey-style1,
    .dark-theme .tc-widget-sponsored-style1,
    .dark-theme .tc-widget-tags-style2 .tags-content a,
    .dark-theme .tc-posts-tabs-style3 .nav-pills,
    .dark-theme .results-navbar .content .results-content .game-card .game-name,
    .dark-theme .tc-widget-standings-style8 .table thead {
        width: 60px;
    }

    .top-navbar.style-1 .sub-darkLight .darkLight-btn,
    .tc-widget-survey-style1,
    .tc-widget-sponsored-style1,
    .tc-widget-tags-style2 .tags-content a,
    .tc-posts-tabs-style3 .nav-pills,
    .results-navbar .content .results-content .game-card .game-name,
    .tc-widget-standings-style8 .table thead {
        width: 60px;
    }

    .dark-theme.knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn,
    .dark-theme.knowledge-style .tc-widget-survey-style1,
    .dark-theme.knowledge-style .tc-widget-sponsored-style1,
    .dark-theme.knowledge-style .tc-widget-tags-style2 .tags-content a,
    .dark-theme.knowledge-style .tc-posts-tabs-style3 .nav-pills,
    .dark-theme.knowledge-style .results-navbar .content .results-content .game-card .game-name,
    .dark-theme.knowledge-style .tc-widget-standings-style8 .table thead {
        width: 60px;
    }

    .knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn,
    .knowledge-style .tc-widget-survey-style1,
    .knowledge-style .tc-widget-sponsored-style1,
    .knowledge-style .tc-widget-tags-style2 .tags-content a,
    .knowledge-style .tc-posts-tabs-style3 .nav-pills,
    .knowledge-style .results-navbar .content .results-content .game-card .game-name,
    .knowledge-style .tc-widget-standings-style8 .table thead {
        width: 60px;
    }
}

@media screen and (max-width:1193.98px) {
    .dark-theme .tc-post-overlay-default .content {
        position: relative;
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .dark-theme .tc-post-overlay-default .content-1 {
        position: relative;
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .tc-post-overlay-default .content-login {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
    }

    .link-group .title {
        cursor: pointer;
    }

    .col-content-news {
        flex: 0 0 auto;
        width: 62.66666%;
    }

    .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 4px 12px;
        font-size: var(--fs-text);
        margin: 0 4px;
    }

    .tail-datetime-calendar .calendar-datepicker table tr td.calendar-day,
    .tail-datetime-calendar .calendar-datepicker table tr td.calendar-month,
    .tail-datetime-calendar .calendar-datepicker table tr td.calendar-year,
    .tail-datetime-calendar .calendar-datepicker table tr td.calendar-decade {
        width: 14.28571428571429%;
        height: 28px;
    }

    .navbar.style-1 .dropdown-menu .dropdown-item,
    .navbar.style-1 .dropdownMenu .dropdown-item {
        padding: 8px 20px;
        font-size: 14px;
        border-bottom: 0px solid var(--border-gray);
        color: var(--color-invert);
    }

    .dropdown-item-01 {
        color: var(--color-blue-200) !important;
    }

    .tail-datetime-calendar .calendar-actions span.label {
        line-height: 1.5;
    }
    /* .navbar.style-1 .dropdown:hover .dropdownMenu { opacity: 1; visibility: visible; top: 0; position: relative; } */
    .tc-widget-social-style1 .content .social-card {
        flex-direction: row;
    }

    .nav-news li button {
        padding: 0.5rem;
    }

    .tc-post-overlay-default .content {
        position: relative;
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .content-1 {
        position: relative;
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .content-2 {
        /* position: relative; */
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
    }

    .opinion-overlay .tc-post-overlay-default .content-2 {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    }

    .tc-post-overlay-default .content-opinion {
        position: relative;
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .content-opinion-2 {
        /* position: relative; */
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .contented {
        /* position: relative; */
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: unset;
        z-index: 5;
    }

    .tc-post-overlay-default-4 .content {
        /* position: relative; */
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%);
        z-index: 5;
    }

    .item6 {
        .max-w975

{
    max-width: 702px;
}

}

.dark-theme .navbar.style-1-2 {
    margin-top: 20px;
    border-bottom: 2px solid #eeeeee;
    width: 100%;
}

.navbar.style-1-2 {
    margin-top: 20px;
    border-bottom: 2px solid #05121A;
    width: 100%;
}

.navbar.style-1 {
    border-bottom: 0px solid rgba(0, 0, 0, 0.6);
    width: 100%;
}

.navbar.style-1-2 {
    margin-top: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.6);
    width: 100%;
}

.min-h-350 {
    /* min-height: 115px !important; max-height: 115px !important; */
    aspect-ratio: 16/9;
}

.min-h1-350 {
    /* min-height: 150px !important; max-height: 150px !important; */
    aspect-ratio: 16/9;
}

.crypto-youtube .min-h1-350 {
    /* min-height: 250px !important; max-height: 250px !important; */
    aspect-ratio: 16/9;
}

.min-h-lg-350 {
    /* min-height: 450px !important; */
    aspect-ratio: 16/9;
}

.news-header {
    font-size: 35px;
    line-height: 42px;
}

}

@media screen and (max-width:991px) {
    .dark-theme .tc-post-overlay-default .content {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .dark-theme .tc-post-overlay-default .content-1 {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
    }

    .min-h-350 {
        aspect-ratio: 16/9;
        /* min-height: 170px !important; max-height: 170px !important; */
    }

    .col-content-news {
        flex: 0 0 auto;
        width: 66.66666%;
    }

    .min-h-lg-350 {
        /* min-height:350px !important; */
        aspect-ratio: 16/9;
    }

    .col-img-news {
        flex: 0 0 auto;
        width: 33.33333%;
        min-width: 135px;
        max-width: unset;
    }

    .col-content-news {
        flex: 0 0 auto;
        width: 66.66666%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .news-detail .col-img-news {
        flex: 0 0 auto;
        width: 33.33333%;
        min-width: 135px;
        max-width: unset;
    }

    .news-detail .col-content-news {
        flex: 0 0 auto;
        width: 66.66666%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media screen and (max-width:991px) {
    .dark-theme.knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn,
    .dark-theme.knowledge-style .tc-widget-survey-style1,
    .dark-theme.knowledge-style .tc-widget-sponsored-style1,
    .dark-theme.knowledge-style .tc-widget-tags-style2 .tags-content a,
    .dark-theme.knowledge-style .tc-posts-tabs-style3 .nav-pills,
    .dark-theme.knowledge-style .results-navbar .content .results-content .game-card .game-name,
    .dark-theme.knowledge-style .tc-widget-standings-style8 .table thead {
        width: 60px;
    }

    .knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn,
    .knowledge-style .tc-widget-survey-style1,
    .knowledge-style .tc-widget-sponsored-style1,
    .knowledge-style .tc-widget-tags-style2 .tags-content a,
    .knowledge-style .tc-posts-tabs-style3 .nav-pills,
    .knowledge-style .results-navbar .content .results-content .game-card .game-name,
    .knowledge-style .tc-widget-standings-style8 .table thead {
        width: 60px;
    }

        .knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn .icon {
            position: relative;
            font-size: 20px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            overflow: hidden;
            cursor: pointer;
        }

    .knowledge-style .top-navbar.style-1 .sub-darkLight .darkLight-btn {
        gap: 5px;
        padding: 2px;
    }

    .tc-post-overlay-default .content {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .content-login {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(55%);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .content-1 {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
    }

    .tc-post-overlay-default .content-hunden {
        position: relative;
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
    }

    .news-header {
        font-size: 28px;
        line-height: 42px;
    }

    .dark-theme .color-666 {
        color: #EDEFF2 !important;
    }

    .box-event {
        background-color: #ECF4FF;
        padding: 1rem;
        & ul

{
    padding: 0 1rem;
    & li.green

{
    list-style: disc;
    color: #0FD53D;
}

& li.red {
    list-style: disc;
    color: #ED340F;
    position: relative;
    left: 20%;
}

& li.blue {
    list-style: disc;
    color: #00C0FF;
}

& li p {
    font-size: 12px;
    font-weight: 200;
}

}
}

.navbar.style-1 .navbar-nav .nav-item .nav-link {
    padding: 4px 12px;
    font-size: var(--fs-text);
    margin: 0 4px;
}

.dark-theme .card-login .card-link2 {
    /* background-color: var(--color-black-2); border: 0px solid var(--color-gray-2); */
    transition: all 0.1s ease;
    padding: 0.5rem;
    color: var(--color-white);
    width: 100%;
    margin-bottom: 0.5rem;
}

.card-login .card-link2 {
    /* background-color: var(--color-black-2); border: 0px solid var(--color-gray-2); */
    transition: all 0.1s ease;
    padding: 0.5rem;
    color: var(--color-invert);
    width: 100%;
    margin-bottom: 0.5rem;
}

.tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 33.33%;
    margin-bottom: 10px;
}

#dp1200 .tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 33.33%;
    margin-bottom: 10px;
}

#Modal-Share .tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 33.33%;
    margin-bottom: 15px;
}

.tc-widget-social-style1 .content .social-card {
    flex-direction: row;
}

.tc-post-grid-default .item {
    margin-bottom: 15px;
}

.tc-post-grid-default .item-end {
    margin-bottom: 0;
}

.tc-post-overlay-default .content h2.title {
    font-size: 28px;
    line-height: 1.3;
}

.tc-post-grid-default .item .content h2.title {
    font-size: 30px;
    line-height: 32px;
}

.footer-style1 .content .link-group {
    margin-bottom: 0;
    margin-top: 10px;
}

    .footer-style1 .content .link-group .title {
        margin-bottom: 8px;
    }

.dark-theme .card-login,
.card-login {
    padding: 15px;
    min-height: unset;
}

.tc-post-overlay-default .content-1 {
    position: relative;
    padding: 15px !important;
}

.tc-post-overlay-default .content-2 {
    position: absolute;
    /* top: 0; */
    bottom: 0;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 5;
}

.max-h-311px {
    max-height: 160px;
}

.tc-post-overlay-default .content-opinion {
    position: absolute;
}

.tc-post-overlay-default .content-youtube-crypto {
    padding: 7px 15px !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%) !important;
}

.min-h1-350 {
    aspect-ratio: 16/9;
    /* min-height: 150px !important; max-height: 150px !important; */
}

.crypto-youtube .min-h1-350 {
    /* min-height: 180px !important; max-height: 180px !important; */
    aspect-ratio: 16/9;
}

}

@media screen and (max-width:767.98px) {
    .dark-theme .tc-post-overlay-default .content {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .tc-post-overlay-default .content {
        /* position: relative; */
        top: 0;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
        z-index: 5;
        padding: 20px 15px;
    }

    .dark-theme .br-sm-top {
        border-top: 1px solid var(--border-gray) !important;
    }

    .br-sm-top {
        border-top: 0px solid var(--border-gray) !important;
    }

    .card-news:hover .img img {
        transform: scale(1.025);
        background-color: var(--color-blue-2-dark);
    }

    .card-news .img-cover-op {
        overflow: unset;
    }

    .border-25 {
        background-color: var(--color-blue);
        border-radius: 50px;
        width: 20px;
        height: 20px;
    }

    .max-h-311px {
        max-height: 150px;
    }

    .card-news:hover .img-cover-op img {
        transform: scale(1.025);
        background-color: transparent;
    }

    .card-news:hover h6 {
        transform: scale(1.005);
    }

    .card-news:hover .card-box-detail {
        transform: scale(1.005);
    }

    .top-navbar.style-1 {
        padding: 20px 0 0;
    }

    .min-h-lg-350 {
        /* min-height: 350px !important; */
        aspect-ratio: 16/9;
    }

    .crypto-youtube .min-h-lg-350 {
        /* min-height: 370px !important; */
        aspect-ratio: 16/9;
    }

    .info-text-news {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .info-text-news-highlight {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .scrollable-container {
        max-height: 320px;
    }

    .tc-widget-social-style1 .content .social-card {
        text-align: left;
        display: flex;
        align-items: center;
        width: 33.33%;
        margin-bottom: 10px;
    }

    #dp1200 .tc-widget-social-style1 .content .social-card {
        text-align: left;
        display: flex;
        align-items: center;
        width: 33.33%;
        margin-bottom: 10px;
    }

    .tc-post-overlay-default .content {
        position: relative;
    }

    .tc-post-overlay-default .content-2 {
        position: absolute;
    }

    .tc-post-overlay-default .contented {
        /* position: relative; */
        /* top: 0; */
        bottom: 0;
        width: 100%;
        background: unset;
        z-index: 5;
    }

    .tc-post-grid-default .item {
        margin-bottom: 1rem;
    }
    /* .card-login .card-link2 { text-align: center; } */
    .min-h-350 {
        aspect-ratio: 16/9;
        /* min-height: 350px !important; max-height: unset !important; */
    }

    .min-h1-350 {
        aspect-ratio: 16/9;
        /* min-height: 150px !important; max-height: unset !important; */
    }

    .crypto-youtube .min-h1-350 {
        aspect-ratio: 16/9;
        /* min-height: 200px !important; max-height: 200px !important; */
    }
    /* .item6 { .max-w975 { max-width: 540px; } } */
    .card-login {
        padding: 15px 15px 20px 15px;
    }

    #Modal-Share .card-login {
        padding: 1.5rem 1rem 1.75rem;
    }

    .footer-style1 .content {
        padding: 50px 0;
        border-top: 0px solid var(--border-gray);
    }

        .footer-style1 .content .link-group {
            margin-bottom: 0;
            margin-top: 10px;
        }

            .footer-style1 .content .link-group .title {
                margin-bottom: 8px;
            }

    .news-header {
        font-size: 28px;
        line-height: 1.5;
    }

    .min-150 {
        min-height: 175px !important;
    }

    .crypto-youtube .min-150 {
        min-height: 225px !important;
    }
}

@media screen and (max-width:575.98px) {
    .crypto-youtube .min-h-lg-350 {
        /* min-height: 220px !important; */
        aspect-ratio: 16/9;
    }

    .cont {
        flex-wrap: nowrap;
        & small:first-child

{
    /* width:100%; */
    text-wrap: nowrap;
}

& small {
    text-wrap: nowrap;
}

}

.tc-slider-style1 .swiper-button-prev,
.tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    left: 0;
    top: 75%;
}

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-container-rtl .swiper-button-prev {
    top: 75%;
    right: 0;
}

.tc-post-grid-default-overlay::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
    left: 0;
}

.dark-theme .tc-post-grid-default-overlay::before {
    background: linear-gradient(90deg, rgba(5, 18, 26, 0) 0%, rgba(5, 18, 26, 0) 100%);
    left: 0;
}

}

@media screen and (max-width:574.98px) {
    .min-h1-350 {
        aspect-ratio: 16/9;
        /* min-height: 190px !important; max-height: unset !important; */
    }

    .max-h-311px {
        max-height: 195px;
    }

    .efin-youtube .min-h1-350 {
        /* min-height: 285px !important; max-height: unset !important; */
        aspect-ratio: 16/9;
    }

    .crypto-youtube .min-h1-350 {
        /* min-height: 220px !important; max-height: 220px !important; */
        aspect-ratio: 16/9;
    }

    .min-h-lg-350 {
        /* min-height: 150px !important; */
        aspect-ratio: 16/9;
    }

    .efin-youtube .min-h-lg-350 {
        /* min-height: 285px !important; */
        aspect-ratio: 16/9;
    }

    .tc-post-overlay-default .content {
        /* position: absolute; */
    }

    .tc-post-overlay-default .content-2 {
        & .max-w-90

{
    max-width: 60px !important;
}

}

.tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 10px;
}

#dp1200 .tc-widget-social-style1 .content .social-card {
    text-align: left;
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 10px;
}

.mx--15 {
    margin-left: -15px;
    margin-right: -15px;
}

.min-h-350 {
    /* min-height: 200px !important; */
    aspect-ratio: 16/9;
}

.min-150 {
    min-height: 190px !important;
}

.crypto-youtube .min-150 {
    min-height: 285px !important;
}

.content-youtube-crypto-1 {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) !important;
}

.content-youtube-crypto {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%) !important;
}

.news-popular {
    .nav-link

{
    /* padding: 0.5rem 0.35rem; */
    margin-bottom: 0;
}

.section-title-style2 {
    justify-content: start !important;
    small

{
    margin-left: auto;
}

& ul {
    justify-content: space-around;
    /* width: 100%; */
}

}

.top-navbar.style-1 {
    padding: 20px 0 0;
}

}

.recommend-foryou {
    .icon-link

{
    border: 1px solid var(--border-gray);
    padding: 9px;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 0.5rem
}

}

.ipo-corner {
    .section-title-style2

{
    justify-content: start !important;
    small

{
    margin-left: auto;
}

}
}

.investment-tool {
    .tc-widget-categories-style6 .categories-content .item-end

{
    margin-bottom: 0;
}

}

.power-gold {
    & .tc-post-list-style2 .items .item:last-of-type

{
    padding-bottom: 0;
    padding-top: 15px;
}

}

.card-header {
    padding: 0.5rem 0;
}
/* .item6 { .max-w975 { max-width: 395px; max-width: 95vw; } } */
.card-login {
    padding: 15px;
}

#Modal-Share .card-login {
    padding: 1.5rem 1rem 1.75rem;
}
/* .row:not(.gx-0):not(.gx-1):not(.gx-2):not(.gx-3):not(.gx-4):not(.gx-5):not(.gx-20) {
        margin-right: -15px;
        margin-left: -15px;
    } */
.scrollable-container {
    max-height: 330px;
}

.footer-style1 .content {
    padding: 30px 0;
    border-top: 0px solid var(--border-gray);
}

    .footer-style1 .content .link-group {
        margin-bottom: 0;
        margin-top: 10px;
    }

        .footer-style1 .content .link-group .title {
            margin-bottom: 8px;
        }

.news-header {
    font-size: 24px;
    line-height: 1.3;
}

.cont {
    flex-wrap: nowrap;
    & small:first-child

{
    /* width:100% */
}

}
}

@media screen and (max-width:425px) {
}

@media screen and (max-width:375px) {
    .col-img-news {
        flex: 0 0 auto;
        width: 33.33333%;
        min-width: 135px;
        max-width: unset;
    }

    .col-content-news {
        flex: 0 0 auto;
        width: 66.66666%;
        padding-left: 0 !important;
        padding-right: 15px !important;
    }

    .news-detail .col-img-news {
        flex: 0 0 auto;
        width: 33.33333%;
        min-width: 135px;
        max-width: unset;
    }

    .news-detail .col-content-news {
        flex: 0 0 auto;
        width: 66.66666%;
        padding-left: 0 !important;
        padding-right: 15px !important;
    }
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: border-box;
}

.tc-slider-style1.slider-color-creamy1 .swiper-button-next:hover::after,
.tc-slider-style1.slider-color-creamy1 .swiper-button-prev:hover::after {
    color: #fff !important;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bd-violet-bg);
    --bs-tooltip-color: var(--bs-white);
}

.tooltip.show {
    z-index: 9999;
    top: 8px !important;
}

.dark-theme .tooltip-inner {
    background-color: #09284E;
    color: var(--color-invert);
    border: 1px solid var(--border-gray) !important;
}

.tooltip-inner {
    background-color: #b2d0f6;
    color: var(--color-invert);
    border: 1px solid var(--border-gray) !important;
}

.dark-theme .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.dark-theme .bs-tooltip-end .tooltip-arrow::before {
    right: -1px;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #09284E;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
    right: -1px;
    border-width: .4rem .4rem .4rem 0;
    border-right-color: #b2d0f6;
}

.dark-theme .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.dark-theme .bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #09284E;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #b2d0f6;
}

.btn-tooltips {
    fill: #666666;
}

    .btn-tooltips:hover {
        fill: #1560BD;
    }

.swiper-container {
    width: 100%;
}

@media (min-width: 979px) and (max-width: 991px) {
    .swiper-slide {
        width: auto !important;
    }
}

.nav-pills-312 .nav-link {
    background-color: transparent !important;
}

    .nav-pills-312 .nav-link.active a {
        color: var(--color-invert) !important;
    }

    .nav-pills-312 .nav-link:hover {
        background-color: rgb(0, 106, 0) !important;
    }

.dark-theme .nav-pills-312 .nav-link,
.dark-theme .nav-pills-312 .show > .dark-theme .nav-link {
    background-color: #003800 !important;
    color: #03BB00 !important;
    border-radius: 0;
    padding: 0.25rem 0.75rem;
    margin-right: 0.5rem !important;
}

.nav-pills-312 .nav-link,
.nav-pills-312 .show > .nav-link {
    background-color: #EDF5E1 !important;
    color: #03BB00 !important;
    border-radius: 0;
    padding: 0.25rem 0.75rem;
    margin-right: 0.5rem !important;
}

    .nav-pills-312 .nav-link.active,
    .nav-pills-312 .show > .nav-link {
        background-color: #03BB00 !important;
        border-radius: 0;
    }

.dark-theme .border-end {
    border-right: 1px solid rgba(255, 255, 255, 0.0333333333) !important;
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}

html {
    scroll-behavior: smooth !important;
}

.btn-links b {
    font-weight: 500 !important;
}

.w-unset {
    width: unset !important;
}

.sticky-navbar-desk-1.scrolled-desk.box-nav-shadow.showme {
    box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0.08);
}

.sticky-navbar-desk-1.scrolled-desk.box-nav-shadow {
    box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0);
}

.breadcrumb-nav ol {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-nav .breadcrumb-item:first-child {
    padding-left: 0;
}

.breadcrumb-nav .breadcrumb-item {
    font-weight: 400;
    color: var(--color-gray);
    min-width: max-content;
    padding-left: 15px;
}

    .breadcrumb-nav .breadcrumb-item a {
        min-width: max-content;
    }

.footer-style1 .to_top {
    z-index: 9998;
}

.breadcrumb-nav ol li:last-child {
    min-width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--color-blue);
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 15px;
    min-width: max-content;
}

.breadcrumb-nav .breadcrumb-item.active {
    font-weight: 600;
    color: var(--color-invert);
    padding-left: 15px;
}
/* @keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
} */

.cookie-style {
    width: 100%;
    max-width: 295px;
    min-width: 295px;
    padding: 16px;
    background: #ECF4FF !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    text-align: center !important;
    color: var(--color-invert) !important;
    border: 1px solid var(--border-gray) !important;
    z-index: 9999 !important;
    animation: fade-up 1.5s ease-in-out 1.5s forwards;
}

.dark-theme .cookie-style {
    background: var(--color-black-2) !important;
    border: 1px solid var(--border-gray);
    !important;
}

.cookie-container div {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-invert);
}

.cookie-container p {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray);
    line-height: 24px;
}

    .cookie-container p a {
        text-decoration: underline;
        color: var(--color-blue);
    }

.cookie-container img {
    max-width: 40px;
    margin-bottom: 15px;
}

.loading-page.style1 {
    z-index: 999999 !important;
}

@media (min-width: 992px) {
    .knowledge-style .sticky-navbar-desk {
        position: sticky;
        top: 70px;
        background-color: #ffffff !important;
    }
    /* .knowledge-style .sticky-navbar-desk {
        height: 104px;
    } */
    /* .knowledge-style .scrolled-desk {
        height: 74px;
    } */
    .dark-theme.knowledge-style .sticky-navbar-desk {
        position: sticky;
        top: 70px;
        background-color: #05121A !important;
    }
}

@media (min-width: 1194px) {
    .sticky-navbar-desk {
        position: sticky;
        top: -16px;
        background-color: #ffffff !important;
    }

    .dark-theme .sticky-navbar-desk {
        position: sticky;
        top: -15px;
        background-color: #05121A !important;
    }

    .sticky-navbar-desk-1.scrolled-desk {
        padding-bottom: 15px;
    }

    .search-btn-active {
        box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0.08);
    }
    /* .sticky-navbar-desk {
        height: 201px;
    } */
    .sticky-navbar-desk.scrolled-desk {
        box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0.08);
    }

    .dark-theme .sticky-navbar-desk.scrolled-desk {
        box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0.08);
    }
}

@media (min-width: 1193.98px) {
    .tc-breaking-news-style1 .swiper-slide,
    .swiper-wrapper {
        width: max-content !important;
    }

    .navbar-expand-xl-1300 .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-xl-1300 .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        padding: 40px 0;
        transition: padding 0.25s linear;
    }

    .scrolled-desk .navbar-expand-xl-1300 .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        padding: 20px 0;
    }

    .scrolled-desk-1.stick-menu {
        padding-bottom: 16px;
    }

    .mt-xl-1300-0 {
        margin-top: 0 !important;
    }

    .justify-content-xl-1300-between {
        justify-content: space-between !important;
    }

    .d-xl-1300-none {
        display: none !important;
    }

    .d-xl-1300-block {
        display: block !important;
    }

    .order-xl-1300-1 {
        order: 1 !important;
    }

    .order-xl-1300-2 {
        order: 2 !important;
    }

    .order-xl-1300-3 {
        order: 3 !important;
    }

    .order-xl-1300-4 {
        order: 4 !important;
    }

    .navbar.style-1 .navbar-nav .nav-item-1 .nav-link {
        padding-left: 0;
        margin-left: 0;
    }
}

@media screen and (max-width: 1193.98px) {
    .sticky-navbar-desk-1.scrolled-desk {
        box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0.08);
    }

    .dark-theme .sticky-navbar-desk-1.scrolled-desk {
        box-shadow: 0px 13px 30px 0px rgba(102, 102, 102, 0.08);
    }

    .knowledge-style .sticky-navbar-desk-1.scrolled-desk {
        box-shadow: 8px 8px 24px 0px rgb(216 232 251 / 0%);
    }

    .col-img-news {
        min-width: 120px;
    }

    .stick-menu {
        padding-bottom: 20px;
    }

    .knowledge-style .stick-menu {
        padding-bottom: 20px;
    }

    .dark-theme .navbar.style-1-2 {
        margin-top: 20px;
        border-bottom: 2px solid #eeeeee;
        width: 100%;
    }

    .navbar.style-1-2 {
        margin-top: 20px;
        border-bottom: 2px solid #05121A;
        width: 100%;
    }

    .dark-theme .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 8px 12px;
        font-size: var(--fs-text);
        margin: 0;
        background-color: #050B0F;
    }

    .dark-theme .navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
        padding: 8px 12px;
        font-size: var(--fs-text);
        margin: 0;
        color: var(--color-blue);
        background-color: rgb(5 18 26);
    }

    .dark-theme .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
        font-weight: 500;
        font-size: 14.5px;
        position: relative;
        top: 1px;
        color: var(--color-invert);
        background-color: rgba(9, 40, 78, 1);
    }

    .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 8px 12px;
        font-size: var(--fs-text);
        margin: 0;
        background-color: rgba(236, 244, 255, 1);
    }

    .navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
        padding: 8px 12px;
        color: var(--color-invert);
        font-size: var(--fs-text);
        margin: 0;
        background-color: rgba(178, 208, 246, 0.5);
    }

    .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
        color: var(--color-invert);
        font-weight: 500;
        font-size: 14.5px;
        position: relative;
        top: 1px;
        background-color: rgba(178, 208, 246, 1);
    }
    /* ///////////////////////// */
    .dark-theme.knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 8px 12px;
        font-size: var(--fs-text);
        margin: 0 4px;
        /* background-color: #050B0F; */
    }

    .dark-theme.knowledge-style .navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
        /* padding: 8px 12px; */
        font-size: var(--fs-text);
        margin: 0 4px;
        color: var(--color-blue-200) !important;
        background-color: rgba(5, 11, 15, 0);
    }

    .dark-theme.knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
        font-weight: 500;
        font-size: 14.5px;
        position: relative;
        top: 1px;
        color: var(--color-blue) !important;
        background-color: rgba(9, 40, 78, 0);
    }

    .knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link {
        /* padding: 8px 12px; */
        font-size: var(--fs-text);
        margin: 0 4px;
        background-color: rgba(236, 244, 255, 0);
    }

    .knowledge-style .navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
        /* padding: 8px 12px; */
        color: var(--color-invert);
        font-size: var(--fs-text);
        margin: 0 4px;
        background-color: rgba(178, 208, 246, 0);
    }

    .knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
        color: var(--color-blue) !important;
        font-weight: 500;
        font-size: 14.5px;
        position: relative;
        top: 1px;
        background-color: rgba(178, 208, 246, 0);
    }
}

@media screen and (max-width: 990.98px) {
    .stick-menu {
        padding-bottom: 20px;
    }

    .knowledge-style .stick-menu {
        padding-bottom: 20px;
    }

    .knowledge-style .navbar.style-1 .navbar-nav li {
        width: 100%;
    }

    .dark-theme.knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 8px 12px;
        font-size: var(--fs-text);
        margin: 0 4px;
        background-color: #050B0F;
    }

    .dark-theme.knowledge-style .navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
        /* padding: 8px 12px; */
        font-size: var(--fs-text);
        margin: 0;
        color: var(--color-invert);
        background-color: rgba(5, 11, 15, 1);
    }

    .dark-theme.knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
        font-weight: 500;
        font-size: 14.5px;
        position: relative;
        top: 1px;
        color: var(--color-blue) !important;
        background-color: rgba(9, 40, 78, 1);
    }

    .knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 8px 12px;
        font-size: var(--fs-text);
        margin: 0 4px;
        background-color: rgba(236, 244, 255, 1);
    }

    .knowledge-style .navbar.style-1 .navbar-nav .nav-item:hover .nav-link {
        padding: 8px 12px;
        color: var(--color-invert) !important;
        font-size: var(--fs-text);
        margin: 0;
        background-color: rgba(178, 208, 246, 0.5);
    }

    .knowledge-style .navbar.style-1 .navbar-nav .nav-item .nav-link.active {
        color: var(--color-blue) !important;
        font-weight: 500;
        font-size: 14.5px;
        position: relative;
        top: 1px;
        background-color: rgba(178, 208, 246, 1);
    }
}

@media screen and (max-width: 575px) {
    .cookie-style {
        /* max-width: calc(100% - 40px); */
        position: fixed;
        bottom: 20px !important;
        left: 50%;
        transform: translateX(-50%);
    }
}
/*the container must be positioned relative:*/

.custom-select {
    position: relative;
    font-family: Arial;
}

    .custom-select select {
        display: none;
        /*hide original SELECT element:*/
    }

.select-selected {
    background-color: rgba(236, 244, 255, 1) !important;
}

.dark-theme .select-selected {
    background-color: var(--color-black-2) !important;
}
/*style the arrow inside the select element:*/

.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: var(--color-black) transparent transparent transparent;
}

.dark-theme .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent !important;
}
/*point the arrow upwards when the select box is open (active):*/

.select-selected.select-arrow-active:after {
    border-color: transparent transparent var(--color-black) transparent;
    top: 7px;
}

.dark-theme .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}
/*style the items (options), including the selected item:*/

.select-items div {
    color: var(--color-black);
    padding: 8px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.0333333333) !important;
    cursor: pointer;
    user-select: none;
}

.dark-theme .select-items div {
    color: #ffffff;
    padding: 8px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.0333333333) !important;
    cursor: pointer;
    user-select: none;
}

.select-selected {
    color: var(--color-black) !important;
    padding: 8px 16px 8px 0;
    border: 0px solid transparent;
    cursor: pointer;
    user-select: none;
    background-color: rgba(236, 244, 255, 1) !important;
}

.dark-theme .select-selected {
    color: #ffffff !important;
    padding: 8px 16px 8px 0;
    border: 0px solid transparent;
    cursor: pointer;
    user-select: none;
}
/*style items (options):*/

.select-items {
    position: absolute;
    background-color: rgba(236, 244, 255, 1) !important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

.dark-theme .select-items {
    position: absolute;
    background-color: var(--color-black-2) !important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
/*hide the items when the select box is closed:*/

.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: var(--color-blue-200);
    transition: all 0.1s ease;
}

.dark-theme .select-items div:hover,
.dark-theme .same-as-selected {
    background-color: var(--color-blue-3);
    transition: all 0.1s ease;
}
/*the container must be positioned relative:*/

.custom-select2 {
    position: relative;
    font-family: Arial;
}

    .custom-select2 select {
        display: none;
        /*hide original SELECT element:*/
    }

.select-selected2 {
    background-color: rgba(236, 244, 255, 1) !important;
}

.dark-theme .select-selected2 {
    background-color: var(--color-black-2) !important;
}
/*style the arrow inside the select element:*/

.select-selected2:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: var(--color-black) transparent transparent transparent;
}

.dark-theme .select-selected2:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent !important;
}
/*point the arrow upwards when the select box is open (active):*/

.select-selected2.select-arrow-active:after {
    border-color: transparent transparent var(--color-black) transparent;
    top: 7px;
}

.dark-theme .select-selected2.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}
/*style the items (options), including the selected item:*/

.select-items2 div {
    color: var(--color-black);
    padding: 8px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.0333333333) !important;
    cursor: pointer;
    user-select: none;
}

.dark-theme .select-items2 div {
    color: #ffffff;
    padding: 8px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.0333333333) !important;
    cursor: pointer;
    user-select: none;
}

.select-selected2 {
    color: var(--color-black) !important;
    padding: 8px 16px 8px 0;
    border: 0px solid transparent;
    cursor: pointer;
    user-select: none;
    background-color: rgba(236, 244, 255, 1) !important;
}

.dark-theme .select-selected2 {
    color: #ffffff !important;
    padding: 8px 16px 8px 0;
    border: 0px solid transparent;
    cursor: pointer;
    user-select: none;
}
/*style items (options):*/

.select-items2 {
    position: absolute;
    background-color: rgba(236, 244, 255, 1) !important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

.dark-theme .select-items2 {
    position: absolute;
    background-color: var(--color-black-2) !important;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
/*hide the items when the select box is closed:*/

.select-hide2 {
    display: none;
}

.select-items2 div:hover,
.same-as-selected2 {
    background-color: var(--color-blue-200);
    transition: all 0.1s ease;
}

.dark-theme .select-items2 div:hover,
.dark-theme .same-as-selected2 {
    background-color: var(--color-blue-3);
    transition: all 0.1s ease;
}

html,
body {
    scroll-padding-top: 230px;
}

.tc-tabs-header {
    scroll-padding-top: 300px;
}

.scroll-padding-350 {
    scroll-padding-top: 400px;
}
/* Dark Mode */

.dark-theme.knowledge-style {
    & .btn-share

{
    content: url('../img/home-efinance/news-share.svg');
    width: 18px;
    filter: invert(0);
    height: 18px;
    transition: filter 0s ease;
}

& .btn-links-outline-knowledge img {
    filter: invert(0);
}

& .icon-share-b img {
    filter: invert(0);
}

& .tc-slider-style2 .swiper-button-next,
.tc-slider-style2 .swiper-button-prev {
    border: 1px solid rgb(102 102 102 / 20%) !important
}

    & .tc-slider-style2 .swiper-button-next::after,
    .tc-slider-style2 .swiper-button-prev::after {
        color: var(--color-black);
    }

    & .tc-slider-style2 .swiper-button-next:hover,
    .tc-slider-style2 .swiper-button-prev:hover {
        border: 1px solid var(--color-blue);
        background-color: var(--color-blue);
        color: var(--color-blue1);
    }

& .nav-search-style3 .form .form-group .form-control {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    background-color: transparent;
    border: 1px solid var(--color-gray);
    border-radius: 0;
    padding: 0 0 0 40px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0 !important;
}

    & .nav-search-style3 .form .form-group .form-control::placeholder {
        font-weight: 300;
    }

& .icon-link {
    border: 1px solid var(--border-gray);
}

& .sticky-header {
    position: sticky;
    top: 5px;
    background-color: var(--color-black) !important;
    z-index: 10;
    padding-bottom: 20px;
}

& .sticky-header-2 {
    top: 65px;
}

& .sticky-header-3 {
    top: 65px;
}

& .tc-post-grid-default-overlay-esg::after {
    background: linear-gradient(270deg, rgb(28 45 82 / 100%) 0%, rgb(28 45 82 / 0%) 100%);
    right: -1px;
}

& .tc-post-grid-default-overlay-esg::before {
    background: linear-gradient(90deg, rgb(28 45 82 / 0%) 0%, rgba(98, 132, 204, 0) 100%);
    left: 0;
}

& .tc-post-grid-default-overlay-esg::before,
.tc-post-grid-default-overlay-esg::after {
    /* content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: 4%; height: 100%; */
}

& .btn-links-outline-knowledge {
    background-color: var(--color-black-2);
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    min-height: 40px;
    height: 100%;
    max-height: 40px;
    &:hover

{
    background-color: #09284E;
    color: var(--color-white);
    border: 1px solid rgba(21, 97, 189, 0.5);
}

}

& .btn-links-outline-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: var(--color-black-2);
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: var(--color-blue);
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .card-course:hover .btn-links-outline-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: #09284E;
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: var(--color-blue);
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .active-bgs .btn-links-outline-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: transparent;
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: var(--color-blue);
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .btn-links-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: #03BB00;
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: #038f01;
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .nav-search-style3 .form .form-group .icon {
    position: absolute;
    bottom: 5px;
    left: 12px;
    z-index: 2;
    font-size: 20px;
}

& .active-bgs {
    /* background-color: #1C2D52 !important; */
    /* transition: all 0.1s ease; */
    /* margin-top: 230px; */
}

& .active-btn {
    background-color: #09284E !important;
    /* Example style */
    transition: all 0.1s ease;
    border: 1px solid rgba(21, 97, 189, 0.5);
}

& .nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 1rem 1rem;
    padding: 0.5rem 0;
    position: relative !important;
}

    & .nav-pills-2 .nav-link:hover,
    .nav-pills:hover > .nav-link {
        color: var(--color-white) !important;
        background-color: transparent;
        border-radius: 0;
        font-weight: 500;
    }

    & .nav-pills-2 .nav-link.active::before,
    .nav-pills .show > .nav-link::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        border-radius: 50px;
        border-bottom: 2px solid var(--color-white);
    }

    & .nav-pills-2 .nav-link.active,
    .nav-pills .show > .nav-link {
        color: var(--color-white) !important;
        background-color: transparent;
        border-radius: 0;
        font-weight: 500;
    }

        & .nav-pills-2 .nav-link.active h3,
        .nav-pills .show > .nav-link h3 {
            font-weight: 500 !important;
        }

& .icon-link-like {
    border: 1px solid var(--border-gray);
    padding: 7px;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

& .active-like-btn {
    border: 1px solid #782919;
    /* background-color: #05121b; */
}

& .btn-like {
    content: url('../img/home-efinance/Like.svg');
    width: 18px;
    filter: invert(0);
    height: 18px;
    transition: filter 0s ease;
}

& .active-like {
    content: url('../img/home-efinance/Like-active.svg');
    /* border: 1px solid #ED340F; background-color: #050B0F; */
    filter: invert(0);
    width: 18px;
    height: 18px;
    transition: filter 0s ease;
}

& .text-focus-white {
    color: var(--color-gray);
}

& .active-bgs .text-focus-white {
    color: var(--color-white);
}

    & .active-bgs .text-focus-white > img {
        filter: brightness(10);
    }

& .img-gray .text-focus-white > img {
    filter: brightness(1);
}

& .card-course {
    background-color: transparent;
    transition: all 0.1s ease;
}

    & .card-course:hover {
        background-color: #09284E;
        border-color: rgba(21, 97, 189, 0.5) !important;
    }

& .content-youtube {
    padding: 15px 15px 25px;
    background-color: transparent;
}

& .navbar.style-1,
.navbar.style-1 {
    width: unset;
}

    & .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 0 10px;
    }

& .navbar.style-1-2 {
    margin-top: 0;
}

& .mw-md-150 {
    min-width: min-content !important;
    max-width: max-content !important;
}

& .content-container {
    position: relative;
    min-height: 1200px;
    max-height: 1200px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .fade-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    /* Adjust based on the desired fade effect height */
    background: linear-gradient(to bottom, rgb(5 18 26 / 0%), #05121a);
    pointer-events: none;
    /* Ensure the overlay does not block interactions */
    transition: height 0.1s ease;
}

& .show-more-btn {
    margin-top: 10px;
    cursor: pointer;
    display: block;
}

& .content-container.expanded {
    max-height: unset !important;
    margin-bottom: 0 !important;
}

    & .content-container.expanded .fade-overlay {
        height: 0;
    }

& .hidden-content {
    display: none;
}

& .card-news h6 {
    min-height: 46.8px;
    max-height: 46.8px;
}

& .card-news .card-box-detail {
    min-height: 46.8px;
    max-height: 46.8px;
}

& .mh-2line {
    min-height: 40.8px;
    max-height: 40.8px;
}

& .big-h {
    min-height: 93.59px !important;
    max-height: 93.59px !important;
}

& .content-overlay {
    margin-top: -90px;
    z-index: 2;
    position: relative;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(5 18 26) 38%);
}

& .check-courses li::before {
    content: url('../img/knowledge/checked.svg');
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-gray);
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
}

& .tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-next,
.tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-prev {
    width: 15px;
    height: 15px;
    background-color: var(--color-black);
}

    & .tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-next::after,
    .tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-prev::after {
        font-size: 7.5px;
    }

& .swiper-notification {
    display: none !important;
}

}
/* --------------------------------------------------------------------------- */

.dark-theme .nav-pills-2 .nav-link.active::before,
.nav-pills .show > .nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    border-radius: 50px;
    border-bottom: 2px solid var(--color-white);
}

.dark-theme .nav-pills-2 .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-white) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
}

    .dark-theme .nav-pills-2 .nav-link.active h3,
    .nav-pills .show > .nav-link h3 {
        font-weight: 500 !important;
    }
    /* --------------------------------------------------------------------------- */

    .nav-pills-2 .nav-link.active::before,
    .nav-pills .show > .nav-link::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        border-radius: 50px;
        border-bottom: 2px solid var(--color-black-2);
    }

.nav-pills-2 .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-black-2) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
}

    .nav-pills-2 .nav-link.active h3,
    .nav-pills .show > .nav-link h3 {
        font-weight: 500 !important;
    }

.nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 0 1rem;
    padding: 0;
    position: relative !important;
}

.btn-all-tabs {
    position: absolute;
    right: 1rem;
    top: 0;
}


@media screen and (max-width: 575px) {
    .btn-all-tabs {
        position: relative;
        right: unset;
        top: unset;
        width: 100%;
        text-align: right;
    }
}
/* Light Mode */

.knowledge-style {
    & .btn-share

{
    content: url('../img/home-efinance/news-share.svg');
    width: 18px;
    filter: invert(1);
    height: 18px;
    transition: filter 0s ease;
}

& .icon-share-a:hover .btn-share {
    filter: invert(0);
}

& .btn-like {
    content: url('../img/home-efinance/Like.svg');
    width: 18px;
    filter: invert(1);
    height: 18px;
    transition: filter 0s ease;
}

& .icon-share-b img {
    filter: invert(1);
}

& .icon-share-b:hover img {
    filter: invert(0);
}

& .icon-share-a:hover .btn-like {
    filter: invert(0);
}

& .active-like {
    content: url('../img/home-efinance/Like-active.svg');
    /* border: 1px solid #ED340F; background-color: #050B0F; */
    filter: invert(0);
    width: 18px;
    height: 18px;
    transition: filter 0s ease;
}

& .icon-link {
    border: 1px solid var(--border-gray);
}

& .icon-link-like {
    border: 1px solid var(--border-gray);
    padding: 7px;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

& .active-like-btn {
    /* border: 1px solid #782919; */
    /* background-color: #05121b; */
}

& .card-news h6 {
    min-height: 46.8px;
    max-height: 46.8px;
}

& .card-news .card-box-detail {
    min-height: 46.8px;
    max-height: 46.8px;
}

& .mh-2line {
    min-height: 40.8px;
    max-height: 40.8px;
}

& .big-h {
    min-height: 93.59px !important;
    max-height: 93.59px !important;
}

& .navbar.style-1,
.navbar.style-1 {
    width: unset;
}

    & .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 0 10px;
    }

& .navbar.style-1-2 {
    margin-top: 0;
}

}

.knowledge-style {
    & .btn-share

{
    content: url('../img/home-efinance/news-share.svg');
    width: 18px;
    filter: invert(0);
    height: 18px;
    transition: filter 0s ease;
}

& .tc-slider-style2 .swiper-button-next,
.tc-slider-style2 .swiper-button-prev {
    border: 1px solid rgb(102 102 102 / 20%) !important
}

    & .tc-slider-style2 .swiper-button-next::after,
    .tc-slider-style2 .swiper-button-prev::after {
        color: var(--color-black);
    }

    & .tc-slider-style2 .swiper-button-next:hover,
    .tc-slider-style2 .swiper-button-prev:hover {
        border: 1px solid var(--color-blue);
        background-color: var(--color-blue);
        color: var(--color-blue1);
    }

        & .tc-slider-style2 .swiper-button-next:hover::after,
        .tc-slider-style2 .swiper-button-prev:hover::after {
            color: var(--color-white);
        }

& .nav-search-style3 .form .form-group .form-control {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    background-color: transparent;
    border: 1px solid var(--border-gray);
    border-radius: 0;
    padding: 0 0 0 40px;
    font-size: 14px;
    font-weight: 400;
    border-radius: 0 !important;
}

    & .nav-search-style3 .form .form-group .form-control::placeholder {
        font-weight: 300;
    }

& .sticky-header {
    position: sticky;
    top: 5px;
    background-color: var(--color-white) !important;
    z-index: 10;
    padding-bottom: 20px;
}

& .sticky-header-2 {
    top: 65px;
}

& .sticky-header-3 {
    top: 65px;
}

& .tc-post-grid-default-overlay-esg::after {
    background: linear-gradient(270deg, rgb(28 45 82 / 100%) 0%, rgb(28 45 82 / 0%) 100%);
    right: -1px;
}

& .tc-post-grid-default-overlay-esg::before {
    background: linear-gradient(90deg, rgb(28 45 82 / 0%) 0%, rgba(98, 132, 204, 0) 100%);
    left: 0;
}

& .tc-post-grid-default-overlay-esg::before,
.tc-post-grid-default-overlay-esg::after {
    /* content: ""; position: absolute; top: 0; bottom: 0; z-index: 5; width: 4%; height: 100%; */
}

& .btn-links-outline-knowledge {
    background-color: #ECF4FF;
    border: 1px solid var(--border-gray);
    color: var(--color-invert);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    min-height: 40px;
    height: 100%;
    max-height: 40px;
    &:hover

{
    background-color: #B2D0F6;
    color: var(--color-invert);
    border: 1px solid rgba(21, 97, 189, 0.5);
}

}

& .btn-links-outline-knowledge img {
    filter: invert(1);
}

& .btn-links-outline-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: #ECF4FF;
    border: 1px solid var(--border-gray);
    color: var(--color-invert);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: var(--color-blue);
    color: var(--color-invert);
    border: 1px solid var(--border-gray);
}

}

& .card-course:hover .btn-links-outline-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: var(--color-blue-3);
    border: 1px solid rgba(102, 102, 102, 0.133);
    color: var(--color-invert);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: var(--color-blue-2);
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .active-bgs .btn-links-outline-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: transparent;
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: var(--color-blue);
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .btn-links-course {
    display: flex;
    align-items: center;
    min-height: 40px;
    background-color: #03BB00;
    border: 1px solid var(--border-gray);
    color: var(--color-white);
    transition: all 0.1s ease;
    padding: 0.5rem 1rem;
    width: 100%;
    &:hover

{
    background-color: #038f01;
    color: var(--color-white);
    border: 1px solid var(--border-gray);
}

}

& .nav-search-style3 .form .form-group .icon {
    position: absolute;
    bottom: 5px;
    left: 12px;
    z-index: 2;
    font-size: 20px;
}

& .active-bgs {
    /* background-color: #1C2D52 !important; */
    /* transition: all 0.1s ease; */
    /* margin-top: 230px; */
}

& .active-btn {
    background-color: #B2D0F6 !important;
    /* Example style */
    transition: all 0.1s ease;
    border: 1px solid rgba(21, 97, 189, 0.5);
    color: var(--color-invert);
}

& .nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 1rem 1rem;
    padding: 0.5rem 0;
    position: relative !important;
}

    & .nav-pills-2 .nav-link:hover,
    .nav-pills:hover > .nav-link {
        color: var(--color-black-2) !important;
        background-color: transparent;
        border-radius: 0;
        font-weight: 500;
    }

    & .nav-pills-2 .nav-link.active::before,
    .nav-pills .show > .nav-link::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        border-radius: 50px;
        border-bottom: 2px solid var(--color-black-2);
    }

    & .nav-pills-2 .nav-link.active,
    .nav-pills .show > .nav-link {
        color: var(--color-black-2) !important;
        background-color: transparent;
        border-radius: 0;
        font-weight: 500;
    }

        & .nav-pills-2 .nav-link.active h3,
        .nav-pills .show > .nav-link h3 {
            font-weight: 500 !important;
        }

& .icon-link-like {
    border: 1px solid var(--border-gray);
    padding: 7px;
    border-radius: 50%;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

    & .icon-link-like img {
        filter: invert(1);
    }

& .active-like-btn {
    border: 1px solid #782919;
    /* background-color: #05121b; */
}

& .btn-like {
    content: url('../img/home-efinance/Like.svg');
    width: 18px;
    filter: invert(0);
    height: 18px;
    transition: filter 0s ease;
}

& .active-like {
    content: url('../img/home-efinance/Like-active.svg');
    /* border: 1px solid #ED340F; background-color: #050B0F; */
    filter: invert(0) !important;
    width: 18px;
    height: 18px;
    transition: filter 0s ease;
}

& .text-focus-white {
    color: var(--color-gray);
}

& .active-bgs .text-focus-white {
    color: var(--color-white);
}

    & .active-bgs .text-focus-white > img {
        filter: brightness(10);
    }

& .img-gray .text-focus-white > img {
    filter: brightness(1);
}

& .card-course {
    background-color: transparent;
    transition: all 0.1s ease;
}

    & .card-course:hover {
        background-color: #B2D0F6;
        border-color: rgba(21, 97, 189, 0.5) !important;
    }

& .content-youtube {
    padding: 15px 15px 25px;
    background-color: transparent;
}

& .navbar.style-1,
.navbar.style-1 {
    width: unset;
}

    & .navbar.style-1 .navbar-nav .nav-item .nav-link {
        padding: 0 10px;
    }

& .navbar.style-1-2 {
    margin-top: 0;
}

& .mw-md-150 {
    min-width: min-content !important;
    max-width: max-content !important;
}

& .content-container {
    position: relative;
    min-height: 1200px;
    max-height: 1200px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .fade-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    /* Adjust based on the desired fade effect height */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));
    pointer-events: none;
    /* Ensure the overlay does not block interactions */
    transition: height 0.1s ease;
}

& .show-more-btn {
    margin-top: 10px;
    cursor: pointer;
    display: block;
}

& .content-container.expanded {
    max-height: unset !important;
    margin-bottom: 0 !important;
}

    & .content-container.expanded .fade-overlay {
        height: 0;
    }

& .hidden-content {
    display: none;
}

& .card-news h6 {
    min-height: 46.8px;
    max-height: 46.8px;
}

& .card-news .card-box-detail {
    min-height: 46.8px;
    max-height: 46.8px;
}

& .mh-2line {
    min-height: 40.8px;
    max-height: 40.8px;
}

& .big-h {
    min-height: 93.59px !important;
    max-height: 93.59px !important;
}

& .content-overlay {
    margin-top: -90px;
    z-index: 2;
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255 255 255) 38%);
}

& .check-courses li::before {
    content: url('../img/knowledge/checked.svg');
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-gray);
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
}

& .tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-next,
.tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-prev {
    width: 15px;
    height: 15px;
    background-color: var(--color-black);
}

    & .tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-next::after,
    .tc-latest-posts-slider711 .tc-slider-style1 .swiper-button-prev::after {
        font-size: 7.5px;
    }

& .swiper-notification {
    display: none !important;
}

}

@media screen and (max-width: 1399.98px) {
    .news-detail .col-img-news {
        min-width: 135px;
    }
}

@media screen and (max-width: 1299.98px) {
    .knowledge-style,
    .dark-theme.knowledge-style {
        & .sticky-header

{
    top: -40px;
}

& .sticky-header-2 {
    top: 60px;
}

& .sticky-header-3 {
    top: 60px;
}

}
}

@media screen and (max-width: 1200px) {
    html,
    body {
        scroll-padding-top: 290px;
    }

    .knowledge-style,
    .dark-theme.knowledge-style {
        & .navbar.style-1 .navbar-nav .nav-item .nav-link

{
    padding: 0 10px;
}

}

.knowledge-style,
.dark-theme.knowledge-style {
    /* & .sticky-header { top: -85px; } */
    & .sticky-header-2

{
    top: 0;
}

& .sticky-header-3 {
    top: 0;
}

}
}

@media screen and (max-width: 991px) {
    .knowledge-style,
    .dark-theme.knowledge-style {
        & .sticky-header

{
    top: -85px;
}

& .sticky-header-2 {
    top: 0;
}

& .sticky-header-3 {
    top: -50px;
}

}

.col-img-news {
    min-width: 135px;
}

.news-detail .col-img-news {
    min-width: 135px;
}

.knowledge-style,
.dark-theme.knowledge-style {
    & .navbar.style-1, .navbar.style-1

{
    width: 100%;
}

}

.knowledge-style,
.dark-theme.knowledge-style {
    & .navbar.style-1 .navbar-nav .nav-item .nav-link

{
    padding: 8px 12px;
    margin: 0;
}

& .big-h {
    min-height: 93.59px !important;
    max-height: 93.59px !important;
}

& .content-container {
    position: relative;
    min-height: 1000px;
    max-height: 1000px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .swiper-notification {
    display: inline-block !important;
}

}
}

@media screen and (max-width: 991px) {
    .navbar.style-1 .navbar-collapse {
        padding: 10px 0 0;
    }

    .knowledge-style {
        & .tc-post-grid-default-overlay-esg::after

{
    background: linear-gradient(270deg, rgb(28 45 82) 0%, rgb(28 45 82 / 0%) 100%);
    right: -1px;
}

& .tc-post-grid-default-overlay-esg::before {
    background: linear-gradient(90deg, rgb(28 45 82 / 0%) 0%, rgb(28 45 82 / 0%) 100%);
    left: 0;
}

& .tc-post-grid-default-overlay-esg::before,
.tc-post-grid-default-overlay-esg::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 4%;
    height: 100%;
}

& .nav-search-style3 {
    padding: 20px;
}

}
}

@media screen and (max-width: 768px) {
    html,
    body {
        scroll-padding-top: 260px;
    }

    .item6 {
        .max-w975

{
    max-width: 957px;
}

.tc-slider-style1 .swiper-button-next,
.tc-slider-style1 .swiper-container-rtl .swiper-button-prev {
    right: 8px;
}

.tc-slider-style1 .swiper-button-prev,
.tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    left: 8px;
}

}

.footer-style1 .content .info .social-links {
    margin-top: 40px;
    margin-bottom: 40px;
}

.stick-menu {
    padding-bottom: 20px;
}

.knowledge-style .stick-menu {
    padding-bottom: 20px;
}

.knowledge-style {
    & .tc-slider-style2 .swiper-button-next, .tc-slider-style2 .swiper-button-prev

{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* border: 1px solid #fff; */
    top: 15px;
    margin: 0;
}

& .tc-slider-style2 .swiper-button-next,
.tc-slider-style2 .swiper-container-rtl .swiper-button-prev {
    right: 15px;
    left: auto;
}

& .tc-slider-style2 .swiper-button-prev,
.tc-slider-style2 .swiper-container-rtl .swiper-button-next {
    right: 65px;
    left: auto;
}

& .mw-md-150 {
    min-width: min-content !important;
    max-width: max-content !important;
}

& .flex-between {
    margin-bottom: 0rem;
}

& .min-h-350 {
    aspect-ratio: 16/9;
    /* min-height: 175px !important; max-height: unset !important; */
}

& .big-h {
    min-height: unset !important;
    max-height: unset !important;
}

& .content-overlay {
    margin-top: -60px;
}

& .nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 1rem 1rem 1rem;
    padding: 0.5rem 0;
    position: relative !important;
}

& .content-container {
    position: relative;
    min-height: 1150px;
    max-height: 1150px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .content-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 32%);
}

& .pxx-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}

.dark-theme.knowledge-style {
    & .tc-slider-style2 .swiper-button-next, .tc-slider-style2 .swiper-button-prev

{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* border: 1px solid #fff; */
    top: 15px;
    margin: 0;
}

& .tc-slider-style2 .swiper-button-next,
.tc-slider-style2 .swiper-container-rtl .swiper-button-prev {
    right: 15px;
    left: auto;
}

& .tc-slider-style2 .swiper-button-prev,
.tc-slider-style2 .swiper-container-rtl .swiper-button-next {
    right: 65px;
    left: auto;
}

& .mw-md-150 {
    min-width: min-content !important;
    max-width: max-content !important;
}

& .flex-between {
    margin-bottom: 1rem;
}

& .min-h-350 {
    aspect-ratio: 16/9;
    /* min-height: 175px !important; max-height: unset !important; */
}

& .big-h {
    min-height: unset !important;
    max-height: unset !important;
}

& .content-overlay {
    margin-top: -60px;
}

& .nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 1rem 1rem 1rem;
    padding: 0.5rem 0;
    position: relative !important;
}

& .content-container {
    position: relative;
    min-height: 1150px;
    max-height: 1150px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .content-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(5 18 26) 32%);
}

& .pxx-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}

.knowledge-style #pills-tab,
#pills-tab2,
#pills-tab3 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* For smooth scrolling on iOS */
}

#pills-tab,
#pills-tab2,
#pills-tab3 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* For smooth scrolling on iOS */
    min-height: 25px;
}

    #pills-tab .nav-item,
    #pills-tab2 .nav-item,
    #pills-tab3 .nav-item {
        flex: 0 0 auto;
    }

    #pills-tab .nav-link,
    #pills-tab2 .nav-link,
    #pills-tab3 .nav-link {
        white-space: nowrap;
    }

.knowledge-style,
.dark-theme.knowledge-style {
    & .sticky-header

{
    top: -65px;
}

& .sticky-header-2 {
    top: 0;
}

& .sticky-header-3 {
    top: -50px;
}

}
}

@media screen and (max-width: 575px) {
    html,
    body {
        scroll-padding-top: 250px;
    }

    .footer-style1 .content .info .social-links {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .text-header {
        font-size: 18px;
        font-weight: 500;
    }

    .knowledge-style.dark-theme {
        & .flex-between

{
    display: flex;
    justify-content: start;
    /* margin-bottom: 1rem; */
}

.tc-slider-style1 .swiper-button-prev,
.tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    left: unset;
}

& .nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 1rem 1rem 1rem;
    padding: 0.5rem 0;
    position: relative !important;
}

& .big-h {
    min-height: unset !important;
    max-height: unset !important;
}

& .card-news h6 {
    min-height: 46.8px;
    /* max-height: unset; */
    /* line-height: 1.7; */
}

& .card-news .card-box-detail {
    min-height: 46.8px;
    /* max-height: unset; */
    /* line-height: 1.7; */
}

& .unset-575 {
    min-height: max-content !important;
    max-height: max-content !important;
}

& .min-h-350 {
    aspect-ratio: 16/9;
    /* min-height: 245px !important; max-height: unset !important; */
}
/* & .icon-link { width: 30px !important; height: 30px !important; } */
& .btn-share {
    width: 14px;
    height: 14px;
}

& .content-container {
    position: relative;
    min-height: 1150px;
    max-height: 1150px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .content-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(5 18 26) 32%);
}

& .pxx-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}

.knowledge-style {
    & .flex-between

{
    display: flex;
    justify-content: start;
    /* margin-bottom: 1rem; */
}

.tc-slider-style1 .swiper-button-prev,
.tc-slider-style1 .swiper-container-rtl .swiper-button-next {
    left: unset;
}

& .nav-pills-2 .nav-link,
.nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 1rem 1rem 1rem;
    padding: 0.5rem 0;
    position: relative !important;
}

& .big-h {
    min-height: unset !important;
    max-height: unset !important;
}

& .card-news h6 {
    min-height: 46.8px;
    /* max-height: unset; */
    /* line-height: 1.7; */
}

& .unset-575 {
    min-height: max-content !important;
    max-height: max-content !important;
}

& .min-h-350 {
    aspect-ratio: 16/9;
    /* min-height: 245px !important; max-height: unset !important; */
}
/* & .icon-link { width: 30px !important; height: 30px !important; } */
& .btn-share {
    width: 14px;
    height: 14px;
}

& .content-container {
    position: relative;
    min-height: 1150px;
    max-height: 1150px;
    overflow: hidden;
    margin-bottom: 30px;
}

& .content-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 32%);
}

& .pxx-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}

.knowledge-style,
.dark-theme.knowledge-style {
    & .sticky-header

{
    top: -25px;
}

& .sticky-header-2 {
    top: 25px;
}

& .sticky-header-3 {
    top: 25px;
}

}
}

@media screen and (max-width: 475px) {
    .knowledge-style,
    .dark-theme.knowledge-style {
        /* & .sticky-header { top: -25px; } & .sticky-header-2 { top: 25px; } */
        & .sticky-header-3

{
    top: 0;
}

}
}

@media screen and (max-width: 425px) {
    .knowledge-style,
    .knowledge-style.dark-theme {
        & .min-h-350

{
    /* min-height: 200px !important; max-height: unset !important; */
    aspect-ratio: 16/9;
}

& .card-news h6 {
    min-height: 0;
    /* max-height: unset; */
    /* line-height: 1.7; */
}

& .pxx-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

}
}

.dark-theme .dropdown-item.active,
.dark-theme .dropdown-item.active,
.dark-theme .dropdown-item:hover.active,
.dark-theme .dropdown-item:hover.active {
    color: var(--color-blue-200) !important;
    font-weight: 500;
    font-size: 14.5px;
    position: relative;
    top: 1px;
    background-color: #050b0f;
}

.dropdown-item.active,
.dropdown-item.active,
.dropdown-item:hover.active,
.dropdown-item:hover.active {
    color: var(--color-invert) !important;
    font-weight: 500;
    font-size: 14.5px;
    position: relative;
    top: 1px;
    background-color: rgba(178, 208, 246, 0.5);
}
/* .tc-breaking-news-slider457 .swiper-container {
    padding: 0 30px; 
} */
/* .tc-breaking-news-slider457 {
    padding: 0 30px; 
} */

.tc-breaking-news-slider457 .swiper-container {
    width: calc(100% - 80px);
}

.tc-breaking-news-slider457 .swiper-slide-active .chart-cards {
    background: rgba(216, 232, 251, 1);
    border-color: rgba(9, 40, 78, 0.5) !important;
}

.dark-theme .tc-breaking-news-slider457 .swiper-slide-active .chart-cards {
    background: rgba(9, 40, 78, 1);
    border-color: rgba(21, 97, 189, 1) !important;
}

.dark-theme .d-drak-none {
    display: none;
}

.d-light-show {
    display: block;
}

.dark-theme .d-drak-show {
    display: block;
}

.d-light-none {
    display: none;
}

.SET-Chart-Market-Summary {
    content: url('../img/home-efinance/SET-Chart-Market-Summary-Light.webp');
}

.dark-theme .SET-Chart-Market-Summary {
    content: url('../img/home-efinance/SET-Chart-Market-Summary.webp');
}

.chart-cards {
    padding: 16px;
    background: transparent;
    transition: all 0.1s ease;
    border-color: var(--border-gray) !important;
}

.dark-theme .chart-cards {
    padding: 16px;
    background: transparent;
    transition: all 0.1s ease;
    border-color: var(--border-gray) !important;
}
/* .chart-cards:hover {
    background: rgba(216, 232, 251, 1);
    border-color: rgba(9, 40, 78, 0.5) !important;
}

.dark-theme .chart-cards:hover {
    background: rgba(9, 40, 78, 1);
    border-color: rgba(21, 97, 189, 1) !important;
} */

.chart-cards .name-stock {
    color: var(--color-invert) !important;
    font-weight: 500;
    font-size: 18px;
}

.chart-cards img {
}

.market-summary-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.133);
    padding-bottom: 15px;
}

.dark-theme .market-summary-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.133);
    padding-bottom: 15px;
}

.chart-cards .price-stock-1 {
    color: var(--color-chart) !important;
    font-weight: 500;
    font-size: 24px;
}

.chart-cards .price-stock-2 {
    color: var(--color-chart) !important;
    font-weight: 400;
    font-size: 18px;
}

.chart-cards .detail-stock {
    color: var(--color-gray) !important;
    font-weight: 400;
    font-size: 14px;
}

.new-bj {
    padding: 13.5px 15px;
    border: 1px solid rgb(21 96 189 / 0%);
}

.new-bj-premium {
    background-color: #D8E8FB !important;
    padding: 8px;
    border: 1px solid rgb(21 96 189 / 25%);
}

.dark-theme .new-bj-premium {
    background-color: #09284E !important;
    padding: 8px;
    border: 1px solid rgb(21 96 189 / 25%);
}

.new-bj-premiums,
.dark-theme .new-bj-premiums {
    padding: 13.5px 15px;
}

.tc-breaking-news-slider457 .swiper-slide-active .chart-cards .detail-stock {
    color: var(--color-invert) !important;
}

.dropdown-toggles {
    border-radius: 0;
    padding: 10px 15px;
    background-color: #ffffff !important;
    border: 1px solid rgb(0 0 0 / 13%) !important;
    box-shadow: none !important;
    position: relative;
}

.dark-theme .dropdown-toggles {
    border-radius: 0;
    padding: 10px 15px;
    background-color: transparent !important;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    box-shadow: none !important;
    position: relative;
}

.dropdown-toggles:hover {
    border-radius: 0;
    padding: 10px 15px;
    background-color: transparent !important;
    border: 1px solid rgb(0 0 0 / 13%) !important;
    box-shadow: none !important;
    transition: none;
}

.dark-theme .dropdown-toggles:hover {
    border-radius: 0;
    padding: 10px 15px;
    background-color: transparent !important;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    box-shadow: none !important;
    transition: none;
}

.dropdown-menus .dropdown-item {
    background-color: var(--color-white) !important;
    position: relative;
    border-left: 1px solid rgb(0 0 0 / 13%);
    border-right: 1px solid rgb(0 0 0 / 13%);
    border-bottom: 1px solid rgb(0 0 0 / 13%);
}

    .dropdown-menus .dropdown-item:hover {
        background-color: rgba(236, 244, 255, 1) !important;
        font-weight: 600;
        color: var(--color-invert);
        padding-left: 40px;
    }

.dark-theme .dropdown-menus .dropdown-item {
    background-color: var(--color-black) !important;
    position: relative;
    border-left: 1px solid rgb(255 255 255 / 13%);
    border-right: 1px solid rgb(255 255 255 / 13%);
    border-bottom: 1px solid rgb(255 255 255 / 13%);
}

    .dark-theme .dropdown-menus .dropdown-item:hover {
        background-color: var(--color-black-2) !important;
        font-weight: 600;
        color: var(--color-invert);
        padding-left: 40px;
    }

.dropdown-menus .dropdown-item:hover::before {
    content: url('../img/home-efinance/checked-white.svg');
    position: absolute;
    display: inline-block;
    margin-right: 4px;
    left: 15px;
    filter: invert(1);
}

.dark-theme .dropdown-menus .dropdown-item:hover::before {
    content: url('../img/home-efinance/checked-white.svg');
    position: absolute;
    display: inline-block;
    margin-right: 4px;
    left: 15px;
    filter: invert(0);
}

.dropdown-toggles b {
    margin-right: 175px;
    font-weight: 300 !important;
    margin-left: 4px;
    color: var(--color-invert);
}

.dropdown-toggles::after {
    position: relative;
    top: 0;
    opacity: 0.8;
    content: "\f3d0";
    display: inline-block;
    font-family: "Ionicons";
    border: 0;
    line-height: inherit;
    transform: rotate(0deg);
    transition: transform 0.1s ease;
    color: var(--color-invert);
}

.dropdown-menus {
    max-width: 334px;
    width: 100%;
    top: -2.5px !important;
}

.dark-theme .icon-preson {
    border-radius: 50px;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    padding: 8px;
}

.icon-preson {
    border-radius: 50px;
    border: 1px solid rgb(0 0 0 / 13%) !important;
    padding: 8px;
}
/* 
.icon-refresh {
    border-radius: 50px;
    border: 1px solid rgb(0 0 0 / 13%) !important;
    padding: 5px;
    background-color: var(--bg-invert);
    width: 25px;
    content: url('../img/home-efinance/refresh-w.svg');
} */
/* .icon-refresh:hover {
    border-radius: 50px;
    border: 1px solid #666 !important;
    background-color: var(--color-blue);
    width: 25px;
    content: url('../img/home-efinance/refresh-h.svg');
    transition: all 0.1s ease;
} */
/* .dark-theme .icon-refresh {
    border-radius: 50px;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    padding: 5px;
    background-color: var(--bg-invert-2);
    width: 25px;
    content: url('../img/home-efinance/refresh.svg');
}

.dark-theme .icon-refresh:hover {
    border-radius: 50px;
    border: 1px solid rgb(255 255 255 / 13%) !important;
    padding: 5px;
    background-color: var(--color-blue);
    width: 25px;
    content: url('../img/home-efinance/refresh-h.svg');
} */
/* ///////refresh//////// */

.icon-refresh {
    width: 25px;
    height: 25px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    padding: 5px;
    background-color: var(--bg-invert);
    transition: all 0.2s ease;
}
/* Hover (light mode) */

.refresh-btn:hover .icon-refresh {
    border: 1px solid #666;
    background-color: var(--color-blue);
}
/* Dark mode styles */

.dark-theme .icon-refresh {
    border: 1px solid rgba(255, 255, 255, 0.13);
    background-color: var(--bg-invert-2);
}
/* Hover (dark mode) */

.dark-theme .refresh-btn:hover .icon-refresh {
    border: 1px solid rgba(255, 255, 255, 0.13);
    background-color: var(--color-blue);
}
/* Spin animation */

@keyframes spin-refresh {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-refresh.spin {
    animation: spin-refresh 0.7s ease-in-out;
}

@media screen and (max-width: 1193px) {
    .icon-refresh {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 1193px) {
    .icon-refresh {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 991px) {
    .icon-refresh {
        width: 25px;
        height: 25px;
    }
}
/* ///////refresh//////// */

.dropdown-menus .dropdown-item-st {
    border-bottom: 0px solid rgb(255 255 255 / 0%) !important;
}

.brd-sm-0 {
    border-right: 1px solid var(--color-brd) !important;
    ;
}

.py-3px {
    padding: 3px 0;
}

@media screen and (max-width: 1200px) {
    .SET-Chart-Market-Summary {
        content: url('../img/home-efinance/SET-Chart-Market-Summary-Light-768.webp');
    }

    .dark-theme .SET-Chart-Market-Summary {
        content: url('../img/home-efinance/SET-Chart-Market-Summary-768.webp');
    }

    .line-clamp-lg-2 {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media screen and (max-width: 991px) {
    .tc-breaking-news-slider457 .swiper-container {
        width: calc(100% - 180px);
    }

    .dropdown-menus {
        width: 100% !important;
        top: -2.5px !important;
    }
}

@media screen and (max-width: 768px) {
    .tc-breaking-news-slider457 .swiper-container {
        width: calc(100% - 80px);
    }
}

@media screen and (max-width: 575px) {
    .w-sm-100 {
        width: 100%;
    }

    .dropdown-menus {
        width: calc(100% - 24px) !important;
        top: -3px !important;
        max-width: 575px !important;
    }

    .dropdown-toggles b {
        margin-right: auto;
        font-weight: 300 !important;
        margin-left: 4px;
        color: var(--color-invert);
    }

    .tc-breaking-news-slider457 .swiper-container {
        width: calc(100% - 80px);
    }

    .SET-Chart-Market-Summary {
        content: url('../img/home-efinance/SET-Chart-Market-Summary-Light-575.webp');
    }

    .dark-theme .SET-Chart-Market-Summary {
        content: url('../img/home-efinance/SET-Chart-Market-Summary-575.webp');
    }

    .brd-sm-0 {
        border-right: 0px solid var(--color-brd) !important;
    }
}
/* <!-- navbar-hover-handler --> */

.dropdownMenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dropdown-2.show .dropdownMenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* <!-- end-navbar-hover-handler --> */
/* -------table-info-news------- */

#table-info-news {
    font-family: 'Sarabun', sans-serif;
    border: 0px solid var(--color-brd);
    border-radius: 0px;
    overflow-x: auto;
    background-color: var(--bg-invert);
    color: var(--color-invert);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

    #table-info-news .table-title {
        background-color: var(--color-white);
        color: var(--color-black-2);
        padding: 16px 16px;
        font-size: 18px;
        font-weight: 700;
        border-top: 4px solid var(--color-blue);
    }

    #table-info-news table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    #table-info-news thead {
        background-color: #ECF4FF;
        color: var(--color-gray);
        border-top: 1px solid var(--border-gray);
    }

        #table-info-news thead tr th {
            font-size: 12px;
            font-weight: 600;
            padding: 8px 16px;
            text-align: center;
        }

    #table-info-news tbody tr td {
        background-color: var(--color-white) !important;
    }

    #table-info-news td {
        text-align: center;
        padding: 8px 16px;
        border-bottom: 1px solid var(--border-gray);
    }

    #table-info-news tbody tr:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.02);
    }

.dark-theme #table-info-news tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

#table-info-news .table-note {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--color-gray);
    background-color: var(--bg-invert-2);
    border-top: 0px solid var(--border-gray);
}

    #table-info-news .table-note .disclaimer {
        color: #ED340F;
        font-size: 12px;
        font-weight: 300;
    }

.table-l {
    text-align: left;
}

.table-r {
    text-align: right;
}

.dark-theme #table-info-news .table-title {
    background-color: var(--color-black);
    color: var(--color-white);
    border-top: 4px solid var(--color-blue);
}

.dark-theme #table-info-news thead {
    background-color: var(--bg-invert);
    color: var(--color-gray);
}

.dark-theme #table-info-news tbody tr td {
    background-color: var(--color-black) !important;
}

.dark-theme #table-info-news .table-note {
    color: var(--color-gray);
    background-color: var(--color-black);
}

@media (max-width: 767px) {
    #table-info-news table th,
    #table-info-news table td {
        font-size: 12px;
        padding: 10px 6px;
    }

    #table-info-news .table-title {
        font-size: 0.95rem;
    }

    #table-info-news .table-title {
        font-size: 14px;
    }

    #table-info-news thead tr th {
        padding: 10px 6px;
    }

    #table-info-news .table-note {
        padding: 10px 6px;
    }

    #table-info-news .table-title {
        padding: 16px 8px;
    }
}
/* -------end-table-info-news------- */

.tc-slider-style1 .swiper-button-next::after,
.tc-slider-style1 .swiper-button-prev::after,
.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-next::after,
.tc-latest-posts-style4 .tc-slider-style1 .swiper-button-prev::after {
    color: var(--color-invert);
}
/* Base font size classes */

.fsz-6px {
    font-size: 6px !important;
}

.fsz-8px {
    font-size: 8px !important;
}

.fsz-10px {
    font-size: 10px !important;
}

.fsz-11px {
    font-size: 11px !important;
}

.fsz-12px {
    font-size: 12px !important;
}

.fsz-13px {
    font-size: 13px !important;
}

.fsz-14px {
    font-size: 14px !important;
}

.fsz-15px {
    font-size: 15px !important;
}

.fsz-16px {
    font-size: 16px !important;
}

.fsz-17px {
    font-size: 17px !important;
}

.fsz-18px {
    font-size: 18px !important;
}

.fsz-19px {
    font-size: 19px !important;
}

.fsz-20px {
    font-size: 20px !important;
}

.fsz-21px {
    font-size: 21px !important;
}

.fsz-22px {
    font-size: 22px !important;
}

.fsz-23px {
    font-size: 23px !important;
}

.fsz-24px {
    font-size: 24px !important;
}

.fsz-25px {
    font-size: 25px !important;
}

.fsz-26px {
    font-size: 26px !important;
}

.fsz-27px {
    font-size: 27px !important;
}

.fsz-28px {
    font-size: 28px !important;
}

.fsz-29px {
    font-size: 29px !important;
}

.fsz-30px {
    font-size: 30px !important;
}

.fsz-35px {
    font-size: 35px !important;
}

.fsz-36px {
    font-size: 36px !important;
}

.fsz-40px {
    font-size: 40px !important;
}

.fsz-45px {
    font-size: 45px !important;
}

.fsz-50px {
    font-size: 50px !important;
}

.fsz-55px {
    font-size: 55px !important;
}

.col-1-25 {
    min-width: 100px;
    max-width: 100px;
}

.col-10-5 {
    flex: 0 0 auto;
    width: 100%
}

.col-1-5 {
    min-width: 130px;
    max-width: 130px;
}
/* Responsive font size classes */

@media (max-width: 574.98px) {
    .col-10-5 {
        flex: 0 0 auto;
        width: 100%
    }
    /* SM */
    .fsz-sm-6px {
        font-size: 6px !important;
    }

    .fsz-sm-10px {
        font-size: 10px !important;
    }

    .fsz-sm-11px {
        font-size: 11px !important;
    }

    .fsz-sm-12px {
        font-size: 12px !important;
    }

    .fsz-sm-13px {
        font-size: 13px !important;
    }

    .fsz-sm-14px {
        font-size: 14px !important;
    }

    .fsz-sm-15px {
        font-size: 15px !important;
    }

    .fsz-sm-16px {
        font-size: 16px !important;
    }

    .fsz-sm-17px {
        font-size: 17px !important;
    }

    .fsz-sm-18px {
        font-size: 18px !important;
    }

    .fsz-sm-19px {
        font-size: 19px !important;
    }

    .fsz-sm-20px {
        font-size: 20px !important;
    }

    .fsz-sm-21px {
        font-size: 21px !important;
    }

    .fsz-sm-22px {
        font-size: 22px !important;
    }

    .fsz-sm-23px {
        font-size: 23px !important;
    }

    .fsz-sm-24px {
        font-size: 24px !important;
    }

    .fsz-sm-25px {
        font-size: 25px !important;
    }

    .fsz-sm-26px {
        font-size: 26px !important;
    }

    .fsz-sm-27px {
        font-size: 27px !important;
    }

    .fsz-sm-28px {
        font-size: 28px !important;
    }

    .fsz-sm-29px {
        font-size: 29px !important;
    }

    .fsz-sm-30px {
        font-size: 30px !important;
    }

    .fsz-sm-35px {
        font-size: 35px !important;
    }

    .fsz-sm-40px {
        font-size: 40px !important;
    }

    .fsz-sm-45px {
        font-size: 45px !important;
    }

    .fsz-sm-50px {
        font-size: 50px !important;
    }

    .fsz-sm-55px {
        font-size: 55px !important;
    }
}

@media (min-width: 576px) {
    /* MD */
    .w-md-unset {
        width: unset !important;
    }

    .mw-md-90 {
        min-width: 90px !important;
        max-width: 90px !important;
    }

    .fsz-md-6px {
        font-size: 6px !important;
    }

    .fsz-md-10px {
        font-size: 10px !important;
    }

    .fsz-md-11px {
        font-size: 11px !important;
    }

    .fsz-md-12px {
        font-size: 12px !important;
    }

    .fsz-md-13px {
        font-size: 13px !important;
    }

    .fsz-md-14px {
        font-size: 14px !important;
    }

    .fsz-md-15px {
        font-size: 15px !important;
    }

    .fsz-md-16px {
        font-size: 16px !important;
    }

    .fsz-md-17px {
        font-size: 17px !important;
    }

    .fsz-md-18px {
        font-size: 18px !important;
    }

    .fsz-md-19px {
        font-size: 19px !important;
    }

    .fsz-md-20px {
        font-size: 20px !important;
    }

    .fsz-md-21px {
        font-size: 21px !important;
    }

    .fsz-md-22px {
        font-size: 22px !important;
    }

    .fsz-md-23px {
        font-size: 23px !important;
    }

    .fsz-md-24px {
        font-size: 24px !important;
    }

    .fsz-md-25px {
        font-size: 25px !important;
    }

    .fsz-md-26px {
        font-size: 26px !important;
    }

    .fsz-md-27px {
        font-size: 27px !important;
    }

    .fsz-md-28px {
        font-size: 28px !important;
    }

    .fsz-md-29px {
        font-size: 29px !important;
    }

    .fsz-md-30px {
        font-size: 30px !important;
    }

    .fsz-md-35px {
        font-size: 35px !important;
    }

    .fsz-md-36px {
        font-size: 36px !important;
    }

    .fsz-md-40px {
        font-size: 40px !important;
    }

    .fsz-md-45px {
        font-size: 45px !important;
    }

    .fsz-md-50px {
        font-size: 50px !important;
    }

    .fsz-md-55px {
        font-size: 55px !important;
    }

    .col-10-5 {
        flex: 0 0 auto;
        width: 57.333333%;
    }
}

@media (min-width: 767.98px) {
    .col-10 {
        flex: 0 0 auto;
        width: 67.333333%;
    }
    /* LG */
    .position-lg-absolute {
        position: absolute !important;
    }

    .fsz-lg-6px {
        font-size: 6px !important;
    }

    .fsz-lg-10px {
        font-size: 10px !important;
    }

    .fsz-lg-11px {
        font-size: 11px !important;
    }

    .fsz-lg-12px {
        font-size: 12px !important;
    }

    .fsz-lg-13px {
        font-size: 13px !important;
    }

    .fsz-lg-14px {
        font-size: 14px !important;
    }

    .fsz-lg-15px {
        font-size: 15px !important;
    }

    .fsz-lg-16px {
        font-size: 16px !important;
    }

    .fsz-lg-17px {
        font-size: 17px !important;
    }

    .fsz-lg-18px {
        font-size: 18px !important;
    }

    .fsz-lg-19px {
        font-size: 19px !important;
    }

    .fsz-lg-20px {
        font-size: 20px !important;
    }

    .fsz-lg-21px {
        font-size: 21px !important;
    }

    .fsz-lg-22px {
        font-size: 22px !important;
    }

    .fsz-lg-23px {
        font-size: 23px !important;
    }

    .fsz-lg-24px {
        font-size: 24px !important;
    }

    .fsz-lg-25px {
        font-size: 25px !important;
    }

    .fsz-lg-26px {
        font-size: 26px !important;
    }

    .fsz-lg-27px {
        font-size: 27px !important;
    }

    .fsz-lg-28px {
        font-size: 28px !important;
    }

    .fsz-lg-29px {
        font-size: 29px !important;
    }

    .fsz-lg-30px {
        font-size: 30px !important;
    }

    .fsz-lg-35px {
        font-size: 35px !important;
    }

    .fsz-lg-36px {
        font-size: 36px !important;
    }

    .fsz-lg-40px {
        font-size: 40px !important;
    }

    .fsz-lg-45px {
        font-size: 45px !important;
    }

    .fsz-lg-50px {
        font-size: 50px !important;
    }

    .fsz-lg-55px {
        font-size: 55px !important;
    }

    .col-10-5 {
        flex: 0 0 auto;
        width: 66.33333333%
    }
}

@media (min-width: 992px) {
    .col-10-5 {
        flex: 0 0 auto;
        width: 75.33333333%
    }
    /* XL */
    .position-xl-absolute {
        position: absolute !important;
    }

    .fsz-xl-6px {
        font-size: 6px !important;
    }

    .fsz-xl-10px {
        font-size: 10px !important;
    }

    .fsz-xl-11px {
        font-size: 11px !important;
    }

    .fsz-xl-12px {
        font-size: 12px !important;
    }

    .fsz-xl-13px {
        font-size: 13px !important;
    }

    .fsz-xl-14px {
        font-size: 14px !important;
    }

    .fsz-xl-15px {
        font-size: 15px !important;
    }

    .fsz-xl-16px {
        font-size: 16px !important;
    }

    .fsz-xl-17px {
        font-size: 17px !important;
    }

    .fsz-xl-18px {
        font-size: 18px !important;
    }

    .fsz-xl-19px {
        font-size: 19px !important;
    }

    .fsz-xl-20px {
        font-size: 20px !important;
    }

    .fsz-xl-21px {
        font-size: 21px !important;
    }

    .fsz-xl-22px {
        font-size: 22px !important;
    }

    .fsz-xl-23px {
        font-size: 23px !important;
    }

    .fsz-xl-24px {
        font-size: 24px !important;
    }

    .fsz-xl-25px {
        font-size: 25px !important;
    }

    .fsz-xl-26px {
        font-size: 26px !important;
    }

    .fsz-xl-27px {
        font-size: 27px !important;
    }

    .fsz-xl-28px {
        font-size: 28px !important;
    }

    .fsz-xl-29px {
        font-size: 29px !important;
    }

    .fsz-xl-30px {
        font-size: 30px !important;
    }

    .fsz-xl-35px {
        font-size: 35px !important;
    }

    .fsz-xl-36px {
        font-size: 36px !important;
    }

    .fsz-xl-40px {
        font-size: 40px !important;
    }

    .fsz-xl-45px {
        font-size: 45px !important;
    }

    .fsz-xl-50px {
        font-size: 50px !important;
    }

    .fsz-xl-55px {
        font-size: 55px !important;
    }
}

@media (min-width: 1193.98px) {
    .col-10-5 {
        flex: 0 0 auto;
        width: 79.33333333%
    }
    /* XXL */
    .fsz-xxl-6px {
        font-size: 6px !important;
    }

    .fsz-xxl-10px {
        font-size: 10px !important;
    }

    .fsz-xxl-11px {
        font-size: 11px !important;
    }

    .fsz-xxl-12px {
        font-size: 12px !important;
    }

    .fsz-xxl-13px {
        font-size: 13px !important;
    }

    .fsz-xxl-14px {
        font-size: 14px !important;
    }

    .fsz-xxl-15px {
        font-size: 15px !important;
    }

    .fsz-xxl-16px {
        font-size: 16px !important;
    }

    .fsz-xxl-17px {
        font-size: 17px !important;
    }

    .fsz-xxl-18px {
        font-size: 18px !important;
    }

    .fsz-xxl-19px {
        font-size: 19px !important;
    }

    .fsz-xxl-20px {
        font-size: 20px !important;
    }

    .fsz-xxl-21px {
        font-size: 21px !important;
    }

    .fsz-xxl-22px {
        font-size: 22px !important;
    }

    .fsz-xxl-23px {
        font-size: 23px !important;
    }

    .fsz-xxl-24px {
        font-size: 24px !important;
    }

    .fsz-xxl-25px {
        font-size: 25px !important;
    }

    .fsz-xxl-26px {
        font-size: 26px !important;
    }

    .fsz-xxl-27px {
        font-size: 27px !important;
    }

    .fsz-xxl-28px {
        font-size: 28px !important;
    }

    .fsz-xxl-29px {
        font-size: 29px !important;
    }

    .fsz-xxl-30px {
        font-size: 30px !important;
    }

    .fsz-xxl-35px {
        font-size: 35px !important;
    }

    .fsz-xxl-40px {
        font-size: 40px !important;
    }

    .fsz-xxl-45px {
        font-size: 45px !important;
    }

    .fsz-xxl-50px {
        font-size: 50px !important;
    }

    .fsz-xxl-55px {
        font-size: 55px !important;
    }
}

@media (min-width: 1299.98px) {
    .col-1-25 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-10-5 {
        flex: 0 0 auto;
        width: 80.33333333%
    }

    .col-1-5 {
        flex: 0 0 auto;
        width: 11.33333333%
    }
}

@media (min-width: 1399.98px) {
    .col-1-25 {
        flex: 0 0 auto;
        width: 8.33333333%
    }

    .col-10-5 {
        flex: 0 0 auto;
        width: 80.33333333%
    }

    .col-1-5 {
        flex: 0 0 auto;
        width: 11.33333333%
    }
}
/* --------------- margin classes --------------- */

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.m-5 {
    margin: 3rem !important
}

.m-auto {
    margin: auto !important
}

.mx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important
}

.mx-1 {
    margin-right: .25rem !important;
    margin-left: .25rem !important
}

.mx-2 {
    margin-right: .5rem !important;
    margin-left: .5rem !important
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-4 {
    margin-right: 1.5rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-auto {
    margin-right: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-05 {
    margin-bottom: 3px !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.mb-auto {
    margin-bottom: auto !important
}

.ms-0 {
    margin-left: 0 !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.ms-4 {
    margin-left: 1.5rem !important
}

.ms-5 {
    margin-left: 3rem !important
}

.ms-auto {
    margin-left: auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important
}

.px-1 {
    padding-right: .25rem !important;
    padding-left: .25rem !important
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-1 {
    padding-top: .25rem !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pt-4 {
    padding-top: 1.5rem !important
}

.pt-5 {
    padding-top: 3rem !important
}

.pe-0 {
    padding-right: 0 !important
}

.pe-1 {
    padding-right: .25rem !important
}

.pe-2 {
    padding-right: .5rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pe-4 {
    padding-right: 1.5rem !important
}

.pe-5 {
    padding-right: 3rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-0 {
    padding-left: 0 !important
}

.ps-1 {
    padding-left: .25rem !important
}

.ps-2 {
    padding-left: .5rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.ps-4 {
    padding-left: 1.5rem !important
}

.ps-5 {
    padding-left: 3rem !important
}

.mt-5px {
    margin-top: 5px !important;
}

.mt-5px {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mt-50 {
    margin-top: 50px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mt-70 {
    margin-top: 70px !important;
}

.mt-80 {
    margin-top: 80px !important;
}

.mt-90 {
    margin-top: 90px !important;
}

.mt-100 {
    margin-top: 100px !important;
}

.mt-150 {
    margin-top: 150px !important;
}

.mt-200 {
    margin-top: 200px !important;
}

.mb-5px {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-50 {
    margin-bottom: 50px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-70 {
    margin-bottom: 70px !important;
}

.mb-80 {
    margin-bottom: 80px !important;
}

.mb-90 {
    margin-bottom: 90px !important;
}

.mb-100 {
    margin-bottom: 100px !important;
}

.mb-150 {
    margin-bottom: 150px !important;
}

.mb-200 {
    margin-bottom: 200px !important;
}

.ms-10 {
    -webkit-margin-start: 10px !important;
    margin-left: 10px !important;
}

.ms-15 {
    -webkit-margin-start: 15px !important;
    margin-left: 15px !important;
}

.ms-20 {
    -webkit-margin-start: 20px !important;
    margin-left: 20px !important;
}

.ms-30 {
    -webkit-margin-start: 30px !important;
    margin-left: 30px !important;
}

.ms-40 {
    -webkit-margin-start: 40px !important;
    margin-left: 40px !important;
}

.ms-50 {
    -webkit-margin-start: 50px !important;
    margin-left: 50px !important;
}

.ms-60 {
    -webkit-margin-start: 60px !important;
    margin-left: 60px !important;
}

.ms-70 {
    -webkit-margin-start: 70px !important;
    margin-left: 70px !important;
}

.ms-80 {
    -webkit-margin-start: 80px !important;
    margin-left: 80px !important;
}

.ms-90 {
    -webkit-margin-start: 90px !important;
    margin-left: 90px !important;
}

.ms-100 {
    -webkit-margin-start: 100px !important;
    margin-left: 100px !important;
}

.ms-150 {
    -webkit-margin-start: 150px !important;
    margin-left: 150px !important;
}

.ms-200 {
    -webkit-margin-start: 200px !important;
    margin-left: 200px !important;
}

.me-10 {
    -webkit-margin-end: 10px !important;
    margin-right: 10px !important;
}

.me-15 {
    -webkit-margin-end: 15px !important;
    margin-right: 15px !important;
}

.me-20 {
    -webkit-margin-end: 20px !important;
    margin-right: 20px !important;
}

.me-30 {
    -webkit-margin-end: 30px !important;
    margin-right: 30px !important;
}

.me-40 {
    -webkit-margin-end: 40px !important;
    margin-right: 40px !important;
}

.me-50 {
    -webkit-margin-end: 50px !important;
    margin-right: 50px !important;
}

.me-60 {
    -webkit-margin-end: 60px !important;
    margin-right: 60px !important;
}

.me-70 {
    -webkit-margin-end: 70px !important;
    margin-right: 70px !important;
}

.me-80 {
    -webkit-margin-end: 80px !important;
    margin-right: 80px !important;
}

.me-90 {
    -webkit-margin-end: 90px !important;
    margin-right: 90px !important;
}

.me-100 {
    -webkit-margin-end: 100px !important;
    margin-right: 100px !important;
}

.me-150 {
    -webkit-margin-end: 150px !important;
    margin-right: 150px !important;
}

.me-200 {
    -webkit-margin-end: 200px !important;
    margin-right: 200px !important;
}
/* --------------- padding classes --------------- */

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-18 {
    padding: 18px 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-30 {
    padding: 30px !important;
}

.p-40 {
    padding: 40px !important;
}

.p-50 {
    padding: 50px !important;
}

.p-60 {
    padding: 60px !important;
}

.p-70 {
    padding: 70px !important;
}

.p-80 {
    padding: 80px !important;
}

.p-90 {
    padding: 90px !important;
}

.p-100 {
    padding: 100px !important;
}

.p-150 {
    padding: 150px !important;
}

.p-200 {
    padding: 200px !important;
}

.ps-10 {
    -webkit-padding-left: 10px !important;
    padding-left: 10px !important;
}

.ps-15 {
    -webkit-padding-left: 15px !important;
    padding-left: 15px !important;
}

.ps-20 {
    -webkit-padding-left: 20px !important;
    padding-left: 20px !important;
}

.ps-30 {
    -webkit-padding-left: 30px !important;
    padding-left: 30px !important;
}

.ps-40 {
    -webkit-padding-left: 40px !important;
    padding-left: 40px !important;
}

.ps-50 {
    -webkit-padding-left: 50px !important;
    padding-left: 50px !important;
}

.ps-60 {
    -webkit-padding-left: 60px !important;
    padding-left: 60px !important;
}

.ps-70 {
    -webkit-padding-left: 70px !important;
    padding-left: 70px !important;
}

.ps-80 {
    -webkit-padding-left: 80px !important;
    padding-left: 80px !important;
}

.ps-90 {
    -webkit-padding-left: 90px !important;
    padding-left: 90px !important;
}

.ps-100 {
    -webkit-padding-left: 100px !important;
    padding-left: 100px !important;
}

.ps-150 {
    -webkit-padding-left: 150px !important;
    padding-left: 150px !important;
}

.ps-200 {
    -webkit-padding-left: 200px !important;
    padding-left: 200px !important;
}

.pe-10 {
    -webkit-padding-right: 10px !important;
    padding-right: 10px !important;
}

.pe-15 {
    -webkit-padding-right: 15px !important;
    padding-right: 15px !important;
}

.pe-20 {
    -webkit-padding-right: 20px !important;
    padding-right: 20px !important;
}

.pe-30 {
    -webkit-padding-right: 30px !important;
    padding-right: 30px !important;
}

.pe-40 {
    -webkit-padding-right: 40px !important;
    padding-right: 40px !important;
}

.pe-50 {
    -webkit-padding-right: 50px !important;
    padding-right: 50px !important;
}

.pe-60 {
    -webkit-padding-right: 60px !important;
    padding-right: 60px !important;
}

.pe-70 {
    -webkit-padding-right: 70px !important;
    padding-right: 70px !important;
}

.pe-80 {
    -webkit-padding-right: 80px !important;
    padding-right: 80px !important;
}

.pe-90 {
    -webkit-padding-right: 90px !important;
    padding-right: 90px !important;
}

.pe-100 {
    -webkit-padding-right: 100px !important;
    padding-right: 100px !important;
}

.pe-150 {
    -webkit-padding-right: 150px !important;
    padding-right: 150px !important;
}

.pe-200 {
    -webkit-padding-right: 200px !important;
    padding-right: 200px !important;
}

.pt-2px {
    padding-top: 2px !important;
}

.pt-5px {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-25 {
    padding-top: 25px !important;
}

.pt-30 {
    padding-top: 30px !important;
}

.pt-40 {
    padding-top: 40px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

.pt-60 {
    padding-top: 60px !important;
}

.pt-70 {
    padding-top: 70px !important;
}

.pt-80 {
    padding-top: 80px !important;
}

.pt-90 {
    padding-top: 90px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.pt-150 {
    padding-top: 150px !important;
}

.pt-200 {
    padding-top: 200px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pb-25 {
    padding-bottom: 25px !important;
}

.pb-30 {
    padding-bottom: 30px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pb-50 {
    padding-bottom: 50px !important;
}

.pb-60 {
    padding-bottom: 60px !important;
}

.pb-70 {
    padding-bottom: 70px !important;
}

.pb-80 {
    padding-bottom: 80px !important;
}

.pb-90 {
    padding-bottom: 90px !important;
}

.pb-100 {
    padding-bottom: 100px !important;
}

.pb-150 {
    padding-bottom: 150px !important;
}

.pb-200 {
    padding-bottom: 200px !important;
}

.max-w-728 {
    max-width: 728px;
    width: 100%;
}

.max-w-16 {
    max-height: 14px;
}

.max-w-350 {
    max-width: 300px;
    width: 300px;
}

.bg-blue {
    background-color: #0D60FE !important;
}

    .bg-blue:hover {
        background-color: #3e8bea !important;
    }

.bg-cyan {
    background-color: rgba(236, 244, 255, 1) !important;
}

.dark-theme .bg-cyan {
    background-color: var(--color-black-2) !important;
}

.h-20 {
    height: 20px;
}
/* Responsive margin classes */

@media (min-width: 576px) {
    .modal-dialog {
        /*max-width: 300px;*/
        margin: 1.75rem auto;
    }

    .ps-sm-5px {
        padding-left: 5px !important;
    }

    .ps-sm-10 {
        padding-left: 10px !important;
    }

    .ps-sm-15 {
        padding-left: 15px !important;
    }

    .ps-sm-20 {
        padding-left: 20px !important;
    }

    .ps-sm-30 {
        padding-left: 30px !important;
    }

    .ps-sm-40 {
        padding-left: 40px !important;
    }

    .ps-sm-50 {
        padding-left: 50px !important;
    }

    .ps-sm-60 {
        padding-left: 60px !important;
    }

    .ps-sm-70 {
        padding-left: 70px !important;
    }

    .ps-sm-80 {
        padding-left: 80px !important;
    }

    .ps-sm-90 {
        padding-left: 90px !important;
    }

    .ps-sm-100 {
        padding-left: 100px !important;
    }

    .ps-sm-150 {
        padding-left: 150px !important;
    }

    .ps-sm-200 {
        padding-left: 200px !important;
    }

    .pe-sm-10 {
        padding-right: 10px !important;
    }

    .pe-sm-15 {
        padding-right: 15px !important;
    }

    .pe-sm-20 {
        padding-right: 20px !important;
    }

    .pe-sm-30 {
        padding-right: 30px !important;
    }

    .pe-sm-40 {
        padding-right: 40px !important;
    }

    .pe-sm-50 {
        padding-right: 50px !important;
    }

    .pe-sm-60 {
        padding-right: 60px !important;
    }

    .pe-sm-70 {
        padding-right: 70px !important;
    }

    .pe-sm-80 {
        padding-right: 80px !important;
    }

    .pe-sm-90 {
        padding-right: 90px !important;
    }

    .pe-sm-100 {
        padding-right: 100px !important;
    }

    .pe-sm-150 {
        padding-right: 150px !important;
    }

    .pe-sm-200 {
        padding-right: 200px !important;
    }

    .pt-sm-5px {
        padding-top: 5px !important;
    }

    .pt-sm-10 {
        padding-top: 10px !important;
    }

    .pt-sm-15 {
        padding-top: 15px !important;
    }

    .pt-sm-20 {
        padding-top: 20px !important;
    }

    .pt-sm-30 {
        padding-top: 30px !important;
    }

    .pt-sm-40 {
        padding-top: 40px !important;
    }

    .pt-sm-50 {
        padding-top: 50px !important;
    }

    .pt-sm-60 {
        padding-top: 60px !important;
    }

    .pt-sm-70 {
        padding-top: 70px !important;
    }

    .pt-sm-80 {
        padding-top: 80px !important;
    }

    .pt-sm-90 {
        padding-top: 90px !important;
    }

    .pt-sm-100 {
        padding-top: 100px !important;
    }

    .pt-sm-150 {
        padding-top: 150px !important;
    }

    .pt-sm-200 {
        padding-top: 200px !important;
    }

    .pb-sm-10 {
        padding-bottom: 10px !important;
    }

    .pb-sm-15 {
        padding-bottom: 15px !important;
    }

    .pb-sm-20 {
        padding-bottom: 20px !important;
    }

    .pb-sm-25 {
        padding-bottom: 25px !important;
    }

    .pb-sm-30 {
        padding-bottom: 30px !important;
    }

    .pb-sm-40 {
        padding-bottom: 40px !important;
    }

    .pb-sm-50 {
        padding-bottom: 50px !important;
    }

    .pb-sm-60 {
        padding-bottom: 60px !important;
    }

    .pb-sm-70 {
        padding-bottom: 70px !important;
    }

    .pb-sm-80 {
        padding-bottom: 80px !important;
    }

    .pb-sm-90 {
        padding-bottom: 90px !important;
    }

    .pb-sm-100 {
        padding-bottom: 100px !important;
    }

    .pb-sm-150 {
        padding-bottom: 150px !important;
    }

    .pb-sm-200 {
        padding-bottom: 200px !important;
    }

    .mt-sm-5px {
        margin-top: 5px !important;
    }

    .mt-sm-10 {
        margin-top: 10px !important;
    }

    .mt-sm-15 {
        margin-top: 15px !important;
    }

    .mt-sm-20 {
        margin-top: 20px !important;
    }

    .mt-sm-30 {
        margin-top: 30px !important;
    }

    .mt-sm-40 {
        margin-top: 40px !important;
    }

    .mt-sm-50 {
        margin-top: 50px !important;
    }

    .mt-sm-60 {
        margin-top: 60px !important;
    }

    .mt-sm-70 {
        margin-top: 70px !important;
    }

    .mt-sm-80 {
        margin-top: 80px !important;
    }

    .mt-sm-90 {
        margin-top: 90px !important;
    }

    .mt-sm-100 {
        margin-top: 100px !important;
    }

    .mt-sm-150 {
        margin-top: 150px !important;
    }

    .mt-sm-200 {
        margin-top: 200px !important;
    }

    .mb-sm-5px {
        margin-bottom: 5px !important;
    }

    .mb-sm-10 {
        margin-bottom: 10px !important;
    }

    .mb-sm-15 {
        margin-bottom: 15px !important;
    }

    .mb-sm-20 {
        margin-bottom: 20px !important;
    }

    .mb-sm-30 {
        margin-bottom: 30px !important;
    }

    .mb-sm-40 {
        margin-bottom: 40px !important;
    }

    .mb-sm-50 {
        margin-bottom: 50px !important;
    }

    .mb-sm-60 {
        margin-bottom: 60px !important;
    }

    .mb-sm-70 {
        margin-bottom: 70px !important;
    }

    .mb-sm-80 {
        margin-bottom: 80px !important;
    }

    .mb-sm-90 {
        margin-bottom: 90px !important;
    }

    .mb-sm-100 {
        margin-bottom: 100px !important;
    }

    .mb-sm-150 {
        margin-bottom: 150px !important;
    }

    .mb-sm-200 {
        margin-bottom: 200px !important;
    }

    .ms-sm-10 {
        margin-left: 10px !important;
    }

    .ms-sm-15 {
        margin-left: 15px !important;
    }

    .ms-sm-20 {
        margin-left: 20px !important;
    }

    .ms-sm-30 {
        margin-left: 30px !important;
    }

    .ms-sm-40 {
        margin-left: 40px !important;
    }

    .ms-sm-50 {
        margin-left: 50px !important;
    }

    .ms-sm-60 {
        margin-left: 60px !important;
    }

    .ms-sm-70 {
        margin-left: 70px !important;
    }

    .ms-sm-80 {
        margin-left: 80px !important;
    }

    .ms-sm-90 {
        margin-left: 90px !important;
    }

    .ms-sm-100 {
        margin-left: 100px !important;
    }

    .ms-sm-150 {
        margin-left: 150px !important;
    }

    .ms-sm-200 {
        margin-left: 200px !important;
    }

    .me-sm-10 {
        margin-right: 10px !important;
    }

    .me-sm-15 {
        margin-right: 15px !important;
    }

    .me-sm-20 {
        margin-right: 20px !important;
    }

    .me-sm-30 {
        margin-right: 30px !important;
    }

    .me-sm-40 {
        margin-right: 40px !important;
    }

    .me-sm-50 {
        margin-right: 50px !important;
    }

    .me-sm-60 {
        margin-right: 60px !important;
    }

    .me-sm-70 {
        margin-right: 70px !important;
    }

    .me-sm-80 {
        margin-right: 80px !important;
    }

    .me-sm-90 {
        margin-right: 90px !important;
    }

    .me-sm-100 {
        margin-right: 100px !important;
    }

    .me-sm-150 {
        margin-right: 150px !important;
    }

    .me-sm-200 {
        margin-right: 200px !important;
    }
}

@media (min-width:576px) {
    .float-sm-start {
        float: left !important
    }

    .float-sm-end {
        float: right !important
    }

    .float-sm-none {
        float: none !important
    }

    .d-sm-inline {
        display: inline !important
    }

    .d-sm-inline-block {
        display: inline-block !important
    }

    .d-sm-block {
        display: block !important
    }

    .d-sm-grid {
        display: grid !important
    }

    .d-sm-table {
        display: table !important
    }

    .d-sm-table-row {
        display: table-row !important
    }

    .d-sm-table-cell {
        display: table-cell !important
    }

    .d-sm-flex {
        display: flex !important
    }

    .d-sm-inline-flex {
        display: inline-flex !important
    }

    .d-sm-none {
        display: none !important
    }

    .flex-sm-fill {
        flex: 1 1 auto !important
    }

    .flex-sm-row {
        flex-direction: row !important
    }

    .flex-sm-column {
        flex-direction: column !important
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-sm-grow-0 {
        flex-grow: 0 !important
    }

    .flex-sm-grow-1 {
        flex-grow: 1 !important
    }

    .flex-sm-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-sm-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-sm-wrap {
        flex-wrap: wrap !important
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .gap-sm-0 {
        gap: 0 !important
    }

    .gap-sm-1 {
        gap: .25rem !important
    }

    .gap-sm-2 {
        gap: .5rem !important
    }

    .gap-sm-3 {
        gap: 1rem !important
    }

    .gap-sm-4 {
        gap: 1.5rem !important
    }

    .gap-sm-5 {
        gap: 3rem !important
    }

    .justify-content-sm-start {
        justify-content: flex-start !important
    }

    .justify-content-sm-end {
        justify-content: flex-end !important
    }

    .justify-content-sm-center {
        justify-content: center !important
    }

    .justify-content-sm-between {
        justify-content: space-between !important
    }

    .justify-content-sm-around {
        justify-content: space-around !important
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important
    }

    .align-items-sm-start {
        align-items: flex-start !important
    }

    .align-items-sm-end {
        align-items: flex-end !important
    }

    .align-items-sm-center {
        align-items: center !important
    }

    .align-items-sm-baseline {
        align-items: baseline !important
    }

    .align-items-sm-stretch {
        align-items: stretch !important
    }

    .align-content-sm-start {
        align-content: flex-start !important
    }

    .align-content-sm-end {
        align-content: flex-end !important
    }

    .align-content-sm-center {
        align-content: center !important
    }

    .align-content-sm-between {
        align-content: space-between !important
    }

    .align-content-sm-around {
        align-content: space-around !important
    }

    .align-content-sm-stretch {
        align-content: stretch !important
    }

    .align-self-sm-auto {
        align-self: auto !important
    }

    .align-self-sm-start {
        align-self: flex-start !important
    }

    .align-self-sm-end {
        align-self: flex-end !important
    }

    .align-self-sm-center {
        align-self: center !important
    }

    .align-self-sm-baseline {
        align-self: baseline !important
    }

    .align-self-sm-stretch {
        align-self: stretch !important
    }

    .order-sm-first {
        order: -1 !important
    }

    .order-sm-0 {
        order: 0 !important
    }

    .order-sm-1 {
        order: 1 !important
    }

    .order-sm-2 {
        order: 2 !important
    }

    .order-sm-3 {
        order: 3 !important
    }

    .order-sm-4 {
        order: 4 !important
    }

    .order-sm-5 {
        order: 5 !important
    }

    .order-sm-last {
        order: 6 !important
    }

    .m-sm-0 {
        margin: 0 !important
    }

    .m-sm-1 {
        margin: .25rem !important
    }

    .m-sm-2 {
        margin: .5rem !important
    }

    .m-sm-3 {
        margin: 1rem !important
    }

    .m-sm-4 {
        margin: 1.5rem !important
    }

    .m-sm-5 {
        margin: 3rem !important
    }

    .m-sm-auto {
        margin: auto !important
    }

    .mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-sm-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-sm-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-sm-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-sm-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-sm-0 {
        margin-top: 0 !important
    }

    .mt-sm-1 {
        margin-top: .25rem !important
    }

    .mt-sm-2 {
        margin-top: .5rem !important
    }

    .mt-sm-3 {
        margin-top: 1rem !important
    }

    .mt-sm-4 {
        margin-top: 1.5rem !important
    }

    .mt-sm-5 {
        margin-top: 3rem !important
    }

    .mt-sm-auto {
        margin-top: auto !important
    }

    .me-sm-0 {
        margin-right: 0 !important
    }

    .me-sm-1 {
        margin-right: .25rem !important
    }

    .me-sm-2 {
        margin-right: .5rem !important
    }

    .me-sm-3 {
        margin-right: 1rem !important
    }

    .me-sm-4 {
        margin-right: 1.5rem !important
    }

    .me-sm-5 {
        margin-right: 3rem !important
    }

    .me-sm-auto {
        margin-right: auto !important
    }

    .mb-sm-0 {
        margin-bottom: 0 !important
    }

    .mb-sm-1 {
        margin-bottom: .25rem !important
    }

    .mb-sm-2 {
        margin-bottom: .5rem !important
    }

    .mb-sm-3 {
        margin-bottom: 1rem !important
    }

    .mb-sm-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-sm-5 {
        margin-bottom: 3rem !important
    }

    .mb-sm-auto {
        margin-bottom: auto !important
    }

    .ms-sm-0 {
        margin-left: 0 !important
    }

    .ms-sm-1 {
        margin-left: .25rem !important
    }

    .ms-sm-2 {
        margin-left: .5rem !important
    }

    .ms-sm-3 {
        margin-left: 1rem !important
    }

    .ms-sm-4 {
        margin-left: 1.5rem !important
    }

    .ms-sm-5 {
        margin-left: 3rem !important
    }

    .ms-sm-auto {
        margin-left: auto !important
    }

    .p-sm-0 {
        padding: 0 !important
    }

    .p-sm-1 {
        padding: .25rem !important
    }

    .p-sm-2 {
        padding: .5rem !important
    }

    .p-sm-3 {
        padding: 1rem !important
    }

    .p-sm-4 {
        padding: 1.5rem !important
    }

    .p-sm-5 {
        padding: 3rem !important
    }

    .px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .px-sm-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-sm-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-sm-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-sm-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-sm-0 {
        padding-top: 0 !important
    }

    .pt-sm-1 {
        padding-top: .25rem !important
    }

    .pt-sm-2 {
        padding-top: .5rem !important
    }

    .pt-sm-3 {
        padding-top: 1rem !important
    }

    .pt-sm-4 {
        padding-top: 1.5rem !important
    }

    .pt-sm-5 {
        padding-top: 3rem !important
    }

    .pe-sm-0 {
        padding-right: 0 !important
    }

    .pe-sm-1 {
        padding-right: .25rem !important
    }

    .pe-sm-2 {
        padding-right: .5rem !important
    }

    .pe-sm-3 {
        padding-right: 1rem !important
    }

    .pe-sm-4 {
        padding-right: 1.5rem !important
    }

    .pe-sm-5 {
        padding-right: 3rem !important
    }

    .pb-sm-0 {
        padding-bottom: 0 !important
    }

    .pb-sm-1 {
        padding-bottom: .25rem !important
    }

    .pb-sm-2 {
        padding-bottom: .5rem !important
    }

    .pb-sm-3 {
        padding-bottom: 1rem !important
    }

    .pb-sm-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-sm-5 {
        padding-bottom: 3rem !important
    }

    .ps-sm-0 {
        padding-left: 0 !important
    }

    .ps-sm-1 {
        padding-left: .25rem !important
    }

    .ps-sm-2 {
        padding-left: .5rem !important
    }

    .ps-sm-3 {
        padding-left: 1rem !important
    }

    .ps-sm-4 {
        padding-left: 1.5rem !important
    }

    .ps-sm-5 {
        padding-left: 3rem !important
    }

    .text-sm-start {
        text-align: left !important
    }

    .text-sm-end {
        text-align: right !important
    }

    .text-sm-center {
        text-align: center !important
    }
}

@media (min-width: 767.98px) {
    .h-md-80 {
        height: 512px !important;
    }

    .ps-md-10 {
        padding-left: 10px !important;
    }

    .ps-md-15 {
        padding-left: 15px !important;
    }

    .ps-md-20 {
        padding-left: 20px !important;
    }

    .ps-md-30 {
        padding-left: 30px !important;
    }

    .ps-md-40 {
        padding-left: 40px !important;
    }

    .ps-md-50 {
        padding-left: 50px !important;
    }

    .ps-md-60 {
        padding-left: 60px !important;
    }

    .ps-md-70 {
        padding-left: 70px !important;
    }

    .ps-md-80 {
        padding-left: 80px !important;
    }

    .ps-md-90 {
        padding-left: 90px !important;
    }

    .ps-md-100 {
        padding-left: 100px !important;
    }

    .ps-md-150 {
        padding-left: 150px !important;
    }

    .ps-md-200 {
        padding-left: 200px !important;
    }

    .pe-md-10 {
        padding-right: 10px !important;
    }

    .pe-md-15 {
        padding-right: 15px !important;
    }

    .pe-md-20 {
        padding-right: 20px !important;
    }

    .pe-md-30 {
        padding-right: 30px !important;
    }

    .pe-md-40 {
        padding-right: 40px !important;
    }

    .pe-md-50 {
        padding-right: 50px !important;
    }

    .pe-md-60 {
        padding-right: 60px !important;
    }

    .pe-md-70 {
        padding-right: 70px !important;
    }

    .pe-md-80 {
        padding-right: 80px !important;
    }

    .pe-md-90 {
        padding-right: 90px !important;
    }

    .pe-md-100 {
        padding-right: 100px !important;
    }

    .pe-md-150 {
        padding-right: 150px !important;
    }

    .pe-md-200 {
        padding-right: 200px !important;
    }

    .pt-md-10 {
        padding-top: 10px !important;
    }

    .pt-md-15 {
        padding-top: 15px !important;
    }

    .pt-md-20 {
        padding-top: 20px !important;
    }

    .pt-md-30 {
        padding-top: 30px !important;
    }

    .pt-md-40 {
        padding-top: 40px !important;
    }

    .pt-md-50 {
        padding-top: 50px !important;
    }

    .pt-md-60 {
        padding-top: 60px !important;
    }

    .pt-md-70 {
        padding-top: 70px !important;
    }

    .pt-md-80 {
        padding-top: 80px !important;
    }

    .pt-md-90 {
        padding-top: 90px !important;
    }

    .pt-md-100 {
        padding-top: 100px !important;
    }

    .pt-md-150 {
        padding-top: 150px !important;
    }

    .pt-md-200 {
        padding-top: 200px !important;
    }

    .pb-md-10 {
        padding-bottom: 10px !important;
    }

    .pb-md-15 {
        padding-bottom: 15px !important;
    }

    .pb-md-25 {
        padding-bottom: 25px !important;
    }

    .pb-md-20 {
        padding-bottom: 20px !important;
    }

    .pb-md-30 {
        padding-bottom: 30px !important;
    }

    .pb-md-40 {
        padding-bottom: 40px !important;
    }

    .pb-md-50 {
        padding-bottom: 50px !important;
    }

    .pb-md-60 {
        padding-bottom: 60px !important;
    }

    .pb-md-70 {
        padding-bottom: 70px !important;
    }

    .pb-md-80 {
        padding-bottom: 80px !important;
    }

    .pb-md-90 {
        padding-bottom: 90px !important;
    }

    .pb-md-100 {
        padding-bottom: 100px !important;
    }

    .pb-md-150 {
        padding-bottom: 150px !important;
    }

    .pb-md-200 {
        padding-bottom: 200px !important;
    }

    .mt-md-5px {
        margin-top: 5px !important;
    }

    .mt-md-10 {
        margin-top: 10px !important;
    }

    .mt-md-15 {
        margin-top: 15px !important;
    }

    .mt-md-20 {
        margin-top: 20px !important;
    }

    .mt-md-25 {
        margin-top: 25px !important;
    }

    .mt-md-30 {
        margin-top: 30px !important;
    }

    .mt-md-40 {
        margin-top: 40px !important;
    }

    .mt-md-50 {
        margin-top: 50px !important;
    }

    .mt-md-60 {
        margin-top: 60px !important;
    }

    .mt-md-70 {
        margin-top: 70px !important;
    }

    .mt-md-80 {
        margin-top: 80px !important;
    }

    .mt-md-90 {
        margin-top: 90px !important;
    }

    .mt-md-100 {
        margin-top: 100px !important;
    }

    .mt-md-150 {
        margin-top: 150px !important;
    }

    .mt-md-200 {
        margin-top: 200px !important;
    }

    .mb-md-5px {
        margin-bottom: 5px !important;
    }

    .mb-md-10 {
        margin-bottom: 10px !important;
    }

    .mb-md-15 {
        margin-bottom: 15px !important;
    }

    .mb-md-20 {
        margin-bottom: 20px !important;
    }

    .mb-md-25 {
        margin-bottom: 25px !important;
    }

    .mb-md-30 {
        margin-bottom: 30px !important;
    }

    .mb-md-40 {
        margin-bottom: 40px !important;
    }

    .mb-md-50 {
        margin-bottom: 50px !important;
    }

    .mb-md-60 {
        margin-bottom: 60px !important;
    }

    .mb-md-70 {
        margin-bottom: 70px !important;
    }

    .mb-md-80 {
        margin-bottom: 80px !important;
    }

    .mb-md-90 {
        margin-bottom: 90px !important;
    }

    .mb-md-100 {
        margin-bottom: 100px !important;
    }

    .mb-md-150 {
        margin-bottom: 150px !important;
    }

    .mb-md-200 {
        margin-bottom: 200px !important;
    }

    .ms-md-10 {
        margin-left: 10px !important;
    }

    .ms-md-15 {
        margin-left: 15px !important;
    }

    .ms-md-20 {
        margin-left: 20px !important;
    }

    .ms-md-30 {
        margin-left: 30px !important;
    }

    .ms-md-40 {
        margin-left: 40px !important;
    }

    .ms-md-50 {
        margin-left: 50px !important;
    }

    .ms-md-60 {
        margin-left: 60px !important;
    }

    .ms-md-70 {
        margin-left: 70px !important;
    }

    .ms-md-80 {
        margin-left: 80px !important;
    }

    .ms-md-90 {
        margin-left: 90px !important;
    }

    .ms-md-100 {
        margin-left: 100px !important;
    }

    .ms-md-150 {
        margin-left: 150px !important;
    }

    .ms-md-200 {
        margin-left: 200px !important;
    }

    .me-md-10 {
        margin-right: 10px !important;
    }

    .me-md-15 {
        margin-right: 15px !important;
    }

    .me-md-20 {
        margin-right: 20px !important;
    }

    .me-md-30 {
        margin-right: 30px !important;
    }

    .me-md-40 {
        margin-right: 40px !important;
    }

    .me-md-50 {
        margin-right: 50px !important;
    }

    .me-md-60 {
        margin-right: 60px !important;
    }

    .me-md-70 {
        margin-right: 70px !important;
    }

    .me-md-80 {
        margin-right: 80px !important;
    }

    .me-md-90 {
        margin-right: 90px !important;
    }

    .me-md-100 {
        margin-right: 100px !important;
    }

    .me-md-150 {
        margin-right: 150px !important;
    }

    .me-md-200 {
        margin-right: 200px !important;
    }
}

@media (min-width:767.98px) {
    .float-md-start {
        float: left !important
    }

    .float-md-end {
        float: right !important
    }

    .float-md-none {
        float: none !important
    }

    .d-md-inline {
        display: inline !important
    }

    .d-md-inline-block {
        display: inline-block !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-grid {
        display: grid !important
    }

    .d-md-table {
        display: table !important
    }

    .d-md-table-row {
        display: table-row !important
    }

    .d-md-table-cell {
        display: table-cell !important
    }

    .d-md-flex {
        display: flex !important
    }

    .d-md-inline-flex {
        display: inline-flex !important
    }

    .d-md-none {
        display: none !important
    }

    .flex-md-fill {
        flex: 1 1 auto !important
    }

    .flex-md-row {
        flex-direction: row !important
    }

    .flex-md-column {
        flex-direction: column !important
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-md-grow-0 {
        flex-grow: 0 !important
    }

    .flex-md-grow-1 {
        flex-grow: 1 !important
    }

    .flex-md-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-md-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-md-wrap {
        flex-wrap: wrap !important
    }

    .flex-md-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .gap-md-0 {
        gap: 0 !important
    }

    .gap-md-1 {
        gap: .25rem !important
    }

    .gap-md-2 {
        gap: .5rem !important
    }

    .gap-md-3 {
        gap: 1rem !important
    }

    .gap-md-4 {
        gap: 1.5rem !important
    }

    .gap-md-5 {
        gap: 3rem !important
    }

    .justify-content-md-start {
        justify-content: flex-start !important
    }

    .justify-content-md-end {
        justify-content: flex-end !important
    }

    .justify-content-md-center {
        justify-content: center !important
    }

    .justify-content-md-between {
        justify-content: space-between !important
    }

    .justify-content-md-around {
        justify-content: space-around !important
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important
    }

    .align-items-md-start {
        align-items: flex-start !important
    }

    .align-items-md-end {
        align-items: flex-end !important
    }

    .align-items-md-center {
        align-items: center !important
    }

    .align-items-md-baseline {
        align-items: baseline !important
    }

    .align-items-md-stretch {
        align-items: stretch !important
    }

    .align-content-md-start {
        align-content: flex-start !important
    }

    .align-content-md-end {
        align-content: flex-end !important
    }

    .align-content-md-center {
        align-content: center !important
    }

    .align-content-md-between {
        align-content: space-between !important
    }

    .align-content-md-around {
        align-content: space-around !important
    }

    .align-content-md-stretch {
        align-content: stretch !important
    }

    .align-self-md-auto {
        align-self: auto !important
    }

    .align-self-md-start {
        align-self: flex-start !important
    }

    .align-self-md-end {
        align-self: flex-end !important
    }

    .align-self-md-center {
        align-self: center !important
    }

    .align-self-md-baseline {
        align-self: baseline !important
    }

    .align-self-md-stretch {
        align-self: stretch !important
    }

    .order-md-first {
        order: -1 !important
    }

    .order-md-0 {
        order: 0 !important
    }

    .order-md-1 {
        order: 1 !important
    }

    .order-md-2 {
        order: 2 !important
    }

    .order-md-3 {
        order: 3 !important
    }

    .order-md-4 {
        order: 4 !important
    }

    .order-md-5 {
        order: 5 !important
    }

    .order-md-last {
        order: 6 !important
    }

    .m-md-0 {
        margin: 0 !important
    }

    .m-md-1 {
        margin: .25rem !important
    }

    .m-md-2 {
        margin: .5rem !important
    }

    .m-md-3 {
        margin: 1rem !important
    }

    .m-md-4 {
        margin: 1.5rem !important
    }

    .m-md-5 {
        margin: 3rem !important
    }

    .m-md-auto {
        margin: auto !important
    }

    .mx-md-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-md-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-md-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-md-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-md-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-md-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-md-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-md-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-md-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-md-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-md-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-md-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-md-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-md-0 {
        margin-top: 0 !important
    }

    .mt-md-1 {
        margin-top: .25rem !important
    }

    .mt-md-2 {
        margin-top: .5rem !important
    }

    .mt-md-3 {
        margin-top: 1rem !important
    }

    .mt-md-4 {
        margin-top: 1.5rem !important
    }

    .mt-md-5 {
        margin-top: 3rem !important
    }

    .mt-md-auto {
        margin-top: auto !important
    }

    .me-md-0 {
        margin-right: 0 !important
    }

    .me-md-1 {
        margin-right: .25rem !important
    }

    .me-md-2 {
        margin-right: .5rem !important
    }

    .me-md-3 {
        margin-right: 1rem !important
    }

    .me-md-4 {
        margin-right: 1.5rem !important
    }

    .me-md-5 {
        margin-right: 3rem !important
    }

    .me-md-auto {
        margin-right: auto !important
    }

    .mb-md-0 {
        margin-bottom: 0 !important
    }

    .mb-md-1 {
        margin-bottom: .25rem !important
    }

    .mb-md-2 {
        margin-bottom: .5rem !important
    }

    .mb-md-3 {
        margin-bottom: 1rem !important
    }

    .mb-md-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-md-5 {
        margin-bottom: 3rem !important
    }

    .mb-md-auto {
        margin-bottom: auto !important
    }

    .ms-md-0 {
        margin-left: 0 !important
    }

    .ms-md-1 {
        margin-left: .25rem !important
    }

    .ms-md-2 {
        margin-left: .5rem !important
    }

    .ms-md-3 {
        margin-left: 1rem !important
    }

    .ms-md-4 {
        margin-left: 1.5rem !important
    }

    .ms-md-5 {
        margin-left: 3rem !important
    }

    .ms-md-auto {
        margin-left: auto !important
    }

    .p-md-0 {
        padding: 0 !important
    }

    .p-md-1 {
        padding: .25rem !important
    }

    .p-md-2 {
        padding: .5rem !important
    }

    .p-md-3 {
        padding: 1rem !important
    }

    .p-md-4 {
        padding: 1.5rem !important
    }

    .p-md-5 {
        padding: 3rem !important
    }

    .px-md-0 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .px-md-12 {
        padding-right: 12px !important;
        padding-left: 12px !important
    }

    .px-md-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-md-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-md-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-md-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-md-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-md-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-md-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-md-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-md-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-md-0 {
        padding-top: 0 !important
    }

    .pt-md-1 {
        padding-top: .25rem !important
    }

    .pt-md-2 {
        padding-top: .5rem !important
    }

    .pt-md-3 {
        padding-top: 1rem !important
    }

    .pt-md-4 {
        padding-top: 1.5rem !important
    }

    .pt-md-5 {
        padding-top: 3rem !important
    }

    .pe-md-0 {
        padding-right: 0 !important
    }

    .pe-md-1 {
        padding-right: .25rem !important
    }

    .pe-md-2 {
        padding-right: .5rem !important
    }

    .pe-md-3 {
        padding-right: 1rem !important
    }

    .pe-md-4 {
        padding-right: 1.5rem !important
    }

    .pe-md-5 {
        padding-right: 3rem !important
    }

    .pb-md-0 {
        padding-bottom: 0 !important
    }

    .pb-md-1 {
        padding-bottom: .25rem !important
    }

    .pb-md-2 {
        padding-bottom: .5rem !important
    }

    .pb-md-3 {
        padding-bottom: 1rem !important
    }

    .pb-md-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-md-5 {
        padding-bottom: 3rem !important
    }

    .ps-md-0 {
        padding-left: 0 !important
    }

    .ps-md-1 {
        padding-left: .25rem !important
    }

    .ps-md-2 {
        padding-left: .5rem !important
    }

    .ps-md-3 {
        padding-left: 1rem !important
    }

    .ps-md-4 {
        padding-left: 1.5rem !important
    }

    .ps-md-5 {
        padding-left: 3rem !important
    }

    .text-md-start {
        text-align: left !important
    }

    .text-md-end {
        text-align: right !important
    }

    .text-md-center {
        text-align: center !important
    }
}

@media (min-width: 992px) {
    .h-lg-100 {
        height: 100% !important;
    }

    .fw-lg-normal {
        font-weight: 400 !important;
    }

    .h-lg-70 {
        height: 70% !important;
    }

    .h-lg-80 {
        height: 71% !important;
    }

    .h-lg-90 {
        height: 75% !important;
    }

    .ps-lg-10 {
        -webkit-padding-left: 10px !important;
        padding-left: 10px !important;
    }

    .ps-lg-15 {
        -webkit-padding-left: 15px !important;
        padding-left: 15px !important;
    }

    .ps-lg-20 {
        -webkit-padding-left: 20px !important;
        padding-left: 20px !important;
    }

    .ps-lg-30 {
        -webkit-padding-left: 30px !important;
        padding-left: 30px !important;
    }

    .ps-lg-40 {
        -webkit-padding-left: 40px !important;
        padding-left: 40px !important;
    }

    .ps-lg-50 {
        -webkit-padding-left: 50px !important;
        padding-left: 50px !important;
    }

    .ps-lg-60 {
        -webkit-padding-left: 60px !important;
        padding-left: 60px !important;
    }

    .ps-lg-70 {
        -webkit-padding-left: 70px !important;
        padding-left: 70px !important;
    }

    .ps-lg-80 {
        -webkit-padding-left: 80px !important;
        padding-left: 80px !important;
    }

    .ps-lg-90 {
        -webkit-padding-left: 90px !important;
        padding-left: 90px !important;
    }

    .ps-lg-100 {
        -webkit-padding-left: 100px !important;
        padding-left: 100px !important;
    }

    .ps-lg-150 {
        -webkit-padding-left: 150px !important;
        padding-left: 150px !important;
    }

    .ps-lg-200 {
        -webkit-padding-left: 200px !important;
        padding-left: 200px !important;
    }

    .pe-lg-10 {
        -webkit-padding-right: 10px !important;
        padding-right: 10px !important;
    }

    .pe-lg-15 {
        -webkit-padding-right: 15px !important;
        padding-right: 15px !important;
    }

    .pe-lg-20 {
        -webkit-padding-right: 20px !important;
        padding-right: 20px !important;
    }

    .pe-lg-30 {
        -webkit-padding-right: 30px !important;
        padding-right: 30px !important;
    }

    .pe-lg-40 {
        -webkit-padding-right: 40px !important;
        padding-right: 40px !important;
    }

    .pe-lg-50 {
        -webkit-padding-right: 50px !important;
        padding-right: 50px !important;
    }

    .pe-lg-60 {
        -webkit-padding-right: 60px !important;
        padding-right: 60px !important;
    }

    .pe-lg-70 {
        -webkit-padding-right: 70px !important;
        padding-right: 70px !important;
    }

    .pe-lg-80 {
        -webkit-padding-right: 80px !important;
        padding-right: 80px !important;
    }

    .pe-lg-90 {
        -webkit-padding-right: 90px !important;
        padding-right: 90px !important;
    }

    .pe-lg-100 {
        -webkit-padding-right: 100px !important;
        padding-right: 100px !important;
    }

    .pe-lg-150 {
        -webkit-padding-right: 150px !important;
        padding-right: 150px !important;
    }

    .pe-lg-200 {
        -webkit-padding-right: 200px !important;
        padding-right: 200px !important;
    }

    .pt-lg-10 {
        padding-top: 10px !important;
    }

    .pt-lg-15 {
        padding-top: 15px !important;
    }

    .pt-lg-20 {
        padding-top: 20px !important;
    }

    .pt-lg-30 {
        padding-top: 30px !important;
    }

    .pt-lg-40 {
        padding-top: 40px !important;
    }

    .pt-lg-50 {
        padding-top: 50px !important;
    }

    .pt-lg-60 {
        padding-top: 60px !important;
    }

    .pt-lg-70 {
        padding-top: 70px !important;
    }

    .pt-lg-80 {
        padding-top: 80px !important;
    }

    .pt-lg-90 {
        padding-top: 90px !important;
    }

    .pt-lg-100 {
        padding-top: 100px !important;
    }

    .pt-lg-150 {
        padding-top: 150px !important;
    }

    .pt-lg-200 {
        padding-top: 200px !important;
    }

    .pb-lg-10 {
        padding-bottom: 10px !important;
    }

    .pb-lg-15 {
        padding-bottom: 15px !important;
    }

    .pb-lg-20 {
        padding-bottom: 20px !important;
    }

    .pb-lg-25 {
        padding-bottom: 25px !important;
    }

    .pb-lg-30 {
        padding-bottom: 30px !important;
    }

    .pb-lg-40 {
        padding-bottom: 40px !important;
    }

    .pb-lg-50 {
        padding-bottom: 50px !important;
    }

    .pb-lg-60 {
        padding-bottom: 60px !important;
    }

    .pb-lg-70 {
        padding-bottom: 70px !important;
    }

    .pb-lg-80 {
        padding-bottom: 80px !important;
    }

    .pb-lg-90 {
        padding-bottom: 90px !important;
    }

    .pb-lg-100 {
        padding-bottom: 100px !important;
    }

    .pb-lg-150 {
        padding-bottom: 150px !important;
    }

    .pb-lg-200 {
        padding-bottom: 200px !important;
    }

    .mt-lg-5px {
        margin-top: 5px !important;
    }

    .mt-lg-10 {
        margin-top: 10px !important;
    }

    .mt-lg-15 {
        margin-top: 15px !important;
    }

    .mt-lg-20 {
        margin-top: 20px !important;
    }

    .mt-lg-30 {
        margin-top: 30px !important;
    }

    .mt-lg-40 {
        margin-top: 40px !important;
    }

    .mt-lg-50 {
        margin-top: 50px !important;
    }

    .mt-lg-60 {
        margin-top: 60px !important;
    }

    .mt-lg-70 {
        margin-top: 70px !important;
    }

    .mt-lg-80 {
        margin-top: 80px !important;
    }

    .mt-lg-90 {
        margin-top: 90px !important;
    }

    .mt-lg-100 {
        margin-top: 100px !important;
    }

    .mt-lg-150 {
        margin-top: 150px !important;
    }

    .mt-lg-200 {
        margin-top: 200px !important;
    }

    .mb-lg-5px {
        margin-bottom: 5px !important;
    }

    .mb-lg-10 {
        margin-bottom: 10px !important;
    }

    .mb-lg-15 {
        margin-bottom: 15px !important;
    }

    .mb-lg-20 {
        margin-bottom: 20px !important;
    }

    .mb-lg-30 {
        margin-bottom: 30px !important;
    }

    .mb-lg-40 {
        margin-bottom: 40px !important;
    }

    .mb-lg-50 {
        margin-bottom: 50px !important;
    }

    .mb-lg-60 {
        margin-bottom: 60px !important;
    }

    .mb-lg-70 {
        margin-bottom: 70px !important;
    }

    .mb-lg-80 {
        margin-bottom: 80px !important;
    }

    .mb-lg-90 {
        margin-bottom: 90px !important;
    }

    .mb-lg-100 {
        margin-bottom: 100px !important;
    }

    .mb-lg-150 {
        margin-bottom: 150px !important;
    }

    .mb-lg-200 {
        margin-bottom: 200px !important;
    }

    .ms-lg-10 {
        -webkit-margin-start: 10px !important;
        margin-left: 10px !important;
    }

    .ms-lg-15 {
        -webkit-margin-start: 15px !important;
        margin-left: 15px !important;
    }

    .ms-lg-20 {
        -webkit-margin-start: 20px !important;
        margin-left: 20px !important;
    }

    .ms-lg-30 {
        -webkit-margin-start: 30px !important;
        margin-left: 30px !important;
    }

    .ms-lg-40 {
        -webkit-margin-start: 40px !important;
        margin-left: 40px !important;
    }

    .ms-lg-50 {
        -webkit-margin-start: 50px !important;
        margin-left: 50px !important;
    }

    .ms-lg-60 {
        -webkit-margin-start: 60px !important;
        margin-left: 60px !important;
    }

    .ms-lg-70 {
        -webkit-margin-start: 70px !important;
        margin-left: 70px !important;
    }

    .ms-lg-80 {
        -webkit-margin-start: 80px !important;
        margin-left: 80px !important;
    }

    .ms-lg-90 {
        -webkit-margin-start: 90px !important;
        margin-left: 90px !important;
    }

    .ms-lg-100 {
        -webkit-margin-start: 100px !important;
        margin-left: 100px !important;
    }

    .ms-lg-150 {
        -webkit-margin-start: 150px !important;
        margin-left: 150px !important;
    }

    .ms-lg-200 {
        -webkit-margin-start: 200px !important;
        margin-left: 200px !important;
    }

    .me-lg-10 {
        -webkit-margin-end: 10px !important;
        margin-right: 10px !important;
    }

    .me-lg-15 {
        -webkit-margin-end: 15px !important;
        margin-right: 15px !important;
    }

    .me-lg-20 {
        -webkit-margin-end: 20px !important;
        margin-right: 20px !important;
    }

    .me-lg-30 {
        -webkit-margin-end: 30px !important;
        margin-right: 30px !important;
    }

    .me-lg-40 {
        -webkit-margin-end: 40px !important;
        margin-right: 40px !important;
    }

    .me-lg-50 {
        -webkit-margin-end: 50px !important;
        margin-right: 50px !important;
    }

    .me-lg-60 {
        -webkit-margin-end: 60px !important;
        margin-right: 60px !important;
    }

    .me-lg-70 {
        -webkit-margin-end: 70px !important;
        margin-right: 70px !important;
    }

    .me-lg-80 {
        -webkit-margin-end: 80px !important;
        margin-right: 80px !important;
    }

    .me-lg-90 {
        -webkit-margin-end: 90px !important;
        margin-right: 90px !important;
    }

    .me-lg-100 {
        -webkit-margin-end: 100px !important;
        margin-right: 100px !important;
    }

    .me-lg-150 {
        -webkit-margin-end: 150px !important;
        margin-right: 150px !important;
    }

    .me-lg-200 {
        -webkit-margin-end: 200px !important;
        margin-right: 200px !important;
    }
}

@media (min-width:992px) {
    .float-lg-start {
        float: left !important
    }

    .h-lg-100 {
        height: 100% !important;
    }

    .w-lg-100 {
        max-width: 100% !important;
        width: 100% !important;
    }

    .float-lg-end {
        float: right !important
    }

    .float-lg-none {
        float: none !important
    }

    .d-lg-inline {
        display: inline !important
    }

    .d-lg-inline-block {
        display: inline-block !important
    }

    .d-lg-block {
        display: block !important
    }

    .d-lg-grid {
        display: grid !important
    }

    .d-lg-table {
        display: table !important
    }

    .d-lg-table-row {
        display: table-row !important
    }

    .d-lg-table-cell {
        display: table-cell !important
    }

    .d-lg-flex {
        display: flex !important
    }

    .d-lg-inline-flex {
        display: inline-flex !important
    }

    .d-lg-none {
        display: none !important
    }

    .flex-lg-fill {
        flex: 1 1 auto !important
    }

    .flex-lg-row {
        flex-direction: row !important
    }

    .flex-lg-column {
        flex-direction: column !important
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-lg-grow-0 {
        flex-grow: 0 !important
    }

    .flex-lg-grow-1 {
        flex-grow: 1 !important
    }

    .flex-lg-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-lg-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-lg-wrap {
        flex-wrap: wrap !important
    }

    .flex-lg-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .gap-lg-0 {
        gap: 0 !important
    }

    .gap-lg-1 {
        gap: .25rem !important
    }

    .gap-lg-2 {
        gap: .5rem !important
    }

    .gap-lg-3 {
        gap: 1rem !important
    }

    .gap-lg-4 {
        gap: 1.5rem !important
    }

    .gap-lg-5 {
        gap: 3rem !important
    }

    .justify-content-lg-start {
        justify-content: flex-start !important
    }

    .justify-content-lg-end {
        justify-content: flex-end !important
    }

    .justify-content-lg-center {
        justify-content: center !important
    }

    .justify-content-lg-between {
        justify-content: space-between !important
    }

    .justify-content-lg-around {
        justify-content: space-around !important
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important
    }

    .align-items-lg-start {
        align-items: flex-start !important
    }

    .align-items-lg-end {
        align-items: flex-end !important
    }

    .align-items-lg-center {
        align-items: center !important
    }

    .align-items-lg-baseline {
        align-items: baseline !important
    }

    .align-items-lg-stretch {
        align-items: stretch !important
    }

    .align-content-lg-start {
        align-content: flex-start !important
    }

    .align-content-lg-end {
        align-content: flex-end !important
    }

    .align-content-lg-center {
        align-content: center !important
    }

    .align-content-lg-between {
        align-content: space-between !important
    }

    .align-content-lg-around {
        align-content: space-around !important
    }

    .align-content-lg-stretch {
        align-content: stretch !important
    }

    .align-self-lg-auto {
        align-self: auto !important
    }

    .align-self-lg-start {
        align-self: flex-start !important
    }

    .align-self-lg-end {
        align-self: flex-end !important
    }

    .align-self-lg-center {
        align-self: center !important
    }

    .align-self-lg-baseline {
        align-self: baseline !important
    }

    .align-self-lg-stretch {
        align-self: stretch !important
    }

    .order-lg-first {
        order: -1 !important
    }

    .order-lg-0 {
        order: 0 !important
    }

    .order-lg-1 {
        order: 1 !important
    }

    .order-lg-2 {
        order: 2 !important
    }

    .order-lg-3 {
        order: 3 !important
    }

    .order-lg-4 {
        order: 4 !important
    }

    .order-lg-5 {
        order: 5 !important
    }

    .order-lg-last {
        order: 6 !important
    }

    .m-lg-0 {
        margin: 0 !important
    }

    .m-lg-1 {
        margin: .25rem !important
    }

    .m-lg-2 {
        margin: .5rem !important
    }

    .m-lg-3 {
        margin: 1rem !important
    }

    .m-lg-4 {
        margin: 1.5rem !important
    }

    .m-lg-5 {
        margin: 3rem !important
    }

    .m-lg-auto {
        margin: auto !important
    }

    .mx-lg-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-lg-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-lg-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-lg-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-lg-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-lg-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-lg-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-lg-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-lg-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-lg-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-lg-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-lg-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-lg-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-lg-0 {
        margin-top: 0 !important
    }

    .mt-lg-1 {
        margin-top: .25rem !important
    }

    .mt-lg-2 {
        margin-top: .5rem !important
    }

    .mt-lg-3 {
        margin-top: 1rem !important
    }

    .mt-lg-4 {
        margin-top: 1.5rem !important
    }

    .mt-lg-5 {
        margin-top: 3rem !important
    }

    .mt-lg-auto {
        margin-top: auto !important
    }

    .me-lg-0 {
        margin-right: 0 !important
    }

    .me-lg-1 {
        margin-right: .25rem !important
    }

    .me-lg-2 {
        margin-right: .5rem !important
    }

    .me-lg-3 {
        margin-right: 1rem !important
    }

    .me-lg-4 {
        margin-right: 1.5rem !important
    }

    .me-lg-5 {
        margin-right: 3rem !important
    }

    .me-lg-auto {
        margin-right: auto !important
    }

    .mb-lg-0 {
        margin-bottom: 0 !important
    }

    .mb-lg-1 {
        margin-bottom: .25rem !important
    }

    .mb-lg-2 {
        margin-bottom: .5rem !important
    }

    .mb-lg-3 {
        margin-bottom: 1rem !important
    }

    .mb-lg-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-lg-5 {
        margin-bottom: 3rem !important
    }

    .mb-lg-auto {
        margin-bottom: auto !important
    }

    .ms-lg-0 {
        margin-left: 0 !important
    }

    .ms-lg-1 {
        margin-left: .25rem !important
    }

    .ms-lg-2 {
        margin-left: .5rem !important
    }

    .ms-lg-3 {
        margin-left: 1rem !important
    }

    .ms-lg-4 {
        margin-left: 1.5rem !important
    }

    .ms-lg-5 {
        margin-left: 3rem !important
    }

    .ms-lg-auto {
        margin-left: auto !important
    }

    .p-lg-0 {
        padding: 0 !important
    }

    .p-lg-1 {
        padding: .25rem !important
    }

    .p-lg-2 {
        padding: .5rem !important
    }

    .p-lg-3 {
        padding: 1rem !important
    }

    .p-lg-4 {
        padding: 1.5rem !important
    }

    .p-lg-5 {
        padding: 3rem !important
    }

    .px-lg-0 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .px-lg-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-lg-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-lg-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-lg-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-lg-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-lg-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-lg-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-lg-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-lg-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-lg-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-lg-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-lg-0 {
        padding-top: 0 !important
    }

    .pt-lg-1 {
        padding-top: .25rem !important
    }

    .pt-lg-2 {
        padding-top: .5rem !important
    }

    .pt-lg-3 {
        padding-top: 1rem !important
    }

    .pt-lg-4 {
        padding-top: 1.5rem !important
    }

    .pt-lg-5 {
        padding-top: 3rem !important
    }

    .pe-lg-0 {
        padding-right: 0 !important
    }

    .pe-lg-1 {
        padding-right: .25rem !important
    }

    .pe-lg-2 {
        padding-right: .5rem !important
    }

    .pe-lg-3 {
        padding-right: 1rem !important
    }

    .pe-lg-4 {
        padding-right: 1.5rem !important
    }

    .pe-lg-5 {
        padding-right: 3rem !important
    }

    .pb-lg-0 {
        padding-bottom: 0 !important
    }

    .pb-lg-1 {
        padding-bottom: .25rem !important
    }

    .pb-lg-2 {
        padding-bottom: .5rem !important
    }

    .pb-lg-3 {
        padding-bottom: 1rem !important
    }

    .pb-lg-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-lg-5 {
        padding-bottom: 3rem !important
    }

    .ps-lg-0 {
        padding-left: 0 !important
    }

    .ps-lg-1 {
        padding-left: .25rem !important
    }

    .ps-lg-2 {
        padding-left: .5rem !important
    }

    .ps-lg-3 {
        padding-left: 1rem !important
    }

    .ps-lg-4 {
        padding-left: 1.5rem !important
    }

    .ps-lg-5 {
        padding-left: 3rem !important
    }

    .text-lg-start {
        text-align: left !important
    }

    .text-lg-end {
        text-align: right !important
    }

    .text-lg-center {
        text-align: center !important
    }
}

@media (min-width: 1193.98px) {
    .h-lg-80 {
        height: 70.8% !important;
    }

    .h-lg-90 {
        height: 51% !important;
        min-height: 350px !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }
    /* Padding Start */
    .ps-xl-10 {
        -webkit-padding-left: 10px !important;
        padding-left: 10px !important;
    }

    .ps-xl-15 {
        -webkit-padding-left: 15px !important;
        padding-left: 15px !important;
    }

    .ps-xl-20 {
        -webkit-padding-left: 20px !important;
        padding-left: 20px !important;
    }

    .ps-xl-30 {
        -webkit-padding-left: 30px !important;
        padding-left: 30px !important;
    }

    .ps-xl-40 {
        -webkit-padding-left: 40px !important;
        padding-left: 40px !important;
    }

    .ps-xl-50 {
        -webkit-padding-left: 50px !important;
        padding-left: 50px !important;
    }

    .ps-xl-60 {
        -webkit-padding-left: 60px !important;
        padding-left: 60px !important;
    }

    .ps-xl-70 {
        -webkit-padding-left: 70px !important;
        padding-left: 70px !important;
    }

    .ps-xl-80 {
        -webkit-padding-left: 80px !important;
        padding-left: 80px !important;
    }

    .ps-xl-90 {
        -webkit-padding-left: 90px !important;
        padding-left: 90px !important;
    }

    .ps-xl-100 {
        -webkit-padding-left: 100px !important;
        padding-left: 100px !important;
    }

    .ps-xl-150 {
        -webkit-padding-left: 150px !important;
        padding-left: 150px !important;
    }

    .ps-xl-200 {
        -webkit-padding-left: 200px !important;
        padding-left: 200px !important;
    }
    /* Padding End */
    .pe-xl-10 {
        -webkit-padding-right: 10px !important;
        padding-right: 10px !important;
    }

    .pe-xl-15 {
        -webkit-padding-right: 15px !important;
        padding-right: 15px !important;
    }

    .pe-xl-20 {
        -webkit-padding-right: 20px !important;
        padding-right: 20px !important;
    }

    .pe-xl-30 {
        -webkit-padding-right: 30px !important;
        padding-right: 30px !important;
    }

    .pe-xl-40 {
        -webkit-padding-right: 40px !important;
        padding-right: 40px !important;
    }

    .pe-xl-50 {
        -webkit-padding-right: 50px !important;
        padding-right: 50px !important;
    }

    .pe-xl-60 {
        -webkit-padding-right: 60px !important;
        padding-right: 60px !important;
    }

    .pe-xl-70 {
        -webkit-padding-right: 70px !important;
        padding-right: 70px !important;
    }

    .pe-xl-80 {
        -webkit-padding-right: 80px !important;
        padding-right: 80px !important;
    }

    .pe-xl-90 {
        -webkit-padding-right: 90px !important;
        padding-right: 90px !important;
    }

    .pe-xl-100 {
        -webkit-padding-right: 100px !important;
        padding-right: 100px !important;
    }

    .pe-xl-150 {
        -webkit-padding-right: 150px !important;
        padding-right: 150px !important;
    }

    .pe-xl-200 {
        -webkit-padding-right: 200px !important;
        padding-right: 200px !important;
    }
    /* Padding Top */
    .pt-xl-10 {
        padding-top: 10px !important;
    }

    .pt-xl-15 {
        padding-top: 15px !important;
    }

    .pt-xl-20 {
        padding-top: 20px !important;
    }

    .pt-xl-30 {
        padding-top: 30px !important;
    }

    .pt-xl-40 {
        padding-top: 40px !important;
    }

    .pt-xl-50 {
        padding-top: 50px !important;
    }

    .pt-xl-60 {
        padding-top: 60px !important;
    }

    .pt-xl-70 {
        padding-top: 70px !important;
    }

    .pt-xl-80 {
        padding-top: 80px !important;
    }

    .pt-xl-90 {
        padding-top: 90px !important;
    }

    .pt-xl-100 {
        padding-top: 100px !important;
    }

    .pt-xl-150 {
        padding-top: 150px !important;
    }

    .pt-xl-200 {
        padding-top: 200px !important;
    }
    /* Padding Bottom */
    .pb-xl-10 {
        padding-bottom: 10px !important;
    }

    .pb-xl-15 {
        padding-bottom: 15px !important;
    }

    .pb-xl-20 {
        padding-bottom: 20px !important;
    }

    .pb-xl-25 {
        padding-bottom: 25px !important;
    }

    .pb-xl-30 {
        padding-bottom: 30px !important;
    }

    .pb-xl-40 {
        padding-bottom: 40px !important;
    }

    .pb-xl-50 {
        padding-bottom: 50px !important;
    }

    .pb-xl-60 {
        padding-bottom: 60px !important;
    }

    .pb-xl-70 {
        padding-bottom: 70px !important;
    }

    .pb-xl-80 {
        padding-bottom: 80px !important;
    }

    .pb-xl-90 {
        padding-bottom: 90px !important;
    }

    .pb-xl-100 {
        padding-bottom: 100px !important;
    }

    .pb-xl-150 {
        padding-bottom: 150px !important;
    }

    .pb-xl-200 {
        padding-bottom: 200px !important;
    }

    .mt-xl-5px {
        margin-top: 5px !important;
    }

    .mt-xl-10 {
        margin-top: 10px !important;
    }

    .mt-xl-15 {
        margin-top: 15px !important;
    }

    .mt-xl-20 {
        margin-top: 20px !important;
    }

    .mt-xl-30 {
        margin-top: 30px !important;
    }

    .mt-xl-40 {
        margin-top: 40px !important;
    }

    .mt-xl-50 {
        margin-top: 50px !important;
    }

    .mt-xl-60 {
        margin-top: 60px !important;
    }

    .mt-xl-70 {
        margin-top: 70px !important;
    }

    .mt-xl-80 {
        margin-top: 80px !important;
    }

    .mt-xl-90 {
        margin-top: 90px !important;
    }

    .mt-xl-100 {
        margin-top: 100px !important;
    }

    .mt-xl-150 {
        margin-top: 150px !important;
    }

    .mt-xl-200 {
        margin-top: 200px !important;
    }

    .mb-xl-5px {
        margin-bottom: 5px !important;
    }

    .mb-xl-10 {
        margin-bottom: 10px !important;
    }

    .mb-xl-15 {
        margin-bottom: 15px !important;
    }

    .mb-xl-20 {
        margin-bottom: 20px !important;
    }

    .mb-xl-30 {
        margin-bottom: 30px !important;
    }

    .mb-xl-40 {
        margin-bottom: 40px !important;
    }

    .mb-xl-50 {
        margin-bottom: 50px !important;
    }

    .mb-xl-60 {
        margin-bottom: 60px !important;
    }

    .mb-xl-70 {
        margin-bottom: 70px !important;
    }

    .mb-xl-80 {
        margin-bottom: 80px !important;
    }

    .mb-xl-90 {
        margin-bottom: 90px !important;
    }

    .mb-xl-100 {
        margin-bottom: 100px !important;
    }

    .mb-xl-150 {
        margin-bottom: 150px !important;
    }

    .mb-xl-200 {
        margin-bottom: 200px !important;
    }

    .ms-xl-10 {
        -webkit-margin-start: 10px !important;
        margin-left: 10px !important;
    }

    .ms-xl-15 {
        -webkit-margin-start: 15px !important;
        margin-left: 15px !important;
    }

    .ms-xl-20 {
        -webkit-margin-start: 20px !important;
        margin-left: 20px !important;
    }

    .ms-xl-30 {
        -webkit-margin-start: 30px !important;
        margin-left: 30px !important;
    }

    .ms-xl-40 {
        -webkit-margin-start: 40px !important;
        margin-left: 40px !important;
    }

    .ms-xl-50 {
        -webkit-margin-start: 50px !important;
        margin-left: 50px !important;
    }

    .ms-xl-60 {
        -webkit-margin-start: 60px !important;
        margin-left: 60px !important;
    }

    .ms-xl-70 {
        -webkit-margin-start: 70px !important;
        margin-left: 70px !important;
    }

    .ms-xl-80 {
        -webkit-margin-start: 80px !important;
        margin-left: 80px !important;
    }

    .ms-xl-90 {
        -webkit-margin-start: 90px !important;
        margin-left: 90px !important;
    }

    .ms-xl-100 {
        -webkit-margin-start: 100px !important;
        margin-left: 100px !important;
    }

    .ms-xl-150 {
        -webkit-margin-start: 150px !important;
        margin-left: 150px !important;
    }

    .ms-xl-200 {
        -webkit-margin-start: 200px !important;
        margin-left: 200px !important;
    }

    .me-xl-10 {
        -webkit-margin-end: 10px !important;
        margin-right: 10px !important;
    }

    .me-xl-15 {
        -webkit-margin-end: 15px !important;
        margin-right: 15px !important;
    }

    .me-xl-20 {
        -webkit-margin-end: 20px !important;
        margin-right: 20px !important;
    }

    .me-xl-30 {
        -webkit-margin-end: 30px !important;
        margin-right: 30px !important;
    }

    .me-xl-40 {
        -webkit-margin-end: 40px !important;
        margin-right: 40px !important;
    }

    .me-xl-50 {
        -webkit-margin-end: 50px !important;
        margin-right: 50px !important;
    }

    .me-xl-60 {
        -webkit-margin-end: 60px !important;
        margin-right: 60px !important;
    }

    .me-xl-70 {
        -webkit-margin-end: 70px !important;
        margin-right: 70px !important;
    }

    .me-xl-80 {
        -webkit-margin-end: 80px !important;
        margin-right: 80px !important;
    }

    .me-xl-90 {
        -webkit-margin-end: 90px !important;
        margin-right: 90px !important;
    }

    .me-xl-100 {
        -webkit-margin-end: 100px !important;
        margin-right: 100px !important;
    }

    .me-xl-150 {
        -webkit-margin-end: 150px !important;
        margin-right: 150px !important;
    }

    .me-xl-200 {
        -webkit-margin-end: 200px !important;
        margin-right: 200px !important;
    }
}

@media (min-width:1193.98px) {
    .float-xl-start {
        float: left !important
    }

    .float-xl-end {
        float: right !important
    }

    .float-xl-none {
        float: none !important
    }

    .d-xl-inline {
        display: inline !important
    }

    .d-xl-inline-block {
        display: inline-block !important
    }

    .d-xl-block {
        display: block !important
    }

    .d-xl-grid {
        display: grid !important
    }

    .d-xl-table {
        display: table !important
    }

    .d-xl-table-row {
        display: table-row !important
    }

    .d-xl-table-cell {
        display: table-cell !important
    }

    .d-xl-flex {
        display: flex !important
    }

    .d-xl-inline-flex {
        display: inline-flex !important
    }

    .d-xl-none {
        display: none !important
    }

    .flex-xl-fill {
        flex: 1 1 auto !important
    }

    .flex-xl-row {
        flex-direction: row !important
    }

    .flex-xl-column {
        flex-direction: column !important
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-xl-grow-0 {
        flex-grow: 0 !important
    }

    .flex-xl-grow-1 {
        flex-grow: 1 !important
    }

    .flex-xl-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-xl-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-xl-wrap {
        flex-wrap: wrap !important
    }

    .flex-xl-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .gap-xl-0 {
        gap: 0 !important
    }

    .gap-xl-1 {
        gap: .25rem !important
    }

    .gap-xl-2 {
        gap: .5rem !important
    }

    .gap-xl-3 {
        gap: 1rem !important
    }

    .gap-xl-4 {
        gap: 1.5rem !important
    }

    .gap-xl-5 {
        gap: 3rem !important
    }

    .justify-content-xl-start {
        justify-content: flex-start !important
    }

    .justify-content-xl-end {
        justify-content: flex-end !important
    }

    .justify-content-xl-center {
        justify-content: center !important
    }

    .justify-content-xl-between {
        justify-content: space-between !important
    }

    .justify-content-xl-around {
        justify-content: space-around !important
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important
    }

    .align-items-xl-start {
        align-items: flex-start !important
    }

    .align-items-xl-end {
        align-items: flex-end !important
    }

    .align-items-xl-center {
        align-items: center !important
    }

    .align-items-xl-baseline {
        align-items: baseline !important
    }

    .align-items-xl-stretch {
        align-items: stretch !important
    }

    .align-content-xl-start {
        align-content: flex-start !important
    }

    .align-content-xl-end {
        align-content: flex-end !important
    }

    .align-content-xl-center {
        align-content: center !important
    }

    .align-content-xl-between {
        align-content: space-between !important
    }

    .align-content-xl-around {
        align-content: space-around !important
    }

    .align-content-xl-stretch {
        align-content: stretch !important
    }

    .align-self-xl-auto {
        align-self: auto !important
    }

    .align-self-xl-start {
        align-self: flex-start !important
    }

    .align-self-xl-end {
        align-self: flex-end !important
    }

    .align-self-xl-center {
        align-self: center !important
    }

    .align-self-xl-baseline {
        align-self: baseline !important
    }

    .align-self-xl-stretch {
        align-self: stretch !important
    }

    .order-xl-first {
        order: -1 !important
    }

    .order-xl-0 {
        order: 0 !important
    }

    .order-xl-1 {
        order: 1 !important
    }

    .order-xl-2 {
        order: 2 !important
    }

    .order-xl-3 {
        order: 3 !important
    }

    .order-xl-4 {
        order: 4 !important
    }

    .order-xl-5 {
        order: 5 !important
    }

    .order-xl-last {
        order: 6 !important
    }

    .m-xl-0 {
        margin: 0 !important
    }

    .m-xl-1 {
        margin: .25rem !important
    }

    .m-xl-2 {
        margin: .5rem !important
    }

    .m-xl-3 {
        margin: 1rem !important
    }

    .m-xl-4 {
        margin: 1.5rem !important
    }

    .m-xl-5 {
        margin: 3rem !important
    }

    .m-xl-auto {
        margin: auto !important
    }

    .mx-xl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-xl-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-xl-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-xl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-xl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-xl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-xl-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-xl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xl-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-xl-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-xl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-xl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-xl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-xl-0 {
        margin-top: 0 !important
    }

    .mt-xl-1 {
        margin-top: .25rem !important
    }

    .mt-xl-2 {
        margin-top: .5rem !important
    }

    .mt-xl-3 {
        margin-top: 1rem !important
    }

    .mt-xl-4 {
        margin-top: 1.5rem !important
    }

    .mt-xl-5 {
        margin-top: 3rem !important
    }

    .mt-xl-auto {
        margin-top: auto !important
    }

    .me-xl-0 {
        margin-right: 0 !important
    }

    .me-xl-1 {
        margin-right: .25rem !important
    }

    .me-xl-2 {
        margin-right: .5rem !important
    }

    .me-xl-3 {
        margin-right: 1rem !important
    }

    .me-xl-4 {
        margin-right: 1.5rem !important
    }

    .me-xl-5 {
        margin-right: 3rem !important
    }

    .me-xl-auto {
        margin-right: auto !important
    }

    .mb-xl-0 {
        margin-bottom: 0 !important
    }

    .mb-xl-1 {
        margin-bottom: .25rem !important
    }

    .mb-xl-2 {
        margin-bottom: .5rem !important
    }

    .mb-xl-3 {
        margin-bottom: 1rem !important
    }

    .mb-xl-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-xl-5 {
        margin-bottom: 3rem !important
    }

    .mb-xl-auto {
        margin-bottom: auto !important
    }

    .ms-xl-0 {
        margin-left: 0 !important
    }

    .ms-xl-1 {
        margin-left: .25rem !important
    }

    .ms-xl-2 {
        margin-left: .5rem !important
    }

    .ms-xl-3 {
        margin-left: 1rem !important
    }

    .ms-xl-4 {
        margin-left: 1.5rem !important
    }

    .ms-xl-5 {
        margin-left: 3rem !important
    }

    .ms-xl-auto {
        margin-left: auto !important
    }

    .p-xl-0 {
        padding: 0 !important
    }

    .p-xl-1 {
        padding: .25rem !important
    }

    .p-xl-2 {
        padding: .5rem !important
    }

    .p-xl-3 {
        padding: 1rem !important
    }

    .p-xl-4 {
        padding: 1.5rem !important
    }

    .p-xl-5 {
        padding: 3rem !important
    }

    .px-xl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .px-xl-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-xl-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-xl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-xl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-xl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-xl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xl-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-xl-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-xl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-xl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-xl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-xl-0 {
        padding-top: 0 !important
    }

    .pt-xl-1 {
        padding-top: .25rem !important
    }

    .pt-xl-2 {
        padding-top: .5rem !important
    }

    .pt-xl-3 {
        padding-top: 1rem !important
    }

    .pt-xl-4 {
        padding-top: 1.5rem !important
    }

    .pt-xl-5 {
        padding-top: 3rem !important
    }

    .pe-xl-0 {
        padding-right: 0 !important
    }

    .pe-xl-1 {
        padding-right: .25rem !important
    }

    .pe-xl-2 {
        padding-right: .5rem !important
    }

    .pe-xl-3 {
        padding-right: 1rem !important
    }

    .pe-xl-4 {
        padding-right: 1.5rem !important
    }

    .pe-xl-5 {
        padding-right: 3rem !important
    }

    .pb-xl-0 {
        padding-bottom: 0 !important
    }

    .pb-xl-1 {
        padding-bottom: .25rem !important
    }

    .pb-xl-2 {
        padding-bottom: .5rem !important
    }

    .pb-xl-3 {
        padding-bottom: 1rem !important
    }

    .pb-xl-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-xl-5 {
        padding-bottom: 3rem !important
    }

    .ps-xl-0 {
        padding-left: 0 !important
    }

    .ps-xl-1 {
        padding-left: .25rem !important
    }

    .ps-xl-2 {
        padding-left: .5rem !important
    }

    .ps-xl-3 {
        padding-left: 1rem !important
    }

    .ps-xl-4 {
        padding-left: 1.5rem !important
    }

    .ps-xl-5 {
        padding-left: 3rem !important
    }

    .text-xl-start {
        text-align: left !important
    }

    .text-xl-end {
        text-align: right !important
    }

    .text-xl-center {
        text-align: center !important
    }
}

@media (min-width: 1400px) {
    /* Padding Start */
    .ps-xxl-10 {
        -webkit-padding-left: 10px !important;
        padding-left: 10px !important;
    }

    .ps-xxl-15 {
        -webkit-padding-left: 15px !important;
        padding-left: 15px !important;
    }

    .ps-xxl-20 {
        -webkit-padding-left: 20px !important;
        padding-left: 20px !important;
    }

    .ps-xxl-30 {
        -webkit-padding-left: 30px !important;
        padding-left: 30px !important;
    }

    .ps-xxl-40 {
        -webkit-padding-left: 40px !important;
        padding-left: 40px !important;
    }

    .ps-xxl-50 {
        -webkit-padding-left: 50px !important;
        padding-left: 50px !important;
    }

    .ps-xxl-60 {
        -webkit-padding-left: 60px !important;
        padding-left: 60px !important;
    }

    .ps-xxl-70 {
        -webkit-padding-left: 70px !important;
        padding-left: 70px !important;
    }

    .ps-xxl-80 {
        -webkit-padding-left: 80px !important;
        padding-left: 80px !important;
    }

    .ps-xxl-90 {
        -webkit-padding-left: 90px !important;
        padding-left: 90px !important;
    }

    .ps-xxl-100 {
        -webkit-padding-left: 100px !important;
        padding-left: 100px !important;
    }

    .ps-xxl-150 {
        -webkit-padding-left: 150px !important;
        padding-left: 150px !important;
    }

    .ps-xxl-200 {
        -webkit-padding-left: 200px !important;
        padding-left: 200px !important;
    }
    /* Padding End */
    .pe-xxl-10 {
        -webkit-padding-right: 10px !important;
        padding-right: 10px !important;
    }

    .pe-xxl-15 {
        -webkit-padding-right: 15px !important;
        padding-right: 15px !important;
    }

    .pe-xxl-20 {
        -webkit-padding-right: 20px !important;
        padding-right: 20px !important;
    }

    .pe-xxl-30 {
        -webkit-padding-right: 30px !important;
        padding-right: 30px !important;
    }

    .pe-xxl-40 {
        -webkit-padding-right: 40px !important;
        padding-right: 40px !important;
    }

    .pe-xxl-50 {
        -webkit-padding-right: 50px !important;
        padding-right: 50px !important;
    }

    .pe-xxl-60 {
        -webkit-padding-right: 60px !important;
        padding-right: 60px !important;
    }

    .pe-xxl-70 {
        -webkit-padding-right: 70px !important;
        padding-right: 70px !important;
    }

    .pe-xxl-80 {
        -webkit-padding-right: 80px !important;
        padding-right: 80px !important;
    }

    .pe-xxl-90 {
        -webkit-padding-right: 90px !important;
        padding-right: 90px !important;
    }

    .pe-xxl-100 {
        -webkit-padding-right: 100px !important;
        padding-right: 100px !important;
    }

    .pe-xxl-150 {
        -webkit-padding-right: 150px !important;
        padding-right: 150px !important;
    }

    .pe-xxl-200 {
        -webkit-padding-right: 200px !important;
        padding-right: 200px !important;
    }
    /* Padding Top */
    .pt-xxl-10 {
        padding-top: 10px !important;
    }

    .pt-xxl-15 {
        padding-top: 15px !important;
    }

    .pt-xxl-20 {
        padding-top: 20px !important;
    }

    .pt-xxl-30 {
        padding-top: 30px !important;
    }

    .pt-xxl-40 {
        padding-top: 40px !important;
    }

    .pt-xxl-50 {
        padding-top: 50px !important;
    }

    .pt-xxl-60 {
        padding-top: 60px !important;
    }

    .pt-xxl-70 {
        padding-top: 70px !important;
    }

    .pt-xxl-80 {
        padding-top: 80px !important;
    }

    .pt-xxl-90 {
        padding-top: 90px !important;
    }

    .pt-xxl-100 {
        padding-top: 100px !important;
    }

    .pt-xxl-150 {
        padding-top: 150px !important;
    }

    .pt-xxl-200 {
        padding-top: 200px !important;
    }
    /* Padding Bottom */
    .pb-xxl-10 {
        padding-bottom: 10px !important;
    }

    .pb-xxl-15 {
        padding-bottom: 15px !important;
    }

    .pb-xxl-20 {
        padding-bottom: 20px !important;
    }

    .pb-xxl-25 {
        padding-bottom: 25px !important;
    }

    .pb-xxl-30 {
        padding-bottom: 30px !important;
    }

    .pb-xxl-40 {
        padding-bottom: 40px !important;
    }

    .pb-xxl-50 {
        padding-bottom: 50px !important;
    }

    .pb-xxl-60 {
        padding-bottom: 60px !important;
    }

    .pb-xxl-70 {
        padding-bottom: 70px !important;
    }

    .pb-xxl-80 {
        padding-bottom: 80px !important;
    }

    .pb-xxl-90 {
        padding-bottom: 90px !important;
    }

    .pb-xxl-100 {
        padding-bottom: 100px !important;
    }

    .pb-xxl-150 {
        padding-bottom: 150px !important;
    }

    .pb-xxl-200 {
        padding-bottom: 200px !important;
    }

    .mt-xxl-5px {
        margin-top: 5px !important;
    }

    .mt-xxl-10 {
        margin-top: 10px !important;
    }

    .mt-xxl-15 {
        margin-top: 15px !important;
    }

    .mt-xxl-20 {
        margin-top: 20px !important;
    }

    .mt-xxl-30 {
        margin-top: 30px !important;
    }

    .mt-xxl-40 {
        margin-top: 40px !important;
    }

    .mt-xxl-50 {
        margin-top: 50px !important;
    }

    .mt-xxl-60 {
        margin-top: 60px !important;
    }

    .mt-xxl-70 {
        margin-top: 70px !important;
    }

    .mt-xxl-80 {
        margin-top: 80px !important;
    }

    .mt-xxl-90 {
        margin-top: 90px !important;
    }

    .mt-xxl-100 {
        margin-top: 100px !important;
    }

    .mt-xxl-150 {
        margin-top: 150px !important;
    }

    .mt-xxl-200 {
        margin-top: 200px !important;
    }

    .mb-xxl-5px {
        margin-bottom: 5px !important;
    }

    .mb-xxl-10 {
        margin-bottom: 10px !important;
    }

    .mb-xxl-15 {
        margin-bottom: 15px !important;
    }

    .mb-xxl-20 {
        margin-bottom: 20px !important;
    }

    .mb-xxl-30 {
        margin-bottom: 30px !important;
    }

    .mb-xxl-40 {
        margin-bottom: 40px !important;
    }

    .mb-xxl-50 {
        margin-bottom: 50px !important;
    }

    .mb-xxl-60 {
        margin-bottom: 60px !important;
    }

    .mb-xxl-70 {
        margin-bottom: 70px !important;
    }

    .mb-xxl-80 {
        margin-bottom: 80px !important;
    }

    .mb-xxl-90 {
        margin-bottom: 90px !important;
    }

    .mb-xxl-100 {
        margin-bottom: 100px !important;
    }

    .mb-xxl-150 {
        margin-bottom: 150px !important;
    }

    .mb-xxl-200 {
        margin-bottom: 200px !important;
    }

    .ms-xxl-10 {
        -webkit-margin-start: 10px !important;
        margin-left: 10px !important;
    }

    .ms-xxl-15 {
        -webkit-margin-start: 15px !important;
        margin-left: 15px !important;
    }

    .ms-xxl-20 {
        -webkit-margin-start: 20px !important;
        margin-left: 20px !important;
    }

    .ms-xxl-30 {
        -webkit-margin-start: 30px !important;
        margin-left: 30px !important;
    }

    .ms-xxl-40 {
        -webkit-margin-start: 40px !important;
        margin-left: 40px !important;
    }

    .ms-xxl-50 {
        -webkit-margin-start: 50px !important;
        margin-left: 50px !important;
    }

    .ms-xxl-60 {
        -webkit-margin-start: 60px !important;
        margin-left: 60px !important;
    }

    .ms-xxl-70 {
        -webkit-margin-start: 70px !important;
        margin-left: 70px !important;
    }

    .ms-xxl-80 {
        -webkit-margin-start: 80px !important;
        margin-left: 80px !important;
    }

    .ms-xxl-90 {
        -webkit-margin-start: 90px !important;
        margin-left: 90px !important;
    }

    .ms-xxl-100 {
        -webkit-margin-start: 100px !important;
        margin-left: 100px !important;
    }

    .ms-xxl-150 {
        -webkit-margin-start: 150px !important;
        margin-left: 150px !important;
    }

    .ms-xxl-200 {
        -webkit-margin-start: 200px !important;
        margin-left: 200px !important;
    }

    .me-xxl-10 {
        -webkit-margin-end: 10px !important;
        margin-right: 10px !important;
    }

    .me-xxl-15 {
        -webkit-margin-end: 15px !important;
        margin-right: 15px !important;
    }

    .me-xxl-20 {
        -webkit-margin-end: 20px !important;
        margin-right: 20px !important;
    }

    .me-xxl-30 {
        -webkit-margin-end: 30px !important;
        margin-right: 30px !important;
    }

    .me-xxl-40 {
        -webkit-margin-end: 40px !important;
        margin-right: 40px !important;
    }

    .me-xxl-50 {
        -webkit-margin-end: 50px !important;
        margin-right: 50px !important;
    }

    .me-xxl-60 {
        -webkit-margin-end: 60px !important;
        margin-right: 60px !important;
    }

    .me-xxl-70 {
        -webkit-margin-end: 70px !important;
        margin-right: 70px !important;
    }

    .me-xxl-80 {
        -webkit-margin-end: 80px !important;
        margin-right: 80px !important;
    }

    .me-xxl-90 {
        -webkit-margin-end: 90px !important;
        margin-right: 90px !important;
    }

    .me-xxl-100 {
        -webkit-margin-end: 100px !important;
        margin-right: 100px !important;
    }

    .me-xxl-150 {
        -webkit-margin-end: 150px !important;
        margin-right: 150px !important;
    }

    .me-xxl-200 {
        -webkit-margin-end: 200px !important;
        margin-right: 200px !important;
    }
}

@media (min-width:1400px) {
    .float-xxl-start {
        float: left !important
    }

    .float-xxl-end {
        float: right !important
    }

    .float-xxl-none {
        float: none !important
    }

    .d-xxl-inline {
        display: inline !important
    }

    .d-xxl-inline-block {
        display: inline-block !important
    }

    .d-xxl-block {
        display: block !important
    }

    .d-xxl-grid {
        display: grid !important
    }

    .d-xxl-table {
        display: table !important
    }

    .d-xxl-table-row {
        display: table-row !important
    }

    .d-xxl-table-cell {
        display: table-cell !important
    }

    .d-xxl-flex {
        display: flex !important
    }

    .d-xxl-inline-flex {
        display: inline-flex !important
    }

    .d-xxl-none {
        display: none !important
    }

    .flex-xxl-fill {
        flex: 1 1 auto !important
    }

    .flex-xxl-row {
        flex-direction: row !important
    }

    .flex-xxl-column {
        flex-direction: column !important
    }

    .flex-xxl-row-reverse {
        flex-direction: row-reverse !important
    }

    .flex-xxl-column-reverse {
        flex-direction: column-reverse !important
    }

    .flex-xxl-grow-0 {
        flex-grow: 0 !important
    }

    .flex-xxl-grow-1 {
        flex-grow: 1 !important
    }

    .flex-xxl-shrink-0 {
        flex-shrink: 0 !important
    }

    .flex-xxl-shrink-1 {
        flex-shrink: 1 !important
    }

    .flex-xxl-wrap {
        flex-wrap: wrap !important
    }

    .flex-xxl-nowrap {
        flex-wrap: nowrap !important
    }

    .flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }

    .gap-xxl-0 {
        gap: 0 !important
    }

    .gap-xxl-1 {
        gap: .25rem !important
    }

    .gap-xxl-2 {
        gap: .5rem !important
    }

    .gap-xxl-3 {
        gap: 1rem !important
    }

    .gap-xxl-4 {
        gap: 1.5rem !important
    }

    .gap-xxl-5 {
        gap: 3rem !important
    }

    .justify-content-xxl-start {
        justify-content: flex-start !important
    }

    .justify-content-xxl-end {
        justify-content: flex-end !important
    }

    .justify-content-xxl-center {
        justify-content: center !important
    }

    .justify-content-xxl-between {
        justify-content: space-between !important
    }

    .justify-content-xxl-around {
        justify-content: space-around !important
    }

    .justify-content-xxl-evenly {
        justify-content: space-evenly !important
    }

    .align-items-xxl-start {
        align-items: flex-start !important
    }

    .align-items-xxl-end {
        align-items: flex-end !important
    }

    .align-items-xxl-center {
        align-items: center !important
    }

    .align-items-xxl-baseline {
        align-items: baseline !important
    }

    .align-items-xxl-stretch {
        align-items: stretch !important
    }

    .align-content-xxl-start {
        align-content: flex-start !important
    }

    .align-content-xxl-end {
        align-content: flex-end !important
    }

    .align-content-xxl-center {
        align-content: center !important
    }

    .align-content-xxl-between {
        align-content: space-between !important
    }

    .align-content-xxl-around {
        align-content: space-around !important
    }

    .align-content-xxl-stretch {
        align-content: stretch !important
    }

    .align-self-xxl-auto {
        align-self: auto !important
    }

    .align-self-xxl-start {
        align-self: flex-start !important
    }

    .align-self-xxl-end {
        align-self: flex-end !important
    }

    .align-self-xxl-center {
        align-self: center !important
    }

    .align-self-xxl-baseline {
        align-self: baseline !important
    }

    .align-self-xxl-stretch {
        align-self: stretch !important
    }

    .order-xxl-first {
        order: -1 !important
    }

    .order-xxl-0 {
        order: 0 !important
    }

    .order-xxl-1 {
        order: 1 !important
    }

    .order-xxl-2 {
        order: 2 !important
    }

    .order-xxl-3 {
        order: 3 !important
    }

    .order-xxl-4 {
        order: 4 !important
    }

    .order-xxl-5 {
        order: 5 !important
    }

    .order-xxl-last {
        order: 6 !important
    }

    .m-xxl-0 {
        margin: 0 !important
    }

    .m-xxl-1 {
        margin: .25rem !important
    }

    .m-xxl-2 {
        margin: .5rem !important
    }

    .m-xxl-3 {
        margin: 1rem !important
    }

    .m-xxl-4 {
        margin: 1.5rem !important
    }

    .m-xxl-5 {
        margin: 3rem !important
    }

    .m-xxl-auto {
        margin: auto !important
    }

    .mx-xxl-0 {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    .mx-xxl-1 {
        margin-right: .25rem !important;
        margin-left: .25rem !important
    }

    .mx-xxl-2 {
        margin-right: .5rem !important;
        margin-left: .5rem !important
    }

    .mx-xxl-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important
    }

    .mx-xxl-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important
    }

    .mx-xxl-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important
    }

    .mx-xxl-auto {
        margin-right: auto !important;
        margin-left: auto !important
    }

    .my-xxl-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important
    }

    .my-xxl-1 {
        margin-top: .25rem !important;
        margin-bottom: .25rem !important
    }

    .my-xxl-2 {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important
    }

    .my-xxl-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important
    }

    .my-xxl-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important
    }

    .my-xxl-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }

    .my-xxl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important
    }

    .mt-xxl-0 {
        margin-top: 0 !important
    }

    .mt-xxl-1 {
        margin-top: .25rem !important
    }

    .mt-xxl-2 {
        margin-top: .5rem !important
    }

    .mt-xxl-3 {
        margin-top: 1rem !important
    }

    .mt-xxl-4 {
        margin-top: 1.5rem !important
    }

    .mt-xxl-5 {
        margin-top: 3rem !important
    }

    .mt-xxl-auto {
        margin-top: auto !important
    }

    .me-xxl-0 {
        margin-right: 0 !important
    }

    .me-xxl-1 {
        margin-right: .25rem !important
    }

    .me-xxl-2 {
        margin-right: .5rem !important
    }

    .me-xxl-3 {
        margin-right: 1rem !important
    }

    .me-xxl-4 {
        margin-right: 1.5rem !important
    }

    .me-xxl-5 {
        margin-right: 3rem !important
    }

    .me-xxl-auto {
        margin-right: auto !important
    }

    .mb-xxl-0 {
        margin-bottom: 0 !important
    }

    .mb-xxl-1 {
        margin-bottom: .25rem !important
    }

    .mb-xxl-2 {
        margin-bottom: .5rem !important
    }

    .mb-xxl-3 {
        margin-bottom: 1rem !important
    }

    .mb-xxl-4 {
        margin-bottom: 1.5rem !important
    }

    .mb-xxl-5 {
        margin-bottom: 3rem !important
    }

    .mb-xxl-auto {
        margin-bottom: auto !important
    }

    .ms-xxl-0 {
        margin-left: 0 !important
    }

    .ms-xxl-1 {
        margin-left: .25rem !important
    }

    .ms-xxl-2 {
        margin-left: .5rem !important
    }

    .ms-xxl-3 {
        margin-left: 1rem !important
    }

    .ms-xxl-4 {
        margin-left: 1.5rem !important
    }

    .ms-xxl-5 {
        margin-left: 3rem !important
    }

    .ms-xxl-auto {
        margin-left: auto !important
    }

    .p-xxl-0 {
        padding: 0 !important
    }

    .p-xxl-1 {
        padding: .25rem !important
    }

    .p-xxl-2 {
        padding: .5rem !important
    }

    .p-xxl-3 {
        padding: 1rem !important
    }

    .p-xxl-4 {
        padding: 1.5rem !important
    }

    .p-xxl-5 {
        padding: 3rem !important
    }

    .px-xxl-0 {
        padding-right: 0 !important;
        padding-left: 0 !important
    }

    .px-xxl-1 {
        padding-right: .25rem !important;
        padding-left: .25rem !important
    }

    .px-xxl-2 {
        padding-right: .5rem !important;
        padding-left: .5rem !important
    }

    .px-xxl-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important
    }

    .px-xxl-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important
    }

    .px-xxl-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important
    }

    .py-xxl-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important
    }

    .py-xxl-1 {
        padding-top: .25rem !important;
        padding-bottom: .25rem !important
    }

    .py-xxl-2 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important
    }

    .py-xxl-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    .py-xxl-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important
    }

    .py-xxl-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    .pt-xxl-0 {
        padding-top: 0 !important
    }

    .pt-xxl-1 {
        padding-top: .25rem !important
    }

    .pt-xxl-2 {
        padding-top: .5rem !important
    }

    .pt-xxl-3 {
        padding-top: 1rem !important
    }

    .pt-xxl-4 {
        padding-top: 1.5rem !important
    }

    .pt-xxl-5 {
        padding-top: 3rem !important
    }

    .pe-xxl-0 {
        padding-right: 0 !important
    }

    .pe-xxl-1 {
        padding-right: .25rem !important
    }

    .pe-xxl-2 {
        padding-right: .5rem !important
    }

    .pe-xxl-3 {
        padding-right: 1rem !important
    }

    .pe-xxl-4 {
        padding-right: 1.5rem !important
    }

    .pe-xxl-5 {
        padding-right: 3rem !important
    }

    .pb-xxl-0 {
        padding-bottom: 0 !important
    }

    .pb-xxl-1 {
        padding-bottom: .25rem !important
    }

    .pb-xxl-2 {
        padding-bottom: .5rem !important
    }

    .pb-xxl-3 {
        padding-bottom: 1rem !important
    }

    .pb-xxl-4 {
        padding-bottom: 1.5rem !important
    }

    .pb-xxl-5 {
        padding-bottom: 3rem !important
    }

    .ps-xxl-0 {
        padding-left: 0 !important
    }

    .ps-xxl-1 {
        padding-left: .25rem !important
    }

    .ps-xxl-2 {
        padding-left: .5rem !important
    }

    .ps-xxl-3 {
        padding-left: 1rem !important
    }

    .ps-xxl-4 {
        padding-left: 1.5rem !important
    }

    .ps-xxl-5 {
        padding-left: 3rem !important
    }

    .text-xxl-start {
        text-align: left !important
    }

    .text-xxl-end {
        text-align: right !important
    }

    .text-xxl-center {
        text-align: center !important
    }
}

/*=============================================================  Custom Dev ========================================================================*/

/* debug icon iphone se */
@media screen and (max-width: 768px) {
    .nav-search-style3 {
        margin-bottom: 14px !important;
    }

        /*Debug Issue 2025-04-01*/
        /*    .nav-search-style3 .info h5 {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 10px;
    }*/

        .nav-search-style3 .form-group {
            margin-bottom: 0;
        }

        .nav-search-style3 .text-muted.fsz-13px {
            font-size: 12px;
            margin-bottom: 8px;
        }

        .nav-search-style3 .form-control {
            height: 40px;
            font-size: 13px;
            padding-right: 60px;
        }

        .nav-search-style3 .icon {
            top: 10px;
        }
}

@media screen and (max-width: 390px) {
    .nav-search-style3 {
        margin-top: 10px;
    }

        .nav-search-style3 .row {
            margin: 0 -10px;
        }
}



/*------------------------------START NewsDetail and ColumnAll------------------------------*/

/*add by Pai 18/04/2025*/
#itemContainer .img-opinion, /*สำหรับ ColumnAll*/
.news-section .img-opinion { /*สำหรับ NewsDetail*/
    width: 5vw;
    height: 5vw;
    max-width: 80px;
    min-width: 60px;
    max-height: 80px;
    min-height: 60px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    overflow: hidden;
}

/* เพิ่มกรณีพิเศษ ถ้าอยู่ใน ColumnAll แล้วขยาย max ขึ้น */
#itemContainer .img-opinion {
    max-width: 90px;
    max-height: 90px;
}

/* ปรับขนาดสำหรับจอเล็ก */
@media (max-width: 768px) {
    #itemContainer .img-opinion,
    .news-section .img-opinion {
        width: 8vw;
        height: 8vw;
    }
}


#subcolname2, #viewMore { /*สำหรับ NewsDetail*/
    cursor: pointer;
}
/*------------------------------End NewsDetail and ColumnAll------------------------------*/


/*------------------------------START mainContent------------------------------*/
/* ===================== Default ===================== */
#mainContent,
#mainContent *:not(h2):not(h3) {
    font-family: 'Sarabun', sans-serif;
    font-size: 18px;
}

/* mobile font override */
@media screen and (max-width: 576px) {
    #mainContent,
    #mainContent *:not(h2):not(h3) {
        font-size: 14px;
    }
}

/* reset h2/h3 but keep Sarabun font */
#mainContent h2,
#mainContent h3 {
    all: revert;
    font-family: 'Sarabun', sans-serif !important;
}

    /* inherit style for child elements of h2, h3 */
    #mainContent h2 *,
    #mainContent h3 * {
        font: inherit !important;
        color: inherit !important;
        line-height: inherit !important;
    }

/* ===================== Mobile (≤576px) ===================== */
@media screen and (max-width: 576px) {
    #mainContent h2 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;
    }

    #mainContent h3 {
        font-size: 18px !important;
        line-height: 1.5 !important;
        font-weight: 550 !important;
    }

    #texttitle {
        font-size: 24px !important;
    }
}

/* ===================== Tablet (577px–1023px) ===================== */
@media (min-width: 577px) and (max-width: 1023.98px) {
    #mainContent h2 {
        font-size: 24px !important;
        line-height: 1.5 !important;
        font-weight: 600 !important;
    }

    #mainContent h3 {
        font-size: 22px !important;
        line-height: 1.6 !important;
        font-weight: 550 !important;
    }

    #texttitle {
        font-size: 40px !important;
    }
}

/* ===================== Desktop (≥1024px) ===================== */
@media (min-width: 1024px) {
    #mainContent h2 {
        font-size: 30px !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
    }

    #mainContent h3 {
        font-size: 24px !important;
        line-height: 1.6 !important;
        font-weight: 600 !important;
    }

    #texttitle {
        font-size: 50px !important;
    }
}



/* ปรับรูปแบบของ <p>, <font>, <pre> */
#mainContent p, #mainContent font, #mainContent pre {
    white-space: normal;
    word-break: break-word; /* เพื่อให้ตัดคำได้ดีขึ้น */
    overflow-wrap: anywhere; /* ป้องกันล้นกรอบในคำยาว ๆ เช่น URL */
    margin: 0 0 10px;
}

/* ตั้งค่าลิงก์, รูปภาพ และ <span> ให้อยู่ในบรรทัดเดียว */
#mainContent a, #mainContent img, #mainContent span {
    display: inline;
}

/* การตั้งค่ารูปภาพ */
#mainContent img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ถ้า fixsize = true (เพิ่ม class .fix-size จาก JS) */
#mainContent.fix-size img {
    width: auto !important;
    height: auto !important;
}

/* ถ้า fixsize = false (เพิ่ม class .full-size จาก JS) */
#mainContent.full-size img {
    width: 100% !important;
    height: auto !important;
}

/* กรณีพิเศษ: ขนาดรูปตรงกับ 663x180 → ใช้ขนาดเดิมเสมอ */
#mainContent img[width="663"][height="180"] {
    width: auto !important;
    height: auto !important;
}

/* กรณีที่มีการใช้ full-size หรือ fix-size จะยังคงใช้ขนาดเดิมสำหรับ 663x180 */
#mainContent.full-size img[width="663"][height="180"],
#mainContent.fix-size img[width="663"][height="180"] {
    width: auto !important;
    height: auto !important;
}

#mainContent img[src*="hs_202504241547_img3"],
#mainContent img[src*="hs_202505081441_img3"] {
    width: 663px !important;
    height: 180px !important;
}


/* ลิงก์ให้เปิดในแท็บใหม่ */
#mainContent a[href] {
    target: _blank;
    color: #337ab7;
    text-decoration: none;
}

/* ส่วนที่มีข้อความสีเขียวและข้อความทั่วไป */
#mainContent p.green-text {
    color: green;
    font-weight: bold;
}

#mainContent p.red-text {
    color: red;
}

/* ตั้งค่าตารางให้มีความกว้าง 100% ภายใน #mainContent */
#mainContent .full-width-table {
    width: 100% !important;
}

.bordered {
    border-collapse: collapse;
    width: 100%;
}

    .bordered, .bordered th, .bordered td {
        border: 1px solid black;
    }

        .bordered th, .bordered td {
            padding: 8px;
            text-align: left;
        }

.dark-theme .bordered,
.dark-theme .bordered th,
.dark-theme .bordered td {
    border: 1px solid white !important;
}





/*------------------------------END mainContent------------------------------*/


/*------------------------------ Start ToolTip ------------------------------*/
.custom-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.custom-tooltip {
    visibility: hidden;
    width: 200px;
    background-color: #b2d0f6;
    color: #05121A;
    text-align: center;
    border-radius: .25rem;
    padding: .25rem .5rem;
    position: absolute;
    z-index: 1000;
    top: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.1333333333) !important;
    max-width: 200px;
}

    .custom-tooltip::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #b2d0f6 transparent;
    }

    /* เพิ่มขอบให้ลูกศร */
    .custom-tooltip::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent rgba(0, 0, 0, 0.1333333333) transparent; /* ขอบลูกศรสีเดียวกับขอบ Tooltip */
        z-index: -1;
    }

    /* คลาสสำหรับแสดง Tooltip */
    .custom-tooltip.show {
        visibility: visible;
        opacity: 1;
    }

.custom-tooltip-wrapper.tooltip-open .custom-tooltip-icon {
    fill: #007bff;
}

html, body {
    scroll-padding-top: 0px;
}

    body.modal-open .stick-menu {
        position: unset !important;
        z-index: 500 !important
    }

    body:not(.modal-open) .sticky-navbar-desk-1 {
        position: sticky !important;
    }

.custom-tooltip-wrapper:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

/*------------------------------ End ToolTip ------------------------------*/

/*------------------------------ Start Banner ------------------------------*/

#bannerContainer .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    min-height: 4.5em;
}

/*------------------------------ End Banner ------------------------------*/

/*------------------------------ Start Youtube ------------------------------*/

#youtubeContainer .title {
    min-height: 48px;
}

#youtubeContainer .content {
    display: flex;
    flex-direction: column;
}

#youtubeContainer .meta-bot {
    margin-top: auto;
}

/*------------------------------ End Banner ------------------------------*/

/*------------------------------ Start Esg Story ------------------------------*/

#esgStoryContainer .title-esg {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* จำกัดข้อความให้แสดงแค่ 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* แสดง ... เมื่อข้อความเกิน */
    white-space: normal;
    line-height: 1.5em; /* ระยะห่างระหว่างบรรทัด */
    max-height: 2.8em; /* ความสูงสูงสุดสำหรับ 2 บรรทัด */
}

#esgStoryContainer .content {
    display: flex;
    flex-direction: column;
    height: 100px;
}

/*------------------------------ End Esg Story ------------------------------*/


/*------------------------------ Start Fintech ------------------------------*/

.title:not(#texttitle) {
    display: -webkit-box;
    /*-webkit-line-clamp: 2;*/ /* จำกัดให้แสดงแค่ 2 บรรทัด */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* แสดง ... เมื่อข้อความเกิน */
    max-height: 3em;
    /*line-height: 1.5em;*/
    white-space: normal;
    word-wrap: break-word;
}

/*------------------------------ End Fintech ------------------------------*/

/*------------------------------ Start Hotstock ------------------------------*/

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    /*line-height: 1.4em;*/
}

/*------------------------------ End Hotstock ------------------------------*/

/*------------------------------ Start Market Focus ------------------------------*/

#marketFocusContainer .swiper-slide {
    width: 300px;
    /*height: 200px;*/
    margin-right: 30px;
}

#marketFocusContainer .card-news {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

    #marketFocusContainer .card-news .img-cover {
        height: 60%;
        overflow: hidden;
    }

        #marketFocusContainer .card-news .img-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    #marketFocusContainer .card-news .contented {
        /*padding: 15px;*/
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

@media (max-width: 576px) {
    .swiper-button-next, .swiper-button-prev {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 576px) {
    #marketFocusContainer .swiper-slide {
        width: 200px;
        height: 100%;
        margin-right: 15px;
    }
}

/*------------------------------ End Market Focus ------------------------------*/

/*------------------------------ Start Market Summary ------------------------------*/

#chart {
    margin-top: -30px;
}

#marketSummaryTitleContainer .titleContainer {
    width: 280px;
    margin-right: 30px;
}

@media (max-width: 1300px) {
    #marketSummaryTitleContainer .titleContainer {
        width: 260px;
        margin-right: 20px;
    }
}

@media (max-width: 1200px) {
    #marketSummaryTitleContainer .titleContainer {
        width: 240px;
        margin-right: 16px;
    }
}

@media (max-width: 992px) {
    #marketSummaryTitleContainer .titleContainer {
        width: 220px;
        margin-right: 16px;
    }
}

@media (max-width: 769px) {
    #marketSummaryTitleContainer .titleContainer {
        width: 200px;
        margin-right: 12px;
    }
}

#marketSummaryTitleContainer .responsive-text {
    font-size: 24px;
    font-weight: 500;
}

#marketSummaryTitleContainer .responsive-subtext {
    font-size: 18px;
    font-weight: 400;
}

#marketSummaryTitleContainer .detail-stock {
    font-size: 16px;
    font-weight: 400;
}

@media (max-width: 768px) {
    #marketSummaryTitleContainer .responsive-text {
        font-size: 20px;
        font-weight: 500;
    }

    #marketSummaryTitleContainer .responsive-subtext {
        font-size: 16px;
        font-weight: 400;
    }

    #marketSummaryTitleContainer .detail-stock {
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    #marketSummaryTitleContainer .responsive-text {
        font-size: 18px;
        font-weight: 500;
    }

    #marketSummaryTitleContainer .responsive-subtext {
        font-size: 14px;
        font-weight: 400;
    }

    #marketSummaryTitleContainer .detail-stock {
        font-size: 10px;
    }
}

@media (max-width: 375px) {
    #marketSummaryTitleContainer .responsive-text {
        font-size: 16px;
        font-weight: 500;
    }

    #marketSummaryTitleContainer .responsive-subtext {
        font-size: 12px;
        font-weight: 400;
    }

    #marketSummaryTitleContainer .detail-stock {
        font-size: 10px;
    }
}

/*------------------------------ End Market Summary ------------------------------*/

/*------------------------------ Start Opinion ------------------------------*/

.img-opinion {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    object-fit: cover;
    max-width: 80px;
    min-width: 60px;
    max-height: 80px;
    min-height: 60px;
    display: block;
    overflow: hidden;
}

.img-opinion-sub {
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    object-fit: cover;
    max-width: 60px;
    min-width: 60px;
    max-height: 60px;
    min-height: 60px;
    display: block;
    overflow: hidden;
}

@media (max-width: 768px) {
    .img-opinion {
        width: 8vw;
        height: 8vw;
    }

    .img-opinion-sub {
        width: 8vw;
        height: 8vw;
    }
}

/*------------------------------ End Opinion ------------------------------*/

/*------------------------------ Start Power Gold Trading ------------------------------*/

.ad-container {
    position: relative;
    width: 100%;
    overflow: visible;
    aspect-ratio: var(--ad-ratio);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

amp-ad {
    width: 100%;
    height: 100%;
    display: block;
}

/*------------------------------ End Power Gold Trading ------------------------------*/

/*------------------------------ Start Recomended ------------------------------*/

#recSubContainer .title {
    min-height: 48px;
}

#recSubContainer .content {
    display: flex;
    flex-direction: column;
}

#recSubContainer .meta-bot {
    margin-top: auto;
}

/*------------------------------ End Recomended ------------------------------*/

/*------------------------------ Start Stock ------------------------------*/

.custom-select-new {
    position: relative;
    font-family: Arial;
}

/*------------------------------ End Stock ------------------------------*/

/*------------------------------ Start Cookie ------------------------------*/

.footer-truehit {
    color: #ecf4ff; /* สีปกติ */
}

.dark-theme .footer-truehit {
    color: #000; /* สีในโหมด dark-theme */
}

.cookie-style {
    width: 100%;
    max-width: 295px;
    min-width: 295px;
    padding: 16px;
    background: #ECF4FF !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    text-align: center !important;
    color: var(--color-invert) !important;
    border: 1px solid rgba(0, 0, 0, 0.1333333333) !important;
    z-index: 9999 !important;
    animation: fade-up 1.5s ease-in-out 1.5s forwards;
}

.cookie-container img {
    max-width: 40px;
    margin-bottom: 15px;
}

.cookie-container p a {
    text-decoration: underline;
    color: var(--color-blue);
}

.cookie-container p {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray);
    line-height: 24px;
}

/*------------------------------ End Cookie ------------------------------*/

/*------------------------------ Start Default Height Contriner SEO ------------------------------*/

.seo-wrapper-popular-stock-news,
.seo-wrapper-latest-stock-news,
.seo-wrapper-international-news {
    height: 450px;
    overflow: hidden;
}

/* สำหรับ tablet ขนาดกลางและมือถือแนวนอน (≤768px) */
@media (max-width: 768px) {
    .seo-wrapper-popular-stock-news,
    .seo-wrapper-latest-stock-news,
    .seo-wrapper-international-news {
        height: 400px;
    }
}

/* สำหรับมือถือทั่วไป (≤576px) */
@media (max-width: 576px) {
    .seo-wrapper-popular-stock-news,
    .seo-wrapper-latest-stock-news,
    .seo-wrapper-international-news {
        height: 360px;
    }
}

/* สำหรับมือถือขนาดเล็กมาก เช่น iPhone SE (≤390px) */
@media (max-width: 390px) {
    .seo-wrapper-popular-stock-news,
    .seo-wrapper-latest-stock-news,
    .seo-wrapper-international-news {
        height: 320px;
    }
}


.seo-wrapper-executive-interview {
    height: 530px;
    overflow: hidden;
}

.seo-wrapper-ipo-corner {
    height: 530px;
    overflow: hidden;
}

.seo-wrapper-efin-review {
    height: 530px;
    overflow: hidden;
}

.seo-wrapper-hot-stock {
    height: 313.5px;
    overflow: hidden;
}

.seo-wrapper-hot-topic {
    height: 313.5px;
    overflow: hidden;
}

.seo-wrapper-editorial {
    height: 313.5px;
    overflow: hidden;
}

.seo-wrapper-fund {
    height: 313.5px;
    overflow: hidden;
}

.seo-wrapper-11 {
    height: 313.5px;
    overflow: hidden;
}

.seo-wrapper-crypto {
    height: 313.5px;
    overflow: hidden;
}

.seo-wrapper-esg-story {
    height: 250px;
    overflow: hidden;
}

/*    .seo-wrapper-img-esgstory {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
        overflow: hidden;
        display: block;
    }*/

.seo-wrapper-company-visit {
    height: 250px;
    overflow: hidden;
}

.seo-wrapper-recommended {
    height: 700px;
    overflow: hidden;
}

.seo-wrapper-youtube-efinance {
    height: 800px;
    overflow: hidden;
}

.seo-wrapper-opinion {
    height: 380px;
    overflow: hidden;
}

.seo-wrapper-market-focus {
    height: 150px;
    overflow: hidden;
}

/* Tablet (≤768px) */
@media (max-width: 768px) {
    .seo-wrapper-market-focus {
        height: 120px;
    }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
    .seo-wrapper-market-focus {
        height: 100px;
    }
}


/*.seo-wrapper-img-esgstory {
        aspect-ratio: 4 / 3;*/ /* รักษาสัดส่วน 4:3 */
/*width: 100%;*/ /* กว้างเต็ม container */
/*height: auto;*/ /* ปล่อยให้ browser คำนวณจาก aspect-ratio */
/*overflow: hidden;
        display: block;
        position: relative;*/ /* เผื่อจะวาง overlay หรือ content ซ้อนทับ */
/*}*/

.seo-wrapper-power-gold-trading {
    height: 290px;
    overflow: hidden;
}

.seo-wrapper-companies-news {
    height: 290px;
    overflow: hidden;
}

/*==== Start กราฟหุ้น ====*/

.seo-wrapper-market-summary-graph {
    height: 634px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .seo-wrapper-market-summary-graph {
        height: 420px;
    }
}

@media (max-width: 576px) {
    .seo-wrapper-market-summary-graph {
        height: 300px;
    }
}

/*==== End กราฟหุ้น ====*/

.seo-wrapper-latest-trading {
    height: 272px;
    overflow: hidden;
}

/*==== Start Banner Slide ====*/
.seo-wrapper-banner {
    height: 523px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .seo-wrapper-banner {
        height: auto;
        min-height: 300px;
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .seo-wrapper-banner {
        min-height: 250px;
    }
}

.seo-wrapper-img-banner {
    height: 321px;
    overflow: hidden;
}
/*==== End Banner Slide ====*/


.seo-wrapper-ads-top-350-200 {
    height: 256px;
    overflow: hidden;
}

.seo-wrapper-marketsummary {
    height: 40px;
    overflow: hidden;
}

@media (max-width: 991px) {
    .seo-wrapper-marketsummary {
        height: 112px;
    }
}

/*==== Start Ads Bottom ====*/
.seo-wrapper-ads-bottom {
    height: 166px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .seo-wrapper-ads-bottom {
        height: 140px;
    }
}

@media (max-width: 576px) {
    .seo-wrapper-ads-bottom {
        height: 120px;
    }
}

@media (max-width: 390px) {
    .seo-wrapper-ads-bottom {
        height: 100px;
    }
}
/*==== End Ads Bottom ====*/

.seo-wrapper-container-powergold {
    height: 456px;
    overflow: hidden;
}

/* Tablet และมือถือแนวนอน (≤768px) */
@media (max-width: 768px) {
    .seo-wrapper-container-powergold {
        height: 380px;
    }
}

/* มือถือทั่วไป (≤576px) */
@media (max-width: 576px) {
    .seo-wrapper-container-powergold {
        height: 340px;
    }
}

/* มือถือจอเล็กมาก เช่น iPhone SE (≤390px) */
@media (max-width: 390px) {
    .seo-wrapper-container-powergold {
        height: 300px;
    }
}

/* ค่า default สำหรับหน้าจอใหญ่กว่า 767px (Desktop และขนาดใหญ่) */
.seo-wrapper-columnall-container {
    height: 778px;
}

/* ขนาดใหญ่สุดก่อน (Tablet landscape และต่ำกว่า) */
@media (max-width: 767px) {
    .seo-wrapper-columnall-container {
        height: 2015px;
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .seo-wrapper-columnall-container {
        height: auto !important;
    }
}

/* เฉพาะช่วง 490px - 576px ให้ใช้ auto */
@media (min-width: 490px) and (max-width: 576px) {
    .seo-wrapper-columnall-container {
        height: auto !important;
    }
}

/* ถัดมา: Tablet / มือถือกึ่งกลาง */
@media (max-width: 576px) {
    .seo-wrapper-columnall-container {
        height: 1968px;
    }
}

/* เล็กสุด: มือถือจอเล็ก */
@media (max-width: 575px) {
    .seo-wrapper-columnall-container {
        height: 1868px;
    }
}

@media (max-width: 768px) {
    .seo-wrapper-columnall-pagination {
        height: 81px;
    }
}




/*------------------------------ Start Default Height Contriner SEO ------------------------------*/


/* ใช้กับ class sr-only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.button-border-none {
    border: unset
}

.button-bg-none {
    background-color: unset
}

.button-full-bg {
    width: 100%;
    background-color: #ECF4FF;
    padding: 0.75rem 1rem;
    text-align: left;
    display: block;
    transition: background-color 0.2s ease;
}

.button-link-style {
    background: none;
    color: inherit;
}

.dark-theme .nav-pills-2 .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--color-white) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
}

    .dark-theme .nav-pills-2 .nav-link.active h3, .nav-pills .show > .nav-link h3 {
        font-weight: 500 !important;
    }

    /* --------------------------------------------------------------------------- */
    .nav-pills-2 .nav-link.active::before, .nav-pills .show > .nav-link::before {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        border-radius: 50px;
        border-bottom: 2px solid var(--color-black-2);
    }

.nav-pills-2 .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--color-black-2) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
}

    .nav-pills-2 .nav-link.active h3, .nav-pills .show > .nav-link h3 {
        font-weight: 500 !important;
    }

.nav-pills-2 .nav-link, .nav-pills > .nav-link {
    color: var(--color-gray) !important;
    background-color: transparent;
    border-radius: 0;
    font-weight: 500;
    margin: 0 1rem;
    padding: 0;
    position: relative !important;
}

    .nav-pills-2 .nav-link, .nav-pills > .nav-link.nav-tap-link1 {
        margin: 0 1rem 0 0;
    }


.img-fluid-cover {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 1194px) and (max-width: 1199px) {
    .col-custom-1194 {
        width: 25%;
        flex: 0 0 25%;
    }
}

.responsive-img {
    width: 100%;
    height: auto;
    display: block; 
}