:root {
    --primary-color: #2A292E;
    --secondary-color: #F6F6F6;
    --tritery-color: #676570;
}

.inner-container {
    position: relative;
    width: 100%;
    background-color: var(--secondary-color);  /* Gradient fading to the right */
}

.success {
    border-left: 15px solid green;
}

.success::before {
    background: linear-gradient(to right, green, transparent);  /* Gradient fading to the right */
}

.success::after {
    background: linear-gradient(to right, green, transparent);  /* Gradient fading to the right */
}

.error {
    border-left: 15px solid red;
}

.error::before {
    background: linear-gradient(to right, red, transparent);  /* Gradient fading to the right */
}

.error::after {
    background: linear-gradient(to right, red, transparent);  /* Gradient fading to the right */
}


.info {
    border-left: 15px solid grey;
}

.info::before {
    background: linear-gradient(to right, grey, transparent);  /* Gradient fading to the right */
}

.info::after {
    background: linear-gradient(to right, grey, transparent);  /* Gradient fading to the right */
}

.warning {
    border-left: 15px solid orange;
}

.warning::before {
    background: linear-gradient(to right, orange, transparent);  /* Gradient fading to the right */
}

.warning::after {
    background: linear-gradient(to right, orange, transparent);  /* Gradient fading to the right */
}

.toaster {
    position: relative;
    min-width: 300px;
    padding: 10px;
    border-radius: 5px 0px 0px 5px;
    box-sizing: border-box;  /* Include border in the width */
    overflow:hidden;
    user-select: none;
    -webkit-user-select: none;
    cursor:default;
    background-color: var(--secondary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 2px 0 5px rgba(0,0,0,0.1);
    margin-top: 15px;
}

.notification:first-child {
    margin-top: 25px;
}

.toaster::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;                  /* Height of the top border */
}

.toaster::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;                  /* Height of the bottom border */
}


.notification {
    position: fixed;
    width: 300px;
    right: 0px;      /* Align it to the right */
    top: 0;        /* Align it to the top */
    user-select: none;
    -webkit-user-select: none;
    z-index: 999;
}


.message_animated {
    animation: moveIn .5s ease;  /* Example animation, adjust as needed */
}

@keyframes moveIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.message_animation {
    transform: translateX(100%);
    animation: moveOut .5s ease;
}

@keyframes moveOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}


.messageexit{
    display: inline-block;
    position: absolute;
    color: black;
    right: 20px;
    cursor: pointer;
    transition-duration: 250ms;
}


.messageexit:hover {
    color:red;
    
}