/*@import url('rxcontrols.ui.2024.01.css');*/


/* for all editor instances */
.monaco-editor-container {
    min-height: 500px;
    height: 100%;
}

    .monaco-editor-container .monaco-editor {
        padding-top: 20px;
    }


.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}


.autocomplete {
    position: relative;
    display: inline-block;
}



.autocomplete-items {
    background-color: var(--bs-body-bg);
    position: absolute;
    border: 1px solid rgba(var(--bs-gray-500-rgb), 0.8);
    z-index: 99;
    top: 100%;
    left: -1px;
    right: 0;
    overflow-y: scroll;
    height: auto;
    max-height: 180px;
    min-width: 130px;
}

    .autocomplete-items.bottom {
        top: initial;
        bottom: 100%;
    }


    .autocomplete-items div {
        font-size: 11.4px !important;
        padding: 5px 5px 5px 5px;
        cursor: pointer;
        border-left: 0px solid rgba(var(--bs-gray-400-rgb), 0.8);
        border-right: 1px solid rgba(var(--bs-gray-400-rgb), 0.8);
        border-bottom: 1px solid rgba(var(--bs-gray-400-rgb), 0.8);
        overflow: hidden;
        text-overflow: ellipsis;
        height: 30px;
    }

        .autocomplete-items div:first-child {
            border-top: 0px solid rgba(var(--bs-gray-400-rgb), 0.8);
        }

        .autocomplete-items div:last-child {
            border-bottom: 0px solid rgba(var(--bs-gray-400-rgb), 0.8);
        }
        /*when hovering an item:*/
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.autocomplete-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    background-color: var(--bg-white);
    border-bottom: 0px solid red; /* 포커스가 있을 때 강조 표시 */
}

    .autocomplete-container.autocomplete-tagify {
        border: 1px solid rgba(var(--bs-gray-300-rgb), 1);
        padding: 0px;
        min-height: 26px;
    }

    .autocomplete-container.autocomplete-selector {
        border: 1px solid rgba(var(--bs-gray-300-rgb), 1);
        padding: 0px;
        min-height: 26px;
    }

    .autocomplete-container .input-container {
        position: relative;
        width: 100%;
    }

    .autocomplete-container .autocomplete-input {
        width: 100%;
        padding: 8px;
        border: none;
        outline: none;
        color: var(--bs-dark); /* ksh 2025-04-07 다크모드 텍스트 검색 시*/
        background-color: #f3f3f3;
        border-radius: 4px;
        height: 26px; 
        font-family: 'Pretendard';
        font-size: 12px;
        font-weight: 400;
    }

        .autocomplete-container .autocomplete-input::placeholder {
            color: #ccc;
            font-family: 'Pretendard';
            font-size: 10px;
            font-weight: 300;
        }

        .autocomplete-container .autocomplete-input:focus::placeholder {
            color: transparent;
        }

    .autocomplete-container.autocomplete-tagify .autocomplete-input {
        background-color: transparent;
    }

    .autocomplete-container.autocomplete-selector .autocomplete-input {
        background-color: transparent;
        height: 26px;
    }

        .autocomplete-container.autocomplete-selector .autocomplete-input:focus {
        }


    .autocomplete-container.autocomplete-multi-selector .input-container {
        background-color: transparent;
        top: 0;
        left: 0;
        border-bottom: 1px solid #efefef;
    }



    .autocomplete-container.autocomplete-single-selector .input-container {
        background-color: transparent;
        top: 0;
        left: 0;
    }

.selected-tags.single-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto; /* 가로 스크롤 가능하게 설정 */
}

.selected-tags.multi-line {
    display: flex;
    flex-direction: column; /* 태그를 수직으로 배치 */
    gap: 4px;
}

