@CHARSET "UTF-8";
@font-face {
	font-family: 'galano-light';
	src: url('/css/fonts/GalanoGrotesque-Light.ttf');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'galano-regular';
	src: url('/css/fonts/GalanoGrotesqueAlt-Regular.ttf');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'galano-medium';
	src: url('/css/fonts/GalanoGrotesque-Medium.ttf');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'galano-semibold';
	src: url('/css/fonts/GalanoGrotesque-SemiBold.ttf');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'kanit-medium';
	src: url('/css/fonts/Kanit-Medium.ttf');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'kanit-regular';
	src: url('/css/fonts/Kanit-Regular.ttf');
	font-weight: 400;
	font-display: swap;
}

::-webkit-scrollbar {
	height: 3px;
	width: 12px;
}

::-webkit-scrollbar-track {
	background-color: #F9F9F9;
}

::-webkit-scrollbar-thumb {
	background-color: #CCCCCC;
	border-radius: 5px;
	transition: background-color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out;
	-moz-transition: background-color 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #AAAAAA;
}

body.dark ::-webkit-scrollbar-track {
	background-color: #333333;
}

body.dark ::-webkit-scrollbar-thumb {
	background-color: #555555;
}

body,
table,
form,
.ui-widget {
	color: #000000;
    font-size: 14px;
	font-family: 'galano-regular', sans-serif !important;
}

body.dark,
body.dark table,
body.dark form,
body.dark .ui-widget {
	color: #d0d0d0;
}

header, section, footer {
	float: left;
	width: 100%;
}

body {
	padding: 0;
    background-color: #fafafa;
    max-width: 700px;
    margin: 0 auto 0 auto;
}

body.dark {
	background-color: #000000;
}

body .pad {
	margin: 20px;
}

body.home header, body.login header {
    background-color: #16171a;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
}

@media screen and (max-width: 550px) {
	body.home header, body.login header {
	    background-size: auto 360px;
	}
}

.rTabs {
	float: left;
	width: 100%;
	padding: 0 !important;
    background: transparent;
    border: none !important;
}

.rTabs #rTabsUlCont {
    border-bottom: 1px solid #efefef;
}

body.dark .rTabs #rTabsUlCont {
    border-bottom: 1px solid #434343;
}

#rAltCont {
	width: 320px;
    margin-top: 20px;
    float: left;
}

.rewardChart, .accommodationChart {
	float: left;
	width: 100%;
	display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
}

.accommodationChart {
    grid-template-columns: repeat(2, 1fr);
}

.rewardChart {
    margin-bottom: 30px;
}

.rewardChart > div, .accommodationChart > div {
    text-align: center;
    background-color: #f2f2f2;
    padding: 18px 10px 10px 10px;
    border-radius: 30px;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 28px;
	padding-top: 15px;
}

body.dark .rewardChart > div, body.dark .accommodationChart > div {
    background-color: #16171a;
}

.rewardChart > div:nth-child( 3 ) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	padding: 0 !important;
	background-color: transparent !important;
}

.rewardChart > div:nth-child( 1 ) > div,
.rewardChart > div:nth-child( 2 ) > div,
.accommodationChart > div > div {
    margin-top: 7px;
    font-size: 20px;
    font-weight: bold;
}

.rewardChart > div:nth-child( 2 ) {
	background-color: #ffcc03 !important;
	color: #000000;
}

body.dark .rewardChart > div:nth-child( 2 ) {
	background-color: #ad8300 !important;
	color: #FFFFFF;
}

.chart {
	width: 80px !important;
	height: 80px !important;
	position: relative;
}

.chart div.percent {
    position: absolute;
    left: 21px;
    top: 27px;
    width: 39px;
    font-size: 14px;
    text-align: center;
    font-family: arial;
}

.rRICont {
    float: left;
    background: #f2f2f2;
    border-radius: 20px;
    padding: 10px;
    width: calc(100% - 20px);
    margin-top: 30px;
    background: -moz-linear-gradient(270deg, #f2f2f2 0%, #f2f2f200 100%);
	background: -webkit-linear-gradient(270deg, #f2f2f2 0%, #f2f2f200 100%);
	background: linear-gradient(270deg, #f2f2f2 0%, #f2f2f200 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2f2f2",endColorstr="#f2f2f200",GradientType=1);
}

body.dark .rRICont {
    background: #16171a;
    background: -moz-linear-gradient(270deg, #16171a 0%, #f2f2f200 100%);
	background: -webkit-linear-gradient(270deg, #16171a 0%, #f2f2f200 100%);
	background: linear-gradient(270deg, #16171a 0%, #f2f2f200 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#16171a",endColorstr="#f2f2f200",GradientType=1);
}

.rRICont .pad {
	width: fit-content;
	margin: 0 auto 0 auto;
}

.rRI {
	float: left;
	line-height: 19px;
}

.rRI .rRHPA {
    margin: 12px 0 0 0;
    font-size: 12px;
    color: #666666;
}

body.dark .rRI .rRHPA {
    color: #b2b2b2;
}

.rRI .rRHPA.small {
	margin-top: 5px;
}

.rRI .rRHPU, .rRI .rRHPD {
    float: left;
    font-weight: 600;
    margin: 5px 5px 10px 0;
    padding-left: 10px;
    background: url( '/images/icons/route/arrow_up_red.png') left center no-repeat;
    background-size: 7px;
}

.rRI .rRHPU {
	margin-left: -10px;
}

.rRI .rRHPU div, .rRI .rRHPD div {
	font-size: 11px;
}

.rRI .rRHPD {
    background-image: url( '/images/icons/route/arrow_down_green.png');
}

.rRI .rRHPO {
    margin: 3px 0 10px 0;
    font-size: 17px;
    font-weight: 600;
}

.rDist span, .rTime span, .rDataLen span, .rDataTime span, .rRHPO span {
    font-size: 11px;
}

@media screen and (max-width: 700px) {
	.rRHPO span {
		margin-top: 3px;
	    display: block;
	}
	
	.rRICont {
	    padding: 20px;
    	width: calc(100% - 40px);
	}
	
	.rRI .rRHPU {
		margin-left: 0;
	}

	.rRI .rRHPU,
	.rRI .rRHPD,
	.rRI .rRHPO {
		font-size: 14px;
	}
	.rRI .rRHPA {
		margin: 0 !important;
	}
	.rRI {
		width: 100%;
	}
	.rRI .rRH {
		width: 27%;
		float: left;
		margin-right: 3%;
	}
	.rRI .rRH:last-child {
		margin-right: 0;
	}
	.rRI .rRH:first-child {
		width: 40%;
		float: left;
	}
	#rAltCont {
		width: 100%;
	}
	#rAltCont .pad {
		margin: 0 auto 0 auto;
	}
}

.routeColor {
    width: 20px;
    height: 14px;
    margin-left: 10px;
    display: inline-block;
    margin-top: 5px;
    position: relative;
    line-height: 13px;
    border: 1px solid #d5d5d5;
}

body.dark .routeColor {
	border-color: #000000;
}

.eventText .routeColor {
    line-height: 20px;
}

.routeColor.routeColor18 {
	line-height: 18px;
}

.routeColor:before,
.routeColor:after {
	content: ' ' ;
	position: absolute;
	width: 20px;
    height: 4px;
    top: 10px;
	background-color: #FFFFFF;
	display: block;
}

.routeColor:before {
	top: 0;
}

.rTabs p {
	margin: 0;
	padding: 0 !important;
}

.rTabs a {
	color: #000000;
	text-decoration: underline;
}

body.dark .rTabs a {
	color: #FFFFFF;
}

.rTabs a:hover {
	color: #000000;
	text-decoration: none;
}

.rTabs .ui-state-default.ui-corner-top {
	border: none;
	margin: 0 2px 0 2px !important;
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
}

.rTabs .ui-state-hover {
	background-image: none;
	background-color: #F9F9F9 !important;
}

.rTabs .ui-state-active.ui-state-hover {
	background-color: #f2f2f2 !important;
}

.rTabs .ui-state-hover a {
	text-decoration: none !important;
}

.rTabs .ui-state-active.ui-corner-top {
	border-top: 1px solid #efefef;
	border-left: 1px solid #efefef;
	border-right: 1px solid #efefef;
	background-position: center 6px !important;
}

body.dark .rTabs .ui-state-active.ui-corner-top {
	border-top: 1px solid #434343;
	border-left: 1px solid #434343;
	border-right: 1px solid #434343;
}

.rTabs .ui-state-default a,
.rTabs .ui-state-default a:link,
.rTabs .ui-state-default a:visited {
	font-weight: 500;
}

.rTabs .ui-tabs-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-align: center;
	margin: 0 auto 0 auto !important;
	border: none;
	font-size: 12px;
	background: none;
	padding: 0 !important;
	margin: -3px auto 0 auto !important;
}

.rTabs.big .ui-tabs-nav {
	font-size: 16px;
	width: 100%;
}

.rTabs .ui-tabs-nav li {
	margin: 0 !important;
	padding-bottom: 0px !important;
}

.rTabs .ui-tabs-nav li.ui-tabs-active {
	background-color: #fafafa !important;
}

body.dark .rTabs .ui-tabs-nav li.ui-tabs-active {
	background-color: #000000 !important;
}

.rTabs .rTabRoute,
.rTabs .rTabDetail,
.rTabs .rTabPois,
.rTabs .rTabInstruction,
.rTabs .rTabArrival,
.rTabs .rTabDownload {
	background-image: url('/images/icons/route/distance_black.svg') !important;
	background-position: center 8px !important;
	background-repeat: no-repeat !important;
	background-size: 20px !important;
}

.rTabs .rTabRoute {
    background-size: 24px !important;
}

.rTabs .rTabDetail {
	background-image: url('/images/icons/route/detail_black.svg') !important;
}

.rTabs .rTabPois {
	background-image: url('/images/icons/route/pois_black.svg') !important;
}

.rTabs .rTabInstruction {
	background-image: url('/images/icons/route/instructions_black.svg') !important;
}

.rTabs .rTabArrival {
	background-image: url('/images/icons/route/arrival_black.svg') !important;
}

.rTabs .rTabDownload {
	background-image: url('/images/icons/route/download_black.svg') !important;
	background-position: center 10px !important;
	background-size: 20px !important;
}

body.dark .rTabs .rTabRoute {
	background-image: url('/images/icons/route/distance_white.svg') !important;
}

body.dark .rTabs .rTabDetail {
	background-image: url('/images/icons/route/detail_white.svg') !important;
}

body.dark .rTabs .rTabPois {
	background-image: url('/images/icons/route/pois_white.svg') !important;
}

body.dark .rTabs .rTabInstruction {
	background-image: url('/images/icons/route/instructions_white.svg') !important;
}

body.dark .rTabs .rTabArrival {
	background-image: url('/images/icons/route/arrival_white.svg') !important;
}

body.dark .rTabs .rTabDownload {
	background-image: url('/images/icons/route/download_white.svg') !important;
}

.rTabs .rTabDownload>.sub {
	display: none;
	position: absolute;
	background: rgba( 255, 255, 255, 0.95);
	padding: 10px 20px 10px 20px;
	-webkit-box-shadow: 3px 3px 4px rgb(0 0 0 / 10%);
	box-shadow: 3px 3px 4px rgb(0 0 0 / 10%);
	border: 1px solid #ececec;
	border-radius: 10px;
	margin-top: 33px;
	margin-left: -10px;
    margin-top: 50px;
    margin-left: 0px;
    z-index: 1;
}

body.dark .rTabs .rTabDownload>.sub {
	background: #16171a;
	border-color: #434343;
}

.rTabs .rTabDownload>.sub a {
	width: 100%;
	float: left;
	padding: 5px 0 5px 0;
}

.rTabs .rTabDownload>.sub a:hover {
	text-decoration: underline !important;
}

.rTabs .ui-tabs-nav li.ui-state-default>.ui-tabs-anchor,
.rTabs .ui-tabs-nav li.ui-state-disabled>.ui-tabs-anchor,
.rTabs .ui-tabs-nav li.ui-tabs-loading>.ui-tabs-anchor {
	cursor: pointer;
	padding: 33px 8px 6px 8px !important;
}

.rTabs .ui-tabs-nav li.ui-tabs-active>.ui-tabs-anchor {
	margin-top: 1px;
	padding: 30px 8px 7px 8px !important;
}

.rTabs .ui-tabs-nav li {
    background-color: transparent !important;
}

.rTabs .ui-tabs-nav li.ui-tabs-active {
	top: 1px;
	position: relative;
}

.rTabs.ui-tabs .ui-tabs-nav {
	padding: 0 !important;
	border-bottom: none;
}

.rTabs .ui-widget-header {
	background: none;
	padding: 0;
}

.rDa, .rDau {
	float: left;
	width: 100%;
	padding: 15px 0 15px 0;
}

.rDa.rFirst, .rDau.rFirst {
	padding: 0 0 15px 0;
}

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

body.dark .rDau {
	border-bottom: 1px solid #434343;
}

.rDl, .rDr {
	float: left;
	width: 25%;
}

.rDr {
	width: 75%;
	text-align: right;
	display: flex;
    align-items: center;
    justify-content: flex-end;
}

.rTabs .rDr span {
    float: left;
    width: 10px;
    height: 10px;
    background-color: #D9D9D9;
    border-radius: 50%;
    margin-right: 7px;
}

body.dark .rTabs .rDr span {
	background-color: #16171a;
}

.rTabs .rDr.rDr1 span.active {
    background-color: #8aa30f;
}

.rTabs .rDr.rDr2 span.active {
	background-color: #ffcc03;
}

.rTabs .rDr.rDr3 span.active {
	background-color: #c21a2b;
}

.rDr span {
	float: none;
    font-size: 0;
}

.rDm, .rDma {
    float: left;
    width: 14.6%;
    margin: 0 1% 10px 1%;
    text-align: center;
    padding: 5px 0 5px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #f2f2f2;
    border-radius: 20px;
}

@media screen and (max-width: 500px) {
	.rDm, .rDma {
    	width: 23%;
	}
}

@media screen and (max-width: 380px) {
    .rDm, .rDma {
        width: 31.3%;
    }
}

body.dark .rDm, body.dark .rDma {
    background-color: #16171a;
}

.rDm:nth-child( 6 ), .rDma:nth-child( 6 ), .rDm:nth-child( 12 ), .rDma:nth-child( 12 ) {
	border-right: none;
}

.rDm div, .rDma div {
	margin: 5px;
}

.rTabs .rDma {
    background-color: #8aa30f !important;
    color: #FFF;
}

body.dark .rTabs .rDma {
	background-color: #5b6a11 !important;
}

.file {
	float: left;
	width: 100%;
	margin-bottom: 10px;
}

.file a {
	color: #000000;
	text-decoration: none;
	background-image: url(/images/main/document_gray.svg);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 15px;
	padding-left: 20px;
}

body.dark .file a {
	color: #FFFFFF;
	background-image: url(/images/main/document_white.svg);
}

.file a:hover {
	text-decoration: underline;
}

.hrefAfter {
	display: flex;
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 20px;
}

.correct {
	width: 25px;
    height: 25px;
    background-color: #c21a2b;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    border-radius: 50%;
    background-image: url( '/images/main/no_white.svg' ) ;
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center center;
}

.correct.ok {
	background-color: #8aa30f;
    background-image: url( '/images/main/yes_white.svg' ) ;
}

.difficulty1, .difficulty2, .difficulty3 {
	position: relative;
	padding-left: 17px;
    float: left;
    width: 100%;
    font-size: 13px;
    line-height: 16px;
}

.eventText .difficulty1, .eventText .difficulty2, .eventText .difficulty3 {
	margin-bottom: 10px;
}

.difficulty1:before, .difficulty2:before, .difficulty3:before {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	left: 0;
	top: 2px;
	background-color: #8aa30f;
	border-radius: 50%;
}

.difficulty2:before {
	background-color: #ffcc03;
}

.difficulty3:before {
	background-color: #c21a2b;
}

hr {
	float: left;
	width: 100%;
    background-color: transparent;
    border: none;
    border-top: 1px solid #efefef;
    margin: 20px 0 20px 0;
}

body.dark hr {
	border-color: #434343;
}

.answersCont .ebError {
	left: calc( 50% - 92px);
}

.competitionLeft {
	background-color: #000000;
	color: #FFFFFF;
	position: absolute;
	right: 0;
	top: 10px;
	z-index: 3;
	font-size: 11px;
    margin: 5px 0 0 0;
    line-height: 17px;
    font-weight: 400;
    font-family: 'kanit-regular', sans-serif !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 1px 10px 1px 10px;
    width: fit-content;
}

model-viewer {
	float: left;
    width: 100%;
    height: 70vw;
    max-height: 450px;
    pointer-events: auto;
    border-radius: 20px;
    margin: 10px 0 20px 0;
    background-color: #ffffff;
    display: none;
}

#arShow {
	margin: 20px auto 0 auto;
	width: fit-content;
	float: none;
	display: block;
}

model-viewer div.loading {
	position: absolute;
	top: calc( 50% + 50px ) ;
	left: 50%;
  	transform: translate(-50%, -50%);
}

model-viewer.loading {
	background: url(/images/main/logo_start_anim.png) center center no-repeat;
	background-size: 40px;
}

body.dark model-viewer {
    background-color: #202020;
}

model-viewer button {
	background-color: #ffcc03; 
	border-radius: 20px; 
	border: none; 
	position: absolute; 
	bottom: 0; 
	left: 50%;
  	transform: translate(-50%, -50%);
	padding: 5px 10px 5px 10px;
	text-wrap: nowrap;
}

body.dark model-viewer button {
	background-color: #ad8300;
	color: #FFFFFF;
}

.answersThx, .hide {
	display: none;
}

.question {
	float: left;
	width: 100%;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 30px;
}

.answersCont {
	float: left;
	width: 100%;
}

.answers {
	display: flex;
	align-items: center;
	flex-flow: column;
}

.answer {
	float: left;
	width: auto;
	clear: both;
	text-align: center;
}

.answer label {
	display: contents;
}

.answer input[type="text"] {
	min-width: 300px;
	max-width: 100%;
	padding: 15px;
	font-size: 20px;
}

.answerSubmit {
	float: left;
	width: 100%;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 20px;
}

div.answer label {
	display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 32px;
    cursor: pointer;
    font-size: 22px;
    line-height: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.answer:last-child label {
    margin-bottom: 0;
}

div.answer label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

div.answer label .checkmark {
	position: absolute;
	top: -4px;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
}

body.dark div.answer label .checkmark {
	background-color: #323232;
}

div.answer label:hover input~.checkmark {
	background-color: #ccc;
}

div.answer label input:checked~.checkmark {
	background-color: #8aa30f;
}

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

div.answer label input:checked~.checkmark:after {
	display: block;
}

div.answer label .checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

body.dark div.answer label .checkmark:after {
	background: #323232;
}

#missionDetail h2 {
	margin-top: 0;
}

.vip {
    width: fit-content;
    font-size: 12px;
    color: #000000;
    background-color: #ffcc03;
    padding: 2px 8px 2px 8px;
    border-radius: 10px;
    line-height: 15px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 6px;
    position: absolute;
    text-shadow: none;
    box-shadow: 0 0 30px #000000;
}

#header .resId {
    text-align: center;
    width: 100%;
    display: block;
    color: #FFFFFF;
    font-family: 'galano-light', sans-serif !important;
    text-shadow: 0 0 10px #000000;
}

.accordion h3 .distance {
    position: absolute;
    top: -10px;
    right: 10px;
    background-color: #16171a;
    color: #FFFFFF;
    padding: 0 10px 0 10px;
    border-radius: 10px;
    font-family: 'kanit-regular', sans-serif !important;
    font-size: 12px;
}

body.dark .accordion h3 .distance {
    background-color: #3c3d42;
}

body.dark .ui-dialog, body.dark .ui-dialog, body.dark .ui-dialog .ui-dialog-titlebar {
	background-color: #2c2c2c !important;
	border-color: transparent !important;
}

.ui-widget-content {
	border: none;
}

body.dark .ui-widget-content {
	color: #d0d0d0 !important;
	background-color: #2c2c2c;
}

body.dark .ui-widget-content.rTabs, body.dark .rTabs .ui-widget-content {
	background-color: #000000;
}

body.dark .ui-widget-header {
	background-color: transparent;
	border-color: transparent;
}

body.dark #ui-datepicker-div.ui-datepicker .ui-datepicker-title select {
	border-color: transparent;
}

