:root { --bs-rem: .25rem; }

/* --------------------------------------------------------------------------------------------- */
/* ######################################## LOAD FONTS ######################################### */
/* --------------------------------------------------------------------------------------------- */
@font-face { font-family:'Quicksand'; src:url(/custom-styles/fonts/Quicksand-Light.ttf) format('truetype'); font-weight:300; }
@font-face { font-family:'Quicksand'; src:url(/custom-styles/fonts/Quicksand-Regular.ttf) format('truetype'); font-weight:400; }
@font-face { font-family:'Quicksand'; src:url(/custom-styles/fonts/Quicksand-Medium.ttf) format('truetype'); font-weight:500; }
@font-face { font-family:'Quicksand'; src:url(/custom-styles/fonts/Quicksand-SemiBold.ttf) format('truetype'); font-weight:600; }
@font-face { font-family:'Quicksand'; src:url(/custom-styles/fonts/Quicksand-Bold.ttf) format('truetype'); font-weight:700; }

.bs5-modal * { box-sizing: border-box; }
.bs5-modal *:not(i) { font-family: 'Quicksand', sans-serif !important; }

.bs5-modal ::-webkit-scrollbar { width: 20px; }
.bs5-modal ::-webkit-scrollbar-track { background-color: transparent; }
.bs5-modal ::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.15);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box; }
.bs5-modal ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.2); }

.bs5-modal input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs5-modal input[type=number] { -moz-appearance: textfield; }

