html, body {
  height: 100%; }

body {
  font-family: "Open Sans", sans-serif;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; }

.prevent-scroll {
  overflow: hidden; }

.clickable {
  cursor: pointer; }

.main-wrapper {
  display: block;
  flex: 1 0 auto; }

.footer {
  width: 100%;
  flex-shrink: 0;
  display: block;
  padding: 10px; }

.header-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }

.toast-message {
  width: 300px;
  height: auto;
  display: block;
  border: 2px solid #000;
  border-radius: 20px;
  background: white;
  position: fixed;
  z-index: 999;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  padding: 10px;
  text-align: center; }
  .toast-message .toast-title {
    font-size: large;
    font-weight: bold;
    display: block; }
  .toast-message .toast-body {
    font-size: medium;
    margin-top: 5px;
    display: block; }

.gi-popup-menu {
  width: 280px;
  display: block;
  background: #FFF;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  text-align: center;
  position: absolute;
  z-index: 999; }
  .gi-popup-menu .popup-title {
    width: 100%;
    display: block;
    font-size: large;
    font-weight: bold;
    padding: 10px;
    cursor: default; }
  .gi-popup-menu .popup-item {
    width: 100%;
    display: block;
    font-size: large;
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer; }
    .gi-popup-menu .popup-item:hover {
      background-color: rgba(0, 0, 0, 0.05); }
    .gi-popup-menu .popup-item .icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      margin-right: 5px; }
    .gi-popup-menu .popup-item span {
      display: inline-block; }

@media (min-width: 768px) {
  .gi-popup-menu {
    border-radius: 20px; } }
.gi-popup-menu-blocker {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 998; }

.header {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center; }
  .header.header-light {
    color: white; }
  .header .navigation {
    width: 120px; }
    .header .navigation .navigation-icon {
      width: 40px;
      height: 40px;
      position: relative;
      display: block;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer; }
      .header .navigation .navigation-icon:hover {
        background: rgba(0, 0, 0, 0.05); }
      .header .navigation .navigation-icon .navigation-line {
        width: 30px;
        height: 2px;
        margin-left: 5px;
        background: black;
        margin-top: 19px;
        position: absolute;
        display: block;
        opacity: 1;
        transition: opacity .1s, transform .4s, margin .4s; }
        .header .navigation .navigation-icon .navigation-line:first-child {
          margin-top: 11px; }
        .header .navigation .navigation-icon .navigation-line:last-child {
          margin-top: 27px; }
      .header .navigation .navigation-icon.active {
        z-index: 999; }
        .header .navigation .navigation-icon.active .navigation-line {
          opacity: 0; }
          .header .navigation .navigation-icon.active .navigation-line:first-child {
            opacity: 1;
            transform: rotate(-315deg);
            margin-top: 19px; }
          .header .navigation .navigation-icon.active .navigation-line:last-child {
            opacity: 1;
            transform: rotate(315deg);
            margin-top: 19px; }
  .header .logo-area {
    display: block;
    flex: 1 1;
    text-align: center; }
    .header .logo-area .logo {
      font-size: xx-large;
      font-weight: 700;
      text-transform: lowercase;
      color: black;
      text-decoration: none; }
      .header .logo-area .logo sup {
        font-size: small; }
  .header .account {
    width: 120px;
    height: 40px;
    text-align: right; }
    .header .account .avatar {
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.3);
      border: 2px solid black;
      border-radius: 50%;
      display: inline-block;
      background-position: center;
      background-size: cover;
      position: relative;
      cursor: pointer; }
      .header .account .avatar.active {
        z-index: 999; }
      .header .account .avatar .badge {
        width: auto;
        height: 1.8em;
        min-width: 1.8em;
        text-align: center;
        font-weight: bold;
        background: #CC0000;
        color: white;
        position: absolute;
        border: 2px solid white;
        border-radius: 1.8em;
        right: 0;
        top: 0;
        margin-top: -0.9em;
        margin-right: -0.9em;
        visibility: hidden; }
        .header .account .avatar .badge.visible {
          visibility: visible; }
    .header .account .title-container {
      display: flex;
      height: 40px;
      align-items: center;
      flex-direction: row; }
      .header .account .title-container .spacer {
        display: block;
        flex: 1 1; }
    .header .account .title {
      width: 100%;
      font-size: large;
      display: block;
      margin-left: 10px;
      color: black;
      text-decoration: none; }
      .header .account .title.login {
        text-align: right; }

.header-push {
  margin-top: 20px; }