body.dark .ui-dialog .ui-dialog-titlebar {
	color: #FFFFFF;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: 5px;
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    border: none;
    background-color: #DDDDDD;
    font-family: 'kanit-regular', sans-serif !important;
    cursor: pointer;
}

body.dark .ui-dialog .ui-dialog-buttonpane button {
    background-color: #4a4a4a;
}

.ui-dialog-buttonset .ui-button:hover {
    background-color: #000000 !important;
    color: #FFFFFF;
}

.ui-dialog-buttonset .ui-button:active {
    background: #ffcc03;
}

.firstButton .ui-dialog-buttonset .ui-button:first-child {
    background: #ffcc03;
}

body.dark .firstButton .ui-dialog-buttonset .ui-button:first-child {
    background: #ad8300;
    color: #FFFFFF;
}

#header {
	position: relative;
    float: left;
    width: 100%;
	border-bottom-right-radius: 27px;
	border-bottom-left-radius: 27px;
}

body.home #header {
	padding-bottom: 10px;
	background: rgb(22,23,26);
	background: -moz-linear-gradient(180deg, rgba(22,23,26,1) 0%, rgba(22,23,26,0.1) 15%, rgba(22,23,26,1) 70%, rgba(0,0,0,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(22,23,26,1) 0%, rgba(22,23,26,0.1) 15%, rgba(22,23,26,1) 70%, rgba(0,0,0,1) 100%);
	background: linear-gradient(180deg, rgba(22,23,26,1) 0%, rgba(22,23,26,0.1) 15%, rgba(22,23,26,1) 70%, rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1f1f21",endColorstr="#000000",GradientType=1);
}

body.home #header.sub {
	padding-bottom: 10px;
	background: rgb(22,23,26);
	background: -moz-linear-gradient(180deg, rgba(22,23,26,1) 0%, rgba(22,23,26,0.1) 40%, rgba(0,0,0,0.7) 100%);
	background: -webkit-linear-gradient(180deg, rgba(22,23,26,1) 0%, rgba(22,23,26,0.1) 40%, rgba(0,0,0,0.7) 100%);
	background: linear-gradient(180deg, rgba(22,23,26,1) 0%, rgba(22,23,26,0.1) 40%, rgba(0,0,0,0.7) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1f1f21",endColorstr="#000000",GradientType=1);
}

h1 {
    float: left;
    font-family: 'kanit-regular', sans-serif !important;
    line-height: 36px;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    margin: 0 auto 0 0;
}

#headPage.white h1 {
	color: #FFFFFF;
}

body.login h1 {
    width: 100%;
    margin: 10px 0 20px;
}

h2 {
	float: left;
	width: 100%;
	margin-top: 30px;
	font-family: 'kanit-regular', sans-serif !important;
    line-height: 30px;
    font-size: 24px;
    font-weight: 500;
}

body.dark h2 {
	color: #d0d0d0;
}

.eshopBuy {
	float: left;
	margin-top: 20px;
	width: 100%;
	text-align: center;
}

.eshopBuy > a {
    display: block;
    width: fit-content;
    margin: 0 auto 0 auto;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

.eshopBuy > a:hover {
	color: #000000 !important;
}

body.dark .eshopBuy > a:hover {
	color: #FFFFFF !important;
}

.deleteAccount {
	color: #BBBBBB;
	font-size: 13px;
	text-decoration: none;
}

a#deleteAccount {
	color: #AAAAAA;
	font-size: 13px;
	text-decoration: none;
}

a#deleteAccount:hover {
	color: #555555;
}

h2.first {
	margin-top: 0;
}

h2.center, h3.center, div.center {
	text-align: center;
}

div.center.w100 {
	width: 100%;
}

img.center {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.mb5 {
	margin-bottom: 5px;
}

.mb10 {
	margin-bottom: 10px;
}

.hall {
	float: left;
	width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 20px;
    justify-content: space-between;
}

.halb {
	width: 100%;
	float: left;
}

.hall.first {
	margin-top: 10px;
}

.hall h2 {
	width: auto;
	margin: 0;
}

.hall .all {
	float: right;
	color: #bbc1ca;
	font-size: 13px;
	font-family: 'galano-regular', sans-serif !important;
	text-decoration: none;
}

.hall .all:hover {
	text-decoration: underline;
}

#header h2 {
	color: #FFFFFF;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 4px;
    text-shadow: 0 0 10px #000000;
}

h2 > span {
	font-size: 15px;
	font-family: 'galano-light', sans-serif !important;
}

.userWelcome {
	float: left;
    font-family: 'kanit-regular', sans-serif !important;
    line-height: 19px;
	color: #FFFFFF;
}

.userWelcome > div {
    font-family: 'galano-light', sans-serif !important;
    font-size: 14px;
    font-weight: normal;
}

.myCode {
	text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
}

#headHome, #headPage {
	float: left;
	width: 100%;
    margin-bottom: 10px;
}

#headHome, #headPage {
	display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#headPage.gallery.white {
    position: absolute;
    z-index: 2;
    right: 20px;
    top: 20px;
    width: calc(100% - 40px);
}

#headPage.black {
    background-color: #16171a;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 20px;
    width: calc(100% - 40px);
}

#header #search, #header #alert, #header #like {
	width: 40px; 
	height: 40px;
	float: right;
	background-color: #16171a;
	backdrop-filter: blur(2px);
	border-radius: 50%;
	margin-left: 10px;
	background-size: 17px;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    cursor: pointer;
}

#headHome #search, #headHome #alert, #headHome #like {
	background-color: #ffffff24;
}

#header #like {
    margin-left: auto;
}

.rLike {
    position: absolute;
    top: 120px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    background-image: url(/images/client/heart_white.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 17px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.dA {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
    justify-content: space-between;
}

.dA .dL {
    float: left;
    width: 110px;
}

.dA .dR {
    float: right;
    width: calc( 100% - 130px );
}

.rGal .rLike {
	top: auto;
	bottom: 10px;
}

.rLike.active {
	background-image: url(/images/client/heart_red.svg);
}

#header #like:hover, .rLike:hover {
	animation: heartbeat 1s infinite;
}

#header #search:hover, #header #alert:hover, #header #like:hover {
	background-color: #133865;
}

#header #search {
	background-image: url( '/images/client/search_white.svg' ) ;
}

#header #alert, #menu .alerts {
	background-image: url( '/images/client/alert_white.svg' ) ;
}

#header #like, #menu .like {
	background-image: url( '/images/client/heart_white.svg' ) ;
}

#menu .account {
	background-image: url( '/images/client/user_white.svg' ) ;
}

#menu .logout {
	background-image: url( '/images/client/logout.svg' ) ;
}

#header #search a, #header #alert a, #header #like a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 100%;
}

