.parent-container {
  width: 100% !important;
  height: calc(100vh - 100px);
  margin: 0 !important;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  overflow:hidden;
}


.sub-container {
flex-direction: column;
  background: none;
  background-color: rgba(0, 0, 0, .8);
  height:auto;
  width:100%;
  display: flex;
  flex-direction: column;
  overflow: auto!important;
}
@media (max-width: 1200px) and (max-height: 600px) {
  .sub-container {
    /* Adjust the size and styles to fit the mobile screen */
    top:65% !important;
    width: 100% !important;
    height: 70% !important;
    overflow: auto!important;
  }
}
@media (max-width: 600px) and (max-height: 1200px) {
  .sub-container {
    /* Adjust the size and styles to fit the mobile screen */
    width: 100% !important;
    height:auto;
    overflow: auto!important;
  }
}
.tab-panel-2 .gwt-TabPanelBottom {
    /* Define your custom styles here for the second TabPanel */
     border-style: none!important;
        border-width: 0!important;
}
.contest-tab {
height:100%!important;
width:100%!important;
}

@media (max-width: 600px) and (max-height: 1200px) {
  .contest-tab {
    /* Adjust the size and styles to fit the mobile screen */
    width: 100% !important;
    height:100%!important;
    overflow: auto!important;
  }
}
.container-border{
border: 1px solid #ddd;
box-shadow: .5px 1px 5px #00FFFF;
padding: 20px;
border-radius:20px
}
 .lb-ui {
  background: none!important;
  background-color:transparent!important;
          }
 .scroll-point{
 height:71vh;
 width:99vw;
 }
  @media (max-width: 600px) and (max-height: 1200px) {
          .scroll-point  {
             height:100vh;
             width:100%;
          }
        }
 @media (max-width: 600px) and (max-height: 1200px) {
   .scroll  {
      height:100vh;
      width:100%;
   }
 }
        .scroll-dialog{
         overflow-x:hidden!important;
         height:55vh;
        }
              @media (max-width: 600px)  {
                         .scroll-dialog  {
                            width:213px!important;
                         }
                       }

                       .bracket-scroll{
                       height: calc(100vh - 220px);
                       width:100vw;
                       }

                         @media (min-width:412px) and (max-height: 915px) {
                       .bracket-scroll {
                       height: calc(100vh - 286px);

                       }
                       }
                         @media (min-width:414px) and (max-height: 896px) {
                         .bracket-scroll {
                         height: calc(100vh - 268px);

                       }
                       }
                       @media (min-width:430px) and (max-height: 1000px) {
                       .bracket-scroll {
                       height: calc(100vh - 305px);

                     }
                     }
                     @media (min-width:768px) and (min-height: 1024px) {
                     .bracket-scroll {
                     height: calc(100vh - 394px);
                     }
                     }
                     @media (min-width:820px) and (min-height: 1180px) {
                     .bracket-scroll {
                     height: calc(100vh - 550px);
                     }
                     }
                     @media (min-width:912px) and (min-height: 1368px) {
                     .bracket-scroll {
                     height: calc(100vh - 738px);
                     }
                     }
                     @media (min-width:1024px) and (min-height: 1366px) {
                     .bracket-scroll {
                     height: calc(100vh - 738px);
                     }
                     }


                     @media (min-width: 1441px) {

                     .bracket-scroll {
                     height: calc(100vh - 220px);
                     }
                     }

                           .team-scroll{
                               height: calc(100vh - 195px);
                               width:100vw;
                            }
                                @media (max-width: 400px) {
                                  .team-scroll {
                                   height: calc(100vh - 230px);

                               }
                              }
                                  @media (min-width:412px) and (max-width: 583px) {
                                  .team-scroll {
                                  height: calc(100vh - 260px);

                                  }
                                  }
                                @media (min-width:430px) and (max-width: 583px) {
                                  .team-scroll {
                                  height: calc(100vh - 280px);

                              }
                              }



.dt-one-line-scroll{
height: calc(100vh - 195px);
width:100vw;
}
.profile-post-scroll{
height: calc(100vh - 290px);
width:100vw;
}
@media (min-width: 1441px) {
   .profile-post-scroll{
   overflow-x:hidden!important;
  }
}
.group-post-scroll{
height: calc(100vh - 230px);
width:100vw;
}
@media (min-width: 1441px) {
   .group-post-scroll{
   overflow-x:hidden!important;
  }
}
.dt-scroll{
height: calc(100vh - 155px);
width:100vw;
}
@media (min-width: 1441px) {
   .dt-scroll{
   overflow-x:hidden!important;
  }
}


.dt-three-line-scroll{
height: calc(100vh - 195px);
width:100vw;
}
@media (min-width: 330px) and (max-width: 690px){
   .dt-three-line-scroll{
   overflow-x:hidden!important;
   height: calc(100vh - 270px);
   }
}
@media (min-width: 601px) and (max-width: 611px){
    .dt-three-line-scroll{
      height: calc(100vh - 290px);
      }
}
@media (min-width: 695px) and (max-width: 1380px) {
   .dt-three-line-scroll{
   overflow-x:hidden!important;
   height: calc(100vh - 233px);
   }
}

.msg-scroll{
height: calc(100vh - 230px);
width:100vw;
}

