/*
 * Bootstrap CSS Overrides
 */

/* Buttons */
.btn {
    border-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ss-space-2);
    font-size: 14px;
    height: 44px;
    line-height: 40px;
    padding: var(--ss-space-4);
    border-radius: 4px;
}

.btn-sm {
    height: 32px;
}

.btn-lg {
    height: 52px;
    font-size: 16px;

    &.btn-square {
        width: 52px;
        justify-content: center;
    }
}

.btn .fal {
    font-size: 14px;
}

.btn-primary {
    --bs-btn-bg: var(--consultations-primary);
    --bs-btn-hover-bg: #1C2E4A;
}

.btn-outline {
    border: 1px solid var(--ss-grey);

    &:hover {
        background-color: #eee;
    }
}

.btn.btn-outline-primary {
    border: 2px solid var(--consultations-primary);
    color: var(--ss-black);

    &:hover {
        color: var(--ss-white);
        background-color: var(--consultations-primary);
    }
}

.btn-link {
    text-decoration: none;
    color: #2A5595;
    padding: 0;
    font-size: 14px;
    line-height: 16px;
    height: unset;
}

/* Forms */
.form-control {
    height: 40px;
    line-height: 40px;
    border: 1px solid var(--ss-grey);
    font-size: 14px;
    border-radius: 4px;
}

.form-control-lg {
    height: 52px;
}

/* Badges */
.badge {
    border: 1px solid transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: var(--ss-space-2);
}

.badge-success {
    border-color: #299C72;
    color: #20825E;
    background-color: #D5FDEE;
}

.badge-warning {
    border-color: #FFF6D6;
    color: #A96910;
    background-color: #FFF6D6;
}

.badge-info {
    border-color: #B1C1D9;
    color: #2A5595;
    background-color: #ECF0F7;
}

.badge-secondary {
    border-color: #949494;
    color: #666;
    background-color: #EEE;
}

.badge i {
    width: unset !important;
}

/* Cards */
.card {
    margin-bottom: var(--ss-space-6);
    box-shadow: 0 6px 10.7px 0 #00000012;
    border: 1px solid #EEEEEE;
}

.card-title {
    font-size: 20px;
    line-height: 120%;
    font-weight: 600;
    margin-bottom: var(--ss-space-6);
}

.card-body {
    padding: var(--ss-space-6);

    p {
        font-size: 18px;
        line-height: 150%;
        font-weight: 400;
        margin-bottom: var(--ss-space-4);
    }

    h1 {
        font-size: 26px;
        line-height: 120%;
        margin-bottom: var(--ss-space-6);
    }

    h2,
    h3 {
        font-size: 20px;
        line-height: 120%;
        margin-bottom: var(--ss-space-6);
    }

    hr {
        margin: var(--ss-space-6) 0;
    }

    .alert {
        border: none;
    }
}

/* Alert */
.alert {
    padding: var(--ss-space-5);

    .alert-title {
        font-size: 20px;
        line-height: 120%;
        font-weight: 600;
        margin-bottom: var(--ss-space-4);
    }

    p {
        font-size: 18px;
        line-height: 150%;
        font-weight: 400;
    }
}

.alert-sm {
    padding: var(--ss-space-3) var(--ss-space-4);
}

.alert-info {
    border-color: #B1C1D9;
    background-color: #ECF0F7;
    color: var(--ss-black);
}

.alert-outline {
    border: 1px solid var(--ss-grey) !important;
    background-color: transparent;
    color: var(--ss-black);
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;

    i {
        color: #666;
    }
}

    .alert-outline .alert-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background-color: #eee;
        border-radius: 4px;
        color: #2A5595;
        margin-right: var(--ss-space-3);
    }

/* Headings */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--ss-black);
}

h1, .h1 {
    font-size: 26px;
    line-height: 120%;
}