@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

span.grey {
  color: #B7B7B7;
}

span.orange {
  color: #FDB753;
}

.visible {
  display: block !important;
  visibility: visible !important;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}

.with-shadow, .dashboard article.widget, .searchbar, article.contact, .sort ul.sortitems, .pagination ul li a,
.pagination ul li span.inactive, .filter ul.items, .filter, .content > section .neutral {
  box-shadow: 0 1px 2px 0 rgba(185, 201, 214, 0.35);
}

.with-smooth-corners, .notification-list .item, .dashboard article.widget, .searchbar, article.contact, .sort ul.sortitems, .pagination ul li a,
.pagination ul li span.inactive, .filter ul.items, .filter, .content > section .neutral, table thead,
.table thead {
  border-radius: 4px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  min-height: 100%;
}

body {
  background-color: #F7FAFC;
}

p, span, a, strong,
ul li,
h1, h2, h3, h4,
input, textarea,
table th, table td,
form legend, form label,
.vs__selected-options .vs__selected {
  font-family: 'Ubuntu', sans-serif;;
  font-weight: 300;
  font-size: 15.5px;
  color: #767676;
  line-height: 150%;
}

h1, h2, h3, h4,
h1 span, h2 span {
  font-family: 'Rubik', sans-serif;;
  line-height: 120%;
  font-size: 35px;
  font-weight: 500;
  color: #535353;
}
h1 span, h2 span, h3 span, h4 span,
h1 span span, h2 span span {
  display: block;
}

strong {
  font-weight: 500;
}

#app {
  height: inherit;
}

::-moz-selection {
  color: white;
  background: #FDB753;
}

::selection {
  color: white;
  background: #FDB753;
}

#workspace header {
  position: relative;
  display: block;
  z-index: 10;
}
#workspace header .head-actions {
  position: absolute;
  display: block;
  width: 40%;
  text-align: right;
  top: 35px;
  right: 0;
}
#workspace header .head-actions a {
  display: inline-block;
}

button,
.button {
  position: relative;
  display: inline-block;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms;
  outline: none;
}
button span,
.button span {
  display: inline-block;
  font-family: 'Rubik', sans-serif;;
  font-weight: 400;
  padding: 10px 30px;
}
button.primary,
.button.primary {
  background: #FDB753;
}
button.primary span,
.button.primary span {
  color: white;
}
button.primary:hover,
.button.primary:hover {
  background: #fda830;
}
button.secondary,
.button.secondary {
  background: #C3C3C3;
}
button.secondary span,
.button.secondary span {
  color: white;
}
button.secondary:hover,
.button.secondary:hover {
  background: #b1b1b1;
}
button.medium span,
.button.medium span {
  padding: 8px 15px;
  font-size: 14px !important;
}
button.danger,
.button.danger {
  background-color: #FA415E;
}
button.danger span,
.button.danger span {
  color: white;
}
button.danger:hover,
.button.danger:hover {
  background-color: #f9193c;
}
button.danger-hover:hover,
.button.danger-hover:hover {
  background-color: #FEDAE0;
}
button.danger-hover:hover span,
.button.danger-hover:hover span {
  color: #FA415E;
}
button.small span,
.button.small span {
  font-family: 'Ubuntu', sans-serif;;
  font-size: 10px;
  padding: 8px 12px;
  font-weight: bold;
  text-transform: uppercase;
}
button.small.with-icon,
.button.small.with-icon {
  display: flex;
  align-items: center;
}
button.small.with-icon span,
.button.small.with-icon span {
  padding-left: 0;
}
button.small.with-icon i.icon,
.button.small.with-icon i.icon {
  padding-left: 10px;
}
button.small i.icon,
.button.small i.icon {
  font-size: 8px;
  color: white;
  font-weight: bold;
  padding: 0 5px;
}
button.loading,
.button.loading {
  cursor: not-allowed;
}
button.loading.primary,
.button.loading.primary {
  background-color: #f6f6f6;
}
button.loading span.label,
.button.loading span.label {
  visibility: hidden;
}
button.loading span.loading-container,
.button.loading span.loading-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
}
button.danger.loading .loader,
.button.danger.loading .loader {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: white;
}

