@charset "UTF-8";
@import "/webjars/design/bootstrap-main.min.css";
@import "/webjars/design/bootstrap.custom.min.css";
@import "/webjars/widgets/common-isyc-react-design.min.css";
@import "/webjars/oncustomer/common-isyc-react-design.min.css";
@import "/webjars/design/badges.min.css";
@import "/webjars/design/border.min.css";
@import "/webjars/design/buttons.min.css";
@import "/webjars/design/colors.min.css";
@import "/webjars/design/cursor.min.css";
@import "/webjars/design/fonts.min.css";
@import "/webjars/design/fonts-file.min.css";
@import "/webjars/design/footer.min.css";
@import "/webjars/design/headings.min.css";
@import "/webjars/design/icons.min.css";
@import "/webjars/design/opacity.min.css";
@import "/webjars/design/components/avatar.min.css";
@import "/webjars/design/components/indicator.min.css";
@import "/webjars/design/components/schedule.min.css";
@import "/webjars/design/components/status.min.css";
@import "/webjars/design/components/stepper.min.css";
@import "/webjars/design/components/progress-bar-indeterminate.min.css";
@import "/webjars/design/components/progress-circular-indeterminate.min.css";
@import "/webjars/design/components/loader-bright.min.css";
@import "/webjars/design/components/loader-doc.min.css";
@import "/webjars/design/components/loader-dotted.min.css";
@import "/webjars/design/components/loader-neural.min.css";
@import "/webjars/design/components/loader-pulse.min.css";
@import "/webjars/design/components/loader-rings.min.css";
@import "/webjars/design/components/loader-spin.min.css";
@import "/webjars/design/components/loader-spinner-bars.min.css";
@import "/webjars/design/components/loader-square.min.css";
@import "/webjars/design/components/loader-thin.min.css";
@import "/webjars/design/components/loader-worm.min.css";
@import "/webjars/selectize.js/0.15.2/css/selectize.bootstrap5.css";
@import "/webjars/free-jqgrid/dist/css/ui.jqgrid.min.css";
@import "../css/fonts/font-awesome.css"; /* for older js components */
@import "../css/fonts/materialdesignicons.css";
@import "../css/core-icon.css";
@import "../css/extra-icon.css";
@import "../css/overlayScrollbars/OverlayScrollbars.min.css";
@import "../css/fullCalendar/fullcalendar.css";
@import "../css/lobipanel/lobipanel.css";
@import "../css/datatables/datatables.min.css";
/* Autocomplete */
.autocomplete-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  margin-top: 5px;
  z-index: 150;
  top: 100%;
  left: -10px;
  right: -10px;
  background-color: #fff;
  overflow: auto;
  font-size: 1rem;
  font-weight: 400;
}

.autocomplete-item {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
}

.autocomplete-item:hover {
  background-color: #f7f7f7;
}

.autocomplete-active {
  background-color: #eee;
}

.autocomplete-no-results {
  padding: 10px;
  background-color: #fff;
}

.autocomplete-loader-container {
  position: absolute;
  right: 10px;
}

.autocomplete-loader-size {
  width: 20px;
  height: 20px;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.slug-animation > *:not(.spinner-border):not(button):not(.form-floating) {
  opacity: 0;
  animation: slug 0.5s forwards;
}

@keyframes slug {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
#backtotop-container {
  position: relative;
}

#backtotop {
  right: 0px;
  position: fixed;
  width: 50px;
  z-index: 6666;
  display: none; /* Show using Javascript */
  height: 80px;
}

#backtotop.fixed-bottom {
  height: 100px;
  z-index: 666;
  right: 0;
  left: auto !important;
}

#backtotop.chat {
  bottom: 60px;
  left: 17px;
}

#backtotop a.top,
#backtotop a.bottom {
  background-color: var(--primary-color);
  color: #fff;
  display: none;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease 0s;
  /*! font-size: 1.1em; */
  opacity: 0.5;
  /*! max-width: 40px; */
  border-radius: 20px;
  /*! height: 40px; */
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px !important;
}

#backtotop a.bottom.disabled,
#backtotop a.bottom.disabled:hover {
  opacity: 0.25;
  cursor: default;
  transition: none;
  background-color: var(--primary-color);
}

#backtotop a.top:hover {
  background-color: rgba(var(--primary-color-rgb), 0.75);
  color: #fff;
  opacity: 1;
}

#backtotop a.top .mdi:before,
#backtotop a.bottom .mdi:before,
#backtotop a.top .iconify--mdi:before,
#backtotop a.bottom .iconify--mdi:before {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}

#backtotop a.bottom {
  position: absolute;
  top: 50px;
  left: 0;
}

#backtotop a.bottom:hover {
  background-color: rgba(var(--primary-color-rgb), 0.75);
  color: #fff;
  opacity: 1;
}

body.popup #backtotop {
  display: none;
}

body.popup #backtotop a.top,
body.popup #backtotop a.bottom {
  padding: 4px 6px;
  font-size: 10px;
}

body.popup #backtotop a.bottom {
  top: 25px;
}

body.modal-open #backtotop {
  display: none !important;
}

.body.widget #backtotop {
  display: none;
}

html {
  height: 100%; /* Sticky footer ie11 compatible */
}

body {
  display: flex; /* Sticky footer ie11 compatible */
  min-height: 100vh; /* Sticky footer ie11 compatible */
  height: 100%; /* Sticky footer ie11 compatible */
  flex-direction: column; /* Sticky footer ie11 compatible */
}

.object_type_1123 #modeler,
.object_type_1258 #modeler {
  width: 100% !important;
  height: 870px !important;
}

.object_type_1123 #canvas,
.object_type_1258 #canvas {
  width: 100% !important;
  height: 870px !important;
}

.object_type_1130 #canvas {
  width: 100% !important;
  height: 600px !important;
  float: left;
}

.object_type_1123 tr td:last-child .mdi-check-circle,
.object_type_1123 tr td:last-child .mdi-close-circle,
.object_type_1258 tr td:last-child .mdi-close-circle,
.object_type_1258 tr td:last-child .mdi-close-circle {
  cursor: pointer;
}

.object_type_1123 .bpmZoomPosition,
.object_type_1130 .bpmZoomPosition,
.object_type_1258 .bpmZoomPosition {
  position: absolute;
  top: 20px;
  right: 25px;
  background: #FAFAFA;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  padding: 2px 8px;
  border: solid 1px #CCC;
}

.object_type_1123 .bpmZoomPosition .mdi,
.object_type_1130 .bpmZoomPosition .mdi,
.object_type_1258 .bpmZoomPosition .mdi,
.object_type_1123 .bpmZoomPosition .iconify--mdi,
.object_type_1130 .bpmZoomPosition .iconify--mdi,
.object_type_1258 .bpmZoomPosition .iconify--mdi {
  font-size: 25px;
  margin-right: 10px;
}

.status0 {
  background-color: #efefef;
  color: #6a6a6a;
  border: 1px solid #cbcbcb;
  padding: 3px 10px 3px 0 !important;
  margin: 0 20px 0 0;
}

.status0:before {
  font: 17px "Material Design Icons";
  content: "\f02d7";
  float: left;
  margin: 2px 5px 0 10px;
}

.status1 {
  background-color: #e0f2cb;
  color: #4b6d21;
  border: 1px solid #ccebac;
  padding: 3px 10px 3px 0 !important;
  margin: 0 20px 0 0;
}

.status1:before {
  font: 17px "Material Design Icons";
  content: "\f0133";
  float: left;
  margin: 2px 5px 0 10px;
}

.status2 {
  background-color: #fdd3c7;
  color: #a22525;
  border: 1px solid #efb6a7;
  padding: 3px 10px 3px 0 !important;
  margin: 0 20px 0 0;
}

.status2:before {
  font: 17px "Material Design Icons";
  content: "\f0028";
  float: left;
  margin: 2px 5px 0 10px;
}

.status3 {
  background-color: #fffccc;
  color: #4d4b42;
  border: 1px solid #f8e3ac;
  padding: 3px 10px 3px 0 !important;
  margin: 0 20px 0 0;
}

.status3:before {
  font: 17px "Material Design Icons";
  content: "\f0376";
  float: left;
  margin: 2px 5px 0 10px;
}

.data_validation.status0 {
  background-color: #d0eefc;
  color: #17485e;
  border: 1px solid #a3cbdc;
  padding: 3px 10px 3px 0 !important;
  margin: 0 20px 0 0;
}

.data_validation.status0:before {
  font: 17px "Material Design Icons";
  content: "\f02d7";
  float: left;
  margin: 2px 5px 0 10px;
}

.data_validation.status1 {
  background-color: #e0f2cb;
  color: #4b6d21;
  border: 1px solid #ccebac;
  padding: 3px 0 3px 0 !important;
  margin: 0 20px 0 0;
}

.data_validation.status1:before {
  font: 17px "Material Design Icons";
  content: "\f0133";
  float: left;
  margin: 2px 5px 0 10px;
}

.data_validation.status2 {
  background-color: #fdd3c7;
  color: #a22525;
  border: 1px solid #efb6a7;
  padding: 3px 0 3px 0 !important;
  margin: 0 20px 0 0;
}

.data_validation.status2:before {
  font: 17px "Material Design Icons";
  content: "\f0028";
  float: left;
  margin: 2px 5px 0 10px;
}

.data_validation.status3 {
  background-color: #efefef;
  color: #6a6a6a;
  border: 1px solid #cbcbcb;
  padding: 3px 0 3px 0 !important;
  margin: 0 20px 0 0;
}

.data_validation.status3:before {
  font: 17px "Material Design Icons";
  content: "\f0376";
  float: left;
  margin: 2px 5px 0 10px;
}

.status0,
.status1,
.status2,
.status3 {
  margin: 0px 10px 10px 0 !important;
  width: 107px;
}

.status0.hover:hover {
  background: #e2e2e2;
}

.status1.hover:hover {
  background: #ccdeb6;
}

.status2.hover:hover {
  background: #eebeb0;
}

.status3.hover:hover {
  background: #efecc4;
}

.data_validation.status0.hover:hover {
  background: #c0e3f3;
}

.data_validation.status1.hover:hover {
  background: #ccdeb6;
}

.data_validation.status2.hover:hover {
  background: #eebeb0;
}

.data_validation.status3.hover:hover {
  background: #e2e2e2;
}

.divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1rem;
  white-space: nowrap;
}

.divider:before,
.divider:after {
  height: 0.125rem;
  width: 100%;
  flex-grow: 1;
  content: "";
  background-color: rgba(69, 69, 69, 0.1);
}

.divider-start:before {
  display: none;
}

.divider-end:after {
  display: none;
}

.divider-horizontal {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  height: auto;
  width: 1rem;
}

.divider-vertical {
  margin-left: 0;
  margin-right: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1rem;
  width: auto;
}

.divider-horizontal {
  flex-direction: column;
}

.divider-horizontal:before {
  height: 100%;
  width: 0.125rem;
}

.divider-horizontal:after {
  height: 100%;
  width: 0.125rem;
}

.divider-vertical {
  flex-direction: row;
}

.divider-vertical:before {
  height: 0.125rem;
  width: 100%;
}

.divider-vertical:after {
  height: 0.125rem;
  width: 100%;
}

.divider:not(:empty) {
  gap: 1rem;
}

.divider-primary:before,
.divider-primary:after {
  background-color: var(--primary-color);
}

.divider-secondary:before,
.divider-secondary:after {
  background-color: var(--secondary-color);
}

.divider-success:before,
.divider-success:after {
  background-color: #10b981;
}

.divider-danger:before,
.divider-danger:after {
  background-color: #ef4444;
}

.divider-warning:before,
.divider-warning:after {
  background-color: #f59e0b;
}

.divider-info:before,
.divider-info:after {
  background-color: #4f73c2;
}

div.error-crm h3 {
  font-size: 2rem;
  text-align: center;
  color: var(--primary-color);
}

div.error-crm p {
  font-size: 1rem;
  text-align: center;
  color: var(--primary-color);
  margin: 0 auto;
}

div.error-crm.desc {
  box-shadow: none;
  height: auto;
  border: 0;
  margin: 30px auto;
  background: none;
}

div.error-crm.desc p {
  color: #666;
  font-size: 1rem;
  width: 100%;
}

div.error-crm.desc p.code {
  font-size: 1rem;
  font-weight: bold;
}

/* Error outside CRM */
/* Example: http://localhost:8080/s/asda */
body.full-error {
  background: #fff;
  align-items: center;
  padding: 2.5rem;
}

body.full-error .error-container {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  div.error-crm {
    display: block;
    width: 580px;
    height: 580px;
    margin: 1em auto;
    border-radius: 99em;
    border: 7px solid #fff;
    box-shadow: 11px 10px 11px rgba(0, 0, 0, 0.15);
    position: relative;
    background: url("../../images/error/error_sdw.png") 100% 100% no-repeat, linear-gradient(var(--primary-color), var(--primary-color-darker));
    box-sizing: content-box;
  }
  div.error-crm p {
    font-size: 1rem;
    text-align: center;
    color: #fff;
    width: 390px;
    margin: 0 auto;
  }
  div.error-crm h3 {
    font-size: 2rem;
    text-align: center;
    color: #fff !important;
    margin: 400px auto 0;
    width: 390px;
  }
  div.error-crm.evillapti:before,
  div.error-crm.ko:before,
  div.error-crm.lovelapti:before,
  div.error-crm.ohno:before,
  div.error-crm.sad:before,
  div.error-crm.verysad:before,
  div.error-crm.what:before,
  div.error-crm.oh:before,
  div.error-crm.happy:before,
  div.error-crm.default:before {
    content: "";
    position: absolute;
    width: 580px;
    height: 580px;
  }
  div.error-crm.evillapti:before {
    background: url("../../images/error/error_evillapti.png") center 37% no-repeat;
  }
  div.error-crm.ko:before {
    background: url("../../images/error/error_ko.png") center 37% no-repeat;
  }
  div.error-crm.lovelapti:before {
    background: url("../../images/error/error_lovelapti.png") center 37% no-repeat;
  }
  div.error-crm.ohno:before {
    background: url("../../images/error/error_ohno.png") center 37% no-repeat;
  }
  div.error-crm.sad:before {
    background: url("../../images/error/error_sad.png") center 37% no-repeat;
  }
  div.error-crm.verysad:before {
    background: url("../../images/error/error_verysad.png") center 37% no-repeat;
  }
  div.error-crm.what:before {
    background: url("../../images/error/error_what.png") center 37% no-repeat;
  }
  div.error-crm.oh:before {
    background: url("../../images/error/error_oh.png") center 37% no-repeat;
  }
  div.error-crm.happy:before {
    background: url("../../images/error/error_happy.png") center 37% no-repeat;
  }
  div.error-crm.default:before {
    background: url("../../images/error/error_default.png") center 37% no-repeat;
  }
  body.full-error {
    padding: 0;
  }
}
/* Overwritting default css components */
/*-------------------------------------*/
/* Send files template */
/*
#fileListPanel .drop-zone-file-container {
    box-shadow: none !important;
    border: 1px dashed #ccc !important;
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;

    .row {    
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .col-auto {
        line-height: 3rem !important;
        margin-bottom: 1rem !important;
    }

    .mdi-cloud-upload-outline {
        font-size: 50px !important;
    }
}
*/
header .container-fluid {
  min-height: 80px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  background: var(--header-color) !important;
  border-bottom: var(--header-separator);
}
header a:not(a.dropdown-item) {
  color: var(--header-contrast-text);
}
header a:hover:not(a.dropdown-item) {
  text-decoration: underline;
}
header #logo {
  max-height: 80px;
  position: relative;
}
header #logo img {
  margin: auto;
}
header #showMainMenuElement #showMainMenuElement_icon {
  font-size: 1.75rem;
  color: var(--header-ico-menu-color);
}
header #showMainMenuElement #showMainMenuElement_icon:hover {
  font-size: 1.75rem;
  color: var(--header-ico-menu-color-hover);
}
header #info {
  margin: 5px 0 0 0;
  position: relative;
}
header #info .mdi,
header #info .iconify--mdi {
  color: var(--header-ico-color);
}
header #info .mdi:hover,
header #info .iconify--mdi:hover {
  color: var(--header-ico-color-hover);
}
header #info .vr {
  color: var(--header-contrast-text);
}
header #info .menu .mdi,
header #info .menu .iconify--mdi {
  font-size: 1rem;
}
header #info ul {
  padding-left: 0;
}
header #info ul li {
  list-style-type: none;
}
header #info .right #ico-user img {
  height: 36px;
  width: 36px;
  line-height: 36px;
  border-radius: 50%;
}
header #info .right ul {
  list-style: none;
}

/* Header object */
body.main #header_object .ui-multiselect {
  padding: 2px 0 1px 0;
  text-indent: 5px;
  height: 25px;
  margin: 14px 0 0 -5px !important;
}
body.main #header_object {
  border: 1px solid #d9d8d8;
  width: 100% !important;
  padding: 0;
  height: 41px;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 10px !important;
  padding-left: 4px;
  padding-right: 4px;
}
body.main #header_object {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--primary-color-rgb), 0.15) !important;
  z-index: 1;
  background: #fff; /* Add !important avoids being able to be overwritten */
}

body.fixed #header_object {
  position: sticky;
  top: 0;
  z-index: 10; /* locator icon above header */
}

#header_object {
  background: var(--header-object-color);
  padding: 10px 20px 10px 25px;
  display: flex;
  width: 100%;
  align-items: center;
  box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.15);
}
#header_object p {
  color: var(--header-object-contrast-text);
  margin: 0 15px 0 0;
  padding: 15px 0 0 5px;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: auto;
  overflow: hidden;
}
#header_object p strong {
  margin: 0 5px 0 0;
}
#header_object h2 {
  margin: 0 0 0 15px;
  font-size: 1.25rem;
  display: flex;
}
#header_object h2 div {
  text-overflow: ellipsis;
  width: auto;
  overflow: hidden;
}
#header_object .ico .round {
  background-color: var(--primary-color);
}
#header_object .info {
  flex: 1;
  min-width: 0;
}
#header_object .name {
  width: 100%;
  margin: 2px 0 0 15px;
  color: var(--header-object-contrast-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  width: auto;
  overflow: hidden;
}
#header_object .object {
  width: 100%;
  white-space: nowrap;
}
#header_object .object h2 {
  color: var(--header-object-contrast-text);
}
#header_object .icons .mdi,
#header_object .icons .iconify--mdi {
  color: var(--header-object-ico-color) !important;
}
#header_object .icons .mdi:hover,
#header_object .icons .iconify--mdi:hover {
  color: var(--header-object-ico-color-hover) !important;
}
#header_object .icons ul {
  float: right;
}
#header_object .icons ul:not(:last-child) {
  border-left: 1px solid rgba(var(--primary-color-rgb), 0.5);
  content: "";
  padding: 0 1rem;
  margin-left: 0.5rem;
  position: relative;
  top: 10px;
  line-height: 15px;
}
#header_object .icons ul:not(:last-child) li {
  padding-left: 10px;
}
#header_object .icons ul li {
  list-style: none;
  display: inline-block;
}
#header_object .icons ul li:not(:last-child) {
  margin-right: 0.5rem;
}
#header_object .icons ul li > a,
#header_object .icons ul li > button {
  display: inline-block;
}
#header_object .icons ul li button#showMoreIcons {
  box-shadow: none;
}
#header_object .icons .mdi,
#header_object .icons .iconify--mdi {
  font-size: 25px;
  color: #8c8c8c;
  margin: 0 5px;
}
#header_object .icons .disabled .mdi:before,
#header_object .icons .disabled .mdi:hover:before,
#header_object .icons .disabled .iconify--mdi:before,
#header_object .icons .disabled .iconify--mdi:hover:before {
  opacity: 0.4;
  color: var(--header-object-ico-color);
}
#header_object .icons li:last-child .mdi,
#header_object .icons li:last-child .iconify--mdi {
  padding: 0;
  margin: 0;
}
#header_object .icons .mdi:hover,
#header_object .icons .iconify--mdi:hover {
  color: #e2e2e2;
}
#header_object .icons li .mdi,
#header_object .icons li .iconify--mdi {
  padding: 0;
}
#header_object .icons li:first-child .mdi,
#header_object .icons li:first-child .iconify--mdi {
  border-left: 0;
}
#header_object .icons button:focus {
  box-shadow: none;
}
#header_object #content form .icons a {
  outline: 0;
}
#header_object .control-menu .mdi,
#header_object .control-menu .iconify--mdi {
  color: #7490b8;
}
#header_object .control-menu .mdi:hover,
#header_object .control-menu .iconify--mdi:hover {
  color: #eee;
}
#header_object .control-menu .mdi.disabled,
#header_object .control-menu .mdi.disabled:hover,
#header_object .control-menu .iconify--mdi.disabled,
#header_object .control-menu .iconify--mdi.disabled:hover {
  opacity: 0.5 !important;
  color: #fff !important;
  cursor: default;
}

/*

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

header .dropdown-menu {
  animation-name: slideIn;
  animation-duration: 0.3s;
  animation-fill-mode: both;
}
*/
main .user1,
main .user2 {
  margin: 0 0 1rem;
  display: table;
}

main .user1 {
  width: 80%;
  float: right;
  background: #f5f5f5;
}

main .user2 {
  width: 100%;
  float: left;
  background: #eaf7ff;
  float: left;
}

main .user1 .left,
main .user2 .left {
  width: 300px;
  background-color: rgba(0, 0, 0, 0.03);
  display: table-cell;
  vertical-align: top;
  padding: 10px;
}

main .user1 .left p,
main .user2 .left p {
  margin: 0;
  padding: 0;
}

main .user1 .desc,
main .user2 .desc {
  margin: 10px;
  float: left;
  width: calc(100% - 160px);
  display: table-cell;
}

main .user1 .desc p,
main .user2 .desc p {
  margin: 0;
}

main .user1 textarea,
main .user2 textarea {
  background: transparent;
  border: 0;
  resize: none;
}

.object_type_5 .new_interaction .tree label {
  width: 175px;
}

.object_type_5 #sub_interaction_list .user1,
.object_type_5 #sub_interaction_list .user2 {
  background: #fff;
}

.object_type_5 #sub_interaction_list .user1,
.object_type_5 #sub_interaction_list .user2 {
  margin: 0;
}

.object_type_5 #sub_interaction_list .user2 {
  width: 80%;
}

.object_type_5 #sub_interaction_list .user2 .tit {
  background: #ecf6fb;
}

.object_type_5 #sub_interaction_list .block .tit:nth-child(2) .message {
  text-decoration: underline;
  font-size: 13px;
  font-weight: bold;
}

.object_type_5 .header_email p span.mini {
  font-style: normal !important;
  position: absolute;
  right: 20px;
}

body.main,
body.detail,
body.locator {
  background-image: var(--bg-img-source) !important;
  background-repeat: var(--bg-img-repeat) !important;
  background-position: var(--bg-img-position) !important;
  background-attachment: var(--bg-img-attachment) !important;
  background-size: var(--bg-img-size) !important;
  overflow-x: hidden !important;
}

#content #flex_container,
#content {
  background-color: transparent;
}

main {
  flex: 1 0 auto;
}

main [class^=container] {
  margin: 0 auto;
  padding: 0;
  color: #000;
  min-height: 100%; /* Portal bug height? */
  height: 100%; /* Portal bug height? */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  cursor: pointer;
  animation: fadeIn 0.2s forwards;
}

.overlay.fadeOut {
  animation: fadeOut 0.2s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
body.locator main > [class^=container] > form#detailForm,
body.detail #content > form#detailForm {
  height: auto;
}

body.locator #main.container {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

body.locator #content #main {
  margin: 0;
  padding: 25px;
  border-radius: 0.5rem;
}

body.locator #content #flex_container {
  padding: 25px;
}

body.locator #actionsLocator {
  padding: 5px;
}

body.locator #actionsLocator .mdi,
body.locator #actionsLocator .iconify--mdi {
  font-size: 20px !important;
}

body.locator #actionsLocator .dropdown-item {
  margin-bottom: 5px;
}

body.locator #actionsLocator .dropdown-item:last-child {
  margin-bottom: 0;
}

body.locator #locatorFiltersDiv .input-group:not(.treeview-input-group) .form-control { /* The opposite of Bootstrap */
  margin-left: 0 !important;
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

#content {
  min-width: 1px;
  width: 100%;
  flex-grow: 1;
  flex: 1;
  margin: 0 auto;
}

#content #flex_container {
  display: flex;
}

body.main #content {
  border: 0;
  background: transparent;
  margin: 0 25px;
}

body.main #content #flex_container {
  border-top: 0;
  margin: 0;
}

body.main #content #main {
  background: transparent;
  padding: 0;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}

body.detail #content #main.container {
  margin: 0 auto;
  padding: 25px;
  min-width: 0;
  max-width: 100%;
  display: block;
  background-color: transparent;
}

body.locator main > [class^=container] #main.container,
body.error main > [class^=container] #main.container {
  max-width: 100%;
  margin: 25px;
}

