@media only screen and (min-width: 1201px)   {
	body {		
		min-height: 100vh;
		overflow-y: scroll;
		position: relative;
	}
	#wrapper {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 100vh;
		display: flex;	
		overflow: hidden;
		padding: 0;
	}
	.blur {
		-webkit-filter: blur(1.7px);
		-moz-filter: blur(1.7px);
		-o-filter: blur(1.7px);
		-ms-filter: blur(1.7px);
		filter: blur(1.7px);
		pointer-events: none;
	}
	@-webkit-keyframes hvr-pop {
	  50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	  }
	}
	@keyframes hvr-pop {
	  50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	  }
	}
	/* Wobble Horizontal */
	@-webkit-keyframes hvr-wobble-horizontal {
	  16.65% {
		 -webkit-transform: translateX(8px);
		 transform: translateX(8px);
	  }
	  33.3% {
		 -webkit-transform: translateX(-6px);
		 transform: translateX(-6px);
	  }
	  49.95% {
		 -webkit-transform: translateX(4px);
		 transform: translateX(4px);
	  }
	  66.6% {
		 -webkit-transform: translateX(-2px);
		 transform: translateX(-2px);
	  }
	  83.25% {
		 -webkit-transform: translateX(1px);
		 transform: translateX(1px);
	  }
	  100% {
		 -webkit-transform: translateX(0);
		 transform: translateX(0);
	  }
	}
	.hvr-wobble-horizontal {
	  display: inline-block;
	  vertical-align: middle;
	  -webkit-transform: perspective(1px) translateZ(0);
	  transform: perspective(1px) translateZ(0);
	  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	}
	.hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
	  -webkit-animation-name: hvr-wobble-horizontal;
	  animation-name: hvr-wobble-horizontal;
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  -webkit-animation-iteration-count: 1;
	  animation-iteration-count: 1;
	}
	.hvr-pop {
	  display: inline-block;
	  vertical-align: middle;
	  -webkit-transform: perspective(0.5px) translateZ(0);
	  transform: perspective(0.5px) translateZ(0);
	  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	}
	.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
	  -webkit-animation-name: hvr-pop;
	  animation-name: hvr-pop;
	  -webkit-animation-duration: 0.2s;
	  animation-duration: 0.2s;
	  -webkit-animation-timing-function: linear;
	  animation-timing-function: linear;
	  -webkit-animation-iteration-count: 1;
	  animation-iteration-count: 1;
	}
	@keyframes box-shake {

	 0% {
      transform: scale(1) rotate(-3deg);
    }
	 5% {
      transform: scale(1) rotate(3deg);
    }
    10% {
      transform: scale(1) rotate(-2deg);
    }
    15% {
      transform: scale(1) rotate(1deg);
    }
    20% {
      transform: scale(1) rotate(0);
    }
    25% {
      transform: scale(1);
    }
}

