@import url("/Kinto_Th/Theme.Kinto_Th.css?11374");

/* ===================================================================== */
/*  The following CSS was created using Theme Editor.                    */
/*  To modify this CSS, click "Open Theme Editor".                       */
/* ===================================================================== */

/* ===================================================================== */
/*  Root - CSS Variables                                                 */
/* ===================================================================== */

:root {
    /* Color - Brand */
    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;

    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;

    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;

    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;

    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;

    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;

    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;

    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;

    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #73c982;
    --color-green: #37b24d;
    --color-green-dark: #2f9741;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;

    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;

    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;

    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;

    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #868e96;
    --color-neutral-8: #5c656d;
    --color-neutral-9: #343a40;
    --color-neutral-10: #15181a;

    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #e03131;

    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;

    --color-success-light: #eaf3eb;
    --color-success: #2a843c;

    --color-info-light: #e5f5fc;
    --color-info: #009dde;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #f3f6f8;
    --side-menu-size: 300px;
}


.tag,
.badge,
.btn.Is_Default, 
.Button.Is_Default {
    color: #fff;
}

.en2{
    font-family: 'ToyotaType';
}

.th2{
    font-family: 'DB_Heavent';
    font-size: 160%;
}

.font-noto{
    font-family: 'NotoSansThai';
}

.white-space{
    white-space: nowrap;
}
.form-tooltip{
    width: 100%;
    max-width: unset;
}

.form-tooltip-message-TH{
    font-weight: 600px;
    font-size: 20px;
    line-height: 18px;
    font-family: 'DB_Heavent';
}

.form-tooltip-message-EN{
}

.fontdetail{
    color: #f3f6f8;
    font-size: 30px;
    font-family: "DB_Heavent";
}

.phone .fontdetail{
    color: #f3f6f8;
    font-size: 20px;
    font-family: "DB_Heavent";
}

.phone .detail2{
    display: none;
}

.stepHeader-TH{
    font-family: 'DB_Heavent';
    letter-spacing: 1px;
    max-width: 1300px;
    min-height: 39px;
    padding: 10px;
    font-size: 30px;
    color: #f3f6f8;
    padding: 10px;
}

.justify-centent-center{
    justify-content: center;
}

.stepHeader-EN{
    letter-spacing: 1px;
    max-width: 1300px;
    min-height: 39px;
    padding: 10px;
    font-size: 30px;
    color: #f3f6f8;
    padding: 10px;
    font-size: 22px;
}

.phone .stepHeader-TH{
    font-family: 'DB_Heavent';
    letter-spacing: 1px;
    max-width: 1300px;
    min-height: 39px;
    padding: 10px;
    font-size: 22px;
    color: #f3f6f8;
    padding: 10px;
}

.phone .stepHeader-EN{
    letter-spacing: 1px;
    max-width: 1300px;
    min-height: 39px;
    padding: 10px;
    font-size: 30px;
    color: #f3f6f8;
    padding: 10px;
    font-size: 14px;
}

.display-detail-content{
    padding: 200px 20px 40px 20px;
}

.phone .display-detail-content{
    padding: 180px 20px 40px 20px;
}

/* $4.1.1 - Patterns - Content - Accordion */
.accordion {
    background-color: var(--color-neutral-0);
}

.accordion-item {
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom-width: var(--border-size-none);
}

.accordion-item:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.accordion-item:last-child {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.accordion-item.is--open {
    border-top: var(--border-size-m) solid var(--color-primary);
}

.accordion-item .accordion-item-header {
    -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding-left: 20px;
    letter-spacing: 2px;
    align-items: center;
    font-style: normal;
    font-weight: bold;
    color: black;
}

.accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-semi-bold);
}

.accordion-item .accordion-item-title {
    width: 100%;
}

.accordion-item .accordion-item-icon {
    color: var(--color-primary);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.accordion-item .accordion-item-icon .fa {
    font-size: 24px;
    width: auto;
}

.accordion-item.is--open .accordion-item-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion-item.is--disabled {
    color: var(--color-neutral-7);
    pointer-events: none;
}

.accordion-item.is--disabled .accordion-item-icon {
    color: var(--color-neutral-6);
}

.accordion-item .accordion-item-content {
    display: block;
    overflow: hidden;
}

.accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    height: auto;
    padding: var(--space-none) var(--space-m) var(--space-m);
    visibility: visible;
}

.accordion-item .accordion-item-content.is--animating {
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.phone [class*="ThemeGrid_Width"]:not(.no-responsive) {
    margin: var(--space-none) var(--space-none) var(--space-none) var(--space-none); 
    width: 100%;
}

.Form label.MandatoryLabel:after {
    content: "*";
    color: #EB4820;
    position: absolute;
    padding: 0px 5px 5px 3px;
    font-weight: normal;
    font-size: 15px;
    font-family: 'ToyotaType';
}

.Form input.ReadOnly:not(.Not_Valid),
.Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid) {
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.input, 
textarea.input, 
.select {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-9);
    height: 40px;
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    font-size: 15px;
    font-family: 'ToyotaType';
}

.Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly {
    font-size: 15px;
    font-family: 'ToyotaType';
}


.choices__inner {
    font-size: 15px;
    font-family: 'ToyotaType';
}

.choices__list--multiple .choices__item {
    align-items: center;
    background-color: var(--color-neutral-3);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-3);
    color: var(--color-neutral-9);
    display: inline-flex;
    font-size: 15px;
    font-family: 'ToyotaType';
    font-weight: var(--font-semi-bold);
    height: 32px;
    margin-top: var(--space-xs);
    margin-left: var(--space-xs); 
    padding: var(--space-xs) var(--space-s);
    vertical-align: middle;
    word-break: break-all;  
}


@media only screen and (min-width: 1024px) {
    
}

.grecaptcha-badge { 
    display: none !important; 
}


/* $4.1.1 - Patterns - Content - Accordion */
.accordion {
    background-color: var(--color-neutral-0);
}

.accordion-item {
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-bottom-width: var(--border-size-none);
}

.accordion-item:first-child {
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);
}

.accordion-item:last-child {
    border-bottom-width: var(--border-size-s);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft);
}

.accordion-item.is--open {
    border-top: var(--border-size-m) solid var(--color-primary);
}

.accordion-item .accordion-item-header {
    -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding-left: 20px;
    letter-spacing: 2px;
    align-items: center;
    font-style: normal;
    font-weight: bold;
    color: black;
}

.accordion-item.is--open .accordion-item-header {
    font-weight: var(--font-semi-bold);
}

.accordion-item .accordion-item-title {
    width: 100%;
}

.accordion-item .accordion-item-icon {
    color: var(--color-primary);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.accordion-item .accordion-item-icon .fa {
    font-size: 24px;
    width: auto;
}

.accordion-item.is--open .accordion-item-icon {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.accordion-item.is--disabled {
    color: var(--color-neutral-7);
    pointer-events: none;
}

.accordion-item.is--disabled .accordion-item-icon {
    color: var(--color-neutral-6);
}

.accordion-item .accordion-item-content {
    display: block;
    overflow: hidden;
}

.accordion-item .accordion-item-content,
.accordion-item .accordion-item-content.is--collapsed {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
}

.accordion-item .accordion-item-content.is--expanded {
    height: auto;
    padding: var(--space-none) var(--space-m) var(--space-m);
    visibility: visible;
}

.accordion-item .accordion-item-content.is--animating {
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
}

.phone [class*="ThemeGrid_Width"]:not(.no-responsive) {
    margin: var(--space-none) var(--space-none) var(--space-none) var(--space-none); 
    width: 100%;
}

.Form label.MandatoryLabel:after {
    content: "*";
    color: #EB4820;
    position: absolute;
    padding: 0px 5px 5px 3px;
    font-weight: normal;
    font-size: 15px;
    font-family: 'ToyotaType';
}

.Form input.ReadOnly:not(.Not_Valid),
.Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid) {
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.input, 
textarea.input, 
.select {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-9);
    height: 40px;
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    font-size: 15px;
    font-family: 'ToyotaType';
}

.Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly {
    font-size: 15px;
    font-family: 'ToyotaType';
}


.choices__inner {
    font-size: 24px;
    font-family: 'DB_Heavent';
}

.choices__list--multiple .choices__item {
    align-items: center;
    background-color: var(--color-neutral-3);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-3);
    color: var(--color-neutral-9);
    display: inline-flex;
    font-size: 24px;
    font-family: 'DB_Heavent';
    font-weight: var(--font-semi-bold);
    height: 32px;
    margin-top: var(--space-xs);
    margin-left: var(--space-xs); 
    padding: var(--space-xs) var(--space-s);
    vertical-align: middle;
    word-break: break-all;  
}
.grecaptcha-badge { 
    display: none !important; 
}
.block-popup .btn-container .signup-btn .thai {
    font-size: 22px;
    font-family: 'DB_Heavent';
    width: 100%;
    background-color: #FF785B;
    text-align: center;
    line-height: 37px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    border: unset!important;
}
.whiteinput .Form input.ReadOnly,.whiteinput  .Form textarea.ReadOnly,.whiteinput  .Form select.ReadOnly {
    color: #333;
    font-size: 16px;
    background: #ffffff;
}
/*----------Menu--------*/
.navbar .tap_menu {
    display: flex;
    height: 65px;
    background-color: white;
    align-items: center;
}
.menu_panel {
    margin-left: 5%;
}

