/* transform을 body에서 제거하여 position: fixed가 제대로 작동하도록 함 */
/* body {
    transform: rotate(0deg) !important;
} */

@media screen and (orientation: landscape) {
    /* body에 transform을 적용하면 position: fixed가 작동하지 않으므로 제거
       landscape 모드 경고는 index.html의 JavaScript로 처리됨 */
    /* body {
        transform: rotate(90deg) !important;
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    } */
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}

.cwi_datetime {
    min-width: 170px;
    max-width: 180px;
}
.cwi_timestamp {
    min-width: 190px;
    max-width: 200px;
}
.cwi_time {
    min-width: 120px;
}
.cwiicon-darkcyan{
    color: darkcyan;
}
.cwiicon-red{
    color: red;
}
.cwitablehead{
    text-align: center;
    font-weight:700;
}
.cwiitemcontent{
    justify-content:start !important;
}
.cwiinneritem{
    min-width: 115px !important;
}
.cwiinnerlabel{
    min-width: 80px !important;
}

.cwipaddingleft{
    padding-left: 0 !important;
}
.cwifontsize{
    font-size: 0.85em !important;
}
.cwifontsizeweight{
    font-size: 0.90em !important;
    font-weight:700 !important;
}
.navbar .right {
    padding-top: 5px;
}
/* */
.display_none{   /*display-none은 framework7에서 사용 중*/
    display: none;
}
.display_block{
    display: block;
}
/* 버튼 크기 정의 -------------------------------------------------------   */
.mcwi_date {
    min-width: 115px;
    max-width: 120px;
    height: 25px;
    text-align: center;
}

.mcwi_month {
    min-width: 70px;
    max-width: 70px;
}

.mcwi_year {
    min-width: 75px;
    max-width: 75px;
}

.mcwi_yearmonth {
    min-width: 80px;
    max-width: 80px;
}

.mcwi_division {
    min-width: 120px;
    max-width: 150px;
}

.mcwi_customer {
    min-width: 200px;
    max-width: 280px;
}

.mcwi_button {
    min-width: 123px;
    max-width: 123px;
    color: #fff;
}

.mcwi_invoiceno {
    min-width: 110px;
    max-width: 110px;
}

.mcwi_button1 {
    min-width: 80px;
    max-width: 80px;
}

.mcwi_prepend {
    min-width: 60px;
    max-width: 60px;
}

.mbtnquery{    
    max-width: 60px;
    background-color: cadetblue !important;
    color: white;
    padding: 0 5px;
    height: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    border-radius:2px;
}
.mbtnblue{
    max-width: 60px;
    background-color: #007BFF !important;
    color: white;
    padding: 0 5px;
    height: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    border-radius:2px;
}
.mbtngreen{
    max-width: 60px;
    background-color: #28A745 !important;
    color: white;
    padding: 0 5px;
    height: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    border-radius:2px;
}
.mbtnred{
    max-width: 60px;
    background-color: #DC3545 !important;
    color: white;
    padding: 0 5px;
    height: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    border-radius:2px;
}
.mbtnyellow{
    max-width: 60px;
    background-color: #FFC107 !important;
    color: white;
    padding: 0 5px;
    height: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    border-radius:2px;
}
.mbtnquery2{
    max-width: 60px;
    background-color: cadetblue !important;
    color: white;
    padding: 0 5px;
    height: 25px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    border-radius:2px;
}
/*---------------------------*/
.form-group {
    position: relative;
    display: flex;
    width: 100%;
    height: 25px;
    text-align:center;
}
.form-group>span,
.form-group .form-field {
    white-space: nowrap;
    display: block;
}
.form-group>span:not(:first-child):not(:last-child),
.form-group .form-field:not(:first-child):not(:last-child) {
    border-radius: 0;
}
.form-group>span:first-child,
.form-group .form-field:first-child {
    border-radius: 0px 0 0 0px;
}
.form-group>span:last-child,
.form-group .form-field:last-child {
    border-radius: 0 0px 0px 0;
}
.form-group>span:not(:first-child),
.form-group .form-field:not(:first-child) {
    margin-left: -1px;
}
.form-group .form-field {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 1%;
    margin-top: 0;
    margin-bottom: 0;
}
.form-group>span {
    text-align: center;
    padding: 0 3px;
    font-size: 14px;
    line-height: 25px;
    color: var(--group-color);
    background: var(--group-background);
    border: 1px solid var(--group-border);
    transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}
