html, body {
    font-family: 'Roboto', 'Noto Sans TC', 'Roboto Condensed', Arial, Helvetica, sans-serif;
    height: 100%; width: 100%; margin: 0; padding: 0;
    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 頁面主區域 ---------- */
/* ----------------------------------- */


.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-text-input_helper-text,
.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,
.vtmn-btn_variant--secondary:not(:disabled):active{background-color: #E1E3F5;}

.vtmn-btn_variant--tertiary{background-color: #E1E3F5 !important; color: #3643BA;}

.vtmn-btn_variant--ghost{color: #3643BA;}
.vtmn-btn_variant--ghost:not(:disabled):hover,
.vtmn-btn_variant--ghost:not(:disabled):active{ background-color:#E1E3F5;}

.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: #302B80
}
.vtmn-chip[aria-pressed='true']:not([aria-disabled='true']){
    background-color: #3643BA;
}


.vtmn-checkbox[type='checkbox'] + label {
    font-family: 'Roboto', 'Noto Sans TC';
}
.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";}


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

.vtmn-accordion:not([aria-disabled='true']) summary:hover {background-color: #E1E3F5;}
.vtmn-accordion{font-family: 'Roboto', 'Noto Sans TC', 'Roboto Condensed', Arial, Helvetica, sans-serif;}