body, #app { user-select: none; }

/* ========== App.vue styles ========== */
 .help {
     position: absolute;
     width: 80%;
     left: 10%;
     top: 10%;
     border-radius: 3vw;
     background: #F0F0F0F0;
     padding: 5%;
     z-index: 10000000000000000000;
     font-size: 0.9em;
 }
 html, body {
     font-family: "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
     background-color: black;
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;
 }
 .vvfast {
     animation-duration: 0.1s;
 }
 .fullw {
     width: 100%;
 }
 .fullh {
     height: 100%;
 }
 .abstop {
     position: absolute;
     top: 0;
     left: 0;
 }
 .absbottom {
     position: absolute;
     bottom: 0;
     left: 0;
 }
 .ztop {
     z-index: 100;
 }
 .fade-enter-active, .fade-leave-active {
     transition: opacity 0.5s ease;
 }
 .fade-enter, .fade-leave-to {
     opacity: 0;
 }
 .timermark {
     position: fixed;
     z-index: 9900000000000000000000;
     background-color: #333333;
     width: 13px;
     height: 13px;
     bottom: 0;
     right: 0;
 }

/* ========== MobileLock styles ========== */
 .black-screen {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     margin: 0;
     background-color: black;
     z-index: 100000;
 }
 .unlock-zone {
     position: absolute;
     width: 33vw;
     height: 33vw;
     margin: 0;
     background-color: black;
     z-index: 100001;
 }
 .unlock-zone.top-right {
     top: 0;
     right: 0;
 }
 .unlock-zone.top-left {
     top: 0;
     left: 0;
 }
 .unlock-zone.bottom-right {
     bottom: 0;
     right: 0;
 }
 .unlock-zone.bottom-left {
     bottom: 0;
     left: 0;
 }

