/* Root element */
.json-document {
  padding: 1em 2em;
}

/* Syntax highlighting for JSON objects */
ul.json-dict, ol.json-array {
  list-style-type: none;
  margin: 0 0 0 1px;
  border-left: 1px dotted #ccc;
  padding-left: 2em;
}
.json-string {
  color: #0B7500;
}
.json-literal {
  color: #1A01CC;
  font-weight: bold;
}

/* Toggle button */
a.json-toggle {
  position: relative;
  color: inherit;
  text-decoration: none;
}
a.json-toggle:focus {
  outline: none;
}
a.json-toggle:before {
  font-size: 1.1em;
  color: #c0c0c0;
  content: "\25BC"; /* down arrow */
  position: absolute;
  display: inline-block;
  width: 1em;
  text-align: center;
  line-height: 1em;
  left: -1.2em;
}
a.json-toggle:hover:before {
  color: #aaa;
}
a.json-toggle.collapsed:before {
  /* Use rotated down arrow, prevents right arrow appearing smaller than down arrow in some browsers */
  transform: rotate(-90deg);
}

/* Collapsable placeholder links */
a.json-placeholder {
  color: #aaa;
  padding: 0 1em;
  text-decoration: none;
}
a.json-placeholder:hover {
  text-decoration: underline;
}* {
    font-family: "Cairo" !important;
}

/* Responsive Core */

.float-start {
    float: left;
}

.text-first {
    text-align: left;
}

.text-last {
    text-align: right;
}

.m-e-1 {
    margin-right: 0.25rem;
}

.m-e-2 {
    margin-right: 0.5rem;
}

.m-e-3 {
    margin-right: 0.75rem;
}

/* Responsive Core End */

.tablet-card {
    min-height: 15rem;
}

.breadcrumb {
    font-size: 85%;    
}

.otp {
    font-size: 4rem;
    text-align: center;
    letter-spacing: 2.5rem;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.preview.item-image-preview {
    background-size: contain;
    background-position: center;
}

#category-image-upload {
    width: 10rem;
}

.dt-container{
    
}

.dataTables_length {
    float: right;
}

div.dt-container div.dt-search {
    text-align: left !important;
}

.upload-form.multiple .form-group {
    width: 10rem;
}

.multiple-uploads > .preview {
    width: 10rem;
}

.preview {
    overflow: hidden;
}

.preview .remove {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 300ms, top 300ms;
    opacity: 0.2;
}

.preview:hover .remove {
    top: 50%;
    opacity: 0.9;
}

.all-categories {
    height: 20rem;
    overflow: auto;
}

#categories-table tbody tr {
    cursor: pointer;
}

#categories-table tbody tr.selected {
    background-color: #cfcfcf;
}

#items-list {
    list-style: none;
}

#items-list li {
    width: 20%;
    height: 10rem;
    cursor: pointer;
}

#items-list li .card {
    height: 100%;
}

.preview-img {
    width: 100%;
    height: 8rem;
    margin-top: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.item-buttons {
    position: absolute;
}

.category-buttons {
    position: absolute;
}

.blue-background-class {
    opacity: 0.3;
}

.background-modal .modal-body {
    background-color: #f9fafd !important;
}

.active > .category-buttons .delete-category, 
.active > .category-buttons .change-hidden-category-state, 
.active > .category-buttons .edit-category {
    color: white;
}

.no-new .notification-indicator:before {
    display: none;
}

.subscription-date-editable, .subscription-editable {
    cursor: pointer;
}

.subscription-date-editable svg, 
.subscription-editable svg, 
.subscription-date-editable i, 
.subscription-editable i {
    display: none;
}

.subscription-date-editable:hover i, 
.subscription-editable:hover i, 
.subscription-date-editable:hover svg, 
.subscription-editable:hover svg {
    display: inline;
}

@media screen and (max-width: 767px) {
    li.paginate_button.previous {
        display: inline;
    }
 
    li.paginate_button.next {
        display: inline;
    }
 
    li.paginate_button {
        display: none;
    }
}

.history-enabled .view-history, .account-enabled .view-account-sheet {
    display: none;
    cursor: pointer;
}

.history-enabled:hover .view-history, .account-enabled:hover .view-account-sheet {
    display: inline;
    opacity: 0.5;
    transition: opacity 300ms;
}

.history-enabled:hover .view-history:hover, .account-enabled:hover .view-account-sheet:hover {
    opacity: 1;
}

.full-modal .modal-dialog {
    min-width: 60% !important;
    width: 100% !important;
    max-width: max-content;
}

#view-history-table td {
    vertical-align: middle;
}


/*
* jPicker
*/
@media all 
{
	#jPicker { margin: 0px 8px; text-align: left; }
	#jPicker ul { font-size: 15px; margin: 0px 0px 0px 15px; padding: 0px; }
	#jPicker ul li { list-style: disc; padding: 2px 0px; }
	#jPicker ul li ul { margin-bottom: 10px; }
	#jPicker ul li ul li { list-style: circle; }
	#jPicker p { font-size: 13px; padding: 0px 10px; }
	#jPicker hr { clear: both; }
	#jPicker h2.jPicker { font-size: 16px; padding: 20px 10px; }
	#jPicker code { color: #8bd; font-size: 14px; font-weight: bold; }
	#jPicker pre { background: #eee; border: 1px solid #000; color: #000; display: block; font-size: 11px; margin: 10px 5px; padding: 5px; }
	#jPicker span { font-size: 13px; text-align: center; }
	#jPicker a { color: #ff8050; }
	#jPicker input { font-size: 13px; padding: 2px 5px; }
	#jPicker h2 { font-size: 16px; margin: 10px 0px; }
}

