body{
	margin:0;
	padding:0;
	background:#F9F9F9;
	position: relative;
	display: flex;
	/*height:100vh;*/
	color:var(--color-text-default);
}
*:focus{outline: none;}
a,a:focus,a:active,a:visited{text-decoration: none; outline: none;}
.hidden{display: none !important;}

.border-0{border:none !important;}
.border-1{border:1px solid red !important;}

/* Text */
.text-center{text-align: center !important;}
.text-right{text-align: right !important;}
.text-light{font-weight: 300 !important;}
.text-normal{font-weight: 400 !important;}
.text-medium{font-weight: 500 !important;}
.text-semibold{font-weight: 600 !important;}
.text-bold{font-weight: 700 !important;}
.text-blink {animation: blinker 1s linear infinite;}
@keyframes blinker {  
  50% { opacity: 0; }
}

/* Margin */
.margin-0{margin:0px !important;}
.margin-8{margin:8px !important;}
.margin-16{margin:16px !important;}
.margin-v-0{margin-top:0px !important; margin-bottom: 0px !important;}
.margin-v-8{margin-top:8px !important; margin-bottom: 8px !important;}
.margin-v-16{margin-top:16px !important; margin-bottom: 16px !important;}
.margin-h-0{margin-left:0px !important; margin-right:0px !important;}
.margin-h-8{margin-left:8px !important; margin-right:8px !important;}
.margin-h-16{margin-left:16px !important; margin-right:16px !important;}
.margin-top-0{margin-top:0px !important;}
.margin-top-8{margin-top:8px !important;}
.margin-top-16{margin-top:16px !important;}
.margin-bottom-0{margin-bottom:0px !important;}
.margin-bottom-8{margin-bottom:8px !important;}
.margin-bottom-16{margin-bottom:16px !important;}
.margin-left-0{margin-left: 0px !important;}
.margin-left-8{margin-left: 8px !important;}
.margin-left-16{margin-left: 16px !important;}
.margin-right-0{margin-right: 0px !important;}
.margin-right-8{margin-right: 8px !important;}
.margin-right-16{margin-right: 16px !important;}

/* Padding */
.padding-0{padding:0px !important;}
.padding-8{padding:8px !important;}
.padding-16{padding:16px !important;}
.padding-v-0{padding-top:0px !important; padding-bottom: 0px !important;}
.padding-v-8{padding-top:8px !important; padding-bottom: 8px !important;}
.padding-v-16{padding-top:16px !important; padding-bottom: 16px !important;}
.padding-h-0{padding-left:0px !important; padding-right:0px !important;}
.padding-h-8{padding-left:8px !important; padding-right:8px !important;}
.padding-h-16{padding-left:16px !important; padding-right:16px !important;}
.padding-top-0{padding-top:0px !important;}
.padding-top-8{padding-top:8px !important;}
.padding-top-16{padding-top:16px !important;}
.padding-bottom-0{padding-bottom:0px !important;}
.padding-bottom-8{padding-bottom:8px !important;}
.padding-bottom-16{padding-bottom:16px !important;}
.padding-left-0{padding-left: 0px !important;}
.padding-left-8{padding-left: 8px !important;}
.padding-left-16{padding-left: 16px !important;}
.padding-right-0{padding-right: 0px !important;}
.padding-right-8{padding-right: 8px !important;}
.padding-right-16{padding-right: 16px !important;}