.form-group:focus-within>span {
    color: var(--group-color-focus);
    background: var(--group-background-focus);
    border-color: var(--group-border-focus);
}

/*--------------------------------------------------------*/
.form-field {
    display: block;
    width: 100%;
    padding: 8px 0px;
    line-height: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    /*color: var(--input-color);*/
    color: #0023F5;
    border-radius: 0px;
    /*-webkit-appearance: none; */
    border: 1px solid var(--input-border);
    background: var(--input-background);
    transition: border 0.3s ease;
}
.form-field::-moz-placeholder {
    color: var(--input-placeholder);
}
.form-field:-ms-input-placeholder {
    color: var(--input-placeholder);
}
.form-field::placeholder {
    color: var(--input-placeholder);
}
.form-field:focus {
    outline: none;
    border-color: var(--input-border-focus);
}

.form-group .mcwi_date{
    font-size: 0.95rem;
    font-family: Arial, Helvetica, sans-serif;
    /*border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
    border-color: #007BFF;*/
}

.form-group .inputxt200{
    min-width: 200px;
    max-width: 200px;
    height: 37px;
    padding: 7px 0 0 5px;
    border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
}
.form-group .inputxt150{
    min-width: 150px;
    max-width: 150px;
    height: 37px;
    padding: 7px 0 0 5px;
    border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
}
.form-group .inputxt150d{
    min-width: 150px;
    max-width: 150px;
    height: 37px;
    padding: 7px 0 0 5px;
    border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
    color: inherit;
}
.form-group .inputxt200{
    min-width: 200px;
    max-width: 200px;
    height: 37px;
    padding: 7px 0 0 5px;
    border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
}
.form-group .inputxt150{
    min-width: 150px;
    max-width: 150px;
    height: 37px;
    padding: 7px 0 0 5px;
    border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
}
.form-group .inputxt150d{
    min-width: 150px;
    max-width: 150px;
    height: 37px;
    padding: 7px 0 0 5px;
    border-style: solid;
    border-top: none;    
    border-left: none;
    border-right: none;
    color: inherit;
}
/* 추가 하는 내용*/
.ios .leave-list.list .item-after{
    color: #fff !important;
    font-weight: 500 !important;
}
.avatar_color1{
    background-color: #707CFF !important;
}
.avatar_color2{
    background-color: #1EE7EA !important;
}
.avatar_color3{
    background-color: #77D374 !important;
}
.avatar_color4{
    background-color: #FDBB61 !important;
}
.avatar_color5{
    background-color: #2cbde9 !important;
}
.badge_width{
    min-width: 180px !important;
    margin: 0 30px 0 0 !important;
}
.badge_width2{
    min-width: 120px !important;
    margin: 0 20px 0 0 !important;
}
.badge_width3{
    min-width: 80px !important;
    margin: 0 20px 0 0 !important;
}
.span_width{
    display:inline-block;
    min-width: 150px !important;
    margin: 0 30px 0 0 !important;
}
/*side menu*/
.side-menu ul li a {
    font-size: 1.02em;
    font-weight: 500;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif Arial, Helvetica, sans-serif;
}
.background_color_wh{    
    background-color: #ffffff !important;
}

