@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?mzlf3o');
  src:  url('../fonts/icomoon.eot?mzlf3o#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?mzlf3o') format('truetype'),
    url('../fonts/icomoon.woff?mzlf3o') format('woff'),
    url('../fonts/icomoon.svg?mzlf3o#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ipcortex-icon:before {content: "\e901"}
.icon-caller:before {content: "\e902"}
.icon-callee:before {content: "\e903"}
.icon-phone:before {content: "\e942"}
.icon-phone-hang-up:before {content: "\e943"}
.icon-office:before {content: "\e904"}
.icon-price-tag:before {content: "\e935"}
.icon-price-tags:before {content: "\e936"}
.icon-history:before {content: "\e94d"}
.icon-clock:before {content: "\e94e"}
.icon-stopwatch:before {content: "\e952"}
.icon-calendar:before {content: "\e953"}
.icon-floppy-disk:before {content: "\e962"}
.icon-switch:before {content: "\e9b6"}
.icon-cloud-download:before {content: "\e9c2"}
.icon-eye:before {content: "\e9ce"}
.icon-eye-blocked:before {content: "\e9d1"}
.icon-cancel-circle:before {content: "\ea0d"}
.icon-cross:before {content: "\ea0f"}
.icon-checkmark:before {content: "\ea10"}
.icon-checkmark2:before {content: "\ea11"}
.icon-play3:before {content: "\ea1c"}
.icon-circle-up:before {content: "\ea41"}
.icon-circle-right:before {content: "\ea42"}
.icon-circle-down:before {content: "\ea43"}
.icon-circle-left:before {content: "\ea44"}
.icon-checkbox-checked:before {content: "\ea52"}
.icon-checkbox-unchecked:before {content: "\ea53"}
.icon-radio-checked:before {content: "\ea54"}
.icon-radio-unchecked:before {content: "\ea56"}
.icon-close:before {content: "\ea41"}
.icon-open:before {content: "\ea43"}
.icon-email:before {content: "\e618"}
.icon-circle-notch:before {content: "\f1ce"}
.icon-eye-blocked:before {content: "\e9d1"}

html {
}

.hidden {display: none}
.removed {display:none !important}

#content {
  font-family: 'Lato', sans-serif;
}

/**************************error page***********************/
.error-page {
  color: #fff
}
.error-page .continue {
  margin-top: 50px
}
.error-page .continue a {
  color: #fff;
  text-decoration: underline;
  font-size: 120%
}
/**************************login page***********************/

#login-button-container {
  margin: auto;
}

#header-title {
  text-align: center;
  padding: 10px;
}
#find-my-call {
  font-size: 50px;
  color: white;
}

#logo-container {
  padding-top: 30px;
  padding-bottom: 30px;
}
#login .copy {
  margin-top:20px;
  text-align: center
}

#login_button {
  width: 100%;
}

.error {
  color: #FF9531;
}
.login-info {
  color: white;
}
.login-form {
  padding: 10%;
  text-align: center
}
.form-container {
  background-color: #00416F;
  padding: 20px;
  border-radius: 10px;
}
/*******************************dashboard layout****************************/

#dash .footer {
  margin-top:20px;
}
#dash .copy {
  text-align: center
}
@media only screen and (min-width:480px) {
  #dash .copy {
    text-align: right;
    margin-right: 40px;
  }
}

#call-container {
  background-color: #00416F;
  padding: 5px 2em 1em 2em;
  border-radius: 10px;
  margin-bottom: 1em;
}
#call-container .call-line {
  position: relative
}
#call-container .choose {width: 20px;position:absolute; top:-14px;left:-10px;z-index:10}
#call-container .call-headings .choose {top: auto; bottom: 18px;}
#call-container .arrow-box {position:absolute; top:-8px;right:10px}
#call-container .visible {position:absolute; top:-8px;right:60px}

#call-container .from {padding-left: 40px}
#call-headings .call-heading.from {padding-left: 25px}
#call-container .arrow-box:before, #call-container .visible:before {
  font-family: 'icomoon' !important;
  font-size:32px;
  color:#00416F
}
#call-container .arrow-box:before {content: "\ea43"}
#call-container .visible:before {content: "\e9ce";}

