@font-face {
    font-family: 'Montserrat-Bold';
    src: 
        url('../fonts/Montserrat/Montserrat-Bold.eot'),
        url('../fonts/Montserrat/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat/Montserrat-Bold.woff2'     ) format('woff2'),
        url('../fonts/Montserrat/Montserrat-Bold.woff'      ) format('woff'),
        url('../fonts/Montserrat/Montserrat-Bold.ttf'       ) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: 
        url('../fonts/Montserrat/Montserrat-SemiBold.eot'),
        url('../fonts/Montserrat/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat/Montserrat-SemiBold.woff2'     ) format('woff2'),
        url('../fonts/Montserrat/Montserrat-SemiBold.woff'      ) format('woff'),
        url('../fonts/Montserrat/Montserrat-SemiBold.ttf'       ) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: 
        url('../fonts/Montserrat/Montserrat-Medium.eot'),
        url('../fonts/Montserrat/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Montserrat/Montserrat-Medium.woff2'     ) format('woff2'),
        url('../fonts/Montserrat/Montserrat-Medium.woff'      ) format('woff'),
        url('../fonts/Montserrat/Montserrat-Medium.ttf'       ) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: 
        url('../fonts/OpenSans/OpenSans-Bold.ttf'       ) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-SemiBold';
    src: 
        url('../fonts/OpenSans/OpenSans-SemiBold.ttf'       ) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Medium';
    src: 
        url('../fonts/OpenSans/OpenSans-Regular.ttf'       ) format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root 
{
    --flat-blue       :#3A68B1;
    --light-grey-blue :#A5AAB5;
    --slate-grey      :#5A5C60;
    --pale-grey       :#F6F7F8;
    --light-periwinkle:#D0D7E7;
    --greyish-teal    :#5EBDAB;
    --stormy-blue     :#519AAC; 
    --top-select-box  :#F7F8F9; 
    --select-box      :#E8EAEC;     
    --very-light-pink :#EDEDED;
    --battleship-grey :#787C84 ;    
    --border-grey     :#D3D3D3 ;    
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --bg-color: #f1f5f9;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --border-color: #e2e8f0;    
}

html
{    
    background-color: #FFFFFF;
}

body
{
    font-family: "Montserrat-SemiBold";
    font-size: 12px;
    padding  : 0px;
    margin   : 0px;
    color    : var(--slate-grey);    
    overflow-y: hidden;
}

body a:hover, a:visited
{
    text-decoration: none!important;
}

label 
{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0px;
    font-weight: bold;
}

input:disabled,select:disabled
{
    background: var(--pale-grey)!important;    
    color     :#A7A8AB!important;
}

.disabled
{
    color     :#A7A8AB!important;
}

::placeholder 
{ 
    color  : var(--light-grey-blue) !important;
    opacity: 1; 
}

textarea
{
    padding: 10px!important;   
}

textarea.k-textbox
{    
    font-size: 12px!important;
}

.top-top--spacing
{
    padding-top : 7px; 
}

.top-bottom--spacing
{
    padding-bottom : 30px; 
}

.content 
{
    border-radius: 0px;
    padding: 20px 42px 0px 40px;    
    --bg-opacity: 1;    
    /* background-color: #F1F5F8; */
    /* background-color: rgba(241, 245, 248, var(--bg-opacity));         */
}


.content>.container
{
    height       : calc(100% - 100px);    
    margin-left  : 0!important;
    margin-right : 0!important;
    padding-left : 0!important;
    padding-right: 0!important;    
}

.side-nav
{
    padding-right:0px  ;    
    min-width    :230px;
}

.side-nav .side-menu
{
    height:36px;
    color:var(--light-grey-blue);
    margin-bottom:0px;
    border-radius:0px;     
    padding-left:20px;         
    font-family:"OpenSans-Bold";
    font-size:12px;    
}

.side-nav > ul > li
{
    margin-bottom:10px;
}

.side-nav > ul ul 
{
    --bg-opacity    : 1;
    border-radius   : 0px;
    background-color: #F6F7F8;
    padding-left    : 20px;    
}

/* .side-nav > ul > li > .side-menu:hover:not(.side-menu--active):not(.side-menu--open) .side-menu__icon:before 
{
    
    border-radius: 0px;
}  */

.side-nav > ul > li > .side-menu:hover, .side-nav > ul > li > .side-menu.side-menu--open
{
    background-color: #E5E8ED;   
    text-decoration: none;
} 

/* .side-nav > ul > li > .side-menu:not(.side-menu--active) .side-menu__icon:before 
{
    border-radius: 0px;
} */

.side-nav > ul ul li a:not(.side-menu--active) 
{
    --text-opacity: 1;
    color:var(--light-grey-blue);   
}

.side-nav > ul ul li:first-child  
{
    padding-top:3px;
}

.side-nav > ul ul li:last-child  
{
    padding-bottom:30px;
}

.side-nav > ul ul li .side-menu:hover,.side-nav >  ul ul li .side-menu.side-menu--active  
{
    border-radius: 0px;
    color:var(--flat-blue);
}    

.side-nav > ul > li > .side-menu.side-menu--active 
{ 
    background-color:var(--flat-blue);     
    box-shadow  : -5px 0px #224099;
    margin-left : 5px ;
    padding-left: 15px;        
}  

.side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon:before 
{
    background-color: var(--flat-blue);      
}   

.side-nav > ul > li > .side-menu.side-menu--active .side-menu__icon,  .side-nav > ul > li > .side-menu.side-menu--active .side-menu__title, .side-nav > ul > li > .side-menu.side-menu--active .side-menu__sub-icon  
{ 
    color:#FFFFFF;         
}    

.side-nav > ul > li > .side-menu .side-menu__title
{
    padding-left:15px;        
}  

/* .content>div:nth-child(1)>div
{
    margin-left : 30px;
} */

.top_info-menu
{
    color      : var(--flat-blue);
    font-size  : 16px;
    font-family: "Montserrat-Bold";
}  

.top_info-today
{
    font-size:12px;
    color:var(--light-grey-blue);       
}  

.top_info-system
{
    font-size:12px;
    color:var(--light-grey-blue);    
}  

.top_info-user
{
    font-size:12px;
    color: var(--flat-blue);
    font-family: "Montserrat-Bold";    
}  


.top_info-system--left
{
    background-color: var(--pale-grey);    
    border : solid 1px var(--top-select-box);  
    border-right-width        : 0px;
    border-top-left-radius    : 8px;
    border-bottom-left-radius : 8px;
    padding : 3px 0px 2px 0px;
}

.top_info-system--center
{
    background-color : var(--pale-grey);
    border : solid 1px var(--top-select-box);  
    border-left-width : 0px;
    border-right-width: 0px;
    padding: 6px 0px 0px 0px;    
}

.top_info-system--right
{
    background-color : var(--pale-grey);    
    border : solid 1px var(--top-select-box);  
    border-left-width         : 0px;
    border-top-right-radius   : 8px;
    border-bottom-right-radius: 8px;
    padding : 6px 10px 7px 0px;    
}

.option-pannel
{
    padding-bottom : 10px;    
    min-height     : 50px;
}

/* .mid-pannel
{    
    padding-top : 15px;
}
*/

.tab-content.content-pannel
{    
    border:none;
    margin-top:-5px;
} 

.content-pannel
{
    padding-top    : 10px;
    padding-bottom : 10px;        
    border-top-width: 1px ;
    border-color: var(--light-periwinkle);    
}

.content-pannel .grid-contents
{
    padding-top : 1px;
}

.content-pannel.no-border
{
    border-top-width: 0px !important;
}

.option-label
{
    font-family: "Montserrat-SemiBold";
    color:var(--light-grey-blue);
    font-size      : 10px;
    padding-left   : 6px;
    padding-bottom : 2px;    
    white-space  : nowrap;    
    width:100%;
} 

/* .option-row
{
    display:flex;
} */

.option-item{   
    display     : block;
    width       : 140px;
    margin-right: 5px  ;   
}
.option-item-sm{   
    display     : block;
    width       : 120px;
    margin-right: 5px  ;   
}

.option-item-lg{   
    display     : block;
    width       : 180px;
    margin-right: 5px  ;   
}

.option-item-xl{   
    display     : block;
    width       : 200px;
    margin-right: 5px  ;   
}

.option-space-md
{
    width:10px;
}

.option-space-lg
{
    width:80px;
}

.option-input
{
    width     : 100%;  
    font-size : 12px;
}

.option-wrapper>.option-items:not(.option-group)
{
    margin-left : 10px;
}

.option-wrapper>div:not(:first-child).option-group
{
    margin-left : 40px;
    /* width: calc(100% + 120px); */
}

.option-row:not(:nth-of-type(1))
{
    margin-top:10px;
}

/*
@media (max-width: 375px) 
{
    .option-wrapper>.option-items:not(.option-group)
    {
        margin-left:0px;
    }    
    .option-wrapper>div:not(:first-child).option-group
    {
        margin-left:0px;
    }
    .option-space
    {
        margin-left:0px;
    }    
} */

button, .k-upload-button,.k-upload-button:hover
{
    border-radius: 5px;
    background-color: var(--greyish-teal);
    color        : #FFFFFF;   
    padding      : 5px 10px 3px 10px;
    font-size    : 12px!important;
    font-family  : "Montserrat-Medium";
    white-space  : nowrap;
    margin-left  : 2px;
    border       : none;
}

button:focus,button:hover,a:focus
{
    outline: none;
    box-shadow: none!important;    
}

button.stormy-blue
{
    background-color: var(--stormy-blue);
}

button.flat-blue
{
    background-color: var(--flat-blue);
}

button.light-grey-blue
{
    background-color: var(--light-grey-blue);
}

.option-button>button:not(:nth-of-type(1))
{
    margin-left:2px;
}
/* .grid
{
    height:100%;
} */

.popup-box
{
    border-radius: 8px;
    box-shadow   : 0 3px 6px 3px rgba(0, 0, 0, 0.15);
    border       : solid 1px var(--pale-grey);
    background-color: #FFFFFF;
}

.sub-title{
    margin    : 3px 20px 3px 0px;
    font-size : 13px;
    font-family: "Montserrat-Bold";
    color:var(--battleship-grey);    
}

.sub-title:not(:first-child)
{   
    margin-top : 20px;
}

.sub-title + div button:first-child
{   
    margin-left : -1px;
}

/* .sub-title + div
{   
    margin-bottom : 3px;
} */

footer
{    
    margin-top  : 10px;
    border-top-width: 1px;
    border-color: var(--light-grey-blue);
    color       : var(--light-grey-blue);
    text-align  : right;
    padding     : 12px 0px 0px 0px ;    
} 

.document
{    
    padding   : 0px 0px 0px 20px;
    margin    : 0px;
    font-size : 12px;
    border-radius: 8px;
    /* box-shadow   : 0 3px 6px 3px rgba(0, 0, 0, 0.15);
    border       : solid 1px var(--pale-grey); */
    background-color: #FFFFFF;
}

.document .title-text
{
    font-family: "Montserrat-Bold";    
    color : var(--battleship-grey);
    font-size      : 12px;
    padding-bottom : 9px;    
    border-bottom-style:dotted;
    border-bottom-width: 1px ;    
    /* border-color: var(--very-light-pink); */
    border-color: #C7C7C7;    
}

.document .document-header
{
    margin-top    : 15px;    
    margin-bottom : 10px;    
}

.document .item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1px; /* 이 값을 줄이거나 늘려서 줄 간의 간격을 조정하세요 */
}

