/*
	Fix issue #195 - Room "In Progress..." does not show up on Android 
*/
@media only screen and (max-width:500px) {
  .welcome .welcome-tabs {
    display: unset
  }
}

.fc-timegrid-slot-label-cushion, .fc-timegrid-axis-cushion {
	color: black;
}

/* <<< 20220409/G.Jaekel@DNB.DE make raisehand more noticable */
div.jss3, /* info-box */
div.jss33, /* participats window & filmstrip */
div.indicators div:not(.jitsi-icon-default) { /* participant plane */
  animation-name: raisehand;
  animation-duration: 5s;
  animation-direction: alternate;
  animation-delay: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

@keyframes raisehand {
  from {
    background-color: #FFD600;
  }

  to {
    background-color: #FF6000;
    transform: scale(1.2);
  }
}

/* >>> */

.speaker-room-button {
  border: 0;
  font-size: 14px;
  background: #0074e0;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  padding: 16px 20px;
}

.speaker-room-button svg {
  fill: #fff;
}

/*
 * 20200522/G.Jaekel@DNB.DE     On small browser windows, the left toolbar renders to wide. Make it wrapping around.
 * 20210109/G.Jaekel@DNB.DE     The same issue rises for the right toolbar, meanwhile
 */
.new-toolbox {
  bottom: calc((40px * 3) * -1);
  /* was: calc((40px * 2) * -1); */
}

.button-group-left {
  flex-wrap: wrap;
}

.button-group-right {
  flex-wrap: wrap;
}


/*
 * 20210104/gj  Allow the Conferences Display at the Welcome Page to show more entires
 */
.welcome .tab-container .tab-content {
  height: unset;
  max-height: 500pt;
}

.new-toolbox .toolbox-content .toolbox-button .toolbox-icon svg {
  width: 24px;
  height: 24px;
}

.ofmeet-tooltip {
  position: relative;
}

.ofmeet-tooltip::after {
  background-color: rgb(13, 20, 36);
  border-radius: 3px;
  color: #fff;
  content: attr(aria-label);
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin: 0;
  overflow-wrap: break-word;
  opacity: 0;
  padding: 8px;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  transform: translate(calc(-50% + 20px), calc(-100% - 8px));
  transition-delay: 0.5s;
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1), linear;
  white-space: nowrap;
  user-select: none;
  z-index: 800;
}

.ofmeet-tooltip:hover {
  cursor: pointer;
}

.ofmeet-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.ofmeet-toolbox-small-icon {
  cursor: pointer;
  background: #36383c;
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%), 0 0 0 1px rgb(0 0 0 / 10%);
  border-radius: 3px;
  padding: 4px;
  position: absolute;
  right: -4px;
  top: -3px;
}

@media only screen and (max-width: 500px) {
  .ofmeet-toolbox-small-icon {
    display: none;
  }
}

.ofmeet-toolbox-small-icon:hover {
  background: #f2f3f4;
}

.ofmeet-toolbox-small-icon>svg {
  fill: #fff;
}

.ofmeet-toolbox-small-icon:hover>svg {
  fill: #000;
}

.toolbox-button-wth-dialog {
  position: relative
}

.ofmeet-toolbox-menu-container {
  position: absolute;
  overflow-y: visible !important;
}

.ofmeet-toolbox-menu {
  background: rgb(36, 37, 40);
  border-radius: 3px;
  box-sizing: content-box;
  color: rgb(255, 255, 255);
  max-height: calc(100vh - calc(48px + 24px) - 46px);
  max-width: 448px;
  padding: 0;
  position: absolute;
  bottom: 60px;
  z-index: 300;
  box-shadow: rgb(13 20 36 / 85%) 0px 4px 8px -2px, rgb(13 20 36 / 81%) 0px 0px 1px;
  transform: translateX(calc(-100% + 48px));
}

.ofmeet-toolbox-menu ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.button-group-left .ofmeet-toolbox-menu {
  left: 0;
}

.button-group-right .ofmeet-toolbox-menu {
  right: 0;
}

.ofmeet-toolbox-tile-menu ul {
  display: flex;
  flex-wrap: wrap;
  width: 230px;
}

.ofmeet-toolbox-menu-item {
  display: flex;
  align-items: center;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 5px;
  text-align: center;
}

.ofmeet-toolbox-list-menu .ofmeet-toolbox-menu-item {
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  padding: 8px 16px;
  text-align: left;
  white-space: nowrap;
}

.ofmeet-toolbox-tile-menu .ofmeet-toolbox-menu-item {
  justify-content: center;
  height: 36px;
  width: 36px;
}

.ofmeet-toolbox-menu-item:hover {
  background-color: rgb(54, 56, 60);
}

.ofmeet-toolbox-menu-item * {
  pointer-events: none
}

.ofmeet-toolbox-menu-item svg {
  fill: rgb(255, 255, 255) !important;
}

.ofmeet-toolbox-menu-item .jitsi-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin: auto;
  height: 24px;
  width: 24px;
  text-align: center;
}

.new-toolbox .toolbox-content .overflow-menu .profile-text {
  max-width: 250px;
}

.popupmenu {
  width: auto;
  max-width: 250px;
}

.breakout-modal .participants .kanban-title-button {
  display: none;
}

#breakout-option {
  flex: none;
  margin: 0 30px;
}

#breakout-status {
  flex: auto;
  color: #ff5983;
  font-size: 16px;
  line-height: 36px;
}

#breakout-clock {
  flex: auto;
  font-size: 18px;
  font-weight: 600;
  margin-right: 30px;
  line-height: 36px;
  text-align: right;
}

.tags-modal .tingle-modal-box {
  width: 600px;
}

/* avoid the info head line to overlay the participant widnow menu icons (#397) */
.details-container {
  top: 24px; /* instead of 0px */
}