.terms {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.terms h2 {
	font-family: 'kanit-regular', sans-serif;
}

.terms a {
	color: #000000;
}

.terms a:hover {
	color: #ffcc03;
}

.termsButs {
	float: left;
    width: 100%;
    margin: 40px 0 20px 0;
    text-align: center;
}

.buts1, .buts2, .buts3 {
	float: left;
	width: 100%;
}

.buts3 {
	display: flex;
}

.buts1 > div, .buts2 > div, .buts3 > div,
.rewardChart div.visitAdd {
	float: left;
	margin-bottom: 20px;
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body.dark .buts1 > div, body.dark .buts2 > div, body.dark .buts3 > div {
    background-color: #16171a;
    border: 1px solid #404040;
}

body.dark .buts1 > div a, body.dark .buts2 > div a, body.dark .buts3 > div a,
.rewardChart div.visitAdd a {
	color: #FFFFFF !important;
	text-decoration: none;
}

.buts1.highlight > div, .buts2.highlight > div {
    background-color: #ffcc03 !important;
    border-color: #ffcc03 !important;
}

body.dark .buts1.highlight > div, body.dark .buts2.highlight > div {
    background-color: #ad8300 !important;
    border-color: #ad8300 !important;
}

.buts2.highlight > div.visitAdd,
.rewardChart div.visitAdd {
	background-color: #8aa30f !important;
    border-color: #8aa30f !important;
}

body.dark .buts2.highlight > div.visitAdd,
body.dark .rewardChart div.visitAdd {
	background-color: #5b6a11 !important;
    border-color: #5b6a11 !important;
}

.buts2.highlight > div.visitAdd > a {
    color: #FFFFFF;
}

.buts1 > div > a, .buts2 > div > a, .buts3 > div > a {
    width: calc(100% - 75px);
    display: block;
    padding: 10px 20px;
    border-radius: 20px;
}

.buts1 > div {
    width: 100%;
}

.buts1:not( .highlight ) > div {
	background-size: 7px !important;
    background-repeat: no-repeat !important;
    background-position: right +15px center !important;
    background-image: url(/images/client/forward_black.svg);
}

body.dark .buts1:not( .highlight ) > div {
    background-image: url(/images/client/forward_white.svg);
}

.buts2 > div {
	width: calc( 50% - 10px );
}

.buts3 > div {
	width: calc( 33.3333% - 10px );
}

.buts1 > div > a, .buts2 > div > a, .buts3 > div > a {
	background-position: center 15px !important;
	font-family: 'kanit-regular', sans-serif;
	font-size: 15px;
	color: #000000;
	text-decoration: none;
    background-size: 20px !important;
    background-repeat: no-repeat;
}

.buts1:not( .highlight ) > div > a {
	background-position: left+20px center !important;
    padding-left: 55px;
}

.buts1.highlight > div > a {
	text-align: center;
}

.buts2 > div > a, .buts3 > div > a {
	padding-top: 40px;
	text-align: center;
    width: calc( 100% - 40px );
}

.buts1.highlight > div > a, .buts2.highlight > div > a {
	padding-top: 10px;
}

.buts2 > div:nth-child( 1 ) {
	margin-right: 10px;
}

.buts2 > div:nth-child( 2 ) {
	margin-left: 10px;
}

.buts3 > div:nth-child( 1 ) {
	margin-right: 10px;
}

.buts3 > div:nth-child( 2 ) {
	margin-left: 5px;
	margin-right: 5px;
}

.buts3 > div:nth-child( 3 ) {
	margin-left: 10px;
}

.buts2 > div.rewards > a, .buts3 > div.rewards > a {
    background-image: url(/images/client/reward_black.svg);
    background-size: 26px !important;
}

.buts2 > div.bonus > a, .buts3 > div.bonus > a {
    background-image: url(/images/client/loyalty_black.svg);
}

.buts1 > div.personal > a {
    background-image: url(/images/client/user_black.svg);
    background-size: 13px !important;
    background-position: left+23px center !important;
}

.buts1 > div.password > a {
    background-image: url(/images/client/password_black.svg);
    background-size: 18px !important;
}

.buts1 > div.accommodation > a {
    background-image: url(/images/client/room_black.svg);
}

.buts1 > div.stats > a {
    background-image: url(/images/client/stats_black.svg);
}

.buts1 > div.reward > a {
    background-image: url(/images/client/reward_black.svg);
}

.buts1 > div.settings > a {
    background-image: url(/images/client/settings_black.svg);
    background-position: left +22px center !important;
    background-size: 18px !important;
}

body.dark .buts2 > div.qr > a, body.dark .buts3 > div.qr > a {
    background-image: url(/images/main/qr-code_white.svg) !important;
}

body.dark .buts2 > div.rewards > a, body.dark .buts3 > div.rewards > a {
    background-image: url(/images/client/reward_white.svg);
}

body.dark .buts2 > div.bonus > a, body.dark .buts3 > div.bonus > a {
    background-image: url(/images/client/loyalty_white.svg);
}

body.dark .buts1 > div.personal > a {
    background-image: url(/images/client/user_white.svg);
}

body.dark .buts1 > div.password > a {
    background-image: url(/images/client/password_white.svg);
}

body.dark .buts1 > div.accommodation > a {
    background-image: url(/images/client/room_white.svg);
}

body.dark .buts1 > div.stats > a {
    background-image: url(/images/client/stats_white.svg);
}

body.dark .buts1 > div.reward > a {
    background-image: url(/images/client/reward_white.svg);
}

body.dark .buts1 > div.settings > a {
    background-image: url(/images/client/settings_white.svg);
}

.buts1 > div.qr > a:hover, .buts2 > div.qr > a:hover, .buts3 > div.qr > a:hover {
    background-image: url(/images/main/qr-code.svg) !important;
}

.buts1 > div.logout > a {
    background-image: url(/images/client/logout.svg);
    background-position: left+22px center !important;
}

@media screen and (max-width: 400px) {
	.buts3 > div:nth-child( 1 ), .buts3 > div:nth-child( 2 ), .buts3 > div:nth-child( 3 ), .buts2 > div:nth-child( 1 ), .buts2 > div:nth-child( 2 ) {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
    	background-size: 7px !important;
		background-repeat: no-repeat !important;
	    background-position: right +15px center !important;
	    background-image: url(/images/client/forward_black.svg);
	}
	
	body.dark .buts3 > div:nth-child( 1 ), body.dark .buts3 > div:nth-child( 2 ), body.dark .buts3 > div:nth-child( 3 ), body.dark .buts2 > div:nth-child( 1 ) {
	    background-image: url(/images/client/forward_white.svg);
	}
	
	.buts3 {
		display: block;
	}
	
	.buts2:not( .highlight ) > div > a, .buts3 > div > a {
		text-align: left;
		background-position: left+20px center !important;
	    padding-top: 10px;
	    padding-left: 55px;
    	width: calc( 100% - 75px );
	}
	
	.buts1.highlight > div, .buts2.highlight > div {
    	background-image: url(/images/client/forward_white.svg);
	}
	
	body:not( .dark ) .buts2.highlight > div.findUser {
    	background-image: url(/images/client/forward_black.svg);
	}
	
	.buts1.highlight > div > a, .buts2.highlight > div > a {
		text-align: left;
	}
}

.userIco {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 14px;
}

.userIco.admin {
	width: 100%;
    height: auto;
    text-align: center;
    margin: 0;
}

.userIco.admin div {
	width: 90px;
	height: 90px;
    margin: 0 auto 0 auto;
    float: none !important;
}

.userIco a {
	float: left;
    width: 25px;
    height: 25px;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.userIco span {
	line-height: 26px;
	color: #000000;
	padding-left: 5px;
	margin-top: 2px;
}

.userIco > a.logged > span {
	font-family: 'kanit-medium', sans-serif !important;
	float: right;
}

.userIco a:hover span {
	text-decoration: underline;
}

.userIco div:not( .letter ) {
    background-image: url(/images/main/user_white.svg);
}

.userIco img {
	width: 21px;
	height: 21px;
	margin-top: 2px;
}

.userIco div.letter {
    background-color: #ffcc03;
    font-size: 23px;
    line-height: 32px;
    color: #000000;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
}

.userIco div.photo {
	background-size: cover;
}

.userIco div.photo:not([style]) {
	background-size: 60px !important;
    background-repeat: no-repeat;
}

.userIco div {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-position: center center;
    background-size: 22px;
}

#footerMenu {
    position: fixed;
    z-index: 9;
    width: calc(100% - 70px);
    max-width: 530px;
    padding: 0 20px 0 20px;
    left: 0;
    right: 0;
    bottom: 15px;
    margin-inline: auto;
    background-color: #16171a;
    height: 70px;
    border-radius: 40px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(5, 1fr);
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
}

body.dark #footerMenu {
	background-color: #202020;
	-webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.7);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.7);
}

div[data-dialog]:not([data-dialog=""]) {
	cursor: help;
}

.tc div[data-dialog]:not([data-dialog=""]):hover {
	background-color: #ebebeb !important;
}

#visitDetail {
	float: left;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
    color: #ababad;
    text-align: center;
}

#visitDetail.nomar {
	margin-bottom: 10px;
}

#visitDetail > div {
	float: left;
	color: #000000;
	text-align: center;
	width: 100%;
}

#alertBubble {
    position: fixed;
    max-width: 50vw;
    left: 30px;
    bottom: 30px;
    background-color: #8aa30f;
    color: #FFFFFF;
    padding: 15px 15px 15px 60px;
    z-index: 1000;
    display: none;
    border-radius: 15px;
    overflow-wrap: break-word;
    background-image: url(/images/client/warning_white.svg);
   	background-size: 25px;
    background-repeat: no-repeat;
    background-position: left+19px center;
}

body.dark #alertBubble.info {
	background-color: #5b6a11;
}

#alertBubble.warning {
	background-color: #c21a2b;
}

body.home #visitDetail > div {
	color: #FFFFFF;
    text-shadow: 0 0 10px #000000;
}

body.home #visitDetail > div:first-child {
	margin-bottom: 20px;
}

#visitDetailGrid > div > span {
	background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 17px;
   	line-height: 20px;
   	font-family: sans-serif;
   	font-weight: bold;
}

#visitDetailGrid > div:nth-child( 1 ) {
	width: 100%;
	float: left;
	margin-bottom: 17px;
    color: #000000;
    font-family: 'galano-light', sans-serif !important;
}

body.home #visitDetailGrid > div:nth-child( 1 ) {
    color: #FFFFFF;
}

#visitDetail #visitDetailGrid {
	float: left;
	width: 100%;
	display: grid;
    grid-gap: 13px;
    grid-template-columns: repeat(4, 1fr);
}

#visitDetail.h3 #visitDetailGrid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 370px;
    margin: 0 auto 0 auto;
    float: none;
}

#visitDetail.h2 #visitDetailGrid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 170px;
    margin: 0 auto 0 auto;
    float: none;
}

#visitDetail.h1 #visitDetailGrid {
    grid-template-columns: repeat(1, 1fr);
    max-width: 170px;
    margin: 0 auto 0 auto;
    float: none;
}

@media screen and (max-width: 550px) {    
	#visitDetail.h4 #visitDetailGrid > div:nth-child( 4 ) {
	    grid-column: 1 / 4;
    	grid-row: 2;
	}
	
	#visitDetail.h4 #visitDetailGrid {
	    grid-template-columns: repeat(3, 1fr);
	}
}

#visitDetail input, .srr .buts input, #userAccordion input[type="button"], .termsButs input[type="button"] {
    background-color: #ffcc03;
    border: none;
    border-radius: 20px;
    padding: 8px 15px 8px 15px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

body.dark #visitDetail input, .srr .buts input, body.dark #userAccordion input[type="button"], body.dark .termsButs input[type="button"] {
	background-color: #ad8300;
	color: #FFFFFF;
}

#findUserCode {
	width: 170px;
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#header .userCode {
	color: #FFFFFF;
	font-size: 20px;
	text-align: center;
	width: 100%;
	float: left;
	margin-bottom: 30px;
	font-weight: bold;
}

.visitAdd, .findUser, .loyaltyAdd {
    width: 100%;
    margin-top: 5px !important;
}

#userAccordion input[type="button"] {
	float: right;
}

#userAccordion .nameb {
	float: left;
    width: calc(100% - 120px);
}

#userAccordion .mb {
    display: flex;
    align-items: center;
}

#visitDetail input {
    margin-top: -6px;
}

.termsButs input {
	padding: 15px 30px 15px 30px !important;
}

.termsButs input[disabled] {
	background-color: #DDDDDD;
}

#visitDetail input:hover, .srr .buts input:hover, #userAccordion input[type="button"]:hover, .termsButs input:not( [disabled] )[type="button"]:hover,
body.dark #visitDetail input:hover, body.dark .srr .buts input:hover, body.dark #userAccordion input[type="button"]:hover, body.dark .termsButs input:not( [disabled] )[type="button"]:hover {
	background-color: #000000;
	color: #FFFFFF;
}

#visitDetailGrid div:nth-child( 1 ) > span {
    background-image: url( '/images/client/night_black.svg' ) ;
     background-size: 9px;
}

#visitDetailGrid > div:nth-child( 2 ) > span {
    background-image: url( '/images/client/user_black.svg' ) ;
}

#visitDetailGrid > div .pet {
	display: block;
    width: fit-content;
    text-align: center;
    background-size: 13px;
    background-image: url(/images/client/pet_black.svg) !important;
    margin: 0 auto;
}

body.home #visitDetailGrid > div .pet {
    background-image: url( '/images/client/pet.svg' ) !important ;
}

#visitDetailGrid > div:nth-child( 2 ) > span > span {
	font-size: 12px;
}

#visitDetailGrid > div:nth-child( 3 ) > span {
    background-image: url( '/images/client/price_black.svg' ) ;
}

body.home #visitDetailGrid > div:nth-child( 1 ) > span {
    background-image: url( '/images/client/night_white.svg' ) ;
}

body.home #visitDetailGrid > div:nth-child( 2 ) > span {
    background-image: url( '/images/client/user_white.svg' ) ;
}

body.home #visitDetailGrid > div:nth-child( 3 ) > span {
    background-image: url( '/images/client/price_white.svg' ) ;
}

#visitInfo {
	float: left;
	width: 100%;
	display: grid;
    grid-gap: 13px;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 20px;
    background: transparent;
	background: -moz-radial-gradient(circle, rgba(80,124,177,0.6) 0%, rgba(255,255,255,0) 25%);
	background: -webkit-radial-gradient(circle, rgba(80,124,177,0.6) 0%, rgba(255,255,255,0) 25%);
	background: radial-gradient(circle, rgba(80,124,177,0.6) 0%, rgba(255,255,255,0) 25%);
}

body.dark #visitInfo {
    background: -moz-radial-gradient(circle, rgba(51 62 74 / 60%) 0%, rgba(255,255,255,0) 25%);
    background: -webkit-radial-gradient(circle, rgba(51 62 74 / 60%) 0%, rgba(255, 255, 255, 0) 25%);
    background: radial-gradient(circle, rgb(51 62 74 / 60%) 0%, rgba(255, 255, 255, 0) 25%);
}

@media screen and (max-width: 600px) {
	#visitInfo {
		grid-template-columns: repeat(3, 1fr);
		background: -moz-radial-gradient(circle, rgba(80,124,177,0.6) 0%, rgba(255,255,255,0) 40%);
		background: -webkit-radial-gradient(circle, rgba(80,124,177,0.6) 0%, rgba(255,255,255,0) 40%);
		background: radial-gradient(circle, rgba(80,124,177,0.6) 0%, rgba(255,255,255,0) 40%);
	}
	
	body.dark #visitInfo {
	    background: -moz-radial-gradient(circle, rgba(51 62 74 / 60%) 0%, rgba(255,255,255,0) 40%);
	    background: -webkit-radial-gradient(circle, rgba(51 62 74 / 60%) 0%, rgba(255, 255, 255, 0) 40%);
	    background: radial-gradient(circle, rgb(51 62 74 / 60%) 0%, rgba(255, 255, 255, 0) 40%);
	}
}

#visitInfo > div {
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    float: left;
    width: 100%;
    border-radius: 20px;
	text-align: center;
	background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center 10px;
    padding-top: 40px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

body.dark #visitInfo > div {
    background-color: #16171a;
    border-color: #29292a;
}

#visitInfo > div:hover {
	background-color: #FFFFFF;
}

body.dark #visitInfo > div:hover {
	background-color: #2c2d32;
}

#visitInfo > div > a {
	color: #000000;
    font-family: 'kanit-regular', sans-serif !important;
    text-decoration: none;
    font-size: 13px;
	padding: 0 10px 5px 10px;
	display: block;
}

body.dark #visitInfo > div > a {
	color: #d0d0d0;
}

#visitInfo > div {
	background-image: url( '/images/client/home_white.svg' ) ;
}

#footerMenu > div {
	width: 60px;
	margin: 0 auto 0 auto;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center 15px;
    padding-top: 38px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

@media screen and (max-width: 450px) {
	#footerMenu > div {
		width: auto;
	}
}

#footerMenu > div:nth-child( 1 ), #menu .home {
	background-image: url( '/images/client/home_white.svg' ) ;
}

#visitInfo > div.reward {
	background-image: url( '/images/client/reward_black.svg' ) ;
    background-size: 25px;
    background-position: center 17px;
}

#footerMenu > div:nth-child( 2 ), #menu .rewards {
	background-image: url( '/images/client/reward_white.svg' ) ;
    background-size: 25px;
    background-position: center 17px;
}

#footerMenu > div:nth-child( 3 ), #menu .explore {
	background-image: url( '/images/client/explore_white.svg' ) ;
    background-size: 22px;
}

#footerMenu > div:nth-child( 4 ), #menu .events {
	background-image: url( '/images/client/events_white.svg' ) ;
}

#footerMenu > div:nth-child( 5 ) {
	background-image: url( '/images/client/menu_white.svg' ) ;
    background-position: center 18px;
}

#footerMenu > div > a, #menu a {
	color: #FFFFFF;
    font-family: 'galano-light', sans-serif !important;
    text-decoration: none;
    font-size: 13px;
}

#menu a {
	font-size: 15px;
    line-height: 25px;
}

#visitInfo > div.visit {
	background-image: url( '/images/client/room_black.svg' ) ;
}