/* SIDEBAR AGENT */
.mdc-tab-bar.mdc-theme--dark .mdc-tab:not(.mdc-tab--active) .mdc-tab__icon{
	color:#fff;
}
.mdc-tab-bar--sidebar{
	position: relative;
	margin-left:-1px;
	text-align: center;
}
.mdc-tab-bar--sidebar .tab-content,
.mdc-tab-bar--sidebar .tab-content--no-tab{
	border:1px solid transparent;
	color:#fff;
	font-size: var(--mdc-typography-text-field-font-size);
	height: calc(100vh - 194px);
	max-height: calc(100vh - 194px);
	background-color: rgba(0,0,0,.3);
}
.mdc-tab-bar--sidebar .mdc-list{
	padding:0;
	margin-left:-1px;
	margin-bottom: 12px;
}
.mdc-tab-bar--sidebar .mdc-list-item{
	margin:0 !important;
	border-radius: 0;
	padding:4px 16px;
	text-align:left;
	border-bottom: 1px solid rgba(255,255,255,.05);
}
.mdc-tab-bar--sidebar .mdc-list-item .mdc-list-item__primary-text{
	margin-top:-12px;
	color:var(--mdc-theme-primary);
	font-weight: 500;
}
.mdc-tab-bar--sidebar .mdc-list-item .mdc-list-item__graphic,
.mdc-tab-bar--sidebar .mdc-list-item:not(.mdc-list-item--activated) .mdc-list-item__secondary-text,
.mdc-tab-bar--sidebar .mdc-list-item:not(.mdc-list-item--activated) .mdc-list-item__third-text{
	color:rgba(255, 255, 255, .4);
}
.mdc-tab-bar--sidebar .mdc-list-item:not(.mdc-list-item--activated) .mdc-list-item__text{
	color:rgba(255,255,255,.8);
}
.mdc-tab-bar--sidebar .mdc-list-item .mdc-list-item__secondary-text,
.mdc-tab-bar--sidebar .mdc-list-item:not(.mdc-list-item--activated) .mdc-list-item__third-text{
	font-size: 11px !important
}
.mdc-tab-bar--sidebar .mdc-list-item{
	height: auto;
}
.mdc-tab-bar--sidebar .mdc-list-item.mdc-list-item--active{
	background-color: rgba(0,0,0,.25)
}
.tab-content--title{
	border-bottom:1px solid rgba(255, 255, 255, .1);
	height: 46px;
	padding-left:16px;
	padding-right: 16px;
	display: flex;
	align-items: center;
	position: relative; 
	color:var(--color-text-light);
}
.search-contact--input{
	border: none;
	width: calc(100% - 62px);
/*	width: calc(100% - 96px);*/
	font-size: 12px;
	font-family: var(--mdc-typography-font-family);
	background-color: transparent;
	color:rgba(255, 255, 255, .9);
	letter-spacing: 0;
	padding:8px 24px 8px 38px;
	border-radius: 50px;
	background-color: rgba(255, 255, 255, .2);
}
.search-contact--input[disabled]{
	opacity: .5;
	cursor: not-allowed;
}
.search-contact .material-icons{
	/*opacity: 0.3;*/
	position: absolute;
	margin-left: 8px;
	color:rgba(255, 255, 255, .3);
}
.search-contact--loader{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJICAgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDQwIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJICA8cGF0aCBvcGFjaXR5PSIwLjIiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0Ng0KCQlzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNA0KCQljMC02LjQyNSw1LjIwOS0xMS42MzQsMTEuNjM0LTExLjYzNGM2LjQyNSwwLDExLjYzMyw1LjIwOSwxMS42MzMsMTEuNjM0QzMxLjgzNCwyNi41NDEsMjYuNjI2LDMxLjc0OSwyMC4yMDEsMzEuNzQ5eiIvPg0KCSAgPHBhdGggZmlsbD0icmdiYSgwLDAsMCwwLjQpIiBkPSJNMjYuMDEzLDEwLjA0N2wxLjY1NC0yLjg2NmMtMi4xOTgtMS4yNzItNC43NDMtMi4wMTItNy40NjYtMi4wMTJoMHYzLjMxMmgwDQoJCUMyMi4zMiw4LjQ4MSwyNC4zMDEsOS4wNTcsMjYuMDEzLDEwLjA0N3oiPg0KCQk8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiDQoJCSAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KCQkgIHR5cGU9InJvdGF0ZSINCgkJICBmcm9tPSIwIDIwIDIwIg0KCQkgIHRvPSIzNjAgMjAgMjAiDQoJCSAgZHVyPSIwLjVzIg0KCQkgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+DQoJCTwvcGF0aD4NCgkgIDwvc3ZnPg==");
	background-position: 91% 50%;
	background-repeat: no-repeat;
}
.preloader-contact{
	position: absolute;
	top:40px;
	bottom: 0;
	left:0;
	right:0;
	border:0px solid red;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJICAgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDQwIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJICA8cGF0aCBvcGFjaXR5PSIwLjIiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0Ng0KCQlzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNA0KCQljMC02LjQyNSw1LjIwOS0xMS42MzQsMTEuNjM0LTExLjYzNGM2LjQyNSwwLDExLjYzMyw1LjIwOSwxMS42MzMsMTEuNjM0QzMxLjgzNCwyNi41NDEsMjYuNjI2LDMxLjc0OSwyMC4yMDEsMzEuNzQ5eiIvPg0KCSAgPHBhdGggZmlsbD0icmdiYSgwLDAsMCwwLjQpIiBkPSJNMjYuMDEzLDEwLjA0N2wxLjY1NC0yLjg2NmMtMi4xOTgtMS4yNzItNC43NDMtMi4wMTItNy40NjYtMi4wMTJoMHYzLjMxMmgwDQoJCUMyMi4zMiw4LjQ4MSwyNC4zMDEsOS4wNTcsMjYuMDEzLDEwLjA0N3oiPg0KCQk8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiDQoJCSAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KCQkgIHR5cGU9InJvdGF0ZSINCgkJICBmcm9tPSIwIDIwIDIwIg0KCQkgIHRvPSIzNjAgMjAgMjAiDQoJCSAgZHVyPSIwLjVzIg0KCQkgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+DQoJCTwvcGF0aD4NCgkgIDwvc3ZnPg==");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #242424;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: center
}
.list-contacts-call-info{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.useragent{
	display: flex;
	flex-direction: column;
	padding:12px;
	background-color: rgba(255,255,255,1);
	margin:0 16px 16px;
	border-radius: 16px;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);
	font-size: 14px;
}
.useragent-info{
	display: flex;
	align-items: flex-start;
}
.useragent-thumbnail{
	display: inline-block;
	border:0px solid #ffff;
	height:50px !important;
	width: 50px !important;
	border-radius: 50px;
	background-color:#f4f4f4;
	background-size:cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('../images/default-photo.png');
	margin-right: 12px;
	/*position: relative;
	z-index: 1;
	box-shadow: 0px 0px 0px 2px #E0E0E0 inset;*/
}
.useragent-details{
	max-width: calc(100% - 62px)
}
.useragent-name{
	font-size: 12px;
	font-weight: 500;
	margin:0;
	display: block;
	margin-bottom: 8px;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;*/
    max-width: 100%;
}
.useragent-status{
	border-radius: 50px;
	padding:4px 12px;
	display: inline-block;
	font-size: 11px;
	background-color: #E0E0E0;
	font-weight: 400;
	min-width: 50px;
	text-align: center;
	/*position: relative;
	z-index: 0;
	margin-left:-50px;
	padding-left:50px;
	min-width: 50px;
	margin-top:2px;*/
}
.useragent-status--online{
	background-color: var(--mdc-theme-green);
	color:#fff;
}
.useragent-status--aux{
	background-color: var(--mdc-theme-red);
	color:#fff;
}
.useragent-action{
	padding-top:16px;
	display: flex;
	justify-content: space-between;
}

