/* Custom CSS TSCN */
/* 
0.  CI Brand 
1.  Utilities
2.  Borders
3.  Box shadow
4.  Colors
5.  Details
6.  Flexbox
7.  Layout
8.  Specific layout
9.  Margin
10. filters
11. Padding
12. Typography
13. Custom Pages
14. Buttons
15. Tabs
16. Input
17. Carousel
18. Modal
19. Mega Submenu
 */

 @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400&display=swap');
:root {
    --var-bg-theme: #222;
    --var-font-face: 'Kanit',sans-serif !important;
    --var-font-body: 'Roboto',Arial,Helvetica,sans-serif !important;
    --var-text-heading: #fff;
    --var-text-contrast-reader: .6;
    --var-border-color: #e7e7e7 !important;
    --var-guuter-1x: 4px;
    --var-guuter-2x: 8px;
    --var-guuter-3x: 16px;
    --var-box-shadow: 0 0.16rem 0.36rem 0 rgb(0 0 0 / 6%), 0 0.03rem 0.09rem 0 rgb(0 0 0 / 11%) !important;
    --var-color-link-hover: #8f2a23;
    --var-color-branding: #273767;
    --var-font-base: 14px;
}

/* 1.  Utilities */
.text-info {
    color: var(--var-color-branding) !important;
}

/* 1.  Utilities */
.app  {
    background-color: #fff;
    color: #6F6F74;
    font-size: 14px;
    line-height: 1.28;
    font-family: Roboto,Arial,Helvetica,sans-serif !important;
}

.app a:hover {
    text-decoration: none;
}

/* 2.  Borders */
[aria-label="breadcrumb"].border-top {
    border: none !important;
}

/* 3.  Box shadow */
/* 4.  Colors */
/* 5.  Details */
/* 6.  Flexbox */
/* 7.  Layout */
.card {
    box-shadow: var(--var-box-shadow);
    background-color: #fff;
    border-radius: 4px;
    border: none !important;
    overflow: hidden;
    margin-top: var(--var-guuter-2x);
}

/* 8.  Specific layout / Slider / Module */
.carousel-inner {
    padding-bottom: 40px;
}

.company-img {
    margin: 0 -9px 10px;
}

.company-img + .card-body {
    min-height: 120px;
    padding: 4px 16px !important;
}

.company-img + .card-body .card-text {
    font-family: Roboto,Arial,Helvetica,sans-serif;
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
}

.vanilla-calendar .vanilla-calendar-week {
    background-color: #fff;
}

.vanilla-calendar .vanilla-calendar-week {
    /* background-color: #273767 !important; */
}

.vanilla-calendar .vanilla-calendar-week span {
    font-family: Roboto,Arial,Helvetica,sans-serif;
    /* color: #fff !important; */
    font-weight: normal !important;
}

#myCalendar.vanilla-calendar {
    box-shadow: var(--var-box-shadow);
    border: none !important;
    margin-top: var(--var-guuter-2x);
}

.vanilla-calendar .vanilla-calendar-date {
    justify-content: center;
}

.vanilla-calendar .vanilla-calendar-body {
    min-height: 250px;
}

.card-event .media-body {
    font-weight: normal;
    font-size: 13px;
}

/* Menu Sidebar */

[x-init*="bind,bindSliderCategory()"] .col-md-3.pr-0 .dropdown-category .fa-angle-right {
    right: 12px;
    top: 14px;
}

[x-init*="bind,bindSliderCategory()"] .col-md-3.pr-0 .form-check.form-check-businessType,
[x-init*="bind,bindSliderCategory()"] .col-md-3.pr-0 .form-check {
    padding: 6px;
    padding-left: 1.25rem;
}

[x-init*="bind,bindSliderCategory()"] .col-md-3.pr-0 .nav-catgory .nav-link {
    padding: 13px 13px;
}

.nav-catgory .nav-item:hover .dropdown-menu a {
    color: #000;
    font-size: var(--var-font-base);
    margin-left: -4px;
}

.nav-catgory .nav-item:hover .dropdown-menu a:hover {
    color: var(--var-color-link-hover);
}