.document .item-label
{
    font-family: "Montserrat-SemiBold";
    color      : #9D9D9D;
    white-space: nowrap;    
    width      : 100%;
    font-size  : 10px;
    /* height     : 20px; */
} 

.document .item-value
{
    font-family: "Montserrat-Bold";
    color      : #404040;
    white-space: nowrap;    
    width      : 100%;
    font-size  : 13px;
    padding-top: 4px ;
} 
.document .item-value-10
{
    font-family: "Montserrat-Bold";
    color      : #404040;
    white-space: nowrap;    
    width      : 100%;
    font-size  : 10px;
    padding-top: 2px ;
} 

.document .detail-label
{
    font-family: "Montserrat-SemiBold";
    color      : #84AFCC;
    white-space: nowrap;    
    width      : 100%;
    font-size  : 12px;
    /* height     : 20px; */
} 

.document .detail-value
{
    font-family: "Montserrat-SemiBold";
    color      : #9D9D9D;
    white-space: nowrap;    
    width      : 100%;
    font-size  : 12px;
    padding-top: 4px ;
} 

.document .approval-comment .title-text
{
    border:none;
}

/* .document .item-label, .document .item-label + div 
{
    height : 25px ;   
} */

.document .item-input
{
    width    : 100%;  
    font-size: 12px!important;
}

