.color-primary {
    color: #24A1E9;
}

.color-primary-dark {
    color: #047EC4;
}

.color-accent {
    color: #B90566;
}

.color-grey {
    color: #F7F7FA;
}

.color-grey-dark {
    color: #6E6E6E;
}

.color-green-dark {
    color: #006697;
}

.color-green-darker {
    color: #004D72;
}

.color-blue-dark {
    color: #275FA7;
}

.color-blue-darker {
    color: #124282;
}

.color-white {
    color: #FFFFFF;
}

.color-violet-darker {
    color: #B90566;
}

.color-light-grey {
    color: #BBBCBC;
}

.color-black {
    color: #000000;
}

/* Background Colors as CSS classes */
.bg-color-primary {
    background-color: #24A1E9;
}

.bg-color-primary-dark {
    background-color: #047EC4;
}

.bg-color-accent {
    background-color: #B90566;
}

.bg-color-grey {
    background-color: #F7F7FA;
}

.bg-color-grey-dark {
    background-color: #6E6E6E;
}

.bg-color-green-dark {
    background-color: #006697;
}

.bg-color-green-darker {
    background-color: #004D72;
}

.bg-color-blue-dark {
    background-color: #275FA7;
}

.bg-color-blue-darker {
    background-color: #124282;
}

.bg-color-white {
    background-color: #FFFFFF;
}

.bg-color-violet-darker {
    background-color: #B90566;
}

.bg-color-light-grey {
    background-color: #BBBCBC;
}

body {
    font-family: 'Roboto', sans-serif;
}

.main-content {
    display: flex;
    justify-content: center;
}
.content-wrapper {
    width: 500px;
    text-align: center;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.ma-1 { margin: 1rem; }
.text-left { text-align: left; }

.bewais-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
    margin: auto;
    max-width: 250px;
}

.bewais-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: #B90566;
    text-transform: uppercase;
}

.bewais-text {
    font-size: 0.8rem;
    font-weight: 400;
}

.bewais-error {
    color: red;
}

.bewais-primary-button {
    background-color: #B90566;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    width: auto;
}

.bewais-underline {
    cursor: pointer;
    text-decoration: underline;
    text-transform: uppercase;
    color: #000;
}

@media only screen and (max-width: 500px) {
    .content-wrapper {
        max-width: 500px;
    }
}