/* ---------------------------------------------------------------------------
Evolux V2

O objetivo deste CSS é recriar a interface do sistema da Evolux usando o
conceito do Materials (google.com/design) e as novas versões das bibliotecas
do Bootstrap e jQuery.

Este CSS é organizado em pequenos módulos que definem o visual de partes
do sistema.
--------------------------------------------------------------------------- */

/* -------------------------------------------------
   Fonts
------------------------------------------------- */

/* EOT fonts were not exported because it is microsoft only (eot vs. woff) */

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-light.woff2') format('woff2'),
    url('/fonts/opensans-light.woff') format('woff'),
    url('/fonts/opensans-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-lightitalic.woff2') format('woff2'),
    url('/fonts/opensans-lightitalic.woff') format('woff'),
    url('/fonts/opensans-lightitalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-regular.woff2') format('woff2'),
    url('/fonts/opensans-regular.woff') format('woff'),
    url('/fonts/opensans-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-italic.woff2') format('woff2'),
    url('/fonts/opensans-italic.woff') format('woff'),
    url('/fonts/opensans-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-semibold.woff2') format('woff2'),
    url('/fonts/opensans-semibold.woff') format('woff'),
    url('/fonts/opensans-semibold.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-semibolditalic.woff2') format('woff2'),
    url('/fonts/opensans-semibolditalic.woff') format('woff'),
    url('/fonts/opensans-semibolditalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-bold.woff2') format('woff2'),
    url('/fonts/opensans-bold.woff') format('woff'),
    url('/fonts/opensans-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-bolditalic.woff2') format('woff2'),
    url('/fonts/opensans-bolditalic.woff') format('woff'),
    url('/fonts/opensans-bolditalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-extrabold.woff2') format('woff2'),
    url('/fonts/opensans-extrabold.woff') format('woff'),
    url('/fonts/opensans-extrabold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/opensans-extrabolditalic.woff2') format('woff2'),
    url('/fonts/opensans-extrabolditalic.woff') format('woff'),
    url('/fonts/opensans-extrabolditalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

html [layout][justified] {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

html [layout][center-justified], html [layout][center-center] {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

html [layout][center], html [layout][center-center] {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

html [layout][horizontal] {
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

html [layout][horizontal], html [layout][vertical] {
    display: -ms-flexbox;
    display: -webkit-flex;
}

html [layout][center-justified], html [layout][center-center] {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

html [layout][vertical] {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

html [layout][horizontal], html [layout][vertical] {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

html [layout][wrap] {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

html [flex] {
    -ms-flex: 1 1 0.000000001px;
    -webkit-flex: 1;
    flex: 1;
    -webkit-flex-basis: 0.000000001px;
    flex-basis: 0.000000001px;
}

/* ---------------------------------------------------------------------------
  General
--------------------------------------------------------------------------- */

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
}

h1, h2 {
  font-weight: bold;
  padding-bottom: 10px;
}

h1:not(.ev2-text) {
  font-size: 18px;
  color: #222222;
  text-transform: uppercase;
}

h2 {
  font-size: 15px;
  color: #5E5E5E;
}

select.form-control {
  transition: none !important;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

#evolux-content a:not(.btn):not(.campaign-nav-link):not([href]):not([role='button']),
#evolux-content a:active:not(.btn):not(.campaign-nav-link):not([href]):not([role='button']) {
  color: #373435;
}

#evolux-content a:hover:not(.btn):not(.campaign-nav-link):not([role='button']) {
  color: #00BBD3;
}

/* Wrapper for page content to push down footer and help to stick it in the bottom.
   Using the same method as here: http://stackoverflow.com/a/19758234/845307 */
#evolux-wrap {
  position: relative;
  min-height: calc(100% - 40px);
  height: auto;
  z-index: 10;
}

/* FIXME: it's changing the color of the entire page !*/
#evolux-polymer,
#evolux-polymer body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  background-color: #E6E7E8;
}

@media (min-width: 1366px) {
  #evolux-polymer,
  #evolux-polymer body {
    font-size: 14px;
  }
}

#evolux-polymer body.evolux-panel {
  background: url('/images/panel/bg.png') repeat-x;
  background-color: #E5E5E5;
}

#evolux-polymer body.evolux-queue-panel {
  height: calc(100vh - 87px);
}

.visibility-hidden {
  visibility: hidden;
}

.full-height {
  /* The calc() function returns a height in pixel. With CSS it's hard to
     set the height of a block equals to the height of the window.

     This  is useful only for index page. */
  height: calc(100% - 100px);
}

.inner-full-height {
    width: 100%;
    height: 100%;
    position: relative;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hack to apply ellipsis to a table cell. */
table td.ellipsis {
  max-width: 1px;
}

.ellipsis-left {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.ellipsis-left:before {
  content: "...";
  width: 14px;
  position: absolute;
  left: 0;
  z-index: 1;
}

.fa.fa-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

:root .fa-rotate-45, {
  filter: none;
}

.striked {
  text-decoration: line-through;
}

.muted {
  color: #CCC;
}

/* end: General */


/* ---------------------------------------------------------------------------
  Typography
--------------------------------------------------------------------------- */

.typography-headline {
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  color: #222222;
  text-transform: uppercase;
  margin: 0;
}

.typography-title {
  font-size: 15px;
  font-weight: bold;
  line-height: 42px;
  color: #5E5E5E;
  margin: 0;
}

.typography-subhead {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #5E5E5E;
  margin: 0;
}

.typography-body {
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  color: #212121;
  margin: 0;
}

.typography-caption {
  font-size: 13px;
  font-weight: 400;
  line-height: 14px;
  color: #999999;
  margin: 0;
}

.typography-label-normal {
  font-weight: normal;
}

/* end: Typography */


/* ---------------------------------------------------------------------------
  Hero
--------------------------------------------------------------------------- */

.evolux-hero .evolux-hero-title {
    font-size: 4em;
}

.evolux-hero .evolux-hero-subtitle {
    font-size: 2em;
}

/* end: Hero */


/* ---------------------------------------------------------------------------
  Dropdown Submenu
  - The Submenu was removed in bootstrap3:
    https://github.com/twbs/bootstrap/pull/6342
--------------------------------------------------------------------------- */

.dropdown-submenu {
    position:relative;
}

.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}

.dropdown-submenu.pull-left {
    float:none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

@media screen and (max-width: 992px) {
  .dropdown-submenu .dropdown-menu {
    margin: 0px 25px 10px 25px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  #navbarCollapse.navbar-collapse.collapse {
    padding-left: 0;
  }
}

/* end: Dropdown Submenu */


/* ---------------------------------------------------------------------------
  Header Navigation
--------------------------------------------------------------------------- */

#evolux-polymer core-toolbar {
  background: #212121;
}

#evolux-polymer core-toolbar .logo-alone {
  padding-left: 5px;
}

#evolux-polymer core-toolbar.dark-theme,
#evolux-polymer .navbar-nav core-icon-button {
  background: #212121;
  fill: #f1f1f1;
  box-shadow: none;
}

#menu-wrapper {
  min-height: 60px;
  height: auto;
  border-radius: 0px;
  z-index: 2;
  margin-bottom: 0px !important;
  padding: 0 0 0 0;
}

#menu-wrapper .navbar-menu {
  margin-bottom: 0; 
}

.navbar {
  min-height: 60px !important;
}

.navbar-inverse {
    border: none;
    background-color: #373435;
}



/*.navbar-inverse .navbar-nav a.dropdown-toggle,
.navbar-inverse .navbar-nav a.dropdown-toggle:hover,
.navbar-inverse .navbar-nav a.dropdown-toggle:focus {
  color: #E0B041;
  background: #212121;
}*/

#menu-wrapper .navbar-brand {
    height: 60px;
    padding: 10px 25px 10px 10px;
}
#menu-wrapper .navbar-brand > img {
  height: 100%;
  width: auto;
  max-width: 150px;
}

#menu-wrapper .navbar-menu > li > a {
  font-size: 14pt;
  padding: 21px 16px 21px 16px;
  color: #FFFFFF;
}

#menu-wrapper .navbar-menu > li > a:hover {
  color: #E0B041;
}

#menu-wrapper #menu > li.active > a {
    color: #E0B041;
    transition: color 0.2s ease-out;
}

#menu-wrapper .navbar-menu #login-button {
  margin-top: 10px;
  padding: 0px !important;
  max-width:42px;
}

#menu-wrapper #menu > li > a .caret {
  border-top-color: rgba(255, 255, 255, 0.87);
  border-bottom-color: rgba(255, 255, 255, 0.87);
  display: none;
}

#menu-wrapper .navbar-menu .evolux-navbar-link core-icon-button {
  background: inherit;
}

#menu-wrapper .navbar-menu .dropdown-menu > li > a:hover {
  background-color: #FFFFFF;
}

#menu-wrapper .navbar-menu > li > a:hover,
#menu-wrapper .navbar-menu > li > a:focus {
  text-decoration: none;
}

#menu-wrapper .navbar-menu .dropdown-menu {
  margin-top: -3px;
  border: none;
  background-color: #fff;
  border-radius: 0;
  padding: 16px 0;
}

#menu-wrapper .navbar-menu .dropdown-menu a {
  font-size: 13pt;
  line-height: 32px;
  padding: 0 50px 0 24px;
}

#menu-wrapper .navbar-menu .dropdown-menu .divider {
  margin: 7px 0;
  background-color: #EEE;
}

#menu-wrapper .navbar-menu .dropdown-menu > li > a:hover,
#menu-wrapper .navbar-menu .dropdown-submenu:hover > a{
  color: #00BBD3;
}

#menu-wrapper .navbar-text {
    margin-top: 21px;
    margin-bottom: 11px;
}

#menu-wrapper #menu .dropdown-submenu > a:after {
  margin-top: 10px;
  border-left-color: rgba(0, 0, 0, 0.87);
  margin-right: 0;
  display: inline-block;
  position: absolute;
  right: 32px;
}

#menu-wrapper #menu .dropdown-submenu:hover > a:after {
  border-left-color: rgba(0, 0, 0, 0.87);
}

