html,
body {
    height: 100%;
    overflow-y: hidden;
}

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  z-index: 1000;
}
.container .box {
  /*font-size: 36px;*/
  /*padding: 20px;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
    background-color:transparent!important;
}
.container .header {
  background-color: white!important;
  flex-direction: row;
  justify-content: left;   
  padding: 10px;
  /*height: 24px; */
    
    
  font-size: 13px;
    /* padding: 10px; */
/*     max-height: unset; */
    /*overflow: hidden;*/
    /*background-color: white;*/
    line-height: 20px;
    /*margin-top: 0px; 
    padding-top: 0px; 
    padding-bottom: 0px;
     */
    padding: 0px 10px!important;
    
}
.container .chatHeader {
  background-color: blue;
  /*flex: 1;*/

    height: 80px;
    position: relative;
    transition: 1s; 
}

.container .chatHeaderOpen {
    height: 42vh!important;
    transition: 1s;  
}

.container .chatBody {
  background-color: pink;
  flex: 1;
    
  display: block;
}

.container .footer {
    background-color: black!important;
    height: 0px;
    font-size: 14px;
    color: white;
    transition: 1s;  
    position: relative;
    overflow: inherit;
    
    /*
    background-color: red;
    height: 20px;
    font-size: 12px;
    color: #000000ad;
    position: absolute;
    z-index: 1510;
    bottom: 0px;
    left: 0;
    right: 0;
    
    display:none;
    */
    white-space: pre;
}

.footerOpen {
    height: 43px!important;
    transition: 1s;  
}

.footerOpenLarge {
     height: 200px!important;
}

.padded {
  padding: 20px;   
}