#menu .accommodation {
	background-image: url( '/images/client/room_white.svg' ) ;
}

#menu .competition {
	background-image: url( '/images/client/competition_white.svg' ) ;
}

#menu > div.loyalty:not( #menuUser ):not( .logo ) {
	background-image: url( '/images/client/loyalty_white.svg' ) ;
    background-position: left 6px !important;
}

#menu .visit {
	background-image: url( '/images/client/room_white.svg' ) ;
}

#visitInfo > div.info {
	background-image: url( '/images/client/info_black.svg' ) ;
}

#menu .info {
	background-image: url( '/images/client/info_white.svg' ) ;
}

#visitInfo > div.parking {
	background-image: url( '/images/client/parking_black.svg' ) ;
}

#menu .parking {
	background-image: url( '/images/client/parking_white.svg' ) ;
}

#visitInfo > div.restaurant {
	background-image: url( '/images/client/restaurant_black.svg' ) ;
}

#menu .restaurant {
	background-image: url( '/images/client/restaurant_white.svg' ) ;
}

#visitInfo > div.services {
	background-image: url( '/images/client/services_black.svg' ) ;
}

#menu .services {
	background-image: url( '/images/client/services_white.svg' ) ;
}

#visitInfo > div.bill {
	background-image: url( '/images/client/price_black.svg' ) ;
}

#menu .bill {
	background-image: url( '/images/client/price_white.svg' ) ;
}

#visitInfo > div.rating {
	background-image: url( '/images/client/star_black.svg' ) ;
}

#menu .rating {
	background-image: url( '/images/client/star_white.svg' ) ;
}

#visitInfo > div.contact {
	background-image: url( '/images/client/email_black.svg' ) ;
}

body.dark #visitInfo > div.visit {
	background-image: url( '/images/client/room_white.svg' ) ;
}

body.dark #visitInfo > div.info {
	background-image: url( '/images/client/info_white.svg' ) ;
}

body.dark #visitInfo > div.parking {
	background-image: url( '/images/client/parking_white.svg' ) ;
}

body.dark #visitInfo > div.restaurant {
	background-image: url( '/images/client/restaurant_white.svg' ) ;
}

body.dark #visitInfo > div.services {
	background-image: url( '/images/client/services_white.svg' ) ;
}

body.dark #visitInfo > div.bill {
	background-image: url( '/images/client/price_white.svg' ) ;
}

body.dark #visitInfo > div.rating {
	background-image: url( '/images/client/star_white.svg' ) ;
}

body.dark #visitInfo > div.contact {
	background-image: url( '/images/client/email_white.svg' ) ;
}

body.dark #visitInfo > div.reward {
	background-image: url( '/images/client/reward_white.svg' ) ;
}

#menu .contact {
	background-image: url( '/images/client/email_white.svg' ) ;
}

#footerMenu > div.active > a, #footerMenu > div:hover > a, #menu a:hover, #menu .active a {
	font-weight: bold;
}

#footerMenu > div, #footerMenu > div, #header #alert > a > div, #menu > div {
	filter: contrast(0.7);
}

#footerMenu > div.active, #footerMenu > div:hover, #header #alert:hover > a > div, #menu > div.active {
	filter: contrast(1);
}

#footerMenu > div > div, #header #alert > a > div, #visitInfo > div > div, #menu > div:not( #menuUser ):not( .logo ) > div,
.sr > div.srCont > div > a > .cnt, .sra > div > a > .cnt, 
.rewardUse span {
    background-color: #ffcc03;
    border-radius: 50%;
    color: #000000;
    position: absolute;
    top: 7px;
    right: 0;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-weight: 500;
    text-align: center;
    line-height: 11px;
    font-family: tahoma;
    z-index: 2;
}

.sr > div.srCont > div > a > .status, .sra > div > a > .status, .rGal .status {
    background-color: #000000;
    color: #FFFFFF;
    position: absolute;
    top: 14px;
    right: 0;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'kanit-regular', sans-serif !important;
    font-weight: 500;
    text-align: center;
    line-height: 11px;
    padding: 5px 10px 5px 10px;
    border-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    z-index: 2;
}

.rGal .status {
    top: auto;
    bottom: 50px;
}

.sr > div.srCont > div > a > .cnt, .sra > div > a > .cnt {
    right: 0;
    top: 14px;
    width: auto;
    padding: 0 5px 0 10px;
    border-radius: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    min-width: 10px;
}

.rGal .cnt {
	background-color: #ffcc03 !important;
	color: #000000 !important;
}

.rewardUse span {
	top: -7px;
    right: -7px;
}

.rewardUse .label, .rewardAdd .label, #dialog .label {
    position: absolute;
    left: 45px;
    top: -10px;
    background-color: #8aa30f;
    color: #FFFFFF;
    width: fit-content;
    border-radius: 5px;
    padding: 1px 10px 1px 10px;
    line-height: 21px;
    font-size: 13px;
    line-height: 17px;
    font-family: 'kanit-regular', sans-serif !important;
    font-weight: 500;
    text-align: center;
}

body.dark .rewardUse .label, body.dark .rewardAdd .label, body.dark #dialog .label {
	background-color: #5b6a11;
}

#dialog .label {
	top: 0;
	left: 0; 
  	right: 0; 
  	margin-inline: auto; 
  	width: fit-content;
}

#menu > div:not( #menuUser ):not( .logo ) > div {
	top: 1px;
}

#footerMenu > div > div, #footerMenu > div > div, #header #alert > a > div {
	filter: contrast(2);
	background-color: #d8ad02;
}

#header #alert > a > div, #visitInfo > div > div {
    top: -3px;
    right: -3px;
}

footer {
	margin-bottom: 100px;
}

#footerMenu > div > span, #menu > div:not( #menuUser ):not( .logo ) > span {
	color: #c2c7c8;
    position: absolute;
    top: 23px;
    left: 0;
    font-size: 10px;
    width: 100%;
    font-family: arial;
}

#menu > div:not( #menuUser ):not( .logo ) > span {
	top: 10px;
    left: 1px;
    font-size: 8px;
    text-align: center;
    width: 13px;
}

.loyaltyTable {
    position: relative;
    width: 100%;
    float: left;
}

.loyaltyTable table {
	width: 100%;
}

.loyaltyTable table tr td {
    border-bottom: 1px solid #e1e1e1;
    background-color: #FFFFFF;
    padding: 10px 20px 10px 20px;
    font-weight: 400;
	font-family: 'galano-regular', sans-serif;
}

.loyaltyTable table tr:first-child td {
	border-top: 1px solid #e1e1e1;
}

.loyaltyTable table tr td:first-child {
	border-left: 1px solid #e1e1e1;
	font-weight: 500;
	font-family: 'galano-medium', sans-serif;
}

.loyaltyTable table tr td:last-child {
	border-right: 1px solid #e1e1e1;
    text-wrap-mode: nowrap;
}

.loyaltyTable table tr:first-child td:first-child {
	border-top-left-radius: 20px;
}

.loyaltyTable table tr:first-child td:last-child {
	border-top-right-radius: 20px;
}

.loyaltyTable table tr:last-child td:first-child {
	border-bottom-left-radius: 20px;
}

.loyaltyTable table tr:last-child td:last-child {
	border-bottom-right-radius: 20px;
}

.loyaltyTable table tr td:last-child {
	text-align: right;
}

body.dark .loyaltyTable table tr td {
    background-color: #16171a;
    border-color: #404040;
}

@media screen and (max-width: 390px) {
    .loyaltyTable table {
        overflow: auto;
        display: block;
        padding-right: 20px !important;
    }
    
    .loyaltyTable table tbody {
        display: block;
        min-width: max-content;
    }
    
    .loyaltyTable:after {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        right: -1px;
        width: 20px;
        height: 100%;
        background-repeat: repeat-y;
        background-position: right center;
        background-image: url(/images/main/table_gradient.png);
    }
    
    body.dark .loyaltyTable:after {
        background-image: url(/images/main/table_gradient-dark.png);
    }
}

.loyaltyR {
	float: left;
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 20px;
    display: flex;
    align-items: center;
    border: 1px solid #dfdfdf;
}

body.dark .loyaltyR {
    background-color: #16171a;
    border-color: #29292a;
}

.loyaltyR .logo {
	float: left;
    width: 100px;
    padding: 20px;
}

.loyaltyR .logo img {
	width: 100%;
	max-height: 100%;
}

.loyaltyR .cont {
	float: left;
	width: 50%;
	padding: 20px;
}

.loyaltyR .cont h3 {
	margin: 0 0 10px 0;
}

.loyaltyR .buy {
	float: right;
	width: 240px;
	padding: 20px;
	text-align: right;
}

.loyaltyR .buy a {
	display: block;
    width: fit-content;
    margin: 0 0 0 auto;
}

body.dark .loyaltyR .buy a {
	background-color: #ad8300;
	color: #FFFFFF;
}

body.dark .loyaltyR .buy a:hover {
	background-color: #000000;
}

.loyaltyR .buy input {
	width: fit-content;
}

@media screen and (max-width: 600px) {
	.loyaltyR {
		float: left;
		width: 100%;
	    display: block;
	}
	
	.loyaltyR .cont {
		width: calc( 100% - 180px );
	}
	
	.loyaltyR .buy {
		width: calc( 100% - 40px );
		padding-top: 0;
	}
	
	.loyaltyR .buy a {
	    margin: 0 auto 0 auto;
	}
}

@media screen and (max-width: 390px) {
	.loyaltyR .logo, .loyaltyR .cont {
		width: calc( 100% - 40px );
		text-align: center;
	}
	
	.loyaltyR .logo {
		padding-bottom: 0;
	}
	
	.loyaltyR .logo img {
		max-height: 80px;
		max-width: 90%;
	}
}

.src {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    cursor: pointer;
    color: #000000;
}

body.dark .src {
    color: #d0d0d0;
}

.src .logo {
	float: left;
    width: calc( 20% - 40px );
    padding: 20px;
    background-color: #FFFFFF;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
    display: flex;
    align-items: center;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
}

.src .cont {
	float: left;
    width: calc( 55% - 44px );
    padding: 20px;
    background-color: #FFFFFF;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}

.src .space {
    float: left;
    height: calc(100% - 25px);
    top: 13px;
    left: calc(75% - 4px);
    width: 0px;
    border-right: 2px dashed #efefef;
    position: absolute;
    z-index: 1;
}

body.dark .src .space {
	border-color: #333333;
}

.src .cont h2 {
	margin-top: 0;
    margin-bottom: 10px;
}

.src .points {
	float: left;
    width: calc( 25% - 40px );
    /* padding: 20px 20px 20px 10px; */
    padding: 20px;
    background-color: #FFFFFF;
	border-radius: 20px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* mask-image: radial-gradient(circle at 10px, transparent 10px, red 10.5px);
    mask-position: -20px;
    mask-size: 107% 32px; */
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
   	align-content: center;
}

body.dark .src .logo, body.dark .src .cont, body.dark .src .points {
	border-color: #404040;
    background-color: #16171a;
}

.src .points > div:nth-child( 2 ) {
	font-size: 30px;
}

.src .points > div {
	width: 100%;
	line-height: 30px;
	font-weight: bold;
}

.src .cont .href {
	float: left;
	margin-top: 30px;
	display: flex;
	width: 100%;
}

.src .cont .href a {
	width: fit-content;
	margin: 0 auto 0 auto;
}

body.dark .src .cont .href a {
    background-color: #ad8300;
    color: #FFFFFF;
}

body.dark .src .cont .href a:hover {
    background-color: #000000;
}

@media screen and (max-width: 600px) {
	.src .logo {
	    width: 100%;
	    max-height: 50px;
        justify-content: center;
        border-bottom: none;
	    border-bottom-left-radius: 0;
	    border-top-right-radius: 20px;
	    border-right: 1px solid #dfdfdf;
	}
	
	.src .logo img {
		max-height: 100%;
	}
	
	.src .cont {
		width: 100%;
        border-top: none;
        border-bottom: 2px dashed #efefef;
        border-radius: 0;
	    border-left: 1px solid #dfdfdf;
	    border-right: 1px solid #dfdfdf;
	    text-align: center;
        padding-top: 0;
	}
	
	.src .space {
		display: none;
	}
	
	.src .points {
		/* padding: 20px 20px 30px 20px; */
		width: 100%;
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-left: 1px solid #dfdfdf;
        /* mask-image: radial-gradient(circle at 50% 10px, transparent 10px, red 10.5px);
	    mask-position: 7% 97px;
	    mask-size: 30px 106%; */
	}
}

.sr, .sra {
	float: left;
	position: relative;
	width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    padding-bottom: 10px;
}

.sra {
	display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 450px) {
	.sra {
	    grid-template-columns: repeat(1, 1fr);
	}
	
	.sra span.canceled {
	    right: -16% !important;
    	top: 13% !important;
	}
	
	.sra > div > a > .text > h3 {
		height: auto !important;
	}
	
	#footerMenu {
		grid-gap: 5px;
	}
}

.sr > div.srCont {
    display: flex;
    width: max-content;
    margin: 0 auto 0 auto;
    float: left;
    transition: margin-left .5s ease-in-out;
	-webkit-transition: margin-left .5s ease-in-out;
	-moz-transition: margin-left .5s ease-in-out;
}

.sr > div.srCont > div {
	float: left;
	width: 250px;
	border-radius: 20px;
	margin-left: 15px;
	position: relative;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #FFFFFF;
}

.sr > div.srCont > div.actual {
	border-color: #8aa30f;
	background-color: #fdfff3;
}

.sr > div.srCont > div.actual a {
	cursor: default;
}

.sra > div:not( #nextBut ) {
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: #FFFFFF;
}

.sr > div.srCont > div:first-child {
	margin-left: 0;
}

.sr > div.srCont > div > a, .sra > div > a {
	float: left;
	width: 100%;
	height: 100%;
    display: block;
    text-decoration: none;
    position: relative;
}

.rGal .rGalItem:before {
	content: '' ;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(22,23,26);
	background: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(22,23,26,0.5) 100%);
	background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(22,23,26,0.5) 100%);
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(22,23,26,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1f1f21",endColorstr="#000000",GradientType=1);
}

.webcamImgCont {
	width: 100%;
	float: left;
	position: relative;
	margin-top: 20px;
}

.sr > div.srCont > div > a > div.labels, .sra > div > a > div.labels, .rGal .labels, .webcamImgCont .labels {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 0;
}

.rGal .labels {
	top: auto;
	bottom: 30px;
}

.loyaltyTitle {
	text-align: center;
}

.loyaltyText {
	margin-bottom: 30px;
}

.loyaltyTitle .logo img {
    max-width: 200px;
    max-height: 100px;
}

.loyaltyTitle .points {
    padding: 20px 40px 20px 40px;
    background-color: #FFFFFF;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #e1e1e1;
    align-content: center;
    line-height: 30px;
    font-weight: bold;
    margin: 30px auto 0 auto;
    width: fit-content;
}

body.dark .loyaltyTitle .points {
    background-color: #16171a;
    border-color: #404040;
}

.loyaltyTitle .points > div:nth-child( 2 ) {
    font-size: 30px;
}

