@charset "utf-8";

:root {
        --bg-color: #F0F4FA;
        --white: #FFFFFF;
        --primary-blue: #2D8CFF;
        --primary-blue-hover: #1A73E8;
        --active-tab-bg: #5B9CFA;
        --text-dark: #1F2937; /* Gray 800 */
        --text-gray: #4B5563; /* Gray 600 */
        --text-light: #9CA3AF; /* Gray 400 */
        --border-color: #E5E7EB;
        --danger: #EF4444; /* Red 500 */
        --danger-dark: #DC2626; /* Red 600 */
        --warning: #F59E0B;
        --purple: #A855F7;
        --dark-btn: #111827; /* Gray 900 for Save Button */
        
        /* Font Sizes */
        --fs-base: 12px;
        --fs-sm: 10px;
        --fs-lg: 14px;
        --fs-xl: 18px;
        --fs-xxl: 20px;
    }
    
/* scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    border: 2px solid var(--color-gray2);
    background-color: var(--color-base);
}

::-webkit-scrollbar-track {
    background-color: var(--color-gray2);
    border-radius: 5px;
}

.no-data {
    text-align: center;
    padding: 20px 0;
}

.help-btn {
    display: inline-block;
    position: relative;  /* 툴팁 위치를 상대적으로 설정 */
    cursor: pointer;
    width: 100%;
}

.tooltip-box {
    display: none;  /* 기본적으로 숨겨짐 */
    position: absolute;
    top: 100%;  /* 아이콘 바로 아래로 위치 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 9999;  /* 툴팁이 다른 요소들 위에 오도록 설정 */
}

.help-btn:hover .tooltip-box {
    display: block;  /* hover 시 툴팁 표시 */
}

.tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;  /* 말풍선 삼각형 모양 */
}

/** 유입경로 **/

.reservation-path{
    padding: 0 25px 0 10px;
    background-image: url('../img/icons/ico_arrow-down.svg');
    background-repeat: no-repeat;
    background-size: 18px 9px;
    background-position: right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 전체 컨테이너 */
.reservationPathContainer.active {
    display: flex;
    justify-content: flex-start;
}

.reservationPathContainer {
    display: none;
}

.reservationPathContainer .menu-container {
    width: 50%; /* 메뉴의 너비 */
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 5px;
    height: 300px;
    overflow-y: auto;
}

.reservationPathContainer .content-container {
    width: 50%; /* 메뉴의 너비 */
    background-color: #fff;
    padding: 15px 10px;
    border-radius: 5px;
    height: 300px;
    overflow-y: auto;
}

.reservationPathContainer .dp1 {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reservationPathContainer .dp1 li {
    background-color: #fff;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--color-base);
    text-align: center;
    color: #fff;
}

.reservationPathContainer .dp1 li.on {
    background-color: #000;
    color: #fff;
}

.reservationPathContainer .dp1 li:hover {
    background-color: #000;
}

.reservationPathContainer .dp2 li {
    background-color: #fff;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--color-base);
    text-align: center;
}

.reservationPathContainer .dp2 li:hover {
    background-color: #000;
    color:#fff;
}

.reservationPathContainer .dp2 li {
    background-color: #fff;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--color-base);
    text-align: center;
    color: #fff;
}

/** 유입경로 **/

/**
login 
**/
#wrapper.loginWrap {
    min-width: 1200px;
    height: 100%;
}

.login-row-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.login-row-container>div {
    height: 100%;
    padding: 50px 20px;
}

.login-col_left {
    width: 63%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    background: url('../img/common/bg_login.jpg') no-repeat bottom right/cover;
}

.login-col_right {
    width: 37%;
    background-color: #fff;
}

#dashboard_wrap {
    width: 100%;
}

#dashboard_wrap .dashboard_inner {
    max-width: 1050px;
    margin: 0 auto;
}

#dashboard_wrap .dashboard_logo {
    position: relative;
    display: inline-block;
    margin-bottom: 130px;
}

#dashboard_wrap .dashboard_logo img {
    width: 508px;
}

#dashboard_wrap .dashboard_logo_txt {
    position: absolute;
    left: 25%;
    top: 80%;
    font-size: 25px;
    color: #fff;
    white-space: nowrap;
}

.dashboard_boardList {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.dashboard_boardList .board_container {
    width: 50%;
    padding: 5px;
}

.dashboard_boardList .board_box {
    padding: 40px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.55);
    background-repeat: no-repeat;
    background-size: 45% auto;
    backdrop-filter: blur(7px);
    overflow: hidden;
}

.dashboard_boardList .board_box.type_notice {
    background-position: top right 20px;
    background-image: url('../img/common/img_dash_notice.png');
}

.dashboard_boardList .board_box.type_faq {
    background-position: top right 40px;
    background-image: url('../img/common/img_dash_faq.png');
}

.dashboard_boardList .board_box h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.dashboard_boardList .board_box ul li {
    position: relative;
    font-size: 16px;
    line-height: 1.5;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard_boardList .board_box ul li+li {
    margin-top: 5px;
}

.dashboard_boardList .board_box ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--font-color-base);
}

.dashboard_boardList {}

#login_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 30px;
}

.login_inner_title {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: left;
}

#login_wrap .login_inner {
    max-width: 425px;
}

#login_wrap .login_form {
    position: relative;
    width: 100%;
}

#login_wrap .login_inner .login_form__input input {
    font-size: 16px;
    color: var(--font-color-base);
    width: 100%;
    height: 60px;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 5px;
    border: 1px solid #deebfb;
    background-color: #deebfb;
    -moz-transition: 0.2s all ease-in-out;
    -o-transition: 0.2s all ease-in-out;
    -webkit-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
}

#login_wrap .login_inner .login_form__input input:focus {
    border-color: var(--color-base);
    outline: none;
}

#login_wrap .login_inner .login_btn {
    margin-top: 15px;
}

#login_wrap .login_inner .login_btn button {
    width: 100%;
    height: 70px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    border-radius: 35px;
    border: 0;
    background: #25aaff;
    background: -webkit-linear-gradient(to right, #0acac5 0%, #25aaff 100%);
    background: -moz-linear-gradient(to right, #0acac5 0%, #25aaff 100%);
    background: -o-linear-gradient(to right, #0acac5 0%, #25aaff 100%);
    background: linear-gradient(to right, #0acac5 0%, #25aaff 100%);
    transition: 0.3s all linear;
}

#login_wrap .login_inner .login_btn button:hover {
    background-color: var(--color-base-hover);
}

#login_wrap .login_inner .login_utill_btn {
    margin: 40px -5px 0;
    display: flex;
    align-items: center;
}

#login_wrap .login_inner .login_utill_btn button {
    flex: 1;
    font-size: 16px;
    color: var(--font-color-base);
    width: 100%;
    height: 50px;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 0 5px;
    border: 1px solid var(--bor-color);
    background-color: #fff;
    -moz-transition: 0.2s all ease-in-out;
    -o-transition: 0.2s all ease-in-out;
    -webkit-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
}

@media (max-width: 1440px) {
    #dashboard_wrap .dashboard_logo img {
        width: 35.2778vw;
    }

    .setting-filter-item {
       width: 206px !important;
    }

    .statistics-layout-row.statistics-step2 {
        height:40% !important;
    }

    #dashboard_wrap .dashboard_logo_txt {
        font-size: 1.7361vw;
    }
}

/**
Title 
**/
.conts_tit {
    color: #151515;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 25px;
}

.conts_tit #pj-stats-btn {
    height: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 0 15px 0 40px;
    margin-top: -7px;
    margin-left: 5px;
    border-radius: 10px;
    background: #576e7a url('../img/icons/ico_stats_white.png') no-repeat center left 15px;
    vertical-align: middle;
    -webkit-transition: linear 0.2s;
    transition: linear 0.2s;
}

.conts_tit #pj-stats-btn:hover {
    opacity: 0.8;
}

.conts_tit span,
.conts_tit a {
    display: inline-block;
    color: #151515;
    font-size: 20px;
    font-weight: 400;
    margin-left: 10px;
}

.article_box {}

.article_box.r-box {
    border-radius: 10px;
    background-color: #fff;
}

.article_box+.article_box {
    margin-top: 10px;
}

.bullet_tit {
    position: relative;
    padding-left: 0.7em;
    font-size: 18px;
    font-weight: 700;
    color: #151515;
    line-height: 1.2;
    margin-bottom: 15px;
}

.bullet_tit:before {
    content: '';
    position: absolute;
    top: 0.15em;
    left: 0;
    width: 0.1em;
    height: 0.9em;
    background-color: var(--color-base);
}

/* ul list */
.bullet_ul li {
    position: relative;
    padding-left: 0.7777777777em;
    font-size: inherit;
    line-height: 2;
}

.bullet_ul li:before {
    content: '';
    position: absolute;
    top: 1em;
    left: 0;
    width: 0.2em;
    height: 0.2em;
    background-color: var(--font-color-base);
    border-radius: 50%;
}

.bullet_ul.color_fff li:before {
    background-color: #fff;
}

/* 예약창 ul */
.bullet_ul2 li {
    position: relative;
    display: inline-block;
    line-height: 1.5;
    padding-left: 10px;
    margin-right: 10px;
}

.bullet_ul2 li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--font-color-base);
}

/**
TAB
**/

.tabType1>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -2.5px;
}

.tabType1>ul>li {
    flex: 1;
    padding: 0 2.5px;
}

.tabType1>ul>li a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 100%;
    font-weight: 700;
    height: 30px;
    line-height: 1.2;
    color: var(--font-color-base);
    padding: 5px;
    border-radius: 5px;
    background-color: var(--color-gray);
}

.tabType1>ul>li.current a,
.tabType1>ul>li.on a {
    color: #fff;
    border-color: var(--color-base);
    background-color: var(--color-base);
}

.tabType2>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -2.5px;
}

.tabType2>ul>li {
    flex: 1;
    padding: 0 2.5px;
}

.tabType2>ul>li a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 100%;
    font-weight: 700;
    height: 30px;
    line-height: 1.2;
    color: var(--font-color-base);
    border: 1px solid var(--color-gray2);
    border-bottom: 0;
    padding: 5px;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--color-gray2);
}

.tabType2>ul>li.current a,
.tabType2>ul>li.on a {
    border-color: var(--color-base);
    background-color: #fff;
}

/* category tab */
.category-tab {
    margin-bottom: 10px;
}
.category-tab>ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 -2.5px;
}

.category-tab>ul>li {
    flex: 1;
    padding: 0 2.5px;
}

.category-tab>ul>li button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 100%;
    font-weight: 700;
    height: 30px;
    line-height: 1.2;
    color: var(--font-color-base);
    padding: 5px;
    background-color: var(--color-gray);
}

.category-tab>ul>li.on button {
    color: #fff;
    border-color: var(--font-color-base);
    background-color: var(--font-color-base);
}
/**
예약관리 
**/
/* 레이아웃 */
.reservation_wrap {
    height: 100%;
}

.reservation_wrap .reservation__left {
    position: relative;
    width: 304px;
    height: 100%;
    margin-right: 10px;
    /* overflow-y: auto; */
}

.reservation_wrap .reservation__right {
    width: calc(100% - 314px);
    height: 100%;
}

.reservation_wrap .reservation__left .article_box_01 {
    height: 300px;
    padding: 8px;
}

.reservation_wrap .reservation__left .article_box_02 {
    height: 150px;
    padding: 20px;
}

.reservation_wrap .reservation__left .article_box_03 {
    height: calc(100% - 300px - 150px - 20px);
    /* min-height: 200px; */
    margin-top: 10px;
}

.reservation_wrap .reservation__right .article_box_01 {
    height: 50px;
}

.reservation_wrap .reservation__right .reservation__control {
    position: relative;
    height: 50px;
    z-index: 5;
}

.reservation_wrap .reservation__right .article_box_02 {
    height: calc(100% - 50px - 10px);
}

/* 캘린더 */
/* datepicker */
.scheduleTab {
    position: relative;
    height: 100%;
    display: none;
}

.scheduleTab:first-child {
    display: block;
}

.scheduleTabConts {
    height: 100%;
}

.scheduleTab .tab_conts {
    overflow-y: auto;
    height: 100%;
    /* padding: 20px 0 0; */
}

#calendarList .ui-datepicker {
    padding: 0;
    border-radius: 0;
}

#calendarList .ui-datepicker .ui-datepicker-header {
    padding: 0 0 14px;
}

#calendarList .ui-widget.ui-widget-content {
    width: 100%;
    border: 0;
}

#calendarList .ui-datepicker .ui-datepicker-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    padding: 0;
    letter-spacing: -0.45px;
}

#calendarList .ui-datepicker .ui-datepicker-prev,
#calendarList .ui-datepicker .ui-datepicker-next {
    top: 6px !important;
}

#calendarList .ui-datepicker th {
    text-transform: uppercase;
}

/* 날코딩일때 */
.schedule_calendar .cal-toobar {
    padding: 22px 0 18px;
    text-align: center;
}

.schedule_calendar .cal-toobar .cal-center {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.schedule_calendar .cal-toobar .cal-center:after {
    display: block;
    content: ' ';
    clear: both;
}

.schedule_calendar .cal-toobar .cal-center button,
.schedule_calendar .cal-toobar .cal-center h2 {}

.schedule_calendar .cal-toobar .cal-center button {
    width: 28px;
    height: 28px;
}

.schedule_calendar .cal-toobar .cal-center h2 {
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    padding: 0 30px;
    letter-spacing: -0.45px;
}

.schedule_calendar .cal-toobar .cal-center .cal-prev-button {
    background: url('../img/icons/ico_arrow-left.svg') no-repeat center/8px auto;
}

.schedule_calendar .cal-toobar .cal-center .cal-next-button {
    background: url('../img/icons/ico_arrow-right.svg') no-repeat center/8px auto;
}

.cal-view table {
    width: 100%;
    table-layout: fixed;
}

.cal-view table .cal-day-header {
    text-align: center;
}

.cal-view table .cal-sun {
    color: #df1f1f;
}

.cal-view table .cal-sat {
    color: #0e66b0;
}

.cal-view .cal-day-header,
.cal-view .cal-day {
    font-weight: 500;
    padding: 3px;
    border: 1px solid #ddd;
}

.cal-view .cal-day-header {
    border-bottom: none;
}

.schedule_calendar .cal-view .cal-day-header,
.schedule_calendar .cal-view .cal-day {
    text-align: center;
    font-size: 100%;
    padding: 2px;
    border: none;
    white-space: nowrap;
}

.schedule_calendar .cal-view .cal-day-header .cal-day-number,
.schedule_calendar .cal-view .cal-day .cal-day-number {
    display: inline-block;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

.schedule_calendar .cal-view .cal-day .cal-day-number.current {
    color: #fff;
    background-color: var(--color-base);
}

.schedule_calendar .cal-view .cal-day-header.cal-other-month,
.schedule_calendar .cal-view .cal-day.cal-other-month {
    color: #ddd;
}

/* // 날코딩일때 */
/* 총예약/초진/재진 */
.main_total-info-area {}

.main_total-info-area ul li p {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.main_total-info-area ul li b {
    font-weight: 800;
}

.main_total-info-area .total_ul {
    border-radius: 5px;
    overflow: hidden;
}

.main_total-info-area .total_ul li.bar {
    position: relative;
}

.main_total-info-area .total_ul li.bar:after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    right: 0;
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

.main_total-info-area .total_ul li {
    width: 30%;
    padding: 0 10px;
    background-color: var(--color-gray2);
}

.main_total-info-area .total_ul li.bg_base {
    width: 40%;
}

.main_total-info-area .total_ul li p {
    justify-content: space-around;
    height: 33px;
}

.main_total-info-area .total_ul li p span {
    margin-right: 5px;
}

.main_total-info-area .info_ul {
    justify-content: space-around;
    margin-top: 16px;
}

.main_total-info-area .info_ul li {
    flex: 1;
}

.main_total-info-area .info_ul li p {
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--color-gray2);
}

.main_total-info-area .info_ul li span {
    display: block;
    text-align: center;
    margin-top: 9px;
}

/* 공지사항/일자메모 */
/* notice tab */
#noticeTab {
    padding-right: 50px;
}

#noticeTab ul li {
    max-width: 83px;
}

.noticeTab {
    position: relative;
    display: none;
}

.noticeTab .plus-btn {
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 30px;
    text-align: center;
    font-size: 26px;
    outline: none;
    background-color: transparent;
}

#noticeTab1 {
    display: block;
}

.reservation_wrap .reservation__left .article_box_03 .article_box {
    height: calc(100% - 30px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.reservation_wrap .reservation__left .article_box_03 .noticeTab {
    height: 100%;
}

.reservation_wrap .reservation__left .article_box_03 .noticeTab:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 10px);
    height: 20px;
    background-color: #fff;
    z-index: 2;
}

.reservation_wrap .reservation__left .article_box_03 .noticeTab .tab_conts {
    overflow-y: auto;
    height: 100%;
    padding: 20px;
}

/* 공지사항 */
.reservation_wrap .noticeTab .board-list ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* reservation__control */
.reservation__control .control_form .r-box {
    font-weight: 700;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
}

.reservation__control .control_form {
    width: calc(100% + 10px);
    margin: 0 -5px;
    flex-wrap: nowrap;
}

.control_form .control_form__row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.control_form .control_form__left,
.control_form .control_form__right {
    display: flex;
    flex-wrap: nowrap;
}

.control_form .control_form__left {
    width: 48%;
}

.control_form .control_form__right {
    width: 52%;
}

.reservation__control .control_form .control_form__col {
    padding: 0 5px;
}

.reservation__control .control_form .control_form__col.col_01 {
    /* width: 205px; */
    width: 10%;
}

.reservation__control .control_form .control_form__col.col_02 {
    width: 594px;
    width: 90%;
}

.reservation__control .control_form .control_form__col.col_03 {
    width: 423px;
    width: 66%;
}

.reservation__control .control_form .control_form__col.col_04 {
    width: 260px;
    width: 34%;
}

@media (max-width: 1900px) {
    .control_form .control_form__left {
        width: 49%;
    }

    .control_form .control_form__right {
        width: 51%;
    }

    /*
    .reservation__control .control_form .control_form__col.col_01 {
        width: 12%;
    }
    .reservation__control .control_form .control_form__col.col_02 {
        width: 37%;
    }
        */
    .reservation__control .control_form .control_form__col.col_03 {
        width: 68.5%;
    }

    .reservation__control .control_form .control_form__col.col_04 {
        width: 31.5%;
    }
}

/* 예약등록/고객등록 버튼 */
.reservation__control .form_regist_btn {
    width: 100%;
    font-size: 0;
    height: 100%;
}

.reservation__control .form_regist_btn .cusBtn {
    width: 50%;
    height: 50px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    background-color: var(--color-base);
    /* background-image: url(../img/add-user.png); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    vertical-align: top;
}

.reservation__control .form_regist_btn .rsvBtn {
    width: 50%;
    height: 50px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    background-color: var(--color-base);
    /* 임시 */
    /* background-image: url(../img/add-reservation.png); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40%;
    vertical-align: top;
}

.reservation__control .form_regist_btn .cusBtn.reservation {
    width: 100%;
}

.reservation__control .form_regist_btn button {
    width: 50%;
    height: 50px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
    background-color: var(--color-base);
    vertical-align: top;
}

.reservation__control .form_regist_btn button:hover {
    border: 1px solid #fff;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.reservation__control .form_regist_btn button:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.reservation__control .form_regist_btn button:last-child {
    position: relative;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.reservation__control .form_regist_btn button:last-child:not(.reservation)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #fff;
}

/* 병원 select / 검색 */
.control_form__col.col_02 .control_form__col__row {
    width: 100%;
}

.control_form__col.col_02 select.form_kind_sel {
    width: calc(35% - 5px);
    padding: 0 20px;
    background-position: right 20px center;
}

.control_form__col.col_02 select.form_kind_sel:not(:focus) {
    border-color: #fff;
}

.control_form__col.col_02 .control_form__col__row__col+.control_form__col__row__col {
    width: 65%;
}

.control_form__col.col_02 .control_form__col__row__col .d_f {
    width: 100%;
    height: 100%;
}

.control_form__col.col_02 .control_form__col__row__col .d_f>div {
    height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.control_form__col.col_02 .control_form__col__row__col .d_f>div.first {
    width: 165px;
    padding-left: 15px;
}

.control_form__col.col_02 .control_form__col__row__col .d_f>div.last {
    width: calc(100% - 175px);
    padding-right: 15px;
}

.control_form__col.col_02 input[type='radio']+label {
    padding-left: 30px;
    margin-right: 18px;
}

.search_input_box {
    position: relative;
    height: 100%;
}

.search_input_box:before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 11px);
    width: 1px;
    height: 22px;
    background-color: #ccc;
}

.search_input_box input {
    display: inline-block;
    width: calc(100% - 30px);
    height: 100%;
    float: left;
    border: 0;
}

.search_input_box .search_btn {
    display: inline-block;
    width: 30px;
    height: 100%;
    background-color: transparent;
}

.search_input_box #clear_btn{
    position: absolute;
    top:2px;
    right: 9999px;
}

.search_input_box #clear_btn.active{ 
    right: 35px;
}

.search_input_box .search_btn svg {
    height: 80%;
    margin-top: 10%;
}

.search_input_box .search_btn svg path {
    stroke: var(--color-base);
}

.setting_search_input_box .search_btn svg path {
    stroke: #fff;
    fill:var(--color-base);
}

.setting_search_input_box {
    height: 44px;
    width: 50px;
}

.setting_search_input_box .search_btn {
    height: 100%;
    width: 100%;
    background-color: var(--color-base);
    border-radius: 10px;
    padding-top:5px;
}

.reservation__control .control_form .control_form__col__row {}

.reservation__control .control_form .control_form__col__row__col:not(:last-child) {
    margin-right: 5px;
}

/* front search form */
.front-layout-wrap .control_form .control_form__left {
    width: 45% !important;
}
.front-layout-wrap .reservation__control .control_form .control_form__col.col_01 {
    width: 20%;
}
.front-layout-wrap .reservation__control .control_form .control_form__col.col_02 {
    width: 80%;
}

.control_form__col.col_02 select.form_group_sel {
    width: calc(35% - 5px);
    padding: 0 20px;
}
/** dropDown **/
.dropdown-container {
    position: relative;
    display: inline-block;
    width: calc(35% - 5px);
}

.dropdown-container .dropdown-button {
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    border-color: #fff;
    cursor: pointer;
    display: block;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.dropdown-container .selected-title {
    font-size: 12px;
    letter-spacing: -.4px;
    line-height: 1.5;
    font-family: 'Nanum Gothic', sans-serif;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 30px 0 10px;
    background-image: url('../img/icons/ico_arrow-down.svg');
    background-repeat: no-repeat;
    background-size: 18px 9px;
    background-position: right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-content :center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.dropdown-container .dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 10;
    width: 100%;
    min-width: max-content;
    left:-1px;
}

.penchart-menu-more-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 11;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    width: 100%; 
    height: 300px;
    overflow: auto;
    border-radius: 10px;
}

.penchart-more-toggle {
    position: relative;
    background-repeat: no-repeat;
    background-size: 18px 9px;
    background-position: right 20px center;
    background-image: url(../img/icons/ico_arrow-down.svg);
    cursor: pointer;
}

.penchart-menu-more-box.open {
    display: block;
}

.penchart-more {
    position:relative;    
}

.statisticsDiv {
    display: none;
}

.statisticsDiv.active{
    display: block;
}

#statisticsPrint .dropdown-container .dropdown-menu {
    border-radius: 0;
}

.dropdown-container.open .dropdown-menu {
    display: block;
}
/** **/
  
.front-layout-wrap .control_form__col.col_02 .control_form__col__row__col .form_customer_sel {
    width: 30%;
    height: 100%;
}

.front-layout-wrap .control_form__col.col_02 .control_form__col__row__col .form_customer_sel:not(:focus) {
    border-color: #fff;
}

.front-layout-wrap .control_form__col.col_02 .control_form__col__row__col .d_f>div.last {
    width: calc(70% - 5px);
}

.front-layout-wrap .control_form .control_form__right {
    min-width: 41%;
    width: auto !important;
    max-width: 55%;
}

.front-layout-wrap .control_form__col.col_front_05 {
    width: 100%;
}

.form_daily_info {
    width: 100%;
}

.form_daily_info .front_total-info-area.d_f {
    height: 100%;
    align-items: center;
}

.form_daily_info .front_total-info-area .today-date {
    width: 155px;
    font-weight: 800;
    text-align: center;
}

