:root{
    --primary-color: #0078d6;
    --bg-color: #fafafa;
}
/* *{
    border-radius: 2px !important;
} */
.fi-simple-main, .fi-section, .fi-ta-ctn, .fi-fo-tabs, .fi-tabs, .fi-tabs-item, .fi-modal-window, .fi-dropdown-panel, .fi-input-wrp, .choices__list, .fi-section-content, .fi-fo-repeater-item, .filepond--hopper, 
.fi-checkbox-input, .fi-btn, .fi-fo-toggle, .fi-fo-toggle .pointer-events-none, .fi-avatar, .fi-sidebar-item-button, .fi-fieldset, .tox-tinymce, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, 
div[role=switch], div[role=switch] > span{
    border-radius: 2px !important;
}
.tox-tinymce{
    border: 1px solid #e5e5e5 !important;
}

/* 拖曳捲軸 */
::-webkit-scrollbar{
    height: 12px;
    width: 12px;
}
::-webkit-scrollbar-track {
    /* background-color: rgba(0,0,0,0); */
    /* border-radius: 2px; */
}
::-webkit-scrollbar-thumb{
    /* border-radius: 2px; */
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-left: 1px solid rgba(255, 255, 255, 0.8);
    border-right: 1px solid rgba(170, 170, 170, 0.2);
    border-bottom: 1px solid rgba(170, 170, 170, 0.2);
    background-color:rgba(170, 170, 170, 0.15);
}

/* 側邊欄或上邊欄 */
.fi-topbar nav, .fi-sidebar-header{
    background-color: black !important;
}
.fi-topbar-item a{
    border-radius: 1px 1px 0 0!important;
}
.fi-topbar-item-active{
    border-bottom: 1px solid var(--bg-color);
    box-shadow: 0 2px 1px var(--bg-color);
}
.fi-topbar-item .fi-topbar-item-label{
    color: white;
    font-size: 1rem;
}
.fi-topbar-item:hover .fi-topbar-item-label{
    color: var(--primary-color);
}
.fi-topbar-item-active .fi-topbar-item-label{
    color: var(--primary-color);
}
.fi-avatar{
    filter: invert(0.2);
}

/* sidebar */
.fi-sidebar-header-wrapper{
    position: sticky;
    top: 0;
    z-index: 20;
}
.fi-sidebar{
    box-shadow: 1px 0px 5px 0 rgba(0,0,0,.08) !important;
    /* background-color: white !important; */
}
.fi-topbar nav, .fi-sidebar-header{
    height: 5.5rem !important;
}
.fi-sidebar-header div,
.fi-sidebar-header div a{
    width: 100%;
}
/* .fi-sidebar-header button{
    align-self: flex-end;
    margin-bottom: 0px;
} */
.fi-sidebar-header svg.fi-icon-btn-icon {
    /* stroke: var(--primary-color);
    opacity: 0.75; */
}
.fi-sidebar-group-label{
    /* font-weight: 600 !important; */
}

/* logo */
.fi-logo{
    align-items: center;
    /* justify-content: space-between; */
}
.fi-logo svg:first-child{
    height: 100%;
}
.fi-logo svg:last-child{
    margin-left: calc(64px - 1rem);
}
.fi-simple-header .fi-logo svg:last-child{
    display: none;
}

/* login */
.fi-login{
    background-image: url('/images/mercedes-benz-history-brand-star.jpeg');
    background-size: cover;
    background-position: center;    
}
.fi-mbtw-login{
    /* background-image: url('/images/3113914_mbc88425.jpg'); */
    background-image: url('/images/mbtw_login_bg4.jpg');
    background-size: cover;
    background-position: center;
}

.fi-login main,
.fi-mbtw-login main{
    background: linear-gradient(0deg, rgba(255,255,255, 0.9), white);
    margin: 0 1rem;
}

.fi-login main .fi-simple-header-heading,
.fi-mbtw-login main .fi-simple-header-heading{
    display: none;
}

