body{
    -webkit-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -moz-text-size-adjust:none;
    text-size-adjust:none;
}

@font-face {
    font-family: 'thonburiregular';
    src: url('../fonts/ThonBuri/thonburi-01-webfont.woff2') format('woff2'), url('../fonts/ThonBuri/thonburi-01-webfont.woff') format('woff'), url('../fonts/ThonBuri/Thonburi-01.ttf') format('truetype'), url('../fonts/ThonBuri/thonburi-01-webfont.svg#thonburiregular') format('svg');
    unicode-range: U+0E00-U+0E7F;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'db_heavent';
    src: url('../fonts/db_heavent_li_v3.2.woff2') format('woff2'), url('../fonts/db_heavent_li_v3.2.woff') format('woff'), url('../fonts/db_heavent_li_v3.2.ttf') format('truetype'), url('../fonts/db_heavent_li_v3.svg#db_heavent') format('svg');
    unicode-range: U+0E00-U+0E7F;
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'db_heavent';
    src: url('../fonts/DB Heavent/db_heavent_med_v3.2.woff2') format('woff2'), url('../fonts/DB Heavent/db_heavent_med_v3.2.woff') format('woff'), url('../fonts/DB Heavent/db_heavent_med_v3.2.ttf') format('truetype');
    unicode-range: U+0E00-U+0E7F;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'db_heavent';
    src: url('../fonts/DB Heavent/db_heavent_bd_v3.2.woff2') format('woff2'), url('../fonts/DB Heavent/db_heavent_bd_v3.2.woff') format('woff'), url('../fonts/DB Heavent/DB Heavent Bd v3.2.ttf') format('truetype');
    unicode-range: U+0E00-U+0E7F;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'futura';
    src: url('../fonts/Futura/futura-medium-01.woff2') format('woff2'), url('../fonts/Futura/futura-medium-01.woff') format('woff'), url('../fonts/Futura/Futura-Medium-01.ttf') format('truetype');
    unicode-range: U+0E00-U+0E7F;
    font-weight: normal;
    font-style: normal;
}

.container {
    padding-left: 5px;
    padding-right: 5px;
}

body.blue {
    background: #011738;
    color: #fff6ef;
    background-image: url('../images/circle-bg.png');
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: center 150px;
    background-attachment: fixed;
}

body.blue h1,
body.blue h2,
body.blue h3,
body.blue h4,
body.blue h5,
body.blue h6,
body.blue p {
    color: #fff6ef;
    margin: 0;
    letter-spacing: 0.7px;
}

body.blue p {
    color: #fff;
    line-height: 22px;
    font-size: 22px;
    font-weight: normal;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: db_heavent,sans-serif;
    line-height: 1em;
}

body,
p {
    line-height: 1.2em;
    font-weight: normal;
}

body.blue a {
    color: yellow;
}

body.blue .whiteBG p {
    color: #000;
    font-size: 16px;
    line-height: 21px;
}

body.blue .whiteBG a {
    color: #fb5474;
}

body.blue .whiteBG li {
    font-size: 16px;
    line-height: 21px;
}

.pink,
body.blue .pink {
    color: #fb5474;
}
.darkBlue{
    color:#011738 !important;
}
body.blue .paragraph {
    font-family: adobe-caslon-pro;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
}

body.blue .paragraph2 {
    font-family: Futura;
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
}

.hparagraph {
    font-family: Futura;
    color: #fb5474;
    font-weight: bold;
    font-size: 14px;
    font-variant: normal;
    font-weight: lighter;
    font-style: normal;
}

.gold {
    color: #b99455;
}

.whiteBG {
    background: #fff;
    color: #000;
}

input.form-control,
select.form-control,
.form-control:disabled {
    padding-left: 0;
    color: #fff6ef !important;
    font-weight: bold;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    caret-color: #fb5474;
}

input.form-control:focus,
select.form-control:focus {
    font-weight: normal;
    color: #fff !important;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    box-shadow: 0 0 0;
}

select.form-control {
    opacity: 1;
}

select.form-control:focus {
    opacity: 1;
}

input.form-control,
select.form-control,
textarea.form-control {
    font-size: 18px;
    padding-bottom: 0;
    padding-top: 12px;
}

select.form-control {
    padding-top: 0;
}

.form-control:disabled {
    opacity: .33;
}

input.form-control:focus,
select.form-control:focus {
    background: transparent;
    color: #fff !important;
}