.modalwait {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, 0 ) 
                url('img/loading.gif') 
                50% 50% 
                no-repeat;
}
.loginimg-size{
    width: 110px;
    justify-content: center;
    align-items: center;
}
.loginimg-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
}
.list .item-input-outline .item-floating-label{
    background-color:var(--f7-page-bg-color)  !important;
}
.navar-background-color{
    background-color:var(--f7-page-bg-color)  !important;
}
.color-home{color:green}
.color-work{color:#76C279}
.color-isp{color:#2196F3}
.color-vehicle{color:#9E9E9E}
.color-payroll{color:#FF9800}
.color-golf{color:rgb(19, 128, 19)}
.color-communicate{color:#2196F3}
.color-settings{color:#C0C1C1}


/*img------------------------------------------------------------------*/
.filebox label {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    font-size: 13px;
    vertical-align: middle;
    background-color: #C0C1C1;
    cursor: pointer;
    height: 50px;
    margin-left: 10px;
    border-radius:2px;
}
.filebox input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
.filebox-namecard label {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    font-size: 13px;
    vertical-align: middle;
    background-color: #C0C1C1;
    cursor: pointer;
    height: 50px;
    margin-left: 10px;
    border-radius:2px;
}
.filebox-namecard input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

/*golf score sheet --------------------------------------------------*/
.golftable, .golftable2{
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto; /* 테이블이 가로 스크롤 가능하도록 설정 */
    table-layout: fixed; /* 테이블의 너비를 고정으로 설정 */
    border-radius: 0 !important;
}
/* 각 컬럼의 넓이를 동일하게 설정 */
.golftable th, .golftable2 th {
    /*width: 15%; /* 예: 5개의 컬럼이므로 100%를 5로 나눔   
    border: 1px solid #ddd;*/
    padding: 3px;
    text-align: center;
    height: 30px !important;
}
/* 각 컬럼의 넓이를 동일하게 설정 */
.golftable td, .golftable2 td {
    /*width: 15%; /* 예: 5개의 컬럼이므로 100%를 5로 나눔 */    
    /*border: 1px solid #ddd;*/
    padding: 3px;
    text-align: center;
    height: 25px !important;
}
.golftable tr:first-child, 	/*첫번째 행*/
.golftable2 tr:first-child,
.golftable tr:nth-child(2),
.golftable2 tr:nth-child(2) {	/*2번째 행*/
    max-width: 10px; /* 첫 번째와 두 번째 행의 너비를 30px로 설정 */
}
.golftable tr:nth-child(n+3), .golftable2 tr:nth-child(n+3) {  /*3번째 행 이후*/
    width: 15%;
}

.tdwhite {
    background-color: white;
}
.thcolor {
    background-color: #2980BA;
    color: white;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    height: 30px;
}
.tdhole{
    background-color: lightseagreen;
    color: white;
}
.tdpar {
    background-color: lightseagreen;
    color: white;
}
.boldtxt {
    font-weight: bold;
}
.td_input {
    width: 100%;
    text-align: center;
    max-height: 15px
}
.gfscore th {
    text-align: center;
    font-size: 16px; 
    font-weight: 500;
}
.gfscore tr {
    text-align: center;
    font-size: 15px; 
    font-weight: 500;
}

.golfscoresheet{
    width: 100%;
    border-collapse: collapse;
    /*overflow-x: auto; /* 테이블이 가로 스크롤 가능하도록 설정 */ 
    /*padding: 3px;
    text-align: center;*/
    table-layout: fixed;
}
.golfscoresheet thead th {
    padding: 2px;
    text-align: center;
}
/*.golfscoresheet tr {
    text-align: center;
    font-size: 15px; 
    font-weight: 500;
    height: 25px !important;
}*/

.golfscoresheet tbody td {
    overflow: visible;
    max-width: 25px;
    height: 28px !important;
}

/* Input 요소 스타일 */
.golfscoresheet td input {
    width: 100%;
    height: 100%;
    border: none;
    box-sizing: border-box;
    padding: 2px;
    font-size: 14px;
    text-align: center;
}
.golfscoresheet td input:focus {
    outline: none;
    border: 1px solid #007BFF;
    background-color: #e9f5ff;
}
th.hole, td.hole, th.par, td.par {
    width: 50px;
    padding: 1px;
    font-weight: 600;
}
th.player-cell, td.player-cell {
    width: auto;
}
.th1_width{
    width: 50px;
}
/*score sheeet*/
.tdgray {
    background-color: #ECEFF1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: 600;
}
.dark .tdgray {
    background-color: #2b2c2c;
    color: white; /* 다크 모드에서 글자색을 흰색으로 설정 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: 600;
}

/* 입력 필드 포커스 시 */
.dark .player-cell input:focus {
    background-color: white; /* 포커스 시 배경색 흰색 */
    color: black; /* 포커스 시 글자색 검정 */
    border: 1px solid gray; /* 포커스 시 테두리 회색으로 변경 */
}

/* tab bar ------------------------------------- */
.segmented .tab-link {
    color: black; /* 글자 색상 검정으로 설정 */
    background-color: #ECEFF1; /* 배경색을 투명하게 설정 */
    position: relative; /* after 요소를 위한 포지셔닝 설정 */
}
/* 활성 탭의 스타일 변경 */
.segmented .tab-link-active::after {
    content: ''; /* 가상 요소의 내용을 빈 문자열로 설정 */
    position: absolute; /* 절대 위치 설정 */
    bottom: 0; /* 하단에 위치 */
    left: 10%; /* 왼쪽에서 10% 위치 */
    width: 80%; /* 너비를 탭의 80%로 설정 */
    border-bottom: 2px solid #093E84; /* 아랫부분에 검정 선 추가 */
    background-color: #ECEFF1; 
}

/* 비활성화된 탭의 스타일 */
.segmented .tab-link.disabled {
    color: grey; /* 비활성 탭의 글자색을 회색으로 설정 */
    background-color: #ECEFF1 !important; 
}
.disabled{
    opacity: 1 !important;
}
/* 다크 모드에서 배경과 글자색 변경 */
.dark .segmented .tab-link {
    color: white; /* 다크 모드에서 글자색을 흰색으로 설정 */
    background-color: #000000; /* 다크 모드에서 배경색을 어둡게 설정 */
}

.dark .segmented .tab-link-active::after {
    background-color: white; /* 다크 모드에서 활성 탭의 아랫선 색상을 흰색으로 변경 */
    border-bottom: 2px solid white; /* 선의 색상도 흰색으로 변경 */
}
/* 비활성화된 탭의 스타일 */
.dark .segmented .tab-link.disabled {
    color: grey; /* 비활성 탭의 글자색을 회색으로 설정 */
    background-color: #000000 !important; 
}
/* Base style for icons */
.tab-link .icon {
    font-weight: normal; /* Ensure non-active icons are normal */
}
/* ========================== */
/* Active tab styling */
.tab-link.active .icon,
.tab-link.active .tabbar-label {
    font-weight:bold !important; /* 굵게 */
}
.tabbar-label.active{
    font-weight:700 !important; /* 굵게 */
    font-size: 0.75em;
}

/* 2025-02-04 추가 */
/* disabled input 스타일 추가 */
input:disabled {
    color: #585858 !important;
    opacity: 0.8;
}

.item-input-wrap:focus-within {
    background-color: #d8e1f5;
}

/* 추가된 스타일 */
.readonly-field {
    background-color: #f5f5f5;
    border-radius: 8px;
}

.editable-field {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.editable-field:focus-within {
    border-color: #2C6DAD;
    box-shadow: 0 0 0 2px rgba(44, 109, 173, 0.1);
}

.item-input-outline {
    margin-bottom: 12px;
}

.item-title.item-label {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 4px;
}

input:disabled {
    color: #666;
    cursor: not-allowed;
}