/* Babble colour classes (cf. all_settings.css) */

.babble-blue, .babble-talking-dark {
  color: var( --babble-blue );
}

.babble-blue-light, .babble-talking {
  color: var( --babble-blue-light );
}

.babble-blue-light-v, .babble-agents {
  color: var( --babble-blue-light-v );
}

.babble-bluegreen {
  color: var( --babble-bluegreen );
}

.babble-green, .babble-ok {
  color: var( --babble-green );
}

.babble-orange, .babble-warn {
  color: var( --babble-orange );
}

.babble-red, .babble-err, .babble-waiting {
  color: var( --babble-red );
}

/* app colour classes */

.app-blue-dark, .babble-text {
  color: var( --app-blue-dark );
}

.app-orange-dark, .babble-not-talking {
  color: var( --app-orange-dark-vibes );
}

/* utility classes */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.hidden {
  visibility: hidden;
}

/* GENERAL STRUCTURE */

body {
  overflow-x: hidden;
}

body.app {
  background-color: var( --babble-blue-03pc );
}

body > #boards > #mainsection, /* Vibes page */
body.widget > section { /* widgets */
  margin: 16px;
}

/* on a big display - we want to fill the screen */
div.container {
	width: 100%;
}

/* LOGIN CURTAIN */

div.authuser > div.authcontrols > div.row {
  display: block;
  position: relative;
  left: 45%;
  transform: translateX( -50% );
}

div.authuser > div.authcontrols > div.row > div.col > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

div.authuser > div.authcontrols > div.row > div.col > a > span {
  font-weight: 400;
}

/* NOTIFICATIONS */

.feed div.notification-edge,
.feed div.notification-core {
  padding-bottom: 1rem;
}

.feed div.notification-btns {
  margin-top: 1rem;
}

body.widget #curtain-modal-feed {
  background-color: transparent;
}

body.widget #curtain-modal-feed > div.notification {
  top: 10rem;
}

.bg-babble-err {
  background-color: var( --babble-red );
}

.bg-babble-warn {
  background-color: var( --babble-orange );
}

.bg-babble-info {
  background-color: var( --babble-green );
}

/* SPINNER */

#spinner {
  width: 1.6rem;
  height: 1.6rem;
  border: 0.3rem solid transparent;
  border-radius: 50%;
}

body.loading #spinner {
  border-color: var( --babble-green ) transparent;
  animation: spin 1000ms infinite
}

@keyframes spin {
  100% { transform: rotate( 180deg ); }
}

/* SUBVIEWS */

#boards:target,
div.subview:target {
  display: block;
}

.subview-body #new-widget-select {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
}

.subview-body #new-widget-select > .select-item {
  height: 11rem;
  padding: 0.6rem;
  padding-bottom: 0.4rem;
  border: 3px solid transparent;
  border-radius: 4px;
  transition: var( --transition-slow );
}

.subview-body #new-widget-select > .select-item:focus,
.subview-body div#new-widget-select > .select-item:hover {
  border: 3px solid var( --babble-green );
  border-radius: 6px;
}

.subview-body #new-widget-select > .select-item > img {
  height: 80%;
}

.subview-body #new-widget-select > .select-item > p {
  font-weight: 500;
}

/* PANELS */

body.widget div.panel-heading {
  margin: 0.75rem 0 1.25rem;
}

/* BOARDS */

.vibes-board > section {
  width: 100%;
  display: grid;
  grid-template-columns: repeat( 12, 1fr );
  gap: 12px;
}

.boardcolumn {
  width: 100%;
  height: fit-content;
}

.boardcolumn-width-full {
  grid-column: 1 / span 12;
}

.boardcolumn-width-half:first-child {
  grid-column: 1 / span 6;
}

.boardcolumn-width-half:last-child {
  grid-column: 7 / span 6;
}

.boardcolumn-width-third:first-child {
  grid-column: 1 / span 4;
}

.boardcolumn-width-third:nth-child( 2 ) {
  grid-column: 5 / span 4;
}

.boardcolumn-width-third:last-child {
  grid-column: 9 / span 4;
}

div.dragaccept {
	height: 16px;
}

div.dragaccept.active {
	border: 1px solid var( --babble-blue );
  border-radius: 4px;
	border-style: dashed;
}

/* - media queries */

@media screen and ( max-width: 1125px ) {

  .boardcolumn-width-third:first-child,
  .boardcolumn-width-third:nth-child( 2 ),
  .boardcolumn-width-third:last-child {
    grid-column: 1 / span 12;
  }
}

@media screen and ( max-width: 750px ) {

  .boardcolumn-width-half:first-child,
  .boardcolumn-width-half:last-child {
    grid-column: 1 / span 12;
  }
}

/* FORMS */

#inputsearch,
#cdr-calendar {
  display: block-inline;
}

#cdr-search {
  display: flex;
  border: 2px solid var( --babble-blue );
  border-radius: 0.2rem;
}

#cdr-search > input {
  border: none;
}