.dt-two-line-scroll{
height: calc(100vh - 230px);
width:100vw;
}
@media (min-width: 1441px) {
   .dt-two-line-scroll{
   overflow-x:hidden!important;
   height: calc(100vh - 190px);
   }
}@media (min-width: 768px) and (max-width: 1366px) {
     .dt-two-line-scroll{
       height: calc(100vh - 195px);
       }
 }

.dt-two-line-lb-scroll{
height: calc(100vh - 236px);
width:100vw;
}
@media (min-width: 1441px) {
   .dt-two-line-lb-scroll{
   overflow-x:hidden!important;
   height: calc(100vh - 190px);
   }
}
.dt-follow-scroll{
height: calc(100vh - 255px);
width:100vw;
}
.dt-ref-scroll{
height: calc(100vh - 330px);
width:100vw;
}
@media (min-width: 1367px) {
   .dt-ref-scroll{
   height: calc(100vh - 295px);
   }
}
@media (min-width: 559px) {
       .dt-ref-scroll{
       height: calc(100vh - 295px);
       }
}
.dt-group-scroll{
height: calc(100vh - 230px);
width:100vw;
}
@media (min-width: 1441px) {
   .dt-group-scroll{
   overflow-x:hidden!important;
  }
}
.dt-group-member-scroll{
height: calc(100vh - 195px);
width:100vw;
}
.store-scroll{
background-color: rgba(0, 0, 0, 0.85);
width: 100vw!important;
}

.office-products-scroll{
width:100vw;
height: calc(100vh - 155px);
}
@media (min-width: 1441px) {
   .office-products-scroll{
   height: calc(100vh - 155px);
   }
}

.admin-store-container{
    width: 100vw;
    height: calc(100vh - 190px);
    overflow: auto;
}




                 .scroll-thread-comments{
                      overflow-x:hidden!important;
                      max-height:300px;
                      width: 100%;
                      }
                      @media (min-width: 700px) and (max-width: 1600px)  {
                        .scroll-thread-comments{
                        max-height:290px;
                        }
                      }
                       .content-panel{
                         width:100%;
                         display:flex;
                         flex-wrap:wrap;
                         gap:2px;
                         max-height:200px;
                         overflow:auto;
                       }
                          @media (min-width: 700px) and (max-width: 1600px)  {
                            .content-panel{
                             max-height:120px;
                        }
                       }
                              .content-panel-a-only{
                              width:100%;
                              display:flex;
                              flex-wrap:wrap;
                              gap:2px;
                              margin-bottom: 5px;
                              }


            .reply-thread {
                         color:black;
                         line-height: 1.em;
                         max-height: 8em;
                         max-width: 85vw;
                         min-width: 430px;
                         word-wrap: break-word;
                         overflow: hidden;
                     }

              @media (max-width: 767px) {
                 .reply-thread {
                min-width: 330px;
                 }
             }

    .scroll-group-list{
     height:50vh;
     width:99vw;
    }

      @media (max-width: 600px) and (max-height: 1200px) {
          .scroll-group-list  {
             height:100vh;
             width:100%;
          }
        }
        .msg-container{
                background-color: #00AA4B;
                 padding: 10px;
                 border-radius: 15px;
                 color: white;
                 white-space: pre-wrap;

               line-height:1.em;
               max-width: 20vw;
               word-wrap: break-word;
        }
            @media (max-width: 767px) {
                  .msg-container  {
                    max-width: 50vw;
                    word-wrap: break-word;
                  }
                }


    .reply-container {

           line-height:1.em;
           max-height: 20em;
           max-width: 85vw;
           min-width: 30vw;
           word-wrap: break-word;
           overflow:hidden;
        }

    .comment-container {

       line-height:1.em;
       max-height: 8em;
       max-width: 85vw;
       min-width: 30vw;
       word-wrap: break-word;
       overflow:hidden;
    }
     @media (max-width: 767px) {

          .comment-container  {
            max-width: 80vw;
            min-width: 80vw;
            word-wrap: break-word;
          }
     }
          .expand-btn{
            display:none;
          }

         .expandable  .expand-btn{
            display:inline-block;
              margin-left:5px;
                   background-color:none;
                   color: none;
                   padding: 4px;
                   border-radius: 4px;
                   box-shadow: 0 0 2px rgba(0, 0, 0, 1);
                   border: none;
                   color:black;
          }

         .comment-container.expanded {
            max-height:fit-content!important;
         }




    .column-desc-cell {
       max-height: 15vw;
       max-width: 50vw;
       overflow-x: auto; /* Horizontal overflow may be auto or scroll, depending on your design */
       overflow-y: auto; /* Vertical overflow is set to auto for a scrollbar when needed */
       word-wrap: break-word;
    }
     @media (max-width: 600px) and (max-height: 1200px) {
          .column-desc-cell  {
            max-height: 20vw;
            max-width:65vw; /* Adjust the maximum height as needed */
            overflow-x: auto; /* Horizontal overflow may be auto or scroll, depending on your design */
            overflow-y: auto; /* Vertical overflow is set to auto for a scrollbar when needed */
            word-wrap: break-word;
          }
        }

        .column-name-cell{
        max-width: 45vw;
        word-wrap: break-word;
        }

          .profile {
               padding: 30px;
               height: 35vw;
               overflow:auto;
            }
             @media (max-width: 600px) and (max-height: 1200px) {
                  .profile  {
                   height:170vw!important;
                  }
                }