@import url('https://fonts.googleapis.com/css?family=Chonburi|Itim|Kanit|Mitr|Pridi|Prompt|Sriracha');

/*----------- radio label ------------*/

.stages {
	/* font-size: 0; */
	text-align: center;
}

input[type="radio"] {
	display: none;
}

.stages label {
  	/* float: left; */
	background: #eee;
	/* border-top: solid 1px #bbb;
	border-bottom: solid 1px #bbb;
	border-left: solid 1px #bbb; */
	border: solid 0px #eee;
	border-radius: 0%;
	cursor: pointer;
	display: inline-block;
	font-size: 1.4rem;
	color: #111;
	font-weight: 300;
	width: 20%;
	/* width: 7.69230769%; */
	height: 70px;
	line-height: 70px;
	text-align: center;
	vertical-align: top;
	/* position: relative; */
	/* z-index: 1; */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#r101:checked ~ .formContainer .stages label[for="r101"],
#r102:checked ~ .formContainer .stages label[for="r102"],
#r103:checked ~ .formContainer .stages label[for="r103"],
#r104:checked ~ .formContainer .stages label[for="r104"],
#r105:checked ~ .formContainer .stages label[for="r105"],
#r106:checked ~ .formContainer .stages label[for="r106"],
#r107:checked ~ .formContainer .stages label[for="r107"],
#r108:checked ~ .formContainer .stages label[for="r108"],
#r109:checked ~ .formContainer .stages label[for="r109"],
#r110:checked ~ .formContainer .stages label[for="r110"],
#r111:checked ~ .formContainer .stages label[for="r111"],
#r112:checked ~ .formContainer .stages label[for="r112"],
#r113:checked ~ .formContainer .stages label[for="r113"],
#r201:checked ~ .formContainer .stages label[for="r201"],
#r202:checked ~ .formContainer .stages label[for="r202"],
#r203:checked ~ .formContainer .stages label[for="r203"],
#r204:checked ~ .formContainer .stages label[for="r204"],
#r205:checked ~ .formContainer .stages label[for="r205"],
#r206:checked ~ .formContainer .stages label[for="r206"],
#r207:checked ~ .formContainer .stages label[for="r207"],
#r208:checked ~ .formContainer .stages label[for="r208"],
#r209:checked ~ .formContainer .stages label[for="r209"],
#r210:checked ~ .formContainer .stages label[for="r210"],
#r211:checked ~ .formContainer .stages label[for="r211"],
#r212:checked ~ .formContainer .stages label[for="r212"],
#r213:checked ~ .formContainer .stages label[for="r213"],
#r301:checked ~ .formContainer .stages label[for="r301"],
#r302:checked ~ .formContainer .stages label[for="r302"],
#r303:checked ~ .formContainer .stages label[for="r303"],
#r304:checked ~ .formContainer .stages label[for="r304"],
#r305:checked ~ .formContainer .stages label[for="r305"],
#r306:checked ~ .formContainer .stages label[for="r306"],
#r307:checked ~ .formContainer .stages label[for="r307"],
#r308:checked ~ .formContainer .stages label[for="r308"],
#r309:checked ~ .formContainer .stages label[for="r309"],
#r310:checked ~ .formContainer .stages label[for="r310"],
#r311:checked ~ .formContainer .stages label[for="r311"],
#r312:checked ~ .formContainer .stages label[for="r312"],
#r313:checked ~ .formContainer .stages label[for="r313"],
#r401:checked ~ .formContainer .stages label[for="r401"],
#r402:checked ~ .formContainer .stages label[for="r402"],
#r403:checked ~ .formContainer .stages label[for="r403"],
#r404:checked ~ .formContainer .stages label[for="r404"],
#r405:checked ~ .formContainer .stages label[for="r405"],
#r406:checked ~ .formContainer .stages label[for="r406"],
#r407:checked ~ .formContainer .stages label[for="r407"],
#r408:checked ~ .formContainer .stages label[for="r408"],
#r409:checked ~ .formContainer .stages label[for="r409"],
#r410:checked ~ .formContainer .stages label[for="r410"],
#r411:checked ~ .formContainer .stages label[for="r411"],
#r412:checked ~ .formContainer .stages label[for="r412"],
#r413:checked ~ .formContainer .stages label[for="r413"],
#r501:checked ~ .formContainer .stages label[for="r501"],
#r502:checked ~ .formContainer .stages label[for="r502"],
#r503:checked ~ .formContainer .stages label[for="r503"],
#r504:checked ~ .formContainer .stages label[for="r504"],
#r505:checked ~ .formContainer .stages label[for="r505"],
#r506:checked ~ .formContainer .stages label[for="r506"],
#r507:checked ~ .formContainer .stages label[for="r507"],
#r508:checked ~ .formContainer .stages label[for="r508"],
#r509:checked ~ .formContainer .stages label[for="r509"],
#r510:checked ~ .formContainer .stages label[for="r510"],
#r511:checked ~ .formContainer .stages label[for="r511"],
#r512:checked ~ .formContainer .stages label[for="r512"],
#r513:checked ~ .formContainer .stages label[for="r513"],
#r601:checked ~ .formContainer .stages label[for="r601"],
#r602:checked ~ .formContainer .stages label[for="r602"],
#r603:checked ~ .formContainer .stages label[for="r603"],
#r604:checked ~ .formContainer .stages label[for="r604"],
#r605:checked ~ .formContainer .stages label[for="r605"],
#r606:checked ~ .formContainer .stages label[for="r606"],
#r607:checked ~ .formContainer .stages label[for="r607"],
#r608:checked ~ .formContainer .stages label[for="r608"],
#r609:checked ~ .formContainer .stages label[for="r609"],
#r610:checked ~ .formContainer .stages label[for="r610"],
#r611:checked ~ .formContainer .stages label[for="r611"],
#r612:checked ~ .formContainer .stages label[for="r612"],
#r613:checked ~ .formContainer .stages label[for="r613"] {
	/* border-color: #e3bc45; */
	background: #e3bc45;
	/* color: #fff; */
}