/* table */
.fi-ta-header{
    overflow-x: auto;
}
.fi-ta-header-heading{
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 1rem;
}

.attachment-col > div > a:first-child{
    display: none;
}

.attachment-download-list{
    list-style: auto;
    margin-left: 1rem;
}

.attachment-download-list a:hover{
    text-decoration: underline;
}

/* 表單欄位間隔 */
.fi-fo-component-ctn {
    gap: 1.25rem !important;
}

/* infolist */
.fi-in-entry-wrp-label > span {
    font-weight: bold;
    /* color: rgb(0 108 193); */
}
/* modal 欄位間隔 */
.fi-modal-content .fi-fo-component-ctn {
    gap: 0.75rem !important;
}
.fi-in-entry-wrp{
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(0,0,0,.05);
}


/* footer */
/* .fi-custom-footer{
    position: sticky;
    bottom: 0;
} */

/* other */
.bg-black{
    background-color: black;
}
.self-end{
    align-self: flex-end;
}





.fi-ta-table th:nth-child(2){
    width: 1px;
}
.truncate{
    overflow: visible !important;
}
.fi-tabs-item-label{
    white-space: nowrap;
}
.status{
    padding: 3px 6px;
    border-radius: 2px;
}
.status.primary{
    background-color: rgb(var(--primary-600));
    color: white;
}
.status.success{
    background-color: rgb(var(--success-600));
    color: white;
}
.status.info {
    background-color: rgb(var(--info-600));
    color: white;
}
.status.danger {
    background-color: rgb(var(--danger-500));
    color: white;
}
.status.fail{
    /* color: rgb(var(--danger-500)); */
}
.fi-tabs-item.fi-active.fi-tabs-item-active{
    background-color: rgba(0,0,0,.05);
}
.fi-section-content{
    /* background-color: rgba(0,0,0,.05); */
    /* border-radius: 0.75rem; */
}
.fi-section{
    /* overflow: hidden; */
}
.data-updated{
    color: rgb(217 119 6);
}
div[x-ref="modalContainer"]{
    overflow: initial;
}
.report-btn{
    height: 58px;
}
.widge-btn{
    height: 58px;
}
.fi-fo-field-wrp-label > span {
    font-weight: bold !important;
}
select.fi-select-input.multiple-select {
    background-image: unset;
    padding: 0px;
    height: calc(100vh - 40rem);
}
select.fi-select-input.multiple-select option{
    background-color: transparent;
    padding: 0.5rem;
    margin-bottom: 1px;
}
select.fi-select-input.multiple-select option:checked {
    background: #006cc1;
    color: white;
}
.fi-modal-window{
    max-height: calc(100vh - 2rem - 100px);
    overflow: auto;
}
.fi-dropdown-panel{
    overflow: auto;
    max-height: 50vh;
}
.fi-section.custom-fields .fi-section-content-ctn{
    overflow: auto;
    max-height: 50vh;
}
.fi-fo-radio .fi-btn{
    font-weight: normal;
}
.fi-dropdown-trigger .fi-btn{
    background-color: rgba(255, 255, 255, 0.2);
}

/* .custom-fieldset{
    padding-top: 0.75rem !important;
}
.custom-fieldset .flex:has(.fi-fo-field-wrp-label){
    display: none;
}
.custom-fieldset legend{
    font-weight: bold;
}
.custom-fieldset .col-\[--col-span-default\]{
    align-self: center;
} */

ul.w-72:has(li[x-data="{ label: 'sub_navigation_' }"]){
    width: unset;
    padding-right: 1rem;
}

.required-fields{
    /* background-color: rgb(245 245 220 / 25%); */
}

.required-fields > legend{
    /* color: #006cc1; */
    /* font-weight: bold; */
}

@media (min-width: 640px) {
    .sm\:grid-cols-3 {
        grid-template-columns: 8rem 10fr 8rem !important;
    }
}