.s-site-logo-img {
    content: url(../../Serenity.Assets/logo/white-128.png);
}

.s-TranslationGrid input.custom-text {
  width: 100%;
}

.s-UserPermissionDialog > .size,
.s-RolePermissionDialog > .size {
    min-width: 770px;
    width: 770px;
    min-height: 550px;
    height: 550px;
}

.s-UserPermissionDialog .s-DataGrid,
.s-RolePermissionDialog .s-DataGrid {
  height: 100%;
}

.slick-header-column.center {
  text-align: center;
}

.slick-header-column.left {
  text-align: left;
}

.slick-header-column.right {
  text-align: right;
}



.s-NotesEditor {
  border: 1px solid var(--s-input-border, #ccc);
  border-radius: 4px;
  padding: 10px;
}

  .s-NotesEditor ul {
    padding: 0;
    min-height: 110px;
    overflow-y: auto;
    list-style: none;
  }

  .s-NotesEditor li {
    margin: 10px 0;
    border-radius: 4px;
    border: 1px solid var(--s-card-border, #C3C2C2);
    background-color: var(--s-card-bg, #F5E7DC);
    padding: 8px;
    position: relative;
  }

  .s-NotesEditor .note-text {
    padding-right: 24px;
    display: block;
  }

  .s-NotesEditor .note-delete {
    display: block;
    position: absolute;
    right: 6px;
    top: 4px;
    text-decoration: none;
  }

    .s-NotesEditor .note-delete:after {
      font-family: var(--s-icon-font, "FontAwesome");
      font-weight: var(--s-icon-solid);
      color: var(--bs-danger);
      content: "\f00d";
      font-size: 1.1em;
    }

    .s-NotesEditor .note-delete:hover {
      opacity: 1;
    }

  .s-NotesEditor .note-date {
    margin-top: 6px;
    display: block;
    text-align: right;
    color: var(--bs-link-color, #2a4084);
    text-decoration: none;
    font-style: italic;
  }

.s-NoteDialog > .size {
  width: 465px;
}

.s-NoteDialog .ui-dialog-content {
  padding-bottom: 10px;
}

.s-ItemQtCampaignCompareGrid .version1 .slick-cell,
.s-ItemQtCampaignCompareGrid.version1 .slick-cell a {
  background-color: #11104D;
  color: white;
}

.s-ItemQtCampaignCompareGrid .version2 .slick-cell,
.s-ItemQtCampaignCompareGrid .version2 .slick-cell a {
  background-color: #0A182C;
  color: white;
}

.download-button span.button-inner:before {
  content: "\f019";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.download-button span.button-inner {
  padding-left: 3px;
}

.upload-button span.button-inner:before {
  content: "\f093";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.upload-button span.button-inner {
  padding-left: 3px;
}

.summary-button span.button-inner:before {
  content: "\f1ec";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.summary-button span.button-inner {
  padding-left: 3px;
}

.group-button span.button-inner:before {
  content: "\f247";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.group-button span.button-inner {
  padding-left: 3px;
}

.nongroup-button span.button-inner:before {
  content: "\f5fd";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.nongroup-button span.button-inner {
  padding-left: 3px;
}

.sinc-button span.button-inner:before {
  content: "\f021";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.sinc-button span.button-inner {
  padding-left: 3px;
}

.report-button span.button-inner:before {
  content: "\f555";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.report-button span.button-inner {
  padding-left: 3px;
}

.feedback-button span.button-inner:before {
  content: "\f5ad";
  font-family: FontAwesome;
  padding-right: 3px;
  color: #a94442;
}

.feedback-button span.button-inner {
  padding-left: 3px;
}

 /* 담당자 일정관리 그리드*/
.s-EmployeeScheduleGrid .slick-cell {
  padding-right: 0px;
  padding-left: 0px;
}


/* 캠페인 진행전*/
.s-EmployeeScheduleGrid .status01 .col-act-status {
  color: orangered;
}


/* 캠페인 진행중*/
.s-EmployeeScheduleGrid .status02 .col-act-status {
  color: blue;
}


/* 캠페인 진행종료*/
.s-EmployeeScheduleGrid .status03 .col-act-status {
  color: gold;
}

/* 캠페인 항목 일정관리 그리드*/
.s-ActCampaignItemScheduleGrid .slick-cell {
  padding-right: 0px;
  padding-left: 0px;
}


/* 캠페인 진행전*/
.s-ActCampaignItemScheduleGrid .status01 .col-item-status {
  color: orangered;
}


/* 캠페인 진행중*/
.s-ActCampaignItemScheduleGrid .status02 .col-item-status {
  color: blue;
}


/* 캠페인 진행종료*/
.s-ActCampaignItemScheduleGrid .status03 .col-item-status {
  color: gold;
}



/*YouTube*/
.s-ActCampaignItemScheduleGrid .channel01 .col-channel-itemname {
  color: red;
}
/*Meta*/
.s-ActCampaignItemScheduleGrid .channel02 .col-channel-itemname {
  color: blue;
}
/*Instagram*/
.s-ActCampaignItemScheduleGrid .channel03 .col-channel-itemname {
  color: gold;
}
/*TikTok*/
.s-ActCampaignItemScheduleGrid .channel04 .col-channel-itemname {
  color: green;
}
/*Twitter*/
.s-ActCampaignItemScheduleGrid .channel05 .col-channel-itemname {
  color: lightskyblue;
}
/*ETC*/
.s-ActCampaignItemScheduleGrid .channel99 .col-channel-itemname {
  color: peru;
}
/*바이럴마케팅*/
.s-ActCampaignItemScheduleGrid .channel98 .col-channel-itemname {
  color:pink;
}


.s-ActCampaignItemScheduleGrid .slick-grouping-panel {
  display: none;
}

.percent-complete-bar {
  display: inline-block;
  height: 6px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

:root.theme-cosmos-dark {
  --s-modal-shadow: 3px 3px 16px 13px rgba(98,106,136,0.5);
}

.s-ActCampaignSaleCostGrid .inputYes .col-item-amount {
  background-color: midnightblue;
  color: white;
}

.s-ActCampaignSaleCostGrid .inputYes .col-agench-dcamount {
  background-color: midnightblue;
  color: white;
}

.s-ActCampaignSaleCostGrid .inputYes .col-profit-rate {
  background-color: midnightblue;
  color: white;
}

.s-ActCampaignItemScheduleGrid .slick-header-columns {
  white-space: normal;
  height: 3em;
}

.s-ActCampaignItemScheduleGrid .slick-header-column.ui-state-default {
  height: 100%;
  line-height: 1.1em;
}

.export-pdf-blue-button span.button-inner:before {
  content: "";
  font-family: FontAwesome;
  padding-right: 3px;
  color: white;
}

.export-pdf-blue-button span.button-inner {
  padding-left: 3px;
}

.s-ActCampaignSalesViewGrid .Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-ViralReportGrid .Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-APICountryReportGrid .Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-APICountryReportGrid .AllTotal .slick-cell {
  background-color:slategrey;
  color: white;
  font-weight: 900;
}

.s-APIDateReportGrid .Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-APIDateReportGrid .AllTotal .slick-cell {
  background-color: slategrey;
  color: white;
  font-weight: 900;
}

.s-APIAgeReportGrid .Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-APIAgeReportGrid .AllTotal .slick-cell {
  background-color: slategrey;
  color: white;
  font-weight: 900;
}

.s-APIGenderReportGrid .Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-APIGenderReportGrid .AllTotal .slick-cell {
  background-color: slategrey;
  color: white;
  font-weight: 900;
}

.s-VActCampaignSaleBillingViewDetailGrid .AllTotal .slick-cell {
  background-color: slategrey;
  color: white;
  font-weight: 900;
}

.Total .slick-cell {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-ActCampaignViewGrid .slick-group-totals .slick-cell,
.s-ActCampaignViewGrid.slick-group-totals .slick-cell a {
  background-color: #11104D;
  color: aquamarine;
  font-weight: 900;
}

.s-ContractPaymentIsPaidGrid .NullAccountDate .col-account-date {
  background-color: yellow;
  color: white;
}

.s-PastSalesDataGrid .NullAccountYn .slick-cell,
.s-PastSalesDataGrid .NullAccountYn .slick-cell a {
  background-color: beige;
  color: black;
}

.s-PastSalesDataGrid .MinusProfitAmount .col-profitamount {
  color: red;
}

.s-PastSalesDataGrid .NotFinishYn .col-finishyn {
  color: red;
}

.s-CrawlerReportIfGrid .Sucess_YN .l8 {
  background-color: #eb7777;
  color: white;
  font-size: 15px;
  font-weight: bold;
  opacity: 0.9;
}
.s-CrawlerReportIfGrid .Sucess_YN .l9 {
  background-color: #eb7777;
  color: white;
  font-size: 15px;
  font-weight: bold;
  opacity: 0.8;
}

.s-CXmarketing-Marketing-ViralReportFeedBackDialog > .size {
  min-width: 850px;
  width: 850px;
  min-height: 450px;
  height: 450px;
}

.s-CXmarketing-Marketing-ViralReportFeedBackUpdateDialog > .size {
  min-width: 850px;
  width: 850px;
  min-height: 450px;
  height: 450px;
}

.actcampaign-filter .select2-container {
  width: 350px !important;
}

.actitem-filter .select2-container {
  width: 400px !important;
}

.filter-w200 .select2-container {
  width: 200px !important;
}

 .report-filter .select2-container {
  width: 600px !important;
}

.customer-filter .select2-container {
  width: 250px !important;
}


.s-InstaCustomerSpendGrid .inputYes .col-item-amount {
  background-color: midnightblue;
  color: white;
}

/******************************************************************
    증감률 아이콘 및 정렬
******************************************************************/
.change-icon-formatter {
  display: flex; /* Flexbox 레이아웃 사용 */
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: flex-end; /* 아이콘과 숫자를 양 끝으로 정렬 */
  width: 100%; /* 컨테이너의 전체 너비 사용 */
  padding-left: 10px;
}

  .change-icon-formatter .icon {
    /*margin-right: 5px; /* 아이콘과 숫자 사이 간격 (조절 가능) */
    font-size: 0.7rem;
  }

  .change-icon-formatter .number {
    text-align: right; /* 숫자를 오른쪽 정렬 */
    /*flex-grow: 1;*/ /* 숫자가 남은 공간을 채우도록 설정 */
    width: 50px;
  }

/*.change-positive {
  color: green;
}

.change-negative {
  color: red;
}*/

/* 아이콘 색상 */
.change-positive .icon {
  color: green;
}

.change-negative .icon {
  color: red;
}

/* 담당자 스케줄 관리의 작은 행운 말풍선 버튼 */
.lucky-easteregg {
  position: relative;
  overflow: visible !important;
}

.lucky-easteregg.lucky-pop::after {
  content: '🍀 행운 +1';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  color: #317a43;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  animation: lucky-pop 1100ms ease-in-out forwards;
}

@keyframes lucky-pop {
  from {
    opacity: 0;
    transform: translate(-50%, 5px) scale(.9);
  }

  20%, 70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -4px) scale(.96);
  }
}

/* 대시보드에서만 잠깐 등장하는 작은 랜덤 펫 */
.dashboard-pet {
  position: fixed;
  right: 20px;
  bottom: 18px;
  z-index: 1030;
  font-size: 28px;
  line-height: 1;
  pointer-events: none;
  animation: dashboard-pet-roll 4s linear forwards;
}

@keyframes dashboard-pet-roll {
  0% {
    transform: translateX(60px) rotate(0deg);
  }

  37.5% {
    transform: translateX(0) rotate(-360deg);
  }

  62.5% {
    transform: translateX(0) rotate(-360deg);
  }

  100% {
    transform: translateX(60px) rotate(0deg);
  }
}
/******************************************************************
    증감률 아이콘 및 정렬
******************************************************************/

s-CXmarketing-AutoUpload-UpdateActCampaignIdDialog > .size {
  min-width: 850px;
  width: 850px;
  min-height: 450px;
  height: 450px;
}

/******************************************************************
    Highlight CSS
******************************************************************/
.s-Highlight-HighlightResultDialog {
  height: 95vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
}

.dialog-grid-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 1rem;
  min-height: 0;
}

.close-button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

.result-panel-container {
  display: grid;
  grid-template-columns: 40% 60%;
  height: 100%;
  min-height: 0;
}

.left-panel {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  align-self: stretch; /* ✅ 세로 정렬 보장 */
  overflow-y: auto;
  border-right: 1px solid #ccc;
  box-sizing: border-box;
}

.right-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
}

.video-frame {
  flex: 2 1 0%;
  min-height: 0;
  overflow: hidden;
  height: 70%;
  width: 100%;
  margin-bottom: 1rem;
}
.video-frame iframe {
  height: 100%;
}

.result-detail {
  flex: 1 1 0%;
  overflow-y: auto;
}

.result-detail > div {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

.result-table {
  padding: 0.5rem;
  width: 100%;
  border-collapse: separate;
  font-size: 1rem;
  table-layout: fixed;
  border-spacing: 0;
}

.result-table thead th {
  position: sticky;
  top: 0;
  z-index: 2; /* 겹침 방지 */
  background-color: var(--table-header-bg, #1d1f21);
  border-bottom: 1px solid #444;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4); /* 헤더 밑에 그림자 */
}

.result-table th, .result-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #444;
  word-break: break-word;
}

.result-item:hover {
  background-color: #2a2a2a;
  cursor: pointer;
}

.bottom-nav {
  height: 50px;
  padding: 0.5rem;
  border-top: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}

/* overlay-config editor 전용 2열 */
/*.overlay-config-editor .two-col .property-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.overlay-config-editor .two-col .field.half,
.two-col .field.w-half {
  grid-column: auto;
}

.overlay-config-editor .two-col .field.full {
  grid-column: 1 / span 2;
}*/

/* 다이얼로그 안쪽을 flex로 만들어 본문/버튼 분리 */
.ui-dialog .ui-dialog-content {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 실제 스크롤은 내부 ocd-scroll에서 */
}

/* 우리가 넣은 래퍼들 */
.ui-dialog .ocd-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* ★ flex 스크롤 핵심 */
}

.ui-dialog .ocd-scroll {
  flex: 1 1 auto;
  min-height: 0; /* ★ flex 스크롤 핵심 */
  overflow: auto; /* ← 여기서 실제 스크롤 발생 */
  padding: 10px;
}

.ui-dialog .ocd-wrap .buttons {
  flex: 0 0 auto;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
}


/* (1) 우측 컬럼이 부모 flex 안에서 넘치지 않도록 */
.ocd-right {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

  /* (2) 툴바가 줄 안에서 수축되게 */
  .ocd-right fieldset > div {
    min-width: 0;
  }

/* (3) 쉘은 크기 고정(부모가 정한 높이 채움) + 내부 스크롤러만 보이게 */
.preview-shell {
  position: relative;
  overflow: hidden;
}

/* (4) 스크롤은 내부에서만 발생 */
.preview-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}

/* ── 추천(툴바 넘침 방지) ───────────────────────────────── */
.ocd-right fieldset > div {
  display: grid;
  grid-template-columns: auto auto 2fr 4fr; /* 체크박스 | Zoom | 슬라이더 | 34% */
  align-items: center;
  gap: 8px;
}

#ocdScale {
  width: 100%;
  min-width: 0;
}
/* 슬라이더 수축 허용 */
#ocdScaleLabel {
  width: 3.5ch;
  text-align: right;
  display: inline-block;
}

.square-guide-toggle {
  white-space: nowrap;
}

/* 툴바 줄: 한 줄 고정 + 수축 허용 */
.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;  /*← 줄바꿈 금지 (원인 제거) */
  min-width: 0;  /*← 내부 요소 수축 허용 */
  width: 100%;
  box-sizing: border-box;
}

/* 체크박스 라벨이 길어도 줄바꿈 안 하도록(선택) */
.preview-toolbar .square-guide-toggle {
  white-space: nowrap;
}

/* 슬라이더가 남은 공간을 유연하게 먹고 수축되도록 */
#ocdScale {
  flex: 1 1 auto;  ← 핵심: 남은 폭 꽉 채우되 수축 가능 
  min-width: 0;  flex 수축을 실제로 허용 
  width: auto;  100% 고정폭 제거 
  box-sizing: border-box;
}

/* 퍼센트는 고정폭으로 밀리지 않게 */
#ocdScaleLabel {
  flex: 0 0 auto;
  display: inline-block;
  width: 3.5ch;  /*"100%"도 안전 */
  text-align: right;
}

/* 조상 flex 컨테이너 수축 허용(넘침 방지) */
.ocd-right {
  min-width: 0;
  min-height: 0;
}

/* 쉘: 세로 기준으로 9:16 비율 유지 */
.preview-shell {
  /* 1) 기본은 세로 70vh에 맞춤 */
  /* 2) 다만 그 높이로 계산한 가로폭이 화면을 넘치지 않도록,
        높이를 70vw * 16/9 (가로폭이 허용하는 최대 높이)로 한번 더 제한 */
  height: 70vh;
  aspect-ratio: 10 / 17; /* 가로:세로 = 9:16 */
  width: auto; /* 높이에서 가로 자동 산출 */
  max-width: 100%; /* 부모 폭을 절대 넘지 않음 */
  margin: 0 auto; /* 중앙 정렬(선택) */

  overflow: hidden; /* 스크롤은 내부 래퍼가 담당 */
  display: block;
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0/20px 20px;
  box-sizing: border-box;
}

/* 내부 스크롤 전담 */
.preview-scroll {
  width: 100%;
  height: 100%;
  overflow: auto; /* 확대 시 좌/우/상/하 스크롤 */
  position: relative;
  display: grid; /* ← 핵심 */
  place-items: center; /* 가로+세로 센터 */
}

#PreviewCanvas {
  display: block;
  image-rendering: pixelated;
}

/**
    * Color Picker Modal Styles
*/
.colorpicker-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.colorpicker-backdrop {
  position: absolute;
  inset: 0;
  background: transparent; /* 프리뷰 색상이 보이도록 투명하게 설정 */
  pointer-events: auto; /* 클릭은 막지만 시각적으로는 투명 */
}

.colorpicker-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  width: 220px;
  padding: 10px;
  animation: fadeIn 0.15s ease;
}

.colorpicker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 8px;
}

  .colorpicker-header .close-btn {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
  }

.colorpicker-body {
  display: flex;
  justify-content: center;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* SnsReport / ViralReport - Crawler Log (Mini Chips) */
.s-SnsReportGrid #SnsReportNotice,
.s-ViralReportGrid #ViralReportNotice {
  display: block;
  width: 100%;
  margin: 10px 0;
  color: #ff4d63;
  font-size: 14px;
  line-height: 1.35;
}

.s-SnsReportGrid #SnsReportNotice .line,
.s-ViralReportGrid #ViralReportNotice .line {
  display: block;
}