.formContainer .stages label.active{
	border-color: purple !important;
}

.panels div {
	display: none;
}

#r101:checked ~ .formContainer .panels [data-panel="r101"],
#r102:checked ~ .formContainer .panels [data-panel="r102"],
#r103:checked ~ .formContainer .panels [data-panel="r103"],
#r104:checked ~ .formContainer .panels [data-panel="r104"],
#r105:checked ~ .formContainer .panels [data-panel="r105"],
#r106:checked ~ .formContainer .panels [data-panel="r106"],
#r107:checked ~ .formContainer .panels [data-panel="r107"],
#r108:checked ~ .formContainer .panels [data-panel="r108"],
#r109:checked ~ .formContainer .panels [data-panel="r109"],
#r110:checked ~ .formContainer .panels [data-panel="r110"],
#r111:checked ~ .formContainer .panels [data-panel="r111"],
#r112:checked ~ .formContainer .panels [data-panel="r112"],
#r113:checked ~ .formContainer .panels [data-panel="r113"],
#r201:checked ~ .formContainer .panels [data-panel="r201"],
#r202:checked ~ .formContainer .panels [data-panel="r202"],
#r203:checked ~ .formContainer .panels [data-panel="r203"],
#r204:checked ~ .formContainer .panels [data-panel="r204"],
#r205:checked ~ .formContainer .panels [data-panel="r205"],
#r206:checked ~ .formContainer .panels [data-panel="r206"],
#r207:checked ~ .formContainer .panels [data-panel="r207"],
#r208:checked ~ .formContainer .panels [data-panel="r208"],
#r209:checked ~ .formContainer .panels [data-panel="r209"],
#r210:checked ~ .formContainer .panels [data-panel="r210"],
#r211:checked ~ .formContainer .panels [data-panel="r211"],
#r212:checked ~ .formContainer .panels [data-panel="r212"],
#r213:checked ~ .formContainer .panels [data-panel="r213"],
#r301:checked ~ .formContainer .panels [data-panel="r301"],
#r302:checked ~ .formContainer .panels [data-panel="r302"],
#r303:checked ~ .formContainer .panels [data-panel="r303"],
#r304:checked ~ .formContainer .panels [data-panel="r304"],
#r305:checked ~ .formContainer .panels [data-panel="r305"],
#r306:checked ~ .formContainer .panels [data-panel="r306"],
#r307:checked ~ .formContainer .panels [data-panel="r307"],
#r308:checked ~ .formContainer .panels [data-panel="r308"],
#r309:checked ~ .formContainer .panels [data-panel="r309"],
#r310:checked ~ .formContainer .panels [data-panel="r310"],
#r311:checked ~ .formContainer .panels [data-panel="r311"],
#r312:checked ~ .formContainer .panels [data-panel="r312"],
#r313:checked ~ .formContainer .panels [data-panel="r313"],
#r401:checked ~ .formContainer .panels [data-panel="r401"],
#r402:checked ~ .formContainer .panels [data-panel="r402"],
#r403:checked ~ .formContainer .panels [data-panel="r403"],
#r404:checked ~ .formContainer .panels [data-panel="r404"],
#r405:checked ~ .formContainer .panels [data-panel="r405"],
#r406:checked ~ .formContainer .panels [data-panel="r406"],
#r407:checked ~ .formContainer .panels [data-panel="r407"],
#r408:checked ~ .formContainer .panels [data-panel="r408"],
#r409:checked ~ .formContainer .panels [data-panel="r409"],
#r410:checked ~ .formContainer .panels [data-panel="r410"],
#r411:checked ~ .formContainer .panels [data-panel="r411"],
#r412:checked ~ .formContainer .panels [data-panel="r412"],
#r413:checked ~ .formContainer .panels [data-panel="r413"],
#r501:checked ~ .formContainer .panels [data-panel="r501"],
#r502:checked ~ .formContainer .panels [data-panel="r502"],
#r503:checked ~ .formContainer .panels [data-panel="r503"],
#r504:checked ~ .formContainer .panels [data-panel="r504"],
#r505:checked ~ .formContainer .panels [data-panel="r505"],
#r506:checked ~ .formContainer .panels [data-panel="r506"],
#r507:checked ~ .formContainer .panels [data-panel="r507"],
#r508:checked ~ .formContainer .panels [data-panel="r508"],
#r509:checked ~ .formContainer .panels [data-panel="r509"],
#r510:checked ~ .formContainer .panels [data-panel="r510"],
#r511:checked ~ .formContainer .panels [data-panel="r511"],
#r512:checked ~ .formContainer .panels [data-panel="r512"],
#r513:checked ~ .formContainer .panels [data-panel="r513"],
#r601:checked ~ .formContainer .panels [data-panel="r601"],
#r602:checked ~ .formContainer .panels [data-panel="r602"],
#r603:checked ~ .formContainer .panels [data-panel="r603"],
#r604:checked ~ .formContainer .panels [data-panel="r604"],
#r605:checked ~ .formContainer .panels [data-panel="r605"],
#r606:checked ~ .formContainer .panels [data-panel="r606"],
#r607:checked ~ .formContainer .panels [data-panel="r607"],
#r608:checked ~ .formContainer .panels [data-panel="r608"],
#r609:checked ~ .formContainer .panels [data-panel="r609"],
#r610:checked ~ .formContainer .panels [data-panel="r610"],
#r611:checked ~ .formContainer .panels [data-panel="r611"],
#r612:checked ~ .formContainer .panels [data-panel="r612"],
#r613:checked ~ .formContainer .panels [data-panel="r613"] {
	display: block;
}
/* Custom code for the demo */