form input,
form textarea {
  display: block;
  border: 0;
  width: 100%;
  border-radius: 4px;
  padding: 15px 18px;
  background: #F9FAFB;
  border-bottom: 2px solid #F9FAFB;
  resize: none;
  outline: none;
  transition: all 200ms;
}
form input:focus,
form textarea:focus {
  border-bottom: 2px solid #eaedf1;
}
form input[disabled],
form textarea[disabled] {
  padding-left: 25px !important;
  color: #C3C3C3;
}
form fieldset {
  position: relative;
  display: block;
  margin-bottom: 25px;
}
form fieldset legend {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #FDB753;
  width: 100%;
  padding-left: 14px;
}
form fieldset strong {
  display: block;
  margin: 5px 16px;
  padding-top: 20px;
  clear: both;
  font-size: 12px;
  text-transform: uppercase;
}
form fieldset .field {
  position: relative;
  display: block;
  box-sizing: border-box;
  padding: 12px 15px 10px 15px;
  background: #F9FAFB;
  float: left;
  width: calc(50% - 8px);
  margin: 0 4px;
  margin-bottom: 8px;
  border-bottom: 2px solid #F9FAFB;
}
form fieldset .field label.fieldlabel {
  font-family: 'Ubuntu', sans-serif;;
  color: #B7B7B7;
  font-size: 11.5px;
  font-weight: 400;
  transition: all 150ms;
  text-transform: uppercase;
  margin-bottom: 8px;
}
form fieldset .field input,
form fieldset .field textarea {
  border-radius: 0;
  border: 0;
  background-color: transparent;
  padding: 5px 0;
}
form fieldset .field textarea {
  height: 80px;
}
form fieldset .field input:focus {
  border: 0;
}
form fieldset .field.required label:after {
  transition: all 400ms;
  content: " •";
  font-size: 17px;
  color: #C3C3C3;
  line-height: 0;
}
form fieldset .field.dropdown {
  padding: 0;
}
form fieldset .field.dropdown label {
  display: block;
  padding: 12px 15px 0 12px;
  margin-bottom: 1px;
}
form fieldset .field.switch .switch-holder {
  padding-top: 10px;
}
form fieldset .field.switch .vue-switcher--bold div {
  top: 0;
  height: 19px;
  width: 33px;
  background-color: #fdc26c;
}
form fieldset .field.switch .vue-switcher--bold div:after {
  height: 15px;
  width: 15px;
  top: 2px;
  margin-left: -18px;
  background-color: white;
}
form fieldset .field.switch .vue-switcher--bold--unchecked div {
  background-color: #f1f1f1;
}
form fieldset .field.switch .vue-switcher--bold--unchecked div:after {
  left: 21px;
  background-color: white;
}
form fieldset .field.calendar i.icon-calendar {
  position: absolute;
  display: block;
  top: 41px;
  left: 12px;
  font-size: 22px;
  cursor: pointer;
  color: #B7B7B7;
}
form fieldset .field.calendar input {
  padding-left: 25px;
  padding-bottom: 1px;
}
form fieldset .field:focus-within {
  border-bottom: 2px solid #eaedf1;
}
form fieldset .field:focus-within.required label:after {
  color: #FDB753;
}
form fieldset .field.full {
  width: 100%;
  margin-right: 4px;
  margin-left: 4px;
  clear: both;
}
form fieldset .field.single {
  clear: both;
  float: none;
}
form fieldset .field:hover label, form fieldset .field:hover i.icon {
  color: #535353;
}
form fieldset .field.locked .icon-lock-dark {
  position: absolute;
  display: block;
  top: 38px;
  color: #C3C3C3;
  font-size: 18px;
}
form fieldset .field.locked:hover {
  cursor: not-allowed;
}
form fieldset .field.locked:hover label, form fieldset .field.locked:hover input, form fieldset .field.locked:hover .icon {
  color: #C3C3C3;
  cursor: not-allowed;
}
form fieldset .field.error {
  border-bottom: 2px solid #FA415E;
}
form fieldset .field.error label {
  color: #FA415E;
}
form fieldset .field.error div.error {
  position: absolute;
  display: block;
  color: #FA415E;
  font-size: 22px;
  top: 35px;
  right: 20px;
  cursor: help;
  overflow: visible;
}
form fieldset .field.error div.error i {
  position: relative;
  display: block;
  z-index: 2;
}
form fieldset .field.error div.error span {
  position: absolute;
  display: block;
  visibility: hidden;
  transition: opacity 300ms;
  overflow: hidden;
  top: -6px;
  right: -8px;
  opacity: 0;
  background: #FEDAE0;
  color: #FA415E;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  padding: 8px 40px 8px 12px;
  width: auto;
  border-radius: 5px;
  z-index: 1;
}
form fieldset .field.error div.error:hover span {
  visibility: visible;
  opacity: 1;
}
form fieldset.boxed legend {
  display: block;
  padding-top: 25px;
  padding-bottom: 15px;
  border-top: 1px solid #dddddd;
}
form fieldset.boxed legend a.block-remove {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  right: 10px;
  top: 20px;
}
form fieldset.boxed legend a.block-remove i {
  font-size: 10px;
  color: #C3C3C3;
  transition: all 200ms;
}
form fieldset.boxed legend a.block-remove:hover i {
  color: #FA415E;
  transform: scale(0.7);
}
form .form-actions {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
  align-items: center;
  padding-right: 4px;
}
form .form-actions button {
  margin-left: 5px;
}
form .form-actions a {
  font-size: 13px;
}
form .form-actions.right {
  justify-content: flex-end;
}
form .form-actions.centered {
  justify-content: center;
}
form .notification {
  position: relative;
  display: block;
  padding: 20px 30px 20px 25px;
  border-radius: 4px;
}
form .notification span {
  font-size: 14px;
  font-weight: 500;
}
form .notification.success {
  background-color: #E7F7EC;
}
form .notification.success span {
  color: #74BD3F;
}
@media screen and (max-width: 1320px) {
  form fieldset .field {
    width: 47%;
  }
}
@media screen and (max-width: 1050px) {
  form fieldset .field {
    float: none;
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 1090px) {
  form .row input {
    padding: 12px 8px;
    font-size: 14px;
  }
  form .row.with-icon i.icon {
    top: 14px;
  }
  form ::-moz-placeholder {
    font-size: 14px;
  }
  form ::placeholder {
    font-size: 14px;
  }
}
@media screen and (max-width: 750px) {
  form .form-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  form .form-actions a {
    margin-bottom: 10px;
  }
}

::-moz-placeholder {
  font-family: 'Ubuntu', sans-serif;;
  font-size: 15px;
  color: #ABB7BA;
}

::placeholder {
  font-family: 'Ubuntu', sans-serif;;
  font-size: 15px;
  color: #ABB7BA;
}

a {
  text-decoration: none;
  color: #FDB753;
  outline: none;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a.back:before {
  content: "← ";
}

p a:hover,
a.textlink:hover {
  text-decoration: underline;
}

table,
.table {
  width: 100%;
}
table th, table td,
.table th,
.table td {
  padding-left: 20px;
  padding-right: 20px;
}
table thead,
.table thead {
  background: #F9FAFB;
}
table thead tr th,
.table thead tr th {
  font-family: 'Rubik', sans-serif;;
  font-weight: 500;
  font-size: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
  text-transform: uppercase;
}
table thead tr th.context-holder,
.table thead tr th.context-holder {
  width: 10px;
}
table thead tr th.responsive-hide,
.table thead tr th.responsive-hide {
  display: none;
}
table thead.small,
.table thead.small {
  background: transparent;
}
table thead.small tr th,
.table thead.small tr th {
  font-size: 11px;
  padding-top: 0;
  padding-bottom: 10px;
}
table tbody tr td,
.table tbody tr td {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 140%;
  font-size: 13px;
  vertical-align: middle;
}
table tbody tr td span,
table tbody tr td a,
table tbody tr td strong,
.table tbody tr td span,
.table tbody tr td a,
.table tbody tr td strong {
  font-size: 13px;
  line-height: 140%;
}
table tbody tr td.context-holder i,
.table tbody tr td.context-holder i {
  transform: rotate(90deg);
  color: #C3C3C3;
}
table tbody tr td.context-holder:hover,
.table tbody tr td.context-holder:hover {
  color: #535353;
}
table tbody tr td.responsive-hide,
.table tbody tr td.responsive-hide {
  display: none;
}
table tbody tr:hover,
.table tbody tr:hover {
  cursor: pointer;
  background: #f9fafb;
}
table tbody tr.no-entries:hover,
.table tbody tr.no-entries:hover {
  cursor: default;
  background: transparent !important;
}
table .right,
.table .right {
  text-align: right;
}
@media screen and (max-width: 750px) {
  table .only-big-screens,
  .table .only-big-screens {
    display: none;
  }
}

@font-face {
  font-family: "icons";
  src: url("../fonts/icons/icons-common.eot?668c30b506f331fa2ac1b7ea71049da1");
  src: url("../fonts/icons/icons-common.eot?668c30b506f331fa2ac1b7ea71049da1#iefix") format("embedded-opentype"), url("../fonts/icons/icons-common.woff?668c30b506f331fa2ac1b7ea71049da1") format("woff"), url("../fonts/icons/icons-common.ttf?668c30b506f331fa2ac1b7ea71049da1") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.icon {
  font-family: "icons";
  display: inline-block;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
  content: "\f101";
}

.icon-lock:before {
  content: "\f102";
}

.icon-arrow-left:before {
  content: "\f103";
}

.icon-contact:before {
  content: "\f104";
}

.icon-group:before {
  content: "\f105";
}

.icon-archive:before {
  content: "\f106";
}

.icon-home:before {
  content: "\f107";
}

.icon-settings:before {
  content: "\f108";
}

.icon-search:before {
  content: "\f109";
}

.icon-arrow-down:before {
  content: "\f10a";
}

.icon-dots:before {
  content: "\f10b";
}

.icon-trash:before {
  content: "\f10c";
}

.icon-heart:before {
  content: "\f10d";
}

.icon-pen:before {
  content: "\f10e";
}

.icon-grid:before {
  content: "\f10f";
}

.icon-list:before {
  content: "\f110";
}

.icon-cross:before {
  content: "\f111";
}

.icon-danger:before {
  content: "\f112";
}

.icon-filterarrows:before {
  content: "\f113";
}

.icon-logout:before {
  content: "\f114";
}

.icon-face:before {
  content: "\f115";
}

.icon-round-ok:before {
  content: "\f116";
}

.icon-round-error:before {
  content: "\f117";
}

.icon-round-warning:before {
  content: "\f118";
}

.icon-dashboard:before {
  content: "\f119";
}

.icon-add:before {
  content: "\f11a";
}

.icon-calendar:before {
  content: "\f11b";
}

.icon-lock-dark:before {
  content: "\f11c";
}

.icon-note:before {
  content: "\f11d";
}

#app-container {
  display: flex;
  height: inherit;
  height: 100vh;
  overflow: hidden;
}
#app-container h1, #app-container h2 {
  font-size: 28px;
  font-weight: 400;
}
#app-container main h1,
#app-container main h3 {
  padding-left: 8px;
}
#app-container nav#navigator {
  flex: 0 0 100px;
  position: relative;
  box-shadow: 0 0 5px 0 #DAE5E8;
  z-index: 3;
}
#app-container nav#sidenavigator {
  flex: 0 0 350px;
  position: relative;
  padding-top: 12px;
  overflow: scroll;
  z-index: 2;
}
#app-container main#workspace {
  position: relative;
  flex: 1 1 auto;
  z-index: 1;
}
#app-container .navigator {
  background: white;
  transition: all 400ms;
}
#app-container .navigator > .inner {
  transition: opacity 300ms;
  padding: 25px 30px;
}
#app-container button.collapse-trigger {
  position: fixed;
  display: block;
  width: 28px;
  height: 28px;
  top: 35px;
  left: 438px;
  box-shadow: 0 0 5px 0 #DAE5E8;
  border-radius: 30px;
  background: white;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 400ms;
}
#app-container button.collapse-trigger i.icon {
  position: absolute;
  display: block;
  top: 8px;
  left: 10px;
  font-size: 12px;
  color: #767676;
}
#app-container button.collapse-trigger:hover {
  border: 0;
  box-shadow: 0 0 5px 0 #FDB753;
}
#app-container button.collapse-trigger:hover i.icon {
  color: #FDB753;
}
#app-container button.collapse-trigger.visible {
  opacity: 1;
  visibility: visible;
}
#app-container .scroll-area {
  height: 100%;
  overflow: hidden;
  padding: 0 40px 40px;
}
#app-container.with-sidebar #navigator,
#app-container.with-sidebar #sidenavigator,
#app-container.with-sidebar #workspace,
#app-container.with-sidebar button.collapse-trigger,
#app-container.with-sidebar .scroll-area, #app-container.with-modal #navigator,
#app-container.with-modal #sidenavigator,
#app-container.with-modal #workspace,
#app-container.with-modal button.collapse-trigger,
#app-container.with-modal .scroll-area {
  z-index: 1;
  overflow: hidden !important;
}
#app-container.with-sidebar button.collapse-trigger, #app-container.with-modal button.collapse-trigger {
  display: none !important;
}
#app-container.with-sidebar #workspace, #app-container.with-modal #workspace {
  z-index: 20;
}
#app-container.group-modal #workspace {
  z-index: 0 !important;
}
#app-container.collapsed nav#sidenavigator {
  flex: 0 0 0px !important;
  z-index: 1;
}
#app-container.collapsed nav#sidenavigator .inner {
  opacity: 0;
}
#app-container.collapsed button.collapse-trigger {
  left: 85px;
}
#app-container.collapsed button.collapse-trigger i.icon {
  top: 8px;
  left: 5px;
  transform: rotate(180deg);
}
@media screen and (max-width: 750px) {
  #app-container {
    flex-direction: column;
  }
  #app-container nav#navigator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110px;
  }
  #app-container nav#sidenavigator {
    padding-top: 100px;
    flex: 0 0 auto;
  }
  #app-container main#workspace {
    padding: 40px 20px;
  }
  #app-container button.collapse-trigger {
    width: 22px;
    height: 22px;
    left: auto;
    right: 30px;
    top: 100px;
    box-shadow: 0 0 5px 0 #DAE5E8 !important;
  }
  #app-container button.collapse-trigger i.icon {
    top: 8px;
    left: 6px;
    font-size: 10px;
    transform: rotate(90deg);
    color: #767676 !important;
  }
  #app-container.collapsed button.collapse-trigger {
    left: auto;
    right: 30px;
  }
  #app-container.collapsed button.collapse-trigger i.icon {
    top: 4px;
    left: 7px;
    font-size: 10px;
    transform: rotate(-90deg);
  }
}

