:root {
    --secondary-bg: whitesmoke;
    --secondary-fg: #4a5568;
    --highlight-bg: #0d9488;
    --button-bg: #0d9488;
    --button-fg: white;
    --button-hover: #0f746b;
}

.content{
    display: flex;
    flex-direction: column;

    background-color: var(--secondary-bg);
    color: var(--secondary-fg);

    border-radius: .25rem;
    max-width: 500px;
    width: 100%;
    margin: auto;
}

.content form{
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem;
}

.content input{
    padding: .25rem 0;
    border-radius: .25rem;
    width: 100%;
    padding-left: .5rem;
}

.content input:focus,
.content select:focus{
    outline-color: var(--highlight-bg);
}

.content label{
    width: 200px;
    font-weight: bold;
    padding-top: 1rem !important;
}

.content button{
    background-color: var(--button-bg);
    color: var(--button-fg);
    padding: .5rem 3rem;
    border-radius: .25rem;
}

.content .header{
   display: flex;
}

.content .header button{
   width: 100%;
   border-radius: 0;
   height: 3.5rem;
   font-weight: bold;
}

.content :not(.header) button:hover:not(:disabled){
    background-color: var(--button-hover);
}

.content .header button:first-child{
    border-radius: .25rem 0 0 0;
}

.content .header button:last-child{
    border-radius: 0 .25rem 0 0;
}

.content .selected{
    background-color: var(--secondary-bg);
    color: var(--button-bg);
}

.selector{
    display: flex;
    gap: .25rem;
}

.selector > *{
    width: 100% !important;
}

select{
    border-radius: .25rem;
}

input:disabled,
select:disabled,
option:disabled,
button:disabled{
    background-color: var(--secondary-bg);
    color: var(--secondary-fg);
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #555;
    color: #fff;
    text-align: center;                
    font-size: small;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}