#menu-wrapper #menu li.dropdown-submenu > a {
  padding-right: 60px;
}

.login-dialog-body {
  width: 200px;
}

#login-menu-wrapper {
  color: rgba(255, 255, 255, 0.87);
  position: relative;
}

#login-menu-wrapper #logout-button {
  margin-left: 16px;
}

#evolux-polymer .nav > li > a,
#evolux-polymer .nav .open > a {
  background: none;
}

#evolux-polymer .navbar-nav > li > a:hover,
#evolux-polymer .navbar-nav > li > a:focus {
  background: none;
}

#evolux-polymer .dropdown-toggle.login-icon {
  fill: currentcolor;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#evolux-polymer .dropdown-toggle.login-icon svg {
  pointer-events: none;
  display: block;
  width: 24px;
  height: 24px;
}

#evolux-polymer #login-dropdown-menu {
  right: 10px;
  margin: -6px 0 0 0;
  padding: 0;
}

#evolux-polymer #login-dropdown {
  display: none;
  right: 10px;
  padding: 12px;
  width: 215px;
  background-color: #FFF;
}

#evolux-polymer .open #login-dropdown {
  display: block;
  width: 300px;
}

#evolux-polymer #login-dropdown h4 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);
  line-height: 32px;
}

#evolux-polymer #login-dropdown form {
  margin: 0;
}

#evolux-polymer #login-dropdown .control-group {
  margin: 0;
}
#evolux-polymer #login-dropdown .control-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.54);
  line-height: 14px
}

#evolux-polymer #login-dropdown #login-submit-button {
  fill: rgba(0, 0, 0, 0.87);
}

#evolux-polymer #login-dropdown #login-submit-button::shadow #content span {
  margin-left: 0;
  font-size: 14px;
  margin-right: 1em;
}

#evolux-polymer .dropdown .dropdown-menu .nav-header {
  padding: 0 24px 5px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.54);
  letter-spacing: 0.01em;
  font-weight: 400;
  text-transform: none;
}

/*Boostrap 3 breakpoints for desktop*/
@media (min-width: 992px) { 
  #navbarCollapse.navbar-collapse.collapse {
    display: flex !important;
    justify-content: space-between;
  }
  #navbarCollapse.navbar-collapse.collapse::before {
    display: none;
  }
  #navbarCollapse.navbar-collapse.collapse:after {
    display: none;
  }
}

/*Boostrap 3 breakpoints mobile - tablet*/
@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }

  .navbar-toggle {
      display: block;
      margin-top: 14px;
      margin-bottom: 6px;
      padding: 7px 6px;
  }

  .navbar-collapse {
    width: 100%;
    background-color: #222;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }

  .navbar-collapse.collapse {
    display: none !important;
  }

  .navbar-collapse.collapse.in {
    display: block !important;
    overflow-y: auto !important;
    /* Hackish for the collapse dont left 2px on the sides */
    /*background: #212121;
    width: calc(100% + 2px) !important;
    margin-left: -1px;*/
  }

  .navbar-nav {
    float: none !important;
  }

  .navbar-nav > li {
    float: none;
  }

  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    margin-left: 0px;
  }

  #session.navbar-nav {
    top: 1px;
    right: 0px;
  }

  #login-menu-wrapper {
    padding: 0 15px;
    top: 0px;
  }

  #evolux-polymer .open #login-dropdown {
    width: 100%;
  }
}

/* end: Header Navigation */

/* ---------------------------------------------------------------------------
  Index Page
--------------------------------------------------------------------------- */

#evolux-polymer .resources {
  margin: 0 auto;
  padding-top: 30px
}

#evolux-polymer .resource-tile {
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -moz-transition: all .2s cubic-bezier(.4,0,.2,1);
  -webkit-transition: all .2s cubic-bezier(.4,0,.2,1);
  transition: all .2s cubic-bezier(.4,0,.2,1);
}

#evolux-polymer .resource-tile-wrapper {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #E5E5E5
}

#evolux-polymer .resource-tile>a {
  color: #fff;
  display: block;
  height: 250px;
  overflow: hidden;
  /*padding-bottom: 50%;*/
  position: relative;
  -moz-transition: all .2s;
  -webkit-transition: all .2s;
  transition: all .2s;
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)
}

#evolux-polymer .resource-tile:hover {
  -moz-box-shadow: 0 17px 50px 0 rgba(0,0,0,.19);
  -webkit-box-shadow: 0 17px 50px 0 rgba(0,0,0,.19);
  box-shadow: 0 17px 50px 0 rgba(0,0,0,.19);
  position: relative;
  z-index: 1;
}

#evolux-polymer .resource-tile:hover a {
  -moz-box-shadow: 0 12px 15px 0 rgba(0,0,0,.24);
  -webkit-box-shadow: 0 12px 15px 0 rgba(0,0,0,.24);
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.24)
}

#evolux-polymer .resource-tile .bg {
  /*-webkit-background-size: 100%;*/
  /*background-size: 100%;*/
  display: block;
  height: 100%;
  position: absolute;
  -moz-transition: -moz-transform .2s cubic-bezier(.4,0,.2,1);
  -webkit-transition: -webkit-transform .2s cubic-bezier(.4,0,.2,1);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  width: 100%;
  z-index: 1
}

#evolux-polymer .resource-tile.span-6 .bg {
  -webkit-background-size: 70%;
  background-size: 70%;
}

#evolux-polymer .agent a {
  background-color: #00bcd4
}

#evolux-polymer .studio a {
  background-color: #ED8D77;
  text-align: center;
}

.studio .bg {
  transform: rotate(-90deg);
  padding-top: 20px;
  padding-left: 40px;
}

.studio .bg:before {
  content: "\ec66";
  font-family: 'IcoMoon-Ultimate';
  font-size: 130px;
  color: #E6E7E8;
}

#evolux-polymer .chat a {
  background-color: #E0B042;
}

.chat .bg {
  position: relative;
  text-align: center;
}

.chat .bg:before {
  content: "\eac8";
  font-family: 'IcoMoon-Ultimate';
  font-size: 130px;
  color: #E6E7E8;
}

#evolux-polymer .bot a {
  background-color: #EF627E;
}

.bot .bg {
  position: relative;
  text-align: center;
}

.bot .bg:before {
  content: "\ea1a";
  font-family: 'IcoMoon-Ultimate';
  font-size: 130px;
  color: #E6E7E8;
  margin-left: 17px;
}

#evolux-polymer .dialer a {
  background-color: #445BE2;
}

#evolux-polymer .dialer .bg {
  background: url('data:image/svg+xml,<svg fill="%23E6E7E8" height="140px" width="140px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297.333 297.333" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 297.333 297.333" stroke="%23ffffff" class="sc-bwsPYA iVWcqN"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><g><path d="M223.001,35.523l-102.99,45.06H10.333C4.833,80.584,0,84.968,0,90.468v79c0,5.5,4.833,10.116,10.333,10.116H16v72.884 c0,5.523,4.81,10.116,10.333,10.116h30c5.522,0,9.667-4.594,9.667-10.116v-72.884h54.011l102.99,44.943 c5.041,2.199,8.999-0.56,8.999-6.06v-177C232,35.968,228.042,33.324,223.001,35.523z M33,105.584h16v50H33V105.584z"></path><path d="m289.333,121.584h-17c-4.418,0-8,3.582-8,8 0,4.418 3.582,8 8,8h17c4.418,0 8-3.582 8-8 0-4.418-3.582-8-8-8z"></path><path d="m260.902,108.976c2.048,0 4.095-0.781 5.657-2.343l12.021-12.021c3.124-3.125 3.124-8.189 0-11.314-3.125-3.123-8.189-3.123-11.314,0l-12.021,12.021c-3.124,3.125-3.124,8.189 0,11.314 1.563,1.562 3.609,2.343 5.657,2.343z"></path><path d="m266.56,153.302c-3.125-3.123-8.19-3.123-11.314,0-3.124,3.125-3.124,8.189 0,11.314l12.021,12.021c1.563,1.561 3.609,2.343 5.657,2.343 2.048,0 4.095-0.781 5.657-2.343 3.124-3.125 3.124-8.189 0-11.314l-12.021-12.021z"></path></g></g></svg>') no-repeat 50% 30%
}

#evolux-polymer .agent .bg {
  background: url(/images/home/agent.png) no-repeat 50% 30%
}

#evolux-polymer .supervisor a {
  background-color: #ff9800
}

#evolux-polymer .supervisor .bg {
  background: url(/images/home/queue-panel.png) no-repeat 50% 30%
}

#evolux-polymer .manager a {
  background-color: #8bc34a
}

#evolux-polymer .manager .bg {
  background: url(/images/home/graph-bars.png) no-repeat 50% 30%
}

#evolux-polymer .it a {
  background-color: #607d8b
}

#evolux-polymer .it .bg {
  background: url(/images/home/cogs.png) no-repeat 50% 30%
}

#evolux-polymer .resource-tile .cover {
  -webkit-background-size: cover;
  background-size: cover
}

#evolux-polymer .resource-tile .title {
  bottom: 1em;
  color: #fff;
  display: block;
  font-size: 1.329em;
  font-weight: 400;
  left: 0;
  line-height: 1.3em;
  margin: 0 auto;
  padding: 0 1.5em;
  position: absolute;
  right: 0;
  text-align: left;
  z-index: 10
}

#evolux-polymer #main-resources {
  padding: 0;
  margin: 16px auto;
  height: 100%;
}

#evolux-polymer #main-resources > .resource-list {
  padding: 0;
  display: grid;
  width: 1000px;
  height: 500px;
  row-gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
}

#evolux-polymer #main-resources .resource-tile-wrapper {
  margin: 0;
}

.tenants-table {
  table-layout: auto;
}

.tenants-table td {
  word-break: break-word;
}

.tenants-table .td-tenant-name {
  max-width:600px;
  display:block;
}

.tenants-table-filter {
  display: flex;
  align-items: center;
  position: relative;
  width: 30%;
  margin-bottom: 24px;
}

