html,body {
    font-family: 'Roboto Condensed', 'Noto Sans TC', Microsoft JhengHei, Arial;
	height: 100%; width: 100%; margin: 0; padding: 0; 
}

.gray-background{
	background: rgba(67, 67, 67, 0.2);
	mix-blend-mode: normal; 
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	width: 100%; height: 100%; top: 0px; left: 0px;
	position: fixed; z-index: 999;
	display: none;
}

/* for loader */
.loader,
.loader:after { border-radius: 50%; width: 10em; height: 10em;}
.loader {          
	margin: auto; position: relative; z-index: 999; border-radius: 50%; font-size: 10px;
    border: 14px solid rgba(255, 255, 255, 0.9);
    border-left: 14px solid #0082C3;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.5s infinite linear;
	animation: load8 1.5s infinite linear;
}
@-webkit-keyframes load8 {
	0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes load8 {
	0% {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
#loadingDiv {
    background: gray; opacity: 0.6; backdrop-filter: blur(8px); z-index: 999;
	position: fixed; text-align: center; display: flex;
	width: 100%; height: 100%; top: 0px; left: 0px;
}


/* button style */

.cancel-btn{
	background-color: #FFFFFF; color: #00689D; border-radius: 4px; height: 45px; width: 100%; border: 2px solid #D9DDE1; 
	letter-spacing: 0.34px; font-weight: bold; font-size: 16px; font-family: 'Roboto Condensed';
}
.check-btn {
	background-color: #007DBC; color: #FFFFFF; border-radius: 4px; height: 45px; width: 100%; border: none;
	letter-spacing: 0.34px; font-weight: bold; font-size: 16px; font-family: 'Roboto Condensed';
}
.check-btn:disabled {
	background: #007DBC; opacity: 0.38;
}

.check-btn-second {
	background-color: #E7F3F9; color: #00689D; border-radius: 4px; height: 45px; width: 100%; border: none;
	letter-spacing: 0.34px; font-weight: 700; font-size: 16px; font-family: 'Roboto Condensed';
}



/* .check-btn {
	width: 120px; height: 35px;
	color: #FFFFFF; border: none; border-radius: 1px;
	background: 
	linear-gradient(-15deg, transparent 12%, #0082C3 0),
	linear-gradient(15deg, transparent 12%, #004876 0);
}
.check-btn:hover, .check-btn:focus, .check-btn:active, .check-btn.active {
	background-color: #5DADE2; color: #000000;
	width: 150px; font-weight: bold;
}

.cancel-btn {
	width: 120px; height: 35px;;
	border: none; border-radius: 1px;
	background: 
	linear-gradient(-15deg, transparent 12%, #EDECED 0), 
	linear-gradient(15deg, transparent 12%, #E0E1E0 0);

}
.cancel-btn:hover, .cancel-btn:focus, .cancel-btn:active, .cancel-btn.active {
	width: 150px; font-weight: bold;
}

.service-btn {
	width: 120px; height: 35px;
	color: #000000; border: none; border-radius: 1px;
	background: 
	linear-gradient(-15deg, transparent 12%, #FFEA28 0),
	linear-gradient(15deg, transparent 12%, #D2C124 0);
}
.service-btn:hover, .service-btn:focus, .service-btn:active, .service-btn.active {
	background-color: #FFEA28; color: #000000;
	width: 150px; font-weight: bold;
} */