.alter-cnt {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 200;
    transform: translateX(-50%);
    width: fit-content;
    opacity: 0;
    transition: .2s opacity ease-in-out;
}

.alter-cnt.show {
    opacity: 1;
}

.error,
.success {
    height: 58px;
    border-radius: 16px;
    padding: 0 16px;
    background-color: var(--background-secondary);
    border: 1px solid var(--border-cl);
    display: flex;
    gap: 16px;
    align-items: center;
    color: var(--white);
}

.alter-cnt .icon {
    width: 24px;
    height: 24px;
}

.alter-cnt .error .icon {
    fill: #ff0000;
}

.alter-cnt .success .icon {
    fill: #05af25;
}

.alter-cnt .icon svg {
    width: 100%;
    height: 100%;
}

.alter-cnt .text {
    flex-grow: 1;
}

.alter-cnt .skip-btn {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-right: 32px;
    transition: .2s background-color ease-in-out;
    stroke: var(--white);
}

.alter-cnt .skip-btn svg {
    width: 60%;
    height: 60%;
}

.alter-cnt .skip-btn:hover {
    background-color: red;
}

@media(max-width: 800px) {
    .alter-cnt {
        width: calc(100% - 32px);
    }

    .error,
    .success {
        width: 100%;
    }
}