refactor: replace custom CRM with Monica fork

resources/sass/modal.scss

@@ -0,0 +1,97 @@
+.modal {
+  h5 {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  label {
+    padding-left: 0;
+  }
+
+  .close {
+    position: absolute;
+    @if $htmldir == ltr {
+      right: 19px;
+    } @else {
+      left: 19px;
+    }
+    top: 14px;
+    font-size: 30px;
+  }
+
+  &.log-call {
+    .date-it-happened {
+      margin-top: 20px;
+    }
+
+    .exact-date {
+      display: none;
+      margin-top: 20px;
+
+      input {
+        display: inline;
+      }
+    }
+  }
+}
+
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #4a4a4a;
+  display: table;
+  transition: opacity .3s ease;
+}
+
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.modal-container {
+  max-width: 500px;
+  max-height: 80%;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #ffffff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px #999999;
+  transition: all .3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+  text-align: center;
+
+  img {
+    max-height: 400px;
+  }
+}
+
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+
+.modal-enter {
+  opacity: 0;
+}
+
+.modal-leave-active {
+  opacity: 0;
+}
+
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+
+.sweet-modal-overlay {
+  -webkit-perspective: none !important;
+}