#front-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
}
#front-container .container {
  position: relative;
  flex: 0 0 80%;
  display: grid;
  grid-template-columns: 55% 45%;
  background: #FFFFFF;
  box-shadow: 2px 12px 71px -19px rgba(151, 151, 151, 0.5);
  border-radius: 14px;
  max-width: 1040px;
  height: 580px;
  overflow: hidden;
}
#front-container .container #logo {
  position: absolute;
  top: 50px;
  left: 90px;
}
#front-container .container #logo a {
  display: inline-block;
  width: 100px;
}
#front-container .container #logo a img {
  width: 100%;
}
#front-container .container main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 90px 120px 90px;
}
#front-container .container main .inner .intro {
  display: block;
  margin: 30px 0;
}
#front-container .container figure {
  background-image: url("../images/lemons.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -50px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  height: inherit;
  overflow: hidden;
}
#front-container .container main form .row {
  position: relative;
  display: block;
  margin-bottom: 15px;
}
#front-container .container main form .row.with-icon i.icon {
  position: absolute;
  display: block;
  left: 14px;
  top: 18px;
  font-size: 18px;
  color: #ABB7BA;
}
#front-container .container main form .row.with-icon input {
  padding-left: 45px;
}
#front-container .container main form .row.error {
  position: relative;
  display: block;
}
#front-container .container main form .row.error input {
  border-bottom: 2px solid #FA415E;
}
#front-container .container main form .row.error div.error-message {
  position: absolute;
  display: block;
  top: 20px;
  right: 15px;
  width: 20px;
  height: 20px;
}
#front-container .container main form .row.error div.error-message span {
  position: absolute;
  display: block;
  visibility: hidden;
  transition: opacity 300ms;
  overflow: hidden;
  top: -8px;
  right: -8px;
  opacity: 0;
  background: #FEDAE0;
  color: #FA415E;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  padding: 8px 40px 8px 12px;
  width: auto;
  border-radius: 5px;
  z-index: 1;
}
#front-container .container main form .row.error div.error-message i.icon-danger {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  color: #FA415E !important;
  cursor: help;
  z-index: 2;
}
#front-container .container main form .row.error div.error-message:hover span {
  visibility: visible;
  opacity: 1;
}
#front-container.single {
  position: relative;
  display: block;
  height: auto;
  padding: 80px 0;
}
#front-container.single .container {
  display: block;
  margin: 0 auto;
  width: 70%;
  max-width: 800px;
  min-width: 400px;
  height: auto;
}
#front-container.single .container #logo {
  left: 55px;
}
#front-container.single .container main {
  padding-left: 40px;
  padding-bottom: 40px;
}
#front-container.single .container main h1 {
  margin-bottom: 40px;
  margin-left: 11px;
}
@media screen and (max-width: 1090px) {
  #front-container .container {
    height: 500px;
  }
  #front-container .container #logo {
    top: 30px;
    left: 40px;
  }
  #front-container .container #logo a {
    width: 80px;
  }
  #front-container .container main {
    padding: 80px 40px;
  }
  #front-container .container main header {
    margin-bottom: 0;
  }
  #front-container .container main header h1,
  #front-container .container main header h1 span {
    font-size: 28px;
  }
  #front-container .container main header h1 span {
    display: none;
  }
  #front-container .container main .inner .intro {
    margin: 20px 0;
  }
}
@media screen and (max-width: 850px) {
  #front-container .container {
    flex: 0 0 85%;
    grid-template-columns: 60% 40%;
  }
}
@media screen and (max-width: 750px) {
  #front-container .container {
    flex: 0 0 85%;
    grid-template-columns: 100% 0;
    height: 420px;
  }
  #front-container .container main .inner h1 {
    margin-bottom: 20px;
  }
  #front-container .container main .inner .intro {
    display: none;
  }
}