#content #main {
  color: var(--main-text-color);
  position: relative;
  background-color: var(--main-bg-color);
  flex: 1;
}

main [class^=container] #column,
main [class^=container] #column.absolute {
  width: 300px;
  position: fixed !important;
  top: 0;
  display: none;
  z-index: 100;
  height: 100%;
  background-color: var(--menu-color);
  margin-left: 0;
  box-shadow: 15px 0px 10px -15px rgba(0, 0, 0, 0.1); /* Right shadow. Not valid Bootstrap class: ".shadow" */
  height: 100vh !important;
  overflow-y: scroll;
}

/* The maximize is applied with maxView=true or maxView=false from the URL */
body.detail.maximize #content #main.container {
  max-width: 100%;
}

body.detail.maximize main [class^=container] #column {
  position: absolute;
}

/* Highlight zone */
.highlight-zone {
  background-color: var(--highlight-zone-bg-color);
}

/* Media queries */
@media (min-width: 992px) {
  body.detail #content #main.container {
    max-width: 1320px;
  }
}
@media (min-width: 1200px) {
  body.main,
  body.detail,
  body.locator {
    overflow-x: visible;
  }
  main [class^=container] #column {
    width: 250px;
    position: relative !important;
    height: auto !important; /* 100vh default responsive */
    overflow-y: hidden; /* scroll for responsive */
  }
}
@media (min-width: 1400px) {
  main [class^=container] #column {
    display: block;
  }
}
/* Custom media queries */
@media (min-width: 1600px) {
  main [class^=container] #column {
    width: 300px;
  }
}
.login a {
  color: var(--login-link-color);
}

.login a:hover {
  color: var(--login-link-color-hover);
}

.login {
  background-color: var(--login-color) !important;
  background-image: var(--login-img) !important;
  background-repeat: var(--login-img-repeat) !important;
  background-position: var(--login-img-position) !important;
  background-attachment: var(--login-img-attachment) !important;
  background-size: var(--login-img-size) !important;
  /* React class not .login */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* React class not .login */
}

.login .fields {
  margin-bottom: 50px;
}

.login .password-container .icon .mdi,
.login .password-container .icon .iconify--mdi {
  color: var(--login-form-mdi-color) !important;
}

.login main {
  flex: initial;
  margin: auto;
  width: 100%;
}

/* Left position */
.login.left main {
  flex: 1;
  background: var(--login-container-color);
  margin-left: 0;
  margin-right: auto;
  box-shadow: var(--login-shadow) !important;
  /*border-radius: var(--login-radius); here not necessary */
}
@media (min-width: 992px) {
  .login.left main {
    width: var(--login-width);
  }
}

/* Center position */
.login.center main {
  flex: 1;
  background: var(--login-container-color);
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 0rem 0rem;
  box-shadow: var(--login-shadow) !important;
  border-radius: var(--login-radius);
}
.login.center .btn-login,
.login.center .btn-outline-login {
  width: 100%;
}
.login.center #username,
.login.center #newpass {
  margin-bottom: 1.5rem;
}
.login.center .form-floating > .form-control:not(:placeholder-shown) {
  padding-bottom: 0;
}
.login.center .form-floating > .form-control {
  padding: 1rem 0.75rem 0 1rem;
}
@media (min-width: 992px) {
  .login.center main {
    width: var(--login-width);
    flex: 0;
  }
}

/* Right Position */
.login.right main {
  flex: 1;
  background: var(--login-container-color);
  margin-left: auto;
  margin-right: 0;
  box-shadow: var(--login-shadow) !important;
  /*border-radius: var(--login-radius); here not necessary */
}
@media (min-width: 992px) {
  .login.right main {
    width: var(--login-width);
  }
}

.login .card {
  background-color: transparent; /* Bootstrap default white */
}

.login .card-header {
  padding: 0;
  min-height: auto;
}

.login .card-header h2 {
  display: var(--login-welcome-display);
  color: var(--login-welcome-color);
  font-size: var(--login-welcome-font-size);
  margin-bottom: var(--login-welcome-margin-bottom);
}

.login .card-header p {
  display: var(--login-welcome-subtext-display);
  color: var(--login-welcome-subtext-color);
  font-size: var(--login-welcome-subtext-font-size);
  margin-bottom: var(--login-welcome-subtext-margin-bottom);
}

/* Autologin */
.login main p {
  color: var(--login-container-contrast-text);
}

/* Button */
/* Important: The button can be outline, so the borders have to be seen in the disabled state */
.login .btn-login {
  --bs-btn-color: var(--login-btn-contrast-text);
  --bs-btn-bg: var(--login-btn-color);
  --bs-btn-border-color: var(--login-btn-border);
  --bs-btn-hover-color: var(--login-btn-hover-contrast-text);
  --bs-btn-hover-bg: var(--login-btn-hover-color);
  --bs-btn-hover-border-color: var(--login-btn-border);
  --bs-btn-focus-shadow-rgb: var(--login-btn-hover-color-rgb);
  --bs-btn-active-color: var(--login-btn-hover-contrast-text);
  --bs-btn-active-bg: var(--login-btn-hover-color);
  --bs-btn-active-border-color: var(--login-btn-hover-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--login-btn-contrast-text);
  --bs-btn-disabled-bg: var(--login-btn-color);
  --bs-btn-disabled-border-color: var(--login-btn-border);
}

.login .btn-outline-login {
  --bs-btn-color: var(--login-btn-color);
  --bs-btn-border-color: var(--login-btn-color);
  --bs-btn-hover-color: var(--login-btn-contrast-text);
  --bs-btn-hover-bg: var(--login-btn-color);
  --bs-btn-hover-border-color: var(--login-btn-color);
  --bs-btn-focus-shadow-rgb: var(--login-btn-color-rgb);
  --bs-btn-active-color: var(--login-btn-contrast-text);
  --bs-btn-active-bg: var(--login-btn-color);
  --bs-btn-active-border-color: var(--login-btn-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--login-btn-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--login-btn-color);
}

.login .btn-login,
.login .btn-outline-login {
  font-size: var(--login-btn-font-size) !important;
  font-weight: var(--login-btn-font-weight) !important;
  box-shadow: var(--login-btn-shadow) !important;
  background-image: var(--login-btn-img) !important;
  background-position: var(--login-btn-img-position) !important;
  background-attachment: var(--login-btn-img-attachment) !important;
  background-size: var(--login-btn-img-size) !important;
  border-radius: var(--login-btn-border-radius);
  transition: all 0.4s ease-in-out;
  min-width: var(--login-btn-width);
  height: 50px;
}

.login .btn-login:hover,
.login .btn-outline-login:hover {
  transition: all 0.4s ease-in-out;
  background-image: var(--login-btn-img-hover) !important;
  background-position: var(--login-btn-img-hover-position) !important;
  background-attachment: var(--login-btn-img-hover-attachment) !important;
  background-size: var(--login-btn-img-hover-size) !important;
}

/**/
.login .form-control {
  background-color: var(--login-form-color);
  color: var(--login-form-contrast-text);
}

.login .form-control-bottom.form-control {
  border-bottom: var(--login-form-bottom-height) solid var(--login-form-border-color) !important;
}

.login .form-control-bottom.input[readonly].form-control,
.login .form-control-bottom.input[readonly].form-control:focus {
  border-bottom: var(--login-form-bottom-height) solid var(--login-form-border-color) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

/* Variables config position */
.login.default .form-control {
  border: 1px solid var(--login-form-border-color) !important; /* Always 1px */
  border-radius: var(--login-form-border-radius) !important;
}
.login.default .form-control::placeholder {
  color: var(--login-form-placeholder) !important;
}
.login.default #username {
  margin-bottom: 1rem !important;
}
.login.default {
  /* floating label disabled */
}
.login.default .form-floating > .form-control {
  padding: 0 0 0 1rem;
}
.login.default .form-floating > label {
  display: none;
}
.login.default .form-floating > .form-control-plaintext::placeholder,
.login.default .form-floating > .form-control::placeholder {
  color: var(--login-form-bottom-placeholder);
}
.login.default .form-floating {
  margin-bottom: 2rem !important;
}
.login.default .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown),
.login.default .form-floating > .form-control:not(:-moz-placeholder-shown) {
  padding-top: 0;
  padding-bottom: 0;
}
.login.default .form-floating > .form-control-plaintext:focus,
.login.default .form-floating > .form-control-plaintext:not(:placeholder-shown),
.login.default .form-floating > .form-control:focus,
.login.default .form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 0;
  padding-bottom: 0;
}
.login.default .form-floating > .form-control-plaintext:-webkit-autofill,
.login.default .form-floating > .form-control:-webkit-autofill {
  padding-top: 0;
  padding-bottom: 0;
}

.login .buttons {
  margin-top: 5rem;
}

.login .spinner-border-sm {
  --bs-spinner-width: 1.2rem;
  --bs-spinner-height: 1.2rem;
  --bs-spinner-border-width: 0.1em;
  margin-left: 0.25rem;
}

/* floating form */
/* There is a bug in chrome, it does not change the color of the saved texts */
.login .form-container {
  margin-bottom: 4rem;
}

.login .form-floating .form-control {
  color: var(--login-form-contrast-text);
  font-size: 17px; /* Not REM here */
}

.login .form-floating > label {
  color: var(--login-form-bottom-floating-label) !important;
  font-size: 17px; /* Not REM here */
}

/* floating form -> default field */
.login .form-container.default {
  margin-bottom: 2rem;
}

.login .form-container.default label {
  display: none;
}

.login .form-container.default .form-control {
  padding: 0 1rem;
}

.login .form-container.default .form-control::placeholder {
  color: var(--login-form-bottom-floating-label);
  transition: none;
}

/* Login footer (Inside CRM ---> footer.scss) */
.login.left footer {
  margin-left: 0;
  margin-right: auto;
}

.login.right footer {
  margin-left: auto;
  margin-right: 0;
}

.login.left footer,
.login.right footer {
  background: var(--login-footer-color);
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--login-footer-contrast-text);
  justify-content: center;
  width: 100%;
  padding: 1rem;
  flex-direction: column;
  gap: 5px;
}
.login.left footer a,
.login.right footer a {
  color: var(--login-footer-link-color);
}
.login.left footer a:hover,
.login.right footer a:hover {
  color: var(--login-footer-link-color-hover);
}
.login.left #footerVersion,
.login.right #footerVersion {
  border-top: 1px solid var(--bs-border-color);
  width: 90%;
  padding: 1rem 0 0 0;
  margin: 1rem 1rem 0 1rem;
  text-align: center;
}
.login.left #footerVersion .version,
.login.right #footerVersion .version {
  width: 100%;
  display: block;
}
.login.left #footerVersion .separe,
.login.right #footerVersion .separe {
  display: none;
}
@media (min-width: 992px) {
  .login.left footer,
  .login.right footer {
    width: var(--login-width);
  }
}

.login.center footer {
  background: var(--login-footer-color);
  margin-top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--login-footer-contrast-text);
  width: 100%;
  padding: 0 0.85rem;
  min-height: 45px;
}
.login.center #footerLinks {
  margin-left: 0;
}
.login.center #footerTemplate {
  margin-left: 1rem;
}
.login.center #footerVersion {
  margin-left: auto;
  margin-right: 0;
}
.login.center footer a {
  color: var(--login-footer-link-color);
}
.login.center footer a:hover {
  color: var(--login-footer-link-color-hover);
}
.login.center footer p {
  margin-left: auto;
  margin-right: 1rem;
}
.login.center #footerVersion .version {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
@media (max-width: 992px) {
  .login.center footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .login.center #footerVersion {
    margin-left: 0;
  }
}

/* End Footer */
/* SSO */
.login .separator {
  display: flex;
  flex-direction: row;
  margin: 1rem 0;
  color: var(--login-link-color);
  font-size: 1.25rem;
}
.login .separator:before,
.login .separator:after {
  content: "";
  flex: 1 1;
  border-bottom: 1px dashed var(--login-form-border-color);
}
.login .separator::before {
  margin: 0.85rem 0.85rem 0.85rem 0;
}
.login .separator::after {
  margin: 0 0 0.85rem 0.85rem;
}

/* End SSO */
#menu {
  background: var(--menu-color) !important;
}

#menu a {
  color: var(--menu-contrast-text) !important;
}

#menu > .nav > .nav-item > .nav-link {
  color: var(--menu-contrast-text) !important;
  font-weight: var(--menu-font-weight-links) !important;
}

#menu > .nav > .nav-item > .nav-link > .mdi,
#menu > .nav > .nav-item > .nav-link > .iconify--mdi {
  color: var(--menu-contrast-text) !important;
}

#menu > .nav > .nav-item.active > a.nav-link {
  background: var(--menu-active-color) !important;
  color: var(--menu-active-contrast-text) !important;
}

#menu .collapse .nav .nav-item .nav-link .mdi-chevron-down,
#menu .collapsing .nav .nav-item .nav-link .mdi-chevron-down {
  color: var(--link-ico-color) !important;
}

#menu .mdi.mdi-plus-circle-outline,
#menu .iconify--mdi.mdi-plus-circle-outline {
  color: var(--link-ico-color) !important;
}

#menu .mdi.mdi-plus-circle-outline:hover,
#menu .iconify--mdi.mdi-plus-circle-outline:hover {
  color: var(--link-ico-color-hover) !important;
}

#menu > .nav > .nav-item:not(.active) > a.nav-link:hover {
  background: var(--menu-hover-color) !important;
  color: var(--menu-hover-contrast-text) !important;
}

#menu > .nav > .nav-item:not(.active) > a.nav-link:hover,
#menu > .nav > .nav-item:not(.active) > a.nav-link:hover .mdi,
#menu > .nav > .nav-item:not(.active) > a.nav-link:hover .iconify--mdi {
  color: var(--menu-hover-contrast-text) !important;
}

#menu > .nav > .nav-item:not(.active) > a.nav-link:hover {
  border-left: 4px solid var(--menu-hover-border-color) !important;
}

#menu > .nav > .nav-item.active > a.nav-link,
#menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) {
  border-left: 4px solid var(--menu-active-border-color) !important;
  color: var(--menu-active-contrast-text) !important;
}

#menu > .nav > .nav-item > div.collapse,
#menu > .nav > .nav-item > div.collapsing {
  border-left: 4px solid var(--menu-active-border-color) !important;
}

#menu > .nav > .nav-item > div.collapse > .nav,
#menu > .nav > .nav-item > div.collapsing > .nav {
  background-color: rgba(var(--menu-active-content-color), 0.05) !important;
}

#menu .nav .nav-item {
  border-bottom: none;
}

#menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .mdi,
#menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .iconify--mdi {
  color: var(--menu-active-contrast-text) !important;
}

#menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .mdi,
#menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) > .iconify--mdi {
  color: var(--menu-active-contrast-text) !important;
}

#menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse] > .mdi,
#menu > .nav > .nav-item.active > a.nav-link[data-bs-toggle=collapse] > .iconify--mdi {
  color: var(--menu-active-contrast-text) !important;
}

#menu > .nav > .nav-item > a.nav-link[data-bs-toggle=collapse]:not(.collapsed) {
  background-color: var(--menu-active-color) !important;
}

.input-otp-list-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.input-otp-list-container .input-otp {
  width: 1em;
  min-width: 43px;
  text-align: center;
}

.input-otp-list-container .input-otp.is-invalid {
  background-image: none;
  background-color: transparent;
  padding-right: 0;
  padding-left: 0;
}

#dataObjectTable td.shrink {
  min-width: 50%;
  width: 50% !important; /* Only Chrome */
}

#dataObjectTable .text-nowrap {
  width: 1px;
  display: table;
}

#dataObjectTable .flex-wrap {
  flex-wrap: nowrap !important;
}

@-moz-document url-prefix() { /* Firefox and Windows 10 (only 10) BUG: https://github.com/twbs/bootstrap/issues/23295 */
  #dataObjectTable textarea {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
#documentData button[id^=data_validation_],
.configurable-field button[id^=data_validation_] {
  width: 200px;
}

/* CSS del tag de ConfigurableField */
.configurable-field-table {
  --height-cell-table: 35px;
}
.configurable-field-table .icons {
  width: 120px;
}
.configurable-field-table .label {
  width: 180px;
}
.configurable-field-table .field-date .input-decorators {
  width: 220px;
}
.configurable-field-table .overflow-auto .field {
  width: 200px !important;
  min-width: 200px !important;
}
.configurable-field-table .overflow-auto .field-boolean {
  width: 100px !important;
  min-width: 100px !important;
}
.configurable-field-table .overflow-auto .field-locator {
  width: auto !important;
  min-width: auto !important;
}
.configurable-field-table .overflow-auto > div:nth-of-type(n+2) {
  height: var(--height-cell-table);
}
.configurable-field-table .left {
  margin-top: calc(var(--height-cell-table) + 1rem);
}
.configurable-field-table .right {
  margin-top: calc(var(--height-cell-table) - 10px + 1rem);
}
.configurable-field-table .left > div,
.configurable-field-table .right > div {
  height: calc(var(--height-cell-table) + 1rem);
}
.configurable-field-table .validation {
  width: 70px;
}
.configurable-field-table label {
  color: var(--form-label-color);
}
.configurable-field-table .highlight-header {
  background-color: hsl(from var(--primary-color) h s 89%);
}
.configurable-field-table .highlight-body {
  background-color: hsl(from var(--primary-color) h s 96%);
}
.configurable-field-table .separator {
  position: relative;
  padding-left: 24px;
  padding-right: 70px;
}
.configurable-field-table .separator::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;
  width: 0px;
  background-color: var(--primary-color);
}
.configurable-field-table .validate,
.configurable-field-table .invalidate {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #ddd;
}
.configurable-field-table .validate:hover:not(.disabled) .mdi:before,
.configurable-field-table .invalidate:hover:not(.disabled) .mdi:before,
.configurable-field-table .validate.checked:not(.disabled) .mdi:before,
.configurable-field-table .invalidate.checked:not(.disabled) .mdi:before {
  color: #fff;
}
.configurable-field-table .validate:hover:not(.disabled),
.configurable-field-table .validate.checked:not(.disabled) {
  background: var(--green-color);
  border: 1px solid var(--green-color);
}
.configurable-field-table .invalidate:hover:not(.disabled),
.configurable-field-table .invalidate.checked:not(.disabled) {
  background: var(--red-color);
  border: 1px solid var(--red-color);
}
.configurable-field-table .validate.disabled,
.configurable-field-table .invalidate.disabled {
  opacity: 0.3;
}
.configurable-field-table .validate.disabled:hover,
.configurable-field-table .invalidate.disabled:hover,
.configurable-field-table .validate.disabled:hover .mdi:before,
.configurable-field-table .invalidate.disabled:hover .mdi:before {
  cursor: not-allowed;
}
.configurable-field-table .row-hover:hover {
  background-color: hsl(from var(--primary-color) h s 96%);
  border-radius: 5px;
}
.configurable-field-table .card-body {
  padding-left: 3rem;
  padding-right: 1rem;
}
.configurable-field-table .card-body .row-hover:hover {
  background-color: hsl(from var(--primary-color) h s 93%);
}
.configurable-field-table .card-body {
  padding-left: 0;
}
@media (min-width: 1800px) {
  .configurable-field-table .card-body {
    padding-left: 3rem;
  }
  .configurable-field-table .separator::before {
    width: 2px;
  }
}

/* Input select outside of table */
#div_parameter_configuration .dt-scroll-body,
#div_parameter_configuration .dt-scroll,
#div_parameter_configuration .dt-layout-table {
  overflow: visible !important;
  transform: none !important;
}

.object_type_pdf main [class^=container] .mdi,
.object_type_pdf main [class^=container] .mdi.info,
.object_type_pdf main [class^=container] .mdi.info:hover,
.object_type_pdf main [class^=container] .iconify--mdi,
.object_type_pdf main [class^=container] .iconify--mdi.info,
.object_type_pdf main [class^=container] .iconify--mdi.info:hover {
  font-size: 20px;
  vertical-align: middle;
}

.object_type_pdf #main {
  width: 100%;
}

.object_type_pdf .popup {
  float: left;
  width: 55%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.object_type_pdf .pdf {
  float: right;
  width: 45%;
  height: 100%;
}

.object_type_pdf .derecha {
  float: right;
  margin-left: 10px !important;
}

.object_type_pdf main [class^=container] {
  width: 100%;
}

/* Compartido también para el objeto "Archivo" */
.object_type_1002 #status strong {
  background: #eee;
  padding: 2px 10px;
  color: #333;
}

.object_type_pdf .file {
  float: left;
  margin-left: 25px;
  height: 30px;
  line-height: 30px !important;
  clear: both;
  font-weight: bold;
  width: calc(100% - 50px);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.object_type_pdf ul {
  clear: both;
}

.object_type_pdf #status {
  float: right;
  margin: 10px 10px 0 0;
}

.object_type_pdf #analyze {
  padding: 12px 0 20px 0;
  float: left;
}

.object_type_pdf #status {
  padding: 5px 0 18px 0;
  float: right;
}

.object_type_pdf #verify {
  background: #858585;
  color: #fff;
  font-weight: bold;
  padding: 4px;
  border-radius: 5px;
}

.object_type_pdf #verify:hover {
  background: #4e4e4e;
}

.object_type_pdf .splitScreenArchivesContainer {
  background: #fff;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  float: left;
  height: 100%;
  width: 55%;
}

.object_type_pdf .splitScreenContainer {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.object_type_pdf .splitScreenArchivesContainer,
.object_type_pdf .splitScreenViewerContainer {
  box-sizing: border-box;
}

.object_type_pdf .splitScreenArchivesContainer {
  background: #fff;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  float: left;
  height: 100%;
  width: 55%;
}

.object_type_pdf .splitScreenHandler {
  width: 9px;
  height: 100%;
  padding: 0;
  cursor: ew-resize;
}

.object_type_pdf .splitScreenHandler::before {
  content: "";
  display: block;
  width: 9px;
  height: 100%;
  background: #474747;
  margin: 0 auto;
}

.object_type_pdf .splitScreenViewerContainer {
  flex: 1;
}

body.object_type_pdf {
  margin-bottom: 0 !important;
}

.popup {
  background-color: #fff;
  background-image: none;
  overflow-x: auto;
  overflow-y: auto;
  margin: 0;
  padding: 10px;
  min-width: auto;
}

body.popup main #flex_container {
  width: calc(100% - 15px);
}

body.popup main [class^=container] {
  display: initial;
  width: calc(100% - 15px);
  max-width: calc(100% - 15px);
  margin: 0 auto;
  box-shadow: none;
}

body.popup main [class^=container] #main {
  padding: 0 !important;
  width: calc(100% - 15px);
}

body.popup main [class^=container] .alertas {
  width: calc(100% - 15px);
}

#popup {
  margin: 10px 0 0 0;
  padding: 0;
  width: calc(100% - 15px);
  height: 500px;
}

body.popup main [class^=container] {
  max-width: calc(100% - 15px);
}

#procesing_container {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background: white;
  width: 300px;
  height: 70px;
  filter: alpha(opacity=70);
  opacity: 0.9;
  box-sizing: content-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.popup #procesing_container {
  display: none !important;
}

#procesing_container.processing_fixed {
  position: fixed;
  top: 0%;
  left: 50%;
  margin-left: -150px;
  margin-top: 220px;
  z-index: 6666;
}

#procesing_container.processing_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -35px;
  margin-left: -150px;
  z-index: 6666;
}

.rating {
  float: left;
}

.rating:not(:checked) > input {
  position: absolute;
  top: -9999px;
  clip: rect(0, 0, 0, 0);
}

.rating:not(:checked) > label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 160%;
  color: #ddd;
}

.rating:not(:checked) > label:before {
  content: "★ ";
}

.rating > input:checked ~ label {
  color: var(--primary-color);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: var(--primary-color);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
  color: var(--primary-color);
}

.rating > label:active {
  position: relative;
  top: 2px;
  left: 2px;
}

main .locator {
  width: 680px !important;
  /* En modo maximizado necesitamos que siga siendo 600px */
  margin: 0 auto;
  padding: 0;
}

main .locator input,
main .locator select {
  padding: 3px 5px;
  border-radius: 4px;
  min-height: 30px;
}

main .locator input:focus,
main .locator select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

main .locator .form-select {
  display: unset;
}

main .locator label {
  float: left;
  width: 160px;
  text-align: right;
  margin: 5px 10px 0 0;
}

main .locator p {
  margin-bottom: 0.5rem;
  display: flex;
}

main .locator p input[type=text] {
  border: 1px solid var(--bs-border-color);
  color: #495057;
  box-sizing: border-box;
}

main .locator select {
  margin: 0 10px 3px 0;
  width: 190px; /* Igual que el valor de jquery.multiselect.min.js */
}

main .locator input {
  margin: 3px 10px 0 0;
}

main .locator .mini {
  width: 85.5px;
}

main .locator #advancedSearchButton {
  clear: both;
  display: block;
  margin: 10px 0 0 250px;
  cursor: pointer;
}