.s-SnsReportGrid #SnsCrawlerRunLogView,
.s-ViralReportGrid #ViralCrawlerRunLogView {
  display: block;
}

.s-SnsReportGrid .sns-log-box,
.s-ViralReportGrid .sns-log-box {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7deeb;
  border-radius: 10px;
  padding: 8px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.s-SnsReportGrid .sns-chip,
.s-ViralReportGrid .sns-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #d7deeb;
  border-radius: 999px;
  background: #ffffff;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.s-SnsReportGrid .sns-chip-status,
.s-ViralReportGrid .sns-chip-status { width: 180px; min-width: 180px; }
.s-SnsReportGrid .sns-chip-started,
.s-ViralReportGrid .sns-chip-started { width: 185px; }
.s-SnsReportGrid .sns-chip-ended,
.s-ViralReportGrid .sns-chip-ended { width: 185px; }
.s-SnsReportGrid .sns-chip-channel,
.s-ViralReportGrid .sns-chip-channel { min-width: 130px; }

.s-SnsReportGrid .sns-log-box.has-error .sns-chip-status,
.s-ViralReportGrid .sns-log-box.has-error .sns-chip-status {
  width: auto;
  min-width: 180px;
  flex: 1 1 320px;
}

.s-SnsReportGrid .sns-chip-label,
.s-ViralReportGrid .sns-chip-label {
  font-size: 11px;
  color: #72809b;
  line-height: 1;
}

.s-SnsReportGrid .sns-chip-value,
.s-ViralReportGrid .sns-chip-value {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #25324a;
}

.s-SnsReportGrid .sns-chip-status,
.s-ViralReportGrid .sns-chip-status {
  border-color: #cdd5e6;
}

.s-SnsReportGrid .sns-chip-status.is-neutral .sns-chip-value,
.s-ViralReportGrid .sns-chip-status.is-neutral .sns-chip-value {
  color: #25324a;
}

.s-SnsReportGrid .sns-chip-status.is-success,
.s-ViralReportGrid .sns-chip-status.is-success {
  background: #e9f9f0;
  border-color: #b7ebcd;
}

.s-SnsReportGrid .sns-chip-status.is-success .sns-chip-value,
.s-ViralReportGrid .sns-chip-status.is-success .sns-chip-value {
  color: #1f9d55;
}

.s-SnsReportGrid .sns-chip-status.is-running,
.s-ViralReportGrid .sns-chip-status.is-running {
  background: #eef6ff;
  border-color: #c8defd;
}

.s-SnsReportGrid .sns-chip-status.is-running .sns-chip-value,
.s-ViralReportGrid .sns-chip-status.is-running .sns-chip-value {
  color: #2b72d6;
}

.s-SnsReportGrid .sns-chip-status.is-fail,
.s-ViralReportGrid .sns-chip-status.is-fail {
  background: #fff1f3;
  border-color: #ffc7d1;
}

.s-SnsReportGrid .sns-chip-status.is-fail .sns-chip-value,
.s-ViralReportGrid .sns-chip-status.is-fail .sns-chip-value {
  color: #d62855;
}

.s-SnsReportGrid .sns-chip-channel .ok,
.s-ViralReportGrid .sns-chip-channel .ok {
  color: #1769e6;
}

.s-SnsReportGrid .sns-chip-channel.has-fail,
.s-ViralReportGrid .sns-chip-channel.has-fail {
  background: #fff8e6;
  border-color: #ffd98a;
}

.s-SnsReportGrid .sns-chip-channel.has-fail .sns-chip-value,
.s-ViralReportGrid .sns-chip-channel.has-fail .sns-chip-value {
  color: #b45309;
}

.s-SnsReportGrid .slick-row.sns-report-error-row .slick-cell,
.s-ViralReportGrid .slick-row.sns-report-error-row .slick-cell {
  background-color: #fff1f3;
  color: #c9184a;
}

.s-SnsReportGrid .slick-row.sns-report-error-row.active .slick-cell,
.s-SnsReportGrid .slick-row.sns-report-error-row.selected .slick-cell,
.s-ViralReportGrid .slick-row.sns-report-error-row.active .slick-cell,
.s-ViralReportGrid .slick-row.sns-report-error-row.selected .slick-cell {
  background-color: #ffdce3;
  color: #9f1239;
}

@media (prefers-color-scheme: dark) {
  .s-SnsReportGrid #SnsReportNotice,
  .s-ViralReportGrid #ViralReportNotice {
    color: #ff8d9d;
  }

  .s-SnsReportGrid .sns-log-box,
  .s-ViralReportGrid .sns-log-box {
    background: #0f1a2b;
    border-color: #314461;
  }

  .s-SnsReportGrid .sns-chip,
  .s-ViralReportGrid .sns-chip {
    background: #152033;
    border-color: #314461;
  }

  .s-SnsReportGrid .sns-chip-label,
  .s-ViralReportGrid .sns-chip-label {
    color: #a6b4cc;
  }

  .s-SnsReportGrid .sns-chip-value,
  .s-ViralReportGrid .sns-chip-value {
    color: #e6efff;
  }

  .s-SnsReportGrid .sns-chip-status.is-success,
  .s-ViralReportGrid .sns-chip-status.is-success {
    background: #183226;
    border-color: #2a5d45;
  }

  .s-SnsReportGrid .sns-chip-status.is-success .sns-chip-value,
  .s-ViralReportGrid .sns-chip-status.is-success .sns-chip-value {
    color: #7ee2ac;
  }

  .s-SnsReportGrid .sns-chip-status.is-running,
  .s-ViralReportGrid .sns-chip-status.is-running {
    background: #1a2f4f;
    border-color: #355786;
  }

  .s-SnsReportGrid .sns-chip-status.is-running .sns-chip-value,
  .s-ViralReportGrid .sns-chip-status.is-running .sns-chip-value {
    color: #9cc6ff;
  }

  .s-SnsReportGrid .sns-chip-status.is-fail,
  .s-ViralReportGrid .sns-chip-status.is-fail {
    background: #3b1f2c;
    border-color: #724058;
  }

  .s-SnsReportGrid .sns-chip-status.is-fail .sns-chip-value,
  .s-ViralReportGrid .sns-chip-status.is-fail .sns-chip-value {
    color: #ff9ab0;
  }

  .s-SnsReportGrid .sns-chip-channel .ok,
  .s-ViralReportGrid .sns-chip-channel .ok {
    color: #8fc2ff;
  }

  .s-SnsReportGrid .sns-chip-channel.has-fail,
  .s-ViralReportGrid .sns-chip-channel.has-fail {
    background: #3a2f18;
    border-color: #7a5a1c;
  }

  .s-SnsReportGrid .sns-chip-channel.has-fail .sns-chip-value,
  .s-ViralReportGrid .sns-chip-channel.has-fail .sns-chip-value {
    color: #fbbf24;
  }

  .s-SnsReportGrid .slick-row.sns-report-error-row .slick-cell,
  .s-ViralReportGrid .slick-row.sns-report-error-row .slick-cell {
    background-color: #3b1f2c;
    color: #ff9ab0;
  }

  .s-SnsReportGrid .slick-row.sns-report-error-row.active .slick-cell,
  .s-SnsReportGrid .slick-row.sns-report-error-row.selected .slick-cell,
  .s-ViralReportGrid .slick-row.sns-report-error-row.active .slick-cell,
  .s-ViralReportGrid .slick-row.sns-report-error-row.selected .slick-cell {
    background-color: #4a2534;
    color: #ffc2cf;
  }
}