header:not(.sticking) {
	background-color: rgba(255, 112, 4, 0);
}

#chat-sec{
    height:calc(var(--fvh)*100);
    width:100vw;
    background-image:url('https://ventasradioramaoccidente.com/assets/static/def_background.jpg');                                                                                                 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    padding:13vh 10vw 3vh;
    display:flex;
    flex-direction:column;
}
#chat-sec h1{
    height:calc(var(--fvh)*6);
    font-family:Qbold;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    margin-bottom:.5em;
    font-size:calc(var(--fvh)*6);
    text-shadow: -4px 4px 1px #222;
    overflow:visible;
    line-height: 1em;
}

#chat-sec #chat-out{
    width:100%;
    height:100%;
    background-color:rgba(255, 112, 4, .7);
    border-radius: calc(var(--fvh)*10);
    padding:calc(var(--fvh)*2);
}

#chat-sec #chat-out{
}

#chat-sec #chat-out #register{
    height:calc(100% - (9 * var(--fvh)));
    width:100%;
    background-color:rgba(100,100,100,.9);
    border-radius: calc(var(--fvh)*8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}



#chat-sec #chat-out #register form p{
    color:#fff;
    font-family: Qmedium;
    font-size:calc(var(--fvh)*3);
}
#chat-sec #chat-out #register form input, #chat-sec #chat-out #register form textarea, #chat-sec #chat-out #register form div.go{
    margin:.25em;
    margin-bottom:.75em;
    width:50vw !important;
    height:1.5em;
    font-size:calc(var(--fvh)*4);
    line-height:1em;
    padding:.25em;
    padding-left:.5em;
    font-family: Qregular;
    color:#000;
    border-radius:.5em;
    transition:background-color .5s, color .5s;
}
#chat-sec #chat-out #register form input:not(:placeholder-shown):invalid{
    background-color:#f00;
    color:#fff;
}

#chat-sec #chat-out #register form textarea{
    height:5em  !important;
    margin-bottom:0em;
    line-height:1.1em;
    padding:.25em;
}

#chat-sec #chat-out #register form div.go{
    margin:0;
    margin-top:.5em;
    margin-left:.25em;
    background-color:#00AA00;
    cursor:pointer;
    font-family: Qbold;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
}


 #chat-sec #chat-out #chatWaiting{
    height:calc(100% - (9 * var(--fvh)));
    width:100%;
}

 #chat-sec #chat-out #chatWaiting div{
    background-image:url('https://ventasradioramaoccidente.com/assets/static/connecting.apng');  
    background-size:40vh;
    background-repeat:no-repeat;
    background-position: center;
    height:70%;
    width:100%;
}

 #chat-sec #chat-out #chatWaiting p{
    height:30%;
    width:100%;
    font-size: 6vh;
    font-family: Qregular;
    color: #fff;
    text-align: center;
}


#chat-sec #chat-out #chat{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
}
#chat-sec #chat-out #chat #messages{
    margin-bottom:calc(var(--fvh)*2);
    border-radius: calc(var(--fvh)*7) calc(var(--fvh)*7)  calc(var(--fvh)*2) calc(var(--fvh)*2);
    height: calc(var(--fvh)*62);
    border: solid 5px #fff;
}

#chat-sec #chat-out #chat #messages .roll{
    background-color:#fff;
    height:100%;
    font-size:calc(var(--fvh)*10);
    width:calc(100% + (5 * var(--fvh)));
    padding:.3em;
    padding-right:.8em;
    overflow-y:scroll;
}

#chat-sec #chat-out #chat #messages .roll div{
    position:relative;
    width: calc(100% + 10px);
}

#chat-sec #chat-out #chat #messages .roll p{
    font-size:calc(var(--fvh)*3);
    font-family: wSans;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    border-radius:.3em;
    padding:.3em .5em;
    margin-bottom: .3em;
    position:relative;
    max-width: 60vw;
}

#chat-sec #chat-out #chat #messages .roll div.cli p{
    float: right;
    text-align: right;
    color:#000;
    background-color:#ccc;
    border-radius:.5em .5em 0em .5em;
}