main .locator .bumensaje {
  border: 0;
  font-size: 11px;
  font-style: italic;
  margin-top: 5px;
  cursor: default;
}

main .locator .bumensaje:focus {
  border: 0;
  outline: none;
}

main .locator .treeLevelFilter { /* Para los árboles */
  clear: both;
}

main .locator .twodate { /* Para fecha de inicio, entre */
  margin: 3px 0 0 366px !important;
}

main .locator .timepicker {
  margin: 3px 0 0 -5px;
}

main .locator_filters .predefinedFilter_container {
  text-align: center;
}

main .locator_filters .predefinedFilter_container {
  width: 100%;
}

main .locator_filters .predefinedFilter_container .filter .mdi,
main .locator_filters .predefinedFilter_container .filter .iconify--mdi {
  color: #4cb1e1;
  font-size: 60px;
  line-height: 60px;
}

main .locator .ui-multiselect {
  margin: 0 0 0 0 !important;
  width: 192px !important;
  border-radius: 3px !important;
  line-height: 25px;
}

main .locator .bumensaje {
  border: 0;
  font-size: 11px;
  font-style: italic;
  margin-top: 5px;
  cursor: default;
}

main .locator .bumensaje:focus {
  border: 0;
  outline: none;
}

main .container-fluid.locator {
  width: 100% !important;
}

body.rightPanel header .container {
  max-width: 100%;
}
body.rightPanel #maxminElement {
  display: none;
}
body.rightPanel main #navbar .showMainMenu {
  display: none !important;
}
body.rightPanel main #navbar .mdi-arrow-expand {
  display: none;
}
body.rightPanel main #navbar .breadCrumbs {
  width: 70%;
}
body.rightPanel main #navbar ul.iconsRight {
  position: relative;
  right: 0;
}
body.rightPanel main #menu_tabs {
  width: 100% !important;
}
body.rightPanel main [class^=container] {
  padding: 0 0 10px 0;
  box-shadow: none;
  max-width: inherit !important;
}
body.rightPanel main [class^=container].mainPanel {
  position: fixed;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: block !important;
  margin-top: 0;
  border-radius: 0;
  min-height: calc(100vh - 80px);
  height: calc(100% - 80px);
}
body.rightPanel main [class^=container].mainPanel #main {
  margin-bottom: 0px;
}
body.rightPanel main #navbar {
  margin-top: 10px;
}
body.rightPanel main #column {
  position: absolute;
  left: -10px;
  z-index: 665;
  box-shadow: -5px 2px 20px -14px rgba(0, 0, 0, 0.5);
}
body.rightPanel main #content {
  max-width: 100%;
}
body.rightPanel main #sidebar {
  position: absolute;
  right: -10px;
  z-index: 665;
  box-shadow: -5px 2px 20px -14px rgba(0, 0, 0, 0.5);
  width: 400px;
  max-width: 400px;
}
body.rightPanel main #sidebar .icons {
  margin-top: 0;
}
body.rightPanel main #sidebar .links .description .mdi-eye:before {
  content: "";
}
body.rightPanel .rightPanelWithButtons {
  height: calc(100% - 45px);
}
body.rightPanel .rightPanelWithoutButtons {
  height: 100%;
}
body.rightPanel .rightPanelButtons {
  height: 45px;
  background-color: rgb(42, 42, 46);
  position: relative;
  top: -5px;
}
body.rightPanel footer {
  display: none !important;
}
body.rightPanel #navbar .mdi-eye-off {
  display: block !important;
}
body.rightPanel #header_object .mdi-eye-off {
  display: block !important;
}

body.rightPanel.iframe {
  display: inherit !important; /* Not flex */
  background: #fff;
}

body:not(.rightPanel) .hideRightPanelElement {
  display: none;
}

#rightPanelModal .modal-dialog img {
  max-height: calc(100vh - 100px);
}

.rightPanelClose {
  width: 0px;
  background: #fff;
  display: none !important;
  height: 0;
  float: right;
}

.rightPanelOpen {
  right: 0;
  position: fixed;
  background: #fff;
  height: 100%;
  max-height: calc(100% - 80px);
  top: 80px;
  z-index: 666;
}

/* Archive Viewer (for Office files) */
.archive-viewer .viewer-archive-container.view-word-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.archive-viewer .viewer-archive-controls-container.viewer-archive-controls-static-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.archive-viewer .viewer-archive-controls-container.viewer-archive-controls-static-container,
.archive-viewer .viewer-control-button {
  background-color: #38383d;
}
.archive-viewer .viewer-archive-controls-container.viewer-archive-controls-static-container .mdi-download::before,
.archive-viewer .viewer-control-button .mdi-download::before {
  content: "\f0b8f"; /* Change to mdi-download-outline */
  color: #ffffff;
}
.archive-viewer .viewer-control-button:hover .mdi:before {
  color: #38383d !important;
}

/* COMMON */
#content #main.container form {
  width: 100%;
}

/* NONE SECTION */
#content #main.container:not(:has(section)) {
  padding: 0 25px;
}

/* OLD SECTION */
body.main #content #main.container > section:not(.section-container),
body.widget #content #main.container > section:not(.section-container) {
  width: 100%;
}

body.detail #content #main.container > section:not(.section-container) {
  padding: 25px;
  margin: 0;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  width: 100%;
  background: #fff;
}
body.detail #content #main.container > section:not(.section-container) {
  min-width: 0;
}
body.detail #main.container form > section:not(.section-container),
body.detail #main.container > section:not(.section-container) {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

body.locator #content #main.container form,
body.locator #content #main.container section:not(.section-container) {
  width: 100%;
}

body.rightPanel main section:not(.section-container) {
  width: auto !important;
}

/* NEW SECTION - CRM CONTAINER */
body.main #content #main.container > section.section-container {
  background-color: transparent !important;
}

/* NEW SECTION - COMPONENT */
section.section-container {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
  background: white;
  padding: 1.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 0.5rem;
  min-width: 0;
}

.section-container:last-of-type {
  margin-bottom: 0 !important;
}

.section-header .mdi.mdi-chevron-down:before {
  transition: 0.3s transform ease-in-out;
}

.section-header .collapsed .mdi.mdi-chevron-down:before,
.section-header.collapsed .mdi.mdi-chevron-down:before {
  transform: rotate(-90deg) !important;
}

/* Quick search */
#column #spanSearchMenu {
  margin: 13px;
}

#column #spanSearchMenu input {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.ui-autocomplete {
  z-index: 6666 !important;
  max-height: 50vh;
  overflow-y: auto;
  /*top: 143px !important; Variable height depending on the service console */
  left: 12px !important;
  width: 276px !important;
  border-radius: 5px !important;
}

body.service .ui-autocomplete {
  /*top: 189px !important; Variable height depending on the service console */
}

.ui-autocomplete .ui-menu-item:hover {
  text-decoration: underline;
}

.ui-autocomplete .row {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}

.ui-autocomplete .mdi:hover,
.ui-autocomplete .iconify--mdi:hover {
  color: #666;
}

#column #spanSearchMenu .input-group-lg > .form-control:not(textarea) { /* Height same as #header_object */
  height: calc(3rem + 2px);
}

/***************************************/
/*********** Jquery ui menu ************/
/***************************************/
/* Prepared so that the drop-down menu options do not jump */
/* Being generic can cause problems, be careful */
.ui-menu .ui-menu-item a {
  padding: 2px 10px !important;
}

.ui-menu .ui-menu-item a .mdi,
.ui-menu .ui-menu-item a .iconify--mdi {
  position: absolute;
  right: 0;
  cursor: pointer;
  font-size: 14px;
  padding: 0 5px;
}

#divServiceFooter {
  position: relative;
}

#divServiceFooter #services .notifications {
  margin-top: 0;
}

#services {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
#services .console {
  padding: 5px 10px;
  line-height: 34px;
}
#services .console.conconnected {
  background: #a4e1cf;
  border: 1px solid #a4e1cf;
  color: #236847;
}
#services p {
  margin-bottom: 0; /* Bootstrap Fix */
}
#services .console.condisconnected {
  background: #eee none repeat scroll 0 0;
  border: 1px solid #c3c3c3;
  color: #747474;
}
#services .console.condisconnected .mdi,
#services .console.condisconnected .iconify--mdi {
  color: #747474;
}
#services .console em {
  margin: 4px 0 0 5px;
}
#services .console em, #services strong {
  font-size: 1rem;
}
#services .console a {
  float: right;
  font-size: 1.3rem;
  margin: 0 0 0 5px;
}
#services .console #moveVertical {
  margin-right: 5px;
}
#services .console a#loginConsoleButton,
#services .console a#logoutConsoleButton {
  margin: 0 0 0 5px;
}
#services .console .listservices {
  margin: 5px 0 0 0;
  padding: 5px 10px;
  position: relative;
  background: #fff;
  color: #333;
}
#services .console .listservices p {
  padding: 5px 0;
  border-bottom: 1px dotted #ddd;
  font-weight: normal;
  font-style: italic;
  display: flex;
  justify-content: space-between;
}
#services .console .listservices p em {
  float: none;
  margin: 0;
}
#services .console .listservices p.connected {
  color: #68a951;
}
#services .console .listservices p.disconnected {
  color: #000;
}
#services .console .listservices p:last-child {
  border: 0;
}
#services .console .listservices p.connected span,
#services .console .listservices p.disconnected span {
  width: 230px;
  font-size: 1rem;
}
#services .notifications {
  position: relative;
  display: none;
  margin: 5px 0 0 0 !important;
  padding: 0;
}
#services .notifications .notibox {
  background: #fff;
  margin-bottom: 5px;
  width: 100%;
  border-bottom: 1px solid #c3c3c3;
}
#services .notifications .notibox div i { /* This i is not an icon */
  float: left;
  word-break: break-all;
  margin: 7px 10px 8px;
  font-weight: bold;
  font-style: normal;
  color: #434343;
  padding: 0;
  font-size: 1rem;
}
#services .notifications .notibox div i.service { /* This i is not an icon */
  background: #f2f2f2;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #c3c3c3;
  border-top: 1px solid #c3c3c3;
  padding: 5px 4px 5px 10px;
  font-weight: bold;
  font-style: italic;
}
#services .notifications .notibox:last-child {
  margin-bottom: 0;
}
#services .notifications .notibox .header {
  width: 100%;
  margin: 0;
  color: #333;
  padding: 0;
  background: var(--primary-color);
  cursor: pointer;
  display: flex;
}
#services .notifications .notibox .header.collapsed {
  transition: 0.3s transform ease-in-out;
}
#services .notifications .notibox .header .mdi,
#services .notifications .notibox .header .iconify--mdi {
  font-size: 1rem;
  text-align: center;
  color: #FFF;
  float: left;
  margin: 2px 0 0 2px;
  transition: 0.3s transform ease-in-out;
}
#services .notifications .notibox .header.collapsed .mdi,
#services .notifications .notibox .header.collapsed .iconify--mdi {
  transform: rotate(-90deg) !important;
}
#services .notifications .notibox .header .title {
  width: 85%;
  color: #fff;
  margin: 5px 0;
  text-decoration: none;
  display: flex;
  align-items: center;
}
#services .notifications .notibox .header .title.long {
  width: 135px; /* When there are 3 icons */
}
#services .notifications .notibox .header .title:hover {
  color: #fff;
}
#services .notifications .notibox span {
  font-size: 1rem;
  color: #000;
  font-style: italic;
  position: relative;
  word-break: break-all;
  display: block;
  border-top: 0;
  padding: 0.25rem;
  font-weight: 500;
  border-bottom: 1px solid #c3c3c3;
}
#services .notifications .notibox span.service {
  background: #edecec;
}
#services .notifications .notibox .buttons {
  width: 100%;
  background-color: #edecec;
  border-bottom: 0;
  margin: 0;
  display: flex;
}
#services .notifications .notibox .buttons ul {
  width: 100%;
  border-top: 0;
  margin: 0;
  padding: 0;
  display: flex;
  float: left;
}
#services .notifications .notibox .buttons ul li {
  font-size: 1rem;
  text-decoration: none;
  color: #666;
  float: left;
  background: none;
  padding: 0;
  margin: 0;
  clear: none;
  list-style: none;
  border-right: 1px solid #c3c3c3;
  flex: auto;
}
#services .notifications .notibox div em {
  border-top: 1px solid #c3c3c3;
  width: 100%;
  display: flex;
  background: #fff;
  padding: 0.25rem 0;
}
#services .notifications .notibox div em a {
  flex: auto;
}
#services .notifications .notibox div em a:last-child {
  flex: initial;
}
#services .notifications .notibox div[id^=info] ul {
  margin-bottom: 0;
}
#services .notifications .notibox div[id^=info] ul li {
  margin: 0 10px;
  list-style: none;
  margin: 0 15px 0 10px; /* At the request of FCO. More space on the right */
  list-style: none;
  display: flex;
  width: 100%;
}
#services .notifications .notibox div[id^=info] ul li:before {
  content: "\f012e";
  font: 7px "Material Design Icons";
  color: var(--primary-color);
  padding: 5px;
  margin: 0;
}
#services .notifications .notibox div.buttons ul li:last-child {
  border-right: 0px;
}
#services .notifications div .sep {
  height: 16px;
  width: 2px;
}
#services .notifications .ok,
#services .notifications .go,
#services .notifications .postpone,
#services .notifications .transfer {
  cursor: pointer !important;
  vertical-align: top;
  width: 100%;
  float: left;
}
#services .notifications .transferbox {
  padding: 10px;
  border-top: 1px solid #c3c3c3;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  width: 100%;
}
#services .notifications .transferbox input[type=text] {
  width: 100px;
  padding: 2px;
  border: 1px solid #c3c3c3;
  background: #fff;
  margin: 0 10px 0 0;
}
#services .notifications .transferbox .mdi,
#services .notifications .transferbox .iconify--mdi {
  color: var(--primary-color);
  font-size: 1rem;
  margin-top: 5px;
}
#services .notifications .countdown {
  border-top: 1px solid #c3c3c3;
  width: calc(100% - 20px);
  padding: 10px 0 0 0;
  margin: 0px 0 10px 10px;
  font-style: normal;
  width: 100%;
  display: flex;
}
#services .notifications .countdown b {
  background: var(--primary-color);
  padding: 2px 4px;
  color: #fff;
  border-radius: 5px;
  margin: 0 2px;
  font-style: normal;
  font-weight: normal;
}
#services .console.conconnected .mdi,
#services #activeMenuService .mdi:before,
#services .console.conconnected .iconify--mdi,
#services #activeMenuService .iconify--mdi:before {
  color: #236847;
}
#services .console.conconnected a .mdi:hover,
#services .console.conconnected a .iconify--mdi:hover {
  color: #317b58;
}
#services .console.condisconnected a .mdi,
#services .console div.listservices a .mdi,
#services .console.condisconnected a .iconify--mdi,
#services .console div.listservices a .iconify--mdi {
  color: #000;
  font-size: 1.4rem;
}
#services .console.condisconnected a .mdi:hover,
#services .console div.listservices a .mdi:hover,
#services .console.condisconnected a .iconify--mdi:hover,
#services .console div.listservices a .iconify--mdi:hover {
  color: #666;
}
#services .notifications .notibox div.buttons ul li .mdi,
#services .notifications .notibox div.buttons ul li .iconify--mdi {
  width: 100%;
  font-size: 1rem;
  text-align: center;
  color: #888;
  padding: 5px 0px 5px 0px;
  margin: 0;
}
#services .notifications .notibox div.buttons ul li .mdi:hover,
#services .notifications .notibox div.buttons ul li .iconify--mdi:hover {
  color: #000;
}
#services .notifications .notibox .eminfo a span:before {
  color: var(--primary-color);
  float: left;
  clear: none;
}
#services .notifications .notibox .eminfo a span:before:hover {
  color: var(--primary-color-hover);
}
#services .info-box {
  font-size: 1rem;
  color: #000;
  font-style: italic;
  position: relative;
  word-break: break-all;
  width: 100%;
}

#navService.fixed-bottom {
  width: 300px;
  z-index: 50;
  right: 0;
  left: auto !important;
}
#navService.fixed-bottom .console.conconnected {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
#navService.fixed-bottom .notifications {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.console.conconnected {
  background: #a4e1cf;
  border: 1px solid #a4e1cf;
  color: #236847;
  line-height: 34px;
}

#sidebar {
  width: 450px;
  padding: 0;
  background: #fff;
  min-height: 100%;
  margin-right: 0px;
  display: none;
  height: 100vh;
  overflow-y: auto;
  position: fixed;
  display: none;
  z-index: 670;
  top: 0;
  right: 0;
}
body.maximize #sidebar:not(.clicked) {
  width: 400px;
  height: 100vh;
  position: absolute;
  display: none;
  z-index: 670;
  right: 0;
  overflow-y: auto;
}
#sidebar .headertabs {
  background-color: var(--primary-color);
  padding: 0 20px;
}
#sidebar .headertabs .nav-tabs {
  border-bottom: 0;
}
#sidebar .headertabs .nav-tabs .nav-item .nav-link {
  margin-top: 5px;
  padding: 0 20px 2px;
  border: 0;
}
#sidebar .headertabs .nav-tabs .nav-item .nav-link .mdi,
#sidebar .headertabs .nav-tabs .nav-item .nav-link:hover .mdi,
#sidebar .headertabs .nav-tabs .nav-item .nav-link .iconify--mdi,
#sidebar .headertabs .nav-tabs .nav-item .nav-link:hover .iconify--mdi {
  font-size: 24px;
  color: #fff;
}
#sidebar .headertabs .nav-tabs .active .mdi,
#sidebar .headertabs .nav-tabs .active .iconify--mdi {
  color: var(--link-ico-color) !important;
}
#sidebar .tab-content {
  background: #fff;
}
#sidebar .tab-content .tab-pane h4.card-header {
  padding: 0;
  border-bottom: 0;
  background-color: transparent;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  font-weight: 600 !important;
}
#sidebar .icons {
  padding: 0 20px;
  margin-bottom: 5%;
}
#sidebar .icons ul {
  margin-bottom: 0;
}
#sidebar .icons li {
  list-style: none;
  display: inline-block;
}
#sidebar .icons li .mdi,
#sidebar .icons li .iconify--mdi {
  font-size: 27px;
  color: var(--primary-color);
  display: inline-block;
  margin: 0 0.5rem 0 0;
}
#sidebar .icons li a {
  cursor: pointer;
  outline: 0;
}

/* Media queries */
@media (min-width: 992px) {
  #sidebar {
    height: auto;
    display: block;
    position: relative;
    overflow-y: hidden;
    z-index: auto;
    width: 350px;
  }
}
/* Custom media queries */
@media (min-width: 1600px) {
  #sidebar {
    width: 450px;
  }
}
.status {
  --status-border-width: 1px;
  --status-border-style: solid;
  --status-border-color: #e6e7e9;
  --status-body-color: #1d273b;
  padding: 0.25rem 0.75rem;
}

/**/
.status-lg {
  font-size: 1rem !important;
  padding: 1rem !important;
}

.status-lg .status-dot {
  --status-size: 0.6rem;
}

.status-lg .status-donut {
  --status-size: 10px !important;
}

.status-sm {
  font-size: 0.75rem !important;
  padding: 0.7rem !important;
}

.status-sm .status-dot {
  --status-size: 0.35rem;
}

.status-sm .status-donut {
  --status-size: 8px !important;
}

/**/
.status-success {
  --status-color: var(--bs-success) !important;
  --status-color-rgb: var(--bs-success-rgb) !important;
}

.status-danger {
  --status-color: var(--bs-danger) !important;
  --status-color-rgb: var(--bs-danger-rgb) !important;
}

.status-warning {
  --status-color: var(--bs-warning) !important;
  --status-color-rgb: var(--bs-warning-rgb) !important;
}

.status-info {
  --status-color: var(--bs-info) !important;
  --status-color-rgb: var(--bs-info-rgb) !important;
}

.status-light {
  --status-color: var(--bs-light) !important;
  --status-color-rgb: var(--bs-light-rgb) !important;
}

.status-dark {
  --status-color: var(--bs-dark) !important;
  --status-color-rgb: var(--bs-dark-rgb) !important;
}

/**/
.status-lighter-primary {
  --status-color: var(--primary-color-lighter) !important;
  --status-color-rgb: var(--primary-color-lighter-rgb) !important;
}

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

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

.status-dark-primary {
  --status-color: var(--primary-color-dark) !important;
  --status-color-rgb: var(--primary-color-dark-rgb) !important;
}

.status-darker-primary {
  --status-color: var(--primary-color-darker) !important;
  --status-color-rgb: var(--primary-color-darker-rgb) !important;
}

.status-lighter-secondary {
  --status-color: var(--secondary-color-lighter) !important;
  --status-color-rgb: var(--secondary-color-lighter-rgb) !important;
}

.status-light-secondary {
  --status-color: var(--secondary-color-light) !important;
  --status-color-rgb: var(--secondary-color-light-rgb) !important;
}

.status-secondary {
  --status-color: var(--secondary-color) !important;
  --status-color-rgb: var(--secondary-color-rgb) !important;
}

.status-dark-secondary {
  --status-color: var(--secondary-color-dark) !important;
  --status-color-rgb: var(--secondary-color-dark-rgb) !important;
}

.status-darker-secondary {
  --status-color: var(--secondary-color-darker) !important;
  --status-color-rgb: var(--secondary-color-darker-rgb) !important;
}

.status-lighter-tertiary {
  --status-color: var(--tertiary-color-lighter) !important;
  --status-color-rgb: var(--tertiary-color-lighter-rgb) !important;
}

.status-light-tertiary {
  --status-color: var(--tertiary-color-light) !important;
  --status-color-rgb: var(--tertiary-color-light-rgb) !important;
}

.status-tertiary {
  --status-color: var(--tertiary-color) !important;
  --status-color-rgb: var(--tertiary-color-rgb) !important;
}

.status-dark-tertiary {
  --status-color: var(--tertiary-color-dark) !important;
  --status-color-rgb: var(--tertiary-color-dark-rgb) !important;
}

.status-darker-tertiary {
  --status-color: var(--tertiary-color-darker) !important;
  --status-color-rgb: var(--tertiary-color-darker-rgb) !important;
}

.status-lighter-blue {
  --status-color: var(--blue-color-lighter) !important;
  --status-color-rgb: var(--blue-color-lighter-rgb) !important;
}

.status-light-blue {
  --status-color: var(--blue-color-light) !important;
  --status-color-rgb: var(--blue-color-light-rgb) !important;
}

.status-blue {
  --status-color: var(--blue-color) !important;
  --status-color-rgb: var(--blue-color-rgb) !important;
}

.status-dark-blue {
  --status-color: var(--blue-color-dark) !important;
  --status-color-rgb: var(--blue-color-dark-rgb) !important;
}

.status-darker-blue {
  --status-color: var(--blue-color-darker) !important;
  --status-color-rgb: var(--blue-color-darker-rgb) !important;
}

.status-lighter-green {
  --status-color: var(--green-color-lighter) !important;
  --status-color-rgb: var(--green-color-lighter-rgb) !important;
}

.status-light-green {
  --status-color: var(--green-color-light) !important;
  --status-color-rgb: var(--green-color-light-rgb) !important;
}

.status-green {
  --status-color: var(--green-color) !important;
  --status-color-rgb: var(--green-color-rgb) !important;
}

.status-dark-green {
  --status-color: var(--green-color-dark) !important;
  --status-color-rgb: var(--green-color-dark-rgb) !important;
}

.status-darker-green {
  --status-color: var(--green-color-darker) !important;
  --status-color-rgb: var(--green-color-darker-rgb) !important;
}

.status-lighter-yellow {
  --status-color: var(--yellow-color-lighter) !important;
  --status-color-rgb: var(--yellow-color-lighter-rgb) !important;
}

.status-light-yellow {
  --status-color: var(--yellow-color-light) !important;
  --status-color-rgb: var(--yellow-color-light-rgb) !important;
}

.status-yellow {
  --status-color: var(--yellow-color) !important;
  --status-color-rgb: var(--yellow-color-rgb) !important;
}

.status-dark-yellow {
  --status-color: var(--yellow-color-dark) !important;
  --status-color-rgb: var(--yellow-color-dark-rgb) !important;
}

.status-darker-yellow {
  --status-color: var(--yellow-color-darker) !important;
  --status-color-rgb: var(--yellow-color-darker-rgb) !important;
}

.status-lighter-orange {
  --status-color: var(--orange-color-lighter) !important;
  --status-color-rgb: var(--orange-color-lighter-rgb) !important;
}

.status-light-orange {
  --status-color: var(--orange-color-light) !important;
  --status-color-rgb: var(--orange-color-light-rgb) !important;
}

.status-orange {
  --status-color: var(--orange-color) !important;
  --status-color-rgb: var(--orange-color-rgb) !important;
}

.status-dark-orange {
  --status-color: var(--orange-color-dark) !important;
  --status-color-rgb: var(--orange-color-dark-rgb) !important;
}

.status-darker-orange {
  --status-color: var(--orange-color-darker) !important;
  --status-color-rgb: var(--orange-color-darker-rgb) !important;
}