.sr > div.srCont > div > a > div.labels > div, .sra > div > a > div.labels > div, .rGal .labels > div, .webcamImgCont .labels > div {
	padding: 1px 10px 1px 10px;
	color: #FFFFFF;
	background-color: #8aa30f;
	font-size: 11px;
    margin: 5px 0 0 0;
    line-height: 17px;
    font-weight: 400;
    font-family: 'kanit-regular', sans-serif !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: fit-content;
}

.sr > div.srCont > div > a > div.labels > div.distance, .sra > div > a > div.labels > div.distance, .rGal .labels > div.distance {
	background-size: 8px;
    background-image: url(/images/client/home_white.svg);
    background-repeat: no-repeat;
    background-position: left+8px center;
    padding-left: 23px;
}

.sr > div.srCont > div > a > div.labels > div.length, .sra > div > a > div.labels > div.length, .rGal .labels > div.length {
	background-size: 12px;
    background-image: url(/images/client/distance.svg);
    background-repeat: no-repeat;
    background-position: left +5px center;
    padding-left: 23px;
}

.sr > div.srCont > div > a > div.labels > div.black, .sra > div > a > div.labels > div.black, .rGal .labels > div.black {
	background-color: #16171a;
}

.sr > div.srCont > div > a > div.labels > div.red, .sra > div > a > div.labels > div.red, .rGal .labels > div.red {
	background-color: #c21a2b;
}

.sr > div.srCont > div > a > div.labels > div.blue, .sra > div > a > div.labels > div.blue, .rGal .labels > div.blue, .webcamImgCont .labels div.blue {
	background-color: #00a1ff;
}

.sr > div.srCont > div > a > div.labels > div.blue2, .sra > div > a > div.labels > div.blue2, .rGal .labels > div.blue2, .webcamImgCont .labels div.blue2 {
	background-color: #1aa1c2;
}

.sr > div.srCont > div > a > div.labels > div.purple, .sra > div > a > div.labels > div.purple, .rGal .labels > div.purple, .webcamImgCont .labels div.purple {
    background-color: #ff00f7;
}

.sr > div.srCont > div > a > div.labels > div.orange, .sra > div > a > div.labels > div.orange, .rGal .labels > div.orange, .webcamImgCont .labels div.orange {
    background-color: #ffb310;
}

.sr > div.srCont > div > a > div.labels > div.ar, .sra > div > a > div.labels > div.ar, .rGal .labels > div.ar, .webcamImgCont .labels div.ar {
    background-color: #ff1072;
}

.sr > div.srCont > div > a > div.labels > div > a, .sra > div > a > div.labels > div > a, .rGal .labels > div > a, .webcamImgCont .labels div > a {
    color: #FFFFFF;
    text-decoration: none;
}

.webcamVideo {
	border-radius: 20px;
	padding: 0;
	border: none;
	max-width: 100%;
    width: 660px;
    height: 371px;
}

.webcamImg {
	border-radius: 20px;
}

.webcamVideo body {
	margin: 0;
}

@media screen and (max-width: 720px) {
	.webcamVideo {
	    max-height: 50vw;
	}
	
	.webcamVideo video {
		width: calc( 100vw - 60px );
	}
}

.temp {
    background-image: url(/images/icons/temperature.svg);
    background-position: left +7px center;
    background-size: 8px;
    background-repeat: no-repeat;
    padding-left: 20px !important;
}

.sr > div.srCont > div > a > div.labels > div.yellow, .sra > div > a > div.labels > div.yellow, .rGal .labels > div.yellow {
	background-color: #ffcc03;
}

.sr > div.srCont > div .img, .sra > div .img {
	width: 100%;
	height: 155px;
}

.sr > div.srCont > div .img > img, .sra > div .img > img {
  	object-fit: cover;
    max-width: none !important;
    width: 100%;
    height: 100% !important;
}

.sr > div.srCont > div .text, .sra > div .text {
    bottom: 0;
    padding: 15px;
    height: calc(100% - 185px);
    align-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

.sr > div.srCont > div .text > h3, .sra > div .text > h3 {
	float: left;
	width: 100%;
    padding: 0;
    margin: 0;
	color: #000000;
	text-decoration: none;
    font-size: 15px;
    line-height: 21px;
}

body.dark .sr > div.srCont > div .text > h3, body.dark .sra > div .text > h3 {
	color: #d0d0d0;
}

.sr > div.srCont > div .text > .distance, .sra > div .text > .distance {
    margin-top: 5px;
	color: #000000;
	text-decoration: none;
    font-size: 12px;
}

.sr > div.srCont > div .text > .address, .sra > div .text > .address {
    margin-top: 5px;
	color: #000000;
	text-decoration: none;
    font-size: 12px;
    line-height: 16px;
    width: 100%;
    float: left;
}

body.dark .sr > div.srCont > div .text > .address, body.dark .sra > div .text > .address {
	color: #d0d0d0;
}

.sr > div.srCont > div .text > .full, .sra > div .text > .full {
	float: left;
	width: 100%;
    margin-top: 5px;
	color: #000000;
	text-decoration: none;
    font-size: 12px;
    line-height: 16px;
}

body.dark .sr > div.srCont > div .text > .full, body.dark .sra > div .text > .full {
	color: #d0d0d0;
}

.sr > div.srCont > div .text > .date, .sra > div .text > .date {
    margin-top: 5px;
	color: #000000;
	text-decoration: none;
    font-size: 12px;
    line-height: 16px;
}

body.dark .sr > div.srCont > div .text > .date, body.dark .sra > div .text > .date {
	color: #d0d0d0;
}

.sr > div.srCont > div .canceled, .sra > div .canceled, .rGal.canceled .canceled {
    position: absolute;
    z-index: 1;
    background-color: #c21a2b;
    color: #FFFFFF;
    padding: 2px 10px 2px 10px;
    font-size: 11px;
    width: 50%;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(45deg);
    right: -17%;
    top: 10%;
    font-family: arial;
}

.sra > div .locked {
    position: absolute;
    z-index: 1;
    color: #FFFFFF;
    width: 25px;
    height: 25px;
    top: 15px;
    right: 15px;
    border-radius: 50%;
    background-color: #c21a2b;
    background-image: url(/images/client/locked_white.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center center;
}

.rGal.canceled .canceled {
    right: -19%;
    top: 9%;
}

@media screen and (max-width: 700px) {
	.rGal.canceled .canceled {
    	top: 7%;
	}
}

@media screen and (max-width: 600px) {
	.rGal.canceled .canceled {
    	top: 8%;
	}
}

@media screen and (max-width: 400px) {
	.rGal.canceled .canceled {
        right: -16%;
        top: 13%;
	}
}

.sr > div.srCont > div.canceled > a, .sra > div.canceled > a, .rGal.canceled .rGalWrapper, .rGal.canceled .labels {
    filter: grayscale(1);
}

#content img {
	max-width: 100%;
	height: auto;
}

#back {
	width: 30px;
    height: 25px;
    float: left;
    margin-right: 5px;
    background-image: url(/images/client/back_black.svg);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: left center;
    cursor: pointer;
}

body.dark #back {
	background-image: url(/images/client/back.svg);
}

#headPage.white #back, #headPage.black #back {
	background-image: url(/images/client/back.svg);
}

#headPage.black #back {
	margin-top: 7px;
}

.eventText ul, .eventText ol {
	margin: 0;
	padding: 0 0 0 15px;
}

.eventText ul li, .eventText ol li {
	margin-bottom: 5px;
}

.eventText ul li:last-child, .eventText ol li:last-child {
	margin-bottom: 0;
}

.eventText a {
	color: #2c2c2e;
	text-decoration: none;
}

body.dark .eventText a {
	color: #c4c4c9;
}

.eventText a:hover {
	text-decoration: underline;
}

.eventText > .date {
	float: left;
	width: 100%;
}

.eventText > .date > span {
	font-weight: bold;
}

.eventText > .date > .date {
	float: left;
    background-image: url(/images/main/calendar_gray.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left 5px;
    font-family: 'kanit-regular', sans-serif !important;
    font-weight: 600;
    font-size: 16px;
    line-height: 33px;
    padding-left: 30px;
}

.eventText > .date > .dateSmall {
	float: left;
    background-image: url(/images/main/calendar_gray.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left 5px;
    font-family: 'kanit-regular', sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 28px;
    padding-left: 30px;
}

body.dark .eventText > .date > .date, body.dark .eventText > .date > .dateSmall {
    background-image: url(/images/main/calendar.svg);
}

.eventText > .date > .calendar {
	float: right;
	margin-top: -7px;
}

.eventText > .date > .calendar > a, .nextTerm a.eBut {
    float: right;
    background-image: url(/images/main/calendar_black_add.svg) !important;
    background-position: right +20px center !important;
    background-size: 20px !important;
    background-repeat: no-repeat !important;
    padding: 10px 50px 10px 20px;
    text-decoration: none;
    color: #000000;
}

body.dark .eventText > .date > .calendar > a, body.dark .nextTerm a.eBut {
    background-image: url(/images/main/calendar_add.svg) !important;
}

.nextTerm a.eBut {
	float: left;
    background-size: 13px !important;
	padding: 2px 13px 2px 13px;
	background-position: center center !important;
    margin-top: -3px;
    border-radius: 5px;
}

.eventText > .date > .calendar > a:hover, .nextTerm a.eBut:hover {
	background-image: url(/images/main/calendar_add.svg) !important;
	color: #FFFFFF;
}

@media screen and (max-width: 600px) {
	.eventText > .date > .calendar > a {
		padding: 10px 25px 10px 25px;
    	background-position: right+15px center !important;
		font-size: 0;
	}
}

.eventText img {
	border-radius: 20px;
}

.equipment img {
	border-radius: 0;
}

.eventText .qr {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}

.eBut, .eButC, .eButE, #nextBut > div {
	clear: both;
	background-color: #ffcc03;
	border: 1px solid #ffcc03;
    color: #000000;
    text-decoration: none;
    padding: 10px 20px 10px 20px;
    border-radius: 30px;
    line-height: 25px;
   	width: fit-content;
   	font-family: 'kanit-medium', sans-serif;
    position: relative;
    background-image: linear-gradient(#0a294e, #0a294e) !important;
    background-position: 0% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 0% 100% !important;
}

body.dark .eBut, body.dark .eButC, body.dark #nextBut > div {
	background-color: #ad8300;
	border: 1px solid #ad8300;
    color: #FFFFFF !important;
}

body.dark .eBut:hover, body.dark .eButC:hover, body.dark #nextBut > div:hover {
	background-color: #29292a;
	border-color: #29292a;
}


.eBut.reverse, .eButC.reverse, .eButE.reverse {
	background-color: #29292a;
	border-color: #29292a;
    color: #FFFFFF !important;
}

.eBut.reverse:hover, .eButC.reverse:hover, .eButE.reverse:hover {
	background-color: #ffcc03;
	border: 1px solid #ffcc03;
	color: #000000 !important;
}

body.dark .eBut.reverse, body.dark .eButC.reverse, body.dark .eButE.reverse {
	background-color: #29292a;
	border-color: #29292a;
}

body.dark .eBut:hover.reverse, body.dark .eButC.reverse:hover, body.dark .eButE.reverse:hover {
	background-color: #ad8300;
	border: 1px solid #ad8300;
    color: #FFFFFF !important;
}

.qr a {
	background-image: url(/images/main/qr-code.svg) !important;
	background-size: 20px !important;
	background-position: left+20px center !important;
	background-repeat: no-repeat !important;
	padding-left: 50px;
	color: #000000 !important;
}

body.dark .qr a {
	background-image: url(/images/main/qr-code_white.svg) !important;
}

.qr a:hover, body.dark .qr a:hover {
	background-image: url(/images/main/qr-code_white.svg) !important;
	color: #FFFFFF !important;
}

.eventText .download {
	margin-bottom: 20px;
}

.download a {
	background-image: url(/images/icons/route/download_black.svg) !important;
	background-size: 20px !important;
	background-position: left+20px center !important;
	background-repeat: no-repeat !important;
	padding-left: 50px;
	color: #000000 !important;
}

body.dark .download a {
	background-image: url(/images/icons/route/download_white.svg) !important;
}

.download a.eButC:hover {
	color: #FFFFFF !important;
	background-image: url(/images/icons/route/download_white.svg) !important;
}

.eButE {
	background: transparent;
	border-color: #000000;
}

body.dark .eButE {
	border-color: #6f6e6e;
	color: #FFFFFF;
}

#nextBut > div {
	cursor: pointer;
    padding-right: 40px;
    background-image: url(/images/client/arrow-right_black.svg) !important;
    background-size: 15px !important;
    background-position: right +18px center !important;
    text-decoration: none !important;
}

body.dark #nextBut > div {
	background-image: url(/images/client/arrow-right.svg) !important;
}

.eBut.center, .eButC, .eButE, #nextBut > div {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#nextBut {
	float: left;
	width: 100%;
	margin-top: 20px;
}

.problem {
	float: left;
	width: 100%;
	margin-top: 20px;
	text-align: center;
}

.problem a {
	color: #aaaaaa;
}

.tt .eButC, .tt .eButE {
	margin: 0;
}

.tt {
	float: left;
	width: 60%;
	margin-bottom: 20px;
}

.tt:nth-child( 2 ) {
	width: 40%;
	text-align: right;
}

.tt:nth-child( 2 ) .eButE {
	margin-left: auto;
}

.eBut:hover, #nextBut > div:hover {
	background-color: #16171a;
	color: #FFFFFF;
    background-size: 100% 100% !important;
    padding-right: 40px;
    background-image: url(/images/client/arrow-right.svg) !important;
    background-size: 15px !important;
    background-position: right +18px center !important;
    text-decoration: none !important;
    border-color: #16171a;
}

.eButC:hover, .eButE:hover {
	background-color: #16171a;
	color: #FFFFFF;
	text-decoration: none !important;
	border-color: #16171a;
}

a, .eBut {
	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, background-size 0.2s ease-in-out, border-color 0.2s ease-in-out, padding-right 0.2s ease-in-out;
	-webkit-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, background-size 0.2s ease-in-out, border-color 0.2s ease-in-out, padding-right 0.2s ease-in-out;
	-moz-transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, background-size 0.2s ease-in-out, border-color 0.2s ease-in-out, padding-right 0.2s ease-in-out;
}

#appAdd {
	display: none;
}

.hWarning, .hError {
	font-size: 20px;
    color: #949494;
    text-align: center;
}

.hError {
	color: red;
}

.hError.ok {
	color: #8aa30f;
}

.fail {
    float: left;
    width: 100%;
}

.fail .fail-head1 {
	color: #f1f1f1;
    font-size: 282px;
    line-height: 282px;
    font-weight: bold;
    text-align: center;
    text-transform: none;
}

.fail .fail-head2 {
    top: 105px;
    font-weight: bold;
    font-size: 81px;
    line-height: 101px;
    color: #0a294e;
    font-weight: 100;
    text-align: center;
    width: 100%;
}

.fail .fail-t1 {
    font-size: 23px;
    line-height: 30px;
    text-align: center;
}

