/*----------VARIABLES----------*/
:root {
  --fontHeader: "roboto";
  --fontText: "roboto";
  --text: black;
  --font: white;
  --fontSecondary: #f3f5f7;
  --radius: 25px;
  --bs-danger-bg-subtle: red;
  --bs-success-bg-subtle: lightgreen;
  --bs-info-bg-subtle: lightblue;
  --bs-warning-bg-subtle: yellow;
}

[data-theme=dark] {
  --text: white;
  --font: #14161A;
  --fontSecondary: #24282e;
  --primaryFont: white;
}

/*---------GENERAL--------*/
.main, body {
  background-color: var(--font);
  color: var(--text);
  font-size: calc(12pt + var(--fontPlusSize));
}

i {
  font-size: calc(12pt + var(--fontPlusSize));
}

a {
  color: var(--secondary);
}

.main-content {
  width: 100%;
  height: 100%;
  padding: 30px 50px 20px;
}

.page-container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-left: 280px;
  transition: padding-left 0.3s ease 0s;
}

.sbar_collapsed.page-container {
  padding-left: 0;
}

.h-full {
  height: 100%;
}

.main-content {
  width: 100%;
}

.main-content-inner {
  padding: 0 30px 50px;
}

@media screen and (max-width: 600px) {
  .main-content {
    padding: 20px;
  }
}
/*----------MENU----------*/
.logo {
  width: 120px;
  padding: 5px 0;
}
.logo a {
  width: 100%;
}
.logo a img {
  width: 100%;
}

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

/*-------Table------*/
.table {
  margin-top: 10px;
  width: 100%;
  max-width: 100% !important;
}
.table td, .table th {
  color: var(--text);
}

.active > .page-link, .page-link.active {
  z-index: 3;
  color: var(--textSecondary);
  background-color: var(--primary);
  border-color: lightgrey;
  font-size: calc(10pt + var(--fontPlusSize));
}

.table-primary {
  background-color: var(--primary);
}
.table-primary th {
  color: var(--textSecondary);
}

.page-link, .disabled > .page-link, .page-link.disabled {
  color: grey;
  pointer-events: none;
  background-color: transparent;
  border-color: lightgrey;
  font-size: calc(10pt + var(--fontPlusSize));
}

.dt-buttons button {
  margin-right: 8px;
}

/*------------------*/
/*-----Sidebar Menu -------*/
.sidebar-header {
  display: flex;
  justify-content: center;
}

.sidebar-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  height: 100vh;
  width: 280px;
  overflow: hidden;
  background: var(--primary);
  transition: all 0.3s ease 0s;
}

.sbar_collapsed .sidebar-menu {
  left: -280px;
}

.main-menu {
  height: calc(100% - 100px);
  overflow: hidden;
  padding: 20px 10px 0 0;
  transition: all 0.3s ease 0s;
}

.menu-inner {
  overflow-y: scroll;
  height: 100%;
}

.slimScrollBar {
  background: #fff;
  opacity: 0.1;
}

.sidebar-header {
  padding: 19px 32px 20px;
  border-bottom: 1px solid rgba(211, 211, 211, 0.322);
}

.sidebar-menu .logo {
  text-align: center;
}

.logo a {
  display: inline-block;
}

.metismenu {
  padding-left: 10px;
  padding-bottom: 30px;
}

.metismenu > li > a {
  padding-left: 32px !important;
}

.metismenu li a {
  position: relative;
  display: block;
  color: var(--textSecondary);
  font-size: calc(17px + var(--fontPlusSize));
  text-transform: capitalize;
  padding: 12px 10px;
  letter-spacing: 0;
  font-weight: 400;
}

.metismenu li a i {
  transition: all 0.3s ease 0s;
}

.metismenu li a:after {
  position: absolute;
  content: "\f107";
  font-family: fontawesome;
  right: 15px;
  top: 12px;
  font-size: calc(20px + var(--fontPlusSize));
}

.metismenu li.active > a:after {
  content: "\f106";
}

.metismenu li a:only-child:after {
  content: "";
}

.metismenu li a span {
  margin-left: 10px;
}

.metismenu li.active > a,
.metismenu li:hover > a {
  color: var(--accent);
}

.metismenu li li a {
  padding: 8px 20px;
}

.metismenu li ul {
  padding-left: 37px;
}

.metismenu > li:hover > a,
.metismenu > li.active > a {
  color: var(--accent);
}

.metismenu li:hover > a,
.metismenu li.active > a {
  color: var(--accent);
}

.metismenu li:hover > a i,
.metismenu li.active > a i {
  color: var(--accent);
}

.metismenu li li a:after {
  top: 6px;
}

/*--- END Sidebar ----*/
/*---- Header Area ----*/
.header-area {
  padding: 10px 30px;
  background: var(--fontSecondary);
  border-bottom: 1px solid lightgrey;
}

.nav-btn {
  margin: 10px 30px 0 0;
  cursor: pointer;
}

.nav-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--secondary);
  margin: 4px 0;
  border-radius: 15px;
  transition: all 0.3s ease 0s;
}

