at the end of the day, it was inevitable

frontend/app/styles/utils/_animate.scss

@@ -0,0 +1,234 @@
+@import "../../../node_modules/animate-sass/helpers/mixins";
+@import "../../../node_modules/animate-sass/helpers/settings";
+@import "../../../node_modules/animate-sass/helpers/base";
+
+$base-duration              : .2s;
+
+
+$use-all                    :   false; // all animations status
+$use-fade               :   $use-all; // all fades
+$use-bounce             :   $use-all; // all bounces
+$use-rotate             :   $use-all; // all rotates
+$use-slide              :   $use-all; // all slide animations
+$use-flipers            :   $use-all; // all flip animations
+$use-light-speed        :   $use-all; // all light speed animations
+$use-attention-seekers  :   $use-all; // all attention seeker animations
+$use-special            :   $use-all; // all special animations
+$use-zoom               :   $use-all; // all zoom animations
+
+// Fade Enter
+$use-fade-in            :   $use-fade;
+$use-fadeIn 			:	$use-fade-in;
+$use-fadeInUp 			:	$use-fade-in;
+$use-fadeInUpBig 		:	$use-fade-in;
+$use-fadeInDown 		:	$use-fade-in;
+$use-fadeInDownBig 		:	$use-fade-in;
+$use-fadeInLeft 		:	$use-fade-in;
+$use-fadeInLeftBig 		:	$use-fade-in;
+$use-fadeInRight 		:	$use-fade-in;
+$use-fadeInRightBig 	:	$use-fade-in;
+
+// Fade Exit
+$use-fade-out           :   $use-fade;
+$use-fadeOut			:   $use-fade-out;
+$use-fadeOutUp			:	$use-fade-out;
+$use-fadeOutUpBig   	:	$use-fade-out;
+$use-fadeOutDown		:	$use-fade-out;
+$use-fadeOutDownBig 	:	$use-fade-out;
+$use-fadeOutLeft		:	$use-fade-out;
+$use-fadeOutLeftBig 	:	$use-fade-out;
+$use-fadeOutRight		:	$use-fade-out;
+$use-fadeOutRightBig	:	$use-fade-out;
+
+// Bounce Enter
+$use-bounce-in          :   $use-bounce;
+$use-bounceIn			:	$use-bounce-in;
+$use-bounceInUp			: 	$use-bounce-in;
+$use-bounceInDown 		: 	$use-bounce-in;
+$use-bounceInLeft 		: 	$use-bounce-in;
+$use-bounceInRight 		: 	$use-bounce-in;
+
+// Bounce Exit
+$use-bounce-out         :   $use-bounce;
+$use-bounceOut			:	$use-bounce-out;
+$use-bounceOutUp		: 	$use-bounce-out;
+$use-bounceOutDown 		: 	$use-bounce-out;
+$use-bounceOutLeft 		: 	$use-bounce-out;
+$use-bounceOutRight 	: 	$use-bounce-out;
+
+// Rotate Enter
+$use-rotate-in          :   $use-rotate;
+$use-rotateIn 			:	$use-rotate-in;
+$use-rotateInUpLeft 	: 	$use-rotate-in;
+$use-rotateInUpRight 	: 	$use-rotate-in;
+$use-rotateInDownLeft 	: 	$use-rotate-in;
+$use-rotateInDownRight 	: 	$use-rotate-in;
+
+// Rotate Exit
+$use-rotate-out         :   $use-rotate;
+$use-rotateOut 			:	$use-rotate-out;
+$use-rotateOutUpLeft 	: 	$use-rotate-out;
+$use-rotateOutUpRight 	: 	$use-rotate-out;
+$use-rotateOutDownLeft 	: 	$use-rotate-out;
+$use-rotateOutDownRight : 	$use-rotate-out;
+
+// Slide Enter
+$use-slide-in           :   $use-slide;
+$use-slideIn			:   $use-slide-in;
+$use-slideInUp			:   $use-slide-in;
+$use-slideInDown		:   $use-slide-in;
+$use-slideInLeft		:   $use-slide-in;
+$use-slideInRight		:   $use-slide-in;
+
+// Slide Exit
+$use-slide-out          :   $use-slide;
+$use-slideOut			:   $use-slide-out;
+$use-slideOutUp			:   $use-slide-out;
+$use-slideOutDown		:   $use-slide-out;
+$use-slideOutLeft		:   $use-slide-out;
+$use-slideOutRight		:   $use-slide-out;
+
+// Flippers
+$use-flip				:	$use-flipers;
+$use-flipInX			:	$use-flipers;
+$use-flipInY			:	$use-flipers;
+$use-flipOutX			:	$use-flipers;
+$use-flipOutY			:	$use-flipers;
+
+// Lightspeed
+$use-lightSpeedIn 		:	$use-light-speed;
+$use-lightSpeedOut 		:	$use-light-speed;
+
+// Attention Seekers
+$use-bounce				:	$use-attention-seekers;
+$use-flash				:	$use-attention-seekers;
+$use-pulse				:	$use-attention-seekers;
+$use-wiggle				:	$use-attention-seekers;
+$use-swing				:	$use-attention-seekers;
+$use-shake				:	$use-attention-seekers;
+$use-tada				:	$use-attention-seekers;
+$use-wobble				:	$use-attention-seekers;
+
+// Special
+$use-hinge				:	$use-special;
+$use-rollIn				: 	$use-special;
+$use-rollOut 			:	$use-special;
+
+// Zoom In
+$use-zoom-in            :   $use-zoom;
+$use-zoomIn 			:	$use-zoom-in;
+$use-zoomInDown 		:	$use-zoom-in;
+$use-zoomInLeft 		:	$use-zoom-in;
+$use-zoomInRight 		:	$use-zoom-in;
+$use-zoomInUp 			:	$use-zoom-in;
+
+// Zoom Out
+$use-zoom-out           :   $use-zoom;
+$use-zoomOut			:	$use-zoom-out;
+$use-zoomOutDown		:	$use-zoom-out;
+$use-zoomOutLeft		:	$use-zoom-out;
+$use-zoomOutRight		:	$use-zoom-out;
+$use-zoomOutUp			:	$use-zoom-out;
+
+
+$use-fadeIn: true;
+$use-fadeOut: true;
+$use-fadeInDown: true;
+$use-fadeInUp: true;
+
+$use-lightSpeedIn: true;
+$use-lightSpeedOut: true;
+
+
+
+// ATTENTION
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/bounce";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/flash";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/pulse";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/shake";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/swing";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/wiggle";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/wobble";
+//@import "../../../../node_modules/animate-sass/animations/attention-seekers/tada";
+
+// BOUNCE
+//@import "../../../../node_modules/animate-sass/animations/bounce-enter/bounceIn";
+//@import "../../../../node_modules/animate-sass/animations/bounce-enter/bounceInDown";
+//@import "../../../../node_modules/animate-sass/animations/bounce-enter/bounceInLeft";
+//@import "../../../../node_modules/animate-sass/animations/bounce-enter/bounceInRight";
+//@import "../../../../node_modules/animate-sass/animations/bounce-enter/bounceInUp";
+//@import "../../../../node_modules/animate-sass/animations/bounce-exit/bounceOut";
+//@import "../../../../node_modules/animate-sass/animations/bounce-exit/bounceOutDown";
+//@import "../../../../node_modules/animate-sass/animations/bounce-exit/bounceOutLeft";
+//@import "../../../../node_modules/animate-sass/animations/bounce-exit/bounceOutRight";
+//@import "../../../../node_modules/animate-sass/animations/bounce-exit/bounceOutUp";
+
+// FADE
+@import "../../../node_modules/animate-sass/animations/fade-enter/fadeIn";
+@import "../../../node_modules/animate-sass/animations/fade-enter/fadeInDown";
+//@import "../../../../node_modules/animate-sass/animations/fade-enter/fadeInDownBig";
+//@import "../../../../node_modules/animate-sass/animations/fade-enter/fadeInLeft";
+//@import "../../../../node_modules/animate-sass/animations/fade-enter/fadeInLeftBig";
+//@import "../../../../node_modules/animate-sass/animations/fade-enter/fadeInRight";
+//@import "../../../../node_modules/animate-sass/animations/fade-enter/fadeInRightBig";
+@import "../../../node_modules/animate-sass/animations/fade-enter/fadeInUp";
+//@import "../../../../node_modules/animate-sass/animations/fade-enter/fadeInUpBig";
+@import "../../../node_modules/animate-sass/animations/fade-exit/fadeOut";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutDown";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutDownBig";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutLeft";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutLeftBig";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutRight";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutRightBig";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutUp";
+//@import "../../../../node_modules/animate-sass/animations/fade-exit/fadeOutUpBig";
+
+// FLIP
+//@import "../../../../node_modules/animate-sass/animations/flippers/flip";
+//@import "../../../../node_modules/animate-sass/animations/flippers/flipInX";
+//@import "../../../../node_modules/animate-sass/animations/flippers/flipInY";
+//@import "../../../../node_modules/animate-sass/animations/flippers/flipOutX";
+//@import "../../../../node_modules/animate-sass/animations/flippers/flipOutY";
+
+// LIGHTSPEED
+@import "../../../node_modules/animate-sass/animations/lightspeed/lightSpeedIn";
+@import "../../../node_modules/animate-sass/animations/lightspeed/lightSpeedOut";
+
+// ROTATE
+//@import "../../../../node_modules/animate-sass/animations/rotate-enter/rotateIn";
+//@import "../../../../node_modules/animate-sass/animations/rotate-enter/rotateInDownLeft";
+//@import "../../../../node_modules/animate-sass/animations/rotate-enter/rotateInDownRight";
+//@import "../../../../node_modules/animate-sass/animations/rotate-enter/rotateInUpLeft";
+//@import "../../../../node_modules/animate-sass/animations/rotate-enter/rotateInUpRight";
+//@import "../../../../node_modules/animate-sass/animations/rotate-exit/rotateOut";
+//@import "../../../../node_modules/animate-sass/animations/rotate-exit/rotateOutDownLeft";
+//@import "../../../../node_modules/animate-sass/animations/rotate-exit/rotateOutDownRight";
+//@import "../../../../node_modules/animate-sass/animations/rotate-exit/rotateOutUpLeft";
+//@import "../../../../node_modules/animate-sass/animations/rotate-exit/rotateOutUpRight";
+
+// SLIDE
+//@import "../../../../node_modules/animate-sass/animations/slide-enter/slideInDown";
+//@import "../../../../node_modules/animate-sass/animations/slide-enter/slideInLeft";
+//@import "../../../../node_modules/animate-sass/animations/slide-enter/slideInRight";
+//@import "../../../../node_modules/animate-sass/animations/slide-enter/slideInUp";
+//@import "../../../../node_modules/animate-sass/animations/slide-exit/slideOutDown";
+//@import "../../../../node_modules/animate-sass/animations/slide-exit/slideOutLeft";
+//@import "../../../../node_modules/animate-sass/animations/slide-exit/slideOutRight";
+//@import "../../../../node_modules/animate-sass/animations/slide-exit/slideOutUp";
+
+// SPECIAL
+//@import "../../../../node_modules/animate-sass/animations/special/hinge";
+//@import "../../../../node_modules/animate-sass/animations/special/rollIn";
+//@import "../../../../node_modules/animate-sass/animations/special/rollOut";
+
+// ZOOM
+//@import "../../../../node_modules/animate-sass/animations/zoom-enter/zoomIn";
+//@import "../../../../node_modules/animate-sass/animations/zoom-enter/zoomInDown";
+//@import "../../../../node_modules/animate-sass/animations/zoom-enter/zoomInLeft";
+//@import "../../../../node_modules/animate-sass/animations/zoom-enter/zoomInRight";
+//@import "../../../../node_modules/animate-sass/animations/zoom-enter/zoomInUp";
+//@import "../../../../node_modules/animate-sass/animations/zoom-exit/zoomOut";
+//@import "../../../../node_modules/animate-sass/animations/zoom-exit/zoomOutDown";
+//@import "../../../../node_modules/animate-sass/animations/zoom-exit/zoomOutLeft";
+//@import "../../../../node_modules/animate-sass/animations/zoom-exit/zoomOutRight";
+//@import "../../../../node_modules/animate-sass/animations/zoom-exit/zoomOutUp";

