@charset "UTF-8";
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: local("Pretendard Variable"), url("../font/PretendardVariable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Thin.woff") format("woff");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Black.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Bold.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Thin.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), url("../font/Lato/Lato-Regular.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 300;
  src: local("Lato Light"), url("../font/Lato/Lato-Light.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), url("../font/Lato/Lato-Bold.woff") format("woff");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 800;
  src: local("Lato Black"), url("../font/Lato/Lato-Black.woff") format("woff");
}
:root {
  --Primary-Primary:#F68D2E;
  --line-cccccc:#cccccc;
  --font-ff-3737: #FF3737;
  --font-333333: #333;
  --font-555555: #555555;
  --bgf-6-f-6-f-6:#F6F6F6;
  --bgfff-9-f-4:#FFF9F4;
  --basic-ffffff: #FFffff;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-text-size-adjust: none;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
  display: block;
}

* {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background: #ffffff;
  color: var(--Ebony, var(--color-azure-11, #111827));
  font-size: 14px;
  line-height: 1.7;
  font-family: "Lato", "Pretendard", sans-serif, verdana;
  overflow-x: hidden;
  overflow-y: auto;
  font-weight: normal;
}

ul,
ol,
li {
  list-style: none;
}

img,
input,
textarea,
select,
button {
  /*-webkit-appearance: none; */
  vertical-align: middle;
  margin: 0;
  padding: 0;
  color: #111111;
  font-size: 14px;
  font-family: "Lato", "Pretendard", sans-serif, verdana;
  font-weight: 500;
}

textarea {
  resize: none;
}

hr,
legend,
caption {
  display: none;
}

em,
address {
  font-style: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

select {
  min-height: 20px;
}

button {
  border: 0;
  vertical-align: middle;
  cursor: pointer;
  filter: chroma(color=#dcdcdc);
  background: transparent;
}

.mgb4 {
  margin-bottom: 4px !important;
}

.mgb8 {
  margin-bottom: 8px !important;
}

.mgt8 {
  margin-top: 8px !important;
}

.mgt10 {
  margin-top: 10px !important;
}

.mgt16 {
  margin-top: 16px !important;
}

.mgt30 {
  margin-top: 30px !important;
}

.mgt90 {
  margin-top: 90px !important;
}

.mgb80 {
  margin-bottom: 80px !important;
}

.pdt5 {
  padding-top: 5px !important;
}

.pdt10 {
  padding-top: 10px !important;
}

.pdl10 {
  padding-left: 10px !important;
}

.pdr10 {
  padding-right: 10px !important;
}

.pdt16 {
  padding-top: 16px !important;
}

.pdt12 {
  padding-top: 12px !important;
}

.pdtb12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.pdt40 {
  padding-top: 40px !important;
}

.pdb40 {
  padding-bottom: 40px !important;
}

.pdb10 {
  padding-bottom: 10px !important;
}

.pdb8 {
  padding-bottom: 8px !important;
}

.padd7 {
  padding: 7px !important;
}

.padd8 {
  padding: 8px !important;
}

.mgt4 {
  margin-top: 4px !important;
}

.mgt12 {
  margin-top: 12px !important;
}

.mgr10 {
  margin-right: 10px !important;
}

.mgb10 {
  margin-bottom: 10px !important;
}

.mgb16 {
  margin-bottom: 16px !important;
}

.mgb20 {
  margin-bottom: 20px !important;
}

.mgt20 {
  margin-top: 20px !important;
}

.mgb25 {
  margin-bottom: 25px !important;
}

.mgb30 {
  margin-bottom: 30px !important;
}

.mgb32 {
  margin-bottom: 32px !important;
}

.mgb35 {
  margin-bottom: 35px !important;
}

.mgl10 {
  margin-left: 10px !important;
}

.mgl27 {
  margin-left: 27px !important;
}

.mgl14 {
  margin-left: 14px !important;
}

.mgl15 {
  margin-left: 15px !important;
}

.mgr15 {
  margin-right: 15px !important;
}

.mgb15 {
  margin-bottom: 15px !important;
}

.mgr16 {
  margin-right: 16px !important;
}

.mg10 {
  margin: 10px;
}

.mgl4 {
  margin-left: 4px;
}

.dp-none {
  display: none !important;
}

.txt-left {
  text-align: left !important;
}

.txt-center {
  text-align: center !important;
}

.txt-right {
  text-align: right !important;
}

.lighter {
  font-weight: normal !important;
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
}
.f13 {
  font-size: 13px !important;
  color: #999999;
}

.f11 {
  font-size: 11px !important;
  color: #999999;
}

.f10 {
  font-size: 10px;
}

.f9 {
  font-size: 9px;
}

* {
  box-sizing: border-box;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.4);
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  border-radius: 10px;
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb:hover {
  opacity: 1;
}

::-webkit-scrollbar-track-piece {
  background-color: hsla(0, 0%, 100%, 0);
}

.hidden {
  display: none !important;
}

.overflowShow {
  display: block !important;
}

input::-webkit-input-placeholder {
  color: #999999;
}

input:-ms-input-placeholder {
  color: #999999;
}

textarea::-webkit-input-placeholder {
  color: #999999;
}

textarea:-ms-input-placeholder {
  color: #999999;
}

textarea:focus {
  outline: none;
}

button:focus {
  outline: none;
}

input:focus {
  outline: none;
}

.mgl28 {
  margin-left: 28px !important;
}

.gap1 {
  gap: 1px;
}

.gap2 {
  gap: 2px;
}

.gap3 {
  gap: 3px;
}

.gap4 {
  gap: 4px;
}

.gap5 {
  gap: 5px;
}

.gap6 {
  gap: 6px;
}

.gap7 {
  gap: 7px;
}

.gap8 {
  gap: 8px;
}

.gap9 {
  gap: 9px;
}

.gap10 {
  gap: 10px;
}

.gap11 {
  gap: 11px;
}

.gap12 {
  gap: 12px;
}

.gap13 {
  gap: 13px;
}

.gap14 {
  gap: 14px;
}

.gap15 {
  gap: 15px;
}

.gap16 {
  gap: 16px;
}

.gap17 {
  gap: 17px;
}

.gap18 {
  gap: 18px;
}

.gap19 {
  gap: 19px;
}

.gap20 {
  gap: 20px;
}

.gap21 {
  gap: 21px;
}

.gap22 {
  gap: 22px;
}

.gap23 {
  gap: 23px;
}

.gap24 {
  gap: 24px;
}

.gap25 {
  gap: 25px;
}

.gap26 {
  gap: 26px;
}

.gap27 {
  gap: 27px;
}

.gap28 {
  gap: 28px;
}

.gap29 {
  gap: 29px;
}

.gap30 {
  gap: 30px;
}

.flex-l {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex-lr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-t {
  align-items: flex-start !important;
  justify-content: center !important;
}
.flex-fc {
  display: flex;
  flex-direction: column !important;
}
.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check-wrap input {
  display: none;
}
.check-wrap input + label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 28px;
  position: relative;
}
.check-wrap input + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 24px;
  height: 24px;
  background: url(../images/icon-ckeck.png) no-repeat 0 0;
  background-size: 22px;
}
.check-wrap input + label span {
  color: #4a5565;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.42px;
  display: inline-block;
  white-space: nowrap;
  margin-left: 6px;
  word-break: break-all;
}
.check-wrap input:checked + label::before {
  background: url(../images/icon-checked.png) no-repeat 0 0;
  background-size: 22px;
}

.radio-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.radio-wrap input {
  display: none;
}
.radio-wrap input + label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 24px;
  position: relative;
}
.radio-wrap input + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 9px;
  border: 1px solid #d7d9d9;
  background: var(--radio-background-default, #FFF);
}
.radio-wrap input + label span {
  color: var(--color-azure-11, #111827);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.42px;
  display: inline-block;
  white-space: nowrap;
  margin-left: 6px;
  word-break: break-all;
}
.radio-wrap input:hover + label {
  color: #070c18;
}
.radio-wrap input:hover + label::before {
  border: 1px solid #b5c1d2;
}
.radio-wrap input:checked + label {
  font-weight: 500;
}
.radio-wrap input:checked + label::before {
  border: 1px solid #3B82F6;
  background: var(--radio-background-default, #FFF);
}
.radio-wrap input:checked + label::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #3B82F6;
}

.txt-overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

.dropdown-wrap {
  position: relative;
  width: 100%;
}
.dropdown-wrap .select-value {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #d1d5dc;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 13px;
  color: var(--Ebony, var(--color-azure-11, #111827));
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-400, 400);
  line-height: var(--line-height-20, 20px); /* 142.857% */
}
.dropdown-wrap .select-value .material-icons {
  font-size: 18px;
  color: #999999;
}
.dropdown-wrap:hover .select-value {
  border: 1px solid #b5c1d2;
}
.dropdown-wrap .dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-radius: 6px;
  padding: 8px 0;
  z-index: 10;
}
.dropdown-wrap .dropdown-list.active {
  border: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #E5E7EB);
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dropdown-wrap .dropdown-list.active button {
  display: block;
  padding: 8px 12px;
  width: 100%;
  text-align: left;
}
.dropdown-wrap .dropdown-list.active button:hover {
  background: #f8faff;
}
.dropdown-wrap .dropdown-list ul {
  width: 100%;
}

.input-write {
  width: 100%;
}
.input-write input {
  width: 100%;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  padding: 10px 12px;
  height: 38px;
}
.input-write input:focus {
  border: 1px solid #b5c1d2;
}
.input-write input.error {
  border: 1px solid var(--font-ff-3737, #FF3737);
}
.input-write.search {
  position: relative;
}
.input-write.search input {
  padding: 10px 42px 10px 12px;
}
.input-write.search .btn-delete {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  pointer-events: none;
}
.input-write.search .btn-delete .material-icons {
  font-size: 16px;
  color: #999999;
}
.input-write.search .btn-delete.active {
  visibility: visible;
  pointer-events: auto;
}

.loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.loading-wrap img {
  width: 240px;
}
.loading-wrap .boxLoading {
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.loading-wrap .boxLoading:before {
  content: "";
  width: 50px;
  height: 5px;
  background: #000;
  opacity: 0.1;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  animation: shadow 0.5s linear infinite;
}
.loading-wrap .boxLoading:after {
  content: "";
  width: 50px;
  height: 50px;
  background: #3B82F6;
  animation: animate 0.5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}
@keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
.loading-wrap body, .loading-wrap html {
  background: #ccc;
  overflow: hidden;
  height: 100%;
}

/* 토스트 알럿 컴포넌트 스타일 */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  max-width: 500px;
}

.toast {
  background: #ffffff;
  border: 1px solid #e74c3c;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 16px 20px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.warning {
  border-color: #f39c12;
  background: #fff8e1;
}

.toast.error {
  border-color: #e74c3c;
  background: #ffebee;
}

.toast.success {
  border-color: #27ae60;
  background: #e8f5e8;
}

.toast.info {
  border-color: #3498db;
  background: #e3f2fd;
}

.toast-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #e74c3c;
}

.toast.warning .toast-icon {
  color: #f39c12;
}

.toast.success .toast-icon {
  color: #27ae60;
}

.toast.info .toast-icon {
  color: #3498db;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #2c3e50;
}

.toast-message {
  font-size: 13px;
  color: #7f8c8d;
  line-height: 1.5;
  max-height: 300px;
  overflow-y: auto;
}

.toast-message strong {
  color: #2c3e50;
  font-weight: 600;
}

.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.toast-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.toast-close .material-icons {
  font-size: 18px;
  color: #95a5a6;
}

/* 애니메이션 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.fade-in-out {
  margin-top: 24px;
  animation: fadeInOut 1200ms linear infinite;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}
.toast.slide-in {
  animation: slideInRight 0.3s ease-out;
}

.toast.slide-out {
  animation: slideOutRight 0.3s ease-in;
}

/* 로딩 애니메이션 스타일 */
.loading-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.loading-wrap.hidden {
  display: none;
}

.loading-runner {
  position: absolute;
  bottom: 50%;
  left: -100px; /* 화면 왼쪽 밖에서 시작 */
  width: 200px;
  animation: runnerMove 24s linear infinite;
}

.loading-runner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes runnerMove {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% + 100px);
  }
}
.empty-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 100px 0;
}
.empty-wrap img {
  width: 240px;
}
.empty-wrap p {
  margin-top: 16px;
  text-align: center;
  font-size: var(--font-size-14, 14px);
  font-weight: 400;
  line-height: var(--line-height-20, 20px);
  letter-spacing: -0.01px;
}
.empty-wrap .icon {
  font-size: 24px;
}

#errorWrap {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--color-grey-98, #f9fafb) 0%, var(--color-grey-98, #f9fafb) 100%), var(--color-white-solid, #fff);
}

.error-dashboard {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 100vh;
}
.error-dashboard .left-side {
  border-right: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #e5e7eb);
  background: var(--white, #fff);
  display: flex;
  width: 400px;
  padding: 24px 25px 24px 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  overflow-y: auto;
  transition: width 0.3s ease;
}
.error-dashboard .left-side h1 {
  height: 40px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--Ebony, var(--color-azure-11, #111827));
  font-size: var(--font-size-24, 24px);
  line-height: var(--line-height-32, 32px); /* 133.333% */
  font-weight: 300;
}
.error-dashboard .left-side h1 .logo {
  display: inline-block;
  width: 30px;
  height: 36px;
  background: url(../images/logo-monitor.png) no-repeat 0 center;
  background-size: 24px auto;
  margin-right: 4px;
}
.error-dashboard .left-side h1 strong {
  font-weight: 800;
}
.error-dashboard .left-side .side-items {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}
.error-dashboard .left-side .side-items .label-type {
  display: block;
  margin-bottom: 2px;
  color: #6b7280;
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-600, 600);
  line-height: var(--line-height-20, 20px); /* 142.857% */
  letter-spacing: -0.01px;
  text-transform: uppercase;
}
.error-dashboard .left-side .side-items .side-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.error-dashboard .left-side .filter-items {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 4px;
  width: 100%;
}
.error-dashboard .left-side .filter-items button {
  width: 100%;
  border-radius: 6px;
  background: #ffffff;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-400, 400);
  line-height: var(--line-height-17_5, 17.5px); /* 125% */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  height: 60px;
}
.error-dashboard .left-side .filter-items button .material-icons {
  font-size: 15px;
  color: #6b7280;
}
.error-dashboard .left-side .filter-items button:hover {
  background: #f8faff;
  border: 1px solid #b5c1d2;
}
.error-dashboard .left-side .filter-items button.active {
  background: rgb(137, 146, 152);
  color: #fff;
}
.error-dashboard .left-side .filter-items button.active:hover {
  border: 1px solid #3b82f6;
}
.error-dashboard .left-side .filter-items button.active .material-icons {
  color: #fff;
}
.error-dashboard .left-side .log-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
}
.error-dashboard .left-side .log-items.essential-type {
  background: #f6faff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-bottom: 16px;
}
.error-dashboard .left-side .btn-log-search {
  border-radius: 6px;
  background: var(--color-azure-60, #3b82f6);
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
  color: var(--white, #fff);
  text-align: center;
  font-size: var(--font-size-16, 16px);
  font-weight: var(--font-weight-600, 600);
  line-height: var(--font-size-24, 24px); /* 150% */
}
.error-dashboard .left-side .btn-log-search:hover {
  background: var(--color-azure-70, #2563eb);
}
.error-dashboard .left-side .side-btn-bottom {
  margin-top: auto;
  width: 100%;
  padding-top: 25px;
  border-top: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #e5e7eb);
}
.error-dashboard .left-side .side-btn-bottom .btn-logout {
  border-radius: 6px;
  border: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #e5e7eb);
  display: flex;
  padding: 9px 17px;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  width: 100%;
  color: var(--Pale-Sky, var(--color-grey-46, #6b7280));
  text-align: center;
  font-size: var(--font-size-14, 14px);
  font-style: normal;
  font-weight: var(--font-weight-500, 500);
  line-height: var(--line-height-20, 20px); /* 142.857% */
}
.error-dashboard .left-side .side-btn-bottom .btn-logout .material-icons {
  color: var(--Pale-Sky, var(--color-grey-46, #6b7280));
  text-align: center;
  /* Semantic/Button */
  font-family: var(--font-family-Font-1, "Material Icons");
  font-size: var(--font-size-16, 16px);
  font-style: normal;
  font-weight: var(--font-weight-400, 400);
  line-height: var(--font-size-24, 24px); /* 150% */
}
.error-dashboard .left-side .side-btn-bottom .btn-logout:hover {
  background: var(--color-grey-91, #f4f8ff);
}
.error-dashboard .left-side .date-items {
  width: 100%;
  display: flex;
}
.error-dashboard .left-side .date-items input {
  width: 100%;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  padding: 10px 12px;
  height: 38px;
}
.error-dashboard .left-side .date-items input:focus {
  border: 1px solid #b5c1d2;
}
.error-dashboard .left-side .date-items input.error {
  border: 1px solid var(--font-ff-3737, #ff3737);
}
.error-dashboard .right-side {
  padding: 24px 32px;
  width: 100%;
  flex: 1;
}
.error-dashboard .contents-wrap {
  border-radius: 8px;
  border: var(--stroke-weight-1_5, 1.5px) solid var(--color-grey-85, #d1d5db);
  background: var(--white, #fff);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  height: 100%;
}
.error-dashboard .table-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-items: flex-start;
  flex-direction: column;
}
.error-dashboard .table-wrap .table-header {
  padding: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.error-dashboard .table-wrap .table-header h3 {
  color: var(--Ebony, var(--color-azure-11, #111827));
  font-size: var(--font-size-14, 16px);
  line-height: var(--line-height-20, 20px); /* 142.857% */
  font-weight: 800;
}
.error-dashboard .table-wrap .table-header h3 span {
  color: var(--color-azure-70, #2563eb);
}
.error-dashboard .table-wrap .table-header .btn-refresh span {
  font-size: 22px;
  color: var(--Pale-Sky, var(--color-grey-46, #6b7280));
}
.error-dashboard .table-wrap .table-container {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  padding: 1px;
  min-width: 900px;
}
.error-dashboard .table-wrap .table-container table {
  margin-right: 8px;
  width: 100%;
  border-collapse: separate; /* Don't collapse */
  border-spacing: 0;
  background: #ffffff;
}
.error-dashboard .table-wrap .table-container table th {
  text-align: left;
  background: #f6faff;
  position: -webkit-sticky;
  position: sticky;
  border-top: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #e5e7eb);
  top: -1px;
  z-index: 100;
  padding: 16px 8px;
  color: var(--Pale-Sky, var(--color-grey-46, #6b7280));
  font-size: 13px;
  font-weight: var(--font-weight-600, 600);
  line-height: var(--font-size-16, 16px); /* 133.333% */
}
.error-dashboard .table-wrap .table-container table td {
  position: relative;
  z-index: 1;
  border-top: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #e5e7eb);
  padding: 24px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: var(--font-size-16, 16px); /* 133.333% */
}
.error-dashboard .table-wrap .table-container table tr {
  transition: background-color 0.2s ease;
}
.error-dashboard .table-wrap .table-container table tr:hover {
  background-color: var(--color-azure-5, #f8fafc);
}
.error-dashboard .table-wrap .table-container table tr.active {
  background-color: var(--color-azure-10, #f1f5f9);
}
.error-dashboard .table-wrap .table-container table tr.active td {
  border-top-color: var(--color-azure-30, #bfdbfe);
}
.error-dashboard .table-wrap .table-container table tr.clickable {
  cursor: pointer;
}
.error-dashboard .table-wrap .table-container table .detail-row {
  background-color: var(--color-azure-5, #f8fafc);
}
.error-dashboard .table-wrap .table-container table .detail-row.hidden {
  display: none;
}
.error-dashboard .table-wrap .table-container table .detail-row td {
  padding: 16px 24px;
  border-top-color: var(--color-azure-20, #dbeafe);
}
.error-dashboard .table-wrap .table-bottom {
  margin-top: auto;
  border-top: var(--stroke-weight-1, 1px) solid var(--color-grey-91, #e5e7eb);
  padding: 16px;
  width: 100%;
}
.error-dashboard .table-wrap .table-bottom .table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.error-dashboard .table-wrap .table-bottom .table-controls button {
  display: inline-flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  text-align: center;
  gap: 4px;
  font-size: 14px;
  border-radius: 6px;
  font-weight: var(--font-weight-600, 600);
  line-height: var(--font-size-24, 24px);
  width: 100%;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-all-download {
  border: 1.5px solid var(--color-azure-70, #2563eb);
  background: var(--color-azure-70, #2563eb);
  color: #ffffff;
  font-weight: 600;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-all-download:hover {
  background: var(--color-azure-80, #1d4ed8);
  border-color: var(--color-azure-80, #1d4ed8);
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-all-download:hover span {
  color: #ffffff;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-all-download span {
  color: #ffffff;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-select-download {
  border: 1.5px solid var(--color-azure-50, #60a5fa);
  color: var(--color-azure-70, #2563eb);
  font-weight: 500;
  background: var(--color-azure-5, #eff6ff);
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-select-download em {
  display: inline-block;
  color: var(--color-azure-70, #2563eb);
  font-weight: 800;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-select-download:hover {
  background: var(--color-azure-50, #60a5fa);
  color: #ffffff;
  border-color: var(--color-azure-50, #60a5fa);
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-select-download:hover em {
  color: #ffffff;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-select-download:hover span {
  color: #ffffff;
}
.error-dashboard .table-wrap .table-bottom .table-controls button.btn-select-download span {
  color: var(--color-azure-50, #60a5fa);
}
.error-dashboard .table-wrap .table-bottom .table-controls button span {
  font-size: 18px;
}
.error-dashboard .table-wrap .winlog-detail-content .detail-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.error-dashboard .table-wrap .winlog-detail-content .detail-item .detail-label {
  width: 80px;
  color: #6b7280;
}
.error-dashboard .table-wrap .winlog-detail-content .detail-item .detail-value {
  color: #111827;
  font-weight: 800;
}
.error-dashboard .table-wrap .winlog-detail-content .detail-message .detail-label {
  color: #6b7280;
}
.error-dashboard .table-wrap .winlog-detail-content .detail-message .detail-value {
  margin: 12px 0;
  color: #111827;
  font-weight: 800;
  padding: 16px 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 6px;
}
.error-dashboard .btn-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-azure-20, #dbeafe);
  border: 1px solid var(--color-azure-40, #93c5fd);
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--color-azure-70, #2563eb);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  width: 100%;
}
.error-dashboard .btn-detail:hover {
  background: var(--color-azure-50, #60a5fa);
  border-color: var(--color-azure-60, #3b82f6);
  color: #ffffff;
}
.error-dashboard .btn-detail:hover span {
  color: #ffffff;
}
.error-dashboard .btn-detail.active {
  background: var(--color-azure-60, #3b82f6);
  border-color: var(--color-azure-70, #2563eb);
  color: #ffffff;
}
.error-dashboard .btn-detail.active span {
  color: #ffffff;
}
.error-dashboard .btn-detail span {
  color: var(--color-azure-60, #3b82f6);
  font-size: 16px;
  margin-right: 2px;
}
.error-dashboard .btn-detail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--color-azure-10, #f0f9ff);
  border: 1.5px solid var(--color-azure-30, #bfdbfe);
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--color-azure-70, #2563eb);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  width: 100%;
}
.error-dashboard .btn-detail-toggle:hover {
  background: var(--color-azure-20, #dbeafe);
  border-color: var(--color-azure-50, #60a5fa);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}
.error-dashboard .btn-detail-toggle.expanded {
  background: var(--color-azure-50, #60a5fa);
  border-color: var(--color-azure-60, #3b82f6);
  color: #ffffff;
}
.error-dashboard .btn-detail-toggle.expanded:hover {
  background: var(--color-azure-60, #3b82f6);
  border-color: var(--color-azure-70, #2563eb);
}
.error-dashboard .btn-detail-toggle.expanded span {
  color: #ffffff;
}
.error-dashboard .btn-detail-toggle span {
  color: var(--color-azure-60, #3b82f6);
  font-size: 16px;
}
.error-dashboard .detail-message {
  margin-top: 16px;
}
.error-dashboard .detail-message .detail-label {
  font-weight: 600;
  color: var(--color-grey-46, #6b7280);
  margin-bottom: 8px;
}
.error-dashboard .detail-message .detail-value {
  background: var(--color-grey-98, #f9fafb);
  border: 1px solid var(--color-grey-91, #e5e7eb);
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}
.error-dashboard .log-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.error-dashboard .log-level::before {
  font-family: "Material Icons";
  font-size: 14px;
}
.error-dashboard .log-level.error {
  background: #fee2e2;
  color: #dc2626;
}
.error-dashboard .log-level.error::before {
  content: "error";
}
.error-dashboard .log-level.warning {
  background: #fef3c7;
  color: #d97706;
}
.error-dashboard .log-level.warning::before {
  content: "warning";
}
.error-dashboard .log-level.info {
  background: #dbeafe;
  color: #2563eb;
}
.error-dashboard .log-level.info::before {
  content: "info";
}
.error-dashboard .log-level.exception {
  background: #f3f4f6;
  color: #6b7280;
}
.error-dashboard .log-level.exception::before {
  content: "report_problem";
}

.flatpickr-day.selected {
  border-radius: 50px !important;
}

@media (max-width: 1279px) {
  #errorWrap {
    overflow-x: auto;
  }
  #errorWrap .error-dashboard {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    height: 100vh;
  }
  #errorWrap .error-dashboard .left-side {
    width: 320px;
    min-width: 320px;
  }
}

/*# sourceMappingURL=errorStyle.css.map */