#cdr-search > button {
  border: none;
  background: none;
  min-width: 1.5rem;
  margin: 0;
  padding: 0 0.8rem;
  font-size: 1rem;
  color: var(--app-grey-9-mid);
}

#cdr-search > button:hover {
  color: var(--babble-blue);
}

#cdr-search > button:focus-visible {
  outline: auto;
}


/* WIDGETS */

div.vibes-widget {
	height: 100%;
	text-align: center;
  font-size: var( --text-size-sm-lg );
	color: var( --babble-green );
	border: 2px solid transparent;
  border-radius: 8px;
  background-color: var( --www-white );
  transition: var( --transition-slow );
  z-index: 100;
}

div.vibes-widget > a {
	color: var( --babble-green );
}

div.vibes-widget > i {
	position: relative;
  left: 8px;
  top: 8px;
	float: left;
	color: transparent;
  font-size: var( --text-size-lg-md );
  transition: var( --transition-slow );
}

div.vibes-widget:hover {
  border: 2px solid var( --babble-green );
}

div.vibes-widget:hover > i {
  color: var( --babble-green );
}

div.vibes-widget > i:hover {
  color: var( --babble-violet );
}

.vibes-button {
  cursor: pointer;
	margin-right: 3px;
}

/* tables */

#maintable {
  width: 100%;
}

#maintable th,
#maintable td {
  padding: 0.4rem;
  font-family: Montserrat, sans-serif;
  font-size: var( --text-size-sm-xl );
}

#maintable > tbody > tr {
  transition: var( --transition-slow );
}

#maintable > tbody > tr:hover,
#maintable > tbody > tr.success {
  background-color: var( --babble-green );
}

/* table controls */

#btndeleteall {
  position: relative;
  background-color: var( --babble-red );
  border-color: var( --babble-red );
}

#btndeleteall > i::after {
  display: block;
  content: "!";
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  padding: 0 0.05rem 0.05rem;
  line-height: 0.9;
  color: var( --www-white );
  font-size: 1.05rem;
  font-weight: 700;
  background-color: var( --babble-red );
  border-radius: 0.15rem;
}

#btndeleteall:hover > i::after {
  color: var( --babble-violet );
  background-color: var( --babble-red );
}

#btndeleteall:active > i::after {
  color: var( --www-white );
  background-color: var( --babble-violet );
}

/* Numbers */

table.vibes-numbers {
  border: none;
  border-collapse: collapse;
  padding: 0;
  text-align: center;
  display: block;
}

table.vibes-numbers tbody {
  border: none;
  color: var( --babble-green );
  font-size: 250px;
}

table.vibes-numbers tbody td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
}

table.vibes-numbers tfoot {
  border: none;
  font-family: "Open Sans", sans-serif;
  font-size: var( --text-size-md-sm );
  color: var( --babble-blue );
  padding: 5px;
}

div.vibes-numbers-xlabel {
  height: 100%;
  text-align: center;
  border: 0;
  border-style: solid;
  border-color: transparent;
  color: var( --babble-green );
}

/* Summaries */

table.vibes-summary {
	margin-top: 1.5rem;
  font-family: "Open Sans", sans-serif;
	font-size: var( --text-size-md-sm );
	border-collapse: separate;
	border-spacing: 0.75rem 0;
}

table.vibes-summary > thead > tr > td {
	padding: 6px 4px;
}

table.vibes-summary > tbody > tr > td {
	padding: 2px 6px;
}

/* - Live Queue */

#nodatamessage {
  padding: 1.5rem;
}

#nodatamessage > p + p {
  margin-bottom: 0;
}

#agentsummary.active {
  padding: 1vw;
}

#agentsummary > table > thead {
  padding: 6px;
  color: var( --babble-violet );
  font-weight: bold;
}

/* - Statistics */

#statchart,
#statchartsummary {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

#statchartsummary.active {
	padding-left: 50px;
}

#statchartsummary > table {
	margin-top: 0;
}

#statchartsummary > table > thead {
	font-weight: bold;
}

#statchartsummary > table > thead > tr > td {
  color: var( --babble-violet );
  padding: 6px;
}

#statchartsummary > table > tbody {
  display: flex;
}

#statchartsummary > table > tbody > tr > td:first-of-type {
  color: var( --babble-blue-light );
}

#statchartsummary > table > tbody > tr > td:last-of-type {
  color: var( --app-green-dark );
}

/* - Switch */

#statedescription {
  padding: 1rem;
  text-align: center;
}

.panel-body > label.toggle {
  left: 50%;
  transform: translateX( -50% );
}

/* Call List Logs */

h4.form-subtitle {
  grid-column: 4 / span 5;
}

/* call list log table */

.call-list-log-table-container {
  max-width: 100%; 
  overflow-x: auto
}

#call-list-log-table {
  width: 100%;
  overflow-x: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  border-collapse: collapse;
  margin: 1.5rem 0
}

#call-list-log-table > thead > tr {
  font-weight: bold;
  border-bottom: 1px solid #979797;
  color: var(--babble-violet);
}

