:root {
  --colordelax: #ffffff;

  --colorfondomodal: #0078b7;

  --anchomodal: 500px;

  --anchomodalmovil: 300px;

  --alturamodal: 240px;

  --topmodal: -50px;

  --topmodalmovil: -78px;
}

#countdown,
.countdown {
  color: white;
  font-size: 3em;
  position: relative;
  bottom: 0.2em;
}

body > .divTecnicom {
  margin: 0em;
}

.colorlabel,
.label > label {
  color: #f24c27 !important;
}

.row {
  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  margin-right: -15px;

  margin-left: -15px;
}

.form-inline {
  display: -ms-flexbox;

  display: flex;

  -ms-flex-flow: row wrap;

  flex-flow: row wrap;

  flex-direction: row;

  -ms-flex-align: center;

  align-items: center;
}

.form-inline .label {
  display: -ms-flexbox;

  display: flex;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: center;

  justify-content: center;

  margin-bottom: 0;

  width: 100%;

  padding: 0.5em;

  color: white;

  font-size: 1em;
}

.form-inline .form-group {
  display: -ms-flexbox;

  display: flex;

  -ms-flex: 0 0 auto;

  flex: 0 0 auto;

  -ms-flex-flow: row wrap;

  flex-flow: row wrap;

  -ms-flex-align: center;

  align-items: center;

  margin-bottom: 0;
}

.form-inline .form-control {
  display: inline-block;

  width: auto;

  vertical-align: middle;
}

.form-flex {
  display: flex;

  display: -webkit-flex;

  width: 100%;

  justify-content: center;

  flex-direction: column !important;

  flex-wrap: wrap;

  position: relative;

  bottom: 3em;
}

.form-control {
  display: block;

  width: 100%;

  height: calc(1.5em + 0.75rem + 2px);

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #495057;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ced4da;

  border-radius: 0.25rem;

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#pw,
#prefijo {
  padding: 0em !important;

  width: auto !important;
}

#ingreso,
#regresar,
#regresarempty {
  background-color: #f24c27;

  color: white;

  width: 250px;

  height: 32px;

  margin: 10px auto;

  display: flex;

  flex-wrap: wrap;

  align-content: center;

  justify-content: center;
}

