/******************* COLOR DEFINITIONS *******************/

:root {
--tblr-primary: #2b8c9c;
--s-color-strong: #000;
--s-color-light: #888;
--s-color-superlight: #eee;
--s-color-chart-bg: #eee;
--s-color-tooltip: #626976;
--s-color-waiting: #F22738;
--s-color-editing: #ea992d;
--s-color-customer: #bec0c5;
--s-color-done: #1FA641;
}

[data-bs-theme="dark"] {  
	--s-color-strong: #fff;
	--s-color-light: #aaa;
	--s-color-superlight: #aaa;
	--s-color-chart-bg: #666;
}

/******************* COLOR CHANGES *******************/

.s-link {
  color: var(--s-color-strong);
}

.s-link:hover, .s-link:focus {
  color: var(--s-color-strong);
}

.s-text-light {
  --tblr-text-opacity: 1;
  color: var(--s-color-light);
}

.s-text-superlight {
  --tblr-text-opacity: 1;
  color: var(--s-color-superlight);
}

.svg-donut-ring{
	stroke: var(--s-color-chart-bg);
}

.s-help{
	display: none;
}

.progress-wrapper-file-upload {
    width:100%;
}
.progress-wrapper-file-upload .progress {
    background-color: var(--s-color-done);
    width:0%;
    padding:5px 0px 5px 0px;
}

.s-badge-size-l {
	font-size: 0.9rem;
}

/******************* MARGINS *******************/

.s-margin-up-6 {
	margin-top: -6px !important;
}

.s-margin-up-5 {
	margin-top: -5px !important;
}

.s-margin-up-4 {
	margin-top: -4px !important;
}

.s-margin-up-3 {
	margin-top: -3px !important;
}

.s-margin-up-2 {
	margin-top: -2px !important;
}

.s-margin-up-1 {
	margin-top: -1px !important;
}

/******************* ICON SIZES *******************/

.s-icon-size-xxl {
	font-size: 2rem;
}

.s-icon-size-xl {
	font-size: 1.8rem;
}

.s-icon-size-l {
	font-size: 1.6rem;
}

.s-icon-size-m {
	font-size: 1.3rem;
}

.s-icon-size-s {
	font-size: 1.0rem;
}

/******************* COLORS *******************/

.s-color-waiting {
	color: var(--s-color-waiting);
}
.s-color-editing {
	color: var(--s-color-editing);
}
.s-color-customer {
	color: var(--s-color-customer);
}
.s-color-done {
	color: var(--s-color-done);
}

.s-bgcolor-waiting {
	background: var(--s-color-waiting);
}
.s-bgcolor-editing {
	background: var(--s-color-editing);
}
.s-bgcolor-customer {
	background: var(--s-color-customer);
}
.s-bgcolor-done {
	background: var(--s-color-done);
}

/******************* MIN WIDTHS *******************/

.s-min-width-50{
	min-width: 50px;
}
.s-min-width-60{
	min-width: 60px;
}
.s-min-width-70{
	min-width: 70px;
}
.s-min-width-80{
	min-width: 80px;
}
.s-min-width-90{
	min-width: 90px;
}
.s-min-width-100{
	min-width: 100px;
}
.s-min-width-110{
	min-width: 110px;
}
.s-min-width-120{
	min-width: 120px;
}
.s-min-width-130{
	min-width: 130px;
}
.s-min-width-140{
	min-width: 140px;
}
.s-min-width-150{
	min-width: 150px;
}
.s-min-width-160{
	min-width: 160px;
}
.s-min-width-170{
	min-width: 170px;
}
.s-min-width-180{
	min-width: 180px;
}
.s-min-width-190{
	min-width: 190px;
}
.s-min-width-200{
	min-width: 200px;
}

.s-minimum-width{
	width:1%;
}

/******************* CODE MIRROR *******************/

.CodeMirror{
	border: 1px solid #d9dbde
}

/******************* NO IDEA *******************/

@media (min-width: 768px) {
	.s-formrow {
	    --tblr-gutter-x: 1rem;
	    --tblr-gutter-y: 0;
	    display: flex;
	    flex-wrap: wrap;
	    margin-top: calc(-1 * var(--tblr-gutter-y));
	    margin-right: calc(-.5 * var(--tblr-gutter-x));
	    margin-left: calc(-.5 * var(--tblr-gutter-x));
	}
}

/******************* TOOLTIP *******************/

.tooltip.show {
  opacity: 1;
}
.tooltip-inner {
    background-color: var(--s-color-tooltip);
    box-shadow: 0px 0px 2px black;
}
.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: var(--s-color-tooltip) !important;
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: var(--s-color-tooltip) !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--s-color-tooltip) !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--s-color-tooltip) !important;
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--s-color-tooltip);
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--s-color-tooltip);
}

/******************* AJAX *******************/

.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}

/******************* AJAX LOADER *******************/

.lds-ring,
.lds-ring div {
  margin-top:8px;
  box-sizing: border-box;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  margin: 3px;
  border: 3px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/******************* CONTROLLING *******************/

.s-controlling{
	display: none;
}

.controlling-action-column{
	padding-top: 0.25rem !important; 
	padding-right: 0.25rem !important; 
	padding-left:0rem !important; 
	width:30px !important;
}

.controlling-action-placeholder{
	padding-right: 0.75rem;
}