body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
}

.cdr-reports-tabs {
  margin-bottom: 10px;
}

#suboptions {
  margin-top:15px;
}

.dropdown-menu {
  overflow: hidden;
  overflow-y: auto;
}

.time-span label {
  float:left;
  margin-right: 15px;
}
.time-span a.remove {
  font-size: 14px;
  text-decoration: none;
}

.billing-warning {
  border-radius: 20px;
  background-color: #2A72B9;
  color: white;
  margin: 20px;
  padding: 15px;
}

.billing-warning h3 {
  color: white;
  padding: 0px;
  margin: 0px;
}

.billing-warning h5 {
  color: white;
  padding: 10px 0px 0px 0px;
  margin: 0px;
  word-wrap: break-word;
  line-height: 1.5;
}

.billing-message-description {
  word-wrap: break-word;
}

.billing-link {
  color: white;
  text-decoration: underline;
}

div.time-span {
  margin-left:0 !important;
}

.help-box-grid {
  width: 100%;
  max-width: 1000px;
  margin-left: 0;
}

.support-body {
  max-height: 600px;
  height: 100%;
}

.help-title {
  margin-top: 0px;
  line-height: 1;
  color: #0F4E8B;
}

#supportC2C {
position: fixed;
bottom: 0;
left: 150px;
  -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0F4E8B), color-stop(1, #0F4E8B) );
  background:-moz-linear-gradient( center top, #0F4E8B 5%, #0F4E8B 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F4E8B', endColorstr='#0F4E8B');
  background-color:#0F4E8B;
  -webkit-border-top-left-radius:15px;
  -moz-border-radius-topleft:15px;
  border-top-left-radius:15px;
  -webkit-border-top-right-radius:15px;
  -moz-border-radius-topright:15px;
  border-top-right-radius:15px;
  -webkit-border-bottom-right-radius:0px;
  -moz-border-radius-bottomright:0px;
  border-bottom-right-radius:0px;
  -webkit-border-bottom-left-radius:0px;
  -moz-border-radius-bottomleft:0px;
  border-bottom-left-radius:0px;
  border:1px solid #0F4E8B;
  display:inline-block;
  color:#F0F0F0;
  font-size: 16px;
  text-decoration:none;
  text-indent: 9px;
  padding: 2px;
  width: 100px;
z-index: 999;
}

#supportC2C a i {
  color:#F0F0F0;
  font-size: 16px;
}

#supportC2C a:hover {
  line-height:26px;
  vertical-align: top;
  transition:0.1s;
  text-decoration: none;
}

.dataTables_processing {
  background-color: #d9edf7;
  border-color:#bce8f1;
  color:#3a87ad;
  font-weight: bold;
}

a.btn.btn-navbar.pull-right {
  margin-right: 42px;
}

.mfc-container {
  width:100%;
  position:absolute;
  min-height: 100%;
  height: auto;
  background-color: #fff;
  box-shadow: #666 4px 0px 8px;
  padding-bottom: 200px;
  transition:margin 0.3s;
  box-sizing:border-box;
}

#footer{
  background-color: #fff;
}

#loader {
  position: fixed;
  top: 50%;
  left: 50%;
   margin-top: -62px;
  margin-left: -62px;
}
.check-scroll {
  max-height: 200px;
  overflow: auto;
}
.capitalize {
  text-transform: capitalize;
}
.navbar-inner {
  border-radius: 0 0 4px 4px;
  padding-left: 0;
  padding-right: 0;
}

img#helpLogo {
  width: 200px;
  height: 200px;
  float:left;
}

/*****************
** call groups **
*****************/
a.selected_users,
a.unselected_users {
  display: block;
}

a.selected_users:hover,
a.unselected_users:hover {
  text-decoration: none;
  font-weight: bold;
}

.glyphicons-18px {
  font-size: 18px;
}

.green {
 color: #2C8437;
}

.red {
 color: #AA3F39;
}

.blue {
 color: #403075;
}

.black{
  color: #000000;
}

.selected_users_container {
  height: 100%;
}

/*
.affix > div.sortlist {
    height: 200px !important;
    overflow: auto;

}
*/
.highlight_dropzone {

  background-color: #DCF3F7;

}

.highlight_dropzone_negative {
  padding: 10px;
  border-radius:5px;
  background-color: #FA9B9B;

}

.ui-state-highlight {
  margin-top:10px;
  border-radius: 5px;
  height: 2em;
  line-height: 1.5em;
  max-width: 300px;
  background: transparent;
  border:0;
background: -moz-radial-gradient(center, ellipse cover,  rgba(211,211,211,0.65) 0%, rgba(76,76,76,0) 64%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(211,211,211,0.65)), color-stop(64%,rgba(76,76,76,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(211,211,211,0.65) 0%,rgba(76,76,76,0) 64%,rgba(0,0,0,0) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(211,211,211,0.65) 0%,rgba(76,76,76,0) 64%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(211,211,211,0.65) 0%,rgba(76,76,76,0) 64%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center,  rgba(211,211,211,0.65) 0%,rgba(76,76,76,0) 64%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6d3d3d3', endColorstr='#00000000',GradientType=1 );

   }
div.cbk_number {
  position: relative;
  padding-top: 0;
  cursor: pointer;
}
.form-actions{
  padding: 19px 20px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
}
.form-horizontal .form-actions {
  padding-left: 180px;
}
.form-horizontal .form-group {
  margin-left: 0px;
  margin-right: 0px;
}
div#number-list {
  padding:5px 10px;
  max-width: 370px;
  border-radius:5px;
  border:1px #ccc dotted;
  background:#eee;
}
.ring-duration{
  margin-top:10px;
}

div#queue-report-infograph {
width: 1240px;
display: inline-block;
background: #f9f9f9;
border: 1px solid #ddd;
font-size: 22px;
font-weight: bold;
border-radius: 5px;
padding: 20px;
margin: 20px 0 40px 0;
box-sizing: border-box;
}

div#queue-log-report-infograph {
width: 900px;
display: inline-block;
background: #f9f9f9;
border: 1px solid #ddd;
font-size: 22px;
font-weight: bold;
border-radius: 5px;
padding: 20px;
box-sizing: border-box;

}

div#queue-report-infograph > div,
div#queue-log-report-infograph > div {
  width: 410px;
 float: left;
}

div#queue-log-report-infograph > div {
  margin:0;
  width:280px;
}

div#queue-report-infograph > div > div,
div#queue-log-report-infograph > div > div {
  text-align: center;
  padding: 10px;
  margin: 0 auto;
}

#flot-peak-title {
  text-transform: capitalize;
}

p.total-calls {
  margin-top: 35px;
  font-size: 3em;
  line-height: 1em;
}

.toggle-switch label {
  color:rgb(126, 126, 126);
}

.toggle-switch label.muted,
.toggle-switch input[disabled] ~ label {
  color:#ccc;
}

.toggle-switch input:checked + label {
  color:#fff;
}

.toggle-switch span.slide-button {
  padding: 10px;
  border-radius: 4px;
    background-color:rgb(23,52,162);
}

.btn-flat {
  border:none;
  background: none;
  border-radius: 4px;
  padding: 5px 10px;
  background-color: #2f96b4;
  border: 1px solid #25738A;
  color:#fff;
  text-shadow:none;
}

.btn-flat:hover {
  background-color:#25738A;
  color:#fff;
}

.contacts a.edit {
  text-decoration: none;
  color: black;
}

.button-switch input{
  display: none;
}
.button-switch label, .button-switch button {
  position: relative;
  display: block;
  float:left;
  padding:8px 14px 8px 14px;
  color:#F0F0F0;
  font-size: 1.2em;
  background-color: #0F4E8B;
  /*box-shadow: 0px 4px 0 #23346f;*/
  margin-bottom: 20px;
  border:0;
  transition:postion .3s;
}

.button-switch button {
  border-radius: 10px;
  margin-right:15px;
}

.button-switch label:first-of-type {
  border-radius:10px 0 0 10px;
}

.button-switch label:last-of-type {
  margin-right: 40px;
  border-radius:0 10px 10px 0;
}

.button-switch label:hover,
.button-switch button:hover {
  top:2px;
  box-shadow: 0px 2px 0 #23346f;
}

.button-switch input:checked + label,
.button-switch button:active  {
  /*top:4px;*/
  background:#108989;
  box-shadow: none;
}

.table table-striped a {
margin-left: 15px;
color: #6183A6;
}

.button-switch input:disabled + label,
.button-switch button:disabled {
  top:4px;
  background:#758ad2;
  box-shadow: none;
}


/***********************
Loading
*******************/
.loadingblobs {
    margin-left:33%;
    height:80px;
    position:relative;
    top:45%;
    z-index:99999;
    display:none;
}

.loadingblobs span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 50px auto;
    background: #445caa; /*fs-blue*/
    border-radius: 20px;
    -webkit-animation: loading3 0.9s infinite alternate;
    -moz-animation: loading3 0.9s infinite alternate;
}

.loadingblobs span:nth-of-type(2) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
}

.loadingblobs span:nth-of-type(3) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
}

.loadingblobs span:nth-of-type(4) {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
}

.loadingblobs span:nth-of-type(5) {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
}

@-webkit-keyframes loading3 {
  0% {
    width: 10px;
    height: 10px;
    -webkit-transform: translateY(0);
    opacity:0.1;
  }
  100% {
    width: 24px;
    height: 24px;
    -webkit-transform: translateY(-21px);
    opacity:1;
  }
}

@-moz-keyframes loading3 {
  0% {
    width: 10px;
    height: 10px;
    -moz-transform: translateZ(0);
    opacity:0.1;
  }
  100% {
    width: 24px;
    height: 24px;
    -moz-transform: translateZ(-21px);
    opacity:1;
  }
}

#report-print-details {
  display:none;
}

.route-step-header-parent{
  position: relative;
}

.route-step-btn-toolbar{
  margin-top: 65px;
}

.route-step-header{
  position: absolute;
  padding: 0 10px;
  background: #0F4E8B;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 8px 8px 0 0;
  color: white;
}

.route-step-header a{
 color: white;
 text-decoration: underline;
}

.route-step-header .close{
  color: white;
  margin-top: 9px;
  opacity: 1;
}

.route-step-header-alltimes{
  position: absolute;
  padding: 15px 10px;
  background: #0F4E8B;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 10px 10px 0 0;
  color: white;
}

.route-step-header-alltimes a{
  color: white;
 text-decoration: underline;
}

.route-step-header-alltimes .close{
  color: white;
  position: relative;
  margin-top: -6px;
  opacity: 1;
}

.timecondition {
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid #e5e5e5;
  margin-bottom: 8px;
  background-color: #eee;
}

.timecondition .header {
  cursor: move;
}

.temp-time-condition-input {
  display: none;
}