.jPicker .Icon {
  display: inline-block;
  height: 24px; /* change this value if using a different sized color picker icon */
  position: relative; /* make this element an absolute positioning container */
  text-align: left; /* make the zero width children position to the left of container */
  width: 25px; /* change this value if using a different sized color picker icon */
}
.jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
  background-position: 2px 2px;
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
.jPicker .Icon span.Image {
  background-repeat: no-repeat;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
.jPicker.Container {
  color: #000;
  z-index: 10;
}
table.jPicker {
  background-color: #efefef;
  border: 1px outset #666;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px !important;
  margin: 0px;
  padding: 5px;
  width: 545px;
  z-index: 20;
}
.jPicker .Move {
  background-color: #dddddd;
  border-color: #fff #666 #666 #fff;
  border-style: solid;
  border-width: 1px;
  cursor: move;
  height: 12px;
  padding: 0px;
}
.jPicker .Title {
  font-size: 11px !important;
  font-weight: bold;
  margin: -2px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
  text-align: center;
  width: 100%;
}
.jPicker div.Map {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #9a9a9a;
  border-right: 2px solid #fff;
  border-top: 2px solid #9a9a9a;
  cursor: crosshair;
  height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  margin: 0px 10px 10px 10px;
  overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
  padding: 0px;
  position: relative; /* make this element an absolute positioning container */
  width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
}
.jPicker div[class="Map"] {
  height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker div.Bar {
  border-bottom: 2px solid #fff;
  border-left: 2px solid #9a9a9a;
  border-right: 2px solid #fff;
  border-top: 2px solid #9a9a9a;
  cursor: n-resize;
  height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
  margin: 12px 10px 0px 5px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
}
.jPicker div[class="Bar"] {
  height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
  width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3, .jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4, .jPicker .Bar .Map5, .jPicker .Bar .Map6 {
  background-color: transparent;
  background-image: none;
  display: block;
  left: 0px;
  position: absolute;
  top: 0px;
}
.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Map .Map3 {
  height: 2596px;
  width: 256px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
                   would not be drawn if its overflow is set to hidden. */
}
.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
  height: 3896px;
  width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
                  would not be drawn if its overflow is set to hidden. */
}
.jPicker .Bar .Map5, .jPicker .Bar .Map6 {
  height: 256px;
  width: 20px; /* must specify pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
                  would not be drawn if its overflow is set to hidden. */
}
.jPicker .Map .Map1, .jPicker .Map .Map2, .jPicker .Bar .Map6 {
  background-repeat: no-repeat;
}
.jPicker .Map .Map3, .jPicker .Bar .Map5 {
  background-repeat: repeat;
}
.jPicker .Bar .Map1, .jPicker .Bar .Map2, .jPicker .Bar .Map3, .jPicker .Bar .Map4 {
  background-repeat: repeat-x;
}
.jPicker .Map .Arrow {
  display: block;
  position: absolute;
}
.jPicker .Bar .Arrow {
  display: block;
  left: 0px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
  position: absolute;
}
.jPicker .Preview {
  font-size: 9px;
  padding: 5px 0px 0px 0px;
  text-align: center;
}
.jPicker .Preview div {
  border: 2px inset #eee;
  height: 62px;
  margin: 0px auto;
  padding: 0px;
  width: 62px;
}
.jPicker .Preview div span {
  border: 1px solid #000;
  display: block;
  height: 30px;
  margin: 0px auto;
  padding: 0px;
  width: 60px;
}
.jPicker .Preview .Active {
  border-bottom-width: 0px;
}
.jPicker .Preview .Current {
  border-top-width: 0px;
  cursor: pointer;
}
.jPicker input {
  font-size: 13px;
}
.jPicker .Button {
  text-align: center;
  padding: 0px 4px;
  width: 115px;
}
.jPicker .Button input {
  padding: 2px 0px;
  width: 100px;
}
.jPicker .Button .Ok {
  margin: 12px 0px 5px 0px;
}
.jPicker td {
  margin: 0px;
  padding: 0px;
}
.jPicker td.Radio {
  margin: 0px;
  padding: 0px;
  width: 31px;
}
.jPicker td.Radio input {
  margin: 0px 5px 0px 0px;
  padding: 0px;
}
.jPicker td.Text {
  font-size: 12px !important;
  height: 22px;
  margin: 0px;
  padding: 0px;
  text-align: left;
  width: 70px;
}
.jPicker tr.Hex td.Text {
  width: 100px;
}
.jPicker td.Text input {
  background-color: #fff;
  border: 1px inset #aaa;
  height: 19px;
  margin: 0px 0px 0px 5px;
  text-align: left;
  width: 30px;
}
.jPicker td[class="Text"] input {
  height: 15px;
}
.jPicker tr.Hex td.Text input.Hex {
  width: 50px;
}
.jPicker tr.Hex td.Text input.AHex {
  width: 20px;
}
.jPicker .Grid {
  text-align: center;
  width: 114px;
}
.jPicker .Grid span.QuickColor {
  border: 1px inset #aaa;
  cursor: pointer;
  display: inline-block;
  height: 15px;
  line-height: 15px;
  margin: 0px;
  padding: 0px;
  width: 19px;
}
.jPicker .Grid span[class="QuickColor"] {
  width: 17px;
}

.jPicker.Container {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

:not(.in-table-select) > .select2 .select2-selection__clear {
    margin-left: 15px;
}

:not(.in-table-select) > .select2 .select2-selection__rendered {
    /* height: 36px; */
}

:not(.in-table-select) > .select2.select2-container {
    height: 36px;
}

:not(.in-table-select) > .select2 .select2-selection {
    height: 36px !important;
}

:not(.in-table-select) > .select2 .select2-selection__arrow {
    height: 36px !important;
}

:not(.in-table-select) > .select2 .select2-selection__placeholder {
    height: 36px;
}

:not(.in-table-select) > .select2 .select2-search--inline {
    display: contents; /*this will make the container disappear, making the child the one who sets the width of the element*/
}

:not(.in-table-select) > .select2 .select2-search__field:placeholder-shown {
    /*width: 100% !important; makes the placeholder to be 100% of the width while there are no options selected*/
}

:not(.in-table-select) > .select2 .select2-search--inline .select2-search__field {
    margin-top: 3px !important;
}

:not(.in-table-select) > .select2 span.select2-selection__placeholder {
    line-height: 32px !important;
}

:not(.in-table-select) > .select2 span#select2-bucket-qn-container {
    line-height: 32px !important;
}

:not(.in-table-select) > .select2.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 31px !important;
}

.price-inline-input {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.price-inline-input:focus-within {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.price-inline-input .price-inline-values {
    flex: 1;
    min-width: 0;
    padding-inline-end: 4.25rem;
}

.price-inline-input .value-field,
.price-inline-input .to-value-field {
    min-width: 0;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.price-inline-input .value-field:focus,
.price-inline-input .to-value-field:focus {
    box-shadow: none !important;
}

.price-inline-input .price-currency-addon {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 4.25rem;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.price-inline-input .price-currency-addon .currency-field,
.price-inline-input .price-currency-addon .select2-container {
    pointer-events: auto;
}

.price-inline-input .price-currency-addon .currency-field {
    height: 100%;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
}

.price-inline-input .price-currency-select.in-table-select > .select2.select2-container {
    width: 100% !important;
    height: 100%;
}

.price-inline-input .price-currency-select.in-table-select > .select2 .select2-selection {
    height: 100% !important;
    min-height: calc(1.5em + 0.75rem + 2px);
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.price-inline-input .price-currency-select.in-table-select > .select2 .select2-selection__arrow {
    height: 100% !important;
}

.price-inline-input .price-currency-select.in-table-select > .select2 .select2-selection__rendered {
    line-height: calc(1.5em + 0.75rem) !important;
    padding-inline-start: 0.15rem;
    padding-inline-end: 1.1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #495057;
    text-align: center;
}

.price-inline-input .price-currency-select.in-table-select > .select2 .select2-selection__clear {
    display: none;
}

html[dir="rtl"] .price-inline-input .price-currency-select.in-table-select > .select2 .select2-selection__arrow {
    left: 0.15rem;
    right: auto;
}

html[dir="ltr"] .price-inline-input .price-currency-select.in-table-select > .select2 .select2-selection__arrow {
    right: 0.15rem;
    left: auto;
}

.select2-selection__rendered {
    margin-top: 0 !important;
}

.negative:before {
    content: "(";
}

.negative:after {
    content: ")";
}

.data-series-fields tbody td {
    padding: 0 !important;
}

.data-series-fields tbody input.form-control, .data-series-fields tbody select.form-control {
    border-radius: 0;
    border: none;
}

table tbody tr:not(:last-child) input.form-control.error {
    /* border-bottom: 1px solid #efefef; */
}

.delete-row {
    cursor: pointer;
}

.code * {
    font-family: monospace !important;
    text-align: left !important;
}

.CodeMirror-hints {
    z-index: 10000 !important;
}

.json-document {
    direction: ltr;
    text-align: left;
}

.json-document > .json-string {
    direction:rtl;
    text-align: right;
    display: block;
}

.new-mapping {
    background-color: rgb(255, 255, 245);
}

select.form-control.error {
    border-color: red;
}

.query-builder {
    display: block !important;
}

.query-builder .pull-right {
    float: left !important;
}

.query-builder .rules-list {
    padding: 0 15px 0 0 !important;
}

.query-builder .rules-list>:last-child::before {
    border-radius: 0 0 4px 0 !important;
}

.query-builder .rules-list>:last-child::before {
    border-width: 0 2px 2px 0 !important;
}

.query-builder .rules-list>::after, .query-builder .rules-list>::before {
    left: 0 !important;
    right: -10px !important;
}

.query-builder .rules-list>::before {
    border-width: 0 2px 0 0 !important;
}

.query-builder .rules-list>::after {
    border-width: 0 2px 0 0 !important;
}

.query-builder .btn {
    margin-right: 3px !important;
}

.query-builder .rules-group-header .group-conditions .btn-primary {
    color: #344050;
    background-color: #fff;
    border-color: #d8e2ef;
}

.query-builder .rules-group-header .group-conditions .btn-primary:hover,
.query-builder .rules-group-header .group-conditions .btn-primary:focus {
    color: #344050;
    background-color: #edf2f9;
    border-color: #d8e2ef;
}

.query-builder .rules-group-header .group-conditions .btn-primary.active,
.query-builder .rules-group-header .group-conditions .btn-primary:not(:disabled):not(.disabled).active,
.query-builder .rules-group-header .group-conditions .btn-primary:not(:disabled):not(.disabled):active {
    color: #344050;
    background-color: #fff;
    border-color: #2c7be5;
}

.query-builder .drag-handle, .query-builder .error-container, .query-builder .rule-container .rule-filter-container, .query-builder .rule-container .rule-operator-container, .query-builder .rule-container .rule-value-container {
    margin: 0 0 0 5px !important;
}

.query-builder .rule-value-container {
    border-left: none !important;
    border-right: 1px solid #DDD !important;
    padding-left: 0 !important;
    padding-right: 5px !important;
}

.query-builder .checkbox input[type=checkbox]:checked + label:after {
    content: "" !important;
}

.query-builder .form-inline .checkbox label, .form-inline .radio label {
    padding-right: 0 !important;
    padding-left: 20px !important;
}

.query-builder .drag-handle, .query-builder .error-container, .query-builder .rule-container .rule-filter-container, .query-builder .rule-container .rule-operator-container, .query-builder .rule-container .rule-value-container {
    margin: 0 5px 0 0 !important;
}

.query-builder .drag-handle {
    cursor: grab !important;
}

.query-builder .glyphicon {
    padding-left: 2px !important;
}

.dt-buttons {
    float: right;
    margin-right: 10px;
}

.dt-buttons .listing-export-button .listing-export-ready-mark {
    font-size: 0.7em;
    margin-inline-start: 0.2rem;
    color: #00d27a;
    vertical-align: text-top;
}

div.dropdown-menu.dt-button-collection:has(.buttons-columnVisibility),
div.dropdown-menu.dt-button-collection:has(.buttons-table-group-item) {
    max-height: 70vh;
    overflow-y: auto;
}

.dt-colvis-search,
.dt-group-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: block;
    width: calc(100% - 16px);
    margin: 8px;
    box-sizing: border-box;
    background: #fff;
}

.dt-group-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    background: #fff;
}

.dt-group-search-wrap .dt-group-search {
    width: 100%;
    margin: 0;
}

div.dropdown-menu.dt-button-collection .buttons-colvis-reset {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
}

.price {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2em;
}

.filters th {padding: 5px !important;}

table.dataTable thead .filters th {
    border-right: 1px solid transparent;
    border-left: 1px dotted #cfcfcf;
}

/* Integration Modeler */
.resources-list {
    padding: 10px;
    margin-bottom: 1px;
}

.resources-list .resource {
    margin-bottom: 10px;
}

.integration-list {
    list-style: none;
    padding: 0;
    margin: 10px;
    overflow: hidden;
}

.integration-list li {
    padding: 5px 10px;
}

.integration-list li:not(:first-child) {
    margin-top: 5px;
}

.master-list {
    font-size: 100%;
}

.integration-list li h5 {
    color: inherit;
    font-size: inherit;
}

.integration-list li {
    border-radius: 4px;
    position: relative;
    
    transition: all 300ms;
    
    cursor: grab;
}

.integration-list li:not(:last-child):after {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid black;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translate(-50%, 0);
    border-top-color: inherit;
    z-index: 2;
}

.integration-list li:not(:last-child):before {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid white;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translate(-50%, 0);
    z-index: 1;
}

.integration-list.sub-list.custom-list:before {
    content: '\25BC\00a0 ' attr(title) !important;
}

.integration-list.collapsed.sub-list.custom-list:before {
    content: '\25B2\00a0 ' attr(title) !important;
}

.integration-list.sub-list {
    background-color: white;
    border-radius: 3px;
    margin: 10px 0;
    padding: 5px;
}

.integration-list:not(.master-list):before {
    content: "\25BC\00a0 Actions List";
    color: #1e1e1e;
    font-size: 80%;
    display: block;
    margin-bottom: 10px;
}

.integration-list.collapsed:not(.master-list):before {
    content: "\25B2\00a0 Actions List";
}

.failure-list:before {
    content: "\25BC\00a0On Failure" !important;
}

.failure-list.collapsed:before {
    content: "\25B2\00a0On Failure" !important;
}

.success-list:before {
    content: "\25BC\00a0On Success" !important;
}

.success-list.collapsed:before {
    content: "\25B2\00a0On Success" !important;
}

.output-list:before {
    content: "\25BC\00a0Outputs List" !important;
}

.output-list.collapsed:before {
    content: "\25B2\00a0Outputs List" !important;
}

.else-list:before {
    content: "\25BC\00a0or" !important;
}

.else-list.collapsed:before {
    content: "\25B2\00a0or" !important;
}

.mappings-list:before {
    content: "\25BC\00a0Mapping List" !important;
}

.mappings-list.collapsed:before {
    content: "\25B2\00a0Mapping List" !important;
}

.entries-list:before {
    content: "\25BC\00a0Entries" !important;
}

.entries-list.collapsed:before {
    content: "\25B2\00a0Entries" !important;
}

.integration-list:empty:after {
    content: "Blank List";
    color: #aaaaaa;
    text-align: center;
    display: block;
    width: 100%;
    border: 2px dashed #efefef;
}

.processing-operation {
    background-color: #A155B9;
    color: white;
    border-color: #A155B9;
}

.inner-processing-operation {
    background-color: #642a77;
    color: white;
    border-color: #642a77;
}

.entry-operation {
    background-color: #efefef;
    color: #1e1e1e;
    border-color: #efefef;
}

.formula-operation {
    background-color: #d8e0bb;
    color: #1e1e1e;
    border-color: #d8e0bb;
}

.comparison-operation {
    background-color: #daeaf6;
    color: #1e1e1e;
    border-color: #daeaf6;
}

.control-operation {
    background-color: #ff5964;
    color: #1e1e1e;
    border-color: #ff5964;
}

.input-operation {
    background-color: #165BAA;
    color: white;
    border-color: #165BAA;
}

.definition-operation {
    background-color: #8FB9AA;
    color: #1e1e1e;
    border-color: #8FB9AA;
}

.conditional-operation {
    background-color: #d1cfe2;
    color: #1e1e1e;
    border-color: #d1cfe2;
}

.logical-operation {
    background-color: #e0fbfc;
    color: #1e1e1e;
    border-color: #e0fbfc;
}

.loop-operation {
    background-color: #FFA4B6;
    color: #1e1e1e;
    border-color: #FFA4B6;
}

.output-operation {
    background-color: #355070;
    color: white;
    border-color: #355070;
}

.script-operation {
    background-color:  #003049;
    color: white;
    border-color: #003049;
}

.blue-background-class {
    background-color:  gray;
    color: black;
    border-color: gray;
}

.resource {
    background-color:  #f6d55c;
    color: #1e1e1e;
    border-color: #f6d55c;
    
    transition: background-color 300ms;
    padding: 0 5px;
    
    cursor: pointer;
}

.blue-background-class > *:not(h5,.editable-title) {
    display: none;
}

#palettes {
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    z-index: 12;
    background-color: rgba(255, 255, 255, 0.9);
    padding-bottom: 12px;
}

#palettes:hover {
    overflow: auto;
    padding-bottom: 0;
}

#side-pallets {
    position: relative;
    z-index: 12;
}


#palettes::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#palettes::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background-color: #F5F5F5;
}

