/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

/*@import url(layouts.css?2=4);footer*/
/*@import url(layouts-mostly_fluid.css);*/
/*@import url(layouts-column_drop.css);*/
/*@import url(layouts-shifter.css);*/
/*@import url(layouts-column.css);*/
/*@import url(layouts-column4.css);*/
/*@import url(layouts-column5.css); */
@import url(layouts-column1.css?2=3);/*Ex: Location, index GPS (Check In/Out)*/
@import url(layouts-column_table.css?2=3);/*Ex: my Shift / Time In/Out*/
@import url(layouts-column3.css?2=3);/*Ex: My Team*/
@import url(layouts-column_summaryinfo.css?11=11);/*Ex:index Summary information*/
@import url(layouts-column_deshboard.css?2=3);/*Ex:index deshboard*/
@import url(layouts-column_service.css?2=3);/*Ex: index service*/
@import url(layouts-column_2box.css?2=3);/*Ex: e-Pay Slip*/
@import url(layouts-column_form.css?2=4);/*Form*/
@import url(layouts-column_menu.css?2=3);/**/

@font-face{
	font-family:'IBM Plex Sans Thai';
	src: url(../font/IBMPlexSansThai-Regular.ttf);
}

	/*table, tr, td, span, ul,li{
		font-size:14px;
		font-weight:400;
		color: #676868;
		font-weight: normal;
		font-style: normal;
	}*/
	
	.color-sty-blue{
		color:var(--color-blue);
	}
	.color-sty-gray{
		color:var(--color-gray);
	}
	.color-sty-white{
		color:var(--color-white);
	}
	.color-sty-black{
		color:var(--color-black);
	}
	.color-sty-red{
		color:var(--color-red);
	}
	.font-sty-thin {
		font-family: var(--font-family-all);
		font-weight: 100;
		font-style: normal;
	}

	.font-sty-extralight {
		font-family: var(--font-family-all);
		font-weight: 200;
		font-style: normal;
	}

	.font-sty-light {
		font-family: var(--font-family-all);
		font-weight: 300;
		font-style: normal;
	}

	.font-sty-regular {
		font-family: var(--font-family-all);
		font-weight: 400;
		font-style: normal;
	}

	.font-sty-medium {
		font-family: var(--font-family-all);
		font-weight: 500;
		font-style: normal;
	}

	.font-sty-semibold {
		font-family: var(--font-family-all);
		font-weight: 600;
		font-style: normal;
	}

	.font-sty-bold {
		font-family: var(--font-family-all);
		font-weight: 700;
		font-style: normal;
	}
	
	.font_sty_s36{
		font-size: var(--font-s36);
	}
	.font_sty_s30{
		font-size: var(--font-s30);
	}
	.font_sty_s28{
		font-size: var(--font-s28);
	}
	.font_sty_s16{
		font-size: var(--font-s16);
	}
	.font_sty_s15{
		font-size: var(--font-s15);
	}
	.font_sty_s14{
		font-size: var(--font-s14);
	}
	.font_sty_s13{
		font-size: var(--font-s13);
	}
	
/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------Slip----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	.sty_latest_slip{
		margin:10px 5px 10px 5px;
		box-shadow: var(--color-2) 0px 3px 10px;
		border: 1px solid var(--color-2);
		border-radius: 15px;
	}
	.sty-div-earning{
		text-align:center;
		background: rgb(0,244,122);
		background: linear-gradient(0deg, rgba(0,244,122,0.3647584033613446) 5%, rgba(255,255,255,0) 1%);
	}
	.sty-div-deduction{
		text-align:center;
		background: rgb(255,157,157);
		background: linear-gradient(0deg, rgba(255,157,157,0.5272233893557423) 5%, rgba(255,255,255,0) 1%);
	}
	.sty-div-net{
		text-align:center;
		background: rgb(0,191,255);
		background: linear-gradient(0deg, rgba(0,191,255,0.6168592436974789) 5%, rgba(255,255,255,0) 1%);
	}
	.sty-div-tax{
		text-align:center;
		background: rgb(255,143,39);
		background: linear-gradient(0deg, rgba(255,143,39,0.5776435574229692) 5%, rgba(255,255,255,0) 1%);
	}
	.sty-div-earning2{
		text-align:center;
		background: rgb(0,244,122);
		background: linear-gradient(0deg, rgba(0,244,122,0.2) 0%, rgba(255,255,255,0) 82%);
	}
	.sty-div-deduction2{
		text-align:center;
		background: rgb(255,157,157);
		background: linear-gradient(0deg, rgba(255,157,157,0.2) 0%, rgba(255,255,255,0) 82%);
	}
	.sty-div-net2{
		text-align:center;
		background: rgb(0,191,255);
		background: linear-gradient(0deg, rgba(0,191,255,0.2) 0%, rgba(255,255,255,0) 82%);
	}
	.sty-div-tax2{
		text-align:center;
		background: rgb(255,143,39);
		background: linear-gradient(0deg, rgba(255,143,39,0.2) 0%, rgba(255,255,255,0) 82%);
	}