/* ========== MobileMain styles ========== */
 .destround2 {
      margin: auto;
      border-radius: 50%;
      background-color: #68BFD0;
      color: #FFFFFF;
      font-size: 1.2em;
      width: 12vw;
      line-height: 12vw;
      margin-top: 5px;
      margin-bottom: 5px;
      display:inline-block;
      text-align: center;
 }
 .icoround {
     width: 12vw;
     height: 12vw;
     border-radius: 50%;
     margin: auto;
     line-height: 12vw;
     margin-top: 5px;
     margin-bottom: 5px;
 }
 .vfast { animation-duration: 0.2s; }
 .icons-container {
     margin-left: 4%;
     margin-right: 4%;
     position: absolute; bottom: 15vw; left: 0; width: 92%;
 }
 .icon {
     padding-bottom: 5vw;
 }
 .tt td {
     height: 20vw;
     width: 20vw;
     position: relative;
     user-select:none
 }
 .tt td small{
     font-size: 0.3em;
     display: block;
     user-select:none
 }
 .tt td .pulse {
     width: 80px;
     height: 80px;
     background: #33333366;
     border-radius: 40px;
     animation: flashs 0.5s;
 }
 .linear-wipe {
     background: linear-gradient(to right, #FFF 20%, #555 40%, #333 60%, #FFF 80%);
     background-size: 200% auto;
     color: #000;
     background-clip: text;
     text-fill-color: transparent;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: shine 2s linear infinite;
 }
 @keyframes shine {
     to {
         background-position: 200% center;
     }
 }
 @keyframes shake {
     0%, 100% { transform: translateX(0); }
     10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
     20%, 40%, 60%, 80% { transform: translateX(10px); }
 }
 .shake {
     animation: shake 0.5s;
 }
 .transparent {
     background-color: #00000000;
 }
 .main .time {
     position: absolute;
     top: 30%;
     text-align: center;
     margin:auto;
     width: 100%;
     font-size: 25vw;
     color: #FFFFFF;
 }
 .main .unlock-legend {
     position: absolute;
     bottom: 10%;
     text-align: center;
     margin:auto;
     width: 100%;
     font-size: 4vw;
     color: #FFFFFF;
 }
 .main .opac {
     z-index: 10;
     position: absolute;
     width:100%;
     top: 0;
     left:0;
     background: rgba(0,0,0, 0.7);
     height: 100%;
     -webkit-transition: opacity 0.7s ease-in-out;
     -moz-transition: opacity 0.7s ease-in-out;
     -o-transition: opacity 0.7s ease-in-out;
     transition: opacity 0.7s ease-in-out;
 }
 .main .notifications .vvcenter {
     display: inline-block;
     vertical-align: middle;
     float: none;
 }
 .main .notifications {
     width: 90%;
     position: relative;
     top : 5vh;
     margin: auto;
     z-index: 20;
     color: #303030;
 }
 .main  .notification .numtel {
     font-size: 1.0em;
     display: inline-block;
 }
 .main .notification .notifdate {
     font-size: 0.7em;
     font-weight: 200;
 }
 .main .notifications .notification {
     position: relative;
     padding: 4%;
     padding-left: 6%;
     padding-right: 6%;
     font-size: 5.2vw;
     background: #FFFFFFBB;
     color: #333;
     border-radius: 4vw;
     border-color: #555555;
     border-width: 0px !important;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

/* ========== MobileTel styles ========== */
 .dcallbut {
     display: inline-block;
     font-size: 0.7em;
     padding: 3vw;
     margin: 3vw;
     color: white;
     border-radius: 5vw;
 }
 .doublecall {
     padding: 3vw;
     font-size: 5vw;
     position: absolute;
     width: 80%;
     left: 10%; top: 5%;
     border-radius: 5vw;
     background: #F0F0F0;
     color: black;
 }
 .buttonlegend {
     font-size: 0.5em;
     color: #888;
     text-align: center;
 }
 .blink_me {
     animation: blinker 1s linear infinite;
 }
 @keyframes blinker {
     50% {
         opacity: 0;
     }
 }
 .statut.blink_me {
     font-weight: bold;
     font-size: 0.9em
 }
 .statut.warning {
     color: red !important;
 }
 .text-center {
     text-align: center;
 }
 .blue { color: #3980fa  !important; }
 .btnselect {
     color: #276d20;
 }
 .ripple:after {
     content: '';
     position: absolute;
     top: 4vw;
     left: 6vw;
     width: 15vw;
     height: 15vw;
     background: rgba(255, 255, 255, .2);
     opacity: 0;
     border-radius: 50%;
     transform: scale(1, 1) translate(-50%);
     transform-origin: 50% 50%;
 }
 @keyframes ripple {
     0% {
         transform: scale(0, 0);
         opacity: 1;
     }
     20% {
         transform: scale(2, 2);
         opacity: 1;
     }
     100% {
         opacity: 0;
         transform: scale(4, 4);
     }
 }
 .ripple::after {
     animation: ripple 1s ease-out infinite;
 }
 .phone {
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: space-around;
     color: #F0F0F0;
     font-size: 8vw;
     background-size: cover;
     background-position: center center;
 }
 .phone .item {
     margin: auto;
     margin-bottom: 5px;
 }
 .phone .photo {
     color: #666;
     font-size: 14vw;
     padding-top: 5vw;
 }
 .phone .avatar {
     width: 38%;
 }
 .phone .avatar.big {
     width: 40%;
 }
 .phone .head {
     width: 100%;
 }
 .phone .statut {
     margin-top: 5vw;
     font-size: 6vw;
     color: #DDD;
     text-align: center;
 }
 .phone .utils-buttons .fa-circle {
     color: #333;
 }
 .phone .utils-buttons {
     color: #999;
 }
 .phone .utils-buttons .selected {
     color: #A0A0A0;
 }
 .phone .call-buttons {
     font-size: 7.7vw;
     padding-bottom: 12vw;
 }
 .phone .call-buttons .grey {
     color: #666666;
 }
 .phone .call-buttons .greyw {
     color: #999;
 }
 .phone .call-buttons .red {
     color: red;
 }
 .phone .call-buttons .green {
     color: green;
 }
 .phone .notifications .vvcenter {
     display: inline-block;
     vertical-align: middle;
     float: none;
 }
 .phone .notifications {
     z-index: 100000000000;
     width: 90%;
     position: absolute;
     top : 5vh;
     left: 5%;
     margin: auto;
     color: #303030;
 }
 .phone  .notification .numtel {
     font-size: 1.2em;
     display: inline-block;
     padding-bottom: 5px;
 }
 .phone .notification .notifdate {
     font-size: 0.7em;
     font-weight: 200;
 }
 .phone .notifications .notification {
     padding: 7%;
     padding-left: 10%;
     padding-right: 10%;
     font-size: 6vw;
     background: #EDEDED;
     border-radius: 4vw;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

/* ========== MobileTelDir / MobileTelCompose / MobileTelContact / MobileRepondeurList styles ========== */
 .avatarimg {
     width: 12%;  margin-left: 2%; margin-right: 3%
 }
 .user-dir {
     padding-top: 6vw;
     background-color: #F0F0F0;
     height: 100%;
     overflow: auto;
     font-size: 5vw;
 }
 .list-group-item:first-child {
     border-top-left-radius: .5rem !important;
     border-top-right-radius: .5rem !important;
 }
 .list-group-item:last-child {
     border-bottom-right-radius: .5rem !important;
     border-bottom-left-radius: .5rem !important;
 }
 .user-dir .list-group {
     margin-right: 7px;
     margin-left: 7px;
     border-radius: 20px;
 }
 .user-dir .list-group-item {
     vertical-align: middle;
     font-size: 0.8em;
     padding: 1.8vh; padding-right: 1vw; padding-bottom: 1vh;
 }
 .user-dir .list-group-item.selected {
     background-color: #C0C0C0;
 }
 .user-dir .win-head {
     padding: 2%;
     position: absolute;
     left: 0;
     top: 3.5vw;
     width: 100%;
     z-index: 99;
     background-color: #F0F0F0;
     box-shadow: 0px 3px 3px 0px #65656557;
 }
 .user-dir .win-head .title {
     font-size: 1em;
 }
 .user-dir .win-content {
     color: #666;
     position: relative;
     top: 28vw;
     z-index: 10;
 }
 .user-dir .dirtitle {
     color: #6fc16f;
     text-transform: uppercase;
     font-weight: bold;
     padding-left: 5%;
     padding-top: 8px;
     padding-bottom: 8px;
     font-size: 0.6em;
 }
 .user-dir .win-content .trash-but {
     float: right;
 }
 .user-dir .win-content .phone-but {
     float: right;
     font-size: 1.2em
 }
 .user-dir .win-head .nav .title {
     display: flex-item;
     margin-right: 6vw;
     font-size: 0.9em;
     display: inline-block;
     font-weight: normal;
     vertical-align: top;
 }
 .user-dir .win-head .nav .title.active {
     color: #6fc16f;
     border-radius: 10px;
     text-decoration: underline;
     font-weight: bold;
 }

/* TelCompose specific */
 .win-content .numkey {
     width: 100%;
     background: #FFF;
 }
 .win-content .numinput {
     width: 100%;
     height: 13vh;
     font-size: 11vw;
     font-weight: normal;
     font-family: sans-serif;
     padding-left: 5%;
     background: #FFF;
 }

/* TelContact specific */
 .user-dir .win-content.telcontact-content {
     color: #666;
     position: relative;
     z-index: 10;
     background-color: #F0F0F0;
     top: 0;
 }

/* ========== MobileSMS styles ========== */
 .playing {
     background: rgba(255, 255, 255, 0.1);
     width: 2rem;
     height: 2rem;
     border-radius: 0.3rem;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 0.5rem;
     box-sizing: border-box;
 }
 .playing__bar {
     display: inline-block;
     background: black;
     width: 25%;
     height: 100%;
     animation: up-and-down 1.3s ease infinite alternate;
 }
 .playing__bar1 {
     height: 60%;
 }
 .playing__bar2 {
     height: 30%;
     animation-delay: -2.2s;
 }
 .playing__bar3 {
     height: 75%;
     animation-delay: -3.7s;
 }
 @keyframes up-and-down {
     10% { height: 30%; }
     30% { height: 100%; }
     60% { height: 50%; }
     80% { height: 75%; }
     100% { height: 60%; }
 }
 .animate__animated.fast {
     animation-duration: 0.3s;
 }
 img.mms {
     border-radius: 2vw;
 }
 .mmblock {
     margin-bottom: 1.2vh
 }
 .mmblock.right {
     text-align: right;
 }
 .win-head {
     font-size: 5vw;
     color: #333;
     padding-left: 4vw;
     padding-right: 4vw;
     padding-top: 3vw;
     padding-bottom: 3vw;
     box-shadow: 0px 3px 3px 0px #65656557;
 }
 .destround {
     text-align: center;
     border-radius: 50%;
     background-color: #878786;
     color: #FFFFFF;
     font-size: 7vw;
     text-transform: capitalize;
     width: 11vw;
     line-height: 11vw;
     margin: 6px;
     margin-left: 8px
 }
 .sms .opac {
     position: absolute;
     z-index: 10000;
     width:100%;
     top: 0;
     left:0;
     background: rgba(0,0,0, 0.3);
     height: 100%;
     transition: opacity 0.7s ease-in-out;
 }
 .deletediag {
     padding: 15px;
     padding-left: 20px;
     padding-right: 20px;
     font-family: 'roboto';
     margin-left: 10%;
     top: 30vh; left: 0;
     z-index: 9999999999999999999;
     position: absolute;
     width: 80%;
     border-radius: 20px;
     background: white;
 }
 .inputblock .txtinput {
     overflow: hidden; resize:none; font-size: 1.0em;
 }
 @font-face {
     font-family: emoji;
     src: url('NotoColorEmoji.ttf') format('truetype');
     unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF;
 }
 .sms {
     font-family: emoji, "Roboto", Helvetica Neue, Helvetica, Arial, sans-serif;
     line-height: 1;
     background-color: white;
     height: 100%;
     font-size: 4.0vw;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: space-between;
 }
 .sms .win-footer {
     width: 100%;
 }
 .sms .win-footer .inputblock {
     padding-top: 2vw;
     text-align: center;
     margin-bottom: 1vw;
 }
 .sms .win-footer .inputblock .far {
     color: grey;
 }
 .sms .keyboard img {
     width: 100%;
 }
 .sms .win-footer textarea {
     width: 100%;
     height: auto;
     vertical-align: bottom;
     font-size: 1.1em;
     padding: 8px;
     box-shadow: none; outline: none;
     background: white;
     border: 0px solid #D0D0D0;
     border-radius: 5vw;
 }
 .sms .win-footer .sendtxt{
     border-radius: 5vw;
     background: white;
     border: 1px solid #D0D0D0;
     padding-left: 5%;
     padding-right: 5%;
 }
 .sms .win-content {
     margin-bottom: auto;
     margin-left: 0;
     margin-right: 0;
     color: #666;
     z-index: 10;
     text-align: left;
     overflow: hidden;
     overflow-y: auto;
 }
 .sms .message {
     max-width: 62%;
     vertical-align: middle;
     margin: 1.5vw;
 }
 .vcenter {
     display: inline-block;
     vertical-align: middle;
     float: none;
 }
 .msgdate {
     text-align: center;
     color: #808080;
     font-size: 0.9em;
     padding-top: 1vh;
     padding-bottom: 1vh;
 }
 .msghour {
     vertical-align: bottom;
     color: #808080;
     font-size: 0.7em;
     position: relative;
     top: -2vw;
 }
 .left .msghour {
     margin-left: 2vw;
 }
 .right .msghour {
     padding-right: 4vw;
 }
 .sms .message .message-box{
     margin-top: 1.2vw;
     margin-bottom: 1.2vw;
     padding: 3.5vw;
     background: #FFF;
     border-radius: 4vw;
     font-size: 1.2em;
     line-height: 1.2;
     position: relative;
     width: auto;
     transition: opacity 0.7s ease-in-out;
 }
 .sms .message.left .message-box {
     margin-right: auto;
     color: #3D3D41;
     background-color: #F0F0F0;
 }
 .sms .message.right .message-box {
     margin-left: auto;
     color: white;
     background-color: #00A192;
     float: right;
 }
 .sms .message.left {
     margin-left: 8vw;
 }
 .sms .message.right {
     margin-left: auto;
     margin-right: 8vw;
 }
 .sms .message small {
     font-size: 0.5em;
 }
 .sms textarea.form-control:focus{
     border-color: #A0A0A0;
     -webkit-box-shadow: none;
     box-shadow: none;
 }
 @keyframes animate {
     0%, 40%, 100% {
         opacity: 0.5;
     }
     20% {
         opacity: 1;
     }
 }
 .dot {
     display: inline-block;
     vertical-align: baseline;
     animation-name: animate;
     animation-duration: 1s;
     animation-iteration-count: infinite;
     animation-timing-function: ease;
     animation-delay: .2s;
 }
 .dot:first-child {
     animation-delay: 0s;
 }
 .dot:last-child {
     animation-delay: .4s;
 }

/* ========== MobileSMSDir styles ========== */
 .win-head .search {
     border-radius: 20px;
     background: #E0E0E0;
     margin-right: 3%;
     margin-left: 3%;
     width: 94%;
     font-size: 5vw;
     padding: 5px;
     padding-right: 20px;
 }
 .sms-dir .list-group-item {
     padding: 2vh;
     vertical-align: middle;
     font-size: 1.2em;
     background: white;
     border-right: none;
     border-left: none;
     border-width : 0vw;
     border-radius: 4vw;
     margin-bottom: 1vw;
 }
 .sms-dir .list-group {
     background: white;
 }
 .sms-dir .list-group-item.selected {
     background-color: #D0D0D0;
 }
 .sms-dir .contact_to_choose.clicked {
     background-color: #C0C0C0;
 }
 .sms-dir .win-content {
     color: #666;
     position: relative;
     z-index: 10;
     font-size: 0.9em;
     height: 80vh;
     overflow: auto;
 }

/* ========== MobileRepondeurList styles ========== */
 .bars {
     height: 25px;
     margin-left: 10px;
     margin-right: 10px;
     position: relative;
     width: 20px;
 }
 .bar {
     background: #666;
     bottom: 1px;
     height: 3px;
     position: absolute;
     width: 3px;
     animation: sound 0ms -800ms linear infinite alternate;
 }
 @keyframes sound {
     0% {
         opacity: .35;
         height: 3px;
     }
     100% {
         opacity: 1;
         height: 23px;
     }
 }
 .bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
 .bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
 .bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
 .bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
 .list-enter-active, .list-leave-active {
     transition: all 0.4s;
 }
 .list-enter, .list-leave-to {
     opacity: 0;
     transform: translateX(30px);
 }

/* ========== MobileFullPageImg styles ========== */
 .fpageimg {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: black;
 }

/* ========== MobileScrollImg styles ========== */
 .scrollimg-user-dir {
     background-color: white;
     height: 100%;
     overflow: auto;
     font-size: 5vw;
     display: flex;
     flex-direction: column;
 }
 .scrollimg-user-dir .win-headd {
     color: #F0F0F0;
     left: 0;
     width: 100%;
     z-index: 99;
 }
 .scrollimg-user-dir .win-headd div {
     margin: 3vw;
     padding: 2%;
 }
 .scrollimg-user-dir .win-headd .title {
     font-size: 1.3em;
 }
 .scrollimg-user-dir .win-content {
     color: #666;
     position: relative;
     height: 100%;
     padding-bottom: 2%;
     overflow: auto;
     z-index: 10;
 }
 #video {
     position: absolute;
     top: 0; left: 0;
     width: 100%;
     height: 80vh;
     background: black;
 }
 #startbutton {
     user-select: none;
     border-radius: 50%;
     background: white;
     border: #444 8px solid;
     display: inline-block;
     width: 50px;
     height: 50px;
     margin-left: 18%;
     margin-right: 18%;
     vertical-align: middle;
 }
 .scrollimg-icon {
     vertical-align: middle;
     display: inline-block;
 }
 .centerbot {
     vertical-align: middle;
     color: white;
     left: 0;
     position: absolute;
     bottom: 19vh;
     width: 100%;
     text-align: center;
 }
 @keyframes flash {
     50% {
         opacity: 1;
     }
 }
 #flash {
     opacity: 0;
     background: white;
     position: absolute;
     top: 0; left: 0;
     animation-name: flash;
     animation-duration: 0.3s;
     width: 100%; height: 100vh;
 }

/* ========== Config styles ========== */
 .config {
     background: white;
     height: 100vh;
     overflow:auto;
 }