page-grid {

  ion-toolbar {

    .toolbar-title {
      color: #ffffff;
      font-size: 2.42em;
      font-weight: 700;
      line-height: 1.29;
      text-decoration: underline;
    }
  }

  .grid {

    .row {

      .col {

        &.profile {
          background-size: cover;
          border: 1px solid #000000;
          box-sizing: border-box;
          padding: 0 0 33% !important;
          position: relative;

          .username {
            background-size: cover;
            bottom: 0.25rem;
            box-sizing: border-box;
            color: #ffffff;
            display: inline-block;
            left: 0.5rem;
            overflow: hidden;
            position: absolute;
            right: 0.25rem;
            text-overflow: ellipsis;
            text-shadow: 0 0 3px rgba(0, 0, 0, 1);
            white-space: nowrap;

            &::before {
              border: 0.125rem solid #acacac;
              border-radius: 1rem;
              bottom: 0.125rem;
              content: '';
              display: inline-block;
              height: 0.8rem;
              margin-right: 0.5rem;
              position: relative;
              vertical-align: middle;
              width: 0.8rem;
            }

            &.online {

              &::before {
                background-color: #00ff00;
                border-color: #00ff00;
              }
            }
          }
        }
      }
    }
  }
}