@font-face {
    font-family: 'digital';
    src: url('../fonts/DS-DIGIB.TTF') format('truetype')
  }

body    { font-family: Graphik,Helvetica,Arial,sans_serif; }

#mainnav-menu ul ul ul a { padding-left: 80px; }
.hasRequired        { border: solid 1px red; }
.hasRequiredLabel   { color: red; }

.menuItem.selected      { font-weight: bold; }
.td-gvp {
    padding: 4px !important;
}
.tableFixHead td {
    line-height: 30px !important;
}
.tableFixHead           { overflow-y: auto; border: solid 1px #e5e5e5; }
.tableFixHead thead th  { position: sticky; top: 0; background-color: #fff; }
.linha_red              { background-color: #f1b8b8 !important; }
.linha_red td           { background-color: #f1b8b8 !important; }
.linha_check            { background-color: red !important; }
.linha_check td         { background-color: red !important; }

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark { top: 15px !important; }
.dropdown-menu.inner > .active > a {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #7a878e !important;
}

.note-editor .note-editing-area .note-editable {
    word-break: break-word !important;
}

#fullLoader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
    opacity: 0.5;
}

.forcaShow {
    display: inline-table !important;
}

#navbar {
    z-index: 1001;
}
#mainnav-container { z-index: 1000; }

.highcharts-credits   { display: none !important; }
.highcharts-exporting-group   { display: none !important; }

.selectProdutoOpo:hover { cursor: pointer; }
.cursorPointer { cursor: pointer; }

.navbar-brand{
    background-repeat: no-repeat;
    background-position: center;
}

.mainnav-sm .list-divider
{
    display:none;
}

.mainnav-sm .navbar-brand   { background-repeat: no-repeat; background-position: center; background-size: 50px; }
.mainnav-lg .navbar-brand   { background-repeat: no-repeat; background-position: center; background-size: 90px; }

.tooltip { position: fixed; }

.rowred { background-color: #F0685E !important; color: #fff !important; }
.rowred a:not(.menuItem) { color: #fff !important; }

.rowyellow { background-color: #fffec8  !important; }
.rowgreen { background-color: #c3f1b8 !important; }

blockquote { overflow: auto; }

.chat-body .media-body > div > span, .chat-body .media-body > div > p {
    border-radius: 13px !important;
}

.spanMessage {
    text-align: left;
    display: block;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

#remetenteMessage {
    font-weight: bold;
    margin-bottom: 5px;
    margin-left: 20px;
    color: #555;
}

#contextoMessage {
    margin-left: 20px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e9e9e9;
    border-radius: 5px;
    border-left: 3px solid #ccc;
    font-style: italic;
}

#remetenteMessage, #contextoMessage {
    position: relative;
}

#contextoMessage::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #e9e9e9;
}



/* -- LOADERS -- */

#loaderAction { position: fixed; top: 0; right: 0; width: 300px; height: 300px; background: #ed4e6e; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); transform: translateX(100%) translateY(-100%) rotate(45deg); pointer-events: none; z-index: 10001; }
#loaderAction.la-animate { -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); transform: translateX(50%) translateY(-50%) rotate(45deg); }
#loaderAction::before, #loaderAction::after { position: absolute; bottom: 30px; left: 50%; display: block; border: 5px solid #fff; border-radius: 50%; content: ''; }
#loaderAction::before { margin-left: -40px; width: 80px; height: 80px; border-right-color: #bb344f; border-left-color: #bb344f; -webkit-animation: rotation 3s linear infinite; animation: rotation 3s linear infinite; }
#loaderAction::after { bottom: 50px; margin-left: -20px; width: 40px; height: 40px; border-top-color: #bb344f; border-bottom-color: #bb344f; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; }

@-webkit-keyframes rotation {
    0%      { -webkit-transform: rotate(0deg); }
    50%     { -webkit-transform: rotate(180deg); }
    100%    { -webkit-transform: rotate(360deg); }
}

@keyframes rotation {
    0%      { transform: rotate(0deg); }
    50%     { transform: rotate(180deg); }
    100%    { transform: rotate(360deg); }
}

#loaderAction2 { position: fixed; top: 0; right: 0; width: 300px; height: 300px; background: #ed4e6e; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); transform: translateX(100%) translateY(-100%) rotate(45deg); pointer-events: none; z-index: 10001; }
#loaderAction2.la-animate { -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg); transform: translateX(50%) translateY(-50%) rotate(45deg); }
#loaderAction2::before, #loaderAction2::after { position: absolute; bottom: 30px; left: 50%; display: block; border: 5px solid #fff; border-radius: 50%; content: ''; }
#loaderAction2::before { margin-left: -40px; width: 80px; height: 80px; border-right-color: #bb344f; border-left-color: #bb344f; -webkit-animation: rotation 3s linear infinite; animation: rotation 3s linear infinite; }
#loaderAction2::after { bottom: 50px; margin-left: -20px; width: 40px; height: 40px; border-top-color: #bb344f; border-bottom-color: #bb344f; -webkit-animation: rotation 1s linear infinite; animation: rotation 1s linear infinite; }

@-webkit-keyframes rotation {
    0%      { -webkit-transform: rotate(0deg); }
    50%     { -webkit-transform: rotate(180deg); }
    100%    { -webkit-transform: rotate(360deg); }
}

@keyframes rotation {
    0%      { transform: rotate(0deg); }
    50%     { transform: rotate(180deg); }
    100%    { transform: rotate(360deg); }
}

.hidephone
{
    transform: translate(100%, 0px);
}



/* KEYBOARD PHONE CSS */


  #holdCalls
  {
      /* background: url(https://i.redd.it/qwd83nc4xxf41.jpg); */
      transition-duration: 0.5s;
  }
  .phoneCommands
  {
      /*margin-top: 8px;
      width: 56px;
      top: 0px;
      right: 4px;
      position: absolute;*/
      margin-top: 10px;
  }

  .cmd-phone
  {
    color: #FFF;
    width: 45%;
    height: 56px;
    padding-left: 15px;
    border: none;
    padding-right: 17px;
    font-size: 35px;
    padding-top: 0px;
    text-align: center;
    /* border-radius: 5px 5px 5px 5px; */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    cursor: pointer;
  }

  .phone-close
  {
    bottom: -100px;
    left: 0px;
  }
  .cmd-phone.large
  {
      width:92%;
      margin-top: 4px;
      font-size: 1.8em;
  }
  #cancelCall
  {
    color:white;
    padding-top: 6px;
    padding-left: 15px;
    font-size: 1.5em;
    background-color:tomato;
    margin-left: 12px;
  }
  #phoneAwnser
  {
      color:white;
      background-color:green;
      font-size: 1.5em;
      padding-top: 6px;
      padding-left: 15px;

  }
  #phoneReject
  {
    color:white;
      padding-top: 6px;
      padding-left: 15px;
      font-size: 1.5em;
      background-color:tomato;
  }
  #phoneAwnser:hover, #phoneReject:hover
  {
      color:white;
  }

  .calleron
  {
    background-color: #389400;
  }
  .calleroff
  {
    background-color: gray;
  }
  #caller
  {

  }

  #close-phone
  {

    background-color: darkgray;

  }
  #clear-phone
  {

    background-color: gray;

  }

  .tastierino{
    padding: 10px;
    border-radius: 10px;
  }

  .tastierino{
    background-color: transparent;
    position: relative;
    top: 120px;
    width: 100%;
    text-align: center;
    left: 50%;
    height: 235px;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    box-shadow: 10px 10px 20px -2px rgba(0,0,0,0.1);
}
  .tasti{
    text-align: center;
  }
.lblCaller
{
    font-family: digital;
    font-size: 2em;
    color: gray;
    text-align: center;
    margin-left: 10px;
}
  .phone-visor
  {
      font-family: digital;
      margin-top: 20px;
    padding-left: 10px;
    font-size: 3em;
    font-family: 'digital';
    width: 100%;
    height: 40px;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border: 0px solid #B8B8B8;
  }

  .phone-visor2
  {
      font-family: digital;
      margin-top: 20px;
      text-align: center;
    padding-left: 10px;
    font-size: 3em;
    font-family: 'digital';
    width: 100%;
    height: 40px;
    border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border: 0px solid #B8B8B8;
  }
  .num{
    position:relative;
    width: 40px;
    height: 40px;
    display: inline-block;
    background: white;
    color: gray;
    font-family: helvetica;
    margin:5px;
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    border-radius: 5px;
  }

  .num:hover{
    opacity: 0.8;
  }

  .num:active{
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2)
  }

  .num p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    font-size: 25px;
    cursor: pointer;

  }
  .CallerPicture
  {
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    margin-top: 24px;
  }
  .activeCallerInfo
  {
      text-align: center;
  }
.muted{
    background-color: steelblue;
    height: 34px;
    border-radius: 3px;
    width: 52px;
    display: inherit;
    margin-left: 27px;
    margin-top: 8px;
}

  .muted i{
    font-size: 24px;
    margin: 0px;
    padding: 0px;
    position: relative;
    top: -10px;
  }
  .TimerB
  {
    /*font-family: digital;
    font-size: 34px;
    color: greenyellow;
    text-align: center;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    background-color: black;
    padding: 3px;
    width: 80% !important;*/

    border: 1px solid darkslategray;
    font-family: digital;
    font-size: 22px;
    color: greenyellow;
    text-align: center;
    display: block;
    position: relative;
    margin-top: 10px;
    float: right;
    border-radius: 4px;
    background-color: black;
    padding: 0px;
    padding-top: 5px;
    height: 40px;
    width: 48% !important;
  }
  .callcliente
  {
    text-align: center;
    padding-top: 12px;
    color:gray;
    text-transform: uppercase;
  }
  .DigitalTimer
  {
      padding: 20px;
  }
  label{
    /* mix-blend-mode: screen !important; */
  }






 #holdCalls.nav-tabs>li.active>a, #holdCalls.nav-tabs>li.active>a:hover, #holdCalls.nav-tabs>li.active>a:focus {
    color: whitesmoke !important;
    border-color: transparent;
    background-color: black;
    border-radius: 0px;
    cursor:pointer;
    border-bottom: 1px solid gray;
  }


  ul.historicoChamadas
  {
    padding: 0px;
    list-style: none;
  }

  ul.chamadas
  {
    padding: 0px;
    left: 0px;
    list-style: none;
    margin: 0px;
    position: relative;
  }