#palettes::-webkit-scrollbar-thumb {
	background-color: #afafaf;
}

.pallette {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 80%;
    position: relative;
    padding-top: 28px;
    display: inline-block;
}

.pallette:before {
    content: attr(title);
    background-color: #efefef;
    padding: 5px;
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 100%;
    text-align: center;
    font-size: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #dfdfdf;
}

.pallette .integration-list, .pallette .resources, .pallette .placeholders, .pallette .formula-builder {
    display: none !important;
}

.formula-builder {
    list-style: none;
    overflow: hidden;
    background-color: white;
    border-radius: 3px;
    margin: 10px 0;
    padding: 5px;
}

.formula-builder:empty:after {
    content: "Blank Expression";
    color: #aaaaaa;
    text-align: center;
    display: block;
    width: 100%;
    border: 2px dashed #efefef;
}

.error-message-formula:empty:after {
    content: "Error Message Expression";
}

.pallette h5 {
    color: inherit;
    font-size: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.pallette svg, .pallette i {
    display: block;
    font-size: 2rem;
    margin: 0 auto;
    margin-bottom: 10px;
}

.pallette > li, .pallette > div {
    padding: 10px;
    border-radius: 5px;
    width: 100px;
    text-align: center;
    margin-bottom: 3px;
    cursor: grab;
    display: inline-block;
    font-size: 90%;
}

.pallette .placeholder {
    display: none;
}

.resource {
    border-radius: 3px;
    min-width: 100px;
    display: inline-block;
    text-align: center;
    font-size: 80%;
}

.resource input, .resource select {
    border: 1px solid transparent;
    border-color: inherit;
    background-color: rgba(255, 255, 255, 0.5);
}

.ltr-inner input {
    direction: ltr !important;
    text-align: right;
    height: 100%;
}

.resource:before {
    content: "\00a0";
    font-size: 80%;
    min-height: 27px;
    line-height: 23px;
}

.resource:after {
    content: "\00a0";
    font-size: 80%;
    min-height: 27px;
    line-height: 23px;
}

.resources .resource .remove-resource, .resources-list .resource .remove-resource  {
    display: none;
}

.resources ~ .placeholders {
    margin-top: 10px;
}

.placeholder .resource {
    white-space: nowrap;
}

.placeholder:not(.allow-multiple) .resource {
    /* width: 100%;*/
    height: 27px;
    line-height: 27px;
}


.placeholder:before {
    content: attr(title);
    font-size: 80%;
    text-align: center;
    display: block;
    color: #1e1e1e;
}

.placeholder {
    background-color: white;
    border-radius: 3px;
    min-width: 120px;
    height: 50px;
    padding: 5px !important;
    padding-top: 0 !important;
    display: inline-block;
    position: relative;
}

.placeholder.selected {
    z-index: 11;
}

#variable-selector {
    background-color: black;
    width: 400px;
    position: absolute;
    top: 314px;
    transform: translate(-100%, 0);
    left: 1220px;
    border-radius: 5px;
    z-index: 10;
    padding-top: 55px;
}