figure.avatar {
  position: relative;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow-x: hidden;
}
figure.avatar span {
  position: relative;
  display: flex !important;
  font-family: 'Rubik', sans-serif;;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 50px;
}
figure.avatar span.green {
  color: #75B641;
  background-color: #E7F7EC;
}
figure.avatar span.grey {
  color: #767676;
  background-color: #EDF1F4;
}
figure.avatar span.violet {
  color: #8D9CEB;
  background-color: #E0E5FF;
}
figure.avatar span.okar {
  color: #FDB753;
  background-color: #FCE6D4;
}
figure.avatar span.blue {
  color: #8BBDED;
  background-color: #DFEEFD;
}
figure.avatar[data-size=tiny] {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
figure.avatar[data-size=tiny] span {
  font-size: 15px;
}
figure.avatar[data-size=small] {
  width: 45px;
  height: 45px;
  border-radius: 45px;
}
figure.avatar[data-size=small] span {
  font-size: 15px;
}
figure.avatar[data-size=regular] {
  width: 65px;
  height: 65px;
  border-radius: 65px;
}
figure.avatar[data-size=regular] span {
  font-size: 12px;
}
figure.avatar[data-size=medium] {
  width: 130px;
  height: 130px;
  border-radius: 130px;
}
figure.avatar[data-size=big] {
  width: 200px;
  height: 200px;
  border-radius: 280px;
}

.content > section {
  margin-top: 40px;
}
.content > section h3 {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 5px;
  height: 22px;
}
.content > section h3 span {
  display: inline-block;
  color: #B9C9D6;
  font-family: 'Rubik', sans-serif;;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}
.content > section h3 span.count {
  display: inline-block;
  padding-left: 5px;
  font-style: italic;
  font-size: 14px;
  color: #FDB753;
}
.content > section h3 i.loader {
  margin-left: 8px;
}
.content > section .neutral {
  background: white;
  padding: 8px;
}

.filter {
  position: relative;
  display: inline-block;
  padding: 12px;
  padding-right: 35px;
  background: white;
  z-index: 100;
  cursor: pointer;
}
.filter span,
.filter ul.items li a {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.filter span i.icon {
  position: absolute;
  display: block;
  top: 15px;
  right: 10px;
  color: #ABB7BA;
}
.filter ul.items {
  position: absolute;
  display: block;
  left: 0;
  top: 46px;
  width: auto !important;
  white-space: nowrap;
  min-width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms;
  background: white;
  z-index: 11;
  overflow: hidden;
}
.filter ul.items li {
  border-bottom: 1px solid #F9FAFB;
}
.filter ul.items li a {
  display: block;
  padding: 10px 22px 10px 12px;
  color: #767676;
  font-size: 11.5px;
}
.filter ul.items li a:hover {
  background: #F9FAFB;
}
.filter ul.items li a.active {
  color: #FDB753;
}
.filter ul.items li.no-filter i.icon {
  position: relative;
  display: inline-block;
  font-size: 7px;
  top: -1px;
  padding-right: 3px;
}
.filter ul.items li.no-filter a {
  color: #ABB7BA;
}
.filter.active > span {
  color: #FDB753;
}
.filter.open span {
  color: #FDB753;
}
.filter.open ul.items {
  opacity: 1;
  visibility: visible;
}

.filterbar {
  margin-top: 20px;
}
.filterbar .filter {
  margin-right: 15px;
}

#functions-manager .functions-list-container {
  position: relative;
  display: block;
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 40px;
  border-bottom: 1px dotted #C3C3C3;
}
#functions-manager .functions-list-container table.functions-list th, #functions-manager .functions-list-container table.functions-list td {
  padding-left: 17px;
}
#functions-manager .functions-list-container table.functions-list td {
  vertical-align: top;
}
#functions-manager .functions-list-container table.functions-list td span {
  display: block;
}
#functions-manager .functions-list-container table.functions-list td a.delete {
  color: #B9C9D6;
}
#functions-manager .functions-list-container table.functions-list tr {
  cursor: default;
}
#functions-manager form h4 {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  padding: 20px 0 20px 15px;
}
#functions-manager form .form-actions {
  margin-top: 0;
}

#app-container ul.grid {
  display: grid;
  grid-gap: 14px;
  transition: all 300ms;
}
#app-container ul.grid .inner-enter-active,
#app-container ul.grid .inner-leave-active {
  transition: all 350ms;
}
#app-container ul.grid .inner-enter,
#app-container ul.grid .inner-leave-to {
  transform: translateY(40px);
  opacity: 0;
}
#app-container ul.grid .inner-move {
  transition: transform 350ms;
}
#app-container ul.grid.searching {
  opacity: 0.3;
}
@media screen and (min-width: 100px) {
  #app-container ul.grid {
    grid-template-columns: 100%;
  }
}
@media screen and (min-width: 450px) {
  #app-container ul.grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 1050px) {
  #app-container ul.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1250px) {
  #app-container ul.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1450px) {
  #app-container ul.grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1650px) {
  #app-container ul.grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (min-width: 1850px) {
  #app-container ul.grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media screen and (min-width: 2050px) {
  #app-container ul.grid {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media screen and (min-width: 2250px) {
  #app-container ul.grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
#app-container ul.grid .no-entries {
  grid-gap: 0;
  grid-template-columns: 100% !important;
}
@media screen and (min-width: 100px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: 100%;
  }
}
@media screen and (min-width: 450px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 890px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1050px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1250px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media screen and (min-width: 1450px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (min-width: 1650px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media screen and (min-width: 1850px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media screen and (min-width: 2050px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media screen and (min-width: 2250px) {
  #app-container.collapsed ul.grid {
    grid-template-columns: repeat(9, 1fr);
  }
}

.group-list .group {
  position: relative;
  display: grid;
  grid-template-columns: 65px 200px;
  padding: 8px;
  border-radius: 50px;
  margin-bottom: 10px;
}
.group-list .group figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  font-weight: 400;
  color: #92D3C0;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #E6F8F3;
  text-transform: uppercase;
}
.group-list .group .details {
  padding-top: 5px;
}
.group-list .group .details h4 {
  position: relative;
  font-size: 15px;
  line-height: 100%;
}
.group-list .group .details span {
  font-size: 13px;
  line-height: 100%;
}
.group-list .group i.icon-lock-dark {
  position: absolute;
  display: block;
  top: 25px;
  right: 20px;
  font-size: 20px;
  color: #c4c4c4;
}
.group-list .group .icon-dots {
  position: absolute;
  display: none;
  top: 30px;
  right: 20px;
  width: 20px;
  height: 15px;
  font-size: 20px;
  color: #767676;
}
.group-list .group .icon-dots:hover {
  color: #535353;
}
.group-list .group:hover {
  background-color: #fcfdfd;
}
.group-list .group:hover .icon-dots {
  display: block;
}
.group-list .group.active {
  background-color: #f7f9fa;
}
.group-list .group.active .icon-dots {
  display: block;
}
@media screen and (max-width: 750px) {
  .group-list .group .icon-dots {
    display: none !important;
  }
}

.listview-switch {
  display: inline-block;
  width: 55px;
  height: 20px;
}
.listview-switch a {
  position: relative;
  display: block;
  float: left;
  font-size: 0;
  line-height: 0;
}
.listview-switch a i {
  color: #C3C3C3;
  font-size: 18px;
}
.listview-switch a.grid {
  margin-right: 4px;
}
.listview-switch a.list {
  margin-left: 4px;
}
.listview-switch a.list i {
  padding-top: 1px;
  font-size: 19px;
}
.listview-switch a.active i {
  color: #535353 !important;
}
@media screen and (max-width: 750px) {
  .listview-switch {
    display: none;
  }
}

.loader-container {
  position: relative;
  display: block;
  text-align: center;
  padding: 20px;
}
.loader-container .loader {
  display: inline-block;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid #e7e7e7;
  border-top: 3px solid #FDB753;
  border-radius: 50%;
  animation: loader 1s linear infinite;
  z-index: 10;
}
.loader[data-size=small] {
  border-width: 2px;
  width: 24px;
  height: 24px;
}
.loader[data-size=tiny] {
  border-width: 2px;
  width: 18px;
  height: 18px;
}
.loader[data-size=mini] {
  border-width: 1px;
  width: 14px;
  height: 14px;
}
.loader.content {
  border-color: #e9e9e9;
  border-top-color: #B9C9D6;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.multioption {
  position: relative;
  display: inline-block;
}
.multioption .multioption-trigger {
  position: relative;
  display: inline-block;
  border-radius: 4px;
  background: #FDB753;
  padding: 8px 50px 8px 14px;
}
.multioption .multioption-trigger span.label {
  font-family: 'Rubik', sans-serif;;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  color: white;
}
.multioption .multioption-trigger span.icon-holder {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 40px;
  top: 0;
  right: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
}
.multioption .multioption-trigger span.icon-holder i {
  color: white;
  font-size: 10px;
  margin-top: 8px;
}
.multioption .multioption-trigger:hover {
  background: #fdaf3f;
}
.multioption .multioption-options {
  position: absolute;
  display: none;
  width: 100%;
  background-color: #FDCC8D;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
  z-index: 100;
}
.multioption .multioption-options a {
  display: block;
  padding: 12px 10px;
  color: white;
  font-size: 10px;
  font-weight: 500;
  white: 100%;
  transition: all 150ms;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.multioption .multioption-options a:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: #535353;
}
.multioption .multioption-options a:last-child {
  border-bottom: 0;
}
.multioption.open .multioption-trigger {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #fdaf3f;
}
.multioption.open .multioption-options {
  display: block;
}

nav#navigator {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
nav#navigator > ul,
nav#navigator ul.responsive-navigator {
  display: block;
}
nav#navigator > ul li,
nav#navigator ul.responsive-navigator li {
  margin-top: 15px;
}
nav#navigator > ul li a,
nav#navigator ul.responsive-navigator li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  border-radius: 65px;
  margin: 0 auto;
}
nav#navigator > ul li a i.icon,
nav#navigator ul.responsive-navigator li a i.icon {
  transition: all 300ms;
  font-size: 25px;
  color: #cbcbcb;
}
nav#navigator > ul li a:hover,
nav#navigator ul.responsive-navigator li a:hover {
  text-decoration: none;
}
nav#navigator > ul li a:hover i.icon,
nav#navigator ul.responsive-navigator li a:hover i.icon {
  color: #B7B7B7;
}
nav#navigator > ul li a.router-link-exact-active,
nav#navigator ul.responsive-navigator li a.router-link-exact-active {
  background-color: #F9FAFB;
}
nav#navigator > ul li a.router-link-exact-active i.icon, nav#navigator > ul li a.router-link-exact-active:hover i.icon,
nav#navigator ul.responsive-navigator li a.router-link-exact-active i.icon,
nav#navigator ul.responsive-navigator li a.router-link-exact-active:hover i.icon {
  color: #FDB753 !important;
}
nav#navigator > ul li:not(.home) a.router-link-active,
nav#navigator ul.responsive-navigator li:not(.home) a.router-link-active {
  background-color: #F9FAFB;
}
nav#navigator > ul li:not(.home) a.router-link-active i.icon, nav#navigator > ul li:not(.home) a.router-link-active:hover i.icon,
nav#navigator ul.responsive-navigator li:not(.home) a.router-link-active i.icon,
nav#navigator ul.responsive-navigator li:not(.home) a.router-link-active:hover i.icon {
  color: #FDB753 !important;
}
nav#navigator > ul > li.group i.icon,
nav#navigator ul.responsive-navigator > li.group i.icon {
  font-size: 32px;
  margin-top: 8px;
}
nav#navigator ul.bottom {
  margin-bottom: 20px;
}
nav#navigator ul.responsive-navigator {
  display: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