#call-container .arrow-box.expand:before {content: "\ea41"}
#call-container .visible.no:before {content: "\e9d1";}

.max-duration{
  padding-right: 0px;
}
#search-bar {
  padding-bottom: 1em;
}
body {
  font-family: 'Lato', sans-serif;
}

.font {
  font-family: 'Lato', sans-serif;
}
#sortby {
  float: right;
  margin-right: -15px;
  margin-top: -6px;
}
#sortby .dropdown-menu {
  right: 0;
  left: auto;
}
.call-headings {
  color: white;
}

.call-line{
  height: 26px;
  font-size: 15px;
}
.call-heading {
  margin-top: 40px;
  margin-bottom: 13px;
  margin-left: 1px;
}
#dashboard-logo-container {
  margin: 20px 0;
}
.no-calls {
  text-align: center;
  color: white;
  margin-top: 100px;
}

#dashboard-title {
  color: #fff;
  font-size: 33px;
  margin-left: 0;
}
#dashboard-intro {
  margin-top: 20px;
}
#dashboard-intro p {
  text-align: center;
}
.dashboard-title-container {
  text-align: center
}

/*************** STANDARD FORM LAYOUTS ********************/
.stdForm .control-group, .stdForm .form-group {padding:0px}
.stdForm fieldset {border:none}
.stdForm fieldset legend {font-weight:normal; font-size:120%; border:0; margin-bottom:5px}
.stdForm textarea,
.stdForm select, .stdForm input[type=text], .stdForm input[type=email], .stdForm input[type=password], .stdForm input[type=phone], .stdForm input[type=date] {
  width:100%;
  padding:10px;
  border-radius:5px;
  border:1px solid #00416F;
  color:#808080;
  font-size:120%
}
.stdForm select {appearance:none; -webkit-appearance:none; -moz-appearance:none}
.stdForm .sel_popup {
  /** Absolutely position this element */
  position:absolute; top:50px; z-index:1000
}
.stdForm button {
  display:block;
  float:left;
  margin-left:10px;
  padding:5px 10px;
  background-color:#FF9531;
  border:1px solid #00416F;
  color:#fff;
  border-radius:5px;
  font-size:20px;
}
.stdForm button:disabled {
  background-color:#d0d0d0;
  border:1px solid #00416F;
}
@media only screen and (min-width:991px) and (max-width:1200px) {
  .stdForm button {
    margin-left:10px;
    margin-bottom:5px;
    padding:5px 10px;
    border-radius:5px;
    font-size:16px;
  }
}
.stdForm button.primary {
  background-color:#00416F;
  border:1px solid #00416F;
}
.stdForm .control-group.right {
  display:inline-block; float:right; width:auto
}
.stdForm input[type=text]:focus, .stdForm input[type=email]:focus, .stdForm input[type=password]:focus, .stdForm input[type=phone]:focus, .stdForm input[type=date] .stdForm textarea:focus {
  border-color:#00416F;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.stdForm input:placeholder-shown {
  color:#e0e0e0
}
.stdForm .control-group, .stdForm .form-group {
  position:relative;
  display:table;
  width:100%;
  padding:0;
  margin:8px 0;
}
.stdForm .form-item input {
  border-color:0;
  border-radius:0
}
.stdForm .form-item:first-child {}
.stdForm .form-item {display:table-row;padding:0;margin:0}
.stdForm .form-item > input{display:table-cell;xpadding:0;margin:0;}
.stdForm .form-item .addon {display:table-cell;color:#00416F;background-color:#C2CFD9;text-align:center;width:48px;font-size:24px;vertical-align:middle}
.stdForm .form-item .addon span:before {font-size:28px;vertical-align:middle}

/* .stdForm .checkbox input {position:absolute; top:-10000px;left:0} */
.stdForm .radio input, .stdForm .checkbox input {display: none}
.stdForm .radio label, .stdForm .checkbox label {
  width:100%;
  padding-right:10px;
  border:1px solid transparent;
  border-radius:5px;
}
.stdForm .radio label.active, .stdForm .checkbox label.active {
  border:1px solid #00416F;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.stdForm .radio label:before,
.stdForm .checkbox label:before {
  font-family: 'icomoon' !important;
  font-size:18px;
  position:relative;top:3px;
  padding-right:5px;
  content: "\ea53"
}
.stdForm .radio label:before {content: "\ea56"}
.stdForm .checkbox label:before {content: "\ea53"}

.stdForm .checkbox label.checked:before, .stdForm .checkbox.checked label:before {content: "\ea52"}
.stdForm .radio label.checked:before, .stdForm .radio.checked label:before {content: "\ea54"}

.stdForm .control-group.inline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}
.stdForm .control-group.inline > div {
  flex: 0 0 auto;
}
.stdForm .control-group.inline label {
  padding:0;
  padding-left: 10px;
}
.stdForm .control-group.inline label:first-child {
  padding-left: 0
}

/* Deal with the radius */
.stdForm .form-item .form-ctrl {
  border-radius:5px;
  border:1px solid #00416F
}
.stdForm .form-item .form-ctrl:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-left:0;
}
.stdForm .form-item .form-ctrl:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-right:0;
}
.stdForm .form-item .addon {
  border:1px solid #00416F
}
.stdForm .form-item .addon:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.stdForm .form-item .addon:not(:first-child) {
  border-left:0
}
.stdForm .form-item .addon:last-child {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.stdForm .form-item .addon:not(:last-child) {
  border-right:0
}



/************************** filter form ***********************/
#filter-form {
  padding:5px 10px; background-color:#C2CFD9;border-radius:5px
}
.time {
  font-size: 12px;
}