.tenants-table-filter__input {
  border-radius: 2px;
  border: 1px solid #CCCCCC;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  font-size: 12px;
  padding: 8px 16px;
}

.tenants-table-filter__icon {
  font-family: 'icomoon';
  color: #CCCCCC;
  font-size: 12px;
  margin-left: -28px;
  pointer-events: none;
}

.tenants-table-filter__input::placeholder {
  color: #CCCCCC;
  opacity: 1;
}


@media screen and (max-width:915px) {
 .tenants-table .td-tenant-name {
    display:block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:150px;
  }
  .tenants-table .td-tenant-name:hover {
    overflow: auto;
    white-space: normal;
  }
}

@media screen and (max-width:750px) {
  .table-wrapper {
    width:100%;
    overflow-x:auto;
  }
}

@media screen and (max-width:475px) {
  #evolux-polymer #evolux-index-page .full-height {
      height: auto;
  }
  #evolux-polymer #main-resources .resource-list {
    display: block;
  }
  #evolux-polymer #main-resources .resource-tile-wrapper {
    width: 100%;
  }
}

@media screen and (min-width:476px) and (max-width: 915px) {
  #evolux-polymer #main-resources .resource-list {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  #evolux-polymer #main-resources .resource-tile-wrapper {
  }
}

@media screen and (min-width:915px) and (max-width: 1024px) {
  #evolux-polymer #main-resources .resource-list {
  	width: 100%;
  }
  #evolux-polymer #main-resources .resource-tile-wrapper {
  }

}


@media screen and (min-width:1024px) {
  #evolux-polymer #main-resources .resource-list {
    margin-top: 0;
    margin-bottom: 0;
  }
  #evolux-polymer #main-resources .resource-tile-wrapper {
    width: 250px;
  }
  #menu-wrapper .navbar-menu > li > a {
    padding: 20px 16px 20px 16px !important;
  }
}


/* end: Evolux Index */


/* ---------------------------------------------------------------------------
  Evolux Login Page
--------------------------------------------------------------------------- */

#evolux-polymer #evolux-login-page #evolux-content {
  min-height: 400px;
}

#evolux-polymer #evolux-login-page #menu-wrapper,
#evolux-polymer #evolux-login-page .evolux-card  {
  z-index: 2;
}

#evolux-polymer #evolux-login-page .evolux-card {
  margin: 0 auto;
  width: 350px;
}

#evolux-polymer #evolux-login-page #evolux-messages {
    position: absolute;
    width: 100%;
    top: 15px;
    z-index: 1;
}

/* end: Evolux Login Page */


/* ---------------------------------------------------------------------------
  Breadcrumb
--------------------------------------------------------------------------- */

.evolux-breadcrumb {
  background: #EEE;
  margin-bottom: 16px;
}

.evolux-breadcrumb ul {
  padding: 8px 2px;
  list-style: none;
  margin: 0;
}

.evolux-breadcrumb ul > li {
  display: inline-block;
  font-size: 13px;
}

.evolux-breadcrumb ul > li + li:before {
  padding: 0 5px;
  color: #ddd;
  content: "/\00a0";
}

.evolux-breadcrumb ul > .active {}

/* end: Breadcrumb */



/* ---------------------------------------------------------------------------
  Flash Messages
--------------------------------------------------------------------------- */
/*
.evolux-messages {
  margin-bottom: 16px;
}*/

/* end: Flash Messages */

/* ---------------------------------------------------------------------------
  Card
--------------------------------------------------------------------------- */

.tenant-routes-select {
  background: white;
}


.tenant-routes-spinner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 15px;
}

a.no-decoration-link:hover {
  text-decoration: none;
}

.tenant-routes-section .tenant-routes-header {
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;
}

.tenant-routes-section .tenant-route {
  display: flex;
  justify-content: space-between;
  margin: -8px;
    padding: 10px;
    box-shadow: 0px 0px 5px #cac9c9
}

.tenant-routes-card .route-item {
  flex: 1;
}

.tenant-routes-card .tenant-domain {
  padding: 6px 0px 10px 0px;
}

.tenant-routes-card .route-item.shrink {
  flex-shrink: 1;
  flex-grow: 0;
}

.tenant-routes-card .tenant-route-select-wrapper {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.tenant-routes-card .route-item .expand-btn {
  margin-left: 15px;
}

.tenant-routes-search-wraper {
  display: flex;
  position: relative;
  align-items: center;
}

.tenant-routes-search-wraper i {
    position: absolute;
    left: 15px;
}

.tenant-routes-search-input {
  height: 40px;
  width: 300px !important;
  min-width: 300px;
  padding-left: 35px !important;
}

.tenant-routes-table {
  margin-top: 25px;
}

.routes-table.borderless td, .routes-table.borderless th {
  border: none;
}

.routes-table > tbody > tr > td {
  vertical-align: middle;
}

.tenant-routes-card {
  display: block;
  position: relative;
  padding: 8px;
  margin-bottom: 8px;
  border: none;
  background-color: #fff;
}

.evolux-card {
  display: block;
  position: relative;
  padding: 16px;
  margin-bottom: 16px;
  border: none;
  background-color: #fff;
}

.evolux-card-shadow {
  box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px,
              rgba(0, 0, 0, 0.098) 0px 0px 3px;
}

.evolux-card-thin {
    padding: 0px 16px 8px 16px;
}

.evolux-card-title {
  margin-bottom: 8px;
}

.typography-empty-entity {
  padding: 16px 16px 8px 16px;
}

.evolux-card-actions {
 position: relative;
 top: 2px;
}

.evolux-card:hover .evolux-card-actions.visibility-hidden {
  visibility: visible;
}

.evolux-card .evolux-card-full-width {
  width: 100%;
}

.text-center .pagination .active a {
  z-index: 1;
}

.evolux-table {
  color: #5E5E5E;
}

.evolux-table.fixed {
  table-layout: fixed;
}

.evolux-table thead tr {
  height: 40px;
  background-color: #E8E8E8;
  font-size: 12px;
  font-weight: bold;
}

.evolux-table tbody tr {
  height: 32px;
  background-color: #FFFFFF;
  font-size: 14px;
}

.evolux-table th,
.evolux-table td {
  padding: 0 0 15px 0;
  border-left: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  min-width: 73px;
}

.evolux-table th:last-child,
.evolux-table td:last-child {
  border-right: 2px solid #ddd;
}

.evolux-table .icon-box {
  width: 73px;
  font-size: 22px;
  text-align: center;
  /*padding: 0 5px 2px 5px;*/
  padding: 0 0 2px 0;
}

.evolux-table .icon-button {
  text-decoration: none;
  color: #373435;
}

.evolux-table.small-height tbody tr {
  height: 24px;
}

.evolux-table.medium-height tbody tr {
  height: 44px;
}

.evolux-table.small-height tbody tr td,
.evolux-table.medium-height tbody tr td {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
  vertical-align: middle;
}

.evolux-table.medium-height tbody tr td.actions .btn,
.evolux-table.small-height tbody tr td.actions .btn {
  padding: 2px 6px 0px 6px;
}

.evolux-table.table.tablesorter tr th:not(:last-child),
.evolux-table.table.tablesorter tr th:not(:first-child) {
  border-right-color: #DDD;
  border-left-color: #DDD;
}

.evolux-table .actions.two {
  max-width: 80px;
  width: 80px;
}

.evolux-table .actions.three {
  max-width: 112px;
  width: 112px;
}

.evolux-table .actions.four {
  max-width: 150px;
  width: 150px;
}

.evolux-table .actions.five {
  max-width: 185px;
  width: 185px;
}

.evolux-table .actions .loading {
  background-size: 16px;
  width: 16px;
  height: 16px;
}

.evolux-table .actions .success {
  color: #8ac348;
}

.evolux-table .actions .warning {
  color: #E0B041;
}

/*#questionnaire-page .card {
  margin-bottom: 20px;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
}*/

/* end: Card */


/* ---------------------------------------------------------------------------
  Button
--------------------------------------------------------------------------- */

.no-hover, .no-hover:hover, .no-hover:active,
.no-hover:visited, .no-hover:focus {
  text-decoration: none;
}
.evolux-btn {
  text-transform: uppercase;
  padding: 0.4em 0.5em;
  border-radius: 2px;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.btn-fluid {
  width: 100%;
  margin-top: 0.7em;
}

.evolux-btn .glyphicon {
  padding: 0 8px;
}

.evolux-btn.evolux-btn-disabled {
  opacity: 0.35;
}

.evolux-btn-nohover {
  color: #727272;
}

.evolux-btn-nohover:hover {
  cursor: default;
  text-decoration: none;
  color: #727272;
}

.input-group-btn .evolux-btn {
  height: 34px;
}

/* end: Button */

/* ---------------------------------------------------------------------------
  Spy
--------------------------------------------------------------------------- */

.evolux-listen-extension {
    color: #08c;
}

.evolux-listen-extension:hover {
    color: #005580;
}

.evolux-spy-extension {
    padding: 0;
    background: none;
    color: #373435;
}

.spy-content {
    display: flex;
}

.audio-message,
.spy-content,
.widget-popover .popover-title,
.widget-popover .popover-title .close {
    background-color: #424242;
    color: #F0F0F0 !important;
}

audio.spy-audio-player {
    width: 120px;
}

audio.spy-audio-player::-webkit-media-controls-panel {
  background-color: transparent;
}

audio.spy-audio-player::-webkit-media-controls-play-button,
audio.spy-audio-player::-webkit-media-controls-timeline,
audio.spy-audio-player::-webkit-media-controls-current-time-display {
  display: none;
}

.widget-popover .arrow {
    display: none;
}

.widget-popover .close {
  line-height: 0.7;
  font-weight: normal;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

.widget-popover .popover-content .spy-content {
  display: flex;
        align-items: center;
}

.widget-popover .popover-content .spy-content .agent-info {
        flex: 1;
}

.widget-popover .popover-content .spy-content .agent-action button {
        margin: 2px;
}
.widget-popover .popover-content .spy-content .agent-action button.active {
        background-color: #ccc;
}


.widget-popover .popover-content .spy-content .audio-tag-placeholder {
        align-self: flex-end;
}

.widget-popover .popover-content .spy-content .agent-info .agent-name {
        font-size: 18px;
}

.widget-popover .popover-content .spy-content .agent-info .agent-extension {
        font-size: 13px;
}

/* end: Spy */


/* ---------------------------------------------------------------------------
  Forms
--------------------------------------------------------------------------- */

.input-group {
  z-index: 0;
}

/* end: Forms */


/* ---------------------------------------------------------------------------
  Page title
--------------------------------------------------------------------------- */

.evolux-page-title {
  margin-bottom: 16px;
}

.evolux-page-title .typography-headline {
  line-height: 40px;
}

/* end: Page title */


/* ---------------------------------------------------------------------------
  Named List
--------------------------------------------------------------------------- */

.evolux-named-list {
  margin: 0;
}

.evolux-named-list li {
  padding: 8px 16px;
  margin-left: -16px;
  margin-right: -16px;
  border-bottom: 1px solid #E6E6E6;
}

.evolux-named-list li:last-child {
  border-bottom: none;
  margin-bottom: -8px;
}

.evolux-named-list.list-group li:last-child {
  padding-bottom: 5px;
  border-bottom: 1px solid #E6E6E6;
}

.evolux-named-list-title {}

.evolux-named-list-action {}

.evolux-named-list-summary {
  display: inline-block;
  text-overflow: ellipsis;
  line-height: 2.2;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  padding: 0 10px;
}

/* end: Named List */

.evolux-radio-input {
  top: 5px;
  position: relative;
  margin-bottom: 0px;
}

.evolux-form-report .row {
  margin: 0px 0px 10px 0px;
}

.evolux-form-report .row:last-of-type {
  margin-bottom: 0px;
}

/* ---------------------------------------------------------------------------
  Card
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
  Modal
--------------------------------------------------------------------------- */

.evolux-modal {
  top: 10%;
  left: 50%;
  margin-left: -480px;
  width: 960px;
  max-height: 80%;
  background-color: #fff;
  border-radius: 5px;
}

/* ---------------------------------------------------------------------------
  SLA Table
--------------------------------------------------------------------------- */

#evolux-callshistory-table {
  margin: 0;
  width: 100%;
  overflow: auto;
}

.sla,
.abandoned,
.sla_cols {
    text-align: center;
}

.sla,
.abandoned {
    cursor: pointer;
}

.sla:hover,
.abandoned:hover {
    background-color: #EEE;
}

.sla_bad {
    color: #DD3300;
    font-weight: bold;
}

.sla_warning {
    color: #F28A02;
    font-weight: bold;
}

/* color from the old version. */
.evolux-card .text-success.sla { color: #009900; }

/* ---------------------------------------------------------------------------
  Charts
--------------------------------------------------------------------------- */

#pie_chart .highcharts-container {
    margin: 0 auto;
}

#pie_chart .highcharts-container,
#pie_chart svg:not(root) {
  overflow: visible !important;
}

.evolux-region-pie-chart {
    height: 500px;
    left: 0;
    right: 0;
    margin: auto;
}

/* end: Breadcrumb */

/* ---------------------------------------------------------------------------
  Shell tab
--------------------------------------------------------------------------- */

.evolux-shell-tab {
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  bottom: 0;
  box-shadow: -1px -1px 8px rgba(0, 0, 0, .2);
  position: fixed;
  right: 10px;
}

.evolux-shell-tab.opened {
  background: #FFF url('/images/ajax-loader.gif') no-repeat center 180px;
  padding: 0;
  height: 400px;
  width: 650px;
}

.evolux-shell-tab.closed {
  padding: 0 3px;
}

.evolux-shell-tab.opened .maximize {
  display: none;
}

.evolux-shell-tab.closed .minimize {
  display: none;
}

.evolux-shell-tab-header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  padding: 5px 10px;
}