nav#navigator ul.responsive-navigator li {
  margin: 0;
}
nav#navigator ul.responsive-navigator li a {
  width: 55px;
  height: 55px;
}
nav#navigator ul.responsive-navigator li a i.icon {
  font-size: 25px;
}
nav#navigator ul.responsive-navigator li.group a i.icon {
  font-size: 28px;
}
nav#navigator .responsive {
  display: none;
}
@media screen and (max-width: 750px) {
  nav#navigator {
    padding: 0 10px;
    z-index: 5;
  }
  nav#navigator ul:not(.responsive-navigator) {
    display: none;
  }
  nav#navigator .responsive {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  nav#navigator .responsive .responsive-navigator {
    display: flex;
  }
}

.no-entries-container {
  display: block;
  text-align: left;
  padding-left: 8px;
}
.no-entries-container span {
  font-style: italic;
  color: #ABB7BA;
  font-size: 14px;
}

.notes {
  margin-top: 20px;
}
.notes li article.note {
  position: relative;
  display: block;
  padding-left: 90px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  overflow: hidden;
  min-height: 100px;
}
.notes li article.note figure.avatar {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
}
.notes li article.note .inner-container > header {
  margin-bottom: 10px;
  padding: 0;
  padding-top: 5px;
}
.notes li article.note .inner-container > header h3 {
  padding-left: 0 !important;
  font-size: 15px;
  color: #767676;
  padding-bottom: 2px;
}
.notes li article.note .inner-container > header span.date, .notes li article.note .inner-container > header span.date a {
  color: #C3C3C3;
  font-size: 14px;
  font-weight: 400;
}
.notes li article.note .inner-container > header span.date a {
  font-weight: bold;
  color: #FDB753;
}
.notes li article.note .inner-container > header .icon-trash {
  position: absolute;
  display: block;
  top: 10px;
  right: 20px;
  font-size: 14px;
  color: #C3C3C3;
}
.notes li article.note .inner-container > header .icon-trash:hover {
  color: #FA415E;
}
.notes li article.note .body p {
  font-size: 15px;
  line-height: 140%;
  width: 90%;
}
.notes li article.note:before {
  content: "";
  position: absolute;
  display: block;
  top: 80px;
  left: 30px;
  width: 2px;
  height: 100%;
  border-left: 1px dashed #C3C3C3;
}
.notes li:last-of-type article:before {
  display: none;
}

.page-notification {
  position: relative;
  display: block;
  padding: 20px;
  border-radius: 5px;
}
.page-notification strong {
  display: inline-block;
  font-weight: 500;
  padding-right: 4px;
}
.page-notification span {
  display: inline-block;
}
.page-notification.error {
  background-color: #FEDAE0;
}
.page-notification.error span, .page-notification.error strong {
  color: #FA415E !important;
}
.page-notification.warning {
  background-color: #FFF9DB;
}
.page-notification.success {
  background-color: #E7F7EC;
}
.page-notification.success span, .page-notification.success strong {
  color: #75B641 !important;
}

.pagination {
  position: relative;
  display: block;
  margin: 40px 0;
}
.pagination ul {
  display: flex;
  justify-content: center;
}
.pagination ul li a,
.pagination ul li span.inactive {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 30px;
  font-weight: 500;
  font-size: 12px;
  background-color: white;
  margin: 0 3px;
  padding: 0 10px;
}
.pagination ul li span.inactive,
.pagination ul li:first-of-type a,
.pagination ul li:last-of-type a {
  background: none;
  box-shadow: none !important;
  font-size: 15px;
}
.pagination ul li.active a {
  color: #535353;
}

.search {
  position: relative;
  display: block;
}
.search input {
  padding: 5px 5px 5px 27px;
  background: white;
  border: 0;
  font-family: 'Rubik', sans-serif;;
  font-size: 15px;
}
.search input:focus {
  border: 0;
}
.search input::-moz-placeholder {
  font-family: 'Rubik', sans-serif;;
  font-size: 15px;
  -moz-transition: color 800ms;
  transition: color 800ms;
}
.search input::placeholder {
  font-family: 'Rubik', sans-serif;;
  font-size: 15px;
  transition: color 800ms;
}
.search i {
  position: absolute;
  display: block;
  top: 7px;
  font-size: 16px;
  color: #ABB7BA;
  transition: color 800ms;
}
.search:hover input::-moz-placeholder {
  color: #8f9fa3;
}
.search:hover input::placeholder {
  color: #8f9fa3;
}
.search:hover i {
  color: #8f9fa3;
}
.search input:focus::-moz-placeholder {
  color: #535353 !important;
}
.search input:focus,
.search input:focus::placeholder,
.search input:focus ~ i {
  color: #535353 !important;
}

