:root {
    --bg-white: #ffffff;
    --bg-black: #050505;
    --bg-grey: #EBEDF9;
    --bg-dark: #10131F;
    --bg-dark-light: #131725;
    --bg-profile: #171928;
    --bg-dark-two: #0A0C16;
    --color-border: #282a37;
    --color-white: #ffffff;
    --color-white-opacity: #D8DAE7;
    --color-dark: #000000;
    --color-dark-opacity: #48547b;
    --color-dark-opacity-two: #1D2233;
    --color-main: #FFBF00;
    --color-main-light: #ffcb2e;
    --color-red: #f81045;
    --color-green: #399734;
    --color-orange: #FFBF00
}

.alerts__block {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: max-content;
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 99999;
    transition: .25s;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto
}

.alerts__block-alert {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 300px;
    min-height: 50px;
    width: max-content;
    padding: 20px 25px;
    margin: 10px 0 0;
    border-radius: 12px;
    transition: .3s;
}

.alerts__block-alert.success {
    background: #217BF4;
    color: var(--color-white);
}

.alerts__block-alert.error {background: var(--color-red);color: var(--color-white);}

.alerts__block-alert.danger {background: var(--color-main);color: var(--color-dark);}

.alerts__block-icon {
    background: var(--color-main-dark);
    border: 2px solid var(--color-main-dark-border);
    color: var(--color-text-main-light);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 15px;
    margin: 0 10px 0 0;
    position: absolute;
    left: -10px;
    top: -10px
}

.alerts__block-text {
}

.alerts__block-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black)
}

.alerts__block-desc {
    font-size: 14px;
    font-weight: 500
}

.alerts__block-alert.success .alerts__block-desc {
}

@keyframes animate_motion {
    0% {
        transform: translateX(-200px)
    }

    100% {
        transform: translateX(0)
    }
}