/* 9.  Margin */
/* 10. filters */
/* 11. Padding */
/* 12. Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.media-company .media-body,
.nav-menu,
.our-title,
.form-check-label,
.nav-text,
.alert-warning,
.col-form-label,
.btn,
.text-big {
    font-family: var(--var-font-face);
}

.service-partner-text h2,
.service-partner-text h3 {
    font-size: 18px !important;
    text-align: left !important;
}

.header-section h2 {
    color: #fff;
}

#NewsCarousel .card-body h6,
#EventCarousel .card-body .card-title {
    color: #0e1218;
    font-size: 16px !important;
}

#Our1Carousel .card-body .text-left,
[role="main"] p,
[role="main"] ul {
    font-family: Roboto,Arial,Helvetica,sans-serif;
}

[role="main"] p,
[role="main"] ul {
    font-size: 14px;
}

#NewsCarousel .card-body h6:hover,
#EventCarousel .card-body .card-title:hover {
    opacity: .5;
}

.category-lv3 .text-dark {
    line-height: 1.28;
    padding: 8px 0;
    font-weight: 500 !important;
    margin-bottom: 0;
}

/* 13. Custom Pages & ID */
#EventCarousel .company-img {
    height: 120px;
}

#NewsCarousel,
.container[x-init="bindEvents()"] .border,
#Our1Carousel {
    border: none !important;
}

#Our2Carousel {
    box-shadow: var(--var-box-shadow);
    border-color: var(--var-border-color) !important;
    border-radius: 4px;
}

.card-event .media.text-muted {
    font-family: arial,sans-serif !important;
    font-style: normal;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 300;
}

#NewsCarousel i .fa,
.card-event .media.text-muted .fa {
    font: normal normal normal 14px/1 FontAwesome !important;
}

.card-event .media.text-muted .fa.fa-map-marker {
    font: normal normal normal 16px/1 FontAwesome !important;
}

.container[x-data="homeData('en')"] {
    padding-top: 20px;
}

.media.media-company.text-muted.pt-1.text-left {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.card-member-highlight .media-company .media-body {
    font-size: 14px !important;
    color: #333;
}

[x-init*="bindHighlightMember"] .media-company img {
    height: 40px !important;
    border: none !important;
    width: auto !important;
}

[x-show*="bannerAdvertising"] .card-body{
    padding: 0 !important;
}

.our-title {
    background-color: transparent !important;
}

.heading-line .heading-line-title {
    color: #0e1218;
    font-family: var(--var-font-face);
}

[x-init="bindTestimonials()"],
[x-init*="bindHighlightMemberSection"] {
    padding: 60px 0;
}

[x-init*="bindCollaboration()"] .border-top{
    border: none !important;
}

[x-init*="bindCollaboration()"] .text-primary {
    color: #818a90 !important;
    text-transform: uppercase;
}

[x-show*="servicePartner"] .card-body {
    box-shadow: none !important;
}

/* ===================================== Product */
.card.card-product {
    position: relative;
}

.card.card-product .product-name {
    text-align: left !important;
}

.card.card.card-product .company-name {
    font-family: Roboto,Arial,Helvetica,sans-serif;
}

.card.card-product > a:first-child {
 margin: -18px -8px 8px;   
}

.card.card-product > a:first-child img {
    object-fit: cover;
}

[x-html*="product.sort_description"] {
    font-family: Roboto,Arial,Helvetica,sans-serif;   
    font-size: 16px;
}

.card.card-product .fa-heart {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    font-size: 16px !important;
    background-color: rgba(143, 42, 35, .4);
    padding: 6px;
    border-radius: 4px;
}

.card.card-product .fa-heart.text-danger {
    color: #fff !important;
}

#profile .card {
    height: auto !important;
}

#profile .card-directory .company-img .card-img-top {
    max-height: 60px;
}

#profile .company-img + .card-body {
    min-height: 60px;
}

#profile .company-img + .card-body .card-text {
    position: relative;
    font-family: var(--var-font-face);
    left: 0;
    right: 0;
}

[x-data*="productDescriptionData"] .d-flex.align-items-center.justify-content-center.mt-4 {
    justify-content: left !important;
}

