/*!
 * Copyright 2023 bati
 * bati-style.css
 * bati common, button, content, modal, badge, icon, card, table, text, data-status
 */

:root {
    --vh: 100%;
}

::backdrop {
    background-color: #fff;
}

/**
 * style
 */
.bati-input-caret-transparent {
    caret-color: transparent;
}

.bati-input-linked {
    display: none;
}

.bati-form {
    height: 40px !important;
}
.bati-form-sm {
    height: 25px !important;
}

.batiAction-section {
    margin-bottom: 2.5rem !important;
}

.batiAction-section:last-child {
    margin-bottom: 0 !important;
}

/**
  * bg background color bati-bg
 */
.bati-bg-purple {
    background-color: #8a79fc !important;
}

.bati-text-purple {
    color: #8a79fc !important;
}

/*!
 *  common
 */
.bati-project-title:focus-within input {
    overflow: hidden;
    outline: 1px solid #1484ec;
    border-radius: 5px;
    max-width: 280px;
}

.bati-btn-workflow-toggle {
    position: absolute !important;
    width: 50px;
    height: 50px;
    top: 50%;
    left: -25px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #6ec090 0%, #26adf2 100%);
    transition:
            color 0.15s ease-in-out,
            background-color 0.15s ease-in-out,
            border-color 0.15s ease-in-out,
            box-shadow 0.15s ease-in-out;
    cursor: pointer;
    z-index: 0;
}

.bati-btn-workflow-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #f3f6f9;
    transform: translateX(10%);
    border: 0;
}

/*!
*  aside
*/
.bati-body-scroll {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #888888 #f5f5f5;
    width: 100%;
    overflow-x: hidden; /* 가로 스크롤 제거 */
}

.bati-body-scroll::-webkit-scrollbar {
    width: 8px; /* 스크롤바 너비 */
    position: absolute;
}

.bati-body-scroll::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* 스크롤바 트랙 색상 */
}

.bati-body-scroll::-webkit-scrollbar-thumb {
    background-color: #888888; /* 스크롤바 색상 */
}

/*!
* Google Picker z-index 문제 해결
* Google Picker가 다른 요소들 위에 표시되도록 z-index 조정
*/

/* Google Picker 컨테이너 */
.picker-dialog {
    z-index: 10000 !important;
}

/* Google Picker 오버레이 */
.picker-dialog-bg {
    z-index: 9999 !important;
}

/* Google Picker iframe */
.picker-frame {
    z-index: 10001 !important;
}

/* Google API에서 생성하는 모든 picker 관련 요소들 */
div[role="dialog"][aria-label*="picker"],
div[role="dialog"][aria-label*="Picker"],
div[class*="picker"],
div[id*="picker"] {
    z-index: 10000 !important;
}

/* Google Picker 백그라운드 오버레이 */
/* div[style*="position: fixed"][style*="background"] {
    z-index: 9999 !important;
} */

/* 추가적인 Google API 요소들 */
.gapi-iframes-dialog,
.gapi-iframes-dialog-overlay {
    z-index: 10000 !important;
}

/* Google Picker가 모든 요소들 위에 표시되도록 */
/* body > div[style*="position: fixed"] {
    z-index: 10000 !important;
} */

/* SpreadJS 컨텍스트 메뉴가 Google Picker보다 위에 표시되도록 */
.gcdv-popup,
.gc-ui-contextmenu {
    z-index: 10001 !important;
}

.bati-body-scroll::-webkit-scrollbar-thumb {
    background-color: #888888; /* 스크롤바 썸 색상 */
    border-radius: 4px; /* 스크롤바 썸 테두리 반지름 */
}

.bati-body-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #555555; /* 스크롤바 썸 호버 상태의 색상 */
}

/*!
 *  content
 */

.bati-content {
    height: calc(100vh - 70px);
}

@media (min-width: 992px) {
    .bati-content {
        padding: 0;
    }
}

#workbaseHeader-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*!
*  aside
*/

#bati-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #1484ec;
    transition: left 0.3s ease; /* 이동 애니메이션 */
    z-index: 13;
}

#bati-aside-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정색 */
    z-index: 12;
    display: none; /* 처음에는 숨김 */
}

/*!
 *  nav
 */
#batiWorkBase .nav-tabs .nav-link {
    margin-bottom: -1px;
    background: #e9ecf1;
    border-top-left-radius: 0.475rem;
    border-top-right-radius: 0.475rem;
    position: relative;
    z-index: 1;
    margin: 0 0px;
    transition: none;
}

#batiWorkBase .nav-tabs .nav-item.show .nav-link,
#batiWorkBase .nav-tabs .nav-link.active {
    color: #5e6278;
    background-color: #fff;
    z-index: 5;
    box-shadow:
            0 3px 6px rgba(0, 0, 0, 0.16),
            0 3px 6px rgba(0, 0, 0, 0.23);
    /* border: 0;*/
}

#batiWorkBase .nav-tabs .nav-link:focus,
#batiWorkBase .nav-tabs .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

#batiWorkBase .nav-tabs .nav-link:hover .nav-tabs.nav-work .nav-link.active:before {
    box-shadow: 14px 0.25em 0 -4px rgba(255, 255, 255, 0.6);
}

/**
  * tab -> 네이버 메일발송하기 팝업 탭, 등등
 */
/*.bati-nav-line {*/

/*}*/

.bati-nav-linkBox {
    text-align: center;
    border: 1px solid #e4e6ef;
    border-radius: 0.475rem;
}

.nav-link.bati-nav-linkBox:focus,
.nav-link.bati-nav-linkBox:hover {
    color: #1484ec;
    border: 1px solid #1484ec;
    transition: color 0.4s ease;
    transition: border 0.4s ease;
}

.nav-link.bati-nav-linkBox.active {
    color: #1484ec;
    border: 1px solid #1484ec;
}

.nav-modal-tabs.nav-line-tabs .nav-item .nav-link.bati-nav-linkBox.active,
.nav-modal-tabs.nav-line-tabs .nav-item .nav-link.bati-nav-linkBox:hover:not(.disabled),
.nav-modal-tabs.nav-line-tabs .nav-item.show .nav-link.bati-nav-linkBox {
    background-color: transparent;
    border: 0;
    border: 1px solid var(--kt-primary);
    transition: color 0.2s ease;
    box-shadow: none !important;
    color: #1484ec;
    font-weight: bold;
}

