body {
	margin: 0;
	padding: 0;
	font-family: Roboto;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: 0.48px;
	overflow: hidden;
}

html, body {
	height: 100%;
}

*:focus, *:active { outline: none !important; }

.align-right {
	text-align: right;
}


/* LAYOUT */

#call-taking-interface #main-interface {
	width: 100%;
	min-height: 100%;
	height: 100%;
}

.flexbox {
	display: flex;
	width: 100%;
/*	flex-wrap: wrap; */
}

.flexbox .flex-5 {
	flex: 1 0 5%;
	min-width: 0;
}

.flexbox .flex-10 {
	flex: 1 0 10%;
	min-width: 0;
}

.flexbox .flex-15 {
	flex: 1 0 10%;
	min-width: 0;
}

.flexbox .flex-20 {
	flex: 1 1 20%;
	min-width: 0;
}

.flexbox .flex-25 {
	flex: 1 1 25%;
	min-width: 0;
}

.flexbox .flex-30 {
	flex: 1 0 30%;
	min-width: 0;
}

.flexbox .flex-35 {
	flex: 1 0 35%;
	min-width: 0;
}

.flexbox .flex-40 {
	flex: 1 0 40%;
	min-width: 0;
}

.flexbox .flex-50 {
	flex: 1 0 50%;
	min-width: 0;
}

.flexbox .flex-60 {
	flex: 1 0 60%;
	min-width: 0;
}

.flexbox .flex-70 {
	flex: 1 1 70%;
	min-width: 0;
}

.flexbox .flex-75 {
	flex: 1 1 75%;
	min-width: 0;
}

.flexbox .flex-80 {
	flex: 1 1 80%;
	min-width: 0;
}

.flexbox .flex-90 {
	flex: 1 1 90%;
	min-width: 0;
}

.flexbox .flex-100 {
	flex: 1 1 100%;
	min-width: 0;
}
.text-overflow {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#call-taking-interface i.icon-flipped {
	transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
}

#call-taking-interface i.rotate-135 {
	filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.5);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
	display: inline-block;
}


/* SPECIAL */

.introjs-helperNumberLayer {
	display: none;
}

.user-tip {
	padding-top: 100px;
	text-align: center;
	opacity: 0.6;
}

.user-tip h1 {
	color: #4557e5;
	font-size: 5em;
}

.user-tip div {
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
}

.user-tip i {
	font-size: 18em;
	color: #7f01ff;
	float: left;
}

.user-tip div.text {
	font-size: 1.5em;
	color: #4557e5;
	padding-left: 20%;
	padding-right: 20%;
	padding-top: 80px;
}

.user-tip div.hide-tips {
	padding: 0;
	margin: 0;
	text-align: center;
	padding-top: 100px;
}


/* SCROLLBARS */

::-webkit-scrollbar {
	width: 8px;
	height: 2px;
}

::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}

::-webkit-scrollbar-thumb {
	background: #cccccc;
	border: 0px none #ffffff;
}

::-webkit-scrollbar-thumb:hover {
	background: #666666;
}

::-webkit-scrollbar-thumb:active {
	background: #444444;
}

::-webkit-scrollbar-track {
	background: #e1e1e1;
	border: 0px none #ffffff;
	border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
	background: #e1e1e1;
}

::-webkit-scrollbar-track:active {
	background: #e1e1e1;
}

::-webkit-scrollbar-corner {
	background: transparent;
}


/* COMMON ELEMENTS */

a {
	cursor: pointer;
	color: #4557e5;
}


button {
	border: none;
}

button:focus {
	outline: 0;
}

button:active {
	outline: none;
	border: none;
}

.btn {
	text-transform: uppercase;
	background-color: #ffffff;
	border: 0;
	min-width: 102px;
	height: 31px;
	font-size: 12px;
	border-radius: 4px;
}

.btn-primary {
	background-color: #4557e5 !important;
	color: #ffffff !important;
}

.btn-primary:hover {
	background-color: #3547d5;
}

.tooltip-inner {
	padding: 10px;
	font-size: 8pt;
	font-weight: 600;
	text-transform: uppercase;
}

.tooltip.right .tooltip-arrow {
	display: none;
}

