@charset "UTF-8";

body.default {
  --font-family: "Open Sans";
  --font-line-height: 1.36;
  --font-size: 14px;
  --font-size-large: 1.538em;
  --font-size-medium: 1.23em;
  --font-size-small: 0.923em;
  --font-color: #212427;
  --font-color-opposite: #ffffff;
  --color-primary: #0267C3;
  --color-primary-light: #2e9afd;
  --color-primary-dark: #01325e;
  --color-primary-soft: #acd7fe;
  --color-secondary: #C35E01;
  --color-secondary-light: #fe912c;
  --color-secondary-dark: #5e2d00;
  --color-secondary-soft: #ffd3ab;
  --color-neutral: #929598;
  --color-neutral-light: #acafb1;
  --color-neutral-lighter: #c6c8ca;
  --color-neutral-lightest: #e1e2e2;
  --color-neutral-dark: #787c7f;
  --color-neutral-darker: #5f6265;
  --color-neutral-darkest: #46494b;
  --color-danger: #E80202;
  --color-danger-light: #fe5252;
  --color-danger-dark: #830101;
  --color-warning: #E4C903;
  --color-warning-light: #fde850;
  --color-warning-dark: #7f7002;
  --color-success: #008A1C;
  --color-success-light: #00bd26;
  --color-success-dark: #002407;
  --border-color: #929598;
}

body.client {
  --font-family: Calibri;
  --font-size: 12px;
  --font-color: green;
  --font-color-opposite: #ff7fff;
  --color-primary: pink;
  --color-primary-light: white;
  --color-primary-dark: #ff5a77;
  --color-primary-soft: white;
  --color-secondary: green;
  --color-secondary-light: #00e600;
  --color-secondary-dark: #001a00;
  --color-neutral: purple;
  --color-neutral-light: #b300b3;
  --color-neutral-lighter: #e600e6;
  --color-neutral-lightest: #ff1aff;
  --color-neutral-dark: #4d004d;
  --color-neutral-darker: #1a001a;
  --color-neutral-darkest: black;
  --color-danger: blue;
  --color-danger-light: #6666ff;
  --color-danger-dark: #000099;
  --color-warning: orange;
  --color-warning-light: #ffc966;
  --color-warning-dark: #996300;
  --color-success: yellow;
  --color-success-light: #ffff66;
  --color-success-dark: #999900;
}

