[id^="screen"]{
    position: fixed;
    top: 59px;
    left: 5%;
    z-index: 99;
}
.parent-share .frame{
    width: 30%;
    height: 22vh !important;
}
[id^="screen"].frame{
    width: 66% !important;
    height: 65vh !important;
}

.parent-share{
    margin-top: 115px;
}
.div#chroma-file-name, #participant-div h6, .host-label{
    white-space: nowrap;
}


@media only screen and (min-width: 520px) and (max-width: 820px) {
    .desktop-none {
        display: block !important;
    }
}

@media (min-height: 920px) and (max-height: 950px) {
    .parent-share .frame{
        height: 19vh !important;
    }
    .parent-share{
        margin-top: 79px;
    }
    [id^="screen"].frame{
        height: 67vh !important;
    }
}

@media (min-width: 1670px) and (max-width: 1690px) {
    .parent-share {
        margin-top: 62px;
    }
    [id^="screen"].frame {
        height: 62vh !important;
    }
}

@media (min-width: 1590px) and (max-width: 1610px) {
    .parent-share .frame {
        height: 20vh !important;
    }
    .parent-share {
        margin-top: 43px;
    }
    [id^="screen"].frame {
        height: 63vh !important;
    }
}

@media (min-width: 1270px) and (max-width: 1290px) {
    .parent-share {
        margin-top: 25px;
    }
    [id^="screen"].frame {
        height: 57vh !important;
    }
}

@media (min-width: 1430px) and (max-width: 1450px) {
    .parent-share .frame {
        height: 20vh !important;
    }
    .parent-share {
        margin-top: 40px;
    }
    [id^="screen"].frame {
        height: 63vh !important;
    }
}

@media (min-height: 900px) and (max-height: 920px) {
    [id^="screen"].frame {
        height: 63vh !important;
    }
    .parent-share {
        margin-top: 80px !important;
    }
}

@media (min-width: 1355px) and (max-width: 1370px) {
    .parent-share .frame {
        height: 19vh !important;
    }
    .parent-share {
        margin-top: 13px;
    }
    [id^="screen"].frame {
        height: 61vh !important;
    }
}

@media (min-height: 880px) and (max-height: 900px) {
    [id^="screen"].frame {
        height: 58vh !important;
    }
    .parent-share {
        margin-top: 50px;
    }
}

@media (min-height: 820px) and (max-height: 840px) {
    [id^="screen"].frame {
        height: 58vh !important;
    }
    .parent-share {
        margin-top: 50px;
    }
}

@media (min-height: 660px) and (max-height: 680px) {
    [id^="screen"].frame{
        height: 58vh !important;
    }
    .parent-share{
        margin-top: 18px;
    }
}

@media (min-height: 620px) and (max-height: 640px) {
    [id^="screen"].frame{
        height: 56vh !important;
    }
    .parent-share{
        margin-top: 8px;
    }
}

@media (min-height: 580px) and (max-height: 600px) {
    [id^="screen"].frame{
        height: 55vh !important;
    }
    .parent-share{
        margin-top: 1px;
    }
}

@media (min-height: 860px) and (max-height: 870px) {
    .parent-share .frame {
        height: 19vh !important;
    }
    .parent-share {
        margin-top: -5px;
    }

    [id^="screen"].frame {
        height: auto !important;
    }
}

@media (min-height: 730px) and (max-height: 740px) {
    [id^="screen"].frame{
        height: 60vh !important;
    }
    .parent-share {
        margin-top: 5px;
    }
}

@media (min-width: 760px) and (max-width: 770px) {
    .parent-share .frame {
        width: 49.7% !important;
    }

    [id^="screen"].frame{
        width: 100% !important;
    }
    [id^="screen"]{
        left: 2px;
    }
    .parent-share{
        align-items: flex-start !important;
        margin-top: 433px;
        min-height: auto !important;
        flex-wrap: wrap;
    }
    .enterRoomProp{
        width: 100%;
    }
   
}

@media (min-width: 1020px) and (max-width: 1030px) {
    .parent-share {
        margin-top: 5px;
    }
}


@media (min-width: 810px) and (max-width: 830px) {
    .parent-share .frame {
        width: 49.7% !important;
    }

    [id^="screen"].frame{
        width: 100% !important;
    }
    [id^="screen"]{
        left: 2px;
    }
    .parent-share{
        align-items: flex-start !important;
        margin-top: 486px;
        min-height: auto !important;
        flex-wrap: wrap;
    }
    .enterRoomProp{
        width: 100%;
    }
  
}

@media (min-height: 1360px) and (max-height: 1370px) {
    .parent-share{
        flex-wrap: wrap;
    }
    .parent-share .frame{
        width: 49.7% !important;
    }
    [id^="screen"].frame{
        width: 66% !important;
    }
    .parent-share {
        margin-top: 456px;
        min-height: auto !important;
        max-height: none !important;
    }
}

@media (min-width: 530px) and (max-width: 550px) {


    .parent-share .frame {
        width: 49.5% !important;
    }

    [id^="screen"].frame{
        width: 100% !important;
        height: 40vh !important;
    }
    [id^="screen"]{
        left: 2px;
    }
    .parent-share{
        align-items: flex-start !important;
        margin-top: 286px;
        min-height: auto !important;
        flex-wrap: wrap;
    }
    .enterRoomProp{
        width: 100%;
    }
   
}

@media (min-width: 710px) and (max-width: 730px) {
    /* .parent-share .frame {
        width: 49.5% !important;
    } */

    [id^="screen"].frame{
        width: 100% !important;
        height: 40vh !important;
    }
    [id^="screen"]{
        left: 2px;
    }
    .parent-share{
        align-items: flex-start !important;
        margin-top: 286px;
        min-height: auto !important;
    }
    .enterRoomProp{
        width: 100%;
    }
   
}

@media (min-height: 1270px) and (max-height: 1290px) {
    .parent-share{
        flex-wrap: wrap;
    }
    .parent-share .frame{
        width: 49.5% !important;
    }
    .parent-share {
        margin-top: 456px;
        min-height: auto !important;
        max-height: none !important;
    }
    .h-41vh{
        height: 25vh !important;
    }
    .frame{
        width: 49.5% !important;
    }
    [id^="screen"].frame{
        width: 66% !important;
    }
}

/* mobile screen css starts */
@media screen and (max-width: 520px){
    .enterRoomProp{
        width: 100%;
    }
    .parent-share .h-41vh{
        height: 25.3vh !important;
    }
    .parent-share .frame{
        width: 100%;
    }
    .h-82vh{
        overflow: visible;
    }
    [id^="screen"].frame{
        width: 99.4% !important;
    }
    [id^="screen"].h-41vh {
        height: 397px !important;
    }
    .parent-share{
        margin-top: 395px !important;
        flex-wrap: wrap;
        overflow: visible !important;
    }
    [id^="screen"]{
        left: 1px;
    }
    .h-82vh{
        height: auto;
        min-height: auto;
        max-height: none !important;
    }
    [id^="screen"]{
        top: 49px;
    }
}

@media (min-width: 2038px) and (max-width: 2058px) {
    [id^="screen"].frame{
        height: 61vh !important;
    }
}

@media (min-height: 2038px) and (max-height: 2058px) {
    .parent-share .frame {
        height: 13vh !important;
    }
    [id^="screen"].frame {
        height: auto !important;
    }
}