.card {
  box-shadow: 2px 3px 7px rgba(0, 0, 0, .2);
}

.table > :not(caption) > * > * {
    padding: 0.3rem 0.3rem;
}

table td input {
    color: #d77979;
    border: none;
    padding: 5px;
    background: none;
}

table td select.form-select, table td input::placeholder {
    color: #d77979;
    font-size: 12px;
}

table td input.small-input, table td select.small-input{
    width: 40px;
}
table td input.medium-input, table td select.medium-input{
    width: 80px;
}
table td input.large-input, table td select.large-input{
    width: 100px;
}

.scenario_summary table, table{
    font-size: 12px;
}
label{
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

table td.alert-warning{
    --ct-alert-color: var(--ct-warning-text-emphasis);
    color: var(--ct-warning-text-emphasis);
    --ct-alert-bg: var(--ct-warning-bg-subtle);
    background: var(--ct-warning-bg-subtle);
    --ct-alert-border-color: var(--ct-warning-border-subtle);
    --ct-alert-link-color: var(--ct-warning-text-emphasis);
}

table td.alert-danger{
    --ct-alert-color: var(--ct-danger-text-emphasis);
    color: var(--ct-danger-text-emphasis);
    --ct-alert-bg: var(--ct-danger-bg-subtle);
    background: var(--ct-danger-bg-subtle);
    --ct-alert-border-color: var(--ct-danger-border-subtle);
    --ct-alert-link-color: var(--ct-danger-text-emphasis);

}

table td.alert-success{
    --ct-alert-color: var(--ct-success-text-emphasis);
    color: var(--ct-success-text-emphasis);
    --ct-alert-bg: var(--ct-success-bg-subtle);
    background: var(--ct-success-bg-subtle);
    --ct-alert-border-color: var(--ct-success-border-subtle);
    --ct-alert-link-color: var(--ct-success-text-emphasis);
}

/* Container for ALL square profile images */
.avatar-container {
    overflow: hidden; /* This hides the cropped parts */
}

/* Image inside the container */
.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CRITICAL: Maintains aspect ratio and fills the space */
}

/* Specific size utility classes (optional, if you have many sizes) */
.avatar-32 {
    width: 32px;
    height: 32px;
}

.avatar-72 {
    width: 72px;
    height: 72px;
}


.avatar-128 {
    width: 128px;
    height: 128px;
}