.fail .fail-t2 {
	text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

@media screen and (max-width: 700px) {
	.fail .fail-head1 {
        font-size: 192px;
    	line-height: 222px;
	}
	
	.fail .fail-head2 {
	    top: 95px;
	    font-size: 61px;
	    line-height: 61px;
	}
}

@media screen and (max-width: 450px) {
	.fail .fail-head1 {
        font-size: 132px;
    	line-height: 152px;
	}
	.fail .fail-head2 {
        top: 65px;
	    font-size: 41px;
	    line-height: 41px;
	}
}

.rF {
	display: none;
    float: left;
    width: 100%;
    margin-top: 20px;
}

.hall .rF {
	width: auto;
    margin-top: 5px;
}

.rF .rFP,
.rF .rFN {
	float: right;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #e1e1e1;
	background-color: #FFFFFF;
    background-image: url( '/images/main/arrow-page-left.svg' );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 13px;
	cursor: pointer;
}

body.dark .rF .rFP,
body.dark .rF .rFN {
	background-color: #7a7a7a;
	border-color: #7a7a7a;
}

.rF .rFN {
	margin-left: 20px;
	background-image: url( '/images/main/arrow-page-right.svg' );
}

.rF > div:not( .disabled ):hover {
	background-color: #ededed;
}

.rF > div.disabled {
	cursor: default;
	opacity: 0.3;
	border-color: #949494;
}

.rGal {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.rGal .bx-viewport {
	height: 350px !important;
}

.rGal .bx-wrapper .bx-loading {
	background: transparent !important;
}

@media screen and (max-width: 620px) {
	.rGal .bx-viewport {
		height: 60vw !important;
	}
}

.rGal .bx-wrapper {
    position: relative;
    padding: 0;
    margin-bottom: 0;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.rGal .bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #666;
    padding-top: 0;
    display: flex;
    justify-content: center;
    width: max-content;
    justify-self: anchor-center;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    width: 100%;
    bottom: 22px;
    padding-top: 0;
}

.rGal .bx-wrapper .bx-pager.bx-default-pager a {
	width: 8px;
    height: 8px;
    background: #16171a	;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    position: relative;
    top: 7px;
    margin: 0 5px;
    display: block;
    float: left;
    font-size: 0;
    line-height: 0;
    border-radius: 5px;
    border: 1px solid #FFFFFF77;
}

.rGal .bx-wrapper .bx-pager.bx-default-pager a:hover, .rGal .bx-wrapper .bx-pager.bx-default-pager a.active, .rGal .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #ffcc03;
    border-color: #ffcc03;
}

.rGal .bx-wrapper .bx-pager.bx-default-pager a.active {
    width: 40px;
}

.rGal .rGalWrapper {
    display: inline-box;
    display: -webkit-inline-box;
    overflow: hidden;
    position: relative;
}

.rGal .rGalItem {
	float: left;
    overflow: hidden;
    position: relative;
    display: inline-flex;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0;
    width: 100vw !important;
    max-height: 380px;
    max-width: 700px;
}

.rGal .rGalItem a {
	float: left;
	width: 100%;
	height: 100%;
}

.rGal .rGalItem img {
    max-width: 760px !important;
    max-height: 370px !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
}

.rGal .sliderCnt {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 1;
    padding: 0px 10px 0px 25px;
    font-size: 10px;
    color: #d4d4d4;
    bottom: 15px;
}

.nextTerm {
    float: left;
    width: 100%;
    line-height: 23px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.nextTerm a {
    float: left;
    margin-right: 7px;
    text-decoration: none;
    line-height: 20px;
}

.nextTerm:last-child {
	margin-bottom: 0;
}

.nextTerm .canceled {
    background-color: #c21a2b;
    color: #FFFFFF;
    border-radius: 5px;
    padding: 0 10px 0 10px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: arial;
    margin-top: -3px;
    margin-right: 7px;
}

#rVideo {
	float: left;
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

#rVideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.tc {
	float: left;
	width: 100%;
	margin-bottom: 20px;
	display: grid;
    grid-gap: 20px;
    margin-top: 15px;
    grid-template-columns: repeat(2, 1fr);
}

.tco {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}

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

.mt40 {
	margin-top: 40px !important;
}

.mt10 {
	margin-top: 10px !important;
}

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

.nomt {
	margin-top: 0 !important;
}

.nomb {
	margin-bottom: 0 !important;
}

.tc > div, .tco > div, .tc > a {
	text-align: center;
    background-color: #f2f2f2;
    padding: 10px;
    border-radius: 30px;
    font-weight: bold;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.tc > div > p, .tco > div > p {
    clear: both;
    float: left;
    width: 100%;
}

body.dark .tc > div, body.dark .tco > div, body.dark .tc > a {
	background-color: #16171a;
}

.tc > a:hover {
	background-color: #ededed;
	text-decoration: none;
}

.tc > a.menu, .tc > a.menuWeek {
	padding-top: 40px;
	font-weight: normal;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center 10px;
	background-image: url( '/images/client/restaurant2_black.svg' ) ;
}

.tc > a.menuWeek {
	background-image: url( '/images/client/restaurant1_black.svg' ) ;
}

body.dark .tc > a.menu {
	background-image: url( '/images/client/restaurant2_white.svg' ) ;
}

body.dark .tc > a.menuWeek {
	background-image: url( '/images/client/restaurant1_white.svg' ) ;
}

.tco > div {
	width: fit-content;
	padding: 10px 30px 10px 30px;
	margin: 0 auto 0 auto;
}

.tco > div {
	width: fit-content;
	padding: 10px 30px 10px 30px;
	margin: 0 auto 0 auto;
}

.tco > div.bill > span {
    background-image: url(/images/client/price_black.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    padding: 10px 10px 0 40px;
    display: block;
    width: fit-content;
    margin: 0 auto 0 auto;
}

.tc:not( .nobef ) > div:first-child:before {
    position: absolute;
    content: '';
    top: 50%;
    right: -15px;
    width: 10px;
    height: 1px;
    background: #ceced4;
}

body.dark .tc:not( .nobef ) > div:first-child:before {
    background: #2d2e31;
}

.tc > div > div, .tco > div > div {
	font-weight: normal;
	font-size: 12px;
	text-transform: uppercase;
	width: 100%;
}

.tc > div.done {
    background-color: #e8efe4;
    color: #93a53b;
    position: relative;
}

.tc > div.done:after {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	right: -5px;
	top: -5px;
	background-color: #8aa30f;
	border-radius: 50%;
	background-image: url( '/images/main/yes_white.svg' ) ;
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center center;
}

.visitStatus, .packageStatus {
    text-align: center;
    margin-bottom: 5px;
    float: left;
    width: 100%;
}

.visitStatus span, .packageStatus span {
	font-weight: bold;
}

.srr, .srg {
	float: left;
	width: 100%;
	display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(1, 1fr);
}

.srr > div, .srg > div {
	background-color: #f2f2f2;
	border-radius: 20px;
    padding: 15px;
	position: relative;
}

body.dark .srr > div, body.dark .srg > div {
	background-color: #16171a;
}

.srr > div {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.srr > div > .name {
	float: left;
	width: 100%;
	font-weight: bold;
	font-size: 17px;
	margin-bottom: 10px;
}

.srr > div > .code {
	border-radius: 15px;
	background-color: #0a294e;
	color: #FFFFFF;
	padding: 5px 10px 5px 10px;
	font-weight: bold;
	margin-right: 10px;
	font-family: arial;
}

.srr > div > span, .srg > div > span {
    font-size: 55px;
    font-weight: bold;
    color: #fafafa;
    position: absolute;
    bottom: 0;
    right: 10px;
    line-height: 70px;
    font-family: 'kanit-medium';
}

body.dark .srr > div > span, body.dark .srg > div > span {
    color: #000000;
}

.srr > div > div, .srg > div > div {
	position: relative;
}

.srg > div > .name > span {
	font-weight: bold;
}

.srg > div > .id {
	background-repeat: no-repeat;
    background-position: left center;
    font-family: arial;
    background-size: 13px;
    padding-left: 20px;
    margin-top: 10px;
	background-image: url( '/images/client/id-card_black.svg' );
}

body.dark .srg > div > .id {
	background-image: url( '/images/client/id-card_white.svg' );
}

.srr > div > .status {
	margin-right: auto;
}

.srr > div > .date {
	width: 100%;
	font-weight: bold;
	margin-top: 10px;
}

.srr > div > .buts {
	border-radius: 5px;
	color: #FFFFFF;
}

.srr > div > .description {
	margin-top: 10px;
    width: 100%;
    font-style: italic;
}

.srr > div > .pin {
	margin-top: 10px;
    width: 100%;
    text-align: center;
}

.srr > div > .pin > span {
	display: block;
    width: fit-content;
    margin: 8px auto 0 auto;
    font-weight: bold;
    font-size: 20px;
    border: 1px solid #0a294e;
    color: #FFFFFF !important;
    background-color: #0a294e;
    padding: 5px 15px 5px 15px;
    border-radius: 20px;
    font-family: arial;
    letter-spacing: 3px;
}

.readMore {
	position: relative;
    max-height: 70px;
    overflow: hidden;
    float: left;
    width: 100%;
    padding-bottom: 42px;
}

.readMoreLink {
	width: 100%;
	height: 40px;
    position: absolute;
    top: 70px;
    left: 0px;
    background-repeat: repeat-x;
    background-position: bottom center;
    background-image: url(/images/main/readmore_gradient.png);
    display: flex;
    align-items: end;
}

body.dark .readMoreLink {
    background-image: url(/images/main/readmore_gradient-dark.png);
}

#infoDetail {
	float: left;
	width: 100%;
	clear: both;
	overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#infoDetail > #infoDetailCont > div {
    float: left;
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 13px 13px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#infoDetail > #infoDetailCont > div:last-child {
    margin-right: 0;
}

#infoDetail .phone, #infoDetail .email, #infoDetail .www {
	padding-left: 20px;
}

#infoDetail .contact {
	font-weight: bold;
}

#infoDetail .phone {
	background-image: url( '/images/client/phone_black.svg' );
}

#infoDetail .email {
	background-image: url( '/images/client/email_black.svg' );
}

#infoDetail .www {
	background-image: url( '/images/client/www_black.svg' );
}

body.dark #infoDetail .phone {
	background-image: url( '/images/client/phone_white.svg' );
}

body.dark #infoDetail .email {
	background-image: url( '/images/client/email_white.svg' );
}

body.dark #infoDetail .www {
	background-image: url( '/images/client/www_white.svg' );
}

#fbg {
	display: none;
    background: #FFFFFFCC;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
}

body.dark #fbg {
    background: #000000CC;
}

.cWarning, .cInfo, .cIInfo {
	float: left;
    width: calc(100% - 75px);
    border-radius: 20px;
    background-color: #ffec9f;
    padding: 15px 15px 15px 60px;
    margin-top: 20px;
    font-style: italic;
    font-size: 13px;
    line-height: 21px;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: left +19px center;
    background-image: url(/images/client/warning_black.svg);
}

body.dark .cWarning, .cInfo, .cIInfo {
    background-color: #302703;
}

.cIInfo {
    background-image: url(/images/client/info_black.svg);
}

.cInfo, .cIInfo {
	background-color: #f2f2f2;
}

body.dark .cWarning, body.dark .cInfo, body.dark .cIInfo {
    background-image: url(/images/client/warning_white.svg);
}

body.dark .cIInfo {
    background-image: url(/images/client/info_white.svg);
}

body.dark .cInfo, body.dark .cIInfo {
    background-color: #323030;
}

.poiMapTitle {
	float: left;
	width: 100%;
	font-weight: bold;
    margin-bottom: 10px;
    font-size: 15px;
}

.poiMapHref {
	width: 100%;
	margin-top: 10px;
}

.poiMapHref > a {
	color: #16171a !important;
}

.poiMapImage {
    width: 100%;
    margin-bottom: 10px;
}

.poiMapImage > img {
	width: 100%;
	border-radius: 20px;
}

.rMap {
	float: left;
	width: 100%;
	height: 220px;
	margin-top: 20px;
	border-radius: 20px;
}

.rMap.big {
	margin-top: 0;
	height: calc(100vh - 270px);
}

#menu {
	display: none;
	position: fixed;
    bottom: 95px;
    right: calc( 50% - 283px );
    z-index: 9;
    background-color: #16171a;
    width: 200px;
    border-radius: 20px;
    color: #ababad;
    padding: 15px;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.3);
}

body.dark #menu {
	background-color: #202020;
}

#menu:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #16171a;
    position: absolute;
    bottom: -8px;
    right: 47px;
    transform: translate(-50%, 0);
    z-index: -1;
}

@media screen and (max-width: 620px) {
	#menu {
	    right: 15px;
	}
	
	#menu:before {
		right: 7vw;
	}
}

@media screen and (max-width: 420px) {
	#menu:before {
		right: 6vw;
	}
}

#menu > div:not( #menuUser ):not( .logo ) {
    float: left;
    width: calc(100% - 20px);
    margin: 5px 0 5px 0;
    position: relative;
    padding-left: 24px;
    background-size: 15px 15px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

#menu hr {
    background-color: transparent;
    border: none;
    border-top: 1px solid #3e3e3e;
    height: 1px;
    margin: 5px 0 5px 0;
    float: left;
    width: 100%;
}

#menu .logo, #headHome .logo {
	float: left;
	width: 18px;
   	margin: 4px 0 0 0;
}

#headHome .logo {
    width: 22px;
    margin: 0px 15px 0 0;
}

#menu .logo img, #headHome .logo img {
	max-width: 100%;
}

.footerA {
	list-style: none;
    margin: 0;
    padding: 20px 20px 0 20px;
}

.footer li {
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.footerA a {
	float: left;
	width: 100%;
	text-align: center;
	color: #b8b4b4;
	text-decoration: none;
}

body.dark .footerA a {
	color: #626262;
}

.footerA a:hover, body.dark .footerA a:hover {
	color: #848484;
}

#headUser, #menuUser {
    border-radius: 50px;
    padding: 3px 20px 3px 3px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#headUser {
	background-color: #ffffff24;
	backdrop-filter: blur(2px);
}

#menuUser {
    float: right;
    margin-bottom: 20px;
   	width: calc(100% - 55px);
   	border-color: #3e3e3e;
   	background-image: url(/images/client/arrow-right.svg) !important;
    background-size: 15px !important;
    background-position: right +11px center !important;
    background-repeat: no-repeat;
}

.ui-dialog {
	border-radius: 20px;
	-webkit-box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.35);
	box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.35);
}

.ui-dialog .ui-dialog-titlebar {
	border-radius: 10px;
    padding: 10px 13px 10px 13px;
    font-family: 'kanit-regular', sans-serif !important;
}

.ui-dialog .ui-dialog-buttonpane {
	border-radius: 10px;
}

.ui-widget-header .ui-dialog-titlebar-close {
    margin-top: -9px;
}

body.dark .ui-widget-header .ui-dialog-titlebar-close {
    background-image: url(/css/ui/custom-theme/images/ico-hide.png) !important;
}

.ui-dialog .code {
    font-size: 30px;
    font-family: 'kanit-regular', sans-serif !important;
    background-color: #0a294e;
    padding: 5px 15px 5px 20px;
    border-radius: 40px;
    margin: 20px auto 10px auto;
    width: max-content;
    font-weight: bold;
    letter-spacing: 8px;
    color: #FFFFFF;
}