[x-data*="productDescriptionData"] .h-90.card-img-top {
    max-height: 64px;
    width: auto;
    margin: auto !important;
}

/* ================================================ Profile Company */
.profile-wrapper .col-md-12.border.pt-3.pb-3{
    border: none !important;
    padding-right: 0;
}

.profile-wrapper .btn-send-inquiry {
    margin-bottom: var(--var-guuter-3x);
}

[x-show*="company"] .fab {
    margin-right: 8px;
}

.nav-profile-settings a.active,
.profile-wrapper a[x-show*="company"]:hover {
    color: var(--var-color-link-hover);
}

.addReadMore,
[x-text*="company.company_address"] {
    font-family: Roboto,Arial,Helvetica,sans-serif;
    font-size: 16px;
    padding: 16px 0;
}

.profile-wrapper [x-text*="company.company_name"] {
    font-size: 20px;
}
/* 14. Buttons */
.btn.btn-secondary {
    background-color: transparent;
    border-color: #dee2e6;
    color: #666;
}

.btn-secondary:hover {
    color: #333 !important;
}

.badge-tags {
    font-family: Roboto,Arial,Helvetica,sans-serif !important;
    font-weight: normal;
    padding-bottom: 4px;
}

.btn-event {
    background-color: transparent !important;
    color: #97989c !important;
    margin-bottom: var(--var-guuter-3x);
    text-transform: uppercase;
}

.btn-back-to {
    background-color: transparent !important;
    border-color: transparent !important;  
    color: #fff;
    text-decoration: underline;
}

/* 15. Tabs */
.nav-tabs-product .nav-link {
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
}

#tab_wrapper .mb-1,
label.mb-1 {
    color: var(--var-bg-theme);
    font-size: 15px;
    font-weight: 500;
}

#tab_wrapper ul.tagit li.tagit-choice {
    background-color: transparent !important;
    border-color: var(--var-border-color);
}

#tab_wrapper .btn-submit-content-basic,
#tab_wrapper .btn.btn-primary {
    border-radius: 40px;
    font-weight: bold;
    background-color: var(--var-color-branding) !important;
    border-color: transparent;
    color: #fff;
    padding: 12px 20px;
    min-width: 120px;
}

.social-body .btn.btn-primary {
    border-radius: 40px;
    font-weight: bold;
    background-color: var(--var-color-branding) !important;
    border-color: transparent;
    color: #fff;
    padding: 4px 20px;
    min-width: 120px;
    margin-top: 4px !important;
}

.social-body .btn-group {
    margin-top: 16px !important;
}

#tab_wrapper .btn-submit-content-basic:hover,
#tab_wrapper .btn.btn-primary:hover,
.social-body .btn.btn-primary:hover {
    background-color: var(--var-color-link-hover) !important;
}

#tab_wrapper .ui-widget.ui-widget-content.ui-corner-all {
    border: none;
}

#tab_wrapper .border-bottom.mb-3 {
    padding-top: 8px;
    font-size: 18px;
    padding-bottom: 4px;
    font-family: var(--var-font-body);
    border-bottom: transparent !important;
    position: relative;
    padding-left: 8px;
}

#tab_wrapper .border-bottom.mb-3::after {
    content: "";
    position: absolute;
    height: 12px;
    width: 4px;
    left: 0;
    top: 13px;
    background-color: #dee2e6;
}

#tab_wrapper .border-bottom.mb-3 + .pl-3 {
    padding-left: 0 !important;
}

.table-notifications a:hover {
    color: var(--var-color-link-hover) !important;
}

.endorsers-wrapper .company-img + .card-body {
    min-height: 0;
}

.endorsers-wrapper .card-directory .company-img {
    height: auto;
}

.endorsers-wrapper .card-directory {
    box-shadow: none;
    height: auto !important;
    align-items: center;
    flex-direction: row;
    text-align: left;
    border-bottom: 1px solid #eee !important;
    padding: 0 !important;
    overflow: auto;
    border-radius: 0;
}



.endorsers-wrapper .company-img + .card-body .card-text {
    position: relative;
    left: 0;
    margin-top: 16px;
}