.side-section {
  position: relative;
  display: block;
  margin-top: 30px;
}
.side-section header {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.side-section header h3 {
  font-size: 15px;
  font-weight: 400;
  color: #B7B7B7;
}
.side-section header a.side-collapse-trigger {
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  transition: all 100ms ease-in-out;
}
.side-section header a.side-collapse-trigger i {
  font-size: 12px;
  color: #B7B7B7;
}
.side-section header a.side-collapse-trigger:hover {
  text-decoration: none;
}
.side-section .side-section-content {
  transition: transform 500ms;
  height: auto;
}
.side-section.collapsed {
  overflow: hidden;
}
.side-section.collapsed header a.side-collapse-trigger {
  top: -4px;
  transform: rotate(180deg);
}
.side-section.collapsed .side-section-content {
  height: 0;
}

nav#sidenavigator {
  overflow: hidden !important;
}
nav#sidenavigator h2 {
  font-size: 28px;
  padding: 0;
}
nav#sidenavigator .sidenavigator-container {
  position: relative;
  display: block;
  top: 20px;
}
nav#sidenavigator .sidenavigator-container .title-with-actions h2 {
  margin-right: 10px;
}
nav#sidenavigator .sidenavigator-container .title-with-actions h2, nav#sidenavigator .sidenavigator-container .title-with-actions ul {
  display: inline-block;
}
nav#sidenavigator .sidenavigator-container .title-with-actions ul.title-actions {
  position: relative;
  vertical-align: top;
}
nav#sidenavigator .sidenavigator-container .title-with-actions ul.title-actions li {
  display: inline-block;
}
nav#sidenavigator .sidenavigator-container .title-with-actions a.button {
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  background: #FDB753;
}
nav#sidenavigator .sidenavigator-container .title-with-actions a.button:hover {
  background: #fca221;
}
nav#sidenavigator .sidenavigator-container .sidenavigator-navigation li {
  margin-left: -15px;
}
nav#sidenavigator .sidenavigator-container .sidenavigator-navigation li a {
  display: block;
  color: #767676;
  font-weight: 400;
  padding: 6px 15px;
  border-radius: 30px;
}
nav#sidenavigator .sidenavigator-container .sidenavigator-navigation li a:hover {
  color: #535353;
}
nav#sidenavigator .sidenavigator-container .sidenavigator-navigation li a.router-link-active {
  color: #FDB753;
}
nav#sidenavigator .sidenavigator-container .no-entries {
  position: relative;
  display: block;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 10px 15px;
  margin-top: 20px;
  border-radius: 40px;
  background-color: #F9FAFB;
}

.sort {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 20px;
  z-index: 10;
}
.sort .labels {
  cursor: pointer;
}
.sort .labels span {
  text-transform: uppercase;
  font-weight: 400;
  font-size: 13px;
}
.sort .labels span.label:after {
  content: ":";
  padding-right: 3px;
}
.sort .labels span.selection {
  color: #FDB753;
}
.sort .labels span.selection i.icon {
  margin-left: 3px;
  font-size: 10px;
}
.sort ul.sortitems {
  position: absolute;
  display: block;
  top: 30px;
  left: 0px;
  padding: 8px 0;
  padding-top: 0;
  background: white;
  width: 100%;
  max-height: 0;
  opacity: 0;
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  overflow: hidden;
  transition: all 200ms;
}
.sort ul.sortitems li {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  text-transform: uppercase;
  margin: 0 8px;
  color: #C3C3C3;
  border-radius: 5px;
}
.sort ul.sortitems li:hover {
  color: #535353;
  background: #F7FAFC;
}
.sort ul.sortitems li.active {
  color: #FDB753;
}
.sort.visible ul.sortitems {
  display: block;
  max-height: 800px;
  opacity: 1;
}
@media screen and (max-width: 750px) {
  .sort ul.sortitems {
    margin-top: 10px;
  }
  .sort ul.sortitems li {
    padding: 8px 14px;
  }
}

.tabbar {
  position: relative;
  display: block;
  margin: 20px 0 15px;
  border-bottom: 2px solid #e5e5e5;
  z-index: 5;
}
.tabbar ul {
  display: block;
}
.tabbar ul li {
  display: inline-block;
  margin-right: 12px;
}
.tabbar ul li a {
  display: inline-block;
  color: #B7B7B7;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  padding: 10px 10px 5px 10px;
  margin-bottom: -2px;
  border-bottom: 2px solid #e5e5e5;
}
.tabbar ul li a.router-link-exact-active,
.tabbar ul li a.router-link-active {
  color: #535353;
  border-bottom: 2px solid #FDB753;
}
.tabbar ul li a.router-link-exact-active i.icon,
.tabbar ul li a.router-link-active i.icon {
  color: #FDB753;
}
.tabbar ul li i.icon {
  font-size: 15px;
}
.tabbar ul li i.icon-note {
  font-size: 20px;
}
.tabbar ul li:last-child {
  margin-right: 0;
}
.tabbar.centered ul {
  text-align: center;
}
.tag {
  display: inline-block;
  font-family: 'Rubik', sans-serif;;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  color: #B7B7B7;
  background-color: #f1f1f1;
}
.tag.green {
  color: #87B08A;
  background-color: #E7F7EC;
}
.tag.red {
  color: #FA415E;
  background-color: #FEDAE0;
}

.upload-container {
  position: relative;
  display: inline-block;
  padding: 5px;
  margin-top: -5px;
  overflow: hidden;
}
.upload-container .filter {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.upload-container input[type=file] {
  position: absolute;
  display: block;
  height: 100px;
  left: 0;
  top: -30px;
  width: 100%;
  opacity: 0;
  z-index: 1;
  outline: none;
  cursor: pointer;
}
.upload-container input[type=file]:hover + .filter {
  cursor: pointer;
}
.upload-container input[type=file]:hover + .filter span {
  color: #FDB753;
}

.contact-table {
  transition: all 300ms;
}
.contact-table.searching {
  opacity: 0.5;
}
.contact-table tbody tr {
  transition: all 200ms;
}
.contact-table tbody tr td.name figure {
  transition: all 150ms;
  float: left;
  margin-right: 15px;
  transform: scale(1);
}
.contact-table tbody tr td.name strong {
  transition: color 200ms;
}
.contact-table tbody tr:hover td.name figure {
  transform: scale(1.25);
}
.contact-table tbody tr:hover td.name strong {
  color: #FDB753;
}
.contact-table tbody tr:hover td.name .name-container {
  font-size: 11px;
}

.accountbar {
  position: relative;
  display: block;
  margin: 22px 0;
  text-align: right;
}
.accountbar .account {
  position: relative;
  display: inline-block;
}
.accountbar .account .inner {
  display: flex;
  align-items: center;
}
.accountbar .account .inner span.name {
  font-size: 13px;
  font-weight: 500;
  padding-right: 10px;
}
.accountbar .account .inner a.context-menue {
  color: #767676;
}
.accountbar .account .inner a.context-menue i {
  transform: rotate(90deg);
}
.accountbar .account .inner a.context-menue:hover {
  color: #535353;
}
@media screen and (max-width: 750px) {
  .accountbar {
    display: block;
    margin: 0;
    width: 100%;
    padding-right: 10px;
  }
  .accountbar .account .inner {
    padding: 10px 0;
  }
  .accountbar .account .inner span.name {
    padding-right: 0;
    color: #B7B7B7;
  }
  .accountbar .account figure {
    display: none;
  }
}

@media screen and (max-width: 750px) {
  #workspace aside.accountbar {
    display: none;
  }
}
article.contact {
  position: relative;
  display: block;
  padding: 35px 25px 30px 25px;
  text-align: center;
  background: #FFFFFF;
  transition: all 200ms;
}
article.contact header {
  display: block;
  margin-top: 20px;
}
article.contact header h4 {
  font-size: 16px;
  transition: color 200ms;
}
article.contact header:after {
  content: "";
  position: relative;
  display: block;
  margin: 15px auto;
  width: 30%;
  height: 1px;
  background-color: #B9C9D6;
}
article.contact span.function,
article.contact div.email {
  font-size: 12px;
}
article.contact div.email a, article.contact div.email span {
  font-size: 14px;
  word-break: break-all;
}
article.contact figure.avatar {
  transition: all 200ms;
}
article.contact span.context-menue {
  position: absolute;
  display: block;
  top: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  color: #C3C3C3;
}
article.contact span.context-menue i {
  position: absolute;
  display: block;
  transform: rotate(90deg);
  right: 8px;
}
article.contact span.context-menue:hover {
  color: #535353;
}
article.contact:hover {
  transform: scale(1.03);
  box-shadow: 0 1px 4px 0 rgba(185, 201, 214, 0.5);
}
article.contact:hover figure {
  transform: scale(1.05);
}

