.alert {
    margin-top: 1rem;
}
.alert a {
    text-decoration: underline;
    color: var(--primary);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--lighterprimary);
    --bs-btn-hover-bg: var(--lighterprimary);
}
.btn-primary:hover,
.alert-primary {
    background-color: var(--lighterprimary);
    border-color: var(--primary);
}
.btn-outline-primary {
    background-color: #FFF;
    border-color: var(--primary);
    color: var(--primary);
}
.btn-outline-primary:hover {
    background-color: var(--primary);
    color: #FFF;
}
.text-primary,
.color-primary {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}

.btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.btn-secondary:hover,
.alert-secondary {
    background-color: var(--lightersecondary);
    border-color: var(--secondary);
}
.btn-outline-secondary {
    background-color: #FFF;
    border-color: var(--secondary);
    color: var(--secondary);
}
.btn-outline-secondary:hover {
    background-color: var(--secondary);
    color: #FFF;
}
.text-secondary,
.color-secondary {
    color: var(--secondary);
}
.bg-secondary {
    background-color: var(--secondary) !important;

}

.btn-info {
    background-color: var(--info);
    border-color: var(--lighterinfo);
}
.btn-info:hover {
    background-color: var(--lighterinfo);
    border-color: var(--info);
}

.alert-info {
    background-color: var(--lighterlighter);
    border-color: var(--info);
}

.btn-outline-info {
    background-color: #FFF;
    border-color: var(--info);
    color: var(--info);
}
.btn-outline-info:hover {
    background-color: var(--info);
    color: #FFF;
}
.text-info,
.color-info {
    color: var(--info);
}
.bg-info {
    color: var(--info);
}

.btn-danger {
    background-color: var(--danger);
    border-color: var(--lighterred);
}
.btn-danger:hover {
    background-color: var(--lighterred);
    border-color: var(--danger);
}
.alert-danger {
    border-color: var(--danger);
}
.btn-outline-danger {
    background-color: #FFF;
    border-color: var(--danger);
    color: var(--danger);
}
.btn-outline-danger:hover {
    background-color: var(--danger);
    color: #FFF;
}
.text-danger,
.color-danger {
    color: var(--danger);
}
.bg-danger {
    color: var(--danger);
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--lighterwarning);
}
.btn-warning:hover {
    background-color: var(--lighterwarning);
    border-color: var(--warning);
}
.alert-warning {
    background-color: var(--lighter);
    border-color: var(--warning);
}
.btn-outline-warning {
    background-color: #FFF;
    border-color: var(--warning);
    color: var(--warning);
}
.btn-outline-warning:hover {
    background-color: var(--warning);
    color: #FFF;
}
.text-warning,
.color-warning {
    color: var(--warning);
}
.bg-warning {
    color: var(--warning);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--lightersuccess);
}

.btn-success:hover {
    background-color: var(--lightersuccess) !important;
    border-color: var(--success);
}
.alert-success {
    background-color: var(--lighter) !important;
    border-color: var(--lighter);
}
.btn-outline-success {
    background-color: #FFF;
    border-color: var(--success);
    color: var(--success);
}
.btn-outline-success:hover {
    background-color: var(--success);
    color: #FFF;
}
.text-success,
.color-success {
    color: var(--success);
}
.bg-success {
    color: var(--success);
}

.btn-background2 {
    background-color: var(--background2);
    border-color: var(--background);
}

.btn-background2:hover {
    background-color: var(--background) !important;
    border-color: var(--background2);
}
.btn-outline-background2 {
    border-color: var(--background2);
    color: var(--background2);
}
.btn-outline-background2:hover {
    background-color: var(--background2);
    color: var(--primary);
}
.text-background2,
.color-background2 {
    color: var(--background2);
}
.bg-background2 {
    color: var(--background2);
}

.grid-view {
    background: #FFF;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: -1px 4px 9px 0px rgba(0,0,0,0.12);
    -webkit-box-shadow: -1px 4px 9px 0px rgba(0,0,0,0.12);
    -moz-box-shadow: -1px 4px 9px 0px rgba(0,0,0,0.12);
}