/* THEME JS */

.theme-button-js > .navbar-button-svg {
    display: none;
}

.theme-button-js > .navbar-button-svg-second {
    display: block;
}

/* HOME - BODY JS */

.body-js {
    background-color: white;
}

.body-js::before {
    background: url(../assets/bg/dark-bg.svg);
    opacity: 0.2;
}

.body-js.body-bg-two,
.body-js.body-bg-three {
    background-color: white;
}

.body-js.body-bg-two::before {
    background: url(../assets/bg/dark-bg-2.svg);
    opacity: 0.8;
}

.body-js.body-bg-three::before {
    background: url(../assets/bg/dark-bg-3.svg);
    opacity: 0.6;
}

/* HOME - BACKGROUND */

.body-js .dear-diary-settings-inner-background-itself {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: white !important;
}

.body-js .dear-diary-settings-inner-background-itself:first-of-type {
    background: url(../assets/bg/dark-bg.svg) no-repeat;
    background-size: cover;
}

.body-js .dear-diary-settings-inner-background-itself:nth-of-type(2) {
    background: url(../assets/bg/dark-bg-2.svg) no-repeat;
    background-size: cover;
}

.body-js .dear-diary-settings-inner-background-itself:last-of-type {
    background: url(../assets/bg/dark-bg-3.svg) no-repeat;
    background-size: cover;
}

.body-js .dear-diary-settings-inner-background-itself-hover {
    border: 1px solid rgba(0, 0, 0, 0.3);
}
 
.body-js .dear-diary-settings-inner-background-itself-active {
    border: 1px solid rgba(0, 0, 0, 0.8);
}

/* HOME - WELCOME */

.body-js .dear-diary-welcome {
    background-color: white;
}

.body-js .dear-diary-welcome-header,
.body-js .dear-diary-welcome-paragraph {
    color: black;
}

