body {
font-family: Roboto, "Helvetica Neue", Helvetica, Arial;
background: #333;
color: #CCC;
width:100%;
margin:0;
padding:0;
font-size: .8125rem;
letter-spacing: .1px;
line-height: 1.47;
}
	
.overview img {
	max-width: 90%;
}
.heading {
top: 0;
margin: 0;
width: 100%;
background-color: #333;
z-index: 999;

}

#nav {
float: right;
position: sticky;
top: 0;
background: #fff;
padding: 1rem;
margin: 0;
border: 1px solid #FF8300;
border-radius: 3px;
z-index: 999;
font-size: 1rem;
text-align: right;
}
#nav a {
	text-decoration: none;
	color: #333;
}

#nav a:hover {
	color: #FF8300;
}

.tryAgain {
	display: none;
}
#statsHidden {
	display: none;
}
#page-container {
background: #fff;
margin: auto;
margin-top: 7px;
width: 90%;

}

#pageTitle {
	width: 100%;
	color: #333;
	min-height: 3rem;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	border-radius: 4px 4px 0 0;
	transition: background-color .4s ease-out;
	padding-left: 1rem;
	font-weight: 500;
	display: flex;
	
	justify-content: space-between;
	
}

#pageTitle h2 {
	font-size: .875rem;
	line-spacing: 1.2;
	padding:0;
}

#pageTitle input {
height: 1.75rem;
width: 75%;
margin: auto;
line-height: calc(1.5em + 1rem + 2px);
text-align: center;
border: 1px solid #2198F3;
border-radius: 2px;
}
#pageTitle datalist {
width: 75%;
}

#tenantRefresh {
	cursor: pointer;
	color: #FF8300;
	margin: auto;
	position: relative;
	left: -6%;
}

.adminLink {
background: #FFF;
padding-top: 1rem;

padding-left: 0;
margin-left: 0;

cursor:pointer;
color: #999;
}

.helpLink {
background: #FFF;
padding-top: 1rem;
padding-right: 1rem;
margin-right: 1rem;
cursor:pointer;
color: #999;

}

.adminLink:hover, .helpLink:hover {
color: #333;

}

.adminSettingsPane {
width:90%;
margin:auto;
background: #FFF;
}

.reportSettingsPane {
width:90%;
margin:auto;
background: #FFF;
}


.adminSettingsPane form, .reportSettingsPane form{
color: #333;
width: 75%;
margin: auto;
}

.adminSettingsPane select, .reportSettingsPane select {
height: 3rem;
width: 25%;
}

.reportSettingsPane #users ,.reportSettingsPane #dids, .reportSettingsPane #queues{
	height: 12rem;
}

.reportSettingsPane #dids, .reportSettingsPane #queues{
	display: none;
}


.adminSettingsPane button {
        height: 3rem;
        width: calc(20% - 2rem);
}


.keywordForm button {
	height: 2rem;
	width: 2rem;
}

.keywordForm select {
	height: 10rem;
	width: 100%;
	float: right;
}
.keywordForm input {
        height: 2rem;
        width: calc(100% - 4rem);
}


.helpPane {
	padding-top: 1rem;
	padding-bottom: 1rem;
	width:90%;
	margin:auto;
	background: #FFF;
	color: #333;
}
.helpPane div {
	margin-left: 1rem;
	margin-right: 1rem;
}


table {
background:#fff;
color:#333;
margin: auto;
width: 90%;
overflow: scroll;
}

.callTable {
width: 100%;
border-bottom: 2px solid #fff;
border-top: 2px solid #eee;
}

#callsContainer {
	margin: auto;
	width: 90%;
	height: calc(100% - 275px);
	background-color: #fff;
	overflow: auto;
        scrollbar-color:#fff #fff;
        scrollbar-width: thin;

}

#callsContainer::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}



#callsTable {
	position: relative;
	width:100%;
	padding-top: 10px;
	margin-bottom: 20px;
	padding-bottom: 10px;
	overflow-y: auto;
/*	scrollbar-color:#ccc #333;
	scrollbar-width: thin;*/
}

#callsTable::-webkit-scrollbar {
  display: none; /* Hides the scrollbar */
}

#callsTable .extraColumn, #topRow .extraColumn {
	width: 3%;
}

tr {
	margin:0;
}

td {
	text-align:center;
	height: 3em;
	padding: 6;
	border-color: #ccc;
	font-size: .8125rem;
}

audio {
	height: 3em;
	margin: auto;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left:3px;
	padding-right:3px;
	width: 100%;
	min-width:300px;
	width: 75%;
	background: #efefef;
}

#scrollable {
	 width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

#topRow{
font-size: .8125rem;
}

#topRow th {
	cursor: pointer;

}
#topRow td{
	border: 1px solid #eee;
}

#topRow .material-symbols-outlined {
	padding: 0;
	margin: 0;
	vertical-align: bottom;
	float: right;
	line-height: .75;
	color: #999;
}


th { 
font-weight: 500;
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
border-top: 0px none;
border-left: 0px none;
margin:0;
padding: 6;

}

