@font-face {
	font-family: 'Montserrat';
	src: url('../font/Montserrat-Regular.otf');
}
html, body {
	background-color: #fff;
	color: #222222;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat' !important;
}
.cursor-pointer {
	cursor: pointer;
}
.cus-box-shadow {
	box-shadow: 0px 0px 6px 1px #dfe6e9;
}
.vertical-line {
	width: 2px;
	background-color: #84c664;
	height: 15px;
}
.custom-control-input:checked~.custom-control-label::before {
	border-color: #84c664;
	background-color: #84c664;
}

/* datepicker */
.datepicker {
	font-size: 10pt !important;
}
.datepicker td, .datepicker th {
	width: 32px;
	height: 26px;
}
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
	background-image: linear-gradient(#b5e29f, #b5e29f);
}
.datepicker table tr td.active {
	background-image: linear-gradient(to bottom,#84c664,#84c664);
}

/* font */
.font-bold{
	font-weight: bold;
}
.font-size-6 {
	font-size: 6pt;
}
.font-size-7 {
	font-size: 7pt;
}
.font-size-8 {
	font-size: 8pt;
}
.font-size-9 {
	font-size: 9pt;
}
.font-size-10 {
	font-size: 10pt;
}
.font-size-11 {
	font-size: 11pt;
}
.font-size-12 {
	font-size: 12pt;
}
.font-size-13 {
	font-size: 13pt;
}
.font-size-14 {
	font-size: 14pt;
}
.font-size-15 {
	font-size: 15pt;
}
.font-size-16 {
	font-size: 16pt;
}
.font-size-18 {
	font-size: 18pt;
}
.font-size-20 {
	font-size: 20pt;
}
.font-size-21 {
	font-size: 21pt;
}
.font-size-22 {
	font-size: 22pt;
}
.font-size-25 {
	font-size: 25pt;
}
.font-size-30 {
	font-size: 30pt;
}

/* rounded */
.rounded-top-4 {
	border-top-right-radius: 4rem;
	border-top-left-radius: 4rem; 
}
.rounded-top-2 {
	border-top-right-radius: 2rem;
	border-top-left-radius: 2rem; 
}
.cus-rounded {
	border-radius: .5rem !important;
}
.rounded-1 {
	border-radius: 1rem;
}

/* color */
.color-light-black {
	color: #555555;
}
.color-gray {
	color: #aaaaaa;
}
.color-green {
	color: #84c664;
}
.color-red {
	color: #eb291a;
}
.color-white {
	color: #fff;
}
.color-orange {
	color: orange;
}

/* background */
.bg-white {
	background-color: #fff;
}
.bg-green {
	background-color: #84c664;
}
.bg-green-light {
	background-color: #e5ffd9;
}
.bg-red-light {
	background-color: #ffcfcf;
}
.bg-gray-light {
	background-color: #f2f2f2 !important;
}
.bg-cream {
	background-color: #fff1c5;
}

/* button */
.btn-green {
	background-color: #84c664;
	color: #fff;
}
.btn-red-light {
	background-color: #ff6d6d;
	color: #fff;
}
.btn-green:hover {
	color: #fff
}
.btn-outline-green {
	border: 1px solid #84c664;
	background-color: #fff;
	color: #84c664;
}
.btn-outline-green:hover {
	color: #84c664;
}
.btn-google img {
	width: 1rem;
	height: 1rem;
}

/* link */
.link-deco:hover {
	text-decoration: none;
}
.link-black {
	color: #222222;
}
.link-black:hover {
	color: #84c664;
	text-decoration: none;
}
.link-green {
	color: #84c664;
}
.link-green:hover {
	color: #84c664;
}
.link-white {
	color: #fff;
}
.link-white:hover {
	color: #fff;
	text-decoration: none;
}

/* input */
.no-box-focus:focus {
	border: none;
	box-shadow: none;
	outline: none;
}
.no-outline-focus:focus {
	outline: none;
}
.box-green:focus {
	border-color: #84c664;
	box-shadow: none;
}
.input-bakul {
	border: none;
	border-bottom: 1px solid #9D9B9C;
}
.input-bakul:focus {
	outline: none;
	border-bottom: 1px solid #84c664;
}
.input-bakul:disabled {
	background-color: transparent;
}

/* width */
.width-80-percent {
	width: 80% !important;
}

/* height */
.max-height-100vh {
	max-height: 100vh;
}

/* margin */
.mt-50px {
	margin-top: 50px;
}
.mb-50px {
	margin-bottom: 50px;
}

/* padding */
.pt-50px {
	padding-top: 50px;
}
.pb-75px {
	padding-bottom: 75px;
}
.pb-50px {
	padding-bottom: 50px;
}

/* border */
.no-border {
	border: none;
}
.border-gray {
	border-color: #aaaaaa;
}
.border-gray-dark {
	border-color: #9D9B9C !important;
}
.border-cream {
	border: 2px solid #fff1c5 !important;
}

/* modal */
body.modal-open {
	padding-right: 0 !important;
}
.modal-open .modal.show {
	padding-right: 0 !important;
}

/* radio */
.contain {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 22px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.contain input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 50%;
}
.contain:hover input ~ .checkmark {
	background-color: #ccc;
}
.contain input:checked ~ .checkmark {
	background-color: #84c664;
}
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.contain input:checked ~ .checkmark:after {
	display: block;
}
.contain .checkmark:after {
	left: 10px;
	top: 6px;
	width: 6px;
	height: 11px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}