*{
	box-sizing: border-box;
	margin:0px;
	padding:0px;
}
body{
	margin:0;
	font-family: 'Kanit', sans-serif;
	font-size: 1.1em;
	-webkit-animation: fadeIn 1s;
	-moz-animation: fadeIn 1s;
	animation: fadeIn 1s;
} 
.container{
	-webkit-animation: fadeUp 0.5s;
	-moz-animation: fadeUp 0.5s;
	animation: fadeUp 0.5s;
}
@keyframes fadeIn {
	0% {
	  opacity: 0.5;
	}
  
	100% {
	  opacity: 1;
	}
}
@-webkit-keyframes fadeIn{
	0% {
	  opacity: 0.5;
	}
  
	100% {
	  opacity: 1;
	}
}
@-moz-keyframes fadeIn{
	0% {
	  opacity: 0.5;
	}
  
	100% {
	  opacity: 1;
	}
}

@keyframes fadeUp {
	0% {
		opacity: 0.0;
		transform: translate(0, 50px);
		-webkit-filter: blur(10px);
	}
	50% {
		opacity: 0.3;
	}
	75% {
		opacity: 0.7;
		-webkit-filter: blur(0px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}

}
@-webkit-keyframes fadeUp{
	0% {
		opacity: 0.0;
		transform: translate(0, 50px);
		-webkit-filter: blur(10px);
	}
	50% {
		opacity: 0.3;
	}
	75% {
		opacity: 0.7;
		-webkit-filter: blur(0px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}
@-moz-keyframes fadeUp{
	0% {
		opacity: 0.0;
		transform: translate(0, 50px);
		-webkit-filter: blur(10px);
	}
	50% {
		opacity: 0.3;
	}
	75% {
		opacity: 0.7;
		-webkit-filter: blur(0px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}



a{
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
.img{
	width:100%;
}
.block{
	display: block;
}
.text-center{
	text-align:center;
}
.text-right{
	text-align:right;
}
.text-left{
	text-align:left;
}

.p-20{
	font-size:20px;
}
.w-12{
	width:100%;
}
.mg-b-5{
	margin-bottom:5px;
}
.mg-b-10{
	margin-bottom:10px;
}
.mg-b-20{
	margin-bottom:20px;
}
.mg-t-5{
	margin-top:5px;
}
.mg-t-10{
	margin-top:10px;
}
.mg-t-20{
	margin-top:20px;
}
.pd5{
	padding:5px;
}
.h-40{
	height: 40px;
}
.pr-0{
	padding-right: 0px;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
	display: none;
}

.background {
	width:100%; 
	height: 100vh;
	z-index:9000;
	position:fixed;
	top:0px;
	left:0px;
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	display:none;
}
.loading{
	width:100%; 
	height:100vh; 
	top:0px;
	left:0px;
	padding-top:50vh;
	text-align:center;
	z-index:9100;
	position:fixed;
	display:none;
}
.loader,
.loader:before,
.loader:after {
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  display:none;
  color: #ffffff;
  z-index:9101;
  text-indent: -9999em;
  margin: 0px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}


.pages{
	width: 100%;

	background: #E5E8E8;
	/* background: linear-gradient(90deg, #CCD1D1 0%, rgba(255,220,90,1) 100%); */

	/* background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size:cover; */
}
.pages_1{
	width: 100%;
	background: #E5E8E8;
	/* background: linear-gradient(90deg, #CCD1D1 0%,#C75CF3 100%); */

	/* background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size:cover; */
}
.pages_2{
	width: 100%;
	background: #E5E8E8;
	/* background: linear-gradient(90deg, #CCD1D1 0%,#F099F3 100%); */

	/* background-image: url("../img/bg.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size:cover; */
}
.box_white{ 
	margin: 10px;
	padding: 15px;
	
	background: #fff;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}

.page{
	width: 100%;
	background:#E5E8E8;
	/* background: linear-gradient(90deg, rgba(254,108,191,1) 0%, rgba(255,220,90,1) 100%); */
}
.logo_img{
	width: 80%;
	max-width: 300px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	
	-webkit-animation: fadeUp 2s;
	-moz-animation: fadeUp 2s;
	animation: fadeUp 2s;
}
.intro_head{
	position:absolute;
	top:25%;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	font: 3em sans-serif;
	color: #000;
	-webkit-animation: fadeUp 2s;
	-moz-animation: fadeUp 2s;
	animation: fadeUp 2s;
}
.intro_text{
	position:absolute;
	top:40%;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	color: #000;
	-webkit-animation: fadeUp 3s;
	-moz-animation: fadeUp 3s;
	animation: fadeUp 3s;
}

.intro_1{
	color: #000;
	-webkit-animation: fadeUp 1.5s;
	-moz-animation: fadeUp 1.5s;
	animation: fadeUp 1.5s;
}
.intro_2{
	color: #000;
	-webkit-animation: fadeUp 2s;
	-moz-animation: fadeUp 2s;
	animation: fadeUp 2s;
}
.intro_3{
	color: #000;
	-webkit-animation: fadeUp 2.5s;
	-moz-animation: fadeUp 2.5s;
	animation: fadeUp 2.5s;
}
.intro_4{
	color: #000;
	-webkit-animation: fadeUp 3s;
	-moz-animation: fadeUp 3s;
	animation: fadeUp 3s;
}
.intro_5{
	color: #000;
	-webkit-animation: fadeUp 3.5s;
	-moz-animation: fadeUp 3.5s;
	animation: fadeUp 3.5s;
}
.intro_6{
	color: #000;
	-webkit-animation: fadeUp 4s;
	-moz-animation: fadeUp 4s;
	animation: fadeUp 4s;
}


.text-orange{
	color:#F39C12;
}
.border-orange{
	border-bottom-style: solid;
	border-color:#F39C12;
}

.top_menu{
	color: #dbdbdb;
	font-size:1.2em;
	position:fixed;

	margin: 10px;
    top:0px;
    left:0px;

	width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);

	height:65px;
	z-index:7777;
	text-align:center;

	background: #fff;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}
.bt_back{
	position: fixed;
	left:4vw;
	top: 35px;
	width: 10vw;
	margin-top:0px;
	font-size: 20px;
	color:#2C3E50;
}
.top_header{
	position: fixed;
	left:0;
	top: 20px;
	/* left:10vw; */
	/* width: 90vw; */
	width: 100%;
	font-size: 26px;
	color:#2C3E50 ;
}
.top_header2{
	position: fixed;
	left:0;
	top: 10px;
	/* left:10vw; */
	/* width: 90vw; */
	width: 100%;
	font-size:20px;
	color:#2C3E50 ;
}
.top_header3{
	position: fixed;
	left:0;
	top: 14px;
	/* left:10vw; */
	/* width: 90vw; */
	width: 100%;
	font-size: 20px;
	color:#fff;
}
.main{ 
	margin-top:70px; 
	margin-bottom:70px;
	padding-top: 15px;
}
.main_hight{ 
	margin-top:45px; 
	padding-top: 15px;
	margin-bottom:160px;
}
.main_page{ 
	margin: 10px;

	margin-top:120px; 
	margin-bottom:70px;
	padding: 15px;
	padding-bottom: 50px;

	width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);
	
	background: #fff;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}

.box_img img{
	/* width: 100%;
	max-width: 400px;
	height: auto;
	max-height: 400px; */

}


.clickable-row{
	cursor:pointer;
}
.pointer{
	cursor:pointer;
}

.footer{
	background: #fff;
	opacity: 0.9;
	color: #666;
	font-size:1.5em;
	position:fixed;
    bottom:0px;
    left:0px;

	height:60px;
	z-index:7777;
	text-align:center;

	margin: 25px;
	margin-bottom: 0px;
	width: -webkit-calc(100% - 50px);
    width:    -moz-calc(100% - 50px);
    width:         calc(100% - 50px);

	border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
}
.footer_hight{
	width:100%;
	height:150px;
}

.footer .menu{
	color: #2C3E50;
	margin-top:10px;
	padding-top:10px;
	padding-bottom:20px;
	float:left;
	border:0px;
	cursor:pointer;
	height:40px;
	
	font-size:0.75em;
}
.footer .smallmenu{
	color: #2C3E50;
	margin-top:20px;
	padding-top:10px;
	padding-bottom:20px;
	float:left;
	border:0px;
	cursor:pointer;
	height:35px;
}
.footer .active{
	color: #fff;
	background-image: linear-gradient(160deg,#2C3E50 ,#566573 );
	border-radius: 15px;
}
.footer p{
	font-size:0.75em;
}

.menu-4{
	width:25%;
}
.menu-3{
	width:40%;
}
.menu-3m{
	width:20%;
}
.menu-2{
	width:50%;
}
.menu-6{
	width:16.5%;
}
.menu-5{
	width:20%;
}

.mb-10{
	margin-bottom:100px;
}

.topper{
	background: #17202A;
	opacity: 1;
	color: #fff;
	font-size:1.5em;
	position:fixed;
    top:0px;
    left:0px;

	width:100%;
	min-height:50px;

	z-index:7777;
	text-align:left;

	margin: 0px;
	margin-bottom: 0px;
	padding: 10px 20px;
}

.topper .user_detail{
	font-size:1em;
}
.topper .user_name{
	font-size:0.8em;
	padding-left: 75px;
}
.topper .user_email{
	font-size:0.5em;
	padding-left: 75px;
}


.menu_header{
	border: none;
	border-radius: 20px;
	color: white;
	padding: 10px 16px;
	margin: 0 auto;
	margin-top:5vh; 
	text-align: center;
	text-decoration: none;
	width:50%;
	opacity: 0.8;
	font-size: 18px;
}
.bt{
	margin-top:10px; 
	border: none;
	border-radius: 15px;
	color: white;
	padding: 6px 10px;
	margin: 0 auto;
	margin-top:5vh; 
	text-align: center;
	text-decoration: none;
	width:50%;
	font-size: 16px;
}
.bt_big{
	margin:0px; 
	border: none;
	border-radius: 15px;
	color: white;
	padding: 15px 10px;
	text-align: center;
	text-decoration: none;
	width:100%;
	opacity: 0.8;
	font-size: 20px;
}

.input_label{
	border-radius: 15px;
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:90%;
	height:45px;
	font-size: 16px;
	margin-bottom: 20px;
}
.input_bt{
	box-shadow: 2px 2px 4px #dbdbdb;
	border-radius: 10px;
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:100%;
	height:45px;
	font-size: 16px;
	margin-bottom: 20px;
}
.menu_bt{
	
}


input.pw{
	-webkit-text-security: disc;
	text-security: disc;
}

.parent {
	display: table;
	width: 90%;
	height: 100px;
	text-align: center;
	text-decoration: none;
	color: white;
	border-radius: 10px;
	cursor:pointer;
	box-shadow: 2px 2px 4px #dbdbdb;
}
.child {
	font-size: 16px;
	text-align: center;
	text-decoration: none;
	
	display: table-cell;
	vertical-align: middle;
}

.head_box{
	border: none;
	border-radius: 15px;
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	width:100%;
	font-size: 22px;
	margin-bottom: 20px;
}
.input_form{
	width: 100%;
	box-sizing: border-box;
	padding: 15px 10px;
	border: 1px solid #ccc;
  	border-radius: 15px;
}
.is-invalid{
	border: 1px solid red;
}
.risk_output{
	width: 20vh;
	height: 20vh;
	border: none;
	border-radius: 50%;
	color: white;
	font-size: 30px;
	text-align: center;
	padding-top: 30px;
}

.bg_red {
	background-color: #F1948A ;
	background-image: linear-gradient(160deg,#F1948A ,#FADBD8);
}
.bg_orange {
	background-color: #EB984E ;
	background-image: linear-gradient(160deg,#EB984E ,#F0B27A);
}
.bg_pink{
	background-color: #F6ABFA;
	background-image: linear-gradient(160deg,#F6ABFA,#FDCEFF);
}
.bg_green{
	background-color: #27AE60;
	background-image: linear-gradient(160deg,#27AE60,#7DCEA0);
}
.bg_blue{
	background-color: #3498DB;
	background-image: linear-gradient(160deg,#3498DB,#85C1E9);
}
.bg_purple{
	background-color: #AF7AC5;
	background-image: linear-gradient(160deg,#AF7AC5,#D2B4DE);
}
.bg_sky{
	background-color: #48C9B0;
	background-image: linear-gradient(160deg,#48C9B0,#76D7C4);
}
.bg_gray{
	background-color:#CACFD2;
	background-image: linear-gradient(160deg,#CACFD2,#E5E7E9);
}
.bg_blue2{
	background-color:#85C1E9;
	background-image: linear-gradient(160deg,#85C1E9,#AED6F1);
}
.bg_10{
	background-color:#ffb380;
	background-image: linear-gradient(160deg,#ffb380,#ffcc99);
}
.bg_11{
	background-color:#ff6666;
	background-image: linear-gradient(160deg,#ff6666,#ff9999);
}
.bg_12{
	background-color:#e6b800;
	background-image: linear-gradient(160deg,#e6b800,#ffe066);
}




.risk0{
	background-image: linear-gradient(160deg,#3498DB,#5DADE2);
}
.risk1{
	background-image: linear-gradient(160deg,#28B463,#6ddf9c);
}
.risk2{
	background-image: linear-gradient(160deg,#f4d03f,#f8e187);
}
.risk3{
	background-image: linear-gradient(160deg,#e74c3c,#ee8377);
}
.risk4{
	background-image: linear-gradient(160deg,#ff0000,#ff4d4d);
}
.text{
	color:#666;
}

.text_risk0{
	color:#3498DB;
}
.text_risk1{
	color:#28B463;
}
.text_risk2{
	color:#f1c40f;
}
.text_risk3{
	color:#e74c3c;
}
.text_risk4{
	color:#ff0000;
}

.text-green{
	color:#009933;
}
.text-red{
	color:#e74c3c;
}

.alerts{
	position:fixed;
    bottom:5px;
    right:25px;
	width:50px;
	height:50px;
	text-align:center;
	opacity: 0.5;
	z-index:8888;
}
.bt_alert{
	background-color: #0073e6;
	background-image: linear-gradient(160deg,#0073e6,#80bfff);
	color: #fff;
	font-size:1.5em;
	text-align:center;
	border: none;
	border-radius: 50%;
	width:50px;
	height:50px;
	margin: 0 auto;
	padding: 13px;
}
.a_user{
	color:#fff;
	background-color: #fff;
}
.href, 
.href:active, 
.href:visited, 
.href:link,
.href:hover{
	color:#fff;
	text-decoration:none;
}
.href:hover{
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.boxsha{
	-webkit-box-shadow: 0px -10px 70px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px -10px 70px 0px rgba(0,0,0,0.75);
	box-shadow: 0px -10px 70px 0px rgba(0,0,0,0.75);
}

.table-list{
	width:100%;
}
.table-list th,.table-list td {
	color:#fff;
	border-bottom: 1px solid #FFF;
	padding:25px;
	vertical-align: middle;
}

/* The container */
.checkbox {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 18px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .checkbox:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkbox input:checked ~ .checkmark {
	background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the checkmark when checked */
  .checkbox input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkbox .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }

  .checkmark-w{
	background-color: #fff;
  }
  .checkbox-w:hover input ~ .checkmark {
	background-color: #fff;
  }

  .daybox{
	width:14%;
	float: left;
	text-align:center;
}



.checktrue:checked,
.checktrue:not(:checked) {
    position: absolute;
    left:0;
	display: none;
}
.checktrue:checked + label,
.checktrue:not(:checked) + label
{
    position: relative;
    padding-top: 10px;
    padding-left: 45px;
    padding-right: 15px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #000;
}
.checktrue:checked + label:before,
.checktrue:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 10px;
    width: 25px;
    height: 25px;
    border: 1px solid #999;
    border-radius: 100%;
    background: #fff;
}
.checktrue:checked + label:after,
.checktrue:not(:checked) + label:after {
    content: '';
    position: absolute;
    top: 7px;
    left: 25px;
    
	border: 2px solid #999;
	  border-width: 0 3px 3px 0;
	  display: inline-block;
	  padding: 8px;
	  padding-left: 1px;
	 
	
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.checktrue:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
	
	transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
}
.checktrue:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
	
	
	transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
}

.form_profile {
	color: #fff;
	font-size:2em;
	text-align:center;
}