:root {
  --white: #ffffff;
  --black: #000000;
  --select-background: #f1f2f6;
  --gray: #adb4d2;
  --sub-gray: #868eae;
  --main-gray: #5a5F7d;
  --dark-indigo: #0c1e5b;
  --border-line: #e3e6ef;
  --green: #58ad72;
  --sub-green: #b8ddca;
  --orange: #ed8e5b;
  --sub-orange: #f0a67e;
  --calm-sky: #65a5bc;
  --lg-red: #a51b37;
  --selected-table-row: #eee;
  --blue: #315ad9;
  --sub-blue: #3e66dd;
  --purple: #6a1b9a;
  --sub-purple: #d1c4e9;

  --signal-red: #ce0000;
  --signal-yellow: #fcbb2a;
  --signal-green: #58ad72;
  --signal-gray: #5a5f7d;
  --signal-blue: #315ad9;
  --signal-orange: #ed8e5b;
  --signal-transparent: transparent;

  height: 100%;
  /* 모바일 높이 보정 */
  height: -webkit-fill-available;
}

/* Wireframe */
#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  /* 모바일 높이 보정 */
  height: -webkit-fill-available;
}

/* Utilitiy classes */
::selection {
  color: var(--white);
  background: var(--main-gray);
}

.spin {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
}