.icon-add {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M24.02,0c-6.93,0-6.98,0-6.98,17.41C0,17.41,0,17.44,0,23.28c0,7.11,0,7.17,17.41,7.17 C17.41,48,17.51,48,24.07,48c6.37,0,6.38,0,6.38-17.74c17.69,0,17.69,0.04,17.69-6.14c0-6.72-0.19-6.71-17.79-6.71 C30.36,0,30.4,0,24.02,0z"/> </g></svg>');
  background-color: var(--color-success);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-add-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M24.02,0c-6.93,0-6.98,0-6.98,17.41C0,17.41,0,17.44,0,23.28c0,7.11,0,7.17,17.41,7.17 C17.41,48,17.51,48,24.07,48c6.37,0,6.38,0,6.38-17.74c17.69,0,17.69,0.04,17.69-6.14c0-6.72-0.19-6.71-17.79-6.71 C30.36,0,30.4,0,24.02,0z"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-add-dispense {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M43.17,24.71l1.62-2.52c4.57-7.43,3.36-12.6-0.74-17.22L43.18,4.1c-5.47-5.47-14.33-5.47-19.8,0L4.34,23.14	c-5.47,5.47-5.78,14.48-0.32,19.95l1.23,1.21C9.49,48.54,18.4,49.34,22,45.53l1.22-1.22c0,0,0-0.01,0-0.01c0-3.44,0.04-3.1,0.04-3.1	s0-1.69-0.06-1.96c-5.61,7.5-12.05,5.19-16.12,1.12c-9-9,1.68-15.81,8.55-22.77l10.92,10.92c0.51,0,1.04,0,1.61,0 c0-1.6,0-2.97,0.01-4.16l-9.57-9.57c7.73-7.55,12.77-16.81,22.6-6.98c5.61,5.61,0.23,12.88-2.86,17"/><path d="M38.34,28.48c-2.82,0-2.84,0-2.84,7.08c-6.93,0-6.93,0.01-6.93,2.39c0,2.89,0,2.92,7.08,2.92 c0,7.14,0.04,7.14,2.71,7.14c2.59,0,2.59,0,2.59-7.21c7.19,0,7.19,0.02,7.19-2.5c0-2.73-0.08-2.73-7.23-2.73	C40.91,28.48,40.93,28.48,38.34,28.48z"/> </g></svg>');
  background-color: var(--color-success);
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-add-dispense-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M43.17,24.71l1.62-2.52c4.57-7.43,3.36-12.6-0.74-17.22L43.18,4.1c-5.47-5.47-14.33-5.47-19.8,0L4.34,23.14	c-5.47,5.47-5.78,14.48-0.32,19.95l1.23,1.21C9.49,48.54,18.4,49.34,22,45.53l1.22-1.22c0,0,0-0.01,0-0.01c0-3.44,0.04-3.1,0.04-3.1	s0-1.69-0.06-1.96c-5.61,7.5-12.05,5.19-16.12,1.12c-9-9,1.68-15.81,8.55-22.77l10.92,10.92c0.51,0,1.04,0,1.61,0 c0-1.6,0-2.97,0.01-4.16l-9.57-9.57c7.73-7.55,12.77-16.81,22.6-6.98c5.61,5.61,0.23,12.88-2.86,17"/><path d="M38.34,28.48c-2.82,0-2.84,0-2.84,7.08c-6.93,0-6.93,0.01-6.93,2.39c0,2.89,0,2.92,7.08,2.92 c0,7.14,0.04,7.14,2.71,7.14c2.59,0,2.59,0,2.59-7.21c7.19,0,7.19,0.02,7.19-2.5c0-2.73-0.08-2.73-7.23-2.73	C40.91,28.48,40.93,28.48,38.34,28.48z"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-add-patient {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M38.19,28.48c-2.82,0-2.84,0-2.84,7.08c-6.93,0-6.93,0.01-6.93,2.39c0,2.89,0,2.92,7.08,2.92 c0,7.14,0.04,7.14,2.71,7.14c2.59,0,2.59,0,2.59-7.21c7.19,0,7.19,0.02,7.19-2.5c0-2.73-0.08-2.73-7.23-2.73 C40.77,28.48,40.78,28.48,38.19,28.48z"/><path d="M9.21,27.43c-3.42,0-9.14,2.52-9.14,9.14s0,11.43,0,11.43s20.63,0,24.35,0c2.01,0,2.03-3.63,0.06-3.63 c-0.93,0-20.19,0.04-20.19,0.04s0.04-6.03,0.04-8.09c0-3.06,0.99-5.28,5.28-5.28c0.95,0,17.4,0.06,19.4,0.06	c1.59,0,1.68-3.73,0.01-3.73"/><path d="M21,1c-6.08,0-11,4.92-11,11s4.92,11,11,11s11-4.92,11-11S27.08,1,21,1z M21,19.94c-4.06,0-7.29-3.34-7.29-7.82 s3.31-7.69,7.38-7.69s7.34,3.21,7.34,7.69S25.06,19.94,21,19.94z"/> </g></svg>');
  background-color: var(--color-success);
  display: inline-flex;
  height: 22px;
  width: 22px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-add-patient-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M38.19,28.48c-2.82,0-2.84,0-2.84,7.08c-6.93,0-6.93,0.01-6.93,2.39c0,2.89,0,2.92,7.08,2.92 c0,7.14,0.04,7.14,2.71,7.14c2.59,0,2.59,0,2.59-7.21c7.19,0,7.19,0.02,7.19-2.5c0-2.73-0.08-2.73-7.23-2.73 C40.77,28.48,40.78,28.48,38.19,28.48z"/><path d="M9.21,27.43c-3.42,0-9.14,2.52-9.14,9.14s0,11.43,0,11.43s20.63,0,24.35,0c2.01,0,2.03-3.63,0.06-3.63 c-0.93,0-20.19,0.04-20.19,0.04s0.04-6.03,0.04-8.09c0-3.06,0.99-5.28,5.28-5.28c0.95,0,17.4,0.06,19.4,0.06	c1.59,0,1.68-3.73,0.01-3.73"/><path d="M21,1c-6.08,0-11,4.92-11,11s4.92,11,11,11s11-4.92,11-11S27.08,1,21,1z M21,19.94c-4.06,0-7.29-3.34-7.29-7.82 s3.31-7.69,7.38-7.69s7.34,3.21,7.34,7.69S25.06,19.94,21,19.94z"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 22px;
  width: 22px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-edit {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <polygon points="4.71,35.98 8.29,25.41 15.28,32.48 "/><rect x="10.25" y="14.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0034 20.9398)" width="23.05" height="9.24"/><rect x="30.63" y="1.21" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.6589 26.1847)" width="7.61" height="10.1"/><rect x="0.11" y="41.68" width="47.89" height="6.32"/> </g></svg>');
  background-color: var(--font-color);
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-edit-blue {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <polygon points="4.71,35.98 8.29,25.41 15.28,32.48 "/><rect x="10.25" y="14.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0034 20.9398)" width="23.05" height="9.24"/><rect x="30.63" y="1.21" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.6589 26.1847)" width="7.61" height="10.1"/><rect x="0.11" y="41.68" width="47.89" height="6.32"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-edit-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <polygon points="4.71,35.98 8.29,25.41 15.28,32.48 "/><rect x="10.25" y="14.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -7.0034 20.9398)" width="23.05" height="9.24"/><rect x="30.63" y="1.21" transform="matrix(0.7071 -0.7071 0.7071 0.7071 5.6589 26.1847)" width="7.61" height="10.1"/><rect x="0.11" y="41.68" width="47.89" height="6.32"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-identification {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <ellipse class="st0" cx="16" cy="28" rx="3.5" ry="3"/><path class="st0" d="M9.48,39.03c0-1.06,1.47-5.03,2.56-5.03s7.88,0,8.73,0s3.33,3.37,3.17,5C21.25,39,12.89,39.03,9.48,39.03z"/><rect x="28.5" y="25" class="st0" width="10" height="3"/><rect x="28.5" y="32" class="st0" width="10" height="3"/><path class="st1" d="M46,13H2c-1.1,0-2,0.9-2,2v31c0,1.1,0.9,2,2,2h44c1.1,0,2-0.9,2-2V15C48,13.9,47.1,13,46,13z M44,42 c0,1.1-0.9,2-2,2H6c-1.1,0-2-0.9-2-2V19c0-1.1,0.9-2,2-2h36c1.1,0,2,0.9,2,2V42z"/><path class="st1" d="M25.88,0h-3.75c-1.1,0-2,0.9-2,2v11.5c0,1.1,0.9,2,2,2h3.75c1.1,0,2-0.9,2-2V2C27.88,0.9,26.98,0,25.88,0z M25.66,13h-3.32V3.48c0-0.55,0.45-1,1-1h1.32c0.55,0,1,0.45,1,1V13z"/> </g></svg>');
  background-color: var(--color-success);
  display: inline-flex;
  height: 18px;
  width: 18px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-identification-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <ellipse class="st0" cx="16" cy="28" rx="3.5" ry="3"/><path class="st0" d="M9.48,39.03c0-1.06,1.47-5.03,2.56-5.03s7.88,0,8.73,0s3.33,3.37,3.17,5C21.25,39,12.89,39.03,9.48,39.03z"/><rect x="28.5" y="25" class="st0" width="10" height="3"/><rect x="28.5" y="32" class="st0" width="10" height="3"/><path class="st1" d="M46,13H2c-1.1,0-2,0.9-2,2v31c0,1.1,0.9,2,2,2h44c1.1,0,2-0.9,2-2V15C48,13.9,47.1,13,46,13z M44,42 c0,1.1-0.9,2-2,2H6c-1.1,0-2-0.9-2-2V19c0-1.1,0.9-2,2-2h36c1.1,0,2,0.9,2,2V42z"/><path class="st1" d="M25.88,0h-3.75c-1.1,0-2,0.9-2,2v11.5c0,1.1,0.9,2,2,2h3.75c1.1,0,2-0.9,2-2V2C27.88,0.9,26.98,0,25.88,0z M25.66,13h-3.32V3.48c0-0.55,0.45-1,1-1h1.32c0.55,0,1,0.45,1,1V13z"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-remove {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M34.89,23.34l-4.61-6.43l-13.24-0.09C0,16.82,0,16.84,0,22.69c0,7.11,0,7.17,17.41,7.17l12.89-0.09	c0.28,0,0.57,0,0.84,0C48,29.76,48,29.7,48,23.62c0-6.72-0.19-6.71-17.79-6.71"/> </g></svg>');
  background-color: var(--color-danger);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-remove-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M34.89,23.34l-4.61-6.43l-13.24-0.09C0,16.82,0,16.84,0,22.69c0,7.11,0,7.17,17.41,7.17l12.89-0.09	c0.28,0,0.57,0,0.84,0C48,29.76,48,29.7,48,23.62c0-6.72-0.19-6.71-17.79-6.71"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-save {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M8.82-0.01C3.68-0.06,2.44-0.27,1.3,1.38C-0.19,3.53,0,3.89,0,22.04c0,17.32-0.36,22.8,1.41,24.63 c1.8,1.86,1.63,1.3,22.25,1.3c20.07,0,20.89,0.69,22.85-1.48c1.83-2.01,1.51-1.84,1.51-19.31c0-4.87-0.02-11.08-0.02-19.05 c0,0-4.38-4.41-8.08-8.11C38.94,0,36.05,0.02,36.05,0.02s-0.13,2.6-0.13,6.82c0,8.84,0,8.79-0.57,9.49 c-0.64,0.79-0.86,0.52-18.34,0.52c-6.9,0-7.31-0.05-7.67-0.57c-0.96-1.36-0.58-2.57-0.55-9.44C8.85,2.81,8.82-0.02,8.82-0.01z"/><path d="M29.67,12.61H24.8c-1.1,0-2-0.9-2-2V0h8.87v10.61C31.67,11.72,30.77,12.61,29.67,12.61z"/> </g></svg>');
  background-color: var(--color-success);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-save-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M8.82-0.01C3.68-0.06,2.44-0.27,1.3,1.38C-0.19,3.53,0,3.89,0,22.04c0,17.32-0.36,22.8,1.41,24.63 c1.8,1.86,1.63,1.3,22.25,1.3c20.07,0,20.89,0.69,22.85-1.48c1.83-2.01,1.51-1.84,1.51-19.31c0-4.87-0.02-11.08-0.02-19.05 c0,0-4.38-4.41-8.08-8.11C38.94,0,36.05,0.02,36.05,0.02s-0.13,2.6-0.13,6.82c0,8.84,0,8.79-0.57,9.49 c-0.64,0.79-0.86,0.52-18.34,0.52c-6.9,0-7.31-0.05-7.67-0.57c-0.96-1.36-0.58-2.57-0.55-9.44C8.85,2.81,8.82-0.02,8.82-0.01z"/><path d="M29.67,12.61H24.8c-1.1,0-2-0.9-2-2V0h8.87v10.61C31.67,11.72,30.77,12.61,29.67,12.61z"/> </g></svg>');
  background-color: #FFFFFF;
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-search {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M25.38,8.23c-1.9-0.65-3.85-0.63-5.11-0.07c-0.58,0.26-1.26,0-1.52-0.58c-0.26-0.58,0-1.26,0.58-1.52 c1.93-0.86,4.51-0.78,6.79-0.01c2.29,0.78,4.52,2.34,5.58,4.73c0.26,0.58,0,1.26-0.58,1.52c-0.58,0.26-1.26,0-1.52-0.58 C28.87,10.09,27.27,8.87,25.38,8.23z"/><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M30.34,28.13c2.99-1.65,5.44-4.32,6.76-7.77C40.06,12.63,36.2,3.96,28.46,1S12.06,1.9,9.09,9.63 S10,26.04,17.73,29c3.44,1.32,7.07,1.28,10.3,0.16l-1.33,2.22l4.99,11.19l6.17-2.75l-4.99-11.19L30.34,28.13z M18.97,25.77 c5.95,2.28,12.62-0.7,14.9-6.64s-0.7-12.62-6.64-14.9s-12.62,0.7-14.9,6.64S13.02,23.49,18.97,25.77z"/><path d="M32.63,44.69l6.17-2.75l0.9,2.02c0.51,1.14,0,2.47-1.14,2.98l-2.06,0.92c-1.14,0.51-2.47,0-2.98-1.14 L32.63,44.69z"/> </g></svg>');
  background-color: var(--font-color);
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-search-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M25.38,8.23c-1.9-0.65-3.85-0.63-5.11-0.07c-0.58,0.26-1.26,0-1.52-0.58c-0.26-0.58,0-1.26,0.58-1.52 c1.93-0.86,4.51-0.78,6.79-0.01c2.29,0.78,4.52,2.34,5.58,4.73c0.26,0.58,0,1.26-0.58,1.52c-0.58,0.26-1.26,0-1.52-0.58 C28.87,10.09,27.27,8.87,25.38,8.23z"/><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M30.34,28.13c2.99-1.65,5.44-4.32,6.76-7.77C40.06,12.63,36.2,3.96,28.46,1S12.06,1.9,9.09,9.63 S10,26.04,17.73,29c3.44,1.32,7.07,1.28,10.3,0.16l-1.33,2.22l4.99,11.19l6.17-2.75l-4.99-11.19L30.34,28.13z M18.97,25.77 c5.95,2.28,12.62-0.7,14.9-6.64s-0.7-12.62-6.64-14.9s-12.62,0.7-14.9,6.64S13.02,23.49,18.97,25.77z"/><path d="M32.63,44.69l6.17-2.75l0.9,2.02c0.51,1.14,0,2.47-1.14,2.98l-2.06,0.92c-1.14,0.51-2.47,0-2.98-1.14 L32.63,44.69z"/> </g></svg>');
  background-color: var(--color-neutral-lightest);
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-search-action {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M25.38,8.23c-1.9-0.65-3.85-0.63-5.11-0.07c-0.58,0.26-1.26,0-1.52-0.58c-0.26-0.58,0-1.26,0.58-1.52 c1.93-0.86,4.51-0.78,6.79-0.01c2.29,0.78,4.52,2.34,5.58,4.73c0.26,0.58,0,1.26-0.58,1.52c-0.58,0.26-1.26,0-1.52-0.58 C28.87,10.09,27.27,8.87,25.38,8.23z"/><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M30.34,28.13c2.99-1.65,5.44-4.32,6.76-7.77C40.06,12.63,36.2,3.96,28.46,1S12.06,1.9,9.09,9.63 S10,26.04,17.73,29c3.44,1.32,7.07,1.28,10.3,0.16l-1.33,2.22l4.99,11.19l6.17-2.75l-4.99-11.19L30.34,28.13z M18.97,25.77 c5.95,2.28,12.62-0.7,14.9-6.64s-0.7-12.62-6.64-14.9s-12.62,0.7-14.9,6.64S13.02,23.49,18.97,25.77z"/><path d="M32.63,44.69l6.17-2.75l0.9,2.02c0.51,1.14,0,2.47-1.14,2.98l-2.06,0.92c-1.14,0.51-2.47,0-2.98-1.14 L32.63,44.69z"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-lock {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M37.46,18.08H10.54c-2.48,0-4.49,2.01-4.49,4.49v20.94c0,2.48,2.01,4.49,4.49,4.49h26.93 c2.48,0,4.49-2.01,4.49-4.49V22.57C41.95,20.09,39.94,18.08,37.46,18.08z M26.31,33.65v5.22c0,1.03-0.84,1.87-1.87,1.87 c-1.03,0-1.87-0.84-1.87-1.87v-5.22c-1.63-0.72-2.77-2.34-2.77-4.24c0-2.56,2.08-4.64,4.64-4.64s4.64,2.08,4.64,4.64 C29.08,31.31,27.94,32.93,26.31,33.65z"/><path d="M28,0.2h-7.79c-5.38,0-9.74,4.36-9.74,9.74V18c0,3.2,13.97,6.34,13.97,2.68c-0.03-0.2-10.09,1.14-10.11-2.6 c-0.02-3.7-0.03-7.34-0.03-7.34c0-3.87,3.13-7,7-7h5.66c3.87,0,7,3.13,7,7c0,0-0.01,3.64-0.03,7.34c-0.02,3.72-9.46,2.41-9.49,2.6 c1.95,2.77,13.31,0.5,13.31-2.68V9.94C37.74,4.56,33.38,0.2,28,0.2z"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

  .icon-lock:hover {
    background-color: #ffffff;
  }

.icon-lock-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M37.46,18.08H10.54c-2.48,0-4.49,2.01-4.49,4.49v20.94c0,2.48,2.01,4.49,4.49,4.49h26.93 c2.48,0,4.49-2.01,4.49-4.49V22.57C41.95,20.09,39.94,18.08,37.46,18.08z M26.31,33.65v5.22c0,1.03-0.84,1.87-1.87,1.87 c-1.03,0-1.87-0.84-1.87-1.87v-5.22c-1.63-0.72-2.77-2.34-2.77-4.24c0-2.56,2.08-4.64,4.64-4.64s4.64,2.08,4.64,4.64 C29.08,31.31,27.94,32.93,26.31,33.65z"/><path d="M28,0.2h-7.79c-5.38,0-9.74,4.36-9.74,9.74V18c0,3.2,13.97,6.34,13.97,2.68c-0.03-0.2-10.09,1.14-10.11-2.6 c-0.02-3.7-0.03-7.34-0.03-7.34c0-3.87,3.13-7,7-7h5.66c3.87,0,7,3.13,7,7c0,0-0.01,3.64-0.03,7.34c-0.02,3.72-9.46,2.41-9.49,2.6 c1.95,2.77,13.31,0.5,13.31-2.68V9.94C37.74,4.56,33.38,0.2,28,0.2z"/> </g></svg>');
  background-color: var(--color-neutral-lightest);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-unlock {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M37.46,18.08H10.54c-2.48,0-4.49,2.01-4.49,4.49v20.94c0,2.48,2.01,4.49,4.49,4.49h26.93 c2.48,0,4.49-2.01,4.49-4.49V22.57C41.95,20.09,39.94,18.08,37.46,18.08z M26.31,33.65v5.22c0,1.03-0.84,1.87-1.87,1.87 c-1.03,0-1.87-0.84-1.87-1.87v-5.22c-1.63-0.72-2.77-2.34-2.77-4.24c0-2.56,2.08-4.64,4.64-4.64s4.64,2.08,4.64,4.64 C29.08,31.31,27.94,32.93,26.31,33.65z"/><path d="M28,0.2h-7.79c-5.38,0-9.74,4.36-9.74,9.74V18c0,3.2,25.09,3.74,25.09,0.08c-0.03-0.2-21.21,3.74-21.23,0 c-0.02-3.7-0.03-7.34-0.03-7.34c0-3.87,3.13-7,7-7h5.66c3.87,0,7,3.13,7,7l3.79-0.8C37.74,4.56,33.38,0.2,28,0.2z"/><path d="M46.23,4.64l-4.12,3.33c-0.43,0.35-1.06,0.28-1.41-0.15v0c-0.35-0.43-0.28-1.06,0.15-1.41l4.12-3.33 c0.43-0.35,1.06-0.28,1.41,0.15v0C46.73,3.67,46.66,4.3,46.23,4.64z"/><path d="M46.61,13.46l-4.95-1.9c-0.52-0.2-0.77-0.78-0.57-1.29v0c0.2-0.52,0.78-0.77,1.29-0.57l4.95,1.9 c0.52,0.2,0.77,0.78,0.57,1.29v0C47.71,13.4,47.13,13.66,46.61,13.46z"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-unlock-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M37.46,18.08H10.54c-2.48,0-4.49,2.01-4.49,4.49v20.94c0,2.48,2.01,4.49,4.49,4.49h26.93 c2.48,0,4.49-2.01,4.49-4.49V22.57C41.95,20.09,39.94,18.08,37.46,18.08z M26.31,33.65v5.22c0,1.03-0.84,1.87-1.87,1.87 c-1.03,0-1.87-0.84-1.87-1.87v-5.22c-1.63-0.72-2.77-2.34-2.77-4.24c0-2.56,2.08-4.64,4.64-4.64s4.64,2.08,4.64,4.64 C29.08,31.31,27.94,32.93,26.31,33.65z"/><path d="M28,0.2h-7.79c-5.38,0-9.74,4.36-9.74,9.74V18c0,3.2,25.09,3.74,25.09,0.08c-0.03-0.2-21.21,3.74-21.23,0 c-0.02-3.7-0.03-7.34-0.03-7.34c0-3.87,3.13-7,7-7h5.66c3.87,0,7,3.13,7,7l3.79-0.8C37.74,4.56,33.38,0.2,28,0.2z"/><path d="M46.23,4.64l-4.12,3.33c-0.43,0.35-1.06,0.28-1.41-0.15v0c-0.35-0.43-0.28-1.06,0.15-1.41l4.12-3.33 c0.43-0.35,1.06-0.28,1.41,0.15v0C46.73,3.67,46.66,4.3,46.23,4.64z"/><path d="M46.61,13.46l-4.95-1.9c-0.52-0.2-0.77-0.78-0.57-1.29v0c0.2-0.52,0.78-0.77,1.29-0.57l4.95,1.9 c0.52,0.2,0.77,0.78,0.57,1.29v0C47.71,13.4,47.13,13.66,46.61,13.46z"/> </g></svg>');
  background-color: var(--color-neutral-lightest);
  display: inline-flex;
  height: 15px;
  width: 15px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-up {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M23.97,12C23.93,12,0,36,0,36S48,36,48,36C48,35.98,23.97,12,23.97,12z"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 12px;
  width: 12px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-up-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M23.97,12C23.93,12,0,36,0,36S48,36,48,36C48,35.98,23.97,12,23.97,12z"/> </g></svg>');
  background-color: var(--color-neutral-lightest);
  display: inline-flex;
  height: 12px;
  width: 12px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-down {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M24.03,36C24.07,36,48,12,48,12S0,12,0,12C0,12.02,24.03,36,24.03,36z"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 12px;
  width: 12px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-down-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path d="M24.03,36C24.07,36,48,12,48,12S0,12,0,12C0,12.02,24.03,36,24.03,36z"/> </g></svg>');
  background-color: var(--color-neutral-lightest);
  display: inline-flex;
  height: 12px;
  width: 12px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-print {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path style="stroke-width:0.75;stroke-miterlimit:10;" d="M42.9,9.8h-3.9V3.6c0-1.7-1.3-3.1-2.9-3.1H11.9c-1.6,0-2.9,1.4-2.9,3.1v6.3H5.1c-2.5,0-4.6,2.2-4.6,4.8v20.5c0,2.7,2,4.8,4.6,4.8h1.7c0.4,0,0.7-0.3,0.7-0.8c0-0.4-0.3-0.8-0.7-0.8H5.1C3.4,38.4,2,37,2,35.2V14.7c0-1.8,1.4-3.3,3.1-3.3h37.9c1.7,0,3.1,1.5,3.1,3.3v20.5c0,1.8-1.4,3.3-3.1,3.3h-1.3c-0.4,0-0.7,0.3-0.7,0.8c0,0.4,0.3,0.8,0.7,0.8h1.3c2.5,0,4.6-2.2,4.6-4.8V14.7C47.5,12,45.5,9.8,42.9,9.8z M10.4,3.6c0-0.9,0.7-1.6,1.5-1.6h24.2c0.8,0,1.5,0.7,1.5,1.6v6.2H10.4V3.6z"/><ellipse cx="40.5" cy="16.3" rx="1.8" ry="1.8"/><path style="stroke-miterlimit:10;" d="M33,33.9H15c-0.4,0-0.7,0.3-0.7,0.8c0,0.4,0.3,0.8,0.7,0.8h18c0.4,0,0.7-0.3,0.7-0.8C33.7,34.3,33.4,33.9,33,33.9z"/><path style="stroke-miterlimit:10;" d="M32.9,41.2h-18c-0.4,0-0.7,0.3-0.7,0.8c0,0.4,0.3,0.8,0.7,0.8h18c0.4,0,0.7-0.3,0.7-0.8C33.6,41.5,33.3,41.2,32.9,41.2z"/><path d="M8.5,48H40V27.9H8.5V48z M10.3,29.7h27.9v16.4H10.3V29.7z"/> </g></svg>');
  background-color: var(--color-primary);
  display: inline-flex;
  height: 18px;
  width: 18px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

.icon-print-light {
  --svg: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48"><g> <path style="stroke-width:0.75;stroke-miterlimit:10;" d="M42.9,9.8h-3.9V3.6c0-1.7-1.3-3.1-2.9-3.1H11.9c-1.6,0-2.9,1.4-2.9,3.1v6.3H5.1c-2.5,0-4.6,2.2-4.6,4.8v20.5c0,2.7,2,4.8,4.6,4.8h1.7c0.4,0,0.7-0.3,0.7-0.8c0-0.4-0.3-0.8-0.7-0.8H5.1C3.4,38.4,2,37,2,35.2V14.7c0-1.8,1.4-3.3,3.1-3.3h37.9c1.7,0,3.1,1.5,3.1,3.3v20.5c0,1.8-1.4,3.3-3.1,3.3h-1.3c-0.4,0-0.7,0.3-0.7,0.8c0,0.4,0.3,0.8,0.7,0.8h1.3c2.5,0,4.6-2.2,4.6-4.8V14.7C47.5,12,45.5,9.8,42.9,9.8z M10.4,3.6c0-0.9,0.7-1.6,1.5-1.6h24.2c0.8,0,1.5,0.7,1.5,1.6v6.2H10.4V3.6z"/><ellipse cx="40.5" cy="16.3" rx="1.8" ry="1.8"/><path style="stroke-miterlimit:10;" d="M33,33.9H15c-0.4,0-0.7,0.3-0.7,0.8c0,0.4,0.3,0.8,0.7,0.8h18c0.4,0,0.7-0.3,0.7-0.8C33.7,34.3,33.4,33.9,33,33.9z"/><path style="stroke-miterlimit:10;" d="M32.9,41.2h-18c-0.4,0-0.7,0.3-0.7,0.8c0,0.4,0.3,0.8,0.7,0.8h18c0.4,0,0.7-0.3,0.7-0.8C33.6,41.5,33.3,41.2,32.9,41.2z"/><path d="M8.5,48H40V27.9H8.5V48z M10.3,29.7h27.9v16.4H10.3V29.7z"/> </g></svg>');
  background-color: var(--color-neutral-lightest);
  display: inline-flex;
  height: 18px;
  width: 18px;
  margin-right: 5px;
  mask: var(--svg) center no-repeat;
  -webkit-mask: var(--svg) center no-repeat;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  color: var(--font-color);
  display: block;
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--font-line-height);
  width: 100%;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

  a:hover {
    color: var(--color-primary-light);
  }

ul {
  list-style: none;
}

i {
  font-weight: 400;
  font-style: italic;
}

sb {
  font-weight: 600;
}

b {
  font-weight: 700;
}

[aria-invalid=true][aria-invalid=true] {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--color-danger);
  box-shadow: 0px 0px 3px 2px rgba(232, 2, 2, 0.2);
  outline: 0;
}

.error-message {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--color-danger);
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0px 0px 3px 2px rgba(255, 0, 0, 0.2);
  display: none;
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
  left: 50%;
  padding: 10px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, 0);
  top: calc(100% + 9px);
  width: 75%;
  z-index: 1;
}

  .error-message.up {
    bottom: calc(100% + 9px);
    top: unset;
  }

    .error-message.up::before {
      bottom: unset;
      border-bottom-color: transparent;
      border-top-color: #ffffff;
      top: 100%;
    }

    .error-message.up::after {
      bottom: unset;
      border-bottom: unset;
      border-left: 0;
      border-right: unset;
      border-top: 0;
      top: calc(100% - 9px);
    }

  .error-message::after {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    border-bottom: 0;
    border-right: 0;
    bottom: 100%;
    content: "";
    height: 12px;
    left: 50%;
    position: absolute;
    top: -6px;
    transform: translate(-50%, 0) rotate(45deg);
    width: 12px;
  }

  .error-message::before {
    border: 10px solid transparent;
    border-bottom-color: #ffffff;
    bottom: 100%;
    content: "";
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1));
    height: 0;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    width: 0;
  }

[aria-invalid=true] .error-message {
  display: block;
}

[hidden] {
  display: none !important;
}

lo-input:not([internal]), lo-toggle, lo-dropdown, lo-datepicker {
  animation: fade-in 0.2s ease-in;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

*[data-required=true]::after {
  content: "*";
  color: var(--color-danger);
  font-size: var(--font-size-medium);
  font-weight: 600;
  margin-left: 3px;
  position: relative;
  top: -4px;
}

*[disabled][data-required=true]::after {
  display: none;
}

app-ucf-main [data-lastpass-root], #testbed [data-lastpass-root], app-ucf-main [data-lastpass-icon-root=true], #testbed [data-lastpass-icon-root=true] {
  display: none !important;
}

html {
  line-height: 1.16;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.2;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

  button::-moz-focus-inner,
  button [type=button]::-moz-focus-inner,
  button [type=reset]::-moz-focus-inner,
  button [type=submit]::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=button] [type=button]::-moz-focus-inner,
  [type=button] [type=reset]::-moz-focus-inner,
  [type=button] [type=submit]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=reset] [type=button]::-moz-focus-inner,
  [type=reset] [type=reset]::-moz-focus-inner,
  [type=reset] [type=submit]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner,
  [type=submit] [type=button]::-moz-focus-inner,
  [type=submit] [type=reset]::-moz-focus-inner,
  [type=submit] [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  button:-moz-focusring,
  button [type=button]:-moz-focusring,
  button [type=reset]:-moz-focusring,
  button [type=submit]:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=button] [type=button]:-moz-focusring,
  [type=button] [type=reset]:-moz-focusring,
  [type=button] [type=submit]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=reset] [type=button]:-moz-focusring,
  [type=reset] [type=reset]:-moz-focusring,
  [type=reset] [type=submit]:-moz-focusring,
  [type=submit]:-moz-focusring,
  [type=submit] [type=button]:-moz-focusring,
  [type=submit] [type=reset]:-moz-focusring,
  [type=submit] [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[data-tooltip] {
  position: relative;
}

  [data-tooltip]:before {
    background: var(--color-neutral-darker);
    border: 1px solid var(--color-neutral-darker);
    border-radius: 3px;
    bottom: initial;
    color: #ffffff;
    content: attr(data-tooltip);
    display: none;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
    font-family: "Calibri";
    font-size: 14px;
    left: 50%;
    margin: initial;
    margin-left: 0;
    margin-right: 0;
    margin-top: 25px;
    max-width: 200px;
    min-width: 150px;
    padding: 15px 0;
    position: absolute;
    transform: translate(-50%, 0);
    text-align: center;
    text-wrap: wrap;
    top: 50%;
    z-index: 1;
  }

  [data-tooltip]:after { /* arrow */
    border: 10px solid var(--color-neutral-darker);
    border-color: transparent transparent var(--color-neutral-darker) transparent;
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
    content: "";
    display: none;
    left: calc(50% - 9px);
    margin: initial;
    margin-right: 15px;
    position: absolute;
    right: initial;
    transform: translateY(-50%);
    top: 100%;
    z-index: 1;
  }

  [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    display: flex;
  }

  [data-tooltip].tt-left:before {
    bottom: 50%;
    left: initial;
    margin: initial;
    margin-right: 10px;
    right: 100%;
    top: initial;
    transform: translate(0, 50%);
  }

  [data-tooltip].tt-left:after {
    border-color: transparent transparent transparent var(--color-neutral-darker);
    bottom: 0;
    left: initial;
    margin: initial;
    margin-right: -9px;
    right: 100%;
    top: 50%;
    transform: translate(0, -50%);
  }

  [data-tooltip].tt-right:before {
    left: 100%;
    margin: initial;
    margin-left: 10px;
    right: initial;
    top: 50%;
    transform: translate(0%, -50%);
  }

  [data-tooltip].tt-right:after {
    border-color: transparent var(--color-neutral-darker) transparent transparent;
    left: initial;
    margin: initial;
    margin-right: 0;
    margin-left: 0;
    right: -10px;
    top: 50%;
    transform: translate(0, -50%);
  }

  [data-tooltip].tt-up:before { /* up */
    bottom: calc(100% - 10px);
    left: 50%;
    margin: initial;
    margin-right: 0;
    top: initial;
    transform: translate(-50%, -50%);
  }

  [data-tooltip].tt-up:after {
    border-color: var(--color-neutral-darker) transparent transparent transparent;
    bottom: 100%;
    left: calc(50% - 10px);
    margin: initial;
    margin-right: 15px;
    right: initial;
    top: 0;
  }

  [data-tooltip].tt-down:before {
    bottom: initial;
    left: 50%;
    margin: initial;
    margin-right: 0;
    margin-top: 20px;
    transform: translate(-50%, 0);
  }

lo-layoutTemp, ucf-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  width: 100%;
}

@media only screen and (min-width: 640px) {
  lo-layoutTemp, ucf-layout {
    flex-direction: row;
  }
}

lo-layoutTemp[variant=full-with-sidenav], ucf-layout[variant=full-with-sidenav] {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--border-color);
}