i.icon-action {
	margin: 5px;
	display: inline-block;
	font-size: 1.4em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 50%;
	background-color: #f4f7f9;
	vertical-align: middle;
	color: #000000;
	cursor: pointer;
}

i.icon-action:hover {
	background-color: #eef6ff;
	color: #4557e5;
}

i.icon-action.active {
	color: #ff4f59;
	background-color: #ffdbdd;
}

i.icon-action.active:hover {
	color: #ffffff;
	background-color: #ff4f59;
}



/* SIDEBAR */

#call-taking-interface #sidebar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 59px;
	border-right: 1px solid #e0e0e0;
	background-color: #ffffff;
	z-index: 999999;
	transition: all 100ms ease;
}

#call-taking-interface #sidebar.expanded {
	width: 250px;
}

#call-taking-interface #sidebar div {
	cursor: pointer;
	padding-top: 20px;
	padding-bottom: 20px;
}

#call-taking-interface #sidebar i {
	margin-left: 17px;
	margin-right: 5px;
}

#call-taking-interface #sidebar span {
	text-transform: uppercase;
	position: relative;
	top: -7px;
	left: 10px;
}

#call-taking-interface #sidebar div:hover, #call-taking-interface #sidebar div.active {
	background-color: #eef6ff;
	color: #4557e5;
}


/* HEADER */

#call-taking-interface #header {
	height: 80px;
	border-bottom: 1px solid #e0e0e0;
}

#call-taking-interface #header .trial {
	padding-left: 70px;
	padding-top: 34px;	
	min-width: 310px;
}

#call-taking-interface #header .trial span {

}

#call-taking-interface #header a {
	color: #ff9900;
}

#call-taking-interface #header .logo {
	margin-top: 18px;
	height: 35px;
	width: auto;	
}

#call-taking-interface #header .branding {
	min-width: 315px;
	height: 100%;
	align-items: center;
	display: flex;
}

.branding > img {
	max-height: 80%;
	width: auto;
}

#call-taking-interface #header .dropdown-content {
	top: 55px !important;
}

@-moz-document url-prefix() {
	#call-taking-interface #header .dropdown-content {
		top: 25px !important;
	}
}

#call-taking-interface #header .account-icons {
	max-width: 240px;
}

#call-taking-interface #header .account-profile {
	text-align: right;
	padding-top: 10px;
	padding-right: 7px;
}

#call-taking-interface #header .account-profile #user-avatar {
	flex: 0;
	margin-left: auto;
	cursor: pointer;
	text-align: center;
	padding-top: 4px;
}

#call-taking-interface #header .profile-settings div {
	font-size: 12px;
	padding: 20px;
	background-color: #ffffff;
	text-align: center;
	cursor: auto;
	text-transform: uppercase;
}

#call-taking-interface #header .dropdown-content {
	top: 0;
	right: 0;
}

#call-taking-interface #header .flex-10:last-child {
	width: 100%;
	text-align: right;
}

#call-taking-interface #header .history .history-dropdown,
#call-taking-interface #header .cdr .cdr-dropdown,
#call-taking-interface #header .notifications,
#call-taking-interface #header .presence,
#call-taking-interface #header .account-profile {
	max-width: 80px;
	width: 80px;
}

#call-taking-interface #header .history-list,
#call-taking-interface #header .cdr-list,
#call-taking-interface .cdr-list,

#call-taking-interface #header .notifications-list {
	width: 500px;
	background-color: #ffffff;
	right: -95px;
	top: 65px !important;
}

#call-taking-interface #header .presence-list {
	width: 225px;
	left: -90px;
	top: 65px !important;
	background-color: #ffffff; 
	padding: 0px;
	box-shadow: 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%), 0 5px 5px -3px rgb(0 0 0 / 20%);
}

#call-taking-interface #header .presence-list .presence-item {
	padding: 10px;
	font-size: 14px;
	cursor: pointer;
	margin:0
}

#call-taking-interface #header .presence-list .presence-item .presence-name {
	margin-top:7px;
}

#call-taking-interface #header .presence-list .presence-item span i {
	font-size: 13px;
	padding: 10px;
}

