.bg-gray-100 {
    background-color: var(--bs-gray-100);
}
.bg-gray-200 {
    background-color: var(--bs-gray-200);
}
.bg-gray-300 {
    background-color: var(--bs-gray-300);
}
.bg-gray-400 {
    background-color: var(--bs-gray-400);
}
.bg-gray-500 {
    background-color: var(--bs-gray-500);
}
.bg-gray-600 {
    background-color: var(--bs-gray-600);
}
.bg-gray-700 {
    background-color: var(--bs-gray-700);
}
.bg-gray-800 {
    background-color: var(--bs-gray-800);
}
.bg-gray-900 {
    background-color: var(--bs-gray-900);
}
.bg-gray-000 {
    background-color: var(--bs-gray-000);
}

.text-gray-100 {
    color: var(--bs-gray-100);
}

.text-gray-200 {
    color: var(--bs-gray-200);
}

.text-gray-300 {
    color: var(--bs-gray-300);
}

.text-gray-400 {
    color: var(--bs-gray-400);
}

.text-gray-500 {
    color: var(--bs-gray-500);
}

.text-gray-600 {
    color: var(--bs-gray-600);
}

.text-gray-700 {
    color: var(--bs-gray-700);
}

.text-gray-800 {
    color: var(--bs-gray-800);
}

.text-gray-900 {
    color: var(--bs-gray-900);
}

.text-gray-000 {
    color: var(--bs-gray-000);
}




.fs-10 {
    font-size: 10px;
}

.fs-11 {
    font-size: 11px;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 17px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-25 {
    font-size: 25px;
}

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}



.bg-black {
    background-color: #000;
}

.h-10px {
    height: 10px;
}

.w-10 {
    width : 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.w-10px {
    width: 10px;
}
.w-20px {
    width: 20px;
}
.w-30px {
    width: 30px;
}
.w-40px {
    width: 40px;
}
.w-50px {
    width: 50px;
}
.w-60px {
    width: 60px;
}
.w-70px {
    width: 70px;
}
.w-75px {
    width: 75px;
}
.w-80px {
    width: 80px;
}
.w-90px {
    width: 90px;
}
.w-100px {
    width: 100px;
}

.w-125px {
    width: 125px;
}
.w-150px{
    width:150px;
}
.w-175px {
    width: 175px;
}
.w-200px {
    width: 200px;
}
.w-250px {
    width: 250px;
}
.w-300px {
    width: 300px;
}
.w-350px {
    width: 350px;
}

.w-500px {
    width: 500px;
}

.h-10px {
    height: 10px;
}

.h-15px {
    height: 15px;
}

.h-20px {
    height: 20px;
}

.h-25px {
    height: 25px;
}

.h-30px {
    height: 30px;
}

.h-35px {
    height: 35px;
}

.h-40px {
    height: 40px;
}
.h-50px {
    height: 50px !important;
}

.h-75px {
    height: 75px !important;
}

.h-100px {
    height: 100px;
}
.h-150px {
    height: 150px;
}
.h-200px {
    height: 200px;
}
.h-250px {
    height: 250px;
}
.h-300px {
    height: 300px;
}
.h-350px {
    height: 350px;
}
.h-400px {
    height: 400px;
}
.h-450px {
    height: 450px;
}
.h-500px {
    height: 500px;
}
.h-600px {
    height: 600px;
}

.min-h-500px{
    min-height: 500px;
}

/* 위젯의 위치 및 크기 지정 */
.widget-1 {
    grid-column: 1 / 6; /* 시작 칸 1에서 6번째 칸까지 */
    grid-row: 1 / 5; /* 시작 줄 1에서 5번째 줄까지 */
}

.widget-2 {
    grid-column: 7 / 11; /* 시작 칸 7에서 11번째 칸까지 */
    grid-row: 1 / 3; /* 시작 줄 1에서 3번째 줄까지 */
}

.widget-3 {
    grid-column: 1 / 11; /* 시작 칸 1에서 11번째 칸까지 */
    grid-row: 6 / 10; /* 시작 줄 6에서 10번째 줄까지 */
}

.widget-4 {
    grid-column: 12 / 20; /* 시작 칸 12에서 20번째 칸까지 */
    grid-row: 1 / 5; /* 시작 줄 1에서 5번째 줄까지 */
}

body[data-bs-theme="dark"] html,body{
    background-color:black;
}


/* WPF DOCK 패널 유사 CSS 스타일 시작 */

.dock-wpanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap; /* 요소가 한 줄에 모두 배치되도록 설정 */
}

.dock-vpanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.dock-top, .dock-bottom, .dock-left, .dock-right {
    flex: none; /* 크기 고정 */
    position: relative;
}

.dock-content {
    height: 100%;
    width: 100%;
    flex: 1; /* 남은 공간을 차지 */
    overflow: auto; /* 내용이 넘칠 경우 스크롤 가능 */
}

body.dragging {
    user-select: none; /* 드래그 중 텍스트 선택 방지 */
    cursor: ew-resize; /* 드래그 커서 유지 */
}

.dock-resizer {
    position: relative;
    overflow: hidden; /* 필요 시 스크롤 방지 */
}

.dock-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px; /* 핸들의 너비 */
    cursor: ew-resize;
    background-color: rgba(0, 0, 0, 0.3); /* 시각적으로 잘 보이는 색상 */
    z-index: 10;
    display: none; /* 기본적으로 숨김 */
}

/* 오른쪽 패널에만 적용 */
.dock-right .dock-resize-handle {
    left: 0; /* 핸들이 왼쪽에 위치 */
    cursor: ew-resize;
}