.form_daily_info .front_total-info-area .total_ul {
    width: calc(100% - 155px);
    height: 100%;
    flex-wrap: nowrap;
}

.form_daily_info .front_total-info-area .total_ul>li {
    position: relative;
    flex: auto;
    height: 100%;
    padding: 0 12px;
}

.form_daily_info .front_total-info-area .total_ul>li p {
    display: flex;
    align-items: center;
    /*white-space: nowrap;*/
    height: 100%;
    justify-content:center;
}

.form_daily_info .front_total-info-area .total_ul>li p span+span {
    margin-left: 5px;
    white-space: nowrap;
}

.form_daily_info .front_total-info-area .total_ul>li:not(:last-child):after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    right: 0;
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

.form_daily_info .front_total-info-area .total_ul>li.bg_base:after {
    display: none;
}

@media (max-width: 1900px) {
    .control_form__col.col_02 select.form_group_sel,
    .control_form__col.col_02 select.form_kind_sel {
        width: calc(28% - 5px);
    }
    

    /** dropDown **/
    .dropdown-container {
        position: relative;
        display: inline-block;
        width: calc(28% - 5px);
    }

    .control_form__col.col_02 .control_form__col__row__col+.control_form__col__row__col {
        width: 72%;
    }
}

/* color info list */
.form_color_info {
    position: relative;
}

.form_color_info__box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-right: 40px;
    border-radius: 10px;
    border: 1px solid #fff;
    background-color: #fff;
}

#colorToggleBtn {
    position: absolute;
    right: 10px;
    top: 9px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

#colorToggleBtn img {
    width: 18px;
    height: 9px;
}

.form_color_info__box.open {
    border-color: var(--bor-color);
}

#colorToggleBtn.open img {
    transform: rotate(180deg);
}

.form_color_info__box ul {
    margin: -3px -1.5px 0;
}

.form_color_info__box ul li {
    width: calc(100% / 5);
    margin-top: 3px;
    padding: 0 1.5px;
}

.form_color_info__box ul li p {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 1.2;
    font-size: 11px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
}

.form_color_info__main,
.form_color_info__sub {
    padding: 9px 10px;
}

.form_color_info__main {}

.form_color_info__sub {
    position: relative;
    display: none;
}

/*
.form_color_info__sub ul li {
    width: calc(100% / 4);
}*/
.form_color_info__sub:before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: calc(100% - 20px);
    height: 1px;
    background-color: var(--bor-color);
}

/* 예약창 컬러 설정 */
.form_color_info__box ul li.c01 p {
    background-color: var(--color-res01);
}

.form_color_info__box ul li.c02 p {
    background-color: var(--color-res02);
}

.form_color_info__box ul li.c03 p {
    background-color: var(--color-res03);
}

.form_color_info__box ul li.c04 p {
    background-color: var(--color-res04);
}

.form_color_info__box ul li.c05 p {
    background-color: var(--color-res05);
}

.form_color_info__box ul li.c06 p {
    background-color: var(--color-res06);
}

.form_color_info__box ul li.c07 p {
    background-color: var(--color-res07);
}

.form_color_info__box ul li.c08 p {
    background-color: var(--color-res08);
}

.form_color_info__box ul li.c09 p {
    background-color: var(--color-visit01);
}

.form_color_info__box ul li.c10 p {
    background-color: var(--color-visit02);
}

.form_color_info__box ul li.c11 p {
    background-color: var(--color-visit03);
}

.form_color_info__box ul li.c12 p {
    background-color: var(--color-visit04);
}

.form_color_info__box ul li.c13 p {
    background-color: var(--color-visit05);
}

.form_color_info__box ul li.c14 p {
    background-color: var(--color-visit06);
}

.form_color_info__box ul li.c15 p {
    background-color: var(--color-visit07);
}

.form_color_info__box ul li.c16 p {
    background-color: var(--color-visit08);
}

/* 설정 버튼 */
.form_etc_btn {
    width: 100%;
}

.form_etc_btn .cell-setting-btn {
    width: calc(50% - 30px);
}

.form_etc_btn .holiday-setting-btn {
    width: calc(50% - 30px);
}

/* layout type Horizontal */
.form_etc_btn .layout-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
}

.form_etc_btn .layout-toggle-btn img {
    width: 19px;
    height: 19px;
    transform: rotate(90deg);
}

.form_etc_btn .layout-toggle-btn.horizontal img {
    transform: rotate(0deg);
}

.form_etc_btn button:not(:last-child) {
    margin-right: 5px;
}

.form_etc_btn button:hover {
    border: 1px solid var(--color-base);
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* schedulerWrap */
/* 공통 */
#schedulerWrap {
    position: relative;
}

#schedulerWrap,
.scheduler-container,
.scheduler-table-wrap {
    height: 100%;
}

.scheduler-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.scheduler-table-wrap table td {
    text-align: center;
    vertical-align: top;
}

.scheduler-table-wrap table td b {
    font-weight: 800;
}

.scheduler-table {
    width: 100%;
    table-layout: fixed;
}

/* Card 스케줄 테이블형 */

/* Card 공통 */
.card-container {
    height: 100%;
}

.card-container .card {
    position: relative;
    height: 55px;
    margin-bottom: 3px;
    border-radius: 5px;
    border: 1px solid var(--bor-color);
    background-color: #fff;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    z-index: 2;
}

.card-container .card.isDrag {
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
    /* transform: translate(-5px, -5px); */
}

.scheduler-table .card-container .card * {
    pointer-events: none;
}

.card-container .card-header {
    position: relative;
    height: 5px;
}

.card-container .card-header .color-bar {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bor-color);
}

.card-container .card:last-child {
    margin-bottom: 0;
}

.card-container .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    height: 100%;
    padding: 2px 6px;
}

.card-container .card-body p {
    font-size: 100%;
    white-space: nowrap;
}

.card-container .card-body p b {
    font-weight: 800;
}

.card-container .card-body p .card-name {
    display: block;
}

.card-container .card-body .txt-memo {
    font-size: 100%;
    color: #999;
    background-color: transparent;
}

.card-container .card .card-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto !important;
    display: none;
}

.card-container .card .card-info.selected {
    font-style: italic;
}

.card-container .card .card-info.checked {
    text-decoration: underline;
}

html.mobile .card-container .card.isDrag .card-handle {
    display: block;
}

/* 스케줄러 컬러 설정 */
.card-container .card.c01 {
    border-color: var(--color-res01);
}

.card-container .card.c01 .card-header .color-bar {
    background-color: var(--color-res01);
}

.card-container .card.c02 {
    border-color: var(--color-res02);
}

.card-container .card.c02 .card-header .color-bar {
    background-color: var(--color-res02);
}

.card-container .card.c03 {
    border-color: var(--color-res03);
}

.card-container .card.c03 .card-header .color-bar {
    background-color: var(--color-res03);
}

.card-container .card.c04 {
    border-color: var(--color-res04);
}

.card-container .card.c04 .card-header .color-bar {
    background-color: var(--color-res04);
}

.card-container .card.c05 {
    border-color: var(--color-res05);
}

.card-container .card.c05 .card-header .color-bar {
    background-color: var(--color-res05);
}

.card-container .card.c06 {
    border-color: var(--color-res06);
}

.card-container .card.c06 .card-header .color-bar {
    background-color: var(--color-res06);
}

.card-container .card.c07 {
    border-color: var(--color-res07);
}

.card-container .card.c07 .card-header .color-bar {
    background-color: var(--color-res07);
}

.card-container .card.c08 {
    border-color: var(--color-res08);
}

.card-container .card.c08 .card-header .color-bar {
    background-color: var(--color-res08);
}

.card-container .card.c09 {
    border-color: var(--color-visit01);
}

.card-container .card.c09 .card-header .color-bar {
    background-color: var(--color-visit01);
}

.card-container .card.c10 {
    border-color: var(--color-visit02);
}

.card-container .card.c10 .card-header .color-bar {
    background-color: var(--color-visit02);
}

.card-container .card.c11 {
    border-color: var(--color-visit03);
}

.card-container .card.c11 .card-header .color-bar {
    background-color: var(--color-visit03);
}

.card-container .card.c12 {
    border-color: var(--color-visit04);
}

.card-container .card.c12 .card-header .color-bar {
    background-color: var(--color-visit04);
}

.card-container .card.c13 {
    border-color: var(--color-visit05);
}

.card-container .card.c13 .card-header .color-bar {
    background-color: var(--color-visit05);
}

.card-container .card.c14 {
    border-color: var(--color-visit06);
}

.card-container .card.c14 .card-header .color-bar {
    background-color: var(--color-visit06);
}

.card-container .card.c15 {
    border-color: var(--color-visit07);
}

.card-container .card.c15 .card-header .color-bar {
    background-color: var(--color-visit07);
}

.card-container .card.c16 {
    border-color: var(--color-visit08);
}

.card-container .card.c16 .card-header .color-bar {
    background-color: var(--color-visit08);
}

/* 세로형 */
#verticalType .scheduler-table.header-table tr td {
    line-height: 45px;
    border-right: 1px solid var(--bor-color);
    border-bottom: 1px solid var(--bor-color);
}

#verticalType .scheduler-table.outer-table .scheduler-date-header-container {
    padding-right: 10px;
}

#verticalType .scheduler-table tr td.td_time {
    position: relative;
    width: 87px !important;
    font-weight: 800;
}

#verticalType .scheduler-table tr td.td_time span {
    display: block;
    position: absolute;
    top: -1px;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 3;
}

#verticalType .scheduler-table.time-table tr:not(.non-space) td {
    height: 183px;
}

#verticalType .scheduler-content-wrap .non-space {
    height: 16px;
}

/* content height */
#verticalType .scheduler-content-wrap {
    height: calc(1130px - 92px);
    /* 높이 값 추출 #schedulerWrap - 92px (table header) */
    overflow: scroll;
}

#verticalType .scheduler-content-scroll {
    position: relative;
}

#verticalType .scheduler-table.content-table tr:not(.non-space) td {
    height: 60px;
    padding-bottom:20px !important
}

#verticalType .scheduler-table.content-table tr:not(.non-space) td:not(.td_time) {
    border-top: 1px dashed var(--bor-color);
}

#verticalType .scheduler-table.content-table tr.non-space:last-child td:not(.td_time) {
    border-top: 1px dashed var(--bor-color);
}

#verticalType .scheduler-table.content-table tr td {
    border-right: 1px solid var(--bor-color);
}

#verticalType .scheduler-table.content-table tr td:not(.td_time) {
    padding: 5px;
}

/*원장 스케줄*/
#directorType .scheduler-table.header-table tr td {
    line-height: 45px;
    border-right: 1px solid var(--bor-color);
    border-bottom: 1px solid var(--bor-color);
}

#directorType .scheduler-table tr td.td_time {
    position: relative;
    width: 87px !important;
    font-weight: 800;
}

#directorType .scheduler-table tr td.td_time span {
    display: block;
    position: absolute;
    top: -1px;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 3;
}

#directorType .scheduler-table.time-table tr:not(.non-space) td {
    height: 183px;
}

#directorType .scheduler-content-wrap .non-space {
    height: 16px;
}

/* content height */
#directorType .scheduler-content-wrap {
    height: calc(1130px - 92px);
    /* 높이 값 추출 #schedulerWrap - 92px (table header) */
}

#directorType .scheduler-content-scroll {
    position: relative;
}

#directorType .scheduler-table.content-table tr:not(.non-space) td {
    height: 60px;
    padding-bottom:20px !important
}

#directorType .scheduler-table.content-table tr:not(.non-space) td:not(.td_time) {
    border-top: 1px dashed var(--bor-color);
}

#directorType .scheduler-table.content-table tr.non-space:last-child td:not(.td_time) {
    border-top: 1px dashed var(--bor-color);
}

#directorType .scheduler-table.content-table tr td {
    border-right: 1px solid var(--bor-color);
}

#directorType .scheduler-table.content-table tr td:not(.td_time) {
    padding: 5px;
}

/*원장 스케줄*/

/* 가로형 */
#horizontalType .scheduler-table td.h_td {
    height: 100%;
    min-height: 69px;
    /*height: 100px;*/
}

#horizontalType .scheduler-table.header-table tr td {
    /*border-bottom: 1px solid var(--bor-color);*/
}

#horizontalType .scheduler-column-wrap {
    position: relative;
    padding-bottom: 10px;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#horizontalType .scheduler-column-wrap::-webkit-scrollbar {
    display: none;
}

#horizontalType .scheduler-column-wrap .scheduler-column-table {
    /*
    position: absolute;
    width: 100%;
    left: 0;
    */
}

#horizontalType .scheduler-column-wrap .scheduler-column-table tr td {
    border-right: 1px solid var(--bor-color);
    border-bottom: 1px solid var(--bor-color);
    vertical-align: middle;
}

#horizontalType .scheduler-table.header-table tr td.non-space {
    width: 25px;
    border-right: 0;
}

#horizontalType .scheduler-table.outer-table>tbody>tr:first-child {
    /*border-bottom: 1px solid var(--bor-color);*/
}

#horizontalType .scheduler-table.outer-table tr td.scheduler-left-td {
    width: 200px;
    border-bottom: 1px solid var(--bor-color);
}

#horizontalType .scheduler-table.outer-table tr td.scheduler-left-td table {
    position: relative;
    height: 100%;
    background-color: #fff;
    z-index: 5;
}

#horizontalType .scheduler-table.outer-table tr td.scheduler-left-td+td {
    width: calc(100% - 200px);
    border-bottom: 1px solid var(--bor-color);
}

#horizontalType .scheduler-column-table {
    table-layout: fixed;
    width: 100%;
}

#horizontalType .scheduler-table.header-table tr td:not(.non-space),
#horizontalType .scheduler-table.content-table tr td:not(.non-space) {
    width: 110px;
}

#horizontalType .scheduler-table.outer-table .scheduler-date-header-container {
    width: 100%;
    height: 42px;
    padding-right: 10px;
}

#horizontalType .scheduler-table tr.tr_time td {
    position: relative;
    font-weight: 800;
}

#horizontalType .scheduler-table.header-table tr.tr_time span {
    position: absolute;
    top: 50%;
    left: -1px;
    width: 50px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: block;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 3;
}

#horizontalType .scheduler-table.time-table tr:not(.non-space) td {
    height: 183px;
}

#horizontalType .scheduler-content-wrap .non-space {
    height: 16px;
}

/* content height */
#horizontalType .scheduler-content-wrap {
    position: relative;
    height: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

#horizontalType .scheduler-content-wrap .scheduler-content-scroll {
    position: relative;
    width: fit-content;
}

#horizontalType .scheduler-date-header-scroll {
    position: relative;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#horizontalType .scheduler-date-header-scroll::-webkit-scrollbar {
    display: none;
}

#horizontalType .scheduler-date-header-scroll .x-scoll {
    position: absolute;
    top: 0;
    left: 0;
}

#horizontalType .scheduler-date-header-scroll .scheduler-table.header-table {}

#horizontalType .scheduler-column-table tr td,
#horizontalType .scheduler-table tr.tr_time td {
    height: 42px;
}

#horizontalType .scheduler-table.content-table tr td.non-space {
    width: 25px;
}

#horizontalType .scheduler-table.content-table tr:not(.tr_time) td {
    /*height: 183px;*/
    padding: 5px;
}

#horizontalType .scheduler-table.content-table tr td {
    border-bottom: 1px solid var(--bor-color);
}

#horizontalType .scheduler-table.content-table tr:not(.non-space) td:not(.td_time) {
    border-right: 1px dashed var(--bor-color);
}

/* time bar */
/*원장스케줄*/

#directorTimeBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0;
    animation: delayFadeIn 1s forwards;
}

#directorTimeBar .time-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: var(--color-base);
}

#directorTimeBar:before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color-base);
}

#directorTimeBar .time-txt {
    position: absolute;
    top: 50%;
    right: calc(100% - 10px);
    width: 87px;
    color: var(--color-base);
    font-weight: 800;
    padding: 0 15px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* 세로형 */
#timeBar {
    position: absolute;
    top: 0;
    /* 테이블 위아래 여백만큼 빼줌 */
    right: 0;
    width: calc(100% - 77px);
    /* height: 32px; */
    /* padding: 5px 0; */
    z-index: 1;
    opacity: 0;
    animation: delayFadeIn 1s forwards;
}

#timeBar .time-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: var(--color-base);
}

#timeBar:before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color-base);
}

#timeBar .time-txt {
    position: absolute;
    top: 50%;
    right: calc(100% - 10px);
    width: 87px;
    color: var(--color-base);
    font-weight: 800;
    padding: 0 15px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* 가로형 */
#timeBar2 {
    position: absolute;
    left: 0;
    /* 테이블 왼쪽 여백만큼 빼줌 */
    top: 35px;
    width: 50px;
    height: calc(100% - 35px);
    padding: 0 24px;
    z-index: 1;
    opacity: 0;
    animation: delayFadeIn 1s forwards;
}

#timeBar2 .time-bar {
    position: relative;
    width: 2px;
    height: calc(100% - 10px);
    background-color: var(--color-base);
}

#timeBar2:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: var(--color-base);
}

#timeBar2 .time-txt {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 7px);
    width: 87px;
    color: var(--color-base);
    font-weight: 800;
    line-height: 1;
    padding: 15px 0;
    text-align: center;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

@keyframes delayFadeIn {

    0%,
    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* stateBox */
.stateBox {
    position: absolute;
    display: none;
    z-index: 5;
}
.front-layout-wrap .stateBox {
    z-index: 20;
}

.stateBox ul {
    width: 100px;
    border-radius: 10px;
    border: 1px solid #d4d9e1;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.stateBox ul li:first-child>a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.stateBox ul li:last-child>a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.stateBox ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    height: 30px;
    font-size: 100%;
    font-weight: 700;
    background-color: #fff;
}

.stateBox ul li.on>a {
    background-color: var(--color-gray);
}

.stateBox ul li:not(.on)>a:hover {
    background-color: var(--color-gray2);
}

.stateBox ul.depth1 {
    position: relative;
}

.stateBox ul.depth1>li {
    /*position: relative;*/
}

.stateBox ul.depth1>li .depth2 {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
}

.stateBox ul.depth1>li:hover .depth2 {
    display: block;
}

.stateBox ul.depth1>li .depth3 {
    position: absolute;
    left: 100%;
    bottom: 60px;
    display: none;
}

.stateBox ul.depth1>li:hover .depth3 {
    display: block;
}


/* 화면 중심에서 아래일 때 */
.stateBox.reverse:not(.left) {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.stateBox.reverse ul.depth1>li .depth2 {
    top: auto;
    bottom: 0;
}

/* 화면 중심에서 오른쪽일 때 */
.stateBox.left:not(.reverse) {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

.stateBox.left.reverse {
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -o-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}

.stateBox.left ul.depth1>li .depth2 {
    left: auto;
    right: 100%;
}
.stateCloseBtn img {
    width: 14px;
}
/* memoBox */
#memoBox,
#memoBox2 {
    display: none;
    position: absolute;
    top: 10%;
    left: 0;
    z-index: 6;
}

.menu-box-container {
    width: 305px;
    border: 1px solid var(--bor-color);
    border-radius: 10px;
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.menu-box-container .memo-header {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 5px 20px;
    background-color: #ddd;
}

.menu-box-container .memo-header p {
    font-weight: 700;
    padding-right: 40px;
}
/* 모바일 예약창 열기 버튼 */
.resOpenBtn { 
    display: none;
    position: absolute;
    top: 0;
    right: 40px;
    width: 20px;
    height: 40px;
    border: none;
    outline: none;
    background: transparent url('../img/icons/ico_more-dots.svg') no-repeat center/ auto;
}

.mobile .resOpenBtn { 
    display: block;
}

.memoCloseBtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    background: transparent url('../img/icons/ico_close.svg') no-repeat center/ 17px auto;
}

.menu-box-container .memo-body {
    padding: 15px 20px;
    background-color: #fff;
}

.menu-box-container .memo-area+.memo-area {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bor-color);
}

.menu-box-container .memo-area dl {
    display: flex;
    flex-wrap: wrap;
    padding: 7px 0;
}

.menu-box-container .memo-area dl dt {
    width: 80px;
    font-weight: 700;
    text-align: left;
}

.menu-box-container .memo-area dl dd {
    width: calc(100% - 80px);
    text-align: right;
}

.menu-box-container .memo-area dl .w-100 {
    text-align: left;
}

.menu-box-container .memo-area dl dd.w-100 {
    margin-top: 3px;
}

/* 타입별 컬러 변경 */
/* background color */
.c01 .memo-header {
    background-color: var(--color-res01);
}

.c02 .memo-header {
    background-color: var(--color-res02);
}

.c03 .memo-header {
    background-color: var(--color-res03);
}

.c04 .memo-header {
    background-color: var(--color-res04);
}

.c05 .memo-header {
    background-color: var(--color-res05);
}

.c06 .memo-header {
    background-color: var(--color-res06);
}

.c07 .memo-header {
    background-color: var(--color-res07);
}

.c08 .memo-header {
    background-color: var(--color-res08);
}

.c09 .memo-header {
    background-color: var(--color-visit01);
}

.c10 .memo-header {
    background-color: var(--color-visit02);
}

.c11 .memo-header {
    background-color: var(--color-visit03);
}

.c12 .memo-header {
    background-color: var(--color-visit04);
}

.c13 .memo-header {
    background-color: var(--color-visit05);
}

.c14 .memo-header {
    background-color: var(--color-visit06);
}

.c15 .memo-header {
    background-color: var(--color-visit07);
}

.c16 .memo-header {
    background-color: var(--color-visit08);
}

/* border color */
.c01 .menu-box-container {
    border-color: var(--color-res01);
}

.c02 .menu-box-container {
    border-color: var(--color-res02);
}

.c03 .menu-box-container {
    border-color: var(--color-res03);
}

.c04 .menu-box-container {
    border-color: var(--color-res04);
}

.c05 .menu-box-container {
    border-color: var(--color-res05);
}

.c06 .menu-box-container {
    border-color: var(--color-res06);
}

.c07 .menu-box-container {
    border-color: var(--color-res07);
}

.c08 .menu-box-container {
    border-color: var(--color-res08);
}

.c09 .menu-box-container {
    border-color: var(--color-visit01);
}

.c10 .menu-box-container {
    border-color: var(--color-visit02);
}

.c11 .menu-box-container {
    border-color: var(--color-visit03);
}

.c12 .menu-box-container {
    border-color: var(--color-visit04);
}

.c13 .menu-box-container {
    border-color: var(--color-visit05);
}

.c14 .menu-box-container {
    border-color: var(--color-visit06);
}

.c15 .menu-box-container {
    border-color: var(--color-visit07);
}

.c16 .menu-box-container {
    border-color: var(--color-visit08);
}

/* 화면 중심에서 아래일 때 */
#memoBox.reverse:not(.left),
#memoBox2.reverse:not(.left) {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

/* 화면 중심에서 오른쪽일 때 */
#memoBox.left:not(.reverse),
#memoBox2.left:not(.reverse) {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}

#memoBox.left.reverse,
#memoBox2.left.reverse {
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    -o-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
}

/* join */
.int_join_wrap {}

.int_join_wrap select,
.int_join_wrap input[type='text'],
.int_join_wrap input[type='search'],
.int_join_wrap input[type='password'],
.int_join_wrap input[type='tel'],
.int_join_wrap input[type='email'] {
    height: 34px;
}

.int_join_wrap .int_form_table table td {
    padding: 15px 25px;
}

.int_join_wrap .w-100,
.int_join_wrap table td input[type='text'],
.int_join_wrap table td input[type='search'],
.int_join_wrap table td input[type='password'] {
    width: 100%;
}

/* 아이디 체크 */
.int_join_wrap .int_form_table table td .id-check {
    font-size: 0;
}

.int_join_wrap .int_form_table table td .id-check>* {
    vertical-align: middle;
}

.int_join_wrap .int_form_table table td #fr_cm_id {
    width: calc(100% - 135px);
}

.int_join_wrap .int_form_table table td #fr_cm_id+button {
    width: 130px;
    margin-left: 5px;
    height: 34px;
    color: #fff;
    border-radius: 5px;
    background-color: #828282;
}

/* 전화번호 */
.int_join_wrap .col-tel-3 {
    font-size: 0;
}

.int_join_wrap .col-tel-3 em {
    display: inline-block;
    width: 21px;
    font-size: 1rem;
    font-style: normal;
    text-align: center;
}

.int_join_wrap .col-tel-3 input[type='text'],
.int_join_wrap .col-tel-3 input[type='search'] {
    width: calc(100% / 3 - 14px);
}