.autocomplete-list {
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    background-color: var(--bs-white); /* ksh 2025-04-07*/
    max-height: 200px;
    overflow-y: auto;
    margin: 0 0 0 -3px;
    padding: 0;
    list-style-type: none;
    z-index: 1;
    font-family: 'Pretendard';
    font-size: 12px;
    /* min-width: 150px; */
}

    .autocomplete-list li {
        padding: 6px 8px;
        cursor: pointer;
        font-family: 'Pretendard';
        font-size: 11px;
        border-left: 2px solid transparent;
    }

        .autocomplete-list li.selected {
            /* 2025-04-07 ksh 선택된 항목 색 처리
                background-color: #fafafa;
            */
            background-color: var(--bs-gray-300);
            font-weight: bold; /* 선택된 항목의 글자를 굵게 표시 */
            border-left: 2px solid #000;
        }
        /*ksh 2025-08-20 hover 추가*/
        .autocomplete-list li:hover {
            background-color: var(--bs-gray-300);
            font-weight: bold; /* 선택된 항목의 글자를 굵게 표시 */
            border-left: 2px solid #000;
        }

.autocomplete-container .tag {
    font-family: 'Pretendard';
    font-size: 10px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-weight: 500;
    background-color: #ebecec;
    border-radius: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 24px;
    color: var(--bs-text-dark) !important;
    white-space: nowrap; /* 한 줄로 유지하고 줄 바꿈 방지 */
}


.autocomplete-container.autocomplete-selector .tag {
    font-family: 'Pretendard';
    font-size: 10px;
    display: flex;
    background: red;
    align-items: center;
    padding: 4px 8px;
    font-weight: 500;
    background-color: transparent;
    border-radius: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 26px;
    white-space: nowrap; /* 한 줄로 유지하고 줄 바꿈 방지 */
}



.autocomplete-container .input-container .tag:first-child {
}


.autocomplete-container .tag-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.autocomplete-container .tag button {
    margin-left: 4px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #000;
}


.autocomplete-container.autocomplete-tagify {
    border: 1px solid rgba(var(--bs-gray-300-rgb), 1);
    min-height: 26px;
    padding: 2px;
}

/* .autocomplete-container .tag {
    height: 20px;
}

.autocomplete-container .autocomplete-input {
    height: 20px;
} */

.autocomplete-container .tag-text {
    font-family: "SUIT";
    font-size: 12px !important;
    font-weight: 400 !important;
}



.autocomplete-container.focused {
    border-bottom: 0px solid blue; /* 포커스가 있을 때 강조 표시 */
}


.no-focus-border {
    outline: none; /* 포커스 상태에서 외곽선 제거 */
}


[data-bs-theme=dark]
.autocomplete-container .tag {
    background-color: #333;
}

    [data-bs-theme=dark]
    .autocomplete-container .tag button {
        color: #fff;
    }



[data-bs-theme=light]
.rwgrid {
    --border-top-color: rgba(var(--bs-gray-400-rgb),0.55);
    --border-bottom-color: rgba(var(--bs-gray-400-rgb),0.35);
    --border-left-color: rgba(var(--bs-gray-400-rgb),0.0);
    --border-right-color: rgba(var(--bs-gray-400-rgb),0.1);
    --rs-grid-style-data-selected-bgcolor: #eaeaea;
    --header-text-color: rgb(30, 31, 33);
    --cell-text-color: #222;
    --focued-border-color: rgba(var(--bs-gray-800-rgb), 0.65);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
}

[data-bs-theme=light]
/* ver 2 */
.rwgrid {
    --header-bg-color: #e0e9f1; /*#f4f4f4;*/ /*f6f6f6*/
    --header-border-color: #b5cade;
    --header-border-right-color: #b9bfc4; /* 헤더 영역 Right Border 색상 추가 */


    --column-border-left-color: #b5cade;
    --column-border-right-color: #b5cade;
    --column-border-top-color: #b5cade;
    --column-border-bottom-color: #b5cade;
    --group-header-bg-color: var(--bs-gray-100); /*#fff;*/
    --group-header-sub-bg-color: blue;
    --group-header-bottom-color: #e3e7eb;
    --border-top-color: #e1e1e1;
    --border-bottom-color: #e1e1e1;
    --border-left-color: #e1e1e1;
    --border-right-color: #cfdbe7;
    --cell-border-top-width: 0;
    --cell-border-bottom-width: 0;
    --cell-border-left-width: 0;
    --cell-border-right-width: 1px;
    /* 수정 */


    --selected-cell-bg-color: #f4faff; /*rgba(247, 236, 185, 0.5);*/
    --selected-cell-top-color: #0050e6;
    --selected-cell-bottom-color: #0050e6; /*#F7CE0E;*/
    --focued-border-color: rgba(247, 236, 185, 0.5);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
}


