.modal {
	position: absolute;
  top: 0;
  width: 80%;
  height: 80%;
  margin: 10% 5%;
  background: #fff;
  padding: 20px;
  z-index: 2;
	border-radius: 5px;
}

.modal input, select, textarea {
	width: 90%;
}

.modal .modal-close {
	width: 50px;
	align-items: flex-end;
	position: absolute;
	right: 10px;
	top: 10px;
}

.modal .modal-close i {
	font-size: 30px;
  font-weight: bold;
	color: #f11818;
}

.modal .modal-tab { 
	display: flex;
  height: 50px;
}

.modal .modal-title {
	font-size: 2em;
	font-weight: bold;
	text-align: center;
}

.modal .modal-tab .tab{
	text-align: center;
  padding: 10px;
  border-bottom: 3px solid #ddd;
}

.modal .modal-tab .tab.active-tab {
	border-bottom: 3px solid #04b181;
}

.modal .modal-body {
	margin-top: 25px;
	max-height: 60vh;
	min-height: 70%;
	overflow-y: auto;
}

.modal .modal-footer { position: absolute; bottom: 0; left: 0; width: 100%; }

.modal-sm {
	height: 30%;
	margin: 30% 5%;
	border-radius: 5px;
}

#time_picker { position: fixed; bottom: 0; top: 70%; margin: 0; width: 100%; height: 30%; padding: 0; }

#time_picker .modal-body { max-height: 75%; margin-top: 10px; display: flex; overflow: hidden; }

#time_picker .modal-body .left-side, #time_picker .modal-body .right-side { width: 50%; text-align: center; font-size: 20px; overflow-y: auto; }

#time_picker .modal-body .time-line { /* border-bottom: 1px solid #8c8d8d; */ opacity: 0.3; pointer-events: none;}

#time_picker .modal-body .time-line.selected { opacity: 1; border-top: 1px solid #8c8d8d;}

#time_picker .modal-footer { border-top: 1px solid #8c8d8d; width: 100%; bottom: 0; position: absolute;}

#time_picker .modal-footer button { width: 50%; font-size: 20px; }

#time_picker .modal-footer button:first-child { border-right: 1px solid #8c8d8d;}