.timecondition-label-toggle {
  position: relative;
  display: inline-block;
  min-width: 112px;
  cursor: pointer;
  font-weight: 400;
  text-align: left;
  margin: 0px;
  margin-left: 30px;
  padding: 16px 0 16px 44px;
}
.timecondition-label-toggle:before, .timecondition-label-toggle:after{
  content: "";
  position: absolute;
  margin: 0;
  outline: 0;
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.timecondition-label-toggle:before {
  left: 1px;
  width: 34px;
  height: 14px;
  background-color: #9E9E9E;
  border-radius: 8px;
}

.timecondition-label-toggle:after {
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #FAFAFA;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}

.timecondition-label-toggle .timecondition-toggle--on {
  display: none;
}

.timecondition-label-toggle .timecondition-toggle--off {
  display: inline-block;
}

.temp-time-condition-input:checked + .timecondition-label-toggle:before {
  background-color: #A5D6A7;
}

.temp-time-condition-input:checked + .timecondition-label-toggle:after {
  background-color: #4CAF50;
  -ms-transform: translate(80%, -50%);
  -webkit-transform: translate(80%, -50%);
  transform: translate(80%, -50%);
}

.temp-time-condition-input:checked + .timecondition-label-toggle .timecondition-toggle--on {
  display: inline-block;
}

.temp-time-condition-input:checked + .timecondition-label-toggle .timecondition-toggle--off {
  display: none;
}

.temp-time-condition-enabled {
  display: none;
}

.timecondition-label-toggle-enabled {
  position: relative;
  display: inline-block;
  min-width: 100px;
  cursor: pointer;
  font-weight: 400;
  text-align: left;
  margin: 0px;
  margin-left: 30px;
  padding: 16px 0 16px 44px;
}
.timecondition-label-toggle-enabled:before, .timecondition-label-toggle-enabled:after{
  content: "";
  position: absolute;
  margin: 0;
  outline: 0;
  top: 50%;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.timecondition-label-toggle-enabled:before {
  left: 1px;
  width: 34px;
  height: 14px;
  background-color: palevioletred;
  border-radius: 8px;
}

.timecondition-label-toggle-enabled:after {
  left: 0;
  width: 20px;
  height: 20px;
  background-color: indianred;
  border-radius: 50%;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}

.timecondition-label-toggle-enabled .timecondition-toggle-enabled--on {
  display: none;
}

.timecondition-label-toggle-enabled .timecondition-toggle-enabled--off {
  display: inline-block;
}

.temp-time-condition-enabled:checked + .timecondition-label-toggle-enabled:before {
  background-color: #A5D6A7;
}

.temp-time-condition-enabled:checked + .timecondition-label-toggle-enabled:after {
  background-color: #4CAF50;
  -ms-transform: translate(80%, -50%);
  -webkit-transform: translate(80%, -50%);
  transform: translate(80%, -50%);
}

.temp-time-condition-enabled:checked + .timecondition-label-toggle-enabled .timecondition-toggle-enabled--on {
  display: inline-block;
}

.temp-time-condition-enabled:checked + .timecondition-label-toggle-enabled .timecondition-toggle-enabled--off {
  display: none;
}


.timecondition .icon-reorder.sort {
  padding-right: 14px;
}

.timecondition .header {
  padding: 10px;
}

.timecondition .steps-container {
  margin-right: 25px;
}

.icon-reorder.sort {
  cursor: move;
}

.topstats .well {
 display: inline-block;
  min-height: 50px;
}

.topstats .well .queue-stats {
  text-align: center;
  float: left;
  width: 14%;
}

.topstats  .queue-stats .stat {
  font-size: 3em;
}

.queue-call {
  min-width: 200px;
  text-align: center;
  display: inline-block;
  border: solid;
  border-width: 1px;
  border-radius: 15px;
  margin: 0 10px;
  padding: 10px;
}

.live-queue .agent-calls .queue-call {
  margin: 5px 10px;
}

.agent-list .agent {
  min-width: 250px;
  float: left;
  margin: 10px;
  padding: 5px;
  min-height: 175px;
  border: solid;
  border-width: 1px;
  border-radius: 15px;
}

.panel-toggle {
  cursor: pointer;
}
.panel-body{
  padding: 0px;
}

.lineKeyTooltips{
  cursor: pointer;
}

.lineKeyTooltips + .tooltip > .tooltip-inner {
  background-color: #2a72b9; 
  color: #FFFFFF; 
  border: 1px solid #108989; 
  border-width: 1px;
  box-shadow: 1px 1px rgb(75, 74, 74);
  padding: 4px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 15px;
}

.ptn,.pvn,.pan{padding-top:0}
.pts,.pvs,.pas{padding-top:5px}
.ptm,.pvm,.pam{padding-top:10px}
.ptl,.pvl,.pal{padding-top:20px}
.prn,.phn,.pan{padding-right:0}
.prs,.phs,.pas{padding-right:5px}
.prm,.phm,.pam{padding-right:10px}
.prl,.phl,.pal{padding-right:20px}
.pbn,.pvn,.pan{padding-bottom:0}
.pbs,.pvs,.pas{padding-bottom:5px}
.pbm,.pvm,.pam{padding-bottom:10px}
.pbl,.pvl,.pal{padding-bottom:20px}
.pln,.phn,.pan{padding-left:0}
.pls,.phs,.pas{padding-left:5px}
.plm,.phm,.pam{padding-left:10px}
.pll,.phl,.pal{padding-left:20px}
.ptxs,.pvxs,.paxs{padding-top:3px}
.ptms,.pvms,.pams{padding-top:7px}
.ptml,.pvml,.paml{padding-top:15px}
.ptxl,.pvxl,.paxl{padding-top:25px}
.ptxxl,.pvxxl,.paxxl{padding-top:30px}
.prxs,.phxs,.paxs{padding-right:3px}
.prms,.phms,.pams{padding-right:7px}
.prml,.phml,.paml{padding-right:15px}
.prxl,.phxl,.paxl{padding-right:25px}
.pbxs,.pvxs,.paxs{padding-bottom:3px}
.pbms,.pvms,.pams{padding-bottom:7px}
.pbml,.pvml,.paml{padding-bottom:15px}
.pbxl,.pvxl,.paxl{padding-bottom:25px}
.plxs,.phxs,.paxs{padding-left:3px}
.plms,.phms,.pams{padding-left:7px}
.plml,.phml,.paml{padding-left:15px}
.plxl,.phxl,.paxl{padding-left:25px}

.mtn,.mvn,.man{margin-top:0}
.mts,.mvs,.mas{margin-top:5px}
.mtm,.mvm,.mam{margin-top:10px}
.mtl,.mvl,.mal{margin-top:20px}
.mrn,.mhn,.man{margin-right:0}
.mrs,.mhs,.mas{margin-right:5px}
.mrm,.mhm,.mam{margin-right:10px}
.mrl,.mhl,.mal{margin-right:20px}
.mbn,.mvn,.man{margin-bottom:0}
.mbs,.mvs,.mas{margin-bottom:5px}
.mbm,.mvm,.mam{margin-bottom:10px}
.mbl,.mvl,.mal{margin-bottom:20px}
.mln,.mhn,.man{margin-left:0}
.mls,.mhs,.mas{margin-left:5px}
.mlm,.mhm,.mam{margin-left:10px}
.mll,.mhl,.mal{margin-left:20px}
.mlml,.mhml,.maml{margin-left:15px}


.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}

.tab-content > .active,
.pill-content > .active {
  display: block;
}

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
  border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
}

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff;
}
.tab-content {
  overflow: hidden;
}


.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 300px;
    margin-top: 12px;
    padding: 8px 0;
    max-height: 225px;
    overflow-y:scroll;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}
.tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

#signInModal .modal-dialog{
  margin: 85px auto;
}

#signInModal .modal-header{
  padding: 5px 5px 5px 15px;
}

#signInModal .modal-footer{
  margin-top:0px;
  background-color:#f5f5f5;

}

/*change the width of the url input containers */
.fluentStreamCloudUrlInput{
    width: 350px;
}

.leftbar-resize{
    float: left;
    margin: 0;
    padding: 0 10px;
    display: inline;
}

#leftbar-resize1{
    margin: 0;
    padding: 0 ;
    display: inline;
}

.icon-redX {
    background-image: url(../img/redX.png);
    background-position: center center;
}

#logoBox {
    content: none;
    margin-top: 0;
    width: 0;
}

.RepModuleA {
    background-color: #f3f1f1;
      padding: 2px 20px 10px 5px;
      border-radius: 0px 0px 10px 0px;
      margin-top: 10px;

}

.RepModuleB {
  background-color: #e7eefd;
  padding: 2px 20px 10px 5px;
  border-radius: 0px 10px 0px 0px;
  margin-top: 10px;
}

.reportsWidget {
  margin-left: 0px;
}

.chosen-select {
  width: 220px;
  margin-left: 3px;
}

.helpIcon{

  visibility: hidden;
}

.reportsLeftBarWrapper{
  display: inline-table;
  float: left;
  clear: none !important;
}

.fsAccordion {
  width: 250px;
  float: left;
  padding-left: 4px;
  margin-left: 10px;
}

.Gridwrapper {display: block; float: right;clear: none;}
.fullWidth{margin-right: 5px; text-align: center;}

.modGeneral{
  background-color: #F9F9FD;
  clear: both;
  float: left;
  border-color: #808080 !important;
}

.modFootMain{
  overflow: hidden;
  border-right: 1px solid;
  border-left: 1px solid;
  position: relative;
}

.modFootLip {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 1px solid;
  border-left: 1px solid;
  border-bottom: 1px solid;
  height: 10px;
  width: 100%;
  margin: 0px;
  cursor: pointer;
}

.chosen-footer {
  padding: 10px 10px 10px 10px;
  clear: both;
}

.chosen-footer-label {
  float:left;
  width: 100px;
}

.reportsGrid {
  float: left;
  width:100%;
  position: relative;
  overflow: hidden;
  border-left: 1px dotted #BEBEBE;
}

.disableGrid {
  pointer-events:none
}

.footer-select {
  width: auto;
  max-width: 70%;
}

.modFootTabBox {
  height: 50px;
  position: relative;
  float: right;
  clear: both;
}

.modFootTab {
  position: absolute;
  background-color: #3c58bc;
  color: white;
  top: 0px;
  right: 20%;
  padding: 0px 10px 0px 10px;
  text-align: center;
  border-right: 1px solid #737373;
  border-left: 1px solid #737373;
  border-bottom: 1px solid #737373;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.modContent {
  border-left: 1px solid #737373;
  border-right: 1px solid #737373;
  padding: 2px;
  background-color: #F9F9FD;
  padding-left: 10px;
  padding-right: 10px;
}

.statNode {
  margin: 2px;
  padding: 10px;
  float: left;
  border: 1px solid;
  border-color: #808080;
  border-radius: 8px;
  background-color: white;
  width: 100px;
  height: 100px;
}

.modHeader {
  border-top: 1px solid #737373;
  border-left: 1px solid #737373;
  border-right: 1px solid #737373;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background-color: #F9F9FD;
  display: table;
}