input[type="checkbox"] {
  color: white;
}
#popular-tags input[type=checkbox], #popular-tags input[type=radio] {
  position:absolute; top:-10000px;left:0
}
#popular-tags label {border:1px solid transparent}
#popular-tags label.active {
  border:1px solid #00416F;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
#popular-tags .popular-tag {background-color: #FF9531}
#popular-tags .popular-tag.checked {background-color: #00A6A3}
.popular-tags {
  list-style: none;
  padding: 0.2em;
  border:1px solid #00416F
}
.popular-tags:focus {
  font-weight: bold;
}
.fade {
  opacity: 0.5;
}
.popular-tag {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 5px;
  color: white;
  font-size: 14px;
  margin: 2px;
  font-weight: normal;
}
.scrollbar-tags {
  overflow-y: scroll;
  height: 130px !important;
  background: white;
}

.list-group-item {
  /*border: none;
  background-color: #00A6A3;*/
  background-color: #C2CFD9;
}

.btn-primary {
  background-color: #00A6A3;
  border: 1px solid #00A6A3;
}

#filter-calls {
  font-size: 20px;
}

/*calls list css*/
.panel-default>.panel-heading {
  xxbackground-color: #C2CFD9;
}

.tag-calls-container {
  padding: 1em;
}

/************ CALL DISPLAY *********/