.bs5-modal ::-webkit-input-placeholder { color: #bbb !important; }
.bs5-modal :-ms-input-placeholder { color: #bbb !important; }
.bs5-modal ::placeholder { color: #bbb !important; }

.bs5-row { margin: 0; padding: 0; }
.bs5-row > div { padding: 0; margin: 0; }
.bs5-btn { font-size: 13px; padding: 6px 8px; }
.bs5-btn-sm { font-size: 12px; padding: 6px 8px; }
.bs5-form-control:not(.bs5-form-control-sm) { font-size: 12px; font-weight: 500; padding: 6.750px 12px; }
.bs5-form-select:not(.bs5-form-select-sm):not(.search_select) { font-size: 12px; font-weight: 500; padding: 6.750px 25px 6.750px 12px; }
.bs5-form-control, .bs5-form-select { height: auto; margin: 0; box-shadow: none; }
.bs5-form-control:disabled, .bs5-form-select:disabled, .selectize-input.disabled { 
  color: #888; 
  padding-right: 25px;
  background-image: url('/custom-styles/images/lock_icon.png');
  background-repeat: no-repeat;
  background-size: 12px;
  background-position-x: calc(100% - 6px);
  background-position-y: center; }
.selectize-input.disabled:after { display: none !important; }
input[type=date].bs5-form-control { line-height: 1.334 !important; }

input[type=checkbox].bs5-custom-control-input:disabled + .bs5-custom-control-label::before { background-color: #d0cfcf !important; }

strong { font-weight: 700 !important; }
.group { 
  position: relative; 
  padding: 4px 8px !important; 
  text-align: left; 
  border-radius: 5px; }

.bs5-btn-outline-primary:not(:hover):focus { color: #0d6efd !important; }
.bs5-btn-outline-success:not(:hover):focus { color: #198754 !important; }
.bs5-btn-outline-danger:not(:hover):focus { color: #dc3545 !important; }
.bs5-btn-outline-dark:not(:hover):focus { color: #212529 !important; }
.btn-link { text-decoration: underline !important; }
.vcenter { display: flex !important; align-items: center !important; }
.hidden { display: none !important; }

.bs5-modal .form-label { margin-bottom: 5px; font-size: 12px; font-weight: 600; line-height: 1.2; }
.bs5-modal .form-label > strong { font-weight: 600 !important; font-size: 13px; }
.bs5-modal p.form-label { font-size: 13px; }
.bs5-modal p.form-label > span { font-weight: 400 !important; }
.bs5-modal .form-check-label { font-size: 12px; margin-left: 8px; }
.bs5-modal .link { font-weight: 600; color: #0d6efd; text-decoration: none; }
.bs5-modal .link:hover { text-decoration: underline; color: #0d6efd; }
/* .link { color: #dc3545; font-weight: 500; } */
.bs5-modal-backdrop.in { z-index: 1040; }
.text-nowrap { white-space: nowrap !important; }

.bs5-modal .bs5-custom-control { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.2; }
.bs5-modal .bs5-custom-control-label { height: 20px; padding-left: 35px; padding-right: 0; margin: 0; margin-right: 8px; }
.bs5-modal .bs5-custom-control-label::before { left: 0; right: auto; }
.bs5-modal .bs5-custom-control-label::after { right: 16.575px; left: 2.425px; }
.bs5-modal .bs5-custom-control-input:focus ~ .bs5-custom-control-label::before { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); }

.bs5-modal-header { width: auto; min-height: auto; }
.bs5-modal-body { text-align: center; padding: 25px; padding-bottom: 0; }
.bs5-modal-body p, .bs5-modal-body label:not(.bs5-btn) { color: #333; }
.bs5-modal-body p { font-weight: 500; }
.bs5-modal-footer { flex-wrap: nowrap; }
.bs5-modal-footer > * { min-width: 25%; text-decoration: none; margin: 5px; }

.required_symbol { color: var(--bs-orange); font-size: 16px; line-height: 0; }

/* --------------------------------------------------------------------------------------------- */
/* ######################################## SMALL ERROR ######################################## */
/* --------------------------------------------------------------------------------------------- */
small.error { 
  display: none; 
  text-align: right; 
  color: var(--bs-red); 
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  margin-top: 5px; }
label > .validate_icon { font-size: 16px !important; margin-right: 5px; }
label > .fa-circle-check { color: var(--bs-green); }
label > .fa-circle-exclamation { color: var(--bs-red); }

/* --------------------------------------------------------------------------------------------- */
/* ########################################## BTN ICON ######################################### */
/* --------------------------------------------------------------------------------------------- */
button.btn-icon, a.btn-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 20px;
  border-radius: 50%; }
button.btn-icon.small, a.btn-icon.small { width: 30px; height: 30px; font-size: 16px; }
button.btn-icon.small:hover > i, a.btn-icon.small:hover > i { font-weight: 900; }

/* --------------------------------------------------------------------------------------------- */
/* ################################## CONTENT PREVIEW SLIDER ################################### */
/* --------------------------------------------------------------------------------------------- */
#content_preview_slider {
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6); }
#content_preview_slider > .details {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 50px;
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,.7); }
#content_preview_slider > .details > li { margin: 0 10px; }
#content_preview_slider > i { cursor: pointer; position: absolute; right: 0; top: 0; margin: 20px; font-size: 24px; color: #ccc; }
#content_preview_slider > i:hover { color: #dc3545; }
#content_preview_slider > .content_carousel { 
  max-width: 90%; 
  height: calc(90% - 15px); 
  margin-top: 15px;
  text-align: center; }
#content_preview_slider .splide__track, 
#content_preview_slider .splide__list, 
#content_preview_slider .splide__slide { height: 100% }
#content_preview_slider .splide__slide img { max-width: 100%; max-height: 100%; }
#main-carousel { height: 80% }
#main-carousel .splide__slide { display: flex; align-items: center; }
/* #main-carousel .splide__slide img { width: auto; height: 100%; } */
#thumbnail-carousel { display: inline-block; height: 20% }
#thumbnail-carousel .splide__list { align-items: center; justify-content: center; }
#thumbnail-carousel .splide__slide { opacity: 0.6; }
#thumbnail-carousel .splide__slide.is-active { opacity: 1; }
#thumbnail-carousel .splide__slide img { width: 100%; height: 100%; object-fit: cover; }
#thumbnail-carousel .splide__track--nav>.splide__list>.splide__slide.is-active { border-color: #29d8e6; }
#thumbnail-carousel .splide__arrow--prev { left: -3em; }
#thumbnail-carousel .splide__arrow--next { right: -2.5em; }

/* --------------------------------------------------------------------------------------------- */
/* ################################### MODAL DETAILS PRODUCT ################################### */
/* --------------------------------------------------------------------------------------------- */
#btn_order_details_product { display: flex; align-items: center; }
#btn_order_details_product > i { font-size: 18px; }
#modal_details_product { max-height: none; margin: auto; top: 0; background-color: transparent; }
#modal_details_product .bs5-modal-content { background-color: #c0ccd8; }
#modal_details_product .bs5-modal-body { padding: 20px 10px 0 10px; margin-bottom: 10px; }
#modal_details_product .bs5-modal-body div.bs5-row { margin: 8px 15px; padding: 15px; background: #fff; border-radius: 8px; }
#modal_details_product .bs5-modal-body .buttons_collapse { display: inline-flex; align-items: center; justify-content: center; }
#modal_details_product .bs5-modal-body .info_circle { display: flex; align-items: center; flex-flow: column; margin: 0 5px; }
#modal_details_product .bs5-modal-body .info_circle > div { 
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 40px;
  height: 40px;
  border: 2px solid #222; 
  border-radius: 50%;
  font-weight: 600;
  color: #222; }
#modal_details_product .bs5-modal-body .info_circle > span { font-size: 13px; font-weight: 600 !important; color: #222; margin-top: 3px; }
#modal_details_product .bs5-modal-body ul { list-style: none; margin: 0; text-align: left; color: #222; }
#modal_details_product .bs5-modal-body ul > li { line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#modal_details_product table thead th { 
  color: #fff; 
  font-weight: 600; 
  text-align: center;
  padding: 7px 10px; 
  line-height: 1.2; 
  background: #2980BA !important; }
#modal_details_product table tbody tr.first { border-top: 1px solid #d2dde8; }
#modal_details_product table td { color: #222; }
#modal_details_product table td.title_odd { background: #e2ebf3 !important; }
#modal_details_product table td.title_even { background: #d2dde8 !important; }
#modal_details_product table tbody td { padding: 5px 10px; font-size: 14px; }
#modal_details_product table tbody > tr:nth-child(even) td { background: #f5f5f5; }

/* --------------------------------------------------------------------------------------------- */
/* ################################### MODAL DOWNLOAD TEMPLATE ################################# */
/* --------------------------------------------------------------------------------------------- */
#modal_download_template .bs5-modal-body { max-height: none; background: transparent; text-align: center; }

/* --------------------------------------------------------------------------------------------- */
/* #################################### MODAL PRICE PRODUCT  ################################### */
/* --------------------------------------------------------------------------------------------- */
#modal_price_product .selectize-control.multi .selectize-input { flex-flow: row; }
#modal_price_product .selectize-control.multi .selectize-input > div { width: fit-content; }

#list_results_xls { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0; list-style: none; }
#list_results_xls > li { display: flex; align-items: center; white-space: nowrap; margin: 5px; }
#list_results_xls > li > i { cursor: default; font-size: 20px; margin-right: 8px; }
#list_results_xls > li:first-child > i { color: var(--bs-primary); }
#list_results_xls > li:nth-child(2) > i { color: var(--bs-success); }
#list_results_xls > li:last-child > i { color: var(--bs-danger); }

#modal_price_product .bs5-modal-body button { display: inline-flex; align-items: end; }
#modal_price_product .bs5-modal-body button > i { font-size: 18px; }

/* --------------------------------------------------------------------------------------------- */
/* ###################################### MODAL EXPORT OS  ##################################### */
/* --------------------------------------------------------------------------------------------- */
#modal_export_OS .content_search { border-radius: 8px; background: #edf2f7; }
#modal_export_OS .content_search > .title_search { 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  margin: 0;
  background: #768b99; 
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px; }
#modal_export_OS .content_search.active > .title_search { background: #209dbb; }
#modal_export_OS .content_search > .title_search > i { font-size: 18px; margin-right: 8px; }
#modal_export_OS .content_search > .bs5-row { padding: 20px 15px; }

/* --------------------------------------------------------------------------------------------- */
/* ####################################### ALERT GLOBAL ######################################## */
/* --------------------------------------------------------------------------------------------- */
#alert_global {
  z-index: 1000001;
  display: none;
  align-items: center;
  position: fixed;
  top: 0;
  max-width: 50%;
  padding: 15px;
  border-radius: 2.5px;
  border: none;
  font-family: 'Quicksand';
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 3px 1px rgb(0 0 0 / 30%);
  animation-duration: .5s;
}
#alert_global > i { font-size: 30px; margin-right: 8px; }

/* --------------------------------------------------------------------------------------------- */
/* ###################################### JS COLOR PICKER ###################################### */
/* --------------------------------------------------------------------------------------------- */
.jscolor-picker { height: 92px !important; }
.jscolor-picker > div:not(.jscolor-palette):not(.jscolor-btn) { display: none !important; }
.jscolor-palette { top: 12px !important; }
.jscolor-btn { left: 50% !important; transform: translateX(-50%) !important; }

/* --------------------------------------------------------------------------------------------- */
/* ######################################### SELECTIZE ######################################### */
/* --------------------------------------------------------------------------------------------- */
.selectize-control { white-space: nowrap; padding: 0 !important; border: none; }
.selectize-input { 
  display: flex !important; 
  padding: 6.750px 12px !important; 
  padding-right: 35px !important; 
  border-radius: 4px !important; }
.selectize-input > input { font-size: 14px !important; }
.selectize-input.disabled > input { color: #888; font-weight: 500; }
.selectize-input .item { width: 100%; overflow: hidden; font-size: 14px !important; }
.selectize-input.focus { box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25); }
.selectize-dropdown, .selectize-dropdown .highlight { padding: 0; }
.selectize-dropdown { z-index: 10000 !important; }
.selectize-dropdown * { font-family: 'Quicksand', sans-serif; font-size: 14px; }
body.small_selectize .selectize-dropdown .option { font-size: 12px !important; }
.selectize-dropdown-content { padding: 0 !important; }
.selectize-dropdown .active { background-color: #0d6efd !important; color: #fff !important; }
.selectize-control .selectize-input.disabled { opacity: 1 !important; }
.selectize-control.multi .selectize-input { display: flex; flex-flow: column; padding: 6.750px !important; border-radius: 4px !important; }
.selectize-dropdown.multi { padding: 7.5px !important; }
.selectize-control .selectize-input.disabled { background-color: #e9ecef !important; }
.selectize-input .item, .selectize-input > input { font-size: 12px !important; }

/* --------------------------------------------------------------------------------------------- */
/* ##################################### RESPONSIVE STYLES ##################################### */
/* --------------------------------------------------------------------------------------------- */
#rightPanel .detailViewContainer > .detailViewTitle { padding-left: 0; }
/* #content_btn_modules { margin: 20px; text-align: center; }
#content_btn_modules button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: .9rem;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
#content_btn_modules button { color: #fff; background-color: #198754; border-color: #198754; }
#content_btn_modules button:hover, #content_btn_modules button:focus { color: #fff; background-color: #157347; border-color: #146c43; }
#content_btn_modules button:focus { box-shadow: 0 0 0 0.25rem rgb(60 153 110 / 50%); }
#content_btn_modules button > i { font-size: 20px; margin-right: 5px; color: #135c3a; transition: color .15s ease-in-out, }
#content_btn_modules button:hover > i { color: #0e442b; } */
#content_btn_modules button > i { font-size: 12px; }

#card_content { 
  display: none;
  padding-top: 5px; 
  margin: 10px 0;
  /* background: linear-gradient(to left, #743ad5, #d53a9d);  */
  /* background: linear-gradient(270deg, #00D7B9, #B95DD7 50%, #FFB367 100%); */
  /* background: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%); */
  background: linear-gradient(45deg, #9C27B0, #00BCD4, #28c759, #E91E63, #9C27B0, #4073ef, #FF5722, #d40074);
  border-bottom-left-radius: 8px; 
  border-bottom-right-radius: 8px; }
#card_content > .body, #card_content > .body > ul {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  padding: 20px;
  margin: 0;
  border-bottom-left-radius: 6px; 
  border-bottom-right-radius: 6px; }
#card_content > .body > ul { padding: 0; }
#card_content > .body .item_card { display: flex; align-items: center; padding: 8px; box-sizing: border-box; }
#card_content > .body .item_card > a { 
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
  width: 100% !important; 
  margin: 0;
  padding: 6px 20px 6px 12px; 
  border-radius: 500px !important; 
  border: none !important;
  color: #fff;
  text-align: center;
  background-color: #0a4bba !important;
  box-shadow: 0 2px 5px 1px rgb(0 0 0 / 30%) !important;
  box-sizing: border-box; }
#card_content > .body .item_card > a.active { background-color: #2272fc !important; }
#card_content > .body .item_card.back_btn > a { 
  width: 30px !important; 
  height: 30px; 
  padding: 0; 
  background: #d10074 !important;
  box-shadow: none !important; }
#card_content > .body .item_card > a > .count {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  top: -10px;
  right: -5px;
  padding: 0;
  margin: 0;
  background: #d10074;
  border-radius: 50%;
  border: 3px solid #fff; }

/* .listViewActionsDiv .btn-toolbar, .detailViewPagingButton { width: auto !important; }
.detailViewTitle { margin-top: 15px; }
.detailViewTitle .row-fluid { display: flex; align-items: center; }
.detailViewTitle .row-fluid > span { display: flex; }
.detailViewTitle .recordLabel { 
  display: flex;
  width: auto !important; 
  margin: 0 !important;
  line-height: 1;
  white-space: normal !important; }
#rightPanel .detailViewTitle [class*="span"] { width: auto !important; } */

#headerLinks { max-width: none !important; }
#headerLinksCompact .btn-navbar:hover, #headerLinksCompact .btn-navbar:focus { background: #0c6983 !important; }
.title_label { display: flex; align-items: center; }
.title_label > span { width: auto !important; }
.title_label > span.span2 { display: flex; }
.title_label .recordLabel { display: flex; align-items: center; width: auto !important; margin: 0; white-space: normal; line-height: 1; }
@media screen and (max-width: 1024px) {
  .listViewPageDiv, .detailViewContainer { padding-left: 70px !important; }
}