.toolbar .action {
  text-align: center;
  font-size: x-large; }
  .toolbar .action i {
    padding: 10px;
    cursor: pointer;
    border-radius: 50%; }
    .toolbar .action i:hover {
      background: #EEE; }

.fullscreen-menu {
  position: fixed;
  background: rgba(255, 255, 255, 0.9);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms;
  display: flex;
  flex-direction: row; }
  .fullscreen-menu .container {
    margin-top: 100px; }
  .fullscreen-menu .navigation-item {
    display: block;
    font-size: xx-large;
    color: black;
    font-weight: bold;
    text-decoration: none;
    margin-top: 10px;
    transition: opacity 250ms, margin 250ms;
    margin-left: -50px;
    opacity: 0; }
    .fullscreen-menu .navigation-item:first-child {
      margin-top: 0; }
    .fullscreen-menu .navigation-item:hover {
      text-decoration: underline; }
  .fullscreen-menu .menu-action {
    display: block;
    text-align: right;
    font-size: large;
    margin-right: 15px; }
    .fullscreen-menu .menu-action a {
      color: black;
      text-decoration: none;
      font-weight: bold; }
      .fullscreen-menu .menu-action a:hover {
        text-decoration: underline; }
  .fullscreen-menu .menu-title {
    display: block;
    font-size: xx-large;
    color: black;
    font-weight: bold;
    transition: opacity 250ms, margin 250ms;
    opacity: 0;
    margin-left: 50px; }
    .fullscreen-menu .menu-title .action {
      font-size: medium;
      cursor: pointer; }
      .fullscreen-menu .menu-title .action:hover {
        text-decoration: underline; }
  .fullscreen-menu .notification-area {
    display: block;
    flex: 1 1;
    margin-left: 25px;
    opacity: 0;
    transition: opacity 250ms, margin 250ms;
    transition-delay: 100ms; }
    .fullscreen-menu .notification-area .empty-message {
      display: block;
      padding: 10px;
      font-size: large;
      font-weight: bold;
      text-align: center; }
    .fullscreen-menu .notification-area .menu-notification {
      display: block;
      width: 100%;
      background: white;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      padding: 5px 10px;
      margin-top: 10px;
      position: relative; }
      .fullscreen-menu .notification-area .menu-notification:first-child {
        margin-top: 0; }
      .fullscreen-menu .notification-area .menu-notification .notification-clear {
        width: 1.4em;
        height: 1.4em;
        display: block;
        border-radius: 5px;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        margin: 5px;
        text-align: center; }
        .fullscreen-menu .notification-area .menu-notification .notification-clear:hover {
          background-color: rgba(0, 0, 0, 0.2); }
      .fullscreen-menu .notification-area .menu-notification .title-area {
        display: flex;
        padding: 5px;
        align-items: center; }
        .fullscreen-menu .notification-area .menu-notification .title-area .icon {
          width: 30px;
          height: 30px;
          background-size: cover;
          background-position: center;
          border: 2px solid black;
          border-radius: 50%; }
        .fullscreen-menu .notification-area .menu-notification .title-area .text {
          font-weight: bold;
          display: block;
          flex: 1 1;
          padding-left: 10px; }
      .fullscreen-menu .notification-area .menu-notification .notification-body {
        font-size: small;
        padding: 5px; }
  .fullscreen-menu.visible {
    visibility: visible;
    opacity: 1; }
    .fullscreen-menu.visible .navigation-item {
      opacity: 1;
      margin-left: 25px; }
    .fullscreen-menu.visible .menu-title {
      opacity: 1;
      margin: 0; }
    .fullscreen-menu.visible .notification-area {
      opacity: 1;
      margin: 0; }

.gi-spinner {
  width: 70px;
  height: 70px;
  display: inline-block;
  position: relative;
  background-image: url("../img/gift-solid.svg");
  background-position: center;
  background-size: 40px;
  background-repeat: no-repeat; }
  .gi-spinner .gi-spinner-circle {
    width: 70px;
    height: 70px;
    background: url("../img/loading_circle.svg") no-repeat center;
    animation: spin 4s linear infinite;
    display: block; }

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
.gi-button {
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: black;
  text-align: center;
  font-weight: 700;
  text-transform: lowercase;
  display: inline-block;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: medium;
  text-decoration: none; }
  .gi-button:hover {
    text-decoration: none;
    color: #333;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1); }
  .gi-button.disabled {
    color: rgba(0, 0, 0, 0.8); }
    .gi-button.disabled:hover {
      cursor: default; }
  .gi-button.gi-button-danger {
    background-color: #CC0000;
    border-color: #990000;
    color: #FFFFFF; }

.gi-tabs {
  width: 100%;
  height: auto;
  display: block; }
  .gi-tabs .gi-tab-bar {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    text-align: center; }
    .gi-tabs .gi-tab-bar .gi-tab {
      display: inline-block;
      margin-left: 5px;
      cursor: pointer;
      border-bottom: 4px solid rgba(0, 0, 0, 0);
      padding: 10px;
      text-transform: lowercase;
      font-weight: 700; }
      .gi-tabs .gi-tab-bar .gi-tab:hover {
        border-color: rgba(0, 0, 0, 0.5); }
      .gi-tabs .gi-tab-bar .gi-tab.active {
        border-color: rgba(0, 0, 0, 0.7); }
  .gi-tabs .gi-tab-container {
    width: 100%;
    display: none; }
    .gi-tabs .gi-tab-container.active {
      display: block; }

.gi-input {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: white;
  border-radius: 80px;
  padding: 5px;
  font-size: medium; }

.gi-blocker {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  display: block;
  background: rgba(255, 255, 255, 0.6); }

.gi-blocker-progress {
  width: 120px;
  height: 12px;
  border: 2px solid #777;
  border-radius: 6px;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden; }
  .gi-blocker-progress .gi-blocker-progress-bar {
    display: block;
    height: 12px;
    background: #777; }

.gi-slider {
  display: block;
  width: 100%;
  height: 25px;
  position: relative;
  cursor: pointer; }
  .gi-slider .gi-bar {
    width: 100%;
    display: block;
    height: 10px;
    border-radius: 10px;
    background: #EBEBEB;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 7.5px; }
  .gi-slider .gi-handle {
    width: 25px;
    height: 25px;
    background: #666;
    border: 1px solid #333;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0;
    left: 0; }

.gi-slider-label-pre {
  margin-right: 12.5px; }

.gi-slider-label-post {
  margin-left: 12.5px; }

.gi-segmented {
  width: auto;
  border: 1px solid #333;
  border-radius: 5px;
  display: inline-block;
  padding: 0;
  overflow: hidden; }
  .gi-segmented.even-items {
    width: 100%;
    display: flex; }
    .gi-segmented.even-items .gi-segment {
      flex: 1 1; }
  .gi-segmented .gi-segment {
    color: #666;
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0);
    margin: 0;
    font-size: medium;
    text-align: center;
    border-left: 1px solid #333;
    position: relative; }
    .gi-segmented .gi-segment:first-child {
      border: 0; }
    .gi-segmented .gi-segment:hover {
      background: #EEE; }
    .gi-segmented .gi-segment.checked {
      background: #333;
      color: white; }
    .gi-segmented .gi-segment input[type=radio] {
      width: 1px;
      height: 1px;
      position: absolute;
      left: -999px;
      top: -999px; }
    .gi-segmented .gi-segment .badge {
      min-width: 1.8em;
      min-height: 1.2em;
      font-size: small;
      padding: 5px;
      background: #CC0000;
      color: #FFF;
      border-radius: 999px;
      text-align: center;
      display: inline-block;
      margin-left: 10px; }

.input-hide {
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 2px;
  position: absolute;
  left: -999px;
  top: -999px; }

.generic-row {
  margin-top: 10px; }

.action-area {
  text-align: right; }

#login .login-container {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  margin: 60px 0; }
  #login .login-container .icon {
    width: 96px;
    height: 96px;
    display: inline-block;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    overflow: hidden;
    margin-top: 20px;
    background: url("../img/profile_human.svg") no-repeat center; }
  #login .login-container .nameplate {
    width: auto;
    height: auto;
    border-radius: 999px;
    border: 1px solid black;
    padding: 5px 15px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    margin-top: 10px;
    font-size: small;
    cursor: pointer; }
  #login .login-container .input-container {
    width: 200%;
    height: auto;
    display: block;
    white-space: nowrap;
    text-align: left;
    margin-top: 10px; }
    #login .login-container .input-container .input-field {
      width: 50%;
      display: inline-block;
      padding: 10px; }
      #login .login-container .input-container .input-field label {
        font-size: small;
        font-weight: bold; }
      #login .login-container .input-container .input-field a, #login .login-container .input-container .input-field span {
        margin-top: 10px; }
  #login .login-container .error-message {
    display: block;
    color: #CC0000;
    text-align: center;
    padding: 5px; }
  #login .login-container .login-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.2); }
    #login .login-container .login-button .fas {
      width: 64px;
      height: 64px;
      font-size: xx-large;
      margin-top: 13px; }