.useragent-aux-info{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	margin-top: -4px;
	color:var(--mdc-theme-red);
}
.useragent-aux-info div{
	font-size: 16px;
	font-weight: 500;
}

/* MDC DIALER ON SIDEBAR */
.mdc-dialer{
	position: relative;
	/*border:1px solid red;*/
	height: inherit;
}
.mdc-dialer--off{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsb2FkZXItMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJICAgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDQwIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MCA0MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQoJICA8cGF0aCBvcGFjaXR5PSIwLjIiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yMC4yMDEsNS4xNjljLTguMjU0LDAtMTQuOTQ2LDYuNjkyLTE0Ljk0NiwxNC45NDZjMCw4LjI1NSw2LjY5MiwxNC45NDYsMTQuOTQ2LDE0Ljk0Ng0KCQlzMTQuOTQ2LTYuNjkxLDE0Ljk0Ni0xNC45NDZDMzUuMTQ2LDExLjg2MSwyOC40NTUsNS4xNjksMjAuMjAxLDUuMTY5eiBNMjAuMjAxLDMxLjc0OWMtNi40MjUsMC0xMS42MzQtNS4yMDgtMTEuNjM0LTExLjYzNA0KCQljMC02LjQyNSw1LjIwOS0xMS42MzQsMTEuNjM0LTExLjYzNGM2LjQyNSwwLDExLjYzMyw1LjIwOSwxMS42MzMsMTEuNjM0QzMxLjgzNCwyNi41NDEsMjYuNjI2LDMxLjc0OSwyMC4yMDEsMzEuNzQ5eiIvPg0KCSAgPHBhdGggZmlsbD0icmdiYSgwLDAsMCwwLjQpIiBkPSJNMjYuMDEzLDEwLjA0N2wxLjY1NC0yLjg2NmMtMi4xOTgtMS4yNzItNC43NDMtMi4wMTItNy40NjYtMi4wMTJoMHYzLjMxMmgwDQoJCUMyMi4zMiw4LjQ4MSwyNC4zMDEsOS4wNTcsMjYuMDEzLDEwLjA0N3oiPg0KCQk8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVUeXBlPSJ4bWwiDQoJCSAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIg0KCQkgIHR5cGU9InJvdGF0ZSINCgkJICBmcm9tPSIwIDIwIDIwIg0KCQkgIHRvPSIzNjAgMjAgMjAiDQoJCSAgZHVyPSIwLjVzIg0KCQkgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+DQoJCTwvcGF0aD4NCgkgIDwvc3ZnPg==");
    background-position: center 44%;
    background-repeat: no-repeat;
    background-color:#242424;
}
.mdc-dialer--off:before{
	content:"Connecting";
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: blinker 1s linear infinite;
	-webkit-animation: blinker 1s linear infinite;
	opacity: .3;
}
.mdc-dialer--keypad{
	padding:16px 0;
}
.mdc-dialer--keypad-input{
	font-size: 24px;
	width: 90%;
	background-color: transparent;
	color:#fff;
	font-family: var(--mdc-typography-font-family);
	text-align: center;
	font-weight: 300;
	border:0px solid rgba(0,0,0,.08);
	caret-color:var(--mdc-theme-primary);
	color:var(--mdc-theme-primary);
	margin-bottom: 16px;
	margin-top:8px;
}
.mdc-dialer--keypad-input::placeholder{
	color:#fff;
	opacity: 0.2;
}
.mdc-dialer--keypad-number-group{
	display: flex;
	justify-content: center
}
.mdc-dialer .mdc-icon-button.mdc-button--pad{
	min-width:56px;
	width:56px;
	height:56px;
	font-size: 24px;
	font-weight: 400;
	border-radius: 50px;
	color: rgba(255, 255, 255, .4)
}
.mdc-dialer--keypad .mdc-icon-button.mdc-button--pad:not(.material-icons){
	font-family: var(--mdc-typography-font-family);
	margin-bottom: 4px;
}

