//
// _call.scss 
//

@use "../variables" as *;
@use "../utils/mixins" as *;

.single-video {
    .join-video {
        margin-bottom: 0;
        height: calc(100vh - 198px);
        @include respond-below(md) {
            height: calc(100vh - 214px);
        }
        img {
            border-radius: 5px;
        }
        .video-avatar {
            img {
                width: 170px;
                height: 146px;
                object-fit: cover;            
                @include respond-below(md) {
                    width: 100px;
                    height: 86px;
                }
            }
        }
    }
}
.join-video {
    img {
        border-radius: 10px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.card-max-height {
    position: relative;
    height: calc(100vh - 195px);
    overflow-y: auto;
    @include respond-below(md) {
        height: calc(100vh - 195px);
    }
}
.animation-ripple {
    animation: ripple 2s infinite;
}
@keyframes ripple {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 0 40px rgba(0, 0, 0, 0);
    }
  }

// text Truncate 2 lines
.truncate-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}