#list-area .date-header {
  font-size: xx-large;
  padding-top: 20px; }
#list-area .list-item {
  margin-top: 10px; }
  #list-area .list-item.claimed {
    text-decoration: line-through; }
  #list-area .list-item .item-contain {
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    border-radius: 10px;
    cursor: pointer;
    flex-direction: column;
    overflow: hidden; }
    #list-area .list-item .item-contain:hover {
      background: rgba(0, 0, 0, 0.05); }
    #list-area .list-item .item-contain .image {
      width: 100%;
      height: 120px;
      display: block;
      background-size: cover;
      position: relative;
      background-position: center; }
      #list-area .list-item .item-contain .image .overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0.2; }
    #list-area .list-item .item-contain .title {
      width: 100%;
      display: block;
      font-size: medium;
      font-weight: bold;
      padding: 10px 10px 0 10px; }
    #list-area .list-item .item-contain .info-area {
      display: flex;
      align-items: center;
      padding: 0 10px; }
      #list-area .list-item .item-contain .info-area .user-info {
        flex: 1 1;
        font-size: small;
        padding: 5px 5px 5px 0;
        display: flex;
        align-items: center; }
        #list-area .list-item .item-contain .info-area .user-info .user-avatar {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          border: 2px solid #EFEFEF;
          background: #888;
          display: inline-block;
          margin-right: 5px;
          background-size: cover;
          background-position: center; }
      #list-area .list-item .item-contain .info-area .progress-info {
        font-size: medium;
        font-weight: bold;
        padding: 5px; }
    #list-area .list-item .item-contain .item-progress {
      height: 10px;
      flex: 1 1;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      margin: 0 10px;
      overflow: hidden;
      background: white; }
      #list-area .list-item .item-contain .item-progress .bar {
        height: 10px;
        display: block; }
