/* $info:             #bee5eb !default;
$info-light:       #d8eff3 !default;
$info-lighter:     #f5fbfc !default; */
/*AGENT*/
/*Scrollbars*/
body {
  scrollbar-color: var(--custom-scroll-color, #999) var(--custom-scroll-bg, rgba(0, 0, 0, 0.05));
  scrollbar-width: thin;
}
body::-webkit-scrollbar {
  background-color: var(--custom-scroll-bg, rgba(0, 0, 0, 0.05));
  width: 16px;
  height: 16px;
}
body::-webkit-scrollbar-thumb {
  background: var(--custom-scroll-color, #999);
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 0;
  min-width: 16px;
  min-height: 16px;
}

:root {
  --rz-panel-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04);
  --rz-card-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.08), 0px 4px 12px 0 rgba(0, 0, 0, 0.04);
}

ul.list-grid-text {
  margin: 0;
  padding: 0;
  list-style: none;
  /* @include media-breakpoint-up(md){
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      column-gap: 10px;
  } */
}
ul.list-grid-text li {
  position: relative;
  padding: 3px 0 3px 15px;
}
ul.list-grid-text li::before {
  font-family: "FontAwesome" !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1 !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: inherit;
  content: "\f00c";
  font-size: 10px;
  position: absolute;
  left: 0;
  top: 3px;
  opacity: 0.5;
}

i.ic-global {
  font-size: 0.9em;
  color: #adb5bd;
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  line-height: inherit;
  cursor: default;
}

.rz-panel {
  box-shadow: var(--rz-card-shadow);
}

.panel-header-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.panel-header-content .panel-title {
  display: flex;
  flex: 1;
  min-width: 40%;
  align-items: center;
  min-height: 32px;
}
.panel-header-content .panel-tools {
  flex: 0 0 auto;
}

.panel-search {
  width: 100%;
  min-width: 250px;
  max-width: 350px;
}

.grid-list {
  display: grid;
  gap: 30px;
}

#filterFloating {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}
#filterFloating .filter-floating-content {
  display: flex;
  flex-direction: column;
  background-color: white;
  width: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  opacity: 0;
  transform: translateX(50%);
  transition: all ease 0.3s;
}
#filterFloating .filter-floating-content .ff-header {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid #ced4da;
  background-color: #f8f9fa;
  padding: 10px 15px;
  align-items: center;
}
#filterFloating .filter-floating-content .ff-header h5 {
  margin: 0;
  flex-grow: 1;
  text-transform: uppercase;
}
#filterFloating .filter-floating-content .ff-content {
  overflow: auto;
  flex-grow: 1;
  padding: 15px;
}
#filterFloating .filter-floating-content .ff-content {
  scrollbar-color: var(--custom-scroll-color, #999) var(--custom-scroll-bg, rgba(0, 0, 0, 0.05));
  scrollbar-width: thin;
}
#filterFloating .filter-floating-content .ff-content::-webkit-scrollbar {
  background-color: var(--custom-scroll-bg, rgba(0, 0, 0, 0.05));
  width: 16px;
  height: 16px;
}
#filterFloating .filter-floating-content .ff-content::-webkit-scrollbar-thumb {
  background: var(--custom-scroll-color, #999);
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 0;
  min-width: 16px;
  min-height: 16px;
}
#filterFloating .filter-floating-content .ff-foot {
  flex: 0 0 auto;
  background-color: #f8f9fa;
  border-top: 1px solid #ced4da;
  padding: 10px 15px 10px 10px;
}
#filterFloating .filter-floating-content[data-animation=in] {
  opacity: 1;
  transform: translateX(0);
}
#filterFloating[data-isvisible] {
  display: flex;
}
@media (min-width: 768px) {
  #filterFloating .filter-floating-content {
    width: 500px;
  }
}
#filterFloating .bg-filter-floating {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: all ease 0.3s;
}
#filterFloating .bg-filter-floating[data-animation=in] {
  opacity: 1;
}
#filterFloating > form, #filterFloating .filter-floating-content {
  position: relative;
  z-index: 5;
  height: 100%;
}

