/*__filename__    : kiosco-componentes.css */
/*__author__      : DataHome S. de R.L. de C.V. */
/* __copyright__  : DataHome S. de R.L. de C.V. */
/*__description__ : Estilos para componentes y utilidades de Kiosco App */
/* __version__    : 1.2.0 */
/* __app__        : Kiosco */
/* ///// TABS ///// */
.nav-tabs.nav-inline {
   flex-wrap: nowrap;
   overflow-x: auto;
}

.nav-tabs.nav-inline .nav-link {
   white-space: nowrap;
}

.hcc-nav-tabs {
   margin-left: 120px;
}

@media (max-width: 768px) {
   .hcc-nav-tabs {
      margin-left: 0px;
   }
}

.nav-tabs {
   border-bottom: 1px solid transparent;
}

.nav-tabs .nav-link {
   margin-bottom: 0px;
   border: 2px solid transparent;
}

.nav-link {
   display: block;
   padding: 8px 8px;
   color: var(--text-color-secondary);
   font-size: 14px;
}

@media (max-width: 576px) {
   .header-section .nav-link {
      padding: 16px 8px;
   }
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
   border-color: transparent;
   isolation: isolate;
   color: var(--text-color-default);
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
   color: var(--text-color-default);
   background-color: transparent;
   border-color: transparent transparent var(--text-color-primary);
   font-weight: var(--font-bold);
}

/* ///// PROGRESSBAR ///// */
.progress {
   background-color: var(--border-color);
   border-radius: 0.25rem;
   transition: background-color .3s;
}

.progress-bar {
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-primary));
   transition: all .3s;
}

/* ///// GLOBAL ELEMENTS ///// */
.ks-card {
   width: 100%;
   height: auto;
   background-color: var(--bg-color-elements);
   border-radius: 5px;
   padding: 24px;
   margin-bottom: 20px;
   border: 1px solid transparent;
   transition: all .3s;
}

.ks-card-outline {
   background-color: transparent;
   border-color: var(--border-color);
}

.dashed {
   border-style: dashed;
   border-width: 2px;
}

.ks-card-h-100 {
   height: calc(100% - 1.5rem);
}

/* .table {
   color: var(--text-color-default);
   transition: all .3s;
   line-height: 16px;
} */

.table {
   --bs-table-bg: transparent;
   --bs-table-accent-bg: transparent;
   --bs-table-striped-color: var(--text-color-default);
   --bs-table-striped-bg: var(--bg-color-elements);
   --bs-table-active-color: var(--text-color-default);
   --bs-table-active-bg: var(--bg-color-elements);
   --bs-table-hover-color: var(--text-color-default);
   --bs-table-hover-bg: var(--bg-color-elements);
   width: 100%;
   margin-bottom: 1rem;
   color: var(--text-color-default);
   vertical-align: top;
   border-color: #dee2e6;
   transition: all .3s;
   line-height: 16px;
}

.table > :not(:first-child) {
   border-top: 0px solid var(--border-color);
}

