* {
    box-sizing: border-box;
}
.edge {
    stroke:blueviolet;
    stroke-width: 4;
}

.circle {
    stroke: black;
    stroke-width: 1;
}

/*.circle:hover {
    fill: yellow;
    cursor: pointer;
}*/

svg {
    background-color: gainsboro;
    border: 3px solid silver;
    border-radius: 5px;
}

#addVertexBtn , #resetGraphBtn {
    width: 75%;
}

.card-min-width-800 {
    width: 850px;
}

.card-min-width-500 {
    width: 550px;
}
h1 {
    text-align: center;
}

#tooltip {
    transition: opacity 0.2s;
    border-radius: 5px;
    text-align: center;
    color: #333;
    font-size: 14px;
    max-width: 200px; /* Prevents the tooltip from being too wide */
    z-index: 10; /* Ensure it's above other elements */
}

#degree-distribution-card {
    width: 100%;
    justify-content: center;
}

.slider-controls {
    margin-top: 5px;
}

.slider-controls label {
    display: block;
}

input[type="range"] {
    width: 85%;
}

.vertical-divider {
    width: 1px;
    background-color: #797979;
    color: #797979;
    height: 100%;
    margin: auto 0;
}

#savedGraphsDropdown {
    max-width: 100%;  /* Ensure dropdown does not exceed its container's width */
    overflow: hidden; /* Hide text that overflows */
    text-overflow: ellipsis; /* Show ellipsis (...) when text overflows */
    white-space: nowrap; /* Prevent text from wrapping to the next line */
}

@media (max-width: 991px) { /* Adjust based on Bootstrap's breakpoints if needed */
    .mb-4-custom {
        margin-bottom: 1.5rem !important; /* Increase spacing between cards on smaller screens */
    }
}