[data-bs-theme=dark]
.rwgrid {
    --border-top-color: rgba(var(--bs-gray-400-rgb),0.75);
    --border-bottom-color: rgba(var(--bs-gray-400-rgb),0.75);
    --border-left-color: rgba(var(--bs-gray-400-rgb),0.75);
    --border-right-color: rgba(var(--bs-gray-400-rgb),0.75);
    --focued-border-color: rgba(var(--bs-gray-800-rgb), 0.45);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
    --rs-grid-style-data-selected-bgcolor: #384470;
    --header-bg-color: #000;
    --header-text-color: #fff;
    --cell-text-color: #fff;
    /* 추가 */
    --selected-cell-bg-color: rgb(247 236 185 / 20%);
    --selected-cell-top-color: rgb(247 206 14 / 50%);
    --selected-cell-bottom-color: rgb(247 206 14 / 50%);
    --focued-border-color: rgba(247, 236, 185, 0.5);
    --focued-in-border-color: rgba(var(--bs-gray-800-rgb), 0.95);
}

.rwgrid:focus {
}


.rwgrid {
    height: 100%;
    width: 100%;
    overflow: auto;
    font-family: 'Pretendard', sans-serif;
    font-size: 12.0px;
    font-weight: 400;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.1);
    border-left: solid 0px var(--border-left-color);
    border-top: solid 1px var(--border-top-color);
    border-bottom: solid 1px var(--border-bottom-color);
    border-right: solid 0px var(--border-right-color);
    border-radius: 2px; /*var(--rs-grid-style-outer-bdradius)*/

    color: var(--bs-text-dark);
    background-color: var(--bs-white);
    border-radius: 0;
    /* 스크롤바 클릭/드래그는 허용하되 키보드 동작은 막기 */
    /* scrollbar-width: thin; ksh 2025-04-07 thin > 스크롤바 색상 지정 되지 않음. */
    scroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    /* 필요한 경우 */
    scroll-snap-type: none;
}

    .rwgrid .header {
        background-color: var(--header-bg-color);
        display: block; /*inline-table;*/
        /* display: contents; */
        width: 100%;
        font-weight: 700;
        font-size: 11.5px;
        letter-spacing: -0.4px;
        padding: 0;
        margin: 0;
        height: 30px;
        /*border-bottom: solid 1px var(--header-border-color);*/
        position: sticky;
        will-change: transform;
        z-index: 3;
        top: 0;
        transform: translateZ(0);
    }

    .rwgrid .header-row {
        background-color: var(--header-bg-color);
        height: 30px;
    }

    .rwgrid .header .group-header {
        height: 30px;
    }

    .rwgrid .header .group-column {
        background-color: #e8e8e8;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: solid 1px var(--column-border-right-color);
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
    }

        .rwgrid .header .group-column:first-child {
            border-left: solid 0px var(--column-border-left-color);
        }

        .rwgrid .header .group-column:last-child {
            border-right: solid 0px var(--column-border-right-color);
        }




    .rwgrid .column-border-bottom {
        /*border-bottom: solid 1px var(--border-right-color);*/
    }

    .rwgrid .header-container {
        display: inline-flex !important;
        border-bottom: solid 1px var(--header-border-color);

        will-change: transform;
    }

    .rwgrid .rw-row-sx, .rw-column-sx {
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
        min-width: 30px;
    }


    /* 헤더에 있는 셀 */
    .rwgrid .header-container:not(.group-header) .rw-row-sx,
    .rwgrid .header-container:not(.group-header) .rw-column-sx {
        transform: translateZ(0); /* GPU 처리 */
    }


.rw-grid-toolbar-container {
    background-color: var(--bs-gray-100);
}

.rwgrid .content-container {
    width: 100%;
    display: inline-table;
    /*background-color: bisque;*/
}

    .rwgrid .content-container.mt-container {
        margin-top: 31px; /* Header 높이 + 1px */
    }