.status-lighter-red {
  --status-color: var(--red-color-lighter) !important;
  --status-color-rgb: var(--red-color-lighter-rgb) !important;
}

.status-light-red {
  --status-color: var(--red-color-light) !important;
  --status-color-rgb: var(--red-color-light-rgb) !important;
}

.status-red {
  --status-color: var(--red-color) !important;
  --status-color-rgb: var(--red-color-rgb) !important;
}

.status-dark-red {
  --status-color: var(--red-color-dark) !important;
  --status-color-rgb: var(--red-color-dark-rgb) !important;
}

.status-darker-red {
  --status-color: var(--red-color-darker) !important;
  --status-color-rgb: var(--red-color-darker-rgb) !important;
}

.status-lighter-brown {
  --status-color: var(--brown-color-lighter) !important;
  --status-color-rgb: var(--brown-color-lighter-rgb) !important;
}

.status-light-brown {
  --status-color: var(--brown-color-light) !important;
  --status-color-rgb: var(--brown-color-light-rgb) !important;
}

.status-brown {
  --status-color: var(--brown-color) !important;
  --status-color-rgb: var(--brown-color-rgb) !important;
}

.status-dark-brown {
  --status-color: var(--brown-color-dark) !important;
  --status-color-rgb: var(--brown-color-dark-rgb) !important;
}

.status-darker-brown {
  --status-color: var(--brown-color-darker) !important;
  --status-color-rgb: var(--brown-color-darker-rgb) !important;
}

.status-lighter-pink {
  --status-color: var(--pink-color-lighter) !important;
  --status-color-rgb: var(--pink-color-lighter-rgb) !important;
}

.status-light-pink {
  --status-color: var(--pink-color-light) !important;
  --status-color-rgb: var(--pink-color-light-rgb) !important;
}

.status-pink {
  --status-color: var(--pink-color) !important;
  --status-color-rgb: var(--pink-color-rgb) !important;
}

.status-dark-pink {
  --status-color: var(--pink-color-dark) !important;
  --status-color-rgb: var(--pink-color-dark-rgb) !important;
}

.status-darker-pink {
  --status-color: var(--pink-color-darker) !important;
  --status-color-rgb: var(--pink-color-darker-rgb) !important;
}

.status-lighter-purple {
  --status-color: var(--purple-color-lighter) !important;
  --status-color-rgb: var(--purple-color-lighter-rgb) !important;
}

.status-light-purple {
  --status-color: var(--purple-color-light) !important;
  --status-color-rgb: var(--purple-color-light-rgb) !important;
}

.status-purple {
  --status-color: var(--purple-color) !important;
  --status-color-rgb: var(--purple-color-rgb) !important;
}

.status-dark-purple {
  --status-color: var(--purple-color-dark) !important;
  --status-color-rgb: var(--purple-color-dark-rgb) !important;
}

.status-darker-purple {
  --status-color: var(--purple-color-darker) !important;
  --status-color-rgb: var(--purple-color-darker-rgb) !important;
}

.status-lighter-grey {
  --status-color: var(--grey-color-lighter) !important;
  --status-color-rgb: var(--grey-color-lighter-rgb) !important;
}

.status-light-grey {
  --status-color: var(--grey-color-light) !important;
  --status-color-rgb: var(--grey-color-light-rgb) !important;
}

.status-grey {
  --status-color: var(--grey-color) !important;
  --status-color-rgb: var(--grey-color-rgb) !important;
}

.status-dark-grey {
  --status-color: var(--grey-color-dark) !important;
  --status-color-rgb: var(--grey-color-dark-rgb) !important;
}

.status-darker-grey {
  --status-color: var(--grey-color-darker) !important;
  --status-color-rgb: var(--grey-color-darker-rgb) !important;
}

.status-black {
  --status-color: var(--black-color) !important;
  --status-color-rgb: var(--black-color-rgb) !important;
}

@keyframes status-pulsate-tertiary {
  25% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(3, 3);
    opacity: 0;
  }
  100% {
    transform: scale(3, 3);
    opacity: 0;
  }
}
.status {
  --status-height: 1.5rem;
  --status-color: #616876;
  --status-color-rgb: 97, 104, 118;
  --status-text-color: #000;
  --status-font-weight: 500;
  --status-background-alpha: 0.2;
  display: inline-flex;
  align-items: center;
  height: var(--status-height);
  padding: 0.25rem 0.75rem;
  gap: 0.5rem;
  color: var(--status-text-color);
  background: rgba(var(--status-color-rgb), var(--status-background-alpha));
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 100rem;
  font-weight: var(--status-font-weight);
  line-height: 1;
  margin: 0;
}
.status .mdi,
.status .iconify--mdi {
  color: var(--status-color) !important;
  font-size: 0.95rem !important;
}
.status svg {
  fill: var(--status-color) !important;
}
.status.status-lite {
  border: var(--status-border-width) var(--status-border-style) var(--status-border-color) !important;
  background: transparent !important;
  color: var(--status-body-color) !important;
}
.status .status-donut {
  --status-size: 0.65rem;
  width: var(--status-size);
  height: var(--status-size);
  display: inline-block;
  border: 2px solid var(--status-color);
  background: transparent;
  border-radius: 100rem;
}
.status ::after,
.status ::before {
  box-sizing: border-box;
}

.status-dot {
  --status-dot-color: var(--status-color, #616876);
  --status-size: 0.5rem;
  position: relative;
  display: inline-block;
  width: var(--status-size);
  height: var(--status-size);
  background: var(--status-color) !important;
  border-radius: 100rem;
}
.status-dot.status-dot-animated:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  border-radius: inherit;
  opacity: 0.6;
  box-sizing: border-box;
  animation: 1s linear 2s backwards infinite status-pulsate-tertiary;
}

.status-indicator {
  --tblr-status-indicator-size: 2.5rem;
  --tblr-status-indicator-color: var(--status-color, #616876);
  display: block;
  position: relative;
  width: var(--tblr-status-indicator-size);
  height: var(--tblr-status-indicator-size);
}

.status-indicator-circle {
  --status-circle-size: .75rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2);
  width: var(--status-circle-size);
  height: var(--status-circle-size);
  border-radius: 100rem;
  background: var(--status-color);
}

.status-indicator-circle:nth-child(1) {
  z-index: 3;
}

.status-indicator-circle:nth-child(2) {
  z-index: 2;
  opacity: 0.1;
}

.status-indicator-circle:nth-child(3) {
  z-index: 1;
  opacity: 0.3;
}

.status-indicator-animated .status-indicator-circle:nth-child(1) {
  animation: 2s linear 1s infinite backwards status-pulsate-main;
}

.status-indicator-animated .status-indicator-circle:nth-child(2) {
  animation: 2s linear 1s infinite backwards status-pulsate-secondary;
}

.status-indicator-animated .status-indicator-circle:nth-child(3) {
  animation: 2s linear 1s infinite backwards status-pulsate-tertiary;
}

/* Stepper */
.stepper {
  --stepper-font: var(--font-general);
  --stepper-circle-size: 48px;
  --stepper-circle-inner-size: 1rem;
  --stepper-title-size: .875rem;
  --stepper-subtitle-size: .875rem;
  --stepper-text: #000;
  --stepper-bg: #f4f4f4;
  --stepper-border: #D0D5DD;
  --stepper-active-text: #fff;
  --stepper-active-bg: var(--primary-color);
  --stepper-active-border: var(--primary-color);
  --stepper-passed-text: #fff;
  --stepper-passed-bg: var(--secondary-color);
  --stepper-passed-border: var(--secondary-color);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 2rem;
  margin-bottom: 2rem;
  counter-reset: step;
  row-gap: 1rem;
  font-family: var(--stepper-font);
}

.stepper .step {
  color: var(--stepper-text);
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.stepper .step-content {
  text-align: center;
  height: 100%;
  width: 100%;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: min-content auto;
  justify-items: start;
  align-items: first baseline;
  z-index: 1;
}

.stepper .step:not(:last-child):after {
  content: " ";
  display: block;
  width: 0.15rem;
  height: 100%;
  border-left: 0.15rem solid var(--stepper-border);
  position: absolute;
  left: calc(var(--stepper-circle-size) / 2);
  top: var(--stepper-circle-size);
}

.stepper .step.passed:not(:first-child):before,
.stepper .step.passed:not(:last-child):after {
  border-color: var(--stepper-passed-border);
  width: calc(50% - var(--stepper-circle-size) / 2);
  z-index: 1;
}

.stepper .step-circle {
  border-radius: 50%;
  height: var(--stepper-circle-size);
  width: var(--stepper-circle-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--stepper-text);
  background-color: var(--stepper-bg);
}

.stepper .step-circle:before {
  display: inline-block;
  content: counter(step) " ";
  counter-increment: step;
  place-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--stepper-circle-inner-size);
}

.stepper .step-title {
  font-size: var(--stepper-title-size);
  color: var(--stepper-text);
  text-align: left;
  text-transform: uppercase;
  font-weight: 700;
  margin-block-end: 0.75rem;
}

.stepper .step-subtitle {
  font-size: var(--stepper-subtitle-size);
  margin-top: 0.5rem;
  color: var(--stepper-text);
  grid-column: 2;
  display: flex;
  align-items: center;
}

.stepper .step-subtitle > * {
  margin-top: auto;
  margin-bottom: auto;
}

.stepper .step-subtitle-status {
  padding: 0.25rem 1.5rem 0.25rem 1.5rem !important;
  border: 1px solid var(--stepper-border);
  border-radius: 50rem;
}

.stepper .step.active .step-circle {
  color: var(--stepper-active-text);
  background-color: var(--stepper-active-bg);
  border: 1px solid var(--stepper-active-border);
}

.stepper .step.active .step-subtitle-status {
  border-color: var(--stepper-active-border);
}

.stepper .step.passed .step-circle,
.stepper .step.passed .step-circle:before {
  color: var(--stepper-passed-text);
  background-color: var(--stepper-passed-bg);
  border: 1px solid var(--stepper-passed-border);
}

.stepper .step.passed .step-subtitle-status {
  border-color: var(--stepper-passed-border);
}

@media (min-width: 576px) {
  .stepper {
    flex-wrap: nowrap;
  }
  .stepper .step {
    width: 100%;
  }
  .stepper .step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
  }
  .stepper .step-title {
    text-align: center;
    margin-block-end: 0;
  }
  .stepper .step-subtitle {
    margin-top: auto;
  }
  .stepper .step:not(:last-child):after {
    content: "";
    display: block;
    border-left: none;
    border-top: 0.15rem solid var(--stepper-border);
    width: calc(100% - var(--stepper-circle-size));
    position: absolute;
    left: calc(50% + var(--stepper-circle-size) / 2);
    top: calc(var(--stepper-circle-size) / 2);
  }
  .stepper .step:not(:first-child):before {
    content: "";
    display: block;
    border-top: 0.15rem solid var(--stepper-border);
    width: calc(100% - var(--stepper-circle-size));
    position: absolute;
    right: calc(50% + var(--stepper-circle-size) / 2);
    top: calc(var(--stepper-circle-size) / 2);
  }
  .stepper .step.passed:not(:first-child):before,
  .stepper .step.passed:not(:last-child):after {
    border-color: var(--stepper-passed-border);
    width: calc(50% - var(--stepper-circle-size) / 2);
    z-index: 1;
  }
}
/* Fixed content */
body.fixed #menu_tabs {
  position: sticky;
  z-index: 10; /* 10 and only 10. Problem width datatable and modal */
  box-shadow: 0 5px 5px rgba(182, 182, 182, 0.3);
}

#menu_tabs {
  background: #fff;
  width: 100%;
  position: relative;
  min-height: 45px;
  display: flex;
  padding: 0 20px 0 25px;
}
#menu_tabs:after {
  content: "";
  position: absolute;
  top: 0;
  width: calc(100% - 45px);
  border-top: 1px solid #dee5ee;
}
#menu_tabs .maxmin {
  display: none;
}
#menu_tabs .tabs > ul li a,
#menu_tabs .tabs > ul li p {
  position: relative;
}
#menu_tabs .tabs > ul li a:hover {
  opacity: 1;
  text-decoration: none;
  color: var(--primary-color) !important;
}
#menu_tabs .tabs > ul li a:before {
  transition: 300ms;
  height: 6px;
  content: "";
  position: absolute;
  background-color: var(--primary-color);
  width: 0%;
  bottom: 0px;
}
#menu_tabs .tabs > ul li.selected p {
  color: var(--primary-color);
}
#menu_tabs .tabs > ul li.selected p:before,
#menu_tabs .tabs > ul li.selected a:before {
  height: 4px;
  content: "";
  position: absolute;
  background-color: var(--primary-color);
  width: 0%;
  bottom: 2px;
  width: calc(100% - 7px);
}
#menu_tabs .tabs > ul li a:hover::before {
  width: calc(100% - 7px);
}
#menu_tabs .tabs {
  overflow: hidden;
  position: relative;
  width: 100%;
  background: #fff;
}
#menu_tabs .tabs > ul {
  position: absolute;
  list-style-type: none;
  padding-right: 100px;
  margin-bottom: 0;
}
#menu_tabs .tabs > ul li {
  float: left;
  color: inherit;
  padding: 2px 10px 0 10px;
  text-align: center;
  cursor: pointer;
}
#menu_tabs .tabs > ul li:first-child {
  padding-left: 0;
}
#menu_tabs .tabs > ul li:hover a {
  color: #333333;
}
#menu_tabs .tabs > ul a,
#menu_tabs .tabs > ul p {
  display: block;
  color: #333333;
  background: inherit;
  text-decoration: none;
  padding: 5px 4px 14px;
  font-size: 14px;
  margin: 5px 0 0 0;
  font-weight: bold;
  text-transform: uppercase;
}
#menu_tabs .tabs > ul a:hover {
  color: #fff;
}
#menu_tabs .tabs > ul li.disabled a,
#menu_tabs .tabs > ul li.disabled:hover a {
  opacity: 0.4;
  color: var(--primary-color);
  text-decoration: none;
  cursor: default;
}
#menu_tabs .tabs > ul li.disabled a:before {
  position: relative !important;
}
#menu_tabs .control-menu {
  position: relative;
  float: right;
  margin: 0;
}
#menu_tabs .control-menu #prev,
#menu_tabs .control-menu #next {
  cursor: pointer;
  float: left;
  font-size: 20px;
}
#menu_tabs .control-menu #prev {
  margin: -8px 0 0 -80px;
}
#menu_tabs .control-menu #next {
  margin: -8px 0 0 -57px;
}
#menu_tabs .control-menu .mdi:hover,
#menu_tabs .control-menu .iconify--mdi:hover {
  color: #eaeaea;
}
#menu_tabs .control-menu .menu-expand {
  color: inherit;
  border-radius: 5px 5px 0 0;
  padding: 8px 0 2px 0;
  height: 32px;
  z-index: 666;
  width: 40px;
  text-align: center;
  position: absolute;
  right: 0;
  top: -8px;
  list-style: none;
  cursor: pointer;
  margin: 0;
}
#menu_tabs .control-menu .menu-expand #down {
  font-size: 20px;
  margin: 5px 0 0 10px;
  float: left;
}
#menu_tabs .control-menu .menu-expand ul {
  display: none;
  width: 200px;
  position: absolute;
  top: 25px;
  z-index: 0;
  left: auto;
  right: -1px;
  background: #fff;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 28px 0 0 0;
}
#menu_tabs .control-menu .menu-expand ul a { /* They asked us to be able to click on the entire area 100%, not just on the link */
  text-decoration: none;
  color: #000;
  margin: 0;
  padding: 8px 0;
  display: block;
  width: 100%;
  font-weight: normal;
}
#menu_tabs .control-menu .menu-expand ul.row { /* When there are more than 15 options */
  width: 400px;
  left: auto !important;
  right: -11px;
  margin-right: 10px;
  box-sizing: content-box;
}
#menu_tabs .control-menu .menu-expand ul.row li {
  float: left;
  width: 200px;
}
#menu_tabs .control-menu .menu-expand ul li:first-child {
  border-top: 0;
}
#menu_tabs .control-menu .menu-expand ul.row li:nth-child(1),
#menu_tabs .control-menu .menu-expand ul.row li:nth-child(2) {
  border-top: 0;
}
#menu_tabs .control-menu .mdi,
#menu_tabs .control-menu .iconify--mdi {
  color: var(--primary-color);
}
#menu_tabs .control-menu .mdi:hover,
#menu_tabs .control-menu .iconify--mdi:hover {
  color: var(--primary-color-hover);
}
#menu_tabs .control-menu .mdi.disabled,
#menu_tabs .control-menu .mdi.disabled:hover,
#menu_tabs .control-menu .iconify--mdi.disabled,
#menu_tabs .control-menu .iconify--mdi.disabled:hover {
  opacity: 0.5 !important;
  color: #fff !important;
  cursor: default;
}
#menu_tabs .control-menu ul {
  left: auto !important;
  right: 0;
}
#menu_tabs .control-menu .menu-expand ul li {
  list-style: none;
  text-align: left;
  border-top: 1px solid #d1d1d1;
}
#menu_tabs .control-menu .menu-expand ul li:hover {
  background: #f5f5f5;
}
#menu_tabs .control-menu .menu-expand ul li.border { /* This and the following is for when the number of elements is odd, add an empty item */
  border-top: 1px solid #d1d1d1;
}
#menu_tabs .control-menu .menu-expand ul li.border:before {
  content: "" !important;
}
#menu_tabs .control-menu .menu-expand ul li a {
  display: flex;
  padding-right: 10px;
}
#menu_tabs .control-menu .menu-expand ul li a:before {
  font: 12px "Material Design Icons";
  content: "\f040a";
  color: #8d8d8d;
  margin-right: 5px;
  margin-left: 10px;
  margin-top: 4px;
  display: inline-block;
}
#menu_tabs .control-menu .mdi.disabled,
#menu_tabs .control-menu .mdi.disabled:hover,
#menu_tabs .control-menu .iconify--mdi.disabled,
#menu_tabs .control-menu .iconify--mdi.disabled:hover {
  opacity: 0.5 !important;
  color: #fff !important;
  cursor: default;
}
#menu_tabs > .icons > ul > li:not(:last-child) {
  margin-right: 0.5rem;
}
#menu_tabs .icons > ul.nav > li span {
  display: block;
  margin: 7px 0 0 0;
}

/***************************************/
/*************** Tabs ******************/
/***************************************/
main ul.tabs {
  display: flex;
  list-style: none;
  width: 100%;
  border-radius: 5px 0 -50px 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

main ul.tabs li {
  height: 45px;
  line-height: 45px;
  border: 1px solid rgba(var(--primary-color-rgb), 0.125);
  position: relative;
  background: var(--primary-color-lighter);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 0 5px 0 0;
  padding: 0 15px;
}

main ul.tabs li .mdi:before,
main ul.tabs li .iconify--mdi:before {
  color: var(--primary-color);
}

main ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  border: 0;
  outline: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 0 20px;
}

main ul.tabs li:hover {
  background: rgba(var(--primary-color-rgb), 0.2);
}

main ul.tabs li.active,
main ul.tabs li.active a:hover {
  background: #fff;
  border-bottom: 1px solid #fff;
}

main .tabContainer {
  border: 1px solid rgba(0, 0, 0, 0.125);
  overflow: hidden;
  clear: both;
  float: left;
  width: 100%;
  background: #fff;
  border-radius: 5px;
  border-top-left-radius: 0;
  margin: -1px 0;
}

main .tabContainer {
  padding: 0;
}

main .tabContent {
  padding: 20px;
  min-height: 30px;
}

/* Simple tabs adapted to the integral view */
main #integral_view,
main #integral_view .block {
  padding: 0;
  margin: 0;
}

main .integral_view ul.tabs li a {
  padding: 0;
}

main .integral_view ul.tabs li strong {
  padding: 0 12px;
  color: var(--primary-color);
  font-size: 15px;
}

main .integral_view ul.tabs li .mdi:before,
main .integral_view ul.tabs li .iconify--mdi:before {
  padding: 2px 8px;
  color: rgba(var(--primary-color-rgb), 0.6);
  font-size: 25px;
}

main .integral_view ul.tabs li a:hover .mdi,
main .integral_view ul.tabs li a:hover .iconify--mdi {
  color: #939292;
}

main .integral_view ul.tabs li.active .mdi,
main .integral_view ul.tabs li.active .iconify--mdi,
main .integral_view ul.tabs li.active strong,
main .integral_view ul.tabs li.active a:hover .mdi,
main .integral_view ul.tabs li.active a:hover .iconify--mdi,
main .integral_view ul.tabs li.active a:hover strong {
  color: #000;
  font-size: 15px;
}

main .integral_view div[id^=tab_cases] .slide p,
main .integral_view div[id^=tab_task] .slide p {
  margin-left: 65px;
}

main .integral_view div[id^=tab_cases] .slide p a,
main .integral_view div[id^=tab_task] .slide p a {
  margin-left: -15px;
}

/* The slides can appear in the main tab or in the interior ones, I do not prefix them */
main .integral_view .tabContent .slide {
  width: 100%;
  margin: 5px 0 -20px 0;
}

main .integral_view .tabContent .sub {
  display: block;
  margin: 0 0 0 30px;
  width: 100%;
}

main .integral_view .tabContent p {
  width: 100%;
}

main .integral_view .tabContent .slide span {
  display: block;
  clear: both;
  cursor: default;
}

main .integral_view .tabContent .slide span {
  margin: 5px 0 5px 5px;
}

main .integral_view .tabContent .slide span.closed,
main .integral_view .tabContent .slide span.opened {
  cursor: pointer;
  margin-left: 20px;
}

main .integral_view .tabContent .slide span:before {
  font-size: 15px;
  content: "-";
  padding-right: 5px;
  color: #000;
}

main .integral_view .tabContent .slide span[class^=estado] {
  display: initial;
  clear: initial;
  margin: initial;
  font-weight: bold;
}

main .integral_view .tabContent .slide span[class^=estado]:before {
  content: initial;
}

main .integral_view .tabContent .slide span.opened:before {
  font: 15px "Material Design Icons";
  content: "\f0140";
}

main .integral_view .tabContent .slide span.closed:before {
  font: 15px "Material Design Icons";
  content: "\f0142";
}

main .integral_view .tabContent .slide p {
  clear: both;
  float: left;
  width: 80%;
  margin-left: 50px;
  margin-right: -115px;
}

main .integral_view .tabContent .slide p .mdi,
main .integral_view .tabContent .slide p .mdi:hover,
main .integral_view .tabContent .slide p .iconify--mdi,
main .integral_view .tabContent .slide p .iconify--mdi:hover {
  font-size: 10px;
}

main .integral_view .tabContent .slide p a {
  overflow-wrap: break-word;
}

main .integral_view .tabContent .slide p a:before {
  font: 10px "Material Design Icons";
  content: "\f05b0";
  padding-right: 5px;
  color: #989797;
}

main .integral_view .tabContent .slide p strong {
  padding: 0 0 0 20px;
  margin: 0 0 0 -20px;
  word-break: break-all;
}

/**/
main .integral_view .tabContent.tab_summary .left {
  float: left;
  width: calc(59% - 20px);
  margin: 0 0 10px 0;
}

main .integral_view .tabContent.tab_summary .right {
  float: left;
  width: 40%;
  border-left: 1px solid #dedede;
  padding-left: 20px;
  margin-bottom: 20px;
}

main .integral_view .tabContent.tab_summary .left span[class*=ico_] {
  font-size: 18px;
  padding: 0 10px;
  line-height: 20px;
  display: block;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

main .integral_view .tabContent.tab_summary .left span[class*=ico_]:before {
  font: 20px "Material Design Icons";
  padding-right: 5px;
  color: var(--primary-color);
}

main .integral_view .tabContent.tab_summary .left span.ico_interactions:before {
  content: "\f0182";
}

main .integral_view .tabContent.tab_summary .left span.ico_cases:before {
  content: "\f0224";
}

main .integral_view .tabContent.tab_summary .left span.ico_tasks:before {
  content: "\f014d";
}

main .integral_view .tabContent.tab_summary .left span.ico_attachments:before {
  content: "\f039b";
}

main .integral_view .tabContent.tab_summary .left span.ico_paymentAgreement:before {
  content: "\f0a4f";
}

main .integral_view .tabContent.tab_summary .left span.ico_campaigns:before {
  content: "\f05dd";
}

main .integral_view .tabContent.tab_summary .left span.ico_products:before {
  content: "\f03d7";
}

main .tabContent.tab_summary .left span.ico_contracts:before {
  content: "\f03ea";
}

main .integral_view .tabContent.tab_summary .left hr {
  margin: 10px 20px 10px 0;
}

main .tabContent.tab_summary .left span.ico_debt:before {
  content: "\f05e4";
}

/* Comparator */
.popUpIframeElementCompare #menu_tabs {
  display: none;
}

@media (min-width: 1201px) {
  #menu_tabs .maxmin {
    display: block;
  }
}
/**********************/
/**** Timeline CRM ****/
/**********************/
.timeline {
  position: relative;
  margin: 0 0 0 20px;
}

