@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
.error, .red-text {
  color: #da4545; }

.blue-text {
  color: #4071ca; }

.green-text {
  color: #4d9e44; }

@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
    -webkit-transform: scale(0.5); }
  25% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(1);
    -webkit-transform: scale(1); } }

@-webkit-keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
    -webkit-transform: scale(0.5); }
  25% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: scale(1);
    -webkit-transform: scale(1); } }

html, body {
  height: 100%; }
  html ::-webkit-scrollbar, body ::-webkit-scrollbar {
    width: 6px;
    height: 6px; }
  html ::-webkit-scrollbar-thumb, body ::-webkit-scrollbar-thumb {
    background: #C8C8C8; }
  html ::-webkit-scrollbar-track, body ::-webkit-scrollbar-track {
    background: #F0F0F0; }
  html body, body body {
    scrollbar-face-color: #C8C8C8;
    scrollbar-track-color: #F0F0F0; }

html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  margin: 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #43425D;
  background-color: #F0F0F0; }

h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
  font-weight: 600; }

table {
  table-layout: fixed; }
  table.wide {
    width: 100%; }
  table td.left {
    text-align: left; }
  table td.center {
    text-align: center; }
  table td.right {
    text-align: right; }

ul, ol {
  list-style: none; }

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important; }

#error-page {
  position: absolute;
  top: 40%;
  left: 50%;
  max-width: 400px;
  padding: 0 30px;
  margin: 0 auto;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  #error-page h1 {
    padding: 0 0 24px;
    text-align: center; }
  #error-page h2 {
    padding: 0 0 24px;
    text-align: center; }
  #error-page pre {
    width: 100%;
    overflow: auto; }

#interior-page {
  max-width: 1024px;
  padding: 30px 30px 60px;
  margin: 0 auto; }
  #interior-page::after {
    display: block;
    content: "";
    clear: both; }
  #interior-page .header {
    position: relative;
    height: 64px;
    margin-bottom: 30px;
    border-bottom: 1px solid #f2f2f2; }
    #interior-page .header img {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      height: 30px;
      width: auto;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
    #interior-page .header ul {
      position: absolute;
      top: 50%;
      right: 0;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
      #interior-page .header ul li a {
        display: block;
        padding: 12px 0;
        color: black;
        text-decoration: none; }
  #interior-page .sidebar {
    width: 300px;
    box-sizing: border-box;
    padding: 0 30px 0 0;
    float: left; }
    #interior-page .sidebar ul li {
      border-bottom: 1px solid #f2f2f2; }
      #interior-page .sidebar ul li a {
        display: block;
        padding: 12px 0;
        color: black;
        text-decoration: none; }
      #interior-page .sidebar ul li.active a {
        font-weight: 500; }
  #interior-page article {
    max-width: 600px;
    float: left; }
    #interior-page article h1 {
      position: relative;
      padding: 20px 0 30px;
      font-size: 30px;
      font-weight: 400;
      line-height: 20px; }
      @media (max-width: 414px) {
        #interior-page article h1 {
          font-size: 20px;
          line-height: 18px; } }
    #interior-page article h2 {
      padding: 24px 0;
      font-weight: 700; }
    #interior-page article h3 {
      padding: 0 0 24px;
      font-weight: 700; }
    #interior-page article h4 {
      padding: 18px 0;
      font-weight: 700; }
    #interior-page article strong {
      font-weight: 900; }
    #interior-page article em {
      font-style: italic; }
    #interior-page article u {
      text-decoration: underline; }
    #interior-page article ul, #interior-page article ol {
      padding: 0 0 20px 40px; }
      #interior-page article ul li, #interior-page article ol li {
        padding: 0 0 12px 16px;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px; }
      #interior-page article ul ul, #interior-page article ul ol, #interior-page article ol ul, #interior-page article ol ol {
        padding-top: 24px; }
    #interior-page article ul {
      list-style: square; }
    #interior-page article ol {
      list-style: decimal; }
    #interior-page article a {
      color: black;
      font-weight: 500;
      text-decoration: none; }
    #interior-page article table {
      margin: 0 0 20px;
      border-collapse: collapse; }
      #interior-page article table thead th {
        padding: 15px;
        border: 1px solid #d9d9d9;
        vertical-align: bottom;
        font-size: 14px;
        text-align: left;
        line-height: 24px; }
      #interior-page article table tbody td {
        padding: 15px;
        border: 1px solid #d9d9d9;
        vertical-align: top;
        font-size: 14px;
        line-height: 24px; }
    #interior-page article p, #interior-page article address {
      padding: 0 0 20px;
      font-size: 16px;
      font-weight: 400;
      line-height: 26px; }

body#app main {
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid: auto 1fr / auto;
  box-sizing: border-box;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms; }
  @media (max-width: 614px) {
    body#app main {
      position: static;
      display: block;
      height: auto; } }

#app-header {
  height: 90px;
  background-color: #484848; }
  body.development #app-header {
    background-color: #2a5725; }
  body.staging #app-header {
    background-color: #294f94; }
  #app-header .center {
    position: relative;
    height: 90px; }
  #app-header .logo {
    position: absolute;
    top: 50%;
    left: 30px;
    display: block;
    height: 56px;
    width: 118px;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/logo.png);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
  #app-header .main-menu {
    position: absolute;
    top: 50%;
    left: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    #app-header .main-menu li {
      padding: 0;
      margin: 0 18px;
      display: inline-block; }
      #app-header .main-menu li a {
        display: block;
        padding: 6px;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "Montserrat", Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
        -webkit-transition: all 300ms;
        -moz-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms; }
      #app-header .main-menu li.active a {
        color: #ff7929; }
  #app-header .user-menu {
    position: absolute;
    top: 50%;
    right: 30px;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 10;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    #app-header .user-menu > li {
      position: relative;
      padding: 0;
      margin: 0 18px;
      display: inline-block;
      vertical-align: middle; }
      #app-header .user-menu > li > button {
        position: relative;
        margin: 0;
        padding: 9px 20px 10px 40px;
        -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
        #app-header .user-menu > li > button::before {
          position: absolute;
          top: 50%;
          left: 14px;
          display: block;
          width: 16px;
          height: 16px;
          content: "";
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          background-image: url(../img/icons/plus-tilted-gray.svg);
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%); }
      #app-header .user-menu > li > a {
        display: block;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain; }
        #app-header .user-menu > li > a.user {
          background-image: url(../img/icons/user-white.svg); }
        #app-header .user-menu > li > a.settings {
          background-size: 24px;
          background-image: url(../img/icons/gear-white.svg); }
        #app-header .user-menu > li > a.notifications {
          position: relative;
          background-image: url(../img/icons/bell-white.svg); }
          #app-header .user-menu > li > a.notifications.badge::after {
            position: absolute;
            top: -10px;
            left: 16px;
            padding: 0 6px 2px;
            display: inline-block;
            content: attr(data-badge);
            color: #fff;
            font-size: 12px;
            background-color: #ff7929;
            border-radius: 100px; }
      #app-header .user-menu > li > ul {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        box-sizing: border-box;
        padding: 12px;
        margin: 0;
        list-style: none;
        background-color: #fff;
        border-radius: 4px;
        -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
        #app-header .user-menu > li > ul.open {
          display: block; }
        #app-header .user-menu > li > ul > li {
          padding: 0;
          margin: 0; }
          #app-header .user-menu > li > ul > li > a {
            position: relative;
            display: block;
            padding: 8px 40px 8px 40px;
            color: #43425D;
            text-decoration: none;
            font-family: "Montserrat", Helvetica, Arial, sans-serif;
            font-size: 14px;
            font-weight: 400;
            white-space: nowrap;
            border-radius: 4px; }
            #app-header .user-menu > li > ul > li > a.icon {
              cursor: pointer; }
              #app-header .user-menu > li > ul > li > a.icon:hover {
                background-color: #f2f2f2; }
              #app-header .user-menu > li > ul > li > a.icon::before {
                position: absolute;
                top: 50%;
                left: 6px;
                display: block;
                content: "";
                width: 20px;
                height: 20px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%); }
              #app-header .user-menu > li > ul > li > a.icon.logout::before {
                background-image: url(../img/icons/logout-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.user::before {
                background-image: url(../img/icons/user-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.link::before {
                background-image: url(../img/icons/link-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.bell::before {
                background-image: url(../img/icons/bell-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.company::before {
                background-image: url(../img/icons/building-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.contact::before {
                background-image: url(../img/icons/contact-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.project::before {
                background-image: url(../img/icons/layers-gray.svg); }
              #app-header .user-menu > li > ul > li > a.icon.hours::before {
                background-image: url(../img/icons/stopwatch-gray.svg); }
      #app-header .user-menu > li > .notifications-container {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        width: 300px;
        box-sizing: border-box;
        padding: 12px;
        margin: 0;
        background-color: #fff;
        border-radius: 4px;
        -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
        box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
        #app-header .user-menu > li > .notifications-container.open {
          display: block; }
        #app-header .user-menu > li > .notifications-container p {
          position: relative;
          display: block;
          padding: 8px 40px 8px 40px;
          color: #43425D;
          text-align: center;
          font-family: "Montserrat", Helvetica, Arial, sans-serif;
          font-size: 14px;
          font-weight: 500;
          white-space: nowrap; }
        #app-header .user-menu > li > .notifications-container .actions {
          border-bottom: 1px solid #d9d9d9;
          padding-bottom: 6px;
          margin-bottom: 6px; }
          #app-header .user-menu > li > .notifications-container .actions::after {
            display: block;
            content: "";
            clear: both; }
          #app-header .user-menu > li > .notifications-container .actions .left {
            float: left; }
          #app-header .user-menu > li > .notifications-container .actions .right {
            float: right; }
          #app-header .user-menu > li > .notifications-container .actions a {
            display: inline-block;
            padding: 4px;
            cursor: pointer;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 500; }
            #app-header .user-menu > li > .notifications-container .actions a.all {
              margin-right: 8px; }
            #app-header .user-menu > li > .notifications-container .actions a.active {
              color: #ff7929;
              font-weight: 900; }
            #app-header .user-menu > li > .notifications-container .actions a.mark {
              color: #4071ca;
              font-weight: 900; }
        #app-header .user-menu > li > .notifications-container ul {
          list-style: none;
          max-height: calc(100vh - 188px);
          overflow-y: auto;
          overflow-x: hidden; }
          #app-header .user-menu > li > .notifications-container ul > li {
            padding: 6px;
            margin: 0;
            border-bottom: 1px solid #d9d9d9;
            display: grid;
            grid: auto auto / 32px auto; }
            #app-header .user-menu > li > .notifications-container ul > li:last-child {
              border-bottom: 0; }
            #app-header .user-menu > li > .notifications-container ul > li:hover {
              background-color: #f2f2f2; }
            #app-header .user-menu > li > .notifications-container ul > li::before {
              display: block;
              content: "";
              width: 20px;
              height: 100%;
              background-position: center 6px;
              background-repeat: no-repeat;
              background-size: contain;
              background-image: url(../img/icons/bell-orange.svg);
              grid-column: 1;
              grid-row: span 2; }
            #app-header .user-menu > li > .notifications-container ul > li.read::before {
              background-image: url(../img/icons/bell-gray.svg); }
            #app-header .user-menu > li > .notifications-container ul > li > a {
              position: relative;
              display: block;
              padding: 0;
              color: #43425D;
              text-decoration: none;
              font-size: 14px;
              font-weight: 400;
              cursor: pointer;
              grid-column: 2;
              grid-row: 1; }
              #app-header .user-menu > li > .notifications-container ul > li > a .text {
                padding-bottom: 4px;
                font-size: 12px;
                font-weight: 700;
                color: #43425D; }
              #app-header .user-menu > li > .notifications-container ul > li > a .project {
                padding-bottom: 8px;
                font-size: 12px;
                font-weight: 700;
                color: #ff7929; }
            #app-header .user-menu > li > .notifications-container ul > li .actions {
              padding-bottom: 0;
              margin-bottom: 0;
              border-bottom: 0;
              grid-column: 2;
              grid-row: 2; }
              #app-header .user-menu > li > .notifications-container ul > li .actions .date {
                padding: 4px 0;
                font-size: 11px;
                color: #9b9ab7; }
              #app-header .user-menu > li > .notifications-container ul > li .actions .mark {
                padding: 4px 0;
                font-size: 11px; }

