.DashboardPage {
  background: @control-bg;


  & > .container {
    max-width: 100%;
  }

  h2 {
    margin-top: 0;
  }

  .DashboardPage--Section {
    background: @body-bg;
    padding: 10px 1.25px;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .DashboardGraph {

    .DashboardGraph--Category {
      color: @muted-color;
      text-transform: uppercase;
      width: 30%;
      display: inline-block;
      text-align: center;

      .color {
        content: " ";
        display: inline-block;
        width: 11px;
        height: 11px;
        border-radius: 3px;
        margin-right: 4px;
      }

      .number {
        width: 100%;
        font-size: 1.8em;
        color: @text-color;
        color: #484848;
      }

      &.Category--Users .color {
        background-color: #00b3ee;
      }

      &.Category--Discussions .color {
        background-color: orange;
      }

      &.Category--Posts .color {
        background-color: yellow;
      }
    }

    .DashboardGraph--Graph {

      .DashboardGraph--Month {
        width: 8%;
        display: inline-block;
        text-align: center;

        .bar {
          margin-bottom: 10px;
        }
        .name {
          color: #ACBAC7;
          text-transform: capitalize;
        }
      }

    }

  }

  .DashboardPage--Section.Versions {

    padding: 1px 1.25px;

    ul {
      list-style-type: none;

      li {
        display: inline;
        margin-right: 20px;
      }
    }

    .DashboardPage--ExtensionUpdates {

      button {
        width: inherit;
        -webkit-transition: width 0.5s ease-in-out;
        -moz-transition: width 0.5s ease-in-out;
        -ms-transition: width 0.5s ease-in-out;
        -o-transition: width 0.5s ease-in-out;
        transition: width 0.5s ease-in-out;

        padding: 7px 10px;

        &.hidden {
          //width: 0px !important;
        }
      }
    }
  }

  .Widget.DashboardExtensions {
    .DashboardExtensions--Title,
    .DashboardPageConfigurations--Title {
      text-transform: uppercase;
      color: @muted-color;
    }

    .DashboardExtensions--Title {

      > span {
        font-size: 1.2em;
        margin-right: 10px;
      }

      button {
        margin-top: -5px;
        float: right;
        margin-right: 0;
      }
    }

    .DashboardExtensions--List {
      clear: both;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .DashboardExtensions--Item {
      display: inline-block;
      width: 120px;
      height: 150px;
      margin-top: 15px;
      margin-right: 20px;
      cursor: pointer;
      transition: opacity 250ms linear;

      &.disabled {
        opacity: 0.5;
      }


      .DashboardExtensionsItem-icon {
        width: 120px;
        height: 120px;
        background: #e4eff6;
        color: #668599;
        border-radius: 4px;
        display: inline-block;
        font-size: 60px;
        line-height: 120px;
        margin-bottom: 5px;

        i {
          display: inline-block;
          width: 100%;
          text-align: center;
        }
      }

      .DashboardExtensionsItem-title {
        display: block;
        height: 20px;
        text-overflow: ellipsis;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}

.ExtensionUpdatesModal {
  table {
    clear: both;
    margin-bottom: 20px;
    margin-left: 5%;

    tbody tr {
      animation: slide-down-in 500ms ease-in 1;
    }

    tr {

      td:first-child {
        width: 40%;
      }

      td {
        width: 25%
      }
    }
  }

  .ExtensionUpdatesModal--Error td:last-of-type {
    color: red;
  }

}

.DashboardExtensionInfoModal {

  .Modal-header {
    display: none;
  }

  .Modal-content {
    background-color: #EDF2F7;
  }

  .DashboardExtensionInfo-Main {
    background-color: #EDF2F7;
    min-height: 170px;

    .DashboardExtensionInfoMain-icon {
      width: 125px;
      height: 125px;
      margin: 20px;
      background: #e4eff6;
      color: #668599;
      border-radius: 4px;
      display: inline-block;
      font-size: 60px;
      float: left;
      line-height: 125px;

      i {
        display: inline-block;
        width: 100%;
        text-align: center;
      }
    }

    .DashboardExtensionInfoMain-title {
      color: #5E7795;
      font-size: 20px;
      display: inline-block;
      margin-right: 30px;
      font-weight: 500;
      margin-bottom: 10px;
    }

    .DashboardExtensionInfoMain-name,
    .DashboardExtensionInfoMain-version {
      color: #B8C4CF;
      font-size: 12px;
      display: inline-block;
      margin-right: 15px;
    }

    .DashboardExtensionInfoMain-description {
      color: #9FAEBC;
      font-size: 16px;
    }

    .DashboardExtensionInfoMain-useful {
      margin-bottom: 0;

      & > p {
        color: #98A7B6;
        font-size: 12px;
        display: inline-block;
        margin-right: 10px;

        a {
          color: @link-color;
        }
      }
    }

    .DashboardExtensionInfoMain-enabled {
      color: #9EADBC;
      text-transform: uppercase;
      font-weight: 600;

      .Checkbox {
        margin-left: 160px !important;
      }
    }
  }
}

@media (max-width: 1006px) {

    .ExtensionUpdatesModal {

      .Modal-header {
        padding-bottom: inherit;
        border-bottom: none;
      }

    }

  }

@keyframes slide-down-in {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50%{
    transform: translateY(8%);
  }
  65%{
    transform: translateY(-4%);
  }
  80%{
    transform: translateY(4%);
  }
  95%{
    transform: translateY(-2%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}