:root {
    --dag-node-disabled-color: rgb(182, 182, 182);
    --dag-node-enabled-color: rgb(227, 227, 227);
    --dag-node-solved-color: chartreuse;

    --dag-node-disabled-bg: linear-gradient(to bottom right, rgb(225, 211, 211), rgb(131, 131, 91));
    --dag-node-enabled-bg: linear-gradient(to bottom right, rgb(225, 211, 211), rgb(92, 153, 228));
    --dag-node-hover-bg: linear-gradient(to bottom right, rgb(196, 187, 187), rgb(86, 134, 193));
    --dag-node-solved-bg: linear-gradient(to bottom right, rgb(225, 211, 211), rgb(48, 233, 61));

    --dag-node-size: 70px;
}

.node {
    position: absolute;
    padding: 20px;
    border-radius: 50%;
    width: var(--dag-node-size);
    height: var(--dag-node-size);
    text-align: center;
    /* background-color: var(--dag-node-disabled-color); */
    background-image: var(--dag-node-disabled-bg);
    display: inline;
    z-index: 10;
    text-decoration: none;
    color: black;
    border-color: black;
    border-style: solid;
    border-width: 1.5px;
    user-select: none;
}

.node.enabled {
    animation: enabled 1s;
    /* background-color: var(--dag-node-enabled-color); */
    background-image: var(--dag-node-enabled-bg);
}


.node.enabled:hover {
    --bs-bg-opacity: 1;
    /* background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity)); */
    background-image: var(--dag-node-hover-bg);
    color: white;
}


@keyframes accepted {
    0% { 
        /* background-color: var(--dag-node-enabled-color); */
        background-image: var(--dag-node-enabled-bg);
    }
    100% {
        /* background-color: var(--dag-node-solved-color); */
        background-image: var(--dag-node-solved-bg);
    }    
}

@keyframes enabled {
    0% {
        /* background-color: var(--dag-node-disabled-color); */
        background-image: var(--dag-node-disabled-bg);
    }
    100% {
        /* background-color: var(--dag-node-enabled-color); */
        background-image: var(--dag-node-enabled-bg);
    }    
}

.node.solved {
    animation: accepted 1s;
    /* background-color: chartreuse; */
    background-image: var(--dag-node-solved-bg) !important;
}


.node.solved:hover {
    /* background-color: chartreuse !important; */
    background-image: var(--dag-node-solved-bg) !important;
    color: black !important;
}




.dag-viewer > svg {
    position: relative; 
    z-index: -1;
}

.dag-viewer {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.dungeon-item {
    height: 150px !important;
    min-width: 85px;
    border-radius: 10px;
}