.changed {
  background: #C2FFC2;
}

.moduleModalMain {
  background: #fefefe;
  border: gray solid 1px;
  border-radius: 5px;
  position: fixed;
  left: 50%;
  top: 25%;
  z-index: 11;
  width: 360px;
  padding: 25px;
  box-shadow: 0px 3px 36px -5px rgba(0,0,0,0.75);
  height: 145px;
}

.modalReconnectButton {
  margin-top: 18px;
  display: block !important;
  margin-left: auto;
  margin-right: auto;
}

#livePhoneCallsInsertContainer {
  width: 100%;
  display: table;
}

#livePhoneCallsExtensionsContainer {
  width: 100%;
  overflow: hidden;
}

.liveCallBox {
  float: left;
  margin: 3px;
  width: 220px;
  z-index: 2;
}

.liveCallHeader {
  height: 30px;
  padding: 5px;
  text-align: center;
  background-color: #0F4E8B;
  color:#F0F0F0;
  cursor: -webkit-grab;
}

.liveCallBody {
  height: 150px;
  border-top-color: transparent;
  padding: 8px 5px 5px 5px;
  color:#F0F0F0;
  background-color: #2a72b9;
}

.bodyA {
  width: auto;
  height: 40px;
  text-align: center;
  margin-bottom: 5px;
}

.bodyATitle {
  font-size: 70%;
  height: 11px;
}

.bodyANumber {
  height: 16px;
  margin-bottom: 7px;
  font-size: 120%;
}

.bodyAName {
  height: 16px;
  font-size: 90%;
  font-style: italic;
  color: #F0F0F0;
}

.bodyB {
  width: auto;
  height: 40px;
  margin: 4px;
  color: #F0F0F0;
}

.bodyBInside {
  float: left;
  width: 33.3333%;
  height: 100%;
  position: relative;
}

.bodyBInfo {
  width: 100%;
  position: absolute;
  top: 0;
  text-align: center;
  font-size: 100%;
  text-transform: capitalize;
  color: #0F4E8B;
}

.bodyBUnit {
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
  text-align: center;
  font-size: 75%;
  padding-bottom: 17px;
  color: #0F4E8B;
}

.bodyC {
  width: auto;
  height: 30%;
  text-align: center;
  line-height: 48px;
}

.liveExtensionBox {
  width: 150px;
  height: 150px;
  margin: 5px;
  position: relative;
  background-color: #EBEBEB;
  float: left;
}

.liveExtensionStatus {
  border-radius: 11px;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  box-shadow: 0px 3px 36px -5px #D6D6D6;
}

.liveExtensionNumber {
  height: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 130%;
  line-height: 50px;
  background-color: #2a72b9;
  color: #F0F0F0;
}

.liveExtensionName {
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 50px;
  font-size: 110%;
  background-color: #2a72b9;
  color: #F0F0F0;
}

.liveExtensionDropArea {
  height: 40%;
  display: block;
  background-color: #E0E5F5;
}

.liveConfHeader{
  margin-top: 0;
}

.liveConferenceNumber {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 130%;
  line-height: 38px;
  background-color: #2a72b9;
  color: #F0F0F0;
}

.liveConferenceName {
  height: 35%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 38px;
  font-size: 110%;
  background-color: #2a72b9;
  color: #F0F0F0;
}

.liveConferenceDropArea {
  height: 40%;
  display: block;
  background-color: #E0E5F5;
}

.liveConferenceBox {
  width: 150px;
  height: 38px;
  margin: 5px;
  position: relative;
  background-color: #EBEBEB;
  float: left;
}

.liveConferenceStatus {
  border-radius: 11px;
  position: absolute;
  top: 8px;
  left: 12px;
  width: 22px;
  height: 22px;
  box-shadow: 0px 3px 36px -5px #D6D6D6;
}

.dropSingle {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  float: left;
  font-size: 200%;
  background-color: #0F4E8B;
}

.dropA {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  float: left;
  font-size: 200%;
  background-color: #0F4E8B;
}

.dropB {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  float: right;
  font-size: 200%;
  background-color: #0F4E8B;
}

.icon-user:before {
  color: #F0F0F0;
}

.icon-inbox:before {
  color: #F0F0F0;
}

.callFadeIn {
  -webkit-animation: fade .75s;
  animation: fade .75s;
  opacity: 1;
}

@-webkit-keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}

.dropHighlight {
  background-color: pink;
}

.liveCallsLegend {
  border: 1px solid gray;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 3px;
  display: inline-flex;
  float: left;
}

.liveCallsLegendElement {
  width: auto;
  display: inline-flex;
  margin: 3px;
}

.liveCallsLegendColor {
  width: 22px;
  height: 22px;
  border: 1px solid gray;
  border-radius: 11px;
  box-shadow: 0px 3px 36px -5px #D6D6D6;
  margin-right: 8px;
}

.liveCallsLegendName {

}
.cust-live-calls-footer {
  float: left;
  text-align: center;
  padding-left: 16px;
  line-height: 52px;
  top: 50%;
}

.liveQueueCallBox {
  float: left;
  margin: 3px;
  width: 220px;
  height: 150px;
  z-index: 2;
  background-color: #E0E5F5;
  border-radius: 10px;
}

.queueCallBody1 {
  border: 1px solid gray;
  height: 90px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.queueCallBody1A {
  text-align: center;
  line-height: 40px;
}

.queueCallBody1B {
  text-align: center;
  line-height: 8px;
}

.queueCallBody1C {
  text-align: center;
  line-height: 41px;
}

.queueCallBody2 {
  height: 60px;
  border: 1px solid gray;
  border-top: 0px solid;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #EBEBEB;
  text-align: center;
  line-height: 56px;
}

.LiveQueueAgentBox {
  border: 1px solid gray;
  border-radius: 10px;
  width: 240px;
  height: 220px;
  float: left;
  clear: none;
  margin: 5px;
  position: relative;
}

.liveQueueAgentStatus {
  border: 1px solid gray;
  border-radius: 11px;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  box-shadow: 0px 3px 36px -5px #D6D6D6;
}

.liveQueueAgentNumber {
  float: right;
  margin-right: 20px;
  font-size: 150%;
  line-height: 38px;
}

.liveQueueAgentName {
  text-align: center;
  line-height: 90px;
}

.liveQueueAgentCallInsert {
  text-align: center;
  position: absolute;
  top: 60px;
  right: 5px;
}

.liveQueueContainer {
  width: 100%;
  clear: both;
  overflow: visible;
}

.spanSetting {
  width: 100% !important;
  clear: both !important;
  overflow: hidden !important;
  border: 1px solid #eee !important;
  border-radius: 10px 10px 0 0 !important;
  display: block;
  margin-left: 30px;
  margin-bottom: 30px;
  padding: 30px;
}

.spanSettingCnt {
  width: 70% !important;
  clear: both !important;
  overflow: hidden !important;


}

.btn-right {float: right;}

ul.logList {
  width:500px;
}

.logTable td{
  padding: 7px;
  text-align: center;
}

.logTable th{
  padding: 7px;
  text-align: center;
}
#portalSettingSM {
  font-size: 11px;
  line-height: 11px;
}
#portalSettingMsg{
display: block;
float: left;
clear: none;
width: 45%;
}

#portalSettingWrp{
display: block;
float: left;
clear: none;
width: 45% !important;
}

.removed {display: none !important;}

.MFCmodalMessage {
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  background-color: #F5F5F5;
  margin-bottom: 20px;
}
.Dbutton {
  border: 1px solid #EB961E;
  border-radius: 8px;
  padding: 6px;
  float: right;
  background-color: #f0ad4e;
  display: block;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

}

.phoneNumbersLegend {
  display: inline-block;
  margin-top: 10px;
  width: 186px;
  margin-left: -3px;
}

.phoneNumbersLegendElement {
  width: auto;
  margin: 3px !important;
  position: relative;
  bottom: 2px;
}

.phoneProvisioningLabel1 {
  font-size: 73%;
  position: absolute;
  top: 12.5px;
}

.phoneProvisioningLabel2 {
  font-size: 73%;
  position: relative;
  left: 40px;
  bottom: 1.5px;
}

.btn-warning.active2 {
  color: #F0F0F0;
  background-color: #0F4E8B;
  border-color: #0F4E8B;
}

#onboarding-table {
  border:none;
}
#onboarding-table tr td{
  padding:10px;
}
#onboarding-table tr th{
  padding:10px;
  text-align: center;
}
/*tr.innerOnboarding {
  border-bottom: thin solid #2a72b9;
}*/
.onboardingStatus {
  text-align: center;
  vertical-align: text-top;
  padding:5px;
}
.onboardingStatus label{
  text-align: center;
  vertical-align: text-top;
  padding:5px;
  margin-top:-10px;
}
.onboardingSettingsTable tr td{
  padding:10px;
  text-align:center;
}
.onboardingSettingsTable tr th{
  padding:10px;
  text-align:center;
}
table.onboardingSettingsTable {
  margin-top:-10px;
}
.discoveryStatus {
  margin-left:-50px;
}
.videoContent {
    display:none;
    margin:auto;
}

.videoContent a {
  color:#F0F0F0;

}
#video_content p {
 display: inline-block;
 vertical-align: middle;
 float:left;
 margin-top:325px;
}

#video_content p {
  -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  background-color:#ededed;
  -webkit-border-top-left-radius:6px;
  -moz-border-radius-topleft:6px;
  border-top-left-radius:6px;
  -webkit-border-top-right-radius:6px;
  -moz-border-radius-topright:6px;
  border-top-right-radius:6px;
  -webkit-border-bottom-right-radius:6px;
  -moz-border-radius-bottomright:6px;
  border-bottom-right-radius:6px;
  -webkit-border-bottom-left-radius:6px;
  -moz-border-radius-bottomleft:6px;
  border-bottom-left-radius:6px;
  text-indent:0;
  border:1px solid #dcdcdc;
  display:inline-block;
  color:#F0F0F0;
  height:50px;
  line-height:50px;
  width:100px;
  text-decoration:none;
  text-align:center;
  text-shadow:1px 1px 0px #ffffff;
}
#video_content p {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
  background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
  background-color:#dfdfdf;
}
#video_content p {
  position:relative;
  top:1px;
}

.videoList {
    color: #FFF;
    z-index:8;
    padding:10px;
}
.videoList ul {
    list-style:none;
    padding:10px;
}
.videoList ul li a {
    list-style: none;
    color:#F0F0F0;
    //height: 50px;
    line-height: 30px;
    font-size: 18px;
}
.videoClose {
 display: inline-block;
 float:right;
 }

.videoButton {
  float:right;
  margin-top:350px;
}

