/* DARK MODE */
body.dark-mode {
    background: #060817;
}
body.dark-mode .mode-title {
    color: #fff;
}
body.dark-mode .mode-text {
    color: #f1f1f1;
}
body.dark-mode .mode-section {
    background: #0e1727;
    border-color: #17273c !important;
}
body.dark-mode .style-mode-button {
    background: #20283d;
}
body.dark-mode .mode-icon-color svg,
body.dark-mode .mode-link-color  {
    color: #b0b4ba;
}
body.dark-mode .logotype span {
    color: #fff;
}
body.dark-mode .style-mode-button-hover:hover {
    background: #20283d;
}


/* LIGHT MODE */
body.light-mode {
    background: #fafafa;
}
body.light-mode .mode-title {
    color: #17273c;
}
body.light-mode .mode-text {
    color: #17273c;
}
body.light-mode .mode-section {
    background: #fff;
    border-color: #f1f1f1 !important;
}
body.light-mode .style-mode-button {
    background: #f3f5f8;
}
body.light-mode .mode-icon-color svg,
body.light-mode .mode-link-color {
    color: #3a424f;
}
body.light-mode .logotype span {
    color: #17273c;
}
body.light-mode .style-mode-button-hover:hover {
    background: #f3f5f8;
}


/* TRANSITION */
.style-mode-button-hover,
.style-mode-button-hover:hover {
    transition: all .3s ease-in;
}




/* NEW */

/* LIGHT COLOR */
body.light-mode .mode-text-color-1 {
    color: #333;
}
body.light-mode .mode-text-color-2 {
    color: #666;
}


.body-dark-mode .mode-text-color-1 {
    color: #f1f1f1;
}
body.dark-mode .mode-text-color-2 {
    color: #444;
}