body{
    font-family: poppins;
    font-size: large;
    background-color: #0d0d0d;
}
ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.logo{
    height: 43px;
}
.navbar-brand{
    font-size: 27px;
    padding-left: 10px;
    font-family: 'Lato';
}
.nav-item a{
    color: gray !important;
    font-size: 16px;
    padding: 0 10px;
    font-weight: 600;
}
.display-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
li.nav-item{
    padding: 0 10px;
}
.signin-image{
    height: 390px;
     border: 25px solid white;
     border-radius: 5px;
     box-shadow: 1px 1px 5px grey;
}
textarea:focus, input:focus{
    outline: none !important;
}
.cursor-pointer{
    cursor: pointer;
}
.jumbotron{
    background-color: #0d0d0d;
}

/*.......... index page........... */
.home-wrap{
    background-color: rgb(31,30,30);
}
.g-top{
    height: 89vh;
    position:relative;
}

.handRaise {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 20px;
    display: none;
    z-index: 10;
}

.userbox {
    flex: 1 1 calc(25% - 20px); /* Adjust size based on available space */
    max-width: calc(25% - 20px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    background-color: #222;
    padding: 5px;
}

.userbox video {
    width: 100%;
    height: auto;
    border-radius: 5px;
    background: black;
}

.userbox h2 {
    margin: 5px 0;
    color: white;
    font-size: 14px;
    text-align: center;
}

.video-wrap {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping of video elements */
    justify-content: center; /* Center-align videos */
    gap: 10px; /* Add spacing between videos */
    padding: 10px;
    max-width: 100%;
    background-color: #0d0d0d;
}

.video-wrap>*{
    flex: 1 1 250px;
}
.g-top-left{
    position: absolute;
    right:0;
    height: 8vh;
    top:0;
    border-bottom-left-radius: 10px;
}
.top-left-participant-wrap{
    position: relative;
}
.cursor-pointer{
    cursor: pointer;
    padding: 9px;
}
.cursor-pointer:hover{
    cursor: pointer;
}
.top-left-participant-count{
    position:absolute;
    top: -2px;
    right: -3px;
    font-size: 15px;
}
.g-bottom{
    display: flex;
    justify-content: center; /* Horizontally centers the toolbar */
    align-items: center; /* Vertically aligns the icons */
    position: fixed; /* Fixes the toolbar at the bottom */
    bottom: 0; /* Positions the toolbar at the bottom */
    width: 100%; /* Ensures it spans the full width */
    background-color: #0d0d0d; /* Optional background for better visibility */
    padding-bottom: 25px;

}
.bottom-left{
    position: relative;
    padding: 5px;
}
.action-icon-style{
    height: 40px;
    width: 40px;
}

.top-remote-video-show-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #0d0d0d;
}


video{
    border: 1px solid gray;
    width: 300px;
}
.active{
    background-color: #80000047;
    border-radius: 5px;
}
.top-box{
    background-color: rgb(14 6 6);
    position: fixed;
    width: 30%;
    height: 30%;
    top: 20.5%;
    left:35.5%;
    display: block;
    box-shadow: 0 0 5px white;
    border-radius: 10px;
    z-index: 999;
    columns: black;
    border: 2px solid white;
}
.bottom-left{
    position: relative;
    padding: 5px;
}
.g-details{
    position: absolute;
    width: 27vw;
    background-color: black;
    margin-top: -135px;
    counter-reset: black;
    border-radius: 5px;
    padding: 5px;
    font: white;
}
.g-details-heading-show{
    font-size: 13px;
    padding-left: 10px;
    font: white;
}
.recording-show {
    position: absolute;
    margin-bottom: 132px;
    display: none;
}

.slanted-section {
    position: relative;
    background-color: red; /* Adjust to your desired color */
    color: #fff;
    padding: 50px 20px;
    transform: skewY(-6deg);
    margin: 50px 0;
}

.slanted-section .content {
    transform: skewY(6deg); /* Neutralize the skew for content */
    text-align: center;
}


/* Style for the scrollbar track (the background area) */
::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
    background-color: #1c1c1c; /* Match the dark theme background */
}

/* Style for the scrollbar thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background-color: #555; /* Set thumb color */
    border-radius: 10px; /* Make it rounded */
    border: 2px solid #1c1c1c; /* Add padding around the thumb */
}

/* Style for scrollbar on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #999; /* Lighter color on hover */
}

/* Style for the scrollbar corner (when scrollbars meet) */
::-webkit-scrollbar-corner {
    background-color: #1c1c1c; /* Match the background */
}

/* Firefox Scrollbar Styling */
.scrollbar-style {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #555 #1c1c1c; /* Thumb color and track color */
}

.chat-show-wrap {
    height: calc(100% - 20px); /* Full height with some padding */
    display: flex;
    flex-direction: column;
    border: 1px solid #444; /* Optional border for better visibility */
    border-radius: 10px; /* Rounded corners */
    background-color: #1c1c1c; /* Background color for the chat area */
    overflow: hidden;
}

.chat-message-show {
    overflow-y: auto; /* Enable scrolling for chat messages */
    flex-grow: 1; /* Allow it to take remaining space */
    padding: 10px; /* Padding around the messages */
}

.chat-message-sent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px; /* Padding around the input box */
    background-color: #1c1c1c; /* Match the chat area background */
}

.chat-message-sent input {
    border: none; /* Remove border */
    border-radius: 50px; /* Rounded corners for input */
    height: 35px; /* Fixed height */
    padding-left: 15px; /* Padding inside the input */
    outline: none; /* Remove outline on focus */
    width: 100%; /* Full width */
    background-color: #fff; /* White background for input */
}

.chat-message-sent-action {
    margin-left: 10px; /* Space between input and send button */
    cursor: pointer; /* Make the icon clickable */
}

/* Chat Container */
#messages {
    width: 300px; /* Fixed width */
    max-height: 400px; /* Fixed height */
    overflow-y: auto; /* Enables vertical scrolling */
    padding: 10px;
    box-sizing: border-box; /* Ensures padding is included in width/height */
    background-color: #111; /* Darker background for container */
}

/* Chat Message Content */
#messages div {
    word-wrap: break-word; /* Breaks long words */
    overflow-wrap: break-word; /* Ensures proper wrapping */
    white-space: normal; /* Allows multi-line wrapping */
    margin-bottom: 3px; /* Spacing between messages */
    padding: 5px;
    max-width: 100%; /* Ensures message stays inside container */
}

/* Scrollbar Styling */
#messages::-webkit-scrollbar {
    width: 8px;
}

#messages::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

#messages::-webkit-scrollbar-thumb:hover {
    background: #666;
}
.top-box-show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .top-box {
    background-color: #2c3e50;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 700px;
    max-width: 90%;
    text-align: center;
    height: auto; /* Adjust height */
  }
  
  .iframe-container {
    overflow: hidden;
    width: 640px;
    height: 400px;
    margin: auto;
  }
  
  iframe {
    border: none;
    width: 100%;
    height: 100%;
  }