#variable-selector h3 {
    color: white;
    font-size: 110%;
    padding-top: 5px;
    margin-bottom: 5px;
    border-top: 1px dotted white;
}

.placeholder:empty:after, .placeholder.allow-multiple:after {
    content: "Nothing is Selected";
    color: rgb(170, 170, 170);
    text-align: center;
    display: inline-block;
    font-size: 70%;
    border-width: 2px;
    border-style: dashed;
    border-color: rgb(239, 239, 239);
    border-image: initial;
    min-height: 27px;
    line-height: 23px;
}

.placeholder.text-only:empty:after {
    content: "Double Click to Input";
}

.allow-multiple:not(:empty) > .resource {
    margin-left: 5px;
}

.placeholder.allow-multiple:after {
    padding: 0 5px;
}

.placeholder:empty:after {
    width: 100%;
}

.master-list .editable-title {
    cursor: text;
}

.master-list {
    padding-bottom: 50px;
    margin-top: 0;
}

.remove-item, .edit-item {
    position: absolute;
    right: 8px;
    top: 8px;
    opacity: 0.5;
    transition: opacity 300ms;
    cursor: pointer;
}

.edit-item {
    right: 28px;
}

.remove-item:hover, .edit-item:hover {
    opacity: 1;
}

.remove-resource {
    opacity: 0.5;
    transition: opacity 300ms;
}

.remove-resource:hover {
    opacity: 1;
}

.highlight {
    background-color: #b2e7e8 !important;
}

.resources .form-control {
    font-size: 80%;
    display: inline-block;
    min-width: 200px;
    width: fit-content;
    padding: 0 5px;
    height: 24px;
    direction: ltr;
    text-align: right;
}

.integration-list.collapsed {
    height: 30px;
}

.formula-builder {
    white-space: nowrap;
    overflow-x: auto;
}

.formula-builder::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.formula-builder::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

.formula-builder::-webkit-scrollbar-thumb {
	background-color: #afafaf;
}


.formula-builder h5 {
    display: none;
}