.rwgrid .rw-column {
    height: 30px;
    color: var(--header-text-color);
    border-right: solid 1px var(--column-border-right-color);

    background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
    /*overflow: hidden;*/
}

    .rwgrid .rw-column:first-child {
        border-left: solid 0px var(--column-border-left-color);
    }

    .rwgrid .rw-column:last-child {
        border-right: solid 0px var(--column-border-right-color);
    }

    .rwgrid .rw-column .resizer {
        width: 5px;
        height: 100%;
        margin-right: 0px;
        z-index: 2;
        cursor: col-resize;
    }


.rwgrid .rw-data-row {
    height: 30px;
    border-bottom: solid 1px var(--border-bottom-color);
/*    will-change: transform;*/
}

    .rwgrid .rw-data-row.rw-row-selected {
        border-top: 0.5px solid var(--selected-cell-top-color);
        border-bottom: 1px solid var(--selected-cell-bottom-color);
        background-color: var(--selected-cell-bg-color) !important;
        outline-offset: -2px; /* 위 보더 위치랑 겹치도록 */
    }

    .rwgrid .rw-data-row:hover {
        background-color: var(--bs-gray-200);
    }


/*
        .rwgrid .rw-data-row:hover .rw-cell {
            background-color: var(--bs-gray-200);
        }*/

    .rwgrid .rw-data-row.rw-row-selected .rw-row-sx {
        will-change: transform;

    }

    .rwgrid .rw-data-row.rw-row-selected .rw-cell {
        will-change: transform;
    }

        .rwgrid .rw-data-row.rw-row-selected .rw-cell.text-danger {
            /*--bs-text-danger: #fff;*/
        }


    [data-bs-theme=light]
    /*.rwgrid .rw-data-row.rw-row-selected .text-gray-100,
        .rwgrid .rw-data-row.rw-row-selected .text-gray-200,
        .rwgrid .rw-data-row.rw-row-selected .text-gray-300,
        .rwgrid .rw-data-row.rw-row-selected .text-gray-400,*/
    .rwgrid .rw-data-row.rw-row-selected .text-gray-500,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-600,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-700,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-800,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-900 {
        /*color: var(--bs-info-light) !important;*/
    }

    [data-bs-theme=dark]
    .rwgrid .rw-data-row.rw-row-selected .text-gray-100,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-200,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-300,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-400,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-500,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-600,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-700,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-800,
    .rwgrid .rw-data-row.rw-row-selected .text-gray-900 {
        /*color: var(--bs-gray-700) !important;*/
    }

    .rwgrid .rw-data-row.rw-row-selected .text-info {
        /*color: var(--bs-info-light) !important*/
    }

    .rwgrid .rw-data-row.rw-row-selected .text-primary {
        /*color: var(--bs-primary-light) !important*/
    }



    /* 선택된 행에서 rw-light-bg-color와 글자색이 겹칠 때 대비 조정 */
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-500,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-600,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-700,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-800,
    .rwgrid .rw-data-row.rw-row-selected .rw-cell [class*="rw-light-bg-color"] .text-gray-900 {
        /*color: var(--bs-text-dark) !important;*/
    }

.rwgrid .rw-cell {
    display: flex;
    color: var(--cell-text-color);
    border-top: solid var(--cell-border-top-width) var(--border-top-color);
    border-bottom: solid var(--cell-border-bottom-width) var(--border-bottom-color);
    border-left: solid var(--cell-border-left-width) var(--border-left-color);
    border-right: solid var(--cell-border-right-width) var(--border-right-color);
    /*border: solid 1px var(--border-right-color);*/
    /*overflow: hidden; 셀 편집기 때문에 제거 */

    word-wrap: break-word;
    text-overflow: ellipsis;
    /* 셀편집기때문에 제거
            padding-left: 5px;
            padding-right: 5px;*/
}


    .rwgrid .rw-cell.rw-cell-focused {
        border-left: solid 1px var(--focued-border-color) !important;
        border-top: solid 1px var(--focued-border-color) !important;
        border-bottom: solid 1px var(--focued-border-color) !important;
        border-right: solid 1px var(--focued-border-color) !important;
    }