.expanded-call {padding:0;margin:0}
.expanded-call .row {padding:0;margin:0}
.expanded-call .tab {display:table;width:100%;padding:0 10px;margin:0}
.expanded-call .control {display:table-row}
.expanded-call .control > div {display:table-cell;vertical-align:middle;padding:0;margin:0}
.audio audio {width: 100%; padding:0;margin:0;xdisplay:block;background-color: #fff}
.audio audio:focus {outline:0; border: 1px solid #b0b0b0; border-radius: 33px;}
.expanded-call .download {font-size:50px; width:60px;text-align:right}

.expanded-call .download a {color:#00416F}
.expanded-call .download a:hover {color:#FF9531}

em {
  margin-left: 15px;
  margin-right: 5px;
  cursor: pointer;
}
.tag-cards {
  padding-top: 1em;
}
.tag-bar {
  padding-left: 0px;
}
.btn-success:hover {
  background-color: #00A6A3;
  border: 1px solid #027a76;
}
.btn-success {
  background-color: #00A6A3;
  border: 1px solid #00A6A3;
}

#logout-btn {
  float: right;
  margin-top: 25px;
}

.tag_name {
  margin-left: 10px;
}


.pages {
  color: white;
  font-size: 15px;
}

#error-box {
width: 25%;
font-size: 15px;
background-color: rgba(255,149,49, 0.90);
float: right;
z-index: 1000;
display: block;
margin-left: 70%;
border-radius: 10px;
margin-top: 2em;
color: white;
padding: 1.5em;
position: fixed;
text-align: center;
}

.hidden {
  display: none;
}


/****************** tagging bar in calls table ***************/

/*.tag-card {
  border: 1px solid #FF9531;
  display: inline-block;
  color: white;
  padding: 6px;
  border-radius: 4px;
  margin-right: 1em;
  padding-left: 15px;
  margin-bottom: 1em;
  background-color: #FF9531;
}*/

/*.tagarea {
  display: none;
}*/
.small-tags{
  display: inline-block;
background: #FF9531;
padding: 0.2em 0.7em;
border-radius: 5px;
color: white;
font-size: 14px;
margin-right: 8px;
margin-bottom: 2px;
}
.danger {
  background-color: red
}
.orange{
  font-size: 14px;
  color: #FF9531;
}
.tag-box {
  color: black;
  border: 1px solid #C2CFD9;
  list-style: none;
  margin: 0;
  display: inline-block;
  font-family: arial;
  width: 100%;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
}
.tag-box * {
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.tag-box li {
  padding: 4px 6px;
  float: left;
  display: inline-block;
}
.orange-tag {
  background-color: #FF9531;
}
.tag-box li.tags {
  padding: 6px;
  /*margin-right: 1em;*/
  padding-left: 10px;
  margin-bottom: 1em;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  margin: 4px 3px;
  position: relative;
}
.tag-box li.tags .close {
  display: inline-block;
  position: absolute;
  color: rgba(255,149,49, 0.90);
  overflow: hidden;
  width: 0;
  right: 0;
  height: 16px;
  cursor: pointer;
  top: 4px;
  border: 0;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  padding: 0;
  font-family: icomoon;
  text-shadow: none;
}
.tag-box li.tags .close:before {
  content: "\ea0f";
  width: 14px;
}

.tag-box li.tags .close:after {
  color: white;
}

.tag-box li.tags:hover {
  padding-right: 25px;
}

.tag-box li.tags:focus {
  padding-right: 25px;
}

.tag-box li.tags:hover .close {
  width: 26px;
}
.tag-box li.tags:focus .close {
  width: 26px;
}


.tag-box li .input-tag {
  color: black;
  height: 24px;
  vertical-align: middle;
  border: none;
  outline: none;
  background: none;
  color: black;
  margin-left: 10px;
  margin-top: 6px;
}
.tag-box li .input-tag:hover, .tag-box li .input-tag:focus {
  outline: none;
  border: none;
}
.close {
  float: right;
font-size: 15px;
font-weight: normal;
line-height: 1;
font-style: normal;
color: white;
opacity: 1;
margin: 4px 0px 0px 0px;
}
.tag-container {
  overflow: hidden;
  height: 100%
}

#call_details .missing {
  font-weight: 700;
  text-align: center;
  padding: 4px 0 0 0;
  font-size: 140%;
  color: red;
  position: absolute;
  width: 100%;
}


/*** Multi-page navigation ***/
#prevnav .foot-ctrl {position: absolute; top: 0; left: 10px; z-index: 100}
#prevnav .foot-ctrl ul {padding:0; margin:0; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; width: 140px; }
#prevnav .foot-ctrl li {flex: 0; display: inline-block; list-style: none; padding-left: 20px;}
#prevnav .foot-ctrl li:first-child {padding-left: 0;}
#prevnav .foot-ctrl button {background-color: transparent; color: #fff; font-size: 50px;padding:0;margin:0;border:0}
#prevnav .foot-ctrl #email {font-size: 36px}
#prevnav .foot-ctrl button:focus {border: 0; outline: 0}
#prevnav .foot-ctrl button:disabled {color: #808080}

#prevnav .row {min-height: 70px; margin:0; padding:0}
#prevnav .row > div {text-align: center}
#prevnav a {padding:0; margin:0; font-size:48px}
#prevnav a:hover {color:#c0c0c0; text-decoration:none}
#prevnav a {cursor:pointer}

/*** keep alive ***/
#shield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.8;
  background-color: #e0e0e0;
}
#logwrap .container {
  color: #fff;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#logwrap .row {
  margin-top: 100px;
  font-size:  18pt;
  color: #fff;
}
#logwrap .form-container {
  font-size: 16px
}
#logwrap h1 {
  font-size: 30px
}
#logwrap .countdown {
  margin-bottom: 20px;
}
#logwrap .seconds {
  font-size: 36px;
  display: block;
  background-color: #fff;
  color: #00416F;
  border: 5px solid #00416F;
  border-radius: 15px;
  padding: 10px;
  margin: 20px auto 0 auto;
  width: 4em;
}
#logwrap .row > div {
  padding: 50px 20px;
  text-align: center;
}
#logwrap .logo {
  display: none
}