.call_atendida
{
  color:steelblue;
}
.call_n_atendida
{
  color:tomato;
}

  .lichamadas_major
  {
    min-height: 187px !important;
    /* background-color:red !important; */
  }


  .lichamadas_minor
  {
    /* background-color: green !important; */
    min-height: 144px !important;
  }

  .chamadaTransferida{
    background-color: #230559 !important
  }

ul.chamadas li{
  background-color: black;
    padding: 5px;
    position:relative;
    border-radius: 5px;
    margin-bottom: 2px;
}
.digitalnumber
{
  font-family: 'digital';
    position: absolute;
    font-size: 22px;
    line-height: 24px;
    position:relative;
    top:5px;
    top: 1px;
}
  .phone-cmd
  {
    font-size:30px !important;
    cursor:pointer;
    border: 1px solid darkslategray;
    padding: 4px;
    height:40px;
    text-align: center;
    margin-right: 2px;
    border-radius: 5px;
    float:left;
    width:40px;
    padding-top: 4px
  }
  .digitalBlock .phone-cmd{
    margin-left: 10px !important;

  }
  .hidden
  {
    display:none !important;
  }
  .box-chamadas
  {
    height: 100%;
    overflow-y: scroll;
  }

  .box-chamadas::-webkit-scrollbar {
    width:10px;
}
.box-chamadas::-webkit-scrollbar-track {
    background: white;

  }