frontend/app/styles/utils/_backgrounds.scss

@@ -0,0 +1,110 @@
+// Gradients
+
+.bg-warm-flame {
+  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%) !important;
+}
+
+.bg-night-fade {
+  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%) !important;
+}
+
+.bg-sunny-morning {
+  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%) !important;
+}
+
+.bg-tempting-azure {
+  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%) !important;
+}
+
+.bg-amy-crisp {
+  background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%) !important;
+}
+
+.bg-heavy-rain {
+  background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%) !important;
+}
+
+.bg-mean-fruit {
+  background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%) !important;
+}
+
+.bg-malibu-beach {
+  background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
+}
+
+.bg-deep-blue {
+  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%) !important;
+}
+
+.bg-ripe-malin {
+  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%) !important;
+}
+
+.bg-arielle-smile {
+  background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%) !important;
+}
+
+.bg-plum-plate {
+  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+}
+
+.bg-happy-fisher {
+  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%) !important;
+}
+
+.bg-happy-itmeo {
+  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%) !important;
+}
+
+.bg-mixed-hopes {
+  background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%) !important;
+}
+
+.bg-strong-bliss {
+  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%) !important;
+}
+
+.bg-grow-early {
+  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%) !important;
+}
+
+.bg-love-kiss {
+  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%) !important;
+}
+
+.bg-premium-dark {
+  background-image: linear-gradient(to right, #434343 0%, black 100%) !important;
+}
+
+.bg-happy-green {
+  background-image: linear-gradient(to bottom, #00b09b, #96c93d) !important;
+}
+
+.bg-vicious-stance {
+  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%) !important;
+}
+
+.bg-midnight-bloom {
+  background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
+}
+
+.bg-night-sky {
+  background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%) !important;
+}
+
+.bg-slick-carbon {
+  background-image: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%) !important;
+  background-blend-mode: multiply;
+}
+
+.bg-royal {
+  background-image: linear-gradient(to right, #141e30, #243b55) !important;
+}
+
+.bg-asteroid {
+  background-image: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important;
+}
+
+.bg-transparent {
+  background: transparent !important;
+}

frontend/app/styles/utils/_comps-animations.scss

@@ -0,0 +1,46 @@
+// Common Comps Animations
+
+
+$base-duration					: .2s;
+$base-distance                  : 10px;
+$base-fill-mode					: both;
+
+// Dropdown Animation
+
+.dropdown-menu {
+  &.show {
+    animation: fade-in2 .2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  }
+}
+
+.popover {
+  &.show {
+    display: block;
+    animation: fade-in2 .2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+  }
+}
+
+.dropdown-menu {
+  &[data-placement^="top"].show {
+    animation: fade-in3 .2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+    bottom: auto !important;
+    top: auto !important;
+  }
+}
+
+@keyframes fade-in2 {
+  0% {
+    margin-top: -50px;
+    visibility: hidden;
+    opacity: 0;
+  }
+  100% {
+    margin-top: 0px;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.form-control {
+  transition: all .2s;
+}

frontend/app/styles/utils/_helpers.scss

@@ -0,0 +1,271 @@
+// Helpers imports
+@import "helpers/opacity";
+@import "helpers/grayscale";
+
+// Resets
+
+.br-tl {
+  border-top-left-radius: $border-radius !important;
+}
+
+.br-tr {
+  border-top-right-radius: $border-radius !important;
+}
+
+.br-bl {
+  border-bottom-left-radius: $border-radius !important;
+}
+
+.br-br {
+  border-bottom-right-radius: $border-radius !important;
+}
+
+.b-radius-0 {
+  border-radius: 0 !important;
+}
+
+.rm-border {
+  border-width: 0 !important;
+}
+
+.br-a {
+  @include border-radius($border-radius);
+}
+
+// Center Elements
+
+.margin-h-center {
+  margin-inline-start: auto !important;
+  margin-inline-end: auto !important;
+}
+
+.center-svg {
+  margin: 0 auto;
+
+  svg {
+    margin: 0 auto;
+  }
+}
+
+.apexcharts-canvas {
+  margin: 0 auto;
+}
+
+.apexcharts-donut {
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
+
+.alert-dismissible {
+  .close {
+    top: 0;
+    right: 5px;
+    padding: 5px;
+  }
+}
+
+// Gradient Icons
+
+.icon-gradient {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}
+
+// Font sizes
+
+.font-size-xlg {
+  font-size: 1.3rem !important;
+}
+
+.font-size-lg {
+  font-size: 1.1rem !important;
+}
+
+.font-size-md {
+  font-size: 0.9rem !important;
+}
+
+.font-size-sm {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+.font-size-xs {
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
+// No Shadow
+
+.no-shadow {
+  box-shadow: 0 0 0 transparent !important;
+}
+
+// Layout
+
+.h-100 {
+  height: 100vh !important;
+}
+
+.he-auto {
+  height: auto !important;
+}
+
+.he-100 {
+  height: 100%;
+}
+
+.h-sm {
+  height: 150px;
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+// Font size
+
+.fsize-1 {
+  font-size: 0.95rem !important;
+}
+
+.fsize-2 {
+  font-size: 1.3rem !important;
+}
+
+.fsize-3 {
+  font-size: 1.6rem !important;
+}
+
+.fsize-4 {
+  font-size: 2rem !important;
+}
+
+.z-index-0 {
+  z-index: 0 !important;
+}
+
+.z-index-6 {
+  z-index: 6;
+}
+
+.line-height-1 {
+  line-height: 1;
+}
+
+// Center element
+
+.center-elem {
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
+
+.flex2 {
+  flex: 2;
+}
+
+// Divider
+
+.divider {
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+  height: 1px;
+  overflow: hidden;
+  background: $gray-200;
+}
+
+.list-group-item:hover {
+  z-index: initial;
+}
+
+// No Results
+
+.no-results {
+  padding: ($spacer * 1.5);
+  text-align: center;
+
+  .results-title {
+    color: $gray-700;
+    font-size: $h5-font-size;
+  }
+
+  .results-subtitle {
+    color: $gray-500;
+    font-size: $font-size-lg;
+  }
+}
+
+// Background Color Animation
+
+.bg-animation {
+  animation: bg-pan-left 8s both;
+}
+
+@-webkit-keyframes bg-pan-left {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes bg-pan-left {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+// Width 100%
+
+.w-100 {
+  width: 100%;
+}
+
+.mb--2 {
+  margin-bottom: -1.5rem;
+}
+
+// Margins
+
+.mbg-3 {
+  margin-bottom: $grid-gutter-width;
+}
+
+// Loader
+
+.loader-container {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+  text-align: center;
+  line-height: 1.6rem;
+
+  .loader-container-inner {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0 1rem;
+  }
+
+  small {
+    margin: 10px 0 0;
+    display: block;
+    color: $gray-600;
+    font-weight: normal;
+  }
+
+  h3 {
+    text-align: center;
+    display: block;
+  }
+}

frontend/app/styles/utils/helpers/_grayscale.scss

@@ -0,0 +1,33 @@
+// Grayscale Filter
+
+.filter-grayscale-5 {
+  filter: grayscale(5%) !important;
+}
+
+.filter-grayscale-10 {
+  filter: grayscale(10%) !important;
+}
+
+.filter-grayscale-20 {
+  filter: grayscale(20%) !important;
+}
+
+.filter-grayscale-30 {
+  filter: grayscale(30%) !important;
+}
+
+.filter-grayscale-40 {
+  filter: grayscale(40%) !important;
+}
+
+.filter-grayscale-50 {
+  filter: grayscale(50%) !important;
+}
+
+.filter-grayscale-80 {
+  filter: grayscale(80%) !important;
+}
+
+.filter-grayscale-100 {
+  filter: grayscale(100%) !important;
+}

frontend/app/styles/utils/helpers/_opacity.scss

@@ -0,0 +1,82 @@
+
+// Opacity
+
+.opacity-01 {
+  opacity: .01 !important;
+}
+
+.opacity-02 {
+  opacity: .02 !important;
+}
+
+.opacity-03 {
+  opacity: .03 !important;
+}
+
+.opacity-04 {
+  opacity: .04 !important;
+}
+
+.opacity-05 {
+  opacity: .05 !important;
+}
+
+.opacity-06 {
+  opacity: .06 !important;
+}
+
+.opacity-07 {
+  opacity: .07 !important;
+}
+
+.opacity-08 {
+  opacity: .08 !important;
+}
+
+.opacity-09 {
+  opacity: .09 !important;
+}
+
+.opacity-1 {
+  opacity: .1 !important;
+}
+
+.opacity-15 {
+  opacity: .15 !important;
+}
+
+.opacity-2 {
+  opacity: .2 !important;
+}
+
+.opacity-3 {
+  opacity: .3 !important;
+}
+
+.opacity-4 {
+  opacity: .4 !important;
+}
+
+.opacity-5 {
+  opacity: .5 !important;
+}
+
+.opacity-6 {
+  opacity: .6 !important;
+}
+
+.opacity-7 {
+  opacity: .7 !important;
+}
+
+.opacity-8 {
+  opacity: .8 !important;
+}
+
+.opacity-9 {
+  opacity: .9 !important;
+}
+
+.opacity-10 {
+  opacity: 1 !important;
+}