/* .document .tab-container
{
    height:370px;    
} */

.document li:hover 
{
    background: transparent!important;
} 

.account-popup label
{    
    margin-right:10px;
}

.nav-tabs
{
    border-bottom:none;
}

.nav-tabs > li 
{
    float: left;
    margin-bottom: -1px;
    margin-right : 40px;
}

.nav > li > a 
{
    position: relative;
    display : block;
    padding : 0px 0px 3px 0px;  
    color: var(--slate-grey);       
    font-family: "Montserrat-Bold"!important;
    font-weight: bold;
    /* font-size:12px; */
}

.nav-tabs > li > a 
{
    margin-right: 0px;
    line-height : 1.42857143;
    border      : none;    
    /* border: 1px solid transparent;
    border-radius: 4px 4px 0 0; */
}

.nav-tabs .active 
{    
    --border-opacity: 1;
    border-bottom   : solid 3px var(--stormy-blue);
    font-weight     : 500;
}

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus 
{    
    cursor: default;    
    border: none   ;    
}

.nav-tabs > li:not(.active) > a, 
.nav-tabs > li:not(.active) > a:hover 
{
    background: none;
    color : var(--light-grey-blue);
}

.approval-comment .item-header
{
    color        : var(--light-grey-blue);  
    border       : none;  
    margin-right : 20px;
    white-space  : nowrap;    
}