.handle {
  -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  box-shadow:inset 0px 1px 0px 0px #bbdaf7;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0F4E8B), color-stop(1, #0F4E8B) );
  background:-moz-linear-gradient( center top, #0F4E8B 5%, #0F4E8B 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0F4E8B', endColorstr='#0F4E8B');
  background-color:#0F4E8B;
  -webkit-border-top-left-radius:15px;
  -moz-border-radius-topleft:15px;
  border-top-left-radius:15px;
  -webkit-border-top-right-radius:15px;
  -moz-border-radius-topright:15px;
  border-top-right-radius:15px;
  -webkit-border-bottom-right-radius:0px;
  -moz-border-radius-bottomright:0px;
  border-bottom-right-radius:0px;
  -webkit-border-bottom-left-radius:0px;
  -moz-border-radius-bottomleft:0px;
  border-bottom-left-radius:0px;
  text-indent:0;
  border:1px solid #0F4E8B;
  display:inline-block;
  color:#F0F0F0;
  //height:50px;
  font-size: 16px;
  padding:8px;
  //width:86px;
  text-decoration:none;
  text-align:center;
  margin-top:45.5px;
  margin-left:46px;
  text-decoration:none;
}
.handle:hover {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2a72b9), color-stop(1, #2a72b9) );
  background:-moz-linear-gradient( center top, #2a72b9 5%, #2a72b9 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a72b9', endColorstr='#2a72b9');
  background-color:#2a72b9;
  color:#F0F0F0;
  text-decoration:none;
}.handle:active {
  position:relative;
  top:1px;
  text-decoration:none;
}
.handle:visited {
  color:#F0F0F0;
  text-decoration:none;
}
.handle {
  -webkit-transform: rotate(-90deg);
}

.slide-out-div {
    width: 600px;
    height:350px;
    border: 1px solid #0F4E8B;
    margin-top:-30px;
    z-index: 1000;
    background-color: #0F4E8B;
}

.slide-out-div.open {
    width: 600px;
    height:350px;
    border: 1px solid #0F4E8B;
    margin-top:-30px;
    z-index: 1000;
    //background-color: rgba(65,113,158,.35);
    background-color: #0F4E8B;
}
.navbar {
  background-color: #0F4E8B;
  border:none;
  border-radius:0px;
}

.navbar-inverse .navbar-nav li a {
  color:#F0F0F0;
  font-size:16px;
}

.navbar-inverse .navbar-brand {
  color:#F0F0F0;
  font-size:16px;
}

.dropdown-menu li.fc_header a {
  color: #F0F0F0;
}

.cust-subnav {
  background-color:#2a72b9;
  height:50px;
}

.cust-subnav li a {
  color: #F0F0F0;
}

.cust-subnav li a:hover {
  color: #F0F0F0;
  background-color: #2a72b9;
}

.cust-subnav li a:focus {
  color: #F0F0F0;
  background-color: #2a72b9;
}

.cust-subnav li a:active {
  color: #F0F0F0;
  background-color: #2a72b9;
}

.cust-subnav ul li ul.dropdown-menu {
  background-color: #0F4E8B;
}

.cust-subnav ul li ul.dropdown-menu li a{
  color:#F0F0F0;
}

.cust-subnav ul li ul.dropdown-menu li a:hover{
  color:#F0F0F0;
  background-color: #2a72b9;
}

.cust-navbar-header {
  background-color: #2a72b9;
}

.cust-navbar-header .yiptel {
  background-color: #2a72b9;
}

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
  color: #F0F0F0;
  background-color: #2a72b9;
}

.dropdown-menu>li>a {
  color: #F0F0F0;
  padding-left: .5em;
  padding-right: .5em;
}

.dropdown-menu {
  border:none;
  background-color: #2a72b9;
}

.dropdown-menu>li>a:hover {
  color: #F0F0F0;
  background-color: #0F4E8B;
}



.btn-info {
  background-color: #0F4E8B;
  color:#F0F0F0;
  border-color: #0F4E8B;
}

.btn-info:visited {
  background-color: #0F4E8B;
  color:#F0F0F0;
  border-color: #0F4E8B;
}

.btn .btn-xs .btn-info .createNew {
  font-size:16px;
}

.btn-info:hover {
  background-color: #0F4E8B;
  color:#F0F0F0;
  border-color: #0F4E8B;
}

.btn-info.active {
  background-color: #0F4E8B;
  color:#F0F0F0;
  border-color: #0F4E8B;
}

.text-info {
  color: #2a72b9;
}

.btn-primary {
  color: #F0F0F0;
  background-color: #0F4E8B;
  border-color: #0F4E8B;
}

.btn-primary:hover {
  color: #F0F0F0;
  background-color: #0F4E8B;
  border-color: #0F4E8B;
}

.table table-striped {
  border: solid thin #0F4E8B;
  margin-left: 15px;
}

.text-danger {
  color:#891010;
}

.badge-important {
  background-color: #891010;
}

.badge-default {
    background-color: #999999;
}

.badge-success {
    background-color: #468847;
}

.badge-warning {
    background-color: #f89406;
}

.badge-info {
    background-color: #3a87ad;
}

.badge-inverse {
    background-color: #333333;
}

.btn-danger {
  color: #F0F0F0;
  background-color: #891010;
  border-color: #891010;
}

.btn-warning {
  color: #F0F0F0;
  background-color: #0F4E8B;
  border-color: #0F4E8B;
}

.btn-warning:hover {
  color: #F0F0F0;
  background-color: #2a72b9;
  border-color: #2a72b9;
}

.toggle-switch input:checked + label {
  background-color: #2a72b9;
}

.label-warning {
  background-color: #C06B16;
}

.btn-default {
  color: #F0F0F0;
  background-color: #108989;
  border-color: #108989;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
  color: #F0F0F0;
  background-color: #108989;
  border-color: #108989;
}

.btn-success {
  color: #F0F0F0;
  background-color: #10894D;
  border-color: #10894D;
}

.label-success {
  background-color: #10894D;
}

.label-extension {
  background-color: rgb(42, 114, 185);
}

.label-route {
  background-color: rgb(233, 60, 44);
}

.label-managed-route {
  background-color: rgb(241, 102, 25);
}

.label-conference {
  background-color: rgb(24, 46, 89);
}

.label-forwarding {
  background-color: rgb(163, 165, 164)
}

.modFootTab {
  background-color: #0F4E8B;
}

.nav>li>a:hover {
  color: #F0F0F0;
  background-color: #0F4E8B;
}

.nav-pills>li.active>a {
  color: #F0F0F0;
  background-color: #2a72b9;
}

span#FSReportsHeader {
  color: #2a72b9;
  text-align: center;
  font-size: 24px;
  display: table;
  margin: auto;
  width: 100%;
}

h3 {
  font-size:18px;
  color: #0F4E8B;
}

h3.panel-title {
  font-size:18px;
  color: #0F4E8B;
}

.slick-header-column {
   text-align: center;
}

.slick-header-column, .slick-header-column:before, .slick-header-column:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

#moduleHeader {
  background-color: #F0F8FF;
}

#moduleContent {
  background-color: #F0F8FF;
}

#moduleFooterLip {
  background-color: #F0F8FF;
}

#leftbarReports {
  background-color: #F0F8FF;
}

.bodyANumber a.fs-click-to-call {
  color: #F0F8FF;
}

.bodyAName a.fs-click-to-call {
  color: #F0F8FF;
}

a.fs-click-to-call:hover {
  color: #F0F8FF;
}

a.fs-click-to-call:focus {
  color: #F0F8FF;
}

li.fc_extension a:focus {
  color: #F0F8FF;
}

div.call-logs a.fs-click-to-call {
  display: inline;
  clear: both;
  font-size: 1.2em;
  padding: 10px;
  border:none;
  box-sizing: border-box;
}

div.call-logs a.fs-click-to-call:hover {
  color: #2a72b9;
}

.call-logs a i {
  color: #0F4E8B;
}

div.call-logs a.text-info {
  color: #0F4E8B;
}
#nprogress .bar {
  background: #29d;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;
}
/*#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #gray, 0 0 5px #gray;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}*/
#keycodes-table {
  border:none;
}
#keycodes-table tr td{
  padding:10px;
  text-align: center;
}
#keycodes-table tr th{
  padding:10px;
  text-align: center;
}
#prependOption {
  height: 15px;
}
.PrependInput {
  width: 70%;
  display: inline;
}
.form-control {
  width: 100%;
}
.notificationsTableRowPad {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 5px;
}
.notificationsTableActionPad {
  padding-top: 5px;
  padding-bot: 5px;
}
.notificationsWebHookText {
  word-wrap: break-word;
}
.notificationsRmLeftPad {
  padding-left: 0px;
}
.notificationsEventPad {
  padding-top: 25px;
}
.notificationsRowBorder {
  padding-left: 5px;
  padding-right: 5px;
  border-bottom-style: solid;
  border-color: lightgray;
  border-width: 1px;
}
.btn-sm {
  border-style: none;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
    text-align: center;
}

.remove-list-style {
  list-style-type: none;
  padding-left: 0px;
}

.nav > li > a.motd-icon {
  padding: 15px 10px 15px 10px;
}
ul.motd-dropdown {
  width:280px;
  padding:10px;
}
.motd-dropdown li{
  padding: 10px;
}
.nav>li>ul>li {
  list-style: none;
}

.nav li .fa {
    color: #F0F0F0;
}

.navbar-nav>li>ul {
  padding: 0px;
}
.navbar-nav>li>a {
  position: relative;
  display: block;
  padding: 15px;
  line-height: 20px;
  text-decoration: none;
}
/* Had to duplicate above do to the DOM injection used. */
.navbar-nav>li>li>a {
  position: relative;
  display: block;
  padding: 15px;
  line-height: 20px;
  text-decoration: none;
}

.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-nav>#adminhelper>.open> a {
  background-color: #2a72b9;
  color: #F0F0F0;
}

.navbar-inverse #yiptel-nav>.open>a,
.navbar-inverse #yiptel-nav>.open>a:hover,
.navbar-inverse #yiptel-nav>.open>a:focus,
#yiptel-nav>#adminhelper>.open> a {
  background-color: #8D8D8D;
  color: #F0F0F0;
}