.callDuration {
	width: 7%;
	border: 0px none;
	border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
border-left: 0px none;

}

.callDirection {
        width: 7%;
        border: 0px none;
        border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
border-left: 0px none;

}


label {
	margin-left: 2rem;
}

.extraStuff {
	margin: auto;
	text-align: center;
}

.timeColumn, .callerColumn, .calledColumn, .userColumn {
width: 18%; 
border: 0px none;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;

border-left: none;

}

.ratingColumn {
	width: 7%;
	min-width: 20px;
	text-align: center;
	margin: auto;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	border-left: none;

}

.ratingColumn input {
	width: 2em;
	text-align: center;
}

.extraColumn { 
text-align:left;
min-width: 1rem;
background: #FFF;

}

.extraColumn span {
	color: #CCC;
	cursor: pointer;
}

.extraColumn span:hover {
        color: gold;
}

.material-symbols-outlined {
font-size: 1.2rem !important;
  font-variation-settings:
  'FILL' 1,
  'wght' 600,
  'GRAD' 0,
  'opsz' 40
;
}


.extraColumn .keyword{
	float: left;
	font-size: .8rem !important;
	padding: .1rem;
	color: gold;
	-webkit-text-stroke: 1px gold;
#	background: #fff;
#	border-radius: .6rem;
	cursor: default;
}

.speakerIcon {
	float: left;
	padding: 0;
	padding-bottom: 0;
	font-size: 4rem !important;
	color: #FFF;
	border-radius: 50%;
	margin: auto;

}

.editColumn {
	width: 2%;
	color: #3276b1;
	background-color: #FFF;
	text-align: right;
	border-right: 1px solid #eee;
	border-bottom: none;
	border-left: none;

	
}
.editColumn i {
	cursor: pointer;
	font-size: .85rem;
}
.editColumn span:hover {
	color: #333;
	cursor: pointer;
}

.download {
	cursor: pointer;
	color: #ccc;
	float: right;
}

.download:hover {
	color: #333;

}

#stats {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
min-height: 10px;
max-height: 40vh;
background-color: #333;
display: flex;
justify-content: center;
flex-wrap: wrap;
overflow-y: hidden;
scrollbar-color: #ccc #333;
scrollbar-width: thin;

}



#stats div {
	margin: 0px;
	padding: 0px;
}

#usage {
	position: absolute;
	right: 0;
	top :0;
	margin-top: 1rem;
	margin-right: 5vw;
}

#stats #generalStats {
	width:25%;
	margin-top: 2rem;
}

#stats #perUserStats{
	z-index: 10;
	width: calc(70% - 5vw);
	min-width: 600px;
	margin-top: 2rem;
	margin-right: 5vw;
	max-height: calc(40vh - 6rem);
	overflow-x: hidden;
	scrollbar-color: #ccc #333;
	scrollbar-width: thin;
}

#stats .legend {
	width: 90%;
	margin: auto;
	text-align: center;
}
#statsSlider {
	z-index: 3;
	color: #666;
	font-size: 2rem;
	height: 1rem;
	width: 33vw;
	text-align: center;
	position: fixed;
	bottom: 20px;
	right: 33%;
	background: #333;
	border-radius: 1rem 1rem 0 0;
	border-top: 4px solid #666;
	border-left: 2px solid #666;
	border-right: 2px solid #666;
	cursor: pointer;
}

#piechart {
	height: calc(40vh - 4rem);
	background: #333;
	color:#ccc;
}

.summary {
	border-radius: 1rem 1rem 0 0;
	font-size: .9rem;
	width: calc(75% - 2rem);
	margin: auto;
	padding: 1rem;
	background: #fff;
	text-align: left;
	border-top: 12px solid #eee;
	border-right: 3px solid #eee;
	border-left: 3px solid #eee;
	
}

.transcript {
	margin-top: .5rem;
	width: 75%;
	border-radius: 0 0 1rem 1rem;

	min-width: 400px;
	margin:auto;
	background: #fff;
	border-right: 3px solid #eee;
	border-left:3px solid #eee;
	border-top: 1px solid #eee;
	border-bottom: 12px solid #eee; 
	display: flow-root;
	
}

.transcript h3 {
	margin: 1rem;
	text-align: left;
	color: #333;

}

.msgRow {
	clear:both;
}

.timestampA, .timestampC, .timestampE {
font-size: .75rem;
text-align: left;
margin: 0;
position: relative;
left: calc(10px + 1em);
clear:both;
color: #ccc;
}
.timestampB, .timestampD {
font-size: .75rem;
text-align: right;
margin: 0;
position: relative;
right: calc(10px + 1em);;
clear: both;
color: #ccc;
}

.speakerRatings {
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	text-align: left;
}

.speakerRatings h3 {
	color: #666;
	font-size: .8125rem;
	margin: 0;
	float: right;
	width:calc(100% - 4.5rem);
	text-align: left;
}


.speakerRatings p {
	margin: 0;
	color: #666;
	text-align: right;
	float: right;
	margin-right: 1em;
}

