/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}

/* Portrait layout (default) */
.app {
    background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}

.tac { text-align: center; }
.dt { display: table; width: 100%; }
.dtc { display: table-cell; vertical-align: middle; }
body.login {
    background-color: #65BC98;
    background-image: none;
}
.login .container { overflow: hidden; width: 100%; height: 100%; padding: 0px; }
.login .header { text-align: center; padding: 1rem; background-color: #388867; margin: 0px 0px 20px 0px; }
.login .header img { width: 100%; max-width: 150px; }
.login .form { display: block; width: 100%; max-width: 500px; margin: 0 auto; overflow: hidden; }
.login .form label { color: white; font-size: 1rem; font-family: Arial; font-weight: normal; margin-bottom: 10px; margin-top: 10px; display: block; text-transform: none; text-align: center; width: 100% }
.login .form input[type="text"], .login .form input[type="password"], .login .form select { padding: 10px 20px; border: none; background-color: white; color: #000; display: inline-block; width: 100%; }
.login p { margin-top: 20px; color: white; font-size: 0.8rem; }
.btn-blue { color: white; background-color: #D70B51; text-align: center; font-size: 1rem; padding: 10px; display: inline-block; width: 100%; max-width: 300px; border: none; margin-top: 30px; }
.mwn { max-width: none !important; }
.btn-blue-2 { color: white; background-color: #D70B51; border: none; text-align: center; font-size: 1rem; padding: 15px; display: inline-block; max-width: 300px; text-decoration: none; text-transform: none; }
.btn-red { color: white; background-color: red; border: none; text-align: center; font-size: 1rem; padding: 10px 40px; display: inline-block; text-decoration: none; text-transform: none; }
.btn-green { color: white; background-color: green; border: none; text-align: center; font-size: 1rem; padding: 10px 40px; display: inline-block; max-width: 300px; text-decoration: none; text-transform: none; }
.btn-orange { color: white; background-color: orange; border: none; text-align: center; font-size: 1rem; padding: 10px 40px; display: inline-block; max-width: 300px; text-decoration: none; text-transform: none; }
.btn-blue-3 { color: white; background-color: #0c457e; border: none; text-align: center; font-size: 1rem; padding: 10px 40px; display: inline-block; max-width: 300px; text-decoration: none; text-transform: none; }
.btn-primary { color: white; background-color: #7266ba; border: none; text-align: center; font-size: 1rem; padding: 10px 40px; display: inline-block; max-width: 300px; text-decoration: none; text-transform: none; }
.btn-block { display: block !important; max-width: none !important }

.i-checks {
  padding-left: 20px;
  cursor: pointer;
}
.i-checks input {
  opacity: 0;
  position: absolute;
  margin-left: -20px;
}
.i-checks input:checked + i {
  border-color: #4dbecf;
}
.i-checks input:checked + i:before {
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  background-color: #4dbecf;
}
.i-checks input:checked + span .active {
  display: inherit;
}
.i-checks input[type="radio"] + i,
.i-checks input[type="radio"] + i:before {
  border-radius: 50%;
}
.i-checks input[disabled] + i,
fieldset[disabled] .i-checks input + i {
  border-color: #dee5e7;
}
.i-checks input[disabled] + i:before,
fieldset[disabled] .i-checks input + i:before {
  background-color: #dee5e7;
}
.i-checks > i {
  width: 20px;
  height: 20px;
  line-height: 1;
  border: 1px solid #cfdadd;
  background-color: #fff;
  margin-left: -20px;
  margin-top: -2px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
}
.i-checks > i:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 0px;
  height: 0px;
  background-color: transparent;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.i-checks > span {
  margin-left: -20px;
}
.i-checks > span .active {
  display: none;
}


.login.menu .header { margin-top: 0px; border-bottom: solid 3px #d3d3d1; }

.option { display: block; margin-bottom: 15px; text-decoration: none; }
.option span { color: white; text-align: center; display: block; font-size: 18px; font-weight: normal; }
.option .dtc { text-align: center; padding: 10px 0px; }
.option .dtc.dtc1 {width: 100px; text-align: right; }
.option .dtc img { max-width: 60px; }
.option .dtc span { text-transform: none; font-weight: bold; }
.option.option-1 { background-color: #00a85a; }
.option.option-2 { background-color: #a9518b; }
.option.option-3 { background-color: #ec3237; }
.option.option-4 { background-color: #f58634; }

.detalle { padding-bottom: 20px; } 
.listado .header, .detalle .header { margin-bottom: 0px; }
.listado .boton-grande { text-align: center; float: left; width: 40%; margin-left: 5%; margin-right: 5%; margin-bottom: 5%; }
.listado .boton-grande img { width: 100%; max-width: 144px; }

.cuerpo { max-width: 391px; min-width: 391px; max-height: 925px; min-height: 925px; position: relative; overflow: auto; margin: 0 auto; }
.cuerpo .cuerpo-img { width: 100%; position: absolute; top: 0px; left: 0px; }
.cuerpo a { position: absolute; top: 0px; left: 0px; }
.cuerpo a.cefaleas { top: 1%; left: 50%; }
.cuerpo a.cervical { top: 10%; left: 20%; }
.cuerpo a.hombros { top: 18%; left: 65%; }
.cuerpo a.dorsal { top: 25%; left: 21%; }
.cuerpo a.codo { top: 33%; left: 65%; }
.cuerpo a.lumbar { top: 35%; left: 20.5%; }
.cuerpo a.cadera { top: 50%; left: 10%; }
.cuerpo a.muneca { top: 46%; left: 68%; }
.cuerpo a.desgarros { top: 62%; left: 5%; }
.cuerpo a.rodilla { top: 75%; left: 60%; }
.cuerpo a.hemato { top: 80%; left: 9%; }
.cuerpo a.tobillo { top: 90%; left: 60%; }
.cuerpo a.pie { top: 93%; left: 20%; }

.panelNoticia { padding: 10px; border-radius: 10px; background-color: white; margin-bottom: 20px; text-decoration: none; display: block; }
.panelNoticia .imagenNoticia { max-width: 96px; min-width: 96px; margin-right: 10px; vertical-align: top; }
.panelNoticia .imagenNoticia img { width: 100%; }
.panelNoticia .textoNoticia { vertical-align: top; padding-left: 15px; }
.panelNoticia .textoNoticia .tituloNoticia { text-transform: none; font-size: 18px; color: #222; font-weight: bold; margin-bottom: 10px; }
.panelNoticia .textoNoticia .descripcionNoticia { text-transform: none; font-size: 14px; font-weight: normal; color: #9b9b9b; }

.detalle .textoNoticia .tituloNoticia { font-size: 22px; padding-top: 10px; padding-bottom: 15px; }
.detalle .textoNoticia { padding-left: 0px; }
.detalle #imagenNoticia { width: 100%; }
.panelNoticia .textoNoticia .descripcionNoticia { text-transform: none; font-size: 16px; line-height: 22px; font-weight: normal; color: #9b9b9b; }

#loader { margin: 0 auto; display: block; width: 60px; }
iframe { width: 100% !important; }

.deshabilitado { filter: grayscale(100%); }

.login .header .menu-boton { max-width: 50px; padding-left: 15px; cursor: pointer; }
nav { position: fixed; top: 0px; width: 80%; left: -80%; height: 100%; background-color: #0b0b55; z-index: 9999; transition: all 0.5s; -webkit-transition: all 0.5s; }
nav.active { left: 0px; }
nav ul { list-style: none; padding: 10px; }
nav ul li a { color: white; text-decoration: none; font-size: 1rem; padding: 10px; display: block; }

.pedido_detalle { 
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 15px;
  background-color: white; 
  border-radius: 5px;
  font-size: 18px;
}
.pedido_detalle.atrasado {
  background-color: #9b0000;
  color: white;
}
.pedido_detalle.atrasado a {
  color: #a1a1a1;
}
.pedido_detalle .pedido_numero {
  font-weight: bold;
  font-size: 14px;
}
.pedido_detalle .pedido_desde {
    font-size: 14px;
    margin: 5px 0px;
    color: #999;
}
.pedido_detalle .pedido_cliente {
  font-weight: bold;
  font-size: 18px;
}
.pedido_detalle .pedido_cliente_direccion { color: #222; }
.pedido_detalle .pedido_comercio {
  font-weight: bold;
}
.pedido_detalle .pedido_comercio_direccion { color: #222; }

.pedido_detalle #items p { color: #222; margin-top: 5px; margin-bottom: 10px; }

.container .form.detalle { display: none; }
.pedido_detalle .estado_pendiente, .pedido_detalle .estado_aceptado, .pedido_detalle .estado_en_camino { display: none; }

.solo_con_efectivo { display: none }
.tabla { width: 100%; margin-bottom: 20px; }
.tabla td, .tabla th { border-collapse: collapse; border: solid 1px #ccc; padding: 5px; }

.whatsapp-btn { background-color: #15970c; color: white; padding: 5px 15px; border-radius: 5px; }
.form-control { padding: 5px 15px; font-size: 16px; display: block; margin-bottom: 20px; box-sizing: border-box; }
.check_comercio { width: 24px; height: 24px; }
.boton_rutear{position: fixed;bottom: 0px; width: 100%;}
.desactivado {display: none;}


.login.chat-page .header { text-align: left }
.login.chat-page .header img { max-width: 90px; }
.chat-page .panel { margin-bottom: 0px; }
.container_mensajes{ height: calc(100vh - 198px); overflow-y: scroll; }
.container_mensajes .fa-check{color: #cfcfcf}
.leido{color: #d70b51 !important}
.container_mensajes .separador {margin: 20px 0;}
.container_mensajes .mensaje{text-align: left; display: block; font-size: 13px; max-height: auto; min-height: 40px; max-width: 250px; border-radius: 15px; padding: 10px;}
.mensaje.enviado { color: white; background-color: #59a2e0;margin-left: auto; }
.mensaje.recibido { color: white; background-color: #60a3b4;}
.fecha_mensaje_enviado{ margin-left: auto;display: table;margin-right: 6px;font-size: 12px; color: #cfcfcf; margin-top: 3px;}
.fecha_mensaje_recibido{margin-left: 6px;font-size: 12px; color: #cfcfcf; margin-top: 3px;}
.transparent{border: 1px solid transparent; background-color: transparent;}

.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; text-transform: none; font-weight: bold; }

/* seguimiento */

.seguimiento{
  padding: 0px 10px 10px 10px;
}

.container_seguimiento{
  display: inline-block;
  margin-left: 20px;
}

.numero_seguimiento{
  background-color: #15B496;
  border-radius: 5px;
  height: 40px;
  width: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}


.linea_vertical{
  background-color: #15B496;
  height: 30px;
  width: 1px;
  margin: 0px auto;
}

.card_seguimiento {
  background-color: #fff;
  border-radius: 5px;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.card_seguimiento p{
  color: #9CA4B1;
  font-size: 14px;
  margin-top: 0px;
  font-weight: bold;
}

.card_seguimiento h5{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 100;
}

.card_botones{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 10px 0px 10px;
  margin-top: 10px;
  border-top: 1px solid #9CA4B1;
}


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

.pt10{
  padding-top: 10px;
}

.text-dark{
  color: #000;
}