#call-taking-interface #header .presence-list .presence-item.Available span {
	color: green;
}

#call-taking-interface #header .presence-list .presence-item.Busy span {
	color: red ;
}

#call-taking-interface #header .presence-list .presence-item.Away span {
	color: darkgoldenrod;
}

#call-taking-interface #header .presence-list .presence-item.Offline span {
	color: gray;
}

#call-taking-interface #header .presence-list .presence-item:hover {
	background: #eeeeee;
}

#call-taking-interface #header #history-dropdown,
#call-taking-interface #header #cdr-dropdown,
#call-taking-interface #header #presence-dropdown,
#call-taking-interface #header #notifications-dropdown {
	padding-top: 24px;
}

#call-taking-interface #header #history-dropdown i,
#call-taking-interface #header #cdr-dropdown i,
#call-taking-interface #header #presence-dropdown i,
#call-taking-interface #header #notifications-dropdown i {
	font-size: 3.1em;
	cursor: pointer;
}

#call-taking-interface #header .history-list .title,
#call-taking-interface #header .cdr-list .title,
#call-taking-interface .cdr-list .title {
	text-transform: uppercase;
	padding: 20px;
}

#call-taking-interface #header .history-item,
#call-taking-interface #header .cdr-item,
#call-taking-interface .cdr-item {
	padding: 13px;
}

#call-taking-interface #header .history-item .call-type,
#call-taking-interface #header .cdr-item .call-type,
#call-taking-interface .cdr-item .call-type {
	border-right: 0px solid #000000;
	padding-top: 5px;
}

#call-taking-interface #header .history-item .call-type i,
#call-taking-interface #header .cdr-item .call-type i,
#call-taking-interface .cdr-item .call-type i {
	margin-left: 0px;
    font-size: 2.0em;
}

#call-taking-interface #header .history-item .call-type i,
#call-taking-interface #header .cdr-item .call-type .direction i,
#call-taking-interface .cdr-item .call-type .direction i {
	margin-left: 20px;
    font-size: 1.2em;
	font-weight: bold;
}

#call-taking-interface #header .cdr-item .call-type .direction,
#call-taking-interface .cdr-item .call-type .direction {
	margin-top: -32px;
	margin-left: -8px;
}

#call-taking-interface #header .history-item .info,
#call-taking-interface #header .cdr-item .info,
#call-taking-interface .cdr-item .info {
	 /* padding-left: 20px; */
}

#call-taking-interface #header .history-item .actions,
#call-taking-interface #header .cdr-item .actions,
#call-taking-interface .cdr-item .actions {
	text-align: right;
    padding-right: 20px;
}

#call-taking-interface #header .history-item .actions i,
#call-taking-interface #header .cdr-item .actions i,
#call-taking-interface .cdr-item .actions i {

	background-color: rgba(99, 217, 215, 0.2);
	cursor: pointer;
    border-radius: 50%;
    font-size: 1.3em;
    color: #009ca4;
    padding: 8px;
}

#call-taking-interface #header .no-history,
#call-taking-interface #header .no-cdr  {
	text-align: center;
	padding: 20px;
}


#call-taking-interface #header .presence button {
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	padding: 0px 0px;
	border: 1px solid rgb(218, 220, 224);
	border-radius: 25px;
	margin-left: -85px;
	min-height: 33px;
	min-width: 130px; 
	font-size: 14px;
}

#call-taking-interface #header .presence button:hover {
	background-color: rgba(32,33,36,0.059);
}

#call-taking-interface #header .presence  .circle i {
	font-size: 0 !important;
}

#call-taking-interface #header .presence .Available i {
	color: green;
	font-size: 14px !important;
	padding-top: 8px;
}

#call-taking-interface #header .presence .Away i {
	color: darkgoldenrod;
	font-size: 14px !important;
	padding-top: 8px;
}

#call-taking-interface #header .presence .Busy i {
	color: red;
	font-size: 14px !important;
	padding-top: 8px;
}

#call-taking-interface #header .presence .Offline i {
	color: gray;
	font-size: 14px !important;
	padding-top: 8px;
}

#call-taking-interface #header .presence .name {
	padding-top: 4px;
}

