/* ===================================================================== */

/*  The following CSS was created using Theme Editor.                    */

/*  To modify this CSS, click "Open Theme Editor".                       */

/* ===================================================================== */



/* ===================================================================== */

/*  Root - CSS Variables                                                 */

/* ===================================================================== */



:root {

	

    /* Color - Brand */

    --color-primary: #3292af;

    --color-secondary: #3292af;



    --color-primary-hover: #266e83;

    --color-primary-selected: rgba(50, 146, 175, .12);

	

    /* Dark Theme */

    --background-dark-theme: rgba(255, 255, 255, .1);

    --background-dark-theme-hover: rgba(255, 255, 255, .2);

}





/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
:root {
    --color-primary: #01708c; /*primary-color*/
    --color-primary-hover: #01708c; /*primary-color*/
    --color-secondary: #01708c; /*primary-color*/
}

/* ================================================

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */

/*------FONTS------------*/
/* ===== NotoSansThai Normal ===== */
@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-Thin.ttf?z+iQugWM9pSawCUSFfHY1g') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-ExtraLight.ttf?PCugwDSDb7Zv7+2zpJvDwQ') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-Light.ttf?AiElG+cn9kolDf4PjlNTqQ') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-Regular.ttf?QnZxaX4aSQseABXi1+tGUw') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-Medium.ttf?3GK5ZgLTIbmhtqAOCEsbdg') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-SemiBold.ttf?ZjhCg2VC19_UeExWQrIE2w') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-Bold.ttf?QZFgZa7l6uZwrnRr6oZCbw') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-ExtraBold.ttf?YN6lZI3uYmGk2bqVJJmQTg') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai-Black.ttf?0sF5+7lYLUm8gJV10pwdsA') format('truetype');
  font-weight: 900;
  font-style: normal;
}

/* ===== Condensed ===== */
@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-Thin.ttf?ruQ5k8_X5ld2ONBVHQlsFA') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-ExtraLight.ttf?kzs3nAXnnQWraIhguQ12kg') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-Light.ttf?qXlbbNS0rUWx8nkyb4w5gA') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-Regular.ttf?71xWW16Zn3hhdA2CsHTEEg') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-Medium.ttf?3n3IirkYjSGfLMjFfA_RFg') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-SemiBold.ttf?dycCWuFlmlJdvuX1+8FsXw') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-Bold.ttf?xYHmKHP732dlfY_PIhUQFA') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-ExtraBold.ttf?vM7ywPz5SRzyYK0dTHPlcQ') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-stretch: condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_Condensed-Black.ttf?+VsRJf3HgYGBaJyvRi5Lvg') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-stretch: condensed;
}

/* ===== SemiCondensed ===== */
@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-Thin.ttf?1sbplCZlcwy_AtMTEAs_Gg') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-ExtraLight.ttf?oYcYhiiFMrmXl6n2fmaRrw') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-Light.ttf?RiL3Sx+21LbZ154yUjeqSQ') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-Regular.ttf?LHqgSoNdSDoscW00K__P9w') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-Medium.ttf?n6feFRuqUUAN+R2UPCo1tA') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-SemiBold.ttf?u+zCY89eeCNQJLFEM_f0Cw') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-Bold.ttf?0CtHBQ1UNcgT4ZA9xKV65Q') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-ExtraBold.ttf?yFVpq5N+P4Ak_myr+Waptw') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-stretch: semi-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_SemiCondensed-Black.ttf?L_YJXwqKvaW6aonLJ6M8jg') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-stretch: semi-condensed;
}

/* ===== ExtraCondensed ===== */
@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-Thin.ttf?cWJNh1q1Gk1muYQ7xy+l0w') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-ExtraLight.ttf?dS43FxEgHE1zi1p3IG3o_w') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-Light.ttf?hXL_fEEsFKIT_cCGXlHM2A') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-Regular.ttf?ztgDwmapOL2fwBjsnDHBEg') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-Medium.ttf?wEWPPYhdSNz+ZRMCMURIQg') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-SemiBold.ttf?v04E72PkA0i4LxUuEHobKA') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-Bold.ttf?jf8i3DkmhEWB2x34XD8rCQ') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-ExtraBold.ttf?9Jwnh99zQ9qdqvEpqLQzSA') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-stretch: extra-condensed;
}

@font-face {
  font-family: 'NotoSansThai';
  src: url('../NotoSansThai_ExtraCondensed-Black.ttf?YvhYNTu_GLYAEBCbC_N4rw') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-stretch: extra-condensed;
}


/*--------General------------*/

body{
    font-family: 'NotoSansThai', sans-serif;
    font-weight: 400; /* Regular */
}

a:hover, a:focus{
  text-decoration:none;
}

.main-content{
    margin-top: 50px;
}

.phone .main-content,.tablet .main-content{
    margin-top: 0px;
}

.header .app-logo{
  height: 72px;
  max-height:unset;
  max-width: unset;
}

.phone .header .app-logo, .tablet .header .app-logo{
  height: 48px;
}


.display-desktop{
    display: block;
}
.phone .display-desktop, .tablet .display-desktop{
    display: none;
}

.display-phone-tablet{
    display: none !important;
}
.phone .display-phone-tablet, .tablet .display-phone-tablet{
    display: block !important;
}

.display-phone , .tablet .display-phone{
    display: none !important;
}
.phone .display-phone{
    display: block !important;
}

.display-desktop-tablet,  .tablet .display-desktop-tablet{
    display: block !important;
}
.phone .display-desktop-tablet{
   display: none !important;
}


.desktop .layout:not(.layout-side) .app-menu-links {
    margin-right: 20px;
}

.phone .menu-icon, .tablet .menu-icon{
    margin-right: 0px;
}

.phone .layout-top .header-content, .tablet .layout-top .header-content{
    justify-content: space-between;
}

.modal-title {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

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

.Slider-Captcha .osui-range-slider__provider{
    height: 30px;
}
.Slider-Captcha .osui-range-slider__provider:after{
    content:'Swipe to Validate';
    position:absolute;
    color: white;
    top: 0;
    transform: translate(-50%,4px);
}
.Slider-Captcha .noUi-handle{
    border-radius:0;
    height:30px;
    width:30px;
    transform: translate(0px,10px);
    background-color: skyblue;
    border-color: skyblue;
}
.Slider-Captcha .noUi-handle:before{
    border:unset;
}
.Slider-Captcha .noUi-handle:after{
    border-width:1px 1px 0px 0px;
    border-color:white;
    width: 7px;
    height: 7px;
    transform: rotatez(45deg)translate(-2.5px,2.5px);
}
html:not([dir="rtl"]) .osui-range-slider .noUi-horizontal .noUi-handle {
    right: -12px;
}

.navigation-bar{
    padding: 12px;
    position: absolute;
    text-align: right;
    width: 100%;
    background: #ffff;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    border-color: #e4e5e7;
    height: 54px;
    display: flex;
    align-items: center;
}