/* 이메일 */
.int_join_wrap .email-form {
    font-size: 0;
}

.int_join_wrap .email-form>* {
    vertical-align: middle;
}

.int_join_wrap .email-form em {
    display: inline-block;
    width: 40px;
    font-size: 1.125rem;
    font-style: normal;
    text-align: center;
}

.int_join_wrap .email-form input[type='text'],
.int_join_wrap .email-form input[type='search'] {
    width: calc(100% / 3 - 20px);
}

.int_join_wrap .email-form select {
    margin-left: 5px;
}

.int_join_wrap .s_txt {
    display: block;
    margin-top: 10px;
}

/* join btn */
.int_btn_wrap {
    margin-top: 50px;
    margin-left: -10px;
}

.int_btn_wrap button {
    min-width: 175px;
    height: 50px;
    margin-left: 10px;
}

/* 회원정보수정 */
.int_join_wrap .cm-board-no {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.int_join_wrap .cm-board-no span {
    display: inline-block;
    margin-left: 20px;
    margin-right: 10px;
}

.int_join_wrap .cm-board-no input[type='text'],
.int_join_wrap .cm-board-no input[type='search'] {
    width: auto;
    margin-right: 5px;
}

/* popup */
.pop-wrap {
    position: absolute;
    display: none;
    z-index: 10;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pop-wrap.show {
    display: block;
}

.pop-wrap .pop-container {
    position: relative;
    border-radius: 5px;
    border: 1px solid var(--bor-color);
    background-color: #fff;
    box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    -webkit-box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.pop-container .pop-box {
    position: relative;
    width: 272px;
    padding: 20px;
}

.pop-container .pop-header {
    position: relative;
    margin-bottom: 20px;
}

.pop-container .pop-header h3 {
    font-weight: 800;
    line-height: 1.4;
}

.pop-container .pop-header h3 .ico {
    margin-right: 10px;
    vertical-align: middle;
}

.pop-container .pop-header .pop-close {
    position: absolute;
    right: 0;
    top: -2px;
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -9999px;
    background: url('../img/icons/ico_close.svg') no-repeat center/12px auto;
    -webkit-transition: linear 0.3s;
    transition: linear 0.3s;
}

.pop-container .pop-header .pop-close:hover {
    /*background-color: var(--color-base-hover);*/
}

.pop-container .pop-body {
    padding-bottom: 30px;
    border-top: 1px solid var(--font-color-base);
}

.pop-container input[type='text'],
.pop-container input[type='search'],
.pop-container input[type='number'],
.pop-container select,
.pop-container textarea {
    width: 100%;
    border: none;
    background-color: var(--color-gray2);
}

.pop-container .pop-body .pop-tit {
    margin-top: 15px;
    margin-bottom: 10px;
}

.pop-container .pop-body .pop-txt {}

.pop-container .pop-body .pop-txt {}

.pop-btn {
    display: flex;
    flex-wrap: wrap;
    margin: -6px -3px 0;
}

.pop-btn button {
    height: 35px;
    margin: 6px 3px 0;
    flex: 1;
}

.pop-btn.inline-st {
    justify-content: flex-end;
}
.pop-btn.inline-st button {
    flex: inherit;
    min-width: 113px;
}

.pop-btn .btn-confirm {
    color: #fff;
    border: 0;
    border-radius: 5px;
    background-color: var(--font-color-base);
    -webkit-transition: opacity ease 0.2s;
    transition: opacity ease 0.2s;
}

.pop-btn .btn-confirm:hover {
    opacity: 0.7;
}

.pop-btn .btn-delete {
    color: #fff;
    border: 0;
    border-radius: 5px;
    background-color: #aaa;
    -webkit-transition: opacity ease 0.2s;
    transition: opacity ease 0.2s;
}

.pop-btn .btn-delete:hover {
    opacity: 0.7;
}

/* 의약품 추가 버튼 */
.pop-btn .btn-additional {
    color: #fff;
    border: 0;
    border-radius: 5px;
    background-color: var(--font-color-base);
    -webkit-transition: opacity ease 0.2s;
    transition: opacity ease 0.2s;
}

.pop-btn .btn-additional:hover {
    opacity: 0.7;
}

.pop-btn .btn-search {
    color: #fff;
    border: 0;
    border-radius: 5px;
    background-color: var(--color-base);
    -webkit-transition: opacity ease 0.2s;
    transition: opacity ease 0.2s;
}

.pop-btn .btn-search:hover {
    opacity: 0.7;
}

.pop-btn .btn-reset {
    color: var(--font-color-base);
    border: 0;
    border-radius: 5px;
    border: 1px solid var(--font-color-base);
    background-color: #fff;
    -webkit-transition: opacity ease 0.2s;
    transition: opacity ease 0.2s;
}

.pop-btn .btn-reset:hover {
    opacity: 0.7;
}

.pop-cont__time.d_f {
    margin: 0 -2.5px;
}
.pop-cont__time.d_f > li {
    flex: 1;
    padding: 0 2.5px;
}

.pop-cont__time.d_f > li input[type="text"],
.pop-cont__time.d_f > li input[type="search"],
.pop-cont__time.d_f > li select {
    width: 100%;
}

.pop-container .notice_txt {
    padding-left: 16px;
    color: #E84809;
    word-break: keep-all;
    background: url('../img/icons/ico_notice_red.svg')no-repeat left top 3px/12px auto;
}

/* 공지사항 / 일자메모 등록 팝업 */
#dayMemoPop,
#noticePop {
    left: calc(100% + 20px);
}

.pop-wrap .color-palette-wrap ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 -2px;
}

.pop-wrap .color-palette-wrap ul li {
    padding: 2px;
}

.pop-wrap .color-palette-wrap ul li button {
    width: 20px;
    height: 20px;
}

.pop-wrap .color-palette-wrap ul li button:active {
    border: 1px solid #fff;
}

.pop-wrap .pop-cont input[type='radio'] + label {
    line-height: 17px;
}
.pop-wrap .pop-cont input[type='radio'] + label:before {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
}
.pop-wrap .pop-cont input[type='radio'] + label:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
}

.pop-wrap .pop-cont input[type='radio']:checked + label:before {
    border-color: var(--color-base);
}

/**
Front
**/
/* 아이콘 색상 */

/* 진료 */
.ico_treatment path {
    fill: var(--color-visit02);
    /* 진료컬러 */
}

.ico_treatment:before {
    background-color: var(--color-visit02);
}

/* 상담 */
.ico_consult path {
    fill: var(--color-visit04);
}

.ico_consult:before {
    background-color: var(--color-visit04);
}

/* 예약 */
.ico_reservation path {
    fill: var(--color-res01);
    /* 예약컬러 */
}

.ico_reservation:before {
    background-color: var(--color-res01);
}

/* 내원 */
.ico_visit path {
    fill: var(--color-res05);
}

.ico_visit:before {
    background-color: var(--color-res05);
}

/* 귀가 */
.ico_homecoming path {
    fill: var(--color-res06);
}

.ico_homecoming:before {
    background-color: var(--color-res06);
}

/* 취소 */
.ico_cancel path {
    fill: var(--color-res07);
}

.ico_cancel:before {
    background-color: var(--color-res07);
}

/* layout */
.front-layout-wrap {
    height: 100%;
}

.front-layout-wrap .article_box_01 {
    height: 50px;
}

.front-layout-wrap .reservation__control {
    position: relative;
    height: 100%;
    z-index: 5;
}

.front-layout-wrap .article_box_02 {
    position: relative;
    height: calc(100% - 50px - 10px);
}

#schedulerListWrap {
    position: relative;
    width: calc(100% - 50px);
    height: 100%;
}

#schedulerListWrap #memoBox {
    z-index: 15;
}

/* right panel wrap  */
.front-layout-wrap #right-panel-wrap {
    position: absolute;
    /*width: 100%;*/
    width: 60px;
    height: 100%;
    right: -10px;
    z-index: 15;
    /*
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    z-index: 10;*/
}

#right-panel-wrap .panel-box {
    position: absolute;
    right: -586px;
    top: 0;
    height: 100%;
    z-index: 8;
    /*
    -webkit-transition: ease-in-out all .3s;
    transition: ease-in-out all .3s;*/
}

#right-panel-wrap .panel-box .panelBtn {
    position: absolute;
    right: 100%;
    width: 50px;
    padding: 25px 18px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image: url('../img/icons/ico_arrow-left.svg');
    background-repeat: no-repeat;
    background-size: 9px 18px;
    background-position: top 23px center;
}

#right-panel-wrap .panel-box .panelBtn span {
    position: relative;
    display: block;
    word-break: break-all;
    white-space: nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    padding-right: 20px;
    -webkit-transform: translate(-50%, -50%) rotate(270deg);
    -moz-transform: translate(-50%, -50%) rotate(270deg);
    -o-transform: translate(-50%, -50%) rotate(270deg);
    transform: translate(-50%, -50%) rotate(270deg);
}

#right-panel-wrap .panel-box .r-box {
    position: relative;
    width: 586px;
    height: 100%;
    padding: 0 30px;
    background-color: #fff;
}

/*
#right-panel-wrap .panel-box .r-box:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
}
*/
/* 귀가 */
#panelFirst .panelBtn,
#frontHomecoming .card .card-header .color-bar {
    /*#frontHomecoming.r-box:before {*/
    background-color: var(--color-res06);
}

#panelFirst .panelBtn {
    top: 0;
    height: 122px;
}

/* 취소 */
#panelSecond .panelBtn,
#frontCancel .card .card-header .color-bar {
    /*#frontCancel.r-box:before {*/
    background-color: var(--color-res07);
}

#panelSecond .panelBtn {
    top: 122px;
    height: 163px;
}

/* 방문날짜 및 동선 / 방문시간 숨김 */
#frontCancel .visit_time,
#frontCancel .current-area,
#frontCancel .card-time-txt {
    display: none;
}

/* show */
#right-panel-wrap .panel-box.show {
    right: -10px;
    -webkit-box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.1);
    box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

#right-panel-wrap .panel-box.show .panelBtn {
    background-image: url('../img/icons/ico_arrow-right.svg');
}

/* list */
.schedulerList__row {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    margin: 0 -5px;
}

.schedulerList__col {
    width: 33.333%;
    padding: 0 5px;
}

.schedulerList__col .r-box {
    padding: 0 30px;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
}

.schedulerList__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 67px;
}

.schedulerList__header .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
}

.schedulerList__header .icon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
}

.schedulerList__header .icon svg {
    width: 18px;
    z-index: 2;
}

.schedulerList__header p {
    font-size: 14px;
    font-weight: 800;
}

/* 예약 컬러 */
#frontReservation .card .card-header .color-bar {
    background-color: var(--color-res01);
}

/* 방문날짜 및 동선 / 방문시간 숨김 */
#frontReservation .visit_time,
#frontReservation .current-area,
#frontReservation .card-time-txt {
    display: none;
}

/* 내원 컬러 */
#frontVisit .card .card-header .color-bar {
    background-color: var(--color-res05);
}

/* 방문날짜 및 동선 숨김 */
#frontVisit .current-area {
    display: none;
}

/* 진료 컬러 */
#frontTreatment .card .card-header .color-bar {
    background-color: var(--color-visit02);
}

#frontTreatment .card .card-body ul li {
    display: block;
}

#frontTreatment .card .card-body ul li {}

/* front card */
.schedulerList__body .card-header .color-bar {
    width: 7px;
}

.schedulerList__body {
    height: calc(100% - 67px);
    padding-right: 5px;
    overflow-y: auto;
    touch-action: auto !important;
    /* 터치 스크롤을 허용 */
    -webkit-overflow-scrolling: touch;
    /* iOS에서 부드러운 스크롤 지원 */
    pointer-events: auto;
    /* 스크롤 허용 */
}

.card-container.scroll-y {}

.nodropZone .card {
    pointer-events: none;
}

.schedulerList__body .card-container {
    height: 100%;
    touch-action: auto !important;
    /* 터치 스크롤을 허용 */
}

/* .schedulerList__body .card-container:before {
  content: '';
  position: absolute;
  width: 85px;
  height: 100%;
  background-color: transparent;
  z-index: 12;
} */
.schedulerList__body .card-container .card {
    display: table;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.schedulerList__body .card-container .card {
    margin-bottom: 10px;
}

.schedulerList__body .card-container .card:last-child {
    margin-bottom: 20px;
}

.schedulerList__body .card-container .card .card-header,
.schedulerList__body .card-container .card .card-body {
    display: table-cell;
    vertical-align: middle;
}

.schedulerList__body .card-container .card .card-header {
    width: 82px;
    height: 100%;
    text-align: center;
    padding-left: 7px;
}

.schedulerList__body .card-container .card .card-header:before {
    width: 7px;
}

.schedulerList__body .card-container .card .card-header p {
    display: inline-block;
    font-weight: 800;
    padding: 3px;
}

.schedulerList__body .card-container .card .card-header p span {
    display: block;
}

.schedulerList__body .card-container .card .card-header p span.c05 {
    /* 내원 컬러 적용 */
    color: var(--color-res05);
}

.schedulerList__body .card-container .card .card-header p span.c10 {
    /* 진료중 컬러 적용 */
    color: var(--color-visit02);
}

.schedulerList__body .card-container .card .card-body {
    position: relative;
    width: calc(100% - 82px);
    padding: 20px;
}

.schedulerList__body .card-container .card .card-body:before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    width: 1px;
    height: calc(100% - 40px);
    background-color: var(--bor-color);
}

.schedulerList__body .card-container .card .card-body ul {
    margin-top: 10px;
    padding-right: 70px;
}

.schedulerList__body .card-container .card .card-body ul li {
    position: relative;
    display: inline-block;
    line-height: 1.5;
    padding-left: 10px;
    margin-right: 10px;
}

.schedulerList__body .card-container .card .card-body ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--font-color-base);
}

.schedulerList__body .card .card-time-txt {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #e84809 !important;
    padding-left: 15px;
    background: url('../img/icons/ico_clock.svg') no-repeat center left/auto;
}

.shortMode .card .card-time-txt {
    right: 10px;
    bottom: 5px;
}

.card_div.highlight {
    border: none;
}

.dir_card_div.highlight {
    border: none;
    position: relative;
}

.card_div.highlight_setting {
    background-color: #A4AAB4 !important;
    border: none;
}

.dir_card_div.highlight_setting {
    background-color: #A4AAB4 !important;
    border: none;
    position: relative;
}

.card_div.highlight_rsv {
    background-color: #D7D7D7 !important;
    border: none;
}

.dir_card_div.highlight_rsv {
    background-color: #D7D7D7 !important;
    border: none;
    position: relative;
}


.ui-selectable-helper {
    display: none !important;
}
.shortMode .card-body ul {
    display: none;
}

.schedulerList__body .card .customer-info-btn {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-position: 50% 50%;
    background-size: 8px auto;
    background-repeat: no-repeat;
    background-image: url('../img/icons/ico_arrow-right-2px.svg');
    background-color: var(--color-gray2);
}

/* icon btn */
.circle-arr-right-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-position: 50% 50%;
    background-size: 8px auto;
    background-repeat: no-repeat;
    background-image: url('../img/icons/ico_arrow-right-2px.svg');
    background-color: var(--color-gray2);
}

.circle-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-position: 50% 50%;
    background-size: 10px auto;
    background-repeat: no-repeat;
    background-color: var(--color-gray2);
}

.circle-sms-btn {
    background-size: 12px auto;
    background-image: url('../img/icons/ico_sms.svg');
}

.circle-plus-btn {
    background-image: url('../img/icons/ico_plus.svg');
}

.circle-modify-btn {
    background-size: 12px auto;
    background-image: url('../img/icons/ico_pop-notice.svg');
}

.circle-minus-btn {
    background-image: url('../img/icons/ico_minus.svg');
}

.refresh-compare-btn {
    background-size: 14px auto;
    background-image: url('../img/icons/ico_img-refresh.svg');
}

.circle-compare-btn {
    background-size: 14px auto;
    background-image: url('../img/icons/ico_img-compare.svg');
}

.circle-edit-btn {
    background-size: 12px auto;
    background-image: url('../img/icons/ico_edit.svg');
}

.circle-delete-btn {
    background-size: 12px auto;
    background-image: url('../img/icons/ico_delete.svg');
}

.circle-download-btn {
    background-size: 12px auto;
    background-image: url('../img/icons/ico_download.svg');
}

.circle-upload-btn {
    background-size: 12px auto;
    background-image: url('../img/icons/ico_upload.svg');
}

.print-circle-btn {
    background-size: 17px auto;
    background-image: url('../img/icons/ico_print.svg');
    background-color: var(--color-base);
}


/* 예약 팝업존 */
#reservationWrapPop {
    position: absolute;
    top: 5%;
    left: calc(50% - 683px);
    z-index: 10;
}

/* 예약 팝업존 */
#popup-sub-container {
    z-index: 11;
}

.addMedicineRegPop.pop-wrap {
    left: 50%;
    top: 50%;
    bottom: auto;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 30;
}

.pop-reservation-container .r-box {
    border-radius: 10px;
    background-color: var(--color-gray2);
}

.pop-reservation-container {
    position: relative;
    width: 1365px;
    height: 90vh;
    max-height: 860px;
}

/* 공통 팝업 */
.not-drag-area {
    /*touch-action: auto !important;*/
}

.not-drag-area input,
.not-drag-area textarea {
    /*pointer-events: auto;
  z-index: 1000;*/
    /* 필요한 경우 z-index도 조정 */
}

.pop2-wrap .pop2-container {
    position: relative;
}

.pop2-container .inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.pop2-wrap .pop2-body {
    position: relative;
    height: 102%;
    padding: 28px 25px 10px;
    border-radius: 10px;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    overflow: auto;
}

.pop2-wrap .pop2-body.pop-search-body
{
    overflow: hidden;
}

.handler {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pop2CloseBtn {
    position: absolute;
    right: -50px;
    top: 0;
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    background: #fff url('../img/icons/ico_close.svg') no-repeat center / 17px auto;
    /* -webkit-box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);*/
    z-index: 1;
}

.pop2-container .btn_wrap .btn {
    width: 110px;
    font-size: 10px;
}

/* // 공통 팝업 */
.pop-reservation-container .h-label {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    padding: 3px 10px;
}
.pop-reservation-container .h-label.type_square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 3px;
}

/*예약등록 c01*/
.pop-reservation-container .h-label.c01 {
    background-color: var(--color-res01);
}

/*확인콜완료 c02*/
.pop-reservation-container .h-label.c02 {
    background-color: var(--color-res02);
}

/*확인콜부재 c03 */
.pop-reservation-container .h-label.c03 {
    background-color: var(--color-res03);
}

/*해피콜부재 c04*/
.pop-reservation-container .h-label.c04 {
    background-color: var(--color-res04);
}

/*내원 c05*/
.pop-reservation-container .h-label.c05 {
    background-color: var(--color-res05);
}

/*귀가 c06*/
.pop-reservation-container .h-label.c06 {
    background-color: var(--color-res06);
}

/*예약취소 c07 */
.pop-reservation-container .h-label.c07 {
    background-color: var(--color-res07);
}

/*미방문 c08 */
.pop-reservation-container .h-label.c08 {
    background-color: var(--color-res08);
}

/*진료대기 c09*/
.pop-reservation-container .h-label.c09 {
    background-color: var(--color-visit01);
}

/*진료중 c10*/
.pop-reservation-container .h-label.c10 {
    background-color: var(--color-visit02);
}

/*진료완료 c11*/
.pop-reservation-container .h-label.c11 {
    background-color: var(--color-visit03);
}

/*상담중 c12*/
.pop-reservation-container .h-label.c12 {
    background-color: var(--color-visit04);
}

/*수납대기 c13*/
.pop-reservation-container .h-label.c13 {
    background-color: var(--color-visit05);
}

/*수납완료 c14*/
.pop-reservation-container .h-label.c14 {
    background-color: var(--color-visit06);
}

/*시술중 c15*/
.pop-reservation-container .h-label.c15 {
    background-color: var(--color-visit07);
}

/*수술중 c16*/
.pop-reservation-container .h-label.c16 {
    background-color: var(--color-visit08);
}

/* layout */
.scroll-box-y {
    overflow-y: auto;
}

/* scrollbar / color change */
.scroll-box-y.bg2::-webkit-scrollbar-thumb {
    border: 2px solid #dfe9f9;
}

.scroll-box-y.bg2::-webkit-scrollbar-track {
    background-color: #dfe9f9;
}

.pop-layout-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

.pop-layout-row .pop-layout-col {
    height: 100%;
}

.pop-layout-row .pop-layout-col.step1,
.pop-layout-row .pop-layout-col.step2 {
    width: 346px;
    margin-right: 10px;
}

.pop-layout-row .pop-layout-col.step3 {    
    /*width: calc(100% - (346px * 2) - 20px);*/
    flex: 1 1 auto;
    width: 1%;
}

/* col1 height */
.pop-search-wrap {
    height: 50px;
    margin-bottom: 10px;
}

.pop-customer-info-wrap {
    height: calc(100% - 50px - 10px);
}

.pop-res-history-wrap {
    height: 100%;
}

/* search */
.pop-form-serach-area {
    display: flex;
    flex-wrap: nowrap;
    height: 50px;
}

.pop-form-serach-area select {
    width: 35%;
    height: 100%;
    border: 0;
    padding-left: 20px;
    background-color: transparent;
}

#searchFld {
    width: 30%;
    height: 100%;
}

#searchFld:not(:focus) {
    border-color: #fff;
}

.pop-form-serach-area .p-box {
    width: 65%;
    padding: 10px;
}

.pop-form-serach-area .search_input_box input {
    padding-left: 20px;
    background-color: transparent;
}

/* 정보 */
.pop-customer-info__top {
    height: 465px;
    overflow: hidden;
    transition: all ease 0.2s;
    -webkit-transition: all ease 0.2s;
}

.pop-customer-info__top .inner {
    height: calc(100% - 40px);
}

.pop-customer-info__top__conts {
    padding-top: 5px;
}

.pop-customer-info__top__conts .item {
    font-size: 12px;
    /*height: 42px;*/
    line-height: 1.6;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--bor-color);
}

.pop-customer-info__top__conts .item.customer-name {
    /*display: flex;
    align-items: center;
    justify-content: space-between;*/
}

.pop-customer-info__top__conts .item.customer-name h3 {
    font-size: 14px;
    font-weight: 700;
}

.pop-customer-info__top__conts .item.customer-name button {
    background-color: transparent;
}

.pop-customer-info__top__conts .item .deleteBtn img {
   width: 17px;
}

.pop-customer-info__top__conts .item .insertBtn img {
    width: 15px;
}

.pop-customer-info__top__conts .item.customer-tel li {
    font-weight: 700;
}

.pop-customer-info__top__conts .item dt {
    color: #7f7f7f;
}

.pop-customer-info__top__conts .item dd {
    font-weight: 700;
}

.pop-customer-info__top__conts .item .d_f {
    justify-content: space-between;
}

.pop-customer-info__top__conts .item .d_f span {
    justify-content: space-between;
    color: #7f7f7f;
    font-weight: 100;
}


.pop-customer-info__top__conts .bullet_ul li {
    line-height: 1.6;
}

.pop-customer-info__top__conts .bullet_ul li:before {
    top: 5px;
    width: 4px;
    height: 4px;
}

/* 정보 더보기 */
.infoMoreBtn {
    width: 100%;
    color: #fff;
    height: 40px;
    background-color: var(--color-base);
}

.infoMoreBtn span {
    display: none;
}

.infoMoreBtn.close .txt-close {
    display: block;
}

.infoMoreBtn.open .txt-open {
    display: block;
}

.pop-customer-info__bot {
    height: calc(100% - 465px);
}

.pop-customer-info__bot__memo {
    padding: 20px 0;
}

.pop-customer-info__bot__memo .pop-tit {
    font-weight: 700;
    margin-bottom: 10px;
}

.pop-customer-info__bot__memo .pop-cont {
    min-height: 40px;
    line-height: 1.6;
}

.pop-customer-info__bot__memo .pop-cont input {
    width: 100%;
}

.pop-customer-info__bot__memo .pop-cont input:not(:focus) {
    border-color: #fff;
}

.pop-customer-info__bot__memo .pop-cont ul li {
    line-height: 1.6;
    margin-top: 10px;
}

.pop-customer-info__bot__memo .pop-cont ul li p {}

/* col2 height */
.pop-res-history__head {
    height: 50px;
}

.pop-res-history__body {
    height: calc(100% - 50px);
}