.timeline .timeline-block {
  position: relative;
  min-height: 16px;
  padding-left: 35px;
  padding-right: 35px;
}

.timeline .timeline-block::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
}

.timeline .timeline-last-block::before,
.timeline .timeline-block:last-child::before {
  display: none;
}

.timeline .timeline-block::after {
  content: "";
  display: table;
  clear: both;
}

.timeline .timeline-ico .mdi,
.timeline .timeline-ico .iconify--mdi {
  display: block;
  color: var(--primary-color) !important;
}

.timeline .timeline-ico {
  position: absolute;
  min-width: 1px;
  min-height: 1px;
  left: 0;
  top: 0;
}

.timeline .timeline-block::before {
  width: 2px;
  background: var(--primary-color);
  margin-left: -2px;
}

.timeline .timeline-block {
  padding-bottom: 40px;
}

.timeline .timeline-last-block {
  padding-bottom: 10px !important;
}

.timeline .timeline-ico {
  padding: 0;
  top: -10px;
  width: 25px;
  height: 58px;
  color: var(--primary-color);
  text-align: center;
  font-size: 24px;
  transform: rotate(180deg);
}

.timeline .timeline-ico > span:first-of-type {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid var(--primary-color);
  box-sizing: content-box;
  transform: none;
  border-radius: 50%;
  background: #fff;
  left: 2px;
  top: 5px;
}

.timeline .timeline-ico .mdi,
.timeline .timeline-ico .iconify--mdi {
  display: block;
  line-height: 23px;
  font-size: 1em;
  position: relative;
  top: 6px;
  transform: rotate(180deg);
}

.timeline .timeline-ico {
  margin-right: -31px;
}

.timeline-content-inner {
  position: relative;
  word-break: break-all;
}

.timeline-content-inner p.date {
  margin: 0 0 5px;
  font-weight: bold;
  color: var(--primary-color);
}

.timeline-content-inner p {
  margin: 0;
  color: #000;
  line-height: 20px;
}

/**/
.timeline .timeline-block.passed .timeline-ico span {
  border: 2px solid var(--primary-color);
}

.timeline .timeline-block.passed .timeline-ico .mdi:before,
.timeline .timeline-block.passed .timeline-ico .iconify--mdi:before {
  color: var(--primary-color);
}

.timeline .timeline-block.passed:before {
  background-image: linear-gradient(var(--primary-color-rgb) 100%, rgba(255, 255, 255, 0) 0%) !important;
}

/**/
.timeline .timeline-block.not_passed .timeline-ico span {
  border: 2px solid var(--primary-color);
}

.timeline .timeline-block.not_passed .timeline-ico .mdi:before,
.timeline .timeline-block.not_passed .timeline-ico .iconify--mdi:before {
  color: var(--primary-color);
}

.timeline .timeline-block.not_passed:before {
  background: linear-gradient(to bottom, var(--primary-color) 70%, #ccc 70%, #ccc 50%, #ccc 50%);
}

/**/
.timeline .timeline-block.empty .timeline-ico span {
  border: 2px solid #ccc;
}

.timeline .timeline-block.empty .timeline-ico .mdi:before,
.timeline .timeline-block.empty .timeline-ico .iconify--mdi:before {
  color: #ccc;
}

.timeline .timeline-block.empty:before {
  background-image: linear-gradient(#ccc 100%, rgba(255, 255, 255, 0) 0%) !important;
}

/**********************/
/**** Timeline Portal ****/
/**********************/
.timeline-container {
  position: relative;
  margin: 5rem 0 0 20px;
  --inactive-color: #6c6c6c;
  --inactive-border-color: #bbb;
  /* list-group-item */
}

.timeline-container .clickable {
  cursor: pointer;
}

.timeline-container .clickable:hover {
  text-decoration: underline;
}

.timeline-container h2 {
  color: var(--inactive-color);
  margin-bottom: 1.6rem;
  margin-left: -35px;
  line-height: 25px;
  padding-left: 32px;
  padding-bottom: 10px;
  border-left: 4px solid var(--inactive-border-color);
}

.timeline-container .timeline-ico {
  position: absolute;
  min-width: 1px;
  min-height: 1px;
  left: 0;
  padding: 0;
  top: -10px;
  width: 25px;
  height: 58px;
  text-align: center;
  font-size: 24px;
  transform: none;
  z-index: 666;
}

.timeline-container .timeline-ico span {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid var(--primary-color);
  box-sizing: content-box;
  transform: none;
  border-radius: 50%;
  left: 2px;
  top: 5px;
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
  background: var(--inactive-border-color);
}

.timeline-container .timeline-block {
  position: relative;
  min-height: 16px;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 25px;
}

.timeline-container .timeline-block h2 {
  border-left: 4px solid transparent;
}

.timeline-container .timeline-block .ok {
  background: #8d90a6;
  display: block;
  color: var(--primary-color);
  font-size: 25px;
  font-weight: bold;
  transform: none;
}

.timeline-container .timeline-block.passed h2 {
  border-left: 4px solid var(--primary-color);
  color: var(--primary-color);
}

.timeline-container .timeline-block.passed .clickable {
  color: #ddd;
}

.timeline-container .timeline-block.passed .ok {
  background: var(--primary-color);
}

.timeline-container .timeline-block.passed .ok .mdi::before,
.timeline-container .timeline-block.passed .ok .iconify--mdi::before {
  color: var(--primary-color-contrast-text);
}

.timeline-container .timeline-block.passed .number {
  background: #ddd;
  color: #777;
}

.timeline-container .timeline-block.passed .timeline-ico span {
  border: 0;
}

.timeline-container .timeline-block.passed .list-group-item {
  background: none;
  color: #ddd;
  border-left: 4px solid var(--inactive-border-color);
}

.timeline-container .timeline-block.passed .list-group-item.passed {
  background: none;
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
}

.timeline-container .timeline-block.passed .list-group-item.passed:after {
  color: var(--primary-color);
}

.timeline-container .timeline-block.passed.alone .timeline-ico .mdi:before,
.timeline-container .timeline-block.passed.alone .timeline-ico .iconify--mdi:before {
  color: var(--primary-color-contrast-text);
  font-size: 25px;
  display: block;
  margin-top: -12px;
}

.timeline-container .timeline-block.passed.alone .timeline-ico {
  top: 0;
}

.timeline-container .timeline-block.passed.alone .timeline-ico span {
  border: 0;
}

.timeline-container .timeline-block.active h2 {
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
}

.timeline-container .timeline-block.disabled h2 {
  border-left: 4px solid var(--inactive-border-color);
}

.timeline-container .timeline-block.active.alone h2, .timeline-container .timeline-block.disabled.alone h2, .timeline-container .timeline-block.passed.alone h2 {
  border-left: 4px solid transparent;
}

.timeline-container .timeline-block.active .number, .timeline-container .timeline-block.passed .number {
  background: var(--primary-color);
  color: var(--primary-color-contrast-text);
}

.timeline-container .timeline-content-inner {
  margin-left: 20px;
}

.timeline-container .list-group {
  position: relative;
  top: -21px;
}

.timeline-container li {
  color: var(--primary-color);
  background: inherit;
  font-size: 13px;
  padding: 0 0 0.5rem;
}

.timeline-container .list-group-item {
  color: var(--inactive-color);
  padding: 0 10px 0rem 0;
  padding-left: 0px;
  border: 0;
  border-left-color: currentcolor;
  border-left-style: none;
  border-left-width: 0px;
  min-width: 200px;
  margin-left: -35px;
  border-left: 4px solid var(--inactive-border-color);
  line-height: 25px;
  padding-left: 35px;
}

.timeline-container .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.timeline-container .list-group-item:last-child {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.timeline-container .list-group-item.active {
  background: none;
  border-left: 4px solid var(--primary-color);
  font-weight: bold !important;
  color: var(--primary-color);
}

.timeline-container .list-group-item.passed {
  background: none;
  color: var(--primary-color);
  border-left: 4px solid var(--primary-color);
}

.timeline-container .list-group-item.passed:after {
  content: "\f012c";
  font: 16px "Material Design Icons";
  line-height: 0;
  margin-left: 5px;
  color: var(--primary-color);
}

.token-selector {
  box-sizing: border-box !important;
  padding: 10px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

.mdi-json {
  position: absolute;
  top: 8px;
  right: 3px;
  font-size: 17px;
  float: right;
}

a[class*=tokenTemplatesButton-] span.cke_button_icon::before {
  content: "\f0626";
  font: normal normal normal 16px/1 "Material Design Icons";
}

body.widget {
  background: #fff;
  background-image: none;
  padding: 0;
}

body.widget main [class^=container] {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

body.widget main [class^=container] > form,
body.widget main [class^=container] > form #main {
  width: 100%;
}

body.widget .jmesa.caption_top {
  padding-top: 0;
}

body.widget .jmesa caption {
  display: none;
}

body.widget #legend {
  display: none;
}

.body.widget main #content #main {
  width: 100%;
  padding: 0 !important;
}

.body.widget #content {
  width: 100%;
  max-width: 100%;
}

.ribbon_container {
  position: relative;
  background: #eee;
}

.ribbon_container .ribbon {
  position: fixed;
  left: -5px;
  top: -5px;
  z-index: 665;
}

body.maximize .ribbon_container .ribbon {
  position: relative;
  left: -5px;
  top: -5px;
  z-index: 665;
}

.ribbon_container .ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgb(0, 0, 0);
  position: absolute;
  top: 19px;
  left: -21px;
}

.ribbon_container .ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}

.ribbon_container .ribbon span::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
}

.ribbon_container .ribbon span.blue,
.ribbon_container .ribbon span.red,
.ribbon_container .ribbon span.gray,
.ribbon_container .ribbon span.cian,
.ribbon_container .ribbon span.orange {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  position: absolute;
  top: 19px;
  left: -21px;
  box-shadow: 0 3px 10px -5px rgb(0, 0, 0);
}

.ribbon_container .ribbon span.blue::before,
.ribbon_container .ribbon span.blue::after,
.ribbon_container .ribbon span.red::before,
.ribbon_container .ribbon span.red::after,
.ribbon_container .ribbon span.gray::before,
.ribbon_container .ribbon span.gray::after,
.ribbon_container .ribbon span.cian::before,
.ribbon_container .ribbon span.cian::after,
.ribbon_container .ribbon span.orange::before,
.ribbon_container .ribbon span.orange::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
}

.ribbon_container .ribbon span.blue {
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
}

.ribbon_container .ribbon span.blue::before {
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}

.ribbon_container .ribbon span.blue::after {
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
}

.ribbon_container .ribbon span.red {
  background: #79A70A;
  background: linear-gradient(#F70505 0%, #8F0808 100%);
}

.ribbon_container .ribbon span.red::before {
  border-left: 3px solid #8F0808;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F0808;
}

.ribbon_container .ribbon span.red::after {
  border-left: 3px solid transparent;
  border-right: 3px solid #8F0808;
  border-bottom: 3px solid transparent;
}

.ribbon_container .ribbon span.gray {
  background: #79A70A;
  background: linear-gradient(#B6BAC9 0%, #808080 100%);
}

.ribbon_container .ribbon span.gray::before {
  border-left: 3px solid #808080;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #808080;
}

.ribbon_container .ribbon span.gray::after {
  border-left: 3px solid transparent;
  border-right: 3px solid #808080;
  border-bottom: 3px solid transparent;
}

.ribbon_container .ribbon span.cian {
  background: #79A70A;
  background: linear-gradient(#05EFF7 0%, #087F8F 100%);
}

.ribbon_container .ribbon span.cian::before {
  border-left: 3px solid #087F8F;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #087F8F;
}

.ribbon_container .ribbon span.cian::after {
  border-left: 3px solid transparent;
  border-right: 3px solid #087F8F;
  border-bottom: 3px solid transparent;
}

.ribbon_container .ribbon span.orange {
  background: #79A70A;
  background: linear-gradient(#F79E05 0%, #8F5408 100%);
}

.ribbon_container .ribbon span.orange::before {
  border-left: 3px solid #8F5408;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #8F5408;
}

.ribbon_container .ribbon span.orange::after {
  border-left: 3px solid transparent;
  border-right: 3px solid #8F5408;
  border-bottom: 3px solid transparent;
}

@media (max-width: 991px) {
  .ribbon_container .ribbon {
    position: relative;
    left: -5px;
    top: -5px;
    z-index: 665;
  }
  .ribbon_container .ribbon {
    position: fixed;
    left: -5px;
    top: -5px;
    z-index: 665;
  }
}
body.main #navbar {
  background: transparent;
  padding: 0;
}

body.main #navbar .iconsLeft .mdi-home {
  display: block;
  pointer-events: none;
}

body.main #navbar .iconsLeft .mdi-home:hover {
  cursor: default;
}

#navbar {
  padding: 0 0 5px 0;
  display: flex;
  flex: 0 0 100%;
  padding: 10px 30px;
  background-color: #fff;
}

#navbar ul {
  margin: 3px 0 0 0;
}

#navbar ul li {
  list-style: none;
  float: left; /* It cannot be display:inline because hidden elements are shown (hamburgers) */
}

#navbar ul.breadCrumbs {
  max-width: 1165px; /* If the width is put in #navbar there are problems in IE10 */
  margin: 0;
}

#navbar ul.breadCrumbs li {
  padding: 5px;
}

#navbar ul.breadCrumbs li:not(:last-child):after {
  content: "\f040a";
  font: 15px "Material Design Icons";
  color: #000;
  margin: 0 10px;
}

#navbar ul.iconsLeft {
  display: flex;
}

#navbar ul.iconsLeft .mdi,
#navbar ul.iconsLeft .iconify--mdi {
  float: left;
  margin-right: 5px;
}

#navbar ul.iconsRight {
  display: flex;
  margin-left: auto;
}

#navbar ul.iconsRight .mdi,
#navbar ul.iconsRight .iconify--mdi {
  margin-left: 5px;
}

#navbar .mdi,
#navbar .iconify--mdi {
  font-size: 22px;
  display: block;
}

#navbar .iconify--mdi:hover,
#navbar .mdi:hover {
  color: var(--primary-color-hover);
}

#navbar .iconsLeft,
#navbar .iconsRight {
  float: left;
  margin: 0;
}

#navbar .mdi-eye-off.hide {
  display: none !important;
}

/* OC-CHAT */
.oc-chat-open-container {
  z-index: 1000 !important;
  cursor: pointer;
}

.oc-chat-open-container .mdi,
.oc-chat-open-container .iconify--mdi {
  color: #fff;
}

.oc-chat-container {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  width: 300px;
  height: 496px;
  border-radius: 8px;
  margin: 1rem;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
  display: flex;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.oc-chat-container-landscape {
  height: 496px;
  border-radius: 5px;
  margin: 1rem;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.oc-chat-header {
  font-size: 11px;
  line-height: 23px;
  font-weight: bold;
  color: #fff;
  padding: 3px 10px;
  box-sizing: border-box;
  border-radius: 8px 8px 0px 0px;
}

.oc-chat-header .title {
  font-size: 14px;
}

.oc-chat-header-icon {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: color 0.5s;
}

.oc-chat-header-icon:hover {
  color: #eee;
}

.oc-chat-header-icon-arrow {
  font-size: 25px;
}

.oc-chat-header select {
  font-size: 11px;
  width: 40%;
  border: 0;
  float: right;
  margin-right: 5px;
}

.oc-chat-users-connected-landscape {
  font-size: 11px !important;
  color: #fff;
  display: flex;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  min-height: 35px;
  align-items: center;
}

.oc-chat-users-connected-landscape .mdi,
.oc-chat-users-connected-landscape .iconify--mdi {
  font-size: 11px !important;
  color: #9EFF9A !important;
  margin-top: -3px !important;
  display: inline-block;
}

.oc-chat-users-connected {
  font-size: 11px !important;
  line-height: 10px !important;
  color: #fff;
  padding: 0px 5px 1px;
  box-sizing: border-box;
  display: flex;
}

.oc-chat-users-connected .mdi,
.oc-chat-users-connected .iconify--mdi {
  font-size: 11px !important;
  color: #9EFF9A !important;
}

/* CHAT BODY */
.oc-chat-body {
  padding: 4px 10px;
  height: 100%;
  background: url("../../../images/chat.png");
  overflow-y: auto;
  width: 100%;
  user-select: text;
}

.oc-chat-select {
  padding: 4px 15px;
  height: 100%;
  background: url("../../../images/chat.png");
  overflow-y: auto;
  width: 100%;
  border-radius: 0px 0px 8px 8px;
  display: flex;
}

.oc-chat-sub-interaction {
  list-style: none;
  margin-top: 10px;
  position: relative;
}

/* left */
.oc-chat-sub-interaction .arrow-left {
  position: absolute;
  top: 0px;
  left: 57px;
  bottom: 150px;
  border: 15px solid transparent;
  border-top-color: #fff;
}

.left-sub-interaction .user {
  line-height: 10px;
  margin: 0px 10px 0 7px;
  text-align: center;
  font-size: 25px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #000;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-sub-interaction {
  overflow: hidden;
}

.left-sub-interaction p {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  float: left;
  width: calc(100% - 75px);
  margin-bottom: 20px;
}

.left-sub-interaction p .mdi,
.left-sub-interaction p .iconify--mdi {
  float: none;
}

.left-sub-interaction span {
  position: absolute;
  left: 70px;
  top: 60px;
  color: #B7BCC5;
}

.left-sub-interaction p {
  color: #000;
}

/* right */
.right-sub-interaction .mdi .right-sub-interaction .iconify--mdi {
  font-size: 17px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0px 10px;
  text-align: center;
  float: right;
  line-height: 11px;
}

.oc-chat-sub-interaction .arrow-right {
  position: absolute;
  top: 0px;
  right: 55px;
  bottom: 150px;
  border: 15px solid transparent;
}

.right-sub-interaction .user {
  /*! line-height: 10px; */
  margin: 0px 10px;
  text-align: center;
  font-size: 25px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #000;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-sub-interaction {
  overflow: hidden;
}

.right-sub-interaction p {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  float: left;
  width: calc(100% - 185px);
  margin-bottom: 20px;
}

.right-sub-interaction p .mdi,
.right-sub-interaction p .iconify--mdi {
  float: none;
}

.right-sub-interaction span {
  position: absolute;
  left: 70px;
  top: 60px;
  color: #B7BCC5;
}

.right-sub-interaction span {
  left: 45px;
}

.right-sub-interaction p {
  float: right !important;
  color: #fff;
}

.right-sub-interaction .mdi .mdi-comment-processing:before,
.right-sub-interaction .iconify--mdi .mdi-comment-processing:before {
  position: absolute;
  right: 16px;
  top: 10px;
}

.right-sub-interaction .mdi,
.right-sub-interaction .iconify--mdi {
  font-size: 25px !important;
}

.right-sub-interaction a:hover {
  text-decoration: underline;
}

/**/
.right-sub-interaction.telegram .arrow-right {
  border-top-color: #2fa3df;
}

.right-sub-interaction.telegram p,
.right-sub-interaction.telegram .mdi,
.right-sub-interaction.telegram .iconify--mdi {
  background: #2fa3df;
  color: #fff !important;
}

.right-sub-interaction.telegram a {
  color: #fff !important;
}

/**/
.right-sub-interaction.twitter .arrow-right {
  border-top-color: #00aced !important;
}

.right-sub-interaction.twitter p,
.right-sub-interaction.twitter .mdi,
.right-sub-interaction.twitter .iconify--mdi {
  background: #00aced;
  color: #fff !important;
}

.right-sub-interaction.twitter a {
  color: #fff !important;
}

/**/
.right-sub-interaction.facebook .arrow-right {
  border-top-color: #3a589e !important;
}

.right-sub-interaction.facebook p,
.right-sub-interaction.facebook .mdi,
.right-sub-interaction.facebook .iconify--mdi {
  background: #3a589e;
  color: #fff !important;
}

.right-sub-interaction.facebook a {
  color: #fff !important;
}

/**/
.right-sub-interaction.whatsapp .arrow-right {
  border-top-color: #e6fdcf !important;
}

.right-sub-interaction.whatsapp p,
.right-sub-interaction.whatsapp .mdi,
.right-sub-interaction.whatsapp .iconify--mdi {
  background: #e6fdcf;
  color: #3e423b !important;
}

.right-sub-interaction.whatsapp a {
  color: #3e423b !important;
}

/**/
.oc-chat-separator {
  position: relative;
  text-align: center;
  padding: 10px;
}

.oc-chat-separator label {
  padding: 0 0.4em;
  position: relative;
  margin-bottom: 0;
  background: #f2f2f2;
}

.oc-chat-separator:before {
  content: "";
  border-style: dashed;
  border-width: 0 0 1px 0;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  border-color: #bbb;
}

/* CHAT FOOTER */
.oc-chat-footer {
  box-sizing: border-box;
  border-radius: 0px 0px 8px 8px;
  background: #fff;
}

.oc-chat-footer-input {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #444 !important;
  background-color: #fff;
  background-clip: padding-box;
  border: 0px solid var(--bs-border-color) !important;
  border-radius: 0.25rem;
}

.oc-chat-footer-input:focus {
  outline: 0 !important;
}

.oc-chat-footer-icon {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.5s;
}

/* CHANNEL SELECTION */
.oc-chat-channel-opt {
  background: #E7E7E7;
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
  transition: background 0.5s;
  cursor: pointer;
  margin: 5px 0px;
  width: 100%;
  max-width: 400px;
}

.oc-chat-channel-opt:hover {
  background: #bbb;
}

.oc-chat-channel-opt-selected {
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
  margin: 5px 0px;
  width: 100%;
  max-width: 400px;
  background: #ddd;
}

.oc-chat-channel-opt-icon {
  font-size: 22px;
}

/* END OC-CHAT */
h3 #listCanal {
  margin-top: -5px;
}

.main-section {
  width: 400px;
  position: fixed;
  right: 50px;
  bottom: -350px;
}

.first-section:hover {
  cursor: pointer;
}

.open-more {
  bottom: 0px;
  transition: 2s;
}

.border-chat {
  border: 1px solid #edecec;
  margin: 0px;
  display: inherit;
}

.first-section {
  background-color: #7490b8;
}

.first-section p {
  color: #fff;
  margin: 0px;
  padding: 10px 0px;
}

.first-section p:hover {
  color: #fff;
  cursor: pointer;
}

.right-first-section {
  text-align: right;
}

.right-first-section i {
  color: #fff;
  font-size: 15px;
  padding: 12px 3px;
}

.right-first-section i:hover {
  color: #fff;
}

.chat-section ul li {
  list-style: none;
  margin-top: 10px;
  position: relative;
}

.chat-section {
  overflow-y: auto;
  height: 400px;
}

.chat-section ul {
  padding: 0px;
}

.left-chat .user,
.right-chat .mdi .right-chat .iconify--mdi {
  font-size: 40px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0px 10px;
  text-align: center;
}

.left-chat .user,
.left-chat .user:hover {
  float: left;
}

.left-chat .user {
  line-height: 40px !important;
}

.left-chat .user.old,
.left-chat p.old {
  color: #ccc;
}

.right-chat .mdi,
.right-chat .mdi:hover,
.right-chat .iconify--mdi,
.right-chat .iconify--mdi:hover {
  float: right;
  background: #7490b8;
  color: #fff;
}

.full-chat {
  background: #bbb;
  color: #fff;
  padding: 10px;
  margin: 0 auto;
  width: calc(100% - 20px);
  border-radius: 5px;
  margin-bottom: 30px;
}

.full-chat p {
  float: none !important;
}

.second-section {
  padding: 0px;
  margin: 0px;
  background-color: #F3F3F3;
  height: 400px;
  width: 100%;
}

.left-chat,
.right-chat {
  overflow: hidden;
}

.left-chat p,
.right-chat p {
  background-color: #fff;
  padding: 10px !important;
  color: #000;
  border-radius: 5px;
  float: left;
  width: 60%;
  margin-bottom: 20px !important;
}

.left-chat p .mdi,
.right-chat p .mdi,
.left-chat p .mdi:hover,
.right-chat p .mdi:hover,
.left-chat p .iconify--mdi,
.right-chat p .iconify--mdi,
.left-chat p .iconify--mdi:hover,
.right-chat p .iconify--mdi:hover {
  float: none;
}

.left-chat span,
.right-chat span {
  position: absolute;
  left: 70px;
  top: 60px;
  color: #B7BCC5;
}

.right-chat span {
  left: 45px;
}

.right-chat p {
  float: right !important;
  background-color: #7490b8;
  color: #fff;
}

.third-section {
  background: #fff;
}

.text-bar input {
  width: 80%;
  margin: 0;
  padding: 12px 0 9px;
  border: 0;
  transition: none;
  margin-left: -5px;
}

.text-bar input:focus,
.text-bar input:button {
  outline: none;
}

.text-bar .btn {
  float: right;
  margin-top: 5px;
  margin-right: -10px;
}

.text-bar input:focus,
.text-bar input:active {
  border: 0;
}

.text-bar a i {
  background-color: #7490b8;
  color: #fff;
  width: 30px;
  height: 30px;
  padding: 7px 0px;
  border-radius: 50%;
  text-align: center;
}

.left-chat:before {
  content: " ";
  position: absolute;
  top: 0px;
  left: 65px;
  bottom: 150px;
  border: 15px solid transparent;
  border-top-color: #fff;
}

.right-chat:before {
  content: " ";
  position: absolute;
  top: 0px;
  right: 65px;
  bottom: 150px;
  border: 15px solid transparent;
  border-top-color: #7490b8;
}

.right-chat .mdi.mdi-comment-processing:before,
.right-chat .iconify--mdi.mdi-comment-processing:before {
  position: absolute;
  right: 19px;
  top: 10px;
}

/* Telegram */
.right-chat.telegram:before {
  border-top-color: #2fa3df;
}

.right-chat.telegram p,
.right-chat.telegram .mdi,
.right-chat.telegram .iconify--mdi {
  background: #2fa3df;
}

/* Twitter */
.right-chat.twitter:before {
  border-top-color: #00aced;
}

.right-chat.twitter p,
.right-chat.twitter .mdi,
.right-chat.twitter .iconify--mdi {
  background: #00aced;
}

/* Facebook */
.right-chat.facebook:before {
  border-top-color: #3a589e;
}

.right-chat.facebook p,
.right-chat.facebook .mdi,
.right-chat.facebook .iconify--mdi {
  background: #3a589e;
}

/**/
.right-chat.telegram.opacity,
.right-chat.twitter.opacity,
.right-chat.facebook.opacity,
.right-chat.opacity {
  opacity: 0.4;
}

.chat-separator {
  position: relative;
  text-align: center;
  padding: 10px;
}

.chat-separator label {
  background-color: #f3f3f3;
  padding: 0 0.4em;
  position: relative;
}

.chat-separator:before {
  content: "";
  border-style: dashed;
  border-width: 0 0 1px 0;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  border-color: #bbb;
}

.chat-header {
  margin-bottom: 20px;
}

.chat-header #numConectados {
  float: left;
}

