@charset "UTF-8";
/* Fuente regular */
@font-face {
  font-family: "Inter Regular";
  font-weight: normal;
  font-style: normal;
  src: url("Inter-Regular.ttf") format("truetype");
  font-display: swap;
}
/* Fuente bold */
@font-face {
  font-family: "Inter Bold";
  font-weight: bold;
  font-style: normal;
  src: url("Inter-Bold.ttf") format("truetype");
  font-display: swap;
}
/* Fuente medium */
@font-face {
  font-family: "Inter Medium";
  font-weight: 500;
  /* Medium generalmente se usa como 500 */
  font-style: normal;
  src: url("Inter-Medium.ttf") format("truetype");
  font-display: swap;
}
/* Fuente Light */
@font-face {
  font-family: "Inter Light";
  font-weight: 300;
  /* Light generalmente se usa como 300 */
  font-style: normal;
  src: url("Inter-Light.ttf") format("truetype");
  font-display: swap;
}
:root {
  --primaryNewRed: #ec3a49;
  --primaryDarkBlue: #0b0f32;
  --secondaryBlue: #5e6fa9;
  --secondaryBlueOpacity1: rgba(94, 111, 169, 0.1);
  --secondaryBlueOpacity2: rgba(94, 111, 169, 0.3);
  --secondaryBlueOpacity3: rgba(94, 111, 169, 0.05);
  --secondaryBlueOpacity4: rgba(94, 111, 169, 0.5);
  --secondaryOrange: #ff6441;
  --secondarySalmon: #ff8367;
  --neutralGray: #eff1f6;
  --neutralGrayOpacity: rgba(96, 113, 169, 0.06);
  --neutralGraySecondary: #e3e3e3;
}

.hide {
  display: none !important;
}

body {
  font-family: "Inter Regular", "Inter Medium", "Inter Light";
}

.navViewPersonalInformation {
  font-family: "Inter Light";
}

a#markBackHeader {
  background-color: #4c598f;
  color: white;
  font-size: 17px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 5px;
  margin-right: 0.5em;
}

a#markBackHeader:hover {
  background-color: var(--secondaryBlue);
}

body {
  background: white;
}

button,
input,
select,
textarea {
  cursor: pointer;
  outline: none;
}

.buttonPrimary {
  background-color: var(--secondaryBlue);
  color: white;
  height: 3em;
  width: 7em;
  border-radius: 8px;
  padding: 0em 0.5em;
  font-family: "Inter Bold";
  font-size: 13px;
  border: 1px solid var(--secondaryBlue);
}

.buttonPrimary:hover {
  color: #edf2f7;
  background-color: var(--primaryDarkBlue);
  border: 1px solid var(--primaryDarkBlue);
}

.buttonPrimary:disabled {
  background-color: var(--secondaryBlueOpacity1);
  color: var(--secondaryBlueOpacity1);
  cursor: auto;
  border: transparent;
}

.buttonActiveDisabled:disabled {
  background-color: var(--secondaryBlueOpacity1) !important;
  color: var(--secondaryBlueOpacity1) !important;
  cursor: auto !important;
  border: transparent !important;
}

.buttonSecondary {
  background-color: white;
  border: 1px solid var(--secondaryBlue);
  color: var(--secondaryBlue);
  margin-right: 0.5em;
  height: 3em;
  width: 7em;
  border-radius: 5px;
  padding: 0em 0.5em;
  font-family: "Inter Bold";
}

.buttonSecondary:hover {
  color: var(--primaryDarkBlue);
  border: 1px solid var(--primaryDarkBlue);
}

a.buttonSecondary {
  padding: 0.8em 1.5em;
  text-decoration: none;
  font-size: 13px;
  margin-top: 0.1em;
}

button.buttonUpload {
  width: 162px;
  border: none;
  padding: 2px;
  height: 45px;
  border-radius: 9px;
  outline: none;
  color: var(--secondaryBlue);
  background: #edf2f7;
  text-align: center;
  font-size: 15px;
  margin-right: 1em;
  width: 44px;
}
button.buttonUpload span {
  margin-top: 4px;
}

button.buttonUpload:hover {
  background-color: var(--secondaryBlueOpacity2);
}

button.buttonUploadActive {
  background-color: var(--secondaryBlue);
  color: white;
}

.buttonIcon {
  background-color: transparent;
  color: var(--secondaryBlue);
  border: none;
  height: 35px;
  width: 35px;
  padding: 0;
  padding-top: 2px;
  border-radius: 9px;
}
.buttonIcon span {
  font-size: 21px;
}
.buttonIcon img {
  width: 18px;
}
.buttonIcon img.eye {
  width: 21px;
}

