@import url('/_content/GFlex.Components/lib/bootstrap/css/bootstrap.min.css');
@import url('/_content/GFlex.Components/lib/fontawesome/css/fontawesome.css');
@import url('/_content/GFlex.Components/lib/fontawesome/css/solid.css');

/* --------------------------------------------------
    Blazor Framework Defaults
-------------------------------------------------- */

h1:focus {
    outline: none;
}

#blazor-error-ui {
    display: none;
}

/* --------------------------------------------------
    Utilities
-------------------------------------------------- */

.cursor-pointer {
    cursor: pointer;
}

.z-index-100 {
    z-index: 100;
}

.z-index-200 {
    z-index: 200;
}

.z-index-300 {
    z-index: 300;
}

.z-index-400 {
    z-index: 400;
}

.z-index-500 {
    z-index: 500;
}

.z-index-600 {
    z-index: 600;
}

.z-index-700 {
    z-index: 700;
}

.z-index-800 {
    z-index: 800;
}

.z-index-900 {
    z-index: 900;
}

.z-index-1000 {
    z-index: 1000;
}

/* --------------------------------------------------
    Bootstrap Overrides
-------------------------------------------------- */

.table {
    margin: 0;
}

/* --------------------------------------------------
    Forms
-------------------------------------------------- */

.invalid {
    border-color: var(--bs-danger) !important;
}

.valid {
    border-color: var(--bs-success) !important;
}

/* --------------------------------------------------
    <Tooltip> Component
-------------------------------------------------- */

.custom-tooltip {
    background: #000000;
    border-radius: var(--bs-border-radius);
    color: #ffffff;
    font-size: 0.9rem;
    max-width: 250px;
    opacity: 0;
    padding: .4rem .6rem;
    position: fixed;
    transition: opacity 0.4s ease;
    z-index: 1200;
}

    .custom-tooltip.show {
        opacity: 1;
    }

    /* Tooltip arrow */
    .custom-tooltip::after {
        content: "";
        position: absolute;
        border: 6px solid transparent;
    }

    /* Positioning for different tooltip placements */
    .custom-tooltip.top::after {
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        border-top-color: black;
    }

    .custom-tooltip.right::after {
        top: 50%;
        left: -12px;
        transform: translateY(-50%);
        border-right-color: black;
    }

    .custom-tooltip.bottom::after {
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        border-bottom-color: black;
    }

    .custom-tooltip.left::after {
        top: 50%;
        right: -12px;
        transform: translateY(-50%);
        border-left-color: black;
    }