@font-face {
    font-display: swap;
    font-family: Novela;
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Novela-400.woff2), url(fonts/Novela-400.woff)
}

@font-face {
    font-display: swap;
    font-family: Novela;
    font-style: normal;
    font-weight: 600;
    src: url(fonts/Novela-600.woff2), url(fonts/Novela-600.woff)
}

@font-face {
    font-display: swap;
    font-family: Novela;
    font-style: normal;
    font-weight: 700;
    src: url(fonts/Novela-700.woff2), url(fonts/Novela-700.woff)
}

body {
    --font-sans: 'Novela', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
}

:root {
    --primary-color: rgb(0, 102, 51);
}

.main-app header, .main-app footer {
    background-color: var(--primary-color);
}

.main-app nav {
    background-color: rgb(224, 238, 237);
}

.main-app nav a {
    color: #000;
    padding-top: 12px;
}

.main-app nav a:hover {
    color: rgb(224, 238, 237);
    background-color: var(--primary-color);
}

.main-color {
    color: var(--primary-color);
}

.support-circle {
    color: var(--primary-color);
    background-color: rgb(224, 238, 237);
}

.main-button {
    background-color: rgb(209, 242, 186);
    color: rgb(5, 51, 51);
    padding-top: 10px;
    cursor: pointer;
}

.login-form h1 {
    color: var(--primary-color);
}

label[for="remember_me"] span {
    padding-top: 3px;
}

section {
    background-color: rgb(239, 246, 246);
}

.main-app {
    background-color: #FFF;
}

.main-app input, .main-app textarea {
    background-color: #FFF;
}

.interest-calculations {
    background-color: #FFF;
}

.support-menu-item.active {
    background-color: rgb(224, 238, 237);
}

.mobile-menu a.active {
    background-color: var(--primary-color);
    color: #FFF;
}