@charset "utf-8";

/*------------------------------------*\
  HELPERS CLASS
\*------------------------------------*/

/* spacing */
@media only screen and (min-width : 320px) {
    /* margin-bottom */
    .mb-xs-0 {
        margin-bottom: 0;
    }

    .mb-xs-5 {
        margin-bottom: 5px;
    }

    .mb-xs-10 {
        margin-bottom: 10px;
    }

    .mb-xs-15 {
        margin-bottom: 15px;
    }

    .mb-xs-20 {
        margin-bottom: 20px;
    }

    .mb-xs-25 {
        margin-bottom: 25px;
    }

    .mb-xs-30 {
        margin-bottom: 30px;
    }

    .mb-xs-35 {
        margin-bottom: 35px;
    }

    .mb-xs-40 {
        margin-bottom: 40px;
    }

    .mb-xs-45 {
        margin-bottom: 45px;
    }

    .mb-xs-50 {
        margin-bottom: 50px;
    }

    /* margin-top */
    .mt-xs-0 {
        margin-top: 0;
    }

    .mt-xs-5 {
        margin-top: 5px;
    }

    .mt-xs-10 {
        margin-top: 10px;
    }

    .mt-xs-15 {
        margin-top: 15px;
    }

    .mt-xs-20 {
        margin-top: 20px;
    }

    .mt-xs-25 {
        margin-top: 25px;
    }

    .mt-xs-30 {
        margin-top: 30px;
    }

    .mt-xs-35 {
        margin-top: 35px;
    }

    .mt-xs-40 {
        margin-top: 40px;
    }

    .mt-xs-45 {
        margin-top: 45px;
    }

    .mt-xs-50 {
        margin-top: 50px;
    }
}

@media only screen and (min-width : 768px) {
    /* margin-bottom */
    .mb-sm-0 {
        margin-bottom: 0;
    }

    .mb-sm-5 {
        margin-bottom: 5px;
    }

    .mb-sm-10 {
        margin-bottom: 10px;
    }

    .mb-sm-15 {
        margin-bottom: 15px;
    }

    .mb-sm-20 {
        margin-bottom: 20px;
    }

    .mb-sm-25 {
        margin-bottom: 25px;
    }

    .mb-sm-30 {
        margin-bottom: 30px;
    }

    .mb-sm-35 {
        margin-bottom: 35px;
    }

    .mb-sm-40 {
        margin-bottom: 40px;
    }

    .mb-sm-45 {
        margin-bottom: 45px;
    }

    .mb-xs-50 {
        margin-bottom: 50px;
    }

    /* margin-top */
    .mt-sm-0 {
        margin-top: 0;
    }

    .mt-sm-5 {
        margin-top: 5px;
    }

    .mt-sm-10 {
        margin-top: 10px;
    }

    .mt-sm-15 {
        margin-top: 15px;
    }

    .mt-sm-20 {
        margin-top: 20px;
    }

    .mt-sm-25 {
        margin-top: 25px;
    }

    .mt-sm-30 {
        margin-top: 30px;
    }

    .mt-sm-35 {
        margin-top: 35px;
    }

    .mt-sm-40 {
        margin-top: 40px;
    }

    .mt-sm-45 {
        margin-top: 45px;
    }

    .mt-sm-50 {
        margin-top: 50px;
    }
}

@media only screen and (min-width : 992px) {
    /* margin-bottom */
    .mb-md-0 {
        margin-bottom: 0;
    }

    .mb-md-5 {
        margin-bottom: 5px;
    }

    .mb-md-10 {
        margin-bottom: 10px;
    }

    .mb-md-15 {
        margin-bottom: 15px;
    }

    .mb-md-20 {
        margin-bottom: 20px;
    }

    .mb-md-25 {
        margin-bottom: 25px;
    }

    .mb-md-30 {
        margin-bottom: 30px;
    }

    .mb-md-35 {
        margin-bottom: 35px;
    }

    .mb-md-40 {
        margin-bottom: 40px;
    }

    .mb-md-45 {
        margin-bottom: 45px;
    }

    .mb-md-50 {
        margin-bottom: 50px;
    }

    /* margin-top */
    .mt-md-0 {
        margin-top: 0;
    }

    .mt-md-5 {
        margin-top: 5px;
    }

    .mt-md-10 {
        margin-top: 10px;
    }

    .mt-md-15 {
        margin-top: 15px;
    }

    .mt-md-20 {
        margin-top: 20px;
    }

    .mt-md-25 {
        margin-top: 25px;
    }

    .mt-md-30 {
        margin-top: 30px;
    }

    .mt-md-35 {
        margin-top: 35px;
    }

    .mt-md-40 {
        margin-top: 40px;
    }

    .mt-md-45 {
        margin-top: 45px;
    }

    .mt-md-50 {
        margin-top: 50px;
    }
}

@media only screen and (min-width : 1200px) {
    /* margin-bottom */
    .mb-lg-0 {
        margin-bottom: 0;
    }

    .mb-lg-5 {
        margin-bottom: 5px;
    }

    .mb-lg-10 {
        margin-bottom: 10px;
    }

    .mb-lg-15 {
        margin-bottom: 15px;
    }

    .mb-lg-20 {
        margin-bottom: 20px;
    }

    .mb-lg-25 {
        margin-bottom: 25px;
    }

    .mb-lg-30 {
        margin-bottom: 30px;
    }

    .mb-lg-35 {
        margin-bottom: 35px;
    }

    .mb-lg-40 {
        margin-bottom: 40px;
    }

    .mb-lg-45 {
        margin-bottom: 45px;
    }

    .mb-lg-50 {
        margin-bottom: 50px;
    }

    /* margin-top */
    .mt-lg-0 {
        margin-top: 0;
    }

    .mt-lg-5 {
        margin-top: 5px;
    }

    .mt-lg-10 {
        margin-top: 10px;
    }

    .mt-lg-15 {
        margin-top: 15px;
    }

    .mt-lg-20 {
        margin-top: 20px;
    }

    .mt-lg-25 {
        margin-top: 25px;
    }

    .mt-lg-30 {
        margin-top: 30px;
    }

    .mt-lg-35 {
        margin-top: 35px;
    }

    .mt-lg-40 {
        margin-top: 40px;
    }

    .mt-lg-45 {
        margin-top: 45px;
    }

    .mt-lg-50 {
        margin-top: 50px;
    }
}

/* no-gutter */
.row.no-gutter > [class^="col-"],
.row.no-gutter > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}

