.xtfw-admin-tabs-page .xtfw-admin-tabs-panel.xtfw-system-status-tab {
  *{
    box-sizing: border-box;
  }
  h3 {
    margin-bottom: 10px;

    .xtfw-heading-badge{
      font-size:10px;
      margin-left: 8px;
      padding:5px 10px;
      background: green;
      border-radius:3px;
      color: #fff;
      position: relative;
      top: -2px;
    }
  }

  .xt-framework-system-info{

    h3{
      .info-link,
      .action-link{
        font-size: 12px;
        margin-left:10px;
        a{
          text-decoration: none;
          box-shadow: none;
        }
        .xtfw-help-tip {
          position: relative;
          top: 4px;
        }
      }
      .action-link{
        float: right;
      }
    }
    mark{
      background: initial;
      &.yes{
        color: #389438;
      }
      &.error{
        color: #c74f4f;
      }
    }
    table {

      margin-bottom: 30px;

      td.requirement-value {
        vertical-align: middle;

        code{
          display: inline-block;
          margin: 1px;
        }

        &.align-right{
          text-align: right;
        }

        &.success > *{
          color: #389438;
        }
        &.error > *{
          color: #c74f4f;
        }

        @media screen and (max-width: 782px) {

          code{
            display: block;
            margin: 5px 1px;

            ~ br{
              display:none;
            }
          }

          &.hide-on-mobile {
            display:none;
          }
          &.align-right{
            text-align: inherit;
          }
        }

        .xtfw-badge {
          float: none;
          padding: 2px 8px;
          min-width:100px;
          margin-left: 0;
          margin-right: 5px;
          @media screen and (max-width: 1139px) {

            & {
              float: none;
              margin-bottom: 5px;
            }
          }
        }
        .xtfw-badge-version{
          float: right;
          font-size: 15px;
        }

        .xtfw-market-logo {
          height: 17px;
          vertical-align: middle;

          &.xtfw-market-envato{
            height: 13px;
            position: relative;
            top: -2px;
          }
        }

      }
    }

    .template-overrides {
      margin-bottom: 10px;

      .arrow-down,
      .arrow-up{
        float:right;
        cursor: pointer;
      }

      .arrow-down{
        display: none;
      }
      .arrow-up{
        display: block;
      }

      thead{
        cursor: pointer;
        background: #eaeaea;

        th mark{
          margin-left: 15px;
          font-size: 10px;
          font-weight: 500;
          background: #c74f4f!important;
          border-radius: 5px;
          color: #fff!important;
          padding: 4px 7px;
        }
      }

      &:not(.active-meta-box) {
        thead {
          th {
            border-bottom: 0;
            background: #ffffff;

            .arrow-down{
              display: block;
            }
            .arrow-up{
              display: none;
            }
          }
          &:hover{
            th{
              background: #eaeaea;
            }
          }
        }

        tbody {
          display: none;
        }
      }
    }

    @media screen and (max-width: 782px) {
      .xt-plugins-table {

        thead{
          display: none;
        }

        th {
          font-weight: 700;
          padding-top: 20px;
          padding-left: 20px;
        }

        td {
          padding: 5px 20px;

          &:last-child {
            padding-bottom: 20px;
          }
        }

        th,
        td {
          display: block;
          width: 100%;
        }
      }
    }

  }
}

