/* Front end Custom styles */

@media (max-width: 768px) {
  .abs-bookme-timeslot-left,
  .abs-bookme-timeslot-right { float:none; display: block;}
}

.abs-calendar-header .abs-year-month th {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	font-size: 1rem;
}
.abs-calendar-header .abs-days th {
	font-size: 0.8rem;
}


.abs-bookme-timeslot.abs-booked-list {
	background:#f5f5f5;
	border:1px solid #ccc;
}

.abs-booked-list .abs-bookme-timeslot-right {
	padding: 4px 15px;
	text-align:left;
	background-color:#666;
	font-size: 1rem;
	font-weight: 500;
	color:#fff;
	margin-bottom: 8px;
}

.abs-bookme-timeslot-left p { font-size:.875rem !important;}


.abs-bookme-timeslot-right.eb-pending,
#bb-book-wrap .book-list .status.eb-pending{ background-color:#EC4444;}
.abs-bookme-timeslot-right.eb-approve,
#bb-book-wrap .book-list .status.eb-approve { background-color:#10B981;}
.abs-bookme-timeslot-right.eb-complete,
#bb-book-wrap .book-list .status.eb-complete { background-color:#885CF6;}
.abs-bookme-timeslot-right.eb-mobilize,
#bb-book-wrap .book-list .status.eb-mobilize { background-color:#7C2D12;}
.abs-bookme-timeslot-right.eb-cancelled,
#bb-book-wrap .book-list .status.eb-cancelled { background-color:#9CA3AF;}

body .abs-bookme-timeslot p {
	margin: 0 0 0 0;
	font-size: 1rem;
}
.abs-booked-list .abs-bookme-timeslot-btn { margin-top: 10px; margin-bottom:10px }

.abs-booked-list .abs-bookme-timeslot-btn button {
    padding: 15px 20px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1;
	min-width: 120px;
}