@media only screen and (min-width: 640px) {
  lo-content {
    flex-direction: row;
  }
}

lo-content[full] {
  background-color: #F6F5F5;
  container-type: inline-size;
  flex: 1;
  overflow: auto;
  position: relative;
}

lo-content[lefthalf], lo-content[righthalf] {
  container-type: inline-size;
  flex: 0 0 50%;
  overflow: auto;
  position: relative;
}

lo-content[sidenav] {
  height: 100vh;
  overflow: auto;
}

lo-content[maincontent] {
  background-color: #F6F5F5;
  border-left: 1px solid var(--border-color);
  container-type: inline-size;
  flex: 1;
  overflow: auto;
  position: relative;
}

lo-content[internal] {
  --gap: 10px;
  align-items: flex-start;
  background-color: transparent;
  container-type: inline-size;
  display: flex;
  flex: 0 1 auto;
  flex-direction: rpw;
  gap: var(--gap);
  height: 100%;
  padding: 10px;
  position: relative;
  width: 100%;
}

lo-content [full] {
  --gap: 10px;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  height: auto;
  padding: 10px;
  width: 100%;
}

lo-content [lefthalf] {
  padding: 10px;
}

lo-content [righthalf] {
  padding: 10px;
}

lo-content [sidenav] {
  flex: 0 1 auto;
  font-size: 16px;
  position: sticky;
  top: 0;
  width: 220px;
}

