div.django-listing-container {
    position: relative;
    th {
        cursor: default;
    }
    table.django-listing {
        margin: 0 0 6px 0;
        width: 100%;
        &.table-bordered {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            display: table;
        }
        th {
            vertical-align: text-bottom;
            &.sortable {
                a {
                    padding-right: 20px;
                    display: block;
                    position: relative;
                    text-decoration: none;
                }

                span.sorting {
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    bottom: 0px;
                    width: 20px;
                }
            }
        }
        td {
            &.type-bool  {
                vertical-align: middle;
                input {
                    margin: auto;
                }
            }
            &.cls-checkboxcolumn,&.col-selection_checkbox,
            &.cls-booleancolumn div.form-field {
                text-align: center;
            }
            &.render-error {
                background-color: red;
                color: white;
                font-weight: bold;
            }
        }
    }
    thead {
        th.col-selection_checkbox  {
            vertical-align: middle;
            text-align: center;
        }
    }
    div.django-listing {
        div.div-row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }
        &.div-striped div.row-container:nth-of-type(odd) {
            background: #e9e9e9;
            &:hover{
                background: #ccc;
            }
        }
        &.div-separated div.row-container {
            background: white;
            margin-top: 8px;
            margin-bottom: 8px;
            border-radius: 8px;
            border: 2px solid rgba(0,0,0,0.2);
            padding: 8px;

            &.selected {
                background: #EEEEEE;
                box-shadow: 0 0 0 0.25rem rgba(0,0,0, 0.4);
                border-color: transparent;
            }
        }
        &.div-bordered {
            border: 1px solid #cccccc;
        }
    }
    ul {
        &.pagination {
            justify-content: center;
            align-items: center;
            li {
                &.scale_pages ul {
                    padding: 0 10px;
                    list-style: none;
                    display: flex;
                }
                &.pagination-info {
                    padding: 0 10px;
                    form.goto-page {
                        display:inline;
                        input {
                            width: 40px;
                        }
                    }
                }
                &.row-info {
                    padding: 0 10px;
                }
                &.goto-page {
                    padding: 0 10px;
                }
            }
        }
        &.pagination-groups {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 0;
            > li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
        }
    }
    div.variationstoolbaritem {
        ul {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
    }
    nav.toolbar label {
        margin: 0;
    }
    .bottom-toolbar {
        margin-top: 10px;
    }
    .btn-toolbar {
        select {
            font-family: django_listing, arial;
            vertical-align: middle;
        }
        .sortdropdowntoolbaritem a {
            font-family: django_listing, arial;
        }
        .btn-group, .btn-group-sm {
            margin-top: 2px;
            margin-bottom: 2px;
        }
    }
    td.cls-totalcolumn {
        font-weight: bold;
    }
    div.form-buttons {
        text-align: center;
        margin-top: 20px;
    }
    div.row-container {
        position: relative;
        div.selection-overlay {
            position: absolute;
            z-index: 999;
            height: 100%;
            width: 100%;
            cursor: pointer;
            &.hover {
                div.checkbox {
                    display: none;
                }
            }
            div.checkbox {
                margin: 0px;
                font-size: 28px;
                opacity: 1;
                cursor: pointer;
                color: white;
                text-shadow:
                   3px 3px 10px rgba(0, 0, 0, 0.5),
                 -1px -1px 1px #444444,
                  1px -1px 1px #444444,
                  -1px 1px 1px #444444,
                   1px 1px 1px #444444;
                span.unselected-icon {
                    display: block;
                    opacity: 0.5;
                }
                span.selected-icon {
                    display: none;
                }
            }
        }
        &.selected {
            div.selection-overlay {
                div.checkbox {
                    span.unselected-icon {
                        display: none;
                    }
                    span.selected-icon {
                        display: block;
                    }
                }
                &:hover {
                    div.checkbox {
                        span.unselected-icon {
                            display: none;
                        }
                        span.selected-icon {
                            cursor: pointer;
                            display: block;
                        }
                    }
                }
            }
        }
        &:hover {
            div.selection-overlay {
                &.hover {
                    div.checkbox {
                        display: block;
                    }
                }
                div.checkbox {
                    span.unselected-icon {
                        display: block;
                        opacity: 0.5;
                        cursor: pointer;
                        &:hover {
                            opacity: 1;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
    div.listing-spinner {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }
    &.spinning {
        .django-listing {
            opacity: 0.3;
        }
        div.listing-spinner {
            display: block;
            opacity: 1;
            z-index: 1000;
        }
    }
    .table-striped > tbody > tr.selected {
        background-color: black;
        > * {
            color: white;
        }
    }

    @include media-breakpoint-down(lg) {
        .toolbar_item {
            margin-top: 3px;
            margin-bottom: 3px;
        }
    }
}

.btn.gb-filter.visited {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

@keyframes row-flash-once {
    0% { background-color: #0033ff; }
    50% { background-color: #58ae39; }
}

.django-listing-container .row-container.flash-once {
    animation: row-flash-once 0.5s; /* Removed "infinite" */
}

@keyframes row-insert-animation {
    0% { opacity: 0; transform: translateY(100%);}
    100% { opacity: 1; transform: translateY(0px);}
}

.django-listing-container .row-container.flash-once.insert {
    animation: row-insert-animation 0.5s; /* Removed "infinite" */
}

@include media-breakpoint-up(lg)  {
    div.django-listing-container td.type-str.cls-filesizecolumn,
    div.django-listing-container td.type-int,
    div.django-listing-container td.type-float,
    div.django-listing-container td.agg-minmax,
    div.django-listing-container td.agg-minmaxavg {
        text-align: right;
    }
}

form.listing-form {
    margin: 10px 0 20px;
    div.form-buttons {
        text-align: center;
        margin-top: 20px;
    }
    div.form-row {
        flex-wrap: nowrap;
        align-items: flex-end;
    }
    div.form-field {
        flex-shrink: 10;
        //min-width: fit-content;
        margin: 5px;
        width: 100%;
        > .label_input > .select2 {
            display: block;
        }
        label {
            margin-bottom: .1em;
        }
        span.ending {
            white-space: nowrap;
            margin: auto 4px;
        }
        p.help {
            font-size: 9px;
            color: #888888;
            margin-bottom: 0;
        }
        &.inline div.label_input {
            display: flex;
            label {
                white-space: nowrap;
                margin: auto 5px auto 0;
            }
        }
        &.errors {
            background-color: rgba(255,0,0,.25);
            padding:5px;
            border: 1px solid red;
            border-radius: 6px;
            color: red;
            font-weight: bold;
            input {
                border-color: red;
                &:focus {
                    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
                }
            }
        }
    }
}

div.django-listing-container, form.listing-form {
    div.form-field.errors,
    ul.listing-row-form-errors {
        background-color: rgba(255,0,0,.25);
        padding: 5px;
        border: 1px solid red;
        border-radius: 6px;
        color: red;
        font-weight: bold;
        text-align: left;
        input {
            border-color: red;
            &:focus {
                box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
            }
        }
        ul.errorlist {
            list-style: none;
            padding: 0;
            display: inline;
            li {
                display: inline;
                list-style: none;
                font-size: 12px;
            }
        }
    }
}

form span.asteriskField {
    color: #FF0000;
    padding-left: 5px;
}

div.django-listing-container div.form-field ul.multiple-checkboxes,
form.listing-form div.form-field ul.multiple-checkboxes {
    list-style: none;
    padding-left: 10px;
    input {
        vertical-align: middle;
    }
    &.inline {
        display: flex;
        li {
            margin-right: 10px;
        }
    }
    @include media-breakpoint-down(lg) {
        display: flex;
        li {
            margin-right: 10px;
        }
    }
}

div.django-listing-container div.form-field ul.multiple-radios,
form.listing-form div.form-field ul.multiple-radios {
    list-style: none;
    padding-left: 10px;
    li {
        white-space: nowrap;
    }
    input {
        vertical-align: middle;
    }
    &.inline {
        display: flex;
        li {
            margin-right: 10px;
        }
        label {
            white-space: nowrap;
        }
    }
    @include media-breakpoint-down(lg) {
        display: flex;
        li {
            margin-right: 10px;
        }
    }
}


div.django-listing-selecting.selection_position_hidden tr {
    cursor: pointer;
    &.selected {
        background-color: #333333;
        color: #ffffff;
        cursor: pointer;
    }
}

div.thumbnail.row-container {
    padding: 0;
}

div.thumbnail-container {
    padding-left: 10px;
}


.listing-selection-menu {
    display: none;
    background-color: #666666;
    color: #ffffff;
    font-size: 20px;
    padding: 4px 20px;
    .menu-icon {
        font-weight: normal;
        font-size: 16px;
        vertical-align: middle;
    }
    button {
        margin: 0 5px;
    }
    a {
        cursor: pointer;
    }
    button.submit-icon {
        border: none;
        background: none;
        color: inherit;
        cursor: pointer;
        &:focus {
            outline: none;
        }
    }
}

ul.errorlist.nonfield {
    background-color: #fbb;
    color: red;
    padding: 10px;
    border: 1px solid red;
    border-radius: 4px;
    li {
        list-style: none;
    }
}

ul.actions-buttons {
    margin: 0;
    padding: 0;
    li {
        list-style: none;
        display: inline;
        margin: 1px 2px;
        button, a {
            padding: 0 1px 1px 0;
            font-size: 12px;
            &.disabled {
                background-color: #aaa;
                border-color: #aaa;
            }
            span.text {
                padding: 0 2px;
            }
        }
    }
}

div.listing-spinner {
    font-size: 32px;
}

table.object-popup {
    td {
        padding-right: 10px;
        &.section {
            padding-top: 10px;
            span {
                font-weight: bold;
                font-size: 125%;
                text-decoration: underline;
            }
        }
    }
    th {
        vertical-align: top;
    }
}

.empty-listing-upload-button {
    text-align: center;
}

.empty-listing-upload-drop-here {
    text-align: center;
    margin: 16px;
    color: #8d8d8d;
}

empty-listing-upload-accepted-files {
    text-align: center;
    margin: 16px;
    font-style: italic;
}

form.dropzone .dz-preview.dz-image-preview {
    background: none;
}

form.dropzone {
    min-height: 150px;
    border: none;
    background: none;
    padding: initial;
    position: relative;
    .dz-preview .dz-image {
        border-radius: 8px;
    }
    .drag-overlay {
        background: #8888FFA0;
        border: 3px dashed #4444FF;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        z-index: 10;
        border-radius: 1rem;
        .overlay-inner {
            margin: auto;
            font-size: 6rem;
            color: #FFFFFF;
        }
    }
    &.drag-over .drag-overlay {
        display: flex;
    }
    &.dz-drag-hover {
        border: none;
    }
    .dz-success-mark svg path {
        fill: #28a745;
        fill-opacity: 1;
        stroke: #444444;
        stroke-opacity: 1;
    }
    .dz-error-mark svg g g {
        fill: red;
        fill-opacity: 1;
        stroke: #444444;
        stroke-opacity: 1;
    }
}

.filters-form .label_input > .multiple-radios, .filters-form .label_input > .multiple-checkboxes,
.listing-form .label_input > .multiple-radios, .listing-form .label_input > .multiple-checkboxes {
    border: 1px solid lightgrey;
    padding: 2px 5px;
    border-radius: 4px;
    &.inline {
        padding: 2px 5px 2px 0px;
        display: flex;
        input {
            display: inline-block;
            margin-left: 10px;
        }
        label {
            white-space: nowrap;
        }
    }
    @include media-breakpoint-down(lg) {
        padding: 2px 5px 2px 0px;
        display: flex;
        input {
            display: inline-block;
            margin-left: 10px;
        }
    }
}

.group-by-form.listing-form {
    background-color: #d4ecd4;
}

@include media-breakpoint-down(lg)  {
    th {
        display: inline-flex;
    }
    th:before {
        padding-right: 5px;
    }
    th.not-sortable {
        display: none;
    }
}

div.form-check-input {
    width: inherit;
    height: inherit;
    background: none;
    border: none;
    margin: 0;
}

span.cell-with-filter {
    display: flex;
    justify-content: space-between;

}

a.cell-filter {
    text-decoration: none;
}

.group-by-container {
    border: 2px solid #a0a0a0;
    border-radius: 6px;
    padding: 20px;
    background-color: #ebebeb;
    margin-bottom: 10px;
    display: none;

    .dual-listbox {
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 8px;
        margin: 5px;
        padding: 5px;
        .dual-listbox__search {
            padding: 3px;
            border-radius: 4px;
            background-color: white;
        }

        .dual-listbox__button {
            padding: 3px;
            border-radius: 4px;
            background-color: #a0a0a0;
        }

        .dual-listbox__title {
            padding: 3px;
            margin-top: 3px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .dual-listbox__item {
            padding: 3px;
        }

        .dual-listbox__available, .dual-listbox__selected {
            width: 100%;
            height: 200px;
            border-radius: 4px;
            background-color: white;
            margin: 0;
        }
        .dual-listbox__container > div {
            flex-grow: 1;
        }
        .dual-listbox__container > div.dual-listbox__buttons {
            flex-grow: unset;
        }
    }
    @include media-breakpoint-down(md) {
        padding: 8px;
        .dual-listbox {
            border: none;
            margin: 0 0 10px 0;
            padding: 0;
        }
        .dual-listbox__container > div {
            width: 140px;
        }
        .dual-listbox__container > div.dual-listbox__buttons {
            width: 24px;
        }
    }
    @include media-breakpoint-up(xl) {
        min-width: 1100px;
    }
}

#content-body:has(.attached-form-container.flipped) > *:not(.attached-form-container) {
  pointer-events: none;
  opacity: 0.2;
}

div:has(.has-gb-cols) + div.attached-form-container {
  pointer-events: none;
  opacity: 0.2;
}

@keyframes flipIn3D {
    0% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes flipOut3D {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-90deg);
    }
}

.attached-form-container {
    .form-buttons {
        display: flex;
        flex-grow: 1;
        align-items: end;

        .form-buttons-lines {
            display: flex;
            align-items: stretch;
            flex-direction: column;
            flex-grow: 1;

            .form-buttons-line {
                display: flex;
                align-content: end;
                flex-grow: 1;

                .spacer {
                    min-width: 10px;
                }

                & > button {
                    flex: 1;
                    margin: 0 3px;
                    padding-left: 8px;
                    padding-right: 8px;
                }
            }
        }
    }
    &.animate {
        padding: 5px;
        &.flipped .form-fields {
            position: relative;
            perspective: 1000px;
            perspective-origin: center;
            transform-style: preserve-3d;
            transform-origin: center center;

            .form-fields-inner {
                position: relative; /* Changed from absolute */
                backface-visibility: hidden;
                transform-style: preserve-3d;
                transform-origin: center center;
                animation: flipIn3D 0.3s linear forwards;
            }
        }
        .form-fields.flip-out {
            position: relative;
            perspective: 1000px;
            perspective-origin: center;
            transform-style: preserve-3d;
            transform-origin: center center;

            .form-fields-inner {
                position: relative; /* Changed from absolute */
                backface-visibility: hidden;
                transform-style: preserve-3d;
                transform-origin: center center;
                animation: flipOut3D 0.3s linear forwards;
            }
        }
    }
}


