/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.hlc-color-error {
  color: #f44123;
}

.hlc-form-element-error {
  font-weight: normal;
  color: #f44123;
}

.hlc-form-element-help {
  color: #999ba2;
  font-weight: normal;
}
.hl-icon svg {
  width: 1em;
  height: 1em;
}
.custom-scrollbars > * {
  scroll-behavior: smooth;
}
.global-toast-notifications .notification-container {
  width: 100vw;
  -ms-flex-pack: center;
      justify-content: center;
  z-index: 10002;
}
.global-toast-notifications .notification-container .notification {
  width: unset;
  max-width: 600px;
}
.global-toast-notifications .notification-container .notification .type-icon,
.global-toast-notifications .notification-container .notification .close-icon {
  -ms-flex-positive: 0;
      flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}
.global-toast-notifications .notification-container .notification .notification-message {
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
@-webkit-keyframes library-folder-item-slide-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes library-folder-item-slide-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.library-folders-tree .rst__rowWrapper {
  padding: 4px;
  padding-left: 0;
  -webkit-animation: library-folder-item-slide-in 333.3333333333ms ease-in-out;
          animation: library-folder-item-slide-in 333.3333333333ms ease-in-out;
}
.library-folders-tree .rst__lineChildren {
  z-index: 0;
}
.library-folders-tree .rst__lineChildren::after {
  height: 4px;
}
.library-folders-tree .rst__row {
  height: 32px;
}
.library-folders-tree.just-main-folder .rst__lineBlock {
  display: none;
}
.library-folders-tree .folder-item.container-btn {
  min-width: 250px;
  background-color: #fff;
}
.library-folders-tree .folder-item.container-btn .folder-item-name:hover {
  text-decoration: underline;
}
.library-folders-tree .folder-item.container-btn.container-btn .container-btn-button:focus + .container-btn-content {
  text-decoration: underline;
  outline: 1px solid;
}
.library-folders-tree .folder-item.container-btn .folder-item-inner {
  border: 1px solid #dededf;
}
.library-folders-tree .folder-item.container-btn .folder-item-drag {
  border-right: 1px solid #dededf;
  cursor: move;
  z-index: 1;
}
.library-folders-tree .folder-item.container-btn .folder-item-drag,
.library-folders-tree .folder-item.container-btn .folder-item-name,
.library-folders-tree .folder-item.container-btn .folder-item-ellipsis {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 8px;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.spaced-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.spaced-row.spaced-row-0 {
  margin: 0;
}
.spaced-row.spaced-row-0 > * {
  margin: 0;
}
.spaced-row.spaced-row-1 {
  margin: -4px;
}
.spaced-row.spaced-row-1 > * {
  margin: 4px;
}
.spaced-row.spaced-row-2 {
  margin: -8px;
}
.spaced-row.spaced-row-2 > * {
  margin: 8px;
}
.spaced-row.spaced-row-3 {
  margin: -16px;
}
.spaced-row.spaced-row-3 > * {
  margin: 16px;
}
.spaced-row.spaced-row-4 {
  margin: -24px;
}
.spaced-row.spaced-row-4 > * {
  margin: 24px;
}
.spaced-row.spaced-row-5 {
  margin: -48px;
}
.spaced-row.spaced-row-5 > * {
  margin: 48px;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-filterRow--panelHeading {
  font-weight: 600;
}

.bootstrap-4 .library-filter-popover .popover {
  font-size: inherit;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
/*-----------------------------------------------------------*/
/*----               Pagination Component                ----*/
/*-----------------------------------------------------------*/
.pagination-row {
  background: #fff;
}
.pagination-row .page-spread .page-item.active .page-link {
  pointer-events: none;
}
.pagination-row .page-spread .page-item.disabled .page-link {
  pointer-events: visible;
  cursor: not-allowed;
}
.pagination-row .page-spread * {
  outline: none;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.pagination-row .page-size {
  position: relative;
}
.pagination-row .page-size select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  padding-right: 1.5em;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.pagination-row .page-size select.form-control:active, .pagination-row .page-size select.form-control:focus {
  -webkit-box-shadow: #19528a auto 1px;
          box-shadow: #19528a auto 1px;
  border: #19528a auto 1px;
  outline: #19528a auto 1px;
}
.pagination-row .page-size select,
.pagination-row .page-size option {
  -moz-text-align-last: right;
       text-align-last: right;
}
.pagination-row .page-size .page-size-caret {
  margin-left: -1.6em;
  pointer-events: none;
}
.pagination-row .page-size:after {
  content: "";
  left: 10px;
  bottom: 0.25em;
  height: 3px;
  width: calc(100% - 0.6em);
  border-bottom: 1px dashed #292929;
  position: absolute;
}
.pagination-row .page-go-to input[type=text] {
  width: 5em;
  color: #606065;
}
.pagination-row .page-spread {
  margin-top: 0;
  margin-bottom: 0;
}
.pagination-row .page-spread .page-link:focus {
  z-index: 4;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.pagination-row .page-spread .page-item {
  padding: 0;
  margin: 0;
}
.pagination-row .page-spread .page-item:hover .page-link:not(.directional) span:after {
  content: "";
  height: 1px;
  width: 100%;
  display: block;
  margin: 0 auto;
  border-bottom: 1px solid;
  border-color: #606065;
  margin-bottom: -2px;
}
.pagination-row .page-spread .page-item.disabled .page-link:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.pagination-row .page-spread .page-item.active .page-link {
  border: 1px solid transparent;
}
.pagination-row .icon {
  margin-bottom: -2px;
}
.pagination-row .pagination {
  margin: 0;
}
.pagination-row span[role=button] {
  margin-top: 0.1em;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.layout-grid .layout-grid-cell:focus {
  outline: 1px dotted;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.bio-bubble-link > :not(a) {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.popover {
  max-width: 23em;
  max-width: unset;
}
.popover .arrow {
  border-style: none;
}

.bio-bubble-container {
  position: relative;
  min-height: 8em;
  width: 21em;
}
.bio-bubble-container .close-bio-bubble {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.bio-bubble {
  position: relative;
  width: 21em;
}
.bio-bubble .bio-bubble-profile small {
  display: block;
}
.bio-bubble .bio-bubble-profile .bio-bubble-copy {
  min-height: 5.5em;
}
.bio-bubble .bio-bubble-profile .bio-bubble-copy .bio-bubble-name {
  max-width: 12em;
}
.bio-bubble .bio-bubble-profile .bio-bubble-figures .badge {
  max-width: 8em;
  white-space: normal !important;
}
.bio-bubble .bio-bubble-profile .bio-bubble-avatar {
  width: 5.5em;
  height: 5.5em;
  border-radius: 50%;
  overflow: hidden;
  background: #7c7c7c;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}
.bio-bubble .bio-bubble-profile .bio-bubble-avatar img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-entry-meta > small {
  display: block;
}
.library-entry-meta .icon {
  margin: none;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-card .library-entry-counts {
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-left: 4px;
}
.library-card .library-entry-counts > :not(:last-child) {
  margin-right: 24px;
}

.library-row .library-entry-counts {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  -ms-flex-pack: start;
      justify-content: flex-start;
  margin-left: 1em;
}
.library-row .library-entry-counts > :not(:last-child) {
  margin-left: 24px;
}

.library-entry .library-entry-counts .entry-count-text {
  -webkit-transition: font-size 333.3333333333ms linear;
  -o-transition: font-size 333.3333333333ms linear;
  transition: font-size 333.3333333333ms linear;
}
.library-entry.medium .library-entry-counts .entry-count-text {
  font-size: 0;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-entry-preview-icon {
  height: 2.5em;
  width: 2em;
  bottom: -0.25em;
  right: -0.25em;
}
.library-row :not(.library-entry-preview) > .library-entry-preview-icon {
  margin-right: 1em;
  -webkit-transition: opacity 333.3333333333ms linear, width 333.3333333333ms linear, margin 333.3333333333ms linear;
  -o-transition: opacity 333.3333333333ms linear, width 333.3333333333ms linear, margin 333.3333333333ms linear;
  transition: opacity 333.3333333333ms linear, width 333.3333333333ms linear, margin 333.3333333333ms linear;
}
.library-row.narrow .library-entry-preview-icon {
  margin-right: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-entry-preview {
  position: relative;
  border-radius: 4px;
}
.library-card .library-entry-preview {
  width: 100%;
  height: 8em;
}
.library-card .library-entry-preview .library-entry-preview-icon {
  height: 2.5em;
  width: 2.5em;
  bottom: -0.85em;
  right: 0.65em;
}
.library-row.narrow .library-entry-preview {
  margin-right: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
}
.library-row .library-entry-preview {
  margin-right: 1em;
  -webkit-transition: opacity 333.3333333333ms linear, width 333.3333333333ms linear, margin 333.3333333333ms linear;
  -o-transition: opacity 333.3333333333ms linear, width 333.3333333333ms linear, margin 333.3333333333ms linear;
  transition: opacity 333.3333333333ms linear, width 333.3333333333ms linear, margin 333.3333333333ms linear;
  height: 7em;
  width: 7em;
}
.library-row .library-entry-preview .library-entry-preview-icon {
  height: 2em;
  width: 2em;
  bottom: -0.25em;
  right: -0.25em;
}
.library-row .library-entry-preview .library-entry-preview-images {
  border-radius: 4px;
}
.library-entry-preview .library-entry-preview-images {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.library-entry-preview .library-entry-preview-images .extra-counts {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  font-size: 1em;
  font-weight: 900;
  background: rgba(222, 222, 223, 0.8);
}
.library-entry-preview .library-entry-preview-icon {
  position: absolute;
  background-image: #fff;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-card.grid-card {
  margin: 0;
  position: relative;
}
.library-card.grid-card .card-body {
  -ms-flex-positive: 1;
      flex-grow: 1;
  padding: 1em;
}
.library-card.grid-card .card-footer {
  color: #606065;
  padding: 0 1em 0.5em;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-cards-grid .layout-grid-cell {
  border-radius: 8px;
}
.library-cards-grid .layout-grid-cell.selected {
  background-color: #e1eefb;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.hl-lightbox {
  background: -o-linear-gradient(63deg, #292929 0%, #292929 50%, #292929 100%);
  background: linear-gradient(27deg, #292929 0%, #292929 50%, #292929 100%);
}
.hl-lightbox .lightbox-close-section {
  top: 0;
  right: 0;
}
.hl-lightbox .lightbox-controls-section .lighbox-controls-caption {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
@media (min-width: 769px) {
  .hl-lightbox .lightbox-controls-section {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
  .hl-lightbox .lightbox-controls-section .lighbox-controls-caption {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-direction: column;
        flex-direction: column;
  }
  .hl-lightbox .lightbox-controls-section .lightbox-thumbnails {
    -ms-flex-positive: 1;
        flex-grow: 1;
  }
}
.hl-lightbox .lightbox-thumbnails {
  height: calc(4.5em + 6px);
}
.hl-lightbox .lightbox-thumbnails > .lightbox-thumbnails-track {
  padding-bottom: 0.5em;
}
@media (max-width: 768px) {
  .hl-lightbox .lightbox-thumbnails {
    height: calc(4em + 6px);
  }
  .hl-lightbox .lightbox-thumbnails > .lightbox-thumbnails-track {
    padding-bottom: 0;
  }
}
.hl-lightbox .lightbox-thumbnail {
  height: 4em;
  width: 4em;
  margin: 3px;
}
@media (max-width: 768px) {
  .hl-lightbox .lightbox-thumbnail {
    height: 4em;
    width: 4em;
  }
}
.hl-lightbox .lightbox-thumbnail .lightbox-thumbnail-btn.selected:not(:focus) {
  outline: 3px solid #5796ea;
}
.hl-lightbox .lightbox-thumbnail .lightbox-thumbnail-btn.selected:focus {
  outline: 3px solid #acc7ec;
}
.hl-lightbox .lightbox-thumbnail > button.custom-btn,
.hl-lightbox .lightbox-thumbnail .thumbnail-box {
  height: 100%;
  width: 100%;
}
.hl-lightbox .ghost-thumb {
  width: 4.5em;
  height: 4em;
  max-height: 100%;
  max-width: 100%;
}
.hl-lightbox .lightbox-slide {
  padding: 4px;
}
.hl-lightbox .lightbox-slide .thumbnail-box {
  width: 4.5em;
  height: 4em;
}
.hl-lightbox .lightbox-slide:focus {
  outline: 2px solid #acc7ec;
  outline-offset: -2px;
}
.hl-lightbox .lightbox-arrow.left,
.hl-lightbox .lightbox-arrow.right {
  height: calc(100% - 3em);
  padding: 0;
  top: 1.5em;
  z-index: 1;
}
.image-loader .image-container > img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.hlc-progress {
  height: 5px;
  width: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#f58026), to(#f58026));
  background: -o-linear-gradient(left, #f58026, #f58026);
  background: linear-gradient(to right, #f58026, #f58026);
  background-color: #fce1c8;
  background-repeat: repeat-y;
}

.indeterminate {
  background-position: -25% 0;
  background-size: 20%;
  -webkit-animation: scroll 1.2s ease-in-out infinite;
          animation: scroll 1.2s ease-in-out infinite;
}

@-webkit-keyframes scroll {
  50% {
    background-size: 80%;
  }
  100% {
    background-position: 125% 0;
  }
}

@keyframes scroll {
  50% {
    background-size: 80%;
  }
  100% {
    background-position: 125% 0;
  }
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.hl-overlay {
  top: 0;
  left: 0;
}

.overlay-button {
  cursor: pointer;
}
.overlay-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.gradient-overlay {
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), color-stop(5em, rgba(255, 255, 255, 0.229167)), color-stop(10em, rgba(255, 255, 255, 0)));
  background: -o-linear-gradient(bottom, #ffffff, rgba(255, 255, 255, 0.229167) 5em, rgba(255, 255, 255, 0) 10em);
  background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.229167) 5em, rgba(255, 255, 255, 0) 10em);
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.entry-preview-sektion {
  padding: 8px;
}
.entry-preview-sektion.list-sektion .library-entry-preview-list-item {
  margin-top: 16px;
  margin-bottom: 16px;
}
@media (max-width: 425px) {
  .entry-preview-sektion.list-sektion {
    padding-left: 0;
    padding-right: 0;
  }
  .entry-preview-sektion.list-sektion .entry-preview-sektion-header {
    padding: 8px;
  }
  .entry-preview-sektion.list-sektion .library-entry-preview-list-item {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.entry-preview-sektion .skeleton-loading-guard {
  min-height: 3.5em;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.file-item-copy .size-text {
  background-color: #efefef;
}
@media (max-width: 425px) {
  .file-item-copy > .d-flex {
    -ms-flex-direction: column;
        flex-direction: column;
  }
  .file-item-copy .size-text {
    background-color: #fff;
    padding: 0;
  }
}

@media (max-width: 425px) {
  .library-file-item.file-item .file-item-copy .file-description {
    display: none;
  }
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-file-item {
  height: 4em;
}
.library-file-item a:not(:hover) {
  color: #292929;
}
@media (min-width: 425px) {
  .library-file-item:hover {
    position: relative;
    z-index: 1;
  }
}
@media (min-width: 426px) {
  .library-file-item .thumb-slot {
    margin-right: 8px;
  }
  .library-file-item .copy-slot {
    padding: 8px;
  }
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.file-item-thumb {
  position: relative;
  width: 6em;
  height: 4em;
  background-color: #dededf;
}
@media (max-width: 425px) {
  .file-item-thumb {
    width: 4em;
    background-color: transparent;
  }
  .file-item-thumb .file-item-thumb-bg.file-item-thumb-bg.file-item-thumb-bg.file-item-thumb-bg.file-item-thumb-bg {
    display: none;
  }
}
.file-item-thumb .file-item-thumb-bg {
  position: absolute;
  top: 0;
  left: 0;
}
.file-item-thumb .file-item-thumb-icon {
  position: relative;
  height: 2.25em;
  width: 2.25em;
}
.file-item-thumb .file-thumb-front-side,
.file-item-thumb .file-thumb-back-side {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 2.25em;
  width: 2.25em;
}
.file-item-thumb .file-thumb-front-side {
  visibility: visible;
}
.file-item-thumb .file-thumb-back-side {
  visibility: hidden;
}
.library-file-item:hover:not([class*=no-hover]) .file-item-thumb .file-thumb-front-side {
  visibility: hidden;
}
.library-file-item:hover:not([class*=no-hover]) .file-item-thumb .file-thumb-back-side {
  visibility: visible;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.single-image-preview-container {
  max-height: 500px;
  min-height: 150px;
  overflow: hidden;
}
.entry-youtube {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}
.entry-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: unset;
  border-style: unset;
  border-color: unset;
  -o-border-image: unset;
     border-image: unset;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
/*------------------------------------------------------------------------*/
/*----               Comment Layout and Item Component                ----*/
/*------------------------------------------------------------------------*/
.library-details--comment-list-empty {
  font-size: 16px;
  width: 100%;
  color: #606065;
  background: #f7f7f7;
  border-radius: 5px;
  text-align: center;
  /* Inside Auto Layout */
  padding: 15px;
}
.library-details--comment-list-empty p {
  margin: 0;
}

.library-details--comment-list {
  background: #fff;
  border-radius: 5px;
  /* Inside Auto Layout */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
}

.library-details--comment-container-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
}
.library-details--comment-container h4 {
  font-weight: 700;
  font-size: 1em;
  line-height: 156%;
  font-style: normal;
}
.library-details--comment-container .skeleton-loading-guard {
  min-height: 3.5em;
}

.library-details-comment-item .author-avatar {
  height: 4em;
  width: 4em;
}
.library-details-comment-item .author-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-details {
  padding: 8px 16px;
}
@media (max-width: 425px) {
  .library-details {
    padding: 8px 0;
  }
}
.library-details .library-folders-close,
.library-details .library-entry-ellipsis .dropdown > button {
  font-size: 20px;
}
.library-details > div.hyperlink-no-open-graph > a:hover, .library-details > div.hyperlink-no-open-graph > a:focus {
  text-decoration: none;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.likes-modal .people-likes {
  color: #fff;
}
.likes-modal .library-details-recommenduser-list {
  background: #f7f7f7;
  display: -ms-flexbox;
  display: flex;
}
.likes-modal .library-details-likes-user-avatar {
  width: 50px;
  height: 50px;
}
.likes-modal .library-details-likes-user-avatar img {
  height: 100%;
  width: 100%;
}
.likes-modal .library-details-likes-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
}
.likes-modal .library-details-likes-copy {
  -ms-flex-positive: 1;
      flex-grow: 1;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-details .hyperlink-no-open-graph > a {
  text-decoration: none;
}
.library-details .hyperlink-no-open-graph > a .link-name {
  font-weight: 600;
}

.library-details-header h3 > span {
  font-weight: 580;
}
.hl-profile-avatar img {
  width: 4em;
  height: 4em;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hl-profile-avatar.lg img {
  width: 5.5em;
  height: 5.5em;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-entry-description {
  position: relative;
  overflow: hidden;
}
.library-entry-description.collapsed {
  max-height: 160px;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-file-details {
  padding: 8px 16px;
}
@media (max-width: 425px) {
  .library-file-details {
    padding: 8px 0;
  }
}
.library-file-details > div.hyperlink-no-open-graph > a:hover, .library-file-details > div.hyperlink-no-open-graph > a:focus {
  text-decoration: none;
}
.library-file-details .library-file-back-btn-icon {
  color: #292929;
}
.library-file-details .library-file-back-btn:hover .library-file-back-btn-icon {
  color: inherit;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-entry-file-button {
  height: 60px;
  border-radius: 2px;
  line-height: 1.2;
}
.library-entry-file-button.custom-btn {
  overflow: hidden;
}
.library-entry-file-button.left {
  -ms-flex-pack: start;
      justify-content: start;
  text-align: left;
}
.library-entry-file-button.right {
  -ms-flex-pack: end;
      justify-content: end;
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
  text-align: right;
}
.library-entry-file-button .file-type {
  min-height: 60px;
  min-width: 60px;
}
.library-entry-file-button .file-title {
  margin: 1em;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-entry.library-row {
  position: relative;
  border-bottom: 1px solid #dededf;
  padding: 1em;
}
.library-entry.library-row .library-entry-row-tags {
  margin-bottom: -3px;
}
.library-entry.library-row .library-entry-copy {
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
.library-entry.library-row .library-misc {
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: end;
      align-items: flex-end;
  color: #606065;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.tags-list a.label-search-tag {
  background-image: none;
  border: 1px solid #efefef;
  margin: 3px 0 3px 5px;
  padding: 4px 6px;
  border-radius: 0.25em;
  white-space: nowrap;
  font-size: 12px;
}
.tags-list a.label-search-tag.long-text {
  -ms-flex-negative: 3;
      flex-shrink: 3;
}
.tags-list a.label-search-tag.short-text {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.tags-list a.label-search-tag:hover {
  text-decoration: underline;
}
.tags-list a.label-search-tag i {
  color: #7c7c7c;
}

.tags-icon {
  color: #7c7c7c;
  font-size: 12px;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.library-rows-grid .layout-grid-cell:hover {
  background-color: #f7f7f7;
}
.library-rows-grid .layout-grid-cell.selected {
  background-color: #e1eefb;
}
.library-rows-grid .layout-grid-cell:focus {
  outline-offset: -2px;
}
.btn {
  border-radius: 2px;
}
.hlc-empty-state-cards-wrapper {
  height: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.hlc-empty-state-three-cards,
.hlc-empty-state-two-cards {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}

.hlc-empty-state-card {
  width: 120px;
}

.hlc-empty-state-three-cards .hlc-empty-state-card:nth-of-type(1) {
  -webkit-transform: rotate(-10deg) translate(10px, 20px);
      -ms-transform: rotate(-10deg) translate(10px, 20px);
          transform: rotate(-10deg) translate(10px, 20px);
}
.hlc-empty-state-three-cards .hlc-empty-state-card:nth-of-type(2) {
  -webkit-box-shadow: 0 2px 7px rgba(153, 155, 162, 0.6);
          box-shadow: 0 2px 7px rgba(153, 155, 162, 0.6);
  z-index: 1;
}
.hlc-empty-state-three-cards .hlc-empty-state-card:nth-of-type(3) {
  -webkit-transform: rotate(10deg) translate(-10px, 20px);
      -ms-transform: rotate(10deg) translate(-10px, 20px);
          transform: rotate(10deg) translate(-10px, 20px);
}

.hlc-empty-state-two-cards .hlc-empty-state-card:nth-of-type(1) {
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
.hlc-empty-state-two-cards .hlc-empty-state-card:nth-of-type(2) {
  -webkit-transform: rotate(4deg) translate(-30px, 25px);
      -ms-transform: rotate(4deg) translate(-30px, 25px);
          transform: rotate(4deg) translate(-30px, 25px);
}

.hlc-empty-state-card-top-part {
  height: 80px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.hlc-empty-state-card-bottom-part {
  height: 50px;
  padding: 10px;
  background-color: #efefef;
}
.hlc-empty-state-card-bottom-part div {
  background-color: #dededf;
  height: 8px;
}
.hlc-empty-state-card-bottom-part div:first-of-type {
  margin-bottom: 8px;
}
.hlc-empty-state-card-bottom-part div:last-of-type {
  width: 80%;
}

.hlc-empty-state-card-description {
  text-align: center;
}
.hlc-empty-state-card-description > button {
  margin-right: 20px;
}
.hlc-empty-state-card-description > button:last-of-type {
  margin-right: 0;
}
.hlc-empty-state-card-description > h3 {
  margin-top: 60px;
  font-weight: 500;
  font-size: 22px;
}

.hlc-empty-state-card-secondary-text {
  margin-bottom: 20px;
  color: #6f727c;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
.hl-carousel .hl-carousel-item {
  background: #fff;
}
.hl-carousel .hl-carousel-item > * {
  width: inherit;
}
.hl-carousel .hl-carousel-arrow {
  background-color: #f7f7f7;
}
.hl-carousel .hl-carousel-arrow-container {
  background-color: #fff;
  z-index: 1;
}
/* HEY LOOK HERE - NOTE - if you're adding a custom variable, make sure '!default' in not at the end, otherwise,
 Bootstrap will enforce the factory default color */
/*------------------------------------------------*/
/*----               Variables                ----*/
/*------------------------------------------------*/
/*------------------------------------------------*/
/*----               RESETS                   ----*/
/*------------------------------------------------*/
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

label {
  margin-bottom: 0;
}

div {
  -webkit-animation: all 0.1s appear;
          animation: all 0.1s appear;
}

.grabbable {
  cursor: all-scroll;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -webkit-grab;
  /* (Optional) Apply a "closed-hand" cursor during drag operation. */
}
.grabbable:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

@media (max-width: 767px) {
  .inactiveMobile {
    position: absolute;
    z-index: 0;
  }

  .hide-small {
    display: none;
  }
}
.grabbable {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
  cursor: -webkit-grab;
}

/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
  cursor: grabbing !important;
  cursor: -webkit-grabbing;
}

/*----------------------------------------------------------------*/
/*----               Library Content Component                ----*/
/*----------------------------------------------------------------*/
.library-content {
  max-width: 1440;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}

/*------------------------------------------------------------------*/
/*----               ContentWithPanels Component                ----*/
/*------------------------------------------------------------------*/
.library-content .content-with-panels .left-panel {
  background-color: #efefef;
}
@media (min-width: 426px) {
  .library-content .content-with-panels .right-panel {
    border-left: 1px solid #dededf;
  }
}
.library-content .content-with-panels .left-panel,
.library-content .content-with-panels .right-panel,
.library-content .content-with-panels .center-panel {
  height: 700px;
}
.library-content .hlc-empty-state-cards-wrapper {
  height: 700px;
}
.library-content .img-slot {
  width: 100%;
  height: 100%;
  position: relative;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  background: #dededf;
  color: #292929;
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
.library-content .img-slot .multi-img {
  width: 96px;
  height: 64px;
}
.library-content .img-slot > *,
.library-content .img-slot .thumbnail-box {
  height: 100%;
  width: 100%;
}
.library-content .img-slot .ghost-thumb {
  width: 4.5em;
  height: 4em;
  max-height: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  .library-view-toggle {
    display: none;
  }
}

/*-----------------------------------------------------------------*/
/*----               Library-Checkbox Component                ----*/
/*-----------------------------------------------------------------*/
.library-checkbox {
  /* The container */
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
  /* On mouse-over, add a grey background color */
  /* When the checkbox is checked, add a blue background */
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Show the checkmark when checked */
  /* Style the checkmark/indicator */
}
.library-checkbox--container {
  margin: 15px;
}
.library-checkbox .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.library-checkbox .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.library-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 3px solid #606065;
  border-radius: 3px;
}
.library-checkbox .container:hover input ~ .checkmark {
  background-color: #efefef;
}
.library-checkbox .container input:checked ~ .checkmark {
  background-color: #5796ea;
  border: 3px solid #5796ea;
}
.library-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.library-checkbox .container input:checked ~ .checkmark:after {
  display: block;
}
.library-checkbox .container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.staged {
  background-color: #e1eefb !important;
}

@-webkit-keyframes appear {
  0% {
    width: 0px;
  }
  100% {
    width: 400px;
  }
}

@keyframes appear {
  0% {
    width: 0px;
  }
  100% {
    width: 400px;
  }
}
@keyframes appear {
  0% {
    width: initial;
  }
  100% {
    width: 0px;
  }
}
.moderation-badge {
  background-color: #e1eefb;
  color: #1460aa;
}

/*# sourceMappingURL=LibraryContent-296f7ffc.9568ea00.chunk.css.map*/