.evolux-shell-tab.opened .evolux-shell-tab-header {
  background: #E7C334;
}

.evolux-shell-tab-header h1 {
  font-size: 13px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  float: left;
}

.evolux-shell-tab-icon {
  zoom: 0.8;
  color: #FFF;
  background: #373435;
  border-radius: 3px;
  padding: 4px 5px;
}

.evolux-shell-tab-header .evolux-shell-tab-actions {
  float: right;
}

.evolux-shell-tab-header .evolux-shell-tab-actions a {
  font-size: 20px;
  color: #373435;
  font-weight: bold;
  line-height: 14px;
}

.evolux-shell-tab iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.evolux-shell-tab.closed iframe {
  overflow: hidden;
  position: absolute;
  padding-bottom: 5px;
}

/* end: Shell tab */


/* ---------------------------------------------------------------------------
  Footer
--------------------------------------------------------------------------- */

/* To stick the footer at the bottom, I'm using the method described here:
   http://stackoverflow.com/a/19758234/845307 */
#evolux-footer {
  height: 40px;
  background-color: #EEE;
}

#evolux-footer p {
  margin: 10px;
}

/* end: Footer */


/* ---------------------------------------------------------------------------
  Stats page
--------------------------------------------------------------------------- */

#stats-page #interfaces li:not(:last-child) {
  margin-bottom: 10px;
}

#stats-page .mb5 {
  margin-bottom: 5px;
}

#stats-page .progress {
  margin-bottom: 5px;
}

#stats-page .progress .left-value {
  position: absolute;
  left: 20px;
  color: #373435;
}

#stats-page .progress .right-value {
  position: absolute;
  right: 20px;
  color: #373435;
}

/* end: Stats page */


/* ---------------------------------------------------------------------------
  Callcenter Reports
--------------------------------------------------------------------------- */

#callcenter-reports .evolux-named-list li:first-child {
  padding-top: 0;
}

@media screen and (min-width: 992px) {
  #callcenter-reports .cols-10 .col-md-2 {
    width: 20%;
  }
}

#schedule-report-form .selectize-input.items > .item {
  overflow-wrap: anywhere;
}

#schedule-report-form .selectize-input.items > .item > a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* end: Callcenter Reports */


/* ---------------------------------------------------------------------------
  Base Panel
--------------------------------------------------------------------------- */

.evolux-panel #evolux-content {
    padding-top: 20px;
}

#evolux-content #server-connection-error {
  height: 50vh !important;
}

.evolux-panel .evolux-card {
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
}

.evolux-panel .evolux-card .evolux-card-header {
  margin: -8px;
  padding: 8px;
  margin-bottom: 15px;
  background-image: -webkit-linear-gradient(bottom, #373435 0%, #373435 60%);
  border-radius: 5px 5px 0 0;
  font-size: 16px;
  text-align: center;
  font-weight: normal;
}

.evolux-panel .evolux-card-thin {
  padding: 8px;
  border-radius: 5px 5px 0 0 !important;
}

.evolux-panel .server-timer {
    font-size: 16px;
    line-height: 1em;
    margin-right: 10px;
}

.evolux-panel .row {
    margin-right: -5px;
    margin-left: -5px;
}

.evolux-panel .col-md-4,
.evolux-panel .col-sm-4,
.evolux-panel .col-xs-6,
.evolux-panel .col-md-2,
.evolux-panel .col-sm-2,
.evolux-panel .col-xs-3 {
    padding-right: 5px;
    padding-left: 5px;
}

.evolux-panel table td,
.evolux-panel table th {
    border-color: #EEE;
}

.evolux-panel table th {
    color: #BBB;
}

.evolux-panel gauge-chart .highcharts-container svg > path {
    fill: #444;
}

.evolux-panel donut-chart .highcharts-series path {
    stroke: none;
}

.evolux-panel .highcharts-legend-item text {
    fill: #828282 !important;
}

.evolux-panel .highcharts-background {
    display: none;
}

.evolux-panel .highcharts-data-labels text {
    fill: #E0E0E0 !important;
    text-shadow: none !important;
}

.evolux-panel .evolux-heroes {
    margin-bottom: 12px;
}

.evolux-panel .evolux-hero-subtitle {
    line-height: 0.8em;
    display: block;
    font-size: 24px;
}

.evolux-panel .evolux-hero-context {
    font-size: 13px;
}

.evolux-panel .evolux-card {
    border-radius: 0;
    margin-bottom: 10px;
}

.evolux-panel .evolux-card-header {
    border: none;
    font-size: 13px;
    padding: 11px 22px 11px 13px;
    line-height: 1em;
}

.evolux-panel table {
    margin-bottom: 0;
}

.evolux-panel table td,
.evolux-panel table th {
    padding-top: 3px;
    padding-bottom: 3px;
}

.evolux-panel table th {
    text-transform: uppercase;
}

.evolux-panel table.table>thead>tr>th {
    border-width: 1px;
}

.evolux-panel .show-more {
    margin: 8px -8px -8px -8px;
    padding: 11px 22px 11px 13px;
    font-size: 11px;
}

.evolux-panel .text-success { color: rgb(88, 239, 0); }
.evolux-card .text-warning,
.evolux-panel .text-warning { color: rgb(148, 127, 15); }
.evolux-card .text-info,
.evolux-panel .text-info { color: rgb(119, 190, 228); }
.evolux-card .text-error,
.evolux-panel .text-error { color: rgb(255, 41, 41); }

.evolux-panel table.last-call-time-details {
  padding-top: 10px;
}

.evolux-panel table.last-call-time-details tr th {
  color: #373435;
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
}

.evolux-panel .popover-title {
  text-align: center;
  font-weight: bold;
}

.evolux-panel table.last-call-time-details {
  margin-top: -7px;
}

.evolux-panel table.last-call-time-details tr th {
  font-weight: bold;
}

.evolux-panel table.last-call-time-details tr th:first-child,
.evolux-panel table.last-call-time-details tr td:first-child {
  padding-right: 10px;
}

.panel-paused-agents-bell .fa {
  margin-right: 5px;
  font-size: 13px !important;
  cursor: pointer;
}

.evolux-panel .agent-extension,
.evolux-panel .last-call-time {
  white-space: nowrap;
}

.evolux-panel .agent-name {
  max-width: 90px;
}

@media (min-width: 800px) {
  .evolux-panel .table-condensed thead th {
    font-size: 10px;
    padding-right: 2px;
    padding-left: 2px;
  }

  .evolux-panel table th {
      font-size: 11px;
  }

  .evolux-panel table .agent-name {
    max-width: 56px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1050px) {
  .evolux-queue-panel #panel-unavailable-agents .panel-agent-activity .label-light {
    max-width: 40px;
  }
}

@media (min-width: 1024px) {
  .evolux-panel table .agent-name {
    max-width: 50px;
  }
  .evolux-panel table th {
      font-size: 11px;
  }
}

@media (min-width: 1280px) {
  .evolux-panel table .agent-name {
    max-width: 80px;
  }
  .evolux-panel table th {
      font-size: 11px;
  }
}

@media (min-width: 1366px) {
  .evolux-panel table .agent-name {
    max-width: 80px;
  }
  .evolux-panel table th {
      font-size: 12px;
  }
}

@media (min-width: 1600px) {
    .evolux-panel #login-menu-wrapper {
        top: 0;
    }
    .evolux-panel .evolux-hero-subtitle {
        font-size: 1.71em;
    }
    .evolux-panel .evolux-hero-context {
        font-size: 0.85em;
    }
    .evolux-panel .evolux-card-header {
        font-size: 0.65em;
    }
    .evolux-panel table th {
        font-size: 14px;
    }
    .evolux-panel .show-more {
        font-size: 0.65em;
    }
    .evolux-panel .agent-name {
      max-width: 120px;
    }
}

