/* BASE */
.div-calendar-main {
  position: absolute;
  left: 1%;
  top: 10%;
  width: 98%;
  height: 89%;
  z-index: 1;
  overflow-x: auto;
  overflow-y: auto;
}
/* * * * */

/* CABECERA */
.div-table-head {
  height: 8%;
}

.div-months {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 12%;
  height: 50%;
}

.div-years {
  position: absolute;
  bottom: 0;
  left: 13%;
  width: 8%;
  height: 50%;
}

.select-months {
  position: absolute;
  width: 100%;
  border-style: solid;
  border-radius: 0.3em;
  border-color: rgb(205, 205, 205);
  color: rgb(80, 80, 80);
  background-color: white;
}

.ul-icon-calendar {
  position: absolute;
  display: inline-flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  bottom: 0;
  left: 22%;
}

.ul-icon-calendar li {
  padding-right: 2vw;
}

.ul-icon-calendar li img {
  height: 3vh;
}

.div-calendar-countries {
  position: absolute;
  bottom: 0;
  top: auto;
  right: 0;
  width: 10%;
  height: 50%;
}

@media only screen and (max-width: 900px) {
  .div-home-main {
    height: 87%;
  }

  .div-table-head {
    height: 9%;
    position: fixed;
    top: 10%;
  }

  .div-months {
    width: 22%;
  }

  .div-years {
    left: 23%;
    width: 15%;
  }

  .ul-icon-calendar {
    bottom: 12%;
    left: 40%;
  }

  .div-calendar-countries {
    bottom: auto;
    top: 0;
    width: 20%;
    height: 30%;
  }
}
/* * * * * * * * */

/* BASE */
.div-home-main {
  overflow-x: hidden;
  overflow-y: auto;
}

.div-calendar {
  position: absolute;
  width: 100%;
  height: 92%;
  left: 0;
  top: 8%;
  overflow-x: hidden;
  overflow-y: auto;
}

@media only screen and (max-width: 900px) {
  .div-home-main {
    overflow-x: auto;
  }

  .div-calendar {
    height: 90%;
    top: 10%;
    width: 300%;
  }
}
/* * * * * * * * */

/* COLUMNAS - DIAS DE LA SEMANA */
.div-week-days {
  position: sticky;
  display: flex;
  top: 0;
  width: 100%;
  height: 5%;
  color: rgb(80, 80, 80);

  z-index: 8;
  background-color: #fcfcfc;
}

