/* MENU */
.ul-user-menu {
  position: absolute;
  display: none;
  right: -22%;
  top: 7rem;
  width: 14rem;
  background-color: white;
  border-style: solid;
  border-color: rgb(167, 167, 167);
  border-width: 0.1rem;
  z-index: 8;
}

.ul-user-menu li {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  height: 2rem;
  cursor: pointer;
}

.ul-user-menu li:hover {
  background-color: #f3f3f3;
}

.ul-user-menu li ul {
  width: 100%;
  display: flex;
}

.ul-user-menu li ul li {
  display: flex;
  padding: 0;
  align-items: center;
}

.ul-user-menu li ul img {
  height: 2rem;
}

.ul-user-menu-li-img {
  padding-right: 1rem !important;
  justify-content: center;
  width: 3rem;
}

.ul-user-menu-li-p {
  text-align: left;
}

.ul-menu-user p {
  top: 10%;
}

@media only screen and (max-width: 65em) {
  .ul-menu-user p {
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: right;
  }
}
/* * * * * * * * * * * * * /



/* SECCION PRINCIPAL */
.div-home-main {
  position: absolute;
  left: 1%;
  top: 10%;
  width: 98%;
  height: 89%;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
}

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

/* TITULOS */
.div-home-title {
  position: absolute;
  color: #7ab846;
}

.div-home-title-0 {
  top: 1%;
  left: 0;
}

.div-home-title-1 {
  top: 49%;
  left: 0;
}

.div-home-title-2 {
  top: 49%;
  left: 59%;
}

.div-home-title-line {
  height: 6%;
  width: 56vw;
  background-color: #7ab846;
  border-radius: 0.5em;
  position: absolute;
}

@media only screen and (max-width: 900px) {
  .div-home-title-line {
    width: 97vw;
  }

  .div-home-title-1 {
    top: 125%;
  }

  .div-home-title-2 {
    top: 214%;
    left: 0;
  }
}
/* * * * * * * * * */

/* PANEL */
.div-main-panel {
  position: absolute;
  display: flex;
  justify-content: center;
  background-color: white;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  box-shadow: 2px 2px 2px rgb(138, 138, 138);
  color: rgb(80, 80, 80);
  border-radius: 0.8em;
}

.div-main-panel-hide {
  position: absolute;
  display: none;
  justify-content: center;
  background-color: #8d8d8d69 !important;
  border-radius: 0.8em;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  z-index: 2;
}
/* * * * * */

/* PANELES */
.div-panel-3 {
  top: 27%;
  left: 0;
  width: 13.5%;
  height: 20%;
  cursor: pointer;
}

.div-panel-4 {
  top: 27%;
  left: 14.5%;
  width: 13.5%;
  height: 20%;
  cursor: pointer;
}

.div-panel-5 {
  top: 27%;
  left: 29%;
  width: 13.5%;
  height: 20%;
  cursor: pointer;
}

.div-panel-6 {
  top: 27%;
  left: 43.5%;
  width: 13.5%;
  height: 20%;
  cursor: pointer;
}

.div-panel-7 {
  top: 7%;
  left: 59%;
  width: 40.5%;
  height: 40%;
  cursor: pointer;
}

.div-panel-7-img {
  position: absolute;
  top: 3%;
  height: 94%;
  max-width: 95%;
}

.div-panel-7-icon {
  position: absolute;
  bottom: 1em;
  right: 1em;
  height: 3.5vh;
  z-index: 5;
}

.div-panel-8 {
  width: 28%;
  height: 40%;
  left: 0;
  top: 55%;
}

.div-panel-9 {
  top: 55%;
  left: 29%;
  width: 28%;
  height: 18%;
  cursor: pointer;
}

.div-panel-10 {
  top: 75%;
  left: 29%;
  width: 13.5%;
  height: 20%;
  cursor: pointer;
}

.div-panel-11 {
  top: 75%;
  left: 43.5%;
  width: 13.5%;
  height: 20%;
  cursor: pointer;
}

