@charset "utf-8";

/* ADMIN calendar */
.holi-wrap{display: flex;}
.holi-wrap .holi-container{flex-shrink: 0; width: 40%;}
.holi-wrap .holi-form{flex-grow: 1; margin-left: 30px; }

.holi-item{display: inline-block; padding: 5px; border: 1px solid #d5d5d5; position: relative;}
.holi-item + .holi-item{margin-left: 10px;}
.holi-item .del{margin-left: 5px; background-color: #999; border: 0; color: #fff;}
.holi-item .btn-item-del{background-color: #999; border: 0; color: #fff; margin-left: 8px;}

.holi-form .tbl_frm01 .btn-group{text-align: center; margin-top: 20px;}

/* COMMON */
.target-row{display:none}
.target-row.active{display:flex}


/* USER */
.line-break-box textarea{resize: vertical;}

.type-calendar td.on{background-color: #f4f5f9;}
.td-sat a{color: #0068b7;}
.td-sun a{color: #e60012;}
.td-none {color: #888;}
.td-holiday {color: #e60012 !important;}

.calendar-dateInfo{position: relative; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px;}
.calendar-dateInfo #cal-header{display: inline-flex; align-items: center; gap: 4px; font-weight: 600;}
.calendar-dateInfo #cal-header select{border: 1px solid #d0d5dd; border-radius: 4px; padding: 4px 6px; background: #fff; cursor: pointer;}
.holi-wrap .calendar-dateInfo > button.cal-nav-arrow{
    width: 32px; height: 32px; margin-left: 0; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: #555; border-radius: 50%;
    transition: background-color .2s ease, transform .15s ease, opacity .2s ease;
}
.holi-wrap .calendar-dateInfo > button.cal-nav-arrow:hover{background: #162ca1;}
.holi-wrap .calendar-dateInfo > button.cal-nav-arrow:active{transform: scale(.92);}
.holi-wrap .calendar-dateInfo > button.cal-nav-arrow:focus-visible{outline: 2px solid #162ca1; outline-offset: 2px;}
.calendar-dateInfo #cal-today{
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background-color: #162ca1; color: #fff; border: 0; cursor: pointer;
    width: auto; height: auto; min-width: 48px; padding: 6px 12px; border-radius: 4px;
    transition: background-color .2s ease, opacity .2s ease, transform .15s ease;
}
.calendar-dateInfo #cal-today:hover:not(:disabled){background-color: #0f1f7a;}
.calendar-dateInfo #cal-today:active:not(:disabled){transform: translateY(-50%) scale(.96);}
.calendar-dateInfo #cal-today:disabled,
.calendar-dateInfo #cal-today.is-current{opacity: .45; cursor: default;}
.calendar-dateInfo .cal-nav.is-loading{opacity: .55; pointer-events: none; cursor: wait;}
.holi-container.is-switching .type-calendar{opacity: .45; transition: opacity .18s ease; pointer-events: none;}
.type-calendar td a{position: relative;}
.type-calendar td .bull{display: block; width: 8px; height: 8px; background-color: #f00; margin: 0 auto; position: absolute; right: 0; top: 0;}

.apply-time .text{padding: 10px; border: 1px solid #ddd; border-top: 0; flex: 1;}

.mentoring-wrap{margin-top: 60px;}

.ui-datepicker .ui-datepicker-title select{font-size: 0.8em !important;}
.ui-datepicker table{font-size: 0.75em !important;}
.ui-widget button{font-size: 0.8rem !important;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{width: 45% !important;}
.ui-datepicker select.ui-datepicker-month{border-left: 1px solid #ddd;}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top: 4px !important;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {top: 4px !important;}


.program-tab-btn a{display: inline-block; width: 150px; line-height: 48px; height: 50px; border: 1px solid #162ca1; background: #fff; font-weight: 600; color: #162ca1; transition: all 0.30s ease-in-out;}
.program-tab-btn .tab-active, .program-tab-btn a:hover{background: #162ca1; color: #fff;}
.appli-close.ready{background-color: #bbb;}


.btn-wrap.d-flex{display: flex; align-items: center; justify-content: center;}
.btn-wrap a{display: inline-block; width:130px; line-height:50px; color:#fff; font-size:16px; font-weight:600; transition:all 0.30s ease-in-out; margin-right: 10px;}


.empty-list{text-align: center; padding: 30px 0; flex: 1;}
.schedule-view-mobile{display: none;}


.text-req{color: #dd2e3b; font-weight: 400; font-size: 14px; margin-left: 10px;}

.radio-wrap{display: flex; align-items: center; gap: 10px; padding: 6px 10px;}
.radio-wrap input[type="radio"]{display: none;}
.radio-wrap label{display: inline-block; width: 80px; line-height: 30px; text-align: center; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; font-size: 14px;}
.radio-wrap input[type="radio"]:checked + label{background-color: #162ca1; color: #fff;}

.dress-date-wrap{padding: 10px;}
#dress-range-info{margin-top:8px; color:#666; font-size:0.9em;}
#dress-date-guide{color:#e67e00; display: block;}

.date-info{margin-top: 10px; color:#777; font-size:0.88em; line-height: 1.6;}

.dress-items-wrap{padding: 10px;}
#dress-items-loading{color:#999; padding:10px 0; text-align: center; font-size: 14px;}
#dress-items-content{margin-top: 10px;}
.dress-items-content table{width: 100%; border-collapse: collapse;}
.dress-items-content table th, .dress-items-content table td{border: 1px solid #ddd; padding: 5px; text-align: center;}
.dress-items-content table th{background-color: #f5f5f5;}
.dress-items-content table td{background-color: #fff;}
.dress-items-content table td label{display: block; margin-bottom: 5px;}
.dress-items-content table td label input[type="radio"]{display: none;}

.dress-items-info{margin-top: 10px; color:#777; font-size:0.88em; line-height: 1.6;}

#dress-calendar .ui-datepicker .ui-datepicker-title{font-size: 14px;}
#dress-calendar .ui-datepicker td span, #dress-calendar .ui-datepicker td a{padding: 0.6em;}
#dress-calendar .ui-datepicker .ui-datepicker-prev, #dress-calendar .ui-datepicker .ui-datepicker-next{width: 1.4em; height: 1.4em; }

@media screen and (max-width: 991px) {
    .schedule-view-pc{display: none;}
    .schedule-view-mobile{display: block;}


    .dress-choice-table th{display: block;}
    .dress-choice-table td{display: block; padding-bottom: 20px !important;}

}