.item-content .number, .item-content .select
{
    width:99%!important;
}

.swal-overlay  
{
    z-index: 100000000000!important;
}

.swal-button-container 
{
    margin-right: 5px;
    display: inline-block;
    position: relative;
}

.swal-width-500
{
    width     : 500px;
    text-align: center;
    height    : auto;
}

.swal-width-550 
{
    width     : 550px;
    text-align: center;
    height    : auto;
}

.swal-width-600 
{
    width     : 600px;
    text-align: center;
    height    : auto;
}

.swal-width-650 
{
    width     : 650px;
    text-align: center;
    height    : auto;
}

.dashboard
{
    font-family: "Montserrat-SemiBold";
}

.dashboard .sub-title
{
    color     : #3D74BD;
    font-size : 24px;  
    /* font-family : "Montserrat-SemiBold"; */
}

.dashboard .search-period
{
    color     : var(--battleship-grey);  
    font-size : 18px;         
}

.dashboard .section-title
{
    font-size: 15px;
    color    : #26609F;
    font-family : "Montserrat-Bold";
}

.dashboard .tile
{
    border : solid 1px #D7D6DB;
    margin : 5px 30px 0px 0px;
    width  : 200px;
    height : 200px;
    border-radius: 6px;    
}

.dashboard .border-tradewind
{
    border:solid 3px #6CB7A8;
    width :60%;
}

.dashboard .border-hippie-blue
{
    border:solid 3px #5398A3;
    width :60%;
}


.dashboard .tile-title
{    
    margin:30px 0px 8px 20px;
    font-size   : 18px;    
    color       : #65676B;
}


.dashboard .tile-number
{
    text-align   : right;    
    padding-top  : 25px;
    padding-right: 25px;
    font-size    : 40px;        
    font-family  : "Montserrat-SemiBold";
    color        : #2F2F2F;
}

.item-detail-template  .detail-value
{
    font-family: "Montserrat-Bold";
    /* font-family: 'OpenSans-SemiBold'!important; */
    font-size  : 12px;
    color      : #404040;
} 

@media (max-width: 639px) 
{
    .option-item:not(:first-child)
    {   
        display: block;        
        width  : 150px;
        margin : 10px 0px 0px 0px;
    }
    
    /* .document .item-label
    {
        text-align : left;
    }  */
} 

