styling alertify boxes

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"></link>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"></link>

CSS

.alertify-notifier .ajs-message {
  &.ajs-error {
    border: 5px solid;
    border-radius: 10px;
    background-color: #ff9999;
    border-color: red ;
  }
  &.ajs-custom {
    border: 5px solid;
    border-radius: 10px;
    background-color: #7777cc;
    border-color: blue;
  }
}

JavaScript

alertify.dialog('my_box', function factory() {
  return {
    main: function (message, onok) {
      this.setting('title', 'Confirm');
      this.setting('transition', 'fade');
      this.onok = onok;
      this.message = message;
    },
    setup: function () {
      return {
        buttons: [
          {
            text: 'Yes',
          },
          {
            text: 'No',
          },
        ],
        options: {
          modal: true,
          resizeable: false,
          maximizable: false,
          closable: false,
        },
        focus: {
          element: 1,
        },
      };
    },
    prepare: function () {
      this.setContent(this.message);
    },
    callback: function (closeEvent) {
      if (closeEvent.index == 0) {
        this.onok();
      }
    },
  };
});
$(document).ready(function () {
  alertify.notify("error", "error");
  alertify.notify("custom", "custom");
  alertify.my_box('Yes or no ?', function () {
    console.log('ok');
  });
});