/*
If a new color is needed and doesn't exist add it to the accent section with a new number in the sequence.
The colors are not in order and should not contain the name of the color in case the color is refactored or changed later on
--dark and --light for example allow us to change black and white to shades without renaming variables through the entire application, the colors are relative
*/

/* TODO Remove once we're done integrating the design system. */

@font-face {
  font-family: Roboto-Light;
  src: url(/ttf/Roboto-Light.ttf);
}
@font-face {
  font-family: Roboto-Regular;
  src: url(/ttf/Roboto-Regular.ttf);
}
@font-face {
  font-family: Roboto-Medium;
  src: url(/ttf/Roboto-Medium.ttf);
}
@font-face {
  font-family: Roboto-Bold;
  src: url(/ttf/Roboto-Bold.ttf);
}

:root {
  --dark: #000000;
  --dark-05: rgba(0, 0, 0, 0.05);
  --dark-11: rgba(0, 0, 0, 0.11);
  --dark-15: rgba(0, 0, 0, 0.15);
  --dark-25: rgba(0, 0, 0, 0.25);
  --dark-26: rgba(0, 0, 0, 0.26); /* #00000042 */
  --dark-35: rgba(0, 0, 0, 0.35);
  --dark-40: rgba(0, 0, 0, 0.4);
  --dark-50: rgba(0, 0, 0, 0.5);
  --dark-60: rgba(0, 0, 0, 0.6);
  --dark-70: rgba(0, 0, 0, 0.7);
  --dark-80: rgba(0, 0, 0, 0.8);
  --dark-87: rgba(0, 0, 0, 0.87);

  --light: #ffffff;
  --light-25: rgba(255, 255, 255, 0.25);
  --light-75: rgba(255, 255, 255, 0.75);

  --accent: #1f6acc;

  --success: #0dd688;
  --success2: #4caf50;
  --success2-bg: #e8f5e9;
  --success2-borderColor: #a5d6a7;
  --success2-aColor: #1e8449;
  --success-15: #e7f1db;

  --fail: #d62652;
  --fail-2: #c30707;
  --fail-15: #fbccd4;
  --fail-2-10: rgba(195, 7, 7, 0.1);

  --neutral: rgba(32, 105, 204, 0.2);

  --warn: #ffcc00;
  --warn-2: #c38207;
  --warn-3: #ff8f12;
  --warn-4: #a06800;
  --warn-55: #ffcc0055;

  --accent-1: #f8f9fb;
  --accent-2: #eaecef;
  --accent-3: #eceff0;
  --accent-4: #e4e7e8;
  --accent-5: rgba(178, 178, 178, 0.4);
  --accent-6: #cccccc;
  --accent-7: #999999;
  --accent-8: #888888;
  --accent-9: #7d7d7d;
  --accent-10: #707070;
  --accent-11: #4c4c4c;
  --accent-12: #424242;
  --accent-13: #20272b;
  --accent-14: #263238;
  --accent-15: #b2b2b2;
  --accent-16: #6e6e6e;
  --accent-17: #bdbdbd;
  --accent-18: #dedede;
  --accent-19: #333333;
  --accent-20: #626262;
  --accent-21: #757575;
  --accent-22: #eeeeee;
  --accent-23: #c30707;
  --accent-24: #e9e9e9;
  --accent-25: #969696;
  --accent-26: #363636;
  --accent-27: #f1f1f1;
  --accent-28: #231f20;
  --accent-29: #43425d;
  --accent-30: #8b8b8b;
  --accent-31: #dddddd;
  --accent-32: #f8f2f2;
  --accent-33: #efefef;
  --accent-34: #e8e8e8;
  --accent-35: #f2f2f2;
  --accent-36: #4285f4;
  --accent-37: #fdfdfd;
  --accent-38: #ececec;
  --accent-39: #c5c5c5;
  --accent-40: #6d6d6d;
  --accent-41: #f9fafb;
  --accent-42: #3c3c3c;
  --accent-43: rgba(31, 106, 204, 0.1);
  --accent-44: rgba(31, 106, 204, 0.25);
  --accent-45: #1c5fb8;
  --accent-46: #f7f8fa;
  --accent-47: #b0b1b3;
  --accent-48: #4985d5;
  --accent-49: rgba(247, 248, 250, 0.75);
  --accent-50: rgba(234, 236, 239, 0.1);
  --accent-51: rgba(255, 255, 255, 0.1);
  --accent-52: rgba(255, 255, 255, 0.75);
  --accent-53: #444444;
  --accent-54: #393939;
  --accent-55: #9f9f9f;
  --accent-56: rgba(159, 159, 159, 0.3);
  --accent-57: #c1d9f2;
  --accent-58: #d2d2d2;
  --accent-59: #49576b;
  --accent-60: #0079d2;
  --accent-61: #5d5d5d;
  --accent-62: #2684ff;
  --accent-63: rgba(239, 239, 239, 0.5);
  --accent-64: #7e7e7e;
  --accent-65: #c30a12;
  --accent-66: #e3e3e3;
  --accent-67: rgba(204, 204, 204, 0.5);
  --accent-68: rgba(31, 106, 204, 0.5);
  --accent-69: #6996d0;

  --fontf-light: "Roboto-Light";
  --fontf-regular: "Roboto-Regular";
  --fontf-medium: "Roboto-Medium";
  --fontf-bold: "Roboto-Bold";

  --font-xxl: 48px;
  --font-xml: 38px;
  --font-xl: 24px;
  --font-l: 20px;
  --font-ml: 18px;
  --font-m: 16px;
  --font-s: 14px;
  --font-xs: 12px;

  --button-active: var(--accent-62);
  --button-disabled: var(--accent-25);

  --button-shadow: 0 3px 6px 0 var(--accent);

  --input-fg-default: var(--dark);
  --input-bg-default: var(--light);
  --input-bg-hover: rgba(31, 106, 204, 0.1);
  --input-bg-active: var(--blue);

  --top-bar-height: 87px;
  --nav-bar-height: 114px;
  --side-bar-width: 210px;
  --dashboard-min-width: 1500px;
  --hamburger-pos-top: 67px;
  --hamburger-pos-left: 189px;
  --hamburger-pos-left-narrow: 66px;
}

