body { margin: 0; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 13px; }
input, select, textarea {
	display: block;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-size: 13px;
  transform-origin: left;
  /*transform: scale(0.75);*/
  width: 90%;
  padding: 0.8rem 0.7rem;
  border: 1px solid #c9c9c9;
  box-shadow: none;
  margin: 5px 0px;
  border-radius: 5px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}
select { appearance: auto; font-size: 13px;}
input[type="file"] { opacity: 0; padding: 0; width: 0; }

button {
	display: block;
  border: none;
  background: transparent;
}

table { border-spacing: 0; }
table tr td, table tr th {
	border: 1px solid;
	border-right: transparent;
	border-bottom: transparent;
	padding: 10px;
}

table tr td:last-child, table tr th:last-child {
	border-right: 1px solid;
}

table tr:last-child td, table tr:last-child th {
	border-bottom: 1px solid
}

table tr th { background: #d4f5f5; }

a { text-decoration: none; }

.underline { text-decoration: underline;}

.container {
	margin: 5px;
}

.checkbox {
	position: relative;
  width: 20px !important;
  height: 20px;
  padding: 0 !important;
  /*border: 1px solid #095d7d;*/
  display: flex;
  align-items: center;
  margin: 5px 0px;
  white-space: nowrap;
}

.checkbox input {
	border: 1px solid #095d7d;
}
.checkbox input::after {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  top: -1px;
  width: 4px;
  height: 12px;
  border: solid white;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  opacity: 0;
  z-index: 2;
  transition: 0.3s;
}

.checkbox input:checked {
  background: #095d7d;
}

.checkbox input:checked:after {
  opacity: 1;
}

.radio {
	display: flex;
  align-items: center;
  cursor: pointer;
}

.radio input {
	border: 0.1em #095d7d solid;
  width: 1em;
  height: 1em;
  padding: 0;
  margin-right: 0.2em;
  border-radius: 50%;
  position: relative;
  margin-bottom: 0;
  transform: scale(1);
}

.radio input:after {
	content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #095d7d;
  transition: .3s;
}

.radio input:checked:after {
  transform: translate(-50%, -50%) scale(1);
}

.datetime-picker {
	border: 1px solid #c9c9c9;
  border-radius: 5px;
  width: 150px;
}

.datetime-picker input {
	border: none;
	transform: scale(1);	
	outline: none;
  padding: 0 10px;
  width: 100%;
}

.datetime-picker i {
	margin: 10px;
}

.btn-group, .btn-link-group {
	display: flex;
}

.btn-group .btn {
  margin: 5px;
  background-color: #336b9c;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
}

.btn-group .btn-edit {
  margin: 5px auto;
  background-color: #0db6bb;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
  text-align: center;
}

.btn-group .btn-view {
  margin: 5px auto;
  background-color: #2c7cdf;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
  text-align: center;
}

.btn-group .btn-delete {
  margin: 5px auto;
  background-color: #ff3232;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
}

.btn-group .btn-back {
  margin: 5px auto;
  background-color: #009302;
  color: #fff;
  padding: 10px;
  font-size: 15px;
  border-radius: 5px;
}

.btn-group .btn-green-light { border: 1px solid #2fd93c; background: none; color: #2fd93c; }

.btn-group .btn-xlg, .btn-link-group-xlg {
  width: 250px;
}

.btn-group .btn-lg, .btn-link-group-lg {
  width: 150px;
}

.btn-group .btn-rg, .btn-link-group-rg {
  width: 100px;
}

.btn-group .btn-sm, .btn-link-group-sm {
  width: 70px;
}

.btn-group .btn-xsm, .btn-link-group-xsm {
  width: 40px;
}

.btn-group button, .btn-group div { margin: auto; }

.file-item { border: 1px solid; height: 20px; }
.file-item .item-name { position: relative; margin: auto; width: 100%; text-align: center; }

.control-group {
  align-items: center;
  justify-content: center;
}

.require .req-label {
	background: #f70e24;
  color: #fff;
  padding: 3px;
  border-radius: 5px;
  margin-left: 5px;
  font-size: 12px;
}

.is-fullwidth { width: 100%; }
.scrollable { overflow: scroll; }
.y-scrollable { overflow-y: scroll; }
.x-scrollable { overflow-x: scroll; }

.border-st1 { border: 1px solid; border-radius: 10px; border-color: #006ecf; }

.border-bottom { border-bottom: 1px solid #ebd3d3; }
.border-top { border-top: 1px solid #ebd3d3; }

.container .content { padding: 5px; }
.container-left, .container-right { width: 49%; margin: 10px 1%; }
.container-left .content, .container-right .content { max-height: 250px; min-height: 250px; overflow-y: scroll; }

.is-txt-left { text-align: left; }
.is-txt-center { text-align: center; }
.is-txt-right { text-align: right; }

.is-flex { display: flex; }
.is-block { display: block; }

.is-hidden { display: none; }

.txt-color-st1 { color: #ff6699; }

.move-date-area { margin: 10px 5px; }

.max-h100 { max-height: 100px }
.max-h200 { max-height: 200px }
.max-h300 { max-height: 300px }
.max-h400 { max-height: 400px }

.min-h100 { min-height: 100px }
.min-h200 { min-height: 200px }
.min-h300 { min-height: 300px }
.min-h400 { min-height: 400px }

.widthp-8 { width: 8%; }
.widthp-15 { width: 15%; }
.widthp-20 { width: 20%; }
.widthp-25 { width: 25%; }
.widthp-33 { width: 33%; }
.widthp-40 { width: 40%; }
.widthp-50 { width: 50%; }
.widthp-60 { width: 60%; }
.widthp-80 { width: 80%; }

.width-55 { width: 55px; }
.width-60 { width: 60px; }
.width-70 { width: 70px; }

.mr-auto { margin: auto !important;}
.mrl-5 { margin-left: 5px; }
.mrl-30 { margin-left: 30px; }
.mrl-100 { margin-left: 100px; }
.mrt-10 { margin-top: 10px; }
.mrt-5 { margin-top: 5px; }
.mrt-15 { margin-top: 15px; }
.mrt-25 { margin-top: 25px; }
.mrr-10 { margin-right: 10px;}
.mrb-10 { margin-bottom: 10px; }

.padding-5 { padding: 5px; }
.padding-1 { padding: 1rem !important;}
.pr-1 { padding-right: 1rem !important;}
.padding-bottom-5 { padding-bottom: 5px;}
.px-1 { padding: 0 1rem !important; }

.py-1 { padding: 1rem 0 !important; }
.py-2 { padding: 2rem 0 !important; }

.pt-1 { padding-top: 1rem !important; }
.pb-1 { padding-bottom: 1rem !important; }

.bottom-60 { bottom: 60px !important; }

.overlay {
	width: 100%;
  height: 100%;
  background: #c1c1c1;
  position: fixed;
  opacity: 0.7;
  z-index: 1;
  top: 0;
}

.overlay-2 {
  opacity: 0.5;
  z-index: 3;
}

.error-message {
	background: #ff4949;
  color: #fff;
  padding: 5px;
  margin-bottom: 10px;
}

.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-20 { font-size: 20px !important; }
.fs-em15 { font-size: 1.5em; }

.h2 { font-size: 1.5em; font-weight: bold; }


.title-pg-14 { font-size: 14px; font-weight: bold; }
.title-pg-15 { font-size: 15px; font-weight: bold; }
.title-pg-20 { font-size: 20px; font-weight: bold; }
.title-pg { font-size: 25px; font-weight: bold; }

.title-line:before {
	content: "";
  display: block;
  border-top: 1px solid #494241;
  flex-grow: 1;
  margin: 0.5em
}

.title-line:after {
	content: "";
  display: block;
  border-top: 1px solid #494241;
  flex-grow: 1;
  margin: 0.5em
}

.bg-cl-1 { background-color: #f4b183 !important; }
.bg-cl-2 { background-color: #ff6699 !important; }
.bg-cl-3 { background-color: #ffd966 !important; }
.bg-cl-4 { background-color: #c5e0b4 !important; }
.bg-cl-5 { background-color: #bdd7ee !important; }
.bg-cl-6 { background-color: #f93434 !important; }

.color-1 { color: #ff5757 !important;}
.color-2 { color: #2df644 !important;}
.color-3 { color: #5787ff !important;}
.color-4 { color: #0bd511 !important;}
.color-5 { color: #f6ef11 !important;}
.color-6 { color: #000 !important;}

.img-icon { width: 100px; height: 100px; border-radius: 50%; }
.img-size-2 { width: 200px; height: 200px; }

.disabled { pointer-events: none; background-color: #cfcfcf; }

.txt-underline { text-decoration: underline; }

.require-error { position: absolute; padding: 10px; font-size: 12px; line-height: 1.6em; color: #fff; border-radius: 5px; background: #fd9999; width: 200px; }

.require-error:before { content: ""; position: absolute; top: -50%; left: 0; border: 15px solid transparent; border-bottom: 15px solid #fd9999; margin-left: 0px; }

.bd-title { display: flex; align-items: center; margin: 1em 0 1.5em; }
.bd-title:before { margin-right: 0.5em; }
.bd-title:after { margin-left: 0.5em; }
.bd-title:before, .bd-title:after {content: ""; display: block; border-top: 1px solid #494241; flex-grow: 1; }

.xdsoft_datetimepicker.datetime-reservation { left: 15px !important; }