#list-area .list-loader {
  text-align: center; }

#list-editor #color-selector {
  width: 100%;
  text-align: center; }
  #list-editor #color-selector .color-item {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    border-color: #444;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    margin-right: 5px;
    cursor: pointer;
    background-size: cover;
    background-position: center; }
    #list-editor #color-selector .color-item.active {
      border-color: #EFEFEF;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }
#list-editor .image-area {
  align-items: center; }
  #list-editor .image-area .image-preview {
    width: 100%;
    padding-top: 66.66%;
    display: block;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.03);
    background-size: cover;
    background-position: center; }
  #list-editor .image-area .image-input {
    text-align: center; }

#list-creator .section-header {
  font-size: x-large;
  font-weight: bold;
  margin-top: 20px; }
#list-creator .section-subheading {
  font-size: large; }
#list-creator .list-title {
  height: auto;
  font-size: x-large;
  padding: 10px; }
#list-creator .list-description {
  min-height: 135px;
  margin-top: 10px; }
#list-creator .date-field {
  background: #FFF !important; }
#list-creator .date-container {
  position: relative;
  background: #FFF; }
  #list-creator .date-container .clear {
    width: 1.4em;
    height: 1.4em;
    position: absolute;
    right: 0;
    top: 20%;
    margin-right: 10px;
    display: block;
    cursor: pointer; }
#list-creator .image-selection .image-preload {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  left: -999px;
  top: -999px; }
#list-creator .image-selection .image-preview {
  width: 100%;
  display: block;
  border-radius: 20px;
  padding-top: 66%;
  background-color: rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  margin-bottom: 10px; }
#list-creator .image-selection .image-option {
  width: 24%;
  display: inline-block;
  padding-top: 24%;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #FFF;
  cursor: pointer; }
  #list-creator .image-selection .image-option.selected {
    border-color: #000; }
#list-creator .image-selection .upload-button {
  width: 100%; }
#list-creator .colour-selection {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  justify-content: center; }
  #list-creator .colour-selection .colour-option {
    width: 70px;
    height: 70px;
    display: block;
    border: 3px solid #FFF;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms; }
    #list-creator .colour-selection .colour-option.selected {
      border: 3px solid #000;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
  @media (min-width: 576px) {
    #list-creator .colour-selection .color-option {
      width: 64px;
      height: 64px;
      margin-left: 5px; } }
  @media (min-width: 992px) {
    #list-creator .colour-selection .colour-option {
      margin-left: 20px; }
      #list-creator .colour-selection .colour-option:first-child {
        margin-left: 0; } }
#list-creator .permission-manager .keyword-input {
  margin-top: 20px; }
#list-creator .permission-manager .area-header {
  display: flex;
  margin-top: 20px;
  align-items: center; }
  #list-creator .permission-manager .area-header .area-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative; }
    #list-creator .permission-manager .area-header .area-icon .inner-icon {
      width: 40px;
      height: 40px;
      background-size: contain;
      background-position: center;
      margin: 10px;
      position: absolute; }
    #list-creator .permission-manager .area-header .area-icon.visibility-full {
      background-color: #98FF9B; }
      #list-creator .permission-manager .area-header .area-icon.visibility-full .inner-icon {
        background-image: url("../img/visibility-on.svg"); }
    #list-creator .permission-manager .area-header .area-icon.visibility-limited {
      background-color: #FFBB76; }
      #list-creator .permission-manager .area-header .area-icon.visibility-limited .inner-icon {
        background-image: url("../img/visibility-off.svg"); }
  #list-creator .permission-manager .area-header .text-container {
    flex: 1 1;
    display: block;
    margin-left: 20px; }
    #list-creator .permission-manager .area-header .text-container .text-heading {
      font-size: large;
      font-weight: bold;
      display: block; }
    #list-creator .permission-manager .area-header .text-container .text-subheading {
      font-size: medium;
      display: block; }
