/* mobile screens starts*/
@media screen and (max-width: 440px){
  .host-name{
    width: 110px !important;
   }
  .main-room{
      width: 96%;
  }

  .dis-none{
     display: none;
  }
   .dis-ellipse{
    display: block;
  }
  .invite-btn-block{
      position: absolute;
      bottom: 20px;
      width: 100%;
      margin: 0 !important;
  }
  .mob-none{
      display: none !important;
  }
  .room-properties{
      width: 100%;
  }
  .teleprompter-text{
      max-height: 18vh;
  }
  .tp-backward-forward input[type=range][orient=vertical]{
    height: 100% !important;
  }

.res-tp-properties{
/* overflow: auto; */
flex-wrap: wrap;
gap: 5px;
/* max-height: 50px; */
}
.gap-10px{
  gap: 10px;
}
.frame{
  width: 49%;
  height: auto;
}
.teleprompter-text{
  width: 85%;
  padding: 0 20px;
}
.tp-backward-forward{
  width: 14%;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 24px; 
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.closebtn{
  display: block;
}
.res-tp-item{
  width: 46%;
}
.main-scrollbar{
  max-height: 54vh;
}
.invite-frame{
  width: 100%;
}
.index-header{
  width: 100% !important;
}
.modal-dialog{
  max-width: 100% !important;
}
.nav-pills, .tab-content{
  width: 100% !important;
  height:auto !important;
}
.flex-wrap-res{
  flex-wrap: wrap;
}
.tab-pane span{
  font-size: 14px;
}
.custom-invite-frame{
  align-items: flex-start;
}

div#chroma-file-name, #participant-div h6, .host-label{
  max-width: 110px;
}
.h-82vh{
  max-height: none;
  min-height: none !important;
}
.tab-pane .w-25,  .tab-pane .w-75{
  width: 100% !important;
}
.tab-pane>div{
  flex-wrap: wrap;
}
.custom_select_file{
  margin: 10px 0 0 0;
  width: 100%;

}
.left-main-block{
  padding: 12px;
  padding-top: 0px;
}
.teleprompter-toggle-btn{
  position: relative;
  top: 0px;
}
#after-init{padding-left: 14px;}
.tp-prp-container{flex-wrap: wrap;}
.inptrange_blk{
width: 47%;
}
.mob-gap{
gap: 5px !important;
}
.res-items{
  flex-wrap: wrap;
}

}

/* mobile screens end*/

@media screen and (min-width: 821px){
  .sidebar{
      width: 23% !important;
      display: flex;
      justify-content: space-between;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  }
  
}
@media screen and (max-width: 821px){
.main-room{
height: auto;
}
.icon-header{
display: none;
}
.nav-pills, .tab-content{
width: 100% !important;
height:auto !important;
}
.flex-wrap-res{
flex-wrap: wrap;
}
.tab-pane span{
font-size: 14px;
word-break: break-all;
}
.h-41vh{
height: 29vh !important;
}
}

@media only screen and (min-width:441px) and (max-width:1024px){
.modal-dialog{
  max-width: 80% !important;
}
}

/* 1920x1080 screen starts */
@media screen and (min-width: 1900px){
.teleprompter-text{
        max-height: 57vh;
}


 .main-scrollbar .frame {
    width: 20%;
    position: relative;
} 

.main-scrollbar{
  max-height: 19vh;
}
.h-82vh{
  max-height: none;
  overflow: visible;
}
.invite-ht{
  height: 44vh;
}
.anchor-frame-height{
  height: 56vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 232px;
}
}
/* 1920x1080 screen end */

/* 1366x768 screen starts */
@media only screen and (min-width:1360px) and (max-width:1370px) {
.teleprompter-text{
  max-height: 43vh;
}
.main-scrollbar{
  max-height: 19vh;
}

.main-scrollbar .frame {
    width: 20%;
}



}
/* 1366x768 screen end */

/* 1280x1024 screen starts */
@media only screen and (min-width:1275px) and (max-width:1285px){
.teleprompter-text{
  max-height: 48vh;
}
.main-scrollbar{
  max-height: 20vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar .frame {
   width: 23%;
}
.anchor-frame-height{
  height: 46vh;
}
.tp-height {
    height: 57vh;
    overflow: auto;
}
#teleprompter {
    height: 42vh;
}
}
/* 1280x1024 screen end */

/* 1440x900 screen starts */



@media only screen and (min-width:1400px) and (max-width:1445px){
  .main-scrollbar .frame {
    width: 25%;
    position: relative;
} 
.main-scrollbar {

    max-height: 19vh;
}

}


