@keyframes colorErrorChange {
    0% { color: red; }
    50% { color: #800000; }
    100% { color: red; }
}
.error-message {
    animation: colorErrorChange 1s infinite;
}

@keyframes colorSuccessChange {
    0% { color: darkgreen; }
    50% { color: #00ca00; }
    100% { color: darkgreen; }
}
.success-message {
    animation: colorSuccessChange 1s infinite;
}


@keyframes colorWarningChange {
    0% { color: #beb000; }
    50% { color: #ffe500; }
    100% { color: #beb000; }
}
.warning-message {
    animation: colorWarningChange 1s infinite;
}


@keyframes colorInfoChange {
    0% { color: #006f7d; }
    50% { color: #00e1ff; }
    100% { color: #006f7d; }
}
.info-message {
    animation: colorInfoChange 1s infinite;
}

@keyframes colorSecondaryChange {
    0% { color: #434343; }
    50% { color: #b0b0b0; }
    100% { color: #232323; }
}
.secondary-message {
    animation: colorSecondaryChange 1s infinite;
}


@keyframes colorDangerChange {
    0% { color: #ed0000; }
    50% { color: #d17575; }
    100% { color: #920000; }
}
.danger-message {
    animation: colorDangerChange 1s infinite;
}



tr[data-href] {
    cursor: pointer;
}

.divs-hover div:hover {
    background-color: #f5f5f5; /* สีพื้นหลังเมื่อ hover */
    transition: background-color 0.3s; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}

.div-hover:hover {
    background-color: #f5f5f5; /* สีพื้นหลังเมื่อ hover */
    transition: background-color 0.3s; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}





.custom-legend {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.custom-legend-color {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.vis-label {
    position: absolute;
    background-color: white;
    border: 1px solid gray;
    padding: 2px;
    font-size: 12px;
    pointer-events: none;
}

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1050; /* Ensure it's above other elements */
    visibility: hidden; /* Initially hidden */
}

.loading-container.show {
    visibility: visible; /* Show when needed */
}