vcomply-design-system 1.0.0

package/css-build/css/vx.css

@@ -0,0 +1,4254 @@
+.vx-text-left {
+  text-align: left;
+}
+.vx-text-center {
+  text-align: center;
+}
+.vx-text-right {
+  text-align: right;
+}
+.vx-justify-start {
+  justify-content: flex-start;
+}
+.vx-justify-center {
+  justify-content: center;
+}
+.vx-justify-end {
+  justify-content: flex-end;
+}
+.vx-justify-between {
+  justify-content: space-between;
+}
+.vx-justify-around {
+  justify-content: space-around;
+}
+.vx-align-start {
+  align-items: flex-start;
+}
+.vx-align-center {
+  align-items: center;
+}
+.vx-align-end {
+  align-items: flex-end;
+}
+@-webkit-keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-200px, 0, 0);
+    transform: translate3d(-200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeInLeft {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(-200px, 0, 0);
+    transform: translate3d(-200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-fadeInLeft {
+  -webkit-animation-name: fadeInLeft;
+  animation-name: fadeInLeft;
+}
+@-webkit-keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(200px, 0, 0);
+    transform: translate3d(200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes fadeInRight {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(200px, 0, 0);
+    transform: translate3d(200px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-fadeInRight {
+  -webkit-animation-name: fadeInRight;
+  animation-name: fadeInRight;
+}
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.animate-fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+@-webkit-keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.animate-fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}
+@-webkit-keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -200px, 0);
+    transform: translate3d(0, -200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInDown {
+  0% {
+    -webkit-transform: translate3d(0, -200px, 0);
+    transform: translate3d(0, -200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInDown {
+  -webkit-animation-name: slideInDown;
+  animation-name: slideInDown;
+}
+@-webkit-keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInLeft {
+  0% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+    transform: translate3d(-100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInLeft {
+  -webkit-animation-name: slideInLeft;
+  animation-name: slideInLeft;
+}
+@-webkit-keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInRight {
+  0% {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInRight {
+  -webkit-animation: slideInRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slideInRight 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 200px, 0);
+    transform: translate3d(0, 200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+@keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 200px, 0);
+    transform: translate3d(0, 200px, 0);
+    visibility: visible;
+  }
+  to {
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+  }
+}
+.animate-slideInUp {
+  -webkit-animation-name: slideInUp;
+  animation-name: slideInUp;
+}
+.animate {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.animate.animate-infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+.animate.animate-repeat-1 {
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+.animate.animate-repeat-2 {
+  -webkit-animation-iteration-count: 2;
+  animation-iteration-count: 2;
+}
+.animate.animate-repeat-3 {
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+}
+.animate.animate-delay-1s {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+.animate.animate-delay-2s {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+.animate.animate-delay-3s {
+  -webkit-animation-delay: 3s;
+  animation-delay: 3s;
+}
+.animate.animate-delay-4s {
+  -webkit-animation-delay: 4s;
+  animation-delay: 4s;
+}
+.animate.animate-delay-5s {
+  -webkit-animation-delay: 5s;
+  animation-delay: 5s;
+}
+.animate.animate-faster {
+  -webkit-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+}
+.animate.animate-fast {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+}
+.animate.animate-slow {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+.animate.animate-slower {
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+}
+body {
+  font-size: 16px;
+}
+a,
+button {
+  cursor: pointer;
+}
+.vx-avatar {
+  display: flex;
+  border-radius: 50%;
+  border: 2px solid #f1f1f1;
+}
+.vx-avatar.md {
+  height: 28px;
+  width: 28px;
+}
+.vx-avatar.sm {
+  height: 24px;
+  width: 24px;
+}
+.vx-avatar.sm span {
+  font-size: 8px;
+  font-weight: 500;
+}
+.vx-avatar.lg {
+  height: 32px;
+  width: 32px;
+}
+.vx-avatar.lg span {
+  font-size: 12px;
+}
+.vx-avatar.x-lg {
+  height: 80px;
+  width: 80px;
+}
+.vx-avatar.x-lg span {
+  font-size: 18px;
+  font-weight: 600;
+}
+.vx-avatar.counter {
+  cursor: pointer;
+}
+.vx-avatar span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 500;
+  color: #FFFFFF;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  text-transform: uppercase;
+  margin: 0;
+  background: #F1F1F1;
+}
+.vx-avatar span.green {
+  background: #34AA44;
+}
+.vx-avatar span.blue {
+  background: #1E5DD3;
+}
+.vx-avatar span.grey {
+  color: #34AA44 !important;
+  font-size: 14px !important;
+}
+.vx-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.vx-avatar-container {
+  padding-bottom: 20px;
+}
+.vx-avatar-container .vx-avatar + .vx-avatar {
+  margin-left: 20px;
+}
+.vx-avatar-group {
+  display: flex;
+}
+.vx-avatar-group .vx-avatar + .vx-avatar {
+  margin-left: -10px;
+}
+.vx-pt-0 {
+  padding-top: 0 !important;
+}
+.vx-pt-1 {
+  padding-top: 4px !important;
+}
+.vx-pt-2 {
+  padding-top: 8px !important;
+}
+.vx-pt-3 {
+  padding-top: 12px !important;
+}
+.vx-pt-4 {
+  padding-top: 16px !important;
+}
+.vx-pt-5 {
+  padding-top: 20px !important;
+}
+.vx-pr-0 {
+  padding-right: 0 !important;
+}
+.vx-pr-1 {
+  padding-right: 4px !important;
+}
+.vx-pr-2 {
+  padding-right: 8px !important;
+}
+.vx-pr-3 {
+  padding-right: 12px !important;
+}
+.vx-pr-4 {
+  padding-right: 16px !important;
+}
+.vx-pr-5 {
+  padding-right: 20px !important;
+}
+.vx-pb-0 {
+  padding-bottom: 0 !important;
+}
+.vx-pb-1 {
+  padding-bottom: 4px !important;
+}
+.vx-pb-2 {
+  padding-bottom: 8px !important;
+}
+.vx-pb-3 {
+  padding-bottom: 12px !important;
+}
+.vx-pb-4 {
+  padding-bottom: 16px !important;
+}
+.vx-pb-5 {
+  padding-bottom: 20px !important;
+}
+.vx-pl-0 {
+  padding-left: 0 !important;
+}
+.vx-pl-1 {
+  padding-left: 4px !important;
+}
+.vx-pl-2 {
+  padding-left: 8px !important;
+}
+.vx-pl-3 {
+  padding-left: 12px !important;
+}
+.vx-pl-4 {
+  padding-left: 16px !important;
+}
+.vx-pl-5 {
+  padding-left: 20px !important;
+}
+.vx-btn {
+  border: 1px solid #F1F1F1;
+  color: #1E5DD3;
+  cursor: pointer;
+  overflow: hidden;
+  outline: none;
+  border-radius: 2px;
+  display: inline-flex;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  margin: 0;
+  text-decoration: none;
+  padding-right: 12px;
+  padding-left: 12px;
+  justify-content: center;
+}
+.vx-btn i {
+  margin-right: 8px;
+  transform: scale(1.2);
+}
+.vx-btn.after i {
+  margin-left: 8px;
+  margin-right: 0;
+}
+.vx-btn.outline {
+  background: transparent;
+}
+.vx-btn + .vx-btn {
+  margin-left: 8px;
+}
+.vx-btn.transparent {
+  background: transparent !important;
+  border: none;
+}
+.vx-btn.transparent.primary {
+  color: #1E5DD3;
+}
+.vx-btn.transparent.red {
+  color: #EB2424;
+}
+.vx-btn.transparent.grey {
+  color: #161B2F;
+}
+.vx-btn:disabled {
+  filter: grayscale(1);
+  cursor: not-allowed;
+}
+.vx-btn:disabled:hover {
+  filter: grayscale(1);
+}
+.vx-btn:disabled:hover:before {
+  display: none;
+}
+.vx-btn.primary {
+  color: #FFFFFF;
+  background: #1E5DD3;
+  border-color: #1E5DD3;
+}
+.vx-btn.primary.outline {
+  color: #1E5DD3;
+  background: transparent;
+  border-color: #1E5DD3;
+}
+.vx-btn.primary.outline.light {
+  border-color: #f1f1f1;
+}
+.vx-btn.red {
+  color: #FFFFFF;
+  background: #EB2424;
+  border-color: #EB2424;
+}
+.vx-btn.red.outline {
+  color: #EB2424;
+  background: transparent;
+  border-color: #EB2424;
+}
+.vx-btn.grey {
+  color: #161B2F;
+  background: #DBDBDB;
+  border-color: #DBDBDB;
+}
+.vx-btn.grey.outline {
+  color: #161B2F;
+  background: transparent;
+  border-color: #F1F1F1;
+}
+.vx-btn.white {
+  background: #FFFFFF;
+  color: #747576;
+  border-color: #FFFFFF;
+}
+.vx-btn.lg {
+  line-height: 48px;
+  padding-right: 20px !important;
+  padding-left: 20px !important;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 600;
+  border-width: 2px;
+}
+.vx-btn.md {
+  line-height: 24px;
+  min-width: 80px;
+}
+.vx-btn.sm {
+  line-height: 20px;
+  font-size: 9px;
+  margin-bottom: 0;
+}
+.vx-btn.block {
+  display: flex;
+  width: 100%;
+  line-height: 38px;
+  padding-right: 20px !important;
+  padding-left: 20px !important;
+  border-radius: 0px;
+  justify-content: center;
+  font-size: 11px;
+  letter-spacing: 3.08px;
+}
+.vx-btn.block.rounded {
+  border-radius: 4px;
+}
+.vx-btn.icon {
+  height: 36px;
+  width: 36px;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0;
+}
+.vx-btn.icon.sm {
+  height: 28px;
+  width: 28px;
+  line-height: 26px;
+}
+.vx-btn.icon i {
+  margin: 0;
+}
+.vx-btn:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000000;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+}
+.vx-btn:hover {
+  position: relative;
+  filter: brightness(85%);
+}
+.vx-txt-red {
+  color: #EB2424;
+}
+.vx-txt-blue {
+  color: #1E5DD3;
+}
+.vx-txt-white {
+  color: #FFFFFF;
+}
+.vx-paragraph-txt {
+  color: #747576;
+}
+.vx-label-txt {
+  color: #161B2F;
+}
+.vx-bg-grey {
+  background: #F1F1F1;
+}
+.vx-bg-white {
+  background: #FFFFFF;
+}
+.vx-bg-red {
+  background: #EB2424;
+}
+.vx-bg-vColor {
+  background: #EE3939;
+}
+.vx-bg-blue {
+  background: #1E5DD3;
+}
+.vx-bg-light-text {
+  background: #747576;
+}
+.vx-dark-border {
+  border-color: #161B2F;
+}
+.vx-grey-border {
+  border-color: #F1F1F1;
+}
+.vx-red-border {
+  border-color: #EB2424;
+}
+.vx-blue-border {
+  border-color: #1E5DD3;
+}
+.vx-color-palette {
+  min-height: 40px;
+  width: 100%;
+  border-radius: 0;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.vx-color-palette input {
+  font-size: 12px;
+  font-weight: 400;
+  color: #FFFFFF;
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  text-align: center;
+}
+.vx-color-palette.bg.blue-1 {
+  background: #1e5dd3;
+}
+.vx-color-palette.bg.blue-2 {
+  background: #4681ef;
+}
+.vx-color-palette.bg.blue-3 {
+  background: #7aa6f7;
+}
+.vx-color-palette.bg.blue-4 {
+  background: #d4e2fc;
+}
+.vx-color-palette.bg.blue-5 {
+  background: #033187;
+}
+.vx-color-palette.bg.green-1 {
+  background: #34aa44;
+}
+.vx-color-palette.bg.green-2 {
+  background: #66bf72;
+}
+.vx-color-palette.bg.green-3 {
+  background: #97d2a0;
+}
+.vx-color-palette.bg.green-4 {
+  background: #d6f2da;
+}
+.vx-color-palette.bg.red-1 {
+  background: #d93b41;
+}
+.vx-color-palette.bg.red-2 {
+  background: #e75151;
+}
+.vx-color-palette.bg.red-3 {
+  background: #f77272;
+}
+.vx-color-palette.bg.red-4 {
+  background: #ffeaea;
+}
+.vx-color-palette.bg.orange-1 {
+  background: #f6882f;
+}
+.vx-color-palette.bg.orange-2 {
+  background: #f5a05b;
+}
+.vx-color-palette.bg.orange-3 {
+  background: #f9b883;
+}
+.vx-color-palette.bg.orange-4 {
+  background: #fbe1cc;
+}
+.vx-color-palette.bg.yellow-1 {
+  background: #f0b819;
+}
+.vx-color-palette.bg.yellow-2 {
+  background: #f4c84a;
+}
+.vx-color-palette.bg.yellow-3 {
+  background: #fadd8a;
+}
+.vx-color-palette.bg.yellow-4 {
+  background: #fff4d6;
+}
+.vx-color-palette.bg.dark-1 {
+  background: #000000;
+}
+.vx-color-palette.bg.dark-2 {
+  background: #161b2f;
+}
+.vx-color-palette.bg.dark-3 {
+  background: #747576;
+}
+.vx-color-palette:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.vx-color-palette:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.vx-color-palette:last-child input {
+  color: #000000;
+}
+.vx-dialog-container {
+  position: relative;
+  border: 1px solid #F1F1F1;
+  border-radius: 4px;
+}
+.vx-dialog-container.dialog-md {
+  width: 560px;
+}
+.vx-dialog-container.dialog-lg {
+  width: 720px;
+}
+.vx-dialog-container.dialog-sm {
+  width: 380px;
+}
+.vx-dialog-container.dialog-sm .vx-dialog-head {
+  height: 40px;
+  padding: 0 10px 0 20px;
+}
+.vx-dialog-container.dialog-sm .vx-dialog-head button {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+.vx-dialog-container.dialog-sm .vx-dialog-body {
+  padding: 15px 20px;
+}
+.vx-dialog-container.dialog-fs {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  overflow: auto;
+  background: #FFFFFF;
+  position: relative;
+}
+.vx-dialog-container.dialog-fs.close {
+  background: #EE3939;
+  border: none;
+}
+.vx-dialog-container.dialog-fs.close:after {
+  position: absolute;
+  content: "";
+  background: #FFFFFF;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 0 200px 0 0;
+}
+.vx-dialog-container.dialog-fs.close button.close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  color: #FFFFFF;
+  font-size: 22px;
+}
+.vx-dialog-container.dialog-alert {
+  width: 540px;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-body {
+  background: #f8f8f8;
+  border-radius: 4px 4px 0 0;
+  padding: 50px 15px 35px;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-body-container {
+  padding: 0;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-icon {
+  background: #fff;
+  border: 1px solid #dcdcdc;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin: 0 auto 35px;
+  padding: 5px 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-icon i {
+  font-size: 40px;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-description {
+  font-size: 16px;
+  color: #747576;
+  text-align: center;
+  margin: 0;
+  font-weight: 400;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer {
+  display: flex;
+  font-size: 14px;
+  background: #fff;
+  padding: 15px 20px;
+  letter-spacing: 0.2px;
+  border-radius: 0 0 4px 4px;
+  z-index: 1;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer p.info {
+  color: #161b2f;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  text-align: left;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer .action {
+  display: flex;
+}
+.vx-dialog-container.dialog-alert .vx-dialog-footer .action button {
+  padding: 0 25px;
+}
+.vx-dialog-container.side-dialog {
+  height: 100vh;
+  width: 500px;
+  border-radius: 0;
+}
+.vx-dialog-container.side-dialog .vx-dialog-footer {
+  justify-content: flex-end;
+  display: flex;
+  height: 50px;
+  align-items: center;
+  padding: 0 20px;
+  background: #FBFBFB;
+  border-top: 1px solid #F1F1F1;
+  border-radius: 0;
+}
+.vx-dialog-container.side-dialog .vx-dialog-head {
+  border-radius: 0;
+  padding: 0 8px 0 20px;
+}
+.vx-dialog-container.side-dialog .vx-dialog-head .vx-btn {
+  color: #161b2f !important;
+}
+.vx-dialog-container.side-dialog .vx-dialog-body-container {
+  padding: 0;
+}
+.vx-dialog-container.side-dialog .vx-dialog-body {
+  height: calc(100vh - 100px);
+  overflow: auto;
+}
+.vx-dialog-container.animate {
+  -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+  animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+}
+.vx-dialog-head {
+  background: #f8f8f8;
+  border-bottom: 1px solid #F1F1F1;
+  border-radius: 4px 4px 0 0;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 22px;
+}
+.vx-dialog-title {
+  margin: 0;
+  color: #161B2F;
+  font-size: 14px;
+  line-height: 21px;
+  font-weight: 500;
+}
+.vx-dialog-close {
+  font-size: 12px;
+  color: #000000;
+  padding: 0 3px;
+  margin: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.vx-dialog-body {
+  padding: 12px 28px;
+  overflow: auto;
+  overflow-x: hidden;
+}
+.vx-dialog-body-container {
+  padding: 4px;
+  background: #FFFFFF;
+}
+.vx-dialog-body-container .editor-block {
+  min-height: 100px;
+  border: 1px solid #F1F1F1;
+}
+.vx-dialog-simple {
+  background: #FFFFFF;
+  box-shadow: 0 0 5px rgba(30, 93, 211, 0.27);
+  -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+  animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) 50ms both;
+}
+.vx-dialog-simple .vx-dialog-title {
+  padding: 8px12px;
+}
+.vx-dialog-footer {
+  background: #f8f8f8;
+  border-top: 1px solid #F1F1F1;
+  border-radius: 0 0 4px 4px;
+  height: 50px;
+  padding: 0 20px;
+}
+.error-icon {
+  color: #C7381B;
+  font-size: 36px;
+  display: flex;
+  transform: rotate(45deg);
+}
+.bin-icon {
+  display: block;
+  width: 26px;
+  height: 40px;
+  border-radius: 50%;
+  z-index: 2;
+  position: relative;
+}
+.lid {
+  position: relative;
+  width: 30px;
+  height: 2px;
+  left: -2px;
+  border-radius: 4px;
+}
+.lid:before {
+  content: '';
+  position: absolute;
+  top: -3px;
+  right: 0;
+  left: 0;
+  width: 6px;
+  height: 3px;
+  margin: 0 auto;
+  border-radius: 10px 10px 0 0;
+}
+.box {
+  position: relative;
+  height: 34px;
+  margin-top: 2px;
+  border-radius: 0 0 8px 8px;
+}
+.box-inner {
+  background-color: #FFFFFF;
+  position: relative;
+  top: 2px;
+  width: 22px;
+  height: 30px;
+  margin: 0 auto;
+  border-radius: 0 0 5px 5px;
+}
+.bin-lines {
+  position: relative;
+  top: 3px;
+  margin: 0 auto;
+  width: 2px;
+  height: 22px;
+  border-radius: 4px;
+}
+.bin-lines:before,
+.bin-lines:after {
+  background-color: #d93b41;
+  width: 2px;
+  height: 22px;
+  border-radius: 4px;
+  content: '';
+  position: absolute;
+  transition: 0.2s ease background-color;
+}
+.bin-lines:before {
+  left: -6px;
+}
+.bin-lines:after {
+  left: 6px;
+}
+.lid,
+#lid:before,
+.box,
+#bin-lines {
+  background-color: #d93b41;
+  transition: 0.2s ease background-color;
+}
+.bin-icon.active .box {
+  animation: shake 0.2s ease 0.1s;
+}
+.bin-icon.active .box-inner {
+  background-color: #d93b41;
+}
+.bin-icon.active .bin-lines {
+  background-color: #FFFFFF !important;
+}
+.bin-icon.active .bin-lines::before {
+  background-color: #FFFFFF;
+}
+.bin-icon.active .bin-lines::after {
+  background-color: #FFFFFF;
+}
+.bin-icon.active .lid {
+  animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
+}
+.activateCircle {
+  display: block;
+  width: 50px;
+  height: 50px;
+  background: transparent;
+  border-radius: 50px;
+  overflow: hidden;
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+.activateCircle:before {
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  margin: auto;
+  content: "";
+  border-radius: 50px;
+  transition: all 300ms ease;
+}
+.activateCircle span {
+  display: block;
+  width: 13px;
+  height: 3px;
+  background: #34aa44;
+  margin: 27px 0 0 7px;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.activateCircle span.line-2 {
+  margin: -7px 0 0 13px;
+  transform: rotate(135deg);
+  width: 28px;
+}
+.activateCircle.activeActiveIcon:before {
+  width: 55px;
+  height: 55px;
+  transition: all 300ms ease;
+}
+.activateCircle.activeActiveIcon span {
+  background: #34aa44;
+  animation: scale-up-hor-left-1 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+.activateCircle.activeActiveIcon span.line-2 {
+  background: #34aa44;
+  animation: scale-up-hor-left-2 0.3s cubic-bezier(0, 0, 0, 0) 10ms both;
+}
+@keyframes lift-up {
+  0% {
+    top: 0;
+  }
+  50% {
+    top: -35px;
+  }
+  100% {
+    top: 0;
+  }
+}
+@keyframes scale-up-hor-left-1 {
+  0% {
+    width: 0;
+    transform: rotate(45deg) translate(-2px, -5px);
+  }
+  50% {
+    width: 16px;
+    transform: rotate(45deg) translate(2px, 0px);
+  }
+  100% {
+    width: 13px;
+    transform: rotate(45deg) translate(0px, 0px);
+  }
+}
+@keyframes scale-up-hor-left-2 {
+  0% {
+    width: 0;
+    transform: rotate(135deg) translate(-2px, -8px);
+  }
+  50% {
+    width: 0;
+    transform: rotate(135deg) translate(4px, -8px);
+  }
+  75% {
+    width: 32px;
+    transform: rotate(135deg) translate(0, 0);
+  }
+  100% {
+    width: 28px;
+    transform: rotate(135deg) translate(0px, 0px);
+  }
+}
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.vx-d-none {
+  display: none !important;
+}
+.vx-d-block {
+  display: block !important;
+}
+.vx-d-flex {
+  display: flex !important;
+}
+.vx-d-table {
+  display: table !important;
+}
+.vx-d-inline {
+  display: inline !important;
+}
+.vx-d-inline-block {
+  display: inline-block !important;
+}
+.vx-d-inline-flex {
+  display: inline-flex !important;
+}
+.vx-flex-wrap {
+  flex-wrap: wrap;
+}
+label.vx-checkbox-item {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+}
+label.vx-checkbox-item span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+label.vx-checkbox-item span.checkbox {
+  height: 16px;
+  width: 16px;
+  border-radius: 2px;
+  border: 1px solid #DBDBDB;
+  position: relative;
+  padding: 2px;
+  margin-top: 0px;
+}
+label.vx-checkbox-item span.value {
+  color: #4E4E4E;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+  max-width: calc(100% - 26px);
+}
+label.vx-checkbox-item span.value:empty {
+  display: none;
+}
+label.vx-checkbox-item svg {
+  display: none;
+  margin-top: 0px;
+}
+label.vx-checkbox-item input[type=checkbox] {
+  display: none;
+}
+label.vx-checkbox-item input[type=checkbox]:checked ~ svg {
+  display: block;
+}
+label.vx-checkbox-item input[type=checkbox]:checked + .checkbox {
+  display: none;
+}
+label.vx-checkbox-item input[type=checkbox]:disabled ~ * {
+  opacity: 0.7;
+}
+.disabled {
+  opacity: 0.4 !important;
+}
+.checkmark {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  stroke-width: 4;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px #34AA44;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+.checkmark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #34AA44;
+  fill: none;
+  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  padding-right: 10px;
+}
+.checkmark__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #34AA44;
+  }
+}
+.vx-form-group {
+  display: block;
+  position: relative;
+  margin-bottom: 16px;
+}
+.vx-form-group .select {
+  position: relative;
+}
+.vx-form-group .select select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+  width: 100%;
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  line-height: inherit;
+  z-index: 1;
+}
+.vx-form-group .select select:disabled {
+  background: #F1F1F1;
+  cursor: not-allowed;
+}
+.vx-form-group .select:after {
+  content: "";
+  border-top: 5px solid #161B2F;
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  position: absolute;
+  right: 20px;
+  top: calc(50% - 2px);
+}
+.vx-form-group .select input {
+  cursor: pointer;
+}
+.vx-form-group label.vx-control-panel {
+  color: #161B2F;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  margin-bottom: 8px;
+  display: block;
+  text-transform: uppercase;
+  width: 100%;
+  margin-top: 4px;
+}
+.vx-form-group label.vx-control-panel span.required {
+  color: #EB2424;
+}
+.vx-form-group input[type=text] {
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #DBDBDB;
+  background: #FFFFFF;
+  outline: none;
+  padding: 8px 12px;
+  line-height: 20px;
+  font-size: 13px;
+  color: #747576;
+  font-weight: 400;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+.vx-form-group input[type=text]:focus {
+  border-color: #1E5DD3;
+  box-shadow: 0 0 5px rgba(30, 93, 211, 0.27);
+}
+.vx-form-group input[type=text].error {
+  border-color: #EB2424;
+  color: #EB2424;
+  margin-bottom: 4px;
+}
+.vx-form-group input[type=text].error:focus {
+  box-shadow: 0 0 5px rgba(211, 30, 30, 0.27);
+}
+.vx-form-group input[type=text]:disabled {
+  background: #F1F1F1;
+  cursor: not-allowed;
+}
+.vx-form-group input[type=file] {
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #DBDBDB;
+  background: #FFFFFF;
+  outline: none;
+  padding: 9px 16px;
+  line-height: 20px;
+  font-size: 12px;
+  color: #747576;
+  font-weight: 400;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+.vx-form-group input[type=file].error {
+  border-color: #EB2424;
+  color: #EB2424;
+  margin-bottom: 4px;
+}
+.vx-form-group input[type=file].error:focus {
+  box-shadow: 0 0 5px rgba(211, 30, 30, 0.27);
+}
+.vx-form-group input[type=file]:disabled {
+  background: #F1F1F1;
+  cursor: not-allowed;
+}
+.vx-form-group select {
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #DBDBDB;
+  background: #FFFFFF;
+  outline: none;
+  padding: 8px 16px;
+  line-height: 20px;
+  font-size: 12px;
+  color: #747576;
+  font-weight: 400;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+}
+.vx-form-group select:focus {
+  border-color: #1E5DD3;
+  box-shadow: 0 0 5px rgba(30, 93, 211, 0.27);
+}
+.vx-form-group select.error {
+  border-color: #EB2424;
+  color: #EB2424;
+  margin-bottom: 4px;
+}
+.vx-form-group select.error:focus {
+  box-shadow: 0 0 5px rgba(211, 30, 30, 0.27);
+}
+.vx-form-group.lg label.vx-control-panel {
+  font-size: 16px;
+}
+.vx-form-group.lg input[type=text] {
+  height: 48px;
+  line-height: 28px;
+  font-size: 16px;
+}
+.vx-form-group.lg select {
+  height: 48px;
+  line-height: 28px;
+  font-size: 16px;
+}
+.vx-form-group.lg input[type=file] {
+  height: 48px;
+  line-height: 28px;
+  font-size: 16px;
+  padding: 9px 16px;
+}
+.vx-form-group.sm label.vx-control-panel {
+  font-size: 10px;
+}
+.vx-form-group.sm input[type=text] {
+  height: 32px;
+  line-height: 12px;
+  font-size: 12px;
+}
+.vx-form-group.sm select {
+  height: 32px;
+  line-height: 12px;
+  font-size: 12px;
+}
+.vx-form-group.sm input[type=file] {
+  height: 32px;
+  line-height: 12px;
+  font-size: 12px;
+  padding: 5px 16px;
+}
+.vx-form-group .select-list {
+  position: absolute;
+  background: #FFFFFF;
+  box-shadow: 0 0 5px #1e5dd3;
+  top: 100%;
+  right: 0;
+  left: 0;
+  z-index: 2;
+}
+.vx-form-group .select-list .vx-radio-group label.vx-radio-item {
+  width: 100%;
+  padding: 12px 16px;
+}
+.vx-form-group .select-list .vx-radio-group label.vx-radio-item:hover {
+  background: #f8f8f8;
+}
+.vx-form-group .checkbox-group {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+.vx-form-group .checkbox-group li {
+  list-style: none;
+  display: block;
+  padding: 4px 8px;
+}
+.vx-form-group .checkbox-group.ver {
+  display: flex;
+  flex-wrap: wrap;
+}
+.vx-form-group .checkbox-group.ver li {
+  width: auto;
+}
+.vx-form-group .selected {
+  height: 40px;
+  border-radius: 4px;
+  border: 1px solid #F1F1F1;
+  background: #FBFBFB;
+  outline: none;
+  padding: 8px;
+  line-height: 20px;
+  font-size: 14px;
+  color: #747576;
+  font-weight: 400;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+}
+.vx-form-group .selected .chip-container {
+  display: flex;
+  width: calc(100% - 52px);
+  align-items: center;
+}
+.vx-form-group .selected .chip-container span.chip {
+  background: #FFFFFF;
+  border-radius: 2px;
+  box-shadow: 0px 0px 3px #1E5DD31A;
+  height: 24px;
+  padding: 0 8px;
+  color: #1E5DD3;
+  font-size: 12px;
+  display: block;
+  width: auto;
+  max-width: 100%;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 24px;
+}
+.vx-form-group .selected .chip-container span.chip i {
+  font-weight: 400;
+  margin-right: 8px;
+  cursor: pointer;
+  font-size: 10px;
+}
+.vx-form-group .selected .chip-container span.chip + span.chip {
+  margin-left: 4px;
+}
+.vx-form-group .selected button.count {
+  background: #1E5DD3;
+  border-radius: 2px;
+  height: 24px;
+  padding: 2px 8px;
+  border: 1px solid #1E5DD3;
+  cursor: pointer;
+  outline: none;
+  color: #FFFFFF;
+  font: 13px;
+  font-weight: 500;
+  margin-left: 4px;
+  line-height: 20px;
+}
+.vx-form-group .selected button.edit {
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  background: #FFFFFF;
+  outline: none;
+  cursor: pointer;
+  display: block;
+  height: 24px;
+  padding: 0 5px 0 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #1E5DD3;
+  text-transform: uppercase;
+}
+.vx-form-group .selected button.edit i {
+  font-weight: 400;
+  font-size: 8px;
+  margin-right: 4px;
+}
+.vx-form-group .selected .workflow-label {
+  min-width: 92px;
+  padding: 4px;
+  text-align: center;
+  margin-left: -8px;
+  margin-right: 8px;
+  border-right: 1px solid #F1F1F1;
+}
+.vx-form-group .selected .workflow-label p {
+  margin: 0;
+  display: block;
+  text-transform: uppercase;
+}
+.vx-form-group .selected .workflow-label p.title {
+  font-size: 9px;
+  line-height: 12px;
+  color: #161B2F;
+  font-weight: 500;
+}
+.vx-form-group .selected .workflow-label p.description {
+  font-size: 11px;
+  line-height: 16px;
+  color: #161B2F;
+  font-weight: 600;
+}
+.vx-form-group .custom-filed {
+  position: relative;
+}
+.vx-form-group .custom-filed input {
+  padding-right: 24px;
+}
+.vx-form-group .custom-filed button.remove {
+  position: absolute;
+  z-index: 1;
+  top: calc(50% - 4px);
+  right: 12px;
+  font-size: 8px;
+  color: #EE3939;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+}
+label {
+  max-width: 600px;
+}
+label.vx-radio-item {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  margin: 0;
+  padding: 0 10px 0 0;
+  max-width: 100%;
+}
+label.vx-radio-item.readonly {
+  pointer-events: none;
+}
+label.vx-radio-item span {
+  display: inline-flex;
+  align-items: center;
+}
+label.vx-radio-item span.radio {
+  background: #fff;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  border: 1px solid #DBDBDB;
+  position: relative;
+  padding: 5px;
+  margin-top: 0px;
+}
+label.vx-radio-item span.radio .inner {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background: #FFFFFF;
+  display: none;
+}
+label.vx-radio-item span.value {
+  color: #4E4E4E;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 400;
+  margin-left: 10px;
+  max-width: calc(100% - 26px);
+}
+label.vx-radio-item span.value:empty {
+  display: none;
+}
+label.vx-radio-item svg {
+  display: none;
+  margin-top: 0px;
+}
+label.vx-radio-item input[type=radio] {
+  display: none;
+}
+label.vx-radio-item input[type=radio]:checked + span.radio {
+  display: none;
+}
+label.vx-radio-item input[type=radio]:checked ~ svg {
+  display: block;
+}
+label.vx-radio-item input[type=radio]:disabled ~ * {
+  opacity: 0.7;
+}
+.vx-radio-group {
+  display: flex;
+}
+.vx-radio-group.ver {
+  display: block;
+}
+.vx-radio-group.ver label.vx-radio-item {
+  display: flex;
+  padding: 8px 12px;
+}
+.radiomark {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  stroke-width: 4;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  box-shadow: inset 0px 0px 0px #34AA44;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+.radiomark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #34AA44;
+  fill: none;
+  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+.radiomark__check {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  stroke-width: 10;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scale {
+  0%,
+  100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #34AA44;
+  }
+}
+.vx-slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 5px;
+  background: #F1F1F1;
+  outline: none;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  border-radius: 4px;
+  margin: 0;
+}
+.vx-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 15px;
+  height: 15px;
+  background: #1E5DD3;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+}
+.vx-slider::-moz-range-thumb {
+  width: 15px;
+  height: 15px;
+  background: #1E5DD3;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+}
+.vx-slider.sm::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+}
+.vx-slider.sm::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+}
+.vx-slider.lg::-webkit-slider-thumb {
+  width: 30px;
+  height: 30px;
+}
+.vx-slider.lg::-moz-range-thumb {
+  width: 30px;
+  height: 30px;
+}
+.vx-slider:disabled::-webkit-slider-thumb {
+  background: #747576;
+}
+.vx-slider:disabled::-moz-range-thumb {
+  background: #747576;
+}
+label.vx-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+label.vx-switch.top {
+  align-items: flex-start;
+}
+label.vx-switch span.value {
+  font-size: 12px;
+  color: #161b2f;
+  font-weight: 400;
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 35px);
+  align-items: flex-start;
+}
+label.vx-switch span.switch {
+  position: relative;
+  display: block;
+  width: 25px;
+  height: 14px;
+  margin-left: 8px;
+}
+label.vx-switch span.switch input {
+  position: absolute;
+  opacity: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  cursor: pointer;
+}
+label.vx-switch span.switch input:checked + span.switch-box {
+  background: #34AA44;
+  border: 1px solid #34AA44;
+}
+label.vx-switch span.switch input:checked + span.switch-box .switch-ball {
+  left: 13px;
+}
+label.vx-switch span.switch input:disabled {
+  pointer-events: none;
+}
+label.vx-switch span.switch input:disabled + .switch-box {
+  opacity: 0.5;
+}
+label.vx-switch span.switch-box {
+  height: 100%;
+  width: 100%;
+  border-radius: 11px;
+  background: #BCBCBC;
+  border: 1px solid #BCBCBC;
+  display: block;
+  transition: all 0.2s ease-in-out;
+}
+label.vx-switch span.switch-ball {
+  height: 10px;
+  width: 10px;
+  background: #FFFFFF;
+  border-radius: 50%;
+  border: 1px solid #FFFFFF;
+  display: block;
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  bottom: 1px;
+  transition: all 0.2s ease-in-out;
+}
+label.vx-switch span.switch.blue input {
+  position: absolute;
+  opacity: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  cursor: pointer;
+}
+label.vx-switch span.switch.blue input:checked + span.switch-box {
+  background: #1E5DD3;
+  border: 1px solid #1E5DD3;
+}
+label.vx-switch span.switch.blue input:checked + span.switch-box .switch-ball {
+  left: 13px;
+}
+label.vx-switch span.switch.blue input:disabled {
+  pointer-events: none;
+}
+label.vx-switch span.switch.blue input:disabled + .switch-box {
+  opacity: 0.5;
+}
+label.vx-switch span.notification {
+  display: inline-flex;
+  font-size: 12px;
+  cursor: pointer;
+  color: #4681ef;
+  align-items: center;
+  line-height: 20px;
+  margin: 0 10px;
+}
+label.vx-switch.label span.value {
+  white-space: nowrap;
+}
+label.vx-switch.lg span.switch {
+  width: 40px;
+  min-width: 40px;
+  height: 20px;
+}
+label.vx-switch.lg span.switch input[type=checkbox]:checked + span.switch-box .switch-ball {
+  left: 22px;
+}
+label.vx-switch.lg span.switch-ball {
+  height: 16px;
+  width: 16px;
+}
+.vx-header.toggle .vx-header-top {
+  transition: all 0.2s ease-in-out;
+  left: 60px;
+}
+.vx-header-top {
+  background: #282E48;
+  height: 48px;
+  position: sticky;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  padding-right: 12px;
+  transition: all 0.2s ease-in-out;
+}
+.vx-header-bottom {
+  position: relative;
+}
+.vx-header-bottom h1 {
+  position: relative;
+}
+.vx-header-bottom:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 100px;
+  content: "";
+  background: #161B2F;
+}
+.vx-search-block {
+  padding: 6px 12px;
+  position: relative;
+  width: 350px;
+  transition: all 0.3s ease-in-out;
+}
+.vx-search-block input[type=text] {
+  background: transparent;
+  height: 32px;
+  line-height: 16px;
+  padding: 8px 8px 8px 28px;
+  font-size: 12px;
+  color: #FFFFFF;
+  font-weight: 300;
+  width: 100%;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.3s ease-in-out;
+  outline: none;
+}
+.vx-search-block i {
+  color: #DBDBDB;
+  font-size: 14px;
+  position: absolute;
+  cursor: pointer;
+  left: 12px;
+  top: 16px;
+  z-index: 1;
+}
+.vx-search-block:focus-within {
+  width: 412px;
+  transition: all 0.3s ease-in-out;
+}
+.vx-search-block:focus-within input[type=text] {
+  border-color: #F1F1F1;
+}
+.vx-quick-block {
+  display: flex;
+  width: auto;
+  align-items: center;
+}
+.vx-quick-column {
+  display: flex;
+  width: auto;
+  position: relative;
+}
+.vx-quick-column button.top {
+  width: 30px;
+  height: 30px;
+  color: #FFFFFF;
+  justify-content: center;
+  border: 4px solid #161B2F;
+  border-radius: 50%;
+  font-size: 17px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  background: #1E5DD3;
+  line-height: 16px;
+}
+.vx-quick-column button.top.plus {
+  font-size: 17px;
+}
+.vx-quick-column button.top.notification {
+  background: #E28F19;
+  font-size: 12px;
+}
+.vx-quick-column button.top.notification span.counter {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 9px;
+  color: #FFFFFF;
+  background: #161b2f;
+  border: 1px solid #282E48;
+  height: 18px;
+  min-width: 18px;
+  border-radius: 20px;
+  position: absolute;
+  left: 14px;
+  top: -8px;
+  line-height: 10px;
+  padding: 0 4px;
+}
+.vx-quick-column button.more {
+  color: #FFFFFF;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  background: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 20px;
+}
+.vx-quick-column.plus.toggle button {
+  transition: all 0.2s ease-in-out;
+  transform: rotate(45deg);
+}
+.vx-quick-column.notification {
+  margin-left: 24px;
+}
+.vx-quick-column.notification span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 11px;
+  color: #FFFFFF;
+  background: #EE3939;
+  border: 1px solid #282e48;
+  height: 22px;
+  min-width: 22px;
+  border-radius: 22px;
+  position: absolute;
+  left: 16px;
+  top: -1px;
+  line-height: 10px;
+  padding: 0 4px;
+}
+.vx-quick-column.user {
+  margin-left: 24px;
+}
+.vx-quick-column.user img,
+.vx-quick-column.user span.small-user {
+  height: 22px;
+  width: 22px;
+  border-radius: 50%;
+  background: #4681ef;
+  color: #FFFFFF;
+  font-size: 10px;
+  font-weight: 500;
+}
+.vx-tab-menu ul {
+  padding: 0;
+  margin: 0 -8px;
+  display: flex;
+  position: relative;
+}
+.vx-tab-menu ul li {
+  list-style: none;
+  display: block;
+  padding: 0 8px;
+}
+.vx-tab-menu ul li a {
+  line-height: 24px;
+  color: #FFFFFF;
+  display: block;
+  border-bottom: 2px solid transparent;
+  text-decoration: none;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 400;
+  cursor: pointer;
+}
+.vx-tab-menu ul li a.active {
+  border-color: #1E5DD3;
+}
+body {
+  margin: 0;
+  padding: 0px;
+  font-family: 'Poppins', sans-serif;
+}
+* {
+  box-sizing: border-box;
+}
+@font-face {
+  font-family: 'icon';
+  src: url('../../fonts/icon.eot?p42r08');
+  src: url('../../fonts/icon.eot?p42r08#iefix') format('embedded-opentype'), url('../../fonts/icon.ttf?p42r08') format('truetype'), url('../../fonts/icon.woff?p42r08') format('woff'), url('../../fonts/icon.svg?p42r08#icon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+.icons {
+  font-style: normal;
+  font-family: 'icon';
+}
+.icon-group {
+  width: calc(20% - 8px);
+  padding: 8px;
+  margin: 4px;
+  border-radius: 0.2px;
+  border: 1px solid #F1F1F1;
+}
+.icon-group i {
+  font-size: 20px;
+  margin-right: 12px;
+}
+.icon-group span.description {
+  position: relative;
+}
+.icon-group span.name {
+  font-size: 12px;
+  color: #161B2F;
+  line-height: 16px;
+  border-bottom: 1px solid #F1F1F1;
+  width: 100%;
+}
+.icon-group span.code {
+  font-size: 16px;
+  color: #747576;
+  width: 100%;
+}
+.vx-layout-left {
+  width: 280px;
+}
+.vx-layout-main-menu {
+  width: 48px;
+}
+.vx-layout-sub-menu {
+  width: 232px;
+}
+.vx-layout-right {
+  width: calc(100% - 280px);
+}
+.vx-main-menu {
+  width: 48px;
+  background: #161B2F;
+  position: relative;
+  z-index: 2;
+  height: 100vh;
+}
+.vx-main-menu ul {
+  position: relative;
+  height: 100%;
+}
+.vx-main-menu ul li {
+  list-style: none;
+}
+.vx-main-menu ul li a {
+  text-decoration: none;
+  color: #FFFFFF;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+}
+.vx-main-menu ul li a:hover {
+  color: #1E5DD3;
+}
+.vx-main-menu ul li a[data-title]:hover::before,
+.vx-main-menu ul li a[data-title].hover::before,
+.vx-main-menu ul li a[data-title]:hover::after,
+.vx-main-menu ul li a[data-title].hover::after {
+  display: block;
+}
+.vx-main-menu ul li a:before {
+  position: absolute;
+  left: 100%;
+  content: "";
+  border-top: 4px solid transparent;
+  border-right: 4px solid #000000;
+  border-bottom: 4px solid transparent;
+  top: calc(50% - 3px);
+  -webkit-animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  display: none;
+}
+.vx-main-menu ul li a:after {
+  content: attr(data-title);
+  position: absolute;
+  left: calc(100% + 4px);
+  background: #000000;
+  -webkit-animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: animate-right 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  color: #FFFFFF;
+  font-size: 12px;
+  white-space: nowrap;
+  padding: 0 12px;
+  border-radius: 2px;
+  top: calc(50% - 16px);
+  line-height: 32px;
+  display: none;
+}
+.vx-main-menu ul li.active a {
+  color: #1E5DD3;
+}
+.vx-main-menu ul li:first-child a {
+  background: #1F253A;
+  height: 48px;
+}
+.vx-main-menu ul li:last-of-type {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+@-webkit-keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@keyframes animate-right {
+  0% {
+    -webkit-transform: translateX(10px);
+    transform: translateX(10px);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+.vx-sub-menu {
+  width: 232px;
+  height: 100%;
+  position: relative;
+  margin-left: 0;
+  background: #FFFFFF;
+  transition: all 0.2s ease-in-out;
+  padding: 0;
+}
+.vx-sub-menu.toggle {
+  margin-left: -220px;
+  transition: all 0.2s ease-in-out;
+}
+.vx-sub-menu.toggle ul,
+.vx-sub-menu.toggle .vx-bottom-section {
+  opacity: 0;
+  pointer-events: none;
+}
+.vx-sub-menu.toggle.hoverable:hover {
+  margin-left: 0;
+}
+.vx-sub-menu.toggle.hoverable:hover ul,
+.vx-sub-menu.toggle.hoverable:hover .vx-bottom-section {
+  opacity: 1;
+  pointer-events: all;
+}
+.vx-sub-menu.toggle.hoverable button.vx-toggle-menu {
+  opacity: 0;
+}
+.vx-sub-menu h3.vx-title {
+  font-size: 14px;
+  border-bottom: 1px solid #F1F1F1;
+  padding: 0;
+  margin-bottom: 20px;
+}
+.vx-sub-menu h3.vx-title span {
+  display: block;
+  height: 16px;
+  width: 2px;
+  margin-right: 8px;
+}
+.vx-sub-menu ul {
+  box-shadow: 0 8px 8px rgba(30, 93, 210, 0.25);
+  height: calc(100vh - 69px);
+  overflow: auto;
+  padding: 0 12px;
+}
+.vx-sub-menu ul li {
+  list-style: none;
+  display: flex;
+  border-bottom: 1px solid #F1F1F1;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.vx-sub-menu ul li a {
+  text-decoration: none;
+  line-height: 40px;
+  font-size: 12px;
+  color: #707070;
+  height: 40px;
+  cursor: pointer;
+  width: 100%;
+}
+.vx-sub-menu ul li a:hover,
+.vx-sub-menu ul li a.active {
+  color: #1E5DD3;
+}
+.vx-sub-menu ul li a.parent {
+  color: #161B2F;
+}
+.vx-sub-menu ul li img {
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  border-radius: 50%;
+  border: 1px solid #F1F1F1;
+}
+.vx-sub-menu ul li ul {
+  padding-left: 0;
+  width: 100%;
+  box-shadow: none;
+  height: auto;
+}
+.vx-sub-menu ul li ul li a {
+  padding-left: 12px !important;
+  position: relative;
+}
+.vx-sub-menu ul li ul li a:before {
+  font-family: 'icon';
+  content: '\e910';
+  position: absolute;
+  left: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  font-size: 8px;
+}
+.vx-sub-menu .vx-bottom-section {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.vx-sub-menu .vx-bottom-section button {
+  background: #1E5DD3;
+  border: none;
+  color: #FFFFFF;
+  font-size: 16px;
+  padding: 0 12px;
+  height: 44px;
+  width: 100%;
+  cursor: pointer;
+}
+.vx-sub-menu .vx-bottom-section button i {
+  margin-right: 8px;
+}
+.vx-sub-menu button.vx-toggle-menu {
+  border: none;
+  font-size: 12px;
+  display: flex;
+  position: absolute;
+  height: 44px;
+  line-height: 44px;
+  width: 30px;
+  justify-content: center;
+  align-items: center;
+  top: 25px;
+  cursor: pointer;
+  transition: 0.3s ease-in-out;
+  z-index: 3;
+  outline: none;
+  right: -19px;
+  color: #fff;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  background: transparent;
+}
+.vx-sub-menu button.vx-toggle-menu:before {
+  background: #282e48;
+  /* Old browsers */
+  background: -moz-linear-gradient(top, #282e48 0%, #282e48 50%, #161b2f 50%, #161b2f 100%);
+  /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, #282e48 0%, #282e48 50%, #161b2f 50%, #161b2f 100%);
+  /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, #282e48 0%, #282e48 50%, #161b2f 50%, #161b2f 100%);
+  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282e48', endColorstr='#161b2f', GradientType=0);
+  /* IE6-9 */
+  transform: rotate(0deg);
+  -webkit-mask: url(https://s3.amazonaws.com/cdn.v-comply.com/design-system/images/open-arrow-left.svg) no-repeat;
+  mask: url(https://s3.amazonaws.com/cdn.v-comply.com/design-system/images/open-arrow-left.svg) no-repeat;
+  -webkit-mask-position: left;
+  mask-position: left;
+  -webkit-mask-size: auto 100%;
+  mask-size: auto 100%;
+  content: '';
+  position: absolute;
+  top: 2px;
+  right: 0;
+  bottom: 0;
+  left: 3px;
+}
+@-moz-document url-prefix() {
+  .vx-sub-menu button.vx-toggle-menu:before {
+    top: -2px !important;
+  }
+}
+.vx-sub-menu button.vx-toggle-menu i {
+  position: relative;
+  top: 0.6px;
+}
+@-moz-document url-prefix() {
+  .vx-sub-menu button.vx-toggle-menu i {
+    top: -1px !important;
+  }
+}
+.vx-sub-menu button.vx-toggle-menu.toggle {
+  -webkit-transform: scale(-1);
+  transform: scale(-1);
+  width: 30px;
+}
+.vx-sub-menu button.vx-toggle-menu.toggle:before {
+  background: #ffffff;
+}
+.vx-sub-menu button.vx-toggle-menu.toggle i {
+  position: relative;
+}
+.vx-sub-menu:hover button.vx-toggle-menu i {
+  animation: jello-collapsed 1s 1;
+}
+@keyframes arrow-move-before {
+  0% {
+    left: 30%;
+    top: 10%;
+    transform: rotate(45deg);
+  }
+  50% {
+    left: 50%;
+    top: 10%;
+    transform: rotate(0);
+  }
+  100% {
+    left: 50%;
+    top: 10%;
+    transform: rotate(-45deg);
+  }
+}
+@keyframes arrow-move-after {
+  0% {
+    left: 30%;
+    bottom: 10%;
+    transform: rotate(-45deg);
+  }
+  50% {
+    left: 30%;
+    bottom: 10%;
+    transform: rotate(0deg);
+  }
+  100% {
+    left: 50%;
+    bottom: 10%;
+    transform: rotate(45deg);
+  }
+}
+@keyframes arrow-move-before-toggle {
+  0% {
+    left: 50%;
+    top: 10%;
+    transform: rotate(-45deg);
+  }
+  50% {
+    left: 50%;
+    top: 10%;
+    transform: rotate(0);
+  }
+  100% {
+    left: 30%;
+    top: 10%;
+    transform: rotate(45deg);
+  }
+}
+@keyframes arrow-move-after-toggle {
+  0% {
+    left: 50%;
+    bottom: 10%;
+    transform: rotate(45deg);
+  }
+  50% {
+    left: 30%;
+    bottom: 10%;
+    transform: rotate(0deg);
+  }
+  100% {
+    left: 30%;
+    bottom: 10%;
+    transform: rotate(-45deg);
+  }
+}
+@keyframes jello-collapsed {
+  0% {
+    right: 0;
+  }
+  50% {
+    right: 3px;
+  }
+  100% {
+    right: 0;
+  }
+}
+ul.no-list li {
+  list-style: none;
+}
+.vx-v-loader {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: transparent;
+}
+.vx-v-loader-container {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  margin-left: 0;
+  padding: 2px;
+  border-radius: 20px;
+  box-sizing: border-box;
+}
+.vx-v-loader-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+}
+.vx-v-loader-inner svg {
+  position: relative;
+}
+.vx-v-loader-colored-blocks {
+  overflow: hidden;
+  position: absolute;
+  left: 0%;
+  top: 0;
+  width: 60px;
+  height: 60px;
+  margin-left: 0;
+  padding: 2px;
+  box-sizing: border-box;
+  border-radius: 20px;
+  -webkit-perspective: 1000px;
+  perspective: 1000px;
+  -webkit-animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite;
+  animation: demoAnim 4s ease-in-out infinite, contAnim 4s infinite;
+}
+.vx-v-loader-colored-blocks-rotater {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 60px;
+  height: 60px;
+  box-sizing: border-box;
+  border-radius: inherit;
+}
+.vx-v-loader-colored-blocks-inner {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  background: #ffffff;
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+.vx-v-loader-colored-block {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 300%;
+  height: 300%;
+  box-sizing: border-box;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+.vx-v-loader-colored-block:nth-child(1) {
+  -webkit-transform: rotate(45deg) skewX(37deg);
+  transform: rotate(45deg) skewX(37deg);
+  background-color: #4681ef;
+}
+.vx-v-loader-colored-block:nth-child(2) {
+  -webkit-transform: rotate(97deg) skewX(32deg);
+  transform: rotate(97deg) skewX(32deg);
+  background-color: #66bf72;
+}
+.vx-v-loader-colored-block:nth-child(3) {
+  -webkit-transform: rotate(154deg) skewX(26deg);
+  transform: rotate(154deg) skewX(26deg);
+  background-color: #8c81f5;
+}
+.vx-v-loader-colored-block:nth-child(4) {
+  -webkit-transform: rotate(-22deg) skewX(22deg);
+  transform: rotate(-22deg) skewX(22deg);
+  background-color: #e75151;
+}
+.vx-v-loader-colored-block:nth-child(5) {
+  -webkit-transform: rotate(218deg) skewX(24deg);
+  transform: rotate(218deg) skewX(24deg);
+  background-color: #f5a05b;
+}
+.vx-v-loader-colored-block:nth-child(6) {
+  -webkit-transform: rotate(282deg) skewX(33deg);
+  transform: rotate(282deg) skewX(33deg);
+  background-color: #f4c84a;
+}
+@-webkit-keyframes contAnim {
+  15%,
+  100% {
+    margin-left: 0;
+    width: 60px;
+  }
+  25%,
+  90% {
+    margin-left: 0;
+    width: 60px;
+  }
+}
+@keyframes contAnim {
+  15%,
+  100% {
+    margin-left: 0;
+    width: 60px;
+  }
+  25%,
+  90% {
+    margin-left: 0;
+    width: 60px;
+  }
+}
+@-webkit-keyframes demoAnim {
+  15% {
+    border-radius: 20px;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  30%,
+  43% {
+    border-radius: 50%;
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  52%,
+  65% {
+    border-radius: 0;
+    -webkit-transform: rotate(720deg);
+    transform: rotate(720deg);
+  }
+  78%,
+  90% {
+    border-radius: 50%;
+    -webkit-transform: rotate(1080deg);
+    transform: rotate(1080deg);
+  }
+  100% {
+    border-radius: 20px;
+    -webkit-transform: rotate(1440deg);
+    transform: rotate(1440deg);
+  }
+}
+@keyframes demoAnim {
+  15% {
+    border-radius: 20px;
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  30%,
+  43% {
+    border-radius: 50%;
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+  52%,
+  65% {
+    border-radius: 0;
+    -webkit-transform: rotate(720deg);
+    transform: rotate(720deg);
+  }
+  78%,
+  90% {
+    border-radius: 50%;
+    -webkit-transform: rotate(1080deg);
+    transform: rotate(1080deg);
+  }
+  100% {
+    border-radius: 20px;
+    -webkit-transform: rotate(1440deg);
+    transform: rotate(1440deg);
+  }
+}
+.vx-mb-0 {
+  margin-bottom: 0 !important;
+}
+.vx-mb-1 {
+  margin-bottom: 4px !important;
+}
+.vx-mb-2 {
+  margin-bottom: 8px !important;
+}
+.vx-mb-3 {
+  margin-bottom: 12px !important;
+}
+.vx-mb-4 {
+  margin-bottom: 16px !important;
+}
+.vx-mb-5 {
+  margin-bottom: 20px !important;
+}
+.vx-ml-0 {
+  margin-left: 0 !important;
+}
+.vx-ml-1 {
+  margin-left: 4px !important;
+}
+.vx-ml-2 {
+  margin-left: 8px !important;
+}
+.vx-ml-3 {
+  margin-left: 12px !important;
+}
+.vx-ml-4 {
+  margin-left: 16px !important;
+}
+.vx-ml-5 {
+  margin-left: 20px !important;
+}
+.vx-mr-0 {
+  margin-right: 0 !important;
+}
+.vx-mr-1 {
+  margin-right: 4px !important;
+}
+.vx-mr-2 {
+  margin-right: 8px !important;
+}
+.vx-mr-3 {
+  margin-right: 12px !important;
+}
+.vx-mr-4 {
+  margin-right: 16px !important;
+}
+.vx-mr-5 {
+  margin-right: 20px !important;
+}
+.vx-mr-6 {
+  margin-right: 24px !important;
+}
+.vx-mr-7 {
+  margin-right: 28px !important;
+}
+.vx-mr-8 {
+  margin-right: 32px !important;
+}
+.vx-mr-9 {
+  margin-right: 36px !important;
+}
+.vx-mr-10 {
+  margin-right: 40px !important;
+}
+.vx-mt-0 {
+  margin-top: 0 !important;
+}
+.vx-mt-1 {
+  margin-top: 4px !important;
+}
+.vx-mt-2 {
+  margin-top: 8px !important;
+}
+.vx-mt-3 {
+  margin-top: 12px !important;
+}
+.vx-mt-4 {
+  margin-top: 16px !important;
+}
+.vx-mt-5 {
+  margin-top: 20px !important;
+}
+.vx-m-0 {
+  margin: 0 !important;
+}
+.vx-m-1 {
+  margin: 4px !important;
+}
+.vx-m-2 {
+  margin: 8px !important;
+}
+.vx-m-3 {
+  margin: 12px !important;
+}
+.vx-m-4 {
+  margin: 16px !important;
+}
+.vx-m-5 {
+  margin: 20px !important;
+}
+.vx-no-data-wrapper {
+  height: 100%;
+  width: 100%;
+  background: #fff;
+  border-radius: 4px;
+}
+.vx-no-data-container {
+  width: 450px;
+}
+.vx-no-data-container .image {
+  width: 250px;
+  margin-bottom: 20px;
+}
+.vx-no-data-container p.text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-bottom: 24px;
+  color: #161B2F;
+  text-align: center;
+  margin-top: 0;
+}
+.vx-no-data-container p.text strong {
+  font-weight: 500;
+}
+.vx-no-data-container .button-row button.small i {
+  margin-right: 4px;
+  font-size: 10px;
+}
+h3.heading {
+  font-size: 20px;
+  margin-top: 10px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
+.vx-p-0 {
+  padding: 0 !important;
+}
+.vx-p-1 {
+  padding: 4px !important;
+}
+.vx-p-2 {
+  padding: 8px !important;
+}
+.vx-p-3 {
+  padding: 12px !important;
+}
+.vx-p-4 {
+  padding: 16px !important;
+}
+.vx-p-5 {
+  padding: 20px !important;
+}
+ul.vx-pagination {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 12px 0 0;
+  justify-content: flex-end;
+}
+ul.vx-pagination li {
+  list-style: none;
+  display: block;
+}
+ul.vx-pagination li + li {
+  margin-left: 3px;
+}
+ul.vx-pagination li button {
+  border: 1px solid #BCBCBC;
+  background: #FFFFFF;
+  border-radius: 2px;
+  color: #161B2F;
+  font-weight: 400;
+  height: 20px;
+  min-width: 20px;
+  padding: 0 7px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-size: 12px;
+  line-height: 18px;
+}
+ul.vx-pagination li button.active,
+ul.vx-pagination li button:hover {
+  border-color: #1E5DD3;
+  background: #1E5DD3;
+  color: #FFFFFF;
+}
+ul.vx-pagination li button.disabled {
+  filter: grayscale(100%);
+  pointer-events: none;
+  opacity: 1;
+  color: unset !important;
+  border: 1px solid #bcbcbc;
+}
+ul.vx-pagination li button.disable {
+  pointer-events: none;
+}
+ul.vx-pagination li button i {
+  font-size: 8px;
+  width: 13px;
+  height: 13px;
+  line-height: 13px;
+}
+.vx-pagination-container {
+  display: flex;
+}
+.vx-pagination-container .vx-go-to-page {
+  margin: 12px 0 0 8px;
+  display: flex;
+}
+.vx-pagination-container .vx-go-to-page ul {
+  padding: 0;
+  margin: 0;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination {
+  display: flex;
+  align-items: flex-start;
+  border: 1px solid #BCBCBC;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li {
+  list-style: none;
+  display: block;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li span {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  border-radius: 0;
+  border: none;
+  color: #161B2F;
+  background: #FFFFFF;
+  font-size: 10px;
+  height: 18px;
+  min-width: 20px;
+  padding: 0 4px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  text-transform: uppercase;
+  border-radius: 0;
+  border: none;
+  color: #161B2F;
+  background: #FFFFFF;
+  font-size: 8px;
+  height: 18px;
+  min-width: 20px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li button.enter {
+  background: #F1F1F1;
+  color: #1E5DD3;
+  font-size: 10px;
+  padding: 0 4px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li input {
+  height: 18px;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  background: #FFFFFF;
+  width: 72px;
+  font-size: 10px;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li:first-of-type {
+  border-right: 1px solid #BCBCBC;
+}
+.vx-pagination-container .vx-go-to-page ul.vx-go-pagination li:last-of-type {
+  border-left: 1px solid #BCBCBC;
+}
+.vx-panel {
+  display: block;
+}
+.vx-panel + .vx-panel {
+  margin-top: 10px;
+}
+.vx-panel-head {
+  display: flex;
+  padding: 0 4px 0 12px;
+  margin: 0;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #DCDCDC;
+}
+.vx-panel-head .title {
+  padding: 0;
+  margin: 0;
+  color: #161B2F;
+  line-height: 40px;
+}
+.vx-panel-head .action {
+  width: auto;
+}
+.vx-panel-body {
+  padding: 8px12px;
+  display: block;
+  background: #FFFFFF;
+  transition: height 0.35s ease;
+}
+.vx-panel-footer {
+  background: #FBFBFB;
+  border-top: 1px solid #F1F1F1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 48px;
+  padding: 12px;
+}
+.vx-panel.active {
+  border-color: #1E5DD3 !important;
+}
+.vx-panel.active .vx-panel-head {
+  border-bottom-color: #1E5DD3;
+}
+.vx-panel.default .vx-panel-head {
+  background: #FBFBFB;
+}
+.vx-panel.accordionItem.close .vx-panel-body {
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+.vx-panel.accordionItem.open .vx-panel-body {
+  height: auto;
+}
+.vx-panel.accordionItem.open .accordionItemHeading .action button i {
+  transform: rotate(90deg);
+  transition: height 0.35s ease;
+}
+.vx-panel.vx-lg .vx-panel-head .title {
+  line-height: 48px;
+  font-size: 16px;
+}
+.vx-panel.vx-lg .vx-panel-body {
+  padding: 12px 20px;
+}
+.vx-accordion-group .vx-panel {
+  margin: 0;
+}
+.vx-popover {
+  width: 220px;
+  box-shadow: 0px 3px 6px #1c5bd140;
+}
+.vx-popover ul.popover-items {
+  padding: 0;
+  margin: 0;
+  display: block;
+  -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  background: #FFFFFF;
+  box-shadow: 0 3px 6px rgba(28, 91, 209, 0.25);
+  border-radius: 4px;
+  max-height: 220px;
+  overflow: auto;
+}
+.vx-popover ul.popover-items li {
+  list-style: none;
+  border: none;
+  border-bottom: 1px solid #F1F1F1;
+  display: block;
+  width: 100%;
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+  margin: 0;
+  height: auto;
+  justify-content: flex-start;
+  box-shadow: none;
+}
+.vx-popover ul.popover-items li button {
+  color: #747576;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  font-size: 12px;
+  text-transform: capitalize;
+  display: flex;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  margin: 0;
+}
+.vx-popover ul.popover-items li button i {
+  font-size: 17px;
+  margin-right: 10px;
+  color: #1E5DD3;
+}
+.vx-popover ul.popover-items li button:hover {
+  background: #F1F1F1;
+}
+.vx-popover ul.popover-items li .avatar-card {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px;
+}
+.vx-popover ul.popover-items li .avatar-card.within-con {
+  display: block;
+}
+.vx-popover ul.popover-items li .avatar-card .avatar {
+  height: 24px;
+  width: 24px !important;
+  overflow: hidden;
+  background: #1E5DD3;
+  color: #FFFFFF;
+  font-size: 10px;
+  display: inline-flex;
+  margin-right: 4px;
+  border-radius: 50%;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+}
+.vx-popover ul.popover-items li .avatar-card .avatar img {
+  width: 100%;
+}
+.vx-popover ul.popover-items li .avatar-card .avatar + span.value {
+  width: calc(100% - 28px);
+}
+.vx-popover ul.popover-items li .avatar-card span.value {
+  width: 100%;
+  color: #6E717E;
+  text-decoration: none;
+  background: transparent;
+  font-size: 12px;
+  text-transform: capitalize;
+  display: block;
+  font-weight: 400;
+  text-align-last: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 20px;
+}
+.vx-popover ul.popover-items li .avatar-card span.value i {
+  font-size: 8px;
+  color: #1C5BD1;
+  cursor: pointer;
+  margin-right: 4px;
+}
+.vx-popover ul.popover-items li .avatar-card.no-image {
+  display: block;
+}
+.vx-popover ul.popover-items li .avatar-card.no-image span.value {
+  width: 100%;
+  display: block;
+}
+.vx-popover ul.popover-items li .chip-item {
+  color: #1E5DD3;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+}
+.vx-popover ul.popover-items li .chip-item i {
+  margin-right: 8px;
+  font-size: 10px;
+  cursor: pointer;
+  display: inline-flex;
+}
+.vx-popover ul.popover-items li .chip-item span {
+  display: block;
+  width: auto;
+  max-width: calc(100% - 16px);
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vx-popover ul.popover-items li .chip-item span.chip-block {
+  display: block;
+  width: 100%;
+}
+.vx-popover ul.popover-items li .chip-item span.id {
+  font-size: 8px;
+}
+.vx-popover ul.popover-items li .within {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.vx-popover ul.popover-items li .within .block {
+  background: #F1F1F1;
+  border-radius: 2px;
+  padding: 0 2px;
+  line-height: 14px;
+  font-size: 10px;
+  font-weight: 500;
+  color: #042E7D;
+  margin-right: 6px;
+  display: block;
+  text-transform: uppercase;
+}
+.vx-popover ul.popover-items li .within .data {
+  width: 100%;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #747576;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 17px;
+}
+.vx-popover ul.popover-items li:first-child {
+  animation: action-list-open 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(2) {
+  animation: action-list-open 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(3) {
+  animation: action-list-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(4) {
+  animation: action-list-open 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(5) {
+  animation: action-list-open 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(6) {
+  animation: action-list-open 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(7) {
+  animation: action-list-open 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(8) {
+  animation: action-list-open 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(9) {
+  animation: action-list-open 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.vx-popover ul.popover-items li:nth-child(10) {
+  animation: action-list-open 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+@-webkit-keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes scale-up-center {
+  0% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes action-list-open {
+  0% {
+    -webkit-transform: translateY(50px);
+    transform: translateY(50px);
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
+.vx-quick-links {
+  background: #fff;
+  border-top: 4px solid #1E5DD3;
+  border-radius: 5px;
+  position: absolute;
+  transition: all 0.5s ease-in-out;
+  width: 328px;
+  top: calc(100% + 12px);
+  box-shadow: 0 0 10px rgba(30, 93, 211, 0.27);
+  right: -72px;
+  z-index: 2;
+  padding: 0;
+}
+.vx-quick-links:before {
+  border-bottom: 8px solid #1E5DD3;
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  right: 52px;
+  top: -10px;
+}
+.vx-quick-links ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.vx-quick-links ul li {
+  border-bottom: 1px solid #F1F1F1;
+}
+.vx-quick-links ul li a {
+  padding: 12px;
+  text-decoration: none;
+  align-items: center;
+  display: flex;
+}
+.vx-quick-links ul li a span {
+  display: block;
+}
+.vx-quick-links ul li a span.icon {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  background: #F1F1F1;
+}
+.vx-quick-links ul li a span.icon img {
+  width: 36px;
+  height: 36px;
+}
+.vx-quick-links ul li a span.text span.title {
+  font-size: 14px;
+  color: #161B2F;
+  margin: 0;
+  font-weight: 500;
+  text-transform: uppercase;
+  transition: all 0.2s ease-in-out;
+}
+.vx-quick-links ul li a span.text span.paragraph {
+  font-size: 12px;
+  color: #161B2F;
+  transition: all 0.2s ease-in-out;
+  margin: 0;
+  font-weight: 400;
+}
+.vx-quick-links ul li:hover a span.text span.title,
+.vx-quick-links ul li:hover a span.text span.paragraph {
+  color: #1E5DD3;
+}
+.vx-quick-links ul li:last-child {
+  border-bottom: none;
+}
+.vx-smiley-popup {
+  background: #d93b41;
+  position: relative;
+}
+.vx-smiley-popup::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  background: #fff;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition-delay: 1s;
+  border-top-right-radius: 0;
+  transition: all 0.3s ease-in-out;
+}
+.vx-smiley-popup.with-close::before {
+  border-top-right-radius: 180px;
+}
+.vx-smiley-popup button.close {
+  color: #fff;
+  font-size: 22px;
+  position: absolute;
+  top: 14px;
+  right: 20px;
+  z-index: 10;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.vx-smiley-container {
+  width: 550px;
+  position: relative;
+  z-index: 10;
+}
+.vx-smiley-container .vx-smiley {
+  display: block;
+  width: 550px;
+  height: 250px;
+  overflow: hidden;
+  position: relative;
+  -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  animation: slide-fwd-center 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
+  margin: 0 auto 24px;
+}
+.vx-smiley-container .vx-smiley::before {
+  position: absolute;
+  background: #ffedc5;
+  width: 110px;
+  height: 110px;
+  content: "";
+  border-radius: 50%;
+  top: 100px;
+  right: 92px;
+}
+.vx-smiley-container .vx-smiley::after {
+  position: absolute;
+  background: #ffbf15;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  content: "";
+  top: 200px;
+  left: 92px;
+}
+.vx-smiley-container .vx-smiley-circle {
+  background: #ffd83d;
+  border-radius: 100%;
+  padding: 24px;
+  position: relative;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  box-shadow: inset -20px -14px 0 #f4c337;
+}
+.vx-smiley-container .vx-smiley-circle::before {
+  width: 24px;
+  height: 4px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 116px;
+  left: -66px;
+}
+.vx-smiley-container .vx-smiley-circle::after {
+  width: 4px;
+  height: 24px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 108px;
+  left: -56px;
+}
+.vx-smiley-container .vx-smiley-circle-inner {
+  height: 182px;
+  width: 100%;
+  margin: 0 auto;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes {
+  width: 164px;
+  margin: 40px auto 0;
+  box-sizing: border-box;
+  padding: 0 4px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes::before {
+  width: 4px;
+  height: 20px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 0;
+  right: -20px;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes::after {
+  width: 20px;
+  height: 4px;
+  background: #ffbf15;
+  position: absolute;
+  content: "";
+  top: 8px;
+  right: -28px;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye {
+  width: 40px;
+  height: 40px;
+  background: #404549;
+  float: left;
+  border-radius: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  content: "";
+  background: #ffe9b0;
+  border-radius: 50%;
+  top: 8px;
+  left: 1px;
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye::after {
+  display: block;
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  background: #fed800;
+  transform: rotate(0deg);
+  top: -16px;
+  left: 4px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle-inner .eyes .eye:nth-of-type(2) {
+  float: right;
+}
+.vx-smiley-container .vx-smiley-circle-inner .mouth {
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+  height: 76px;
+  width: 150px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #404549;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle-inner .mouth::before {
+  width: 94px;
+  height: 94px;
+  position: absolute;
+  opacity: 0;
+  bottom: -508px;
+  left: -6px;
+  background: #ffd83d;
+  content: "";
+  border-radius: 46px;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container .vx-smiley-circle.happy .eyes .eye {
+  height: 40px;
+  margin-top: 0;
+  animation: wink 3s infinite;
+}
+.vx-smiley-container .vx-smiley-circle.happy .mouth {
+  animation: move-mouth-down 0.3s;
+  animation-delay: 0.3s;
+  animation-fill-mode: forwards;
+}
+.vx-smiley-container .vx-smiley-circle.sad .eyes .eye {
+  animation: wink2 3s infinite;
+}
+.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner {
+  animation: move-angry-head 0.6s;
+  animation-delay: 0.3s;
+  animation-fill-mode: forwards;
+}
+.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth {
+  width: 96px;
+  height: 50px;
+  border-top-left-radius: 100px;
+  border-top-right-radius: 100px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  top: 60px;
+}
+.vx-smiley-container .vx-smiley-circle.sad .vx-smiley-circle-inner .mouth::before {
+  background: #ffd83d;
+  content: "";
+  bottom: -66px;
+  left: 0;
+  opacity: 1;
+  transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.vx-smiley-container h3 {
+  font-size: 26px;
+  color: #161b2f;
+  font-weight: 400;
+  margin: 0 0 40px;
+}
+.vx-smiley-container .successSmilyButton button {
+  width: 280px;
+}
+@-webkit-keyframes slide-fwd-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes slide-fwd-center {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@keyframes move-mouth-down {
+  0% {
+    border-top-left-radius: 100px;
+    border-top-right-radius: 100px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    height: 10%;
+    width: 40%;
+    bottom: 25%;
+    margin: 0 auto;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 18%;
+    left: 0;
+    right: 0;
+    background: #404549;
+    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  100% {
+    width: 60%;
+    height: 30%;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 18%;
+    background: #404549;
+    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+}
+@keyframes wink {
+  0% {
+    height: 40px;
+    margin-top: 0;
+  }
+  10% {
+    height: 40px;
+    margin-top: 0;
+  }
+  15% {
+    height: 4px;
+    margin-top: 18px;
+  }
+  20% {
+    height: 40px;
+    margin-top: 0;
+  }
+  100% {
+    height: 40px;
+    margin-top: 0;
+  }
+}
+@keyframes wink2 {
+  0% {
+    height: 40px;
+    margin-top: 0;
+  }
+  10% {
+    height: 40px;
+    margin-top: 0;
+  }
+  15% {
+    height: 4px;
+    margin-top: 18px;
+  }
+  20% {
+    height: 40px;
+    margin-top: 0;
+  }
+  100% {
+    height: 40px;
+    margin-top: 0;
+  }
+}
+@keyframes move-angry-head {
+  0% {
+    transform: translateX(0%);
+  }
+  20% {
+    transform: translateX(-20%);
+  }
+  40% {
+    transform: translateX(15%);
+  }
+  60% {
+    transform: translateX(-10%);
+  }
+  80% {
+    transform: translateX(5%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+h3.heading {
+  font-size: 20px;
+  margin-top: 10px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
+.vx-snack-bar {
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: block;
+  margin: 24px;
+  max-width: 33vw;
+  min-width: 344px;
+  padding: 14px 16px;
+  min-height: 48px;
+  transform-origin: center;
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+.vx-snack-bar-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+}
+.vx-snack-bar-overlay.top-center {
+  justify-content: center;
+  align-items: flex-start;
+}
+.vx-snack-bar-overlay.top-left {
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.vx-snack-bar-overlay.top-right {
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.vx-snack-bar-overlay.bottom-center {
+  justify-content: center;
+  align-items: flex-end;
+}
+.vx-snack-bar-overlay.bottom-left {
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+.vx-snack-bar-overlay.bottom-right {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+.vx-snack-bar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 20px;
+}
+.vx-snack-bar-text {
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  font-weight: 400;
+}
+.vx-snack-bar-action button {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  color: #F6882F;
+}
+.vx-snack-bar.light {
+  background: #FFFFFF;
+  color: #161B2F;
+}
+.vx-snack-bar.dark {
+  background: #161B2F;
+  color: #FFFFFF;
+}
+table.vx-table {
+  border-collapse: separate;
+  border-spacing: 0 4px;
+  width: 100%;
+}
+table.vx-table thead tr th {
+  font-size: 11px;
+  padding: 12px 10px;
+  background: #f1f1f1;
+  text-transform: uppercase;
+  color: #747576;
+  font-weight: 600;
+  line-height: 14px;
+  text-align: left;
+  font-weight: 400;
+  white-space: nowrap;
+  z-index: 2;
+  position: relative;
+}
+table.vx-table thead tr th:first-child {
+  border-radius: 2px 0 0 0;
+  text-align: center;
+  width: 44px;
+  padding: 0 12px;
+}
+table.vx-table thead tr th:last-child {
+  border-radius: 0 2px 0 0;
+  text-align: right;
+  width: 44px;
+}
+table.vx-table thead tr th:last-child::before {
+  border-radius: 0 2px 0 0;
+}
+table.vx-table thead tr th span.resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+  cursor: ew-resize;
+  background: #747576;
+  outline: none;
+}
+table.vx-table thead tr th span.resizer:focus {
+  background: #161B2F;
+}
+table.vx-table tbody tr td {
+  font-size: 11px;
+  padding: 4px 10px;
+  background: #FFFFFF;
+  text-transform: uppercase;
+  color: #747576;
+  font-weight: 600;
+  line-height: 14px;
+  text-align: left;
+  font-weight: 400;
+  white-space: nowrap;
+  z-index: 2;
+  height: 55px;
+}
+table.vx-table tbody tr td:first-child {
+  border-radius: 2px 0 0 2px;
+  text-align: center;
+  width: 44px;
+  padding: 0 12px;
+}
+table.vx-table tbody tr td:last-child {
+  border-radius: 0 2px 2px 0;
+  text-align: right;
+  width: 44px;
+}
+table.vx-table tbody tr td button.action {
+  height: 100%;
+  align-items: center;
+}
+table.vx-table tbody tr td button.action:hover:before {
+  opacity: 0.03;
+}
+table.vx-table tbody tr td button.action.expaned i {
+  transform: rotate(90deg);
+}
+table.vx-table tbody tr td span {
+  height: 100%;
+}
+table.vx-table tbody tr td span.sl-no {
+  height: calc(100% + 6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F1F1F1;
+  color: #707070;
+  font-size: 10px;
+  writing-mode: vertical-lr;
+}
+table.vx-table tbody tr td .vx-avatar-group {
+  width: 60px;
+}
+table.vx-table tbody tr td .description button {
+  background: transparent;
+  border: none;
+  color: #1E5DD3;
+  font-size: 12px;
+  line-height: 16px;
+  width: 100%;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+}
+table.vx-table tbody tr td .description label {
+  font-size: 10px;
+  line-height: 16px;
+  color: #747576;
+  width: 100%;
+  cursor: text;
+}
+table.vx-table tbody tr.selected td:first-child {
+  position: relative;
+}
+table.vx-table tbody tr.selected td:first-child:before {
+  background: #34aa44;
+  border-radius: 2px 0 0 2px;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+}
+table.vx-table tbody tr.selected td span.sl {
+  display: none;
+}
+table.vx-table tbody tr.selected td label.vx-checkbox-item {
+  display: flex;
+  margin-top: -2px;
+  margin-left: 4px;
+}
+table.vx-table tbody tr:hover {
+  box-shadow: 0 0 15px rgba(30, 93, 211, 0.35);
+  z-index: 2;
+  position: relative;
+}
+table.vx-table tbody.childRow {
+  display: none;
+}
+table.vx-table tbody.childRow.active {
+  display: table-row-group;
+}
+table.vx-table tr:hover span.sl {
+  display: none;
+}
+table.vx-table tr:hover label.vx-checkbox-item {
+  display: flex;
+  margin-top: 0px;
+  margin-left: 0px;
+}
+table.vx-table span.sl {
+  display: inline-block;
+}
+table.vx-table label.vx-checkbox-item {
+  display: none;
+}
+table.vx-table.shorting thead tr th i {
+  float: right;
+  cursor: pointer;
+}
+table.vx-table.fix-header thead tr th {
+  position: sticky;
+  top: 4px;
+}
+table.vx-table.fix-header thead tr th:before {
+  content: "";
+  height: 4px;
+  position: absolute;
+  top: -4px;
+  right: 0;
+  left: 0;
+  background: #F1F1F1;
+}
+table.vx-table.fix-header thead tr th:first-child:before {
+  border-radius: 2px 0 0 0;
+}
+table.vx-table.fix-header thead tr th:last-child:before {
+  border-radius: 0 2px 0 0;
+}
+.vx-title-text {
+  line-height: 32px;
+  font-weight: 200;
+}
+.vx-sub-heading-text {
+  line-height: 24px;
+  font-weight: 400;
+  margin: 0;
+  display: block;
+}
+.vx-sub-sub-heading-text {
+  line-height: 20px;
+  font-weight: 500;
+  color: #161B2F;
+}
+.vx-label-text {
+  font-weight: 500;
+  line-height: 20px;
+  color: #161B2F;
+}
+.vx-paragraph-text {
+  line-height: 16px;
+  color: #747576;
+  font-weight: 400;
+}
+.vx-table-card-text {
+  line-height: 16px;
+  color: #747576;
+  font-weight: 500;
+}
+.vx-table-heading-text {
+  line-height: 14px;
+  color: #747576;
+  font-weight: 400;
+}
+.vx-table-text {
+  line-height: 14px;
+  color: #161B2F;
+}
+.vx-fs-title {
+  font-size: 24px;
+}
+.vx-fs-sub-title {
+  font-size: 16px;
+}
+.vx-fs-sub-sub-title {
+  font-size: 12px;
+}
+.vx-fs-sub-label-text {
+  font-size: 10px;
+}
+.vx-fs-paragraph {
+  font-size: 14px;
+}
+.vx-fs-small-paragraph {
+  font-size: 10px;
+}
+.vx-fs-table-card {
+  font-size: 12px;
+}
+.vx-fs-table-heading {
+  font-size: 12px;
+}
+.vx-fs-table-text {
+  font-size: 12px;
+}
+.vx-tt-capitalize {
+  text-transform: capitalize;
+}
+.vx-tt-uppercase {
+  text-transform: uppercase;
+}
+.vx-tt-none {
+  text-transform: none;
+}
+.vx-fw-300 {
+  font-weight: 300;
+}
+.vx-fw-400 {
+  font-weight: 400;
+}
+.vx-fw-500 {
+  font-weight: 500;
+}
+.vx-fw-600 {
+  font-weight: 600;
+}
+.vx-fw-700 {
+  font-weight: 700;
+}
+.vx-txt-error {
+  font-size: 10px;
+  color: #EB2424;
+  margin: 4px 0 0 0;
+  line-height: 16px;
+}
+.vx-fs-2 {
+  font-size: 8px;
+}
+.vx-fs-3 {
+  font-size: 12px;
+}
+.vx-fs-4 {
+  font-size: 16px;
+}
+.vx-fs-5 {
+  font-size: 20px;
+}
+.vx-fs-6 {
+  font-size: 24px;
+}
+.vx-lh-3 {
+  line-height: 12px;
+}
+.vx-lh-4 {
+  line-height: 16px;
+}
+.vx-lh-5 {
+  line-height: 20px;
+}
+.vx-lh-6 {
+  line-height: 24px;
+}
+.vx-lh-7 {
+  line-height: 28px;
+}
+.vx-lh-8 {
+  line-height: 32px;
+}
+.vx-lh-9 {
+  line-height: 36px;
+}
+.vx-lh-10 {
+  line-height: 40px;
+}
+.vx-lh-11 {
+  line-height: 44px;
+}
+.vx-lh-12 {
+  line-height: 48px;
+}
+.vx-lh-13 {
+  line-height: 52px;
+}
+.vx-lh-14 {
+  line-height: 56px;
+}
+.vx-lh-15 {
+  line-height: 60px;
+}
+.vx-user-panel {
+  background: #FFFFFF;
+  padding: 0;
+  border-radius: 4px;
+  width: 300px;
+  transition: none;
+  box-shadow: 0 0 10px #000000;
+  overflow: hidden;
+}
+.vx-user-panel-top {
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.vx-user-panel-top .user {
+  width: 80px;
+  height: 80px;
+  margin-right: 4px;
+  min-width: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.vx-user-panel-top .user img {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.vx-user-panel-top .user span.user {
+  height: 100%;
+  width: 100%;
+  font-size: 18px;
+  background: #1E5DD3;
+  color: #FFFFFF;
+  text-transform: uppercase;
+  border-radius: 50%;
+  font-weight: 600;
+}
+.vx-user-panel-top .user-details {
+  width: calc(100% - 84px);
+  display: block;
+}
+.vx-user-panel-top .user-details .name {
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: capitalize;
+  margin: 0;
+  line-height: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.vx-user-panel-top .user-details .email {
+  font-size: 10px;
+  line-height: 16px;
+  color: #747576;
+  display: block;
+  font-weight: 400;
+  margin: 0;
+  width: 170px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vx-user-panel-bottom {
+  position: relative;
+}
+.vx-user-panel-bottom ul {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+.vx-user-panel-bottom ul li {
+  font-size: 12px;
+  border-bottom: 1px solid #F1F1F1;
+  display: flex;
+  padding: 10px 20px 10px 35px;
+  position: relative;
+}
+.vx-user-panel-bottom ul li:before {
+  background: #1E5DD3;
+  content: "";
+  position: absolute;
+  left: 10px;
+  top: 13px;
+  width: 1px;
+  height: 10px;
+}
+.vx-user-panel-bottom ul li span {
+  display: block;
+  width: 50%;
+}
+.vx-user-panel-bottom ul li span strong {
+  color: #161B2F;
+  font-weight: 500;
+  display: block;
+  text-transform: uppercase;
+}
+.vx-user-panel-bottom ul li span.active {
+  color: #34AA44;
+}
+.vx-user-panel-bottom ul li span.expaired {
+  color: #EB2424;
+}
+.vx-user-panel-action {
+  padding: 14px 0;
+}
+.vx-w-100 {
+  width: 100% !important;
+}
+.vx-w-50 {
+  width: 50% !important;
+}
+.vx-w-30 {
+  width: 30% !important;
+}
+.vx-w-oneandhalf-col {
+  width: calc(100% / 1.5) !important;
+}
+.vx-w-three-col {
+  width: calc(100% / 3) !important;
+}
+.vx-w-four-col {
+  width: calc(100% / 4) !important;
+}
+.vx-w-five-col {
+  width: calc(100% / 5) !important;
+}
+.vx-w-six-col {
+  width: calc(100% / 6) !important;
+}
+.vx-w-seven-col {
+  width: calc(100% / 7) !important;
+}
+.vx-w-eight-col {
+  width: calc(100% / 8) !important;
+}
+.vx-w-nine-col {
+  width: calc(100% / 9) !important;
+}
+.vx-w-ten-col {
+  width: calc(100% / 10) !important;
+}