/*===Start inputbox code===*/

:root {
  /* generic */
  --gutterSm: 0.4rem;
  --gutterMd: 0.8rem;
  --gutterLg: 1.6rem;
  --gutterXl: 2.4rem;
  --gutterXx: 7.2rem;
  /*--colorPrimary400: #7e57c2;
  --colorPrimary600: #5e35b1;
  --colorPrimary800: #4527a0;*/
  --colorPrimary400: #cfe3ff;
  --colorPrimary600: #cfe3ff;
  --colorPrimary800: #cfe3ff;
  --fontFamily: "Kanit", sans-serif;
  --fontSizeSm: 1.2rem;
  --fontSizeMd: 1.6rem;
  --fontSizeLg: 2.1rem;
  --fontSizeXl: 2.8rem;
  --fontSizeXx: 3.6rem;
  --lineHeightSm: 1.1;
  --lineHeightMd: 1.8;
  --transitionDuration: 300ms;
  --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
  
  /* floated labels */
  --inputPaddingV: var(--gutterMd);
  --inputPaddingH: var(--gutterLg);
  --inputFontSize: 16px;
  --inputLineHeight: var(--lineHeightMd);
  --labelScaleFactor: 0.8;
  --labelDefaultPosY: 50%;
  --labelTransformedPosY: calc(
    (var(--labelDefaultPosY)) - 
    (var(--inputPaddingV) * var(--labelScaleFactor)) - 
    (var(--inputFontSize) * var(--inputLineHeight))
  );
  --inputTransitionDuration: var(--transitionDuration);
  --inputTransitionTF: var(--transitionTF);
}

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

html {
  font-size: 16px;
}

@media only screen and (min-width: 550px) {
  .header_logo {
    display: none !important;
  }
  .header_logo_small{
    display: block !important;
  }
}

body {
/*  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  color: #455A64;
  background-color: #7E57C2;*/
  overflow: hidden;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMd);
  /*line-height: var(--lineHeightMd);*/
}

.Wrapper {
  flex: 0 0 80%;
  max-width: 80%;
}

.Title {
  margin: 0 0 var(--gutterXx) 0;
  padding: 0;
  color: #fff;
  font-size: var(--fontSizeXx);
  font-weight: 400;
  line-height: var(--lineHeightSm);
  text-align: center;
  text-shadow: -0.1rem 0.1rem 0.2rem var(--colorPrimary800);
}

.Input {
  position: relative;
}

.Input-text {
  display: block;
  margin: 0;
  /*padding: var(--inputPaddingV) var(--inputPaddingH);*/
  padding: 7px;
  /*color: inherit;*/
  color: white;
  width: 100%;
  font-family: inherit;
  font-size: var(--inputFontSize);
  font-weight: inherit;
  line-height: var(--inputLineHeight);
  border: none;
  border-radius: 0.4rem;
  transition: box-shadow var(--transitionDuration);
}

.Input-text-alert{
	border: solid;
    border-color: #FFC440;
}

.Input-text::placeholder {
  /*color: #B0BEC5;*/
  color: rgba(241, 241, 241, 0.5);
}

.Input-text:focus {
  outline: none;
  box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600);
}

.Input-label {
  display: block;
  position: absolute;
  bottom: 24%;
  left: 2px;
  color: #104494;
  font-family: inherit;
  font-size: var(--inputFontSize);
  font-weight: inherit;
  line-height: var(--inputLineHeight);
  opacity: 0;
  transform: 
    translate3d(0, var(--labelDefaultPosY), 0)
    scale(1);
  transform-origin: 0 0;
  transition:
    opacity var(--inputTransitionDuration) var(--inputTransitionTF),
    transform var(--inputTransitionDuration) var(--inputTransitionTF),
    visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF),
    z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF);
}

.Input-text:placeholder-shown + .Input-label {
  visibility: hidden;
  z-index: -1;
}

.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
  visibility: visible;
  z-index: 1;
  opacity: 1;
  transform:
    translate3d(0, var(--labelTransformedPosY), 0)
    scale(var(--labelScaleFactor));
  transition:
    transform var(--inputTransitionDuration),
    visibility 0ms,
    z-index 0ms;
}
/*===End inputbox code===*/

