/* 기본 글꼴 Noto Sans KR — 설치된 PC 는 시스템 글꼴(굵기 전부), 없는 PC 는 앱에 든 파일로 대신(10-13). */
@font-face {
    font-family: 'mmx Noto Sans KR';
    src: url('/fonts/NotoSansKR-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --mm-menu-main-part-gap: 8px;
}

html, body {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif !important; /* 함께 실리는 부트스트랩 body 글꼴(-apple-system)이 CSS 순서에 따라 덮던 것(10-13) */
}
.tooltip, .popover, .mmx-error-message, .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .jsCalendar-nav-left, .jsCalendar-nav-right, input[id$='_line'] {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif !important;
}
html, body {
    width: 100%;
    height: 100%;
}

i {
    font-style: normal;
}

button {
    outline: none !important;
}

input {
	color:#444444;
	vertical-align: middle;
}

input[type="button"]
{
    outline: none !important;
}

.btn:focus {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.fi-padding {
	
}

.jqx-widget-light {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size:16px;
}
.jqx-widget-content-light {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size:14px;
}
.jqx-widget-header-light {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size:16px;
}

.jqx-widget-light, .jqx-widget-header-light, .jqx-fill-state-normal-light,
.jqx-widget-content-light, .jqx-fill-state-hover-light, .jqx-fill-state-pressed-light {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size:14px;
}

.jqx-rc-all-light {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.jqx-widget-header-light {
    background-image: linear-gradient(#72c0e9, #59a7cf);
    color: #fff;
}

.jqx-widget .jqx-grid-cell, .jqx-widget .jqx-grid-column-header, .jqx-widget .jqx-grid-group-cell {border-color: #A9B1C2;}

.jqx-widget-content-light {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size:14px;
    color: #000;
}

.jqx-grid-cell-selected-light,
.jqx-grid-selectionarea-light {
    color: #ffffff !important;
    background-color: linear-gradient(#19a9eb,#0090d1);
    *background-color: linear-gradient(#19a9eb,#0090d1);
    background-repeat: repeat-x;
    border-color: #A9B1C2 !important;
    background: linear-gradient(#19a9eb,#0090d1); /* Old browsers */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.jqx-fill-state-hover-light {
    border-color: #99d9f6;
    background: #99d9f6;
}

/* jqx-scrollbar-thumb */

.jqx-scrollbar-thumb {
    width: 14px;
}

.jqx-scrollbar-thumb-state-normal {
    border-color: #c0c0c0;
    background-color: #c0c0c0;
    border-radius: 18px;
    left: 1px !important;
    width: 12px !important;
}

.jqx-scrollbar-thumb-state-normal:hover {
    border-color: #A0A0A0;
    background-color: #A0A0A0;
}

.jqx-scrollbar-thumb-state-pressed {
    border-color: #808080 !important;
    background-color: #808080 !important;
}

.jqx-scrollbar-thumb-state-pressed:hover {
    border-color: #808080 !important;
    background-color: #808080 !important;
}

.jqx-scrollbar-thumb-horizontal {
    height: 14px;
}

.jqx-scrollbar-thumb-state-normal-horizontal {
    border-color: #c0c0c0;
    background-color: #c0c0c0;
    border-radius: 18px;
    top: 1px !important;
    height: 12px !important;
}

.jqx-scrollbar-thumb-state-normal-horizontal:hover {
    border-color: #A0A0A0;
    background-color: #A0A0A0;
}

.jqx-checkbox-check-checked {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2.5 8.5l3 3.5 7-9' fill='none' stroke='%2300a2ff' stroke-width='2'/%3E%3C/svg%3E") center center no-repeat;
}

.jqx-checkbox-check-indeterminate {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='3' y='3' width='8' height='8' fill='%2300a8ff'/%3E%3C/svg%3E");
}

.jqx-fill-state-normal {
    background: transparent;
}

/* 메뉴 - 컨테이너 */

.mmx-menu-container {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    font-size: 14px;
    display: flex;
    flex-flow: column;
    min-width: 954px;
    min-height: 584px;
}

.mmx-menu-popup-container {
	min-width: auto;
    min-height: auto;
}

/* 메뉴 - 타이틀 */

.mmx-menu-title-20250328 {
    background-image: linear-gradient(#e8e9ea,#909298);
    border: 1px solid #6c7c8d;
    border-bottom: 1px solid #060708;
    border-radius: 4px;
    height: 31px;   
    width: 100%;
    margin-bottom: 8px;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-title {
    background-image: linear-gradient(rgba(0,0,0,.10), rgba(255,255,255,.10), rgba(0,0,0,.10)), linear-gradient(var(--mmx-accent, #ee7038), var(--mmx-accent, #ee7038));
    border: 1px solid var(--mmx-accent, #ED6123);
    border-bottom: 1px solid var(--mmx-accent, #ED6123);
    border-radius: 4px;
    height: 30px;   
    width: 100%;
    margin-bottom: 8px;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-title-dev {
    background-image: linear-gradient(#00A6E4, #1bb3ed, #00A6E4);
    border: 1px solid #00A6E4;
    border-bottom: 1px solid #00A6E4;
    border-radius: 4px;
    height: 30px;   
    width: 100%;
    margin-bottom: 8px;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-title-visionhitech {
    background-image: linear-gradient(rgba(0,0,0,.10), rgba(255,255,255,.10), rgba(0,0,0,.10)), linear-gradient(var(--mmx-accent, #ee7038), var(--mmx-accent, #ee7038));
    border: 1px solid var(--mmx-accent, #ED6123);
    border-bottom: 1px solid var(--mmx-accent, #ED6123);
    border-radius: 4px;
    height: 30px;   
    width: 100%;
    margin-bottom: 8px;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-title-centricwave {
    background-image: linear-gradient(rgba(0,0,0,.10), rgba(255,255,255,.10), rgba(0,0,0,.10)), linear-gradient(var(--mmx-accent, #b8105e), var(--mmx-accent, #b8105e));
    border: 1px solid var(--mmx-accent, #b8105e);
    border-bottom: 1px solid var(--mmx-accent, #b8105e);
    border-radius: 4px;
    height: 30px;   
    width: 100%;
    margin-bottom: 8px;
    cursor: default;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-title-icon {
    width:17px;
    height:15px;
    margin-left:16px;
    margin-right:8px;
}

/*
.mmx-menu-title-icon:before {
    color: #ffffff;
    font-size: 15px;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f138";
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    vertical-align: middle;
}
*/

.mmx-menu-path-text-20250328 {
    display: none;
    color: #444;
    margin-left: 2px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 29px;
}

.mmx-menu-path-text {
    display: none;
    color: #efefef;
    margin-left: 2px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 29px;
}

.mmx-menu-title-text-20250328 {
    color: #212631;
    margin-left: 2px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 29px;
}

.mmx-menu-title-text {
    color: #efefef;
    margin-left: 2px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 29px;
}

.mmx-menu-title-message {
    display: none;
    color: #B5D2E8;
    margin-left: 8px;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
    line-height: 21px;
    padding-left: 29px;
    background-image:url('/images/icon-speaker.svg');
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: left center;
}

.mmx-menu-container-background {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    height: 38px;
}

@-webkit-keyframes MenuTitleAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes MenuTitleAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes MenuTitleAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes MenuTitleAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }
  12% {
    top: -2px;
    left: 2px;
  }
  25% {
    top: 0;
    left: 5px;
  }
  37% {
    top: 2px;
    left: 2px;
  }
  50% {
    top: 5px;
    left: 0;
  }
  62% {
    top: 2px;
    left: -2px;
  }
  75% {
    top: 0;
    left: -5px;
  }
  87% {
    top: -2px;
    left: -2px;
  }
  100% {
    top: -5px;
    left: 0;
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }
  12% {
    top: -2px;
    right: 2px;
  }
  25% {
    top: 0;
    right: 5px;
  }
  37% {
    top: 2px;
    right: 2px;
  }
  50% {
    top: 5px;
    right: 0;
  }
  62% {
    top: 2px;
    right: -2px;
  }
  75% {
    top: 0;
    right: -5px;
  }
  87% {
    top: -2px;
    right: -2px;
  }
  100% {
    top: -5px;
    right: 0;
  }
}

.mmx-menu-row-state {
    position: absolute;
    top: 4px;
    right: 28px;
    z-index: 10;
}

.mmx-menu-row-state > .mmx-menu-row-state-narrow {
    float: right;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    margin-left: 8px;
    color: #dddddd;
    cursor: pointer;
    font-size: 18px;
}

.mmx-menu-row-state > .mmx-menu-row-state-narrow:hover {
    color: #efefef;
}

.mmx-menu-row-state > .mmx-menu-row-state-narrow:active {
    color: #aaaaaa;
}

.mmx-menu-row-state > .mmx-menu-row-state-wide {
    float: right;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    margin-left: 8px;
    color: #dddddd;
    cursor: pointer;
    font-size: 18px;
}

.mmx-menu-row-state > .mmx-menu-row-state-wide:hover {
    color: #efefef;
}

.mmx-menu-row-state > .mmx-menu-row-state-wide:active {
    color: #aaaaaa;
}

.mmx-menu-row-state > .mmx-menu-external {
    float: right;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    color: #00A0E9;
    cursor: pointer;
    font-size: 22px;
}

.mmx-menu-row-state > .mmx-menu-external:hover {
    color: #32b3ed;
}

.mmx-menu-row-state > .mmx-menu-external:active {
    color: #0080ba;
}

.mmx-popup-external {
    position: absolute;
    left: 23px;
    top: 2px;
    width: 20px;
    height: 20px;
    color: #b1b1b1;
    cursor: pointer;
    font-size: 22px;
}

.mmx-popup-external:hover {
    color: #32b3ed;
}

.mmx-popup-external:active {
    color: #0080ba;
}

/* 메뉴 - 검색조건 */
.mmx-menu-search-condition-btn {
    height:25px;
    margin-top: -1px;
    vertical-align: middle;
    background: linear-gradient(#BFBFBF,#676B72);
    border: 1px solid #676B72;
    border-radius: 4px;
    padding: 1px 8px 2px 8px;
    color: #eee;
    font-size: 14px;
    transition: all .5s linear;
}

.mmx-menu-search-condition-btn:hover {
    background: linear-gradient(#c2c3c6,#85888e);
    color: #fff;
}

.mmx-menu-search-condition {
    display: none;
    width: 100%;
    /* 조건 카드 테마(4-3b): 회색 띠 대신 흰 카드 — 테두리 · 옅은 그림자로 본문과 구분한다 */
    border: 1px solid #dce4ee;
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 42, 77, 0.05);
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 8px;
    margin-bottom: var(--mm-menu-main-part-gap);
    border-radius: 8px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-search-condition:hover {
    /*border: 1px solid #2378B9;*/
}

.mmx-menu-search-condition-table {
    display: table;
    white-space: nowrap;
    border-spacing: 4px;
}

.mmx-menu-search-condition-row {
    /* 10-14 cond-align: 줄은 flex — 칸이 넘치면 칸째로 다음 줄로(칸 안에서 라벨 · 입력이 세로로 쌓이지 않게).
       칸 번호별 넓이는 mmx.form.alignConditions(mmx.util.js) 가 맞춘다. 여백은 옛 표 모양(왼쪽 8 + 칸 간격 4, 위아래 4)과 같게 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 4px;
    padding: 4px 4px 4px 12px;
    opacity: 0;
}

.mmx-menu-search-condition-table-more {
    display: table;
    position: absolute;
    top: 72px;
    right: 0px;
    left: 0px;
    background: #ffffff;
    border-left: 1px solid #dce4ee;
    border-right: 1px solid #dce4ee;
    border-bottom: 1px solid #dce4ee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    white-space: nowrap;
    border-spacing: 4px;
    width: 100%;
    z-index: 1;
}

.mmx-menu-search-condition-row-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 4px;
    padding: 4px 4px 4px 12px;
    opacity: 0;
}

.mmx-menu-search-condition-cell {
    display: block;
    flex: 0 0 auto;
}

/* 조건 줄 접기(10-14): 줄이 3개 이상이면 3번째 줄부터 접는다 — mmx.form.setupFoldConditions */
.mmx-menu-search-condition-table.mmx-cond-folded .mmx-cond-foldable {
    display: none !important;
}

.mmx-menu-search-condition-table.mmx-cond-has-fold {
    position: relative;
    width: 100%;   /* 단추가 조건 영역 오른쪽 끝에 오게 — 표는 원래 내용 너비만큼만 넓다 */
}

/* 접기 단추가 겹치는 자리 — 첫 줄 오른쪽을 비워 끝 칸을 가리지 않게 */
.mmx-menu-search-condition-table.mmx-cond-has-fold > .mmx-menu-search-condition-row:first-child {
    padding-right: 45px;
}

.mmx-condition-btn-fold {
    position: absolute;   /* 조건 영역 오른쪽 위 — 전표입력(FI0220) 조건 더보기 단추와 같은 자리 · 모양(10-15) */
    top: 4px;
    right: 12px;
    margin: 0;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #ffffff url('/images/btn_angle_down.svg') no-repeat center center;
    background-size: 21px 21px;
    cursor: pointer;
}

.mmx-condition-btn-fold:hover {
    background-color: #f6f6f6;
}

.mmx-condition-btn-fold.mmx-condition-btn-fold-up {
    background-image: url('/images/btn_angle_up.svg');
}

.mmx-condition-btn-fold.mmx-condition-btn-fold-mark {
    border-color: #2378B9;   /* 접힌 줄에 값 · 비어 있는 필수 칸이 있다 */
    box-shadow: 0 0 0 1px #2378B9;
}

.mmx-menu-search-condition-cell:before {
    content:'';
    float: left;
    height: 3px;
    width: 3px;
    background: #2378B9;
    vertical-align: middle;
    border-radius: 8px;
    position: relative;
    top: 11px;
    margin-right: 1px;
}

.mmx-menu-search-condition-cell-label {
    color: #4a5568;
    float: left;
    text-align: right;
    margin-right: 4px;
    /*
    margin-left: 38px;
    */
    line-height: 25px;
}

.mmx-menu-search-condition-cell-label-150 {
    color: #444;
    float: left;
    min-width: 150px;
    text-align: right;
    margin-right: 4px;
    line-height: 25px;
}

.mmx-menu-search-condition-cell-label-200 {
    color: #444;
    float: left;
    min-width: 200px;
    text-align: right;
    margin-right: 4px;
    line-height: 25px;
}

.mmx-menu-search-condition-cell-item {
    float: left;
    margin-right: 0px;
}

.mmx-menu-search-condition-cell-item-input {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    /*width: 100%;*/
}

select.mmx-menu-search-condition-cell-item-input {
    height: 25px;
    padding: 0 4px;
    background: #ffffff;
}

/* 개발관리 > 로그 상세 패널(사용자 10-19) */
.dv-log-detail-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; max-height: 42%; background: #1b212c; border-top: 1px solid #344057; color: #e3e6ea; }
.dv-log-detail-panel[hidden] { display: none; }
.dv-log-detail-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #2a3140; border-bottom: 1px solid #344057; font-size: 12px; }
.dv-log-detail-head b { flex: 1; font-weight: 600; }
.dv-log-detail-head button { border: 1px solid #4a5568; background: transparent; color: #c9ccd1; border-radius: 4px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; }
.dv-log-detail-head button:hover { background: #33405a; color: #fff; }
#logDetailText { margin: 0; padding: 10px 12px; overflow: auto; flex: 1 1 auto; font-family: Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: #e3e6ea; background: transparent; border: 0; }

.mmx-menu-search-condition-cell-item-input:focus {
    outline: none !important;
}

.mmx-menu-search-condition-cell-item-input::-moz-read-only { /* For Firefox */
    background: #FAFAFA;
}

.mmx-menu-search-condition-cell-item-input::read-only {
    background: #FAFAFA;
}

.mmx-menu-search-condition-cell-item-select {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding-left: 4px;
    width: 100%;
    height: 25px;
}

.mmx-menu-search-condition-cell-item-select:focus {
    outline: none !important;
}

.mmx-menu-search-condition .ui-datepicker-trigger {
    border-radius: 4px;
}

/* 메뉴 업무 버튼 */

.mmx-menu-biz-btn-container {
    text-align: right;
    margin-bottom: 8px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.mmx-menu-biz-btn {
    vertical-align: middle;
    background: linear-gradient(#BFBFBF,#676B72);
    border: 1px solid #676B72;
    border-radius: 4px;
    padding: 2px 8px 2px 8px;
    color: #eee;
    font-size: 14px;
}

.mmx-menu-biz-btn:hover {
    background: linear-gradient(#c2c3c6,#85888e);
    color: #fff;
}

/* 메뉴 - 메인 */

.mmx-menu-section {
    width: 100%;
    height: 100%;
}

/* 메뉴 - 메인 - 레이아웃 */

.mmx-menu-main {
    width: 100%;
    height: 100%;
}

.mmx-menu-main-h-part {
    float: left;
    height: 100%;
}

.mmx-menu-main-h-part-gap {
    margin-right: var(--mm-menu-main-part-gap);
}

.mmx-menu-main-v-part {
    width: 100%;
}

.mmx-menu-main-v-part-gap {
    margin-bottom: var(--mm-menu-main-part-gap);
}

/* 메뉴 - 탭바 */

.mmx-tabbar {
    margin-bottom: 8px;
}

.mmx-tabbar-with-biz-btns {
    float: left;
}

.mmx-tabbar-item {
    height: 33px;
    border: 1px solid #dce4ee;
    background: #f7fafd;
    color: #4a5568;
    padding: 0px 20px 0px 20px;
    border-radius: 0px;
    font-size: 14px;
    margin-right:0px;
}

.mmx-tabbar-item:hover:not(.active) {
    background-image: linear-gradient(#eef3f9,#dfe8f2);
    color: #1f3b5b;
}

.mmx-tabbar-item:first-child {
    margin-left:-0px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.mmx-tabbar-item:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.mmx-tabbar-item:not(:first-child ) {
    margin-left: -4px;
}

.mmx-tabbar-item.active {
    color: #fff;
    background: linear-gradient(var(--mmx-accent, #2378B9), var(--mmx-accent, #2378B9));
    border: 1px solid var(--mmx-accent, #2378B9);
}

.mmx-tabbar-item:focus {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* 메뉴 - 폼 */

.mmx-form-container {
    width: 100%;
    height: 100%;
    border: 1px solid #dce4ee;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 42, 77, 0.05);
    overflow: auto;
}

.mmx-form-container::-webkit-scrollbar {
    width: 6px;
    height:6px;
}

.mmx-form-container::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: 16px;
}

.mmx-form-container-hidden {
    display: none;
}

.mmx-form-container:hover:not(.mmx-form-container-noborder) {
    /*border: 1px solid #2378B9;*/
}

.mmx-form-container-noborder {
    border: none;
}

.mmx-form-container-nobackground {
    background: #ffffff;
}

.mmx-form-container-under-tabbar {
    height: calc(100% - 41px);
}

.mmx-form-subtitle {
    margin: 16px 8px 16px 8px;
}

.mmx-form-table {
    display: table;
    white-space: nowrap;
    border-spacing: 4px;
    margin-top: 8px;
    padding: 8px;
    width: 100%;
}

/* 칸 내용이 칸보다 넓어 옆 칸 위로 겹치는 폼(좁은 영역에 갇힌 폼 — 10-16 외주계약관리 차수 상세)에만 공통이 붙인다(mmx.ready.js fitOverflowForms).
   입력 묶음을 inline-block 으로 두어 라벨 + 입력이 함께 칸 넓이가 되고, 표는 내용보다 좁아지지 않는다 — 넘치면 감싼 영역이 스크롤 */
.mmx-form-table.mmx-form-table-fit {
    min-width: max-content;
}

.mmx-form-table.mmx-form-table-fit .mmx-form-cell-item {
    display: inline-block;
}

.mmx-form-row {
    display: table-row;
    height: 25px;
    padding-left: 8px;
    padding-right: 8px;
}

.mmx-form-cell {
    display: table-cell;
    vertical-align: middle;
}

.mmx-form-cell-label {
    color: #444;
    float: left;
    min-width: 60px;
    text-align: right;
    margin-right: 16px;
    line-height: 25px;
    width: 120px;
    overflow-x: hidden;
}

.mmx-form-cell-item {
    min-width: 185px;
    height: 25px;
}

.mmx-form-cell-item-full-width {
    display: grid;
}

.mmx-form-cell-item span {
    line-height: 25px;
    vertical-align: middle;
}

.mmx-form-cell-item-input {
    color: #444;
    border: 1px solid #cccccc;
    padding-left: 8px;
    padding-right: 8px;
    /*
    height: 25px;
    vertical-align: middle;
    */
}

.mmx-form-cell-item-input:disabled {
    color: #444;
    border: 1px solid #cccccc;
    padding-left: 8px;
    padding-right: 8px;
    height: 25px;
    vertical-align: middle;
    background: #FAFAFA;
}

.mmx-form-cell-item-input:focus {
    outline: none !important;
}

.mmx-input-invalidate {
    border: 1px solid #FD6467 !important;
}

.mmx-form-select {
    height: 25px;
}

.mmx-form-btn {
    height:25px;
    margin: 0px 4px 0px 4px;
    vertical-align: middle;
    background: linear-gradient(#BFBFBF,#676B72);
    border: 1px solid #676B72;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    color: #eee;
    font-size: 14px;
    line-height: 11px;
}

.mmx-form-btn:hover {
    background: linear-gradient(#c2c3c6,#85888e);
    color: #fff;
}

.mmx-form-btn-search {
    display:inline-block; 
    vertical-align: bottom;
    width:25px; 
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 0px;
    focus-color: none;
    background-image:url('/images/btn_search.svg');
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center center;
}

.mmx-form-btn-search:hover {
    background-color: #f6f6f6;
    focus-color: none;
}

.mmx-form-btn-search:disabled {
    background-color: #fafafa;
    focus-color: none;
}

.mmx-condition-btn-search {
    display:inline-block; 
    vertical-align: bottom;
    width:25px; 
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    focus-color: none;
    background-image:url('/images/btn_search.svg');
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center center;
}

.mmx-condition-btn-search:hover {
    background-color: #f6f6f6;
}

.mmx-condition-btn-search:disabled {
    background-color: #fafafa;
}

.mmx-condition-btn-apply {
    display:inline-block; 
    vertical-align: bottom;
    width:50px; 
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    focus-color: none;
}

.mmx-condition-btn-apply:hover {
    background-color: #f6f6f6;
}

.mmx-condition-btn-apply:disabled {
    background-color: #fafafa;
}

.mmx-condition-btn-more {
    position: absolute;
    right: 16px;
    top: 47px;
    text-align: center;
    width:25px; 
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px;
    focus-color: none;
    background-image:url('/images/btn_angle_down.svg');
    background-size: 21px 21px;
    background-repeat: no-repeat;
    background-position: center center;
}

.mmx-condition-btn-more:hover {
    background-color: #f6f6f6;
    focus-color: none;
}

.mmx-condition-btn-more:disabled {
    background-color: #fafafa;
}

/* 메뉴 - 그리드 */

#grid_line {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
}

.realgrid-editor-parent {
    box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px !important;
}

input[id^='grid'] {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    color:#303030 !important;
    line-height: 21px;
    padding-bottom: 2px !important;
}

.mmx-grid {
    width:100%;
    height:100%;
    border: 1px solid #cccccc;
    border-radius: 4px;
    /*padding: 1px;*/
    overflow:hidden;
}

.mmx-grid:hover {
    /*border: 1px solid #2378B9;*/
}

/* jquery.ui.layout */

.ui-layout-pane {
    border: none;
    padding: 0px;
    /*
    height: 100% !important;
    overflow-y:hidden;
    */
}

.ui-layout-resizer {
    background-color: #ffffff !important;
    z-index: 0 !important;
}

.ui-layout-resizer-open:after {
    content: "";
    text-align: center;
    position:absolute;
    width:100%;
    height:10px;
    line-height: 8px;
    color: #cccccc;
}

.ui-layout-resizer-open:hover:after {
    background-color: #efefef !important;
    height: 10px !important;
    border-width: 0px !important;
    margin-left: 1px !important;
    border-radius: 4px;
    width: 99.8% !important;
}

.ui-layout-resizer-dragging {
    background-color: #efefef !important;
    height: 10px !important;
    border-width: 0px !important;
    margin-left: 1px !important;
    border-radius: 4px;
    width: 99.8% !important;
}

.ui-layout-resizer-west-open {
}

.ui-layout-resizer-west-open:after {
    content: "";
    text-align: center;
    position: absolute; 
    width: 10px;
    height: 100%;
    top: 1px !important;
    line-height: 6px;
    color: #cccccc;
    margin-left: -3px;
    vertical-align: middle;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.ui-layout-resizer-west-open:hover:after {
    background-color: #efefef !important;
    height: 100% !important;
    border-width: 0px !important;
    margin-left: -2x !important;
    border-radius: 4px;
    width: 99.7% !important;
}

.ui-layout-resizer-west-dragging {
    background-color: #efefef !important;
    height: 99.7% !important;
    border-width: 0px !important;
    margin-top: 2px !important;
    border-radius: 4px;
    width: 9px !important;
}

.ui-layout-toggler-west {
    left: 1px !important;
    width: 6px !important;
}

.ui-layout-resizer-east-open {
}

.ui-layout-resizer-east-open:after {
    content: "";
    text-align: center;
    position: absolute; 
    width: 10px;
    height: 100%;
    top: 1px !important;
    line-height: 6px;
    color: #cccccc;
    margin-left: -3px;
    vertical-align: middle;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.ui-layout-resizer-east-open:hover:after {
    background-color: #efefef !important;
    height: 100% !important;
    border-width: 0px !important;
    margin-left: -2x !important;
    border-radius: 4px;
    width: 99.7% !important;
}

.ui-layout-resizer-east-dragging {
    background-color: #efefef !important;
    height: 99.7% !important;
    border-width: 0px !important;
    margin-top: 2px !important;
    border-radius: 4px;
    width: 9px !important;
}

.ui-layout-toggler-east {
    left: 1px !important;
    width: 6px !important;
}

.ui-layout-resizer > .ui-layout-toggler {
    /*display: none !important;*/
    pointer-events: none;
}

.ui-layout-resizer-hover > .ui-layout-toggler-hover {
    background-color: #ffffff;
    pointer-events: none;
}

.ui-layout-toggler-north, .ui-layout-toggler-south {
    background-image: url(/images/ui-layout-toggler-horizontal-handler.png);
    background-color: #ffffff;
    border: none;
    border-radius: 4px;
}

.ui-layout-toggler-east, .ui-layout-toggler-west {
    background-image: url(/images/ui-layout-toggler-vertical-handler.png);
    background-color: #ffffff;
    border: none;
    border-radius: 4px;
}

/* 토글스위치버튼 */

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  border-color: #6c7c8d;
}

.biz-btn-column-visible-mode {
    border: 1px sold #2378B9;
    border-radius: 4px;
    height: 27px;
}

.btn-default.off {
    background-color: #2378B9;
}

.toggle {
    border: 1px solid #6c7c8d;
    border-radius: 4px;
    margin-right: -1px;
    color: #444444;
}

.toggle:active {
    border: 1px solid #6c7c8d;
}

.toggle:last-child {
    border: 1px solid #676B72;
    border-radius: 4px;
    margin-right: 0px;
    color: #444444;
}

.toggle-on {
    font-size: 14px;
    color: #eee;
    background: linear-gradient(#BFBFBF,#676B72);
    padding-left: 0px !important;
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    cursor: pointer;
    margin-right: 0px;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    line-height: 22px !important;
    margin-left: -5px;
}

.toggle-on:active {
    background-color: #676B72 !important;
    border-color: #6c7c8d !important;
}

.toggle-on:hover {
    background: linear-gradient(#c2c3c6,#85888e);
    color: #fff;
}

.toggle-off {
    font-size: 14px;
    background: #d1d2d4;
    color: #363f45;
    padding-left: 0px !important;
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    cursor: pointer;
    margin-left: 0px;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    line-height: 22px !important;
    margin-left: 5px;
}

.toggle-off:hover {
    background: #b3b5b8;
    color: #f0f0f0;
}

.toggle-handle {
    background-color: #b3b5b8;
    margin-top: 0px !important;
    margin-left: 0px !important;
    width: 20px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    height: 100%;
    vertical-align: baseline !important;
    border: 1px solid #26292e5c;
}

.mmx-menu-biz-btn-container .toggle-on {
    background: linear-gradient(#BFBFBF,#676B72);
    line-height: 25px !important;
}

.mmx-menu-biz-btn-container .toggle-on:hover {
    background: linear-gradient(#c2c3c6,#85888e);
    color: #fff;    
}

.mmx-menu-biz-btn-container .toggle-off {
    line-height: 25px !important;
    background: #d1d2d4;
    color: #363f45;
} 

.mmx-menu-biz-btn-container .toggle-off:hover {
    background: #b3b5b8;
    color: #f0f0f0;
} 

.mmx-menu-biz-btn-container .toggle-handle {
    height: 25px;
    /*margin-top: -1px !important;*/
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #cccccc;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #cccccc;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #cccccc;
}

.mmx-code-help {
    position:fixed;
    background:#ffffff;
    border: 1px solid #2378B9;
    padding: 0px;
    color:#444;
    font-size:14px;
    list-style-type: none;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 0 2px #2378b9;
}

.mmx-code-help-item {
    padding: 1px 4px 5px 4px;
    margin:0px;
    line-height: normal;
    cursor: pointer;
}

.mmx-code-help-item:hover {
    color:#ffffff;
    background:#518DBA99;
}

.mmx-code-help-item.active {
    background:#2378B9;
    color:#ffffff;
    box-shadow: 0 0 2px #2378b9;
}

/* jquery ui calendar */

.ui-datepicker-trigger  {
    display:inline-block; 
    vertical-align: bottom;
    width:25px; 
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 0px;
    focus-color: none;
    background-image:url('/images/btn_search.svg');
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    margin-left: 4px;
    opacity: 1 !important;
}

.ui-datepicker-trigger:hover {
    background-color: #f6f6f6;
    opacity: 1 !important;
}

.ui-datepicker-trigger.disabled {
    background-color: #fafafa;
    opacity: 1 !important;
}

.ui-datepicker-header {
    background:#666666;
    color:#ffffff;
}

.ui-datepicker-prev {
    background: linear-gradient(#666666, #666666);
    border: 1px solid #474747;
    border-radius: 4px;
    color: #B5D2E8;
    cursor: pointer;
}

.ui-datepicker-prev:hover {
    background: linear-gradient(#767980, #767980);
    color: #fff;
}

.ui-datepicker-next {
    background: linear-gradient(#666666, #666666);
    border: 1px solid #474747;
    border-radius: 4px;
    color: #B5D2E8;
    cursor: pointer;
}

.ui-datepicker-next:hover {
    background: linear-gradient(#767980, #767980);
    color: #fff;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 4px;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size: 14px;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 40%;
    margin-right: 2px;
    text-align-last: center;
}

.ui-state-highlight {
    background: #00A0E9 !important;
    border: 1px solid #CCCCCC !important;
    color: #fff !important;
}

.ui-state-active {
    background: #2378B9 !important;
    border: 1px solid #2378B9 !important;
    color: #fff !important;
}

.ui-state-default {
    background: #FAFAFA;
    border: 1px solid #CCCCCC;
}

.ui-datepicker-year {
    background: #666666;
    color: #ffffff;
    border: 1px solid #474747;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    height:28px;
    cursor: pointer;
}

.ui-datepicker-month {
    background: #666666;
    color: #ffffff;
    border: 1px solid #474747;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    height:28px;
    margin-left: 8px !important;
    cursor: pointer;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

/* MultiSelecct */

.mmx-input-type-multiselect {
    text-indent: 7px;
}

.mmx-btn-multiselect-left {
    display: inline-block;
    position: relative;
    left: 2px;
    top: 2px;
    width: 15px;
    height: 21px;
    color: #cccccc;
    cursor: pointer;
    padding: 3px 2px 1px 2px;
    border: 1px solid transparent;
    margin-right: -15px;
    opacity: 0.6;
}

.mmx-btn-multiselect-left:hover {
    color: #a1a1a1;
    background-color: #f6f6f6;
    border: 1px solid #efefef;
    border-radius: 3px;
    opacity: 1;
}

.mmx-btn-multiselect-right {
    display: inline-block;
    position: relative;
    right: 38px;
    top: 2px;
    width: 15px;
    height: 21px;
    color: #cccccc;
    cursor: pointer;
    padding: 3px 2px 1px 2px;
    border: 1px solid transparent;
    opacity: 0.6;
}

.mmx-btn-multiselect-right:hover {
    color: #a1a1a1;
    background-color: #f6f6f6;
    border: 1px solid #efefef;
    border-radius: 3px;
    opacity: 1;
}

.mmx-btn-multiselect-dropdown {
    position: relative;
    top: 1px;
    right: 54px;
    color: #cccccc;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px 2px 4px;
    border: 1px solid #efefef;
    background: #ffffff;
    border-radius: 3px;
    margin-right: -17.5px;
}

.mmx-btn-multiselect-dropdown:hover {
    color: #a1a1a1;
    background-color: #f6f6f6;
}

.mmx-input-type-multiselect ~ button {
    margin-left: -15px;
}

.mmx-multiselect {
    /*display: none;*/
    position:fixed;
    background:#ffffff;
    border: 2px solid #2378B9;
    /*border: 1px solid #cccccc;*/
    border-radius: 0px;
    color:#444;
    font-size:14px;
    list-style-type: none;
    z-index: 999999999;
    padding: 1px;
    overflow-y: auto;
}

.mmx-multiselect-item {
    padding:2px 4px 2px 4px;
    margin:0px;
    line-height: normal;
    cursor: pointer;
    border-radius: 4px;
    font-size:14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
}

.mmx-multiselect-item:hover {
    background:#DAEDFA;
}

.mmx-multiselect-item.active {
    background:#2378B9;
    color:#ffffff;
}

.mmx-multiselect-trade-closer {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.000000000000001;
}

/* AutoComplete */
.mmx-autocomplete {
    display: none;
    position:fixed;
    background:#ffffff;
    border: 2px solid #2378B9;
    border-radius: 4px;
    color:#444;
    font-size:14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    list-style-type: none;
    z-index: 999999999;
    padding: 1px;
    overflow-y: auto;
}

.mmx-autocomplete::-webkit-scrollbar {
    width: 6px;
    height:6px;
}

.mmx-autocomplete::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: 16px;
}

.mmx-autocomplete-item {
    padding:2px 4px 2px 4px;
    margin:0px;
    line-height: normal;
    cursor: pointer;
    font-size:14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
}

.mmx-autocomplete-item:hover {
    background:#DAEDFA;
}

.mmx-autocomplete-item.active {
    background:#2378B9;
    color:#ffffff;
}

.mmx-autocomplete-item-code {
    font-size: 14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    color: #9e9e9e;
}

.mmx-autocomplete-item-matched {
    font-size:14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    color: #2e2e2e;
}

.mmx-autocomplete-item-seprator {
    font-size: 14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    color: #6e6e6e;
    padding: 0px 2px 0px 2px;
}

.mmx-autocomplete-item-name {
    font-size: 14px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    color: #9e9e9e;
}

.mmx-autocomplete-item.active .mmx-autocomplete-item-code {
    color: #cecece;
}

.mmx-autocomplete-item.active .mmx-autocomplete-item-matched,
.mmx-autocomplete-item.active .mmx-autocomplete-item-seprator,
.mmx-autocomplete-item.active .mmx-autocomplete-item-name {
    color: #ffffff;
}

/* Data Grid AutoComplete */

.mmx-grid-autocomplete {
    display: none;
    position:fixed;
    background:#ffffff;
    border: 2px solid #5292F7;
    color:#444;
    font-size:14px;
    list-style-type: none;
    z-index: 999999999;
    padding: 1px;
    overflow-y: auto;
}

.mmx-grid-autocomplete-item {
    padding:2px 4px 2px 4px;
    margin:0px;
    line-height: normal;
    cursor: pointer;
}

.mmx-grid-autocomplete-item:hover {
    background:#DAEDFA;
}

.mmx-grid-autocomplete-item.active {
    background:#2378B9;
    color:#ffffff;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.mmx-grid-autocomplete-item-code {
    color: #9e9e9e;
}

.mmx-grid-autocomplete-item-matched {
    color: #2e2e2e;
}

.mmx-grid-autocomplete-item-seprator {
    color: #6e6e6e;
    padding: 0px 2px 0px 2px;
}

.mmx-grid-autocomplete-item-name {
    color: #9e9e9e;
}

.mmx-grid-autocomplete-item.active .mmx-grid-autocomplete-item-code {
    color: #cecece;
}

.mmx-grid-autocomplete-item.active .mmx-grid-autocomplete-item-matched,
.mmx-grid-autocomplete-item.active .mmx-grid-autocomplete-item-seprator,
.mmx-grid-autocomplete-item.active .mmx-grid-autocomplete-item-name {
    color: #ffffff;
}

.mmx-btn-common {
    vertical-align: middle;
    margin-top: 7px;
    margin-left: 4px;
    margin-right: 4px;
    background: linear-gradient(rgba(255,255,255,.14), rgba(0,0,0,.20)), linear-gradient(var(--mmx-accent, #8c8f93), var(--mmx-accent, #8c8f93));
    border: 1px solid var(--mmx-accent, #676B72);
    border-radius: 6px;
    padding: 4px 10px 3px 10px;
    color: #ffffff;
    font-size: 14px;
    box-shadow: 1px 1px 12px 1px rgb(64 70 75 / 30%);
}

.mmx-btn-common:hover {
    background: linear-gradient(rgba(255,255,255,.26), rgba(0,0,0,.08)), linear-gradient(var(--mmx-accent, #bdbfc1), var(--mmx-accent, #bdbfc1));
    color: #fff;
}

.mmx-btn-common:disabled, .mmx-btn-common[disabled] {
    background: linear-gradient(#cccccc, #dedede);
    color: #7e93a2;
}

/* 팝업 하단 버튼은 테마 강조색을 따르지 않는다(사용자 10-20) — 10-19 테마 적용 이전의 회색 모습 */
.mmx-btn-popup {
    background: linear-gradient(#8c8f93,#6c6f75,#7c7f84);
    border: 1px solid #676B72;
    color: #cccccc;
}

.mmx-btn-popup:hover {
    background: linear-gradient(#bdbfc1,#9d9fa3);
    color: #fff;
}

/* 커스텀 팝업 위쪽 「조회」 단추는 테마 강조색을 쓰지 않는다(사용자 10-20) — 아래 취소 · 확인과 같은 회색 계열 */
.popup-window-search-button {
    background: linear-gradient(#8c8f93,#6c6f75,#7c7f84);
    border: 1px solid #676B72;
    color: #ffffff;
}
.popup-window-search-button:hover {
    background: linear-gradient(#bdbfc1,#9d9fa3);
    color: #fff;
}

.mmx-btn-popup:focus {
    box-shadow: 0 0 3px 2px #00A0E9 !important;
}

/* popup */

.popup-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}

.popup-window-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
    opacity: 0.1;
}

.popup-window-container {
    background: #ffffff;
    border: 2px solid #3B3B3B;
    font-size: 14px;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);
    width: 460px;
    height: 360px;
    border-radius: 8px;
    overflow: hidden;
}

.mmx-menu-popup-container:has(+ .popup-window-buttons) {
    top: 8px;
    bottom: 52px;
}

.popup-window-title {
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
    padding-left: 50px;
    padding-right: 23px;
    font-size: 15px;
    background: #2378B9;
    color: #ffffff;
    border-bottom: 1px solid #3B3B3B;
    cursor: move;
}

.popup-window-title-icon {
    float: left;
    font-size: 22px;
    color: #94979c;
}

.popup-window-title-text {
    float:left;
    margin-left:8px;
    color: #fff;
}

.popup-window-close-button {
    float: right;
    height: 100%;
    width: 32px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}

.popup-window-close-button:hover {
    color: #efefef;
    border: 1px solid #a2bdd0;
}

.popup-window-close-button-icon {
    font-size: 24px;
}

.popup-window-condition {
    border: 1px solid #CCCCCC;
    background-color: #F1F1F1;
    padding: 0px;
    border-radius: 4px;
    margin: 8px;
}

.popup-window-condition:hover {
    /*border: 1px solid #2378B9;*/
}

.popup-window-condition-table {
    display: table;
    white-space: nowrap;
    border-spacing: 4px;
}

.popup-window-condition-row {
    display: block;
}

.popup-window-condition-cell {
    display: table-cell;
    vertical-align: middle;
}

.popup-window-condition-cell-label {
    color: #444;
    float: left;
    text-align: right;
    margin-right: 8px;
    margin-left: 8px;
    line-height: 25px;
}

.popup-window-condition-cell-item {
    float: left;
    margin-right: 8px;
}

.popup-window-condition-cell-item-input {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    width: 100%;
}

.popup-window-condition-cell-item-input:focus {
    outline: none !important;
}

.popup-window-search-button {
    position: absolute;
    right: 25px;
    top: 61px;
    margin: 0px;
    padding: 0px;
    height: 25px;
    padding-left: 8px;
    padding-right: 8px;
}

.popup-window-content {
    position: absolute;
    top: 103px;
    left: 0px;
    right: 0px;
    bottom: 44px;
    padding: 0px 8px 8px 8px;
}

.popup-window-grid {
    
}

.popup-window-buttons {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 44px;
    vertical-align: middle;
    text-align: center;
    background: #666666;
}

.popup-window-search-button {
    position: absolute;
    right: 25px;
    top: 61px;
    margin: 0px;
    padding: 0px;
    height: 25px;
    padding-left: 8px;
    padding-right: 8px;
}

.jqx-tree-item-arrow-expand ~ div > img {
    content:url('/images/tree-folder-open.png');
}

.ui-resizable-helper {
    border: 1px dotted #3B3B3B;
}

.tooltip-inner {
    color: #fff;
    background-color: #1D649B;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before {
    border-top-color: #1D649B !important;
}

.mmx-focus-shealter {
    position:absolute;
    top:0;
    left:0px;
    width:1px;
    height:0px;
    opacity: 0;
}

.mmx-focusable-button:focus {
    border: 1px solid #2378B9;
    background-color: #DAEDFA;
}

.mmx-input-type-currency::selection {
    background: #DAEDFAEE;
}
.mmx-input-type-currency::-moz-selection {
    background: #DAEDFAEE;
}

.mmx-input-required {
    background-color: white;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsEAAA7BAbiRa+0AAAAwSURBVBhXY/z//z8DMmAEcq2ANAgfYfj//wQTlMMDxDZAzAASOAbEX4D4CAMDAwMAsikLAaah3L4AAAAASUVORK5CYII=) !important;
    background-repeat: no-repeat  !important;
    background-position: right top  !important;
}

.mmx-input-type-date-from-to {
    display:inline-block; 
    vertical-align: bottom;
    width:25px; 
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    focus-color: none;
    background-image: url(/images/btn_tilde.svg);
    background-size: 13px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}

.mmx-input-type-date-from-to:hover {
    background-color: #f6f6f6;
}

.mmx-input-type-date-from-to:disabled {
    background-color: #fafafa;
}

.mmx-input-type-date-from-to-handler {
    display: none;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
}

.mmx-input-type-date-from-to-outer {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.00000001;
}

.mmx-input-type-date-from-to-ignore {
    position: absolute;
    background: #000000;
    opacity: 0.00000001;
    cursor: pointer;
}

.mmx-input-type-date-from-to-pointer {
    position: absolute;
    background-image: url('/images/mmx-input-type-date-from-to-ignore.png');
    background-repeat: no-repeat;
    width: 11px;
    height: 5px;
    z-index: 2;
}        

.mmx-input-type-date-from-to-container {
    position: absolute;
    background: #ffffff;
    float: left;
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    padding: 4px;
}

.mmx-input-type-date-from-to-btn {
    display:inline-block; 
    vertical-align: bottom;
    height:25px; 
    background:#ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    focus-color: none;
    background-size: 13px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    padding-left: 4px;
    padding-right: 4px;
}

.mmx-input-type-date-from-to-btn:hover {
    background-color: #f6f6f6;
}

.mmx-input-type-date-from-to-btn:disabled {
    background-color: #fafafa;
}

.mmx-input-type-date-from-to-btn-this-year
, .mmx-input-type-date-from-to-btn-this-month
, .mmx-input-type-date-from-to-btn-this-day
, .mmx-input-type-date-from-to-btn-quarter {
    font-size: 14px;
    color: #a1a1a1;
}

.mmx-input-type-date-from-to-btn-this-year
, .mmx-input-type-date-from-to-btn-this-month
, .mmx-input-type-date-from-to-btn-this-day {
    margin-right:4px;
    width: 37px;
}
.mmx-input-type-date-from-to-btn-this-month
, .mmx-input-type-date-from-to-btn-this-day {
    margin-top: 4px;
}

.mmx-input-type-date-from-to-btn-this-year-left
, .mmx-input-type-date-from-to-btn-this-month-left
, .mmx-input-type-date-from-to-btn-this-day-left {
    background-image: url(/images/btn_arrow_left.svg);
    padding-left: 10px;
    padding-right: 10px;
    margin-right:4px;
}

.mmx-input-type-date-from-to-btn-this-year-right
, .mmx-input-type-date-from-to-btn-this-month-right
, .mmx-input-type-date-from-to-btn-this-day-right {
    background-image: url(/images/btn_arrow_right.svg);
    padding-left: 10px;
    padding-right: 10px;
}

.mmx-input-type-date-from-to-btn-quarter {
    font-size: 13px;
    color: #a1a1a1;
}

.mmx-input-type-date-from-to-btn-quarter1
, .mmx-input-type-date-from-to-btn-quarter3 {
    margin-right:4px;
}

.mmx-input-type-code-icon {
    display: inline-flex;
    vertical-align: top;
    margin-top: 6px;
    margin-left: -7px;
    width: 5px;
    height: 13px;
    background-image: url(/images/icon-codehelp.png);
    background-repeat: no-repeat;
}

.ui-datepicker table {
    margin: 0px 0px 0.2em;
}

.ui-datepicker .ui-datepicker-buttonpane {
    margin: 0px;
}

.jqx-item-light, .itemicon {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */    
}

.mmx-menu-title-icon-tracer {
    position: absolute;
    width: 50px;
    height: 42px;
    top: -6px;
    background: transparent;
    pointer-events: none;
    z-index: 10;
}

.toast-top-right {
  top: 101px;
  right: 8px;
}

#toast-container>div {
  width: auto;
  border: 1px solid #6c7c8d;
}

.toast {
  max-width: none;
  box-shadow: none !important;
}

.toast-progress {
  height: 2px;
}

.context-menu-list {
    font-size: 14px;
    padding: 1px 2px 1px 2px;
    margin: 0px;
    border: 1px solid #2378B9;
    color:#444;
    min-width: 30px;
}

.context-menu-visible {
    background:#DAEDFA;
}

.context-menu-item {
    padding:2px 4px 2px 4px;
    margin:0px;
    line-height: normal;
    cursor: pointer;
}

.mmx-search-condition-ymdym {
    display: inline-block;
    margin-left:2px;
}

.mmx-search-condition-ymdym-ymd {
    display: inline-block;
}

.mmx-search-condition-ymdym-ym {
    display: inline-block;
}

.mmx-korean-help-tooltip {
    position: absolute;
    font-size: 14px;
    padding: 0px 5px 0px 0px;
    text-align: center;
    background: #EEF0EC;
    /*border: 1px solid #CDCFCA;*/
    border-radius: 4px;
    line-height: 14px;
    color: #444444;
    box-shadow: inset 0 0px 3px rgba(0,0,0,.225);
    z-index: 2;
}

/*  Ripple */
.ripple-container {
  position: fixed;
  overflow: hidden;
}
.ripple {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.ripple-effect {
    animation: ripple-drop .5s linear;
}

@keyframes ripple-drop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.mmx-init-focus {
    animation: anim-shadow .4s forwards;
}

@keyframes anim-shadow {
    99% {
        box-shadow: 0px 0px 16px 2px #2378B9;
        opacity: 0.9;
    }
}

.note-editor .card-block::-webkit-scrollbar {
    width: 6px;
    height:6px;
}

.note-editor .card-block::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border-radius: 16px;
}

.oDiv {
    height: 19.168px;
}

.mmx-datagrid-status-sum {
    position: absolute;
    padding: 8px 16px 8px 16px;
    background: linear-gradient(rgb(55,140,205),rgb(35,120,185));
    border: 1px solid #2378B9;
    border-radius: 12px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 1px 1px 5px rgb(0 0 0 / 50%);
}

.mmx-datagrid-status-sum-item-label {
    margin-left: 16px;
    color: #B5D2E8;
    padding: 4px 8px 4px 8px;
}

.mmx-datagrid-status-sum-item-value {
    margin-left: 2px;
    color: #ffffff;
}

.mmx-datagrid-sort-toast-message {
    position: absolute;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size: 14px;
    background-image: linear-gradient(rgb(55,140,205),rgb(35,120,185));
    color: #B5D2E8;
    border: 1px solid #08548e;
    border-radius: 4px;
    padding: 0px 8px;
}

.mmx-datagrid-sort-toast-message-icon {
    vertical-align: text-bottom;
    color: #B5D2E8;
}

.mmx-datagrid-filter-toast-message {
    position: absolute;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size: 14px;
    background-image: linear-gradient(rgb(55,140,205),rgb(35,120,185));
    color: #B5D2E8;
    border: 1px solid #08548e;
    border-radius: 4px;
    padding: 0px 8px;
}

.mmx-datagrid-filter-toast-message-icon {
    vertical-align: text-bottom;
    color: #B5D2E8;
}

/*                       */
/*    RealGrid Popup     */
/*                       */
.rg-popup-menu {
    background: #C0E4FC;
    border: 2px solid #2378B9;
    box-shadow: rgba(0, 0, 0, 0.8) 1px 2px 5px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 10pt;
    padding: 4px;
    margin: 0px;
}

.rg-popup-item {
    padding-top: 2px;
    padding-bottom: 2px;
    height: 20px;
    cursor: pointer;
}

.rg-popup-item:hover {
    background-color: #DAEDFA;
}

.rg-popup-separator-hr {
    height: 1px;
    border: 0px;
    margin: 2px;
    color: #777;
    background-color: #777;
}

.rg-popup-expander {
    background-image: url("/js/realgrid/assets/menu_expander.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.rg-popup-check {
    /*
    background-image:url("/js/realgrid/assets/menu_uncheck.png");
    background-repeat : no-repeat;
    background-position : center center;
    */
}

.rg-popup-check-checked {
    background-image: url("/js/realgrid/assets/menu_check.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.rg-popup-radio {
    /*
    background-image:url("/js/realgrid/assets/menu_unradio.png");
    background-repeat : no-repeat;
    background-position : center center;
    */
}

.rg-popup-radio-checked {
    background-image: url("/js/realgrid/assets/menu_radio.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.rg-popup-group1 {
    background: #ffd800;
}

/*                           */
/*      RealGrid Filter      */
/*                           */
.rg-filterselector {
    background: #C0E4FC;
    border: 2px solid #2378B9;
    box-shadow: rgba(0, 0, 0, 0.8) 1px 2px 5px;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    padding: 8px;
    margin: 0px;
}

.rg-filter-actions {
    
}

.rg-filter-action-item {
    
}

.rg-filter-action-item:hover {
    text-decoration: underline;
}

.rg-filter-action-check {
    
}

.rg-filter-action-label {
    
}

.rg-filter-all {
    color: #222222;
    background: #C0E4FC;
    height: 25px;
    margin-bottom: 8px;
    border: 1px solid #1D649B;
    border-radius: 4px;
    height: 26px;
}

.rg-filter-all-check {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 8px;
    line-height: 25px;
    margin-top: 2px;
    margin-left: 9px;
}

.rg-filter-all-label {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    margin-bottom: -4px;
    line-height: 25px;
    vertical-align: middle;
}

.rg-filter-all > hr {
    display: none;    
}

.rg-filter-items {
    background: #C0E4FC;
    border: 1px solid #1D649B;
    border-radius: 4px;
    padding: 2px 8px 4px 8px;
    margin-bottom: 4px;
    max-height: 292px;
}

.rg-filter-items::-webkit-scrollbar {
    width: 10px;
}
 
.rg-filter-items::-webkit-scrollbar-thumb {
    opracity : .4;
    background: #E1F5FE99;
    border-radius: 16px;
    width: 8px;
}

.rg-filter-items::-webkit-scrollbar-track {
    background: #1D649B;
    /*border-radius: 4px;*/
}

.rg-filter-item {
    color: #222222;
    background: #C0E4FC;
}

.rg-filter-item:hover {
    text-decoration: underline;
}

.rg-filter-item-check {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 8px;
    line-height: 25px;
    margin-top: 2px;    
}

.rg-filter-item-label {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    margin-bottom: -4px;
    line-height: 25px;
    vertical-align: middle;    
}

.rg-filter-search-input {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    background: rgb(255, 255, 255);
    border: 1px solid #2378B9;
    height: 25px;
}

.rg-filter-buttons {
    text-align: center;
    margin-bottom: 0px;
    height: 32px;
    max-height: 32px;
}

.rg-filter-accept, .rg-filter-cancel {
    vertical-align: middle;
    margin-top: 4px;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 0px;
    background: linear-gradient(#2378b9, #2378b9);
    border: 1px solid #08548e;
    border-radius: 6px;
    padding: 2px 8px 2px 8px;
    color: #B5D2E8;
    font-size: 14px;
    border: 1px solid #a2bdd0;    
}

.rg-filter-accept:hover {
    background: linear-gradient(#5496c9, #5496c9);
    color: #fff;
}

.rg-filter-cancel:hover {
    background: linear-gradient(#5496c9, #5496c9);
    color: #fff;
}

.mmx-datagrid-status-sum-copy {
    background: linear-gradient(#2671ab, #226498);
    border: 1px solid #1e5885;
    color: #ffffff;
}

.mmx-datagrid-status-sum-copy:hover {
    background: linear-gradient(#5496c9, #5496c9);
    color: #fff;
}

.mmx-grid-code-help {
    display: none;
    position:fixed;
    background:#C0E4FC;
    border: 2px solid #2378B9;
    color:#444;
    font-size:14px;
    list-style-type: none;
    z-index: 999999999;
    padding: 1px;
}

.mmx-grid-code-help-item {
    padding:2px 4px 2px 4px;
    margin:0px;
    line-height: normal;
    cursor: pointer;
}

.mmx-grid-code-help-item:hover {
    background:#DAEDFA;
}

.mmx-grid-code-help-item.active {
    background:#2378B9;
    color:#ffffff;
}


/* fullcalendar start */

.fc {
    box-shadow: none;
}

.fc .fc-button {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    box-shadow: none !important;
    outline: none !important;
}

.fc th, .fc td, .fc input, .fc select, .fc textarea, .fc-button {
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif;
    font-size: 14px;
}

.fc-day-sun {
    color: red;
}

.fc-day-sat {
    color: blue;
}

.fc-day-other {
    background: #F5F5F5;
}

.fc .fc-non-business {
    background: none;
}

.fc-daygrid-day-top {
    text-align: left;
}

.fc-daygrid-day-top {
    justify-content: start;
}

.fc .fc-button-group>.fc-button {
    height: 34px;
    background: #ffffff;
    color: #212529;
    border: 1px solid #286fa5 !important;
    height: 33px;
}

.fc .fc-button-group>.fc-button:hover:not(.active) {
    background-color:rgba(153, 217, 246, 0.3);
    color: #212529;
}

.fc .fc-button-group>.fc-button:active:not(.active) {
    background-color:rgba(153, 217, 246, 0.3);
    color: #212529;
}

.fc .fc-button-group>.fc-button.fc-button-active {
    background: linear-gradient(#4e93c7, #2378b9, #3885c0);
    color: #fff;
}

.fc .fc-button-group>.fc-button.fc-button-active:hover {
    background: linear-gradient(#4e93c7, #2378b9, #3885c0);
    color: #fff;
}

.fc .fc-button-group>.fc-button.fc-button-active:active {
    background: linear-gradient(#4e93c7, #2378b9, #3885c0);
    color: #fff;
}

.fc .fc-button .fc-icon {
    vertical-align: middle;
    line-height: 18px;
}

.fc-prev-button,.fc-next-button,.fc-today-button {
    background: linear-gradient(#4e93c7, #2378b9, #3885c0) !important;
    border: 1px solid #286fa5 !important;
    color: #B5D2E8 !important;
    height: 34px !important;
}

.fc-prev-button:hover,.fc-next-button:hover {
    background: linear-gradient(#76abd3, #5496c9, #65a0ce) !important;
    color: #fff !important;
}

.fc .fc-toolbar-title {
    border: 1px solid #286fa5 !important;
    border-radius: 4px;
    color: #fff !important;
    background: linear-gradient(#4e93c7, #2378b9, #3885c0) !important;
    font-size: 14px !important;
    height: 33px !important;
    padding: 0px 20px 0px 20px !important;
    line-height: 31px !important;
}

.fc-event-title {
    text-overflow: ellipsis;
    overflow : hidden;
    white-space: nowrap;
}

.fc-event {
    border-width: 2px;
    padding-left: 8px;
    font-size: 14px;
    margin-top: 4px !important;
    margin-left: 4px !important;
    margin-right: 4px !important;    
}

.fc-event {
    cursor: pointer;
    border-width: 0px !important;
    margin-top: 8px !important;
    padding-left: 10px;
    padding-right: 6px;
}

.fc-event-start {
    border-top-left-radius: 23px;
    border-bottom-left-radius: 23px;
}

.fc-event-end {
    border-top-right-radius: 23px;
    border-bottom-right-radius: 23px;
}

/* fullcalendar end */

/* ckEditor start */

.ck-button {
    color: #5e6164 !important;
    box-shadow: none !important;
}
.ck-editor {
    background: #fff;
    height: 100% !important;
}
.ck-editor__editable {     
    font-size: 14px !important;
    font-family: 'Noto Sans KR', 'mmx Noto Sans KR', sans-serif !important;
    height: 100% !important;
}
.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
    border-color: #CCCED1 !important;
    box-shadow: none !important;
}
.ck-list {
    max-height: 360px !important;
    overflow: auto !important;
}
.ck-list::-webkit-scrollbar {
    width: 6px !important;
    height:6px !important;
}

.ck-list::-webkit-scrollbar-thumb {
    background: #a9a9a9 !important;
    border-radius: 16px !important;
}
.ck.ck-list__item .ck-button.ck-on {
    color: #fff !important;
    background: #1D649B !important;
    box-shadow: none !important;
}
.ck-editor i {
    font-style: italic !important;
}

/* ckEditor end */

/* fancybox start */

.fancybox-is-open .fancybox-bg {
    opacity: 0.8 !important;
}

.fancybox-infobar {
    background: #3373a5 !important;
    border-bottom-right-radius: 4px !important;
    color: #efefef !important;
    opacity: 1  !important;
}

.fancybox-toolbar {
    border-bottom-left-radius: 4px !important;
    background: #3373a5 !important;
    color: #efefef !important;
}

.fancybox-button {
    background: #3373a5 !important;
    border-radius: 4px !important;
    color: #efefef !important;
}

/* fancybox end */

/* bootstrap tooltip start */

.ui-tooltip, .arrow:after {
    background: #1D649B !important;
    border: 1px solid #08548e;
}

.ui-tooltip {
    opacity: 1 !important;
    max-width: 800px !important;
    width: 800px !important;
    overflow: auto !important;    
}

.ui-tooltip-content {
    width: 500px !important;
    max-width: 500px !important;
    opacity: 1 !important;
}

.tooltip-inner {
    max-width: fit-content !important;
}

/* bootstrap tooltip end */

/* jQuery.Gantt start */

.fn-gantt .dataPanel {
    outline: #DDD solid 0px;
}

.fn-gantt .today .fn-label, .fn-gantt .wd .fn-label {
    width: 23px;
    height: 24px;
}

.fn-gantt .month .fn-label {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fn-gantt .year .fn-label {
    width: 100%;
}

.fn-gantt .date .fn-label {
    width: 100%;
}

.fn-gantt .day .fn-label {
    width: 100%;
}

.fn-gantt .date, .fn-gantt .day {
    display: block;
}

.fn-gantt .row.header {
    margin-right: 0px;
}

.fn-gantt .fn-content {
    border: 1px solid #dddddd;
}

.fn-gantt .navigate button {
    padding: 0px;    
}

.fn-gantt .bar .fn-label {
    text-align: left;
    padding-left: 8px;
}

.fn-gantt .navigate {
    padding: 13px 8px 8px 8px;
}

.nav-slider .nav-link {
    background-color: #1D649B !important;
    border-color: #1D649B;
}

.fn-gantt .navigate .nav-slider-bar {
    background-color: #1D649B;
}

.fn-gantt .navigate .page-number {
    font-size: 12px;
}

.fn-gantt .navigate .nav-slider-button {
    background: #00A0E9;
    height: 20px;
    top: 19px;
    border-radius: 20px;
    width: 20px;
}

.fn-gantt .bar {
    cursor: pointer;    
    height: 23px;
    margin: -3px 3px 3px 0px;
-webkit-border-radius: 23px;
   -moz-border-radius: 23px;
        border-radius: 23px;
}

.fn-gantt .row {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

.fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
    height: 32px;
}

.fn-gantt .day, .fn-gantt .date {
    width: 32px;
    line-height: 32px;
}

.fn-gantt .sa, .fn-gantt .sn, .fn-gantt .wd {
    height: 32px;
}

.fn-gantt .holiday {
    height: 32px;
}

.fn-gantt .today {
    height: 32px;
}

.fn-gantt .rightPanel .month, .fn-gantt .rightPanel .year {
    height: 32px;
}

.fn-gantt .bar .fn-label {
    color: #414b57;
    font-size: 14px;
    line-height: 22px;
    padding-left: 10px;
    font-weight: normal;
    text-shadow: none;
}

.fn-gantt .day .fn-label, .fn-gantt .date .fn-label {
    font-weight: normal;
}

.fn-gantt .leftPanel .name {
    font-weight: normal;
}

.fn-gantt .leftPanel .fn-label {
    margin-left: 0px;
}

.fn-gantt .sa {
    color: blue;
}

.fn-gantt .sn {
    color: red;
}

.fn-gantt .fn-content {
    border-radius: 4px;
}

/* jQuery.Gantt end */

/* 프리폼(폼 영역) 컴포넌트 모서리 — 검색 조건과 같은 4px 라운드(사용자 10-17 패턴): 텍스트 입력 · 코드도움(돋보기) 단추 · 날짜 선택 단추 · 메모 · 선택 상자 · 폼 단추 */
.mmx-form-cell-item-input,
.mmx-form-cell-item-input:disabled,
.mmx-form-container textarea,
.mmx-form-container select,
.mmx-form-table textarea,
.mmx-form-table select,
.mmx-form-btn-search,
.mmx-form-container .ui-datepicker-trigger,
.mmx-form-table .ui-datepicker-trigger {
    border-radius: 4px;
}

/* 업무 단추 줄 왼쪽의 설명 · 상태 문구는 단추 세로 길이의 가운데에 맞춘다(사용자 10-17 패턴) — 단추가 vertical-align:middle 이라 문구도 같은 기준선으로 */
.mmx-menu-biz-btn-container > span {
    display: inline-block;
    vertical-align: middle;
}

/* 탭 줄 오른쪽의 설명 · 상태 문구는 탭 세로 길이(33px)의 가운데에(사용자 10-17 패턴) — 탭과 같은 높이의 줄 상자 안에서 가운데 정렬 */
.mmx-tabbar > span {
    display: inline-block;
    vertical-align: top;
    height: 33px;
    line-height: 33px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   공통 화면 컴포넌트 보강(WP-UI-CORE, 2026-10-17) — 아래는 모두 새 클래스라서 기존 화면에는 영향이 없다.
   사용법: docs/mmx/건물관리/공통컴포넌트_사용법.md
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. 탭 줄 + 단추 줄(.mmx-tabbar-biz) ──
   탭 줄 = 탭들(.mmx-tabbar-tabs) + 문구(.mmx-tabbar-note) + 오른쪽 단추 그룹(.mmx-tabbar-btns) — FI1170 · FI1630 처럼 단추를 탭 줄 오른쪽에.
   줄 높이는 탭 높이(33px)로 고정이라 탭마다 단추가 달라져도(숨겨도) 아래 화면이 움직이지 않는다 */
.mmx-tabbar.mmx-tabbar-biz {
    display: flex;
    align-items: flex-start;
    height: 33px;
}

.mmx-tabbar-biz > .mmx-tabbar-tabs {
    flex: 0 0 auto;
    white-space: nowrap;
}

.mmx-tabbar-biz > .mmx-tabbar-note {
    flex: 1 1 auto;
    min-width: 0;
    height: 33px;
    line-height: 33px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555555;
}

/* 문구를 단추 바로 왼쪽(오른쪽 끝)에 붙이고 싶을 때 */
.mmx-tabbar-biz > .mmx-tabbar-note.mmx-tabbar-note-right {
    text-align: right;
}

.mmx-tabbar-biz > .mmx-tabbar-btns {
    flex: 0 0 auto;
    margin-left: auto;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}

.mmx-tabbar-biz > .mmx-tabbar-btns .mmx-menu-biz-btn {
    margin-left: 4px;
    margin-top: 0;
    float: none;
    width: auto;
}

/* 탭 본문 전환 — 표시 방식(display)이 달라도(block · flex · grid) 되돌아오도록 숨김 전용 클래스를 쓴다 */
.mmx-tab-hidden {
    display: none !important;
}

/* 업무 단추 줄(조건 아래, 탭 줄이 아닌 곳)이 단추를 숨겨도 높이 27px 를 유지 — 화면이 위아래로 움직이지 않게 */
.mmx-menu-biz-btn-container.mmx-menu-biz-btn-container-fixed {
    min-height: 27px;
}

/* ── 2. 영역 제목(.mmx-pane-title) — FI2750 pane 제목과 같은 모양(14px bold, 높이 24). 좌우 분할은 양쪽 모두 같은 높이의 제목 줄을 둔다 ── */
.mmx-pane-title {
    flex: 0 0 auto;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: bold;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mmx-pane-title > small,
.mmx-pane-title > .mmx-pane-title-note {
    margin-left: 8px;
    font-size: 12px;
    font-weight: normal;
    color: #555555;
}

/* ── 3. 격자 폼(.mmx-form-container-grid) — 기존 .mmx-form-container > .mmx-form-table > .mmx-form-row > .mmx-form-cell 마크업에 클래스만 더한다.
   칸을 격자(grid)로 놓아 화면 폭에 맞게 열 수가 정해지고, 좁아지면 입력란이 줄어들 뿐 잘리거나 스크롤이 생기지 않는다.
   --mmx-form-cols : 한 줄 칸 수(기본 3) · --mmx-form-label : 라벨 폭(기본 104px) — 컨테이너에 style 이나 css 로 지정.
   열 수를 폭에 맡기려면 .mmx-form-container-grid-auto(칸 최소 폭 --mmx-form-cell-min, 기본 300px) ── */
.mmx-form-container.mmx-form-container-grid {
    height: auto;
    overflow: visible;
    --mmx-form-cols: 3;
    --mmx-form-label: 104px;
    --mmx-form-cell-min: 300px;
}

.mmx-form-container-grid .mmx-form-table {
    display: grid;
    grid-template-columns: repeat(var(--mmx-form-cols), minmax(0, 1fr));
    gap: 4px 14px;
    border-spacing: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 4px 8px;
    box-sizing: border-box;
    white-space: nowrap;
}

.mmx-form-container-grid.mmx-form-container-grid-auto .mmx-form-table {
    grid-template-columns: repeat(auto-fill, minmax(var(--mmx-form-cell-min), 1fr));
}

.mmx-form-container-grid .mmx-form-table.mmx-form-table-fit {
    min-width: 0;
}

.mmx-form-container-grid .mmx-form-row {
    display: contents;
}

.mmx-form-container-grid .mmx-form-cell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mmx-form-container-grid .mmx-form-cell > span:not(.mmx-form-cell-label) {
    float: none !important;
    flex: 0 0 13px;
    margin-right: 2px;
}

.mmx-form-container-grid .mmx-form-cell-label {
    float: none;
    flex: 0 0 var(--mmx-form-label);
    width: var(--mmx-form-label);
    min-width: 0;
    margin-right: 6px;
}

.mmx-form-container-grid .mmx-form-cell-item,
.mmx-form-container-grid .mmx-form-table.mmx-form-table-fit .mmx-form-cell-item {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.mmx-form-container-grid .mmx-form-cell-item {
    height: auto;
    min-height: 25px;
}

.mmx-form-container-grid .mmx-form-top {
    align-items: flex-start;
}

.mmx-form-container-grid .mmx-form-cell-item > * {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.mmx-form-container-grid .mmx-form-new { grid-column-start: 1; }
.mmx-form-container-grid .mmx-form-span2 { grid-column-end: span 2; }
.mmx-form-container-grid .mmx-form-span3 { grid-column-end: span 3; }
.mmx-form-container-grid .mmx-form-span-all { grid-column: 1 / -1; }

/* 한 칸 안의 마지막 입력(이름 칸 등)이 남는 폭을 모두 차지 */
.mmx-form-container-grid .mmx-form-fill .mmx-form-cell-item > input:last-of-type {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 60px;
}

/* 열 수 도우미 — 컨테이너에 같이 붙인다 */
.mmx-form-container-grid.mmx-form-cols-1 { --mmx-form-cols: 1; }
.mmx-form-container-grid.mmx-form-cols-2 { --mmx-form-cols: 2; }
.mmx-form-container-grid.mmx-form-cols-3 { --mmx-form-cols: 3; }
.mmx-form-container-grid.mmx-form-cols-4 { --mmx-form-cols: 4; }

@media (max-width: 1300px) {
    .mmx-form-container.mmx-form-container-grid { --mmx-form-label: 96px; }
}

/* ── 4. 상태 문구 색(상태 색 한 벌) — D-11 결정 전 임시 값은 FI 팔레트(적 #ff0000 · 청 #0000ff) ── */
.mmx-text-ok { color: #2e7d32; }
.mmx-text-warn { color: #ff0000; font-weight: bold; }
.mmx-text-link { color: #0000ff; }

/* ══════════════════════════════════════════════════════════════════════════════
   공통 화면 컴포넌트 보강 2(WP-UI-CORE2, 2026-10-17) — 아래도 모두 새 클래스(또는 .mmx-tabbar-biz 안쪽)라서 기존 화면에는 영향이 없다.
   사용법: docs/mmx/건물관리/공통컴포넌트_사용법.md
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 탭 줄 문구 색 — .mmx-tabbar-biz > .mmx-tabbar-note 의 기본색(#555)이 상태 색 클래스보다 앞서 안 먹던 것을 같은 무게로 바로잡는다 ── */
.mmx-tabbar-biz > .mmx-tabbar-note.mmx-text-ok { color: #2e7d32; }
.mmx-tabbar-biz > .mmx-tabbar-note.mmx-text-warn { color: #ff0000; font-weight: bold; }
.mmx-tabbar-biz > .mmx-tabbar-note.mmx-text-link { color: #0000ff; }

/* ── 탭 줄이 좁을 때(좌우 분할 오른쪽 · 1366 폭) ──
   기본: 문구는 한 줄 줄임표(…)이고 마우스를 올리면 전체가 툴팁(title)으로 — 자동 연결(mmx.util.js 맨 끝).
   .mmx-tabbar-biz-wrap : 줄바꿈 허용 — 문구는 2줄까지(12px), 탭 + 문구 + 단추가 한 줄에 안 들어가면 단추 그룹이 다음 줄 오른쪽으로 내려간다(그때만 줄 높이가 커진다) */
.mmx-tabbar.mmx-tabbar-biz.mmx-tabbar-biz-wrap {
    height: auto;
    min-height: 33px;
    flex-wrap: wrap;
}

.mmx-tabbar-biz.mmx-tabbar-biz-wrap > .mmx-tabbar-note {
    flex: 1 1 120px;
    height: auto;
    min-height: 33px;
    line-height: 16px;
    padding: 0 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
}

.mmx-tabbar-biz.mmx-tabbar-biz-wrap > .mmx-tabbar-btns {
    margin-left: auto;
}

/* ── 하단 요약 막대(.mmx-summary-bar) — FI1630 의 mmx-account-summary-* 모양(회색 칩 제목 + 값)을 공통으로. 옛 bm-footer · bm-allocsum · bm-verify 대체 ──
   <div class="mmx-summary-bar">
     <span class="mmx-summary-item"><span class="mmx-summary-title">모계량</span><span class="mmx-summary-value">1,200</span></span>
     <span class="mmx-summary-item mmx-summary-warn"><span class="mmx-summary-title">이상치</span><span class="mmx-summary-value">3</span></span>
     <span class="mmx-summary-note">설명 문구</span>
   </div>
   수정자: mmx-summary-bar-right(오른쪽 정렬) · mmx-summary-bar-flat(테두리 없음) · mmx-summary-value-wide(값 폭 140) */
.mmx-summary-bar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    margin-top: 8px;
    padding: 4px 12px;
    box-sizing: border-box;
    min-height: 32px;
    background: #f1f1f166;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333333;
}

.mmx-summary-bar.mmx-summary-bar-right {
    justify-content: flex-end;
}

.mmx-summary-bar.mmx-summary-bar-flat {
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.mmx-summary-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.mmx-summary-title {
    background: #aaaaaa;
    color: #ffffff;
    padding: 2px 6px;
    border: 1px solid #dddddd;
    border-radius: 4px;
    font-size: 13px;
    line-height: 18px;
}

.mmx-summary-value {
    display: inline-block;
    margin-left: 4px;
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #0b3d91;
}

.mmx-summary-value.mmx-summary-value-wide {
    min-width: 140px;
}

.mmx-summary-note {
    color: #555555;
    font-size: 12px;
}

.mmx-summary-item.mmx-summary-warn .mmx-summary-value,
.mmx-summary-note.mmx-summary-warn {
    color: #ff0000;
    font-weight: bold;
}

.mmx-summary-item.mmx-summary-ok .mmx-summary-value,
.mmx-summary-note.mmx-summary-ok {
    color: #2e7d32;
}

/* ── 날짜 · 연월 입력 대화상자(mmx.dlg.promptDate) ── */
.mmx-datedlg-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.25);
}

.mmx-datedlg {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    min-width: 360px;
    max-width: 90%;
    background: #ffffff;
    border: 1px solid #888888;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    font-size: 14px;
}

.mmx-datedlg-title {
    padding: 8px 12px;
    font-weight: bold;
    background: #eef1f5;
    border-bottom: 1px solid #cccccc;
    border-radius: 6px 6px 0 0;
}

.mmx-datedlg-message {
    padding: 12px 12px 4px 12px;
    white-space: pre-wrap;
    color: #333333;
}

.mmx-datedlg-body {
    padding: 8px 12px 12px 12px;
    text-align: center;
}

.mmx-datedlg-body .mmx-form-cell-item-input {
    text-align: center;
}

.mmx-datedlg-error {
    min-height: 18px;
    padding: 0 12px;
    font-size: 12px;
    color: #ff0000;
}

.mmx-datedlg-buttons {
    padding: 8px 12px;
    text-align: right;
    border-top: 1px solid #e0e0e0;
}

.mmx-datedlg-buttons .btn {
    margin-left: 4px;
}

/* 동 고르기 목록 창(mmx.lookup.bm.openDong) — 위 날짜 대화상자(.mmx-datedlg)와 같은 틀 */
.mmx-datedlg-filter {
    width: 100%;
    box-sizing: border-box;
    height: 25px;
    padding: 0 6px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 14px;
}

.mmx-datedlg-list {
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.mmx-datedlg-list-item {
    padding: 3px 8px;
    cursor: pointer;
}

.mmx-datedlg-list-item:hover {
    background: #daedfa;
}

.mmx-datedlg-list-item.active {
    background: #2378b9;
    color: #ffffff;
}

.mmx-datedlg-list-empty {
    padding: 8px;
    color: #777777;
}