lo-content [maincontent] {
  --gap: 10px;
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  height: 100%;
  padding: 10px;
  width: 100%;
}

  lo-content [maincontent] .ucf-right-container {
    width: 100%;
  }

lo-row {
  --gap: 10px;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--gap);
  width: 100%;
}

@media only screen and (min-width: 640px) {
  lo-row {
    flex-direction: row;
  }
}

lo-column {
  display: flex;
}

  lo-column[col="12"] {
    --cols: 1;
    flex: 0 0 auto;
    flex-basis: 100%;
    max-width: 100%;
  }

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="12"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="12"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="12"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

lo-column[col="10"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="10"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="10"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="10"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

@container (min-width: 60em) {
  lo-column[col="10"] {
    flex-basis: 83.3333333%;
    max-width: 83.3333333%;
  }
}

lo-column[col="9"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="9"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="9"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="9"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

@container (min-width: 60em) {
  lo-column[col="9"] {
    flex-basis: 75%;
    max-width: 75%;
  }
}

lo-column[col="8"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="8"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="8"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="8"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

@container (min-width: 60em) {
  lo-column[col="8"] {
    flex-basis: 66.3%;
    max-width: 66.3%;
  }
}

lo-column[col="6"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
  --cols: 2;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="6"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="6"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="6"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

lo-column[col="5"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="5"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="5"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="5"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

@container (min-width: 60em) {
  lo-column[col="5"] {
    flex-basis: 41.3%;
    max-width: 41.3%;
  }
}

lo-column[col="4"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
  --cols: 3;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="4"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="4"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="4"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

lo-column[col="3"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
  --cols: 4;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="3"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="3"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="3"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

lo-column[col="2"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
  --cols: 6;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="2"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="2"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="2"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

lo-column[col="1"] {
  flex: 0 0 auto;
  flex-basis: 100%;
  max-width: 100%;
  --cols: 12;
}

@container (min-width: 35em) and (max-width: 50em) {
  lo-column[col="1"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 2;
  }
}

@container (min-width: 50em) and (max-width: 60em) {
  lo-column[col="1"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    --cols: 3;
  }
}

@container (min-width: 60em) {
  lo-column[col="1"] {
    flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
    max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  lo-column lo-button[variant=basic],
  lo-column lo-button[variant=save],
  lo-column lo-button[variant=danger],
  lo-column lo-button[variant=action],
  lo-column lo-button[variant=cancel] {
    min-width: fit-content;
    width: -webkit-fill-available;
  }

    lo-column lo-button[variant=basic] button,
    lo-column lo-button[variant=save] button,
    lo-column lo-button[variant=danger] button,
    lo-column lo-button[variant=action] button,
    lo-column lo-button[variant=cancel] button {
      min-width: fit-content;
    }
}

lo-section {
  --gap: 10px;
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 50px;
  width: 100%;
}

@media only screen and (min-width: 640px) {
  lo-section {
    flex-direction: row;
  }
}

lo-section > .title {
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-large);
  font-weight: 700;
  width: 100%;
  white-space: nowrap;
}

lo-section .instructions {
  width: 100%;
}

lo-section > lo-actionbar {
  margin-top: -10px;
}

lo-section .column-header {
  display: block;
  font-weight: 600;
  text-align: center;
  width: 100%;
}

lo-subsection {
  --gap: 10px;
  align-items: stretch;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 50px;
  margin-left: 20px;
  width: 100%;
}

@media only screen and (min-width: 640px) {
  lo-subsection {
    flex-direction: row;
  }
}

lo-subsection > .title {
  border-bottom: 1px solid var(--border-color);
  display: inline-flex;
  font-size: var(--font-size-medium);
  font-weight: 700;
  width: 100%;
  white-space: nowrap;
}

  lo-subsection > .title span:first-of-type {
    bottom: 3px;
    position: relative;
  }

lo-division {
  --gap: 10px;
  align-items: stretch;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-bottom: 50px;
  width: 100%;
}

@media only screen and (min-width: 640px) {
  lo-division {
    flex-direction: row;
  }
}

lo-division > .title {
  display: flex;
  font-size: var(--font-size);
  font-weight: 500;
  height: 11px;
  width: 100%;
  white-space: nowrap;
}

  lo-division > .title span.material-symbols-outlined {
    font-size: 20px;
  }

  lo-division > .title:first-line {
    background-color: transparent;
  }

  lo-division > .title:before, lo-division > .title:after {
    border-bottom: 1px solid var(--border-color);
    content: " ";
    color: var(--border-color);
    margin: 0 10px;
    width: 100%;
  }

lo-actionbar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-end;
  margin-top: -10px;
  width: 100%;
}

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v133/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format("woff2");
}

[sidenav] .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

[sidenav] .ucf-left-container {
  height: 100%;
  overflow: auto;
}

[sidenav] .ucf-menu {
  display: block;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 10px 10px 0;
  position: relative;
  width: 100%;
}

  [sidenav] .ucf-menu hr {
    margin-left: 10px;
  }

  [sidenav] .ucf-menu .active {
    border-left: 5px solid var(--color-primary);
  }

  [sidenav] .ucf-menu .current {
    font-weight: 600;
  }

  [sidenav] .ucf-menu .ucf-menu-group {
    border-left: 5px solid transparent;
    padding-left: 5px;
  }

  [sidenav] .ucf-menu .ucf-menu-row {
    align-items: center;
    display: flex;
    margin-bottom: 10px;
  }

    [sidenav] .ucf-menu .ucf-menu-row .ucf-menu-row-buttons {
      display: flex;
      margin-left: auto;
    }

  [sidenav] .ucf-menu .ucf-menu-subdir.material-symbols-outlined {
    color: #666666;
    font-size: 16px;
    position: relative;
    top: -2px;
  }

  [sidenav] .ucf-menu .ucf-menu-dispense {
    margin-left: 20px;
  }

lo-button[variant=basic], lo-button[variant=basic-icon] {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--color-neutral-dark);
  align-items: center;
  background-color: #ffffff;
  color: var(--font-color);
  display: flex;
  justify-content: center;
  line-height: 0;
  transition: background 0.8s;
}

  lo-button[variant=basic] button, lo-button[variant=basic-icon] button {
    align-items: center;
    appearance: none;
    background: inherit;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    min-width: 86px;
    outline: 0;
    padding: 5px 10px;
    width: 100%;
  }

    lo-button[variant=basic] button.icon-only, lo-button[variant=basic-icon] button.icon-only {
      background-color: transparent;
      border: 0;
      border-radius: 50%;
      display: grid;
      min-height: 0;
      min-width: 0;
      outline: none;
      padding: 5px;
    }

      lo-button[variant=basic] button.icon-only:hover, lo-button[variant=basic-icon] button.icon-only:hover {
        background-color: transparent;
      }

        lo-button[variant=basic] button.icon-only:hover span, lo-button[variant=basic-icon] button.icon-only:hover span {
          background-color: var(--font-color);
        }

      lo-button[variant=basic] button.icon-only span, lo-button[variant=basic-icon] button.icon-only span {
        display: inline-block;
        margin-right: 0;
      }

      lo-button[variant=basic] button.icon-only:disabled:hover span, lo-button[variant=basic] button.icon-only[disabled]:hover span, lo-button[variant=basic-icon] button.icon-only:disabled:hover span, lo-button[variant=basic-icon] button.icon-only[disabled]:hover span {
        background-color: var(--color-neutral);
      }

  lo-button[variant=basic]:hover, lo-button[variant=basic-icon]:hover {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid var(--color-neutral);
    background: var(--color-neutral-lightest) radial-gradient(circle, transparent 1%, var(--color-neutral-lightest) 1%) center/15000%;
    color: var(--font-color);
    cursor: pointer;
  }

    lo-button[variant=basic]:hover span, lo-button[variant=basic-icon]:hover span {
      background-color: var(--font-color);
    }

  lo-button[variant=basic]:active, lo-button[variant=basic-icon]:active {
    background-color: #ffffff;
    background-size: 100%;
    transition: background 0s;
  }

  lo-button[variant=basic]:focus, lo-button[variant=basic]:focus-within, lo-button[variant=basic-icon]:focus, lo-button[variant=basic-icon]:focus-within {
    box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
    outline: 0;
  }

  lo-button[variant=basic]:disabled, lo-button[variant=basic][disabled], lo-button[variant=basic-icon]:disabled, lo-button[variant=basic-icon][disabled] {
    background: var(--color-neutral-lightest);
    border: 1px solid var(--color-neutral-dark);
    color: var(--color-neutral-dark);
    cursor: not-allowed;
    box-shadow: none;
    transition: none;
  }

    lo-button[variant=basic]:disabled button:hover, lo-button[variant=basic][disabled] button:hover, lo-button[variant=basic-icon]:disabled button:hover, lo-button[variant=basic-icon][disabled] button:hover {
      cursor: not-allowed;
    }

    lo-button[variant=basic]:disabled span, lo-button[variant=basic][disabled] span, lo-button[variant=basic-icon]:disabled span, lo-button[variant=basic-icon][disabled] span {
      background-color: var(--color-neutral);
    }

    lo-button[variant=basic]:disabled:hover, lo-button[variant=basic][disabled]:hover, lo-button[variant=basic-icon]:disabled:hover, lo-button[variant=basic-icon][disabled]:hover {
      cursor: not-allowed;
    }

  lo-button[variant=basic].icon-only, lo-button[variant=basic-icon].icon-only {
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: grid;
    min-height: 0;
    min-width: 0;
    outline: none;
    padding: 5px;
  }

    lo-button[variant=basic].icon-only:hover, lo-button[variant=basic-icon].icon-only:hover {
      background-color: transparent;
    }

      lo-button[variant=basic].icon-only:hover span, lo-button[variant=basic-icon].icon-only:hover span {
        background-color: var(--color-neutral-darkest);
      }

    lo-button[variant=basic].icon-only span, lo-button[variant=basic-icon].icon-only span {
      display: inline-block;
      margin-right: 0;
    }

    lo-button[variant=basic].icon-only:disabled:hover span, lo-button[variant=basic].icon-only[disabled]:hover span, lo-button[variant=basic-icon].icon-only:disabled:hover span, lo-button[variant=basic-icon].icon-only[disabled]:hover span {
      background-color: var(--color-neutral);
    }

lo-button[variant=action], lo-button[variant=action-icon] {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--color-primary);
  align-items: center;
  background-color: #ffffff;
  color: var(--color-primary);
  display: flex;
  justify-content: center;
  line-height: 0;
  transition: background 0.8s;
}

  lo-button[variant=action] button, lo-button[variant=action-icon] button {
    align-items: center;
    appearance: none;
    background: inherit;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    min-width: 86px;
    outline: 0;
    padding: 5px 10px;
    width: 100%;
  }

    lo-button[variant=action] button.icon-only, lo-button[variant=action-icon] button.icon-only {
      background-color: transparent;
      border: 0;
      border-radius: 50%;
      display: grid;
      min-height: 0;
      min-width: 0;
      outline: none;
      padding: 5px;
    }

      lo-button[variant=action] button.icon-only:hover, lo-button[variant=action-icon] button.icon-only:hover {
        background-color: transparent;
      }

        lo-button[variant=action] button.icon-only:hover span, lo-button[variant=action-icon] button.icon-only:hover span {
          background-color: var(--font-color);
        }

      lo-button[variant=action] button.icon-only span, lo-button[variant=action-icon] button.icon-only span {
        display: inline-block;
        margin-right: 0;
      }

      lo-button[variant=action] button.icon-only:disabled:hover span, lo-button[variant=action] button.icon-only[disabled]:hover span, lo-button[variant=action-icon] button.icon-only:disabled:hover span, lo-button[variant=action-icon] button.icon-only[disabled]:hover span {
        background-color: var(--color-neutral);
      }

  lo-button[variant=action]:hover, lo-button[variant=action-icon]:hover {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid var(--color-primary);
    background: var(--color-primary-light) radial-gradient(circle, transparent 1%, var(--color-primary-light) 1%) center/15000%;
    color: var(--font-color-opposite);
    cursor: pointer;
  }

    lo-button[variant=action]:hover span, lo-button[variant=action-icon]:hover span {
      background-color: var(--font-color-opposite);
    }

  lo-button[variant=action]:active, lo-button[variant=action-icon]:active {
    background-color: #ffffff;
    background-size: 100%;
    transition: background 0s;
  }

  lo-button[variant=action]:focus, lo-button[variant=action]:focus-within, lo-button[variant=action-icon]:focus, lo-button[variant=action-icon]:focus-within {
    box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
    outline: 0;
  }

  lo-button[variant=action]:disabled, lo-button[variant=action][disabled], lo-button[variant=action-icon]:disabled, lo-button[variant=action-icon][disabled] {
    background: var(--color-neutral-lightest);
    border: 1px solid var(--color-neutral-dark);
    color: var(--color-neutral-dark);
    cursor: not-allowed;
    box-shadow: none;
    transition: none;
  }

    lo-button[variant=action]:disabled button:hover, lo-button[variant=action][disabled] button:hover, lo-button[variant=action-icon]:disabled button:hover, lo-button[variant=action-icon][disabled] button:hover {
      cursor: not-allowed;
    }

    lo-button[variant=action]:disabled span, lo-button[variant=action][disabled] span, lo-button[variant=action-icon]:disabled span, lo-button[variant=action-icon][disabled] span {
      background-color: var(--color-neutral);
    }

    lo-button[variant=action]:disabled:hover, lo-button[variant=action][disabled]:hover, lo-button[variant=action-icon]:disabled:hover, lo-button[variant=action-icon][disabled]:hover {
      cursor: not-allowed;
    }

  lo-button[variant=action].icon-only, lo-button[variant=action-icon].icon-only {
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: grid;
    min-height: 0;
    min-width: 0;
    outline: none;
    padding: 5px;
  }

    lo-button[variant=action].icon-only:hover, lo-button[variant=action-icon].icon-only:hover {
      background-color: transparent;
    }

      lo-button[variant=action].icon-only:hover span, lo-button[variant=action-icon].icon-only:hover span {
        background-color: var(--color-primary-dark);
      }

    lo-button[variant=action].icon-only span, lo-button[variant=action-icon].icon-only span {
      display: inline-block;
      margin-right: 0;
    }

    lo-button[variant=action].icon-only:disabled:hover span, lo-button[variant=action].icon-only[disabled]:hover span, lo-button[variant=action-icon].icon-only:disabled:hover span, lo-button[variant=action-icon].icon-only[disabled]:hover span {
      background-color: var(--color-neutral);
    }

lo-button[variant=save], lo-button[variant=save-icon] {
  --mainColor: var(--color-success);
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--color-success);
  align-items: center;
  background-color: #ffffff;
  color: var(--color-success);
  display: flex;
  justify-content: center;
  line-height: 0;
  transition: background 0.8s;
}

  lo-button[variant=save] button, lo-button[variant=save-icon] button {
    align-items: center;
    appearance: none;
    background: inherit;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    min-width: 86px;
    outline: 0;
    padding: 5px 10px;
    width: 100%;
  }

    lo-button[variant=save] button.icon-only, lo-button[variant=save-icon] button.icon-only {
      background-color: transparent;
      border: 0;
      border-radius: 50%;
      display: grid;
      min-height: 0;
      min-width: 0;
      outline: none;
      padding: 5px;
    }

      lo-button[variant=save] button.icon-only:hover, lo-button[variant=save-icon] button.icon-only:hover {
        background-color: transparent;
      }

        lo-button[variant=save] button.icon-only:hover span, lo-button[variant=save-icon] button.icon-only:hover span {
          background-color: var(--font-color);
        }

      lo-button[variant=save] button.icon-only span, lo-button[variant=save-icon] button.icon-only span {
        display: inline-block;
        margin-right: 0;
      }

      lo-button[variant=save] button.icon-only:disabled:hover span, lo-button[variant=save] button.icon-only[disabled]:hover span, lo-button[variant=save-icon] button.icon-only:disabled:hover span, lo-button[variant=save-icon] button.icon-only[disabled]:hover span {
        background-color: var(--color-neutral);
      }

  lo-button[variant=save]:hover, lo-button[variant=save-icon]:hover {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid var(--color-success);
    background: var(--color-success-light) radial-gradient(circle, transparent 1%, var(--color-success-light) 1%) center/15000%;
    color: var(--font-color-opposite);
    cursor: pointer;
  }

    lo-button[variant=save]:hover span, lo-button[variant=save-icon]:hover span {
      background-color: var(--font-color-opposite);
    }

  lo-button[variant=save]:active, lo-button[variant=save-icon]:active {
    background-color: #ffffff;
    background-size: 100%;
    transition: background 0s;
  }

  lo-button[variant=save]:focus, lo-button[variant=save]:focus-within, lo-button[variant=save-icon]:focus, lo-button[variant=save-icon]:focus-within {
    box-shadow: 0px 0px 3px 2px rgba(0, 138, 28, 0.3);
    outline: 0;
  }

  lo-button[variant=save]:disabled, lo-button[variant=save][disabled], lo-button[variant=save-icon]:disabled, lo-button[variant=save-icon][disabled] {
    background: var(--color-neutral-lightest);
    border: 1px solid var(--color-neutral-dark);
    color: var(--color-neutral-dark);
    cursor: not-allowed;
    box-shadow: none;
    transition: none;
  }

    lo-button[variant=save]:disabled button:hover, lo-button[variant=save][disabled] button:hover, lo-button[variant=save-icon]:disabled button:hover, lo-button[variant=save-icon][disabled] button:hover {
      cursor: not-allowed;
    }

    lo-button[variant=save]:disabled span, lo-button[variant=save][disabled] span, lo-button[variant=save-icon]:disabled span, lo-button[variant=save-icon][disabled] span {
      background-color: var(--color-neutral);
    }

    lo-button[variant=save]:disabled:hover, lo-button[variant=save][disabled]:hover, lo-button[variant=save-icon]:disabled:hover, lo-button[variant=save-icon][disabled]:hover {
      cursor: not-allowed;
    }

  lo-button[variant=save].icon-only, lo-button[variant=save-icon].icon-only {
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: grid;
    min-height: 0;
    min-width: 0;
    outline: none;
    padding: 5px;
  }

    lo-button[variant=save].icon-only:hover, lo-button[variant=save-icon].icon-only:hover {
      background-color: transparent;
    }

      lo-button[variant=save].icon-only:hover span, lo-button[variant=save-icon].icon-only:hover span {
        background-color: var(--color-success-dark);
      }

    lo-button[variant=save].icon-only span, lo-button[variant=save-icon].icon-only span {
      display: inline-block;
      margin-right: 0;
    }

    lo-button[variant=save].icon-only:disabled:hover span, lo-button[variant=save].icon-only[disabled]:hover span, lo-button[variant=save-icon].icon-only:disabled:hover span, lo-button[variant=save-icon].icon-only[disabled]:hover span {
      background-color: var(--color-neutral);
    }

lo-button[variant=danger], lo-button[variant=danger-icon] {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--color-danger);
  align-items: center;
  background-color: #ffffff;
  color: var(--color-danger);
  display: flex;
  justify-content: center;
  line-height: 0;
  transition: background 0.8s;
}

  lo-button[variant=danger] button, lo-button[variant=danger-icon] button {
    align-items: center;
    appearance: none;
    background: inherit;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    min-width: 86px;
    outline: 0;
    padding: 5px 10px;
    width: 100%;
  }

    lo-button[variant=danger] button.icon-only, lo-button[variant=danger-icon] button.icon-only {
      background-color: transparent;
      border: 0;
      border-radius: 50%;
      display: grid;
      min-height: 0;
      min-width: 0;
      outline: none;
      padding: 5px;
    }

      lo-button[variant=danger] button.icon-only:hover, lo-button[variant=danger-icon] button.icon-only:hover {
        background-color: transparent;
      }

        lo-button[variant=danger] button.icon-only:hover span, lo-button[variant=danger-icon] button.icon-only:hover span {
          background-color: var(--font-color);
        }

      lo-button[variant=danger] button.icon-only span, lo-button[variant=danger-icon] button.icon-only span {
        display: inline-block;
        margin-right: 0;
      }

      lo-button[variant=danger] button.icon-only:disabled:hover span, lo-button[variant=danger] button.icon-only[disabled]:hover span, lo-button[variant=danger-icon] button.icon-only:disabled:hover span, lo-button[variant=danger-icon] button.icon-only[disabled]:hover span {
        background-color: var(--color-neutral);
      }

  lo-button[variant=danger]:hover, lo-button[variant=danger-icon]:hover {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid var(--color-danger);
    background: var(--color-danger-light) radial-gradient(circle, transparent 1%, var(--color-danger-light) 1%) center/15000%;
    color: var(--font-color-opposite);
    cursor: pointer;
  }

    lo-button[variant=danger]:hover span, lo-button[variant=danger-icon]:hover span {
      background-color: var(--font-color-opposite);
    }

  lo-button[variant=danger]:active, lo-button[variant=danger-icon]:active {
    background-color: #ffffff;
    background-size: 100%;
    transition: background 0s;
  }

  lo-button[variant=danger]:focus, lo-button[variant=danger]:focus-within, lo-button[variant=danger-icon]:focus, lo-button[variant=danger-icon]:focus-within {
    box-shadow: 0px 0px 3px 2px rgba(232, 2, 2, 0.2);
    outline: 0;
  }

  lo-button[variant=danger]:disabled, lo-button[variant=danger][disabled], lo-button[variant=danger-icon]:disabled, lo-button[variant=danger-icon][disabled] {
    background: var(--color-neutral-lightest);
    border: 1px solid var(--color-neutral-dark);
    color: var(--color-neutral-dark);
    cursor: not-allowed;
    box-shadow: none;
    transition: none;
  }

    lo-button[variant=danger]:disabled button:hover, lo-button[variant=danger][disabled] button:hover, lo-button[variant=danger-icon]:disabled button:hover, lo-button[variant=danger-icon][disabled] button:hover {
      cursor: not-allowed;
    }

    lo-button[variant=danger]:disabled span, lo-button[variant=danger][disabled] span, lo-button[variant=danger-icon]:disabled span, lo-button[variant=danger-icon][disabled] span {
      background-color: var(--color-neutral);
    }

    lo-button[variant=danger]:disabled:hover, lo-button[variant=danger][disabled]:hover, lo-button[variant=danger-icon]:disabled:hover, lo-button[variant=danger-icon][disabled]:hover {
      cursor: not-allowed;
    }

  lo-button[variant=danger].icon-only, lo-button[variant=danger-icon].icon-only {
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: grid;
    min-height: 0;
    min-width: 0;
    outline: none;
    padding: 5px;
  }

    lo-button[variant=danger].icon-only:hover, lo-button[variant=danger-icon].icon-only:hover {
      background-color: transparent;
    }

      lo-button[variant=danger].icon-only:hover span, lo-button[variant=danger-icon].icon-only:hover span {
        background-color: var(--color-danger-dark);
      }

    lo-button[variant=danger].icon-only span, lo-button[variant=danger-icon].icon-only span {
      display: inline-block;
      margin-right: 0;
    }

    lo-button[variant=danger].icon-only:disabled:hover span, lo-button[variant=danger].icon-only[disabled]:hover span, lo-button[variant=danger-icon].icon-only:disabled:hover span, lo-button[variant=danger-icon].icon-only[disabled]:hover span {
      background-color: var(--color-neutral);
    }

lo-button[variant=cancel] {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid transparent;
  align-items: center;
  background-color: transparent;
  color: var(--color-danger);
  display: flex;
  justify-content: center;
  line-height: 0;
  transition: background 0.8s;
}

  lo-button[variant=cancel] button {
    align-items: center;
    appearance: none;
    background: inherit;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 32px;
    min-width: 86px;
    outline: 0;
    padding: 5px 10px;
    width: 100%;
  }

    lo-button[variant=cancel] button.icon-only {
      background-color: transparent;
      border: 0;
      border-radius: 50%;
      display: grid;
      min-height: 0;
      min-width: 0;
      outline: none;
      padding: 5px;
    }

      lo-button[variant=cancel] button.icon-only:hover {
        background-color: transparent;
      }

        lo-button[variant=cancel] button.icon-only:hover span {
          background-color: var(--font-color);
        }

      lo-button[variant=cancel] button.icon-only span {
        display: inline-block;
        margin-right: 0;
      }

      lo-button[variant=cancel] button.icon-only:disabled:hover span, lo-button[variant=cancel] button.icon-only[disabled]:hover span {
        background-color: var(--color-neutral);
      }

  lo-button[variant=cancel]:hover {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid transparent;
    background: transparent radial-gradient(circle, transparent 1%, transparent 1%) center/15000%;
    color: var(--color-danger);
    cursor: pointer;
  }

    lo-button[variant=cancel]:hover span {
      background-color: var(--color-danger);
    }

  lo-button[variant=cancel]:active {
    background-color: var(--color-neutral-lightest);
    background-size: 100%;
    transition: background 0s;
  }

  lo-button[variant=cancel]:focus, lo-button[variant=cancel]:focus-within {
    box-shadow: 0px 0px 3px 2px rgba(232, 2, 2, 0.2);
    outline: 0;
  }

  lo-button[variant=cancel]:disabled, lo-button[variant=cancel][disabled] {
    background: var(--color-neutral-lightest);
    border: 1px solid var(--color-neutral-dark);
    color: var(--color-neutral-dark);
    cursor: not-allowed;
    box-shadow: none;
    transition: none;
  }

    lo-button[variant=cancel]:disabled button:hover, lo-button[variant=cancel][disabled] button:hover {
      cursor: not-allowed;
    }

    lo-button[variant=cancel]:disabled span, lo-button[variant=cancel][disabled] span {
      background-color: var(--color-neutral);
    }

    lo-button[variant=cancel]:disabled:hover, lo-button[variant=cancel][disabled]:hover {
      cursor: not-allowed;
    }

lo-button {
  display: flex;
  align-items: center;
  align-self: center;
  height: fit-content;
}

lo-input {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  width: 100%;
}

  lo-input[disabled] {
    background-color: var(--color-neutral-lightest);
    color: var(--color-neutral-dark);
  }

    lo-input[disabled]:hover {
      cursor: not-allowed;
    }

    lo-input[disabled]:focus-within {
      box-shadow: none;
    }

    lo-input[disabled] label {
      justify-content: center;
    }

  lo-input:focus-within {
    box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
    outline: 0;
  }

  lo-input:hover {
    cursor: text;
  }

  lo-input[add-arrow]::after {
    background-color: var(--color-primary);
    bottom: 10px;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    content: " ";
    display: block;
    height: 7px;
    position: absolute;
    right: 5px;
    width: 10px;
  }

  lo-input[filter] {
    cursor: text;
    padding: 0;
  }

    lo-input[filter] input {
      padding: 5px;
    }

  lo-input[internal=true] {
    width: unset;
  }

  lo-input .input-clear {
    color: var(--font-color);
    content: "×";
    display: none;
    font-size: var(--font-size-large);
    height: 10px;
    line-height: 0.5;
    padding-right: 1px;
    padding-bottom: 1px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(50%, -50%);
    width: 10px;
  }

    lo-input .input-clear:hover, lo-input .input-clear:focus {
      color: var(--color-primary);
      cursor: pointer;
    }

    lo-input .input-clear:focus {
      box-shadow: 1px 1px 4px 2px rgba(2, 103, 195, 0.2);
    }

  lo-input[clearable]:hover .input-clear, lo-input[clearable]:focus-within .input-clear {
    display: block;
    outline: 0;
  }

  lo-input label {
    display: flex;
    font-weight: 600;
    margin-bottom: 2px;
    word-break: break-word;
  }

    lo-input label:hover {
      cursor: text;
    }

    lo-input label[disabled]:hover {
      cursor: not-allowed;
    }

  lo-input[noclick]:hover {
    cursor: pointer;
  }

    lo-input[noclick]:hover[disabled] {
      cursor: not-allowed;
    }

  lo-input[noclick] label, lo-input[noclick] input {
    pointer-events: none;
  }

  lo-input input {
    border: 0;
    padding-left: 4px;
    position: relative;
    text-overflow: ellipsis;
    width: 100%;
  }

    lo-input input:focus {
      outline: none;
    }

    lo-input input::-webkit-outer-spin-button, lo-input input::-webkit-inner-spin-button { /* Chrome, Safari, Edge, Opera */
      -webkit-appearance: none;
      margin: 0;
    }

    lo-input input:-webkit-autofill, lo-input input:-internal-autofill-selected {
      background-color: white !important;
      -webkit-box-shadow: 0 0 0 30px white inset !important;
    }

    lo-input input[type=number] { /* Firefox */
      -moz-appearance: textfield;
      appearance: textfield;
    }

    lo-input input[disabled] {
      background-color: var(--color-neutral-lightest);
      color: var(--color-neutral-dark);
      text-align: center;
    }

      lo-input input[disabled]:hover {
        cursor: not-allowed;
      }

    lo-input input::placeholder {
      text-transform: lowercase;
    }

    lo-input input[type=date i] {
      color: #767676;
      font-family: var(--font-family);
    }

lo-dropdown {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  outline: none;
  position: relative;
  width: 100%;
  appearance: none;
  border: 0;
  outline: none;
  width: 100%;
}

  lo-dropdown [dropdown-input] input {
    width: calc(100% - 13px);
  }

  lo-dropdown[disabled] {
    cursor: not-allowed;
  }

    lo-dropdown[disabled] lo-input {
      background-color: var(--color-neutral-lightest);
    }

      lo-dropdown[disabled] lo-input::after {
        display: none;
      }

  lo-dropdown:hover {
    cursor: pointer;
  }

  lo-dropdown label:hover, lo-dropdown input:hover {
    cursor: pointer;
  }

  lo-dropdown:focus, lo-dropdown:focus-within, lo-dropdown:focus-visible, lo-dropdown:active {
    box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
    outline: 0;
  }

    lo-dropdown:focus [dropopen-container], lo-dropdown:focus-within [dropopen-container], lo-dropdown:focus-visible [dropopen-container], lo-dropdown:active [dropopen-container] {
      display: block;
      animation: fade-in 0.2s ease-in;
      transition: 0.2s;
    }

  lo-dropdown[disabled]:focus, lo-dropdown[disabled]:focus-within, lo-dropdown[disabled]:focus-visible, lo-dropdown[disabled]:active {
    box-shadow: none;
  }

  lo-dropdown[disabled] [dropopen-container] {
    display: none;
  }

  lo-dropdown:hover {
    cursor: pointer;
  }

    lo-dropdown:hover[disabled] {
      cursor: not-allowed;
    }

  lo-dropdown [dropopen-container] {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0 0 3px 3px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
    display: none;
    list-style: none;
    min-width: 150px;
    max-height: 300px;
    overflow: auto;
    padding: 0;
    position: absolute;
    top: calc(100% - 1px);
    z-index: 1;
  }

    lo-dropdown [dropopen-container]:focus, lo-dropdown [dropopen-container]:focus-within {
      box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
      outline: 0;
    }

    lo-dropdown [dropopen-container] ul {
      margin: 0;
      padding: 0;
    }

  lo-dropdown.list-up [dropopen-container] {
    border-radius: 3px 3px 0 0;
    top: unset;
    bottom: 100%;
  }

  lo-dropdown.list-left [dropopen-container] {
    border-radius: 3px 0 3px 3px;
    right: 0;
  }

  lo-dropdown lo-input[dropdown-filter] {
    margin: 8px;
  }

  lo-dropdown li {
    padding: 5px 10px;
  }

    lo-dropdown li:hover, lo-dropdown li:focus {
      background-color: var(--color-primary-soft);
      outline: 0;
    }

    lo-dropdown li[value=default] {
      color: var(--color-neutral);
    }

    lo-dropdown li.selected {
      background-color: var(--color-primary-light);
      color: #ffffff;
    }

lo-toggle {
  align-items: center;
  display: flex;
}

  lo-toggle .toggle {
    --width: 60px;
    --height: 25px;
    align-items: center;
    border: 0;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: var(--height);
    cursor: pointer;
    display: inline-flex;
    height: var(--height);
    position: relative;
  }

    lo-toggle .toggle input[type=checkbox] {
      display: none;
    }

    lo-toggle .toggle .slider {
      background-color: #ccc;
      border-radius: var(--height);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
      height: 100%;
      position: relative;
      transition: all 0.2s ease-in-out;
      width: var(--width);
    }

      lo-toggle .toggle .slider:focus {
        box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
        outline: 0;
        outline: none;
      }

      lo-toggle .toggle .slider::before {
        background-color: #fff;
        border-radius: calc(var(--height) / 2);
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        content: "";
        height: calc(var(--height));
        left: 0;
        position: absolute;
        top: 0;
        transition: all 0.2s ease-in-out;
        width: calc(var(--height));
      }

    lo-toggle .toggle input:checked ~ .slider {
      background-color: var(--color-primary);
    }

      lo-toggle .toggle input:checked ~ .slider::before {
        transform: translateX(calc(var(--width) - var(--height)));
      }

    lo-toggle .toggle .toggle-label {
      margin: 0 10px;
    }

    lo-toggle .toggle.two-labels input:not(:checked) ~ .toggle-label.left, lo-toggle .toggle.two-labels input:checked ~ .toggle-label.right {
      color: var(--color-primary);
      text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
    }

    lo-toggle .toggle.two-labels input:not(:checked) ~ .toggle-label.right, lo-toggle .toggle.two-labels input:checked ~ .toggle-label.left {
      color: var(--font-color);
      font-weight: normal;
      text-shadow: none;
    }

    lo-toggle .toggle input:checked ~ .toggle-label.left {
      color: var(--color-primary);
      text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
    }

  lo-toggle[disabled] *:hover {
    cursor: not-allowed;
  }

  lo-toggle[disabled] .slider:focus {
    box-shadow: none;
  }

  lo-toggle[disabled] .toggle input:checked ~ .slider {
    background-color: var(--color-neutral-light);
  }

  lo-toggle[disabled] .toggle input:checked ~ .toggle-label.left {
    color: var(--font-color);
  }

  lo-toggle[disabled] .toggle.two-labels input:not(:checked) ~ .toggle-label.left, lo-toggle[disabled] .toggle.two-labels input:checked ~ .toggle-label.right {
    color: var(--color-neutral-darkest);
    text-shadow: 0.25px 0px 0.1px, -0.25px 0px 0.1px;
  }

lo-datepicker {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  outline: none;
  position: relative;
  width: 100%;
  appearance: none;
  border: 0;
  outline: none;
  width: 100%;
}

  lo-datepicker[disabled] {
    cursor: not-allowed;
  }

    lo-datepicker[disabled] lo-input {
      background-color: var(--color-neutral-lightest);
    }

      lo-datepicker[disabled] lo-input::after {
        display: none;
      }

  lo-datepicker:hover {
    cursor: pointer;
  }

  lo-datepicker label:hover, lo-datepicker input:hover {
    cursor: pointer;
  }

  lo-datepicker lo-input[internal=true] {
    width: 100%;
  }

  lo-datepicker:focus, lo-datepicker:focus-within, lo-datepicker:focus-visible, lo-datepicker:active {
    box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
    outline: 0;
  }

    lo-datepicker:focus [dropopen-container], lo-datepicker:focus-within [dropopen-container], lo-datepicker:focus-visible [dropopen-container], lo-datepicker:active [dropopen-container] {
      display: block;
      animation: fade-in 0.2s ease-in;
      transition: 0.2s;
    }

  lo-datepicker[disabled]:focus, lo-datepicker[disabled]:focus-within, lo-datepicker[disabled]:focus-visible, lo-datepicker[disabled]:active {
    box-shadow: none;
  }

  lo-datepicker[disabled] [dropopen-container] {
    display: none;
  }

  lo-datepicker:hover {
    cursor: pointer;
  }

    lo-datepicker:hover[disabled] {
      cursor: not-allowed;
    }

  lo-datepicker [dropopen-container] {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 0 0 3px 3px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.25);
    display: none;
    list-style: none;
    min-width: 150px;
    max-height: 300px;
    overflow: auto;
    padding: 0;
    position: absolute;
    top: calc(100% - 1px);
    z-index: 1;
  }

    lo-datepicker [dropopen-container]:focus, lo-datepicker [dropopen-container]:focus-within {
      box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
      outline: 0;
    }

    lo-datepicker [dropopen-container] ul {
      margin: 0;
      padding: 0;
    }

  lo-datepicker.list-up [dropopen-container] {
    border-radius: 3px 3px 0 0;
    top: unset;
    bottom: 100%;
  }

  lo-datepicker.list-left [dropopen-container] {
    border-radius: 3px 0 3px 3px;
    right: 0;
  }

  lo-datepicker [dropopen-container] {
    padding: 5px;
    width: 300px;
  }

  lo-datepicker [calendar-top] {
    cursor: default;
    text-align: center;
  }

    lo-datepicker [calendar-top] lo-content[internal] {
      align-items: center;
    }

      lo-datepicker [calendar-top] lo-content[internal] lo-column {
        justify-content: center;
      }

        lo-datepicker [calendar-top] lo-content[internal] lo-column[col="2"] {
          --cols: 6;
          flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
          max-width: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
        }

        lo-datepicker [calendar-top] lo-content[internal] lo-column[col="8"] {
          flex-basis: 66.6666667%;
          max-width: 66.6666667%;
        }

    lo-datepicker [calendar-top] .display-date {
      cursor: pointer;
      font-size: var(--font-size-medium);
      padding-left: 5px;
      padding-right: 25px;
      position: relative;
    }

      lo-datepicker [calendar-top] .display-date:hover, lo-datepicker [calendar-top] .display-date:focus {
        border-bottom: 1px solid var(--color-primary);
        outline: none;
      }

      lo-datepicker [calendar-top] .display-date::after {
        background-color: var(--color-primary);
        bottom: 10px;
        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
        content: " ";
        display: block;
        height: 7px;
        position: absolute;
        right: 5px;
        width: 10px;
        bottom: unset;
        top: 8px;
      }

    lo-datepicker [calendar-top] .calendar-arrow {
      color: var(--color-primary);
      cursor: pointer;
      display: block;
      font-size: var(--font-size-large);
      position: relative;
      top: -3px;
    }

      lo-datepicker [calendar-top] .calendar-arrow:hover, lo-datepicker [calendar-top] .calendar-arrow:focus {
        outline: none;
        text-decoration: underline;
      }

  lo-datepicker [calendar-body] {
    position: relative;
  }

  lo-datepicker ul.week, lo-datepicker ul.month {
    cursor: default;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  lo-datepicker [calendar-header] {
    color: var(--font-color);
    font-size: var(--font-size-medium);
    font-weight: bold;
  }

    lo-datepicker [calendar-header]:hover {
      background-color: transparent;
    }

  lo-datepicker li {
    color: var(--color-primary);
    cursor: default;
    padding: 5px 10px;
    position: relative;
    text-align: center;
  }

    lo-datepicker li[value]:hover, lo-datepicker li[value]:focus {
      background-color: var(--color-primary-soft);
      border-radius: 20%;
      cursor: pointer;
      outline: 0;
    }

    lo-datepicker li.today {
      font-size: var(--font-size-medium);
      font-weight: bold;
      line-height: 1.15;
    }

    lo-datepicker li[disabled] {
      color: var(--color-neutral);
    }

    lo-datepicker li[value].selected {
      background-color: var(--color-primary-light);
      border-radius: 20%;
      color: #ffffff;
    }

  lo-datepicker .yearPicker, lo-datepicker .monthPicker {
    display: none;
  }

    lo-datepicker .yearPicker[active], lo-datepicker .monthPicker[active] {
      display: block;
    }

      lo-datepicker .yearPicker[active] ul, lo-datepicker .monthPicker[active] ul {
        background-color: #ffffff;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
      }

        lo-datepicker .yearPicker[active] ul li, lo-datepicker .monthPicker[active] ul li {
          align-items: center;
          cursor: pointer;
          display: flex;
          justify-content: center;
        }

          lo-datepicker .yearPicker[active] ul li[value]:hover, lo-datepicker .yearPicker[active] ul li[value]:focus, lo-datepicker .monthPicker[active] ul li[value]:hover, lo-datepicker .monthPicker[active] ul li[value]:focus {
            background-color: var(--color-primary-soft);
            border-radius: 20%;
            cursor: pointer;
            outline: 0;
          }

          lo-datepicker .yearPicker[active] ul li.today, lo-datepicker .monthPicker[active] ul li.today {
            font-size: var(--font-size-medium);
            font-weight: bold;
            line-height: 1.15;
          }

          lo-datepicker .yearPicker[active] ul li[disabled], lo-datepicker .monthPicker[active] ul li[disabled] {
            color: var(--color-neutral);
          }

          lo-datepicker .yearPicker[active] ul li[value].selected, lo-datepicker .monthPicker[active] ul li[value].selected {
            background-color: var(--color-primary-light);
            border-radius: 20%;
            color: #ffffff;
          }

lo-checkbox {
  align-items: center;
  display: flex;
  margin: 6px 0;
}

  lo-checkbox:hover input[type=checkbox], lo-checkbox:focus input[type=checkbox] {
    box-shadow: 0px 0px 3px 2px rgba(2, 103, 195, 0.3);
    outline: 0;
  }

  lo-checkbox input[type=checkbox] {
    border-radius: 3px 3px 3px 3px;
    border: 1px solid var(--border-color);
    background-color: var(--color-neutral-lightest);
    cursor: pointer;
    height: 20px;
    position: relative;
    vertical-align: text-top;
    width: 20px;
    -webkit-appearance: none;
  }

    lo-checkbox input[type=checkbox][whitebg] {
      background-color: #ffffff;
    }

    lo-checkbox input[type=checkbox]:checked {
      background-color: var(--color-primary);
      border: var(--color-primary);
    }

      lo-checkbox input[type=checkbox]:checked:before {
        border: 1px solid #ffffff;
        border-width: 0 2px 2px 0;
        content: "";
        height: 12px;
        margin: -1px -1px 0 -1px;
        position: absolute;
        right: 50%;
        transform: rotate(45deg) translate(-50%, -50%);
        top: 50%;
        width: 5px;
      }

  lo-checkbox label {
    cursor: pointer;
    margin-left: 6px;
  }

lo-group {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--border-color);
  align-items: flex-start;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 5px;
  width: 100%;
}

  lo-group > label {
    font-weight: 600;
    margin-bottom: 5px;
    position: relative;
    white-space: initial;
    width: 100%;
  }

  lo-group [elements] {
    display: flex;
    flex-direction: row;
    grid-gap: 0;
    justify-content: space-evenly;
    position: relative;
  }

    lo-group [elements] > * {
      margin-right: 10px;
    }

      lo-group [elements] > *:last-child {
        margin-right: 0;
      }

@container (min-width: 60em) {
  lo-group [elements] {
    flex-direction: column;
    grid-gap: 10px;
  }
}

@container (min-width: 70em) {
  lo-group [elements] {
    flex-direction: row;
    grid-gap: 0;
  }
}

lo-group lo-input label {
  display: none;
}

lo-group lo-toggle {
  margin: 3px 0;
}

lo-modal {
  border-radius: 3px 3px 3px 3px;
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  bottom: 0;
  box-shadow: 3px 3px 10px 0 rgb(0, 0, 0);
  display: none;
  flex-direction: column;
  height: 80%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
}

  lo-modal[variant=alert] {
    height: 200px;
    width: 300px;
    z-index: 6;
  }

  lo-modal[variant=medium] {
    min-width: 700px;
    width: 50%;
  }

  lo-modal[variant=large] {
    height: 85%;
    width: 90%;
  }

  lo-modal lo-modalheader {
    background-color: var(--color-primary);
    color: #ffffff;
    padding: 10px;
  }

  lo-modal lo-modalbody {
    display: flex;
    flex: 1 1 100%;
    overflow: hidden;
    padding: 10px;
  }

    lo-modal lo-modalbody lo-content {
      width: 100%;
    }

    lo-modal lo-modalbody lo-column {
      align-items: center;
      display: flex;
    }

  lo-modal lo-modalfooter {
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 10px;
    width: 100%;
  }

    lo-modal lo-modalfooter lo-button {
      margin-left: 5px;
    }

      lo-modal lo-modalfooter lo-button.right {
        margin-right: auto;
      }

lo-overlay {
  background: #000000;
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
}

#asap-file-error-corrections-modal {
    display: flex;
}

