/*
Theme Name: CHAON Admin
Author: ibiz
Author URI: http://plang.co.kr
Description: ㈜차온 동물실험윤리위원회 운영시스템
Version: 1.0
*/

/*** 폰트 적용 ***/
@font-face {
	font-family: 'SUIT Variable';
	font-weight: 100 900;
	src: url('../fonts/SUIT-Variable.woff2') format('woff2-variations');
}


@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}


/*** Basic ***/
body { font-family: "Paperozi", serif; font-size: 1rem; font-weight: 400; line-height: 1.45; color: #6e6b7b; direction: ltr; background: #f8f9fa; }
a { text-decoration: none; }
input:focus, button:focus, select:focus, textarea:focus { box-shadow: none !important; }
input:focus { border-color: #ffca2c !important; }
.box-shadow { -webkit-box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%); box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%); }
.border-gray { border-color: #ced4da !important; }
.bg-gray { background-color: #dddddd !important; }
.bg-img { background-position: center; background-size: cover; }
.pc-only { display: block !important; }
.btn.pc-only { display: inline-block !important; }
.mc-only { display: none !important; }
.btn.mc-only { display: none !important; }
span.mc-only { display: none !important; }
span.pc-only { display: inline-block !important; }
th.pc-only, td.pc-only { display: table-cell !important; }


/*** Top Menu ***/
.vertical-overlay-menu .content { margin-left: 0; }
.navbar-floating .navbar-container { padding: .8rem 0rem; }
.header-navbar .navbar-container { width: 100%; margin: auto; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; }
.nav { padding-left: 0; margin-bottom: 0; border-radius: .25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; }
.navbar { padding: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.navbar-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style: none; }
.navbar-light .navbar-nav .nav-link { color: rgba(34,41,47,.5); }
.nav-item.title { padding-top: 17.5px; padding-bottom: 17.5px; }
.navbar-expand { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.navbar-expand .navbar-nav { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.header-navbar { padding: 0; min-height: 4.45rem; -webkit-transition: all .3s ease,background 0s; transition: all .3s ease,background 0s; z-index: 997; }
.menu-hide .navbar-nav { display: flex !important; }
.header-navbar.floating-nav { position: fixed; right: 0; width: calc(100% - 4rem - 260px); margin: 0 2rem 0; border-radius: .428rem; z-index: 12; }
.menu-hide .header-navbar.floating-nav { width: calc(100% - 4rem); }
.menu-collapsed .header-navbar.floating-nav {  width: calc(100% - 4.4rem - 74px); }
.menu-collapsed.menu-hide .header-navbar.floating-nav {  width: calc(100% - 4rem); }	
.header-navbar .navbar-container ul.navbar-nav li { line-height: 1.5; margin-right: 1rem; }
.header-navbar .navbar-container ul.navbar-nav li a { position: relative; line-height: 1.5; color: #6e6b7b; font-size: 0.875rem; }
.bookmark-wrapper .bookmark-title { padding-right: 1rem; margin-right: 1rem; margin-bottom: 0; color: #6e6b7b; }
.breadcrumb-item { font-size: 0.875rem; }
.breadcrumb-item a { color: #6e6b7b; }
.breadcrumb-item + .breadcrumb-item::before { display: none; }
.breadcrumb-item + .breadcrumb-item::after { float: left; padding-right: 0.5rem; color: #6e6b7b; content: var(--bs-breadcrumb-divider, ">"); }
.btn-change { vertical-align: text-top; color: #FFF; background-color: #e72a18; }
.btn-change:hover { background-color: rgba(0,212,255,1); color: #2b8ae8; }
.header-navbar .navbar-container ul.navbar-nav li .user-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; float: left; margin-right: .8rem; }
.header-navbar .navbar-container ul.navbar-nav li .user-name { margin-top: 1rem; margin-left: .2rem; color: #6e6b7b; }
.header-navbar .navbar-container ul.navbar-nav li>a.nav-link { color: #6e6b7b; position: relative; padding: 0 .5rem; }
.b-avatar { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 2.5rem; height: 2.5rem; overflow: hidden; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #f1f0fd; }
.b-avatar-img { border-radius: inherit; width: 100%; height: 100%; background-size: cover; background-position: center; }
.sidenav-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; background-color: rgba(34,41,47,.5); height: 120vh; visibility: hidden; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 997; }
.sidenav-overlay.show { opacity: 1; visibility: visible; -webkit-transition: all .5s ease; transition: all .5s ease; cursor: pointer; }
.header-navbar { transition-duration: 300ms; transition-property: transform; transform: translateY(0px); }
.header-navbar.cambio-header { transition-duration: 300ms; transition-property: transform; transform: translateY(-60px); will-change: position, transform; }

/*** scroll ***/
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
.scroll .nav, .scroll ul { position: relative; min-width: max-content; flex-wrap: nowrap; }
.scroll { -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ }
.scroll::-webkit-scrollbar{ display: none;	width: 0;  /* Remove scrollbar space */	height: 0; background: transparent;  /* Optional: just make scrollbar invisible */ -webkit-appearance: none; }

/*** Drop Menu ***/
.dropdown-menu { background-clip: padding-box; border: 1px solid rgba(34,41,47,.05); margin-top: 10px; }
.dropdown-menu.show { -webkit-transform: scale(1); transform: scale(1); margin-top: 0; }
.dropdown-item { padding: .65rem 1.28rem; }
.dropdown-item:hover { color: #2b8ae8; background: #f1f0fd; }
.dropdown-toggle::after { position: absolute; right: 1rem; }
.dropdown-toggle.show:after { transform: rotate(180deg); -webkit-transition: -webkit-transform .25s ease; transition: -webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease,-webkit-transform .25s ease; }

/*** Datepicker ***/
.datepicker table tr td, .datepicker table tr th { font-size: 14px; }
.datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active { color: #fff; background-color: #2b8ae8 !important; border-color: #2b8ae8 !important; }

/*** Main Menu ***/
.main-menu { background: #FFF; z-index: 1031; position: absolute; display: table-cell; height: 100%; overflow: hidden; }
.main-menu a { outline: none; }
.main-menu.menu-fixed { position: fixed; }
.vertical-menu-modern .main-menu { -webkit-transform: translateZ(0); transform: translateZ(0); }
.vertical-menu-modern .main-menu { -webkit-transition: .4s cubic-bezier(.25,.8,.25,1),background 0s; transition: .4s cubic-bezier(.25,.8,.25,1),background 0s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.vertical-menu-modern.menu-expanded .main-menu { width: 260px; }
.vertical-menu-modern.menu-collapsed .main-menu { width: 80px; }
.vertical-menu-modern.menu-collapsed .main-menu .navigation { overflow: visible; }
.vertical-overlay-menu .main-menu, .vertical-overlay-menu.menu-hide .main-menu { left: -260px; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: width .25s,opacity .25s,-webkit-transform .25s; transition: width .25s,opacity .25s,-webkit-transform .25s; transition: width .25s,opacity .25s,transform .25s; transition: width .25s,opacity .25s,transform .25s,-webkit-transform .25s; width: 260px; }
.vertical-overlay-menu.menu-open .main-menu { -webkit-transform: translate3d(260px,0,0); transform: translate3d(260px,0,0); opacity: 1; -webkit-transition: width .25s,opacity .25s,-webkit-transform .25s; transition: width .25s,opacity .25s,-webkit-transform .25s; transition: width .25s,opacity .25s,transform .25s; transition: width .25s,opacity .25s,transform .25s,-webkit-transform .25s; }
.main-menu .navbar-header { position: relative; padding: .35rem 1rem .3rem 1.64rem; width: 260px; height: 7.5rem; -webkit-transition: all .3s ease,background 0s; transition: all .3s ease,background 0s; }
.main-menu .main-menu-content { float: left; padding: .3rem .875rem .3rem .875rem; width: 260px; height: calc(100% - 12rem)!important; position: relative; overflow-y: scroll!important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; }
.main-menu .main-menu-content::-webkit-scrollbar { width: 3px; }
.main-menu ul { list-style: none; margin: 0; padding: 0; }
.main-menu ul.navigation-main { padding-bottom: .75rem; overflow-x: hidden; }
.main-menu ul.navigation-main .dropdown-menu { position: relative; border: none; }
.main-menu ul.navigation-main>li:first-child { margin-top: .5rem; }
.main-menu .navbar-header .navbar-brand { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; margin-top: 1.35rem; margin-right: 1rem; line-height: inherit; white-space: nowrap; }
.main-menu .navbar-header .navbar-brand .brand-logo img { max-width: 121px; }
#nav-toggle { position: absolute; top: 1rem; right: 0.5rem; width: 18px; }
#nav-toggle svg { color: #666; }
.menu-expanded .brand-logo.expanded { display: block !important; }
.menu-collapsed .brand-logo.collapsed { display: block !important; }
.menu-collapsed .brand-text { display: none; }
.vertical-menu-overlay .main-menu .navbar-header .navbar-brand .brand-logo img { max-width: 36px; }
.main-menu .navbar-header .navbar-brand .brand-text, .main-menu .navbar-header .navbar-brand .brand-text { padding-left: 0.5rem; padding-top: 0.25rem; color: #212529; font-weight: 600; letter-spacing: .01rem; font-size: 1.45rem; margin-bottom: 0; -webkit-animation: fadein .3s cubic-bezier(.25,.8,.25,1) 0s 1 normal forwards; animation: fadein .3s cubic-bezier(.25,.8,.25,1) 0s 1 normal forwards; }
.badge-sidemenu { background-color: #ffefe1; color: #000; border-radius: 3rem; font-size: 0.625em; font-weight: 400; margin-left: 0.25rem; vertical-align: text-bottom; }
.nav-search { display: flex; gap: 1rem; }

.navigation { font-size: 1.1rem; overflow-y: hidden; padding-bottom: 20px; }
.navigation li { position: relative; white-space: nowrap; padding: 0.25rem 0; -webkit-transition: all .3s ease; transition: all .3s ease; }
.navigation li:hover svg { color: #000; }
.menu-collapsed .navigation li { padding: 0.25rem 0.25rem; -webkit-transition: all .3s ease; transition: all .3s ease; }
.menu-collapsed .navigation li.sidebar-group-active { width: 55px; }
.navigation li a { display: block; text-overflow: ellipsis; overflow: hidden; }
.main-menu .navigation>li ul li>a { padding: 0.625rem 1rem 0.625rem 1rem 1.2rem; }
.main-menu .navigation li a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.main-menu .navigation li a { padding: 0.625rem; color: #212529; font-size: 1rem; line-height: 1.45rem; }
.main-menu .navigation li.sidebar-group-active { background: #ffc107; border-radius: .428rem; -webkit-box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%); box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%); }
.main-menu .navigation li .dropdown-item.active, .main-menu .navigation li .dropdown-item:hover, .main-menu .navigation li .dropdown-item:focus { background: rgba(250, 250, 250, 0.2); }
.main-menu .navigation li.sidebar-group-active a, .main-menu .navigation li.sidebar-group-active a:hover, .main-menu .navigation li.sidebar-group-active svg { font-weight: 500; }
.main-menu .navigation>li:not(.open)>a { display: none; }
.main-menu .navigation li.nav-item a:hover>*, .main-menu .navigation li a>* { -webkit-transition: -webkit-transform .25s ease; transition: -webkit-transform .25s ease; transition: transform .25s ease; transition: transform .25s ease,-webkit-transform .25s ease; }
.main-menu .navigation li .dropdown-item { padding-left: 2rem; }
.main-menu .navigation li .dropdown-item::before { position: absolute; left: 1.5rem; content: "○"; font-size: 0.5rem; }
.main-menu .navigation li i { width: 20px; text-align: center; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 0.6rem; letter-spacing: -0.5px; }
.text-truncate:hover { font-weight: bold; }
.menu-collapsed .text-truncate { display: none; } 
.menu-collapsed .nav-item.open .text-truncate { display: none; }
.menu-collapsed .nav-item svg.left-arrow { transform: rotate(180deg); }
.card-headermenu .col { padding: 0 0.25rem; }
.card-headermenu .card-body { padding: 1.25rem 1.5rem; }
.card-headermenu li { min-width: 90px; }
.card-headermenu .btn-cat { position: relative; padding: 0.5rem 0rem; width: 100%; margin-right: 1.5rem; border: 0; }
.card-headermenu .btn-cat.active { background-color: #ffc107; }
.card-headermenu .btn-cat.active .cat-title { color: #000; padding-left: 1rem; padding-right: 1rem; }
.card-headermenu .cat-title { font-size: 1.125rem; line-height: 1.2; }

/*** Login ***/
.auth-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-preferred-size: 100%; flex-basis: 100%; min-height: 100vh; min-height: calc(var(--vh, 1vh)*100); width: 100%; }
.auth-wrapper .logo-area { display: flex; align-items: center; margin: 1.35rem 0; }
.auth-wrapper .logo-area .brand-logo { max-width: 180px; }
.auth-wrapper .logo-area .brand-text { padding-left: 0.5rem; padding-top: 1rem; color: #fff; font-weight: 600; letter-spacing: .01rem; font-size: 1.45rem; }
.auth-wrapper .auth-inner { width: 100%; position: relative; height: 100vh; overflow-y: auto; height: calc(var(--vh, 1vh)*100); background: #2b8ae8; }
.auth-wrapper .auth-bg { background-color: #fff; }
.form-check-input.text-warning:checked { background-color: #ffc107; border-color: #ffc107; }

/*** Content ***/
.navbar-container, .content-wrapper, .footer p { inline-size: 100%; margin-inline: auto; max-inline-size: 1440px; }
.content { position: relative; margin-left: 260px; padding: 0; -webkit-transition: all .3s ease; transition: all .3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-height: calc(100% - 3.35rem); }
.content.app-content { padding: 4.5rem 2rem 0; min-height: calc(100vh - 4rem); }
.vertical-menu-modern.menu-collapsed .app-content, .vertical-menu-modern.menu-collapsed .footer { margin-left: 80px; }
.content.app-content .content-overlay { position: fixed; opacity: 0; width: 100%; height: 100%; top: 0; bottom: 0; -webkit-transition: all .7s,z-index 0s; transition: all .7s,z-index 0s; z-index: -1; background-color: rgba(34,41,47,.5); cursor: pointer; }
.header-navbar-shadow { display: none; }
.navbar-floating .header-navbar-shadow { display: block; width: 100%; height: 74px; position: fixed; top: 0; z-index: 11; padding-top: 2.2rem; background: linear-gradient(180deg, rgba(248, 249, 250, 1), rgba(248, 249, 250, 0)); left: 0; }
.match-height>[class*=col] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; }
.match-height>[class*=col]>.card { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }
/* card */
.card { font-size: 0.875rem; margin-bottom: 1rem; overflow: hidden; }
.card { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; -webkit-transition: all .3s ease-in-out,background 0s,color 0s,border-color 0s; transition: all .3s ease-in-out,background 0s,color 0s,border-color 0s; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .428rem; border: none; -webkit-box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%); box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%); }
.card-statistics .card-header { padding-left: 2.4rem; }
.card .card-header { border-bottom: none; padding: 1rem 1.5rem; background-color: transparent; }
.card-header:first-child { border-radius: calc(.428rem - 1px) calc(.428rem - 1px) 0 0; }
.card .card-header { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.card-header { padding: 1.5rem 1.5rem; margin-bottom: 0; background-color: rgba(34,41,47,.03); border-bottom: 1px solid rgba(34,41,47,.125); }
.card-body { padding: 1.5rem; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; }
.card .card { -webkit-box-shadow: none!important; box-shadow: none!important; }
.card.border .border-inner { padding: 1rem; margin-bottom: 0; border-radius: .5rem; }
.border-inner li { list-style: none; float: left; padding: 0.125rem 0.25rem; }
.border-bold { border: 3px solid #e9ecef !important; }
/* list-group */
.list-group.list-group-circle { border: none; font-size: 1rem; margin-bottom: 2.5rem; }
.list-group.list-group-circle .list-group-item { border: none; background: none; padding: 0.25rem 1rem; }
.list-group.list-group-circle .list-group-item:after { content: " "; color: #6e6b7b; position: absolute; height: 10px; width: 10px; top: 0.6rem; left: 0; background-repeat: no-repeat; background-position: 50%; background-size: 10px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%236e6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-circle'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.list-group.border-0 .list-group-item { border: none; background: none; padding: 0.25rem 1rem; }
.page-ul { list-style: none; padding-left: 0; }
.page-ul li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.68rem; }
.page-ul li:before { position: absolute; top: 9px; left: 0px; display: inline-block; content: ""; width: 18px; height: 18px; background-position: center; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle fill='rgba(180, 151, 89, 1)' cx='12' cy='5' r='2'></circle></svg>"); }
.page-ul-sm li { font-size: 0.875rem; line-height: 1.2rem; }
.page-ul-sm li:before { top: 6px; }
.help-box { background-color: #ffefe1; border-radius: 0.25rem; padding: 1.5rem 1rem; margin-bottom: 1rem; }
/* input-group */
.input-group-append, .input-group-prepend { margin-left: -1px; display: -webkit-box; display: -ms-flexbox; display: flex; }
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text
{ border-top-left-radius: 0;  border-bottom-left-radius: 0; }
.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text 
{ border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text { background: #f5f5f5; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #f5f5f5; }
.input-group-text:first-child { min-width: 52px; }
/* etc */
.text-primary { color: #2b8ae8 !important; }
.bg-primary { background-color: #2b8ae8 !important; }
.border-primary { border: 1px solid #2b8ae8 !important; }
.bg-bluegradient { background: #2b8ae8; }
/* icon */
.inline-icon { display: flex; align-items: center; justify-content: center; margin-right: 1rem; }
.icon-rounded { width: 42px; height: 42px; background-color: #ffefe1; border-radius: 0.25rem; }
.icon-rounded i { font-size: 1rem; }
.icon-rounded-lg { width: 64px; height: 64px; background-color: #ffefe1; border-radius: 0.25rem; }
.icon-rounded-lg i { font-size: 1.5rem; }
.icon-rounded-xl { width: 100px; height: 100px; background-color: #ffefe1; border-radius: 0.25rem; }

/* charts */
.progress-bar { background-color: #2b8ae8; }
.chart-wrapper { position: relative; }
.chart-description-center { position: absolute; top: calc(50% - 18px); width: 100%; text-align: center; }
.chart-description-top { position: absolute; top: 1rem; width: 100%; }
.chart-description-bottom { position: absolute; bottom: 1rem; width: 100%; }

/*** Button ***/
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }
.btn { padding: 0.375rem 1.25rem; border-radius: .358rem; font-size: 0.875rem; }
.btn-lg { padding: 0.625rem 2rem; font-size: 1.125rem; }
.btn-sm, .btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.2rem; }
.form-check-input-lg { width: 1.25em; height: 1.25em; }
.btn-primary { border-color: #2b8ae8 !important; background-color: #2b8ae8 !important; }
.btn-outline-primary { color: #217ad3 !important; border-color: #2b8ae8 !important; }
.btn-outline-primary.disabled { border-color: #ced4da !important; }
.btn-primary:hover { border-color: #217ad3 !important; background-color: #217ad3 !important; }
.btn-outline-primary:hover, .btn-outline-primary.active { border-color: #2b8ae8 !important; background-color: #2b8ae8 !important; color: #fff !important; }
.btn-outline-secondary.disabled { border: 1px solid #ced4da; opacity: 1; color: #212529; }
.btn-danger { background-color: #dc3545 !important; border-color: #dc3545 !important; }
.btn-danger:hover { background-color: #bb2d3b !important; border-color: #bb2d3b !important; }
.btn svg { float: left; margin-right: 0.5rem; }
.btn-svg-only { height: 35px; padding-left: 0.5rem; padding-right: 0; }
.btn.h-auto { padding: .375rem .75rem !important; }
.btn-custom-del { color: #2b8ae8; background: #ddd; padding: 0.1rem 0.25rem; margin: 0 0.1rem; line-height: 0.75rem; font-size: 0.75rem; vertical-align: baseline; border-radius: 50%; }
.custom-arrow { display: inline-block; background: #fff; border: 1px solid #ddd; padding: 0.35rem 0 0.25rem 0; border-radius: .5rem; }
.custom-arrow select { border: none; outline: 0; background: none; height: auto; padding: 0 2rem 0 0.5rem; appearance: none; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23d8d6de' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1rem center/10px 10px; }
.custom-checkbox.custom-control, .custom-radio.custom-control {  }
.custom-checkbox .custom-control-input, .custom-radio .custom-control-input { width: 1.285rem; height: 1.285rem; }
.custom-checkbox .custom-control-label, .custom-radio .custom-control-label { position: static; margin-bottom: 0; line-height: 1.285rem; padding-left: .5rem; vertical-align: top; min-width: 36px; }
.custom-control { position: relative; z-index: 1; display: block; min-height: 1.45rem; -webkit-print-color-adjust: exact; color-adjust: exact; }
.custom-control-input { border-color: #7367f0; background-color: #7367f0; color: #7367f0; width: 1.285rem; padding: 0; }
.custom-radio label { margin-bottom: 0; vertical-align: text-bottom; }
.custom-control:first-child { padding-left: 0; }
.custom-checkbox .custom-control-input:checked .custom-control-label:before, .custom-radio .custom-control-input:checked .custom-control-label:before { position: absolute; left: 0; width: 18px; height: 18px; border-color: #7367f0; background-color: #7367f0; -webkit-box-shadow: 0 2px 4px 0 rgba(115,103,240,.4)!important; box-shadow: 0 2px 4px 0 rgba(115,103,240,.4)!important; }
.custom-checkbox .custom-control-label:after, .custom-checkbox .custom-control-label:before, .custom-radio .custom-control-label:after, .custom-radio .custom-control-label:before { left: 0; width: 18px; height: 18px; }
.custom-control-inline { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 1rem; }
.redline { border-color: #ef7e75 !important; }
.redline select { border-color: #ef7e75 !important; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23ef7e75' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 1rem center/10px 10px; }
.btn-morelink { color: #666; font-weight: bold; }
.btn-area {
	display: flex;
	align-items: center;
	justify-content: end;
	padding: 2rem 0 3rem;
}

/*** Round Menu ***/
.card-roundmenu { margin-top: 45px; }
.roundmenu-wrapper {  margin-top: -45px; width: 100%; height: auto; }
.roundmenu { width: 100%; float: left; display: inline-block; }
.roundmenu label { float: left; padding: 0; color: #333; position: relative; display: block; width: 25%; height: 45px; line-height: 45px; font-size: 16px; text-align: center; color: #333; cursor: pointer; margin: 0; }
.roundmenu label:hover strong { background: #ddd; color: #000;  }
.roundmenu label.active strong, .roundmenu label.active:hover strong { background: #e52716; background: linear-gradient(180deg, rgba(247,49,32,1) 0%, rgba(219,39,22,1) 100%); color: #fff !important; font-weight: 600; }
.roundmenu label strong { position: absolute; left: 0; font-size: 1.2rem; width: calc(100% - 1px); background: #e6e6e6; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(226,226,226,1) 100%); border-right: 1px solid #ddd; z-index: 2; -webkit-box-shadow: 0px -6px 6px 0px rgb(0 0 0 / 5%); box-shadow: 0px -6px 6px 0px rgb(0 0 0 / 5%); }
.roundmenu label, .roundmenu label strong { border-top-left-radius: .428rem; border-top-right-radius: .428rem; }

/*** Tab Menu ***/
.tabmenu-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 1.5rem; }
.tabmenu { width: 100%; float: left; display: inline-block; }
.tabmenu label { position: relative; display: inline-block; padding: .61rem .61rem; font-size: 18px; text-align: center; color: #6e6b7b; margin-bottom: 0; cursor: pointer; }
.tabmenu label.active:after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3px; left: 0; background: #2b8ae8; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s;  }
.tabmenu label:hover, .tabmenu label.active { color: #2b8ae8; font-weight: 600; }
.tabmenu.scroll-snap { position: fixed; right: 0; width: calc(100% - 4rem) !important; margin: 0 2rem 0;	top: 60px; background: #fff; z-index: 12; border: 1px solid rgba(0,0,0,.125); border-radius: .428rem; box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%); }
.menu-collapsed .tabmenu.scroll-snap { width: calc(100% - 4rem) !important; margin: 0 2rem 0; }
.tabmenu-round .btn { border-top-left-radius: 0.428rem !important;  border-top-right-radius: 0.428rem !important; }
.tabmenu-round .btn.active, .tabmenu-round .btn.active:hover { background: #2b8ae8 !important; color: #fff !important; font-weight: bold; }
.tabmenu-round .btn:hover { background: #cac7ff !important; color: #2b8ae8 !important; }
.tabmenu-round .btn.active:after { content: ""; position: absolute; bottom: 0; width: 100%; height: 3px; left: 0; background: #2b8ae8; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s;  }
.btn-tabmenu > .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.btn-tabmenu > .btn:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-tabmenu.scroll-snap { position: fixed; right: 0; width: calc(100% - 4rem - 260px) !important; margin: 0 2rem 0; top: 60px; background: #fff; z-index: 12; box-shadow: 0 4px 16px 0 rgb(0 0 0 / 15%); }
.btn-tabmenu-bottom.scroll-snap { position: fixed; right: 0; width: calc(100% - 4rem - 260px) !important; margin: 0 2rem 0; top: 100px; background: #fff; z-index: 12; }
.menu-collapsed .btn-tabmenu.scroll-snap { width: calc(100% - 4rem) !important; }
.menu-collapsed .btn-tabmenu-bottom.scroll-snap { width: calc(100% - 2rem) !important; }
.tabmenu-content { position: relative; }
.tabmenu-right-btn { position: absolute; top: -4rem; right: 0; }

/*** Round Table ***/
.table table { width: 100%; max-width: 100%; margin-bottom: 0px; border-collapse: collapse; }
.table-responsive table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table td, .table th { padding: .375rem; border: 1px solid #ced4da; vertical-align: middle; color: #6e6b7b; }
.table.even tr:nth-child(even) { background: #f5f5f5; }
.table.odd tr:nth-child(odd) { background: #f5f5f5; }
.table.even th { background: #f5f5f5; }
.table.odd th { background: #fff; }
.fixedheader { position: sticky; top: 0; z-index: 2 }
.fixedleft { position: sticky; left: 0; background: #fff; }
.table.even tr:nth-child(even) td.fixedleft { background: #f5f5f5; }
.table.odd tr:nth-child(odd) td.fixedleft { background: #f5f5f5; }
.table-bordered table, .table-bordered td, .table-bordered th { border: 1px solid #ebe9f1 !important; }
.roundmenu-content th, .roundmenu-content td { border: none; border-top: 1px solid #ebe9f1; }
.roundmenu-content tr:last-child td { border-bottom: 1px solid #ebe9f1; }
.card-round-table { background: #f6f6f6; }
.card-round-table th, .card-round-table td { padding-top: .5rem; padding-bottom: .5rem; text-align: center; }
.card-round-table tr:hover { background: #fff; }
.card-round-table tr.active { background: #fff; -webkit-box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%); box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%); }
.card-round-table th:nth-child(2), .card-round-table td:nth-child(2) { text-align: left; width: 34%; }
.card-body.p-0.table table { border-radius: calc(.428rem - 1px) calc(.428rem - 1px) 0 0; }
.card-body.p-0 .table th:first-child, .card-body.p-0 .table td:first-child { padding-left: 1rem; }
.card-body.p-0 .table th:last-child, .card-body.p-0 .table td:last-child { padding-right: 1rem; }

/*** Column Table ***/
.column-table th { background-color: #f3f2f7; border-top: 1px solid #ebe9f1; border-bottom: 2px solid #ebe9f1 !important; text-transform: uppercase; font-size: .857rem; letter-spacing: .5px; }
.column-table th, .column-table td {
	padding: .5rem .25rem;
	border-left: none;
	border-right: none;
	min-width: 60px;
	border-color: #ebe9f1;
}
.column-table th { padding: .75rem 1rem;  }
.column-table tr:last-child td { border-bottom: 1px solid #ebe9f1; }
.column-table tr:hover { background: #f5f5f5; cursor: pointer; }
.table-disable tr:hover { background: inherit; cursor: default; }
.column-table.nohover tr:hover { background: inherit; cursor: default; }
.pagination { margin-top: 1rem; margin-bottom: 1rem; }

/*** Light Table ***/
.light-table th { background-color: #f3f2f7; border-top: 1px solid #ebe9f1; border-bottom: 2px solid #ebe9f1 !important; text-transform: uppercase; font-size: .857rem; letter-spacing: .5px; }
.light-table th, .light-table td { padding: .25rem; border-left: none; border-right: none; min-width: 60px; border-color: #ebe9f1; }
.light-table tr:last-child td { border-bottom: 1px solid #ebe9f1; }

/*** Borderless-table ***/
.borderless-table tr { border: none; }
.borderless-table th { font-size: .857rem; letter-spacing: .5px; }
.borderless-table th, .borderless-table td { padding: .72rem 1.5rem; border: none; }
.borderless-table th:first-child, .borderless-table td:first-child { padding-left: 0; }
.borderless-table th:last-child, .borderless-table td:last-child { padding-right: 0; }

/*** Underline-table ***/
.underline-table tr { border: none; border-bottom: 1px solid #ddd; }
.underline-table th { font-size: .857rem; letter-spacing: .5px; }
.underline-table th, .underline-table td { padding: .72rem 1rem; border: none; }
.underline-table th:first-child, .underline-table td:first-child { padding-left: 0; }
.underline-table th:last-child, .underline-table td:last-child { padding-right: 0; }

/*** inner-table wrapper ***/
.inner-table {
	border: 1px solid #ffc107;
}

	.inner-table.border-0 {
		width: 100%;
		margin: -1px;
	}

/*** Pagination ***/
.page-item { border-radius: 5rem !important; padding: 0.2rem !important; }
.page-item .page-link { border-radius: 0.2rem !important; box-shadow: none; }
.page-item.active .page-link { background-color: #ddd; border-color: #ddd; z-index: 3; color: #000!important; font-weight: 600; }
.page-item .page-link { margin-left: 0; border: none; margin: 0; color: #666; min-width: 2.286rem; font-size: 0.75rem; }
.page-link { padding: .5rem .85rem; background-color: #f3f2f7; border: 1px solid #dae1e7; }
.page-link:hover { background-color: #f3f2f7; border-color: #dae1e7; z-index: 2; color: #38348c; text-decoration: none; }

/*** Mypage ***/
.avatar .avatar-img, .avatar .avatar-text { border-radius: inherit; width: 100%; height: 100%; overflow: hidden; 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; -webkit-mask-image: radial-gradient(#fff,#000); mask-image: radial-gradient(#fff,#000); }
.profile-table tr, .profile-table th, .profile-table td { border: none; }
.profile-table th { width: 132px; }
.list-group.list-group-timeline { list-style-type: none;  margin-left: 1rem; }
.list-group.list-group-timeline .list-group-item { border: none; line-height: 1.5rem; padding-bottom: 2rem; }
.list-group-timeline>li::before { position: absolute; left: -10px; content: "● "; color: #ea5455; font-size: 1.5rem; }
.list-group.list-group-timeline .badge { padding: 0.35em 0.65em; font-size: 1.125em; font-weight: 700; color: #ea5455; }
.list-group.list-group-timeline .list-group-item { position: relative; padding-left: 2rem; padding-top: 0; }
.list-group.list-group-timeline .list-group-item:not(:last-of-type) {  border-left: 1px solid #ddd; padding-bottom: 2rem; }
.bill-wrapper { padding: 1.5rem; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; background-color: #f3f2f7; border-top: 1px solid #ebe9f1; border-bottom: 2px solid #ebe9f1; font-size: .857rem; letter-spacing: .5px; }
.bill-badge .badge { font-size: 1.125rem; color: #0d6efd; padding: .3rem .5rem; text-align: center; border-radius: 10rem; margin-bottom: 0.5rem; }
.bill-wrapper .tourtitle { min-height: 40px; }
.bill-wrapper .table td:nth-child(2) { font-size: 1rem; }
.oilcost-wrapper { padding: 1.5rem; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; background-color: #f2f9f0; border-top: 1px solid #ebe9f1; border-bottom: 2px solid #ebe9f1; font-size: .857rem; letter-spacing: .5px; }
.oilcost-badge .badge { font-weight: normal; font-size: 1em; color: #6e6b7b; padding: .3rem .5rem; text-align: center; border-radius: 10rem; }
.oilcost-wrapper .tourtitle { min-height: 40px; }
.oilcost-wrapper .table td:nth-child(2) { font-size: 1rem; }

/*** Footer ***/
footer.footer { padding: .8rem 2rem; min-height: 3.35rem; font-size: 0.8rem; color: #aaa; }
.vertical-menu-modern.menu-expanded .footer { margin-left: 260px; }
.vertical-menu-modern.menu-collapsed .footer { margin-left: 80px; }

/*** Modal Popup ***/
.modal-title { font-weight: bold; }
.modal.show .modal-dialog { font-size: 0.875rem; }

/*** Carouse Slider ***/
.carousel-control-prev-icon, .carousel-control-next-icon { background-color: #2b8ae8; padding: .5rem; background-size: 75% 75%; border-radius: 50%; }
.carousel-control-prev, .carousel-control-next { width: 32px; top: 1.25rem; bottom: auto;  }
.carousel-control-prev { left: auto; right: 82px; }
.carousel-control-next { right: 32px; }
.carousel-indicators { bottom: -20px; }
.carousel-indicators [data-bs-target] { background-color: #2b8ae8; opacity: 0.2; }
.carousel-indicators .active { opacity: 1; }

/*** Chart ***/
.chart-wrapper { position: relative; }

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-50px); /* 위로 50px 이동 */
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/*--------------------------------------------------------------------------------*/
/*------------------------------ plan view (read-only) ---------------------------*/
/*--------------------------------------------------------------------------------*/


/* =========================================================
1. 공통 스타일: 기본 라디오/체크박스 스타일 숨기기
========================================================= */
/* 제공해주신 소스의 input[type="radio"], input[type="checkbox"]에 모두 적용 */
#planViewApp input[type="radio"],
#planViewApp input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	margin: 0 5px 0 0; /* 텍스트 간격을 고려해 조정 */
	width: 18px; /* 모달 환경에 맞게 크기 약간 축소 */
	height: 18px;
	border: 2px solid #cbd5e1;
	display: inline-grid; /* 부트스트랩 환경에서 inline-grid가 더 안정적일 수 있음 */
	place-content: center;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	outline: none;
	background-color: white;
	vertical-align: middle; /* 텍스트 정렬 */
}

/* =========================================================
2. 라디오 버튼 특화 스타일
========================================================= */
#planViewApp input[type="radio"] {
	border-radius: 50%;
}

/* 라디오 버튼 내부 동그라미 */
	#planViewApp input[type="radio"]::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		transform: scale(0);
		transition: 120ms transform ease-in-out;
		box-shadow: inset 1em 1em var(--radio-color, #3b82f6); /* 기본색 파란색 */
	}

/* 체크 시 팝업 액션 */
	#planViewApp input[type="radio"]:checked::before {
		transform: scale(1);
	}

	#planViewApp input[type="radio"]:checked {
		border-color: var(--radio-color, #3b82f6);
	}

/* 라디오 비활성화 일반 상태 */
	#planViewApp input[type="radio"]:disabled {
		cursor: not-allowed;
		background-color: #f1f5f9;
		border-color: #cbd5e1;
	}

/* 라디오 비활성화 + 체크 상태 (지정 색상) */
		#planViewApp input[type="radio"]:disabled:checked {
			--radio-color: rgb(43, 138, 232);
			border-color: rgb(43, 138, 232);
			background-color: rgba(43, 138, 232, 0.1); /* 약간의 파란 배경 추가 */
		}

/* =========================================================
3. 체크박스 특화 스타일
========================================================= */
#planViewApp input[type="checkbox"] {
	border-radius: 4px;
}

/* 체크박스 내부 체크(✔) 모양 */
	#planViewApp input[type="checkbox"]::before {
		content: "";
		width: 5px;
		height: 8px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg) scale(0);
		transition: 120ms transform ease-in-out;
		margin-bottom: 2px;
	}

/* 체크 시 배경 및 테두리 */
	#planViewApp input[type="checkbox"]:checked {
		background-color: var(--checkbox-color, #3b82f6);
		border-color: var(--checkbox-color, #3b82f6);
	}

	/* 체크 시 팝업 액션 */
		#planViewApp input[type="checkbox"]:checked::before {
			transform: rotate(45deg) scale(1);
		}

/* 체크박스 비활성화 일반 상태 */
	#planViewApp input[type="checkbox"]:disabled {
		cursor: not-allowed;
		background-color: #f1f5f9;
		border-color: #cbd5e1;
	}

/* 체크박스 비활성화 + 체크 상태 (지정 색상) */
		#planViewApp input[type="checkbox"]:disabled:checked {
			--checkbox-color: rgb(43, 138, 232);
			background-color: rgb(43, 138, 232);
			border-color: rgb(43, 138, 232);
			opacity: 0.8;
		}


/*--------------------------------------------------------------------------------*/
/*----------------------------------- responsive ---------------------------------*/
/*--------------------------------------------------------------------------------*/
@media (max-width: 992px) {
	.pc-only {
		display: none !important;
	}

	.mc-only {
		display: block !important;
	}

	span.pc-only {
		display: none !important;
	}

	span.mc-only {
		display: inline-block !important;
	}

	th.pc-only, td.pc-only {
		display: none !important;
	}

	th.mc-only, td.mc-only {
		display: table-cell !important;
	}

	.vertical-menu-modern .main-menu {
		transform: translate(-260px);
	}

	.menu-open.vertical-menu-modern .main-menu {
		transform: translate(0);
	}

	.header-navbar.floating-nav {
		width: calc(100% - 2rem);
		margin: 0 1rem 0;
	}

	.header-navbar.cambio-header {
		transform: translateY(-60px);
	}

	.content.app-content {
		padding-top: 4.5rem;
		padding-left: 1rem;
		padding-right: 1rem;
		margin: 0;
		height: auto;
	}

		.content.app-content .content-overlay {
			left: 0;
		}

	.menu-hide .header-navbar.floating-nav {
		width: calc(100% - 2rem);
	}

	.vertical-menu-modern.menu-expanded .footer {
		margin-left: 0;
	}

	.card-headermenu .btn-cat.active::after {
		bottom: -0.4rem;
	}

	.header-navbar .navbar-container ul.navbar-nav li span {
		display: none;
	}

	.navbar-floating .header-navbar-shadow {
		height: 90px;
	}

	.nav-search {
		display: none;
	}

	.card-headermenu .card-body {
		padding: 0.75rem 1rem;
	}

	.card-headermenu .cat-title {
		font-size: 1rem;
	}

	.card-headermenu li {
		min-width: 60px;
	}
}