@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.TableWrapper {
  .TablePartWrap{
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-track {
      background-color: $whiteColor;;
      border-radius: 12px;
    }
    &::-webkit-scrollbar-thumb {
      background: $grey344Color;
      border-radius: 12px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
      border-radius: 12px;
    }
    table {
      thead {
        tr {
          th {
            border-right: 1px solid #eaecf0;
            border-bottom: 1px solid #eaecf0;
            padding: 15px;
            font-weight: $fw500;
            vertical-align: middle;
            text-align: center;
            @media screen and (min-width: $lg) {
              padding: 24px;
            }
            &:first-child {
              text-align: left;
              column-count: 1;
            }
            &:last-child {
              border-right: 0;
            }
          }
        }
      }
      tbody {
        tr {
          td {
            padding: 12px 15px;
            text-align: center;
            border-right: 1px solid #eaecf0;
            border-bottom: 1px solid #eaecf0;
            @media screen and (min-width: $lg) {
              padding: 16px 24px;
            }
            &:first-child {
              column-count: 1;
              text-align: left;
            }
            &:last-child {
              border-right: 0;
            }
            p {
              color: $blackColor;
              line-height: normal;
            }
            span {
              line-height: normal;
              color: $grey667Color;
              width: 100%;
            }
            .IconSpan {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 28px;
              height: 28px;
              border-radius: 100%;
              &.IconChekSpan {
                background-color: #dcfae6;
              }
              &.IconCrossSpan {
                background-color: #fecdca;
              }
              i {
                width: 12px;
                height: 12px;
                @media screen and (min-width: $sm) {
                  width: 14px;
                  height: 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}