﻿.toast-header > .toast-info {
    background-image: url(../img/toast/gv-info.svg) !important;
    background-color: transparent;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
}

.toast-header > .toast-error {
    background-image: url(../img/toast/gv-error.svg) !important;
    background-color: transparent;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
}

.toast-header > .toast-success {
    background-image: url(../img/toast/gv-success.svg) !important;
    background-color: transparent;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
}

.toast-header > .toast-warning {
    background-image: url(../img/toast/gv-alert.svg) !important;
    background-color: transparent;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
}

.toast-header > .toast-loading {
    background-image: url(../img/toast/gv-loading.svg) !important;
    background-color: transparent;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
}

.white-background {
    background-color: var(--hf-surface);
}

.red-background {
    background-color: var(--hf-rojo-soft);
}

.green-background {
    background-color: var(--hf-patina-soft);
}

.yellow-background {
    background-color: var(--hf-oro-soft);
}

.blue-background {
    background-color: var(--hf-primary);
}

.gray-background {
    /*    background-color: var(--hf-surface-2);*/
    background-color: var(--hf-acero-soft);
}

.toast {
    width: 372px;
    max-width: 100%;
    font-size: 0.875rem;
    pointer-events: auto;
    background-clip: padding-box;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    border-radius: 0.48rem;
    border: none;
    min-height: 107px;
}

.toast-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--bs-secondary);
    background-color: var(--hf-surface);
    background-clip: padding-box;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    height: 44px;
}

.toast-body {
    display: flex;
    align-items: center;
}

.toast-header, 
.toast-body {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 110%;
}

.btn-toast {
    width: 116px;
    height: 36px;
}

.toast-container {
    top: 50px !important;
    z-index: 1000;
}

.toast-header .btn-close {
    margin: unset;
}

.w-80 {
    width: 80%;
}