@media only screen and (min-width:1435px) and (max-width:1445px){
.teleprompter-text{
  max-height: 25vh;
}


.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 54vh;
}
.anchor-frame-height{
  height: 53vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 188px;
}
}
/* 1440x900 screen end */

/* 1600x900 screen starts */
@media only screen and (min-width:1595px) and (max-width:1605px){
.teleprompter-text{
  max-height: 25vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 52vh;
}
.anchor-frame-height{
  height: 52vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 188px;
}
}
/* 1600x900 screen end */

/* 1680x1050 screen starts */
@media only screen and (min-width:1675px) and (max-width:1685px){
.teleprompter-text{
  max-height: 55vh;
}
.tp-height {
    height: 63vh;
    overflow: auto;
}
.main-scrollbar .frame {
    width: 20%;
    position: relative;
} 
#teleprompter {
    height: 52vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 19vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 225px;
}
.anchor-frame-height{
  height: 28vh;
}
}
/* 1680x1050 screen end */

/* 1280x800 screen starts */
@media only screen and (min-height:795px) and (max-height:805px){
.teleprompter-text{
  max-height: 42vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 19vh;
}
.h-82vh{
  /* max-height: none; */
  overflow: auto;
}
.invite-ht{
  height: 42vh;
}
.anchor-frame-height{
  height: 50vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 161px;
}
}
/* 1280x800 screen end */

/* 1024x768 screen starts */
@media only screen and (min-width:1020px) and (max-width:1030px){
.teleprompter-text{
  max-height: 56vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 51vh;
}
.frame{
  width: 33%;
}
.invite-frame{
  height: auto;
  width: 32.9%;
}
}
/* 1024x768 screen end */

/* 768 height screen starts */
@media only screen and (min-height:760px) and (max-height:775px){
.teleprompter-text{
  max-height: 52vh;
}

.tp-height {
    height: 64vh !important;
    overflow: auto;
}
#teleprompter {
    height: 53vh !important;
}
 .main-scrollbar .frame {
    width: 17%;
  
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 49vh;
}
.h-82vh{
  /* overflow: auto; */
  /* max-height: none; */
}
.invite-ht{
  height: 42vh;
}
.anchor-frame-height{
  height: 49vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 150px;
}
}
/* 768 height screen end */

/* 720 height screen starts */
@media only screen and (min-height:715px) and (max-height:725px){
.teleprompter-text{
  max-height: 25vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 56vh;
}
.h-82vh{
  /* max-height: none; */
  /* overflow: auto; */
}
.invite-ht{
  height: 42vh;
}
.anchor-frame-height{
  height: 48vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 143px;
}
}
/* 720 height screen end */

/* 580-590 height screen starts */
@media only screen and (min-height:580px) and (max-height:590px){
.teleprompter-text{
  max-height: 18vh;
}
.h-43v{
  height:auto;
}
.main-scrollbar{
  max-height: 46vh;
}
}
/* 580-590 height screen end */


/* 768x1024 screen starts */
@media only screen and (min-width:760px) and (max-width:770px){
.teleprompter-text{
  max-height: 17vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 63vh;
}
.frame{
  width: 49.7%;
}
.main-room{
  width: 100%;
}
.invite-frame{
width: 49.7%;
}
.invite-ht{
height: auto;
}
}
/* 768x1024 screen end */

/* 820x1180 width screen starts */
@media only screen and (min-width:815px) and (max-width:825px){
.teleprompter-text{
  max-height: 25vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 58vh;
}
.frame{
  width: 49.7%;
}
.main-room{
  width: 98% !important;
}
.invite-frame{
width: 32.9%;
}
.anchor-frame-height{
height: 29vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
height: 258px;
}
}
/* 820x1180 width screen end */

/* 800 width screen starts */
@media only screen and (min-width:795px) and (max-width:805px){
.teleprompter-text{
  max-height: 24vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 48vh;
}
.frame{
  width: 32.97%;
}
.main-room{
  width: 98% !important;
}
}
/* 800 width screen end */

/* 760-800 width screen starts */
@media only screen and (min-width:520px) and (max-width:820px){
.main-room{
  width: 100%;
}
.dis-none{
 display: none;
}
.desktop-none{
 /* display: block;*/

}



    .teleprompter-text {
        max-height: 56vh !important;
    }
.frame{
width: 49%;
}
div#chroma-file-name, #participant-div h6, .host-label{
max-width: 15vw;
}
.invite-btn-block{
  position: absolute;
  bottom: 20px;
  width: 100%;
  margin: 0 !important;
}
.mob-none{
  display: none !important;
}
.room-properties{
  width: 100%;
}