#call-taking-interface #header .presence button div {
	float:right;
	padding: 0 7px;
	margin-top: 5px;
	font-weight: 500;
}

#call-taking-interface #header .presence button div i {
	font-size: 28px !important;
	position: relative;
	top: -1px;
}

/* MODALS */
.modal-dialog {
	padding-left: 65px;
}
.modal-content {
	min-width: 375px;
}

.modal-backdrop {
	background-color: #ffffff;
}

.modal .modal-header {
	background-color: #4557e5;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 0.8em;
	padding: 20px 30px;
}

.modal .modal-header.error {
	background-color: #ff9900;	
}

.modal .modal-header.success {
	background-color: #19CF9E;
}

.modal .modal-title {
	font-size: 14px;
	letter-spacing: 0.72px;
	font-weight: normal;
}

.popover-list {
	position: relative;
	background-color: #ffffff;
	box-shadow: 4px 10px 10px 4px #aaaaaa;
	z-index: 1000;
}

.modal .search {
	height: 40px;
}

.modal .search input {
	width: 100%;
	height: 40px;
	padding: 5px 5px 5px 40px;
	border: 0;
	outline: none;
	border: 1px solid #eeeeee;
}

.modal .search.has-dialpad div div:first-child {
	position:absolute;
	margin-top:8px;
	margin-left: 5px;
}

.modal .search.has-dialpad input {
	width: 100%;
}

.modal .search i.backspace {
    display: inline;
    position: relative;
    left: -10px;
    top: -32px;
    float: right;
    cursor: pointer;
	color: #174fff;
}

.modal .search i.toggle {
    cursor: pointer;
    float: right;
    position: relative;
    top: 3px;
    font-size: 1.7em;
	color: #174fff;
	background-color: #f5f7ff;
	border-radius: 50%;
	padding: 7px;
	left: 5px;
}

.modal .search i.dial {
	cursor: pointer;
    float: right;
    position: relative;
    top: 3px;
    font-size: 1.7em;
	color: #174fff;
	background-color: #f5f7ff;
	border-radius: 50%;
	padding: 7px;	
	left: 0px;
	display:none;
	margin: 0 4px;
}

.modal .search i.dial.enabled {
	display: inline;
}

.modal .search-item {
	height: 50px;
	cursor: pointer;
}

.modal .search-item .user-avatar {
	margin-top: 8px;
    margin-left: 5px;
}

.modal .search-item .name {
	padding-top: 10px;
}

.modal .search-item .icon-action, .modal .search-dialpad .icon-action {
	visibility: hidden;
	margin-top: 10px;
	background-color: rgba(99, 217, 215, 0.2);
    font-size: 1.3em;
    border: 1px solid #009ca4;
    color: #009ca4;
}

.modal .search-item:hover, .modal .search-item.active {
	background-color: #f0f6ff;
}

.modal .search-item:hover .icon-action, .modal .search-item.active .icon-action {
	visibility: visible;
}

.modal .search-item .action-list-container, .modal .search-item .action-list-container .switcher {
	display: inline;
}

.modal .search-dialpad {
	padding-top: 5px;
	margin: 0 -15px;
	border-top: 1px solid #ccc;
	box-shadow: 0 -5px 5px -3px rgb(60 64 67 / 15%);
	position: relative;
	background: #ffffff;
}
.modal .search-dialpad .actions {
	text-align: center;
}

.modal .search-dialpad .icon-action {
	visibility:hidden;
}

.modal .search-dialpad .icon-action.enabled {
	visibility: visible;
}

.modal .form .flexbox {
	padding-bottom: 20px;
}

.modal .form.full-width div {
	width: 100%;
}

.modal .form .input {
	min-width: 50%;
	padding: 5px;
}

.modal .form textarea {
	width: 100%;
	height: 150px;
	font-size: 1em;
}

.modal .form .input label {
	display: block;
	text-transform: uppercase;
	color: #7a929e;
	font-size: 10px;
}

.modal .form .input input {
	width: 100%;
	border: 0;
	padding: 5px;
	border-radius: 0;
	border: 1px solid #e0e0e0;
	font-size: 10pt;
}

