/* Theming */
:root{
    --cui-primary-rgb: 60, 75, 100;
    --cui-pagination-color: #3C4B64;
    --cui-pagination-bg: rgba(255, 255, 255, 0.87);
    --cui-pagination-border-color: #c4c9d0;
    --cui-pagination-active-color: rgba(255, 255, 255, 0.87);
    --cui-pagination-active-bg: #2c3648;
    --cui-pagination-active-border-color: #2c3648;
    --cui-pagination-hover-color: rgba(255, 255, 255, 0.87);
    --cui-pagination-hover-bg: #2c3648;
    --cui-pagination-hover-border-color: #2c3648;
    --cui-pagination-focus-color: rgba(255, 255, 255, 0.87);
    --cui-pagination-focus-bg: #2c3648;
    --cui-pagination-disabled-color: #8a93a2;
    --cui-pagination-disabled-bg: #fff;
    --cui-pagination-disabled-border-color: #c4c9d0;

    --cui-accordion-bg: #fff;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--cui-nav-pills-link-active-color, rgba(255, 255, 255, 0.87));
    background-color: var(--cui-nav-pills-link-active-bg, #3C4B64);
}
.btn-outline-primary {
    --cui-btn-border-color: #3C4B64;
    --cui-btn-color: #3C4B64;
    --cui-btn-hover-bg: #2c3648;
    --cui-btn-hover-border-color: #2c3648;
    --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
    --cui-btn-active-bg: #2c3648;
    --cui-btn-active-border-color: #2c3648;
    --cui-btn-active-color: rgba(255, 255, 255, 0.87);
    --cui-btn-disabled-color: #8a93a2;
    --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}
.btn-primary, .btn-dark {
    --cui-btn-bg: #3C4B64;
    --cui-btn-border-color: #3C4B64;
    --cui-btn-color: rgba(255, 255, 255, 0.87);
    --cui-btn-hover-bg: #2c3648;
    --cui-btn-hover-border-color: #2c3648;
    --cui-btn-hover-color: rgba(255, 255, 255, 0.87);
    --cui-btn-active-bg: #2c3648;
    --cui-btn-active-border-color: #2c3648;
    --cui-btn-active-color: rgba(255, 255, 255, 0.87);
    --cui-btn-disabled-bg: #8a93a2;
    --cui-btn-disabled-border-color: #c4c9d0;
    --cui-btn-disabled-color: rgba(255, 255, 255, 0.87);
    --cui-btn-shadow: rgba(50, 31, 219, 0.5);
}
.accordion-button {
    color: inherit;
    background-color: var(--cui-card-cap-bg, #f7f7f8);
}
.accordion-button {
}
.accordion-collapse {
    border-top: 1px solid var(--cui-card-border-color, rgba(0, 0, 21, 0.125));
}
.accordion-button:not(.collapsed) {
    color: inherit;
    background-color: var(--cui-card-cap-bg, #f7f7f8);
    box-shadow: inherit;
}
.accordion-button:focus{
    box-shadow: none;
}
/* End of Theming */

.ax-repeatable-container {
    padding: 1rem;
}

.ax-table-thumbnail,
.ax-product-table-thumbnail {
    width: 150px;
    /*height: 50px;*/
}

.ax-form-thumbnail,
.ax-product-form-thumbnail {
    display: block;
    height: 150px;
    width: auto;
    margin-bottom: 20px;
}

.body .container-fluid{
    max-width: 1200px;
    padding-right: var(--cui-gutter-x,0.75rem);
    padding-left: var(--cui-gutter-x,0.75rem);
    margin-right: auto;
    margin-left: auto;
}

div .select2-container--default .select2-selection--multiple {
    background-color: var(--cui-input-bg, #f8fafc);
    border-color: var(-cui-input-border-color, #b1b7c1);
    min-height: 32px;
}

div .select2-container--default .select2-selection--single {
    background-color: var(--cui-input-bg, #f8fafc);
    border-color: var(-cui-input-border-color, #b1b7c1);
    min-height: 32px;
}
/* form */
.card-body .form-group {
    padding-bottom: 0.5rem;
}

form
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    min-height: 32px;
}

form .custom-file-container__image-preview {
    margin-top: 0;
    margin-bottom: 20px;
}
form .custom-file-container__custom-file__custom-file-control__button {
    background-color: var(--cui-form-file-button-bg, #d8dbe0);
    border-color: var(-cui-input-border-color, #b1b7c1);
}
form .custom-file-container__custom-file__custom-file-control {
    background-color: var(--cui-input-bg, #f8fafc);
    border-color: var(-cui-input-border-color, #b1b7c1);
}

form .tab-content {
    padding-top: 0.5rem;
    margin-bottom: 20px;
}
/* breadcrumb */
.breadcrumb{
    width: 100%;
    padding: 10px;
    padding-right: var(--cui-gutter-x, 0.75rem);
    padding-left: var(--cui-gutter-x, 1.25rem);
	margin: 0;font-size: 16px;
    margin-bottom: 1em;
    background: var(--cui-header-bg,#fff);
    border-bottom: var(--cui-header-border-width,1px) solid var(--cui-header-border-color,#d8dbe0);
}

.breadcrumb a{
    color: var(--cui-body-color,rgba(44,56,74,0.95));
    text-decoration: none;
}

/* data table */
#dataTableBuilder tfoot tr {
    border-top: 0;
}
#dataTableBuilder .alert-warning  {
    background-color: #f9b115;
}

#dataTableBuilder_wrapper  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#dataTableBuilder_processing {
    flex-grow: 6;
}

#dataTableBuilder_wrapper  .dataTables_scroll {
    flex: 2 1 auto;
    width: 100%;
}

/* data table toolist*/
#dataTableBuilder_wrapper .dt-buttons.btn-group {
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    display: inherit;
    vertical-align: middle;
    align-items: center;
}

#dataTableBuilder_processing {
    width: 100%;
}

.dataTables_scroll .fa, .dataTables_scroll .cli{
    font-size: 1.2em;
}

/* */
.dt-button-collection a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

#dataTableBuilder_wrapper .dt-buttons.btn-group .buttons-create{
    order: 5;
    --cui-btn-bg: #4f5d73;
    --cui-btn-border-color: #4f5d73;
    --cui-btn-color: rgba(255, 255, 255, 0.87);
    --cui-btn-hover-bg: #697588;
    --cui-btn-hover-border-color: #616d81;
    --cui-btn-hover-color: #fff;
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    margin-left: 1rem;
}


/* ******** */
#dataTableBuilder_paginate {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    justify-content: flex-end;
    display: flex;
}

.paginate_button > a {
    position: relative;
    display: block;
    color: var(--cui-pagination-color, #321fdb);
    text-decoration: none;
    background-color: var(--cui-pagination-bg, #fff);
    border: 1px solid var(--cui-pagination-border-color, #c4c9d0);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .paginate_button > a {
        transition: none;
    }
}
.paginate_button > a:hover {
    z-index: 2;
    color: var(--cui-pagination-hover-color, #2819af);
    background-color: var(--cui-pagination-hover-bg, #d8dbe0);
    border-color: var(--cui-pagination-hover-border-color, #c4c9d0);
}
.paginate_button > a:focus {
    z-index: 3;
    color: var(--cui-pagination-focus-color, #2819af);
    background-color: var(--cui-pagination-focus-bg, #d8dbe0);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(50, 31, 219, 0.25);
}

html:not([dir="rtl"]) .paginate_button:not(:first-child) .paginate_button > a {
    margin-left: -1px;
}
*[dir="rtl"] .paginate_button:not(:first-child) .paginate_button > a {
    margin-right: -1px;
}
.paginate_button.active > a {
    z-index: 3;
    color: var(--cui-pagination-active-color, rgba(255, 255, 255, 0.87));
    background-color: var(--cui-pagination-active-bg, #321fdb);
    border-color: var(--cui-pagination-active-border-color, #321fdb);
}
.paginate_button.disabled > a {
    color: var(--cui-pagination-disabled-color, #8a93a2);
    pointer-events: none;
    background-color: var(--cui-pagination-disabled-bg, #fff);
    border-color: var(--cui-pagination-disabled-border-color, #c4c9d0);
}

.paginate_button > a {
    padding: 0.375rem 0.75rem;
}

html:not([dir="rtl"]) .paginate_button:first-child .paginate_button > a {
    border-top-left-radius: 0.25rem;
}
*[dir="rtl"] .paginate_button:first-child .paginate_button > a {
    border-top-right-radius: 0.25rem;
}
html:not([dir="rtl"]) .paginate_button:first-child .paginate_button > a {
    border-bottom-left-radius: 0.25rem;
}
*[dir="rtl"] .paginate_button:first-child .paginate_button > a {
    border-bottom-right-radius: 0.25rem;
}
html:not([dir="rtl"]) .paginate_button:last-child .paginate_button > a {
    border-top-right-radius: 0.25rem;
}
*[dir="rtl"] .paginate_button:last-child .paginate_button > a {
    border-top-left-radius: 0.25rem;
}
html:not([dir="rtl"]) .paginate_button:last-child .paginate_button > a {
    border-bottom-right-radius: 0.25rem;
}
*[dir="rtl"] .paginate_button:last-child .paginate_button > a {
    border-bottom-left-radius: 0.25rem;
}

.pagination-lg .paginate_button > a {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}
html:not([dir="rtl"])
    .pagination-lg
    .paginate_button:first-child
    .paginate_button
    > a {
    border-top-left-radius: 0.3rem;
}
*[dir="rtl"] .pagination-lg .paginate_button:first-child .paginate_button > a {
    border-top-right-radius: 0.3rem;
}
html:not([dir="rtl"])
    .pagination-lg
    .paginate_button:first-child
    .paginate_button
    > a {
    border-bottom-left-radius: 0.3rem;
}
*[dir="rtl"] .pagination-lg .paginate_button:first-child .paginate_button > a {
    border-bottom-right-radius: 0.3rem;
}
html:not([dir="rtl"])
    .pagination-lg
    .paginate_button:last-child
    .paginate_button
    > a {
    border-top-right-radius: 0.3rem;
}
*[dir="rtl"] .pagination-lg .paginate_button:last-child .paginate_button > a {
    border-top-left-radius: 0.3rem;
}
html:not([dir="rtl"])
    .pagination-lg
    .paginate_button:last-child
    .paginate_button
    > a {
    border-bottom-right-radius: 0.3rem;
}
*[dir="rtl"] .pagination-lg .paginate_button:last-child .paginate_button > a {
    border-bottom-left-radius: 0.3rem;
}

.pagination-sm .paginate_button > a {
    padding: 0.25rem 0.5rem;
    font-size: 0.7875rem;
}
html:not([dir="rtl"])
    .pagination-sm
    .paginate_button:first-child
    .paginate_button
    > a {
    border-top-left-radius: 0.2rem;
}
*[dir="rtl"] .pagination-sm .paginate_button:first-child .paginate_button > a {
    border-top-right-radius: 0.2rem;
}
html:not([dir="rtl"])
    .pagination-sm
    .paginate_button:first-child
    .paginate_button
    > a {
    border-bottom-left-radius: 0.2rem;
}
*[dir="rtl"] .pagination-sm .paginate_button:first-child .paginate_button > a {
    border-bottom-right-radius: 0.2rem;
}
html:not([dir="rtl"])
    .pagination-sm
    .paginate_button:last-child
    .paginate_button
    > a {
    border-top-right-radius: 0.2rem;
}
*[dir="rtl"] .pagination-sm .paginate_button:last-child .paginate_button > a {
    border-top-left-radius: 0.2rem;
}
html:not([dir="rtl"])
    .pagination-sm
    .paginate_button:last-child
    .paginate_button
    > a {
    border-bottom-right-radius: 0.2rem;
}
*[dir="rtl"] .pagination-sm .paginate_button:last-child .paginate_button > a {
    border-bottom-left-radius: 0.2rem;
}
/*search bar*/
#dataTableBuilder_filter {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    margin-bottom: 1rem;
    order: -1;
}

#dataTableBuilder_filter > label {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* table content*/
#dataTableBuilder {
    overflow: auto;
    /* display: block ; */

    /* to make td fill 100% */
    display: table;
}

/* json form editor */
.json-form > div[data-schemaid="root"] > h3.card-title.je-object__title,
.json-form > div[data-schemaid="root"] > h3.card-title.je-object__title + span.btn-group.je-object__controls {
    display: none !important;
}
.json-form .bg-light {
    background-color: transparent !important;
}
.json-form h3 {
    font-size: 1.25em;
    font-weight: bold;
}
.json-form .btn-secondary {
    --cui-btn-bg: none;
    --cui-btn-border-color: #9da5b1;
    --cui-btn-color: #9da5b1;
    --cui-btn-hover-bg: #acb3bd;
    --cui-btn-hover-border-color: #a7aeb9;
    --cui-btn-hover-color: rgba(44, 56, 74, 0.95);
    --cui-btn-active-bg: #b1b7c1;
    --cui-btn-active-border-color: #a7aeb9;
    --cui-btn-active-color: rgba(44, 56, 74, 0.95);
    --cui-btn-disabled-color: #9da5b1;
    --cui-btn-shadow: rgba(157, 165, 177, 0.5);
}
.json-editor-btn-add.json-editor-btntype-add{
    text-transform: capitalize;
}
/* sorting */
.sorting,
table.dataTable>thead .sorting_asc,
table.dataTable>thead .sorting_desc,
table.dataTable>thead .sorting_asc_disabled,
table.dataTable>thead .sorting_desc_disabled {
	cursor: pointer;
	position: relative
}
table.dataTable>thead .sorting,
table.dataTable>thead .sorting_asc,
table.dataTable>thead .sorting_desc{
    padding-right: 1.5em;
}

table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:after {
	position: absolute;
	bottom: .5em;
	display: block;
	opacity: .3
}

table.dataTable>thead .sorting:before,
table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:before,
table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:before {
	right: 1em;
	content: "↑"
}

table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable>thead .sorting_asc_disabled:after,
table.dataTable>thead .sorting_desc_disabled:after {
	right: .5em;
	content: "↓"
}

table.dataTable>thead .sorting_asc:before,
table.dataTable>thead .sorting_desc:after {
	opacity: 1
}

table.dataTable>thead .sorting_asc_disabled:before,
table.dataTable>thead .sorting_desc_disabled:after {
	opacity: 0
}

div.dataTables_scrollHead table.dataTable {
	margin-bottom: 0 !important
}

div.dataTables_scrollBody>table {
	border-top: none;
	margin-top: 0 !important;
	margin-bottom: 0 !important
}

div.dataTables_scrollBody>table>thead .sorting:before,
div.dataTables_scrollBody>table>thead .sorting_asc:before,
div.dataTables_scrollBody>table>thead .sorting_desc:before,
div.dataTables_scrollBody>table>thead .sorting:after,
div.dataTables_scrollBody>table>thead .sorting_asc:after,
div.dataTables_scrollBody>table>thead .sorting_desc:after {
	display: none
}

div.dataTables_scrollBody>table>tbody tr:first-child th,
div.dataTables_scrollBody>table>tbody tr:first-child td {
	border-top: none
}

div.dataTables_scrollFoot>.dataTables_scrollFootInner {
	box-sizing: content-box
}

div.dataTables_scrollFoot>.dataTables_scrollFootInner>table {
	margin-top: 0 !important;
	border-top: none
}

@media screen and (max-width: 767px) {
	div.dataTables_wrapper div.dataTables_length,
	div.dataTables_wrapper div.dataTables_filter,
	div.dataTables_wrapper div.dataTables_info,
	div.dataTables_wrapper div.dataTables_paginate {
		text-align: center
	}
	div.dataTables_wrapper div.dataTables_paginate ul.pagination {
		justify-content: center !important
	}
}

table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled) {
	padding-right: 20px
}

table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before {
	top: 5px;
	right: .85em
}

table.dataTable.table-sm .sorting:after,
table.dataTable.table-sm .sorting_asc:after,
table.dataTable.table-sm .sorting_desc:after {
	top: 5px
}

.dataTables_info {
    margin-top: 1rem;
}

/* end data table */

/* general highlighted */
.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem
}

.gl-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem
}

.gl-badge.sm {
    padding-top: 0;
    padding-bottom: 0
}

.gl-badge.md {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem
}

.gl-badge.lg {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem
}

.gl-badge .gl-badge-icon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    top: auto
}

.gl-badge.badge-muted {
    background-color: #BBE8E6;
    color: #666
}

.gl-badge.badge-neutral {
    background-color: #dbdbdb;
    color: #525252
}

.gl-badge.badge-info {
    background-color: #cbe2f9;
    color: #0b5cad
}

.gl-badge.badge-success {
    background-color: #c3e6cd;
    color: #24663b
}

.gl-badge.badge-warning {
    background-color: #f5d9a8;
    color: #8f4700
}

.gl-badge.badge-warning-2 {
    color: #fff;
    background-color: #ab6100
}

.gl-badge.badge-danger {
    background-color: #fdd4cd;
    color: #ae1800
}

.badge-warning {
    color: #fff;
    background-color: #ab6100
}

.badge-danger {
    color: #fff;
    background-color: #dd2b0e
}

.badge-light {
    color: #303030;
    background-color: #dbdbdb
}

.badge-dark {
    color: #fff;
    background-color: #404040
}

/* order detail */
.order-details-item-summary tr td{
    font-weight: 700;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem ;
    padding-left: 0.5rem ;
}

.order-details-item-summary tr:last-child {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* product */
#product-tab-content #inventory .buttons-sync-fa{
    --cui-btn-bg: #4f5d73;
    --cui-btn-border-color: #4f5d73;
    --cui-btn-color: rgba(255, 255, 255, 0.87);
    --cui-btn-hover-bg: #697588;
    --cui-btn-hover-border-color: #616d81;
    --cui-btn-hover-color: #fff;
}
/* css to remove selected options in select2  */
/* .select2-results__option[aria-selected=true] { display: none; }
.select2-results__option--selected { display: none; } */

.animate.pop {
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    -webkit-animation-name: animate-pop;
            animation-name: animate-pop;
    -webkit-animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
            animation-timing-function: cubic-bezier(.26, .53, .74, 1.48);
}

@-webkit-keyframes animate-pop {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes animate-pop {
    0% {
        opacity: 0;
        transform: scale(0.5, 0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

.live-indicator {
	background: #24663b;
	border-radius: 50%;
	/* margin: 10px; */
	height: 12px;
	width: 12px;

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	-webkit-animation: pulse 2s infinite;
	        animation: pulse 2s infinite;
}

@-webkit-keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 4px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 4px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.html-container {
    border-radius: 4px;
    border: 1px solid var(--cui-card-border-color, rgba(0, 0, 21, 0.125));
    padding: 0.5rem;
    height: 300px;
    overflow-x: scroll;
}

input[type="color"] {
    min-height: 37px;
}

body div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background: #3C4B64;
    color: #fff;
    border-color: #3C4B64;
}