.context {
  position: fixed;
  display: block;
  visibility: hidden;
  width: 200px;
  padding: 5px;
  transition: opacity 220ms;
  opacity: 0;
  box-shadow: 0 1px 4px 0 rgba(160, 160, 160, 0.5);
  border-radius: 8px;
  background: white;
  z-index: 100;
}
.context ul li {
  display: block;
  margin: 0;
  text-align: left;
}
.context ul li a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: inherit;
  border-radius: 8px;
}
.context ul li a i {
  position: absolute;
  display: block;
  top: 50%;
  margin-top: -8px;
  left: 10px;
  color: #535353;
  font-size: 16px;
}
.context ul li a span {
  padding-left: 22px;
  font-family: 'Rubik', sans-serif;;
  font-weight: 400;
  font-size: 13px;
}
.context ul li a:hover {
  background: #f6f7f9;
  text-decoration: none;
}
.context ul li a.danger:hover {
  background: #FEDAE0;
}
.context ul li a.danger span, .context ul li a.danger i {
  color: #FA415E;
}
.context ul li a.trust:hover {
  background: #E7F7EC;
}
.context ul li a.trust span, .context ul li a.trust i {
  color: #75B641;
}
.context.visible {
  visibility: visible;
  opacity: 1;
}

.group-container ul.group-list {
  position: relative;
  display: block;
}
.group-container ul.group-list a {
  text-decoration: none;
}

.searchbar {
  position: relative;
  display: grid;
  grid-template-columns: 55% auto 75px;
  padding: 12px;
  background: white;
  z-index: 100;
}
.searchbar form {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid #ABB7BA;
  padding: 3px;
}
.searchbar form i {
  display: inline-block;
  color: #ABB7BA;
  font-size: 18px;
}
.searchbar form input {
  display: inline-block;
  margin-left: 10px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}
.searchbar form .loader {
  position: absolute;
  display: block;
  top: 3px;
  right: 20px;
  opacity: 0;
  transition: all 500ms;
}
.searchbar form .loader.visible {
  opacity: 1;
}
.searchbar .sort-container {
  display: flex;
  align-items: center;
}
.searchbar .gridview-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-left: 1px solid #ABB7BA;
}
@media screen and (max-width: 1000px) {
  .searchbar {
    grid-template-columns: 50% auto 75px;
  }
}
@media screen and (max-width: 750px) {
  .searchbar {
    display: block;
    padding: 0;
  }
  .searchbar form {
    border-right: 0;
    padding: 12px;
    border-bottom: 1px solid #e9eced;
  }
  .searchbar .sort-container {
    padding: 0;
  }
  .searchbar .sort-container .sort {
    padding: 0;
  }
  .searchbar .sort-container .sort .labels {
    padding: 12px 20px;
  }
}

#sidebar {
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 300ms;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  opacity: 0;
  z-index: 1000;
}
#sidebar .sidebar-container {
  position: fixed;
  top: 0;
  width: 45%;
  height: 100vh;
  right: -45%;
  background: white;
  transition: all 300ms ease-in-out;
  opacity: 0;
  overflow: scroll;
}
#sidebar .sidebar-container header.inner-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  padding-bottom: 20px;
}
#sidebar .sidebar-container header.inner-header figure {
  margin-bottom: 30px;
}
#sidebar .sidebar-container header.inner-header h2, #sidebar .sidebar-container header.inner-header h2.span {
  display: block;
  width: 100%;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;;
  font-size: 24px;
  font-weight: 500;
}
#sidebar .sidebar-container header.inner-header h2.span {
  display: inline;
}
#sidebar .sidebar-container header.inner-header i.tag {
  margin-top: 30px;
}
#sidebar .sidebar-container header, #sidebar .sidebar-container .inner {
  z-index: 1;
}
#sidebar .sidebar-container a.close {
  position: absolute;
  display: block;
  top: 15px;
  right: 20px;
  font-size: 18px;
  z-index: 101;
}
#sidebar .sidebar-container a.close i {
  color: #C3C3C3;
  transition: all 200ms;
}
#sidebar .sidebar-container a.close:hover i {
  color: #FA415E;
  transform: scale(0.7);
}
#sidebar .sidebar-container .inner {
  padding: 20px 30px;
}
#sidebar .sidebar-container .top-actions {
  position: relative;
  display: block;
  padding: 0 5px 20px 5px;
}
#sidebar .sidebar-container .loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#sidebar .sidebar-container .inner-enter-active,
#sidebar .sidebar-container .inner-leave-active {
  transition: all 300ms;
}
#sidebar .sidebar-container .inner-enter,
#sidebar .sidebar-container .inner-leave-to {
  transform: translateX(40px);
  opacity: 0;
}
#sidebar.open {
  visibility: visible;
  opacity: 1;
}
#sidebar.open .sidebar-container {
  right: 0;
  opacity: 1;
}
@media screen and (max-width: 850px) {
  #sidebar .sidebar-container {
    width: 100%;
    right: 0;
  }
}

.dashboard {
  position: relative;
  display: block;
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}
.dashboard ul.dashboard-grid > li {
  margin-bottom: 30px;
}
.dashboard article.widget {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;
}
.dashboard article.widget header {
  padding: 20px;
}
.dashboard article.widget header h2 {
  font-size: 14px !important;
  text-transform: uppercase;
}
.dashboard article.widget .body.with-padding {
  padding: 10px;
  padding-top: 0;
}
.dashboard article.widget .body.with-big-padding {
  padding: 0 20px 10px 20px;
}
.dashboard article.widget .body.with-seperator * {
  font-size: 15px;
}
.dashboard article.widget .body.with-seperator .inner {
  border-top: 1px dashed #d0d0d0;
  padding: 20px 10px;
  padding-bottom: 10px;
}
.dashboard article.widget .body table thead tr th,
.dashboard article.widget .body table tbody tr td {
  padding: 10px;
}
.dashboard article.widget .body table tbody tr td,
.dashboard article.widget .body table tbody tr td a,
.dashboard article.widget .body table tbody tr td span,
.dashboard article.widget .body table tbody tr td strong {
  font-size: 12px;
}
.dashboard article.widget .body table tbody tr td > strong,
.dashboard article.widget .body table tbody tr td > span {
  display: block;
}
.dashboard article.widget .body table thead tr th {
  font-size: 10px;
}
@media screen and (max-width: 980px) {
  .dashboard {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0;
  }
}

.widget.favorites .body table .name {
  width: 20px;
}

