@tekkare/auriga 0.1.0

package/dist/runtime/components/argStyle.vue

@@ -0,0 +1,975 @@
+<template></template>
+<script>
+export default {
+  name: "argStyle"
+};
+</script>
+<style>
+@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+:root {
+  --pure-white: #ffffff;
+
+  /* GREY SCALE */
+  --independence: #3e3f5e;
+  --cool-grey: #8f91ac;
+  --wild-blue-yonder: #afb0ca;
+  --lavendar-grey: #cdcede;
+  --more: #dedfe9;
+  --dividers: #eaeaf5;
+
+  /* PRIMARY */
+  --primary: #2176ff;
+  --primary-hover: #0966fb;
+  --primary-dark: #0056e0;
+  --primary-hover2: #0f44be;
+  --primary-light: #f4f8ff;
+
+  /* ACCENT */
+  --accent: #2176ff;
+  --accent-yellow: #ff981a;
+  --accent-hover: #0966fb;
+  --accent-hover-yellow: #e7860f;
+
+  /* SYSTEM */
+  --alert: #fb4654;
+  --system-alert: #ef4444;
+  --alert-hover: #d21616;
+  --warning: #fd9147;
+  --success: #32d175;
+  --system-success: #22c55e;
+
+  /* COMPLEMENTARY COLORS */
+  --red: #fc4229;
+  --orange: #fda929;
+  --yellow: #fed33e;
+  --lime: #98d92d;
+  --green: #45ca47;
+  --cyan: #3ad9d8;
+  --blue: #1dacfc;
+  --navy: #4475fb;
+  --purple: #a17def;
+  --pink: #f55a8d;
+
+  /* BACKGROUNDS */
+  --background: #f5f5f9;
+  --demi-fond: #f9f9fa;
+  --nested-table-bg: #eaeaf5;
+  --table-hover: #dddded;
+  --base-dividers: #ececf2;
+
+  /*SHADOWS*/
+  --container-shadow: 0px 0px 40px rgba(94, 92, 154, 0.06);
+  --overlay-shadow: 0px 0px 40px rgba(94, 92, 154, 0.12);
+  --button-small-shadow: 3px 5px 20px rgba(94, 92, 154, 0.1);
+  --button-big-shadow: 3px 5px 10px rgba(62, 63, 94, 0.2);
+  --primary-button-shadow: 4px 7px 12px rgba(33, 118, 255, 0.2);
+  --accent-button-shadow: 4px 7px 12px rgba(255, 152, 26, 0.2);
+
+  /*company colors*/
+  --rcd-purple: #6f35ef;
+}
+
+body {
+  font-family: "Figtree", sans-serif !important;
+  color: var(--independence);
+  background: var(--background);
+  margin: 0px;
+}
+a {
+  text-decoration: none;
+  font-family: "Figtree", sans-serif !important;
+}
+hr {
+  margin: 0;
+  background: var(--dividers) !important;
+  border: none;
+  box-shadow: none;
+  height: 1px;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  font-family: "Figtree", sans-serif !important;
+}
+button {
+  font-family: "Figtree", sans-serif !important;
+}
+.oip_container {
+  margin: 0 auto;
+  max-width: 1440px;
+}
+
+/*** TEXT ***/
+
+.oip_kpi_big {
+  color: var(--independence);
+  font-style: normal;
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 42px;
+}
+.oip_section_title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 26px;
+  line-height: 30px;
+  color: var(--independence);
+}
+.oip_title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 28px;
+  color: var(--independence);
+}
+.oip_kpi_small {
+  color: var(--independence);
+  font-style: normal;
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 26px;
+}
+.oip_heading {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 23px;
+  color: var(--independence);
+}
+.oip_subtitle {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--independence);
+}
+.oip_body_highlight {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 160%;
+  color: var(--accent-hover);
+}
+.oip_body {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 160%;
+  color: var(--independence);
+}
+.oip_label {
+  color: var(--wild-blue-yonder);
+  font-style: normal;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 14px;
+}
+.oip_filter_label {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--cool-grey);
+}
+.oip_caption {
+  color: var(--wild-blue-yonder);
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+}
+.oip_underline {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--independence);
+}
+
+/*** GRID ***/
+
+.oip_grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.oip_grid.xs-step {
+  gap: 4px;
+}
+.oip_grid.s-step {
+  gap: 8px;
+}
+.oip_grid.m-step {
+  gap: 16px;
+}
+.oip_grid.l-step {
+  gap: 36px;
+}
+.oip_grid.xl-step {
+  gap: 72px;
+}
+
+.oip_grid .oip_item {
+  flex-grow: 1;
+}
+/*** ROWS ***/
+.oip_row {
+  display: flex;
+  flex-direction: row;
+}
+/* Wraps*/
+.oip_row.wrap {
+  flex-wrap: wrap;
+}
+/*Aligning content horizontally*/
+.oip_row.centered {
+  justify-content: center;
+}
+.oip_row.start {
+  justify-content: flex-start;
+}
+.oip_row.end {
+  justify-content: flex-end;
+}
+.oip_row.space-between {
+  justify-content: space-between;
+}
+/*Vertical*/
+.oip_row.v-center {
+  align-items: center;
+}
+.oip_row.v-bottom {
+  align-items: flex-end;
+}
+/*Gaps*/
+.oip_row.gap-4 {
+  gap: 4px;
+}
+.oip_row.gap-8 {
+  gap: 8px;
+}
+.oip_row.gap-10 {
+  gap: 10px;
+}
+.oip_row.gap-12 {
+  gap: 12px;
+}
+.oip_row.gap-16 {
+  gap: 16px;
+}
+
+/** BUTTONS **/
+
+.oip_btn {
+  border-radius: 8px !important;
+  padding: 10px 20px !important;
+  outline: none !important;
+  cursor: pointer !important;
+  max-height: 16px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: relative;
+  font-style: normal !important;
+  font-weight: bold !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  width: fit-content;
+}
+
+.oip_primary_button {
+  background: var(--primary) !important;
+  border: 2px solid var(--primary) !important;
+  box-shadow: var(--primary-button-shadow) !important;
+  color: var(--pure-white) !important;
+}
+.oip_primary_button .oip_button_spinner div {
+  border: 2px solid var(--pure-white);
+  border-color: var(--pure-white) transparent transparent transparent;
+}
+
+.oip_primary_button:hover,
+.oip_primary_button:focus {
+  background: var(--primary-hover2) !important;
+  border: 2px solid var(--primary-hover2) !important;
+  box-shadow: none !important;
+  color: var(--pure-white) !important;
+}
+.oip_primary_button.is-disabled,
+.oip_primary_button.is-disabled:hover,
+.oip_primary_button.is-disabled:focus {
+  background: var(--more) !important;
+  border: 2px solid var(--more) !important;
+  box-shadow: none !important;
+  color: var(--cool-grey) !important;
+}
+
+.oip_primary_icon_button {
+  background: var(--primary) !important;
+  border: 2px solid var(--primary) !important;
+  box-shadow: var(--primary-button-shadow) !important;
+  color: var(--pure-white) !important;
+  padding: 10px !important;
+}
+
+.oip_primary_icon_button .oip_button_spinner div {
+  border: 2px solid var(--pure-white);
+  border-color: var(--pure-white) transparent transparent transparent;
+}
+.oip_primary_icon_button:hover,
+.oip_primary_icon_button:focus {
+  background: var(--primary-hover) !important;
+  border: 2px solid var(--primary-hover) !important;
+  box-shadow: var(--primary-button-shadow) !important;
+  color: var(--pure-white) !important;
+}
+
+.oip_secondary_button,
+.oip_secondary_button:hover,
+.oip_secondary_button:focus {
+  background: var(--pure-white) !important;
+  border: 2px solid var(--more) !important;
+  box-shadow: none !important;
+  color: var(--wild-blue-yonder) !important;
+}
+
+.oip_secondary_button .oip_button_spinner div,
+.oip_secondary_icon_button .oip_button_spinner div {
+  border: 2px solid var(--wild-blue-yonder);
+  border-color: var(--wild-blue-yonder) transparent transparent transparent;
+}
+
+.oip_secondary_icon_button,
+.oip_secondary_icon_button:hover,
+.oip_secondary_icon_button:focus {
+  background: var(--pure-white) !important;
+  border: 2px solid var(--more) !important;
+  box-shadow: none !important;
+  color: var(--wild-blue-yonder) !important;
+  padding: 10px !important;
+}
+
+.oip_terciary_button,
+.oip_dark_button,
+.oip_tertiary_button {
+  background: var(--independence) !important;
+  border: 2px solid var(--independence) !important;
+  box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
+  color: var(--pure-white) !important;
+}
+
+.oip_tertiary_button:hover,
+.oip_tertiary_button:focus,
+.oip_terciary_button:hover,
+.oip_terciary_button:focus,
+.oip_dark_button:hover,
+.oip_dark_button:focus,
+.oip_terciary_icon_button:hover,
+.oip_terciary_icon_button:focus,
+.oip_tertiary_icon_button:hover,
+.oip_tertiary_icon_button:focus,
+.oip_dark_icon_button:hover,
+.oip_dark_icon_button:focus {
+  background: #21223d !important;
+  border: 2px solid #21223d !important;
+  box-shadow: none !important;
+}
+
+.oip_tertiary_button .oip_button_spinner div,
+.oip_dark_button .oip_button_spinner div,
+.oip_tertiary_icon_button .oip_button_spinner div,
+.oip_dark_icon_button .oip_button_spinner div {
+  border: 2px solid var(--pure-white);
+  border-color: var(--pure-white) transparent transparent transparent;
+}
+
+.oip_terciary_icon_button,
+.oip_tertiary_icon_button,
+.oip_dark_icon_button {
+  background: var(--independence) !important;
+  border: 2px solid var(--independence) !important;
+  box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
+  color: var(--pure-white) !important;
+  padding: 10px !important;
+}
+
+.oip_disable_button,
+.oip_disable_button:hover,
+.oip_disable_button:focus {
+  background: var(--more) !important;
+  border: 2px solid var(--more) !important;
+  box-shadow: none !important;
+  color: var(--cool-grey) !important;
+}
+
+.oip_disable_icon_button,
+.oip_disable_icon_button:hover,
+.oip_disable_icon_button:focus {
+  background: var(--more) !important;
+  border: 2px solid var(--more) !important;
+  box-shadow: none !important;
+  color: var(--cool-grey) !important;
+}
+
+.el-button + .el-button {
+  margin-left: 0px !important;
+}
+.oip_skeleton_button {
+  background: transparent !important;
+  border: 2px solid rgba(62, 63, 94, 0.2) !important;
+  box-shadow: none !important;
+  color: var(--independence) !important;
+}
+
+.oip_skeleton_button:hover,
+.oip_skeleton_button:focus {
+  background: rgba(62, 63, 94, 0.05) !important;
+  border: 2px solid rgba(62, 63, 94, 0.2) !important;
+  box-shadow: none !important;
+  color: var(--independence) !important;
+}
+
+.oip_skeleton_button:hover .oip__button_prefix_icon,
+.oip_skeleton_button:focus .oip__button_prefix_icon,
+.oip_skeleton_button:hover .oip__button_suffix_icon,
+.oip_skeleton_button:focus .oip__button_suffix_icon {
+  stroke: var(--independence) !important;
+  color: var(--independence) !important;
+}
+.oip_skeleton_button .oip_button_spinner div,
+.oip_skeleton_icon_button .oip_button_spinner div {
+  border: 2px solid var(--independence);
+  border-color: var(--independence) transparent transparent transparent;
+}
+.oip_skeleton_icon_button {
+  background: transparent !important;
+  border: 2px solid rgba(62, 63, 94, 0.2) !important;
+  box-shadow: none !important;
+  color: var(--independence) !important;
+  padding: 10px !important;
+}
+
+.oip_skeleton_icon_button:hover,
+.oip_skeleton_icon_button:focus {
+  border: 2px solid rgba(33, 118, 255, 0.2) !important;
+}
+.oip_skeleton_icon_button:hover svg,
+.oip_skeleton_icon_buttonn:focus svg,
+.oip_skeleton_icon_button:hover svg,
+.oip_skeleton_icon_button:focus svg {
+  stroke: var(--primary) !important;
+  color: var(--primary) !important;
+}
+
+.oip_outlined_button {
+  background: transparent !important;
+  border: 2px solid rgba(33, 118, 255, 0.2) !important;
+  box-shadow: none !important;
+  color: var(--primary) !important;
+}
+
+.oip_outlined_button:hover,
+.oip_outlined_button:focus,
+.oip_outlined_icon_button:hover,
+.oip_outlined_icon_button:focus {
+  background: rgba(33, 118, 255, 0.05) !important;
+  color: var(--primary-hover2) !important;
+}
+.oip_outlined_button .oip_button_spinner div,
+.oip_outlined_icon_button .oip_button_spinner div {
+  border: 2px solid var(--primary);
+  border-color: var(--primary) transparent transparent transparent;
+}
+.oip_outlined_icon_button {
+  background: transparent !important;
+  border: 2px solid rgba(33, 118, 255, 0.2) !important;
+  box-shadow: none !important;
+  padding: 10px !important;
+  color: var(--primary) !important;
+}
+.oip_warning_button {
+  background: transparent !important;
+  border: 2px solid rgba(239, 68, 68, 0.2);
+  box-shadow: none !important;
+  color: var(--system-alert) !important;
+}
+.oip_warning_button:hover,
+.oip_warning_button:focus,
+.oip_warning_icon_button:hover,
+.oip_warning_icon_button:focus {
+  background: rgba(239, 68, 68, 0.2) !important;
+  border: 2px solid rgba(251, 70, 84, 0.2) !important;
+  color: var(--alert-hover) !important;
+}
+.oip_warning_button .oip_button_spinner div,
+.oip_warning_icon_button .oip_button_spinner div {
+  border: 2px solid var(--system-alert);
+  border-color: var(--system-alert) transparent transparent transparent;
+}
+.oip_warning_button:hover .oip_button_spinner div,
+.oip_warning_icon_button:hover .oip_button_spinner div {
+  border: 2px solid var(--alert-hover);
+  border-color: var(--alert-hover) transparent transparent transparent;
+}
+.oip_warning_button:hover .oip__button_prefix_icon,
+.oip_warning_button:focus .oip__button_prefix_icon,
+.oip_warning_button:hover .oip__button_suffix_icon,
+.oip_warning_button:focus .oip__button_suffix_icon {
+  stroke: var(--alert-hover) !important;
+  color: var(--alert-hover) !important;
+}
+.oip_warning_icon_button {
+  background: transparent !important;
+  border: 2px solid rgba(239, 68, 68, 0.2) !important;
+  box-shadow: none !important;
+  padding: 10px !important;
+  color: var(--system-alert) !important;
+}
+.oip_warning_icon_button:hover,
+.oip_warning_icon_button:hover {
+  border: 2px solid rgba(251, 70, 84, 0.2) !important;
+  color: var(--alert-hover) !important;
+}
+.oip_warning_icon_button:hover svg,
+.oip_warning_icon_button:hover svg {
+  stroke: var(--alert-hover) !important;
+  color: var(--alert-hover) !important;
+}
+.oip_red_button {
+  background: var(--system-alert) !important;
+  border: 2px solid rgba(239, 68, 68, 0.2);
+  box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
+  color: var(--pure-white) !important;
+}
+.oip_red_button:hover,
+.oip_red_button:focus,
+.oip_red_icon_button:hover,
+.oip_red_icon_button:focus {
+  background: var(--alert-hover) !important;
+  border: 2px solid var(--alert-hover) !important;
+  box-shadow: none !important;
+}
+.oip_red_button .oip_button_spinner div,
+.oip_red_icon_button .oip_button_spinner div {
+  border: 2px solid var(--pure-white);
+  border-color: var(--pure-white) transparent transparent transparent;
+}
+.oip_red_icon_button {
+  background: var(--system-alert) !important;
+  border: 2px solid var(--system-alert) !important;
+  box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
+  padding: 10px !important;
+  color: var(--pure-white) !important;
+}
+
+.oip_green_button {
+  background: var(--green) !important;
+  border: 2px solid var(--green) !important;
+  box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
+  color: var(--pure-white) !important;
+}
+.oip_green_button:hover,
+.oip_green_button:focus,
+.oip_green_icon_button:hover,
+.oip_green_icon_button:focus {
+  background: #2eb830 !important;
+  border: 2px solid #2eb830 !important;
+  box-shadow: none !important;
+}
+.oip_green_button .oip_button_spinner div,
+.oip_green_icon_button .oip_button_spinner div {
+  border: 2px solid var(--pure-white);
+  border-color: var(--pure-white) transparent transparent transparent;
+}
+.oip_green_icon_button {
+  background: var(--green) !important;
+  border: 2px solid var(--green) !important;
+  box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
+  padding: 10px !important;
+  color: var(--pure-white) !important;
+}
+
+.oip_success_button {
+  background: transparent !important;
+  border: 2px solid rgba(34, 197, 94, 0.2) !important;
+  color: var(--system-success) !important;
+}
+.oip_success_button:hover,
+.oip_success_button:focus,
+.oip_success_icon_button:hover,
+.oip_success_icon_button:focus {
+  border: 2px solid rgba(34, 197, 94, 0.2) !important;
+  background: rgba(34, 197, 94, 0.05) !important;
+  color: #069a3d !important;
+}
+.oip_success_button .oip_button_spinner div,
+.oip_success_icon_button .oip_button_spinner div {
+  border: 2px solid var(--system-success);
+  border-color: var(--system-success) transparent transparent transparent;
+}
+.oip_success_icon_button {
+  border: 2px solid rgba(34, 197, 94, 0.2) !important;
+  padding: 10px !important;
+  color: var(--system-success) !important;
+}
+.oip_button_flex {
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.oip_button_loading {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+.oip_button_spinner {
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 20px;
+}
+.oip_button_spinner div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  animation: oip-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.oip_button_spinner div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.oip_button_spinner div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.oip_button_spinner div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes oip-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.oip_button_is_loading {
+  visibility: hidden;
+}
+
+/*** TAGS ***/
+
+.oip_tag {
+  padding: 4px 12px !important;
+  background: var(--independence) !important;
+  color: var(--pure-white) !important;
+  font-style: normal !important;
+  font-weight: bold;
+  font-size: 12px !important;
+  line-height: 14px !important;
+  border-radius: 20px !important;
+  border: 1px solid var(--independence) !important;
+  height: 20px !important;
+  width: fit-content !important;
+  font-family: "Figtree", sans-serif !important;
+  align-items: center;
+  display: flex;
+  gap: 8px;
+}
+.oip_tag > svg {
+  cursor: pointer;
+  stroke: var(--pure-white);
+  margin-right: -5px;
+}
+.oip_tag.is_disabled {
+  background-color: var(--pure-white) !important;
+  color: var(--lavendar-grey) !important;
+  border: 1px solid var(--lavendar-grey) !important;
+}
+.oip_tag.is_red {
+  background: var(--red) !important;
+  border: 1px solid var(--red) !important;
+}
+.oip_tag.is_orange {
+  background: var(--orange) !important;
+  border: 1px solid var(--orange) !important;
+}
+.oip_tag.is_yellow {
+  background: var(--yellow) !important;
+  border: 1px solid var(--yellow) !important;
+}
+.oip_tag.is_lime {
+  background: var(--lime) !important;
+  border: 1px solid var(--lime) !important;
+}
+.oip_tag.is_green {
+  background: var(--green) !important;
+  border: 1px solid var(--green) !important;
+}
+.oip_tag.is_cyan {
+  background: var(--cyan) !important;
+  border: 1px solid var(--cyan) !important;
+}
+.oip_tag.is_blue {
+  background: var(--blue) !important;
+  border: 1px solid var(--blue) !important;
+}
+.oip_tag.is_navy {
+  background: var(--navy) !important;
+  border: 1px solid var(--navy) !important;
+}
+.oip_tag.is_purple {
+  background: var(--purple) !important;
+  border: 1px solid var(--purple) !important;
+}
+.oip_tag.is_pink {
+  background: var(--pink) !important;
+  border: 1px solid var(--pink) !important;
+}
+.oip_tag.is_primary {
+  background: var(--primary) !important;
+  border: 1px solid var(--primary) !important;
+}
+.oip_tag.is_accent {
+  background: var(--accent) !important;
+  border: 1px solid var(--accent) !important;
+}
+.oip_tag.is_alert {
+  background: var(--alert) !important;
+  border: 1px solid var(--alert) !important;
+}
+.oip_tag.is_warning {
+  background: var(--warning) !important;
+  border: 1px solid var(--warning) !important;
+}
+.oip_tag.is_success {
+  background: var(--success) !important;
+  border: 1px solid var(--success) !important;
+}
+.oip_tag.is_light_grey {
+  background: var(--background) !important;
+  border-radius: 10px !important;
+  border: 1px solid var(--background) !important;
+  padding: 4px 12px !important;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  color: var(--independence) !important;
+}
+.oip_tag.is_light_grey svg {
+  stroke: var(--cool-grey);
+  color: var(--cool-grey);
+}
+.oip_tag.is_light_red {
+  background: rgba(251, 70, 84, 0.1) !important;
+  border-radius: 10px !important;
+  border: 1px solid transparent !important;
+  padding: 4px 12px !important;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  color: var(--alert) !important;
+}
+.oip_tag.is_light_green {
+  background: rgba(50, 209, 117, 0.1) !important;
+  border-radius: 10px !important;
+  border: 1px solid transparent !important;
+  padding: 4px 12px !important;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  color: var(--success) !important;
+}
+.oip_tag.is_light_primary {
+  background: #e9f1ff !important;
+  border-radius: 10px !important;
+  border: 1px solid transparent !important;
+  padding: 4px 12px !important;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 16px !important;
+  color: var(--primary) !important;
+}
+.oip_tag .oip_tag__close {
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: middle;
+  margin-left: 4px;
+  margin-top: -2px;
+}
+
+/*** CARD ***/
+/* CARD */
+.oip_card {
+  padding: 32px 24px;
+  border-radius: 12px;
+  background: var(--pure-white);
+  box-shadow: var(--container-shadow);
+  margin: 8px 0;
+}
+
+.oip_table_card {
+  padding: 32px 0px;
+  border-radius: 12px;
+  background: var(--pure-white);
+  box-shadow: var(--container-shadow);
+  margin: 8px 0;
+}
+
+.oip_table_card .oip_card__header {
+  padding: 0px 24px;
+}
+
+.oip_card .oip_card__header {
+  display: flex;
+}
+.oip_card .oip_card__header .oip_card__header_info {
+  flex-grow: 1;
+}
+.oip_card .oip_card__header .oip_card__header_info .oip_card__header_title {
+  display: flex;
+  align-items: baseline;
+}
+.oip_card .oip_card__header .oip_card__header_info .oip_card__header_title h1 {
+  flex-grow: 0;
+}
+.oip_card
+  .oip_card__header
+  .oip_card__header_info
+  .oip_card__header_title
+  h1
+  span {
+  color: var(--accent);
+}
+.oip_card .oip_card__header .oip_card__header_info .oip_card__header_sub {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  color: var(--cool-grey) !important;
+  flex-wrap: wrap;
+}
+.oip_card .oip_card__header .oip_card__header_info .oip_card__header_sub h3,
+.oip_card .oip_card__header .oip_card__header_info .oip_card__header_sub p {
+  color: var(--cool-grey) !important;
+}
+.oip_card
+  .oip_card__header
+  .oip_card__header_info
+  .oip_card__header_sub
+  .oip_card__header_sub_divider {
+  margin: 0 4px;
+  color: var(--cool-grey) !important;
+}
+.oip_card .oip_card__header .oip_card__header_buttons {
+  display: flex;
+  column-gap: 8px;
+}
+@media screen and (max-width: 1000px) {
+  .oip_card .oip_card__header .oip_card__header_buttons .oip_download_button,
+  .oip_card
+    .oip_card__header
+    .oip_card__header_buttons
+    .oip_see_details_button {
+    display: none;
+  }
+}
+@media screen and (min-width: 1001px) {
+  .oip_card
+    .oip_card__header
+    .oip_card__header_buttons
+    .oip_small_download_button,
+  .oip_card
+    .oip_card__header
+    .oip_card__header_buttons
+    .oip_small_see_details_button {
+    display: none;
+  }
+}
+
+.oip_card .oip_card__description {
+  margin-top: 32px;
+}
+.oip_card .oip_card__kpi_container {
+  margin-top: 32px;
+  display: flex;
+  gap: 32px;
+  flex-wrap: wrap;
+}
+.oip_card .oip_card__kpi_container .oip_card__kpi_caption {
+  display: flex;
+  align-items: center;
+}
+.oip_card .oip_card__kpi_container .oip_card__kpi_caption svg {
+  vertical-align: initial !important;
+}
+.oip_card
+  .oip_card__kpi_container
+  .oip_card__kpi_caption
+  .oip_card__kpi_caption_icon:first-child {
+  margin-right: 4px;
+}
+.oip_card .oip_card__kpi_container .oip_card__kpi_caption h3 {
+  margin-right: 4px;
+}
+.oip_card__kpi .oip_underline {
+  color: var(--cool-grey) !important;
+}
+.oip_card__kpi .oip_label {
+  color: var(--independence) !important;
+}
+.oip_card .oip_card__kpi_container .oip_card__kpi_stats {
+  display: flex;
+  margin-top: 16px;
+}
+.oip_card
+  .oip_card__kpi_container
+  .oip_card__kpi_stats
+  .oip_card__kpi_stats_indicator {
+  box-sizing: content-box;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  padding: 4px;
+  margin-right: 8px;
+  text-align: center;
+}
+.oip_card
+  .oip_card__kpi_container
+  .oip_card__kpi_stats
+  .oip_card__kpi_stats_indicator.trend_up {
+  background: rgba(50, 209, 117, 0.1);
+}
+.oip_card
+  .oip_card__kpi_container
+  .oip_card__kpi_stats
+  .oip_card__kpi_stats_indicator.trend_down {
+  background: rgba(251, 70, 84, 0.1);
+}
+.oip_card .oip_card__kpi_container .oip_card__kpi_stats h3.trend_up {
+  color: var(--success);
+}
+.oip_card .oip_card__kpi_container .oip_card__kpi_stats h3.trend_down {
+  color: var(--alert);
+}
+.oip_card .oip_card__kpi_divider {
+  width: 1px;
+  background: var(--dividers);
+}
+.oip_card__tags {
+  margin-top: 32px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+</style>