@media only screen and (min-device-width: 1024px) and (max-device-width: 1300px) {
  /* .video-wrapper > iframe {
    min-height: 390px !important;
  } */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 481px) and (max-device-width : 1024px) {
  .inner-wrapper {
    padding-left: 10px !important;
  }
  /* .video-wrapper > iframe {
    min-height: 341px !important;
  } */
  .sidebar {
    display: none !important;
  }
  .navigation-container {
    left: 8px !important;
  }
  .navigation-container {
    top: 0;
    width: 100%;
    left: 0 !important;
    border-radius: 0 !important;
    height: 47px;
    z-index: 3;
    background-color: #25335C !important;
  }
  .navigation-container > .nav.nav-default {
    display: none !important;
  }
  .navigation-container > .nav.nav-mobile {
    display: block !important;
    text-align: left !important;
  }
  /* .chat .chat__content {
    top: 67px;
  } */
}
@media screen and (max-width: 785px) {
  .chat-mini-icon {
    display: block;
  }
  /* .chat-wrapper {
    display: none;
  } */
  .chat-wrapper.open {
    display: block;
  }
  .close-chat {
    visibility: visible;
  }
}
@media screen and (max-device-width: 768px) {
  .widget-container {
    /* opacity: 0 !important; */
    display: none;
  }
  .inner-wrapper {
    padding-right: 10px !important;
  }
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* .video-wrapper > iframe {
    min-height: 346px !important;
  } */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* .video-wrapper > iframe {
    min-height: 346px !important;
  } */
}

@media only screen and (min-device-width: 412px) and (max-device-height: 915px) and (orientation: portrait) {
  .main-container > .widget-wrapper,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .chat__content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content .str-chat__list,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .str-chat__main-panel,
  .main-container > .widget-wrapper.smallest > .chat-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  .navigation-container {
    margin: 0 !important;
  }
  .navigation-container .drawer {
    width: 50% !important;
    left: -600px !important;
  }
  .video-content .video-wrapper.fixed-bottom iframe {
    width: 250px !important;
    height: 150px !important;
  }
  .navigation-container .drawer.show {
    left: 0 !important;
  }
  .navigation-container .drawer .drawer-items .nav-link span {
    font-size: 15px !important;
  }
  .nav-mobile .live-title {
    margin: 10px 0 0 10px !important;
    width: 55% !important;
    font-size: 12px !important;
  }
  .nav-mobile .logo-container {
    margin-left: 15px !important;
  }
  .widget-container.mobile .chat .chat__content {
    top: 0;
  }
  .widget-container.mobile .str-chat__main-panel {
    height: 98% !important;
  }
}