#list-creator .permission-manager .user-list {
  width: 100%;
  display: block;
  margin-top: 10px;
  min-height: 80px;
  border: 1px solid #EFEFEF;
  border-radius: 10px; }
  #list-creator .permission-manager .user-list .user-item {
    width: 33%;
    display: inline-block;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    overflow: hidden; }
    #list-creator .permission-manager .user-list .user-item:hover {
      background: rgba(0, 0, 0, 0.08); }
    #list-creator .permission-manager .user-list .user-item .user-image {
      width: 50px;
      height: 50px;
      display: inline-block;
      border: 1px solid #000;
      border-radius: 50%;
      background-size: cover;
      background-position: center; }
      #list-creator .permission-manager .user-list .user-item .user-image .initials {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center; }
        #list-creator .permission-manager .user-list .user-item .user-image .initials .text {
          width: 100%;
          font-size: large;
          font-weight: bold;
          text-transform: uppercase;
          text-align: center; }
    #list-creator .permission-manager .user-list .user-item .nameplate {
      width: 100%;
      text-align: center;
      display: block;
      font-weight: normal;
      padding: 5px; }
  @media (min-width: 576px) {
    #list-creator .permission-manager .user-list .user-item {
      width: 25%; } }
  #list-creator .permission-manager .user-list .empty-message {
    width: 100%;
    height: 80px;
    display: block;
    font-size: large;
    color: #999;
    text-align: center;
    padding-top: 20px; }
#list-creator .group-heading {
  width: 100%;
  font-size: x-large;
  display: block;
  margin-top: 20px; }
#list-creator .group-subheading {
  width: 100%;
  font-size: large;
  display: block; }

#list-view .image {
  width: 100%;
  padding-top: 66.66%;
  display: block;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.03);
  background-size: cover;
  background-position: center; }
#list-view .title {
  font-size: 2.8em;
  font-weight: bold;
  padding: 10px 0 0 0;
  display: block; }
  #list-view .title .edit {
    width: 1.8em;
    height: 1.8em;
    border-radius: 10px;
    cursor: pointer;
    font-size: medium;
    display: inline-block;
    padding: 5px;
    opacity: 0.8; }
    #list-view .title .edit:hover {
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 1; }
#list-view .subtitle {
  font-size: large;
  padding: 0 0 10px 0;
  display: block; }
#list-view .user-preview {
  display: flex;
  flex-direction: row;
  align-items: center; }
  #list-view .user-preview .user-item {
    width: 30px;
    height: 30px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    background-size: cover;
    flex-shrink: 0;
    margin-right: 5px; }
  #list-view .user-preview .all-link {
    display: inline-block;
    margin-left: 10px;
    text-decoration: underline;
    flex-shrink: 0;
    cursor: pointer; }
    #list-view .user-preview .all-link:hover {
      text-decoration: none; }
#list-view .date-box {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 10px;
  text-align: center; }
#list-view .empty-message {
  display: block;
  padding: 10px;
  text-align: center;
  font-style: italic;
  font-size: medium; }
#list-view .loading-item {
  display: block;
  text-align: center; }
#list-view .list-item {
  display: flex;
  flex-direction: row;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  padding: 10px;
  margin-bottom: 20px; }
  #list-view .list-item:hover {
    background: rgba(0, 0, 0, 0.05); }
  #list-view .list-item.claimed .item-title {
    color: #555;
    text-decoration: line-through; }
  #list-view .list-item .tick {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center; }
    #list-view .list-item .tick i {
      display: block;
      flex: 1 1;
      text-align: center;
      font-size: x-small; }
  #list-view .list-item .info-container {
    flex: 1 1;
    display: block;
    margin: 0 10px; }
    #list-view .list-item .info-container .item-title {
      font-size: large;
      font-weight: bold;
      display: block; }
    #list-view .list-item .info-container .item-subtitle {
      font-size: medium;
      display: block; }
  #list-view .list-item .price {
    font-size: x-large;
    font-weight: bold; }
  #list-view .list-item .item-priority {
    margin-right: 5px;
    display: inline-block; }
#list-view .invite-title {
  font-size: large;
  display: block;
  margin-top: 20px;
  text-align: center;
  font-weight: bold; }
#list-view .invite-input {
  flex: 1; }
  #list-view .invite-input:read-only {
    background: #FFF; }