.div-panel-12 {
  top: 55%;
  left: 59%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;
}

.div-panel-13 {
  top: 55%;
  left: 73%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;
}

.div-panel-14 {
  top: 55%;
  left: 87%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;

  color: white;
  background-color: #7ab846;
}

.div-panel-15 {
  top: 69%;
  left: 59%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;
}

.div-panel-16 {
  top: 69%;
  left: 73%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;
}

.div-panel-17 {
  top: 69%;
  left: 87%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;

  color: white;
  background-color: #fe0000;
}

.div-panel-18 {
  top: 83%;
  left: 59%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;

  color: white;
  background-color: #fe0000;
}

.div-panel-19 {
  top: 83%;
  left: 73%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;
}

.div-panel-20 {
  top: 83%;
  left: 87%;
  width: 12.5%;
  height: 12%;
  cursor: pointer;
}

.div-panel-21 {
  top: 7%;
  left: 0;
  width: 57%;
  height: 18%;
  cursor: pointer;
}

.div-panel-22 {
  display: block;
  top: 7%;
  left: 0;
  width: 28%;
  height: 18%;
  cursor: pointer;
}

.div-panel-icon-3 {
  position: absolute;
  top: 16%;
  left: 5%;
  height: 50%;
}

.div-panel-icon-pin {
  position: absolute;
  top: 11%;
  left: 3%;
  height: 45%;
  z-index: 5;
}

.div-panel-icon-center {
  position: absolute;
  top: 15%;
  height: 55%;
}

.div-panel-icon-center-1 {
  position: absolute;
  top: 13%;
  height: 45%;
}

.div-panel-title-top {
  position: absolute;
  top: 3%;
  left: 3%;
  z-index: 5;
}

.div-panel-title-bottom {
  position: absolute;
  bottom: 10%;
}

.div-panel-title-center {
  position: absolute;
  bottom: 10%;
  text-align: center;
}

.div-panel-percent {
  position: absolute;
  bottom: 25%;
  right: 5%;
}

.div-panel-bar {
  position: absolute;
  top: 25%;
  width: 55%;
  height: 25%;
  background-image: linear-gradient(
    to right,
    rgb(248, 10, 10),
    rgb(249, 252, 128),
    rgb(84, 184, 72)
  );
  box-shadow: 2px 2px 2px rgb(138, 138, 138);
  right: 5%;
  border-radius: 0.6em;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
}

.div-panel-bar-fill {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 0.5em;
}