/*!
*  button
*/

.bati-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    cursor: pointer;
}

.bati-btn-search {
    cursor: pointer;
}

.bati-btn-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.bati-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

.bati-btn-sm {
    padding: 3.5px 8px;
}

.bati-btn-md {
    padding: 0.6rem 1rem !important;
}

.bati-btn-lg {
    height: 60px;
    max-height: 60px;
}

.bati-btn-link-lg {
    width: 330px;
    height: 60px;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: #000;
}
.bati-radio-group {
    display: flex;
}

.bati-radio {
    flex: 1 0 0;
    border-radius: 0.475rem;
    border: 1px solid #1484ec;
    color: #1484ec;
    padding: 5px 20px;
    cursor: pointer;
    transition:
            background-color 0.3s,
            border-color 0.3s;
    box-sizing: border-box; /* padding과 border를 포함한 크기 설정 */
}

.bati-radio.active,
.bati-radio:hover {
    background-color: #1484ec;
    color: white;
}

.bati-radio .form-check-input {
    display: none;
}

.bati-radio.form-check-image.active .form-check-wrapper {
    border-color: transparent;
}

/* 겹치는 border 해결 */
.bati-radio-group .bati-radio:not(:first-child) {
    border-left: none;
}

/* 모서리 설정 */
.bati-radio:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.bati-radio:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bati-radio:not(:first-child):not(:last-child) {
    border-radius: 0;
}

.bati-btn-primary {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}

.bati-btn-primary-light {
    background-color: #26adf2;
    border: 1px solid #26adf2;
    color: #fff;
}

.bati-btn-primary-soft {
    background-color: #edf8fe !important;
    border: #edf8fe !important;
}

.bati-btn-primary-dark {
    background-color: #0065c4;
    border: 1px solid #0065c4;
    color: #fff;
}

.bati-btn-white {
    background-color: #fff;
    border: 1px solid transparent;
    color: #1484ec;
}

.bati-btn-black {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
}

.bati-btn-purple {
    background-color: #8a79fc;
    border: 1px solid #8a79fc;
    color: #fff;
}

.bati-btn-gray-100 {
    background-color: #f0f3f6;
    border: 1px solid #f0f3f6;
    color: #fff;
}

.bati-btn-gray-500 {
    background-color: #a1a5b7;
    border: 1px solid #a1a5b7;
    color: #fff;
}

.bati-btn-solid {
    background-color: #f3f7fa;
    border-color: #f3f7fa;
    transition: color 0.2s ease;
}

.bati-btn-transparent {
    background-color: transparent;
}

.bati-btn-outline-primary {
    background-color: #fff;
    border: 1px solid #1484ec;
    color: #1484ec;
}

.bati-btn-outline-purple {
    background-color: #fff;
    border: 1px solid #8a79fc;
    color: #8a79fc;
}

.bati-btn-outline-gray-100 {
    background-color: #fff;
    border: 1px solid #a1a5b7;
    color: #a1a5b7;
}

.bati-btn-gradient-1 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(0, 217, 217, 0.58) 7.5%, rgba(189, 148, 255, 0.87) 100%);
    border: 0;
    color: #fff;
}

.bati-btn-gradient-2 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, rgba(80, 205, 137, 1) 0%, rgba(0, 158, 247, 1) 100%);
    color: #fff;
    border: 0;
}

.bati-btn-gradient-3 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #66be9c 0%, #2cafec 100%);
    color: #fff;
    border: 0;
}

.bati-btn-gradient-4 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #9275ff 0%, #03c7c9 100%);
    color: #fff;
    border: 0;
}

.bati-btn-gradient-5 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(270deg, #9275ff 0%, #03c7c9 100%);
    color: #fff;
    border: 0;
}

/**
    bati action button
 */
.bati-btn-action-next {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}
.bati-btn-action-warn {
    background-color: #f1416c;
    border: 1px solid #f1416c;
    color: #fff;
}
.bati-btn-action-next:hover {
    background-color: #0065c4;
    border: 1px solid #0065c4;
    color: #fff;
}

.bati-btn-action-before {
    background-color: #fff;
    border: 1px solid #1484ec;
    color: #1484ec;
}
.bati-btn-action-before:hover {
    background-color: #f3f7fa;
    border: 1px solid #1484ec;
    color: #1484ec;
}

.bati-btn-action-attachment {
    background-color: #26adf2;
    border: 1px solid #26adf2;
    color: #fff;
}
.bati-btn-action-attachment:hover {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}

.bati-btn-action-preview {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}
.bati-btn-action-preview:hover {
    background-color: #0065c4;
    border: 1px solid #0065c4;
    color: #fff;
}

.bati-btn-action-save {
    background-color: #a1a5b7;
    border: 1px solid #a1a5b7;
    color: #fff;
}
.bati-btn-action-save:hover {
    background-color: #898da0;
    border: 1px solid #898da0;
    color: #fff;
}

.bati-btn-action-complete {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}
.bati-btn-action-complete:hover {
    background-color: #0065c4;
    border: 1px solid #0065c4;
    color: #fff;
}

.bati-btn-action-next {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}
.bati-btn-action-next:hover {
    background-color: #0065c4;
    border: 1px solid #0065c4;
    color: #fff;
}

/*!
 *  button hover active
 */
.bati-btn-active-primary:hover {
    background-color: #1484ec;
    border: 1px solid #1484ec;
    color: #fff;
}

.bati-btn-active-primary-soft:hover {
    background-color: #edf8fe;
    border: 1px solid #edf8fe;
    color: #fff;
}

.bati-btn-active-primary-soft:hover path {
    transition: fill 0.3s ease;
    fill: #1484ec;
}

.bati-btn-active-primary-soft.active {
    background-color: #edf8fe;
    border: 1px solid #edf8fe;
    color: #fff;
}

.bati-btn-active-primary-soft.active path {
    transition: fill 0.3s ease;
    fill: #1484ec;
}
/**/
.bati-btn-active-purple-soft:hover {
    background-color: #d2d0fe;
    border: 1px solid #d2d0fe;
    color: #fff;
}

.bati-btn-active-purple-soft:hover path {
    transition: fill 0.3s ease;
    fill: #000;
}