#list-view .invite-input-group-end {
  border-left: 0;
  cursor: pointer; }
  #list-view .invite-input-group-end:hover {
    background: #CCC; }
#list-view .invite-qr {
  text-align: center; }
#list-view .request-area {
  text-align: center; }
  #list-view .request-area .detail-area {
    font-size: medium;
    margin-top: 10px; }
  #list-view .request-area .button-area {
    margin-top: 10px; }
#list-view .invite-share {
  display: flex;
  flex-direction: column; }
  #list-view .invite-share .invite-qr {
    width: 200px;
    height: 200px;
    border: 1px solid rgba(0, 0, 0, 0.2); }
  #list-view .invite-share .invite-link {
    display: flex;
    flex: 1; }
    #list-view .invite-share .invite-link .invite-link-area {
      flex: 1;
      border: 1px solid rgba(0, 0, 0, 0.3);
      padding: 5px;
      color: black; }
    #list-view .invite-share .invite-link .invite-link-copy {
      padding: 5px;
      background: rgba(0, 0, 0, 0.3); }
#list-view #list-people .area-header {
  display: flex;
  align-items: center; }
  #list-view #list-people .area-header .icon-container {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%; }
    #list-view #list-people .area-header .icon-container .icon {
      width: 40px;
      height: 40px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin: 10px; }
    #list-view #list-people .area-header .icon-container.visibility-full {
      background-color: #98FF9B; }
      #list-view #list-people .area-header .icon-container.visibility-full .icon {
        background-image: url("../img/visibility-on.svg"); }
    #list-view #list-people .area-header .icon-container.visibility-limited {
      background-color: #FFBB76; }
      #list-view #list-people .area-header .icon-container.visibility-limited .icon {
        background-image: url("../img/visibility-off.svg"); }
  #list-view #list-people .area-header .text-container {
    flex: 1 1;
    display: block;
    margin-left: 10px; }
    #list-view #list-people .area-header .text-container .text-title {
      font-size: large;
      font-weight: bold;
      display: block; }
    #list-view #list-people .area-header .text-container .text-subtitle {
      display: block; }
#list-view #list-people .person-list {
  margin-bottom: 20px;
  padding: 0 20px; }
  #list-view #list-people .person-list .person-item {
    display: flex;
    align-items: center;
    margin-top: 20px; }
    #list-view #list-people .person-list .person-item .person-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border: 2px solid #000; }
    #list-view #list-people .person-list .person-item .person-info {
      flex: 1 1;
      margin-left: 20px; }
      #list-view #list-people .person-list .person-item .person-info .person-name {
        font-size: large; }
      #list-view #list-people .person-list .person-item .person-info .person-actions {
        margin-top: 10px; }

#item-viewer .hero {
  width: 100%;
  min-height: 30px;
  background: rgba(0, 0, 0, 0.4);
  display: block; }
#item-viewer .detail {
  display: flex;
  flex-direction: row;
  align-items: center; }
  #item-viewer .detail .item-title {
    flex: 1 1;
    font-size: x-large;
    font-weight: 700; }
  #item-viewer .detail .item-price {
    width: auto;
    font-size: xx-large;
    font-weight: 700; }
#item-viewer .description {
  font-size: medium; }
#item-viewer .image-container .image-item {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  background-size: cover;
  background-position: center;
  margin-top: 5px;
  margin-left: 5px; }
#item-viewer .links a {
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  cursor: pointer;
  font-size: medium;
  padding: 10px;
  margin-top: 10px;
  word-break: break-all; }
  #item-viewer .links a:hover {
    background: rgba(0, 0, 0, 0.05); }
#item-viewer .claim-area {
  border-top: 1px dashed rgba(0, 0, 0, 0.4); }
  #item-viewer .claim-area .expander {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    cursor: pointer; }
    #item-viewer .claim-area .expander:hover {
      background: rgba(0, 0, 0, 0.05); }
  #item-viewer .claim-area .expand-area {
    width: 100%;
    padding: 10px; }
    #item-viewer .claim-area .expand-area .expand-title {
      font-weight: bold;
      display: block;
      text-align: center;
      font-size: large; }
    #item-viewer .claim-area .expand-area .expand-description {
      display: block;
      margin-top: 10px;
      text-align: center; }
    #item-viewer .claim-area .expand-area .expand-input {
      display: block;
      margin-top: 10px; }
    #item-viewer .claim-area .expand-area .expand-button {
      display: block;
      text-align: center;
      padding: 10px 0; }
  #item-viewer .claim-area .claimed-detail {
    display: block;
    padding: 10px; }
    #item-viewer .claim-area .claimed-detail .whom {
      display: block; }
    #item-viewer .claim-area .claimed-detail .notes {
      width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      padding: 5px;
      display: block;
      margin-top: 5px; }