/* 1. 그리드에 포커싱이 있는 경우 (그리드에 포커싱 : O 에디에터에 포커싱 : X)*/
.rwgrid:focus .rw-cell.rw-cell-focused {
    border: solid 1px var(--focued-in-border-color) !important;
}
/* 2. 그리드에 포커싱이 있는 경우 (그리드에 포커싱 : X 에디에터에 포커싱 : O)*/
.rwgrid .rw-cell.rw-cell-focused:focus-within {
    border: solid 1px var(--focued-in-border-color) !important;
}


.rwgrid [data-cell-editing="true"].rw-cell.rw-cell-focused {
    border: solid 2px var(--bs-primary) !important;
}


.rwgrid .rw-cell-readonly {
    background-color: var(--bs-gray-100) !important;
}

.rwgrid .rw-cell .rw-cell-content-container .rw-cell-content {
    padding-left: 5px;
    padding-right: 5px;
}

.rwgrid .rw-cell .rw-cell-editor-container .rw-cell-editor {
    padding-left: 5px;
    padding-right: 5px;
}

.rwgrid .rw-sum-cell {
    padding-left: 5px;
    padding-right: 5px;
    font-weight: 800;
}

.rwgrid .rw-cell-focused.rw-cell-readonly {
    border-left: solid 1px #000 !important;
    border-top: solid 1px #000 !important;
    border-bottom: solid 1px #000 !important;
    border-right: solid 1px #000 !important;
    background-color: var(--bs-gray-200) !important;
}


.rwgrid .rw-fixed-column {
    position: sticky;
    left: 0;
    will-change: transform;
}

.rwgrid .rw-cell .rw-cell-content-container {
    /* 셀 truncate 처리 (이걸 옵션으로 해야할지 고민중) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.rwgrid .rw-cell .rw-cell-editor-container {
    width: 100%;
}

.rwgrid .rw-cell.rw-cell-readonly {
    background-color: var(--bs-gray-100);
}

.rwgrid .rw-cell input.rw-cell-editor {
    border: 0px solid #a1a1a111;
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px;
}


.rwgrid .rw-data-row:hover .rw-fixed-cell {
    background-color: var(--bs-gray-200);
}

/* --bs-white > --bs-gray-200 변경 시 sum row 아닌 일반 row 도 gray 로 바뀜*/
.rwgrid .rw-data-row .rw-fixed-cell {
    background-color: var(--bs-white);
    position: sticky !important;
    left: 0;
    /*transform: translateZ(0); rwcombo 사용시 ItemContainer의 위치가 제대로 출력되지 않는다. */
    /*will-change: transform;*/ /* GPU 강제 적용 (랜더링 문제 수정) */
}

.rwgrid .rw-data-row .rw-fixed-cell-sum-row {
    background-color: var(--bs-gray-200);
    position: sticky !important;
    left: 0;
}


.rwgrid .rw-group-header {
    height: 30px;
    font-size: 10px;
    font-weight: 700;
    color: var(--bs-text-gray-800); /*#333;*/
    padding-left: 1px;
    display: flex;
    justify-content: left;
    align-items: center;
    background-color: var(--group-header-bg-color); /*var(--bs-gray-200);*/

    border-bottom: solid 1px var(--group-header-bottom-color);
}

    .rwgrid .rw-group-header.rw-group-header-sub {
        background-color: var(--bs-gray-100);
    }

    .rwgrid .rw-group-header .rw-group-header-content {
        position: sticky !important;
        left: 20px;
        will-change: transform;
    }

.rwgrid .rw-group-data-container {
    /* max-height: 0; */
}

.rwgrid .rw-column-sx {
    width: 22px;
}

.rwgrid .rw-column-drag {
    border-right: solid 0px rgba(0,0,0,0.04);
    width: 30px;
}

.rwgrid .over {
    border-left: 1px dotted #333;
}

.rwgrid .rw-row-sx {
    width: 22px;
}

.rwgrid .row-drag-handler {
    width: 30px;
    border-right: solid 1px rgba(0,0,0,0.04);
}

/* 드래그 이동 아이콘 숨김 */
.rwgrid .row-drag-handler-hide i {
    visibility: hidden;
}

.rwgrid .header-button {
    transition: transform 0.5s ease-in-out;
    width: 30px;
    position: sticky;
    will-change: transform;
}

.rwgrid .row-group-button-rotate-90 {
    transform: rotate(90deg);
}

.rwgrid .row-group-button-rotate-0 {
    transform: rotate(0deg);
}


/*     .rwgrid .rw-group-data-container {
        transition: max-height 0.2s ease-out;
    }

    .rwgrid .close {
        min-height: 0;
        max-height: 0;
        height:0;
        overflow: hidden;
    }
 */
.rwgrid .rw-group-data-container {
    /* overflow: hidden;  이 옵션은 틀고정시에 사용할 수 없음*/
    transition: height 0.3s ease-out;
}

    .rwgrid .rw-group-data-container.closed {
        overflow: hidden;
        height: 0;
    }




/* 추가된 가이드라인 스타일 */
.insert-above {
    border-top: 1px dotted #333 !important;
}

.insert-below {
    border-bottom: 1px dotted #333 !important;
}

.rwgrid .rw-data-row:last-child.insert-below {
    border-bottom: 1px dotted #333 !important;
}
/* 스타일 추가 */
.dragging {
    opacity: 1.0; /* 드래그 중인 요소의 투명도 조절 */
}


/* 데이터그리드 로딩 메시지 */
.rw-grid-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.rw-grid-loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: rw-grid-spin 1s linear infinite;
}