.table > :not(caption) > * > * {
   background-color: var(--bs-table-bg);
   box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.ks-table.table > :not(caption) > * > * {
   border-bottom-width: 0px;
   padding: 12px 12px;
}

.ks-table.table-striped > tbody > tr:nth-of-type(2n+1) {
   --bs-table-accent-bg: transparent;
   color: var(--text-color-default);
}

.ks-table.table-striped > tbody > tr td {
   background-color: var(--bg-color-default);
   transition: all .3s;
}

.ks-table.table-striped > tbody > tr td:first-child {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
}

.ks-table.table-striped > tbody > tr td:last-child {
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
}

/* .ks-table.table-striped > tbody > tr:nth-of-type(2n+1) td {
   --bs-table-accent-bg: var(--bg-color-elements);
   color: var(--text-color-default);
   transition: all .3s;
} */

.table-striped > tbody > tr:nth-of-type(odd) > * {
  /* --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color); */
  --bs-table-accent-bg: var(--bs-table-striped-bg);
  color: var(--bs-table-striped-color);
}

/* .ks-table.table-striped > tbody > tr.table-danger:nth-of-type(2n+1) td  {
   --bs-table-accent-bg: rgba(var(--color-danger),.2)!important;
   --bs-table-striped-bg: rgba(var(--color-danger),.2)!important;
   --bs-table-striped-color: var(--text-color-danger)!important;
   --bs-table-active-bg: rgba(var(--color-danger),.2)!important;
   --bs-table-active-color: var(--text-color-danger)!important;
   --bs-table-hover-bg: rgba(var(--color-danger),.2)!important;
   --bs-table-hover-color: var(--text-color-danger)!important;
   color: var(--text-color-danger)!important;
   border-color: #dfc2c4!important;
} */

.table-danger {
   --bs-table-accent-bg: rgba(var(--color-danger),.2);
   --bs-table-striped-bg: rgba(var(--color-danger),.2);
   --bs-table-striped-color: var(--text-color-danger);
   --bs-table-active-bg: rgba(var(--color-danger),.2);
   --bs-table-active-color: var(--text-color-danger);
   --bs-table-hover-bg: rgba(var(--color-danger),.2);
   --bs-table-hover-color: var(--text-color-danger);
   color: var(--text-color-danger);
   border-color: #dfc2c4;
}

.ks-table.ks-table-2-datas > tbody > tr td:first-child {
   text-align: left;
   font-weight: var(--font-bold);
}

.ks-table.ks-table-2-datas > tbody > tr td:last-child {
   text-align: right;
}

.ks-table-flex .data-row {
   background-color: var(--bg-color-default);
   border-radius: 4px;
   padding: 10px 10px;
   transition: background-color .3s;
}

.ks-table-flex .data-row p {
   margin-bottom: 0px;
}

.ks-table-flex .data-row p:first-child {
   font-weight: var(--font-bold);
}

.ks-table-flex .data-row:nth-of-type(2n+1) {
   background-color: var(--bg-color-elements);
}

.table .table-link {
   font-weight: var(--font-semibold);
   text-decoration: none;
}

.table .photo-item {
   width: 24px;
   height: 24px;
   border-radius: 3px;
   object-fit: cover;
}

.table .photo-item-default {
   width: 24px;
   height: 24px;
   border-radius: 3px;
   background-color: var(--bg-color-default);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-color-secondary);
}

.table .table-icon {
   font-size: 16px;
   color: var(--text-color-default);
   cursor: pointer;
}

/* ///// MODAL ///// */
.modal-title {
   font-weight: var(--font-bold);
   font-size: 18px;
}

.modal-content {
   border: 1px solid var(--border-color);
   border-radius: 0.3rem;
   background-color: var(--bg-color-default);
}

.modal-header {
   padding: 1rem 1.5rem 1rem 1.5rem;
   /* border-bottom: 1px solid var(--border-color); */
   border-bottom: 1px solid transparent;
}

.ks-btn-close {
   color: var(--text-color-default);
   border: none;
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 3px;
   padding: 5px 8px;
   transition: all .3s;
   font-size: 16px;
}

.ks-btn-close:hover {
   border: 1px solid var(--border-color);
}

.modal-body {
   padding: 0rem 1.5rem 1rem 1.5rem;
}

.modal-footer {
   padding: 1rem 1.5rem;
   border-top: 1px solid transparent;
}

/* ///// FORM ///// */
.form-control {
   font-size: 14px;
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
   border-radius: 3px;
   color: var(--text-color-default);
   font-weight: var(--font-regular);
   transition: all .3s;
}

