.reactions-selector-emojies{
  > span{
    display: inline-block !important;
    cursor: pointer;
    margin: 4px;
  }
}


.bm-table{
  margin: 10px 0;
  width: 100%;
  th{
    text-align: left;
    width: 1px;
    white-space: nowrap;
  }

  th,td{
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.bpbm-tab {
  &#migrate-db{
      .bm-database-upgrade{
        margin: 15px 0;
        display: flex;

        .bm-database-upgrade-status{
          white-space: nowrap;
          margin-right: 20px;

          h2{
            margin: 0 0 10px;
          }
        }

        .bm-database-upgrade-progress{
          width: 100%;
          border: 1px solid #bcbcbc;
          border-radius: 3px;
          padding: 5px 10px;

          p{
            margin: 5px 0;
          }
        }
      }
    }
}

.bm-text-label{
  font-weight: normal;
  &.bm-text-label-pending{
    font-style: italic;
  }

  &.bm-text-label-success{
    color: green;
  }

  &.bm-text-label-error{
    color: red;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bm-icon-loading{
  display: inline-block;
  vertical-align: middle;

  svg{
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

.bm-new-build-platform{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0 -10px;

  .bm-new-build-platform-item{
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    border-radius: 3px;
    flex: 1 1 0;
    width: 0;
    text-align: center;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    text-decoration: none;
    color: inherit;

    &:hover{
      background-color: #f5f5f5;
    }

    &.bm-new-build-platform-selected{
      background-color: #f5f5f5;
    }

    .bm-new-build-platform-item-icon{
      height: 120px;
      margin: 20px 0;
    }

    h4{
      margin: 30px 0 20px;
      font-size: 20px;
    }
  }
}

table.build-info-table{
  width: 100%;
  text-align: left;

  td{
    text-align: right;
  }

  button{
    margin-right: 5px !important;
  }
}

.bm-builds-create{
  .bm-builds-create-info{
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    min-width: 500px;

    th{
      text-align: left;
      padding-right: 10px;
      width: 1px;
      white-space: nowrap;
      vertical-align: top;
    }

    td,th{
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .bm-edit-icon{
      display: inline-block;
      margin-left: 5px;
      vertical-align: middle;
      font-size: 12px;
      cursor: pointer;
    }
  }
}


.bm-builds-list{
  border-radius: 3px;
  background: white;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
  overflow: hidden;

  &.bm-builds-list-has-items{
    /*background: none;
    border-radius: 0;
    border: 0;*/
  }

  p{
    font-size: 15px;
  }

  .bm-builds-list-empty-actions{
    margin: 10px 0;
  }

  .bm-builds-list-items{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    &.bm-builds-list-items-count-1{
      .bm-builds-list-item{
        max-width: 50%;
      }
    }

    .bm-builds-list-item{
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 3px;
      background: #fafafa;
      color: #1e1e1e;
      text-decoration: none;

      &:hover{
        background: #f5f5f5;
        cursor: pointer;
      }

      img{
        border: 1px solid #ccc;
      }
    }
  }
}

.bm-device-list-items{
  table{
    width: 100%;
    text-align: left;
    margin: 5px 0 15px;
    border-spacing: 0;

    th{
      text-align: left;
      padding-right: 10px;
      width: 1px;
      white-space: nowrap;
      vertical-align: top;
    }

    td,th{
      padding-top: 8px;
      padding-bottom: 8px;
      vertical-align: top;
    }

    .first-cell{
      padding-left: 10px;
    }

    .last-cell{
      padding-right: 10px;
    }

    td.user-td{
      display: flex;
      align-content: center;
      justify-content: flex-start;
      align-items: center;
      white-space: nowrap;

      > *{
        margin-right: 5px;
      }
    }
  }
}

.bm-device-list {
  border-radius: 3px;
  background: white;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px 0 20px;
  overflow: hidden;

  &.bm-device-list-has-items {
    padding: 0;
    /*background: none;
    border-radius: 0;
    border: 0;*/
  }

  p {
    font-size: 15px;
  }
}

.bm-setting-section{
  position: relative;
  min-width: 255px;
  border: 1px solid #c3c4c7;
  box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0;
  line-height: 1;

  .bm-setting-section-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #c3c4c7;

    > h3{
      font-size: 14px;
      padding: 8px 12px;
      margin: 0;
      line-height: 1.4;
    }
  }

  .bm-setting-section-content{
    padding: 0 12px;

    .bm-setting-section-blocked{
      position: absolute;
      background: rgb(255 255 255 / 90%);
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;

      span{
        position: absolute;
        display: block;
        width: 100%;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #000;
        z-index: 2;
      }
    }
  }


  .bm-help-icon{
    font-size: 16px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
  }
}

.bm-image-upload{
  .bm-image-holder{
    background: #f5f5f5;
    border: 1px solid #ccc;
  }

  .bm-image-actions{
    margin-top: 10px;
  }
}

.better-messages-banner {
  display: block;
  margin: 10px 0;
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #f9e4a6;
  padding: 15px;
  line-height: 24px;

  &.better-messages-banner-green {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
  }

  &.better-messages-banner-orange {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
  }

  &.better-messages-banner-red {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
  }

  &.better-messages-banner-blue {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
  }
}

.bm-info-table{
  border: 1px solid #c3c4c7;
  box-shadow: 0 1px 1px rgb(0 0 0 / 4%);
  margin-bottom: 10px;

  tr{
    th{
      padding-left: 10px;
    }
    th, td{
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }
}

#messages-admin{
  .bm-reported-messages-panel{
    display: flex;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #e6bfc2;
    padding: 15px;
    line-height: 24px;
    font-size: 16px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 10px 0;

    > span{
      margin-left: 10px;
    }
  }
}

.bm-list-wrapper{
  margin: 15px 0;
  position: relative;

  table {
    &.clickable{
      tbody{
        tr{

          &:hover {
            td {
              cursor: pointer;
              background: #f8f8f8;

              input{
                cursor: default;
              }
            }
          }
        }
      }
    }

    &.bm-updating-rows {
      tr {
        &::before {
          content: '';
        }

        &.bm-updating-row{
          &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgb(255 255 255 / 50%);
            z-index: 10;
            left: 0;
            top: 0;
          }
        }
      }
    }

    tbody {
      tr {
        position: relative;

        &.bm-reported-row{
          background: #f8d7da;

          .bm-reports-table{
            width: auto;
            text-align: left;
            margin: 0 auto;

            button{
              margin: 0 5px;
            }
          }
        }

        td {
          .user-td {
            display: flex;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            white-space: nowrap;

            > * {
              margin-right: 5px;
            }
          }

          img {
            max-width: 100%;
          }
        }
      }
    }
  }
}

.bm-destructive-button{
  color:#d63638 !important;
  border-color:#d63638 !important;
}

.bm-select{
  input {
    box-shadow: none !important;

    &[type="text"]{
      width: 100%;
      border-color: hsl(0, 0%, 80%);
      padding-top: 7px;
      padding-bottom: 7px;
    }
  }
}

.bm-user-selector{
  .bm-user-selector-select{
    input {
      box-shadow: none !important;

      &[type="text"]{
        width: 100%;
        border-color: hsl(0, 0%, 80%);
        padding-top: 7px;
        padding-bottom: 7px;
      }
    }
  }

  table{
    td, th{
      color: black;
    }

    td{
        padding-top: 6px;
        padding-bottom: 6px;
    }
  }
}

.bm-filters{
  margin: 15px -5px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .bm-filter {
    width: 100%;
    max-width: 33.3%;
    margin: 0 5px;

    label{
      display: block;
      margin-bottom: 5px;
    }

    input {
      box-shadow: none !important;

      &[type="text"]{
        width: 100%;
        border-color: hsl(0, 0%, 80%);
        padding-top: 7px;
        padding-bottom: 7px;
      }
    }
  }
}

.bm-user-item{
  display: inline-flex;
  align-content: center;
  align-items: center;

  .avatar{
    margin-right: 5px;
  }
}

.bm-mini-table{
  td, th{
    padding: 0;
    font-size: 12px;
  }

  th{
    //font-weight: bold;
  }

  td + th,
  th + td{
    padding-left: 10px;
  }
}

.bm-loader{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / 50%);
  z-index: 10;
}

.bm-admin-modal{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #0000004a;
  top: 0;
  left: 0;
  z-index: 10000;

  .bm-admin-modal-content{
    .bm-upload-errors{
      color: red;

      & + button{
        margin-top: 10px;
      }
    }

    .bm-upload-app-button{
      margin-top: 10px;
    }
  }
}

.bm-admin-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0000004a;
  //opacity: 0; /* по умолчанию модальное окно прозрачно */
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in; /* анимация перехода */
  margin: 0;
  padding: 0;
  z-index: 10000;
  pointer-events: auto;
  overflow-y: auto;
}

.bm-admin-modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

@media (min-width: 576px) {
  .bm-admin-modal-dialog {
    max-width: 500px;
    margin: 200px auto 30px;
  }
}

.bm-admin-modal-content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .3rem;
  outline: 0;

  table{
    td, th{
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: left;
    }

    th{
      width: 1px;
      vertical-align: top;
      white-space: nowrap;
    }

    td{
      padding-left: 10px;
    }
  }

  .bm-modal-actions{
    margin-top: 10px;
    text-align: right;

    button{
      font-size: 11px;
      padding: 0 6px;
      margin-left: 4px;
      min-height: 25px;
    }
  }
}

@media (min-width: 768px) {
  .bm-admin-modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}

.bm-admin-modal-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #eceeef;
}
.bm-admin-modal-title {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
}