.nav-btn span:nth-child(2) {
  opacity: 0;
}

.nav-btn span:first-child {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-btn span:last-child {
  transform: rotate(-45deg) translate(3px, -3px);
}

.sbar_collapsed .nav-btn span {
  transform: none;
  opacity: 1;
}

.search-box form {
  position: relative;
}

.search-box input {
  border-radius: 33px;
  height: 40px;
  padding-left: 20px;
  padding-right: 40px;
  letter-spacing: 0;
  border: 1px solid lightgrey;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.search-box input::-webkit-input-placeholder {
  color: #bbbcc9;
}

.search-box input::-moz-placeholder {
  color: #bbbcc9;
}

.search-box input:-ms-input-placeholder {
  color: #bbbcc9;
}

.search-box form i {
  position: absolute;
  right: 21px;
  top: 14px;
  font-size: calc(14px + var(--fontPlusSize));
  color: #bbbcc9;
}

/*-----USER----*/
.img-profile {
  max-height: 100%;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid lightgrey;
  cursor: pointer;
}
.img-profile img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100px;
}
.img-profile:hover {
  border: 2px solid var(--primary);
}

.dropdown-menu {
  border-radius: 25px;
  border: 1px solid lightgrey;
  font-size: calc(13pt + var(--fontPlusSize));
}

.dropdown-item {
  padding-left: 20px;
}
.dropdown-item:hover, .dropdown-item:active {
  background-color: transparent;
  color: var(--primary);
}

.expanded .maxmin li#full-view-exit {
  display: inline-block;
}

.maxmin li#full-view-exit {
  display: none;
}

.expanded .maxmin li#full-view {
  display: none;
}

.maxmin li#full-view {
  display: inline-block;
}

.maxmin li > i {
  font-size: calc(25px + var(--fontPlusSize));
  color: #bdbcbc;
  vertical-align: middle;
  cursor: pointer;
}

.maxmin li:hover > i {
  color: var(--primary);
}

/*--- END Header Area ---*/
/*----------TEXTO---------*/
.text-secondary, .text-secondary span, .text-secondary i {
  font-size: calc(11pt + var(--fontPlusSize));
  color: lightgrey;
}

a .text-secondary:hover,
a .text-secondary:hover i {
  color: var(--secondary);
}

/*----------BOTONES----------*/
.btn {
  padding: 5px 20px 7px !important;
  font-size: calc(13pt + var(--fontPlusSize)) !important;
  border: 0 !important;
  border-radius: 20px !important;
}

.btn-primary {
  background-color: var(--primary) !important;
  color: var(--textSecondary);
}
.btn-primary:hover {
  background-color: var(--secondary) !important;
}

.btn-secondary {
  background-color: var(--secondary);
  border: 0;
}
.btn-secondary:hover {
  background-color: var(--tertiary) !important;
}

.btn-primary:active, .btn-secondary:active {
  background-color: var(--accent) !important;
}

/*----------MESSAGES----------*/
.message {
  position: fixed;
  top: 10px;
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: center;
}
.message .notification {
  padding-right: 45px;
  min-width: 250px;
}

/*-----------OTROS-----------*/
.img-404 {
  width: 350px;
  max-width: 90%;
}
.img-404 img {
  width: 100%;
}

.fc-h-event {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}

/*-----------OBJETOS----------*/
.line {
  background-color: rgba(138, 212, 235, 0.363);
  border: 0;
  margin: 8px 0 5px;
  width: 100%;
}

.icon-circle {
  padding: 5px 7px;
  border-radius: 100%;
  background-color: white;
}
.icon-circle i {
  color: var(--primary);
  font-size: calc(15pt + var(--fontPlusSize));
}

.d-none {
  display: none;
}

.box {
  width: 25%;
  background-color: var(--primary);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  border-radius: 25px;
  padding: 50px;
  color: white;
}

.cursor-pointer {
  cursor: pointer;
}

@media screen and (max-width: 1200px) {
  .box {
    width: 50%;
  }
}
@media screen and (max-width: 700px) {
  .box {
    width: 90%;
    padding: 30px;
  }
}
h1 {
  --baseFontSize: 2rem;
}

h2 {
  --baseFontSize: 1.75rem;
}

h3 {
  --baseFontSize: 1.5rem;
}

h4 {
  --baseFontSize: 1.25rem;
}

h5 {
  --baseFontSize: 1rem;
}

h6 {
  --baseFontSize: 0.875rem;
}

h1, h2, h3, h4, h5, h6 {
  font-size: calc(var(--baseFontSize, 1rem) + var(--fontPlusSize));
}

/*---------Bootstrap---------*/
/*--FORM--*/
.form-control, .form-select {
  border: 1px solid lightgrey;
  border-radius: var(--radius);
  color: var(--text) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  font-size: calc(1rem + var(--fontPlusSize));
}

.form-control:focus, .form-select:focus {
  border: 1px solid var(--accent);
  color: var(--text) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.form-check-input,
.form-check-input:focus {
  border-color: var(--primary);
}

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

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23999999' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
  color: black;
}