.formula-builder .formula-operation {
    padding: 1px;
    padding-right: 4px;
    display: inline-block;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.formula-builder .comparison-operation {
    padding: 1px;
    padding-right: 4px;
    display: inline-block;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.formula-builder .logical-operation {
    padding: 1px;
    padding-right: 4px;
    display: inline-block;
    border-left: 2px solid rgba(0, 0, 0, 0.2);
    border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.formula-builder .operator {
    display: inline-block;
    background-color: white;
    width: 20px;
    height: 20px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    top: 2px;
    margin: 0 5px;
}

.comparison-operation .operator {
    display: inline-block;
    background-color: white;
    height: 20px;
    line-height: 16px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    top: 2px;
    margin: 0 5px;
    padding: 0 4px;
}

.dt-orderable-none, .dt-orderable-asc, .dt-orderable-desc {
  text-align: left !important;
}

.dt-column-header {
  flex-direction: row !important;
}

.dt-column-order {
    left: auto !important;
}

.dt-type-numeric, .dt-type-date {
    text-align: left !important;
}

.formula-builder .placeholder {
    height: 26px;
    padding: 0 !important;
}

.formula-builder .placeholder .resource {
    display: block;
    height: 100%;
    line-height: 29px;
}

.formula-builder .placeholder:empty:before, .formula-builder .placeholder.allow-multiple:before {
    content: "";
}

.formula-builder .placeholder:before {
    content: "";
}

.formula-builder .placeholder:after {
    position: relative;
}

.formula-builder .placeholder:empty:after, .formula-builder .placeholder.allow-multiple:after {
    content: attr(title);
    border: none;
}

.formula-builder .placeholders .remove-item {
    position: relative;
    display: inline-block;
    padding: 0 5px;
    top: 0;
    left: 0;
}

.close-variables-selector {
    position: absolute;
    top: 5px;
    left: 5px;
    cursor: pointer;
}

#execution-pallet {
    background-color: #efefef;
    width: 100%;
    height: 115px;
    padding: 10px;
    border-radius: 3px;
}

.resources {display: inline-block;}

.placeholders {display: inline;margin-top: 0 !important; line-height: 34px;}

.placeholder:before {display: inline-block;padding: 0 10px;}

.placeholder:empty:after {display: inline-block;width: auto !important;min-width: 150px;}

.placeholder {white-space: nowrap;padding: 3px !important;height: 33px; line-height:25px;}

.resource {height: 33px;line-height: 32px;}

.formula-builder .placeholder .resource {display: inline-block;}

.formula-builder .placeholder:before {display: none;}

.resource input {height: 27px;}

.integration-editor *:not(input) {
    -moz-user-select: none;
    -webkit-user-select: none; 
    -ms-user-select:none; user
    -select:none;-o-user-select:none;
}

.formula-builder .placeholder:not(.allow-multiple) .resource {width: 100%;}

select ~ .error:not(:empty) {
    position: absolute;
    top: 5px;
    right: 14px;
    color: red;
}

.error:not(:empty) ~ .select2 .select2-selection {
    border-color: #e63757;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: var(--light-master);
}

.horizontal-tabs {
    list-style: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #cfcfcf;
    font-size: 90%;
}

.horizontal-tabs li {
    display:inline-block;
    padding: 5px 10px;
    min-width: 100px;
    transition: 300ms border-color;
    font-weight: 200;
    cursor: pointer;
    text-align: center;
    border-bottom: 5px solid transparent;
}

.horizontal-tabs li.selected {
    font-weight: 600;
    border-bottom: 5px solid #cfcfcf;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.currency-holder {
    position: relative;
}

.currency-holder:after {
    content: attr(title);
    position: absolute;
    display: block;
    top: 50%;
    transform: translate(0, -50%);
    right: 20px;
    font-size: 95%;
    color: #acacac;
}

.currency-holder input {
    padding-right: 35px;
}

.upload-item {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: 1px dashed #aeaeae;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}

.upload-item .upload-item-label {
    text-align: center;
    font-size: 80%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    width: 100%;
    pointer-events: none;
    background-color: #efefef;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid #cfcfcf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px;
    z-index: 1;
}

.upload-item .upload-cancel, .upload-item .upload-download {
    background-color: #efefef;
    border-radius: 0 0 0 10px;
    border: 1px solid #cfcfcf;
    position: absolute;
    left:  calc(50% - 23px);
    transform: translate(-50%, 0);
    z-index: 10;
    padding: 0 15px;
    color: #5e6e82;
    border-top: none;
    transition: top 300ms;
    top: -60px;
}

.upload-item .upload-download {
    left:  calc(50% + 23px);
    border-radius: 0 0 10px 0;
}


.upload-item .upload-download:first-child {
    left:  50% !important;
    border-radius: 0 0 10px 10px !important;
}

.upload-item.file-selected .upload-cancel, .upload-item.file-selected .upload-download {
    top: 0;
}

.upload-item input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-item:before {
    content: "";
    background-image: inherit;
    width: 120%;
    height: 120%;
    display: block;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    filter: blur(8px);
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 0.95;
    pointer-events: none;
}

.upload-item:after {
    content: "";
    background-image: inherit;
    width: 100%;
    height: 100%;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    left: 50%;
    top: calc(50% - 10px);
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: box-shadow 300ms;
    
    box-shadow: inset 0 0 0 0 rgb(0 0 0 / 20%);
}

.upload-progress {
    position: absolute;
    z-index: 2;
    background: #efefef;
    width: calc(100% - 10px);
    height: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    top: -20px;
    opacity: 0;
    overflow: hidden;
    transition: top 100ms, opacity 100ms;
}

.is-uploading .upload-progress {
    top: 5px;
    opacity: 1;
}

.upload-progress .bar {
    display: block;
    height: 100%;
    background-color: var(--dark-master);
    width: 0;
    transition: width 300ms;
}

.upload-item.dragging-file:after {
    box-shadow: inset 0px -8px 16px 15px rgb(0 0 0 / 20%);
}

.upload-item.dragging-wrong-file:after {
    box-shadow: inset 0px -8px 16px 15px rgb(255 0 0 / 20%);
}

.upload-item .upload-extension {
    display: none;
    pointer-events: none;
}

.upload-item.file-selected .upload-extension {
    display: block;
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    font-size: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 20px;
}

.upload-item.upload-item-image.file-selected .upload-extension {
    display: none;
}

.fileupload.compact .upload-item {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    min-height: 38px;
    border-radius: 0.25rem;
    border-style: solid;
    background-image: none !important;
}

.fileupload.compact .upload-item:before,
.fileupload.compact .upload-item:after {
    display: none;
}

.fileupload.compact .upload-item .upload-item-label {
    position: absolute;
    left: unset;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #5e6e82;
}

.fileupload.compact .upload-item .upload-extension {
    display: none !important;
}

.fileupload.compact .upload-item.file-selected .upload-cancel,
.fileupload.compact .upload-item.file-selected .upload-download {
    top: 50%;
    transform: translateY(-50%);
    left: auto;
    border-top: 1px solid #cfcfcf;
}

.fileupload.compact .upload-item.file-selected .upload-download {
    right: 0.5rem;
    border-radius: 0.25rem !important;
}

.fileupload.compact .upload-item.file-selected .upload-download:first-child {
    right: 0.5rem !important;
    left: auto !important;
    border-radius: 0.25rem !important;
}

.fileupload.compact .upload-item.file-selected .upload-cancel {
    right: 4rem;
    border-radius: 0.25rem !important;
}

.fileupload.compact.is-uploading .upload-progress {
    top: auto;
    bottom: 0;
    opacity: 1;
}

.popover-body ul.extensions {
    padding: 0 13px;
}

.edit-entity {
    cursor: pointer;
}

.no-wrap {
    white-space: nowrap;
}

.filters-list .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 21px !important;
    line-height: 21px !important;
}

.filters-list .select2-selection__placeholder {
    height: 21px !important;
    line-height: 21px !important;
}

.filters-list .select2-selection.select2-selection--single {
    height: 29px !important;
}

.filters-list .select2-selection__arrow {
    height: 25px !important;
}

.filters-list .select2.select2-container {
    height: auto;
    min-height: 21px;
}

.filters-list .select2 {
    margin-right: 0.25rem;
}

.filters-list li.select2-selection__choice {
    float: none !important;
    display: inline-block !important;
}

.filters-list span.select2.select2-container.select2-container--default.select2-container--below {
    width: fit-content !important;
}

.filters-list li.select2-selection__choice {
    margin: 0 2px !important;
}

.filters-list span.select2-selection.select2-selection--multiple {
    min-height: 29px !important;
    height: 29px !important;
    overflow-y: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    white-space: normal !important;
    overflow: visible !important;
}

.filters-list span.select2.select2-container.select2-container--default.select2-container--above.select2-container--focus {
    width: auto !important;
}

.filters-list .select2-selection--multiple input.select2-search__field {
    min-width: 150px;
    margin-top: 2px !important;
}

.select2-container--open .select2-dropdown--below {
    /* top: 6px; */
}

body > .select2-container--open {
    z-index: 10060;
}

.smaller-select2 {
    font-size: 80%;
}

.smaller-select2 ~ span {
    font-size: 80%;
}

li ~ li.select2-search.select2-search--inline input {
    min-width: 50px !important;
}

.filters-list span.select2.select2-container.select2-container--default.select2-container--above:not(.select2-container--open) {
    width: auto !important;
}

.select2-results__option {
    white-space: nowrap;
}

.toggle-button {
    opacity: 0.2;
    transition: opacity 300ms;
}

.toggle-button.selected {
    opacity: 1;
}

.dt-container .dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, .dt-container .dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before {
    top: 50% !important;
    border-radius: 10% !important;
}

.filters-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filters-list li:not(:last-child) {
    margin-right: 10px;
}

.filters-list li {
    margin-bottom: 10px;
    font-size: 80%;
}

#nav-area {
    padding: 0.5rem 1rem 0 1rem !important;
}

#additional-area:not(:empty) {
    padding: 0.5rem 1rem 0 1rem !important;
}

.table-sm {
    font-size: 80%;
}

.clearfix:after {
    display: block;
    content: "";
    clear: both;
}

.import-code-content * {
    font-family: courier !important;
}  

