*{margin:0;padding:0;font-family:'Lato','sans-serif';font-weight:400;color:#333;font-size:14px;}
img{border:0}
a{text-decoration:none;}


body{background:#f2fafd;}
body.of{background:#00a1d5;}
.total{}
.clear{clear:both;}

.switch{display:inline-block;width:50px;height:24px;border-radius:12px;background:#f16d7c;transition:all ease 0.2s;cursor:pointer;}
.switch:active{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
.switch:before{content:"";width:20px;height:20px;position:absolute;background:#fff;border-radius:10px;margin:2px 0 0 2px;transition:all ease 0.2s;}
.switch.s1{background:#8bc349;}
.switch.s1:before{margin-left:28px;}

.button{display:inline-block;line-height:40px;padding:0 20px 0 20px;background:#8bc349;color:#fff;border-radius:20px;cursor:pointer;}
.button.red{background:#f16d7c;}
.button.small{line-height:24px;padding:0 10px 0 10px;}

#message{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10;color:#fff;background-position:center center;background-repeat:no-repeat;font-size:20px;font-weight:700;text-align:center;padding:100% 20px 0 20px;text-shadow:0 0 5px rgba(0,0,0,0.2);opacity:0;pointer-events:none;transition:all ease 0.2s;}
#message.ok{background-image:url(/img/check1.png);background-color:rgba(139,195,73,0.8);background-size:60px 60px;}
#message.ko{background-image:url(/img/check0.png);background-color:rgba(241,109,124,0.8);background-size:60px 60px;}
#message.on{opacity:1;pointer-events:auto;}

#wait{position:absolute;top:70px;bottom:10px;left:10px;right:10px;z-index:5;background:url(/img/wait3.gif) no-repeat center center;background-size:32px 32px;display:none;}
#wait.on{display:block;}

/* HEADER */
#header{position:fixed;width:100%;height:60px;background:#fff;z-index:9;box-shadow:0 0 2px rgba(0,0,0,0.2);transition:all ease 0.5s;}
#header #logo{position:absolute;left:50%;margin-left:-90px;width:180px;height:60px;background:url(/img/logoblue.png) no-repeat 0 0;background-size:180px 60px;}
#header #btn_menu{position:absolute;width:60px;height:60px;right:0;cursor:pointer;transition:all ease 0.5s;}
#header #btn_menu:active{background:transparent;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
#header #btn_menu span{position:absolute;width:20px;height:2px;background:#00a1d5;left:20px;transition:all ease 0.25s;}
#header #btn_menu span:nth-child(1){top:23px;}
#header #btn_menu span:nth-child(2){top:29px;}
#header #btn_menu span:nth-child(3){top:35px;}
#header #btn_menu.open{transform:rotate(90deg);}
#header #btn_menu.open span:nth-child(1){transform:rotate(45deg);top:29px;}
#header #btn_menu.open span:nth-child(2){transform:rotate(135deg);top:29px;}
#header #btn_menu.open span:nth-child(3){transform:rotate(225deg);top:29px;}
#header.blue{background:#00a1d5;transition:all ease 0.25s;}
#header.blue #logo{background-image:url(/img/logowhite.png);}
#header.blue #btn_menu span{background:#fff;}
body.of #header #btn_menu{display:none;}

#header #btn_back{position:absolute;width:60px;height:60px;left:0;cursor:pointer;}
#header #btn_back span{position:absolute;width:20px;height:2px;background:#fff;left:20px;transition:all ease 0.15s;top:29px;}
#header #btn_back span:nth-child(1){}
#header #btn_back span:nth-child(2){transform-origin:0% 0%;transform:rotate(45deg);width:10px;}
#header #btn_back span:nth-child(3){transform-origin:0% 100%;transform:rotate(-45deg);width:10px;}

#menu{position:absolute;top:60px;background:#00a1d5;width:100%;overflow:auto;bottom:100%;transition:all ease 0.25s;z-index:9;}
#menu.open{bottom:0;}
#menu span#numstdf{display:block;background:url(/img/angular.png) repeat top left rgba(0,0,0,0.2);background-size:500px 100px;color:#fff;font-weight:700;font-size:18px;padding:0 20px;line-height:100px;margin-bottom:20px;padding-left:20px;box-shadow:inset 0 0px 2px rgba(0,0,0,0.4);}
#menu span#numstdf strong{color:#fff;font-weight:700;font-size:18px;}
#menu span#signout{display:none;float:right;height:30px;width:30px;background:url(/img/power.svg) no-repeat center center #f04e4e;background-size:20px;border-radius:5px;margin-top:35px;}
#menu span.statusstdf{display:none;float:right;height:40px;line-height:40px;padding:0 10px;text-transform:uppercase;font-weight:700;color:#fff;background:#8bc349;border-radius:5px;margin-top:30px;font-size:12px;}
#menu span.statusstdf.pause{background:#e9ad54;}
#menu span.statusstdf.close{background:#d12e2c;}
#menu span#numstdf.open span.statusstdf.open{display:block;cursor:pointer;}
#menu span#numstdf.pause span.statusstdf.pause{display:block;cursor:pointer;}
#menu span#numstdf.close span.statusstdf.close{display:block;}
#menu span#numstdf.wait span.statusstdf.wait{display:block;width:32px;background:url(/img/wait3.gif) no-repeat center center;background-size:32px;}

#menu p.t{padding:10px 0 10px 20px;line-height:40px;font-weight:700;color:#fff;text-transform:uppercase;margin-top:10px;}
#menu p.t:first-child{border-top:0;margin-top:0;}
#menu p.t:before{content:"";display:block;float:left;height:40px;width:40px;background:url(/img/menu_settings.svg) no-repeat center center #fff;background-size:25px;border-radius:5px;margin-right:10px;}
#menu p.t.compte:before{background-image:url(/img/menu_account.svg);}
#menu ul{list-style-type:none;padding-left:20px;}
#menu ul li.menulink{cursor:pointer;width:calc(50% - 60px);text-align:center;line-height:35px;height:35px;padding:0 20px 0 20px;border:0px solid #fff;border-radius:20px;float:left;margin:0 10px 10px 0;background:rgba(255,255,255,0.3);color:#fff;}
#menu ul li.menulink.big{width:calc(50% - 90px);border-radius:5px;line-height:44px;height:44px;background:url(/img/menu_call.svg) no-repeat 15px center #fff;background-size:25px;color:#00a1d5;padding-left:50px;font-weight:700;}
#menu ul li.menulink.big[data-page="fax"]{background-image:url(/img/menu_fax.svg);}
#menu ul li.menulink.big[data-page="conference"]{background-image:url(/img/menu_conference.svg);}
#menu ul li.menulink.big[data-page="sms"]{background-image:url(/img/menu_sms.svg);}
#menu ul li.menulink.signout{background:url(/img/power.svg) no-repeat 10px center #f04e4e;background-size:20px;width:auto;text-align:left;padding-left:40px;margin:50px 0;}

.template{display:none;}

#page{position:absolute;top:60px;bottom:0;left:0;right:0;overflow:auto;z-index:1;}
h1{text-align:left;font-size:20px;background:url(/img/angular.png) repeat top left #00a1d5;background-size:500px 100px;color:#fff;line-height:100px;height:100px;padding-left:20px;box-shadow:inset 0 0px 2px rgba(0,0,0,0.2);}
h1.p1{background-color:#00a1d5;}
h1.p2{background-color:#4cb5ab;}
h1.p3{background-color:#f69679;}
h1.p4{background-color:#605ca8;}
#h1{display:none;}
#h1.display{display:block;}
h1 span.profil{display:block;float:right;height:30px;line-height:30px;background:rgba(255,255,255,0.4);border-radius:5px;padding:0 15px;color:#rgba(0,0,0,0.5);margin:35px 20px 0 0;box-shadow:0 0 2px rgba(0,0,0,0.2);cursor:pointer;}
h2{text-transform:uppercase;margin:10px;}
h2 span.switch{display:block;float:left;margin:13px 10px 0 0;}


/* DIALER */
#opendialer{position:fixed;display:none;width:60px;height:60px;cursor:pointer;background:url(/img/dialer.svg) no-repeat center center #00a1d5;background-size:25px;border-radius:50%;right:20px;bottom:20px;z-index:4;box-shadow:3px 3px 2px rgba(0,0,0,0.3);cursor:pointer;}
#opendialer.on{display:block;}
#opendialer.back{background-image:url(/img/dialerback.svg);}
#opendialer.smallscreen{z-index:10;}
#dialer{position:fixed;z-index:3;top:100%;bottom:0;left:0;right:0;background:#00a1d500;transition:all cubic-bezier(0.66, 0, 0, 1) 0.5s;}
#dialer.open{top:60px;background:#00a1d5;}
#dialer.smallscreen{top:0;z-index:9;}
#dialerback{position:absolute;width:60px;height:60px;background:url(/img/back.svg) no-repeat center center;background-size:20px;position:absolute;top:20px;right:10%;opacity:0.5;cursor:pointer;}
#dialer input{width:60%;background:#ffffff66;border-radius:2px;margin:20px 10% 0 10%;border:0;outline:0;font-size:24px;height:60px;line-height:60px;padding:0 10%;}
#dialer ul{list-style-type:none;margin:20px 10% 20px 10%;position:relative;}
#dialer li{float:left;width:33%;font-size:30px;color:#fff;border:1px solid #ffffff66;text-align:center;border-bottom:0;border-right:0;padding:10px 0;height:45px;cursor:pointer;}
#dialer li.active{background:rgba(0,0,0,0.1);}
#dialer li:nth-child(3n-2){border-left:0;}
#dialer li:nth-child(-n+3){border-top:0;}
#dialer li span.letter{display:block;font-size:10px;opacity:0.5;text-align:center;}
#dialercall{display:block;bottom:10px;width:50%;margin:20px 25%;background:url(/img/call.svg) no-repeat center center #8bc349;background-size:30px;height:60px;border-radius:2px;line-height:60px;font-size:20px;color:#fff;text-align:center;}
#dialercall.wait{background-image:url(/img/wait3.gif)}


.content{background:#f2fafd;padding:20px 0 20px 0;}
.content[data-indexprofil="1"]{background:#f6fbfb;}
.content[data-indexprofil="2"]{background:#fffaf8;}
.content[data-indexprofil="3"]{background:#f7f7fb;}

p.text{padding:10px 30px;}
p.text strong.warning{display:block;color:#f04e4e;height:24px;line-height:24px;background:url(/img/warning.svg) no-repeat left center;background-size:24px;padding-left:30px;}

#editprofilname{position:fixed;z-index:9;background:#fff;top:-50px;left:20px;right:20px;bottom:150%;border:1px solid #00a1d5;border-radius:5px;box-shadow:0 0 20px #00a1d599;overflow:hidden;opacity:0;transition:all ease 0.25s;}
#editprofilname.on{top:20px;bottom:20px;opacity:1;}
#editprofilname h2{height:80px;position:relative;line-height:60px;padding-left:20px;color:#fff;}
#editprofilname h2:before{position:absolute;content:"";background:#00a1d5;width:150%;height:100px;top:-32px;left:-50px;transform:rotate(-5deg);z-index:-1;}
#editprofilname input{border:1px solid #ccc;border-radius:21px;font-size:16px;padding:0 15px;height:40px;line-height:40px;width:calc(100% - 72px);outline:none;margin:0 20px 10px 20px;}
#editprofilname .button{margin:0 20px;}
#editprofilname .closeprofilname{position:absolute;z-index:2;width:20px;height:20px;border-radius:50%;border:1px solid #fff;color:#fff;line-height:20px;text-align:center;cursor:pointer;top:20px;right:20px;}
#editprofilname[data-indexprofil="1"]{border-color:#4cb5ab;box-shadow:0 0 20px #4cb5ab99;}
#editprofilname[data-indexprofil="1"] h2:before{background:#4cb5ab;}
#editprofilname[data-indexprofil="2"]{border-color:#f69679;box-shadow:0 0 20px #f6967999;}
#editprofilname[data-indexprofil="2"] h2:before{background:#f69679;}
#editprofilname[data-indexprofil="3"]{border-color:#605ca8;box-shadow:0 0 20px #605ca899;}
#editprofilname[data-indexprofil="3"] h2:before{background:#605ca8;}


.clip_soon{font-size:30px;text-align:center;padding-top:100px;color:#00a1d5;}

/* AUTHENTICATION */
.clip_authentication{background:#fff;border-radius:3px;box-shadow:0 0 2px rgba(0,0,0,0.5);margin:30px 30px 0 30px;padding:30px;}
.clip_authentication input{width:calc(100% - 20px);padding:10px;border:0;line-height:30px;margin-bottom:20px;outline:0;background:#f2fafd;box-shadow:3px 3px 0 #00a1d544;color:#00a1d5;transition:all ease 0.5s;}
.clip_authentication input::placeholder{color:#00a1d5;}
.clip_authentication input.error{background:#f04e4e;color:#fff;transform:scale(1.1);transition:all ease 0.2s;}
.clip_authentication input.error::placeholder{color:#fff;}


/* CALLS */
.clip_call{height:50px;border:1px solid #d9f1f9;border-radius:5px;overflow:hidden;transition:all linear 0.1s;position:relative;margin:10px 10px 0 10px;background:#fff;box-shadow:2px 2px 5px #00a1d511;}
.clip_call span{display:block;float:left;}
.clip_call span.status{width:50px;height:50px;background:url(/img/callINKO.svg) no-repeat center center;box-shadow:inset -5px 0 0 rgba(0,0,0,0.1)}
.clip_call span.number{position:absolute;left:65px;top:22px;font-weight:700;font-size:16px;color:#f04e4e;}
.clip_call span.number img{height:12px;width:16px;border-radius:3px;}
.clip_call span.date{position:absolute;left:65px;top:9px;font-size:10px;color:#999;}
.clip_call span.date em{font-style:normal;margin-left:7px;padding-left:7px;font-size:10px;color:#999;border-left:1px solid #d9f1f9;}
.clip_call span.expandcall{position:absolute;right:0px;top:0px;width:40px;height:50px;cursor:pointer;border-left:1px solid #d9f1f9;transition:all ease 0.1s;}
.clip_call span.expandcall:active{background:transparent;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
.clip_call span.expandcall:before{content:"";position:absolute;width:10px;height:2px;background:#ccc;transform:rotate(45deg);top:24px;left:13px;transition:all ease 0.2s;}
.clip_call span.expandcall:after{content:"";position:absolute;width:10px;height:2px;background:#ccc;transform:rotate(-45deg);top:24px;left:19px;transition:all ease 0.2s;}
.clip_call span.star{position:absolute;right:50px;top:15px;width:20px;height:20px;background-repeat:no-repeat;background-size:20px;}
.clip_call span.star.s1{background-image:url(/img/star1.png);}
.clip_call span.star.s2{background-image:url(/img/star2.png);}
.clip_call span.star.s3{background-image:url(/img/star3.png);}
.clip_call span.iscomment{position:absolute;right:80px;top:15px;width:20px;height:20px;background:url(/img/comment.png) no-repeat;background-size:20px;}
.clip_call span.iscomment.is0{display:none;}
.clip_call span.voicemail_listen{display:none;position:absolute;right:100px;top:5px;width:40px;height:40px;background:url(/img/voicemail_play.png) no-repeat center center;background-size:20px;cursor:pointer;}
.clip_call span.voicemail_listen.stop{background-image:url(/img/voicemail_stop.png);}
.clip_call div.detail{position:absolute;top:50px;left:0;bottom:0;right:0;padding:10px 20px;}
.clip_call.INOK span.status{background-color:#8bc349;background-image:url(/img/callINOK.svg);}
.clip_call.INOK span.number{color:#8bc349;}
.clip_call.INKO span.status{background-color:#f04e4e;background-image:url(/img/callINKO.svg);}
.clip_call.INKO span.number{color:#f04e4e;}
.clip_call.OUT span.status{background-color:#00a1d5;background-image:url(/img/callOUT.svg);}
.clip_call.OUT span.number{color:#00a1d5;}
.clip_call.VOICEMAIL span.status{background-color:#F5A623;background-image:url(/img/callVOICEMAIL.svg);}
.clip_call.VOICEMAIL span.number{color:#F5A623;}
.clip_call.VOICEMAIL span.voicemail_listen{display:block;}

.clip_call.expand{height:250px;border-color:#00a1d5;}
.clip_call.INKO.expand{border-color:#f04e4e;}
.clip_call.OUT.expand{border-color:#00a1d5;}
.clip_call.VOICEMAIL.expand{border-color:#F5A623;}
.clip_call.expand span.expandcall{border-color:#fff;}
.clip_call.expand span.expandcall:before{left:16px;transform:rotate(-45deg);}
.clip_call.expand span.expandcall:after{left:16px;transform:rotate(45deg);}
.clip_call.expand span.status{border-bottom-right-radius:5px;}
.clip_call.expand span.star{display:none;}
.clip_call.expand span.iscomment{display:none;}

.clip_call span.owner{font-size:10px;color:#999;}
.clip_call span.owner strong{color:#333;font-size:12px;padding-left:22px;}
.clip_call span.owner em{color:#333;font-size:12px;font-style:normal;}
.clip_call span.owner img{height:12px;border-radius:3px;position:absolute;margin:1px 0 0 -20px;}
.clip_call.INKO span.owner,.clip_call.VOICEMAIL span.owner{display:none;}
.clip_call textarea{position:absolute;top:40px;left:20px;border:1px solid #00a1d5;background:#fff;border-radius:5px;width:calc(100% - 162px);padding:10px;height:58px;outline:none;resize:none;font-size:12px;}
.clip_call ul.starlist{position:absolute;list-style-type:none;top:40px;width:80px;right:20px;}
.clip_call ul.starlist li{width:38px;height:38px;float:left;border:1px solid transparent;border-radius:5px;background-position:center;background-size:20px;background-repeat:no-repeat;}
.clip_call ul.starlist li[data-star='0']{background-image:url(/img/star0.png);}
.clip_call ul.starlist li[data-star='1']{background-image:url(/img/star1.png);}
.clip_call ul.starlist li[data-star='2']{background-image:url(/img/star2.png);}
.clip_call ul.starlist li[data-star='3']{background-image:url(/img/star3.png);}
.clip_call ul.starlist.s0 li[data-star='0']{border-color:#00a1d5;background-color:#f2fafd;}
.clip_call ul.starlist.s1 li[data-star='1']{border-color:#00a1d5;background-color:#f2fafd;}
.clip_call ul.starlist.s2 li[data-star='2']{border-color:#00a1d5;background-color:#f2fafd;}
.clip_call ul.starlist.s3 li[data-star='3']{border-color:#00a1d5;background-color:#f2fafd;}
.clip_call .btncall{display:block;position:absolute;width:calc(50% - 32px);height:39px;padding-top:5px;background:#00a1d5;left:20px;top:140px;text-align:center;font-size:10px;color:rgba(0,0,0,0.7);border-radius:5px;text-shadow:0 1px 0 rgba(255,255,255,0.1);border:1px solid transparent;cursor:pointer;}
.clip_call .btncall strong{display:block;font-weight:700;font-size:14px;color:#fff;}
.clip_call .btncall:last-child{left:calc(50% + 10px);}
.clip_call .btncall.wait{background:url(/img/wait3.gif) no-repeat center center #fff;border-color:#00a1d5;background-size:32px;padding-top:44px;height:0;overflow:hidden;}



/* FAX */
.clip_fax{height:50px;border:1px solid #d9f1f9;border-radius:5px;overflow:hidden;transition:all linear 0.1s;position:relative;margin:10px 10px 0 10px;background:#fff;box-shadow:2px 2px 5px #00a1d511;}
.clip_fax span{display:block;float:left;}
.clip_fax span.status{width:50px;height:50px;background-repeat:no-repeat;background-position:center center;background-size:20px;box-shadow:inset -5px 0 0 rgba(0,0,0,0.1)}
.clip_fax span.number{position:absolute;left:65px;top:22px;font-weight:700;font-size:16px;color:#f04e4e;}
.clip_fax span.number img{height:12px;width:16px;border-radius:3px;}
.clip_fax span.date{position:absolute;left:65px;top:9px;font-size:10px;color:#999;}
.clip_fax span.date em{font-style:normal;margin-left:7px;padding-left:7px;font-size:10px;color:#999;border-left:1px solid #d9f1f9;}
.clip_fax.IN span.status{background-color:#8bc349;background-image:url(/img/faxIN.svg);}
.clip_fax.IN span.number{color:#8bc349;}
.clip_fax.OUT span.status{background-color:#00a1d5;background-image:url(/img/faxOUT.svg);}
.clip_fax.OUT span.number{color:#00a1d5;}
.clip_fax a.file{display:block;width:50px;height:50px;position:absolute;top:0;right:0;background:url(/img/eyes.svg) no-repeat center center #fff;background-size:20px;border-left: 1px solid #d9f1f9;}
.clip_fax.IN em.fax_price{display:none;}
.clip_fax.iswarning1 em.fax_price{display:none;}
.clip_fax.iswarning1 em.fax_pages{display:none;}
.clip_fax em.fax_warning{display:none;}
.clip_fax.iswarning1 em.fax_warning{display:inline-block;background:url(/img/warning.svg) no-repeat 5px center;padding-left:22px;background-size:12px;color:#f00}




/* ANNOUNCE */
.clip_announce{height:50px;border:1px solid #d9f1f9;border-radius:5px;line-height:50px;overflow:hidden;transition:all ease 0.4s;position:relative;margin:10px 10px 0 10px;background:#fff;box-shadow:2px 2px 5px #00a1d511;}
.clip_announce span.name{font-weight:700;color:#00a1d5;margin-left:10px;}
.clip_announce[data-indexprofil="1"] span.name{color:#4cb5ab;}
.clip_announce[data-indexprofil="2"] span.name{color:#f69679;}
.clip_announce[data-indexprofil="3"] span.name{color:#605ca8;}
.clip_announce span.name em{font-weight:400;color:#999;font-size:12px;font-style:normal;}
.clip_announce span.edit{position:absolute;width:50px;height:50px;right:0;background:url(/img/wheel.svg) no-repeat center center;background-size:20px 20px;cursor:pointer;transition:all ease 0.5s;}
.clip_announce span.announce_listen{position:absolute;width:50px;height:50px;right:50px;background:url(/img/announce_play.svg) no-repeat center center;background-size:20px 20px;cursor:pointer;}
.clip_announce span.announce_listen.stop{background-image:url(/img/announce_stop.svg);}
.clip_announce.expandACCUEIL{height:1630px;border-color:#00a1d5;transition:all ease 1s;}
.clip_announce.expandATTENTE{height:1050px;border-color:#00a1d5;transition:all ease 0.6s;}
.clip_announce.expandREPONDEUR{height:420px;border-color:#00a1d5;}
.clip_announce.expandTEMPORAIRE{height:420px;border-color:#00a1d5;}
.clip_announce[data-indexprofil="1"].expandACCUEIL,.clip_announce[data-indexprofil="1"].expandATTENTE,.clip_announce[data-indexprofil="1"].expandREPONDEUR,.clip_announce[data-indexprofil="1"].expandTEMPORAIRE{border-color:#4cb5ab;}
.clip_announce[data-indexprofil="2"].expandACCUEIL,.clip_announce[data-indexprofil="2"].expandATTENTE,.clip_announce[data-indexprofil="2"].expandREPONDEUR,.clip_announce[data-indexprofil="2"].expandTEMPORAIRE{border-color:#f69679;}
.clip_announce[data-indexprofil="3"].expandACCUEIL,.clip_announce[data-indexprofil="3"].expandATTENTE,.clip_announce[data-indexprofil="3"].expandREPONDEUR,.clip_announce[data-indexprofil="3"].expandTEMPORAIRE{border-color:#605ca8;}


.content_synthese h2{line-height:20px;padding-left:10px;font-weight:700;font-size:12px;margin-top:15px;}
.content_synthese textarea{width:calc(100% - 42px);margin-left:10px;padding:10px;border-radius:5px;height:70px;outline:0;resize:none;border:1px solid #00a1d5;font-size:12px;} 
.content_synthese.of{filter:blur(5px) grayscale(100%);pointer-events:none;opacity:0.7;}
.announce_voice{list-style-type:none;height:50px;display:flex;margin:-10px 10px 15px 10px;}
.announce_voice li{flex-grow:1;line-height:25px;height:25px;padding-top:25px;border-radius:5px;border:1px solid transparent;cursor:pointer;background:url(/img/speakrine_agnes.png) no-repeat center 5px;background-size:25px 25px;margin-left:10px;text-align:center;font-size:12px;}
.announce_voice li.on{border-color:#00a1d5;color:#00a1d5;background-color:#fff;}
.announce_voice li:first-child{margin-left:0;}
.announce_voice li[data-voice='agnes']{background-image:url(/img/speakrine_agnes.png);}
.announce_voice li[data-voice='loic']{background-image:url(/img/speakrine_loic.png);}
.announce_voice li[data-voice='bibi']{background-image:url(/img/speakrine_bibi.png);}
.announce_voice li[data-voice='freddy']{background-image:url(/img/speakrine_freddy.png);}

p.range{height:44px;line-height:44px;position:relative;transition:all ease 0.2s;margin:0 10px;}
p.range.of{filter:blur(5px) grayscale(100%);pointer-events:none;opacity:0.7;}
p.range label{display:inline-block;width:80px;}
p.range.biglabel label{width:120px;}
p.range span.valuerange{position:absolute;height:34px;line-height:34px;right:0;width:40px;top:5px;text-align:center;background:rgba(255,255,255,1);border-radius:5px;border:1px solid #00a1d5;}
p.range span.inputrange{display:block;position:absolute;right:50px;width:calc(100% - 140px);top:-2px;}
p.range.biglabel span.inputrange{width:calc(100% - 180px);}
p.range input[type=range]{width:100%;-webkit-appearance: none;background:transparent;}
p.range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:10px;background:#00a1d5;cursor:pointer;margin-top:-8px;}
p.range input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:#ccc;border-radius:2px;}
p.range input[type=range]:focus {outline:none;}
p.range input[type=range]::-ms-track {width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent;}

.announce_music{list-style-type:none;transition:all ease 0.2s;}
.announce_music.of{filter:blur(5px) grayscale(100%);pointer-events:none;opacity:0.7;}
.announce_music li{height:44px;line-height:44px;padding-left:60px;margin:0 10px 3px 10px;background:#fff;font-size:12px;position:relative;border-radius:5px;overflow:hidden;border:1px solid #d9f1f9;box-shadow:2px 2px 5px #00a1d511;}
.announce_music li span.selectMusic{height:44px;width:44px;position:absolute;left:0;top:0;border-right:1px solid #d9f1f9;cursor:pointer;}
.announce_music li span.selectMusic:before{content:"";position:absolute;width:20px;height:20px;border:1px solid #00a1d5;border-radius:5px;top:12px;left:12px;}
.announce_music li.on{color:#00a1d5;border-color:#00a1d5;}
.announce_music li.on span.selectMusic:after{content:"\2713";position:absolute;width:44px;line-height:44px;color:#00a1d5;text-align:center;font-size:20px;}
.announce_music li span.playMusic{height:44px;width:44px;position:absolute;right:0;top:0;cursor:pointer;background:url(/img/play.svg) no-repeat center center #fff;background-size:20px auto;border-left:1px solid #d9f1f9;}
.announce_music li span.playMusic.pause{background-image:url(/img/pause.svg);}

.annonce_validation{text-align:center;height:40px;padding-top:30px;}
.annonce_validation.of{filter:blur(5px) grayscale(100%);pointer-events:none;opacity:0.7;}
.annonce_validation span.button{display:none;}
.annonce_validation.listen span.button.listenNewAnnounce{display:inline-block;}
.annonce_validation.save span.button.saveNewAnnounce{display:inline-block;}
.annonce_validation.save span.button.stopNewAnnounce{display:inline-block;}
.annonce_validation.wait{background:url(/img/wait3.gif) no-repeat center 30px;background-size:32px 32px;}



/* PHONES & EMAILS & VOICE MENU */
.clip_phone{height:50px;border:1px solid #d9f1f9;border-radius:5px;line-height:50px;padding:0 20px 0 20px;overflow:hidden;transition:all ease 0.2s;position:relative;margin:10px 10px 0 10px;background:#fff;box-shadow:2px 2px 5px #00a1d511;}
.clip_phone .edit{position:absolute;width:50px;height:50px;right:0;background:url(/img/wheel.svg) no-repeat center center;background-size:20px 20px;cursor:pointer;transition:all ease 0.5s;}
.clip_phone .edit:active{background-color:transparent;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
.clip_phone.delete{height:0;}
.clip_phone span{display:block;float:left;height:50px;}


.clip_phone .index{width:20px;line-height:20px;text-align:center;height:20px;border-radius:50%;border:1px solid #ccc;margin:13px 0 0 0;background:#fff;}
.clip_phone.active0 .index{background:#fdebe8;border-color:#f17058;color:#f17058;}
.clip_phone .num{margin-left:10px;color:#00a1d5;font-weight:700;width:120px;}
.clip_phone .email{margin-left:10px;color:#00a1d5;font-weight:700;width:calc(100% - 77px);}
.clip_phone .name{float:left;width:calc(100% - 197px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clip_phone .digit{width:20px;line-height:20px;text-align:center;height:20px;border-radius:50%;border:1px solid #ccc;margin:13px 0 0 0;background:#fff;}
.clip_phone .namedigit{margin-left:10px;color:#00a1d5;font-weight:700;width:120px;}
.clip_phone .typevoicemenu{margin:13px 0 0 20px;display:none;padding:0 5px 0 25px;background:url(/img/voicemenu_phone.svg) no-repeat 5px center;background-size:16px;background-color:#00a1d5;height:24px;line-height:24px;color:#fff;font-size:11px;border-radius:5px;}
.clip_phone[data-type="phone"] .typevoicemenu.phone{display:block;background-image:url(/img/voicemenu_phone.svg);}
.clip_phone[data-type="announce"] .typevoicemenu.announce{display:block;background-image:url(/img/voicemenu_announce.svg);}
.clip_phone[data-type="voicemail"] .typevoicemenu.voicemail{display:block;background-image:url(/img/voicemenu_voicemail.svg);}

.clip_phone.edit{height:380px;border-color:#00a1d5;}
.clip_phone.edit .edit{transform:rotate(180deg);}
.clip_phone.editmail{height:280px;border-color:#00a1d5;}
.clip_phone.editmail .edit{transform:rotate(180deg);}
.clip_phone.editmenu{height:610px;border-color:#00a1d5;transition:all ease 0.8s;}
.clip_phone.editmenu .edit{transform:rotate(180deg);}
.clip_phone.editmenu.redirect5{height:540px;}

.clip_phone .index.add{border:1px solid #00a1d5;background:#00a1d5;color:#fff;}
.clip_phone .addtext{margin-left:10px;}
.clip_phone.add{margin-bottom:40px;border-bottom:0;}
.clip_phone.add span.editphone{width:100%;cursor:pointer;}
.clip_phone.add span.editemail{width:100%;cursor:pointer;}
.clip_phone.add.edit,.clip_phone.add.editmail{border-bottom:1px solid #a1dcf0;}
.clip_phone.adddigit{margin-bottom:40px;cursor:pointer;}

.clip_phone span.label{opacity:0.5;}
.clip_phone span.label.short{position:relative;width:calc(60% - 10px);white-space:nowrap;overflow:hidden;}
.clip_phone span.label.short:before{content:"";display:block;position:absolute;width:50px;height:50px;right:0;background-image:linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));}
.clip_phone input[type="text"],.clip_phone input[type="email"],.clip_phone input[type="tel"],.clip_phone input[type="password"]{width:40%;float:right;border:0;border-bottom:1px solid #ccc;text-align:right;line-height:30px;background:transparent;margin:10px 10px 0 0;outline:none;}
.clip_phone span.select{width:40%;float:right;margin:0;position:relative;}
.clip_phone span.select:before{position:absolute;content:"\25BE";right:5px;pointer-events:none;}
.clip_phone select{width:100%;padding-right:25px;border:0;height:50px;line-height:50px;background:transparent;margin:0;appearance:none;-webkit-appearance:none;float:right;outline:none;}
.clip_phone input.big{width:65%;}
.clip_phone span.rate{width:70px;border:1px solid #f16d7c;background:#fff;float:right;height:24px;text-align:center;font-size:10px;line-height:24px;margin:12px 10px 0 0;border-radius:3px;color:#f16d7c;}
.clip_phone span.rate.rFORFAIT{border-color:#8bc349;color:#8bc349;}
.clip_phone p{height:50px;}
.clip_phone span.switch{height:24px;float:right;margin:15px 10px 0 0;}
.clip_phone div.cont_button{margin-top:15px;}
.clip_phone span.button{height:40px;float:none;display:inline-block;margin-left:10px;}

.clip_phone span.button.upPhone,.clip_phone  span.button.downPhone,.clip_phone  span.button.deletePhone,.clip_phone  span.button.deleteEmail{padding:0;width:40px;text-align:center;margin-left:0;}
.clip_phone span.button.deletePhone,.clip_phone  span.button.deleteEmail{float:right;margin:5px 10px 0 0;}
.clip_phone span.button.upPhone:before{content:"\25B2";}
.clip_phone span.button.downPhone:before{content:"\25BC";}
.clip_phone span.button.deletePhone:before,.clip_phone  span.button.deleteEmail:before{content:"X";}
.clip_phone span.button.disabled{background:rgba(0,0,0,0.2);}

.clip_phone .detail{border-top:1px solid #00a1d5;padding:20px 0 50px 0;margin:20px -20px 0 -20px;background:#f2fafd;}
.clip_phone .detail:before{content:attr(data-textannounce);position:absolute;background:#00a1d5;line-height:20px;width:140px;text-align:center;margin-top:-31px;margin-left:calc(50% - 70px);color:#fff;font-size:12px;font-weight:700;border-radius:5px;}
.clip_phone[data-type="phone"] .detail:before{content:attr(data-textphone);}
.clip_phone .annonce_validation span.button{display:none;}

.clip_phone[data-indexprofil="1"]{border-color:#e4f4f2;box-shadow:2px 2px 5px #4cb5ab11;}
.clip_phone.edit[data-indexprofil="1"],.clip_phone.editmail[data-indexprofil="1"],.clip_phone.editvoicemail[data-indexprofil="1"]{border-color:#4cb5ab}
.clip_phone[data-indexprofil="1"] .num,.clip_phone[data-indexprofil="1"] .email,.clip_phone[data-indexprofil="1"] .namedigit{color:#4cb5ab;}
.clip_phone[data-indexprofil="1"] .index.add{border-color:#4cb5ab;background:#4cb5ab;}
.clip_phone[data-indexprofil="1"] .typevoicemenu{background-color:#4cb5ab;}
.clip_phone[data-indexprofil="1"].editmenu{border-color:#4cb5ab;}
.clip_phone[data-indexprofil="1"] .detail{border-color:#4cb5ab;}
.clip_phone[data-indexprofil="1"] .detail:before{background-color:#4cb5ab;}

.clip_phone[data-indexprofil="2"]{border-color:#feefeb;box-shadow:2px 2px 5px #f6967911;}
.clip_phone.edit[data-indexprofil="2"],.clip_phone.editmail[data-indexprofil="2"],.clip_phone.editvoicemail[data-indexprofil="2"]{border-color:#f69679;}
.clip_phone[data-indexprofil="2"] .num,.clip_phone[data-indexprofil="2"] .email,.clip_phone[data-indexprofil="2"] .namedigit{color:#f69679;}
.clip_phone[data-indexprofil="2"] .index.add{border-color:#f69679;background:#f69679;}
.clip_phone[data-indexprofil="2"] .typevoicemenu{background-color:#f69679;}
.clip_phone[data-indexprofil="2"].editmenu{border-color:#f69679;}
.clip_phone[data-indexprofil="2"] .detail{border-color:#f69679;}
.clip_phone[data-indexprofil="2"] .detail:before{background-color:#f69679;}

.clip_phone[data-indexprofil="3"]{border-color:#e7e7f2;box-shadow:2px 2px 5px #605ca811;}
.clip_phone.edit[data-indexprofil="3"],.clip_phone.editmail[data-indexprofil="3"],.clip_phone.editvoicemail[data-indexprofil="3"]{border-color:#605ca8;}
.clip_phone[data-indexprofil="3"] .num,.clip_phone[data-indexprofil="3"] .email,.clip_phone[data-indexprofil="3"] .namedigit{color:#605ca8;}
.clip_phone[data-indexprofil="3"] .index.add{border-color:#605ca8;background:#605ca8;}
.clip_phone[data-indexprofil="3"] .typevoicemenu{background-color:#605ca8;}
.clip_phone[data-indexprofil="3"].editmenu{border-color:#605ca8;}
.clip_phone[data-indexprofil="3"] .detail{border-color:#605ca8;}
.clip_phone[data-indexprofil="3"] .detail:before{background-color:#605ca8;}


#phones4voicemenu{list-style-type:none;}
#phones4voicemenu li{height:44px;line-height:44px;padding-left:60px;margin:0 10px 3px 10px;background:#fff;font-size:12px;position:relative;border-radius:5px;overflow:hidden;border:1px solid #d9f1f9;box-shadow:2px 2px 5px #00a1d511;}
#phones4voicemenu li span.selectphone4voicemenu{height:44px;width:44px;position:absolute;left:0;top:0;border-right:1px solid #d9f1f9;cursor:pointer;}
#phones4voicemenu li span.selectphone4voicemenu:before{content:"";position:absolute;width:20px;height:20px;border:1px solid #00a1d5;border-radius:5px;top:12px;left:12px;}
#phones4voicemenu li span.phone{font-size:12px;padding-left:5px;}
#phones4voicemenu li span.upanddown{float:right;width:30px;height:44px;background:url(/img/arrow.svg) no-repeat center center;background-size:10px;border-left:1px solid #d9f1f9;position:relative;}
#phones4voicemenu li span.upanddown[data-order="down"]{transform:rotate(180deg);border-right:1px solid #d9f1f9;border-left:0;}
#phones4voicemenu li:first-child span.upanddown[data-order="up"]{pointer-events:none;}
#phones4voicemenu li:first-child span.upanddown[data-order="up"]:before{position:absolute;content:"";top:0;bottom:0;left:0;right:0;background:rgba(255,255,255,0.7);}
#phones4voicemenu li:last-child span.upanddown[data-order="down"]{pointer-events:none;}
#phones4voicemenu li:last-child span.upanddown[data-order="down"]:before{position:absolute;content:"";top:0;bottom:0;left:0;right:0;background:rgba(255,255,255,0.7);}
#phones4voicemenu li span.name[data-status="0"]{width:calc(100% - 207px);padding-left:10px;}
#phones4voicemenu li span.name[data-status="0"]:before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;border:2px solid #f16d7c;top:16px;left:52px;}
#phones4voicemenu li span.name[data-status="0"]:after{content:"";position:absolute;width:8px;height:2px;background:#f16d7c;top:21px;left:54px;transform:rotate(45deg);}
#phones4voicemenu li.on span.name{color:#00a1d5;font-weight:700;}
#phones4voicemenu li.on span.selectphone4voicemenu:after{content:"\2713";position:absolute;width:44px;line-height:44px;color:#00a1d5;text-align:center;font-size:20px;}


/* ACCOUNT */
.clip_phone.contact{position:relative;}
.clip_phone.contact:before{content:"";display:block;position:absolute;pointer-events:none;right:0;height:50px;width:50px;background:url(/img/write.svg) no-repeat center center;background-size:20px 20px;}
.clip_phone.contact input{border:0;line-height:50px;margin:0;padding-right:30px;}

.clip_phone span.date{font-size:10px;}

.setting_save{text-align:center;margin:20px 0 60px 0;}








/* PLANNING */
#planning{width:90%;margin:0 5%;}

.planning_day{border-bottom:1px solid #ccc;padding:30px 0 30px 0;}
.planning_day p.dayparams{height:24px;}
.planning_day p.dayparams span{display:block;line-height:24px;float:left;}
.planning_day p.dayparams span.dayname{text-transform:uppercase;padding-left:10px;}
.planning_day p.dayparams span.dayprofil{float:right;font-style:italic;color:#999;font-size:12px;cursor:pointer;text-decoration:underline;}
.planning_day p.dayparams span.editprofil{display:none;float:none;font-size:13px;text-align:center;}
.planning_day p.dayparams span.abortdayprofil{display:none;float:right;font-style:italic;color:#999;font-size:12px;cursor:pointer;text-decoration:underline;}

.planning_slots{position:relative;width:100%;height:24px;background:#e5e5e5;border-radius:12px;margin-top:15px;transition:all ease 0.2s;}
.planning_slots .planning_slot{position:absolute;background:#00a1d5;height:24px;top:0;left:150px;width:150px;border-radius:12px;transition:opacity ease 0.2s,transform ease 0.2s;}
.planning_slots .planning_slot.profil1{background:#00a1d5;}
.planning_slots .planning_slot.profil2{background:#4cb5ab;}
.planning_slots .planning_slot.profil3{background:#f69679;}
.planning_slots .planning_slot.profil4{background:#605ca8;}
 
.planning_slots .planning_slot span{display:block;position:absolute;top:0;height:24px;width:24px;border-radius:12px;cursor:w-resize;opacity:1;transition:all ease 0.2s;background:rgba(0,0,0,0.2);}
.planning_slots .planning_slot span.cursor_start{left:0px;}
.planning_slots .planning_slot span.cursor_end{right:0px;}
.planning_slots .planning_slot span strong{position:absolute;z-index:3;line-height:normal;color:#999;font-weight:400;font-size:9px;margin:-13px 0 0 -20px;width:40px;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.planning_slots .planning_slot span.cursor_end strong{margin-top:24px;}
.planning_slots:hover .planning_slot span,.planning_slots .planning_slot.active span{opacity:1;}

.planning_day.s0 .planning_slots{background:#fdebe8;}
.planning_day.s0 .planning_slots .planning_slot{opacity:0;pointer-events:none;transform:scale(0.8);}
.planning_day.s0 .dayprofil{display:none;}
.planning_day.s1 .switch{background:#8bc349;}
.planning_day.s1 .switch:before{margin-left:28px;}

.planning_day.editprofil .planning_slots{box-shadow:0 0 25px rgba(0,0,0,0.5);}
.planning_day.editprofil .planning_slots span strong{display:none;}
.planning_day.editprofil p.dayparams span{display:none;}
.planning_day.editprofil p.dayparams span.editprofil{display:block;}
.planning_day.editprofil p.dayparams span.abortdayprofil{display:block;}
.planning_day.nonedit{opacity:0.5;pointer-events:none;}

.legende{margin:20px 5%;font-style:italic;}
.legende p{color:#999;}
#profil_choice{position:fixed;right:10%;left:10%;z-index:4;background:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.5);padding:10px;text-align:center;display:none}
#profil_choice.on{display:block;}
#profil_choice p{padding:15px;}
#profil_choice_ul{list-style-type:none;;}
#profil_choice_ul li{line-height:50px;border-radius:3px;height:50px;margin-top:10px;overflow:hidden;background:#00a1d5;color:#fff;text-transform:uppercase;cursor:pointer;}
#profil_choice_ul li.p1{background:#00a1d5;}
#profil_choice_ul li.p2{background:#4cb5ab;}
#profil_choice_ul li.p3{background:#f69679;}
#profil_choice_ul li.p4{background:#605ca8;}



.blocpayment{background:#fff;border:1px solid #d9f1f9;box-shadow:2px 2px 5px #00a1d511;margin:0 30px 100px 30px;padding:30px;border-radius:5px;}
.blocpayment p{border-bottom:1px dashed #ccc;margin-bottom:22px;font-size:14px;line-height:20px;height:14px;}
.blocpayment p.titre{border-bottom:0;font-size:18px;color:#00a1d5;margin-bottom:30px;height:auto;}
.blocpayment p label{display:block;float:left;background:#fff;height:21px;padding-right:10px;}
.blocpayment p label.strong{font-weight:700;font-size:16px;}
.blocpayment p label.strong.blue{color:#00a1d5;}
.blocpayment p span{display:block;float:right;background:#fff;height:21px;padding-left:10px;}
.blocpayment p span.strong{font-weight:700;font-size:16px;}
.blocpayment p span.strong.blue{color:#00a1d5;}



@media screen and (max-width:350px) {
	
	#menu ul li.menulink{padding:0 15px 0 15px;}
	
	.clip_call span.status{width:40px;}
	.clip_call span.number{left:50px;}
	.clip_call span.date{left:50px;}
	.clip_call span.expandcall{width:30px;}
	.clip_call span.expandcall:before{left:8px;}
	.clip_call span.expandcall:after{left:14px;}
	.clip_call.expand span.expandcall:before{left:11px;top:14px;}
	.clip_call.expand span.expandcall:after{left:11px;top:14px;}
	.clip_call span.star{right:40px;}
	.clip_call span.iscomment{right:70px;}
	.clip_call span.voicemail_listen{right:90px;}
	
	.clip_fax span.status{width:40px;}
	.clip_fax span.number{left:50px;}
	.clip_fax span.date{left:50px;}
	
	.clip_phone .typevoicemenu{margin-left:0;}
	.clip_phone .name{width:calc(100% - 167px);}
	
	.clip_announce span.edit{width:40px;}
	.clip_announce span.announce_listen{width:40px;right:40px;}
	
}