li.rz-multiselect-item:hover {
  background-color: #f8f9fa;
  color: inherit !important;
}
li.rz-multiselect-item.rz-state-highlight {
  background-color: white !important;
  color: inherit !important;
}

.rz-dropdown {
  vertical-align: top;
}

body.filter-panel-visible {
  overflow: hidden;
}

.btn-wrap {
  display: inline-block;
  position: relative;
  overflow: visible;
}
.btn-wrap .n-badge {
  position: absolute;
  right: 3px;
  top: -8px;
  z-index: 3;
  border-radius: 10px;
  text-align: center;
  font-size: 10px;
  background-color: #F79463;
  color: white;
  line-height: 1;
  min-width: 18px;
  min-height: 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.grid-list-monitoreo-kpi {
  gap: 0;
  margin: 0 -8px;
}
@media (min-width: 768px) {
  .grid-list-monitoreo-kpi {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  }
  .grid-list-monitoreo-kpi .grid-list-item {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .grid-list-monitoreo-kpi .grid-list-item .grid-list-subitem {
    padding: 0 8px;
  }
}
@media (min-width: 1200px) {
  .grid-list-monitoreo-kpi .grid-list-item {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (min-width: 1367px) {
  .grid-list-monitoreo-kpi .grid-list-item {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }
}
@media (min-width: 1600px) {
  .grid-list-monitoreo-kpi .grid-list-item {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.kpi-box {
  display: flex;
  padding: 5px;
  border-radius: 3px;
  /* border-width: 1px;
  border-style: solid;
  border-color: $gray-200; */
  margin-bottom: 15px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.kpi-box .ic {
  margin-right: 5px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 5px;
  padding: 5px 0;
  color: rgba(108, 117, 125, 0.75);
  background-color: rgba(73, 80, 87, 0.1);
}
.kpi-box .ic i {
  font-size: 24px;
}
.kpi-box .info {
  padding: 5px;
}
.kpi-box .info .text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1;
}
.kpi-box .info .text span {
  font-weight: 300;
  font-size: 0.8em;
}
.kpi-box .info h6 {
  font-size: 14px;
  margin: 0;
  color: #6c757d;
}
.kpi-box .info h6 strong {
  display: inline-block;
  font-weight: normal;
  /* background-color: $gray-200;
  border-radius: 2px; */
}
.kpi-box.kpi-time .ic {
  color: rgba(var(--highlight-color-1-rgb), 0.55);
  background-color: rgba(var(--highlight-color-1-rgb), 0.1);
}
.kpi-box.kpi-ticket .ic {
  color: rgba(var(--bs-primary-rgb), 0.55);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}
.kpi-box.kpi-ag-con .ic {
  color: rgba(var(--bs-success-rgb), 0.55);
  background-color: rgba(var(--bs-success-rgb), 0.15);
}
.kpi-box.kpi-ag-res .ic {
  color: rgba(var(--bs-warning-rgb), 0.7);
  background-color: rgba(var(--bs-warning-rgb), 0.2);
}
.kpi-box.kpi-ag-max .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table.table-live-monitoring-tickets {
  position: relative;
  margin: 0;
}
table.table-live-monitoring-tickets thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
table.table-live-monitoring-tickets thead > tr > th {
  background-color: white;
  border-bottom: 1px solid #ced4da !important;
}
table.table-live-monitoring-tickets td.actions {
  text-align: right;
}
table.table-live-monitoring-tickets td.actions .actions-wrap {
  display: inline-flex;
  align-items: flex-start;
}
@media (max-width: 767.98px) {
  table.table-live-monitoring-tickets td.actions .actions-wrap {
    flex-wrap: wrap;
  }
  table.table-live-monitoring-tickets td.actions .actions-wrap .action-btn {
    margin: 0 5px 10px 0 !important;
    min-height: 26px;
  }
}

#tickets-table-wrap {
  overflow: auto;
  max-height: 100vh;
  min-height: 500px;
}
#tickets-table-wrap {
  scrollbar-color: var(--custom-scroll-color, #999) var(--custom-scroll-bg, rgba(0, 0, 0, 0.05));
  scrollbar-width: thin;
}
#tickets-table-wrap::-webkit-scrollbar {
  background-color: var(--custom-scroll-bg, rgba(0, 0, 0, 0.05));
  width: 16px;
  height: 16px;
}
#tickets-table-wrap::-webkit-scrollbar-thumb {
  background: var(--custom-scroll-color, #999);
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 0;
  min-width: 16px;
  min-height: 16px;
}
@media (min-width: 768px) {
  #tickets-table-wrap {
    max-height: calc(100vh - 512px);
  }
}
@media (min-width: 992px) {
  #tickets-table-wrap {
    max-height: calc(100vh - 472px);
  }
}
@media (min-width: 1367px) {
  #tickets-table-wrap {
    max-height: calc(100vh - 336px);
  }
}

.hide-layout-menu .header .timer {
  padding-left: 70px !important;
}

.agent-activity-bar {
  display: flex;
  height: 30px;
  width: 100%;
  position: relative;
  background: #dee2e6;
}

.agent-activity-block {
  height: 100%;
  position: absolute;
  top: 0;
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--color-estado, var(--danger, #dc3545));
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.color-estado-desconectado {
  --color-estado: var(--danger,#dc3545);
}

.color-estado-disponible {
  --color-estado: var(--success,green);
}

.color-estado-pausa {
  --color-estado: var(--warning,#ffc107);
}

.agent-activity-bar-wrapper {
  min-width: 600px;
}

.timeline-bar-container {
  --line-color: #adb5bd;
  --line-border-color: #ced4da;
  position: relative;
  height: 24px;
  width: 100%;
  border-top: 2px solid var(--line-border-color);
  margin: 10px 0 5px 0;
}
.timeline-bar-container .tick {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--line-color);
}
.timeline-bar-container .tick::before {
  content: "";
  display: block;
  height: 10px;
  width: 2px;
  background: var(--line-border-color);
  margin: var(--line-margin, 0 auto 2px);
}
.timeline-bar-container .tick:first-child {
  --line-margin: 0 auto 2px 0;
  transform: none;
}
.timeline-bar-container .tick:last-child {
  --line-margin: 0 0 2px auto;
  transform: none;
  left: auto !important;
  right: 0;
}

.agent-activity-tooltip-content h6 {
  font-size: 12px;
  margin: 0 0 4px 0;
  line-height: 1;
}
.agent-activity-tooltip-content p {
  --rz-icon-size: 11px;
  font-size: 11px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
  /* .rzi{
      margin-right: 2px;
      margin-top: 2px;
  } */
}
.agent-activity-tooltip-content p.ttotal {
  font-weight: 600;
}

.input-filtro-agentes {
  width: 400px;
  max-width: 100%;
}

.label-total-agentes {
  margin: 0;
  font-size: 14px;
}

.lista-labels-estado {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
}

.label-estado-agente {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  line-height: 1;
}
.label-estado-agente::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: var(--color-estado, var(--danger, #dc3545));
}

.agent-activity-info-block {
  margin-bottom: 40px;
}
.agent-activity-info-block .row-hdr {
  align-items: center;
  line-height: 1;
}
.agent-activity-info-block .row-hdr .agent-title {
  line-height: 1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 16px;
}
.agent-activity-info-block .row-hdr .agent-title .rzi {
  font-size: 18px;
}
.agent-activity-info-block .bar-container {
  overflow: auto;
  margin-bottom: 10px;
}
.agent-activity-info-block .desc-items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 6px;
  padding: 10px 0;
}
.agent-activity-info-block .activity-areas-hours {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
}
.agent-activity-info-block .activity-areas-hours .area-hour {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 2px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  gap: 6px;
  line-height: 1;
  color: #495057;
}/*# sourceMappingURL=style-supervision.css.map */