.body-js .dear-diary-welcome-button {
    background-color: rgba(100, 100, 100,0.2);
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-welcome-button:hover {
    background-color: rgba(100, 100, 100,0.3);
}

.body-js .dear-diary-welcome-button:active {
    background-color: rgba(100, 100, 100,0.25);
}

.body-js .dear-diary-password-paragraph {
    color: black;
}

/* HOME - NAVBAR */

.body-js .navbar {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .navbar-divider {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .navbar-button {
    background-color: rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .navbar-button-svg,
.body-js .navbar-button-svg-second {
    color: black;
}

.body-js .navbar-button:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.body-js .navbar-button:active {
    background-color: rgba(0, 0, 0, 0.06);
}

.body-js .navbar-button:disabled {
    background-color: rgba(0, 0, 0, 0.3);
}

.body-js .navbar-button:disabled .navbar-button-svg,
.body-js .navbar-button:disabled .navbar-button-svg-second {
    color: rgb(100, 100, 100);
}

/* HOME - OUTPUT */

.body-js .dd-text-output-itself {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.body-js .dd-text-output-itself-paragraph-container,
.body-js .dd-text-output-itself-date,
.body-js .dd-tex-output-itself-type {
    background-color: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: black;
}

.body-js .dd-text-output-itself-button-itself-svg,
.body-js .dd-text-output-itself-date-text,
.body-js .dd-text-output-itself-date-svg,
.body-js .dd-tex-output-itself-type-svg {
    color: black;
}

.body-js .dd-text-output-itself-button-itself {
    background-color: rgba(100, 100, 100, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dd-text-output-itself:hover,
.body-js .dd-text-output-itself:hover .dd-text-output-itself-paragraph-container,
.body-js .dd-text-output-itself:hover .dd-text-output-itself-date,
.body-js .dd-text-output-itself:hover .dd-tex-output-itself-type {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.body-js .add-diary-button-js > .navbar-button-svg {
    color: red;
}

/* HOME - ADD A NEW ENTRY */

.body-js .dd-type-of-content-container {
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(1px);
}

.body-js .dd-type-of-content-container-inner {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.body-js .dd-type-of-content-container-inner-header {
    color: black;
}

.body-js .dd-type-of-content-container-inner-button-itself {
    background-color: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dd-type-of-content-container-inner-button-itself-svg {
    color: black;
}

.body-js .dd-type-of-content-container-inner-button-itself:hover {
    background-color: rgba(100, 100, 100, 0.2);
}

.body-js .dd-type-of-content-container-inner-button-itself:active {
    background-color: rgba(100, 100, 100, 0.15);
}

/* HOME - LETTER TYPE */

.body-js .dd-type-of-content-form {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.body-js .dd-type-of-content-form label {
    color: black;
}

.body-js .dd-type-of-content-form-title-input,
.body-js .dd-type-of-content-form-message-input {
    background-color: rgba(100, 100, 100, 0.08);
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dd-type-of-content-form-submit-button {
    background-color: rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: black;
}

.body-js .dd-type-of-content-form-submit-button:hover {
    background-color: rgba(100, 100, 100, 0.3);
}

.body-js .dd-type-of-content-form-submit-button:active {
    background-color: rgba(100, 100, 100, 0.25);
}

/* HOME - PASSWORD */

.body-js .dear-diary-password {
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(1px);
}

.body-js .dear-diary-password-form {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-password-form label {
    color: black;
}

.body-js .dear-diary-password-form-password-input {
    background-color: rgba(100, 100, 100, 0.08);
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-password-form-password-button {
    background-color: rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: black;
}

.body-js .dear-diary-password-form-password-button:hover {
    background-color: rgba(100, 100, 100, 0.3);
}

.body-js .dear-diary-password-form-password-button:active {
    background-color: rgba(100, 100, 100, 0.25);
}

.body-js .create-password-input-js {
    border: 1px solid red;
}

/* HOME - INFORMATION */

.body-js .dear-diary-information {
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(1px);
}

.body-js .dear-diary-information-inner {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-information-inner-divider {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-information-inner-answer {
    background-color: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-information-inner-answer-svg,
.body-js .dear-diary-information-inner-answer-paragraph {
    color: black;
}

/* HOME - SETTINGS */

.body-js .dear-diary-settings-inner-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.body-js .dear-diary-settings {
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(1px);
}

.body-js .dear-diary-settings-inner {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.body-js .dear-diary-settings-inner-password label {
    color: black;
}

.body-js .dear-diary-settings-inner-password-inner {
    color: black;
    background-color: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-settings-inner-password-input {
    color: black;
}

.body-js .dear-diary-settings-inner-password-eye-button {
    background-color: rgba(100, 100, 100,0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.body-js .dear-diary-settings-inner-password-eye-button-svg,
.body-js .dear-diary-settings-inner-password-eye-button-svg-second {
    color: black;
}

.body-js .dear-diary-settings-inner-password-eye-button:hover {
    background-color: rgba(100, 100, 100,0.3);
}

.body-js .dear-diary-settings-inner-password-eye-button:active {
    background-color: rgba(100, 100, 100,0.25);
}

.body-js .dear-diary-settings-inner-password-button,
.body-js .dear-diary-settings-inner-delete-itself {
    background-color: rgba(100, 100, 100, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: black;
}

.body-js .dear-diary-settings-inner-password-button:hover {
    background-color: rgba(100, 100, 100, 0.3);
}

.body-js .dear-diary-settings-inner-password-button:active {
    background-color: rgba(100, 100, 100, 0.25);
}

.body-js .dear-diary-settings-inner-password-button:disabled,
.body-js .dear-diary-settings-inner-delete-itself:disabled {
    background-color: rgba(100, 100, 100, 0.5);
}

/* SHOW DIARY - MAIN */

.body-js .dear-diary-container-output-header,
.body-js .dear-diary-container-output-paragraph,
.body-js .dear-diary-container-output-date {
    color: black;
}

.body-js .dear-diary-go-back-button-itself {
    background-color: rgba(100, 100, 100,0.15);
}

.body-js .dear-diary-go-back-button-itself-svg {
    color: black;
}

.body-js .dear-diary-go-back-button-itself:hover {
    background-color: rgba(100, 100, 100,0.2);
}

.body-js .dear-diary-go-back-button-itself:active {
    background-color: rgba(100, 100, 100,0.17);
}

/* HOME - NOTIFICATION */

.body-js .dear-diary-notification {
    background-color: rgba(100, 100, 100,0.15);
}

.body-js .dear-diary-notification-svg,
.body-js .dear-diary-notification-text {
    color: black;
}