.div-week-day {
  height: 100%;
  width: 14.3%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* * * * * * * * * * */

/* DIAS DEL MES */
.div-month-days-row {
  position: relative;
  display: flex;
  height: 18%;
  width: 100%;
  margin-bottom: 0.2em;
  color: rgb(80, 80, 80);

  top: 5%;
}

.div-month-day {
  position: relative;
  height: 100%;
  width: 14%;
  border-style: solid;
  border-color: rgb(239, 239, 239);
  border-width: 0.1em;
  margin-right: 0.1em;
  background-color: white;
}

.icon-restore {
  position: absolute;
  display: none;
  height: 1.5em;
  top: 1%;
  left: 2%;
  cursor: pointer;
}

.div-month-day-number {
  position: absolute;
  height: 1em;
  width: 15%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 900px) {
  .div-month-days-row {
    height: 10%;
  }

  .div-month-day-number {
    width: 45%;
  }
}
/* * * * * * * * * */

/* ACTIVIDAD */
.div-month-day-activity {
  width: 94%;
  height: 3em;
  color: rgb(31, 31, 31);
  position: relative;
  top: 2em;
  left: 3%;
  margin-bottom: 0.3em;
  cursor: pointer;
  font-family: Candara !important;
}

.div-month-day-activity-left-band {
  position: absolute;
  left: 0;
  width: 3%;
  height: 100%;
  top: 0;
  cursor: pointer;
  z-index: 2;
}

.div-month-day-activity-hour {
  position: absolute;
  left: 5%;
  width: 93%;
  height: 40%;
  top: 3%;
}

.div-month-day-activity-title {
  position: absolute;
  left: 5%;
  width: 85%;
  height: 45%;
  top: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-month-day-activity-type {
  position: absolute;
  right: 3%; /* 16% sin icono PLAY */
  top: 4%;
  text-align: right;
}

.div-month-day-activity-count {
  position: absolute;
  right: 3%;
  bottom: 5%;
  text-align: right;
}

.div-month-day-activity-click {
  position: absolute;
  left: 0;
  width: 80%;
  height: 100%;
  top: 0;
  cursor: pointer;
  z-index: 2;
}

.icon-activity-delete {
  position: absolute;
  display: none;
  right: -3%;
  height: 65%;
  top: -10%;
  z-index: 7;
}

.icon-activity-play {
  position: absolute;
  display: none;
  right: 2%;
  height: 30%;
  top: 2%;
  z-index: 5;
  cursor: pointer;
}

.icon-activity-edit {
  position: absolute;
  display: none;
  right: 25%;
  height: 65%;
  top: -10%;
  z-index: 7;
}
/* * * * * * * * */

/* PANEL ACTIVIDAD */
.div-panel-activity {
  position: fixed;
  display: none;
  width: 42%;
  height: 88%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgb(80, 80, 80);
  background-color: white;
  box-shadow: 3px 3px 2px rgb(138, 138, 138);
  z-index: 30;

  border-radius: 1em;
}

.div-panel-activity-data {
  position: absolute;
  width: 100%;
  height: 55%;
  left: 0;
  top: 0;
  text-align: center;
}

.div-panel-activity-data h1 {
  margin: 0;

  margin-top: 3%;
}

.h3-activity-date {
  height: 5%;
  font-weight: normal;
  margin-top: 1vh;
}

.h3-activity-date img {
  height: 100%;
}

.div-panel-activity-desc {
  position: absolute;
  height: 64%;
  width: 100%;

  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 2vh;
}

.div-panel-activity-desc p {
  text-align: left;
  margin-left: 10%;
  margin-right: 10%;
}

.div-panel-activity-desc img {
  position: absolute;
  height: 10%;
  top: 0;
  right: 2%;
  cursor: pointer;
}

.div-panel-activity-time-text {
  position: absolute;
  bottom: 1%;
  background-color: #eaffed;
  left: 15%;
  width: 70%;
}

.div-panel-activity-time-text p {
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
}

.div-panel-activity-links {
  position: absolute;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 20%;
  left: 0;
  top: 55%;
  background-color: rgb(236, 236, 236);
}

.div-panel-activity-links h3 {
  position: absolute;
  top: 5%;
  margin: 0;
}

.div-panel-activity-links h2 {
  position: absolute;
  top: 20%;
  margin: 0;
}

.div-panel-activity-links-icon {
  position: absolute;
  height: 30%;
  cursor: pointer;
  top: 50%;
}

.div-panel-activity-links-icon img {
  height: 100%;
}

.div-panel-activity-links-icon-left {
  left: 5%;
}

.div-panel-activity-links-icon-mid-1 {
  left: 28%;
}

.div-panel-activity-links-icon-mid-2 {
  right: 28%;
}

.div-panel-activity-links-icon-right {
  right: 5%;
}

.div-panel-activity-access-record p {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-left: 28%;
  left: 0;
  margin-right: 10%;
}

.div-panel-activity-access-record-icon {
  position: absolute;
  left: 10%;
  top: 50%;
  height: 45%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.div-panel-activity-access-record-icon img {
  height: 100%;
}

.activity-access-record {
  text-decoration: underline;
  color: rgb(1, 101, 254);
  cursor: pointer;
}

.div-activity-reg {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 15%;
  display: none;
}

.h2-activity-reg-title {
  top: 5%;
}

.h2-activity-reg {
  text-decoration: underline;
  color: rgb(106, 192, 57);
  cursor: pointer;
  width: auto !important;
  left: 15% !important;
}

.h2-delete-activity-reg {
  text-decoration: underline;
  color: rgb(106, 192, 57);
  cursor: pointer;
  width: auto !important;
  left: 15% !important;
}

.h2-list-activity-prev-reg {
  text-decoration: underline;
  color: rgb(106, 192, 57);
  cursor: pointer;
  width: auto !important;
  right: 15%;
  left: auto !important;
  text-align: right;
  top: 30%;
}

.h2-list-activity-reg {
  text-decoration: underline;
  color: rgb(106, 192, 57);
  cursor: pointer;
  width: auto !important;
  right: 15%;
  left: auto !important;
  text-align: right;
}

.div-panel-activity-countdown {
  position: absolute;
  text-align: center;
  color: rgb(220, 220, 220);
  width: 100%;
  height: 25%;
  left: 0;
  top: 75%;
  background-color: rgb(35, 38, 43);
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

.div-panel-activity-countdown h3 {
  margin-top: 1vh;
}

.div-panel-activity-countdown h2 {
  position: absolute;
  width: 90%;
  left: 5%;
  margin: 0;
  font-weight: normal;
}

.div-panel-activity-no-access-h2 {
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.activity-count {
  color: rgb(106, 192, 57);
}

.activity-count-link {
  text-decoration: underline;
  color: rgb(106, 192, 57);
  cursor: pointer;
}

.div-countdown {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 67%;
  left: 0;
  bottom: 0;
}

.div-countdown-counter {
  position: absolute;
  top: 0;
  font-size: 4rem;
}

.div-countdown-unit {
  position: absolute;
  top: 73%;
}

.div-countdown-days {
  left: 17%;
}

.div-countdown-hours {
  left: 37%;
}

.div-countdown-minutes {
  left: 56%;
}

.div-countdown-seconds {
  left: 76%;
}

.div-panel-activity-access {
  position: absolute;
  display: flex;
  justify-content: center;
  display: none;
  color: rgb(220, 220, 220);
  width: 100%;
  height: 25%;
  left: 0;
  top: 75%;
  background-color: rgb(35, 38, 43);
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

.div-button-access-activity {
  position: absolute;
  height: 30%;
  width: 50%;
  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media only screen and (max-width: 900px) {
  .div-panel-activity {
    width: 94%;
    left: 3%;
  }

  .div-panel-activity-time-text {
    left: 5%;
    width: 90%;
  }

  .div-panel-activity-links-icon {
    height: 25%;
  }

  .div-panel-activity-links-icon-mid-1 {
    left: 27%;
  }

  .div-panel-activity-links-icon-mid-2 {
    right: 27%;
  }

  .div-countdown-counter {
    top: 10%;
  }

  .div-countdown-days {
    left: 13%;
  }

  .div-countdown-hours {
    left: 34%;
  }

  .div-countdown-minutes {
    left: 54%;
  }
}
/* * * * * * * * * */

/* PANEL CREAR ACTIVIDAD */
.div-panel-new-activity {
  position: fixed;
  display: none;
  width: 90%;
  height: 81%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgb(80, 80, 80);
  background-color: white;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  box-shadow: 3px 3px 2px rgb(138, 138, 138);
  z-index: 18;

  border-radius: 1em;
  justify-content: center;
}

.div-panel-new-activity-title {
  position: absolute;
  top: 3%;
  left: 3%;
}

.ul-new-activity {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 8%;
  width: 40%;
  height: 84%;
  left: 3%;
  overflow-y: auto;
  overflow-x: hidden;
}

.ul-new-activity-desc {
  width: 53%;
  right: 3%;
  left: auto;
}

.ul-new-activity li {
  padding-top: 1vh;
  display: flex;
}

.input-text-activity-short {
  width: 25%;
}

.select-activity-short {
  width: 27%;
}

.li-input-text-area {
  padding-top: 4vh !important;
}

.ul-style-text li {
  padding-right: 1vw;
  display: inline-block;
  padding-top: 0;
}

.li-new-activity-privacy {
  color: #7ab846;
  cursor: pointer;
  text-decoration: underline;
}

.div-input-text-area-activity-style {
  font-weight: bold;
  display: flex;
  justify-content: center;
  width: 3vw;
  cursor: pointer;
  background-color: white;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  box-shadow: 3px 3px 2px rgb(138, 138, 138);
  border-radius: 0.3em;
}

.div-input-text-area-activity-style:active {
  transform: translateY(4px);
}

.div-input-text-area-activity-italic {
  font-style: italic;
}

.div-new-activity-color-example {
  height: 4vh;
  width: 15%;
  background-color: #e9e9e9;
  color: rgb(80, 80, 80);
  display: flex;
}

.div-new-activity-color-example p {
  margin-top: 0.7vh;
  margin-left: 1.5vw;
}

.div-new-activity-color-example-dark {
  height: 100%;
  width: 10%;
  background-color: gray;
  margin: 0;
}

.li-new-activity-color {
  height: 4vh;
}

.ul-new-activity-color {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ul-new-activity-color li {
  padding-right: 1vw;
}

.input-new-activity-color {
  width: 10.7vw;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.2em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.input-new-activity {
  width: 100%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.2em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.input-new-activity:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.input-text-area-activity {
  width: 100%;
  height: 28vh;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.2em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.input-text-area-activity:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.div-button-create-activity {
  position: absolute;
  height: 2em;
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width: 900px) {
  .div-panel-new-activity {
    width: 93%;
    left: 3%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .input-text-activity-short {
    width: 50%;
  }

  .div-input-text-area-activity-style {
    width: 10vw;
  }

  .ul-new-activity {
    width: 94%;
  }

  .ul-new-activity-desc {
    width: 94%;
    top: 92%;
  }

  .div-button-create-activity {
    top: 180%;
    padding-bottom: 1em;
  }
}
/* * * * * * * * * * * * */

/* RESTAURAR ACTIVIDADES */
.div-panel-restore-activity-h2 {
  position: absolute;
  top: 3%;
  left: 3%;
}

.ul-restore-activity {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 10%;
  left: 3%;
  height: 80%;
  width: 90%;
  overflow-y: auto;
  overflow-x: hidden;
}

.ul-restore-activity-div {
  width: 100%;
  top: 0;
  left: 0;
}

.ul-restore-activity-div-left-band {
  width: 2%;
}

.ul-restore-activity-div-text {
  width: 30%;
  left: 3%;
}

.ul-restore-activity-div-desc {
  position: absolute;
  left: 34%;
  width: 65%;
  height: 90%;
  top: 3%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* * * * * * * * * * * * */

/***** PANEL ENVIAR INVITACION *****/
.div-panel-invitation {
  position: fixed;
  display: none;
  width: 90%;
  height: 88%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgb(80, 80, 80);
  background-color: white;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  box-shadow: 3px 3px 2px rgb(138, 138, 138);

  border-radius: 1em;
  z-index: 32;
}

.div-panel-invitation-title {
  position: absolute;
  left: 1em;

  top: 0.5em;
}

.div-panel-invitation-button {
  position: absolute;
  display: none;
  bottom: 1em;
  right: 1.5em;
  width: 31%;
  height: 2em;
}
/* * * * * */

/* FILTROS */
.div-panel-invitation-filters {
  position: absolute;
  top: 3em;
  left: 1em;
  height: 20%;
  width: 97%;
  display: flex;
  justify-content: center;
}

.div-panel-invitation-filters-search {
  position: absolute;
  display: flex;
  width: 66%;
  height: 3vh;
  top: 0;
  left: 0%;
}

.div-panel-invitation-filters-input {
  width: 100%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.5em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.div-panel-invitation-filters-input:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.ul-db-filters {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 3vh;
  width: 33%;
  height: 77%;
  z-index: 10;
}

.ul-db-filters li {
  padding-top: 0.3vh;
}

.ul-db-filters-1 {
  left: 0;
}

.ul-db-filters-2 {
  right: 0;
  top: -0.5vh;
}

.div-panel-invitation-filters-select {
  display: flex;
  height: 2.5vh;
  width: 97%;
  color: rgb(80, 80, 80);
  background-color: white;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  cursor: pointer;
}

.div-panel-invitation-filters-select-p {
  margin-left: 5%;
  width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-panel-invitation-filters-select-img {
  height: 30%;
  margin-right: 2%;
  margin-left: 2%;
  position: relative;
  top: 40%;
}

.ul-db-filters-box {
  position: absolute;
  display: none;
  width: 97%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: fit-content;
  color: rgb(80, 80, 80);
  background-color: white;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top-style: none;
  z-index: 11;
  max-height: 60vh;
  overflow-y: auto;
}

.ul-db-filters-box li {
  margin-left: 5%;
  padding-top: 1vh;
}

.li-db-filter-flex {
  display: flex;
}

.li-db-filter-flex input {
  width: 20%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.5em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
  height: 2vh;
}

.li-db-filter-flex input:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.ul-filter-10 input {
  width: 87%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.5em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  margin-left: 0;
  margin-right: 5%;
  margin-bottom: 5%;
  height: 2vh;
}

.ul-filter-10 input:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.div-panel-invitation-filters-active {
  position: absolute;
  top: 14%;
  left: 51%;
  height: 11%;
  width: 38%;
  display: none;
  justify-content: center;

  color: rgb(80, 80, 80);
}

.div-panel-invitation-filters-active-title {
  position: absolute;
  top: 3%;
  left: 0;
}

.ul-db-filters-active {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 20%;
  width: 100%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
}

.ul-db-filters-active li {
  padding-top: 0.5vh;
}
/* * * * * * * * */

/* TEXTO PERSONALIZADO */
.div-panel-invitation-input-area {
  position: absolute;
  top: 14em;
  width: 30%;
  height: 58%;
  left: 66.5%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.5em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-width: 0.2em;
}

.div-panel-invitation-input-area:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.div-panel-invitation-calendar-link {
  position: absolute;
  display: none;
  top: 12em;
  width: 31.5%;
  height: 4%;
  left: 66.5%;
}

.div-panel-invitation-calendar-link p {
  position: absolute;
  width: 100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #7ab846;
  cursor: pointer;
  text-decoration: underline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* * * * * * * */

/* LISTADOS */
.div-panel-invitation-select-all {
  position: absolute;
  left: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.div-panel-invitation-data-base-count {
  position: absolute;
  top: 12em;
  width: 31.5%;
  height: 4%;
}

.div-panel-invitation-data-base-count-1 {
  left: 1em;
}

.div-panel-invitation-data-base-count-2 {
  left: 34%;
}

.div-panel-invitation-data-base-count-p {
  position: absolute;
  text-align: right;
  right: 0.3em;

  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.div-panel-invitation-select-days {
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  width: 30%;
  height: 100%;
}

.select-inv-calendar-days {
  position: absolute;
  left: 0;
  width: 65%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.2em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.select-inv-calendar-days:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.inv-days-text {
  position: absolute;
  text-align: right;
  right: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.div-panel-invitation-data-base {
  position: absolute;
  top: 14em;
  width: 31%;
  height: 65%;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-width: 0.2em;
  border-radius: 0.3em;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-panel-invitation-data-base-1 {
  left: 1em;
}

.div-panel-invitation-data-base-2 {
  left: 34%;
}

.div-panel-invitation-data-base-element {
  position: relative;
  width: 100%;
  height: 3em;
  margin-top: 0.2em;
  margin-bottom: 0.4em;
  cursor: pointer;
}

.div-panel-invitation-data-base-element:hover {
  background-color: rgb(248, 248, 248);
}

.div-panel-invitation-data-base-element-img {
  position: absolute;
  height: 3em;
  top: 0;
  left: 0.2em;
}

.div-panel-invitation-data-base-element-line {
  position: absolute;
  top: 0.8em;
  left: 1.5em;
  color: white;
}

.div-panel-invitation-data-base-element-name {
  position: absolute;
  top: 0.3em;
  left: 3.5em;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-panel-invitation-data-base-element-status {
  position: absolute;
  bottom: 0.3em;
  left: 3.5em;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 900px) {
  .div-panel-invitation {
    width: 94%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .div-panel-invitation-filters {
    left: 0.3em;
  }

  .div-panel-invitation-data-base {
    width: 46%;
  }

  .div-panel-invitation-data-base-1 {
    left: 2%;
  }

  .div-panel-invitation-data-base-2 {
    left: 51%;
  }

  .div-panel-invitation-data-base-count {
    position: absolute;
    top: 12em;
    width: 46%;
    height: 4%;
  }

  .div-panel-invitation-data-base-count {
    width: 46%;
  }

  .div-panel-invitation-data-base-count-1 {
    left: 3%;
  }

  .div-panel-invitation-data-base-count-2 {
    left: 52%;
  }

  .div-panel-invitation-select-days {
    width: 55%;
  }

  .div-panel-invitation-calendar-link {
    top: 44em;
    width: 94%;
    left: 3%;
  }

  .div-panel-invitation-input-area {
    top: 46.5em;
    width: 92%;
    height: 50%;
    left: 2%;
  }

  .div-panel-invitation-button {
    bottom: auto;
    right: auto;
    width: 96%;
    top: 70em;
    padding-bottom: 1em;
    left: 2%;
  }
}
/* * * * * * */
/* * * * * * * * * * * * */

/* HISTORIAL ASISTENCIA */
.h2-panel-history-title {
  position: absolute;
  top: 1vh;
  left: 1.5vw;
}

.ul-panel-history-legend {
  display: flex;
  top: 6vh;
  left: 1.5vw;
  width: 93%;
}

.ul-panel-history-legend li {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-right: 0.5em;
}

.ul-panel-history-legend-li-1 {
  width: 3em;
}
.ul-panel-history-legend-li-2 {
  width: 15em;
}
.ul-panel-history-legend-li-3 {
  width: 6em;
}
.ul-panel-history-legend-li-4 {
  width: 5em;
}

.ul-panel-history {
  top: 9vh;
  left: 1.5vw;
  width: 93%;
  height: 86%;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-width: 0.1em;
  border-radius: 0.3em;
  overflow-x: hidden;
  overflow-y: auto;
}

.ul-panel-history-li {
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
  height: 7vh;
  background-color: #fafafa;
}

.ul-panel-history-li-ul {
  display: flex;
}

.ul-panel-history-li-ul li {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-right: 0.5em;
}

.ul-panel-history-li-ul-li-1 {
  width: 3em;
}
.ul-panel-history-li-ul-li-2 {
  width: 15em;
}
.ul-panel-history-li-ul-li-3 {
  width: 6em;
}
.ul-panel-history-li-ul-li-4 {
  width: 5em;
}
/* * * * * * * * * * * */

/* PANEL TEXTO DESCRIPCION */
.panel-full-desc-text {
  text-align: left;
  margin-left: 3%;
  margin-right: 3%;
  height: 90%;

  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 8%;
}
/* * * * * * * * * * * * */

/* PANEL INVITAR CALENDARIO */
.icon-copy-calendar-invitation-link {
  position: absolute;
  top: 2%;
  height: 6%;
  right: 10%;
  cursor: pointer;
  z-index: 5;
}

.input-inv-calendar-search {
  width: 100%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.2em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.input-inv-calendar-search:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}
/* * * * * * * * * * * * * * */

/* SUSCRIPCION A CALENDARIO */
.div-panel-subscribe-list {
  position: absolute;
  top: 35%;
  left: 3%;
  width: 93%;
  height: 24%;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-width: 0.1em;
  border-radius: 0.3em;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-panel-invitation-activity-title {
  position: absolute;
  top: 3%;
  left: 3%;
}

.h2-panel-subscribe-list-1 {
  top: 9%;
}

.h2-panel-subscribe-list-2 {
  top: 25%;
}

.p-panel-subscribe-id {
  position: absolute;

  top: 13%;
  width: 93%;
  left: 3%;
}

.p-panel-subscribe-list {
  position: absolute;

  top: 29%;
  width: 93%;
  left: 3%;
}

.p-panel-subscribe-extra {
  position: absolute;

  top: 60%;
  width: 93%;
  left: 3%;
}

.div-panel-subscribe-id {
  position: absolute;
  top: 20%;
  width: 55%;
  height: 4%;
  left: 3%;
}

.div-panel-subscribe-input {
  position: absolute;
  top: 0;
  width: 50%;
  left: 0;
  display: flex;
}

.div-panel-subscribe-button {
  position: absolute;
  display: none;
  top: 0;
  width: 40%;
  height: 90%;
  left: 37%;
}

.div-element-calendar-susbcribe {
  position: relative;
  width: 100%;
  height: 3em;
  margin-bottom: 0.2em;
  background-color: #f0f0f0;
  cursor: pointer;
}

.div-element-calendar-susbcribe-name {
  position: absolute;
  width: 80%;
  left: 3%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-element-calendar-susbcribe-img {
  position: absolute;
  display: none;
  height: 80%;
  right: 3%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.div-element-calendar-susbcribe-fake-button {
  position: absolute;
  width: 30%;
  right: 3%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #54b848;
  color: white;
  text-align: center;
  border-radius: 0.3em;
}

.h2-panel-unsubscribe-list {
  top: 67%;
}

.p-panel-unsubscribe-list {
  position: absolute;

  top: 71%;
  width: 93%;
  left: 3%;
}

.div-panel-unsubscribe-list {
  top: 75%;
  height: 22%;
}

@media only screen and (max-width: 900px) {
  .div-panel-unsubscribe-list {
    top: 77%;
    height: 20%;
  }
}
/* * * * * * * * * * * * * * */

/* ANIMACION DE CARGA DENTRO DEL PANEL */
.loader-activity {
  position: absolute;
  display: none;
  z-index: 50;
  left: 40%;
  top: 25%;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #54b848;
  width: 4em;
  height: 4em;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* * * * * * * * * * * * */

/* CLONAR CALENDARIO */
.div-clone-calendar {
  position: fixed;
  display: none;
  width: 45%;
  height: 25%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgb(80, 80, 80);
  background-color: white;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  box-shadow: 3px 3px 2px rgb(138, 138, 138);
  z-index: 18;

  border-radius: 1em;
  justify-content: center;
}

.div-clone-calendar-title {
  position: absolute;
  left: 3%;

  top: 2%;
}

.ul-clone {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 30%;
  width: 46%;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
}

.ul-clone li {
  padding-top: 1vh;
  display: flex;
}

.ul-clone-origin {
  left: 3%;
}

.ul-clone-target {
  right: 3%;
}

.select-clone {
  width: 100%;

  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.2em;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.select-clone:focus {
  border-color: #7ab846;
  outline: 0;
  -webkit-box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  box-shadow: 0 0 0 2px rgba(87, 168, 233, 0.2);
  background-color: white;
}

.div-clone-button {
  position: absolute;
  height: 4vh;
  bottom: 1em;
  right: 1em;
}
/* * * * * * * * * */

/* PANEL ACTIVIDAD PRIVADA LISTADO */
.div-panel-privacy-activity-title {
  position: absolute;
  top: 4%;
  left: 3%;
  width: 90%;
  margin: 0;
}

.div-panel-privacy-activity-search {
  position: absolute;
  top: 13%;
  left: 3%;
  width: 92%;
  display: flex;
}

.div-panel-privacy-activity-list-text {
  position: absolute;
  text-align: left;
  top: 18%;
  width: 45%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-panel-privacy-activity-list-count {
  position: absolute;
  text-align: right;
  top: 21%;
  width: 10%;
}

.div-panel-privacy-activity-list-count-1 {
  left: 38%;
}

.div-panel-privacy-activity-list-count-2 {
  left: 85%;
}

.div-panel-privacy-activity-list {
  position: absolute;
  top: 25%;
  width: 45%;
  height: 65%;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-width: 0.1em;
  border-radius: 0.3em;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-panel-privacy-activity-result {
  left: 3%;
}

.div-panel-privacy-activity-result-selected {
  left: 50%;
}

.div-panel-privacy-activity-result-customer {
  position: relative;
  width: 100%;
  height: 2em;
  margin-bottom: 0.2em;
  background-color: #f0f0f0;
  cursor: pointer;
}

.div-panel-privacy-activity-result-customer-name {
  position: absolute;
  width: 95%;
  left: 3%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.div-panel-privacy-activity-button {
  position: absolute;
  bottom: 1em;
  right: 1em;
  height: 4vh;
}
/* * * * * * * * * * * * */

/* PANEL LISTADO ACTIVIDAD LIMITADA */
.div-panel-list-reg-title {
  position: absolute;
  top: 2%;
  left: 3%;
  width: 90%;
  margin: 0;
}

.p-panel-list-reg-count {
  position: absolute;
  top: 7%;
  left: 3%;
}

.div-panel-list-reg-list {
  position: absolute;
  top: 12%;
  left: 3%;
  width: 94%;
  height: 84%;
  border-style: solid;
  border-color: rgb(240, 240, 240);
  border-width: 0.1em;
  border-radius: 0.3em;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-panel-list-reg-customer {
  position: relative;
  width: 100%;
  height: 2em;
  margin-bottom: 0.2em;
  background-color: #f0f0f0;
}

.div-panel-list-reg-customer-name {
  position: absolute;
  width: 95%;
  left: 3%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* * * * * * * * * * * * */