/* Color theme relative variables */
/* System colors */
/* Layout relative variables */
:root {
  --eyesoft-primary-color: #193e69;
  --eyesoft-primary-color-light: rgb(155.55, 176.77875, 201.45);
  --eyesoft-primary-color-transparent: rgba(25, 62, 105, 0.2);
  --eyesoft-secondary-color: rgb(138.975, 163.741875, 192.525);
  --eyesoft-secondary-color-light: rgb(221.85, 228.92625, 237.15);
  --eyesoft-secondary-color-transparent: rgba(138.975, 163.741875, 192.525, 0.2);
  --eyesoft-accent-color: #68c6a8;
  --eyesoft-accent-color-light: rgb(215.0721153846, 239.9278846154, 231.9951923077);
  --eyesoft-accent-color-transparent: rgba(104, 198, 168, 0.4);
  --eyesoft-border-color: rgba(25, 62, 105, 0.15);
  --eyesoft-button-border-color: rgba(25, 62, 105, 0.4);
  --eyesoft-light-color: rgb(244.29, 245.5905, 250.41);
  --eyesoft-dark-color: rgb(20.4, 25.1175, 30.6);
  --eyesoft-color-warning: #f8df54;
  --eyesoft-color-warning-light: rgb(251.9915730337, 241.2471910112, 181.5084269663);
  --eyesoft-color-hard-warning: #fda76d;
  --eyesoft-color-hard-warning-light: rgb(253.9662162162, 209.5135135135, 179.5337837838);
  --eyesoft-color-error: #ff7f5d;
  --eyesoft-color-error-light: rgb(255, 194.5555555556, 178.5);
  --eyesoft-color-success: #68c6a8;
  --eyesoft-color-success-light: rgb(199.4639423077, 234.0360576923, 223.0024038462);
  --eyesoft-color-info: #73a5ff;
  --eyesoft-color-info-light: rgb(178.5, 205.8214285714, 255);
  --eyesoft-color-neutral: #c6cdd7;
  --eyesoft-color-neutral-light: rgb(233.9628865979, 236.5463917526, 240.2371134021);
  --header-height: 6rem;
  --logo-width: 10rem;
  --login-position-translate: none;
  background-color: var(--eyesoft-light-color);
}

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6rem 1fr;
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-areas: "header" "main";
}

header {
  grid-area: header;
  z-index: 2;
}

main {
  grid-area: main;
}