.table-overflow {
    /* overflow-y: auto; */
    overflow-x: auto;
}

.dt-scroll-body {
    overflow: visible !important;
}

table .empty {
    display: none;
}

table .empty:only-child {
    display: table-row;
}

label.error {
    color: red;
    font-size: 60%;
}

.main {
    min-height: 100vh;
    width: 100%;
}

.main > .container-fluid {
    height: 100%;
}

.main > .container-fluid > .content {
    height: 100%;
}

.barcode-receipt:valid {
    opacity: 0.6;
}

.barcode-receipt {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    left: 50%;
    bottom: 0;
    width: 250px;
    transform: translate(-50%, -50%);
    transition: opacity 300ms;
    border: 3px solid #cfcfcf;
    border-radius: 8px;
    padding: 5px;
    text-align: center;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.import-entities {
    cursor: pointer;
    color: var(--light-master);
}

.code {
    font-size: 80%;
    font-family: monospace;
}

.entity-deleted {
    text-decoration: line-through;
}

.custom-populator label {
    width: 100%;
}

table .select2-container--open .select2-dropdown--below {
    position: relative !important;
}

.invalid-value, .invalid-value-text, .invalid-value-text * {
    color: red !important;
}

.invalid-value {
    border: 1px solid red;
}

.danger-value, .danger-value-text, .danger-value-text * {
    color: orange !important;
}

.danger-value {
    border: 1px solid orange;
}

select.component-locale-select {
    height: 24px;
    border: transparent;
    outline: none;
    border-radius: 5px;
    background-color: transparent;
    transition: background-color 300ms;
}

select.component-locale-select:focus {
    background-color: #efefef;
}

.sticky-table-head th {
    position: sticky; 
    top: 68px;
    background-color: white;
    box-shadow: inset 0 -1px 0 var(--light-background);
}

.dropdown-item.highlighted {
    color: #232e3c;
}

.dropdown-item.highlighted {
    color: var(--light-master);
    text-decoration: none;
    background-color: var(--light-background);
}

.dropdown-menu .navbar-glass-shadow {
    box-shadow: none !important;
}

.empty-row {
    display: none;
}

.empty-row:only-child {
    display: table-row;
}

.select2-search__field:placeholder-shown {
    width: auto !important;
}

.select2-selection__clear {
    position: relative;
    z-index: 1000;
}

/*.modal-content > .modal-body {*/
/*    overflow-y: scroll !important;*/
/*}*/

/* .bootbox.modal.fade.show > .modal-dialog > .modal-content {*/
/*    max-height: 96vh;*/
/*}*/

.add-filters-popup {
    z-index: 1051;
}

/* Virtual Checkbox */



.virtual-checkbox {
    position: relative;
}

.virtual-checked {
    position: absolute;
    top: 2.1px;
    left: 0;
    width: 14px;
    height: 14px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 2px !important;
    pointer-events: none;
}

.virtual-checkbox input:checked {
    opacity: 1;
}

.virtual-checkbox input:not(:checked) {
    opacity: 0;
}

.virtual-checkbox input:not(:checked) ~ .virtual-checked {
    opacity: 1;
}

.virtual-checkbox input:checked ~ .virtual-checked {
    opacity: 0;
}

table .virtual-checkbox input {
    position: relative;
    top: 2px;
}

table .virtual-checked {
    width: 13px;
    height: 13px;
}

.virtual-checkbox input.semi-checked:not(:checked) ~ .virtual-checked:before {
    content: "";
    position: absolute;
    width: 85%;
    height: 85%;
    background-color: silver;
    border-radius: 2px !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

button i {
    pointer-events: none;
}

.additional-commands {
    width: 20px;
    display: inline-block;
    text-align: center;
    opacity: 0.3;
    transition: opacity 300ms;
}

.additional-commands:hover {
    opacity: 1;
}

.row-actions-menu {
    position: fixed !important;
    z-index: 2000;
}

.copy-content {
    padding: 0 0.2rem;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 300ms;
    position: absolute;
}

.copy-content:hover {
    opacity: 1;
}

.modal .form-group label {
    display: inline !important;
    width: auto !important;
}

li.searching {
    list-style: none;
    list-style-type: none;
    padding: 20px 10px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
}

#top-search-nav {
    padding-top: 0 !important;
}

.iti {
    width: 100%;
    height: 36px;
}


#categories-tree, #categories-tree ul, #locations-tree, #locations-tree ul {
    padding: 0;
    list-style: none;
}

#categories-tree li .category-title, 
#locations-tree li .category-title, 
#locations-tree li .location-title 
{
    padding: 10px 20px;
    display: block;
    z-index: 1;
    width: 100%;
}

#categories-tree li, #locations-tree li {
    cursor: pointer;
    transition: 300ms opacity, 300ms color;
}

#categories-tree li i {
    position: relative;
    z-index: 1;
    width: 1.15em;
    display: inline-block;
}

#categories-tree li i.add-category, i.edit-category, #categories-tree li i.delete-category,
#locations-tree li i.add-location, #locations-tree li i.delete-location {
    float: right;
    margin-left: 10px;
    opacity: 0.5;
    transition: 300ms opacity;
    margin-top: 5px;
}

#categories-tree li i.add-category:hover, i.edit-category:hover, #categories-tree li i.delete-category:hover,
#locations-tree li i.add-location:hover, #locations-tree li i.delete-location:hover {
    opacity: 1;
}

#categories-tree li.leaf .category-group {
    opacity: 0;
}

#categories-tree li.leaf .category-group, 
#locations-tree li.leaf .category-group {
    opacity: 0;
}

#categories-tree li > .category-title:before,
#locations-tree li > .category-title:before,
#locations-tree li > .location-title:before
{
    content: "";
    position: absolute;
    height: 46px;
    margin-top: -10px;
    right: 0;
    left: 0;
    border: 0 solid #efefef;
    pointer-events: none;
    
    transition: 300ms border-width;
}

#categories-tree li.drop-in > .category-title:before,
#locations-tree li.drop-in > .category-title:before,
#locations-tree li.drop-in > .location-title:before
{
    border-width: 10px;
}

#categories-tree li:before,
#locations-tree li:before {
    content: "";
    position: absolute;
    border-bottom: 1px solid #efefef;
    border-top: 0 solid #efefef;
    height: 46px;
    right: 0;
    left: 0;
    pointer-events: none;
    
    transition: 150ms border-top-width, 150ms border-bottom-width;
}

#categories-tree li.drop-before:before,
#locations-tree li.drop-before:before{
    border-top: 10px solid #efefef;
}

#categories-tree li.drop-after:before,
#locations-tree li.drop-after:before {
    border-bottom: 10px solid #efefef;
}

#categories-tree ul,
#locations-tree ul {
    padding: 0 20px;
    padding-right: 0;
}

ul#categories-tree,
ul#locations-tree {
    position: relative;
}

.dragged-element {
    opacity: 0.5;
}

.dragging, .table-dragging {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.select2-container--focus .select2-selection {
    border-color: black;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    margin-top: 2px;
}

.item-icon {
    padding: 5px;
    width: 27px;
    height: 30px;
    display: inline-block;
    border: 1px solid #efefef;
    border-radius: 4px;
    line-height: 19px;
    text-align: center;
}

.in-search .category-title ~ ul {
    display: block!important;
}

.component-locale-field label {
    height: 20px;
}

.loading-barrier ~ * {
    pointer-events: none;
}

.loading-barrier ~ * *:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
}