.res-tp-properties{
flex-wrap: wrap;
gap: 5px;
}
.gap-10px{
gap: 10px;
}
.teleprompter-text{
width: 85%;
padding: 0 20px;
}
.tp-backward-forward{
width: 14%;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.closebtn{
display: block;
}
.index-header{
width: 100% !important;
}
.h-41vh {
height: 27vh !important;
}
}
/* 760-800 width screen end */

/* 820 height screen starts */
@media only screen and (min-height:815px) and (max-height:825px){
.teleprompter-text{
 max-height: 44vh;
}

.tp-height {
    height: 60vh;

}

#teleprompter {
    height: 45vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 19vh;
}
.h-82vh{
  /* overflow: auto; */
  /* max-height: none; */
}
.invite-ht{
  height: 43vh;
}
.anchor-frame-height{
  height: 50vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 166px;
}
}
/* 820 height screen end */

/* 667 height screen starts */
@media only screen and (min-height:660px) and (max-height:670px){
.teleprompter-text{
  max-height: 26vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 37vh;
 
  
}
}
/* 667 height screen end */

/* 844 height screen starts */
@media only screen and (min-height:840px) and (max-height:850px){
.teleprompter-text{
  max-height: 20vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 50vh;
   
  
}
}

/* 844 height screen end */


/* 740 height screen starts */
@media only screen and (min-height:738px) and (max-height:740px){
.teleprompter-text{
  max-height: 23vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 44vh;
 
  
}
}
/* 740 height screen end */


/* 1024 height screen starts */
@media only screen and (min-height:1020px) and (max-height:1030px){
.teleprompter-text{
 max-height: 56vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 19vh;
  
  
}
.h-82vh{
  overflow: visible;
  /* max-height: none; */
  max-height: 87vh;
  min-height: 87vh;
  
}
.invite-ht{
  height: 44vh;
}
.anchor-frame-height{
  height: 27vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 218px;
}
}
/* 1024 height screen end */

/* 1366 height screen starts */
@media only screen and (min-height:1360px) and (max-height:1370px){
.teleprompter-text{
  max-height: 55vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 60vh;
  
}
/* .frame{
  width: 32.9%;
} */
.h-82vh {
  /* max-height: none; */
  /* overflow: auto; */
}
.invite-ht{
height: 45vh;
}
.anchor-frame-height{
height: 30vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
height: 306px;
}
}
/* 1366 height screen end */

/* 912 height screen starts */
@media only screen and (min-height:910px) and (max-height:913px){
.teleprompter-text{
        max-height: 43vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 52vh;
}
.h-82vh{
  /* max-height: none; */
  overflow: auto;
}
.invite-ht{
  height: 43vh;
}
.anchor-frame-height{
  height: 52vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 190px;
}
}
/* 912 height screen end */

/* 914 height screen starts */
@media only screen and (min-height:914px) and (max-height:916px){
.teleprompter-text{
  max-height: 18vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 54vh;
}
}
/* 914 height screen end */



/* 540x720 width screen starts */
@media only screen and (min-width:535px) and (max-width:545px){
.main-scrollbar{
  max-height: 44vh;
}
.frame{
  width: 49.6%;
}
.invite-frame{
  width: 32.8%;
}
.anchor-frame-height{
  height: 22vh;
}
}
/* 540x720 width screen end */

/* 540 height screen starts */
@media only screen and (min-height:535px) and (max-height:545px){
.teleprompter-text{
  max-height: 21vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 42vh;
}
.frame{
  width: 32%;
}
.h-82vh{
  max-height: none;
  overflow: visible;
}
.anchor-frame-height{
  height: 42vh;
}
}
/* 540 height screen end */

/* 1280 height screen starts */
@media only screen and (min-height:1275px) and (max-height:1285px){
.teleprompter-text{
         max-height: 56vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 56vh;
}
.frame{
  width: 49.7%;
}
.h-82vh{
  max-height: none;
  overflow: visible;
}
.invite-ht{
  height: 45vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 290px;
}
.anchor-frame-height{
  height: 28vh;
}
.h-41vh {
  height: 30vh !important;
}
}
/* 1280 height screen end */

/* 853 height screen starts */
@media only screen and (min-height:850px) and (max-height:860px){
.teleprompter-text{
  max-height: 43vh;
}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 19vh;
}
.frame{
  width: 32.9%;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 219px;
}
}
/* 853 height screen end */