.buttonIcon:hover {
  background-color: var(--secondaryBlue);
  color: white;
}
.buttonIcon:hover img {
  filter: brightness(0) saturate(100%) invert(97%) sepia(0%) saturate(2714%) hue-rotate(148deg) brightness(105%) contrast(104%);
  opacity: 0.9 !important;
}

.buttonIcon:disabled {
  background-color: transparent;
  cursor: auto;
  border: transparent;
  color: var(--secondaryBlue);
}
.buttonIcon:disabled .tooltiptext {
  display: none;
}
.buttonIcon:disabled img,
.buttonIcon:disabled span {
  filter: brightness(0) saturate(96%) invert(55%) sepia(28%) saturate(1220%) hue-rotate(210deg) brightness(68%) contrast(97%);
  opacity: 0.4 !important;
}

.buttonAdd {
  background-color: transparent;
  width: 42px;
  height: auto;
  border: none;
  border-radius: 23px;
  padding: 0;
  margin: 0;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltiptext {
  visibility: hidden;
  width: max-content !important;
  min-width: 38px;
  background-color: var(--primaryDarkBlue);
  font-size: 12px !important;
  color: #fff !important;
  text-align: center !important;
  border-radius: 6px;
  padding: 7px 15px !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  transform: translateX(-50%);
  top: 43px;
  justify-content: center !important;
  font-family: "Inter Regular" !important;
  font-weight: initial !important;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--primaryDarkBlue) transparent;
  /* Cambié el color del borde a tu color de fondo */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.dynamic-tooltip:hover .tooltiptext {
  visibility: hidden;
}

ul.list-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  z-index: 1000;
  top: 0;
  position: absolute;
  width: 100%;
}
ul.list-group li.list-group-item {
  position: relative;
  list-style: none;
  left: 16%;
  padding: 1em 1em;
  width: 60vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 11px;
  margin-bottom: 1em;
}
ul.list-group li.list-group-item span.contentText-list-group {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1em;
}
ul.list-group li.list-group-item span.contentText-list-group p.text-list-group {
  margin: 0;
  font-family: "Inter Bold";
  white-space: nowrap;
}
ul.list-group li.list-group-item i.icon-list-group {
  font-size: 22px;
}
ul.list-group li.list-group-item i.fa-xmark {
  cursor: pointer;
}
ul.list-group li.list-group-item:first-child {
  margin-top: 5px;
}
ul.list-group li.list-group-item-success {
  background-color: #dff8cf;
  color: #1f5911;
}
ul.list-group li.list-group-item-danger {
  background-color: #eecdd2;
  color: #b30937;
}

span.contentInputPrimary {
  margin-top: 1em;
  display: block;
  text-align: left;
}
span.contentInputPrimary label {
  font-size: 13px;
  font-family: "Inter Bold";
  color: var(--primaryDarkBlue);
}

input.inputPrimary {
  width: 96%;
  margin-top: 0.5em;
  height: 2em;
  padding: 0.5em;
  padding-left: 1em;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid var(--secondaryBlueOpacity4);
  color: gray;
  font-family: "Inter Light";
}

input.inputPrimary:focus {
  box-shadow: 0px 1px 2px rgba(94, 111, 169, 0.5);
  border: 1px solid var(--secondaryBlue);
}

.inputPrimary:disabled {
  background-color: var(--secondaryBlueOpacity1);
  border: 1px solid var(--secondaryBlueOpacity1);
  font-family: "Inter Regular";
}

.contentSelectPrimary {
  margin-top: 1em;
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;
}
.contentSelectPrimary label {
  font-size: 13px;
  font-family: "Inter Bold";
}
.contentSelectPrimary select.selectPrimary {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  padding: 7px 10px;
  padding-right: 41px;
  height: 42px;
  width: 100%;
  font-family: "Inter Regular";
  background-color: transparent;
  font-size: 13px;
  color: gray;
  border-radius: 5px;
  transition: width 0.3s ease;
  border: 1px solid var(--secondaryBlueOpacity4);
  margin-top: 0.5em;
}
.contentSelectPrimary select:focus ~ i {
  transform: rotate(180deg);
}
.contentSelectPrimary select.selectPrimary:focus {
  box-shadow: 0px 1px 2px rgba(94, 111, 169, 0.5);
  border: 1px solid var(--secondaryBlue);
}
.contentSelectPrimary i {
  position: absolute;
  right: 15px;
  top: calc(50% + 5px);
  font-size: 13px;
  color: var(--secondaryBlue);
  pointer-events: none;
  transition: transform 0.3s ease, color 0.3s ease;
}
.contentSelectPrimary option {
  background-color: white;
  color: black;
}