#content #content-grid {
  min-height: 100%;
  padding-top: 30px;
  padding-bottom: 44px;
  box-sizing: border-box; }
  #content #content-grid #page {
    position: relative;
    max-width: calc(100vw - 60px);
    margin: 0 auto;
    box-sizing: border-box; }
    #content #content-grid #page.site-width {
      max-width: 1350px; }
    #content #content-grid #page.narrow {
      max-width: 900px; }
    #content #content-grid #page > h1 {
      color: #95989A;
      font-weight: 600;
      font-size: 24px;
      padding: 18px 0 18px 30px; }
    #content #content-grid #page #inner-grid {
      padding: 30px;
      margin-bottom: 30px;
      box-sizing: border-box;
      background: #fff;
      border-radius: 4px;
      -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
      -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
      -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
      box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
      #content #content-grid #page #inner-grid.has-sidebar {
        display: grid;
        grid: auto / 200px auto;
        gap: 30px; }
      #content #content-grid #page #inner-grid.transparent {
        padding-top: 0;
        padding-bottom: 0;
        background: transparent;
        -webkit-box-shadow: 0 0 0 rgba(100, 100, 100, 0);
        -moz-box-shadow: 0 0 0 rgba(100, 100, 100, 0);
        -o-box-shadow: 0 0 0 rgba(100, 100, 100, 0);
        box-shadow: 0 0 0 rgba(100, 100, 100, 0); }
      #content #content-grid #page #inner-grid #inner-sidebar {
        border-right: 1px solid #e6e6e6;
        padding-right: 12px; }
        #content #content-grid #page #inner-grid #inner-sidebar ul {
          list-style: none; }
          #content #content-grid #page #inner-grid #inner-sidebar ul li a {
            position: relative;
            display: block;
            cursor: pointer;
            padding: 12px;
            color: #43425D;
            text-decoration: none;
            font-family: "Montserrat", Helvetica, Arial, sans-serif;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            border-radius: 4px; }
            #content #content-grid #page #inner-grid #inner-sidebar ul li a:hover {
              background-color: #f2f2f2; }
            #content #content-grid #page #inner-grid #inner-sidebar ul li a.active, #content #content-grid #page #inner-grid #inner-sidebar ul li a.active:hover {
              color: #43425D;
              background-color: #fec002;
              font-weight: 600; }
            #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon {
              padding: 12px 40px 12px 48px; }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon::before {
                position: absolute;
                top: 50%;
                left: 12px;
                display: block;
                content: "";
                width: 20px;
                height: 20px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                -webkit-transform: translateY(-50%);
                -moz-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.logout::before {
                background-image: url(../img/icons/logout-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.user::before {
                background-image: url(../img/icons/user-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.link::before {
                background-image: url(../img/icons/link-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.bell::before {
                background-image: url(../img/icons/bell-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.contact::before {
                background-image: url(../img/icons/contact-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.milestone::before {
                background-image: url(../img/icons/flag-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.time::before {
                background-image: url(../img/icons/stopwatch-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.tag::before {
                background-image: url(../img/icons/tag-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.project::before {
                background-image: url(../img/icons/layers-gray.svg); }
              #content #content-grid #page #inner-grid #inner-sidebar ul li a.icon.settings::before {
                background-image: url(../img/icons/gear-gray.svg); }
      #content #content-grid #page #inner-grid #inner-content {
        position: relative; }
        #content #content-grid #page #inner-grid #inner-content h1 {
          font-size: 24px;
          font-weight: 600;
          color: #43425D;
          padding-bottom: 24px; }
          #content #content-grid #page #inner-grid #inner-content h1 small {
            position: relative;
            display: inline-block;
            color: #95989A;
            margin-left: 8px;
            margin-top: -3px;
            font-weight: 500;
            vertical-align: middle;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center; }
          #content #content-grid #page #inner-grid #inner-content h1 .icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 12px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain; }
            #content #content-grid #page #inner-grid #inner-content h1 .icon.back {
              background-image: url(../img/icons/left-arrow-gray.svg); }
          #content #content-grid #page #inner-grid #inner-content h1.edit-project-title > span {
            display: inline-block;
            max-width: 490px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: top; }
          #content #content-grid #page #inner-grid #inner-content h1.edit-project-title > small {
            vertical-align: baseline; }
        #content #content-grid #page #inner-grid #inner-content h2 {
          padding-bottom: 24px; }
        #content #content-grid #page #inner-grid #inner-content .corner-buttons {
          position: absolute;
          top: 0;
          right: 0;
          text-align: right; }
          #content #content-grid #page #inner-grid #inner-content .corner-buttons .button, #content #content-grid #page #inner-grid #inner-content .corner-buttons button {
            margin-left: 8px; }

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

#login {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
  -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
  -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
  box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
  @media (max-width: 614px) {
    #login {
      position: static;
      max-width: 100%;
      margin: 0 auto;
      padding: 32px 24px;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0); } }
  #login .heading {
    padding: 24px;
    background-color: #484848;
    border-radius: 24px 24px 0 0; }
    #login .heading img {
      display: block;
      max-width: 180px;
      height: auto;
      margin: 0 auto; }
  #login .form {
    display: block;
    max-width: 360px;
    padding: 30px;
    box-sizing: border-box;
    margin: 0 auto; }
    #login .form h1 {
      text-align: center;
      font-weight: 600;
      font-size: 24px;
      padding: 10px 0 24px; }
    #login .form h3 {
      text-align: center;
      font-weight: 500;
      font-size: 18px;
      padding: 10px 0 24px; }
    #login .form p {
      text-align: center;
      padding: 0 0 12px;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px; }
      #login .form p.left {
        text-align: left; }
      #login .form p a {
        color: #e6ad01; }
    #login .form .spacer {
      height: 24px; }
    #login .form .flash {
      padding: 14px;
      text-align: center;
      font-size: 12px;
      font-weight: 700; }
    #login .form .items {
      padding: 0 0 12px;
      list-style: disc;
      max-width: 60%;
      margin: 0 auto; }
      #login .form .items li {
        font-weight: bold;
        padding: 3px;
        margin: 0 0 3px;
        text-align: center; }
    #login .form .links {
      padding: 0;
      list-style: none; }
      #login .form .links li {
        text-align: center;
        padding: 4px 0; }
        #login .form .links li a {
          color: #43425D;
          font-size: 14px;
          font-weight: 500;
          text-decoration: none; }

#project-view {
  display: grid;
  grid: auto / 4fr 4fr 4fr;
  gap: 24px; }

.two-column {
  columns: 2; }

#legal {
  display: block;
  height: 44px !important;
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: #43425D;
  background-color: #fff;
  margin-top: -44px; }
  @media (max-width: 614px) {
    #legal {
      margin-top: 0; } }
  #legal.blank {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0; }

#site-flashes .flash {
  padding: 16px;
  text-align: center; }
  #site-flashes .flash.urgent {
    background: #ffe8e8;
    color: #000;
    border-bottom: 1px solid #ffcfcf; }
    #site-flashes .flash.urgent a {
      color: #000; }
  #site-flashes .flash.success {
    background: #d8f0d6;
    color: #000;
    border-bottom: 1px solid #c6e9c3; }
    #site-flashes .flash.success a {
      color: #000; }
  #site-flashes .flash.warning {
    background: #fff9d4;
    color: #000;
    border-bottom: 1px solid #fff5bb; }
    #site-flashes .flash.warning a {
      color: #000; }
  #site-flashes .flash.message {
    background: #e5f5ff;
    color: #000;
    border-bottom: 1px solid #ccebff; }
    #site-flashes .flash.message a {
      color: #000; }