.flex-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flex-center-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-start,
.flex-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.flex-end,
.flex-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.inline-flex-left {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.inline-flex-right {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.inline-flex-center {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.inline-flex-v-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.inline-flex-v-bottom {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.inline-flex-v-center {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inline-flex-v-left {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.status {
  display: inline !important;
  font-size: 12px;
  font-weight: 500;
  background-color: var(--sub-gray)10;
  padding: 4.5px 11.85px;
  border-radius: 15px;
}
.status.Success {
  background-color: #20c99710;
  color: #20c997;
}
.status.warning {
  background-color: #fa8b0c10;
  color: #fa8b0c;
}
.status.error {
  background-color: #ff4d4f10;
  color: #ff4d4f;
}
ul {
  margin: 8px;
  padding-inline-start: 16px;
}

/* 전역 스타일 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  color: var(--dark-indigo);
}
pre {
  font-family: 'Noto Sans KR';
  font-size: inherit;
  margin: 0;
  padding: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* color classes */
.color-signal-green {
  color: var(--signal-green) !important;
}
.color-signal-yellow {
  color: var(--signal-yellow) !important;
}
.color-signal-red {
  color: var(--signal-red) !important;
}
.color-signal-gray {
  color: var(--signal-gray) !important;
}

/* input styles */
.argus-input-text {
  height: 40px;
  border: 1px solid var(--border-line);
  border-radius: 10px;
  color: var(--main-gray);
  transition: 0.5s;
  padding: 0 8px;
}
.argus-input-text:hover {
  border-color: var(--main-gray);
}

button span.svg-icon-wrapper,
button span.svg-icon {
  margin-left: 0 !important;
}

.NotContact {
  color: rgb(206, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-conditions-body h3 {
  color: #272b41;
}


/* 신호등 */
.signal {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 7.5px;
  margin: 0px 6px -3px 0;
}
.signal.green {
  background-color: var(--signal-green);
}
.signal.yellow {
  background-color: var(--signal-yellow);
}
.signal.red {
  background-color: var(--signal-red);
}
.signal.gray {
  background-color: var(--signal-gray);
}

/* 차트옵션 버튼 */
.chart-option-button-group {
  position: absolute;
  top: 5px;
  right: 30px;
  height: 40px;
  width: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  z-index: 50;
}
.chart-option-button {
  padding: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: solid 1px var(--border-line);
  background-color: var(--select-background);
  margin-left: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 근거데이터 tooltip */
.apexcharts-custom-tooltip {
  position: absolute;
  bottom: 20px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 13px;
  width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  background-color: var(--white);
  border: 1px solid #e3e3e3;
  box-shadow: 2px 2px 6px -4px #999;
  text-align: justify;
  font-family: 'Noto Sans KR';
  color: var(--main-gray);
  background-color: var(--select-background);
}
.apexcharts-custom-tooltip.mobile {
  max-width: 95vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.chartjs-fixed-tooltip {
  position: absolute;
  width: fit-content;
  height: auto;
  z-index: 600;
  background-color: var(--white);
  border: 1px solid var(--main-gray);
  border-radius: 10px;
}
.chartjs-fixed-tooltip-header {
  font-size: 18px;
  font-weight: 500;
  padding: 5px 7px;
  color: var(--dark-indigo);
}
.chartjs-fixed-tooltip-body {
  color: var(--dark-indigo);
  font-size: 16px;
  padding: 0 7px 5px 7px;
}
.chartjs-fixed-tooltip-body > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.chartjs-fixed-tooltip-body .circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 7.5px;
  margin: 0px 6px -3px 0;
}

.chart-no-status-data-area {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-no-data-area {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 페이지 로딩 */
.argus-page-loading {
  width: 100%;
  height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
}

/* 차트 확장 컴포넌트 */
.chart-ext-table-area {
  margin: 15px 30px 0 30px;
}
.chart-ext-chart-area {
  position: relative;
}
.chart-ext-modal-button {
  cursor: pointer;
  min-width: 36px;
  height: 36px;
  border-radius: 10px;
  border: solid 1px var(--border-line);
  background-color: var(--select-background);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--dark-indigo);
  font-weight: 500;
  padding: 4px 8px;
  margin-right: 20px;
}

/* 차트항목 편집 */
.edit-chart-item-text {
  color: var(--main-gray);
  font-size: 17px;
  font-weight: 500;
}

/* 휴면계정 */
.dormant-account {
  color: red;
  font-weight: 500;
}

/* 원형 버튼 */
.btn-circle {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 5px 0 5px;
  padding: 0;
  background-color: var(--select-background);
  border-radius: 26px;
  position: relative;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-range-controller {
  max-height: 32px;
  padding: 0;
  background-color: var(--select-background);
  border-radius: 8px;
  position: relative;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-position-controller {
  max-height: 24px;
  background-color: var(--select-background);
  border-radius: 8px;
  position: relative;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.text-range-controller {
  font-size: 10px;
  font-weight: 300;
}
.text-position-controller {
  font-size: 9px;
  font-weight: 200;
  padding-top: 2px;
}

/* Table Spinner */
.table-spinner {
  color: var(--main-gray) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 100%;
  height: 100%
}

/* 제품상세 관련 */
h2.sub-title /* 부제목 */ {
  color: var(--dark-indigo);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 20px;
}

/* v-calendar: 기본 버튼 배경 없앰 */
.vc-container .vc-arrow,
.vc-container .vc-title {
  background: none;
}

/* v-calendar: 사이클 데이터 제품군 캘린더 */
.vc-container.vc-expanded * {
  font-family: 'Noto Sans KR';
}
.vc-container.vc-expanded .vc-weekdays {
  border-bottom: 1px solid var(--border-line);
}
.vc-container.vc-expanded .vc-day {
  height: 70px;
  z-index: unset;
  font-size: 12px;
  border-bottom: 1px solid var(--border-line);
  padding: 0;
}
.vc-container.vc-expanded .vc-day:hover {
  background-color: var(--select-background);
}
.vc-container.vc-expanded .vc-day .day-content .day-label {
  font-size: 13px;
  font-weight: 500;
}
.vc-container.vc-expanded .vc-day .in-data-range {
  min-height: 4px;
  width: 100%;
  background-color: var(--border-line);
}
.vc-container.vc-expanded .vc-day .day-content.in-range {
  background-color: var(--select-background);
}
.vc-container.vc-expanded .vc-day .day-label {
  padding: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vc-container.vc-expanded .vc-day.on-bottom,
.vc-container.vc-expanded .vc-day.in-next-month {
  border-bottom: none;
}
.vc-container.vc-expanded .vc-day .day-content {
  position: relative;
}
.vc-container.vc-expanded .vc-day .day-content .day-label {
  font-size: 13px;
  font-weight: 500;
}

/*************************************
  v-calendar: 각 제품군별 variation
**************************************/
/* 세탁기, 건조기 */
.chart201-large-calendar .vc-day.is-today .day-label,
.chart202-large-calendar .vc-day.is-today .day-label {
  font-weight: bold;
  text-decoration: underline;
}
.chart201-large-calendar .vc-day .day-label.clickedDate,
.chart202-large-calendar .vc-day .day-label.clickedDate {
  background-color: var(--main-gray);
  color: var(--white);
  border-radius: 50%;
}
.chart201-large-calendar .vc-day .cycle-item,
.chart202-large-calendar .vc-day .cycle-item {
  height: 8px !important;
  background-color: var(--gray);
  border-radius: 4px;
  margin: 1px 1px;
  cursor: pointer;
  position: relative;
  display: flex !important;
  flex-direction: column;
}
.chart201-large-calendar .vc-day .cycle-item.green,
.chart202-large-calendar .vc-day .cycle-item.green {
  background-color: var(--signal-green);
}
.chart201-large-calendar .vc-day .cycle-item.yellow,
.chart202-large-calendar .vc-day .cycle-item.yellow {
  background-color: var(--signal-yellow);
}
.chart201-large-calendar .vc-day .cycle-item.red,
.chart202-large-calendar .vc-day .cycle-item.red {
  background-color: var(--signal-red);
}

/* 식기세척기 */
.chart204-large-calendar .vc-day.is-today .day-label {
  font-weight: bold;
  text-decoration: underline;
}
.chart204-large-calendar .vc-day .day-label.clickedDate {
  background-color: var(--main-gray);
  color: var(--white);
  border-radius: 50%;
}
.chart204-large-calendar .vc-day .cycle-item {
  height: 8px;
  background-color: var(--gray);
  border-radius: 4px;
  margin: 1px 1px;
  cursor: pointer;
  position: relative;
}
.chart204-large-calendar .vc-day .cycle-item.green {
  background-color: var(--signal-green);
}
.chart204-large-calendar .vc-day .cycle-item.yellow {
  background-color: var(--signal-yellow);
}
.chart204-large-calendar .vc-day .cycle-item.red {
  background-color: var(--signal-red);
}
.chart204-large-calendar .vc-day .cycle-item-tooltip {
  display: none;
  position: absolute;
  left: 100%;
  top: 10px;
  border-radius: 8px;
  padding: 4px;
  background: var(--main-gray);
  color: var(--white);
  width: fit-content;
  font-size: 14px;
  white-space: nowrap;
}
.chart204-large-calendar .vc-day .cycle-item:hover .cycle-item-tooltip {
  display: inline-flex;
  z-index: 700;
  align-items: center;
  justify-content: center;
}

/* 전기레인지 */
.chart303-large-calendar .vc-day.is-today .day-label {
  text-decoration: underline;
  font-weight: 500;
}
/* 전기레인지: 선택한 날짜의 라벨 표현 */
.chart303-large-calendar .selected-date .day-label {
  background-color: var(--main-gray);
  color: var(--white);
  border-radius: 50%;
}
/* 전기레인지: 오늘 날짜 라벨 표현 */
.chart303-large-calendar .vc-day .in-data-range {
  height: 4px;
  width: 100%;
  background-color: var(--border-line);
}
/* 전기레인지: 캘린더 에러코드 라벨 */
.chart303-calendar-label {
  margin: 8px 2px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
}
.chart303-calendar-label.green {
  background-color: var(--signal-green);
}
.chart303-calendar-label.red {
  background-color: var(--signal-red);
}