div.contentSelectFilter {
  position: relative;
  display: inline-block;
}
div.contentSelectFilter select.selectFilter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  padding: 7px 10px;
  padding-right: 40px;
  height: 45px;
  outline: 0;
  border: 0;
  font-family: "Inter Bold";
  background-color: var(--secondaryBlueOpacity1);
  font-size: 1em;
  color: var(--secondaryBlue);
  border-radius: 7px;
  transition: width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: auto;
}
div.contentSelectFilter select.selectFilter option {
  font-family: "Inter Regular";
}
div.contentSelectFilter select:hover {
  background-color: var(--secondaryBlueOpacity2);
}
div.contentSelectFilter select:focus,
div.contentSelectFilter select:valid:not(:has(option[value=all]:checked)) {
  background-color: var(--secondaryBlue);
  color: white;
}
div.contentSelectFilter select:focus ~ i.fa-angle-down {
  color: white;
  transform: rotate(180deg);
}
div.contentSelectFilter select:valid:not(:has(option[value=all]:checked)) ~ i {
  color: white;
}
div.contentSelectFilter select:valid:not(:has(option[value=all]:checked)) ~ i::before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  color: white;
  pointer-events: all !important;
}
div.contentSelectFilter i {
  position: absolute;
  right: 15px;
  top: calc(50% - 8px);
  color: var(--secondaryBlue);
  pointer-events: none;
  transition: transform 0.3s ease, color 0.3s ease;
}
div.contentSelectFilter option {
  background-color: white;
  color: black;
}

span.contentArrows {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  gap: 0.5rem;
}
span.contentArrows span {
  text-align: left;
  width: min-content;
  cursor: pointer;
  color: var(--secondaryBlue);
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 18px;
}
span.contentArrows .arrowDown {
  transform: rotate(0deg);
  /* Flecha hacia abajo */
}
span.contentArrows .arrowUp {
  transform: rotate(180deg);
  /* Flecha hacia arriba */
}

div#contentSearchBar {
  width: 100%;
}
div#contentSearchBar div#search {
  width: 100%;
  display: flex;
}
div#contentSearchBar div#search input#inputSearch {
  width: 44%;
  border: none;
  padding: 8px;
  padding-left: 21px;
  height: 30px;
  border-radius: 20px 0 0 20px;
  color: var(--secondaryBlue);
  background-color: #f4f8fb;
  font-size: 14px;
}
div#contentSearchBar div#search button#searchButton {
  width: 40px;
  height: 46px;
  border: none;
  background: #f4f8fb;
  text-align: center;
  color: var(--secondaryBlue);
  border-radius: 0 20px 20px 0;
  font-size: 20px;
  padding-right: 10px;
  padding-top: 4px;
}
div#contentSearchBar div#search button#searchButton span {
  font-size: 30px;
}
div#contentSearchBar div#search button#searchButton img {
  width: 20px;
}

