:root {
  --color-primary-red: hsl(0, 90%, 50%);
  --color-primary-yellow: hsl(45, 85%, 55%);
  --color-primary-green: hsl(80, 75%, 45%);
  --color-primary-blue: hsl(220, 100%, 70%);
  --color-primary-purple: hsl(280, 100%, 70%);
  --key-primary: hsl(225, 60%, 50%);
  --key-secondary: hsl(205, 80%, 50%);
  --key-tertiary: hsl(40, 80%, 50%);
  --key-alert: hsl(0, 80%, 50%);
  --key-neutral: hsl(0, 0%, 50%);
  --key-nvh: hsl(225, 50%, 50%);
  --key-nv: hsl(225, 40%, 50%);
  --key-nvl: hsl(225, 20%, 50%);
  --key-nvh-secondary: hsl(205, 50%, 50%);
  --key-nv-secondary: hsl(205, 40%, 50%);
  --key-nvl-secondary: hsl(205, 20%, 50%);
  --key-nvh-tertiary: hsl(40, 50%, 50%);
  --key-nv-tertiary: hsl(40, 40%, 50%);
  --key-nvl-tertiary: hsl(40, 20%, 50%);
  --key-nvh-alert: hsl(0, 50%, 50%);
  --key-nv-alert: hsl(0, 40%, 50%);
  --key-nvl-alert: hsl(0, 20%, 50%);
  --text-key-primary: White;
  --text-key-secondary: White;
  --text-key-tertiary:White;
  --text-key-alert: White;
  --state-opacity-text: 0.92;
  --state-opacity-text-hover: 1;
  --state-opacity-text-active: 0.64;
  --state-opacity-text-disabled: 0.38;
  --state-opacity-layer-hover: 0.08;
  --state-opacity-layer-active: 0.12;
  --state-opacity-layer-disabled: 0.38;
  --ref-primary80: hsl(225, 84%, 87%);
  --ref-neutral-variant-low40: hsl(225, 20%, 37%);
  --ref-neutral-variant-high20: hsl(225, 50%, 22%);
  --ref-neutral100: hsl(0, 0%, 100%);
  --ref-neutral99: hsl(0, 0%, 99%);
  --ref-neutral98: hsl(0, 0%, 97%);
  --ref-neutral95: hsl(0, 0%, 96%);
  --ref-neutral93: hsl(0, 0%, 93%);
  --ref-neutral90: hsl(0, 0%, 90%);
  --ref-neutral85: hsl(0, 0%, 83%);
  --ref-neutral80: hsl(0, 0%, 78%);
  --ref-neutral75: hsl(0, 0%, 74%);
  --ref-neutral70: hsl(0, 0%, 67%);
  --ref-neutral60: hsl(0, 0%, 57%);
  --ref-neutral55: hsl(0, 0%, 53%);
  --ref-neutral50: hsl(0, 0%, 46%);
  --ref-neutral40: hsl(0, 0%, 32%);
  --ref-neutral35: hsl(0, 0%, 27%);
  --ref-neutral33: hsl(0, 0%, 25%);
  --ref-neutral30: hsl(0, 0%, 23%);
  --ref-neutral25: hsl(0, 0%, 19%);
  --ref-neutral22: hsl(0, 0%, 17%);
  --ref-neutral20: hsl(0, 0%, 14%);
  --ref-neutral18: hsl(0, 0%, 13%);
  --ref-neutral17: hsl(0, 0%, 12%);
  --ref-neutral15: hsl(0, 0%, 11%);
  --ref-neutral10: hsl(0, 0%, 8%);
  --ref-neutral5: hsl(0, 0%, 6%);
  --ref-neutral0: hsl(0, 0%, 0%);
  --key-text-primary: hsl(0, 0%, 100%);
  --key-text-secondary: hsl(0, 0%, 100%);
  --key-text-tertiary: hsl(0, 0%, 100%);
  --key-text-alert: hsl(0, 0%, 100%);
  --primary-fixed: hsl(225, 81%, 80%);
  --primary-fixed-dim: hsl(225, 80%, 73%);
  --text-primary-fixed: hsl(225, 81%, 18%);
  --text-primary-fixed-dim: hsl(225, 80%, 24%);
  --secondary-fixed: hsl(205, 81%, 79%);
  --secondary-fixed-dim: hsl(205, 80%, 74%);
  --text-secondary-fixed: hsl(205, 80%, 19%);
  --text-secondary-fixed-dim: hsl(205, 80%, 25%);
  --tertiary-fixed: hsl(40, 85%, 75%);
  --tertiary-fixed-dim: hsl(40, 85%, 70%);
  --text-tertiary-fixed: hsl(40, 80%, 13%);
  --text-tertiary-fixed-dim: hsl(40, 80%, 16%);
  --alert-fixed: hsl(0, 81%, 73%);
  --alert-fixed-dim: hsl(0, 80%, 65%);
  --text-alert-fixed: hsl(0, 79%, 11%);
  --text-alert-fixed-dim: hsl(0, 80%, 14%);
  --primary: hsl(225, 84%, 87%);
  --text-primary: hsl(225, 81%, 18%);
  --secondary: hsl(205, 84%, 87%);
  --text-secondary: hsl(205, 80%, 19%);
  --tertiary: hsl(40, 84%, 83%);
  --text-tertiary: hsl(40, 80%, 13%);
  --alert: hsl(0, 85%, 87%);
  --text-alert: hsl(0, 79%, 25%);
  --primary-container: hsl(225, 87%, 94%);
  --text-primary-container: hsl(225, 79%, 41%);
  --secondary-container: hsl(205, 88%, 95%);
  --text-secondary-container: hsl(205, 80%, 19%);
  --tertiary-container: hsl(40, 87%, 90%);
  --text-tertiary-container: hsl(40, 80%, 13%);
  --alert-container: hsl(8, 100%, 93%);
  --text-alert-container: hsl(0, 79%, 25%);
  --primary-inverse: hsl(225, 79%, 41%);
  --secondary-inverse: hsl(215, 79%, 38%);
  --tertiary-inverse: hsl(40, 79%, 29%);
  --alert-inverse: hsl(0, 79%, 25%);
  --text-primary-inverse: hsl(0, 0%, 100%);
  --text-secondary-inverse: hsl(215, 100%, 99%);
  --text-tertiary-inverse: hsl(40, 100%, 99%);
  --text-alert-inverse: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 99%);
  --text-background: hsl(0, 0%, 19%);
  --text-background-dim: hsl(225, 20%, 37%);
  --text-background-tint: hsl(225, 50%, 47%);
  --text-background-alert: hsl(0, 50%, 37%);
  --surface-dark: hsl(225, 20%, 91%);
  --surface: hsl(225, 20%, 96%);
  --surface-light: hsl(0, 0%, 99%);
  --surface-container-lowest: hsl(0, 0%, 100%);
  --surface-container-low: hsl(225, 45%, 98%);
  --surface-container: hsl(225, 45%, 97%);
  --surface-container-high: hsl(225, 45%, 95%);
  --surface-container-highest: hsl(225, 45%, 92%);
  --text-surface: hsl(0, 0%, 19%);
  --text-surface-dim: hsl(225, 40%, 37%);
  --text-surface-tint: hsl(225, 50%, 47%);
  --text-surface-secondary: hsl(205, 51%, 8%);
  --text-surface-dim-secondary: hsl(205, 41%, 16%);
  --text-surface-tint-secondary: hsl(205, 50%, 24%);
  --text-surface-tertiary: hsl(40, 50%, 7%);
  --text-surface-dim-tertiary: hsl(40, 51%, 14%);
  --text-surface-tint-tertiary: hsl(40, 50%, 21%);
  --text-surface-alert: hsl(0, 50%, 37%);
  --surface-inverse: hsl(225, 40%, 30%);
  --surface-light-secondary: hsl(205, 27%, 98%);
  --surface-container-lowest-secondary: hsl(205, 33%, 99%);
  --surface-container-high-secondary: hsl(205, 51%, 94%);
  --surface-container-highest-secondary: hsl(205, 40%, 92%);
  --surface-inverse-secondary: hsl(205, 20%, 26%);
  --surface-light-tertiary: hsl(40, 27%, 98%);
  --surface-container-lowest-tertiary: hsl(40, 33%, 99%);
  --surface-container-high-tertiary: hsl(40, 50%, 91%);
  --surface-container-highest-tertiary: hsl(40, 50%, 91%);
  --surface-inverse-tertiary: hsl(40, 20%, 26%);
  --surface-light-alert: hsl(0, 100%, 99%);
  --surface-container-lowest-alert: hsl(0, 33%, 99%);
  --surface-container-high-alert: hsl(0, 40%, 91%);
  --surface-container-highest-alert: hsl(0, 40%, 88%);
  --surface-container-lowest-primary: hsl(225, 100%, 99%);
  --text-surface-inverse: hsl(0, 0%, 100%);
  --text-surface-inverse-dim: hsl(225, 45%, 95%);
  --text-surface-inverse-tint: hsl(225, 85%, 90%);
  --text-surface-inverse-secondary: hsl(0, 0%, 100%);
  --text-surface-inverse-dim-secondary: hsl(205, 38%, 97%);
  --text-surface-inverse-tint-secondary: hsl(205, 85%, 90%);
  --text-surface-inverse-tertiary: hsl(0, 0%, 100%);
  --text-surface-inverse-dim-tertiary: hsl(40, 50%, 96%);
  --text-surface-inverse-tint-tertiary: hsl(40, 87%, 90%);
  --surface-tint: hsl(225, 86%, 96%);
  --surface-alert: hsl(0, 87%, 96%);
  --surface-tint-trans: hsla(225, 86%, 96%, 0.44);
  --surface-alert-trans: hsla(0, 87%, 96%, 0.44);
  --surface-layer: hsl(0, 0%, 100%);
  --outline: hsl(225, 38%, 80%);
  --outline-dim: hsl(0, 0%, 78%);
  --outline-tint: hsl(225, 81%, 80%);
  --outline-alert: hsl(0, 80%, 65%);
  --outline-dim-alert: hsl(0, 38%, 77%);
  --outline-tint-alert: hsl(0, 81%, 73%);
  --outline-primary: hsl(225, 80%, 73%);
  --outline-dim-primary: hsl(225, 38%, 80%);
  --outline-secondary: hsl(205, 79%, 65%);
  --outline-dim-secondary: hsl(205, 38%, 80%);
  --outline-tertiary: hsl(40, 85%, 58%);
  --outline-dim-tertiary: hsl(40, 49%, 77%);
  --outline-strong: hsl(0, 0%, 0%);
  --outline-subtle: hsl(225, 20%, 91%);
  --outline-trans: hsla(225, 20%, 71%, 0.64);
  --outline-dim-trans: hsla(225, 20%, 71%, 0.54);
  --scrim: hsl(0, 0%, 8%);
  --text-scrim: hsl(0, 0%, 90%);
  --shadow: hsla(0, 0%, 0%, 0.04);
  --shadow-tint: hsla(225, 79%, 55%, 0.08);
  --waveline-text-surface-tint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 8.48 3.1'%3E%3Cpath d='M7.01 1.49 6.43.91a3.07 3.07 0 0 0-4.36 0l-.58.58c-.39.39-.92.61-1.48.61v1c.83 0 1.6-.32 2.18-.9l.58-.58a2.09 2.09 0 0 1 2.96 0l.58.58c.58.58 1.36.9 2.18.9v-1a2.1 2.1 0 0 1-1.48-.61Z' fill='%234055bf' fill-opacity='0.7' /%3E%3C/svg%3E");
  --waveline-text-primary-container: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 8.48 3.1'%3E%3Cpath d='M7.01 1.49 6.43.91a3.07 3.07 0 0 0-4.36 0l-.58.58c-.39.39-.92.61-1.48.61v1c.83 0 1.6-.32 2.18-.9l.58-.58a2.09 2.09 0 0 1 2.96 0l.58.58c.58.58 1.36.9 2.18.9v-1a2.1 2.1 0 0 1-1.48-.61Z' fill='%23122aa1' fill-opacity='0.7' /%3E%3C/svg%3E");
  --waveline-text-primary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 8.48 3.1'%3E%3Cpath d='M7.01 1.49 6.43.91a3.07 3.07 0 0 0-4.36 0l-.58.58c-.39.39-.92.61-1.48.61v1c.83 0 1.6-.32 2.18-.9l.58-.58a2.09 2.09 0 0 1 2.96 0l.58.58c.58.58 1.36.9 2.18.9v-1a2.1 2.1 0 0 1-1.48-.61Z' fill='%23122aa1' fill-opacity='0.7' /%3E%3C/svg%3E");
  --waveline-text-surface-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 8.48 3.1'%3E%3Cpath d='M7.01 1.49 6.43.91a3.07 3.07 0 0 0-4.36 0l-.58.58c-.39.39-.92.61-1.48.61v1c.83 0 1.6-.32 2.18-.9l.58-.58a2.09 2.09 0 0 1 2.96 0l.58.58c.58.58 1.36.9 2.18.9v-1a2.1 2.1 0 0 1-1.48-.61Z' fill='%23c63939' fill-opacity='0.7' /%3E%3C/svg%3E");
  --waveline-text-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 8.48 3.1'%3E%3Cpath d='M7.01 1.49 6.43.91a3.07 3.07 0 0 0-4.36 0l-.58.58c-.39.39-.92.61-1.48.61v1c.83 0 1.6-.32 2.18-.9l.58-.58a2.09 2.09 0 0 1 2.96 0l.58.58c.58.58 1.36.9 2.18.9v-1a2.1 2.1 0 0 1-1.48-.61Z' fill='%23a11212' fill-opacity='0.7' /%3E%3C/svg%3E");
  --waveline-text-alert-container: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 8.48 3.1'%3E%3Cpath d='M7.01 1.49 6.43.91a3.07 3.07 0 0 0-4.36 0l-.58.58c-.39.39-.92.61-1.48.61v1c.83 0 1.6-.32 2.18-.9l.58-.58a2.09 2.09 0 0 1 2.96 0l.58.58c.58.58 1.36.9 2.18.9v-1a2.1 2.1 0 0 1-1.48-.61Z' fill='%23a11212' fill-opacity='0.7' /%3E%3C/svg%3E");
  --logo-url: url(./css/images/system-logo-gnb-kotma.avif);
  --login-logo-url: url(./css/images/system-logo-kotma.avif);
  --contrast: Black;
  --custom-bg: hsl(225, 45%, 95%);
  --custom-bg-opacity: 0;
  --custom-aside-bg: hsl(225, 45%, 92%);
  --custom-aside-text: hsl(225, 40%, 37%);
  --custom-user-service-menu-bg: transparent;
  --custom-user-service-area-bg: hsl(225, 20%, 96%);
  --custom-taskbar-bg: hsl(225, 40%, 30%);
  --custom-taskbar-text: hsl(0, 0%, 100%);
  --custom-taskbar-bg-current: hsl(225, 79%, 41%);
  --custom-taskbar-text-current: hsl(0, 0%, 100%);
  --custom-btn-bg: hsl(225, 41%, 90%);
  --custom-btn-text: hsl(225, 41%, 14%);
  --custom-btn-text-hover: hsl(225, 79%, 13%);
  --custom-btn-layer: hsl(225, 60%, 50%);
  --custom-btn-secondary-bg: hsl(205, 41%, 90%);
  --custom-btn-secondary-text: hsl(205, 41%, 12%);
  --custom-btn-secondary-text-hover: hsl(205, 80%, 14%);
  --custom-btn-secondary-layer: hsl(205, 80%, 50%);
  --custom-btn-tertiary-bg: hsl(40, 51%, 88%);
  --custom-btn-tertiary-text: hsl(40, 50%, 10%);
  --custom-btn-tertiary-text-hover: hsl(40, 80%, 9%);
  --custom-btn-tertiary-layer: hsl(40, 80%, 50%);
  --custom-btn-highlight-bg: hsl(225, 85%, 90%);
  --custom-btn-highlight-text: hsl(225, 81%, 18%);
  --custom-btn-highlight-text-hover: hsl(225, 79%, 13%);
  --custom-btn-highlight-layer: hsl(225, 60%, 50%);
  --custom-btn-alert-bg: hsl(0, 85%, 87%);
  --custom-btn-alert-text: hsl(0, 79%, 11%);
  --custom-btn-alert-text-hover: hsl(0, 78%, 7%);
  --custom-btn-alert-layer: hsl(0, 80%, 50%);
  --custom-btn-highlight-secondary-bg: hsl(205, 85%, 90%);
  --custom-btn-highlight-secondary-text: hsl(205, 80%, 19%);
  --custom-btn-highlight-secondary-text-hover: hsl(205, 80%, 14%);
  --custom-btn-highlight-secondary-layer: hsl(205, 80%, 50%);
  --custom-btn-highlight-tertiary-bg: hsl(40, 85%, 86%);
  --custom-btn-highlight-tertiary-text: hsl(40, 80%, 13%);
  --custom-btn-highlight-tertiary-text-hover: hsl(40, 80%, 9%);
  --custom-btn-highlight-tertiary-layer: hsl(40, 80%, 50%);
  --custom-btn-high-bg: hsl(225, 79%, 65%);
  --custom-btn-high-text: hsl(0, 0%, 100%);
  --custom-btn-high-outline: hsl(225, 79%, 62%);
  --custom-btn-high-secondary-bg: hsl(205, 79%, 50%);
  --custom-btn-high-secondary-text: hsl(0, 0%, 100%);
  --custom-btn-high-secondary-outline: hsl(205, 79%, 55%);
  --custom-btn-high-tertiary-bg: hsl(25, 85%, 58%);
  --custom-btn-high-tertiary-text: hsl(0, 0%, 100%);
  --custom-btn-high-tertiary-outline: hsl(25, 85%, 58%);
  --custom-btn-high-tertiary-highlight-bg: hsl(10, 85%, 53%);
  --custom-btn-high-tertiary-highlight-text: hsl(0, 0%, 100%);
  --custom-btn-high-tertiary-highlight-bg-hover: hsl(10, 85%, 53%);
  --custom-btn-high-tertiary-highlight-text-hover: hsl(0, 0%, 100%);
  --custom-btn-high-tertiary-highlight-outline: hsl(40, 79%, 29%);
  --custom-btn-layer-opacity: 0.02;
  --custom-btn-highlight-layer-opacity: 0.08;
}