#sidebar .contact-edit .overview .widget {
  display: block;
  margin-bottom: 50px;
}
#sidebar .contact-edit .overview .widget h3 {
  display: block;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 11px;
  padding-bottom: 5px;
  color: #C3C3C3;
}
#sidebar .contact-edit .overview .widget .widget-body {
  padding-left: 8px;
}
#sidebar .contact-edit .overview .contact-widget {
  display: grid;
  grid-template-columns: 50% 50%;
}
#sidebar .contact-edit .overview .contact-widget li,
#sidebar .contact-edit .overview .contact-widget li a {
  color: #535353;
  font-weight: 400;
}
#sidebar .contact-edit .overview .contact-widget li a {
  color: #FDB753;
}
#sidebar .contact-edit .overview .groups-widget ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
#sidebar .contact-edit .overview .groups-widget ul li article.group {
  position: relative;
  display: block;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 200ms;
  background-color: #F7FAFC;
}
#sidebar .contact-edit .overview .groups-widget ul li article.group h4 {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
#sidebar .contact-edit .overview .groups-widget ul li article.group .avatar-list {
  display: flex;
  align-items: center;
}
#sidebar .contact-edit .overview .groups-widget ul li article.group .avatar-list span.additional {
  font-family: 'Rubik', sans-serif;;
  font-size: 12px;
  font-weight: 400;
  padding-left: 5px;
}
#sidebar .contact-edit .overview .groups-widget ul li article.group .avatar-list figure {
  margin-left: -15px;
  border: 2px solid white;
}
#sidebar .contact-edit .overview .groups-widget ul li article.group .avatar-list figure:first-of-type {
  margin-left: 0;
}
#sidebar .contact-edit .overview .groups-widget ul li a article.group:hover {
  background-color: #ecf3f8;
}
@media screen and (max-width: 750px) {
  #sidebar .contact-edit .overview .widget {
    margin-bottom: 30px;
  }
  #sidebar .contact-edit .overview .contact-widget {
    grid-template-columns: 100%;
  }
  #sidebar .contact-edit .overview .contact-widget li {
    margin-bottom: 20px;
  }
  #sidebar .contact-edit .overview .groups-widget ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

.error-503 {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}
.error-503 main {
  width: 400px;
}
.error-503 main svg {
  margin-bottom: 40px;
  margin-left: -15px;
}
.error-503 main h1 {
  margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
  .error-503 main {
    width: 70%;
  }
}

.error-page {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.error-page figure {
  width: 50%;
  text-align: center;
  opacity: 0.5;
}
.error-page figure img {
  width: 50%;
  margin-bottom: 40px;
}
.error-page figure figcaption {
  font-size: 30px;
  font-family: 'Rubik', sans-serif;;
  text-transform: uppercase;
  line-height: 130%;
  color: #52677B;
}

.notification-list {
  position: fixed;
  display: block;
  z-index: 50000;
  top: 15px;
  right: 15px;
  width: 350px;
  height: auto;
}
.notification-list .item {
  position: relative;
  display: grid;
  grid-template-columns: 80px auto;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 20px 20px 20px 0;
  margin-bottom: 15px;
  box-shadow: 0 0 4px 0 rgba(185, 201, 214, 0.35);
  background: white;
  transform: translateY(0);
}
.notification-list .item h4 {
  font-size: 13px;
  font-family: 'Rubik', sans-serif;;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.notification-list .item .message, .notification-list .item strong {
  font-size: 13px;
  font-weight: 400;
  line-height: 135%;
}
.notification-list .item strong {
  font-weight: bold;
}
.notification-list .item i.icon {
  font-size: 35px;
  text-align: center;
}
.notification-list .item.success h4,
.notification-list .item.success i.icon {
  color: #74BD3F !important;
}
.notification-list .item.warning h4,
.notification-list .item.warning i.icon {
  color: #FDB753 !important;
}
.notification-list .item.error h4,
.notification-list .item.error i.icon {
  color: #FA415E !important;
}
.notification-list .item.n-enter-active, .notification-list .item.n-leave-active {
  transition: all 300ms;
}
.notification-list .item.n-enter, .notification-list .item.n-leave-to {
  transform: translateX(80px);
  opacity: 0;
}
@media screen and (max-width: 750px) {
  .notification-list {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .notification-list .item:last-of-type {
    margin-bottom: 0;
  }
}

.sweet-modal-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.sweet-modal-overlay .sweet-modal {
  border-radius: 4px !important;
  padding: 40px !important;
  width: 60% !important;
  max-width: 550px;
}
.sweet-modal-overlay .sweet-modal .sweet-title {
  border: 0;
  padding: 0;
  height: auto;
}
.sweet-modal-overlay .sweet-modal .sweet-title h2 {
  font-family: 'Ubuntu', sans-serif;;
  font-size: 18px !important;
  font-weight: 500 !important;
}
.sweet-modal-overlay .sweet-modal .sweet-content {
  padding: 0;
  margin-top: 15px;
}
.sweet-modal-overlay .sweet-modal .sweet-content p, .sweet-modal-overlay .sweet-modal .sweet-content a {
  font-family: 'Ubuntu', sans-serif;;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #535353 !important;
}
.sweet-modal-overlay .sweet-modal .sweet-content p {
  display: block;
  margin-bottom: 10px;
}
.sweet-modal-overlay .sweet-modal .sweet-content p:last-of-type {
  margin-bottom: 0;
}
.sweet-modal-overlay .sweet-modal .sweet-content .actions {
  margin-top: 25px;
  text-align: right;
}
.sweet-modal-overlay .sweet-modal .sweet-content .actions button {
  margin-left: 5px;
}
.sweet-modal-overlay .is-visible {
  z-index: 10000000 !important;
}
.sweet-modal-overlay .sweet-action-close:hover {
  background-color: #FDB753 !important;
}

.vc-highlight {
  background-color: #FDB753 !important;
}

.v-select .vs__dropdown-toggle {
  border-radius: 0;
  height: 42px;
  border: 0;
  padding: 0;
}
.v-select .vs__dropdown-toggle input {
  transition: none;
  padding: 0;
  margin: 0;
}
.v-select .vs__dropdown-toggle .vs__open-indicator {
  transform: scale(0.7);
  fill: #B7B7B7;
}
.v-select .vs__dropdown-toggle .vs__actions {
  align-items: start;
}
.v-select .vs__dropdown-toggle .vs__actions .vs__open-indicator {
  margin-top: 5px;
  margin-right: 5px;
}
.v-select .vs__selected-options {
  padding: 0 12px;
  align-items: start;
  margin-top: 4px;
}
.v-select .vs__selected-options .vs__selected {
  margin: 0;
  border-radius: 0;
  padding: 0;
}
.v-select .vs__dropdown-menu {
  position: absolute;
  display: block !important;
  visibility: visible !important;
  padding: 5px;
  box-shadow: none;
  border-radius: 0;
  border: 1px solid #f3f5f7;
  z-index: 100;
}
.v-select .vs__dropdown-menu .vs__dropdown-option {
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;;
  font-weight: 400;
  font-size: 13px;
}
.v-select .vs__dropdown-menu .vs__dropdown-option:hover, .v-select .vs__dropdown-menu .vs__dropdown-option.vs__dropdown-option--highlight {
  background-color: #FDB753;
  color: white;
}
.v-select .vs__clear {
  position: absolute;
  display: block;
  top: 7px;
  right: 24px;
  transform: scale(0.8);
  fill: #B7B7B7;
}
.v-select.vs--searchable .vs__selected {
  margin: 0 3px;
  border-radius: 20px;
  padding: 2px 10px;
  background-color: #e9e9e9;
  border: 0;
  font-size: 14px;
}
.v-select.vs--disabled .vs__dropdown-toggle, .v-select.vs--disabled .vs__search, .v-select.vs--disabled .vs__selected {
  background: transparent;
  color: #C3C3C3;
  cursor: not-allowed;
}
.v-select.vs--multiple .vs__dropdown-toggle {
  height: auto;
  padding-bottom: 5px;
}
.v-select.vs--multiple .vs__selected {
  margin-bottom: 5px;
}