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

/*
**
**  Cricket Attorney Dashboard 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. Attorney Dashboard Page
**
*/

/*
**  Variables
*/

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

$font-primary:    "Nunito", Helvetica, Arial, sans-serif;
$copy-primary:    #222;

$red-primary:     #DB2B30;
$blue-primary:    #73ACD2;
$purple-primary:  #49485D;
$purple-lighter:  #727191;
$purple-darker:   #262636;
$green-primary:   #8DC4BE;
$gray-primary:    #66656E;
$gray-lighter:    #E5E5E5;
$sand:            #DED0AB;

/*
**  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;
}

a {
  &:hover {
    color:$purple-lighter;
  }
}

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:$purple-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;
  border:none;

  &:hover {
    background-color:$purple-primary;
  }
}

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

  &:hover {
    background-color:$purple-darker;
    border-color:$purple-darker;
  }
}

.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;
  min-width: 7em;
  border:none;
}

.alert-warning {
  color:#fff;
  background-color:$purple-lighter;
  padding:1em;
  border:1px solid $purple-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 {
            min-width:10em;
            text-align: center;

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

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

            .dropdown-menu {
              font-size:1.6rem;
              min-width:10em;
              text-align: center;
              padding:0;

              .nav-link {
                padding:.5em;
                border:none;
                border-bottom:1px solid #fff;
              }
            }
          }
        }
      }
    }

    .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:$purple-darker;
  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 {
  .form-group {
    display:flex;
    border:1px solid #707070;
    border-radius:10px;
    overflow:hidden;

    input {
      font-size:1.6rem;
      line-height:1.6;
      border:none;
      outline:none;
      box-shadow:none;
    }

    .input-group-btn {
      background-color:#eee;
      border-left:1px solid #707070;
      transition:background-color .3s ease-in-out;

      i {
        color:#222;
        transition:color .3s ease-in-out;
      }

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

        i {
          color:#fff;
        }
      }
    }

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

.tear-sheets {
  margin-bottom:.5em;

  select {
    background-color:#eee;
    font-size:1.6rem;
    margin:0 .5em;
    padding:.25em 1.5em .25em 1em;
    border:none;
  }

  input[type="text"] {
    font-size:1.6rem;
    padding:.5em;
    border-color:#222;
    border-radius:5px;
    outline:none;
    box-shadow:none;
    transition:border-color .3s ease-in-out;

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

/*
**  Cards
*/

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

/*
**  Tables
*/

.table {
  font-size:1.4rem;

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

  thead {
    th {
      font-weight:400;
      border-top:none;
      border-bottom-width:1px;
    }
  }

  tr {
    &:hover {
      background-color:lighten($blue-primary, 25%) !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 {
      color:#fff;
      background-color:$purple-primary;

      tr:hover {
        background-color:$purple-darker !important;
      }
    }
  }
}

/*
**  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;
          }
        }
      }
    }
  }
}

/*
**  Attorney Dashboard 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;
    }
  }
}

.add-more {
  font-weight:400;

  &:before {
    content:"+";
    display:inline-block;
    width:36px;
    height:36px;
    color:#9a9a9a;
    font-size:3rem;
    line-height:36px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    margin-right:.25em;
    border:1px solid #9a9a9a;
    border-radius:100em;
    transition:all .3s ease-in-out;
  }

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

.packet-download {
  position:relative;
  padding:0;
  transition:border-color .3s ease-in-out;

  .body {
    padding:3.5em 5.5em 1.5em 1.5em;
  }

  .language {
    position:absolute;
    top:0;
    right:.5em;
    background-color:#e4e4e4;
    font-weight:700;
    padding:.25em .5em;
    transition:background-color .3s ease-in-out;
  }

  &:hover {
    border-color:$purple-lighter;

    .language {
      color:#fff;
      background-color:$purple-primary;
    }
  }
}