/* 16. Input */
.form-control:focus {
    border-color: var(--var-color-branding) !important;
    outline: none;
    box-shadow: none !important; 
}

input[type="file"].sr-only + span {
    cursor: pointer;
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #eee;
    border-radius: 40px;
    text-decoration: none;
    color: var(--var-color-branding) !important;
}

input[type="file"].sr-only + span u {
    text-decoration: none;
}

.has-error .help-block {
    font-family: Roboto,Arial,Helvetica,sans-serif;
}

.field-registration-photo,
.field-registration-photo .col-sm-8,
.btn-file input[type=file] {
    cursor: pointer;
}

/* 17. carousel */
.carousel-item .text-center {
    text-align: left !important;
}

/* 18. Modal */
#termModal .ck-content p:first-child,
#privacyModal .ck-content p:first-child {
 font-family: var(--var-font-face);
}

#termModal .modal-body,
#privacyModal .modal-body {
    padding: 40px 5vw;
}

#termModal .ck-content p:not(first-child),
#privacyModal .ck-content p:not(first-child) {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 16px;
}

.modal-footer .btn {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
}

/*  19. Menu, Mega Submenu */
a.nav-menu {
    font-weight: normal !important;
}

.megasubmenu.dropdown-menu .title {
    font-size: 15px;
    position: relative;
}
.megasubmenu.dropdown-menu .title:hover {
    color: var(--var-color-link-hover);
}

