@import "compass";
@import "../webfonts/fontawesome.scss";
@import "../webfonts/solid.scss";

/*
**
**  Cricket Client Landing Styles
**  Author: Justin Henderson
**  https://rooocket.com
**
**  Table of Contents
**  1.  Variables
**  2.  Basic Elements/Helper Classes
**  3.  Header
**  4.  Footer
**  5.  Content
**  6.  Forms/Search
**  7.  Cards
**  8.  Tables
**  9.  Datepicker
**  10. Client Landing Page
**
*/

/*
**  Variables
*/

$fa-font-path:   "../webfonts";

$blue-primary:   #0288D1;
$blue-lighter:   #80D8FF;
$blue-darker:    #0D6290;
$orange-primary: #FF9800;
$green-primary:  #4DB6AC;
$green-lighter:  #5ED499;
$gray-primary:   #66656E;
$gray-lighter:   #E5E5E5;
$copy-primary:   #222;
$font-primary:   'Raleway', Helvetica, Arial, sans-serif;

/*
**  Basic Elements/Helper Classes
*/

html {
  font-size:62.5%;
}

body {
  background-color:#E4E4E4;
  color:$copy-primary;
  font-family:$font-primary;
  font-size:1.6rem;
  font-weight:400;
  line-height:1.6;
}

h1, h2, h3,
h4, h5, h6 {
  font-weight:700;
}

h1 {
  font-size:3.2rem;
  margin:1em auto .5em;
}

h2 {
  font-size:2.2rem;
  margin:1em auto .5em;
}

h3 {
  font-size:1.8rem;
  margin-top:1em;
  margin-bottom:.5em;
}

h4 {
  font-size:1.6rem;
}

h5 {
  font-size:1.4rem;
}

h6 {
  font-size:1.4rem;
}

p {
  margin-bottom:1.5em;
}

a, button {
  color:inherit;
  font-weight:700;
  text-decoration:underline;
  transition:all .3s ease-in-out;
}

blockquote {
  position:relative;
  font-size:1.8rem;
  padding-left:6em;

  &:before {
    content:'“';
    position:absolute;
    top:-.1em;
    left:0;
    color:$green-primary;
    font-size:24rem;
    font-weight:700;
    line-height:1;
  }

  > .cite::before {
    content:'';
    display:block;
    width:40px;
    height:1px;
    background-color:$blue-lighter;
    margin-bottom:1.5em;
  }
}

/*
**  Specific Elements/Helper Classes
*/

.main-content {
  min-height:80vh;
}

.container-fluid {
  padding:4em 0;
}

.link {
  color:$blue-primary;
  font-size:1.4rem;
  font-weight:400;
}

.btn {
  color:#fff;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing: .02em;
  padding:.5em 1.25em;
  border-radius:1.5em;
  text-decoration:none;
}

.btn-primary {
  background: $blue-primary;
  background: -moz-linear-gradient(left, $blue-primary 0%, $blue-lighter 100%);
  background: -webkit-linear-gradient(left, $blue-primary 0%,$blue-lighter 100%);
  background: linear-gradient(to right, $blue-primary 0%,$blue-lighter 100%);
  border:none;

  &:hover {
    background-color:$blue-darker;
  }
}

.btn-secondary {
  background-color:$orange-primary;
  border-color:$orange-primary;
}

.btn-tertiary {
  background-color:$blue-primary;
  min-width:8em;
}

.btn-outline {
  color:$blue-primary;
  border-color:$blue-primary;

  &:hover {
    color:#fff;
    background-color:$blue-primary;
  }
}

.btn-inline {
  color:$copy-primary;
  font-weight:normal;
  padding:0;

  &:after {
    content:"\f105";
    font-family:FontAwesome;
    padding-left:.5em;
  }

  &:hover {
    color:$blue-primary;
  }
}

.alert-primary {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  background-color:#C7EFEB;
  color:$copy-primary;
  border-color:$green-primary;
}

.alert-primary.text-left {
  justify-content: flex-start;
}

.alert-primary p,
.alert-secondary p {
  margin:0;
}

.alert-secondary {
  display:flex;
  justify-content: center;
  align-items:center;
  color:#fff;
  font-weight:700;
  font-size:1.4rem;
  background: $blue-primary;
  background: -moz-linear-gradient(left, $blue-primary 0%, $green-primary) 100%;
  background: -webkit-linear-gradient(left, $blue-primary 0%,$green-primary) 100%;
  background: linear-gradient(to right, $blue-primary 0%,$green-primary) 100%;
  min-width: 7em;
  border:none;
}

