@import 'functions';
@import 'variables';

// VARIABLES
$footerColor: #898989;
$footerBorderColor: #f1f1f1;
$tableColor: #000;
$tableFirstHeaderColor: #898989;
$tableBorderColor: #d4d4d9;

.twofas-admin-settings {
  width: 100%;

  &-buttons {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
  }

  .twofas-card {
    &-body {
      max-width: 100%;
      padding: 0;

      &-content {
        padding: 22px 40px 0px;

        @media all and (max-width: 960px) {
          padding: 22px 30px 0;
        }

        @media all and (max-width: 800px) {
          padding: 22px 20px 0;
        }

        @media all and (max-width: 680px) {
          padding: 20px 20px 0;
        }

        table {
          border-bottom: 1px solid $tableBorderColor;
          border-collapse: collapse;
          width: 100%;

          @media all and (max-width: 680px) {
            border-bottom: 0;
            display: block;

            tbody,
            tr {
              display: block;
            }

            tr {
              border-bottom: 1px solid $tableBorderColor;
              margin-bottom: 10px;
              padding-bottom: 10px;

              &:last-of-type {
                border-bottom: 0;
                margin-bottom: 0;
                padding-bottom: 0;
              }
            }

            td {
              align-items: center;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              min-height: 22px;
              width: 100%;
            }
          }

          thead {
            @media all and (max-width: 680px) {
              display: none;
            }

            tr {
              vertical-align: bottom;

              th {
                border-bottom: 1px solid $tableBorderColor;
                color: $tableColor;
                font-size: px-to-rem(16);
                font-weight: 600;
                line-height: px-to-rem(20);
                padding: 0 5px 23px;

                @media all and (max-width: 960px) {
                  font-size: px-to-rem(14);
                  line-height: px-to-rem(18);
                }

                &:first-of-type {
                  color: $tableFirstHeaderColor;
                }
              }
            }
          }

          tbody {
            tr {
              &:first-of-type {
                td {
                  padding-top: 34px;

                  @media all and (max-width: 960px) {
                    padding-top: 25px;
                  }

                  @media all and (max-width: 680px) {
                    padding-top: 0;
                  }
                }
              }

              td {
                color: $tableColor;
                font-size: px-to-rem(14);
                line-height: px-to-rem(17);
                padding-bottom: 34px;
                text-align: center;

                @media all and (max-width: 960px) {
                  padding-bottom: 25px;
                }

                @media all and (max-width: 680px) {
                  margin-bottom: 5px;
                  padding-bottom: 0;
                  text-align: left;

                  &::before {
                    content: attr(data-rwd-desc);
                  }

                  &:nth-of-type(1) {
                    font-weight: 700;
                  }

                  &:nth-of-type(4) {
                    margin-bottom: 0;
                  }

                  &::before {
                    margin-right: 5px;
                  }

                  p {
                    display: inline;
                  }
                }
              }
            }
          }

          tr {
            th,
            td {
              &:first-of-type {
                text-align: left;
              }

              &:last-of-type {
                text-align: right;

                @media all and (max-width: 680px) {
                  text-align: left;
                }
              }
            }
          }
        }
      }

      &-footer {
        border-top: 1px solid $footerBorderColor;
        padding: 22px 0;

        @media all and (max-width: 960px) {
          padding: 18px 0;
        }

        p {
          color: $footerColor;
          font-size: px-to-rem(14);
          font-weight: 600;
          line-height: px-to-rem(16);
          margin: 0;
          padding: 0;
          text-align: center;

          @media all and (max-width: 960px) {
            font-size: px-to-rem(12);
          }

          a {
            color: $tf-theme-color;
          }
        }
      }
    }
  }

  h3 {
    margin-bottom: 23px;
  }
}