input.form-control::placeholder,
input.form-control::-ms-input-placeholder,
input.form-control::-ms-input-placeholder {
    color: #fff;
    opacity: .50;
    font-weight: bold;
}

.text-decoration-underline {
    text-decoration: underline;
}

.tt-suggestion {
    color: #000;
}

.tt-hint {
    display: none;
}

.col-form-label {
    opacity: .5;
}

button#agree {
    color: #000;
}

.top-0 {
    top: 0;
}

.img-fluid {
    width: 100%;
}

.transparent {
    background: url("../images/sticky-background.png") repeat bottom center transparent;
    min-height: 200px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
}

.overflow-hidden {
    overflow: hidden;
}

h1 {
    font-size: 48px;
    font-weight: bold;
}

h2 {
    font-size: 40px;
    font-weight: bold;
    line-height: 30px;
}

h3 {
    font-size: 36px;
    font-weight: bold;
    line-height: 30px;
}

h4 {
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
}

h5 {
    font-size: 27px;
    font-weight: bold;
}

h6 {
    font-size: 24px;
    font-weight: bold;
    line-height: 28px;
}

h6.hint {
    font-size: 22px;
    line-height: 24px;
}


/* HIDE RADIO */

[type=radio] {
    opacity: 0;
    width: 0;
    height: 0;
}


/* IMAGE STYLES */

[type=radio]+div {
    color: #808793;
}

[type=radio]:checked+div {
    color: #fff;
}

[type=radio]+div i,
[type=radio]+div img {
    filter: brightness(0) invert(0.7);
    font-size: 4.5em;
}


/* CHECKED STYLES */

[type=radio]:checked+div i,
[type=radio]:checked+div img {
    border: none;
    filter: brightness(0) invert(1);
    font-size: 4.5em;
}

[type=radio]+div {
    border: 2px solid #808793;
    cursor: pointer;
}

[type=radio]:checked+div {
    border: 2px solid #fb5474 !important;
}

#result h6 {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    font-family: futura;
}

#result h6 span {
    color: #808B9C;
}

.border-pink {
    border: 2px solid #fb5474 !important;
}

div.gender {
    border: 2px solid #fb5474;
}

div.gender img {
    border: none;
    filter: brightness(0) invert(1);
}

div.vizcard {
    top: 0;
    right: 0;
}

div.vizcard img {
    width: 100%;
    height: auto;
    max-width: 100px;
}

button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
}

button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

button#next {
    padding-right: 0;
}

button#prev {
    padding-left: 0;
}

button#profile,
button#next,
button#prev,
button#back,
button#hideLogin,
button#submit,
button#privilege,
button#ok {
    font-size: 20px;
    line-height: 30px;
}

button#next i,
button#prev i,
button#ok i {
    font-size: 16px;
}

div#nav-bottom {
    margin-left: -15px;
    margin-right: -15px;
    width: 100%;
}

button.pink.subButton {
    font-size: 22px;
    line-height: 22px;
    font-weight: bold;
}

button.pink,
body.blue button.pink {
    background: #fb5474;
    border: 1px solid #fb5474;
    color: #fff;
}

button.pink:hover,
button.pink:focus {
    background: #fb5474;
}

button.blue {
    background-color: #001738;
    color: #fff;
    border: 1px solid #fb5474;
}

.modal button.pink {
    color: #000;
}

.modal button.pink:hover,
.modal button.pink:focus {
    color: #fff;
}

.input-group .input-group-append {
    max-height: 38px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.input-group input:focus+.input-group-append {
    visibility: visible;
}

.otp .input-group .input-group-append {
    visibility: visible;
}

.otp .input-group .input-group-append span {
    border: none;
    cursor: pointer;
    background: none transparent;
    color: #fff;
}

.font-10 {
    font-size: 18px;
}

.modal,
.modal #myHead {
    color: #000 !important;
}

.viz-desc {
    bottom: 5%;
    left: 3%;
    color: #000;
    font-size: 28px;
}

.viz-word {
    height: 19px;
    width: auto;
    position: relative;
    top: -3px;
}

ol ol {
    list-style-type: upper-roman;
}

.form-control:disabled,
.form-control[readonly] {
    background: transparent !important;
}

input.form-control.input {
    width: 100% !important;
}

label {
    font-size: 16px;
    line-height: 30px;
}

label.error {
    position: absolute;
    bottom: -37px;
    color: #fb5474;
    font-style: italic;
    width: 95%;
    left: 15px;
    right: 0;
    font-size: 16px;
    font-weight: 200;
}