.form-control:focus {
   color: var(--text-color-default);
   background-color: var(--bg-color-default);
   border-color: rgba(var(--color-primary-hover),1);
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.form-control::placeholder {
   color: var(--text-color-secondary);
}

.form-label {
   font-weight: var(--font-bold);
}

.form-select {
   font-size: 14px;
   color: var(--text-color-default);
   font-weight: var(--font-regular);
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   transition: all .3s;
}

.form-select:focus {
   border-color: rgba(var(--color-primary-hover),1);
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.form-control::file-selector-button {
   color: var(--text-color-default);
   background-color: var(--bg-default);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
   color: var(--text-color-default);
   background-color: var(--bg-color-elements);
}

.input-group-text i {
   font-size: 14px;
}

.input-group-text {
   color: var(--text-color-default);
   background-color: var(--bg-color-elements);
   border: 1px solid var(--border-color);
   transition: all .3s;
}

textarea {
   resize: none;
}

.form-text {
   color: var(--text-color-secondary);
}

/* ///// RADIO ///// */
.form-check-input {
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
   transition: all .3s;
}

.form-check,
.form-check input,
.form-check label {
   cursor: pointer;
}

.form-check-input:checked {
   background-color: var(--text-color-primary);
   border-color: var(--text-color-primary);
}

/* ///// BOTONES ///// */
.btn {
   font-size: 14px;
   font-weight: var(--font-semibold);
   transition: all .3s;
}

.btn-lg, .btn-group-lg > .btn {
  font-size: 16px;
}

.btn-sm, .btn-group-sm > .btn {
   font-size: .85rem;
   padding: 0.3rem 0.6rem;
}

.btn:disabled, .btn.disabled {
   opacity: .5;
}

.btn i {
   line-height: normal;
   font-size: 17px;
   vertical-align: -2px;
   /* margin-right: 4px; */
}

/* BTN PRIMARY */
.btn-primary {
   color: rgb(var(--color-white));
  /* background-color: rgba(var(--color-primary),1);
  border-color: rgba(var(--color-primary),1); */
}

.btn-primary:hover {
  color: rgb(var(--color-white));
  background-color: rgba(var(--color-primary-hover),1);
  border-color: rgba(var(--color-primary-hover),1);
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: rgb(var(--color-white));
  background-color: rgba(var(--color-primary-hover),1);
  border-color: rgba(var(--color-primary-hover),1);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgba(var(--color-primary-hover),1);
  border-color: rgba(var(--color-primary-hover),1);
}

.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.btn-primary:disabled, .btn-primary.disabled {
  color: rgb(var(--color-white));
  background-color: rgba(var(--color-primary),1);
  border-color: rgba(var(--color-primary),1);
}

.ks-card.ks-card-primary .btn-primary {
   /* background-color: rgba(255, 255, 255, 1); */

   background-color: rgba(171, 215, 255, .4);
   border-color: rgba(171, 215, 255, .5);
   box-shadow: 0px 12px 20px -10px rgba(var(--color-dark-primary),1);
}

.ks-card.ks-card-primary .btn-primary:hover {
   background-color: rgba(171, 215, 255, .3);
   border-color: rgba(171, 215, 255, .5);
}

/* BTN SECONDARY */
.btn-secondary {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-dark));
  border-color: rgb(var(--color-dark));
}

.btn-secondary:hover {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-medium-dark));
  border-color: rgb(var(--color-medium-dark));
}

.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-medium-dark));
  border-color: rgb(var(--color-medium-dark));
  box-shadow: 0 0 0 0.25rem rgba(var(--color-dark), 0.5);
}

.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-medium-dark));
  border-color: rgb(var(--color-medium-dark));
}

.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--color-dark), 0.5);
}

.btn-secondary:disabled, .btn-secondary.disabled {
  color: rgb(var(--color-white));
  background-color: rgb(var(--color-medium-dark));
  border-color: rgb(var(--color-medium-dark));
}

/* BTN OUTLINE SECONDARY */
.btn-outline-secondary {
   color: var(--text-color-default);
   background-color: var(--bg-color-default);
   border-color: var(--border-color);
}

.btn-outline-secondary:hover {
   background-color: rgba(var(--color-dark),1);
   border-color: rgba(var(--color-dark),1);
}

.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
   color: rgba(var(--color-white),1);
   background-color: rgba(var(--color-dark),1);
   border-color: rgba(var(--color-dark),1);
   box-shadow: 0 0 0 0.25rem rgba(var(--color-dark),.3);
}

.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
   color: rgba(var(--color-white),1);
   background-color: rgba(var(--color-dark),1);
   border-color: rgba(var(--color-dark),1);
}

