.arkounay-ux-collection .card {
    background-color: white;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
}

.arkounay-ux-collection .w-100 {
    width: 100%;
}

.arkounay-ux-collection .d-flex {
    display: flex;
}

.arkounay-ux-collection .d-none {
    display: none;
}

.arkounay-ux-collection .collection-up {
    padding-right: 10px;
}

.arkounay-ux-collection .card {
    position: relative;
}

.arkounay-ux-collection .bottom-0 {
    bottom: 0;
}

.arkounay-ux-collection .end-0 {
    right: 0;
}

.arkounay-ux-collection .btn-collection-container {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
}

.arkounay-ux-collection .position-absolute {
    position: absolute;
}

.arkounay-ux-collection .collection-insert {
    padding: 5px;
}

.arkounay-ux-collection .collection-up, .arkounay-ux-collection .collection-down, .arkounay-ux-collection, .collection-remove, .collection-insert {
    border: none;
    background: none;
    cursor: pointer;
}

.arkounay-ux-collection .text-end {
    text-align: right;
}

.arkounay-ux-collection .collection-add {
    background-color: #f6f6f6;
    line-height: 32px;
    padding: 0 10px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    transition: all ease 200ms;
    display: inline-flex;
    align-items: center;
}

.arkounay-ux-collection .collection-add:hover {
    border: 1px solid #8a8a8a;
    background-color: #ececec;
    cursor: pointer;
    color: black;
}

.collection-hide-delete .collection-content {
    padding-top: 0;
}

.arkounay-ux-horizontal-collection {
    top: 0;
    margin-bottom: 0;
}

.arkounay-ux-horizontal-collection.row {
    display: flex;
    flex-wrap: wrap;
    --tblr-gutter-x: 1rem;
    --tblr-gutter-y: .5rem;
    margin-left: calc(var(--tblr-gutter-x)*-.5);
    margin-right: calc(var(--tblr-gutter-x)*-.5);
    margin-top: calc(var(--tblr-gutter-y)*-1);
}
.arkounay-ux-horizontal-collection * {
    box-sizing: border-box;
}

.arkounay-ux-horizontal-collection.row>* {
    flex-shrink: 0;
    margin-top: var(--tblr-gutter-y);
    max-width: 100%;
    padding-left: calc(var(--tblr-gutter-x)*.5);
    padding-right: calc(var(--tblr-gutter-x)*.5);
    width: 100%;
}

@media (min-width: 992px) {
    .arkounay-ux-horizontal-collection .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1200px) {
    .arkounay-ux-horizontal-collection .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

[data-controller='arkounay--ux-collection--collection'] .btn-close {
    background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") 50%/0.5rem auto no-repeat;
    position: relative;
    left: 5px;
    border-radius: 100%;
    transition: background-color linear 200ms;
}

[data-controller='arkounay--ux-collection--tabbed-collection'] .btn-close:hover {
    background-color: #cbd1d5;
}