.pop-res-history__body .scroll-box-y {
    padding: 20px 0;
    height: 100%;
}

.pop-res-history__head h3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    /* border-bottom: 1px solid var(--bor-color); */
}

.his-tab-tit.off {
    color:#ddd;
}

.his-tab-tit {
    cursor: pointer;
}

/* tab */
/* height */
.pop-res-tab-wrap {
    height: 100%;
}

.pop-res-tab-wrap .pop-res-tab__nav {
    height: 123px;
}

.pop-res-tab-wrap .pop-res-tab__cont {
    height: calc(100% - 123px);
    /* nav 높이에 따라 cont 높이 변경 스크립트 처리
    .pop-res-tab-wrap(height) - .pop-res-tab__nav(height) = .pop-res-tab__cont(height)
    */
}

.pop-res-tab-wrap .tab-list__cont__row.d_f {
    height: 100%;
    margin: 0 -4px;
}

.tab-list__cont__col {
    width: 50%;
    height: 100%;
    padding: 0 4px;
}

.pop-res-tab__cont .tab-list,
.pop-res-tab__cont .tab-list>li,
.pop-res-tab__cont .tab-list__cont {
    height: 100%;
}

.pop-res-tab__nav.r-box {
    padding: 8px 0;
    border: 1px solid var(--bor-color);
    background-color: #fff;
}

.pop-res-tab__nav .tab-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.5px;
}

.pop-res-tab__nav .tab-nav>li {
    flex: auto;
    max-width: 20%;
    min-width: 20%;
    padding: 2.5px 1.5px;
}

.pop-res-tab__nav .tab-nav>li button {
    width: 100%;
    height: 30px;
    font-size: 10px;
    color: #fff;
    border-radius: 5px;
    background-color: var(--color-base);
}

.pop-res-tab__nav .tab-nav>li.active button {
    background-color: var(--font-color-base);
}

.pop-res-tab__cont .tab-list>li {
    display: none;
}

.pop-res-tab__cont .tab-list>li.active {
    display: block;
}

.tab-list__cont__header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 67px;
    margin-top: 15px;
}

.tab-list__cont__header.type-row .type-row__col {
    display: flex;
    align-items: center;
}

.tab-list__cont__header:not(.type-row) .addBtn {
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
}

.tab-list__cont__header .type-row__col .tabType {
    margin-right: 10px;
}

.tab-list__cont__header .tabType1>ul>li a {
    min-width: 80px;
    font-size: 10px;
    border-radius: 15px;
    border: 1px solid var(--color-base);
    background-color: transparent;
}

.tab-list__cont__header .tabType1>ul>li.current a {
    background-color: var(--color-base);
}


.tab-list__cont__body {
    height: calc(100% - 67px - 15px);
}

.tab-list__cont__body.scroll-box-y {
    padding-right: 5px;
}

.tab-list__cont__body__area.r-box {
    padding: 20px 0;
    margin-bottom: 10px;
}

.tab-list__cont__header .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
}

.tab-list__cont__header .icon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
    background-color: var(--color-base);
}

.tab-list__cont__header .icon svg {
    width: 18px;
    height: 19px;
    z-index: 2;
}

.tab-list__cont__header .icon svg path {
    fill: var(--color-base);
}

.tab-list__cont__header h4 {
    font-size: 14px;
    font-weight: 700;
}

/* 탭 table내 input,select,textarea */
.pop-table-wrap table {
    width: 100%;
    table-layout: fixed;
}
/* 
.pop-table-wrap table *:not(.reservation__left * ) {
    font-size: 10px;
} */

.tab-list__cont__body__area__header {
    border-bottom: 1px solid var(--bor-color);
    padding-bottom: 10px;
}

.tab-list__cont__body__area__header select,
.tab-list__cont__body__area__header input {
    font-size: 10px;
}

.tab-list__cont__body__area__header .pop-close {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -9999px;
    background: url('../img/icons/ico_close.svg') no-repeat center/12px auto;
    -webkit-transition: linear 0.3s;
    transition: linear 0.3s;
}

.pop-table-wrap .tab_table_dep1 td {
    font-size: 10px;
}

.pop-table-wrap .tab_table_dep1>tbody>tr>td {
    padding: 8px 0;
}

.pop-table-wrap .tab_table_dep2 {
    width: calc(100% + 10px);
    margin: 0 -5px;
}

.pop-table-wrap .tab_table_dep2 td {
    padding: 0 5px;
}

.pop-table-wrap .tab_table_dep_list tr {
    border-bottom: 1px solid var(--color-gray2);
}

.pop-table-wrap .tab_table_dep_list td {
    height: 30px;
    padding: 0 5px;
    vertical-align: middle;
    background-color: #fff;
}

.pop-table-wrap .tab_table_dep_list td.cancel {
    background-color: #ccc;
}

.pop-table-wrap td .td_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    vertical-align: top;
}
.pop-table-wrap td .td_row.date-sel-set input[type="text"],
.pop-table-wrap td .td_row.date-sel-set input[type="search"] {
    width: calc(60% - 5px);
    margin-right: 5px;
}
.pop-table-wrap td .td_row.date-sel-set select {
    width: 40%;
}

.pop-table-wrap td .td_row>.tit {
    padding-left: 10px;
}

.pop-table-wrap td .td_row.ea_2>* {
    width: calc(50% - 3px);
    vertical-align: top;
    margin-right: 6px;
}

.pop-table-wrap td .td_row.ea_2>*:last-child {
    margin-right: 0;
}

.pop-table-wrap td .td_row.ea_3>* {
    width: calc(33.333% - 4px);
    vertical-align: top;
    margin-right: 6px;
}

.pop-table-wrap td .td_row.ea_3>*:last-child {
    margin-right: 0;
}

.pop-table-wrap td .td_row .v-bar {
    position: relative;
    margin-left: -1px;
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

/* 키/몸무게 */
.ct_hw_area {
    position: relative;
}

.ct_hw_area input {
    padding-right: 25px;
}

.ct_hw_area .ct_hw_area_label {
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 30px;
    font-size: 10px;
}

/* radio */
.pop-table-wrap input[type='radio']+label {
    padding-left: 20px;
    line-height: 17px;
}

.pop-table-wrap input[type='radio']+label:before {
    width: 17px;
    height: 17px;
}

.pop-table-wrap input[type='radio']+label:after {
    top: 4px;
    left: 4px;
    width: 9px;
    height: 9px;
}

.pop-table-wrap textarea {
    height: 74px;
}

.pop-table-wrap input[type='text'],
.pop-table-wrap input[type='search'],
.pop-table-wrap input[type='date'],
.pop-table-wrap select,
.pop-table-wrap textarea {
    width: 100%;
    border-radius: 0;
}

.pop-table-wrap select {
    background-size: 14px auto;
}

.pop-table-wrap input[type='text']:not(:focus),
.pop-table-wrap input[type='search']:not(:focus),
.pop-table-wrap input[type='date']:not(:focus-within),
.pop-table-wrap select:not(:focus),
.pop-table-wrap textarea:not(:focus) {
    border-color: #fff;
}

.pop-table-wrap table .tab_table_tit {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 5px;
}

.pop-table-wrap table .tab_table_tit.required {
    color: #e84809;
}

.pop-table-wrap table .tab_table_tit.required:after {
    content: '*';
    display: inline-block;
    font-size: 12px;
    margin-top: -3px;
    vertical-align: middle;
}

.pop-table-wrap table td .sel_time-set {
    width: 100%;
    font-size: 0;
}

.pop-table-wrap table td.td_time-set select {
    width: calc(50% - 2.5px);
}

.pop-table-wrap table td.td_time-set select+select {
    margin-left: 5px;
}

/* toggle switch checkbox */
.switch-checkbox {
    width: 100%;
}

.switch-checkbox .switch {
    position: relative;
    display: inline-block;
    width: 124px;
    height: 30px;
    padding: 1px;
    cursor: pointer;
}

.switch-checkbox .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-checkbox .switch .r-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    cursor: pointer;
}

.switch-checkbox .switch .r-slider:before {
    position: absolute;
    content: '';
    height: 26px;
    width: 60px;
    left: 2px;
    bottom: 2px;
    border-radius: 13px;
    background-color: #f29d86;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.switch-checkbox .switch .txt {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    line-height: 30px;
    text-align: center;
    color: var(--font-color-base);
}

.switch-checkbox .switch .txt.gender-x {
    left: 0;
    color: #fff;
}

.switch-checkbox .switch .txt.gender-y {
    right: 0;
}

/* checked 남자로 체크 */
.switch-checkbox input[type='checkbox']:checked+.r-slider:before {
    background-color: #2196f3;
}

.switch-checkbox input[type='checkbox']:checked~.gender-x {
    color: var(--font-color-base);
}

.switch-checkbox input[type='checkbox']:checked~.gender-y {
    color: #fff;
}

.switch-checkbox input[type='checkbox']:checked+.r-slider:before {
    -webkit-transform: translateX(60px);
    -ms-transform: translateX(60px);
    transform: translateX(60px);
}

.post-box .tab_table_tit {
    position: relative;
}

.post-box .plus-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 17px;
    line-height: 0;
    text-align: right;
    font-size: 22px;
    background-color: transparent;
}

.post-box #address {
    margin-bottom: 2px;
}

/**
 탭 예약 
**/

/* 진료서비스 리스트 */
ul.data-list {}

ul.data-list li.data-item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 10px;
    height: 30px;
    padding: 0 30px 0 10px;
    margin-top: 5px;
    background-color: #fff;
}
ul.data-list li.data-item .data-item__cell_01 {
    width: 30%;
}
ul.data-list li.data-item .data-item__cell_02 {
    width: 70%;
}

ul.data-list li.data-item .data-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
}

.data-delete-btn {
    width: 30px;
    height: 30px;
    background: url('../img/icons/ico_close.svg') no-repeat center / 12px auto;
}

/* 탭 예약 수정 */
/* 검색창 */
.search_input_box.type_tab {
    height: 30px;
}

.search_input_box.type_tab:before {
    display: none;
}

.search_input_box.type_tab input {
    height: 100%;
    padding-right: 40px;
}

.search_input_box.type_tab .search_btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
}

.search_input_box.type_tab .search_btn svg {
    width: 17px;
}

/* 탭예약 리스트 */
.tabCont__list .card-item {
    position: relative;
    display: table;
    width: 100%;
    height: auto;
    padding: 20px 0;
    border: 1px solid var(--bor-color);
    border-radius: 10px;
    margin-top: 10px;
}

.tabCont__list .card-item:first-of-type {
    margin-top: 0;
}

.tabCont__list .card-item .card-header,
.tabCont__list .card-item .card-body {
    display: table-cell;
    vertical-align: middle;
}

.tabCont__list .card-item .card-header {
    width: 125px;
    height: 100%;
    text-align: center;
    padding: 0 10px;
}

.tabCont__list .card-item .card-header p {
    font-weight: 700;
}

.tabCont__list .card-item .card-header p span:not(.h-label) {
    display: block;
}

.tabCont__list .card-item .card-header p .visit_date {
    font-size: 10px;
    font-weight: 400;
    margin-top: 5px;
}

.tabCont__list .card-item .card-body {
    position: relative;
    width: calc(100% - 120px);
    padding: 0 20px;
}

.tabCont__list .card-item .card-body:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--bor-color);
}

.tabCont__list .card-item .card-body ul.bullet_ul2 li {
    display: block;
    margin-right: 0;
}

.tabCont__list .card-item .editBtn {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
}


.tabCont__list .card-item .deleteBtn {
    position: absolute;
    right: 45px;
    top: 15px;
    width: 30px; 
    height: 30px; 
    border-radius: 50%;
    background-image: url('../img/icons/ico_delete.svg');
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 18px;
    background-position: center 3px;
}

.tabCont__list li.active {
    display: block;
}

.tabCont__list li.active .tab-list__cont__body__area.r-box {
    display: block;
}

.tab-list__cont__body__area.r-box {
    display: none;
}

.tab-list__cont__body__area.r-box.active {
    display: block !important;
}

/* 진료서비스 검색 창 */
.service_search_wrap {
    position: relative;
}

.dirTabList.disabled .tabCont_search_input,
.dirTabList.disabled .data-item {
background-color: #ddd;
}

.dirTabList.disabled .search_input_box.type_tab {
    display: none;
}

.service_search_box1 {}

.service_search_box2 .service_search_box__list {
    display: block;
    height: 280px;
    overflow-y: auto;
}

.service_search_pop {
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    background-color: #fff;
    z-index: 5;
}

.service_search_pop .service_search_box__container {
    position: relative;
    height: 300px;
}

.service_search_box__body {
    height: 100%;
    padding: 10px;
    background-color: #fff;
    -webkit-box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}


.mtv_select_box .mtv_select_box__list {
    display: block;
    height: 280px;
    overflow-y: auto;
}

.service_search_pop {
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    background-color: #fff;
    z-index: 5;
}

.service_search_pop .mtv_select_box__container {
    position: relative;
    height: 200px;
}

.mtv_select_box__body {
    height: 100%;
    padding: 10px;
    background-color: #fff;
    -webkit-box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.mtv_select_box__row ul{
    float: left; width: 40%; height: 100%; overflow: hidden; overflow-y: auto;
}

.mtv_select_box__row ol{
    float: left; width: 60%; height: 100%; padding-left: 10px; overflow: hidden; overflow-y: auto;
}

.mtv_select_box__row ul li, .mtv_select_box__row ol li{
    height: 30px; text-align: center; align-content: center; margin-bottom: 1px; border-radius: 10px; background-color: var(--color-gray2);
}

.mtv_select_box__row li.active{
    background-color: black;
    color: white;
}

.service_search_pop .close-btn {
    position: absolute;
    right: 0;
    top: 100%;
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    background: #fff url('../img/icons/ico_close.svg') no-repeat center / 17px auto;
    /* -webkit-box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);
    box-shadow: 9px 16px 32px rgba(0, 0, 0, 0.08);*/
}

.service_search_box__row {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

.service_search_box__list {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: calc(100% - 130px);
}

.service_search_box__result {
    position: relative;
    width: 120px;
    margin-left: 10px;
}

.service_search_box__result .service_search_box__result__area {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    overflow-y: auto;
}

.service_search_box__result .pop-table-wrap td {
    padding-bottom: 10px;
}

.service_search_box__result .pop-table-wrap input[type='text'],
.service_search_box__result .pop-table-wrap input[type='search'],
.service_search_box__result .pop-table-wrap select,
.service_search_box__result .pop-table-wrap textarea {
    background-color: var(--color-gray2);
}

.service_search_box__result .pop-table-wrap input[type='text']:not(:focus),
.service_search_box__result .pop-table-wrap input[type='search']:not(:focus),
.service_search_box__result .pop-table-wrap select:not(:focus),
.service_search_box__result .pop-table-wrap textarea:not(:focus) {
    border-color: var(--color-gray2);
}

.tab-vertical-wrap .tab-vertical-nav {
    width: 100px;
    overflow-y: auto;
}

.tab-vertical-wrap .tab-vertical-nav>ul>li+li {
    margin-top: 1px;
}

.tab-vertical-wrap .tab-vertical-nav>ul>li button {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    background-color: var(--color-gray2);
}

.tab-vertical-wrap .tab-vertical-nav>ul>li.active button {
    color: #fff;
    background-color: var(--font-color-base);
}

.tab-vertical-wrap .tab-vertical-cont {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 100px);
    height: 100%;
    padding-left: 10px;
}

.tab-vertical-wrap .tab-vertical-cont>ul {
    height: 100%;
}

.tab-vertical-wrap .tab-vertical-cont>ul>li {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.tab-vertical-wrap .tab-vertical-cont>ul>li.active {
    display: block;
}

table.service_table_list tr {
    border-bottom: 1px solid #fff;
}

table.service_table_list tr td {
    padding: 3px 10px !important;
    background-color: var(--color-gray2);
}

table.service_table_list tbody tr.active td,
table.service_table_list tbody tr:hover td,
table.service_table_list tbody tr:active td {
    color: #fff;
    background-color: var(--font-color-base);
}

/* 수납 */
/* 할인/환불 팝업 */
.purchase_discount_refund__area {
    position: relative;
}

.purchase_discount_refund__area .pop-wrap {
    /*bottom: calc(100% + 5px);*/
    width: 100%;
}
/*
.purchase_discount_refund__area .pop-wrap .pop-container {
    border: 0;
}*/

.purchase_discount_refund__area .pop-wrap .pop-box {
    width: 100%;
    padding: 15px 25px;
}

.purchase_discount_refund__area .pop-container .pop-header {
    margin-bottom: 15px;
}

.purchase_discount_refund__area .pop-container .pop-header h3 {
    font-size: 12px;
}

.purchase_discount_refund__area .pop-container .pop-body {
    border-top: 1px solid var(--bor-color);
    padding-bottom: 0;
}

.purchase_discount_refund__area .pop-container .pop-btn {
    justify-content: flex-end;
}

.purchase_discount_refund__area .pop-container .pop-btn .btn-confirm {
    width: 110px;
    flex: inherit;
}

/* 팝업 테이블 */
.purchase_discount_refund__area .discount-refund_table {}

.purchase_discount_refund__area .discount-refund_table>tbody>tr>td {
    padding-top: 7px;
}

/* radio */
.purchase_discount_refund__area .discount-refund_table tr.tr_radio input[type='radio']+label {
    margin-right: 30px;
}

.discount-refund_table .discount_input_box {
    width: 140px;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.discount-refund_table .discount_input_box input[type="text"],
.discount-refund_table .discount_input_box input[type="search"] {
    width: 100px;
}

.discount-refund_table .discount_input_box .discount_btn {
    width: 40px;
    height: 30px;
    color: #fff;
    background-color: var(--color-base);
}

.purchase_discount_refund__area .tab_table_dep_list tr.active td {
    background-color: antiquewhite;
}

.purchase_discount_refund__area .tab_table_dep_list tr {
    border-bottom: 1px solid #fff;
}

.purchase_discount_refund__area .tab_table_dep_list td {
    padding: 3px 5px;
    background-color: var(--color-gray2);
}

.sunab_refund_div {
    display: flex;
    margin-top: 10px;
}

.sunab_refund_div>div {
    width: 40%; 
    padding: 30px; 
    background: var(--color-gray2);
}

.sunab_refund_table {
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-collapse: collapse;
}

.sunab_refund_table thead {
    height: 30px;
}

.sunab_refund_table th, .sunab_refund_table td {
    border: 1px solid #ccc;
}

.sunab_refund_table tbody tr td {
    text-align: center;
}

.sunab_refund_table tbody tr td input[type="text"],
.sunab_refund_table tbody tr td input[type="search"] {
    text-align: center;
    background-color: #fff;
}

.sunab_refund_table tbody tr:nth-child(2) td input[type="text"], .sunab_refund_table tbody tr:nth-child(4) td input[type="text"],
.sunab_refund_table tbody tr:nth-child(2) td input[type="search"], .sunab_refund_table tbody tr:nth-child(4) td input[type="search"] {
    background-color: var(--color-gray2);
}


.sunab_refund_table tbody tr:nth-child(2), .sunab_refund_table tbody tr:nth-child(4){
    background-color: var(--color-gray2);
}

.sunab_refund_div .discount-refund_table {
    width: 60%; 
    margin-left: 20px; 
    height: 0;
}

.sunab_refund_div .discount-refund_table>tbody>tr:nth-child(1)>td {
    padding-top: 0;
}

/* total */
.purchase_discount_refund__area .discount-refund_table tr.tr_total_amount {}

.purchase_discount_refund__area .discount-refund_table tr.tr_total_amount dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    height: 36px;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_total_amount dl dt,
.purchase_discount_refund__area .discount-refund_table tr.tr_total_amount dl dd {
    padding: 0 10px;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_total_amount dl dt {
    width: 30%;
    font-weight: 700;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_total_amount dl dd {
    width: 70%;
    text-align: right;
}

/* 등록자 */
.purchase_discount_refund__area .discount-refund_table tr.tr_registration dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    padding: 7px 0;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_registration .td_row.bg_gray2>p,
.purchase_discount_refund__area .discount-refund_table tr.tr_registration dl dt,
.purchase_discount_refund__area .discount-refund_table tr.tr_registration dl dd {
    padding: 0 10px;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type dl dt,
.purchase_discount_refund__area .discount-refund_table tr.tr_registration dl dt {
    width: 30%;
    font-weight: 700;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type dl dd, 
.purchase_discount_refund__area .discount-refund_table tr.tr_registration dl dd {
    width: 70%;
}

.purchase_discount_refund__area .discount-refund_table .td_row .bg_gray2 select {
    background-color: #fff;
}

.purchase_discount_refund__area .discount-refund_table .td_row .bg_gray2 input.date_pick {
    background-color: #fff;
}

/* 환불방식 */
.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type dl {
    display: flex;
    align-items: center;
    height: 36px;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type dl dt,
.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type dl dd {
    padding: 0 10px;
}

.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type dl dt {
    font-weight: 700;

}

.purchase_discount_refund__area .discount-refund_table tr.tr_refund_type input[type='radio']+label {
    margin-right: 30px;
}

/* table */
.pop-table-wrap .tab_table_dep2.purchase_table>tbody>tr>td {
    padding-bottom: 3px;
}

.pop-table-wrap .tab_table_dep_list.purchase_table {}

/* 회차 */
/* 탭하위 탭 */
.cateTabBtn .cateTabBtnArea,
.cateTabConts .cateTabContsArea {
    display: none;
}

.cateTabBtn .cateTabBtnArea:first-of-type,
.cateTabConts .cateTabContsArea:first-of-type {
    display: block;
}
.cateTabConts.scroll-wrap {
    height: calc(100% - 30px); /* tab nav height 30px */
}
.cateTabConts .scroll-box-y {
    padding-right: 5px;
}
.cateTabConts.scroll-wrap .scroll-box-y {
    height: 100%;
}

.cateTabConts.h100 .cateTabContsArea,
.cateTabConts.h100 .tab-list__cont__body__area.r-box,
.cateTabConts.h100 .inner,
.cateTabConts.h100 .tabCont05RemainingRounds,
.cateTabConts.h100 .table_tbody {
    height: 100%;
}
.cateTabConts.h100 .scroll-box-y {
    overflow-y: auto;
}
/* 기본 테이블 */
.table_basic_st:not(.inv_table)>tbody>tr>td,
.table_basic_st:not(.inv_table)>thead>tr>th,
.table_basic_st:not(.inv_table)>thead>tr>td {
    font-size: 10px;
    text-align: center;
    border: 1px solid var(--bor-color);
    height: 30px;
    padding: 0.5em 0.35em;
    vertical-align: middle;
    background-color: #fff;
}

.table_basic_st>tbody>tr>th {
    font-size: 10px;
    text-align: center;
    border: 1px solid var(--bor-color);
    height: 30px;
    padding: 0.5em 0.35em;
    vertical-align: middle;
    background-color: aliceblue;
}


.table_basic_st>tbody>tr>td {
    padding: 0.5em 0.8em;
}

.table_basic_st>thead>tr>th,
.table_basic_st>thead>tr>td {
    font-weight: 700;
}
.table_basic_st.bor-no>thead>tr {
    border-bottom: 1px solid var(--bor-color);
}
.table_basic_st.bor-no>tbody>tr>td,
.table_basic_st.bor-no>thead>tr>td {
    border: 0;
}

.table_basic_st .data-delete-btn {
    width: 15px;
    height: 15px;
}

.table-thead-sticky thead tr th {
    position: sticky;
    top: 0;
    border-bottom: 0;
    z-index: 5;
}

.table-thead-sticky thead tr th:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid #ddd;
}

.table-thead-sticky {
    position: relative;
}
/*
.table-thead-sticky thead tr th {
    position: sticky;
	top: 0;
    border-bottom: 0;
    box-shadow: inset 0 -1px var(--bor-color);
    -webkit-box-shadow: inset 0 -1px var(--bor-color);
    z-index: 2;
}
/*
.table-head-fixed thead tr th:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--bor-color);
}
*/
.table-thead-sticky thead tr th.th_color1 {
    background-color: #deebfb;
}
/*.table-thead-sticky thead tr th.th_color1:before {
    background: var(--bor-color2);
}*/
/*
.table-thead-sticky tbody {
    position: relative;
    top: -1px;
}*/
.table-thead-sticky tr th {
    font-weight: 700;
}
.table-thead-sticky tr th,
.table-thead-sticky tr td {
    font-size: 12px;
    padding: 5px 10px;
    height: 40px;
    vertical-align: middle;
    background-color: #fff;
}

.table-thead-sticky tr.disabled th,
.table-thead-sticky tr.disabled td {
    color: #ccc;
    background-color: var(--color-gray2);
}

/* 배경색 포함 */

.table_basic_st.bg_gray2>tbody>tr>td,
.table_basic_st.bg_gray2>thead>tr>td {
    border-color: var(--color-gray);
    background-color: var(--color-gray2);
}
/* 잔여회차 */
/* table check list */
.data-check-list tr.data-check-item {
    cursor: pointer;
}

.data-check-list tr.data-check-item .chk input[type="checkbox"]+label {
    display: block;
}

.noHoeCha {
    color:darkgray;
}

/*
.data-check-list tr.data-check-item .chk input[type="checkbox"]+label:before {
    background-color: transparent;
}

.data-check-list tr.data-check-item .chk input[type='checkbox']:checked+label:before {
    color: #fff;
    border-color: #fff;
}
*/

/* 체크박스 체크된 tr */
.data-check-list tr.data-check-item.selected td {
    color: #fff;
    background-color: var(--color-base);
}

.tabCont05RemainingRounds.on tr.data-check-item:not(.selected) td {
    background-color: var(--color-gray2);
}

/* 잔여회차 체크리스트 */

.tabCont05RemainingRounds tr.last-selected+tr.useTr {
    display: none;
}

.tabCont05RemainingRounds tr.last-selected+tr.useTr>td {
    height: 0;
    padding: 0;
    text-align: left;
}

.tabCont05RemainingRounds>.use-single-box,
.tabCont05RemainingRounds>.use-multi-box {
    display: none;
}

.tabCont05RemainingRounds .use-box .tab-list__cont__body__area {
    padding: 10px 0;
}

.tabCont05RemainingRounds .use-box input[type="text"],
.tabCont05RemainingRounds .use-box input[type="search"],
.tabCont05RemainingRounds .use-box select,
.tabCont05RemainingRounds .use-box textarea {
    background-color: var(--color-gray2);
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item {
    border-top: 7px solid #fff;
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item input[type="text"],
.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item input[type="search"],
.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item select,
.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item textarea {
    background-color: #fff;
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item>td {
    padding: 7px 10px;
    background-color: var(--color-gray2);
    vertical-align: middle;
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item ul.td_row {
    width: 100%;
    margin-top: -7px;
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item ul.td_row>li {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 7px;
    margin-top: 7px;
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item ul.td_row>li>p {
    width: 35%;
    padding-right: 7px;
}

.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item ul.td_row>li>input,
.tabCont05RemainingRounds .use-multi-box .data-list tr.data-item ul.td_row>li>select {
    width: 65%;
}

#tabCont05 .tab-list__cont__body__area.r-box,
#tabCont05_2 .tab-list__cont__body__area.r-box {margin-bottom: 0;}
.table-thead-fixed {}
.table-thead-fixed.over .table_thead {
    padding-right: 10px;
}
.table-thead-fixed .table_thead table {
    position: relative;
    border-bottom: 1px solid var(--bor-color);
    z-index: 1;
}
.table-thead-fixed .table_thead tr td {
    border-bottom: 0;
}

.table-thead-fixed .table_tbody {
    margin-top: -1px;
}

.table-thead-fixed .table_tbody {
    overflow-y: auto;
}

#tabCont05_2 .tabCont05History .data-delete-btn,
#tabCont05 .tabCont05History .data-delete-btn {
    width: 15px;
    height: 15px;
}
/* 펜차트 */
/* 검색 */
.tabCont06-search-box .search_input_box {
    width: 174px;
    height: 30px;
    margin-right: 10px;
}

.tabCont06-search-box .search_input_box:before {
    display: none;
}

.tabCont06-search-box .search_input_box input {
    padding-right: 35px;
    background-color: var(--color-gray2);
}

.tabCont06-search-box .search_input_box .search_btn {
    position: absolute;
    top: 0;
    right: 0;
}

.tabCont06-search-box .search_input_box .search_btn svg {
    height: 60%;
}

/* 탭 */
#cate06Tab>ul>li a {
    border-radius: 10px;
    color: #fff;
    border: 0;
    background-color: var(--color-base);
}

#cate06Tab>ul>li.current a {
    background-color: var(--font-color-base);
}

/* 마일리지 / 선불금 */
#tabCont07_2 .tab-list__cont__col .tab-list__cont__body,
#tabCont07 .tab-list__cont__col .tab-list__cont__body {
    position: relative;
}

#tabCont07_2 .tab-list__cont__body__area,
#tabCont07 .tab-list__cont__body__area {
    height: 100%;
}

#tabCont07_2 .total-mileage,
#tabCont07 .total-mileage {
    padding-bottom: 5px;
}
#tabCont07_2 .total-mileage dl,
#tabCont07 .total-mileage dl {
    border-radius: 10px;
    height: 30px;
    padding: 0 20px;
    font-size: 10px;
    font-weight: 700;
    background-color: var(--color-gray2);
}
#tabCont07_2 .total-mileage dl dd,
#tabCont07 .total-mileage dl dd {
    color: #E84809;
}

#tabCont07_2 .total-prepayment,
#tabCont07 .total-prepayment {
    padding-bottom: 5px;
}
#tabCont07_2 .total-prepayment dl,
#tabCont07 .total-prepayment dl {
    border-radius: 10px;
    height: 30px;
    padding: 0 20px;
    font-size: 10px;
    font-weight: 700;
    background-color: var(--color-gray2);
}
#tabCont07_2 .total-prepayment dl dd,
#tabCont07 .total-prepayment dl dd {
    color: #E84809;
}

#tabCont07_2-list.tabCont__list,
#tabCont07-list.tabCont__list {
    height: calc(100% - 35px); /* total mileage 높이만큼 제외 */
}
#tabCont07_2-list.tabCont__list .card-item,
#tabCont07-list.tabCont__list .card-item {
    display: block;
    padding: 0 20px;
    margin-top: 5px;
}
#tabCont07_2-list.tabCont__list .card-item .card-header,
#tabCont07_2-list.tabCont__list .card-item .card-body,
#tabCont07-list.tabCont__list .card-item .card-header,
#tabCont07-list.tabCont__list .card-item .card-body {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    padding: 15px 0;
}
#tabCont07_2-list .h-label,
#tabCont07-list .h-label {
    font-size: 10px;
}
#tabCont07_2-list .h-label.bg_gray,
#tabCont07-list .h-label.bg_gray {
    color: var(--font-color-base);
}