/*--MODAL--*/
.modal-content {
  background-color: var(--font);
  border: 1px solid lightgrey;
  border-radius: var(--radius);
  color: var(--text);
}

.modal-header {
  border: 0;
}

.btn-close {
  --bs-btn-close-bg: "";
  color: var(--text);
  font-size: calc(18pt + var(--fontPlusSize));
  display: flex;
  justify-content: center;
  align-items: center;
}

.modalTable td, .modalTable th {
  background-color: var(--font);
}

/*----------*/
.alert {
  padding: 12px 40px 12px 20px;
  position: relative;
  border: 0;
  border-radius: var(--radius);
}
.alert .close {
  background-color: transparent;
  border: 0;
  position: absolute;
  right: 15px;
  top: 13px;
}
.alert .close:hover {
  color: var(--accent);
}

/*------------*/
.btn.btn-light2 {
  background-color: transparent;
  color: var(--text);
}

.day-quote p {
  font-size: 10pt;
  opacity: 0.4;
  font-style: italic;
}

.stat-card {
  background-color: var(--secondary);
  color: var(--textSecondary);
  padding: 20px 15px 15px;
  border-radius: 25px;
  min-width: 160px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.stat-card i {
  font-size: 25pt;
  padding: 5px;
}
.stat-card span {
  font-size: 11pt;
  opacity: 0.6;
}
.stat-card h5 {
  line-height: 5px;
}
.stat-card h5 span {
  font-size: 10pt;
  font-weight: 500;
}

/*-----CALENDAR-------*/
.calendar {
  width: 55%;
}

.fc .fc-button-primary {
  background-color: var(--primary);
  border: 0;
  border-radius: 25px;
}

@media (max-width: 1700px) {
  .calendar {
    width: 75%;
  }
}
@media (max-width: 1000px) {
  .calendar {
    width: 100%;
  }
}
/*------------*/
.contact_results,
.sug-results {
  position: absolute;
  z-index: 10;
  background-color: #ffffff;
  margin-top: 0.25rem;
  border: 1px solid #d1d5db;
  width: 100%;
  overflow: hidden;
  border-radius: 0.375rem;
  color: black;
}

.sug-results {
  margin-top: 2.4rem;
}

.orange {
  color: orange !important;
}

.option-result {
  cursor: pointer;
}
.option-result:hover {
  background-color: slategray;
}

.icon-search {
  position: absolute;
  color: grey;
  right: 12px;
  bottom: 10px;
  display: flex;
  align-items: center;
  padding-left: 3rem;
  pointer-events: none;
}

.icon-search-r {
  position: absolute;
  color: grey;
  left: 16px;
  bottom: 10px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.input-search-r {
  padding-left: 36px;
}

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

.flexnone {
  flex: none !important;
}

.font-ultra-small {
  font-size: calc(6pt + var(--fontPlusSize));
}

/*------------LOADER----------*/
.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--font);
  z-index: 999;
}

.page-overlay .content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: grey;
}

.loaderpage {
  width: 35px;
  height: 80px;
  position: relative;
}

.loaderpage:after {
  content: "";
  position: absolute;
  inset: 0 0 20px;
  border-radius: 15px 15px 10px 10px;
  padding: 1px;
  background: repeating-linear-gradient(-45deg, var(--primary) 0 8px, var(--secondary) 0 12px) content-box;
  --c: radial-gradient(farthest-side,#000 94%,#0000);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0) 0 0), var(--c) -10px -10px, var(--c) 15px -14px, var(--c) 9px -6px, var(--c) -12px 9px, var(--c) 14px 9px, var(--c) 23px 27px, var(--c) -8px 35px, var(--c) 50% 50%, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0), var(--c) -10px -10px, var(--c) 15px -14px, var(--c) 9px -6px, var(--c) -12px 9px, var(--c) 14px 9px, var(--c) 23px 27px, var(--c) -8px 35px, var(--c) 50% 50%, linear-gradient(rgba(0, 0, 0, 0) 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude, add, add, add, add, add, add, add, add;
  -webkit-mask-repeat: no-repeat;
  animation: l2 3s infinite;
}

.loaderpage:before {
  content: "";
  position: absolute;
  inset: 50% calc(50% - 4px) 0;
  background: #e0a267;
  border-radius: 50px;
}

/*--------------MIXINS-------------*/
/*------------ANIMACIONES----------*/
@keyframes l2 {
  0% {
    -webkit-mask-size: auto, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  10% {
    -webkit-mask-size: auto, 25px 25px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  20% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  30% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  40% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 0 0, 0 0, 0 0, 0 0;
  }
  50% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 0 0, 0 0, 0 0;
  }
  60% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 25px 25px, 0 0, 0 0;
  }
  70% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 25px 25px, 25px 25px, 0 0;
  }
  80%, 100% {
    -webkit-mask-size: auto, 25px 25px, 25px 25px, 30px 30px, 30px 30px, 25px 25px, 25px 25px, 25px 25px, 200% 200%;
  }
}/*# sourceMappingURL=theme.css.map */