.wizard.pager {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-filter {
    border: 1px solid #afafaf;
    padding: 2px 5px;
    border-radius: 3px;
}

.open-filter-builder {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fff;
    border: 1px solid #d8dee9;
    color: #344050;
    border-radius: 0.5rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
}

.open-filter-builder:hover,
.open-filter-builder:focus {
    background: #f8fafc;
    outline: none;
}

.filter-builder-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #2c7be5;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.filter-builder {
    position: fixed;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    max-height: calc(80vh - 8px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.filter-builder-top {
    display: flex;
    direction: ltr;
    justify-content: flex-end;
    gap: 0.15rem;
    flex: 0 0 auto;
    padding: 0.35rem 0.45rem 0;
}

.filter-builder-close,
.filter-builder-dock {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: #748194;
    cursor: pointer;
}

.filter-builder-close:hover,
.filter-builder-dock:hover,
.filter-builder-dock[aria-pressed="true"] {
    background: #f3f5f9;
    color: #1f2937;
}

.filter-builder.is-docked {
    top: 0 !important;
    bottom: 0;
    right: auto !important;
    height: 100vh;
    max-height: none !important;
    width: 440px !important;
    max-width: none !important;
    border-radius: 0;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
}

.filter-builder.is-docked .filter-builder-pane,
.filter-builder.is-docked .filter-builder-fields,
.filter-builder.is-docked .filter-builder-editor {
    max-height: none;
}

.filter-builder.is-docked .filter-builder-pane {
    flex-direction: column;
}

.filter-builder.is-docked .filter-builder-fields {
    width: auto;
    flex: 0 1 42%;
    max-height: 42%;
    border-inline-end: 0;
    border-bottom: 1px solid #edf0f5;
}

body.filter-builder-docked .content {
    padding-right: var(--filter-dock-offset, 0px);
}

.filter-builder-pane {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(80vh - 8px);
    overflow: hidden;
}

.filter-builder-fields {
    width: 250px;
    flex: 0 0 250px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(80vh - 8px);
    background: #fbfcfe;
    border-inline-end: 1px solid #edf0f5;
}

.filter-builder-search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem 0.25rem;
    flex: 0 0 auto;
}

.filter-builder-search .input-group {
    width: 100%;
}

.filter-builder-search .form-control {
    width: 1%;
    min-width: 0;
    flex: 1 1 auto;
}

.filter-builder-search-empty {
    color: #9da9bb;
    font-size: 0.8rem;
    padding: 0.75rem 0.9rem;
}

.filter-builder-nested-bar {
    padding: 0.55rem 0.65rem 0.15rem;
}

button.filter-builder-back {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0.45rem;
    background: #eef2f7;
    box-shadow: none;
    color: #344050;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

button.filter-builder-back:hover {
    background: #e2e8f0;
    color: #1f2937;
}

.filter-builder-fields.is-nested .filter-builder-field-list {
    margin: 0 0.45rem;
    background: #f4f7fb;
    border-radius: 0.5rem;
}

.filter-builder-fields-title {
    padding: 0.45rem 0.9rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #748194;
}

.filter-builder-field-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.35rem;
}

.filter-builder-loading {
    color: #9da9bb;
    font-size: 0.8rem;
    padding: 0.75rem;
}

.filter-field-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: #344050;
    text-align: start;
    border-radius: 0.45rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.86rem;
    cursor: grab;
}

.filter-field-choice:hover,
.filter-field-choice.is-selected {
    background: #e8f1ff;
    color: #1d4f91;
}

.filter-field-nested {
    color: #1d4f91;
    font-weight: 600;
}

.filter-field-choice-arrow {
    display: inline-block;
    color: #9da9bb;
    font-size: 0.7rem;
}

[dir="rtl"] .filter-builder-back-icon {
    transform: scaleX(-1);
}

[dir="rtl"] .filter-builder-fields-title {
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .filter-builder .table-filter > input.value[type="number"],
[dir="rtl"] .filter-builder .table-filter > input.flatpickr-input {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] .flatpickr-calendar {
    direction: ltr;
}

.filter-field-choice-count {
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4f91;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-builder-clear {
    border: 0;
    border-top: 1px solid #edf0f5;
    background: transparent;
    color: #748194;
    text-align: start;
    padding: 0.75rem 0.9rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.filter-builder-clear:hover {
    color: #e11d48;
}

.filter-builder-editor {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(80vh - 8px);
    overflow: auto;
    padding: 0.85rem;
    background: #fff;
}

.filter-group {
    border: 1px solid #86efac;
    border-radius: 0.85rem;
    background: #fff;
    padding: 0.7rem;
}

.filter-group.is-or {
    border-color: #fdba74;
}

.filter-group.is-active-group {
    box-shadow: inset 0 0 0 1px rgba(44, 123, 229, 0.18);
}

.filter-group.is-drop-target {
    box-shadow: inset 0 0 0 2px #2c7be5;
}

.filter-drag-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    margin-top: 0.75rem;
    border: 0;
    background: transparent;
    color: #9da9bb;
    cursor: grab;
    padding: 0;
}

.filter-drag-handle:active {
    cursor: grabbing;
}

.filter-builder .is-dragging {
    opacity: 0.45;
}

.filter-group .filter-group {
    margin-top: 0.15rem;
}

.filter-group > .card-body {
    padding: 0.35rem 0 0;
}

.filter-group-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.filter-operator {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.filter-operator-choice {
    border: 0;
    background: #fff;
    color: #4b5563;
    padding: 0.32rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}

.filter-operator-choice.is-active[data-operator="AND"] {
    background: #16a34a;
    color: #fff;
}

.filter-operator-choice.is-active[data-operator="OR"] {
    background: #f97316;
    color: #fff;
}

.filter-group-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-text-btn {
    border: 1px solid #bfdbfe;
    background: #fff;
    color: #2563eb;
    border-radius: 0.45rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.filter-text-btn:hover {
    background: #eff6ff;
}

.filter-icon-btn.remove-filter-group {
    width: 2rem;
    height: 2rem;
    border: 1px solid #fecdd3;
    background: #fff;
    color: #e11d48;
    border-radius: 0.45rem;
    cursor: pointer;
}

.filter-icon-btn.remove-filter-group:hover {
    background: #fff1f2;
}

.filter-group-empty {
    display: none;
    color: #9da9bb;
    font-size: 0.8rem;
    padding: 0.35rem 0.15rem 0.5rem;
}

.filter-group > .card-body > .filters-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding-top: 0.15rem;
    padding-inline-start: 0.35rem;
    border-inline-start: 2px solid #e5e7eb;
}

.filter-builder .filters-list > li.filter,
.filter-builder .filters-list > li.filter-group-item {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    font-size: 0.85rem;
    list-style: none;
}

.filter-builder .filters-list > li.is-drop-before {
    box-shadow: inset 0 2px 0 #2c7be5;
}

.filter-builder .filters-list > li > .table-filter,
.filter-builder .filters-list > li > .filter-group {
    flex: 1 1 auto;
    min-width: 0;
}

.filter-builder .table-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: #f3f5f9;
    border: 1px solid #e6eaf2;
    border-radius: 0.75rem;
    padding: 0.7rem;
}

.filter-builder .table-filter > span.align-self-center {
    order: 1;
    flex: 1 1 8rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.4rem 0.65rem;
    min-height: 2.1rem;
}

.filter-builder .table-filter > select.comparator {
    order: 2;
    flex: 1 1 8rem;
    height: 2.1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
}

.filter-builder .table-filter > .remove-filter {
    order: 3;
    margin-inline-start: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #e11d48 !important;
    padding: 0.2rem 0.35rem;
}

.filter-builder .table-filter > .value,
.filter-builder .table-filter > .select2,
.filter-builder .table-filter > .select2-container,
.filter-builder .table-filter > input.value,
.filter-builder .table-filter > .flatpickr-input {
    order: 4;
    flex: 1 0 100%;
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
}

.modal.fade,
.modal.fade .modal-dialog {
  transition: none !important;
  transform: none !important;
}

.dt-length {
    float: right;
}

.modal-backdrop ~ .modal-backdrop {
    z-index: 1051;
}

.modal ~ .modal {
    z-index: 1052;
}

div#clr-picker {
    z-index: 2000;
}

.dt-buttons .buttons-table-group.table-group-selected,
.dt-buttons .buttons-table-group.table-group-selected:hover,
.dt-buttons .buttons-table-group.table-group-selected:focus,
.dt-buttons .buttons-table-group.active,
.show > .dt-buttons .buttons-table-group.dropdown-toggle {
    color: #4d5969 !important;
    background-color: #cce8f1 !important;
    border-color: #cce8f1 !important;
}

.dt-buttons .buttons-table-group.table-group-selected:hover,
.dt-buttons .buttons-table-group.table-group-selected:focus {
    color: #006a8c !important;
}

.buttons-table-group .table-group-button-label {
    margin-left: 0.35rem;
}

tr.table-group-row td.table-group-cell {
    background: #f4f6f8;
    font-weight: 600;
    cursor: pointer;
}

tr.table-group-row .table-group-toggle {
    padding: 0 0.35rem 0 0;
}

tr.table-group-row .table-group-chevron {
    display: inline-block;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.15s ease;
}

tr.table-group-row.table-group-open .table-group-chevron {
    transform: rotate(90deg);
}

html[dir="rtl"] tr.table-group-row .table-group-chevron {
    transform: rotate(180deg);
}

html[dir="rtl"] tr.table-group-row.table-group-open .table-group-chevron {
    transform: rotate(90deg);
}

tr.table-group-row .table-group-spinner {
    display: none;
}

tr.table-group-row.table-group-loading td.table-group-cell {
    cursor: progress;
}

tr.table-group-row.table-group-loading .table-group-chevron {
    display: none;
}

tr.table-group-row.table-group-loading .table-group-spinner {
    display: inline-block;
}

tr.table-group-row .table-group-count {
    margin-left: 0.75rem;
}

tr.table-group-more td {
    background: #ffffff;
}

tr.table-group-more.table-group-more-loading td {
    background: #f7fbfe;
}

tr.table-group-more.table-group-more-loading .table-group-more {
    cursor: progress;
}

.table-list-aggregations-row th.table-list-aggregation-cell {
    font-weight: 600;
    font-size: 0.85rem;
    border-top: 1px solid #d8e2ef;
    vertical-align: middle;
}

.table-list-aggregations-row th.table-list-aggregation-cell:not(.table-list-aggregation-cell--selection):not(.table-list-aggregation-cell--options) {
    text-align: right;
}

.inline-aggregations-section {
    margin-bottom: 0.5rem;
}

.inline-aggregations-section .inline-aggregations-panel {
    border: 1px solid #d8e2ef;
    box-shadow: none;
}

.inline-aggregations-section .inline-aggregations-panel-header {
    background-color: #f9fafd;
    border-bottom: 1px solid #d8e2ef;
    cursor: pointer;
    user-select: none;
}

.inline-aggregations-section .inline-aggregations-panel-title {
    font-size: 0.95rem;
    color: #344050;
}

.inline-aggregations-section .inline-aggregations-panel-chevron {
    color: #748194;
    font-size: 0.85rem;
}

.inline-aggregations-section .inline-aggregation-widget-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #344050;
}