/* end: Base Panel */


/* ---------------------------------------------------------------------------
  Queue Panel
--------------------------------------------------------------------------- */

.navbar-menu {
  font-weight: lighter;
}

.evolux-queue-panel #evolux-content > .row > .col-md-12 {
    position: inherit;
}

.evolux-queue-panel .evolux-queue-panel-console {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: url('/images/queue_panel/console.png') top no-repeat;
    text-align: center;
    font-weight: bold;
    width: 1114px;
    height: 450px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.evolux-queue-panel .evolux-queue-panel-console .console-left  {
    font-size: 190px;
    line-height: 130px;
    color: #FFF;
    margin-top: 130px;
}

.evolux-queue-panel .evolux-queue-panel-console .console-center  {
    font-size: 228px;
    line-height: 155px;
    color: #0A6340;
    margin-top: 120px;
}

.evolux-queue-panel .evolux-queue-panel-console .console-right  {
    font-size: 96px;
    line-height: 96px;
    color: #FFF;
    margin-top: 52px;
    width: 31%;
}

.evolux-queue-panel .call-queue-name-active-label {
  display: inline-block;
  margin-bottom: -2px;
  margin-left: 20px;
}

.evolux-queue-panel .call-queue-name-label {
    vertical-align: 2px;
    max-width: 200px;
}

.evolux-queue-panel .call-queue-name-label-tooltip .tooltip-inner {
  max-width: 400px;
}

.evolux-queue-panel .call-queue-name {
  display: block;
  max-width: 400px;
}

.evolux-queue-panel .callback-label {
    display: inline-block;
}

.evolux-queue-panel .callee_name {
    color: gray;
}
.evolux-queue-panel .caller_name {
    color: #373435;
    font-style: italic;
    margin-right: 5px;
}
.evolux-queue-panel .call_direction { color: #373435; }

.queue-levels {
  margin-top: 5px;
}

.queue-levels table tr td:first-child {
  max-width: 200px;
  padding-right: 15px;
}

span.caller_name, span.callee_name {
  display: inline-block;
  max-width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and (min-width: 990px) {
  span.caller_name, span.callee_name {
    max-width: 80px;
  }

  span.caller_name.unique_queue {
    max-width: 190px;
  }

  .evolux-queue-panel .call-queue-name-label {
    max-width: 100px;
  }

  .evolux-queue-panel .call-queue-name {
    max-width: 210px;
  }
}

@media screen and (min-width: 1024px) {
  span.caller_name, span.callee_name {
    max-width: 100px;
  }

  span.caller_name.unique_queue {
    max-width: 190px;
  }

  .evolux-queue-panel .call-queue-name-label {
    max-width: 80px;
  }

  .evolux-queue-panel .call-queue-name {
    max-width: 210px;
  }
}

@media screen and (min-width: 1280px) {
  span.caller_name, span.callee_name {
    max-width: 100px;
  }

  span.caller_name.unique_queue {
    max-width: 280px;
  }

  .evolux-queue-panel .call-queue-name-label {
    max-width: 160px;
  }

  .evolux-queue-panel .call-queue-name {
    max-width: 300px;
  }

  .evolux-queue-panel .busy-agents .agent-name {
    max-width: 150px;
  }
}

@media screen and (min-width: 1366px) {
  span.caller_name, span.callee_name {
    max-width: 130px;
  }

  span.caller_name.unique_queue {
    max-width: 300px;
  }

  .evolux-queue-panel .call-queue-name-label {
    max-width: 160px;
  }

  .evolux-queue-panel .call-queue-name {
    max-width: 315px;
  }

  .evolux-queue-panel .busy-agents .agent-name {
    max-width: 170px;
  }
}
@media screen and (min-width: 1600px) {
  span.caller_name, span.callee_name {
    max-width: 180px;
  }

  span.caller_name.unique_queue {
    max-width: 375px;
  }

  .evolux-queue-panel .call-queue-name-label {
    max-width: 190px;
  }

  .evolux-queue-panel .call-queue-name {
    max-width: 400px;
  }
  .evolux-queue-panel .busy-agents .agent-name {
    max-width: 230px;
  }
}
@media screen and (min-width: 1920px) {
  span.caller_name, span.callee_name {
    max-width: 230px;
  }

  span.caller_name.unique_queue {
    max-width: 470px;
  }

  .evolux-queue-panel .call-queue-name-label {
    max-width: 280px;
  }

  .evolux-queue-panel .call-queue-name {
    max-width: 490px;
  }

  .evolux-queue-panel .busy-agents .agent-name {
    max-width: 300px;
  }
}

#panel-active-calls button.evolux-spy-extension,
#panel-waiting-calls button.evolux-spy-extension,
#panel-active-calls i.call_direction,
#panel-waiting-calls i.call_direction {
  position: absolute;
}

.evolux-queue-panel #panel-waiting-calls timer,
.evolux-queue-panel #panel-active-calls timer {
    font-size: 20px;
}

.evolux-queue-panel table {
    margin: -15px -8px -8px -8px;
    width: calc(100% + 16px);
    max-width: none;
    position: relative;
    overflow: hidden;
}

.evolux-queue-panel table td:first-child,
.evolux-queue-panel table th:first-child {
    padding-left: 8px;
}

.evolux-queue-panel table td:last-child,
.evolux-queue-panel table th:last-child {
    padding-right: 8px;
}

.evolux-queue-panel .evolux-card-header {
    color: #FFF;
    background: #222;
}

.panel-agent-activity {
    text-align: center;
}

.evolux-queue-panel .panel-agent-activity {
  vertical-align: middle;
}

.panel-agent-activity .panel-agent-activity-icons {
  display: flex;
}

.panel-free-agent-ringing {
    color: grey;
    font-size: 18px !important;
}

.panel-warning {
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
}

/*.evolux-queue-panel #panel-waiting-calls h3 {*/
    /*background: #EBA90C;*/
/*}*/

/*.evolux-queue-panel #panel-active-calls h3 {*/
    /*background: #42A021;*/
/*}*/

/*.evolux-queue-panel #panel-paused-agents h3 {*/
    /*background: #9831EA;*/
/*}*/

/*.evolux-queue-panel #panel-free-agents h3 {*/
    /*background: #1DA4D8;*/
/*}*/

.evolux-queue-panel .animate {
  -webkit-transition: 1s;
}

.evolux-queue-panel .animate.ng-enter {
  opacity: 0;
}

.evolux-queue-panel .animate.ng-leave {
  opacity: 1;
}

.evolux-queue-panel .animate.ng-enter.ng-enter-active {
  opacity: 1;
}

.evolux-queue-panel .animate.ng-leave.ng-leave-active {
  opacity: 0;
}

.evolux-queue-panel .server-unavailable .backdrop {
  position: absolute;
  background: #000;
  opacity: .5;
  height: 100vh;
  width: 100%;
  z-index: 999;
  top: 0;
}

.evolux-queue-panel .server-unavailable .alert {
  position: fixed;
  top: 225px;
  left: 0;
  right: 0;
  margin: auto;
  width: 500px;
  color: white;
  background-color: #e0b041;
  border-color: #e0b041;
  border-radius: 0;
  font-weight: 500;
  z-index: 1000;
}

.evolux-queue-panel .server-unavailable .alert .icon {
  position: absolute;
  font-weight: 500;
  margin-top: 5px;
  font-size: 31px;
}

.evolux-queue-panel .server-unavailable .alert .message {
  background-image: url('/images/unplugged.png');
  background-size: 40px 40px;
  background-repeat: no-repeat;
  display: block;
  padding-left: 60px;
}

.evolux-queue-panel .server-unavailable .alert .close {
  margin-top: -5px;
}

.evolux-queue-panel #panel-unavailable-agents .panel-agent-activity .label-light {
  width: 60px;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
}

.evolux-queue-panel #client_logo, .evolux-queue-panel #evolux_bottom_logo {
  z-index: 10;
}

.evolux-queue-panel > #evolux-wrap {
  height: 100%;
}

/* end: Queue Panel */


/* ---------------------------------------------------------------------------
  Extension Panel
--------------------------------------------------------------------------- */

/* BFBDB6 */
.is_softphone {
  border-left: 10px solid #777 !important;
}

.softphone-extension {
  margin-left: 5px;
  padding: 0px 0px 0 4px;
  background: #F9B817;
  width: 17px;
  height: 17px;
  border-radius: 28px;
  color: #F5f5f5;
  font-family: sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.deactivated-extension {
  font-size: 15px !important;
  color: #DE0E0A;
}

@-webkit-keyframes spaceboots {
  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

#evolux-extension-panel {
    background-image: none;
}

#evolux-extension-panel hr {
    background-image: none;
}