.btn {
  display: inline-block;

  font-weight: 400;

  font-weight: bold;

  color: white !important;

  text-align: center;

  vertical-align: middle;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  background-color: transparent;

  border: 1px solid transparent;

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  line-height: 1.5;

  border-radius: 0.25rem;

  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

.divTecnicom {
  display: flex;

  display: -webkit-flex;

  width: 259px;

  height: 92px;

  flex-wrap: wrap;

  position: fixed;

  right: 0;

  top: 20%;

  z-index: 1;
}

.divbutton {
  display: flex;

  display: -webkit-flex;

  width: 259px;

  height: 92px;

  flex-wrap: wrap;

  cursor: pointer;

  position: fixed;

  top: 32%;

  z-index: 50;

  right: 0;
}

@media only screen and (max-width: 1920px) {
  .divbutton {
    top: 15%;
  }
}

@media only screen and (max-width: 1366px) {
  .divbutton {
    top: 125px;
  }
}

@media only screen and (max-width: 1366px) and (height: 1024px) {
  .divbutton {
    top: 17%;
  }
}

@media only screen and (max-width: 1024px) {
  .divbutton {
    top: 20%;
  }
}
/**/

.divbutton > a {
  display: none;

  display: none;

  background-image: url("../images/llamada.webp");

  background-repeat: no-repeat;

  width: 259px;

  height: 92px;

  flex-wrap: wrap;

  cursor: pointer;
}

.divTecnicomModal-error {
  background: url("../img/error.png") !important;

  background-position: top;

  background-size: cover;

  display: flex;

  display: -webkit-flex;

  width: 360px;

  height: 350px;
}

.divTecnicomModal-error > .divTecnicomModal-body {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 70%;
}

.divTecnicomModal-error > .divTecnicomModal-body > .form-flex {
  display: flex;
  display: -webkit-flex;
  width: 100%;
  justify-content: flex-start;
  flex-direction: column !important;
  flex-wrap: wrap;
  position: relative;
  bottom: 3em;
}

.divTecnicomModal-error
  > .divTecnicomModal-body
  > .form-flex
  > div
  > #regresarerror {
  position: relative;
  top: 9em;
  background-color: #f24c27;
  color: white;
  width: 337px;
  height: 32px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.divTecnicomModal {
  background: url("../images/imag.webp");

  background-position: top;

  background-size: cover;

  display: flex;

  display: -webkit-flex;

  width: 360px;

  height: 350px;

  top: 0px;

  flex-wrap: wrap;

  transform: translate(260px, 0);

  transition-duration: 0.8s;

  transition-timing-function: linear;

  transition-delay: 0.2s;

  position: absolute;

  flex-direction: column;

  border-radius: 1em;

  z-index: 10;
}

.wait-class {
  background: url("../img/wait.png");

  background-position: center;

  background-size: cover;

  display: flex;

  display: -webkit-flex;

  width: 360px;

  height: 477px;

  flex-wrap: wrap;

  position: absolute;

  flex-direction: column;

  border-radius: 1em;
}

.gracias {
  background: url("../img/ventanaa.png");

  background-position: center;

  background-size: cover;

  display: flex;

  display: -webkit-flex;

  width: 360px;

  height: 477px;

  flex-wrap: wrap;

  position: absolute;

  flex-direction: column;

  border-radius: 1em;
}

.divTecnicomModal-header > span {
  display: flex;

  width: 100%;

  flex-wrap: wrap;

  justify-content: flex-end;

  position: relative;

  right: 1em;

  top: 1em;

  font-size: 1.2em;

  color: var(--colordelax);

  font-weight: bold;
}

.divTecnicomModal-body {
  display: flex;

  width: 100%;

  flex-wrap: wrap;

  justify-content: center;

  position: relative;

  top: 5em;
}

.desplazar-der {
  transform: translate(455px, 0);

  transition-duration: 0.8s;

  transition-timing-function: linear;

  transition-delay: 0.2s;
}

.desplazar-izq-modal {
  transform: translate(-160px, 0) !important;

  transition-duration: 0.8s;

  transition-timing-function: linear;

  transition-delay: 0.2s;
}

.desplazar-izq {
  transform: translate(-360px, 0);

  transition-duration: 0.8s;

  transition-timing-function: linear;

  transition-delay: 0.2s;
}

.cerrar {
  transform: translate(0px, 0);

  transition-duration: 0.8s;

  transition-timing-function: linear;

  transition-delay: 0.2s;
}

@media only screen and (max-width: 838px) {
  .divbutton > a {
    background-image: url("../img/fondo-movil.png");

    background-repeat: no-repeat;

    width: 160px;

    height: 70px;

    margin-top: 30px;

    right: 8px;
  }

  .divTecnicomModal {
    top: 3px;

    transform: translate(160px, 0);

    left: -103px;
  }

  .divbutton {
    width: 58px;

    height: 70px;

    right: 0px;
  }
}

@media only screen and (max-width: 698px) {
  .divTecnicomModal {
    top: var(--topmodalmovil);

    transform: translate(160px, 0);
  }

  .divbutton {
    width: 58px;

    height: 57px;

    right: 0px;
  }
}

@media only screen and (max-width: 538px) {
  #ingreso,
  #regresar {
    width: 237px;

    height: 32px;
  }

  .divTecnicomModal {
    transform: translate(160px, 0);
  }

  .desplazar-izq {
    transform: translate(-300px, 0);
  }

  .divTecnicomModal {
    width: var(--anchomodalmovil);
    top: 18px;
    left: -102px;
  }
}