@import url("//fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body{font-size:16px;color:#404040;font-family:Montserrat, sans-serif;background-image:url("../img/auth-bg.jpg");background-position:center;background-attachment:fixed;margin:0;padding:2rem 0;display:grid;place-items:center;box-sizing:border-box}
.card{background-color:#fff;width:380px;display:flex;flex-direction:column;overflow:hidden;border-radius:2rem;box-shadow:0px 1rem 1.5rem rgba(0,0,0,0.5)}
.bannerLogo{background-image:url("//www.axialys.com/wp-content/uploads/2020/03/logo-axialys.png");
background-position:center;background-repeat:no-repeat;background-size:contain;display:flex;align-items:flex-end;justify-content:center;box-sizing:border-box;margin:25px;height:40px}
.bannerLogo img{background-color:#fff;width:6rem;height:6rem;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.3);transform:translateY(110%);transition:transform 200ms cubic-bezier(0.18, 0.89, 0.32, 1.28)}
.bannerLogo img:hover{transform:translateY(110%) scale(1.1)}
.dialPad{padding:1rem 5rem 2rem 5rem}
.infoCard{margin-top:50px}
.videoInProgress{position:relative;}
.pictureInPicture{position:absolute;width:40%;bottom:.25rem;right:.25rem;}
.cameraUser{bottom:.25rem;right:.25rem;position:absolute;z-index:10}
.fullScreenView{top:.25rem;left:.25rem;position:absolute;z-index:10}
.bgPink{color:#FF5B5C}
.cursor-pointer{cursor:pointer}
.form-control::placeholder {font-size:14px;font-weight:normal}
/* FULLSCREEN */
.viewFullScreen{display:block;padding:0;background-color:#000;background-image:none}
.viewFullScreen .container{width:100%;max-width:100%;padding:0}
.viewFullScreen .videoInProgress{margin:0px!important}
.viewFullScreen .picture video{width:100%}
.viewFullScreen .pictureInPicture{bottom:0;right:0;text-align:right !important}
.viewFullScreen .actions{bottom:20px;position:absolute;width:100%}
.viewFullScreen .callBtn{background-image:none;background-color:transparent}
.viewFullScreen .cameraUser .btn, .viewFullScreen .fullScreenView .btn{background-color:rgba(0,0,0,0.6);color:#FFF;box-shadow:1px 1px 10px rgba(0,0,0,0.5);border-color:rgba(0,0,0,0.05)}
.viewFullScreen .bannerLogo,.viewFullScreen .infoCard,.viewFullScreen .numberCall,.viewFullScreen .dialPad,.viewFullScreen .credits,.viewFullScreen .sticky{display:none}
.viewFullScreen .card{background-color:#000;width:100%;display:flex;flex-direction:column;overflow:initial;border-radius:0;box-shadow:none}
/* .digit{padding:8px;max-width:calc(33.333% - 24px);font-size:1.7rem;cursor:pointer;margin:0 12px;} */
.digit{padding:5px;font-size:1.7rem;cursor:pointer}
.digit:active{background-color:#e6e6e6}
.callBtn{padding:1rem;
background-color: #7c76f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(124, 118, 242)), to(rgb(67, 60, 154)));
background-image: -webkit-linear-gradient(top, rgb(124, 118, 242), rgb(67, 60, 154));
background-image: -moz-linear-gradient(top, rgb(124, 118, 242), rgb(67, 60, 154));
background-image: -o-linear-gradient(top, rgb(124, 118, 242), rgb(67, 60, 154));
background-image: -ms-linear-gradient(top, rgb(124, 118, 242), rgb(67, 60, 154));
background-image: linear-gradient(top, rgb(124, 118, 242), rgb(67, 60, 154));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c76f2', EndColorStr='#433c9a')}
.callBtn button{width:4rem;height:4rem;font-size:1.6rem}
.callBtn  .activeBtn{width:5rem ;height:5rem;margin-left:20% !important;}
.sub{font-size:0.8rem;color:grey}
#output{font-family:"Exo";font-size:1.8rem;height:40px;font-weight:bold;color:#1976d2}
.sticky{position:fixed;bottom:0}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('//i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

body.loading .modal {
    overflow: hidden;   
}

body.loading .modal {
    position:absolute;
    display: block;
    width:100%;
    height:100%;
    color: #ee1111;
    background-color: rgba(255, 255, 255, 0.2);
}

.msg {
    top: 50%;
    width:100%;
    height:100%;
    font-size:30px;
    font-weight:bold;
    vertical-align:middle;
    text-align:center;    
}


#videoLocal
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}


section{
    position: relative;
}

@media(max-width: 576px){
    .card,section {
        width: 100%;

    }
}