.bati-btn-active-purple-soft.active {
    background-color: #d2d0fe;
    border: 1px solid #d2d0fe;
    color: #fff;
}

.bati-btn-active-purple-soft.active path {
    transition: fill 0.3s ease;
    fill: #000;
}

.bati-btn.bati-btn-active-primary:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill 0.3s ease;
    fill: #fff;
}

.bati-btn-active-primary-light:hover {
    background-color: #0095e8;
    border: 1px solid #0095e8;
    color: #fff;
}

.bati-btn-active-primary-dark:hover {
    background-color: #0065c4;
    border: 1px solid #0065c4;
    color: #fff;
}

.bati-btn-active-outline-primary:hover {
    background-color: #f3f7fa;
    border: 1px solid #009ef7;
    color: #1484ec;
}

.bati-btn-purple:hover {
    background-color: #6b58e7;
    border: 1px solid #6b58e7;
    color: #fff;
}

.bati-btn-active-gray:hover {
    background-color: #898da0;
    border: 1px solid #898da0;
    color: #fff;
}

.bati-btn-active-gray-100:hover {
    background-color: #d9d9d9;
    border: 1px solid #d9d9d9;
}

.bati-btn-active-black:hover:not(.btn-active) {
    background-color: #000 !important;
    border-color: #000;
    color: #fff;
}

.bati-btn-gradient-1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
    background: linear-gradient(90deg, rgba(0, 217, 217, 0.58) 7.5%, rgba(189, 148, 255, 0.87) 100%);
    opacity: 0;
    transition: opacity 0.5s;
}

.bati-btn-gradient-1:hover {
    color: #fff;
}

.bati-btn-gradient-1:hover:before {
    opacity: 1;
}

.bati-btn-gradient-1 span {
    position: relative;
    z-index: 1;
}

.bati-btn-gradient-2:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
    background: linear-gradient(45deg, rgba(80, 205, 137, 1) 0%, rgba(0, 158, 247, 1) 100%);
    opacity: 0;
    transition: opacity 0.5s;
}

.bati-btn-gradient-2:hover {
    color: #fff;
}

.bati-btn-gradient-2:hover:before {
    opacity: 1;
}

.bati-btn-gradient-2 span {
    position: relative;
    z-index: 1;
}

.bati-btn-gradient-5:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
    background: linear-gradient(90deg, #03c7c9 0%, #9275ff 100%);
    opacity: 0;
    transition: opacity 0.5s;
}

.bati-btn-gradient-5:hover {
    color: #fff;
}

.bati-btn-gradient-5:hover:before {
    opacity: 1;
}

.bati-btn-gradient-5 span {
    position: relative;
    z-index: 1;
}

.bati-btn-gradient-dataSheet {
    background: linear-gradient(180deg, #e7e6fc 100%, rgba(231, 230, 252, 0) 100%);
}
/**
    bati floating btn
 */
.bati-floating {
    display: none;
    z-index: 1030;
}
.bati-floating-menu-wrap {
    z-index: 1041;
    position: relative;
}
.bati-floating-btn {
    background-color: #009ff7;
    color: white;
    border-radius: 50%;
    border: 1px solid #009ff7;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition:
            transform 0.3s,
            background-color 0.3s;
}
.bati-floating-btn.open {
    transform: rotate(45deg);
    background-color: #009ff7;
    color: #009ff7;
}

/* .bati-floating-workbase 전용 */
.bati-floating-workbase .bati-floating-menu {
    position: absolute; /* fixed에서 absolute로 변경 */
    bottom: 50px; /* 버튼 위로 50px 위치 조정 */
    right: 0; /* 오른쪽 정렬 */
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0);
    transition:
            opacity 0.3s,
            transform 0.3s;
    z-index: 1000;
}
/* .bati-floating-projectlist 전용 */
.bati-floating-projectlist .bati-floating-menu {
    position: fixed;
    bottom: 14%;
    right: 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0);
    transition:
            opacity 0.3s,
            transform 0.3s;
    z-index: 1000;
}
.bati-floating-menu.show {
    opacity: 1;
    transform: scale(1);
}
.bati-floating-menu a {
    margin-bottom: 10px;
    background-color: #009ff7;
    color: white;
    padding: 11px 10px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    transition:
            transform 0.3s,
            background-color 0.3s;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
}
.bati-floating-menu a.show {
    opacity: 1;
    transform: translateY(0);
}
.bati-floating-menu a.hide {
    opacity: 0;
    transform: translateY(20px);
}
.bati-floating-menu a:hover {
    transform: translateY(-5px);
    background-color: #0056b3;
}
.bati-floating-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
            opacity 0.3s,
            visibility 0.3s;
    z-index: 1040;
}
.bati-floating-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* modal */
.bati-modal-header {
    padding: 10px 20px;
}

.bati-modal-btn-group {
}

.bati-modal-btn-group-1 {
}

.bati-modal-btn-group-2 {
}

.bati-modal-btn-group-3 {
}

.bati-modal-btn-group-4 {
}

.bati-modal-btn {
}

.bati-modal-row {
}

.bati-btn-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    line-height: 1;
    transition: all 0.2s ease-in-out;
}

.bati-btn-modal-close:hover {
    color: #343f52;
    text-decoration: none;
}

.bati-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 46px 32px 0px 32px;
}

.bati-modal-footer {
    padding: 35px 0.5rem;
    border: 0;
}

.bati-modal-scrollbar::-webkit-scrollbar {
    width: 7px; /* 스크롤 바 너비 */
}

.bati-modal-scrollbar::-webkit-scrollbar-track {
    background-color: #fff; /* 스크롤 트랙 배경색 */
}

.bati-modal-scrollbar::-webkit-scrollbar-thumb {
    background-color: #d9d9d9; /* 스크롤 썸네일(바) 배경색 */
}

/*.bati-modal-scrollbar::-webkit-scrollbar-thumb:hover {*/
/*    background-color: #555; !* 스크롤 썸네일(바) 호버 배경색 *!*/
/*}*/

.bati-modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 10rem * 1);
}

.bati-modal-content {
}

.bati-modal-content .form-label {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #3f4254;
}