.mdc-dialer--screen-header{
	height: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:16px 0;
	transition:height .3s cubic-bezier(.75,.12,.39,1.02);
}
.mdc-dialer--screen--thumbnail,
.mdc-dialer-indicator--thumbnail{
	border:2px solid rgba(255, 255, 255, .3);
	height:80px;
	width:80px;
	border-radius: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: scale(1.4);
	transition:all .1s ease-in;
}
.mdc-dialer--screen--thumbnail .material-icons,
.mdc-dialer-indicator--thumbnail .material-icons{
	font-size: 40px;
}
.mdc-dialer--screen--thumbnail:before,
.mdc-dialer--screen--thumbnail:after{
	content: "";
	position: absolute;
	height: 80px;
	width: 80px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 100px;
	animation: 1s flairanimationbefore linear infinite;
	-webkit-animation: 1s flairanimationbefore linear infinite;
}
.mdc-dialer--screen--thumbnail:before{
	animation-delay: .5s;
}
@-webkit-keyframes flairanimationbefore {
  0%   {transform: scale(1); opacity: 1;}
  100% {transform: scale(1.8); opacity: 0;}
}
@keyframes flairanimationbefore {
  0%   {transform: scale(1); opacity: 1;}
  100% {transform: scale(1.6); opacity: 0;}
}
.mdc-dialer--screen-info{
	display: flex;
	flex-direction: column;
	font-size:14px;
	margin-bottom:16px;
}
.mdc-dialer--screen-info span{
	margin-bottom:6px;
}
.mdc-dialer--screen-status{
	opacity: .7;
	font-weight: 300;
	margin-top:8px;
}
.mdc-dialer--screen-name{
	font-weight: 500;
	color:var(--mdc-theme-primary);
}
.mdc-dialer--screen-number{
	font-weight: 300;
	font-size:20px;
	margin-bottom: 4px !important;
}
.mdc-dialer--screen-duration{
	font-weight: 300;
	margin-top:8px;
	font-size:28px;
	transform: scale(0);
	height: 0px;
	min-height: 0px;
	transition:all .3s cubic-bezier(.75,.12,.39,1.02);
}
.mdc-dialer--screen-actions{
	padding-bottom: 18px;
}
.mdc-dialer--screen-actions .mdc-icon-button.mdc-button--pad{
	color:#fff;
}
.mdc-dialer--screen-actions .mdc-icon-button.mdc-button--pad:not(.mdc-theme--red){
	transform: scale(0);
	height:0;
	transition:all .3s cubic-bezier(.75,.12,.39,1.02);
}
.mdc-dialer--keypad,
.mdc-dialer--screen{
	position: absolute;
	width: 100%;
	transform: scale(0,0);
	transform-origin: 50% 100%;
	overflow: hidden;
	transition:all .3s cubic-bezier(.75,.12,.39,1.02);
}