.cust-nav-right {
  padding-left: 15px;
  margin-bottom: 0px;
}
.cust-inner-nav-right {
  width: 100%;
}
.navbar-nav>li>li>.dropdown-menu {
  margin-top: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.dropdown-menu>.cust-nav-font-white {
  color: #F0F0F0;
}
.cust-nav-form-group {
  padding-left: 15px;
}
.cust-content-padding {
  padding-left: 20px;
  padding-right: 20px;
}
.cust-leftbar-padding {
  padding-bottom: 10px;
}
.cust-call-detail-records {
  margin-top: 10px;
}
.cust-call-block {
  max-width: 370px;
}
.cust-call-forward {
  max-width: 370px;
}
.cust-call-screening {
  max-width: 370px;
}
.cust-create-fax {
  max-width: 370px;
}
.cust-fax-progress-container {
  padding-left: 15px;
  padding-right: 15px;
}
.cust-fax-progress-inner {
  padding: 0px;
}
.cust-call-forward-select {
  display: inline-block;
  width: 85px;
}
.subnav {
  margin-top: -20px;
  margin-bottom: 20px;
}
.cust-pagination {
  max-width: 150px;
}
.cust-faxes-page-per {
  max-width: 105px;
}
.cust-fax-button {
  width: 125px;
  margin-top: 1px;
  margin-bottom: 1px;
}
.cust-greetings-button {
  width: 255px;
}
.cust-recording-switch {
  max-width: 450px;
}
.cust-actions-background {
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #F5F5F5;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(229, 299, 299);
}
/* This is to create spacing when buttons stack. */
.cust-action-button {
  margin-top: 1px;
  margin-bottom: 1px;
}

.cust-well {
  margin-top: 10px;
}
.cust-call-hist-action {
  margin: 1px;
  /*width: 65px;*/
}
.cust-call-hist-pagination {
  padding-left: 0px;
}
.cust-call-hist-dropdown {
  margin-bottom: 5px;
}
.backgrid-paginator > ul {
  padding-left: 0px;
}
.cust-call-hist-filters {
  display: none;
  padding: 10px;
  background-color: rgba(59, 87, 187, .25);
}

/* Live Conferencing
 ----------------------*/
a.confRoom {
  cursor:pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: justify;
}

/* Conference Room Manager
-----------------------*/

.ajax-file-upload {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor:pointer;
  line-height:inherit;
  height:inherit;
  margin:0 10px 10px 0;
  display: inline-block;
  text-decoration: none;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding: 5px 10px 5px 10px;
  color: #fff;
  background: #2a72b9;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  vertical-align: inherit;
}

.ajax-file-upload:hover {
  background: #1061a6;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ajax-upload-dragdrop span b {
  vertical-align: -webkit-baseline-middle;
}

#roomSettings .user-clear-icon {
    display: inline-block;
    margin-left: 1em;
    color:red;
    cursor: pointer;
}


/* Box Shadows
-----------------------*/
.box-shadow--2dp {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.box-shadow--3dp {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.box-shadow--4dp { /* RECOMMENDED */
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}
.box-shadow--6dp {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}
.box-shadow--8dp {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}

/* SMS start. */
div.messages {
  overflow: auto;
  min-height: 350px;
  max-height: 350px;
}
.respond{
  padding-top:20px;
}
.thread textarea[name="sms"] {
  box-sizing:border-box;
    display:inline-block;
    clear:both;
    float:left;
    border:0px;
    background:#f1f1f1;
    padding:10px;
    width:100%;
    height:60px;
    max-width: 300px;
    border-radius: 0;
    resize:none;
}
.thread textarea[name="sms"]:focus{
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 3px rgba(82,168,236,0.6)
}

.thread button {
  color:#666;
  background: #c1c1c1;
  border:0;
  width:100px;
  height:60px;
}
.thread input {
    border: 0;
    border-radius: 0;
    background: #f1f1f1;
}
.thread select {
    border: 0;
    border-radius: 0;
    color: #777;
    background: #f1f1f1;
-webkit-appearance: textfield;
padding: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

/*.thread button:hover, .thread button:focus, .thread button:disabled,
.threads button:hover, .threads button:focus, .threads button:disabled  {
    background: #a1a1a1;
    color:#333;
}*/

/*.threads button {
  padding:10px;
  font-weight: bold;
  color:#666;
  background: #c1c1c1;
  border:0;
  width:100%;
}*/

a.thread, a.threads-number {
  border:0;
  color:#3c58bc;
}

.threads div.accordion-group {
  border:none;
}

.threads div.accordion-heading {
  background-color: #fff;
}
.threads div.accordion-inner {
  box-sizing:border-box;
  background-color: #f1f1f1;
  padding:0;
  border:0;
}
.thread h3 {
  margin: 0;
line-height: 24px;
font-size: 36px;
color: #777;
}


.thread a:hover {
  background-color: gray;
}

/*.incoming {
  font: 15px Helvetica, Arial, sans-serif;
  margin: 1em 51% 1em 0;
  padding: 0 4px;
  position: relative;
  border-width: 1px;
  border-color: #9DA0A6 #9DA0A6 #9DA0A6 transparent;
  border-style: solid;
  background-color: #d2d2d2;
}*/
/*.outgoing {
  background-color: #a9e24c;
  font: 15px Helvetica, Arial, sans-serif;
  margin: 1em 0 1em 51%;
  padding: 0 4px;
  position: relative;
  border-width: 1px;
  border-color: #309b19 transparent #309b19 #309b19;
  border-style: solid;
}*/
.incoming small, .outgoing small {
  font-size: 75%;
  color:#919191;

}
.threads [class^="icon-"].pull-right {
  margin-top: 0.3em;
}

.cust-sms-ta-container {
  padding: 0px;
}
.cust-sms-text-area {
  width: 100%;
}
.cust-sms-but-container {
  padding: 0px;
}
.cust-sms-send-button {
  width: 100%;
  height: 46px;
}
.cust-sms-back-button {
  margin-bottom: 10px;
}
.cust-sms-num-input {
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;
}
.cust-no-thread {
  margin: 0px;
}
.cust-sms-main-cont {
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
  padding: 25px;
}
.cust-sms-mess-cont {
  border-style: solid;
  border-width: 1px;
  border-color: lightgray;
}
.cust-sms-cont-list {
  margin: 0px;
  padding: 10px;
  width: 90%;
}
.nav>li>a.cust-sms-cont-list:hover {
  margin-right: 0px;
  color: #0F4E8B;
  background-color: rgba(0, 74, 251, 0.3);
}
.nav>li>a.cust-sms-del-conv:hover {
  margin-right: 0px;
  color: white;
  background-color: rgba(255, 0, 0, 0.3);
}
.cust-sms-thread {
  padding: 0px;
}
.messages  #message{
   clear:both;
    float:left;
    /* Chat bubble background color. */
    background-color:#B5FF91;
    max-width: 60%;
    min-width: 25%;
    margin: 0 20px 10px 20px;
    position:relative;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-sizing:border-box;
    padding:10px;
    color:#414141;
}
.messages div.tail {
   width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: #B5FF91 #B5FF91 transparent transparent;
    position:absolute;
    left: -15px;
    top: 0px;
}
.messages  #message.outgoing {
  float:right;
  /* Chat bubble background color. */
  background-color: #99CCFF;
}

.messages .outgoing .tail {
  left: auto;
  top: auto;
  right: -15px;
  bottom: 0px;
  border-color: transparent transparent #99CCFF #99CCFF;
}



/* Live Conferencing
-----------------------*/
a.confRoom {
  cursor:pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: justify;
}

/* Box Shadows
-----------------------*/
.box-shadow--2dp {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.box-shadow--3dp {
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.box-shadow--4dp { /* RECOMMENDED */
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}
.box-shadow--6dp {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}
.box-shadow--8dp {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}
.cust-sms-mess-head {
  margin-top: 0px;
}
.cust-sms-mess-mess {
  word-wrap: break-word;
}
.cust-sms-del-indiv {
  font-size: 12px;
}
/* This is normally a natural trait of a badge, however it was not
 * working in the instance this class is used.  So I am reinforcing
 * this trait here. */
.cust-sms-list-badge {
  float: right;
}
.nav-tabs>li>a.cust-sms-del-conv {
  text-align: center;
  color: #FF4D4D;
  height: 42px;
  width: 10%;
  margin-right: 0px;
  font-size: 12px;
  opacity: 1;

}

.cust-routes-btn-tlbar .btn {
  margin-bottom: 5px;
}
.cust-routes-list {
  padding-left: 0px;
}
.cust-routes-dropdown {
  max-height: 200px;
}
.cust-routes-dd-tc {
  max-height: 250px;
}
.cust-man-route-edit {
  width: 100%;
}
.cust-acct-sett-cont {
  padding-top: 25px;
}
.cust-alert-noti-add {
  margin-bottom: 15px;
}
.cust-zip-rout-buttons {
  margin-left:2px;
  margin-right: 2px;
  margin-bottom: 10px;
  max-width: 250px;
}
.cust-zip-rout-search {
  max-width: 300px;
}
.cust-no-marg-left {
  margin-left: 0px;
}
.cust-zip-rout-multi {
  width: 100%;
}
.cust-zip-rout-edit {
  min-width: 200px;
}
.cust-rec-man-tog {
  padding-left: 10px;
  padding-right: 10px;
}
.cust-rec-man-buttons {
  margin-left:2px;
  margin-right: 2px;
  margin-bottom: 10px;
  max-width: 250px;
}
.cust-rec-man-multi {
  width: 100%;
}
.cust-rec-man-TH {
  min-width:250px;
}
.cust-LDAP-set-titles {
  margin-top: 7px;
}
.cust-gen-set-titles {
  margin-top: 7px;
}
.cust-queue-add-num {
  padding-left: 15px;
  display: table;
}
.cust-agent-dropdown {
  max-height: 300px;
}
.cust-agent-skills-list {
  margin-top: 5px;
  margin-bottom: 5px;
}
.cust-agent-tab-cont {
  overflow:inherit;
}
.cust-autoAtten-Action {
  min-width: 150px;
}
.cust-autoAtten-Selection {
  min-width: 200px;
}
.cust-autoAtten-Arguments {
  min-width: 150px;
}
.cust-autoAtten-Button {
  margin: 5px;
}
/* This will allow the navigation tabs
 * to stack in mobile view. */
@media (max-width: 767px) {
    .nav-tabs > li {
        float:none;
    }
}

.cust-email-report-li {
  margin-bottom: 5px;
}
.cust-ext-sum-calls {
  width: 135px;
  margin: 2px;
  background-color: #2a72b9;
  font-family: inherit;
  font-weight: normal;
}
.cust-ext-sum-min {
  width: 175px;
  margin: 2px;
  background-color: #2a72b9;
  font-family: inherit;
  font-weight: normal;
}
.cust-ext-sum-ext {
  width: 175px;
  margin: 2px;
  background-color: #2a72b9;
  font-family: inherit;
  font-weight: normal;
}
.cust-admin-dash-hist {
  margin-right: 0px;
  min-width: inherit;
}
.cust-ext-sum-card {
  margin-right: 0px;
  max-width: inherit;
  min-width: inherit;
}
.cust-admin-dash-calls {
  width: 85px;
  height: 34.25px;
  margin: 2px;
  font-family: inherit;
  font-weight: normal;
}
.cust-admin-dash-mins {
  width: 112px;
  height: 34.25px;
  margin: 2px;
  font-family: inherit;
  font-weight: normal;
}
.cust-admin-dash-exts {
  width: 112px;
  height: 34.25px;
  margin: 2px;
  font-family: inherit;
  font-weight: normal;
}
.cust-admin-dash {
  min-width: 240px;
}
.cust-admin-dash-pager {
  list-style: none;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  width: 100%;
}
.cust-admin-sum-stat {
  height: 100px;
  width: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: #FFFFFF;
}
.cust-quick-link {
  padding:0;
  min-width: inherit;
  max-width: inherit;
}
.cust-admin-sum-container {
  min-width: 100px;
  margin: 2px;
}
.cust-admin-sum-text {
  font-size: 24px;
  color: #0F4E8B;
  margin-bottom: 0px;
}
.cust-admin-flag-button {
  display: none;
}
.cust-quick-link-text {
  margin-top: 5px;
  margin-bottom: 5px;
  color: #0F4E8B;
  cursor: pointer;
  display: block;
  text-align: center;
}
.cust-quick-link-text:hover {
  color: #0F4E8B;
  background-color: #F0F0F0;
  cursor: pointer;
  text-decoration: none;
}
.cust-quick-link-items {
  display: inline;
}
.cust-quick-link-prim-cont {
  padding: 0px;
}
.cust-quick-link-sec-cont {
  padding:0;
  margin-left:5px;
  margin-right:0;
  min-width:0;
}
.cust-sms-mess-for {
  margin-top: 8px;
}



/* Universal Presence
-----------------------*/


#UniPres #integrations{
  margin: 20px;
  display: none;
}

#UniPres #wizard{
  display: none;
}

#UniPres #wizard_page{
  margin-top: 2em;
  margin-bottom: 2em;
}