.modal .form .input input:focus {
	outline: none;
}

.modal .form .input.error label {
	color: #ff0000;
}

.modal .form .input.error input {
	border-bottom: 1px solid #ff0000;
	background-color: #ffefef;
}

.modal .form .multi-item .input {
	width: 100%;
}

.modal .form .multi-item input {
	margin-bottom: 4px;
}

.modal .form .multi-item .add span {
	color: #7a929e;
	margin: 4px;
	text-transform: uppercase;
    cursor: pointer;
    font-size: 0.8em;
}

.modal .form .multi-item .error {
	border-bottom: 1px solid #ff0000;
	background-color: #ffefef;
}

.modal .form .multi-item .multi-field input {
	width: 30%;
}

.modal .form .multi-item .multi-field .fields {
	margin-bottom: 6px;
	padding-bottom: 3px;
	border-bottom: 1px solid #e0e0e0;
}

.modal .modal-body .text {
	text-align: center;
}

.modal .modal-body.text {
	text-align: center;
	padding: 30px;
}

.modal .modal-body.text div {
	padding: 10px;
	font-weight: bold;
}

.modal .task-tabs {
	height: 50px;
}

.modal .task-tabs div {
	display: inline;
	padding: 10px;
	margin-left: 20px;
	margin-right: 20px;
	cursor: pointer;
	text-transform: uppercase;
	margin-top: 20px;
	margin-bottom: 20px;
}

.modal .task-tabs div.active {
	background-color: #eef6ff;
	color: #4557e5;
}

.modal .radio-buttons input {
	width: 20px !important;
}

.modal .radio-buttons label {
	display: inline !important;
	max-width: 0;
}


.modal.start-conversation .modal-dialog {
	margin: 0 0;
	width: 25%;
	max-width: 25%;
}

.start-conversation-btn {
	height: 40px;
    padding: 5px;
    border: 0;
    outline: none;
    border: 1px solid #eeeeee;
	margin-top: -18px;
	width: 50%;
	max-width: 50%;
	margin-left: 5px;
	color: #555;
	background-color: #f5f8f9;
	min-width: 190px;
}
.start-conversation-btn div  {
	color: #555555;
	padding: 5px 5px 5px 40px;
}

.start-conversation-btn div div:first-child {
	margin-top: -2px;
	color: #555555;
	position:absolute;
	padding:0;
	margin-left: -40px;
}

/* AVATARS */

#call-taking-interface .member-avatar {
	display: inline;
}

#call-taking-interface .member-avatar img {
	width: 37px;
}

#call-taking-interface .member-avatar.large img {
	width: 60px;
}

#call-taking-interface .member-avatar.extraLarge img {
	width: 120px;
}

#call-taking-interface .member-avatar span {
	display: inline-block;
	font-size: 1.4em;
	width: 2.1em;
	height: 2.1em;
	line-height: 2.1em;
	text-align: center;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 1em;
	color: white;
	margin: 0;
}

#call-taking-interface .member-avatar.grey span {
	border: 1px solid #7a929e;
	background-color: #ffffff !important;
	color: #7a929e;
}

#call-taking-interface .member-avatar span.red {
	background-color: #ff4f59;
}

#call-taking-interface .member-avatar span.pink {
	background-color: #ff5094;
}

#call-taking-interface .member-avatar span.teal {
	background-color: #00d2f5;
}

#call-taking-interface .member-avatar span.green {
	background-color: #63d9d7;
}

#call-taking-interface .member-avatar span.blue {
	background-color: #4557e5;
}

#call-taking-interface .member-avatar span.purple {
	background-color: #7f01ff;
}

#call-taking-interface .member-avatar.large span {
	font-size: 1.5em;
	width: 3em;
	height: 3em;
	line-height: 3em;
}

#call-taking-interface .member-avatar.extraLarge span {
	font-size: 6em;
	width: 120px;
	height: 120px;
	line-height: 1.7em;
}

#call-taking-interface .member-avatar.grey .user-presence {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-left: -11px;
	margin-top: 24px;
}

