.page-wrapper {
    .toast {
        &-container {
            .ngx-toastr {
                padding: 16px;
                padding-left: 48px;
                padding-right: 36px;
                margin-bottom: 4px;
                transition: .2s;
            }
        }

        &-top {
            &-right {
                right: 24px;
                top: 16px;
            }
        }

        &-bottom {
            &-right {
                right: 24px;
                bottom: 16px;
            }
        }
        &-success {
            background-color: var(--system-bg-controls-positive-default, #108E3A);
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M17.3334 8.66675L10.0001 16.0001L6.66675 12.6667' stroke='%2360A772' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        
            &:hover {
                background-color: var(--system-bg-controls-positive-hover, #007729);
            }
        }

        &-error {
            background-color: var(--system-bg-controls-negative-default, #B83B15);
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M16 8L8 16' stroke='%23D14114' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 8L16 16' stroke='%23D14114' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        
            &:hover {
                background-color: var(--system-bg-controls-negative-hover, #AA2800);
            }
        }
          
        &-warning {
            background-color: var(--system-bg-controls-attention-default, #CC6E07);
            background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M12.1534 16V15.3333M12.1534 13.3333V10.6667M6.66857 18.1667H17.6382C18.6646 18.1667 19.3061 17.0556 18.7929 16.1667L13.3081 6.66667C12.7949 5.77778 11.5119 5.77778 10.9987 6.66667L5.51387 16.1667C5.00067 17.0556 5.64217 18.1667 6.66857 18.1667Z' stroke='%23D57B1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        
            &:hover {
                background-color: var(--system-bg-controls-attention-hover, #C26807);
            }
        }
        
        &-close {
            &-button {
                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12' stroke='%23F6F6F6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4L12 12' stroke='%23F6F6F6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
                width: 16px;
                height: 16px;
                right: 16px;
                top: 16px;
                position: absolute;

                span {
                    display: none;
                }
            }
        }

        &-title {
            font-family: 'PT Sans', sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 14px;
            line-height: 16px;
        }

        &-message {
            font-family: 'PT Sans', sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            margin-top: 4px;
        }
    }
}