@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');

:root {
    --primary-color: #002E63;

    --primary-bg-color: #EDF2F7;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Raleway', sans-serif;
    background-color: white;
    color: black;
}

/* ----------------------------------------------
                  AUTH
---------------------------------------------- */

.auth-wrapper {
    max-width: 380px;
    margin: 50px auto;
    padding: 40px 20px;
}

.auth-card {
    border-radius: .5rem;
    background-color: var(--primary-bg-color);
}

/* ----------------------------------------------
                  ELEMENTS
---------------------------------------------- */

.btn-primary,
.form-select,
.alert,
.card,
.list-group,
.badge,
.form-control,
.accordion-button {
    border-color: transparent;
    border-radius: .5rem;
}

.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--primary-color);
    border: none;
}

input,
select {
    color: black;
    background-color: white;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color) !important;
}

.card-body {
    background-color: var(--primary-bg-color);
    border-radius: .5rem;
}

/* ----------------------------------------------
                  MISC
---------------------------------------------- */

.text-highlight {
    text-decoration: underline var(--primary-color);
    text-decoration-thickness: 2px;
}

.text-secondary {
    color: #4A5568 !important;
}

.single-line-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.four-line-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 100px;
}

.text-wrapping {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}