.error-single-line label.error {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    position: relative;
    opacity: 1;
    top: 0 !important;
    left: 0 !important;
    font-size: 16px !important;
}

label#zipcode-error.error {
    bottom: -20px;
    left: 0;
}

label#addressFull-error {
    margin-bottom: 20px
}

label#agree-error.error {
    left: 23px;
    bottom: -33px;
    text-align: left;
}

.radio label.error {
    position: relative;
    bottom: initial;
}

div.mbsc-sc-itm.mbsc-btn-e.mbsc-sc-itm-sel>div,
div.mbsc-sc-itm.mbsc-sc-itm-3d.mbsc-btn-e>div,
div.mbsc-sc-itm.mbsc-btn-e>div {
    visibility: hidden;
}

.border-bottom-white-bottom {
    border-bottom: 1px solid #fff;
    transform: scale(0.5);
    position: absolute;
    left: -50%;
    bottom: 0;
    width: 200%;
    opacity: .38;
}

.height100 {
    height: 100%;
}

.input-group .input-group-text {
    background: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #fff;
}

.input-group .input-group-text i {
    color: #fff;
    opacity: .5;
}


/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-box {
    background-color: transparent;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transform-style: -webkit-preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-box.flip .flip-box-inner {
    transform: rotateY(180deg);
}

.flip-box.flip .viz-desc {
    display: none;
}

.flip-box .rearCard {
    margin: 0px auto 0;
    background: #fff;
    width: 95%;
    bottom: 160px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s linear, opacity 0.5s linear;
}

.flip-box.flip .rearCard {
    visibility: visible;
    opacity: 1;
}


/* Position the front and back side */

.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-box-front {
    background-color: transparent;
    color: black;
}


/* Style the back side */

.flip-box-back {
    /*background-color:#fb5474;*/
    color: white;
    /*transform: rotateY(180deg);*/
}


/*
ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}
*/


/* Create a custom checkbox */

.checkmark {
    position: absolute;
    left: -10px;
    top: 20px;
    height: 25px;
    width: 25px;
    background-color: #eee;
}


/* On mouse-over, add a grey background color */

.checkcontainer:hover input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.checkcontainer input:checked~.checkmark {
    background-color: #fb5474;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.checkcontainer input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.checkcontainer .checkmark:after {
    left: 10px;
    top: 6px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

div#main {
    padding-top: 25px;
}

.headline {
    z-index: 1;
    padding-top: 0px;
}

#current-language {
    color: #fb5474;
    line-height: 1;
    padding-top: 0;
    text-transform: uppercase;
    border: none;
    background: transparent;
    font-size: 25px;
    font-weight: bold;
    font-family: db_heavent, sans-serif;
    width: 60px;
    box-shadow: none;
}

.dropdown-toggle i {
    font-size: 14px;
    margin-left: 5px;
}

.dropdown-toggle::after {
    display: none;
}

.lang-bar {
    right: 10px;
    top: 0;
    z-index: 99;
}

.lang-bar .dropdown-menu {
    padding: 0;
    border-radius: 0;
    margin-top: 0;
}

.lang-bar .dropdown-menu.show {
    min-width: 0;
    right: 0;
}

.lang-bar .dropdown-item {
    padding: 10px 0px;
    width: 60px;
    margin: auto;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    font-family: db_heavent, sans-serif;
}

.lang-bar .dropdown-item:hover {
    background-color: #fb5474;
    color: #fff;
}

body.th button#th-language,
body.en button#en-language,
body.ch button#ch-language {
    display: none;
}

button#ch-language {
    font-size: 14px;
}

h4 .viz-word {
    height: 16px;
    top: -2px;
}

h6 .viz-word {
    height: 14px;
    top: -2px;
}

p .viz-word {
    height: 12px;
    top: 0;
}

body.th .viz-word {
    top: -2px;
}

body.th h4 .viz-word {
    height: 16px;
}

body.th h6 .viz-word {
    height: 14px;
}

body.th p .viz-word {
    height: 12px;
    top: 0;
}

body.blue .headline h2 {
    font-family: futura;
    font-size: 26px;
    line-height: 30px;
}

body.blue.th .headline h2 {
    font-family: db_heavent, sans-serif;
    font-size: 26px;
    line-height: 30px;
}

body.en h2 {
    font-family: futura;
    font-size: 26px;
    line-height: 28px;
}

body.en h4 {
    font-family: adobe-caslon-pro;
    font-size: 20px;
    line-height: 32px;
}