@media only screen and (max-width: 900px) {
  .div-panel-bar {
    width: 70%;
  }

  .div-panel-3 {
    top: 45%;
    width: 48%;
  }

  .div-panel-4 {
    top: 45%;
    right: 1%;
    left: auto;
    width: 48%;
  }

  .div-panel-5 {
    top: 66%;
    left: 0;
    width: 48%;
  }

  .div-panel-6 {
    top: 66%;
    width: 48%;
    right: 1%;
    left: auto;
  }

  .div-panel-7 {
    top: 87%;
    left: 0;
    width: 98.5%;
    height: 35%;
  }

  .div-panel-8 {
    width: 98.5%;
    height: 40%;
    top: 131%;
  }

  .div-panel-9 {
    top: 172%;
    left: 0;
    width: 98.5%;
  }

  .div-panel-10 {
    top: 191%;
    left: 0;
    width: 48%;
  }

  .div-panel-11 {
    top: 191%;
    width: 48%;
    right: 1%;
    left: auto;
  }

  .div-panel-12 {
    top: 220%;
    left: 0;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-13 {
    top: 220%;
    left: 33.5%;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-14 {
    top: 220%;
    left: auto;
    right: 1%;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-15 {
    top: 241%;
    left: 0;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-16 {
    top: 241%;
    left: 33.5%;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-17 {
    top: 241%;
    left: auto;
    right: 1%;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-18 {
    top: 262%;
    left: 0;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-19 {
    top: 262%;
    left: 33.5%;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-20 {
    top: 262%;
    left: auto;
    right: 1%;
    width: 31.5%;
    height: 20%;
    text-align: center;
  }

  .div-panel-21 {
    left: 0;
    width: 98.5%;
    height: 12%;
    top: 32%;
  }

  .div-panel-22 {
    width: 98%;
    height: 24%;
  }

  .div-panel-percent {
    bottom: 10%;
  }
}
/* * * * * * * */

/* PANEL - CALENDARIO */
.div-calendar-panel-img {
  position: absolute;
  left: 3%;
  height: 10%;
  top: 3%;
}

.div-calendar-panel-title {
  position: absolute;
  top: 4%;
  left: 12%;
  color: rgb(80, 80, 80);
}

.div-calendar-panel-sub-title {
  position: absolute;
  top: 13%;
  right: 2%;
  color: #7ab846;
  cursor: pointer;
}

.div-calendar-countries {
  position: absolute;
  top: 2%;
  right: 2%;
  width: 30%;
  height: 9%;
}
/* * * * * * * * * * * */

/* CALENDARIO */
.div-daily-calendar {
  position: absolute;
  top: 22%;
  left: 2%;
  width: 96%;
  height: 75%;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-daily-calendar-text-day {
  position: relative;
  width: 100%;
  height: 15%;
  top: 0;
  left: 0;

  font-family: Candara !important;
  font-weight: bold;
}

.div-daily-calendar-element {
  position: relative;
  width: 100%;
  height: 20%;
  top: 0;
  left: 0;
  margin-bottom: 0.3em;
  cursor: pointer;

  font-family: Candara !important;
  border-radius: 0.3em;
}

.div-daily-calendar-element-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 18%;
  height: 100%;
  z-index: 1;
  background-color: white;
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-daily-calendar-element-hour {
  position: absolute;
  z-index: 2;
  color: white;
  text-shadow: 1px 1px 2px gray;
}

.div-daily-calendar-element-title-desc {
  position: absolute;
  display: flex;
  justify-content: left;
  align-items: center;
  top: 0;
  height: 100%;
  left: 21%;
  width: 77%;
  text-align: left;
}

.div-daily-calendar-element-title-desc p {
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
/* * * * * * * * * * * */

/* TEXTO INFERIOR */
.div-bottom-text {
  position: absolute;
  text-align: center;
  left: 0;
  bottom: 0;
  height: 2%;
  width: 100%;

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

.div-bottom-text a {
  text-decoration: none;
  color: rgb(80, 80, 80);
}

.div-bottom-text a:hover {
  color: #0c9fb9;
}

@media only screen and (max-width: 900px) {
  .div-bottom-text {
    top: 285%;
  }
}
/* * * * * * * * * * * * * */

/* PANEL BOT */
.div-bot {
  position: fixed;
  display: none;
  width: 90%;
  height: 70%;
  top: 16%;
  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;
}

.div-bot-title {
  position: absolute;
  left: 3%;
}

.div-bot-title-1 {
  top: 3%;
}

.div-bot-title-2 {
  top: 43%;
}

.ul-bot-telegram {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 10%;
  left: 3%;
  width: 49%;
}

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

.div-bot-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-bot-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-telegram-alerts {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 52%;
  left: 3%;
  width: 35%;
}

.ul-telegram-alerts li {
  padding-top: 1vh;
}

.div-bot-panel {
  position: absolute;
  width: 15%;
  height: 33%;
  top: 48%;
  left: 37%;
  cursor: pointer;
}

.div-bot-panel-text {
  position: absolute;

  color: rgb(80, 80, 80);
  text-align: center;
  width: 16%;
  top: 83%;
  left: 37%;
}

.ul-img-bot {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 8%;
  right: 2%;
  width: 41%;
  height: 77%;
  display: flex;
  justify-content: right;
}

.ul-img-bot li {
  padding-right: 1vw;
}

.ul-img-bot img {
  height: 54vh;
}

.div-bot-button {
  position: absolute;
  bottom: 5%;
  right: 3%;
  height: 6%;
}

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

  .ul-bot-telegram {
    width: 94%;
  }

  .ul-telegram-alerts {
    width: 61%;
  }

  .div-bot-panel {
    width: 32%;
    height: 24%;
    top: 50%;
    left: auto;
    right: 3%;
  }

  .div-bot-panel-text {
    width: 32%;
    top: 76%;
    left: auto;
    right: 3%;
  }

  .ul-img-bot {
    top: 88%;
    right: 3%;
    width: 94%;
    height: auto;
  }

  .ul-img-bot img {
    height: 46vh;
  }

  .div-bot-button {
    bottom: auto;
    right: 25%;
    height: 8%;
    top: 160%;
    width: 50%;
    padding-bottom: 5vh;
  }
}
/* * * * * * * */

/* PANEL MI PERFIL */
.div-my-profile {
  position: fixed;
  display: none;
  width: 90%;
  height: 80%;
  top: 15%;
  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;
}

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

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

.ul-my-profile li i {
  white-space: initial;
}

.ul-my-profile-li-center {
  justify-content: center;
}

.ul-my-profile-1 {
  left: 3%;
}

.ul-my-profile-2 {
  left: 35%;
}

.ul-my-profile-3 {
  right: 3%;
}

.div-my-profile-img {
  height: 20vh;
  cursor: pointer;
  border-radius: 0.5em;
  background-image: url("../images/user_pic.png");
  background-size: cover;
  border-radius: 10em;
}

.li-button-verify {
  height: 5%;
  position: absolute;
  bottom: 3%;
  right: 3%;
}

.div-my-profile-password-eye {
  position: absolute;
  height: 1rem;
  right: 0.5rem;
  cursor: pointer;
}

.div-my-profile-password-eye img {
  height: 80%;
}

.div-my-profile-select {
  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);
}

.div-my-profile-select: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-my-profile-select-1 {
  width: 40%;
  margin-left: 2%;
}

.div-my-profile-select-2 {
  width: 200%;
}

.div-my-profile-select-3 {
  -webkit-appearance: none;
}

.div-my-profile-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-my-profile-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-my-profile-input-1 {
  margin-right: 2%;
}

.div-my-profile-input-2 {
  width: 30%;
  margin-right: 2%;
}

.div-my-profile-input-3 {
  width: 50%;
  margin-left: 2%;
}

.p-my-profile-link {
  color: #7ab846;
  cursor: pointer;
}

.i-my-profile-red {
  color: #da0000;
}

.img-my-profile-card {
  height: 13vh;
  margin-right: 5%;
}

.div-my-profile-button-tpv {
  margin-bottom: 6%;
}

.div-my-profile-button-save {
  position: absolute;
  height: 5%;
  bottom: 3%;
  right: 3%;
}

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

  .ul-my-profile {
    width: 94%;
  }

  .ul-my-profile-2 {
    left: 3%;
    top: 100%;
  }

  .ul-my-profile-3 {
    top: 165%;
  }

  .div-my-profile-password-eye {
    height: 4vw;
  }

  .div-my-profile-button-save {
    height: 8%;
    top: 250%;
    right: 25%;
    width: 50%;
    padding-bottom: 3vh;
  }
}
/* * * * * * * * * * * * */

/* PANEL FACTURAS*/
.div-bills {
  position: fixed;
  display: none;
  width: 65%;
  height: 75%;
  top: 15%;
  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;
}

.div-bills h2 {
  position: absolute;
  top: 3%;
  left: 3%;
}

.div-bills-table {
  position: absolute;
  width: 94%;
  height: 85%;
  left: 3%;
  top: 10%;
  overflow-y: auto;
  overflow-x: hidden;
}

.bills-table {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  border-collapse: collapse;
}

.bills-table td,
.bills-table tr {
  border-bottom: 1px solid;
  border-color: rgb(80, 80, 80);
}

.bills-table td,
.bills-table th {
  padding: 0.5%;
}

.bills-table th {
  position: sticky;
  top: 0;
  z-index: 3;
  text-align: center;
  color: white;
  cursor: pointer;
  border: 1px solid;
  border-color: white;
}

.bills-table-header {
  background-color: #7ab846;
}

.td-bill-download {
  color: #7ab846;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

@media only screen and (max-width: 900px) {
  .div-bills {
    width: 97%;
    overflow-y: auto;
    overflow-x: auto;
  }

  .bills-table {
    width: 150%;
  }

  .div-bills-table {
    overflow-x: auto;
  }
}
/* * * * * * * * * * * * * /



/* PANEL CONTACTO DIRECTO */
.div-direct-customer-panel {
  position: fixed;
  display: none;
  width: 80%;
  height: 80%;
  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: 1rem;
}

.div-direct-customer-panel h2 {
  position: absolute;
  top: 1rem;
  left: 2rem;
}

.ul-direct-customer {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 4rem;
  width: 46%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 87%;
}

.ul-direct-customer li {
  padding-top: 0.5rem;
  display: flex;
}

.ul-direct-customer-li-center {
  justify-content: center;
}

.ul-direct-customer-1 {
  left: 3%;
}

.ul-direct-customer-2 {
  right: 3%;
}

.div-direct-customer-img {
  height: 10rem;
  cursor: pointer;
  border-radius: 0.5rem;
  background-image: url("../images/user_pic.png");
  background-size: cover;
  border-radius: 10rem;
}

.div-direct-customer-select {
  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);
}

.div-direct-customer-select: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-direct-customer-select-1 {
  width: 40%;
  margin-left: 2%;
}

.div-direct-customer-select-2 {
  width: 200%;
}

.div-direct-customer-select-3 {
  -webkit-appearance: none;
}

.div-direct-customer-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-direct-customer-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-direct-customer-input-1 {
  margin-right: 2%;
}

.div-direct-customer-input-2 {
  width: 30%;
  margin-right: 2%;
}

.div-direct-customer-input-area {
  width: 100%;
  height: 10rem;
  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.5em;
  padding-top: 0.5em;
  resize: none;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.div-direct-customer-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-direct-customer-link {
  color: #7ab846;
  text-decoration: underline;
  cursor: pointer;
}

.div-direct-button-save {
  height: 2rem;
  width: 50%;
}

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

  .ul-direct-customer {
    width: 94%;
  }

  .ul-direct-customer-2 {
    top: 46rem;
  }
}
/* * * * * * * * * * * * */

/* PANEL WEB */
.div-web {
  position: fixed;
  display: none;
  width: 90%;
  height: 75%;
  top: 15%;
  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;
}

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

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

.ul-web-li-center {
  justify-content: center;
}

.ul-web-1 {
  left: 3%;
}

.ul-web-2 {
  right: 3%;
  height: 87%;
}

.ul-web-li-qr {
  padding-top: 4vh !important;
}

.ul-web-li-padding-top {
  padding-top: 2vh !important;
}

.div-web-icon {
  height: 2.8vh;
}

.div-web-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-web-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-web-input-1 {
  margin-left: 2%;
}

.div-web-input-2 {
  width: 30%;
  margin-left: 2%;
  margin-right: 2%;
}

.div-web-input-area {
  width: 100%;
  height: 11vh;
  color: rgb(80, 80, 80);
  background-color: white;
  padding-left: 0.5em;
  padding-top: 0.5em;
  resize: none;
  border-radius: 0.3em;
  border-style: solid;
  border-color: rgb(240, 240, 240);
}

.div-web-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-web-link {
  color: #7ab846;
  text-decoration: underline;
  cursor: pointer;
}

.div-web-qr {
  text-align: center;
  height: 27vh;
  width: 45%;
}

.div-web-qr img {
  height: 70%;
}

.div-web-text-red {
  color: #da0000;
}

.div-web-button-save {
  position: absolute;
  height: 5%;
  bottom: 3%;
  right: 3%;
}

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

  .ul-web {
    width: 94%;
    height: auto;
  }

  .ul-web-2 {
    height: auto;
    top: 105%;
  }

  .div-web-button-save {
    height: 8%;
    bottom: auto;
    right: 25%;
    top: 197%;
    padding-bottom: 5vh;
    width: 50%;
  }
}
/* * * * * * * * * * */

/* PANEL ENLACE 1 LINEA */
.div-hgo-link {
  position: fixed;
  display: none;
  width: 55%;
  height: 40%;
  top: 25%;
  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;
}

.div-hgo-link-title {
  position: absolute;
  top: 3%;
  left: 3%;
}

.div-hgo-link-icon-1 {
  position: absolute;
  height: 15%;
  left: 3%;
  top: 22%;
  cursor: pointer;
}

.div-hgo-link-icon-2 {
  height: 2.5vh;
}

.div-hgo-link-text-1 {
  position: absolute;
  top: 23%;
  left: 14%;
}

.div-hgo-link-text-2 {
  position: absolute;
  top: 31%;
  left: 14%;
  text-decoration: underline;
  color: #7ab846;
  cursor: pointer;
}

.div-hgo-link-text-3 {
  position: absolute;
  top: 45%;
  left: 3%;
}

.div-hgo-link-text-4 {
  position: absolute;
  top: 60%;
  left: 3%;
  color: #fe0000;
}

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

  .div-hgo-link-text-1 {
    left: 18%;
  }

  .div-hgo-link-text-2 {
    top: 42%;
    left: 3%;
  }

  .div-hgo-link-text-3 {
    top: 50%;
  }

  .div-hgo-link-text-4 {
    top: 67%;
  }
}
/* * * * * * * * * */

/* PANEL INFO MARKETING */
.div-marketing-info {
  position: fixed;
  display: none;
  justify-content: center;
  width: 90%;
  height: 75%;
  top: 15%;
  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;
}

.div-marketing-info-title {
  position: absolute;
  top: 3%;
  left: 3%;
}

.ul-marketing-info {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 10%;
  display: flex;
  justify-content: center;
}

.ul-marketing-info li {
  padding-right: 4vw;
  display: flex;
  height: 18vh;
  cursor: pointer;
  width: 11vw;
  padding-left: 4vw;
}

.div-marketing-info-text {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 5%;
  width: 94%;
  height: 58%;
  border-style: solid;
  border-color: rgb(205, 205, 205);
  border-width: 0.1em;
  border-radius: 0.5em;
  overflow-x: hidden;
  overflow-y: auto;
}

.div-marketing-info-text p {
  position: absolute;
  top: 5%;
  width: 94%;
  padding-bottom: 2vh;
}
/* * * * * * * * * * * * */

/* PANEL TUTORIALES */
.div-tutorials {
  position: fixed;
  display: none;
  width: 55%;
  height: 40%;
  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;
}

.div-tutorials-title {
  position: absolute;
  top: 3%;
  left: 3%;
}

.ul-tutorials {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 94%;
  overflow-y: auto;
  overflow-x: hidden;
  left: 3%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.ul-tutorials li {
  padding-bottom: 3vh;
  display: flex;
  height: 5vh;
}

.li-div-tutorials-element {
  position: relative;
  width: 100%;
}

.li-div-tutorials-element img {
  height: 100%;
}

.li-div-tutorials-element p {
  position: absolute;
  left: 10%;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.span-tutorials-link {
  color: #7ab846;
  cursor: pointer;
}

@media only screen and (max-width: 900px) {
  .div-tutorials {
    width: 94%;
    height: 60%;
  }

  .ul-tutorials {
    top: 15%;
    height: 80%;
  }

  .ul-tutorials li {
    height: 8vh;
  }

  .li-div-tutorials-element img {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 80%;
  }

  .li-div-tutorials-element p {
    left: 20%;
  }
}
/* * * * * * * * */

/* PANEL ENVIAR INVITACION ACTIVIDAD */
.div-panel-invitation-button {
  display: block;
}
/* * * * * * * * * */