* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
}
 body, html {
    height: 100vh;
    background: #000;
    overflow-x: hidden;
     font-family: "Poppins", sans-serif;
}
 #video-grid-area {
     height: calc(100vh - 120px) !important;
     transition: all 0.4s ease-in-out;
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     overflow-y: auto;
}
 #video-grid-area:not(.spotlight) .video-conference-user {
     flex: 0 1 calc(48% - 10px);
     border-radius: 12px;
}
 #video-grid-area:not(.spotlight) .video-conference-user:nth-last-child(n+6), #video-grid-area:not(.spotlight) .video-conference-user:nth-last-child(n+6) ~ .video-conference-user {
     flex: 0 1 calc(32% - 10px);
}
 #video-grid-area:not(.spotlight) .video-conference-user:only-child {
     flex: 0 1 70%;
     width:100%;
}
 #video-grid-area.spotlight {
     display: grid;
     grid-template-columns: 1fr 300px;
     grid-template-rows: repeat(auto-fill, minmax(160px, 180px));
     gap: 15px;
     justify-content: stretch;
     align-content: start;
}
 #video-grid-area.spotlight .video-conference-user.focused {
     grid-column: 1;
     grid-row: 1 / 20;
     height: calc(100vh - 138px);
     position: relative;
     top: 0;
     z-index: 10;
     flex: none;
     max-width: 100%;
     aspect-ratio: auto;
}
 #video-grid-area.spotlight .video-conference-user:not(.focused) {
     grid-column: 2;
     height: 160px;
     width: 100%;
     flex: none;
     max-width: 100%;
}
 .video-conference-user {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     background: linear-gradient(135deg, #1e1e24 0%, #09090b 100%);
    ;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s ease;
}
 .agora_video_player, .agora_video_player video {
     width: 100% !important;
     height: 100% !important;
     object-fit: cover !important;
}
 .video-conference-user.focused video {
     object-fit: cover !important;
}
 .user-name {
     position: absolute;
     bottom: 5px;
     left: 12px;
     background: rgba(255, 255, 255, 0.9);
     color: #000;
     padding: 4px 12px;
     border-radius: 6px;
     font-size: 14px;
     z-index: 10;
}
 .user-location {
     position: absolute;
     bottom: 5px;
     right: 12px;
     background: rgba(255, 255, 255, 0.9);
     color: #000;
     padding: 4px 12px;
     border-radius: 6px;
     font-size: 14px;
     z-index: 10;
}
 .action-button-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.3s;
     z-index: 20;
    /*width: 68%;
    */
}
 .video-conference-user:hover .action-button-container {
     opacity: 1;
}
 .action-btn-group {
     display: flex;
     gap: 12px;
     background: rgba(0,0,0,0.7);
     padding: 12px 20px;
     border-radius: 40px;
     backdrop-filter: blur(10px);
}
 .action-btn-group img {
     cursor: pointer;
     width: 30px;
     height: 30px;
}
 #video-grid-area::-webkit-scrollbar {
     width: 6px;
}
 #video-grid-area::-webkit-scrollbar-thumb {
     background: #444;
     border-radius: 10px;
}
 @media (max-width: 800px) {
     #video-grid-area:not(.spotlight) .video-conference-user {
         flex: 1 1 100% !important;
         max-width: 100% !important;
    }
     #video-grid-area.spotlight {
         grid-template-columns: 1fr;
         grid-template-rows: 50% 1fr;
    }
     #video-grid-area.spotlight .video-conference-user:not(.focused) {
         grid-column: 1;
    }
}
 .user-name-box{
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #ebc2c9;
}
 .user-name-box span{
     font-size: 36px;
     font-weight: 600;
     text-transform: uppercase;
}
 .user-image, .user-name-box{
     width: 120px;
     height: 120px;
     border-radius: 50%;
}
 .hold-overlay {
     position: absolute;
     inset: 0;
     display: none;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #1e1e24 0%, #09090b 100%);
     z-index: 10;
}
 .row.mt-4.admin-controls {
     position: absolute;
     top: 0;
     bottom: 12px;
     z-index: 1;
     align-items: end;
}
 .video-conference-wrapper.video-grid{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 1rem;
     padding: 1rem;
     overflow: hidden;
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Inter', sans-serif;
     background-color: var(--bg-dark);
     height: 100vh;
     width: 100vw;
    /*overflow: hidden;
    */
     color: white;
}
/* MASTER VIEWPORT */
 .workspace-wrapper {
     display: flex;
     height: 100vh;
     width: 100%;
     gap: 16px;
}
/* MAIN DYNAMIC GRID */
 #video-grid-area {
     flex: 1;
     display: grid;
     grid-auto-rows: auto;
     gap: 16px;
}
/* SIDEBAR (Only for Spotlight) */
 #remote-sidebar {
     display: none;
     width: 300px;
     flex-direction: column;
     gap: 12px;
     overflow-y: auto;
     height: 100%;
     padding: 16px 0;
     max-height:calc(100vh - 100px);
}
/* Spotlight State Triggers */
 .spotlight-active #video-grid-area {
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
    width:100%;
}
 .spotlight-active #remote-sidebar {
     display: flex;
}
/* PARTICIPANT CARD */
 .video-conference-user {
    /*background: var(--card-bg);
    */
     border-radius: var(--radius);
     position: relative;
     overflow: hidden;
     border: 2px solid transparent;
     transition: all 0.3s ease;
}
/* Resize cards when they are in the sidebar */
 #remote-sidebar .video-conference-user {
     height: 180px;
     flex-shrink: 0;
}
 .video-player-inner {
     width: 100%;
     height: 100%;
     position: relative;
}
/* HOLD STATE OVERLAY */
 .hold-overlay {
     position: absolute;
     inset: 0;
     display: none;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, #1e1e24 0%, #09090b 100%);
     z-index: 10;
}
 .initials-circle {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent), #1d4ed8);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     font-weight: 600;
     box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
     text-transform: uppercase;
}
 .is-on-hold .hold-overlay {
     display: flex;
}
/* FLOATING CONTROLS */
 .action-button-container, .admin-controls {
     position: absolute;
     bottom: 15px;
     left: 50%;
     transform: translateX(-50%) translateY(10px);
     opacity: 0;
     transition: 0.3s;
     z-index: 100;
     background: var(--glass);
     padding: 10px 15px;
     border-radius: 20px;
     width: max-content;
}
 .video-conference-user:hover .action-button-container, .video-conference-user:hover .admin-controls {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
}
 .action-btn-group {
     display: flex;
     gap: 12px;
     align-items: center;
}
 .control-btn {
     cursor: pointer;
     width: 30px;
     height: 30px;
     transition: 0.2s;
}
 .control-btn:hover {
     transform: scale(1.15);
}
/* ADMIN BUTTONS */
 .btn {
     padding: 8px 14px;
     border-radius: 10px;
     border: none;
     font-weight: 600;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 13px;
}
 .btn-secondary {
     background: #3f3f46;
     color: white;
}
 .btn-primary {
     background: var(--accent);
     color: white;
}
 .btn-danger {
     background: var(--danger);
     color: white;
}
 .mx-2 {
     margin: 0 4px;
}
 #remote-sidebar::-webkit-scrollbar {
     width: 4px;
}
 #remote-sidebar::-webkit-scrollbar-thumb {
     background: #333;
     border-radius: 10px;
}
 .user-location {
     position: absolute;
     z-index: 20;
     font-size: 16px;
     color: #000;
}
 .user-name {
     position: absolute;
     z-index: 20;
     background: rgba(255, 255, 255, 0.9);
     padding: 4px 10px;
     border-radius: 8px;
     font-size: 16px;
}
 .initials-circle {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background: linear-gradient(135deg, #3b82f6, #1d4ed8);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.5rem;
     font-weight: 600;
     box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
     text-transform: uppercase;
}
 .hold-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: rgb(214, 241, 241);
     z-index: 10;
}
 #remote-sidebar .video-conference-user{
     border-radius:10px;
}
 aside#remote-sidebar p.user-location {
     display: none;
}
/* login css start here */
 .login-panel.panel .panel-heading img {
     min-width: 60px;
     width: 60px;
     border-radius: 10px;
}
 .login-panel.panel.panel-default h3.panel-title {
     font-size: 20px;
     font-weight: bold;
}
 .login-panel.panel.panel-default .panel-heading {
     background: unset;
     border: unset;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;
}
 .login-panel.panel.panel-default {
     background: #fff;
     padding: 20px 10px;
     border-radius: 20px;
}
 .login-panel.panel.panel-default label.form-check-label {
     color: #555;
}
 .login-panel.panel.panel-default .checkbox {
     margin: 10px 0 20px 0;
}
 .login-panel.panel.panel-default .panel-body button {
     text-align: center;
     justify-content: center;
}
 .login-panel.panel.panel-default .checkbox a.forget-btn {
     font-size: 12px;
}
/* login css end here */
 .card-body.position-relative {
     min-height: 400px;
}
 .add_datacount {
     grid-template-columns: repeat(5, 1fr);
}
 .video-wrapper .placeholder {
     cursor: pointer;
}
 .add_datacount[data-count="1"] {
     grid-template-columns: 1fr;
}
 .add_datacount[data-count="2"] {
     grid-template-columns: repeat(2, 1fr);
}
 .add_datacount[data-count="3"] {
     grid-template-columns: repeat(3, 1fr);
}
 .add_datacount[data-count="4"] {
     grid-template-columns: repeat(2, 1fr);
}
 .add_datacount[data-count="5"], .add_datacount[data-count="6"] {
     grid-template-columns: repeat(3, 1fr);
}
 .add_datacount[data-count="7"], .add_datacount[data-count="8"] {
     grid-template-columns: repeat(4, 1fr);
}