.bm-admin-modal-close {
  float: right;
  font-family: sans-serif;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  text-decoration: none;
}

.bm-admin-modal-:focus, .bm-admin-modal-:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: .75;
}

.bm-admin-modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
  overflow: auto;
}

.selectize-dropdown .selected {
  background-color: #2271b1;
}

.bm-chat-participants{
  &:not(.bm-initialized) {
    text-align: center;
  }
}

.bm-users-table{
  width: 100%;
  margin: 10px 0;

  thead {
    th {
      text-align: left;
    }
  }

  tbody{
    tr{
      td{
        padding-top: 5px;
        padding-bottom: 5px;

        &.bm-more-actions{
          width: 1px;
          white-space: nowrap;

          > span{
            cursor: pointer;
          }
        }
      }

      td.user-td{
        display: flex;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;

        > *{
          margin-right: 5px;
        }
      }
    }
  }

  .bm-avatar{
    margin-right: 5px;
    vertical-align: middle;
  }

  .bm-name{
    display: inline-block;
    vertical-align: middle;
  }

}

.bm-users-filters{
  padding: 0 10px 5px 0 !important;

  .bm-add-participant{
    float: right;
  }

  > span{
    display: inline-block;
    border: 1px solid #ccc;
    padding: 3px 10px;
    font-size: 13px;
    margin-right: 6px;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;

    &.bm-active{
      font-weight: bold;
    }
  }
}