body.en h6 {
    font-family: adobe-caslon-pro;
    font-size: 16px;
    line-height: 28px;
}

body.en h4.hint {
    font-family: futura;
    font-size: 18px;
    line-height: 28px;
}

body.en h6.hint {
    font-family: adobe-caslon-pro;
    font-size: 18px;
    line-height: 26px;
}

body.en h4 .viz-word {
    height: 16px;
    top: -2px;
}

body.en h6 .viz-word {
    height: 14px;
    top: -2px;
}

body.en p .viz-word {
    height: 14px;
    top: -2px;
}

body.en p {
    font-family: adobe-caslon-pro;
    font-size: 18px;
    line-height: 26px;
}

body.en button.pink.subButton {
    font-family: adobe-caslon-pro;
    font-size: 18px;
    line-height: 30px;
}

body.en input.form-control.input {
    font-family: adobe-caslon-pro;
}
body.en button#profile,
body.en button#privilege,
body.en button#next,
body.en button#hideLogin,
body.en button#prev,
body.en button#back,
body.en button#ok,
body.en button#submit {
    font-family: db_heavent;
}

body.ch .lang-bar {
    right: 15px;
}

body.ch h2 {
    font-family: futura;
    font-size: 18px;
    line-height: 28px;
}

body.ch h4 {
    font-family: futura;
    font-size: 20px;
    line-height: 30px;
}

body.ch h6 {
    font-family: futura;
    font-size: 18px;
    line-height: 30px;
}

body.th h4 .viz-word {
    height: 16px;
    top: -2px;
}

body.ch h6 .viz-word {
    height: 14px;
}

body.ch p .viz-word {
    height: 14px;
    top: -2px;
}

body.ch p {
    font-family: futura;
    font-size: 15px;
    line-height: 26px;
}

body.ch button.pink.subButton {
    font-family: futura;
    font-size: 16px;
    line-height: 30px;
}

body.ch #current-language {
    font-size: 16px;
    line-height: 30px;
}

body.ch input.form-control.input {
    font-family: futura;
}
body.ch button#profile,
body.ch button#privilege,
body.ch button#hideLogin,
body.ch button#next,
body.ch button#prev,
body.ch button#back,
body.ch button#ok,
body.ch button#submit {
    font-family: db_heavent;
    font-size: 18px;
}

body.ch .checkmark {
    top: 0;
}

.input-row {
    position: relative;
}

.input-row>label {
    position: absolute;
    top: 8px;
    transition: .3s;
    opacity: .5;
    z-index: -1;
}

.input-row.focus>label {
    top: -14px;
    font-size: 16px;
}

@media(max-width:979px) {
    .viz-desc {
        font-size: 24px;
    }

    .modal .modal-header,
    .modal .modal-body,
    .modal .modal-body ol {
        padding-left: 0;
        padding-right: 0;
    }

    .modal .modal-body ol {
        padding-left: 10px !important;
    }

    .flip-box.flip .rearCard {
        bottom: 155px;
    }
}

@media(max-width:767px) {
    .viz-desc {
        font-size: 22px;
    }

    div.vizcard img {
        max-width: 100px;
    }

    .col-6 {
        word-wrap: break-word;
    }

    .viz-desc {
        left: 5%;
    }

    .flip-box.flip .rearCard {
        bottom: 120px;
    }

    [type=radio]+div i,
    [type=radio]+div img {
        font-size: 2em;
    }

    /* CHECKED STYLES */
    [type=radio]:checked+div i,
    [type=radio]:checked+div img {
        font-size: 2em;
    }

    /*
  body .ap-layout-popup .ap-cont{width:100%;top:unset;bottom:0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  */
}

@media(max-width:440px) {
    div.vizcard {
        display: none;
    }

    .viz-desc {
        font-size: 22px;
    }

    .flip-box.flip .rearCard {
        bottom: 110px;
    }
}

@media(max-width:380px) {
    h6 {
        font-size: 22px;
    }

    .flip-box.flip .rearCard {
        bottom: 90px;
    }
}
.single-line{text-overflow: ellipsis;
    overflow: hidden;
    overflow: hidden;
    white-space: pre;
}
a.active .svg,a:hover .svg{
  fill: #fb5474;
}
@media(min-width:1900px) {
    div.whiteBG.position-absolute{
        left:20%;
        right:20%;
    }
    .checkmark{top:0;}
}
@media(min-width:700px) {
    .checkmark{top:0;}
}