@font-face {
  font-family: "Pretendard";
  src: url(./fonts/Pretendard-Regular.otf);
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Regular";
  src: url(./fonts/Pretendard-Regular.otf);
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Hair";
  src: url(./fonts/Pretendard-Thin.otf);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Thin";
  src: url(./fonts/Pretendard-ExtraLight.otf);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Light";
  src: url(./fonts/Pretendard-Light.otf);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Demibold";
  src: url(./fonts/Pretendard-SemiBold.otf);
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Bold";
  src: url(./fonts/Pretendard-Bold.otf);
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-Black";
  src: url(./fonts/Pretendard-Black.otf);
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto-Regular";
  src: url(./fonts/Roboto-Regular.ttf);
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.hide-calendar .ui-datepicker-calendar {
  display: none;
}
.hide-calendar .ui-datepicker-current {
  display: none;
}
.loading-button-load-container {
  min-height: 24px;
  height: 100%;
}

.chip-selector-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
}
.chip {
  color: var(--text-text-primary);
  border: 1px solid var(--border-primary-default);
  padding: var(--space-s) var(--space-l);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  cursor: pointer;
}
.chip-selected {
  color: var(--text-inverse-title);
  background: var(--background-brand-dark);
}
.chip:hover {
  color: var(--background-brand-light);
  border: 1px solid var(--background-brand-light);
}
@media (max-width: 500px) {
  .chip:hover {
    color: var(--text-text-primary);
    border: 1px solid var(--border-primary-default);
  }
}
.chip-selected:hover {
  color: var(--text-inverse-title);
  border: 1px solid var(--background-brand-light);
}
@media (max-width: 500px) {
  .chip-selected:hover {
    color: var(--text-inverse-title);
    background: var(--background-brand-dark);
  }
}
.chip > svg > g > path,
.chip > svg > path,
.chip > * {
  fill: var(--text-text-primary);
}
.chip:hover > svg > g > path,
.chip:hover > svg > path,
.chip:hover > * {
  fill: var(--background-brand-light);
}
@media (max-width: 500px) {
  .chip:hover > svg > g > path,
  .chip:hover > svg > path,
  .chip:hover > * {
    fill: var(--text-text-primary);
  }
}
.chip-selected > svg > g > path,
.chip-selected > svg > path,
.chip-selected > * {
  fill: var(--text-inverse-title);
}
.chip-selected:hover > svg > g > path,
.chip-selected:hover > svg > path,
.chip-selected:hover > * {
  fill: var(--text-inverse-title);
}
@media (max-width: 500px) {
  .chip-selected:hover > * {
    fill: var(--text-inverse-title);
  }
}

.alertview-background {
  display: none;
  position: fixed;
  z-index: 23;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(44,65,86,0.38);
}
.modal-content header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 20px 24px;
  background-color: var(--view-background-color);
  border-bottom: 2px solid var(--line-color);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  position: relative;
  color: var(--title-color);
}
.modal-content header h2 {
  font-weight: normal;
}
.modal-content footer {
  text-align: left;
  padding: 20px;
  background-color: var(--view-background-color);
  border-top: 1px solid var(--line-color);
  position: relative;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.modal-body {
  position: relative;
  text-align: left;
  clear: both;
  color: var(--title-color);
}
.modal-body {
  position: relative;
  text-align: left;
  clear: both;
  color: var(--title-color);
}
.modal-content {
  z-index: 13;
  background-color: var(--view-background-color);
  margin: 4% auto;
  border: 1px solid var(--line-color);
  width: calc(50% - 40px);
  min-height: auto;
  border-radius: 24px;
}
@media (max-width: 1440px) {
  .modal-content {
    width: calc(60% - 35px);
  }
}
@media (max-width: 1230px) {
  .modal-content {
    width: calc(80% - 40px);
  }
}
@media (max-width: 735px) {
  .modal-content {
    width: calc(100% - 40px);
  }
}
.close-modal-button {
  cursor: pointer;
}
.close-modal-button > svg > g > path {
  cursor: pointer;
  fill: var(--action-or-selection-color);
}
.modal-fit-content {
  width: fit-content;
}

.accordion {
  background-color: var(--background-color);
  color: var(--text-color);
  cursor: pointer;
  padding: 8px;
  text-align: left;
  transition: 0.4s;
  display: flex;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
}
.panel {
  margin-top: -1px;
  background-color: var(--background-color);
  color: var(--text-color);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
#accordion-title-icon {
  margin-right: 12px;
  width: 20px;
  height: 20px;
}
#accordion-title-view {
  align-content: baseline;
  display: flex;
}

/*
 * ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
 * Copyright 2014 Wang Shenwei.
 * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
 * 
 * Bootstrap v3.1.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
/* Picked from bootstrap: .popover, .btn, .text-primary */
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.popover.top {
  margin-top: -10px;
}
.popover.right {
  margin-left: 10px;
}
.popover.bottom {
  margin-top: 10px;
}
.popover.left {
  margin-left: -10px;
}
.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}
.popover-content {
  padding: 9px 14px;
}
.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
/* The following are set in WordPress (wp-admin/css/revisions.css) - reset them to initial values */
  overflow: visible;
  margin: 0;
  padding: 0;
  z-index: auto;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
  bottom: auto;
  left: auto;
  right: auto;
  top: auto;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  content: "";
  border-width: 10px;
}
.popover.top > .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0,0,0,0.25);
  border-bottom-width: 0;
}
.popover.top > .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}
.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #999;
  border-right-color: rgba(0,0,0,0.25);
  border-left-width: 0;
}
.popover.right > .arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}
.popover.bottom > .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #999;
  border-bottom-color: rgba(0,0,0,0.25);
}
.popover.bottom > .arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}
.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #999;
  border-left-color: rgba(0,0,0,0.25);
}
.popover.left > .arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}
.btn {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus {
  color: #333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: #333;
  background-color: #ebebeb;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-block {
  display: block;
  width: 100%;
}
.text-primary {
  color: #428bca;
}
/*
 * ClockPicker v{package.version} for Bootstrap (http://weareoutman.github.io/clockpicker/)
 * Copyright 2014 Wang Shenwei.
 * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
 */
.clockpicker .input-group-addon {
  cursor: pointer;
}
.clockpicker-moving {
  cursor: move;
}
.clockpicker-align-left.popover > .arrow {
  left: 25px;
}
.clockpicker-align-top.popover > .arrow {
  top: 17px;
}
.clockpicker-align-right.popover > .arrow {
  left: auto;
  right: 25px;
}
.clockpicker-align-bottom.popover > .arrow {
  top: auto;
  bottom: 6px;
}
.clockpicker-popover .popover-title {
  background-color: #fff;
  color: #999;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}
.clockpicker-popover .popover-title span {
  cursor: pointer;
}
.clockpicker-popover .popover-content {
  background-color: #f8f8f8;
  padding: 12px;
}
.popover-content:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.clockpicker-plate {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: visible;
  position: relative;
/* Disable text selection highlighting. Thanks to Hermanya */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.clockpicker-canvas,
.clockpicker-dial {
  width: 200px;
  height: 200px;
  position: absolute;
  left: -1px;
  top: -1px;
}
.clockpicker-minutes {
  visibility: hidden;
}
.clockpicker-tick {
  border-radius: 50%;
  color: #666;
  line-height: 26px;
  text-align: center;
  width: 26px;
  height: 26px;
  position: absolute;
  cursor: pointer;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
  background-color: #c0e5f7;
  background-color: rgba(0,149,221,0.25);
}
.clockpicker-button {
  background-image: none;
  background-color: #fff;
  border-width: 1px 0 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin: 0;
  padding: 10px 0;
}
.clockpicker-button:hover {
  background-image: none;
  background-color: #ebebeb;
}
.clockpicker-button:focus {
  outline: none !important;
}
.clockpicker-dial {
  -webkit-transition: -webkit-transform 350ms, opacity 350ms;
  -moz-transition: -moz-transform 350ms, opacity 350ms;
  -ms-transition: -ms-transform 350ms, opacity 350ms;
  -o-transition: -o-transform 350ms, opacity 350ms;
  transition: transform 350ms, opacity 350ms;
}
.clockpicker-dial-out {
  opacity: 0;
}
.clockpicker-hours.clockpicker-dial-out {
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
.clockpicker-minutes.clockpicker-dial-out {
  -webkit-transform: scale(0.8, 0.8);
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8, 0.8);
  -o-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8);
}
.clockpicker-canvas {
  -webkit-transition: opacity 175ms;
  -moz-transition: opacity 175ms;
  -ms-transition: opacity 175ms;
  -o-transition: opacity 175ms;
  transition: opacity 175ms;
}
.clockpicker-canvas-out {
  opacity: 0.25;
}
.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
  stroke: none;
  fill: #0095dd;
}
.clockpicker-canvas-bg {
  stroke: none;
  fill: #c0e5f7;
}
.clockpicker-canvas-bg-trans {
  fill: rgba(0,149,221,0.25);
}
.clockpicker-canvas line {
  stroke: #0095dd;
  stroke-width: 1;
  stroke-linecap: round;
/*shape-rendering: crispEdges;*/
}
.clockpicker-button.am-button {
  margin: 1px;
  padding: 5px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}
.clockpicker-button.pm-button {
  margin: 1px 1px 1px 136px;
  padding: 5px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
}

#particles-view {
  display: none;
  overflow: auto;
  left: 0;
  top: 0;
}
#particles-js {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 23;
  background-color: var(--view-background-color);
}
.particles-text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 300px;
  top: calc(50% - 100px);
  left: calc(50% - 150px);
  z-index: 24;
}
.particles-img {
  display: inline-block;
  height: 100px;
  z-index: 17;
}

.tabs {
  position: relative;
  border-bottom: 1px solid var(--line-color);
}
.tabs .tab {
  display: inline-block;
  cursor: pointer;
  color: var(--title-color);
  line-height: 1.5;
  font-size: 12px;
  border-bottom: 1px solid transparent;
  padding: 13px 10px;
}
.tabs .tab-active {
  color: var(--action-or-selection-color);
}
@media (max-width: 520px) {
  .tabs .tab-active {
    border-bottom: 2px solid var(--action-or-selection-color);
  }
}
.tabs .tab-active-bar {
  position: absolute;
  height: 2px;
  width: 0;
  left: 0;
  bottom: 0;
  background-color: var(--action-or-selection-color);
}
@media (max-width: 520px) {
  .tabs .tab-active-bar {
    background-color: transparent;
  }
}
.tab-content {
  padding: 24px;
  color: #616161;
}
.tab-image-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.animated-modal-content header {
  text-align: left;
  padding: 20px;
  background-color: var(--view-background-color);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  color: var(--title-color);
}
.animated-modal-content footer {
  text-align: left;
  padding: 20px;
  background-color: var(--view-background-color);
  border-top: 1px solid var(--line-color);
  position: relative;
}
.animated-modal-body {
  position: relative;
  text-align: left;
  clear: both;
  color: var(--title-color);
}
.animated-modal-content {
  display: none;
  position: fixed;
  z-index: 24;
  background-color: var(--view-background-color);
  border: 1px solid var(--line-color);
  width: calc(70% - 40px);
  min-height: auto;
  height: fit-content;
  border-radius: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  animation-name: slideIn;
  animation-duration: 400ms;
}
@media (max-width: 900px) {
  .animated-modal-content {
    width: calc(80% - 40px);
  }
}
@media (max-width: 735px) {
  .animated-modal-content {
    width: calc(100% - 40px);
  }
}
.animated-modal-body {
  height: 530px;
  overflow: auto;
}
.close-animated-modal-button {
  position: absolute;
  top: 25px;
  right: 14px;
  cursor: pointer;
  color: var(--action-or-selection-color);
  font-size: 1.75rem;
}
.hide-modal-content {
  display: none;
  bottom: -1500px;
  animation-name: slideOut;
  animation-duration: 0.7s;
}
/*show*/
@-webkit-keyframes slideIn {
  0% {
    bottom: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    bottom: 1.8rem;
    opacity: 1;
  }
}
/*hide*/
@-webkit-keyframes slideOut {
  0% {
    bottom: 1.8rem;
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    bottom: -1500px;
    opacity: 0;
  }
}
@-moz-keyframes slideIn {
  0% {
    bottom: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    bottom: 1.8rem;
    opacity: 1;
  }
}
@-webkit-keyframes slideIn {
  0% {
    bottom: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    bottom: 1.8rem;
    opacity: 1;
  }
}
@-o-keyframes slideIn {
  0% {
    bottom: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    bottom: 1.8rem;
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    bottom: 0;
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    bottom: 1.8rem;
    opacity: 1;
  }
}
@-moz-keyframes slideOut {
  0% {
    bottom: 1.8rem;
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    bottom: -1500px;
    opacity: 0;
  }
}
@-webkit-keyframes slideOut {
  0% {
    bottom: 1.8rem;
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    bottom: -1500px;
    opacity: 0;
  }
}
@-o-keyframes slideOut {
  0% {
    bottom: 1.8rem;
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    bottom: -1500px;
    opacity: 0;
  }
}
@keyframes slideOut {
  0% {
    bottom: 1.8rem;
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    bottom: -1500px;
    opacity: 0;
  }
}

.request-search-textfield-result-list {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  margin-top: -4px;
  border-radius: 4px;
  position: absolute;
  border: 1px solid var(--border-color);
  background-color: var(--view-background-color);
  z-index: 1;
  max-height: 280px;
  overflow: hidden;
}
.request-search-textfield-result-list:hover {
  overflow: auto;
}
.request-search-textfield-result-list-item {
  height: 40px;
  overflow: hidden;
  vertical-align: middle;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
}
.request-search-textfield-result-list-item:hover {
  cursor: pointer;
  color: var(--view-background-color);
  background-color: var(--action-or-selection-color);
}
.request-search-textfield-result-list-item:hover > label {
  cursor: pointer;
  color: var(--view-background-color);
}
.request-search-textfield-result-list-item > label {
  line-height: 1.5;
  font-size: 0.75rem;
  color: var(--text-color);
}
.request-search-textfield-result-list-item-button > label {
  color: var(--background-brand-dark);
}
.request-search-textfield-input {
  border: none;
  height: 37px;
  width: 50px;
  font-size: 16px;
  color: var(--input-color);
  background-color: transparent;
}
.request-search-textfield-input:focus + .request-search-textfield-result-container {
  outline: none;
  border: 2px solid var(--action-or-selection-color);
}
.request-search-textfield-result-container {
  height: fit-content;
  max-height: 140px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  cursor: text;
}
@media (max-width: 1450px) {
  .request-search-textfield-result-container {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
@media (max-width: 1450px) {
  .request-search-textfield-result-container::-webkit-scrollbar {
    display: none;
  }
}
.request-search-textfield-tag-item-icon {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
}
.request-search-textfield-result-list-item-icon {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}

.validator-view-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.validator-view-item {
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-family: "Pretendard-Thin";
}
@media (max-width: 780px) {
  .validator-view-item {
    white-space: nowrap;
    font-size: 12px;
  }
}
.valid {
  transition: all 300ms;
}
.validator-view-item::before {
  width: 10px;
  height: 10px;
  content: "";
  transition: all 300ms;
  transform: scale(1.3);
  border: 1px solid var(--border-color);
  border-radius: 100px;
  padding: 2px;
}
.valid:before {
  background-image: url(./images/checkmark.svg);
  background-size: 7.5px 15px;
  background-position: center;
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  content: "";
  transition: all 300ms;
  transform: scale(1.2);
}
.invalid {
  color: var(--fail-text-color);
  transition: all 300ms;
}
.invalid:before {
  background-image: url(./images/xmark.svg);
  background-size: 7.5px 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f00;
  width: 10px;
  height: 10px;
  content: "";
  transition: all 300ms;
  transform: scale(1.2);
  border: 1px solid #f00;
}

.secure-textfield-checkbox {
  position: relative;
  z-index: 1;
  right: 30px;
  top: 19px;
  cursor: pointer;
  width: 0;
}
.secure-textfield-show::before {
  content: "\f06e";
  color: var(--action-or-selection-color);
}
.secure-textfield-hide::before {
  content: "\f070";
  color: var(--action-or-selection-color);
}

.multi-steps > li:last-child:after {
  background-color: transparent !important;
  display: none;
}
.multi-steps > li.is-active ~ li:before {
  content: "";
  font-family: inherit;
  font-weight: 700;
}
.multi-steps > li.is-active ~ li:after,
.multi-steps > li.is-active:after {
  background-color: var(--line-color);
}
.multi-steps {
  display: table;
  table-layout: fixed;
}
.multi-steps > li {
  text-align: center;
  display: table-cell;
  position: relative;
  color: var(--text-color);
  z-index: 3;
  padding: 0px 4px;
  font-family: 'Pretendard-Thin';
  font-size: var(--text-xs-thin-size);
  font-style: normal;
  line-height: var(--text-xs-thin-line-height);
  letter-spacing: var(--text-xs-thin-letter-spacing);
}
@media (max-width: 500px) {
  .multi-steps > li {
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
  }
}
.multi-steps > li:before {
  content: "";
  display: block;
  margin: auto;
  margin-top: 9px;
  background-color: var(--view-background-color);
  width: 12px;
  height: 12px;
  line-height: 34px;
  text-align: center;
  border-width: 2px;
  border-style: solid;
  border-color: var(--folklore-medium);
  border-radius: 50%;
  background-color: var(--folklore-medium);
  margin-bottom: 8px;
}
.multi-steps > li:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: var(--folklore-medium);
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
}
.multi-steps > li:last-child {
  padding-left: 4px;
  padding-right: 0px;
}
.multi-steps > li.is-active:before {
  background-color: var(--folklore-medium);
  border-color: var(--folklore-medium);
}
.multi-steps > li.is-active {
  font-family: "Pretendard-Regular";
  font-size: var(--text-xs-regular-size);
  font-style: normal;
  line-height: var(--text-xs-regular-line-height);
  letter-spacing: var(--text-xs-demibold-letter-spacing);
  color: var(--title-color);
}
@media (max-width: 500px) {
  .multi-steps > li.is-active {
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
  }
}
.multi-steps > li.failed ~ li,
.multi-steps > li.is-active ~ li {
  color: var(--text-color);
}
.multi-steps > li.is-active ~ li:before {
  background-color: var(--line-color);
  border-color: var(--line-color);
}
.multi-steps .shimmer {
  color: transparent;
}
.multi-steps > li.failed {
  text-align: center;
  display: table-cell;
  position: relative;
  z-index: 3;
  padding-left: 4px;
  padding-right: 0px;
  font-family: "Pretendard-Regular";
  font-size: var(--text-xs-regular-size);
  font-style: normal;
  line-height: var(--text-xs-regular-line-height);
  letter-spacing: var(--text-xs-demibold-letter-spacing);
  color: var(--title-color);
}
@media (max-width: 500px) {
  .multi-steps > li.failed {
    font-size: 12px;
    font-style: normal;
    line-height: 16px;
  }
}
.multi-steps > li.failed:before {
  background-color: var(--view-background-color);
  border-color: var(--red-medium);
}
.multi-steps > li.failed:after {
  content: "";
  height: 2px;
  width: 100%;
  background-color: var(--red-medium);
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
}
.multi-steps > li.failed:before {
  content: "";
  display: block;
  margin: auto;
  background-color: var(--red-medium);
  width: 12px;
  height: 12px;
  line-height: 34px;
  text-align: center;
  border-width: 2px;
  border-style: solid;
  border-color: var(--red-medium);
  border-radius: 50%;
  margin-top: 9px;
  margin-bottom: 8px;
}
.multi-steps > li.failed:after,
.multi-steps > li.failed ~ li:after,
.multi-steps > li.failed ~ li:before,
.multi-steps > li.failed ~ li.failed:before {
  background-color: var(--line-color);
  border-color: var(--line-color);
}
.multi-steps > li.failed ~ li:before,
.multi-steps > li.failed:before {
  content: "";
  font-family: inherit;
  font-weight: 700;
}
.multi-steps > li.pre-failed:after {
  background-color: var(--red-medium);
}

#banner-alert-container {
  width: calc(100% - 80px);
  margin-left: 40px;
  margin-bottom: 10px;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.banner-alert-success {
  background-color: var(--success-background-color);
  border: 1px solid var(--success-border-color);
  color: var(--success-text-color);
}
.banner-alert-failed {
  background-color: var(--fail-background-color);
  border: 1px solid var(--fail-border-color);
  color: var(--fail-text-color);
}

.detailed-select-result-container {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
}
.detailed-select-result-container:hover {
  cursor: pointer;
}
.detailed-arrow-down {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 12px;
  height: 12px;
}
.detailed-arrow-down > svg {
  fill: var(--title-color);
}
.detailed-select-result-list {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  margin-top: -4px;
  border-radius: 4px;
  position: absolute;
  border: 1px solid var(--border-color);
  background-color: var(--view-background-color);
  z-index: 1;
  max-height: 280px;
  overflow: scroll;
}
.detailed-select-result-list-item {
  cursor: pointer;
  height: auto;
  overflow: hidden;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}
.detailed-select-result-list-item:last-child {
  border-bottom: none;
}
.detailed-select-result-list-item-name {
  font-family: "Pretendard-Regular";
  font-size: 16px;
  line-height: 18px;
}
.detailed-select-result-list-item-description {
  font-family: "Pretendard-Hair";
  font-size: 14px;
  line-height: 16px;
}
.detailed-select-result-list-item:hover {
  color: var(--view-background-color);
  background-color: var(--action-or-selection-color);
}
.current-selection-item-label {
  font-family: "Pretendard-Demibold";
}
.detailed-placeholder {
  color: var(--text-text-disable);
}

.md-chat-widget-btn-container,
.md-chat-widget-btn-wrapper,
.md-chat-widget-icon-svg > svg {
  fill: var(--action-or-selection-color) !important;
}
#md-app-widget .chat-mv-color {
  color: var(--title-color) !important;
  background-color: var(--menu-background-color) !important;
}
.md-chat-widget-credits-container {
  display: none;
}
.chat-footer {
  bottom: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 34px;
  z-index: 200000;
  position: absolute;
  background-color: var(--menu-background-color);
}

.searchable-tag {
  display: flex;
  background-color: var(--menu-background-color);
  color: var(--text-color);
  width: fit-content;
  margin-bottom: 4px;
  margin-top: 4px;
  padding: 6px 6px 8px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-right: 4px;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-direction: row;
  align-content: center;
  align-items: center;
}
.searchable-tag-image {
  border-radius: 50%;
  background-color: var(--border-color);
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.searchable-input {
  display: flex;
  flex-wrap: wrap;
  height: fit-content !important;
  min-height: 44px;
}
.searchable-dropdown-tag {
  border-bottom: 1px solid var(--border-color);
  padding: 0px;
  height: fit-content;
  cursor: pointer;
  display: flex;
  padding-left: 12px;
}
.searchable-dropdown-tag:hover > label {
  cursor: pointer;
  color: var(--view-background-color);
}
.searchable-dropdown-tag:hover {
  background-color: var(--action-or-selection-color);
  cursor: pointer;
  color: var(--view-background-color);
}
.searchable-dropdown-tag > label {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.searchable-dropdown-image {
  border-radius: 50%;
  background-color: var(--border-color);
  width: 32px;
  height: 32px;
  margin-top: 4px;
  margin-right: 12px;
}

.multicheckbox-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 30px;
}
.multicheckbox-item {
  display: flex;
  width: 49%;
  align-items: flex-start;
  cursor: pointer;
}
.multicheckbox-text-container {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.multicheckbox spam {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: background 200ms linear;
  -o-transition: background 200ms linear;
  transition: background 200ms linear;
}
.multicheckbox svg {
  position: absolute;
  display: none;
}
.multicheckbox input {
  display: none;
}
.multicheckbox spam:hover {
  border: 2px solid var(--action-or-selection-color);
}
.multicheckbox input:checked ~ spam {
  border: 2px solid var(--action-or-selection-color);
  background-color: var(--action-or-selection-color);
}
.multicheckbox input:checked ~ svg {
  display: block;
  cursor: pointer;
}

.detailed-multiselect-result-container {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
}
.detailed-multiselect-result-container:hover {
  cursor: pointer;
}
.detailed-arrow-down {
  position: absolute;
  top: 18px;
  right: 10px;
  width: 13px;
  height: 13px;
}
.detailed-arrow-down > svg {
  fill: var(--title-color);
}
.detailed-multiselect-result-list {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  margin-top: -4px;
  border-radius: 4px;
  position: absolute;
  border: 1px solid var(--border-color);
  background-color: var(--view-background-color);
  z-index: 1;
  max-height: 280px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.detailed-multiselect-result-list-item {
  cursor: pointer;
  height: auto;
  overflow: hidden;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  padding-left: 8px;
}
.detailed-multiselect-result-list-item:last-child {
  border-bottom: none;
}
.detailed-multiselect-result-list-item-name {
  font-family: "Pretendard-Regular";
  font-size: 16px;
  line-height: 18px;
}
.detailed-multiselect-result-list-item-description {
  font-family: "Pretendard-Hair";
  font-size: 14px;
  line-height: 16px;
}
.current-selection-items-label {
  font-family: "Pretendard-Demibold";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 24px;
}
.detailed-placeholder {
  color: var(--border-color);
}
.detailed-multiselect-result-list-item-container {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  border-bottom: solid 1px var(--line-color);
}
.detailed-multiselect-image-container {
  padding: 12px 0px 12px 12px;
}
.detailed-multiselect-result-list-item-container-disable {
  background-color: var(--background-full-neutral-disabled);
}

/* display */
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-align-center {
  margin: auto;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-start {
  justify-content: start;
}
.justify-content-end {
  justify-content: end;
}
.justify-content-space-between {
  justify-content: space-between;
}
.align-items-start {
  align-items: start;
}
.align-items-end {
  align-items: end;
}
.flex-align-vertically {
  margin-bottom: auto;
  margin-top: auto;
}
.flex-align-horizontally {
  margin-right: auto;
  margin-left: auto;
}
.gap-2xs {
  gap: var(--space-2xs);
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-s {
  gap: var(--space-s);
}
.gap-m {
  gap: var(--space-m);
}
.gap-l {
  gap: var(--space-l);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.gap-3xl {
  gap: var(--space-3xl);
}
.gap-4xl {
  gap: var(--space-4xl);
}
.gap-5xl {
  gap: var(--space-5xl);
}
.gap-6xl {
  gap: var(--space-6xl);
}
.gap-7xl {
  gap: var(--space-7xl);
}
.gap-8xl {
  gap: var(--space-8xl);
}
.gap-9xl {
  gap: var(--space-9xl);
}
.gap-10xl {
  gap: var(--space-10xl);
}
.gap-11xl {
  gap: var(--space-11xl);
}
.gap-12xl {
  gap: var(--space-12xl);
}
.gap-13xl {
  gap: var(--space-13xl);
}
.gap-14xl {
  gap: var(--space-14xl);
}
.gap-15xl {
  gap: var(--space-15xl);
}
.gap-16xl {
  gap: var(--space-16xl);
}
.gap-17xl {
  gap: var(--space-17xl);
}
.gap-18xl {
  gap: var(--space-18xl);
}
/*Page format*/
.page-content-container {
  padding: 0 var(--space-15xl);
}
@media (max-width: 1255px) {
  .page-content-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .page-content-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .page-content-container {
    padding: 0 var(--space-xl);
  }
}
/* Scrollbar */
html {
  scrollbar-color: var(--border-color);
  scrollbar-width: auto;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 6px;
}
/* Buttons */
button {
  font-size: 100%;
  font-family: inherit;
  border: 0;
  padding: 0;
  background-color: transparent;
}
.v3-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: fit-content;
}
.btn-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
}
.btn-content-icon-container {
  display: flex;
}
.btn-ghost > .btn-content > .btn-content-icon-container > svg > g > path,
.btn-ghost > .btn-content > .btn-content-icon-container > svg > path,
.btn-ghost > .btn-content > .btn-content-icon-container > * {
  fill: var(--background-brand-dark);
}
.btn-ghost-danger > .btn-content > .btn-content-icon-container > svg > g > path,
.btn-ghost-danger > .btn-content > .btn-content-icon-container > svg > path,
.btn-ghost-danger > .btn-content > .btn-content-icon-container > * {
  fill: var(--red-medium);
}
.btn-filled > .btn-content > .btn-content-icon-container > * {
  fill: var(--text-inverse-title);
}
.btn-outlined > .btn-content > .btn-content-icon-container > svg > g > path,
.btn-outlined > .btn-content > .btn-content-icon-container > svg > path,
.btn-outlined > .btn-content > .btn-content-icon-container > * {
  fill: var(--background-brand-dark);
}
.btn-filled-danger > .btn-content > .btn-content-icon-container > * {
  fill: var(--red-medium);
}
.btn-outlined-danger > .btn-content > .btn-content-icon-container > * {
  fill: var(--red-medium);
}
.btn-ghost-danger > .btn-content > .btn-content-icon-container > * {
  fill: var(--red-medium);
}
.btn-circle-sm {
  padding: var(--space-l);
}
.btn-circle-xs {
  padding: var(--space-m);
}
.btn-circle-xxs {
  padding: var(--space-s);
}
.btn-xl {
  padding: var(--space-l) var(--space-xl);
}
.btn-lg {
  padding: 10px var(--space-xl);
  font-size: var(--text-s-demibold-size);
  font-style: normal;
  line-height: var(--text-s-demibold-line-height);
  letter-spacing: var(--text-s-demibold-letter-spacing);
}
.btn-md {
  padding: var(--space-s) 20px;
}
.btn-sm {
  padding: 6px var(--space-l);
}
.btn-xs {
  padding: var(--space-xs) var(--space-m);
}
.btn-paddless {
  padding: 0;
}
.btn-filled {
  color: var(--text-inverse-title);
  border-radius: var(--radius-full);
  background: var(--background-brand-dark);
}
.btn-outlined {
  color: var(--background-brand-dark);
  border-radius: var(--radius-full);
  border: 1px solid var(--background-brand-dark);
}
.btn-ghost {
  color: var(--background-brand-dark);
  font-size: var(--text-s-demibold-size);
  font-style: normal;
  line-height: var(--text-s-demibold-line-height);
  letter-spacing: var(--text-s-demibold-letter-spacing);
}
.btn-filled-disabled {
  color: var(--text-text-disable);
  border-radius: var(--radius-full);
  background: var(--background-full-neutral-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-outlined-disabled {
  color: var(--text-text-disable);
  border-radius: var(--radius-full);
  border: 1px solid var(--background-full-neutral-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-ghost-disabled {
  color: var(--text-text-disable);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-filled-danger {
  color: var(--text-inverse-title);
  border-radius: var(--radius-full);
  background: var(--red-medium);
}
.btn-outlined-danger {
  color: var(--red-medium);
  border-radius: var(--radius-full);
  border: 1px solid var(--red-medium);
}
.btn-ghost-danger {
  color: var(--red-medium);
  font-size: var(--text-s-demibold-size);
  font-style: normal;
  line-height: var(--text-s-demibold-line-height);
  letter-spacing: var(--text-s-demibold-letter-spacing);
}
.btn-filled-danger:hover {
  background: var(--red-light);
}
.btn-outlined-danger:hover {
  color: var(--red-light);
  border: 1px solid var(--red-light);
}
.btn-ghost-danger:hover {
  color: var(--red-light);
}
.btn-filled-danger:active {
  background: var(--red-soft);
}
.btn-outlined-danger:active {
  color: var(--red-soft);
  border: 1px solid var(--red-soft);
}
.btn-ghost-danger:active {
  color: var(--red-soft);
}
.btn-filled:hover {
  background: var(--background-brand-light);
}
.btn-outlined-danger:hover .btn-content > .btn-content-icon-container > * {
  fill: var(--red-light);
}
.btn-outlined-danger:active .btn-content > .btn-content-icon-container > * {
  fill: var(--red-soft);
}
.btn-ghost-danger:hover .btn-content > .btn-content-icon-container > * {
  fill: var(--red-light);
}
.btn-ghost-danger:active .btn-content > .btn-content-icon-container > * {
  fill: var(--red-ghost);
}
.btn-outlined:hover {
  color: var(--background-brand-light);
  border: 1px solid var(--background-brand-light);
}
.btn-outlined:hover > .btn-content > .btn-content-icon-container > svg > g > path,
.btn-outlined:hover > .btn-content > .btn-content-icon-container > svg > path,
.btn-outlined:hover .btn-content > .btn-content-icon-container > * {
  fill: var(--background-brand-light);
}
.btn-ghost:hover {
  color: var(--text-link-hover);
}
.btn-ghost:hover .btn-content > .btn-content-icon-container > svg > g > path,
.btn-ghost:hover .btn-content > .btn-content-icon-container > svg > path,
.btn-ghost:hover .btn-content > .btn-content-icon-container > * {
  fill: var(--text-link-hover);
}
.btn-ghost-danger:hover .btn-content > .btn-content-icon-container > svg > g > path,
.btn-ghost-danger:hover .btn-content > .btn-content-icon-container > svg > path,
.btn-ghost-danger:hover .btn-content > .btn-content-icon-container > * {
  fill: var(--red-light);
}
.btn-ghost-danger:active .btn-content > .btn-content-icon-container > svg > g > path,
.btn-ghost-danger:active .btn-content > .btn-content-icon-container > svg > path,
.btn-ghost-danger:active .btn-content > .btn-content-icon-container > * {
  fill: var(--red-soft);
}
.btn-filled:active {
  background: var(--background-brand-medium);
}
.btn-outlined:active {
  color: var(--background-brand-medium);
  border: 1px solid var(--background-brand-medium);
}
.btn-outlined:active .btn-content > .btn-content-icon-container > svg > g > path,
.btn-outlined:active .btn-content > .btn-content-icon-container > * {
  fill: var(--background-brand-medium);
}
.btn-ghost:active {
  color: var(--text-link-pressed);
}
.btn-ghost:active .btn-content > .btn-content-icon-container > svg > g > path,
.btn-ghost:active .btn-content > .btn-content-icon-container > * {
  fill: var(--text-link-pressed);
}
/* Inputs */
.form-group-section-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
.form-group-section-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.form-group-view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  width: 100%;
  box-sizing: border-box;
}
.form-group-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  width: 100%;
  box-sizing: border-box;
}
.form-group-row-container {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.text-field-support-label {
  color: var(--text-text-tertiary);
  font-family: Pretendard;
  font-size: var(--space-m);
  font-style: normal;
  line-height: var(--space-l);
}
.text-field-label {
  font-family: 'Pretendard-Thin';
  color: var(--text-text-tertiary);
  font-size: var(--text-xs-thin-size);
  font-style: normal;
  line-height: var(--text-xs-thin-line-height);
  letter-spacing: var(--text-xs-thin-letter-spacing);
}
.text-field-label-error {
  color: var(--text-text-supporte);
}
.text-field {
  display: flex;
  height: 40px;
  padding: var(--space-s) var(--space-m);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  font-size: var(--text-s-regular-size);
  font-style: normal;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
  border-radius: var(--radius-m);
  cursor: text;
  background-color: var(--background-full-neutral-primary);
  border: 1px solid var(--border-primary-default);
  caret-color: var(--border-brand-default);
  box-sizing: border-box;
  color: var(--text-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-field:-internal-autofill-selected {
  background-color: var(--background-full-neutral-primary);
}
.text-field::-webkit-outer-spin-button,
.text-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.text-field[type=number] {
  -moz-appearance: textfield;
}
.text-field-round {
  border-radius: var(--radius-full);
}
.text-field::placeholder {
  color: var(--text-text-disable);
}
.text-field:focus {
  color: var(--text-text-primary);
  border: 1px solid var(--border-brand-default);
  background: var(--background-full-neutral-secondary);
}
.text-field-disabled {
  color: var(--text-text-disable);
  background: var(--background-full-neutral-secondary);
}
.text-field-error {
  border: 1px solid var(--border-supporte-default);
  background: var(--background-full-neutral-primary);
}
.dropdown {
  margin: 0;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  padding: var(--space-s) var(--space-m);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-primary-default);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url(./images/chevron-small-down.svg) var(--background-full-neutral-primary) no-repeat 95% 50%;
  color: var(--text-text-primary);
}
.dropdown:hover {
  border: 1px solid var(--action-or-selection-color);
}
.dropdown:active {
  background: url(./images/chevron-small-down.svg) var(--background-full-neutral-primary) no-repeat 95% 50%;
}
.dropdown:focus {
  color: var(--text-text-primary);
  border: 1px solid var(--action-or-selection-color);
  background: url(./images/chevron-small-down.svg) var(--background-full-neutral-secondary) no-repeat 95% 50%;
}
.dropdown-empty {
  color: var(--text-text-disable);
  border: 1px solid var(--border-primary-default);
}
.dropdown-filled {
  color: var(--text-text-primary);
  border: 1px solid var(--border-primary-default);
}
.dropdown-disabled {
  color: var(--text-text-disable);
  background: var(--background-full-neutral-secondary);
}
.dropdown-error {
  border: 1px solid var(--border-supporte-default);
  background: var(--background-full-neutral-primary);
}
/* Typograph */
.heading-default-static {
  color: var(--neutral-gunmetal);
}
.heading-inverse-static {
  color: var(--neutral-snow-white-snow-white);
}
.heading-default-color {
  color: var(--text-text-title);
}
.heading-inverse {
  color: var(--text-inverse-title);
}
.heading-5xl {
  font-size: var(--heading-5xl-size);
  font-style: normal;
  line-height: var(--heading-5xl-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-4xl {
  font-size: var(--heading-4xl-size);
  font-style: normal;
  line-height: var(--heading-4xl-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-3xl {
  font-size: var(--heading-3xl-size);
  font-style: normal;
  line-height: var(--heading-3xl-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-2xl {
  font-size: var(--heading-2xl-size);
  font-style: normal;
  line-height: var(--heading-2xl-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-xl {
  font-size: var(--heading-xl-size);
  font-style: normal;
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-l {
  font-size: var(--heading-l-size);
  font-style: normal;
  line-height: var(--heading-l-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-m {
  font-size: var(--heading-s-size);
  font-style: normal;
  line-height: var(--heading-s-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-s {
  font-size: var(--heading-xs-size);
  font-style: normal;
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-xs {
  font-size: var(--heading-2xs-size);
  font-style: normal;
  line-height: var(--heading-2xs-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.heading-2xs {
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.text-align-left {
  text-align: left;
}
.text-link {
  color: var(--text-link-default);
}
.text-default-static {
  color: var(--neutral-gunmetal);
}
.text-inverse-static {
  color: var(--neutral-snow-white-snow-white);
}
.text-default {
  color: var(--text-text-primary);
}
.text-secondary {
  color: var(--text-text-secondary);
}
.text-tertiary {
  color: var(--text-text-tertiary);
}
.text-supporte {
  color: var(--text-text-supporte);
}
.text-disabled {
  color: var(--text-text-disable);
}
.text-inverse-primary {
  color: var(--text-inverse-primary);
}
.text-inverse-secondary {
  color: var(--text-inverse-secondary);
}
.text-inverse-tertiary {
  color: var(--text-inverse-tertiary);
}
.text-inverse-disable {
  color: var(--text-inverse-disable);
}
.text-success {
  color: var(--folklore-medium);
}
.text-danger {
  color: var(--red-medium);
}
.text-xl-demibold {
  font-family: 'Pretendard-Demibold';
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}
.text-l-demibold {
  font-family: 'Pretendard-Demibold';
  font-size: var(--text-s-demibold-size);
  font-style: normal;
  line-height: var(--text-s-demibold-line-height);
  letter-spacing: var(--text-s-demibold-letter-spacing);
}
.text-m-demibold {
  font-family: 'Pretendard-Demibold';
  font-size: var(--text-xs-demibold-size);
  font-style: normal;
  line-height: var(--text-xs-demibold-line-height);
  letter-spacing: var(--text-xs-demibold-letter-spacing);
}
.text-s-demibold {
  font-family: 'Pretendard-Demibold';
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}
.text-xl-regular {
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}
.text-l-regular {
  font-size: var(--text-s-regular-size);
  font-style: normal;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
}
.text-m-regular {
  font-size: var(--text-xs-regular-size);
  font-style: normal;
  line-height: var(--text-xs-regular-line-height);
  letter-spacing: var(--text-xs-demibold-letter-spacing);
}
.text-s-regular {
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
}
.text-xl-thin {
  font-family: 'Pretendard-Thin';
  font-size: 20px;
  font-style: normal;
  font-weight: 200;
  line-height: 28px;
}
.text-l-thin {
  font-family: 'Pretendard-Thin';
  font-size: var(--text-s-thin-size);
  font-style: normal;
  font-weight: 200;
  line-height: var(--text-s-thin-line-height);
  letter-spacing: var(--text-s-thin-letter-spacing);
}
.text-m-thin {
  font-family: 'Pretendard-Thin';
  font-size: var(--text-xs-thin-size);
  font-style: normal;
  font-weight: 200;
  line-height: var(--text-xs-thin-line-height);
  letter-spacing: var(--text-xs-thin-letter-spacing);
}
.text-s-thin {
  font-family: 'Pretendard-Thin';
  font-size: var(--text-2xs-thin-size);
  font-style: normal;
  font-weight: 200;
  line-height: var(--text-2xs-thin-line-height);
}
.icon-default > svg > g > path,
.icon-default > svg > path,
.icon-default > * {
  fill: var(--text-text-primary);
}
/* Tables */
.table-container {
  width: 100%;
  padding: 0 0 var(--space-3xl) 0;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .table-container {
    background-color: transparent;
    padding: 0;
  }
}
.table-container > table {
  width: 100%;
  box-sizing: border-box;
}
.table-row {
  cursor: pointer;
}
@media (max-width: 800px) {
  .table-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    padding: var(--space-l) 0;
  }
}
.table-row,
.table-header-row {
  border-bottom: 1px solid var(--border-primary-default);
}
.table-row:last-child {
  border-bottom: none;
}
.table-cell {
  padding: var(--space-l);
}
@media (max-width: 800px) {
  .table-cell {
    padding: 0;
  }
}
@media (min-width: 800px) {
  .table-cell:first-child {
    padding: var(--space-l) var(--space-l) var(--space-l) 0;
  }
}
@media (min-width: 800px) {
  .table-cell:last-child {
    padding: var(--space-l) 0 var(--space-l) var(--space-l);
  }
}
@media (max-width: 800px) {
  .table-header-row {
    display: none;
  }
}
@media (max-width: 800px) {
  .table-row td {
    display: flex;
    border: none;
    align-items: start;
    justify-content: space-between;
  }
}
@media (max-width: 800px) {
  .table-row td::before {
    content: attr(data-cell);
    color: var(--text-color);
    font-family: 'Pretendard-Thin';
    font-size: var(--text-xs-regular-size);
    line-height: var(--text-xs-regular-line-height);
  }
}
@media (max-width: 800px) {
  .table-cell-loading {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    padding: var(--space-l) 0;
  }
}
@media (max-width: 800px) {
  .table-row .table-cell-loading::before {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeholderShimmer;
    -webkit-animation-timing-function: linear;
    width: 100px;
    padding: 10px 0;
  }
}
@media (max-width: 800px) {
  .table-cell-content {
    display: flex !important;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-end !important;
    align-items: end !important;
    text-align: end;
    -webkit-justify-content: flex-end;
    -webkit-align-items: stretch;
  }
}
/* Containers */
.card-sm {
  width: 100%;
  padding: var(--space-xl);
  border-radius: var(--radius-m);
  background-color: var(--menu-background-color);
  box-sizing: border-box;
}
.card-container {
  width: 100%;
  padding: var(--space-3xl);
  border-radius: var(--radius-l);
  background-color: var(--menu-background-color);
  box-sizing: border-box;
}
@media (max-width: 1320px) {
  .card-container {
    padding: var(--space-xl);
  }
}
.item-stretch {
  width: 100% !important;
  box-sizing: border-box;
}
.text-regular {
  font-family: 'Pretendard-Regular';
}
.xl-container {
  padding: var(--space-xl);
}
.selection-box-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  align-self: stretch;
}
.selection-box {
  cursor: pointer;
  display: flex;
  padding: var(--space-xl) var(--space-xl);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xs);
  align-self: stretch;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-primary-default);
}
.selection-box:hover {
  border: 1px solid var(--border-brand-pressed);
}
.selection-box-active {
  border: 1px solid var(--border-brand-pressed);
}
.selection-box-heading {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.selection-box-heading-icon {
  width: 20px;
}
.selection-box-heading > .selection-box-heading-icon > svg > g > path,
.selection-box-heading > .selection-box-heading-icon > svg > path,
.selection-box-heading > .selection-box-heading-icon > * {
  fill: var(--text-text-primary);
}
.divider-dashed {
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed var(--border-primary-default);
}
.divider-horizontal {
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  background-color: var(--border-primary-default);
}
.divider-sm-vertical {
  width: 1px;
  height: var(--space-l);
  box-sizing: border-box;
  border: 1px solid var(--text-text-tertiary);
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-primary-default);
  background: var(--background-full-neutral-tertiary);
  border-radius: var(--radius-full);
  color: var(--background-full-neutral-inverse);
  text-align: center;
  font-family: 'Pretendard-Thin';
  font-size: var(--text-s-thin-size);
  font-style: normal;
  font-weight: 200;
  line-height: var(--text-s-thin-line-height);
  letter-spacing: var(--text-s-thin-letter-spacing);
}
.avatar-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-primary-default);
  background: var(--background-full-neutral-tertiary);
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  color: var(--background-full-neutral-inverse);
  text-align: center;
  font-family: 'Pretendard-Thin';
  font-size: var(--text-s-thin-size);
  font-style: normal;
  font-weight: 200;
  line-height: var(--text-s-thin-line-height);
  letter-spacing: var(--text-s-thin-letter-spacing);
}
.avatar-md {
  width: var(--space-4xl);
  height: var(--space-4xl);
}
.divider-vertical {
  width: 1px;
  background: var(--line-color);
}
.margin-top-medium {
  margin-top: var(--space-m);
}
.margin-top-large {
  margin-top: var(--space-l);
}
.margin-top-6xl {
  margin-top: var(--space-6xl);
}
.margin-bottom-medium {
  margin-bottom: var(--space-m);
}
.margin-bottom-large {
  margin-bottom: var(--space-l);
}
.margin-bottom-6xl {
  margin-bottom: var(--space-6xl);
}
.list-tag-count,
.list-tag {
  padding: var(--space-s);
  gap: var(--space-s);
  border-radius: var(--space-s);
  border: 1px solid var(--border-primary-default);
  background: transparent;
}
.list-tag {
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-tag-count {
  width: fit-content;
}
/* Loading */
.shimmer-xsmall,
.shimmer-small,
.shimmer-medium,
.shimmer-large {
  display: block;
  padding: var(--space-m) 0;
  margin-bottom: var(--space-s);
}
.shimmer-xsmall {
  width: 50px;
}
.shimmer-small {
  width: 100px;
}
.shimmer-medium {
  width: 250px;
}
.shimmer-large {
  width: 300px;
}
.text-field-password {
  display: flex;
  height: 40px;
  padding: 0 12px;
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  font-style: normal;
  letter-spacing: var(--text-s-regular-letter-spacing);
  border-radius: var(--radius-m);
  cursor: text;
  background-color: var(--background-full-neutral-primary);
  border: 1px solid var(--border-primary-default);
  caret-color: var(--border-brand-default);
  box-sizing: border-box;
}
.text-field-password:focus-within {
  color: var(--text-text-primary);
  border: 1px solid var(--border-brand-default);
  background: var(--background-full-neutral-secondary);
}
.text-field-password-input:focus {
  background: var(--background-full-neutral-secondary);
}
.text-field-password-input {
  background-color: var(--background-full-neutral-primary);
  font-size: var(--text-s-regular-size);
  line-height: var(--text-s-regular-line-height);
  color: var(--text-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  flex: 1 0 0;
}
.text-field-password-icon > svg > g > path {
  fill: var(--title-color);
}
.attachment-upload-container {
  padding: 16px;
  border: 1px solid var(--border-color);
  height: 32px;
  border-radius: 4px;
  display: flex;
  cursor: pointer;
  gap: 8px;
}
.attachment-upload-icon-container {
  background-color: var(--line-color);
  border-radius: 4px;
  padding: 8px;
}
.attachment-upload-label-container {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

html,
body {
  font-family: 'Pretendard';
  font-weight: normal;
  position: relative;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background-color: var(--view-background-color);
}
#container {
  display: initial;
}
.button {
  height: 44px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--view-background-color);
  background-color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
  text-align: center;
  line-height: 44px;
  padding: 0 16px;
  user-select: none;
  border-radius: 100px;
}
.button-border {
  height: 44px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 100px;
  color: var(--action-or-selection-color);
  background-color: var(--view-background-color);
  border: 1px solid var(--action-or-selection-color);
  text-align: center;
  line-height: 44px;
  padding: 0 16px;
  user-select: none;
}
.button-bordeless {
  height: 44px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--action-or-selection-color);
  background-color: var(--view-background-color);
  text-align: center;
  line-height: 44px;
  padding: 0 16px;
}
.button-pointer {
  cursor: pointer;
}
.button-pointer:hover {
  color: var(--action-or-selection-color) !important;
}
.input {
  font-family: 'Pretendard';
  color: var(--input-color);
  background-color: var(--view-background-color);
  border: 1px solid var(--border-color);
  font-size: 16px;
  width: 100%;
  margin: 2px 0 5px;
  height: 44px;
  line-height: normal;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 10px;
  margin-top: 5px;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
}
.input:focus {
  outline: none;
  border: 2px solid var(--action-or-selection-color);
}
.hidden {
  display: none;
}
.text-title-color {
  color: var(--title-color);
}
.text-default-color {
  color: var(--text-color);
}
.text-title {
  font-size: 60px;
  font-weight: 600;
}
@media (max-width: 700px) {
  .text-title {
    font-size: 48px;
  }
}
.text-title-medium {
  font-size: 32px;
  font-weight: 600;
}
.text-title-small {
  font-size: 22px;
  font-weight: 400;
}
.text-large {
  font-size: 18px;
  font-weight: 400;
}
.text-medium {
  font-size: 16px;
  font-weight: 400;
}
.text-small {
  font-size: 14px;
  font-weight: 200;
}
.text-x-small {
  font-size: 12px;
  font-weight: 200;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.text-align-left {
  text-align: left;
}
.text-no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-semi-bold {
  font-weight: 600;
}
.form {
  margin-bottom: 10px;
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
}
::-webkit-input-placeholder {
  color: var(--border-color);
}
::-moz-placeholder {
  color: var(--border-color);
}
:-ms-input-placeholder {
  color: var(--border-color);
}
::-ms-input-placeholder {
  color: var(--border-color);
}
::placeholder {
  font-family: "Pretendard-Thin";
  color: var(--border-color);
}
.selected {
  color: var(--action-or-selection-color) !important;
}
.cropper-view-box {
  outline: 1px solid var(--action-or-selection-color) !important;
  outline-color: var(--action-or-selection-color) !important;
}
.cropper-point {
  background-color: var(--action-or-selection-color) !important;
}
:focus {
  outline: transparent;
}
.flex-box {
  display: flex;
}
input[type="date"] {
  position: relative;
  padding: 4px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}
input[type="date"]:before {
  color: transparent;
  background: none;
  display: block;
  font-family: 'FontAwesome';
  content: '\f073';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 12px;
  right: 6px;
  color: var(--action-or-selection-color);
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  -webkit-border-horizontal-spacing: 0px;
  -webkit-border-vertical-spacing: 0px;
}
.warning {
  color: var(--dark-yellow);
}
.sidebar-header {
  padding-left: 15px;
  display: none;
  background-color: var(--menu-background-color);
  border-bottom: 1px solid var(--line-color);
  position: fixed;
  align-items: center;
  z-index: 14;
}
@media (max-width: 1000px) {
  .sidebar-header {
    width: 100%;
    height: 50px;
    position: fixed;
    display: flex;
    justify-content: space-between;
    z-index: 22;
  }
}
.sidebar-header-button {
  font-size: 24px;
  min-width: 24px;
  color: var(--action-or-selection-color);
}
.filter-tag {
  background-color: var(--action-or-selection-color);
  color: var(--view-background-color);
  width: fit-content;
  margin-bottom: 4px;
  margin-top: 4px;
  padding: 6px 8px 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-right: 4px;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  margin-bottom: 40px;
  align-items: center;
}
@media (max-width: 700px) {
  .filter-tag {
    margin-bottom: 0px;
  }
}
@media (max-width: 700px) {
  table {
    table-layout: fixed !important;
  }
}
#ui-datepicker-div {
  background: var(--view-background-color);
}
.ui-widget-content {
  color: var(--title-color);
}
.ui-widget-header {
  border: 1px solid var(--border-color);
  background: var(--menu-background-color);
  color: var(--title-color);
}
/* Selected date color  */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--border-color);
  background: var(--action-or-selection-color);
  color: var(--title-color);
}
/* Set default date color */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid var(--border-color);
  background: var(--view-background-color);
  color: var(--title-color);
}
/* Current date color */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--border-color);
  background: var(--menu-background-color);
  color: var(--title-color);
}
/* Selected date color */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid var(--border-color);
  background: var(--action-or-selection-color);
  font-weight: normal;
  color: var(--title-color) !important;
}
.input:disabled {
  background-color: -internal-light-dark(rgba(239,239,239,0.2), rgba(59,59,59,0.2));
  border-color: rgba(118,118,118,0.2);
  color: var(--border-color);
}
select:disabled {
  background-color: -internal-light-dark(rgba(239,239,239,0.2), rgba(59,59,59,0.2));
  border-color: rgba(118,118,118,0.2);
  color: var(--border-color);
}
.text-primary {
  color: var(--action-or-selection-color) !important;
}
.clockpicker-canvas-bearing,
.clockpicker-canvas-fg {
  stroke: none;
  fill: var(--action-or-selection-color) !important;
}
.clockpicker-canvas line {
  stroke: var(--action-or-selection-color) !important;
  stroke-width: 1;
  stroke-linecap: round;
}
.clockpicker-canvas-bg-trans {
  fill: var(--action-or-selection-color) !important;
  opacity: 0.6;
}
.clockpicker-canvas-bg {
  stroke: none;
  fill: var(--action-or-selection-color) !important;
  color: var(--text-color) !important;
  opacity: 0.2;
}
.clockpicker-tick.active,
.clockpicker-tick:hover {
  background-color: var(--action-or-selection-color) !important;
  color: var(--line-color);
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
a:-webkit-any-link {
  color: var(--action-or-selection-color) !important;
}
.small-margin-top {
  margin-top: 4px;
}
.small-margin-bottom {
  margin-bottom: 4px;
}
.medium-margin-bottom {
  margin-bottom: 8px;
}
.large-margin-bottom {
  margin-bottom: 12px;
}
.xlarge-margin-bottom {
  margin-bottom: 16px;
}
.xxlarge-margin-bottom {
  margin-bottom: 24px;
}
.xxxlarge-margin-bottom {
  margin-bottom: 40px;
}
.xlarge-margin-right {
  margin-right: 16px;
}
.xlarge-margin-left {
  margin-left: 16px;
}
.xxxlarge-margin-left {
  margin-left: 40px;
}
.small-margin-top {
  margin-top: 4px;
}
.medium-margin-top {
  margin-top: 8px;
}
.xlarge-margin-top {
  margin-top: 16px;
}
.xxxlarge-margin-top {
  margin-top: 40px;
}
.log-header {
  display: block;
  width: 116px;
  height: 17px;
  margin-bottom: 4px;
}
.log-item {
  display: block;
  width: 260px;
  height: 17px;
}
option {
  background-color: var(--view-background-color);
}
space {
  margin-bottom: 16px;
}
.toggle {
  display: inline-block;
  height: 22px;
  position: relative;
  width: 40px;
}
.toggle input {
  opacity: 0;
  height: 0;
  width: 0;
}
.toggle input:checked + .slider {
  background-color: var(--action-or-selection-color);
}
.toggle input:checked + .slider:before {
  transform: translateX(18px);
}
.slider {
  background-color: var(--border-color);
  bottom: 0;
  cursor: pointer;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
  transition: 0.4s;
  border-radius: 35px;
}
.slider:before {
  background-color: var(--view-background-color);
  bottom: 3px;
  content: '';
  height: 16px;
  left: 3px;
  position: absolute;
  transition: 0.4s;
  width: 16px;
  border-radius: 50%;
}
:root {
  --modal-backgroud-z-index: 23;
}
.print {
  display: none !important;
}
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
  .print {
    display: block !important;
  }
  thead {
    display: table-header-group;
  }
}
@media print {
  #menu-mobile,
  #dashboard-menu,
  #dashboard-header,
  #dashboard-sidebar {
    display: none !important;
  }
}
@media print {
  table {
    page-break-after: auto;
    break-after: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
    break-inside: avoid;
    break-after: auto;
  }
  td {
    page-break-inside: avoid;
    page-break-after: auto;
    break-inside: avoid;
    break-after: auto;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  div {
    page-break-inside: avoid;
  }
  .pagebreak {
    page-break-before: always;
    break-before: always;
  }
  html,
  body {
    size: A4 !important;
  }
}
@media print {
  .logo-icon-print {
    margin-left: 12px;
    height: 40px;
    width: 160px;
    margin-bottom: 52px;
  }
}
.font-awesome-icon {
  font-family: 'Font Awesome 6 Free';
  font-size: 16px;
  font-weight: 900;
}
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}
.transparent {
  color: transparent;
}
.secondary-action-button {
  color: var(--action-or-selection-color);
  background-color: transparent;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  padding: 0 16px;
  text-align: center;
  margin-bottom: 10px;
  border: unset;
  cursor: pointer;
  border-radius: 4px;
}
.secondary-action-button:active {
  opacity: 0.5;
}
video {
  clip-path: fill-box;
}
video:focus {
  outline: none;
  clip-path: fill-box;
}
.padding-top-xl {
  padding-top: var(--space-xl);
}
.padding-top-6xl {
  padding-top: var(--space-6xl);
}
.padding-bottom-8xl {
  padding-bottom: var(--space-8xl);
}
.padding-horizontal-15xl {
  padding-left: var(--space-15xl);
  padding-right: var(--space-15xl);
}
.gap-s {
  gap: var(--space-s);
}
.gap-m {
  gap: var(--space-m);
}
.gap-l {
  gap: var(--space-l);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.gap-3xl {
  gap: var(--space-3xl);
}
.gap-5xl {
  gap: var(--space-5xl);
}
.align-items-center {
  align-items: center;
}
.align-items-end {
  align-items: flex-end;
}
.separator-line {
  height: 1px;
  width: 100%;
  background: var(--border-color);
}
.full-width {
  width: 100%;
}
.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.padding-l {
  padding: var(--space-l);
}
.padding-xl {
  padding: var(--space-xl);
}
.border-radius-m {
  border-radius: var(--space-m);
}
@media (max-width: 500px) {
  .mobile-flex-column {
    flex-direction: column;
  }
}
@media (max-width: 500px) {
  .mobile-flex-column-reverse {
    flex-direction: column-reverse;
  }
}
@media (max-width: 500px) {
  .mobile-flex-start {
    align-items: flex-start;
  }
}
@media (max-width: 500px) {
  .mobile-full-width {
    width: 100%;
  }
}
@media (max-width: 500px) {
  .mobile-gap-m {
    gap: var(--space-m);
  }
}
.align-center {
  text-align: center;
}
.body-caption-regular {
  font-size: 10px;
  font-weight: 400;
  line-height: 18px;
}
.body-xs-title {
  font-family: "Pretendard-Demibold";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}
.body-sm-title {
  font-family: "Pretendard-Demibold";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
.body-md-title {
  font-family: "Pretendard-Demibold";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}
.body-sm-thin {
  font-family: "Pretendard-Thin";
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: 22px;
}
.body-md-thin {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  line-height: 24px;
}
.body-xs-regular {
  font-family: "Pretendard";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.body-sm-regular {
  font-family: "Pretendard";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.body-md-regular {
  font-family: "Pretendard";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.highlight-h6 {
  font-family: "Pretendard-Demibold";
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
}
.highlight-h5 {
  font-family: "Pretendard-Demibold";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 48px;
}
.title-group {
  font-family: "Pretendard-Demibold";
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}
@media (max-width: 600px) {
  .title-group {
    font-size: 20px;
    line-height: 28px;
  }
}
.title-modal {
  font-family: 'Pretendard-Demibold';
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
@media (max-width: 750px) {
  .table-cell-responsive-hide {
    display: none !important;
  }
}
.table-cell-responsive-show {
  display: none;
}
@media (max-width: 750px) {
  .table-cell-responsive-show {
    display: table-cell !important;
  }
}
@media (max-width: 750px) {
  .table-view-responsive {
    width: 100% !important;
  }
}
.title-section {
  font-family: 'Pretendard-Demibold';
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 40px;
}
@media (max-width: 768px) {
  .title-section {
    font-size: 28px;
    line-height: 36px;
  }
}
.body-md-thin {
  font-family: 'Pretendard-Thin';
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  line-height: 24px;
}
.margin-top-xs {
  margin-top: var(--space-xs);
}
.input-container {
  display: flex;
  align-items: center;
  position: relative;
}
.title-modal {
  font-family: 'Pretendard-Demibold';
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
.align-self-stretch {
  align-self: stretch;
}
.highlight-h3 {
  font-family: 'Pretendard-Demibold';
  font-size: 56px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
}
.body-lg-thin {
  font-family: 'Pretendard-Thin';
  font-size: 20px;
  font-style: normal;
  font-weight: 200;
  line-height: 28px;
}
.align-items-flex-end {
  align-items: flex-end;
}

:root {
  --light: var(--midnights-light);
  --medium: var(--midnights-medium);
  --soft: var(--midnights-soft);
  --dark: var(--midnights-dark);
}

:root {
  --unit-2: 2px;
  --unit-4: 4px;
  --unit-8: 8px;
  --unit-10: 10px;
  --unit-12: 12px;
  --unit-14: 14px;
  --unit-16: 16px;
  --unit-18: 18px;
  --unit-20: 20px;
  --unit-24: 24px;
  --unit-26: 26px;
  --unit-28: 28px;
  --unit-32: 32px;
  --unit-36: 36px;
  --unit-40: 40px;
  --unit-56: 56px;
  --unit-64: 64px;
  --unit-72: 72px;
  --unit-80: 80px;
  --unit-48: 48px;
  --unit-88: 88px;
  --unit-96: 96px;
  --unit-104: 104px;
  --unit-112: 112px;
  --unit-120: 120px;
  --unit-128: 128px;
  --unit-134: 134px;
  --unit-142: 142px;
}

:root {
  --width-xl: 8px;
  --width-l: 4px;
  --width-m: 2px;
  --width-s: 1.5px;
  --width-xs: 1px;
}

:root {
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 56px;
  --space-6xl: 64px;
  --space-7xl: 72px;
  --space-8xl: 80px;
  --space-9xl: 88px;
  --space-10xl: 96px;
  --space-11xl: 104px;
  --space-12xl: 108px;
  --space-13xl: 112px;
  --space-14xl: 116px;
  --space-15xl: 124px;
  --space-16xl: 132px;
  --space-17xl: 140px;
  --space-18xl: 148px;
}

:root {
  --tsv-light: #e1f5fe;
  --tsv-soft: #81d4fa;
  --tsv-medium: #29b6f6;
  --tsv-dark: #0277bd;
  --evermore-light: #fff3e0;
  --evermore-soft: #ffcc80;
  --evermore-medium: #ffa726;
  --evermore-dark: #ef6c00;
  --fearless-light: #fffde7;
  --fearless-soft: #fff59d;
  --fearless-medium: #fdd835;
  --fearless-dark: #f9a825;
  --folklore-light: #e8f5e9;
  --folklore-soft: #a5d6a7;
  --folklore-medium: #66bb6a;
  --folklore-dark: #2e7d32;
  --lover-light: #fce4ec;
  --lover-soft: #f48fb1;
  --lover-medium: #ec407a;
  --lover-dark: #ad1457;
  --midnights-light: #e8eaf6;
  --midnights-soft: #9fa8da;
  --midnights-medium: #5c6bc0;
  --midnights-dark: #283593;
  --neutral-gunmetal: #1b2733;
  --red-light: #ffebee;
  --red-soft: #ef9a9a;
  --red-medium: #ef5350;
  --red-dark: #c62828;
  --reputation-light: #efebe9;
  --reputation-soft: #bcaaa4;
  --reputation-medium: #8d6e63;
  --reputation-dark: #4e342e;
  --speak-now-light: #f3e5f5;
  --speak-now-soft: #ce93d8;
  --speak-now-medium: #ab47bc;
  --speak-now-dark: #6a1b9a;
  --ttpd-light: #e0f2f1;
  --ttpd-soft: #80cbc4;
  --ttpd-medium: #26a69a;
  --ttpd-dark: #00695c;
  --neutral-dark-gray-default: #3e3e40;
  --neutral-dark-gray-90: rgba(62,62,64,0.902);
  --neutral-dark-gray-80: rgba(62,62,64,0.8);
  --neutral-dark-gray-50: rgba(62,62,64,0.502);
  --neutral-dark-gray-20: rgba(62,62,64,0.2);
  --neutral-dark-gray-10: rgba(62,62,64,0.102);
  --neutral-light-gray-default: #f9f9fc;
  --neutral-light-gray-90: rgba(249,249,252,0.902);
  --neutral-light-gray-80: rgba(249,249,252,0.8);
  --neutral-light-gray-50: rgba(249,249,252,0.502);
  --neutral-light-gray-20: rgba(249,249,252,0.2);
  --neutral-light-gray-10: rgba(249,249,252,0.102);
  --neutral-olaf-default: #f3f3f6;
  --neutral-olaf-90: rgba(243,243,246,0.902);
  --neutral-olaf-80: rgba(243,243,246,0.8);
  --neutral-olaf-50: rgba(243,243,246,0.502);
  --neutral-olaf-20: rgba(243,243,246,0.2);
  --neutral-olaf-10: rgba(243,243,246,0.102);
  --neutral-onixy-default: #707072;
  --neutral-onixy-90: rgba(112,112,114,0.902);
  --neutral-onixy-80: rgba(112,112,114,0.8);
  --neutral-onixy-50: rgba(112,112,114,0.502);
  --neutral-onixy-20: rgba(112,112,114,0.2);
  --neutral-onixy-10: rgba(112,112,114,0.102);
  --neutral-silver-default: #dcdbde;
  --neutral-silver-90: rgba(220,219,222,0.902);
  --neutral-silver-80: rgba(220,219,222,0.8);
  --neutral-silver-50: rgba(220,219,222,0.502);
  --neutral-silver-20: rgba(220,219,222,0.2);
  --neutral-silver-10: rgba(220,219,222,0.102);
  --neutral-snow-white-snow-white: #fff;
  --neutral-snow-white-snow-white-90: rgba(255,255,255,0.902);
  --neutral-snow-white-snow-white-80: rgba(255,255,255,0.8);
  --neutral-snow-white-snow-white-50: rgba(255,255,255,0.502);
  --neutral-snow-white-snow-white-20: rgba(255,255,255,0.2);
  --neutral-snow-white-snow-white-10: rgba(255,255,255,0.102);
  --neutral-space-gray-default: #99999b;
  --neutral-space-gray-90: rgba(153,153,155,0.902);
  --neutral-space-gray-80: rgba(153,153,155,0.8);
  --neutral-space-gray-50: rgba(153,153,155,0.502);
  --neutral-space-gray-20: rgba(153,153,155,0.2);
  --neutral-space-gray-10: rgba(153,153,155,0.102);
  --neutral-universe-default: #1d1d1f;
  --neutral-universe-90: rgba(29,29,31,0.902);
  --neutral-universe-80: rgba(29,29,31,0.8);
  --neutral-universe-50: rgba(29,29,31,0.502);
  --neutral-universe-20: rgba(29,29,31,0.2);
  --neutral-universe-10: rgba(29,29,31,0.102);
/* Semantics */
  --text-link-default: var(--brand-dark);
  --text-link-hover: var(--brand-light);
  --text-link-pressed: var(--brand-medium);
  --text-text-supporte: var(--medium);
  --text-text-supporte-with-background: var(--dark);
}

:root {
  --light: var(--fearless-light);
  --medium: var(--fearless-medium);
  --soft: var(--fearless-soft);
  --dark: var(--fearless-dark);
}

:root {
  --radius-circle: 50px;
  --radius-full: 999px;
  --radius-l: 16px;
  --radius-m: 12px;
  --radius-s: 8px;
  --radius-xs: 4px;
}

:root {
  --light: var(--red-light);
  --medium: var(--red-medium);
  --soft: var(--red-soft);
  --dark: var(--red-dark);
}

:root {
  --light: var(--folklore-light);
  --medium: var(--folklore-medium);
  --soft: var(--folklore-soft);
  --dark: var(--folklore-dark);
}

:root {
  --letter-spacing-xs: -1px;
  --letter-spacing-s: -0.5px;
  --letter-spacing-none: 0px;
  --line-height-xs: var(--unit-14);
  --line-height-s: var(--unit-16);
  --line-height-m: var(--unit-20);
  --line-height-l: var(--unit-24);
  --line-height-xl: var(--unit-26);
  --line-height-2xl: var(--unit-28);
  --line-height-3xl: var(--unit-32);
  --line-height-4xl: var(--unit-36);
  --line-height-5xl: var(--unit-40);
  --line-height-6xl: var(--unit-48);
  --line-height-7xl: var(--unit-56);
  --line-height-8xl: var(--unit-64);
  --line-height-9xl: var(--unit-72);
  --line-height-10xl: var(--unit-80);
  --size-xs: var(--unit-10);
  --size-s: var(--unit-12);
  --size-m: var(--unit-14);
  --size-l: var(--unit-16);
  --size-xl: var(--unit-18);
  --size-2xl: var(--unit-20);
  --size-3xl: var(--unit-24);
  --size-4xl: var(--unit-28);
  --size-5xl: var(--unit-32);
  --size-6xl: var(--unit-40);
  --size-7xl: var(--unit-48);
  --size-8xl: var(--unit-56);
  --size-9xl: var(--unit-64);
  --size-10xl: var(--unit-72);
/* Desktop */
  --breakpoint: var(--breakpoint-xl);
  --heading-xs-size: var(--size-2xl);
  --heading-xs-line-height: var(--line-height-2xl);
  --heading-xs-letter-spacing: var(--letter-spacing-none);
  --heading-2xs-size: var(--size-xl);
  --heading-2xs-line-height: var(--line-height-xl);
  --heading-2xs-letter-spacing: var(--letter-spacing-none);
  --heading-s-size: var(--size-3xl);
  --heading-s-line-height: var(--line-height-3xl);
  --heading-s-letter-spacing: var(--letter-spacing-none);
  --heading-m-size: var(--size-4xl);
  --heading-m-line-height: var(--line-height-4xl);
  --heading-m-letter-spacing: var(--letter-spacing-none);
  --heading-l-size: var(--size-5xl);
  --heading-l-line-height: var(--line-height-5xl);
  --heading-l-letter-spacing: var(--letter-spacing-none);
  --heading-xl-size: var(--size-6xl);
  --heading-xl-line-height: var(--line-height-6xl);
  --heading-xl-letter-spacing: var(--letter-spacing-none);
  --heading-2xl-size: var(--size-7xl);
  --heading-2xl-line-height: var(--line-height-7xl);
  --heading-2xl-letter-spacing: var(--letter-spacing-none);
  --heading-3xl-size: var(--size-8xl);
  --heading-3xl-line-height: var(--line-height-8xl);
  --heading-3xl-letter-spacing: var(--letter-spacing-none);
  --heading-4xl-size: var(--size-9xl);
  --heading-4xl-line-height: var(--line-height-9xl);
  --heading-4xl-letter-spacing: var(--letter-spacing-none);
  --heading-5xl-size: var(--size-10xl);
  --heading-5xl-line-height: var(--line-height-10xl);
  --heading-5xl-letter-spacing: var(--letter-spacing-none);
  --text-xs-demibold-size: var(--size-m);
  --text-xs-demibold-line-height: var(--line-height-m);
  --text-xs-demibold-letter-spacing: var(--letter-spacing-none);
  --text-xs-regular-size: var(--size-m);
  --text-xs-regular-line-height: var(--line-height-m);
  --text-xs-regular-letter-spacing: var(--letter-spacing-none);
  --text-xs-thin-size: var(--size-m);
  --text-xs-thin-line-height: var(--line-height-m);
  --text-xs-thin-letter-spacing: var(--letter-spacing-none);
  --text-s-demibold-size: var(--size-l);
  --text-s-demibold-line-height: var(--line-height-l);
  --text-s-demibold-letter-spacing: var(--letter-spacing-none);
  --text-s-regular-size: var(--size-l);
  --text-s-regular-line-height: var(--line-height-l);
  --text-s-regular-letter-spacing: var(--letter-spacing-none);
  --text-s-thin-size: var(--size-l);
  --text-s-thin-line-height: var(--line-height-l);
  --text-s-thin-letter-spacing: var(--letter-spacing-none);
  --text-2xs-demibold-size: var(--size-s);
  --text-2xs-demibold-line-height: var(--line-height-s);
  --text-2xs-demibold-letter-spacing: var(--letter-spacing-none);
  --text-2xs-regular-size: var(--size-s);
  --text-2xs-regular-line-height: var(--line-height-s);
  --text-2xs-regular-letter-spacing: var(--letter-spacing-none);
  --text-2xs-thin-size: var(--size-s);
  --text-2xs-thin-line-height: var(--line-height-s);
  --text-2xs-thin-letter-spacing: var(--letter-spacing-none);
  --text-m-demibold-size: var(--size-xl);
  --text-m-demibold-line-height: var(--line-height-xl);
  --text-m-demibold-letter-spacing: var(--letter-spacing-none);
  --text-m-regular-size: var(--size-xl);
  --text-m-regular-line-height: var(--line-height-xl);
  --text-m-regular-letter-spacing: var(--letter-spacing-none);
  --text-m-thin-size: var(--size-xl);
  --text-m-thin-line-height: var(--line-height-xl);
  --text-m-thin-letter-spacing: var(--letter-spacing-none);
  --text-l-demibold-size: var(--size-2xl);
  --text-l-demibold-line-height: var(--line-height-2xl);
  --text-l-demibold-letter-spacing: var(--letter-spacing-none);
  --text-l-regular-size: var(--size-2xl);
  --text-l-regular-line-height: var(--line-height-2xl);
  --text-l-regular-letter-spacing: var(--letter-spacing-none);
  --text-l-thin-size: var(--size-2xl);
  --text-l-thin-line-height: var(--line-height-2xl);
  --text-l-thin-letter-spacing: var(--letter-spacing-none);
  --text-xl-demibold-size: var(--size-3xl);
  --text-xl-demibold-line-height: var(--line-height-3xl);
  --text-xl-demibold-letter-spacing: var(--letter-spacing-none);
  --text-xl-regular-size: var(--size-3xl);
  --text-xl-regular-line-height: var(--line-height-3xl);
  --text-xl-regular-letter-spacing: var(--letter-spacing-none);
  --text-xl-thin-size: var(--size-3xl);
  --text-xl-thin-line-height: var(--line-height-3xl);
  --text-xl-thin-letter-spacing: var(--letter-spacing-none);
}
@media (max-width: 1224px) {
  :root {
    --breakpoint: var(--breakpoint-l);
    --heading-xs-size: var(--size-xl);
    --heading-xs-line-height: var(--line-height-xl);
    --heading-xs-letter-spacing: var(--letter-spacing-none);
    --heading-s-size: var(--size-2xl);
    --heading-s-line-height: var(--line-height-2xl);
    --heading-s-letter-spacing: var(--letter-spacing-none);
    --heading-m-size: var(--size-3xl);
    --heading-m-line-height: var(--line-height-3xl);
    --heading-m-letter-spacing: var(--letter-spacing-none);
    --heading-l-size: var(--size-4xl);
    --heading-l-line-height: var(--line-height-4xl);
    --heading-l-letter-spacing: var(--letter-spacing-none);
    --heading-xl-size: var(--size-5xl);
    --heading-xl-line-height: var(--line-height-5xl);
    --heading-xl-letter-spacing: var(--letter-spacing-none);
    --heading-2xl-size: var(--size-6xl);
    --heading-2xl-line-height: var(--line-height-6xl);
    --heading-2xl-letter-spacing: var(--letter-spacing-none);
    --heading-2xs-size: var(--size-l);
    --heading-2xs-line-height: var(--line-height-l);
    --heading-2xs-letter-spacing: var(--letter-spacing-none);
    --heading-3xl-size: var(--size-7xl);
    --heading-3xl-line-height: var(--line-height-7xl);
    --heading-3xl-letter-spacing: var(--letter-spacing-none);
    --heading-4xl-size: var(--size-8xl);
    --heading-4xl-line-height: var(--line-height-8xl);
    --heading-4xl-letter-spacing: var(--letter-spacing-none);
    --heading-5xl-size: var(--size-9xl);
    --heading-5xl-line-height: var(--line-height-9xl);
    --heading-5xl-letter-spacing: var(--letter-spacing-none);
    --text-2xs-demibold-size: var(--size-s);
    --text-2xs-demibold-line-height: var(--line-height-s);
    --text-2xs-demibold-letter-spacing: var(--letter-spacing-none);
    --text-2xs-regular-size: var(--size-s);
    --text-2xs-regular-line-height: var(--line-height-s);
    --text-2xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-2xs-thin-size: var(--size-s);
    --text-2xs-thin-line-height: var(--line-height-s);
    --text-2xs-thin-letter-spacing: var(--letter-spacing-none);
    --text-xs-demibold-size: var(--size-m);
    --text-xs-demibold-line-height: var(--line-height-m);
    --text-xs-demibold-letter-spacing: var(--letter-spacing-none);
    --text-xs-regular-size: var(--size-m);
    --text-xs-regular-line-height: var(--line-height-m);
    --text-xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-xs-thin-size: var(--size-m);
    --text-xs-thin-line-height: var(--line-height-m);
    --text-xs-thin-letter-spacing: var(--letter-spacing-none);
    --text-s-demibold-size: var(--size-l);
    --text-s-demibold-line-height: var(--line-height-l);
    --text-s-demibold-letter-spacing: var(--letter-spacing-none);
    --text-s-regular-size: var(--size-l);
    --text-s-regular-line-height: var(--line-height-l);
    --text-s-regular-letter-spacing: var(--letter-spacing-none);
    --text-s-thin-size: var(--size-l);
    --text-s-thin-line-height: var(--line-height-l);
    --text-s-thin-letter-spacing: var(--letter-spacing-none);
    --text-m-demibold-size: var(--size-xl);
    --text-m-demibold-line-height: var(--line-height-xl);
    --text-m-demibold-letter-spacing: var(--letter-spacing-none);
    --text-m-regular-size: var(--size-xl);
    --text-m-regular-line-height: var(--line-height-xl);
    --text-m-regular-letter-spacing: var(--letter-spacing-none);
    --text-m-thin-size: var(--size-xl);
    --text-m-thin-line-height: var(--line-height-xl);
    --text-m-thin-letter-spacing: var(--letter-spacing-none);
    --text-l-demibold-size: var(--size-2xl);
    --text-l-demibold-line-height: var(--line-height-2xl);
    --text-l-demibold-letter-spacing: var(--letter-spacing-none);
    --text-l-regular-size: var(--size-2xl);
    --text-l-regular-line-height: var(--line-height-2xl);
    --text-l-regular-letter-spacing: var(--letter-spacing-none);
    --text-l-thin-size: var(--size-2xl);
    --text-l-thin-line-height: var(--line-height-2xl);
    --text-l-thin-letter-spacing: var(--letter-spacing-none);
    --text-xl-demibold-size: var(--size-3xl);
    --text-xl-demibold-line-height: var(--line-height-3xl);
    --text-xl-demibold-letter-spacing: var(--letter-spacing-none);
    --text-xl-regular-size: var(--size-3xl);
    --text-xl-regular-line-height: var(--line-height-3xl);
    --text-xl-regular-letter-spacing: var(--letter-spacing-none);
    --text-xl-thin-size: var(--size-3xl);
    --text-xl-thin-line-height: var(--line-height-3xl);
    --text-xl-thin-letter-spacing: var(--letter-spacing-none);
  }
}
@media (max-width: 768px) {
  :root {
    --breakpoint: var(--breakpoint-m);
    --heading-2xs-size: var(--size-m);
    --heading-2xs-line-height: var(--line-height-m);
    --heading-2xs-letter-spacing: var(--letter-spacing-none);
    --heading-xs-size: var(--size-l);
    --heading-xs-line-height: var(--line-height-l);
    --heading-xs-letter-spacing: var(--letter-spacing-none);
    --heading-s-size: var(--size-xl);
    --heading-s-line-height: var(--line-height-xl);
    --heading-s-letter-spacing: var(--letter-spacing-none);
    --heading-m-size: var(--size-2xl);
    --heading-m-line-height: var(--line-height-2xl);
    --heading-m-letter-spacing: var(--letter-spacing-none);
    --heading-l-size: var(--size-3xl);
    --heading-l-line-height: var(--line-height-3xl);
    --heading-l-letter-spacing: var(--letter-spacing-none);
    --heading-xl-size: var(--size-4xl);
    --heading-xl-line-height: var(--line-height-4xl);
    --heading-xl-letter-spacing: var(--letter-spacing-none);
    --heading-2xl-size: var(--size-5xl);
    --heading-2xl-line-height: var(--line-height-5xl);
    --heading-2xl-letter-spacing: var(--letter-spacing-none);
    --heading-3xl-size: var(--size-6xl);
    --heading-3xl-line-height: var(--line-height-6xl);
    --heading-3xl-letter-spacing: var(--letter-spacing-none);
    --heading-4xl-size: var(--size-6xl);
    --heading-4xl-line-height: var(--line-height-6xl);
    --heading-4xl-letter-spacing: var(--letter-spacing-none);
    --heading-5xl-size: var(--size-6xl);
    --heading-5xl-line-height: var(--line-height-6xl);
    --heading-5xl-letter-spacing: var(--letter-spacing-none);
    --text-2xs-demibold-size: var(--size-s);
    --text-2xs-demibold-line-height: var(--line-height-s);
    --text-2xs-demibold-letter-spacing: var(--letter-spacing-none);
    --text-2xs-regular-size: var(--size-s);
    --text-2xs-regular-line-height: var(--line-height-s);
    --text-2xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-2xs-thin-size: var(--size-s);
    --text-2xs-thin-line-height: var(--line-height-s);
    --text-2xs-thin-letter-spacing: var(--letter-spacing-none);
    --text-s-demibold-size: var(--size-l);
    --text-s-demibold-line-height: var(--line-height-l);
    --text-s-demibold-letter-spacing: var(--letter-spacing-none);
    --text-s-regular-size: var(--size-l);
    --text-s-regular-line-height: var(--line-height-l);
    --text-s-regular-letter-spacing: var(--letter-spacing-none);
    --text-s-thin-size: var(--size-l);
    --text-s-thin-line-height: var(--line-height-l);
    --text-s-thin-letter-spacing: var(--letter-spacing-none);
    --text-m-demibold-size: var(--size-xl);
    --text-m-demibold-line-height: var(--line-height-xl);
    --text-m-demibold-letter-spacing: var(--letter-spacing-none);
    --text-m-regular-size: var(--size-xl);
    --text-m-regular-line-height: var(--line-height-xl);
    --text-m-regular-letter-spacing: var(--letter-spacing-none);
    --text-m-thin-size: var(--size-xl);
    --text-m-thin-line-height: var(--line-height-xl);
    --text-m-thin-letter-spacing: var(--letter-spacing-none);
    --text-l-demibold-size: var(--size-2xl);
    --text-l-demibold-line-height: var(--line-height-2xl);
    --text-l-demibold-letter-spacing: var(--letter-spacing-none);
    --text-l-regular-size: var(--size-2xl);
    --text-l-regular-line-height: var(--line-height-2xl);
    --text-l-regular-letter-spacing: var(--letter-spacing-none);
    --text-l-thin-size: var(--size-2xl);
    --text-l-thin-line-height: var(--line-height-2xl);
    --text-l-thin-letter-spacing: var(--letter-spacing-none);
    --text-xl-demibold-size: var(--size-3xl);
    --text-xl-demibold-line-height: var(--line-height-3xl);
    --text-xl-demibold-letter-spacing: var(--letter-spacing-none);
    --text-xl-regular-size: var(--size-3xl);
    --text-xl-regular-line-height: var(--line-height-3xl);
    --text-xl-regular-letter-spacing: var(--letter-spacing-none);
    --text-xl-thin-size: var(--size-3xl);
    --text-xl-thin-line-height: var(--line-height-3xl);
    --text-xl-thin-letter-spacing: var(--letter-spacing-none);
    --text-xs-demibold-size: var(--size-m);
    --text-xs-demibold-line-height: var(--line-height-m);
    --text-xs-demibold-letter-spacing: var(--letter-spacing-none);
    --text-xs-regular-size: var(--size-m);
    --text-xs-regular-line-height: var(--line-height-m);
    --text-xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-xs-thin-size: var(--size-m);
    --text-xs-thin-line-height: var(--line-height-m);
    --text-xs-thin-letter-spacing: var(--letter-spacing-none);
  }
}
@media (max-width: 430px) {
  :root {
    --breakpoint: var(--breakpoint-s);
    --heading-xs-size: var(--size-l);
    --heading-xs-line-height: var(--line-height-l);
    --heading-xs-letter-spacing: var(--letter-spacing-none);
    --heading-s-size: var(--size-xl);
    --heading-s-line-height: var(--line-height-xl);
    --heading-s-letter-spacing: var(--letter-spacing-none);
    --heading-2xs-size: var(--size-m);
    --heading-2xs-line-height: var(--line-height-m);
    --heading-2xs-letter-spacing: var(--letter-spacing-none);
    --heading-m-size: var(--size-2xl);
    --heading-m-line-height: var(--line-height-2xl);
    --heading-m-letter-spacing: var(--letter-spacing-none);
    --heading-xl-size: var(--size-4xl);
    --heading-xl-line-height: var(--line-height-4xl);
    --heading-xl-letter-spacing: var(--letter-spacing-none);
    --heading-l-size: var(--size-3xl);
    --heading-l-line-height: var(--line-height-3xl);
    --heading-l-letter-spacing: var(--letter-spacing-none);
    --heading-2xl-size: var(--size-5xl);
    --heading-2xl-line-height: var(--line-height-5xl);
    --heading-2xl-letter-spacing: var(--letter-spacing-none);
    --heading-3xl-size: var(--size-6xl);
    --heading-3xl-line-height: var(--line-height-6xl);
    --heading-3xl-letter-spacing: var(--letter-spacing-none);
    --heading-4xl-size: var(--size-6xl);
    --heading-4xl-line-height: var(--line-height-6xl);
    --heading-4xl-letter-spacing: var(--letter-spacing-none);
    --heading-5xl-size: var(--size-6xl);
    --heading-5xl-line-height: var(--line-height-6xl);
    --heading-5xl-letter-spacing: var(--letter-spacing-none);
    --text-2xs-demibold-size: var(--size-s);
    --text-2xs-demibold-line-height: var(--line-height-s);
    --text-2xs-demibold-letter-spacing: var(--letter-spacing-none);
    --text-2xs-regular-size: var(--size-s);
    --text-2xs-regular-line-height: var(--line-height-s);
    --text-2xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-2xs-thin-size: var(--size-s);
    --text-2xs-thin-line-height: var(--line-height-s);
    --text-2xs-thin-letter-spacing: var(--letter-spacing-none);
    --text-xs-demibold-size: var(--size-m);
    --text-xs-demibold-line-height: var(--line-height-m);
    --text-xs-demibold-letter-spacing: var(--letter-spacing-none);
    --text-xs-regular-size: var(--size-m);
    --text-xs-regular-line-height: var(--line-height-m);
    --text-xs-regular-letter-spacing: var(--letter-spacing-none);
    --text-xs-thin-size: var(--size-m);
    --text-xs-thin-line-height: var(--line-height-m);
    --text-xs-thin-letter-spacing: var(--letter-spacing-none);
    --text-s-demibold-size: var(--size-m);
    --text-s-demibold-line-height: var(--line-height-m);
    --text-s-demibold-letter-spacing: var(--letter-spacing-none);
    --text-s-regular-size: var(--size-m);
    --text-s-regular-line-height: var(--line-height-m);
    --text-s-regular-letter-spacing: var(--letter-spacing-none);
    --text-s-thin-size: var(--size-m);
    --text-s-thin-line-height: var(--line-height-m);
    --text-s-thin-letter-spacing: var(--letter-spacing-none);
    --text-m-demibold-size: var(--size-l);
    --text-m-demibold-line-height: var(--line-height-xl);
    --text-m-demibold-letter-spacing: var(--letter-spacing-none);
    --text-m-regular-size: var(--size-l);
    --text-m-regular-line-height: var(--line-height-xl);
    --text-m-regular-letter-spacing: var(--letter-spacing-none);
    --text-m-thin-size: var(--size-l);
    --text-m-thin-line-height: var(--line-height-l);
    --text-m-thin-letter-spacing: var(--letter-spacing-none);
    --text-l-demibold-size: var(--size-xl);
    --text-l-demibold-line-height: var(--line-height-2xl);
    --text-l-demibold-letter-spacing: var(--letter-spacing-none);
    --text-l-regular-size: var(--size-xl);
    --text-l-regular-line-height: var(--line-height-2xl);
    --text-l-regular-letter-spacing: var(--letter-spacing-none);
    --text-l-thin-size: var(--size-xl);
    --text-l-thin-line-height: var(--line-height-2xl);
    --text-l-thin-letter-spacing: var(--letter-spacing-none);
    --text-xl-demibold-size: var(--size-2xl);
    --text-xl-demibold-line-height: var(--line-height-3xl);
    --text-xl-demibold-letter-spacing: var(--letter-spacing-none);
    --text-xl-regular-size: var(--size-2xl);
    --text-xl-regular-line-height: var(--line-height-2xl);
    --text-xl-regular-letter-spacing: var(--letter-spacing-none);
    --text-xl-thin-size: var(--size-2xl);
    --text-xl-thin-line-height: var(--line-height-2xl);
    --text-xl-thin-letter-spacing: var(--letter-spacing-none);
  }
}

:root {
  --breakpoint-xl: 1440px;
  --breakpoint-l: 1224px;
  --breakpoint-m: 768px;
  --breakpoint-s: 430px;
}

:root {
  --action-or-selection-color: #0070e0;
  --title-color: #1b2733;
  --text-color: #637282;
  --line-color: #e6e8eb;
  --border-color: #bdc4c9;
  --view-background-color: #fff;
  --menu-background-color: #f7f9fa;
  --error-border-color: #d46d6d;
  --delete-or-cancel-color: #ed3d5d;
  --success-text-color: #157f3c;
  --success-background-color: #e8f7ed;
  --success-border-color: #30b661;
  --fail-text-color: #d46d6d;
  --fail-background-color: #fef1f1;
  --fail-border-color: #e2a8a8;
  --invalid-border-color: #ef5350;
  --light-invalid-background-color: #fceaec;
  --dark-green: #17dd8c;
  --light-green: #6effba;
  --light-blue: #63b1ff;
  --dark-pink: #ff7592;
  --light-pink: #ff92b1;
  --dark-yellow: #ffb828;
  --light-yellow: #ffcc5e;
  --dark-grey: #c3c3c3;
}

/*
 * Cropper v4.1.0
 * https://fengyuanchen.github.io/cropper
 *
 * Copyright 2014-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-10-12T07:43:47.783Z
 */
.cropper-container {
  direction: ltr;
  font-size: 0;
  line-height: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cropper-container img {
  display: block;
  height: 100%;
  image-orientation: 0deg;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100%;
}
.cropper-canvas,
.cropper-crop-box,
.cropper-drag-box,
.cropper-modal,
.cropper-wrap-box {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.cropper-canvas,
.cropper-wrap-box {
  overflow: hidden;
}
.cropper-drag-box {
  background-color: #fff;
  opacity: 0;
}
.cropper-modal {
  background-color: #000;
  opacity: 0.5;
}
.cropper-view-box {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51,153,255,0.75);
  overflow: hidden;
  width: 100%;
}
.cropper-dashed {
  border: 0 dashed #eee;
  display: block;
  opacity: 0.5;
  position: absolute;
}
.cropper-dashed.dashed-h {
  border-bottom-width: 1px;
  border-top-width: 1px;
  height: 33.33333%;
  left: 0;
  top: 33.33333%;
  width: 100%;
}
.cropper-dashed.dashed-v {
  border-left-width: 1px;
  border-right-width: 1px;
  height: 100%;
  left: 33.33333%;
  top: 0;
  width: 33.33333%;
}
.cropper-center {
  display: block;
  height: 0;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  top: 50%;
  width: 0;
}
.cropper-center:after,
.cropper-center:before {
  background-color: #eee;
  content: " ";
  display: block;
  position: absolute;
}
.cropper-center:before {
  height: 1px;
  left: -3px;
  top: 0;
  width: 7px;
}
.cropper-center:after {
  height: 7px;
  left: 0;
  top: -3px;
  width: 1px;
}
.cropper-face,
.cropper-line,
.cropper-point {
  display: block;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  width: 100%;
}
.cropper-face {
  background-color: #fff;
  left: 0;
  top: 0;
}
.cropper-line {
  background-color: #39f;
}
.cropper-line.line-e {
  cursor: ew-resize;
  right: -3px;
  top: 0;
  width: 5px;
}
.cropper-line.line-n {
  cursor: ns-resize;
  height: 5px;
  left: 0;
  top: -3px;
}
.cropper-line.line-w {
  cursor: ew-resize;
  left: -3px;
  top: 0;
  width: 5px;
}
.cropper-line.line-s {
  bottom: -3px;
  cursor: ns-resize;
  height: 5px;
  left: 0;
}
.cropper-point {
  background-color: #39f;
  height: 5px;
  opacity: 0.75;
  width: 5px;
}
.cropper-point.point-e {
  cursor: ew-resize;
  margin-top: -3px;
  right: -3px;
  top: 50%;
}
.cropper-point.point-n {
  cursor: ns-resize;
  left: 50%;
  margin-left: -3px;
  top: -3px;
}
.cropper-point.point-w {
  cursor: ew-resize;
  left: -3px;
  margin-top: -3px;
  top: 50%;
}
.cropper-point.point-s {
  bottom: -3px;
  cursor: s-resize;
  left: 50%;
  margin-left: -3px;
}
.cropper-point.point-ne {
  cursor: nesw-resize;
  right: -3px;
  top: -3px;
}
.cropper-point.point-nw {
  cursor: nwse-resize;
  left: -3px;
  top: -3px;
}
.cropper-point.point-sw {
  bottom: -3px;
  cursor: nesw-resize;
  left: -3px;
}
.cropper-point.point-se {
  bottom: -3px;
  cursor: nwse-resize;
  height: 20px;
  opacity: 1;
  right: -3px;
  width: 20px;
}
@media (min-width: 768px) {
  .cropper-point.point-se {
    height: 15px;
    width: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    height: 10px;
    width: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    height: 5px;
    opacity: 0.75;
    width: 5px;
  }
}
.cropper-point.point-se:before {
  background-color: #39f;
  bottom: -50%;
  content: " ";
  display: block;
  height: 200%;
  opacity: 0;
  position: absolute;
  right: -50%;
  width: 200%;
}
.cropper-invisible {
  opacity: 0;
}
.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-hide {
  display: block;
  height: 0;
  position: absolute;
  width: 0;
}
.cropper-hidden {
  display: none !important;
}
.cropper-move {
  cursor: move;
}
.cropper-crop {
  cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.carousel {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--space-3xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scrollbar-color: transparent transparent;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel::-webkit-scrollbar-thumb {
  display: none;
}
.carousel::-webkit-scrollbar-track {
  display: none;
}
.carousel .carousel-item {
  flex-shrink: 0;
  position: relative;
  display: flex;
  width: 362px;
  height: 600px;
  padding: var(--space-2xl);
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--space-2xl);
  scroll-behavior: smooth;
  scroll-snap-align: center;
}
@media (max-width: 768px) {
  .carousel .carousel-item {
    width: 240px;
    height: 385px;
    gap: 10px;
  }
}
@media (max-width: 600px) {
  .carousel .carousel-item {
    width: 244px;
    height: 450px;
    gap: 10px;
  }
}
.carousel-item-default {
  background: var(--background-full-neutral-secondary);
}
.carousel-item-inverse {
  background: var(--background-full-neutral-inverse);
}
.carousel-image-container {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
}
.carousel-image-container > img {
  width: 100%;
}
@media (max-width: 768px) {
  .carousel-image-container > img {
    width: 60%;
  }
}
.carousel-item-setup-clip > .carousel-image-container {
  position: absolute;
  right: 0px;
  bottom: 32px;
  width: 386px;
}
.carousel-image-clip {
  clip: rect(0, 340px, 235px, 0px);
  right: -45px !important;
}
@media (max-width: 768px) {
  .carousel-image-clip {
    clip: auto;
    position: static;
    justify-content: center;
  }
}
.carousel-link-container {
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-s);
  width: 100%;
  padding: var(--space-l) 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.carousel-link-container-default-static > svg > g > path {
  fill: var(--neutral-gunmetal);
}
.carousel-link-container-inverse-static > svg > g > path {
  fill: var(--neutral-snow-white-snow-white);
}
.carousel-link-container-default > svg > g > path {
  fill: var(--text-text-title);
}
.carousel-link-container-inverse > svg > g > path {
  fill: var(--text-inverse-primary);
}
.carousel-card-button {
  align-self: flex-start;
  margin-top: 16px;
  line-height: 20px;
}

/* RequestSearchTextField */
.request-search-textfield-v3-override > .request-search-textfield-result-container {
  margin: auto;
  margin-top: auto;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  display: flex;
  height: 40px;
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  font-size: var(--text-s-regular-size);
  font-style: normal;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
  border-radius: var(--radius-m);
  cursor: text;
  background-color: var(--background-full-neutral-primary);
  border: 1px solid var(--border-primary-default);
  caret-color: var(--border-brand-default);
  box-sizing: border-box;
  color: var(--text-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.request-search-textfield-v3-override > .request-search-textfield-result-container > .tag {
  height: 20px;
}
.request-search-textfield-v3-override > .request-search-textfield-result-container > .request-search-textfield-input {
  height: auto;
}
.request-search-textfield-v3-override > .request-search-textfield-result-list {
  width: -webkit-fill-available;
  width: fill-available;
  margin-top: 0;
  border-radius: var(--radius-m);
  position: absolute;
  border: 1px solid var(--border-color);
  background-color: var(--view-background-color);
  z-index: 1;
  max-height: 280px;
  overflow: hidden;
}
.request-search-textfield-avatar {
  width: 25px;
  height: 25px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-color);
}
.tag > div > .request-search-textfield-avatar {
  width: 20px;
  height: 20px;
}

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}
.daterangepicker:before,
.daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0,0,0,0.2);
  content: '';
}
.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}
.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}
.daterangepicker.opensleft:before {
  right: 9px;
}
.daterangepicker.opensleft:after {
  right: 10px;
}
.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}
.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}
.daterangepicker.opensright:before {
  left: 9px;
}
.daterangepicker.opensright:after {
  left: 10px;
}
.daterangepicker.drop-up {
  margin-top: -7px;
}
.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}
.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}
.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
  float: none;
}
.daterangepicker.single .drp-selected {
  display: none;
}
.daterangepicker.show-calendar .drp-calendar {
  display: block;
}
.daterangepicker.show-calendar .drp-buttons {
  display: block;
}
.daterangepicker.auto-apply .drp-buttons {
  display: none;
}
.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}
.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}
.daterangepicker .drp-calendar.right {
  padding: 8px;
}
.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid #000;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}
.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}
.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background-color: var(--background-brand-medium);
  border-color: transparent;
  color: var(--text-inverse-title);
}
.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: var(--text-text-disable);
}
.daterangepicker td.in-range {
  background-color: var(--background-brand-light);
  border-color: transparent;
  color: var(--text-color);
  border-radius: 0;
}
.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--background-brand-dark);
  border-color: transparent;
  color: var(--text-inverse-title);
}
.daterangepicker th.month {
  width: auto;
}
.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}
.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}
.daterangepicker select.yearselect {
  width: 40%;
}
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}
.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}
.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}
.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}
.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}
.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}
.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}
.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}
.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
.daterangepicker .ranges li:hover {
  background-color: #eee;
}
.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}
.daterangepicker-input {
  min-width: 250px;
}
/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }
  .daterangepicker .ranges ul {
    width: 140px;
  }
  .daterangepicker.single .ranges ul {
    width: 100%;
  }
  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }
  .daterangepicker.single .ranges,
  .daterangepicker.single .drp-calendar {
    float: left;
  }
  .daterangepicker {
    direction: ltr;
    text-align: left;
  }
  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }
  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }
  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }
  .daterangepicker .ranges,
  .daterangepicker .drp-calendar {
    float: left;
  }
}
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }
  .daterangepicker .ranges {
    float: left;
  }
  .daterangepicker.rtl .ranges {
    float: right;
  }
  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}

.simple-select-result-container {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 20px;
  border-radius: 12px;
  font-family: "Pretendard-Thin";
  margin-bottom: 0px;
  cursor: pointer;
}
.simple-arrow-down {
  cursor: pointer;
  position: absolute;
  top: 14px;
  right: 10px;
  width: 13px;
  height: 13px;
}
.simple-arrow-down > svg > path {
  fill: var(--action-or-selection-color);
}
.simple-select-result-list {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  margin-top: -1px;
/* border-radius: 4px; */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  position: absolute;
  border: 1px solid var(--border-color);
  background-color: var(--view-background-color);
  z-index: 1;
  max-height: 300px;
  overflow: overlay;
}
.simple-select-result-list-item {
  cursor: pointer;
  height: auto;
  overflow: hidden;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: start;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
}
.simple-select-result-list-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.simple-select-result-list-item-name {
  font-family: "Pretendard-Regular";
  font-size: 16px;
  line-height: 24px;
}
.simple-select-result-list-item:hover {
  color: var(--view-background-color);
  background-color: var(--hover-action-or-selection-color);
}
.current-simple-selection-item-label {
  font-family: "Pretendard-Regular";
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.simple-placeholder {
  color: var(--border-color);
}
.simple-select-result-container-active {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border: solid 1px var(--action-or-selection-color);
}
.simple-select-result-list-active {
  border: solid 1px var(--action-or-selection-color);
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
}
.simple-result-item-select {
  background-color: var(--selected-color);
}

.empty-state-container {
  display: flex;
  padding: 56px 32px 32px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}
.empty-state-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

.connection-detail-section-container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10xl);
  align-self: stretch;
}
@media (max-width: 870px) {
  .connection-detail-section-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }
}
.connection-detail-section-title {
  min-width: 180px;
  white-space: nowrap;
}
.connection-detail-permission-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: transform 0.4s;
}
.connection-detail-permission-icon-showing {
  transform: rotate(0deg);
}
.connection-detail-permission-icon-hiding {
  transform: rotate(180deg);
}
.connection-detail-permission-subtitle {
  max-height: 0;
  transition: max-height 0.4s ease-out;
}
.connection-detail-permission-title {
  font-size: var(--heading-2xs-size);
  font-style: normal;
  line-height: var(--heading-2xs-line-height);
  letter-spacing: var(--letter-spacing-none);
  color: var(--title-color);
}
@media (max-width: 870px) {
  .connection-detail-permission-title {
    font-size: 20px;
    font-style: normal;
    line-height: 28px;
  }
}
.connection-detail-privacy-container {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  border-radius: var(--space-l);
  background: var(--background-full-neutral-secondary);
}
.connection-detail-privacy-icon {
  width: 16px;
  height: 16px;
}
.connection-detail-ul {
  list-style-type: disc;
  padding-left: 12px;
}
.connection-detail-li {
  padding-left: 4px;
}
.connection-detail-carousel-container {
  width: 100%;
  overflow: scroll;
}
.connection-detail-carousel-container::-webkit-scrollbar {
  display: none;
}
.connection-detail-carousel-container::-webkit-scrollbar-thumb {
  display: none;
}
.connection-detail-carousel-container::-webkit-scrollbar-track {
  display: none;
}
.connection-detail-carousel {
  position: relative;
  width: fit-content;
  display: flex;
  flex-direction: row;
  gap: var(--space-3xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scrollbar-color: transparent transparent;
  padding: 4px;
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.connection-detail-carousel-item {
  width: 568px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  max-width: calc(100% - 2 * var(--space-15xl));
  max-height: auto;
  aspect-ratio: 568/400;
  height: auto;
}
@media (max-width: 1255px) {
  .connection-detail-carousel-item {
    max-width: calc(100% - 2 * var(--space-8xl));
  }
}
@media (max-width: 870px) {
  .connection-detail-carousel-item {
    max-width: calc(100% - 2 * var(--space-3xl));
  }
}
@media (max-width: 430px) {
  .connection-detail-carousel-item {
    max-width: calc(100% - 2 * var(--space-xl));
  }
}
.connection-detail-carousel-item:first-child {
  margin-left: var(--space-15xl);
}
@media (max-width: 1255px) {
  .connection-detail-carousel-item:first-child {
    margin-left: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .connection-detail-carousel-item:first-child {
    margin-left: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .connection-detail-carousel-item:first-child {
    margin-left: var(--space-xl);
  }
}
.connection-detail-carousel-item:last-child {
  margin-right: var(--space-15xl);
}
@media (max-width: 1255px) {
  .connection-detail-carousel-item:last-child {
    margin-right: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .connection-detail-carousel-item:last-child {
    margin-right: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .connection-detail-carousel-item:last-child {
    margin-right: var(--space-xl);
  }
}
.connection-detail-carousel-arrow {
  position: absolute;
  top: 172px;
  z-index: 2;
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: 50px;
  background: var(--background-full-neutral-tertiary);
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.connection-detail-carousel-left-arrow {
  left: 24px;
}
.connection-detail-carousel-right-arrow {
  right: 24px;
}
.connection-detail-carousel-arrow-image {
  align-self: center;
}
.connection-detail-permission-icon > svg > path,
.connection-detail-carousel-arrow > svg > g > path {
  fill: var(--title-color);
}

.counter-actions-container {
  display: flex;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-primary-default);
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
}
.counter-input {
  border: none;
  padding: 0;
  width: 25px;
  color: var(--text-text-primary);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  background-color: transparent;
}
.counter-input::-webkit-outer-spin-button,
.counter-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.counter-input {
  -moz-appearance: textfield;
}
.counter-button {
  border: none;
  cursor: pointer;
  user-select: none;
}
.counter-button > .btn-content > .btn-content-icon-container > svg {
  width: var(--space-xl);
  height: var(--space-xl);
}
.counter-button > .btn-content > .btn-content-icon-container > *,
.counter-button > .btn-content > .btn-content-icon-container > svg > path,
.counter-button > .btn-content > .btn-content-icon-container > svg > g > path {
  fill: var(--text-text-primary);
}

.create-invoice-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.invoice-tab {
  display: flex;
  width: 100%;
  overflow: hidden;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line-color);
}
.search-user-dropdown {
  position: absolute;
  top: 76px;
  outline: none;
  transition-duration: 80ms;
  background-color: var(--view-background-color);
  min-height: 40px;
  height: auto;
  width: calc(100% - 42px);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
.search-user-loading-indicator {
  color: var(--text-color);
  margin-top: 10px;
  margin-left: 8px;
  margin-right: 8px;
}
.search-user-loading > label {
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.75rem;
}
.search-user-item {
  padding: 12px 0px;
  overflow: hidden;
}
.search-user-item:hover > label {
  cursor: pointer;
  color: var(--view-background-color);
}
.search-user-item:hover {
  background-color: var(--action-or-selection-color);
  cursor: pointer;
  color: var(--view-background-color);
}
.search-user-item > label {
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.75rem;
  margin-left: 8px;
}
.textfield-tag-input-container {
  display: flex;
}

#customer-container {
  margin-top: 30px;
}
.charge-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 1%;
}
.charge-search-input {
  height: 48px;
}


.qr-code-item {
  width: 200px;
  height: 200px;
  margin-left: 40px;
  border-radius: 8px;
  display: block;
}
.invoice-reversed-button {
  color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
  background-color: var(--view-background-color);
  padding: 0 16px;
  text-align: center;
  margin-top: 8px;
  width: fit-content;
  width: -moz-fit-content;
  min-width: 240px;
}

.share-slip-modal {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.message {
  display: flex;
}
.wrapper {
  font-size: 0.875rem;
}
.action {
  align-self: flex-end;
}
.action a {
  color: var(--action-or-selection-color);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.875rem;
}
.shared-link {
  color: var(--text-color);
  font-size: 13px;
  padding-top: 10px;
  word-break: break-all;
}
.contacts-container {
  border-bottom: 1px solid var(--line-color);
}
.contacts-form {
  padding: 20px;
  padding-bottom: 0px;
}
.send-button-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}
.send-icon svg {
  margin-right: 8px;
}
.email-tags-container {
  padding-inline-start: 20px;
  margin-block-start: 4px;
}
.email-tag {
  list-style: none;
  background-color: var(--menu-background-color);
  color: var(--text-color);
  max-width: fit-content;
  margin-bottom: 4px;
  padding: 4px 8px 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.email-tag-remove {
  cursor: pointer;
  margin-left: 10px;
}
.request-link-container {
  color: var(--action-or-selection-color);
  cursor: pointer;
  margin-top: 12px;
}
.send {
  width: fit-content;
}
#send-link-icon,
#create-link-icon {
  margin-right: 12px;
}

.str-balance-card-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: var(--space-5xl);
  padding: 0px var(--space-15xl);
}
@media (max-width: 1140px) {
  .str-balance-card-container {
    padding: 0px var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .str-balance-card-container {
    flex-direction: column;
    padding: 0px var(--space-3xl);
    gap: var(--space-l);
  }
}
@media (max-width: 735px) {
  .str-balance-card-container {
    flex-direction: column;
    padding: 0px var(--space-xl) 40px var(--space-xl);
    gap: var(--space-l);
  }
}
.str-balance-value-loading {
  width: 250px;
  height: 32px;
  margin-bottom: 10px;
}
.str-balance-title-loading {
  width: 50px;
  height: 12px;
  margin-bottom: 10px;
}
.str-balance-subtitle-loading {
  width: 200px;
  height: 12px;
  margin-bottom: 10px;
}
.str-balance-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 24px 40px;
}
.str-balance-amount-container {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  justify-content: space-between;
}
.str-balance-value-container {
  display: flex;
  padding-right: var(--space-s);
  align-items: center;
  gap: var(--space-s);
}
.str-balance-toggle-button {
  cursor: pointer;
}
.str-balance-toggle-button > svg > g > path {
  fill: var(--title-color);
}
.str-balance-card {
  width: 50%;
  background-color: var(--menu-background-color);
  border-radius: 12px;
}
@media (max-width: 870px) {
  .str-balance-card {
    width: 100%;
  }
}

#request-tabs {
  margin-bottom: 50px;
}

[id^="ted-request-table-head"] {
  width: 8%;
  white-space: nowrap;
}
[id^="ted-request-table-cell"] {
  white-space: nowrap;
}
#ted-request-table-cell-sender-name {
  white-space: normal;
}
#ted-request-table-cell-receiver-name {
  white-space: normal;
}

[id^="str-external-request-table-head"] {
  width: 14%;
  white-space: nowrap;
}
[id^="str-external-request-table-cell"] {
  white-space: nowrap;
}

[id^="str-internal-request-table-head"] {
  width: 12.5%;
  white-space: nowrap;
}
[id^="str-internal-request-table-cell"] {
  white-space: nowrap;
}

[id^="str-institution-request-table-head"] {
  width: 14%;
  white-space: nowrap;
}
[id^="str-institution-request-table-cell"] {
  white-space: nowrap;
}

[id^="bacen-payment-request-table-head"] {
  width: 14%;
  white-space: nowrap;
}
[id^="bacen-payment-request-table-cell"] {
  white-space: nowrap;
}

#ted-reversal-table-head-bank-code-label {
  width: 7%;
}
#ted-reversal-table-head-amount-label {
  width: 6%;
}
#ted-reversal-table-head-flow-label {
  width: 5%;
}
#ted-reversal-table-head-id-label {
  width: 8%;
}
#ted-reversal-table-head-sender-bank-code-label {
  white-space: nowrap;
}
@media (min-width: 1550px) {
  #ted-reversal-table-head-sender-bank-code-label {
    width: 6%;
  }
}
#ted-reversal-table-head-receiver-bank-code-label {
  white-space: nowrap;
}
@media (min-width: 1550px) {
  #ted-reversal-table-head-receiver-bank-code-label {
    width: 6%;
  }
}
#ted-reversal-table-head-status-label {
  width: 6%;
}
#ted-reversal-table-cell-amount {
  white-space: nowrap;
}
[id^="ted-reversal-table-head"] {
  white-space: nowrap;
}

[id^="str-institution-reversal-table-head"] {
  width: 8%;
  white-space: nowrap;
}
[id^="str-institution-reversal-table-cell"] {
  white-space: nowrap;
}

#reversal-tabs {
  margin-bottom: 50px;
}

.str-table-container {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.str-table-body-cell,
.str-table-header-cell {
  padding-right: 15px;
}
@media (max-width: 1550px) {
  .str-table-body-cell,
  .str-table-header-cell {
    width: 11%;
  }
}
.str-table td {
  cursor: pointer;
  border-bottom: solid 1px var(--line-color);
}
.str-table-cell {
  height: 72px;
  color: var(--title-color);
}
.str-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
  padding-top: 13px;
}

[id^="bacen-payments-table-head"] {
  width: 14%;
  white-space: nowrap;
}
[id^="bacen-payments-table-cell"] {
  white-space: nowrap;
}

.modal-testing {
  background-color: #0ff;
}




.tags-segmented-container {
  flex-flow: row;
  gap: 10px;
  overflow: auto;
}




.institution-request-form-control {
  display: flex;
  flex-direction: column;
}
.institution-request-amount-group {
  display: flex;
  gap: 10px;
}
.institution-request-modal-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.institution-request-modal-footer {
  padding: 10px 25px;
  display: flex;
  justify-content: flex-end;
}




.str-consult-sidebar-inputs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--space-xl);
}
.str-mobile-sidebar-consult-tags-container {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 12px;
  align-self: stretch;
  flex-wrap: wrap;
}

.str-consult-table {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 12px;
  table-layout: auto !important;
  transform: rotateX(180deg);
}
@media (max-width: 430px) {
  .str-consult-table {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
.str-consult-table td {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
@media (max-width: 430px) {
  .str-consult-table td {
    padding-right: 0px;
  }
}
.str-consult-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.str-consult-container {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  transform: rotateX(180deg);
  margin-block: 20px;
}
@media (max-width: 430px) {
  .str-consult-container {
    margin-top: 0px;
    margin-block: 0px;
  }
}
.str-consult-input-label {
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
}
.str-consult-outer-container {
  padding: 0 var(--space-15xl);
}
@media (max-width: 1255px) {
  .str-consult-outer-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .str-consult-outer-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .str-consult-outer-container {
    padding: 0;
  }
}
.str-consult-inputs-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
@media (max-width: 1100px) {
  .str-consult-inputs-container {
    display: grid;
    gap: 8px;
  }
}
.str-consult-operation-select-container {
  width: 100%;
}
@media (max-width: 1100px) {
  .str-consult-operation-select-container {
    grid-row: 1;
    grid-column: 1;
  }
}
.str-consult-resource-select-container {
  width: 100%;
}
@media (max-width: 1100px) {
  .str-consult-resource-select-container {
    grid-row: 1;
    grid-column: 2;
  }
}
.str-consult-status-select-container {
  width: 100%;
}
@media (max-width: 1100px) {
  .str-consult-status-select-container {
    grid-row: 2;
    grid-column: 1;
  }
}
.str-consult-fill-available {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
.str-consult-overlay-x {
  overflow-x: overlay;
}
@media (max-width: 430px) {
  .mobile-hidden {
    display: none;
  }
}
.mobile-show-table {
  display: none;
}
@media (max-width: 430px) {
  .mobile-show-table {
    display: table;
  }
}
.mobile-show-flex {
  display: none;
}
@media (max-width: 430px) {
  .mobile-show-flex {
    display: flex;
  }
}
.str-consult-tags-container {
  display: flex;
  padding: 24px 0px 0px 0px;
  align-items: center;
  align-content: center;
  gap: 12px;
  align-self: stretch;
  flex-wrap: wrap;
}
@media (max-width: 430px) {
  .str-consult-tags-container {
    padding: 0px 24px 16px 24px;
  }
}
.str-consult-tag-view-container {
  display: flex;
  padding: var(--space-xs) var(--space-s);
  align-items: center;
  gap: var(--space-s);
  border-radius: var(--space-s);
  border: 1px solid var(--border-primary-default, #dcdbde);
  background: var(--background-full-neutral-secondary, #f9f9fc);
}
.str-consult-tag-view-text {
  font-size: var(--text-s-regular-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-s-regular-line-height); /* 150% */
}
.str-consult-tag-close-img {
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.str-consult-tag-close-img > g > path {
  fill: var(--action-or-selection-color);
}
.str-consult-mobile-operation-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2xl) var(--space-xl) 32px var(--space-xl);
}
.str-consult-mobile-title > svg > path,
.str-consult-mobile-operation-select > svg > path {
  fill: var(--action-or-selection-color);
}
.str-consult-mobile-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.str-consult-mobile-operation-select-title {
  font-size: var(--heading-s-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--heading-s-line-height);
}
.str-consult-bottom-sheet-container {
  width: calc(100% - 48px);
  border-radius: var(--radius-l) var(--radius-l) 0px 0px;
  background: var(--menu-background-color);
  position: absolute;
  bottom: 0px;
  display: flex;
  padding: var(--space-s) var(--space-xl) 0px var(--space-xl);
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.str-consult-bottom-sheet-content-container {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.str-consult-bottom-sheet-title {
  font-size: var(--heading-l-size);
  font-weight: 600;
  line-height: var(--heading-l-line-height);
}
.str-consult-bottom-sheet-content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  align-self: stretch;
}
.str-consult-bottom-sheet-content-item {
  display: flex;
  padding: var(--space-l);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  cursor: pointer;
}
.str-consult-bottom-sheet-content-item > svg > g > path,
.str-consult-bottom-sheet-content-item > svg > path {
  fill: var(--title-color);
}
.str-consult-bottom-sheet-content-item-text {
  font-size: var(--text-s-regular-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
}
.download-statement-button-container {
  display: flex;
  padding: 10px 0px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.download-statement-button-row-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.download-statement-button-row-container > svg > g > path {
  fill: var(--action-or-selection-color);
}
.download-statement-button-container:hover > div > svg > g > path {
  fill: var(--text-link-hover);
}

.virtual-card-modal-container {
  padding: var(--space-xl);
}
.virtual-card-modal-footer {
  padding: var(--space-xl);
}

.purchase-export-modal-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-xl);
}
.expand-export-button {
  padding: var(--space-l) var(--space-xl);
}
@media (max-width: 700px) {
  .expand-export-button {
    width: 100%;
    padding: var(--space-l) var(--space-xl);
    box-sizing: border-box;
  }
}

.purchase-filter-modal-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-xl);
}
.modal-footer-container {
  border-top: 1px solid var(--border-primary-default);
  padding: var(--space-xl);
}
@media (max-width: 700px) {
  .modal-footer-container {
    flex-direction: column-reverse;
    gap: var(--space-xl);
    align-items: center;
  }
}
@media (max-width: 720px) {
  .cardholder-container {
    flex-direction: column;
    gap: var(--space-xl);
  }
}
.info-icon {
  cursor: pointer;
}
.info-icon > svg > g > path,
.info-icon > svg > path,
.info-icon > * {
  fill: var(--background-brand-dark);
}
#purchase-remove-filter-button {
  padding: 10px var(--space-xl) 10px 0;
}
@media (max-width: 700px) {
  #purchase-remove-filter-button {
    width: 100%;
    padding: 10px var(--space-xl);
    box-sizing: border-box;
  }
}
@media (max-width: 700px) {
  #purchase-submit-filter-button {
    width: 100%;
    box-sizing: border-box;
  }
}

.purchase-table-cell {
  height: 72px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.purchase-details-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.avatar-shimmer {
  width: 48px;
  height: 48px;
  padding: 0 !important;
  border-radius: 50%;
}
.card-item-flex {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.avatar-cell {
  width: 20%;
  padding: 15px;
}
.purchase-cell-attatchment-detail-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  width: fit-content;
  border: solid 1px var(--border-color);
  border-radius: 4px;
  padding: 0 4px;
  max-width: 160px;
  min-width: 64px;
  height: 30px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  position: relative;
  z-index: 18;
}
.purchase-cell-attatchment-detail-item:hover {
  border: solid 1px var(--action-or-selection-color);
}
.purchase-cell-attatchment-detail-item:active > .purchase-cell-attatchment-detail-item-label,
.purchase-cell-attatchment-detail-item:active > img {
  opacity: 0.5;
}
.purchase-cell-attatchment-detail-item:hover > .purchase-cell-attatchment-detail-item-label {
  color: var(--action-or-selection-color);
}
.purchase-cell-attatchment-detail-item > div > svg path {
  fill: var(--border-color);
}
.purchase-cell-attatchment-detail-item:hover > div > svg path {
  fill: var(--action-or-selection-color);
}
.purchase-cell-attatchment-detail-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  margin-right: 4px;
}
@media (max-width: 1200px) {
  .shimmer-tag,
  .purchase-tags,
  #purchase-table-header-tags {
    display: none !important;
  }
}
@media (min-width: 765px) {
  .mobile-purchase-mobile-list-view {
    display: none;
  }
}
.purchase-mobile-table-cell {
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
  border-bottom: solid 1px var(--line-color);
  padding: 16px 0px;
}
.purchase-mobile-table-cell-row-container {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  justify-content: space-between;
}
.purchase-mobile-table-cell-category-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-xs-regular-size);
  font-weight: 400;
  line-height: var(--text-xs-regular-line-height);
  height: 20px;
}
.purchase-mobile-table-cell-status {
  height: 12px;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--space-xs);
  font-size: var(--size-xs);
  font-weight: 400;
  line-height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.purchase-mobile-table-cell-description {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-s-regular-size);
  font-weight: 400;
  line-height: var(--text-s-regular-line-height);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.purchase-mobile-table-cell-card-number {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Pretendard-Thin';
  font-size: var(--text-xs-thin-size);
  font-weight: 200;
  line-height: var(--text-xs-thin-line-height);
}
.purchase-mobile-details-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-s);
  width: 100%;
}
.purchase-mobile-table-text-right {
  text-align: right;
  flex: none;
}
.purchase-mobile-table-cell-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
#purchase-table-cell-description {
  width: 177px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 800px) {
  .purchase-avatar,
  #purchase-table-cell-avatar {
    display: none;
  }
}
@media (max-width: 800px) {
  #purchase-table-cell-detail-attatchment {
    display: none !important;
  }
}
.purchase-table-header-date,
#purchase-table-header-date {
  width: 5%;
}
@media (max-width: 1200px) {
  .purchase-table-header-date,
  #purchase-table-header-date {
    width: 10%;
  }
}
.purchase-table-header-description,
#purchase-table-header-description {
  width: 15%;
}
.purchase-table-header-card,
#purchase-table-header-card {
  width: 15%;
}
.purchase-table-header-amount,
#purchase-table-header-amount {
  width: 10%;
}
.purchase-table-header-status,
#purchase-table-header-status {
  width: 5%;
}
.purchase-table-header-tags,
#purchase-table-header-tags {
  width: 10%;
}

.amount-header {
  width: 100px;
  height: 20px;
  display: block;
  margin-bottom: 3px;
}
.amount-tax {
  height: 15px;
  width: 100px;
  display: block;
}
.status-loading {
  display: block;
  height: 28px;
  width: 100px;
  border-radius: 10px;
  margin-top: -4px;
}
.purchase-detail-container {
  position: relative;
}
.attachments-collection {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.attachments-collection-view-cell {
  width: 64px;
  height: 64px;
  cursor: pointer;
  border-radius: 4px;
  background-color: var(--menu-background-color);
}
.add-attachments-collection-view-cell {
  width: 64px;
  height: 68px;
  cursor: pointer;
  border-radius: 4px;
  background-color: var(--menu-background-color);
  display: flex;
}
.add-attachments-icon {
  color: var(--action-or-selection-color);
  margin: auto;
  width: 16px;
  height: 16px;
}
.add-attachments-collection-view-cell:hover,
.attachments-collection-view-cell:hover {
  outline: 2px solid var(--action-or-selection-color);
}
.purchase-detail-title-container-loading {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 16px;
}
.title-loading {
  display: none;
  color: var(--action-or-selection-color);
}
.tags-content-container {
  flex-flow: row;
  gap: 10px;
}

#purchase-waiver-container {
  width: calc(100% - 40px);
  margin-bottom: 10px;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
#purchase-waiver-spinner {
  margin-top: 20px;
}
#purchase-waiver-button-yes,
#purchase-waiver-button-no {
  width: fit-content;
  width: -moz-fit-content;
}
#purchase-waiver-button-container {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 600px) {
  #purchase-waiver-button-container {
    flex-direction: column;
  }
}

.card-holder-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.card-holder-search-container {
  width: 30%;
}
.card-holder-search-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 1%;
}
.card-holder-checkbox-spacing {
  margin-right: 10px;
}
#purchase-table-header-name {
  width: 51%;
}
@media (max-width: 700px) {
  #purchase-table-header-name {
    width: 48%;
  }
}
.main-card-outer-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  padding: 0 var(--space-15xl);
  padding-bottom: 24px;
}
@media (max-width: 1255px) {
  .main-card-outer-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .main-card-outer-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .main-card-outer-container {
    padding: 0 var(--space-xl);
  }
}
.card-holder-list-container {
  width: 100%;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  background-color: var(--menu-background-color);
  padding: 40px 40px 0px 40px;
  border-radius: var(--radius-l);
  flex: 1 0 0;
}
@media (max-width: 700px) {
  .card-holder-list-container {
    background-color: transparent;
    padding: 0;
  }
}
.card-holder-list-container > .batch-alert {
  margin-top: 20px;
}
.card-holder-top-section-container {
  position: sticky;
  z-index: 20;
  top: 0;
  background-color: var(--menu-background-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 8px;
}
@media (max-width: 700px) {
  .card-holder-top-section-container {
    background-color: var(--view-background-color);
    padding-top: 16px;
  }
}
.card-holder-sort-container {
  display: flex;
  align-items: center;
  flex: 1 0 0;
  gap: 20px;
  justify-content: space-between;
}
@media (max-width: 700px) {
  .card-holder-sort-container {
    flex-direction: column;
    align-items: start;
  }
}
.card-holder-list-header-buttons-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
@media (max-width: 870px) {
  .card-holder-list-header-buttons-container {
    flex-direction: row;
  }
}
.card-holder-list-table-container {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
  .card-holder-list-table-container {
    margin-top: 0px;
  }
}
.card-holder-option-dropdown-view {
  right: 0px;
  left: 0px;
  top: 24px;
  position: absolute;
  z-index: 25;
}
.card-holder-table {
  width: 100%;
}
.card-holder-table tr {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
#checkbox-header-label {
  display: none;
}
.card-holder-table-cell #table-cell-selected {
  position: relative;
  padding-right: 30px;
  padding-bottom: 20px;
  z-index: 10;
}
@media (max-width: 700px) {
  .card-holder-table > thead > tr > .responsive-hide {
    display: none;
  }
}
@media (max-width: 700px) {
  #checkbox-header-label {
    display: block;
    font-family: 'Pretendard-Hair';
  }
}
@media (max-width: 700px) {
  .card-holder-table tr {
    position: relative;
    padding: 12px 0px;
  }
}
.card-holder-table-header {
  height: 44px;
}
.card-holder-table-header td {
  font-size: 14px;
  color: var(--text-color);
  padding-bottom: 13px;
}
@media (max-width: 700px) {
  .card-holder-table-header td {
    padding-bottom: 0px;
  }
}
.card-holder-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
@media (max-width: 700px) {
  .card-holder-table-header {
    border-bottom: none !important;
  }
}
@media (max-width: 700px) {
  .card-holder-table-cell td {
    display: flex;
    border: none;
    align-items: start;
    padding-top: 12px;
    justify-content: space-between;
  }
}
@media (max-width: 700px) {
  .card-holder-table-cell td::first-child {
    padding-top: 8px;
  }
}
@media (max-width: 700px) {
  .card-holder-table-cell td:last-child {
    padding-bottom: 8px;
  }
}
@media (max-width: 700px) {
  .card-holder-table-cell td::before {
    content: attr(data-cell);
    text-transform: capitalize;
    color: var(--text-color);
    font-family: 'Pretendard-Thin';
    font-size: var(--text-xs-regular-size);
    line-height: var(--text-xs-regular-line-height);
  }
}
@media (max-width: 700px) {
  .card-holder-table-cell #table-cell-selected {
    display: table-cell;
    padding-right: 16px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 32px;
  }
}
@media (max-width: 700px) {
  .card-holder-table-cell-checkbox-container label spam,
  .card-holder-table-cell-checkbox-container label svg {
    top: 12px;
  }
}
@media (max-width: 375px) {
  .card-holder-title-view {
    justify-content: space-between;
  }
}
@media (max-width: 390px) {
  .corporate-card-table-cell-label {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: end;
  }
}

.request-card-modal-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}
.request-card-modal-header-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

#rule-date-days-container > .days-container-options {
  border-radius: 8px;
}
@media (max-width: 500px) {
  #rule-date-days-container {
    grid-auto-flow: unset;
    grid-template-columns: auto auto auto auto;
  }
}

#rule-location-merchant-category #rule-location-merchant-category-table {
  width: calc(100% - 50px);
  max-height: 180px;
}
#rule-location-country .request-search-textfield-result-list {
  width: calc(100% - 50px);
  max-height: 160px;
}
#rule-location-merchant-category > #rule-location-merchant-category-tag,
#rule-location-country > .request-search-textfield-result-container {
  border-radius: var(--space-m);
}
#rule-location-country .input:first-child {
  padding-right: 5%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_19146_18283)%22%3E%3Cpath%20d%3D%22M15.8047%2014.8619L11.8253%2010.8825C12.9098%209.55625%2013.4429%207.86392%2013.3146%206.15556C13.1862%204.44721%2012.4061%202.85354%2011.1357%201.7042C9.86531%200.554862%208.20174%20-0.0622172%206.4891%20-0.019396C4.77647%200.0234252%203.14581%200.72287%201.93442%201.93426C0.723023%203.14566%200.0235778%204.77632%20-0.0192434%206.48895C-0.0620646%208.20158%200.555014%209.86516%201.70435%2011.1356C2.85369%2012.406%204.44736%2013.1861%206.15571%2013.3144C7.86407%2013.4428%209.5564%2012.9096%2010.8827%2011.8252L14.862%2015.8045C14.9877%2015.926%2015.1561%2015.9932%2015.3309%2015.9916C15.5057%2015.9901%2015.6729%2015.92%2015.7966%2015.7964C15.9202%2015.6728%2015.9903%2015.5056%2015.9918%2015.3308C15.9933%2015.156%2015.9261%2014.9876%2015.8047%2014.8619ZM6.66667%2011.9999C5.61184%2011.9999%204.58069%2011.6871%203.70363%2011.101C2.82657%2010.515%202.14298%209.68204%201.73932%208.7075C1.33565%207.73296%201.23003%206.6606%201.43582%205.62604C1.64161%204.59147%202.14956%203.64117%202.89544%202.89529C3.64132%202.14941%204.59163%201.64145%205.62619%201.43567C6.66076%201.22988%207.73311%201.3355%208.70765%201.73916C9.68219%202.14283%2010.5151%202.82642%2011.1012%203.70348C11.6872%204.58054%2012%205.61169%2012%206.66652C11.9984%208.08052%2011.436%209.43615%2010.4362%2010.436C9.43631%2011.4359%208.08067%2011.9983%206.66667%2011.9999Z%22%20fill%3D%22%23707072%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_19146_18283%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat 98% 50%;
}
#rule-location-merchant-category .input:first-child {
  padding-right: 20px;
  background: url(./images/chevron-small-down.svg) no-repeat 98% 50%;
}

.request-virtual-card-spending-control-info-image > g > path {
  fill: var(--evermore-medium);
}
.request-virtual-card-spending-control-info-image {
  align-self: center;
}
.request-virtual-card-spending-control-info-container {
  margin-top: 16px;
  border-radius: 16px;
  background: var(--evermore-light);
}
#request-virtual-card-spending-control-period-dropdown > .simple-arrow-down,
#request-virtual-card-spending-control-currency-dropdown > .simple-arrow-down {
  top: 20px;
}
@media (max-width: 500px) {
  .request-virtual-card-spending-control-button {
    width: calc(100% - 2 * var(--space-xl));
  }
}
#request-virtual-card-spending-control-back-button {
  padding-left: 0px;
}
@media (max-width: 500px) {
  #request-virtual-card-spending-control-back-button {
    color: var(--background-brand-dark);
    border-radius: var(--radius-full);
    border: 1px solid var(--background-brand-dark);
    padding: 10px var(--space-xl);
    font-size: var(--text-s-demibold-size);
    font-style: normal;
    line-height: var(--text-s-demibold-line-height);
    letter-spacing: var(--text-s-demibold-letter-spacing);
  }
}
@media (max-width: 500px) {
  #request-virtual-card-spending-control-back-button:hover {
    color: var(--background-brand-light);
    border: 1px solid var(--background-brand-light);
  }
}
#request-virtual-cardholder-textfield .input:first-child {
  padding-right: 5%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_19146_18283)%22%3E%3Cpath%20d%3D%22M15.8047%2014.8619L11.8253%2010.8825C12.9098%209.55625%2013.4429%207.86392%2013.3146%206.15556C13.1862%204.44721%2012.4061%202.85354%2011.1357%201.7042C9.86531%200.554862%208.20174%20-0.0622172%206.4891%20-0.019396C4.77647%200.0234252%203.14581%200.72287%201.93442%201.93426C0.723023%203.14566%200.0235778%204.77632%20-0.0192434%206.48895C-0.0620646%208.20158%200.555014%209.86516%201.70435%2011.1356C2.85369%2012.406%204.44736%2013.1861%206.15571%2013.3144C7.86407%2013.4428%209.5564%2012.9096%2010.8827%2011.8252L14.862%2015.8045C14.9877%2015.926%2015.1561%2015.9932%2015.3309%2015.9916C15.5057%2015.9901%2015.6729%2015.92%2015.7966%2015.7964C15.9202%2015.6728%2015.9903%2015.5056%2015.9918%2015.3308C15.9933%2015.156%2015.9261%2014.9876%2015.8047%2014.8619ZM6.66667%2011.9999C5.61184%2011.9999%204.58069%2011.6871%203.70363%2011.101C2.82657%2010.515%202.14298%209.68204%201.73932%208.7075C1.33565%207.73296%201.23003%206.6606%201.43582%205.62604C1.64161%204.59147%202.14956%203.64117%202.89544%202.89529C3.64132%202.14941%204.59163%201.64145%205.62619%201.43567C6.66076%201.22988%207.73311%201.3355%208.70765%201.73916C9.68219%202.14283%2010.5151%202.82642%2011.1012%203.70348C11.6872%204.58054%2012%205.61169%2012%206.66652C11.9984%208.08052%2011.436%209.43615%2010.4362%2010.436C9.43631%2011.4359%208.08067%2011.9983%206.66667%2011.9999Z%22%20fill%3D%22%23707072%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_19146_18283%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat 98% 50%;
}
#request-virtual-cardholder-textfield > .input {
  border-radius: 12px;
}
@media (max-width: 380px) {
  .virtual-card-currency-period-input-container {
    flex-direction: column;
  }
}
.virtual-card-currency-period-input-container > div {
  width: calc(100% / 3);
}
@media (max-width: 380px) {
  .virtual-card-currency-period-input-container > div {
    width: 100%;
  }
}

.request-wallet-card-info-list {
  padding-left: 20px;
}
.request-wallet-card-info-list > li::marker {
  font-family: 'Pretendard-Demibold';
  font-size: var(--text-xs-demibold-size);
  font-style: normal;
  line-height: var(--text-xs-demibold-line-height);
  letter-spacing: var(--text-xs-demibold-letter-spacing);
}
#request-wallet-card-video::-webkit-media-controls-volume-slider {
  display: none;
}
#request-wallet-card-video::-webkit-media-controls-mute-button {
  display: none;
}

#card-design-container {
  max-width: 430px;
  height: 272px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #4a525f;
  background-color: #171b21;
}
#card-design-magstripe {
  background-color: #111418;
  height: 74px;
  width: 100%;
  border-radius: 16px 16px 0px 0px;
  border-bottom: 1px solid #4a525f;
}
#card-design-name {
  margin-top: 40px;
  margin-left: 30px;
  color: #fff;
}
#card-design-number {
  width: fit-content;
  margin-top: 40px;
  margin-left: 30px;
  color: #fff;
}
#card-design-security {
  margin-top: 20px;
  margin-left: 30px;
  display: flex;
  color: #fff;
}
#card-design-expiration-label {
  margin-right: 10px;
  color: #fff;
}
#card-design-expiration-value {
  width: 50px;
  color: #fff;
}
#card-design-security-code-label {
  margin-left: 20px;
  margin-right: 10px;
  color: #fff;
}
#card-design-logo {
  width: 64px;
  height: 64px;
  margin-top: -64px;
  margin-left: 336px;
  background-image: url(./images/new-logo.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 550px) {
  #card-design-logo {
    margin-left: 290px;
  }
}
@media (max-width: 450px) {
  #card-design-logo {
    margin-left: 250px;
  }
}
#card-design-name-loading {
  max-width: 350px;
  height: 23px;
  margin-top: -124px;
  margin-left: 30px;
}
#card-design-number-loading {
  margin-top: 38px;
  max-width: 220px;
  margin-left: 30px;
  height: 25px;
}
#card-design-expiration-loading {
  max-width: 55px;
  height: 20px;
  margin-top: 16px;
  margin-left: 72px;
}
#card-design-security-code-loading {
  max-width: 40px;
  height: 20px;
  margin-top: -20px;
  margin-left: 188px;
}
#card-design-security-code-value {
  color: #fff;
}

.corporate-card-table-cell {
  height: 72px;
  color: var(--title-color);
  vertical-align: middle;
}
.corporate-card-status-badge {
  background-color: #f00;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  left: 30px;
  bottom: 5px;
}
.corporate-card-image {
  position: relative;
  top: 15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.corporate-card-table-cell-avatar-reset {
  top: 0;
}
.corporate-badge-icon {
  width: 12px !important;
  height: 12px;
  color: #fff;
}
.corporate-card-table-cell-avatar-container {
  position: relative;
  top: 12px;
}
.card-table-header-checkbox-label {
  width: 5%;
}
.card-table-header-name-label {
  width: 30%;
}
.card-table-header-spending-control-label {
  width: 40%;
}
.card-table-header-status-label {
  width: 20%;
}
@media (max-width: 1440px) {
  .card-table-header-checkbox-label {
    width: 5%;
  }
  .card-table-header-spending-control-label {
    width: 22%;
  }
  .card-table-header-status-label {
    width: 10%;
  }
}
@media (max-width: 500px) {
  .card-table-header-checkbox-label {
    width: 7%;
  }
  .card-table-header-spending-control-label {
    width: 20%;
  }
}

#card-status-title {
  margin-right: 20px;
  width: 30px;
}
#card-status {
  display: block;
}
#card-status-loading {
  max-width: 60px;
  height: 28px;
  margin-top: -34px;
  margin-left: 49px;
  border-radius: 10px;
}

.card-filter-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.card-filter-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.card-filter-modal-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.card-filter-modal-form {
  width: 48%;
}
.card-filter-modal-full-form {
  width: 100%;
}
.card-filter-modal-form,
.card-filter-modal-full-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.card-filter-modal-form select {
  min-height: 44px;
  margin-top: 5px;
}
.card-filter-modal-button-container {
  display: flex;
  justify-content: flex-end;
}
.member-tags {
  padding-inline-start: 0px;
}
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
}
.member-confirm {
  padding: 20px;
}
.create-member-button-container .loading-ring {
  margin-right: 72px;
}
.card-filter-dropdown {
  margin-top: -6px;
  display: none;
  position: absolute;
  outline: none;
  transition-duration: 80ms;
  background-color: var(--view-background-color);
  min-height: 40px;
  height: auto;
  width: calc(100% - 42px);
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
.card-filter-loading {
  display: flex;
  align-items: baseline;
}

#billing-address-title {
  margin-right: 20px;
  width: 130px;
}
#billing-address1-loading {
  max-width: 160px;
  height: 18px;
}
#billing-address2-loading {
  max-width: 216px;
  height: 16px;
}
.list-card-container {
  position: relative;
}
.list-card-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.list-card-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
  cursor: pointer;
}
.list-card-table-header {
  height: 44px;
}
.list-card-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.list-card-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.list-card-table-cell .shimmer {
  padding: 0px 25% 0px 0px;
}
.list-card-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.list-card-table-row {
  height: 72px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
#billing-address-loading {
  width: 140px;
  height: 20px;
}
#card-balance-warning-container {
  width: 390px;
  margin-bottom: 40px;
  border-radius: 4px;
  padding: 20px;
  display: none;
}
#card-balance-warning-button {
  width: fit-content;
  width: -moz-fit-content;
  margin-top: 20px;
}
#billing-address {
  cursor: pointer;
}
#billing-address:hover {
  color: var(--action-or-selection-color);
}
#card-info-container {
  overflow: hidden;
}
.avatar-shimmer {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.reset-padding {
  padding: 0 !important;
}
.detail-checkbox {
  height: 28px;
  width: 28px;
  border-radius: 4px;
  padding: 0 !important;
}
.list-card-banner-text {
  margin-left: 20px;
  margin-right: 20px;
}
.list-card-banner-container {
  width: fit-content;
  background-color: #eaf4fe;
  height: 79px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.list-card-banner-button {
  margin-right: 20px;
}
.card-holder-spending-control-container {
  width: 100%;
  min-width: 330px;
}
#card-list-actions-container,
#spending-counter-content-view,
#spending-counter-content-mobile-view,
#card-list-actions-container-mobile {
  display: none;
}
.card-list-container {
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: auto 1fr;
  grid-row-gap: var(--space-5xl);
  grid-column-gap: var(--space-3xl);
  margin-bottom: var(--space-4xl);
}
.card-detail-container {
  grid-column: 1;
  grid-row: 1;
}
.list-card-container {
  grid-column: 1;
  grid-row: 2;
}
.card-holder-spending-control-container {
  grid-column: 2;
  grid-row: span 2;
  overflow: hidden;
}
@media (max-width: 1050px) {
  .card-list-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .card-detail-container {
    grid-row: 1;
  }
  .list-card-container {
    grid-row: 3;
  }
  .card-holder-spending-control-container {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (max-width: 500px) {
  .cardholder-detail-title-label {
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 700px) {
  #corporate-card-table-cell-card-end,
  .corporate-card-table-cell-avatar-view {
    display: none;
  }
}
@media (min-width: 700px) {
  #corporate-card-table-cell-card-end-mobile {
    display: none;
  }
}
.card-holder-unlock-card-banner-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 40px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #f0ecdd;
  background: #fffbeb;
  gap: 12px;
  justify-content: space-between;
}
@media (max-width: 570px) {
  .card-holder-unlock-card-banner-container {
    flex-direction: column;
    margin-bottom: 24px;
  }
}

.choose-wallet-table-cell {
  height: 72px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.choose-wallet-table-cell .shimmer {
  width: 100px;
  height: 14px;
  margin-bottom: 4px;
}
.choose-wallet-table-cell td:first-child {
  padding-left: 1rem;
}
.choose-wallet-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.choose-wallet-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.choose-wallet-table-header {
  height: 44px;
}
.choose-wallet-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.choose-wallet-result-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.choose-wallet-result-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.choose-wallet-result-table-header {
  height: 44px;
}
.choose-wallet-table-cell {
  height: 72px;
}
#wallet-back-button {
  text-align: left;
  padding: 0 0;
  margin-top: -12px;
}

.create-wallet-container {
  position: relative;
}
.create-wallet-form {
  margin-bottom: 10px;
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
}
.create-wallet-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.cost-center-dropdown {
  outline: none;
  margin-top: -6px;
  transition-duration: 80ms;
  background-color: var(--view-background-color);
  min-height: 40px;
  height: auto;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.wallet-rule-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
  transition: 0.25s;
  overflow: hidden;
}
.cell-expanded {
  height: 100px;
  transition: height 0.25s ease-in;
}
.tag-wallet-member {
  background-color: var(--menu-background-color);
  color: var(--text-color);
  width: fit-content;
  margin-bottom: 4px;
  margin-top: 4px;
  padding: 6px 8px 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-right: 4px;
  height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag-wallet-member-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--border-color);
}
.search-member-img {
  border-radius: 50%;
  background-color: var(--text-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  margin-top: 4px;
  margin-left: 4px;
  margin-right: 4px;
}
.search-member-container {
  display: flex;
  align-items: center;
  height: 58px;
  cursor: pointer;
}
.search-member-tag {
  border: 1px solid var(--border-color);
  background-color: var(--menu-background-color);
  color: var(--text-color);
  width: fit-content;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px 6px 8px;
  border-radius: 8px;
  height: 20px;
  margin-top: 4px;
}
.search-member-center-dropdown {
  outline: none;
  margin-top: -16px;
  transition-duration: 80ms;
  background-color: var(--view-background-color);
  min-height: 40px;
  height: auto;
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.add-wallet-rule-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  overflow: auto;
  max-height: 580px;
}
.add-rule-flex-container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.add-wallet-rule-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.add-wallet-rule-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
  position: relative;
}
.add-wallet-rule-form {
  width: 48%;
}
.add-wallet-rule-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.add-wallet-rule-form select {
  min-height: 44px;
  margin-top: 5px;
}
.add-wallet-rule-select-button-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.reset {
  margin-bottom: 0;
}
.member-tags {
  padding-inline-start: 0px;
}
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
}
.member-confirm {
  padding: 20px;
}
.add-wallet-rule-button-container .loading-ring {
  margin-right: 72px;
}
.add-wallet-search-loading {
  display: flex;
}
.add-wallet-search-loading > label {
  margin-top: 10px;
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.75rem;
  display: flex;
}
#rule-override {
  display: block;
}
#rule-add {
  display: block;
}
.container-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.form-item {
  width: -webkit-fill-available;
}
.modal-content-container {
  padding: 5px;
  margin: 15px;
  max-height: 550px;
  overflow-y: auto;
}
.weekdays-selector-containar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.weekdays-checkbox {
  display: none;
}
.weekdays-selector-item {
  border: 1px solid var(--border-color);
  text-align: center;
  border-radius: 4px;
  width: 25%;
}
.scheduler-conatainer {
  margin-bottom: 2rem;
}
.days-container {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  overflow: overlay;
  grid-auto-flow: column;
}
.days-container::-webkit-scrollbar {
  display: none;
}
.days-container-options {
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  background-color: var(--view-background-color);
  display: flex;
  border: 1px solid var(--border-color);
  padding: 5px;
}
.footer-container-flex {
  display: flex;
  justify-content: end;
}
.days-container-options-title {
  margin: auto;
}
.days-container-options:hover {
  background-color: var(--view-background-color);
  border: 1px solid var(--action-or-selection-color);
  color: var(--title-color);
}
.days-container-options:active {
  transform: scale(0.96);
}
.days-active {
  background-color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
  color: var(--view-background-color);
}
.separator-spacing {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin: 35px 0 35px 0;
}
.flex-item-end {
  display: flex;
  justify-content: end;
}
@media screen and (max-width: 1440px) {
  .modal-content-container {
    max-height: 450px;
  }
}
@media screen and (max-height: 800px) {
  .add-wallet-rule-modal {
    max-height: 425px;
  }
}
@media screen and (max-height: 610px) {
  .add-wallet-rule-modal {
    max-height: 280px;
  }
}

.add-wallet-rule-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.add-wallet-rule-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.add-wallet-rule-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.add-wallet-rule-form {
  width: 48%;
}
.add-wallet-rule-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.add-wallet-rule-form select {
  min-height: 44px;
  margin-top: 5px;
}
.add-wallet-rule-button-container {
  display: flex;
  justify-content: flex-end;
}
.member-tags {
  padding-inline-start: 0px;
}
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
}
.member-confirm {
  padding: 20px;
}
.add-wallet-rule-button-container .loading-ring {
  margin-right: 72px;
}
.add-wallet-search-loading {
  display: flex;
}
.add-wallet-search-loading > label {
  margin-top: 10px;
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.75rem;
  display: flex;
}

.add-balance-amount-container {
  display: flex;
  justify-content: space-between;
}
.add-workspace-amount-container {
  display: flex;
  justify-content: space-between;
  margin-left: 44px;
  margin-right: 6px;
}
#workspace-amount-loading {
  width: 200px;
  height: 22px;
}
#card-amount-loading {
  width: 100px;
  height: 22px;
}
#checkbox-invoice label spam,
#checkbox-payment-request label spam {
  display: block;
  position: relative;
}
#checkbox-invoice label svg,
#checkbox-payment-request label svg {
  position: relative;
  margin-top: -26.5px;
}
#cost-center-input-container {
  display: flex;
}
@media (max-width: 570px) {
  #cost-center-input-container {
    flex-direction: column;
  }
}

.corporate-statement-container {
  position: relative;
}
#corporate-balance-loading {
  width: 250px;
  height: 32px;
  margin-top: 7px;
  font-size: 32px;
}
#corporate-limite-loading {
  width: 250px;
  height: 15px;
  margin-top: 16px;
  font-size: 32px;
}
.corporate-statement-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.corporate-statement-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.corporate-statement-table-header {
  height: 44px;
}
.corporate-statement-table-header td {
  font-size: 14px;
  color: var(--text-color);
  padding-bottom: 13px;
  border-bottom: solid 1px var(--line-color);
}
.corporate-statement-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.corporate-statement-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.corporate-statement-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.corporate-statement-table-cell {
  height: 72px;
  color: var(--title-color);
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.flow-icon-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 16px;
}
.corporate-statement-table-cell-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  #corporate-statement-table-cell-fee {
    display: none;
  }
}
.balance-negative {
  font-size: 32px;
  color: var(--dark-pink);
  margin-top: 7px;
}
.limit-bar-container {
  width: 50%;
}
@media (max-width: 700px) {
  .limit-bar-container {
    width: 100%;
  }
}


.add-card-rule-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.add-card-rule-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.add-card-rule-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.add-card-rule-form {
  width: 48%;
}
.add-card-rule-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.add-card-rule-form select {
  min-height: 44px;
  margin-top: 5px;
}
.add-card-rule-button-container {
  display: flex;
  justify-content: flex-end;
}
.member-tags {
  padding-inline-start: 0px;
}
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
}
.member-confirm {
  padding: 20px;
}
.add-card-rule-button-container .loading-ring {
  margin-right: 72px;
}
.add-wallet-search-dropdown {
  outline: none;
  transition-duration: 80ms;
  background-color: var(--view-background-color);
  max-height: 180px;
  min-height: 40px;
  height: auto;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  margin-top: -6px;
  display: none;
  width: -webkit-fill-available;
  min-width: 198px;
  position: absolute;
  z-index: 10;
  overflow-y: hidden;
}
.add-wallet-search-dropdown:hover {
  overflow-y: overlay;
}
.add-wallet-search-loading {
  display: flex;
}
.add-wallet-search-loading > label {
  margin-top: 10px;
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.75rem;
  display: flex;
}

.edit-card-rule-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.edit-card-rule-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.edit-card-rule-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.edit-card-rule-form {
  width: 48%;
}
.edit-card-rule-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.edit-card-rule-form select {
  min-height: 44px;
  margin-top: 5px;
}
.edit-card-rule-button-container {
  display: flex;
  justify-content: flex-end;
}
.member-tags {
  padding-inline-start: 0px;
}
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
}
.member-confirm {
  padding: 20px;
}
.edit-card-rule-button-container .loading-ring {
  margin-right: 72px;
}

.reverse-balance-amount-container {
  display: flex;
  justify-content: space-between;
}
.reverse-workspace-amount-container {
  display: flex;
  justify-content: space-between;
  margin-left: 44px;
  margin-right: 6px;
}
#workspace-amount-loading {
  width: 200px;
  height: 22px;
}
#card-amount-loading {
  width: 100px;
  height: 22px;
}
.reverse-balance-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.reverse-balance-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.reverse-balance-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.reverse-balance-form {
  width: 48%;
}
.reverse-balance-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.reverse-balance-form select {
  min-height: 44px;
  margin-top: 5px;
}
.reverse-balance-button-container {
  display: flex;
  justify-content: flex-end;
}

.unlock-card-container-background {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--menu-background-color);
}
.unlock-card-container {
  max-width: 400px;
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background-color: var(--view-background-color);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.unlock-card-image-container {
  display: flex;
  margin-top: 24px;
  margin-bottom: 24px;
}
#blocked-card-image-view {
  margin: auto;
  width: 80px;
  height: 80px;
}
#unlock-card-last-numbers-input,
#unlock-card-token-input {
  text-align: center;
}
#unlock-card-search-container,
#unlock-card-password-container {
  min-height: 400px;
}
.unlock-card-preview {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  padding: 20px;
}
.unlock-card-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unlock-card-preview-logo-container {
  display: flex;
  gap: 12px;
  align-items: center;
}
#unlock-card-show-password,
#unlock-card-show-confirmation-password {
  position: absolute;
  right: 52px;
  margin-top: 19px;
  color: var(--action-or-selection-color);
  text-align: center;
  cursor: pointer;
}
#unlock-card-show-password:active,
#unlock-card-show-confirmation-password:active {
  color: var(--line-color);
}
.unlock-card-success-icon {
  margin: auto;
  width: 400px;
  height: 224px;
  padding-left: 30px;
}
.unlock-card-success-title {
  font-size: 32px;
  color: var(--title-color);
  margin-top: 7px;
}
.unlock-card-success-title-containter {
  display: flex;
  flex-flow: column;
  gap: 16px;
}
.unlock-logo-container {
  display: flex;
  justify-content: start;
}
.unlock-logo-container img {
  width: 230px;
}
.unlock-title {
  font-family: "Pretendard-Demibold";
  text-align: start;
  font-size: 24px;
  line-height: 24px;
}
.unlock-subtitle {
  font-family: "Pretendard-Light";
  text-align: start;
  font-size: 20px;
  line-height: 24px;
}

.unlock-card-token-container {
  position: relative;
}
.unlock-card-token-image-container {
  display: flex;
  margin-top: 24px;
  margin-bottom: 24px;
}
#blocked-card-image-view {
  margin: auto;
  width: 80px;
  height: 80px;
}
#unlock-card-token-last-numbers-input {
  text-align: center;
}
.unlock-card-token-preview {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  padding: 20px;
}
.unlock-card-token-preview-info {
  display: flex;
  justify-content: end;
  align-items: center;
}
.unlock-card-token-preview-logo-container {
  display: flex;
  gap: 12px;
  align-items: center;
}
#unlock-card-token-show-password,
#unlock-card-token-show-confirmation-password {
  position: absolute;
  right: 52px;
  margin-top: 19px;
  color: var(--action-or-selection-color);
  text-align: center;
  cursor: pointer;
}
#unlock-card-token-show-password:active,
#unlock-card-token-show-confirmation-password:active {
  color: var(--line-color);
}
.unlock-card-token-success-icon {
  margin: auto;
  width: 100%;
}
.unlock-card-token-success-title {
  font-size: 32px;
  color: var(--title-color);
  margin-top: 7px;
}
.unlock-card-token-success-title-containter {
  display: flex;
  flex-flow: column;
  gap: 16px;
}
#unlock-card-token-search-container,
#unlock-card-token-password-container {
  display: none;
}
.unlock-card-subtitle {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.link-cost-center-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 20px 24px;
  background-color: var(--view-background-color);
  border-bottom: 2px solid var(--line-color);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  position: relative;
  color: var(--title-color);
}
.teste-sd {
  background-color: var(--view-background-color);
  margin: 4% auto;
  border: 1px solid var(--line-color);
  width: calc(50% - 40px);
  min-height: auto;
  border-radius: 24px;
}
.link-cost-center-modal-button-container {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 500px) {
  .link-cost-center-modal-button-container {
    justify-content: center;
  }
}
@media (max-width: 500px) {
  .link-cost-center-modal-button-container > #link-cost-center-modal-submit-button {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 500px) {
  .link-cost-center-modal-button-container > #link-cost-center-modal-loading {
    margin-right: auto;
    margin-left: auto;
  }
}

.form-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.card-password-change-modal {
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  margin-bottom: 24px;
  column-gap: 20px;
}
.card-change-password-section {
  margin-top: 12px;
}
.card-change-password-section input {
  margin-top: 8px;
}
.card-change-password-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  gap: 12px;
}
#show-new-password {
  position: absolute;
  right: 52px;
  margin-top: 22px;
  color: var(--action-or-selection-color);
  text-align: center;
  cursor: pointer;
}
#show-new-password:active {
  color: var(--line-color);
}
#show-repeat-password {
  position: absolute;
  right: 52px;
  margin-top: 22px;
  color: var(--action-or-selection-color);
  text-align: center;
  cursor: pointer;
}
#show-repeat-password:active {
  color: var(--line-color);
}

.request-limit-footer-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}
.request-limit-modal-container {
  clear: both;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 20px;
}
.request-limit-modal-amount-input-container {
  display: block;
  align-items: start;
  width: 100%;
}
.request-limit-modal-input-title {
  letter-spacing: 0px;
}
.request-limit-modal-types-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}
.request-limit-modal-types-container > collection-view-cell {
  width: 50%;
}
.request-limit-modal-card-type {
  outline: 1px solid var(--border-color);
  height: 60px;
  border-radius: 6px;
  opacity: 1;
  padding: 20px 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  color: var(--text-color);
}
.request-limit-modal-card-text {
  margin-left: 10px;
  margin-right: 20px;
}
.request-limit-modal-card-img {
  margin-left: 20px;
  width: 32px;
  height: 32px;
  font-size: 1.5em;
}
.request-limit-modal-card-title {
  font-size: 14px;
}
.request-limit-modal-active {
  outline: 2px solid var(--action-or-selection-color);
  color: var(--action-or-selection-color);
}
.request-limit-modal-card-img-active > svg > *,
.request-limit-modal-card-img-active > svg > g > * > * {
  fill: var(--action-or-selection-color);
}
#request-limit-modal-amount-input {
  margin-bottom: 32px;
}

.credit-analysis-modal-container {
  clear: both;
  padding-left: 20px;
  padding-right: 20px;
}
.credit-analysis-modal-input-title {
  letter-spacing: 0px;
  text-align: left;
}
.credit-analysis-modal-input-subtitle {
  font-size: 18px;
  color: var(--text-color);
}
.credit-analysis-modal-button-container {
  display: flex;
  padding: 20px;
  justify-content: flex-end;
}
.roller {
  height: fit-content;
  width: fit-content;
  background: var(--view-background-color);
  color: var(--title-color);
  padding: 0.5em 0em;
  font-size: 30px;
  line-height: 32px;
  display: flex;
  list-style-type: none;
}
.roller-list {
  overflow-y: hidden;
  height: 32px;
  padding: 0px;
  list-style-type: none;
}
.roller-list li {
  animation: carousel;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
@-moz-keyframes carousel {
  0% {
    transform: translateY(-64px);
  }
  9% {
    transform: translateY(-64px);
  }
  33% {
    transform: translateY(-32px);
  }
  42% {
    transform: translateY(-32px);
  }
  67% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-webkit-keyframes carousel {
  0% {
    transform: translateY(-64px);
  }
  9% {
    transform: translateY(-64px);
  }
  33% {
    transform: translateY(-32px);
  }
  42% {
    transform: translateY(-32px);
  }
  67% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}
@-o-keyframes carousel {
  0% {
    transform: translateY(-64px);
  }
  9% {
    transform: translateY(-64px);
  }
  33% {
    transform: translateY(-32px);
  }
  42% {
    transform: translateY(-32px);
  }
  67% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes carousel {
  0% {
    transform: translateY(-64px);
  }
  9% {
    transform: translateY(-64px);
  }
  33% {
    transform: translateY(-32px);
  }
  42% {
    transform: translateY(-32px);
  }
  67% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

.card-billing-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
#card-billing-info-container,
#card-billing-info-container-loading {
  margin-top: 32px;
}
.card-billing-info-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 1100px) {
  .card-billing-info-container {
    flex-direction: column;
    gap: 16px;
  }
}
.card-billing-limit-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
.card-billing-balance-subtitle-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
@media (max-width: 700px) {
  .card-billing-balance-subtitle-container {
    margin-top: 20px;
  }
}
#card-billing-close-date {
  margin-top: 4px;
}
.card-billing-balance-value {
  font-size: 32px;
  color: var(--title-color);
  align-self: center;
}
@media (max-width: 1100px) {
  .card-billing-balance-value {
    align-self: flex-start;
  }
}
.card-billing-balance-value .shimmer {
  font-size: 32px;
  color: transparent;
  align-self: center;
}
.card-billing-limit-text {
  font-size: 20px;
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .card-billing-limit-text {
    font-size: 16px;
    margin-top: 0px;
  }
}
.card-billing-limit-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: var(--text-color);
}
@media (max-width: 1100px) {
  .card-billing-limit-item {
    flex-direction: row;
  }
}
.card-billing-charts-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card-billing-chart {
  margin-top: 24px;
  height: 300px;
}
.card-billing-table {
  margin-top: 40px;
  margin-bottom: 32px;
}
.card-billing-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.card-billing-header-cell {
  padding-right: 15px;
  white-space: nowrap;
  font-family: "Pretendard-Thin";
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: 20px;
}
.card-billing-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.card-billing-table td:last-child {
  padding-right: 0;
}
.card-billing-header-cell:last-child {
  padding-right: 0px;
}
.card-billing-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.card-billing-horizontal-bar-container {
  margin-top: 16px;
  border-radius: 4px 4px 4px 4px;
}
.card-billing-horizontal-bar-consumed {
  height: 16px;
  z-index: 1;
}
.card-billing-horizontal-bar-unconsumed {
  height: 16px;
  z-index: 0;
}
.card-billing-horizontal-bar-border-radius-full {
  border-radius: 4px;
}
.card-billing-horizontal-bar-border-radius-left {
  border-radius: 4px 0px 0px 4px;
}
.card-billing-horizontal-bar-border-radius-right {
  border-radius: 0px 4px 4px 0px;
}
.card-billing-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.card-billing-table-cell .shimmer .text-align-center {
  padding: 0px 10% 0px 0px;
}
.card-billing-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.card-billing-status-legend-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.card-billing-status-legend-circle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
.card-billing-banner-container {
  display: flex;
  border: var(--line-color);
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  padding: 24px;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
  background: var(--menu-background-color);
}
.card-billing-banner-title {
  font-size: 26px;
}
.card-billing-banner-subtitle {
  font-size: 14px;
}
.card-billing-date-picker-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 700px) {
  .card-billing-date-picker-container {
    flex-direction: column;
    gap: 16px;
  }
}
.card-billing-container-full-size {
  padding: 0px var(--space-15xl) var(--space-8xl) var(--space-15xl);
}
@media (max-width: 1255px) {
  .card-billing-container-full-size {
    padding: 0px var(--space-8xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .card-billing-container-full-size {
    padding: 0px var(--space-3xl) var(--space-8xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .card-billing-container-full-size {
    padding: 32px var(--space-xl) 40px var(--space-xl);
  }
}

.card-billing-export-modal-section-content {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.card-billing-export-modal-select-container {
  width: 48%;
}
.card-billing-export-modal-select-container > select {
  height: 44px;
  margin: 5px 0 5px;
}
.card-billing-export-modal-info-container {
  background: var(--menu-background-color);
  padding: 8px 16px;
  border-radius: 8px;
  margin-top: 24px;
}
.card-billing-export-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 24px;
  clear: both;
  max-height: 630px;
  overflow-y: auto;
}
@media (max-width: 1440px) {
  .card-billing-export-modal {
    max-height: 480px;
  }
}
.card-billing-export-modal-tab-bar {
  width: 100%;
  display: flex;
  border-bottom: 1px solid var(--line-color);
}
.card-billing-export-modal-section-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-billing-export-modal-section-title {
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  font-family: 'Pretendard-Demibold';
  color: var(--title-color);
}
.card-billing-export-modal-section-subtitle {
  font-family: 'Pretendard-Thin';
  font-size: 14px;
  line-height: 22px;
  font-style: normal;
  font-weight: 200;
  color: var(--text-color);
}
.card-billing-export-modal-input-label {
  font-family: 'Pretendard-Thin';
  font-size: 14px;
  line-height: 20px;
  font-style: normal;
  font-weight: 200;
  color: #505152;
}
.card-billing-export-modal-info-section-content {
  display: flex;
  justify-content: space-between;
}
.card-billing-export-modal-select-title {
  margin-bottom: 4px;
  margin-top: 4px;
}
.card-billing-export-modal-separator-spacing {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin: 25px 0px;
}
.card-billing-export-modal-exports-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.card-billing-export-modal-exports-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.card-billing-export-loading-ring {
  margin-right: 12px !important;
}

#card-billing-detail-table {
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  #card-billing-detail-table {
    width: 100%;
  }
}
.card-billing-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.card-billing-detail-header-cell {
  padding-right: 15px;
  white-space: nowrap;
}
.card-billing-detail-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.card-billing-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.card-billing-detail-table td:last-child {
  padding-right: 0;
}
.card-billing-detail-header-cell:last-child {
  padding-right: 0px;
}
.card-billing-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  cursor: pointer;
}
.card-billing-detail-table-cell .shimmer .text-align-center {
  padding: 0px 10% 0px 0px;
}
.card-billing-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.card-billing-detail-table-cell-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-billing-detail-table-cell-purchase-details-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.card-billing-detail-balance-value {
  font-size: 32px;
  color: var(--title-color);
  width: fit-content;
}
.card-billing-detail-balance-subtitle-container {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.card-billing-detail-info-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 4px;
  padding-bottom: var(--space-2xl);
}
@media (max-width: 1100px) {
  .card-billing-detail-info-container {
    flex-direction: column;
    gap: 48px;
  }
}
.card-billing-detail-tooltip-wrapper {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}
.card-billing-detail-cashback-label {
  margin-top: 8px;
  color: #00b97c;
}
@media (max-width: 1100px) {
  #card-billing-detail-fine-label,
  #card-billing-detail-interest-label,
  #card-billing-detail-interest-value,
  #card-billing-detail-fine-value {
    margin: auto;
  }
}
.card-billing-detail-credit-info-container {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #d3e6f0;
  background: #eaf7fe;
}
#card-billing-detail-table-content::before {
  content: '';
  display: block;
  height: 16px;
}

@media (max-width: 1020px) {
  .card-billing-detail-table-merchant-label {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.card-billing-detail-filter-modal-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-xl);
}
.modal-footer-container {
  border-top: 1px solid var(--border-primary-default);
  padding: var(--space-xl);
}

.card-billing-detail-export-modal-section-content {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.card-billing-detail-export-modal-select-container {
  width: 48%;
}
.card-billing-detail-export-modal-select-container > select {
  height: 44px;
  margin: 5px 0 5px;
}
.card-billing-detail-export-modal-select-container > label {
  line-height: 24px;
}
.card-billing-detail-export-modal-info-container {
  background: var(--menu-background-color);
  padding: 8px 16px;
  border-radius: 8px;
  margin-top: 24px;
}
.card-billing-detail-export-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 24px;
  clear: both;
  max-height: 630px;
  overflow-y: auto;
}
@media (max-width: 1440px) {
  .card-billing-detail-export-modal {
    max-height: 480px;
  }
}
.card-billing-detail-export-modal-tab-bar {
  width: 100%;
  display: flex;
  border-bottom: 1px solid var(--line-color);
}
.card-billing-detail-export-modal-section-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-billing-detail-export-modal-section-title {
  font-size: 24px;
  color: var(--title-color);
}
.card-billing-detail-export-modal-section-subtitle {
  font-size: 14px;
  color: var(--text-color);
}
.card-billing-detail-export-modal-info-section-content {
  display: flex;
  justify-content: space-between;
}
.card-billing-detail-export-modal-select-title {
  margin-bottom: 4px;
  margin-top: 4px;
}
.card-billing-detail-export-modal-separator-spacing {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin: 25px 0px;
}
.card-billing-detail-export-modal-exports-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.card-billing-detail-export-modal-exports-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.card-billing-detail-export-loading-ring {
  margin-right: 12px !important;
}

.card-billing-detail-antecipate-modal-billing-option-active {
  border: 2px solid var(--action-or-selection-color) !important;
}
#card-billing-detail-antecipate-modal-billing-cost-center-option-textfield > .input > input {
  height: auto;
}
#card-billing-detail-antecipate-modal-billing-cost-center-option-textfield > .input {
  display: flex;
  height: 50px;
  padding: var(--space-s) var(--space-m);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  font-size: var(--text-s-regular-size);
  font-style: normal;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
  border-radius: var(--radius-m);
  cursor: text;
  background-color: var(--background-full-neutral-primary);
  border: 1px solid var(--border-primary-default);
  caret-color: var(--border-brand-default);
  box-sizing: border-box;
  color: var(--text-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Pretendard";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
#card-billing-detail-antecipate-modal-billing-cost-center-option-textfield > .input > .tag {
  margin-top: 0px;
}
.card-billing-detail-antecipate-modal-card-icon > svg > path {
  fill: var(--title-color);
}

.card-balance-value {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
}
.card-balance-consumed-bar-container {
  display: flex;
  flex-direction: column;
}
.card-balance-bar {
  display: flex;
}
.card-balance-consumed-bar-information-container {
  display: flex;
  margin-top: 24px;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 900px) {
  .card-balance-consumed-bar-information-container {
    flex-direction: column;
    gap: var(--space-s);
  }
}
.card-balance-information-item {
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center;
}
.consumed-legend {
  width: 4px;
  height: 16px;
  border-radius: 8px;
  background: var(--fearless-dark);
}
.unconsumed-legend {
  width: 4px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--menu-background-color);
}
.card-limit-info-image-container {
  width: 16px;
  height: 16px;
}
.card-limit-info-image-container > svg > g > path {
  fill: var(--action-or-selection-color);
}
.card-limit-info-container {
  position: fixed;
  bottom: 41px;
  background: var(--background-full-neutral-secondary, #f9f9fc);
  width: calc(100% - 540px);
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 8px;
  border-radius: var(--space-l);
  align-self: stretch;
}
@media (max-width: 1225px) {
  .card-limit-info-container {
    width: calc(100% - 420px);
  }
}
@media (max-width: 1140px) {
  .card-limit-info-container {
    width: calc(100% - 160px);
  }
}
@media (max-width: 870px) {
  .card-limit-info-container {
    width: calc(100% - 120px);
  }
}
@media (max-width: 430px) {
  .card-limit-info-container {
    width: calc(100% - 80px);
  }
}
#card-balance-info-container,
#card-balance-info-container-loading {
  margin-bottom: var(--space-13xl);
}
.card-limit-investment-banner-container {
  display: flex;
  align-items: center;
  justify-content: start;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-l);
  background: linear-gradient(269deg, rgba(47,49,51,0) 34.46%, rgba(47,49,51,0.9) 53.81%), url(./images/card-balance-investment-banner.png) #d3d3d3 no-repeat;
  background-position: top right;
  height: 430px;
  background-size: cover;
}
@media (max-width: 700px) {
  .card-limit-investment-banner-container {
    background: linear-gradient(360deg, rgba(47,49,51,0) 34.46%, rgba(47,49,51,0.9) 53.81%), url(./images/card-balance-investment-banner-mobile.png) #d3d3d3 no-repeat;
    flex-direction: column;
    background-position: bottom right;
    background-size: cover;
    height: 600px;
  }
}
.card-limit-investment-banner-text-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 50%;
  max-width: 609px;
  padding: 40px 0px 40px 40px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .card-limit-investment-banner-text-container {
    gap: 0px;
    width: 100%;
    max-width: 100%;
    padding: 40px 40px 10px 40px;
  }
}
.card-balance-container {
  padding: 0px var(--space-15xl) var(--space-8xl) var(--space-15xl);
}
@media (max-width: 1255px) {
  .card-balance-container {
    padding: 0px var(--space-8xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .card-balance-container {
    padding: 0px var(--space-3xl) var(--space-8xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .card-balance-container {
    padding: 0px var(--space-xl) 40px var(--space-xl);
  }
}

.corporate-card-carousel-section {
  display: flex;
  padding: 0px var(--space-15xl) var(--space-8xl) var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .corporate-card-carousel-section {
    padding: 0px var(--space-8xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .corporate-card-carousel-section {
    padding: 0px var(--space-3xl) var(--space-8xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .corporate-card-carousel-section {
    padding: 0px var(--space-xl) var(--space-8xl) var(--space-xl);
  }
}
.corporate-card-main-black-container-top {
  padding: var(--space-15xl) var(--space-15xl) 0;
}
@media (max-width: 1255px) {
  .corporate-card-main-black-container-top {
    padding: var(--space-8xl) var(--space-8xl) 0;
  }
}
@media (max-width: 870px) {
  .corporate-card-main-black-container-top {
    padding: var(--space-3xl) var(--space-3xl) 0;
  }
}
@media (max-width: 430px) {
  .corporate-card-main-black-container-top {
    padding: var(--space-xl) var(--space-xl) 0;
  }
}
.corporate-card-main-black-container-bottom {
  padding: 0 var(--space-15xl) var(--space-15xl);
}
@media (max-width: 1255px) {
  .corporate-card-main-black-container-bottom {
    padding: 0 var(--space-8xl) var(--space-6xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .corporate-card-main-black-container-bottom {
    padding: 0 var(--space-3xl) var(--space-6xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .corporate-card-main-black-container-bottom {
    padding: 0 var(--space-xl) var(--space-6xl) var(--space-xl);
  }
}
.corporate-card-top-banner {
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 95%), url(./images/corporate-card-background.png);
  background-position: center;
  background-size: cover;
  padding: 0 var(--space-15xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xl);
}
@media (max-width: 1450px) {
  .corporate-card-top-banner {
    padding: var(--space-15xl) var(--space-15xl) 0;
  }
}
@media (max-width: 1255px) {
  .corporate-card-top-banner {
    padding: var(--space-8xl) var(--space-8xl) 0;
  }
}
@media (max-width: 1020px) {
  .corporate-card-top-banner {
    gap: var(--space-s);
    padding: var(--space-8xl);
    flex-direction: column-reverse;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, #000 35%, rgba(0,0,0,0) 90%), url(./images/corporate-card-background.png);
  }
}
@media (max-width: 870px) {
  .corporate-card-top-banner {
    padding: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .corporate-card-top-banner {
    padding: var(--space-xl);
  }
}
.corporate-card-information-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xl);
  max-width: 570px;
}
.corporate-card-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}
@media (max-width: 1520px) {
  .corporate-card-phone-card-image {
    width: 40%;
  }
}
@media (max-width: 1020px) {
  .corporate-card-phone-card-image {
    width: 400px;
  }
}
@media (max-width: 375px) {
  .corporate-card-phone-card-image {
    width: 300px;
  }
}
.corporate-card-carousel-wrapper > .carousel {
  width: auto;
}
.corporate-card-carousel-content {
  display: flex;
  padding-top: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5xl);
  align-self: stretch;
}
@media (max-width: 1000px) {
  .corporate-card-carousel-content {
    padding-top: var(--space-6xl);
  }
}
.corporate-card-dark-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6xl);
  align-self: stretch;
  background-color: var(--background-full-neutral-primary);
}
.corporate-card-dark-video-container {
  --corner-radius: 40px;
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.corporate-card-dark-video-container > video {
  width: 100%;
  object-fit: cover;
  position: relative;
  left: 0;
  transition: clip-path 0.2s ease, width 0.2s ease;
  border-radius: unset;
}
.corporate-card-dark-section-headline {
  display: flex;
  padding: 0px 196px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: var(--space-2xl);
}
@media (max-width: 1050px) {
  .corporate-card-dark-section-headline {
    padding: 0;
  }
}
.corporate-card-dark-section-benefits-container {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--space-3xl);
}
@media (max-width: 1000px) {
  .corporate-card-dark-section-benefits-container {
    flex-direction: column;
    align-items: center;
  }
}
.corporate-card-dark-section-benefits-item {
  display: flex;
  width: calc(100% / 3);
  padding: var(--space-2xl) 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}
@media (max-width: 1000px) {
  .corporate-card-dark-section-benefits-item {
    width: 100%;
    flex-direction: column;
  }
}
.coporate-card-bottom-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .coporate-card-bottom-section {
    padding: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .coporate-card-bottom-section {
    padding: var(--space-3xl);
  }
}
.corporate-card-bottom-content {
  display: flex;
  min-height: 672px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5xl);
  align-self: stretch;
}
.corporate-card-bottom-section-card {
  display: flex;
  padding: var(--space-2xl) var(--space-6xl);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-4xl);
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  border-radius: var(--space-2xl);
  background: var(--background-full-neutral-secondary);
}
@media (max-width: 950px) {
  .corporate-card-bottom-section-card {
    padding: var(--space-2xl) var(--space-xl);
  }
}
@media (max-width: 765px) {
  .corporate-card-bottom-section-card {
    flex-direction: column-reverse;
  }
}
.corporate-card-bottom-section-card-image {
  width: 50%;
}
@media (max-width: 765px) {
  .corporate-card-bottom-section-card-image {
    width: 100%;
  }
}
.corporate-card-bottom-section-card-image > img {
  width: 100%;
}
.corporate-card-bottom-section-card-text-container {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xl);
}
@media (max-width: 765px) {
  .corporate-card-bottom-section-card-text-container {
    width: 100%;
  }
}
.corporate-card-bottom-section-card-text-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  align-self: stretch;
}
.corporate-card-bottom-section-card-image-responsive {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 765px) {
  .corporate-card-bottom-section-card-image-responsive {
    display: none;
  }
}
.corporate-card-bottom-section-card-image-responsive img {
  width: 60%;
}
.corporate-card-bottom-content-heading-container {
  width: 50%;
}
@media (max-width: 1660px) {
  .corporate-card-bottom-content-heading-container {
    width: 60%;
  }
}
@media (max-width: 950px) {
  .corporate-card-bottom-content-heading-container {
    width: 100%;
  }
}
.corporate-card-main-second-carousel-item {
  background: var(--reputation-light);
}
.corporate-card-first-item > .carousel-image-container {
  width: 286px;
}
.corporate-card-fourth-item > .carousel-image-container > img {
  width: 100%;
}
@media (max-width: 768px) {
  .corporate-card-fourth-item > .carousel-image-container > img {
    width: 80%;
  }
}
.flex-black-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6xl);
}

.request-card-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6xl);
  padding: 0px var(--space-15xl) var(--space-5xl) var(--space-15xl);
}
@media (max-width: 1255px) {
  .request-card-container {
    padding: 0px var(--space-8xl) var(--space-5xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .request-card-container {
    padding: 0px var(--space-3xl) var(--space-5xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .request-card-container {
    padding: 0px var(--space-xl) var(--space-5xl) var(--space-xl);
  }
}
.request-card-headline-options-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
  max-width: 700px;
}
.request-card-headline-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3xl);
}
@media (max-width: 1100px) {
  .request-card-headline-section {
    align-items: center;
    flex-direction: column;
  }
}
.request-card-headline-image {
  display: flex;
  justify-content: center;
}
@media (max-width: 1100px) {
  .request-card-headline-image {
    display: none;
  }
}
.request-card-headline-image > img,
.request-card-headline-responsive-image > img {
  width: 500px;
  height: auto;
}
@media (max-width: 600px) {
  .request-card-headline-image > img,
  .request-card-headline-responsive-image > img {
    width: 100%;
  }
}
.request-card-headline-responsive-image {
  display: flex;
  justify-content: center;
}
@media (min-width: 1101px) {
  .request-card-headline-responsive-image {
    display: none;
  }
}
.request-card-headline-option-top-config-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.request-card-headline-option-top-information-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
@media (max-width: 1100px) {
  .request-card-headline-option-top-information-container {
    align-items: center;
    text-align: center;
  }
}
.request-card-counter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2xl);
}
.request-card-item-container {
  display: flex;
  gap: var(--space-m);
}
.request-card-items-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.request-card-icon > svg {
  width: var(--space-xl);
  height: var(--space-xl);
}
.benefits-icon > *,
.request-card-icon > *,
.benefits-icon > svg > path,
.benefits-icon > svg > g > path,
.request-card-icon > svg > path,
.request-card-icon > svg > g > path {
  fill: var(--text-text-primary);
}
.benefits-icon > svg {
  width: var(--space-xl);
  height: var(--space-xl);
}
.benefits-option-container {
  display: flex;
  gap: var(--space-10xl);
}
@media (max-width: 1350px) {
  .benefits-option-container {
    flex-direction: column;
    gap: var(--space-5xl);
  }
}
#collapse-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}
.request-card-benefits-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
}
.benefits-title {
  min-width: 180px;
}
@media (max-width: 1100px) {
  .benefits-title {
    width: 100%;
  }
}
.benefits-option-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
}
.benefits-option-items-container {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-4xl);
  width: 100%;
}
@media (max-width: 900px) {
  .benefits-option-items-container {
    flex-direction: column;
    gap: var(--space-xl);
    align-items: center;
  }
}
.benefits-option-item-header-container {
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
.benefits-option-item-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-l);
  text-align: center;
  max-width: 400px;
}
.benefits-option-items-format > div {
  width: calc(100% / 3);
}
@media (max-width: 1100px) {
  .benefits-option-items-format > div {
    width: 100%;
  }
}
.benefits-wallet-option-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
}
.benefits-wallet-icons-container {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.request-wallet-icon > svg {
  width: var(--space-5xl);
}
.request-black-card-image {
  width: 100%;
  height: auto;
}

.request-card-checkout-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 350px;
}
@media (max-width: 1125px) {
  .request-card-checkout-section {
    display: none;
  }
}
.request-card-checkout-mobile-section {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: var(--space-xl);
  border-top: 1px solid var(--neutral-dark-gray-20);
  background-color: var(--background-full-neutral-primary);
}
@media (min-width: 1125px) {
  .request-card-checkout-mobile-section {
    display: none;
  }
}
.request-card-checkout-mobile-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.request-card-checkout-mobile-view {
  position: fixed;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: var(--space-2xl) 0;
  background-color: var(--background-full-neutral-secondary);
}
.request-card-checkout-body-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-l) var(--space-xl);
}
.request-card-checkout-body-mobile-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-3xl) var(--space-l);
}
.request-card-checkout-header-container {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2xl) var(--space-xl) var(--space-s) var(--space-xl);
}
.request-card-checkout-header-mobile-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: var(--space-s) var(--space-l);
}
#request-card-checkout-close-mobile-button {
  font-size: 30px;
  font-weight: 100;
}
@media (max-width: 380px) {
  #continue-mobile-button {
    width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.request-card-form-container {
  display: flex;
  gap: var(--space-6xl);
  padding: 0px var(--space-15xl) var(--space-5xl) var(--space-15xl);
}
@media (max-width: 1255px) {
  .request-card-form-container {
    padding: 0px var(--space-8xl) var(--space-5xl) var(--space-8xl);
  }
}
@media (max-width: 1125px) {
  .request-card-form-container {
    margin-bottom: 170px;
  }
}
@media (max-width: 870px) {
  .request-card-form-container {
    padding: 0px var(--space-3xl) var(--space-5xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .request-card-form-container {
    padding: 0px var(--space-xl) var(--space-5xl) var(--space-xl);
  }
}
.request-card-form-content-header-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-3xl) 0;
}
.request-card-form-content-container {
  width: 100%;
}
.request-card-checkout-counter-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--radius-m);
  padding: var(--space-l) var(--space-xl);
  background: var(--background-full-neutral-primary);
  gap: var(--space-s);
}
.request-card-form-checkout-view-container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xl);
}
@media (max-width: 1125px) {
  .request-card-form-checkout-view-container {
    gap: 0;
  }
}
.request-card-form-checkout-view-loading-container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5xl);
}
@media (max-width: 1125px) {
  .request-card-form-checkout-view-loading-container {
    gap: var(--space-xl);
  }
}
.request-card-accordion-success-content-container {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.request-card-checkout-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--radius-m);
  background: var(--background-full-neutral-secondary);
}
.request-card-checkout-summary-container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3xl);
  padding: var(--space-l) 0;
}
#request-card-form-list-view,
.request-card-checkout-counter-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.request-card-form-accordion-container >,
.connection-detail-permission-title {
  color: var(--text-text-primary);
  font-size: var(--heading-s-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--heading-s-line-height);
  letter-spacing: var(--letter-spacing-none);
}
.request-card-form-accordion-container {
  background: var(--background-full-neutral-secondary);
  padding: var(--space-xl);
  border-radius: var(--radius-l);
}
.request-card-form-accordion-title-view {
  display: flex;
  justify-content: space-between;
  gap: var(--space-l);
  align-items: center;
}
.request-card-form-accordion-title-view-content {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
@media (max-width: 650px) {
  .request-card-form-accordion-title-view-content {
    flex-direction: column;
    align-items: flex-start;
  }
}
.request-card-accordion-hide-dash-mobile {
  display: block;
}
@media (max-width: 650px) {
  .request-card-accordion-hide-dash-mobile {
    display: none;
  }
}
.request-card-accordion-name-title,
.request-card-accordion-company-name-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.request-card-accordion-name-title {
  width: fit-content;
}
@media (max-width: 400px) {
  .request-card-accordion-name-title {
    width: 140px;
  }
}
.request-card-accordion-company-name-title {
  width: fit-content;
}
@media (max-width: 400px) {
  .request-card-accordion-company-name-title {
    width: 60px;
  }
}

.request-card-form-upper-section {
  display: flex;
  gap: var(--space-3xl);
}
@media (max-width: 850px) {
  .request-card-form-upper-section {
    flex-direction: column;
    align-items: center;
  }
}
.request-card-form-middle-section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-s);
}
.request-card-form-phone-container {
  display: flex;
  gap: var(--space-s);
  width: 100%;
}
.request-card-form-phone-container > div {
  width: 240px;
}
.request-card-form-phone-container > input {
  width: 100%;
}
.country-select-field > .dropdown > .current-simple-selection-item-label {
  width: 110px;
}
.request-card-form-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 45%;
}
@media (max-width: 850px) {
  .request-card-form-control-group {
    width: 100%;
  }
}
.request-card-form-confirm-button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2xl);
}
.request-card-form-accordion-form-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-2xl) 0 0;
}
.request-card-design-name-label {
  max-width: 220px;
}
.request-card-design-company-name-label {
  max-width: 180px;
}
.request-card-design-name-label,
.request-card-design-company-name-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.request-card-design-container {
  width: 55%;
  height: 230px;
  max-width: 412px;
  min-width: 350px;
  border-radius: var(--radius-s);
  background-color: var(--neutral-universe-default);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .request-card-design-container {
    min-width: auto;
    height: 200px;
    width: 100%;
    box-sizing: border-box;
  }
}
.request-card-design-stripe {
  height: 45px;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background-color: var(--neutral-dark-gray-80);
}
.request-card-design-content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-l) var(--space-2xl);
}
.request-card-design-left-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.request-card-design-left-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media (max-width: 500px) {
  .request-card-design-left-content {
    gap: var(--space-m);
  }
}

.cancel-request-card-modal-container {
  padding: var(--space-xl);
}
@media (max-width: 500px) {
  .cancel-request-card-modal-container {
    flex-direction: column;
    gap: var(--space-m);
  }
}
@media (max-width: 500px) {
  .cancel-request-card-modal-container > div {
    width: 100%;
    box-sizing: border-box;
  }
}

.request-card-checkout-description-title-container {
  width: 320px;
}
@media (max-width: 700px) {
  .request-card-checkout-description-title-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
.request-card-checkout-page-header-container {
  padding: var(--space-3xl) 0;
}
.request-card-checkout-black-card-design-image {
  width: 320px;
}
@media (max-width: 1100px) {
  .request-card-checkout-flex-mobile-image-container-column {
    align-items: center;
    flex-direction: column;
    gap: var(--space-xl);
  }
}
@media (max-width: 1100px) {
  .request-card-checkout-flex-mobile-column {
    flex-direction: column;
    gap: var(--space-xl);
  }
}
@media (max-width: 1100px) {
  .request-card-checkout-flex-mobile-column > #request-card-checkout-cancel-button,
  .request-card-checkout-flex-mobile-column > #request-card-checkout-confirm-button {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 700px) {
  #cardholder-information-tableview > thead {
    display: none;
  }
}
@media (max-width: 700px) {
  #request-card-checkout-table-cell-delete-button {
    display: none;
  }
}
@media (min-width: 700px) {
  #request-card-checkout-table-cell-reponsive-delete-button {
    display: none;
  }
}
@media (max-width: 700px) {
  .request-card-address-cell-responsive-format {
    width: 75%;
    text-align: end;
  }
}

.request-card-shipping-form-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.request-card-shipping-form-title {
  padding: var(--space-3xl) 0;
}
#request-shipping-postal-code-loading-indicator {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: var(--action-or-selection-color);
}
.request-card-shipping-row-to-column-container {
  flex-direction: row;
}
@media (max-width: 700px) {
  .request-card-shipping-row-to-column-container {
    flex-direction: column;
  }
}
.request-card-shipping-address {
  width: 70%;
}
@media (max-width: 700px) {
  .request-card-shipping-address {
    width: 100%;
  }
}
.request-card-shipping-address-number {
  width: 30%;
}
.request-shipping-mobile-bottom-field {
  width: calc(100% / 3);
}
@media (max-width: 700px) {
  .request-shipping-mobile-bottom-field {
    width: 100%;
  }
}
.request-shipping-mobile-bottom-group-fields {
  width: calc(100% / 3 * 2);
}
@media (max-width: 700px) {
  .request-shipping-mobile-bottom-group-fields {
    width: 100%;
  }
}
.request-shipping-mobile-bottom-group-fields > div {
  width: 50%;
}

#request-card-form-container-view {
  width: 100%;
  box-sizing: border-box;
}

.unlock-card-modal-token-container {
  display: flex;
  flex-direction: row;
  gap: var(--space-s);
}
@media (max-width: 500px) {
  .unlock-card-modal-token-container {
    flex-direction: column;
  }
}
.card-pending-container {
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid var(--line-color);
  cursor: pointer;
}
.card-pending-container:hover {
  border: 1px solid var(--action-or-selection-color);
}

#page-title {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 430px) {
  #page-title {
    white-space: normal;
  }
}
#page-subtitle {
  width: fit-content;
  display: none;
}
#page-right-view-container {
  width: fit-content;
}
.title-container {
  display: flex;
  height: calc(100% - 40px);
  padding: var(--space-8xl) 0 var(--space-6xl) var(--space-15xl);
  justify-content: space-between;
  background-color: var(--view-background-color);
}
@media (max-width: 600px) {
  .title-container {
    gap: var(--space-l);
    padding: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .title-container {
    padding: var(--space-3xl) var(--space-xl);
  }
}
.page-right-view-without-sidebar {
  width: 100% !important;
}
.page-right-view-without-sidebar > .title-container {
  padding-right: var(--space-15xl);
}
@media (max-width: 1255px) {
  .page-right-view-without-sidebar > .title-container {
    padding: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .page-right-view-without-sidebar > .title-container {
    padding: var(--space-3xl);
  }
}
@media (max-width: 600px) {
  .page-right-view-without-sidebar > .title-container {
    flex-direction: column !important;
  }
}
@media (max-width: 430px) {
  .page-right-view-without-sidebar > .title-container {
    padding: var(--space-3xl) var(--space-xl);
  }
}
.page-right-view-with-sidebar > .title-container {
  padding-right: 0;
  flex-direction: column;
}
@media (max-width: 1255px) {
  .page-right-view-with-sidebar > .title-container {
    padding-left: var(--space-8xl);
  }
}
@media (max-width: 1140px) {
  .page-right-view-with-sidebar > .title-container {
    padding: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .page-right-view-with-sidebar > .title-container {
    padding: var(--space-3xl);
  }
}
@media (max-width: 600px) {
  .page-right-view-with-sidebar > .title-container {
    flex-direction: column !important;
  }
}
@media (max-width: 430px) {
  .page-right-view-with-sidebar > .title-container {
    padding: var(--space-5xl) var(--space-xl) var(--space-3xl) var(--space-xl);
  }
}
.title-container-inverse {
  background-color: var(--background-full-neutral-inverse);
  color: var(--text-inverse-title);
}
.title-container-inverse-text {
  color: var(--text-inverse-title) !important;
}
.title-back-button {
  margin: auto;
  cursor: pointer;
}
@media (max-width: 430px) {
  .title-back-button {
    margin-top: 4px;
  }
}
.title-back-button > svg > g > path {
  fill: var(--action-or-selection-color);
}
.title-highlight-shift-alignment {
  text-align: end;
}
@media (max-width: 600px) {
  .title-highlight-shift-alignment {
    text-align: start;
  }
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 16px;
  position: relative;
}
#header-desktop-logo {
  cursor: pointer;
}
@media (max-width: 630px) {
  #header-desktop-logo {
    display: none;
  }
}
#header-mobile-logo {
  display: none;
  cursor: pointer;
}
@media (max-width: 630px) {
  #header-mobile-logo {
    display: block;
  }
}
.header-logo-container > img {
  width: 200px;
  height: 24px;
}
@media (max-width: 630px) {
  .header-logo-container > img {
    width: 32px;
    height: 32px;
  }
}
.header-options-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-l);
}
@media (max-width: 700px) {
  .header-options-container {
    gap: var(--space-m);
  }
}
@media (max-width: 400px) {
  .header-options-container {
    gap: var(--space-s);
  }
}
.header-workspace-options {
  background-color: var(--background-full-neutral-tertiary);
  padding: 8px 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.header-workspace-name-loading {
  width: 80px;
  height: 16px;
}
.header-workspace-profile {
  cursor: pointer;
}
.header-workspace-profile > img {
  border: 2px solid var(--line-color);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  cursor: pointer;
  background-color: var(--border-color);
}
@media (max-width: 630px) {
  .header-workspace-profile > img {
    width: 30px;
    height: 30px;
  }
}
.header-avatar-shimmer {
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: 2px solid var(--line-color);
}
@media (max-width: 630px) {
  .header-avatar-shimmer {
    width: 30px;
    height: 30px;
  }
}
.header-options-divider {
  border: 2px solid var(--line-color);
  height: 20px;
  border-radius: 10px;
}
.workspace-arrow-down-icon > svg > g > path {
  fill: var(--text-text-title);
}
.header-workspace-options > #add-balance-icon > .btn-content-icon-container > * {
  fill: var(--text-text-primary);
}
@media (max-width: 710px) {
  #workspace-name {
    max-width: 70px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (max-width: 400px) {
  #workspace-name {
    max-width: 50px;
  }
}
@media (max-width: 700px) {
  #add-button-label {
    display: none;
  }
}
#balance-button-label {
  text-transform: lowercase;
}
@media (max-width: 700px) {
  #balance-button-label {
    text-transform: capitalize;
  }
}

.navbar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#navbar-options-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1140px) {
  #navbar-options-container {
    display: none;
  }
}
.navbar-option {
  cursor: pointer;
  padding: 20px 16px;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  white-space: nowrap;
}
.navbar-option:first-child {
  padding-left: 0px;
}
.navbar-option:last-child {
  padding-right: 0px;
}
#navbar-submenu-container {
  display: flex;
  justify-content: center;
  gap: 40px;
}
#navbar-submenu-container::-webkit-scrollbar {
  display: none;
}
#navbar-submenu-container::-webkit-scrollbar-thumb {
  display: none;
}
#navbar-submenu-container::-webkit-scrollbar-track {
  display: none;
}
.navbar-submenu-option {
  text-align: center;
  min-width: 140px;
  clip-path: inset(0 4px);
  border-bottom: 2px solid transparent;
  padding: 10px 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
@media (max-width: 800px) {
  .navbar-submenu-option {
    padding: 10px 5px;
  }
}
.navbar-submenu-option-active {
  border-bottom: 2px solid var(--action-or-selection-color);
}
.navbar-submenu-option-active > .navbar-submenu-label {
  color: var(--action-or-selection-color);
  font-family: 'Pretendard-Demibold';
  font-weight: 600;
  font-size: var(--text-xs-demibold-size);
  line-height: var(--text-xs-demibold-line-height);
}
.navbar-submenu-label {
  font-weight: 400;
  font-size: var(--text-xs-regular-size);
  line-height: var(--text-xs-regular-line-height);
  color: var(--text-color);
}
.navbar-submenu-icon > svg > path,
.navbar-submenu-icon > svg > g > path {
  max-height: 24px;
  fill: var(--text-color);
}
.navbar-submenu-icon-active > svg > path,
.navbar-submenu-icon-active > svg > g > path,
.navbar-submenu-icon-active > svg > g > g > path {
  fill: var(--action-or-selection-color);
}
.option-active {
  color: var(--action-or-selection-color);
  font-family: 'Pretendard-Demibold';
  font-weight: 600;
  font-size: var(--text-s-demibold-size);
  line-height: var(--text-s-demibold-line-height);
}
#navbar-mobile-container {
  padding: 26px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#navbar-mobile-container-view {
  width: 100%;
  display: none;
}
@media (max-width: 1140px) {
  #navbar-mobile-container-view {
    display: block;
  }
}
#mobile-selected-option-button {
  cursor: pointer;
}
#mobile-selected-option {
  cursor: pointer;
}
.sidebar-button {
  cursor: pointer;
}
.mobile-menu-container {
  background-color: var(--menu-background-color);
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 22;
  top: 0;
  right: 0;
  overflow: hidden;
  transition: 0.7s;
  text-align: end;
  overflow-y: scroll;
}
.navbar-mobile-option {
  cursor: pointer;
  user-select: none;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  text-align: start;
  letter-spacing: 0px;
  color: var(--title-color);
  padding: 14px 48px;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.mobile-menu-close-button-container {
  width: 100%;
  display: flex;
  justify-content: end;
  gap: 12px;
}
#mobile-menu-close-button,
#mobile-sidebar-close-button {
  color: var(--action-or-selection-color);
  cursor: pointer;
  font-size: 30px;
  font-weight: 100;
}
#mobile-menu-close-button {
  padding: 30px;
  width: fit-content;
}
#mobile-sidebar-close-button {
  padding: 30px 40px;
  display: flex;
  display: -webkit-flex;
  justify-content: end;
  -webkit-justify-content: flex-end;
  width: auto;
}
.navbar-mobile-option:hover {
  color: var(--action-or-selection-color);
}
.mobile-sidebar-close-button-container {
  display: none;
}
@media (max-width: 1140px) {
  .mobile-sidebar-close-button-container {
    display: block;
  }
}
.center-itens-active {
  justify-content: center !important;
}

.navbar-submenu-wrapper {
  width: 100%;
  position: relative;
}
.paddle {
  display: flex;
  align-items: center;
  display: -webkit-flex;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--menu-background-color);
  transition: all 0.25s;
  transition-behavior: allow-discrete;
  opacity: 1;
}
#left-paddle {
  left: 0;
  padding-right: 8px;
  border-right: 1px solid var(--line-color);
}
#right-paddle {
  right: 0;
  padding-left: 8px;
  border-left: 1px solid var(--line-color);
}
.hidden-paddle {
  display: none;
  opacity: 0;
}
.paddle:hover > svg > g > path {
  fill: var(--action-or-selection-color);
}
.active-paddles {
  overflow: overlay;
  justify-content: start !important;
  gap: 20px !important;
  scrollbar-color: transparent transparent;
}

.header-dropdown-menu-container-view {
  right: 0px;
  top: 50px;
  position: absolute;
  width: 240px;
  z-index: 25;
}
.right-header {
  right: 80px;
}
.header-dropdown-menu-container {
  flex-direction: column;
  border-radius: 20px;
  background: var(--view-background-color);
  display: flex;
  border: 1px solid var(--line-color);
  cursor: pointer;
  max-height: 50vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.header-dropdown-menu-container::-webkit-scrollbar-thumb {
  border: 6px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}
.header-dropdown-menu-container::-webkit-scrollbar {
  width: 20px;
}
.header-dropdown-menu-item {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 8px;
}
.header-dropdown-menu-item:hover > .header-dropdown-menu-item-title,
.header-dropdown-menu-multiple-item:hover > .header-dropdown-menu-item-title,
.header-dropdown-menu-multiple-item:hover > .header-dropdown-menu-item-subtitle {
  color: var(--hover-action-or-selection-color);
}
.header-dropdown-menu-item-img {
  width: 16px;
  height: 16px;
  text-align: center;
}
.header-dropdown-menu-item:hover > .header-dropdown-menu-item-img svg path,
.header-dropdown-menu-item:hover > .header-dropdown-menu-item-img svg g path {
  fill: var(--hover-action-or-selection-color);
}
.header-dropdown-menu-item > .header-dropdown-menu-item-img svg path,
.header-dropdown-menu-item > .header-dropdown-menu-item-img svg g path {
  fill: var(--title-color);
}
.header-dropdown-menu-multiple-item {
  display: flex;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.header-dropdown-menu-item-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.header-dropdown-menu-item-separator {
  height: 1px;
  background: var(--line-color);
}

.new-menu-container {
  background-color: var(--menu-background-color);
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-15xl);
}
@media (max-width: 1255px) {
  .new-menu-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .new-menu-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .new-menu-container {
    padding: 0 var(--space-xl);
  }
}
.sticky-sidebar {
  top: 0;
  z-index: 21;
  position: fixed !important;
}
.content-scroll-active {
  top: 250px;
}
.sidebar-scroll-active {
  top: 150px;
}

.horizontal-bar {
  border-bottom: 1px solid var(--border-primary-default);
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.horizontal-bar:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.horizontal-bar-subtitle {
  margin-top: 10px;
}
.horizontal-bar-container {
  border-radius: var(--radius-full);
}
.horizontal-bar-consumed,
.horizontal-bar-unconsumed {
  height: 8px;
  border-radius: var(--radius-full);
}
.weekday-container {
  border-radius: var(--radius-s);
  padding: var(--space-xs);
  width: 30px;
  text-align: center;
}
.weekday-container-active {
  border: 1px solid var(--text-text-primary);
  color: var(--text-text-primary);
}
.weekday-container-disable {
  color: var(--text-text-disable);
  border: 1px solid var(--border-primary-default);
}
.spending-control-colapse-content {
  max-height: 0;
  transition: max-height 0.4s ease-out;
}
.days-of-the-week-container {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
}
@media (max-width: 950px) {
  .days-of-the-week-container {
    justify-content: start;
  }
}
@media (max-width: 500px) {
  .days-of-the-week-container {
    justify-content: space-between;
  }
}


.logo {
  width: 56px;
}
@media (max-width: 1050px) {
  .logo {
    width: 40px;
  }
}
.application {
  display: flex;
  width: 100%;
  height: 100%;
  font-family: "Myriad Set Pro", sans-serif;
}
@media (max-width: 700px) {
  .application {
    flex-direction: column;
  }
}
.application[style*="display: block"] {
  display: flex !important;
}
.application-item {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .application-item {
    width: 100%;
  }
}
#application-subtitle-title {
  margin-top: 8px;
}
#application-item-image {
  background-color: #f7f8f9;
  position: fixed;
  right: 0;
}
@media (max-width: 700px) {
  #application-item-image {
    display: none;
  }
}
.application-item-container {
  margin: auto;
  display: flex;
  flex-direction: column;
}
.application-item-form {
  margin-left: 80px;
  width: calc(100% - 160px);
}
@media (max-width: 1024px) {
  .application-item-form {
    margin-left: 40px;
    width: calc(100% - 80px);
  }
}
@media (max-width: 700px) {
  .application-item-form {
    margin-top: 44px;
    margin-left: 24px;
    width: calc(100% - 48px);
  }
}
.application-item-container ul {
  margin-bottom: 40px;
}
.signup-image-container,
.application-image-container {
  display: flex;
  width: 100%;
  height: 100%;
}
.application-image {
  margin: auto;
  width: 60%;
}
.signup-image {
  width: 100%;
  object-fit: cover;
}
.application-form-container {
  display: flex;
  margin: 20px 0;
}
.application-form-container label {
  width: 90px;
  padding-top: 10px;
  font-size: 16px;
  color: var(--text-color);
}
.application-form-container input {
  width: calc(100% - 90px);
}
.application-form-container spam {
  display: flex;
  align-items: center;
  color: var(--title-color);
  font-size: 16px;
  font-weight: 600;
}
.application-form-attach {
  width: 100px;
  margin-right: 20px;
}
#application-taxId-textfield {
  margin-top: 40px;
  margin-bottom: 40px;
}
#application-confirmation-textfield {
  margin-bottom: 40px;
}
#application-country-code-selector {
  margin-top: 40px;
}
#application-yes-representative-table {
  width: 100%;
}
#application-other-representative-table {
  width: 100%;
}
#application-other-representative-cell-name {
  color: var(--title-color);
  font-size: 18px;
}
.emoji::after {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.hello::after {
  content: '👋';
  animation: spin-signup 1ms;
  animation-iteration-count: infinite;
}
.mailbox::after {
  content: '📪';
  animation-name: mailbox;
  animation-duration: 2.5s;
}
.cellphone::after {
  content: '📲';
  animation-name: cellphone;
  animation-duration: 2.5s;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
select {
  color: var(--input-color);
  background-color: var(--view-background-color);
  border: 1px solid var(--border-color);
  font-size: 16px;
  width: 100%;
  height: 44px;
  margin: 2px 0 5px;
  line-height: normal;
  box-sizing: border-box;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 10px;
  border-radius: 4px;
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+") no-repeat 100% 50%;
}
select:active,
select:hover {
  border: 2px solid var(--action-or-selection-color);
}
.change-button-arrow {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}
.back-button {
  display: flex;
  flex-direction: row;
  font-weight: 600;
  color: #637282;
  align-items: center;
  cursor: pointer;
}
.application-image-container {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;
  animation: fadein 2s;
  -moz-animation: fadein 2s;
  -webkit-animation: fadein 2s;
  -o-animation: fadein 2s;
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.button-container {
  height: auto;
  display: flex;
  margin-bottom: 20px;
}
.button-container-item {
  display: flex;
  width: 50%;
  flex-direction: column;
}
.button-container > div:first-of-type {
  margin-right: 20px;
}
.application-logo-form {
  margin-top: 32px;
  margin-left: 80px;
  width: 300px;
  height: 26px;
}
@media (max-width: 1024px) {
  .application-logo-form {
    margin-left: 40px;
  }
}
@media (max-width: 700px) {
  .application-logo-form {
    margin-left: 24px;
  }
}
.check-mark {
  background-image: url(./images/checkmark.svg);
  background-size: 7.5px 15px;
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  content: "";
  border: 1px solid var(--border-color);
  border-radius: 100px;
  box-sizing: border-box;
}
.check-mark-container {
  width: 15px;
}
@-moz-keyframes spin-signup {
  0% {
    transform: rotate(45deg);
  }
}
@-webkit-keyframes spin-signup {
  0% {
    transform: rotate(45deg);
  }
}
@-o-keyframes spin-signup {
  0% {
    transform: rotate(45deg);
  }
}
@keyframes spin-signup {
  0% {
    transform: rotate(45deg);
  }
}
@-moz-keyframes cellphone {
  25% {
    content: '📱';
  }
  50% {
    content: '📲';
  }
  75% {
    content: '📱';
  }
}
@-webkit-keyframes cellphone {
  25% {
    content: '📱';
  }
  50% {
    content: '📲';
  }
  75% {
    content: '📱';
  }
}
@-o-keyframes cellphone {
  25% {
    content: '📱';
  }
  50% {
    content: '📲';
  }
  75% {
    content: '📱';
  }
}
@keyframes cellphone {
  25% {
    content: '📱';
  }
  50% {
    content: '📲';
  }
  75% {
    content: '📱';
  }
}
@-moz-keyframes mailbox {
  25% {
    content: '📫';
  }
  50% {
    content: '📬';
  }
  75% {
    content: '📭';
  }
}
@-webkit-keyframes mailbox {
  25% {
    content: '📫';
  }
  50% {
    content: '📬';
  }
  75% {
    content: '📭';
  }
}
@-o-keyframes mailbox {
  25% {
    content: '📫';
  }
  50% {
    content: '📬';
  }
  75% {
    content: '📭';
  }
}
@keyframes mailbox {
  25% {
    content: '📫';
  }
  50% {
    content: '📬';
  }
  75% {
    content: '📭';
  }
}
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.application-yes-representative-cell {
  margin-bottom: 10px;
  border-radius: 4px;
  display: flex;
}
#application-representative-submit-button {
  width: 50%;
}
#application-add-button {
  margin-bottom: 10px;
  background-color: var(--view-background-color);
  color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
}
#application-add-button:hover {
  color: var(--view-background-color);
  background-color: var(--action-or-selection-color);
}
.button-delete {
  width: 10%;
  height: 46px;
  background-color: var(--view-background-color);
  color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
  border-right: 0px solid;
  border-top-left-radius: 4px 4px;
  border-bottom-left-radius: 4px 4px;
  border-top-right-radius: 0px 0px;
}
.button-delete:hover {
  color: var(--view-background-color);
  background-color: var(--delete-or-cancel-color);
  border-color: var(--delete-or-cancel-color);
}
.button-delete:focus {
  outline: -webkit-focus-ring-color auto 0px;
}
#application-yes-representative-cell-name {
  width: 90%;
  border-top-left-radius: 0px 0px;
  border-bottom-left-radius: 0px 0px;
  border-left: 0px solid;
  padding-right: 10%;
}
#application-yes-representative-cell-name:hover {
  background-color: var(--action-or-selection-color);
  color: #fff;
}
ul {
  list-style: none;
}
@-moz-keyframes pulse {
  0% {
    font-size: small;
  }
  50% {
    font-size: large;
  }
  100% {
    font-size: small;
  }
}
@-webkit-keyframes pulse {
  0% {
    font-size: small;
  }
  50% {
    font-size: large;
  }
  100% {
    font-size: small;
  }
}
@-o-keyframes pulse {
  0% {
    font-size: small;
  }
  50% {
    font-size: large;
  }
  100% {
    font-size: small;
  }
}
@keyframes pulse {
  0% {
    font-size: small;
  }
  50% {
    font-size: large;
  }
  100% {
    font-size: small;
  }
}

#yes-representative,
#no-representative {
  width: 50%;
}
#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 11;
}
.modal {
  margin-left: 24px;
  margin-right: 24px;
  border-radius: 10px;
  max-width: 400px;
  text-align: center;
}
#modal-container .modal-background {
  display: table-cell;
  background: rgba(0,0,0,0.8);
  text-align: center;
  vertical-align: middle;
}
#modal-container .modal-background .modal {
  background: #fff;
  padding: 50px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
  position: relative;
}
#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}
#modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}
#modal-container.one {
  transform: scaleY(0.01) scaleX(0);
  animation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -webkit-animation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one .modal-background .modal {
  transform: scale(0);
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -webkit-animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out {
  transform: scale(1);
  animation: unfoldOut 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -webkit-animation: unfoldOut 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out .modal-background .modal {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -webkit-animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
@-moz-keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@-webkit-keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@-o-keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}
@-moz-keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@-webkit-keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@-o-keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}
@-moz-keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-o-keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

#welcome-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Myriad Set Pro", sans-serif;
}
#application-finish-title,
#application-finish-subtitle {
  opacity: 0;
}
#application-finish-button {
  opacity: 0;
  margin-bottom: 200px;
  width: 25%;
}
@media (max-width: 700px) {
  #application-finish-button {
    width: 100%;
  }
}
.circle-loader {
  margin-top: 16px;
  margin-bottom: 2em;
  border: 4px solid rgba(0,0,0,0.2);
  border-left-color: var(--success-border-color);
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 7em;
  height: 7em;
}
.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: var(--success-border-color);
  transition: border 500ms ease-out;
}
.checkmark {
  display: none;
}
.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 4px solid var(--success-text-color);
  border-top: 4px solid var(--success-text-color);
  content: '';
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}
#welcome-section {
  margin-left: 24px;
  margin-right: 24px;
  text-align: center;
}
@-moz-keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}
@-webkit-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}
@-o-keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}

.header-image {
  border-radius: 50%;
  background-color: var(--border-color);
  margin-right: 40px;
  cursor: pointer;
}
@media (max-width: 1000px) {
  .header-image {
    margin-right: 16px;
  }
}
.header-image:hover {
  box-shadow: 0 0 3px 0 var(--action-or-selection-color);
}
.user-content-dropdown {
  display: none;
  position: absolute;
  top: 92px;
  right: 40px;
  z-index: 15;
  border: 1px solid var(--line-color);
  background: var(--view-background-color);
  border-radius: 4px;
}
.user-content-dropdown-background {
  display: none;
  position: fixed;
  z-index: 15;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: transparent;
  cursor: default;
}
.dropdown-user-content-name {
  font-size: 1rem;
  color: var(--text-color);
}
.user-modal-flex-container {
  display: flex;
  height: fit-content;
  align-items: center;
  border-bottom: 1px solid var(--line-color);
}
#user-modal-photo {
  margin: 20px;
}
#user-modal-name {
  color: var(--title-color);
  margin: 0px;
  font-size: 16px;
}
#user-modal-name:hover {
  color: var(--action-or-selection-color);
  cursor: pointer;
}
#user-modal-email {
  color: var(--text-color);
  font-size: 14px;
}
.user-modal-button {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--text-color);
}
.user-modal-button:hover {
  color: var(--action-or-selection-color);
  cursor: pointer;
}
#header-right-view-container {
  margin-right: -240px;
  width: 100%;
}

.signin-workspace {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--menu-background-color);
}
@media (max-width: 1080px) {
  .signin-workspace {
    padding: 50px 0;
    width: auto;
  }
}
.signin-workspace-container {
  max-width: 400px;
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid var(--line-color);
  border-radius: 8px;
  background-color: var(--view-background-color);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
#signin-workspace-baseurl {
  pointer-events: none;
}
#signin-workspace-input {
  text-align: right;
  padding-right: 2px;
}
.forgot-workspace-button {
  font-family: "Pretendard-Demibold";
  margin-top: 22px;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  text-align: center;
  color: var(--action-or-selection-color);
}

.signin-email {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--menu-background-color);
}
@media (max-width: 1080px) {
  .signin-email {
    padding: 50px 0;
    width: auto;
  }
}
.animated-title-section {
  gap: 3rem;
  width: 50%;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
@media (max-width: 1080px) {
  .animated-title-section {
    display: none;
  }
}
#classic-logo,
#classic-logo-qrcode,
#classic-logo-new-pass {
  width: 230px;
}
.classic-logo-container {
  display: flex;
  justify-content: start;
}
@media (min-width: 1080px) {
  .classic-logo-container {
    display: none;
  }
}
.starkbank-animated-text {
  width: 330px;
}
@media (max-width: 1080px) {
  .starkbank-animated-text {
    width: 240px;
  }
}
.signin-container {
  top: 0;
  left: 0;
  right: 0;
  height: fit-content;
  border: 1px solid var(--line-color);
  bottom: 0;
  margin: auto;
  display: flex;
  padding: 80px;
  position: absolute;
  width: 50%;
  border-radius: 10px;
  background-color: var(--view-background-color);
}
@media (max-width: 1550px) {
  .signin-container {
    width: 70%;
  }
}
@media (max-width: 1080px) {
  .signin-container {
    flex-direction: column;
    width: 50%;
    position: static;
  }
}
@media (max-width: 650px) {
  .signin-container {
    width: 70%;
    padding: 80px 40px;
  }
}
#signin-email-title {
  text-align: center;
  margin-bottom: 8px;
}
@media (max-width: 1080px) {
  #signin-email-title {
    text-align: start;
  }
}
#signin-email-subtitle {
  text-align: center;
  margin-bottom: 20px;
  font-family: "Pretendard-Thin";
}
@media (max-width: 1080px) {
  #signin-email-subtitle {
    text-align: start;
    margin-bottom: 40px;
  }
}
.forgot-button {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  text-align: center;
  color: var(--action-or-selection-color);
}
#show-password {
  position: absolute;
  right: 15px;
  margin-top: 19px;
  color: var(--action-or-selection-color);
  text-align: center;
  cursor: pointer;
}
#show-password:active {
  color: var(--line-color);
}
.signin-form-container {
  padding: 40px;
  width: 50%;
}
@media (max-width: 1080px) {
  .signin-form-container {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 1080px) {
  .qrcode-desktop-hide {
    display: none;
  }
}
@media (max-width: 1080px) {
  .qrcode-mobile-hide {
    display: none;
  }
}
.qrcode-container {
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid var(--line-color);
  border-radius: 10px;
  background-color: var(--view-background-color);
  padding: 40px;
  display: flex;
  width: 50%;
}
@media (max-width: 1550px) {
  .qrcode-container {
    width: 70%;
  }
}
@media (max-width: 1080px) {
  .qrcode-container {
    flex-direction: column;
    gap: 3rem;
    position: static;
  }
}
#qrcode-refresh {
  position: absolute;
  border-radius: 16px;
  padding: 16px;
  height: 85px;
  width: 85px;
  background-color: var(--action-or-selection-color);
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.qrcode-refresh-container {
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.qrcode-refresh-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.qrcode-refresh-icon {
  font-size: 20px;
  color: var(--line-color);
}
.qrcode-refresh-text {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 20px;
  color: var(--line-color);
}
.section-divider {
  border: 1px solid var(--line-color);
}
@media (max-width: 1080px) {
  .section-divider {
    margin: 20px 0;
    border: transparent;
  }
}
.qrcode-information-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  gap: 2rem;
  padding: 40px;
}
@media (max-width: 1080px) {
  .qrcode-information-section {
    display: none;
  }
}
.qrcode-information-header-section {
  text-align: center;
}
.qrcode-store-image-container {
  border: 1px solid var(--line-color);
  border-radius: 10px;
  height: 40px;
  cursor: pointer;
}
.qrcode-information-footer-section {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.qrcode-information-body-section {
  margin-bottom: 15px;
}
.qrcode-image-section {
  padding: 40px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
@media (max-width: 1080px) {
  .qrcode-image-section {
    width: 100%;
    padding: 0;
    gap: 1rem;
  }
}
.qrcode-image-container {
  width: 250px;
  height: 250px;
  border-radius: 8px;
  background-color: var(--menu-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#auth-qrcode {
  border-radius: 10px;
  width: 180px;
  height: 180px;
}
#qrcode-backdrop {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: rgba(247,249,250,0.62);
}
#qrcode-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 1080px) {
  #signin-qrcode-section {
    position: inherit;
  }
}
.center-text {
  text-align: center;
}
@media (max-width: 1080px) {
  .center-text {
    text-align: start;
  }
}
.instruction-element-list {
  display: flex;
  gap: 10px;
}
.password-container {
  position: relative;
}
.signin-title {
  font-family: "Pretendard-Demibold";
  font-size: 40px;
  line-height: 48px;
  text-align: center;
}
@media (max-width: 1080px) {
  .signin-title {
    text-align: start;
    font-size: 24px;
    line-height: 24px;
  }
}
.signin-header {
  font-family: "Pretendard-Demibold";
  font-size: 26px;
  line-height: 32px;
}
@media (max-width: 1080px) {
  .signin-header {
    font-size: 24px;
    text-align: start;
  }
}
.signin-subtitle {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 20px;
}
@media (max-width: 1080px) {
  .signin-subtitle {
    text-align: start;
  }
}
.signin-textfield-label {
  font-family: "Pretendard-Thin";
  font-size: 14px;
  line-height: 18px;
}
.signin-button-text {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.signin-instruction-description {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 20px;
}
.signin-workspace-name {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  line-height: 20px;
}
.signin-instruction-description span {
  font-family: "Pretendard-Demibold";
  color: var(--title-color);
}
.small-qrcode-title {
  font-family: "Pretendard-Demibold";
  font-size: 18px;
  line-height: 17px;
  margin-bottom: 15px;
}
.stark-auth-description {
  font-family: "Pretendard-Hair";
  font-size: 14px;
  line-height: 20px;
}
.signin-textfield {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  line-height: 20px;
}
.qrcode-information-instructions-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-picker-container {
  position: relative;
}
.color-picker-preview {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  margin-top: 5px;
  background-color: var(--action-or-selection-color);
}
.color-picker-hash {
  position: absolute;
  margin-top: 17px;
  padding-left: 52px;
  color: var(--input-color);
}
.color-picker-input {
  padding-left: 69px;
  width: 150px;
  background-color: var(--view-background-color);
}
.color-picker-title {
  font-size: 14px;
  color: var(--title-color);
}
.color-selector {
  opacity: 0;
  z-index: 2;
  width: 38px;
  height: 44px;
  position: absolute;
  cursor: pointer;
}

.theme-picker-container {
  position: relative;
  width: 155px;
  height: 100px;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
}
.theme-picker-container:hover {
  opacity: 0.5;
}
.theme-picker-menu-background {
  position: absolute;
  height: 100%;
  width: 30%;
  background-color: #f7f9fa;
}
.theme-picker-menu-text {
  position: absolute;
  width: 20%;
  height: 7px;
  background-color: #637282;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.theme-picker-title {
  position: absolute;
  width: 20%;
  height: 7px;
  background-color: #1b2733;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.theme-picker-text {
  position: absolute;
  width: 40%;
  height: 7px;
  background-color: #637282;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#theme-picker-menu-1 {
  margin-left: 5%;
  margin-top: 15%;
  width: 19%;
}
#theme-picker-menu-2 {
  margin-left: 5%;
  margin-top: 25%;
  width: 17%;
  background-color: #0070e0;
}
#theme-picker-menu-3 {
  margin-left: 5%;
  margin-top: 35%;
}
#theme-picker-menu-4 {
  margin-left: 5%;
  margin-top: 45%;
  width: 15%;
}
#theme-picker-title-small {
  margin-left: 40%;
  margin-top: 15%;
}
#theme-picker-text-large {
  margin-left: 40%;
  margin-top: 25%;
  width: 40%;
}
#theme-picker-text-medium {
  margin-left: 40%;
  margin-top: 35%;
  width: 30%;
}
#theme-picker-button {
  margin-left: 70%;
  margin-top: 50%;
  width: 20%;
  background-color: #0070e0;
}

.pix-key-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
@media (max-width: 500px) {
  .pix-key-container {
    overflow-x: auto;
  }
}
.pix-key-container:hover {
  overflow-x: auto;
}
.pix-key-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.pix-key-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .pix-key-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.pix-key-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}

.loading-ring {
  display: none;
  width: 44px;
  height: 44px;
}
.loading-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: 6px;
  border: 3px solid var(--action-or-selection-color);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--action-or-selection-color) transparent transparent transparent;
}
.loading-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.loading-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.loading-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@-moz-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.shimmer {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeholderShimmer;
  -webkit-animation-timing-function: linear;
}
.shimmer.checkbox {
  padding: 9px 28px 6px 0px !important;
  border-radius: 4px !important;
}
.shimmer.checkbox-mini {
  padding: 2px 16px 1px 0px !important;
  border-radius: 4px !important;
}
@-webkit-keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.skeleton {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeholderShimmer;
  -webkit-animation-timing-function: linear;
  color: transparent !important;
  width: fit-content;
  width: -moz-fit-content;
}

.balance-container {
  position: relative;
}
@media (max-width: 1000px) {
  .balance-container {
    margin-top: 24px;
  }
}
.balance-view {
  position: absolute;
}
.balance-title {
  font-size: 12px;
  color: var(--text-color);
}
.balance-value {
  font-size: 32px;
  color: var(--title-color);
  margin-top: 7px;
}
.balance-loading {
  position: absolute;
  margin-top: 0px;
  width: 200px;
  height: 200px;
  z-index: 10;
}
.balance-title-loading {
  position: absolute;
  margin-bottom: 2px;
  width: 50px;
  height: 12px;
  z-index: 10;
}
.balance-value-loading {
  width: 250px;
  height: 32px;
  position: absolute;
  margin-top: 16px;
}

.sidebar {
  padding: 80px 40px 0;
}
@media (max-width: 800px) {
  .sidebar {
    padding: 8px 40px 0;
  }
}
.sidebar-primary-action {
  color: var(--view-background-color);
  background-color: var(--action-or-selection-color);
  font-weight: 500;
  line-height: 32px;
  padding: 0 16px;
  text-align: center;
  height: 32px;
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 100px;
  white-space: nowrap;
}
.sidebar-secondary-action {
  color: var(--action-or-selection-color);
  background-color: transparent;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  padding: 0 16px;
  text-align: center;
  margin-bottom: 10px;
  border: unset;
  cursor: pointer;
  border-radius: 100px;
}
.sidebar-secondary-border {
  color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
  background-color: var(--view-background-color);
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  padding: 0 16px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 100px;
}
.button-icon {
  font-size: 1.5em;
  float: left;
}
.sidebar-primary-action:active,
.sidebar-secondary-action:active,
.sidebar-secondary-border:active {
  opacity: 0.5;
}
.sidebar-button-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: var(--space-l);
}
.sidebar-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2xl);
}

.contact-modal-body {
  padding: 20px;
  margin-bottom: 36px;
}
.contact-modal-button {
  width: 180px;
  float: right;
}
.contact-modal-group label {
  padding: 0 0 5px 0;
  letter-spacing: 0;
  font-size: 0.75rem;
}
#message-text-field {
  resize: none;
  overflow: hidden;
  padding: 10px;
  min-height: 44px;
}

.deposit-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.deposit-row-container {
  margin: auto;
  display: flex;
  width: fit-content;
}
.deposit-column-container {
  margin: auto;
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 340px;
}
#qr-code-image,
#qr-code-image-loading {
  width: 200px;
  height: 200px;
  border-radius: 4px;
  margin: auto;
}
#deposit-branch,
#deposit-branch-loading {
  width: 40px;
  height: 20px;
}
#deposit-account,
#deposit-account-loading,
#deposit-taxId-loading {
  width: 200px;
  height: 20px;
}
#deposit-name,
#deposit-name-loading,
#deposit-taxId,
#deposit-key,
#deposit-key-loading {
  width: 340px;
  height: 20px;
}
#deposit-name-label,
#deposit-taxId-label,
#deposit-bank-label,
#deposit-key-label {
  width: 340px;
  margin-bottom: 5px;
}
#deposit-branch-label {
  width: 80px;
  margin-bottom: 5px;
}
#deposit-account-label {
  width: calc(340px - 80px);
  margin-bottom: 5px;
}
#deposit-bank-loading {
  width: 264px;
  height: 20px;
}

.issuing-statement-container {
  position: relative;
}
#issuing-balance-loading {
  width: 250px;
  height: 32px;
  margin-top: 7px;
  font-size: 32px;
}
.issuing-statement-table-cell {
  height: 72px;
  color: var(--title-color);
}

.issuing-purchase-container {
  position: relative;
}

.issuing-holder-container {
  position: relative;
}
.issuing-holder-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.issuing-card-container {
  position: relative;
}
.issuing-card-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.issuing-card-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}

.issuing-invoice-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
.issuing-invoice-container:hover {
  overflow-x: auto;
}
.issuing-invoice-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.issuing-invoice-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .issuing-invoice-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.issuing-invoice-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.issuing-invoice-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.issuing-withdrawal-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
.issuing-withdrawal-container:hover {
  overflow-x: auto;
}
.issuing-withdrawal-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.issuing-withdrawal-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .issuing-withdrawal-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.issuing-withdrawal-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.issuing-withdrawal-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.add-issuing-checkbox-debit-account {
  display: flex;
  flex-flow: row;
  gap: 40px;
}
.add-issuing-checkbox-invoice {
  display: flex;
  flex-flow: row;
  gap: 13px;
}

.issuing-purchase-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.issuing-purchase-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.issuing-purchase-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.issuing-purchase-table-header {
  height: 44px;
}
.issuing-purchase-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.issuing-purchase-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.issuing-purchase-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.issuing-purchase-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}

.checkbox {
  z-index: 10;
}
.checkbox spam {
  position: absolute;
  width: 25px;
  height: 25px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: background 200ms linear;
  -o-transition: background 200ms linear;
  transition: background 200ms linear;
}
.checkbox svg {
  position: absolute;
  margin: 2px;
  display: none;
}
.checkbox input {
  display: none;
}
.checkbox spam:hover {
  border: 2px solid var(--action-or-selection-color);
}
.checkbox input:checked ~ spam {
  border: 2px solid var(--action-or-selection-color);
  background-color: var(--action-or-selection-color);
}
.checkbox input:checked ~ svg {
  display: block;
  cursor: pointer;
}

.not-found {
  width: 100%;
  height: 100%;
  display: flex;
}
.not-found-container {
  margin: auto;
  display: flex;
  flex-direction: column;
}
.not-found-image {
  width: 300px;
  height: 300px;
  margin: auto;
}
@media (max-width: 700px) {
  .not-found-image {
    width: 60%;
    height: auto;
  }
}
.not-found-text {
  color: var(--text-color);
  text-align: center;
  font-size: 38px;
  font-weight: lighter;
  line-height: 47px;
  margin: auto;
  margin-top: 40px;
}
.not-found-button-container {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
@media (max-width: 700px) {
  .not-found-button-container {
    flex-direction: column;
    width: 100%;
  }
}
.not-found-button-container > .button,
.not-found-button-container > .button-border {
  width: 144px;
}
@media (max-width: 700px) {
  .not-found-button-container > .button,
  .not-found-button-container > .button-border {
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
  }
}
#not-found-space {
  width: 20px;
}
@media (max-width: 700px) {
  #not-found-space {
    width: 0px;
  }
}


.search-container {
  position: relative;
}
#customer-container {
  margin-top: 30px;
}
.tab-container {
  position: relative;
}
.charge-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 1%;
}
.charge-search-input {
  height: 48px;
}
.tab-bar {
  display: flex;
  width: 100%;
  overflow: hidden;
  margin: 29px 0px;
  border-bottom: 1px solid var(--line-color);
}
@media (max-width: 1000px) {
  .tab-bar {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 430px) {
  .tab-bar {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
.tab-bar:hover {
  overflow: auto;
}
.tab-bar-item {
  white-space: nowrap;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  padding: 20px var(--space-l);
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Pretendard-Thin';
  font-size: var(--text-s-thin-size);
  font-style: normal;
  font-weight: 200;
  line-height: var(--text-s-thin-line-height);
  letter-spacing: var(--text-s-thin-letter-spacing);
  border-bottom: 1px solid transparent;
}
.tab-bar-item .badge {
  line-height: 1;
  min-width: 10px;
  padding: 3px 7px;
  margin-left: 8px;
  color: var(--text-color);
  white-space: nowrap;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background-color: var(--menu-background-color);
  display: none;
}
.tab-bar-item.active {
  color: var(--action-or-selection-color);
  border-color: var(--action-or-selection-color);
  font-family: 'Pretendard-Demibold';
  font-size: var(--text-s-demibold-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--text-s-demibold-line-height);
  letter-spacing: var(--text-s-demibold-letter-spacing);
  border-bottom: 1px solid var(--action-or-selection-color);
}
.tab-bar-item.active .badge {
  color: var(--view-background-color);
  background-color: var(--action-or-selection-color);
}

.pix-claim-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
@media (max-width: 500px) {
  .pix-claim-container {
    overflow-x: auto;
  }
}
.pix-claim-container:hover {
  overflow-x: auto;
}
.pix-claim-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.pix-claim-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .pix-claim-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.pix-claim-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}

.theme-color-container {
  display: flex;
  flex-wrap: wrap;
}
.theme-package-item {
  margin-right: 26px;
  margin-bottom: 26px;
}
.theme-custom-item {
  margin-right: 34px;
  margin-bottom: 20px;
}
.language-button {
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.language-selected {
  border: 2px solid var(--action-or-selection-color);
  border-radius: 50%;
}
.picture-button-container {
  width: 50%;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1300px) {
  .picture-button-container {
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 700px) {
  .picture-button-container {
    flex-direction: row;
    width: 100%;
  }
}
.picture-action-container {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 700px) {
  .picture-action-container {
    flex-direction: column;
    gap: 20px;
  }
}
#image-tips {
  width: 50%;
  padding-inline-start: 0;
}
@media (max-width: 700px) {
  #image-tips {
    width: 100%;
  }
}
.workspace-name-input {
  background-color: var(--view-background-color);
  padding: 8px 8px 8px 12px;
  border: solid 1px #dcdbde;
  height: 40px;
  font-family: 'Pretendard';
}
.settings-workspace-name-container {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.settings-workspace-name-input-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-margin-top {
  margin-top: 24px;
}
.settings-add-image-icon {
  width: 24px;
  position: relative;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.settings-workspace-add-image-placeholder-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
}
.settings-add-image-config-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2xs);
}
.image-space-dropzone {
  width: 100%;
  position: relative;
  border-radius: var(--space-s);
  background-color: var(--background-full-neutral-secondary);
  border: 1px solid var(--neutral-silver-default);
  box-sizing: border-box;
  height: 186px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  gap: var(--space-l);
  text-align: left;
  font-size: 14px;
  color: var(--neutral-space-gray-default);
  max-width: 460px;
}
.logo-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-top: 24px;
}
.subtitle {
  position: relative;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-text-tertiary);
  text-align: left;
}
.workspace-image {
  width: 100%;
  box-sizing: border-box;
}
.workspace-edit-button {
  position: absolute;
  right: var(--space-xs);
  bottom: var(--space-xs);
}

.update-workspace-image-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.workspace-image-preview-container {
  width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-primary-default);
  padding: 14px var(--space-l);
  box-sizing: border-box;
}
.workspace-image-preview-container > img {
  width: 100%;
}
.update-workspace-image-footer-container {
  display: flex;
  justify-content: end;
  gap: 10px;
  padding: var(--space-l);
}
@media (max-width: 460px) {
  #workspace-crop-image-view {
    max-width: 50%;
  }
}

.upload-box {
  width: 300px;
  height: 60px;
  border-radius: 4px;
  display: flex;
  background-color: var(--success-background-color);
  border: 1px solid var(--success-border-color);
  color: var(--success-text-color);
  text-align: center;
}
.upload-box-title {
  color: var(--success-text-color);
  margin: auto;
}
.upload-image-container {
  display: none;
  margin: 5% auto;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(4%);
  pointer-events: none;
  z-index: 18;
}
#drop-container {
  margin-left: 2px;
  margin-right: 2px;
}
.drag-drop-image {
  width: 200px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -22px;
}
.drop-container-border {
  outline: auto;
  outline-color: var(--action-or-selection-color);
  outline-width: 2px;
  outline-width: 2px;
  outline-style: dashed;
  cursor: grabbing;
}
.upload-files-list-container {
  position: fixed;
  bottom: 0;
  left: 70%;
  left: calc(100% - 264px);
  margin-left: -100px;
  height: fit-content;
  width: 340px;
  background-color: var(--menu-background-color);
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border: 1px solid var(--border-color);
  text-align: center;
  overflow: hidden;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  transition: 0.4s;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  transition-delay: 0.5s;
  z-index: 12;
}
.upload-files-list-header {
  display: flex;
  color: var(--title-color);
  margin: auto;
  padding: 16px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
}
.upload-files-list-header-close-button,
.upload-files-list-header-hide-button {
  color: var(--action-or-selection-color);
  cursor: pointer;
  font-size: 24px;
}
.upload-files-list {
  background-color: var(--view-background-color);
  border-top: 1px solid var(--border-color);
  overflow: overlay;
  max-height: 500px;
}
.upload-files-list-item {
  display: flex;
  color: var(--title-color);
  height: 52px;
  border-bottom: 1px solid var(--border-color);
  justify-content: space-between;
  transition: max-height 0.15s ease-out;
}
.upload-files-list-item-title {
  text-align: left;
  align-self: center;
  margin-left: 12px;
}
.upload-files-list-icon {
  width: 24px;
  height: 24px;
  margin-top: 12px;
  margin-right: 12px;
}
.upload-files-list-rotate {
  transform: rotate(180deg);
}

.transfer-detail-container {
  position: relative;
}
.transfer-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.transfer-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.transfer-detail-table-header {
  height: 44px;
}
.transfer-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.transfer-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.transfer-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.transfer-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}
.transfer-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.transfer-detail-to-cell {
  text-align: right;
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.transfer-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.transfer-detail-from-to-cell>label,
.transfer-detail-to-cell>label {
  margin-bottom: 4px;
}
.step {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  flex-grow: 0;
  height: 15px;
  width: 15px;
  border: 4px solid var(--border-color);
  border-radius: 50%;
  margin-top: 12px;
}
.completed {
  width: 18px;
  height: 18px;
  background: var(--border-color);
  border: none;
}
.completed svg {
  transition: all 200ms ease;
  display: block;
  height: 10px;
  width: 10px;
}
.status-icon {
  font-size: 40px;
}
.line {
  transition: all 200ms ease;
  height: 2px;
  flex-grow: 1;
  background: var(--border-color);
  margin-top: 20px;
}

.transfer-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.card-header {
  padding: 16px 16px 0px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 700px) {
  .card-header {
    gap: 8px;
  }
}
.card-content {
  padding: 0px 16px 0px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 700px) {
  .card-content {
    padding: 16px 0px;
    flex-direction: column;
  }
}
@media (max-width: 500px) {
  .card-content {
    padding: 0px 0px 16px 0px;
  }
}
.card-div-start {
  display: flex;
  gap: 20px;
  align-items: center;
}
@media (max-width: 700px) {
  .card-div-start {
    margin-top: -10.5px;
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
}
.card-div-end {
  display: flex;
  gap: 20px;
  align-items: center;
}
@media (max-width: 700px) {
  .card-div-end {
    align-items: end;
    flex-direction: column;
    gap: 8px;
  }
}
.card {
  border: 1px solid var(--line-color);
  border-radius: 5px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.card-img {
  width: 180px;
}
.order-card-status-badge {
  display: none;
  min-width: 10px;
  padding: 4px 8px;
  color: var(--view-background-color);
  white-space: nowrap;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
  height: fit-content;
  display: inline-block;
}
.order-card-items-container {
  margin-top: 0px;
  margin-bottom: 20px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 700px) {
  .order-card-items-container {
    margin-right: 20px;
  }
}
@media (max-width: 500px) {
  .order-card-items-container {
    width: calc(100% - 40px);
    margin-bottom: 20px;
  }
}
.order-card-buttons-container {
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .order-card-buttons-container {
    margin-right: 20px;
    align-self: end;
  }
}
@media (max-width: 500px) {
  .order-card-buttons-container {
    width: calc(100% - 40px);
    align-self: center;
    margin: 0px;
  }
}

.carts-list-container {
  position: relative;
  margin-bottom: 12px;
  padding: 0 var(--space-15xl);
  padding-bottom: 24px;
}
@media (max-width: 1255px) {
  .carts-list-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .carts-list-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .carts-list-container {
    padding: 0 var(--space-xl);
  }
}
.carts-list-table {
  width: calc(100% - 40px);
  margin-top: -4px;
  margin-bottom: 12px;
  table-layout: auto;
}
@media (max-width: 700px) {
  .carts-list-table {
    width: 100%;
  }
}
.carts-list-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.carts-list-table td:last-child {
  padding-right: 0;
}
.carts-list-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.carts-list-table-header .shimmer {
  padding: 0px 40% 0px 0px;
}
.carts-list-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
@media (max-width: 700px) {
  .mobile-shimmer {
    display: none;
  }
}
.card .shimmer {
  color: transparent;
}
.cart-list-status-shimmer {
  width: 116px;
  height: 32px;
  border-radius: 10px;
}
.cart-list-button-shimmer {
  width: 117px;
  height: 32px;
}
@media (max-width: 500px) {
  .cart-list-button-shimmer {
    width: 100%;
  }
}
.order-card-items-container-shimmer {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 500px) {
  .order-card-items-container-shimmer {
    flex-direction: column;
  }
}
.order-card-image-shimmer {
  width: 180px;
  height: 100px;
  border-radius: 5px;
}
.order-card-items-button-container-shimmer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 700px) {
  .order-card-items-button-container-shimmer {
    margin-right: 20px;
    align-self: end;
  }
}
@media (max-width: 500px) {
  .order-card-items-button-container-shimmer {
    width: calc(100% - 40px);
    align-self: center;
    margin: 0px;
  }
}
.order-card-items-description-container-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.carts-list-banner-text {
  margin-left: 20px;
  margin-right: 20px;
}
.carts-list-banner-container {
  width: fit-content;
  background-color: #eaf4fe;
  height: fit-content;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-left: 40px;
  min-height: 79px;
  padding: 10px 0px;
}
.carts-list-banner-button {
  margin-right: 20px;
}
.cart-list-tab-item {
  font-family: 'Pretendard-Thin';
  font-size: var(--text-s-thin-size);
  font-style: normal;
  line-height: var(--text-s-thin-line-height);
  letter-spacing: var(--text-s-thin-letter-spacing);
  color: var(--text-color);
}
#cart-list-tabs > .tabs > .tab-active > .cart-list-tab-item {
  font-family: 'Pretendard-Demibold';
  font-size: var(--text-s-demibold-size);
  font-style: normal;
  line-height: var(--text-s-demibold-line-height);
  letter-spacing: var(--text-s-demibold-letter-spacing);
  color: var(--action-or-selection-color);
}
#cart-list-tabs > .tabs > .tab {
  padding: 20px 16px;
  white-space: nowrap;
}
#cart-list-tabs > .tabs {
  display: flex;
}

.cart-detail-list-container {
  position: relative;
}
.cart-detail-list-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  margin-top: 32px;
  table-layout: auto;
}
@media (max-width: 700px) {
  .cart-detail-list-table {
    width: 100%;
  }
}
.cart-detail-list-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.cart-detail-list-table td:last-child {
  padding-right: 0;
}
.cart-detail-list-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.cart-detail-list-table-header .shimmer {
  padding: 0px 40% 0px 0px;
}
.cart-detail-list-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
@media (max-width: 700px) {
  .mobile-shimmer {
    display: none;
  }
}
.cart-detail-item-container .shimmer {
  color: transparent;
}
.cart-detail-item-container {
  margin-top: 0px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 700px) {
  .cart-detail-item-container {
    margin-top: 15px;
  }
}
.cart-detail-table-cell .shimmer {
  padding: 0px 40% 0px 0px;
}

.cart-detail-table-cell {
  height: 72px;
  color: var(--title-color);
}
.cart-detail-info-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-item-img {
  width: 175px;
  height: 115px;
  border-radius: 5px;
}
@media (max-width: 500px) {
  .order-item-img {
    align-self: center;
  }
}
.order-item-view-container {
  margin-bottom: 20px;
  margin-left: 40px;
}
.order-item-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 500px) {
  .order-item-container {
    flex-direction: column;
  }
}

.order-detail-list-container {
  position: relative;
  margin-bottom: 12px;
  padding: 0 var(--space-15xl);
  padding-bottom: 24px;
}
@media (max-width: 1255px) {
  .order-detail-list-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .order-detail-list-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .order-detail-list-container {
    padding: 0 var(--space-xl);
  }
}
.order-detail-list-table {
  width: calc(100% - 40px);
  margin-top: 32px;
  margin-bottom: 12px;
  table-layout: auto;
}
@media (max-width: 700px) {
  .order-detail-list-table {
    width: 100%;
  }
}
.order-detail-list-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.order-detail-list-table td:last-child {
  padding-right: 0;
}
.order-detail-list-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.order-detail-list-table-header .shimmer {
  padding: 0px 40% 0px 0px;
}
.order-detail-list-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
@media (max-width: 700px) {
  .mobile-shimmer {
    display: none;
  }
}
.order-detail-item-container .shimmer {
  color: transparent;
}
.order-detail-item-container {
  margin-top: 0px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 700px) {
  .order-detail-item-container {
    margin-top: 15px;
  }
}
.order-detail-shimmer {
  padding: 0px 40% 0px 0px;
}
@media (max-width: 1250px) {
  .order-detail-info-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}
@media (max-width: 1250px) {
  .order-detail-checkout-container {
    width: 100% !important;
    margin-bottom: 24px;
  }
}
.order-detail-track-info-container {
  padding: 24px 0px;
  flex: 1 0 0;
  align-self: stretch;
  justify-content: center;
}
@media (max-width: 1250px) {
  .order-detail-track-info-container {
    padding: 0;
    gap: 40px;
  }
}
@media (max-width: 700px) {
  .order-detail-list-table-header {
    display: none;
  }
}
@media (max-width: 700px) {
  .order-detail-table-cell td {
    display: flex;
    border: none;
    align-items: center;
    padding-top: 12px;
    justify-content: space-between;
    padding-right: 0px;
  }
}
@media (max-width: 700px) {
  .order-detail-table-cell td::first-child {
    padding-top: 8px;
  }
}
@media (max-width: 700px) {
  .order-detail-table-cell td:last-child {
    padding-bottom: 8px;
  }
}
@media (max-width: 700px) {
  .order-detail-table-cell td::before {
    content: attr(data-cell);
    text-transform: capitalize;
    color: var(--text-color);
    font-family: 'Pretendard-Thin';
    font-size: var(--text-xs-regular-size);
    line-height: var(--text-xs-regular-line-height);
  }
}
#order-detail-card-track-view > .multi-steps {
  width: 100%;
  padding-left: 0px;
  margin: 0px;
}
@media (max-width: 820px) {
  .order-card-detail-info-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}

.order-detail-table-cell {
  height: 72px;
  color: var(--title-color);
}
@media (max-width: 700px) {
  .order-detail-table-cell {
    border-bottom: solid 1px var(--line-color);
  }
}
.order-detail-table-cell-address-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) {
  .order-detail-table-cell-address-container {
    flex-direction: column;
    margin-right: 10px;
  }
}
#order-detail-table-cell-status-container {
  margin: 4px -10px 0px -10px;
  width: 60%;
}
@media (max-width: 900px) {
  #order-detail-table-cell-status-container {
    width: 90%;
  }
}
.order-detail-table-cell-address-text {
  width: 100%;
}
@media (max-width: 700px) {
  .order-detail-table-cell-address-text {
    padding-left: 16px;
  }
}
#order-detail-table-cell-status {
  overflow: hidden;
}
.order-detail-info-container {
  display: flex;
  flex-direction: column;
/* gap: 4px; */
  padding: var(--space-l) 0;
}
@media (max-width: 700px) {
  .order-detail-info-container {
    flex-direction: row;
    padding: 0px;
  }
}
@media (max-width: 700px) {
  .order-detail-address-responsive {
    display: none;
  }
}
@media (max-width: 700px) {
  #order-detail-table-cell-track-button {
    padding-right: 0px;
  }
}

.cart-sidebar-container {
  border: 1px solid var(--border-color);
  padding: 20px;
  margin: -4px;
  border-radius: 8px;
}
.cart-sidebar-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.cart-sidebar-button-container {
  padding-top: 15px;
  margin-bottom: 28px;
}

.multiple-card-modal-container {
  margin: 24px;
}
.multiple-card-modal-footer {
  text-align: left;
  padding: 24px;
  background-color: var(--view-background-color);
  position: relative;
  height: auto;
  display: flex;
  justify-content: end;
  margin-bottom: 0px;
  gap: 24px;
}
@media (max-width: 700px) {
  .multiple-card-modal-footer {
    padding: 16px;
    flex-direction: row;
    margin: auto;
    align-items: center;
    width: fit-content;
  }
}
@media (max-width: 430px) {
  .multiple-card-modal-footer {
    padding: 16px;
    flex-direction: column;
    margin: 0px;
    align-items: center;
    width: initial;
  }
}
.divider {
  height: 1px;
  background-color: var(--line-color);
  margin-top: 16px;
  margin-bottom: 16px;
}
.multiple-card-icon {
  display: flex;
  align-self: center;
  margin-right: 8px;
  width: 16px;
  float: left;
  height: 16px;
}
.multiple-card-icon > svg > g > path,
.multiple-card-icon > svg > g > rect {
  fill: var(--action-or-selection-color);
}
.multiple-card-icon > svg {
  width: 16px;
  height: 16px;
}
#modal-copy-sheets-container {
  margin-bottom: 0px;
  display: flex;
}
@media (max-width: 430px) {
  #modal-copy-sheets-container {
    width: calc(100% - 32px);
    justify-content: center;
  }
}
#modal-download-excel-container {
  margin-bottom: 0px;
  display: flex;
}
@media (max-width: 430px) {
  #modal-download-excel-container {
    width: calc(100% - 32px);
    justify-content: center;
  }
}
.multiple-card-list-row {
  font-family: 'Pretendard-Thin';
  font-size: 14px;
  line-height: 18px;
  margin-left: 6px;
}
.multiple-card-list-row > b {
  font-family: 'Pretendard-Demibold';
}
.multiple-card-list-row-container {
  display: flex;
}
.multiple-card-confirm-button {
  margin-bottom: 0px;
  width: 180px;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  font-family: 'Pretendard-Regular';
}
.multiple-card-format-title {
  font-size: 26px;
  margin-top: 24px;
  line-height: 32px;
  font-family: 'Pretendard-Demibold';
}
.multiple-card-format-subtitle {
  font-size: 14px;
  line-height: 18px;
  font-family: 'Pretendard-Thin';
}
.multiple-card-request-modal-card-type {
  outline: 1px solid var(--border-color);
  border-radius: 6px;
  opacity: 1;
  padding: 16px 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  color: var(--text-color);
}
.multiple-card-request-modal-card-text {
  margin-left: 16px;
  margin-right: 16px;
}
.multiple-card-request-modal-card-img {
  margin-left: 16px;
  width: 24px;
  height: 24px;
}
.multiple-card-request-modal-card-text-title {
  font-family: 'Pretendard-Demibold';
  font-size: 16px;
  line-height: 20px;
  color: var(--title-color);
}
.multiple-card-request-modal-card-text-subtitle {
  font-family: 'Pretendard-Thin';
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color);
}
.multiple-card-request-modal-active {
  outline: 2px solid var(--action-or-selection-color);
  color: var(--action-or-selection-color);
}
.multiple-card-request-modal-card-img > svg > *,
.multiple-card-request-modal-card-img > svg > g > * {
  fill: var(--title-color);
}
.multiple-card-modal-types-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 12px;
  margin-bottom: 24px;
  margin-top: 24px;
}
@media (max-width: 600px) {
  .multiple-card-modal-types-container {
    flex-direction: column;
  }
}
.multiple-card-modal-types-container > collection-view-cell {
  width: 50%;
}
@media (max-width: 600px) {
  .multiple-card-modal-types-container > collection-view-cell {
    width: 100%;
  }
}

.dashboard {
  width: 100%;
  height: 80%;
  position: absolute;
}
#dashboard-header:has(.content-container-with-sidebar) {
  width: 100%;
  margin-left: 0px;
}
#dashboard-header {
  width: calc(100% - 400px);
  position: absolute;
  background-color: var(--view-background-color);
}
@media (max-width: 1140px) {
  #dashboard-header {
    position: static;
    width: 100%;
  }
}
#dashboard-menu {
  width: 100%;
  height: fit-content;
  max-height: 290px;
  background-color: var(--menu-background-color);
}
@media (max-width: 1000px) {
  #dashboard-menu #menu-header,
  #dashboard-menu #menu-container {
    margin-top: 28px;
  }
}
#dashboard-content {
  width: calc(100% - 540px);
  margin-top: 230px;
  margin-left: var(--space-15xl);
  position: absolute;
  height: fit-content;
  min-height: 100%;
}
@media (max-width: 1255px) {
  #dashboard-content {
    margin-left: var(--space-8xl);
    width: calc(100% - 420px);
  }
}
@media (max-width: 1140px) {
  #dashboard-content {
    width: calc(100% - 160px);
    margin-top: 0;
  }
}
@media (max-width: 870px) {
  #dashboard-content {
    margin-left: var(--space-3xl);
    width: calc(100% - 80px);
  }
}
@media (max-width: 430px) {
  #dashboard-content {
    margin-left: var(--space-xl);
    width: calc(100% - 48px);
  }
}
@media (max-width: 375px) {
  #dashboard-content {
    margin-left: auto;
    width: 100%;
  }
}
@media print {
  #dashboard-content {
    margin-top: 0px;
    margin-left: 0px;
    width: 100%;
  }
}
#dashboard-content:has(.full-page-content-container) {
  width: 100%;
  margin-left: 0px;
}
#dashboard-sidebar {
  width: 280px;
  height: 100vh;
  right: calc(140px - 40px);
  z-index: 20;
  position: absolute;
  background-color: var(--background-color);
}
@media (max-width: 1225px) {
  #dashboard-sidebar {
    right: calc(80px - 40px);
  }
}
@media (max-width: 1140px) {
  #dashboard-sidebar {
    display: none;
    z-index: 22;
    right: -20px;
    width: 0;
    position: fixed;
    margin-top: 0;
    top: 0;
    background-color: var(--menu-background-color);
  }
}
#dashboard-sidebar:has(.hide-sidebar) {
  display: none;
}
#dashboard-sidebar:has(.sidebar-only-mobile) {
  display: none;
}
.receivable-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 40px;
  gap: 20px;
}
@media (max-width: 700px) {
  .receivable-container {
    flex-direction: column;
  }
}
.receivable-item {
  width: 30%;
  border: 1px solid var(--border-color);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 27px 20px 20px 20px;
  text-align: left;
  color: var(--text-color);
}
@media (max-width: 700px) {
  .receivable-item {
    width: 90%;
  }
}
.receivable-title {
  margin-bottom: 10px;
  height: 18px;
}
.receivable-loading {
  position: absolute;
  margin-top: 0px;
  width: 200px;
  height: 200px;
  z-index: 10;
}
.receivable-title-loading {
  position: absolute;
  margin-top: -67px;
  margin-bottom: 2px;
  width: 85%;
  max-width: 175px;
  height: 20px;
}
.receivable-value-loading {
  width: 90%;
  max-width: 180px;
  height: 36px;
  position: absolute;
  margin-top: -37px;
}
.dashboard-resume {
  border: 1px solid var(--border-color);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 28px 18px;
  text-align: left;
  background-color: var(--view-background-color);
  margin-top: 40px;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.dashboard-resume:first-child {
  margin-top: 0;
}
.dashboard-resume-icon {
  color: var(--text-color);
}
.dashboard-resume p {
  font-size: 0.75rem;
  text-align: justify;
  margin-bottom: 22px;
}
.dashboard-resume span {
  margin: 15px 0px;
  display: block;
}
.dashboard-graph {
  height: 360px;
  width: 100%;
}
@media (max-width: 1440px) {
  .dashboard-graph {
    height: 235px;
  }
}
.graph-date-selector {
  border: 1px solid var(--action-or-selection-color);
  width: fit-content;
  border-radius: 4px;
  padding: 8px;
  border-radius: var(--radius-full);
}
.graph-date-selector > label {
  cursor: pointer;
  padding-bottom: 4px;
  color: var(--action-or-selection-color);
}
.usc-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 20px;
}
@media (max-width: 1100px) {
  .usc-container {
    margin-top: 52px;
    flex-direction: column;
  }
}
@media (max-width: 430px) {
  .usc-container {
    margin-top: 0px;
  }
}
.usc-choice {
  border: 1px solid var(--action-or-selection-color);
  border-radius: var(--radius-full);
  width: 160px;
}
.radio-custom {
  font-size: 14px;
  box-sizing: border-box;
  display: block;
  float: left;
  font-weight: 200;
  text-align: center;
  text-transform: initial;
  width: 50%;
  padding: 8px 4px;
  transition: background 0.2s, color 0.2s;
  color: var(--action-or-selection-color);
  border-radius: var(--radius-full);
}
.radio-custom:first-of-type {
  margin-left: 0;
}
.radio-custom:hover {
  cursor: pointer;
  color: var(--text-color);
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  background: var(--action-or-selection-color);
  color: var(--view-background-color);
}
.date-indicator {
  margin-top: 36px;
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  margin-bottom: 4px;
  font-size: 0.75rem;
  color: var(--text-color);
}
.mobile-sidebar-active {
  display: block !important;
  width: 100% !important;
  margin-top: 0 !important;
  right: 0px !important;
}
.campaign-banner-container {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-radius: 8px;
}
@media (max-width: 1100px) {
  .campaign-banner-container {
    height: 175px;
    justify-content: flex-end;
  }
}
.campaign-banner-video {
  object-fit: cover;
  object-position: 50% 40%;
  width: 100%;
  height: 100%;
}
@media (max-width: 1100px) {
  .campaign-banner-video {
    object-position: 30% 10%;
    height: 140%;
  }
}
.campain-banner-content {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 100%;
  padding: 20px 80px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-7xl);
  height: 100%;
}
@media (max-width: 1400px) {
  .campain-banner-content {
    gap: var(--space-xl);
  }
}
@media (max-width: 1300px) {
  .campain-banner-content {
    padding: 20px 50px;
  }
}
@media (max-width: 1300px) {
  .campain-banner-content {
    padding: 20px;
  }
}
@media (max-width: 1100px) {
  .campain-banner-content {
    width: 50%;
    gap: var(--space-s);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}
#main-banner-view {
  padding: var(--space-xl) var(--space-15xl) 0px var(--space-15xl);
}
@media (max-width: 1255px) {
  #main-banner-view {
    padding: var(--space-xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  #main-banner-view {
    padding: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  #main-banner-view {
    padding: var(--space-xl);
  }
}
.campaign-banner-subtitle {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 200;
  line-height: 26px;
}
@media (max-width: 745px) {
  .campaign-banner-subtitle {
    font-size: var(--size-xs);
    font-style: normal;
    font-weight: 400;
    line-height: 12px;
  }
}
.campaign-banner-title {
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}
@media (max-width: 745px) {
  .campaign-banner-title {
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
  }
}

.consolidated-view-container {
  margin-bottom: var(--space-10xl);
}
.consolidated-bar {
  width: 100%;
  height: 18px;
  border-radius: var(--radius-full);
  align-self: stretch;
  display: flex;
  align-items: center;
  background-color: var(--background-full-neutral-disabled);
  overflow: hidden;
  pointer-events: none;
}
.consolidated-bar-shimmer {
  width: 100%;
  height: 18px;
  border-radius: var(--radius-full);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.consolidated-progress-bar {
  pointer-events: auto;
  height: 100%;
}
@media (max-width: 1030px) {
  .consolidated-desktop-container {
    display: none;
  }
}
@media (min-width: 1031px) {
  .consolidated-responsive-container {
    display: none;
  }
}
.consolidated-color-indicator {
  width: var(--space-s);
  height: var(--space-xl);
  border-radius: var(--radius-full);
}
.consolidated-tables-container {
  margin-bottom: var(--space-xl);
}
@media (max-width: 1200px) {
  .consolidated-tables-container {
    flex-direction: column;
  }
}
@media (max-width: 800px) {
  .consolidated-reversed-indicator {
    flex-direction: row-reverse;
  }
}
#outcome-table-view > thead > tr > th,
#income-table-view > thead > tr > th {
  width: calc(100% / 3);
}
.consolidated-table {
  height: 50vh;
}
@media (max-width: 1440px) {
  .consolidated-table {
    height: 70vh;
  }
}
.consolidated-product-label {
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .consolidated-datepicker-container {
    align-items: start;
  }
}
@media (max-width: 1000px) {
  .consolidated-header {
    gap: var(--space-l);
    flex-direction: column !important;
  }
}
#consolidated-outcome-percentage-value-label,
#consolidated-income-percentage-value-label {
  min-height: 24px;
}

.datepicker-field > .dateinput {
  display: flex;
  height: 40px;
  padding: var(--space-s) var(--space-m);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  font-size: var(--text-s-regular-size);
  font-style: normal;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
  border-radius: var(--radius-m);
  cursor: text;
  background-color: var(--background-full-neutral-primary);
  border: 1px solid var(--border-primary-default);
  caret-color: var(--border-brand-default);
  box-sizing: border-box;
  color: var(--text-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statement-main-section-container {
  height: 1000px;
  padding: 0 var(--space-15xl);
  margin-bottom: var(--space-15xl);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom right;
}
@media (max-width: 1470px) {
  .statement-main-section-container {
    height: 700px;
    padding: 0 var(--space-10xl);
  }
}
@media (max-width: 950px) {
  .statement-main-section-container {
    padding: 0 var(--space-8xl);
    padding-bottom: var(--space-2xl);
    justify-content: end;
  }
}
@media (max-width: 500px) {
  .statement-main-section-container {
    padding: 0 var(--space-xl);
    padding-bottom: var(--space-2xl);
  }
}
.statement-main-pt-container {
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 60%), url(./images/statement-headline-banner.png);
}
@media (max-width: 950px) {
  .statement-main-pt-container {
    background-image: linear-gradient(360deg, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 50%), url(./images/statement-headline-banner.png);
  }
}
.statement-main-eng-container {
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 95%), url(./images/statement-headline-banner-eng.png);
}
@media (max-width: 950px) {
  .statement-main-eng-container {
    background-image: linear-gradient(360deg, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0) 50%), url(./images/statement-headline-banner-eng.png);
  }
}
.statement-main-section-content {
  width: 50%;
}
@media (max-width: 950px) {
  .statement-main-section-content {
    width: 100%;
  }
}
.statement-video-section-container {
  margin-bottom: var(--space-15xl);
}
@media (max-width: 500px) {
  .statement-video-section-container {
    margin-bottom: var(--space-8xl);
  }
}
.statement-extension-section-container {
  padding: var(--space-8xl) 0;
}
.statement-card-list-container {
  overflow: scroll;
}
.statement-card {
  padding: var(--space-2xl);
  min-width: 350px;
  scroll-behavior: smooth;
  scroll-snap-align: left;
}
.statement-video-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.statement-video {
  width: 100%;
  border-radius: var(--radius-l);
}
@media (max-width: 800px) {
  .statement-cards-container {
    flex-direction: column;
  }
}
@media (max-width: 660px) {
  .statement-buttons-container {
    flex-direction: column;
    align-items: center;
  }
}
#statement-headline-description-label {
  max-width: 520px;
}

.statement-balance-banner-container {
  display: flex;
  align-items: center;
  justify-content: start;
  border: 1px solid var(--line-color);
  border-radius: var(--radius-l);
  background: linear-gradient(269deg, rgba(47,49,51,0) 34.46%, rgba(47,49,51,0.9) 53.81%), url(./images/statement-balance-banner.png) #d3d3d3 no-repeat;
  background-position: top right;
  height: 430px;
  background-size: cover;
}
@media (max-width: 700px) {
  .statement-balance-banner-container {
    background: linear-gradient(360deg, rgba(47,49,51,0) 34.46%, rgba(47,49,51,0.9) 92.81%), url(./images/statement-balance-banner-mobile.png) #d3d3d3 no-repeat;
    flex-direction: column;
    background-position: top right;
    background-size: cover;
    height: 600px;
  }
}
.statement-balance-banner-text-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 60%;
  max-width: 635px;
  padding: 40px 0px 40px 40px;
  box-sizing: border-box;
}
@media (max-width: 700px) {
  .statement-balance-banner-text-container {
    width: 100%;
    max-width: 100%;
    padding: 40px 40px 10px 40px;
  }
}
#balance-visibility-button > .btn-content > .btn-content-icon-container > svg > g > path,
#balance-visibility-button > .btn-content > .btn-content-icon-container > svg > defs > clipPath > rect {
  fill: var(--text-text-primary);
}
.balance-view-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}
@media (max-width: 500px) {
  .card-holder-title-view >,
  #balance-download-button {
    padding-left: 0;
  }
}
@media (max-width: 1450px) {
  .balance-page-container {
    margin-bottom: var(--space-9xl);
  }
}

.statement {
  width: 100%;
  height: 100%;
  position: absolute;
}
#statement-balance {
  margin-top: 0px;
}

.statement-transaction-container-full-size {
  padding: 0px var(--space-15xl) var(--space-8xl) var(--space-15xl);
}
@media (max-width: 1255px) {
  .statement-transaction-container-full-size {
    padding: 0px var(--space-8xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .statement-transaction-container-full-size {
    padding: 0px var(--space-3xl) var(--space-8xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .statement-transaction-container-full-size {
    padding: 32px var(--space-xl) 40px var(--space-xl);
  }
}
@media (max-width: 700px) {
  .statement-transaction-table {
    width: 100%;
  }
}
.statement-transaction-table-header td {
  color: var(--text-color);
  padding-bottom: 13px;
}
.statement-transaction-table-header-border {
  border-bottom: 1px solid var(--border-primary-default);
}
.statement-transaction-header-cell {
  white-space: nowrap;
  font-family: "Pretendard-Thin";
  font-size: 14px;
  font-style: normal;
  font-weight: 200;
  line-height: 22px;
  padding-left: 16px;
}
.statement-transaction-table-cell-responsive {
  cursor: pointer;
  height: 112px;
}
.statement-transaction-table-cell {
  cursor: pointer;
  height: 95px;
}
.statement-transaction-table-cell td {
  padding-top: 0;
  padding-bottom: 0;
}
.statement-transaction-table-cell td:not(:first-child):not(:last-child) {
  border-top: 1px solid var(--line-color);
  border-bottom: 1px solid var(--line-color);
}
.statement-transaction-table-cell:last-child td:not(:first-child):not(:last-child) {
  border-bottom: 1px solid var(--line-color);
}
#statement-transaction-table > tbody::before {
  content: '';
  display: block;
  height: 16px;
}
.statement-transaction-table-cell-type-shimmer {
  width: 100px;
  color: transparent;
  margin-bottom: 5px;
}
.statement-transaction-table-cell-description-shimmer {
  width: 250px;
  color: transparent;
}
.statement-transaction-table-cell-date-shimmer {
  margin-top: 4px;
  width: 120px;
  color: transparent;
}
.statement-transaction-table-cell-amount-shimmer {
  width: 150px;
  color: transparent;
}
.statement-transaction-table-cell-fee-shimmer {
  width: 70px;
  color: transparent;
}
.statement-transaction-tree-header {
  width: 37px;
}
@media (max-width: 500px) {
  .statement-transaction-tree-header {
    width: 4px;
  }
}

.statement-transaction-positive-flow > svg > path {
  stroke: #00e0b4;
}
.statement-transaction-positive-flow-arrow {
  border: 1.6px solid #00e0b4;
  background: #ebfffb;
  transform: rotateX(180deg);
}
.statement-transaction-positive-flow-arrow > svg > path {
  fill: #00e0b4;
}
.statement-transaction-positive-flow-text {
  color: #00856a;
}
.statement-transaction-positive-flow-icon {
  fill: #00856a;
}
.statement-transaction-negative-flow > svg > path {
  stroke: #b80062;
}
.statement-transaction-negative-flow-arrow {
  border: 1.6px solid #e00077;
  background: #feeaf5;
}
.statement-transaction-negative-flow-arrow > svg > path {
  fill: #e00077;
}
.statement-transaction-negative-flow-text {
  color: #b80062;
}
.statement-transaction-negative-flow-icon {
  fill: #b80062;
}
.statement-transaction-tree-icon > svg > path,
.statement-transaction-tree-icon > svg > circle {
  fill: var(--title-color);
}

#confirm-password {
  transition: height 0.5s;
}
.open {
  overflow-x: revert;
  height: 77px;
}
.close {
  overflow-x: hidden;
  height: 0px;
}
.progress {
  width: 100%;
  height: 5px;
  border-radius: 10px;
  max-width: 100%;
}
.progress-wrap {
  background: var(--action-or-selection-color);
  overflow: hidden;
  position: relative;
}
.progress-wrap .progress-bar {
  background: #f2f2f9;
  left: 0;
  position: absolute;
  top: 0;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
.password-checkbox {
  position: relative;
  width: 42px;
  height: 42px;
  z-index: 1;
  appearance: none;
  outline: none;
  cursor: pointer;
  margin-top: auto;
  margin-bottom: auto;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left-color: transparent;
  margin-left: -4px;
}
.show {
  background: url(./images/show-password.svg) no-repeat center;
}
.hide {
  background: url(./images/hide-password.svg) no-repeat center;
}
#application-password-textfield {
  border-right-color: transparent;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
#application-password-textfield:focus ~ .password-checkbox {
  outline: none;
  border: 2px solid var(--action-or-selection-color);
  border-left-color: transparent;
  height: 40px;
}
#workspace-url-textfield {
  padding-right: 4px;
}
.loading-ring-large div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid var(--action-or-selection-color);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--action-or-selection-color) transparent transparent transparent;
}
.validate-button-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  height: auto;
}
.validate-button-container-item {
  display: flex;
  flex-direction: column;
}
.create-workspace-title {
  font-family: "Pretendard-Demibold";
  font-size: 40px;
  line-height: 48px;
}
@media (max-width: 1080px) {
  .create-workspace-title {
    font-size: 24px;
    line-height: 24px;
  }
}
.create-workspace-subtitle {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 20px;
}
.workspace-name-fixed {
  font-family: "Pretendard-Thin";
  font-size: 20px;
  line-height: 20px;
  color: #333;
}
@media (max-width: 1080px) {
  .workspace-name-fixed {
    font-size: 16px;
  }
}

.vtex-modal-background {
  display: none;
  position: fixed;
  z-index: var(--modal-backgroud-z-index);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(44,65,86,0.38);
}
.vtex-modal-view {
  z-index: 13;
  background-color: var(--view-background-color);
  margin: 10% auto;
  border: 1px solid var(--line-color);
  width: 920px;
  width: -moz-fit-content;
  border-radius: 4px;
  display: flex;
  flex-flow: column;
  height: fit-content;
  height: -moz-fit-content;
}
@media (max-width: 1000px) {
  .vtex-modal-view {
    width: calc(100% - 40px);
  }
}
.vtex-modal-view-header {
  display: flex;
  justify-content: flex-end;
  padding: 32px 24px;
}
.vtex-modal-view-container {
  display: flex;
  flex-flow: row;
  gap: 24px;
  margin: 0 32px 32px 32px;
}
@media (max-width: 735px) {
  .vtex-modal-view-container {
    flex-direction: column;
  }
}
#vtex-logo-image-view {
  height: 28px;
  align-self: center;
  margin-bottom: 10px;
}
.vtex-modal-list-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vtex-modal-item {
  display: flex;
  gap: 15px;
  padding: 0 32px;
}
.vtex-information-logo-container {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.vtex-information-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  width: 50%;
}
.vtex-auth-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 50%;
  gap: 32px;
}
.dismiss-vtex-modal-button {
  color: var(--action-or-selection-color);
  font-size: 26px;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
}
@media (max-width: 735px) {
  .vtex-information-container,
  .vtex-auth-container {
    width: auto;
  }
}
.vtex-confirm-subtitle {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 18px;
}
.vtex-allow-subtitle {
  font-family: "Pretendard-Demibold";
  font-size: 18px;
  line-height: 18px;
}
.vtex-modal-item-label {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 18px;
  align-content: center;
}
.vtex-qrcode-title {
  font-family: "Pretendard-Demibold";
  font-size: 30px;
  line-height: 40px;
  text-align: center;
}
@media (max-width: 1080px) {
  .vtex-qrcode-title {
    font-size: 24px;
    line-height: 24px;
  }
}
.vtex-qrcode-subtitle {
  font-family: "Pretendard-Hair";
  font-size: 16px;
  line-height: 18px;
}
.vtex-qrcode-titles-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vtex-qrcode-email {
  text-align: center;
  font-family: "Pretendard-Light";
  font-size: 15px;
  line-height: 18px;
}
.vtex-section-divider {
  border: 1px solid var(--line-color);
}
@media (max-width: 735px) {
  .vtex-section-divider {
    margin: 20px 0;
    border: transparent;
  }
}
.vtex-qrcode-bottom-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qrcode-view-image-container {
  width: 250px;
  height: 250px;
  border-radius: 8px;
  background-color: var(--menu-background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#qrcode-view-image {
  border-radius: 10px;
  width: 180px;
  height: 180px;
}
#qrcode-view-backdrop {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: rgba(247,249,250,0.62);
}
#qrcode-view-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#qrcode-view-refresh {
  position: absolute;
  border-radius: 16px;
  padding: 16px;
  height: 85px;
  width: 85px;
  background-color: var(--action-or-selection-color);
  cursor: pointer;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.qrcode-view-refresh-container {
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.qrcode-view-refresh-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
}
.qrcode-view-refresh-icon {
  font-size: 20px;
  color: var(--line-color);
}
.qrcode-view-refresh-text {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 20px;
  color: var(--line-color);
}
.qrcode-view-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.qrcode-view-or-label {
  font-size: 14px;
  text-align: center;
  font-family: 'Pretendard-Hair';
  line-height: 20px;
}
.open-stark-auth-app-button {
  color: var(--action-or-selection-color);
  background-color: var(--view-background-color);
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  font-family: 'Pretendard-Demibold';
  line-height: 20px;
  height: 44px;
}

.header-logo {
  width: 160px;
  height: 32px;
  margin-top: 24px;
  margin-left: 24px;
  display: none;
}
.customer-name-title,
.customer-description-title,
.table-view,
.table-view-loading,
#title-shimmer,
#description-shimmer,
.boleto {
  margin-top: 12px;
  margin-left: 24px;
  margin-right: 24px;
}
.background {
  background-color: var(--view-background-color);
  margin-left: auto;
  margin-right: auto;
}
.table-view-loading,
.boleto-table {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 48px;
}
.boleto-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
}
.customer-name-title {
  display: none;
  width: fit-content;
  height: 48px;
}
#title-shimmer {
  width: 244px;
  height: 48px;
}
#description-shimmer {
  width: 496px;
  height: 33px;
}
#logo-shimmer {
  margin-top: 24px;
  margin-left: 24px;
  width: 160px;
  height: 32px;
}
.table-view-detail {
  margin-top: 184px;
  margin-left: 24px;
  margin-right: 24px;
}
.barcode-detail {
  margin-left: 60px;
  margin-right: 24px;
}
@media (max-width: 700px) {
  .barcode-detail {
    margin-left: 24px;
  }
}
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}
.options-container {
  display: flex !important;
  float: right;
}
.options-container :last-child {
  margin-left: 12px;
}
.options-container>.button {
  width: 120px;
}
@-moz-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#boleto-link-detail {
  width: 700px;
  margin: auto;
}
@media (max-width: 700px) {
  #boleto-link-detail {
    width: 450px;
  }
}
#boleto-line-link-detail {
  margin-left: 8px;
  margin-right: 8px;
}
#boleto-link-shimmer {
  margin: auto;
  width: 700px;
  height: 55px;
  margin-top: 16px;
}
@media (max-width: 700px) {
  #boleto-link-shimmer {
    margin-top: -4px;
    width: 450px;
    height: 32px;
  }
}
#boleto-line-link-detail-shimmer {
  margin: auto;
  width: 400px;
  height: 35px;
  margin-top: 12px;
}
@media (max-width: 700px) {
  #boleto-line-link-detail-shimmer {
    height: 32px;
  }
}

.credit-note-detail-container {
  position: relative;
}
.credit-note-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.credit-note-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.credit-note-detail-table-header {
  height: 44px;
}
.credit-note-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.credit-note-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.credit-note-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.credit-note-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.credit-note-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.credit-note-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.credit-note-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.credit-note-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}
.credit-note-detail-image {
  margin-top: 12px;
  height: 32px;
  width: 160px;
}

.operations-container {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  transform: rotateX(180deg);
}
.operations-container:hover {
  overflow-x: auto;
}
.operations-table {
  width: calc(100% - 40px);
  margin-top: -4px;
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .operations-table {
    width: auto;
  }
}
.operations-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.operations-table th {
  padding-right: 16px;
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
}

.operation-credit-note-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
.operation-credit-note-container:hover {
  overflow-x: auto;
}
.operation-credit-note-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.operation-credit-note-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .operation-credit-note-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.operation-credit-note-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}

.tag-input-container {
  height: fit-content;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  margin-top: 10px;
  flex-wrap: wrap;
  cursor: text;
  max-height: 140px;
  overflow: hidden;
  overflow: auto;
}
.full-size {
  width: 100%;
}
.operations-modal-section-title {
  font-size: 24px;
  color: var(--title-color);
}
.operations-modal-section-title {
  font-size: 24px;
  color: var(--title-color);
  font-family: "Pretendard-Regular";
}
.operations-modal-section-subtitle {
  font-size: 14px;
  color: var(--text-color);
  font-family: "Pretendard-Thin";
}
#operation-filter-tags {
  height: fit-content;
  display: flex;
  overflow-x: auto;
  flex-wrap: wrap;
  max-height: 88px;
  margin-top: 9px;
}
.operation-filter-no-margin-top {
  margin-top: 0px !important;
}
.operation-filter-no-margin-bottom {
  margin-bottom: 0px !important;
}
.operation-filter-half-width {
  width: 48% !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 600px) {
  .operation-filter-half-width {
    width: 100% !important;
  }
}
.operation-filter-full-width {
  width: 100% !important;
}
@media (max-width: 600px) {
  .operation-filter-responsive-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 24px 0px;
  }
}
.operation-filter-only-mobile {
  display: none;
}
@media (max-width: 600px) {
  .operation-filter-only-mobile {
    display: block;
  }
}


.mobile-cell-flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-xl);
  align-self: stretch;
}
.mobile-cell-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: stretch;
}
.mobile-cell-text-default {
  font-size: var(--text-xs-regular-size);
  font-weight: 400;
  line-height: var(--text-xs-regular-line-height);
  color: var(--text-color);
}
.mobile-cell-text-subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.mobile-cell-text-title {
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  font-size: var(--text-s-regular-size);
  font-weight: 400;
  line-height: var(--text-s-regular-line-height);
}
.mobile-cell-badge {
  border-radius: var(--space-xs);
  display: flex;
  padding: var(--space-xs) var(--space-s);
  justify-content: center;
  align-items: center;
}
.mobile-cell-flex-column-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  align-self: stretch;
}

.main-operation-sidebar-inputs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--space-xl);
}

.main-operation-table {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 12px;
  table-layout: auto !important;
  transform: rotateX(180deg);
}
@media (max-width: 430px) {
  .main-operation-table {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
.main-operation-table td {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
@media (max-width: 430px) {
  .main-operation-table td {
    padding-right: 0px;
  }
}
.main-operation-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.main-operation-container {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  transform: rotateX(180deg);
  margin-block: 20px;
}
@media (max-width: 430px) {
  .main-operation-container {
    margin-top: 0px;
    margin-block: 0px;
  }
}
.main-operation-input-label {
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
}
.main-operation-outer-container {
  padding: 0 var(--space-15xl);
}
@media (max-width: 1255px) {
  .main-operation-outer-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .main-operation-outer-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .main-operation-outer-container {
    padding: 0;
  }
}
.main-operation-inputs-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
@media (max-width: 1100px) {
  .main-operation-inputs-container {
    display: grid;
    gap: 8px;
  }
}
.main-operation-select-container {
  width: 100%;
}
@media (max-width: 1100px) {
  .main-operation-select-container {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .main-operation-select-container {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
  }
}
.main-operation-resource-select-container {
  width: 100%;
}
@media (max-width: 1100px) {
  .main-operation-resource-select-container {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .main-operation-resource-select-container {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
  }
}
.main-operation-status-select-container {
  width: 100%;
}
@media (max-width: 1100px) {
  .main-operation-status-select-container {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .main-operation-status-select-container {
    grid-row: 2;
    grid-column: 1;
    width: 100%;
  }
}
.main-operation-fill-available {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
.main-operation-overlay-x {
  overflow-x: overlay;
}
@media (max-width: 430px) {
  .mobile-hidden {
    display: none;
  }
}
.mobile-show-table {
  display: none;
}
@media (max-width: 430px) {
  .mobile-show-table {
    display: table;
  }
}
.mobile-show-flex {
  display: none;
}
@media (max-width: 430px) {
  .mobile-show-flex {
    display: flex;
  }
}
.main-operation-tags-container {
  display: flex;
  padding: 24px 0px 16px 0px;
  align-items: center;
  align-content: center;
  gap: 12px;
  align-self: stretch;
  flex-wrap: wrap;
}
@media (max-width: 430px) {
  .main-operation-tags-container {
    padding: 0px 24px 16px 24px;
  }
}
.main-operation-tag-view-container {
  display: flex;
  padding: var(--space-xs) var(--space-s);
  align-items: center;
  gap: var(--space-s);
  border-radius: var(--space-s);
  border: 1px solid var(--border-primary-default, #dcdbde);
  background: var(--background-full-neutral-secondary, #f9f9fc);
}
.main-operation-tag-view-text {
  font-size: var(--text-s-regular-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-s-regular-line-height); /* 150% */
}
.main-operation-tag-close-img {
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.main-operation-tag-close-img > g > path {
  fill: var(--action-or-selection-color);
}
.main-operation-mobile-operation-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2xl) var(--space-xl) 32px var(--space-xl);
}
.main-operation-bottom-sheet-container {
  width: calc(100% - 48px);
  border-radius: var(--radius-l) var(--radius-l) 0px 0px;
  background: var(--menu-background-color);
  position: absolute;
  bottom: 0px;
  display: flex;
  padding: var(--space-s) var(--space-xl) 0px var(--space-xl);
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.main-operation-bottom-sheet-content-container {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.main-operation-bottom-sheet-title {
  font-size: var(--heading-l-size);
  font-weight: 600;
  line-height: var(--heading-l-line-height);
}
.main-operation-bottom-sheet-content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  align-self: stretch;
}
.main-operation-bottom-sheet-content-item-icon > svg > path,
.main-operation-bottom-sheet-content-item-icon > svg > g > path {
  fill: var(--title-color);
}
.main-operation-bottom-sheet-content-item {
  display: flex;
  padding: var(--space-l);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  cursor: pointer;
}
.bottom-sheet-close-container {
  display: flex;
  padding: 24px 0px 16px 0px;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  align-self: stretch;
}
.bottom-sheet-close-container > svg > path {
  fill: var(--action-or-selection-color);
}
.main-operation-filter-button {
  height: 24px;
  align-self: flex-end;
}
.main-operation-mobile-input-container {
  display: flex;
  justify-content: space-between;
}
.main-operation-filter-button-mobile {
  height: 24px;
  align-self: center;
  margin-right: var(--space-xl);
}

.main-operation-filter-input-container {
  height: fit-content;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  flex-wrap: wrap;
  cursor: text;
  max-height: 140px;
  overflow: hidden;
  overflow: auto;
}

#pix-statement-container {
  width: 100%;
  height: 100%;
  position: absolute;
}
#pix-balance-container {
  position: relative;
  margin-top: 0px;
}
@media (max-width: 700px) {
  #pix-balance-container {
    margin-top: 24px;
  }
}
#pix-balance-view {
  position: absolute;
}
#pix-balance-title {
  font-size: 12px;
  color: var(--text-color);
}
#pix-balance-value {
  font-size: 32px;
  color: var(--title-color);
  margin-top: 7px;
}
#pix-balance-loading {
  position: absolute;
  margin-top: 0px;
  width: 200px;
  height: 200px;
  z-index: 10;
}
#pix-balance-title-loading {
  position: absolute;
  margin-top: 2px;
  margin-bottom: 2px;
  width: 50px;
  height: 12px;
  z-index: 10;
}
#pix-balance-value-loading {
  width: 250px;
  height: 32px;
  position: absolute;
  margin-top: 26px;
}
.pix-transaction-container {
  position: relative;
  margin-top: 120px;
}
.pix-transaction-table {
  width: calc(100% - 40px);
  margin-top: -4px;
  margin-bottom: 12px;
  table-layout: auto;
}
@media (max-width: 700px) {
  .pix-transaction-table {
    width: 100%;
  }
}
.pix-transaction-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.pix-transaction-table td:last-child {
  padding-right: 0;
}
.pix-transaction-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.pix-transaction-table-header .shimmer {
  padding: 0px 40% 0px 0px;
}
.pix-transaction-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
@media (max-width: 700px) {
  #pix-transaction-table-cell-balance,
  #pix-transaction-table-header-balance {
    display: none;
  }
}
#pix-transaction-table-header-description {
  width: 70%;
}
@media (max-width: 700px) {
  #pix-transaction-table-header-description {
    width: 80%;
  }
}
@media (max-width: 700px) {
  .mobile-shimmer {
    display: none;
  }
}

.investment-main-top-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: center;
  gap: var(--space-6xl);
  align-self: stretch;
  background: var(--background-full-neutral-inverse);
}
@media (max-width: 1255px) {
  .investment-main-top-section {
    padding: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .investment-main-top-section {
    padding: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .investment-main-top-section {
    margin-top: -1px;
    padding: var(--space-xl);
  }
}
.invesment-main-top-section-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-15xl);
  align-self: stretch;
}
@media (max-width: 1660px) {
  .invesment-main-top-section-container {
    justify-content: space-between;
  }
}
@media (max-width: 1000px) {
  .invesment-main-top-section-container {
    gap: var(--space-8xl);
  }
}
@media (max-width: 700px) {
  .invesment-main-top-section-container {
    flex-direction: column;
  }
}
.investment-main-top-section-image-container {
  width: 30%;
}
@media (max-width: 1660px) {
  .investment-main-top-section-image-container {
    justify-content: space-between;
    width: 40%;
  }
}
@media (max-width: 950px) {
  .investment-main-top-section-image-container {
    width: 50%;
  }
}
@media (max-width: 700px) {
  .investment-main-top-section-image-container {
    width: 100%;
  }
}
.investment-main-top-section-image-container > img {
  width: 100%;
}
@media (max-width: 700px) {
  .invesment-main-top-section-desktop-img {
    display: none;
  }
}
@media (min-width: 700px) {
  .invesment-main-top-section-responsive-img {
    display: none;
  }
}
.investment-main-top-section-text-container {
  display: flex;
  width: 30%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl);
}
@media (max-width: 1550px) {
  .investment-main-top-section-text-container {
    width: 30%;
  }
}
@media (max-width: 1070px) {
  .investment-main-top-section-text-container {
    width: 45%;
  }
}
@media (max-width: 950px) {
  .investment-main-top-section-text-container {
    width: 50%;
  }
}
@media (max-width: 700px) {
  .investment-main-top-section-text-container {
    width: 100%;
  }
}
.investment-main-middle-section {
  display: flex;
  padding: var(--space-6xl) var(--space-15xl) 0px var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5xl);
  align-self: stretch;
}
@media (max-width: 1255px) {
  .investment-main-middle-section {
    padding: var(--space-6xl) var(--space-8xl) 0px var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .investment-main-middle-section {
    padding: var(--space-6xl) var(--space-3xl) 0px var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .investment-main-middle-section {
    padding: var(--space-6xl) var(--space-xl) 0px var(--space-xl);
  }
}
.investment-main-bottom-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .investment-main-bottom-section {
    padding: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .investment-main-bottom-section {
    padding: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .investment-main-bottom-section {
    padding: var(--space-xl);
  }
}
.investment-main-bottom-section-card {
  display: flex;
  padding: var(--space-8xl) var(--space-6xl);
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-2xl);
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  border-radius: var(--space-2xl);
  background-image: linear-gradient(270deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/invesments-banner.jpg);
  background-size: cover;
  background-position: left;
}
@media (max-width: 800px) {
  .investment-main-bottom-section-card {
    padding-top: 270px;
    align-items: start;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/invesments-banner.jpg);
    background-position: center;
  }
}
.investment-main-bottom-section-card-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.investment-carousel-second-item {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/investment-corporate.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
.investment-main-carousel-third-item > .carousel-image-container {
  width: 266px;
}
.investment-carousel-fourth-item > .carousel-image-container {
  width: 100% !important;
}
.investment-carousel-fourth-item > .carousel-image-container > img {
  width: 100% !important;
}

.consolidated-data-container {
  display: flex;
  width: 100%;
  border: 1px solid var(--line-color);
  border-radius: 5px;
}
@media (max-width: 1680px) {
  .consolidated-data-container {
    border: 0;
    gap: 10px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-items: end;
    align-content: space-between;
  }
}
@media (max-width: 1679px) and (min-width: 1121px) {
  .consolidated-data-container {
    border: 0;
    gap: 10px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: end;
    align-content: space-between;
  }
}
@media print, (max-width: 1120px) and (min-width: 1px) {
  .consolidated-data-container {
    border: 0;
    gap: 10px;
    display: grid;
    grid-template-columns: auto auto;
    justify-items: end;
    align-content: space-between;
  }
}
.consolidated-data-item {
  position: relative;
  height: 120px;
  width: 100%;
  box-sizing: border-box;
}
@media print, (max-width: 1680px) {
  .consolidated-data-item {
    border: 1px solid var(--line-color);
    border-radius: 5px;
    flex-direction: column;
  }
}
.left-balance {
  border-right: 1px solid var(--line-color);
}
@media print, (max-width: 1680px) {
  .left-balance {
    border: 1px solid var(--line-color);
    border-radius: 5px;
  }
}
.right-balance {
  border-left: 1px solid var(--line-color);
}
@media print, (max-width: 1680px) {
  .right-balance {
    border: 1px solid var(--line-color);
    border-radius: 5px;
  }
}
.consolidated-content {
  position: absolute;
  top: 25%;
  left: 6%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content-loading {
  top: 22%;
}
.accounting-title-spacing {
  margin-bottom: 20px;
}
.section-container {
  margin-top: 52px;
  margin-bottom: 36px;
}
.accounting-history-header-cell,
.accounting-table-cell {
  padding-right: 15px;
  white-space: nowrap;
}
.consolidated-card-title,
.consolidated-card-subtitle,
.consolidated-card-amount {
  white-space: nowrap;
}
.accounting-history-header-cell:last-child,
.accounting-table-cell:last-child {
  padding-right: 0px;
}
.accounting-history-table-container {
  overflow: auto;
}
.accounting-history-table-wrapper {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}
@media print, (min-width: 700px) {
  .accounting-table {
    width: 100%;
  }
}
.accounting-table td {
  border-bottom: solid 1px var(--line-color);
}
.accounting-table-cell {
  height: 72px;
  color: var(--title-color);
  cursor: pointer;
}
.accounting-history-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.consolidated-card-title {
  font-size: 13px;
}
.consolidated-card-subtitle {
  font-size: 12px;
  color: var(--text-color);
}
.consolidated-card-amount {
  font-size: 16px;
}
#accounting-table-cell-current-position {
  text-align: end;
}
#voided-label {
  margin-top: 20px;
}
.accounting-history-organization-header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.accounting-history-organization-header-info-container {
  display: flex;
  flex-direction: column;
}
.accounting-history-organization-header-info-row {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.accounting-history-organization-header-info-inner-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}


.investment-cdi-modal-container {
  clear: both;
  padding-left: 20px;
  padding-right: 20px;
}
.investment-cdi-modal-button-container {
  display: flex;
  padding: 20px 0 20px 20px;
  justify-content: flex-end;
}
@media (max-width: 400px) {
  .investment-cdi-modal-button-container {
    flex-direction: column;
    gap: 8px;
  }
}
.investment-cdi-modal-amount-container {
  display: flex;
  align-items: last baseline;
  gap: 1rem;
}
.investment-cdi-modal-amount-input-container {
  display: block;
  align-items: start;
  width: 100%;
}
.investment-cdi-input-title {
  letter-spacing: 0px;
}
.toggle-container {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 200px;
}
.total-amount-cell {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
}
.investment-modal-balance {
  display: flex;
  align-items: center;
  gap: 20px;
}
#investment-cdi-modal-back-button {
  margin-top: 12px;
  text-align: left;
  padding: 0 0;
}
.investment-cdi-modal-card-img {
  width: 72px;
  height: 44px;
  margin-left: 20px;
}
.investment-cdi-modal-card-container {
  width: 100%;
  background-color: rgba(167,169,175,0.13);
  min-height: 79px;
  margin-top: 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: fit-content;
}
.investment-cdi-modal-card-text {
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.investment-redeem-modal-amount-input-container {
  display: block;
  align-items: start;
  width: 100%;
}
.investment-redeem-modal-container {
  clear: both;
  padding-left: 20px;
  padding-right: 20px;
}
.investment-redeem-modal-amount-container {
  display: flex;
  align-items: last baseline;
  gap: 1rem;
}
.investment-redeem-modal-amount-input-container {
  display: block;
  align-items: start;
  width: 100%;
}
.investment-redeem-modal-button-container {
  display: flex;
  padding: 20px 0 20px 20px;
  justify-content: flex-end;
}
.investment-redeem-input-title {
  letter-spacing: 0px;
}
#investment-redeem-modal-back-button {
  margin-top: 12px;
  text-align: left;
  padding: 0 0;
}

#investment-modal-cell-value {
  text-align: end;
  color: var(--title-color);
}
#investment-modal-cell-description {
  color: var(--text-color);
}
.investment-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}

.investment-value-redeem-modal-amount-input-container {
  display: block;
  align-items: start;
  width: 100%;
}
.investment-value-redeem-modal-container {
  clear: both;
  padding-left: 20px;
  padding-right: 20px;
}
.investment-value-redeem-modal-amount-container {
  display: flex;
  align-items: last baseline;
  gap: 1rem;
}
.investment-value-redeem-modal-amount-input-container {
  display: block;
  align-items: start;
  width: 100%;
}
.investment-value-redeem-modal-button-container {
  display: flex;
  padding: 20px 0 20px 20px;
  justify-content: flex-end;
}
.investment-value-redeem-input-title {
  letter-spacing: 0px;
}
#investment-value-redeem-modal-back-button {
  margin-top: 12px;
  text-align: left;
  padding: 0 0;
}
.investment-value-redeem-table {
  width: calc(100%);
  margin-top: -4px;
}

#investment-value-modal-cell-value {
  width: auto;
  margin-left: 30%;
}
#investment-value-modal-cell-description {
  color: var(--text-color);
}
.investment-value-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}

.investiment-empty-container {
  width: calc(100% - 40px);
  height: 500px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  flex-flow: column;
}
@media (max-width: 700px) {
  .investiment-empty-container {
    width: calc(100% - 15px);
    margin-top: 16px;
  }
}
.investiment-empty-container-items {
  justify-content: center;
  margin: auto;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 30px;
  margin: 18px;
}
#empty-icon svg path {
  width: 48px;
  height: 48px;
  fill: var(--action-or-selection-color);
}
.investiment-balance-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 40px;
  gap: 20px;
}
@media (max-width: 700px) {
  .investiment-balance-container {
    flex-direction: column;
  }
}
.investiment-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.investments-table td {
  border-bottom: solid 1px var(--line-color);
}
.investments-table-cell {
  height: 72px;
  color: var(--title-color);
  cursor: pointer;
  border-bottom: solid 1px var(--line-color);
}
#double-scroll-slave {
  overflow-x: scroll;
}
#investment-table-loading {
  width: 100%;
}

.investment-container {
  position: relative;
}
.investment-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.investment-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.investment-table-header {
  height: 44px;
}
.investment-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.investment-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.investment-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.investment-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.investment-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.element-hidden {
  display: none;
}
#investment-detail-cell-value {
  text-align: end;
  color: var(--title-color);
}
#investment-detail-cell-description {
  color: var(--text-color);
}

#export-loading-container {
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.export-footer-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.transaction-container {
  position: relative;
}
.transaction-table {
  width: 100%;
  margin-top: -4px;
  margin-bottom: 12px;
  table-layout: auto;
}
@media (max-width: 1000px) {
  .transaction-table {
    width: 100%;
  }
}
.transaction-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
.transaction-table td:last-child {
  padding-right: 0;
}
.transaction-table-header td {
  font-size: 14px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.transaction-table-header .shimmer {
  padding: 0px 40% 0px 0px;
}
.transaction-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.filter-container {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .filter-container {
    margin-bottom: 40px;
  }
}
@media (max-width: 700px) {
  #transaction-table-cell-balance,
  #transaction-table-header-balance {
    display: none;
  }
}
#transaction-table-header-description {
  width: 70%;
}
@media (max-width: 700px) {
  #transaction-table-header-description {
    width: 80%;
  }
}
@media (max-width: 700px) {
  .mobile-shimmer {
    display: none;
  }
}

.transaction-table-cell {
  height: 72px;
  color: var(--title-color);
  cursor: pointer;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.out-icon {
  color: #9090a1;
  position: relative;
  top: calc(50% - 9px);
  left: calc(50% - 0.3em);
}
.in-icon {
  color: var(--light-blue);
  position: relative;
  top: calc(50% - 9px);
  left: calc(50% - 0.3em);
}
.in-icon-container {
  background-color: #e0f2f1;
}
.out-icon-container {
  background-color: #efebe9;
}
.transaction-flow-icon-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.transaction-table-cell-container {
  display: grid;
  grid-auto-flow: column;
  justify-content: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) {
  #transaction-table-cell-fee {
    display: none;
  }
}
#transaction-table-icon-view {
  width: 16px;
  height: 16px;
}

#transaction-filter-modal-after-date > input,
#transaction-filter-modal-before-date > input {
  display: flex;
  height: 40px;
  padding: var(--space-s) var(--space-m);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  font-size: var(--text-s-regular-size);
  font-style: normal;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
  border-radius: var(--radius-m);
  cursor: text;
  background-color: var(--background-full-neutral-primary);
  border: 1px solid var(--border-primary-default);
  caret-color: var(--border-brand-default);
  box-sizing: border-box;
  color: var(--text-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Pretendard";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.transaction-filter-modal-info-icon > svg > path {
  fill: var(--action-or-selection-color);
}
#transaction-filter-modal-tags-input > .tag {
  margin-top: 0px;
  margin-bottom: 0px;
}
#transaction-filter-modal-tags-input {
  height: fit-content;
  display: flex;
  overflow-x: auto;
  flex-wrap: wrap;
  min-height: 40px;
}
#transaction-filter-modal-tags-input > input {
  height: 24px;
}
@media (max-width: 700px) {
  .transaction-filter-modal-footer-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
  }
}
@media (max-width: 700px) {
  .transaction-filter-modal-footer-button {
    box-sizing: border-box;
    width: 100%;
  }
}
.transaction-filter-modal-footer-button-ghost {
  padding-left: 0px;
}
@media (max-width: 700px) {
  .transaction-filter-modal-footer-button-ghost {
    padding-left: var(--space-xl);
  }
}


.customer-detail-container {
  border: solid 1px var(--border-color);
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  cursor: initial;
  display: none;
  margin-bottom: 12px;
}
.customer-detail-name-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.customer-detail-title {
  font-size: 16px;
  color: var(--title-color);
}
.customer-detail-item {
  font-size: 0.75rem;
  color: var(--text-color);
  text-align: justify;
  overflow-wrap: break-word;
}
.customer-detail-item:not(:last-child) {
  padding-bottom: 5px;
}
.u-margin-bottom-small {
  margin-bottom: 1rem !important;
}
.sidebar-secondary-action button svg {
  width: 20px;
  height: 20px;
}

.share-slip-modal {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.message {
  display: flex;
}
.wrapper {
  font-size: 0.875rem;
}
.action {
  align-self: flex-end;
}
.action a {
  color: var(--action-or-selection-color);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.875rem;
}
.shared-link {
  color: var(--text-color);
  font-size: 13px;
  padding-top: 10px;
  word-break: break-all;
}
.contacts-container {
  border-bottom: 1px solid var(--line-color);
}
.contacts-form {
  padding: 20px;
  padding-bottom: 0px;
}
.send-button-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}
.send-icon svg {
  margin-right: 8px;
}
.email-tags-container {
  padding-inline-start: 20px;
  margin-block-start: 4px;
}
.email-tag {
  list-style: none;
  background-color: var(--menu-background-color);
  color: var(--text-color);
  width: fit-content;
  margin-bottom: 4px;
  padding: 4px 8px 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  white-space: nowrap;
}
.email-tag-remove {
  cursor: pointer;
  margin-left: 10px;
}
.request-link-container {
  color: var(--action-or-selection-color);
  cursor: pointer;
  margin-top: 12px;
}
.send {
  width: fit-content;
}
#send-link-icon,
#create-link-icon {
  margin-right: 12px;
}

.member-image {
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  width: 96px;
  height: 96px;
  margin-bottom: 12px;
}
.image-container {
  display: flex;
  justify-content: center;
}
#input-label:hover {
  color: var(--action-or-selection-color);
  cursor: pointer;
}
.dropdown-user-content-edit-profile-link {
  color: var(--text-color);
}

.permission-options {
  padding-right: 40px;
  text-align: right;
  cursor: pointer;
  transition: all 0.4s ease-in;
  color: var(--text-color);
}
.project-menu-options {
  width: 20px;
  height: 20px;
  margin: auto 0px auto auto;
  position: relative;
}
.permission-options:hover {
  color: var(--action-or-selection-color);
}
.project-table-cell {
  height: 64px;
}
.allowedIps {
  position: relative;
  display: inline-block;
}
.allowedIps-content {
  display: none;
  position: absolute;
  color: var(--text-color);
  background-color: var(--view-background-color);
  min-width: fit-content;
  min-height: 1px;
  max-height: 160px;
  overflow: overlay;
  padding: 4px 16px;
  z-index: 10;
  border: 1px solid var(--line-color);
  border-radius: 4px;
}
.allowedIps-content::-webkit-scrollbar {
  display: none;
}
@media (max-width: 700px) {
  .project-options-content-container {
    right: 40px !important;
  }
}
@media (max-width: 430px) {
  .project-options-content-container {
    right: 40px !important;
  }
}
.options-content {
  display: none;
  position: absolute;
  color: var(--text-color);
  background-color: var(--view-background-color);
  border: 1px solid var(--line-color);
  padding: 4px 16px;
  border-radius: 4px;
  width: 80px;
  right: 40px;
  z-index: 1;
}
@media (max-width: 700px) {
  .options-content {
    right: 0px;
  }
}
@media (max-width: 430px) {
  .options-content {
    right: -16px;
  }
}
.options-content div {
  text-align: left;
  padding-top: 8px;
  padding-bottom: 8px;
}
.options-content div:hover {
  color: var(--action-or-selection-color);
}
.enable:hover .allowedIps-content {
  display: block;
}
.name {
  width: 180px;
}
.project-id {
  width: 280px;
}

.new-project-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px 24px 24px;
}
.new-project-footer-container {
  padding: 14px 24px 24px 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 16px;
}
.new-project-container > .new-project-container-form > .input {
  margin-top: 8px;
  margin-bottom: 0px;
}
.new-project-container-form > .tags-container,
.new-project-container-form > .tags-container > .email-tags-container {
  margin-bottom: 0px;
  padding-left: 0px;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  height: fit-content;
  flex-wrap: wrap;
}
.new-project-upload-logo {
  background-color: var(--line-color);
  border-radius: 4px;
  padding: 8px;
}
.new-project-upload-container {
  padding: 16px;
  border: 1px solid var(--border-color);
  height: 32px;
  border-radius: 4px;
  display: flex;
  cursor: pointer;
  gap: 8px;
}
.new-project-upload-labels {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
#clipImage > path,
#helpImage > path {
  fill: var(--action-or-selection-color);
}
#new-project-help-button {
  font-family: 'Pretendard-Demibold';
  font-size: 16px;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
#project-explain-label {
  line-height: 24px;
  font-size: 14px;
  font-family: 'Pretendard-Thin';
}
.new-project-continue-button {
  width: 180px;
  font-family: 'Pretendard-Demibold';
  font-size: 16px;
}
.new-project-help-button {
  width: 180px;
  justify-content: center;
}
.new-project-verify-label {
  font-size: 16px;
  font-family: 'Pretendard-Demibold';
  line-height: 20px;
}
.new-project-verify-value {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 14px;
  font-family: 'Pretendard-Regular';
  line-height: 18px;
}
.new-project-edit-key {
  font-size: 16px;
  font-family: 'Pretendard-Demibold';
  line-height: 20px;
  color: var(--action-or-selection-color);
  width: 100%;
  text-align: center;
  padding-bottom: 4px;
  cursor: pointer;
}
.new-project-edit-key:active {
  opacity: 0.5;
}
.new-project-verify-container {
  padding: 24px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  background: var(--menu-background-color);
  border-radius: 8px;
}
.new-project-verify-info-container {
  width: calc(50% - 25px);
  background: var(--menu-background-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
}
@media (max-width: 600px) {
  .new-project-verify-info-container {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .new-project-verify-info-container {
    width: 100%;
  }
}
.vertical-separator {
  width: 1px;
  background: var(--text-text-primary);
  margin: 0px 24px;
}
@media (max-width: 600px) {
  .vertical-separator {
    width: 0px;
  }
}
#new-project-challenge-view-container {
  width: calc(50% - 25px);
}
@media (max-width: 600px) {
  #new-project-challenge-view-container {
    width: 100%;
  }
}
.new-project-second-container {
  display: flex;
  flex-direction: row;
  padding: 40px 32px;
}
@media (max-width: 600px) {
  .new-project-second-container {
    flex-direction: column;
    gap: 32px;
  }
}
.new-project-verify-title {
  font-size: 20px;
  font-family: 'Pretendard-Demibold';
  line-height: 24px;
}
.new-project-text-label {
  font-size: 12px;
  line-height: 18px;
  font-family: 'Pretendard-Regular';
}
.new-project-text-input {
  font-family: 'Pretendard-Regular';
  font-size: 16px;
  line-height: 20px;
}
.new-project-upload-file-type {
  font-family: 'Pretendard-Thin';
  font-size: 10px;
  line-height: 12px;
}
.help-link {
  font-family: "Pretendard-Hair";
  cursor: pointer;
  color: var(--action-or-selection-color);
}

.subscription-cell {
  white-space: nowrap;
}
.webhook-cell {
  padding-right: 10px;
}
.webhook-cell:last-child {
  padding-right: 0;
}
.webhook-cell-options {
  position: relative;
}
@media (max-width: 765px) {
  #webhook-header-identifier-label,
  #webhook-header-subscriptions-label {
    width: 130px;
  }
}
@media (max-width: 765px) {
  #webhook-header-url-label {
    width: 320px;
  }
}
#subscription-textfield > .request-search-textfield-result-container {
  min-height: 44px;
  height: fit-content !important;
  max-height: fit-content;
}

#update-webhook-subscription-text-field > .request-search-textfield-result-container {
  min-height: 44px;
  height: fit-content !important;
  max-height: fit-content;
}

.integration-main-top-section {
  display: flex;
  justify-content: center;
  padding: var(--space-6xl) var(--space-15xl) 0px var(--space-15xl);
  align-items: flex-start;
  gap: var(--space-3xl);
  align-self: stretch;
}
@media (max-width: 1255px) {
  .integration-main-top-section {
    padding: var(--space-6xl) var(--space-8xl) 0px var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .integration-main-top-section {
    padding: var(--space-6xl) var(--space-3xl) 0px var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .integration-main-top-section {
    padding: 32px var(--space-xl) 40px var(--space-xl);
  }
}
.integration-main-top-section > .carousel {
  width: fit-content;
}
.integration-main-top-section-card {
  display: flex;
  width: calc(100% / 3);
  padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) var(--space-2xl);
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  border-radius: var(--radius-l);
  background: var(--background-full-neutral-secondary);
  scroll-behavior: smooth;
  scroll-snap-align: start;
}
@media (max-width: 1300px) {
  .integration-main-top-section-card {
    min-width: 270px;
  }
}
@media (max-width: 430px) {
  .integration-main-top-section-card {
    min-width: 168px;
  }
}
.integration-content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  align-self: stretch;
}
.integration-content-container > svg > path,
.integration-content-container > svg > g > path,
.integration-content-container > svg > defs > clipPath > rect {
  fill: var(--text-text-title);
}
.integration-main-bottom-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .integration-main-bottom-section {
    padding: var(--space-15xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .integration-main-bottom-section {
    padding: var(--space-15xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .integration-main-bottom-section {
    padding: 32px 24px 40px 24px;
  }
}
.integration-main-bottom-section-card {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl);
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  border-radius: var(--space-2xl);
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/integration-banner.jpg);
  background-size: cover;
  background-position: center;
}
@media (max-width: 800px) {
  .integration-main-bottom-section-card {
    padding: var(--space-2xl);
    padding-top: 220px;
    align-items: center;
    background-position: center;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/integration-banner.jpg);
  }
}
.integration-main-bottom-section-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.deposit-modal-tab {
  padding: 10px 24px;
}
.deposit-modal-tab-content {
  padding: 40px 24px;
}
.deposit-modal-pix-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}
@media (max-width: 600px) {
  .deposit-modal-pix-container {
    flex-direction: column;
  }
}
.deposit-modal-pix-info-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.deposit-modal-pix-info-title {
  font-size: 26px;
  font-family: 'Pretendard-Demibold';
  line-height: 32px;
  margin-bottom: 8px;
}
.deposit-modal-info-container {
  display: flex;
  flex-direction: column;
}
.deposit-modal-info-label {
  font-family: 'Pretendard-Regular';
  font-size: 12px;
  line-height: 16px;
}
.deposit-modal-info-value {
  font-family: 'Pretendard-Thin';
  font-size: 16px;
  line-height: 20px;
}
.deposit-modal-info-value-loading {
  font-family: 'Pretendard-Thin';
  font-size: 16px;
  line-height: 20px;
}
.deposit-modal-multi-info-container {
  display: flex;
  flex-direction: row;
}
.deposit-modal-pix-image-loading,
.deposit-modal-pix-image {
  width: 240px;
  height: 240px;
}
.deposit-modal-pix-image-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.deposit-modal-copy-qr-button {
  width: 206px;
  font-size: 16px;
  font-family: 'Pretendard-Demibold';
}
.deposit-modal-info-copy-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.deposit-modal-info-copy-button {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.deposit-modal-info-copy-button:active {
  opacity: 0.5;
}
.deposit-modal-tab > .tabs > .tab > .tab-image-container > svg > path,
.deposit-modal-tab > .tabs > .tab > .tab-image-container > svg > g > path {
  fill: var(--title-color);
}
.deposit-modal-tab > .tabs > .tab-active > .tab-image-container > svg > path,
.deposit-modal-tab > .tabs > .tab-active > .tab-image-container > svg > g > path,
.deposit-modal-info-copy-button > svg > g > path {
  fill: var(--action-or-selection-color);
}
.deposit-modal-tab > .tabs > .tab {
  width: 65px;
}
.deposit-modal-container > .deposit-modal-tab > .tabs > .tab > .tab-image-container {
  font-family: 'Pretendard-Demibold';
  font-size: 16px;
  line-height: 20px;
}

.header-balance-title {
  font-size: 16px;
  color: var(--text-color);
  text-align: end;
  line-height: 24px;
}
@media (max-width: 600px) {
  .header-balance-title {
    text-align: start;
  }
}
.header-balance-value {
  font-size: 32px;
  color: var(--title-color);
  margin-top: 7px;
}
.header-balance-loading {
  position: absolute;
  margin-top: 0px;
  width: 200px;
  z-index: 10;
}
.header-balance-title-loading {
  position: absolute;
  right: 0px;
  margin-bottom: 2px;
  width: 50px;
  height: 12px;
  z-index: 10;
}
.header-balance-value-loading {
  width: 200px;
  height: 40px;
  font-weight: 600;
  line-height: 48px;
  position: absolute;
  margin-top: 16px;
  right: 0px;
}
.header-balance-container {
  display: flex;
  flex-direction: column;
  align-items: end;
}
#header-balance-visibility-button > svg > g > path,
#header-balance-visibility-button > svg > defs > clipPath > rect {
  fill: var(--text-text-primary);
}

.header-str-balance-card-container {
  display: flex;
  padding: 0px var(--space-15xl) 40px var(--space-15xl);
  align-items: center;
  gap: var(--space-5xl);
  position: relative;
  z-index: 3;
}
@media (max-width: 1255px) {
  .header-str-balance-card-container {
    padding: 0px var(--space-8xl) 40px var(--space-8xl);
  }
}
@media (max-width: 735px) {
  .header-str-balance-card-container {
    flex-direction: column;
    padding: 0px var(--space-xl) 40px var(--space-xl);
    gap: var(--space-l);
  }
}

.cost-center-title-container {
  max-width: 50%;
}
@media (max-width: 1000px) {
  .cost-center-title-container {
    max-width: 100%;
  }
}
.payment-list-container {
  position: relative;
  background-color: var(--menu-background-color);
}
.cost-center-list-container {
  top: 0;
  position: sticky;
  position: -webkit-sticky;
  border-radius: 0 8px 8px 0;
  background-color: var(--view-background-color);
  padding-right: var(--space-xl);
  padding-left: var(--space-15xl);
}
@media (max-width: 1255px) {
  .cost-center-list-container {
    padding-left: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .cost-center-list-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 765px) {
  .cost-center-list-container {
    position: static;
    right: auto;
    width: calc(100% - 80px);
  }
}
.cost-center-list-title-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 32px;
  width: 268px;
}
@media (max-width: 765px) {
  .cost-center-list-title-container {
    width: 100%;
  }
}
.cost-center-list-view-container {
  width: calc(100% - 590px);
  background-color: var(--view-background-color);
  padding-left: var(--space-3xl);
  padding-right: var(--space-15xl);
  padding-top: 48px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
  flex-shrink: 0;
  border-radius: 8px 0px 0px 8px;
}
@media (max-width: 1255px) {
  .cost-center-list-view-container {
    width: calc(100% - 505px);
    padding-right: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .cost-center-list-view-container {
    width: calc(100% - 425px);
    padding-right: var(--space-3xl);
  }
}
@media (max-width: 765px) {
  .cost-center-list-view-container {
    display: none;
  }
}
.payment-list-card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.payment-list-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.cost-center-view-active {
  background-color: var(--menu-background-color);
}
.cost-center-view-active > div {
  color: var(--action-or-selection-color);
}
.cost-center-view-active div:first {
  color: var(--action-or-selection-color) !important;
}
.cost-center-header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: var(--heading-s-line-height);
}
.cost-center-selection-footer-container {
  position: fixed;
  bottom: 41px;
  width: 65%;
  left: 28%;
  border-radius: 8px;
  border: 1px solid var(--line-color);
  background-color: var(--view-background-color);
  box-shadow: 0px 39px 11px 0px rgba(0,0,0,0), 0px 25px 10px 0px rgba(0,0,0,0.01), 0px 14px 8px 0px rgba(0,0,0,0.03), 0px 6px 6px 0px rgba(0,0,0,0.04), 0px 2px 3px 0px rgba(0,0,0,0.05);
  z-index: 22;
}
@media (max-width: 430px) {
  .cost-center-selection-footer-container {
    bottom: 0px;
    width: 100%;
    left: 0%;
    border-radius: 0px;
  }
}
.cost-center-selection-footer {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media (max-width: 430px) {
  .cost-center-selection-footer {
    background-color: var(--background-full-neutral-secondary);
    padding: 16px 24px 24px 24px;
  }
}
.cost-center-selection-footer-view {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}
@media (max-width: 430px) {
  .cost-center-selection-footer-view {
    flex-direction: column;
    align-items: start;
  }
}
.cost-center-selection-footer-subtitle {
  font-weight: 200;
  font-size: 12px;
  line-height: 16px;
}
@media (max-width: 430px) {
  .cost-center-selection-footer-subtitle {
    font-family: 'Pretendard-Thin';
    font-size: var(--text-xs-thin-size);
    line-height: var(--text-xs-thin-line-height);
  }
}
.cost-center-selection-footer-receipt-button {
  display: flex;
  height: 16px;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
@media (max-width: 430px) {
  .cost-center-selection-footer-receipt-button {
    height: 20px;
  }
}
.cost-center-selection-footer-button {
  display: flex;
  height: 16px;
  padding: 6px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
@media (max-width: 430px) {
  .cost-center-selection-footer-button {
    height: 20px;
    width: 50%;
  }
}
.cost-center-selection-batch-alert {
  align-items: center;
  background-color: var(--menu-background-color);
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(255,255,255,0.702);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 0px;
  z-index: 10;
  width: 100%;
  transition: height 0.1s linear;
  overflow: hidden;
}
@media (max-width: 430px) {
  .cost-center-selection-batch-alert {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
  }
}
#cost-center-list-view {
  gap: 8px;
  display: flex;
  align-self: stretch;
  padding-top: 16px;
  align-items: flex-start;
  flex-direction: column;
}
.cost-center-add-icon {
  width: 28px;
  height: 28px;
  border-radius: 28px;
  background-color: var(--action-or-selection-color);
  align-items: center;
  justify-content: center;
  display: flex;
  cursor: pointer;
}
.cost-center-add-icon:hover {
  background: var(--background-brand-light);
}
.cost-center-add-icon:active {
  background: var(--background-brand-medium);
}
.cost-center-add-icon > svg > g > path {
  fill: var(--text-inverse-title);
}
.cost-center-list-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.cost-center-container-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 8px;
  gap: 8px;
}
@media (max-width: 430px) {
  .cost-center-container-wrapper {
    gap: 0px;
  }
}
.cost-center-list-loading-wrapper {
  display: flex;
  gap: 8px;
  flex-direction: column;
  padding-top: 16px;
  align-items: flex-start;
  align-self: stretch;
}
.cost-center-item-loading-container {
  display: flex;
  height: 56px;
  padding: 8px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 12px;
  cursor: pointer;
}
.cost-center-item-loading {
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  height: 24px;
  width: 180px;
}
.cost-center-information-header,
.cost-center-information-header-titles-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cost-center-information-header {
  gap: 24px;
  align-self: stretch;
}
.cost-center-information-header-titles-wrapper {
  gap: 8px;
  align-self: stretch;
}
.cost-center-empty-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: 0px;
}
.cost-center-empty-subtitle {
  font-size: 20px;
  font-weight: 200;
  line-height: 28px;
  font-family: 'Pretendard-Thin';
}
.cost-center-header-subtitle {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  min-height: 20px;
}
.cost-center-payment-information-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.cost-center-payment-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0px;
}
.cost-center-payment-options-wrapper {
  display: flex;
  flex-direction: row;
  gap: 56px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.payment-list-card-icon {
  width: 24px;
  height: 24px;
}
.payment-list-card-icon > svg > *,
.payment-list-card-icon > svg > g > path,
.payment-list-card-icon > svg > defs > clipPath > rect,
.payment-list-card-icon > svg > g > g > path {
  fill: var(--text-text-primary);
}
.cost-center-information-guide-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.cost-center-information-guide-title {
  align-self: stretch;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.cost-center-information-guide-cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}
.cost-center-information-guide-card {
  display: flex;
  padding: var(--space-2xl);
  flex-direction: row;
  align-items: center;
  gap: var(--space-l);
  align-self: stretch;
  justify-content: space-between;
  border-radius: var(--space-l);
  background: var(--background-full-neutral-secondary);
}
@media (max-width: 1000px) {
  .cost-center-information-guide-card {
    flex-direction: column;
  }
}
.cost-center-information-guide-card-text-container {
  display: flex;
  width: 388px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
@media (max-width: 1000px) {
  .cost-center-information-guide-card-text-container {
    width: 100%;
  }
}
.cost-center-card-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.cost-center-card-description {
  font-size: 16px;
  font-weight: 200;
  line-height: 24px;
}
.cost-center-card-image {
  width: 300px;
}
.cost-center-detail-container {
  background-color: var(--view-background-color);
  border-radius: 8px 0px 0px 8px;
  width: calc(100% - 425px);
  height: 100vh;
}
@media (max-width: 1255px) {
  .cost-center-detail-container {
    width: calc(100% - 380px);
  }
}
@media (max-width: 870px) {
  .cost-center-detail-container {
    width: calc(100% - 355px);
  }
}
@media (max-width: 765px) {
  .cost-center-detail-container {
    width: 100%;
  }
}
#cost-center-list-view-container {
  width: 265px;
  height: calc(100vh - 115px);
  overflow: hidden;
}
@media (max-width: 765px) {
  #cost-center-list-view-container {
    height: auto;
    width: 100%;
  }
}
#cost-center-list-view-container:hover {
  overflow: auto;
}
.cost-center-list-item-container {
  display: flex;
  height: 56px;
  padding: 8px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 12px;
  cursor: pointer;
}
.cost-center-list-item-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cost-center-list-item-badge > div {
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 2px;
}
.cost-center-list-item-badge {
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #ffa726;
  border-radius: 100px;
}
.cost-center-footer-value-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}
@media (max-width: 430px) {
  .cost-center-footer-value-container {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.cost-center-footer-request-container {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
@media (max-width: 430px) {
  .cost-center-footer-request-container {
    gap: 8px;
  }
}
.cost-center-selection-footer-total-label {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
}
@media (max-width: 430px) {
  .cost-center-selection-footer-total-label {
    font-family: 'Pretendard-Demibold';
    font-size: var(--text-s-demibold-size);
    line-height: var(--text-s-demibold-line-height);
  }
}
.cost-center-footer-button-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}
@media (max-width: 430px) {
  .cost-center-footer-button-container {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
  }
}
.cost-center-deny-button {
  color: #ef5350;
  border: 1px solid #ef5350;
}
.cost-center-footer-batch-alert-container {
  width: 100%;
  margin-bottom: 8px;
  border-radius: 8px;
}
@media (max-width: 430px) {
  .cost-center-footer-batch-alert-container {
    margin-bottom: 24px;
    margin-top: 4px;
  }
}
.cost-center-selection-footer-maximize-button {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
@media (max-width: 765px) {
  .cost-center-mobile-hidden {
    display: none !important;
  }
}
.cost-center-mobile-selected {
  width: 100%;
}
.cost-center-mobile-show {
  display: none;
}
@media (max-width: 765px) {
  .cost-center-mobile-show {
    display: block;
  }
}
.cost-center-mobile-show-table {
  display: none;
}
@media (max-width: 765px) {
  .cost-center-mobile-show-table {
    display: table;
  }
}
.cost-center-approve-footer-mobile {
  display: flex;
  padding: 8px 24px 24px 24px;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  align-self: stretch;
}
.cost-center-approve-footer-mobile-container {
  z-index: 100;
  bottom: 0px;
  width: 100%;
  left: 0%;
  border-radius: 16px 16px 0px 0px;
  position: fixed;
  background-color: var(--menu-background-color);
}
.cost-center-approve-mobile-close-button {
  display: flex;
  padding: var(--space-s);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
}
.cost-center-approve-mobile-close-button > svg > g > path {
  fill: var(--action-or-selection-color);
}
.cost-center-approve-footer-view {
  display: flex;
  gap: 24px;
  align-self: stretch;
  flex-direction: column;
}
.cost-center-approve-footer-view-title {
  text-align: center;
  font-size: var(--heading-s-size);
  font-weight: 600;
  line-height: var(--heading-s-line-height);
  color: var(--title-color);
}
.cost-center-approve-footer-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.cost-center-approve-separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
}
.cost-center-approve-footer-subtitle {
  font-weight: 200;
  font-size: 16px;
  line-height: 20px;
  font-family: 'Pretendard-Thin';
}
.cost-center-approve-footer-title {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}
@media (max-width: 430px) {
  .mobile-full-width {
    width: 100%;
  }
}
.mobile-select-all-button-container {
  display: flex;
  width: -moz-available;
  width: -webkit-fill-available;
  padding: 8px 24px;
  padding-right: 0px;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}

.payment-list-sidebar-icon > svg > path,
.payment-list-sidebar-icon > svg > g > path {
  fill: var(--action-or-selection-color);
}
.payment-list-sidebar-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--space-xl);
}

.notification-container {
  width: 100%;
  height: 0px;
  left: 0;
  top: 0;
  text-align: center;
  position: fixed;
  z-index: 1001;
}
.notification-success {
  background-color: var(--success-background-color);
  border: 1px solid var(--success-border-color);
  color: var(--success-text-color);
}
.notification-failed {
  background-color: var(--fail-background-color);
  border: 1px solid var(--fail-border-color);
  color: var(--fail-text-color);
}
.notification {
  border-radius: 3px;
  margin: 9px;
  padding: 8px 18px;
  font-size: 14px;
  display: inline-block;
}
@media (max-width: 700px) {
  .notification {
    margin-top: 60px;
  }
}

.workspace-bar-container {
  position: relative;
  margin: 0 20px;
  border-top: 1px solid var(--line-color);
}
.workspace-bar-view {
  position: absolute;
  width: 100%;
}
.workspace-bar-name {
  margin-top: 21px;
  width: 100%;
  font-size: 14px;
  color: var(--title-color);
}
.workspace-bar-username {
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
  color: var(--text-color);
}
.workspace-loading {
  position: absolute;
  margin-top: 0px;
  width: 200px;
  height: 200px;
  z-index: 10;
}
.workspace-bar-name-loading {
  margin-top: 22px;
  width: 160px;
  height: 16px;
  display: block;
}
.workspace-bar-username-loading {
  margin-top: 9px;
  width: 120px;
  height: 11px;
  display: block;
}
.workspace-icon {
  float: right;
  margin-top: 30px;
}
.up {
  animation: upAnim 420ms forwards;
}
.down {
  animation: downAnim 420ms forwards;
}
.workspace-dropdown-background {
  display: none;
  position: fixed;
  z-index: 15;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: transparent;
  cursor: default;
}
.workspace-dropdown {
  display: none;
  position: absolute;
  bottom: 79px;
  left: 18px;
  z-index: 15;
  width: 300px;
  background: var(--view-background-color);
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.1);
  -webkit-transition: opacity 300ms ease-in;
  -o-transition: opacity 300ms ease-in;
  transition: opacity 300ms ease-in;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: fit-content;
  max-height: 224px;
  overflow-y: overlay;
  overflow-x: hidden;
}
.workspace-dropdown a {
  text-decoration: none;
  cursor: pointer;
}
.workspace-dropdown-item,
.workspace-dropdown-add-button {
  display: block;
  padding: 0 20px;
  height: 56px;
  line-height: 26px;
  font-size: 0.875rem;
  color: var(--action-or-selection-color);
  border-bottom: 0.5px solid var(--line-color);
  cursor: pointer;
}
.workspace-dropdown-item:hover,
.workspace-dropdown-add-button:hover {
  background-color: var(--menu-background-color);
}
.workspace-dropdown-item {
  display: table;
  width: 100%;
}
.workspace-dropdown-add-button {
  line-height: 56px;
  color: var(--title-color) !important;
}
.workspace-name {
  width: 100%;
  font-size: 14px;
  color: var(--title-color);
  margin-top: 6px;
}
.workspace-username {
  width: 100%;
  font-size: 12px;
  color: var(--text-color);
  margin-bottom: 6px;
}
@-moz-keyframes upAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}
@-webkit-keyframes upAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}
@-o-keyframes upAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}
@keyframes upAnim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}
@-moz-keyframes downAnim {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes downAnim {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@-o-keyframes downAnim {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes downAnim {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.create-boleto-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.create-boleto-item> .form > label,
.create-boleto-item> #address-container> .form > label,
.create-invoice-item> .form > label,
.create-invoice-item> #due-container>.form > label,
.create-invoice-item> #instant-container>.form > label {
  display: block;
  text-align: left;
  font-size: 12px;
  color: var(--text-color);
}
.create-boleto-item>.form>.input {
  padding: 0 10px;
}
#boleto-description {
  resize: none;
  overflow: hidden;
  padding: 10px;
  min-height: 44px;
}

.customer-link-right-container {
  margin: auto;
  display: grid;
  grid-row-gap: 12px;
}
.application-item-form > .status-badge {
  height: fit-content;
  margin-top: 12px;
  min-width: 100px;
  margin-right: 12px;
  width: fit-content;
}
.customer-link-logo {
  margin-top: 20px;
  margin-left: 80px;
  width: 160px;
  height: 32px;
  display: none;
}
@media (max-width: 1024px) {
  .customer-link-logo {
    margin-left: 40px;
  }
}
@media (max-width: 700px) {
  .customer-link-logo {
    margin-top: 44px;
    margin-left: 24px;
  }
}
.right-container {
  background-color: var(--menu-background-color);
  overflow: auto;
}
@media (max-width: 700px) {
  .right-container {
    margin-top: 48px;
    background-color: var(--background-color);
    overflow: visible;
  }
}
#invoice-request-status-shimmer {
  margin-top: 8px;
}
#receiver-name-shimmer {
  margin-top: 20px;
  width: 40%;
}
#receiver-taxid-shimmer {
  margin-top: 16px;
  width: 55%;
}
#invoice-fee-shimmer {
  margin-top: 16px;
  width: 60%;
}
#invoice-limit-shimmer {
  margin-top: 16px;
  width: 36%;
}
#invoice-due-shimmer {
  margin-top: 16px;
}
.label {
  width: 220px;
  height: 32px;
  margin-top: 4px;
  display: none;
}
.label-small {
  width: 220px;
  height: 17px;
  margin-top: 8px;
  display: none;
}
.status-shimmer {
  width: 116px;
  height: 32px;
  border-radius: 10px;
  margin-top: 12px;
}
.copy-button {
  margin-left: 4px;
  color: var(--action-or-selection-color);
  cursor: pointer;
}
#invoice-description {
  max-height: 200px;
  overflow: auto;
}

.header-logo {
  width: 160px;
  height: 32px;
  margin-top: 24px;
  margin-left: 24px;
  display: none;
}
.customer-name-title,
.customer-description-title,
.table-view,
.table-view-loading,
#title-shimmer,
#description-shimmer,
.boleto {
  margin-top: 12px;
  margin-left: 24px;
  margin-right: 24px;
}
.background {
  background-color: var(--view-background-color);
  margin-left: auto;
  margin-right: auto;
}
.table-view-loading,
.boleto-table {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 48px;
}
.boleto-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
}
.customer-name-title {
  display: none;
  width: fit-content;
  height: 48px;
}
#title-shimmer {
  width: 244px;
  height: 48px;
}
#description-shimmer {
  width: 496px;
  height: 33px;
}
#logo-shimmer {
  margin-top: 24px;
  margin-left: 24px;
  width: 160px;
  height: 32px;
}
.table-view-detail {
  margin-top: 184px;
  margin-left: 24px;
  margin-right: 24px;
}
.barcode-detail {
  margin-left: 60px;
  margin-right: 24px;
}
@media (max-width: 700px) {
  .barcode-detail {
    margin-left: 24px;
  }
}
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}
.options-container {
  display: flex !important;
  float: right;
}
.options-container :last-child {
  margin-left: 12px;
}
.options-container>.button {
  width: 120px;
}
@-moz-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.reset-password {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--menu-background-color);
}
.create-member {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--menu-background-color);
}
@media (max-width: 1080px) {
  .create-member {
    padding: 50px 0;
    width: auto;
  }
}

.reset-password {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--menu-background-color);
}
@media (max-width: 1080px) {
  .reset-password {
    padding-top: 100px;
  }
}
.host-name {
  font-family: "Pretendard-Demibold";
}
@media (max-width: 1080px) {
  .host-name {
    text-align: start;
  }
}
.reset-password-container {
  top: 0;
  left: 0;
  right: 0;
  height: fit-content;
  border: 1px solid var(--line-color);
  bottom: 0;
  margin: auto;
  display: flex;
  padding: 40px;
  position: absolute;
  width: 50%;
  border-radius: 10px;
  background-color: var(--view-background-color);
}
@media (max-width: 1550px) {
  .reset-password-container {
    width: 70%;
  }
}
@media (max-width: 1080px) {
  .reset-password-container {
    flex-direction: column-reverse;
    width: 50%;
    position: static;
  }
}
@media (max-width: 650px) {
  .reset-password-container {
    width: 70%;
  }
}
.reset-password-vefication-container {
  gap: 2rem;
  width: 50%;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1080px) {
  .reset-password-vefication-container {
    align-items: start;
    width: 100%;
    padding: 0;
  }
}
.reset-password-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.barcode {
  margin-top: 24px;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1.5s;
}
@-moz-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.workspace-result-container {
  width: calc(100% - 160px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .workspace-result-container {
    width: calc(100% - 80px);
  }
}
@media (max-width: 700px) {
  .workspace-result-container {
    width: calc(100% - 40px);
  }
}
.workspace-result-title-container {
  margin-top: 80px;
  margin-left: 80px;
  width: calc(100% - 160px);
}
@media (max-width: 1024px) {
  .workspace-result-title-container {
    margin-left: 40px;
    width: calc(100% - 80px);
  }
}
@media (max-width: 700px) {
  .workspace-result-title-container {
    margin-left: 24px;
  }
}
.workspace-logo {
  height: 32px;
  width: 160px;
  margin-left: 12px;
  background: var(--line-color);
}
.workspace-table-cell {
  height: 72px;
  color: var(--title-color);
  vertical-align: middle;
}
.workspace-table {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 48px;
}
.workspace-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
}
.workspace-cell-container {
  margin-left: 20px;
  margin-right: 20px;
}
.workspace-cell-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.button-shimmer {
  width: 90px;
  height: 46px;
}
.text-shimmer {
  width: 126px;
  height: 14px;
  margin-bottom: 4px;
}
#action-button {
  min-width: 152px;
}
.workspaces-logo-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.workspaces-logo {
  margin: 20px auto;
  width: 230px;
}

.find-workspace {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--menu-background-color);
}
@media (max-width: 1080px) {
  .find-workspace {
    padding-top: 100px;
  }
}
.find-workspace-container {
  top: 0;
  left: 0;
  right: 0;
  height: fit-content;
  border: 1px solid var(--line-color);
  bottom: 0;
  margin: auto;
  display: flex;
  padding: 40px;
  position: absolute;
  width: 50%;
  border-radius: 10px;
  background-color: var(--view-background-color);
}
@media (max-width: 1550px) {
  .find-workspace-container {
    width: 70%;
  }
}
@media (max-width: 1080px) {
  .find-workspace-container {
    flex-direction: column-reverse;
    width: 50%;
    position: static;
  }
}
@media (max-width: 650px) {
  .find-workspace-container {
    width: 70%;
  }
}
.find-workspace-description-container {
  gap: 2rem;
  width: 50%;
  padding: 40px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1080px) {
  .find-workspace-description-container {
    align-items: start;
    width: 100%;
    padding: 0;
  }
}
.find-workspace-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.utility-payment-detail-container {
  position: relative;
}
.utility-payment-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.utility-payment-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.utility-payment-detail-table-header {
  height: 44px;
}
.utility-payment-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.utility-payment-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.utility-payment-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.utility-payment-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.utility-payment-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.utility-payment-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}
.deposit-reversed-button {
  color: var(--action-or-selection-color);
  border: 1px solid var(--action-or-selection-color);
  background-color: var(--view-background-color);
  padding: 0 16px;
  text-align: center;
  margin-top: 8px;
  width: fit-content;
  width: -moz-fit-content;
  min-width: 240px;
}

.pix-chargeback-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
@media (max-width: 500px) {
  .pix-chargeback-container {
    overflow-x: auto;
  }
}
.pix-chargeback-container:hover {
  overflow-x: auto;
}
.pix-chargeback-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.pix-chargeback-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .pix-chargeback-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.pix-chargeback-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}

.export-pix-chargeback-modal-container {
  padding: var(--space-l) var(--space-xl);
  clear: both;
  max-height: 630px;
  overflow-y: auto;
}
@media (max-width: 1440px) {
  .export-pix-chargeback-modal-container {
    max-height: 480px;
  }
}
.export-pix-chargeback-modal-loading {
  align-self: center;
  color: var(--action-or-selection-color);
}
.export-pix-chargeback-footer-container {
  padding: var(--space-xl);
}

.pix-infraction-container {
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  transform: rotateX(180deg);
}
@media (max-width: 500px) {
  .pix-infraction-container {
    overflow-x: auto;
  }
}
.pix-infraction-container:hover {
  overflow-x: auto;
}
.pix-infraction-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.pix-infraction-table {
  width: calc(100% - 40px);
  margin-bottom: 12px;
  table-layout: auto;
  transform: rotateX(180deg);
}
@media (max-width: 700px) {
  .pix-infraction-table {
    width: 100%;
    table-layout: auto !important;
  }
}
.pix-infraction-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}

.pix-infraction-create-modal-text {
  width: 70%;
}
.pix-infraction-create-modal-selector {
  width: 49%;
}
.pix-infraction-create-modal-full-line {
  width: 100%;
}

.export-pix-infraction-footer-container {
  padding: var(--space-xl);
}
.export-pix-infraction-modal-container {
  padding: var(--space-l) var(--space-xl);
  clear: both;
  max-height: 630px;
  overflow-y: auto;
}
@media (max-width: 1440px) {
  .export-pix-infraction-modal-container {
    max-height: 480px;
  }
}
.export-pix-infraction-modal-loading {
  align-self: center;
  color: var(--action-or-selection-color);
}

.challenge-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#challenge-view-title {
  font-size: 26px;
  line-height: 32px;
  font-family: 'Pretendard-Demibold';
}
#challenge-view-subtitle {
  margin-top: 16px;
  font-size: 14px;
  line-height: 18px;
  font-family: 'Pretendard-Thin';
  text-align: center;
}
#challenge-view-email {
  margin-top: 16px;
  font-size: 16px;
  line-height: 26px;
  font-family: 'Pretendard-Regular';
}
#qrcode-image-container {
  margin-top: 16px;
}

#customer-stateCode {
  text-transform: uppercase;
}
#cep-loading-indicator {
  position: absolute;
  margin-top: 20px;
  margin-left: -26px;
  color: var(--action-or-selection-color);
}
.tags {
  margin-inline-start: -38px;
}
.tags li.tagAdd,
.tags li.addedTag {
  float: left;
  margin-right: 0.25em;
  margin-right: 0.25em;
  margin-bottom: 2px;
}
.tags li.addedTag {
  background: none repeat scroll 0 0 var(--action-or-selection-color);
  border-radius: 4px;
  color: var(--view-background-color);
  padding: 0.25em;
}
span.tagRemove {
  cursor: pointer;
  display: inline-block;
  padding-left: 0.5em;
}

.forgot-password {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--menu-background-color);
}
.forgot-password #logo {
  display: block;
  margin: 20px auto;
  height: 26px;
}
.forgot-password-container {
  width: 320px;
  height: fit-content;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid var(--line-color);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background-color: var(--view-background-color);
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.forgot-password-spacing {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}
.highlight-workspace {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 20px;
}

.big-icon {
  height: 24px;
}
.shimmer-img,
.permission-menu-table-cell td img {
  margin: 0px 10px 0 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  vertical-align: middle;
}
.permission-menu-table-cell td:first-child {
  padding-left: 1rem;
}
.permission-menu-table-cell {
  height: 72px;
}

.cost-center-edit-cell {
  height: 72px;
  color: var(--text-color);
}
.rule-approvers-list {
  display: flex;
  font-size: 14px;
  line-height: 2.3;
  text-align: center;
}
.delete-option {
  cursor: pointer;
}
.delete-option > svg > path {
  cursor: pointer;
  fill: var(--title-color);
}
.delete-option:hover > svg > path {
  fill: var(--delete-or-cancel-color);
}
.rule-approver-image {
  border-radius: 50%;
  background-color: var(--border-color);
  width: 32px;
  height: 32px;
  margin-right: -8px;
}
.rule-approver-count {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-block;
  background-color: var(--menu-background-color);
  border: 1px solid var(--border-color);
}
.option-label {
  margin-left: 36px;
  line-height: 1.8;
  color: var(--text-color);
}
.button-border:active {
  opacity: 0.5;
}
.button:active {
  opacity: 0.5;
}
.create-cost-center-item {
  width: calc(100% - 40px);
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.delete-button {
  background-color: transparent;
  border-color: var(--delete-or-cancel-color);
  color: var(--delete-or-cancel-color);
}
.cancel {
  color: var(--delete-or-cancel-color);
}
.success {
  color: var(--dark-green);
}
.approver-color {
  border: solid 2px var(--light-green);
}
.edit-option > svg > path {
  cursor: pointer;
  fill: var(--title-color);
}
.edit-option:hover > svg > path {
  cursor: pointer;
  fill: var(--action-or-selection-color);
}
.hashtag-container {
  margin-top: 18px;
  position: absolute;
  margin-left: 8px;
  color: var(--title-color);
}
#member-table,
#rules-table,
#mailbox-table {
  width: 100%;
}
@media (max-width: 600px) {
  #member-table,
  #rules-table,
  #mailbox-table {
    width: auto;
  }
}
@media (max-width: 600px) {
  .cost-center-cell-spacing {
    padding-right: 10px;
  }
}
.status-flex {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
#header-number-approvers,
#header-approvers,
#header-trigger {
  white-space: nowrap;
}
.modal-separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
  margin-top: 10px;
}
.modal-form {
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}
.modal-form-title {
  margin-bottom: 20px;
}
.cost-center-table-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mail-box-name {
  min-width: 200px;
  word-break: break-all;
}

.multiple-options {
  display: flex;
  max-height: 44px;
  border: 1px solid var(--border-color);
  color: var(--input-color);
  margin-top: 6px;
  border-radius: 4px;
  min-height: 42px;
  margin: 10px 0 0px;
  cursor: pointer;
  font-size: 14px;
  line-height: 3;
  padding-left: 12px;
  background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+") no-repeat 100% 50%;
  white-space: nowrap;
  overflow: hidden;
}
.multiple-options-content {
  display: none;
  position: absolute;
  z-index: 15;
  margin-top: 1px;
  border-radius: 4px;
  background-color: var(--view-background-color);
  border: 1px solid var(--border-color);
  max-height: 236px;
  overflow: scroll;
  width: 45%;
}
.content-open~.multiple-options-content {
  display: grid;
}
.multiple-option-item {
  border-bottom: 1px solid var(--border-color);
  padding: 0px;
  height: fit-content;
  cursor: pointer;
  display: flex;
  padding-left: 12px;
}
.multiple-option-item:last-child {
  border-bottom: 0px solid var(--border-color);
}
.multiple-option-item label {
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--text-color);
}
.select-item:before {
  font-family: FontAwesome;
  content: "\f00c";
  color: var(--action-or-selection-color);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 12px;
}
.option-user-counter {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin-left: 12px;
  display: inline-block;
  margin-top: 4px;
  background-color: var(--menu-background-color);
  border: 1px solid var(--border-color);
}
.option-user-counter label {
  color: var(--text-color);
  text-align: center;
}
.option-user-image {
  border-radius: 50%;
  background-color: var(--border-color);
  width: 32px;
  height: 32px;
  margin-top: 4px;
  margin-right: 12px;
}
.tags-container {
  overflow: auto;
  margin-bottom: 15px;
}

.add-mail-box-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.add-mail-box-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.add-mail-box-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.add-mail-box-form {
  width: 48%;
}
.add-mail-box-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.add-mail-box-form select {
  min-height: 44px;
  margin-top: 5px;
}
.add-mail-box-button-container {
  display: flex;
  justify-content: flex-end;
}
#mailbox-workspace-domain-label {
  min-width: fit-content;
  min-width: -moz-fit-content;
}
.mailbox-form-group {
  display: flex;
  align-items: baseline;
}
@media (max-width: 500px) {
  .mailbox-form-group {
    flex-direction: column;
  }
}
#mail-box-domain-textfield > .input-tag {
  width: 100%;
}

.edit-mail-box-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.edit-mail-box-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.edit-mail-box-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.edit-mail-box-form {
  width: 48%;
}
.edit-mail-box-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.edit-mail-box-form select {
  min-height: 44px;
  margin-top: 5px;
}
.edit-mail-box-button-container {
  display: flex;
  justify-content: flex-end;
}

.explain-auth-modal-container {
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.customer-container {
  position: relative;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
}
.customer-table {
  width: 100%;
  margin-top: -4px;
  margin-bottom: 12px;
}
.customer-table-loading {
  width: 100%;
  margin-top: -4px;
  margin-bottom: 12px;
}
.customer-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.customer-table-header {
  height: 44px;
}
.customer-table-header td {
  font-size: 14px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.customer-table-header .shimmer {
  padding: 0px 30% 0px 0px;
}
.customer-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.customer-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
#checkbox {
  padding-bottom: 1.8rem;
}

.customer-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.no-cursor {
  cursor: unset;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
#table-cell-selected {
  padding-right: 50px;
  padding-bottom: 26px;
  z-index: 10;
}
.badge-status {
  display: none;
  padding: 1px 8px;
  color: var(--view-background-color);
  white-space: nowrap;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
  margin-left: 12px;
}
.pending {
  background-color: var(--dark-yellow);
}
.overdue {
  background-color: var(--dark-pink);
}

.create-cost-center-container {
  padding: 32px 24px 0px 24px;
  display: flex;
  flex-direction: column;
}
.create-cost-center-name-form-label {
  margin-top: 32px;
  margin-bottom: 8px;
}
.create-cost-center-separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin: 24px 0px;
}
.create-cost-center-name-subtitle {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--text-color);
}
.create-cost-center-button-container {
  display: flex;
  padding: 0px 24px 24px 24px;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}
.create-cost-center-button {
  width: 140px;
}
.create-cost-center-hashtag-container {
  margin-top: 14px;
  position: absolute;
  margin-left: 8px;
  color: var(--title-color);
}

.utility-payment-detail-container {
  position: relative;
}
.utility-payment-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.utility-payment-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.utility-payment-detail-table-header {
  height: 44px;
}
.utility-payment-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.utility-payment-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.utility-payment-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.utility-payment-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.utility-payment-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.utility-payment-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.pix-request-detail-container {
  position: relative;
  margin-left: 40px;
}
.pix-request-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.pix-request-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.pix-request-detail-to-cell {
  text-align: right;
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.pix-request-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.pix-request-detail-from-to-cell>label,
.pix-request-detail-to-cell>label {
  margin-bottom: 4px;
}

.transaction-detail-container {
  position: relative;
}
.transaction-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.transaction-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.transaction-detail-table-header {
  height: 44px;
}
.transaction-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.transaction-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.transaction-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.transaction-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.transaction-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.transaction-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.transaction-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.transaction-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}
.transaction-detail-image {
  margin-top: 12px;
  height: 32px;
  width: 160px;
}

.darf-payment-detail-container {
  position: relative;
  margin-left: 40px;
}
.darf-payment-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.darf-payment-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.darf-payment-detail-table-header {
  height: 44px;
}
.darf-payment-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.darf-payment-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.darf-payment-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.darf-payment-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.darf-payment-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.darf-payment-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.darf-payment-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.darf-payment-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.organization-table-cell {
  height: 52px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.organization-table-cell .shimmer {
  width: 100px;
  height: 14px;
  margin-bottom: 4px;
}
.shimmer-x-small {
  height: 12px !important;
  margin-bottom: 4px !important;
  width: 180px !important;
}
.shimmer-text-large {
  height: 20px !important;
  margin-bottom: 4px !important;
  width: 140px !important;
}
.organization-table td {
  font-size: 14px;
  color: var(--title-color);
}

.boleto-payment-detail-container {
  position: relative;
}
.boleto-payment-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.boleto-payment-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.boleto-payment-detail-table-header {
  height: 44px;
}
.boleto-payment-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.boleto-payment-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.boleto-payment-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.boleto-payment-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.boleto-payment-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.boleto-payment-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.boleto-payment-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.step {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  flex-grow: 0;
  height: 15px;
  width: 15px;
  border: 4px solid var(--border-color);
  border-radius: 50%;
  margin-top: 12px;
}
.completed {
  width: 18px;
  height: 18px;
  background: var(--border-color);
  border: none;
}
.completed svg {
  transition: all 200ms ease;
  display: block;
  height: 10px;
  width: 10px;
}
.status-icon {
  font-size: 40px;
}
.line {
  transition: all 200ms ease;
  height: 2px;
  flex-grow: 1;
  background: var(--border-color);
  margin-top: 20px;
}
.boleto-payment-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.utility-payment-detail-container {
  position: relative;
}
.utility-payment-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.utility-payment-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.utility-payment-detail-table-header {
  height: 44px;
}
.utility-payment-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.utility-payment-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.utility-payment-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.utility-payment-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.utility-payment-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.utility-payment-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}


.pix-infraction-solve-modal-text {
  width: 100%;
}
.pix-infraction-solve-modal-selector {
  width: 49%;
}

.user-img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.member-table-cell {
  height: 72px;
}
.member-table-cell td:first-child {
  padding-left: 1rem;
}
.shimmer-text-medium {
  height: 16px !important;
  margin-bottom: 4px !important;
  width: 140px !important;
}
#customer-table-loading {
  margin-top: -12px;
}
.member-table {
  padding-bottom: 40px;
}
.permission-menu-view-enable:hover .permission-menu-cell-views-content {
  display: block;
}
.permission-menu-cell-views-content {
  display: none;
  position: absolute;
  color: var(--text-color);
  background-color: var(--view-background-color);
  min-width: fit-content;
  min-height: 1px;
  max-height: 160px;
  overflow: overlay;
  padding: 4px 16px;
  z-index: 10;
  border: 1px solid var(--line-color);
  border-radius: 4px;
}
.permission-menu-cell-view-container {
  position: relative;
  display: inline-block;
}
.permission-menu-cell-views-content::-webkit-scrollbar {
  display: none;
}

.create-member-modal {
  clear: both;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
}
.create-member-modal p {
  font-size: 0.875rem;
  color: var(--text-color);
}
.create-member-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
.create-member-form {
  width: 48%;
}
.create-member-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.create-member-form select {
  min-height: 44px;
  margin-top: 5px;
}
.create-member-button-container {
  display: flex;
  justify-content: flex-end;
}
.member-tags {
  padding-inline-start: 0px;
}
.separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin-bottom: 10px;
}
.member-confirm {
  padding: 20px;
}
.confirm-button {
  width: 180px;
}
.create-member-button-container .loading-ring {
  margin-right: 72px;
}
.permission-modal-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}
.permission-main-information-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.permission-main-title {
  font-family: "Pretendard-Demibold";
  font-size: 26px;
  line-height: 32px;
}
.permission-description {
  font-family: "Pretendard-Thin";
  font-size: 14px;
  line-height: 18px;
}
.permission-form-container {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.permission-form-button-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.add-permision-button-container {
  width: 100%;
  display: flex;
  justify-content: end;
  -webkit-justify-content: flex-end;
}
.add-permission-button {
  width: fit-content;
}
.permission-footer-container {
  padding: 24px;
  display: flex;
  justify-content: end;
  -webkit-justify-content: flex-end;
}
.permission-challenge-authenticate {
  padding: 40px 24px;
}
.new-permission-list-container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 16px;
  min-width: 50%;
  background-color: var(--menu-background-color);
  border-radius: 8px;
  padding: 24px;
  box-sizing: border-box;
}
.new-permission-list-content-container {
  height: 300px;
  overflow: auto;
}
@media (max-width: 1080px) {
  .new-permission-list-content-container {
    min-height: 200px;
  }
}
.new-permission-list-content-item {
  border-bottom: 2px solid var(--line-color);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.new-permission-list-content-item-title {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 18px;
}
.new-permission-list-content-item-emails {
  font-family: "Pretendard-Regular";
  font-size: 14px;
  line-height: 18px;
}
.new-permission-list-content-item:last-child {
  border: none;
}
.permission-challenge-authenticate-container {
  display: flex;
  gap: 24px;
}
@media (max-width: 1080px) {
  .permission-challenge-authenticate-container {
    flex-direction: column;
  }
}
.permission-challenge-section-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.permission-challenge-section-title {
  font-family: "Pretendard-Demibold";
  font-size: 26px;
  line-height: 32px;
}
.permission-challenge-section-description {
  font-family: "Pretendard-Thin";
  font-size: 14px;
  line-height: 18px;
}
.permission-challenge-section-email {
  font-family: "Pretendard-Regular";
  font-size: 16px;
  line-height: 20px;
}
.new-permission-list-title {
  font-family: "Pretendard-Demibold";
  font-size: 20px;
  line-height: 24px;
}
.deeplink-button-container-flex {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  text-align: center;
}
.permission-tags {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  line-height: 20px;
}
.permission-info-bold-label {
  font-family: "Pretendard-Light";
}

.member-update-container {
  display: inline-flex;
  width: 50%;
  height: 73px;
  padding: 0px;
  align-items: center;
}
.create-member-button-container .confirm-button:last-child {
  margin-left: 12px;
}
.scroll-container {
  height: auto;
  width: 100%;
  overflow: hidden;
  transition-timing-function: ease-in;
  transition: 0.2s;
}
.content {
  flex-shrink: 0;
  width: 100%;
  display: flex;
}
.update-permission-table-cell {
  height: 60px;
}
.update-permission-form {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .update-permission-form {
    gap: 20px;
    flex-direction: column;
  }
}
.update-permission-form-control {
  display: flex;
  flex-direction: column;
  width: 50%;
}
@media (max-width: 860px) {
  .update-permission-form-control {
    width: 100%;
  }
}
.update-permission-information-container {
  padding: 8px 16px;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: var(--menu-background-color);
  font-family: "Pretendard-Hair";
  font-size: 14px;
  line-height: 18px;
}
.update-permission-list-content-item-title {
  font-family: "Pretendard-Demibold";
  font-size: 16px;
  line-height: 20px;
}
.update-permission-list-content-item-description {
  font-family: "Pretendard-Thin";
  font-size: 14px;
  line-height: 18px;
}
.update-permission-member-name-label {
  font-family: "Pretendard-Light";
  font-size: 20px;
  line-height: 120%;
}
.update-permission-member-email-label {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  line-height: 20px;
}
.confirm-email-label {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  line-height: 18px;
}
#or-label {
  font-family: "Pretendard-Hair";
  font-size: 14px;
  line-height: 18px;
}

#rules-container {
  margin-top: 88px;
  border: solid 1px var(--border-color);
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: initial;
}

.sb-detail-section {
  overflow: auto;
  height: fit-content;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: 12px;
  min-height: 52px;
}
.sb-detail-section>p {
  margin-left: 12px;
}
.sb-detail-section>.flex-box {
  margin-top: 12px;
}
.flex-box>.button {
  margin-right: 12px;
  width: 100px;
}
#scheduled-label,
#approved-or-denied-label {
  line-height: 32px;
}
.requester-user-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--border-color);
}
.sb-detail-section>* {
  margin-left: 12px;
}
.requester-container>label {
  margin-left: 12px;
  margin-top: 4px;
}
.requester-container {
  display: flex;
  margin-top: 0px;
  margin-bottom: 20px;
  justify-content: space-between;
}
@media (max-width: 765px) {
  .requester-container {
    flex-direction: column;
    gap: 8px;
  }
}
.requester-container>.status-badge {
  height: fit-content;
  margin-top: 12px;
  min-width: 100px;
  margin-right: 12px;
}
.requester-container > .status-tag {
  height: fit-content;
  margin-top: 12px;
  min-width: 100px;
  margin-right: 12px;
}
.requester-container>.button {
  margin-top: 8px;
  margin-right: 12px;
  margin-left: 12px;
  width: 100px;
}
@media (max-width: 765px) {
  .requester-container>.button {
    margin-left: 0px;
    margin-right: 0px;
  }
}
.requester-label-container {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  margin-top: 8px;
}
#request-createdAt {
  font-size: 12px;
}
#operation-view {
  margin-bottom: 12px;
}
#approvers-list-detail {
  margin-left: 12px;
}
.eligible-avatar {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--border-color);
}
.accordion-container-table {
  margin: 8px 18px 0px;
}
.detail-rule-cell {
  height: 64px;
  color: var(--text-color);
}
#accordion-container {
  border-top: 1px solid var(--border-color);
  overflow: hidden;
  margin-left: 0px;
}
.attachments-tag {
  cursor: pointer;
  list-style: none;
  background-color: var(--menu-background-color);
  color: var(--text-color);
  max-width: fit-content;
  margin-bottom: 4px;
  padding: 4px 8px 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}
.attachments-tag:hover {
  color: var(--action-or-selection-color);
}
.add-attachments-icon {
  color: var(--action-or-selection-color);
  margin: auto;
  width: 16px;
  height: 16px;
}
.add-attachments-collection-view-cell:hover,
.attachments-collection-view-cell:hover {
  outline: 2px solid var(--action-or-selection-color);
}
.attachments-collection {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.title-container-loading {
  display: flex;
  gap: 12px;
}
.title-loading {
  display: none;
  color: var(--action-or-selection-color);
}
.payment-request-detail-requester-container {
  display: flex;
  padding-bottom: 32px;
  align-items: center;
  gap: var(--space-xl);
  align-self: stretch;
}
@media (max-width: 765px) {
  .payment-request-detail-requester-container {
    flex-direction: column;
    padding: 32px 0px;
    align-items: flex-start;
    gap: var(--space-l);
  }
}
.payment-request-detail-info-container {
  display: flex;
  height: 108px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  flex: 1 0 0;
}
@media (max-width: 765px) {
  .payment-request-detail-info-container {
    height: fit-content;
  }
}
.payment-request-detail-infos-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.payment-request-detail-name-text-container {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.payment-request-detail-edit-button-container {
  display: flex;
  height: 32px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
@media (max-width: 765px) {
  .payment-request-detail-edit-button-container {
    height: fit-content;
  }
}
.payment-request-detail-edit-button-container > svg > path {
  fill: var(--action-or-selection-color);
}
.payment-request-detail-requester-info-container {
  display: flex;
  max-width: 208px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xs);
}

.utility-payment-detail-container {
  position: relative;
}
.utility-payment-detail-table {
  width: calc(100%);
  margin-top: -4px;
  margin-bottom: 12px;
}
.utility-payment-detail-table td {
  font-size: 14px;
  border-bottom: solid 1px var(--line-color);
  color: var(--title-color);
}
.utility-payment-detail-table-header {
  height: 44px;
}
.utility-payment-detail-table-header td {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-table-cell .shimmer {
  padding: 0px 70% 0px 0px;
}
.utility-payment-detail-table-cell .align-right .shimmer {
  padding: 0px 10% 0px 0px;
}
.utility-payment-detail-from-to-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.utility-payment-detail-from-to-cell {
  flex-direction: column;
  display: flex;
  color: var(--title-color);
}
.utility-payment-detail-table-cell-title {
  font-size: 12px;
  color: var(--text-color);
  padding-bottom: 13px;
}
.utility-payment-detail-from-to-cell>label {
  margin-bottom: 4px;
}
.utility-payment-detail-table-cell {
  height: 55px;
  color: var(--title-color);
  vertical-align: middle;
}

.form-label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}

.attachment-background {
  display: none;
  position: fixed;
  z-index: 23;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(44,65,86,0.38);
}
.attachment-view {
  z-index: 13;
  background-color: var(--view-background-color);
  margin: 2% auto;
  border: 1px solid var(--line-color);
  width: calc(50% - 40px);
  min-height: calc(100vh - 10%);
  border-radius: 4px;
  display: flex;
  flex-flow: column;
  height: calc(100vh - 40px);
}
@media (max-width: 900px) {
  .attachment-view {
    width: calc(80% - 40px);
  }
}
@media (max-width: 735px) {
  .attachment-view {
    width: calc(100% - 40px);
  }
}
.attachment-view-image {
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  border-radius: 4px;
  max-height: calc(100% - 80px);
  border: 0;
}
.attachment-view-spinner {
  margin: auto;
  width: 40px !important;
  height: 40px;
  color: var(--action-or-selection-color);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.attachment-view-options {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.attachment-view-options-item {
  width: 40px;
  height: 40px;
  background-color: var(--menu-background-color);
  border-radius: 4px;
  display: flex;
  cursor: pointer;
}
.attachment-view-options-item-icon {
  margin: auto;
  width: 18px !important;
  height: 18px;
  color: var(--action-or-selection-color);
  cursor: pointer;
}
.attachment-view-option-group {
  display: flex;
  gap: 18px;
}
.attachment-confirm-modal-view {
  display: none;
  background-color: var(--view-background-color);
  border: 1px solid var(--border-color);
  width: 400px;
  height: fit-content;
  height: -moz-fit-content;
  position: absolute;
  top: calc(50% - 80px);
  left: 0;
  right: 0;
  bottom: calc(50% - 80px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  padding: 8px;
}
.attachment-confirm-modal-title-header {
  display: flex;
  justify-content: space-between;
  margin: 8px;
}
.attachment-confirm-modal-title-body {
  display: flex;
  justify-content: space-evenly;
  margin-right: 8px;
  margin-top: 24px;
  margin-left: 8px;
  margin-bottom: 8px;
  gap: 18px;
}
.attachment-confirm-modal-title-body > .button,
.attachment-confirm-modal-title-body > .button-border {
  width: 50%;
}

#export-statement-loading-container {
  display: flex;
  align-items: center;
}
.export-statement-footer-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px 24px;
}
.export-statement-modal-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 24px;
  clear: both;
  max-height: 630px;
  overflow-y: auto;
}
@media (max-width: 1440px) {
  .export-statement-modal-container {
    max-height: 480px;
  }
}
.export-statement-modal-section-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-statement-modal-section-content {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.export-statement-modal-info-section-content {
  display: flex;
  justify-content: space-between;
}
.export-statement-modal-select-container {
  width: 48%;
}
.export-statement-modal-input-container {
  width: 100%;
}
.export-statement-modal-select-title {
  margin-bottom: 4px;
  margin-top: 4px;
}
.export-statement-modal-select-container select {
  min-height: 44px;
  margin-top: 5px;
}
.export-statement-modal-loading {
  align-self: center;
  color: var(--action-or-selection-color);
}
.export-statement-modal-section-title {
  font-size: 24px;
  color: var(--title-color);
}
.export-statement-modal-section-subtitle {
  font-size: 14px;
  color: var(--text-color);
}
.export-statement-modal-tab-bar {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--line-color);
}
.export-statement-modal-separator-spacing {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
  margin: 25px 0px;
}
.export-statement-modal-separator {
  width: 100%;
  height: 1px;
  background-color: var(--line-color);
}
.export-statement-modal-email-input-container {
  display: flex;
  margin-top: 5px;
  flex-wrap: wrap;
}
.export-statement-cell-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.export-statement-information-cell-container {
  display: flex;
  flex-direction: column;
}
.statement-download-icon {
  color: var(--action-or-selection-color);
}
.statement-export-menu-table-cell {
  height: 72px;
  cursor: pointer;
}
#receiver-download-option {
  font-size: 1.2rem;
}

.generic-two-factor-modal-token-label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.generic-two-factor-modal-margin-bottom {
  margin-bottom: 20px;
}


.input-tag {
  font-size: 15px;
  background-color: transparent;
  border: none;
  color: var(--input-color);
  height: 40px;
}
.search-input-tag {
  font-size: 15px;
  background-color: transparent;
  border: none;
  color: var(--input-color);
  height: 40px;
  width: 50px;
}
.search-input-tag-placeholder::placeholder {
  font-family: "Pretendard-Thin";
  font-size: 16px;
  line-height: 20px;
}
.invalid-input {
  border: 1px solid var(--invalid-border-color);
}
#request-tags,
#files-container {
  height: fit-content;
  display: flex;
  overflow-x: auto;
  margin-top: 10px;
  flex-wrap: wrap;
}
.tag {
  background-color: var(--menu-background-color);
  color: var(--text-color);
  width: fit-content;
  margin-bottom: 4px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-right: 4px;
  height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.tag-invalid {
  border-radius: 8px;
  border: 1px solid var(--invalid-border-color);
  background: var(--light-invalid-background-color);
  color: var(--invalid-border-color);
}
.tag-selected {
  border-radius: 8px;
  border: 1px solid var(--action-or-selection-color);
  background-color: var(--action-or-selection-color);
  color: var(--title-color);
}
.invalid-label {
  color: var(--invalid-border-color);
}
.tag-text,
.remove-tag {
  height: 20px;
  line-height: 20px;
}
.sb-form-view-container {
  margin-left: 20px;
  margin-right: 20px;
  height: fit-content;
}
#attach-icon {
  margin-left: 8px;
  margin-top: 24px;
  color: var(--action-or-selection-color);
  cursor: pointer;
}
#preview-loading {
  position: absolute;
  margin-top: 6px;
}
#preview-container {
  height: 0px;
  overflow: hidden;
  transition: height 0.2s linear;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}
.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
#transfer-back-button {
  text-align: left;
  padding: 0 0;
  margin-top: -12px;
}
.select-bank-code-container {
  position: relative;
}
.bank-search-dropdown {
  outline: none;
  transition-duration: 80ms;
  background-color: var(--view-background-color);
  min-height: 0px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  margin-top: -6px;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  position: absolute;
}
.search-bank-loading > label {
  margin-top: 14px;
  margin-left: 8px;
  margin-right: 8px;
}
.search-bank-loading {
  display: flex;
  height: 40px;
}
#transfer-modal-bank-name-input::-webkit-scrollbar {
  display: none;
}
@-moz-keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@-webkit-keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@-o-keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}
@-moz-keyframes colors {
  0% {
    stroke: var(--action-or-selection-color);
  }
  25% {
    stroke: var(--action-or-selection-color);
  }
  50% {
    stroke: var(--action-or-selection-color);
  }
  75% {
    stroke: var(--action-or-selection-color);
  }
  100% {
    stroke: var(--action-or-selection-color);
  }
}
@-webkit-keyframes colors {
  0% {
    stroke: var(--action-or-selection-color);
  }
  25% {
    stroke: var(--action-or-selection-color);
  }
  50% {
    stroke: var(--action-or-selection-color);
  }
  75% {
    stroke: var(--action-or-selection-color);
  }
  100% {
    stroke: var(--action-or-selection-color);
  }
}
@-o-keyframes colors {
  0% {
    stroke: var(--action-or-selection-color);
  }
  25% {
    stroke: var(--action-or-selection-color);
  }
  50% {
    stroke: var(--action-or-selection-color);
  }
  75% {
    stroke: var(--action-or-selection-color);
  }
  100% {
    stroke: var(--action-or-selection-color);
  }
}
@keyframes colors {
  0% {
    stroke: var(--action-or-selection-color);
  }
  25% {
    stroke: var(--action-or-selection-color);
  }
  50% {
    stroke: var(--action-or-selection-color);
  }
  75% {
    stroke: var(--action-or-selection-color);
  }
  100% {
    stroke: var(--action-or-selection-color);
  }
}
@-moz-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}
@-o-keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}

.create-request-modal-container {
  clear: both;
  padding: 32px;
}
.str-form-container {
  margin: 25px;
  margin-top: 15px;
  margin-bottom: 35px;
}
.form-control {
  display: flex;
  flex-direction: column;
}
.form-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.form-display {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.form-group .form-control {
  width: 48%;
}
.form-control .tag-input-container {
  margin-top: 5px;
}
.section-description-title {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
  margin: 24px 0;
}
.section-description {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.28px;
  margin-bottom: 8px;
}

.payment-request-table-cell {
  height: 100px;
  color: var(--title-color);
  vertical-align: middle;
  cursor: pointer;
}
.payment-request-table-cell td {
  padding-right: 16px;
  border-bottom: solid 1px var(--line-color);
}
#payment-request-description {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 735px) {
  #payment-request-description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 735px) {
  #payment-request-status {
    margin-bottom: 16px;
  }
}
#payment-request-approvers {
  flex-flow: row;
}
@media (max-width: 735px) {
  #payment-request-approvers {
    flex-flow: column;
  }
}
.gray-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  border: solid 2px transparent;
}
.status-badge {
  display: none;
  min-width: 10px;
  padding: 4px 6px var(--space-2xs) 6px;
  color: var(--view-background-color);
  white-space: nowrap;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  text-align: center;
  width: fit-content;
  font-size: var(--text-xs-regular-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-xs-regular-line-height);
  letter-spacing: var(--text-xs-demibold-letter-spacing);
}
[tooltip] {
  position: relative;
}
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: 0.9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent;
  z-index: 1001;
}
[tooltip]::after {
  content: attr(tooltip);
  font-family: Helvetica, sans-serif;
  text-align: center;
  min-width: 3em;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: 4px;
  box-shadow: 0 1em 2em -0.5em rgba(0,0,0,0.35);
  background: #333;
  color: #fff;
  z-index: 1000;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}
/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 40%;
  transform: translate(-50%, 0.5em);
}
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 18px);
  transform: translate(0.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 18px);
  transform: translate(0.5em, -50%);
}
/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 0%;
  border-left-width: 0;
  border-right-color: #333;
  left: calc(0em - 18px);
  transform: translate(0.5em, 50%);
  rotate: 180deg;
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 18px);
  transform: translate(0.5em, 50%);
}
/* KEYFRAMES */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
#payment-request-detail-attatchment {
  margin-top: 8px;
  width: 100%;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.payment-request-attatchment-detail-item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  border: solid 1px var(--border-color);
  border-radius: 4px;
  padding: 0 4px;
  max-width: 160px;
  min-width: 64px;
  height: 30px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  position: relative;
  z-index: 18;
}
.payment-request-attatchment-detail-item:hover {
  border: solid 1px var(--action-or-selection-color);
}
.payment-request-attatchment-detail-item:active > .payment-request-attatchment-detail-item-label,
.payment-request-attatchment-detail-item:active > img {
  opacity: 0.5;
}
.payment-request-attatchment-detail-item:hover > .payment-request-attatchment-detail-item-label {
  color: var(--action-or-selection-color);
}
.payment-request-attatchment-detail-item > div > svg path {
  fill: var(--border-color);
}
.payment-request-attatchment-detail-item:hover > div > svg path {
  fill: var(--action-or-selection-color);
}
.payment-request-attatchment-detail-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
}
.payment-request-table-cell-info-container {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  margin-bottom: 12px;
}
.costcenter-table tr {
  border-bottom: solid 1px var(--line-color);
}
.status-tag {
  display: none;
  min-width: 100px;
  padding: var(--space-s);
  color: var(--view-background-color);
  white-space: nowrap;
  border-radius: var(--space-xs);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  text-align: center;
  width: fit-content;
}
.payment-request-approvers-list {
  display: flex;
  font-size: 14px;
  line-height: 2.3;
  text-align: center;
}
.payment-request-approver-count {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-block;
  background-color: var(--menu-background-color);
  border: 1px solid var(--border-color);
  z-index: 2;
}
@-moz-keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@-webkit-keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@-o-keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
@-moz-keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
@-webkit-keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
@-o-keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 0.9;
    transform: translate(0, -50%);
  }
}

.payment-request-list-sidebar,
.balance-container-sidebar {
  border: 1px solid var(--border-color);
  padding: 16px;
  height: fit-content;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
#count-label,
#balance-label {
  margin-bottom: 12px;
  user-select: none;
}
#show-amount {
  color: var(--action-or-selection-color);
  cursor: pointer;
}
#balance-amount {
  user-select: none;
  height: 26px;
  line-height: 2;
}

.form-control-side {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}
.format-tag-input {
  height: fit-content;
  display: flex;
  overflow-x: auto;
  margin-top: 10px;
  flex-wrap: wrap;
  cursor: text;
}
.form-control-search-group {
  width: 100%;
}
.form-control-date-group {
  width: 50%;
}
.form-control-label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.search-item-avatar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
.table-avatar {
  border-radius: 50%;
  background-color: var(--border-color);
  width: 32px;
  height: 32px;
  margin: 0 8px;
}
.tab-avatar {
  border-radius: 50%;
  background-color: var(--border-color);
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.tag-item-avatar {
  display: flex;
  align-items: center;
}
.modal-button-container {
  display: flex;
  justify-content: end;
  gap: 15px;
  padding: 15px;
}
@media (max-width: 700px) {
  .modal-button-container {
    gap: 8px;
    flex-direction: column-reverse;
    width: 100%;
  }
}

.costcenter-table {
  width: 100%;
  margin-top: -4px;
  margin-bottom: 12px;
  table-layout: auto;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .costcenter-table {
    width: auto;
  }
}
#request-table-header-amount,
#request-table-header-requester,
#request-table-header-approvers {
  padding-right: 10px;
  white-space: nowrap;
}
.resend-button {
  height: 32px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--action-or-selection-color);
  background-color: var(--view-background-color);
  border: 1px solid var(--action-or-selection-color);
  text-align: center;
  line-height: 32px;
  padding: 0 16px;
  margin-right: 16px;
  border-radius: 15px;
}
.empty-directory {
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--menu-background-color);
  height: 308px;
  width: 308px;
  margin: 12% auto;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
#empty-directory-image {
  height: 120px;
  width: 120px;
}
.empty-directory-title {
  color: var(--text-color);
  height: 54px;
  text-align: center;
  width: 57%;
}
.costcenter-table-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cost-center-checkbox-container {
  width: 38px;
}
.cost-center-settings-button {
  cursor: pointer;
}
.cost-center-button {
  height: 40px;
  line-height: 40px;
}
.cost-center-settings-button > svg > g > path {
  fill: var(--action-or-selection-color);
}
.cost-center-filter-tag {
  background-color: #f9f9fc;
  color: #707072;
  width: fit-content;
  padding: 4px 8px 4px 8px;
  border-radius: 8px;
  border: 1px solid #dcdbde;
  margin-right: 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.cost-center-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0px;
}
.cost-center-container {
  padding: var(--space-3xl) var(--space-15xl) 0px var(--space-3xl);
}
@media (max-width: 1255px) {
  .cost-center-container {
    padding-right: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .cost-center-container {
    padding-right: var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .cost-center-container {
    padding-right: var(--space-xl);
    padding-left: var(--space-xl);
    padding-top: 0px;
  }
}
.cost-center-mobile-table-header {
  display: flex;
  padding: var(--space-2xl) 0 var(--space-l) 0;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.cost-center-mobile-table-header > .button-bordeless {
  padding: 0px;
}
.cost-center-mobile-table-header-title {
  font-size: var(--heading-s-size);
  font-weight: 600;
  line-height: var(--heading-s-line-height);
}
.cost-center-mobile-table {
  width: 100%;
}
.cost-center-table {
  position: relative;
  overflow: auto;
  height: calc(100vh - 230px);
  -webkit-overflow-scrolling: touch;
  padding: 10px 0;
}
.cost-center-table::-webkit-scrollbar-corner {
  background-color: transparent;
}
.cost-center-mobile-tab-select {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cost-center-mobile-tab-select > svg > path {
  fill: var(--action-or-selection-color);
}
.cost-center-list-bottom-sheet-container {
  width: calc(100% - 48px);
  border-radius: var(--radius-l) var(--radius-l) 0px 0px;
  background: var(--menu-background-color);
  position: absolute;
  bottom: 0px;
  display: flex;
  padding: var(--space-s) var(--space-xl) var(--space-xl) var(--space-xl);
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.cost-center-list-bottom-sheet-content-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.cost-center-list-bottom-sheet-title {
  font-size: var(--heading-l-size);
  font-weight: 600;
  line-height: var(--heading-l-line-height);
}
.cost-center-list-bottom-sheet-content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  align-self: stretch;
}
.cost-center-list-bottom-sheet-content-item {
  display: flex;
  padding: var(--space-l);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  cursor: pointer;
}
.cost-center-list-bottom-sheet-content-item-text {
  font-size: var(--text-s-regular-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-s-regular-line-height);
  letter-spacing: var(--text-s-regular-letter-spacing);
}
.cost-center-list-bottom-title-text {
  text-align: center;
}
.cost-center-list-bottom-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.cost-center-list-bottom-tab-item-option {
  display: flex;
  height: calc(56px - 2 * var(--space-l));
  padding: var(--space-l);
  width: calc(100% - 2 * var(--space-l));
  align-items: center;
  gap: var(--space-s);
  cursor: pointer;
}
.cost-center-list-bottom-tab-item-option > svg > path {
  fill: var(--title-color);
}
.cost-center-header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media (max-width: 1000px) {
  .cost-center-header-container {
    flex-direction: column;
    gap: 16px;
  }
}

.batch-alert {
  align-items: center;
  background-color: var(--menu-background-color);
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  color: rgba(255,255,255,0.702);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 4px 0;
  height: 0px;
  z-index: 10;
  width: 100%;
  transition: height 0.1s linear;
  overflow: hidden;
  margin-top: -29px;
  margin-bottom: 29px;
}
.batch-button {
  color: var(--action-or-selection-color);
  margin-left: 4px;
  cursor: pointer;
}

.payment-request-mobile-cell {
  display: flex;
  padding: 24px 0px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}
.payment-request-mobile-cell > #table-cell-selected {
  padding-right: 43px;
}
.payment-request-mobile-cell-flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
  align-self: stretch;
  width: 100%;
}
.payment-request-mobile-cell-flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: stretch;
}
.payment-request-mobile-cell-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.payment-request-mobile-cell-text-subtitle {
  font-family: 'Pretendard-Thin';
  font-size: 12px;
  font-weight: 200;
  line-height: 16px;
}
.payment-request-mobile-cell-text-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.payment-request-mobile-cell-badge {
  display: flex;
  padding: 4px 6px var(--space-2xs) 6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.payment-request-mobile-cell-flex-column-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  align-self: stretch;
}
.payment-request-mobile-type-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-request-mobile-type-img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.payment-request-mobile-type-img > svg > g > g > path,
.payment-request-mobile-type-img > svg > g > path,
.payment-request-mobile-type-img > svg > path {
  fill: var(--text-color);
}

.organization-key-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px 24px 24px;
}
.organization-key-footer-container {
  padding: 14px 24px 24px 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 16px;
}
.organization-key-upload-logo {
  background-color: var(--line-color);
  border-radius: 4px;
  padding: 8px;
}
.organization-key-upload-container {
  padding: 16px;
  border: 1px solid var(--border-color);
  height: 32px;
  border-radius: 4px;
  display: flex;
  cursor: pointer;
  gap: 8px;
}
.organization-key-upload-labels {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
#clipImage > path,
#helpImage > path {
  fill: var(--action-or-selection-color);
}
#organization-key-help-button {
  font-family: 'Pretendard-Demibold';
  font-size: 16px;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  width: 180px;
  justify-content: center;
}
.organization-key-continue-button {
  width: 180px;
  font-family: 'Pretendard-Demibold';
  font-size: 16px;
}
#about-organization-key {
  line-height: 24px;
  font-size: 14px;
  font-family: 'Pretendard-Thin';
}
.organization-key-verify-key-label {
  font-size: 20px;
  font-family: 'Pretendard-Demibold';
  line-height: 24px;
}
.organization-key-verify-key-value {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 14px;
  font-family: 'Pretendard-Regular';
  line-height: 18px;
}
.organization-key-edit-key {
  font-size: 16px;
  font-family: 'Pretendard-Demibold';
  line-height: 20px;
  color: var(--action-or-selection-color);
  width: 100%;
  text-align: center;
  padding-bottom: 4px;
  cursor: pointer;
}
.organization-key-edit-key:active {
  opacity: 0.5;
}
.organization-key-verify-container {
  padding: 16px 24px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  background: var(--menu-background-color);
  border-radius: 4px;
}
.organization-key-verify-info-container {
  width: calc(50% - 25px);
  background: var(--menu-background-color);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
}
@media (max-width: 600px) {
  .organization-key-verify-info-container {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .organization-key-verify-info-container {
    width: 100%;
  }
}
.vertical-separator {
  width: 1px;
  background: var(--line-color);
  margin: 0px 24px;
}
@media (max-width: 600px) {
  .vertical-separator {
    width: 0px;
  }
}
#organization-key-challenge-view-container {
  width: calc(50% - 25px);
}
@media (max-width: 600px) {
  #organization-key-challenge-view-container {
    width: 100%;
  }
}
.organization-key-second-container {
  display: flex;
  flex-direction: row;
  padding: 40px 32px;
}
@media (max-width: 600px) {
  .organization-key-second-container {
    flex-direction: column;
    gap: 32px;
  }
}
#project-upload-label {
  font-family: 'Pretendard-Regular';
  font-size: 12px;
  line-height: 18px;
}
.project-upload-file-type {
  font-family: 'Pretendard-Thin';
  font-size: 10px;
  line-height: 12px;
}

.center-no-data-element {
  margin: auto;
  margin-top: 100px;
}
.double-graph {
  display: flex;
  align-items: center;
  gap: 50px;
}
@media (max-width: 1200px) {
  .double-graph {
    flex-direction: column-reverse;
  }
}
.more-button-container {
  margin-top: 20px;
}
.more-button-container button {
  height: 35px;
  line-height: 0;
  font-size: 13px;
  font-weight: 100;
}
.volume-graph {
  width: 30%;
}
@media (max-width: 1200px) {
  .volume-graph {
    width: 85%;
  }
}
.periodic-graph {
  width: 70%;
}
@media (max-width: 1200px) {
  .periodic-graph {
    width: 85%;
  }
}
.toggle-button-container {
  display: flex;
  gap: 5px;
  align-items: center;
}
.toggle-button-container input {
  display: none;
}
.chart-container {
  margin-top: 85px;
  margin-bottom: 85px;
}
.chart-toggle-button {
  cursor: pointer;
  border-radius: 5px;
  padding: 6px 8px;
  border: 1px solid var(--border-color);
}
.chart-active-button {
  border: 1px solid var(--action-or-selection-color);
  background-color: var(--action-or-selection-color);
}
.chart-toggle-button svg {
  color: var(--text-color);
}
.chart-active-button svg {
  color: var(--view-background-color);
}
.chart-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.relative-container {
  position: relative;
}
.counter-badge {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: var(--action-or-selection-color);
  bottom: 21px;
  left: 186px;
  border-radius: 100px;
  font-size: 14px;
  text-align: center;
  color: var(--line-color);
  line-height: 21px;
}
.mb-xs {
  margin-bottom: 50px;
}
.series-container-spacing {
  margin-top: 56px;
  margin-bottom: 56px;
}
.dashboard-load {
  display: flex;
  justify-content: center;
}
.dashboard-load lottie-player {
  width: 480px;
  height: 480px;
}
.switch-container {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 15px;
}

#horizontal-graph-section {
  margin-top: 70px;
}
.horizontal-graph-container {
  margin-top: 30px;
}
.horizontal-bar-loading {
  display: flex;
  justify-content: center;
}
.horizontal-bar-loading > label {
  margin-top: 10px;
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.75rem;
  display: flex;
}
.bar-chart-text {
  width: 150px;
}
.bar-chart-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.child-bar-chart {
  margin-bottom: 5px;
}
.bar-chart-item {
  width: 150px;
}
.bar-char-item-flex {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bar-chart {
  width: 100%;
  margin-left: 40px;
}
@media (max-width: 700px) {
  .bar-chart {
    width: 55%;
  }
}
.bar-chart-progress-container {
  width: 100%;
  border-radius: 4px;
  background-color: var(--menu-background-color);
}
.bar-chart-fill {
  display: block;
  height: 25px;
  border-radius: 4px;
}
.parent-bar-chart {
  margin-bottom: 25px;
}
.subhorizontal-container {
  position: relative;
  margin-top: 10px;
}
.subhorizontal-bar-fill {
  height: 12px;
  opacity: 55%;
}
.horizontal-graph-tab-container {
  margin-bottom: 80px;
}
.vertical-child-line {
  position: absolute;
  background-color: var(--line-color);
  width: 3px;
  height: 100%;
  left: 21px;
}
.child-bar-text {
  max-width: 121px;
  margin-left: 35px;
}
.horizontal-graph-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line-color);
}
.end {
  text-align: end;
}

.action-buttons-container {
  display: flex;
  justify-content: end;
  gap: 15px;
  padding: 15px;
}
.action-button-container {
  width: 180px;
  height: 35px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 100;
}
.format-tag-input {
  height: fit-content;
  display: flex;
  overflow-x: auto;
  margin-top: 10px;
  flex-wrap: wrap;
}

.edit-payment-container {
  display: flex;
  width: 100%;
  gap: 18px;
}
.edit-payment-form {
  width: 50%;
}
#edit-payment-form-submit-loading {
  margin-right: 72px;
}

.receivables-carousel-container {
  display: flex;
  justify-content: center;
}
.receivables-top-section {
  display: flex;
  padding: 0px var(--space-15xl) var(--space-8xl) var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .receivables-top-section {
    padding: 0px var(--space-8xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .receivables-top-section {
    padding: 0px var(--space-3xl) var(--space-8xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .receivables-top-section {
    padding: 0px var(--space-xl) var(--space-8xl) var(--space-xl);
  }
}
.receivables-top-content {
  display: flex;
  padding-top: var(--space-6xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5xl);
  align-self: stretch;
}
.receivables-top-section-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  align-self: stretch;
}
.receivables-main-top-section-carousel-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.receivables-main-top-section-carousel-container > .carousel {
  width: fit-content;
}
.receivables-bottom-section {
  display: flex;
  padding: var(--space-15xl) 0px;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8xl);
  align-self: stretch;
  background: var(--background-full-neutral-secondary);
}
@media (max-width: 1255px) {
  .receivables-bottom-section {
    padding: var(--space-15xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .receivables-bottom-section {
    padding: var(--space-15xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .receivables-bottom-section {
    padding: var(--space-15xl) var(--space-xl);
  }
}
.receivables-bottom-section-column {
  display: flex;
  padding: 0px var(--space-15xl);
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-7xl);
  align-self: stretch;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: transparent transparent;
}
@media (max-width: 1500px) {
  .receivables-bottom-section-column {
    justify-content: start;
    gap: var(--space-2xl);
  }
}
.receivables-bottom-section-column::-webkit-scrollbar {
  display: none;
}
.receivables-bottom-section-column::-webkit-scrollbar-thumb {
  display: none;
}
.receivables-bottom-section-column::-webkit-scrollbar-track {
  display: none;
}
.receivables-column-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5xl);
  flex: 1 0 0;
  scroll-behavior: smooth;
  scroll-snap-align: center;
}
.receivables-column-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  align-self: stretch;
  white-space: nowrap;
}
.receivables-column-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  height: 80px;
}
.receivables-main-bottom-section-heading-title-container {
  width: 40%;
}
@media (max-width: 1120px) {
  .receivables-main-bottom-section-heading-title-container {
    width: 70%;
  }
}
@media (max-width: 768px) {
  .receivables-main-bottom-section-heading-title-container {
    width: 100%;
  }
}
.receivables-carousel-second-item {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/receivables-phone.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
.receivables-carousel-third-item {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/receivables-background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
.receivables-column-icon > svg > path,
.receivables-column-icon > svg > g > path,
.receivables-column-icon > svg > defs > clipPath > rect {
  fill: var(--text-text-title);
}

.edit-member-image {
  border-radius: 50%;
  background-color: var(--border-color);
  cursor: pointer;
  width: 88px;
  height: 88px;
  border: solid 1px var(--line-color);
}
.image-container {
  display: flex;
  justify-content: center;
  position: relative;
}
#input-label:hover {
  color: var(--action-or-selection-color);
  cursor: pointer;
}
.dropdown-user-content-edit-profile-link {
  color: var(--text-color);
}
.language-action {
  border: solid 1px var(--action-or-selection-color) !important;
}
.member-name-input {
  background-color: var(--view-background-color);
  padding: 8px 8px 8px 12px;
  border: solid 1px #dcdbde;
  height: 40px;
  font-family: 'Pretendard';
  padding-right: 40px;
  font-weight: 400;
  line-height: 24px;
  font-size: 16px;
}
.edit-profile-modal-container {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
}
.edit-profile-disable-inputs-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: space-between;
  margin-top: 16px;
}
@media (max-width: 430px) {
  .edit-profile-disable-inputs-container {
    flex-direction: column;
  }
}
.edit-profile-disable-input-row {
  width: 48%;
}
@media (max-width: 430px) {
  .edit-profile-disable-input-row {
    width: 100%;
  }
}
.edit-profile-modal-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-top: 16px;
}
.edit-profile-input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: start;
  gap: 8px;
  align-self: stretch;
}
.edit-profile-input {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.edit-profile-modal-column {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  align-items: start;
}
.edit-profile-modal-image-container {
  position: relative;
}
.edit-profile-modal-image-container img {
  border-radius: 50%;
}
.edit-profile-modal-edit-icon {
  background-color: var(--action-or-selection-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 8px;
  left: 60px;
  cursor: pointer;
}
@media (max-width: 460px) {
  .edit-profile-modal-edit-icon {
    bottom: 48px;
    left: 68px;
  }
}
.edit-profile-modal-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #000;
}
.edit-profile-modal-input {
  padding-right: 40px;
  font-weight: 400;
  line-height: 24px;
  font-size: 16px;
  border: 1px solid #dcdbde;
  border-radius: 8px;
  padding: 8px;
  width: 100%;
  color: #000;
}
.edit-profile-modal-button {
  align-self: end;
  width: fit-content;
}
.edit-profile-modal-info-box {
  background-color: var(--background-full-neutral-secondary);
  height: 24px;
  padding: 8px 12px;
  border-radius: 12px;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-profile-modal-alert-box {
  background-color: var(--background-full-neutral-secondary);
  border-radius: 16px;
  display: flex;
  flex-direction: row;
  padding: 16px;
  gap: 8px;
  align-items: stretch;
  margin-top: 16px;
}
.edit-profile-modal-alert-text {
  font-size: 14px;
  line-height: 20px;
  font-family: 'Pretendard-Thin';
  color: #99999b;
}
.edit-profile-modal-language-container {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.edit-profile-modal-language-option {
  height: 48px;
  border-radius: 8px;
  border: solid 1px #dcdbde;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 16px;
  gap: 8px;
  cursor: pointer;
}
.edit-profile-modal-language-label {
  font-size: 14px;
  line-height: 20px;
}
.edit-profile-info-icon-container {
  width: 16px;
  height: 16px;
}
.edit-profile-info-icon-container > svg > g > path {
  fill: var(--action-or-selection-color);
}
.edit-profile-separator {
  margin-top: 0px;
  margin-bottom: 24px;
}
.edit-profile-button-container {
  display: flex;
  padding: 0px 24px 24px 24px;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}
.edit-profile-language-options-container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 8px;
}

.pix-consult-sidebar-inputs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--space-xl);
}
.pix-mobile-sidebar-consult-tags-container {
  display: flex;
  align-items: center;
  align-content: center;
  gap: 12px;
  align-self: stretch;
  flex-wrap: wrap;
}

.pix-consult-table {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 12px;
  table-layout: auto !important;
  transform: rotateX(180deg);
}
@media (max-width: 430px) {
  .pix-consult-table {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
.pix-consult-table td {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  border-bottom: solid 1px var(--line-color);
  padding-right: 16px;
}
@media (max-width: 430px) {
  .pix-consult-table td {
    padding-right: 0px;
  }
}
.pix-consult-table th {
  padding-right: 16px;
  padding-bottom: 13px;
  text-align: left;
  border-bottom: solid 1px var(--line-color);
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 200;
}
.pix-consult-container {
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  transform: rotateX(180deg);
  margin-block: 40px;
}
@media (max-width: 430px) {
  .pix-consult-container {
    margin-top: 0px;
    margin-block: 0px;
  }
}
.pix-consult-input-label {
  font-family: 'Pretendard-Thin';
  line-height: 20px;
  font-size: 14px;
  color: var(--text-color);
}
.pix-consult-outer-container {
  padding: 0 var(--space-15xl);
}
@media (max-width: 1255px) {
  .pix-consult-outer-container {
    padding: 0 var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .pix-consult-outer-container {
    padding: 0 var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .pix-consult-outer-container {
    padding: 0;
  }
}
.pix-consult-inputs-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
@media (max-width: 1100px) {
  .pix-consult-inputs-container {
    gap: 8px;
  }
}
.operation-select-container {
  width: 100%;
}
.status-select-container {
  width: 100%;
}
.pix-consult-fill-available {
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
}
.pix-consult-overlay-x {
  overflow-x: overlay;
}
@media (max-width: 430px) {
  .mobile-hidden {
    display: none;
  }
}
.mobile-show-table {
  display: none;
}
@media (max-width: 430px) {
  .mobile-show-table {
    display: table;
  }
}
.mobile-show-flex {
  display: none;
}
@media (max-width: 430px) {
  .mobile-show-flex {
    display: flex;
  }
}
.pix-consult-tags-container {
  display: flex;
  padding: 24px 0px 0px 0px;
  align-items: center;
  align-content: center;
  gap: 12px;
  align-self: stretch;
  flex-wrap: wrap;
}
@media (max-width: 430px) {
  .pix-consult-tags-container {
    padding: 0px 24px 16px 24px;
  }
}
.pix-consult-tag-view-container {
  display: flex;
  padding: var(--space-xs) var(--space-s);
  align-items: center;
  gap: var(--space-s);
  border-radius: var(--space-s);
  border: 1px solid var(--border-primary-default, #dcdbde);
  background: var(--background-full-neutral-secondary, #f9f9fc);
}
.pix-consult-tag-view-text {
  font-size: var(--text-s-regular-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--text-s-regular-line-height);
}
.pix-consult-tag-close-img {
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.pix-consult-tag-close-img > g > path {
  fill: var(--action-or-selection-color);
}
.pix-consult-mobile-operation-select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2xl) var(--space-xl) 32px var(--space-xl);
}
.pix-consult-mobile-operation-select-title {
  font-size: var(--heading-s-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--heading-s-line-height);
}
.pix-consult-bottom-sheet-container {
  width: calc(100% - 48px);
  border-radius: var(--radius-l) var(--radius-l) 0px 0px;
  background: var(--menu-background-color);
  position: absolute;
  bottom: 0px;
  display: flex;
  padding: var(--space-s) var(--space-xl) 0px var(--space-xl);
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.pix-consult-bottom-sheet-content-container {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.pix-consult-bottom-sheet-title {
  font-size: var(--heading-l-size);
  font-weight: 600;
  line-height: var(--heading-l-line-height);
}
.pix-consult-bottom-sheet-content-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  align-self: stretch;
}
.pix-consult-bottom-sheet-content-item {
  display: flex;
  padding: var(--space-l);
  align-items: center;
  gap: var(--space-s);
  align-self: stretch;
  cursor: pointer;
}
.pix-consult-id-mobile {
  white-space: nowrap;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pix-consult-filter-input-container {
  height: fit-content;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  flex-wrap: wrap;
  cursor: text;
  max-height: 140px;
  overflow: hidden;
  overflow: auto;
}
.pix-consult-form-container {
  display: flex;
  justify-content: space-between;
  margin: 24px 0px;
}
@media (max-width: 430px) {
  .pix-consult-form-container {
    flex-direction: column;
    gap: 24px;
  }
}
.pix-consult-form {
  width: 48%;
}
@media (max-width: 430px) {
  .pix-consult-form {
    width: 100%;
  }
}
.pix-consult-form label {
  margin-bottom: 4px;
  display: block;
  font-size: 0.75rem;
  color: var(--text-color);
}
.pix-consult-form select {
  min-height: 44px;
  margin-top: 5px;
}

.pix-main-top-section {
  display: flex;
  justify-content: center;
  padding: var(--space-6xl) var(--space-15xl) var(--space-15xl) var(--space-15xl);
  align-items: flex-start;
  gap: var(--space-3xl);
  align-self: stretch;
}
@media (max-width: 1255px) {
  .pix-main-top-section {
    padding: var(--space-6xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .pix-main-top-section {
    padding: var(--space-6xl) var(--space-3xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .pix-main-top-section {
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  }
}
.pix-main-top-section > .carousel {
  width: fit-content;
}
.pix-main-top-section-card {
  display: flex;
  width: calc(100% / 3);
  padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) var(--space-2xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  align-self: stretch;
  border-radius: var(--radius-l);
  background: var(--background-full-neutral-secondary);
  scroll-behavior: smooth;
  scroll-snap-align: start;
}
@media (max-width: 1300px) {
  .pix-main-top-section-card {
    min-width: 270px;
  }
}
@media (max-width: 430px) {
  .pix-main-top-section-card {
    min-width: 168px;
  }
}
.pix-main-bottom-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: var(--background-full-neutral-secondary);
}
@media (max-width: 1255px) {
  .pix-main-bottom-section {
    padding: var(--space-15xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .pix-main-bottom-section {
    padding: var(--space-15xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .pix-main-bottom-section {
    padding: 32px 24px 40px 24px;
  }
}
.pix-main-bottom-section-card {
  display: flex;
  padding: var(--space-15xl) 100px var(--space-15xl) 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-2xl);
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  border-radius: var(--space-2xl);
  background-image: linear-gradient(270deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/pix-banner.png);
  background-size: cover;
  background-position: center;
}
@media (max-width: 800px) {
  .pix-main-bottom-section-card {
    padding-top: 220px;
    align-items: center;
    background-position: left;
    padding: var(--space-15xl) var(--space-2xl);
    padding-top: calc(var(var(--space-15xl)) * 2);
    background-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/pix-banner.png);
  }
}
.pix-main-bottom-section-card-text {
  display: flex;
  width: 405px;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
@media (max-width: 800px) {
  .pix-main-bottom-section-card-text {
    width: 100%;
  }
}
.pix-main-last-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .pix-main-last-section {
    padding: var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .pix-main-last-section {
    padding: var(--space-3xl);
  }
}
.pix-main-bottom-content {
  display: flex;
  height: 672px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5xl);
  align-self: stretch;
}
.pix-main-last-content-heading-container {
  width: 50%;
}
@media (max-width: 1660px) {
  .pix-main-last-content-heading-container {
    width: 60%;
  }
}
@media (max-width: 950px) {
  .pix-main-last-content-heading-container {
    width: 100%;
  }
}
.pix-main-last-section-card {
  display: flex;
  padding: var(--space-2xl) var(--space-6xl);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-4xl);
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  border-radius: var(--space-2xl);
  background: var(--background-full-neutral-secondary);
}
@media (max-width: 950px) {
  .pix-main-last-section-card {
    padding: var(--space-2xl) var(--space-xl);
  }
}
@media (max-width: 765px) {
  .pix-main-last-section-card {
    flex-direction: column-reverse;
  }
}
.pix-main-last-section-card-image {
  width: 50%;
}
@media (max-width: 765px) {
  .pix-main-last-section-card-image {
    width: 100%;
  }
}
.pix-main-last-section-card-image > img {
  width: 100%;
}
@media (max-width: 768px) {
  .pix-main-last-section-card-image > img {
    width: 80%;
  }
}
.pix-main-last-section-card-text-container {
  display: flex;
  width: 50%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xl);
}
@media (max-width: 765px) {
  .pix-main-last-section-card-text-container {
    width: 100%;
  }
}
.pix-main-last-section-card-text-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  align-self: stretch;
}
.pix-main-last-section-card-image-responsive {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 765px) {
  .pix-main-last-section-card-image-responsive {
    display: none;
  }
}
.pix-main-last-section-card-image-responsive img {
  width: 60%;
}
.pix-main-top-section-card > svg > * {
  fill: var(--text-text-title);
}

.issuing-carousel-container {
  display: flex;
  justify-content: center;
}
.issuing-top-section {
  display: flex;
  padding: 0px var(--space-15xl) var(--space-8xl) var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .issuing-top-section {
    padding: 0px var(--space-8xl) var(--space-8xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .issuing-top-section {
    padding: 0px var(--space-3xl) var(--space-8xl) var(--space-3xl);
  }
}
.issuing-top-content {
  display: flex;
  padding-top: var(--space-6xl);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5xl);
  align-self: stretch;
}
.issuing-top-section-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  align-self: stretch;
}
.issuing-main-top-section-carousel-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.issuing-main-top-section-carousel-container > .carousel {
  width: fit-content;
}
.issuing-bottom-section {
  display: flex;
  padding: var(--space-15xl) 0px;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8xl);
  align-self: stretch;
  background: var(--background-full-neutral-secondary);
}
@media (max-width: 1255px) {
  .issuing-bottom-section {
    padding: var(--space-15xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .issuing-bottom-section {
    padding: var(--space-15xl) var(--space-3xl);
  }
}
.issuing-bottom-section-column {
  display: flex;
  padding: 0px var(--space-15xl);
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-7xl);
  align-self: stretch;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: transparent transparent;
}
@media (max-width: 1500px) {
  .issuing-bottom-section-column {
    justify-content: start;
    gap: var(--space-2xl);
  }
}
.issuing-bottom-section-column::-webkit-scrollbar {
  display: none;
}
.issuing-bottom-section-column::-webkit-scrollbar-thumb {
  display: none;
}
.issuing-bottom-section-column::-webkit-scrollbar-track {
  display: none;
}
.issuing-column-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5xl);
  flex: 1 0 0;
  scroll-behavior: smooth;
  scroll-snap-align: center;
}
.issuing-column-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-l);
  align-self: stretch;
  white-space: nowrap;
}
.issuing-column-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.issuing-main-bottom-section-heading-title-container {
  width: 40%;
}
@media (max-width: 1120px) {
  .issuing-main-bottom-section-heading-title-container {
    width: 70%;
  }
}
@media (max-width: 768px) {
  .issuing-main-bottom-section-heading-title-container {
    width: 100%;
  }
}
.issuing-main-bottom-section {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (max-width: 1255px) {
  .issuing-main-bottom-section {
    padding: var(--space-15xl) var(--space-8xl);
  }
}
@media (max-width: 870px) {
  .issuing-main-bottom-section {
    padding: var(--space-15xl) var(--space-3xl);
  }
}
@media (max-width: 430px) {
  .issuing-main-bottom-section {
    padding: 32px 24px 40px 24px;
  }
}
.issuing-main-bottom-section-card {
  display: flex;
  padding: var(--space-15xl);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2xl);
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  border-radius: var(--space-2xl);
  background-image: linear-gradient(90deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/infra-card-banner.png);
  background-size: cover;
  background-position: center;
}
@media (max-width: 800px) {
  .issuing-main-bottom-section-card {
    padding: var(--space-2xl);
    padding-top: 220px;
    align-items: center;
    background-position: center;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0.2%, rgba(0,0,0,0) 99.8%), url(./images/infra-card-banner.png);
  }
}
.issuing-main-bottom-section-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.issuing-carousel-second-item > .carousel-image-container {
  width: 80% !important;
}
.issuing-carousel-second-item {
  background-color: var(--neutral-universe-default);
}

.campaign-dashboard-box-container {
  display: flex;
  padding: 32px 32px 24px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: var(--radius-l);
  background: var(--background-full-neutral-secondary);
}
.campaign-dashboard-box-row {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.campaign-dashboard-box-image-container {
  width: 72px;
  height: 72px;
}
.campaign-dashboard-box-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}
.campaign-dashboard-chart-box-container {
  display: flex;
  padding-left: 88px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  align-self: stretch;
}
.campaign-dashboard-chart-container {
  display: flex;
  height: 12px;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.campaign-dashboard-chart-caption-box-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.campaign-dashboard-chart-caption-container {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  white-space: nowrap;
  overflow: hidden;
}
.campaign-dashboard-chart-caption-color-indicator {
  width: 4px;
  height: 16px;
  border-radius: var(--space-s);
}
.campaign-dashboard-start-bar {
  height: 100%;
  border-radius: 4px 0px 0px 4px;
}
.campaign-dashboard-middle-bar {
  height: 100%;
}
.campaign-dashboard-full-bar {
  height: 100%;
  border-radius: 4px;
  width: 100%;
}
.campaign-dashboard-end-bar {
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 0px 4px 4px 0px;
}
.campaign-dashboard-bar-disable-color {
  background: var(--background-full-neutral-disabled);
}
.campaign-dashboard-bar-used-color {
  background: var(--folklore-medium);
}
.campaign-dashboard-product-one-color {
  background: var(--folklore-medium);
}
.campaign-dashboard-product-two-color {
  background: var(--ttpd-medium);
}
.campaign-dashboard-product-three-color {
  background: #29b6f6;
}
.campaign-dashboard-card-with-product {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.campaign-dashboard-products-container {
  display: flex;
  align-items: center;
  gap: 16px;
}
.campaign-dashboard-products-label-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.campaign-dashboard-show-products-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.campaign-dashboard-show-products-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1 0 0;
}
.campaign-dashboard-product-view-container {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: var(--radius-l);
  background: var(--background-full-neutral-tertiary);
  gap: 24px;
  flex: 1 0 0;
}
.campaign-dashboard-product-progress-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  align-self: stretch;
}
.campaign-dashboard-product-progress-bar-container {
  height: 8px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.campaign-dashboard-chart-captions-container {
  display: flex;
  align-items: center;
  gap: 24px;
}
.campaign-dashboard-product-image-container {
  width: 40px;
  height: 40px;
}
@media (max-width: 1255px) {
  #campaign-dashboard-container {
    padding: var(--space-8xl);
    padding-top: 0px;
  }
}
@media (max-width: 870px) {
  #campaign-dashboard-container {
    padding: var(--space-3xl);
    padding-top: 0px;
    gap: 0px;
  }
}
@media (max-width: 430px) {
  #campaign-dashboard-container {
    padding: var(--space-xl);
    padding-top: 0px;
  }
}
@media (max-width: 1255px) {
  .campaign-dashboard-show-products-row {
    display: grid;
    gap: 8px;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-show-products-row {
    display: grid;
    gap: 8px;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-box-text-container {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 4px;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-box-row {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 16px;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-chart-box-container {
    padding-left: 0px;
  }
}
@media (max-width: 1255px) {
  .campaign-dashboard-chart-captions-container {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-chart-captions-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
@media (max-width: 870px) {
  .goal-container {
    display: none;
  }
}
.campaign-dashboard-goal-animation {
  width: var(--space-15xl);
  height: var(--space-15xl);
}
@media (max-width: 870px) {
  .campaign-dashboard-goal-animation {
    width: var(--space-7xl);
    height: var(--space-7xl);
  }
}
.campaign-dashboard-goal-title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.campaign-dashboard-animation-container {
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  align-self: center;
}
@media (max-width: 1000px) {
  .campaign-dashboard-animation-container {
    gap: 24px;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-animation-container {
    gap: 8px;
  }
}
.campaign-dashboard-header-buttons-container {
  gap: 10px;
}
@media (max-width: 870px) {
  .campaign-dashboard-header-buttons-container {
    flex-direction: column;
  }
}
@media (max-width: 1255px) {
  #campaign-dashboard-products-second-row {
    margin-top: -16px;
  }
}
@media (max-width: 1255px) {
  .campaign-dashboard-products-container {
    align-self: center;
  }
}
.campaign-dashboard-products-icon > svg {
  width: 40px;
  height: 40px;
}
@media (max-width: 870px) {
  .campaign-dashboard-products-icon > svg {
    width: 64px;
    height: 64px;
  }
}
@media (max-width: 870px) {
  .campaign-dashboard-products-label-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
  }
}
@media (max-width: 870px) {
  #campaign-dashboard-title {
    padding-bottom: 32px;
  }
}
#campaign-dashboard-products-toggle-show-button {
  padding-left: 0px;
}
@media (max-width: 870px) {
  #campaign-dashboard-products-toggle-show-button {
    padding-left: 20px;
  }
}
.campaign-dashboard-chart-caption-goal-responsive-container {
  display: none;
}
@media (max-width: 870px) {
  .campaign-dashboard-chart-caption-goal-responsive-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-s);
  }
}
@media (max-width: 870px) {
  #campaign-dashboard-registration-button-container {
    width: 100%;
  }
}
.campaign-dashboard-goal-container {
  display: flex;
  padding: 56px 0px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: fit-content;
  margin: auto;
}
.campaign-dashboard-goal-message-width {
  width: 100%;
}
.campaign-dashboard-goal-message-container {
  display: flex;
  height: 140px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.campaign-dashboard-goal-message-text-field {
  flex: 1 0 0;
  align-self: stretch;
  resize: none;
  font-family: 'Pretendard';
}
.campaign-dashboard-goal-message-count-label {
  color: var(--text-text-tertiary);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}
.campaign-dashboard-confirm-modal-container {
  display: flex;
  padding: 32px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.campaign-dashboard-confirm-modal-footer-container {
  display: flex;
  padding: 32px 24px 24px 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}
.campaign-dashboard-modal-button {
  width: 124px;
}

.checkbox-mini {
  z-index: 10;
}
.checkbox-mini spam {
  position: absolute;
  margin: 1px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: background 200ms linear;
  -o-transition: background 200ms linear;
  transition: background 200ms linear;
}
.checkbox-mini svg {
  position: absolute;
  margin: 1px;
  display: none;
}
.checkbox-mini input {
  display: none;
}
.checkbox-mini spam:hover {
  border: 1px solid var(--action-or-selection-color);
}
.checkbox-mini input:checked ~ spam {
  border: none;
}
.checkbox-mini input:checked ~ svg {
  display: block;
  cursor: pointer;
}
#checkbox-mini {
  padding-bottom: 20px;
}

.update-data-banner-container {
  border-radius: 16px;
  border: 1px solid #efd2d2;
  background: #feeaea;
}
.update-data-banner-info-container {
  display: flex;
  flex-direction: row;
  gap: var(--space-m);
  width: 100%;
  align-items: center;
}
@media (max-width: 500px) {
  .update-data-banner-info-container {
    flex-direction: column;
  }
}
.update-data-banner-button {
  height: 20px;
}
@media (max-width: 500px) {
  .update-data-banner-button {
    width: 100%;
    margin-left: -32px;
  }
}

#reboarding-yes-representative-cell-name {
  width: 90%;
  padding-right: 10%;
}
.reboarding-yes-representative-cell {
  margin-bottom: 10px;
  border-radius: 12px;
  display: flex;
  cursor: default;
  border: 1px solid var(--border-color);
  padding: 12px 24px;
}
.reboarding-yes-representative-cell-delete-icon {
  cursor: pointer;
}
.reboarding-yes-representative-cell-delete-icon > path {
  fill: var(--title-color);
}


.qr-code-item {
  width: 200px;
  height: 200px;
  margin-left: 40px;
  border-radius: 8px;
  display: block;
}