.alert-warning {
  background-color:#FFEACC;
  padding:1em;
  border:1px solid $orange-primary;
  border-radius:5px;
}

.bg-green {
  background-color:rgba(77, 182, 172, .3);
}

.bg-white {
  background-color:rgba(255,255,255, .7);
}

.light {
  color:#fff;
}

.dark-bg {
  color:#fff;
}

.overlay {
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  background-color:rgba(0,0,0,.85);
  margin:6em 0;
  padding:6em 0;
}

.separator-green {
  border-bottom:20px solid $green-primary;
}

.card {
  background-color:rgba(255,255,255,.9);
  max-width:820px;
  margin:2em auto;
  padding:2em;
}

.block {
  display:block;
}

.req-indicator {
  display:flex;
  justify-content: flex-end;
  font-weight:700;
}

.req-indicator span {
  background-color:#fff;
  padding:.25em .5em .25em .25em;
}

.list-group {
  font-size:1.2rem;

  a.list-group-item {
    position:relative;
    font-weight:normal;
    text-decoration:none;
    padding-left:.5em;
    padding-right:3em;

    &:after {
      content:"\f054";
      font-family:FontAwesome;
      font-size:10px;
      color:#fff;
      line-height:1;
      width:24px;
      height:24px;
      background-color:$blue-primary;
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      right:.5em;
      display:flex;
      justify-content:center;
      align-items:center;
      border-radius:100em;
    }
  }
}

@media (min-width: 1200px) {
  .container {
    max-width:1200px;
  }
}

/*
**  Header
*/

header {
  background-color:#fff;
  border-bottom:1px solid rgb(207,228,238);

  .navbar {
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:1em 2em;

    .navbar-collapse {
      display:flex;
      justify-content: flex-end;

      &.collapse {
        display:none;
      }

      .nav {
        font-family:$font-primary;
        font-weight:700;

        .nav-item {
          margin:0 .1em;
          padding:0 .1em;

          .nav-link {
            color:$copy-primary;
            padding:.5em 1em;
            text-decoration: none;
            text-transform: uppercase;
            border:2px solid transparent;

            &:hover {
              color:#fff;
              background-color:$blue-primary;
              border-color:$blue-primary;
            }
          }

          &.account {
            .nav-link {
              color:#fff;
              background-color:$blue-primary;
              margin-right:0;
              border:2px solid $blue-primary;

              &:hover {
                color:$blue-primary;
                background-color:transparent;
              }
            }
          }
        }
      }
    }

    .navbar-toggler {
      font-size:1.5rem;
      padding:.25em .5em;
    }
  }
}



@media(max-width:991px) {
  header {
    .navbar {
      .navbar-collapse {
        &.collapse.show {
          display:flex;
        }

        .nav {
          .nav-item {
            flex-basis:100%;
            text-align:right;
            margin:0;
            padding:0;

            &.username {
              padding-left:0;
              border:none;
            }
          }
        }
      }
    }
  }
}

/*
** Footer
*/

footer {
  background-color:$green-primary;
  margin-top:3em;
  padding:2em 1em;

  .container {
    display:flex;
    justify-content: space-between;
    align-items: center;

    .language-selector {
      display:flex;

      a, form {
        margin:0 1em;
        text-decoration:none;

        select {
          font-size:1.4rem;
        }
      }
    }

    p {
      margin:0;
    }
  }
}

@media (max-width: 575.98px) {
  footer {
    .container {
      flex-wrap:wrap;

      .language-selector {
        flex-basis:100%;
        margin-bottom:1em;
      }
    }
  }
}


/*
**  Content
*/

.main-content {
  background-color:#fff;
  padding:15px;
}

/*
**  Forms/Search
*/

form.search {
  background-color:#fff;
  line-height:1.6;
  border-radius:100em;
  border:1px solid #E4E4E4;
  transition:border .3s ease-in-out;

  .form-group {
    display:flex;
    margin:0;
    padding:.25em .5em;

    input {
      font-size:1.4rem;
      border:none;

      &:focus {
        outline:none;
        box-shadow:none;
      }
    }

    .input-group-btn {
      display:flex;
      align-items:center;

      .btn-search {
        color:#66656E;
        font-size:12px;
        line-height:1;
        padding:0 .5em 0 0;
        border-radius:0;
        border:none;
      }
    }
  }

  &:focus-within {
    border-color:$blue-primary;
  }
}

.toolbar {
  .form-group {
    margin:0 .5em;

    &:first-child {
      margin-left:0;
    }

    input, select {
      border-radius:100em;
      padding-left:1em;
      padding-right:2em;

      &:focus {
        outline:none;
        box-shadow:none;
        border-color:$blue-primary;
      }
    }

    .form-control {
      font-size:1.4rem;
    }

    &.search {
      position:relative;

      &:after {
        content:"\f002";
        font-family:FontAwesome;
        color:#9A9A9A;
        position:absolute;
        top:50%;
        right:1em;
        transform:translateY(-50%);
        width:12px;
        height:12px;
        font-size:12px;
        line-height:1;
      }
    }

    &.date {
      position:relative;

      &:after {
        content:"\f133";
        font-family:FontAwesome;
        color:#9A9A9A;
        position:absolute;
        top:50%;
        right:1em;
        transform:translateY(-50%);
        width:12px;
        height:12px;
        font-size:12px;
        line-height:1;
      }
    }
  }
}

/*
**  Cards
*/

.card {
  max-width:none;
  padding:1em;
}

/*
**  Tables
*/

.toolbar {
  margin-bottom:1em;
}

.table {
  font-size:1.4rem;

  .btn-primary {
    font-size:1.2rem;
    font-weight:normal;
    padding:.4em 1.25em;
  }

  tr {
    &:hover {
      background-color:lighten($blue-lighter, 10%) !important;
    }

    th, td {
      vertical-align: middle;
    }
  }

  &.table-striped {
    tbody {
      tr:nth-of-type(odd) {
        background-color:#F1F1F1;
      }
    }
  }

  &.list-table {
    th:not(:first-of-type),
    th:not(:last-of-type),
    td:not(:first-of-type),
    td:not(:last-of-type) {
      text-align:center;
    }

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

    th:last-of-type,
    td:last-of-type {
      text-align:right;
    }

    thead {
      th {
        color:$blue-primary;
        border-top:none;
        border-bottom:1px solid $blue-primary;
      }
    }

    tbody {
      tr {
        th, td {
          padding-left:2em;
          padding-right:2em;
        }

        th {
          background-color:#fff;
        }

        &.alert {
          td:nth-of-type(1),
          td:nth-of-type(4),
          td:nth-of-type(5) {
            color:#DD0000;
            font-weight:700;
          }
        }

        &.totals {
          background-color:#E4E4E4;

          td {
            font-weight:bold;
          }
        }

        &.sub-cat {
          td:first-of-type {
            padding-left:3.5em;
          }
        }
      }
    }

    tfoot {
      background-color:lighten($blue-lighter, 10%);
    }
  }
}

/*
**  Datepicker
*/

.datepicker {
  font-family:Arial, sans-serif;

  .datepicker-days {
    font-size:1.2rem;

    table {
      thead {
        text-transform:uppercase;
        letter-spacing:.04em;
      }

      tbody {
        td {
          border-radius:0;
          padding:.3em .6em;

          &.active {
            background:$blue-primary;
          }
        }
      }
    }
  }
}

/*
**  Client Landing Page
*/

.account-info {
  position:relative;

  nav {
    display:inline-block;

    button {
      color:#fff;
      background-color:$blue-primary;
      font-size:1.8rem;
      line-height:1.2;
      text-align: left;
      text-decoration:none;
      padding:.5em 1em;

      &:focus {
        box-shadow:none;
        outline:none;
      }

      span:after {
        content:"\f0da";
        font-family:FontAwesome;
        padding-left:.5em;
      }
    }
  }

  #account-info-sidebar {
    position:absolute;
    z-index:9999;
    left:0;
    top:0;
    background-color:#fff;
    width:auto;
    max-width:12em;
    max-height:100vh;
    word-break:break-word;
    overflow-y:scroll;
    border:1px solid #e4e4e4;
    box-shadow:0 2px 2px 3px rgba(0,0,0,.05);

    nav {
      display:block;
      margin-bottom:1em;

      button {
        width:100%;
      }
    }

    hr {
      margin:1.5em 0;
      border-top-style:dotted;
    }
  }
}

.timeline {
  .entry {
    min-height:6em;
    margin-bottom:1em;

    div[class*="col"]:first-child {
      padding-right:5px;
      overflow:hidden;

      &:after {
        content:"";
        display:block;
        width:1px;
        height:100%;
        background-color:#e4e4e4;
        margin:1em auto 0;
      }
    }

    .profile-image {
      border-radius:100em;
    }

    .meta {
      font-size:1.4rem;
      color:#a6a6a6;
      margin-bottom:0;
    }

    &:last-of-type {
      min-height:0;

      div[class*="col"]:after {
        display:none;
      }
    }
  }
}

.solid-start {
  border-color:$blue-primary;
}