@media only screen and (max-width:768px) {
  #logwrap .form-container {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  #logwrap .logo {
    display: block;
    font-size: 36px;
  }
  #logwrap .product {
    margin-top:20px;
    font-weight: bold;
  }
}
.block-spin {
  display:inline-block;
  -webkit-animation: block-spin 1.5s infinite linear;
  animation: block-spin 1.5s infinite linear;
}
@-webkit-keyframes block-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes block-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/** POPUPS **/
.mask {
	position:		fixed;
	top:			0px;
	left:			0px;
	z-index:		200;
	display:		flex;
	width:			100%;
	height:			100%;
	background:		rgba(0, 0, 0, 0.4);
	justify-content:	center;
	align-items: center;
}

.mask.vcentre {
	align-items:		center;
}

.mask .popup {
	position:		relative;
	max-height: 90%;
  min-width: 50%;
  max-width: 90%;
	overflow: auto;
	margin:			30px;
	padding:		15px;
	border-radius:		10px;
	background:		#ffffff;
	box-shadow:		0px 0px 5px 3px rgba(0, 0, 0, 0.2);
}
/* Small screens - popups take the full screen size */
@media only screen and (max-width:600px) {
  .mask .popup {
    margin: 0;
  	height:    100%;
    width:     100%;
    min-width: unset;
    max-width: none;
  	padding:	15px;
  	border-radius: 0;
  	background:		#ffffff;
  	box-shadow:		0;
  }
}
.mask .popup .popup-content {
  display: flex;
  flex-direction: column;
}
.mask .popup .popup-content > div {
  flex: 1 1 auto;
}
.mask .popup .popup-content > div.fixed,
.mask .popup .popup-content > div:first-child {
  flex: 0 0 auto;
}

.mask .popup-close {
	position:  absolute;
	top:       10px;
	right:     10px;
	color:     #00416F;
  cursor:    pointer;
  font-size: 26px;

	text-shadow:		1px  0px rgba(0, 0, 0, 0.3),
				0px  1px rgba(0, 0, 0, 0.3),
				-1px 0px rgba(0, 0, 0, 0.3),
				0px -1px rgba(0, 0, 0, 0.3);
}

.popup .heading {
  padding: 5px 0 10px 0;
}
.popup .heading h3 {
  padding: 0 0 10px 0; margin: 0
}
.popup .separate,
.popup .form-submit {
  width: 100%;
  padding:20px 0 0 0;
  margin: 20px 0 0 0;
  border-top: 1px solid #00416F;
}
.popup .form-submit ul {
  padding: 0; margin: 0; display: flex; flex-direction: row; align-items: center; list-style: none
}
.popup .form-submit li {
  flex: 0 0 auto; margin: 0; padding: 0;
}
.popup .prompt {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}
.popup .input-group-addon {
  border-color: #00416F;
}
#popup-message {
  position: absolute;
  top: calc(50% - 37px); left: calc(50% - 150px); z-index: 200;
  width: 300px;
  height: 75px;
  background-color: #fff;
  border: 1px solid black;
  border-radius:		10px;
	background:		#ffffff;
	box-shadow:		0px 0px 5px 3px rgba(0, 0, 0, 0.2);
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

#popup-message.working:before {

}
#popup-message.complete .icon {
  display: none
}
#popup-message .message {
  padding-right: 10px;
}
#popup-message.complete {
  transition-property: all;
  transition-duration: 1s;
  opacity: 0;
}