/*********************
******** TEXT ********
**********************/

.font-bold {
  font-weight: bold !important;
}

.font-italic {
  font-style: italic !important;
}

.text-red {
  color: var(--color-error) !important;
}

.text-ubk-blue {
  color: var(--color-primary) !important;
}

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

.text-white {
  color: white !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

.pre-line,
.allow-line-breaks {
  white-space: pre-line;
}

.no-wrap {
  white-space: nowrap;
}

.allow-word-breaks {
  word-break: break-word;
}

/***********************
****** FONT SIZES ******
***********************/

.font-size-050 {
  font-size: 0.5rem !important;
}

.font-size-075 {
  font-size: 0.75rem !important;
}

.font-size-080 {
  font-size: 0.8rem !important;
}

.font-size-090 {
  font-size: 0.9rem !important;
}

.font-size-100 {
  font-size: 1rem !important;
}

.font-size-1125 {
  font-size: 1.125rem !important;
}

.font-size-125 {
  font-size: 1.25rem !important;
}

.font-size-150 {
  font-size: 1.5rem !important;
}

.font-size-200 {
  font-size: 2rem !important;
}

.font-size-250 {
  font-size: 2.5rem !important;
}

.font-size-300 {
  font-size: 3rem !important;
}

/***********************
***** FONT FAMILIES ****
************************/

.font-family-century-gothic {
  font-family: CenturyGothic, sans-serif;
}

/*******************
***** ALIGNING *****
*******************/

.vertical-align {
  display: flex;
  align-items: center;
}

.horizontal-align {
  display: flex;
  justify-content: center;
}

.center-align {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-start {
  align-content: flex-start;
  display: flex;
}

.justify-center {
  justify-content: center;
}

.align-self-center {
  align-self: center;
}

.gap-05 {
  gap: 0.5rem;
}
.gap-1 {
  gap: 1rem;
}

.gap-125 {
  gap: 1.25rem;
}

.gap-15 {
  gap: 1.5rem;
}
.gap-2 {
  gap: 2rem;
}

/*******************
***** HEADINGS *****
*******************/

.h1 {
  color: var(--color-primary);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.h2 {
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.5rem;
}

.h3 {
  font-weight: bold;
  text-transform: uppercase;
}

.h4 {
  font-weight: bold;
}

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

/*****************
***** MARGIN *****
******************/

.margin-left-auto,
.margin-hor-auto {
  margin-left: auto !important;
}

.margin-right-auto,
.margin-hor-auto {
  margin-right: auto !important;
}

.margin-top-0,
.margin-ver-0,
.margin-0 {
  margin-top: 0rem !important;
}

.margin-bottom-0,
.margin-ver-0,
.margin-0 {
  margin-bottom: 0rem !important;
}

.margin-left-0,
.margin-hor-0,
.margin-0 {
  margin-left: 0rem !important;
}

.margin-right-0,
.margin-hor-0,
.margin-0 {
  margin-right: 0rem !important;
}

.margin-top-01,
.margin-ver-01,
.margin-01 {
  margin-top: 0.1rem !important;
}

.margin-bottom-01,
.margin-ver-01,
.margin-01 {
  margin-bottom: 0.1rem !important;
}

.margin-left-01,
.margin-hor-01,
.margin-01 {
  margin-left: 0.1rem !important;
}

.margin-right-01,
.margin-hor-01,
.margin-01 {
  margin-right: 0.1rem !important;
}

.margin-top-03,
.margin-ver-03,
.margin-03 {
  margin-top: 0.3rem !important;
}

.margin-bottom-03,
.margin-ver-03,
.margin-03 {
  margin-bottom: 0.3rem !important;
}

.margin-left-auto {
  margin-left: auto;
}

.margin-left-v-very-small {
  margin-left: 0.1rem;
}

.margin-right-10px {
  margin-right: 10px;
}

.margin-right-v-very-small {
  margin-right: 0.1rem;
}

.margin-left-03,
.margin-hor-03,
.margin-03 {
  margin-left: 0.3rem !important;
}

.margin-right-03,
.margin-hor-03,
.margin-03 {
  margin-right: 0.3rem !important;
}

.margin-top-05,
.margin-ver-05,
.margin-05 {
  margin-top: 0.5rem !important;
}

.margin-bottom-05,
.margin-ver-05,
.margin-05 {
  margin-bottom: 0.5rem !important;
}

.margin-left-05,
.margin-hor-05,
.margin-05 {
  margin-left: 0.5rem !important;
}

.margin-right-05,
.margin-hor-05,
.margin-05 {
  margin-right: 0.5rem !important;
}

.margin-top-1,
.margin-ver-1,
.margin-1 {
  margin-top: 1rem !important;
}

.margin-bottom-1,
.margin-ver-1,
.margin-1 {
  margin-bottom: 1rem !important;
}

.margin-left-1,
.margin-hor-1,
.margin-1 {
  margin-left: 1rem !important;
}

.margin-right-1,
.margin-hor-1,
.margin-1 {
  margin-right: 1rem !important;
}

.margin-top-15,
.margin-ver-15,
.margin-15 {
  margin-top: 1.5rem !important;
}

.margin-bottom-15,
.margin-ver-15,
.margin-15 {
  margin-bottom: 1.5rem !important;
}

.margin-left-15,
.margin-hor-15,
.margin-15 {
  margin-left: 1.5rem !important;
}

.margin-right-15,
.margin-hor-15,
.margin-15 {
  margin-right: 1.5rem !important;
}

.margin-top-2,
.margin-ver-2,
.margin-2 {
  margin-top: 2rem !important;
}

.margin-bottom-2,
.margin-ver-2,
.margin-2 {
  margin-bottom: 2rem !important;
}

.margin-left-2,
.margin-hor-2,
.margin-2 {
  margin-left: 2rem !important;
}

.margin-right-2,
.margin-hor-2,
.margin-2 {
  margin-right: 2rem !important;
}

.margin-top-3,
.margin-ver-3,
.margin-3 {
  margin-top: 3rem !important;
}

.margin-bottom-3,
.margin-ver-3,
.margin-3 {
  margin-bottom: 3rem !important;
}

.margin-left-3,
.margin-hor-3,
.margin-3 {
  margin-left: 3rem !important;
}

.margin-right-3,
.margin-hor-3,
.margin-3 {
  margin-right: 3rem !important;
}

.margin {
  margin: 0.5rem;
}

.margin-top {
  margin-top: 0.5rem;
}

.margin-bottom {
  margin-bottom: 0.5rem;
}

.margin-left {
  margin-left: 0.5rem;
}

.margin-right {
  margin-right: 0.5rem;
}

/**************************
***** NEGATIVE MARGIN *****
***************************/

.margin-top-n05,
.margin-ver-n05,
.margin-n05 {
  margin-top: -0.5rem !important;
}

.margin-bottom-n05,
.margin-ver-n05,
.margin-n05 {
  margin-bottom: -0.5rem !important;
}

.margin-left-n05,
.margin-hor-n05,
.margin-n05 {
  margin-left: -0.5rem !important;
}

.margin-right-n05,
.margin-hor-n05,
.margin-n05 {
  margin-right: -0.5rem !important;
}

.margin-top-n1,
.margin-ver-n1,
.margin-n1 {
  margin-top: -1rem !important;
}

.margin-bottom-n1,
.margin-ver-n1,
.margin-n1 {
  margin-bottom: -1rem !important;
}

.margin-left-n1,
.margin-hor-n1,
.margin-n1 {
  margin-left: -1rem !important;
}

.margin-right-n1,
.margin-hor-n1,
.margin-n1 {
  margin-right: -1rem !important;
}

/*****************
***** PADDING ****
******************/

.padding-title {
  padding-top: 30px;
  padding-left: 30px;
}

.padding-top-0,
.padding-ver-0,
.padding-0 {
  padding-top: 0rem !important;
}

.padding-bottom-0,
.padding-ver-0,
.padding-0 {
  padding-bottom: 0rem !important;
}

.padding-left-0,
.padding-hor-0,
.padding-0 {
  padding-left: 0rem !important;
}

.padding-right-0,
.padding-hor-0,
.padding-0 {
  padding-right: 0rem !important;
}

.padding-top-01,
.padding-ver-01,
.padding-01 {
  padding-top: 0.1rem !important;
}

.padding-bottom-01,
.padding-ver-01,
.padding-01 {
  padding-bottom: 0.1rem !important;
}

.padding-left-01,
.padding-hor-01,
.padding-01 {
  padding-left: 0.1rem !important;
}

.padding-right-01,
.padding-hor-01,
.padding-01 {
  padding-right: 0.1rem !important;
}

.padding-top-03,
.padding-ver-03,
.padding-03 {
  padding-top: 0.3rem !important;
}

.padding-bottom-03,
.padding-ver-03,
.padding-03 {
  padding-bottom: 0.3rem !important;
}

.padding-left-03,
.padding-hor-03,
.padding-03 {
  padding-left: 0.3rem !important;
}

.padding-right-03,
.padding-hor-03,
.padding-03 {
  padding-right: 0.3rem !important;
}

.padding-top-05,
.padding-ver-05,
.padding-05 {
  padding-top: 0.5rem !important;
}

.padding-bottom-05,
.padding-ver-05,
.padding-05 {
  padding-bottom: 0.5rem !important;
}

.padding-left-05,
.padding-hor-05,
.padding-05 {
  padding-left: 0.5rem !important;
}

.padding-right-05,
.padding-hor-05,
.padding-05 {
  padding-right: 0.5rem !important;
}

.padding-top-1,
.padding-ver-1,
.padding-1 {
  padding-top: 1rem !important;
}

.padding-bottom-1,
.padding-ver-1,
.padding-1 {
  padding-bottom: 1rem !important;
}

.padding-left-1,
.padding-hor-1,
.padding-1 {
  padding-left: 1rem !important;
}

.padding-right-1,
.padding-hor-1,
.padding-1 {
  padding-right: 1rem !important;
}

.padding-top-15,
.padding-ver-15,
.padding-15 {
  padding-top: 1.5rem !important;
}

.padding-bottom-15,
.padding-ver-15,
.padding-15 {
  padding-bottom: 1.5rem !important;
}

.padding-left-15,
.padding-hor-15,
.padding-15 {
  padding-left: 1.5rem !important;
}

.padding-right-15,
.padding-hor-15,
.padding-15 {
  padding-right: 1.5rem !important;
}

.padding-top-2,
.padding-ver-2,
.padding-2 {
  padding-top: 2rem !important;
}

.padding-bottom-2,
.padding-ver-2,
.padding-2 {
  padding-bottom: 2rem !important;
}

.padding-left-2,
.padding-hor-2,
.padding-2 {
  padding-left: 2rem !important;
}

.padding-right-2,
.padding-hor-2,
.padding-2 {
  padding-right: 2rem !important;
}

.padding-top-25,
.padding-ver-25,
.padding-25 {
  padding-top: 2.5rem !important;
}

.padding-bottom-25,
.padding-ver-25,
.padding-25 {
  padding-bottom: 2.5rem !important;
}

.padding-left-25,
.padding-hor-25,
.padding-25 {
  padding-left: 2.5rem !important;
}

.padding-right-25,
.padding-hor-25,
.padding-25 {
  padding-right: 2.5rem !important;
}

.padding-top-3,
.padding-ver-3,
.padding-3 {
  padding-top: 3rem !important;
}

.padding-bottom-3,
.padding-ver-3,
.padding-3 {
  padding-bottom: 3rem !important;
}

.padding-left-3,
.padding-hor-3,
.padding-3 {
  padding-left: 3rem !important;
}

.padding-right-3,
.padding-hor-3,
.padding-3 {
  padding-right: 3rem !important;
}

.padding {
  padding: 0.5rem;
}

.padding-top {
  padding-top: 0.5rem;
}

.padding-bottom {
  padding-bottom: 0.5rem;
}

.padding-left {
  padding-left: 0.5rem;
}

.padding-right {
  padding-right: 0.5rem;
}

.padding-horizontal {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.padding-vertical {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/*******************
***** CSS GRID *****
*******************/

.list-circle {
  list-style-type: circle;
}

.display-contents {
  display: contents;
}

.grid-first-col,
.grid-next-row {
  grid-column: 1 / span 1;
}

.grid-first-col-span-2 {
  grid-column: 1 / span 2;
}

.grid-second-col {
  grid-column: 2 / span 1;
}

.grid-third-col {
  grid-column: 3 / span 1;
}

.grid-third-col-span-3 {
  grid-column: 3 / span 3;
}

.grid-fourth-col {
  grid-column: 4 / span 1;
}

.grid-fifth-col {
  grid-column: 5 / span 1;
}

.grid-sixth-col {
  grid-column: 6 / span 1;
}

.grid-seventh-col {
  grid-column: 7 / span 1;
}

.grid-eighth-col {
  grid-column: 8 / span 1;
}

.grid-ninth-col {
  grid-column: 9 / span 1;
}

.grid-tenth-col {
  grid-column: 10 / span 1;
}

.grid-last-col {
  grid-column-end: -1;
}

.grid-all-row {
  grid-column: 1 / -1;
}

.grid-item-justify-center {
  justify-self: center;
}

.grid-item-align-center {
  align-self: center;
}

.centered-grid-item {
  justify-self: center;
  align-self: center;
}

/*******************
***** CSS FLEX *****
*******************/

.flex {
  display: flex;
}

.flex-u-0 {
  flex: 0;
}

.flex-u-1 {
  flex: 1;
}
.flex-u-2 {
  flex: 2;
}
.flex-u-3 {
  flex: 3;
}
.flex-u-4 {
  flex: 4;
}
.flex-u-5 {
  flex: 5;
}
.flex-u-6 {
  flex: 6;
}
.flex-u-7 {
  flex: 7;
}

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

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

.flex-row-wrap {
  flex-flow: row wrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-align-baseline {
  align-items: baseline;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-space-between {
  justify-content: space-between;
}

.flex-justify-space-around {
  justify-content: space-around;
}

.flex-justify-space-evenly {
  justify-content: space-evenly;
}

/*********************
***** CSS BORDER *****
*********************/

.border-none {
  border: none;
}

.border-1px-ubk-blue {
  border: solid 1px var(--color-primary);
}

.border-2px-ubk-blue {
  border: solid 2px var(--color-primary);
}

.border-5px-ubk-blue {
  border: solid 5px var(--color-primary);
}

.border-bottom-1px-light-gray {
  border-bottom: solid 1px var(--light-gray);
}

.border-1px-gray {
  border: solid 1px var(--gray);
}

.border-2px-gray {
  border: solid 2px var(--gray);
}

.border-top-1px-gray {
  border-top: solid 1px var(--gray);
}

.border-bottom-1px-gray {
  border-bottom: solid 1px var(--gray);
}

.border-right-1px-gray {
  border-right: solid 1px var(--gray);
}

.border-bottom-2px-gray {
  border-bottom: solid 2px var(--gray);
}

.border-bottom-1px-white {
  border-bottom: solid 1px var(--white);
}

.border-bottom-2px-white {
  border-bottom: solid 2px var(--white);
}

.border-top-4px-ubk-blue {
  border-top: solid 4px var(--color-primary);
}

.border-bottom-2px-ubk-blue {
  border-bottom: solid 2px var(--color-primary);
}

.border-right-5px-ubk-blue {
  border-right: solid 5px var(--color-primary);
}

.border-bottom-dotted-2px-ubk-blue {
  border-bottom: dotted 2px var(--color-primary);
}

.border-bottom-dotted-4px-ubk-blue {
  border-bottom: dotted 4px var(--color-primary);
}

.border-2px-red {
  border: solid 2px var(--green);
}

.border-radius-1em-half {
  border-radius: 0.5rem;
}

.border-radius-1em {
  border-radius: 1rem;
}

.border-4px-calendar-light-blue {
  border: solid 4px var(--calendar-light-blue);
}

.border-4px-calendar-dark-blue {
  border: solid 4px var(--calendar-dark-blue);
}

/*****************
***** INPUTS *****
*****************/

.default-appearance-none {
  border: none;
  background-image: none;
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.default-appearance-none:focus {
  outline: none;
}

.input-text-border-bottom {
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  border: none;
  border-bottom: solid 2px var(--gray);
  background: transparent;
}

.input-textarea-border {
  padding: 0.5rem;
  border: solid 2px var(--gray);
}

.input-select {
  border: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(/assets/icons/new-design/desplegable.svg) no-repeat right
    content-box;
  background-size: 1rem 1rem;
  padding-right: 1rem;
}

.input-select-border-bottom {
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  border: none;
  border-bottom: solid 2px var(--gray);

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent url(/assets/icons/new-design/desplegable.svg)
    no-repeat right content-box;
  background-size: 1rem 1rem;
  padding-right: 1rem;
}

.input-textarea-border:focus {
  outline: none;
  border: solid 2px var(--color-primary);
}

.input-text-border-bottom:focus,
.input-select-border-bottom:focus {
  outline: none;
  border-bottom: solid 2px var(--color-primary);
}

.input-text::placeholder,
.input-select-border-bottom::placeholder,
.input-textarea::placeholder {
  color: var(--gray);
}

.input-select-border-bottom::-webkit-calendar-picker-indicator {
  background: none;
}

.custom-select-dropdown-menu-content {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  overflow-y: auto;
  max-height: 16rem;
  padding: 0.3rem;
  font-size: 0.9rem;
}

.custom-select-dropdown-menu-content.gray {
  background: var(--color-neutral);
  color: var(--white);
}

.custom-select-dropdown-menu-content.blue {
  background: var(--color-primary);
  color: var(--white);
}

.custom-select-dropdown-menu-content.gray > .option,
.custom-select-dropdown-menu-content.blue > .option {
  border-radius: 0.3rem;
  padding: 0.3rem;
  cursor: pointer;
}

.custom-select-dropdown-menu-content.gray > .option:hover {
  background: var(--color-primary);
}

.custom-select-dropdown-menu-content.blue > .option:hover {
  background: var(--color-neutral);
}

.custom-select-dropdown-menu-content.blue > .option.group-last,
.custom-select-dropdown-menu-content.gray > .option.group-last {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: solid 2px var(--white);
}

.radio-btn-bigger {
  transform: scale(2);
}

/*********************
***** BACKGROUND *****
*********************/

.background-transparent {
  background: transparent;
}

.background-white {
  background: var(--white);
}

.background-v-light-gray {
  background: var(--v-light-gray);
}

.background-semi-transparent-light-gray {
  background: var(--semi-transparent-light-gray);
}

.background-light-gray {
  background: var(--light-gray);
}

.background-60-ubk-blue {
  background: var(--color-primary-100);
}

.background-85-ubk-blue {
  background: var(--color-primary-300);
}

.background-ubk-blue {
  background: var(--color-primary);
}

/********************
 ***** OPACITY ******
 *******************/

.opacity-0 {
  opacity: 0;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

/********************
 ***** CORNERS ******
 *******************/

.rounded-popup {
  border-radius: 12px;
}

.rounded-sm {
  border-radius: 0.2rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

.rounded-xl {
  border-radius: 0.5rem !important;
}

.rounded-xxl {
  border-radius: 1rem !important;
}

.rounded-3xl {
  border-radius: 1.5rem !important;
}

/****************************
 ***** WIDTHS & HEIGHTS *****
 ****************************/

.min-height-0 {
  min-height: 0;
}

.height-100 {
  height: 100%;
}

.min-width-0 {
  min-width: 0;
}

.min-width-10 {
  min-width: 10%;
}

.min-width-20 {
  min-width: 20%;
}

.min-width-30 {
  min-width: 30%;
}

.width-10 {
  width: 10%;
}

.width-15 {
  width: 15%;
}

.width-20 {
  width: 20%;
}

.width-30 {
  width: 30%;
}

.width-40 {
  width: 40%;
}

.width-50 {
  width: 50%;
}

.width-60 {
  width: 60%;
}

.width-70 {
  width: 70%;
}

.width-80 {
  width: 80%;
}

.width-90 {
  width: 90%;
}

.width-100 {
  width: 100%;
}

.max-width-70 {
  max-width: 70%;
}

.max-width-80 {
  max-width: 80%;
}

.max-width-90 {
  max-width: 90%;
}

.max-width-100 {
  max-width: 100%;
}

.width-fit-content {
  width: fit-content;
}

.width-min-content {
  width: min-content;
}

.width-fill-available {
  width: -webkit-fill-available;
}

/****************
***** OTHER *****
****************/

.clickable {
  cursor: pointer;
  pointer-events: auto;
}

.not-clickable {
  pointer-events: none;
}

.unselectable {
  cursor: default !important;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.hidden {
  display: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.3;
}

.not-editable-read-only {
  pointer-events: none;
  opacity: 0.8;
}

.grayscale {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.pos-absolute {
  position: absolute;
}

.pos-relative {
  position: relative;
}

.pos-sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.overflow-auto {
  overflow: auto;
}

.overflow-y,
.vertical-scroll {
  overflow-y: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.multiline {
  height: auto;
  white-space: pre-line;
}

.reverse-Y-axis {
  transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
}

.reverse-X-axis {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}

/****************
***** POPUP *****
****************/

.main-popup-scrim {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1300;
}

.main-popup-container {
  position: absolute;
  background: var(--white);
  overflow-y: auto;
}

.main-popup-container.popup-auto-height {
  top: 50%;
  transform: translateY(-50%);
  max-height: 95vh;
}

.main-popup-container.popup-auto-height.v-large,
.popup-body-vh-v-large {
  max-height: 90vh;
}

.main-popup-container.popup-auto-height.large,
.popup-body-vh-large {
  max-height: 80vh;
}

.main-popup-container.popup-auto-height.medium,
.popup-body-vh-medium {
  max-height: 70vh;
}

.main-popup-container.popup-auto-height.small,
.popup-body-vh-small {
  max-height: 60vh;
}

.main-popup-container.popup-width-full-screen {
  left: 5%;
  right: 5%;
}

.main-popup-container.popup-width-wider {
  left: 10%;
  right: 10%;
}

.main-popup-container.popup-width-v-wide {
  left: 15%;
  right: 15%;
}

.main-popup-container.popup-width-wide {
  left: 20%;
  right: 20%;
}

.main-popup-container.popup-width-medium {
  left: 25%;
  right: 25%;
}

.main-popup-container.popup-width-thin {
  left: 30%;
  right: 30%;
}

.main-popup-container.popup-width-v-thin {
  left: 35%;
  right: 35%;
}

.main-popup-container.full-screen {
  left: 1%;
  right: 1%;
  top: 50%;
  max-height: 90vh;
  transform: translateY(-50%);
  height: 95%;
}

.popup-close-btn-container {
  align-self: stretch;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}

.popup-close-btn-container > .popup-close-btn {
  position: static;
}

.popup-vertical-scroll {
  overflow-y: auto;
}

.popup-close-btn-margin {
  margin: 22px;
  padding: 0.8em;
}
/*************************
 ***** MANAGER PANEL *****
*************************/

.manager-panel__users-list {
  padding: 5em;
  text-align: center;
  font-size: x-large;
  color: var(--color-primary);
  width: 33%;
  display: inline-block;
}
.manager-panel__users-list table {
  margin: 0auto;
  padding: 0.5em;
  border: 4px solid var(--color-primary);
  border-radius: 25px;
}

.manager-panel__users-list tr {
  font-size: larger;
  font-weight: bolder;
}
.pad1em {
  padding: 1em !important;
}
.manager-panel__users-hours-table {
  width: 66%;
  padding: 7em 1em 1em 1em;
}
.manager-panel__users-hours-table tr {
  font-size: larger;
  font-weight: bolder;
}
.uth-box {
  padding: 0.4em;
  color: var(--color-primary);
  border: 4px solid var(--color-primary);
}
.sum-hours {
  text-align: center;
}

.manager-panel__hours-selector {
  /*! display: block; */
  width: 100%;
  padding: 1em;
}

#hours-prof-filter {
  padding: 0.5em;
  font-size: larger;
}
.manager-panel__container {
  display: inline-flex;
}

.image-size-medium {
  width: 2.5em;
  height: 2.5em;
}

/*************************
 ***** BARRA DESPLAZAMIENTO *****
*************************/
.overflow-x {
  overflow-x: auto;
}

.overflow-y {
  overflow-y: auto;
}

/*************************
 ***** TAMANIOS *****
*************************/

.min_width_7 {
  min-width: 7rem;
}

.z-index-max {
  z-index: 10000;
}

.icon-with-hover {
  cursor: pointer;
}
.icon-with-hover:hover {
  color: var(--color-primary);
}

.vis-hidden { visibility: hidden; }