.speakerRateGradient {
	float: right;
	height: 1rem;
	margin-top: 2rem;
	width:calc(100% - 4.5rem);
	mrgin-bottom: 0;
	
}

.speakerAstats, .speakerBstats, .speakerCstats, .speakerDstats, .speakerEstats {
	width: 50%;
	max-width: 100%;
	padding: .5rem;
	margin: 1rem;
}

.speakerAstats { background: #fec;}

.speakerBstats { background: #eef;}

.speakerCstats { background: #eee;}
.speakerDstats { background: #ffd;}
.speakerEstats { background: #edf;}

.speakerA {
	float: left;
	margin-left: 10px;
	padding: 10px 20px 10px 20px;
	margin-right: 33%;
	text-align: left;
	background: #fec;
	border-radius: 2em;
	max-width: 66%;

}
.speakerB {
	float: right;
	margin-right:10px;
	padding: 10px 20px 10px 20px;
        margin-left: 33%;
        max-width: 66%;
	text-align: left;
	background: #eef;
	border-radius: 2em;

}

.speakerC {
	float: left;
        margin-left:10px;
        padding: 10px 20px 10px 20px;
        max-width: 66%;
	margin-right: 33%;
        text-align: left;
        background: #eee;
	border-radius: 2em;

}
.speakerD {
	float: right;
        margin-right:10px;
        padding: 10px 20px 10px 20px;
        max-width: 66%;
        margin-left: 33%;
        text-align: right;
        background: #ffd;
        border-radius: 2em;

}
.speakerE {
        float: left;
        margin-left:10px;
        padding: 10px 20px 10px 20px;
        max-width: 66%;
        margin-right: 33%;
        text-align: left;
        background: #edf;
        border-radius: 2em;

}


.Positive {
	color: green;
	
}

.Negative {
	color: red;
}

#filter {
	width: 90%;
	margin: auto;
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	background: #FFF;
	color: #333;
}


#filter div div {
	width: 16%;
}


#filter div {
	display: flex;
	width: 100%;
}

#filter div input, #filter div button, select {
	padding: .5rem .875rem;
	color: #333;
	margin: 5px;
	height: 2rem;
	width: 25%;
	background-color: #FFF;
	border-radius: 4px;
	border-color: #CCC;
	border: 1px solid #e5e5e5;
}

#filter .filterBtn , #filter #resetBtn{
	font-weight: 400;
	padding: 0;
	text-align: center;
	vertical-align: middle;
	min-width: 58px;
	cursor: pointer;
	border-radius: 4px;
	color: #fff;
	background: #FF8300;
	border-color: #FF8300;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .5);
	outline: 0;
	border: 1px solid transparent;

}

#filter .filterBtn:hover{
	background-color: #F07E00;

}
#filter div label {
	margin: auto;
	text-align: right;
	width:16%;
	color: #666;
}

#filter div button {
	width:16%;
}


#breadCrumb {
	color: #666;
	width: 90%;
	margin: auto;
	margin-top: 10px;
	padding: 10px;

}

#breadCrumb .active {
	color: #ccc;
}

.PositiveRating {
	color: green;
}

.NegativeRating {
	color: red;
}

.NeutralRating {
	color:#ccc;
}

.error {

	position: fixed;
	width: 90%;
	
	font-size: 2rem;
	background: #fff;
	
	text-align: center;
}

.perUserStatsContainer {
	display: flex;
	flex-direction: right;
}

.perUserStatsTable {
	float: right;
	width: 80%;
	margin-right: 0;
	background: #333;
}

.perUserStatsTable td{
	padding: .2rem;
	height: 1.5rem;
	font-size: .8rem;
}

.perUserStatsColumn {
	color: #ccc;
}

.perUserPositiveColumn {
	cursor: pointer;
	background: green;
	color: #fff;
}

.perUserNegativeColumn {
	cursor: pointer;
	background: red;
	color: #fff;
}

.perUserNeutralColumn {
	cursor: pointer;
        background: white;
	color: #333;
}

.perUserNoRatingColumn {
	cursor: pointer;
	background: #666;
	color: #fff;
}
#perUserStats .perUserPositiveColumn:hover, #perUserStats .perUserNegativeColumn:hover, #perUserStats .perUserNeutralColumn:hover, #perUserStats .perUserNoRatingColumn:hover {
	border: 1px solid #fff;
}

#stats div .thisUserStatsColumn {
	cursor: pointer;
	margin: auto;
	width: 20%;
	color: #ccc;
	text-align: right;
}

.legendTable {
	width: 50%;
}

.legend table {
	background: #333;
	height: .5rem;
	
	
}
.legend table td {
	width: 25%;
	height: .9rem;
}
#pageSelector {
	width: 2.5rem;
	height: 1.25rem;
	margin: 0;
	padding: 0;
}
 .pageNavInactive {
	color: #999;
}

.pageNavActive {
	color: #333;
	cursor: pointer;
}

.pageNavActive:hover {
	color: #FF8300;
}