#asap-file-error-corrections-modal [dispenses-level] {
  display: block;
}

#asap-file-error-corrections-modal [errors-level] {
  display: none;
}

  #asap-file-error-corrections-modal [errors-level] lo-row {
    margin-bottom: 10px;
  }

  #asap-file-error-corrections-modal [errors-level] .dispense-name, #inside-error-corrections-modal [errors-level] .dispense-name {
    font-size: var(--font-size-large);
  }

#inside-error-corrections-modal lo-input[invalid="true"] {
  border: 1px solid var(--color-danger);
  box-shadow: 0px 0px 3px 2px rgba(255, 0, 0, 0.2);
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2));
}

#inside-error-corrections-modal lo-input[warning="true"] {
  border: 1px solid var(--color-secondary);
  box-shadow: 0px 0px 3px 2px rgba(254, 145, 44, 0.2);
  filter: drop-shadow(0px 0px 2px rgba(254, 145, 44, 0.2));
}
#inside-error-corrections-modal .dispense-errors-header {
  border-bottom: 1px solid var(--color-neutral);
  margin-bottom: 10px;
  padding-bottom: 20px;
}
#inside-error-corrections-modal [errors-level] lo-row {
  margin-bottom: 10px;
}
#inside-error-corrections-modal .modal-heading lo-checkbox label {
  font-weight: 400;
}