#evolux-extension-panel .evolux-extensions-wrapper {
  margin-left: -10px;
}

#evolux-extension-panel .evolux-extension {
  height: 50px;
  width: 150px;
  margin-left: 10px;
  margin-bottom: 10px;
}

.evolux-extension .ellipsis-left:before {
  letter-spacing: 1px;
  font-weight: bolder;
  background-color: white;
}

#evolux-extension-panel .evolux-extension .extension-status {
  font-size: 35px;
  margin-right: 8px;
  line-height: 1em;
}

#evolux-extension-panel .evolux-extension .extension-number,
#evolux-extension-panel .evolux-extension .extension-name {
  font-size: 14px;
  display: block;
}

#evolux-extension-panel .evolux-extension .extension-name {
  line-height: 1em;
  width: calc(100% - 40px);
}

#evolux-extension-panel .evolux-extension .extension-number {
  font-weight: bolder;
}

#evolux-extension-panel .evolux-extension .extension-calls {
  background-color: darkorange;
  position: absolute;
  left: 25px;
  top: 5px;
  font-size: 10px;
  padding: 4px;
  width: 17px;
  height: 17px;
}

#evolux-extension-panel .extension-offline {
  color: lightgray;
}
#evolux-extension-panel .extension-online  {
  color: forestgreen;
}
#evolux-extension-panel .extension-ringing {
  color: darkorange;
}
#evolux-extension-panel .extension-dialing {
  color: darkorange;
}
#evolux-extension-panel .extension-talking {
  color: royalblue;
}
#evolux-extension-panel .extension-busy {
  color: forestgreen;
}

#evolux-extension-panel .extension-ringing .extension-status {
  -webkit-animation-name: spaceboots;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}


#evolux-extension-panel #hide_offlines_control {
  display: inline;
  margin-right: 30px;
}

#evolux-extension-panel #order_by_form {
  display: inline;
}

#evolux-extension-panel #order_by_form .control-label {
  font-weight: normal;
  margin-right: 5px;
}

#evolux-extension-panel #order_by_form select {
  width: 100px;
  display: inline;
}

@media screen and (max-width: 871px) {
  #evolux-extension-panel #hide_offlines_control {
    margin-right: 15px;
  }

  #evolux-extension-panel #hide_and_order_controls {
    width: 360px;
  }
}

@media screen and (min-width: 768px) and (max-width: 855px) {
  #evolux-extension-panel #search_control {
    width: 20%;
  }
}

@media screen and (min-width: 768px) {
  #evolux-extension-panel #hide_and_order_controls {
    text-align: right;
  }
}

@media screen and (min-width: 600px) and (max-width: 671px) {
  #evolux-extension-panel #hide_offlines_control {
    margin-right: 10px;
  }
}

@media screen and (max-width: 600px) {
  #evolux-extension-panel #hide_and_order_controls {
    padding-right: 5px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width:475px) {
  #evolux-extension-panel #search_control {
    width: 100%;
  }
}

/* end: Extension Panel */


/* ---------------------------------------------------------------------------
  Manager Panel
--------------------------------------------------------------------------- */

#evolux-manager-panel {
    background-image: none;
    color: #E0E0E0;
}

#evolux-manager-panel gauge-chart > div {
    /*height: 130px;*/
    margin-top: -25px;
    margin-bottom: -5px;
}

#evolux-manager-panel #channel-occupation gauge-chart > div {
    margin-top: -25px;
    margin-bottom: -25px;
}

@media (min-width: 767px) {
  #evolux-manager-panel .evolux-card[vertical] {
    display: block;
  }
}

@media (max-width: 767px) {
  #evolux-manager-panel #evolux-wrap {
    padding-bottom: 0px;
  }


  #evolux-manager-panel .evolux-card {
    height: calc(50vh - 60px);
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  #evolux-manager-panel .col-xs-6 {
    width: 100%;
  }
}

#evolux-manager-panel .score-card {
  min-width: 11%;
}

/* end: Manager Panel */


/* ---------------------------------------------------------------------------
  Dark Panel Theme
--------------------------------------------------------------------------- */

.evolux-html-manager-panel,
.evolux-panel.panel-dark {
    background: #101214 !important;
}

.evolux-panel.panel-dark .tooltip-inner {
    background: #828282;
}

.evolux-panel.panel-dark .tooltip.top .tooltip-arrow {
    border-top-color: #828282;
}

.evolux-panel.panel-dark .tooltip.left .tooltip-arrow {
    border-left-color: #828282;
}

.evolux-panel.panel-dark .tooltip.right .tooltip-arrow {
    border-right-color: #828282;
}

.evolux-panel.panel-dark .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #828282;
}

.evolux-panel.panel-dark .server-timer {
    color: #828282;
}

.evolux-panel.panel-dark .server-timer .clock-time {
    color: rgb(255, 218, 23);
}

.evolux-panel.panel-dark .evolux-hero-subtitle {
    color: #E0E0E0;
}

.evolux-panel.panel-dark .evolux-hero-context {
    color: #828282;
}

.evolux-panel.panel-dark .evolux-card {
    background: #2A2A2A;
}

.evolux-panel.panel-dark .evolux-card-header {
    background: #272727;
    color: #9A9A9A;
}

.evolux-panel.panel-dark table td,
.evolux-panel.panel-dark table th {
    border-color: #303030;
}

.evolux-panel.panel-dark table th {
    color: #696969;
}

.evolux-panel.panel-dark table td {
    color: #E0E0E0;
}

.evolux-panel.panel-dark .show-more {
    background: #222;
    color: #828282;
}

.evolux-panel.panel-dark .text-success { color: rgb(88, 239, 0); }
.evolux-panel.panel-dark .text-warning { color: rgb(255, 218, 23); }
.evolux-panel.panel-dark .text-info { color: rgb(119, 190, 228); }
.evolux-panel.panel-dark .text-error { color: rgb(255, 41, 41); }
/* end: Dark Panel Theme */




/* ---------------------------------------------------------------------------
  Calls Panel Page
--------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  #evolux-calls-panel #filter-by-direction {
    text-align: right;
  }
}

@media screen and (max-width: 600px) {
  #evolux-calls-panel .typography-headline {
    min-width: 150px;
  }

  #evolux-calls-panel #filter-by-direction {
    clear: both;
    width: 100px;
  }

  #evolux-calls-panel #search_control {
    min-width: 200px;
    width: 70%;
    float: right;
  }
}

#evolux-calls-panel .evolux-page-title {
  margin-bottom: 5px;
}

#evolux-calls-panel .evolux-total-calls {
  margin-bottom: 0px;
}

#evolux-calls-panel .table-column-direction {
  padding-left: 10px;
}

#evolux-calls-panel .table-column-direction span {
  margin-left: 10px;
}

/* end: Calls Panel Page */


/* ---------------------------------------------------------------------------
  Change Password Page
--------------------------------------------------------------------------- */

#change-password-page #show-password-toggle,
#change-password-page #show-password-toggle * {
  cursor: pointer;
}

#change-password-page #show-password-toggle label {
  display: inline;
}

/* end: Change Password Page */


/* ---------------------------------------------------------------------------
  Campaign Subscribers page
--------------------------------------------------------------------------- */

.evolux-nav.nav > li > a {
  padding: 0;
}

.evolux-nav.nav .active > a {
  color: #777;
}

#campaign-subscriber-page .phone-list .form-control {
  margin: 5px 0;
}

.selectize-width-150.selectize-control {
  width: 150px;
}

/* end: Campaign Subscribers page */

/* ---------------------------------------------------------------------------
  Campaign Reschedule History page
--------------------------------------------------------------------------- */

.selectize-width-100.selectize-control {
  width: 100px;
}

/* end: Campaign Reschedule History page */

/* ---------------------------------------------------------------------------
  Campaign Rule page
--------------------------------------------------------------------------- */

#rules .evolux-card-thin .list-unstyled .checkbox {
  margin: 3px auto;
}

/* end: Campaign Rule page */


/* ---------------------------------------------------------------------------
  Campaign Strategy page
--------------------------------------------------------------------------- */
.strategy-list .strategy-right-section,
.strategy-list .strategy-rule-list .input-strategy-rule {
  margin-left: 20px;
}

.strategy-list .strategy-name {
  float: left;
  font-size: 20px;
  line-height: 25px;
}

.strategy-list .edit-strategy-dial-interval-form,
.strategy-list .strategy-rule-list {
  margin-bottom: 10px;
}

.strategy-list .edit-strategy-dial-interval-form input {
  width: 100px;
}

/* end: Campaign Strategy page */

/* ---------------------------------------------------------------------------
  Campaign Calls Advanced
--------------------------------------------------------------------------- */

.webhook {
  align-items: center;
}

.webhook-container button {
  margin-left: 10px;
}

.webhook-input {
  font-size: 16px;
  font-style: bold;
  width: 300px;
  margin: 0px;
  margin-left: 10px;
  padding: 4px 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.webhook-text-response  {
  width: 280px;
}

.webhook-input span {
  margin: 0px;
  padding-right: 10px;
}


/* ---------------------------------------------------------------------------
  Campaign Calls History Page
--------------------------------------------------------------------------- */

#campaign-calls-history-page .report-input {
  margin-right: 5px;
}

#campaign-calls-history-page .form-control.datepicker,
#campaign-calls-history-page #start_hour,
#campaign-calls-history-page #end_hour {
  width: 85px;
}

#campaign-calls-history-page #agent_id {
  width: 150px;
}

#campaign-calls-history-page #number_id,
#campaign-calls-history-page #outcome_id,
#campaign-calls-history-page #classification {
  width: 160px;
}

#campaign-calls-history-page .table-cell-with-icon {
  display: flex;
  gap: 2px;
}

#campaign-calls-history-page .table-cell-with-icon .ev2-icon {
  margin-top: 4px;
}