.inline-aggregations-section .inline-aggregation-kpi-card,
.inline-aggregations-section .inline-aggregation-group-card {
    border: 1px solid #d8e2ef;
    box-shadow: none;
}

.inline-aggregations-section .inline-aggregation-group-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #344050;
    margin-bottom: 0.5rem;
}

.inline-aggregations-section .inline-aggregation-kpi-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.inline-aggregations-section .inline-aggregation-kpi-metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #748194;
    margin-bottom: 0.15rem;
}

.inline-aggregations-section .inline-aggregation-kpi-metric-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #344050;
    margin-bottom: 0;
}

.inline-aggregations-section .inline-aggregations-empty {
    font-size: 0.85rem;
}

.filter-preselections-panel .filter-preselection-group-label {
    margin: 0.65rem 0 0.2rem;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #748194;
}

.filter-preselections-panel .filter-preselection-empty {
    padding: 0.15rem 0.35rem 0.35rem;
    font-size: 0.8rem;
    color: #9da9bb;
}

.filter-preselections-panel .filter-preselection-list {
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
}

.filter-preselections-panel .filter-preselection-row {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-height: 28px;
    border-radius: 0.25rem;
}

.filter-preselections-panel .filter-preselection-row:hover {
    background: rgba(44, 123, 229, 0.08);
}

.filter-preselections-panel .filter-preselection-item,
.filter-preselections-panel .filter-preselection-remove {
    border: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1.2;
}

.filter-preselections-panel .filter-preselection-item {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0.25rem 0.35rem;
    text-align: start;
    font-size: 0.8125rem;
    font-weight: 400;
    color: #344050;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-preselections-panel .filter-preselection-remove {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.15rem 0 0;
    padding: 0;
    color: #b02a37;
    cursor: pointer;
}

.filter-preselections-panel .filter-preselection-remove:hover {
    color: #842029;
}

/* flatpickr: keep popup calendar out of flex layout flow */
body > .flatpickr-calendar {
    position: absolute !important;
    z-index: 100000 !important;
}

body > .flatpickr-calendar.open {
    display: block !important;
}
.add-attributes-popup {
    width: 18rem;
    z-index: 1;
}

.attributes-search {
    list-style: none;
    height: 7.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 15px;
    border: 1px solid #d8e2ef;
    border-radius: 0.25rem;
    padding: 0;
}

.attributes-search li {
    padding: 5px 8px;
    cursor: pointer;
    background-color: transparent;
    transition: 300ms background-color;
}

.attributes-search li:hover {
    background-color: #d8e2ef;
}

.attributes-search li:active {
    background-color: #e3e2ef;
}

.attributes-search *:not(small, input) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 50%;
    font-size: 90%;
}


table tr {
    opacity: 1;
    transition: opacity 300ms;
}

.dragged-table-element {
    opacity: 0.5;
}

.sortable-table tr {
    cursor: pointer;
}

.sortable-table tr:hover {
    cursor: pointer;
    background-color: #fbfbfb;
}

.sortable-table tr {
    border-bottom: 0 solid #efefef;
    border-top: 0 solid #efefef;
    
    transition: border-width 300ms;
}

tr.drop-table-before {
    border-top-width: 5px;
}

tr.drop-table-after {
    border-bottom-width: 5px;
}


.select2-results__options .select2-results__option {
    min-width: 100% !important;
    width: fit-content;
}

.protect-field {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translate(0, -50%);
    background-color: transparent;
    border: none;
    color: silver;
}

.color-input-component .color-attribute-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-input-component .color-attribute-picker .clr-field,
.color-input-component .color-attribute-picker > input.color-input-hex {
    flex: 1 1 auto;
    min-width: 0;
}

.color-input-component .color-input-clear {
    flex: 0 0 auto;
}

.color-attribute-picker .clr-field {
    width: 100%;
    display: block;
}

.color-attribute-picker .clr-field input.color-attribute-hex {
    width: 100%;
    font-family: monospace;
    padding-left: 2.75rem;
}

.color-attribute-picker .clr-field button {
    width: 2.25rem;
    height: calc(1.5em + 0.75rem);
    border-radius: 0.25rem 0 0 0.25rem;
    border: 1px solid #ced4da;
    border-right: 0;
}

.bootbox .modal-body,
.modal.show .modal-body {
    position: relative;
}

.bootbox .clr-picker,
.modal.show .clr-picker {
    position: absolute;
    z-index: 5;
}

.clr-picker {
    z-index: 10050;
}