#chart {
    width: 100%;
    height: 500px;
    position: relative;
   
}

.w3-button {
    font-size: 0.7em;
}


.w3-select {
    top: 10px;
    left: 16px;
    width: auto;
    height: 34px;
    background-color:  white;
    color: #495057;
    font-size: 14px;
    position: absolute;
    border: none;
   
}

    .w3-select:hover {
        color: #343a40; /* Black text when hovering */
        background-color: #e9ecef; /* Light gray background when hovering */
    }

    .w3-select:focus {
        border-color: lightseagreen; /* Same as the .btn-primary's background */
        outline: none;
    }

    .w3-select > option {
        font-size: 14px;
    }

#button-container {
    position: absolute;
    top: 10px;
    left: 10px;
    border: none;
    display: flex;
    gap: 0;
}


/* CSS for custom-button */
.custom-button {
    background-color:  gainsboro ;
    border: none;
    color: white  ;
    /*padding: 10px 20px;*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    margin: 0;
    cursor: pointer;
    
    width: 40px; /* กำหนดความกว้างของปุ่ม */
    height: 30px; /* กำหนดความสูงของปุ่ม */
}

    /* Hover state */
    .custom-button:hover {
        background-color: #45a049;
    }

    /* Active state */
    .custom-button:active {
        background-color: #3e8e41;
    }

    /* Disabled state */
    .custom-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }