/**
 * The page base.
 */

body {
  background-color: #eee9d9;
}

.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flexpage {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}

/**
 * First section of the main page, containing the logo, login/registration buttons, and a down arrow.
 */

.intro-page {
  @extend .flexpage;
  background: linear-gradient(#070a15, #252b46);
  min-height: 100vh;
  flex-direction: column;
  -webkit-flex-direction: column;
}

/**
 * Second section of the main page, containing the three descriptive column and flaticons (http://www.flaticon.com/authors/madebyoliver).
 */

.info-page {
  @extend .flexpage;
  background: linear-gradient(#F1D4AF, #eee9d9);
  flex-direction: row;
  -webkit-flex-direction: row;
  min-height: 65vh;
  @include break-small {
   flex-direction: column;
   -webkit-flex-direction: column;
 }
}

.info-page-item {
  margin: 100px 50px 50px;
}

/**
 * Page with the technical details.
 */

.technical-page {
  background: #24242f;
  min-height: 30vh;
}

.flex-table {
  display: flex;
  margin: 50px auto;
  max-width: 800px;
  flex-wrap: wrap;
  padding: 0 10px;
  @include break-small {
    max-width: 400px;
    flex-direction: column;
  }
}

.flex-table-header, .flex-table-value {
  width: 200px;
  float: left;
  box-sizing: border-box;

}

.flex-table-row {
  max-width: 400px;
}

/**
 * Third section of the main page, containing the link to the Github page.
 */

.footer-page {
  @extend .flexpage;

  flex: 1;
  background-color: #e2f2f0;
  flex-direction: column;
  -webkit-flex-direction: column;
  min-height: 20vh;

  @include break-small {
    height: 100%;
  }
}

/**
 * Login and register pages.
 */

.login-page {
  @extend .flexpage;

  background: linear-gradient(#070a15, #252b46);
  flex-direction: column;
  -webkit-flex-direction: column;
}

.login-page-form {
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  border-top: 0;
  border-bottom: 3px solid #d2d5e7;
  border-right: 3px solid #d2d5e7;
  border-left: 0;
  padding: 50px;
}

/**
 * The panel pages
 */
.panel-page {
  margin: auto;
  width: 800px;
  position: relative;

  @include break-small {
    width: 100%;
  }
}

.panel-content {
  background: #fff;
  color: black;
  box-sizing: border-box;
  border-bottom: 3px solid #d2d5e7;
  border-right: 3px solid #d2d5e7;
  padding: 15px;
  margin-top: 20px;

  .buttons {
    float: right;
    background-color: #53257e;

    button {
      padding: 10px;
      font-size: 15px;
    }
  }


  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.invite-create {
  float:right;
}

.certificate-create,
.invite-create button {
  font-size: 16px;
  font-weight: normal;
  background: hsl(271, 55%, 32%);
  color: white;
  padding: 5px;
  float: right;
  text-decoration:none;
  cursor: pointer;
  font-family: 'Karla', sans-serif;
}

.panel-content > h1,
.panel-content > .title > h1 {
  margin: 0 0 25px;
}

.panel-content > h1 + .undertone,
.panel-content > .title > h1 + .undertone {
  margin-top: -25px;
  color: #999999;
  margin-bottom: 25px;
}

.certificate-list,
.servers,
.invites {
  margin: 0;
  list-style: none;
  padding: 0;

  li {
    border-left: 3px #e3b2a6 solid;
    padding-left: 5px;
    margin-bottom: 10px;
    position: relative;

    .text {
      .expiry {
        font-size: 14px;
        color: hsl(0, 0%, 60%);
      }
    }

    .revoke-q {
      display: none;
    }

    .actions, .revoke-q {
      position: absolute;
      right: 0;
      bottom: 0;

      span {
        transition: .2s;
        cursor: pointer;
        padding: 5px;
        float: left;
        display: block;

        a,
        button {
          background: none;
          font-size: 100%;
          font-family: 'Karla', sans-serif;
          color: black;
          text-decoration: none;
          display: block;
          margin: -5px;
          padding: 5px;
          cursor: pointer;
        }
      }

      .certificate-delete,
      .yes,
      .delete {
        &:hover {
          background: hsl(0, 62%, 64%);
        }
      }

      .certificate-download,
      .certificate-download-key,
      .no,
      .copy,
      .edit,
      .details {
        &:hover {
          background: #aca4bc;
        }
      }

      .no {
        width: 65px;
        text-align: center;
      }
    }
  }
}