.bati-modal-checkBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 0.5rem;
    font-size: 1.1rem;
    font-weight: 1.5;
    border-radius: 0.475rem;
    width: 100%;
    text-align: center;
    /*background-color: #F3F7FA;*/
    border: 1px solid #e4e6ef;
    color: #7e8299;
    cursor: pointer;
    transition:
            color 0.2s ease,
            background-color 0.2s ease;
}

.bati-modal-checkBox input[type='checkbox']:checked + span {
    color: #1484ec;
}

/**
 *  accordion
 */
.bati-accordion-body {
    padding: 1.75rem 2.5rem;
}

/*!
 *  dropzone
 */

.bati-dropzone {
    min-height: 100px;
    height: 100px;
    padding: 32.5px 35px;
    text-align: center;
    cursor: pointer;
    border: 0;
    background-color: #edf8fe;
    border-radius: 5px !important;
}

.bati-dropzone-drag {
    min-height: 100px;
    height: 100px;
    padding: 32.5px 35px;
    text-align: center;
    cursor: pointer;
    border: 0;
    background-color: #edf8fe;
    border-radius: 5px !important;
}

.bati-dz-file-preview {
    width: 115px;
    height: 40px;
    max-height: 40px !important;
    min-height: 40px !important;
    background-color: #fff;
    margin: 0 0.5rem 0.5rem !important;
}

.bati-dz-details {
    position: relative !important;
    padding: 0 !important;
}

/*!
 *  badge
 */
/* my page */
.bati-plan-badge {
    padding: 6px 9px;
    background-color: #e9f3fd;
    border-radius: 5px;
    text-align: center;
    color: #1484ec;
    font-size: 15px;
    font-weight: bold;
    line-height: normal;
}

.bati-plan-badge-text {
    color: #1484ec;
    font-size: 15px;
    font-weight: bold;
    line-height: normal;
}

.bati-link-badge {
    padding: 8px 13px;
    background-color: #f3f7fa;
    border-radius: 5px;
    text-align: center;
}

