#toast-container {
    position: fixed; /* Or absolute, depending on your needs */
    z-index: 111111112; /* High value to be on top of everything else */
    top: 0; /* Adjust this value as needed */
    left: 0; /* Adjust this value as needed */
    right: 0; /* Adjust this value as needed */
    /* Add other styling as necessary */
}

/* General styles for both success and error toasts */
#toast-container > div {
    font-family: 'Gopher', sans-serif; /* Change the font */
    padding: 0; /* Reset padding */
    border-radius: 0 !important; /* Removes border radius if desired */
    width: 100% !important; /* Force the toast to full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Styles specifically for success toasts */
#toast-container > .toast-success {
    background-image: none !important;
    background-color: #00ba80 !important; /* Green background color for success messages */
}

/* Styles specifically for error toasts */
#toast-container > .toast-error {
    background-image: none !important;
    background-color: #ff0000 !important; /* Red background color for error messages */
}

/* Mobile specific styles */
@media (max-width: 1023px) {
    #toast-container > div {
        opacity: 1; /* Full opacity */
    }
}

/* Styles for mobile */
#toast-container > div {
    color: #000 !important; /* Text color black for mobile */
    height: 160px; /* Height for mobile */
    display: flex;
    align-items: flex-end; /* Align text to the bottom for mobile */
    font-weight: bold; /* Bold text for mobile */
}

/* This targets the text within the toast */
#toast-container .toast-message {
    flex: 1; /* Allow message to fill the space and align center */
    display: flex; /* Needed to apply flex properties to the text */
    justify-content: center; /* Center text horizontally for mobile */
    align-items: center; /* Center text vertically, change to 'flex-end' if bottom alignment is needed */
    padding: 10px; /* Padding to ensure text doesn't touch the edges */
}

/* Styles for desktop */
@media (min-width: 1024px) {
    #toast-container > div {
        color: #fff !important; /* Text color white for desktop */
        height: 56px; /* Height for desktop */
        display: flex;
        align-items: center; /* Center text vertically for desktop */
        justify-content: center; /* Center text horizontally for desktop */
        font-weight: normal; /* Normal text weight for desktop */
        padding: 0 15px; /* Add padding on the sides for desktop */
    }
}