/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/


.trigger__btn{
    text-align: center;
  padding: 7px 13px;
  background: #3e3e3e;
  color: #fff;
  font-size: 15px;
  outline: none;
  border: none;
  border-radius: 5px;
  font-family: cursive;

}

.modal__zoom-recording {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 99999;
}
.modal__zoom-recording .modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: auto;
  min-width: 600px;
  max-width: 60vw;
  border-radius: 0.5rem;
}

.modal__zoom-recording .modal__dialog {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.modal__zoom-recording .modal__header {
  display: block;
  padding: 14px;
  border-bottom: 1px solid #ebe9e9;
}

.modal__zoom-recording .modal__body{
  overflow-y: scroll;
  height: auto;
  min-height: 40vh;
  max-height: 60vh;
  padding: 10px;
}
.modal__zoom-recording .close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}
.modal__zoom-recording .close-button:hover {
  background-color: darkgray;
}
.modal__zoom-recording.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}



.recording-preview-img {
	line-height: 1;
	position: relative;
	height: 80px;
	border-radius: 3px;
}

.recording-preview-img img {
	display: block;
	width: 136px;
	height: 82px;
}

.recording-preview-img .play_btn,
.recording-preview-img .play_btn_link {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	line-height: 1;
	opacity: 0;
}

span.triangle-play-icon {
	position: absolute;
	left: 7px;
	bottom: 6px;
	font-size: 12px;
	transition: 0.05s all linear;
	width: 28px;
	height: 28px;
	line-height: 27px;
	vertical-align: middle;
	text-align: center;
	border-radius: 50px;
	background: #fff;
	color: #007cff;
	border: 1px solid #007cff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

span.triangle-play-icon:before {
	margin-right: -3px;
}

.recording-preview-img:hover span.triangle-play-icon {
	transition: 0.05s all linear;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.bb-video-time {
	background: #122b46;
	border-radius: 4px;
	font-size: 10px;
	color: #fff;
	letter-spacing: -0.17px;
	text-align: center;
	position: absolute;
	top: 58px;
	right: 6px;
	padding: 3px 7px;
	z-index: 10;
}

.modal__zoom-recording  h2.clip_title {
  font-size: 14px;
  margin: 0;
  line-height: 2;
  font-weight: 600;
}

.modal__zoom-recording h3.card__title {
  margin: 0;
  display: inline-flex;
  font-size: 16px;
}

.zoom__show {
  display: block !important;
  width:100%;
}


@media (max-width: 600px){
  .modal__zoom-recording.modal-fullscreen-sm-down .modal__dialog {
    width: auto;
    max-width: 100%;
    height: 100%;
    margin: 0;
    min-width: 100%;
    border-radius: 0;
  }
  .modal__zoom-recording.modal-fullscreen-sm-down .modal__body{
    overflow-y: scroll;
    height: 100%;
    padding: 10px;
    min-height: 94%;
    max-height: 94%;
  }
}


/* globe css */