#user-manager .explain {
  padding: 5px 10px; }
  #user-manager .explain.small {
    font-size: small; }
#user-manager .user-input {
  width: 100%;
  height: auto;
  padding: 10px 15px;
  display: block; }
  #user-manager .user-input #user-lookup-input {
    width: 100%;
    padding: 5px 20px; }

.selector-list {
  width: 100%;
  height: auto;
  padding: 1rem;
  display: block; }
  .selector-list .selector-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    align-items: center; }
    .selector-list .selector-item:last-child {
      border-bottom: 0; }
    .selector-list .selector-item .icon {
      width: 40px;
      height: 40px;
      display: block;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);
      overflow: hidden;
      background-size: cover;
      flex-shrink: 0; }
    .selector-list .selector-item .info-area {
      flex: 1 1;
      display: block;
      padding: 5px 10px; }
      .selector-list .selector-item .info-area .info-title {
        font-size: medium;
        font-weight: bold;
        display: block; }
      .selector-list .selector-item .info-area .info-permission {
        display: block;
        margin-top: 5px; }
    .selector-list .selector-item .actions {
      display: flex;
      flex-direction: column;
      align-items: center; }
    .selector-list .selector-item .approve {
      display: block;
      cursor: pointer;
      padding: 5px;
      margin-bottom: 5px; }
      .selector-list .selector-item .approve:hover {
        color: #00CC00; }
    .selector-list .selector-item .remove {
      display: block;
      cursor: pointer;
      padding: 5px; }
      .selector-list .selector-item .remove:hover {
        color: #CC0000; }
  .selector-list .empty-notice {
    font-style: italic;
    text-align: center;
    display: block; }

.gi-autocomplete {
  width: auto;
  height: auto;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: white;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 9999; }
  .gi-autocomplete .complete-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px; }
    .gi-autocomplete .complete-item:hover {
      background: rgba(0, 0, 0, 0.05); }
    .gi-autocomplete .complete-item:last-child {
      border-bottom: 0; }
    .gi-autocomplete .complete-item .icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.1);
      background-size: cover; }
    .gi-autocomplete .complete-item .content-area {
      flex: 1 1;
      display: block;
      padding: 5px; }

.gi-textfield {
  border: 1px solid #000;
  padding: 10px;
  border-radius: 5px; }
  .gi-textfield.large {
    font-size: large; }
  .gi-textfield.xlarge {
    font-size: x-large; }

.invite-attract .list-detail .list-image {
  width: 100%;
  padding-top: 66.66%;
  display: block;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.03);
  background-size: cover;
  flex-shrink: 0; }
.invite-attract .list-detail .list-title {
  font-size: 2.8em; }
.invite-attract .list-detail .list-description {
  font-size: medium; }
.invite-attract .action-prompt {
  font-size: medium;
  text-align: center;
  margin-top: 30px; }
.invite-attract .list-option {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  cursor: pointer;
  display: block;
  margin: 5px;
  padding: 10px;
  color: #333; }
  .invite-attract .list-option:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05); }

#list-item-editor .link-explain {
  margin-top: -0.5rem;
  font-size: small; }
#list-item-editor #link-area {
  display: block; }
  #list-item-editor #link-area .link-item {
    display: flex;
    margin-top: 10px;
    align-items: center; }
    #list-item-editor #link-area .link-item .link-input-container {
      flex: 1 1; }
    #list-item-editor #link-area .link-item .remove {
      display: block;
      margin-left: 10px; }
      #list-item-editor #link-area .link-item .remove:hover {
        color: #CC0000; }
#list-item-editor .explain {
  display: block;
  font-style: italic;
  font-size: small; }
#list-item-editor .priority-display {
  display: block;
  padding: 5px;
  text-align: center;
  font-size: medium; }
#list-item-editor .priority-container {
  display: flex;
  flex-direction: row;
  align-items: center; }
  #list-item-editor .priority-container .priority-label {
    display: block;
    font-weight: bold;
    padding: 5px;
    flex-shrink: 0; }
  #list-item-editor .priority-container .priority-container {
    flex: 1 1;
    display: block; }
#list-item-editor .image-container {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding-top: 5px; }
  #list-item-editor .image-container .image-item, #list-item-editor .image-container .add-item {
    width: 80px;
    height: 80px;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    margin-left: 5px;
    margin-bottom: 5px;
    background-size: cover;
    background-position: center; }
    #list-item-editor .image-container .image-item .overlay, #list-item-editor .image-container .add-item .overlay {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 0, 0, 0.4);
      display: none; }
    #list-item-editor .image-container .image-item:hover .overlay, #list-item-editor .image-container .add-item:hover .overlay {
      display: block; }
  #list-item-editor .image-container .add-item {
    background: #EFEFEF;
    text-align: center;
    font-size: xx-large;
    color: #777;
    padding-top: 0.5em; }
    #list-item-editor .image-container .add-item:hover {
      background: #DEDEDE; }
  #list-item-editor .image-container .empty-notice {
    width: 100%;
    display: block;
    text-align: center;
    font-size: medium;
    padding: 5px; }