#call-taking-interface .member-avatar.grey .user-presence.presence-Away {
	background-color: darkgoldenrod !important;
}
#call-taking-interface .member-avatar.grey .user-presence.presence-Available {
	background-color: green !important;
}
#call-taking-interface .member-avatar.grey .user-presence.presence-Busy {
	background-color: red !important;
}
#call-taking-interface .member-avatar.grey .user-presence.presence-Offline {
	background-color: gray!important;
}

/* PANELS / SECTIONS */

#call-taking-interface .panels {
	width: calc(100vw - 60px);
	min-height: calc(100vh - 80px);
	display: flex;
	margin-left: 60px;
}

#call-taking-interface .panel {
	padding: 0;
	margin: 0;
	height: calc(100vh - 80px);
	border: 0;
}

#call-taking-interface .panel .section {
	height: 100%;
	border-bottom: 1px solid #e0e0e0;
}

#call-taking-interface .panel .section .title {
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #e0e0e0;
}

#call-taking-interface .panel .section .title div {
	padding-top: 14px;
}

#call-taking-interface .panel .section .title div span {
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	padding: 5px;
	padding-left: 12px;
}

#call-taking-interface .panel .section .title .actions {
	float: right;
}

#call-taking-interface .panel .section .title .actions i {
	margin-right: 10px;
	cursor: pointer;
	color: #174fff;
	background-color: #f5f7ff;
	position: relative;
	top: -5px;
	font-size: 2.3em;
	border-radius: 50%;
	padding: 4px;
}

#call-taking-interface .panel .section .filter input {
	width: 100%;
	padding: 8px;
	border: 1px solid #e0e0e0;
	border-top: none;
	border-right: none;
	outline: none;
	height: 35px;
}

#call-taking-interface .panel .section .scrollable {
	max-height: calc(100% - 52px);
	overflow-y: auto;
	padding-bottom: 20px;
}

#call-taking-interface .panel .section .scrollable-with-filter {
	max-height: calc(100% - 77px);
	overflow-y: auto;
	padding-bottom: 20px;
}

#call-taking-interface .panel .section .empty-message {
	padding-top: 15px;
	text-align: center;
}

/* SIDEBAR LISTS */

#call-taking-interface .panel .sidebar-list {
	overflow-y: auto;
    height: calc(100vh - 130px);
}

#call-taking-interface .panel .sidebar-list h1 {
	font-size: 1em;
	text-transform: uppercase;
	margin-top: 30px;
	padding-left: 15px;
}

#call-taking-interface .panel .sidebar-list a {
	font-size: 0.9em;
	display: block;
	color: #7a929e;
	font-weight: normal;
	text-transform: uppercase;
	padding: 12px;
	padding-left: 35px;
}

#call-taking-interface .panel .sidebar-list.no-uppercase a {
	text-transform: none;
}

#call-taking-interface .panel .sidebar-list a.active, #call-taking-interface .panel .sidebar-list a:hover, #call-taking-interface .panel .sidebar-list div:hover {
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0px 1px 2px 0px rgba(0,50,100,0.2);
	background-color: #eef6ff;
	color: #4557e5;
}

#call-taking-interface .panel .sidebar-list i:hover {
	color: gold !important;
	
}

/* CHECKBOXES */


#call-taking-interface .checkmark {
	position: relative;
	left: 10px;
	height: 20px;
	width: 20px;
	border: 1px solid #009eff;
	background-color: #ffffff;
	cursor: pointer;
}

#call-taking-interface .checkmark:hover {
	background-color: #009eff
}

#call-taking-interface .checkmark.active {
	background-color: #009eff;
}

#call-taking-interface .checkmark.active:after {
	display: block;
}

#call-taking-interface .checkmark:after {
	content: "";
	position: absolute;
	display: none;
	left: 7px;
	top: 3px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* SWITCH CHECKBOXES */

.form-group {
	padding-left: 0.667em;
	padding-right: 0.333em;
	display: flex;
	align-items: flex-start;
	flex-flow: row wrap;
	justify-content: space-between;
	height: 50px;
	width: 400px;
}

.form-group:hover {
	
}

.form-group label  {
	font-size: 14px;
	font-weight: 500;
	margin-top: 14px;
}