/* Custon Fields */
.custom-form { margin:5px 5px}
.custom-form .form-group { display: flex; flex-direction: row; align-items: center; margin-bottom: 3px;}
.custom-form .form-group p { font-weight:500; margin:0;}
.custom-form .form-group input[type="checkbox"] { transform: scale(1.7); padding-left:10px; padding-right:8px; }
.custom-form .form-group input[type="text"] { width:40px; font-size:20px; font-weight:700;padding:8px; border:1px solid #cecece; }
/*.custom-form .form-group select { width:100%; height:45px; font-size:18px; padding:0 15px;border:1px solid #008CBA; }
 */
.custom-form label { margin-right: 8px; padding:3px 2px; min-width:100px;}
.custom-form label span{ background-color: #008CBA; border-radius: 20px; color: white; padding: 8px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; width:85px; }

.ajax-form-message { margin:0; padding:6px 0 6px 0; line-height:1}


.custom-select {
	position:relative;
}
.custom-select select {
  appearance: none;
  width: 100%;
  font-size: 1rem;
  padding: 0.5em 0.5em 0.5em 1em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
}

.custom-select::before,
.custom-select::after {
  font-size: 0.3rem;
  content: "";
  position: absolute;
  right: 1rem;
  pointer-events: none;
}

.custom-select::before {
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-bottom: 0.3rem solid black;
  top: 40%;
}

.custom-select::after {
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.3rem solid black;
  top: 55%;
}





/*
@media (max-width: 800px) {
    .custom-form .form-group { flex-direction: column; align-items: stretch; }
    .custom-form label { margin-bottom: 5px; }
}*/

.abs-book-form-btn button:nth-child(1) {
	min-width: 66%;
}
.abs-book-form-btn button:nth-child(2) {
	min-width: 30%;
}

.cmd-button {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    border: none;
    border-radius: 20px;
    outline: none;
    line-height: inherit;
    -webkit-appearance: none;
    overflow: visible;
    vertical-align: middle;
    background: #0b57d0;
	color:#fff;
    padding: 0 12px;
	cursor: pointer;
}
.cmd-button:hover { opacity: .85; }
.cmd-button.cancel { background: inherit; border:2px solid #0b57d0; color: #0b57d0; }
.cmd-button.cancel:hover { opacity: .85; }

.cmd-button.complete { background: #167b34; }

/* 예약카렌다 하단 알림*/
.abs-booked-notice { display: flex; justify-content: space-between; }
.abs-booked-notice .text-notice { margin: 18px 0 0;}
.abs-booked-notice .link-button { margin: 10px 0 10px 0;}
.abs-booked-notice .link-button a {
    color:#fff;
    padding:4px 16px 4px 16px;
    display:inline-block;
    font-weight:500;
    font-size:.875rem;
    text-transform:uppercase;
    background-color:#10ACC6;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
	text-decoration:none;
}
.abs-booked-notice .link-button a:hover {
	color:#fff;
    background-color:#13C9E7;
	text-decoration:none;
}
.abs-booked-calendar-area .notice-title { padding-top:20px;}
.abs-booked-calendar-area .text-notice { font-size:.82rem; line-height:1.2; }

/* MODAL WINDOWS */
body .booked-modal { min-height:168px; position: fixed; z-index:9999999; top:20%; right: 0; bottom: 0; left: 0; }
body .booked-modal hr { border-top:1px solid #ddd; background:none; }
body .booked-modal .bm-overlay { animation: booked-fadein 0.2s; -webkit-animation: booked-fadein 0.2s; -moz-animation: booked-fadein 0.2s; -ms-animation: booked-fadein 0.2s; -o-animation: booked-fadein 0.2s; -webkit-backface-visibility: hidden; position: fixed; background:#000; background: rgba(0, 0, 0, 0.65); top: 0; right: 0; bottom: 0; left: 0; }
body .booked-modal .bm-window { animation: booked-flyin 0.2s; -webkit-animation: booked-flyin 0.2s; -moz-animation: booked-flyin 0.2s; -ms-animation: booked-flyin 0.2s; -o-animation: booked-flyin 0.2s; -webkit-backface-visibility: hidden; padding:43px 0 25px; width:720px; position:relative; margin:0 auto; background:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:1px 1px 60px rgba(0,0,0,0.5); -webkit-box-shadow:1px 1px 60px rgba(0,0,0,0.5); box-shadow:1px 1px 60px rgba(0,0,0,0.5); }
body .booked-modal.bm-loading .bm-window { background:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
body .booked-modal.bm-closing .bm-overlay { animation: booked-fadeout 0.2s; -webkit-animation: booked-fadeout 0.2s; -moz-animation: booked-fadeout 0.2s; -ms-animation: booked-fadeout 0.2s; -o-animation: booked-fadeout 0.2s; -webkit-backface-visibility: hidden; }
body .booked-modal.bm-closing .bm-window { animation: booked-flyout 0.2s; -webkit-animation: booked-flyout 0.2s; -moz-animation: booked-flyout 0.2s; -ms-animation: booked-flyout 0.2s; -o-animation: booked-flyout 0.2s; -webkit-backface-visibility: hidden; }
body .booked-modal .bm-window { background:#f5f5f5; max-height:100px; z-index:2000000000; }
body .booked-modal .bm-window p { margin:0 0 5px; }
body .booked-modal .bm-window p.status .material-icons { vertical-align:middle; font-size:25px; }

body .booked-modal .bm-window p small { display:block; margin:0 0 15px; text-transform:uppercase; font-size:1.215rem; font-weight:500; }
body .booked-modal .bm-window p.appointment-title { font-weight:500; margin-bottom:0; }
body .booked-modal .bm-window p.calendar-name { font-weight:500; margin-bottom:0; }
body .booked-modal .bm-window p.appointment-info { color:#333; font-weight:500; margin:0; font-size:1.325rem; line-height:1.7; }
body .booked-modal .bm-window p strong { font-size:13px; text-transform:uppercase; display:inline-block; padding-right:3px; font-weight:500; }
body .booked-modal .bm-window a { text-decoration:none; }
body .booked-modal .bm-window .close { line-height:1; color:#fff; font-size:20px; position:absolute; top:20px; right:35px; }

body .booked-modal .bm-window .close:hover { color:#fff; }
body .booked-modal .bm-window p i.booked-icon.booked-icon-clock { font-size: 18px; position: relative; top: 1px; }
body .booked-modal .bm-window p.booked-calendar-name { font-weight:500; font-size:15px; }

body .booked-modal .bm-window .booked-scrollable { max-height:100px; padding:25px 30px 30px; overflow-y:auto; overflow-x:hidden; background:#f5f5f5; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; box-sizing:content-box;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
}
body .booked-modal .bm-window p.booked-title-bar { box-sizing: border-box; font-size: 16px; position: absolute; top: 0; left: 0; line-height:1; width: 100%; color: #fff; background-color:#44bd49; padding: 20px 30px 20px 35px;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}
body .booked-modal .bm-window p.booked-title-bar small { margin:0; }

/* Scrolling Fixes */
body .booked-modal .bm-window .booked-scrollable { -webkit-overflow-scrolling:touch; }
body .booked-modal .bm-window .booked-scrollable > * { -webkit-transform: translateZ(0px); -webkit-transform: translate3d(0,0,0); }

@media screen and (max-width:768px){
    body .booked-modal { top:0; padding:0; margin:0!important; }
    body .booked-modal .bm-window { width:100%; padding:43px 0 0; box-sizing:border-box; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; }
    body .booked-modal .bm-window .booked-scrollable { padding:30px 35px; }
    body .booked-modal .bm-overlay { background:rgba(0, 0, 0, 0.8); }
    body .booked-modal .bm-window p.name b { display:block; }
}