.bati-link-badge-text {
    color: #7e8299;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

/* grade */

.bati-grade-badge {
    padding: 3px 5px;
    font-weight: normal;
}

.bati-grade-basic {
    display: none;
}

.bati-grade-custom {
    color: #04c7c9;
    background-color: #d1f3f4;
}

.bati-grade-pro {
    color: #9b5cff;
    background-color: #e3d9fb;
}

/* tag */
.bati-badge-tag-purple {
    background-color: #f5f4ff;
    border: 1px solid #8a79fc;
    border-radius: 0.2rem;
    color: #8a79fc;
    padding: 0.2rem 0.4rem;
    margin: 0.2rem 0.4rem 0.2rem 0.4rem;
}

/*!
 *  icon
 */
.bati-icon-action {
    border-radius: 5px;
    padding: 2px;
}

/*!
 *  card
 */
.bati-card-page-header {
    padding: 25px 33px !important;
}

.bati-card-body-header {
    padding: 32px 33px 0px 33px !important;
    border-bottom: 0 !important;
}

.bati-card-body {
    padding: 45px 33px !important;
}

.bati-card-body .bati-table {
    width: 100% !important;
    padding: 0 30px !important;
}

.bati-card-bg-project {
    background-image: url('/static/asset/media/background/header-project.svg');
    background-size: auto calc(100%);
    background-position-x: 97%;
    background-position-y: 11px;
    background-repeat: no-repeat;
}

.bati-card-bg-history {
    background-image: url('/static/asset/media/background/header-history.png');
    background-size: auto 100px;
    background-position-x: 97%;
    background-position-y: 58px;
    background-repeat: no-repeat;
}
.bati-card-bg-apps {
    background-image: url('/static/asset/media/background/header-apps.png');
    background-size: auto calc(80%);
    background-position-x: 97%;
    background-position-y: 21px;
    background-repeat: no-repeat;
}
.bati-card-bg-drive {
    background-image: url('/static/asset/media/background/header-drive.png');
    background-size: auto calc(80%);
    background-position-x: 97%;
    background-position-y: 20px;
    background-repeat: no-repeat;
}

/*!
 *  table
 */
.bati-table {
    width: 100%;
    margin: 0 !important;
}

.bati-table td,
.bati-table th,
.bati-table tr {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    color: #000;
}

/*!
 *  dataTable
 */
.bati-row-move {
    cursor: grab;
    opacity: 0;
}

.bati-move-table > tr:hover a.bati-row-move {
    opacity: 1;
}

.bati-row-move-button {
    opacity: 0;
}

.bati-move-table > tr:hover .bati-row-move-button {
    opacity: 1;
}

/*!
 *  tab
 */
.bati-workbase-tab {
    cursor: pointer;
    background-color: transparent !important;
    padding: 0 0.5rem !important;
    width: 100px;
    border: 0 !important;
}

/*!
 *  text
 */
.bati-text-solid {
    color: #7e8299 !important;
}

/*!
 *  bati-status
 */
.bati-system-preparing {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 30%;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 999999;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

@media (max-width: 591px) {
    .bati-system-preparing {
        display: block; /* 591px 이하에서 보여짐 */
    }
}

.bati-system-empty-app {
    background: url('/static/asset/media/illustrations/system/system_empty_app.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

.bati-system-empty-history {
    background: url('/static/asset/media/illustrations/system/system_empty_history.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

.bati-system-empty-recent {
    background: url('/static/asset/media/illustrations/system/system_empty_recent3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55% 70%;
}

.bati-system-empty-workflowHistory {
    background: url('/static/asset/media/illustrations/system/system_empty_corpHistory.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

.bati-system-empty-corpHistory {
    background: url('/static/asset/media/illustrations/system/system_empty_corpHistory.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}
/**
    projectlist
 */
.bati-project-content {
    flex: unset;
}

.bati-project-table-responsive {
    height: 100%;
    overflow-y: auto;
}

/**
    workbase
 */
.bati-workbase-check[type='checkbox'] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.bati-workbase-project-title {
    width: 260px;
    max-width: 260px;
    margin: 0 1rem 0 0 !important;
}

/* 작업화면 상단 제목 */
.bati-workbase-work-title {
    width: 260px;
    max-width: 260px;
    /*background-color: #f3f6f9 !important;*/
    padding: 0.5rem 1rem;
}

.bati-workbase-work-title:hover {
    outline: 1px solid #1484ec;
    border-radius: 5px;
    max-width: 100%;
}

.bati-workbase-work-title:focus {
    outline: 1px solid #1484ec;
    border-radius: 5px;
    max-width: 100%;
}

.bati-workbase-page-title {
    width: auto;
}

@media (max-width: 576px) {
    .bati-workbase-page-title {
        width: 70%;
    }
}

/**
    workflow
 */
.bati-action-title {
    display: flex;
    align-items: center;
}

.bati-action-img {
    width: 30px;
}

.bati-action-btn {
    width: 40px;
    height: 40px;
}

/* actionHistory 워크플로 이력 */
.bati-tag-emailAddress {
    display: inline-block;
    border-radius: 30px;
    background: #f5f8fa;
    padding: 3px 8px;
    margin-right: 5px;
    margin-bottom: 5px;
}

/**
    template gallery
 */

/**
    subscribe
 */
.bati-subscribe-plan {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.625rem !important;
    padding: 3.5rem 2.5rem;
}

.bati-subscribe-plan:hover {
    outline: 3px solid #8a79fc;
}
.bati-subscribe-plan:hover .bati-subscribe-plan-text {
    color: #8a79fc;
}

/**
**
    toast style
**
 */

.bati-content .toastui-editor-md-tab-container .tab-item {
    background: #eaedf1;
    border: 1px solid #dadde6;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
    color: #969aa5;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    height: 33px;
    line-height: 33px;
    margin-top: 3px;
    text-align: center;
    width: 70px;
}

.bati-content .toastui-editor-defaultUI .toastui-editor-md-tab-container {
    background: #f7f9fc;
    border-bottom: 1px solid #ebedf2;
    border-top-left-radius: 3px;
    float: left;
    font-size: 13px;
    height: 36px;
}

.bati-toast-notoolbar .toastui-editor-toolbar {
    display: none;
}

.bati-toast-notoolbar .toastui-editor-mode-switch {
    display: none !important;
}

.bati-toast-notoolbar .toastui-editor-ww-container {
    background-color: #eef3f7;
}

/* bati input */
.bati-input-cellrange {
    width: 90%;
    min-height: 40px;
    height: 100%;
    padding: 0.675rem 1rem 0 1rem;
    margin: 0 0 0 8px;
}

/* toast.css */

/* Bootstrap Toast 기본 스타일 덮어쓰기 */
.toast {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    width: 312px !important;
}

/* fade 클래스 트랜지션 제거 */
.toast.fade {
    transition: none !important;
}

/* showing/hide 클래스 opacity 제거 */
.toast.fade.show,
.toast.fade.hide,
.toast.fade.showing {
    opacity: 1 !important;
}

.toastr {
    position: relative;
    border-radius: 8px;
    background: white !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    animation: slideInLeft 0.1s ease forwards;
    margin-bottom: 10px !important;
    overflow: hidden; /* 프로그레스 바가 넘치지 않도록 */
    padding: 1.75rem 14px !important;
}

.toastr.hiding {
    animation: slideOutRight 0.5s ease forwards;
}

.toastr.has-guide-link {
    min-height: 80px;
}

/* 왼쪽에서 들어오는 애니메이션 */
@keyframes slideInLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 오른쪽으로 나가는 애니메이션 */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 토스트 아이콘 */
.toastr::before {
    content: '';
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 성공 토스트 스타일 */
.toastr.toastr-save {
    border-left: 4px solid #2ecc71;
}
.toastr.toastr-save::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232ecc71"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
}

/* 에러 토스트 스타일 */
.toastr.toastr-error {
    border-left: 4px solid var(--toastify-color-error, #e74c3c);
    background: var(--toastify-color-light, #fff);
}
.toastr.toastr-error::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff4b4b"><path d="M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"/></svg>');
}

/* 경고 토스트 스타일 */
.toastr.toastr-warning {
    border-left: 4px solid #ff9800;  /* react-toastify warning 색상 */
}
.toastr.toastr-warning::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff9800"><path d="M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"/></svg>');
}

/* 정보 토스트 스타일 */
.toastr.toastr-info {
    border-left: 4px solid #3498db;
}
.toastr.toastr-info::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>');
}

/* 메시지 스타일 */
.toastr-message {
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    width: 85%;
}

/* 닫기 버튼 스타일 수정 */
.toastr .close-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.5;
    font-size: 18px;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" fill="%23757575"><path fill-rule="evenodd" d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    color: transparent;
}

.toastr .close-btn:hover {
    opacity: 0.8;
}

/* 토스트 컨테이너 수정 */
#toast_div {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999999999;
    display: flex;
    flex-direction: column;
    gap: 10px;  /* 토스트 간격 */
}


/* 프로그레스 바 스타일 */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
}

.toast-progress::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: #2ecc71; /* 기본 색상 */
    animation: progress-bar linear forwards;
}

/* 타입별 프로그레스 바 색상 */
.toastr-save .toast-progress::after {
    background: #2ecc71;
}

.toastr-error .toast-progress::after {
    background: #ff4b4b;
}

.toastr-warning .toast-progress::after {
    background: #ff9800;  /* react-toastify warning 색상 */
}

.toastr-info .toast-progress::after {
    background: #3498db;
}

/* toast.css 프로그레스 바 부분 수정 */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* 높이 좀 더 키움 */
}

.toast-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 배경색 추가 */
}

/* 프로그레스 바 CSS 수정 */
.toast-progress-value {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #2ecc71;
    animation: progress-bar linear forwards;
}

/* 마우스 오버 시 애니메이션 일시정지 */
.toastr:hover .toast-progress-value {
    animation-play-state: paused;
}

/* 타입별 프로그레스 바 색상 */
.toastr-save .toast-progress-value {
    background-color: #2ecc71;
}

.toastr-error .toast-progress-value {
    background-color: #ff4b4b !important;
}

.toastr-warning .toast-progress-value {
    background-color: #ff9800 !important;  /* react-toastify warning 색상 */
}

.toastr-info .toast-progress-value {
    background-color: #3498db;
}

/* 프로그레스 바 애니메이션 */
@keyframes progress-bar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/**
    input placeholder
 */

.bati-placeholder-calendar::-webkit-input-placeholder {
    background-image: url(/static/asset/media/svg/shapes/calendar3.svg);
    background-size: contain;
    background-position: 1px center;
    background-repeat: no-repeat;
    padding-left: 30px;
}

.bati-placeholder-watch::-webkit-input-placeholder {
    background-image: url(/static/asset/media/svg/shapes/clock-fill.svg);
    background-size: contain;
    background-position: 1px center;
    background-repeat: no-repeat;
    padding-left: 10%;
}

/**
    tagify
 */
.bati-input-tagify {
    min-height: 40px;
    height: 100%;
    padding: 0.675rem 1rem 0 1rem;
    margin: 0;
}

.bati-input-tagify .tagify__tag {
    background: #eff2f5;
}

.bati-input-tagify.tagify .tagify__tag > div::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    transition: 120ms ease;
    animation: tags--bump 0.3s ease-out 1;
    box-shadow: none;
}

.bati-input-tagify .tagify__tag > div::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    transition: 120ms ease;
    animation: tags--bump 0.3s ease-out 1;
    box-shadow: none;
}

.bati-input-tagify.tagify .tagify__tag:focus div::before,
.bati-input-tagify.tagify .tagify__tag:hover:not([readonly]) div::before {
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    box-shadow: none;
}

.bati-input-tagify .tagify__tag__removeBtn {
    width: 7px;
    height: 7px;
}

.bati-input-tagify .tagify__tag .tagify__tag__removeBtn {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238A79FC'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

.bati-input-tagify .tagify__tag .tagify__tag__removeBtn::after {
    content: unset;
}

.bati-input-tagify.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag {
    border: 1px solid #8a79fc;
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    /*margin: 0.2rem 0.4rem 0.2rem 0.4rem;*/
    margin: 0rem 0.4rem 0rem 0.4rem;
    font-weight: inherit;
}

.bati-input-tagify .tagify__tag {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 5px 5px;
    position: relative;
    z-index: 1;
    outline: 0;
    line-height: normal;
    cursor: default;
    transition: 0.13s ease-out;
    border: 1px solid #8a79fc;
    border-radius: 0.2rem;
}

.bati-input-tagify .tagify__tag-text {
    color: #8a79fc;
}

/*//////////////////////////////////////////////////////////////////////////////////*/
.bati-tagify-input-white {
    height: 100%;
    margin: 0;
}

.bati-tagify-input-white.tagify .tagify__tag {
    background: #fff;
}

.bati-tagify-input-white.tagify .tagify__tag > div::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    transition: 120ms ease;
    animation: tags--bump 0.3s ease-out 1;
    box-shadow: none;
}

.bati-tagify-input-white .tagify__tag > div::before {
    content: '';
    position: absolute;
    border-radius: inherit;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    transition: 120ms ease;
    animation: tags--bump 0.3s ease-out 1;
    box-shadow: none;
}

.bati-tagify-input-white.tagify .tagify__tag:focus div::before,
.bati-tagify-input-white.tagify .tagify__tag:hover:not([readonly]) div::before {
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    box-shadow: none;
}

.bati-tagify-input-white .tagify__tag__removeBtn {
    width: 7px;
    height: 7px;
}

.bati-tagify-input-white .tagify__tag .tagify__tag__removeBtn {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2399A1B7'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important;
}

.bati-tagify-input-white .tagify__tag .tagify__tag__removeBtn::after {
    content: unset;
}

.bati-tagify-input-white.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag {
    border: 1px solid #fff;
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    /*margin: 0.2rem 0.4rem 0.2rem 0.4rem;*/
    margin: 0rem 0.4rem 0rem 0.4rem;
    font-weight: inherit;
}

.bati-tagify-input-white .tagify__tag {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 5px 5px;
    position: relative;
    z-index: 1;
    outline: 0;
    line-height: normal;
    cursor: default;
    transition: 0.13s ease-out;
    border: 1px solid #fff;
    border-radius: 0.2rem;
}

.bati-tagify-input-white .tagify__tag-text {
    color: #99a1b7;
}

/*/////////////////////////////////////////////////////////////*/

/* bati keyword tagify */
.bati-tagify-keyword.tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag {
    border: 0;
    border-radius: 0.2rem;
    padding: 0.2rem 0.4rem;
    margin: 0.2rem 0.4rem 0.2rem 0.4rem;
    font-weight: inherit;
    background-color: #fff;
}

.bati-tagify-keyword .tagify__tag {
    display: inline-flex;
    align-items: center;
    margin: 5px 0 5px 5px;
    position: relative;
    z-index: 1;
    outline: 0;
    line-height: normal;
    cursor: default;
    transition: 0.13s ease-out;
}

.bati-tagify-keyword .tagify__tag-text {
    color: #7e8299;
}

.tagify.bati-tagify-keyword .tagify__tag .tagify__tag__removeBtn {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237E8299'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

.bati-input-tagify .tagify__tag {
    padding: 0.2rem 0.4rem;
    background-color: #eff2f5;
    margin: 0rem 0.4rem 0rem 0.4rem;
}

.bati-input-tagify .tagify__tag > div {
    padding: 0;
    margin: 0;
}

.bati-input-tagify:not(.form-control-sm):not(.form-control-lg) .tagify__tag .tagify__tag__removeBtn {
    margin: 0 0.3rem 0 0.5rem;
}

/* tagify 액션별 class */
.bati-input-tagify.tagify .tagify__tag.googleSearch_tag {
    border-radius: 0.475rem;
    padding: 0.2rem 0.4rem;
    margin: 0 !important;
    font-weight: inherit;
}

/* tagify dropdown theme*/
.dropdown__theme-purple.tagify__dropdown {
    background-color: #fff !important;
    border-radius: 0.2rem;
    border: 1px solid #8a79fc !important;
    width: 135px !important;
}

.dropdown__theme-purple .tagify__dropdown .tagify__dropdown__wrapper {
    background-color: #fff;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none;
    max-height: 300px;
    overflow: auto;
}

.dropdown__theme-purple.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item--active,
.dropdown__theme-purple.tagify__dropdown .tagify__dropdown__item:hover {
    background-color: #8a79fc;
    color: #fff;
}

.dropdown__theme-purple.tagify__dropdown .tagify__dropdown__item {
    background-color: #fff;
    color: #000;
    border-radius: 0;
    padding: 0.75rem;
    margin: 0;
    box-shadow: none;
    font-weight: 500;
}

/* sortable */
/* 이동할때 */
.bati-move-table tr td:nth-child(1) {
    background-color: transparent;
    width: 30px;
}
.bati-move-table tr td:nth-child(2) {
    background-color: transparent;
    width: 60px;
}
.bati-move-table tr td:nth-child(3) {
    background-color: transparent;
    width: 154px;
    max-width: 154px;
}
.bati-move-table tr td:nth-child(4) {
    background-color: transparent;
    width: 132px;
}
.bati-move-table tr td:nth-child(5) {
    background-color: transparent;
    width: 50px;
}

.bati-move-table .ui-sortable-helper td:nth-child(1) {
    background-color: transparent;
    width: 30px;
}
.bati-move-table .ui-sortable-helper td:nth-child(2) {
    background-color: transparent;
    width: 60px;
}
.bati-move-table .ui-sortable-helper td:nth-child(3) {
    background-color: transparent;
    width: 154px;
}
.bati-move-table .ui-sortable-helper td:nth-child(4) {
    background-color: transparent;
    width: 132px;
}
.bati-move-table .ui-sortable-helper td:nth-child(5) {
    background-color: transparent;
    width: 66px;
}

.bati-move-table tr {
    display: block;
    width: 450px;
    height: 39px !important;
}

.bati-move-table tr td {
    height: 38px;
}

.bati-move-table tr:first-child {
    border-top: 0px solid var(--kt-border-color);
    margin-top: 15px;
}

.bati-move-table tr:last-child {
    border-bottom: 1px solid var(--kt-border-color);
    margin-bottom: 15px;
}

/*select2*/
.setBaseData_cellTypeSelect.form-select {
    border: 0;
    background-color: #fff !important;
}

.setBaseData_cellTypeSelect.form-select:disabled {
    color: #a1a5b7;
    background-color: #fff;
    border-color: #000;
}
/*plugins.bundle.css*/
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted .svg-icon .svg-icon-direct {
    background-color: #1484ec;
}

/**
    splitter
 */

.bati-panel-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 100%;
}

.bati-panel {
    border: 0;
}

/* panel */
.bati-panel-right {
    border: 1px solid #9b5cff;
    border-radius: 0.85rem;
    width: 100%;
    overflow: inherit;
    min-width: 150px;
}

.bati-panel-left {
    flex: 0 0 auto;
    display: inline-flex;
    overflow: hidden;
    width: 50%;
    min-height: 200px;
    min-width: 30%;
    max-width: 70%;
    white-space: nowrap;
    border-right: 1px solid #c6c6c6;
    border-bottom: 1px solid #c6c6c6;
    border-top-right-radius: 0.85rem;
    border-bottom-right-radius: 0.85rem;
}
@media (max-width: 991px) {
    /* panel mobile view*/
    .bati-panel-right.bati-panel-right-mobile {
        position: absolute;
        top: 0;
        left: 0;
        display: block !important;
        z-index: 20;
    }
}

/* spread js*/
.bati-spread-container {
    width: 100%;
    height: 100%;
}

.bati-spread-component-left {
    width: 100%;
    overflow: hidden;
    height: calc(100vh - 106px);
}
.bati-spread-sheet-right {
    width: 100%;
    height: calc(100vh - 208px);
    overflow: hidden;
}

.bati-panel-container,
#workflow {
    transition: height 0.2s ease;
}

@media (max-width: 991px) {
    .bati-spread-sheet-right {
        height: calc(100vh - 170px);
    }

    .panel-fullscreen .bati-spread-sheet-right {
        height: auto;
    }
}

@media (max-width: 576px) {
    .bati-panel-left {
        overflow: auto;
    }

    .bati-spread-component-left {
        height: calc(100vh - 152px);
    }

    .bati-ios.bati-spread-component-left {
        height: calc(100vh - 106px);
    }

    #bati-gallery-panel .bati-spread-component-left {
        height: calc(100vh - 152px);
    }

    #bati-gallery-panel .bati-ios.bati-spread-component-left {
        height: calc(100vh - 106px);
    }

    .bati-spread-sheet-right {
        height: calc(100vh - 221px);
    }

    #bati-gallery-panel .bati-spread-sheet-right {
        height: calc(100vh - 221px);
    }

    .bati-android.bati-panel-container {
        overflow: auto;
        height: 100%;
    }

    .panel-fullscreen .bati-spread-component-left {
        height: calc(100vh - 30px);
    }

    #bati-gallery-panel .panel-fullscreen .bati-spread-component-left {
        height: 100vh;
    }
}