/* 다른 패널 기본 핸들 위치 */
.dock-left .dock-resize-handle {
    right: 0; /* 핸들이 오른쪽에 위치 */
}

.dock-top .dock-resize-handle,
.dock-bottom .dock-resize-handle {
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize; /* 수직 리사이즈 커서 */
}

/* 마우스 오버 시 핸들 표시 */
.dock-resizer:hover .dock-resize-handle {
    display: block;
}

/* WPF DOCK 패널 유사 CSS 스타일 끝 */


.container {
    display: flex;
    flex-direction: column; /* 세로 방향으로 요소들을 배치 */
    height: 100%; /* 부모 div의 높이를 화면 높이로 설정 */
}

.fixed {
    height: 100px; /* 위아래 div의 고정 높이 */
    background-color: lightgrey;
}

.dynamic {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 함 */
    background-color: tomato;
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤 가능 */
}

/* WPF DOCK 패널 유사 CSS 스타일 종료  */



/* WPF DOCK 패널 유사 CSS 스타일 시작 */

.dock-wpanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap; /* 요소가 한 줄에 모두 배치되도록 설정 */
}

.dock-vpanel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.dock-top, .dock-bottom, .dock-left, .dock-right {
    flex: none; /* 크기 고정 */
    position: relative;
}

.dock-content {
    flex: 1; /* 남은 공간을 차지 */
    overflow: auto; /* 내용이 넘칠 경우 스크롤 가능 */
}

body.dragging {
    user-select: none; /* 드래그 중 텍스트 선택 방지 */
    cursor: ew-resize; /* 드래그 커서 유지 */
}

.dock-resizer {
    position: relative;
    overflow: hidden; /* 필요 시 스크롤 방지 */
}

.dock-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px; /* 핸들의 너비 */
    cursor: ew-resize;
    background-color: rgba(0, 0, 0, 0.3); /* 시각적으로 잘 보이는 색상 */
    z-index: 10;
    display: none; /* 기본적으로 숨김 */
}

/* 오른쪽 패널에만 적용 */
.dock-right .dock-resize-handle {
    left: 0; /* 핸들이 왼쪽에 위치 */
    cursor: ew-resize;
}

/* 다른 패널 기본 핸들 위치 */
.dock-left .dock-resize-handle {
    right: 0; /* 핸들이 오른쪽에 위치 */
}

.dock-top .dock-resize-handle,
.dock-bottom .dock-resize-handle {
    left: 0;
    right: 0;
    height: 10px;
    cursor: ns-resize; /* 수직 리사이즈 커서 */
}
/*
.dock-bottom{
    width:100%;
    height:16px !important;
}*/
/* 마우스 오버 시 핸들 표시 */
.dock-resizer:hover .dock-resize-handle {
    display: block;
}

/* WPF DOCK 패널 유사 CSS 스타일 끝 */


.container {
    display: flex;
    flex-direction: column; /* 세로 방향으로 요소들을 배치 */
    height: 100%; /* 부모 div의 높이를 화면 높이로 설정 */
}

.fixed {
    height: 100px; /* 위아래 div의 고정 높이 */
    background-color: lightgrey;
}

.dynamic {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 함 */
    background-color: tomato;
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤 가능 */
}

/* WPF DOCK 패널 유사 CSS 스타일 종료  */



.grid-container-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 100%);
    grid-gap: 1px;
}

.grid-container-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 50%);
    grid-gap: 1px;
}

.grid-container-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 20%);
    grid-gap: 1px;
}

.grid-container-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 10%);
    grid-gap: 1px;
}

.grid-container-16 {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(16, 6.25%);
    grid-gap: 1px;
}

.box {
    background: gray;
}

.item {
    background: red;
}

.grid-component {
    width: var( --component-width);
    height: var( --component-height);
    position: relative;
    grid-column: 1/3;
    grid-row: 3/1;
}

.draggable.dragging {
    opacity: 0.5;
}


.tag_name {
    width: 200px;
    background-color: #9646EF;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    margin: 10px 0;
}

.sub-title {
    padding: 10px 0;
    font-weight: bold;
    font-size: larger;
}

.selected-item {
    background-color: #5419d5;
    color: white;
}

.tag-close-btn {
    padding: 0 4px;
    border-radius: 10px;
    margin: 0 10px;
    cursor: pointer;
}

.color-check-label {
    width: 10px;
    height: 10px;
    border-radius: 6px;
    margin: 3px 0 0 0;
}


.apexcharts-canvas {
    max-width: 100%; /* 부모 요소 크기에 맞춤 */
    max-height: 100%;
}

.nav-cust-item {
    padding-right: 3px;
    font-size: 12px;
    font-weight: bold;
}

.cursor-pointer{
    cursor:pointer;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow : none;
}
.btn-primary{
    background:#455DDC;
}
.btn-danger {
    background: #F73463;
}
.btn-secondary{
    background:#727C94;
}

/*table */
table{
    border-collapse:collapse;
}
table thead {
    position: sticky;
    top: 0px;
}
table thead th {
    background-color: #3b3b3b !important;
}
tbody {
    display:block;
    
    max-height: 300px; /* 본문 최대 높이 */
   /* 세로 스크롤 활성화 */
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* even columns width , fix width of table too*/
}
/*input*/
input{
    border:none;
    border-radius:5px;
    height:35px;
    margin-left:3px;
    margin-right:3px;
    
}
input:focus-visible{
    outline:none;
}