meeting.css

body, html {
    width: 100%;
    height: 100%;
    font-family: 'Times New Roman', Times, serif;
    background-color: black;
    margin: 0;
    padding: 0;
    color: white; /* Set text color to white */
}

#body{
    background-color: black;
}

/* Container for the Join button */
.container3 {
    position: absolute;
    background-color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the container */
}

/* Style for the Join button */
#joinMeetingButton {
    color: white;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    padding: 10px 20px;
    background-color: rgb(46, 160, 8);
    font-size: 1.5rem;
    transition: background-color 0.3s ease; /* Smooth background color change on hover */
}

#joinMeetingButton:hover {
    background-color: rgb(46, 160, 8); /* Darken button color on hover */
}

/* Modal Content Styling */
.modal-content {
    background-color: black;
    border-radius: 25px;
    border: none;
    width: 150%; /* Set width to 1000px */
    height: 570px; /* Set height to 570px */
    margin: auto; /* Center the modal box */
    position: relative; /* Position relative for child positioning */
    top:50%;
}
#modal1{
    width: 720px;
    height: 550px;
    position: relative;
    top: 13px;
    left: -5%;
    border-radius: 20px;
    background-color: rgb(96, 96, 96);
}
/* Remote Video Styles */
#remoteVideo {
    width: 700px;
    height: 480px;
    margin: 5px auto 0;
    position: relative;
    right: 1%;
    bottom: 2%;
    object-fit: fill;
    border-radius: 20px;
}
#remoteShare{
    width: 912px; /* Set width */
    height: 513px; 

}
/* Modal Body Styling */
.modal-body {
    position: relative; /* Set position to relative for absolute positioning of local video */
}

/* Leave and Unmute Buttons */
.d-flex {
    display: flex;
    justify-content: center; /* Center the buttons */
}

/* Unmute Button Style */
#microphone {
    width: 39px;
    height: 38px;
    border-radius: 50%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    position: absolute;
    left: 14.3rem;
    top: 2rem;
    padding: 9px 8px;
}

/* Leave Meeting Button Style */
#leaveMeetingButton {
    background-color: rgb(233, 52, 52);
    position: relative;
    border-radius: 99px;
    bottom: 31px;
    left: 49%;
    color: white;
    border: none;
    padding: 17px 22px;
    margin-top: 10px;
    width: 40px;
    height: 45px;
}
#leaveicon{
    font-size: 24px;
    position: absolute;
    top: 23%;
    left: 33%;
}
/* Local Share*/
#share{
    background-color: rgb(0, 0, 0);
    position: relative;
    border-radius: 100px;
    bottom: 31px;
    left: -54%;
    color: white;
    border: none;
    padding: 17px 23px;
    margin-top: 10px;
    width: 40px;
    height: 46px;


}
#shareicon{
    position: absolute;
    left: 34%;
    top: 33%;

}
/* Local Video and Start Button */
.local-video-container {
    position: absolute;
    bottom: 81px;
    right: 10px;
}

/* Style for the local video */
#localVideo {
    width: 279px;
    height: 209px;
    border-radius: 20px;
    background-color: rgb(192, 190, 190);
    content: "LocalVideo";
    color: #e4e4e4;
    position: absolute;
}
#localvideoimage{
    top: 3rem;
    left: 5rem;
    font-size: 6rem;
    color: black;
    width: 90px;
    height: 90px;
    position: absolute;
}
/* Start Video Button Style */
#video {
    width: 39px;
    height: 40px;
    border-radius: 50%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    position: absolute;
    left: 14rem;
    top: -1rem;
    padding: 8px 9px;
    font-size: 16px;
}

#muteButtonContainer {
    position: relative;
    display: inline-block;
    border-radius: 20px;
}

.enableBNR {
    display: none;
    position: absolute;
    border-radius: 20px;
    background-color: #e4e4e4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: 2.3rem;
    left: 4.3rem;
}

.enableBNR .enableBNR1 {
    color: black;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.enableBNR .enableBNR1:hover {
    background-color: #e4e4e4;
    border-radius: 20px;
    animation: stay-hover 10s forwards;
}

#muteButtonContainer:hover .enableBNR {
    display: block;
}

.selected::before {
    content: '✓ ';
    color: black;
}
#videoButtonContainer {
    position: relative;
    display: inline-block;
    border-radius: 20px;
}

.enableVBG {
    display: none;
    position: absolute;
    border-radius: 20px;
    background-color: #e4e4e4;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: -0.7rem;
    left: 2.7rem;
}

.enableVBG .enableVBG1 {
    color: black;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}
.enableVBG .enableVBG2 {
    color: black;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.enableVBG .enableVBG1:hover {
    background-color: #e4e4e4;
    border-radius: 20px;
}
.enableVBG .enableVBG2:hover {
    background-color: #e4e4e4;
    border-radius: 20px;
}

#videoButtonContainer:hover .enableVBG {
    display: block;
}

.mirror{
    transform: scaleX(-1);
}

.loader {
    border-radius: 49%;
    animation: spin 2s linear infinite;
    margin: auto;
}

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

#remoteloader{
    display:none;
    border: 10px dotted black;
   /* border-top: 14px solid black;*/
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 18rem;
    right: 20rem;
}
#localloader{
    display: none;
    border: 8px dotted black;
   /* border-top: 8px solid black; */
    width: 70px;
    height: 70px;
    position: absolute;
    top: 4rem;
    left: 7rem;

}

/* Responsiveness */
@media (max-width: 520px) {
    .local-video-container {
        width: 100%;
        bottom: 0;
        right: 0;
        padding: 0 10px; /* Add padding on smaller screens */
    }

    #localVideo,
    #video {
        width: calc(100% - 20px); /* Full width minus padding */
    }

    /* Adjust modal body padding for smaller screens */
    .modal-body {
        padding-bottom: 260px;
    }
}
.blur {
    backdrop-filter: blur(10px); /* Adjust the blur radius as needed */
}