.panel-fullscreen .bati-spread-component-left {
    height: 100vh;
}

.panel-fullscreen .bati-spread-sheet-right {
    height: calc(100vh - 100px);
}

.bati-formula-bar-item {
    width: 100%;
    overflow: hidden !important;
}

.bati-formula-bar-item .gcsj-func-color-content {
    white-space: nowrap !important;
}

/**
    loader
 */
.action-loading *,
[data-action-loading='on'] * {
    transition: none !important;
}

.page-loader {
    background-color: var(--kt-body-bg);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: none;
}

.action-loading .page-loader,
[data-action-loading='on'] .page-loader {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bati-loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 0.475rem;
    border-bottom-right-radius: 0.475rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Bootstrap 모달보다 높은 z-index 값 */
}

/**
    page placeholder
 */

/*placeholder (visual helper)*/
.bati-loader-placeholder {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.85rem;
    z-index: 14;
}

.bati-placeholder-glow .bati-loader-placeholder {
}

@-webkit-keyframes placeholderAnimate {
    0% {
        background-position: -650px 0;
    }
    100% {
        background-position: 650px 0;
    }
}

@keyframes placeholderAnimate {
    0% {
        background-position: -650px 0;
    }
    100% {
        background-position: 650px 0;
    }
}

@keyframes bati-placeholder-glow {
    50% {
        opacity: 0.9;
    }
}