/* 600 height screen starts */
@media only screen and (min-height:595px) and (max-height:605px){
.teleprompter-text{
 max-height: 36vh;
}
#teleprompter {
    height: 39vh;
}
.tp-height {
    height: 55vh;

}
.h-43v{
  height: auto;
}
.main-scrollbar{
  max-height: 19vh;
}
.main-scrollbar .frame {
  width: 24%;
}
.anchor-frame-height{
  height: 45vh;
}
.tp-backward-forward input[type=range][orient=vertical]{
  height: 101px;
}
}
/* 600 height screen end */

/* 1180 height screen starts */
@media only screen and (min-height:1170px) and (max-height:1190px){
.h-82vh{
  overflow: visible;
  max-height: none;
}
.invite-ht{
  height: 45vh;
}
}
/* 1180 height screen end */

/* 910 width screen starts */
@media only screen and (min-width:910px) and (max-width:915px){
.invite-frame{
  width: 33%;
}
.frame{
  width: 49.7%;
}
.main-scrollbar #local, .main-scrollbar .h-41vh{
  height: 14vh !important;
}
.main-scrollbar .frame{
  width: 22.7%;
}
.h-41vh {
  height: 30vh !important;
}
}
/* 910 width screen end */

/* 720 width screen starts */
@media only screen and (min-width:715px) and (max-width:725px){
.invite-frame{
  width: 24.5%;
}
}
/* 720 width screen end */

/* 853 width screen starts */
@media only screen and (min-width:850px) and (max-width:855px){
.invite-frame{
  width: 33%;
}
}
/* 853 width screen end */

/* 853 height screen starts */
@media only screen and (min-height:850px) and (max-height:855px){
.h-82vh{
  /* max-height: none; */
  overflow: auto;
}
.invite-ht{
  height: 43vh;
}
}
/* 853 height screen end */

/* 600 height screen starts */
@media only screen and (min-height:595px) and (max-height:605px){
.h-82vh{
  max-height: none;
  overflow: visible;
}
.invite-ht{
  height: 40vh;
}
}
/* 600 height screen end */

/* 900 height screen starts */
@media only screen and (min-height:895px) and (max-height:905px){
.h-82vh{
  /* max-height: none; */
  overflow: auto;
}
.invite-ht{
  height: 43vh;
}
}
/* 900 height screen end */

/* 1180 width screen starts */
@media only screen and (min-width:1175px) and (max-width:1185px){
.invite-frame{
  width: 33%;
}
.main-scrollbar .frame {
  width: 27%;
}
}
/* 1180 width screen end */



@media only screen and (min-height:860px) and (max-height:870px){
.h-82vh{
max-height: 86vh;
min-height: 86vh;
}
}

@media only screen and (min-height:730px) and (max-height:740px){
.h-82vh{
 max-height: 82vh;
 min-height: 82vh;
}
}



@media screen and (max-width: 520px){

.res-tp-item-top-icon{
  position: absolute;
  left: 88%;
  top: 38px;
  }
  /* 10-04-25 starts */
  .h-41vh{
    height: 25vh !important;
    }
    .custom-invite-frame {
      display: flex;
      /* flex-direction: column; */
      height: 80vh !important;
      flex-wrap: wrap;
      overflow: hidden !important;
      width: 100%;
      gap:5px !important;
    }
    body{
      overflow: hidden;
    }
    /* #remote-container .frame {
      flex: 1 1 auto;
    } */
    body{
      overflow: auto;
    }
    .parent-share{
      flex-wrap: wrap;
    }
    .col-direction{
      flex-direction: row !important;
    }
    .mobile-view{
      display: block;
    }
    
  /* 10-04-25 end */
 
}

@media screen and (max-width: 767px){
  #teleprompter-sec, .custom-switch {
    display: none !important;
  }
}

@media screen and (max-height: 520px){
  #teleprompter-sec, .custom-switch {
    display: none !important;
  }
}


/* 01-12-2025 */

 @media only screen and (min-width:1350px) and (max-width:1370px){
    .main-scrollbar .frame {
        width: 20%;
    }

#teleprompter {
    height: 45vh;
}

.tp-height {
    height: 58vh;
    overflow: auto;
}
}


@media screen and (min-width:1536px) and (max-width:1600px) {
  #teleprompter {
    height: 48vh;
}

.tp-height {
    height: 62vh;
    overflow: auto;
}
.main-scrollbar .frame {
  width: 20%;
}
}