.hod_credit{
  background-image: url("../image/hod_credit.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center bottom;
  width: 100px;
  height: 20px;
  margin: auto;
  clear: left;
}

.page_controller{/*bottom background*/
  background-image: url("../image/bottom_bg.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center bottom;
  width: 100vw;
  height: 100px;
}
.login-page{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.reward-list-page{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.shop-selector-page{
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
	padding-top: 20px !important;
	border-top: 5px solid #FFC440;
}
.self-input-page{
  padding: 20px;
  padding-top: 2px;
  margin-top: 20px;
  padding-left: 43px;
  padding-right: 40px;
}
.random-page{
  overflow: scroll;
    -webkit-overflow-scrolling: touch;
  margin-top: 20px;
}
.header_empty{
    width: 100%;
    height: 19%;
    display: block;
    position:relative;
}
.header{
	background-color: white;
	width: 100%;
	height: 150px;
  display: block;
  position: absolute;
  color: white;
  z-index: -10;
  /* width: 100vw; */
  /*padding: 2rem 0;*/
  background-image: url("../image/bg.jpg?v=1");
  /* background-image: url("../assets/bg_1.svg"); */
  background-size: cover;
  background-position: right bottom;
  justify-content: center;
}
.header_logo{
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 10px;
	width: 100%;
}
.header_logo_small{
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 300px;
}
.main{
	/*background-color: #ff6f00;*/
	width: 100%;
	height: 81%;
  overflow: scroll;
}
.submit_button{
	background-color: #8CC152;
	display: block;
	margin: 0;
  padding:5px;
	/*padding: var(--inputPaddingV) var(--inputPaddingH);*/
	color: inherit;
	width: 150px;
	font-family: inherit;
	font-size: var(--inputFontSize);
	font-weight: bold;
	line-height: var(--inputLineHeight);
	border: none;
	border-radius: 0.4rem;
	transition: box-shadow var(--transitionDuration);
	color: white;
	margin-top: 20px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.submit_button:active, .submit_button:hover{
	opacity: 0.7;
}
.repeat_random_button{
  width: 200px;
}
#random-button{
	width: 70%;
	text-align: center;
	float: left;
	clear: right;
	padding-left: 0;
	padding-right: 0;
	margin-right: 4%;
	margin-bottom: 0px;
}
#back_to_reward_list_button{
  width: 20%;
  text-align: center;
  float: left;
  background-color: #3B304B;
  color: rgb(227, 227, 227);
  padding-left: 0;
  padding-right: 0;
  margin-left:4%;
  margin-right: 2%;
  margin-top: 10px;
}

/*.radio:focus{
  outline:none;
}*/
.radio{ 
  -webkit-appearance:button;
  -moz-appearance:button;
  appearance:button;
  /*border:4px solid #ccc;
  border-top-color:#bbb;
  border-left-color:#bbb;*/
  background:#fff;
  width:25px;
  height:25px;
  border-radius:50%;
}
.radiotext{
	 font-size: 11px;
    color: black;
    top: -8;
    margin-top: 6px;
    display: block;
    float: left;
    margin-left: 10px;
    width: 80%;
}
.radio:checked{
  border: 3px solid black;
	background: #FFC440;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
#term_and_condition_marker{
	display: none;
}

.general_text_label{
	font-size: 11px;
	color: black;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	text-align: center;
	clear:left;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: center;*/
}

#target_shop_for_random{
	width: 80px;
  	height: 80px;
  	margin: 10px;
  	text-align: center;
  	line-height: 75px;
  	font-size: 30px;
  	margin-left:auto;
  	margin-right:auto;
}
.flex-container > div {
  /*width: 80px;
  height: 80px;*/
  /*margin: 10px;*/
  /*text-align: center;*/
  /*line-height: 75px;*/
  font-size: 25px;
  margin-left: 15%;
  /*margin-top:51px;*/
}
.shop-container{
	background-image: url("../image/shop-bg.svg");
	background-repeat: no-repeat;
	-webkit-background-size: contain;
  	-moz-background-size: contain;
 	-o-background-size: contain;
  	background-size: contain;
  	background-position: center;
}
.shop-image{
	background-repeat: no-repeat;
	-webkit-background-size: contain;
  	-moz-background-size: contain;
 	-o-background-size: contain;
  	background-size: contain;
  	width: 70px;
    height: 60px;
    margin: 10px;
    margin-top: 9px;
    background-position: center;
}

.buttom_area{
  position: fixed;
  bottom:-5px;
  width:100%;
}

/* loading css */
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.left {
    padding: 10px;
    text-align: left;
    width: 50%;
}

.right {
    padding: 10px;
    text-align: right;  
    width: 50%;  
}
.left > img{
  width: 100%;
}
.right > img{
  width: 100%;
}

#parent5 > a > div {
  
        flex: 1;
        height: 100px;
}
.parent {
    display: flex;
    overflow: hidden;
    margin: 10px 0;
    /* color: #fff;
    border: 1px solid #333; */
    align-items: center;
    height: 100px;
    width: 100%;
}