html,
body {
    height: 100%;
    background-color: #f3f3f3;
}

.form-signin {
    max-width: 330px;
    padding: 1rem;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.roboto-main {
             font-family: "Roboto", sans-serif;
             font-optical-sizing: auto;
             font-weight: 200;
             font-style: normal;
             font-variation-settings:
                     "wdth" 100;
         }

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
            "wdth" 100;
}

/* base styling for your thumb buttons */
.btn-thumbs {
    border: none !important;
    background: none !important;
    padding: 0.5rem;
    color: #6c757d;                 /* muted gray */
    transition: color 0.2s, transform 0.2s;
}

/* size up the Font Awesome icon */
.btn-thumbs .fas {
    font-size: 2.5rem;
}

/* when the hidden input is checked, target its label */
.btn-check:checked + .btn-thumbs {
    color: inherit;                /* we'll override per-button below */
    transform: scale(1.2);
}

/* make the “up” thumb green on select */
#thumbs_up:checked + .btn-thumbs {
    color: #198754;                /* bootstrap-success */
}

/* make the “down” thumb red on select */
#thumbs_down:checked + .btn-thumbs {
    color: #dc3545;                /* bootstrap-danger */
}


.cardbg-green {
    color: #507851; !important;
}