:root{
  --bm-safe-top: 0px;
  --bm-safe-bottom: 0px;
}

#better-messages-root{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;

  .bp-messages-wrap.bp-messages-mobile .chat-header .mobileClose{
    display: none !important;
  }
}

.bp-messages-wrap .chat-header{
  padding-top: var(--bm-safe-top);
  box-sizing: content-box !important;
}

.bp-messages-wrap .chat-footer{
  //height: calc( 44px + var(--bm-safe-top);
}

.bp-messages-wrap .chat-tabs{
  > div {
    padding-bottom: var(--bm-safe-bottom) !important;
    box-sizing: content-box !important;
  }
}
.bpbm-gifs-selector{
  padding-bottom: var(--bm-safe-bottom) !important;
  box-sizing: content-box !important;
}

.uppy-Dashboard--modal .uppy-Dashboard-inner{
  margin-top: var(--bm-safe-top);
  margin-bottom: var(--bm-safe-bottom);
}

.bp-messages-wrap .bm-reply{
  padding-bottom: var(--bm-safe-bottom) !important;
  box-sizing: content-box !important;
}

html.ios-app {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}

html.android-app {
  font-family: "Roboto", "Helvetica Neue", sans-serif;
}

.login-container{
  width: 100%;
  height: 100%;
  background: #fcfcfc;
  padding-top: var(--bm-safe-top);
  padding-bottom: var(--bm-safe-bottom);

  .logo-container{
    max-width: 80%;
    margin: 50px auto;
  }

  .login-form{
    max-width: 80%;
    margin: 0 auto;

    .login-input{
      display: block;
      margin-bottom: 20px;

      label{
        display: block;
        text-align: center;
        margin-bottom: 10px;
        font-size: 16px;
      }

      input{
        display: block;
        width: 100%;
        padding: 8px;
        height: 50px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
      }
    }

    .login-button{
      button{
        display: block;
        width: 100%;
        height: 50px;
        font-size: 16px;
        text-transform: uppercase;
      }
    }
  }
}