:root {
    --primary-color: #464358;
    --primary-color-sub: #575469;
    --primary-color-opa-eo: #464358E0;
    --secondary-color: #ECE8D6;
    --secondary-color-weak: #ECE8D638;
    --empty-color: #C9CBCA;
    --personality-color: #667EA2;
    --design-color: #9F7AA0;
}
/* :root {
    --primary-color: #202126;
    --primary-color-opa-eo: #202126E0;
    --secondary-color: #B0B4BF;
    --secondary-color-weak: #B0B4BF38;
    --empty-color: #C9CBCA;
    --personality-color: #667EA2;
    --design-color: #9F7AA0;
} */


/* 
#464358 → #494949
#ECE8D6 → #E5E5E5

#C9CBCA → #CACACA
#667EA2 → #797979
#9F7AA0 → #919191

#F8C78A → #CECECE 頭 G
#95AEA3 → #A4A4A4 腦
#D38488 → #A6A6A6 薦 意志力
#C1B08B → #ADADAD 根 脾 情 喉
 */

html {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.site-name {
    color:var(--secondary-color);
    opacity: 0.7;
}

.nav-right {
    background: var(--primary-color);
}

a {
    color: var(--secondary-color);
}

a:hover {
    color: var(--secondary-color);
}
input {
    background-color: var(--primary-color-sub);
    color: var(--secondary-color);
}
select {
    background-color: var(--primary-color-sub);
    color: var(--secondary-color);
}
.list-head, .list-th {
    background: var(--primary-color);
}

.table-bottom-line th, .table-bottom-line td {
    border-bottom: 2px solid var(--primary-color);
}

.table-bottom-line-thick th, .table-bottom-line-thick td {
    border-bottom: 1px solid var(--secondary-color-weak);
}

.button-new {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}

.alert-ul {
    color: #FF5542;
}

.chart-note {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.sheet-input {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.chart-share-code {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}
.chart-share-button {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.modal {
    background-color: var(--primary-color-opa-eo);
    /* opacity: 0.9; */
}
.modal-panel {
    color: var(--primary-color);
    background-color: var(--secondary-color);
}
.modal-overlay {
    background-color: var(--primary-color-opa-eo);
    /* background-color: rgba(0, 0, 0, 0.7); */
    opacity: 0;
}

.blank-inputs-design {
    color: var(--design-color);
}

.blank-inputs-person {
    color: var(--primary-color);
}

.blank-table-inputs input {
    border-bottom: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
}
.slider {
    background: var(--secondary-color); 
}
.slider::-webkit-slider-thumb {
    background: var(--secondary-color);

}
.slider::-moz-range-thumb {
    background: var(--secondary-color);
}
.slider-modal {
    background: var(--primary-color); 
}
.slider-modal::-webkit-slider-thumb {
    background: var(--primary-color);

}
.slider-modal::-moz-range-thumb {
    background: var(--primary-color);
}