.swal2-confirm {
    background-color: #6c5ce7 !important; /* SwalAlert2 확인 버튼 색상을 명시적으로 지정 */
    color: white !important; /* 버튼 텍스트 색상 */
    border: none !important;
}

.checkbox-true {
    background-color: green;
    border-color: green;
}

.checkbox-false {
    background-color: red;
    border-color: red;
}

#exchange-result {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #fff;
    display: none;
}

#exchange-result li {
    padding: 10px;
    cursor: pointer;
}

#exchange-result li:hover {
    background: #f0f0f0;
}

/*
차트를 가로로 나란히 배치하는 Flexbox 스타일
*/
.chart-container {
    display: flex;
    justify-content: space-around; /* 차트 간의 간격을 균등하게. */
    align-items: center; /* 차트들을 수직 중앙에 정렬 */
    flex-wrap: wrap; /* 차트가 화면을 넘치면 다음 줄로 이동*/
}

.chart-wrapper {
    width: 100%;
    max-width: 400px; /* 차트 최대 너비 설정 */
    height: auto;
    margin: 3px;
}

@media (max-width: 768px) {
    .chart-wrapper {
        max-width: 100%; /* 작은 화면에서는 최대 너비를 100%로 설정 */
    }
}

/* 텍스트 일정 부분을 잘라서 처리하는 CSS */
.text_truncate {
    display: inline-block;
    max-width: 200px; /*원하는 최대 너비 설정*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

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

.text_tooltip .text_tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}

.text_tooltip:hover .text_tooltiptext {
    visibility: visible;
    opacity: 1;

}