.no-pl{
    padding-left:0px!important;
}
#div_BtnSap{
    align-items: flex-end!important;
    margin-left: auto;
}
.swal-text {
    font-family: 'OpenSans-SemiBold';    
}
#d_Div_Document  .k-datepicker.k-input{
    padding: 0.01em
}
#d_Div_Document .tab-pane .k-item, #d_Div_Document .tab-pane .k-listbox{
    line-height: 0.1em!important;
    min-height: 0.1em!important;
    margin-top: -1px!important;
}
#d_Div_Document .tab-pane ul.k-reset.k-list{
    margin-left: 5px!important;
    margin-top : 10px!important;
}
#d_Div_Document .tab-pane .k-upload.k-header.k-upload-sync.k-upload-empty{
    border: none!important;    
}
#d_Div_Document .tab-pane .k-listbox .k-list-scroller 
{
    border:none!important;    
}
.input-label {
    margin-right: 20px; /* 라벨과 인풋 사이의 마진을 20px로 설정 */
}
input[type="file"] {
    display: block;
    width: 100%;
}

.option-label.radio-label{
    margin-top: 10px; /* 라벨과 인풋 사이의 마진을 20px로 설정 */   
}

.radio-label>label{
    display: flex; 
    align-items: end; 
    gap: 5px;
}

.check-label>label{
    display: flex;
    align-items: end; /* 세로 가운데 정렬 */
    gap: 5px;      
}

.option-item.check-item{
    display: flex;         
    gap: 10px;             
    align-items: center; 
}

::-webkit-file-upload-button {
    border-radius: 5px;
    background-color: var(--stormy-blue);
    color        : #FFFFFF;   
    padding      : 5px 20px 4px 20px;
    font-size    : 12px!important;
    font-family  : "Montserrat-Medium";
    white-space  : nowrap;
    margin-left  : 3px;
    border       : none;
}

/*Splitter Layout*/
#splitWrap{
    display:flex; width:100%;
    height:calc(100vh - 260px);
}

/* === Full 모드: 우측 완전 숨김 + 좌측 100% === */
#splitWrap:not(.detail-open){ gap:0; }
#splitWrap:not(.detail-open) #paneLeft{
    flex: 1 1 100% !important;
    max-width: 100% !important;
}
#splitWrap:not(.detail-open) #paneRight{ display:none !important; }
#splitWrap:not(.detail-open) .split-divider{ display:none !important; }

/* === Detail 모드: 25/75 === */
#splitWrap.detail-open{ gap:5px; }
#splitWrap.detail-open #paneLeft {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}
#splitWrap.detail-open #paneRight{
    display:flex !important;
    flex: 0 0 75% !important;
    max-width: 75% !important;
    overflow:hidden;
    flex-direction:column;
    gap:5px;
    padding-left:8px;
}

#paneLeft .grid-contents{ height:100%; }
#paneRight .grid-contents{ flex:1 1 auto; min-height:280px; }

.split-detail-card {
    background: #fff;
    border: 1px solid var(--light-periwinkle) !important;
    border-radius: 10px;
    padding: 10px 10px;
}
.split-section-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;
    color: #374151;
}

.split-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 10px 16px;
}
.split-detail-field .option-label-auto {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}
.split-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.split-grid-contents, #itemGrid { height: 100%; }
#paneLeft .grid-contents { height: 100%; }
#paneRight .grid-contents { flex: 1 1 auto; min-height: 280px; }

.split-divider {
    width: 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
    border-radius: 6px;
    align-self: stretch;
}
.grey-title{
    border: 1px solid var(--light-periwinkle) !important;
    border-radius: 10px;
    padding: 10px 10px;
    background-color: var(--very-light-pink);
    color: var(--slate-grey);
}

.skygrey-title{
    border: 1px solid #e8eeff !important;
    border-radius: 10px;
    padding: 10px 10px;
    background-color: #e8eeff;
    color: var(--slate-grey);
}

.card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    margin-bottom: 10px;
    overflow: hidden;    
}
.card-header {
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fdfdfd;    
    /* justify-content: space-between; */
}
.card-body { padding: 10px; }

.card-footer {
    padding: 12px 24px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}
.button-group { display: flex; gap: 2px; align-items: center; }