/* end: Campaign Calls History Page */


/* ---------------------------------------------------------------------------
  Listen Calls Widget
--------------------------------------------------------------------------- */

audio.listen-calls-audio-player {
  width: 320px;
}

audio.listen-calls-audio-player::-webkit-media-controls-panel {
  background-color: transparent;
}

.listen-call-button {
  width: 22px;
}

.widget-popover,
.listen-call-td .popover {
  width: 425px;
  max-width: none;
  position: fixed;
  cursor: all-scroll;
  opacity: 0.9;
  filter: alpha(opacity=90);
  background-color: #424242;
  border: none;
}

.widget-popover .popover-title,
.listen-call-td .popover .popover-title {
  border-color: #666666;
}

.widget-popover .popover-title i,
.listen-call-td .popover .popover-title i {
  font-size: 10px;
  margin: 0 5px;
  vertical-align: 2px;
  color: #999999;
}

.audio-message,
.widget-popover .popover-title,
.widget-popover .popover-title .close,
.listen-call-td .popover .popover-title,
.listen-call-td .popover .popover-title .close {
  background-color: #424242;
  color: #F0F0F0;
}

p.audio-message {
  font-size: 14px;
  color: #F0F0F0;
}

.widget-popover .arrow,
.listen-call-td .popover .arrow {
  display: none;
}

.widget-popover .close,
.listen-call-td .popover .close {
  line-height: 0.7;
  font-weight: normal;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

/* end: Listen Calls Widget */




/* ---------------------------------------------------------------------------
  Campaign Working Time page
--------------------------------------------------------------------------- */

.working-time__header {
  padding: 16px 0 8px 0;
}

.working-time__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.working-time__legend-icon {
  border: 1px solid #999;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.working-time__legend-icon--green {
  background-color: #7dcb7d;
}

.working-time__legend-icon--grey {
  background-color: #eee;
}

.working-time-table tbody tr td,
.working-time-table tbody tr th {
  border: 1px solid #EEE;
  border-top: 1px solid #EEE;
  border-right-color: #DDD;
  border-left-color: #DDD;
}

.working-time-table tbody tr:nth-child(odd) td,
.working-time-table tbody tr:nth-child(odd) th {
  border-top-width: 2px;
}

.working-time-table tbody tr th.working-time-header {
  color: #AAA;
  font-weight: normal;
  margin-top: -15px;
  font-size: 10px;
  position: absolute;
  padding-right: 10px;
}

.working-time-table tbody tr td:first-child,
.working-time-table tbody tr th:first-child,
.working-time-table thead tr td:first-child,
.working-time-table thead tr th:first-child {
  border: 0px;
}

.working-time-table tbody tr:last-child td {
  border-right: 0px;
}

.working-time-table tbody tr td.not-working-hour {
  background-color: #FAFAFA;
}

.working-time-table tbody tr td.not-working-hour:nth-of-type(11),
.working-time-table tbody tr td.not-working-hour:nth-of-type(13) {
  background-color: #EEE;
  border-color: #E0E0E0;
}

.working-time-table tbody tr td.working-hour {
  background-color: #7DCB7D;
  border-color: #60BF60;
}

.working-time-table tbody tr td {
  height: 20px;
  padding: 0px;
}

.working-time-table tbody tr {
  margin-bottom: 5px;
}

.working-time-table {
  width: 100%;
}

.working-time-table thead tr th.working-time-table-hours {
  width: 45px;
}

.working-time-table thead tr th.work-time-table-column-padding,
.working-time-table tbody tr td.work-time-table-column-padding {
  width: 5px;
  border: none;
  padding: 0;
}

.working-time-table tbody tr td[data-work-time] {
  cursor: pointer;
}

/* end: Campaign Working Time page */


/* ---------------------------------------------------------------------------
  Audio Campaign
--------------------------------------------------------------------------- */

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.audio-select .audio-show-uploader,
.base-campaign-select .base-campaign-data {
  margin-top: -5px;
}

.base-campaign-select .base-campaign-data  {
  top: -2px;
  margin-top: 0px;
}

.base-campaign-select .base-campaign-data {
  padding: 7px 12px;
}

.audio-select .selectize-input,
.base-campaign-select .selectize-input,
.audio-upload-zone .audio-upload-button {
  border-radius: 0px !important;
}

/* end: Audio Campaign */

/* ---------------------------------------------------------------------------
  Agents and Supervisors selection
--------------------------------------------------------------------------- */

#enable_disable_agents,
#enable_disable_supervisors {}

/*#enable_disable_agents .agents_list,
 #enable_disable_supervisors .supervisors_list{
    background: #f5f5f5;
    border-radius: 5px;
}
*/
#enable_disable_agents .agents_list .inner,
#enable_disable_supervisors .supervisors_list .inner {
    /*padding: 5px 15px 10px 15px;*/
    overflow: hidden;
}

.search_agent,
.search_supervisor {
    padding-top: 8px;
}

.connectedSortable {
    margin: 0;
    border-radius: 5px;
    max-height: 240px;
    overflow-y: auto;
    padding-left: 0px;
}

.connectedSortable.empty {
    height: 30px;
    border: 1px dashed #AAA;
}

.connectedSortable li {
    background: #FFF;
    border: 1px solid #DDD;
    border-radius: 3px;
    margin-bottom: 7px;
    padding: 5px 10px;
    list-style: none;
}

.connectedSortable li:hover {
    border: 1px solid #AAA;
    cursor: pointer;
}

.connectedSortable li.ui-sortable-helper {
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.connectedSortable li.ui-sortable-helper:hover {
    cursor: move;
}

.connectedSortable li input {
    display: none;
}

.connectedSortable li.ui-sortable-placeholder {
    background: #FFFAD1;
    visibility: visible !important;
    height: 20px;
    border: 1px dashed #EDE38C;
}

.connectedSortable li .highlight {
    background: rgba(255, 237, 40, 0.4);
}

/* end: Agents and Supervisors selection */

.maintenance-button-grid div {
  margin-top: 10px;
}

/* ---------------------------------------------------------------------------
    V1
 --------------------------------------------------------------------------- */
.evolux-queue-panel .logo-container {
  display: inline-flex;
  width: 100%;
  padding-left: 115px;
  padding-right: 115px;
  padding-bottom: 40px;
}

#client_logo {
  display: flex;
  justify-content: flex-start;
  width: 50%;
}

#evolux_bottom_logo {
  display: flex;
  justify-content: flex-end;
  display: flex;
  width: 50%;
}

#evolux_bottom_logo img,
#client_logo img {
    width: auto;
    max-height: 46px;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.evolux-table-striped .bg-warning {
  background-color: #fcf8e3 !important;
}

.evolux-table-striped .bg-danger {
  background-color: #f2dede !important;
}

.evolux-table-striped .odd {
    background-color: #f9f9f9;
}

.color_warning {
    color: #F28A02;
}

.color_bad {
  color: #DD3300;
}

.font-bold {
  font-weight: bold;
}

/* ---------------------------------------------------------------------------
  Graph
--------------------------------------------------------------------------- */

.evolux-graph-view {
  padding: 20px 0;
}

.evolux-graph-footer {
  margin: 8px -8px -8px -8px;
  padding: 11px 13px 8px;
  background-color: #222;
}

.evolux-graph-footer span {
  color: #828282;
  font-size: 11px;
}

.evolux-graph-total {
  display: block;
  padding-top: 6px;
}

.evolux-graph-more {
  text-align: right;
}

.evolux-graph-more span {
  padding: 4px 6px;
  background-color: #171717;
  color: #ccc;
}

.evolux-graph-more span:hover {
  background-color: #ccc;
  color: #222;
}

.evolux-graph-status-opened {
  border-top: 1px solid #555;
  padding-top: 10px;
  margin-top: 10px;
}

/* end: Manager */


/* -------------------------------------------------------------
  Table row
------------------------------------------------------------- */
.toggle_rule_transformation {
    float: right;
    background-color: #efefef;
}
.toggle_rule_transformation:hover {
    background-color: #373435;
    color: #fff;
}

.tablerow_wrapper {
    padding: 0 !important;
}
.tablerowbtn {
    float: right;
}
/* this is an ugly hack, because "bootstrap's rows" does not respect
   the frame of the parent element. */
.route-pad {
    padding: 8px;
}

.rule_exceptions {
    padding: 10px 20px;
    background-color: #f5f5f5;
}

.add_pattern_exception {
    padding: 10px 0 20px 0;
}

.add_pattern_exception_form label {
    margin: 8px 0 0 0;
}