.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
   box-shadow: 0 0 0 0.25rem rgba(var(--color-dark),.3);
}

.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
   color: var(--text-color-default);
   background-color: var(--bg-color-default);
   border-color: var(--border-color);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-primary));
   border-color: rgb(var(--color-primary));
}

.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
  background-color: var(--bg-color-default);
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-check:checked + .btn-outline-danger, .btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger:disabled, .btn-outline-danger.disabled {
  color: #dc3545;
  background-color: transparent;
}

.btn-link {
  font-weight: 400;
  color: var(--text-color-primary);
  text-decoration: underline;
}

.btn-link:hover {
  color: var(--text-color-primary);
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
}

/* ///// LINKS ///// */
.link-danger {
   color: rgb(var(--color-danger));
}

/* ///// DROPDOWNS ///// */
.dropdown-menu {
   font-size: 14px;
   color: var(--text-color-default);
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
}

.dropdown-item {
   padding: 0.5rem 1rem;
   font-size: 13px;
   color: var(--text-color-default);
   font-weight: var(--font-semibold);
}

.dropdown-item i {
   font-size: 16px;
   margin-right: 5px;
   vertical-align: -2px;
}

.dropdown-item:hover, .dropdown-item:focus {
   color: var(--text-color-default);
   background-color: var(--bg-color-elements);
}

.dropdown-toggle.no-caret::after {
   display: none;
}

.dropdown-divider {
   border-top: 1px solid var(--border-color);
   opacity: 1;
}

.btn.dropdown-toggle .caret {
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid rgb(var(--color-white));
   position: relative;
   top: calc(100% - 8px);
   margin-left: 7px;
}

/* ///// ACCORDION ///// */
.accordion-item {
   background-color: transparent;
   border: 1px solid var(--border-color);
   transition: all .3s;
}

.accordion-button {
   background-color: transparent;
   color: var(--text-color-default);
   /* border-bottom: 1px solid transparent; */
   transition: all .3s;
}

.accordion-button:not(.collapsed) {
   color: var(--text-color-default);
   background-color: var(--bg-color-elements);
   box-shadow: none;
   border-bottom: 1px solid var(--border-color);
}

.accordion-button:focus {
   border-color: var(--border-color);
   box-shadow: none;
}

/* ///// OFFCANVAS ///// */
.offcanvas {
   background-color: var(--bg-color-default);
   transition: all .3s;
}

.offcanvas-start,
.offcanvas-end,
.offcanvas-top,
.offcanvas-bottom {
  border: none;
}

.btn-close:focus {
   box-shadow: none;
}

.btn-close {
   color: var(--text-color-default);
   border: 1px solid transparent;
   opacity: 1;
   transition: all .3s;
}

.btn-close:hover {
   border-color: var(--border-color);
   opacity: 1;
}

.offcanvas-header {
   padding: 25px 25px 0px 25px;
}

.offcanvas-header h5 {
   font-weight: var(--font-extrabold);
   /* font-size: 18px; */
}

.offcanvas-body {
   padding: 25px;
}

.offcanvas-footer {
   padding: 25px;
}

/* ///// KS-BREADCRUMBS ///// */
.ks-breadcrumb a {
   color: var(--text-color-primary);
   text-decoration: none;
}
/* ///// ICONS ///// */
i.bi {
   transition: all .3s;
}
/* ///// FONT STYLES ///// */
.regular {
   font-weight: var(--font-regular);
}

/* .medium {
   font-weight: var(--font-medium);
} */

.semibold {
   font-weight: var(--font-semibold);
}

.bold {
   font-weight: var(--font-bold);
}

.extrabold {
   font-weight: var(--font-extrabold);
}

/* ///// COLORS ///// */
.text-color-default {
   color: var(--text-color-default);
}

.text-color-secondary {
   color: var(--text-color-secondary);
}

.color-white {
   color: rgb(var(--color-white));
}

.text-color-primary {
   color: var(--text-color-primary);
}

.color-primary {
   color: rgb(var(--color-primary));
}

.color-light-primary {
   color: rgb(var(--color-light-primary));
}

.color-dark {
   color: rgb(var(--color-dark));
}

