.EnhancedBox {
    border-radius: var(--border-radius-boxes);
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 20px var(--shadow-color);
}

    .EnhancedBox .FullWidth {
        width: 100%;
    }

    .EnhancedBox .Small {
        width: min-content;
    }

    .EnhancedBox .Large {
        width: max-content;
    }

.EnhancedBoxStripped {
    border: 0px;
    box-shadow: none; /* 0 2px 20px var(--transparent-color);*/
}

.EnhancedBoxDefault {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--default-color) 100%,var(--white-color) 80%), var(--default-color));
    border: var(--border-width) solid var(--default-border-color);
    border-top: var(--border-width) solid var(--default-border-top-color);
}

.EnhancedBoxPrimary {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--primary-color) 100%,var(--white-color) 80%), var(--primary-color));
    border: var(--border-width) solid var(--primary-border-color);
    border-top: var(--border-width) solid var(--primary-border-top-color);
}

.EnhancedBoxInfo {
    color: var(--black-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--info-color) 100%,var(--white-color) 80%), var(--info-color));
    border: var(--border-width) solid var(--info-border-color);
    border-top: var(--border-width) solid var(--info-border-top-color);
}

.EnhancedBoxSuccess {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--success-color) 100%,var(--white-color) 80%), var(--success-color));
    border: var(--border-width) solid var(--success-border-color);
    border-top: var(--border-width) solid var(--success-border-top-color);
}

.EnhancedBoxWarning {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--warning-color) 100%,var(--white-color) 80%), var(--warning-color));
    border: var(--border-width) solid var(--warning-border-color);
    border-top: var(--border-width) solid var(--warning-border-top-color);
}

.EnhancedBoxDanger {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--danger-color) 100%,var(--white-color) 80%), var(--danger-color));
    border: var(--border-width) solid var(--danger-border-color);
    border-top: var(--border-width) solid var(--danger-border-top-color);
}

.EnhancedBoxDark {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--dark-color) 100%,var(--white-color) 80%), var(--dark-color));
    border: var(--border-width) solid var(--dark-border-color);
    border-top: var(--border-width) solid var(--dark-border-top-color);
}

.EnhancedBoxLight {
    color: var(--black-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--light-color) 100%,var(--white-color) 80%), var(--light-color));
    border: 1px solid var(--light-border-color);
    border: var(--border-width) solid var(--light-border-color);
    border-top: var(--border-width) solid var(--light-border-top-color);
}

.EnhancedBoxStrava {
    color: var(--white-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--strava-color) 100%,var(--white-color) 80%), var(--strava-color));
    border: var(--border-width) solid var(--strava-border-color);
    border-top: var(--border-width) solid var(--strava-border-top-color);
}

.EnhancedBoxTransparent {
    color: var(--dark-text-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--transparent-color) 100%,var(--white-color) 80%), var(--transparent-color));
    border: var(--border-width) solid var(--transparent-border-color);
    border-top: var(--border-width) solid var(--transparent-border-top-color);
}

.EnhancedBoxDarkTransparent {
    color: var(--light-text-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--dark-transparent-color) 100%,var(--white-color) 80%), var(--dark-transparent-color));
    border: var(--border-width) solid var(--dark-transparent-border-color);
    border-top: var(--border-width) solid var(--dark-transparent-border-top-color);
}

.EnhancedBoxLightTransparent {
    color: var(--dark-text-color);
    background-image: radial-gradient(circle at center, color-mix(in srgb, var(--light-transparent-color) 100%,var(--white-color) 80%), var(--light-transparent-color));
    border: var(--border-width) solid var(--light-transparent-border-color);
    border-top: var(--border-width) solid var(--light-transparent-border-top-color);
}