.pagination {
  display: none;
  padding: 14px 0;
  text-align: right;
  user-select: none; }
  .pagination.visible {
    display: block; }
    .pagination.visible.inline {
      display: inline-block;
      padding: 0; }
  .pagination label {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle; }
    .datatable .filters .pagination label {
      padding: 0 !important; }
    .pagination label a {
      display: inline-block;
      padding: 8px 12px;
      font-weight: 300;
      border-radius: 4px;
      vertical-align: middle;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms; }
      .pagination label a.functional {
        font-weight: 500;
        cursor: pointer; }
        .pagination label a.functional:hover {
          background: #F8F8F8; }
  .pagination ul {
    display: inline-block;
    vertical-align: middle; }
    .pagination ul li {
      display: inline; }
      .pagination ul li a {
        display: inline-block;
        padding: 8px 12px;
        font-size: 16px;
        font-weight: 400;
        border-radius: 4px;
        cursor: pointer;
        vertical-align: middle;
        -webkit-transition: all 300ms;
        -moz-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms; }
        .pagination ul li a:hover {
          background: #F8F8F8; }
        .pagination ul li a.current, .pagination ul li a.current:hover {
          font-weight: 900;
          cursor: auto;
          background: transparent; }
  .pagination small {
    display: inline-block;
    font-size: 12px;
    margin-right: 8px;
    color: #C8C8C8;
    vertical-align: middle; }

.form::after {
  content: "";
  display: block;
  clear: both; }

.form.full {
  max-width: none; }

.form h1 {
  padding-bottom: 24px; }

.form .info {
  font-weight: 700;
  cursor: pointer; }
  .form .info::after {
    content: "";
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img/icons/info.svg"); }

.form .field {
  position: relative;
  padding: 6px;
  box-sizing: border-box;
  clear: both; }
  .form .field.no-pad {
    padding: 0; }
  .form .field.left {
    text-align: left; }
  .form .field.center {
    text-align: center; }
  .form .field.right {
    text-align: right; }
  .form .field::after {
    content: "";
    display: block;
    clear: both; }
  .form .field label {
    display: block;
    padding: 0 0 8px 0;
    font-size: 12px !important;
    font-weight: 600; }
    .form .field label.checkbox, .form .field label.radio {
      font-size: 16px !important;
      cursor: pointer; }
    .form .field label.standard {
      font-size: 14px !important; }
    .form .field label.icon::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      vertical-align: middle; }
    .form .field label.icon.lock::before {
      background-image: url("../img/icons/lock-gray.svg"); }
    .form .field label.icon.lock.white::before {
      background-image: url("../img/icons/lock-white.svg"); }
    .form .field label.icon.lock.green::before {
      background-image: url("../img/icons/lock-green.svg"); }
    .form .field label input[type="checkbox"],
    .form .field label input[type="radio"] {
      margin-right: 15px;
      vertical-align: middle; }
  .form .field input[type="text"],
  .form .field input[type="date"],
  .form .field input[type="time"],
  .form .field input[type="number"],
  .form .field input[type="password"],
  .form .field .text-field,
  .form .field .selectbox,
  .form .field textarea,
  .form .field .button, .form .field button {
    margin: 0; }
  .form .field table td.no-wrap {
    white-space: nowrap; }
  .form .field table td.ellip {
    position: relative; }
    .form .field table td.ellip::before {
      content: ' ';
      visibility: hidden; }
    .form .field table td.ellip > span {
      position: absolute;
      left: 6px;
      right: 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .modal .window .form .field table td.ellip > span {
        left: 16px;
        right: 16px; }
  .form .field.eighth {
    width: 12.5%;
    float: left;
    clear: none; }
  .form .field.sixth {
    width: 16.66%;
    float: left;
    clear: none; }
  .form .field.fifth {
    width: 20.0%;
    float: left;
    clear: none; }
  .form .field.quarter {
    width: 25%;
    float: left;
    clear: none; }
  .form .field.third {
    width: 33.33%;
    float: left;
    clear: none; }
  .form .field.three-eighth {
    width: 37.5%;
    float: left;
    clear: none; }
  .form .field.half {
    width: 50%;
    float: left;
    clear: none; }
  .form .field.three-quarter {
    width: 75%;
    float: left;
    clear: none; }
  .form .field.buttons {
    padding: 6px 0; }
    .form .field.buttons .button.inline,
    .form .field.buttons button.inline {
      margin-right: 12px; }
  .form .field .save-progress {
    display: block;
    opacity: 0.5;
    padding: 12px 16px;
    font-size: 12px; }

.form .divider {
  margin: 14px 0;
  border-bottom: 1px solid #C8C8C8;
  clear: both; }

.form .clear {
  clear: both; }

.form .spacer {
  height: 24px;
  clear: both; }

input[type="button"],
input[type="submit"],
button,
.button {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-size: 16px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #fff;
  padding: 12px 16px;
  box-sizing: border-box;
  border: none;
  outline: 0;
  border-radius: 4px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: #ff7929;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms; }
  input[type="button"]:active, input[type="button"]:focus, input[type="button"]:hover,
  input[type="submit"]:active,
  input[type="submit"]:focus,
  input[type="submit"]:hover,
  button:active,
  button:focus,
  button:hover,
  .button:active,
  .button:focus,
  .button:hover {
    background-color: #f55c00; }
  input[type="button"].green,
  input[type="submit"].green,
  button.green,
  .button.green {
    color: #fff;
    background: #4d9e44; }
    input[type="button"].green:active, input[type="button"].green:focus, input[type="button"].green:hover,
    input[type="submit"].green:active,
    input[type="submit"].green:focus,
    input[type="submit"].green:hover,
    button.green:active,
    button.green:focus,
    button.green:hover,
    .button.green:active,
    .button.green:focus,
    .button.green:hover {
      background: #3c7a35; }
  input[type="button"].blue,
  input[type="submit"].blue,
  button.blue,
  .button.blue {
    color: #fff;
    background: #4071ca; }
    input[type="button"].blue:active, input[type="button"].blue:focus, input[type="button"].blue:hover,
    input[type="submit"].blue:active,
    input[type="submit"].blue:focus,
    input[type="submit"].blue:hover,
    button.blue:active,
    button.blue:focus,
    button.blue:hover,
    .button.blue:active,
    .button.blue:focus,
    .button.blue:hover {
      background: #2f5aa8; }
  input[type="button"].alt,
  input[type="submit"].alt,
  button.alt,
  .button.alt {
    color: #43425D;
    background-color: #fec002; }
    input[type="button"].alt:active, input[type="button"].alt:focus, input[type="button"].alt:hover,
    input[type="submit"].alt:active,
    input[type="submit"].alt:focus,
    input[type="submit"].alt:hover,
    button.alt:active,
    button.alt:focus,
    button.alt:hover,
    .button.alt:active,
    .button.alt:focus,
    .button.alt:hover {
      background-color: #e6ad01; }
  input[type="button"].secondary,
  input[type="submit"].secondary,
  button.secondary,
  .button.secondary {
    color: #fff;
    background: #484848; }
    input[type="button"].secondary:active, input[type="button"].secondary:focus, input[type="button"].secondary:hover,
    input[type="submit"].secondary:active,
    input[type="submit"].secondary:focus,
    input[type="submit"].secondary:hover,
    button.secondary:active,
    button.secondary:focus,
    button.secondary:hover,
    .button.secondary:active,
    .button.secondary:focus,
    .button.secondary:hover {
      background: #626262; }
  input[type="button"].faded,
  input[type="submit"].faded,
  button.faded,
  .button.faded {
    color: #43425D;
    background: #C8C8C8; }
    input[type="button"].faded:active, input[type="button"].faded:focus, input[type="button"].faded:hover,
    input[type="submit"].faded:active,
    input[type="submit"].faded:focus,
    input[type="submit"].faded:hover,
    button.faded:active,
    button.faded:focus,
    button.faded:hover,
    .button.faded:active,
    .button.faded:focus,
    .button.faded:hover {
      background: #e2e2e2; }
  input[type="button"].link,
  input[type="submit"].link,
  button.link,
  .button.link {
    display: inline;
    padding-left: 0;
    padding-right: 0;
    color: #ff7929;
    background: transparent; }
    input[type="button"].link.small,
    input[type="submit"].link.small,
    button.link.small,
    .button.link.small {
      padding-left: 0;
      padding-right: 0; }
    input[type="button"].link:active, input[type="button"].link:focus, input[type="button"].link:hover,
    input[type="submit"].link:active,
    input[type="submit"].link:focus,
    input[type="submit"].link:hover,
    button.link:active,
    button.link:focus,
    button.link:hover,
    .button.link:active,
    .button.link:focus,
    .button.link:hover {
      background: transparent; }
  input[type="button"].disabled,
  input[type="submit"].disabled,
  button.disabled,
  .button.disabled {
    color: #959595;
    background: #C8C8C8; }
    input[type="button"].disabled:active, input[type="button"].disabled:focus, input[type="button"].disabled:hover,
    input[type="submit"].disabled:active,
    input[type="submit"].disabled:focus,
    input[type="submit"].disabled:hover,
    button.disabled:active,
    button.disabled:focus,
    button.disabled:hover,
    .button.disabled:active,
    .button.disabled:focus,
    .button.disabled:hover {
      background: #C8C8C8;
      cursor: not-allowed; }
  input[type="button"].inline,
  input[type="submit"].inline,
  button.inline,
  .button.inline {
    display: inline-block;
    width: auto; }
  input[type="button"].right-margin,
  input[type="submit"].right-margin,
  button.right-margin,
  .button.right-margin {
    margin-right: 8px; }
  input[type="button"].regular,
  input[type="submit"].regular,
  button.regular,
  .button.regular {
    font-size: 12px;
    padding: 10px 14px; }
  input[type="button"].small,
  input[type="submit"].small,
  button.small,
  .button.small {
    font-size: 12px;
    padding: 7px 12px; }
  input[type="button"].large,
  input[type="submit"].large,
  button.large,
  .button.large {
    font-size: 20px;
    padding: 9px 20px 10px; }
  input[type="button"].micro,
  input[type="submit"].micro,
  button.micro,
  .button.micro {
    font-size: 9px;
    font-weight: 900;
    padding: 5px 9px; }
  input[type="button"].important,
  input[type="submit"].important,
  button.important,
  .button.important {
    background: #da4545; }
  input[type="button"].page-button,
  input[type="submit"].page-button,
  button.page-button,
  .button.page-button {
    margin-right: 8px; }
  input[type="button"].no-margin,
  input[type="submit"].no-margin,
  button.no-margin,
  .button.no-margin {
    margin: 0; }
  input[type="button"].shadowed,
  input[type="submit"].shadowed,
  button.shadowed,
  .button.shadowed {
    -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
  input[type="button"].icon,
  input[type="submit"].icon,
  button.icon,
  .button.icon {
    color: #484848;
    background: transparent;
    text-transform: none;
    letter-spacing: normal; }
    input[type="button"].icon::after,
    input[type="submit"].icon::after,
    button.icon::after,
    .button.icon::after {
      content: "";
      margin-left: 8px;
      display: inline-block;
      vertical-align: middle;
      width: 12px;
      height: 12px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain; }
    input[type="button"].icon.small,
    input[type="submit"].icon.small,
    button.icon.small,
    .button.icon.small {
      font-size: 12px; }
    input[type="button"].icon.location,
    input[type="submit"].icon.location,
    button.icon.location,
    .button.icon.location {
      position: relative;
      padding: 0;
      width: 24px;
      height: 24px; }
      input[type="button"].icon.location::after,
      input[type="submit"].icon.location::after,
      button.icon.location::after,
      .button.icon.location::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        background-image: url("../img/icons/crosshairs-gray.svg"); }
    input[type="button"].icon.refresh::after,
    input[type="submit"].icon.refresh::after,
    button.icon.refresh::after,
    .button.icon.refresh::after {
      background-image: url("../img/icons/refresh.svg"); }
    input[type="button"].icon.refreshing,
    input[type="submit"].icon.refreshing,
    button.icon.refreshing,
    .button.icon.refreshing {
      cursor: default; }
      input[type="button"].icon.refreshing::after,
      input[type="submit"].icon.refreshing::after,
      button.icon.refreshing::after,
      .button.icon.refreshing::after {
        background-image: url("../img/loading.gif"); }

.transparent-button {
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  user-select: none; }
  .transparent-button.left-margin {
    margin-left: 24px; }
  .transparent-button.right-margin {
    margin-right: 24px; }
  .transparent-button::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-top: -3px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
  .transparent-button.copy {
    color: #2699FB; }
    .transparent-button.copy::before {
      background-image: url(../img/icons/copy-blue.svg); }
  .transparent-button.csv {
    color: #4d9e44; }
    .transparent-button.csv::before {
      background-image: url(../img/icons/download-green.svg); }

.selectbox {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  user-select: none; }
  .selectbox.inline {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-bottom: 0; }
  .selectbox > a {
    position: relative;
    display: block;
    padding: 13px 25px 14px 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-radius: 4px;
    border: 2px solid #cccccc;
    background-color: #fff;
    color: #43425D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms; }
    .selectbox > a > span {
      opacity: 0.5; }
      .selectbox > a > span.chosen {
        opacity: 1.0;
        font-weight: 600; }
    .selectbox > a::after {
      position: absolute;
      content: "";
      display: block;
      right: 8px;
      top: 50%;
      width: 8px;
      height: 12px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url("../img/icons/down-arrow-gray.svg");
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
    .selectbox > a:hover {
      border-color: #43425D; }
  .selectbox .selectbox-drop {
    position: absolute;
    top: 100%;
    min-width: 200px;
    max-width: 300px;
    z-index: 10000;
    display: none;
    background-color: #fff;
    border-radius: 4px;
    text-align: left;
    -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
    .selectbox .selectbox-drop > input {
      display: block;
      width: calc(100% - 28px);
      box-sizing: border-box;
      padding: 8px 12px;
      margin: 12px auto;
      font-size: 12px;
      background-color: #fff; }
    .selectbox .selectbox-drop ul {
      max-height: 200px;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border: 2px solid #cccccc; }
      .selectbox .selectbox-drop ul li a {
        display: block;
        padding: 10px 24px 10px 14px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer; }
        .selectbox .selectbox-drop ul li a:hover {
          background-color: #F8F8F8; }
        .selectbox .selectbox-drop ul li a.hold {
          opacity: 0.5;
          font-weight: 400; }
        .selectbox .selectbox-drop ul li a.active, .selectbox .selectbox-drop ul li a.active:hover {
          color: #43425D;
          background-color: #fec002;
          font-weight: 600; }
          .selectbox .selectbox-drop ul li a.active.hold, .selectbox .selectbox-drop ul li a.active:hover.hold {
            color: inherit;
            background-color: #F8F8F8; }
      .selectbox .selectbox-drop ul li:first-child a {
        border-radius: 4px 4px 0 0; }
      .selectbox .selectbox-drop ul li:last-child a {
        border-radius: 0 0 4px 4px; }
  .selectbox.open > a,
  .selectbox > a:hover {
    background-color: #F8F8F8; }
  .selectbox.open .selectbox-drop {
    display: block; }
  .selectbox.regular > a {
    padding: 11px 25px 11px 10px;
    font-size: 16px;
    font-weight: 400; }
    .selectbox.regular > a::after {
      right: 8px;
      top: 50%;
      width: 8px;
      height: 12px; }
  .selectbox.regular .selectbox-drop ul li a {
    padding: 10px 24px 10px 14px;
    font-size: 16px;
    font-weight: 400; }
  .selectbox.above .selectbox-drop {
    top: auto;
    bottom: calc(100% + 12px); }
  .selectbox.right .selectbox-drop {
    right: 0; }
  .selectbox.small > a {
    font-size: 12px;
    padding: 8px 24px 7px 10px; }
  .selectbox.no-margin {
    margin: 0; }

.dropdown {
  position: relative;
  display: block;
  user-select: none; }
  .dropdown.inline {
    display: inline-block;
    vertical-align: middle;
    width: auto; }
  .dropdown > a {
    position: relative;
    display: block;
    padding: 13px 25px 14px 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-radius: 4px;
    border: 2px solid #cccccc;
    background-color: #fff;
    color: #43425D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms; }
    .dropdown > a > span {
      opacity: 0.5; }
      .dropdown > a > span.chosen {
        opacity: 1.0;
        font-weight: 600; }
    .dropdown > a::after {
      position: absolute;
      content: "";
      display: block;
      right: 8px;
      top: 50%;
      width: 8px;
      height: 12px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url("../img/icons/down-arrow-gray.svg");
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
    .dropdown > a:hover {
      border-color: #43425D; }
  .dropdown .dropdown-drop {
    position: absolute;
    top: calc(100% + 6px);
    min-width: 200px;
    z-index: 10000;
    display: none;
    background-color: #fff;
    border-radius: 4px;
    border: 2px solid #cccccc;
    -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
    .dropdown .dropdown-drop > input {
      display: block;
      width: calc(100% - 24px);
      box-sizing: border-box;
      padding: 8px 12px;
      margin: 12px auto !important;
      font-size: 16px;
      background-color: #fff; }
    .dropdown .dropdown-drop .loading {
      display: block;
      padding: 6px 24px 6px 14px;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 400; }
    .dropdown .dropdown-drop ul {
      max-height: 200px;
      border-top: 1px solid #F8F8F8;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; }
      .dropdown .dropdown-drop ul li a {
        display: block;
        padding: 8px 24px 8px 14px;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer; }
        .dropdown .dropdown-drop ul li a:hover {
          background-color: #F8F8F8; }
        .dropdown .dropdown-drop ul li a.active, .dropdown .dropdown-drop ul li a.active:hover {
          color: #43425D;
          background-color: #fec002; }
  .dropdown.open > a,
  .dropdown > a:hover {
    background-color: #F8F8F8; }
  .dropdown.open .dropdown-drop {
    display: block; }
  .dropdown.regular > a {
    padding: 11px 25px 11px 10px;
    font-size: 12px;
    font-weight: 400; }
    .dropdown.regular > a::after {
      right: 8px;
      top: 50%;
      height: 12px; }
  .dropdown.regular .dropdown-drop ul li a {
    padding: 10px 24px 10px 14px;
    font-size: 12px;
    font-weight: 400; }
  .dropdown.small > a {
    font-size: 12px;
    padding: 8px 24px 7px 10px; }
    .dropdown.small > a::after {
      right: 8px;
      top: 50%; }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="password"],
.text-field,
textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 8px 11px 8px;
  color: #43425D;
  background-color: #fff;
  border: 2px solid #cccccc;
  border-radius: 4px;
  box-sizing: border-box;
  outline: 0;
  -webkit-appearance: none;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms; }
  input[type="text"]:active, input[type="text"]:focus,
  input[type="number"]:active,
  input[type="number"]:focus,
  input[type="date"]:active,
  input[type="date"]:focus,
  input[type="time"]:active,
  input[type="time"]:focus,
  input[type="password"]:active,
  input[type="password"]:focus,
  .text-field:active,
  .text-field:focus,
  textarea:active,
  textarea:focus {
    border-color: #43425D; }
  input[type="text"].regular,
  input[type="number"].regular,
  input[type="date"].regular,
  input[type="time"].regular,
  input[type="password"].regular,
  .text-field.regular,
  textarea.regular {
    font-size: 12px;
    padding: 10px 14px; }
    input[type="text"].regular[type="date"],
    input[type="number"].regular[type="date"],
    input[type="date"].regular[type="date"],
    input[type="time"].regular[type="date"],
    input[type="password"].regular[type="date"],
    .text-field.regular[type="date"],
    textarea.regular[type="date"] {
      padding: 8px 14px; }
  input[type="text"].small,
  input[type="number"].small,
  input[type="date"].small,
  input[type="time"].small,
  input[type="password"].small,
  .text-field.small,
  textarea.small {
    font-size: 12px;
    padding: 6px 10px; }
  input[type="text"].inline,
  input[type="number"].inline,
  input[type="date"].inline,
  input[type="time"].inline,
  input[type="password"].inline,
  .text-field.inline,
  textarea.inline {
    width: auto;
    display: inline-block;
    vertical-align: middle; }
  input[type="text"].no-margin,
  input[type="number"].no-margin,
  input[type="date"].no-margin,
  input[type="time"].no-margin,
  input[type="password"].no-margin,
  .text-field.no-margin,
  textarea.no-margin {
    margin: 0; }
  input[type="text"][readonly],
  input[type="number"][readonly],
  input[type="date"][readonly],
  input[type="time"][readonly],
  input[type="password"][readonly],
  .text-field[readonly],
  textarea[readonly] {
    color: #7e7ca2;
    background-color: #f2f2f2;
    user-select: none; }
    input[type="text"][readonly]:active, input[type="text"][readonly]:focus,
    input[type="number"][readonly]:active,
    input[type="number"][readonly]:focus,
    input[type="date"][readonly]:active,
    input[type="date"][readonly]:focus,
    input[type="time"][readonly]:active,
    input[type="time"][readonly]:focus,
    input[type="password"][readonly]:active,
    input[type="password"][readonly]:focus,
    .text-field[readonly]:active,
    .text-field[readonly]:focus,
    textarea[readonly]:active,
    textarea[readonly]:focus {
      border-color: #cccccc; }
  input[type="text"].error,
  input[type="number"].error,
  input[type="date"].error,
  input[type="time"].error,
  input[type="password"].error,
  .text-field.error,
  textarea.error {
    border-color: #da4545; }

textarea {
  border: 2px solid #cccccc;
  border-radius: 4px; }

input::placeholder, textarea::placeholder {
  font-weight: 400;
  color: #95989A; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  font-weight: 400;
  color: #95989A; }

input::-moz-placeholder, textarea::-moz-placeholder {
  font-weight: 400;
  color: #95989A; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  font-weight: 400;
  color: #95989A; }

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
  font-weight: 400;
  color: #95989A; }

.radio-group {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-radius: 4px;
  border: 2px solid #cccccc; }
  .radio-group .radio {
    display: table-cell;
    background: #F8F8F8;
    padding: 6px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    border-right: 2px solid #cccccc;
    cursor: pointer; }
    .radio-group .radio label {
      padding: 0 !important;
      margin: 0; }
    .radio-group .radio:first-child {
      border-radius: 4px 0 0 4px; }
    .radio-group .radio:last-child {
      border-radius: 0 4px 4px 0;
      border-right: 0; }
    .radio-group .radio.active {
      font-weight: 700;
      background: #fff; }

#breadcrumbs {
  position: absolute;
  right: 0;
  top: 24px; }
  #breadcrumbs ul li {
    position: relative;
    display: inline-block;
    margin: 0 12px;
    font-size: 16px;
    color: #43425D; }
    #breadcrumbs ul li::after {
      position: absolute;
      top: 3px;
      right: -16px;
      content: ">";
      font-size: 12px;
      color: #95989A; }
    #breadcrumbs ul li:first-child {
      margin-left: 0; }
    #breadcrumbs ul li:last-child {
      margin-right: 0; }
      #breadcrumbs ul li:last-child::after {
        display: none; }
    #breadcrumbs ul li a {
      color: #95989A; }

.datatable .section {
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  padding: 12px;
  max-width: 650px;
  margin: 12px auto 24px; }
  .datatable .section h2 {
    padding-top: 0; }

.datatable table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; }
  .datatable table thead tr th {
    padding: 8px 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    border-right: 1px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
    border-radius: 4px 4px 0 0;
    user-select: none; }
    .datatable table thead tr th:last-child {
      border-right: none; }
    @media (max-width: 614px) {
      .datatable table thead tr th {
        display: none; }
        .datatable table thead tr th:first-child, .datatable table thead tr th:last-child {
          display: table-cell; } }
    .datatable table thead tr th.active {
      color: #fff;
      background: #43425D; }
    .datatable table thead tr th.left {
      text-align: left; }
    .datatable table thead tr th.center {
      text-align: center; }
    .datatable table thead tr th.right {
      text-align: right; }
    .datatable table thead tr th.no-wrap {
      white-space: nowrap; }
    .datatable table thead tr th.sort {
      cursor: pointer;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms; }
      .datatable table thead tr th.sort:hover {
        border-bottom: 2px solid #a6a6a6; }
      .datatable table thead tr th.sort::after {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        margin-left: 8px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/icons/up-down-arrow-gray.svg");
        float: right;
        opacity: 0.5; }
      .datatable table thead tr th.sort.asc, .datatable table thead tr th.sort.asc:hover, .datatable table thead tr th.sort.desc, .datatable table thead tr th.sort.desc:hover {
        border-bottom: 2px solid black; }
      .datatable table thead tr th.sort.asc::after, .datatable table thead tr th.sort.desc::after {
        opacity: 1.0;
        background-image: url("../img/icons/down-arrow-gray.svg");
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg); }
      .datatable table thead tr th.sort.desc::after {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg); }
  .datatable table tbody tr td {
    padding: 8px 6px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 1.6;
    background: #fff;
    border-right: 1px solid #d9d9d9; }
    .datatable table tbody tr td:last-child {
      border-right: none; }
    @media (max-width: 614px) {
      .datatable table tbody tr td {
        display: none; }
        .datatable table tbody tr td:first-child, .datatable table tbody tr td:last-child {
          display: table-cell; } }
    .datatable table tbody tr td .light {
      color: #95989A; }
    .datatable table tbody tr td.active {
      color: #fff;
      background: #43425D;
      font-weight: 600; }
    .datatable table tbody tr td.left {
      text-align: left; }
    .datatable table tbody tr td.center {
      text-align: center; }
    .datatable table tbody tr td.right {
      text-align: right; }
    .datatable table tbody tr td.no-wrap {
      white-space: nowrap; }
    .datatable table tbody tr td.word-wrap {
      word-wrap: break-word; }
    .datatable table tbody tr td.ellip {
      position: relative; }
      .datatable table tbody tr td.ellip::before {
        content: ' ';
        visibility: hidden; }
      .datatable table tbody tr td.ellip > span {
        position: absolute;
        left: 6px;
        right: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; }
    .datatable table tbody tr td.link {
      cursor: pointer;
      font-weight: 600;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms; }
      .datatable table tbody tr td.link:hover {
        background-color: #e6e6e6; }
      .datatable table tbody tr td.link::after {
        display: block;
        width: 10px;
        height: 10px;
        float: right;
        margin: 7px 10px 0 0;
        content: "";
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/icons/down-arrow-gray.svg");
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg); }
    .datatable table tbody tr td .button {
      display: inline-block;
      width: auto;
      font-size: 12px;
      margin: 0 4px;
      padding: 4px 8px 3px; }
    .datatable table tbody tr td .action {
      font-weight: 700;
      color: #e6ad01;
      cursor: pointer; }
      .datatable table tbody tr td .action.remove::after, .datatable table tbody tr td .action.edit::after, .datatable table tbody tr td .action.copy::after, .datatable table tbody tr td .action.download::after, .datatable table tbody tr td .action.clip::after, .datatable table tbody tr td .action.refresh::after, .datatable table tbody tr td .action.refreshing::after, .datatable table tbody tr td .action.up::after, .datatable table tbody tr td .action.down::after, .datatable table tbody tr td .action.view::after {
        content: "";
        margin-left: 14px;
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain; }
      .datatable table tbody tr td .action.remove::after {
        background-image: url("../img/icons/remove.svg"); }
      .datatable table tbody tr td .action.refresh::after {
        background-image: url("../img/icons/refresh.svg"); }
      .datatable table tbody tr td .action.refreshing {
        cursor: default; }
        .datatable table tbody tr td .action.refreshing::after {
          background-image: url("../img/loading.gif"); }
      .datatable table tbody tr td .action.hours {
        margin: 0; }
        .datatable table tbody tr td .action.hours::after {
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 24px;
          height: 24px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 16px;
          background-image: url("../img/icons/stopwatch-plus-orange.svg"); }
      .datatable table tbody tr td .action.edit::after {
        background-image: url("../img/icons/edit-gray.svg"); }
      .datatable table tbody tr td .action.copy::after {
        background-image: url("../img/icons/copy-gray.svg"); }
      .datatable table tbody tr td .action.download::after {
        background-image: url("../img/icons/download-gray.svg"); }
      .datatable table tbody tr td .action.up::after {
        background-image: url("../img/icons/up-arrow-gray.svg"); }
      .datatable table tbody tr td .action.down::after {
        background-image: url("../img/icons/down-arrow-gray.svg"); }
      .datatable table tbody tr td .action.view::after {
        background-image: url("../img/icons/right-arrow-gray.svg"); }
      .datatable table tbody tr td .action.clip {
        white-space: nowrap;
        color: inherit; }
        .datatable table tbody tr td .action.clip::after {
          background-image: url("../img/icons/clip-blue.svg"); }
  .datatable table tbody tr.link {
    cursor: pointer;
    user-select: none; }
    .datatable table tbody tr.link:hover td {
      background-color: #F0F0F0; }
  .datatable table tbody tr:nth-child(odd) td {
    background: #f7f7f7; }
    .datatable table tbody tr:nth-child(odd) td.active {
      color: #fff;
      background: #38374e; }
  .datatable table tfoot tr td {
    padding: 8px 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    line-height: 1.6;
    border-top: 2px solid #d9d9d9; }
    .datatable table tfoot tr td.left {
      text-align: left; }
    .datatable table tfoot tr td.center {
      text-align: center; }
    .datatable table tfoot tr td.right {
      text-align: right; }
    .datatable table tfoot tr td a.link {
      font-size: 14px;
      color: #43425D; }
    .datatable table tfoot tr td .old-amount {
      display: block;
      text-decoration: line-through;
      font-weight: 400;
      font-style: italic;
      text-align: right; }

.datatable.important table {
  border: 2px solid #da4545; }

.datatable.no-alt-rows tbody tr:nth-child(odd) td {
  background: #fff; }

.datatable.row-separators tbody tr td {
  border-bottom: 2px solid #cccccc; }

.datatable.solid-links table tbody tr {
  cursor: pointer; }
  .datatable.solid-links table tbody tr td {
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms; }
  .datatable.solid-links table tbody tr:hover td {
    background: #bfbfbf; }

.datatable.solid-links.colored {
  padding-top: 12px;
  background-color: #fff;
  border: 1px solid #e6e6e6; }
  .datatable.solid-links.colored.blue table tbody tr:hover td {
    background: #d5ebfe;
    border-right-color: #bce0fe; }
  .datatable.solid-links.colored.orange table tbody tr:hover td {
    background: #ffe1b4;
    border-right-color: #ffd69a; }
  .datatable.solid-links.colored.green table tbody tr:hover td {
    background: #b3efd1;
    border-right-color: #9eebc4; }
  .datatable.solid-links.colored.red table tbody tr:hover td {
    background: #ffd6ce;
    border-right-color: #ffc1b5; }
  .datatable.solid-links.colored.gray table tbody tr:hover td {
    background: #d6d7d8;
    border-right-color: #c9cbcc; }
  .datatable.solid-links.colored.black table tbody tr:hover td {
    background: #cccccc;
    border-right-color: #bfbfbf; }

.datatable .filters {
  position: relative;
  padding: 12px 0; }
  .datatable .filters.padded {
    padding: 12px 0 12px 12px; }
  .datatable .filters::after {
    content: "";
    display: block;
    clear: both; }
  .datatable .filters label {
    display: inline-block;
    padding: 8px 12px 8px 6px;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle; }
    .datatable .filters label.checkbox, .datatable .filters label.radio {
      margin-left: 10px;
      cursor: pointer; }
    .datatable .filters label input[type="checkbox"],
    .datatable .filters label input[type="radio"] {
      margin-right: 8px;
      vertical-align: text-bottom; }
  .datatable .filters .stats {
    position: absolute;
    right: 0;
    display: inline-block;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1; }
    .datatable .filters .stats strong {
      font-size: 14px;
      font-weight: 700;
      padding: 0 6px; }
  .datatable .filters .clear {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    background-image: url("../img/icons/cancel.svg");
    cursor: pointer;
    vertical-align: middle;
    margin-right: 24px; }
  .datatable .filters .dropdown,
  .datatable .filters .selectbox,
  .datatable .filters .button,
  .datatable .filters button {
    margin: 0 8px 0 0; }
  .datatable .filters .buttons-right {
    float: right; }

.datatable .loading {
  text-align: center;
  color: #43425D;
  font-weight: 500;
  font-size: 16px;
  padding: 24px 0; }
  #inner-content .datatable .loading {
    padding-top: 24px; }

#inner-content .datatable .section .loading {
  padding-top: 0; }

.tabs {
  display: block;
  position: relative;
  z-index: 1; }
  .tabs ul {
    display: table;
    white-space: nowrap; }
    .tabs ul li {
      display: inline-block;
      position: relative; }
      .tabs ul li a {
        display: block;
        padding: 10px 24px;
        margin: 0 2px;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        color: #95989A;
        cursor: pointer;
        background: #F8F8F8;
        user-select: none;
        border-left: 1px solid #bfbfbf;
        border-top: 1px solid #bfbfbf;
        border-right: 1px solid #bfbfbf;
        border-radius: 12px 12px 0 0;
        -webkit-transition: all 300ms;
        -moz-transition: all 300ms;
        -o-transition: all 300ms;
        transition: all 300ms; }
        .tabs ul li a::after {
          display: none;
          position: absolute;
          bottom: -1px;
          left: 0;
          right: 0;
          content: "";
          border-bottom: 1px solid #fff; }
        .tabs ul li a small {
          color: #43425D;
          font-weight: 400; }
      .tabs ul li.active a {
        position: relative;
        cursor: auto;
        color: #43425D;
        background: #fff; }
        .tabs ul li.active a::after {
          display: block; }
        .tabs ul li.active a small {
          color: #fff; }
      .tabs ul li:first-child a {
        margin-left: 0; }
      .tabs ul li:last-child a {
        margin-right: 0; }
      .tabs ul li.colored.active a:after {
        display: none; }
      .tabs ul li.colored.active.lightblue a {
        color: #fff;
        border-color: #71bcfc;
        background-color: #71bcfc; }
      .tabs ul li.colored.active.blue a {
        color: #fff;
        border-color: #2699FB;
        background-color: #2699FB; }
      .tabs ul li.colored.active.orange a {
        color: #fff;
        border-color: #FE9902;
        background-color: #FE9902; }
      .tabs ul li.colored.active.green a {
        color: #fff;
        border-color: #4AD991;
        background-color: #4AD991; }
      .tabs ul li.colored.active.red a {
        color: #fff;
        border-color: #FF8268;
        background-color: #FF8268; }
      .tabs ul li.colored.active.gray a {
        color: #fff;
        border-color: #95989A;
        background-color: #95989A; }
      .tabs ul li.colored.active.darkgray a {
        color: #fff;
        border-color: #6f7274;
        background-color: #6f7274; }
      .tabs ul li.colored.active.black a {
        color: #fff;
        border-color: #000;
        background-color: #000; }
  .tabs.small ul li a {
    padding: 8px 14px 6px 14px;
    margin: 0;
    font-size: 12px;
    border-radius: 4px 4px 0 0; }

.tab-content {
  display: block;
  position: relative;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 0 4px 4px 4px; }
  .tab-content.scroll {
    max-height: 500px;
    overflow-y: auto; }
    .tab-content.scroll.full-screen {
      max-height: calc(100vh - 160px);
      overflow-y: auto; }
  .tab-content.colored {
    padding: 0;
    border-radius: 0;
    border: 0;
    background-color: transparent; }
    .tab-content.colored::before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      content: "";
      display: block;
      height: 8px; }
    .tab-content.colored.lightblue::before {
      background-color: #71bcfc; }
    .tab-content.colored.blue::before {
      background-color: #2699FB; }
    .tab-content.colored.orange::before {
      background-color: #FE9902; }
    .tab-content.colored.green::before {
      background-color: #4AD991; }
    .tab-content.colored.red::before {
      background-color: #FF8268; }
    .tab-content.colored.gray::before {
      background-color: #95989A; }
    .tab-content.colored.darkgray::before {
      background-color: #6f7274; }
    .tab-content.colored.black::before {
      background-color: #000; }
  .tab-content table.wide {
    width: 100%; }
    .tab-content table.wide .left {
      text-align: left; }
    .tab-content table.wide .center {
      text-align: center; }
    .tab-content table.wide .right {
      text-align: right; }

.vertical-tabs-container {
  display: grid;
  grid: auto / auto 1fr;
  border-top: 1px solid #bfbfbf;
  background: #f2f2f2; }
  .vertical-tabs-container .vertical-tabs {
    display: block;
    position: relative;
    z-index: 1; }
    .vertical-tabs-container .vertical-tabs ul {
      display: block; }
      .vertical-tabs-container .vertical-tabs ul li {
        display: list-item;
        position: relative; }
        .vertical-tabs-container .vertical-tabs ul li a {
          display: block;
          padding: 12px 24px 12px 12px;
          margin: 0;
          background: transparent;
          border: 1px solid #f2f2f2;
          background: #f2f2f2;
          border-radius: 0;
          font-size: 14px;
          font-weight: 700;
          text-transform: uppercase;
          text-decoration: none;
          color: #95989A;
          cursor: pointer;
          user-select: none;
          -webkit-transition: all 300ms;
          -moz-transition: all 300ms;
          -o-transition: all 300ms;
          transition: all 300ms; }
          .vertical-tabs-container .vertical-tabs ul li a::after {
            display: none;
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            content: "";
            border-bottom: 1px solid #fff; }
          .vertical-tabs-container .vertical-tabs ul li a:hover {
            background: #e6e6e6; }
          .vertical-tabs-container .vertical-tabs ul li a small {
            color: #43425D;
            font-weight: 400; }
        .vertical-tabs-container .vertical-tabs ul li.active a {
          position: relative;
          border: 1px solid #fff;
          background: #fff;
          color: #43425D;
          cursor: auto; }
          .vertical-tabs-container .vertical-tabs ul li.active a::after {
            position: absolute;
            content: "";
            display: block;
            width: 2px;
            height: auto;
            right: -2px;
            top: 0;
            bottom: 0;
            left: auto;
            background: #fff; }
          .vertical-tabs-container .vertical-tabs ul li.active a small {
            color: #fff; }
        .vertical-tabs-container .vertical-tabs ul li:first-child a {
          margin-left: 0; }
        .vertical-tabs-container .vertical-tabs ul li:last-child a {
          margin-right: 0; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active a:after {
          display: none; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.lightblue a {
          color: #fff;
          border-color: #71bcfc;
          background-color: #71bcfc; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.blue a {
          color: #fff;
          border-color: #2699FB;
          background-color: #2699FB; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.orange a {
          color: #fff;
          border-color: #FE9902;
          background-color: #FE9902; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.green a {
          color: #fff;
          border-color: #4AD991;
          background-color: #4AD991; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.red a {
          color: #fff;
          border-color: #FF8268;
          background-color: #FF8268; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.gray a {
          color: #fff;
          border-color: #95989A;
          background-color: #95989A; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.darkgray a {
          color: #fff;
          border-color: #6f7274;
          background-color: #6f7274; }
        .vertical-tabs-container .vertical-tabs ul li.colored.active.black a {
          color: #fff;
          border-color: #000;
          background-color: #000; }
    .vertical-tabs-container .vertical-tabs.small ul li a {
      padding: 8px 14px 6px 14px;
      margin: 0;
      font-size: 12px;
      border-radius: 4px 4px 0 0; }
  .vertical-tabs-container .vertical-tab-content {
    display: block;
    position: relative;
    padding: 24px;
    background-color: #fff;
    border: none;
    border-radius: 0; }
    .vertical-tabs-container .vertical-tab-content h2 .selectbox {
      float: right; }
    .vertical-tabs-container .vertical-tab-content.scroll {
      max-height: 500px;
      overflow-y: auto; }
    .vertical-tabs-container .vertical-tab-content.colored {
      padding: 0;
      border-radius: 0;
      border: 0;
      background-color: transparent; }
      .vertical-tabs-container .vertical-tab-content.colored::before {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        content: "";
        display: block;
        height: 8px; }
      .vertical-tabs-container .vertical-tab-content.colored.lightblue::before {
        background-color: #71bcfc; }
      .vertical-tabs-container .vertical-tab-content.colored.blue::before {
        background-color: #2699FB; }
      .vertical-tabs-container .vertical-tab-content.colored.orange::before {
        background-color: #FE9902; }
      .vertical-tabs-container .vertical-tab-content.colored.green::before {
        background-color: #4AD991; }
      .vertical-tabs-container .vertical-tab-content.colored.red::before {
        background-color: #FF8268; }
      .vertical-tabs-container .vertical-tab-content.colored.gray::before {
        background-color: #95989A; }
      .vertical-tabs-container .vertical-tab-content.colored.darkgray::before {
        background-color: #6f7274; }
      .vertical-tabs-container .vertical-tab-content.colored.black::before {
        background-color: #000; }

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(100, 100, 100, 0.3);
  z-index: 80000000; }
  .modal .window {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    border-radius: 4px;
    padding: 30px;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    min-width: 500px;
    max-width: 600px;
    max-height: calc(100vh - 60px);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
    box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
    @media (max-width: 614px) {
      .modal .window {
        min-width: 0;
        max-width: calc(100vw - 40px);
        position: relative;
        top: auto;
        left: auto;
        margin: 24px auto 0;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0); } }
    .modal .window.scroll {
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch; }
    .modal .window .close {
      position: absolute;
      top: 20px;
      right: 20px;
      display: block;
      width: 24px;
      height: 24px;
      user-select: none;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 14px;
      background-image: url("../img/icons/cancel.svg");
      cursor: pointer; }
    .modal .window h1 {
      font-size: 18px;
      margin-bottom: 12px; }
    .modal .window h2 {
      font-size: 16px;
      text-align: center;
      padding: 24px 0; }
      .modal .window h2 .buttons {
        float: right;
        padding-top: 0; }
        .modal .window h2 .buttons .button,
        .modal .window h2 .buttons button {
          margin-left: 8px; }
    .modal .window h3 {
      font-size: 16px;
      padding-bottom: 12px; }
    .modal .window p {
      padding-bottom: 12px;
      font-size: 14px;
      line-height: 1.6; }
      .modal .window p.center {
        text-align: center; }
      .modal .window p.callout-message {
        width: 80%;
        text-align: center;
        margin: 0 auto;
        font-weight: 400;
        padding: 18px 0 30px; }
      .modal .window p a.link {
        color: #43425D;
        text-decoration: underline;
        cursor: pointer; }
    .modal .window label {
      display: block;
      padding: 0 0 8px;
      font-size: 12px; }
      .modal .window label.checkbox, .modal .window label.radio {
        font-size: 16px !important;
        cursor: pointer; }
        .modal .window label.checkbox input[type="checkbox"],
        .modal .window label.checkbox input[type="radio"], .modal .window label.radio input[type="checkbox"],
        .modal .window label.radio input[type="radio"] {
          margin-right: 15px;
          vertical-align: middle; }
      .modal .window label.button {
        padding: 10px 14px; }
      .modal .window label.cursor {
        cursor: pointer;
        user-select: none; }
    .modal .window table {
      table-layout: fixed;
      margin-bottom: 12px; }
      .modal .window table tr th {
        padding: 4px 16px; }
        .modal .window table tr th:first-child {
          padding-left: 0; }
        .modal .window table tr th:last-child {
          padding-right: 0; }
        .modal .window table tr th.left {
          text-align: left; }
        .modal .window table tr th.center {
          text-align: center; }
        .modal .window table tr th.right {
          text-align: right; }
      .modal .window table tr td {
        padding: 4px 16px;
        font-size: 12px; }
        .modal .window table tr td:first-child {
          padding-left: 0; }
        .modal .window table tr td:last-child {
          padding-right: 0; }
        .modal .window table tr td strong, .modal .window table tr td p {
          font-size: 14px; }
        .modal .window table tr td.no-pad {
          padding-right: 0;
          padding-left: 0; }
        .modal .window table tr td.no-wrap {
          white-space: nowrap; }
        .modal .window table tr td.left {
          text-align: left; }
        .modal .window table tr td.center {
          text-align: center; }
        .modal .window table tr td.right {
          text-align: right; }
        .modal .window table tr td button,
        .modal .window table tr td .button {
          margin-bottom: 0; }
        .modal .window table tr td span {
          display: inline-block;
          vertical-align: middle; }
        .modal .window table tr td .link {
          display: inline-block;
          cursor: pointer;
          user-select: none;
          margin: 0 10px;
          color: #e6ad01;
          vertical-align: middle; }
          .modal .window table tr td .link.no-margin {
            margin: 0; }
      .modal .window table.wide {
        width: 100%; }
      .modal .window table.no-fixed {
        table-layout: auto; }
      .modal .window table.top-aligned tr td {
        vertical-align: top; }
      .modal .window table.no-wrap {
        width: 100%; }
        .modal .window table.no-wrap tr td {
          white-space: nowrap; }
          .modal .window table.no-wrap tr td.wrap {
            white-space: normal; }
      .modal .window table.low-padding tr td {
        padding: 4px; }
      .modal .window table.sub-data {
        width: auto;
        table-layout: auto; }
        .modal .window table.sub-data.right {
          float: right; }
        .modal .window table.sub-data.wide {
          width: 100%; }
        .modal .window table.sub-data tr td {
          padding: 0 6px 0 0 !important;
          background: transparent;
          white-space: nowrap; }
      .modal .window table.right-paging {
        margin: 0 0 24px auto; }
      .modal .window table.center-paging {
        margin: 0 auto 24px; }
      .modal .window table.fields {
        margin: 0 auto 24px;
        table-layout: fixed; }
        .modal .window table.fields.bottomless {
          margin-bottom: 0; }
        .modal .window table.fields.not-centered {
          margin: 0 0 24px; }
        .modal .window table.fields tr td {
          padding: 0 2px;
          vertical-align: top; }
          .modal .window table.fields tr td .dropdown,
          .modal .window table.fields tr td input {
            margin: 0;
            max-width: 118px; }
      @media (max-width: 614px) {
        .modal .window table.collapsible {
          display: block; } }
      @media (max-width: 614px) {
        .modal .window table.collapsible tr {
          display: block; } }
      .modal .window table.collapsible tr td {
        vertical-align: top; }
        @media (max-width: 614px) {
          .modal .window table.collapsible tr td {
            display: block;
            padding: 0 0 12px; } }
    .modal .window .datatable table tr th,
    .modal .window .datatable table tr td {
      padding: 8px 6px;
      font-size: 14px; }
      .modal .window .datatable table tr th:first-child,
      .modal .window .datatable table tr td:first-child {
        padding-left: 6px; }
      .modal .window .datatable table tr th:last-child,
      .modal .window .datatable table tr td:last-child {
        padding-right: 6px; }
    .modal .window .datatable table tfoot tr td {
      font-size: 18px; }
    .modal .window .section {
      padding: 18px;
      border: 1px solid #d9d9d9;
      border-radius: 12px; }
    .modal .window .flash {
      text-align: center;
      padding: 12px 0; }
    .modal .window .buttons {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-gap: 8px;
      padding-top: 10px; }
      .modal .window .buttons.single {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr; }
      .modal .window .buttons.three {
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr; }
      .modal .window .buttons.four {
        -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr; }
      .modal .window .buttons.auto {
        -ms-grid-columns: auto;
        grid-template-columns: auto; }
      .modal .window .buttons button,
      .modal .window .buttons .button {
        font-size: 14px;
        margin: 0; }
      .modal .window .buttons.right {
        display: block;
        text-align: right;
        padding-bottom: 16px; }
        .modal .window .buttons.right button,
        .modal .window .buttons.right .button {
          margin-left: 8px; }
      .modal .window .buttons.no-top {
        padding-top: 0; }
      .modal .window .buttons.large-bottom {
        padding-bottom: 36px; }
      .modal .window .buttons.inline {
        display: inline-block; }
        .modal .window .buttons.inline button,
        .modal .window .buttons.inline .button {
          margin-right: 4px; }
      .modal .window .buttons.absolute-top-right {
        position: absolute;
        top: 8px;
        right: 74px;
        display: block;
        text-align: right; }
        .modal .window .buttons.absolute-top-right button,
        .modal .window .buttons.absolute-top-right .button {
          margin-left: 8px;
          font-size: 12px; }
    .modal .window.wide {
      width: calc(100vw - 200px); }
      .sidebar-collapsed .modal .window.wide {
        -webkit-transform: translate(calc(-50% + 22px), -50%);
        -moz-transform: translate(calc(-50% + 22px), -50%);
        -o-transform: translate(calc(-50% + 22px), -50%);
        transform: translate(calc(-50% + 22px), -50%); }
      .modal .window.wide h2 {
        text-align: left; }
    .modal .window.auto {
      max-width: calc(100% - 40px); }
    .modal .window.takeover {
      width: calc(100vw - 12px);
      height: calc(100vh - 12px);
      max-height: 100vh;
      max-width: 100vw;
      top: 50%;
      left: 50%;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      .modal .window.takeover h2 {
        text-align: left; }
      .modal .window.takeover h3 {
        padding-top: 20px; }
      .modal .window.takeover .center-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        text-align: center;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .modal .window.loading::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      border: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-image: url(../img/loading.gif);
      background-size: 65px;
      background-position: center;
      background-repeat: no-repeat; }

.template-editor {
  padding-left: 30px;
  padding-top: 14px;
  list-style: decimal; }
  .template-editor.single {
    padding-left: 0;
    list-style: none; }
  .template-editor li {
    position: relative; }
    .template-editor li .move-up,
    .template-editor li .move-down,
    .template-editor li .remove {
      position: absolute;
      display: block;
      cursor: pointer;
      width: 16px;
      height: 16px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms; }
    .template-editor li .move-up,
    .template-editor li .move-down {
      width: 24px;
      height: 24px;
      background-size: 12px;
      border-radius: 64px; }
      .template-editor li .move-up:hover,
      .template-editor li .move-down:hover {
        background-color: #e6e6e6; }
    .template-editor li .move-up {
      top: 58px;
      left: -32px;
      background-image: url("../img/icons/up-arrow-gray.svg"); }
    .template-editor li .move-down {
      top: 82px;
      left: -32px;
      background-image: url("../img/icons/down-arrow-gray.svg"); }
      .template-editor li .move-down.solo {
        top: 58px; }
    .template-editor li .remove {
      top: 14px;
      right: 14px;
      background-image: url("../img/icons/remove.svg"); }
    .template-editor li .buttons-right {
      text-align: right; }
  .template-editor > li {
    margin: 14px 0;
    padding: 4px 12px 0 12px;
    border: 4px solid #bfbfbf;
    border-radius: 18px; }
    .template-editor > li:first-child {
      margin-top: 0; }
    .template-editor > li:last-child {
      margin-bottom: 0; }
    .template-editor > li > input[type="text"] {
      margin: 12px 0 12px 0;
      width: calc(100% - 44px); }
    .template-editor > li table {
      width: 100%;
      margin-bottom: 12px; }
      .template-editor > li table thead tr th {
        font-weight: 500;
        font-size: 14px; }
        .template-editor > li table thead tr th.sort {
          width: 60px; }
        .template-editor > li table thead tr th.complete {
          text-align: center;
          width: 85px; }
        .template-editor > li table thead tr th.task_num {
          text-align: center;
          width: 60px; }
        .template-editor > li table thead tr th.duration_days {
          width: 200px; }
        .template-editor > li table thead tr th.assign_to {
          width: 150px; }
        .template-editor > li table thead tr th.due {
          width: 130px; }
        .template-editor > li table thead tr th.delete {
          width: 40px;
          text-align: right; }
      .template-editor > li table tbody tr td {
        border-bottom: 1px solid #f2f2f2; }
        .template-editor > li table tbody tr td .move-up,
        .template-editor > li table tbody tr td .move-down,
        .template-editor > li table tbody tr td .remove {
          display: inline-block;
          position: static; }
        .template-editor > li table tbody tr td.sort {
          text-align: right; }
        .template-editor > li table tbody tr td.complete {
          text-align: center; }
        .template-editor > li table tbody tr td.delete {
          text-align: right; }
        .template-editor > li table tbody tr td.task_num {
          text-align: center; }
        .template-editor > li table tbody tr td label.checkbox {
          cursor: pointer;
          font-size: 12px;
          font-weight: 500; }
          .template-editor > li table tbody tr td label.checkbox input {
            margin-right: 8px;
            vertical-align: text-bottom; }
        .template-editor > li table tbody tr td input[type="text"],
        .template-editor > li table tbody tr td input[type="number"] {
          padding: 4px 8px;
          margin: 0; }
      .template-editor > li table tbody tr:last-child td {
        border-bottom: none; }
    .template-editor > li .buttons-right {
      padding-right: 12px; }

.date-picker-wrap {
  display: inline-block;
  position: relative;
  vertical-align: middle; }

.date-picker {
  position: absolute;
  top: 100%;
  left: 0;
  color: #333;
  font: normal 14px sans-serif;
  border: 1px solid #ddd;
  display: inline-block;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(100, 100, 100, 0.5);
  z-index: 50000; }
  .date-picker.filter {
    display: none; }
    .date-picker.filter.open {
      display: inline-block; }

.date-picker > ._month {
  text-align: center;
  line-height: 22px;
  padding: 4px 10px;
  font-size: 12px;
  background: #fcfcfc;
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
  position: relative;
  border-radius: 4px 4px 0 0; }

.date-picker > ._month > button {
  display: inline-block;
  width: auto;
  padding: 4px;
  color: #555;
  font: normal 14px sans-serif;
  outline: none;
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer; }

.date-picker > ._month > button:hover {
  color: #333; }

.date-picker > ._month > button._previous {
  left: 10px; }

.date-picker > ._month > button._next {
  right: 10px; }

.date-picker > ._days {
  width: 210px;
  /* 30 x 7 */
  margin: 10px;
  text-align: center; }

.date-picker > ._days > ._day-of-week,
.date-picker > ._days > ._day {
  box-sizing: border-box;
  border: 1px solid transparent;
  width: 30px;
  line-height: 28px;
  float: left;
  border-radius: 4px; }

.date-picker > ._days > ._day-of-week {
  font-weight: bold; }

.date-picker > ._days > ._day.-padding {
  opacity: .5; }

.date-picker > ._days > ._day {
  cursor: pointer; }

.date-picker > ._days > ._day.-selected {
  background: #e0e0e0; }

.date-picker > ._days > ._day.-today {
  border-color: #aaa; }

.date-picker > ._days > ._day:hover {
  background: #eee; }

.date-picker > ._days:after {
  content: '';
  display: block;
  clear: left;
  height: 0; }

.project-view-box {
  margin-bottom: 24px;
  background: #fff;
  -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
  -moz-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
  -o-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3);
  box-shadow: 0 2px 2px rgba(100, 100, 100, 0.3); }
  .project-view-box header {
    position: relative;
    background: #484848; }
    .project-view-box header h3 {
      padding: 10px 20px;
      font-family: "Montserrat", Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: 500;
      font-style: italic;
      color: #fff;
      text-transform: uppercase; }
      .project-view-box header h3.bold {
        font-weight: 900; }
    .project-view-box header .buttons {
      position: absolute;
      top: 50%;
      right: 20px;
      text-align: right;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
      .project-view-box header .buttons .icon,
      .project-view-box header .buttons .icon-button {
        margin-left: 30px;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer; }
        .project-view-box header .buttons .icon::before,
        .project-view-box header .buttons .icon-button::before {
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 16px;
          height: 16px;
          margin-top: -3px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain; }
        .project-view-box header .buttons .icon.export::before,
        .project-view-box header .buttons .icon-button.export::before {
          background-image: url(../img/icons/import-export-white.svg); }
        .project-view-box header .buttons .icon.settings::before,
        .project-view-box header .buttons .icon-button.settings::before {
          width: 24px;
          height: 24px;
          background-image: url(../img/icons/gear-white.svg); }
        .project-view-box header .buttons .icon.edit::before,
        .project-view-box header .buttons .icon-button.edit::before {
          width: 24px;
          height: 24px;
          background-image: url(../img/icons/edit-white.svg); }
        .project-view-box header .buttons .icon.add::before,
        .project-view-box header .buttons .icon-button.add::before {
          width: 24px;
          height: 24px;
          background-image: url(../img/icons/plus-white.svg); }
        .project-view-box header .buttons .icon.close::before,
        .project-view-box header .buttons .icon-button.close::before {
          width: 24px;
          height: 24px;
          background-image: url(../img/icons/cancel-white.svg); }
        .project-view-box header .buttons .icon.full-screen::before,
        .project-view-box header .buttons .icon-button.full-screen::before {
          width: 24px;
          height: 24px;
          background-image: url(../img/icons/full-screen-white.svg); }
      .project-view-box header .buttons .icon-button::before {
        margin-right: 12px; }
  .project-view-box section {
    padding: 20px; }
    .project-view-box section.scroll {
      max-height: 500px;
      overflow-y: auto; }
    .project-view-box section h4 {
      font-size: 24px; }
      .project-view-box section h4 small {
        font-size: 16px; }
    .project-view-box section pre {
      padding: 20px;
      margin: 0 0 12px;
      max-height: 350px;
      overflow-y: auto;
      font-size: 14px;
      line-height: 20px;
      white-space: pre-line;
      word-break: break-all;
      background: #f2f2f2; }
      .project-view-box section pre:last-child {
        margin-bottom: 0; }
    .project-view-box section .bordered-project-view-box-item {
      position: relative;
      padding: 70px 20px 20px;
      background-color: #f7f7f7;
      border: 2px solid #d9d9d9;
      border-radius: 4px;
      margin-bottom: 20px; }
      .project-view-box section .bordered-project-view-box-item .corner-icons {
        position: absolute;
        top: 24px;
        right: 20px; }
        .project-view-box section .bordered-project-view-box-item .corner-icons .icon {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-left: 8px;
          user-select: none;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 16px;
          cursor: pointer;
          vertical-align: middle; }
          .project-view-box section .bordered-project-view-box-item .corner-icons .icon.edit {
            background-image: url("../img/icons/edit-gray.svg"); }
          .project-view-box section .bordered-project-view-box-item .corner-icons .icon.copy {
            background-image: url("../img/icons/copy-gray.svg"); }
          .project-view-box section .bordered-project-view-box-item .corner-icons .icon.pdf {
            background-image: url("../img/icons/pdf-gray.svg"); }
          .project-view-box section .bordered-project-view-box-item .corner-icons .icon.download {
            background-image: url("../img/icons/download-gray.svg"); }
          .project-view-box section .bordered-project-view-box-item .corner-icons .icon.close {
            background-image: url("../img/icons/cancel.svg"); }
      .project-view-box section .bordered-project-view-box-item .icon-button {
        margin-left: 30px;
        color: #fff;
        font-size: 16px;
        text-transform: uppercase;
        cursor: pointer; }
        .project-view-box section .bordered-project-view-box-item .icon-button::before {
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 16px;
          height: 16px;
          margin-top: -3px;
          margin-right: 6px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain; }
        .project-view-box section .bordered-project-view-box-item .icon-button.edit::before {
          background-image: url(../img/icons/edit-white.svg); }
        .project-view-box section .bordered-project-view-box-item .icon-button.add::before {
          background-image: url(../img/icons/plus-white.svg); }
      .project-view-box section .bordered-project-view-box-item h3 {
        position: absolute;
        top: 18px;
        max-width: calc(100% - 195px);
        margin-bottom: 30px;
        font-size: 24px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
        .project-view-box section .bordered-project-view-box-item h3.center {
          text-align: center; }
      .project-view-box section .bordered-project-view-box-item:last-child {
        margin-bottom: 0; }
    .project-view-box section table.wide {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto; }
      .project-view-box section table.wide .right {
        text-align: right; }
    .project-view-box section table.project-view-box-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 12px;
      table-layout: auto; }
      .project-view-box section table.project-view-box-table:last-child {
        margin-bottom: 0; }
      .project-view-box section table.project-view-box-table thead tr th {
        padding: 4px 8px;
        font-size: 16px;
        font-weight: 700;
        background-color: #fede7b; }
        .project-view-box section table.project-view-box-table thead tr th.left {
          text-align: left; }
        .project-view-box section table.project-view-box-table thead tr th.center {
          text-align: center; }
        .project-view-box section table.project-view-box-table thead tr th.right {
          text-align: right; }
      .project-view-box section table.project-view-box-table tbody tr td {
        padding: 10px 8px;
        font-size: 16px;
        font-weight: 500;
        vertical-align: top;
        border-bottom: 1px solid #d9d9d9; }
        .project-view-box section table.project-view-box-table tbody tr td.left {
          text-align: left; }
        .project-view-box section table.project-view-box-table tbody tr td.center {
          text-align: center; }
        .project-view-box section table.project-view-box-table tbody tr td.right {
          text-align: right; }
        .project-view-box section table.project-view-box-table tbody tr td.ellip {
          position: relative; }
          .project-view-box section table.project-view-box-table tbody tr td.ellip::before {
            content: ' ';
            visibility: hidden; }
          .project-view-box section table.project-view-box-table tbody tr td.ellip > span {
            position: absolute;
            left: 8px;
            right: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; }
      .project-view-box section table.project-view-box-table tbody tr:last-child td {
        border-bottom: 0; }
    .project-view-box section ul.project-view-box-list {
      margin-bottom: 12px; }
      .project-view-box section ul.project-view-box-list:last-child {
        margin-bottom: 0; }
      .project-view-box section ul.project-view-box-list li {
        padding: 4px 24px;
        background-color: #f2f2f2;
        border-radius: 4px;
        margin-bottom: 4px; }
        .project-view-box section ul.project-view-box-list li:last-child {
          margin-bottom: 0; }
        .project-view-box section ul.project-view-box-list li ul {
          display: table;
          width: 100%;
          table-layout: fixed; }
          .project-view-box section ul.project-view-box-list li ul li {
            display: table-cell;
            text-align: left;
            vertical-align: middle;
            padding: 4px; }
    .project-view-box section .buttons {
      padding-top: 24px;
      text-align: right; }
    .project-view-box section .user-icon {
      content: "";
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      margin-top: -3px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url(../img/icons/user-gray.svg); }
  .project-view-box.full-screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    z-index: 10; }

.milestone-string {
  position: relative;
  height: 48px;
  margin-bottom: 24px; }
  .milestone-string::before {
    position: absolute;
    top: 50%;
    left: 48px;
    right: 48px;
    content: "";
    display: block;
    background: #3B86FF;
    height: 3px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
  .milestone-string ul {
    display: table;
    width: 100%;
    margin: 0 auto; }
    .milestone-string ul li {
      display: table-cell; }
      .milestone-string ul li a {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 48px;
        height: 48px;
        text-align: center;
        cursor: pointer;
        user-select: none; }
        .milestone-string ul li a::before {
          position: absolute;
          top: 0;
          left: 50%;
          content: "";
          display: block;
          width: 48px;
          height: 48px;
          border: 3px solid #3B86FF;
          border-radius: 24px;
          background: #fff;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%); }
        .milestone-string ul li a span {
          position: absolute;
          left: 50%;
          top: calc(100% + 6px);
          white-space: nowrap;
          font-style: italic;
          font-size: 18px;
          font-weight: 400;
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%); }
        .milestone-string ul li a.progress::before {
          background: #ffc9a9; }
        .milestone-string ul li a.progress.complete::before {
          background: #ff7929; }
        .milestone-string ul li a.progress.complete::after {
          position: absolute;
          top: 0;
          left: 50%;
          content: "";
          display: block;
          width: 48px;
          height: 48px;
          border-radius: 24px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 18px;
          background-image: url(../img/icons/check-white.svg);
          -webkit-transform: translateX(-50%);
          -moz-transform: translateX(-50%);
          -o-transform: translateX(-50%);
          transform: translateX(-50%); }

.drag-n-drop-table {
  width: 100%; }
  .drag-n-drop-table > thead tr th {
    width: 380px;
    text-align: center; }
  .drag-n-drop-table > tbody > tr > td {
    vertical-align: top; }
    .drag-n-drop-table > tbody > tr > td > ul {
      padding: 12px;
      margin-bottom: 12px;
      background: #f2f2f2;
      border-radius: 4px;
      border: 2px solid #bfbfbf; }
      .drag-n-drop-table > tbody > tr > td > ul.dragover {
        border-color: #ff7929; }
      .drag-n-drop-table > tbody > tr > td > ul:last-child {
        margin: 0; }
      .drag-n-drop-table > tbody > tr > td > ul > li > label {
        display: block;
        text-align: center;
        font-size: 16px !important;
        font-weight: 700 !important; }
      .drag-n-drop-table > tbody > tr > td > ul > li > ul > li {
        position: relative;
        padding: 6px 12px;
        margin-bottom: 12px;
        font-size: 16px;
        border: 1px solid #bfbfbf;
        border-radius: 4px; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .left-label {
          position: absolute;
          left: 68px;
          text-align: left; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .right-label {
          text-align: right;
          float: right; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .move-up,
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .move-down {
          display: block;
          cursor: pointer;
          width: 24px;
          height: 24px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 12px;
          border-radius: 64px;
          float: left;
          -webkit-transition: all 300ms;
          -moz-transition: all 300ms;
          -o-transition: all 300ms;
          transition: all 300ms; }
          .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .move-up:hover,
          .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .move-down:hover {
            background-color: #e6e6e6; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .move-up {
          background-image: url("../img/icons/up-arrow-gray.svg"); }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li .move-down {
          margin-right: 8px;
          background-image: url("../img/icons/down-arrow-gray.svg"); }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li::after {
          content: "";
          display: block;
          clear: both; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li.draggable {
          cursor: grab;
          background: #fff; }
          .drag-n-drop-table > tbody > tr > td > ul > li > ul > li.draggable.dragging {
            cursor: grabbing;
            color: #43425D;
            background-color: #fec002; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li.candidate-after::before {
          content: "";
          position: absolute;
          top: calc(100% + 6px);
          left: 0;
          right: 0;
          height: 2px;
          background: #ff7929; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li.active {
          background: #fff; }
        .drag-n-drop-table > tbody > tr > td > ul > li > ul > li:last-child {
          margin: 0; }

.dial-gauge {
  --w: 200px;
  --b: 33px;
  width: var(--w);
  height: 100px;
  display: inline-block;
  aspect-ratio: 0.5;
  position: relative;
  overflow: hidden;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 200px;
  background-image: url(../img/guage-ring.svg); }
  .dial-gauge::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--w);
    height: 100px;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 200px;
    background-image: url(../img/guage-ring-over.svg); }
  .dial-gauge .gauge {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--w);
    height: 100px; }
    .dial-gauge .gauge::before {
      content: "";
      display: block;
      position: absolute;
      top: 5px;
      left: 5px;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: conic-gradient(#f2f2f2 calc(50.0 * 1%), #0000 0);
      -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
      mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg); }
    .dial-gauge .gauge::after {
      content: "";
      display: block;
      position: absolute;
      top: 5px;
      left: 5px;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
      -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
      mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg); }
  .dial-gauge .label {
    position: absolute;
    bottom: 8px;
    left: 50%;
    font-size: 20px;
    font-weight: bold;
    font-family: sans-serif;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }

.hours-logged {
  color: #ff7929;
  font-size: 22px;
  font-weight: 700; }
  .hours-logged.error {
    color: #da4545; }

.hours-left {
  color: #43425D;
  font-size: 16px;
  font-weight: 700; }

.last-logged {
  padding-top: 20px;
  color: #43425D;
  font-size: 14px;
  font-weight: 500; }

ul.file-list li {
  position: relative;
  margin-bottom: 12px;
  user-select: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #d9d9d9; }
  ul.file-list li:last-child {
    margin-bottom: 0; }
  ul.file-list li a {
    position: relative;
    display: block;
    padding: 12px 18px;
    text-decoration: none; }
    ul.file-list li a::before {
      content: ' ';
      visibility: hidden; }
    ul.file-list li a span {
      display: block;
      position: absolute;
      top: 12px;
      left: 18px;
      right: 108px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; }
  ul.file-list li table {
    table-layout: fixed;
    border-collapse: collapse; }
  ul.file-list li td {
    padding: 12px 18px; }
  ul.file-list li .icons {
    position: absolute;
    top: 50%;
    right: 18px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); }
    ul.file-list li .icons .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 12px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain; }
      ul.file-list li .icons .icon.edit {
        background-image: url("../img/icons/edit-gray.svg"); }
      ul.file-list li .icons .icon.copy {
        background-image: url("../img/icons/copy-gray.svg"); }
      ul.file-list li .icons .icon.remove {
        background-image: url("../img/icons/remove.svg"); }

ul.file-list.blue li a {
  color: #2699FB; }
  ul.file-list.blue li a .icons .icon.edit {
    background-image: url("../img/icons/edit-blue.svg"); }
  ul.file-list.blue li a .icons .icon.copy {
    background-image: url("../img/icons/copy-blue.svg"); }
  ul.file-list.blue li a .icons .icon.remove {
    background-image: url("../img/icons/remove-blue.svg"); }

ul.file-list.orange li a {
  color: #FE9902; }
  ul.file-list.orange li a .icons .icon.edit {
    background-image: url("../img/icons/edit-orange.svg"); }
  ul.file-list.orange li a .icons .icon.copy {
    background-image: url("../img/icons/copy-orange.svg"); }
  ul.file-list.orange li a .icons .icon.remove {
    background-image: url("../img/icons/remove-orange.svg"); }
  ul.file-list.orange li a.error {
    color: #da4545; }
    ul.file-list.orange li a.error .icons .icon.edit {
      background-image: url("../img/icons/edit-red.svg"); }
    ul.file-list.orange li a.error .icons .icon.copy {
      background-image: url("../img/icons/copy-red.svg"); }
    ul.file-list.orange li a.error .icons .icon.remove {
      background-image: url("../img/icons/remove-red.svg"); }

.progress-bar {
  position: relative;
  display: block;
  margin: 12px 0; }
  .progress-bar.no-margin {
    margin: 0; }
  .progress-bar .track {
    position: relative;
    display: block;
    height: 8px;
    background-color: #C8C8C8;
    border-radius: 4px; }
    .progress-bar .track .bar {
      position: relative;
      display: block;
      height: 8px;
      background-color: #ff7929;
      border-radius: 4px;
      -webkit-transition: all 300ms;
      -moz-transition: all 300ms;
      -o-transition: all 300ms;
      transition: all 300ms; }

#drop-file-zone {
  padding: 64px 30px;
  font-size: 18px;
  background-color: #EEE;
  border: 3px #999 dashed;
  border-radius: 12px; }
  #drop-file-zone #drag-upload-file {
    text-align: center;
    margin: 0 auto; }
  #drop-file-zone #drag-upload-file h3,
  #drop-file-zone #drag-upload-file p {
    color: #999;
    text-align: center; }
    #drop-file-zone #drag-upload-file h3:last-child,
    #drop-file-zone #drag-upload-file p:last-child {
      margin: 0;
      padding: 0; }
  #drop-file-zone #drag-upload-file #files-field {
    display: none; }
  #drop-file-zone.active {
    border-color: #4d9e44;
    background-color: #d8f0d6; }
    #drop-file-zone.active #drag-upload-file h3,
    #drop-file-zone.active #drag-upload-file p {
      color: #4d9e44; }

.image-container {
  position: relative;
  min-width: 100%;
  min-height: 360px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }
  .image-container.three-twenty {
    min-height: 180px; }
  .image-container.five-sixty {
    min-height: 315px; }
  .image-container.default {
    min-width: 100px;
    min-height: 100px;
    background-size: 100px auto;
    background-image: url(../img/icons/document-light-gray.svg); }
    .image-container.default.three-twenty {
      min-width: 320px;
      min-height: 180px; }
    .image-container.default.five-sixty {
      min-width: 560px;
      min-height: 315px; }
  .image-container.top {
    background-position: center top; }

.pill {
  display: inline-block;
  padding: 6px 14px;
  margin: 4px;
  border-radius: 24px;
  font-size: 12px;
  background: #f0f9ff;
  border: 2px solid #b7e0fb;
  color: #0098f6;
  user-select: none; }
  .pill strong {
    font-size: 12px !important;
    font-weight: 900;
    color: #43425D;
    white-space: nowrap; }
  .pill .pill-remove {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    user-select: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px;
    background-image: url("../img/icons/cancel-0098f6.svg");
    cursor: pointer; }

.toggle {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  user-select: none; }
  .toggle .toggle-control {
    position: relative;
    width: 36px;
    height: 22px;
    border: 2px solid #d9d9d9;
    border-radius: 16px;
    background-color: #d9d9d9;
    cursor: pointer; }
    .toggle .toggle-control::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 9px;
      border: 2px solid #d9d9d9;
      background-color: #fff; }
  .toggle.active .toggle-control {
    background: #ff7929;
    border-color: #ff7929; }
    .toggle.active .toggle-control::before {
      left: auto;
      right: 0;
      border-color: #ff7929; }

.ellipsis {
  white-space: nowrap;
  overflow: hidden; }

#library-content {
  display: grid;
  grid: auto / 1fr;
  gap: 24px;
  padding-top: 24px; }
  #library-content.playlist {
    max-width: 940px;
    margin: 0 auto;
    padding-top: 0; }
  #library-content .heading {
    position: relative;
    height: 76px;
    padding: 24px;
    background: #484848;
    border-radius: 12px; }
    body.development #library-content .heading {
      background-color: #2a5725; }
    body.staging #library-content .heading {
      background-color: #294f94; }
    #library-content .heading img {
      position: absolute;
      top: 50%;
      left: 20px;
      display: block;
      max-width: 100px;
      height: auto;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
    #library-content .heading h1 {
      position: absolute;
      top: 50%;
      right: 20px;
      font-size: 24px !important;
      font-weight: 900 !important;
      padding: 0 !important;
      margin: 0 !important;
      color: #fff !important;
      text-align: right;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
  .tray #library-content {
    height: calc(100vh - 250px);
    grid: auto / 1fr 400px; }
  .tray #library-content.filters {
    height: calc(100vh - 390px); }

#library-search > h3 {
  text-align: center; }

#library-search .search-input {
  display: grid;
  grid: auto / 1fr 150px 150px 150px;
  gap: 12px; }
  #library-search .search-input .search-input-text {
    position: relative; }
    #library-search .search-input .search-input-text button {
      position: absolute;
      top: 8px;
      right: 12px; }

#library-search .search-filters {
  display: grid;
  grid: auto / auto;
  gap: 12px; }
  #library-search .search-filters.has_tags {
    grid: auto / 1fr 400px; }

.tray #library-results {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: 12px 0 0 12px; }

#library-results .library-result {
  display: grid;
  grid: auto / 560px 1fr 240px;
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border: 4px solid #bfbfbf;
  border-radius: 12px; }
  .tray #library-results .library-result {
    grid: auto / auto; }
  .playlist #library-results .library-result {
    grid: auto / 560px 332px; }
    @media (max-width: 1000px) {
      .playlist #library-results .library-result {
        grid: auto / auto; } }
  #library-results .library-result:last-child {
    margin-bottom: 0; }
  #library-results .library-result.final {
    border-color: #4d9e44; }
  #library-results .library-result .library-result-media .image-container {
    position: relative;
    background-color: #f2f2f2;
    border: 1px solid #d9d9d9; }
    #library-results .library-result .library-result-media .image-container video, #library-results .library-result .library-result-media .image-container iframe {
      display: block; }
    #library-results .library-result .library-result-media .image-container audio {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%); }
    #library-results .library-result .library-result-media .image-container button, #library-results .library-result .library-result-media .image-container .button {
      position: absolute;
      top: 12px;
      right: 12px; }
  #library-results .library-result .library-result-media .details {
    padding-top: 6px; }
    #library-results .library-result .library-result-media .details table td {
      padding: 0 6px;
      vertical-align: bottom;
      font-size: 12px; }
      #library-results .library-result .library-result-media .details table td:first-child {
        padding-left: 0; }
      #library-results .library-result .library-result-media .details table td:last-child {
        padding-right: 0; }
      #library-results .library-result .library-result-media .details table td:nth-child(3) {
        padding-left: 40px; }
      #library-results .library-result .library-result-media .details table td strong {
        font-size: 16px; }
    #library-results .library-result .library-result-media .details table.no-wrap td {
      white-space: nowrap; }
  #library-results .library-result .library-result-details {
    padding: 0 20px 20px; }
    .tray #library-results .library-result .library-result-details {
      padding: 20px 0; }
    @media (max-width: 1000px) {
      .playlist #library-results .library-result .library-result-details {
        padding: 20px 0; } }
    #library-results .library-result .library-result-details h3 {
      width: 380px;
      font-size: 18px;
      font-weight: 900;
      padding: 0 0 20px;
      text-overflow: ellipsis;
      overflow: hidden; }
      .playlist #library-results .library-result .library-result-details h3 {
        width: 310px; }
    #library-results .library-result .library-result-details h4 {
      font-size: 18px;
      font-weight: 900;
      padding: 0 0 8px; }
      #library-results .library-result .library-result-details h4.green {
        color: #4d9e44; }
    #library-results .library-result .library-result-details table td {
      padding: 0 6px;
      vertical-align: bottom;
      font-size: 12px; }
      #library-results .library-result .library-result-details table td:first-child {
        padding-left: 0; }
      #library-results .library-result .library-result-details table td:last-child {
        padding-right: 0; }
      #library-results .library-result .library-result-details table td strong {
        font-size: 16px; }
      .playlist #library-results .library-result .library-result-details table td {
        vertical-align: top; }
        .playlist #library-results .library-result .library-result-details table td span {
          font-size: 16px; }
    #library-results .library-result .library-result-details table.no-wrap td {
      white-space: nowrap; }
    #library-results .library-result .library-result-details .buttons {
      padding-bottom: 8px; }
      #library-results .library-result .library-result-details .buttons button, #library-results .library-result .library-result-details .buttons .button {
        margin-right: 8px; }
        #library-results .library-result .library-result-details .buttons button:last-child, #library-results .library-result .library-result-details .buttons .button:last-child {
          margin-right: 0; }
  #library-results .library-result .library-result-tags .buttons {
    padding-bottom: 20px;
    text-align: right; }
    #library-results .library-result .library-result-tags .buttons button, #library-results .library-result .library-result-tags .buttons .button, #library-results .library-result .library-result-tags .buttons .icon {
      margin-left: 8px; }
      #library-results .library-result .library-result-tags .buttons button:first-child, #library-results .library-result .library-result-tags .buttons .button:first-child, #library-results .library-result .library-result-tags .buttons .icon:first-child {
        margin-left: 0; }
    #library-results .library-result .library-result-tags .buttons .icon.star {
      position: relative;
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-left: 12px;
      vertical-align: text-bottom;
      cursor: pointer; }
      #library-results .library-result .library-result-tags .buttons .icon.star::after {
        display: block;
        position: absolute;
        content: "";
        width: 24px;
        height: 24px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("../img/icons/star-empty.svg"); }
      #library-results .library-result .library-result-tags .buttons .icon.star.active::after {
        background-image: url("../img/icons/star-full.svg"); }
  #library-results .library-result .library-result-tags .tags {
    max-height: 300px;
    padding: 12px;
    border: 2px solid #b7e0fb;
    border-radius: 12px;
    overflow-y: auto;
    overflow-x: hidden; }
    #library-results .library-result .library-result-tags .tags h4 {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      padding-bottom: 8px; }

#library-tray {
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: 12px; }
  #library-tray h2 {
    font-size: 16px;
    font-weight: 900;
    text-align: center; }
  #library-tray h3 {
    font-size: 14px;
    text-align: center; }
  #library-tray .buttons {
    padding-top: 6px;
    text-align: right; }