.ui-dialog .error {
	font-size: 20px;
    color: #c21a2b;
    text-align: center;
}

.ui-dialog .ok {
	font-size: 20px;
    color: #8aa30f;
    text-align: center;
}

.ui-dialog .ui-dialog-content {
    padding: 0 15px 15px 15px;
    min-height: auto !important;
}

.myButs {
	width: 324px;
    clear: both;
    float: left;
    margin-top: 10px;
}

.myBut {
    text-align: center;
    width: max-content;
    margin: 0 auto 0 auto;
    float: none;
}

.myBut a {
	margin: 5px 0 5px 0;
    float: left;
    border: 1px solid #16171a;
    border-radius: 30px;
    padding: 7px 30px 10px 50px;
    background-color: #16171a;
    color: #FFFFFF !important;
    background-repeat: no-repeat;
    background-position: left +15px center;
    background-size: 25px;
    text-align: left;
    width: 242px;
    font-size: 14px !important;
    text-decoration: none;
    line-height: 16px;
    font-family: 'kanit-regular', sans-serif !important;
}

.myBut a span {
	display: block;
	font-weight: bold;
}
	
.myBut a:hover {
	text-decoration: none !important;
    background-color: #000000;
    border-color: #000000;
}

.myBut.googleWallet a {
	background-image: url( '/images/main/google_wallet.svg' ) ;
}

.myBut.appleWallet a {
	background-image: url( '/images/main/apple_wallet.svg' ) ;
}

.myBut.pdf, .myBut.print {
	float: left;
	width: 65px;
	display: table;
}

.myBut.pdf {
	margin-right: 10px;
}

.myBut.pdf a, .myBut.print a {
	background-image: url( '/images/main/pdf_button.svg' ) ;
    padding: 10px 30px 10px 50px;
    width: 80px;
    float: left;
}

.myBut.pdf a {
	width: 70px;
	background-size: 20px;
    background-position: left +18px center;
}

.myBut.print a {
	background-image: url( '/images/main/ico_print.svg' ) ;
}

.loginForm {
	width: 380px;
	max-width: 100%;
	margin: 0 auto 0 auto;
	display: flex;
	flex-wrap: wrap;
}

#loginForm {
	margin-bottom: 60px;
}

.loginForm.w100 {
	width: 100%;
}

#registrationForm {
	width: 760px;
}

#registrationForm .lF {
    float: left;
    width: 50%;
}

.loginForm .lF.lFP select  {
	width: 80px;
    padding: 22px 0 19px 12px;
    border: 1px solid #adb4b4;
}

#routeActivity, #filterMonth {
	width: 100%;
}

body.dark .loginForm .lF.lFP select {
    border-color: #383838;
}

.loginForm .lF.lFP input  {
    width: calc(100% - 145px);
    float: right;
}

#registrationForm .lF.lFa, #registrationForm .lF.lFf {
	width: 100%;
}

#registrationForm .lF:nth-child( odd ) .lFL {
	margin-left: 30px !important;
}

#registrationForm .lF:nth-child( odd ) .lFR {
    margin-left: 10px;
    width: calc( 100% - 10px ) ;
}

#registrationForm .lF.lFf .lFR {
    margin-left: 0;
    width: 100%;
}

@media screen and (max-width: 500px) {
	#registrationForm .lF {
	    width: 100%;
	}

	#registrationForm .lF:nth-child( odd ) .lFL, #registrationForm .lF:nth-child( odd ) .lFR {
	    margin-left: 0;
	    width: 100%;
	}
	
	#registrationForm .lF:nth-child( even ) .lFR {
	    margin-right: 0;
	    width: 100%;
	}
	
	#registrationForm .lF:nth-child( odd ) .lFL {
		width: auto;
		margin-left: 20px !important;
	}
}

.passwordCont {
	float: none !important;
	width: 220px;
	position: relative;
}

#logo {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0 0 20px 0;
	text-align: center;
}

#logo > div {
	color: #ffffff;
    font-size: 20px;
    font-family: 'kanit-regular';
    margin-top: 10px;
}

#logo img {
	width: 40px;
}

.loginForm .passwordCont,
#registrationForm .passwordCont {
	width: 100%;
}

.loginForm .passwordEye,
#registrationForm .passwordEye {
    width: 17px;
    height: 17px;
    position: absolute;
    background-image: url(/images/main/preview_on_black.svg);
    background-size: 17px;
    right: 19px;
    top: 18px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}

.loginForm .passwordEye.off,
#registrationForm .passwordEye.off {
    background-image: url(/images/main/preview_off_black.svg);
}

body.dark .loginForm .passwordEye,
body.dark #registrationForm .passwordEye {
    background-image: url(/images/main/preview_on_white.svg);
}

body.dark .loginForm .passwordEye.off,
body.dark #registrationForm .passwordEye.off {
    background-image: url(/images/main/preview_off_white.svg);
}

.click {
	cursor: pointer;
}

.ebError {
    position: absolute;
    width: auto;
    max-width: calc(100vw - 90px);
    z-index: 4;
    background: #f1dcdc url(/images/client/warning_black.svg) 10px 11px no-repeat;
    background-size: 14px;
    border: 1px solid #efefef;
    border-radius: 3px;
    line-height: 18px;
    /* white-space: nowrap; */
    padding: 8px 10px 9px 34px;
    font-size: 12px;
    margin-top: 4px;
    -webkit-box-shadow: 4px 4px 11px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 11px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 11px 0px rgba(0, 0, 0, 0.2);
    color: #000000;
    display: none;
    border-radius: 10px;
}

body.dark .ebError {
    background-color: #661c1c;
    background-image: url(/images/client/warning_white.svg);
    border: 1px solid #44464a;
    color: #FFFFFF;
}

.ebError.t30 {
	margin-top: 30px;
}

.ebError:after,
.ebError:before {
	bottom: 100%;
	left: 14px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ebError:before {
	border-bottom-color: #efefef;
	border-width: 8px;
	margin-left: -8px;
}

.ebError:after {
	border-bottom-color: #f1dcdc;
	border-width: 7px;
	margin-left: -7px;
}

body.dark .ebError:before {
	border-bottom-color: #44464a;
}

body.dark .ebError:after {
    border-bottom-color: #661c1c;
}

#loginFacebookButton, #loginGoogleButton, #loginAppleButton {
    float: left;
	display: block;
    width: calc(50% - 50px);
	padding: 10px 20px 10px 20px;
	outline: none;
	border: none;
	color: #000000;
	font-size: 14px;
	cursor: pointer;
	margin-top: 10px;
	border-radius: 20px;
	background-size: 15px 15px;
	background-position: left+20px center;
	background-repeat: no-repeat;
	background-image: url('/images/icons/facebook.svg' ) ;
	border: 1px solid #adb4b4 !important;
	background-color: #FFFFFF;
	text-align: center;
	transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
	-webkit-transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
	-moz-transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
	font-family: 'kanit-regular', sans-serif !important;
	text-transform: none;
}

#loginGoogleButton {
	margin-right: 15px;
}

#loginFacebookButton:hover, #loginGoogleButton:hover, #loginAppleButton:hover {
	text-decoration: none;
}

#loginFacebookButton span, #loginGoogleButton span, #loginAppleButton span {
	display: block;
	font-weight: bold;
}
    
#loginGoogleButton, #loginAppleButton {
	background-image: url('/images/icons/google_color_ico.svg' ) ;
}

#loginAppleButton {
	background-image: url('/images/icons/apple_black_ico.svg' ) ;
}

#loginAppleButton:hover {
	background-image: url('/images/icons/apple_white_ico.svg' ) ;
}

#loginFacebookButton:hover, #loginGoogleButton:hover, #loginAppleButton:hover {
	background-color: #000000;
	border-color: #000000 !important;
	color: #FFFFFF;
}

.loginForm input[type="submit"], .rBut {
	width: 100%;
	padding: 15px 20px 15px 20px;
	outline: none;
	border: none;
	background-color: #16171a;
	color: #FFFFFF;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	-webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;
	-moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;
	border-radius: 30px;
	font-family: 'kanit-regular', sans-serif !important;
	text-decoration: none;
}

.canceled .rBut {
    background-color: #ffcc03;
    color: #000000;
    cursor: default;
}

.loginForm input[type="submit"]:hover, .rBut:hover {
	background-color: #ffcc03;
	color: #000000;
}

body.dark .loginForm input[type="submit"], body.dark .rBut {
	background-color: #ad8300;
	color: #FFFFFF;
}

body.dark .loginForm input[type="submit"]:hover, body.dark .rBut:hover {
	background-color: #29292a;
}

.buyReward.rBut {
	background-color: #ffcc03;
	color: #000000;
}

.buyReward.rBut:hover {
	background-color: #16171a;
	color: #FFFFFF;
}

body.dark .buyReward.rBut:hover {
	background-color: #000000;
	color: #FFFFFF;
}

.loginForm .lF .lFR {
    float: left;
    width: 100%;
}

.loginForm .lF .lFR label {
   	color: #8f8f8f;
    float: left;
}

label {
    font-family: 'kanit-regular', sans-serif !important;
}

.loginForm input[type="text"],
.loginForm input[type="password"] {
	width: calc(100% - 50px);
    margin-left: 0;
    outline: none;
    border: none;
    border: 1px solid #adb4b4;
    background-color: #FFFFFF !important;
    padding: 23px 25px 15px 25px;
    font-size: 17px;
    letter-spacing: -.01em;
    border-radius: 30px;
}

body.dark .loginForm input[type="text"], body.dark .loginForm input[type="password"] {
	border: 1px solid #383838;
    background-color: #16171a !important;
    color: #FFFFFF;
}

.loginForm a {
	color: #000000;
    text-decoration: none;
}

.loginForm a:hover {
    text-decoration: underline;
}

.loginForm .lFa {
	text-align: center;
	margin-top: 30px !important;
}

.loginForm .lFor {
    float: left;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.loginForm .lFor > .lFR {
	position: relative;
   	float: left;
    width: 100%;
}

input[type="button"].save {
	background-image: url( '/images/loading.svg' ) ;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80px;
	color: transparent;
	background-color: #16171a;
}

.loginForm .lFor > .lFR > div {
   	display: inline-block;
    width: max-content;
    background-color: #fafafa;
    position: relative;
    z-index: 2;
    padding: 0 10px 0 10px;
    margin: 20px auto 10px auto;
}

.loginForm .lFor > .lFR:after {
	content: '';
    background-color: #dbdbdb;
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 17px;
    z-index: 1;
}

div.selectVisit {
	margin-top: 20px;
	margin-bottom: 10px;
	float: left;
	width: 100%;
}

select#selectVisit {
	display: block;
    background-color: #ffffff24;
    backdrop-filter: blur(2px);
    color: #FFFFFF;
    font-size: 20px;
    border-radius: 20px;
    padding: 8px 40px 8px 20px;
    margin: 0 auto 10px auto;
    cursor: pointer;
    font-weight: bold;
    width: auto;
}

select#selectVisit.dark {
    background-image: url(/images/main/arrow_white_down.svg);
}

.equipment {
	float: left;
	width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 30px;
}

.equipment > div {
	text-align: center;
	padding: 0 10px 0 10px;
    border-right: 1px solid #efefef;
}

.equipment > div:nth-child( 5 ), .equipment > div:nth-child( 10 ), .equipment > div:nth-child( 15 ), .equipment > div:nth-child( 20 ), #dialog.equipment > div:last-child {
	border-right: none;
}

.equipment > div:nth-child( n+6 ) {
	display: none;
}

#dialog.equipment > div:nth-child( n+6 ) {
	display: block;
}

#dialog.equipment > div {
	margin-bottom: 20px;
}

.equipment > div > img {
    max-width: 50px !important;
    clear: both;
    display: block;
    margin: 0 auto 0 auto;
}

.equipmentAll {
	float: left;
	width: 100%;
    text-align: center;
    margin: 20px auto 20px auto;
    cursor: pointer;
    color: #a9a8a8;
    font-size: 13px;
}

@media (max-width: 550px) {
    .equipment { 
        grid-template-columns: repeat(2, 1fr);
    }
    
    .equipment > div { 
        margin-bottom: 20px;
        border-right: none;
    }
    
    .equipment > div > img {
        opacity: 0.6;
    }
    
    .equipment > div:nth-child( 5 ) {
    	margin-bottom: 0;
        grid-column: 1 / 3;
    }
    
    #dialog.equipment > div:nth-child( 5 ) {
    	margin-bottom: 20px;
        grid-column: 1 / 2;
    }
}

div.selectVisit.page {
	margin-top: 0;
}
div.selectVisit.w100 {
	width: 100%;
	margin: 0;
}

div.selectVisit.w100 select {
	width: 100% !important;
}

div.selectVisit.page select#selectVisit {
	color: #000000;
    background-color: #FFFFFF;
}

select#selectVisit option {
	color: #000000;
	font-weight: normal;
	background-color: #FFFFFF;
}

#loading {
	position: fixed;
	z-index: 9998;
	width: 100px;
	height: 24px;
	border-radius: 5px;
	background: url(/images/loading.svg) center center no-repeat;
	top: 50%;
	left: 50%;
	top: calc( 50% - 12px);
	left: calc( 50% - 50px);
	background-size: 100px;
}

.loginForm .lF {
    float: left;
    width: 100%;
    margin-top: 20px;
	margin-bottom: 10px;
    color: #8f8f8f;
    position: relative;
}

.loginForm .lFe {
	width: 100%;
    float: left;
    margin-top: 10px;
    text-align: right;
}

.loginForm .lF .lFL, .formText {
    position: absolute;
    width: fit-content !important;
    background-color: #ffcc03;
    border-radius: 20px;
    margin-left: 20px !important;
    z-index: 1;
    top: -13px;
    color: #000000 !important;
    padding: 2px 15px 2px 15px !important;
    font-family: 'kanit-regular', sans-serif !important;
    font-size: 14px !important;
}

body.dark .loginForm .lF .lFL, body.dark .formText {
	background-color: #ad8300;
	color: #FFFFFF !important;
}

input[type="checkbox"]:checked::after {
    content: url(/images/main/checkmark.svg);
    width: 20px;
    height: 20px;
    position: absolute;
}

input[type="checkbox"] {
    cursor: pointer;
    position: relative;
    margin-top: 3px;
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 5px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #adb4b4;
    margin: -4px 10px 0 0;
    float: left;
}

.srb > div {
	display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 20px;
    padding: 10px;
}

body.dark .srb > div {
    background-color: #16171a;
}

.srb .text {
	width: calc(100% - 100px);
}

.srb .date {
	float: left;
    width: 60px;
    height: 60px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    color: #000000;
    border-radius: 20px;
    margin-right: 20px !important;
    line-height: 21px;
    font-weight: bold;
}

body.dark .srb .date {
    background-color: #212121;
    color: #ffffff;
}

.srb .date > span {
	clear: both;
	display: block;
	width: 100%;
	text-align: center;
    font-weight: normal;
}

.srb h2 {
	margin-top: 0;
	margin-bottom: 5px;
	font-size: 20px;
}

.srb a {
	color: #000000;
	text-decoration: none;
}

body.dark .srb a {
    color: #d0d0d0;
}

