@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

h1 {

    margin-top: 0px;
    font-weight: 500;
    font-size: larger;
    
}

#chatbox {

    position: relative;
    background-color: rgb(0, 46, 72);
    border-radius: 25px;
    border: 0.1px white solid;
    width: 95%;
    height: 60vh;

}

#cerrar {

    font-size: smaller;
    user-select: none;
    position: fixed;
    right: 8%;

}

#online {

    position: absolute;
    left: 0;

    width: 100%;
    height: 17%;

    border-radius: 15px;
    border: 0.1px white solid;

    display: inline-flex;
    align-items: center;

    background-color: rgb(0, 50, 80);
    color: rgb(255, 255, 255);

}

#mensajesbox {

    position: absolute;
    top: 51.5%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 68.5%;

    width: 100%;

    overflow-y: auto;

}

.mensajeR, .mensajeP, .mensajeRDelay {

    font-family: inter;

    display: inline-block;
    clear: both;

}

.mensajeR {

    font-size: small;

    float: left;

    text-align: left;

    max-width: 93%;
    word-wrap: break-word;

    background-color: rgb(0, 154, 185);
    width: fit-content;
    padding: 8px;
    margin: 5px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

.mensajeRDelay {

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: small;

    float: left;

    max-width: 93%;
    word-wrap: break-word;

    background-color: rgb(0, 154, 185);
    width: 6.1vh;
    height: 2vh;
    padding: 0.8vh;
    margin-top: 1vh;
    margin: 5px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

.puntos1 {

    background-color: white;
    margin-left: 0px;
    width: 8px;
    height: 8px;
    border-radius: 25px;

    -webkit-animation: sk-bouncedelay 2s infinite ease-in-out both;
    animation: sk-bouncedelay 2s infinite ease-in-out both;

}
.puntos2 {

    background-color: white;
    margin-left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 25px;

    -webkit-animation: sk-bouncedelay 2.2s infinite ease-in-out both;
    animation: sk-bouncedelay 2.2s infinite ease-in-out both;

}
.puntos3 {

    background-color: white;
    margin-left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 25px;

    -webkit-animation: sk-bouncedelay 2.4s infinite ease-in-out both;
    animation: sk-bouncedelay 2.4s infinite ease-in-out both;

}

@-webkit-keyframes sk-bouncedelay {
    0%,
    100% {
      -webkit-transform: scale(0.7); opacity: 0.4;
    }
    50% {
      -webkit-transform: scale(1.0); opacity: 1;
    }
}
  
  @keyframes sk-bouncedelay {
    0%,
    100% {
      -webkit-transform: scale(0.7); opacity: 0.4;
      transform: scale(0.7); opacity: 0.4;
    }
    50% {
      -webkit-transform: scale(1.0); opacity: 1;
      transform: scale(1.0); opacity: 1;
    }
}

.mensajeP {

    font-size: small;

    float: right;

    text-align: left;

    max-width: 93%;
    word-wrap: break-word;

    background-color: rgb(255, 255, 255);
    color: black;
    width: fit-content;
    padding: 8px;
    margin: 5px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}

#fotoasesor {

    width: 50px;
    height: 30px;
    object-fit: cover;
    margin-left: 3vw;
    border-radius: 100%;

}

#nombreasesor {

    margin-left: 1vh;
    font-weight: 500;

}

#cajacontroles {

    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute;
    bottom: 0;
    
    width: fit-content;
    
    margin-bottom: 1vh;
    margin-left: 1vw;
    
    padding: 5px;

    border: 1px solid rgba(128, 128, 128, 0.287);
    border-radius: 25px;
    
}

input{

    background-color: rgb(0, 0, 38);
    color: white;

    border-radius: 25px;
    padding: 1.5vh;
    margin-right: 0.5vh;
    width: 55vw;

    border: none;

}

input::placeholder{

    text-align: center;

}

button{

    background-color: rgb(0, 0, 38);
    color: gray;

    font-family: Inter;
    border-radius: 25px;
    padding: 1.5vh;
    width: 18vw;
    transition: 0.3s ease-in-out;

    border: none;

}

button:hover{

    background-color: rgb(0, 0, 52);
    color: white;
    transition: 0.3s ease-in-out;

}

#trail {

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

}

@media (orientation: landscape) {

    #mensajesbox{

        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #2a2828 #000000;

    }

    #fotoasesor {

        width: 5vh;
        margin-left: 2vh;
    
    }

    #chatbox {

        width: 50vw;

    }

    #cajacontroles {
        
        width: 90%;
        
        margin-bottom: 1vh;

        padding: 5px;
    
        border: 1px solid rgba(128, 128, 128, 0.287);
        border-radius: 25px;
        
    }

    input {

        width: 80%;

    }
    
    button{
    
        background-color: rgb(0, 0, 38);
        color: gray;
    
        font-family: Inter;
        border-radius: 25px;
        padding: 1.5vh;
        width: 40%;

    }

}

@media (max-width: 768px) {

    #cerrar {

        right: 13%;

    }

    #fotoasesor {

        width: 50px;
        height: 50px;
        object-fit: cover;
        margin-left: 3vw;
        border-radius: 100%;
    
    }

}