/* custom color : #66ccff */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
body.waiting,body.waiting a:hover,body.waiting *,body.waiting *:hover{
    cursor: wait !important;
}
input,textarea,select{
    color: #7f7f7f;
    font-size: 16px;
    font-family: 'Ubuntu', serif;
	border: none;
	padding: 5px;
	resize: none;
	margin: 7.5px 0;
	border: 1px solid #ccc;
}
input::placeholder,textarea::placeholder,select::placeholder{
    color: #bbb;
}
input:focus,textarea:focus,select:focus{
	outline-color:#7e7e7e;
}
body {
	width: 100%;
	background: #f6f6f6;
    color: #7f7f7f;
    font-size: 16px;
    font-family: 'Ubuntu', serif;
	overflow-x: hidden;
	overflow-y: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
} 
a {
    text-decoration: none;
    color: #9f9f9f;
    filter: brightness(0.75);
}
a:hover{
    text-decoration: none;
    filter: brightness(1);
}

h1{
	font-size: 30px;
	padding: 10px 0;
	margin:20px 0;
	color: rgba(180,180,180,0.9);
    font-weight: normal;
    font-style: oblique;
	text-align: center;
}
h2{
    font-size: 25px;
    color: rgba(160,160,160,0.9);
    font-weight: normal;
	border-bottom: 1px solid #ddd;
	padding-top: 30px;
	margin-bottom: 15px;
}
p{
	font-size: 16px;
	padding: 10px;
	line-height: 24px;
	color: #f6f6f6;
	display: inline-block;
	background: black;
	padding: 10px;
	margin: 3px 0px;
}
table {
	width: 100%;
}
th, td {
	width: 140px;
	vertical-align: top;
}
td {
	font-size: 13px;
	font-style: italic;
	text-align: center;
}
#sheet {
	width: 95%;
	margin: auto;
}
#header {
	overflow: hidden;
	min-height: 200px;
	margin-left: -3%;
	width: 110%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
#header div {
	display: inline-block;
	vertical-align: top;
}
/*
#hLogo, #hName, #hDt {
	height: 100%;
}
*/
#hLogo {
	width: 20%;
	text-align: center;
}
#hLogo img {
	max-height: 200px;
	max-width: 198px;
	padding-top: 15%;
}
#hName {
	width: 60%;
	text-align: center;
	font-weight: bold;
}
#hNameI {
	margin-top: 83px;
	font-size:20px;
}
#hDt {
	width: 14%;
	text-align: right;
	padding-right: 5%;
}
#hDt div {
	display: block;
}
#hdtAddr {
	margin-top: 60px;
}
#welcomeTxt {
	text-align: center;
	font-size:20px;
}
#doclist,#serList {
	text-align: center;
}
#stepBack, #stepNext {
	width: 7%;
	display: inline-block;
	vertical-align: top;
}
#stepBack img, #stepNext img, #stepBackS img, #stepNextS img {
	width: 100%;
	padding-top: 10%;
	vertical-align: middle;
	filter: invert(50%);
	cursor:pointer;
}
#stepBack img:hover, #stepNext img:hover, #stepBackS img:hover, #stepNextS img:hover {
	opacity: 0.8;
}
#tableDiv {
	display: inline-block;
	width: 83%;
}
#monthDiv {
	font-size: 20px;
	text-align: center;
	margin-bottom: 15px;
}
#monthDiv div {
	display: inline-block;
}
#month {
	width: 200px;
	text-align: center;
	color: rgba(160,160,160,0.9);
}
#stepBackS, #stepNextS {
	width: 20px;
}
#stepBackS img, #stepNextS img {
	padding-bottom: 5px;
}
.docSelDiv {
	background: #999999;
    display: inline-block;
	margin: 1vh;
	width: 300px;
	border-radius: 10px;
}
.serSelDiv {
	background: #e6e6e6;
    display: inline-block;
	margin: 1vh;
	width: 300px;
	border-radius: 10px;
	cursor: pointer;
}
.serSelDiv:hover {
	background-color: #aaa;
	color: #f6f6f6;
	cursor: pointer;
}
.docSelRnd {
	width: 280px !important;
}
.docSelDiv:hover {
	cursor: pointer;
}
.docSelDiv:hover .docSelName {
	background-color: #aaa;
	color: #f6f6f6;
}
.docSelIco {
	display: inline-block;
    background: #999999;
    width: 60px;
	border-radius: 10px;
}
.docSelIco img{
	height: 60px;
	width: 60px;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
}
.docSelName {
	background-image: none;
    display: inline-block;
    padding: 20px 10px 20px 10px;
    background: #e6e6e6;
    height: 20px;
    vertical-align: top;
	width: 220px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}
