/*造字*/
@font-face {
    font-family: 'EUDCFont';
    src: url('../fonts/EUDC.woff2') format('woff2'), url('../fonts/EUDC.woff') format('woff'), url('../fonts/EUDC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.k-grid,
.k-textbox,
.k-input,
.k-input-inner {
    font-family: 'system-ui', -apple-system, 'Segoe UI', 'EUDCFont', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
}
/*end of 造字*/
/*
form .form-control {
    display: inline !important;
}
*/
/*  bootstrap 5.3後沒有了, 要自行加
    form-control:disabled, .form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
} */

/*input 焦點光暈*/
.form-control:focus, .k-input-solid:focus-within {
    box-shadow: 0px 0px 2px 1px rgba(13,110,253,.25) inset; /*inset向內*/
    /*box-shadw: 0 0 0 0.1rem rgba(13,110,253, 0.25)
      box-shadow: 0px 0px 3px rgba(13,110,253,.25) inset; */
}

.bg-readonly, bg-disabled {
    background-color: #e9ecef;
    opacity: 1;
}

.longtext {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
/*大頭照*/
.profile-user-img {
    border: 3px solid #adb5bd;
    margin: 0 auto;
    padding: 3px;
    width: 100px;
}
/*
-------------- menu style -----------------
*/
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link:focus,
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active
/*.sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:focus */ {
    background-color: #87CECB; /*active, focus #f1f0ee*/
}

    .sidebar-wrapper .nav-treeview > .nav-item > .nav-link.active:hover,
    .sidebar-wrapper .sidebar-menu > .nav-item > .menuLayer1:hover, /*menuLayer1 根目錄使用.sidebar-menu*/
    .sidebar-wrapper .nav-treeview > .nav-item > .menuLayer2:hover,
    .sidebar-wrapper .nav-treeview > .nav-item > .menuLayer3:hover {
        /*background-color: #9dd2cf; #F5F5DC #F5FFFA*/
        background-color: rgba(0,0,0,.1);
    }

.menuLayer2 {
    /*  background-color: #D1F2EB; #8FBC8F #7b9b8247*/
    background-color: #7b9b8247;
    text-indent: .4em;
}

.menuLayer3 {
    /*background-color: #D4E6F1;*/
    background-color: #7b9b8277;
    text-indent: 1.2em;
}

.menuLayer4 {
    text-indent: 1.6em;
}
/*每一個目錄項的邊界*/
.sidebar-menu .nav-item > .nav-link {
    margin-bottom: 0.08rem;
}
/*每一個目錄項外框弧度*/
.sidebar-menu .nav-link {
    border-radius: 0.2rem;
}
/*每一個目錄項的間隙，影響每項的高度*/
.sidebar-menu .nav-link {
    padding: 0.3rem;
}
/* menu image */
.brand-link .brand-image {
    float: left;
    line-height: .8;
    margin-left: 0.8rem;
    margin-right: 0.5rem;
    margin-top: -3px;
    max-height: 33px;
    width: auto;
}

.elevation-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23) !important;
}

.img-circle {
    border-radius: 50%;
}
/*------------ end of menu -------------------*/



/* Kendo UI 調整 */
.k-grid-header tr {
    line-height: 15px;
    font-weight: bold !important;
    /*    padding: 0;*/
}

.k-grid tbody tr {
    line-height: 15px;
}

.k-grid tbody td {
    padding: 5px;
}

/* default-ocean-blue 有這樣設定，bootstrap的沒有，不知道為什麼 */
.k-switch-md .k-switch-label-on {
    left: 6px;
}

.k-switch-md .k-switch-label-off {
    right: 6px;
}


.k-checkbox-small {
    padding: 0.4rem 0.4rem;
}

    .k-checkbox-small:checked {
        border-color: #0d6efd;
    }


.k-picker {
    width: 12.4em;
}
/* kendo window */
.k-window-titlebar {
    border-color: #17a2b8;
    background-color: #C5DCFC;
}
/* 為了讓按鈕可以靠右 */
.k-toolbar {
    display: inline;
    padding-top: .6em;
    padding-bottom: .6em;
    text-align: right;
}
/* 新版沒有 .k-header*/
/*.k-header {
    font-weight: bold !important;
    text-align: center !important;
}*/

.k-command-cell button {
    margin-left: 1px;
    margin-right: 1px;
}

.k-grid-excel {
    /*margin-left: auto !important;
    font-weight: bold;*/
    margin-left: 2px;
    margin-right: 2px;
}


/* 顏色調整 */
.text-olive {
    color: #556B2F;
}

.text-info {
    color: #17a2b8 !important;
}

.btn-info {
    color: white;
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

    .btn-info:hover {
        color: white;
        background-color: #138496 !important;
    }

.bg-info {
    background-color: #17a2b8 !important;
}

.card-info > .card-header {
    background-color: #17a2b8 !important;
}

    .card-info > .card-header > .card-title {
        color: white;
    }

.card-info { /*card-header右邊collapse, expand顏色 */
    --lte-card-variant-color: #000;
    --lte-card-variant-color-rgb: 255,255,255;
}

.card-header {
    padding: 0.75rem 0.75rem;
}
/* bootstrap 5 沒有btn-xs 所以自訂*/
.btn-group-xs > .btn, .btn-xs {
    padding: 2px 4px; /*.25rem .4rem; */
    font-size: 12px; /*.875rem; */
    line-height: 18px; /*.5; */
    border-radius: .2rem;
}
/* Toastr 顏色調整 */
.toast-info {
    background-color: #17a2b8;
}

.toast-error {
    background-color: red;
}

.toast-warning {
    background-color: orange;
}

.toast-success {
    background-color: MediumSeaGreen;
}
/* end of Toastr 顏色調整 */
/* 系統公告 */
.news_marquee {
    background-color: #0094ff;
    color: white;
    border-radius: 3px;
    animation: slide 10s linear infinite;
    padding-right: 5px;
    padding-left: 5px;
}

    .news_marquee:hover {
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
        animation-play-state: paused;
        cursor: pointer;
    }
/* end of 系統公告 */
@keyframes slide {
    0% {
        transform: translatex(0%);
    }

    100% {
        transform: translatex(100%);
    }
}

input[type="number"].form-control {
    padding-right: 0px !important;
}

.form-control.is-valid, .was-validated .form-control:valid {
    /* 去除 bootstrap 的打勾 */
    background-image: none !important;
    content: none !important;
}

/*
    menu style
*/
.menuLayer1:hover {
    background-color: #e006061a;
    font-weight: bold;
}

.menuLayer2 {
    background-color: #7b9b8247;
    text-indent: 0.4em;
    font-weight: bold;
}
/*
.menuLayer3 {
    background-color: #7b9b8277;
    text-indent: 0.8em;
}
*/

.menuLayer3 {
    /* 1. 背景顏色：改成比深色底再淺一點的灰色，做出區隔 */
    /* background-color: #87CECB !important; */
    background-color: #ccecf7 !important;
    /* 2. 縮排：增加左邊距，讓層級感更重 (預設約為 1rem 或 2rem) */
    padding-left: 1rem !important;
    color: black !important;
    font-weight: bold;
    font-size: 0.9rem
}

    /* (選項) 當滑鼠移過去 (Hover) 的時候，顏色變化
    */
    .menuLayer3:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }


.menuLayer4 {
    /* 1. 背景顏色：改成比深色底再淺一點的灰色，做出區隔 */
    background-color: #76CECB !important;
    /* 2. 縮排：增加左邊距，讓層級感更重 (預設約為 1rem 或 2rem) */
    padding-left: 1.4rem !important;
    color: black !important;
    font-weight: bold;
    font-size: 0.9rem
}
    /* (選項) 當滑鼠移過去 (Hover) 的時候，顏色變化
    */
    .menuLayer4:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }