form {
    max-width: 60rem;
    margin: auto;
}

em {
    font-size: 0.8rem;
}

.form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.625rem;
    font-size: 0.8rem;
}

.form-inline input {
    width: auto;
    flex: 1 1 auto;
    font-size: 0.8rem;
}

.form-inline select {
    width: 8rem;
    font-size: 0.8rem;
}

.form-inline .btn {
    margin-left: 0.625rem;
    font-size: 0.8rem;
}

.box
{
	background-color: #666666;
	color: white;
}

.note
{
	font-size: 0.8rem;
}

/*--------------------------------------------------------------
# Main <div> swap animation
--------------------------------------------------------------*/
@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes fade-out {
to { opacity: 0; }
}

@keyframes slide-from-right {
from { transform: translateX(50%); }
}

@keyframes slide-to-left {
to { transform: translateX(-50%); }
}

.swap-left {
animation: 
    slide-to-left 200ms ease-in forwards,
    fade-out 200ms ease-out forwards;
}

.swap-right {
animation: 
    slide-from-right 200ms ease-out forwards,
    fade-in 200ms ease-in forwards;
}

#main.htmx-swapping {
animation: 
    slide-to-left 200ms ease-in forwards,
    fade-out 200ms ease-out forwards;
}

#main.htmx-settling {
animation: 
    slide-from-right 200ms ease-out forwards,
    fade-in 200ms ease-in forwards;
}