.tui-grid-body-area,
.tui-grid-layer-state {
	background-color: #000C1780 !important;
}

.tui-grid-header-area,
.tui-grid-cell-header {
	background-color: #FFFFFF33 !important;
	border: none !important;
}

.tui-grid-cell {
	color: #fff !important;
	border: none !important;
	background-color: transparent !important;
}

.tui-grid-content-text {
	height: auto !important;
}

.tui-grid-cell-editable,
.tui-grid-cell-row-header {
	background-color: transparent !important;
}

.tui-grid-row-even {
	background-color: #FFFFFF1A !important;
}

/* 토스트 그리드 페이지네이션 */
.tui-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
}

.tui-grid-container .tui-grid-pagination {
	margin-top: 0 !important;
}

.tui-page-btn,
.tui-prev,
.tui-next {
  background-color: #FFFFFF1A;
  /*padding: 8px;*/
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  
  padding: 0px !important;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tui-page-btn:hover,
.tui-prev:hover,
.tui-next:hover {
  background-color: #007bff;
}

.tui-is-selected {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* 화살표 아이콘 스타일 */
.tui-ico-prev,
.tui-ico-next,
.tui-ico-first,
.tui-ico-last {
  display: none;
  padding: 8px
}

.tui-first,
.tui-last,
.tui-prev,
.tui-next {
  padding: 8px;
}

.tui-first::before {
  content: '';
  background: url("../assets/icon/page_first_icon.svg");
  display: block;
  width: 16px;
  height: 16px;
}

.tui-last::before {
  content: '';
  background: url("../assets/icon/page_last_icon.svg");
  display: block;
  width: 16px;
  height: 16px;
}

.tui-prev::before {
  content: '';
  background: url("../assets/icon/page_prev_icon.svg");
  display: block;
  width: 16px;
  height: 16px;
}

.tui-next::after {
  content: '';
  background: url("../assets/icon/page_next_icon.svg");
  display: block;
  width: 16px;
  height: 16px;
}

.tui-is-selected {
  font-weight: 600;
}

.tui-grid-scrollbar-y-inner-border {
	background-color: transparent !important;
}

.tui-grid-container ::-webkit-scrollbar {
	width: 8px !important;
}

.tui-grid-body-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 10px !important;
}

.tui-grid-body-area::-webkit-scrollbar-thumb,
.tui-grid-container ::-webkit-scrollbar-thumb {
  background-color: var(--color-primary) !important;
  border-radius: 10px !important;
  width: 8px !important;
  height: 8px !important;
  background-clip: unset !important
}

.tui-grid-body-area::-webkit-scrollbar-track {
	width: 8px !important;
	border-radius: 10px !important;
	background-color: #fff !important;
}

.tui-grid-container * {
	border: none !important;
}

.tui-grid-scrollbar-right-top {
	background-color: unset !important;
    border-color: unset !important;
}

.tui-grid-scrollbar-y-outer-border {
	background-color: unset !important;
}

/* Toast UI 입력창 */
.tui-grid-layer-editing {
	background-color: #0E1419 !important;
}

.tui-select-box-input,
.tui-select-box-item-group-label,
.tui-select-box-item {
	color: #fff !important;
}

.tui-select-box-icon {
	display: none !important;
}

.tui-select-box-input,
.tui-select-box-dropdown {
	background-color: #6B6B6B !important;
}

.tui-select-box-highlight,
.tui-select-box-selected {
	background: var(--color-primary) !important;
	position: relative;
}

.tui-select-box-selected::after {
	content: "";
	position: absolute;
	top: 6px;
    right: 16px;
	background: url(../assets/icon/checkbox_icon.svg) center center no-repeat;
    background-size: 16px 16px;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.tui-grid-cell-content input[type='text'],
.tui-grid-cell-content input[type='password'] {
	border: 1px solid var(--color-primary) !important;
}

.tui-grid-container p,
.tui-grid-container input,
.tui-grid-container textarea,
.tui-select-box-item {
	font-family: 'Pretendard', sans-serif !important;
	font-size: 16px !important;
}

/* Toast UI 데이트피커 */
.tui-datepicker {
	z-index: 99;
	border: none !important;
	border-radius: 24px;
	right: 8px;
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.20);
}

#tui-datepicker-start,
#tui-datepicker-end {
	margin-top: 0 !important;
}

