/* Style for the mask container */
.element-mask-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: var(--min-height);
    z-index: 9999;
    pointer-events: none;
}

/* Style for the individual mask panels */
.mask-panel {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.75);
    pointer-events: all;
    transition: all 0.3s ease-in-out;
}

/* New styles for the tutorial description box */
.tutorial-box {
    position: absolute;
    z-index: 10001; /* Must be on top of the mask and the highlighted element */
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    width: calc(90% - 2 * 1.5rem);
    max-width: 320px;
    border: 1px solid #e5e7eb;
}

.tutorial-box .button-container {
    font-size: 14px;
}

.tutorial-box .button-container button:disabled {
    filter: grayscale(60%) brightness(1.2) opacity(0.6);
    color: #b0b0b0 !important;
    cursor: not-allowed;
    text-shadow: none !important;
}