/* Riders Choice toast design */
:root {
    --rc-toast-success: #08d47b;
    --rc-toast-warning: #ffc319;
    --rc-toast-error: #df111b;
    --rc-toast-info: #2775ff;
    --rc-toast-title: #111827;
    --rc-toast-text: #405064;
    --rc-toast-shadow: 0 14px 26px rgba(15, 23, 42, 0.22), 0 4px 10px rgba(15, 23, 42, 0.12);
}

/* jQuery toastr */
#toast-container {
    z-index: 999999;
}

#toast-container.toast-top-right {
    top: 20px;
    right: 20px;
}

#toast-container > .toast {
    position: relative;
    width: 344px;
    max-width: calc(100vw - 32px);
    min-height: 64px;
    margin: 0 0 14px;
    padding: 16px 20px 16px 64px;
    border: 0;
    border-radius: 6px;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: var(--rc-toast-shadow) !important;
    color: var(--rc-toast-text);
    font-family: Roboto, Arial, Helvetica, sans-serif;
    opacity: 1;
    overflow: hidden;
}

#toast-container > .toast:hover {
    box-shadow: var(--rc-toast-shadow) !important;
    opacity: 1;
}

#toast-container > .toast::before {
    position: absolute;
    top: 50%;
    left: 16px;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
}

#toast-container > .toast::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    content: "";
    animation: rc-toast-progress var(--rc-toast-duration, 5s) linear forwards;
    transform-origin: left center;
}

#toast-container > .toast .toast-progress {
    right: auto;
    bottom: 0;
    left: 0;
    height: 4px;
    opacity: 1;
    transform-origin: left center;
}

#toast-container > .toast-success::before {
    background: var(--rc-toast-success);
    content: "\2713";
}

#toast-container > .toast-success::after {
    background: var(--rc-toast-success);
    box-shadow: 0 -2px 10px rgba(8, 212, 123, 0.35);
}

#toast-container > .toast-success .toast-progress {
    background: var(--rc-toast-success);
    box-shadow: 0 -2px 10px rgba(8, 212, 123, 0.35);
}

#toast-container > .toast-info::before {
    background: var(--rc-toast-info);
    content: "i";
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-style: italic;
}

#toast-container > .toast-warning::before {
    background: var(--rc-toast-warning);
    content: "!";
}

#toast-container > .toast-error::before {
    background: var(--rc-toast-error);
    content: "\00d7";
    font-size: 24px;
}

#toast-container > .toast-warning::after {
    background: var(--rc-toast-warning);
    box-shadow: 0 -2px 10px rgba(255, 195, 25, 0.45);
}

#toast-container > .toast-warning .toast-progress {
    background: var(--rc-toast-warning);
    box-shadow: 0 -2px 10px rgba(255, 195, 25, 0.45);
}

#toast-container > .toast-error::after {
    background: #ff4d57;
    box-shadow: 0 -2px 10px rgba(223, 17, 27, 0.45);
}

#toast-container > .toast-error .toast-progress {
    background: #ff4d57;
    box-shadow: 0 -2px 10px rgba(223, 17, 27, 0.45);
}

#toast-container > .toast-info::after {
    background: var(--rc-toast-info);
    box-shadow: 0 -2px 10px rgba(39, 117, 255, 0.35);
}

#toast-container > .toast-info .toast-progress {
    background: var(--rc-toast-info);
    box-shadow: 0 -2px 10px rgba(39, 117, 255, 0.35);
}

#toast-container .toast-title {
    margin: 0 0 2px;
    color: var(--rc-toast-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

#toast-container .toast-message {
    color: var(--rc-toast-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

#toast-container .toast-message a,
#toast-container .toast-message label {
    color: inherit;
}

#toast-container .toast-close-button {
    display: none;
}

/* Vue Toastification */
.Vue-Toastification__container.top-right {
    top: 20px;
    right: 20px;
}

.Vue-Toastification__toast {
    position: relative;
    width: 344px;
    max-width: calc(100vw - 32px);
    min-width: 0;
    min-height: 64px;
    margin-bottom: 14px;
    padding: 16px 20px 16px 16px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 6px;
    background: #fff !important;
    box-shadow: var(--rc-toast-shadow) !important;
    color: var(--rc-toast-text) !important;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.Vue-Toastification__progress-bar {
    display: block;
    right: auto;
    bottom: 0;
    left: 0;
    height: 4px;
    opacity: 1;
    transform-origin: left center;
}

.Vue-Toastification__toast--success .Vue-Toastification__progress-bar {
    background: var(--rc-toast-success);
    box-shadow: 0 -2px 10px rgba(8, 212, 123, 0.35);
}

.Vue-Toastification__toast--warning .Vue-Toastification__progress-bar {
    background: var(--rc-toast-warning);
    box-shadow: 0 -2px 10px rgba(255, 195, 25, 0.45);
}

.Vue-Toastification__toast--error .Vue-Toastification__progress-bar {
    background: #ff4d57;
    box-shadow: 0 -2px 10px rgba(223, 17, 27, 0.45);
}

.Vue-Toastification__toast--info .Vue-Toastification__progress-bar {
    background: var(--rc-toast-info);
    box-shadow: 0 -2px 10px rgba(39, 117, 255, 0.35);
}

.Vue-Toastification__icon {
    display: flex;
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: 0 16px 0 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.Vue-Toastification__icon svg {
    display: none;
}

.Vue-Toastification__toast--success .Vue-Toastification__icon {
    background: var(--rc-toast-success);
}

.Vue-Toastification__toast--success .Vue-Toastification__icon::before {
    content: "\2713";
}

.Vue-Toastification__toast--info .Vue-Toastification__icon {
    background: var(--rc-toast-info);
}

.Vue-Toastification__toast--info .Vue-Toastification__icon::before {
    content: "i";
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-style: italic;
}

.Vue-Toastification__toast--warning .Vue-Toastification__icon {
    background: var(--rc-toast-warning);
}

.Vue-Toastification__toast--warning .Vue-Toastification__icon::before {
    content: "!";
}

.Vue-Toastification__toast--error .Vue-Toastification__icon {
    background: var(--rc-toast-error);
}

.Vue-Toastification__toast--error .Vue-Toastification__icon::before {
    content: "\00d7";
    font-size: 24px;
}

.Vue-Toastification__toast-body {
    color: var(--rc-toast-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
}

.Vue-Toastification__toast-body::before {
    display: block;
    margin: 0 0 2px;
    color: var(--rc-toast-title);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.Vue-Toastification__toast--success .Vue-Toastification__toast-body::before {
    content: "Saved Successfully";
}

.Vue-Toastification__toast--warning .Vue-Toastification__toast-body::before {
    content: "Action Required";
}

.Vue-Toastification__toast--error .Vue-Toastification__toast-body::before {
    content: "Error Occurred";
}

.Vue-Toastification__toast--info .Vue-Toastification__toast-body::before,
.Vue-Toastification__toast--default .Vue-Toastification__toast-body::before {
    content: "Information";
}

.Vue-Toastification__close-button {
    display: none;
}

@keyframes rc-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 600px) {
    #toast-container.toast-top-right,
    .Vue-Toastification__container.top-right {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    #toast-container > .toast,
    .Vue-Toastification__toast {
        width: auto;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
        border-radius: 6px;
    }
}