.mdc-dialer--idle .mdc-dialer--keypad,
.mdc-dialer--dialing .mdc-dialer--screen,
.mdc-dialer--ringing .mdc-dialer--screen,
.mdc-dialer--connected .mdc-dialer--screen,
.mdc-dialer--failed .mdc-dialer--screen{
	transform: scale(1,1);
}
.mdc-dialer--dialing .mdc-dialer--keypad{
	transform: scale(0,0);
}
.mdc-dialer--ringing .mdc-dialer--screen--thumbnail{
	background-color: var(--mdc-theme-yellow);
}
.mdc-dialer--connected .mdc-dialer--screen-header{
	height:140px;
}
.mdc-dialer--connected .mdc-dialer--screen--thumbnail{
	transform: scale(1);
	background-color: var(--mdc-theme-green);
}
.mdc-dialer--connected .mdc-dialer--screen-duration,
.mdc-dialer--connected .mdc-dialer--screen-actions .mdc-icon-button.mdc-button--pad:not(.mdc-theme--red){
	transform: scale(1);
	min-height: 35px;
	transition-delay: .2s;
}
.mdc-dialer--failed .mdc-dialer--screen--thumbnail{
	background-color: var(--mdc-theme-red);
}


/* DIALER PORTABLE */
.mdc-dialer-portable{
	position: fixed;
	left:8px;
	bottom:-96px;
	width: calc(256px - 16px);
	/*border:1px solid red;*/
	z-index: 10;
	transition: bottom .2s ease-out
}
.mdc-dialer-portable.active{
	bottom:8px;
}
.mdc-dialer-portable--container{
	position: relative;
	overflow: hidden;
	/*border: 1px solid black;*/
	width: 100%;
	/*height: 80px;*/
	border-radius: 4px;
	background: #333;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.mdp-top, .mdp-bottom{
	display: flex;
	height: 46px;
	/*border:1px solid red;*/
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--mdc-typography-text-field-font-size);
	color:rgba(255, 255, 255, .7);
	padding:0 16px;
}
.mdp-top{
	background: rgba(0,0,0,0.2);
}
.mdp-action{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mdp-number{
	color: var(--mdc-theme-green);
}


/* MONITORING SPV */
 .monitoring-wallboard .mdc-panel--header{
	justify-content: flex-start;
	background-color:#A9AFBB;
	border:none;
}
.monitoring-wallboard .mdc-panel--thumbnail{
	height:40px;
	width: 40px;
	min-width: 40px;
	border-radius: 50px;
	margin-right:12px;
	background-image: url('../images/default-photo.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	box-shadow: 0px 0px 0px 1px #fff
}
.monitoring-wallboard .mdc-panel--header-info{
	display: block;
	width: calc(100% - 54px);
	color: #fff;
}
.monitoring-wallboard .mdc-panel--title{
	display: inline-block;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    width: 100%;
    font-size: 12px;
}
.monitoring-wallboard .mdc-panel--subtitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 10px;
	font-weight: 400;
	width: 100%;
	margin-top:-2px;
	height: 18px;
	text-transform: uppercase;
}
.monitoring-wallboard .mdc-panel--subtitle span.mw-duration{
	float:right;
	padding:2px 6px;
	border-radius: 50px;
	background-color: #fff;
	color:var(--color-text-default);
	display: none;
}
.monitoring-wallboard .mdc-panel--body{
	padding:8px 16px;
}
.monitoring-wallboard .mdc-panel--body .form-group{
	margin-bottom: 8px
}
.monitoring-wallboard .mdc-panel--footer{
	border-top:0px solid rgba(0,0,0,.08);
	padding-bottom: 0px
}
.monitoring-wallboard .mdc-panel--media-counter{
	display: block;
	font-weight: 500;
}
.monitoring-wallboard .mdc-panel--media-counter-title{
	font-size: 11px;
	color:var(--color-text-light);
}

.monitoring-wallboard.monitoring-wallboard--idle .mdc-panel--header{background-color:var(--mdc-theme-blue);}
.monitoring-wallboard.monitoring-wallboard--calling .mdc-panel--header{background-color:var(--mdc-theme-yellow);}
.monitoring-wallboard.monitoring-wallboard--on-talk .mdc-panel--header{background-color:var(--mdc-theme-green);}
.monitoring-wallboard.monitoring-wallboard--aux .mdc-panel--header{background-color:var(--mdc-theme-red);}


.monitoring-wallboard.monitoring-wallboard--on-talk span.mw-duration{color:var(--mdc-theme-green);}
.monitoring-wallboard.monitoring-wallboard--aux span.mw-duration{color:var(--mdc-theme-red);}

.monitoring-counter{
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.monitoring-counter--number{
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 8px
}
.monitoring-counter--title{
	font-size: 11px;
	color:var(--color-text-light);
	font-weight: 400;
	text-transform: uppercase;
}
.monitoring-search-field{
	position: relative;
}
.monitoring-search-field input{
	border:none;
	border-radius: 100px;
	padding:8px 40px 8px 40px;
	font-family: inherit;
	width: calc(100% - 80px);
	color: var(--color-text-default);
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);
	font-size: 12px;
	background-color:rgba(255,255,255,.6);
	transition: background-color .2s
}
.monitoring-search-field input:focus{
	background-color:rgba(255,255,255,1);
}
.monitoring-search-field .material-icons{
	position: absolute;
	left:10px;
	top:4px;
	opacity: .5
}
.monitoring-search-field--loader{
	background-image: url('../images/circular-loader.gif');
	background-position: 98% 50%;
	background-repeat: no-repeat;
	background-size:24px 24px;
}