#tabCont07_2-list.tabCont__list .card-item .card-body,
#tabCont07-list.tabCont__list .card-item .card-body {
    font-size: 10px;
    border-top: 1px solid var(--bor-color);
}
#tabCont07_2-list.tabCont__list .card-item .card-body:before,
#tabCont07-list.tabCont__list .card-item .card-body:before {
    display: none;
}
/* 마일리지 수동등록 팝업 / 선불금 팝업 */
#prepaymentPop2 .pop-box,
#mileagePop2 .pop-box,
#prepaymentPop .pop-box,
#mileagePop .pop-box {
    width: 285px;
}

/* 검색 */
.tabCont07-search-box .search_input_box {
    width: 100%;
    height: 30px;
    margin-right: 10px;
}

.tabCont07-search-box .search_input_box:before {
    display: none;
}

.tabCont07-search-box .search_input_box input {
    padding-right: 35px;
    background-color: var(--color-gray2);
}

.tabCont07-search-box .search_input_box .search_btn {
    position: absolute;
    top: 0;
    right: 0;
}

.tabCont07-search-box .search_input_box .search_btn svg {
    height: 60%;
}

/* 소개고객 */

/* 소개고객 리스트 */
#tabCont09_2-list.tabCont__list,
#tabCont09-list.tabCont__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -5px;
}
#tabCont09_2-list.tabCont__list .card-item,
#tabCont09-list.tabCont__list .card-item {
    display: inline-block;
    width: calc(50% - 10px);
    margin: 5px;
    padding: 0 20px;
}
#tabCont09_2-list.tabCont__list .card-item .card-header,
#tabCont09_2-list.tabCont__list .card-item .card-body,
#tabCont09-list.tabCont__list .card-item .card-header,
#tabCont09-list.tabCont__list .card-item .card-body {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    padding: 15px 0;
}
#tabCont09_2-list .h-label,
#tabCont09_2-list .h-label {
    font-size: 10px;
}
#tabCont09_2-list .h-label.bg_gray,
#tabCont09_2-list .h-label.bg_gray {
    color: var(--font-color-base);
}

#tabCont09_2-list.tabCont__list .card-item .card-body:before,
#tabCont09-list.tabCont__list .card-item .card-body:before {
    display: none;
}

#tabCont09_2-list.tabCont__list .card-item .detailBtn,
#tabCont09-list.tabCont__list .card-item .detailBtn {
    position: absolute;
    top: 10px;
    right: 20px;
}



/* 설문지 */
#tabCont15_2-list.tabCont__list,
#tabCont15-list.tabCont__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -5px;
}

#tabCont15_2-list.tabCont__list .card-item,
#tabCont15-list.tabCont__list .card-item {
    display: inline-block;
    width: calc(50% - 10px);  /* 2칸 유지 */
    margin: 5px;
    padding: 15px 20px;       /* 카드 내부 여백 */
    position: relative;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    vertical-align: top;
}

#tabCont15_2-list.tabCont__list .survey-item{
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    padding: 5px 0;   /* 간격 줄임 */
    margin:0 5px;
    list-style: disc;
}

#tabCont15_2-list.tabCont__list .survey-item::before {
  content: "•";       /* disc */
  position: absolute;
  left: 7px;
  color: black;       /* 원 색상 */
  font-size: 16px;    /* 원 크기 */
  line-height: 1;
}

#tabCont15_2-list.tabCont__list .card-item .detailBtn,
#tabCont15-list.tabCont__list .card-item .detailBtn {
    position: absolute;
    top: 25px;
    right: 20px;
}


/* 응대정보 */
#tabCont10_2 .service_search_box__list,
#tabCont10 .service_search_box__list {
    width: 100%;
}

/** 
board 
**/
/* paging */
.board-paging{margin:15px 0 0;text-align:center;font-size:0;line-height:0;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;align-items:center;justify-content:center}
.board-paging li,.board-paging ol{display:inline-block;vertical-align:top}
.board-paging li{overflow:hidden;position:relative;margin-left:-1px; padding: 0 2px;}
.board-paging li>a{display:inline-block;width:25px;height:25px;border:0;border-radius: 50%; font-size:10px; font-weight: 400;line-height:25px;color:var(--font-color-base);}
/*
.board-paging li.on,.board-paging li:hover{z-index:111}
*/
.board-paging li.on>a,.board-paging li:hover>a{background-color:var(--color-base); border:1px solid var(--color-base);color:#fff}
.board-paging .paging-btn-next,.board-paging .paging-btn-last,.board-paging .paging-btn-first,.board-paging .paging-btn-prev{display:block;width:25px;height:25px;border:none;margin-left:-1px}
.board-paging .paging-btn-last,.board-paging .paging-btn-next{border-left:none}
.board-paging .paging-btn-prev,.board-paging .paging-btn-first{border-right:none}
.board-paging .paging-btn-last{border-top-right-radius:3px;border-bottom-right-radius:3px}
.board-paging .paging-btn-first{border-top-left-radius:3px;border-bottom-left-radius:3px}
.board-paging .paging-btn-next{background:url('../img/common/paging-next-off.svg') no-repeat center center}
.board-paging .paging-btn-last{background:url('../img/common/paging-last-off.svg') no-repeat center center}
.board-paging .paging-btn-first{background:url('../img/common/paging-first-off.svg') no-repeat center center}
.board-paging .paging-btn-prev{background:url('../img/common/paging-prev-off.svg') no-repeat center center}



.board-wrap {
    padding-top: 20px;
}
.board-wrap .total-count {}
.board-wrap .board-search {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}
.tabCont06-search-wrap {
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.board-wrap .search_select_box {
    width: 95px;
    margin-right: 5px;
}
.board-wrap .search_input_box {
    width: calc(100% - 100px);
    margin-right: 0;
}

.board-wrap .board-gallery-list {
    margin: -15px -2.5px 0;
}
.board-wrap .board-gallery-list > ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;   
    /* padding: 10px 0;  */
}
.board-wrap .board-gallery-list > ul > li {
    width: 25%;
    padding: 0 2.5px;
    margin-top: 15px;
}

.board-wrap .board-gallery-list .item.selected .img-wrap:before {
    opacity: 1;
}

.board-gallery-list .gallery-item-box {
    cursor: pointer;
}

.board-gallery-list .gallery-title span,
.board-gallery-list .gallery-title input[type='checkbox'] + label {
    display: block;
    width: calc(100% - 12px);
    font-weight: 700;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-gallery-list .gallery-title input[type='checkbox'] + label:before {
    top: 3px;
}

.board-gallery-list .img-wrap {
    position: relative;
    border-radius: 10px;
    padding: 7px;
    background-color: var(--color-gray2);
}
.board-gallery-list .img-wrap:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid var(--color-base);
    opacity: 0;
    transition: all .2s;
    -webkit-transition: all .2s;
}
.board-gallery-list .page-count {
    position: absolute;
    top: 7px;
    right: 10px;
    width: 12px;
    height: 12px;
    line-height: 10px;
    text-align: center;
    border: 1px solid #000;
    background: #fff;
    z-index: 10;
}
.board-gallery-list .page-count:before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 0 1px 1px 0;
}
.board-gallery-list .img-wrap .img-thumb-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.board-gallery-list .img-wrap .img-thumb-wrap img {
    position: absolute;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .3s;
}

/* 펜차트 리스트 */
.board-wrap .board-gallery-list.penchart-list {}

.penchartPop,
.imgComparePop,
.imgEditPop,
.imgUploadPop,
.currencyCalculatorPop {
    /*
    bottom: 10px;
    left: auto;
    right: 0;
    */
}

.pop_drag {
    transform: none;
}

.penchartPop .pop-container,
.imgComparePop .pop-container,
.imgEditPop .pop-container,
.imgUploadPop .pop-container,
.currencyCalculatorPop .pop-container {
    border-radius: 10px;
}

.penchartPop .pop-body,
.imgComparePop .pop-body,
.imgEditPop .pop-body,
.imgUploadPop .pop-body,
.currencyCalculatorPop .pop-body {
    border-top-color: var(--bor-color);
    padding-bottom: 0;
}

.penchartPop .pop-box {
    width: 624px;
}

.imgComparePop .pop-box {
    width: 1313px;
}

.imgUploadPop .pop-box {
    width: 450px;
}

.currencyCalculatorPop .pop-box {
    width: 800px;
}

.pop-foot {
    margin-top: 20px;
}

.board-wrap .board-gallery-list.penchart-temp-list {}


/* 이미지비교 팝업 갤러리 리스트 */
.board-wrap .board-gallery-list.penchart-compare-list {

}

.board-wrap .board-gallery-list.penchart-compare-list {
    margin: -20px -10px 0;
}

.board-wrap .board-gallery-list.penchart-compare-list > ul > li {
    width: 50%;
    padding: 0 10px;
    /* margin-top: 20px; */
}


.board-gallery-list .ico_image {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 12px;
    height: 12px;
    background: url('../img/icons/ico_penchart.svg') no-repeat center/ 12px auto;
    z-index: 10;
}


/* 아코디언 메뉴 */
.accordion-list .accordion-cont {
    display: none;
}

.accordion-list .accordion-item {
    border-radius: 10px;
    background-color: #fff;
}

.accordion-list .accordion-item+.accordion-item {
    margin-top: 10px;
}

.accordion-list .accordion-title {
    position: relative;
    padding: 15px 50px 15px 20px;
    background-repeat: no-repeat;
    background-size: 18px 9px;
    background-position: right 20px center;
    background-image: url('../img/icons/ico_arrow-down.svg');
    cursor: pointer;
}

.accordion-list .accordion-title.on {
    background-image: url('../img/icons/ico_arrow-up.svg');
}

.accordion-list .accordion-title p {
    font-weight: 800;
}

.accordion-list .accordion-cont table td {
    padding-bottom: 10px;
}

.accordion-list .accordion-cont table td.td_tit {
    vertical-align: top;
    padding-top: 3px;
}

.accordion-list .accordion-cont table td.td_txt {
    padding-left: 5px;
}

/* 고객등록창 */
#stRegistrationPop {
    position: absolute;
    top: calc(50% - 410px);
    left: calc(50% - 498px);
    z-index: 23;
}

/* 휴진팝업창 */
#rstTmePop {
    position: absolute;
    top: calc(50% - 342px);
    left: calc(50% - 98px);
    z-index: 23;
}

/* 예약판 레이아웃 */
#rsvLayoutPop {
    position: absolute;
    top: calc(50% - 342px);
    left: calc(50% - 98px);
    z-index: 23;
}

/* 휴진팝업 */
#rstTmeEdit
{
    position: absolute;
    top: calc(50% - 290px);
    left: calc(50% - 98px);
    z-index: 23;
}

/* 고객등록 수정창 */
#stRegistrationEditPop {
    position: absolute;
    top: calc(50% - 342px);
    left: calc(50% - 498px);
    z-index: 24;
}

/* .pop2-wrap .pop2-body.pop-registration-body {
    padding-bottom: 20px;
} */

.pop-registration-container {
    position: relative;
    width: 996px;
    height: 90vh;
    /*max-height: 683px;*/
    max-height: 820px;
}

.pop-registration-container .r-box {
    border-radius: 10px;
    background-color: var(--color-gray2);
}

.not-drag-area {
    position: relative;
}

.pop-registration-container .pop-registration-body__form {}

.pop-registration-container .pop-registration-body__form__header {}

.pop-registration-container .pop-registration-body__form__header .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
}

.pop-registration-container .pop-registration-body__form__header .icon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
    background-color: var(--color-base);
}

.pop-registration-container .pop-registration-body__form__header .icon svg {
    width: 18px;
    z-index: 2;
}

.pop-registration-container .pop-registration-body__form__header .icon svg path {
    fill: var(--color-base);
}

.pop-registration-container .pop-registration-body__form__header .tit {
    display: flex;
    align-items: center;
}

.pop-registration-container .pop-registration-body__form__header .tit span {
    font-size: 14px;
    font-weight: 800;
}

.pop-registration-container .pop-registration-body__form__header select {
    font-size: 10px;
    background-color: var(--color-gray2);
}

.pop-registration-container .pop-registration-body__form__row {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 10px;
}

.pop-registration-container .pop-registration-body__form__col {}

.pop-registration-container .pop-registration-body__form__col .r-box {
    height: 100%;
    padding: 12px 0;
}

.pop-registration-container .pop-registration-body__form__col .r-box .inner {
    padding: 0 16px;
    /* 하위 테이블 td 여백만큼 줄여줌 */
}

.pop-registration-container .pop-registration-body__form__col.first {
    width: 35%;
    margin-right: 10px;
}

.pop-registration-container .pop-registration-body__form__col.second {
    width: calc(65% - 10px);
}

.pop-registration-container .pop-registration-body__form__col.inv_first {
    width: 70%;
    margin-right: 10px;
}

.pop-registration-container .pop-registration-body__form__col.inv_second {
    width: calc(30% - 10px);
}

.pop-registration-body__form .pop-table-wrap .tab_table_dep1>tbody>tr>td {
    padding-left: 4px;
    padding-right: 4px;
}

/* 고객 검색창 */
#searchPop {
    position: absolute;
    /*
  top: calc(5% + 28px);
  left: calc(50% - 303px);
  */
    top: calc(50% - 311px);
    left: calc(50% - 331px);
    z-index: 21;
}

/* 고객 검색창 */
#searchEmpPop {
    position: absolute;
    top: calc(50% - 220px);
    left: calc(50% - 331px);
    z-index: 21;
}

/* 업체 검색창 */
#searchVdnPop {
    position: absolute;
    top: calc(50% - 220px);
    left: calc(50% - 331px);
    z-index: 21;
}

#passportPop {
    position: absolute;
    top: calc(50% - 220px);
    left: calc(50% - 187px);
    z-index: 21;
}

.pop2-wrap .pop2-body.pop-search-body {
    padding-bottom: 20px;
}

.pop-search-container {
    position: relative;
    width: 663px;
    height: 90vh;
    max-height: 622px;
}

.pop-search-body__form {
    padding: 10px;
    background-color: var(--color-gray2);
}

.pop-search-body__form.r-box {
    border-radius: 10px;
}

.pop-search-body__form .pop-form-serach-area2 {
    display: flex;
    align-items: center;
}

.pop-search-body__form .pop-search_input_box {
    font-size: 0;
    width: calc(100% - 60px);
    padding-right: 10px;
}

.pop-search-body__form .pop-search_input_box input[type='text'],
.pop-search-body__form .pop-search_input_box input[type='search'] {
    display: inline-block;
    width: calc(50% - 2px);
    background-color: #fff;
    vertical-align: top;
    margin-right: 2px;
    margin-bottom: 2px;
    border-radius: 0;
}

.pop-search-body__form .pop-search_input_box input[type='text']:not(:focus),
.pop-search-body__form .pop-search_input_box input[type='search']:not(:focus) {
    border-color: #fff;
}

.pop-search-body__form .pop-search_btn {
    width: 60px;
    height: 92px;
    padding-top: 5px;
    border-radius: 10px;
    background-color: var(--color-base);
}

.pop-search-body__form .pop-search_btn svg {
    width: 30px;
}

.pop-search-body__form .pop-search_btn svg path {
    stroke: #fff;
}

.pop-search-body__list.scroll-box-y {
    height: calc(100% - 125px);
    padding-right: 5px;
    margin-top: 10px;
}

.pop-search-body__list>ul>li {}

.pop-search-body__list>ul>li+li {
    margin-top: 10px;
}

.pop-search-body__list>ul>li .item-box {
    position: relative;
    padding: 15px;
}

.pop-search-body__list .item-box.r-box {
    padding-right: 50px;
    border-radius: 10px;
    border: 1px solid var(--bor-color);
}

.pop-search-body__list>ul>li .item-box .selBtn {
    position: absolute;
    top: 15px;
    right: 15px;
}

.pop-search-body__list .item-box dl dt {
    margin-bottom: 10px;
}

.pop-search-body__list .item-box dl dt span {
    font-weight: 700;
    padding: 0 8px;
}

.pop-search-body__list .item-box dl dt .st_label {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border-radius: 5px;
    padding: 3px 10px;
}

.pop-search-body__list .st_no:before {}

.btnSortableActive {
    display: none;
}

/* 고객관리 */
/* layout */
.customer-layout-wrap {
    height: 100%;
}

.customer-layout-wrap .pop-layout-row .pop-layout-col.step1, 
.customer-layout-wrap .pop-layout-row .pop-layout-col.step2 {
    width: 380px;
}

.customer-layout-wrap .article_box_01 {
    height: 50px;
}

.customer-layout-wrap .article_box_02 {
    position: relative;
    height: 100%;
}

#customerWrap {}
#customerWrap .btn_wrap .btn {
    width: 110px;
    font-size: 10px;
}


#customerWrap.pop-reservation-container {
    width: 100%;
    height: 100%;
    max-height: none;
}
#customerWrap .inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

#customerWrap .pop-layout-row .pop-layout-col {
    padding: 15px;
    border-radius: 10px;
    background-color: #fff;
}

.customer-layout-wrap .control_form__col.col_02 .control_form__col__row__col {
    width: 370px;
}
.customer-layout-wrap .control_form__col.col_02 .control_form__col__row__col .form_customer_sel {
    width: 30%;
    height: 100%;
}

.customer-layout-wrap .control_form__col.col_02 .control_form__col__row__col .form_customer_sel:not(:focus) {
    border-color: #fff;
}

.customer-layout-wrap .control_form__col.col_02 .control_form__col__row__col .d_f>div.last {
    width: calc(70% - 5px);
}

.customer-layout-wrap .pop-customer-info-wrap {
    height: calc(100% - 65px);
}

#customerWrap .pop-res-tab__nav .tab-nav>li {
    max-width: calc(100% / 8);
    min-width: calc(100% / 8);
}

#customerWrap .pop-res-tab-wrap .pop-res-tab__nav {
    height: 88px;
}

#customerWrap .pop-res-tab-wrap .pop-res-tab__cont {
    height: calc(100% - 88px);
    /* nav 높이에 따라 cont 높이 변경 스크립트 처리
    .pop-res-tab-wrap(height) - .pop-res-tab__nav(height) = .pop-res-tab__cont(height)
    */
}


/* 통계관리 */
.statistics-layout-row {
    background-color: #fff;
    margin-top:10px;
    border-radius: 10px;
    display: flex;
    padding:20px 10px;
}