#call-list-log-table > thead tr > td {
  padding: 0rem 0.5rem 1rem;
  white-space: nowrap;
}

#call-list-log-table > tbody > tr {
  border-bottom: 1px solid #EAE8F0;
}

#call-list-log-table > tbody > tr:hover {
  background-color: #EAE8F0;
}

#call-list-log-table > tbody > tr > td {
  padding: 0.4rem 0.5rem;
  white-space: nowrap;
}

.log-table-button {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-color: #7A6CA8;
  color: #fff;
  border: 0;
  padding: 0.4rem;
}

.log-table-button:hover,
.log-table-button:active,
.log-table-button:focus,
.log-table-button:focus-visible {
  background-color: var(--babble-violet);
  color: var(--babble-green);
}

.log-table-button-icon {
  font-size: 1.3rem;
  padding: 0.25rem;
}

#call-list-log-table > tbody > tr > td.no-logs {
  text-align: center;
}

.pagination-container {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

#pagecount {
  font-family: "Montserrat", sans-serif;
}

#currentpage {
  font-family: "Montserrat", sans-serif;
  text-align: center;
  border: 1px solid #EAE8F0;
}

#currentpage:focus {
  border-color: var(--babble-violet)
}

.pagination-button {
  width: auto;
  min-width: 2.5rem;
  padding: 0.45rem 0.6rem;
  font-size: var(--text-size-sm-xl);
  border-radius: 0.25rem;
  cursor: pointer;
  background-color: #7A6CA8;
  color: #fff;
  border: 0;
}

.pagination-button:hover,
.pagination-button:active {
  background-color: var(--babble-violet);
  color: var(--babble-green);
}

.pagination-button:focus-visible {
  outline: 1px solid var(--babble-green);
  background-color: var(--babble-violet);
  color: var(--babble-green);
}

.pagination-button:disabled {
  background-color: var(--app-grey-9-mid);
  color: #fff;
}

/* call list log details modal */

#details-modal-background {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  overflow: auto;
}

#details-modal-body {
  font-family: 'Montserrat', sans-serif;
  width: 90%;
  max-height: 90%;
  border-radius: 10px;
  background-color: #F5F4F7;
  box-shadow: 0px 6px 14px 0 rgba(0,0,0,0.5);
  overflow-y: auto;
}

#details-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-size-md-lg);
  font-weight: 500;
  padding: 1.5rem;
  width: 100%;
  background: var(--babble-violet);
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#btnclose {
  background: 0;
  border: 0;
  margin: 0 0 0 1rem;
  min-width: 1.5rem;
  display: flex;
  cursor: pointer;
}


#btnclose:focus,
#btnclose:focus-visible {
  outline: 1px solid #fff
}

#btnclose>svg {
  opacity: .4
}

#btnclose:hover>svg,
#btnclose:focus>svg,
#btnclose:focus-visible>svg {
  opacity: 1
}


#details-modal-content {
  padding: 1.5rem;
  font-size: 1.2rem;
}

.log-details-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  margin-bottom: 1rem;
}

.log-details-property {
  font-weight: bold;
  color: var(--babble-violet);
  margin-right: 1rem;
  grid-column: span 1;
  text-align: end;
  align-self: end;
}

.log-details-value {
  grid-column: span 3;
  border-bottom: 1px solid #ccc;
  align-self: end;
}

@media screen and ( max-width: 1500px ) {

  .log-details-property {
    grid-column: span 2;
    font-size: 1rem;
  }

  .log-details-value {
    grid-column: span 4;
    font-size: 1rem;
  }
}

@media screen and ( max-width: 750px ) {

  .log-details-property {
    grid-column: span 5;
  }

  .log-details-value {
    grid-column: span 7;
  }
}


/* related calls table */

.related-calls-subheading {
  margin: 2rem 0 1rem;
}

.related-calls-subheading > h4 {
  margin-bottom: 0.5rem;
}

.related-calls-subheading > p {
  font-size: 1.1rem;
}

#related-calls-table-container {
  max-width: 100%;
  overflow-x: auto;
}

#related-calls-table-container > table {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  text-align: left;
  overflow-x: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  border-collapse: collapse;
}

#related-calls-table-container > table > thead > tr {
  font-weight: bold;
  border-bottom: 1px solid #979797;
  color: var(--babble-violet);
}

#related-calls-table-container > table > thead > tr > th {
  padding: 1rem 0.5rem;
  white-space: nowrap;
}

#related-calls-table-container > table > tbody > tr {
  border-bottom: 1px solid #EAE8F0;
}

#related-calls-table-container > table > tbody > tr:last-child {
  border-bottom: none;
}

#related-calls-table-container > table > tbody > tr:hover {
  background-color: #EAE8F0;
}

#related-calls-table-container > table > tbody > tr > td {
  padding: 0.4rem 0.5rem;
  white-space: nowrap;
}

@media screen and ( max-width: 1125px ) {
  .related-calls-subheading {
    font-size: 1.1rem;
  }

  #related-calls-table-container > table {
    font-size: 1rem;
  }
}