#UniPres #comboSave{
  display: none;
}

#UniPres #order{
  margin: 20px;
}

#UniPres #order .panel-heading {
  border-bottom: 0;
}

#UniPres #order .panel-body{
  padding: 15px;
  display: none; /*don't display unless explicitly asked for*/
}

#UniPres #order .wizItem{
  height: auto;
  cursor: auto;
}

#UniPres #order .wizItem img{
  vertical-align: bottom
}

#UniPres #sortable{
  margin-top: 2em;
}

#UniPres #sortable img{
  vertical-align: initial;
}


#UniPres .pointer{
  background: white;
  cursor: pointer;
  transition-property: background;
  transition-duration: 0.33s;
  transition-timing-function: linear;
}

#UniPres .panel-body{
  padding: 10px;
  border: 1px white;
}

#UniPres .hoverBorder {
  border: 1px transparent solid;
}

#UniPres .hoverBorder:hover {
  border: 1px #e1e1e1 solid;
  border-radius: 3px;
}

#UniPres .preview {
  padding: 15px;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
}


#UniPres #literalPreview{
  line-height: 180%;
}

#UniPres .wizItem{
  padding: 0 4px;
  font-size: 90%;
  color: #fff;
  display: inline-block;
  height: 25px;
  background-color: #333;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  cursor: pointer;
}

#UniPres .wizItem img{
  vertical-align: top;
}

.wizSequenceButton {
  width: 65px;
}


#UniPres .dropdown-menu{
  max-height: 400px;
}

/* END Universal Presence
-----------------------*/

span[class*="glyphicon-one-fine"] {
    margin-bottom: -.8em;
    overflow: hidden;
}
.glyphicon-one-fine-red-dot:before {
    content:"\25cf";
    font-size: 2em;
    color: red;
}
.glyphicon-one-fine-yellow-dot:before {
    content:"\25cf";
    font-size: 2em;
    color: yellow;
}
.glyphicon-one-fine-purple-dot:before {
    content:"\25cf";
    font-size: 2em;
    color: white;
}
.glyphicon-one-fine-full-dot:before {
    content:"\25cf";
    font-size: 2em;
}
.glyphicon-one-fine-empty-dot:before {
    content:"\25cb";
    font-size: 2em;
}

.globals-table {
  border: solid thin;
}

video#RTCvideo {
    display: none;
}

/* Voicemail
-----------------------*/
.vm-actions {
  margin-top:20px;
  margin-bottom:20px;
}

#voiceMailMessages .vm-actions{
  margin-bottom: 165px;
}

.bar {
    height: 100%;
    background-color: #b3b3b3;
    font-size: 0pt;
    width: 0px;
}
.barcontainer {
    height: 20px;
    border: 1px solid #b3b3b3;
    background-color: white;
    font-size: 0pt;
    width: 300px;
}
.showsecs {
  height: 100%;
  color: #b3b3b3;
  font-family: @sans-serif;
}
#bar {
    height: 100%;
    background-color: #b3b3b3;
    font-size: 0pt;
    width: 0px;
}
#barcontainer {
    height: 20px;
    border: 1px solid #b3b3b3;
    background-color: white;
    font-size: 0pt;
    width: 300px;
}
#showsecs {
  height: 100%;
  color: #b3b3b3;
  font-family: @sans-serif;
}


/* Contacts Import
-----------------------*/
.contacts-import h1 {
    margin-bottom: 10px;
}

.contacts-import img {
    margin-right: 5px;
}

.contacts-import .integration {
    margin-bottom: 10px;
}

.contacts-import .description {
    padding-top: 5px;
}


/* Contacts 2
-----------------------*/
.contacts ul.nav.nav-stacked.nav-pills {
  cursor: pointer;
}

.contacts textarea.note{
  max-width: 100%;
}

.contacts i.fa-star {
  color: #fdd835;
}

.contacts i.fa-minus-circle {
  color: #e53935;
}

.contacts i.fa-trash {
  color: #e53935;
  cursor: pointer;
}

.contacts i.fa-phone {
  color: #1e88e5;
  cursor: pointer;
}

.contacts i.fa-pencil {
  color: #1e88e5;
  cursor: pointer;
}

.contacts i.fa-save {
  color: #43a047;
  cursor: pointer;
}

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

.contacts .no-pad-left {
  padding-left: 0
}

.contacts .no-pad-right {
  padding-right: 0
}

.contacts .btn-add {
  margin-bottom: 1.3em;
}


/* International Telephone flags*/

.iti-flag {
  background-image: url("../img/intlTelelphone-flags.png");
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (min--moz-device-pixel-ratio: 2),
 only screen and (-o-min-device-pixel-ratio: 2 / 1),
 only screen and (min-device-pixel-ratio: 2),
 only screen and (min-resolution: 192dpi),
 only screen and (min-resolution: 2dppx) {
  .iti-flag {background-image: url("../img/intlTelelphone-flags@2x.png");}
}

.intl-tel-input .country-list {
  z-index: 3;
}

.input-valid,
.input-valid:focus {
  border-color: #3c763d !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.input-invalid,
.input-invalid:focus {
  border-color: #a94442 !important;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* Tags
-----------------------*/
.tag-details .typeahead {
    background-color: #fff !important;
}

.tag-details .label {
    display: inline-block;
    margin-right: 18px;
    vertical-align: top;
}


/* Dashboard 2.0
- Dark colors are Material 800
-----------------------*/

#dashboardContainer {
  margin: 2rem 0;
}

#dashboardControlPanel {
  margin-top: 4rem;
}

#dashboardContent .dashcard {
  /*border: 4px solid white;*/
  color:white;
}

#report-name-input {
  height: 36px;
}

#dashboardContent h5 {
color:white;
}

/*match h5 */
#dashcard-settings span.form-label{
  color:white;
  margin-top:10px;
  margin-bottom:10px;
  font-size: 14px;
  font-weight:500;
  display: inline-block;
}

#dashcard-settings div.popover-item{
  height: 34px;
  position: relative;
  vertical-align: middle;
  z-index: 1011;
  display:inline;
}

#dashboardContent #startDate,
#dashboardContent #endDate {

}

#dashboardContent #dashcard-filter {
  background-color: #0D47A1;
  /*min-height: 250px;*/
}

#dashboardContent #dashcard-settings {
  background-color: #0D47A1;
  /*min-height: 250px;*/
}

#dashboardContent .btn-default {
background-color: #00838F
}

#dashboardContent .fa{
  color: white;
}

.dashcard-header .fa-rotate-180{
  opacity: .5;
}

.dashcard-header {
  color:white;
}

.dashcard-content {
  padding: 5px;
  color: #212121;
}

.dashcard-mini {
  color:white;
  padding: 5px;
}

.dashcard-mini .row {
  margin-top: 6px;
  overflow-y: hidden;
  overflow-x: hidden;
}

.dashcard-mini .mini-card-text {
  font-weight: bold;
}

.dashcard-mini .mini-card-value {
  font-size: 1.2em;
}

.mini-card-icon {
  font-size: 48px;
  line-height: 64px;
}

.dashcard-blue7-bkg {
  background: #1976D2;
}

.dashcard-blue7-brd {
  border: 2px solid #1976D2;
}

.dashcard-green7-bkg {
  background: #388E3C;
}

.dashcard-green7-brd {
  border: 2px solid #388E3C;
}


.predict-wiz-radio-container {
  margin: 0 15%;
}

.predict-wiz-checkbox-container {
  margin: 4rem 15%;
}

.predict-wiz-radio-heading {
 font-weight: bold;
}

.predict-wiz-radio-body {
  margin-bottom: 1em;
}

.prediction-direction, .prediction-name {
  font-weight: bold;
}

#custom-gapseconds-interval-input {
  margin-bottom: 10px;
  width: 100px;
}
#custom-stepby-interval-input {
  width: 100px;
}

#report-settings-save-changes, {
  margin: 5px 0px 5px 0px;
}

/*#dashboardContent, .dashcard-blue9 {*/
  /*background: #0D47A1;*/
/*}*/

/*#dashboardContent, .dashcard-blue {*/
  /*background: #1565C0;*/
/*}*/

/*#dashboardContent, .dashcard-green9 {*/
  /*background: #1B5E20;*/
/*}*/

/*#dashboardContent, .dashcard-green {*/
  /*background: #2E7D32;*/
/*}*/

/*#dashboardContent, .dashcard-white {*/
  /*background: white;*/
/*}*/

#loveBox {
  float:right;
}

.loveBox-dropdown:hover .dropdown-menu{
  display: block;
  background-color: #2a72b9;
  color: #F0F0F0;
}

.loveBox-dropdown:hover{
  background-color: #2a72b9;
  color: #F0F0F0;
}

.loveBox-dropdown .dropdown-menu{
  color: #F0F0F0;
  background-color: #2a72b9;
}

#referralBox {
  padding:10px;
  width:500px;
}

#repPic {
    float:left;
    content: url(../img/Kerrin-Parker.png);
    width: 150px;
    margin: 10px;
}

#referralWords {
  float:right;
  width:300px;
  margin-top: -8px;
}

#startReferring:hover {
  color: #0F4E8B;
  background-color: #F0F0F0;
  border-color: #F0F0F0;
}

#startReferring:hover a{
  color: #0F4E8B;
  background-color: #F0F0F0;
  border-color: #F0F0F0;
  text-decoration: none;
}

#quickLink {
  /* padding:5px; */
}

.newquickLinkHeader {
  color: #F0F0F0;
  background-color: #0F4E8B;
  text-align: center;
  padding:5px;
}

.newquickLink {
  text-align: center;
  padding:5px;
}

