%PDF-
%PDF-
Mini Shell
Mini Shell
.im-phone-call-top-close-btn {
}
.im-phone-call-section{
margin: 9px 0;
}
.im-call-hidden {
display: none!important;
}
/* BASIC STYLES */
.im-phone-call-disable-scroll {
overflow: hidden;
}
.im-phone-call-top-level {
position: relative;
min-width: 550px;
box-shadow: 3px 5px 10px 0 rgba(0,0,0,.24);
}
.im-phone-call-wrapper {
display: inline-block;
position: relative;
height: 100%;
width: 550px;
background: #29303a;
box-sizing: border-box;
z-index: 20;
}
.im-phone-call-wrapper.im-phone-call-wrapper-without-sidebar {
width: 100%;
}
.im-phone-call-wrapper.im-phone-call-wrapper-fixed{
box-shadow: 0 -3px 8px 0 rgba(0,0,0,.33);
position: fixed;
left: 0;
bottom:0;
z-index:1100;
height: auto;
width:calc(100% - 64px);
/*display: block;*/
border-radius:2px 2px 0 0;
padding:5px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: flex-start;
}
.im-phone-call-wrapper-fixed-left{padding-right:30px;}
.im-phone-call-wrapper-fixed-right {
position: relative;
}
.im-phone-call-panel .im-phone-call-wrapper-fixed-right {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.im-phone-call-wrapper-fixed-btn-container{
background: #1e232b;
display: inline-block;
height:52px;
border-radius:26px;
box-sizing: border-box;
padding:8px 8px 8px 5px ;
margin-top:-26px;
position: absolute;
top: 50%;
white-space: nowrap;
}
.im-phone-call-wrapper-fixed-btn-container .im-phone-call-btn {
margin-top: 0;
}
.im-phone-call-wrapper-fixed-btn-container .im-phone-call-btn-settings{}
.im-phone-call-wrapper-fixed-user {
text-align: center;
}
.im-phone-call-wrapper-fixed-user-image {
padding: 8px;
width: 75px;
height:75px;
border: 1px solid rgba(59,200,245,.5);
border-radius: 100%;
box-sizing: border-box;
float: left;
}
.im-phone-call-wrapper-fixed-user-image-item {
height: 100%;
border-radius: 100%;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22214%22%20height%3D%22214%22%20viewBox%3D%220%200%20214%20214%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22%23525C68%22%20d%3D%22M106.787%20213.574c58.977%200%20106.787-47.81%20106.787-106.787C213.574%2047.81%20165.764%200%20106.787%200%2047.81%200%200%2047.81%200%20106.787c0%2058.977%2047.81%20106.787%20106.787%20106.787z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M164.802%20172.942c0-8.03-9.01-42-9.01-42%200-4.965-6.49-10.636-19.272-13.94-4.33-1.21-8.446-3.082-12.2-5.553-.822-.47-.697-4.806-.697-4.806l-4.117-.627c0-.352-.352-5.55-.352-5.55%204.925-1.656%204.42-11.42%204.42-11.42%203.126%201.736%205.163-5.99%205.163-5.99%203.7-10.733-1.842-10.084-1.842-10.084.97-6.553.97-13.212%200-19.765-2.464-21.736-39.557-15.835-35.16-8.736-10.84-1.997-8.366%2022.67-8.366%2022.67l2.35%206.388c-4.617%202.995-1.407%206.617-1.247%2010.786.227%206.155%203.993%204.88%203.993%204.88.233%2010.16%205.242%2011.482%205.242%2011.482.942%206.38.355%205.294.355%205.294l-4.458.54c.06%201.45-.058%202.903-.352%204.326-5.242%202.336-6.37%203.706-11.58%205.99-10.065%204.41-21.003%2010.147-22.947%2017.87C52.78%20142.422%2047%20172.942%2047%20172.942H164.802z%22/%3E%3Ctext%20fill%3D%22%23525C68%22%20opacity%3D%22.6%22%20font-family%3D%22HelveticaNeue-Bold%2C%20Helvetica%20Neue%22%20font-size%3D%2239%22%20font-weight%3D%22bold%22%3E%3Ctspan%20x%3D%22118.158%22%20y%3D%22157%22%3E%3F%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E');
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.im-phone-call-wrapper-fixed-user-info{
display: block;
overflow: hidden;
text-align: left;
padding: 5px 10px;
}
.im-phone-call-wrapper-fixed-user-name {
font: 18px/24px "OpenSans-Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
}
.im-phone-call-wrapper-fixed-user-name > a {
color: #fff;
}
.im-phone-call-wrapper-fixed-user-item{
font: 12px/18px "OpenSans-Regular", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: rgba(255,255,255,.6);;
}
/*ARROW*/
.im-phone-btn-arrow {
position: absolute;
top: 16px;
right: 19px;
color: rgba(255, 255, 255, .7);
-webkit-transition: color .3s;
transition: color .3s;
cursor: pointer;
}
.im-phone-btn-arrow:hover {
color: #fff;
}
.im-phone-call-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
padding: 0 0 68px;
height: 100%;
/*min-height: 639px;*/
width: 550px;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
z-index: 1;
}
.im-phone-call-container.im-phone-call-container-without-sidebar {
width: 100%;
}
.im-phone-call-border {
margin: 0 16px;
border-top: 1px solid rgba(78,88,101,.59);
}
/* END OF BASIC STYLES */
/* BADGES */
.im-phone-calling-process-status {
font: 18px/21px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
margin: 0;
text-align: center;
padding-bottom:55px;
}
.im-phone-call-status-description{ padding:6px ;}
.im-phone-call-status-description-item{
text-align: center;
font: 13px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
}
.im-phone-call-status-timer{ padding:6px ;}
.im-phone-call-status-timer-item{
text-align: center;
font: 11px/12px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #C3C6C9;
}
.im-phone-call-crm-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding: 18px 20px;
font: 10px/12px "OpenSans-Bold", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
text-transform: uppercase;
}
.im-phone-call-crm-button-comment {
margin: auto 10px auto 0;
cursor: pointer;
}
.im-phone-call-crm-button-comment .im-phone-call-crm-button-item {
border-bottom: 1px solid rgba(255,255,255,.4);
-webkit-transition: border-bottom .3s linear;
-moz-transition: border-bottom .3s linear;
-ms-transition: border-bottom .3s linear;
-o-transition: border-bottom .3s linear;
transition: border-bottom .3s linear;
}
.im-phone-call-crm-button {
margin: 0 10px 0 0;
}
.im-phone-call-crm-button:last-child {
margin: 0;
}
.im-phone-call-crm-button-item {
padding: 7px 18px;
border-radius: 30px;
background: rgba(245,245,247,.12);
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
cursor: pointer;
}
.im-phone-call-crm-button-item:hover {
background: rgba(245,245,247,.32);
}
.im-phone-call-crm-button-comment .im-phone-call-crm-button-item {
padding: 7px 0;
border-radius: 0;
background: transparent;
}
.im-phone-call-crm-button-comment .im-phone-call-crm-button-item:hover {
border-bottom: 1px solid #fff;
background: transparent;
}
.im-phone-call-crm-button-active {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-transition: all .3s;
transition: all .3s;
}
.im-phone-call-crm-button-active .im-phone-call-crm-button-item {
padding: 7px 18px;
border-radius: 30px;
border-bottom: none;
}
.im-phone-call-crm-button-active .im-phone-call-crm-button-item {
background: rgba(59,200,245,.7);
-webkit-transition: background .3s linear;
transition: background .3s linear;
}
.im-phone-call-crm-button-active .im-phone-call-crm-button-item:hover {
background: rgba(59,200,245,1);
border-bottom: none;
}
.im-phone-calling-section{
padding-top:55px;
text-align: center;
}
.im-phone-calling-text{
font-size:20px;
color: #BDC0C3;
}
.im-phone-calling-number{
color: #fff;
font-size:28px;
}
.im-phone-calling-small-text{
font-size:15px;
color: #BDC0C3;
}
.im-phone-calling-small-number{
color: #fff;
font-size:18px;
}
.im-phone-calling-progress-section {
padding:55px 0;
}
.im-phone-calling-progress-container {
height: 145px;
position: relative;
width:100%;
}
.im-phone-calling-progress-container-block-c {
position: absolute;
left: 220px;
right: 220px;
top: 50%;
}
.im-phone-calling-progress-bar {
position: absolute;
top: 0;
bottom: 0;
border-radius:3px;
opacity: .8;
}
/*@keyframes move {
0%, 2%,98%,100%{left: -24px;}
48%, 52%{left: calc(100% - 6px);}
}*/
.im-phone-calling-progress-container-block-l,
.im-phone-calling-progress-container-block-r {
position: absolute;
top: 0;
width: 113px;
height:113px;
border-radius:50%;
border: 1px solid #4B535D;
padding: 15px;
}
.im-phone-calling-progress-container-block-l {left: 50px;}
.im-phone-calling-progress-container-block-r {right:50px;}
.im-phone-calling-progress-phone {
height:113px;
width: 113px;
border-radius: 50%;
background: #29AD49 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSI1NSIgdmlld0JveD0iMCAwIDU0IDU1Ij48cGF0aCBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNDguNzEyMjA5LDIwNi42NTQ3MzggQzE1MC45MDE4MDMsMjA4Ljg0NDMzMiAxNTEuMzM3ODk1LDIxNS4zODExNDYgMTUwLjE5MTcyNiwyMTUuNDE3Njc3IEMxNDkuMDQ1NTU3LDIxNS40NTQyMDkgMTM2LjM5NjYwNCwyMjEuMTU3NjU0IDEzNS4yNTI3MTksMjIxLjE5NjQ2OCBDMTMyLjg5NDQ2LDIxOS44ODA1MDkgMTMwLjc3OTg4MywyMTguMTY5MDc2IDEyOS4wMDEzMDUsMjE2LjEzNjg4NyBDMTI3Ljg1OTcwMywyMTQuOTk1Mjg1IDExOC4wMzUwNzMsMjIzLjY0NjM0NyAxMTcuODQ3ODUxLDIyMy44MTA3MzcgQzExNy42NjA2MjgsMjIzLjk3NTEyOCAxMDkuMDE0MTMyLDIzMy43OTk3NTcgMTEwLjE2MDMwMSwyMzQuOTQxMzU5IEMxMTIuMTk1Mzk3LDIzNi43MTQ1MTkgMTEzLjkwOTM0MSwyMzguODI1NDc0IDExNS4yMjY3MzIsMjQxLjE4MTM1NyBDMTE1LjE4NzkxNywyNDIuMzI1MjQzIDEwOS40Nzc2MjMsMjU0Ljk0OTA4MSAxMDkuNDQzMzc1LDI1Ni4wOTc1MzMgQzEwOS40MDkxMjcsMjU3LjI0NTk4NCAxMDIuODUxNzYzLDI1Ni44MTIxNzYgMTAwLjY2MjE3LDI1NC42MjI1ODIgQzk4Ljc5MjIyNTcsMjUyLjc1MjYzOCA5MS45NTg1OTQ2LDI0My4xMDE1MzIgMTAzLjc4Nzg3NywyMjYuNTc3OTgxIEMxMDYuMDE1MDk3LDIyMy4yODA3NjQgMTA4LjYxODc0NiwyMjAuMjU0MTU2IDExMS41NDYyMDYsMjE3LjU1OTMyMyBMMTExLjU3ODE3MSwyMTcuNTI3MzU4IEMxMTQuMjc4NjYzLDIxNC42MDQzMDYgMTE3LjMxMDY2OSwyMTIuMDA1OTkxIDEyMC42MTI4MTEsMjA5Ljc4NTAxMiBDMTM3LjE3MDYxMSwxOTcuOTY3MTQ1IDE0Ni44NDIyNjUsMjA0Ljc4NDc5NCAxNDguNzEyMjA5LDIwNi42NTQ3MzgiIHRyYW5zZm9ybT0icm90YXRlKC05MCAtMjUuNTk3IDE3Ny4zNTcpIi8+PC9zdmc+) no-repeat center;
}
.im-phone-calling-progress-customer {
height:113px;
width: 113px;
border-radius: 50%;
background: #525C68 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI3MyIgdmlld0JveD0iMCAwIDY0IDczIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00NTYuMDkzNzUzLDI2Ni4yNzM5NjcgQzQ1Ni4wOTM3NTMsMjYxLjk3MzA2MiA0NTEuMjY3NDM1LDI0My43Nzg3NzcgNDUxLjI2NzQzNSwyNDMuNzc4Nzc3IEM0NTEuMjY3NDM1LDI0MS4xMTk2MjMgNDQ3Ljc5MTQxNiwyMzguMDgyMTE3IDQ0MC45NDYzMzMsMjM2LjMxMjAyMSBDNDM4LjYyNzI0MywyMzUuNjY1MTc1IDQzNi40MjI2NywyMzQuNjYyMTEzIDQzNC40MTE0MTcsMjMzLjMzODY4OCBDNDMzLjk3MTU2NywyMzMuMDg3MzQ2IDQzNC4wMzg0MTQsMjMwLjc2NTA5OCA0MzQuMDM4NDE0LDIzMC43NjUwOTggTDQzMS44MzM4MTUsMjMwLjQyOTUyOCBDNDMxLjgzMzgxNSwyMzAuMjQxMDIxIDQzMS42NDUzMDgsMjI3LjQ1NjE5NSA0MzEuNjQ1MzA4LDIyNy40NTYxOTUgQzQzNC4yODMwNzIsMjI2LjU2OTgxIDQzNC4wMTE2NzUsMjIxLjM0MTA3NiA0MzQuMDExNjc1LDIyMS4zNDEwNzYgQzQzNS42ODY4NDksMjIyLjI3MDI0MiA0MzYuNzc3Nzg0LDIxOC4xMzI0NDMgNDM2Ljc3Nzc4NCwyMTguMTMyNDQzIEM0MzguNzU5MTE1LDIxMi4zODM2NDIgNDM1Ljc5MTEyOSwyMTIuNzMxMjQ0IDQzNS43OTExMjksMjEyLjczMTI0NCBDNDM2LjMxMDM2NywyMDkuMjIxNzQxIDQzNi4zMTAzNjcsMjA1LjY1NDkzMyA0MzUuNzkxMTI5LDIwMi4xNDU0MyBDNDM0LjQ3MTU3OSwxOTAuNTAzNDQgNDE0LjYwNDc5NCwxOTMuNjYzOTQ0IDQxNi45NjA0NjUsMTk3LjQ2NjE3NCBDNDExLjE1NDE3NywxOTYuMzk2NjI5IDQxMi40NzkwNzUsMjA5LjYwODE3NSA0MTIuNDc5MDc1LDIwOS42MDgxNzUgTDQxMy43Mzg0NjMsMjEzLjAyOTM4IEM0MTEuMjY1MTQyLDIxNC42MzM2OTYgNDEyLjk4NDQzNSwyMTYuNTczNTgyIDQxMy4wNjk5OTgsMjE4LjgwNjI1NiBDNDEzLjE5MTY1OSwyMjIuMTAzMTI2IDQxNS4yMDkwODcsMjIxLjQxOTk1NCA0MTUuMjA5MDg3LDIyMS40MTk5NTQgQzQxNS4zMzM0MjEsMjI2Ljg2MTI2MSA0MTguMDE2NjQsMjI3LjU2OTgzNCA0MTguMDE2NjQsMjI3LjU2OTgzNCBDNDE4LjUyMDY2MywyMzAuOTg3MDI4IDQxOC4yMDY0ODUsMjMwLjQwNTQ2MyA0MTguMjA2NDg1LDIzMC40MDU0NjMgTDQxNS44MTg3MjcsMjMwLjY5NDI0IEM0MTUuODUxMDUsMjMxLjQ3MTM0NyA0MTUuNzg3NzQsMjMyLjI0OTQ4IDQxNS42MzAyMiwyMzMuMDExMTQgQzQxMi44MjI2NjYsMjM0LjI2MjUwNyA0MTIuMjE4Mzc0LDIzNC45OTY0ODIgNDA5LjQyODIsMjM2LjIxOTc3MyBDNDA0LjAzNzY5NywyMzguNTgyMTI5IDM5OC4xNzkyNjgsMjQxLjY1NDM5NSAzOTcuMTM3Nzk5LDI0NS43OTA4NTggQzM5Ni4wOTYzMzEsMjQ5LjkyNzMyIDM5MywyNjYuMjczOTY3IDM5MywyNjYuMjczOTY3IEw0NTYuMDkxMDc5LDI2Ni4yNzM5NjcgTDQ1Ni4wOTEwNzksMjY2LjI3Mzk2NyBMNDU2LjA5MTA3OSwyNjYuMjczOTY3IEw0NTYuMDkzNzUzLDI2Ni4yNzM5NjcgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM5MyAtMTk0KSIvPjwvc3ZnPg==) no-repeat center;
background-size: 100% 100%;
}
.im-phone-calling-progress-container-block-r {}
.im-phone-calling-progress-container-block-c {}
/* END OF BADGES */
/* BUTTON */
.im-phone-call-buttons-container {
position: absolute;
bottom: 0;
width: 100%;
height: 68px;
background: #1e232b;
text-align: center;
box-sizing: border-box;
padding:0 45px;
}
.im-phone-call-buttons-container-left{
position: absolute;
left:25px;
}
.im-phone-call-buttons-container-right{
position: absolute;
right:85px;
}
.im-phone-call-btn {
display: inline-block;
padding: 0 24px;
height: 36px;
margin: 16px 4px;
border-radius: 33px;
box-sizing: border-box;
vertical-align: middle;
font: 12px/36px "OpenSans-Bold", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
text-transform: uppercase;
-webkit-transition: background 300ms linear;
-moz-transition: background 300ms linear;
-ms-transition: background 300ms linear;
-o-transition: background 300ms linear;
transition: background 300ms linear;
cursor: pointer;
}
.im-phone-call-btn-red {background-color: #9D0F23;}
.im-phone-call-btn-red:hover {background-color: #C43D51;}
.im-phone-call-btn-blue {background-color: #349ABC;}
.im-phone-call-btn-blue:hover {background-color: #37AED4;}
.im-phone-call-btn-green {background-color: #80A02A;}
.im-phone-call-btn-green:hover {background-color: #A2BF54;}
.im-phone-call-btn-gray {
background-color: #282F39;
border:1px solid #80848a;
line-height: 34px;
}
.im-phone-call-btn-gray:hover {background-color: #464C54;}
.im-phone-call-btn-arrow{ padding-right:13px;}
.im-phone-call-btn-arrow:after {
background: url(../images/im-sprite.svg) no-repeat center -98px;
width:11px;
height:30px;
display: inline-block;
content:"";
line-height:30px;
margin-left:10px;
vertical-align: middle;
position: relative;
margin-top: -2px;
}
.im-phone-call-btn-tube{ padding-left:15px;}
.im-phone-call-btn-tube:before {
background: url(../images/im-sprite.svg) no-repeat center -26px;
width:22px;
height:30px;
display: inline-block;
content:"";
line-height:30px;
margin-right:10px;
vertical-align: middle;
position: relative;
margin-top: -2px;
}
.im-phone-call-btn-settings {
position: absolute;
height: 40px;
width: 30px;
cursor: pointer;
right:15px;
top:50%;
margin-top:-20px;
}
.im-phone-call-btn-settings:after {
content: '';
position: absolute;
width: 14px;
height:14px;
background: url(../images/im-sprite.svg) no-repeat center 0;
top: 50%;
left:50%;
margin-top:-7px;
margin-left:-7px;
-webkit-transition: opacity 250ms linear, transform 250ms linear;
-moz-transition: opacity 250ms linear, transform 250ms linear;
-ms-transition: opacity 250ms linear, transform 250ms linear;
-o-transition: opacity 250ms linear, transform 250ms linear;
transition: opacity 250ms linear, transform 250ms linear;
opacity: .3;
}
.im-phone-call-btn-settings:hover:after {
opacity: .8;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.im-phone-call-btn-signal {
position: absolute;
height: 40px;
width: 30px;
cursor: pointer;
right:50px;
top:50%;
margin-top:-20px;
}
.im-phone-call-btn-signal-icon-container{
position: absolute;
left:8px;
right:8px;
top:0;
bottom:0;
}
.im-phone-call-btn-signal-background,
.im-phone-call-btn-signal-active {
position: absolute;
width: 15px;
height:10px;
top: 50%;
left: 0;
margin-top: -5px;
-webkit-transition: opacity 250ms linear;
-moz-transition: opacity 250ms linear;
-ms-transition: opacity 250ms linear;
-o-transition: opacity 250ms linear;
transition: opacity 250ms linear;
}
.im-phone-call-btn-signal-background {
background: url(../images/im-sprite.svg) no-repeat 0 -72px;
opacity: .3;
z-index:5;
width:25px;
}
.im-phone-call-btn-signal-active {
background: url(../images/im-sprite.svg) no-repeat 0 -72px;
opacity: .7;
z-index:10;
}
.im-phone-call-btn-signal:hover .im-phone-call-btn-signal-background{ opacity:.7;}
.im-phone-call-btn-signal:hover .im-phone-call-btn-signal-active{ opacity: 1;}
.im-phone-call-btn-phone,
.im-phone-call-btn-hold,
.im-phone-call-btn-mute,
.im-phone-call-btn-transfer,
.im-phone-call-btn-dialpad {
display: inline-block;
position: relative;
width: 36px;
height:36px;
cursor: pointer;
outline: none;
margin:16px 10px 16px 0;
vertical-align: middle;
-webkit-transition: opacity 250ms linear, background 250ms linear, border 250ms linear;
-moz-transition: opacity 250ms linear, background 250ms linear, border 250ms linear;
-ms-transition: opacity 250ms linear, background 250ms linear, border 250ms linear;
-o-transition: opacity 250ms linear, background 250ms linear, border 250ms linear;
transition: opacity 250ms linear, background 250ms linear, border 250ms linear;
border-radius:50%;
border: 1px solid rgba(255,255,255,.7);
box-sizing: border-box !important;
background-color: transparent;
}
.bx-retina .im-phone-call-btn-phone,
.bx-retina .im-phone-call-btn-hold,
.bx-retina .im-phone-call-btn-mute,
.bx-retina .im-phone-call-btn-transfer,
.bx-retina .im-phone-call-btn-dialpad { border-width:.5px;}
.im-phone-call-btn-phone:hover,
.im-phone-call-btn-hold:hover,
.im-phone-call-btn-mute:hover,
.im-phone-call-btn-transfer:hover,
.im-phone-call-btn-dialpad:hover{
background: #464C54;
border-color: #fff;
}
.im-phone-call-btn-phone.active,
.im-phone-call-btn-hold.active,
.im-phone-call-btn-mute.active,
.im-phone-call-btn-transfer.active,
.im-phone-call-btn-dialpad.active{
border-color: #349ABC !important;
background: #349ABC !important;
}
.im-phone-call-btn-phone.active:hover,
.im-phone-call-btn-hold.active:hover,
.im-phone-call-btn-mute.active:hover,
.im-phone-call-btn-transfer.active:hover,
.im-phone-call-btn-dialpad.active:hover{ background-color: #37AED4 !important;}
.im-phone-call-btn-phone:after,
.im-phone-call-btn-hold:after,
.im-phone-call-btn-mute:after,
.im-phone-call-btn-transfer:after,
.im-phone-call-btn-dialpad:after{
position: absolute;
top: 0;
right: 0;
bottom:0;
left: 0;
content:"";
display: block;
opacity:.7;
}
.im-phone-call-btn-hold:after {background: url(../images/im-sprite.svg) no-repeat center -145px;}
.im-phone-call-btn-mute:after {background: url(../images/im-sprite.svg) no-repeat center -181px;}
.im-phone-call-btn-mute.active:after {background: url(../images/im-sprite.svg) no-repeat center -217px;}
.im-phone-call-btn-dialpad:after {background: url(../images/im-sprite.svg) no-repeat center -253px;}
.im-phone-call-btn-transfer:after {background: url(../images/im-sprite.svg) no-repeat center -289px;}
.im-phone-call-btn-phone:after {background: url(../images/im-sprite.svg) no-repeat center -325px; opacity: 1;}
.im-phone-call-btn-phone.active:after{background: url(../images/im-sprite.svg) no-repeat center -361px;}
.im-phone-call-btn-phone:hover:after,
.im-phone-call-btn-hold:hover:after,
.im-phone-call-btn-mute:hover:after,
.im-phone-call-btn-transfer:hover:after,
.im-phone-call-btn-dialpad:hover:after{opacity: 1 !important;}
.im-phone-call-btn-phone.active:after,
.im-phone-call-btn-hold.active:after,
.im-phone-call-btn-mute.active:after,
.im-phone-call-btn-transfer.active:after,
.im-phone-call-btn-dialpad.active:after{opacity: 1 !important;}
/* END OF BUTTON */
.im-phone-sidebar-wrap{
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: calc(100% - 550px);
min-width: 300px;
box-sizing: border-box;
/*padding:7px 0 0 22px;*/
padding:7px 0 0 2px;
background-color: #fff;
z-index: 10;
}
.im-phone-sidebar-tabs-container{
border-bottom:1px solid #EAEBEC;
padding-left: 20px;
height: 56px;
overflow: hidden;
}
.im-phone-sidebar-tabs-left {
max-width: calc(100% - 55px);
display: inline-block;
}
.im-phone-sidebar-tabs-right {
display: inline-block;
float: right;
}
.im-phone-sidebar-tab{
position: relative;
display: inline-block;
height: 16px;
padding:20px 0;
margin-right:25px;
font-size: 14px;
line-height: 16px;
vertical-align: middle;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:600;
color:#525c68;
cursor: pointer;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-ms-transition: color 200ms linear;
-o-transition: color 200ms linear;
transition: color 200ms linear;
}
.im-phone-sidebar-tab:hover,
.im-phone-sidebar-tab-active{color:#1058d0;}
.im-phone-sidebar-tab:after{
-webkit-transition: height 200ms linear;
-moz-transition: height 200ms linear;
-ms-transition: height 200ms linear;
-o-transition: height 200ms linear;
transition: height 200ms linear;
content:"";
height:0;
position: absolute;
right: 0;
bottom:0;
left: 0;
background-color: #1058d0;
}
.im-phone-sidebar-tab:hover:after,
.im-phone-sidebar-tab-active:after{
height: 3px;
}
.im-phone-sidebar-tabs-left>.im-phone-sidebar-tab:last-child{ margin-right: 0;}
.im-phone-sidebar-tab-more {
margin-right: 20px;
}
/**/
.im-phone-sidebar-tabs-body-container {
height: calc(100% - 57px);
position: relative;
}
.im-phone-sidebar-tabs-body-container>div{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.im-phone-call-form-container {
max-height: 100%;
overflow-y: scroll;
scrollbar-track-color: #F9FAFB;
scrollbar-base-color: #D4D7D9;
scrollbar-shadow-color: #D4D7D9;
scrollbar-highlight-color:#D4D7D9;
}
.im-phone-call-list-container {
padding:11px 18px 11px 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: scroll;
scrollbar-track-color: #F9FAFB;
scrollbar-base-color: #D4D7D9;
scrollbar-shadow-color: #D4D7D9;
scrollbar-highlight-color:#D4D7D9;
}
.im-phone-call-list-container::-webkit-scrollbar {width: 18px;}
.im-phone-call-list-container::-webkit-scrollbar-track{background:#F9FAFB;}
.im-phone-call-list-container::-webkit-scrollbar-thumb{
background: #D4D7D9;
border-radius: 1px;
}
/**/
.im-phone-call-list-block {}
.im-phone-call-list-block-title {
min-height: 23px;
line-height: 23px;
padding:5px 31px 5px 10px;
margin-bottom: 10px;
margin-left:20px;
border-radius:2px;
text-transform: uppercase;
font-weight:600;
width:calc(100% - 20px);
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:11px;
color:#525c68;
cursor: pointer;
transition: background 250ms linear;
position: relative;
box-sizing: border-box;
}
.im-phone-call-list-in-work-block .im-phone-call-list-block-title {background: #F3F6F7;}
.im-phone-call-list-in-work-block .im-phone-call-list-block-title:hover{background: #eef2f4;}
.im-phone-call-list-successful .im-phone-call-list-block-title {background: #F2FAE9;}
.im-phone-call-list-successful .im-phone-call-list-block-title:hover{background: #e5f6d3;}
.im-phone-call-list-not-successful .im-phone-call-list-block-title {background: #FAE6E9;}
.im-phone-call-list-not-successful .im-phone-call-list-block-title:hover{background: #f7cfd4;}
.im-phone-call-list-block-title-arrow {
position: absolute;
width:11px;
top: 0;
bottom: 0;
right:10px;
}
.im-phone-call-list-block-title-arrow:before,
.im-phone-call-list-block-title-arrow:after{
width:7px;
height:2px;
position: absolute;
top: 50%;
content:"";
margin-top:-1px;
background-color: #939AA1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: transform 250ms linear;
-moz-transition: transform 250ms linear;
-ms-transition: transform 250ms linear;
-o-transition: transform 250ms linear;
transition: transform 250ms linear;
}
.im-phone-call-list-block-title-arrow:before{left: 0;}
.im-phone-call-list-block-title-arrow:after{right: 0;}
.im-phone-call-list-block-title-arrow:after,
.im-phone-call-list-block-title.active .im-phone-call-list-block-title-arrow:before{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.im-phone-call-list-block-title-arrow:before,
.im-phone-call-list-block-title.active .im-phone-call-list-block-title-arrow:after{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**/
.im-phone-call-list-items-block {
margin-bottom: 10px;
/*padding-bottom:10px;*/
padding-left: 20px;
overflow: hidden;
transition: height .3s ease;
position: relative;
}
/*.im-phone-call-list-items-block:after{
content: '';
height:10px;
position: absolute;
bottom:0;
left: 0;
right: 0;
display: block;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}*/
.im-phone-call-list-customer-block {
position: relative;
padding:10px;
border: 1px solid transparent;
border-bottom-color:#EDEEEF;
}
.im-phone-call-list-customer-block-active,
.im-phone-call-list-customer-block-calling{
border-radius:3px;
border-color: #B0E476;
}
.im-phone-call-list-customer-block-calling:after{
content: '';
position: absolute;
top:12px;
left: -7px;
border-radius:50%;
width: 13px;
height:13px;
background:#B0E476 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="7" viewBox="0 0 6 7"><path fill="#FFFFFF" fill-rule="evenodd" d="M575.254179,149.19531 C575.254179,149.529964 574.787966,150.062829 574.697585,149.978031 C574.607204,149.893233 573.204728,149.362463 573.114347,149.278014 C573.034695,148.997233 573.003887,148.704852 573.023268,148.413636 C573.023268,148.239156 571.611369,148.149472 571.584499,148.147728 C571.557629,148.145983 570.14608,148.236015 570.146429,148.410845 C570.166446,148.701869 570.136107,148.994165 570.056746,149.274873 C569.966365,149.359322 568.565284,149.88765 568.474903,149.972797 C568.384522,150.057943 567.916565,149.523683 567.916565,149.189029 C567.916565,148.903229 568.131874,147.643478 570.298576,147.284746 C570.720749,147.202977 571.151009,147.170655 571.580661,147.188432 L571.585546,147.188432 C572.015293,147.171424 572.445558,147.204567 572.867631,147.287188 C575.036078,147.649411 575.254179,148.909511 575.254179,149.19531 L575.254179,149.19531 Z" transform="rotate(-135 257.055 193.93)"/></svg>') no-repeat center;
background-size:8px;
}
.im-phone-call-list-item-customer-name,
.im-phone-call-list-item-customer-entity {
position: relative;
}
.im-phone-call-list-item-customer-entity {
margin: 0 0 2px 13px;
}
.im-phone-call-list-item-customer-link {
display: inline-block;
margin: 0 0 4px 0;
border-bottom: 1px solid transparent;
font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #0b66c3;
text-align: left;
-webkit-transition: border-bottom .3s;
transition: border-bottom .3s;
cursor: pointer;
}
.im-phone-call-list-item-customer-link:hover {
border-bottom: 1px solid #0b66c3;
}
.im-phone-call-list-connection-line:before {
content: '';
position: absolute;
left: 5px;
bottom: -8px;
width: 1px;
height: 11px;
background: #D8D8D8;
}
.im-phone-call-list-connection-line-item:before {
content: '';
position: absolute;
top: 7px;
left: -8px;
width: 5px;
height: 1px;
background: #D8D8D8;
}
.im-phone-call-list-item-customer-info {
opacity: .8;
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #525c68;
text-align: left;
margin-bottom: 3px;
}
.im-phone-call-list-item-customer-info:last-child {
margin-bottom: 0;
}
.im-phone-call-list-customer-block-action{
visibility: hidden;
position: absolute;
right:20px;
top:50%;
cursor: pointer;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color: #1058D0;
font-size:12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-right: 10px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIHZpZXdCb3g9IjAgMCA2IDMiPiAgPHBvbHlnb24gZmlsbD0iIzUyNUM2OCIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBwb2ludHM9IjM4OCAxNjQgMzkxIDE2NyAzODUgMTY3IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAtMzg1IDE2NykiLz48L3N2Zz4=) no-repeat center right;
z-index: 2;
}
.im-phone-call-list-customer-block-action span{
display: inline-block;
padding-bottom:1px;
border-bottom:1px dashed;
}
.im-phone-call-list-customer-block-action:hover span{
border-bottom-style:solid;
}
.im-phone-call-list-customer-block-active > .im-phone-call-list-customer-block-action{
visibility: visible;
}
.im-phone-call-crm-card {
/* display: -webkit-box;
display: -ms-flexbox;
display: flex;*/
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
/*-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;*/
/*min-height: 445px;*/
overflow: hidden;
}
.im-phone-call-list-show-more-wrap {
padding-top: 5px;
}
.im-phone-call-list-show-more-button {
border-bottom: 1px dashed #c1c3c8;
color: #c1c3c8;
cursor: pointer;
display: inline-block;
font: 12px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin-bottom: 6px;
margin-left: 12px;
transition: all 0.3s ease 0s;
}
.im-phone-call-list-show-more-button:hover { border-color: #535c69; color: #535c69; }
.im-phone-call-top-close-btn{
width: 18px;
height:18px;
line-height: 20px;
position: absolute;
top: -9px;
right:-9px;
z-index:100;
border-radius: 50%;
cursor: pointer;
background-color: #B1B4B7;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.im-phone-call-top-close-btn:after,
.im-phone-call-top-close-btn:before{
content: "";
position: absolute;
height:2px;
width:9px;
background-color: #fff;
top: 50%;
left:50%;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
}
.im-phone-call-top-close-btn:before{
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.im-phone-call-top-close-btn:after{
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.im-phone-call-top-close-btn:hover{background-color: #9A9DA1;}
.im-phone-call-header-container{
min-height: 40px;
padding: 15px 16px 0;
}
.im-phone-call-header{
padding-bottom: 15px;
border-bottom: 1px solid rgba(216,216,216,.20);
}
.im-phone-call-title-text {
font-size:15px;
color: #BDC0C3;
}
.im-phone-call-title-number {
color: #fff;
font-size:18px;
}
/* FOLDED CALL CARD */
.im-phone-call-font-s {
font: 11px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: rgba(255, 255, 255, .7);
}
.im-phone-call-wrapper.im-phone-call-wrapper-fixed.im-phone-call-panel {
padding: 6px 5px;
}
.im-phone-call-panel-alert {
position: absolute;
top: -29px;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 14px;
width: 100%;
height: 30px;
border-bottom: 1px solid rgba(78, 88, 101, .59);
border-radius: 2px 2px 0 0;
background: #29303a;
font: 15px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
-webkit-transition: top .3s;
transition: top .3s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.im-phone-call-panel-alert-title {
margin: 0 auto;
}
.im-phone-call-panel-alert-time {
position: absolute;
right: 14px;
}
.im-phone-call-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
width: 100%;
background: #29303a;
overflow: hidden;
z-index: 999;
}
.im-phone-call-number {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 5px 16px;
width: 100%;
font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #fff;
}
.im-phone-call-number-name {
margin: 0 7px 0 0;
}
.im-phone-call-panel .im-phone-call-wrapper-fixed-btn-container {
position: static;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
min-width: 385px;
}
.im-phone-call-panel .im-phone-call-buttons-container-left {
position: static;
display: inline-block;
}
.im-phone-call-panel .im-phone-call-btn-hold,
.im-phone-call-panel .im-phone-call-btn-mute,
.im-phone-call-panel .im-phone-call-btn-transfer,
.im-phone-call-panel .im-phone-call-btn-dialpad {
margin: 0 7px 16px 2px;
}
.im-phone-call-btn-control:last-child {
margin-right: 16px;
}
.im-phone-call-panel .im-phone-call-buttons-container-right {
position: static;
}
.im-phone-call-button-block {
margin: 0 0 0 auto;
padding: 0 3px 0 10px;
}
.im-phone-call-panel .im-phone-call-btn-signal {
position: relative;
top: 0;
left: 0;
right: 0;
display: inline-block;
width: 25px;
margin: 0;
line-height: 35px;
text-align: center;
}
.im-phone-call-panel .im-phone-call-btn-signal-icon-container {
position: relative;
top: 0;
left: 0;
right: 0;
display: inline-block;
}
.im-phone-call-panel .im-phone-call-btn-signal-background {
position: static;
display: inline-block;
width: 15px;
}
.im-phone-call-settings {
display: inline-block;
width: 25px;
height: 40px;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.im-phone-call-settings-item {
display: inline-block;
margin: 12px 0 0 0;
width: 14px;
height: 14px;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M5.92%200h2.116c.255.106.35.302.345.572-.008.504%200%201.005-.005%201.51%200%20.086.022.127.106.15.278.073.54.185.79.322.095.05.15.03.222-.043.36-.37.728-.737%201.098-1.1.22-.218.47-.228.69-.013.43.42.857.843%201.277%201.275.217.22.205.49-.013.707-.36.363-.722.727-1.09%201.084-.077.075-.098.13-.04.234.13.224.234.463.3.715.034.13.1.168.236.168.538%200%201.076-.027%201.615.017.23.02.364.168.385.4%200%20.648%200%201.292.003%201.94-.02.258-.205.43-.466.43-.535%200-1.067.002-1.602%200-.084%200-.125.017-.15.108-.08.267-.183.53-.32.774-.053.093-.047.146.03.223.368.358.73.722%201.09%201.086.236.24.24.494.006.73-.41.417-.823.83-1.24%201.242-.243.24-.498.233-.74-.01-.368-.367-.735-.73-1.1-1.1-.058-.06-.102-.08-.183-.032-.24.134-.494.242-.76.314-.1.028-.142.075-.142.19.01.513.003%201.026.003%201.54%200%20.18-.065.326-.205.442-.072.06-.165.03-.23.09h-1.96c-.302-.094-.405-.305-.395-.61.012-.488%200-.974.006-1.462.003-.112-.03-.168-.14-.196-.268-.07-.52-.18-.76-.314-.083-.047-.133-.032-.198.034-.364.37-.74.725-1.095%201.104-.2.215-.544.218-.746.003-.395-.417-.81-.818-1.217-1.222-.255-.255-.255-.492-.003-.747l1.11-1.11c.06-.06.082-.1.035-.18-.14-.238-.247-.496-.32-.757-.035-.122-.088-.154-.213-.15-.52.01-1.036-.004-1.555.006-.274.006-.498-.227-.492-.492.016-.606.003-1.213.006-1.82%200-.056-.003-.11.022-.165.087-.218.227-.312.526-.312.507-.003%201.017-.003%201.524.003.1%200%20.143-.03.17-.126.08-.27.19-.526.322-.775.04-.076.04-.116-.025-.178-.364-.355-.722-.716-1.08-1.077-.29-.29-.292-.53%200-.818L2.62%201.453c.29-.29.525-.286.818.006.36.357.72.718%201.076%201.08.056.055.094.064.165.024.254-.137.52-.26.8-.33.092-.025.11-.075.11-.165-.002-.493.007-.987-.005-1.48C5.58.32%205.662.116%205.92%200zm1.065%209.77c1.5.027%202.803-1.22%202.806-2.786.004-1.55-1.253-2.82-2.796-2.815-1.55.005-2.806%201.222-2.81%202.805%200%201.587%201.292%202.806%202.8%202.794z%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
vertical-align: top;
-webkit-transition: opacity .25s;
transition: opacity .25s;
opacity: .3;
}
.im-phone-call-settings:hover .im-phone-call-settings-item {
opacity: .7;
}
/* END OF FOLDED CALL CARD */
/* MINI FOLDED CALL */
.im-phone-call-panel-mini {
position: fixed;
overflow: hidden;
left: 20px;
bottom: 16px;
padding: 7px 0 7px 7px;
font-size: 0;
background: rgba(55, 64, 75, .92);
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.im-phone-call-panel-mini-buttons {
display: inline-block;
}
.im-phone-call-panel-mini-time,
.im-phone-call-panel-mini-cancel,
.im-phone-call-panel-mini-expand {
display: inline-block;
vertical-align: middle;
-webkit-transition: .1s;
-o-transition: .1s;
transition: .1s;
}
.im-phone-call-panel-mini-cancel {
height: 31px;
background: rgba(208, 2, 27, .7);
color: #fff;
font-size: 12px;
line-height: 31px;
font-family: "OpenSans-Bold", Helvetica, Arial, sans-serif;
padding: 0 17px;
margin: 0 0 0 5px;
text-transform: uppercase;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
cursor: pointer;
}
.im-phone-call-panel-mini-cancel:hover {
background: rgba(208, 2, 27, .9);
}
.im-phone-call-panel-mini-time {
font-size: 14px;
color: rgba(255,255,255,.6);
padding: 0 0 0 5px;
}
.im-phone-call-panel-mini-expand {
width: 38px;
height: 31px;
position: relative;
cursor: pointer;
}
.im-phone-call-panel-mini-expand:before {
content: '';
width: 5px;
height: 5px;
border: 2px solid #fff;
position: absolute;
top: 13px;
left: 14px;
opacity: .5;
border-bottom: none;
border-right: none;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.im-phone-call-panel-mini-expand:hover:before {
opacity: 8;
}
.im-phone-call-panel-mini-closing {
-webkit-animation: miniCallClose 0.3s ease-in both;
animation: miniCallClose 0.3s ease-in both;
}
/* END OF MINI FOLDED CALL */
/* COMMENTS */
.im-phone-call-comments {
padding: 0 15px;
}
.im-phone-call-comments-textarea {
padding: 12px;
width: 100%;
height: 100px;
border: 1px solid rgba(255,255,255,.34);
border-radius: 1px;
background: rgba(244,245,246,.13);
font: 12px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
color: rgba(255,255,255,.6);
box-sizing: border-box;
outline: none;
resize: none;
}
.im-phone-call-animate-show {
display: block!important;
-webkit-animation: animateBlockShow .4s linear forwards;
animation: animateBlockShow .4s linear forwards;
}
.im-phone-call-animate-hide {
animation: animateBlockHide .4s linear forwards;
-webkit-animation: animateBlockHide .4s linear forwards;
}
@-webkit-keyframes animateBlockShow {
0% {
-webkit-transform: translate3d(0,15px,0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes animateBlockShow {
0% {
transform: translate3d(0,15px,0);
opacity: 0;
}
100% {
transform: translate3d(0,0,0);
opacity: 1;
}
}
@-webkit-keyframes animateBlockHide {
0% {
-webkit-transform: translate3d(0,0,0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0,25px,0);
opacity: 0;
}
}
@keyframes animateBlockHide {
0% {
transform: translate3d(0,0,0);
opacity: 1;
}
100% {
transform: translate3d(0,25px,0);
opacity: 0;
}
}
/* END OF COMMENTS */
/* QUALITY GRADE POPUP */
.im-phone-popup-rating {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 8px 15px;
max-width: 112px;
box-shadow: 0 -6px 21px 0 rgba(83,92,105,0.2);
border-radius: 1px;
text-align: center;
}
.im-phone-popup-rating-title {
text-align: center;
color: #fff;
font-size: 13px;
line-height: 13px;
margin: 0 0 7px 0;
}
.im-phone-popup-rating-stars {
display: inline-block;
position: relative;
text-align: center;
width: 115px;
height: 17px;
font-size: 0;
white-space: nowrap;
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2015%22%3E%3Cpolygon%20fill%3D%22%2355585b%22%20fill-rule%3D%22evenodd%22%20points%3D%2210.133%2012.25%205.725%2014.568%206.566%209.659%203%206.182%207.929%205.466%2010.133%201%2012.337%205.466%2017.266%206.182%2013.699%209.659%2014.541%2014.568%22/%3E%3C/svg%3E%0A') repeat-x;
}
.im-phone-popup-rating-stars-item {
display: inline-block;
width: 23px;
height: 17px;
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2015%22%3E%3Cpolygon%20fill%3D%22%23F6A623%22%20fill-rule%3D%22evenodd%22%20points%3D%2210.133%2012.25%205.725%2014.568%206.566%209.659%203%206.182%207.929%205.466%2010.133%201%2012.337%205.466%2017.266%206.182%2013.699%209.659%2014.541%2014.568%22/%3E%3C/svg%3E%0A') repeat-x;
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 99999;
cursor: pointer;
}
.im-phone-popup-rating-stars-item:nth-child(2) {
width: 46px;
z-index: 9999;
}
.im-phone-popup-rating-stars-item:nth-child(3) {
width: 69px;
z-index: 999;
}
.im-phone-popup-rating-stars-item:nth-child(4) {
width: 92px;
z-index: 99;
}
.im-phone-popup-rating-stars-item:nth-child(5) {
width: 115px;
z-index: 9;
}
.im-phone-popup-rating-stars-item-active,
.im-phone-popup-rating-stars-item:hover {
opacity: 1;
}
/* <Keypad> */
#phone-call-view-popup-keypad .popup-window-content { padding: 4px 5px; }
.im-phone-select-line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
background: #333;
height: 24px;
border-radius: 12px;
margin: 0 0 15px 0;
cursor: pointer;
}
.im-phone-select-line:before,
.im-phone-select-line-select,
.im-phone-select-line-name {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.im-phone-select-line:before {
content: '';
max-width: 25px;
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2213%22%20viewBox%3D%220%200%2012%2013%22%3E%0A%20%20%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M3.28635431%2C1%20C3.8330759%2C1%204.70361173%2C1.7616476%204.56507853%2C1.90930233%20C4.42654532%2C2.05695707%203.55943005%2C4.3481709%203.42146694%2C4.49582564%20C2.96275742%2C4.62595206%202.48509746%2C4.6762828%202.00934037%2C4.64462057%20C1.72429262%2C4.64462057%201.57777808%2C6.95122698%201.5749276%2C6.99512434%20C1.57207712%2C7.03902169%201.71916176%2C9.34505801%202.00477961%2C9.34448792%20C2.48022301%2C9.31178635%202.95774431%2C9.36135137%203.41633608%2C9.49100246%20C3.55429919%2C9.6386572%204.41742379%2C11.9275907%204.55652709%2C12.0752454%20C4.6956304%2C12.2229001%203.82281418%2C12.9873982%203.27609259%2C12.9873982%20C2.80918437%2C12.9873982%200.751139593%2C12.6356493%200.165081413%2C9.09592628%20C0.0314969924%2C8.40622534%20-0.021307507%2C7.70331327%200.00773505323%2C7.00139539%20L0.00773505323%2C6.99341405%20C-0.0200506906%2C6.29133996%200.034093669%2C5.5884199%200.169072081%2C4.89888316%20C0.760831216%2C1.35630969%202.81944609%2C1%203.28635431%2C1%20Z%20M4.88692522%2C5.87695312%20L7.88692522%2C5.87695312%20L7.88692522%2C7.87695312%20L4.88692522%2C7.87695312%20L4.88692522%2C5.87695312%20Z%20M10.8869252%2C6.87695312%20L7.88692522%2C9.87695312%20L7.88692522%2C3.87695312%20L10.8869252%2C6.87695312%20Z%22%20transform%3D%22translate%28.887%20-.123%29%22/%3E%0A%3C/svg%3E%0A') 10px 5px no-repeat;
}
.im-phone-select-line-select {
position: relative;
max-width: 25px;
opacity: .7;
-webkit-transition: .1s;
-o-transition: .1s;
transition: .1s;
}
.im-phone-select-line-select:after {
content: '';
width: 4px;
height: 4px;
border: 2px solid transparent;
border-top: 2px solid #fff;
position: absolute;
top: 11px;
right: 11px;
box-sizing: border-box;
}
.im-phone-select-line-select:hover {
opacity: .9;
}
.im-phone-select-line-name {
background: none;
border: none;
font-size: 12px;
align-self: center;
color: rgba(255,255,255,.4);
}
.im-phone-intercept-button {
display: inline-block;
vertical-align: middle;
opacity: .4;
cursor: pointer;
color: #fff;
font-size: 13px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-transition: .1s;
-o-transition: .1s;
transition: .1s;
height: 33px;
line-height: 33px;
margin-left: 9px;
}
.im-phone-intercept-button:hover {
opacity: .8;
}
.im-phone-intercept-button-locked {
font-size: 12px;
margin-left: 4px;
}
.im-phone-intercept-button-locked:after {
content: '';
display: inline-block;
vertical-align: middle;
width: 8px;
height: 11px;
margin: 0 0 0 5px;
background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%228%22%20height%3D%2210%22%20viewBox%3D%220%200%208%2010%22%3E%0A%20%20%3Cpath%20fill%3D%22%23DFDFDF%22%20d%3D%22M215.29424%2C286.39666%20L215.29424%2C285.02909%20C215.294695%2C283.35856%20213.81644%2C282%20212.001395%2C282%20C210.184966%2C282%20208.707641%2C283.35856%20208.707641%2C285.02909%20L208.707641%2C286.3971%20L208%2C286.3971%20L208%2C292%20L216%2C292%20L216%2C286.39666%20L215.29424%2C286.39666%20L215.29424%2C286.39666%20L215.29424%2C286.39666%20Z%20M209.947997%2C285.02909%20C209.947997%2C283.9885%20210.868819%2C283.14272%20212.000941%2C283.14272%20C213.131203%2C283.14272%20214.051549%2C283.98894%20214.051549%2C285.02909%20L214.051549%2C286.3971%20L209.947997%2C286.3971%20L209.947997%2C285.02909%20L209.947997%2C285.02909%20L209.947997%2C285.02909%20Z%20M212.566764%2C290.46377%20L211.436502%2C290.46377%20L211.605827%2C288.92798%20C211.396841%2C288.80827%20211.255975%2C288.59457%20211.255975%2C288.34955%20C211.255975%2C287.97236%20211.589046%2C287.66598%20212.001395%2C287.66598%20C212.41143%2C287.66598%20212.74355%2C287.97238%20212.74355%2C288.34955%20C212.74355%2C288.59457%20212.604997%2C288.80785%20212.394151%2C288.92798%20L212.566764%2C290.46377%20L212.566764%2C290.46377%20L212.566764%2C290.46377%20Z%22%20transform%3D%22translate%28-208%20-282%29%22/%3E%0A%3C/svg%3E%0A') top center no-repeat;
}
/* </Keypad> */
/* ANIMATIONS */
#im-phone-call-view{
-webkit-animation: imOpacityTo1 .3s 1;
animation: imOpacityTo1 .3s 1;
}
#popup-window-overlay-im-phone-call-view{
-webkit-animation: imOpacityTo03 .3s 1;
animation: imOpacityTo03 .3s 1;
}
#im-phone-call-view.im-phone-call-view-folding{
-webkit-animation: callViewFold .3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: callViewFold .3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#popup-window-overlay-im-phone-call-view.popup-window-overlay-im-phone-call-view-folding{
-webkit-animation: imOpacityFrom03To0 .3s 1;
animation: imOpacityFrom03To0 .3s 1;
}
#im-phone-folded-call-view.im-phone-folded-call-view-fold {
-webkit-animation: foldedCallViewFold .3s 1;
animation: foldedCallViewFold .3s 1;
}
#im-phone-folded-call-view.im-phone-folded-call-view-unfold {
-webkit-animation: foldedCallViewUnfold .3s 1;
animation: foldedCallViewUnfold .3s 1;
}
@-webkit-keyframes callViewOpacityTo1Delay { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; }}
@keyframes callViewOpacityTo1Delay { 0% { opacity: 0;} 50% { opacity: 0; } 100% { opacity: 1; }}
@-webkit-keyframes foldedCallViewFold { from { bottom: -90px; } to { bottom: 0; }}
@keyframes foldedCallViewFold { from { bottom: -90px; } to { bottom: 0; }}
@-webkit-keyframes foldedCallViewUnfold { from { bottom: 0; } to { bottom: -90px; }}
@keyframes foldedCallViewUnfold { from { bottom: 0; } to { bottom: -90px; }}
@-webkit-keyframes callViewFold {
0% {
-webkit-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
opacity: 1;
}
100% {
-webkit-transform: translateY(1000px) translateX(-1000px) scaleX(0) scaleY(0);
transform: translateY(500px) translateX(-500px) scaleX(0) scaleY(0);
opacity: 0;
}
}
@keyframes callViewFold {
0% {
-webkit-transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
transform: translateY(0) translateX(0) scaleX(1) scaleY(1);
opacity: 1;
}
100% {
-webkit-transform: translateY(500px) translateX(-500px) scaleX(0) scaleY(0);
transform: translateY(500px) translateX(-500px) scaleX(0) scaleY(0);
opacity: 0;
}
}
@-webkit-keyframes miniCallClose {
0% {
-webkit-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0);
opacity: 1;
}
54% {
-webkit-transform: translateZ(-160px) rotateX(87deg);
transform: translateZ(-160px) rotateX(87deg);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-800px) rotateX(90deg);
transform: translateZ(-800px) rotateX(90deg);
opacity: 0;
}
}
@keyframes miniCallClose {
0% {
-webkit-transform: translateZ(0) rotateX(0);
transform: translateZ(0) rotateX(0);
opacity: 1;
}
54% {
-webkit-transform: translateZ(-160px) rotateX(87deg);
transform: translateZ(-160px) rotateX(87deg);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-800px) rotateX(90deg);
transform: translateZ(-800px) rotateX(90deg);
opacity: 0;
}
}
Zerion Mini Shell 1.0