html,
button,
input,
select,
textarea {
	font-family: 'Kanit', sans-serif;
}

a {
	color: #0cc39f;
}

h2,h4 {
	margin-top: 0;
    /* font-family: 'Montserrat', sans-serif; */
    font-size: 1.4rem;
    font-weight: 400;
    padding: 0 15px;
    text-align: center;
}

.form {
	/*
	background: #ffffff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
	margin: 4em;
	min-width: 480px;
	padding: 1em;
	*/
}

.panels div {
	/* margin: 1em 0 0;
	padding: 0.5em 0 0; */
}


/*----------- calculater ------------*/

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    /* font-family: 'Montserrat', sans-serif; */
}

body {
    margin: 0 auto;
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 700;
    background-color: #eee;
}

.formContainer {
    display: block;
	max-width: 320px;
    /* max-width: 100%; */
    margin: 0px auto 0 auto;
    background-color: #eee;
}

.formContainer:after,
.formContainer:before {
    /* content: " "; */
    display: table;
}

.formContainer:after {
    clear: both;
}

form {
    width: 100%;
    padding: 0;
    /* font-family: 'Montserrat', sans-serif; */
    font-weight: 700;
}

.display, .display2 {
    width: 100%;
    min-height: 90px;
    display: block;
    padding: 0 15px;
    text-align: center;
    text-overflow: clip;
    /* font-family: 'Montserrat', sans-serif; */
    font-size: 4.5rem;
    font-weight: 400;
    color: #fff;
    border: 0;
    /* background-color: #555; */
    /* border-bottom: 10px solid #999; */
    /* border-top: 10px solid #999; */
}