.color-success {
   color: rgb(var(--color-success));
}

.color-danger {
   color: rgb(var(--color-danger));
}

.color-warning {
   color: rgb(var(--color-warning));
}

.color-info {
   color: rgb(var(--color-info));
}

.bg-color-primary {
   background-color: rgb(var(--color-primary))!important;
}

.bg-color-dark-primary {
   background-color: rgb(var(--color-dark-primary));
}

.bg-color-white {
   background-color: rgb(var(--color-white));
}

.bg-color-elements {
   background-color: var(--bg-color-elements);
}

.bg-color-default {
   background-color: var(--bg-color-default);
}

.bg-color-success {
   background-color: rgb(var(--color-success));
}

.bg-color-warning {
   background-color: rgb(var(--color-warning));
}

.bg-color-danger {
   background-color: rgb(var(--color-danger));
}

.bg-color-dark {
   background-color: rgb(var(--color-dark));
}

.icon-color {
   color: var(--icon-color);
}

/* ///// OPACITY ///// */
.opacity-10 {
   opacity: .1;
}

.opacity-20 {
   opacity: .2;
}

.opacity-30 {
   opacity: .3;
}

.opacity-40 {
   opacity: .4;
}

.opacity-50 {
   opacity: .5;
}

.opacity-60 {
   opacity: .6;
}

.opacity-70 {
   opacity: .7;
}

.opacity-80 {
   opacity: .8;
}

.opacity-90 {
   opacity: .9;
}

.opacity-100 {
   opacity: 1;
}

/* ///// TEXT SIZES ///// */
.text-justify {
   text-align: justify;
}

.text-10px {
   font-size: 10px;
}

.text-11px {
   font-size: 11px;
}

.text-12px {
   font-size: 12px;
}

.text-13px {
   font-size: 13px;
}

.text-14px {
   font-size: 14px;
}

.text-16px {
   font-size: 16px;
}

.text-18px {
   font-size: 18px;
}

.text-20px {
   font-size: 20px;
}

.text-22px {
   font-size: 22px;
}

.text-24px {
   font-size: 24px;
}

.text-28px {
   font-size: 28px;
}

.text-32px {
   font-size: 32px;
}

.text-36px {
   font-size: 36px;
}

.text-40px {
   font-size: 40px;
}

.text-50px {
   font-size: 50px;
}

.text-60px {
   font-size: 60px;
}

.text-70px {
   font-size: 70px;
}

.text-80px {
   font-size: 80px;
}

@media (min-width: 576px) {
   /* sm */
   .text-sm-10px {
      font-size: 10px;
   }

   .text-sm-11px {
      font-size: 11px;
   }

   .text-sm-12px {
      font-size: 12px;
   }

   .text-sm-13px {
      font-size: 13px;
   }

   .text-sm-14px {
      font-size: 14px;
   }

   .text-sm-16px {
      font-size: 16px;
   }

   .text-sm-18px {
      font-size: 18px;
   }

   .text-sm-20px {
      font-size: 20px;
   }

   .text-sm-22px {
      font-size: 22px;
   }

   .text-sm-24px {
      font-size: 24px;
   }

   .text-sm-28px {
      font-size: 28px;
   }

   .text-sm-32px {
      font-size: 32px;
   }

   .text-sm-36px {
      font-size: 36px;
   }
}

@media (min-width: 768px) {
   /* md */
   .text-md-10px {
      font-size: 10px;
   }

   .text-md-11px {
      font-size: 11px;
   }

   .text-md-12px {
      font-size: 12px;
   }

   .text-md-13px {
      font-size: 13px;
   }

   .text-md-14px {
      font-size: 14px;
   }

   .text-md-16px {
      font-size: 16px;
   }

   .text-md-18px {
      font-size: 18px;
   }

   .text-md-20px {
      font-size: 20px;
   }

   .text-md-22px {
      font-size: 22px;
   }

   .text-md-24px {
      font-size: 24px;
   }

   .text-md-28px {
      font-size: 28px;
   }

   .text-md-32px {
      font-size: 32px;
   }

   .text-md-36px {
      font-size: 36px;
   }
}

