@import url("style.css");

/* Skilltree */
canvas {
    border-radius: 5px;
    border-width: 3px;
    border-color: B4B8AB;
    background-color: #3c3c3c;
}

.rightalign {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn {
    height: 25px;
}

.overlay {
    display: grid;

    grid-template: "container";
    place-items: end;
    place-content: end;
}

.overlay > * {
  grid-area: container;
  max-width: inherit;
}

.btnoverlay {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border-width:3px;
    border-color:var(--text-dark);
    border-style:solid;
    margin:2px;
}

.overlaybuttons {
    display: flex;
}

.btncontainer {
    display: flex;
}


/* Help button */
.hover {
    margin-right: 5px;
    display: table;
    position: relative;
    color: var(--link-dark);
    text-decoration: none;
    cursor: pointer;
}

.hover:hover, .hover:focus {
    color: hsl(from var(--link-dark) h s 80%);
}

.tooltip {
    z-index: 1;

    bottom: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    transition: 0.25s;
    pointer-events: none;

    background-color: var(--bg-dark);
    border: 1px var(--text-dark) solid;

    width: max-content;
    text-align: left;
    color: var(--text-dark);

    padding: 25px;
}

.hover:hover .tooltip, .hover:focus .tooltip {
    opacity:1;
    bottom: 110%;
}

.hover:focus .tooltip {
    pointer-events: all;
    cursor:auto;
}