.form-group .checkbox > label {
	background: #ffdbdd;
    border: none;
	color: #ffdbdd;
    -webkit-border-radius: 1em;
    -o-border-radius: 1em;
    -ms-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    margin: 0 10px;
    width: 4.5em;
	height: 25px;
	min-height: 20px;
	font-size: 12px;
}

.form-group .checkbox > input[type="checkbox"][checked] + label {
	background:#63d9d7;    
}

.form-group .checkbox > label::after {
	background: #ffffff;
	border-color: none;
	left: 12px;
	content: " ";
	display: block;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
	position:absolute;
	height: calc(1em + 8px);
	top: 2px;
	width: calc(1em + 8px);
}

.form-group .checkbox > input[type="checkbox"][checked] + label::after {
	background: #ffffff;
	border-color: none;
	border-width: 1px;
	border-style: solid;
	left: 41px;
	border: none;
}


.form-group > .checkbox > input[type="checkbox"] {
	display:none;
}

/* TABLES */

#call-taking-interface table {
	width: 100%;
}

#call-taking-interface table thead.sortable th {
	cursor: pointer;
}

#call-taking-interface table thead.sortable th i {
	font-size: 1.5em;
	position: relative;
	top: 3px;
	left: 6px;
	visibility: hidden;
}

#call-taking-interface table thead.sortable th i:last-child {
	left: -13px;
}

#call-taking-interface table thead.sortable th i.active {
	visibility: visible;
}

#call-taking-interface table th {
	text-transform: uppercase;
	color: #7a929e;
	font-weight: 400;
	font-size: 0.9em;
}

#call-taking-interface table tbody.striped tr, td {
	border-bottom: 1px solid #e0e0e0;
}

#call-taking-interface table tbody tr:hover, #call-taking-interface table tbody tr.active {
	background-color: #eef6ff;
	color: #4557e5;
}

#call-taking-interface table tbody tr.clickable:hover {
	cursor: pointer;
}

#call-taking-interface table td, #call-taking-interface table th {
	padding: 8px;
	/* max-width: 100px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
	text-align: center;
}

#call-taking-interface table tbody .actions {
	text-align: right;
}

#call-taking-interface table tbody .actions i {
	font-size: 1.5em;
	cursor: pointer;
	visibility: hidden;
	margin-right: 15px;
	color: #174fff;
    background-color: #f5f7ff;
    opacity: 0.7;
}

#call-taking-interface table tbody tr:hover .actions i {
	visibility: visible;
}

#call-taking-interface table tbody tr:hover .actions i:hover {
	opacity: 1;
}

#call-taking-interface table div.table-dropdown span {
	display: block;
}


#call-taking-interface .more {
	font-weight: 500;
	padding-left: 5px;
}

/* LISTS & DROPDOWNS*/

#call-taking-interface .dropdown {
	position: relative;
	display: inline;
}

#call-taking-interface td .dropdown {
	position: absolute;
	display: inline;
}

#call-taking-interface .dropdown-content {
	display: none;
	position: absolute;
	min-width: 160px;
	right: 0;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 0;
	z-index: 1;
	top: 16px;
	right: 40px;
}

.dropdown-content.show {
	display: inline;
}

#call-taking-interface ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#call-taking-interface ul li {
	text-transform: uppercase;
	background-color: #ffffff;
	cursor: pointer;
	text-align: center;
	padding: 12px;
	font-size: 10px;
}

#call-taking-interface ul li:hover {
	background-color: #eef6ff;
	color: #4557e5;
}


/* TOASTS */

#toasts {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999999;
	width: 600px;
}