.srb a:hover {
	text-decoration: underline;
}

.srb .date.unreaded {
	background-color: #93a53b;
    color: #FFFFFF;
}

body.dark .srb .date.unreaded {
	background-color: #5b6a11;
}

.srb .date.today {
	background-color: #ffcc03;
    color: #000000;
}

body.dark .srb .date.today {
	background-color: #ad8300;
}

.srb .date > div {
	float: left;
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-family: 'kanit-medium';
    font-weight: normal;
}

.srb .text > div {
	margin-bottom: 10px;
}

.copy {
	cursor: copy;
}

.rCode {
	font-weight: bold;
    font-size: 17px;
    margin-top: 10px;
    border: 1px solid #AAAAAA;
    border-radius: 20px;
    display: block;
    clear: both;
    width: fit-content;
    padding: 8px 20px 8px 20px;
    margin-bottom: 5px;
}

.rCode.copy {
	background-image: url(/images/main/copy_gray.svg);
    background-position: right+20px center;
    background-repeat: no-repeat;
    background-size: 15px;
    padding-right: 50px;
}

body.dark .rCode.copy {
	background-image: url(/images/main/copy.svg);
}

.rCode.dialog {
	cursor: pointer;
}

.rCode.small {
	border: none;
}

.rCode.center {
	margin: 0 auto 5px auto ;
}

input.sError, textarea.sError, select.sError {
	border-color: #ae0000;
	background-color: #f9f1f1 !important;
}

body.dark input.sError, body.dark textarea.sError, body.dark select.sError {
	background-color: #302121 !important;
}

#info, #warning {
    position: fixed;
    left: 0;
    bottom: -70px;
    background-color: #8aa30f;
    width: calc( 100% - 40px );
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    padding: 20px;
    z-index: 10;
}

#warning {
	background-color: #e3571e;
}

#mapScroll {
    display: none;
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: #00000061;
    z-index: 7;
    font-size: 22px;
    color: #FFFFFF;
    padding: 20px;
    align-content: center;
    text-align: center;
}

.leaflet-control-locate a {
    background-image: url(/images/icons/pointer_black.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 21px;
}

.leaflet-control-locate.active a {
    background-image: url(/images/icons/pointer_green.svg);
}

#rAudio {
	float: left;
	width: 100%;
	margin-bottom: 20px;
}

#rAudio audio {
	width: 100%;
}

.rewardUse, .rewardAdd {
	cursor: pointer;
	position: relative;
	background-color: #f2f2f2;
	float: left;
	margin-bottom: 20px;
	border-radius: 20px;
	background-image: url(/images/main/yes_green.svg);
    background-size: 20px;
    background-position: left+15px center;
    background-repeat: no-repeat;
    padding: 15px 15px 15px 45px;
    width: calc(100% - 60px);
    transition: background-color .1s ease-in-out;
	-webkit-transition: background-color .1s ease-in-out;
	-moz-transition: background-color .1s ease-in-out;
}

body.dark .rewardUse, body.dark .rewardAdd {
	background-color: #16171a;
}

.rBut#rewardUse, .rBut#rewardAdd, .rBut#visitAddBut {
    margin-top: 20px;
}

.rewardUse:hover {
	background-color: #ebebeb;
}

.rewardAdd {
	background-color: #e8eee5;
	background-image: url(/images/icons/plus.svg);
}

.rewardAdd:hover {
	background-color: #d5e2cf;
}

.ui-accordion {
	float: left;
    width: 100%;
}

.ui-accordion h3 {
    border: none !important;
    background-color: #f2f2f2 !important;
    border-radius: 0 !important;
    width: calc( 100% - 40px ) !important;
    color: #000000 !important;
    padding: 15px 20px 15px 20px !important;
    line-height: 24px;
	transition: background .1s ease-in-out;
	-webkit-transition: background .1s ease-in-out;
	-moz-transition: background .1s ease-in-out;
    border-radius: 10px !important;
}

.ui-accordion h3:not( .ui-state-disabled ):not( .ui-state-active ):hover {
	background: #e4e4e4 !important;
}

.ui-accordion h3.ui-state-disabled, .ui-accordion h3.ui-state-active {
	cursor: default !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.ui-accordion .ui-accordion-header {
	text-align: left;
    margin: 20px 0 0 0;
}

.ui-accordion .ui-accordion-header:first-child {
	margin-top: 0;
}

.ui-accordion .ui-accordion-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-color: #ececec !important;
    width: calc( 100% - 40px ) !important;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

body.dark .ui-accordion .ui-accordion-header, body.dark .ui-accordion .ui-accordion-content {
    background-color: #16171a !important;
    border-color: transparent !important;
	color: #c4c4c9 !important;
}

.ui-accordion .ui-state-default .ui-icon, .ui-accordion .ui-state-active .ui-icon {
    background-image: url(/images/main/accordion-down.svg);
    background-position: center 4px;
    width: 20px;
    height: 25px;
    background-size: 100%;
    margin-right: 12px;
}

body.dark .ui-accordion .ui-state-default .ui-icon, .ui-accordion .ui-state-active .ui-icon {
    background-image: url(/images/main/accordion-down-light.svg);
}

.ui-accordion .ui-state-active .ui-icon {
	background-image: url(/images/main/accordion-right.svg);
}

body.dark .ui-accordion .ui-state-active .ui-icon {
	background-image: url(/images/main/accordion-right-light.svg);
}

.ui-accordion .ui-state-ok .ui-icon {
	background-image: url(/images/main/accordion-ok.svg);
}

.success-animation, 
.fail-animation { 
	margin: 0 auto 0 auto;
	float: left;
	width: 100%;
}

.ui-dialog-content .success-animation, 
.ui-dialog-content .fail-animation { 
    margin: 0 auto 30px auto;
}

.success-animation .checkmark, 
.fail-animation .checkmark {
    width: 200px;
    max-width: 40vw;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #8aa30f;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #8aa30f;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .4s both;
    position:relative;
    top: 5px;
    right: 5px;
   	margin: 0 auto;
}

.ui-dialog-content .success-animation .checkmark, 
.ui-dialog-content .fail-animation .checkmark {
	width: 70px;
}	

.fail-animation .checkmark {
	stroke: #f20000;
}

.success-animation .checkmark__circle, .fail-animation .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

body.dark .success-animation .checkmark__circle, body.dark .fail-animation .checkmark__circle {
    fill: #2c2c2c;
}

.fail-animation .checkmark__circle {
    stroke: #f20000;
}

.success-animation .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.fail-animation .checkmark__fail1, .fail-animation .checkmark__fail2 {
	transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.fail-animation .checkmark__fail2 {
	animation: stroke 0.11s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.note {
    font-style: italic;
    color: #8c8c8c;
}

#userAccordion {
	margin-bottom: 20px;
	margin-top: 0;
}

textarea, select, input[type="text"], input[type="number"] {
	width: calc( 100% - 30px );
	border-radius: 30px;
	border: 1px solid #DDDDDD;
	padding: 15px;
}

body.dark textarea, body.dark select, body.dark input[type="text"], body.dark input[type="number"] {
    border: 1px solid #383838;
    background-color: #16171a;
    color: #FFFFFF;
}

select {
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    background-image: url( /images/main/arrow_dark_gray_down.svg );
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: calc(100% - 16px);
    padding-right: 35px;
}

#visitAddFrom, #visitAddTo {
	padding-left: 40px;
    width: 90px;
    background-image: url(/images/main/calendar_gray.svg);
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: left+15px center
}

body.dark #visitAddFrom, body.dark #visitAddTo {
    background-image: url(/images/main/calendar.svg);
}

#visitAddAdult, #visitAddChildren, input.w40 {
	width: 40px;
}

#ui-datepicker-div .ui-widget-header .ui-datepicker-next .ui-icon, #ui-datepicker-div .ui-widget-header .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-widget-header .ui-datepicker-next:hover .ui-icon, #ui-datepicker-div .ui-widget-header .ui-datepicker-prev:hover .ui-icon {
    background-image: url(/images/client/forward_black.svg) !important;
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px !important;
    height: 20px !important;
    margin: 10px 0 0 0 !important;
    position: static;
    opacity: 0.6;
}

body.dark #ui-datepicker-div .ui-widget-header .ui-datepicker-next .ui-icon, body.dark #ui-datepicker-div .ui-widget-header .ui-datepicker-prev .ui-icon,
body.dark #ui-datepicker-div .ui-widget-header .ui-datepicker-next:hover .ui-icon, body.dark #ui-datepicker-div .ui-widget-header .ui-datepicker-prev:hover .ui-icon {
    background-image: url(/images/client/forward_white.svg) !important;
}

#ui-datepicker-div .ui-widget-header .ui-datepicker-next:hover, #ui-datepicker-div .ui-widget-header .ui-datepicker-prev:hover {
    background-color: transparent !important;
}

#ui-datepicker-div .ui-widget-header .ui-datepicker-next:hover .ui-icon, #ui-datepicker-div .ui-widget-header .ui-datepicker-prev:hover .ui-icon {
    opacity: 1;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
	right: 2px !important;
	top: 2px !important;
}

#ui-datepicker-div .ui-widget-header .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-widget-header .ui-datepicker-prev:hover .ui-icon {
    background-image: url(/images/client/back_black.svg) !important;
}

body.dark #ui-datepicker-div .ui-widget-header .ui-datepicker-prev .ui-icon,
body.dark #ui-datepicker-div .ui-widget-header .ui-datepicker-prev:hover .ui-icon {
    background-image: url(/images/client/back.svg) !important;
}


.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    border: none !important;
}

#ui-datepicker-div.ui-datepicker .ui-datepicker-title select {
    padding: 10px 28px 10px 10px;
    text-align: center;
    font-size: 15px;
    border-radius: 20px;
    margin: 0 10px 0 10px;
    width: auto;
    border-color: #d4d2d2;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right+5px center;
    background-size: 1em;
}

#ui-datepicker-div {
    width: auto !important;
    border-radius: 20px !important;
    padding: 10px !important;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.3);
}

#ui-datepicker-div .ui-datepicker-buttonpane .ui-state-default {
    border-radius: 30px;
    background: #ffcc03 !important;
    font-weight: normal;
    color: #FFFFFF;
    padding: 10px 20px 10px 20px !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane .ui-state-default.ui-datepicker-current {
    color: #000000;
    background: #f2f2f2 !important;
}

#ui-datepicker-div .ui-datepicker-buttonpane .ui-state-default:hover {
    background-color: #5d5548 !important;
    color: #FFFFFF;
}

#ui-datepicker-div .ui-state-default {
    border: 1px solid #F2F2F2 !important;
    background: #F2F2F2 !important;
    margin: 2px;
    font-family: 'kanit-regular', sans-serif !important;
}

#ui-datepicker-div .ui-state-default.ui-state-active, #ui-datepicker-div .ui-state-default:hover {
    background-color: #ffcc03 !important;
    color: #FFFFFF !important;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	color: #000000;
}

#ui-datepicker-div .ui-state-default.ui-state-highlight {
    border-color: #ffcc03 !important;
}

#ui-datepicker-div .ui-state-default {
    border-radius: 50%;
    text-align: center;
}

#rewardAddValidity {
	padding: 10px;
	border-radius: 30px;
	border: 1px solid #DDDDDD;
	margin-bottom: 20px;
	background-color: #FFFFFF !important;
}

body.dark #rewardAddValidity {
	border-color: transparent;
	background-color: #16171a !important;
}

.plusMinus > .plus, .plusMinus > .minus {
    content: '';
    float: left;
    font-size: 0px;
    margin-top: 7px;
    width: 23px;
    height: 23px;
    background: url( /images/icons/minus.svg) no-repeat center center;
    background-size: 23px;
    opacity: 0.80;
    filter: alpha(opacity = 80);
    cursor: pointer;
}

.plusMinus > .disabled {
    filter: grayscale(100%);
}

.plusMinus > .plus {
    float: right;
    background-image: url( /images/icons/plus.svg);
}

.plusMinus {
    clear: both;
    padding: 0 10px 0 10px;
    height: max-content;
    border: 1px solid #DDDDDD;
    border-radius: 20px;
    width: fit-content;
    background-color: #FFFFFF;
    margin: 0 auto 20px auto;
}

body.dark .plusMinus {
    background-color: #16171a;
  	border-color: #29292a;
}

body.dark input[type="number"] {
  	border-color: #16171a;
}

.pc.plusMinus {
    margin: 20px auto 0 auto;
}

.plusMinus input::-webkit-outer-spin-button, .plusMinus input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.plusMinus input {
    display: inline-block;
    padding: 10px;
    border: none;
    border-radius: 0;
    -moz-appearance: textfield;
    text-align: center;
    width: 50px;
    color: #000000;
}

.rImg {
	width: 200px;
    height: 130px;
    margin: 0 auto 20px auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.rImg img {
    object-fit: cover;
    max-width: none !important;
    width: 100%;
    height: 100% !important;
    object-position: center;
}

.rDescription {
	text-align: center;
	margin-bottom: 20px;
}

.stars {
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}

.stars > div {
	float: left;
	width: 30px;
	height: 30px;
	background-image: url( '/images/client/star_gray.svg' ) ;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px;
}

.stars:not( .disabled ) > div {
    cursor: pointer;
}

.stars > div.subActive {
	background-image: url( '/images/client/star_gold.svg' ) ;
	opacity: 0.5;
}

.stars > div.active {
	background-image: url( '/images/client/star_gold.svg' ) ;
	opacity: 1;
}

.yesno {
	float: left;
	margin: 20px 0 10px 0;
	padding: 0;
	border-radius: 15px;
	width: 40px;
	cursor: pointer;
	height: 14px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #949494;
    border: none;
    z-index: 0;
    transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	outline: none;
}

.yesno .yncirc {
	/* position: relative; */
	z-index: 0;
	width: 21px;
	height: 21px;
	border-radius: 20px;
	background: #f2f2f2;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.6);
	-moz-box-shadow:   0px 0px 5px 0px rgba(50, 50, 50, 0.6);
	box-shadow:        0px 0px 5px 0px rgba(50, 50, 50, 0.6);
	margin: -3px 0 0 0;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
}

.yesno.active {
	background-color: #d7e1a8;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
}

.yesno.active .yncirc {
	background-color: #8aa30f;
	margin-left: 20px;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
}

.ynbut_cont {
	display: inline-flex;
}

.ynbut_yn {
	float: left;
	margin: 18px 0 0 10px;
	font-size: 0.9em;
	font-weight: bold;
}

.ynbut_yn .yes, .ynbut_yn.active .no {
	display: none;
}

.ynbut_yn.active .yes, .ynbut_yn .no {
	display: block;
}

body.dark .sr > div.srCont > div, body.dark .sra > div:not( #nextBut ) {
    background-color: #16171a;
  	border-color: #29292a;
}

body.dark .sr > div.srCont > div.actual {
    border-color: #333d02;
    background-color: #0d1000;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #8aa30f;
    }
}

@keyframes heartbeat {
	20% {
		background-size: 17px;
	}
	40% {
		background-size: 18px;
	}
	60% {
		background-size: 17px;
	}
	80% {
		background-size: 18px;
	}
	100% {
		background-size: 17px;
	}
}