#blogPosts {
  text-align: justify;
}

#tutorialList {
  text-align: justify;
}

.cust-quick-link-text-new {
  cursor: pointer;
  width: 25px;
  padding: 22px;
}

.icon-random .cust-quick-link-items {
  width:25px;
  padding:5px;
}

#startUpgrading:hover {
  color: #F0F0F0;
  background-color: #2a72b9;
  border-color: #2a72b9;
}

#startUpgrading:hover a{
  color: #F0F0F0;
  background-color: #2a72b9;
  border-color: #2a72b9;
  text-decoration: none;
}

#startUpgrading a{
  color: #F0F0F0;
  background-color: #0F4E8B;
  border-color: #0F4E8B;
  text-decoration: none;
}

#startUpgrading {
  color: #F0F0F0;
  background-color: #0F4E8B;
  border-color: #0F4E8B;
  text-decoration: none;
}

.icon-question-sign {
  color: #2a72b9;
}

.nav-pills.nav-stacked>li>a.leftbaritem:hover {
    color: #2a72b9;
    background-color: transparent;
}

.copy-link {
    color: #0F4E8B;
    background: none!important;
    border: none;
    font: inherit;
    cursor: copy;
    float: right;
    margin-left: 193px;
    margin-top: -30.5px;
    z-index: 2;
    position: fixed;
}

.copy-link-main {

    color: #2a72b9;
    background: none!important;
    border: none;
    font: inherit;
    cursor: copy;
    font-size: 72%;
    margin-left:3px;
}

.quickGlanceHeading {
  color:#2a72b9;
}

.cursor-pointer {
  cursor: pointer;
}

ul.header-menu-list{
  margin-bottom: 0px;
  padding: 6px 12px;
}

ul.header-menu-list > li{
  display:inline;
  margin: 5px;

}

ul.header-menu-list li.header-menu-item {
  display:inline;
  margin: 5px;

}

ul.header-menu-list input.header-menu-input {
  display: inline;
  width: 25%;
}

/* Creating some custom classes here for material design */
.material-input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  margin: 0 0 5px 0;
  padding:0;
  box-shadow: none;
  box-sizing: content-box;
  transition:all 0.3s;
}

/* Here are some material colors that we will want to have, they are stolen from materializecss */
/* https://github.com/Dogfalo/materialize/blob/master/dist/css/materialize.css */
/* Not importing full list due to possible collisions, BUT probably need to...... */
.green-text {
  color: #4CAF50 !important;
}

.red-text {
  color: #F44336 !important;
}

.yellow-text {
  color: #ffeb3b !important;
}

.green-text.text-lighten-1 {
  color: #66BB6A !important;
}

.white-text {
  color: #FFFFFF !important;
}
/* Overrides for the material date time picker */
.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
  background: #1976d2;
}

.dtp div.dtp-date, .dtp div.dtp-time {
  background: #2196f3;
}

.dtp table.dtp-picker-days tr > td > a.selected {
  background: #1976d2;
}

.dtp .p10 > a {
  color: #1976d2;
}

.dtp div.dtp-actual-year {
  color:#bbdefb;
}

.dtp .dtp-actual-meridien a.selected {
  background: #1976d2;
}

.hour-hand{
  stroke: #2196f3;
}

/* This does not work, must change it in the JS file specifically :(; */
/*.dtp-select-hour{
  fill:#2196f3;
}*/

/**********************************************************************************************************************/
/* FEATURE CODE CSS.                                                                                                  */
/**********************************************************************************************************************/
#featureCodeTableBody tr:before {
    display: none;
}

.fc-createNewBtn {
    margin-bottom: 15px;
}
.fc-codeInput {
    min-width: 80px;
}
.fc-actionBtnCont {
    min-width: 100px;
}

/* Button for loading the Flags Modal */
#loadTenantFlagsModal {
    position: absolute;
    top: 300px;
    left: -44px;
    z-index: 5;
    outline: none;

    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;

}

#loadTenantFlagsModal .fa {
    color: white
}

#flags-slider-pane {
    /* background: #0F4E8B; light blue */
    background: #2a72b9;
    padding: 16px;
    color: white;
    opacity: .98;
    z-index: 2;
}

#flags-slider-pane textarea {
    resize: vertical;
}

#flags-slider-pane label {
    font-weight: 500;
}

#flags-slider-pane h4 {
    text-align: center;
}

#flags-slider-pane .passwd-msg {
    color: red;
}

#flags-slider-pane h5 {
    font-weight: 400;
}

#flags-slider-pane ul.dropdown-menu {
    text-align: left;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-top-4 {
    padding-top: 4px;
}


/*Using for delete icons to keep vertically centered
 and red in conference rooms*/
#user-attach-rec .cr-delete-icon {
  color: tomato;
  display: inline-block;
  vertical-align: -7px;
  float: none;
}

.buttonConfigHeader {
  text-decoration: none;
  color: black;
}

a.buttonConfigHeader:hover {
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  color:black;
}

/**********************************************************************************************************************/
/* FEATURE CODE CSS.                                                                                                  */
/**********************************************************************************************************************/
#featureCodeTableBody tr:before {
    display: none;
}

.fc-createNewBtn {
    margin-bottom: 15px;
}
.fc-codeInput {
    min-width: 80px;
}
.fc-actionBtnCont {
    min-width: 100px;
}

/* Button for loading the Flags Modal */
#loadTenantFlagsModal {
    position: absolute;
    top: 300px;
    left: -44px;
    z-index: 5;
    outline: none;

    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;

}

#loadTenantFlagsModal .fa {
    color: white
}

#flags-slider-pane {
    /* background: #0F4E8B; light blue */
    background: #2a72b9;
    padding: 16px;
    color: white;
    opacity: .98;
    z-index: 2;
}

#flags-slider-pane textarea {
    resize: vertical;
}

#flags-slider-pane label {
    font-weight: 500;
}

#flags-slider-pane h4 {
    text-align: center;
}

#flags-slider-pane .passwd-msg {
    color: red;
}

#flags-slider-pane h5 {
    font-weight: 400;
}

#flags-slider-pane ul.dropdown-menu {
    text-align: left;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-top-4 {
    padding-top: 4px;
}


/*Using for delete icons to keep vertically centered
 and red in conference rooms*/
#user-attach-rec .cr-delete-icon {
  color: tomato;
  display: inline-block;
  vertical-align: -7px;
  float: none;
}

.buttonConfigHeader {
  text-decoration: none;
  color: black;
}

a.buttonConfigHeader:hover {
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  color:black;
}

/* Emoji support */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* NOTIFICATIONS WORKFLOW CSS.                                                                                        */
/**********************************************************************************************************************/
.nwf-leftBar {
  border: 1px solid lightgrey;
}
.nwf-createEventCont {
  padding-top:15px;
  padding-bottom:15px;
  border: 1px solid lightgrey;
}
.nwf-navLinks {
  cursor:pointer;
}
.nwf-webhookOptionsLabel {
  margin-bottom:0;
}
.nwf-webhookOption {
  cursor:pointer;
}
.nwf-textArea {
  max-width:100%;
}
.nwf-saveWorkflowsCont {
  display:none;
}
.nwf-eventListCont {
  display:none;
}
.nwf-innerEventListCont {
  padding-left:30px;
  padding-right:30px;
}
.nwf-IndivEventCont {
  padding-top:15px;
  padding-bottom:15px;
  border: 1px solid lightgray;
}
.nwf-hiddenEditField {
  display:none;
}
.nwf-hiddenEditField i {
  margin-top:5px;
  margin-bottom:5px;
}
.nwf-actionCont {
  padding-right:15px;
}
.nwf-actionCont > div {
  padding-top:15px;
  border: 1px solid lightgrey;
}
.nwf-savedDisplay {
  display:inline-block;
}
.nwf-colContHeader {
  display:inline-block;
}
.nwf-addEventCont {
  display:none;
  padding-left:30px;
  padding-right:30px;
}
.nwf-addEventInput {
  display:none;
}
.nwf-addActionCont {
  display:none;
}
.nwf-addActionCont i {
  margin-top:5px;
  margin-bottom:5px;
}
.nwf-addActionInput {
  display:none;
}
.nwf-pointer {
  cursor:pointer;
}
.nwf-descriptionText {
  font-style:italic;
}
.nwf-alignRightButton {
  padding-right:15px;
}
.nwf-singleEventEditCont {
  display:none;
}
.nwf-singleEventEditCont i {
  margin-top:5px;
  margin-bottom:5px;
}
.nwf-singleEventSaved i {
  margin-top:5px;
  margin-bottom:5px;
}
.nwf-singleEventHeader {
  display:inline-block;
}
/* Add these to the parent container to
 * ensure that they will not be overwritten. */
.nwf-successIcon > .fa-check {
  color:#3c763d;
}
.nwf-dangerIcon > .fa-ban {
  color:#a94442;
}
.nwf-editIcon > .fa-pencil-square-o {
  color:#8a6d3b;
}
/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* EXTENSIONS DETAILS CSS.                                                                                            */
/**********************************************************************************************************************/
.ed-qgDeviceCont {
    margin-bottom: 10px;
}
.ed-qgDeviceDetails {
    margin: 0;
}
.ed-reloadConf {
    display: inline-block;
}
.ed-masterConts {
    display: none;
}
.ed-delWarnMsgHead {
    font-weight: bold;
}
.ed-delWarnMsg {
    margin: 0;
}
.ed-delWarnMsgPad {
    margin: 0;
    padding-left: 25px;
}
.ed-delWarnMsgAst {
    font-style: italic;
    margin-top: 10px;
}
.ed-toggle {
    margin-bottom: 0;
}
.ed-margeBot15 {
    margin-bottom: 15px;
}
.ed-rebootWarning {
    display:none;
    padding-right: 20px;
    font-size: 14px;
    font-weight: bold;
}
.ed-licenseLimitWarning{
    display:none;
    padding-right: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #891010;
}
.ed-createNewBtnCont {
    text-align: center;
}
.ed-warningText {
    color: #891010;
}

