@charset "utf-8";


/* 그리드 선택했을때 선택영역 css가 체크박스, 인풋등을 가로막는 현상 */
.tui-grid-layer-selection{visibility: hidden;}

/* 셀렉트 박스 뒤로 선택 요소의 텍스트가 빠져나오는 현상 */
.tui-grid-layer-editing-inner{font-size:0;}

/* select */
/*.tui-grid-container .input-select{box-sizing: border-box; width: calc(100% - 10px) !important; margin: auto !important; padding: 0 24px 0 8px !important;}*/
.tui-grid-container .input-select {box-sizing: border-box; width: calc(100% - 10px) !important;height: 28px;line-height: 28px !important;color: rgba(0, 0, 0, 0.78);padding: 0 24px 0 8px !important;background: url("/images/admin/icon_arrow_normal_2x.png") no-repeat right 8px center;background-size:10px 6px;background-color: #fff;border:1px solid #d4d4d4; background-color:#fff;border-radius: 4px;font-size: 12px;font-family: "Roboto", "Noto Sans KR", sans-serif !important;}
.tui-select-box-input, .tui-select-box-dropdown{border-color: #ddd !important; font-size: 12px !important; color: rgba(0, 0, 0, 0.78) !important;}
.tui-grid-container .tui-select-box-dropdown{max-height: none; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1) !important;}
.tui-select-box-input{height: 28px;line-height: 26px;color: rgba(0, 0, 0, 0.78);padding: 0 24px 0 8px !important;-moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none;background: url("/images/admin/icon_arrow_normal_2x.png") no-repeat right 8px center;background-size:10px 6px;background-color: #fff;border:1px solid #d4d4d4; background-color:#fff;border-radius: 4px;font-size: 12px;}
.tui-select-box-input p{font-size: 12px !important;}

.tui-select-box-item{font-size: 12px; line-height:24px; height:24px; color: rgba(0, 0, 0, 0.78) !important;}


/* toast ui*/

.tui-grid-container, .tui-grid-container p{font-family: "Roboto", "Noto Sans KR", sans-serif !important;}
.tui-grid-table{/*border-right: 1px solid #eee;*/border-bottom:1px solid #eee;}
.tui-grid-header-area{border-color: #eee !important;}
.tui-datepicker-input{width: 40%;border: none;}
.tui-datepicker-input > input{color: rgba(0, 0, 0, 0.78) !important;}
.tui-datepicker{border: 1px solid #d4d4d4;border-radius: 4px;overflow: hidden;z-index: 99;}
.tui-datepicker .tui-is-selectable.tui-is-selected, .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected{background-color: var(--theme-color);}
.tui-datepicker .tui-is-selectable:hover{background-color: #f0f0f0;}
.datepicker_right{position: relative;left: -100px;}
.tui-grid-cell-current-row .tui-grid-cell{background-color: #e5f6ff !important;}

.tui-grid-layer-focus-deactive .tui-grid-layer-focus-border, .tui-grid-layer-focus-deactive .tui-grid-layer-focus-border{background-color: #00a9ff !important; z-index: 16;}
.tui-grid-layer-focus-border{background-color: #00a9ff !important;}
.tui-timepicker{padding: 0;border: none;}
.tui-timepicker-body{display: inline-block;}
.timepicker-selectbox{display: inline-block;}
.tui-timepicker .tui-timepicker-select{line-height: inherit;border-radius: 4px;border: 1px solid #d4d4d4;}
.tui-select-box-input{height: 28px;border-radius: 4px;color: rgba(0, 0, 0, 0.78);font-size: 12px;}
.tui-select-box-placeholder{line-height: 26px;}
.tui-select-box-icon{width: 10px;background: url(/images/icon_arrow_normal.png) no-repeat center;}
.context_box{position: relative;}
.code-html{position: relative;display: inline-block;}
.floating-layer{left: initial !important;right: 0 !important;top: 10px !important;}
.tui-contextmenu{border-color: #d4d4d4;border-radius: 4px;}
.tui-contextmenu-separator{border-color: #d4d4d4}
.tui-select-box-dropdown{z-index: 999;}
.form_select{width: 32%;display: inline-block;}
.form_select select{width:100%;}
.tui-select-box-input{outline: none;}
.tui-select-box-input:focus{outline:none;}
.tui-grid-container input[type=checkbox]{display:block;margin:0 auto;}
.tui-grid-scrollbar-y-inner-border{background-color: transparent !important;}
.tui-grid-scrollbar-left-bottom{border-color:#ccc;}
.tui-grid-scrollbar-right-bottom{border-color:transparent !important; background-color: #fff !important;}
.tui-grid-scrollbar-right-top{border-color:transparent !important; background-color: transparent !important;}
.tui-grid-cell.tui-grid-cell-header{background-color:#F5F5F5 !important; color: rgba(0,0,0,.78) !important;}
.tui-grid-cell{background-color:#fff !important;border-right-width: 1px !important; color: rgba(0,0,0,.78) !important;}
.tui-grid-row-hover .tui-grid-cell{background-color: #f7f7f7;}
.modify-past td.tui-grid-cell{background-color:#fff1f1 !important;}
.modify-now td.tui-grid-cell{background-color:#e5f6ff !important;}
.new-add td.tui-grid-cell{background-color:#fdffe0 !important;}
.tui-grid-rside-area{width: auto !important;}
.tui-grid-cell .tui-grid-cell-content{padding:0 8px !important;overflow: visible; line-height: 1;}
.tui-grid-cell-content input[type=text], .tui-grid-cell-content input[type=password]{padding: 4px 7px;height: initial;}
.tui-grid-cell-content select{height: initial;line-height: inherit;padding: 1px 7px;}
.tui-grid-row-select td.tui-grid-cell{background-color:#e5f6ff !important;}
.tui-grid-layer-state{border-left: 1px solid #ccc;}
.tui-grid-summary-area{border-top: 1px solid #ddd !important;}
.tui-grid-summary-area .tui-grid-cell{padding:0 12px 0 12px; text-align:right; background-color: #E6F0F3 !important; color:rgba(0,0,0,.78);}
.tui-grid-summary-area-right-bottom{bottom:0px !important; height:0px !important;}
.tui-grid-summary-area .tui-grid-table{}
.tui-grid-border-line-top{border-color: #ccc !important;}
.tui-grid-border-line{}
.tui-grid-border-line-right, .tui-grid-border-line-left{background-color: #ccc !important;}
.tui-grid-content-area, .tui-grid-border-line-bottom{border-color: #ccc !important;}
.tui-grid-scrollbar-left-bottom{border-color: #ccc !important; background-color: #fff !important;}
.tui-grid-scrollbar-frozen-border{border-color: transparent !important;}
.tui-grid-scrollbar-frozen-border{background-color: #ccc !important;}
.tui-grid-cell-disabled input, .tui-grid-cell-disabled select{opacity: 1 !important;border: none !important;background: transparent !important;}

.tui-grid-container .input-select-disalbed{border: none;background: transparent;}

.grid-editor-diabled .tui-grid-editor-select-box-layer{display: none !important;}
.grid-editor-diabled .tui-grid-layer-editing{opacity: 0 !important;}
.grid-editor-diabled .tui-grid-layer-editing{background-color: #E6F0F3 !important;}
.grid-editor-diabled .tui-grid-layer-editing-inner{font-size: 12px;color: rgba(0, 0, 0, 0.78);}

.tui-grid-container .tui-input-disabled select, .tui-grid-container .tui-input-disabled input[type=text]{padding: 0 !important;border: none !important;background: transparent !important;cursor: default;}
.tui-grid-container .tui-input-disabled input[type=checkbox]{opacity: 0.3 !important;}
.tui-grid-container .tui-input-disabled{position: relative;}
.tui-grid-container .tui-input-disabled::after{display: block;content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


.tui-grid-cell-header.tui-grid-cell-header-required{}
.tui-grid-cell-header.tui-grid-cell-header-required::before{display:inline-block;content:'';width: 10px;height: 8px;margin-right: 4px;background: url(/images/admin/icon_required_2x.png) no-repeat 0 0;background-size: 10px 8px;}
.tui-grid-cell.tui-grid-cell-header.tui-grid-cell-header-mc{color: rgb(30, 93, 248) !important;}

.tui-grid-container .bold-font{font-weight: bold !important;}

.tui-grid-editor-select-box-layer{z-index: 9999 !important;}

.tui-grid-container .input-textarea{position: absolute;left: 0px;top: 9px;}
.tui-grid-layer-editing textarea{position: absolute;left: 0px;top: 6px;}

.tui-grid-container .tui-cell-click-pointer {text-decoration: underline;cursor: pointer;}
.tui-grid-container .tui-cell-pre-wrap {white-space: pre-wrap;}

/* tui pagenation */
.tui-pagination .tui-page-btn{font-size: 16px; font-weight: 700; color: rgba(0, 0, 0, 0.78); background-color: transparent; border:none; width:30px; height:42px; display:flex; align-items: center; justify-content: center; padding:0;}
.tui-pagination .tui-is-selected{color: #1E5DF8;}
.tui-pagination .tui-first-child.tui-is-selected{border-left: none;}
.tui-pagination .tui-last-child.tui-is-selected{border-right: none;}

.tui-grid-container .tui-grid-pagination{height: auto; display:flex; justify-content: center}
.tui-pagination a > span{width:100% !important;height:100% !important; display:block;}
.tui-pagination .tui-ico-ellip { width: 10px !important; height: 2px !important; vertical-align: top; margin-top: 0 !important; background-position: 0px -24px; }
.tui-pagination .tui-ico-next{background: url(/images/admin/icon_arrow_next_2x.png) no-repeat center / 7px 10px !important;}
.tui-pagination .tui-ico-prev{background: url(/images/admin/icon_arrow_prev_2x.png) no-repeat center / 7px 10px !important;}
.tui-pagination .tui-ico-last{background: url(/images/admin/icon_arrow_last_2x.png) no-repeat center / 13px 10px !important;}
.tui-pagination .tui-ico-first{background: url(/images/admin/icon_arrow_first_2x.png) no-repeat center / 13px 10px !important;}
.tui-pagination .tui-page-btn.tui-is-disabled{opacity: 0.3;}

.tui-pagination .tui-page-btn:hover, .tui-pagination .tui-is-selected:hover{background-color: transparent; border:none;}


/* 메뉴관리 그리드 */
.menu-mgnt-grid .input-select{border:none !important; background: none !important; font-size: 13px !important; }
.menu-mgnt-grid .new-editable .input-select{}




.tui-grid-container .input-checkbox-list{display: inline-block !important;vertical-align: middle;}
.tui-grid-container .input-checkbox-list + label{display: inline-block;margin: 0 10px 0 4px;vertical-align: middle;} 


.tui-grid-cell .tui-grid-cell-content br{display:none;}


.tui-grid-table .tui-grid-cell .tui-grid-cell-content { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: pre-line;}
.tui-grid-table .tui-grid-cell.tui-cell-line-clamp-2 .tui-grid-cell-content {-webkit-line-clamp: 2;}
.tui-grid-table .tui-grid-cell.tui-cell-line-clamp-3 .tui-grid-cell-content {-webkit-line-clamp: 3;}
.tui-grid-table .tui-grid-cell.tui-cell-line-clamp-4 .tui-grid-cell-content {-webkit-line-clamp: 4;}

.tui-grid-table .tui-grid-cell.tui-grid-cell-pre-line .tui-grid-cell-content {display: block; -webkit-line-clamp: unset;  -webkit-box-orient: initial; overflow: visible; text-overflow: clip; white-space: pre-line;}

/* date picker */
.board_grid .tui-grid-datepicker-input-container .tui-grid-date-icon {display: none;}
.board_grid .tui-grid-datepicker-input{text-align: center;}
.board_grid .tui-calendar .tui-calendar-header-inner {height: 30px;padding: 0.2em 0;}
.board_grid .tui-calendar-btn {top: 4px;width: 1.8em;height: 1.8em;}
.board_grid .tui-datepicker .tui-calendar-title {line-height: 1.8em;font-weight: bold;font-size: 13px;}
.board_grid .tui-calendar .tui-calendar-today {color: #1E5DF8;border: 1px solid #1E5DF8;background: #fff;}
.board_grid .tui-calendar .tui-calendar-header-info {display: none;}
.board_grid .tui-datepicker .tui-is-selectable.tui-is-selected, .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {background-color: #1E5DF8;border: 1px solid #1E5DF8;color: #fff;}
.board_grid .tui-datepicker .tui-is-selectable.tui-is-selected:hover{background-color: #1E5DF8;}
.board_grid .tui-calendar th, .tui-calendar td{height: 30px;}

.tui-grid-body-area .input-datepicker {text-align: center;}
.tui-grid-body-area .input-datepicker:disabled  {padding: 0;border: none;background: transparent;color: rgba(0, 0, 0, .78);font-size:12px;}



.tui-grid-cell.tui-fc-red {color: #e50a0a !important;}
.tui-disabled {background-color: #f4f4f4 !important;}


/* CSS: 컬러 피커 모양 설정 (필요에 따라 조절) */
 .tui-grid-custom-color-picker-renderer {
     display: flex;
     align-items: center;
     height: 100%;
 }

 .tui-grid-custom-color-picker-renderer input[type="color"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     width: 25px;
     
     /*height: 30px;*/
     background: none;
     border: 1px solid #ddd;
     padding: 0;
     cursor: pointer;
     margin-right: 10px; /* 텍스트와의 간격 */
 }
 
.tui-pagination { margin:8px 0 6px !important; } 
.tui-grid-container .input-select { font-size: 13px !important; }
.tui-grid-editor-select-box-layer { margin-top: -5px !important; }

/* disabled UI */
.tui-grid-cell-disabled textarea { color: #ddd !important; background: #F5F5F5 !important; }