.description.error {
    color: rgb(var(--color-destruction));
    font-weight: 500;
}

.description.error>ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.form-wrapper {
    margin: 0 auto;
}

.cp-top-bar~.form-wrapper {
    border-radius: 0 0 20px 20px !important;
    overflow: visible !important;
}

.form-wrapper>form>.fields * {
    max-width: 100%;
}

.form-wrapper>form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-level-4);
    width: 100%;
    max-width: 100%;
    margin: auto;
    overflow: visible;
}

.form-wrapper>form>.title {
    font-size: var(--text-size-header-small);
    font-weight: 700;
    font-family: "Montserrat";
}

.form-wrapper>form>.description {
    font-size: var(--text-size-text-small);
    font-weight: 400;
    font-family: "Inter";
}

.text-align-center form>.title,
.text-align-center form>.description {
    text-align: center;
    align-self: center;
}

.form-wrapper>form>.fields {
    margin: var(--spacing-level-4) 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-level-3) 0;
    align-items: flex-start;
    justify-items: flex-end;
    width: 100%;
}

.form-wrapper.form-column>form>.fields {
    margin: var(--spacing-level-4) 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-items: flex-start;
    gap: 0;
    width: 100%;
}

.text-align-center.form-wrapper>form button[type="submit"] {
    margin: auto;
}

.form-wrapper>form label:not(.checkboxes label) {
    padding: calc(var(--spacing-level-5) * 2) var(--spacing-level-4) calc(var(--spacing-level-5) * 2) 0;
    color: rgb(var(--text-color));
    font-size: 16px;
    text-align: right;
    max-width: 150px;
    cursor: text;
}

.form-wrapper.form-column>form label:not(.checkboxes label) {
    padding: calc(var(--spacing-level-5) * 2) 0 var(--spacing-level-5) 0;
    max-width: 100%;
    font-weight: 500;
    text-align: left;
}

.form-wrapper.form-column>form label:not(.checkboxes label):first-child,
.form-wrapper.form-column>form input[type="hidden"]+input[type="hidden"]+label:not(.checkboxes label) {
    padding-top: 0;
}

.form-wrapper>form .checkboxes+label[data-role="checkboxes-label"] {
    display: none;
}

.form-wrapper>form .checkboxes {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: var(--spacing-level-4) var(--spacing-level-5);
    align-items: center;
    justify-items: flex-start;
    width: 100%;
    margin-top: var(--spacing-level-5);
}

.form-wrapper.form-column>form .checkboxes+label:not(.checkboxes label) {
    padding: var(--spacing-level-3) 0 var(--spacing-level-5) 0;
}

.form-wrapper>form .checkboxes>input[type="checkbox"],
.form-wrapper>form .checkboxes>input[type="radio"] {
    height: 16px;
    width: 16px;
    border-radius: 100px;
    margin: 0;
    outline: none;
    cursor: pointer;
    border: 1px solid rgb(var(--color-bg-black), 0.3);
    background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
    background-position: center;
    transition: all 0.15s ease-in-out;
    overflow: visible;
}

.form-wrapper>form .checkboxes>input[type="checkbox"]:checked,
.form-wrapper>form .checkboxes>input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z' fill='%233b82f7'/%3E%3C/svg%3E%0A");
    border: 1px solid rgb(var(--color-active-element));
}

.form-wrapper>form .checkboxes>label {
    cursor: pointer;
    user-select: none;
}

.form-wrapper>form input:not([type="checkbox"]):not([type="radio"]),
.form-wrapper>form select {
    padding: calc(var(--spacing-level-5) * 2) var(--spacing-level-4);
    font-size: 16px;
    border: 1px solid rgb(var(--color-bg-black), 0.3);
    border-bottom: 2px solid rgb(var(--color-bg-black), 0.3);
    border-radius: 10px;
    max-width: 350px;
    width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis;
    transition: all 0s 0.1s;
}

.form-wrapper>form select[multiple] {
    overflow: auto !important;
}

.dragging-file .form-wrapper>form input[type="file"] {
    border-color: rgb(var(--color-active-element)) !important;
    background: rgb(var(--color-active-element)) !important;
    z-index: 100;
    color: rgb(var(--color-text-dark));
    transition: all 0s 0s !important;
}

.form-wrapper>form select {
    cursor: pointer;
}

.form-wrapper>form textarea {
    padding: calc(var(--spacing-level-5) * 2) var(--spacing-level-4);
    font-size: 16px;
    border: 1px solid rgb(var(--color-bg-black), 0.3);
    border-bottom: 2px solid rgb(var(--color-bg-black), 0.3);
    border-radius: 10px;
    max-width: 350px !important;
    width: 100%;
    font-family: 'Inter';
    font-weight: 400;
    resize: none;
}

.form-wrapper>form input:not([type="checkbox"]):focus,
.form-wrapper>form select:focus,
.form-wrapper>form textarea:focus {
    border-bottom: 2px solid rgb(var(--color-active-element));
}

.form-wrapper>form input+.helptext,
.form-wrapper>form textarea+.helptext,
.form-wrapper>form .django-ckeditor-widget+.helptext {
    font-size: var(--text-size-text-small);
    color: rgb(var(--text-color), var(--color-text-transparency));
    margin: var(--spacing-level-5) 0 0 0;
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.15s ease, opacity 0.2s ease, z-index 0s 0.2s;
    background: linear-gradient(to bottom, rgb(var(--color-bg-white)), rgb(var(--color-bg-white), 0));
    padding-bottom: var(--spacing-level-3);
    margin-bottom: calc(0px - var(--spacing-level-3));
    z-index: -1;
}

.form-wrapper>form input:focus+.helptext,
.form-wrapper>form textarea:focus+.helptext,
.form-wrapper>form .django-ckeditor-widget:focus+.helptext {
    opacity: 1;
    transform: translateY(0px);
    z-index: 5;
    transition: transform 0.15s ease, opacity 0.2s ease, z-index 0s;
}

.form-wrapper>form input:focus::placeholder {
    opacity: 0.5;
}

.form-wrapper.form-column>form input+.helptext+label:not(.checkboxes label),
.form-wrapper.form-column>form textarea+.helptext+label:not(.checkboxes label),
.form-wrapper.form-column>form .django-ckeditor-widget+.helptext+label:not(.checkboxes label) {
    padding-top: 0;
    transition: all 0.2s ease;
}

.form-wrapper.form-column>form input:focus+.helptext+label:not(.checkboxes label),
.form-wrapper.form-column>form textarea:focus+.helptext+label:not(.checkboxes label),
.form-wrapper.form-column>form .django-ckeditor-widget:focus+.helptext+label:not(.checkboxes label) {
    opacity: 0.25;
}

.file-field {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    font-size: var(--text-size-text-small);
    color: rgb(var(--text-color), var(--color-text-transparency));
}

.file-field>a {
    color: rgb(var(--color-active-element));
}

@media (max-width: 500px) {
    .form-wrapper>form>.fields {
        gap: 0;
        grid-template-columns: 1fr;
        justify-items: flex-start;
    }

    .form-wrapper>form label {
        text-align: left;
    }

    .form-wrapper>form input~label:not(.checkboxes label) {
        padding: calc(var(--spacing-level-5) * 4) var(--spacing-level-4) calc(var(--spacing-level-5) * 2) 0;
    }
}