.statistics-layout-row.statistics-step1 {
    height:10%;
    align-items: center;  /* 세로 가운데 정렬 */
    position:relative;
}

.setting-tab__cont .sub-box {
    display: flex;
    gap:5px;
    height: 30px;
    right: 0px;
    top: -40px;
}

.setting-tab__cont .sub-box .sub-item {
    line-height: 30px;
    border-radius: 20px; 
    padding:0 10px;
    text-align: center;
    background-color: var(--color-base);
    color:#fff;
    cursor: pointer;
}

.setting-tab__cont .sub-box .sub-item.selected {
    background-color: #000;
}


.statistics-layout-row.statistics-step2 {
    height:40%;
}

.statistics-layout-row.statistics-step3 {
    height:calc(50% - 20px);
}

#stat-sales .statistics-layout-row.statistics-step3 {
    height:calc(50% - 50px);
}

#stat-prepaidMileage .statistics-layout-row.statistics-step3 {
    height:calc(50% - 100px);
}

#stat-expectedRevenue .statistics-layout-row.statistics-step3 {
    height:calc(50% - 50px);
}

#stat-performance .statistics-layout-row.statistics-step3 {
    height:calc(50% - 50px);
}

.statistics-layout-row h3 {
    font-size: 14px;
    font-weight: 700;
}

.statistics-layout-row .statistics-filter-item input{
    width: 120px;
    padding: 5px; 
    text-align: center;
    border: 1px solid #ccc;
    background-color: #deebfb;
}

.statistics-layout-row .statistics-filter-item .tilde {
    font-size: 18px;
    color: #333;
    margin: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.statistics-layout-row .date-box {
    margin-left:10px;
    display: flex;                /* 가로로 정렬 */
    gap: 10px;                    /* 버튼 사이 간격 */
}

.statistics-layout-row .date-box span {
    display: inline-block;
    padding: 0 16px;
    background-color: red;
    color:#fff;
    border-radius: 5px;
    cursor: pointer;
    line-height: 25px;
}

.statistics-layout-row .date-box .active {
    background-color: var(--color-base);
}

.statistics-layout-row .accordion-title {
    margin-left:10px;
    width: 150px;
    border-radius: 10px;
    background-color: #f1f4f9;
    display: flex;
    font-size: 12px;
    letter-spacing: -.4px;
    font-family: 'Nanum Gothic', sans-serif;
    background-image: url('../img/icons/ico_arrow-down.svg');
    background-repeat: no-repeat;
    background-size: 18px 9px;
    background-position: right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
    justify-items: center;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
}

.statistics-layout-row .accordion-title.on {
    background-image: url('../img/icons/ico_arrow-up.svg');
}

.statistics-layout-row .accordion-body {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    position: absolute;
    bottom: -30px;
    left: 0;
    height: 45px;
    background-color: #fff;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 10px 10px;
    padding: 10px;
}

.statistics-layout-row .accordion-body.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 9;
}

.statistics-layout-row .accordion-item {
    display: flex;
    width: 180px;
    align-items: center;
    justify-items: center;
    height: 100%;
    gap: 15px;
}

.statistics-layout-row .accordion-item select, 
.statistics-layout-row .accordion-item input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ddd !important;
    color: #000;
}

.statistics-layout-row .accordion-item span {
    font-weight: bold;
    font-size: 11px;
}

 /* 개별 카드 스타일 */
 .statistics-layout-item {
    flex: 1 1 calc(33.333% - 20px); /* 3개씩 정렬 */
    background: #f0f7ff;
    border: 1px solid #d0e3fa;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    height: 50%;
}

/* 제목 스타일 */
.statistics-layout-item h3 {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    padding-left:5px;
}

/* 숫자 텍스트 스타일 */
.number_text {
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    height: calc(100% - 35px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:10px;
}

.statistics-layout-row .d_f{
    gap:10px;
}

.statistics-step2 .col-item {
    width: 33%;
    height: 100%;
    padding:10px;
}

.statistics-step2 .col-item .col-body{
    height: 89%;
    width: 95%;
}

.statistics-step2 .col-item .col-head{
    height: 10%;
    width: 95%;
}

#settingWrap.statistics-layout-row td, 
#settingWrap.statistics-layout-row th {
    padding: 0 0.8em !important;
}

/* 통계관리 */

/* 설정관리 */
/* layout */
.setting-layout-wrap {
    height: 100%;
}

.setting-layout-wrap .article_box_01 {
    height: 50px;
}

.setting-layout-wrap .article_box_02 {
    position: relative;
    height: calc(100% - 50px - 10px);
}


.setting-layout-row .setting-layout-col {
    height: 100%;
    margin-right: 10px;
}

.setting-layout-row .setting-layout-col:last-child {
    flex: 1 1 auto;
    width: 1%;
    margin-right: 0;
}


.setting-layout-row .setting-layout-col.step1, 
.setting-layout-row .setting-layout-col.step2 {
    width: 380px;
}
.setting-layout-row .scroll-box-y {
    padding-right: 3px;
}
.setting-layout-row .setting-layout-col__box {
    width: 100%;
    height: 100%;
    padding: 15px;
    padding-top: 0;
    border-radius: 10px;
    background-color: #fff;
}
/* 탭별 col width */
#settingTabCont02 .setting-layout-col {
    flex: 1;
}
#settingTabCont03 .setting-layout-col.step1 {
    width: 1370px;
}
.flex-direction-column {
    display: flex;
    flex-direction: column;
}

.flex-direction-column > * + * {
    margin-top: 5px;
}

#settingTabCont04 .setting-layout-col {
    flex: 1;
}
#settingTabCont05 .setting-layout-col.step1 {
    width: 602px;
}
#settingTabCont06 .setting-layout-col.step1 {
    width: 480px ;
}
#settingTabCont07 .setting-layout-col.step1 {}
#settingCate07Tab1 .setting-layout-col {
    width: 294px;
    flex: inherit;
}
#settingCate07Tab1 .setting-layout-col.step2 {
    flex: 1 1 auto;
}

.setting-layout-col__stepEtc {
    height: 100%;
}

.setting-layout-col__stepEtc__row {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

#settingTabCont01 .setting-layout-col__stepEtc__row {
    display: none;
}

#settingTabCont01 .setting-layout-col__stepEtc__row.current {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

#settingTabCont01 .setting-layout-col__box.settingCateTabStep3 {
    flex: 1;
    /* width: 514px; */
    max-width: 514px;   
    margin-right: 10px;
}
#settingTabCont01 .setting-layout-col__box.settingCateTabStep4 {
    flex: 1 1 auto;
    width: 1%;
    margin-right: 0;
}

#settingTabCont07 .setting-layout-col__box.settingCateTabStep2 {
    width: 294px; 
    margin-right: 10px;
}
#settingTabCont07 .setting-layout-col__box.settingCateTabStep3 {
    flex: 1 1 auto;
    width: 1%;   
    margin-right: 10px;
}
#settingTabCont07 .setting-layout-col__box.settingCateTabStep4 {
    width: 294px;
    margin-right: 0;
}
.setting-layout-row {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

.layout-row-container {
    width: 100%;
    height: 100%;
    max-height: none;
}
.setting-tab__nav .tab-nav {
    display: flex;
    flex-wrap: nowrap;
}
.setting-tab__nav .tab-nav > li{
    margin-right: 5px;
}
.setting-tab__nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    font-size: 12px;
    font-weight: 700;
    color: var(--font-color-base);
    line-height: 1.2;
    border-radius: 10px;
    background-color: #fff;
    vertical-align: top;
}

.setting-tab__nav .tab-nav>li.active button {
    color: #fff;
    background-color: var(--color-base);
}

.setting-tab__cont,
.setting-tab__cont .setting-tab-list,
.setting-tab__cont .setting-tab-list > li > div {
    height: 100%;
}

.setting-tab__cont,
.setting-tab__cont .setting-tab-list,
.setting-tab__cont .setting-tab-list > li  {
    height: 100%;
}

.setting-tab__cont .setting-tab-list>li {
    display: none;
}

.setting-tab__cont .setting-tab-list>li.active {
    display: block;
}

.layout-row-container .inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

.setting-layout-col .setting-layout__head {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    border-bottom: 1px solid var(--bor-color);
}
.setting-layout-col .setting-layout__head.bb_0 {
    border-bottom: 0;
}
.setting-layout-col .setting-layout__head.bb_0 .circle-plus-btn {
    margin-top: 5px;
}
.setting-layout-col .setting-layout__body {
    height: calc(100% - 54px);
    padding-top: 10px;
}

.h100 {
    height: 100% !important;
}

.setting-layout-col .setting-layout__head h3 { 
    font-size: 14px;
    font-weight: 700;
}

/*
.pop-layout-row .pop-layout-col.step3 {
    width: calc(100% - (346px * 2) - 20px);
}
*/

.dragItem .hidden {
    display: none;
}
  
.dragItem .visible {
    display: inline-block;
}

#settingWrap {}
#settingWrap .btn_wrap .btn {
    width: 110px;
    font-size: 10px;
}
/* 설정분류 리스트 */
.setting-category-list {
}
.setting-category-list > li {}
.setting-category-list .category-title span {
    position: relative;
    display: block;
    font-weight: 800;
    padding: 18px 50px 18px 20px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-size: 10px 18px;
    background-position: right 20px center;
    background-color: var(--color-gray2);
    background-image: url('../img/icons/ico_arrow-right.svg');
    cursor: pointer;
}

.setting-category-list > li + li {
    margin-top: 5px;
}

.setting-category-list .category-title.current span {
    color: #fff;
    background-color: var(--color-base);
    background-image: url('../img/icons/ico_arrow-right_w.svg');
}

/* 대분류 숨기기 */
#settingTabCont01 .setting-layout-col.step2 .setting-layout-col__box,
#settingTabCont01 .setting-layout-col.step3 .setting-layout-col__stepEtc,
#settingTabCont07 .setting-layout-col.step2 .setting-layout-col__stepEtc {
    display: none;
}
#settingTabCont01 .setting-layout-col.step2 .setting-layout-col__box.current,
#settingTabCont01 .setting-layout-col.step3 .setting-layout-col__stepEtc.current,
#settingTabCont07 .setting-layout-col.step2 .setting-layout-col__stepEtc.current {
    display: block;
}

/* 설정관리 팝업 */
#settingContWrap {
    position: relative;
}


/* 직원설정 */
.setting-filter-area {
    padding-top: 10px;
}
.setting-filter-area .setting-filter-item {
    width: 205px;
    height: 44px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: var(--color-gray2);
    overflow: hidden;
}

.setting-filter-area .setting-filter-item input[type="text"],
.setting-filter-area .setting-filter-item input[type="search"],
.setting-filter-area .setting-filter-item select {
    height: 100%;
    width: 100%;
    border: 0;
    background-color: transparent;
}
.setting-filter-area .setting-filter-item dl,
.setting-filter-area .setting-filter-item dt,
.setting-filter-area .setting-filter-item dd {
    display: flex;
    align-items: center;
    height: 100%;
}

.setting-filter-area .setting-filter-item dt {
    width: 85px;
    padding: 0 10px 0 15px;
}
.setting-filter-area .setting-filter-item dd {
    position: relative;
    width: calc(100% - 85px);
    padding-left: 10px;
}
.setting-filter-area .setting-filter-item dd.search-area input[type="text"],
.setting-filter-area .setting-filter-item dd.search-area input[type="search"] {
    width: calc(100% - 44px);
}
.setting-filter-area .setting-filter-item dd.search-area button {
    width: 44px;
    height: 100%;
    background-color: transparent;
}
.setting-filter-area .setting-filter-item dd.search-area svg {
    width: 25px;
}
.setting-filter-area .setting-filter-item dd.search-area svg path {
    stroke: var(--color-base);
} 

.setting-filter-area .setting-filter-item dd:before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 11px);
    width: 1px;
    height: 22px;
    background-color: #ccc;
}
.setting-filter-area .setting-filter-item.searchBtn {
    width: 44px;
}
.setting-filter-area .setting-filter-item.searchBtn button {
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.setting-filter-area .setting-filter-item.searchBtn svg {
    width: 25px;
}
.setting-filter-area .setting-filter-item.searchBtn svg path {
    stroke: var(--color-base);
} 

.setting-filter-area .setting-filter-item.chartRegistBtn {
    width: 80px;
}
.setting-filter-area .setting-filter-item.chartRegistBtn button {
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: var(--color-base);
}
/* 설정관리 setting-depth2-wrap 하위탭 */
.setting-depth2-wrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    height: 40px;
}
.setting-depth2-wrap .tabType {

}
.setting-depth2-wrap .tabType>ul {

}
.setting-depth2-wrap .tabType>ul li {
    min-width: 197px;
}
.setting-depth2-wrap .tabType>ul>li a {
    color: #fff;
    font-size: 10px;
    border-radius: 10px;
    background-color: var(--color-base);
}
.setting-depth2-wrap .tabType>ul>li.current a {
    background-color: var(--font-color-base);
}

.setting-depth2-wrap .btn_wrap .btn {
    border-radius: 10px;
}
.settingCate04Tab,
.settingCate05Tab,
.settingCate06Tab,
.settingCate07Tab {
    display: none; height: calc(100% - 40px);
}
#settingCate04Tab1,
#settingCate05Tab1,
#settingCate06Tab1,
#settingCate07Tab1 {
    display: block; 
}

/* drag & checkbox & color box & table fixed */
.round-table-container {
    overflow-y: auto;
    height: 100%;
    padding-right: 3px;
}
.round-table-head-fixed {
    position: relative;
}
/*
.round-table-head-fixed thead {
    border-bottom: 5px solid #fff;
}*/
.round-table-head-fixed thead tr th {
    position: sticky;
	top: 0;
    z-index: 2;
}

/* 컬러박스 */
.colorBox {
    display: inline-block;
    width: 20px;
    height: 20px;
}

.newColorBox{
    display: inline-block;
    border: none;
    outline: none;
    width: 25px;
    height: 27px;
}

.newColorBox:focus {
    border: none;
    outline: none; 
}
/* 컬러박스 */

.round-table-head-fixed tbody tr {    
    border-bottom: 1px solid #fff;
}
.round-table-head-fixed thead tr.line td {
    height: 5px;
    padding: 0;
    border-radius: 0;
    background-color: #fff;
}
.round-table-head-fixed tr th {
    font-weight: 700;
    text-align: center;
}
.round-table-head-fixed tr th,
.round-table-head-fixed tr td {
    font-size: 12px;
    padding: 5px 15px;
    height: 40px;
    vertical-align: middle;
    background-color: var(--color-gray2);
}
.round-table-head-fixed.bg_fff tr th,
.round-table-head-fixed.bg_fff tr td {
    background-color: transparent;
}

.round-table-head-fixed tr th:first-child,
.round-table-head-fixed tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.round-table-head-fixed tr th:last-child,
.round-table-head-fixed tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* tr drag */
.round-table-head-fixed tr.ui-sortable-helper {
    width: 100% !important;
    display: table;
    table-layout: fixed;
    flex-wrap: nowrap;
}
.round-table-head-fixed tr.ui-sortable-helper td {
    display: table-cell;
}
/* drag 상태에서 width값 고정 */
.round-table-head-fixed.type_1 .tcol_1 {width: auto}
.round-table-head-fixed.type_1 .tcol_2 {width: 120px}
.round-table-head-fixed.type_1 .tcol_3 {width: 70px }
.round-table-head-fixed.type_1 .tcol_4 {width: 50px }
.round-table-head-fixed.type_1 .tcol_5 {width: 170px }


/* drag 상태에서 width값 고정 */
.round-table-head-fixed.type_2 .tcol_1 {width: auto}
.round-table-head-fixed.type_2 .tcol_2 {width: 19%}
.round-table-head-fixed.type_2 .tcol_3 {width: 15% }
.round-table-head-fixed.type_2 .tcol_4 {width: 15% }
.round-table-head-fixed.type_2 .tcol_5 {width: 13% }
.round-table-head-fixed.type_2 .tcol_6 {width: 50px }


/* drag시 number 순서 재설정 */
  
.dragNumber {
    counter-reset: number 0;
}
.dragNumber tr {

}

.dragNumber tr .subject:before {
    counter-increment: number 1;
    content: counter(number) '.';
    display: inline-block;
}


.chk-table tr:not(.selected) td,
.chk-table tr:not(.selected) td label {
    color: #ccc;
}

/* 체크박스 선택시 */
.chk-table tr.selected {}

/* 타이틀 선택시 */
.chk-table td.subject-btn {
    cursor: pointer;
}
.chk-table tr.current th, 
.chk-table tr.current td{
    color: #fff !important;
    background-color: var(--color-base) !important;
}
.chk-table tr td input[type='checkbox'] + label {
    margin: 0;
}
.chk-table tr td input[type='checkbox'] + label:before {
    top: 3px;
}
.chk-table tr.current td .chk-txt-change:checked + label:before {
    color: var(--color-base) !important;
    background-color: #fff !important;
}

.chk-table tr td .description {
    max-width: 90%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* chk-table select를 제외하고 tr hover 효과 */
.tr-hover.chk-table tr:hover td {
    background-color: #DEEBFB;
}

/* checkbox label 숨김 */
.chk-table.no-label tr td input+ label {
    font-size: 0;
    height: 14px;
    padding-left: 12px;
    vertical-align: top;
}
.table-thead-sticky .subject:not(.noLink),
.round-table-head-fixed .subject:not(.noLink) {
    cursor: pointer;
}
.table-thead-sticky .subject,
.round-table-head-fixed .subject {
    padding-left: 25px;
}
.round-table-head-fixed .upDownDrag {
    background-image: url('../img/icons/ico_updown.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    cursor: pointer;
}

.round-table-head-fixed tr td input+ label {
    font-size: 12px;
}

.round-table-head-fixed.type_2 th,
.round-table-head-fixed.type_2 td {
    text-align: center;
}
/* 직원설정 */
/*
#settingTabCont03 .setting-layout__body {
    padding-top: 10px;
}*/


.setting-layout__body .pop-table-wrap .tab_table_dep1>tbody>tr>td {
    padding: 0 0 8px;
}

#settingTabCont03Body {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}
#settingTabCont03Body .cell {
    width: 286px;
    height: 100%;
    border-radius: 10px;
    margin-right: 10px;
}
#settingTabCont03Body .cell:first-child {
    flex: 1 1 auto;
    width: 1%;
    margin-right: 10px;
}
#settingTabCont03Body .cell.cell_01 .scroll-box-y {
    height: calc(100% - 50px);
    overflow-x: hidden;
}
#settingTabCont03Body .cell.cell_01 .pop-btn {
    height: 50px;
    margin-top: 15px;
}
#settingTabCont03Body .cell.cell_01 .pop-btn button {
    margin-top: 0;
}
#settingTabCont03Body .cell.cell_01 .authority-list {
    padding: 10px 15px;
    background-color: #fff;
}
#settingTabCont03Body .cell.cell_01 .round-table-head-fixed tr {
    border-bottom: 1px solid var(--bor-color);
}
#settingTabCont03Body .cell.cell_01 .round-table-head-fixed td {
    height: auto;
    padding-left: 0;
    padding-right: 0;
}
#settingTabCont03Body .cell.cell_01 .round-table-head-fixed input[type='checkbox'] + label {
    margin: 0;
    font-size: 10px;
}

#settingTabCont03Body .cell.cell_02 .scroll-box-y {
    height: 100%;
}

/* 예약 / 예약건수 테이블 */
#settingCate04Tab3 .table_basic_st>tbody>tr>td, 
#settingCate04Tab3 .table_basic_st>thead>tr>th, 
#settingCate04Tab3 .table_basic_st>thead>tr>td{
    border-color: var(--bor-color2);
}

/* 약품 */
#settingTabCont06Tab01Body,
#settingTabCont06Tab02Body {
    height: 100%;
    padding: 15px;
    border-radius: 10px;
    background-color: var(--color-gray2);
}
.search-list-total {
    font-weight: 700;
}
.search-list-total .total-num {
    color: #E84809;
}

#settingTabCont06Tab01Body .search-list-total,
#settingTabCont06Tab02Body .search-list-total {
    height: 25px;
    padding-bottom: 5px;
}
#settingTabCont06Tab01Body .scroll-box-y,
#settingTabCont06Tab02Body .scroll-box-y {
    height: calc(100% - 25px);
}

/* 약품추가 팝업 */
.drug_pop_row {
    margin: 0 -5px;
}
.drug_pop_row > li {
    padding: 0 5px;
}
.drug_pop_row.ea_3 > li {
    width: 33.333%;
}
.drug_pop_row.ea_4 > li {
    width: 25%;
}

.drug_pop_row.ea_5 > li {
    width: 20%;
}

/* 묶음 처방 추가 팝업 */
.bundle-recipe-conts {

}

.bundle-recipe-conts input[type="text"],
.bundle-recipe-conts input[type="search"]{
    height: 35px;
}
.bundle-recipe-conts__area1 .pop-cont.first {
    width: calc(100% - 250px - 100px);
}
.bundle-recipe-conts__area1 .pop-cont.second {
    width: 250px;
    padding-left: 20px;
}
.bundle-recipe-conts__area1 .pop-btn {
    width: 100px;
}
.bundle-recipe-conts__area1 .pop-btn button {
    width: 50px;
    border-radius: 0;
    margin: 0;
}

.bundle-recipe-conts__area2 {
    margin-top: 15px;
}
.bundle-recipe-conts__area2 .pop-btn button {
    width: auto;
    white-space: nowrap;
    margin-left: 20px;
    background-color: transparent;
}
.bundle-recipe-conts__area2 .pop-btn button img {
    margin-right: 5px;
    vertical-align: middle;
}

.bundle-recipe-list .scroll-box-y {
    padding-right: 3px;
}
.bundle-recipe-list .table_basic_st tr th,
.bundle-recipe-list .table_basic_st tr td {
    background-color: var(--color-gray2);
}

.bundle-recipe-conts__area3.d_f {
    align-items: flex-end;
}
.bundle-recipe-conts__area3 .first {
    width: calc(100% - 150px);
    padding-right: 20px;
}
.bundle-recipe-conts__area3 .pop-btn {
    width: 150px;
}
.bundle-recipe-conts__area3 .pop-btn button {
    width: 50px;
    border-radius: 0;
    margin: 0;
}

.bundle-recipe-conts__area__row.ea_3 {
    margin: 0 -5px;
}
.bundle-recipe-conts__area__row.ea_3 > li {
    width: 33.333%;
    padding: 0 5px;
}
.bundle-recipe-conts__area4 {
    margin-top: 10px;
}

/*  sms layout form */
.sms-layout-wrap form {
    height: 100%;
}

.sms-layout-wrap {
    width: 294px;
    height: 100%;
    padding: 15px;
    padding-top: 0;
    border-radius: 10px;
    background-color: #fff;
}

#smsEdit.sms-layout-wrap {
    width: 380px;
}

.sms-layout-wrap .sms-layout__head {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    border-bottom: 1px solid var(--bor-color);
}

.sms-layout-wrap .sms-layout__body {
    height: calc(100% - 54px);
    padding-top: 20px;
}
.sms-layout__body .r-box {
    border-radius: 10px;
    background-color: var(--color-gray2);
    overflow: hidden;
}
.sms-layout__body .r-box + .r-box {
    margin-top: 5px;
}

.r-box.caller-id-row .tit,
.r-box.caller-id-row input[type="text"],
.r-box.caller-id-row input[type="search"] {
    flex: auto;
    width: auto;
    padding-left: 15px;
}
.sms-layout__body .r-box input[type="text"],
.sms-layout__body .r-box input[type="search"] {
    height: 40px;
    padding: 0 15px;
    border: 0;
    background-color: transparent;
}
.sms-layout__body .sms-viewer {
    height: 318px;
}

.sms-layout__body .link-head {
    width:100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    margin-top: 35px;
    text-align: center;
    background-color: #000;
    color:#fff;
}

.sms-layout__body .text-regist-area {
    height: calc(100% - 395px - 45px - 10px);
}   
.sms-layout__body .sms-layout-btn {
    height: 45px;
}
.sms-layout__body .sms-viewer .text-area.r-box {
    position: relative;
    margin-top: 5px;
    padding-bottom: 50px;
}
.sms-layout__body .sms-viewer .text-area.r-box .text-byte {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 10px;
}
.sms-layout__body .sms-viewer .text-area textarea {
    height: 220px;
    font-size: 11px;
    line-height: 1.8;
    text-align: left;
    padding: 10px 15px;
    border: 0;
    background-color: transparent;
}
.sms-layout__body .text-regist-area {
    margin-top: 92px;
}