.add_pattern_exception_form .arrow {
    margin: 10px 0 0 0;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ul.form-control {
  list-style-type: none;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.storage-services-form .form-control-feedback.icon {
  height: auto;
  top: 50%;
  transform: translateY(-50%);
}

.form-control.selectize-control {
  padding: 0 0 0 0;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control.selectize-dropdown {
  padding: 0 0 0 0;
  z-index: 1051;
  height: auto;
}

.control-desk.campaign-group-select {
  padding: 0;
  min-width: 300px;
  font-weight: normal;
}

.control-desk.loading-campaigns {
  visibility: visible;
  margin-left: 16px;
}

.control-desk.campaign-group-actions-select {
  width: 200px;
}

.controldesk-call-ratio-form .form-group button.btn,
.controldesk-call-ratio-form .form-group a.btn{
  margin-top: 25px;
}

.tooltip, .popover {
  font-family: Open Sans, serif;
}

table.tablesorter thead tr .header {
  background-image: url('/images/bg.gif');
  background-repeat: no-repeat;
  background-position: center left;
  cursor: pointer;
  padding-left: 20px;
}

table.tablesorter thead tr .headerSortUp {
  background-image: url('/images/asc.gif');
}

table.tablesorter thead tr .headerSortDown {
  background-image: url('/images/desc.gif')
}

.btn.btn-clear {
  background-color: transparent;
  background-image: none;
  border: 0;
}

.btn.btn-clear:hover {
  opacity: 0.5;
}

.btn.btn-clear .icon {
  font-size: 18px;
}

.popover-list {
  max-width: 400px;
}

.popover-list ul {
  padding: 0;
}

.popover-list li {
  list-style-type: none;
}

.bootstrap-pagination {
  margin-right: 15px;
}

.bootstrap-pagination .pagination a {
  text-decoration: none !important;
}

.bootstrap-pagination .pagination a:hover {
  text-decoration: underline !important;
}

.bootstrap-pagination .pagination .active a {
  color: white !important;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner {
  display: inherit;
  animation: spinner 1s linear infinite;
}

.custom-tooltip-left-top.top-left .tooltip-arrow {
  bottom: -5px;
}

#report_form {
  box-shadow: none;
  border-radius: 0;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner {
  display: inherit;
  animation: spinner 1.5s linear infinite;
  text-align: center;
}

.popover-unlock-unpause {
  width: 125px;
}

.popover-unlock-unpause input[type=number]::-webkit-inner-spin-button,
.popover-unlock-unpause input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

.tooltip-light.tooltip {
  opacity: 1;
}

.tooltip-light.tooltip > .tooltip-inner {
  background-color: #FFFFFF;
  padding: 14px;
  color: #696667;
  box-shadow: 0px 2px 8px #00000029;
}

.tooltip-light.tooltip > .tooltip-arrow {
  border-top-color: #FFFFFF;
}

.popover-light.popover {
  background: #FFFFFF;
  box-shadow: 0px 2px 8px #00000029;
  border: none;
  padding: 8px 16px;
  margin-left: -10px;
  font-family: Open Sans, serif;
}

.popover-light.popover.top .arrow {
  border-top-color: rgba(0, 0, 0, 0.1);
}

.popover-light .popover-content {
  padding: 6px 0px;
}

.popover-light .table-condensed thead th {
  font-size: 10px;
  font-weight: 700;
  color: #999999;
  border: none;
}

.popover-light .table-condensed tbody td {
  font-size: 10px;
  color: #373435;
  border: none;
}

/* ---------------------------------------------------------------------------
  Utils
--------------------------------------------------------------------------- */

.display-flex {
  display: flex;
}

.no-border-radius-left {
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  border-left: none;
}

.no-border-radius-right {
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.mouse-disabled {
  pointer-events: none;
}

/* end: Utils */

#flash div {
  word-break: break-all;
}

.create-modal-btn {
  margin-bottom: 10px;
}

.footer-tenant-dropdown {
  margin-top: 5px;
  z-index: 1000;
}

.footer-tenant-dropdown .item {
  padding-left: 10px;
  padding-right: 10px;
}


.loading {
  background: url('/images/report_loading.gif') center center no-repeat;
  height: 35px;
  width: 35px;
}

.modal-footer-items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.loading-display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-display .lead {
  margin-bottom: 0;
}

.table-row.bg-yellow-25 td {
  background-color: rgba(224, 176, 65, 0.25);
}

.ml5 {
  margin-left: 5px;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.small-label {
  padding: .2em .6em .15em;
  font-size: 70%;
}

#start-date,
#end-date {
  width: 140px;
}

.inline-flex {
  display: inline-flex;
}

.tenant-status {
    margin: 0 4px;
}

.footer-tenant-select {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  #evolux-footer,
  .footer {
    height: auto;
    padding-bottom: 5px;
  }
  .footer-tenant-select {
    justify-content: flex-start;
  }
}

.toggle-on {
    color: #8ac348;
}

.disabled-line {
    background-color: #eee !important;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.forget-password-link {
    text-align: right;
    padding-bottom: 6px;
}

.forget-password-link a {
    padding: 0 0 5px 0 !important;
    font-size: 12px !important;
}

#switch-tenant  {
  z-index: 15;
  margin: auto 0;
}

#switch-tenant .selectize-input {
  padding: 4px 30px 4px 10px;
}

#switch-tenant .selectize-input>input {
  width: 100% !important;
}

.label.label-light {
  display: inline-block;
  padding: 4px 4px 3px;
  font-size: 9px;
  font-weight: 400;
  background-color: #E9E9E9;
  color: #373435;
  text-align: center;
}

.label.label-light.--danger {
  background-color: #CC3C14;
  color: #FFFFFF;
}

#menu-wrapper .navbar-menu.user-navbar .dropdown-menu {
  padding: 7px 0;
}

#menu-wrapper .navbar-menu.user-navbar .dropdown-menu a {
  line-height: 36px;
}

.plan-section {
  padding: 8px 24px;
  max-width: 220px;
}

.plan-section__header {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 10px;
  color: #AAAAAA;
  margin-bottom: 6px;
}

.plan-section__content {
  display: flex;
  align-items: center;
}

.plan-section__badge {
  height: 32px;
  width: 32px;
  background-color: white;
  background-color: #AAAAAA;
  border-radius: 4px;
  margin-right: 8px;
  box-sizing: content-box;
}

.plan-section__name {
  font-size: 12px;
  color: #1B1B1C;
  font-weight: 500;
  min-width: 0;
  word-break: break-word;
}

.survey-form select {
  max-width: 320px;
}

.survey-form .survey-audio {
  display: flex;
  align-items: center;
}

.survey-form .survey-audio select {
  margin-right: 6px;
}

/* ---------------------------------------------------------------------------
  Progress
--------------------------------------------------------------------------- */

.lean-progress {
  vertical-align: middle;
  width: 100%;
  line-height: 8px;
}

.lean-progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  height: 8px;
  border-radius: 8px;
}

.lean-progress[value]::-webkit-progress-bar {
  background-color: #E9E9E9;
  border-radius: 8px;
}

.lean-progress[value].--alert::-webkit-progress-value {
  background-color: #FD604E;
}

.lean-progress[value]::-webkit-progress-value {
  background-color: #00BBD3;
  border-radius: 8px;
  transition: 0.5s;
  transition-timing-function: ease-in-out;
}

/* ---------------------------------------------------------------------------
  Toggle Switch
--------------------------------------------------------------------------- */

.lean-switch {
  display: inline-block;
  height: 16px;
  position: relative;
  width: 28px;
  margin: 0;
}

.lean-switch input {
  display:none;
}

.lean-switch .slider {
  background-color: #CCCCCC;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  cursor: pointer;
  transition: .4s;
}

.lean-switch .slider::before {
  content: "";
  background-color: #999999;
  width: 18px;
  height: 18px;
  position: absolute;
  left: -1px;
  bottom: -1px;
  transition: .4s;
}

.lean-switch input:disabled + .slider {
  cursor: not-allowed;
}

.lean-switch input:checked:disabled + .slider::before {
  background-color: #999999;
}

.lean-switch input:checked + .slider {
  /* Change background-color */
}

.lean-switch input:checked + .slider::before {
  transform: translateX(12px);
  background-color: #00BBD3;
}

.lean-switch .slider.round {
  border-radius: 34px;
}

.lean-switch .slider.round:before {
  border-radius: 50%;
}

.dropdown-menu .download_spreadsheet {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333;
  white-space: nowrap;
  font-size: 13pt;
  line-height: 32px;
  padding: 0 50px 0 24px;
  background: none;
  border: none;
  outline: none;
}

.dropdown-menu .download_spreadsheet:hover {
  color: #00BBD3;
  background-color: #FFFFFF;
  background-image: none;
}

a[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

.configuration-container {
  width: 100%;
  display: flex;
}
.configuration-menu-header {
  padding: 5px 0px 25px 0px;
  color: aliceblue;
}

.configuration-menu-header > .header-item  {
  display: flex;
  align-items: center;
  background-color: #373435;
  padding: 10px;
  border-radius: 4px;
}

.configuration-menu-header > .header-item i {
  font-size: 22px;
}

.configuration-menu-header > .header-item span {
  font-size: 16px;
  padding-left: 10px;
}


.configuration-menu-header > span {
  font-size: 16px;
  padding-left: 10px;
}

.configuration-content {
  height: 100%;
  width: 100%;
  flex: 1;
  margin: 0px 25px 15px 25px;
  background: #fff;
  padding: 25px;
  border-radius: 2px;
}

.configuration-menu {
  background: #fdfdfd;
  border-radius: 2px;
  width: 350px;
  min-width: 350px;
  height: fit-content;
}

.configuration-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding: 10px 10px 25px 10px;
}

.configuration-menu ul li {
  border-radius: 2px;
  cursor: pointer;
  color: #868c8f;
  display: flex;
  align-items: center;
  padding: 0px 10px;
  margin: 5px 10px;
}

.configuration-menu ul li > i {
  font-size: 14px;
}

.configuration-menu li:hover {
  color: #2b2f33;
}

.configuration-menu li a {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 10px;
  font-size: 14px;
}

.configuration-menu li.active {
  color: #2b2f33;
  background-color: #efefef;
}

/* 
EVOLUX-UI v2 snippets 
# FIX ME
This must be temporary, we need to be able to get main.css from evolux-ui v2 from our public folder 
*/

.ev2-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  letter-spacing: 0;
  color: #fff;
  text-transform: uppercase;
  outline: none;
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
}

.ev2-button > .ev2-btn-icon {
  padding-right: 8px;
}

.ev2-button--primary, .ev2-button--tertiary {
  border: none;
}

.ev2-button--md {
  font-size: 12px;
  height: 32px;
}

.ev2-button--rect {
  padding: 8px 16px;
  border-radius: 2px;
}

.ev2-button--primary.ev2-button--neutral {
  background: #696667;
}

.ev2-button--primary.ev2-button--negative {
  background: #fe604f;
}

.main-app-content {
  padding-bottom: 0;
  height: 100vh;
}

.main-app-wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  background: #F9FAFC;

  #evolux-content {
      width: 100%;
  }

  .main-app-page-wrapper {
    width: 100%;
    padding: 24px;
    gap: 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .row-fluid {
    padding: 0;

    .evolux-page-title .typography-headline {
      display: none;
    }

    .old-page-title {
      display: none;
    }
  }
}

/* Make sure Evolux UI styles are not overwritten */

.ev2-input__input {
  font-style: normal;
}

/* 
END EVOLUX-UI v2 snippets 
*/