@innovaccer/design-system 2.5.0 → 2.7.0-0

package/css/dist/index.css

@@ -1,69 +1,69 @@
 /**** Colors ****/
 :root {
-	--haldi: #ffc208;
-	--haldi-dark: #b78707;
-	--haldi-darker: #6b4a06;
-	--haldi-light: #ffd462;
-	--haldi-lighter: #ffe597;
-	--haldi-lightest: #fff5c7;
-	--jal: #0070dd;
-	--jal-dark: #00509f;
-	--jal-darker: #003365;
-	--jal-light: #4f9de7;
-	--jal-lighter: #97c5f0;
-	--jal-lightest: #dcecf9;
-	--jamun: #7a53b2;
-	--jamun-dark: #644491;
-	--jamun-darker: #4e3572;
-	--jamun-light: #9d7ec6;
-	--jamun-lighter: #bfaada;
-	--jamun-lightest: #e0d8ee;
-	--mirch: #d93737;
-	--mirch-dark: #9c2828;
-	--mirch-darker: #631919;
-	--mirch-light: #eb776c;
-	--mirch-lighter: #f7ada5;
-	--mirch-lightest: #f9e2e2;
-	--neel: #3d51d4;
-	--neel-dark: #2c3a98;
-	--neel-darker: #1c2561;
-	--neel-light: #7583e1;
-	--neel-lighter: #abb4ed;
-	--neel-lightest: #e2e5f9;
-	--neem: #2ea843;
-	--neem-dark: #227934;
-	--neem-darker: #154d26;
-	--neem-light: #71c077;
-	--neem-lighter: #a5d8aa;
-	--neem-lightest: #d7efdf;
-	--night: #2f2f2f;
-	--night-light: #595959;
-	--night-lighter: #868686;
-	--night-lightest: #a6a6a6;
-	--nimbu: #82c91e;
-	--nimbu-dark: #578715;
-	--nimbu-darker: #304a0b;
-	--nimbu-light: #a6d763;
-	--nimbu-lighter: #c6e599;
-	--nimbu-lightest: #e3f3ce;
-	--shadow-0: #ffffff;
-	--shadow-10: #ffffff;
-	--shadow-20: #ffffff;
-	--shadow-30: #ffffff;
-	--stone: #d5d5d5;
-	--stone-dark: #c5c5c5;
-	--stone-light: #e5e5e5;
-	--stone-lighter: #ececec;
-	--stone-lightest: #f4f4f4;
-	--tawak: #f07d00;
-	--tawak-dark: #b35f13;
-	--tawak-darker: #743208;
-	--tawak-light: #feac5f;
-	--tawak-lighter: #ffc998;
-	--tawak-lightest: #fde6ce;
-	--white: #ffffff;
-
-	/**** Fonts ****/
+  --haldi: #ffc208;
+  --haldi-dark: #b78707;
+  --haldi-darker: #6b4a06;
+  --haldi-light: #ffd462;
+  --haldi-lighter: #ffe597;
+  --haldi-lightest: #fff5c7;
+  --jal: #0070dd;
+  --jal-dark: #00509f;
+  --jal-darker: #003365;
+  --jal-light: #4f9de7;
+  --jal-lighter: #97c5f0;
+  --jal-lightest: #dcecf9;
+  --jamun: #7a53b2;
+  --jamun-dark: #644491;
+  --jamun-darker: #4e3572;
+  --jamun-light: #9d7ec6;
+  --jamun-lighter: #bfaada;
+  --jamun-lightest: #e0d8ee;
+  --mirch: #d93737;
+  --mirch-dark: #9c2828;
+  --mirch-darker: #631919;
+  --mirch-light: #eb776c;
+  --mirch-lighter: #f7ada5;
+  --mirch-lightest: #f9e2e2;
+  --neel: #3d51d4;
+  --neel-dark: #2c3a98;
+  --neel-darker: #1c2561;
+  --neel-light: #7583e1;
+  --neel-lighter: #abb4ed;
+  --neel-lightest: #e2e5f9;
+  --neem: #2ea843;
+  --neem-dark: #227934;
+  --neem-darker: #154d26;
+  --neem-light: #71c077;
+  --neem-lighter: #a5d8aa;
+  --neem-lightest: #d7efdf;
+  --night: #2f2f2f;
+  --night-light: #595959;
+  --night-lighter: #868686;
+  --night-lightest: #a6a6a6;
+  --nimbu: #82c91e;
+  --nimbu-dark: #578715;
+  --nimbu-darker: #304a0b;
+  --nimbu-light: #a6d763;
+  --nimbu-lighter: #c6e599;
+  --nimbu-lightest: #e3f3ce;
+  --shadow-0: #ffffff;
+  --shadow-10: #ffffff;
+  --shadow-20: #ffffff;
+  --shadow-30: #ffffff;
+  --stone: #d5d5d5;
+  --stone-dark: #c5c5c5;
+  --stone-light: #e5e5e5;
+  --stone-lighter: #ececec;
+  --stone-lightest: #f4f4f4;
+  --tawak: #f07d00;
+  --tawak-dark: #b35f13;
+  --tawak-darker: #743208;
+  --tawak-light: #feac5f;
+  --tawak-lighter: #ffc998;
+  --tawak-lightest: #fde6ce;
+  --white: #ffffff;
+
+  /**** Fonts ****/
 } /* close :root */
 
 :root {
@@ -243,13 +243,16 @@
 
   /* 
   Grid columns
- Set the number of columns and specify the width of the gutters. 
- */
+  Set the number of columns and specify the width of the gutters. 
+  */
 
   --grid-columns: 12;
 
   /* Undefined colors */
-  --card-subdued-bg: #FCFAFA;
+  --card-subdued-bg: #fcfafa;
+
+  /* Transparancy (Opacity) */
+  --transparent-58: 0.58;
 }
 
 /* fallback */
