/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    color: #FFF;
    background-color: black;
}

code {
    color: #E01A76;
}

img {
    object-fit: contain;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 100%;
    top: 0;
    background: linear-gradient(to right, #1a202c, #2d3748);
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: all 150ms ease;
    z-index: 1;
    white-space: nowrap;
}

.tooltip .tooltiptext:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent #1a202c;
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    margin-left: 5px;
}

.infinite-loader {
    display: none;
}

[x-cloak] { 
    display: none !important; 
}

.loading-indicator {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
    transition-delay: 0.3s;
}

.htmx-request .loading-indicator {
    visibility: visible;
    opacity: .5;
}

.htmx-request.loading-indicator {
    visibility: visible;
    opacity: .5;
}