header {
  padding: 0;
}

main {
  padding-bottom: 2rem;
}

.container {
  background-color: white;
  padding: 2rem;
  border-radius: 15px;
}

.btn-primary {
  color: var( --app-white );
  background-color: var( --babble-blue );
  border-color: var( --babble-blue );
}

.btn-primary:hover{
  color: var( --app-white );
  background-color: var( --babble-green );
  border-color: transparent;
}

.btn-primary:active:focus {
  box-shadow: none;
}

audio {
  width: 350px;
  height: 50px;
}

audio::-webkit-media-controls-panel {
  background-color: rgb( 255 255 255 );
}

/* Removes the playbutton */
audio::-webkit-media-controls-play-button {
  display: none !important;
}

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

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

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

#curtain-modal-feed > div.notification.call-history {
  width: 60%;
  max-height: 80%;
  overflow-y: auto;
  transform: unset;
  top: 10%;
  left: unset;
}

.call-history-viewer {
  border-radius: 10px;
  padding-top: 1.5rem;
  max-height: 80%;
  overflow-y: auto;
  background-color: #eee;
}

.call-history-viewer > .container {
  background-color: transparent;
}

.call-history-viewer > div > div > div.col-11 > pre {
  overflow: visible;
}

@media screen and ( max-width: 900px ) {
  #curtain-modal-feed > div.notification.call-history {
    width: 80%;
  }
}

tbody.callHistoryBody > tr.selected > td {
  background-color: var(--babble-green-50pc-opaque);
}

table.callHistoryTable {
  border-collapse: collapse;
  margin: 1.5rem 0;
  text-align: start;
}

tbody > tr {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #EAE8F0;
}

tbody > tr:hover {
  background-color: #EAE8F0;
}

thead > tr {
  border-bottom: 1px solid #979797;
}

table.table > thead > tr > th {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--babble-violet);
}