﻿/* new version */
@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1176px;
    }
}

.p-0 {
    padding: 0 !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

.pr-0,
.px-0 {
    padding-right: 0 !important;
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
    padding-left: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-0,
.my-0 {
    margin-top: 0 !important;
}

.mr-0,
.mx-0 {
    margin-right: 0 !important;
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0 !important;
}

.ml-16 {
    margin-left: 16px !important;
}

.mr-16 {
    margin-right: 16px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

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

m-auto {
    margin: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mt-auto {
    margin-top: auto !important;
}

.m-center {
    margin: auto 0;
}

.pt-24 {
    padding-top: 24px !important;
}

.pr-24 {
    padding-right: 24px !important;
}

.pb-24 {
    padding-bottom: 24px !important;
}

.pl-24 {
    padding-left: 24px !important;
}

.p-24 {
    padding: 24px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pr-16 {
    padding-right: 16px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

.pl-16 {
    padding-left: 16px !important;
}

.p-16 {
    padding: 16px !important;
}

.pb-64 {
    padding-bottom: 64px !important;
}

.font-normal {
    font-family: 'DBHelvethaicaMonX-55';
}

.font-bold {
    font-family: 'DBHelvethaicaMonX-75Bd';
}

.font-28 {
    font-size: 28px;
}

.font-24 {
    font-size: 24px;
}

.font-20 {
    font-size: 20px;
}

.font-16 {
    font-size: 16px;
}

.font-14 {
    font-size: 14px;
}

.f-MNPaethai {
    font-family: 'MNPaethai';
}

.f-MNPaethai-Med {
    font-family: 'MNPaethai-Med';
}

.f-bold-75 {
    font-family: 'DBHelvethaicaMonX-75Bd';
}

.f-normal-65 {
    font-family: 'DBHelvethaicaMonX-65Med';
}

.f-small-55 {
    font-family: 'DBHelvethaicaMonX-55';
}

.f-size-lg {
    font-size: 32px;
}

.f-size-md {
    font-size: 20px;
}

.f-size-sm {
    font-size: 16px;
}

.f-size-xs {
    font-size: 12px;
}

a {
    color: #191919;
}

a:hover {
    color: #c1773f !important;
}

a:focus {
    color: #c1773f !important;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #fff7f2;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #fff7f2;
    color: #c1773f;
}

body {
    background-color: #ffffff;
    color: #191919;
}

.bg-light {
    background-color: #ffffff !important;
}

.form-select-tunwalai {
    height: 40px;
    border-radius: 8px;
    padding: 0.275rem 2.25rem 0.275rem 0.75rem;
}

.form-check {
    padding: unset;
}

.form-check-label {
    line-height: 1.2;
    cursor: pointer;
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    cursor: unset;
}

.form-check .form-check-input-tunwalai {
    float: none;
    margin-right: 4px;
    margin-left: unset;
}

.form-check-input-tunwalai:focus {
    box-shadow: unset;
    border-color: rgba(0, 0, 0, .25);
}

.form-check-input-tunwalai {
    cursor: pointer;
}

.form-check-input-tunwalai:checked {
    background-color: #d68c54;
    border-color: #d68c54;
}


.form-check .form-check-input-switch-tunwalai {
    float: none;
    margin-right: 4px;
    margin-left: unset;
}

.form-check-input-switch-tunwalai:checked~.form-check-label {
    color: #06c7a0;
}


.form-check-input-switch-tunwalai:focus {
    box-shadow: unset;
    border-color: rgba(0, 0, 0, .25);
}

.form-check-input-switch-tunwalai {
    cursor: pointer;
}

.form-check-input-switch-tunwalai:checked {
    background-color: #06c7a0;
    border-color: #06c7a0;
}

.form-check-input-switch-tunwalai {
    background-color: #eaeaea;
    border-color: #eaeaea;
}

.form-switch .form-check-input-switch-tunwalai:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input-switch-tunwalai {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input-switch-tunwalai:focus {
    border-color: rgba(0, 0, 0, .25);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input-switch-tunwalai:checked:focus {
    border-color: #06c7a0;
}

.btn {
    font-size: 24px;
    font-family: "DBHelvethaicaMonX-65Med";
    border-radius: 19px;
    padding: 4px 20px;
    line-height: 1.21;
    height: max-content;
    white-space: nowrap;
}

.btn-sm {
    font-size: 16px !important;
    border-radius: 14px !important;
    padding: 2px 12px !important;
    line-height: 1.19 !important;
    margin: auto !important;
}

.btn-close {
    position: absolute;
    right: -26px;
    top: -12px;
    width: 20px;
    height: 20px;
    color: #191919;
    opacity: 1;
}

.btn-close:hover {
    color: #191919;
    opacity: 1;
}

.btn-close:focus {
    box-shadow: none;
}

.btn-tunwalai {
    color: #ffffff !important;
    background-color: #d68c54 !important;
}

.btn-tunwalai:hover {
    color: #ffffff !important;
    background-color: #c1773f !important;
}

.btn-tunwalai:focus {
    color: #ffffff !important;
    background-color: #af662e !important;
    box-shadow: none !important;
}

.btn-tunwalai-outline {
    color: #d68c54 !important;
    background-color: #ffffff !important;
    border: 1px solid #d68c54;
}

.btn-tunwalai-outline:hover {
    color: #d68c54 !important;
    background-color: #fff7f2 !important;
}

.btn-tunwalai-outline:focus {
    color: #d68c54 !important;
    background-color: #fceee4 !important;
    box-shadow: none !important;
}

.btn-tunwalai-cherry {
    color: #ffffff !important;
    background-color: #db2638 !important;
}

.btn-tunwalai-cherry:hover {
    color: #ffffff !important;
    background-color: #c6192b !important;
}

.btn-tunwalai-cherry:focus {
    color: #ffffff !important;
    background-color: #b21021 !important;
    box-shadow: none !important;
}

.btn-pagination {
    color: #191919;
    height: 40px;
    padding: 8px;
    border-radius: 8px;
    border: solid 1px #ddd;
}

.btn-pagination:hover {
    color: #191919 !important;
    text-decoration: none;
}

.btn-pagination:focus {
    box-shadow: none;
}

.btn-search {
    border-radius: 50%;
    padding: 6px;
    line-height: .7;
}

.btn-carousel {
    width: 40px;
    height: 40px;
    padding: 8px;
    color: #191919;
    backdrop-filter: blur(20 px);
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
    background-color: #fff;
    border-radius: 50%;
    top: calc(50% - 20px);
}

.btn-carousel:hover {
    color: #191919 !important;
    background-color: #fff;
}

.btn-carousel:focus {
    color: #191919 !important;
    background-color: #fff;
    box-shadow: none !important;
}

.main-content {
    padding: 0px;
}

.carousel-item {
    transition: transform 0s ease-in-out;
}

.carousel-cursor-left {
    left: 15px;
}

.carousel-cursor-right {
    right: 15px;
}

.carousel-indicators [data-bs-target] {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50%;
}

.MultiCarousel {
    float: left;
    overflow: hidden;
    padding: 15px;
    width: 100%;
    position: relative;
}

.MultiCarousel .MultiCarousel-inner {
    transition: 0.5s ease all;
    float: left;
}

.MultiCarousel .MultiCarousel-inner .item {
    float: left;
}

.MultiCarousel .MultiCarousel-inner .item>div {
    text-align: left;
    margin: auto;
}

.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
    position: absolute;
    top: calc(50% - 40px);
}

.MultiCarousel .leftLst {
    left: 0;
}

.MultiCarousel .rightLst {
    right: 0;
}

.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
    pointer-events: none;
    opacity: .5;
}

.badge-finish {
    position: absolute;
    background: #5b2c17;
    text-align: center;
    color: #ffffff;
    font-family: "DBHelvethaicaMonX-65Med";
    z-index: 1;
}

.badge-right {
    right: 0 !important;
}

.badge-bottom-right {
    top: unset !important;
    right: 0 !important;
    bottom: 0 !important;
}

.badge-bottom-left {
    top: unset !important;
    left: 0 !important;
    bottom: 0 !important;
}

.badge-sm {
    top: 4px;
    padding: 0 4px;
    font-size: 14px;
    border-radius: 0 4px 4px 0;
}

.badge-md {
    top: 8px;
    padding: 0 8px;
    font-size: 20px;
    border-radius: 0 8px 8px 0;
}

.badge-lg {
    top: 12px;
    padding: 0 12px;
    font-size: 28px;
    border-radius: 0 12px 12px 0;
}

.badge-img-xs {
    width: 18px !important;
    height: 18px !important;
    top: 4px;
}

.badge-img-sm {
    width: 20px !important;
    height: 20px !important;
    position: absolute;
    padding: 0;
    top: 4px;
}

.badge-img-md {
    width: 32px !important;
    height: 32px !important;
    position: absolute;
    padding: 0;
    top: 8px;
    z-index: 2;
}

.badge-img-lg {
    width: 48px !important;
    height: 48px !important;
    position: absolute;
    padding: 0;
    top: 12px;
}

.tag-cherry {
    color: #fff !important;
    background-color: #db2638 !important;
    height: fit-content;
}

.tag-pink {
    color: #db2638 !important;
    background-color: #FDF2F3 !important;
    height: fit-content;
    min-width: fit-content;
}

.tag-sm {
    font-size: 16px;
    padding: 0 4px;
    margin-right: 4px;
    border-radius: 4px;
}

.tag-md {
    font-size: 20px;
    padding: 0 8px;
    margin-right: 8px;
    border-radius: 8px;
}

.tag-lg {
    font-size: 28px;
    padding: 0 12px;
    margin-right: 12px;
    border-radius: 12px;
}

.text-gray {
    color: #888 !important;
}

.toast-body {
    padding: 16px;
    line-height: 1.2;
    display: flex;
}

.toast-icon-correct {
    background-color: #06c7a0;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    margin-right: 8px;
    font-size: 16px;
    text-align: center;
    padding-top: 1px;
    margin-top: 3px;
    height: 18px;
}

.toast-success {
    max-width: 1000px !important;
    background-color: #f0fcf9;
    border-radius: 8px;
    border: solid 1px #aee8dc;
}

.toastSuccessTitleMessage {
    color: #06c7a0;
    font-family: "DBHelvethaicaMonX-75Bd";
    font-size: 20px;
    margin-right: 8px;
}

.toastSuccessMessage {
    color: #191919;
    font-family: "DBHelvethaicaMonX-65Med";
    font-size: 20px;
}

.toast-error {
    max-width: 1000px !important;
    background-color: #FDF2F3;
    border-radius: 8px;
    border: solid 1px #FDACB5;
}

.toastErrorTitleMessage {
    color: #DB2638;
    font-family: "DBHelvethaicaMonX-75Bd";
    font-size: 20px;
    margin-right: 8px;
}

.toastErrorMessage {
    color: #191919;
    font-family: "DBHelvethaicaMonX-65Med";
    font-size: 20px;
}

.toast-icon-error {
    background-color: #DB2638;
    color: #fff;
    border-radius: 50%;
    width: 18px;
    margin-right: 8px;
    font-size: 12px;
    text-align: center;
    padding-top: 3px;
    margin-top: 3px;
    height: 18px;
}

.one-line-text {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: normal;
}

.two-line-text {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: normal;
}

.three-line-text {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: normal;
}

.load-more {
    text-align: center;
    margin: 12px auto;
    cursor: pointer;
    font-size: 20px;
    color: #d68c54;
    text-decoration: underline;
}

.form-control:focus {
    color: #191919;
    background-color: #fff;
    border-color: #d68c54;
    box-shadow: unset;
}

.form-select:focus {
    border-color: #d68c54;
    outline: 0;
    box-shadow: unset;
}

.form-select,
.form-control {
    color: #191919;
    font-size: 20px;
    font-family: 'DBHelvethaicaMonX-65Med';
    border-color: #dddddd;
    padding: 0 8px;
    min-height: 40px
}

.add-top-dev-bar {
    top: 96px !important;
}

.add-margin-bottom-dev-bar {
    margin-bottom: 128px !important;
}

.show-only-mobile {
    display: none;
}

.article-img {
    width: 100%;
    height: 126px;
    border-radius: 8px;
}

/* old version */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-alt-link-tunwalai {
    color: #fff;
    background-color: #FF5853;
    border-radius: 15px;
    padding: 5px 15px;
}

.btn-link-tunwalai {
    background-color: #BE9255;
    border-color: #BE9255;
    color: #fff;
}

.btn-link-tunwalai:hover {
    color: #fff;
}


.img-circle {
    border-radius: 50%;
}

.img-cover {
    object-fit: cover;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

.tunya-logo-img {
    width: 100%;
    max-width: 120px;
}

.tunwalai-logo-img {
    width: 100%;
    max-width: 190px;
}

input::placeholder {
    font-family: 'MNPaethai';
    font-size: 20px;
}

textarea::placeholder {
    font-family: 'MNPaethai';
    font-size: 20px;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    margin-bottom: 10px !important;
}

.ql-editor .ql-align-justify {
    text-align: left !important;
    text-indent: 30px;
}

.ql-editor p,
.ql-editor h1,
.ql-editor h2 {
    margin-top: 1.75em !important;
}

p.ql-align-justify {
    text-indent: 1.5em;
}

.wysibb {
    border-radius: 8px;
}

.modal-body {
    padding: 24px 40px 32px 40px;
}

@media (max-width: 576px) {
    .modal-body {
        padding: 16px;
    }

    .btn-close {
        right: -10px;
        top: -10px;
    }

    .col-contact {
        min-width: 190px;
    }

    .pillar-header {
        font-size: 28px;
    }

    .ql-snow .ql-formats {
        margin-bottom: 24px !important;
    }

    .ql-toolbar.ql-snow {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 420px) {
    .main-footer .row.no-gutters {
        flex-direction: column;
    }

    .main-footer {
        padding: 16px 24px;
    }

    .main-footer-link-main h6 {
        margin-top: 16px;
    }
}

.modal-content {
    border: unset;
    border-radius: 16px;
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 5%);
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn {
    margin-left: 16px !important;
}

.wysibb .wysibb-toolbar .wysibb-toolbar-container .wysibb-toolbar-btn:last-child {
    padding-right: 16px;
}

/*Safari issues*/
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}