@@ -367,6 +370,9 @@
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
+.ss {
+  background: red;
+}
 
 body {
   font-family: var(--font-family);
@@ -566,6 +572,7 @@ body {
 .Subheading--white {
   color: var(--text-white);
 }
+
 .PopperWrapper-trigger {
   display: inline-flex;
   flex-grow: 1;
@@ -578,19 +585,21 @@ body {
   justify-content: center;
   z-index: 1500;
 }
+
 .Legend {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 .Legend-icon {
-    border-radius: var(--spacing-s);
-    margin-right: var(--spacing);
+  border-radius: var(--spacing-s);
+  margin-right: var(--spacing);
 }
+
 .ProgressBar {
   width: 100%;
   border-radius: var(--spacing-m);
@@ -603,6 +612,7 @@ body {
   border-radius: var(--spacing-m);
   transition: width 200ms;
 }
+
 /* badge */
 
 .Avatar {
@@ -722,23 +732,41 @@ body {
   background: var(--secondary);
   border-radius: var(--spacing-m);
 }
+
 @-webkit-keyframes backdrop-open {
-  from { opacity: 0; }
-  to { opacity: 60; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 60;
+  }
 }
+
 @keyframes backdrop-open {
-  from { opacity: 0; }
-  to { opacity: 60; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 60;
+  }
 }
 
 @-webkit-keyframes backdrop-close {
-  from { opacity: 60; }
-  to { opacity: 0; }
+  from {
+    opacity: 60;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 @keyframes backdrop-close {
-  from { opacity: 60; }
-  to { opacity: 0; }
+  from {
+    opacity: 60;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 .Backdrop {
@@ -773,117 +801,115 @@ body {
           animation: backdrop-close 120ms cubic-bezier(0.4, 0.14, 1, 1);
 }
 
-
-
 /* badge */
 
 .Badge {
-	/* 160px */
-	max-width: calc(var(--spacing-2) * 10);
-	/* truncate */
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: var(--font-size-s);
-	line-height: var(--font-height-s);
-	text-transform: uppercase;
-	padding-right: var(--spacing-m);
-	padding-left: var(--spacing-m);
-	padding-top: var(--spacing-s);
-	padding-bottom: var(--spacing-s);
-	border-radius: var(--spacing-m);
-	display: inline-block;
-	box-sizing: border-box;
-	font-weight: var(--font-weight-bold);
-	cursor: default;
+  /* 160px */
+  max-width: calc(var(--spacing-2) * 10);
+  /* truncate */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  text-transform: uppercase;
+  padding-right: var(--spacing-m);
+  padding-left: var(--spacing-m);
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
+  border-radius: var(--spacing-m);
+  display: inline-block;
+  box-sizing: border-box;
+  font-weight: var(--font-weight-bold);
+  cursor: default;
 }
 
 .Badge--primary {
-	background: var(--primary);
-	color: var(--white);
+  background: var(--primary);
+  color: var(--white);
 }
 
 .Badge--secondary {
-	background: var(--secondary-light);
+  background: var(--secondary-light);
 }
 
 .Badge--success {
-	background: var(--success);
-	color: var(--white);
+  background: var(--success);
+  color: var(--white);
 }
 
 .Badge--alert {
-	background: var(--alert);
-	color: var(--white);
+  background: var(--alert);
+  color: var(--white);
 }
 
 .Badge--warning {
-	background: var(--warning);
-	color: var(--warning-darker);
+  background: var(--warning);
+  color: var(--warning-darker);
 }
 
 .Badge--accent1 {
-	background: var(--accent1);
-	color: var(--white);
+  background: var(--accent1);
+  color: var(--white);
 }
 
 .Badge--accent2 {
-	background: var(--accent2);
-	color: var(--white);
+  background: var(--accent2);
+  color: var(--white);
 }
 
 .Badge--accent3 {
-	background: var(--accent3);
-	color: var(--white);
+  background: var(--accent3);
+  color: var(--white);
 }
 
 .Badge--accent4 {
-	background: var(--accent4);
-	color: var(--accent4-darker);
+  background: var(--accent4);
+  color: var(--accent4-darker);
 }
 
 .Badge--subtle-primary {
-	color: var(--primary-dark);
-	background: var(--primary-lightest);
+  color: var(--primary-dark);
+  background: var(--primary-lightest);
 }
 
 .Badge--subtle-secondary {
-	background: var(--secondary-light);
+  background: var(--secondary-light);
 }
 
 .Badge--subtle-success {
-	color: var(--success-dark);
-	background: var(--success-lightest);
+  color: var(--success-dark);
+  background: var(--success-lightest);
 }
 
 .Badge--subtle-alert {
-	color: var(--alert-dark);
-	background: var(--alert-lightest);
+  color: var(--alert-dark);
+  background: var(--alert-lightest);
 }
 
 .Badge--subtle-warning {
-	color: var(--warning-darker);
-	background: var(--warning-lightest);
+  color: var(--warning-darker);
+  background: var(--warning-lightest);
 }
 
 .Badge--subtle-accent1 {
-	color: var(--accent1-darker);
-	background: var(--accent1-lightest);
+  color: var(--accent1-darker);
+  background: var(--accent1-lightest);
 }
 
 .Badge--subtle-accent2 {
-	color: var(--accent2-dark);
-	background: var(--accent2-lightest);
+  color: var(--accent2-dark);
+  background: var(--accent2-lightest);
 }
 
 .Badge--subtle-accent3 {
-	color: var(--accent3-dark);
-	background: var(--accent3-lightest);
+  color: var(--accent3-dark);
+  background: var(--accent3-lightest);
 }
 
 .Badge--subtle-accent4 {
-	color: var(--accent4-darker);
-	background: var(--accent4-lightest);
+  color: var(--accent4-darker);
+  background: var(--accent4-lightest);
 }
 
 /* breadcrumbs */
@@ -916,504 +942,516 @@ body {
 }
 
 .Button {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    position: relative;
-    vertical-align: middle;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    border: 0;
-    border-radius: var(--spacing-m);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border: 0;
+  border-radius: var(--spacing-m);
 
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
+
+  text-align: center;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  color: var(--text-white);
 
-    text-align: center;
-    font-family: var(--font-family);
-    font-weight: var(--font-weight-normal);
-    font-size: var(--font-size);
-    line-height: var(--font-height-s);
-    color: var(--text-white);
-	
-    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 }
 
 .Button:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .Button:focus {
-    outline: 0;
+  outline: 0;
 }
 
 .Button--iconAlign-right {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 .Button--tiny {
-    height: var(--spacing-xl);
-    padding-right: var(--spacing);
-    padding-left: var(--spacing);
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  height: var(--spacing-xl);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Button--tinySquare {
-    width: var(--spacing-xl);
+  width: var(--spacing-xl);
 }
 
 .Button--regular {
-    height: var(--spacing-3);
-    padding-right: var(--spacing-l);
-	padding-left: var(--spacing-l);
+  height: var(--spacing-3);
+  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-l);
 }
 
 .Button--regularSquare {
-    width: var(--spacing-3);
+  width: var(--spacing-3);
 }
 
 .Button--large {
-    height: 40px;
-    padding-right: var(--spacing-2);
-    padding-left: var(--spacing-2);
-    
-    line-height: var(--font-height-m);
-    font-size: var(--font-size-m);
+  height: 40px;
+  padding-right: var(--spacing-2);
+  padding-left: var(--spacing-2);
+
+  line-height: var(--font-height-m);
+  font-size: var(--font-size-m);
 }
 
 .Button--largeSquare {
-    width: 40px;
+  width: 40px;
 }
 
 .Button--tinySquare .Button-icon,
 .Button--largeSquare .Button-icon,
 .Button--tinySquare .Spinner,
 .Button--largeSquare .Spinner {
-    padding-left: var(--spacing-s);
-    padding-right: var(--spacing-s);
+  padding-left: var(--spacing-s);
+  padding-right: var(--spacing-s);
 }
 
 .Button--expanded {
-    width: 100%;
+  width: 100%;
 }
 
 .Button-icon {
-    line-height: inherit;
-    display: flex;
-    align-items: center;
+  line-height: inherit;
+  display: flex;
+  align-items: center;
 }
 
 .Button-icon--left {
-    margin-right: var(--spacing);
+  margin-right: var(--spacing);
 }
 
 .Button-icon--right {
-    margin-left: var(--spacing);
+  margin-left: var(--spacing);
 }
 
 .Button--tiny .Button-icon--left {
-    margin-right: var(--spacing-m);
+  margin-right: var(--spacing-m);
 }
 .Button--tiny .Button-icon--right {
-    margin-left: var(--spacing-m);
+  margin-left: var(--spacing-m);
 }
 
 .Button--basic {
-	background: var(--secondary-light);
-	color: var(--inverse);
+  background: var(--secondary-light);
+  color: var(--inverse);
 }
 
 .Button--basic:hover {
-	background: var(--secondary);
+  background: var(--secondary);
 }
 
 .Button--basic:active {
-	background: var(--secondary-dark);
+  background: var(--secondary-dark);
 }
 
 .Button--basic:focus {
-    box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
 .Button--basic:disabled {
-    background: var(--secondary-lighter);
-    color: var(--inverse-lightest);
+  background: var(--secondary-lighter);
+  color: var(--inverse-lightest);
 }
 
 .Button--primary {
-	background: var(--primary);
+  background: var(--primary);
 }
 
 .Button--primary:hover {
-	background: var(--primary-dark);
+  background: var(--primary-dark);
 }
 
 .Button--primary:active {
-	background: var(--primary-darker);
+  background: var(--primary-darker);
 }
 
 .Button--primary:focus {
-    box-shadow: var(--shadow-spread) var(--primary-shadow);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Button--primary:disabled {
-    background: var(--primary-lighter);
+  background: var(--primary-lighter);
 }
 
 .Button--success {
-	background: var(--success);
+  background: var(--primary);
 }
 
 .Button--success:hover {
-	background: var(--success-dark);
+  background: var(--primary-dark);
 }
 
 .Button--success:active {
-	background: var(--success-darker);
+  background: var(--primary-darker);
 }
 
 .Button--success:focus {
-    box-shadow: var(--shadow-spread) var(--success-shadow);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Button--success:disabled {
-    background: var(--success-lighter);
+  background: var(--primary-lighter);
 }
 
 .Button--alert {
-	background: var(--alert);
+  background: var(--alert);
 }
 
 .Button--alert:hover {
-	background: var(--alert-dark);
+  background: var(--alert-dark);
 }
 
 .Button--alert:active {
-	background: var(--alert-darker);
+  background: var(--alert-darker);
 }
 
 .Button--alert:focus {
-    box-shadow: var(--shadow-spread) var(--alert-shadow);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Button--alert:disabled {
-    background: var(--alert-lighter);
+  background: var(--alert-lighter);
 }
 
 .Button--transparent {
-	background: transparent;
-	color: var(--inverse);
+  background: transparent;
+  color: var(--inverse);
 }
 
 .Button--transparent:hover {
-    background: var(--secondary-light);
+  background: var(--secondary-light);
 }
 
 .Button--transparent:focus {
-    background: rgba(229, 229, 229, 0.2);
-    /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
+  background: rgba(229, 229, 229, 0.2);
+  /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
 }
 
 .Button--transparent:active {
-	background: var(--secondary);
+  background: var(--secondary);
 }
 
 .Button--transparent:focus:active {
-	background: var(--secondary);
+  background: var(--secondary);
 }
 
 .Button--transparent:disabled {
-    background: transparent;
-    color: var(--inverse-lightest);
+  background: transparent;
+  color: var(--inverse-lightest);
 }
 
 .Button-spinner {
-    display: flex;
-    position: absolute;
-    z-index: 1;
+  display: flex;
+  position: absolute;
+  z-index: 1;
 }
 
 .Button--tiny .Spinner--small {
-    height: var(--font-size-s);
-    width: var(--font-size-s);
+  height: var(--font-size-s);
+  width: var(--font-size-s);
 }
 
 .Button--large .Spinner--small {
-    height: var(--font-size-l);
-    width: var(--font-size-l);
+  height: var(--font-size-l);
+  width: var(--font-size-l);
 }
 
 .Button--selected {
-    background: var(--primary-lightest);
-    color: var(--primary);
+  background: var(--primary-lightest);
+  color: var(--primary);
 }
 
 .Button-text--hidden {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 /* calendar */
 
 .Calendar-wrapper {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .Calendar {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 }
 
 .Calendar--small {
-    padding: var(--spacing-l);
-    padding-bottom: var(--spacing);
-    width: 212px;
+  padding: var(--spacing-l);
+  padding-bottom: var(--spacing);
+  width: 212px;
 }
 
-.Calendar--date--small{
-    height: 248px;
+.Calendar--date--small {
+  height: 248px;
 }
 
-.Calendar--month--small{
-    height: 208px;
+.Calendar--month--small {
+  height: 192px;
 }
 
-.Calendar--year--small{
-    height: 208px;
+.Calendar--year--small {
+  height: 192px;
 }
 
 .Calendar--large {
-    padding-top: var(--spacing-2);
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-2);
-    padding-bottom: var(--spacing-l);
-    width: 316px;
+  padding-top: var(--spacing-2);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+  padding-bottom: var(--spacing-l);
+  width: 316px;
 }
 
-.Calendar--date--large{
-    height: 324px;
+.Calendar--date--large {
+  height: 324px;
 }
 
-.Calendar--month--large{
-    height: 274px;
+.Calendar--month--large {
+  height: 272px;
 }
 
-.Calendar--year--large{
-    height: 274px;
+.Calendar--year--large {
+  height: 272px;
 }
 
 .Calendar-header--large {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-bottom: var(--spacing-l);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: var(--spacing-l);
 }
 
 .Calendar-header--small {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-bottom: var(--spacing-m);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: var(--spacing-m);
 }
 
 .Calendar-headerIcon {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .Calendar-headerIcon--prev {
-    left: 0;
+  left: 0;
 }
 
 .Calendar-headerIcon--next {
-    right: 0;
+  right: 0;
 }
 
 .Calendar-headerContent {
-    display: flex;
-    white-space: nowrap;
-    cursor: pointer;
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .Calendar-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-around;
 }
 
 .Calendar-valueRow {
-    display: flex;
-    justify-content: space-around;
-    padding-top: var(--spacing-s);
-    padding-bottom: var(--spacing-s);
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
 }
 
 .Calendar-valueWrapper {
-    display: inline-flex;
-    flex: 1 0 0;
-    justify-content: center;
-    position: relative;
+  display: inline-flex;
+  flex: 1 0 0;
+  justify-content: center;
+  position: relative;
 }
 
 .Calendar-valueWrapper--inRange {
-    background: var(--primary-lightest);
+  background: var(--primary-lightest);
 }
 
 .Calendar-valueWrapper--inRangeError {
-    background: var(--alert-lightest);
+  background: var(--alert-lightest);
 }
 
 .Calendar-valueWrapper--start {
-    background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
-    border-radius: var(--spacing-m) 0 0 var(--spacing-m);
+  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+  border-radius: var(--spacing-m) 0 0 var(--spacing-m);
 }
 
 .Calendar-valueWrapper--startError {
-    background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
+  background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
 }
 
 .Calendar-valueWrapper--end {
-    background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
-    border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
+  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
 }
 
 .Calendar-valueWrapper--endError {
-    background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
+  background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
 }
 
 .Calendar-valueWrapper--startEnd {
-    background: transparent;
+  background: transparent;
 }
 
 .Calendar-value {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    border-radius: var(--spacing-m);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border-radius: var(--spacing-m);
 }
 
 .Calendar-value:hover {
-    background: var(--secondary);
+  background: var(--secondary);
 }
 
-.Calendar-value--start:hover, .Calendar-value--end:hover {
-    background: var(--primary-lightest);
+.Calendar-value--start:hover,
+.Calendar-value--end:hover {
+  background: var(--primary-lightest);
 }
 
-.Calendar-value--startError:hover, .Calendar-value--endError:hover {
-    background: var(--alert-lightest);
+.Calendar-value--startError:hover,
+.Calendar-value--endError:hover {
+  background: var(--alert-lightest);
 }
 
-.Calendar-value--start, .Calendar-value--end {
-    background: var(--primary-lightest);
+.Calendar-value--start,
+.Calendar-value--end {
+  background: var(--primary-lightest);
 }
 
-.Calendar-value--startError, .Calendar-value--endError {
-    background: var(--alert-lightest);
+.Calendar-value--startError,
+.Calendar-value--endError {
+  background: var(--alert-lightest);
 }
 
-.Calendar-value--currDateMonthYear, .Calendar-value--currDateMonthYear:hover {
-    background: var(--primary-lightest) !important;
+.Calendar-value--currDateMonthYear,
+.Calendar-value--currDateMonthYear:hover {
+  background: var(--primary-lightest) !important;
 }
 
-.Calendar-value--active, .Calendar-value--active:hover {
-    background: var(--primary) !important;
-    font-weight: var(--font-weight-bold);
+.Calendar-value--active,
+.Calendar-value--active:hover {
+  background: var(--primary) !important;
+  font-weight: var(--font-weight-bold);
 }
 
-.Calendar-yearValue, .Calendar-monthValue {}
-
-.Calendar-yearValue--small, .Calendar-monthValue--small {
-    height: var(--spacing-xl);
-    width: var(--spacing-4);
+.Calendar-yearValue,
+.Calendar-monthValue {
 }
 
-.Calendar-yearValue--large, .Calendar-monthValue--large {
-    height: var(--spacing-3);
-    width: var(--spacing-5);
-}
+.Calendar-yearValue--small,
+.Calendar-monthValue--small {
+  height: var(--spacing-xl);
+  width: var(--spacing-4);
+}
+
+.Calendar-yearValue--large,
+.Calendar-monthValue--large {
+  height: var(--spacing-3);
+  width: var(--spacing-5);
+}
 
-.Calendar-dateValue {}
+.Calendar-dateValue {
+}
 
 .Calendar-dateValue--small {
-    height: var(--spacing-xl);
-    width: var(--spacing-xl);
+  height: var(--spacing-xl);
+  width: var(--spacing-xl);
 }
 
 .Calendar-dateValue--large {
-    height: var(--spacing-3);
-    width: var(--spacing-3);
+  height: var(--spacing-3);
+  width: var(--spacing-3);
 }
 
 .Calendar-valueWrapper--dummy {
-    opacity: 0.58;
+  opacity: var(--transparent-58);
 }
 
 .Calendar-value--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Calendar-dayValues {
-    display: flex;
-    justify-content: center;
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
+  display: flex;
+  justify-content: center;
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
 }
 
 .Calendar-dateValues {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: space-around;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: space-around;
 }
 
 .Calendar-dayValues .Calendar-value {
-    padding: 0;
+  padding: 0;
 }
 
-.Calendar-eventsIndicator{
-    position: absolute;
-    bottom: var(--spacing-s);
-    width: var(--spacing-m);
-    height: var(--spacing-m);
-    background-color: var(--alert);
-    border-radius: 50%;
+.Calendar-eventsIndicator {
+  position: absolute;
+  bottom: var(--spacing-s);
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  background-color: var(--alert);
+  border-radius: 50%;
 }
-.Calendar-eventsIndicator--small{
-    width: 3px;
-    height: 3px;
+.Calendar-eventsIndicator--small {
+  width: 3px;
+  height: 3px;
 }
-.Calendar-eventsIndicator--active{
-    background-color: var(--white);
+.Calendar-eventsIndicator--active {
+  background-color: var(--white);
 }
 
 /* badge */
@@ -1457,8 +1495,6 @@ body {
   border-top: var(--spacing-xs) solid var(--secondary-light);
 }
 
-
-
 .CardSubdued {
   background: var(--card-subdued-bg);
   padding: var(--spacing-2);
@@ -1469,22 +1505,21 @@ body {
 }
 
 .CardSubdued--left {
-  border-left: var(--spacing-xs) solid var(--secondary-light);;
+  border-left: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .CardSubdued--right {
-  border-right: var(--spacing-xs) solid var(--secondary-light);;
+  border-right: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .CardSubdued--bottom {
-  border-bottom: var(--spacing-xs) solid var(--secondary-light);;
+  border-bottom: var(--spacing-xs) solid var(--secondary-light);
 }
 
-
 .Box {
   width: 100%;
   border-radius: var(--spacing);
-  padding: var(--spacing-l)
+  padding: var(--spacing-l);
 }
 
 .Box--typing {
@@ -1521,140 +1556,142 @@ body {
 /* badge */
 
 .Checkbox {
-    display: flex;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    line-height: initial;
-    box-sizing: border-box;
-    padding-top: var(--spacing-s);
-    padding-bottom: var(--spacing-s);
+  display: flex;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  line-height: initial;
+  box-sizing: border-box;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
 }
 
 .Checkbox-input {
-    position: absolute;
-    z-index: 2;
-    opacity: 0;
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-    margin: 0;
+  position: absolute;
+  z-index: 2;
+  opacity: 0;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  margin: 0;
 }
 
 .Checkbox-labelWrapper {
-    padding-left: var(--spacing);
-    display: flex;
-    flex-direction: column;
+  padding-left: var(--spacing);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
 .Checkbox-label {
-    display: flex;
-    cursor: pointer;
+  display: flex;
+  cursor: pointer;
 }
 
 .Checkbox-outerWrapper {
-    position: relative;
-    margin-top: var(--spacing-s);
+  position: relative;
+  margin-top: var(--spacing-s);
 }
 
 .Checkbox-outerWrapper--regular {
-    height: var(--spacing-2);
-    min-width: var(--spacing-2);
+  height: var(--spacing-2);
+  min-width: var(--spacing-2);
 }
 
 .Checkbox-outerWrapper--tiny {
-    height: var(--spacing-l);
-    min-width: var(--spacing-l);
+  height: var(--spacing-l);
+  min-width: var(--spacing-l);
 }
 
 /* Type: Unchecked  */
 
 .Checkbox-wrapper {
-    top: 0;
-    left: 0;
-    border: var(--border);
-    border-radius: var(--spacing-s);
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%;
+  top: 0;
+  left: 0;
+  border: var(--border);
+  border-radius: var(--spacing-s);
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
 }
 
 .Checkbox-input:focus {
-    outline: 0;
+  outline: 0;
 }
 
-.Checkbox-input:focus~.Checkbox-wrapper {
-    box-shadow: var(--shadow-spread) var(--secondary-shadow);
+.Checkbox-input:focus ~ .Checkbox-wrapper {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
-.Checkbox-input:hover~.Checkbox-wrapper {
-    border: var(--spacing-xs) solid var(--inverse-lightest);
-    background-color: var(--shadow-0);
+.Checkbox-input:hover ~ .Checkbox-wrapper {
+  border: var(--spacing-xs) solid var(--inverse-lightest);
+  background-color: var(--shadow-0);
 }
 
-.Checkbox-input:active~.Checkbox-wrapper {
-    border: var(--spacing-xs) solid var(--inverse-lightest);
-    background-color: var(--secondary-light);
+.Checkbox-input:active ~ .Checkbox-wrapper {
+  border: var(--spacing-xs) solid var(--inverse-lightest);
+  background-color: var(--secondary-light);
 }
 
 .Checkbox--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Checkbox--disabled .Checkbox-wrapper {
-    border: var(--spacing-xs) solid var(--secondary-light);
-    background-color: var(--secondary-lightest);
+  border: var(--spacing-xs) solid var(--secondary-light);
+  background-color: var(--secondary-lightest);
 }
 
 /* Type: checked && Type: indeterminate  */
 
-.Checkbox-input--checked~.Checkbox-wrapper,
-.Checkbox-input--indeterminate~.Checkbox-wrapper {
-    background-color: var(--primary);
-    border: 0;
+.Checkbox-input--checked ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate ~ .Checkbox-wrapper {
+  background-color: var(--primary);
+  border: 0;
 }
 
-.Checkbox-input--checked:focus~.Checkbox-wrapper,
-.Checkbox-input--indeterminate:focus~.Checkbox-wrapper {
-    box-shadow: var(--shadow-spread) var(--primary-shadow);
-    background-color: var(--primary);
-    border: 0;
+.Checkbox-input--checked:focus ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background-color: var(--primary);
+  border: 0;
 }
 
-.Checkbox-input--checked:hover~.Checkbox-wrapper,
-.Checkbox-input--indeterminate:hover~.Checkbox-wrapper {
-    background-color: var(--primary-dark);
-    border: 0;
+.Checkbox-input--checked:hover ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper {
+  background-color: var(--primary-dark);
+  border: 0;
 }
 
-.Checkbox-input--checked:active~.Checkbox-wrapper,
-.Checkbox-input--indeterminate:active~.Checkbox-wrapper {
-    background-color: var(--primary-darker);
-    border: 0;
+.Checkbox-input--checked:active ~ .Checkbox-wrapper,
+.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper {
+  background-color: var(--primary-darker);
+  border: 0;
 }
 
-.Checkbox--disabled .Checkbox-input--checked~.Checkbox-wrapper,
-.Checkbox--disabled .Checkbox-input--indeterminate~.Checkbox-wrapper {
-    background-color: var(--primary-lighter);
-    border: 0;
+.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper,
+.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
+  background-color: var(--primary-lighter);
+  border: 0;
 }
+
 .Chip {
   display: flex;
   box-sizing: border-box;
-  border-radius: var( --spacing-l);
-  padding-right: var( --spacing);
-  padding-left: var( --spacing);
-  padding-top: var( --spacing-s);
-  padding-bottom: var( --spacing-s);
+  border-radius: var(--spacing-l);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
   justify-content: space-between;
   border-style: solid;
-  border-width: var( --spacing-xs);
+  border-width: var(--spacing-xs);
   align-items: center;
   flex-direction: row;
   cursor: default;
@@ -1666,19 +1703,19 @@ body {
 }
 
 .Chip-icon--left {
-  padding-right: var( --spacing-m);
+  padding-right: var(--spacing-m);
   display: flex;
   align-items: center;
 }
 
 .Chip-icon--right {
-  padding-left: var( --spacing-m);
+  padding-left: var(--spacing-m);
   display: flex;
   align-items: center;
 }
 
 .Chip--action {
-  background: var( --shadow-0);
+  background: var(--shadow-0);
   border-color: var(--stone);
   cursor: pointer;
 }
@@ -1703,8 +1740,9 @@ body {
 }
 
 .Chip--selection {
-  background: var( --shadow-0);
+  background: var(--shadow-0);
   border-color: var(--stone);
+  cursor: pointer;
 }
 
 .Chip--selection:hover {
@@ -1730,18 +1768,14 @@ body {
   border-color: var(--jal-lighter);
 }
 
-.Chip-selection--selected .Text {
-  color: var(--primary);
-}
-
 .Chip-selection--disabled {
-  background: var( --shadow-0);
+  background: var(--shadow-0);
   border-color: var(--stone-light);
 }
 
 .Chip--input {
   background: var(--stone-light);
-  font-weight: var( --font-weight-normal);
+  font-weight: var(--font-weight-normal);
   border: 0px;
 }
 
@@ -1753,21 +1787,29 @@ body {
   background: var(--stone-light);
   border: 0px;
 }
+
+.Chip-selection--selectedDisabled {
+  background: var(--jal-lightest);
+  border-color: var(--jal-lighter);
+  opacity: var(--transparent-58);
+}
+
 .ChipGroup {
-    display: inline-flex;
+  display: inline-flex;
 }
 
 .ChipGroup-item {
-    margin: 0 var(--spacing-m);
+  margin: 0 var(--spacing-m);
 }
 
 .ChipGroup-item:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .ChipGroup-item:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
+
 .ChipInput {
   box-sizing: border-box;
   display: flex;
@@ -1816,7 +1858,7 @@ body {
 .ChipInput-icon {
   height: var(--spacing-2);
   margin-top: var(--spacing-m);
-  padding-top: var(--spacing-s);  
+  padding-top: var(--spacing-s);
   margin-right: var(--spacing-l);
   cursor: pointer;
 }
@@ -1828,11 +1870,11 @@ body {
 }
 
 .ChoiceList-checkbox--vertical {
-  margin-top: var(--spacing)
+  margin-top: var(--spacing);
 }
 
 .ChoiceList-radio--vertical {
-  margin-top: var(--spacing)
+  margin-top: var(--spacing);
 }
 
 .ChoiceList--alignHorizontal {
@@ -1840,11 +1882,11 @@ body {
 }
 
 .ChoiceList-checkbox--horizontal {
-  margin-left: var(--spacing-xl)
+  margin-left: var(--spacing-xl);
 }
 
 .ChoiceList-radio--horizontal {
-  margin-left: var(--spacing-xl)
+  margin-left: var(--spacing-xl);
 }
 
 .Collapsible-wrapper {
@@ -1887,263 +1929,286 @@ body {
 }
 
 .DateRangePicker {
-    display: flex;
+  display: flex;
 }
 
 .DateRangePicker--left {
-    flex-direction: row;
+  flex-direction: row;
 }
 
 .DateRangePicker--right {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 .DateRangePicker-input {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .DateRangePicker-input--startDate {
-    padding-right: var(--spacing-m);
+  padding-right: var(--spacing-m);
 }
 
 .DateRangePicker-input--endDate {
-    padding-left: var(--spacing-m);
+  padding-left: var(--spacing-m);
 }
 
 @media (max-width: 576px) {
-    .DateRangePicker-input {
-        padding: 0;
-    }
+  .DateRangePicker-input {
+    padding: 0;
+  }
+
+  .DateRangePicker-input--endDate {
+    padding-top: var(--spacing);
+  }
+}
+
+.Divider {
+  border: none;
+  margin: 0;
+}
+
+.Divider--vertical {
+  width: 1px;
+}
+
+.Divider--horizontal {
+  height: 1px;
+}
+
+.Divider--basic {
+  background: var(--secondary-light);
+}
 
-    .DateRangePicker-input--endDate {
-        padding-top: var(--spacing);
-    }
+.Divider--header {
+  background: var(--secondary);
 }
+
 .Dropdown {
-    width: 100%;
-    position: relative;
+  width: 100%;
+  position: relative;
 }
 
 .Dropdown-wrapper {
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-m);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
 }
 
 .Dropdown-inputWrapper {
-    border-bottom: var(--border);
+  border-bottom: var(--border);
 }
 
 .Dropdown-input {
-    min-width: unset !important;
+  min-width: unset !important;
 }
 
 .Dropdown-input,
 .Dropdown-input:focus-within {
-    border: unset !important;
+  border: unset !important;
 }
 
 .Dropdown-section {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-left: var(--spacing-l);
-    margin-top: var(--spacing);
-    margin-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: var(--spacing-l);
+  margin-top: var(--spacing);
+  margin-bottom: 6px;
 }
 
 .Dropdown-section--withClear {
-    margin-top: var(--spacing-m);
-    margin-bottom: var(--spacing-s);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-s);
 }
 
 .Dropdown--border {
-    border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .Dropdown-errorWrapper {
-    min-height: var(--spacing-7);
+  min-height: var(--spacing-7);
 }
 
 .Dropdown-buttonWrapper {
-    display: flex;
-    justify-content: flex-end;
-    padding-top: var(--spacing);
-    padding-right: var(--spacing);
-    padding-bottom: var(--spacing);
-    border-top: var(--spacing-xs) solid var(--secondary-light);
+  display: flex;
+  justify-content: flex-end;
+  padding-top: var(--spacing);
+  padding-right: var(--spacing);
+  padding-bottom: var(--spacing);
+  border-top: var(--spacing-xs) solid var(--secondary-light);
 }
 
 .Dropdown-footer {
-    padding-left: var(--spacing-l);
-    padding-bottom: var(--spacing-m);
-    padding-top: var(--spacing);
-    box-sizing: border-box;
+  padding-left: var(--spacing-l);
+  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing);
+  box-sizing: border-box;
 }
 
 .Option {
-    display: flex;
+  display: flex;
 }
 
 .Option,
 .Option-loading {
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing-l);
+  padding-top: 6px;
+  padding-bottom: 6px;
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
 }
 
 .OptionCheckbox {
-    width: 100%;
-    padding-left: var(--spacing-l);
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  width: 100%;
+  padding-left: var(--spacing-l);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Option--active,
 .Option-checkbox--active {
-    background-color: var(--secondary-lightest);
-    cursor: pointer;
+  background-color: var(--secondary-lightest);
+  cursor: pointer;
 }
 
 .Option-loading {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Option--selected {
-    background-color: var(--primary);
-    pointer-events: none;
+  background-color: var(--primary);
+  pointer-events: none;
 }
 
 .Option--disabled,
 .OptionWrapper--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Option-label {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .OptionCheckbox .Checkbox-label {
-    padding-right: var(--spacing-l);
-    width: 100%;
-    display: flex;
-    overflow: hidden;
+  padding-right: var(--spacing-l);
+  width: 100%;
+  display: flex;
+  overflow: hidden;
 }
 
 .Option-text,
 .OptionCheckbox .Text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .Option-text--wrap,
 .Dropdown-wrapper--wrap .OptionCheckbox .Text {
-    white-space: unset;
+  white-space: unset;
 }
 
 .Option--icon {
-    padding-left: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .Option-icon {
-    display: flex;
+  display: flex;
 }
 
 .Option-icon {
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-    line-height: var(--font-height);
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  line-height: var(--font-height);
 }
 
 .Dropdown-wrapper::-webkit-scrollbar {
-    width: var(--spacing);
+  width: var(--spacing);
 }
 
 .Dropdown-wrapper::-webkit-scrollbar-thumb {
-    background: var(--secondary);
-    border-radius: var(--spacing-m);
+  background: var(--secondary);
+  border-radius: var(--spacing-m);
 }
+
 .DropdownButton {
-    width: 100%;
-    justify-content: space-between;
-    padding-top: unset;
-    padding-bottom: unset;
-    background: var(--secondary-light);
-    color: var(--text);
+  width: 100%;
+  justify-content: space-between;
+  padding-top: unset;
+  padding-bottom: unset;
+  background: var(--secondary-light);
+  color: var(--text);
 }
 
 .DropdownButton-wrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
 }
 
 .DropdownButton-text {
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .DropdownButton--tiny {
-    height: var(--spacing-xl);
-    padding-right: var(--spacing);
-    padding-left: var(--spacing);
+  height: var(--spacing-xl);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .DropdownButton--regular {
-    height: var(--spacing-3);
-    padding-right: var(--spacing);
-    padding-left: var(--spacing-l);
+  height: var(--spacing-3);
+  padding-right: var(--spacing);
+  padding-left: var(--spacing-l);
 }
 
 .DropdownButton--tinySquare {
-    padding-left: var(--spacing-m);
-    padding-right: var(--spacing-m);
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-m);
 }
 
 .DropdownButton--regularSquare {
-    padding-left: var(--spacing);
-    padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
 }
 
 .DropdownButton--placeholder {
-    color: var(--text-subtle);
+  color: var(--text-subtle);
 }
 
 .DropdownButton:hover {
-    background: var(--secondary);
-    color: var(--text);
+  background: var(--secondary);
+  color: var(--text);
 }
 
 .DropdownButton:focus {
-    background-color: var(--secondary-lighter);
-    box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  background-color: var(--secondary-lighter);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
 .DropdownButton:active,
 .DropdownButton--open {
-    background-color: var(--secondary-dark) !important;
-    color: var(--text) !important;
+  background-color: var(--secondary-dark) !important;
+  color: var(--text) !important;
 }
 
 .DropdownButton:disabled {
-    background: var(--secondary-lighter);
-    color: var(--text-disabled);
-    pointer-events: none;
+  background: var(--secondary-lighter);
+  color: var(--text-disabled);
+  pointer-events: none;
 }
 
 .DropdownButton--icon {
-    padding-left: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .DropdownButton--error {
-    border: var(--spacing-xs) solid var(--alert);
+  border: var(--spacing-xs) solid var(--alert);
 }
 
 .Dropzone {
@@ -2153,11 +2218,10 @@ body {
   background: var(--white);
   border-radius: var(--spacing-m);
   width: 100%;
-  background-image:
-  linear-gradient(to right,var(--secondary) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
   background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2165,11 +2229,10 @@ body {
 
 .Dropzone--active {
   background: var(--primary-lightest);
-  background-image: 
-  linear-gradient(to right,var(--primary) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--primary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--primary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
   background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2177,11 +2240,10 @@ body {
 
 .Dropzone--error {
   background: var(--alert-lightest);
-  background-image: 
-  linear-gradient(to right,var(--alert) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--alert) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--alert) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
   background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2189,11 +2251,10 @@ body {
 
 .Dropzone--disabled {
   background: var(--secondary-lightest);
-  background-image: 
-  linear-gradient(to right,var(--secondary) 50%, rgba(255, 255, 255, 0) 0%), 
-  linear-gradient(var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(to right, var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
-  linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
+  background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
+    linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
   background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2257,39 +2318,40 @@ body {
   margin-right: var(--spacing-2);
 }
 
-.EditableChipInput{
+.EditableChipInput {
   position: relative;
   width: 100%;
 }
 .EditableChipInput-default {
   display: flex;
   align-items: center;
-  padding-left:var(--spacing-l);
+  padding-left: var(--spacing-l);
   border-left: var(--spacing-xs) solid transparent;
   min-height: var(--spacing-3);
-  flex-wrap:wrap;
+  flex-wrap: wrap;
 }
 
-.EditableChipInput-defaultWithChips{ 
+.EditableChipInput-defaultWithChips {
   display: flex;
   align-items: center;
-  padding-left:var(--spacing);
+  padding-left: var(--spacing);
   border: var(--spacing-xs) solid transparent;
   padding-top: var(--spacing-xs);
   padding-bottom: var(--spacing-xs);
   max-width: calc(100% - 28px);
-  flex-wrap:wrap;
+  flex-wrap: wrap;
 }
 
-.EditableChipInput-defaultWithChips:hover, .EditableChipInput-default:hover{
+.EditableChipInput-defaultWithChips:hover,
+.EditableChipInput-default:hover {
   background-color: var(--secondary-lightest);
 }
 
-.EditableChipInput-chipInput{
+.EditableChipInput-chipInput {
   padding-left: var(--spacing);
 }
 
-.EditableChipInput-actions{
+.EditableChipInput-actions {
   position: absolute;
   display: flex;
   justify-content: flex-end;
@@ -2308,6 +2370,7 @@ body {
   height: var(--spacing-3);
   padding-left: var(--spacing-l);
 }
+
 .EditableInput {
   position: relative;
   display: inline-flex;
@@ -2355,127 +2418,129 @@ body {
   min-width: var(--spacing-6) !important;
   width: 100%;
 }
+
 .EmptyState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
 }
 
 .EmptyState-title {
-	text-align: center;
-	max-width: 480px;
+  text-align: center;
+  max-width: 480px;
 }
 
 .EmptyState-description {
-	text-align: center;
-	margin-top: var(--spacing-m);
-	max-width: 360px;
+  text-align: center;
+  margin-top: var(--spacing-m);
+  max-width: 360px;
 }
 
 .EmptyState-title--large {
-	margin-top: var(--spacing-4);
+  margin-top: var(--spacing-4);
 }
 
 .EmptyState-title--small {
-	margin-top: var(--spacing-xl);
+  margin-top: var(--spacing-xl);
 }
 
 .EmptyState-description--large {
-	margin-bottom: var(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
 }
 
 .EmptyState-description--small {
-	margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
 }
+
 .FileIcon {
-    padding: var(--spacing);
-    border-radius: 50%;
+  padding: var(--spacing);
+  border-radius: 50%;
 }
 .FileItem:not(:last-child) {
-    border-bottom: var(--border);
-    width: 100%;
-    box-sizing: border-box;
+  border-bottom: var(--border);
+  width: 100%;
+  box-sizing: border-box;
 }
 .FileItem {
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing);
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing);
 }
 .FileItem-fileContent {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .FileItem-actions {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .FileItem-file {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-} 
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .FileItem-size {
-    margin-right: var(--spacing);
-    margin-left: var(--spacing);
+  margin-right: var(--spacing);
+  margin-left: var(--spacing);
 }
 .FileItem-text {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-left: var(--spacing-l);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: var(--spacing-l);
 }
 .FileItem-error {
-    margin-left: 40px;
+  margin-left: 40px;
 }
 
 .FileIcon--image {
-    background: var(--alert-lightest);
-    color: var(--alert);
+  background: var(--alert-lightest);
+  color: var(--alert);
 }
 .FileIcon--audio {
-    background: var(--accent1-lightest);
-    color: var(--accent1);
+  background: var(--accent1-lightest);
+  color: var(--accent1);
 }
 .FileIcon--video {
-    background: var(--accent2-lightest);
-    color: var(--accent2);
+  background: var(--accent2-lightest);
+  color: var(--accent2);
 }
 .FileIcon--application {
-    background: var(--accent3-lightest);
-    color: var(--accent3);
+  background: var(--accent3-lightest);
+  color: var(--accent3);
 }
 .FileIcon--others {
-    background: var(--warning-lightest);
-    color: var(--warning);
+  background: var(--warning-lightest);
+  color: var(--warning);
 }
 .FileIcon--animate {
-    -webkit-animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
-            animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
+  -webkit-animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
+          animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
 @-webkit-keyframes fadeIn {
-    0% {
-        opacity:0;
-    }
-    100% {
-        opacity:1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes fadeIn {
-    0% {
-        opacity:0;
-    }
-    100% {
-        opacity:1;
-    }
-}
-  
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .FileUploader {
   display: flex;
   flex-direction: column;
@@ -2521,42 +2586,44 @@ body {
 @-webkit-keyframes fullscreenModal-open {
   from {
     opacity: 0;
-    background: transparent;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
   to {
     opacity: 100;
+    transform: translateY(0px);
   }
 }
 
 @keyframes fullscreenModal-open {
   from {
     opacity: 0;
-    background: transparent;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
   to {
     opacity: 100;
+    transform: translateY(0px);
   }
 }
 
 @-webkit-keyframes fullscreenModal-close {
   from {
     opacity: 100;
+    transform: translateY(0px);
   }
   to {
     opacity: 0;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
 }
 
 @keyframes fullscreenModal-close {
   from {
     opacity: 100;
+    transform: translateY(0px);
   }
   to {
     opacity: 0;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
 }
 
@@ -2610,214 +2677,217 @@ body {
 /** Grid **/
 
 .Grid-wrapper {
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    height: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  height: 100%;
 }
 
 .Grid {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100%;
-    overflow: hidden;
-    background: var(--white);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+  overflow: hidden;
+  background: var(--white);
 }
 
-.Grid--resource .Grid-row--body:hover, .Grid--resource .Grid-row--body:hover .Grid-cellGroup {
-    cursor: pointer;
-    background: var(--secondary-lightest);
+.Grid--resource .Grid-row--body:hover,
+.Grid--resource .Grid-row--body:hover .Grid-cellGroup {
+  cursor: pointer;
+  background: var(--secondary-lightest);
 }
 
-.Grid--resource .Grid-row--body:active, .Grid--resource .Grid-row--body:active .Grid-cellGroup {
-    background: var(--warning-lightest) !important;
+.Grid--resource .Grid-row--body:active,
+.Grid--resource .Grid-row--body:active .Grid-cellGroup {
+  background: var(--warning-lightest) !important;
 }
 
 .Grid--resource .Grid-row--body:focus {
-    outline-color: var(--warning);
+  outline-color: var(--warning);
 }
 
 .Grid--pinned {
-    position: absolute;
-    height: 100%;
-    z-index: 2;
-    overflow-x: hidden;
-    -ms-overflow-style: none;
-    border-right: 3px solid var(--secondary);
+  position: absolute;
+  height: 100%;
+  z-index: 2;
+  overflow-x: hidden;
+  -ms-overflow-style: none;
+  border-right: 3px solid var(--secondary);
 }
 
 .Grid-pinned::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .Grid--main {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .Grid--comfortable .Grid-cell--head {
-    min-height: 40px;
+  min-height: 40px;
 }
 
 .Grid--comfortable .Grid-cell--body {
-    padding-top: var(--spacing-l);
-    padding-bottom: var(--spacing-l);
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
 }
 
 .Grid--standard .Grid-cell--head {
-    min-height: 40px;
+  min-height: 40px;
 }
 
 .Grid--standard .Grid-cell--body {
-    padding-top: var(--spacing-l);
-    padding-bottom: var(--spacing-l);
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
 }
 
 .Grid--compressed .Grid-cell--head {
-    min-height: 40px;
+  min-height: 40px;
 }
 
 .Grid--compressed .Grid-cell--body {
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
 }
 
 .Grid--tight .Grid-cell--head {
-    min-height: var(--spacing-3);
+  min-height: var(--spacing-3);
 }
 
 .Grid--tight .Grid-cell--body {
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Grid-head {
-    display: flex;
-    flex: 0 0 auto;
-    overflow-x: auto;
-    border-bottom: var(--border);
+  display: flex;
+  flex: 0 0 auto;
+  overflow-x: auto;
+  border-bottom: var(--border);
 }
 
 .Grid-head::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .Grid-headCell {
-    display: flex;
-    height: 100%;
-    flex-direction: row;
-    align-items: center;
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
 }
 
 .Grid-headCell--draggable {
-    cursor: -webkit-grab;
-    cursor: grab;
+  cursor: -webkit-grab;
+  cursor: grab;
 }
 
 .Grid-headCell--draggable:active {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
 }
 
 .Grid-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-x: auto;
-    overflow-y: overlay;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-x: auto;
+  overflow-y: overlay;
 }
 
 .Grid-body::-webkit-scrollbar {
-    background: var(--white);
-    height: var(--spacing-l);
-    width: var(--spacing-l);
+  background: var(--white);
+  height: var(--spacing-l);
+  width: var(--spacing-l);
 }
 
 .Grid-body::-webkit-scrollbar-thumb {
-    background: var(--secondary);
-    border-radius: var(--spacing);
+  background: var(--secondary);
+  border-radius: var(--spacing);
 }
 
 .Grid-rowWrapper {
-    display: inline-flex;
-    flex-direction: column;
-    min-width: -webkit-fit-content;
-    min-width: -moz-fit-content;
-    min-width: fit-content;
-    flex-shrink: 0;
-    border-bottom: var(--border);
+  display: inline-flex;
+  flex-direction: column;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  flex-shrink: 0;
+  border-bottom: var(--border);
 }
 
 .Grid-row {
-    display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
-    box-sizing: border-box;
-    background: var(--white);
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 .Grid-row--body {
-    border-color: var(--secondary-light);
+  border-color: var(--secondary-light);
 }
 
-.Grid-row--selected, .Grid-row--selected .Grid-cellGroup {
-    background: var(--warning-lightest) !important;
+.Grid-row--selected,
+.Grid-row--selected .Grid-cellGroup {
+  background: var(--warning-lightest) !important;
 }
 
 .Grid-rowWrapper:last-child .Grid-row--body {
-    border-bottom: 0;
+  border-bottom: 0;
 }
 
 .GridBody-padding {
-    flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .Grid-nestedRow {
-    width: 100%;
-    overflow: hidden;
+  width: 100%;
+  overflow: hidden;
 }
 
 .Grid-nestedRowTrigger {
-    margin-right: var(--spacing-l);
-    cursor: pointer;
+  margin-right: var(--spacing-l);
+  cursor: pointer;
 }
 
 .Grid-nestedRowPlaceholder {
-    width: 20px;
-    margin-right: var(--spacing-l);
+  width: 20px;
+  margin-right: var(--spacing-l);
 }
 
 .Grid-cell {
-    position: relative;
-    box-sizing: border-box;
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing-l);
+  position: relative;
+  box-sizing: border-box;
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
 }
 
 .Grid-cell--body {
-    padding-right: var(--spacing-l);
+  padding-right: var(--spacing-l);
 }
 
 .Grid-cell--head {
-    overflow: hidden;
-    padding-right: var(--spacing-m);
+  overflow: hidden;
+  padding-right: var(--spacing-m);
 }
 
 .Grid-cell--separator {
-    border-left: var(--border);
-    border-color: var(--secondary-light);
+  border-left: var(--border);
+  border-color: var(--secondary-light);
 }
 
 .Grid-cell--selected {
-    background: var(--primary-lightest);
+  background: var(--primary-lightest);
 }
 
 .Grid-cell--nestedRow {
-    padding-left: var(--spacing);
+  padding-left: var(--spacing);
 }
 
 .Grid-cell--head.Grid-cell:first-of-type {
-    border-left: none;
+  border-left: none;
 }
 
 /* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
@@ -2825,185 +2895,214 @@ body {
 } */
 
 .Grid-cell--head.Grid-cell--selected {
-    background: var(--primary-light);
+  background: var(--primary-light);
 }
 
 .Grid-cell--checkbox {
-    width: unset;
-    min-width: unset;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    padding-right: 0 !important;
-    overflow: visible !important;
+  width: unset;
+  min-width: unset;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+  padding-right: 0 !important;
+  overflow: visible !important;
 }
 
 .Grid-sortingIcons {
-    display: flex;
-    align-items: center;
-    padding-left: var(--spacing-m);
+  display: flex;
+  align-items: center;
+  padding-left: var(--spacing-m);
 }
 
 .Grid-cellReorder {
-    display: flex;
-    align-items: center;
-    cursor: -webkit-grab;
-    cursor: grab;
+  display: flex;
+  align-items: center;
+  cursor: -webkit-grab;
+  cursor: grab;
 }
 
 .Grid-cellReorder:active {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
 }
 
 .Grid-cellContent {
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    height: 100%;
-    box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .Grid-cell--head .Grid-cellContent {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .Grid-cellResize {
-    position: absolute;
-    right: 0;
-    width: var(--spacing-m);
-    cursor: ew-resize;
-    height: 100%;
+  position: absolute;
+  right: 0;
+  width: var(--spacing-m);
+  cursor: ew-resize;
+  height: 100%;
 }
 
 .Grid-cellSortIcon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 }
 
 .Grid-cellSortIcon:hover {
-    background: var(--secondary);
+  background: var(--secondary);
 }
 
 .Grid-cellResize:hover {
-    background: var(--primary);
+  background: var(--primary);
 }
 
 .Grid-reorderHighlighter {
-    position: absolute;
-    height: 100%;
-    border: 3px solid var(--primary-light);
-    z-index: 10;
+  position: absolute;
+  height: 100%;
+  border: 3px solid var(--primary-light);
+  z-index: 10;
 }
 
 .Grid-cellGroup {
-    display: flex;
-    box-sizing: border-box;
-    background: var(--white);
+  display: flex;
+  box-sizing: border-box;
+  background: var(--white);
 }
 
 .Grid-cellGroup--pinned {
-    position: -webkit-sticky;
-    position: sticky;
-    z-index: 1;
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
 }
 
 .Grid-cellGroup--pinned-left {
-    left: 0;
-    border-right: var(--border);
-    border-right-width: 4px;
-    -o-border-image: linear-gradient( to right, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
-       border-image: linear-gradient( to right, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
+  left: 0;
+  border-right: var(--border);
+  border-right-width: 4px;
+  -o-border-image: linear-gradient(
+      to right,
+      var(--secondary),
+      var(--secondary) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to right,
+      var(--secondary),
+      var(--secondary) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
 }
 
 .Grid-cellGroup--pinned-right {
-    right: 0;
-    border-left: var(--border);
-    border-left-width: 4px;
-    -o-border-image: linear-gradient( to left, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
-       border-image: linear-gradient( to left, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
+  right: 0;
+  border-left: var(--border);
+  border-left-width: 4px;
+  -o-border-image: linear-gradient(
+      to left,
+      var(--secondary),
+      var(--secondary) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
+     border-image: linear-gradient(
+      to left,
+      var(--secondary),
+      var(--secondary) 25%,
+      rgba(213, 213, 213, 0.1) 25%,
+      rgba(213, 213, 213, 0.1)
+    )
+    1 100%;
 }
 
 .Grid .Checkbox-wrapper {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 /** Grid Cell **/
 
 .GridCell {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .GridCell--align-left {
-    /* flex-direction: row; */
-    justify-content: flex-start;
-    text-align: left;
+  /* flex-direction: row; */
+  justify-content: flex-start;
+  text-align: left;
 }
 
 .GridCell--align-right {
-    /* flex-direction: row-reverse; */
-    justify-content: flex-end;
-    text-align: right;
+  /* flex-direction: row-reverse; */
+  justify-content: flex-end;
+  text-align: right;
 }
 
 .GridCell--align-center {
-    justify-content: center;
-    text-align: center;
+  justify-content: center;
+  text-align: center;
 }
 
-.GridCell--default {}
+.GridCell--default {
+}
 
 .GridCell--metaList {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: hidden;
 }
 
 .GridCell--avatar .Avatar {
-    margin: 0;
+  margin: 0;
 }
 
 .GridCell-metaListWrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
 }
 
 .GridCell-metaList {
-    display: flex;
+  display: flex;
 }
 
 .GridCell-metaList .Text {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .GridCell-metaList .Text::before {
-    content: '';
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--spacing-m);
-    height: var(--spacing-m);
-    border-radius: 50%;
-    background: var(--secondary);
-    margin: 0 var(--spacing);
+  content: '';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  border-radius: 50%;
+  background: var(--secondary);
+  margin: 0 var(--spacing);
 }
 
 .GridCell-metaList .Text:first-child::before {
-    display: none;
+  display: none;
 }
 
 .GridCell--metaList ul li:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 /* .GridCell-image {
@@ -3025,60 +3124,60 @@ body {
 /** Table-header **/
 
 .Header {
-    background: var(--white);
-    padding: var(--spacing-l);
-    border-bottom: var(--border);
+  background: var(--white);
+  padding: var(--spacing-l);
+  border-bottom: var(--border);
 }
 
 .Header-content {
-    display: flex;
+  display: flex;
 }
 
 .Header-content--bottom {
-    align-items: center;
-    justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .Header-search {
-    width: var(--spacing-9);
-    margin-bottom: var(--spacing-2);
+  width: var(--spacing-9);
+  margin-bottom: var(--spacing-2);
 }
 
 .Header-label {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
 }
 
 .Header-label .Checkbox {
-    margin-right: var(--spacing);
+  margin-right: var(--spacing);
 }
 
 .Header-dropdown {
-    display: flex;
-    margin-left: var(--spacing-m);
-    margin-bottom: var(--spacing-2);
+  display: flex;
+  margin-left: var(--spacing-m);
+  margin-bottom: var(--spacing-2);
 }
 
 .Header-dropdown .Dropdown {
-    margin: 0 var(--spacing-m);
+  margin: 0 var(--spacing-m);
 }
 
 .Header-draggableDropdown .Dropdown-wrapper {
-    max-height: 200px;
-    overflow-y: auto;
+  max-height: 200px;
+  overflow-y: auto;
 }
 
 .Header-filters {
-    display: flex;
+  display: flex;
 }
 
 .Header-sorting {
-    display: flex;
+  display: flex;
 }
 
 .Header-actions {
-    margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
 }
 
 .HorizontalNav {
@@ -3129,26 +3228,20 @@ body {
  * https://google.github.io/material-design-icons/
  */
 
-
 /* Rules for sizing the icon. */
 
-
 /* .material-icons.md-18 { font-size: 18px; }
 .material-icons.md-24 { font-size: 24px; }
 .material-icons.md-36 { font-size: 36px; }
 .material-icons.md-48 { font-size: 48px; } */
 
-
 /* Rules for using icons as black on a light background. */
 
-
 /* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
 .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */
 
-
 /* Rules for using icons as white on a dark background. */
 
-
 /* .material-icons.md-light { color: rgba(255, 255, 255, 1); }
 .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */
 .Icon {
@@ -3210,7 +3303,7 @@ body {
 }
 
 .Icon--alertLighter {
-  color: var(--alert-lighter );
+  color: var(--alert-lighter);
 }
 
 .Icon--alertDark {
@@ -3299,7 +3392,8 @@ body {
   padding-bottom: var(--spacing-s);
 }
 
-.InlineMessage-text--warning, .InlineMessage-icon--warning {
+.InlineMessage-text--warning,
+.InlineMessage-icon--warning {
   color: var(--accent1);
 }
 
@@ -3318,148 +3412,148 @@ body {
 /* input */
 
 .Input-input::-ms-clear {
-    display: none;
+  display: none;
 }
 
 .Input {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    border-radius: var(--spacing-m);
-    border: var(--border);
-    padding-right: var(--spacing-l);
-    padding-left: var(--spacing-l);
-    background: var(--white);
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: var(--spacing-m);
+  border: var(--border);
+  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-l);
+  background: var(--white);
 }
 
 .Input--tiny {
-    height: var(--spacing-xl);
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  height: var(--spacing-xl);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Input--regular {
-    height: var(--spacing-3);
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
+  height: var(--spacing-3);
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
 }
 
 .Input--large {
-    height: 40px;
+  height: 40px;
 }
 
 .Input--large .Input-input {
-    line-height: var(--font-height-m);
-    font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+  font-size: var(--font-size-m);
 }
 
 .Input:hover {
-    background: var(--secondary-lightest);
-    border-color: var(--secondary-lightest);
-    cursor: text;
+  background: var(--secondary-lightest);
+  border-color: var(--secondary-lightest);
+  cursor: text;
 }
 
 .Input:focus-within {
-    background: var(--white);
-    border-color: var(--primary);
-    box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background: var(--white);
+  border-color: var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Input:focus-within .Input-icon--left .Icon {
-    color: var(--primary);
+  color: var(--primary);
 }
 
 .Input--error:focus-within {
-    border-color: var(--alert);
-    box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-color: var(--alert);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Input--error:focus-within .Input-icon--left .Icon {
-    color: var(--alert);
+  color: var(--alert);
 }
 
 .Input--disabled {
-    background: var(--secondary-lightest);
-    border-color: var(--secondary-light);
-    pointer-events: none;
+  background: var(--secondary-lightest);
+  border-color: var(--secondary-light);
+  pointer-events: none;
 }
 
-.Input--disabled .Input-icon--left .Icon{
-    color: var(--inverse-lightest);
+.Input--disabled .Input-icon--left .Icon {
+  color: var(--inverse-lightest);
 }
 
 .Input--error,
 .Input--error:hover {
-    background: var(--white);
-    border-color: var(--alert);
+  background: var(--white);
+  border-color: var(--alert);
 }
 
 .Input-input {
-    display: flex;
-    width: 100%;
-    font-family: var(--font-family);
-    font-weight: var(--font-weight-normal);
-    font-size: var(--font-size);
-    line-height: var(--font-height-s);
-    color: var(--night);
-    padding: 0;
-    border: none;
-    background: transparent;
+  display: flex;
+  width: 100%;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  color: var(--night);
+  padding: 0;
+  border: none;
+  background: transparent;
 }
 
 .Input-input::-moz-placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-input:-ms-input-placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-input::placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-input:focus {
-    outline: 0;
+  outline: 0;
 }
 
 .Input-input:disabled .Input-input::-moz-placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-input:disabled .Input-input:-ms-input-placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-input:disabled .Input-input::placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-icon {
-    display: flex;
-    align-content: center;
-    font-size: var(--font-size-m);
+  display: flex;
+  align-content: center;
+  font-size: var(--font-size-m);
 }
 
 .Input-icon--left .Icon {
-    margin-right: var(--spacing);
-    color: var(--inverse);
+  margin-right: var(--spacing);
+  color: var(--inverse);
 }
 
-.Input-icon--disabled .Icon{
-    color: var(--inverse-lightest);
+.Input-icon--disabled .Icon {
+  color: var(--inverse-lightest);
 }
 
-.Input-icon--right .Icon{
-    cursor: pointer;
-    margin-left: var(--spacing);
-    color: var(--inverse-lightest);
+.Input-icon--right .Icon {
+  cursor: pointer;
+  margin-left: var(--spacing);
+  color: var(--inverse-lightest);
 }
 
 .Input-inlineLabel {
-    margin-right: var(--spacing);
+  margin-right: var(--spacing);
 }
 
 .Link {
@@ -3513,146 +3607,143 @@ body {
   color: var(--inverse-lightest);
   pointer-events: none;
 }
+
 .List {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    /* flex-grow: 0; */
-    height: 100%;
-    z-index: 1;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  /* flex-grow: 0; */
+  height: 100%;
+  z-index: 1;
 }
 
 .List-grid {
-    height: 100%;
-    overflow: hidden;
-    height: 100%;
+  height: 100%;
+  overflow: hidden;
+  height: 100%;
 }
+
 .Message {
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-    padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
-    border: var(--spacing-xs) solid;
-    width: 100%;
-    border-radius: var(--spacing-m);
-    box-sizing: border-box;
-  }
-  
-  .Message--alert {
-    border-color: var(--alert);
-    background-color: rgba(249, 226, 226, 0.4);
-  }
-  
-  .Message--success {
-    border-color: var(--success);
-    background-color: rgba(215, 239, 223, 0.4);
-  }
-  
-  .Message--info {
-    border-color: var(--primary);
-    background-color: rgba(220, 236, 249, 0.4);
-  }
-  
-  .Message--warning {
-    border-color: var(--accent1);
-    background-color: rgba(255, 245, 199, 0.4);
-  }
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
+  border: var(--spacing-xs) solid;
+  width: 100%;
+  border-radius: var(--spacing-m);
+  box-sizing: border-box;
+}
 
-  .Message--default {
-    border-color: var(--secondary-dark);
-    background-color: var(--white);
-  }
-  
-  .Message-icon {
-    margin-right: var(--spacing-2);
-    padding-top: var(--spacing-s);
-  }
+.Message--alert {
+  border-color: var(--alert);
+  background-color: rgba(249, 226, 226, 0.4);
+}
 
-  .Message-icon--withTitle {
-    padding-top: var(--spacing-m);
-  }
+.Message--success {
+  border-color: var(--success);
+  background-color: rgba(215, 239, 223, 0.4);
+}
 
-  .Message-icon--warning {
-    color: var(--accent1);
-  }
-  
-  .Message-heading {
-    margin-bottom: var(--spacing-m);
-  }
+.Message--info {
+  border-color: var(--primary);
+  background-color: rgba(220, 236, 249, 0.4);
+}
 
-  .Message-heading--alert,
-  .Message-text--alert {
-    color: var(--alert-darker) !important;
-  }
+.Message--warning {
+  border-color: var(--accent1);
+  background-color: rgba(255, 245, 199, 0.4);
+}
 
-  .Message-heading--info,
-  .Message-text--info {
-    color: var(--primary-darker) !important;
-  }
+.Message-icon {
+  margin-right: var(--spacing-2);
+  padding-top: var(--spacing-s);
+}
 
-  .Message-heading--success,
-  .Message-text--success {
-    color: var(--success-darker) !important;
-  }
+.Message-icon--withTitle {
+  padding-top: var(--spacing-m);
+}
 
-  .Message-heading--warning,
-  .Message-text--warning {
-    color: var(--accent1-darker) !important;
-  }
+.Message-icon--warning {
+  color: var(--accent1);
+}
+
+.Message-heading {
+  margin-bottom: var(--spacing-m);
+}
+
+.Message-heading--alert,
+.Message-text--alert {
+  color: var(--alert-darker) !important;
+}
+
+.Message-heading--info,
+.Message-text--info {
+  color: var(--primary-darker) !important;
+}
+
+.Message-heading--success,
+.Message-text--success {
+  color: var(--success-darker) !important;
+}
+
+.Message-heading--warning,
+.Message-text--warning {
+  color: var(--accent1-darker) !important;
+}
+
+.Message-actions {
+  display: flex;
+  align-items: center;
+  margin-top: var(--spacing-l);
+}
 
-  .Message-actions {
-    display: flex;
-    align-items: center;
-    margin-top: var(--spacing-l);
-  }
- 
 .Meta {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    font-size: var(--font-size);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: var(--font-size);
 }
 
 .MetaList-seperator {
-    margin-left: var(--spacing);
+  margin-left: var(--spacing);
 }
-.MetaList-seperator--left{
-    margin-right: var(--spacing-m);
+.MetaList-seperator--left {
+  margin-right: var(--spacing-m);
 }
-.Meta-icon{
-    padding-right: var( --spacing-m);
-    display: flex;
-    align-items: center;
+.Meta-icon {
+  padding-right: var(--spacing-m);
+  display: flex;
+  align-items: center;
 }
 .MetaList {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    font-size: var(--font-size);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: var(--font-size);
 }
 .MetaList-item {
-    margin: 0 var(--spacing-m);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    font-size: var(--font-size);
+  margin: 0 var(--spacing-m);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: var(--font-size);
 }
 
 .MetaList-item:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .MetaList-item:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .MetricInput-input::-ms-clear {
@@ -3805,12 +3896,12 @@ body {
   margin-top: var(--spacing-s);
 }
 
-.MetricInput-input::-webkit-inner-spin-button, 
-.MetricInput-input::-webkit-outer-spin-button { 
+.MetricInput-input::-webkit-inner-spin-button,
+.MetricInput-input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  margin: 0; 
+  margin: 0;
 }
 
 @-webkit-keyframes modal-open {
@@ -3927,6 +4018,7 @@ body {
 .Modal-body--withPadding {
   padding-bottom: var(--spacing-2);
 }
+
 /* Navigation */
 
 .Navigation {
@@ -4022,7 +4114,7 @@ body {
   overflow: hidden;
 }
 
-.Navigation-menu  .Text {
+.Navigation-menu .Text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4043,12 +4135,13 @@ body {
 }
 
 .Navigation-footer--border {
-  border-top: var(--border)
+  border-top: var(--border);
 }
 
 .Navigation--collapsed .Navigation-menuIcon--footer {
   transform: rotate(180deg);
 }
+
 .OverlayHeader {
   box-sizing: border-box;
   margin-left: var(--spacing-xl);
@@ -4102,7 +4195,7 @@ body {
 .PageHeader-wrapper {
   padding: var(--spacing) var(--spacing-2);
 }
-.PageHeader-wrapper--separator{
+.PageHeader-wrapper--separator {
   border-bottom: var(--border);
 }
 
@@ -4139,7 +4232,6 @@ body {
 }
 
 .PageHeader-navigationWrapper {
-  display: inline-flex;
   margin-top: var(--spacing-l);
 }
 
@@ -4158,94 +4250,97 @@ body {
 /* pagination */
 
 .Pagination {
-    display: flex;
-    vertical-align: middle;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  vertical-align: middle;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .Pagination .Button {
-    padding-left: var(--spacing);
-    padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
 }
 
 .Pagination-buttonWrapper {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .Pagination-pageIndex {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing-l);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
 }
 
-.Pagination-MetricInput{
-    width: var(--spacing-4);
-    margin-right: var(--spacing);
-    padding-left: var(--spacing-m);
-    padding-right: var(--spacing-m);
+.Pagination-MetricInput {
+  width: var(--spacing-4);
+  margin-right: var(--spacing);
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-m);
 }
 
 .Pagination-MetricInput .MetricInput-input {
-    text-align: center;
+  text-align: center;
 }
-.Pagination-MetricInput .MetricInput-arrowIcons{
-    display: none;
+.Pagination-MetricInput .MetricInput-arrowIcons {
+  display: none;
 }
 
 @media (max-width: 575px) {
-    .Pagination-pageIndex {
-        order: -1;
-        flex-basis: 100%;
-    }
-    .Pagination-buttonWrapper {
-        margin-top: var(--spacing);
-        width: 50%;
-    }
-    .Pagination-buttonWrapper--next {
-        justify-content: flex-start;
-    }
-    .Pagination-buttonWrapper--previous {
-        justify-content: flex-end;
-    }
+  .Pagination-pageIndex {
+    order: -1;
+    flex-basis: 100%;
+  }
+  .Pagination-buttonWrapper {
+    margin-top: var(--spacing);
+    width: 50%;
+  }
+  .Pagination-buttonWrapper--next {
+    justify-content: flex-start;
+  }
+  .Pagination-buttonWrapper--previous {
+    justify-content: flex-end;
+  }
 }
+
 .Pills {
-	/* 160px */
-	max-width: calc(var(--spacing-2) * 10);
-	/* truncate */
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: var(--font-size-s);
-	line-height: var(--font-height-s);
-    text-transform: uppercase;
-    padding-right: 6px;
-    padding-left: 6px;
-	padding-top: var(--spacing-s);
-	padding-bottom: var(--spacing-s);
-	border-radius: 20px;
-	display: inline-block;
-	box-sizing: border-box;
-	font-weight: var(--font-weight-bold);
-	cursor: default;
+  /* 160px */
+  max-width: calc(var(--spacing-2) * 10);
+  /* truncate */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  text-transform: uppercase;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
+  border-radius: 20px;
+  display: inline-block;
+  box-sizing: border-box;
+  font-weight: var(--font-weight-bold);
+  cursor: default;
 }
+
 @-webkit-keyframes shimmer {
-  0%{
-    background-position: -500px 0
+  0% {
+    background-position: -500px 0;
   }
-  100%{
-    background-position: 500px 0
+  100% {
+    background-position: 500px 0;
   }
 }
+
 @keyframes shimmer {
-  0%{
-    background-position: -500px 0
+  0% {
+    background-position: -500px 0;
   }
-  100%{
-    background-position: 500px 0
+  100% {
+    background-position: 500px 0;
   }
 }
 
@@ -4262,7 +4357,12 @@ body {
   -webkit-animation-timing-function: linear;
           animation-timing-function: linear;
   background: var(--secondary-lightest);
-  background: linear-gradient(to right, var(--secondary-lighter) 8%, var(--secondary-dark) 18%, var(--secondary-lighter) 33%);
+  background: linear-gradient(
+    to right,
+    var(--secondary-lighter) 8%,
+    var(--secondary-dark) 18%,
+    var(--secondary-lighter) 33%
+  );
   background-size: 1000px 104px;
 }
 
@@ -4415,10 +4515,11 @@ body {
   color: var(--white);
 }
 
-.Popover[data-hide="true"] {
+.Popover[data-hide='true'] {
   visibility: hidden;
   pointer-events: none;
 }
+
 .Ring {
   transform: rotate(-90deg);
 }
@@ -4445,142 +4546,143 @@ body {
   stroke: var(--primary);
   transition: stroke-dashOffset 200ms;
 }
+
 /* Radio */
 
 .Radio {
-    display: flex;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    padding-top: var(--spacing-s);
-    padding-bottom: var(--spacing-s);
+  display: flex;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
 }
 
 .Radio-outerWrapper {
-    position: relative;
-    flex-shrink: 0;
-    margin-top: var(--spacing-s);
+  position: relative;
+  flex-shrink: 0;
+  margin-top: var(--spacing-s);
 }
 
 .Radio-outerWrapper--regular {
-    height: var(--spacing-2);
-    width: var(--spacing-2);
+  height: var(--spacing-2);
+  width: var(--spacing-2);
 }
 
 .Radio-outerWrapper--tiny {
-    height: var(--spacing-l);
-    width: var(--spacing-l);
+  height: var(--spacing-l);
+  width: var(--spacing-l);
 }
 
 .Radio-input {
-    opacity: 0;
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    z-index: 2;
-    margin: 0;
-    cursor: pointer;
+  opacity: 0;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 2;
+  margin: 0;
+  cursor: pointer;
 }
 
 .Radio-labelWrapper {
-    padding-left: var(--spacing);
-    display: flex;
-    flex-direction: column;
+  padding-left: var(--spacing);
+  display: flex;
+  flex-direction: column;
 }
 
-.Radio-Label{
-    display: flex;
-    cursor: pointer;
+.Radio-Label {
+  display: flex;
+  cursor: pointer;
 }
 
 .Radio-wrapper {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    border: var(--border);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    z-index: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  border: var(--border);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  z-index: 1;
 }
 
 .Radio--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Radio:hover .Radio-wrapper {
-    border: var(--spacing-xs) solid var(--inverse-lightest);
+  border: var(--spacing-xs) solid var(--inverse-lightest);
 }
 
 .Radio:active .Radio-wrapper {
-    background-color: var(--secondary-light);
-    border: var(--spacing-xs) solid var(--inverse-lightest);
+  background-color: var(--secondary-light);
+  border: var(--spacing-xs) solid var(--inverse-lightest);
 }
 
 .Radio--disabled .Radio-wrapper {
-    border: var(--spacing-xs) solid var(--secondary-light);
-    background-color: var(--secondary-lightest);
+  border: var(--spacing-xs) solid var(--secondary-light);
+  background-color: var(--secondary-lightest);
 }
 
-.Radio-input:checked~.Radio-wrapper {
-    border: var(--spacing-xs) solid var(--primary);
+.Radio-input:checked ~ .Radio-wrapper {
+  border: var(--spacing-xs) solid var(--primary);
 }
 
-.Radio-input:checked~.Radio-wrapper:focus {
-    border: var(--spacing-xs) solid var(--primary-dark);
+.Radio-input:checked ~ .Radio-wrapper:focus {
+  border: var(--spacing-xs) solid var(--primary-dark);
 }
 
-.Radio-input:checked~.Radio-wrapper:after {
-    display: block;
+.Radio-input:checked ~ .Radio-wrapper:after {
+  display: block;
 }
 
 .Radio-wrapper:after {
-    content: "";
-    display: none;
-    border-radius: 50%;
-    background: var(--primary);
+  content: '';
+  display: none;
+  border-radius: 50%;
+  background: var(--primary);
 }
 
 .Radio-wrapper--regular:after {
-    width: var(--spacing);
-    height: var(--spacing);
+  width: var(--spacing);
+  height: var(--spacing);
 }
 
 .Radio-wrapper--tiny:after {
-    width: var(--spacing-m);
-    height: var(--spacing-m); 
-    border: var(--spacing-xs) solid var(--primary);
+  width: var(--spacing-m);
+  height: var(--spacing-m);
+  border: var(--spacing-xs) solid var(--primary);
 }
 
-.Radio-outerWrapper:hover .Radio-input:checked~.Radio-wrapper{
-    border: var(--spacing-xs) solid var(--primary-dark);
+.Radio-outerWrapper:hover .Radio-input:checked ~ .Radio-wrapper {
+  border: var(--spacing-xs) solid var(--primary-dark);
 }
 
-.Radio:hover .Radio-input:checked~.Radio-wrapper:after{
-    background: var(--primary-dark);
+.Radio:hover .Radio-input:checked ~ .Radio-wrapper:after {
+  background: var(--primary-dark);
 }
 
-.Radio:active .Radio-input:checked~.Radio-wrapper{
-    background: var(--white);
-    border: var(--spacing-xs) solid var(--primary-darker);
+.Radio:active .Radio-input:checked ~ .Radio-wrapper {
+  background: var(--white);
+  border: var(--spacing-xs) solid var(--primary-darker);
 }
 
-.Radio-outerWrapper:active .Radio-input:checked~.Radio-wrapper:after{
-    background: var(--primary-darker);
+.Radio-outerWrapper:active .Radio-input:checked ~ .Radio-wrapper:after {
+  background: var(--primary-darker);
 }
 
-.Radio--disabled .Radio-input:checked~.Radio-wrapper {
-    border: var(--spacing-xs) solid var(--primary-lighter);
-    background-color: var(--white);
+.Radio--disabled .Radio-input:checked ~ .Radio-wrapper {
+  border: var(--spacing-xs) solid var(--primary-lighter);
+  background-color: var(--white);
 }
 
-.Radio--disabled .Radio-input:checked~.Radio-wrapper:after {
-    background: var(--primary-lighter);
+.Radio--disabled .Radio-input:checked ~ .Radio-wrapper:after {
+  background: var(--primary-lighter);
 }
 
 @-webkit-keyframes sidesheet-open {
@@ -4686,7 +4788,6 @@ body {
   bottom: 0;
 }
 
-
 .Slider {
   width: 100%;
 }
@@ -4726,7 +4827,7 @@ body {
 
 .Slider-label {
   margin-top: var(--spacing-m);
-  transform: translate(-50%,0px);
+  transform: translate(-50%, 0px);
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -4734,7 +4835,7 @@ body {
   -webkit-user-select: none;
           user-select: none;
   -moz-user-select: none;
-  -ms-user-select: none;        
+  -ms-user-select: none;
 }
 
 .Slider-ticks {
@@ -4780,7 +4881,8 @@ body {
   border: var(--border);
 }
 
-.Slider-handle:focus, .Slider-handle:active {
+.Slider-handle:focus,
+.Slider-handle:active {
   border: var(--spacing-s) solid var(--primary);
 }
 
@@ -4878,41 +4980,42 @@ body {
 }
 
 .StatusHint {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
 .StatusHint-icon {
-    flex-shrink: 0;
-    border-radius: 50%;
-    height: var(--spacing);
-    width: var(--spacing);
-    margin-right: var(--spacing);
+  flex-shrink: 0;
+  border-radius: 50%;
+  height: var(--spacing);
+  width: var(--spacing);
+  margin-right: var(--spacing);
 }
 
 .StatusHint--alert {
-    background: var(--alert);
+  background: var(--alert);
 }
 
 .StatusHint--success {
-    background: var(--success);
+  background: var(--success);
 }
 
 .StatusHint--warning {
-    background: var(--warning);
+  background: var(--warning);
 }
 
 .StatusHint--info {
-    background: var(--primary);
+  background: var(--primary);
 }
 
 .StatusHint--default {
-    background: var(--secondary);
+  background: var(--secondary);
 }
+
 .Stepper {
   display: flex;
 }
@@ -4938,224 +5041,250 @@ body {
 }
 
 .Switch {
-    display: inline-flex;
-    position: relative;
+  display: inline-flex;
+  position: relative;
 }
 
 .Switch--tiny {
-    height: var(--spacing-2);
-    width: var(--spacing-3);
+  height: var(--spacing-2);
+  width: var(--spacing-3);
 }
 
 .Switch--regular {
-    height: var(--spacing-xl);
-    width: var(--spacing-4);
+  height: var(--spacing-xl);
+  width: var(--spacing-4);
 }
 
 .Switch--large {
-    height: var(--spacing-3);
-    width: var(--spacing-5);
+  height: var(--spacing-3);
+  width: var(--spacing-5);
 }
 
 .Switch-input {
-    position: absolute;
-    cursor: pointer;
-    z-index: 10;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
+  position: absolute;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
 .Switch-wrapper {
-    display: flex;
-    align-items: center;
-    line-height: 100%;
-    padding: var(--spacing-xs);
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--secondary-light);
+  display: flex;
+  align-items: center;
+  line-height: 100%;
+  padding: var(--spacing-s);
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--secondary-light);
+}
+
+.Switch-input:focus ~ .Switch-wrapper {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.Switch-input:focus ~ .Switch-wrapper--checked {
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Switch-input:hover ~ .Switch-wrapper {
+  background-color: var(--secondary-light);
+  box-shadow: var(--shadow-s);
+}
+
+.Switch-input:hover ~ .Switch-wrapper--checked {
+  background-color: var(--primary-dark);
+  box-shadow: var(--shadow-s);
+}
+
+.Switch-input:active ~ .Switch-wrapper {
+  background-color: var(--secondary-dark);
+}
+
+.Switch-input:active ~ .Switch-wrapper--checked {
+  background-color: var(--primary-darker);
 }
 
 .Switch-wrapper--tiny {
-    border-radius: 10px;
+  border-radius: 10px;
 }
 
 .Switch-wrapper--regular {
-    border-radius: 34px;
+  border-radius: 34px;
 }
 
 .Switch-wrapper--large {
-    border-radius: 38px;
+  border-radius: 38px;
 }
 
 .Switch-wrapper:before {
-    content: "";
-    height: 100%;
-    width: 50%;
-    background-color: var(--shadow-0);
-    box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
-    border-radius: 50%;
-    box-sizing: border-box;
+  content: '';
+  height: 100%;
+  width: 50%;
+  background-color: var(--shadow-0);
+  box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
+  border-radius: 50%;
+  box-sizing: border-box;
 }
 
 .Switch-wrapper--checked {
-    background-color: var(--primary);
+  background-color: var(--primary);
 }
 
 .Switch-wrapper--checked:before {
-    transform: translateX(100%);
+  transform: translateX(100%);
 }
 
 .Switch--disabled {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 .Switch-wrapper--disabled:before {
-    background-color: var(--secondary-lightest);
+  background-color: var(--secondary-lightest);
 }
 
 .Switch-wrapper--checkedDisabled {
-    background-color: var(--primary-lighter);
+  background-color: var(--primary-lighter);
 }
 
 .Table {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
 }
 
 .Table-grid {
-    height: 100%;
-    overflow: hidden;
-    z-index: 1;
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
 }
 
 .Table-pagination {
-    display: flex;
-    justify-content: center;
-    background: var(--white);
-    padding: var(--spacing) 0;
-    border-top: var(--border);
+  display: flex;
+  justify-content: center;
+  background: var(--white);
+  padding: var(--spacing) 0;
+  border-top: var(--border);
 }
+
 /* tabs */
 
 .TabsWrapper {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
 }
 
 .TabsWrapper-header {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 }
 
 .TabsWrapper-header--withSeparator {
-    border-bottom: var(--border);
+  border-bottom: var(--border);
 }
 
 .Tab {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    min-width: 40px;
-    padding: var(--spacing-l);
-    margin-left: calc(-1 * var(--spacing-l));
-    margin-right: var(--spacing-l);
-    margin-bottom: calc(-1 * var(--spacing-xs));
-    text-align: center;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  min-width: 40px;
+  padding: var(--spacing-l);
+  margin-left: calc(-1 * var(--spacing-l));
+  margin-right: var(--spacing-l);
+  margin-bottom: calc(-1 * var(--spacing-xs));
+  text-align: center;
 }
 
 .Tab:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .Tab::after {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    content: '';
-    width: calc(100% - 2*var(--spacing-l));
-    height: var(--spacing-s);
-    background-color: transparent; 
-    margin-left: var(--spacing-l);
-    border-top-left-radius: var(--spacing-xs);
-    border-top-right-radius: var(--spacing-xs);
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  content: '';
+  width: calc(100% - 2 * var(--spacing-l));
+  height: var(--spacing-s);
+  background-color: transparent;
+  margin-left: var(--spacing-l);
+  border-top-left-radius: var(--spacing-xs);
+  border-top-right-radius: var(--spacing-xs);
 }
 
 .Tab:hover::after {
-    background-color: var(--primary-dark); 
+  background-color: var(--primary-dark);
 }
 
 .Tab:active::after {
-    background-color: var(--primary-darker);
+  background-color: var(--primary-darker);
 }
 
 .Tab--active::after {
-    background-color: var(--primary);
+  background-color: var(--primary);
 }
 
 .Tab:focus {
-    outline: none;
-    border-radius: 4px;
-    /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
-    box-shadow: rgba(0, 112, 221, 0.2) 0px 0px 0px var(--spacing-s) inset;
+  outline: none;
+  border-radius: 4px;
+  /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
+  box-shadow: rgba(0, 112, 221, 0.2) 0px 0px 0px var(--spacing-s) inset;
 }
 
 .Tab:active:focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .Tab--disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .Tab--disabled:hover::after {
-    background-color: transparent; 
+  background-color: transparent;
 }
 
 .Tab-count {
-    display: flex;
-    margin-right: var(--spacing-l);
+  display: flex;
+  margin-right: var(--spacing-l);
 }
 
 .Tab-count .Badge {
-    margin-left: 0;
-    margin-right: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .Tab-icon {
-    display: flex;
-    min-width: inherit;
-    justify-content: space-between;
+  display: flex;
+  min-width: inherit;
+  justify-content: space-between;
 }
 
 .Tabs {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: row;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
 }
 
 .Tabs--withSeparator {
-    border-bottom: var(--border);
+  border-bottom: var(--border);
 }
 
 .Tab-pills {
-    cursor: pointer;
-    margin-right: var(--spacing);
+  cursor: pointer;
+  margin-right: var(--spacing);
 }
 
 .Tab-pills--disabled {
-    opacity: 60%;
+  opacity: 60%;
 }
 
 /* Textarea */
@@ -5226,177 +5355,174 @@ body {
   border-radius: var(--spacing);
   background-color: var(--secondary);
 }
+
 /* toast */
 
 .Toast {
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
 
-    width: 360px;
-    border-radius: var(--spacing-m);
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-2);
-    padding-top: var(--spacing-l);
-    padding-bottom: var(--spacing-l);
+  width: 360px;
+  border-radius: var(--spacing-m);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
 }
 
 .Toast--withMessage {
-    padding-bottom: var(--spacing-2);
-}
-
-.Toast--default {
-    padding-left: var(--spacing-xl);
-    background-color: var(--inverse);
+  padding-bottom: var(--spacing-2);
 }
 
 .Toast--info {
-    background-color: var(--primary);
+  background-color: var(--primary);
 }
 
 .Toast--alert {
-    background-color: var(--alert);
+  background-color: var(--alert);
 }
 
 .Toast--success {
-    background-color: var(--success);
+  background-color: var(--success);
 }
 
 .Toast--warning {
-    background-color: var(--warning);
+  background-color: var(--warning);
 }
 
 .Toast--warning {
-    color: var(--text);
+  color: var(--text);
 }
 
 .Toast-icon {
-    display: flex;
-    line-height: var(--font-height-m);
+  display: flex;
+  line-height: var(--font-height-m);
 }
 
 .Toast-icon--left {
-    margin-right: var(--spacing-2);
+  margin-right: var(--spacing-2);
 }
 
 .Toast-icon--right {
-    cursor: pointer;
-    margin-left: var(--spacing-2);
+  cursor: pointer;
+  margin-left: var(--spacing-2);
 }
 
 .Toast-icon--info,
 .Toast-icon--success,
 .Toast-icon--alert,
 .Toast-icon--default {
-    color: var(--text-white);
+  color: var(--text-white);
 }
 
 .Toast-icon--warning {
-    color: var(--warning-darker);
+  color: var(--warning-darker);
 }
 
 .Toast-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .Toast-title {
-    display: flex;
+  display: flex;
 }
 
 .Toast-heading {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .Toast-text {
-    padding-top: var(--spacing);
+  padding-top: var(--spacing);
 }
 
 .Toast-text--warning,
 .Toast-heading--warning {
-    color: var(--warning-darker) !important;
+  color: var(--warning-darker) !important;
 }
 
 .Toast-actions {
-    display: flex;
-    padding-top: var(--spacing-l);
+  display: flex;
+  padding-top: var(--spacing-l);
 }
 
 .Toast-actionButton {
-    color: var(--text-white);
-    border-radius: var(--spacing-m);
-    margin-right: var(--spacing);
+  color: var(--text-white);
+  border-radius: var(--spacing-m);
+  margin-right: var(--spacing);
 }
 
 .Toast-actionButton:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .Toast-actionButton--default {
-    background: var(--inverse-light);
+  background: var(--inverse-light);
 }
 
 .Toast-actionButton--default:hover,
 .Toast-actionButton--default:active {
-    background: var(--inverse);
+  background: var(--inverse);
 }
 
 .Toast-actionButton--default:focus {
-    box-shadow: var(--shadow-spread) rgba(134, 134, 134, 0.16);
+  box-shadow: var(--shadow-spread) rgba(134, 134, 134, 0.16);
 }
 
 .Toast-actionButton--info {
-    background: var(--primary-dark);
+  background: var(--primary-dark);
 }
 
 .Toast-actionButton--info:hover,
 .Toast-actionButton--info:active {
-    background: var(--primary-darker);
+  background: var(--primary-darker);
 }
 
 .Toast-actionButton--info:focus {
-    box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
+  box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
 }
 
 .Toast-actionButton--success {
-    background: var(--success-dark);
+  background: var(--success-dark);
 }
 
 .Toast-actionButton--success:hover,
 .Toast-actionButton--success:active {
-    background: var(--success-darker);
+  background: var(--success-darker);
 }
 
 .Toast-actionButton--success:focus {
-    box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
+  box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
 }
 
 .Toast-actionButton--alert {
-    background: var(--alert-dark);
+  background: var(--alert-dark);
 }
 
 .Toast-actionButton--alert:hover,
 .Toast-actionButton--alert:active {
-    background: var(--alert-darker);
+  background: var(--alert-darker);
 }
 
 .Toast-actionButton--alert:focus {
-    box-shadow: var(--shadow-spread) var(--alert-shadow);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Toast-actionButton--warning {
-    background: var(--warning-dark);
+  background: var(--warning-dark);
 }
 
 .Toast-actionButton--warning:hover,
 .Toast-actionButton--warning:active {
-    background: var(--warning-darker);
+  background: var(--warning-darker);
 }
 
 .Toast-actionButton--warning:focus {
-    box-shadow: var(--shadow-spread) var(--warning-shadow);
+  box-shadow: var(--shadow-spread) var(--warning-shadow);
 }
+
 .Tooltip {
   max-width: var(--spacing-9);
   padding: var(--spacing) var(--spacing-2);
@@ -5417,7 +5543,6 @@ body {
           hyphens: auto;
 }
 
-
 .VerificationCodeInput-Input {
   display: inline-flex;
   width: 40px;
@@ -5427,10 +5552,10 @@ body {
   text-align: center;
 }
 
-.VerificationCodeInput-Input .Input-input::-webkit-inner-spin-button, 
-.VerificationCodeInput-Input .Input-input::-webkit-outer-spin-button { 
-  -webkit-appearance: none; 
-  margin: 0; 
+.VerificationCodeInput-Input .Input-input::-webkit-inner-spin-button,
+.VerificationCodeInput-Input .Input-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 .VerticalNav {
@@ -5514,7 +5639,7 @@ body {
   padding-left: 40px;
 }
 
-.MenuItem  .Text {
+.MenuItem .Text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5551,6 +5676,7 @@ body {
 .align-text-top {
   vertical-align: text-top !important;
 }
+
 .bg-primary {
   background-color: var(--primary) !important;
 }
@@ -5590,6 +5716,7 @@ body {
 .bg-transparent {
   background-color: transparent !important;
 }
+
 .border {
   border: var(--border) !important;
 }
@@ -5633,6 +5760,7 @@ body {
 .cursor-pointer {
   cursor: pointer;
 }
+
 .d-none {
   display: none !important;
 }
@@ -5668,6 +5796,7 @@ body {
 .d-inline-flex {
   display: inline-flex !important;
 }
+
 .flex-fill {
   flex: 1 1 auto !important;
 }
@@ -5839,6 +5968,7 @@ body {
 .order-last {
   order: 6 !important;
 }
+
 .Row {
   display: flex;
   flex-wrap: wrap;
@@ -6199,6 +6329,7 @@ body {
     width: calc(100% / var(--grid-columns) * 12);
   }
 }
+
 .overflow-auto {
   overflow: auto !important;
 }
@@ -6206,6 +6337,7 @@ body {
 .overflow-hidden {
   overflow: hidden !important;
 }
+
 .position-static {
   position: static !important;
 }
@@ -6226,6 +6358,7 @@ body {
   position: -webkit-sticky !important;
   position: sticky !important;
 }
+
 .w-25 {
   width: 25% !important;
 }
@@ -7249,32 +7382,34 @@ body {
 .pl-auto {
   padding-left: auto !important;
 }
+
 /** utility **/
 
 .hide-scroll-bar::-webkit-scrollbar {
-    height: 0px;
-    /* Remove scrollbar space */
-    background: transparent;
-    /* Optional: just make scrollbar invisible */
+  height: 0px;
+  /* Remove scrollbar space */
+  background: transparent;
+  /* Optional: just make scrollbar invisible */
 }
 
 .hide-scroll-bar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
 
 .ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .ellipsis--noWrap {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .cursor-pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
+
 /*# sourceMappingURL=index.css.map */