.navbar {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #e3e1e1;
}
@media only screen and (min-width: 1024px){
.header_language {
    height: 40px;
    display: none;
}
.header_language {
    background: #00708C;
    height: 0px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 3px;
    display: none;
}
.container_main_wrapper {
    max-width: 1300px;
    height: 100%;
    margin: auto;
}

.navbar {
    background-color: white;
    box-shadow: 0px 2px 90px rgba(0, 0, 0, 0.03);
    z-index: 100;
    position: relative;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: #e3e1e1;
}
.navbar .menu_user_item {
    padding: 1px;
    border-radius: 22px;
    margin: 0 1px;
    letter-spacing: 1px;
    font-weight: bold;
    cursor: pointer;
    line-height: 30px;
    border: 2px solid #007292;
    position: relative;
}
.navbar .menu_panel .menu_item {
    padding: 5px 14px;
    border-radius: 10px;
    margin: 0 1px; 
    letter-spacing: 1px;
    cursor: pointer;
    line-height: 30px;
    text-transform: uppercase;

}
}
@media only screen and (min-width: 1024px){
    .navbar .user_panel {
        padding-right: 2%;
        width: auto !important;
    }
    /*-----------------------------*/

    .button-group label:first-child .btn {
        border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
    }

    .button-group label:last-child .btn {
        border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
    }

    .require::after{
        content: " *";
        color: red;
    }
}

div.os-internal-Popup .os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space, div.os-internal-Popup.os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space {
    height: 0px !important;
    background-color: transparent;
    cursor: default;
}

/*--------------Slider Captcha--------------*/
.Slider-Captcha{
    padding: 0px 20px;
    margin-bottom: 0;
}
.Slider-Captcha .range-slider-values{
    display: none !important;
}

.Slider-Captcha .range-slider-object{
    height: 30px;
}
.Slider-Captcha .range-slider-object:after{
    content:'Swipe to Validate';
    position:absolute;
    color: white;
    top: 0;
    transform: translate(-50%,4px);
}
.Slider-Captcha .noUi-handle{
    border-radius:0;
    height:30px;
    width:30px;
    transform: translate(0px,10px);
    background-color: skyblue;
    border-color: skyblue;
}
.Slider-Captcha .noUi-handle:before{
    border:unset;
}
.Slider-Captcha .noUi-handle:after{
    border-width:1px 1px 0px 0px;
    border-color:white;
    width: 7px;
    height: 7px;
    transform: rotatez(45deg)translate(-2.5px,2.5px);
}

.Consent-modal-PC .modal-wrapper {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-xl);
    max-height: 100%;
    max-width: 100%;
    width: 80%;
    
    text-align: center;
    justify-content: center;
}


.Consent-modal-PC .modal-content {
    overflow-y: auto;
    padding: var(--space-m);
    width: 100%;
    height: auto;
}

.modal-wrapper.MoldalContent-mobile{
    border-radius: 20px;
  
}


.header .Menu_DropDownButton:not(:first-child) {
    margin-left: 0px;
}


.phone .for-reactive-border-menu,
.tablet .for-reactive-border-menu {
    border-color: #e1e2e3;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
}

.for-reactive-border-menu {
    border-width: 0px;
}

.header .Menu_TopMenu.Menu_TopMenuActive {
    color: #6dd5ef !important;
    font-weight: 400 !important;
    border-bottom: none;
 
}

.header .Menu_TopMenu.Menu_TopMenuActive a {
    color: #6dd5ef !important;
    font-weight: 400 !important;
    border-bottom: none;
}

.header .Menu_TopMenu{
    border-bottom: none;
    color: #404040 !important;
}

.header .Menu_TopMenu a{
    border-bottom: none;
    color: #404040 !important;
}

.header .Menu_TopMenu:hover{
    border-bottom: none;
}


/** Mobile Portrait **/
@media screen and (orientation: portrait) and  (max-width:515px){
        .header-top{
    height: 78.5px;
}
    .logo-mobile img{
        height: 55px;
        width: 164px;
        object-fit: cover;
    }
}

.phone .for-reactive-border-menu, .tablet .for-reactive-border-menu {
    border-color: #e1e2e3;
    border-style: solid;
    width: 100%;
    height: 40px;
    background-color: #ffff;
    border-right: 1px solid #F9EEF4;
    padding: 0px 16px 0px 0px;
    font-weight: 600;
    color: #2A4D69;
    display: flex;
    align-items: center;
}

.lang-switch .button-group input[type="radio"]:checked + .btn{
        background-color: #59A2B5 !important;
    color: #FFFFFF;
    width: 65px !important;
    height: 32px !important;
    border-radius: 30px !important;
    box-shadow: 2px 0px 4px 0px #00708D4D;
    border-style: none;
}

.lang-switch .button-group{
    font-size: 16px;
    font-weight: 400;
    background: #D4D7D9;
    border-radius: 40px;
    width: 119px;
}

.lang-switch .button-group label:not(:first-child) .btn{
    border-left: var(--border-size-none);
    background-color: #D4D7D9;
    border-style: none;
    height: 32px !important;
    color: #00708D;
}

.lang-switch .lang .button-group label:first-child .btn, .lang .button-group label:last-child .btn{
    border-radius: 40px;
    width: 100%;
}

.lang-switch .lang .button-group label:first-child .btn{
        background-color: #D4D7D9;
    border-style: none;
    height: 32px !important;
    width: 54px;
}
.register-btn-wrap{
    display: flex;
    justify-content: center;
}


.dateofbirth .input-with-icon-input input,
.box-upload .Form .input.ReadOnly:not(.Not_Valid) {
    position: relative;
    z-index: 2;
    background: transparent;
}