html, body {
    font-family: 'Roboto', 'Noto Sans TC', 'Roboto Condensed', Arial, Helvetica, sans-serif;
    height: 100%; width: 100%; margin: 0; padding: 0;
    background: #F5F4F5; letter-spacing: 0.34px; color: #001018;
}

/* --------------------------------------- */
/* ---------- for color setting ---------- */
/* --------------------------------------- */

.color-main{color: #3643BA;}
.color-sub{ color: #E1E3F5}
.bk-color-main{background-color: #3643BA;}
.bk-color-sub{background-color: #E1E3F5;}
.border-color-main{border-color: #3643BA;}
.border-color-sub{border-color: #E1E3F5;}
.filter-color-main{filter: invert(19%) sepia(95%) saturate(1865%) hue-rotate(226deg) brightness(98%) contrast(94%);}


/* ---------------------------------------- */
/* ---------- for navbar setting ---------- */
/* ---------------------------------------- */

/* navbar */
.navbar{
    height: 64px; width: 100%; background-color: #FFFFFF;
    box-shadow: 0px 6px 6px rgba(54, 67, 186, 0.1);
    display: flex; justify-content: space-between;
}


/* ----------------------------------------- */
/* ---------- for sidebar setting ---------- */
/* ----------------------------------------- */

/* sidebar 之外的空白區域 */
#sidebar_gray{ width:100%; height: 100%; position: fixed; left: 0px; top: 65px; z-index: 5;}

/* sidebar 主體 */
.sidebar {
    background: #FFFFFF;
    position: fixed; top: 65px; left: 0px;
    box-shadow: 0px 0px 20px rgba(151, 151, 151, 0.15);
    width:  calc(100% - 48px); height: 100%;
    transform: translateX(-100%);
    transition: 0.5s;
    z-index: 15 !important;
}

/* 滑出 sidebar, 一定要放在 sidebar 後面才會滑出來 */
.show-sidebar { transform: translate(0); }

/* sidebar 右上角的 close icon */
.sidebar > img{
    width: 25px; height: 25px; position: absolute; top: 23px; right: 23px;
    position: absolute; cursor: pointer;
}

/* .sidebar-title{
    font-size: 16px; line-height: 32px; font-weight: 500;
    padding-left: 23px; padding-right: 18px; 
    padding-top: 18px; padding-bottom: 12px;
} */
.sidebar-item{ height: 24px; display: flex; padding: 16px;}
.sidebar-item > img {width: 24px; margin: auto 0px;}
/* .sidebar-item > img:last-child {width: 20px; margin: auto 20px auto auto;} */
.sidebar-item > span{margin: auto auto auto 12px;}
.selected-sidebar-item > span {color: #3643BA; font-weight: 700;}
.selected-sidebar-item > img{
    filter: invert(19%) sepia(95%) saturate(1865%) hue-rotate(226deg) brightness(98%) contrast(94%);
}

/* ----------------------------------- */
/* ---------- for 頁面主區域 ---------- */
/* ----------------------------------- */


.main-content{height: calc(100% - 64px); width: 100%; overflow-y: auto;}

.gray-background{
    background: rgba(165, 165, 165, 0.2);
    backdrop-filter: blur(5px);
	mix-blend-mode: normal;
	-webkit-backdrop-filter: blur(5px);
	width: 100%; height: 100%; top: 0px; left: 0px;
	position: fixed; z-index: 999;
	display: none;
}


/* -------------------------------- */
/* ---------- for loader ---------- */
/* -------------------------------- */

#loadingDiv {
    background: rgba(165, 165, 165, 0.2);
    backdrop-filter: blur(5px); 
    mix-blend-mode: normal;
    -webkit-backdrop-filter: blur(5px);
	position: fixed; text-align: center; display: flex;
	width: 100%; height: 100%; 
    top: 0px; left: 0px; z-index: 99;
}
.vtmn-loader {z-index: 199; color: #3643BA}


/* ---------------------------------------------- */
/* ---------- for vtmn default setting ---------- */
/* ---------------------------------------------- */

/* to change default font-family */
.vtmn-text-input_label,
.vtmn-text-input_container,
.vtmn-select_container{font-family: 'Roboto', 'Noto Sans TC';}

.vtmn-radio-button[type='radio'] + label::after{background-color:#3643BA;}



.vtmn-btn_variant--primary{background-color:#3643BA;}
.vtmn-btn_variant--primary:not(:disabled):hover,
.vtmn-btn_variant--primary:not(:disabled):active{background-color: #302B80}
.vtmn-btn_variant--secondary{color: #3643BA;}
.vtmn-btn_variant--secondary:not(:disabled):hover{background-color: #E1E3F5;}
.vtmn-btn_variant--tertiary{background-color: #E1E3F5 !important; color: #3643BA;}
.vtmn-btn_variant--ghost{color: #3643BA;}


.vtmn-text-input:not(:disabled):focus-visible,
.vtmn-select_container select:not(:disabled):focus-visible,
.vtmn-select_container select:not(:disabled):active{
    box-shadow:inset 0 0 0 0.125rem #3643BA;
}

.vtmn-list li:not([aria-disabled='true']):active,
.vtmn-list li:not([aria-disabled='true']):hover{
    background-color: #E1E3F5;
}

.vtmn-list{font-family: 'Roboto', 'Noto Sans TC', 'system-ui', '-apple-system', sans-serif; }
.vtmn-list_start-visual{
    -webkit-margin-start: 0px;
    margin-inline-start: 0px
}

.vtmn-list_end-action{
    padding-inline: 0px
}


.vtmn-list_end-action > span{
    display: flex;
    align-items: center; text-align: center;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color:#001018;
    padding: 2px 12px; height: 24px; max-width: 90px;
}


.vtmn-chip{ border: 1px solid #E1E0DF; color: #001018; box-shadow: none; min-width: 100px}
.vtmn-chip[aria-pressed='true']:not([aria-disabled='true']):hover,
.vtmn-chip[aria-pressed='true']:not([aria-disabled='true']):active{
    background-color: #3643BA
}
.vtmn-chip[aria-pressed='true']:not([aria-disabled='true']){
    background-color: #3643BA;
}


.vtmn-checkbox[type='checkbox']:checked + label::before{
    background-color: #3643BA;
    border-color: #3643BA;
}

.vtmn-link{font-family:'Roboto', 'Noto Sans TC'; color: #3643BA;}
.vtmn-link--icon-along::after { background-color: #3643BA; }


.vtmx-close-line:before { content: "\2715"; color: #3643BA }


.vtmn-progressbar_indicator{stroke: #3643BA;}

.vtmn-accordion:not([aria-disabled='true']) summary:hover {background-color: #E1E3F5;}