.chat-header #listaConectados {
  list-style: none;
  float: left;
  margin-left: 10px;
}

.chat-header #listaConectados li {
  display: inline-block;
}

/* CUSTOM CHAT */
#chat_channel .chat-section {
  width: 300px;
}

#chat_channel {
  font-size: 11px;
}

#chat_channel select {
  font-size: 11px;
  width: 40%;
  border: 0;
  float: right;
  margin-right: 5px;
}

#chat_channel .title1 {
  font-size: 14px;
}

#chat_channel .title2 {
  font-size: 12px;
}

#chat_channel .title1,
#chat_channel .title2 {
  line-height: 23px;
  font-weight: bold;
  color: #fff;
  background: #7490b8;
  padding: 3px 10px;
  box-sizing: border-box;
}

#chat_channel .title1.bottom,
#chat_channel .title2.bottom {
  width: 300px;
  position: fixed;
  bottom: 0;
  padding: 4px 10px;
  margin: 0 0 0 0;
}

#chat_channel .title1 .mdi,
#chat_channel .title2 .mdi,
#chat_channel .title1 .iconify--mdi,
#chat_channel .title2 .iconify--mdi {
  color: #fff;
  font-size: 18px;
}

#chat_channel .title1 .icons,
#chat_channel .title2 .icons {
  float: right;
}

#chat_channel .title1 .icons .mdi,
#chat_channel .title2 .icons .mdi,
#chat_channel .title1 .icons .iconify--mdi,
#chat_channel .title2 .icons .iconify--mdi {
  color: #fff;
}

#chat_channel .title1 .icons .mdi:hover,
#chat_channel .title2 .icons .mdi:hover,
#chat_channel .title1 .icons .iconify--mdi:hover,
#chat_channel .title2 .icons .iconify--mdi:hover {
  color: #eee;
}

#chat_channel .title1 .icons .close_chat {
  font-size: 18px;
}

#chat_channel .title1 .icons .maximize_chat,
#chat_channel .title2 .icons .maximize_chat {
  display: none;
}

#chat_channel .title1 .icons .minimize_chat,
#chat_channel .title1 .icons .maximize_chat {
  font-size: 25px;
}

#chat_channel .chat {
  padding: 4px 15px;
}

#customChat {
  width: 300px;
  position: fixed;
  right: 0px;
  bottom: 100px;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

#customChat.bottom {
  bottom: -25px;
}

#customChat .btn {
  border: 0;
  background: 0;
  padding: 0 10px;
  cursor: pointer;
  width: 5%;
  margin-right: 0;
}

#customChat .left-chat .user {
  line-height: 10px !important;
  font-size: 15px !important;
  width: 30px !important;
  height: 30px !important;
  color: #000;
}

#customChat .right-chat .mdi,
#customChat .right-chat .iconify--mdi {
  line-height: 11px !important;
  font-size: 17px !important;
  width: 30px !important;
  height: 30px !important;
}

#customChat .right-chat .mdi.mdi-comment-processing:before,
#customChat .right-chat .iconify--mdi.mdi-comment-processing:before {
  position: absolute;
  right: 16px;
  top: 10px;
}

#customChat .left-chat p,
#customChat .right-chat p {
  width: calc(100% - 60px);
}

#customChat .left-chat:before {
  left: 43px;
}

#customChat .right-chat:before {
  right: 42px;
}

#customChat .text-bar input {
  padding: 8px 0 13px 0;
  width: auto;
  margin-left: -5px;
}

.offcanvas-collapse {
  position: fixed;
  z-index: 1030;
  top: 0; /* Height of navbar */
  bottom: 0;
  right: 100%;
  left: -700px;
  width: 700px;
  padding-right: 1rem;
  padding-left: 1rem;
  overflow-y: auto;
  visibility: hidden;
  background-color: white;
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
  transition-property: left, visibility;
}

.offcanvas-collapse {
  align-items: start;
  /*   Adds a subtle drop shadow   */
  -moz-background-clip: padding; /* Firefox 3.6 */
  -webkit-background-clip: padding; /* Safari 4? Chrome 6? */
  background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
  border-right: 5px solid rgba(0, 0, 0, 0.2);
}

.offcanvas-collapse.open {
  left: 0;
  visibility: visible;
}

/* css for calendar */
.task {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 150px;
  bottom: 3px;
  left: calc(50% - 1.5px);
  content: " ";
  display: block;
  background: #3d8eb9;
}

.task.in {
  background: #f64747;
}

.task.out {
  background: #B6B6B6;
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header {
  margin-bottom: 8px;
}

.ui-timepicker-div dl {
  text-align: left;
}

.ui-timepicker-div dl dt {
  height: 25px;
  margin-bottom: -25px;
}

.ui-timepicker-div dl dd {
  margin: 0 10px 10px 65px;
}

.ui-timepicker-div td {
  font-size: 90%;
}

.ui-tpicker-grid-label {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

/* css for datepicker */
.ui-datepicker {
   z-index: 6666 !important;
}

.demoHeaders {
  margin-top: 2em;
}

#dialog_link {
  padding: 0.4em 1em 0.4em 20px;
  text-decoration: none;
  position: relative;
}

#dialog_link span.ui-icon {
  margin: 0 5px 0 0;
  position: absolute;
  left: 0.2em;
  top: 50%;
  margin-top: -8px;
}

ul#icons {
  margin: 0;
  padding: 0;
}

ul#icons li {
  margin: 2px;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  float: left;
  list-style: none;
}

ul#icons span.ui-icon {
  float: left;
  margin: 0 4px;
}

.ui-datepicker-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  margin: 0;
  outline: 0;
}

.ui-datepicker-trigger:hover > .mdi {
  color: #000;
}

/* Alert Window */
.alertSuccess .modal-body,
.alertWarning .modal-body,
.alertDanger .modal-body,
.alertInfo .modal-body,
.alertConfirm .modal-body,
.alertAsync .modal-body,
.alertModal .modal-body {
  z-index: 6666;
}

.alertSuccess .modal-body,
.alertWarning .modal-body,
.alertDanger .modal-body,
.alertInfo .modal-body,
.alertConfirm .modal-body,
.alertAsync .modal-body,
.alertModal .modal-body {
  text-align: center;
  padding: 2rem 2rem 0;
}

.alertSuccess .modal-body .icon,
.alertWarning .modal-body .icon,
.alertDanger .modal-body .icon,
.alertInfo .modal-body .icon,
.alertConfirm .modal-body .icon,
.alertAsync .modal-body .icon,
.alertModal .modal-body .icon {
  margin-bottom: 1rem;
}

.alertSuccess .modal-body .icon:before,
.alertWarning .modal-body .icon:before,
.alertDanger .modal-body .icon:before,
.alertInfo .modal-body .icon:before,
.alertConfirm .modal-body .icon:before,
.alertAsync .modal-body .icon:before,
.alertModal .modal-body .icon:before {
  font: 85px "Material Design Icons";
}

.alertSuccess .modal-body .icon::before {
  content: "\f05e1";
  color: #d1e7dd;
}

.alertWarning .modal-body .icon::before {
  content: "\f002a";
  color: #664d03;
}

.alertDanger .modal-body .icon::before {
  content: "\f0376";
  color: #f8d7da;
}

.alertInfo .modal-body .icon::before {
  content: "\f02fc";
  color: #cff4fc;
}

.alertConfirm .modal-body .icon::before {
  content: "\f0185";
}

.alertAsync .modal-body .icon::before {
  content: "\f05e1";
}

.alertSuccess .modal-footer,
.alertWarning .modal-footer,
.alertDanger .modal-footer,
.alertInfo .modal-footer,
.alertConfirm .modal-footer,
.alertAsync .modal-footer,
.alertModal .modal-footer {
  border-top: 0;
  padding: 2rem;
}

.alertSuccess .btn-close,
.alertWarning .btn-close,
.alertDanger .btn-close,
.alertInfo .btn-close,
.alertConfirm .btn-close,
.alertAsync .btn-close,
.alertModal .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
}

.alertSuccess h5,
.alertWarning h5,
.alertDanger h5,
.alertInfo h5,
.alertConfirm h5,
.alertAsync h5,
.alertModal h5 {
  font-size: 1.75rem;
  color: #000;
}

.alertSuccess .modal-content,
.alertWarning .modal-content,
.alertDanger .modal-content,
.alertInfo .modal-content,
.alertConfirm .modal-content,
.alertAsync .modal-content,
.alertModal .modal-content {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Animate Icon */
.screenAlert-icon {
  border-radius: 50%;
  border: 4px solid gray;
  box-sizing: content-box;
  height: 80px;
  margin: 20px auto;
  padding: 0;
  position: relative;
  width: 80px;
}
.screenAlert-icon + .screenAlert-icon {
  margin-top: 50px;
}

/* Success */
.alertSuccess .modal-body {
  border-top: 5px solid #A5DC86;
}

.screenAlert-icon.screenAlert-success {
  border-color: #A5DC86;
}
.screenAlert-icon.screenAlert-success:after {
  background-color: transparent !important;
  content: "";
  height: 120px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 60px;
}
.screenAlert-icon.screenAlert-success:before {
  background-color: transparent !important;
  content: "";
  height: 120px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 60px;
  border-radius: 120px 0 0 120px;
  left: -33px;
  top: -7px;
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.screenAlert-icon.screenAlert-success:after {
  border-radius: 0 120px 120px 0;
  left: 30px;
  top: -11px;
  -webkit-transform-origin: 0 60px;
  transform-origin: 0 60px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.screenAlert-icon.screenAlert-success .screenAlert-placeholder {
  border-radius: 50%;
  border: 4px solid rgba(165, 220, 134, 0.2);
  box-sizing: content-box;
  height: 80px;
  left: -4px;
  position: absolute;
  top: -4px;
  width: 80px;
  z-index: 2;
}
.screenAlert-icon.screenAlert-success .screenAlert-line {
  background-color: #A5DC86;
  border-radius: 2px;
  display: block;
  height: 5px;
  position: absolute;
  z-index: 2;
}
.screenAlert-icon.screenAlert-success .screenAlert-line.screenAlert-tip {
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 25px;
}
.screenAlert-icon.screenAlert-success .screenAlert-line.screenAlert-long {
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 47px;
}

.animateSuccessTip {
  -webkit-animation: animateSuccessTip 0.75s;
  animation: animateSuccessTip 0.75s;
}

.animateSuccessLong {
  -webkit-animation: animateSuccessLong 0.75s;
  animation: animateSuccessLong 0.75s;
}

/* Animate Success */
@-webkit-keyframes animateSuccessTip {
  0%, 54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animateSuccessTip {
  0%, 54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@-webkit-keyframes animateSuccessLong {
  0%, 65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@keyframes animateSuccessLong {
  0%, 65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
/* Danger */
.alertDanger .modal-body {
  border-top: 5px solid #F27474;
}

.screenAlert-icon.screenAlert-danger {
  border-color: #F27474;
}
.screenAlert-icon.screenAlert-danger:after {
  background-color: transparent !important;
  content: "";
  height: 120px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 60px;
}
.screenAlert-icon.screenAlert-danger:before {
  background-color: transparent !important;
  content: "";
  height: 120px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 60px;
  border-radius: 120px 0 0 120px;
  left: -33px;
  top: -7px;
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.screenAlert-icon.screenAlert-danger:after {
  border-radius: 0 120px 120px 0;
  left: 30px;
  top: -11px;
  -webkit-transform-origin: 0 60px;
  transform-origin: 0 60px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.screenAlert-icon.screenAlert-danger .screenAlert-placeholder {
  border-radius: 50%;
  border: 4px solid rgba(165, 220, 134, 0.2);
  box-sizing: content-box;
  height: 80px;
  left: -4px;
  position: absolute;
  top: -4px;
  width: 80px;
  z-index: 2;
}
.screenAlert-icon.screenAlert-danger .screenAlert-line {
  background-color: #A5DC86;
  border-radius: 2px;
  display: block;
  height: 5px;
  position: absolute;
  z-index: 2;
}
.screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-tip {
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 25px;
}
.screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-long {
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 47px;
}
.screenAlert-icon.screenAlert-danger .screenAlert-x-mark {
  display: block;
  position: relative;
  z-index: 2;
}
.screenAlert-icon.screenAlert-danger .screenAlert-placeholder {
  border: 4px solid rgba(200, 0, 0, 0.2);
}
.screenAlert-icon.screenAlert-danger .screenAlert-line {
  background-color: #F27474;
  top: 37px;
  width: 47px;
}
.screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-left {
  left: 17px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.screenAlert-icon.screenAlert-danger .screenAlert-line.screenAlert-right {
  right: 16px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.animateXLeft {
  -webkit-animation: animateXLeft 0.75s;
  animation: animateXLeft 0.75s;
}

.animateXRight {
  -webkit-animation: animateXRight 0.75s;
  animation: animateXRight 0.75s;
}

/* Animate Danger */
@-webkit-keyframes animateXLeft {
  0%, 65% {
    left: 82px;
    top: 95px;
    width: 0;
  }
  84% {
    left: 14px;
    top: 33px;
    width: 47px;
  }
  100% {
    left: 17px;
    top: 37px;
    width: 47px;
  }
}
@keyframes animateXLeft {
  0%, 65% {
    left: 82px;
    top: 95px;
    width: 0;
  }
  84% {
    left: 14px;
    top: 33px;
    width: 47px;
  }
  100% {
    left: 17px;
    top: 37px;
    width: 47px;
  }
}
@-webkit-keyframes animateXRight {
  0%, 65% {
    right: 82px;
    top: 95px;
    width: 0;
  }
  84% {
    right: 14px;
    top: 33px;
    width: 47px;
  }
  100% {
    right: 16px;
    top: 37px;
    width: 47px;
  }
}
@keyframes animateXRight {
  0%, 65% {
    right: 82px;
    top: 95px;
    width: 0;
  }
  84% {
    right: 14px;
    top: 33px;
    width: 47px;
  }
  100% {
    right: 16px;
    top: 37px;
    width: 47px;
  }
}
/* Warning */
.alertWarning .modal-body {
  border-top: 5px solid #F8BB86;
}

.screenAlert-icon.screenAlert-warning {
  border-color: #F8BB86;
}
.screenAlert-icon.screenAlert-warning:before {
  -webkit-animation: pulseWarning 2s linear infinite;
  animation: pulseWarning 2s linear infinite;
  background-color: transparent !important;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
}
.screenAlert-icon.screenAlert-warning:after {
  background-color: transparent !important;
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.screenAlert-icon.screenAlert-warning .screenAlert-body {
  background-color: #F8BB86;
  border-radius: 2px;
  height: 47px;
  left: 50%;
  margin-left: -2px;
  position: absolute;
  top: 10px;
  width: 5px;
  z-index: 2;
}
.screenAlert-icon.screenAlert-warning .screenAlert-dot {
  background-color: #F8BB86;
  border-radius: 50%;
  bottom: 10px;
  height: 7px;
  left: 50%;
  margin-left: -3px;
  position: absolute;
  width: 7px;
  z-index: 2;
}

.scaleWarning {
  -webkit-animation: scaleWarning 0.75s infinite alternate;
  animation: scaleWarning 0.75s infinite alternate;
}

.pulseWarningIns {
  -webkit-animation: pulseWarningIns 0.75s infinite alternate;
  animation: pulseWarningIns 0.75s infinite alternate;
}

/* Animate Warning */
@-webkit-keyframes scaleWarning {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scaleWarning {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes pulseWarning {
  0% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  30% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    background-color: #F8BB86;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulseWarning {
  0% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  30% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    background-color: #F8BB86;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes pulseWarningIns {
  0% {
    background-color: #F8D486;
  }
  100% {
    background-color: #F8BB86;
  }
}
@keyframes pulseWarningIns {
  0% {
    background-color: #F8D486;
  }
  100% {
    background-color: #F8BB86;
  }
}
/* Info */
.alertInfo .modal-body, .alertAsync .modal-body {
  border-top: 5px solid #9de0f6;
}

.screenAlert-icon.screenAlert-info {
  border-color: #9de0f6;
}
.screenAlert-icon.screenAlert-info:before {
  -webkit-animation: pulseInfo 2s linear infinite;
  animation: pulseInfo 2s linear infinite;
  background-color: transparent !important;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
}
.screenAlert-icon.screenAlert-info:after {
  background-color: transparent !important;
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.screenAlert-icon.screenAlert-info .screenAlert-body {
  background-color: #3fc3ee;
  border-radius: 2px;
  height: 47px;
  left: 50%;
  margin-left: -2px;
  position: absolute;
  top: 10px;
  width: 5px;
  z-index: 2;
}
.screenAlert-icon.screenAlert-info .screenAlert-dot {
  background-color: #3fc3ee;
  border-radius: 50%;
  bottom: 10px;
  height: 7px;
  left: 50%;
  margin-left: -3px;
  position: absolute;
  width: 7px;
  z-index: 2;
}

.scaleInfo {
  -webkit-animation: scaleInfo 0.75s infinite alternate;
  animation: scaleInfo 0.75s infinite alternate;
}

.pulseInfoIns {
  -webkit-animation: pulseInfoIns 0.75s infinite alternate;
  animation: pulseInfoIns 0.75s infinite alternate;
}

/* Animate Info */
@-webkit-keyframes scaleInfo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scaleInfo {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes pulseInfo {
  0% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  30% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    background-color: #9de0f6;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulseInfo {
  0% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  30% {
    background-color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    background-color: #9de0f6;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@-webkit-keyframes pulseInfoIns {
  0% {
    background-color: #3fc3ee;
  }
  100% {
    background-color: #9de0f6;
  }
}
@keyframes pulseInfoIns {
  0% {
    background-color: #3fc3ee;
  }
  100% {
    background-color: #9de0f6;
  }
}
/* Confirm */
.alertConfirm .modal-body {
  border-top: 5px solid #c9dae1;
}

.screenAlert-icon.screenAlert-confirm {
  border-color: #c9dae1;
}
.screenAlert-icon.screenAlert-confirm:before {
  content: "?";
  font-size: 55px;
  color: #87adbd;
  display: flex;
  justify-content: center;
}
.screenAlert-icon.screenAlert-confirm .screenAlert-body {
  background-color: #87adbd;
  border-radius: 2px;
  height: 47px;
  left: 50%;
  margin-left: -2px;
  position: absolute;
  top: 10px;
  width: 5px;
  z-index: 2;
}
.screenAlert-icon.screenAlert-confirm .screenAlert-dot {
  background-color: #87adbd;
  border-radius: 50%;
  bottom: 10px;
  height: 7px;
  left: 50%;
  margin-left: -3px;
  position: absolute;
  width: 7px;
  z-index: 2;
}

.scaleConfirm {
  -webkit-animation: scaleconfirm 0.75s infinite alternate;
  animation: scaleconfirm 0.75s infinite alternate;
}

.pulseConfirmIns {
  -webkit-animation: pulseconfirmIns 0.75s infinite alternate;
  animation: pulseconfirmIns 0.75s infinite alternate;
}

/* Animate confirm */
@-webkit-keyframes scaleconfirm {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scaleconfirm {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.toast-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 666;
  pointer-events: auto; /* Fight with bootstrap! */
}

.toast-container :where(.toast-notify, .column) {
  display: flex;
  align-items: center;
}

.toast-container .toast-notify {
  width: 400px;
  position: relative;
  overflow: hidden;
  list-style: none;
  border-radius: 4px;
  padding: 16px 17px;
  margin-bottom: 10px;
  background: #ffffff;
  justify-content: space-between;
  animation: show_toast 0.3s ease forwards;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10px);
  }
}
.toast-container .toast-notify.hide {
  animation: hide_toast 0.3s ease forwards;
}

@keyframes hide_toast {
  0% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(calc(100% + 20px));
  }
}
.toast-container .toast-notify::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  animation: progress 5s linear reverse forwards;
}

@keyframes progress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.toast-container .toast-notify.success::before,
.btn#success {
  background-image: linear-gradient(130deg, rgb(95, 168, 133), rgba(95, 168, 133, 0.5));
}

.toast-container .toast-notify.danger::before,
.btn#danger {
  background-image: linear-gradient(130deg, rgb(232, 103, 113), rgba(232, 103, 113, 0.5));
}

.toast-container .toast-notify.warning::before,
.btn#warning {
  background-image: linear-gradient(130deg, rgb(233, 189, 12), rgba(233, 189, 12, 0.5));
}

.toast-container .toast-notify.info::before,
.btn#info {
  background-image: linear-gradient(130deg, rgb(52, 152, 219), rgba(52, 152, 219, 0.5));
}

.toast-container .toast-notify.default::before,
.btn#default {
  background-image: linear-gradient(130deg, rgb(170, 170, 170), rgba(138, 137, 137, 0.5));
}

.toast-container .toast-notify.default .column {
  margin-left: -10px;
}

.toast-container .toast-notify .column span {
  font-size: 1.75rem;
  font-size: 1.07rem;
  margin-left: 12px;
  color: #000;
}

.toast-container .toast-notify .column span a,
.toast-container .toast-notify .column span a:hover {
  color: #000;
}

.toast-container .toast-notify.success .column span:first-child {
  color: #0ABF30;
}

.toast-container .toast-notify.danger .column span:first-child {
  color: #E24D4C;
}

.toast-container .toast-notify.warning .column span:first-child {
  color: #E9BD0C;
}

.toast-container .toast-notify.info .column span:first-child {
  color: #3498DB;
}

.toast-container-containerContainer .toast-notify span:last-child {
  color: #aeb0d7;
  cursor: pointer;
}

/*
.toast-container .toast-notify span:last-child:hover {
  color: #34495E;
}
*/
@media screen and (max-width: 530px) {
  .toast-container {
    width: 95%;
  }
  .toast-container .toast-notify {
    width: 100%;
    font-size: 1rem;
    margin-left: 20px;
  }
}
/* Tree for: d3.v3.min.js */
#tree-d3 {
  background: #fff;
}
#tree-d3 .link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1px;
}

.bootstrap-select {
  width: auto;
  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");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

.bootstrap-select .btn {
  padding: 0.35rem 0.6rem;
}

.bootstrap-select .btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
  background: #fff !important;
  border-color: var(--primary-color) !important;
}

.bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--bs-border-color) !important;
  background: #fff !important;
  color: #212529 !important;
}

.bootstrap-select > .dropdown-toggle:focus {
  border: 1px solid var(--bs-border-color) !important;
  background: #fff !important;
  color: #212529 !important;
}

.bootstrap-select > .dropdown-toggle:after {
  display: inline-block;
  margin-left: 0.255em;
  content: "";
  border-top: 0.3em solid !important;
  border-right: 0.3em solid white !important;
  border-bottom: 0;
  border-left: 0.3em solid white !important;
  display: block;
  width: auto;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  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");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 16px 12px;
  border: 0;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: #6c757d;
  /* Grey forced */
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100%;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  outline: 0 !important;
}

.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  outline: 0 !important;
}

.bootstrap-select .dropdown-menu .dropdown-item:hover {
  background: rgba(var(--primary-color-rgb), 0.1);
}

.bootstrap-select .bs-select-all {
  font-size: 13px !important;
  border: 1px solid(--primary-color);
  background: var(--primary-color);
  color: var(--primary-color-hover-contrast-text) !important;
}

.bootstrap-select .bs-select-all:hover,
.bootstrap-select .bs-select-all:active,
.bootstrap-select .bs-select-all:focus {
  background-color: var(--primary-color-hover) !important;
  border-color: var(--primary-color-hover);
}

.bootstrap-select .bs-select-all:active,
.bootstrap-select .bs-select-all:focus,
.bootstrap-select > .dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
  border-color: var(--primary-color) !important;
}

.bootstrap-select > .dropdown-toggle:hover {
  background: #fff !important;
}

.bootstrap-select .bs-deselect-all {
  font-size: 13px !important;
  border: 1px solid(--primary-color);
  background: #fff;
  color: var(--primary-color);
}

.bootstrap-select .bs-deselect-all:hover {
  background-color: var(--primary-color-hover) !important;
  color: var(--primary-color-hover-contrast-text) !important;
}

.bootstrap-select .bs-deselect-all:active,
.bootstrap-select .bs-deselect-all:focus {
  background-color: var(--primary-color-hover) !important;
  color: var(--primary-color-hover-contrast-text) !important;
  border-color: var(--primary-color-hover) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-hover), 0.5) !important;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  color: var(--primary-color);
}

/* Header */
#header_object .bootstrap-select {
  width: 100% !important;
}

