:root {
    --color-primary: #615FFF;
}

.page-container {
    position: relative;
    min-height: 100dvh;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
}

.ts-control {
    z-index: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Tooltip */
/* ------------------------------------------------------------------------------------------------------------------ */
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 300px;
    color: #fff;
    text-align: center;
    padding: 0.25rem 0.5rem;
    right: 32%;
    bottom: 46%;
    margin-left: -150px; /* Use half of the width (150/2 = 75), to center the tooltip */
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 100;
    font-size: 12px ;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

[data-tooltip]:hover::after {
    display: block;
    position: absolute;
    content: attr(data-tooltip);
    border: 1px solid black;
    background: #eee;
    padding: .25em;
    max-width: 400px;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Navigation Modal */
/* ------------------------------------------------------------------------------------------------------------------ */
.navigation-modal-button {
    text-decoration: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    padding: 15px;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(79, 70, 229);
    background-color: white;
    border: 2px solid rgb(79, 70, 229)
}