.bati-placeholder-wave {
    mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
    mask-size: 200% 100%;
    animation: bati-placeholder-wave 2s linear infinite;
}

@keyframes bati-placeholder-wave {
    100% {
        mask-position: -200% 0;
    }
}

/* 이메일 첨부파일 스타일 */
.file-size {
    color: lightgray;
}
.file-name {
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}
.file-name:hover {
    text-decoration: underline; /* 밑줄 */
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2); /* 음영 */
}

/* fixed container */

/* list style */
.bati-list-last li:last-child {
    margin: 0 !important;
}

/* bati tag */
.bati-tag-text {
    color: #8a79fc;
    font-size: 1.1rem;
}

div[data-control='at']::before {
    content: attr(data-placeholder); /* placeholder 텍스트 */
    color: #b5b5c3; /* placeholder 색상 */
    display: block;
    cursor: text;
}

div[data-control='at']:not(:empty)::before {
    display: none; /* div에 내용이 있으면 가상 요소 숨김 */
}

/* position */
.bati-position-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/**
    responsive
 */

/* 모바일 및 태블릿에서만 플로팅 메뉴 보이기 */
@media (max-width: 1024px) {
    .bati-floating {
        display: block;
    }
}

/**
    projectlist 테이블 column
 */
#projectTable td:nth-child(1) {
    width: 2%; /* 너비 재조정 */
}
#projectTable td:nth-child(2) {
    width: 3%; /* 너비 재조정 */
}
#projectTable td:nth-child(3) {
    width: 35%;
}
#projectTable td:nth-child(4) {
    width: 12%;
}
#projectTable td:nth-child(5) {
    width: 12%;
}
#projectTable td:nth-child(6) {
    width: 13%;
}
#projectTable td:nth-child(7) {
    width: 13%;
}
#projectTable td:nth-child(8) {
    width: 10%;
}
/*******/
#table-draggable1 td:nth-child(1) {
    width: 2%; /* 너비 재조정 */
}
#table-draggable1 td:nth-child(2) {
    width: 3%; /* 너비 재조정 */
}
#table-draggable1 td:nth-child(3) {
    width: 35%;
}
#table-draggable1 td:nth-child(4) {
    width: 12%;
}
#table-draggable1 td:nth-child(5) {
    width: 12%;
}
#table-draggable1 td:nth-child(6) {
    width: 13%;
}
#table-draggable1 td:nth-child(7) {
    width: 13%;
}
#table-draggable1 td:nth-child(8) {
    width: 10%;
}

