/*기본*/
html, body{font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 16px;}
a{text-decoration: none; color: #0b0b0b}
ul, dl{}

/*bootstrarp 커스터마이징*/
.btn{padding: 5px 10px 4px; white-space: nowrap}
.btn-primary{background: #0d9af0;border: 1px solid #0d9af0;}
.btn-danger{background: #cb3128}
.btn-success{}
.btn-warning{background: #e09529; color:#fff}
.form-switch{display: flex; align-items: center}
.form-switch label{margin-left: 5px}
.row-lg{    margin-left: -32px;margin-right: -32px;padding-left: 19px;padding-right: 19px;}


/*.offcanvas.offcanvas-end{width: 700px}*/
.circle{border-radius: 50%;}
.badge{font-weight: 400; letter-spacing: 0}
.badge-sm{padding: 3px 5px; font-size: 12px; border-radius: 3px;}

.text-bg-primary{background: #0d9af0;}
.offcanvas{border-left:1px solid #0d9af0!important;}
.offcanvas-header{flex-direction: column!important; background: #f9f9f9}
.offcanvas-header .btn-close{position: absolute; right: 20px; top: 20px}
.width-100{width:100%}
.btn-xs{font-size: 12px; padding: 1px 7px;border-radius: 3px;}
.popover{font-family: 'Pretendard'; font-size: 16px;}
.popover .popover-header{font-size: 16px;}
.popover .popover-body{font-size: 16px;}
.form-label{font-size: 14px; color: #999; font-weight: 600;}
.list-group-item+.list-group-item.active{background: #0d9af0; border-color: #0d9af0; color:#fff}
/*마손리*/
.grid-sizer,.grid-item {width: 16.66%; padding: 3px;}
.grid-item .member-card{border: 1px solid #999; padding: 12px 12px 6px 12px; font-size: 16px; border-radius: 3px; box-shadow: 0 0 3px 0 #ddd; cursor:pointer; background: #fff;    text-align: center;}
.grid-item .member-card .photo{display: inline-block; height: 64px; width: 64px; background: #efefef ; border-radius: 32px;    background-position: center center;background-size: cover; position: relative}
.grid-item .member-card .badge {font-size: 16px; padding: 0; margin-right: 3px}
.grid-item .member-card.leader .badge i{color: #ff6400;}
.grid-item .member-card.new .badge i{color: #ffe100;}
.grid-item .member-card.now{border: 2px solid #cb3128;}
.grid-item .member-card .birth i{color: #CB3227}
.grid-item .member-card .bedge-leader{}
.grid-item .member-card .member-wrap{width: 100%; margin-top: 5px; margin-bottom: 5px}
.grid-item .member-card .member-wrap .member-name{line-height: 20px;}
.grid-item .member-card .member-wrap .att-stamp-warp{display: flex; justify-content: center; margin-top: 5px;flex-wrap: wrap}
.grid-item .member-card .member-wrap .att-stamp-warp.hidden{display: none}
.grid-item .member-card .member-wrap .att-stamp-warp .att-stamp{background: #CB3227;height: 20px;width: 20px;border-radius: 3px;font-size: 12px;color: #fff;display: flex;align-items: center;justify-content: center; white-space: pre; margin: 1px}
.grid-item .member-card.leader .member-wrap .member-name{}
.grid-item .member-card.new .member-wrap .member-name{}

.grid-item .member-card.off{opacity: 0.5; box-shadow: none;}
.grid-item .member-card.on{opacity: 1; box-shadow: 0 0 3px 0 #ddd!important;}
.grid-item .member-card.birth{background:url('/assets/images/bg_birth7.png?5') center top/100%;}


.grid-item .member-card .member-wrap .memo-stamp-warp{display: flex; position: absolute;right: 20px;bottom: 17px;}
.grid-item .member-card .member-wrap .memo-stamp-warp.hidden{display: none}
.grid-item .member-card .member-wrap .memo-stamp-warp .memo-stamp{position: relative}
.grid-item .member-card .member-wrap .memo-stamp-warp .memo-stamp i{font-size: 30px; color: #999}
.grid-item .member-card .member-wrap .memo-stamp-warp .memo-stamp .memo-count{background: #CB3227; height: 18px; width: 18px; border-radius: 50%; font-size: 12px; color:#fff; display: flex; justify-content: center;align-items: center; position: absolute; right: -7px;bottom: -7px}


.grid-item--width2 { width: 40%; }
.grid-item--width100{width: 100% !important; height: 0; padding: 0}
.no-member{width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 20px 0; text-align: center}

.toast-header i{}
.toast-header{}
.toast-header strong{font-size: 18px}
.toast-header .btn-close{font-size: 18px}
.toast-body{font-size: 18px}


.grid-sizer,.grid-item{width: 10%}

@media screen and (max-width: 1400px){
    .grid-sizer,.grid-item{width: 12.5%}
}

@media screen and (max-width: 992px){
	.grid-sizer,.grid-item{width: 16.66%}
}
@media screen and (max-width: 768px){
    .grid-sizer,.grid-item{width: 20%}
}
@media screen and (max-width: 576px){
    .grid-sizer,.grid-item{width: 33.33%}
}

/*버튼커스터마이징
.btn{white-space: pre}*/

/*레이아웃 기본*/
.wrapper{}
.offcanvas-header{align-items: flex-start;}
.offcanvas-header .offcanvas-title{letter-spacing: -1px;font-weight: 600;}
.offcanvas-body label{margin-bottom: 0}
.offcanvas-footer button{border-radius: 0; padding: 10px 0}
.member-photo {width: 150px;height: 150px;border-radius: 50%; background: #ccc; display: inline-block; background-position: center center; background-size: cover}
.modal-title{font-weight: 600; letter-spacing: -1px}

#attendanceModal .modal-footer{padding: 10px 0}
.prev-week{}
.current-week{display: flex; justify-content: center;}
.current-week{width: calc(100% - 94px)}
.next-week{}

.hide5weekAgo-warp label{font-size: 14px}


.master-hidden{display: none}

/*헤더*/
header{height: 60px; display: flex}
header .header-start{}
header .header-end{}
header .profile-name {line-height: 18px;}
header .profile-name .profile-mail{font-size: 12px; color:#999}
header .logo img{height: 27px}
header h2{font-weight: 700; font-size: 40px; letter-spacing: -1px; display: flex; align-items: center; justify-content: center;}
header h2 b{position: relative;font-size: 38px;}
header h2 b img{position: absolute;left: -50px;top: -13px; width: 40px}
@media screen and (max-width: 1200px){
	/*header .logo img{height: 20px}*/
}



.att-dropdown-wrap{position: absolute; right: 80px; z-index: 1; top: 3px;}
.att-dropdown-wrap button{border: 0;background: none; font-size: 16px}

/*일반*/
main{width: calc(100% - 200px)!important; margin-left: 200px;}
@media screen and (max-width: 1200px){
	.sidebar{height: 0!important;}
	main{width: 100%!important; margin-left: 0;	}
}


.mypage-org-list table th{background: none}
.mypage-org-list table td .btn-user-setting{width: 100%}

.btn-profile{position: absolute; right: 10px;}
.btn-home{font-size: 50px;border: 0;background: 0;padding: 0;margin: 0;height: initial; line-height: initial; position: absolute; left: 10px; top: 0;}

.org-list-wrap{display: inline-block;width: 100%;text-align: right;position: absolute;bottom: 0;padding: 15px;border-top: 1px solid #ccc;background: #efefef;}
.org-list-wrap .org-list{}
.org-list-wrap .org-list ul li{cursor: pointer; display: flex;justify-content: flex-start; align-items: center; position: relative}
.org-list-wrap .org-list ul li .btn-org-select{position: absolute; right: 0}
.org-list-wrap .org-list ul li.active{color:#0000FF}
.org-list-wrap .org-list ul li.active::before{content: '선택그룹'; display: inline-block; background: #0000FF; color: #fff; font-size: 12px;padding: 1px 3px;border-radius: 3px;}

.total-list-wrap{display: flex; justify-content: space-between; }
.total-list {display: flex; justify-content: center; align-items: center;}
.total-list dt, .total-list dd{display: inline-block; margin: 0}
.total-list dt{padding:2px 5px 1px; font-size: 12px; background: #666; color:#fff; margin: 0 5px 0 10px; border-radius: 3px; font-weight: 500}

.total-att-list {display: flex; justify-content: center; align-items: center; overflow-x: auto;}
.total-att-list dt, .total-att-list dd{display: inline-block; margin: 0}
.total-att-list dt{padding:2px 5px 1px; font-size: 12px; background: #666; color:#fff; margin: 0 5px 0 10px; border-radius: 3px; font-weight: 500; white-space: nowrap;}



.total-memo-list{display: flex; justify-content: center; align-items: center;}
.total-memo-list dt{display: inline-block; margin: 0;padding:2px 5px 1px; font-size: 12px; background: #666; color:#fff; margin: 0 5px 0 10px; border-radius: 3px; font-weight: 500; background: #CB3227}
.total-memo-list dd{display: inline-block; margin: 0}


@media screen and (max-width: 1200px){

    .total-list-wrap{flex-direction: column; overflow: hidden;}
    .total-list{display: block; white-space: nowrap;}
    .total-att-list{display: block; white-space: nowrap;}

}


/*#attendanceOffcanvas .offcanvas-body{padding: 0}*/
/*#attendanceOffcanvas table{min-width: 650px}*/
/*#attendanceOffcanvas table thead{vertical-align: middle; position: sticky; top: 0; z-index: 10;}*/
/*#attendanceOffcanvas table tr th:first-child, #attendanceOffcanvas table tr td:first-child { position: sticky; left: 0; }*/
/*#attendanceOffcanvas table tr td select{font-size: 16px}*/

/*푸터*/
footer{position:relative;}
footer .btn-new{position: fixed;bottom: 30px;right: 30px;display: inline-block;width: 60px;height: 60px;border-radius: 40px;border: 0;color: #fff;background: #0d9af0;box-shadow: 0 0 5px 0 #aaa;}
footer .btn-new i{font-size:26px}
footer .btn-area{position: fixed;bottom: 120px;right: 30px;display: inline-block;width: 80px;height: 80px;border-radius: 40px;border: 0;color: #fff;background: #0077ff;box-shadow: 0 0 5px 0 #aaa;}
footer .btn-area i{font-size:30px}

/*모달(출석체크)*/
.att-btn-list{display: flex; flex-direction: column; margin-bottom:20px}
.att-btn-list .btn-org{}
.att-btn-list .btn-org .btn{line-height: 20px;min-height: 60px;display: flex;align-items: center;font-size: 18px;justify-content: center; border: 1px solid #0d9af0; color:#0d9af0}
.att-btn-list .btn-check:checked+.btn{background: #0d9af0; border: 1px solid #0d9af0; color:#fff;}



/*관리*/
#memberOffcanvas{}
#memberOffcanvas label{font-size: 14px; color:#999; }
#addMemoOffcanvas label{font-size: 14px; color:#999}


/*메모*/
.memo-wrap{height: 260px;}
.memo-list{height: calc(100% - 260px); overflow-y: auto;}
.memo-list ul{padding: 0; list-style: none}
.memo-list ul li{position: relative}
.memo-list ul li .btn-memo-del{position: absolute; right: 10px; top: 47px; cursor: pointer}
.memo-list ul li span{display: inline-block}
.memo-list ul li .memo-date{width: 50%; font-size: 14px; color:#999}
.memo-list ul li .memo-id{width: 50%;font-size: 14px; color:#999;  text-align: right;}
.memo-list ul li .memo-content{width: 100%; margin: 5px 0 20px; background: #efefef; padding: 10px 20px 10px 10px}


.area-list{height: 300px;overflow-y: scroll; padding: 10px; background: #efefef;}
.area-list .btn-delete-area{display: flex;align-items: center;justify-content: center;}


/*마이페이지*/
table tr th, table tr td{text-align: center; font-weight: 500}
#attendanceTypeModal .add-category-wrap.off{display: none}
#attendanceTypeModal table tr td{padding: 0 3px; height: 50px;}
#attendanceTypeModal table tr td input{width: 100%;}
#attendanceTypeModal table tr td .btn-color{border: 0;width: 25px;height: 25px;}


.open-org-main{display: flex; width: 100%;align-items: center;justify-content: space-between;}

footer .btn-add-org {position: fixed;bottom: 30px;right: 30px;display: inline-block;width: 80px;height: 80px;border-radius: 40px;border: 0;color: #fff;background: #0d9af0;box-shadow: 0 0 5px 0 #aaa;}
footer .btn-add-org i{font-size:30px}




/*통계*/
.table-summery-member table tr td, .table-summery-member table tr th{vertical-align: middle; width: 70px;     white-space: nowrap;}
.table-summery-member table tr td:nth-child(1){width: 80px}
.table-summery-member table tr td:nth-child(2){width: 120px}
.table-summery-member table thead{vertical-align: middle; position: sticky; top: 0; z-index: 10;}


.table-summery-week table tr td, .table-summery-week table tr th{vertical-align: middle; width: 100px; white-space: nowrap;}
.table-summery-week table tr td:nth-child(1){width: 200px}
.table-summery-week table thead{vertical-align: middle; position: sticky; top: 0; z-index: 10;}



/*메뉴*/

.sidebar{position: fixed; height: 100%; border-top:0!important; border-bottom:0!important; width: 200px; background: #fff!important;}
.sidebar #sidebarMenu{background: #fff!important;}
.sidebar h6.sidebar-heading{font-size: 12px; color:#999!important;}
.sidebar ul.nav li a{color:#000; padding-top: 8px; padding-bottom: 8px;}
.sidebar ul.nav li a:hover{color: #0d9af0; background: #E7F7FFFF;}
.sidebar ul.nav li a.active{color:#fff; background: #0d9af0; }

.breadcrumb .breadcrumb-item{font-size: 12px!important; padding-left: 5px}
.breadcrumb .breadcrumb-item:first-child::before{display: none!important;}
.breadcrumb .breadcrumb-item::before{content: '\F285'; font-family:'bootstrap-icons'; font-size: 12px; padding-right: 5px;}
.breadcrumb-item.active{color:#007bff}

.profile-area{}
.profile-area .profile-img{}
.profile-area .profile-name{}

@media screen and (max-width: 1200px){
	 .sidebar{position: initial}
	.card .card-body.card-height{height: auto!important;}
}


.btn-group .dropdown-toggle-split{flex: 0 0 auto;}


.card .card-header{padding:15px; border: 0; border-bottom: 0;}
.card .card-header .card-title{font-size: 20px; font-weight: 700;}


.card .card-body.card-height{overflow: auto; height: calc(100vh - 260px);}

.page-title{font-weight: 700;letter-spacing: -1px;}


/*select2*/
.select2-container--default .select2-selection--multiple{border: 1px solid #ced4da;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display{padding-left: 6px!important;}
.select2-container--default .select2-search--inline .select2-search__field{min-height: 25px;margin-left: 10px !important;margin-top: 6px !important; position: relative;}


/*fancytree-container*/
ul.fancytree-container{border: 0!important;}

/*sortable*/
.sortable-tbody .ui-sortable-placeholder {background-color: #f8f9fa;border: 2px dashed #dee2e6;visibility: visible !important;height: 60px;}

.sortable-tbody .ui-sortable-helper {background-color: #fff;border: 1px solid #dee2e6;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}

.handle:hover {color: #0d6efd !important;width: 100%!important;}

.sortable-row.ui-sortable-helper{width: 100%}
.sortable-row.ui-sortable-helper td {background-color: #fff;}

/* Split.js 관련 스타일 */
.split-container {display: flex; gap: 0;}

.card{border-radius: 0!important; border: 1px solid #ccc!important;}

.split-pane {overflow: hidden;display: flex;flex-direction: column;}
.split-pane .card {flex: 1;min-height: 0;border: 1px solid #dee2e6;border-radius: 8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}

/* Split.js gutter(구분선) 스타일 */
.gutter {transition: background-color 0.2s ease;}
.gutter:hover {background-color: #e9ecef;}
.gutter.gutter-horizontal {cursor: col-resize;}
.gutter.gutter-horizontal:hover {background-color: #007bff;}

/* Fancytree 커스텀 스타일 */
.ui-fancytree {border: none;font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.fancytree-container {border: none;}
.fancytree-node {border: none;padding: 2px 0;}

/* root 레벨의 미분류 그룹은 조직과 동일한 스타일 적용 */
.fancytree-node[data-type="unassigned"] {border-bottom: 1px solid #e9ecef;margin-bottom: 8px;padding-bottom: 4px;}
/* Fancytree 아이콘 및 들여쓰기 */
.fancytree-icon {width: 16px;height: 16px;margin-right: 8px;}
.fancytree-indent {width: 24px;}
.fancytree-expander {width: 16px;height: 16px;}

span.fancytree-icon{margin-left: 0; margin-right: 0;background-image:none!important; }
span.fancytree-icon::after{content: '\F3D1'; font-family:'bootstrap-icons'; font-size: 15px; color: #e09529;}

/* ParamQuery Grid 커스텀 스타일 */
.pq-grid {font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	border-right: 0 !important;
	border-left: 0 !important;}
.pq-grid-header {background-color: #f8f9fa;border-bottom: 2px solid #dee2e6;}
.pq-grid-header .pq-grid-col {height: 40px !important;line-height: 40px !important;}
.pq-grid-cell {cursor: pointer;}
.pq-grid-cell.current-week-column {background-color: #ffe9ab;}
.pq-grid .pq-grid-top{display: none;}
.pq-grid .pq-grid-top .pq-slider-icon{display: none;}
.form-control, .form-select {border: 1px solid #ced4da;border-radius: 4px;}
.form-control:focus, .form-select:focus {border-color: #007bff;box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}
.form-check-input:checked {background-color: #007bff;border-color: #007bff;}
.pq-loading{display: none!important;}

/* 스크롤바 스타일 */
.tree-container::-webkit-scrollbar {width: 6px;}
.tree-container::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 6px;}
.tree-container::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 6px;}
.tree-container::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}

/* 반응형 스타일 */
@media (max-width: 768px) {
	.tree-container {height: 300px;}
	.pq-grid {height: 400px;}
}

/* Toast 컨테이너 z-index */
#toastContainer {z-index: 9999;}
.toast-body i {font-size: 1.1em;vertical-align: middle;}

/* 로딩 스피너 */
.loading-spinner {display: inline-block;width: 20px;height: 20px;border: 3px solid #f3f3f3;border-top: 3px solid #007bff;border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.master-login{position: absolute;top: 60px;right: 10px;}
#org-dropdown-menu {max-height: 500px;overflow-y: scroll;}


.msg-comment{word-break: keep-all;}