@keyframes rw-grid-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}






























.above {
    bottom: 100%;
}

.below {
    top: 100%;
}



.popover {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
}

.popover-header {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.popover-body {
    font-size: 14px;
    padding-top: 10px;
}

.btn-min {
    padding: 8px 14px 8px 14px !important;
    font-size: 12px !important; /* 폰트 사이즈 감소 */
    line-height: 12px !important; /* 라인 높이 조정 */
    border-radius: 2px; /* 둥근 모서리를 조금 더 세밀하게 조정 */
    height: 30px;
}








/* RWModal*/

/* 기본 모달 스타일링 */
.rw-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none; /* 초기 상태는 숨김 처리 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
}

.rw-modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.rw-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%; /* 모달 컨텐츠의 너비를 조절하려면 이 값을 조정하세요 */
    pointer-events: auto; /* 모달 컨텐츠에 마우스 이벤트 적용 */
    background-color: #FFF;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}

.rw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.rw-modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.rw-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.btn-close {
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem -0.5rem auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.rw-modal.fade.show {
    display: block; /* 팝업을 표시 */
}








/* 추가적인 모달 스타일링은 여기에 작성하세요 */

@keyframes rw-window-slideDown {
    from {
        transform: translateY(-100px);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.rw-window-slide-down {
    animation: rw-window-slideDown 0.5s ease-out;
}

.rw-window {
    position: fixed;
    background-color: white;
    border: 0px solid #384470;
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    border-radius: 1px !important;
    /*z-index: 1000; 동적으로 지정됨 */
    resize: both;
    overflow: hidden;
    left: -50%;
    top: -50%;
}

.rw-window-header {
    cursor: move;
    background-color: #384470;
    color: #fff;
    padding: 8px 10px;
    border-bottom: 0px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .rw-window-header button {
        border: none;
        background-color: transparent;
        cursor: pointer;
        font-size: 16px;
    }

.rw-window-content {
    padding: 0px;
}


#keyboardzone {
    background-color: #ccc;
}

.goja-keyboard {
    position: absolute;
    width: 900px;
    align: center;
    visibility: hidden;
    font-size: 25px;
    background-color: moccasin;
}

    .goja-keyboard .goja-key-row {
        display: flex;
        flex-wrap: nowrap; /* 줄 바꿈 방지 */
        flex-direction: row; /* 가로 방향으로 나열 */
        justify-content: space-around; /* 균등한 간격 */
    }

        .goja-keyboard .goja-key-row .goja-key {
            flex: 1 1 8%; /* 각 키가 동일한 크기를 가지도록 설정 */
            margin: 10px;
            padding: 20px;
            align-content: center;
            text-align: center;
            border-radius: 5px;
            background-color: #ccc;
            color: white;
            font-size: 1.5rem;
            user-select: none;
            transition: background-color 0.3s;
        }

@keyframes rx-slide-left {
    from {
        transform: translateX(100%);
        opacity: 1;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.rx-slide-left {
    animation: rx-slide-left 0.3s ease-in-out;
}

.rw-window-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}