i.fa-star {
  color: gold;
}
/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* ALERT NOTIFICATION CONTACTS CSS.                                                                                   */
/**********************************************************************************************************************/
#alert-notification-contacts-table .anc-inputField {
    width: 100%;
}
.anc-requiredText {
    text-align: start;
    color: #891010;
    margin: 0;
}
/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* TENANT LEVEL ALERT NOTIFICATION CONTACTS CSS.                                                                      */
/**********************************************************************************************************************/
#alert-notification-contacts-table .tlanc-inputField {
    width: 100%;
}
.tlanc-requiredText {
    text-align: start;
    color: #891010;
}
/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* TENANT BILLING CSS.                                                                                                 */
/**********************************************************************************************************************/
.tb-hide {
    display:none;
}
.tb-table {
    position: relative;
    border-top: 1px solid lightgrey;
}
#chargePerTenant-data-table .tb-chkbxs {
    margin-right: 5px;
}
.tb-pagination {
    cursor:pointer;
}
.tb-paginationUl {
    margin: 0;
}
.tb-pageHeader {
    margin: 0;
}
.tb-exclamation {
    margin-left: 5px;
    vertical-align: top;
}
.tb-envelope {
    display: none;
    margin-left: 5px;
    vertical-align: top;
}
.tb-tblActMrgn {
    margin-top: 25px;
}
.tb-tblActBtn {
    width: 100%;
}
.tb-filterLbl {
    font-weight: 400;
}
#filtersCont .tb-filterInput {
    margin-right: 5px;
}
.tb-tblFilterMrgn {
    margin-top: 10px;
}
.tb-btnDdOpt {
    cursor: pointer;
}
#chargeTenantResubCont > ul {
    background-color: #fff;
}
#chargeTenantResubCont > ul a {
    color: #333;
    padding: 3px 20px;
}
.tb-statusTxt {
    min-width: 100px;
}
.tb-chrgAmntTxt {
    display: none;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* BILLING AND STATEMENTS CSS.                                                                                        */
/**********************************************************************************************************************/
.mfc-cc-Address {
    margin-bottom:5px;
}
.mfc-bs-cc-cont {
    visibility:hidden;
}
.mfc-bs-dwnld {
    cursor:pointer
}
.mfc-bs-dwnld-algn {
    text-align:center
}
#creditCardCont .mfc-bs-labels,
#achCont .mfc-bs-labels {
    padding-top: 0;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* USER PORTAL CALL FORWARDING CSS.                                                                                   */
/**********************************************************************************************************************/
.up-cf-inlineText {
    display: inline-block;
}

.up-cf-ringDurCont {
    margin-left: 25px;
}
.up-cf-confirmCont {
    margin-left: 25px;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* QUEUE AGENTS, AGENT DETAILS CSS.                                                                                   */
/**********************************************************************************************************************/
.ad-logInOutBtn {
    display: none;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* FLUENTSTREAM GLOBAL CSS.                                                                                           */
/**********************************************************************************************************************/
/* This was created to replace the <legend> tag.  The legend tag inside of a <fieldset> tag is required to be no more
 * than a 1:1 relationship.  <legend> tags are also, by default, moved to the top of it's container.  There are
 * multiple places throughout MyFluentCloud, where multiple <legend> tags are placed inside of a <fieldset> tag, or the
 * other tags are placed above the <legend> tag.  Chrome v55 strictly enforces this rule.  If a format is needed,
 * create a <div> tag and use this class. */
.fs-legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;

}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* FEATURE CODE CSS.                                                                                                  */
/**********************************************************************************************************************/
#featureCodeTableBody tr:before {
    display: none;
}

.fc-createNewBtn {
    margin-bottom: 15px;
}
.fc-codeInput {
    min-width: 80px;
}
.fc-actionBtnCont {
    min-width: 100px;
}

/* Button for loading the Flags Modal */
#loadTenantFlagsModal {
    position: absolute;
    top: 300px;
    left: -44px;
    z-index: 5;
    outline: none;

    border-bottom-right-radius: 0;
    border-top-right-radius: 0;

    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;

}

#loadTenantFlagsModal .fa {
    color: white
}

#flags-slider-pane {
    /* background: #0F4E8B; light blue */
    background: #2a72b9;
    padding: 16px;
    color: white;
    opacity: .98;
    z-index: 2;
}

#flags-slider-pane textarea {
    resize: vertical;
}

#flags-slider-pane label {
    font-weight: 500;
}

#flags-slider-pane h4 {
    text-align: center;
}

#flags-slider-pane .passwd-msg {
    color: red;
}

#flags-slider-pane h5 {
    font-weight: 400;
}

#flags-slider-pane ul.dropdown-menu {
    text-align: left;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-top-4 {
    padding-top: 4px;
}


/*Using for delete icons to keep vertically centered
 and red in conference rooms*/
#user-attach-rec .cr-delete-icon {
  color: tomato;
  display: inline-block;
  vertical-align: -7px;
  float: none;
}

.buttonConfigHeader {
  text-decoration: none;
  color: black;
}

a.buttonConfigHeader:hover {
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  color:black;
}

/*Easy click: this is used to keep the text from highlighting
*when you are clicking a pager.
*/
.cwd_pager_stop_select{
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}
.cwd_show_pointer{
  cursor: pointer;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* INTEGRATION SALESFORCE CSS.                                                                                        */
/**********************************************************************************************************************/
.isf-marginBot15 {
    margin-bottom: 15px;
}
.isf-delWarnMsgHead {
    margin: 0;
    text-align: center;
}
.isf-delWarnMsgHead {
    font-weight: bold;
}
.isf-delWarnMsg {
    margin: 0;
}
.isf-createNewBtnCont {
    text-align: center;
}
.isf-profileBtn {
    width: 100%;
}
.isf-pushLayoutToChromeBtn {
    margin-top: 25px;
}
.isf-toggleLabel {
    padding-left: 0;
    margin-left: -15px;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* USER SETTINGS CSS.                                                                                                 */
/**********************************************************************************************************************/
.us-toggle {
    margin-left: 15px;
    margin-bottom: 0;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* PHONE NUMBER SETTINGS CSS.                                                                                         */
/**********************************************************************************************************************/

.pn-routeExtraConfig {
    margin-bottom: 0px;
    margin-left: 0px;
}

/* The Bootstrap class 'tab-content' was overwritten in 2014.  This is to fix that for this specific element. */
#layoutsTabsCont {
    overflow: visible;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* USER CALL HISTORY CSS.                                                                                             */
/**********************************************************************************************************************/
.uch-audioPlayerCont {
    padding-left: 0;
}
.uch-downloadRecBtnCont {
    padding-right: 0;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* ZIP CODE ROUTING CSS.                                                                                              */
/**********************************************************************************************************************/
.zcr-pagination {
    cursor:pointer;
}
.zcr-paginationUl {
    margin: 0;
}
.zcr-pageHeader {
    margin: 0;
}

.hidden {
    display: none;
}

.lbItem {
    cursor: pointer;
}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

#upload-table-rows{
  display: flex;
  justify-content: center;
}

#upload-table-data{
  padding: 3px;
  border: 1px solid gray;
}

#upload-table-data th,
#upload-table-data td {
  padding: 3px;
  border: 1px solid gray;
  text-align:center;
}

#bulkUploadInstructions {
  width: 95%;
  text-align:center;
  font-size:12px;
  margin: 2em;
}

#bulkUploadHeader {
  margin: 1em 0em;
  display:flex;
  align-content: center;
}

#bulkUploadHeader h3{
  margin-left: 15px;
}

#bulkUploadExplainer {
  margin-left: 15px;
}

.requiredCells {
  background-color:#f2dede;
}

.click-to-copy .label.hidden {
    opacity: .001;
}

.click-to-copy {
    cursor: pointer;
    display: inline-block;
    width: 220px;
}

.click-to-copy .label {
    color: #0069ff;
    display: inline-block;
    font-size: 14px;
    line-height: 100%;
    position: relative;
    opacity: .999;
    top: -1px;
    left: -2px;
}

/* TODO TODO TODO - Add these to broncos.css, green.css, orange.css, pink.css, purple.css, and stpattys.css. */
/**********************************************************************************************************************/
/* HEADER CSS.                                                                                                        */
/**********************************************************************************************************************/
.header-pointer {
    cursor:pointer;
}

@keyframes floatup {
  20% {opacity:.999}
  50% {
    -webkit-transform:translate3d(-10px,-17px,0);
    transform:translate3d(-10px,-17px,0);
    opacity:.5
  }
  100% {
    -webkit-transform:translate3d(-10px,-17px,0);
    transform:translate3d(-10px,-17px,0);
    opacity:.001;
    }
}

@-webkit-keyframes floatup {
  20% {opacity:.999}
  50% {
    -webkit-transform:translate3d(-10px,-17px,0);
    transform:translate3d(-10ps,-17px,0);
    opacity:.5;
  }
  100% {
    -webkit-transform:translate3d(-10px,-17px,0);
    transform:translate3d(-10px,-17px,0);
    opacity:.001;
    }
}

.copying {
    -webkit-animation:floatup .75s ease-in-out;
    animation:floatup .75s ease-in-out;
    /* This doens't work very well, sadly
    -webkit-animation-play-state: paused;
    animation-play-state: paused; */
}

.custom-scrollbar-react::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.custom-scrollbar-react::-webkit-scrollbar
{
    width: 4px;
    background-color: #F5F5F5;
}

.custom-scrollbar-react::-webkit-scrollbar-thumb
{
    background-color: #2a72b9;
    border-radius: 10px;
}
html {
  font-size: 16px;
}

/* CSS added for the Custom Select Components 
  code reference: https://codepen.io/pavelvaravko/pen/qjojOr/
*/

.wrap {
  width: 200px;
  left: 0;
  margin: 0 auto;
  font-family:
    'Roboto','Helvetica','Arial',sans-serif;
}

/* select starting stylings ------------------------------*/
.select {
  font-family:
    'Roboto','Helvetica','Arial',sans-serif;
	position: relative;
	width: 200px;
  margin-top: 15px;
}

.select-text {
	position: relative;
	font-family: inherit;
	background-color: transparent;
	width: 200px;
	padding: 10px 10px 10px 0;
	font-size: 18px;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid rgba(0,0,0, 0.12);
  margin-top: 15px;
}

/* Remove focus */
.select-text:focus {
	outline: none;
	border-bottom: 1px solid rgba(0,0,0, 0);
  margin-top: 15px;
}

	/* Use custom arrow */
.select .select-text {
	appearance: none;
  -webkit-appearance:none;
  margin-top: 15px;
}

.select:after {
	position: absolute;
	top: 18px;
	right: 10px;
	/* Styling the down arrow */
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, 0.12);
	pointer-events: none;
  margin-top: 15px;
}


/* LABEL ======================================= */
.select-label {
	color: rgba(0,0,0, 0.54);
	font-size: 16px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 0;
  transition: 0.2s ease all;
  margin-top: 15px;
}

/* active state */
.select-text:focus ~ .select-label {
	color: #3078CF;
	top: -20px;
	transition: 0.2s ease all;
	font-size: 12px;
  margin-top: 15px;
}

.select-text:valid ~ .select-label {
  top: -20px;
	transition: 0.2s ease all;
	font-size: 12px;
  margin-top: 15px;
}

/* BOTTOM BARS ================================= */
.select-bar {
	position: relative;
	display: block;
  width: 200px;
}

.select-bar:before, .select-bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #3078CF;
	transition: 0.2s ease all;
}

.select-bar:before {
	left: 50%;
}

.select-bar:after {
	right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
	width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
	position: absolute;
	height: 60%;
	width: 60px;
	top: 25%;
	left: 0;
	pointer-events: none;
  opacity: 0.5;
  margin-top: 15px;
}

.select option {
  font-size: 14px;
  line-height: 20px;
}