@media (min-width: 992px) {
   /* lg */
   .text-lg-10px {
      font-size: 10px;
   }

   .text-lg-11px {
      font-size: 11px;
   }

   .text-lg-12px {
      font-size: 12px;
   }

   .text-lg-13px {
      font-size: 13px;
   }

   .text-lg-14px {
      font-size: 14px;
   }

   .text-lg-16px {
      font-size: 16px;
   }

   .text-lg-18px {
      font-size: 18px;
   }

   .text-lg-20px {
      font-size: 20px;
   }

   .text-lg-22px {
      font-size: 22px;
   }

   .text-lg-24px {
      font-size: 24px;
   }

   .text-lg-28px {
      font-size: 28px;
   }

   .text-lg-32px {
      font-size: 32px;
   }

   .text-lg-36px {
      font-size: 36px;
   }
}

@media (min-width: 1200px) {
   /* xl */
   .text-xl-10px {
      font-size: 10px;
   }

   .text-xl-11px {
      font-size: 11px;
   }

   .text-xl-12px {
      font-size: 12px;
   }

   .text-xl-13px {
      font-size: 13px;
   }

   .text-xl-14px {
      font-size: 14px;
   }

   .text-xl-16px {
      font-size: 16px;
   }

   .text-xl-18px {
      font-size: 18px;
   }

   .text-xl-20px {
      font-size: 20px;
   }

   .text-xl-22px {
      font-size: 22px;
   }

   .text-xl-24px {
      font-size: 24px;
   }

   .text-xl-28px {
      font-size: 28px;
   }

   .text-xl-32px {
      font-size: 32px;
   }

   .text-xl-36px {
      font-size: 36px;
   }
}

@media (min-width: 1400px) {
   /* xxl */
   .text-xxl-10px {
      font-size: 10px;
   }

   .text-xxl-11px {
      font-size: 11px;
   }

   .text-xxl-12px {
      font-size: 12px;
   }

   .text-xxl-13px {
      font-size: 13px;
   }

   .text-xxl-14px {
      font-size: 14px;
   }

   .text-xxl-16px {
      font-size: 16px;
   }

   .text-xxl-18px {
      font-size: 18px;
   }

   .text-xxl-20px {
      font-size: 20px;
   }

   .text-xxl-22px {
      font-size: 22px;
   }

   .text-xxl-24px {
      font-size: 24px;
   }

   .text-xxl-28px {
      font-size: 28px;
   }

   .text-xxl-32px {
      font-size: 32px;
   }

   .text-xxl-36px {
      font-size: 36px;
   }
}

/* ///// SWEET ALERT///// */
.swal-overlay {
   background-color: rgba(0,0,0,.6);
}

.swal-modal {
   background-color: var(--bg-color-default);
}

.swal-icon--error {
   color: rgb(var(--color-danger));
}

.swal2-title {
   color: var(--text-color-default);
   text-align: center;
}

.swal-text {
   color: var(--text-color-default);
   text-align: center;
}

.swal-footer {
   text-align: center;
}

.swal-button--confirm {
   background-color: rgb(var(--color-primary));
   color: rgb(var(--color-white));
}

.swal-button--confirm:focus {
   box-shadow: 0 0 0 0.25rem rgba(var(--color-primary),.3);
}

.swal-button:active, .swal-button:hover {
   background-color: rgb(var(--color-primary-hover));
}

/* ///// UTILITIES ///// */
.uppercase-to-capitalize {
   text-transform: capitalize;
}