.serSelName {
	background: none;
    display: inline-block;
    padding: 20px 10px 20px 10px;
    height: 20px;
    vertical-align: top;
	width: 280px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
}
.day {
	width:90%;
	margin:auto;
}
.day div{
	display: inline-block;
	height: 30px;
	vertical-align: top;
	padding-top: 10px;
	margin-bottom: 10px;
	font-size: 16px;
	width: 25%;
	border-radius:10px;
}
.dayName {
	width: 75% !important;
	background-color: #e6e6e6;
	border-bottom-left-radius: 0px!important;
	border-top-left-radius: 0px!important;
}
.dayNum {
	border-top-right-radius: 0px!important;
	border-bottom-right-radius: 0px!important;
}
.time {
	display: inline-block;
    padding: 1vh 0.75vh;
    background-color: #e6e6e6;
    width: 85%;
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
    font-style: normal;
    font-size: 18px;
    border-radius: 13px;
	cursor: pointer;
}
.time:hover {
	background-color: #aaa !important;
	color: #f6f6f6;
}
.notime {
	color: #bbb;
	font-style: italic;
	font-size: 12px;
	text-align: center;
}
.cdtcell {
	display: block;
	width:50%;
	margin:0 auto;
}
.hidden {
	display: none;
}
#thankYouTxt {
	text-align: center;
	padding-top: 45%;
}
.sysmsgWin{
	position:fixed;
	top:-10vh;
	text-align:center;
	width:100vw;
	z-index:150;
}
.sysmsg{
	display:inline-block;
	min-width:50vh;
	font-size: 2.3vh;
	font-weight: bold;
	/*box-shadow: 0.5vh 0.5vh 1vh rgba(0,0,0,0.2);*/
	-webkit-box-shadow: 0px 0px 155px -9px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 155px -9px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 155px -9px rgba(0,0,0,0.4);
	text-align:center;
	padding:2vh;
}
.msg-msg{
    background-color:#f6f6f6;
	color:#7e7e7e;
}
.msg-warning{
    background-color:#f7f7f7;
	border:1px solid #d7d7d7;
	color:#7e7e7e;
}
.msg-alert{
    background-color:#ff6666;
	color:#f6f6f6;
}
.txt-warning{
	color:#ff9940;
}
html {
  scroll-behavior: smooth;
}
.invalid {
	border:1px solid #ff6666 !important;
	outline-color:#ff6666!important;
	/*margin: 0.8vh 0.3vh 0.3vh !important;*/
}
.hiddenImp {
	display: none !important;
}
.resultTable{
	width: auto;
    margin: auto
}
.resultTable td{
	text-align:left;
	font-style: normal;
	font-size:16px;
}
input[type="checkbox"]{
	height: 16px;
    width: 16px;
}
#clientDt input, #clientDt select, #clientDt textarea{
	width:100%;
	margin-bottom:20px;
}
.w10{
	width:18.75%!important;
}
.w20{
	width:40%!important;
}
@media (max-width: 1260px){
	.w10{
		width:18%!important;
	}
}
@media (max-width: 790px){
	.cdtcell{
		width:90%;
	}
	.w10{
		width:100%!important;
	}
	.w20{
		width:100%!important;
	}
	#hLogo{
		width:100%;
	}
	#hLogo img{
		padding-top:10px;
	}
	#hName{
		width:100%;
	}
	#hnameI{
		margin-top:10px;
	}
	#hDt{
		width: 100%;
		text-align:center;
		margin-bottom:10px;
	}
	#hdtAddr {
		margin-top: 10px;
	}
}
#viva{
	font-size: 18px;
	line-height: 30px;
}
#viva table td{
	font-size: 20px;
	padding: 3px;
}