@media (max-width: 991.98px) {
    /**
          bati-aside
       */
    #bati-aside {
        left: -100%;
    }

    /* 나타난 상태 */
    #bati-aside.show {
        left: 0;
        z-index: 14; /* workbase z-index 13*/
    }
    /* overlay 보여줌 */
    #bati-aside-overlay.show {
        display: block;
        z-index: 14; /* workbase z-index 13*/
    }

    /*.bati-body-scroll {*/
    /*    overflow: hidden;*/
    /*}*/

    .bati-project-card {
        height: calc(100vh - 165px);
    }

    /*.bati-project-card .bati-card-body {*/
    /*    overflow-y: auto;*/
    /*}*/

    /*****************************/

    .bati-card-bg-project {
        background-image: none;
        padding-right: 10px !important;
    }
    .hidden-col {
        display: none;
    }
    #projectTable td:nth-child(1) {
        width: 0%;
    }
    #projectTable td:nth-child(2) {
        width: 10%;
    }
    #projectTable td:nth-child(3) {
        width: 59%;
    }
    #projectTable td:nth-child(4) {
        width: 21%;
    }
    #projectTable td:nth-child(5) {
        display: none;
    }
    #projectTable td:nth-child(6) {
        display: none;
    }
    #projectTable td:nth-child(7) {
        display: none;
    }
    #projectTable td:nth-child(8) {
        display: none;
    }
    /**********/
    #table-draggable1 td:nth-child(1) {
        width: 5%;
    }
    #table-draggable1 td:nth-child(2) {
        display: none;
    }
    #table-draggable1 td:nth-child(3) {
        width: 30%;
    }
    #table-draggable1 td:nth-child(4) {
        width: 20%;
    }
    #table-draggable1 td:nth-child(5) {
        display: none;
    }
    #table-draggable1 td:nth-child(6) {
        display: none;
    }
    #table-draggable1 td:nth-child(7) {
        display: none;
    }
    #table-draggable1 td:nth-child(8) {
        display: none;
    }

    .hoverMove:hover .sorting_1 a.move {
        opacity: 0;
        display: none;
    }

    .connectedSortable > tr:hover a.move {
        opacity: 0;
        display: none;
    }
}
/* placeholder */
.placeholder-start {
    white-space: pre-line; /* 줄바꿈을 유지 */
    text-align: left; /* 좌측 정렬 */
    font-family: inherit; /* 폰트 상속 */
}

/******나중에수정********/
.bati-btn-group .form-check-image.active {
    border: 1px solid #1484ec;
}

.bati-btn-group .form-check-image.active .form-check-wrapper {
    border: none;
}

.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/***********************/
.text-gradient-1 {
    background: linear-gradient(90deg, #08c5cb 0%, #9b5dff 100%);
    background-clip: text; /* 텍스트 부분에만 그라디언트 적용 */
    -webkit-background-clip: text; /* 사파리 등 웹킷 기반 브라우저 대응 */
    -webkit-text-fill-color: transparent; /* 텍스트를 투명하게 설정 */
}

.input-group.is-invalid {
    outline: 1.5px solid #f1416c;
    border-radius: 0.475rem;
}

.border-validate-errors {
    outline: 1.5px solid #f1416c;
    border-radius: 0.475rem;
}

.border-inline-validate-errors {
    border: 1.5px solid #f1416c !important;
    border-radius: 0.475rem;
}

.invalid-feedback-text {
    width: 100%;
    margin-top: .5rem;
    font-size: .925rem;
    color: #f1416c;
}

.select2-container--error .select2-selection {
    border: 1.5px solid #f1416c;
    border-radius: 0.475rem;
}

/* 닫기 버튼 스타일 수정 */
.toastify-close-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.toastify-close-button:hover {
    opacity: 0.7;
}

.toastify-close-button svg {
    fill: #757575;
    width: 100%;
    height: 100%;
}

.toast-guide-link {
    position: absolute;
    bottom: 10px;
    right: 25px;
    z-index: 10;
}

.toast-guide-link a {
    color: #0066cc;
    font-size: 13px;
    padding: 2px 5px;
}

.toast-guide-link a:hover {
    color: #004080;
}



.toastify-close-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 15px;
    top: 15px;
}

.toastify-close-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}


/* at datatag */
.atwho-container {
    z-index: 99999;
}