.text-truncate-multiline {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.text-truncate-multiline.lines-1 {
   -webkit-line-clamp: 1;
}

.text-truncate-multiline.lines-2 {
   -webkit-line-clamp: 2;
}

.text-truncate-multiline.lines-3 {
   -webkit-line-clamp: 3;
}

.cursor-pointer {
   cursor: pointer;
}

.hidden {
   display: none
}

.badge {
   transition: all .3s;
}

/* ///// ALERT ///// */
.alert-danger {
   color: var(--text-color-danger);
   background-color: rgba(var(--color-danger),.3);
   border-color: rgba(var(--color-danger),.5);
}

/* .alert-warning i {
   color: rgb(var(--color-warning));
} */

/* ///// MODAL ///// */
.ks-carousel .carousel-control-prev,
.ks-carousel .carousel-control-next {
   position: absolute;
   /* top: 0; */
   bottom: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   /* width: 15%; */
   padding: 0;
   text-align: center;
   background: none;
   /* border: 0; */
   opacity: 1;
   transition: opacity 0.3s ease;
   width: 40px;
   height: 40px;
   margin-top: -20px;
   top: 50%;
   border-radius: 50%;
   background-color: var(--bg-color-default);
   border: 1px solid var(--border-color);
}

.ks-carousel .carousel-control-prev:hover,
.ks-carousel .carousel-control-next:hover {
   opacity: 1;
}

.ks-carousel .carousel-control-next {
   margin-right: 20px;
}

.ks-carousel .carousel-control-prev {
   margin-left: 20px;
}

[data-theme='light'] .ks-carousel .carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme='dark'] .ks-carousel .carousel-control-next-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-theme='light'] .ks-carousel .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

[data-theme='dark'] .ks-carousel .carousel-control-prev-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.ks-carousel .carousel-control-prev-icon,
.ks-carousel .carousel-control-next-icon {
   width: 1.2rem;
   height: 1.2rem;
}

.ks-carousel .carousel-control-prev-icon {
   margin-right: 3px;
}

.ks-carousel .carousel-control-next-icon {
   margin-left: 3px;
}

.ks-carousel .carousel-indicators {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 2;
   display: flex;
   justify-content: center;
   padding: 0;
   margin-right: 15%;
   margin-bottom: -2.5rem;
   margin-left: 15%;
   list-style: none;
}

.ks-carousel .carousel-indicators [data-bs-target] {
   box-sizing: content-box;
   flex: 0 1 auto;
   width: 8px;
   height: 8px;
   padding: 0;
   margin-right: 5px;
   margin-left: 5px;
   text-indent: -999px;
   cursor: pointer;
   background-color: var(--text-color-default);
   background-clip: padding-box;
   border: 0;
      border-top-color: currentcolor;
      border-top-style: none;
      border-top-width: 0px;
      border-bottom-color: currentcolor;
      border-bottom-style: none;
      border-bottom-width: 0px;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   opacity: .3;
   transition: opacity 0.6s ease;
   border-radius: 50%;
}

.ks-carousel .carousel-indicators .active {
   /* background-color: var(--text-color-primary); */
   opacity: 1;
}

.page-item.disabled .page-link {
   color: var(--text-color-secondary);
   pointer-events: none;
   background-color: var(--bg-color-elements);
   border-color: var(--border-color);
}

.page-link {
   position: relative;
   display: block;
   color: var(--text-color-default);
   text-decoration: none;
   background-color: transparent;
   border: 1px solid var(--border-color);
   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;
}

.page-link:hover {
   z-index: 2;
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-dark));
   border-color: rgb(var(--color-dark));
}

.page-item.active .page-link {
   z-index: 3;
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-primary));
   border-color: rgb(var(--color-primary));
}

.page-link:focus {
   z-index: 3;
   color: rgb(var(--color-white));
   background-color: rgb(var(--color-dark));
   border-color: rgb(var(--color-dark));
   outline: 0;
   box-shadow: 0 0 0 0.25rem rgba(var(--color-dark), 0.3);
}

.select2-selection__rendered {
   line-height: 31px !important;
}
.select2-container .select2-selection--single {
   height: 35px !important;
}
.select2-selection__arrow {
   height: 34px !important;
}


/* BTN PRIMARY */
.swal2-confirm {
   color: rgb(var(--color-white)) !important;
  background-color: rgba(var(--color-primary),1) !important;
  border-color: rgba(var(--color-primary),1) !important;
}

.swal2-confirm:hover {
  color: rgb(var(--color-white)) !important;
  background-color: rgba(var(--color-primary-hover),1) !important;
  border-color: rgba(var(--color-primary-hover),1) !important;
}