.shadow {
  box-shadow: 0 3px 6px 0 var(--accent);
}

html,
body {
  overflow: hidden;
}

html,
body,
button,
input {
  font-family: var(--fontf-regular), sans-serif;
  font-weight: 400;
}

button,
input {
  outline: none;
}

button:focus,
input:focus {
  outline: none;
}

.close {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: #fff url("/img/svg/close-24px.svg") no-repeat center;
  fill: var(--dark);
  opacity: 0.3;
}

.hide {
  display: none !important;
}

.link {
  text-decoration: none;
}

.round {
  border-radius: 30px;
  background-color: var(--accent-7);
  color: var(--light);
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 15px;
  font-family: var(--fontf-regular);
}

::placeholder,
input:hover::placeholder,
.placeholder {
  opacity: 0.54;
}
::placeholder {
  color: #000;
}

.subheader {
  font-size: var(--font-s);
  color: var(--accent-25);
}

button.datepicker {
  margin: auto;
  padding-right: 0;
  width: unset;
  cursor: pointer;
  border: 0px;
  text-align: center;
  vertical-align: middle;
  background-color: transparent;
}

/* Set right and top properties in page */
.datepicker-wrap {
  position: absolute;
  z-index: 200;
}

.datepicker-wrap:before {
  content: "";
  position: absolute;
  right: 33px;
  top: -0.5px;
  width: 15px;
  height: 15px;
  background-color: var(--accent-46);
  transform-origin: 0 0;
  transform: rotate(-45deg);
  z-index: 101;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}