@import "../pages/mixins";

.custom-dialog-sned {
  & .ReactTable {
    @add-mixin font-xxs;
    border-width: 0px;
    color: #888888;
    & .rt-table {
      overflow-y: scroll;
      height: 60vh;
      & .text-center {
        text-align: center;
      }
      & .rt-tbody {
        overflow: visible;

        & .rt-tr-group {
          max-height: 30px;
        }
      }
    }

    & .-pageJump {
      border-radius: 10px;
      & input {
        background-color: #44464a;
        color: #888888;
      }
    }
  }

  &.bp3-dialog {
    background: #2f2f37 !important;
    width: 950px;
    &.sned-1 {
      & .bp3-dialog-header {
        background-color: #0d659d !important;
        & .bp3-dialog-header-title,
        & .bp3-icon-small-cross::before {
          color: #ffffff !important;
        }
      }

      & .-next,
      & .-previous {
        border-radius: 4px;
        background-color: #0d659d !important;
        color: #ffffff !important;

        & button {
          color: #ffffff;
        }

        & button:disabled {
          background-color: #2f2f37 !important;
          opacity: 0.95;
          color: #222222;
        }
      }

      & .rt-thead {
        background-color: #0f79bc !important;
        color: #ffffff;
      }
    }
    &.sned-2 {
      & .bp3-dialog-header {
        background-color: #00acbc !important;
        & .bp3-dialog-header-title,
        & .bp3-icon-small-cross::before {
          color: #444444;
        }
      }

      & .rt-thead {
        background-color: #00e3f9 !important;
        color: #444444;
      }

      & .-next,
      & .-previous {
        border-radius: 4px;
        background-color: #00acbc !important;
        color: #444444 !important;

        &:hover {
          color: #444444 !important;
        }

        & button {
          color: #444444;
          &:hover {
            color: #444444 !important;
          }
        }

        & button:disabled {
          background-color: #2f2f37 !important;
          opacity: 0.95;
          color: #222222;
        }
      }
    }
    &.sned-3 {
      & .bp3-dialog-header {
        background-color: #8debcc !important;
        & .bp3-dialog-header-title,
        & .bp3-icon-small-cross::before {
          color: #444444;
        }
      }

      & .rt-thead {
        background-color: #98ecd1 !important;
        color: #444444;
      }

      & .-next,
      & .-previous {
        border-radius: 4px;
        background-color: #8debcc !important;
        color: #444444 !important;

        &:hover {
          color: #444444 !important;
        }

        & button {
          color: #444444;
          &:hover {
            color: #444444 !important;
          }
          &:disabled {
            background-color: #2f2f37 !important;
            opacity: 0.95;
            color: #222222;
          }
        }
      }
    }
  }

  & .bp3-dialog-body {
    max-height: 70vh;
    /* overflow-y: hidden;
    overflow: scroll!important; */
    margin: 0px;
    /* padding: 20px; */

    p {
      margin: 0px;
      padding: 10px 0px;
    }
  }

  & hr {
    margin: 5px 0px !important;
  }
}

@media (max-width: 950px) {
  .custom-dialog-sned {
    &.bp3-dialog {
      width: 700px;
    }
  }
}

@media (max-width: 800px) {
  .custom-dialog-sned {
    &.bp3-dialog {
      width: 500px;
    }
  }
}

@media (max-width: 650px) {
  .custom-dialog-sned {
    &.bp3-dialog {
      width: 400px;
    }
  }
}

@media (max-width: 400px) {
  .custom-dialog-sned {
    &.bp3-dialog {
      width: 300px;
    }
  }
}