#talksmsWrap .sms-layout__body .text-regist-area {
    margin-top:22px !important;
}

.sms-layout__body .sms-layout-btn .btn {
    width: 100%;
    margin-top: 10px;
}
.sms-layout__body .r-box-row {
    display: flex;
    flex-wrap: nowrap;
}
.sms-layout__body .r-box-row input[type="text"],
.sms-layout__body .r-box-row input[type="search"] {
    width: calc(100% - 95px);
}
.sms-layout__body .r-box-row .btn {
    width: 95px;
    height: 40px;
    display: inline-flex;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
}
.sms-layout__body .text-regist-list {
    margin-top: 10px;
}
.sms-layout__body .text-regist-list > ul {
    display: flex;
    flex-wrap: wrap;
    margin: -5px -1.5px 0;
}
.sms-layout__body .text-regist-list > ul > li {
    width: 33.3333%;
    padding: 0 1.5px;
    margin-top: 5px;
}
.sms-layout__body .text-regist-list > ul > li p {
    font-size: 12px;
    line-height: 25px;
    height: 25px;
    text-align: center;
    padding: 0 7px;
    border-radius: 5px;
    background-color: #DEEBFB;
}

.MMS.sms-layout__body .sms-viewer {
    height: 345px;
}

.MMS.sms-layout__body .text-regist-area {
    height: calc(100% - 345px - 45px - 10px);
}   

.MMS.sms-layout__body .sms-viewer .text-area.r-box .text-byte {
    position: absolute;
    right: 15px;
    bottom: 5px;
    font-size: 10px;
}

.MMS.sms-layout__body .sms-viewer .text-area textarea {
    height: 160px;
    font-size: 11px;
    line-height: 1.8;
    text-align: left;
    padding: 10px 15px 0;
    border: 0;
    background-color: transparent;
}

.MMS.sms-layout__body .sms-viewer .text-area.r-box .text-byte {
    position: absolute;
    right: 15px;
    bottom: 10px;
    font-size: 10px;
}
.MMS.sms-layout__body .sms-viewer .text-area textarea {
    height: 160px;
    font-size: 11px;
    line-height: 1.8;
    text-align: left;
    padding: 10px 15px 0;
    border: 0;
    background-color: transparent;
}

#popup-sub-container2{
    z-index:31 !important;
}

.MMS .text-regist-area {
    margin-top:10px !important;
}

.MMS.sms-layout__body .link-head {
    width:100%;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    margin-top: 5px;
    text-align: center;
    background-color: #000;
    color:#fff;
}

#settingTabCont07Body {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}
#settingTabCont07Body .cell {
    width: 286px;
    height: 100%;
    padding: 15px;
    border-radius: 10px;
    margin-right: 10px;
}
#settingTabCont07Body .cell:last-child {
    flex: 1 1 auto;
    width: 1%;
    margin-right: 0;
}
#settingTabCont07Body .cell.cell_01 .scroll-box-y {
    height: calc(100% - 50px);
    overflow-x: hidden;
}
#settingTabCont07Body .cell.cell_01 .pop-btn {
    height: 50px;
    margin-top: 15px;
}
#settingTabCont07Body .cell.cell_01 .pop-btn button {
    margin-top: 0;
}
#settingTabCont07Body .cell.cell_01 .authority-list {
    padding: 10px 15px;
    background-color: #fff;
}
#settingTabCont07Body .cell.cell_01 .round-table-head-fixed tr {
    border-bottom: 1px solid var(--bor-color);
}
#settingTabCont07Body .cell.cell_01 .round-table-head-fixed td {
    height: auto;
    padding-left: 0;
    padding-right: 0;
}
#settingTabCont07Body .cell.cell_01 .round-table-head-fixed input[type='checkbox'] + label {
    margin: 0;
    font-size: 10px;
}

#settingTabCont07Body .cell.cell_02 .scroll-box-y {
    height: 100%;
}

#settingTabCont08 .penchart-form {
    height: 100%;
}
#settingWrap .penchart-form .btn_wrap .btn {
    width: 80px;
    height: 44px;
    line-height: 44px;
    font-size: 12px;
}

/* 펜차트 */
#settingWrap .penchart-list > ul > li {
    width: calc(100% / 7);
}

#settingWrap .penchart-list .img-wrap .img-thumb-wrap img {
    height: 100%;
}

/* 파일 추가 */
.filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.filebox {
	font-size: 0;
}
.filebox label {
	display: inline-block;
    height: 35px;
    line-height: 35px;
    font-size: 12px;
    color: #fff;
    background-color: var(--font-color-base);
    text-align: center;
    width: 85px;
    cursor: pointer;
}

.filebox .upload-name {
	display: inline-block;
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: calc(100% - 85px);
    height: 35px;
	text-align: left;
    padding: 0 15px;
    border: none;
    background-color: var(--color-gray2);
}
.filebox label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}
/* TALKSMS */
#talksmsWrap .setting-layout__head {
    z-index: 10;
}
#talksmsWrap .setting-layout-row .setting-layout-col:not(:last-child) {
    width: 294px;
}
#talksmsWrap .sms-layout__body .sms-viewer {
    height: 363px;
}

#talksmsWrap .sms-layout__body .text-regist-area {
    height: calc(100% - 363px - 130px - 25px);
    overflow: auto;
}
#talksmsWrap .sms-layout__body .sms-send-area {
    /* height: 132px; */
    /* padding-bottom:10px; */
}
#talksmsWrap .text-regist-list {
    margin-top: 15px;
}
/* file  */
.sms-layout__body .filebox label {
    width: 70px;
    height: 40px;
    line-height: 40px;
}
.sms-layout__body .filebox .upload-name {
    height: 40px;
    width: calc(100% - 70px);
}
/* btn */
#talksmsWrap .sms-layout-btn {
    height: 35px;
    margin-top: 15px;
}
#talksmsWrap .sms-layout-btn button {
    margin-top: 0;
}
#talksmsWrap .sms-layout-btn button:first-child {
    width: 70px;
    margin-right: 5px;
}
#talksmsWrap .sms-layout-btn button:last-child {
    width: calc(100% - 75px);
}

#talksmsWrap .sms-layout__body .r-box-row input[type="text"],
#talksmsWrap .sms-layout__body .r-box-row input[type="search"] {
    width: calc(100% - 70px);
}
#talksmsWrap .sms-layout__body .r-box-row .btn {
    width: 70px;
}

#upload-box {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    background-color: #fafafa;
  }
  
  #upload-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:20px;
  }
  
  #upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #f5f5f5;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
  #upload-label.default {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  
  #seal_img {
    width: 100%;
    height: 26px;
    object-fit: contain;
  }
  
  #upload-label input {
    display: none;
  }
  
  #upload-info {
    margin-top: 10px;
    font-size: 12px;
    color: red;
  }
  
  #hoverStep {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    width: 100%;
  }
  
  .hover-container {
    position: relative;
    display: inline-block;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
  }
  
  #hoverImage {
    width: 100%;
    height: 100px;
    display: block;
  }
  
  #deleteBtn {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }
  


/* 최종 발송 고객수 */


/* 발송통계 */
.sent-statistics__date {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
}

.sent-statistics__date .date_pick {
    width: 160px;
    margin-left: 10px;
    background-color: var(--color-gray2);
}
.sent-statistics-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 40px;
    padding-bottom: 10px;
}

.sent-statistics-header .btn {
    width: 100px;
}

#sentStatisticsList .scroll-box-y {
    height: calc(100% - 40px);
}

.movementBtn {
    display: none;
}

#movementList .pop-box {
    width: 500px;
    height: 550px;
}

#movementList .pop-body .item{
    display: flex ;
    justify-content: center ;
    align-items: center ;
    border:1px solid #ddd;
    border-top:none;
    height: 100%;
    padding:10px;
}

#movementList .pop-body .item{
    display: flex ;
    justify-content: center ;
    align-items: center ;
    border:1px solid #ddd;
    border-top:none;
    height: 100%;
}

#movementList .pop-body .title{
    background-color: #c7d3f1;
}

#movementList .pop-body .item-header .item {
    border: 1px solid #ddd;
}

#movementList .pop-body .moveDiv {
    height: 180px;
    overflow-y: auto;
    padding:0;
}

#movementList .pop-body .moveItem {
    width: 30%;               
    display: inline-block;    
    text-align: center;     
    line-height: 40px;      
    border: 1px solid #ddd;  
    overflow: hidden;  
    margin-right:4px;
    text-overflow: ellipsis;  
    white-space: nowrap;    
}

/* 아이콘 스타일 */
.tooo-tip-text[data-tooltip-text] svg {
    width: 17px;
    height: 17px; 
    fill: var(--color-base);
    position: relative;
  }

.tooo-tip-text {
    position: relative; 
    z-index: 10;
}

#penchartWrap {
    padding-bottom: 30px;
    border-top: 1px solid var(--font-color-base);
    height: 400px;
    overflow: hidden;
    margin-bottom: 20px;
    overflow-y: auto;
}

.file_upload_wrap {
    position: relative;
    width: 100%;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    margin-top:5px;
    height: 100px;
}

.imageInput {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.image_preview img {
  max-width: 100%;
  max-height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

.image_preview > span {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #eee;
    display: inline-block;
    position: relative;
}

.image_preview > span::after {
    content: "+";
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    line-height: 1;
}
.image_preview > p {
    color:red;
    font-size: 13px;
    margin-top: 20px;
    
    line-height: 1.5;
    font-family: 'Nanum Gothic', sans-serif;
}

.iv-imgwrap{
	max-width:100%;
    height:384px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.I-viewHd {
    height: 60px;
    border: 1px solid #ccc;
    background: #f0f0f0;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-pl{
    background:url("../img/icons/glass-pl.svg") no-repeat center center;
}

.glass-mn{
    background:url("../img/icons/glass-mn.svg") no-repeat center center;
}
.view100{
    width:45px;
    background:url("../img/icons/view100.svg") no-repeat center center;
}
.rotate90{
    width:45px;
    background:url("../img/icons/rotate90.svg") no-repeat center center;
}
.rotate180{
    width:45px;
    background:url("../img/icons/rotate180.svg") no-repeat center center;
}
.flip-hor{
    background:url("../img/icons/flip-horizontal.svg") no-repeat center center;
}
.flip-ver{
    background:url("../img/icons/flip-vertical.svg") no-repeat center center;
}

.download{
    background:url("../img/icons/download.svg") no-repeat center center;
}

.iv-edit button {
    height: 35px;
    text-align: center;
    line-height: 35px;
    padding: 0 15px;
}

.iv-edit{
    height:40px;
    padding:2px 10px;
    background:#5A667B;
}
.iv-edit .left{
    float:left
}
.iv-edit .right{
    float:right;
}

.penchartPageBox {
    display: flex;
    bottom: 8px;
    right: -31px;
    width: 150px;
    color: #fff;
    font-weight: 200;
}

.iv-edit .arrowLeft {
    background: url("../img/icons/arrow-left.png") no-repeat center center / 8px;
    align-self: flex-start;
}

.iv-edit .arrowRight {
    background: url("../img/icons/arrow-right.png") no-repeat center center / 8px;
    align-self: flex-end; 
}

.box_delete_img {
    position:absolute;
    transform: translateY(-50%);
    right: 9999px; 
    top:50%;
}

.box_delete_img.show-delete-icon {
    right: 5px;
}

#popup-sub-container {
    z-index: 30;
}

#cus-poup-container #customerDiv {
    background-color: #deebfb;
    border-radius: 15px;
    width: 1500px;
    height: 85vh;
    position: relative;
    z-index: 16;
}

#cus-poup-container {
    position: absolute;
    z-index:22;
    left:10%;
    align-self: center;
}


.pagination {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination li {
    display: inline;
    margin: 0 5px;
}

.pagination span {
    cursor: pointer;
    display: inline-block;
    width: 25px; /* 동그라미 크기 */
    height: 25px; /* 동그라미 크기 */
    border-radius: 50%; /* 동그라미 모양 */
    text-align: center;
    line-height: 25px; /* 텍스트 수직 중앙 정렬 */
    background-color: #ccc; /* 기본 회색 배경 */
    color: #fff; /* 텍스트 색 */
}

/* active 상태일 때 */
.pagination li.active span {
    background-color: #000; /* active 상태일 때 검정 배경 */
}

/* 페이지 번호의 호버 효과 */
.pagination li:not(.prev):not(.next) span:hover {
    background-color: #aaa; /* hover 시 배경색 변경 */
}

/* '이전' 버튼에만 적용될 스타일 */
.pagination li.prev span {
    border-radius: 0; /* 동그라미 모양을 없앰 */
    width: auto; /* 너비 자동으로 조정 */
    height: auto; /* 높이 자동으로 조정 */
    padding: 5px 10px; /* 텍스트에 맞게 패딩 설정 */
    background-color: transparent; /* 배경 투명 */
    color: #000; /* 텍스트 색 변경 */
    text-align: left; /* 텍스트 정렬 */
}

/* '다음' 버튼에만 적용될 스타일 */
.pagination li.next span {
    border-radius: 0; /* 동그라미 모양을 없앰 */
    width: auto; /* 너비 자동으로 조정 */
    height: auto; /* 높이 자동으로 조정 */
    padding: 5px 10px; /* 텍스트에 맞게 패딩 설정 */
    background-color: transparent; /* 배경 투명 */
    color: #000; /* 텍스트 색 변경 */
    text-align: left; /* 텍스트 정렬 */
}

/* '이전'과 '다음' 버튼은 호버 효과가 적용되지 않음 */
.pagination li.prev span:hover,
.pagination li.next span:hover {
    background-color: transparent; /* 호버 시 배경 투명 */
    color: #000; /* 텍스트 색 유지 */
}

.excel-wrap {
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 배치 */
    align-items: center; /* 수직 중앙 정렬 */
}

.excel-btn {
    text-align: right; /* 오른쪽 정렬 */
    font-size: 16px; /* 글씨 크기 */
    color: #28a745; /* 엑셀 아이콘 색상 */
    display: flex;
    align-items: center;
    cursor: pointer;
}

.excel-btn svg {
    margin-right: 5px; /* 아이콘과 텍스트 사이 간격 */
}

.Inbody-statistics {
    padding-bottom: 5px;
}
.Inbody-statistics dl {
    border-radius: 10px;
    height: 30px;
    padding: 0 20px;
    font-size: 10px;
    font-weight: 700;
    background-color: var(--color-gray2);
}
.Inbody-statistics dl dd{
    color: #E84809;
}

.statisticsLst tr td,
.dataLst tr td {
    color: #000 !important;
}

#cus-poup-container .popup-back-ground,
#popup-container .popup-back-ground, 
#popup-sub-container .popup-back-ground,
#popup-sub-container2 .popup-back-ground,
#msg-container .popup-back-ground {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.5;
    z-index:15
}

#msg-container {
    z-index: 27;    
}

.btn-box {
    display: flex;
    flex-direction: row-reverse;
    border-bottom: 0px !important;
}
.btn-box button {
    width: 30px;
}

#ui-datepicker-div {
    width:300px;
    z-index:100 !important;
}

.toggle-container {
    margin-left: 10px;
    margin-top: 10px;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
}

.toggle-label input {
    display: none;
}

.toggle-label  .slider {
    margin-left: 10px;
    width: 40px;
    height: 20px;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    transition: background-color 0.3s ease;
}

.toggle-label .slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background-color: #1c98d1;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

/* ON 상태일 때 */
.toggle-label input:checked + .slider {
    background-color: #7ec9e5;
}

.toggle-label input:checked + .slider::before {
    transform: translateX(20px);
}

#invoiceEditPop {
    position: absolute;
    top: calc(50% - 453px);
    left: calc(50% - 498px);
    z-index: 23;
}

#operationChkPop {
    position: absolute;
    top: calc(50% - 400px);
    left: calc(50% - 498px);
    z-index: 23;
}


#optMenuPopup {
    position: absolute;
    top: calc(50% - 400px);
    left: calc(50% - 321px);
    z-index: 23;
    width: 500px;
}

/* 원장스케줄 */
#directorInfoPopup {
    left: 0;
}

.reservation-sub-pop-class #directorInfoPopup {
    left: -400px !important;
}

#rsvCheckConfirmPop {
    position: absolute;
    top: calc(50% - 453px);
    left: calc(50% - 425px);
    z-index: 23;
}

.invoice-table tbody tr td input {
    height: auto;
    text-align: center;
    padding: 0px;
}

.invoice-inner > div {
    padding: 10px 20px;
    background: #fff;
}

.rsv-check-confirm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 100%;
    font-family: 'Nanum Gothic', sans-serif;
  }

.rsv-check-confirm-table th,
.rsv-check-confirm-table td {
    border: 1px solid #ccc;
    padding: 0;
    vertical-align: top;
}

.rsv-check-confirm-table th.label {
    background-color: #f9f9f9;
    font-weight: bold;
    width: 20%;
    text-align: center;
    vertical-align: middle;
    padding:17px 5px;
}

.rsv-check-confirm-table td.value{
    background-color: #fff;
    width: 30%;
    text-align: center;
    vertical-align: middle;
    height: 100%;
}

.rsv-check-confirm-table .en {
    display: block;
    font-size: 10px;
    color: #666;
    margin-top: 4px;
}
  

/* 대시보드*/
.dashboard {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 30% 70%;
    /* 비율 설정 */
    padding-bottom: 10px;
    width: 82%;
}

.dashboard.all {
    grid-template-columns: 30% 70%;
    /* 비율 설정 */
    grid-template-rows: 35% 65%;
    /* 높이 비율 설정 */
}

.dashboard.all .or-section,
.dashboard.all .room-section,
.dashboard.all .schedule-section {
    display: block;
}

.dashboard.all .or-section {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.dashboard.all .room-section {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.dashboard.all .schedule-section {
    grid-column: 1 / 3;
    grid-row: 2 / 2;
}

.room-section,
.or-section,
.schedule-section {
    display: none;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 5px;
}

.dashboard.room .room-section {
    display: block;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    grid-template-rows: 100%;
    /* 높이를 100%로 설정 */
}

.dashboard.or .or-section {
    display: block;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    grid-template-rows: 100%;
    /* 높이를 100%로 설정 */
}

.dashboard.schedule .schedule-section {
    display: block;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    grid-template-rows: 100%;
    /* 높이를 100%로 설정 */
}

.dashboard-card-container .dashboard-card .dashboard-card-header,
.dashboard-card-container .dashboard-card .dashboard-card-body {
    display: table-cell;
    vertical-align: middle;
}

.dashboard-card-container {
    display: flex;
    gap: 5px;
    width: 100%;
}

.dashboardList__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
}

.dashboardList__header.scheduleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.dashboardList__header.scheduleBox > div:not(.dropdown-menu):not(.dropdown-menu div){
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
}

.dashboard-card-container .dashboard-card .dashboard-card-header,
.dashboard-card-container .dashboard-card .dashboard-card-body {
    display: table-cell;
    vertical-align: middle;
}

.dashboard-card {
    height: auto;
    border-radius: 10px;
    position: relative;
    height: 58px;
    margin-bottom: 3px;
    border-radius: 5px;
    border: 1px solid var(--bor-color);
    background-color: #fff;
    overflow: hidden;
    flex: 0 1 auto;
    box-sizing: border-box;
    width: 100%;
}

.dashboard-card-header {
    width: 50px;
    height: 58px;
    text-align: center;
    padding-left: 7px;
}

.dashboard-card-header .color-bar {
    width: 7px;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--bor-color);
}

.dashboard-card-container .dashboard-card .dashboard-card-header p {
    display: inline-block;
    font-weight: 800;
    padding: 3px;
}

.dashboardList__header .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
}

.dashboardList__header .icon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.18;
}

.dashboardList__header .icon svg {
    width: 18px;
    z-index: 2;
}

.dashboardList__header p {
    font-size: 14px;
    font-weight: 800;
}

.dashboard-card-body {
    position: relative;
    width: calc(100% - 50px);
    padding: 10px;
    height: 58px;
}

.dashboard-card-container .dashboard-card .dashboard-card-body:before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 1px;
    height: calc(100% - 20px);
    background-color: var(--bor-color);
}

.dashboard-card-container .dashboard-card-body p {
    font-size: 100%;
}

.dashboard-card-container .dashboard-card-body .dashboard-card-info {
    line-height: 1;
    font-weight: bold;
    font-size: 9px;
}

.dashboard-card-container .dashboard-card-body p .card-name {
    display: block;
}

.dashboard-card-container .dashboard-card-body .txt-memo {
    font-size: 100%;
    color: #999;
    background-color: transparent;
}

.dashboard-card-container .dashboard-card-body p b {
    font-weight: 800;
}

.dashboardList__body {
    height: calc(100% - 50px);
    width: 100%;
    overflow-y: auto;
}

.dashboard-card-container .container-div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.dashboard-card-name {
    display: block;
    font-weight: bold;
    font-size: 11px;
}

.schedule-body-header-wrap {
    display: flex;
    justify-content: flex-end;
}


.dashboard-table .upDownDrag {
    background-image: url('../img/icons/ico_updown.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    cursor: pointer;
}

.dashboard-table .tcol_1 {
    width: 30px;
}

.dashboard-table .tcol_2 {
    width: 60px
}

.dashboard-table .tcol_3 {
    width: 130px
}

/* 드래그 중인 행 스타일 */
.dashboard-table tr.ui-sortable-helper {
    display: table;
    table-layout: fixed;
    flex-wrap: nowrap;
}

.dashboard-table tr.sortable-row .tcol_3 {
    width: 130px !important;
}

/* 드래그 중인 행의 td들 스타일 */
.dashboard-table tr.ui-sortable-helper td {
    display: table-cell;
}

/* 내부 테이블 고정 */
.sortable-area {
    table-layout: fixed;
}

/* 기존 tcol_ 클래스를 placeholder에도 동일하게 적용 */
.dashboard-table .sortable-placeholder .tcol_1 {
    width: 50px !important;
}

.dashboard-table .sortable-placeholder .tcol_2 {
    width: 60px !important;
}

.dashboard-table .sortable-placeholder .tcol_3 {
    width: 130px !important;
}

.dashboard-header {
    width: calc(100% - 210px);
    position: absolute;
    top: -60px;
    right: 0%;
    height: 50px !important;
    display: flex;
}

.dashboard-header .procedure-header-date-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 400px;
}

.dashboard-header .procedure-header-date-box p {
    font-size: 15px;
    font-weight: bold;
    align-content: center;
    justify-items: center;
    align-items: center;
    height: 100%;
}

.dashboard-header .procedure-header-date-box .prev_btn {
    width: 20px;
    height: 48px;
    font-size: 12px;
    letter-spacing: -.4px;
    font-family: 'Nanum Gothic', sans-serif;
    background: url('/assets/img/icons/ico_arrow-left.svg') no-repeat center/9px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-content: center;
    justify-items: center;
    align-items: center;
    cursor: pointer;
    margin-right: 15px;
}

.dashboard-header .procedure-header-date-box .next_btn {
    width: 20px;
    height: 48px;
    font-size: 12px;
    letter-spacing: -.4px;
    font-family: 'Nanum Gothic', sans-serif;
    background: url('/assets/img/icons/ico_arrow-right.svg') no-repeat center/9px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    align-content: center;
    justify-items: center;
    align-items: center;
    cursor: pointer;
    margin-left: 15px;
}

.dashboard-header .procedure-header-radio-box {
    position: absolute;
    right: 0;
    align-self: center;
    margin-right: 15px;
}

.dashboard-table .drag-handle {
    background-image: url('/assets/img/icons/ico_updown.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto;
    cursor: pointer;
}
.dashboard-table {
    counter-reset: rowNumber; /* 전체 테이블 기준으로 초기화 */
}
.dashboard-table th {
    background-color: var(--color-gray2) !important; 
}

.dashboard-table .number::before {
    counter-increment: rowNumber; /* 각 .number 클래스에서 1 증가 */
    content: counter(rowNumber);  /* 현재 숫자 출력 */
    display: inline-block;
}

/* 경과 예약 */
#fupSchedule {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
}

#fupSchedule .fup-layout{
    padding:0 10px;
}

#fupSchedule .layout-search{
    width: 300px;
}

#fupSchedule .layout-list {
    width: calc(100% - 300px)
}

#fupSchedule .fup-header{
    border-bottom:1px solid #000;
    padding-bottom:20px;
    font-size:13px;
    font-weight:bold; 
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:10px 0;
}

#fupSchedule .fup-body{
    width: 100%;
    height: 100%;
    height: calc(100% - 35px);
}