/*02/05/2026 new css start*/

#master-viewport.custmVideoConf-main.spotlight-active #remote-sidebar {
    padding: 0px 0 16px;
    max-height: calc(100vh - 100px);
}

@media(max-width:1280px) {
    #master-viewport.custmVideoConf-main.spotlight-active #remote-sidebar {
        width: 200px;
    }

    .custmVideoConf-main #remote-sidebar.spotlight-active .video-conference-user {
        height: 140px;
    }
}

@media(max-width:1024px) {
    #master-viewport.custmVideoConf-main.spotlight-active {
        flex-direction: column-reverse;
        height: calc(100vh - 100px);
    }

    #master-viewport.custmVideoConf-main.spotlight-active #remote-sidebar {
        height: auto;
        max-height: unset;
    }
}

/*02/05/2026 new css end*/


 @media(max-width:767px){
     .add_datacount {
         grid-template-columns: repeat(2, 1fr);
    }
     .add_datacount .participant-card {
         min-height: 100px;
    }
     .add_datacount .participant-card .video-wrapper .placeholder {
         font-size: 16px;
    }
}
 .grid-3x3-active #video-grid-area {
     grid-template-columns: repeat(3, 1fr);
}
 #master-viewport.grid-3x3-active {
     display: flex;
}
 .grid-3x3-active #remote-sidebar {
     display: flex;
     overflow-y: auto;
}
button#screenShareBtn {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}