.tui-datepicker-input {
	width: 100% !important;
    height: 36px !important;
    /*padding: 13px 12px !important;*/
    /*padding: 13px 36px 12px 13px !important;*/
    font-size: 16px !important;
    box-sizing: border-box;
    border: none !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #fff !important;
    position: relative;
}

.tui-calendar {
	background-color: transparent !important;
}

.tui-calendar .tui-calendar-header {
	border-bottom: none !important;
}

.tui-datepicker-input > input {
	font-size: 14px !important;
	font-family: 'Pretendard', sans-serif !important;
	/*border: 1px solid var(--color-grey-level-03) !important;*/
}

.tui-calendar .tui-calendar-header-inner {
	background-color: var(--color-primary) !important;
	border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.tui-calendar-btn {
	background-color: transparent !important
}

.tui-calendar .tui-calendar-title {
	color: #fff !important;
}

.tui-calendar
.tui-calendar-btn-prev-month:after,
.tui-calendar .tui-calendar-btn-prev-year:after
{
	background: url(../assets/icon/icon_calendar_arrow_left.svg) center center no-repeat !important;
	width: 32px !important;
    height: 32px !important;
    top: 10px !important;
    margin-top: 0 !important;
}

.tui-calendar .tui-calendar-btn-next-month:after,
.tui-calendar .tui-calendar-btn-next-year:after  {
	background: url(../assets/icon/icon_calendar_arrow_right.svg) center center no-repeat !important;
	width: 32px !important;
    height: 32px !important;
    top: 10px !important;
    margin-top: 0 !important;
}

.tui-calendar .tui-calendar-title-today {
	display: none !important;
}

.tui-calendar-body {
	background-color: var(--bg-color-white);
	border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.tui-calendar .tui-calendar-today {
	background-color: var(--color-primary) !important;
	border-radius: 50% !important;
	color: var(--text-color-white) !important;
}

.tui-calendar td {
	vertical-align: middle !important;
	color: var(--text-color-black) !important;
	background-color: transparent !important;
}

.tui-is-selectable.tui-is-selected {
	color: var(--text-color-white) !important;
	background-color: var(--color-primary) !important;
}

.tui-datepicker .tui-is-selectable:hover {
	color: var(--text-color-white) !important;
	background-color: var(--color-primary) !important;
}

td.tui-calendar-sun {
	color: red !important;
}

/*.tui-datepicker .tui-is-selectable:hover {
    background-color: var(--color-primary) !important;
	border-radius: 50% !important;
	color: #fff !important;
    cursor: pointer;
}*/

.tui-ico-date,
.tui-ico-time,
.tui-datepicker-dropdown .tui-ico-check,
.tui-ico-caret {
	background: url(../assets/icon/icon_calendar.svg) center center no-repeat !important;
}

.tui-ico-date {
	top: 8px !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
}

/* 토스트 그리드 셀 버튼 공통 스타일 - 2025.10.31 최현정. 임시 작성한 CSS이므로 수정 가능 */
.tur-grid-cell-btn {
	display: inline-block;
	padding: 4px 10px;
	/*font-size: 16px;*/
	color: #fff;
	background-color: var(--color-primary);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.tur-grid-cell-btn:hover {
	background-color: #1976d2;
}

.tur-grid-cell-btn:active {
	transform: scale(0.96);
}



.tui-timepicker {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.tui-timepicker-select {
	width: 100% !important;
}

.tui-timepicker .tui-timepicker-select {
	color: #000 !important;
}

.tui-timepicker .tui-timepicker-select option {
	color: #000 !important;
}

.tui-date-time {
	width: 105px !important;
	display: flex !important;
}

.tui-date-time .datepicker-input {
	position: absolute;
  /*left: -47px;*/
}

/*.tui-date-time .tui-ico-date {
	right: 51px !important;
}*/

.modal input[type='time'] {
	width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  font-family: 'Pretendard', sans-serif;
  font-size: var(--font-size-sm);
}