.cdx-notifies {
    position: fixed;
    z-index: 2;
    bottom: 20px;
    left: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
/* Default notification styles */
.cdx-notify {
     position: relative;
     width: 220px;
     margin-top: 15px;
     padding: 13px 16px;
     background: #fff;
     box-shadow: 0 11px 17px 0 rgba(23,32,61,.13);
     border-radius: 5px;
     font-size: 14px;
     line-height: 1.4em;
     word-wrap: break-word;

    &::before {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 3px;
        height: calc(100% - 6px);
        margin: 3px;
        border-radius: 5px;
        background: transparent;
    }



    /* Cross button */
    &__cross {
         position: absolute;
         top: 5px;
         right: 5px;
         width: 10px;
         height: 10px;
         padding: 5px;
         opacity: 0.54;
         cursor: pointer;

        &::before,
        &::after {
            content: '';
            position: absolute;
            left: 9px;
            top: 5px;
            height: 12px;
            width: 2px;
            background: #575d67;
        }

        &::before {
            transform: rotate(-45deg);
        }

        &::after {
            transform: rotate(45deg);
        }

        &:hover {
            opacity: 1;
        }

    }

    /* Confirm buttons */

    &__btns-wrapper {
        display: flex;
        flex-flow: row nowrap;
        margin-top: 5px;
    }

    &__button {
        border: none;
        border-radius: 3px;
        font-size: 13px;
        padding: 5px 10px;
        cursor: pointer;

        &:last-child {
            margin-left: 10px;
        }

        &--cancel {
            background: #f2f5f7;
            box-shadow: 0 2px 1px 0 rgba(16,19,29,0);
            color: #656b7c;

            &:hover {
                 background: color(#f5f5f5 blackness(+3%));
            }

        }

        &--confirm {
            background: #34c992;
            box-shadow: 0 1px 1px 0 rgba(18,49,35,.05);
            color: #fff;

            &:hover {
                background: color(#34c992 blackness(+10%));
            }
        }

    }


    /* Prompt input */
    &__input {
        max-width: 130px;
        padding: 5px 10px;
        background: #f7f7f7;
        border: 0;
        border-radius: 3px;
        font-size: 13px;
        color: #656b7c;
        outline: none;

        &::placeholder {
            color: #656b7c;
        }

        &:focus {

            &::placeholder {
               color: rgba(101, 107, 124, 0.3);
            }

        }

    }

}
