/* Groups */
.group-with-border {
    border: 1px solid var(--group-border-color);
    border-radius: 0.25rem;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-bottom: 3px;
    margin-top: 10px;
    position: relative;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: #fff;
}

.group-with-border-title {
    font-size: 12px;
    text-transform: none;
    font-weight: bold;
    background: var(--group-title-background-color);
    color: var(--group-title-color);
    position: absolute;
    top: -7px;
    padding: 0 5px;
    border: 1px solid var(--group-border-color);
    border-radius: 2px;
    overflow: hidden;
    max-width: 90%;  /* Limit the width to the parent's width */
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break words if they are too long to fit */
    width: max-content; /* Fit to content up to max-width */
}

.group-with-border-title.title-left {
    left: 5%;
}

.group-with-border-title.title-right {
    right: 5%;
}

.group-with-border-title.title-center {
    left: 50%;
    transform: translateX(-50%);
}

.group-white {
    background-color: var(--background-white-color); /* white background */
}

.group-none {
    background-color: var(--background-none-color); /* application background color */

}

.group-gray {
    background-color: var(--background-gray-color); /* gray background */
}

.group-success {
    background-color: var(--background-success-color); /* green background */
}

.group-danger {
    background-color: var(--background-danger-color); /* red background */
}

.group-warning {
    background-color: var(--background-warning-color); /* yellow background */
}

.group-with-border.group-success .group-with-border-title {
    border-color: var(--success-color);
}

.group-with-border.group-danger .group-with-border-title {
    border-color: var(--danger-color);
}

.group-with-border.group-warning .group-with-border-title {
    border-color: var(--warning-color);
}