/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------cookie----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	#cookie-popup { 
		position: fixed; 
		bottom: 0; 
		left: 0; 
		width: 100%; 
		color: #fff; 
		text-align: center; 
		padding: 15px;
		box-shadow: 0px -5px 8px 0px rgba(0, 0, 0, 0.2);			
		background-color: var(--color-2);
		opacity: 95%;
	} 
  
	#cookie-popup p{ 
		margin: 0; 
		color: #fff; 
	} 
  
	#cookie-popup button { 
		background-color:var(--color-2);
		border-radius: 5%;
		display: inline-block;
		cursor: pointer;
		padding:5px 15px;
		color:#fff;
		border:1px solid #fff;
	} 

	#cookie-popup button:hover { 
	   
	} 


/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------icon----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	
	.dotSquareSmail{
		height: 7px;
		width: 7px;
		background-color:var(--color-2);
		box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
		border-radius: 2%;
		display: inline-block;
		vertical-align:middle;
		margin:5px;
	}
	.dotSquareBig{
		height: 55px;
		width: 55px;
		background-color:var(--color-3);
		/*box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;*/
		border-radius: 10%;
		display: inline-block;
		vertical-align:middle;
		margin:5px;
		cursor: pointer;
	}
	.dotRectangle{
		height: 120px;
		width: 100px;
		background-color:#ffffff;
		/*box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;*/
		box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
		border-radius: 5%;
		display: inline-block;
		cursor: pointer;
		font-weight: 600;
		vertical-align:bottom;
		text-align:center;
		padding-top:10px;
	}
	.dotRectangle2{
		height: 35px;
		width: 35px;
		background-color:var(--color-3);
		border-radius: 20%;
		display: inline-block;
		cursor: pointer;
	}
	.dotSquare{
		height: 70px;
		width: 70px;
		background-color:#ffffff;
		box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
		border-radius: 20%;
		display: inline-block;
		cursor: pointer;
		font-weight: 600;
		vertical-align:inherit;
		text-align:bottom;
	}
	.dotCircleNumber{
		height: 30px;
		width: 30px;
		line-height:30px;
		background-color:var(--color-2);
		border-radius: 50%;
		display: inline-block;
		cursor: pointer;
		font-weight: 600;
		color:#FFFFFF;
		vertical-align:middle;
	}
	.dotCircle2{
		height: 25px;
		width: 25px;
		background-color:var(--color-2);
		border-radius: 50%;
		display: inline-block;
		cursor: pointer;
		font-weight: 600;
	}
	.dotCircle{
		height: 40px;
		width: 40px;
		background-color:var(--color-3);
		border-radius: 50%;
		display: inline-block;
		cursor: pointer;
	}
	.dotCircle:hover{
		height: 40px;
		width: 40px;
		background-color:var(--color-4);
		border-radius: 50%;
		display: inline-block;
		cursor: pointer;
	}
	.dotCircleClick{
		height: 40px;
		width: 40px;
		background-color: var(--color-2);
		border-radius: 50%;
		display: inline-block;
		cursor: pointer;
	}
	
	/*-------------------------------------------------------------------------------------------------------------*/
	.btn-icons-tel1{
		background-image:var(--icons-tel1);
		background-repeat:no-repeat;
		background-size:14px auto;
		background-position:center;
	}
	.btn-icons-email1{
		background-image:var(--icons-email1);
		background-repeat:no-repeat;
		background-size:14px auto;
		background-position:center;
	}
	.btn-icons-id1{
		background-image:var(--icons-id1);
		background-repeat:no-repeat;
		background-size:16px auto;
		background-position:center;
	}
	.btn-icons-org1{
		background-image:var(--icons-org1);
		background-repeat:no-repeat;
		background-size:16px auto;
		background-position:center;
	}
	.btn-icons-jobdetail1{
		background-image:var(--icons-jobdetail1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-qr1{
		background-image:var(--icons-qr1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-download1{
		background-image:var(--icons-download1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-edit1{
		background-image:var(--icons-edit1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-save1{
		background-image:var(--icons-save1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-bisinesscard1{
		background-image:var(--icons-bisinesscard1);
		background-repeat:no-repeat;
		background-size:26px auto;
		background-position:center;
	}
	.btn-icons-location1{
		background-image:var(--icons-location1);
		background-repeat:no-repeat;
		background-size:16px auto;
		background-position:center;
	}
	.btn-icons-mail1{
		background-image:var(--icons-mail1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-web1{
		background-image:var(--icons-web1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-detail1{
		background-image:var(--icons-detail1);
		background-repeat:no-repeat;
		background-size:20px auto;
		background-position:center;
	}
	.btn-icons-approve1{
		background-image:var(--icons-approve1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-history1{
		background-image:var(--icons-history1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	.btn-icons-holiday1{
		background-image:var(--icons-holiday1);
		background-repeat:no-repeat;
		background-size:22px auto;
		background-position:center;
	}
	/*-------------------------------------------------------------------------------------------------------------*/
	.btn-icons-big-approve2{
		background-image:var(--icons-approve2);
		background-repeat:no-repeat;
		background-size:36px auto;
		background-position:center;
	}
	.btn-icons-big-history1{
		background-image:var(--icons-history1);
		background-repeat:no-repeat;
		background-size:36px auto;
		background-position:center;
	}
	.btn-icons-big-holiday1{
		background-image:var(--icons-holiday1);
		background-repeat:no-repeat;
		background-size:36px auto;
		background-position:center;
	}
	.btn-icons-big-leaveent1{
		background-image:var(--icons-leaveent1);
		background-repeat:no-repeat;
		background-size:36px auto;
		background-position:center;
	}
	.btn-icons-big-summary1{
		background-image:var(--icons-summary1);
		background-repeat:no-repeat;
		background-size:30px auto;
		background-position:center;
	}
	.btn-icons-big-requestform1{
		background-image:var(--icons-requestform1);
		background-repeat:no-repeat;
		background-size:36px auto;
		background-position:center;
	}
	/*-------------------------------------------------------------------------------------------------------------*/
	.btn-icons-sv-holiday{
		background-image:var(--icons-sv-holiday);
		background-repeat:no-repeat;
		background-size:50px auto;
		background-position:center;
	}
	.btn-icons-sv-welfare{
		background-image:var(--icons-sv-welfare);
		background-repeat:no-repeat;
		background-size:45px auto;
		background-position:center;
	}
	.btn-icons-sv-bisinesscard{
		background-image:var(--icons-sv-bisinesscard);
		background-repeat:no-repeat;
		background-size:50px auto;
		background-position:center;
	}
	.btn-icons-sv-shiftSchedules{
		background-image:var(--icons-sv-shiftSchedules);
		background-repeat:no-repeat;
		background-size:50px auto;
		background-position:center;
	}
	.btn-icons-sv-employeeInfo{
		background-image:var(--icons-sv-employeeInfo);
		background-repeat:no-repeat;
		background-size:45px auto;
		background-position:center;
	}
	.btn-icons-sv-personalInfo{
		background-image:var(--icons-sv-personalInfo);
		background-repeat:no-repeat;
		background-size:46px auto;
		background-position:center;
	}
	
	/*-------------------------------------------------------------------------------------------------------------*/
	.btn_oth{
		background-color:var(--color-3);
		border-radius: 5%;
		display: inline-block;
		cursor: pointer;
		padding:5px 15px;
		margin-left:20px;
	}
	.btn_oth:hover{
		background-color:var(--color-4);
	}
	.btn_left{
		background-color:var(--color-3);
		border-radius: 5%;
		display: inline-block;
		cursor: pointer;
		padding:5px 15px;
		float:left;
	}
	.btn_left:hover{
		background-color: var(--color-4);
	}
	.btn_right{
		background-color:var(--color-3);
		border-radius: 5%;
		display: inline-block;
		cursor: pointer;
		padding:5px 15px;
		float:right;
	}
	.btn_right:hover{
		background-color: var(--color-4);
	}
	.btn_page{
		border-radius: 50%;
		display: inline-block;
		padding:5px 15px;
	}
/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------Other----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	.summaryinfo{
		background: rgb(255,255,255);
		background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,249,251,1) 36%);
	}
	.empPhoto{
		max-width: 120px;
		margin:10px 5px 10px 5px;								
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		border-radius: 15px;border: 2px solid var(--color-2);
		cursor: pointer;
	}
	.empPhoto2{
		max-width: 80px;
		margin:5px;								
		border-radius: 15px;
		min-height:100px;
		min-width:50px;
		box-shadow: rgba(0, 0, 0, 0.04) 0px 6px 24px 0px, rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
		cursor: pointer;
	}
/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------ebCard----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	.ebCard-obj{
		border-radius: 20px;
		border: 1px solid var(--color-ebC1);
		background-size:300px;
	}
	.ebCard-obj-footer{
		background:var(--color-ebC2);
		border-radius:0 0 20px 20px;
		margin-top:20px;
	}
	.ebCard-obj-footer span{
		color:#fff;
	}
	.ebCard-obj-footer td{
		color:#fff;
	}
/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------tooltip----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	.tooltip2 {
		width:100%;
		position: relative;
		display: inline-block;
	}
	.tooltip2 .tooltip2Button{
		width:100%;
		margin-top:5px;
		padding: 6px 10px;
		border:1px solid  #ccc;
		background-color:var(--color-3);
		border-radius:0 10% 10% 0;
		height: 40px;
		color: #333;
		text-align:center;
		
	}
	.tooltip2 .tooltip2text {
		visibility: hidden;
		width: 140px;
		background-color:rgba(0, 0, 0, 0.5);
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 150%;
		left: 50%;
		margin-left: -75px;
		opacity: 0;
		transition: opacity 0.3s;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
		
	}

	.tooltip2 .tooltip2text::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color:rgba(0, 0, 0, 0.5) transparent transparent transparent;
	}
	.tooltip2:hover .tooltip2text {
		visibility: visible;
		opacity: 1;
	}
/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------explanation----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
	.explanation {
		font-size: .8rem;
		position: relative;
		margin: 0 0 1.5rem;
		background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background: var(--light-orange);
		border-radius: 8px;
		overflow: hidden;
		padding: 1rem 1rem 1rem 5rem;
	}
	article div.explanation {
		margin: 0 0 1rem;
	}
	/* *, :after, :before {
		box-sizing: border-box;
	}*/
	.article-content {
		font-size: 1.2rem;
		background: #fff;
		color: #000;
		overflow-wrap: break-word;
		border-radius: 8px;
		padding: 4rem;
		position: relative;
	}
	
	div.explanation, .article-content p.is-style-explanation, .article-content p:not(:first-of-type).explanation {
		font-size: .8rem;
		position: relative;
		margin: 0 0 1.5rem;
		background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background: #fff2df;
		border-radius: 8px;
		overflow: hidden;
		padding: 1rem 1rem 1rem 5rem;
	}
	div.explanation:before, .article-content p.is-style-explanation:before, .article-content p:not(:first-of-type).explanation:before {
		content: "Hey!";
		font-style: italic;
		font-weight: 700;
		background: #ff7a18;
		color: #fff;
		padding: 0.88rem 1rem;
		margin-right: 1rem;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		display: grid;
		place-items: center;
	}
	
	
	
/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------callouts----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/
		
	.callouts {
	  list-style-type: none;
	}
	/*
	li + li {
	  margin-left: 3.3333%;
	}
	 */
	/* BASE STYLES FOR EACH */
	.callouts li {
		display: inline-block;
		/* Real styles */
		position: relative;
		width: 80%;
		min-height: 100px;
		padding: 15px;
		background-color: #fff;
		border: 0px solid #c1c1c1;
		border-radius: 4px;
		box-shadow: 0 0 5px #c1c1c1;
	}
	

	/* TOP */
	.callouts--top:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 23px;
		top: -42px;
		border: 10px solid transparent;
		border-bottom: 32px solid rgb(193,193,193); /* IE8 Fallback */
		border-bottom: 32px solid rgba(193,193,193,0.5);
		z-index: 2;
	}
	.callouts--top:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 25px;
		top: -32px;
		border: 8px solid transparent;
		border-bottom: 25px solid #fff;
		z-index: 3;
	}

	/* TOP2 */
	.callouts--top2:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left:283px;
		top: -42px;
		border: 10px solid transparent;
		border-bottom: 32px solid rgb(193,193,193); /* IE8 Fallback */
		border-bottom: 32px solid rgba(193,193,193,0.5);
		z-index: 2;
	}
	.callouts--top2:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 285px;
		top: -32px;
		border: 8px solid transparent;
		border-bottom: 25px solid #fff;
		z-index: 3;
	}

	/* BOTTOM */
	.callouts--bottom:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 23px;
		bottom: -42px;
		border: 10px solid transparent;
		border-top: 32px solid rgb(193,193,193); /* IE8 Fallback */
		border-top: 32px solid rgba(193,193,193,0.5);
		z-index: 2;
	}
	.callouts--bottom:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: 25px;
		bottom: -31px;
		border: 8px solid transparent;
		border-top: 24px solid #fff;
		z-index: 3;
	}

	/* LEFT */
	.callouts--left:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: -42px;
		top: 17px;
		border: 10px solid transparent;
		border-right: 32px solid rgb(193,193,193); /* IE8 Fallback */
		border-right: 32px solid rgba(193,193,193,0.5);
		z-index: 2;
	}
	.callouts--left:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		left: -31px;
		top: 20px;
		border: 8px solid transparent;
		border-right: 24px solid #fff;
		z-index: 3;
	}

	/* RIGHT */
	.callouts--right:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		right: -42px;
		top: 17px;
		border: 10px solid transparent;
		border-left: 32px solid rgb(193,193,193); /* IE8 Fallback */
		border-left: 32px solid rgba(193,193,193,0.5);
		z-index: 2;
	}
	.callouts--right:after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		right: -31px;
		top: 20px;
		border: 8px solid transparent;
		border-left: 24px solid #fff;
		z-index: 3;
	}
	
	@media (min-width: 800px) {
		.callouts li {
				width: 70%;
		}
		/* TOP2 */
		.callouts--top2:before {
			left:273px;
		}
		.callouts--top2:after {
			left: 275px;
		}
    }

/*-------------------------------------------------------------------------------------------------------------*/
/*--------------------------------progress----------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------*/

	.progress1 {
		display:inline-block;
		height:12px;
		/*height:20px;
		padding:15px 0 0 0;*/
		margin:0;
		background:none;
		border: 0px solid #6098d5;
		border-radius: 0px;
		text-align: left;
		position:relative;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		/*box-shadow:0px 0px 2px #6098d5 inset;*/
	}
	.progress1::-webkit-progress-bar {
		/*height:11px;*/
		
		margin:0 auto;
		background-color: #fff;
		border-radius: 0px;
		box-shadow:0px 0px 2px #6098d5 inset;
	}
	.progress1::-webkit-progress-value {
		display:inline-block;
		float:left;
		/*height:11px;*/
		margin:0px -10px 0 0;
		background: #6098d5;
		border-radius: 0px;
		/*box-shadow:0px 0px 2px #777 inset;*/
	}
	.progress1:after {
		/*margin:-60px 0 0 -30px;
		padding:0;
		display:inline-block;
		float:left;
		content: url(../images/icons/man-icon3.png);
		transform: scale(.5);*/
	}

	.progress2 {
		display:inline-block;
		height:5px;
		/*height:20px;
		padding:5px 0 0 0;*/
		margin:0;
		background:none;
		border: 0;
		border-radius: 0px;
		text-align: left;
		position:relative;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.8em;
	}
	.progress2::-webkit-progress-bar {
		height:6px;
		
		margin:0 auto;
		background-color: #bed635;
		border-radius: 0px;
		/*box-shadow:0px 0px 6px #777 inset;*/
	}
	.progress2::-webkit-progress-value {
		display:inline-block;
		float:left;
		height:6px;
		margin:0px -10px 0 0;
		background: #fff;
		border-radius: 0px;
		/*box-shadow:0px 0px 1px #777 inset;*/
	}
	.progress2:after {
		margin:0px 0 0 0px;
		padding:0;
		display:inline-block;
		float:left;
		/*content: '100 meter';*/
		
		/*content: attr(value) '%';*/
	}
	
	
	
	
	/*-------------------------------------------------------------------------------------------------------------*/
	/*--------------------------------flowtable----------------------------------------------------------*/
	/*-------------------------------------------------------------------------------------------------------------*/

			
	table.flowtable {
		width:100%;
		border-top:1px solid var(--color-5);
		border-right:1px solid var(--color-5);
		/*margin:1em auto;*/
		border-collapse:collapse;
		background:#FFFFFF;
	}
	table.flowtable caption {
		color: #9ba9b4;
		font-size:.94em;
		letter-spacing:.1em;
		margin:1em 0 0 0;
		padding:0;
		caption-side:top;
		text-align:center;
	}	
	table.flowtable tr.odd td{
		/*background:#f7fbff*/
		background-color: #f7f7f7;
		background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f9f9f9));
	   
	}
	table.flowtable tr.odd .column1{
		/*background:#f4f9fe;*/
		background-color: #f7f7f7;
		background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f9f9f9));
	}
	table.flowtable tr.sumdepartment td{
		/*background:#f7fbff*/
		/*background-color: #f7f7f7;*/
		/*background: -webkit-gradient(linear, left top, left bottom, from(#00ff80), to(#bbffdd));*/
	   
	}
	table.flowtable .column1{
		/*background:#f9fcfe;*/
		background-color: #fdfdfd;
		background: -webkit-gradient(linear, left top, left bottom,  from(#fafafa), to(#f9f9f9));
		padding:5px;
	}
	table.flowtable td {
		/*color:#678197;*/
		color:var(--color-gray);
		border-bottom:1px solid var(--color-5);
		border-left:1px solid var(--color-5);
		padding:5px;
		text-align:left;
		
	}
	/*
	table.flowtable tr:hover td {
		background-color: #fdfdfd;
		background: -webkit-gradient(linear, left top, left bottom, from(var(--color-5)), to(var(--color-5)));
		
	}
	table.flowtable tr:hover td.nohover {
		background:#FFFFFF;
		
	}*/
	table.flowtable th {
		font-weight:normal;
		color:var(--color-gray);
		text-align:left;
		border-bottom: 1px solid var(--color-5);
		border-left:1px solid var(--color-5);
		padding:.3em 1em;
	}							
	table.flowtable thead th {
		background:#f4f9fe;
		text-align:center;
		color: #0073ea;
		background-color: #fafafa;
		background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f9f9f9));
	}	
	table.flowtable tfoot th {
		background:#f4f9fe;
		text-align:center;
		color: #0073ea;
		background-color: #f7f7f7;
		background: -webkit-gradient(linear, left top, left bottom,  from(#fafafa), to(#f9f9f9));
	}	
	table.flowtable tfoot th strong {
		font:bold 1.2em 'Century Gothic','Trebuchet MS',Arial,Helvetica,sans-serif;
		margin:.5em .5em .5em 0;
		color:#66a3d3;}		
	table.flowtable tfoot th em {
		color:#f03b58;
		font-weight: bold;
		font-size: 1.1em;
		font-style: normal;}
	
	
	
	
	/*-------------------------------------------------------------------------------------------------------------*/
	/*--------------------------------Other----------------------------------------------------------*/
	/*-------------------------------------------------------------------------------------------------------------*/
	.bg3{
		
	}
	.bg3x{
		background-image: var(--img-bg-3);
		background-repeat:no-repeat;
		/*background-repeat: no-repeat;
		background-attachment: fixed;*/
		background-position: right top;
		min-height:800px;
		background-color:#fff;
	}
	.bg5x{
		background-image:url(../images/bg5_1.png);
		background-repeat:no-repeat;
		background-repeat: no-repeat;
		/*background-attachment: fixed;*/
		background-position:right bottom;
		background-size:200px;
	}
	.lineBorder{
		color:var(--color-2);
		/*padding-bottom:7px;*/
		background-position: left bottom;
		background-repeat:no-repeat;
		background-size:280px 2px;
		border-bottom: 2px solid var(--color-2);
		vertical-align:bottom;
		margin:60px 15px 0 0;
		/*padding-left:5px;*/
		padding-left:0px;
		width:100%;
	}
	.lineBorderSub{
		height: 10px;
		width: 10px;
		background-color:var(--color-2);
		box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
		border-radius: 2%;
		display: inline-block;
		vertical-align:middle;
		margin:0px 10px 0px 5px;
	}
	
	
	.banner1{
		background-image: var(--img-bg-2);
		background-size:600px;
		background-position:left top;
		padding-top:0px;padding-bottom:0px;
	}
	.banner2{
		/*background:rgb(248,249,250);*/
		background: linear-gradient(163deg, rgba(248,249,250,1) 15%, rgba(255,255,255,0.14907212885154064) 52%);
		padding-top:20px;
	}
	.banner3{
		/*background: rgb(255,255,255);*/
		background: linear-gradient(345deg, rgba(255,255,255,1) 15%, rgba(255,255,255,0.10) 30%);
		padding-bottom:20px;
		
	}
	
	.rb_warning{
		/*width: 675px;*/
		border: 1px solid #ffdfbf;
		background-color:  #fff5ec;
		background-image: url('../images/icons2/sign_confirm.png');
		background-repeat: no-repeat;
		background-position: 10px 10px;
		padding: 10px;
		padding-left: 40px;
		
		background-size: 24px;
		min-height: 20px;
		
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius: 3px;
		margin-top: 10px;
		text-align:left;
	}
	.rb_error{
		/*width: 675px;*/
		border: 1px solid #ffcece;
		background-color:  #fff0f0;
		background-image: url('../images/icons2/sign_error.png');
		background-repeat: no-repeat;
		background-position: 10px 10px;
		padding: 10px;
		padding-left: 40px;
		
		background-size: 24px;
		min-height: 20px;
		
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius: 3px;
		margin-top: 10px;
		text-align:left;
	}
	.rb_ok{
		/*width: 675px;*/
		border: 1px solid #a6ffa6;
		background-color:  #f0fff0;
		background-image: url('../images/icons2/sign_success.png');
		background-repeat: no-repeat;
		background-position: 10px 10px;
		padding: 10px;
		padding-left: 40px;
		
		background-size: 24px;
		min-height: 20px;
		
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius: 3px;
		margin-top: 10px;
		text-align:left;
	}
	.rb_note{
		/*width: 675px;*/
		border: 1px solid #e4e4e4;
		background-color:  #f9f9f9;
		background-image: url('../images/icons2/kate.png');
		background-repeat: no-repeat;
		background-position: 10px 10px;
		padding: 10px;
		padding-left: 40px;
		
		background-size: 24px;
		min-height: 20px;
		
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius: 3px;
		margin-top: 10px;
		text-align:left;
		width:100%;
	}
	.rb_info{
		/*width: 675px;*/
		border: 1px solid #73b9e3;
		box-shadow: rgba(115, 185, 227, 0.5) 0px 1px 4px;
		/*background-color:  #f9f9f9;*/
		/*color: rgb(255, 255, 255);*/
		/*background-color: rgb(38, 189, 126);*/
		/*background-color:  #e7eff9;;*/
		background-color: rgba(115, 185, 227, 0.2);
		background-image: url('../images/icons2/kate.png');
		background-repeat: no-repeat;
		background-position: 10px 10px;
		padding: 10px;
		padding-left: 40px;
		
		background-size: 24px;
		min-height: 20px;
		
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius: 3px;
		margin-top: 10px;
		text-align:left;
	}
	
	.solidbox {
		width: 'auto';
		border: 1px solid var(--color-2);
		background-color: #fafafa;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 10px;
		-moz-border-radius: 0px 0px 5px 5px;
		-webkit-border-radius: 0px 0px 5px 5px;
	}
	.empBox{
		border: 1px solid #73b9e3;
		box-shadow: rgba(115, 185, 227, 0.5) 0px 1px 4px;
		background-color: rgba(115, 185, 227, 0.2);
		padding: 10px;
		padding-left: 20px;
		min-height: 20px;
		width:100%;
		-webkit-border-radius: 3px;
		-moz-border-radius:3px;
		border-radius: 3px;
		margin-top: 10px;
		text-align:left;
	}
	
	.button_01 {
		padding: 3px 10px 2px 5px;
		font-size: 11px;
		min-height:0px;
		height: 25px;
		/*background-image: url(images/button/bt01_bg.png);*/
		border: 1px solid #c5c5c5;
		box-shadow: 1px 1px 1px #eaeaea;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		cursor: pointer;
		white-space: nowrap;
		overflow-x: hidden;
		display: table-cell;
		
	}