.megasubmenu.dropdown-menu .title:hover:after {
    content: "→";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
/* ================================================ Dashboard / Profile Setting */
.dashboard-count .border {
    background-color: #fff;
    border-radius: 4px;
    border-color: #e5e6e7 !important;
    overflow: hidden;
}

.dashboard-count .border:hover {
    border-color: #dee2e6 !important;
    box-shadow: var(--var-box-shadow);
}

.dashboard-stat-number h4 {
    font-size: .8rem !important;
}

.dashboard-count .border:hover h3,
.dashboard-count .border:hover h4,
.dashboard-count .border:hover i,
.cursor-pointer:hover .text-muted,
.cursor-pointer:hover i {
    color: var(--var-color-link-hover) !important;
}

.followers-wrapper .company-img + .card-body .card-text,
.endorsers-wrapper .company-img + .card-body .card-text {
    position: relative;
    left: auto;
    right: auto;
}

.followers-wrapper .company-img + .card-body .card-text {
    text-align: left !important;
}

.btn-dashboard-view:hover {
    background-color: var(--var-color-link-hover) !important;;
}

.border-bottom.mt-5.mb-3 + .pl-3 {
    padding-left: 0 !important;
}

.card-login h3 {
    font-size: 18px !important;
}

.wraper-btn-signup {
    font-size: 14px;
    font-family: "Roboto" ,Arial,Helvetica,sans-serif;
}


@media screen and (min-width: 320px) and (max-width: 640px) {
    .dashboard-wrapper .dashboard-count {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .dashboard-wrapper .dashboard-count .col {
        width: 40% !important;
        flex-shrink: 0 !important;
        margin-top: 20px;
    }

    .dashboard-wrapper .dashboard-count .col > div {
        width: 100px;
        overflow: auto;
    }

    .dashboard-wrapper .dashboard-count + .d-flex {
        display: block !important;
    }

    .dashboard-wrapper .dashboard-count + .d-flex .border-right {
        border-right: transparent !important;
    }

    /* TAB Setting Timeline */
    .social-body .social-body .btn.btn-primary {
        min-width: auto;
    }

    .notification-search {
        margin: 20px 0;
    }

    .notification-search .form-group {
        margin-left: 0 !important;
    }

    .notification-search .btn-home-search {
        border-left: 1px solid #dee2e6 !important;
        border-radius: 4px;
    }

    .contact-list-wrapper .btn.btn-secondary {
        width: auto;
        min-width: auto;
        font-size: 12px;
    }

    .endorsers-wrapper .card-directory .company-img {
        border: none !important;
    }

    .endorsers-wrapper .company-img + .card-body {
        padding: 18px 0 0 30px !important;
    }
}


@media screen and (min-width: 768px) {
    .form-group.mb-0.d-none.d-sm-block {
        width: 15%;
    }

    .form-group.mb-0.d-none.d-sm-block .btn-danger {
        padding: 0.375rem 4rem !important;
    }

    .btn.btn-danger.ml-2.ml-md-0 {
        border-radius: 0px 4px 4px 0;
        height: 40px;
        width: 12%;
    }

    .form-group.mb-0.mx-sm-3 {
        width: 75% !important;
        padding: 0;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .form-group .input-home-search {
        border-radius: 4px 0 0 4px;
        height: 40px;
    }

    /* CUSTOM Card To List */
    .endorsers-wrapper .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
}

@media only screen and (min-width: 992px) {
    /* ===================================== News */
    #NewsCarousel {
        margin: 0 -1rem;
    }
    
    .card-directory .company-img {
        height: 140px;
    }

    .card-directory .company-img .card-img-top {
        max-height: 128px;
    }

    /* ENDORSER */
    .endorsers-wrapper .card-directory .company-img {
        height: 140px;
    }

    .endorsers-wrapper .card-directory .company-img {
        margin: 0 0 16px;
        height: auto;
        overflow: auto;
        display: block !important;
    }
    
    .endorsers-wrapper .company-img .card-img-top {
        height: auto;
        max-width: 120px;
        padding: 0 !important;
        margin: 0 !important;
    }

    .endorsers-wrapper .company-img + .card-body {
        min-height: 0 !important;
    }

    .endorsers-wrapper .card.p-2.card-directory.h-90 {
        height: auto !important;
    }
}

/* ===================================== MOBILE ONLY */
@media only screen and (max-width: 480px) {
    .tscn-header .navbar .btn-toggle-menu {
        background-color: var(--var-color-branding) !important;
        margin-top: 19px !important;
        border: transparent !important;
    }
    
    .container-content-login, .container-register {
        background-color: var(--var-color-branding) !important;
        min-height: 100vh;
    }

    .login-wrapper {
        margin-top: -8px !important;
    }

    .main-secction  {
        margin-top: -16px !important;
    }

    .card-login .card {
        box-shadow: none !important;
    }

    .file-wrapper {
        height: auto !important;
    }

    [x-init="bindTestimonials()"], [x-init*="bindHighlightMemberSection"] {
        padding: 24px 16px !important;
    }

    .container-search .col-9 {
        max-width: calc(89% - 16px);
        flex: 0 0 calc(89% - 16px);   
    }

    .container-search .col-9 .flex-grow-1 {
        margin-left: 0 !important;
    }

    .container-events .col-md-3.pl-0.pr-4 {
        padding-right: 0 !important;
    }

    #NewsCarousel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    } 


    .header-section ~ * {
        padding-left:  0 !important;
        padding-right:  0 !important;
    }

    .sustainability-wrapper .sustainability-card {
        margin-left: 0 !important;
        margin-right:  0 !important;
    }

    [role="main"] h2,
    [role="main"] h3,
    [role="main"] h4,
    [role="main"] h5,
    [role="main"] h6 {
        color: var(--var-bg-theme) !important;
    }

    .header-section {
        margin-left: -16px;
        margin-right: -16px;
        text-align: center;
        color: #fff !important;
    }
    
    .header-section h2 {
        color: #fff !important;
    }

    #heading65 .btn-link {
        text-decoration: underline;
        color: var(--var-bg-theme);
    }

    /* Category */
    .search-category-all .mb-3, .my-3 {
        padding: 0 !important;
        margin: 0 !important;
    }

    .search-category-all .form-inline {
        width: 100%;
        justify-content: start !important;
    }

    .search-category-all .form-group {
        width: calc(100% - 102px) !important;
    }
    #myHeaderCategory {
        position: unset;
    }

    .icon-all-categories .categories {
        width: 33.3333%;
    }

    .icon-all-categories .border-top {
        border: transparent !important;
    }

    .icon-all-categories .categories .border {
        box-shadow: var(--var-box-shadow);
        border-radius: 4px;
        border: transparent !important;
    }

    .input-home-search {
        border-radius: 4px !important;
    }
}