.toast {
	width: 600px;
	height: 80px;
	margin-left: auto;
	background-color: #071d3f;
	transition: all 300ms ease;
	margin-bottom: 5px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.toast.collapsed {
	width: 0;
	position: fixed;
	right: 0;
}

.toast .flexbox {
	height: 100%;
}

.toast .icon {
	width: 80px;
	height: 100%;
	text-align: center;
	padding-top: 20px;
}

.toast .icon i {
	font-size: 3em;
	color: #ffffff;
	margin: auto;
}

.toast .details {
	color: #ffffff;
	padding: 31px;
	text-align: center;
}

.toast .details.with-subtext {
	padding: 25px;
	font-size: 12px;
}

.toast .details span {
	display: block;
}

.toast .details span.subtext {
	font-size: 16px;
}

.toast .action {
	width: 80px;
	background-color: #fe9ca6;
	height: 100%;
	text-align: center;
	padding-top: 10px;
	padding-right: 25px;
	cursor: pointer;
}

.toast .action i {
	font-size: 3em;
	color: #ffffff;
	margin: auto;
}

.toast .action span {
	display: block;
	text-transform: uppercase;
	color: #ffffff;
}

.toast .answer {
	background-color: transparent;
}

.toast .answer i,  .toast .answer span {
	color: green;
}

.toast .ignore {
	background-color: transparent;
}

.toast .ignore i, .toast .ignore span {
	color: red;
}

/* OPTION LIST */

#call-taking-interface .option-list-item {
	display: flex;
	padding-bottom: 15px;
	width: 50%;
}

#call-taking-interface .option-list-item div.flex:first-child {
	display: inline;
}

#call-taking-interface .option-list-item div.flex:first-child .checkmark {
	left: 0;
}

#call-taking-interface .option-list-item div.flex:last-child span {
	cursor: pointer;
	position: relative;
	left: 18px;
	top: 3px;
}


/* PROFILE */

#call-taking-interface .profile {
	height: calc(100vh - 80px);
	overflow-y: auto;
	background-color: #fcfbfe;
	border-top: 1px solid #e0e0e0;
}


#call-taking-interface .profile .header {
	height: 120px;
}

#call-taking-interface .profile .header div.user-avatar {
	padding-left: 15px;
	text-align: left;
	margin-top: auto;
	margin-bottom: auto;
	width: 60px;
}

#call-taking-interface .profile .header div.name {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 20px;
	font-size: 18px;
	padding: 5px 0;
}

#call-taking-interface .profile .header div.name .label {
	font-size: 10px;
	padding: 0;
    color: #7a929e;
    text-transform: uppercase;

}

#call-taking-interface .profile .header div.name .secondary {
	font-size: 12px;
}

#call-taking-interface .profile .header div.actions {
	padding-right: 30px;
	text-align: right;
	margin-top: auto;
	margin-bottom: auto;
}

#call-taking-interface .profile .header div.actions i {
	cursor: pointer;
	color: #4557e5;
}

#call-taking-interface .profile .header div.actions i.action {
	margin-right: 20px;
}

#call-taking-interface .profile .header .hubspot-link {
	height: 40px;
	position: relative;
	top: -7px;
	left: -12px;
	cursor: pointer;
}

#call-taking-interface .profile .tabs {
	display: flex;
	width: 98%;
	background-color: #ffffff;
	margin: auto;
	border-bottom: 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

#call-taking-interface .profile .tabs div {
	width: 150px;
	cursor: pointer;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

#call-taking-interface .profile .tabs div.active {
	color: #4557e5;
	border-bottom: 2px solid #4557e5;
}

#call-taking-interface .profile .tabs div i {
	font-size: 1em;
}

#call-taking-interface .profile .tabs div span {
	text-transform: uppercase;
	font-weight: 400;
	margin-left: 15px;
	font-size: 10px;
}

#call-taking-interface .profile .window {
	width: 98%;
	/* min-height: calc(100vh - 180px); */
	max-height: calc(100vh - 250px);
	margin: auto;
	background-color: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

#call-taking-interface .profile .window .action-list {
	padding: 20px;
	width: 100%;
}

#call-taking-interface .profile .window .action-list div.filters .controls {
	padding-left: 20px;
}

#call-taking-interface .profile .window .action-list div.actions {
	padding: 10px;
	text-align: right;
}

#call-taking-interface .profile .window .action-list div.actions i, #call-taking-interface .profile .window .action-list div.filters i {
	cursor: pointer;
	border-radius: 50%;
	padding: 7px;
	color: #174fff;
    background-color: #f5f7ff;
    opacity: 0.7;
	margin-left:5px;
	margin-right:5px;
}

#call-taking-interface .profile .window .action-list div.actions i:hover {
	opacity: 1;
}