#fupSchedule .dashboardList__header {
    height: 50px;
}

#fupSchedule .dashboardList__body {
    height: calc(100% - 50px);
    display: flex;
    padding:10px;
}

#fupSchedule .fup-tit {
    padding:20px 0 5px 0;
    font-size:12px;
    font-weight: bold;
}

#fupSchedule .fup-cont select{
    border:1px solid #ddd;
}

#fupCalendarList {
    border:1px solid #ddd;
    padding:10px;
    border-radius: 10px;
    margin: 10px 0;
}

#fupCalendarList .ui-datepicker {
    padding: 0;
    border-radius: 0;
}

#fupCalendarList .ui-datepicker .ui-datepicker-header {
    padding: 0 0 14px;
}

#fupCalendarList .ui-widget.ui-widget-content {
    width: 100%;
    border: 0;
}

#fupCalendarList .ui-datepicker .ui-datepicker-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 28px;
    padding: 0;
    letter-spacing: -0.45px;
}

#fupCalendarList .ui-datepicker .ui-datepicker-prev,
#fupCalendarList .ui-datepicker .ui-datepicker-next {
    top: 6px !important;
}

#fupCalendarList .ui-datepicker th {
    text-transform: uppercase;
}

/* 대시보드 */


/* 문자발송 팝업 */
#msgPopup {
    width: 1200px;
    height: 600px;
    position: relative;
    z-index: 25;
    padding: 20px;
}

.msg-header {
    margin-bottom:10px;
    position: relative;
}

.msg-header .msg-title{
    display: flex; 
    align-items: center; 
    gap: 8px;
    font-weight: 800;
    line-height: 1.4;
}

.msg-header .pop-close{
    position: absolute;
    right: 0;
    top: -2px;
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -9999px;
    background: url('../img/icons/ico_close.svg') no-repeat center/12px auto;
    -webkit-transition: linear 0.3s;
    transition: linear 0.3s;
}

.msg-body {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    height:100%;
    padding-top:20px;
    padding-bottom: 30px;
    border-top: 1px solid var(--font-color-base);
}

.msg-body-left {
    width:20%;
    height:100%;
}

.msg-body-left .msg-left-top{
    height:10%;
    padding:20px;
    margin:0;
    border-radius:10px 10px 0 0;
    position: relative;
}

.msg-body-left .msg-left-top h3{
    text-align: center;
}

.msg-body-left .msg-left-top h3 span{
    font-weight: bold;
    color:#fff
}

.msg-body-left .msg-left-top .text-byte{
    text-align: right;
    position: absolute;
    right: 5px;
    bottom: 0px;
}

.msg-body-left .msg-left-text {
    height: 50%; 
    padding-bottom:10px;
    border-radius:0 0 10px 10px
}

.msg-body-left .msg-left-body {
    height: 30%;
}

.msg-body-left .msg-left-body span{
    width: 100% !important; height: 30px; place-content: center; border-bottom: 1px solid #ddd;
}

.msg-body-left .msg-left-foot {
    height: 10%;
}

.msg-body-center {
    width:10%;
    height:100%;
}

.msg-body-center .msg-center-body {
    height: 90%;
    border:1px solid #ddd;
    padding:5px;
    overflow-y: auto;
}

.msg-body-center .msg-center-foot {
    height: 10%;
}

.msg-body-center .msg-center-top{
    background-color: #c2c2c2;
    height: 10%;
    margin: 0;
    border-radius: 10px 10px 0 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-body-right {
    width:calc(70% - 40px);
    height:100%;
}

.msg-body-right .msg-right-top {
    height: 40px;
    display: flex;
    flex-wrap: wrap;
}

.msg-body-right .msg-right-top .tab-btn{
    width:100px;
    height: 100%;
    align-content: center;
    text-align: center;
    border-radius: 10px 10px 0 0;
    color:#000;
    cursor: pointer;
    background-color: var(--color-gray2);
}

.msg-body-right .msg-right-top .tab-btn.active{
    color:#fff;
    background-color: #5ca1f7;
}

.msg-body-right .msg-right-body {
    height: calc(100% - 60px);
    border: 2px solid #ddd;
    padding:10px;
}

.msg-right-body .msg-right-body-top {
    height:30px;
    width:100%;
    display: flex;
    border-bottom:2px solid #ddd;
    padding-bottom:10px;
    gap:5px;
}

.msg-right-body .msg-right-body-top .depth-btn{
    width:60px;
    height: 100%;
    align-content: center;
    border-radius: 10px 10px 0 0;
    color:#000;
    cursor: pointer;
    position: relative;
    padding-left:5px;
}

.msg-right-body .msg-right-body-top .depth-btn.selected{
   font-weight: bold;
}

.msg-right-body .msg-right-body-top .depth-btn:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(50% - 6px);
    right: 0;
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

.msg-right-body .msg-right-body-content {
    height:calc(100% - 40px);
    width:100%;
    display: flex;
    padding:10px 5px 0 0;
    overflow: auto;
    flex-wrap: wrap;
}

.msg-right-body .msg-right-body-content .msg-box
{
    width:25%;
    height:200px;
    padding-left:10px;
}

.msg-right-body .msg-right-body-content .msg-box .msg-title {
    height: 20px;
    font-weight: bold;
}

.msg-right-body .msg-right-body-content .msg-box .msg-content {
    height: calc(100% - 20px);
    background-color: var(--color-gray2);
    border-radius: 10px;
    position: relative;
    padding:10px;
}

.msgPopCtt { 
    height: 100%;
    overflow: auto;
}

.msg-stt{
    height: 90%;
    overflow: auto;
    padding:0;
}

.cotent-byte {
    position: absolute;
    bottom:10px;
    right: 5px;
}
/* 문자발송 팝업 */

.inv_tr {
    height: 17px !important;
    border:1px solid #ddd;
}

.inv_table .inv_tr td {
    height: 17px !important;
    padding: 0 !important;
    font-size: 10px;
    text-align: center;
    border: 1px solid #ddd !important; 
    background-color: #fff !important;
}

.inv_table input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    vertical-align: middle;
}

.inv_table td {
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.mark{
position: absolute; 
left: 0; 
top: 0; 
width: 36px; 
height: 36px; 
background: url('../img/common/star.png') no-repeat center 10px / auto 15px; 
}

.mark.active{
background-image: url('../img/common/star_on.png');
}


.custom-textarea {
    border: none;
    outline: none; /* 기본 포커스 테두리 제거 */
    width: 100%;
    margin-bottom: 5px;
    color: #333;
    font-weight: 400;
    font-size: 12px;
    height:40px;
    background-color: #f1f4f9;
}

.custom-textarea:focus {
    border: 1px solid #007BFF; /* 포커스되었을 때 테두리 추가 */
    background-color: #fff;
}


span.delete {
    cursor: pointer;
    color: #FF2B6A;
    line-height:36px;
    margin-right:5px;
}

span.save {
    cursor: pointer;
    line-height:36px;
}

.cal-day-btn {
    display: flex;
    gap: 10px;
}

.cal-day-btn div{
    width: 33%;
    border:1px solid #ddd;
    border-radius: 5px;
    padding:8px 5px;
    text-align: center;
    cursor: pointer;
}

.rsvMoveDiv {
    position: absolute;
    display: none;
    border: 1px solid #000;
    font-size: 100%;
    line-height: 1.2;
    font-weight: 700;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    z-index: 5;
    bottom:50%;
    left: 50%;
    width: 100px;
    cursor: pointer;
}

.theBestPayPop * {
    font-size: 11px !important;
}

.theBestPayPop tr.tr_radio input[type='radio']+label {
    margin-right: 30px;
}

.theBestPayPop tr td {
    padding: 5px 15px;
    height: 40px;
    vertical-align: middle;
    background-color: var(--color-gray2);
    margin-bottom: 3px;
}

.theBestPayPop tr.line td {
    height: 5px;
    padding: 0;
    border-radius: 0;
    background-color: #fff;
}

.theBestPayPop tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.theBestPayPop tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


#memo-rsvRgnList {
    text-align: left !important;
}

.podText {
    color:red;
    font-size:20px;
    font-weight: bold;
    padding-left: 10px;
}

.select_basic {
    background-color: #fff;
}

.select_basic:disabled {
    background-color: #ccc;
}

.split {
    display: flex;
    flex-direction: row;
}

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 70%;
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    cursor: col-resize;
}

.qCommon {
    display: none;
}
#qOptionList {
    list-style: none;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 100%;
    height: 150px;
    overflow: auto;
}

#qOptionList li {
    padding: 5px 10px;
    display: flex;              /* input과 버튼을 한 줄에 배치 */
    align-items: center;
    gap: 8px;
    cursor: move;
}

#qOptionList li input[type="text"] {
    flex: 1;                    /* input이 가로 공간 채움 */
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 14px;
}

#qOptionList li .remove-option {
    width: 20px;
    height: 20px;
    background: url("../img/icons/ico_close.svg") no-repeat center center;
    background-size: 12px 12px;  /* 아이콘 크기 */
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

#qOptionList li .remove-option:hover {
    opacity: 1;
}

#qOptionList li.add-option {
    color: gray;
    cursor: pointer;
    display: block;
    text-align: center;
}

#qOptionList li.add-option:hover {
    background: #f1f1f1;
}

.online-wrap{
    display: flex;
    gap:5px;
}

.online-left-content {
    width: 350px;
    border:1px solid #ddd;
    border-radius: 10px;
}

.online-right-content{
    width: calc(100% - 355px);
}

.online-left-content .content-box
{
    border-radius: 10px;
    background-color: var(--color-gray2);
    overflow: hidden;
    height:40px;
    display: flex;
    margin-top:5px
}

.online-left-content .content-box .item{
    height:100%;
    align-content :center;
    text-align :left;
    width:100%;
    padding:5px
}

.online-left-content .content-box .item h2{
   font-weight: bold;
}

.online-left-content .content-box .item button {
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
    box-sizing: border-box;
    background-color: var(--color-base);
}

.online-left-content .content-box .item .disabled 
{
    background-color: var(--color-gray);
}

.online-left-content .content-box input[type="text"], 
.online-left-content .content-box input[type="search"] {
    height: 40px;
    padding: 0 15px;
    width: 100%;
    border: 0;
    background-color: transparent
}

.online-left-content .content-box input[type='radio'] + label,
.online-left-content .bottom-box input[type='radio'] + label{
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    line-height: 10px;
    margin: 5px 0;
    margin-right: 10px;
    width:100%
}

.online-left-content .content-box input[type='radio']:disabled + label,
.online-left-content .bottom-box input[type='radio']:disabled + label {
    color: #aaa; /* 글씨 색 연한 회색 */
    cursor: not-allowed; /* 마우스 포인터도 비활성 느낌 */
    opacity: 0.6; /* 흐려 보이도록 */
}

.online-left-content .content-box input[type='radio'] + label:before,
.online-left-content .bottom-box input[type='radio'] + label:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    text-align: center;
    background: transparent;
    border: 2px solid #333;
    border-radius: 50%;
}

.online-left-content .content-box input[type='radio'] + label:after,
.online-left-content .bottom-box input[type='radio'] + label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    background: transparent;
    border-radius: 50%;
}

.online-left-content .content-box input[type='radio']:checked + label:before,
.online-left-content .bottom-box input[type='radio']:checked + label:before {
  background: #fff  !important;
  border-color: var(--color-base) !important;
}

.online-left-content .content-box input[type='radio']:checked + label:after,
.online-left-content .bottom-box input[type='radio']:checked + label:after {
  background: var(--color-base)  !important;
}

.online-left-content .middle-box {
    width: 100%;     
    background: var(--color-gray2) !important;
    border-radius: 5px;    
    padding: 5px;
    margin-top:5px;
    font-size: 12px;
    letter-spacing: -.4px;
    line-height: 1.5;
    font-family: 'Nanum Gothic', sans-serif;
}

.online-left-content .middle-box .row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e0e0e0; /* 항목 구분선 */
  padding: 6px 0;
}

.online-left-content .middle-box .row:last-child {
  border-bottom: none; /* 마지막 줄은 구분선 제거 */
}

.online-left-content .middle-box .label {
  flex: 0 0 80px; /* 왼쪽 라벨 고정 너비 */
  font-weight: bold;
  color: #666;
}

.online-left-content .middle-box .value {
  flex: 1;
  color: #333;
}

.online-left-content .middle-box .extra {
  flex: 0 0 auto;
  margin-left: auto;
  color: #666;
  font-size: 13px;
}

.online-left-content .bottom-box {
    width: 100%;     
    background: var(--color-gray2) !important;
    border-radius: 5px;    
    padding: 5px;
    margin-top:5px;
    font-size: 12px;
    letter-spacing: -.4px;
    line-height: 1.5;
    font-family: 'Nanum Gothic', sans-serif;
    flex-direction: column; /* 세로로 쌓이게 */
    display: flex;
}

.online-left-content .bottom-box .row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    padding: 6px 0;
    flex-direction: column; /* 세로로 쌓이게 */
    width: 100%;
}

.online-left-content .bottom-box .row:last-child {
  border-bottom: none; /* 마지막 줄은 구분선 제거 */
}

.online-left-content .bottom-box .label {
  width: 100%;
  font-weight: bold;
  color: #666;
}

.online-left-content .bottom-box .value {
  width: 100%;
  color: #333;
  display: flex;
}
.online_table .selecte-online td{
    background-color: #f0f0f0 !important;
}

#tabCont16 .tab-list__cont__body__area.r-box,
#tabCont16_2 .tab-list__cont__body__area.r-box {margin-bottom: 0;}

#tabCont16_2 .tabCont05History .data-delete-btn,
#tabCont16 .tabCont05History .data-delete-btn {
    width: 15px;
    height: 15px;
}

#cate16_2Tab {
    margin-bottom: 10px;
}

.chk {
    justify-items: center;
}

.icon_menual{
     display: inline-block;       /* 블록처럼 크기 지정 가능 */
    width: 30px;                 /* 아이콘 크기 */
    height: 30px;
    background-image: url('../img/icons/ico_menual.png'); /* 이미지 경로 */
    background-size: cover;      /* 아이콘 꽉 채우기 */
    background-position: center; /* 가운데 정렬 */
    background-repeat: no-repeat;
}

.icon_menual_login{
    display: inline-block;       /* 블록처럼 크기 지정 가능 */
    width: 40px;                 /* 아이콘 크기 */
    height: 40px;
    background-image: url('../img/icons/ico_menual.png'); /* 이미지 경로 */
    background-size: cover;      /* 아이콘 꽉 채우기 */
    background-position: center; /* 가운데 정렬 */
    background-repeat: no-repeat;
}

.custom-context-menu {
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    width: 140px;
    padding: 5px 0;
    font-size: 13px;
}
.custom-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.custom-context-menu li {
    padding: 8px 12px;
    cursor: pointer;
}
.custom-context-menu li:hover {
    background: #f0f0f0;
}

#clinic-r-menu.off {
    display:none;
}

#clinic-r-menu {
    display:flex;
    width:250px;
    gap:5px
}

#clinic-r-menu div{
    width:50% !important;
    cursor: pointer;
}

#settingCate10Tab i { font-size: 15px; margin-right:5px;}

#settingTabCont10 .notification-btn { position: relative; }
#settingTabCont10 .badge {
    position: absolute; top: 0; right: 0;
    background-color: var(--primary-blue);
    color: white;
    font-size: 8px;
    width: 14px; height: 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* --- 3. Main Content Area --- */
#settingTabCont10 .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* For Modal positioning context if needed */
}

/* Header */
#settingTabCont10 .top-header {
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

#settingTabCont10 .page-title { font-size: var(--fs-xl); font-weight: 700; }
#settingTabCont10 .user-profile { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
#settingTabCont10 .user-name { font-weight: 700; }
#settingTabCont10 .user-hospital { color: var(--text-gray); }

/* Top Category Tabs */
#settingTabCont10 .category-tabs-wrapper { padding: 0 24px 12px 24px; flex-shrink: 0; }
#settingTabCont10 .category-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
#settingTabCont10 .cat-tab {
    padding: 6px 20px;
    border-radius: 6px;
    font-size: var(--fs-base);
    font-weight: 700;
    white-space: nowrap;
    color: var(--text-gray);
    background-color: var(--white);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s;
}
#settingTabCont10 .cat-tab.active { background-color: var(--active-tab-bg); color: white; }

/* Sub Navigation */
#settingTabCont10 .sub-nav {
    padding: 0 24px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}
#settingTabCont10 .sub-tab-btn {
    padding-bottom: 10px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-light);
    display: flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
#settingTabCont10 .sub-tab-btn:hover { color: var(--text-gray); }
#settingTabCont10 .sub-tab-btn.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }

/* Viewport */
#settingTabCont10 .content-viewport { flex: 1; padding: 24px; overflow-y: auto; }
#settingTabCont10 .view-section { height: 100%; }

/* --- 4. Grid System & Cards --- */
#settingTabCont10 .grid-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; height: 100%; }
#settingTabCont10 .col-4 { grid-column: span 4; }
#settingTabCont10 .col-3 { grid-column: span 3; }
#settingTabCont10 .col-9 { grid-column: span 9; }

#settingTabCont10 .card-section {
    background-color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 20px;
    display: flex; flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
#settingTabCont10 .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-shrink: 0; }
#settingTabCont10 .card-title { font-size: 16px; font-weight: 700; color: var(--text-dark); }
#settingTabCont10 .card-header-right { font-size: var(--fs-sm); color: var(--text-light); display: flex; align-items: center; }
#settingTabCont10 .card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#settingTabCont10 .scrollable-content { overflow-y: auto; flex: 1; }

/* --- 5. Components --- */
#settingTabCont10 .plan-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#settingTabCont10 .plan-name { font-size: var(--fs-xl); font-weight: 700; }
#settingTabCont10 .badge-active { background-color: var(--primary-blue); color: white; font-size: var(--fs-sm); padding: 2px 8px; border-radius: 100px; }
#settingTabCont10 .plan-features { font-size: var(--fs-base); color: var(--text-gray); display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
#settingTabCont10 .feature-item { display: flex; align-items: center; gap: 8px; }
#settingTabCont10 .check-icon { color: var(--primary-blue); font-weight: bold; }

#settingTabCont10 .billing-box { background-color: #EFF6FF; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
#settingTabCont10 .billing-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: var(--fs-base); }
#settingTabCont10 .billing-row.total { border-bottom: 1px solid #DBEAFE; padding-bottom: 8px; margin-bottom: 12px; align-items: flex-end; }
#settingTabCont10 .billing-row.total span:first-child { font-weight: 700; white-space: nowrap; }
#settingTabCont10 .billing-row.total span:last-child { font-size: var(--fs-xxl); font-weight: 700; color: var(--primary-blue); }
#settingTabCont10 .billing-detail-row { display: flex; justify-content: space-between; font-size: var(--fs-base); color: var(--text-gray); margin-bottom: 6px; }
#settingTabCont10 .font-medium { font-weight: 500; }

/* Tables */
#settingTabCont10 .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
#settingTabCont10 .data-table th { text-align: left; padding: 8px; background-color: #F9FAFB; color: var(--text-gray); font-weight: 500; position: sticky; top: 0; z-index: 5; }
#settingTabCont10 .data-table td { padding: 10px 8px; border-bottom: 1px solid #F3F4F6; color: var(--text-dark); }
#settingTabCont10 .text-right { text-align: right; }
#settingTabCont10 .text-center { text-align: center; }
#settingTabCont10 .text-red { color: var(--danger); }
#settingTabCont10 .text-blue { color: var(--primary-blue); }
#settingTabCont10 .font-bold { font-weight: 700; }

/* Toggle Switch */
#settingTabCont10 .toggle-switch { width: 40px; height: 20px; background-color: #D1D5DB; border-radius: 20px; padding: 2px; cursor: pointer; transition: background-color 0.3s; position: relative; }
#settingTabCont10 .toggle-switch.active { background-color: var(--primary-blue); }
#settingTabCont10 .toggle-knob { width: 16px; height: 16px; background-color: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
#settingTabCont10 .toggle-switch.active .toggle-knob { transform: translateX(20px); }

/* Payment Method */
#settingTabCont10 .payment-info-row { display: flex; justify-content: space-between; font-size: var(--fs-base); margin-bottom: 20px; }
#settingTabCont10 .label { color: var(--text-gray); }
#settingTabCont10 .value { font-weight: 500; }
#settingTabCont10 .btn-primary { width: 100%; background-color: var(--primary-blue); color: white; padding: 8px; border-radius: 6px; font-weight: 500; font-size: var(--fs-base); transition: background 0.2s; }
#settingTabCont10 .btn-primary:hover { background-color: var(--primary-blue-hover); }

/* License Cards */
#settingTabCont10 .license-summary-row { display: flex; gap: 12px; }
#settingTabCont10 .license-stat-box { flex: 1; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
#settingTabCont10 .stat-box-gray { background-color: #F9FAFB; }
#settingTabCont10 .stat-box-blue { background-color: #EFF6FF; }

/* Usage Cards (Add-on) */
#settingTabCont10 .usage-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 100%; }
#settingTabCont10 .usage-item { background-color: rgba(239, 246, 255, 0.5); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Progress Bar */
#settingTabCont10 .progress-container { margin-bottom: 24px; }
#settingTabCont10 .progress-header { display: flex; justify-content: space-between; font-size: var(--fs-base); font-weight: 700; margin-bottom: 4px; }
#settingTabCont10 .progress-track { width: 100%; height: 12px; background-color: #F3F4F6; border-radius: 100px; overflow: hidden; }
#settingTabCont10 .progress-fill { height: 100%; border-radius: 100px; }
#settingTabCont10 .progress-alert { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--fs-sm); color: var(--danger); font-weight: 700; }

/* Utilities */
#settingTabCont10 .flex-1 { flex: 1; }
#settingTabCont10 .min-h-0 { min-height: 0; }
#settingTabCont10 .mt-auto { margin-top: auto; }

/* --- 6. Modal Styles --- */
#settingTabCont10 .modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    background-color: white;
    border-radius: 8px;
    width: 400px;
    max-width: 90%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    position: relative;
}

/* Cancel Subscription Modal Header */
.modal-box.danger-modal {
     border-top: 4px solid var(--danger);
}

/* Standard Header */
.modal-header {
    padding: 20px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-close-btn {
    color: var(--text-dark);
    font-size: 18px;
    cursor: pointer;
}

.modal-body { padding: 0 20px 20px; }

/* Modal Summary Box */
.modal-summary-box {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.modal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: var(--fs-base);
    color: var(--text-dark);
}

.modal-row.highlight {
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 12px;
}

.modal-divider {
    height: 1px;
    background-color: #E5E7EB;
    margin: 12px 0;
    border-top: 1px dashed #E5E7EB;
    background: none;
}

.modal-total-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--danger);
}

.modal-total-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--danger);
}

.modal-note {
    font-size: 9px;
    color: var(--text-gray);
    margin-top: 4px;
    font-weight: 700;
}

/* Modal Warning Box */
.modal-warning-section { margin-bottom: 20px; }

.warning-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: var(--fs-base);
}

.warning-list {
    list-style: none;
    font-size: 11px;
    color: var(--text-dark);
    line-height: 1.6;
}

.warning-list li {
    position: relative;
    padding-left: 10px;
}

.warning-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-dark);
}

/* Modal Buttons */
.modal-actions { display: flex; gap: 8px; }

.btn-cancel {
    flex: 1;
    padding: 10px;
    border: 1px solid #E5E7EB;
    background-color: white;
    color: var(--text-gray);
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
}

.btn-confirm-danger {
    flex: 1;
    padding: 10px;
    background-color: #D32F2F;
    color: white;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
}

.btn-confirm-danger:hover { background-color: #B71C1C; }

.btn-confirm-save {
    width: 100%;
    padding: 12px;
    background-color: var(--dark-btn);
    color: white;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    margin-top: 8px;
}

/* Payment Form Styles */
#payment-modal .form-group { margin-bottom: 16px; }
#payment-modal .form-label {
    display: block;
    font-size: var(--fs-base);
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}
#payment-modal .form-input {
    width: 100%;
    padding: 10px;
    background-color: #F9FAFB;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-dark);
    font-size: var(--fs-base);
}
#payment-modal .form-input::placeholder { color: var(--text-light); }
#payment-modal .form-input:focus { outline: none; border-color: var(--primary-blue); background-color: white; }

#payment-modal .form-row { display: flex; gap: 12px; }
#payment-modal .helper-text-red {
    font-size: 10px;
    color: var(--danger);
    margin-top: 4px;
    font-weight: 500;
}