/* A little extra style for a smoother experience */
body {
    font-family: 'Inter', sans-serif;
}
.hidden {
    display: none;
}
/* Custom styles for the toggle switch */
.registration-toggle-btn:checked ~ .dot,
.checkin-number-toggle-btn:checked ~ .dot {
    transform: translateX(100%);
    background-color: #0284c7; /* sky-600 */
}
.registration-toggle-btn:checked ~ .toggle-bg,
.checkin-number-toggle-btn:checked ~ .toggle-bg {
    background-color: #7dd3fc; /* sky-300 */
}
/* Styles for VIP Whitelist Tag Input */
.vip-tag {
    display: inline-flex;
    align-items: center;
    background-color: #e0f2fe; /* sky-100 */
    color: #0c4a6e; /* sky-900 */
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 2px;
}
.vip-tag-remove {
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #0369a1; /* sky-700 */
}
.vip-tag-remove:hover {
    color: #be123c; /* rose-700 */
}
/* Styles for Company Autocomplete */
.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
}
.autocomplete-item:hover {
    background-color: #f1f5f9; /* slate-100 */
}
/* Style for the tooltip arrows */
#vip-counter-tooltip::after, #vip-breakdown-tooltip::after, #attendance-tooltip::after {
    content: ' ';
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #334155 transparent transparent transparent; /* slate-700 */
}