.box-chamadas::-webkit-scrollbar-thumb {
    background: #7CB237;
    border-radius: 10px;
  }
.idcaller
{
  background-color: greenyellow;
  height: 25px;
  /* left: 0px; */
  /* padding: 5px; */
  position: absolute;
  /* float: right; */
  right: 0px;
  margin-top: -5px;
  height: 100%;
  padding-left: 9px;
  padding-right: 8px;
  padding-top: 4px;
  width: 25px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  color: black;
}


.greendigital
{
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2d2c25+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#52b152+0,83c783+6,2d2c25+11,002400+63,002400+86,008a00+93,005700+99 */
background: #52b152; /* Old browsers */
background: -moz-linear-gradient(top,  #52b152 0%, #83c783 6%, #2d2c25 11%, #002400 63%, #002400 86%, #008a00 93%, #005700 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #52b152 0%,#83c783 6%,#2d2c25 11%,#002400 63%,#002400 86%,#008a00 93%,#005700 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #52b152 0%,#83c783 6%,#2d2c25 11%,#002400 63%,#002400 86%,#008a00 93%,#005700 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52b152', endColorstr='#005700',GradientType=0 ); /* IE6-9 */

}
.digitalBlock
{
  margin-top: 32px;
    position: relative;
}
.historyLi
{
  border: 1px solid darkgray;border-radius: 7px; margin-bottom: 5px;
}

.recall
{
  float: right;
    /* margin-right: -11px; */
    height: 100%;
    top: -6px;
    position: absolute;
    border: none;
    right: 0px;
    color: steelblue;
    cursor: pointer;
}

.forward
{
  font-size: 25px !important;
  cursor: pointer;
  color: steelblue;
  margin-right: 12px;
  padding-top: 7px;
}

.dialogCega {
    background-color: dimgray;
    border-top: 4px solid black;
    position: absolute;
    bottom: 0px;
    padding: 10px;
    z-index: 100;
    height: 350px;
    width: 100%;
    transition-duration: 0.4s;
    transform: translate(0px, 240px);
}
.navfilas a
{
  background-color: transparent !important; color:gray;
}
.navfilas  .navfilas a:active, .nav-tabs.navfilas>li.active>a
{
  background-color: transparent !important; color:black !important;
}

.nav-item.active
{
  background-color: whitesmoke !important; color:black !important;
}

.FilasTab .btn-link.collapsed {
  color:white;
  background-color: gray;
}
.FilasTab .btn-link {
  color:white;
  background-color: black;
}

.ListUsers
{
  list-style: none;
  padding: 0px;
}
.ListUsers li
{
  margin-bottom: 5px;
}
.CardUserShort
{
  min-height: 50px;
  background-color: white;
  padding: 6px;
  border:1px solid steelblue;
  border-radius: 5px;
}
.CardUserShort i
{
  cursor:pointer;
}
.SelectedQueue
{
  background-color: black;
  color:white !important;
  text-decoration: none;
}
.SelectedQueue a
{
  color:white !important;
  text-decoration: none;
}

.toggle-switch:checked+label:before
{
  transition: none !important;
}

.pull-right
{
   /* position:absolute; */
}
.toggle-switch+label:after
{
  /* background-color: #9d6060 !important; */
}
.toggle-switch+label:before{
  /* border-color:#9d6060; */
}

/* 

    .panel-body .col-md-4
    {
      padding-left: 0px;
    }
    .panel-body .col-md-12
    {
      padding-left: 0px !important;
    }
    .panel-body .col-md-6
    {
      padding-left: 0px !important;
    }
    .panel-body .col-md-3
    {
      padding-left: 0px !important;
    }
*/

.audioConfigBox
{
  padding: 10px;
}
.audioConfigBox select
{
  width:100%;
  margin-bottom: 10px;
}

.audioConfigBox .select:before
{
  top:60% !important;
}