#list-item-editor .central-button {
  text-align: center;
  margin-top: 10px; }

#list-user-modal .user-list .user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 5px;
  margin-top: 10px;
  cursor: default; }
  #list-user-modal .user-list .user-item:first-child {
    margin-top: 0px; }
  #list-user-modal .user-list .user-item .user-avatar {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    background-color: #EFEFEF;
    background-size: cover;
    border: 2px solid #FFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
  #list-user-modal .user-list .user-item .info-area {
    display: block;
    flex: 1 1;
    margin-left: 10px; }
    #list-user-modal .user-list .user-item .info-area .user-title {
      display: block;
      font-size: medium; }
    #list-user-modal .user-list .user-item .info-area .user-subtitle {
      display: block;
      font-size: small; }
#list-user-modal .user-list .empty-message {
  display: block;
  padding: 10px;
  text-align: center;
  font-style: italic;
  color: #333; }

#profile-editor .avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.05);
  background-position: center;
  background-size: cover;
  display: inline-block; }
#profile-editor .button-message {
  display: inline-block;
  font-style: italic;
  padding: 10px; }

/**
  INBOX
**/
#inbox-view #message-list {
  min-height: 200px; }
  #inbox-view #message-list .inbox-item {
    display: flex;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
    cursor: pointer;
    align-items: center;
    margin-top: 10px; }
    #inbox-view #message-list .inbox-item:hover {
      background-color: #EFEFEF; }
    #inbox-view #message-list .inbox-item.read .inbox-info .inbox-subject {
      font-weight: normal !important; }
    #inbox-view #message-list .inbox-item .inbox-icon {
      display: block;
      font-size: x-large;
      margin-left: 10px; }
    #inbox-view #message-list .inbox-item .inbox-info {
      flex: 1 1;
      margin-left: 20px; }
      #inbox-view #message-list .inbox-item .inbox-info .inbox-subject {
        display: block;
        font-size: large;
        font-weight: bold; }
      #inbox-view #message-list .inbox-item .inbox-info .inbox-subtitle {
        display: block;
        font-size: medium; }

/**
FRIENDS
 */
#friends #list-items {
  text-align: center;
  margin-top: 20px; }
  #friends #list-items .image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid black;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
    #friends #list-items .image .initials {
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      font-size: xx-large;
      text-align: center;
      font-weight: bold; }
      #friends #list-items .image .initials .inner {
        width: 100%;
        display: block;
        text-align: center; }
  #friends #list-items .friend-item {
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px; }
    #friends #list-items .friend-item:hover {
      background-color: rgba(0, 0, 0, 0.1); }
    #friends #list-items .friend-item .name {
      font-size: medium;
      margin-top: 5px;
      display: block; }
  #friends #list-items .invite-item {
    margin-top: 10px; }
    #friends #list-items .invite-item .info-area {
      display: block;
      margin-left: 10px; }
      #friends #list-items .invite-item .info-area .name {
        display: block;
        padding: 5px;
        font-size: x-large; }
      #friends #list-items .invite-item .info-area .actions {
        display: flex; }
        #friends #list-items .invite-item .info-area .actions .btn {
          flex: 1 1; }
        #friends #list-items .invite-item .info-area .actions .spacer {
          flex: 1 1;
          display: block; }
#friends #loading-spinner #loading-spinner-item {
  text-align: center; }

#user-profile .user-profile-top {
  text-align: center; }
  #user-profile .user-profile-top .user-profile-image {
    width: 120px;
    height: 120px;
    display: inline-block;
    border: 2px solid #000;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; }
    #user-profile .user-profile-top .user-profile-image .initials {
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      font-size: xx-large;
      text-align: center;
      font-weight: bold; }
      #user-profile .user-profile-top .user-profile-image .initials .inner {
        width: 100%;
        display: block;
        text-align: center; }
  #user-profile .user-profile-top .user-profile-name {
    font-size: xx-large; }

.modal .modal-content {
  border-radius: 30px; }
.modal .modal-header .modal-title {
  width: 100%;
  text-align: center; }
.modal .modal-header .close {
  margin-left: 0; }
.modal .modal-body {
  text-align: center; }
.modal .modal-footer {
  text-align: center; }
  .modal .modal-footer .btn {
    width: 100%; }

/*# sourceMappingURL=core-theme.css.map */