#usercp-abilities-content-wrapper {
     display: flex;
    gap: 2rem; /* Erhöht den Abstand zwischen den Fähigkeiten und dem Formular */
    flex-wrap: wrap; /* Lässt Elemente in die nächste Zeile umbrechen, falls nötig */
}

#usercp-abilities-nav {
    width: 12rem;
}

#abilities-content {
    margin-top: 0;
	max-width:1000px;
	width:100%;
}

#abilities-content-row {
display: flex;
    flex-direction: column;
    flex: 1;
}

#character-abilities-skills {
       display: flex;
    flex-direction: column;
    gap: 1rem; /* Abstand zwischen den aufgelisteten Fähigkeiten */
    flex: 1;
max-width:1000px;
width:100%;}

.default-dice {
    color: grey;
}

.power-level-dice {
    display: flex;
    gap: 1rem;
}

.power-level-dice svg {
    align-self: center;
    height: 1rem;
    width: 1rem;
}

.ability-hidden-opacity,
.skill-hidden-opacity {
    opacity: 0.5;
}

.character-ability-name,
.character-skill-name {
    width: 10rem;
    word-wrap: break-word;
    align-self: center;
}

.character-ability-button svg,
.character-skill-button svg {
    height: 1rem;
    width: 1rem;
}

.character-ability-delete-button svg,
.character-skill-delete-button svg {
    fill: red;
}

#character-abilities-list,
#character-skills-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
	margin-bottom:20px;
}

#character-add-ability-skill {
     display: block;
    margin-top: 1rem; /* Abstand nach oben, damit es unter den Fähigkeiten beginnt */
    flex: 1; /* Lässt das Formular flexibel mit der verfügbaren Breite arbeiten */
    min-width: 300px; /* Stellt sicher, dass das Formular nicht zu schmal wird */
}

#staff-abilities-content {
    margin-top: 0;
}

#staff-abilities-content-row {
    display: flex;
    flex-direction: column;
}

#staff-abilities {
    display: flex;
    gap: 0.25rem;
}

#catalogue-abilities {
    margin-top: 0.25rem;
}

#catalogue-abilities ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.catalogue-ability-name {
    align-self: center;
}

.catalogue-ability-button svg {
    height: 1rem;
    width: 1rem;
}

.catalogue-ability-delete-button svg {
    fill: red;
}

.catalogue-ability-edit-button svg {
    fill: grey;
}

#staff-skills {
    margin-top: 0.25rem;
}

#catalogue-skills ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.catalogue-skill-name {
    align-self: center;
}

.catalogue-skill-button svg {
    height: 1rem;
    width: 1rem;
}

.catalogue-skill-delete-button svg {
    fill: red;
}

.catalogue-skill-edit-button svg {
    fill: grey;
}

#staff-css-classes {
    margin-top: 0.25rem;
}

#catalogue-css-classes ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.catalogue-usergroup-name,
.catalogue-css-class-name {
    align-self: center;
}

.catalogue-css-class-button svg {
    height: 1rem;
    width: 1rem;
}

.catalogue-css-class-delete-button svg {
    fill: red;
}

#catalogue-ability-dialog,
#catalogue-skill-dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    justify-content: center;
}

#catalogue-ability-dialog-background,
#catalogue-skill-dialog-background {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
    opacity: 0.7;
    z-index: 2;
}

#catalogue-ability-dialog-card,
#catalogue-skill-dialog-card {
    display: flex;
    padding: 1rem;
    border-radius: 0.25rem;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
    align-self: center;
    width: 24rem;
    max-height: 32rem;
    background-color: white;
}

#catalogue-ability-dialog-card-form,
#catalogue-skill-dialog-card-form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#catalogue-ability-dialog-action-buttons,
#catalogue-skill-dialog-action-buttons {
    display: flex;
    justify-content: space-between;
}

.hidden {
    display: none;
}

.show {
    display: flex;
}

.label-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.input-type-checkbox {
    flex-direction: row;
}

.plugins-abilities-form {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

ul {
    padding: 0;
    margin: 0;
}

button {
    background-image: none;
}

button[disabled] {
    color: gray;
}

button[disabled]:hover {
    cursor: not-allowed;
    border: 1px solid #bbb;
}