/*--------------------------------------------------------------------------*/
/*-ALERT-BOX--------------------------------------------------------*/
/*--------------------------------------------------------------------------*/
.text-alert {
	width: auto;
	height: auto;
	display: inline-flex;
	position: absolute;
	right: 10px;
	top: 10px;
	background-color: #404040;
	padding: 5px 10px;
	font-size: 0.6rem;
	color: #FFF;
	opacity: 0;	
		transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	
}
.text-alert.open {
	-webkit-animation-name: hvr-wobble-horizontal;
	  animation-name: hvr-wobble-horizontal;
	  -webkit-animation-duration: 0.7s;
	  animation-duration: 0.7s;
	  -webkit-animation-timing-function: ease-in-out;
	  animation-timing-function: ease-in-out;
	  -webkit-animation-iteration-count: 1;
	  animation-iteration-count: 1;
		opacity: 1;
}
.popup-bg {
	width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100;
	 background-color: rgba(0,0,0,0.5);
}
	.popup-bg .popup-box {
		width: 500px;
		height: auto;
		background-color: #FFF;
		border-radius: 20px;
		display: block;
		padding: 20px;
		opacity: 0;
		border: 1px solid #333;
		transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	}
	.popup-bg .popup-box.open {
		-webkit-animation-name: box-shake;
		animation-name: box-shake;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		opacity: 1;
	}
		.popup-box .popup-content {
			width: 100%;
			height: auto;
			max-height: 70vh;
			overflow-x: none;
			overflow-y: scroll;
			display: block;
			position: relative;
			margin-bottom: 20px;
			padding-left: 40px;
		}
		.popup-box .icon {
			width: 24px;
			height: 24px;
			display: flex;
			left: 0;
			align-items: center;
			justify-content: center;
			position: absolute;
			border-radius: 50%;
			background-color: #FFAE00;
		}
			.popup-box .icon img {
				width: 18px;
				height: auto;
				display: block;
			}			
			.popup-box .icon.green {
				background-color: #3CAC00;
			}
			.popup-box .icon.red {
				background-color: #FF5858;
			}
		.popup-box .popup-detail {
			width: 100%;
			height: auto;
			display: block;
		}
		
		
		.popup-box .title {
			width: 100%;
			height: auto;
			display: block;
			font-size: 1rem;
			font-weight: 500;
			line-height: 22px;
			color: #111;
			margin-bottom: 10px;
		}
		.popup-box .text {
			width: 100%;
			height: auto;
			display: block;
			font-size: 0.7rem;
			color: #111;
		}
			.popup-box .text b {
				color: #2062AB;
				font-weight: 600;
			}
		.popup-box ul {
			width: 100%;
			height: auto;
			display: block;
			font-size: 0.7rem;
			color: #111;
			margin: 0;
			padding: 0 0 0 20px;
		}
		.popup-box .btn-box {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 5px;
		}
			.popup-box .btn-box .confirm {
				width: auto;
				height: 34px;
				display: flex;
				align-items: center;
				font-size: 0.7rem;
				padding: 0 20px;
				margin-left:10px;
				color: #FFF;
				background-color: #3CAC00;
				border-radius:  15px;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
				.popup-box .btn-box .confirm:hover {
					background-color: #189300;
				}
				.popup-box .btn-box .confirm.red {
					background-color: #E83C3C;
				}
					.popup-box .btn-box .confirm.red:hover {
						background-color: #D73131;
					}
			.popup-box .btn-box .cancel {
				width: auto;
				height: 34px;
				display: flex;
				align-items: center;
				padding: 0 20px;
				font-size: 0.7rem;
				color: #555555;
				margin-left: 10px;
				background-color: #EBEBEE;
				border-radius:  15px;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
				.popup-box .btn-box .cancel:hover {
					color: #434343;
					background-color: #D4D4DA;
				}
	.popup-box .appoint-line {
		width: 100%;
		height: auto;
		display: block;
		position: relative;
		padding:  5px 5px 5px 30px;
		border-radius: 10px;
		border: 1px solid #333;
		margin-bottom: 5px;
	}
		.popup-box .appoint-line .sym {
			width: 20px;
			height: auto;
			display: block;
			position: absolute;
			left: 5px;
		}
		.popup-box .appoint-line .sym svg {
				width:20px;
				height: auto;
				display: block;
			 }		
				.popup-box .appoint-line .sym svg path {
					fill: #000;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}		
		.popup-box .appoint-line .date {
			width: 100%;
			height: auto;
			display: flex;
			font-size: 0.6rem;
			color: #666;
		}
		.popup-box .appoint-line .time {
			width: auto;
			height: auto;
			display: inline-block;
			font-size: 0.6rem;
			color: #666;
			padding-left: 5px;
			margin-left: 5px;
			border-left: 1px solid #666;
		}
		.popup-box .appoint-line .location {
			font-size: 0.6rem;
			color: #2062AB;
         font-weight: 600;
		}
		.popup-box .appoint-line .detail {
			font-size: 0.65rem;
			color: #111;
		}	
	
	.popup-bg .popup-form {
		width: 550px;
		height: auto;
		background-color: #FFF;
		border-radius: 20px;
		display: block;
		padding: 20px;
		opacity: 0;
		border: 1px solid #333;
		transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	}
	.popup-bg .popup-form.open {
		-webkit-animation-name: hvr-pop;
		animation-name: hvr-pop;
		-webkit-animation-duration: 0.1s;
		animation-duration: 0.1s;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		opacity: 1;
	}
	.popup-form .popup-content {
       width: 100%;
       height: auto;
       display: block;
       position: relative;
       margin-bottom: 20px;
    }
	 .popup-form .title {
			width: 100%;
			height: auto;
			display: block;
			font-size: 1rem;
			font-weight: 500;
			line-height: 22px;
			color: #111;
			margin-bottom: 20px;
		}
	.popup-form .popup-form-flex-bar {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.popup-form .hint {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		color: #D42318;
		font-size: 0.6rem;
		margin-bottom: 10px;
		position: relative;
		padding-left: 23px;
		margin-top: 10px;
	}
		.popup-form .hint span {
			width: auto;
			height: 16px;
			display: block;
			position: absolute;
			left: 0;
		}
			.popup-form .hint span svg {
				width:auto;
				height: 16px;
				display: block;
			}		
				.popup-form .hint span svg path{
					fill: #D42318;
				}
	.popup-form .popup-form-bar {
		width: 100%;
		height: auto;
		display:block;
		align-items: center;
		margin-bottom: 15px;
	}
	.popup-form .popup-form-bar input {
		width: 100%;
	}
	.popup-form .upload-btn {
			width: auto;
			height: 34px;
			display: inline-flex;
			align-items: center;
			font-size: 0.6rem;
			border-radius: 10px;
			padding: 7px 20px;
			background-color: #2062AB;
			color: #FFF;
			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
			cursor: pointer;
		}
			.popup-form .upload-btn:hover {
				background-color: #00499B;
   			color: #FFF;
			}
	.popup-form .upload-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
	}
	.popup-form .upload-box .upload-text {
		width: auto;
      height: auto;
		max-width: 150px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
      display: block;
      font-size: 0.7rem;
      color: #2062AB;
      margin-left: 5px;
	}
	.popup-form .upload-box .upload-size {
		width: auto;
      height: auto;
      display: block;
      font-size: 0.7rem;
      color: #2062AB;
      margin-left: 5px;
	}
	.popup-form .popup-form-bar input[type=file] {
        display: none;
    }
	.popup-form .btn-box {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 5px;
		}
	.popup-form .btn-box .confirm {
				width: auto;
				height: 34px;
				display: flex;
				align-items: center;
				font-size: 0.7rem;
				padding: 0 20px;
				margin-left:10px;
				color: #FFF;
				background-color: #3CAC00;
				border-radius:  15px;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
				.popup-box .btn-box .confirm:hover {
					background-color: #189300;
				}
				.popup-box .btn-box .confirm.red {
					background-color: #E83C3C;
				}
					.popup-box .btn-box .confirm.red:hover {
						background-color: #D73131;
					}
			.popup-form .btn-box .cancel {
				width: auto;
				height: 34px;
				display: flex;
				align-items: center;
				padding: 0 20px;
				font-size: 0.7rem;
				color: #555555;
				margin-left: 10px;
				background-color: #EBEBEE;
				border-radius:  15px;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
				.popup-box .btn-box .cancel:hover {
					color: #434343;
					background-color: #D4D4DA;
				}
/*----------------------------------------------------------------------------------------*/
/*-LOADING -------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.loader {
  border: 3px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  border-top: 3px solid #FFF;
  width: 18px;
  height: 18px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.loader.black {
  border: 3px solid rgba(0,0,0,0.2);
  border-top: 3px solid #333;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*----------------------------------------------------------------------------------------*/
/*-SINGBOX-------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.sign-content {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 60px 0 0;
}
	.sign-content .sign-box {
		width: 500px;
		height: auto;
		display: block;
		padding: 10px;
		text-align: center;
		border-radius: 50px;
	}
		.sign-content .sign-box .icon {
			width: 70%;
			height: auto;
			display: inline-block;
		}
		.sign-content .sign-box .title {
			width: 100%;
			height: auto;
			display: block;
			padding: 10px;
			color: #111;
			font-size: 1.5rem;
			font-weight: 800;
			font-family: Faustina;
		}
		.sign-content .sign-box .sub-title {
			width: 100%;
			height: auto;
			display: block;
			padding: 10px;
			color: #111;
			font-size: 2.5rem;
			font-weight: 600;
			line-height: 1.2rem;
			font-family: "Great Vibes";
		}
	.sign-content .signform-box {
		width: 300px;
		height: auto;
		display: block;
		margin: 0 auto;
	}
		.sign-content .signform-box .form-input {
		  width: 100%;
        height: 40px;
        display: block;
        font-size: 0.65rem;
        color: #1B83FF;
        background-color: #F8F8F8;
        outline: none;
        border: 1px solid #111;
        border-radius: 30px;
		  margin-top: 20px;
		  position: relative;
		}
			.sign-content .signform-box .form-input .input-icon {
			  width: 40px;
			  height: 40px;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  position: absolute;
			}
			.sign-content .signform-box .form-input .input-icon svg {
				width:20px;
				height: auto;
				display: block;
			 }		
				.sign-content .signform-box .form-input .input-icon svg path {
					fill:#404040;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}
			.sign-content .signform-box .form-input .eye-icon {
				  width: 20px;
				  height: 20px;
				  display: flex;
				  right: 10px;
				  margin: 10px 0;
				  align-items: center;
				  justify-content: center;
				  position: absolute;
			}
			.sign-content .signform-box .form-input .eye-icon svg {
				width:20px;
				height: auto;
				display: block;
			 }		
				.sign-content .signform-box .form-input .eye-icon svg path {
					fill:#999;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}	
		.sign-content .signform-box .form-input .eye-icon:hover path {
			fill:#666;
		}
		.sign-content .signform-box .form-input .eye-icon.active path {
         fill:#404040;
    	}
		.sign-content .signform-box .form-input input {
		  width: 100%;
        height: 40px;
        display: flex;
		  align-items: center;
        padding: 0 50px 0 50px;
        font-size: 0.7rem;
		  background-color: transparent;
        color: #111;
        outline: none;
        border: none;
        font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
		}
		.sign-content .signform-box .form-input.error {		 
      	background-color: #FFEBEC;
      	border: 1px solid #C03333;
		}
			.sign-content .signform-box .form-input.error input {		 
				color: #C03333;
			}
			.sign-content .signform-box .form-input.error .input-icon svg path {
				fill:#C03333;
			}	
		.sign-content .signform-box .sign-btn {
		  width: 100%;
        height: 40px;
        display: flex;
		  align-items: center;
		  justify-content: center;
        font-size: 0.8rem;
        color: #FFF;
        background-color: #111;
        outline: none;
        border-radius: 30px;
		  margin-top: 20px;
		  -webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
		}
			.sign-content .signform-box .sign-btn:hover {
        		background-color: #404040;
			}
/*----------------------------------------------------------------------------------------*/
/*-MENU------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/

.menu {
	height: 100vh;
	width: 60px;
	display: block;
	z-index: 90;
	background-color: #E3E7E8;
	padding: 10px;
	position: fixed;
   -webkit-transition: all 0.3s ease-in;
   -moz-transition: all 0.3s ease-in;
   -o-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in
}
	.menu.active {
		width: 280px;
	}
	.menu .menu-switch {
		height: 18px;
		width: 18px;
		display: flex;
		z-index: 91;
		border-radius: 50%;
		background-color: #111;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 21px;
		right: -10px;
	}
		.menu .menu-switch svg {
			width:8px;
			height: auto;
			display: block;
		 }		
			.menu .menu-switch svg path {
				fill:#FFF;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;
			}		
	.menu .logo {
		height: 40px;
		width: auto;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		margin-bottom: 30px;
	}
		.menu .logo img {
			height: 40px;
			width: auto;
			display: block;
		}
		.menu .logo span {
			height: auto;
			width: auto;
			display: block;
			color: #111;
			font-weight: 800;
			padding: 0 5px;
			font-family: Faustina;
			white-space: nowrap;
			position: absolute;
			left: 40px;
			opacity: 0;
			-webkit-transition: all 0.3s ease-in;
			-moz-transition: all 0.3s ease-in;
			-o-transition: all 0.3s ease-in;
			transition: all 0.3s ease-in;
		}
	.menu .link {
		height: 40px;
		width: auto;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		padding: 5px 10px;
		margin-top: 5px;
		border-radius: 10px;
	}
	.menu .link svg {
   	width:20px;
      height: auto;
      display: block;
    }		
		.menu .link svg path {
			fill:#404040;
			-webkit-transition: all 0.2s ease-in;
         -moz-transition: all 0.2s ease-in;
         -o-transition: all 0.2s ease-in;
         transition: all 0.2s ease-in;
		}		
		.menu .link span {
			height: auto;
			width: auto;
			color: #404040;
			font-size: 0.7rem;
			display: block;
			font-weight: 500;
			white-space: nowrap;
			padding: 0 5px;
			opacity: 0;
			left: 30px;
			-webkit-transition: all 0.3s ease-in;
			-moz-transition: all 0.3s ease-in;
			-o-transition: all 0.3s ease-in;
			transition: all 0.3s ease-in;
			position: absolute;
		}
		.menu .link:hover  {
			background-color: #D7DDDE;
		 }		
		.menu.active .logo span {
			opacity: 1;
		}
		.menu.active .link span {
			opacity: 1;
		}
		.menu.active .menu-switch svg {
			rotate: 180deg;
		}
		.menu .link.active {
			background-color: #C1D2E5;
		}
			.menu .link.active path {
				fill:#2062AB;
			}
			.menu .link.active span {
				color: #2062AB;
			}
	.menu .link {
		height: 40px;
		width: auto;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		padding: 5px 10px;
		margin-top: 5px;
		border-radius: 10px;
	}
	.menu .center {
		width: auto;
		height: auto;
		border-bottom: 1px solid #BFC6C7;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}
	.menu .low {
		width: auto;
		height: auto;
		border-bottom: 1px solid #BFC6C7;
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

/*----------------------------------------------------------------------------------------*/
/*-CONTENT-------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.content {
	width: 100%;
	height: auto;
	min-height: 100vh;
	max-height: 100vh;
	overflow-x: scroll;
	display: block;
	padding: 0 0 0 60px;
}
	.content .content-set {
		width: 100%;
		height: auto;
		display: block;
		padding: 10px 30px;
	}
		.main-subtitle {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			font-size: 0.7rem;
			margin-top: 10px;
			color: #555;
			justify-content: space-between;
		}
	.main-title {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		font-size: 1rem;
		font-weight: 600;
		color: #111;
		justify-content: space-between;
		margin-bottom:20px; 
	}
	
	.main-title .new-btn {
		width: auto;
		height: auto;
		font-size: 0.65rem;
		color: #FFF;
		font-weight: normal;
		background-color: #2062AB;
		border-radius: 10px;
		padding: 5px 13px;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
	}
		.main-title .new-btn:hover {			
			background-color: #00499B;
		}
	.main-title.big {
		font-size: 1.8rem;
		margin-top: -10px;
	}
	.main-title-text {
		width: 100%;
		height: auto;
		display: block;
		align-items: center;
		font-size: 0.8rem;
		color: #111;
		margin-top: -20px;
		margin-bottom:20px; 
	}
/*----------------------------------------------------------------------------------------*/
/*-FILTER-BOX--------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.filter-box {
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
}
	.search-box {
		width: 400px;
      height: 30px;
      outline: none;
      padding: 0 0 0 34px;
      font-size: 0.8rem;
      border-radius: 10px;
		display: flex;
		align-items: center;
      font-weight: 400;
      background-color: #FFF;
		border: 1px solid #E5E5E5;
      font-family: 'Prompt', sans-serif;
      color: #222;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
		position: relative;
	}
	.search-box .search-btn {
       width: auto;
       height: auto;
       display: block;
       position: absolute;
		 left: 0;
		 padding: 10px;
   }
       .search-box .search-btn svg {
           width:16px;
           height: auto;
           display: block;
			  margin: 0 ;
       }		
           .search-box .search-btn svg path{
               fill:#222;
           }
			  
	.search-box .search-input {
        width: 50%;
        height: 30px;
        border: none;
        outline: none;
        padding: 5px 10px 5px 0;
        font-size: 0.6rem;
        font-weight: 400;
        background-color: transparent;
        font-family: 'Prompt', sans-serif;
        color: #222;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }
	 .search-box .search-select {
        width: 50%;
        height: 30px;
        border: none;
        outline: none;
        padding: 5px 10px 5px 10px;
        font-size: 0.6rem;
        border-radius: 0 10px 10px 0;
        font-weight: 400;
        background-color: transparent;
        font-family: 'Prompt', sans-serif;
        color: #222;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
		  border-left: 1px solid #E5E5E5;
    }
/*----------------------------------------------------------------------------------------*/
/*-DASHBOARD--------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.dashboard-content {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	padding: 30px 30px;
}
	.dashboard-content .dashboard-set {
		width: 100%;
		height: auto;
		display: block;
	}
 .card-box {
 	width: 100%;
	height: auto;
	display: flex;
 }
 	 .card-box .card-main {
		width: 22%;
		height: auto;
		display: flex;
	 }
	 .card-box .card-body {
		width: 78%;
		height: auto;
		display: flex;
		flex-wrap: wrap;
	 }
 .card-box.sub-detail {
 	flex-wrap: wrap;
 }
 	 .card-box .card-list {
		width: 15.9%;
		height: auto;
		display: block;
		 border: 1px solid #E5E5E5;
		 border-radius: 10px;
		 margin-bottom: 10px;
		 margin-right: 10px;
	 }
	 	.card-box .card-list.main {
			width: 100%;
			border: 1px solid #000;
		}
		.card-box .card-list.cate {
			width: 24%;
		 	margin-right: 1%;
		}
		.card-box .card-list.wide {
			width: 74%;
		 	margin-right: 1%;
		}
	.card-box.sub-detail .card-list {		
		width: 15.9%;
	 }
	  .card-box.sub-detail .card-list.min-medium {		
		width: 19.6%;
	 }
	 .card-box.sub-detail .card-list.medium {		
		width: 39%;
	 }
    .summary-box {
       width: 100%;
       height: auto;
       display: block;
		 padding: 15px;
     }
	  	.summary-box .icon {
				height: 28px;
				width: auto;
				display: flex;
				align-items: center;
				overflow: hidden;
				position: relative;
				margin-bottom: 20px;
			}
			.summary-box .icon svg {
				width:auto;
				height: 26px;
				display: block;
			 }		
				.summary-box .icon svg path {
					fill: #2062AB;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}		
		.summary-box .text {
			font-size: 0.7rem;
			color: #111;
			font-weight: 600;
		}
		.summary-box .text-mini {
			font-size: 0.6rem;
			color: #666;
		}
		.summary-box .number {
			font-size: 1.5rem;
			color: #313C47;
			font-weight: 600;
		}
		.summary-detail {
       width: 100%;
       height: auto;
       display: flex;
		 justify-content: space-between;
		 padding: 10px;
		 border-top: 1px dashed #E5E5E5;
     }
	  	.summary-detail .detail-text {
        	width: auto;
			 height: auto;
			 font-size: 0.7rem;
			color: #111;
     }

	  	.summary-detail .detail-number {
			 width: auto;
			 height: auto;
			 font-size: 0.7rem;
			color: #111;
		  }
		  
		  .summary-detail .detail-number span {
				 font-size: 0.6rem;
				color: #666;
				width: 25px;
				text-align: right;
				display: inline-block;
		  }
/*----------------------------------------------------------------------------------------*/
/*-BANNER--------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
	.banner-box {
		width: 100%;
		height: auto;
		display: flex;
		margin-top: 15px;
		flex-wrap: wrap;
	}
	.banner-box .banner-list {
		width: 33%;
		height: auto;
		display: flex;		
		border-radius: 10px;
		border: 1px solid #E5E5E5;
		margin-right: 10px;
	}

	.banner-box .banner-list .banner-content {
		width: 100%;
		height: auto;
		display: block;
		padding: 10px;
	}

		.banner-box .title {
			font-size: 0.8rem;
        font-weight: 600;
        color: #111;
		}
		.banner-box .detail {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
		}
		.banner-box .detail .left {
			width: 70%;
			height: auto;
			display: block;
			color: #606060;
        font-size: 0.7rem;
		}
		.banner-box .detail .right {
			width: 30%;
			height: auto;
			display: flex;
			justify-content: flex-end;
		}
		.banner-box input {
        width: 100%;
        height: 30px;
        display: block;
        padding: 0 10px;
        font-size: 0.65rem;
        color: #1B83FF;
        background-color: #F8F8F8;
        outline: none;
        border: 1px solid #BAC4C6;
        border-radius: 10px;
        font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    }
		.banner-box .detail .icon-link {
			width: auto;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-size: 0.7rem;
        color: #1B83FF;
        background-color: #404040;
        font-weight: 600;
        border-radius: 10px;
        margin-left: 10px;
		}
		.banner-box .detail .icon-link:hover {
        background-color: #2F2F2F;
		}
		.banner-box .detail .icon-link:active {
			transform: scale(.9);
		}
			.banner-box .icon-link svg {
				width:16px;
				height: auto;
				display: block;
			 }		
				.banner-box .icon-link svg path {
					fill:#FFF;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}		



/*----------------------------------------------------------------------------------------*/
/*-TABLE------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.table-box {
	width: 100%;
	height: auto;
	display: block;
}
	.table-box .table-header {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		background-color: #F8F8F8;
		font-size: 0.6rem;
		color: #666;
		font-weight: 600;
		padding: 0 5px;
		border: 1px solid #E3E7E8;
		border-radius: 10px 10px 0 0;
	}
	.table-box .table-list {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		font-size: 0.65rem;
		padding: 0 5px;
		color: #111;
		background-color: #FFF;
		border-bottom: 1px solid #E5E5E5;
		border-left: 1px solid #E5E5E5;
		border-right: 1px solid #E5E5E5;
	}
	.table-box .table-list:hover {
		background-color: #F7F7F7;
	}
	.table-box  .table-header .body {
		width: auto;
		height: auto;
		display: block;
		padding:  3px 5px;
	}
	.table-box .table-list .body {
		width: auto;
		height: auto;
		display: block;
		padding:  8px 5px;
	}
		
	.table-box .table-footer {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 10px 10px;
		border-radius: 0 0 10px 10px;
		border-bottom: 1px solid #E5E5E5;
		border-left: 1px solid #E5E5E5;
		border-right: 1px solid #E5E5E5;
	}
		.table-box .table-footer .left {
			width: 40%;
			height: auto;
			display: block;
			font-size: 0.6rem;
			color: #606060;
		}
		.table-box .table-footer .right {
			width: 60%;
			height: auto;
			display: flex;
			justify-content: flex-end;
		}
	.table-box .name {
       font-size: 0.7rem;
		 color: #000;
    }	
	.table-box .text-status-red {
		width: auto;
		height: auto;
		display: inline-block;
		align-items: center;
		font-size: 0.6rem;
		padding: 2px 7px;
		color: #D42318;
		background-color: #FFDADA;
		border-radius: 5px;
		cursor: default;
		margin-left: 5px;
	}
	.table-box .process-status {
		width: auto;
		height: auto;
		display: inline-flex;
		align-items: center;
		font-size: 0.6rem;
		padding: 2px 10px 2px 3px;
		color: #111;
		border-radius: 15px;
		border: 1px solid #C2C2C2;
		cursor: default;
		margin: 2px 0;
	}
	.table-box .process-status.nostep {
		padding: 2px 10px 2px 10px;
	}
	
		.table-box .process-status .step {
			width: 16px;
			height: 16px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-right: 5px;
			background-color: rgba(0,0,0,0.5);	
			font-size: 0.6rem;
			color: #FFF;
			font-weight: 600;
			border-radius: 50%;			
		}
		
		.table-box .process-status .link {
			width: auto;
			height: auto;
			display: inline-flex;
			align-items: center;
			margin-left: 5px;
			margin-right: -7px;
		}
			.table-box .process-status .link svg {
				width:14px;
				height: auto;
				display: block;
				margin-right: 5px;
			 }		
				.table-box .process-status .link svg path {
					fill: #2B73C1;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}
		.table-box .process-status .link:hover path {
			fill: #2062AB;
		}
	.table-box .process-status.orange {
		color: #EA8B00;
		border: 1px solid #EA8B00;
	}
		.table-box .process-status.orange .step {
			background-color: #EA8B00;
		}
	.table-box .process-status.red {
		color: #EE3024;
		border: 1px solid #EE3024;
	}
		.table-box .process-status.red .step {
			background-color: #EE3024;
		}
	.table-box .process-status.blue {
		color: #2B73C0;
		border: 1px solid #2B73C0;
	}
		.table-box .process-status.blue .step {
			background-color: #2B73C0;
		}
	.table-box .process-status.green {
		color: #05BB47;
		border: 1px solid #05BB47;
	}
		.table-box .process-status.green .step {
			background-color: #05BB47;
		}
	.table-box .process-status.pointer {
		color: #2B73C0;
		border: 1px solid #2B73C0;
		cursor: pointer;
		width: auto;
		display: inline-block;
		text-overflow: ellipsis;
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		margin-right: 5px;
	}
	.table-box .process-status.pointer:hover {
		color: #00499B;
		border: 1px solid #00499B;
		background-color: #E6F0FB;
	}
	.table-box .process-status.end {
		color: #FFF;
		border: 1px solid #05BB47;
		background-color: #05BB47;
	}
	.table-box .process-status.list-end {
		color: #05BB47;
		border: 1px solid #05BB47;
	}
		.table-box .process-status.list-end:hover {
			color: #009736;
			border: 1px solid #009736;
		background-color: #EDF8F1;
		}
	
	
	.texticon-status-red {
		color: #EE3024;
		display: inline-flex;
		align-items: center;
		font-size: 0.65rem;
	}
		.texticon-status-red svg {
				width:16px;
				height: auto;
				display: block;
				margin-right: 5px;
			 }		
				.texticon-status-red svg path {
					fill: #EE3024;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}	
	.texticon-status-orange {
		color: #E09728;
		display: inline-flex;
		align-items: center;
		font-size: 0.65rem;
	}
		.texticon-status-orange svg {
				width:16px;
				height: auto;
				display: block;
				margin-right: 5px;
			 }		
				.texticon-status-orange svg path {
					fill: #E09728;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}		
	.texticon-status-green {
		color: #00873A;
		display: inline-flex;
		align-items: center;
		font-size: 0.65rem;
	}
		.texticon-status-green svg {
				width:16px;
				height: auto;
				display: block;
				margin-right: 5px;
			 }		
				.texticon-status-green svg path {
					fill: #00873A;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}	
		.texticon-status-blue {
			color: #2B73C0;
			display: inline-flex;
			align-items: center;
			font-size: 0.65rem;
			margin-left: 10px;
			padding-left: 10px;
			border-left: 1px solid #E3E7E8;
		}
			.texticon-status-blue span {
				width: 16px;
				height: 16px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				margin-right: 5px;
				border:  2px solid #2B73C0;
				font-size: 0.6rem;
				color: #FFF;
				font-weight: 600;
				border-radius: 50%;			
				cursor: pointer;
			}
			.texticon-status-blue svg {
					width:6px;
					height: auto;
					display: block;
				 }		
					.texticon-status-blue svg path {
						fill: #2B73C0;
						-webkit-transition: all 0.2s ease-in;
						-moz-transition: all 0.2s ease-in;
						-o-transition: all 0.2s ease-in;
						transition: all 0.2s ease-in;
					}	
	.table-box .sevice-send-btn {
		display: inline-block;
		font-size: 0.6rem;
		width: auto;
		height: auto;
		padding: 3px 12px;
		margin: 2px 5px 2px 0;
		text-align: center;
		border-radius: 10px;
		white-space: nowrap;
		color: #242424;
		border: 1px solid #E5E5E5;
		font-weight: 500;
		 -webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}
	.table-box .sevice-send-btn:hover {
		background-color: #F0F0F0;
	}
	.table-box .option-btn {
		display: inline-block;
		width: auto;
		height: auto;
		margin:  0 0 0 10px;
		text-align: center;
		 -webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}	
			.table-box .option-btn svg {
				width:14px;
				height: auto;
				display: block;
			 }		
				.table-box .option-btn svg path {
					fill: #424242;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}
	.table-box .option-btn.blue svg path {
		fill: #2b73c0;
	}	
	.table-box .option-text-btn {
		color: #2574CB;
		font-weight: 500;
		 -webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}
	.table-box .option-text-btn:hover {
		color: #00499B;
	}	
	/*----------------------------------------------------------------------------------------*/
	.table-box.membership .table-header .column-1 {
		width: 5%;
	}
	.table-box.membership .table-header .column-2 {
		width: 20%;
	}
	.table-box.membership .table-header .column-3 {
		width: 10%;
	}	
	.table-box.membership .table-header .column-4 {
		width: 13%;
	}
	.table-box.membership .table-header .column-5 {
		width: 47%;
	}
	.table-box.membership .table-header .column-6 {
		width: 5%;
	}

	
	.table-box.membership .table-list .column-1 {
		width: 5%;
	}
	.table-box.membership .table-list .column-2 {
		width: 20%;
	}
	.table-box.membership .table-list .column-3 {
		width: 10%;
	}
	.table-box.membership .table-list .column-4 {
		width: 13%;
	}
	.table-box.membership .table-list .column-5 {
		width: 47%;
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.table-box.membership .table-list .column-6 {
		align-items: center;
		justify-content: flex-end;
		width: 5%;
		display: flex;
	}
/*----------------------------------------------------------------------------------------*/
	.table-box.screening .table-header {
		background-color: #FAF3F3;
	}
	.table-box.screening .table-header .column-1 {
		width: 5%;
	}
	.table-box.screening .table-header .column-2 {
		width: 40%;
	}
	.table-box.screening .table-header .column-3 {
		width: 5%;
	}	
	.table-box.screening .table-header .column-4 {
		width: 5%;
		border-left: 1px solid #E5E5E5;
	}
	.table-box.screening .table-header .column-5 {
		width: 40%;
	}
	.table-box.screening .table-header .column-6 {
		width: 5%;
	}
	.table-box .table-list-screening {
		display: flex;
		flex-wrap: wrap;
		background: #F0F0F0;
	}
	.table-box.screening .table-list {
		width: 50%;
		display: inline-flex;
	}
	.table-box.screening .table-list:nth-child(2n+2) {
		border-left: none;
	}
	.table-box.screening .table-list .column-1 {
		width: 10%;
	}
	.table-box.screening .table-list .column-2 {
		width: 80%;
	}
	.table-box.screening .table-list .column-3 {
		align-items: center;
		justify-content: flex-end;
		width: 10%;
		display: flex;
	}
/*----------------------------------------------------------------------------------------*/
	.table-box.process .table-header {
		background-color: #F3F7FA;
	}
	.table-box.process .table-header .column-1 {
		width: 5%;
	}

	.table-box.process .table-header .column-2 {
		width: 30%;
	}
	.table-box.process .table-header .column-3 {
		width: 10%;
	}	
	.table-box.process .table-header .column-4 {
		width: 23%;
	}
	.table-box.process .table-header .column-5 {
		width: 27%;
	}
	.table-box.process .table-header .column-6 {
		width: 5%;
	}

	
	.table-box.process .table-list .column-1 {
		width: 5%;
	}
	.table-box.process .table-list .column-2 {
		width: 30%;
	}
	.table-box.process .table-list .column-3 {
		width: 10%;
	}
	.table-box.process .table-list .column-4 {
		width: 23%;
	}
	.table-box.process .table-list .column-5 {
		width: 27%;
	}
	.table-box.process .table-list .column-6 {
		align-items: center;
		justify-content: flex-end;
		width: 5%;
		display: flex;
	}
/*----------------------------------------------------------------------------------------*/
	.table-box.processing .table-header .column-1 {
		width: 3%;
	}
	.table-box.processing .table-header .column-2 {
		width: 45%;
	}
	.table-box.processing .table-header .column-3 {
		width: 45%;
	}	
	.table-box.processing .table-header .column-4 {
		width: 5%;
	}

	
	.table-box.processing .table-list .column-1 {
		width: 3%;
	}
	.table-box.processing .table-list .column-2 {
		width: 45%;
	}
	.table-box.processing .table-list .column-3 {
		width: 45%;
	}
	.table-box.processing .table-list .column-4 {
		align-items: center;
		justify-content: flex-end;
		width: 5%;
		display: flex;
	}
/*----------------------------------------------------------------------------------------*/
	.table-box.admin .table-header .column-1 {
		width: 5%;
	}
	.table-box.admin .table-header .column-2 {
		width: 20%;
	}
	.table-box.admin .table-header .column-3 {
		width: 10%;
	}	
	.table-box.admin .table-header .column-4 {
		width: 60%;
	}
	.table-box.admin .table-header .column-5 {
		width: 5%;
	}


	
	.table-box.admin .table-list .column-1 {
		width: 5%;
	}
	.table-box.admin .table-list .column-2 {
		width: 20%;
	}
	.table-box.admin .table-list .column-3 {
		width: 10%;
	}
	.table-box.admin .table-list .column-4 {
		width: 60%;
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.table-box.admin .table-list .column-5 {
		align-items: center;
		justify-content: flex-end;
		width: 5%;
		display: flex;
	}
/*----------------------------------------------------------------------------------------*/
/*-FORM------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/	
.form-box {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 50px;
}
	.form-box .form-header {
		width: 100%;
		height: auto;
		display: block;
		background-color: #F8F8F8;
		border: 1px solid #E3E7E8;
      border-radius: 10px 10px 0 0;
		font-size: 0.7rem;
      color: #666;
      padding: 10px 10px;
	}
	.form-box .form-header.lower-header {
		border-bottom: 1px solid #E3E7E8;
		border-left: 1px solid #E3E7E8;
		border-right: 1px solid #E3E7E8;
		border-top: none;
		
      border-radius: 0;
	}
	.form-box .form-header.mini {
		background-color: #FCFCFC;
		border-bottom: 1px solid #E3E7E8;
		border-left: 1px solid #E3E7E8;
		border-right: 1px solid #E3E7E8;
		border-top: none;
      border-radius: 0;
		font-size: 0.65rem;
      padding: 5px 10px;
	}
	.form-box .form-list {
		width: 100%;
		height: auto;
		display: flex;
		border-left: 1px solid #E3E7E8;
		border-right: 1px solid #E3E7E8;
		border-bottom: 1px solid #E3E7E8;
	}
		.form-box .form-list .form-cate {
			width: 17%;
			height: auto;
			display: block;			
			padding: 10px;
			font-size: 0.7rem;
			color: #111;
			position: relative;
		}
			.form-box .form-list .form-cate .dot {
				width: 6px;
				height: 6px;
				display: inline-block;
				border-radius: 50%;
				background-color: #E84245;
				position: relative;
				top: -5px;
				margin-left: 5px;
			}
			.form-box .form-list .form-cate #age {
				margin-left: 5px;
				margin-right: 5px;
			}
		.form-box .form-list .form-body {
			width: 50%;
			height: auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			border-left: 1px dashed  #E3E7E8;
			padding: 10px;
		}
		
		.form-box .form-list .form-hint {
			width: 33%;
			height: auto;
			display: block;
			padding: 10px;
			border-left: 1px dashed #E3E7E8;
		}
	.form-box .form-list.two .form-cate {
		width: 30%;
	}
	.form-box .form-list.two .form-body {
		width: 70%;
	}
	.form-box .form-list.one .form-body {
		width: 100%;
		border-left: none;
	}
	.form-box .form-footer {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		border-left: 1px solid #E3E3E3;
		border-right: 1px solid #E3E7E8;
		border-bottom: 1px solid #E3E7E8;
      border-radius: 0 0 10px 10px;
		font-size: 0.7rem;
      color: #666;
      padding: 10px 10px;
	}
		.form-box .form-footer .left {
			width: 50%;
			height: auto;
			display: flex;
		}
		.form-box .form-footer .right {
			width: 50%;
			height: auto;
			display: flex;
			justify-content: flex-end;
		}
		.form-box .form-footer .right {
			width: 50%;
			height: auto;
			display: flex;
			justify-content: flex-end;
		}
		.form-box .form-btn {
			display: block;
			font-size: 0.6rem;
			width: auto;
			height: auto;
			padding: 3px 12px;
			text-align: center;
			border-radius: 10px;
			color: #242424;
			font-weight: 500;
			 -webkit-transition: all 0.2s ease-in;
			-moz-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
			border: 1px solid #E5E5E5;
		}

		.form-box .form-btn:hover {
			background-color: #F0F0F0;
		}
/*----------------------------------------------------------------------------------------*/
/*-INPUT------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.form-box .input-text {
	width: auto;
   height: auto;
   display: block;
   font-size: 0.7rem;
	color: #111;
	margin-right: 5px;
}
	.form-box .input-text b {
		font-size: 0.75rem;
		font-weight: 600;
	}
.form-box .input-line {
	width: 100%;
   height: auto;
   display: flex;
	align-items: center;
	margin-bottom: 10px;
}
	.form-box .input-line:last-child {
		margin-bottom: 0;
	}
.form-box .input-subline {
	width: 100%;
   height: auto;
   display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding-left: 30px;
}
.form-box select {
	width: auto;
   height: 30px;
   display: block;
   padding: 0 10px;
   font-size: 0.65rem;
	color: #1B83FF;
   background-color: #F8F8F8;
   outline: none;
   border: 1px solid #BAC4C6;
	border-radius: 10px;
	margin-right: 10px;
	font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
}
.form-box textarea {
	width: 100%;
   height: 130px;
   display: block;
   padding: 5px 10px;
   font-size: 0.65rem;
	resize: none;
	color: #1B83FF;
   background-color: #F8F8F8;
   outline: none;
   border: 1px solid #BAC4C6;
	border-radius: 10px;
	margin-right: 10px;
	font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
}
.form-box input {
	width: auto;
   height: 30px;
   display: block;
   padding: 0 10px;
   font-size: 0.65rem;
	color: #1B83FF;
   background-color: #F8F8F8;
   outline: none;
   border: 1px solid #BAC4C6;
	border-radius: 10px;
	margin-right: 10px;
	font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
}
.form-box input.day {
	width: 60px;
}
.form-box input.year {
	width: 80px;
}
.form-box .fairid {
	color: #2062AB;
	font-weight: 500;
}

.form-box input.name, .form-box input.lastname {
	width: 180px;
}
.form-box input.tel {
	width: 350px;
}
.form-box input.social {
	width: 155px;
}
.form-box input.other {
	width: 80px;
	margin-left: 5px;
}
.form-box input.other.long {
	width: 150px;
}
.form-box input.other.extra-long {
	width: 400px;
}
.form-box input.other[disable] {
	opacity: 0.3;
}
.form-box input.address {
	width: 327px;
	margin-left: 5px;
}
.form-box input.subaddress {
	width: 110px;
	margin-left: 5px;
}
/*----------------------------------------------------------------------------------------*/
/*-FORM HINT----------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.hint-list {
    font-size: 0.7rem;
    color: #111;
	 position: relative;
	 width: auto;
	 height: auto;
	 display: block;
	 list-style: disc;
	 margin: 0;
	 padding: 0 0 0 20px;
}

/*----------------------------------------------------------------------------------------*/
/*-PART BOX------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.part-box {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40px 0;
}
.part-box .body {
	width: 25%;
	height: auto;
	display: block;
}
	.part-box .body .text {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
		font-size: 0.75rem;
		color: #B0BCBE;
      font-weight: 500;
	}
	.part-box .body .line-box {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
		.part-box .body .line-box {
			width: 100%;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
		}
			.part-box .body .line-box .center {
				width: 18px;
				height: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #B0BCBE;
				border-radius: 50%;
				position: absolute;
				z-index: 1;
			}
				.part-box .body .line-box .center span {
					width: 8px;
					height: 8px;
					display: block;
					background-color: #FFF;
					border-radius: 50%;
				}
				.part-box .body .line-box .front-line {
					width: 50%;
					height: 2px;
					background-color: #B0BCBE;
					position: absolute;
					left: 0;
				}
				.part-box .body .line-box .back-line {
					width: 50%;
					height: 2px;
					background-color: #B0BCBE;
					position: absolute;
					right: 0;
				}
			.part-box.stay-0 .part-0 .text {
				color: #2062AB;
			}
			.part-box.stay-0 .part-0 .center {
				background-color: #2062AB;
			}
			/*----------------------------------------------------------------------------------------*/
			.part-box.stay-1 .part-1 .text {
				color: #2062AB;
			}
			.part-box.stay-1 .part-1 .center {
				background-color: #2062AB;
			}
				.part-box.stay-1 .part-0 .back-line {
					background-color: #2062AB;
				}
				.part-box.stay-1 .part-1 .front-line {
					background-color: #2062AB;
				}
			/*----------------------------------------------------------------------------------------*/
			.part-box.stay-2 .part-2 .text {
				color: #2062AB;
			}
			.part-box.stay-2 .part-2 .center {
				background-color: #2062AB;
			}
				.part-box.stay-2 .part-1 .back-line {
					background-color: #2062AB;
				}
				.part-box.stay-2 .part-2 .front-line {
					background-color: #2062AB;
				}
			/*----------------------------------------------------------------------------------------*/
			.part-box.stay-3 .part-3 .text {
				color: #2062AB;
			}
			.part-box.stay-3 .part-3 .center {
				background-color: #2062AB;
			}
				.part-box.stay-3 .part-2 .back-line {
					background-color: #2062AB;
				}
				.part-box.stay-3 .part-3 .front-line {
					background-color: #2062AB;
				}
			/*----------------------------------------------------------------------------------------*/
			.part-box.stay-4 .part-4 .text {
				color: #2062AB;
			}
			.part-box.stay-4 .part-4 .center {
				background-color: #2062AB;
			}
				.part-box.stay-4 .part-3 .back-line {
					background-color: #2062AB;
				}
				.part-box.stay-4 .part-4 .front-line {
					background-color: #2062AB;
				}
/*----------------------------------------------------------------------------------------*/
/*-CHECK BOX----------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/	
.check-box {
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	margin-right: 20px;
	position: relative;
	padding-left: 30px;
}
	.check-box .check-text {
		font-size: 0.7rem;
		color: #333;
		transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
	}
.check-box .check-label {
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	cursor: pointer;
}
.check-box .check-label input  {
	display: none;
}
.check-box .check-label .check-indicator {
	width: 24px;
	height: 24px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	border-radius: 8px;
	left: 0;
	border: 1px solid #99A8AB;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.check-box.circle .check-indicator {
	border-radius: 50%;
}
	.check-box .check-label .check-indicator svg {
   	width:auto;
      height: 13px;
      display: block;
    }		
	.check-box .check-label .check-indicator path {
		fill: #BAC4C6;
		opacity: 0;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
	}
	
.check-box .check-label:hover .check-indicator {
	border: 1px solid #6F8386;
}
.check-box .check-label:hover .check-text {
	color:  #6F8386;
}

.check-box .check-label input:checked + .check-indicator {
	border: 1px solid #2062AB;
	color: #FFF;
}
.check-box .check-label input:checked + .check-indicator path {
	opacity: 1;
	fill: #2062AB;
}
.check-box .check-label input:checked ~ .check-text {
	color: #2062AB;
}
/*----------------------------------------------------------------------------------------*/
/*-BREADCRUMB------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------*/
.breadcrumb-box {
	width: 100%;
	height: 37px;
	display: flex;
	align-items: center;
	margin: 0 0 20px 0;
}
.breadcrumb-box a {
	width: auto;
	height: auto;
	display: inline-block;
	color: #999;
	font-size: 0.7rem;
	position: relative;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.breadcrumb-box span {
		width: auto;
		height: 8px;
		display: block;
		margin: 0 10px;
	}
	.breadcrumb-box span svg {
		width: auto;
		height: 8px;
		display: block;
	}
	.breadcrumb-box span svg path {
		fill: #A4A4A4;
	}
.breadcrumb-box a:hover {
	color: #333;
}	
.breadcrumb-box a.active {
	color: #2062AB;
	font-weight: 500;
	pointer-events: none;
}	
/*----------------------------------------------------------------------------------------*/
/*-PAGUNATION-------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
.pagination-bar {
	width: auto;
	height: auto;
	display: flex;
	text-align: center;
}
	.pagination-bar a {
		display: block;
		font-size: 0.6rem;
		width: auto;
		height: auto;
		padding: 3px 12px;
		margin: 0 5px;
		text-align: center;
		border-radius: 10px;
		color: #242424;
		font-weight: 500;
		 -webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}
	.pagination-bar a.arrow {
		border: 1px solid #E5E5E5;
	}
	
	.pagination-bar a:hover {
		background-color: #F0F0F0;
	}
	.pagination-bar a.arrow:hover {
		background-color: #F0F0F0;
	}
	.pagination-bar a.active {
		background-color: #E5E5E5;
		pointer-events: none;
	}
/*---------------------------------------------------------------------------------------*/
/*-HISTORY-----------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
.history-box {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #E3E7E8;
	padding-top: 20px;
	padding-bottom: 50px;
}
	.history-box .history-menu {
		width: 15%;
		height: auto;
		display: block
	}
	.history-box .history-body {
		width:70%;
		height: auto;
		display: block
	}
	.history-box .title {
		font-size: 0.8rem;
      color: #111;
		font-weight: 600;
		margin-bottom: 10px;
	}
	.history-menu .history-menu-box {
		width: 100%;
		height: auto;
		display: block;
	}
		.history-menu .history-menu-list {
			width: 100%;
        height: auto;
		  display: block;
		  font-size: 0.7rem;
        color: #333;
		  padding: 10px;
		  border-radius: 10px;
		  margin-bottom: 10px;
		}
		.history-menu .history-menu-list a {
        color: #333;
		}
		.history-menu .history-menu-list:hover {
			color: #000;
			text-decoration: underline;
		}
		.history-menu .history-menu-list.active {
			color: #000;
			font-weight: 600;
			background-color: #F2F4F7;
			pointer-events: none;
		}
		
		.history-table {
			width: 100%;
			height: auto;
			display: block;
		}
		.history-table .history-list {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			padding: 10px 0 ;
			border-bottom: 1px solid #E3E7E8;
		}
		.history-table .history-list:last-child {
			border-bottom: none;
		}
			.history-table .history-title {
				font-size: 0.7rem;
				font-weight: 500;
				color: #111;
			}
			.history-table .history-detail {
				font-size: 0.7rem;
				color: #333;
				display: block;
			}
			.history-table .process-file {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 10px;
			}
				.history-table .process-file .file-list {
					width: auto;
					height: auto;
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 3px 3px 3px 10px;
					border-radius: 10px;
					background-color: #E4E4E4;
					margin-bottom: 5px;
					margin-right: 5px;
				}
					.history-table .process-file .file-list .file-name {
					     width: auto;
						  height: auto;
						  max-width: 150px;
						  text-overflow: ellipsis;
						  overflow: hidden;
						  white-space: nowrap;
						  display: block;
						  font-size: 0.7rem;
						  color: #2062AB;
					}
						.history-table .process-file .file-list .file-name:hover {
							text-decoration: underline;
						}
						.history-table .process-file .file-list .file-delete {
					     width: auto;
						  height: auto;
						  padding: 2px 5px;
						  display: block;
						  font-size: 0.6rem;						  
						  border-radius: 8px;
						  color: #FFF;
						  font-weight: 500;
						  background-color: #EE3024;
						  margin-left: 10px;						  
					}
					.history-table .process-file .file-list .file-delete:hover {
						background-color: #DB2419;
				  	}
			
			
			
			
		.history-table .history-list .left {
			width: 70%;
			height: auto;
			display: block;
		}
		.history-table .history-list .right {
			width: 28%;
			height: auto;
			display: block;
			padding-top: 10px;
		}
		
	 .history-table .icon-link {
			width: auto;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-size: 0.7rem;
        color: #1B83FF;
        background-color: #404040;
        font-weight: 600;
        border-radius: 10px;
        margin-right: 5px;
		}
		.history-table .icon-link:hover {
        background-color: #2F2F2F;
		}
		.history-table .icon-link:active {
			transform: scale(.9);
		}
			.history-table .icon-link svg {
				width:16px;
				height: auto;
				display: block;
			 }		
				.history-table .icon-link svg path {
					fill:#FFF;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}	
		.history-body .process-history-list {
			width: 100%;
			height: auto;
			display: block;
			margin-top: 10px;
			border-radius: 10px;
			padding: 10px;
			border : 1px solid #767676;
		}
			   .history-body .process-history-list.start {
					  background-color: #F3F7FA;
					  border: 1px solid #618DAF;
				 }
			
			.history-body .process-history-list .process-date {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.6rem;
				color: #666;
			}
			.history-body .process-history-list .process-title {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.8rem;
				font-weight: 600;
				color: #111;
				margin: 5px 0 ;
			}
			.history-body .process-history-list .process-status-red {
				width: auto;
			  height: auto;
			  display: inline-block;
			  align-items: center;
			  font-size: 0.6rem;
			  padding: 2px 7px;
			  color: #D42318;
			  font-weight: normal;
			  background-color: #FFDADA;
			  border-radius: 5px;
			  cursor: default;
			  margin-left: 5px;
			}
			.history-body .process-history-list .process-mini-title {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.7rem;
				font-weight: 600;
				color: #111;
				margin: 5px 0 ;
			}
			.history-body .process-history-list .process-detail {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.7rem;
				color: #111;
			}
			.history-body .process-history-list .process-file {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 10px;
			}
				.history-body .process-history-list .process-file .file-list {
					width: auto;
					height: auto;
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 3px 10px 3px 10px;
					border-radius: 10px;
					background-color: #E4E4E4;
					margin-bottom: 5px;
					margin-right: 5px;
				}
					.history-body .process-history-list .process-file .file-list .file-name {
					     width: auto;
						  height: auto;
						  max-width: 150px;
						  text-overflow: ellipsis;
						  overflow: hidden;
						  white-space: nowrap;
						  display: block;
						  font-size: 0.7rem;
						  color: #2062AB;
					}
						.history-body .process-history-list .process-file .file-list .file-name:hover {
							text-decoration: underline;
						}
			.history-body .process-history-list .process-option {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 0.7rem;
				margin-top: 10px;
				padding-top: 10px;
				border-top: 1px dashed #999;
			}			
				.history-body .process-history-list .process-option .option-left {
					width: auto;
					height: auto;
					display: flex;
					font-size: 0.6rem;
				}
					

			.history-body .process-history-list.start {
				background-color: #F3F7FA;
        		border: 1px solid #618DAF;
			}
			
			.history-body .process-history-list.green {
				background-color: #B5E3C5;
        		border: 1px solid #007B2C;
			}
			.history-body .process-history-list.green .process-date {
				color: #005A1F;			
			}
			.history-body .process-history-list.green .process-option {
				border-top: 1px dashed #007B2C;
			}
			.history-body .process-history-list.green .process-option .option-left {
				color: #005A1F;			
			}
			
			.history-body .process-history-list.orange {
				background-color: #FFD7A0;
        		border: 1px solid #D0871F;
			}
			.history-body .process-history-list.orange .process-date {
				color: #86520C;		
			}
			.history-body .process-history-list.orange .process-option {
				border-top: 1px dashed #D0871F;
			}
			.history-body .process-history-list.orange .process-option .option-left {
				color: #86520C;				
			}
/*---------------------------------------------------------------------------------------*/
/*-Overview--------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
	.history-overview-box {
		width: 100%;
		height: auto;
		display: flex;
	}
		.history-overview-box .overview-left {
			width: 29%;
			height: auto;
			display: block;
			margin-right: 10px;
		}
		.history-overview-box .overview-center {
			width: 40%;
			height: auto;
			display: block;
		}
		.history-overview-box .overview-right {
			width: 29%;
			height: auto;
			display: block;
		}
	.history-overview-box.has-center {
		justify-content: space-between;
	}	
		.history-overview-box.has-center .overview-left  {
			margin-right: 0;
		}
		.history-overview-box .overview-list {
			width: 100%;
			height: auto;
			display: block;
			border: 1px solid #E5E5E5;
			border-radius: 10px;
        	margin-bottom: 10px;
			padding: 10px;
		}
		
		.overview-list .over-title {
			font-size: 0.7rem;
        color: #111;
        font-weight: 600;
        margin-bottom: 10px;
		  display: flex;
		  justify-content: space-between;
		}
			.overview-list .over-title .list-status {
				width: auto;
				height: auto;
				display: inline-block;
				align-items: center;
				font-size: 0.6rem;
				padding: 2px 7px;
				font-weight: normal;
				color: #008E33;
				background-color: #D5EEDE;
				border-radius: 5px;
				cursor: default;
				margin-left: 5px;
			}
		.overview-list .over-input-box {
			width: 100%;
			height: auto;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}
		.overview-list .text {
			  font-size: 0.65rem;
			  color: #111;
   	 }
		 .overview-list .icon-detail {
		 	width: 100%;
			height: auto;
			display: flex;
			min-height: 36px;
			padding: 0 0 0 46px;
			position: relative;
   	 }
		 	.overview-list .icon-detail .over-icon {
				width:26px;
      		height: auto;
      		display: block;
				position: absolute;
				left: 0;
			 }
			 	.overview-list .icon-detail .over-icon svg {
					width:26px;
					height: auto;
					display: block;
				 }		
					.overview-list .icon-detail .over-icon svg path {
						fill:#404040;
						-webkit-transition: all 0.2s ease-in;
						-moz-transition: all 0.2s ease-in;
						-o-transition: all 0.2s ease-in;
						transition: all 0.2s ease-in;
					}
			.overview-list .icon-detail .over-content {
				width: 100%;
				height: auto;
				display: flex;				
			 }
			 	.overview-list .icon-detail .over-content-list {
					width: 30%;
					height: auto;
					display: block;				
				 }
				 .overview-list .icon-detail .over-content-title {
					font-size: 0.6rem;
					font-weight: 500;
       			color: #8C8C8C;
					text-align: right;
				 }
				  .overview-list .icon-detail .over-content-number {
					font-size: 1.5rem;
					font-weight: 600;
       			color: #111;
					text-align: right;
				 }
		.overview-list .number-text {
				font-size: 0.7rem;
			  color: #111;
			  width: 100%;
			  height: auto;
			  display: flex;
			  align-items: center;
			  flex-wrap: wrap;
			  position: relative;
			  padding-left: 35px;
			  min-height: 30px;
			}
				.overview-list .number-text span {
					font-size: 0.8rem;
				  color: #111;
				  width: 30px;
				  height: 30px;
				  border-radius: 50%;
				  display: flex;
				  font-weight: 600;
				  align-items: center;
				  justify-content: center;
				  background: #E3E7E8;
				  position: absolute;
				  left: 0;
				}
		.overview-list .over-input-box input {
        width: 100%;
        height: 30px;
        display: block;
        padding: 0 10px;
        font-size: 0.65rem;
        color: #1B83FF;
        background-color: #F8F8F8;
        outline: none;
        border: 1px solid #BAC4C6;
        border-radius: 10px;
        font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
		  margin-right: 10px;
    }
	 .overview-list .over-input-box select {
        width: 100%;
        height: 30px;
        display: block;
        padding: 0 10px;
        font-size: 0.65rem;
        color: #1B83FF;
        background-color: #F8F8F8;
        outline: none;
        border: 1px solid #BAC4C6;
        border-radius: 10px;
        font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
		  margin-right: 10px;
    }
	.overview-list .over-input-box .over-btn {
        display: flex;
		  align-items: center;
        font-size: 0.6rem;
        width: auto;
        height: 30px;
        padding: 3px 12px;
        text-align: center;
        border-radius: 10px;
        color: #FFF;
		  background-color: #2062AB;
        font-weight: 500;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }
	 .overview-list .over-input-box .over-btn:hover {
        background-color: #00499B;
    }
	 .overview-list .over-input-box .over-icon-btn {
			width: auto;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-size: 0.7rem;
        color: #1B83FF;
        background-color: #404040;
        font-weight: 600;
        border-radius: 10px;
        margin-left: 10px;
		}
		.overview-list .over-input-box .over-icon-btn:hover {
        background-color: #2F2F2F;
		}
		.overview-list .over-input-box .over-icon-btn:active {
			transform: scale(.9);
		}
			.overview-list .over-input-box .over-icon-btn svg {
				width:16px;
				height: auto;
				display: block;
			 }		
				.overview-list .over-input-box .over-icon-btn svg path {
					fill:#FFF;
					-webkit-transition: all 0.2s ease-in;
					-moz-transition: all 0.2s ease-in;
					-o-transition: all 0.2s ease-in;
					transition: all 0.2s ease-in;
				}		
	.overview-list .over-text-list {
		max-width: 40em;
   	padding: 0;
   	overflow-x: hidden;
   	list-style: none;
		font-size: 0.7rem;
      color: #000;
	}
	.overview-list .over-text-list li:before {
		 float: left;
		 width: 0;
		 white-space: nowrap;
		 content:
	 ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
	 	letter-spacing: -1px;
	 	color: #666;
		font-size: 0.7rem;
	}
	.overview-list .over-text-list span:first-child {
   	padding-right: 0;
   	background: white;
	}
	.overview-list .over-text-list span + span {
		float: right;
		padding-left: 0;
		background: white;
	}
	.overview-list .over-text-list b {
		font-weight: normal;
	}
	 /*----------------------------*/
	 .history-overview-box .overview-list.red {
			border: 1px solid #EE3024;
			background-color: #FFE8E8;
		}
/*---------------------------------------------------------------------------------------*/
/*-HISTORY-DISPLAY------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
	.history-display-filter {
		width: 100%;
      height: auto;
      display: block;
		margin-bottom: 10px;
	}
		.history-display-filter select {
        width: 100%;
        height: 30px;
        display: block;
        padding: 0 10px;
        font-size: 0.65rem;
        color: #1B83FF;
        background-color: #F8F8F8;
        outline: none;
        border: 1px solid #BAC4C6;
        border-radius: 10px;
        margin-right: 10px;
        font-family: 'Prompt', thsarabun, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    }
	.history-display-box {
		width: 100%;
      height: auto;
      display: block;
	}
		.history-display-box .history-display-header {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        background-color: #F3F7FA;
        font-size: 0.7rem;
        color: #111;
        font-weight: 600;
        padding: 10px 10px;
        border-radius: 10px 10px 0 0;
        border : 1px solid #E3E7E8;
    }
	 .history-display-box .history-display-header-lower {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        background-color: #F3F7FA;
        font-size: 0.7rem;
        color: #111;
        font-weight: 600;
        padding: 10px 10px;
        border-radius: 0; 	
      	border-left : 1px solid #E3E7E8;
      	border-right : 1px solid #E3E7E8;
			border-bottom: 1px solid #E3E7E8;
    }
	  .history-display-box .history-display-header-mini {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        font-size: 0.7rem;
        color: #111;
        padding: 5px 10px;
        background-color: #F1F6F9;
        border-radius: 0; 	
      	border-left : 1px solid #E3E7E8;
      	border-right : 1px solid #E3E7E8;
			border-bottom: 1px solid #E3E7E8;
    }
	 .history-display-box .history-display-footer {
	 	  width: 100%;
        height: auto;
        display: flex;
        align-items: center;
		  justify-content: flex-end;
        font-size: 0.7rem;
        color: #111;
        padding: 5px 10px;
        background-color: #F3F7FA;
      	border-left : 1px solid #E3E7E8;
      	border-right : 1px solid #E3E7E8;
			border-bottom: 1px solid #E3E7E8;
			margin-bottom: 30px;
	 }
	 .history-display-box .history-display-footer a {
			width: auto;
		height: auto;
		font-size: 0.65rem;
		color: #FFF;
		font-weight: normal;
		background-color: #2062AB;
		border-radius: 10px;
		padding: 5px 13px;
      -webkit-transition: all 0.2s ease-in;
      -moz-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
		}

		.history-display-box .history-display-footer a:hover {
			background-color: #00499B;
		}
	 .history-display-box .history-display-body {
	 		width: 100%;
        	height: auto;
        	display: block;
	 }
	 .history-display-box .text-list {
		width: 100%;
   	padding: 0;
   	list-style: none;
		font-size: 0.7rem;
      color: #000;
		margin: 0;
      border-left : 1px solid #E3E7E8;
     	border-right : 1px solid #E3E7E8;
		border-bottom: 1px solid #E3E7E8;
	}

	.history-display-box .text-list li {
		width: 100%;
		height: auto;
		display: flex;
	}
	.history-display-box .text-list span:first-child {
		width: 30%;
		padding: 10px;
		display: block;
		
	}
	.history-display-box .text-list span:last-child  {
		width: 70%;
		padding: 10px;
		display: block;
      	border-left : 1px solid #E3E7E8;
	}
	.history-display-box .text-list b {
		font-weight: normal;
	}
	.history-display-box .text-list ul {
    font-size: 0.7rem;
    color: #111;
	 position: relative;
	 width: auto;
	 height: auto;
	 display: block;
	 margin: 0;
	 padding: 0 0 0 0;
	}
/*---------------------------------------------------------------------------------------*/
/*-RECORD-------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
.record-box {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	border-radius:  10px;
	border-top: 1px solid #E3E7E8;
	border-left: 1px solid #E3E7E8;
	border-right: 1px solid #E3E7E8;
	border-bottom: 1px solid #E3E7E8;
}
	.record-box .client-detail-box {
		width: 40%;
		height: auto;
		display: flex;
		border-right: 1px solid #E3E7E8;
	}
	.record-box .client-detail-box .set {
		width: 100%;
		height: auto;
	}
	.record-box .process-history-box {
		width: 60%;
		height: auto;
		display: block
	}
	.record-box .record-header {
	     width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        background-color: #F3F7FA;
        font-size: 0.6rem;
        color: #666;
        font-weight: 600;
        padding: 5px 10px;
	}
	.record-box .client-detail-box .record-header {
		border-bottom: 1px solid #E3E7E8;
      border-radius: 10px 0 0 0;
	}
	.record-box .process-history-box .record-header {		
      border-radius: 0 10px 0 0;
		border-bottom: 1px solid #E3E7E8;
	}
	
	.record-box .text-data-box {
		width: 100%;
		height: auto;
		display: block;
		padding: 10px;
      border-radius: 0  0  0 10px;
	}
	.record-box .title {
		font-size: 0.8rem;
      font-weight: 600;
      color: #111;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.record-box .text-list {
		max-width: 40em;
   	padding: 0;
   	overflow-x: hidden;
   	list-style: none;
		font-size: 0.7rem;
      color: #000;
	}
	.record-box .text-list li:before {
		 float: left;
		 width: 0;
		 white-space: nowrap;
		 content:
	 ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
	 	letter-spacing: -1px;
	 	color: #666;
		font-size: 0.7rem;
	}
	.record-box .text-list span:first-child {
   	padding-right: 0;
   	background: white;
	}
	.record-box .text-list span + span {
		float: right;
		padding-left: 0;
		background: white;
	}
	.record-box .text-list b {
		font-weight: normal;
	}
	.record-box .record-appointment-box {
		width: 100%;
		height: auto;
		display: block;
		border-top: 1px solid #767676;
		padding: 10px 0 0 0;
	}
	
	.record-box .record-endbar {		
		border-top: 1px solid #767676;
		padding: 10px 0 0 0;
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.record-box .record-endbar .record-appointment-btn  {		
	     display: block;
        font-size: 0.6rem;
        width: auto;
        height: auto;
        padding: 3px 12px;
        text-align: center;
        border-radius: 10px;
        color: #242424;
        font-weight: 500;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        border: 1px solid #E5E5E5;
	}
	.record-box .record-endbar .record-appointment-btn:hover  {		
        color: #000;
        border: 1px solid #333;
	}
	.record-box .record-endbar .end-process-btn  {		
	     display: block;
        font-size: 0.6rem;
        width: auto;
        height: auto;
        padding: 3px 12px;
        text-align: center;
        border-radius: 10px;
        color: #FFF;
        font-weight: 500;
		 	background-color: #EE3024;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        border: 1px solid #EE3024;
	}
	.record-box .record-endbar .end-process-btn:hover  {		
		background-color: #DB2419;
        border: 1px solid #DB2419;
	}
	.record-box .new-process-btn  {		
	     display: block;
        font-size: 0.6rem;
        width: auto;
        height: auto;
        padding: 3px 12px;
        text-align: center;
        border-radius: 10px;
        color: #242424;
        font-weight: 500;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        border: 1px solid #E5E5E5;
	}
	.record-box .new-process-btn:hover  {		
        border: 1px solid #999;
	}
	.record-box .process-history-data-box {
		width: 100%;
		height: auto;
		display: block;
		padding: 10px;
		border-radius: 0 0 0 10px;
	}
	.record-box .process-history-list-box {
		width: 100%;
		height: auto;
		display: block;
		margin-top: 10px;
	}
		.record-box .process-history-list {
			width: 100%;
			height: auto;
			display: block;
			margin-top: 10px;
			border-radius: 10px;
			padding: 10px;
			border : 1px solid #767676;
		}
			
			.record-box .process-history-list .process-date {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.6rem;
				color: #666;
			}
			.record-box .process-history-list .process-title {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.8rem;
				font-weight: 600;
				color: #111;
				margin: 5px 0 ;
			}
			.record-box .process-history-list .process-status-red {
				width: auto;
			  height: auto;
			  display: inline-block;
			  align-items: center;
			  font-size: 0.6rem;
			  padding: 2px 7px;
			  color: #D42318;
			  font-weight: normal;
			  background-color: #FFDADA;
			  border-radius: 5px;
			  cursor: default;
			  margin-left: 5px;
			}
			.record-box .process-history-list .process-mini-title {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.7rem;
				font-weight: 600;
				color: #111;
				margin: 5px 0 ;
			}
			.record-box .process-history-list .process-detail {
				width: 100%;
				height: auto;
				display: block;
				font-size: 0.7rem;
				color: #111;
			}
			.record-box .process-history-list .process-file {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 10px;
			}
				.record-box .process-history-list .process-file .file-list {
					width: auto;
					height: auto;
					display: inline-flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 3px 3px 3px 10px;
					border-radius: 10px;
					background-color: #E4E4E4;
					margin-bottom: 5px;
					margin-right: 5px;
				}
					.record-box .process-history-list .process-file .file-list .file-name {
					     width: auto;
						  height: auto;
						  max-width: 150px;
						  text-overflow: ellipsis;
						  overflow: hidden;
						  white-space: nowrap;
						  display: block;
						  font-size: 0.7rem;
						  color: #2062AB;
					}
						.record-box .process-history-list .process-file .file-list .file-name:hover {
							text-decoration: underline;
						}
						.record-box .process-history-list .process-file .file-list .file-delete {
					     width: auto;
						  height: auto;
						  padding: 2px 5px;
						  display: block;
						  font-size: 0.6rem;						  
						  border-radius: 8px;
						  color: #FFF;
						  font-weight: 500;
						  background-color: #EE3024;
						  margin-left: 10px;						  
					}
					.record-box .process-history-list .process-file .file-list .file-delete:hover {
						background-color: #DB2419;
				  	}
			.record-box .process-history-list .process-option {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 0.7rem;
				margin-top: 10px;
				padding-top: 10px;
				border-top: 1px dashed #999;
			}
			.record-box .process-history-list .process-option .option-left {
				width: auto;
				height: auto;
				display: flex;
				font-size: 0.6rem;
			}
			.record-box .process-history-list .process-option .option-right {
				width: auto;
				height: auto;
				display: flex;
			}
				.record-box .process-history-list .process-option a {
					font-size: 0.7rem;
					color: #000;
				}
				.record-box .process-history-list .process-option a:hover {
					text-decoration: underline;
				}
				.record-box .process-history-list .process-option span {
					border-right: 1px solid #888;
					margin: 0 10px;
				}
				
			.record-box .process-history-list.start {
				background-color: #F3F7FA;
        		border: 1px solid #618DAF;
			}
			
			.record-box .process-history-list.green {
				background-color: #B5E3C5;
        		border: 1px solid #007B2C;
			}
			.record-box .process-history-list.green .process-date {
				color: #005A1F;			
			}
			.record-box .process-history-list.green .process-option {
				border-top: 1px dashed #007B2C;
			}
			.record-box .process-history-list.green .process-option .option-left {
				color: #005A1F;			
			}
			
			.record-box .process-history-list.orange {
				background-color: #FFD7A0;
        		border: 1px solid #D0871F;
			}
			.record-box .process-history-list.orange .process-date {
				color: #86520C;		
			}
			.record-box .process-history-list.orange .process-option {
				border-top: 1px dashed #D0871F;
			}
			.record-box .process-history-list.orange .process-option .option-left {
				color: #86520C;				
			}


			
/*----------------------------------------------------------------------------------------*/
/*-APPOINTMENT-----------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/				
	.appointment-info-box {
		  width: 100%;
        height: auto;
        display: flex;
        border-radius: 10px;
        border-top: 1px solid #E3E7E8;
        border-left: 1px solid #E3E7E8;
        border-right: 1px solid #E3E7E8;
        border-bottom: 1px solid #E3E7E8;
	}
		.appointment-info-box .calendar-table {
			width: 40%;
       	height: auto;
      	display: block;
      	border-right: 1px solid #E3E7E8;
		}
		.appointment-info-box .calendar-detail {
			width: 60%;
			height: auto;
			display: block;		
		}
		.appointment-info-box .calendar-table .app-cal-header {
			width: 100%;
			height: auto;
			display: block;
			padding: 10px;
        border-bottom: 1px solid #E3E7E8;
		  font-size: 0.6rem;
        color: #666;
        font-weight: 600;
		  background-color: #F3FAF5;
		  border-radius: 10px 0 0 0;
		}
		.appointment-info-box .calendar-detail .app-cal-header {
			width: 100%;
			height: auto;
			display: block;
			padding: 10px;
        border-bottom: 1px solid #E3E7E8;
		  font-size: 0.6rem;
        color: #666;
        font-weight: 600;
		  background-color:#F3FAF5;
		  border-radius: 0 10px 0 0;
		}
		.appointment-info-box .app-cal-body {
			width: 100%;
			height: auto;
			display: block;
			padding: 10px;
		}
		
		.appointment-info-box .event-bar {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #E3E7E8;
			padding: 10px 0;
			font-size: 0.7rem;
			color: #111;
		}
		.appointment-info-box .event-bar:last-of-type {			
			border-bottom: none;
		}
		.appointment-info-box .event-bar .time {
			width: 20%;
			height: auto;
			display: block;
		}
		.appointment-info-box .event-bar .who {
			width: 80%;
			height: auto;
			display: block;
		}
		.appointment-info-box .event-bar .who-list {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 5px;
			border-radius: 10px;
			padding: 5px 10px;
			border: 1px solid #767676;
		}
			.appointment-info-box .event-bar .who-list {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5px;
				border-radius: 10px;
				padding: 5px 10px;
				border: 1px solid #767676;
			}
		.appointment-info-box .event-bar .who-list svg {
			width:24px;
			height: auto;
			display: inline-block;
		 }		
			.appointment-info-box .event-bar .who-list svg path {
				fill:#000;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;
			}		
		.appointment-info-box .event-bar .who-list:last-of-type {			
			
			margin-bottom: 0;
		}
		.appointment-info-box .event-bar .who a {
			display: inline-block;
			width: auto;
			height: auto;
			margin:  0 0 0 10px;
			text-align: center;
			 -webkit-transition: all 0.2s ease-in;
			-moz-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
		}	
				.appointment-info-box .event-bar .who a svg {
					width:14px;
					height: auto;
					display: block;
				 }		
					.appointment-info-box .event-bar .who a svg path {
						fill: #424242;
						-webkit-transition: all 0.2s ease-in;
						-moz-transition: all 0.2s ease-in;
						-o-transition: all 0.2s ease-in;
						transition: all 0.2s ease-in;
					}
		.appointment-info-box .no-event-bar {
			width: 100%;
			height: auto;
			padding: 50px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.75rem;
		}
/*----------------------------------------------------------------------------------------*/
/*-REGISTER-----------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
.register-content {
	width: 100%;
   height: auto;
   min-height: 100vh;
   display: block;
	justify-content: center;
	position: relative;
	background-color: #8A7966;
}
	.register-content .register-topbar {
		width: 100%;
      height: 30px;
      display: flex;
		justify-content: center;
		position: fixed;
		text-align: center;		
		background-color: #3D3126;
		top: 0;
		z-index: 999;
	}
		.register-content .register-topbar .register-topbar-set {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			font-size: 0.7rem;
         color: #B7A696;
			max-width:1120px; 
		}
	.register-content .register-header {
		width: 100%;
      height: auto;
      display: flex;
		justify-content: center;
		background-color:  #564C42;
		padding: 50px 30px 90px 30px;
		top: 0;
	}
	.register-content .register-set {
		width: 100%;
      height: auto;
      display: flex;
		margin: 0 auto;
		justify-content: center;
		max-width:1120px; 
		border-radius: 20px;
		position: relative;
		z-index: 99;
		margin-top: -70px;
	}
	.register-content .register-set form {
		width: 100%;
      height: auto;
	}
	.register-content .top-box {
		width: 100%;
      height: auto;
      display: block;
		position: relative;
		max-width:1120px; 
	}
		.register-content .big-title {
			height: auto;
			width: auto;
			display: block;
			color: #F1C565;
			font-weight: 600;
			font-family: Faustina;
			font-size: 1.6rem;
			line-height: 2rem;
		}
		.register-content .text-detail {
			height: auto;
			width: auto;
			display: block;
			color: #FFF;
			font-size: 1rem;
		}
		
		.register-content .form-box .form-list .form-cate {
			width: 30%;
		}
		.register-content .form-box .form-list .form-hint {
        width: 20%;
		 }
		 .register-content .form-box .form-list.blocked {
		 	pointer-events: none;
			background-color: #F8F7F5;
		 }
		 .register-content .form-btn {
		 	background-color: #4B4137;
			color: #FFF;
			border: 1px solid #4B4137;
			padding: 8px 20px;
			font-size: 0.8rem;
			border-radius: 15px;
		 }
		  .register-content .form-btn:hover {
		 	background-color: #8A7966;
			border: 1px solid #8A7966;
		 }
		 .register-content .form-box .form-header {
		 	color: #33291E;
			font-weight: 600;
			font-size: 0.9rem;
			border: none;
			background-color: #BAAFA2;
		 }
		 .register-content .form-box .form-header.mini {
		 	color: #33291E;
			font-size: 0.7rem;
			border: none;
			background-color: #CAC1B7;
			padding: 5px 10px;
		 }
		 .register-content .form-box .form-list {
		 	background-color: #FFF;
			border-left: none;
       	border-right: none;
        	border-bottom: 1px solid #BAAFA2;
		 }
		 .register-content .form-box .form-footer {
			  border-left: none;
			  border-right:  none;
			  background-color: #FFF;
			  border-bottom: none;
		 }
		 .register-content .form-box .form-list .form-body {
		 	border-left: 1px dashed #C5BCB1;
		 }
		  .register-content .form-box .form-list.one .form-body {
		 	border-left: none;
		 }
		 .register-content .form-box .form-list .form-hint {
        	border-left: 1px dashed #C5BCB1;
    	}
		 .register-content .form-box {
			margin-bottom: 0;
    	}
		.register-content .check-box .check-text {
			color: #111;
		}
		.register-content .check-box .check-label input:checked + .check-indicator {
			border: 1px solid #904B05;
		}
		.register-content .check-box .check-label input:checked + .check-indicator path {
        opacity: 1;
        fill: #904B05;
    	}
		.register-content .check-box .check-label input:checked ~ .check-text {
      	color: #904B05;
    	}
		.register-content .form-box input {
			color: #904B05;
		}
		.register-content .form-box select {
			color: #904B05;
		}
		 .register-content .register-hint-text .hint-list {
		 	font-size: 0.75rem;
       	color: #CFC8BF;
		 	margin-top: 10px;
		 }
		 
		 .register-content .register-end-footer {
		 	width: 100%;
			height: auto;
			display: block;
			margin: 30px 0 70px 0;
		 }
		 	 .register-content .register-end-footer .text {
			 	text-align: center;
				font-size: 0.7rem;
				color: #E3DFDA;
			 }
	.register-content .before-register-set {
		width: 100%;
      height: auto;
      display: flex;
		margin: 0 auto;
		justify-content: center;
		max-width:900px; 
		border-radius: 20px;
		position: relative;
		z-index: 99;
		margin-top: -100px;
	}
	.before-register-content {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 30px;
		margin-bottom: 30px;
		background-color: #FFF;
		border-bottom: 10px solid #E3993C;    
	}
		.before-register-content .logo {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30px 20px;
			background-color: #F4F4F4;
			border-radius: 30px 30px 0 0;
		}
			.before-register-content .logo img {
				width: 130px;
				display: inline-block;
			}
			.before-register-content .logo .logo-text-eng-t {
				color: #D47601;
				font-size: 1.5rem;
				font-weight: 800;
				font-family: Faustina;
			}
			.before-register-content .logo .logo-text-eng-l {
				color: #333;
				  font-size: 2.5rem;
				  font-weight: 600;
				  line-height: 2rem;
				  font-family: "Great Vibes";
			}
			.before-register-content .client {
				color: #E3993C;
			  font-weight: 500;
			  font-size: 0.8rem;
			  display: block;
			  text-align: center;
			  padding: 0 20px 0 20px;
			}
	.before-register-content .title-mini {
	     color: #797979;
        font-weight: 500;
        font-size: 0.8rem;
		  display: block;
		  text-align: center;
		  padding: 30px 20px 0 20px;
	}
	.before-register-content .title {
	     color: #111;
        font-weight: 600;
        font-size: 1rem;
		  display: block;
		  text-align: center;
		  padding: 0 20px 5px 20px;
	}
		.before-register-content .title-hr {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: center;
			margin-bottom: 30px
		}
		.before-register-content .title-hr span {
			width: 100px;
			height: 4px;
			display: inline-block;
			background-color: #E3993C;
		}
		.before-register-content .icon {
			width: 100%;
			height: 100px;
			display: inline-block;
			text-align: center;
			margin-bottom: 20px;
		}
		.before-register-content .icon svg {
			width: auto;
			height: 100px;
			display: inline-block;
		 }		
			.before-register-content .icon svg path {
				fill:#21B35F;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;
			}	
		.before-register-content .detail {
			width: 100%;
			height: auto;
			padding: 10px 30px;
			text-indent: 50px;
			font-size: 0.8rem;
			color: #333;
		}
		.before-register-content .checking {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px 30px;
			min-height: 500px;
		}
		.before-register-content .btn-bar {
			width: 100%;
			height: auto;
			padding: 30px 30px 30px 30px;
			display: block;
		}		
		.before-register-content .btn-bar .btn-bar-set {
			width: 100%;
			height: auto;
			display: block;
			text-align: center;
		}
		.before-register-content .btn-bar .btn-bar-set .btn-bar-hr {
			width: 100%;
			height: 1px;
			background-color: #CCCCCC;
			margin-bottom: 30px;
		}
		.before-register-content .btn-bar .accept-btn {
			background-color: #4B4137;
			color: #FFF;
			border: 1px solid #4B4137;
			padding: 8px 20px;
			display: inline-block;
			font-size: 0.8rem;
			border-radius: 15px;
			margin: 0 auto 10px auto;
		}
			.before-register-content .btn-bar .accept-btn:hover {
			  background-color: #8A7966;
			  border: 1px solid #8A7966;
			}
		.before-register-content .alert-text {
			color: #D58928;
			display: inline-block;
			align-items: center;
			font-size: 0.7rem;
			margin-top: 20px;
			padding-left: 21px;
			position: relative;
		}
			.before-register-content .alert-text svg {
					width:16px;
					height: auto;
					display: block;
					position: absolute;
					left: 0;
					top: 3px;
				 }		
					.before-register-content .alert-text svg path {
						fill: #D58928;
						-webkit-transition: all 0.2s ease-in;
						-moz-transition: all 0.2s ease-in;
						-o-transition: all 0.2s ease-in;
						transition: all 0.2s ease-in;
					}
		.before-register-content .alert-text.green {
			color: #05BC47;
			margin-top: 0;
		}
		.before-register-content .alert-text.green svg path {
			fill: #05BC47;
		}
		.before-register-content .form-check-box {
			width: 100%;
			height: auto;
			display: block;
			text-align: center;
		}
		.before-register-content .loader-box {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: center;
		}
		.before-register-content .loader-box .loader {
			width: 30px;
			height: 30px;
		}
	/*-----------------------------------------------------------------------*/
	.consent-form {
		width: 100%;
   	height: auto;
		display: block;
		background-color: #FFF;
		border-radius: 10px;
		padding: 30px 20px ;
		border-top: 10px solid #E3993C;
	}
		.consent-form .consent-title {
			color: #33291E;
       	font-weight: 600;
       	font-size: 0.9rem;
			margin-bottom: 20px;
		}
		.consent-form .consent-text {
			color: #111;
       	font-size: 0.7rem;
			margin-bottom: 10px;
			text-indent: 50px;
		}
		.consent-form .consent-form-list {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			padding-left: 50px;
		}
		.consent-form-list .consent-form-text {
			font-size: 0.7rem;
       	color: #111;
			margin-right: 10px;			
		}
		.consent-form-list .consent-form-hint {
			font-size: 0.7rem;
       	color: #B39358;	
			margin-right: 10px;			
		}
		.consent-form .where {
			width: 400px;
		}
		.consent-form .firstname {			
			width: 100px;
		}
		.consent-form .consent-signature-textarea {
			display: none;
		}		
		.consent-form .consent-signature-box {
			width: 60%;
			height: auto;
			display: block;
			margin-right: 10px;
		}
		.signature-box {
			width: 100%;
			height: 220px;
			background-color: rgba(0,0,0,0.05);
			border-radius: 10px;
			border: 1px solid #BAC4C6;
			padding-bottom: 30px;
		}
		.signature-clear {
	   	font-size: 0.7rem;
			display: inline-block;
			color: #B39358;
			margin-top: 5px;
			position: absolute;
			right: 10px;
		}

	.signature-text {
		width: 100%;
		height: 30px;
		font-size: 0.7rem;
		background-color: #BAC4C6;
		padding: 3px 10px;
		color: #111;
		text-align: center;
		position: absolute;
		border-radius: 0 0 10px 10px;
		left: 0;
		bottom: 0;
	}
	.consent-form .consent-form-footer {
		width: 100%;
		height: auto;
		padding: 20px 0 0 0;
		display: flex;
		justify-content: flex-end;
		border-top: 1px dashed #666;
	}

		.consent-form .upload-consent-file {
			width: 100%;
			height: auto;
			display: block;
			border: 1px solid #57858B;
			margin-top: 30px;
			border-radius: 10px;
		}
		.consent-form .upload-consent-file .consent-file-title {
			width: 100%;
			height: auto;
			display: block;
			color: #26555B;
        	font-size: 0.7rem;
			padding: 5px 10px;
			border-radius: 10px 10px 0 0;
			background-color: #BFE3E8;
		}
		.consent-file-content {
			width: 100%;
			height: auto;
			display: block;
			padding: 10px;
		}
		.consent-form .hint {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		color: #D42318;
		font-size: 0.6rem;
		margin-bottom: 10px;
		position: relative;
		padding-left: 23px;
		margin-top: 10px;
	}
		.consent-form .hint span {
			width: auto;
			height: 16px;
			display: block;
			position: absolute;
			left: 0;
		}
			.consent-form .hint span svg {
				width:auto;
				height: 16px;
				display: block;
			}		
				.consent-form .hint span svg path{
					fill: #D42318;
				}
		.consent-form .upload-btn {
			width: auto;
			height: 34px;
			display: inline-flex;
			align-items: center;
			font-size: 0.6rem;
			border-radius: 10px;
			padding: 7px 20px;
			background-color: #2062AB;
			color: #FFF;
			-webkit-transition: all 0.2s ease-out;
			-moz-transition: all 0.2s ease-out;
			-o-transition: all 0.2s ease-out;
			transition: all 0.2s ease-out;
			cursor: pointer;
		}
			.consent-form .upload-btn:hover {
				background-color: #00499B;
   			color: #FFF;
			}
	.consent-form .upload-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
	}
	.consent-form .upload-box .upload-text {
		width: auto;
      height: auto;
		max-width: 150px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
      display: block;
      font-size: 0.7rem;
      color: #2062AB;
      margin-left: 5px;
	}
	.consent-form .upload-box .upload-size {
		width: auto;
      height: auto;
      display: block;
      font-size: 0.7rem;
      color: #2062AB;
      margin-left: 5px;
	}
	.consent-form input[type=file] {
        display: none;
    }
	/*----------------------------------------------------------------------*/
	.infomation-table {
		width: 100%;
		height: auto;
		display: flex;		
			border: 1px solid #333;
	}
		.infomation-table .infomation-list {
			width: 25%;
			height: auto;
			display: block;		
			border-right: 1px solid #333;
		}
		.infomation-table .infomation-list:last-of-type {	
			border-right: none;
		}
		.infomation-table .infomation-header {
			width: 100%;
			height: auto;
			display: block;
			text-align: center;
			background-color: #C2CEE5;
			font-size: 0.7rem;
			color: #111;
			font-weight: 600;
		}
		.infomation-table .infomation-detail {
			width: 100%;
			height: auto;
			display: flex;
			border-top: 1px solid #333;
		}
			.infomation-table .infomation-left {
				width: 50%;
				height: auto;
				display: block;
				text-align: center;
				border-right: 1px solid #333;
			}
			.infomation-table .infomation-right {
				width: 50%;
				height: auto;
				display: block;
				text-align: center;
			}
			.infomation-table .infomation-detail img {
				width: auto;
				height: 50px;
				display: inline-block;
				margin: 10px auto;
			}
			.infomation-table .infomation-detail .title {
				font-size: 0.7rem;
				color: #111;
				font-weight: 600;
			}
			.infomation-table .infomation-detail .text {
				font-size: 0.7rem;
				color: #333;
				margin-bottom: 10px;
			}
	.hidden {
		display: none;
	}
	/*---------------------------------------------------------------------*/
	.summary-content {
		width: 100%;
      height: auto;
      display: flex;
      align-items: center;
		justify-content: center;
      padding: 30px 30px;
	}
		.summary-set {
			width: 70%;
			height: auto;
			display: block;
		}
	/*---------------------------------------------------------------------*/
	.categorize-content {
		width: auto;
      height: auto;
      display: ruby;
		
		min-width: 100%;
      min-height: 100vh;
      overflow : scroll;
       padding: 30px 0 30px 60px;
	}
		.categorize-set {
			min-width: 100%;
			width: auto;
			height: auto;
			display: block;
			padding: 0 30px;
		}
	.summary-table-box {
		display: table;
		width: 100%;
		height: auto;
		white-space: nowrap;
		border: 1px solid #000;
		font-size: 0.7rem;
		font-weight: 400;
		color: #000;
	}
		.summary-table-box .header {
			display: flex;
			width: auto;
			height: auto;
			white-space: nowrap;
			border-bottom: 1px solid #000;
		}
		.summary-table-box .body {
			display: flex;
			width: auto;
			height: auto;
			white-space: nowrap;
			border-bottom: 1px solid #000;
		}
		
		.summary-table-box .section {
			width: auto;
			height: auto;
			min-width: 40px;
			display:inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border-right: 1px solid #000;
		}
		.summary-table-box .section:last-child {
			border-right: none;
		}	
			.summary-table-box .section span {
				padding: 5px 5px;
			}
		.summary-table-box .min-sec {
			width: auto;
			height: auto;
			display:table;
			border-right: 1px solid #000;
		}
			.summary-table-box .min-sec:last-child {
				border-right: none;
			}	
		.summary-table-box .mid-sec {
			width: auto;
			height: auto;
			display:table;
			border-right: 1px solid #000;
		}
			.summary-table-box .mid-sec:last-child {
				border-right: none;
			}	
		.summary-table-box .maj-sec {
			width: auto;
			height: auto;
			display:table;
			border-right: 1px solid #000;
		}
			.summary-table-box .maj-sec:last-child {
				border-right: none;
			}	
		.summary-table-box .inbody {
			width: auto;
			height: auto;
			display:flex;
		}
		.summary-table-box .hearder-sec {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 0;
			border-bottom: 1px solid #000;
		}
		.summary-table-box .list-sec {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: center;
		}
		.summary-table-box .list-sec .list {
          width:  auto;
          height: auto;
          display: block;
          padding:10px 5px;
          border-right: 1px solid #000;
          text-align: center;
          writing-mode: vertical-rl;
          transform: scale(-1);
       }
				.summary-table-box .list-sec .list:first-child {
					border-right: none;
				}
	/*UPDATE  1 ----------------------------------------------------------------- */
		.all-service-box {
			width: auto;
			height: auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
			.all-service-box span {
				display: inline-block;
				padding: 5px 0;
				margin-right: 5px;
			}
		.all-service-box span svg {
			width:22px;
			height: auto;
			display: block;
		 }		
			.all-service-box span svg path {
				fill:#404040;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;
			}	
			
		.table-box .process-status.cate-icon {
			display: inline-flex;
			align-items: center;
			position: relative;
			padding: 2px 7px 2px 22px;
		}
		.table-box .process-status.cate-icon .name {
			display: inline-block;
			text-overflow: ellipsis;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
		  width: 100%;
		  font-size: 0.6rem;
		  color: #2B73C0;
		}
		.table-box .process-status.cate-icon .icon {
			display: inline-block;
			width:18px;
			height: 18px;
			position: absolute;
			left: 2px;
			border-radius: 50%;
		}
		.table-box .process-status.cate-icon .icon svg {
			width:18px;
			height: auto;
		 }		
			.table-box .process-status.cate-icon .icon path {
				fill:#2B73C0;
				-webkit-transition: all 0.2s ease-in;
				-moz-transition: all 0.2s ease-in;
				-o-transition: all 0.2s ease-in;
				transition: all 0.2s ease-in;
			}		
		.table-box .process-status.list-end .name {		 
		  color: #05BB47;
		}
		.table-box .process-status.list-end .icon path {		 
		 fill:  #05BB47;
		}

}