#asap-file-error-corrections-modal [errors-level] .error, #inside-error-corrections-modal [errors-level] .error {
  color: var(--color-danger); 
  font-weight: bold;
  margin-left: 5px;
}

  #asap-file-error-corrections-modal [errors-level] .warning, #inside-error-corrections-modal [errors-level] .warning {
    color: var(--color-secondary-light);
    font-weight: bold;
    margin-left: 5px;
  }

#asap-file-error-corrections-modal .dispense-errors-header {
  border-bottom: 1px solid var(--color-neutral);
  margin-bottom: 20px;
  padding-bottom: 20px;
}

#asap-file-error-corrections-modal .modal-heading {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#asap-file-error-corrections-modal .inline-error-message {
  color: var(--color-danger);
}

/*#asap-file-error-corrections-modal lo-modalfooter lo-button.right {
  display: none;
}*/

@keyframes cdk-text-field-autofill-start { /*!*/
}

@keyframes cdk-text-field-autofill-end { /*!*/
}

.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms;
}

all-fields-list-container {
  display: block;
  overflow: hidden;
  height: calc(100% - 88px);
}

all-fields-list {
  display: block;
  overflow: hidden;
  height: calc(100% - 88px);
  height: 100%;
  display: block;
  overflow: auto;
}

.inline-error-message {
  color: var(--color-danger);
}

.inline-warning-message {
  color: var(--color-secondary);
}

snack-bar-container {
  position: fixed;
  top: 30px;
  right: 15px;
  background: var(--color-success);
  color: #fff;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

lo-button[disabled] {
  pointer-events: none;
}

.non-fixable {
  color: var(--color-danger)
}

.refresh-submission {
  font-size: 15px;
  padding: 10px;
  border: none;
  margin-right: 10px;
  outline: none !important;
  box-shadow: none !important;
  background-color: #f4f4f4;
 
}

input#mat-checkbox-2-input {
  width: 100%;
  height: 100%;
}

span.mat-checkbox-inner-container {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.mat-checkbox{
    align-self:center;
}
.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: var(--color-primary);
}

span.mat-checkbox-frame {
  border: none;
  border-radius: 3px;
}

input#mat-checkbox-1-input {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 3px !important;
}

.mat-checkbox-layout {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

span.mat-checkbox-inner-container input[type=checkbox] {
  width: 0px;
}