.toast__container {
    position: fixed;
    z-index: 9999;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px; 
}


.toast {
    font-family: var(--font-family);
    position: fixed;
    z-index: 99999999;
    padding: 21px 0;
    background-color: var(--theme-white);
    border-radius: 4px;
    box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px; 
    max-width: 350px;
    opacity: 1 !important;
}
.toast__icon {
    position: absolute;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    padding: 7px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--theme-green); 
}

.toast__content {
    padding-left: 70px;
    padding-right: 60px;
}

.toast__type {
    color: var(--theme-primary-color); 
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    color: var(--theme-primary-color);
}

.toast__close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor: pointer;
    height: 14px;
    transform: translateY(-50%);
    fill:  var(--theme-primary-color);
}

/* Sağ üst pozisyon */
.toast--top-right {
    top: 20px;
    right: 20px;
}

/* Merkez pozisyon */
.toast--top-center {
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    left: calc(50% - 175px);
}

/* Sol üst pozisyon */
.toast--top-left {
    top: 20px;
    left: 20px;
}

/* Sağ alt pozisyon */
.toast--bottom-right {
    bottom: 20px;
    right: 20px;
}

/* Sol alt pozisyon */
.toast--bottom-left {
    bottom: 20px;
    left: 20px;
}

/* Merkez alt pozisyon */
.toast--bottom-center {
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    left: calc(50% - 175px);
}

.toast--success .toast__icon {
    background-color: var(--theme-green);
}

.toast--info .toast__icon {
    background-color: var(--theme-content);
}

.toast--warning .toast__icon {
    background-color:var(--theme-yellow);
}

.toast--error .toast__icon {
    background-color:  var(--theme-orange);
}

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

@keyframes slideInLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(110%);
    }
}

@keyframes slideInTop {
    from {
        transform: translateY(-100%);
    }
    to {
        
        transform: translateY(0);
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-110%);
        
    }
}



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

@keyframes slideInBottomLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-110%);
    }
}


@keyframes slideInBottomCenter {
    from {
        transform: translateY(100%);
    }
    to {
        
        transform: translateY(0);
    }
}

@keyframes slideOutBottomCenter {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(120%);
        
    }
}


.toast--top-center.show{

    animation: slideInTop 0.3s ease both;
}

.toast--top-center.hidden{

    animation: slideInBottom 0.3s ease both;
}

.toast--bottom-center.show{
    animation: slideInBottomCenter 0.3s ease both;
   
}

.toast--bottom-center.hidden{

    animation: slideOutBottomCenter 0.3s ease both;
}

.toast--top-right.show,
.toast--bottom-right.show
{

    animation: slideInRight 0.3s ease both;
}

.toast--top-right.hidden,
.toast--bottom-right.hidden
{

    animation: slideInLeft 0.3s ease both;
}


.toast--top-left.show,
.toast--bottom-left.show
{
    animation: slideInBottomRight 0.3s ease both;
   
}

.toast--top-left.hidden,
.toast--bottom-left.hidden
{
    animation: slideInBottomLeft 0.3s ease both;
   
}



.alert
{
    margin: 20px 0;
    padding: 20px;
    border-left: 3px solid #eee;
}
.alert h4
{
    margin-top: 0;
    margin-bottom: 5px;
}
.alert p:last-child
{
    margin-bottom: 0;
}
.alert code
{
    background-color: #fff;
    border-radius: 3px;
}
.alert-success
{
    background-color: var(--theme-alert-success-background);
    border-color: var(--theme-alert-success-border);
}
.alert-success h4
{
    color: var(--theme-alert-success-color);
}
.alert-danger
{
    background-color: var(--theme-alert-error-background);
    border-color: var(--theme-alert-error-border);
 
}
.alert-danger h4
{
    color: var(--theme-alert-error-color);;
}
.alert-warning
{
    background-color: #fcf8f2;
    border-color: #f0ad4e;
}
.alert-warning h4
{
    color: #f0ad4e;
}
.alert-info
{
    background-color: #f4f8fa;
    border-color: #5bc0de;
}
.alert-info h4
{
    color: #5bc0de;
}
.alert-default
{
    background-color: #EEE;
    border-color: #B4B4B4;
}
.alert-default h4
{
    color: #000;
}
.alert-notice
{
    background-color: #FCFCDD;
    border-color: #BDBD89;
}
.alert-notice h4
{
    color: #444;
}

.toast__icon.fonticon {
    background: none;
    font-size: 36px;
    top: 15px;
    left: 10px;
    color: var(--theme-content);
}