#header_object .bootstrap-select .btn-light:active,
#header_object .bootstrap-select .btn-light:focus {
  background: #fff;
  color: #212529;
}

#header_object .bootstrap-select .btn-light:hover {
  color: #212529 !important;
}

/* Flags */
.bootstrap-select [class*=" flag:"] {
  top: 2px;
  position: relative;
  margin-right: 7.5px;
}

/**/
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
  width: 100% !important;
}

.locator, #locatorFiltersDiv { /* outside of the locator, treeview will behave as normal */ }
.locator .treeview, #locatorFiltersDiv .treeview {
  /*border-top:  1px solid #ddd;*/
}
.locator .treeview .node-selected .mdi:before, #locatorFiltersDiv .treeview .node-selected .mdi:before {
  color: var(--primary-color-contrast-text);
}
.locator .treeview .child-selected, #locatorFiltersDiv .treeview .child-selected {
  background-color: var(--primary-color-lighter);
  border-color: transparent;
}
.locator .treeview span.indent, #locatorFiltersDiv .treeview span.indent {
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-left: 5px;
  padding-right: 5px;
}
.locator .treeview li.list-group-item, #locatorFiltersDiv .treeview li.list-group-item {
  padding: 1px 10px 0px 5px;
}
.locator .treeview li.list-group-item:first-child, #locatorFiltersDiv .treeview li.list-group-item:first-child {
  display: none;
}
.locator .treeview, #locatorFiltersDiv .treeview {
  margin-top: -30px;
  padding-left: 0px;
}
.locator .treeview ul.list-group, #locatorFiltersDiv .treeview ul.list-group {
  position: absolute;
}
.locator .treeview ul.treeExpanded, #locatorFiltersDiv .treeview ul.treeExpanded {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 100;
  padding: 0;
  top: 30px;
}
.locator .treeview .node-selected, #locatorFiltersDiv .treeview .node-selected {
  background-color: var(--primary-color) !important;
}
.locator .treeview-input-group, #locatorFiltersDiv .treeview-input-group {
  z-index: 9; /* with a higher number, it overlaps the header */
}
.locator .treeview-input-group .btn-ico, #locatorFiltersDiv .treeview-input-group .btn-ico {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.locator .treeview-input-group .form-control:focus, #locatorFiltersDiv .treeview-input-group .form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

.ui-jqgrid-bootstrap .ui-jqdialog-titlebar,
.ui-jqgrid-bootstrap .ui-jqgrid-caption {
  background: var(--primary-color) !important;
  color: var(--primary-color-contrast-text) !important;
  font-weight: bold;
  font-size: 1.4rem;
  font-family: var(--font-headings);
  font-weight: var(--font-headings-weight);
  padding: 8px !important;
}
.ui-jqgrid-bootstrap .ui-jqgrid .ui-jqgrid-htable,
.ui-jqgrid-bootstrap .ui-jqgrid-bdiv tr.ui-row-ltr > td,
.ui-jqgrid-bootstrap .ui-jqgrid-labels th.ui-th-column,
.ui-jqgrid-bootstrap .ui-jqgrid-labels th div {
  font-size: 1rem;
}
.ui-jqgrid-bootstrap .jqgrow.success td {
  background: var(--primary-color-lighter);
}
.ui-jqgrid-bootstrap .ui-jqgrid-htable th.ui-th-ltr,
.ui-jqgrid-bootstrap .ui-th-ltr {
  background: var(--primary-color-lighter) !important;
}
.ui-jqgrid-bootstrap .ui-pg-table td {
  background: var(--primary-color-lighter) !important;
}
.ui-jqgrid-bootstrap .ui-jqgrid-htable .ui-jqgrid-labels th div {
  display: flex;
  align-items: center;
  padding: 5px;
}
.ui-jqgrid-bootstrap .btn-default,
.ui-jqgrid-bootstrap .btn-default:active {
  background: transparent;
}
.ui-jqgrid-bootstrap .fa-chevron-circle-up::before {
  content: "\f0140";
  font-family: "Material Design Icons";
  color: #fff;
  font-size: 20px;
}
.ui-jqgrid-bootstrap .fa-chevron-circle-down {
  transform: rotate(-90deg);
}
.ui-jqgrid-bootstrap .fa-chevron-circle-down::before {
  content: "\f0140";
  font-family: "Material Design Icons";
  color: #fff;
  font-size: 20px;
  transition: 0.3s transform ease-in-out;
}
.ui-jqgrid-bootstrap .ui-jqgrid-titlebar-close {
  left: 0.1rem;
}
.ui-jqgrid-bootstrap .ui-jqgrid-title {
  font-size: 18px !important;
  margin-left: 21px;
}
.ui-jqgrid-bootstrap .ui-jqgrid-titlebar > .ui-jqgrid-titlebar-close > span.fa {
  position: absolute;
  left: 6px;
  top: 0px;
}
.ui-jqgrid-bootstrap .ui-jqgrid-titlebar {
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important;
}
.ui-jqgrid-bootstrap tr.jqgrow.success, .ui-jqgrid-bootstrap tr.jqgrow.success:hover {
  background: var(--primary-color) !important;
}
.ui-jqgrid-bootstrap tr.jqgrow > td {
  padding: 0.5em !important;
}
.ui-jqgrid-bootstrap .ui-pg-button:not(.ui-state-hover) {
  border: 0 !important;
}
.ui-jqgrid-bootstrap .ui-jqdialog .ui-jqdialog-titlebar-ltr .ui-jqdialog-titlebar-close,
.ui-jqgrid-bootstrap .ui-jqdialog-titlebar .ui-jqdialog-titlebar-close {
  right: 0.85em;
  font-size: 17px;
  top: 22px;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.5;
  width: 1em;
  height: 1em;
}
.ui-jqgrid-bootstrap .modal-header .fa-times:before {
  content: "";
}
.ui-jqgrid-bootstrap .modal-header .ui-jqdialog.ui-jqgrid-bootstrap .FormData .CaptionTD {
  font-size: var(--font-size);
}
.ui-jqgrid-bootstrap #gview_list,
.ui-jqgrid-bootstrap .ui-jqgrid-hdiv,
.ui-jqgrid-bootstrap .ui-jqgrid-bdiv,
.ui-jqgrid-bootstrap #pager,
.ui-jqgrid-bootstrap .ui-jqgrid-htable,
.ui-jqgrid-bootstrap .ui-jqgrid-btable {
  width: 100% !important;
}
.ui-jqgrid-bootstrap .DelButton {
  display: flex;
}
.ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .fm-button,
.ui-jqgrid-bootstrap .DelButton .fm-button {
  background: var(--primary-color);
  color: var(--primary-color-contrast-text);
  padding: 0.25rem 1rem;
  margin-right: 0.75rem;
  border: 0;
  display: flex;
  align-items: center;
}
.ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .fm-button:hover,
.ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .fm-button:active,
.ui-jqgrid-bootstrap .DelButton .fm-button:hover,
.ui-jqgrid-bootstrap .DelButton .fm-button:active {
  background: var(--primary-color-hover);
  color: var(--primary-color-hover-contrast-text);
}
.ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .EditButton .fm-button .fa,
.ui-jqgrid-bootstrap .DelButton .fa {
  display: none;
}
.ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer .EditButton {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}
.ui-jqgrid-bootstrap .modal.ui-jqgrid-bootstrap .modal-footer hr {
  display: none;
}

/**/
.ui-jqgrid-bootstrap#gbox_list {
  width: 100% !important;
}

/* .form-control invalite check */
.FormGrid .DataTD input[type=checkbox] {
  height: 1.3rem;
  width: 1.3rem;
}

.fc-toolbar h2 {
  color: var(--primary-color);
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header {
  background: var(--primary-color);
  color: #fff;
}

.fc-unthemed .fc-popover .fc-header .fc-close {
  color: #fff;
}

.fc-state-default.fc-corner-left {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.fc-state-default.fc-corner-right {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.fc-state-default {
  background-color: var(--primary-color);
  background-image: none;
  border: 0;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  text-shadow: none;
}

.fc-state-disabled {
  color: #fff;
  background-color: #aaa !important;
}

.fc-state-active,
.fc-state-hover {
  color: #fff;
  background: var(--primary-color-hover) !important;
  text-decoration: none;
}

.fc-state-down,
.fc-state-active {
  background-color: var(--primary-color-hover);
  background-image: none;
  box-shadow: none;
}

.fc-prev-button, .fc-prev-button:hover {
  border-right: 2px solid #fff !important; /* ISYC */
}

.fc-next-button, .fc-next-button:hover {
  border-left: 2px solid #fff !important; /* ISYC */
}

.fc-day {
  background-color: #ffffff;
}

.fc-day-header {
  font-weight: normal;
  padding: 6px !important;
  border-right: 1px solid var(--primary-color) !important;
  background-color: var(--primary-color);
  color: #fff;
  width: 100%;
}

.fc-event {
  line-height: 15px;
  border-radius: 0;
}

.fc-day-grid-event .fc-content { /* force events to be one-line tall */
  white-space: inherit; /* ISYC - Antes estaba en NOWRAP */
}

/**/
main #calendar .estado1 {
  background: #94e2e8;
  border: 1px solid #7fadb9;
  color: #197589;
}

main #calendar .estado2 {
  background: #b7ee73;
  border: 1px solid #87b167;
  color: #4d6d08;
}

main #calendar .estado3 {
  background: #e6d761;
  border: 1px solid #afb168;
  color: #775a00;
}

main #calendar .estado4 {
  background: #eb8795;
  border: 1px solid #ae6b6c;
  color: #ac0101;
}

main #calendar .estado5 {
  background: #c1ae97;
  border: 1px solid #887e66;
  color: #4b3f14;
}

body.popup .jmesa {
  display: table; /* In an iframe (popup class) I force horizontal scrolling */
  width: 100%; /* (customer request) */
}

.jmesa {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  overflow: auto; /* To force scrolling in very wide tables */
}
.jmesa .table {
  margin-bottom: 0;
}
.jmesa .mdi {
  vertical-align: initial;
}
.jmesa .mdi.mdi-file,
.jmesa .mdi.mdi-circle { /* This is a fix so that files and status icons are always above the .angle */
  position: relative;
  z-index: 50;
}
.jmesa {
  /**/
}
.jmesa .mdi.mdi-checkbox-blank {
  font-size: 16px !important;
}
.jmesa .mdi.mdi-checkbox-blank-circle {
  font-size: 9px !important;
}
.jmesa {
  /**************************************/
}
.jmesa caption {
  font-weight: bold;
  font-size: 14px !important;
  text-align: left;
  margin: 0 0 10px 0;
  font-size: inherit;
  top: 10px;
  padding-top: 6px;
  color: var(--primary-color);
  position: absolute;
}
.jmesa .table {
  position: relative;
  border-collapse: inherit; /* Bootstrap FIX */
}
.jmesa table td {
  vertical-align: inherit; /* Bootstrap FIX */
  border-top: 0 !important;
}
.jmesa table tr:first-child td {
  border-top: 0 !important;
}
.jmesa table tbody tr:not(.statusBar):not(.toolbar) td {
  border-bottom: 0;
}
.jmesa table .mdi.disabled,
.jmesa table .mdi.disabled:hover {
  cursor: default;
  color: #9f9f9f !important;
  opacity: 0.5;
  float: left;
}
.jmesa .toolbar td {
  padding: 0px 1px 0px 1px;
}
.jmesa .toolbar select {
  border: solid 1px #c4c3c2;
  margin-left: 0.5rem;
  background: #fff;
  padding: 1px 0.5rem;
}
.jmesa .toolbar .pageNumber {
  font-weight: bold;
  color: #000;
  padding: 0px 2px;
  margin: 0;
  float: left;
}
.jmesa .toolbar .pageNumber a {
  font-weight: normal;
  color: black;
}
.jmesa .toolbar .textItem {
  font-weight: bold;
  font-style: italic;
  color: #000;
  padding: 0px 2px;
}
.jmesa .toolbar .textItem a {
  color: #000;
}
.jmesa .toolbar .textItemError {
  font-weight: bold;
  font-style: italic;
  color: #ec4646;
  padding: 0px 2px;
}
.jmesa .toolbar .textItemError a {
  color: #ec4646;
}
.jmesa .toolbar img {
  border: 0px;
}
.jmesa .filter {
  background: #f7f7f7;
}
.jmesa .filter td {
  padding: 5px;
}
.jmesa .tbody input {
  padding: 0;
  margin: 0;
}
.jmesa .filter .dynFilter {
  position: relative;
  margin: 0;
  background: #fff !important;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #ccc;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  outline: none;
  /* z-index: 65; Do not uncomment, it causes problems with datepickers. */
}
.jmesa .filter .dynFilter:empty {
  padding: 10px;
}
.jmesa .filter #dynFilterDiv:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
  outline: none;
}
.jmesa .filter #dynFilterDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}
.jmesa .filter #dynFilterInput {
  outline: none;
  padding: 0;
  margin: 0;
  border-style: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}
.jmesa .filter #dynFilterDroplistDiv,
.jmesa .filter #wsColumnDroplistDiv {
  position: absolute;
  padding: 0;
  margin: 0;
  z-index: 2;
  outline: none;
}
.jmesa .filter #dynFilterDroplist,
.jmesa .filter #wsColumnDroplistInput {
  padding: 0;
  margin: 0;
  outline: none;
}
.jmesa .header td {
  /* white-space: nowrap caused the website layout to break due to headers that were too wide and not jumping between lines */
  background: rgba(var(--primary-color-rgb), 0.2) !important;
  color: rgba(var(--primary-color-hover-rgb), 1); /* Darker than primary color */
  font-weight: bold;
  padding: 5px 4px;
  border-right-style: solid;
  border-right-width: 0px;
  box-sizing: content-box; /* Bootstrap FIX */
}
.jmesa .odd a, .jmesa .even a {
  color: black;
}
.jmesa .odd td,
.jmesa .even td,
.jmesa .removed td,
.jmesa .rowError td,
.jmesa .highlight,
.jmesa .highlight td { /* Do not put vertical-align - If necessary, the CSS class will be added to the TD */
  padding: 4px;
  vertical-align: inherit; /* Por Bootstrap */
}
.jmesa .odd td {
  border: 1px solid transparent;
  min-width: 16px;
}
.jmesa .even td {
  border: 1px solid transparent;
}
.jmesa .removed td {
  border: 1px solid transparent;
}
.jmesa .odd {
  background-color: #ffffff;
}
.jmesa .even {
  background-color: #f4f4f4;
}
.jmesa tbody.tbody img {
  vertical-align: middle;
}
.jmesa .removed {
  font-style: italic;
  color: #ccc;
}
.jmesa .rowError {
  font-style: italic;
}
.jmesa .addRow {
  font-weight: bold;
  height: 20px;
  color: white;
  background-color: #888;
}
.jmesa table.table tbody tr.highlight {
  background: rgba(var(--primary-color-rgb), 0.1);
}
.jmesa table.table tbody tr.highlight td {
  min-width: 16px;
  border: 1px solid transparent;
}
.jmesa table.table tbody tr.highlight a {
  color: black;
}
.jmesa table.table thead tr.header td,
.jmesa table.table tbody tr.odd td,
.jmesa table.table tbody tr.even td,
.jmesa table.table tbody tr.highlight td {
  padding: 7px;
}
.jmesa table.table thead tr.header td {
  white-space: nowrap;
  color: rgba(var(--primary-color-rgb), 1);
}
.jmesa .statusBar {
  height: 20px;
  position: relative;
  margin-top: 10px;
}
.jmesa .statusBar td {
  text-align: right;
  padding: 3px 10px 5px 0;
  width: auto;
}
.jmesa .dropShadow {
  padding: 10px 14px 14px 10px;
}
.jmesa .wsColumn {
  position: relative;
  padding: 0;
  margin: 0;
  border-bottom: 0;
  white-space: nowrap;
  cursor: pointer;
  min-height: 15px; /* This 15px marks the click space. Do not remove. */
}
.jmesa .wsColumnError {
  position: relative;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: #ec4646;
  border-bottom: 1px dashed #ec4646;
  white-space: nowrap;
  cursor: pointer;
}
.jmesa .wsColumnChange {
  position: relative;
  font-style: italic;
  padding: 0;
  margin: 0;
  color: #000;
  border-bottom: 1px dashed #c0c0c0;
  white-space: nowrap;
  cursor: pointer;
}
.jmesa #wsColumnDiv {
  position: absolute;
  top: -2px;
  left: -2px;
  padding: 0;
  margin: 0;
  height: 17px;
  border: 1px solid #c0c0c0;
  background-color: #ededed;
}
.jmesa #wsColumnInput {
  padding: 0;
  margin: 0;
  border-style: none;
  background-color: #ededed;
}
.jmesa .info span { /* For dates */
  font-style: italic;
  color: #888;
}
.jmesa .center {
  text-align: center;
}
.jmesa .fixed {
  width: 676px;
}
.jmesa {
  /* For when there are no filters the caption this class is added by javascript */
}
.jmesa .caption_top {
  position: relative;
  padding-top: 30px;
  margin-top: 0px;
}
.jmesa .caption_top caption {
  position: absolute;
  top: -35px;
}
.jmesa {
  /* Custom column widths */
}
.jmesa .nowrap {
  white-space: nowrap;
}
.jmesa {
  /* For jMesa that shows/hides areas */
}
.jmesa .highlight + tr[id*=extraRow] * {
  background-color: #e2f3fa;
  border-color: #e2f3fa;
}
.jmesa .highlight + tr[id*=extraRow] * td {
  padding: 4px;
}
.jmesa .highlight + tr[id*=extraRow] > td {
  border-top: 1px dotted #cdcdcd;
}
.jmesa tr[id*=extraRow] > td {
  border-top: 1px dotted #cdcdcd;
  padding: 4px;
}
.jmesa tr[id*=extraRow]:hover {
  background-color: #e2f3fa;
}
.jmesa tr[id*=extraRow]:hover > td {
  border-top: 1px dotted #cdcdcd !important;
}
.jmesa tr[id*=extraRow]:hover td {
  border-color: #e2f3fa;
}
.jmesa table.table > tbody > tr.even {
  background: #fff; /* fco doesn't like it. */
}
.jmesa table.table > tbody > tr.odd {
  background: #fff;
}
.jmesa table.info,
.jmesa table.info td {
  padding: 0;
  margin: 0;
  border-collapse: collapse;
}
.jmesa #wsColumnDroplistDiv {
  position: relative;
  z-index: 1234;
  top: 0 !important;
}
.jmesa .mdi-menu-left,
.jmesa .mdi-menu-right {
  font-size: 27px !important;
}

/* In documentary groups the circle is large */
#documentalValidations .mdi.mdi-checkbox-blank-circle,
#relatedDocumentalValidations .mdi.mdi-checkbox-blank-circle {
  font-size: 16px;
}

.toolbar table {
  margin-right: auto;
  margin-left: 0px;
  margin-bottom: 10px;
  float: right !important;
}

.toolbar td {
  border-top: 0; /* Inherited from Bootstrap */
}

#contenido_max .jmesa .fixed {
  width: 966px;
}

/* Occasional styles */
.jmesa #ROLEVIEW .odd td,
.jmesa #ROLEVIEW .highlight td {
  min-width: 16px;
}

/* jmesa ROLEVIEW */
.fixedTable,
.fixedTable .fixedTable-header,
.fixedTable .fixedTable-body {
  overflow: hidden;
}

.fixedTable {
  width: 100%;
  height: 100%;
}

.fixedTable .fixedTable-body {
  overflow: auto;
}

#countdown_dashboard {
  height: 50px;
  margin: 0;
}

#countdown_dashboard .dash {
  height: 50px;
  width: 50px;
  float: left;
  position: relative;
  line-height: normal !important;
  background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color-hover) 100%);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  border-radius: 7.5px;
}

#countdown_dashboard .dash_title {
  font-size: 10px;
  font-family: var(--font-general);
  color: #fff;
  position: absolute;
  bottom: 5px;
}

#countdown_dashboard .dash .digit {
  font-size: 20px;
  font-weight: bold;
  float: left;
  text-align: center;
  font-family: var(--font-general);
  color: #fff;
  margin-top: 0.3rem;
}

#countdown_dashboard.off .dash .digit {
  background: #bb2020;
}

#countdown_dashboard .separator {
  float: left;
  width: 5px;
  text-align: center;
  margin: 27px 0 0 0;
}

table.dataTable {
  width: 100% !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
  vertical-align: middle;
  padding: var(--table-spacing) !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child {
  /* padding-left: 30px !important; */
}

table.dataTable thead th.th-search {
  padding: 8px 2px;
}

table.dataTable tbody td.select-checkbox,
table.dataTable tbody th.select-checkbox {
  width: 10px;
}

div.dt-container div.dt-length select {
  display: initial;
  width: auto;
  font-size: auto;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

table.dataTable thead > tr > th > span.dt-column-title {
  color: var(--table-header-text-color);
  cursor: pointer;
  vertical-align: middle;
  opacity: 1;
  font-weight: var(--table-header-font-weight);
}

table.dataTable thead input:not(.input-decorators-base-input):not(.form-check-input) {
  background-color: #fff;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  outline: none;
  width: auto;
}

table.dataTable thead input:not(.input-decorators-base-input):focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
  outline: none;
}

table.dataTable div.input-select input:focus {
  border-color: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

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

.table.dataTable thead th {
  border-bottom: 0 !important;
  font-size: var(--table-header-font-size);
}

table.dataTable thead > tr:nth-child(n) > th {
  background-color: var(--table-header-bg-color);
  overflow: hidden;
}

table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
  background-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 94%);
}

table.dataTable thead th[class*=sorting]:before,
table.dataTable thead th[class*=sorting]:after {
  color: rgba(var(--primary-color-rgb), 1);
  opacity: 1;
}

.dt-layout-table {
  overflow: auto;
}

.dt-container div.dt-info {
  white-space: inherit;
}

table.dataTable thead th.dt-orderable-asc span.dt-column-order:before {
  right: 0.4em;
  top: 0.7rem;
  content: "\f0360";
  font: 22px "Material Design Icons";
  display: flex;
  align-items: center;
  justify-content: center;
}

table.dataTable thead th.dt-orderable-desc span.dt-column-order:after {
  right: 0.4em;
  top: 1.7rem;
  content: "\f035d";
  font: 22px "Material Design Icons";
  display: flex;
  align-items: center;
  justify-content: center;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before {
  color: var(--table-header-icon-color);
  opacity: 1;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child::before {
  position: inherit;
  left: auto;
  top: auto;
  background-color: rgba(var(--primary-color-rgb), 1);
  float: left;
  margin-right: 10px;
}

table.dataTable.collapsed .ms-1-collapsed {
  margin-left: 0.25rem !important;
}

table.dataTable.collapsed .ms-2-collapsed {
  margin-left: 0.5rem !important;
}

table.dataTable.collapsed .ms-3-collapsed {
  margin-left: 1rem !important;
}

table.dataTable.collapsed .ms-4-collapsed {
  margin-left: 1.5rem !important;
}

div.dtr-modal div.dtr-modal-display {
  background-color: #fff !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
  background-color: transparent !important;
}

table.dataTable .even {
  /* Fco doesn't like it. */
}

table.dataTable .odd {
  background-color: #fff;
}

.custom-checkbox .form-check-input:indeterminate ~ .form-check-label::before {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

/**/
@media screen and (max-width: 576px) {
  /* So that it appears on the right in the popups */
  div.dt-container div.dt-length,
  div.dt-container div.dt-search,
  div.dt-container div.dt-info,
  div.dt-container div.dt-paging {
    text-align: right !important;
  }
  div.dt-container div.dt-info {
    margin-bottom: 1rem !important;
  }
}
div.dt-container div.dt-length { /* Responsive view: show register and buttons */
  text-align: center !important;
}

[class^=break-cell-] {
  word-wrap: break-word;
}

table.dataTable thead th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
  text-align: left;
}

table.dataTable thead th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
  text-align: center;
}

table.dataTable thead th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
  text-align: right;
}