@media only screen and (min-width : 320px) {
    .row.no-gutter-xs > [class^="col-"],
    .row.no-gutter-xs > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (min-width : 768px) {
    .row.no-gutter-sm > [class^="col-"],
    .row.no-gutter-sm > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (min-width : 992px) {
    .row.no-gutter-md > [class^="col-"],
    .row.no-gutter-md > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}

@media only screen and (min-width : 1200px) {
    .row.no-gutter-lg > [class^="col-"],
    .row.no-gutter-lg > [class*=" col-"] {
        padding-right: 0;
        padding-left: 0;
    }
}
/*------------------------------------*\
  END HELPERS CLASS
\*------------------------------------*/

/*------------------------------------*\
  @FONT-FACE
\*------------------------------------*/

/* === DBHELVETHAICAX === */
@font-face {
    font-family: 'DBHelvethaicaX';
    src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.eot');
    src: local('DBHelvethaicaX'), local('DBHelvethaicaX-Regular'), url('../fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.woff') format('woff'), url('../fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.ttf') format('truetype'), url('../fonts/DBHelvethaicaX/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX-55Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-F882;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Italic'), local('DBHelvethaicaX-Italic'), url('../fonts/DBHelvethaicaX/DB Helvethaica X It v3.2.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Light'), local('DBHelvethaicaX-Light'), url('../fonts/DBHelvethaicaX/DB Helvethaica X Li v3.2.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Light Italic'), local('DBHelvethaicaX-Light-Italic'), url('../fonts/DBHelvethaicaX/DB Helvethaica X Li It v3.2.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}


@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Medium'), local('DBHelvethaicaX-Medium'), url('../fonts/DBHelvethaicaX/DB Helvethaica X Med v3.2.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Medium Italic'), local('DBHelvethaicaX-Medium-Italic'), url('../fonts/DBHelvethaicaX/DB Helvethaica X Med It v3.2.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}


@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Bold'), local('DBHelvethaicaX-Bold'), url('../fonts/DBHelvethaicaX/DB Helvethaica X Bd v3.2.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'DBHelvethaicaX';
    src: local('DBHelvethaicaX Bold Italic'), local('DBHelvethaicaX-Bold-Italic'), url('../fonts/DBHelvethaicaX/DB Helvethaica X Bd It v3.2.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}


/* === SOURCE SANS PRO === */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-Regular.eot');
    src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/SourceSansPro/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-Regular.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-It.eot');
    src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('../fonts/SourceSansPro/SourceSansPro-It.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-It.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-It.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-ExtraLight.eot');
    src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url('../fonts/SourceSansPro/SourceSansPro-ExtraLight.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-ExtraLight.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-Light.eot');
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('../fonts/SourceSansPro/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-Light.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-LightIt.eot');
    src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightIt'), url('../fonts/SourceSansPro/SourceSansPro-LightIt.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-LightIt.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-LightIt.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-Semibold.eot');
    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../fonts/SourceSansPro/SourceSansPro-Semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-Semibold.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-SemiboldIt.eot');
    src: local('Source Sans Pro Semibold Italic'), local('SourceSansPro-SemiboldIt'), url('../fonts/SourceSansPro/SourceSansPro-SemiboldIt.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-SemiboldIt.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-SemiboldIt.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro/SourceSansPro-Bold.eot');
    src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('../fonts/SourceSansPro/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro/SourceSansPro-Bold.woff') format('woff'), url('../fonts/SourceSansPro/SourceSansPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* === PUBLICO HEADLINE === */
@font-face {
    font-family: 'Publico';
    src: url('../fonts/PublicoHeadline/PublicoHeadline-Bold.woff2') format('woff2'), url('../fonts/PublicoHeadline/PublicoHeadline-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* === ICOMOON === */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon/icomoon.eot?kbir8s');
    src: url('../fonts/icomoon/icomoon.eot?kbir8s#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?kbir8s') format('truetype'), url('../fonts/icomoon/icomoon.woff?kbir8s') format('woff'), url('../fonts/icomoon.svg?kbir8s#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*------------------------------------*\
  END @FONT-FACE
\*------------------------------------*/

/*------------------------------------*\
  BASES CLASS
\*------------------------------------*/
body {
    font-family: "Source Sans Pro", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.42857;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 0.01em;
}

    body:lang(th) {
        font-family: "DBHelvethaicaX", Helvetica, Arial, sans-serif;
        font-size: 20px;
        line-height: 1.25;
    }

a {
    color: #00008f;
    text-decoration: none;
    transition: color .2s linear;
}

    a:focus,
    a:hover {
        color: #00005b;
        text-decoration: none;
        outline: 0;
    }

.main {
    /*margin-top: 100px;*/
}

@media only screen and (min-width : 992px) {
    .main {
        /*margin-top: 50px;*/
    }
}

/*------------------------------------*\
  END BASES CLASS
\*------------------------------------*/

/*------------------------------------*\
  LOGIN COMPONENTS
\*------------------------------------*/
.popover {
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
}

.popover-content {
    padding: 0;
}

.dropdown-form {
    padding: 10px 0;
}

.dropdown-form__title {
    color: #00008f;
    text-align: center;
    font-weight: 600;
}

    .dropdown-form__title:lang(th) {
        font-size: 22px;
    }

    .dropdown-form__title:lang(en) {
        font-size: 16px;
    }

.dropdown-form__repass {
    display: inline-block;
    vertical-align: top;
}

    .dropdown-form__repass:lang(th) {
        font-size: 18px;
    }

    .dropdown-form__repass:lang(en) {
        font-size: 12px;
    }

.profile {
    padding-bottom: 15px;
}

.profile-figure {
    margin-bottom: 10px;
    padding: 15px 15px 10px;
    background-color: rgb(235, 235, 235);
}

.profile-figure__thumb {
    margin: 0 auto;
}

.profile-figure__name {
    margin-top: 10px;
    text-align: center;
    text-transform: uppercase;
}

/*------------------------------------*\
  END LOGIN COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  HEADER COMPONENTS
\*------------------------------------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    box-shadow: inset 0 -1px 0 0 #f5f5f5;
    background-color: #fff;
    z-index: 30;
}

    .header.is-hidden {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

.header__top {
    display: none;
}

.header__main {
    padding: 12px 0;
}

.header-logo {
    display: block;
    width: 36px;
    height: 36px;
}

.header-language {
    display: none;
}

.header-drawer {
    display: block;
    float: right;
    margin: 7px 0;
    padding: 10px 0 10px 15px;
    border-left: solid 1px #f5f5f5;
    font-size: 30px;
}

.header-drawer__line {
    display: block;
    position: relative;
    height: 2px;
    width: 23px;
    background-color: #f07662;
    transition: .2s;
}

    .header-drawer__line:before,
    .header-drawer__line:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        z-index: 0;
        width: 23px;
        height: 2px;
        transition: .2s;
        background-color: #f07662;
    }

    .header-drawer__line:before {
        top: -8px;
    }

    .header-drawer__line:after {
        top: 8px;
    }

.header-quick {
    display: none;
}

.css-label:lang(th) {
    font-size: 20px !important;
}

.css-label:lang(en) {
    font-size: 14px !important;
}

.css-label-color-black {
    color: #000 !important;
}

.css-mail-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

    .css-mail-checkbox label {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .css-mail-checkbox + label.css-label, .css-mail-checkbox + * + label.css-label {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 18px;
        vertical-align: middle;
        cursor: pointer;
    }

    .css-mail-checkbox:checked + label.css-label, .css-mail-checkbox:checked + * + label.css-label {
        background-position: 0 -15px;
    }


    .css-mail-checkbox.med + label.css-label.med, .css-mail-checkbox.med + * + label.css-label.med {
        padding-left: 22px;
        height: 17px;
        display: inline-block;
        line-height: 17px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 15px;
        vertical-align: middle;
        cursor: pointer;
    }

    .css-mail-checkbox.med:checked + label.css-label.med, .css-mail-checkbox.med:checked + * + label.css-label.med {
        background-position: 0 -17px;
    }

    .css-mail-checkbox.sme + label.css-label.sme, .css-mail-checkbox.sme + * + label.css-label.sme {
        padding-left: 22px;
        height: 16px;
        display: inline-block;
        line-height: 16px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 15px;
        vertical-align: middle;
        cursor: pointer;
    }

    .css-mail-checkbox.sme:checked + label.css-label.sme, .css-mail-checkbox.sme:checked + * + label.css-label.sme {
        background-position: 0 -16px;
    }

    .css-mail-checkbox.lrg + label.css-label.lrg, .css-mail-checkbox.lrg + * + label.css-label.lrg {
        padding-left: 22px;
        height: 20px;
        display: inline-block;
        line-height: 20px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-size: 15px;
        vertical-align: middle;
        cursor: pointer;
    }

    .css-mail-checkbox.lrg:checked + label.css-label.lrg, .css-mail-checkbox.lrg:checked + * + label.css-label.lrg {
        background-position: 0 -20px;
    }

    .css-mail-checkbox.bg-white + label.css-label, .css-mail-checkbox.bg-white + * + label.css-label {
        margin-right: 25px;
        padding-left: 30px;
        height: auto;
        color: #818181;
        font-size: 18px;
        font-weight: normal;
        text-align: left;
        line-height: 20px;
        background-image: url('../images/CheckBox.svg');
        background-position: 0 0;
        background-repeat: no-repeat;
    }

    .css-mail-checkbox.bg-white:checked + label.css-label, .css-mail-checkbox.bg-white:checked + * + label.css-label {
        background-image: url('../images/CheckedBox.svg');
    }

:lang(en) .css-mail-checkbox.bg-white + label.css-label, :lang(en) .css-mail-checkbox.bg-white + * + label.css-label {
}

:lang(th) .css-mail-checkbox.bg-white + label.css-label, :lang(th) .css-mail-checkbox.bg-white + * + label.css-label {
}

.css-mail-checkbox.radio + label.css-label, .css-mail-checkbox.radio + * + label.css-label {
    margin-right: 25px;
    padding-left: 25px;
    height: 20px;
    color: #818181;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    background-image: url('../images/CheckBox.svg');
    background-position: 0 -26px;
}

.css-mail-checkbox.radio:checked + label.css-label, .css-mail-checkbox.radio:checked + * + label.css-label {
    background-position: 0 -20px;
}

:lang(en) .css-mail-checkbox.radio + label.css-label, :lang(en) .css-mail-checkbox.radio + * + label.css-label {
}

:lang(th) .css-mail-checkbox.radio + label.css-label, :lang(th) .css-checkbox.radio + * + label.css-label {
}


@media only screen and (min-width : 992px) {
    .header {
        position: relative;
        z-index: 2;
        height: inherit;
    }

        .header.is-hidden {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }

    .header__top {
        display: block;
        background-color: #fafafa;
    }

    .header__main {
        padding: 0;
    }

    .header-logo {
        width: 54px;
        height: 54px;
        margin-bottom: 20px;
    }

    .header-language {
        display: block;
        margin: 0;
        padding: 0;
        float: right;
        overflow: hidden;
        list-style: none;
    }

    .header-language__item {
        float: left;
    }

    .header-language__link,
    .header-language__link:hover {
        display: block;
        line-height: 40px;
        padding: 0 15px;
        color: #999;
        text-transform: uppercase;
        cursor: pointer;
    }

        .header-language__link:lang(th),
        .header-language__link:lang(en) {
            font-family: "Source Sans Pro", Arial, sans-serif;
            font-size: 14px;
            letter-spacing: .08em;
        }

        .header-language__link.header-language__link--active {
            background-color: #fff;
            color: #00005b;
        }

    .header-drawer {
        display: none;
    }

    .header-quick {
        margin-top: 25px;
        display: block;
        text-transform: uppercase;
        overflow: hidden;
    }

    .header-quick__link {
        display: inline-block;
        vertical-align: top;
        position: relative;
    }

    .header-quick__link__icon {
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -8px;
    }

    .header-quick__link__label {
        padding-left: 25px;
    }
}
/*------------------------------------*\
  END HEADER COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  FOOTER COMPONENTS
\*------------------------------------*/
.footer {
    /*margin-top: 50px;*/
    background-color: #3b3fd8;
    color: #fff;
    position: absolute;
    width: 100%;
}

.footer-block {
}

.footer-block--bottom {
    padding: 15px 0;
    background-color: #3032c1;
}

.footer-social {
    margin: 0;
    padding: 0;
}

.footer-social__title {
    display: none;
    line-height: inherit;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

    .footer-social__title:lang(th) {
        font-size: 22px;
    }

    .footer-social__title:lang(en) {
        font-size: 16px;
    }

.footer-social__list {
    display: table;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0 15px;
    border-bottom: solid 1px #2425aa;
}

.footer-social__list__item {
    width: 33.3%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.footer-social__list__item__link {
    display: inline-block;
    position: relative;
    vertical-align: top;
    min-width: 50px;
    line-height: 50px;
    font-size: 20px;
    transition: opacity .3s linear;
    color: #fff;
}

.footer-social__list__item__icon {
    width: 25px;
}

.footer-column {
}

.footer-column__panel.panel {
    margin: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.footer-column__panel__title {
    display: block;
    position: relative;
    margin: 0;
    padding: 15px 40px 15px 15px;
    border-bottom: solid 1px #2425aa;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
}

    .footer-column__panel__title:before {
        content: "\ea3e";
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        top: 50%;
        right: 20px;
        margin-top: -6px;
        font-size: 12px;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        transition: -webkit-transform .2s ease;
        transition: transform .2s ease;
    }

    .footer-column__panel__title:hover,
    .footer-column__panel__title:focus {
        color: #fff;
    }

    .footer-column__panel__title.collapsed:before {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

.footer-column__panel__content {
    background-color: #3032c1;
    box-shadow: inset 0 0 5px rgba(0,0,0,.3);
}

.footer-column__panel__content__item {
    display: block;
    padding: 10px 20px;
    border-bottom: solid 1px #2425aa;
}

.footer-column__panel__content__link {
    color: #fff;
}

    .footer-column__panel__content__link:hover,
    .footer-column__panel__content__link:focus {
        color: #e5e5e5;
    }

    .footer-column__panel__content__link:lang(th) {
        font-size: 18px;
    }

    .footer-column__panel__content__link:lang(en) {
        font-size: 12px;
    }

.footer-bottom {
    display: table;
    width: 100%;
}

.footer-bottom__block {
    display: table-cell;
    vertical-align: middle;
}

.footer-bottom__block--left {
    width: 30%;
}

.footer-bottom__block--right {
    width: 70%;
}

.footer-language {
    list-style: none;
    text-align: right;
    margin: 0 0 8px;
    padding: 0;
}

.footer-language__item {
    display: inline-block;
    vertical-align: top;
    margin-left: 3px;
    border-left: solid 1px #2425aa;
}

    .footer-language__item:first-child {
        border-left: 0;
        margin-left: 0;
    }

.footer-language__link {
    display: inline-block;
    line-height: 14px;
    padding-left: 6px;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
}

    .footer-language__link:lang(en),
    .footer-language__link:lang(th) {
        font-family: "Source Sans Pro", Arial, sans-serif;
        font-size: 14px;
    }

    .footer-language__link:hover,
    .footer-language__link:focus {
        color: #e5e5e5;
    }

.footer-language__link--active {
    color: #fff;
}

.footer-dbd {
    display: inline-block;
    vertical-align: top;
    max-width: 100px;
    background-color: #fff;
}

.footer-copyright {
    text-align: right;
    margin-bottom: 0;
}

    .footer-copyright:lang(th) {
        font-size: 14px;
    }

    .footer-copyright:lang(en) {
        font-size: 10px;
    }

@media only screen and (min-width : 768px) {
    .footer-block--top {
        padding: 40px 0;
    }

    .footer-social {
        padding: 0 0 30px;
    }

    .footer-social__list {
        padding: 0;
        border-bottom: 0;
    }

    .footer-social__list__item {
        display: block;
        float: left;
        width: auto;
        padding-right: 40px;
    }

    .footer-social__list__item__link {
        min-width: inherit;
        line-height: inherit;
    }

    .footer-column {
        overflow: hidden;
        margin: 0 -15px;
    }

    .footer-column__panel {
        float: left;
        width: 33.3%;
        padding: 0 15px;
    }

    .footer-column__panel__title {
        margin-bottom: 15px;
        padding: 0;
        border-bottom: 0;
        cursor: default;
    }

        .footer-column__panel__title:before {
            display: none;
        }

    .footer-column__panel__content {
        background-color: transparent;
        box-shadow: none;
    }

        .footer-column__panel__content.collapse,
        .footer-column__panel__content.collapsing {
            display: block !important;
            height: auto !important;
        }

    .footer-column__panel__content__item {
        margin-bottom: 10px;
        padding: 0;
        border-bottom: 0;
    }

    .footer-copyright {
    }

        .footer-copyright:lang(th) {
            font-size: 16px;
        }

        .footer-copyright:lang(en) {
            font-size: 12px;
        }
}

@media only screen and (min-width : 992px) {
    .footer-column__panel__title {
    }

        .footer-column__panel__title:lang(th) {
            font-size: 22px;
        }

        .footer-column__panel__title:lang(en) {
            font-size: 16px;
        }

    .footer-column__panel__content__link {
    }

        .footer-column__panel__content__link:lang(th) {
            font-size: 20px;
        }

        .footer-column__panel__content__link:lang(en) {
            font-size: 14px;
        }

    .footer-social__title {
        display: block;
    }
}


/*------------------------------------*\
  FOOTER COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  DRAWER COMPONENTS
\*------------------------------------*/
body {
    height: 100%;
}

.wrapper {
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

    .drawer, .wrapper, .wrapper > * {
        transition: all .25s ease;
    }

.drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 100%;
    right: -270px;
    width: 270px;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #3b3fd8;
    z-index:10;
}
/*
.drawer--active {
    max-height: 500px;
}*/

@media only screen and (min-width : 992px) {
    .drawer {
        background: none;
    }
}

.drawer-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.drawer-visible {
    position: relative;
    overflow: hidden;
}

.is-drawer-top {
    margin-top: 0px;
}

.drawer-visible .drawer,
.drawer-visible .wrapper > * {
    -webkit-transform: translate3d(-270px,0,0);
        transform: translate3d(-270px, 0, 0);
}

.drawer-visible .drawer-overlay {
    display: block;
    background-color: rgba(0,0,0, .7);
}

.drawer-language {
    line-height: 15px;
    margin: 0;
    padding: 22px 20px;
    overflow: hidden;
    background-color: #3032c1;
    text-align: right;
    text-transform: uppercase;
}

.drawer-language__item {
    display: inline-block;
    margin-left: -3px;
    padding: 0 10px;
    vertical-align: top;
    border-right: solid 1px #ccc;
}

    .drawer-language__item:last-child {
        border-right: 0;
    }

.drawer-language__link,
.drawer-language__link:hover {
    cursor: pointer;
    color: rgba(255,255,255,.65);
}

    .drawer-language__link.drawer-language__link--active {
        color: #fff;
    }

.drawer-menu {
}

.drawer-menu__item {
    border-bottom: 1px solid #456eaf;
}

.drawer-menu__link {
    position: relative;
    padding: 15px 20px;
    display: block;
    color: #fff;
    overflow: hidden;
}

    .drawer-menu__link:hover {
        color: rgba(255, 255,255, .65);
    }

.drawer-menu__link__icon {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 18px;
    margin-top: -8px;
}

.drawer-menu__link__label {
    display: block;
    padding-left: 35px;
   /* text-transform: uppercase;*/
}

@media only screen and (min-width : 992px) {
    .drawer-visible .drawer,
    .drawer-visible .wrapper > * {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .drawer-visible .drawer-overlay {
        background: 0;
    }
}
/*------------------------------------*\
  END DRAWER COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  FORM COMPONENTS
\*------------------------------------*/
.c-form {
    background-color: #fff;
}

.c-form--login {
    padding: 15px;
    border: solid 1px #e5e5e5;
    box-shadow: 0px 20px 20px #344c69;
}

.c-form__title {
    margin: 0 0 25px;
    background-color: #f0f0f0;
    line-height: 45px;    
    text-transform: uppercase;
    font-weight: 600;
}

    .c-form__title:lang(th) {
        font-size: 24px;
    }

    .c-form__title:lang(en) {
        font-size: 18px;
    }

.c-form__title--login {
    margin: -15px -15px 20px;
}

.c-form-group {
}

.c-form-group__label {
    margin-bottom: 4px;
    font-weight: 400;
    /*    text-transform: uppercase;*/
}

    .c-form-group__label:lang(th) {
        font-size: 18px;
    }

    .c-form-group__label:lang(en) {
        font-size: 12px;
    }

.c-form-control {
    height: 40px;
    padding: 5px 20px 5px 15px;
    border-radius: 0;
    border-color: #ccc;
    color: #999;
    -webkit-box-shadow: none;
    box-shadow: none;
    resize: none;
}

    .c-form-control:lang(th) {
        font-size: 20px;
    }

    .c-form-control:lang(en) {
        font-size: 14px;
    }

    .c-form-control:focus {
        color: #00008f;
        border-color: #00008f;
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    /* Remove IE10's “clear field” X button on certain inputs */
    .c-form-control::-ms-clear {
        width: 0;
        height: 0;
    }

    .c-form-control-otp:lang(th) {
        font-size: 26px;
        font-weight:bold;
    }

.c-form-control-otp:lang(en) {
    font-size: 20px;
    font-weight: bold;
}

.c-form__repass {
    display: inline-block;
    vertical-align: top;
}

.c-form__panel {
    margin: 0 -15px -15px;
    padding: 15px 15px 15px;
    overflow: hidden;
    background-color: #e5e5e5;
}

/*------------------------------------*\
  END FORM COMPONENTS
\*------------------------------------*/
/*------------------------------------*\
  INPUT VALIDATEION
\*------------------------------------*/
.field-validation-success {
    color: #00adc6;
}
.field-validation-error {
    color: #f00 !important;
}

.field-validation-valid {
    display: none !important;
}

.input-validation-error {
    border: 1px solid #f00 !important;
    background-color: #fee !important;
}

.validation-summary-errors {
    font-weight: bold !important;
    color: #f00 !important;
}

.validation-summary-valid {
    display: none !important;
}
/*------------------------------------*\
  END INPUT VALIDATEION
\*------------------------------------*/


/*------------------------------------*\
  BUTTON COMPONENTS
\*------------------------------------*/
.c-button {
    display: inline-block;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    border-radius: 0;
    padding: 0 20px;
    color: #fff;
    background-color: #00008f;
    /*    text-transform: uppercase;*/
    outline: none;
    z-index: 0;
    cursor: pointer;
    border: 0;
    font-weight: 100;
    transition: color 0.3s, background-color 0.3s;
    text-align: center;
    letter-spacing: 0em;
}

    .c-button:after {
        content: '';
        position: absolute;
        z-index: -1;
        transition: width 0.3s, opacity 0.3s;
        width: 0;
        height: 530px;
        top: 50%;
        left: 50%;
        opacity: 0;
        background: #00005b;
        -ms-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
        transform: translate3d(-50%, -50%, 0) rotate(45deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .c-button:hover,
    .c-button:focus {
        color: #fff !important;
    }

        .c-button:hover:after {
            width: 120%;
            opacity: 1;
        }

    .c-button:lang(th) {
        font-size: 20px;
    }

    .c-button:lang(en) {
        font-size: 14px;
    }

    .c-button:disabled {
        background-color: #A0A0A0 !important;
    }

        .c-button:disabled:after {
            background-color: #A0A0A0 !important;
        }

.c-button--sm,
.c-button--sm.c-button--icon:before {
    height: 30px;
    line-height: 30px;
}

    .c-button--sm:lang(th) {
        font-size: 18px;
    }

    .c-button--sm:lang(en) {
        font-size: 12px;
    }

.c-button--lg,
.c-button--lg.c-button--icon:before {
    height: 56px;
    line-height: 56px;
}

    .c-button--lg:lang(th) {
        font-size: 22px;
    }

    .c-button--lg:lang(en) {
        font-size: 16px;
    }

.c-button--full {
    width: 100%;
}

.c-button--danger {
    background-color: #f07662;
}

    .c-button--danger:after {
        background-color: #ec4d33;
    }

.c-button--success {
    background-color: #449d44;
}

    .c-button--success:after {
        background-color: #398439;
    }

.c-button--icon:before {
    float: right;
    margin-left: 15px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 38px;
    font-size: 14px;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.c-button--icon-left:before {
    float: left;
    margin: 0 15px 0 0;
}

.c-button--arrow-right:before {
    content: "\ea3c";
}

.c-button--download:before {
    content: "\e9c5";
}

.c-button--arrow-right:hover:before {
    -webkit-animation: animate-arrow-right 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    animation: animate-arrow-right 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.c-button--checkmark:before {
    content: "\ea10";
}

.c-button--size-md {
    min-width: 160px;
}

.c-button--secondary {
    color: #00008f;
    background-color: transparent;
    -webkit-box-shadow: inset 2px 2px 0px 0px #00008f, inset -2px -2px 0px 0px #00008f;
    -moz-box-shadow: inset 2px 2px 0px 0px #00008f, inset -2px -2px 0px 0px #00008f;
    box-shadow: inset 2px 2px 0px 0px #00008f, inset -2px -2px 0px 0px #00008f;
}

    .c-button--secondary:after {
        background-color: #00005b;
    }

    .c-button--secondary:hover {
        color: #fff;
        -webkit-box-shadow: inset 2px 2px 0px 0px #00005b, inset -2px -2px 0px 0px #00005b;
        -moz-box-shadow: inset 2px 2px 0px 0px #00005b, inset -2px -2px 0px 0px #00005b;
        box-shadow: inset 2px 2px 0px 0px #00005b, inset -2px -2px 0px 0px #00005b;
    }

.c-button-only-icon {
    height: 40px !important;
    padding: 0 18px;
    border-width: 1px;
}

.c-button-only-icon__icon:before {
    position: relative;
    top: 10px;
    font-size: 14px;
}
/*------------------------------------*\
  END BUTTON COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  CHECKBOX & RADIO COMPONENTS
\*------------------------------------*/
.btn-checkbox input[type="checkbox"],
.btn-radio input[type="checkbox"],
.btn-checkbox input[type="radio"],
.btn-radio input[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    .btn-checkbox input[type="checkbox"]:focus + label:before,
    .btn-radio input[type="checkbox"]:focus + label:before,
    .btn-checkbox input[type="checkbox"]:hover + label:before,
    .btn-radio input[type="checkbox"]:hover + label:before,
    .btn-checkbox input[type="checkbox"]:focus + * + label:before,
    .btn-radio input[type="checkbox"]:focus + * + label:before,
    .btn-checkbox input[type="checkbox"]:hover + * + label:before,
    .btn-radio input[type="checkbox"]:hover + * + label:before {
        border-color: #00008f;
        background-color: #f2f2f2;
    }


    .btn-checkbox input[type="radio"]:focus + label:before,
    .btn-radio input[type="radio"]:focus + label:before,
    .btn-checkbox input[type="radio"]:hover + label:before,
    .btn-radio input[type="radio"]:hover + label:before,
    .btn-checkbox input[type="radio"]:focus + label:after,
    .btn-radio input[type="radio"]:focus + label:after,
    .btn-checkbox input[type="radio"]:hover + label:after,
    .btn-radio input[type="radio"]:hover + label:after,
    .btn-checkbox input[type="radio"]:focus + * + label:before,
    .btn-radio input[type="radio"]:focus + * + label:before,
    .btn-checkbox input[type="radio"]:hover + * + label:before,
    .btn-radio input[type="radio"]:hover + * + label:before,
    .btn-checkbox input[type="radio"]:focus + * + label:after,
    .btn-radio input[type="radio"]:focus + * + label:after,
    .btn-checkbox input[type="radio"]:hover + * + label:after,
    .btn-radio input[type="radio"]:hover + * + label:after {
        border-color: #00008f;
    }

    .btn-checkbox input[type="radio"]:focus + label:after,
    .btn-radio input[type="radio"]:focus + label:after,
    .btn-checkbox input[type="radio"]:hover + label:after,
    .btn-radio input[type="radio"]:hover + label:after,
    .btn-checkbox input[type="radio"]:focus + * + label:after,
    .btn-radio input[type="radio"]:focus + * + label:after,
    .btn-checkbox input[type="radio"]:hover + * + label:after,
    .btn-radio input[type="radio"]:hover + * + label:after {
        background-color: #ccc;
    }

    .btn-checkbox input[type="checkbox"]:active + label:before,
    .btn-radio input[type="checkbox"]:active + label:before,
    .btn-checkbox input[type="radio"]:active + label:before,
    .btn-radio input[type="radio"]:active + label:before,
    .btn-checkbox input[type="checkbox"]:active + * + label:before,
    .btn-radio input[type="checkbox"]:active + * + label:before,
    .btn-checkbox input[type="radio"]:active + * + label:before,
    .btn-radio input[type="radio"]:active + * + label:before {
        transition-duration: 0s;
    }

    .btn-checkbox input[type="checkbox"] + label,
    .btn-radio input[type="checkbox"] + label,
    .btn-checkbox input[type="radio"] + label,
    .btn-radio input[type="radio"] + label,
    .btn-checkbox input[type="checkbox"] + * + label,
    .btn-radio input[type="checkbox"] + * + label,
    .btn-checkbox input[type="radio"] + * + label,
    .btn-radio input[type="radio"] + * + label {
        position: relative;
        padding-left: 22px;
        vertical-align: top;
        font-weight: normal;
        user-select: none;
        white-space: nowrap;
        cursor: pointer;
    }

        .btn-checkbox input[type="checkbox"] + label:before,
        .btn-radio input[type="checkbox"] + label:before,
        .btn-checkbox input[type="radio"] + label:before,
        .btn-radio input[type="radio"] + label:before,
        .btn-checkbox input[type="checkbox"] + * + label:before,
        .btn-radio input[type="checkbox"] + * + label:before,
        .btn-checkbox input[type="radio"] + * + label:before,
        .btn-radio input[type="radio"] + * + label:before {
            box-sizing: content-box;
            content: '';
            color: #00008f;
            position: absolute;
            top: 50%;
            left: 0;
            width: 15px;
            height: 15px;
            margin-top: -9px;
            border: solid 1px #999;
            text-align: center;
            transition: all 0.3s ease;
        }

        .btn-checkbox input[type="checkbox"] + label:after,
        .btn-radio input[type="checkbox"] + label:after,
        .btn-checkbox input[type="radio"] + label:after,
        .btn-radio input[type="radio"] + label:after,
        .btn-checkbox input[type="checkbox"] + * + label:after,
        .btn-radio input[type="checkbox"] + * + label:after,
        .btn-checkbox input[type="radio"] + * + label:after,
        .btn-radio input[type="radio"] + * + label:after {
            box-sizing: content-box;
            content: '';
            position: absolute;
            top: 50%;
            left: 4px;
            width: 10px;
            height: 10px;
            margin-top: -5px;
            transition: all 0.3s ease-out;
        }

        .btn-checkbox input[type="checkbox"] + label:after,
        .btn-radio input[type="checkbox"] + label:after,
        .btn-checkbox input[type="checkbox"] + * + label:after,
        .btn-radio input[type="checkbox"] + * + label:after {
            background-color: #00008f;
            transform: scale(0);
            transform-origin: 50%;
        }

        .btn-checkbox input[type="radio"] + label:after,
        .btn-radio input[type="radio"] + label:after,
        .btn-checkbox input[type="radio"] + * + label:after,
        .btn-radio input[type="radio"] + * + label:after {
            left: 5px;
            width: 5px;
            height: 5px;
            margin-top: -4px;
            border: solid 1px #999;
            background-color: transparent;
        }

    .btn-checkbox input[type="checkbox"]:disabled + label:before,
    .btn-radio input[type="checkbox"]:disabled + label:before,
    .btn-checkbox input[type="radio"]:disabled + label:before,
    .btn-radio input[type="radio"]:disabled + label:before,
    .btn-checkbox input[type="checkbox"]:disabled + * + label:before,
    .btn-radio input[type="checkbox"]:disabled + * + label:before,
    .btn-checkbox input[type="radio"]:disabled + * + label:before,
    .btn-radio input[type="radio"]:disabled + * + label:before {
        border-color: #cccccc;
    }

    .btn-checkbox input[type="checkbox"]:disabled:focus + label:before,
    .btn-radio input[type="checkbox"]:disabled:focus + label:before,
    .btn-checkbox input[type="radio"]:disabled:focus + label:before,
    .btn-radio input[type="radio"]:disabled:focus + label:before,
    .btn-checkbox input[type="checkbox"]:disabled:hover + label:before,
    .btn-radio input[type="checkbox"]:disabled:hover + label:before,
    .btn-checkbox input[type="radio"]:disabled:hover + label:before,
    .btn-radio input[type="radio"]:disabled:hover + label:before,
    .btn-checkbox input[type="checkbox"]:disabled:focus + * + label:before,
    .btn-radio input[type="checkbox"]:disabled:focus + * + label:before,
    .btn-checkbox input[type="radio"]:disabled:focus + * + label:before,
    .btn-radio input[type="radio"]:disabled:focus + * + label:before,
    .btn-checkbox input[type="checkbox"]:disabled:hover + * + label:before,
    .btn-radio input[type="checkbox"]:disabled:hover + * + label:before,
    .btn-checkbox input[type="radio"]:disabled:hover + * + label:before,
    .btn-radio input[type="radio"]:disabled:hover + * + label:before {
        background-color: inherit;
    }

    .btn-checkbox input[type="checkbox"]:disabled:checked + label:before,
    .btn-radio input[type="checkbox"]:disabled:checked + label:before,
    .btn-checkbox input[type="radio"]:disabled:checked + label:before,
    .btn-radio input[type="radio"]:disabled:checked + label:before,
    .btn-checkbox input[type="checkbox"]:disabled:checked + * + label:before,
    .btn-radio input[type="checkbox"]:disabled:checked + * + label:before,
    .btn-checkbox input[type="radio"]:disabled:checked + * + label:before,
    .btn-radio input[type="radio"]:disabled:checked + * + label:before {
        background-color: #cccccc;
    }

    .btn-checkbox input[type="checkbox"] + label:after,
    .btn-radio input[type="checkbox"] + label:after,
    .btn-checkbox input[type="checkbox"] + * + label:after,
    .btn-radio input[type="checkbox"] + * + label:after {
        background-color: transparent;
    }

    .btn-checkbox input[type="radio"]:checked + label:before,
    .btn-radio input[type="radio"]:checked + label:before,
    .btn-checkbox input[type="radio"]:checked + * + label:before,
    .btn-radio input[type="radio"]:checked + * + label:before {
        animation: borderscale 300ms ease-in;
        background-color: white;
    }

    .btn-checkbox input[type="radio"]:checked + label:after,
    .btn-radio input[type="radio"]:checked + label:after,
    .btn-checkbox input[type="radio"]:checked + * + label:after,
    .btn-radio input[type="radio"]:checked + * + label:after {
        background-color: #00008f;
    }

    .btn-checkbox input[type="radio"] + label:before,
    .btn-radio input[type="radio"] + label:before,
    .btn-checkbox input[type="radio"] + label:after,
    .btn-radio input[type="radio"] + label:after,
    .btn-checkbox input[type="radio"] + * + label:before,
    .btn-radio input[type="radio"] + * + label:before,
    .btn-checkbox input[type="radio"] + * + label:after,
    .btn-radio input[type="radio"] + * + label:after {
        border-radius: 50%;
    }

    .btn-checkbox input[type="checkbox"]:checked + label:before,
    .btn-radio input[type="checkbox"]:checked + label:before,
    .btn-checkbox input[type="checkbox"]:checked + * + label:before,
    .btn-radio input[type="checkbox"]:checked + * + label:before {
        animation: borderscale 0.2s ease-in;
        background: #00008f;
    }

    .btn-checkbox input[type="checkbox"]:checked + label:after,
    .btn-radio input[type="checkbox"]:checked + label:after,
    .btn-checkbox input[type="checkbox"]:checked + * + label:after,
    .btn-radio input[type="checkbox"]:checked + * + label:after {
        transform: rotate(-45deg) scale(1);
    }

.btn-checkbox-2 input[type=checkbox] {
    display: none;
}

    .btn-checkbox-2 input[type=checkbox] + label, .btn-checkbox-2 input[type=checkbox] + * + label {
        padding: 0 0 0 0px;
        background: url("../images/does-not-checked.png") no-repeat;
        height: 30px;
        width: 30px;
        display: inline-block;
        background-size: 100%;
    }

    .btn-checkbox-2 input[type=checkbox]:checked + label, .btn-checkbox-2 input[type=checkbox]:checked + * + label {
        background: url("../images/checked.png") no-repeat;
        height: 30px;
        width: 30px;
        display: inline-block;
        background-size: 100%;
    }

@keyframes borderscale {
    50% {
        box-shadow: 0 0 0 2px #00008f;
    }
}
/*------------------------------------*\
  END CHECKBOX & RADIO COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  LANDING PAGE
\*------------------------------------*/
.product {
}

.product-table {
}

.product-panel {
    position: relative;
    margin-bottom: 15px;
    padding: 20px 0;
    background-color: #e6e6e6;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    box-shadow: 0 1px 8px rgba(0,0,0,.43);
}

    .product-panel:last-child {
        margin-bottom: 0;
    }

    .product-panel:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .product-panel.product-panel--ta {
        background-image: url(../images/background_ta.jpg);
    }

    .product-panel.product-panel--home {
        background-image: url(../images/background_SmartHomeCondo.jpg);
    }

    .product-panel.product-panel--pa {
        background-image: url(../images/background_pa.jpg);
    }

    .product-panel.product-panel--motor {
        background-image: url(../images/background_motor.jpg);
    }

    .product-panel.product-panel--health {
        background-image: url(../images/background_health.jpg);
    }

.product-panel__inner {
    position: relative;
    z-index: 1;
}

.product-panel__title {
    margin: 20px 0 10px;
    font-weight: 600;
}

    .product-panel__title:lang(th) {
        font-size: 26px;
        line-height: 26px;
    }

    .product-panel__title:lang(en) {
        font-size: 20px;
        line-height: 20px;
    }

.product-panel__thumb {
    display: block;
}

.product-panel__thumb__icon {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}


.product-panel__description {
    margin: 0;
    background: rgba(255,255,255, 0.7);
    padding: 10px 20px;
}

    .product-panel__description:lang(th) {
        font-size: 18px;
    }

    .product-panel__description:lang(en) {
        font-size: 12px;
    }

.product-panel__button {
    margin-top: 15px;
    text-align: center;
}

@media only screen and (min-width : 768px) {
    .product-table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        box-shadow: 0 1px 8px rgba(0,0,0,.43);
    }

    .product-panel {
        display: table-cell;
        width: 20%;
        margin-bottom: 0;
        vertical-align: bottom;
        padding: 20px 0 0;
        background-size: auto 50%;
        box-shadow: none;
        border: solid 1px #e5e5e5;
        transition: all .2s ease-in-out;
    }

        .product-panel:hover {
            position: relative;
            transform: scale(1.05);
            z-index: 2;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
        }

        .product-panel:before {
            display: block;
            position: static;
            height: 250px;
            background-color: transparent;
        }

    .product-panel__inner {
        background-color: #fff;
        padding: 10px;
    }

    .product-panel__title {
        display: table;
        width: 100%;
        min-height: 52px;
        margin: 5px 0 10px;
    }

    .product-panel__title__link {
        display: table-cell;
        vertical-align: middle;
    }

    .product-panel__thumb {
    }

    .product-panel__thumb__icon {
        display: inline-block;
        width: 120px;
        height: 120px;
        margin-top: -60px;
        border: 20px solid #fff;
        border-radius: 50%;
        transition: box-shadow .2s linear;
    }

    .product-panel__thumb:hover .product-panel__thumb__icon {
        box-shadow: 0 0 10px 5px #00008f;
    }

    .product-panel__description {
        padding: 0 0 70px;
    }

    .product-panel__button {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        margin-bottom: 20px;
        height: 40px;
    }
}

/*------------------------------------*\
  END LANDING PAGE
\*------------------------------------*/

/*------------------------------------*\
  ERROR PAGE
\*------------------------------------*/
.error-page {
}

.error-page__icon {
    display: block;
    width: 30%;
    max-width: 100px;
    margin: 0 auto 30px;
}

.error-page__title {
    color: #233880;
    font-weight: 600;
    margin: 0 0 10px;
}

    .error-page__title:lang(th) {
        font-size: 28px;
        line-height: 1.1;
    }

    .error-page__title:lang(en) {
        font-size: 22px;
        line-height: 1.42857143;
    }

.error-page__detail {
}

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

    .error-page__title {
    }

        .error-page__title:lang(th) {
            font-size: 36px;
        }

        .error-page__title:lang(en) {
            font-size: 28px;
        }

    .error-page__detail {
    }

        .error-page__detail:lang(th) {
            font-size: 22px;
        }

        .error-page__detail:lang(en) {
            font-size: 18px;
        }
}

/*------------------------------------*\
  END ERROR PAGE
\*------------------------------------*/

/*------------------------------------*\
  START TYPOGRAPHY
\*------------------------------------*/

.typo48 {
    font-family: 'Publico', 'Source Sans Pro', Arial, sans-serif;
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    letter-spacing: 0.02em;
}

    .typo48:lang(th) {
        font-family: "DBHelvethaicaX", Helvetica, Arial, sans-serif;
        font-size: 36px;
    }

@media(min-width: 768px) {
    .typo48 {
        font-size: 46px;
        line-height: 52px;
    }

        .typo48:lang(th) {
            font-size: 52px;
        }
}

@media(min-width: 992px) {
    .typo48 {
        font-size: 48px;
        line-height: 54px;
    }

        .typo48:lang(th) {
            font-size: 54px;
        }
}

/*------------------------------------*\
  END TYPOGRAPHY
\*------------------------------------*/

/*------------------------------------*\
  START E-COUPON PROMOTION
\*------------------------------------*/

.ecoupon {
    text-align: center;
}

    .ecoupon .ecoupon__heading {
        margin: 0 0 30px;
        color: #00008f;
        text-transform: uppercase;
    }

    .ecoupon .ecoupon__image {
        max-width: 100%;
        height: auto;
    }

    .ecoupon .ecoupon__footer {
        margin-top: 30px;
    }

    .ecoupon .ecoupon__c-button {
        min-width: 180px;
    }

@media(min-width: 992px) {
    .ecoupon {
    }

        .ecoupon .ecoupon__heading {
            margin-bottom: 50px;
        }

        .ecoupon .ecoupon__footer {
            margin-top: 50px;
        }
}

/*------------------------------------*\
  END E-COUPON PROMOTION
\*------------------------------------*/


/*------------------------------------*\
  START CUSTOMER PORTAL REGISTER
\*------------------------------------*/

.c-form__heading {
    color: #5F5F5F;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.c-form__register--bg {
    background-color: #F5F5F5 !important;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 30px;
}

.container__register {
    padding: 20px;
}

.container__register--white {
    background-color: #fff;
}

.c-form__title--color {
    color: #00008F;
}

.element__center {
    display: flex;
    justify-content: center;
}

.require__field {
    color: red;
    font-weight: bold;
}

.text-transform-none {
    text-transform:none;
}


.input-date-wrapper {
    position: relative;
}

    .input-date-wrapper:before {
        font-family: "Font Awesome 5 Free";
        content: "\f073";
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: #999999;
        font-size: 18px;
        padding-right: 0.5em;
        position: absolute;
        top: 10px;
        right: 0;
        cursor:pointer;
    }

.clickable {
    cursor: pointer;
}

.c-formcontrol__textbox--bg:read-only {
    background-color: #fff !important;
}
/*------------------------------------*\
  END CUSTOMER PORTAL REGISTER
\*------------------------------------*/
/*------------------------------------*\
  START CUSTOMER PORTAL SIGNIN
\*------------------------------------*/
.container__login {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media only screen and (min-width : 320px) {
    .container__login {
        padding-top: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

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

    .container__login {
        padding-top: 50px;
        padding-left: 150px;
        padding-right: 150px;
    }
}

@media only screen and (min-width : 992px) {
    .container__login {
        padding-left: 225px;
        padding-right: 225px;
    }
}


@media only screen and (min-width : 1200px) {
    .container__login {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 5em !important;
        margin-right: 10em !important;
        width: 450px;
        background-color: #fff;
        margin-bottom: 5em !important;
        border-radius: 6px;
    }


    .c-form__login--bg {
        background-image: url('../images/background_customperportal.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        max-width: 1920px;
        min-height: 1070px;
        width: 100%;
        height: 100%;
        background-position: center;
    }
}

.c-button--facebook {
    background-color: #4267B2;
}
/*------------------------------------*\
  END CUSTOMER PORTAL SIGNIN
\*------------------------------------*/

/*------------------------------------*\
  START CUSTOMER PORTAL DASHBOARD
\*------------------------------------*/

.dashboard {
    display: grid;
    grid-template-columns: 220px repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: 50px auto auto;
    grid-template-areas:
        "dashboard__menu dashboard__summary"
        "dashboard__menu dashboard__content"
        "dashboard__menu2 dashboard__banner";
    min-height: 768px;
    height: 100%;
    margin: 25px auto;
    max-width: 1100px;
}


.dashboard--update-account {
    grid-template-areas:
        "dashboard__menu dashboard__content"
        "dashboard__menu dashboard__content"
        "dashboard__menu2 dashboard__content" !important;
}

@media only screen and (max-width : 992px) {
    .dashboard {
        margin: 25px auto;
        grid-template-columns: auto;
        grid-template-rows: 50px auto auto;
        grid-template-areas:
            "dashboard__summary"
            "dashboard__content"
            "dashboard__banner";
        padding-top: 30px;
    }


    .dashboard--update-account {
        grid-template-areas:
            "dashboard__content"
            "dashboard__content"
            "dashboard__content" !important;
    }

        .dashboard--update-account > .dashboard__content {
            background-color: #F5F5F5;
        }

    .dashboard__menu {
        visibility: hidden;
        display: none;
    }

    .dashboard__menu2 {
        visibility: hidden;
        display: none;
    }
}


.dashboard > * {
    padding: 5px 10px;
}

.dashboard__summary {
    grid-area: dashboard__summary;
    background-color: #fff;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 20px;
}

.dashboard__menu {
    display: flex;
    grid-area: dashboard__menu;
    background-color: #00008f;
    /*justify-content: center;*/
    color: #fff;
    /*height: 100%;*/
    justify-content: flex-start;
    flex-direction: column;
    /*align-items: center;*/
}

    .dashboard__menu:lang(en) {
        font-size: 20px;
    }

    .dashboard__menu:lang(th) {
        font-size: 25px;
    }

    .dashboard__menu a {
        color: #fff;
        display: flex;
        align-items: center;
        padding-left: 40px;
        min-height: 40px;
    }

        .dashboard__menu a.active {
            background-color: #3032c1;
            border-radius: 10px;
        }

.menu__icon {
    width: 40px;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu__text {
    /*display: inline-block;
    width: 130px;*/
}

.dashboard__menu2 {
    display: flex;
    grid-area: dashboard__menu2;
    background-color: #00008f;
    /*justify-content: center;*/
    color: #fff;
    /*height: 100%;*/
    justify-content: flex-end;
    flex-direction: column;
    /*align-items: center;*/
}

    .dashboard__menu2:lang(en) {
        font-size: 20px;
    }

    .dashboard__menu2:lang(th) {
        font-size: 25px;
    }

    .dashboard__menu2 a {
        color: #fff;
        display: flex;
        align-items: center;
        padding-left: 20px;
        height: 40px;
    }

        .dashboard__menu2 a.active {
            background-color: #3032c1;
            border-radius: 10px;
        }


.dashboard__content {
    display: flex;
    grid-area: dashboard__content;
    align-items: center;
    background-color: #fff;
    flex-direction: column;
}

.content__policy {
    border-color: #eaeaea;
    border-style: solid;
    border-width: 1px;
    width: 98%;
    padding: 10px;
    margin: 10px;
    margin-bottom: 0px;
}

.collapsible__content--dashboard {
    width: 98%;
    margin-top: 0px;
    background-color: rgb(245, 245, 245);
    max-height: 159px;
}

.dashboard__banner {
    grid-area: dashboard__banner;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.content__icon--circle {
    height: 50px;
    width: 50px;
    background-color: #00008F;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.content__inforce {
    width: 100px;
    background-color: #0ece0e;
    border-radius: 10px;
    text-align: center;
    color: #fff;
}

.content__expired {
    width: 100px;
    background-color: #EC4D33;
    border-radius: 10px;
    text-align: center;
    color: #fff;
}

.content__benefit {
    background-color: #3B3FD8;
    border-radius: 5px;
    margin-top: 25px;
    margin-left: 25px;
    margin-right: 25px;
}

.content__benefit-detail {
    margin-left: 25px;
    margin-right: 25px;
    background-color: #fff;
    margin-bottom: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.col--center {
    display: flex;
    align-items: center;
    height: 48px;
}


.col--center--space-between {
    justify-content: space-between;
}

.col__benefit {
    height: 50px;
    padding: 25px;
    vertical-align: central;
}

.col__left--border {
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
}

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

.col__right--border {
    border-right: 1px solid #e8e2e2;
}

.padding-5d-15m {
    padding-left:5px !important;
}

.padding-0d-15m {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

@media only screen and (max-width : 768px) {
    .col__right--border {
        border-right: none;
    }
    .padding-5d-15m {
        padding-left: 15px !important;
    }
    .padding-0d-15m {
        padding-left: 15px !important;
        padding-right: 0px !important;
    }
}

.content__insured-name {
    margin-left: 25px;
}

    .content__insured-name:lang(en) {
        font-size: 21px;
    }

    .content__insured-name:lang(th) {
        font-size: 25px;
    }

.content__insured-name__bold {
    font-weight: 600;
}

    .content__insured-name__bold:lang(en) {
        font-size: 21px;
    }

    .content__insured-name__bold:lang(th) {
        font-size: 25px;
    }

.benefit__title {
    padding-left: 30px;
    padding-top: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
    .benefit__title:lang(th) {
        font-size:30px;
    }
    .benefit__title:lang(en) {
        font-size: 24px;
    }


    .benefit__premium {
        padding-right: 30px;
        padding-top: 10px;
        color: #fff;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .benefit__premium:lang(th) {
            font-size: 24px;
        }

        .benefit__premium:lang(en) {
            font-size: 20px;
        }

.c-button--dashboard-action {
    border-radius: 6px;
    background-color: #3b3fd8;
    margin-left: 5px;
    margin-right: 1px;
}


    .c-button--dashboard-action:lang(en) {
        font-size: 12px !important
    }


    .c-button--dashboard-action:lang(th) {
        font-size: 16px !important;
    }

.policy__summary {
    font-weight: 900;
}

.c-form--full {
    height: 100%;
}

.dashboard__content .c-form {
    width: 100% !important;
}

    .dashboard__content .c-form .container {
        width: 100% !important;
    }

.content__action {
    display: flex;
    justify-content: center;
    align-items: center;
}


@media only screen and (max-width : 992px) {

    .content__action {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20px;
    }
}

    /*------------------------------------*\
  ENS CUSTOMER PORTAL DASHBOARD
\*------------------------------------*/
    /*------------------------------------*\
  START COMMON STYLE
\*------------------------------------*/
    .row.equal {
        display: flex;
        flex-wrap: wrap;
    }

    .active,
    .collapsible:hover {
    }

    .collapsible .collapsible__heading--top:after {
        top: 12px
    }

    .collapsible .collapsible__heading--fontsize:after {
        font-size: 18px;
    }

    .collapsible .collapsible__heading .expand {
        float: right;
        margin-right: 10px;
    }

    .collapsible__heading .expand img {
        transform: rotate( 180deg );
    }

    .active .collapsible__heading .expand img {
        transform: rotate( 0deg );
    }

    img.center-baseline {
        vertical-align: baseline;
    }

    img.center-sub {
        vertical-align: sub;
    }

    .expand--dummy {
        opacity: 0;
        visibility: hidden;
    }


    .collapsible .collapsible__benefit:after {
        content: "\f13a";
        font-family: "Font Awesome 5 Free";
        position: relative;
        font-weight: 600;
        top: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        justify-items: center;
        color: #fff;
        background-color: #3b3fd8;
    }

    .active .collapsible__benefit:after {
        content: "\f139";
        font-family: "Font Awesome 5 Free";
    }

    .collapsible__content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        color: black;
    }


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

    a.default-text-color {
        color: #333 !important;
    }


    .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        /*transition: opacity 500ms;*/
        visibility: hidden;
        opacity: 0;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .overlay__active {
        visibility: visible !important;
        opacity: 1 !important;
    }




    .popup {
        padding: 20px;
        background: #fff;
        border-radius: 5px;
        width: 95%;
        position: relative;
        max-width: 600px;
        min-height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    @media only screen and (max-width : 768px) {
        .popup {
            /*width: 70%;*/
        }
        .benefit__title:lang(th) {
            font-size: 26px;
        }

        .benefit__title:lang(en) {
            font-size: 20px;
        }

        .benefit__premium:lang(th) {
            font-size: 20px;
        }

        .benefit__premium:lang(en) {
            font-size: 16px;
        }
    }

    @media only screen and (max-width : 992px) {
        .popup {
            /*width: 50%;*/
        }
    }



    .popup h2 {
        margin-top: 0;
        color: #333;       
        margin-bottom: 50px;
    }

    .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }

        .popup .close:hover {
            color: #06D85F;
        }

    .popup .content {
        max-height: 30%;
        overflow: auto;
        margin-bottom: 50px;
    }

    .line {
        border-top: 1px solid #000;
        border-style: dashed;
    }


.form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5%;
    padding-bottom: 5%;
}



    .form-overlay__popup {
        padding: 20px;
        background: #fff;
        border-radius: 5px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 95%;
    }

.form-overlay__popup-40d-95m {
    width: 40%;
}

    /*@media only screen and (max-width : 1200px) {
    .form-overlay__popup {
        max-width: 1000px;
        min-width: 900px;
    }
}
*/




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

        .form-overlay__popup {
            min-width: 200px;
        }
    }


    @media only screen and (min-width : 768px) {
        .form-overlay__popup {
            max-width: 768px;
        }       
    }

    @media only screen and (min-width : 992px) {
        .form-overlay__popup {
            max-width: 992px;
        }
    }


    @media only screen and (min-width : 1200px) {
        .form-overlay__popup {
            max-width: 1200px;
        }
    }


    .form-overlay__popup h3 {
        margin-top: 0;
        color: #333;       
        margin-bottom: 50px;
        min-height: 60px;
        top: 0;
        position: absolute;
        background-color: #00008F;
        width: 100%;
        padding: 17px;
        text-align: center;
        color: #fff;
    }


    .form-overlay__popup .content {
        min-height: 30%;
        margin-bottom: 50px;
        width: 100%
    }

    .ui-autocomplete {
        z-index: 99999 !important;
    }

    .select2-selection {
        border-radius: 0px !important;
        min-height: 40px !important;
    }

    .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }

    .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }


    /*---------------- Button ----------------*/
    .button-primary {
        /* display: table;*/
        position: relative;
        vertical-align: middle;
        overflow: hidden;
        line-height: 38px;
        padding: 0 30px;
        margin: 0 1px 0 1px;
        color: #fff;
        background-color: #00008F;
        border: solid 2px #005dab;
        text-transform: uppercase;
        outline: none;
        z-index: 0;
        cursor: pointer;
        letter-spacing: 0.025em;
        transition: color .4s;
        white-space: nowrap;
    }

        .button-primary:hover {
            color: #005dab;
        }

        .button-primary:after {
            content: '';
            position: absolute;
            z-index: -1;
            transition: width .4s, opacity .4s;
            width: 0;
            height: 500%;
            top: 50%;
            left: 50%;
            opacity: 0;
            color: #004177;
            background-color: #fff;
            transform: translate3d(-50%, -50%, 0) rotate(45deg);
            backface-visibility: hidden;
        }

        .button-primary:hover:after {
            width: 140%;
            opacity: 1;
        }

    :lang(th) .button-primary {
    }

    :lang(en) .button-primary {
    }

    .button-primary--medium {
        min-width: 170px;
    }

    .button-primary--red {
        background-color: #f07662;
        border-color: #f07662;
    }

        .button-primary--red:hover {
            color: #fff;
        }

        .button-primary--red:after {
            background-color: #ec4d33;
        }

    .button-primary--grey {
        background-color: #3b3fd8;
        border-color: #3b3fd8;
    }

        .button-primary--grey:hover {
            color: #fff;
            border-color: #3b3fd8;
        }

        .button-primary--grey:after {
            background-color: #10139d;
        }


    .button-primary--sky {
        background-color: #00adc6;
        border-color: #00adc6;
    }

        .button-primary--sky:hover {
            color: #fff;
            border-color: #086d7b;
        }

        .button-primary--sky:after {
            background-color: #086d7b;
        }


    .button-primary--gray {
        border-color: #ccc;
        background-color: #fff;
        color: #ccc;
    }

        .button-primary--gray:hover {
            color: #fff;
            border-color: #b2b2b2;
        }

        .button-primary--gray:focus {
            color: #ccc;
        }

        .button-primary--gray:after {
            background-color: #b2b2b2;
        }

    .button-primary:disabled {
        background-color: #ccc;
        border-color: #ccc;
    }

        .button-primary:disabled:hover {
            color: #fff;
        }

        .button-primary:disabled:after {
            background-color: #ccc;
        }

    .button-primary--icon {
        line-height: 34px;
        padding: 0 12px;
    }

        .button-primary--icon .icon {
            font-size: 16px;
        }

    .btn-icon-right {
        position: relative;
        top: 2px;
    }

    .btn-icon-right-add {
        position: relative;
        top: 6px;
    }

    .btn-labeled {
        padding-top: 0;
        padding-bottom: 0;
    }

    .icon-arrow:before {
        content: "";
        background-image: url('../images/svg/Home/Down-icon.svg');
        width: 15px;
        height: 15px;
        background-size: 15px 15px;
        background-repeat: no-repeat;
    }

    .icon-right:before {
        content: "";
        background-image: url('../images/svg/Home/Arrow-right.svg');
        width: 15px;
        height: 15px;
        background-size: 15px 15px;
        background-repeat: no-repeat;
    }

    .icon-add:before {
        content: "";
        background-image: url('../images/svg/information/Add.svg');
        width: 20px;
        height: 20px;
        background-size: 20px 20px;
        background-repeat: no-repeat;
    }

    .icon-call:before {
        content: "";
        background-image: url('../images/svg/Home/Phone.svg');
        width: 15px;
        height: 15px;
        background-size: 15px 15px;
        background-repeat: no-repeat;
    }

    .icon-man-add:before {
        content: "";
        background-image: url('../images/svg/Home/Arrow-right.svg');
        width: 15px;
        height: 15px;
        background-size: 15px 15px;
        background-repeat: no-repeat;
    }
    /*---------------- Button ----------------*/

    .no-padding {
        padding: 0px !important;
    }

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

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

    .no-padding-top {
        padding-top: 0px !important;
    }

    .no-padding-bottom {
        padding-bottom: 0px !important;
    }

    .no-padding {
        padding: 0px !important;
    }

    .no-margin {
        margin: 0px !important;
    }

    .product-banner {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-top: 15px;
    }

    .product-banner__image {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .product-banner__image--mobile {
        display: none;
        width: 100%;
    }

    .product-banner__image--desktop {
        display: block;
        top: 0;
        max-width: none;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: auto;
    }

    .border-container {
        border: solid 1px #eeeeee;
        margin: 15px;
    }

    .font-bold {
        font-weight: bold;
    }

    @media only screen and (max-width : 768px) {
        .product-banner {
        }

        .product-banner__image--mobile {
        }

        .product-banner__image--desktop {
        }

        .form-overlay__popup-40d-95m {
            width: 95%;
        }
    }

    @media only screen and (max-width : 992px) {
        .product-banner {
        }

        .product-banner__image--mobile {
            display: block;
        }

        .product-banner__image--desktop {
            display: none;
        }
    }

    @media only screen and (min-width : 1200px) {
        .product-banner {
        }

        .product-banner__image--desktop {
        }
    }

    .input-validation-error + .select2 > .selection > .select2-selection {
        border: 1px solid #f00 !important;
        background-color: #fee !important;
    }

    .custom-text-right {
        text-align: right;
    }

    @media only screen and (max-width : 992px) {

        .custom-text-right {
            text-align: left;
        }
    }
    /*------------------------------------*\
  END COMMON STYLE
\*------------------------------------*/

a.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}