/***
 Dropdowns
 ***/
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    transform: translate(0) scale(1);
    visibility: visible;
}

/***
 Loader animation
 ***/
.lds-ripple {
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid rgba(16, 37, 62, 1);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/***
 Fields
 ***/
.link {
    position: relative;
    transition: all 0.25s ease-out;
    color: rgb(16, 37, 62);
    /*color: rgb(88, 102, 120);*/
}

.link.light {
    color: rgb(159, 168, 178);
}

.link.accent {
    color: rgb(161, 191, 93);
    /*color: rgb(16, 37, 62);*/
}

.link.accent {
    color: rgb(161, 191, 93);
    /*color: rgb(16, 37, 62);*/
}

.link:hover {
    color: rgb(161, 191, 93);
}

.link:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: -1px;
    left: 0;
    background-color: rgb(161, 191, 93);
    visibility: hidden;
    transition: all 0.25s ease-out;
}

.link:hover:before {
    visibility: visible;
    height: 1px;
}

.code {
    font-family: monospace;
}


/***
 Responsive tabs component radio input
 ***/
.tab-wrap {
    -webkit-transition: 0.3s box-shadow ease;
    transition: 0.3s box-shadow ease;
    list-style: none;
}

.tab__content {
    z-index: -1;
    opacity: 0;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
    opacity: 1;
    -webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;
    transition: 0.5s opacity ease-in, 0.2s transform ease;
    position: relative;
    top: 0;
    z-index: 100;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    text-shadow: 0 0 0;
}

.tab:checked + label {
    background-color: rgba(232, 239, 215, 100);
    color: rgba(97, 115, 56, 100);
    cursor: default;
}

.tab:checked + label:hover {
    color: rgba(16, 37, 62, 100);
    background-color: #fff;
}

.tab + label {
    box-shadow: 0 -1px 0 #eee inset;
    -webkit-box-flex: 3;
    -webkit-flex-grow: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
    height: 50px;
    box-sizing: border-box;
    padding: 15px;
}

@media (min-width: 768px) {
    .tab + label {
        width: auto;
    }
}


/***
 jQuery Query Builder
 ***/

.query-builder {}
.query-builder .rules-group-header {
    margin-bottom: 12px !important;
}
.query-builder .rules-group-header .btn-group,
.query-builder .rules-group-container .rule-header .btn-group {
    margin-bottom: 15px !important;
}
.query-builder .rules-group-header .btn-group label:first-child {
    margin-right: 3px !important;
}
.query-builder .rules-group-container .rules-group-header .group-conditions .active {
    color: rgb(255, 255, 255);
    background-color: rgb(16, 37, 62);
}

.query-builder .rule-container, .query-builder .rule-placeholder,
.query-builder .rules-group-container {
    padding: 10px !important;
    margin-right: 15px !important;
}

.query-builder .rule-value-container input[type=number],
.query-builder .rule-value-container input[type=text],
.query-builder .rule-value-container select {
    padding: 0.5rem 1rem !important;
}


/***
 Switch
 ***/
.switch input:checked {
    background-color: #22c55e; /* bg-green-500 */
}

.switch input:checked ~ span:last-child {
    --tw-translate-x: 1.75rem; /* translate-x-7 */
}

.display-field .enlighter-code {
  padding: 10px 0;
}

form[id$="filters"] .select2-container {
    width: auto;
    min-width: 100%;
}