table.dataTable thead th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
  text-align: justify;
}

table.dataTable thead th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}

table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
  text-align: left;
}

table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
  text-align: center;
}

table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
  text-align: right;
}

table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}

table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}

/**/
table.dataTable thead th input[type=text] {
  /*width: 100%;*/
}

div.dataTables_scrollHead div.dt-scroll-headInner {
  /*width: 100% !important; Responsive fails */
}

body.widget #locatorExportButtonsDiv {
  /* Pendiente de programar */
  display: none !important;
}

body.widget #locatorTableDiv .row,
body.popup #locatorTableDiv .row {
  margin-left: 0;
  margin-right: 0;
}

body.widget #locatorTableDiv .row > [class^=col-],
body.popup #locatorTableDiv .row > [class^=col-] {
  padding-left: 0;
  padding-right: 0;
}

table.dataTable .mdi.mdi-checkbox-blank {
  font-size: 16px !important;
}

table.dataTable .mdi.mdi-checkbox-blank-circle {
  font-size: 9px !important;
}

div.dt-container div.dt-paging ul.pagination {
  margin-top: 1rem;
}

div.dt-container div.dt-processing { /* Be careful with the coordinates because they can cover a button and cause the tests to fail. */
  padding: 20px !important;
  text-align: center !important;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background: white;
  width: 300px !important;
  height: 70px;
  opacity: 0.9;
  box-sizing: content-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  position: fixed !important;
  top: 0% !important;
  left: 50% !important;
  margin-left: -150px !important;
  margin-top: 220px !important;
  z-index: 6666;
}

#dt-processing-message + div { /* Hide default processing loading spinner */
  display: none;
}

/* editor.bootstrap5.css*/
table.dataTable tbody tr.highlight {
  background-color: var(--primary-color-light) !important;
}

div.DTE div.DTE_Form_Error {
  color: var(--danger-color);
}

table.dataTable tbody td {
  font-size: var(--table-cell-font-size);
}

table.dataTable tbody td .editable-element {
  border-bottom: 1px dotted var(--primary-color);
  cursor: cell;
}

table.dataTable tbody td .editable-element:empty {
  border-bottom: none !important;
  width: 100%;
  height: 100%;
  display: block;
  cursor: cell;
  padding: 1rem !important;
}

div.dt-datetime table td.selectable button:hover {
  background: var(--primary-color-light) !important;
  color: var(--primary-color-light-contrast-text) !important;
}

/* Focus header removed */
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover, table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 0 !important;
}

/* Modal */
.DTE_Header.modal-header {
  background: var(--primary-color);
  color: var(--primary-color-contrast-text);
  font-size: 1.2rem;
  font-family: var(--font-headings);
  font-weight: var(--font-headings-weight);
}

.DTE_Header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.DTE_Footer.modal-footer {
  display: flex;
  justify-content: center;
}

div.DTE_Bubble {
  z-index: 1000;
}

div.DTE_Bubble_Background {
  z-index: 999;
}

/* Paginate */
.page-link.ellipsis {
  pointer-events: none; /* So the [...] button does not seem clickable */
}

/* Left div: tServiceP_info has top padding, but right div not */
div.dt-container div.dt-paging {
  padding-top: 0.85em;
}

/* Checkbox */
#multiSelectionColumn:before,
#multiSelectionColumn:after {
  display: none;
}

#multiSelectionColumn .form-check-label {
  margin-left: 0;
  display: initial;
}

#multiSelectionColumn .form-check-input {
  float: inherit;
  margin-left: 0;
}

#multiSelectionColumn .form-check {
  padding-left: 0;
}

/* selected */
table.dataTable.display tbody > tr.selected > .sorting_1,
table.dataTable.order-column.stripe tbody > tr.selected > .sorting_1 {
  background: none !important;
}

table.table.dataTable > tbody > tr.selected > * {
  box-shadow: none;
  background: var(--table-row-bg-color-selected);
  color: var(--table-row-text-color-selected);
}

table.table.dataTable > tbody > tr.selected a {
  color: var(--table-row-text-color-selected) !important;
}

table.table.dataTable > tbody > tr.selected svg,
table.table.dataTable > tbody > tr.selected .mdi:before {
  color: var(--table-row-icon-color-selected) !important;
}

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before, .ui-helper-clearfix:after {
  content: "";
  display: table;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  zoom: 1;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
}

.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  padding: 0.5em 0.5em 0.5em 0.7em;
  zoom: 1;
}

.ui-accordion .ui-accordion-icons {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-noicons {
  padding-left: 0.7em;
}

.ui-accordion .ui-accordion-icons .ui-accordion-icons {
  padding-left: 2.2em;
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
  position: absolute;
  left: 0.5em;
  top: 50%;
  margin-top: -8px;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
  zoom: 1;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

/* workarounds */
* html .ui-autocomplete {
  width: 1px;
} /* without this, the menu expands to 100% in IE6 */
.ui-button {
  display: inline-block;
  position: relative;
  padding: 0;
  margin-right: 0.1em;
  cursor: pointer;
  text-align: center;
  zoom: 1;
  overflow: visible;
} /* the overflow property removes extra width in IE */
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

.ui-button-icon-only {
  width: 2.2em;
} /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only {
  width: 2.4em;
} /* button elements seem to need a little more width */
.ui-button-icons-only {
  width: 3.4em;
}

button.ui-button-icons-only {
  width: 3.7em;
}

/*button text element */
.ui-button .ui-button-text {
  display: block;
  line-height: 1.4;
}

.ui-button-text-only .ui-button-text {
  padding: 0.4em 1em;
}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
  padding: 0.4em;
  text-indent: -9999999px;
}

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
  padding: 0.4em 1em 0.4em 2.1em;
}

.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text {
  padding: 0.4em 2.1em 0.4em 1em;
}

.ui-button-text-icons .ui-button-text {
  padding-left: 2.1em;
  padding-right: 2.1em;
}

/* no icon support for input elements, provide padding by default */
input.ui-button {
  padding: 0.4em 1em;
}

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
  position: absolute;
  top: 50%;
  margin-top: -8px;
}

.ui-button-icon-only .ui-icon {
  left: 50%;
  margin-left: -8px;
}

.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary {
  left: 0.5em;
}

.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary {
  right: 0.5em;
}

/*button sets*/
.ui-buttonset {
  margin-right: 7px;
}

.ui-buttonset .ui-button {
  margin-left: 0;
  margin-right: -0.3em;
}

/* workarounds */
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* reset extra padding in Firefox */
.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  padding: inherit;
}

.ui-datepicker select.ui-datepicker-month-year {
  width: 100%;
  font-family: var(--font-general);
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
  font-family: var(--font-general);
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0em;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
  position: absolute; /*must have*/
  z-index: -1; /*must have*/
  filter: mask(); /*must have*/
  top: -4px; /*must have*/
  left: -4px; /*must have*/
  width: 200px; /*must have*/
  height: 200px; /*must have*/
}

.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  width: 300px;
  overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 16px 0.1em 0;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 3px;
  top: 50%;
  width: 19px;
  margin: -10px 0 0 0;
  padding: 0px;
  height: 18px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
  zoom: 1;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin: 0.5em 0 0 0;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-se {
  width: 14px;
  height: 14px;
  right: 3px;
  bottom: 3px;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-menu {
  list-style: none;
  padding: 2px;
  margin: 0;
  display: block;
  outline: none;
}

.ui-menu .ui-menu {
  margin-top: -3px;
  position: absolute;
}

.ui-menu .ui-menu-item {
  margin: 0;
  padding: 0;
  zoom: 1;
  width: 100%;
}

.ui-menu .ui-menu-item .mdi {
  color: var(--primary-color);
}

.ui-menu .ui-menu-item .mdi:hover {
  color: var(--primary-color);
}

.ui-menu .ui-menu-divider {
  margin: 5px -2px 5px -2px;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-menu-item a {
  text-decoration: none;
  display: block;
  padding: 2px 0.4em;
  line-height: 1.5;
  zoom: 1;
  font-weight: normal;
  border: 0;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
  font-weight: normal;
  background: rgba(var(--primary-color), 0.1);
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-state-disabled a {
  cursor: default;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item a {
  position: relative;
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  position: static;
  float: right;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  padding: 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 22px;
}

.ui-spinner-button {
  width: 16px;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

.ui-spinner a.ui-spinner-button {
  border-top: none;
  border-bottom: none;
  border-right: none;
} /* more specificity required here to overide default borders */
.ui-spinner .ui-icon {
  position: absolute;
  margin-top: -8px;
  top: 50%;
  left: 0;
} /* vertical centre icon */
.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
  /* need to fix icons sprite */
  background-position: -65px -16px;
}

.ui-tabs {
  position: relative;
  padding: 0.2em;
  zoom: 1;
}

/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li a {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
  cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
  cursor: pointer;
}

/* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 5px #aaa;
  box-shadow: 0 0 5px #aaa;
}

/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
  background-image: none;
}

body .ui-tooltip {
  border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: var(--font-general);
  font-size: inherit;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--font-general);
  font-size: 1em;
  border: 0;
}

.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}

.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #dddddd;
  background: var(--primary-color);
  color: #ffffff;
  font-weight: bold;
}

.ui-widget-header a {
  color: #ffffff;
}

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background: rgba(var(--primary-color-rgb), 0.1) !important;
}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link,
.ui-state-hover a:visited {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid var(--primary-color);
  background: var(--primary-color) !important;
  font-weight: normal;
  color: #ffffff;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--secondary-color);
  background: var(--secondary-color);
  color: #ffffff;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #ffffff;
}

.ui-state-highlight.ui-state-hover {
  border: 1px solid var(--secondary-color) !important;
  background: var(--secondary-color) !important;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a, .ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}

.ui-state-error-text, .ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary, .ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70);
  font-weight: normal;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35);
  background-image: none;
}

.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35);
} /* For IE8 - See #6059 */
/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  width: 16px;
  height: 16px;
  background-image: url("../images/jquery-ui.theme/ui-icons_444444_256x240.png");
}

.ui-widget-content .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_444444_256x240.png");
}

.ui-widget-header .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_ffffff_256x240.png");
}

.ui-widget-header .ui-state-hover .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_ececec_256x240.png");
}

.ui-state-default .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_777777_256x240.png");
}

.ui-state-focus .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_ffffff_256x240.png");
}

.ui-state-hover .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_777777_256x240.png");
}

.ui-state-active .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_ffffff_256x240.png");
}

.ui-state-highlight .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_777777_256x240.png");
}

.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url("../images/jquery-ui.theme/ui-icons_ececec_256x240.png");
}

/* positioning */
.ui-icon-carat-1-n {
  background-position: 0 0;
}

.ui-icon-carat-1-ne {
  background-position: -16px 0;
}

.ui-icon-carat-1-e {
  background-position: -32px 0;
}

.ui-icon-carat-1-se {
  background-position: -48px 0;
}

.ui-icon-carat-1-s {
  background-position: -64px 0;
}

.ui-icon-carat-1-sw {
  background-position: -80px 0;
}

.ui-icon-carat-1-w {
  background-position: -96px 0;
}

.ui-icon-carat-1-nw {
  background-position: -112px 0;
}

.ui-icon-carat-2-n-s {
  background-position: -128px 0;
}

.ui-icon-carat-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -64px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -64px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 0 -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
  border-top-left-radius: 0px;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
  border-top-right-radius: 0px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
  border-bottom-left-radius: 0px;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
  border-bottom-right-radius: 0px;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
  margin: 0px 0 0 0px;
  padding: 5px;
  background: #666666;
  opacity: 0.3;
  filter: Alpha(Opacity=30);
  border-radius: 0px;
}

.ui-multiselect {
  background: #fff !important;
  color: #4e4e4e !important;
  -webkit-border-radius: 0px;
  border-radius: 0px !important;
  border-color: var(--bs-border-color) !important; /* Mismo color que los bordes de Bootstrap */
  font-weight: normal;
  font-size: 13px;
  padding: 3px;
  margin: 0 0 10px 0;
  line-height: 15px;
  text-indent: 2px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Para Chrome */
  .ui-multiselect {
    padding: 2px 0 1px 0;
    text-indent: 5px;
  }
}
.ui-multiselect-menu {
  margin-top: -1px;
}

.ui-multiselect-menu .ui-widget-header {
  background: var(--primary-color);
  border-radius: 0px;
  font-weight: normal;
  border: 0;
}

.ui-multiselect-menu .ui-widget-header span {
  font-size: 9px;
  font-family: var(--font-general);
  margin: 1px 0 0 0;
}

.ui-multiselect-menu {
  border-radius: 0px;
  border-color: var(--bs-border-color); /* Mismo color que los bordes de Bootstrap */
  box-sizing: content-box;
}

.ui-multiselect-checkboxes li label input {
  margin: 0 5px 0 5px;
}

.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label {
  text-align: left;
  border-color: #bbb;
  border-bottom-style: dotted;
  margin-left: -3px;
  margin-bottom: 5px;
}

.ui-multiselect span {
  float: left;
}

/* SELECTIZE INPUT */
.selectize-input {
  border: var(--bs-border-width) solid var(--bs-border-color);
}

/* SELECTIZE CONTROL */
.selectize-control.multi .selectize-input > div.active {
  background: var(--primary-color);
}

.selectize-control.single .selectize-input::after {
  content: " " !important;
  display: block !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%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 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 12px;
  width: 16px !important;
  height: 12px !important;
  right: 10px !important;
  top: 8px !important;
  position: absolute !important;
  z-index: 1;
  margin-top: 0 !important;
  border-color: inherit !important;
  border: 0 !important;
}

.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: 0 !important;
}

.selectize-control.multi .selectize-input > div {
  padding: 0 0.75rem;
  font-size: 1rem;
}

.selectize-control.multi .selectize-input.has-items {
  padding: calc(0.375rem - 1px - 0px) 0.375rem calc(0.375rem - 1px - 3px - 0px);
}

.selectize-control:not(:first-child) .selectize-input {
  border-top-left-radius: auto;
  border-bottom-left-radius: auto;
}

.selectize-control.plugin-remove_button .item .remove {
  margin-left: 0.75rem;
  padding: 1px 9px 0 5px;
}

.selectize-control:not(:first-child) .selectize-input {
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

/* SELECTIZE DROPDOWN */
.selectize-dropdown .active {
  background-color: var(--primary-color);
}

.selectize-dropdown .selected {
  background-color: var(--primary-color);
}

.selectize-dropdown [data-selectable] .highlight {
  background: var(--primary-color);
  color: var(--primary-color-contrast-text);
}

#kanban {
  width: 100% !important;
}

#kanban .footer {
  display: none;
}

main .ck {
  width: 100%;
  margin: 0 0 0 -1px;
}

main .ck textarea {
  border: 0 !important;
}

.cke_dialog_ui_html {
  /* Popup */
  border: 0;
}

a.cke_dialog_ui_button {
  padding: 0 !important;
}

a.cke_dialog_ui_button:focus {
  box-shadow: none !important;
}

a.cke_dialog_ui_button_ok,
a.cke_dialog_ui_button_cancel {
  background: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color-contrast-text) !important;
  padding: 4px 1px !important;
}

a.cke_dialog_ui_button_ok:hover,
a.cke_dialog_ui_button_cancel:hover {
  background: var(--primary-color-hover) !important;
  border-color: var(--primary-color-hover) !important;
  color: var(--primary-color-hover-contrast-text) !important;
}

.cke_dialog .cke_resizer_ltr {
  margin-right: 5px;
  position: absolute;
  right: 0;
}

#spanDescription p {
  clear: both;
  word-break: break-all;
}

.cke_top,
.cke_bottom,
.cke_chrome {
  border-color: var(--bs-border-color) !important;
}

.cke_fake {
  border-top: 1px solid var(--bs-border-color) !important;
  border-left: 1px solid var(--bs-border-color) !important;
  border-right: 1px solid var(--bs-border-color) !important;
  background: #f8f8f8;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 0 10px;
  height: 32px;
}

.cke_fake a.cke_button {
  height: auto !important;
  padding: 0 !important;
}

.cke_fake a.cke_button_off:hover {
  background: transparent !important;
  border: 0 !important;
}

.cke_fake .button.token {
  background: url("/static/js/ckeditor/plugins/crmtemplates/images/icon.png?t=H0CG") no-repeat;
  display: block;
  float: right;
  width: 16px;
  height: 16px;
  margin-top: -1px;
}

.cke_textarea_inline {
  border: 1px solid #bbb;
}

.cke_dialog_footer {
  display: flex;
  justify-content: center;
  background-color: #fff !important;
  padding: 1rem;
}

a.cke_dialog_ui_button {
  border-radius: 0.25rem !important;
}

.cke_dialog_footer_buttons a.cke_dialog_ui_button span {
  font-size: 1rem !important;
  font-weight: normal !important;
  padding: 0.35rem 1rem !important;
}

.cke_dialog_title {
  background-color: var(--primary-color) !important;
  font-family: var(--font-headings) !important;
  font-weight: var(--font-headings-weight) !important;
  font-size: 1.2rem !important;
  color: #fff !important;
  padding: 0.5rem 1rem !important;
}

a.cke_dialog_close_button {
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
  filter: invert(1) grayscale(100%) brightness(200%);
}

.cke_fake + .textarea textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.jsoneditor {
  border: thin solid var(--bs-border-color) !important;
  height: 500px !important;
}

.jsoneditor-modal .pico-modal-header {
  background: var(--primary-color) !important;
}

.jsoneditor-modal a {
  color: var(--primary-color) !important;
}

.jsoneditor-modal .selectr-selected .selectr-tag {
  background-color: var(--primary-color) !important;
}

.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.jsoneditor-menu {
  background-color: #f8f8f8 !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.jsoneditor-menu a.jsoneditor-poweredBy {
  display: none !important;
}

.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
  background-color: var(--primary-color) !important;
}

.ace-jsoneditor .ace_marker-layer .ace_active-line {
  background: var(--primary-color-lighter) !important;
}

.jsoneditor-menu > button {
  background-image: url("../../images/jsoneditor/jsoneditor-icons.svg") !important;
}

.jsoneditor-menu > .jsoneditor-modes > button {
  background-image: none !important;
  color: #3a3a3a !important;
}

textarea.jsoneditor-text {
  outline: 0 !important;
}

div.jsoneditor-field.jsoneditor-highlight, div.jsoneditor-field[contenteditable=true]:focus,
div.jsoneditor-field[contenteditable=true]:hover,
div.jsoneditor-value.jsoneditor-highlight,
div.jsoneditor-value[contenteditable=true]:focus,
div.jsoneditor-value[contenteditable=true]:hover {
  background-color: #ebebeb !important;
  border: 1px solid transparent !important;
  color: #666;
}

tr.jsoneditor-highlight, tr.jsoneditor-selected {
  background-color: #f2f2f2 !important;
}

.flatpickr-calendar {
  box-shadow: 1px 0 #e6e6e6, -1px 0 #e6e6e6, 0 1px #e6e6e6, 0 -1px #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.0784313725);
}
.flatpickr-calendar .flatpickr-calendar.open {
  z-index: 66666666666;
}
.flatpickr-calendar .flatpickr-day.today,
.flatpickr-calendar .flatpickr-day.today:hover {
  background: #fff;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 100%;
  font-weight: bold;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-day.startRange.inRange,
.flatpickr-calendar .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover,
.flatpickr-calendar .flatpickr-day.selected.prevMonthDay,
.flatpickr-calendar .flatpickr-day.startRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.endRange.prevMonthDay,
.flatpickr-calendar .flatpickr-day.selected.nextMonthDay,
.flatpickr-calendar .flatpickr-day.startRange.nextMonthDay,
.flatpickr-calendar .flatpickr-day.endRange.nextMonthDay {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.flatpickr-calendar span.flatpickr-weekday {
  font-weight: bold !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--primary-color) !important;
}
.flatpickr-calendar .flatpickr-calendar.inline {
  box-shadow: none;
  border: none;
}
.flatpickr-calendar .input-flatpickr-inline .flatpickr-calendar.open {
  z-index: 66666666666;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  margin-right: 2rem !important;
  background-color: #fff !important;
  font-size: 15px !important;
  font-family: var(--font-general) !important;
  font-weight: 500 !important;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  font-weight: 400 !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--primary-color) !important;
}
.flatpickr-calendar .numInputWrapper:hover {
  background: transparent !important;
}
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
  font-family: var(--font-general) !important;
  font-size: 15px !important;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  font-weight: 500 !important;
  font-size: inherit !important;
  padding: 0 0 0 0.5ch !important;
}
.flatpickr-calendar .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-calendar .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-calendar .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 rgba(var(--primary-color-rgb), 0.15) !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month {
  padding: 7px !important;
}

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
  margin-bottom: 15px;
}

.CodeMirror:last-child {
  margin-bottom: 0;
}

.CodeMirror-scroll {
  height: auto;
}

.CodeMirror-lines {
  width: 1px;
}

.lobipanel .card-body {
  padding: 1.5rem 0;
}

.lobipanelcard .card-body {
  padding: 1.5rem;
}

.lobipanel > .card-header {
  background-color: transparent !important;
}

.lobipanelcard .card-header,
.lobipanel .card-header.ui-sortable-handle {
  padding: 1rem 1.5rem;
}

.lobipanel > .card-header > .card-title {
  margin-bottom: 0;
  max-width: calc(100% - 150px);
  padding-left: 0;
  cursor: move;
}

.lobipanel.panel-expanded > .card-header > .card-title {
  margin-bottom: 0;
  max-width: calc(100% - 60px);
}

.lobipanelcard > .card-header > .card-title h2,
.lobipanel > .card-header > .card-title h2 {
  color: var(--widget-heading-contrast-text);
}

.flatpickr-calendar.inline {
  top: 0 !important;
}

.lobipanel > .card-body {
  z-index: 1;
}

.lobipanel > .card-header .dropdown {
  position: initial;
}

.lobipanel > .card-header .dropdown .dropdown-toggle:hover,
.lobipanel > .card-header .dropdown .dropdown-toggle:hover:focus {
  text-shadow: none;
  background-color: #fff;
}

.lobipanel .card-header .dropdown .dropdown-menu {
  position: absolute;
}

.lobipanel .card-header .dropdown .dropdown-menu .dropdown-item {
  margin-left: 10px;
}

.lobipanel .card-header .dropdown .dropdown-menu .dropdown-item .mdi:before {
  font-size: 17px;
}

.lobipanel .card-header .dropdown .dropdown-menu .dropdown-item:hover,
.lobipanel .card-header .dropdown .dropdown-menu .dropdown-item:focus:hover {
  text-shadow: none !important;
  background-color: transparent !important;
  cursor: pointer;
}

.lobipanel > .card-header .dropdown .dropdown-menu {
  top: 12px !important;
  right: 12px;
}

.lobipanel > .card-header .dropdown .dropdown-toggle {
  cursor: pointer;
  color: var(--primary-color);
}

.lobipanel.panel-expanded,
.lobipanel.panel-expanded iframe {
  /*height: 100vh !important;*/
  /* Problems with long Metabase */
}

.dropdown-item .mdi {
  font-size: 20px;
}

.lobipanel-parent-sortable {
  min-height: auto;
}

body.main .lobipanel {
  box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--primary-color-rgb), 0.15) !important;
  z-index: 1;
  background: #fff; /* Add !important avoids being able to be overwritten */
}

.lobipanelcard .mdi {
  font-size: 20px;
  color: var(--link-ico-color); /* Don't let it be important, because it overwrites other MDIs */
  vertical-align: middle;
}

.lobipanelcard .mdi:hover {
  color: var(--link-ico-color-hover); /* Don't let it be important, because it overwrites other MDIs */
}

.body.widget .lobipanel {
  display: none;
}

.lobipanel .dropdown-item:active {
  background: #fff;
}

#lobiWidgets .lobipanel.widget1:before,
#lobiWidgets .lobipanel.widget2:before,
#lobiWidgets .lobipanel.widget3:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.3;
}

#lobiWidgets .lobipanel.widget1 .card:hover,
#lobiWidgets .lobipanel.widget2 .card:hover {
  background-color: rgba(238, 238, 238, 0.9) !important;
}

.lobipanel-placeholder {
  background-color: rgba(var(--primary-color-rgb), 0.2);
  border: 1px dashed rgba(var(--primary-color-rgb), 0.2);
}

.lobipanel.panel-unpin.panel-minimized > .card-header .dropdown .dropdown-menu {
  display: flex;
}

.lobipanel-minimized-toolbar {
  background: transparent;
}

.lobipanel-minimized #column {
  z-index: 1 !important;
}