.display {
    background-color: #ef6b5b;
}

.display2 {
    background-color: #8bc6c7;
}

input[type="button"],
#equal {
    width: 25%;
    height: 80px;
    display: block;
    float: left;
    /* font-family: 'Montserrat', sans-serif; */
    font-size: 1.5rem;
    font-weight: 700;
    background-color: #eee;
    border: 0;
    border-bottom: 1px solid #bbb;
}

input[type="button"]:hover,
#equal:hover {
    cursor: pointer;
    background-color: #ddd;
}

input[type="button"]:active,
#equal:active {
    cursor: pointer;
    background-color: #bbb;
}

input:focus {
    box-shadow: 0;
    outline: 0;
    /* background-color: #eee; */
}

@media screen and (max-width: 400px) {
    .formContainer {
        margin: 0 auto;
    }
}

@media screen and (max-width: 990px) {
    input[type="button"]:hover,
    #equal:hover {
        background-color: #eee;
    }
    input[type="button"]:active,
    #equal:active {
        background-color: #bbb;
    }
}


/* ------- slider -------------*/ 

.slidecontainer {
    width: 100%;
}

.slider,.slider2 {
    -webkit-appearance: none;
    width: 100%;
    height: 35px;
    border-radius: 0px;
    outline: none;
    /* background: #d00054; */
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider {
    background: #ddd;
}

.slider2 {
    background: #ddd;
}

.slider:hover,.slider2:hover {
    opacity: 1;
}


.slider::-webkit-slider-thumb,.slider2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    /* border: 0; */
    /* background: #4CAF50; */
    /* background: url('/img/water.png'); */
    cursor: pointer;
}
.slider::-webkit-slider-thumb {
    /* background: url('/img/electric.png'); */
    background: #ef6b5b;
}
.slider2::-webkit-slider-thumb {
    /* background: url('/img/water.png'); */
    background: #8bc6c7;
}


.slider::-moz-range-thumb,.slider2::-moz-range-thumb {
    width: 35px;
    height: 35px;
    /* border: 0; */
    /* background: #4CAF50; */
    /* background: url('/img/water.png'); */
    cursor: pointer;
}
.slider::-moz-range-thumb {
    /* background: url('/img/electric.png'); */
    background: #ef6b5b;
}
.slider2::-moz-range-thumb {
    /* background: url('/img/water.png'); */
    background: #8bc6c7;
}

div.scrollmenu {
    /* background-color: #333; */
    overflow: auto;
    white-space: nowrap;
  	margin-bottom: 80px; /* เว้นระยะให้เท่ากับ height ของ input[type="button"] เพื่อไม่ให้โดนบัง */
}

/* ------- Right-aligned section ------- */
.horizontal-right {
	float: right;
}

#datepicker-th{
	width: 100%;
	margin: 1px 0px 1px 0;
	vertical-align: middle;
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
    font-size: 1.0rem;
}

.fixbottom { 
  	position: fixed;
  	bottom: 0;
  	width: 320px;
}

/* ------- placeholder -------*/ 

.display::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #cf6b5b;
}
.display::-moz-placeholder { /* Firefox 19+ */
  color: #cf6b5b;
}
.display:-ms-input-placeholder { /* IE 10+ */
  color: #cf6b5b;
}
.display:-moz-placeholder { /* Firefox 18- */
  color: #cf6b5b;
}

.display2::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #7bb6c7;
}
.display2::-moz-placeholder { /* Firefox 19+ */
  color: #7bb6c7;
}
.display2:-ms-input-placeholder { /* IE 10+ */
  color: #7bb6c7;
}
.display2:-moz-placeholder { /* Firefox 18- */
  color: #7bb6c7;
}


@media screen and (max-width: 480px) {
	.formContainer {
		max-width: 100%;
	}

	.fixbottom { 
	  	width: 100%;
	}
}