/** CSS Helpers to avoid CSS errors for CSS Inline rules */
.w-0-percent { width: 0%; }
.w-1-percent { width: 1%; }
.w-2-percent { width: 2%; }
.w-3-percent { width: 3%; }
.w-4-percent { width: 4%; }
.w-5-percent { width: 5%; }
.w-6-percent { width: 6%; }
.w-7-percent { width: 7%; }
.w-8-percent { width: 8%; }
.w-9-percent { width: 9%; }
.w-10-percent { width: 10%; }
.w-11-percent { width: 11%; }
.w-12-percent { width: 12%; }
.w-13-percent { width: 13%; }
.w-14-percent { width: 14%; }
.w-15-percent { width: 15%; }
.w-16-percent { width: 16%; }
.w-17-percent { width: 17%; }
.w-18-percent { width: 18%; }
.w-19-percent { width: 19%; }
.w-20-percent { width: 20%; }
.w-21-percent { width: 21%; }
.w-22-percent { width: 22%; }
.w-23-percent { width: 23%; }
.w-24-percent { width: 24%; }
.w-25-percent { width: 25%; }
.w-26-percent { width: 26%; }
.w-27-percent { width: 27%; }
.w-28-percent { width: 28%; }
.w-29-percent { width: 29%; }
.w-30-percent { width: 30%; }
.w-31-percent { width: 31%; }
.w-32-percent { width: 32%; }
.w-33-percent { width: 33%; }
.w-34-percent { width: 34%; }
.w-35-percent { width: 35%; }
.w-36-percent { width: 36%; }
.w-37-percent { width: 37%; }
.w-38-percent { width: 38%; }
.w-39-percent { width: 39%; }
.w-40-percent { width: 40%; }
.w-41-percent { width: 41%; }
.w-42-percent { width: 42%; }
.w-43-percent { width: 43%; }
.w-44-percent { width: 44%; }
.w-45-percent { width: 45%; }
.w-46-percent { width: 46%; }
.w-47-percent { width: 47%; }
.w-48-percent { width: 48%; }
.w-49-percent { width: 49%; }
.w-50-percent { width: 50%; }
.w-51-percent { width: 51%; }
.w-52-percent { width: 52%; }
.w-53-percent { width: 53%; }
.w-54-percent { width: 54%; }
.w-55-percent { width: 55%; }
.w-56-percent { width: 56%; }
.w-57-percent { width: 57%; }
.w-58-percent { width: 58%; }
.w-59-percent { width: 59%; }
.w-60-percent { width: 60%; }
.w-61-percent { width: 61%; }
.w-62-percent { width: 62%; }
.w-63-percent { width: 63%; }
.w-64-percent { width: 64%; }
.w-65-percent { width: 65%; }
.w-66-percent { width: 66%; }
.w-67-percent { width: 67%; }
.w-68-percent { width: 68%; }
.w-69-percent { width: 69%; }
.w-70-percent { width: 70%; }
.w-71-percent { width: 71%; }
.w-72-percent { width: 72%; }
.w-73-percent { width: 73%; }
.w-74-percent { width: 74%; }
.w-75-percent { width: 75%; }
.w-76-percent { width: 76%; }
.w-77-percent { width: 77%; }
.w-78-percent { width: 78%; }
.w-79-percent { width: 79%; }
.w-80-percent { width: 80%; }
.w-81-percent { width: 81%; }
.w-82-percent { width: 82%; }
.w-83-percent { width: 83%; }
.w-84-percent { width: 84%; }
.w-85-percent { width: 85%; }
.w-86-percent { width: 86%; }
.w-87-percent { width: 87%; }
.w-88-percent { width: 88%; }
.w-89-percent { width: 89%; }
.w-90-percent { width: 90%; }
.w-91-percent { width: 91%; }
.w-92-percent { width: 92%; }
.w-93-percent { width: 93%; }
.w-94-percent { width: 94%; }
.w-95-percent { width: 95%; }
.w-96-percent { width: 96%; }
.w-97-percent { width: 97%; }
.w-98-percent { width: 98%; }
.w-99-percent { width: 99%; }
.w-100-percent { width: 100%; }

/***
HTMx Indicators
***/

table .htmx-indicator {
    opacity:0;
    transition: opacity 500ms ease-in;
    display: none;
}
table .htmx-request .htmx-indicator {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
    background-color: #cbd5e0 !important;
    color: #cbd5e0 !important;
    opacity: 1;
    display: inline-block;
}
table .htmx-request .actions,
table .htmx-request .display-field {
    display: none;
}

.radio-inline-label:has(input[type=radio]) {
    accent-color: #A1BF5D;
}
.radio-inline-label:has(input[type=radio]:checked) {
	border-color: #A1BF5D;
	color: #A1BF5D;
	background-color: #E8EFD7;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

input[type=text]:read-only {
    background-color: #e7e9ec;
}


.hover\:border:hover {
    border-width: 1px;
    margin-left: -1px;
}