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






.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;
        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: white;
    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 {
            background-color: #fafafa; /* 선택된 항목을 강조 */
            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: 26px;
    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; /* 포커스가 있을 때 강조 표시 */
}





[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.30);
    --border-bottom-color: rgba(var(--bs-gray-400-rgb),0.30);
    --border-left-color: rgba(var(--bs-gray-400-rgb),0.30);
    --border-right-color: rgba(var(--bs-gray-400-rgb),0.30);
    --rs-grid-style-data-selected-bgcolor: #384470;
    --header-bg-color: #e5e5e5;
    --header-text-color: rgb(30, 31, 33);
    --cell-text-color: #222;
}

[data-bs-theme=dark]
.rwgrid {
    --border-top-color: rgba(var(--bs-gray-400-rgb),0.30);
    --border-bottom-color: rgba(var(--bs-gray-400-rgb),0.30);
    --border-left-color: rgba(var(--bs-gray-400-rgb),0.30);
    --border-right-color: rgba(var(--bs-gray-400-rgb),0.30);
    --rs-grid-style-data-selected-bgcolor: #384470;
    --header-bg-color: #000;
    --header-text-color: #fff;
    --cell-text-color: #fff;
}



.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 1px var(--rs-grid-style-th-bdcolor);
    border-top: solid 1px var(--rs-grid-style-th-bdcolor);
    border-bottom: solid 1px var(--rs-grid-style-th-bdcolor);
    border-right: solid 1px var(--rs-grid-style-th-bdcolor);
    border-radius: 2px /*var(--rs-grid-style-outer-bdradius)*/;
    color: var(--bs-text-dark);
    /*    color: rgb(30, 31, 33);*/
    background-color: var(--bs-white);
    border-radius: 0;
}

    .rwgrid .header {
        background-color: var(--bs-white);
        display: inline-table;
        /* display: contents; */
        width: 100%;
        font-weight: 600;
        padding: 0;
        margin: 0;
        height: 30px;
        border-bottom: solid 1px var(--border-right-color);
        position: sticky;
        z-index: 3;
        top: 0;
        background-color: var(--header-bg-color); /* NC #F0F0F0 to : light, dark 모드 지원 필요*/
    }

    .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(--border-right-color);
        border-bottom: solid 1px var(--border-right-color);
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
    }

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

    .rwgrid .header-container {
        display: inline-flex !important;
    }

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

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

    .rwgrid .rw-column {
        height: 30px;
        color: var(--header-text-color);
        border-right: solid 1px var(--border-right-color);
        background-color: var(--header-bg-color); /* 틀고정되는 경우가 있어 배경색을 지정합니다. */
        /*overflow: hidden;*/
    }

        .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);
        /*pointer-events: none;*/
    }

        .rwgrid .rw-data-row.rw-row-selected .rw-cell {
            background-color: var(--rs-grid-style-data-selected-bgcolor) !important;
            color: #fff;
        }


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


        .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;
        }

        .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
        }

        .rwgrid .rw-data-row.rw-row-selected .rw-row-sx {
            background-color: var(--rs-grid-style-data-selected-bgcolor) !important;
            color: #fff;
        }


    .rwgrid .rw-cell {
        display: flex;
        color: var(--cell-text-color);
        border-right: solid 1px var(--border-right-color);
        overflow: hidden;
        word-wrap: break-word;
        text-overflow: ellipsis;
        padding-left: 5px;
        padding-right: 5px;
    }


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


    .rwgrid .rw-fixed-cell {
        background-color: var(--bs-white);
        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(--bs-gray-200);
        border-bottom: solid 1px var(--border-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;
        }

    .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;
    }

    .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: 5px;
    /*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);
    z-index: 2000 !important;
}