.bm-pagination{
  ul{
    display: flex;
    li{
      margin-right: 10px;

      &:not(.selected){
        cursor: pointer;
      }

      &.selected{
        cursor: default;
        font-weight: bold;
      }

      a{
        outline: none;
      }
    }
  }
}
.react-tooltip {
  white-space: normal;
  max-width: 90%;
  text-align: center;
  z-index: 99999;
}

.bm-chat-settings{
  .bm-help-icon{
    font-size: 16px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
  }

  .bm-chat-setting{
    margin: 20px 0;

    label{
      font-size: 13px;
      font-weight: bold;
    }

    .form-table{
      label{
        font-weight: normal;
      }

      .bm-html-allowed{
        color: gray;
        font-size: 12px;
        margin-left: 5px;
      }

      th{
        width: 300px;
      }

      td{
        input[type="text"]{
          width: 100%;
        }
      }
    }
  }

  .bp-better-messages-roles-list {
    max-height: 250px;
    overflow: auto;
    background: white;
    padding: 15px;
    border: 1px solid #ccc;
  }

  .better-messages-roles-table{
    width: 100%;
    background: white;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 10px 0;

    tr, th{
      text-align: left;
    }

    .bm-role-checkbox{
      text-align: center;
    }
  }
}

.bp-better-messages-banner{
  display: block;
  margin: 10px 0;
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #f9e4a6;
  padding: 15px;
  line-height: 24px;
  max-width: 550px;
}
.bp-better-messages-banner.bm-error{
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.bp-better-messages-banner.bm-ok{
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}


.bm-ai-chat-bot-settings {
  .bm-help-icon {
    font-size: 16px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
  }

  .bm-ai-chat-bot-setting {
    margin: 20px 0;

    label {
      font-size: 13px;
      font-weight: bold;
    }

    .form-table {
      label {
        font-weight: normal;
      }

      .bm-html-allowed {
        color: gray;
        font-size: 12px;
        margin-left: 5px;
      }

      th {
        width: 120px;
      }

      td {
        input[type="text"] {
          width: 100%;
        }
      }
    }
  }
}


.bm-admin-error{
  display: block;
  margin: 10px 0;
  border: 1px solid #f5c6cb;
  color: #721c24;
  background-color: #f8d7da;
  padding: 15px;
  line-height: 24px;
}

.bm-admin-columns{
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row;


}

.bm-info-banner{
  display: block;
  margin: 10px 0;
  border: 1px solid #dcdcdc;
  color: #313131;
  background-color: #f8f9fa;
  padding: 15px;
  line-height: 24px;

  p{
    margin: 0;
  }
}

.better-messages-location-select{
  max-width: 350px;
}