#chat-sec #chat-out #chat #messages .roll div.ase p{
    float: left;
    text-align: left;
    color:#fff;
    background-color:#ff6f03;
    border-radius:.5em .5em .5em 0em;
}

  
#chat-sec #chat-out #chat #tBox{
    height:auto; 
    display:flex;
    flex-direction:row;
    border-radius:1vh;
    margin: 0vw calc(var(--fvh)*8);
}

#chat-sec #chat-out #chat #tBox input{
    width:calc(100% - var(--fvh)*7) !important;
    width:100%;
    height:calc(var(--fvh)*7) !important;
    /*min-height:calc(var(--fvh)*7);*/
    font-size:calc(var(--fvh)*3);
    font-family: wSans;
    padding: .5em;
    /*padding-left: 2vh; */
}

#chat-sec #chat-out #chatEnded{
    padding:0 !important;
}
#chat-sec #chat-out #chatEnded #chat{
    padding:0;
}
 
#chat-sec #chat-out #chatEnded #chat #messages{
    height:calc(var(--fvh)*71);
    margin:0;
    border-radius: calc(var(--fvh)*8);
}

#chat-sec #chat-out #chatEnded #chat #messages #end{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}

#chat-sec #chat-out #chatEnded #chat #messages #end p{
    font-size:2.5vh;
    float:none;
    width:100%;
    text-align:center;
    max-width: 100%;
    color: #888888;
    background: transparent; 
}
#chat-sec #chat-out #chatEnded #chat #messages #end button{
    font-size:2.5vh;
    padding:1vh 3vh;
    font-family: Qmedium;
    border-radius:3vh;
    border:2px #ff6f03 solid;
    background-color:#ff6f03;
    color: #fff;
    cursor:pointer;
    transition:background-color .3s, color .3s;
}
#chat-sec #chat-out #chatEnded #chat #messages #end button:hover:not(:active){
    background-color:#fff;
    color:#000;
}
#chat-sec #chat-out #chat #tBox button{
    background-color:#15b249;
    width:.7em;
    height:.7em;
    font-size:calc(var(--fvh)*10);
    cursor:pointer; 
    background-image:url('https://ventasradioramaoccidente.com/assets/static/send-paper.svg');  
    background-size:.45em;
    background-repeat:no-repeat;
    background-position: center;
}
#chat-sec #chat-out #chat #tBox button:hover{
    background-color:#009933;
}
 
 #chat-sec #chat-out #chatEnded, #chat-sec #chat-out #chatRejected{
    height:100%;
    width:100%;
    font-size: 5vh;
    padding:2vh;
    flex-direction:column;
    font-family: Qmedium;
    text-align:center;
}
 #chat-sec #chat-out #chatRejected h1{ 
    color:#fff; 
    margin-bottom:2vh;
}
 #chat-sec #chat-out #chatRejected *{
    font-size:1em;
    padding:2vh;
}


@media only screen and (max-width: 800px){
    #chat-sec h1{
        font-size:6vw;
    }
    #chat-sec #chat-out{
        padding:var(--fvh);
    }
    #chat-sec #chat-out #register{
        border-radius: calc(var(--fvh)*9);
    }
    #chat-sec #chat-out #register h1#start{
        font-size:5vw;
        padding:3vw;
    }

    
    #chat-sec #chat-out #chatWaiting p{
        font-size: 6vw;
    }

    #chat-sec #chat-out #chatWaiting div{
        background-size:40vw;
    }

    #chat-sec #chat-out #chat #messages{
        border-radius: calc(var(--fvh)*9) calc(var(--fvh)*9) calc(var(--fvh)*2) calc(var(--fvh)*2);
    }
    /*#chat-sec #chat-out #chat #messages .roll div{
        width: calc(56vw + 10px + (var(--fvh)*6));
        width: calc(100% + 10px);
    }*/
    #chat-sec #chat-out #chat #messages .roll p{
        max-width:60vw;
        word-wrap: break-word;
    }
    #chat-sec #chat-out #chat #tBox{
        margin: 0vw calc(var(--fvh)*4);
    }
    

    #chat-sec #chat-out #chatEnded #chat #messages{
        height:66vh;
        border-radius: calc(var(--fvh)*9);
    }

}