.contentCountry {
  position: relative;
  text-align: left;
  margin-top: 1em;
  display: block;
}
.contentCountry .custom-select {
  position: absolute;
  width: fit-content;
}
.contentCountry .custom-select .selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0px;
  cursor: pointer;
}
.contentCountry .custom-select .selected img {
  width: 20px;
  height: 20px;
  margin: 2px 5px 2px 12px;
}
.contentCountry .custom-select .selected i {
  color: var(--secondaryBlue);
  font-size: 10px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.contentCountry .custom-select .options-container {
  display: none;
  position: absolute;
  top: 91%;
  left: 5px;
  width: 100%;
  border-radius: 4px;
  background: white;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.contentCountry .custom-select .options-container .option {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
.contentCountry .custom-select .options-container .option img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.contentCountry .custom-select .options-container .option:hover {
  background-color: #f0f0f0;
}
.contentCountry .custom-select.open i {
  transform: rotate(180deg);
}
.contentCountry .custom-select.open .options-container {
  display: block;
}
.contentCountry label {
  font-size: 13px;
  font-family: "Inter Bold";
}
.contentCountry input.inputNumber {
  width: calc(100% - 4.5em) !important;
  margin-top: 0.3em;
  height: 2em;
  padding: 0.5em;
  border-radius: 7px;
  border: 1px solid var(--secondaryBlueOpacity4);
  padding-left: 4em !important;
}
.contentCountry input.inputNumber:focus {
  box-shadow: 0px 1px 2px var(--secondaryBlue);
}

span.check {
  margin: 1rem 0rem 1rem 0rem;
  text-align: center;
}
span.check label {
  width: 3em;
  height: 1em;
  padding-right: 1.5em;
}
span.check label input[type=checkbox] {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  visibility: hidden;
  cursor: pointer;
}
span.check label input + i {
  background: transparent;
  border: 1px solid var(--secondaryBlue);
  position: absolute;
  margin-left: 4px;
  border-radius: 5px;
}
span.check label input[type=checkbox] + i {
  height: 1.3em;
  width: 1.3em;
}
span.check label input[type=checkbox]:checked + i + label {
  border: 1px solid var(--secondaryBlue);
}
span.check label input[type=checkbox] + i:before {
  content: "✔";
  color: white;
  padding-right: 6px;
  display: block;
  height: 22px;
  margin-left: -0.1em;
  width: 15px;
  margin-top: -0.1em;
  transition: all 0.25s ease-out;
  transform: scale(0);
  opacity: 0;
  border: transparent;
  background: var(--secondaryBlue);
  border-radius: 7px;
  padding-left: 1px;
}
span.check label input[type=checkbox]:checked + i:before {
  transform: scale(1);
  opacity: 1;
}
span.check label::after {
  border-radius: 12px;
}

div.contentInputRadio {
  margin-bottom: 1em;
  text-align: left;
  position: relative;
}
div.contentInputRadio label {
  margin-left: 2em;
  margin-bottom: 0;
  font-family: "Inter Regular";
}
div.contentInputRadio label input[type=radio] {
  opacity: 0;
}
div.contentInputRadio label input + i {
  background: transparent;
  border: 2px solid var(--secondaryBlue);
  position: absolute;
}
div.contentInputRadio label input[type=radio] + i {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  border: 1.5px solid var(--secondaryBlue);
  margin-top: 0em;
  left: 0px;
}
div.contentInputRadio label input[type=radio] + i:before {
  content: "";
  display: block;
  height: 11px;
  margin-left: 2px;
  width: 11px;
  margin-top: 2px;
  border-radius: 100%;
  transition: all 0.25s ease-out;
  transform: scale(0);
  opacity: 0;
  border: transparent;
  background: var(--secondaryBlue);
}
div.contentInputRadio label input[type=radio]:checked + i:before {
  transform: scale(1);
  opacity: 1;
}

::-webkit-scrollbar {
  overflow: auto;
  width: 8px;
  height: 8px;
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
::-webkit-scrollbar-thumb:active {
  background-color: #999999;
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
::-webkit-scrollbar-track {
  background: #e1e1e1;
  border-radius: 4px;
}

/* Cambiamos el fondo cuando esté en active o hover */
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

.yellow {
  background-color: rgba(255, 199, 133, 0.2);
}

.green {
  background-color: rgba(156, 239, 184, 0.2);
}

.red {
  background-color: rgba(249, 103, 103, 0.2);
}

.blue {
  background-color: rgba(131, 211, 236, 0.2);
}

.orange {
  background-color: rgba(246, 128, 98, 0.2);
}

.purple {
  background-color: #eeebfd;
  /* color: #9f90e3; */
}

.pink {
  background-color: #fbe2f9;
}

div.file-upload {
  border: 2px solid transparent;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 25px;
  margin-top: 1em;
}
div.file-upload input.file-input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 0;
  height: 0;
  cursor: pointer;
}

div.file-upload:hover {
  border: 2px dashed var(--secondaryBlue);
  background-color: var(--secondaryBlueOpacity2) !important;
}

.dragging {
  border: 2px dashed var(--secondaryBlue) !important;
  background-color: var(--secondaryBlueOpacity2) !important;
}

label.file-label {
  border: 2px solid transparent;
}

span.contentInputDate {
  position: relative;
  display: inline-block;
  width: 100%;
}
span.contentInputDate input[type=date],
span.contentInputDate input[type=datetime-local] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  position: relative;
}
span.contentInputDate input[type=date]::-webkit-calendar-picker-indicator,
span.contentInputDate input[type=datetime-local]::-webkit-calendar-picker-indicator {
  z-index: 4;
  opacity: 0;
}
span.contentInputDate label.contentCalendar {
  position: absolute;
  top: 69.9%;
  right: 4px;
  transform: translateY(-53%);
  background-color: var(--secondaryBlueOpacity2);
  padding: 0.62em 0.6em;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
}
span.contentInputDate label.contentCalendar img {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.disableView {
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

button.buttonFilterActive {
  background-color: var(--secondaryBlue);
  color: white;
}

/*# sourceMappingURL=global.css.map */