@media only screen and (min-device-width: 424px) and (max-device-height: 791px) and (orientation: portrait) {
  .nav-mobile .live-title {
    width: 67%!important;
    margin: 10px !important;
  }
  .nav-mobile .logo-container {
    margin-left: 15px !important;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) {
  .zoom-overlay .stream-title {
    padding: 0 10px;
    margin-bottom: 20px !important;
    font-size: 14px !important;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
  .nav-mobile .live-title {
    font-size: 13px !important;
    margin: 4px 0 15px 15px !important;
    width: 52%;
  }
  .block.tiled {
    width: unset !important;
    
  }
  /* #zoom-container {
    min-height: 200px !important;
  } */
}
/* Android */
@media only screen and (max-device-width : 320px) and (orientation : portrait) {
  /* OPPO F11 */
  .nav-mobile .live-title {
    width: 60%;
    margin: 10px 0 0 10px !important;
    font-size: 12px !important;
  }
  .navigation-container {
    margin-left: 0 !important;
  }
  .navigation-container .logo-container {
    margin-left: 10px !important;
  }
  .main-container.smallest > .widget-wrapper.smallest {
    width: 100%;
    max-width: 100%;
  }
  .chat-wrapper {
    width: 100%;
    max-width: 100%;
  }
  .main-container.smallest > .widget-wrapper.smallest .chat__content .str-chat__container,
  .main-container.smallest > .widget-wrapper.smallest .chat__content .str-chat__container .str-chat__main-panel,
  .main-container.smallest > .widget-wrapper.smallest .chat__content .str-chat__container .str-chat__main-panel .str-chat__list,
  .main-container.smallest > .widget-wrapper.smallest .chat__content {
    width: 100%;
    max-width: 246px;
  }
  .video-content .video-wrapper.fixed-bottom iframe {
    width: 220px !important;
    height: 130px !important;
  }

}
@media only screen and (max-device-width: 320px) and (min-device-height: 618px) and (orientation : portrait) {
  /* .main-container.smallest > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel {
    height: calc(100vh - 122px);
  } */
  .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel {
    height: calc(100vh - 178px);
  }
}
@media only screen and (max-device-width: 320px) and (min-device-height: 562px) and (orientation : portrait) {
  .main-container.smallest > .widget-wrapper.smallest .chat__content .str-chat.str-chat-channel {
    height: calc(100vh - 178px);
  }
}
@media only screen and (max-device-width: 320px) and (max-device-height: 290px) {
  .nav-mobile .live-title {
    margin: 10px 0 0 10px;
    width: 55%;
    font-size: 12px;
  }
  .nav-mobile .logo-container {
    margin: 0 0 0 10px;
  }
}
@media only screen and (min-device-width : 320px) and (max-device-height : 562px) and (orientation : portrait) {
  .nav-mobile .live-title {
    width: 55%;
    margin: 10px 0 0 10px !important;
    font-size: 12px !important;
  }
  .nav-mobile .logo-container {
    margin: 0 0 0 10px !important;
  }
  .navigation-container .drawer {
    width: 100% !important;
    left: -420px !important;
  }
  .main-container .navigation-container {
    margin: 0 !important;
  }
  .navigation-container .drawer.show {
    left: 0 !important;
  }
  .main-container > .widget-wrapper,
  .main-container > .widget-wrapper .chat-wrapper {
    max-width: 320px !important;
  }
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .chat__content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .chat__content .str-chat,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .chat__content .str-chat .str-chat__container,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content .str-chat__list,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .str-chat__main-panel {
    width: 246px;
  }
  /* .main-container > .widget-wrapper,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .chat__content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content .str-chat__list,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .str-chat__main-panel,
  .main-container > .widget-wrapper.smallest > .chat-wrapper {
    width: 100% !important;
    max-width: 320px !important;
  } */
  .video-content .video-wrapper.fixed-bottom iframe {
    width: 220px !important;
    height: 130px !important;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 559px) {
  .nav-mobile .live-title {
    width: 66%;
    margin: 10px 0 0 10px !important;
    font-size: 12px !important;
  }
  .tabbed-wrapper .chat-content .str-chat.str-chat-channel .str-chat__container .str-chat__main-panel {
    height: calc(100vh - 425px);
  }
  .tabbed-wrapper .chat-content .str-chat.str-chat-channel {
    height: calc(100vh - 368px);
  }
  .tabbed-wrapper .str-chat__list {
    max-width: 281px;
  }
}

/* Iphone 6/7/8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
  .inner-wrapper.mobile .tabbed-wrapper .chat-content .str-chat.str-chat-channel {
    /* height: calc(100vh - 346px); */
    height: 100%;
  }
  .main-container.video-showing .inner-wrapper.mobile .tabbed-wrapper .chat-content .str-chat.str-chat-channel .str-chat__container .str-chat__main-panel {
    height: calc(100% - 65px);
  }
  /* .main-container.video-hidden .inner-wrapper.mobile .tabbed-wrapper,
  .main-container.video-hidden .inner-wrapper.mobile .tabbed-wrapper .chat-content .str-chat.str-chat-channel {
    height: calc(100vh - 90px);
  } */
  .main-container.video-hidden .inner-wrapper.mobile .tabbed-wrapper
 .chat-content
 .str-chat.str-chat-channel
 .str-chat__container
 .str-chat__main-panel {
    height: calc(100vh - 158px);
}
  .zoom-overlay .stream-title {
    padding: 0 10px;
    margin-bottom: 20px !important;
    font-size: 14px !important;
  }
  .main-container .navigation-container {
    margin: 0 !important;
  }
  .main-container > .widget-wrapper,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .chat__content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .chat-main-content .str-chat__list,
  .main-container > .widget-wrapper.smallest > .chat-wrapper .chat .str-chat.str-chat-channel .str-chat__container .str-chat__main-panel,
  .main-container > .widget-wrapper.smallest > .chat-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  .video-content .video-wrapper.fixed-bottom iframe {
    width: 250px !important;
    height: 150px !important;
  }
}
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
  .nav-mobile .live-title {
    font-size: 15px !important;
    margin: 8px 0 15px 15px !important;
    width: 60%;
  }
  .block.tiled {
    width: unset !important;
    margin-right: 0 !important;
  }
  /* #zoom-container {
    min-height: 200px !important;
  } */
}
/* Iphone 6/7/8 Plus */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) {
  .zoom-overlay .stream-title {
    padding: 0 10px;
    margin-bottom: 20px !important;
    font-size: 14px !important;
  }
  #zmmtg-root .bhold-msg {
    margin-top: 10% !important;
    font-size: 13px;
  }
  #zmmtg-root .circle-sm-loading {
    top: 30% !important;
    left: 45% !important;
  }
  #zmmtg-root .bhold-meeting-topic {
    font-size: 18px !important;
    margin-top: 10px !important;
  }
  .ReactModal__Content {
    position: unset !important;
    transform: unset !important;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }
  .zm-modal {
    min-width: 380px !important;
  }
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
  .nav-mobile .live-title {
    font-size: 15px !important;
    margin: 8px 0 15px 15px !important;
    width: 60%;
  }
  .drawer {
    width: 100% !important;
    left: -500px !important;
  }
  .drawer.show {
    left: 0 !important;
  }
  .drawer .drawer-items {
    font-size: 20px !important;
  }
  .block.tiled {
    width: 89.5% !important;
    margin-right: 0 !important;
  }
  /* #zoom-container {
    min-height: 200px !important;
  } */
}

/* Galaxy S5 */
/* @media only screen and (max-device-width: 360px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1) {
  .nav-mobile .live-title {
    font-size: 16px !important;
    margin: 4px 0 15px 15px !important;
    width: 60%;
  }
} */

/* Laptop */
/* @media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 

} */

/* Mobile Phones */
@media only screen and (max-width: 768px) {
  body {
    margin: 0;
    padding: 0;
    padding-top: 46px;  /* The height of the top nav */
    box-sizing: border-box;
  }
  .inner-wrapper,
  .inner-wrapper .inner-content {
    padding: 0 !important;
  }
  .video-content {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}