@charset "UTF-8";
:root {
  --animation-speed-slow: 1s;
  --animation-speed-medium: 0.5s;
  --animation-speed-fast: 0.25s;
  --inverse-multiplier: 1;
  --blue-dark-colour: hsl(200deg, 75%, 50%);
  --blue-base-colour: hsl(200deg, 75%, 60%);
  --blue-bright-colour: hsl(200deg, 75%, 70%);
}

@font-face {
  font-family: "aptos-light";
  src: url("/fonts/aptos-light.ttf");
}
@font-face {
  font-family: "aptos";
  src: url("/fonts/aptos.ttf");
}
@font-face {
  font-family: "aptos-semibold";
  src: url("/fonts/aptos-semibold.ttf");
}
@font-face {
  font-family: "aptos-bold";
  src: url("/fonts/aptos-bold.ttf");
}
@font-face {
  font-family: "aptos-extrabold";
  src: url("/fonts/aptos-extrabold.ttf");
}
@font-face {
  font-family: "aptos-black";
  src: url("/fonts/aptos-black.ttf");
}
@font-face {
  font-family: "Lexend-ExtraLight";
  src: url("/fonts/Lexend-ExtraLight.ttf");
}
@font-face {
  font-family: "Lexend-Bold";
  src: url("/fonts/Lexend-Bold.ttf");
}
/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: hsl(0, 0%, 20%);
}

::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 40%);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(145deg, hsl(0, 0%, 37%), hsl(0, 0%, 33%));
}

h1 {
  font-family: "aptos-bold";
  color: hsl(0, 0%, 80%);
  font-size: 24px;
  margin: 0px;
  padding: 0px;
}

h2 {
  font-family: "aptos-semibold";
  color: hsl(0, 0%, 60%);
  font-size: 18px;
  margin: 0px;
  padding: 0px;
}

button {
  width: -moz-fit-content;
  width: fit-content;
  font-family: "aptos";
  border: none;
  border-radius: 8px;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
  font-size: 14px;
  padding: 0px 20px;
  text-wrap: nowrap;
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium);
}
button.primary {
  background-color: hsl(0, 0%, 90%);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button.primary:hover {
  background-color: hsl(0, 0%, 80%);
}
button.secondary {
  color: hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 20%);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button.secondary:hover {
  color: hsl(0, 0%, 100%);
  background-color: hsl(0, 0%, 30%);
}
button.tertiary {
  color: hsl(0, 0%, 60%);
  background-color: transparent;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
button.tertiary:hover {
  color: hsl(0, 0%, 100%);
}
button.red {
  background-color: hsl(0, 80%, 45%);
  color: hsl(0, 0%, 100%);
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium);
}
button.red:hover {
  background-color: hsl(0, 80%, 50%);
}
button:disabled {
  background-color: hsl(0, 0%, 10%);
  color: hsl(0, 0%, 40%);
  font-style: italic;
  cursor: not-allowed;
}
button:disabled:hover {
  background-color: hsl(0, 0%, 10%);
  color: hsl(0, 0%, 40%);
  font-style: italic;
  cursor: not-allowed;
}

.customTextInput, textarea, .text, input[type=text], input[type=email], input[type=password], input[type=number] {
  box-sizing: border-box;
  width: 100%;
  font-family: "aptos";
  font-size: 14px;
  border: none;
  border-radius: 8px;
  height: 42px;
  line-height: 42px;
  background-color: hsl(0, 0%, 20%);
  color: hsl(0, 0%, 80%);
  padding: 0px 12px;
  position: relative;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: center;
  background-size: 28px;
  cursor: text;
  resize: none;
}

input[type=password] {
  background-image: url("/images/password-locked.svg");
}

/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.text::before {
  content: attr(data-placeholder);
  color: hsl(0, 0%, 40%);
  font-family: "aptos";
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0px;
  left: 16px;
  transition: 0.5s ease all;
}
.text:not(:empty):before, .text:focus:not(:empty):before {
  opacity: 0;
}

input[type=checkbox]:checked, input[type=checkbox]:hover {
  background: hsl(0, 0%, 40%);
  color: white;
}

input[type=checkbox] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: hsl(0, 0%, 10%);
  height: 16px;
  width: 16px;
  border: 1px solid hsl(0, 0%, 40%);
  border-radius: 4px;
}

input[type=checkbox]:after {
  content: " ";
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(50deg);
  display: none;
}

input[type=checkbox]:checked:after {
  display: block;
}

/* Focus style */
input[type=checkbox]:focus {
  outline: 1px solid white;
  outline-offset: 1px;
}

.wait {
  cursor: wait;
}

.alink, a {
  color: hsl(0, 0%, 40%);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.5s;
}
.alink:hover, a:hover {
  color: hsl(0, 0%, 80%);
}

.backChevron {
  cursor: pointer;
}

.errorMessage {
  color: hsl(0, 80%, 50%);
  height: 24px;
  font-size: 12px;
  line-height: 24px;
}

.hidden {
  display: none !important;
}

.anim_scale_horizontally {
  overflow: hidden;
  margin: 0px !important;
  width: 0px !important;
  opacity: 0.1;
  filter: blur(10px);
  transition: width var(--animation-speed-medium), margin var(--animation-speed-medium), opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}

.anim_scale_vertically {
  overflow: hidden;
  margin: 0px !important;
  height: 0px !important;
  opacity: 0.1;
  filter: blur(10px);
  transition: height var(--animation-speed-medium), margin var(--animation-speed-medium), opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}

.anim_fade {
  opacity: 0;
  transition: opacity var(--animation-speed-medium);
}

.anim_slide_up {
  opacity: 0;
  transform: translateY(calc(100% + 20px));
  transition: opacity var(--animation-speed-medium), transform var(--animation-speed-medium);
}

.get_started {
  width: 100%;
  height: 100%;
  display: flex;
}
.get_started .leftPanel {
  flex: 1 1 auto;
  position: relative;
  background-image: url("/images/auth.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 1 1 auto;
  display: flex;
  padding: 36px 47px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.get_started .leftPanel .box {
  max-width: 830px;
  filter: drop-shadow(0px 0px 5px hsla(215, 15%, 10%, 0.5));
}
.get_started .leftPanel .box h1 {
  font-family: "Lexend-ExtraLight";
  font-weight: initial;
  font-size: 48px;
  line-height: 48px;
  color: hsl(0, 0%, 100%);
  margin: 24px 0;
}
.get_started .leftPanel .box h1 .highlight {
  font-family: "Lexend-Bold";
}
.get_started .leftPanel .box h2 {
  margin-top: 24px;
  color: hsl(0, 0%, 100%);
  font-family: "Lexend-ExtraLight";
  font-weight: initial;
  margin: 16px 0;
}
.get_started .rightPanel {
  flex: 1 1 auto;
  max-width: 400px;
  min-width: 300px;
  padding: 60px 120px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 500px) {
  .get_started .rightPanel {
    min-width: 250px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    padding: 60px 30px 0px 30px;
  }
}
.get_started .rightPanel .logo {
  flex: 0 0 auto;
}
.get_started .rightPanel .form-container {
  flex: 1 1 auto;
  display: inline-grid;
  align-items: center;
}
.get_started .rightPanel .form-container .form {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 10px;
}
.get_started .rightPanel .form-container .form input[type=number] {
  width: inherit;
  text-align: center;
}
.get_started .rightPanel .form-container .form button {
  width: 100%;
}
.get_started .rightPanel .form-container .form .or {
  height: 22px;
  margin-top: 24px;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  display: flex;
  color: hsl(0, 0%, 90%);
  font-size: 12px;
  align-items: center;
}
.get_started .rightPanel .form-container .form .or * {
  margin: 0px !important;
}
.get_started .rightPanel .form-container .form .or .separator {
  flex: 1 1 auto;
  position: relative;
}
.get_started .rightPanel .form-container .form .or .separator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: hsl(0, 0%, 90%); /* Adjust color as needed */
  transform: translateY(-50%);
}
.get_started .rightPanel .form-container .form :last-child {
  margin-bottom: 0px !important;
}
.get_started .rightPanel .form-container .form .verificationForm {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 26, 26, 0.9294117647);
  gap: 5px;
  overflow: hidden;
  transition: opacity var(--animation-speed-medium);
}
.get_started .rightPanel .form-container .form .numbersContainer {
  display: flex;
  width: calc(100% - 4px);
  gap: 5px;
  padding: 2px;
}
.get_started .rightPanel .form-container .form .container {
  margin-bottom: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2px;
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium), width var(--animation-speed-medium), height var(--animation-speed-medium), margin var(--animation-speed-medium), opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}
.get_started .rightPanel .form-container .form .container.horizontal {
  flex-direction: row;
  align-items: center;
}
.get_started .rightPanel .form-container .form .container.horizontal * {
  margin-bottom: 0px;
  margin-right: 8px;
}
.get_started .rightPanel .form-container .form .container.horizontal :last-child {
  margin-bottom: 0px;
  margin-right: 0px;
}
.get_started .rightPanel .form-container .form .container * {
  margin-right: 0px;
  margin-bottom: 8px;
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium), width var(--animation-speed-medium), height var(--animation-speed-medium), margin var(--animation-speed-medium), opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}
.get_started .rightPanel .form-container .form .container :last-child {
  margin-right: 0px;
  margin-bottom: 0px;
}
.get_started .rightPanel .form-container .form .passwordInfo {
  font-size: 12px;
  padding-left: 4px;
  color: hsl(0, 0%, 40%);
}
.get_started .rightPanel .form-container .form .termsInfo {
  display: flex;
  gap: 6px;
}
.get_started .rightPanel .form-container .form .termsInfo * {
  margin: 0px;
}

.hub {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.hub main {
  flex: 1 1 auto;
  display: flex;
}
.hub main section {
  background-color: hsl(0, 0%, 11%);
  flex: 1 1 auto;
  border-radius: 8px;
  filter: drop-shadow(0px 0px 8px hsla(0, 0%, 0%, 0.25));
  display: flex;
  flex-direction: column;
  margin-right: 23px;
  margin-bottom: 23px;
}
@media screen and (max-width: 650px) {
  .hub main section {
    margin: 0px 15px;
  }
}
.hub main section .toolbar {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
}
.hub main section .toolbar .companies-icon {
  background-image: url(../images/chevron-down.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px;
  width: 10px;
  height: 17px;
  margin-left: 30px;
  cursor: pointer;
}
.hub main section .toolbar .company {
  flex: 1 1 auto;
  display: flex;
  margin-left: 8px;
  color: hsl(0, 0%, 80%);
  font-family: "aptos-semibold";
}
.hub main section .toolbar .tools {
  flex: 0 0 auto;
  display: flex;
  padding-right: 30px;
  gap: 12px;
}
.hub main section .toolbar .tools .add {
  width: 15px;
  height: 30px;
  background: url("/images/add-icon.svg") no-repeat center;
  cursor: pointer;
  position: relative;
}
.hub main section .toolbar .tools .add:hover {
  background-image: url("/images/add-icon-hover.svg");
}
.hub main section .toolbar .tools .external-links {
  width: 18px;
  height: 30px;
  background: url("/images/external-links-icon.svg") no-repeat center;
  cursor: pointer;
  position: relative;
}
.hub main section .toolbar .tools .external-links:hover {
  background-image: url("/images/external-links-icon-hover.svg");
}
.hub main section .toolbar .tools .sort {
  width: 15px;
  height: 30px;
  background: url("/images/sort-icon.svg") no-repeat center;
  cursor: pointer;
}
.hub main section .toolbar .tools .sort:hover {
  background-image: url("/images/sort-icon-hover.svg");
}
.hub main section .toolbar .tools .view {
  width: 15px;
  height: 30px;
  cursor: pointer;
}
.hub main section .toolbar .tools .view.gridView {
  background: url("/images/grid-icon.svg") no-repeat center;
}
.hub main section .toolbar .tools .view.gridView:hover {
  background-image: url("/images/grid-icon-hover.svg");
}
.hub main section .toolbar .tools .view.listView {
  background: url("/images/list-icon.svg") no-repeat center;
}
.hub main section .toolbar .tools .view.listView:hover {
  background-image: url("/images/list-icon-hover.svg");
}
.hub main section .toolbar .submenu {
  flex: 1 1 auto;
  display: flex;
  margin-left: 30px;
  gap: 32px;
  position: relative;
}
@media screen and (max-width: 650px) {
  .hub main section .toolbar .submenu {
    margin-left: 15px;
  }
}
.hub main section .toolbar .submenu input[type=radio] {
  display: none;
}
.hub main section .toolbar .submenu input[type=radio] + label {
  cursor: pointer;
  color: hsl(0, 0%, 60%);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: color var(--animation-speed-fast);
}
.hub main section .toolbar .submenu input[type=radio] + label:hover {
  color: hsl(0, 0%, 80%);
}
.hub main section .toolbar .submenu .selectionBar {
  position: absolute;
  left: var(--settings-left);
  top: 36px;
  width: var(--settings-width);
  height: 2px;
  background-color: var(--blue-base-colour);
  transition: left var(--animation-speed-medium), width var(--animation-speed-medium);
}
.hub main section .toolbar .header {
  flex: 1 1 auto;
  margin-left: 32px;
  color: hsl(0, 0%, 80%);
  font-family: "aptos-semibold";
}
.hub main section .toolbar .dropdown {
  outline: none;
  position: absolute;
  top: 48px;
  left: 24px;
}
.hub main section .toolbar .dropdown .dropdown-item {
  line-height: 30px;
  background-color: hsl(0, 0%, 11%);
  color: hsl(0, 0%, 60%);
  transition: opacity var(--animation-speed-medium);
}
.hub main section .toolbar .dropdown .dropdown-item:hover {
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
}
.hub main section .toolbar .dropdown .dropdown-item.closed {
  opacity: 0.1;
}
.hub main section .toolbar .dropdown .dropdown-item.closed .dropdown-item-title, .hub main section .toolbar .dropdown .dropdown-item.closed .dropdown-item-subtitle {
  opacity: 0.1;
}
.hub main section .toolbar .dropdown .dropdown-item.selected {
  color: hsl(0, 0%, 90%);
}
.hub main section .toolbar .dropdown .dropdown-item .dropdown-item-title {
  width: 160px;
  margin-left: 8px;
  text-align: initial;
}
.hub main section .toolbar .dropdown .dropdown-item .dropdown-item-subtitle {
  flex: 0 0 auto;
  margin-left: 8px;
  text-align: initial;
}
.hub main section .toolbar .dropdown .dropdown-item .role0 {
  background: url("/images/edit-icon.svg") no-repeat;
  background-size: 16px;
  background-position: center center;
  opacity: 0.5;
}
.hub main section .toolbar .dropdown .dropdown-item .role1, .hub main section .toolbar .dropdown .dropdown-item .role2, .hub main section .toolbar .dropdown .dropdown-item .role3 {
  background: url("/images/leave-icon.svg") no-repeat;
  background-size: 16px;
  background-position: center center;
  opacity: 0.5;
}
.hub main section main {
  background-color: hsl(0, 0%, 12%);
  border-radius: 8px;
  padding: 30px;
  overflow: auto;
  height: calc(100vh - 234px);
}
@media screen and (max-width: 650px) {
  .hub main section main {
    padding: 30px 10px;
    min-width: 300px;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: row !important;
  }
  .hub main section main .title {
    margin: 0 5px;
  }
}
.hub main section .activity {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub main section .activity .activity-component-item {
  display: flex;
  align-items: center;
  width: 450px;
  height: 36px;
  border-radius: 4px;
  color: hsl(0, 0%, 60%);
  cursor: pointer;
  position: relative;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background var(--animation-speed-medium);
}
.hub main section .activity .activity-component-item .highlight {
  color: hsl(0, 0%, 80%);
}
.hub main section .activity .activity-component-item.selected {
  outline: 1px solid var(--blue-base-colour);
}
.hub main section .activity .activity-component-item .activity-component-item-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background-size: 16px;
}
.hub main section .activity .activity-component-item .activity-component-item-icon.project {
  background: url("/images/project-icon.svg") no-repeat center center;
  background-size: 16px;
}
.hub main section .activity .activity-component-item .activity-component-item-icon.link {
  background: url("/images/links-icon.svg") no-repeat center center;
  background-size: 16px;
}
.hub main section .activity .activity-component-item .activity-component-item-text-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}
.hub main section .activity .activity-component-item .activity-component-item-text-container .activity-component-item-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.hub main section .activity .activity-component-item .activity-component-item-text-container .activity-component-item-time {
  font-size: 12px;
  color: hsl(0, 0%, 40%);
}
.hub main section .activity .activity-component-item.unread::after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background-color: var(--blue-base-colour);
  border-radius: 50%;
}
.hub main section .activity .activity-component-item:hover {
  background-color: hsl(0, 0%, 25%);
}
.hub main section .account-settings, .hub main section .plan-settings, .hub main section .company-settings {
  gap: 16px;
  flex-direction: column;
}
.hub main section .account-settings .title, .hub main section .plan-settings .title, .hub main section .company-settings .title {
  color: hsl(0, 0%, 90%);
}
.hub main section .account-settings .group, .hub main section .plan-settings .group, .hub main section .company-settings .group {
  width: calc(100% - 40px);
  height: fit-content;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: hsl(0, 0%, 15%);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}
.hub main section .account-settings .group .separator, .hub main section .plan-settings .group .separator, .hub main section .company-settings .group .separator {
  width: 100%;
  height: 1px;
  background-color: hsl(0, 0%, 20%);
}
.hub main section .account-settings .group .errorMessage, .hub main section .plan-settings .group .errorMessage, .hub main section .company-settings .group .errorMessage {
  flex-basis: 100%;
}
.hub main section .account-settings .group button, .hub main section .plan-settings .group button, .hub main section .company-settings .group button {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group button, .hub main section .plan-settings .group button, .hub main section .company-settings .group button {
    width: 100%;
  }
}
.hub main section .account-settings .group .section, .hub main section .plan-settings .group .section, .hub main section .company-settings .group .section {
  flex: 0 0 30px;
  line-height: 30px;
  gap: 8px;
  display: flex;
  transition: opacity var(--animation-speed-fast);
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group .section, .hub main section .plan-settings .group .section, .hub main section .company-settings .group .section {
    flex-direction: column;
  }
}
.hub main section .account-settings .group .section .changed, .hub main section .plan-settings .group .section .changed, .hub main section .company-settings .group .section .changed {
  outline: 1px solid var(--blue-base-colour);
  transition: outline var(--animation-speed-fast);
}
.hub main section .account-settings .group .section .description, .hub main section .plan-settings .group .section .description, .hub main section .company-settings .group .section .description {
  flex: 0 0 140px;
  color: hsl(0, 0%, 60%);
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group .section .description, .hub main section .plan-settings .group .section .description, .hub main section .company-settings .group .section .description {
    flex: 0 0 auto;
  }
}
.hub main section .account-settings .group .section .values, .hub main section .plan-settings .group .section .values, .hub main section .company-settings .group .section .values {
  flex: 1 1 auto;
  display: flex;
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group .section .values, .hub main section .plan-settings .group .section .values, .hub main section .company-settings .group .section .values {
    flex-direction: column;
  }
}
.hub main section .account-settings .group .section .values.text-right, .hub main section .plan-settings .group .section .values.text-right, .hub main section .company-settings .group .section .values.text-right {
  text-align: right;
  justify-content: flex-end;
}
.hub main section .account-settings .group .section .values .sessionText, .hub main section .plan-settings .group .section .values .sessionText, .hub main section .company-settings .group .section .values .sessionText {
  flex: 1 1 auto;
  color: hsl(0, 0%, 60%);
}
.hub main section .account-settings .group .section .values .sessionButton, .hub main section .plan-settings .group .section .values .sessionButton, .hub main section .company-settings .group .section .values .sessionButton {
  flex: 0 0 auto;
  height: 24px;
  line-height: 24px;
}
.hub main section .account-settings .group .section .values .current, .hub main section .plan-settings .group .section .values .current, .hub main section .company-settings .group .section .values .current {
  color: hsl(0, 0%, 80%);
}
.hub main section .account-settings .group .section .sessions, .hub main section .plan-settings .group .section .sessions, .hub main section .company-settings .group .section .sessions {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.hub main section .account-settings .group .section .sessions input[type=radio], .hub main section .plan-settings .group .section .sessions input[type=radio], .hub main section .company-settings .group .section .sessions input[type=radio] {
  display: none;
}
.hub main section .account-settings .group .section .sessions label, .hub main section .account-settings .group .section .sessions .member, .hub main section .plan-settings .group .section .sessions label, .hub main section .plan-settings .group .section .sessions .member, .hub main section .company-settings .group .section .sessions label, .hub main section .company-settings .group .section .sessions .member {
  color: hsl(0, 0%, 60%);
  display: flex;
  border-radius: 4px;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  transition: outline var(--animation-speed-fast), color var(--animation-speed-fast), background-color var(--animation-speed-fast), opacity var(--animation-speed-fast);
}
.hub main section .account-settings .group .section .sessions .member, .hub main section .plan-settings .group .section .sessions .member, .hub main section .company-settings .group .section .sessions .member {
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
}
.hub main section .account-settings .group .section .sessions .member.disabled, .hub main section .plan-settings .group .section .sessions .member.disabled, .hub main section .company-settings .group .section .sessions .member.disabled {
  background-color: hsl(0, 0%, 10%);
}
.hub main section .account-settings .group .section .sessions .member.disabled .displayname, .hub main section .account-settings .group .section .sessions .member.disabled .type, .hub main section .account-settings .group .section .sessions .member.disabled .role, .hub main section .plan-settings .group .section .sessions .member.disabled .displayname, .hub main section .plan-settings .group .section .sessions .member.disabled .type, .hub main section .plan-settings .group .section .sessions .member.disabled .role, .hub main section .company-settings .group .section .sessions .member.disabled .displayname, .hub main section .company-settings .group .section .sessions .member.disabled .type, .hub main section .company-settings .group .section .sessions .member.disabled .role {
  pointer-events: none;
}
.hub main section .account-settings .group .section .sessions .member.disabled .account, .hub main section .account-settings .group .section .sessions .member.disabled .role, .hub main section .plan-settings .group .section .sessions .member.disabled .account, .hub main section .plan-settings .group .section .sessions .member.disabled .role, .hub main section .company-settings .group .section .sessions .member.disabled .account, .hub main section .company-settings .group .section .sessions .member.disabled .role {
  opacity: 0.5;
}
.hub main section .account-settings .group .section .sessions .member.disabled .delete, .hub main section .plan-settings .group .section .sessions .member.disabled .delete, .hub main section .company-settings .group .section .sessions .member.disabled .delete {
  cursor: pointer;
  background-image: url("/images/add-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 10%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.hub main section .account-settings .group .section .sessions .member.disabled .delete:hover, .hub main section .plan-settings .group .section .sessions .member.disabled .delete:hover, .hub main section .company-settings .group .section .sessions .member.disabled .delete:hover {
  background-image: url("/images/add-icon-hover.svg");
  background-color: hsl(0, 0%, 13%);
}
.hub main section .account-settings .group .section .sessions .member.owner, .hub main section .plan-settings .group .section .sessions .member.owner, .hub main section .company-settings .group .section .sessions .member.owner {
  color: hsl(0, 0%, 80%);
}
.hub main section .account-settings .group .section .sessions .member .account, .hub main section .plan-settings .group .section .sessions .member .account, .hub main section .company-settings .group .section .sessions .member .account {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 60px;
}
.hub main section .account-settings .group .section .sessions .member .account .initials, .hub main section .plan-settings .group .section .sessions .member .account .initials, .hub main section .company-settings .group .section .sessions .member .account .initials {
  flex: 0 0 32px;
  display: inline-block;
  background-color: var(--bgcolour);
  color: hsl(0, 0%, 20%);
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hub main section .account-settings .group .section .sessions .member .account .nameContainer, .hub main section .plan-settings .group .section .sessions .member .account .nameContainer, .hub main section .company-settings .group .section .sessions .member .account .nameContainer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.hub main section .account-settings .group .section .sessions .member .account .nameContainer .displayname, .hub main section .plan-settings .group .section .sessions .member .account .nameContainer .displayname, .hub main section .company-settings .group .section .sessions .member .account .nameContainer .displayname {
  font-size: 14px;
  color: hsl(0, 0%, 80%);
  line-height: initial;
}
.hub main section .account-settings .group .section .sessions .member .account .nameContainer .jobtitle, .hub main section .plan-settings .group .section .sessions .member .account .nameContainer .jobtitle, .hub main section .company-settings .group .section .sessions .member .account .nameContainer .jobtitle {
  font-size: 12px;
  color: hsl(0, 0%, 40%);
  line-height: initial;
}
.hub main section .account-settings .group .section .sessions .member .account .email, .hub main section .plan-settings .group .section .sessions .member .account .email, .hub main section .company-settings .group .section .sessions .member .account .email {
  height: 30px;
  min-width: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: italic;
}
.hub main section .account-settings .group .section .sessions .member .role, .hub main section .plan-settings .group .section .sessions .member .role, .hub main section .company-settings .group .section .sessions .member .role {
  flex: 0 0 88px;
  text-align: center;
  height: 30px;
}
.hub main section .account-settings .group .section .sessions .member .role:last-child, .hub main section .plan-settings .group .section .sessions .member .role:last-child, .hub main section .company-settings .group .section .sessions .member .role:last-child {
  text-align: right;
  margin-right: 8px;
}
.hub main section .account-settings .group .section .sessions .member .role .rolePickerButton, .hub main section .plan-settings .group .section .sessions .member .role .rolePickerButton, .hub main section .company-settings .group .section .sessions .member .role .rolePickerButton {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  text-align: left;
  padding: 0 10px;
}
.hub main section .account-settings .group .section .sessions .member .role .rolePickerButton::after, .hub main section .plan-settings .group .section .sessions .member .role .rolePickerButton::after, .hub main section .company-settings .group .section .sessions .member .role .rolePickerButton::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 30px;
  right: 10px;
  background: url("/images/chevron-down.svg") no-repeat center center;
  background-size: 8px;
}
.hub main section .account-settings .group .section .sessions .member .type, .hub main section .plan-settings .group .section .sessions .member .type, .hub main section .company-settings .group .section .sessions .member .type {
  flex: 0 0 90px;
  text-align: center;
}
.hub main section .account-settings .group .section .sessions .member .delete, .hub main section .account-settings .group .section .sessions .member .delete_empty, .hub main section .plan-settings .group .section .sessions .member .delete, .hub main section .plan-settings .group .section .sessions .member .delete_empty, .hub main section .company-settings .group .section .sessions .member .delete, .hub main section .company-settings .group .section .sessions .member .delete_empty {
  height: 30px;
  flex: 0 0 32px;
}
.hub main section .account-settings .group .section .sessions .member .delete, .hub main section .plan-settings .group .section .sessions .member .delete, .hub main section .company-settings .group .section .sessions .member .delete {
  cursor: pointer;
  background-image: url("/images/bin-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px;
  border-radius: 4px;
}
.hub main section .account-settings .group .section .sessions .member .delete:hover, .hub main section .plan-settings .group .section .sessions .member .delete:hover, .hub main section .company-settings .group .section .sessions .member .delete:hover {
  background-image: url("/images/bin-icon-hover.svg");
  background-color: hsl(0, 0%, 20%);
}
.hub main section .account-settings .group .section .sessions label *, .hub main section .plan-settings .group .section .sessions label *, .hub main section .company-settings .group .section .sessions label * {
  flex-basis: 100%;
  text-align: center;
}
.hub main section .account-settings .group .section .sessions label *.users, .hub main section .plan-settings .group .section .sessions label *.users, .hub main section .company-settings .group .section .sessions label *.users {
  width: 4ch;
}
.hub main section .account-settings .group .section .sessions label *:first-child, .hub main section .plan-settings .group .section .sessions label *:first-child, .hub main section .company-settings .group .section .sessions label *:first-child {
  text-align: left;
  padding-left: 16px;
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group .section .sessions label *:first-child, .hub main section .plan-settings .group .section .sessions label *:first-child, .hub main section .company-settings .group .section .sessions label *:first-child {
    padding-left: 4px;
  }
}
.hub main section .account-settings .group .section .sessions label *:last-child, .hub main section .plan-settings .group .section .sessions label *:last-child, .hub main section .company-settings .group .section .sessions label *:last-child {
  text-align: right;
  padding-right: 16px;
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group .section .sessions label *:last-child, .hub main section .plan-settings .group .section .sessions label *:last-child, .hub main section .company-settings .group .section .sessions label *:last-child {
    padding-right: 4px;
  }
}
.hub main section .account-settings .group .section .sessions label .planName, .hub main section .plan-settings .group .section .sessions label .planName, .hub main section .company-settings .group .section .sessions label .planName {
  flex-basis: 30%;
}
.hub main section .account-settings .group .section .sessions label .planPrice, .hub main section .plan-settings .group .section .sessions label .planPrice, .hub main section .company-settings .group .section .sessions label .planPrice {
  flex-basis: 50%;
  text-align: center;
}
.hub main section .account-settings .group .section .sessions label .planUsers, .hub main section .plan-settings .group .section .sessions label .planUsers, .hub main section .company-settings .group .section .sessions label .planUsers {
  flex-basis: 45%;
  text-align: center;
}
.hub main section .account-settings .group .section .sessions label .planStorage, .hub main section .plan-settings .group .section .sessions label .planStorage, .hub main section .company-settings .group .section .sessions label .planStorage {
  flex-basis: 25%;
}
.hub main section .account-settings .group .section .sessions label .extraspace, .hub main section .plan-settings .group .section .sessions label .extraspace, .hub main section .company-settings .group .section .sessions label .extraspace {
  color: hsl(0, 0%, 80%);
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}
.hub main section .account-settings .group .section .sessions .enterpriseButton, .hub main section .plan-settings .group .section .sessions .enterpriseButton, .hub main section .company-settings .group .section .sessions .enterpriseButton {
  width: 100%;
}
.hub main section .account-settings .group .section .sessions input[type=radio] + label, .hub main section .plan-settings .group .section .sessions input[type=radio] + label, .hub main section .company-settings .group .section .sessions input[type=radio] + label {
  margin: 4px 0px;
  cursor: pointer;
}
.hub main section .account-settings .group .section .sessions input[type=radio] + label:hover, .hub main section .plan-settings .group .section .sessions input[type=radio] + label:hover, .hub main section .company-settings .group .section .sessions input[type=radio] + label:hover {
  background-color: hsl(0, 0%, 20%);
}
.hub main section .account-settings .group .section .sessions input[type=radio]:checked + label, .hub main section .plan-settings .group .section .sessions input[type=radio]:checked + label, .hub main section .company-settings .group .section .sessions input[type=radio]:checked + label {
  background-color: hsl(0, 0%, 20%);
  outline: 1px solid hsl(0, 0%, 40%);
  margin: 4px 0px;
  color: hsl(0, 0%, 90%);
}
.hub main section .account-settings .group .section .sessions input[type=radio]:checked + label.changed, .hub main section .plan-settings .group .section .sessions input[type=radio]:checked + label.changed, .hub main section .company-settings .group .section .sessions input[type=radio]:checked + label.changed {
  outline: 1px solid var(--blue-base-colour);
}
.hub main section .account-settings .group .section .text, .hub main section .account-settings .group .section input[type=text], .hub main section .account-settings .group .section input[type=email], .hub main section .account-settings .group .section input[type=password], .hub main section .account-settings .group .section input[type=number], .hub main section .plan-settings .group .section .text, .hub main section .plan-settings .group .section input[type=text], .hub main section .plan-settings .group .section input[type=email], .hub main section .plan-settings .group .section input[type=password], .hub main section .plan-settings .group .section input[type=number], .hub main section .company-settings .group .section .text, .hub main section .company-settings .group .section input[type=text], .hub main section .company-settings .group .section input[type=email], .hub main section .company-settings .group .section input[type=password], .hub main section .company-settings .group .section input[type=number] {
  background-color: hsl(0, 0%, 15%);
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  width: calc(100% - 24px);
  transition: color var(--animation-speed-fast);
}
.hub main section .account-settings .group .section .text.changed, .hub main section .account-settings .group .section input[type=text].changed, .hub main section .account-settings .group .section input[type=email].changed, .hub main section .account-settings .group .section input[type=password].changed, .hub main section .account-settings .group .section input[type=number].changed, .hub main section .plan-settings .group .section .text.changed, .hub main section .plan-settings .group .section input[type=text].changed, .hub main section .plan-settings .group .section input[type=email].changed, .hub main section .plan-settings .group .section input[type=password].changed, .hub main section .plan-settings .group .section input[type=number].changed, .hub main section .company-settings .group .section .text.changed, .hub main section .company-settings .group .section input[type=text].changed, .hub main section .company-settings .group .section input[type=email].changed, .hub main section .company-settings .group .section input[type=password].changed, .hub main section .company-settings .group .section input[type=number].changed {
  color: hsl(0, 0%, 90%);
}
.hub main section .account-settings .group .section .passwordInfo, .hub main section .plan-settings .group .section .passwordInfo, .hub main section .company-settings .group .section .passwordInfo {
  flex-basis: 100%;
  font-size: 12px;
  padding-left: 4px;
  color: hsl(0, 0%, 60%);
  line-height: normal;
}
.hub main section .account-settings .group .plansContainer, .hub main section .plan-settings .group .plansContainer, .hub main section .company-settings .group .plansContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 8px 0 16px 0;
}
.hub main section .account-settings .group .plansContainer .toggle, .hub main section .plan-settings .group .plansContainer .toggle, .hub main section .company-settings .group .plansContainer .toggle {
  position: relative;
  width: 250px;
  height: 40px;
  gap: 8px;
}
.hub main section .account-settings .group .plansContainer .toggle .switch, .hub main section .plan-settings .group .plansContainer .toggle .switch, .hub main section .company-settings .group .plansContainer .toggle .switch {
  --left: 1px;
  width: 250px;
  height: 40px;
  background-color: hsl(0, 0%, 16%);
  outline: 1px solid hsl(0, 0%, 20%);
  border-radius: 40px;
  position: relative;
  pointer-events: none;
}
.hub main section .account-settings .group .plansContainer .toggle .switch::after, .hub main section .plan-settings .group .plansContainer .toggle .switch::after, .hub main section .company-settings .group .plansContainer .toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: var(--left);
  width: 121px;
  height: 36px;
  background-color: hsl(0, 0%, 80%);
  border-radius: 19px;
  transition: left 0.25s ease;
}
.hub main section .account-settings .group .plansContainer .toggle .monthly, .hub main section .account-settings .group .plansContainer .toggle .yearly, .hub main section .plan-settings .group .plansContainer .toggle .monthly, .hub main section .plan-settings .group .plansContainer .toggle .yearly, .hub main section .company-settings .group .plansContainer .toggle .monthly, .hub main section .company-settings .group .plansContainer .toggle .yearly {
  position: absolute;
  top: 0;
  width: 124px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: color var(--animation-speed-medium);
}
.hub main section .account-settings .group .plansContainer .toggle .monthly, .hub main section .plan-settings .group .plansContainer .toggle .monthly, .hub main section .company-settings .group .plansContainer .toggle .monthly {
  left: 0;
  color: hsl(0, 0%, 0%);
}
.hub main section .account-settings .group .plansContainer .toggle .yearly, .hub main section .plan-settings .group .plansContainer .toggle .yearly, .hub main section .company-settings .group .plansContainer .toggle .yearly {
  right: 0;
  color: hsl(0, 0%, 80%);
}
.hub main section .account-settings .group .plansContainer .toggle .yearly span, .hub main section .plan-settings .group .plansContainer .toggle .yearly span, .hub main section .company-settings .group .plansContainer .toggle .yearly span {
  margin-left: 8px;
}
.hub main section .account-settings .group .plansContainer .toggle.paidyearly .monthly, .hub main section .plan-settings .group .plansContainer .toggle.paidyearly .monthly, .hub main section .company-settings .group .plansContainer .toggle.paidyearly .monthly {
  color: hsl(0, 0%, 80%);
}
.hub main section .account-settings .group .plansContainer .toggle.paidyearly .yearly, .hub main section .plan-settings .group .plansContainer .toggle.paidyearly .yearly, .hub main section .company-settings .group .plansContainer .toggle.paidyearly .yearly {
  color: hsl(0, 0%, 0%);
}
.hub main section .account-settings .group .cardContainer, .hub main section .plan-settings .group .cardContainer, .hub main section .company-settings .group .cardContainer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hub main section .account-settings .group .cardContainer .planCard, .hub main section .plan-settings .group .cardContainer .planCard, .hub main section .company-settings .group .cardContainer .planCard {
  flex: 1 1 150px;
  border: 1px solid hsl(0, 0%, 20%);
  background-color: hsl(0, 0%, 16%);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
.hub main section .account-settings .group .cardContainer .planCard .cancelAt, .hub main section .plan-settings .group .cardContainer .planCard .cancelAt, .hub main section .company-settings .group .cardContainer .planCard .cancelAt {
  height: 30px;
  line-height: 30px;
  color: var(--blue-bright-colour);
}
.hub main section .account-settings .group .cardContainer .planCard.active, .hub main section .plan-settings .group .cardContainer .planCard.active, .hub main section .company-settings .group .cardContainer .planCard.active {
  border-color: var(--blue-base-colour);
  background-color: hsl(0, 0%, 20%);
}
.hub main section .account-settings .group .cardContainer .planCard.active .currentPlan, .hub main section .account-settings .group .cardContainer .planCard.switchtoFree .currentPlan, .hub main section .plan-settings .group .cardContainer .planCard.active .currentPlan, .hub main section .plan-settings .group .cardContainer .planCard.switchtoFree .currentPlan, .hub main section .company-settings .group .cardContainer .planCard.active .currentPlan, .hub main section .company-settings .group .cardContainer .planCard.switchtoFree .currentPlan {
  display: block;
}
.hub main section .account-settings .group .cardContainer .planCard.active .subscribeButton, .hub main section .account-settings .group .cardContainer .planCard.switchtoFree .subscribeButton, .hub main section .plan-settings .group .cardContainer .planCard.active .subscribeButton, .hub main section .plan-settings .group .cardContainer .planCard.switchtoFree .subscribeButton, .hub main section .company-settings .group .cardContainer .planCard.active .subscribeButton, .hub main section .company-settings .group .cardContainer .planCard.switchtoFree .subscribeButton {
  display: none;
}
.hub main section .account-settings .group .cardContainer .planCard:not(.active):not(.switchtoFree) .currentPlan, .hub main section .plan-settings .group .cardContainer .planCard:not(.active):not(.switchtoFree) .currentPlan, .hub main section .company-settings .group .cardContainer .planCard:not(.active):not(.switchtoFree) .currentPlan {
  display: none;
}
.hub main section .account-settings .group .cardContainer .planCard:not(.active):not(.switchtoFree) .subscribeButton, .hub main section .plan-settings .group .cardContainer .planCard:not(.active):not(.switchtoFree) .subscribeButton, .hub main section .company-settings .group .cardContainer .planCard:not(.active):not(.switchtoFree) .subscribeButton {
  display: block;
}
.hub main section .account-settings .group .cardContainer .planCard.reactivate, .hub main section .plan-settings .group .cardContainer .planCard.reactivate, .hub main section .company-settings .group .cardContainer .planCard.reactivate {
  border-color: var(--blue-base-colour);
  background-color: hsl(0, 0%, 20%);
}
.hub main section .account-settings .group .cardContainer .planCard.reactivate .subscribeButton, .hub main section .plan-settings .group .cardContainer .planCard.reactivate .subscribeButton, .hub main section .company-settings .group .cardContainer .planCard.reactivate .subscribeButton {
  background-color: var(--blue-base-colour);
  color: hsl(0, 0%, 0%);
}
.hub main section .account-settings .group .cardContainer .planCard.reactivate .subscribeButton:hover, .hub main section .plan-settings .group .cardContainer .planCard.reactivate .subscribeButton:hover, .hub main section .company-settings .group .cardContainer .planCard.reactivate .subscribeButton:hover {
  background-color: var(--blue-bright-colour);
}
.hub main section .account-settings .group .cardContainer .planCard .subscribeButton, .hub main section .plan-settings .group .cardContainer .planCard .subscribeButton, .hub main section .company-settings .group .cardContainer .planCard .subscribeButton {
  padding: 0;
  width: 100%;
}
.hub main section .account-settings .group .cardContainer .planCard.active .currentPlan, .hub main section .plan-settings .group .cardContainer .planCard.active .currentPlan, .hub main section .company-settings .group .cardContainer .planCard.active .currentPlan {
  padding: 0;
  width: 100%;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  cursor: default;
  background-color: var(--blue-base-colour);
  color: hsl(0, 0%, 0%);
}
.hub main section .account-settings .group .cardContainer .planCard.switchtoFree .currentPlan, .hub main section .plan-settings .group .cardContainer .planCard.switchtoFree .currentPlan, .hub main section .company-settings .group .cardContainer .planCard.switchtoFree .currentPlan {
  color: var(--blue-bright-colour);
  height: 30px;
  line-height: 30px;
}
.hub main section .account-settings .group .cardContainer .planCard .title, .hub main section .plan-settings .group .cardContainer .planCard .title, .hub main section .company-settings .group .cardContainer .planCard .title {
  color: hsl(0, 0%, 90%);
  font-size: 28px;
}
.hub main section .account-settings .group .cardContainer .planCard .priceContainer, .hub main section .plan-settings .group .cardContainer .planCard .priceContainer, .hub main section .company-settings .group .cardContainer .planCard .priceContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 16px 0;
}
.hub main section .account-settings .group .cardContainer .planCard .priceContainer .price, .hub main section .plan-settings .group .cardContainer .planCard .priceContainer .price, .hub main section .company-settings .group .cardContainer .planCard .priceContainer .price {
  font-size: 32px;
  color: hsl(0, 0%, 100%);
}
.hub main section .account-settings .group .cardContainer .planCard .priceContainer .durationContainer, .hub main section .plan-settings .group .cardContainer .planCard .priceContainer .durationContainer, .hub main section .company-settings .group .cardContainer .planCard .priceContainer .durationContainer {
  font-size: 12px;
  color: hsl(0, 0%, 60%);
}
.hub main section .account-settings .group .cardContainer .planCard .offer, .hub main section .plan-settings .group .cardContainer .planCard .offer, .hub main section .company-settings .group .cardContainer .planCard .offer {
  color: var(--blue-base-colour);
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
}
.hub main section .account-settings .group .cardContainer .planCard .subtitle, .hub main section .plan-settings .group .cardContainer .planCard .subtitle, .hub main section .company-settings .group .cardContainer .planCard .subtitle {
  color: hsl(0, 0%, 80%);
  font-weight: bold;
  padding-bottom: 8px;
}
.hub main section .account-settings .group .cardContainer .planCard .features, .hub main section .plan-settings .group .cardContainer .planCard .features, .hub main section .company-settings .group .cardContainer .planCard .features {
  height: 250px;
  margin-top: 16px;
}
.hub main section .account-settings .group .cardContainer .planCard ul, .hub main section .plan-settings .group .cardContainer .planCard ul, .hub main section .company-settings .group .cardContainer .planCard ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.hub main section .account-settings .group .cardContainer .planCard ul li, .hub main section .plan-settings .group .cardContainer .planCard ul li, .hub main section .company-settings .group .cardContainer .planCard ul li {
  padding: 4px 0;
}
.hub main section .account-settings .group .storageContainer, .hub main section .plan-settings .group .storageContainer, .hub main section .company-settings .group .storageContainer {
  display: flex;
  justify-content: space-between;
}
.hub main section .account-settings .group .storageContainer .storageInfo, .hub main section .plan-settings .group .storageContainer .storageInfo, .hub main section .company-settings .group .storageContainer .storageInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hub main section .account-settings .group .storageContainer .storageInfo .size, .hub main section .plan-settings .group .storageContainer .storageInfo .size, .hub main section .company-settings .group .storageContainer .storageInfo .size {
  color: hsl(0, 0%, 60%);
  font-weight: bold;
  font-size: 16px;
}
.hub main section .account-settings .group .storageContainer .storageInfo .size.active, .hub main section .plan-settings .group .storageContainer .storageInfo .size.active, .hub main section .company-settings .group .storageContainer .storageInfo .size.active {
  color: hsl(0, 0%, 80%);
}
.hub main section .account-settings .group .storageContainer .storageInfo .description, .hub main section .plan-settings .group .storageContainer .storageInfo .description, .hub main section .company-settings .group .storageContainer .storageInfo .description {
  color: hsl(0, 0%, 60%);
}
.hub main section .account-settings .group .storageContainer .storageInfo .action, .hub main section .plan-settings .group .storageContainer .storageInfo .action, .hub main section .company-settings .group .storageContainer .storageInfo .action {
  color: var(--blue-base-colour);
  cursor: pointer;
}
.hub main section .account-settings .group .storageContainer .storageInfo .action:hover, .hub main section .plan-settings .group .storageContainer .storageInfo .action:hover, .hub main section .company-settings .group .storageContainer .storageInfo .action:hover {
  color: var(--blue-bright-colour);
}
.hub main section .account-settings .group .storageContainer .storageInfo.freePlan .question, .hub main section .account-settings .group .storageContainer .storageInfo.freePlan .action, .hub main section .plan-settings .group .storageContainer .storageInfo.freePlan .question, .hub main section .plan-settings .group .storageContainer .storageInfo.freePlan .action, .hub main section .company-settings .group .storageContainer .storageInfo.freePlan .question, .hub main section .company-settings .group .storageContainer .storageInfo.freePlan .action {
  display: block;
}
.hub main section .account-settings .group .storageContainer .storageInfo.freePlan button, .hub main section .plan-settings .group .storageContainer .storageInfo.freePlan button, .hub main section .company-settings .group .storageContainer .storageInfo.freePlan button {
  display: none;
}
.hub main section .account-settings .group .storageContainer .storageInfo:not(.freePlan) .question, .hub main section .account-settings .group .storageContainer .storageInfo:not(.freePlan) .action, .hub main section .plan-settings .group .storageContainer .storageInfo:not(.freePlan) .question, .hub main section .plan-settings .group .storageContainer .storageInfo:not(.freePlan) .action, .hub main section .company-settings .group .storageContainer .storageInfo:not(.freePlan) .question, .hub main section .company-settings .group .storageContainer .storageInfo:not(.freePlan) .action {
  display: none;
}
.hub main section .account-settings .group .storageContainer .storageInfo:not(.freePlan) button, .hub main section .plan-settings .group .storageContainer .storageInfo:not(.freePlan) button, .hub main section .company-settings .group .storageContainer .storageInfo:not(.freePlan) button {
  display: block;
}
.hub main section .account-settings .group .storageSeparator, .hub main section .plan-settings .group .storageSeparator, .hub main section .company-settings .group .storageSeparator {
  height: 0px;
  border-bottom: 2px dotted hsl(0, 0%, 20%);
  margin: 16px 0;
}
.hub main section .account-settings .group .storageBreakdown, .hub main section .plan-settings .group .storageBreakdown, .hub main section .company-settings .group .storageBreakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 600px;
}
.hub main section .account-settings .group .storageBreakdown .storageBar, .hub main section .plan-settings .group .storageBreakdown .storageBar, .hub main section .company-settings .group .storageBreakdown .storageBar {
  --livePercent: 0%;
  --archivedPercent: 0%;
  --deletedPercent: 0%;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-base-colour) 0%, var(--blue-base-colour) var(--livePercent), hsl(80, 50%, 50%) var(--livePercent), hsl(80, 50%, 50%) var(--archivedPercent), hsl(0, 80%, 50%) var(--archivedPercent), hsl(0, 80%, 50%) var(--deletedPercent), hsl(0, 0%, 40%) var(--deletedPercent), hsl(0, 0%, 40%) 100%);
}
.hub main section .account-settings .group .storageBreakdown .storageBytes, .hub main section .plan-settings .group .storageBreakdown .storageBytes, .hub main section .company-settings .group .storageBreakdown .storageBytes {
  display: flex;
  justify-content: space-between;
  color: hsl(0, 0%, 60%);
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}
.hub main section .account-settings .group .storageBreakdown .storageBytes .live, .hub main section .account-settings .group .storageBreakdown .storageBytes .archived, .hub main section .account-settings .group .storageBreakdown .storageBytes .deleted, .hub main section .account-settings .group .storageBreakdown .storageBytes .remaining, .hub main section .plan-settings .group .storageBreakdown .storageBytes .live, .hub main section .plan-settings .group .storageBreakdown .storageBytes .archived, .hub main section .plan-settings .group .storageBreakdown .storageBytes .deleted, .hub main section .plan-settings .group .storageBreakdown .storageBytes .remaining, .hub main section .company-settings .group .storageBreakdown .storageBytes .live, .hub main section .company-settings .group .storageBreakdown .storageBytes .archived, .hub main section .company-settings .group .storageBreakdown .storageBytes .deleted, .hub main section .company-settings .group .storageBreakdown .storageBytes .remaining {
  flex: 1 1 auto;
}
.hub main section .account-settings .group .storageBreakdown .storageBytes .live::before, .hub main section .account-settings .group .storageBreakdown .storageBytes .archived::before, .hub main section .account-settings .group .storageBreakdown .storageBytes .deleted::before, .hub main section .account-settings .group .storageBreakdown .storageBytes .remaining::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .live::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .archived::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .deleted::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .remaining::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .live::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .archived::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .deleted::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .remaining::before {
  content: "";
  display: block;
  position: relative;
  left: 0px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.hub main section .account-settings .group .storageBreakdown .storageBytes .live::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .live::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .live::before {
  background-color: var(--blue-base-colour);
}
.hub main section .account-settings .group .storageBreakdown .storageBytes .archived::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .archived::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .archived::before {
  background-color: hsl(80, 50%, 50%);
}
.hub main section .account-settings .group .storageBreakdown .storageBytes .deleted::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .deleted::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .deleted::before {
  background-color: hsl(0, 80%, 50%);
}
.hub main section .account-settings .group .storageBreakdown .storageBytes .remaining::before, .hub main section .plan-settings .group .storageBreakdown .storageBytes .remaining::before, .hub main section .company-settings .group .storageBreakdown .storageBytes .remaining::before {
  background-color: hsl(0, 0%, 60%);
}
.hub main section .account-settings .group .billingDetails, .hub main section .plan-settings .group .billingDetails, .hub main section .company-settings .group .billingDetails {
  display: flex;
  justify-content: space-between;
}
.hub main section .account-settings .group .billingDetails .billingContainer, .hub main section .plan-settings .group .billingDetails .billingContainer, .hub main section .company-settings .group .billingDetails .billingContainer {
  display: flex;
  flex-direction: column;
}
.hub main section .account-settings .group .billingDetails .billingContainer .label, .hub main section .plan-settings .group .billingDetails .billingContainer .label, .hub main section .company-settings .group .billingDetails .billingContainer .label {
  color: hsl(0, 0%, 80%);
  font-weight: bold;
  font-size: 16px;
}
.hub main section .account-settings .group .billingDetails .billingContainer .value, .hub main section .plan-settings .group .billingDetails .billingContainer .value, .hub main section .company-settings .group .billingDetails .billingContainer .value {
  color: hsl(0, 0%, 60%);
}
.hub main section .account-settings .group .manageBillingButton, .hub main section .plan-settings .group .manageBillingButton, .hub main section .company-settings .group .manageBillingButton {
  width: 100%;
}
.hub main section .account-settings .group .cancelSubscriptionContainer, .hub main section .plan-settings .group .cancelSubscriptionContainer, .hub main section .company-settings .group .cancelSubscriptionContainer {
  color: hsl(0, 0%, 60%);
}
.hub main section .account-settings .group .cancelSubscriptionContainer .cancelButton, .hub main section .plan-settings .group .cancelSubscriptionContainer .cancelButton, .hub main section .company-settings .group .cancelSubscriptionContainer .cancelButton {
  padding: initial;
  color: hsl(0, 0%, 80%);
  transition: color var(--animation-speed-fast);
}
.hub main section .account-settings .group .cancelSubscriptionContainer .cancelButton:hover, .hub main section .plan-settings .group .cancelSubscriptionContainer .cancelButton:hover, .hub main section .company-settings .group .cancelSubscriptionContainer .cancelButton:hover {
  color: hsl(0, 0%, 100%);
}
@media screen and (max-width: 650px) {
  .hub main section .account-settings .group, .hub main section .plan-settings .group, .hub main section .company-settings .group {
    width: 100%;
    padding: 10px;
  }
}
.hub main section .account-settings .footnote, .hub main section .plan-settings .footnote, .hub main section .company-settings .footnote {
  max-width: 640px;
  font-size: 12px;
  font-style: italic;
  color: hsl(0, 0%, 60%);
  text-align: center;
}

.viewer, .link {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.viewer main, .link main {
  flex: 1 1 auto;
  display: flex;
  height: calc(100vh - 90px);
}
.viewer main .global-nav input[type=radio] + label::after, .link main .global-nav input[type=radio] + label::after {
  display: none;
}
.viewer main .toolsContainer, .link main .toolsContainer {
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.viewer main .toolsContainer.disabled, .link main .toolsContainer.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.viewer main .toolsContainer .separator, .link main .toolsContainer .separator {
  height: 2px;
  width: 20px;
  background-color: hsl(0, 0%, 30%);
  border-radius: 1px;
  margin: 0px 4px;
}
.viewer main .toolsContainer .regionButton, .viewer main .toolsContainer .circleButton, .viewer main .toolsContainer .arrowButton, .viewer main .toolsContainer .freehandButton, .viewer main .toolsContainer .textButton, .viewer main .toolsContainer .inlineButton, .viewer main .toolsContainer .yellowButton, .viewer main .toolsContainer .redButton, .viewer main .toolsContainer .greenButton, .viewer main .toolsContainer .blueButton, .link main .toolsContainer .regionButton, .link main .toolsContainer .circleButton, .link main .toolsContainer .arrowButton, .link main .toolsContainer .freehandButton, .link main .toolsContainer .textButton, .link main .toolsContainer .inlineButton, .link main .toolsContainer .yellowButton, .link main .toolsContainer .redButton, .link main .toolsContainer .greenButton, .link main .toolsContainer .blueButton {
  width: 30px;
  height: 30px;
  margin: 5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--animation-speed-medium);
}
.viewer main .toolsContainer .regionButton.active, .viewer main .toolsContainer .regionButton:hover, .viewer main .toolsContainer .circleButton.active, .viewer main .toolsContainer .circleButton:hover, .viewer main .toolsContainer .arrowButton.active, .viewer main .toolsContainer .arrowButton:hover, .viewer main .toolsContainer .freehandButton.active, .viewer main .toolsContainer .freehandButton:hover, .viewer main .toolsContainer .textButton.active, .viewer main .toolsContainer .textButton:hover, .viewer main .toolsContainer .inlineButton.active, .viewer main .toolsContainer .inlineButton:hover, .viewer main .toolsContainer .yellowButton.active, .viewer main .toolsContainer .yellowButton:hover, .viewer main .toolsContainer .redButton.active, .viewer main .toolsContainer .redButton:hover, .viewer main .toolsContainer .greenButton.active, .viewer main .toolsContainer .greenButton:hover, .viewer main .toolsContainer .blueButton.active, .viewer main .toolsContainer .blueButton:hover, .link main .toolsContainer .regionButton.active, .link main .toolsContainer .regionButton:hover, .link main .toolsContainer .circleButton.active, .link main .toolsContainer .circleButton:hover, .link main .toolsContainer .arrowButton.active, .link main .toolsContainer .arrowButton:hover, .link main .toolsContainer .freehandButton.active, .link main .toolsContainer .freehandButton:hover, .link main .toolsContainer .textButton.active, .link main .toolsContainer .textButton:hover, .link main .toolsContainer .inlineButton.active, .link main .toolsContainer .inlineButton:hover, .link main .toolsContainer .yellowButton.active, .link main .toolsContainer .yellowButton:hover, .link main .toolsContainer .redButton.active, .link main .toolsContainer .redButton:hover, .link main .toolsContainer .greenButton.active, .link main .toolsContainer .greenButton:hover, .link main .toolsContainer .blueButton.active, .link main .toolsContainer .blueButton:hover {
  background-color: hsl(0, 0%, 20%);
}
.viewer main .toolsContainer .regionButton, .link main .toolsContainer .regionButton {
  background: url("../images/commentTools-region-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .regionButton.active, .link main .toolsContainer .regionButton.active {
  background-image: url("../images/commentTools-region-active-icon.svg");
}
.viewer main .toolsContainer .circleButton, .link main .toolsContainer .circleButton {
  background: url("../images/commentTools-circle-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .circleButton.active, .link main .toolsContainer .circleButton.active {
  background-image: url("../images/commentTools-circle-active-icon.svg");
}
.viewer main .toolsContainer .arrowButton, .link main .toolsContainer .arrowButton {
  background: url("../images/commentTools-arrow-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .arrowButton.active, .link main .toolsContainer .arrowButton.active {
  background-image: url("../images/commentTools-arrow-active-icon.svg");
}
.viewer main .toolsContainer .freehandButton, .link main .toolsContainer .freehandButton {
  background: url("../images/commentTools-freehand-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .freehandButton.active, .link main .toolsContainer .freehandButton.active {
  background-image: url("../images/commentTools-freehand-active-icon.svg");
}
.viewer main .toolsContainer .textButton, .link main .toolsContainer .textButton {
  background: url("../images/commentTools-text-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .textButton.active, .link main .toolsContainer .textButton.active {
  background-image: url("../images/commentTools-text-active-icon.svg");
}
.viewer main .toolsContainer .inlineButton, .link main .toolsContainer .inlineButton {
  background: url("../images/commentTools-inline-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .inlineButton.active, .link main .toolsContainer .inlineButton.active {
  background-image: url("../images/commentTools-inline-active-icon.svg");
}
.viewer main .toolsContainer .yellowButton, .link main .toolsContainer .yellowButton {
  background: url("../images/commentTools-yellow-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .redButton, .link main .toolsContainer .redButton {
  background: url("../images/commentTools-red-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .greenButton, .link main .toolsContainer .greenButton {
  background: url("../images/commentTools-green-icon.svg") no-repeat center;
}
.viewer main .toolsContainer .blueButton, .link main .toolsContainer .blueButton {
  background: url("../images/commentTools-blue-icon.svg") no-repeat center;
}
.viewer main section, .link main section {
  background-color: hsl(0, 0%, 11%);
  flex: 1 1 auto;
  border-radius: 8px;
  filter: drop-shadow(0px 0px 8px hsla(0, 0%, 0%, 0.25));
  display: flex;
  flex-direction: row;
  margin: 0px 23px 23px 0px;
}
@media screen and (max-width: 650px) {
  .viewer main section, .link main section {
    margin: 0px 15px;
  }
}
.viewer main section .buildContainer, .link main section .buildContainer {
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}
.viewer main section .buildContainer .dropdownContainer, .link main section .buildContainer .dropdownContainer {
  height: 60px;
}
.viewer main section .buildContainer .dropdownContainer .dropdown, .link main section .buildContainer .dropdownContainer .dropdown {
  outline: none;
}
.viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-default, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-default {
  height: 60px;
  background-color: hsl(0, 0%, 11%);
  border-radius: 8px;
}
.viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-default .dropdown-default-title, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-default .dropdown-default-title {
  line-height: 60px;
}
.viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-item, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-item {
  line-height: 30px;
  font-size: 12px;
  color: hsl(0, 0%, 60%);
  background-color: hsl(0, 0%, 11%);
  transition: color var(--animation-speed-medium), background-color var(--animation-speed-medium);
}
.viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-item:hover, .viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-item.selected, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-item:hover, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-item.selected {
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 15%);
}
.viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-default-title, .viewer main section .buildContainer .dropdownContainer .dropdown .dropdown-item-title, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-default-title, .link main section .buildContainer .dropdownContainer .dropdown .dropdown-item-title {
  text-align: left;
  padding-left: 24px;
}
.viewer main section .buildContainer .categoriesContainer, .link main section .buildContainer .categoriesContainer {
  flex: 1 1 auto;
  padding: 24px 8px 24px 24px;
  background-color: hsl(0, 0%, 13%);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  height: calc(100vh - 258px);
  overflow: auto;
}
.viewer main section .viewportContainer, .link main section .viewportContainer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  background-color: hsl(0, 0%, 13%);
}
.viewer main section .viewportContainer header, .link main section .viewportContainer header {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: hsl(0, 0%, 11%);
}
.viewer main section .viewportContainer header .middleContainer, .link main section .viewportContainer header .middleContainer {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer, .link main section .viewportContainer header .middleContainer .wipesContainer {
  position: absolute;
  display: flex;
  gap: 14px;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio], .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] {
  display: none;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label, .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.25;
  transition: background-color var(--animation-speed-medium), opacity var(--animation-speed-medium);
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeA], .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeA] {
  background: url("../images/viewer-wipe-a-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeHor], .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeHor] {
  background: url("../images/viewer-wipe-hor-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeVer], .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeVer] {
  background: url("../images/viewer-wipe-ver-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeSplit], .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeSplit] {
  background: url("../images/viewer-wipe-split-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeB], .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label[for=wipeB] {
  background: url("../images/viewer-wipe-b-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label:hover, .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio] + label:hover {
  background-color: hsl(0, 0%, 20%);
  opacity: 1;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer input[type=radio]:checked + label, .link main section .viewportContainer header .middleContainer .wipesContainer input[type=radio]:checked + label {
  opacity: 1;
}
.viewer main section .viewportContainer header .middleContainer .wipesContainer .selectionBar, .link main section .viewportContainer header .middleContainer .wipesContainer .selectionBar {
  position: absolute;
  left: var(--wipe-left);
  top: 42px;
  width: 30px;
  height: 2px;
  background-color: hsl(0, 0%, 80%);
  transition: left var(--animation-speed-medium);
}
.viewer main section .viewportContainer .viewport, .link main section .viewportContainer .viewport {
  flex: 1 1 auto;
  background-color: hsl(0, 0%, 13%);
  height: calc(100% - 150px);
  overflow: hidden;
  position: relative;
  margin: 4px;
  border-radius: 4px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.viewer main section .viewportContainer .viewport .layer, .link main section .viewportContainer .viewport .layer {
  position: absolute;
  will-change: transform;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.viewer main section .viewportContainer .viewport .layer *, .link main section .viewportContainer .viewport .layer * {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame, .link main section .viewportContainer .viewport .layer .safeFrame {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame.show, .link main section .viewportContainer .viewport .layer .safeFrame.show {
  display: block;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame g, .link main section .viewportContainer .viewport .layer .safeFrame g {
  stroke-width: calc(var(--inverse-multiplier) * 2);
  display: none;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame g.show, .link main section .viewportContainer .viewport .layer .safeFrame g.show {
  display: block;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame .safeFrameMask, .link main section .viewportContainer .viewport .layer .safeFrame .safeFrameMask {
  display: none;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame .safeFrameMask.show, .link main section .viewportContainer .viewport .layer .safeFrame .safeFrameMask.show {
  display: block;
}
.viewer main section .viewportContainer .viewport .layer .safeFrame .actionSafe, .viewer main section .viewportContainer .viewport .layer .safeFrame .titleSafe, .link main section .viewportContainer .viewport .layer .safeFrame .actionSafe, .link main section .viewportContainer .viewport .layer .safeFrame .titleSafe {
  stroke: hsl(0, 0%, 80%);
}
.viewer main section .viewportContainer .viewport .layer img, .viewer main section .viewportContainer .viewport .layer video, .link main section .viewportContainer .viewport .layer img, .link main section .viewportContainer .viewport .layer video {
  position: absolute;
  width: 100%;
  height: 100%;
}
.viewer main section .viewportContainer .viewport .annotations, .link main section .viewportContainer .viewport .annotations {
  position: absolute;
  border: none;
}
.viewer main section .viewportContainer .viewport .annotations rect, .link main section .viewportContainer .viewport .annotations rect {
  rx: calc(var(--inverse-multiplier) * 4);
  ry: calc(var(--inverse-multiplier) * 4);
}
.viewer main section .viewportContainer .videoControls, .link main section .viewportContainer .videoControls {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(0, 0%, 13%);
}
.viewer main section .viewportContainer .videoControls .playButton, .link main section .viewportContainer .videoControls .playButton {
  width: 60px;
  height: 60px;
  background: url("../images/play-icon.svg") no-repeat center;
  background-size: 40px;
  cursor: pointer;
}
.viewer main section .viewportContainer .hidden, .link main section .viewportContainer .hidden {
  display: inherit !important;
  visibility: hidden;
}
.viewer main section .viewportContainer .timelineContainer, .link main section .viewportContainer .timelineContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 5;
}
.viewer main section .viewportContainer .timelineContainer:hover .timelineRange, .link main section .viewportContainer .timelineContainer:hover .timelineRange {
  height: 14px;
}
.viewer main section .viewportContainer .timelineContainer:hover .commentAvatarsContainer .commentMark::after, .link main section .viewportContainer .timelineContainer:hover .commentAvatarsContainer .commentMark::after {
  height: 14px;
}
.viewer main section .viewportContainer .timelineContainer .timelineRange, .link main section .viewportContainer .timelineContainer .timelineRange {
  height: 4px;
  width: 100%;
  cursor: pointer;
  position: relative;
  margin: 0px;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  transition: height var(--animation-speed-fast);
}
.viewer main section .viewportContainer .timelineContainer .timelineRange.seek::after, .link main section .viewportContainer .timelineContainer .timelineRange.seek::after {
  content: "";
  position: absolute;
  top: 0px;
  left: calc(var(--seek) - 0px);
  width: 1px;
  height: 14px;
  background-color: hsl(0, 0%, 100%);
}
.viewer main section .viewportContainer .timelineContainer .timelineRange::-webkit-slider-runnable-track, .link main section .viewportContainer .timelineContainer .timelineRange::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--blue-base-colour) 0%, var(--blue-base-colour) var(--progress), hsl(0, 0%, 20%) var(--progress), hsl(0, 0%, 20%) 100%);
  transition: background-color var(--animation-speed-medium);
}
.viewer main section .viewportContainer .timelineContainer .timelineRange::-webkit-slider-thumb, .link main section .viewportContainer .timelineContainer .timelineRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 14px;
  background: hsl(0, 0%, 100%);
  cursor: pointer;
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer {
  width: 100%;
  height: 20px;
  padding: 1px 0px;
  position: relative;
  overflow-x: clip;
  transition: height var(--animation-speed-fast);
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark {
  position: absolute;
  left: var(--comment-mark);
  top: 2px;
  font-weight: initial;
  font-size: 8px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  text-align: center;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
  transform: translateX(-50%);
  cursor: pointer;
  outline: 2px solid transparent;
  transition: outline var(--animation-speed-fast), opacity var(--animation-speed-fast);
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark.checked, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark.checked {
  opacity: 0.25;
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark::after, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark::after {
  content: "";
  position: absolute;
  bottom: 18px;
  left: calc(50% - 1px);
  width: 2px;
  height: 4px;
  background-color: hsl(0, 0%, 100%);
  transition: height var(--animation-speed-fast), background-color var(--animation-speed-fast);
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark:hover, .viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark.selected, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark:hover, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark.selected {
  outline: 2px solid hsl(0, 0%, 100%);
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark:hover::after, .viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark.selected::after, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark:hover::after, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer .commentMark.selected::after {
  background-color: hsl(0, 0%, 100%);
}
.viewer main section .viewportContainer .timelineContainer .commentAvatarsContainer:empty, .link main section .viewportContainer .timelineContainer .commentAvatarsContainer:empty {
  display: none;
}
.viewer main section .viewportContainer footer, .link main section .viewportContainer footer {
  padding: 8px;
  background-color: hsl(0, 0%, 13%);
  display: flex;
  justify-content: space-between;
}
.viewer main section .viewportContainer footer .leftBar, .link main section .viewportContainer footer .leftBar {
  display: flex;
  gap: 4px;
  flex: 0 0 220px;
  justify-content: flex-start;
}
.viewer main section .viewportContainer footer .leftBar .playbackSpeed, .viewer main section .viewportContainer footer .leftBar .playPause, .viewer main section .viewportContainer footer .leftBar .loop, .link main section .viewportContainer footer .leftBar .playbackSpeed, .link main section .viewportContainer footer .leftBar .playPause, .link main section .viewportContainer footer .leftBar .loop {
  width: 30px;
  height: 30px;
  padding: 0px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--animation-speed-medium);
}
.viewer main section .viewportContainer footer .leftBar .playbackSpeed.active, .viewer main section .viewportContainer footer .leftBar .playbackSpeed:hover, .viewer main section .viewportContainer footer .leftBar .playPause.active, .viewer main section .viewportContainer footer .leftBar .playPause:hover, .viewer main section .viewportContainer footer .leftBar .loop.active, .viewer main section .viewportContainer footer .leftBar .loop:hover, .link main section .viewportContainer footer .leftBar .playbackSpeed.active, .link main section .viewportContainer footer .leftBar .playbackSpeed:hover, .link main section .viewportContainer footer .leftBar .playPause.active, .link main section .viewportContainer footer .leftBar .playPause:hover, .link main section .viewportContainer footer .leftBar .loop.active, .link main section .viewportContainer footer .leftBar .loop:hover {
  background-color: hsl(0, 0%, 20%);
}
.viewer main section .viewportContainer footer .leftBar .playbackSpeed, .link main section .viewportContainer footer .leftBar .playbackSpeed {
  line-height: 30px;
  text-align: center;
}
.viewer main section .viewportContainer footer .leftBar .playPause, .link main section .viewportContainer footer .leftBar .playPause {
  background: url("../images/viewport-playPause-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer footer .leftBar .playPause.active, .link main section .viewportContainer footer .leftBar .playPause.active {
  background-image: url("../images/viewport-playPause-active-icon.svg");
}
.viewer main section .viewportContainer footer .leftBar .loop, .link main section .viewportContainer footer .leftBar .loop {
  background: url("../images/viewport-loop-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer footer .leftBar .loop.active, .link main section .viewportContainer footer .leftBar .loop.active {
  background-image: url("../images/viewport-loop-active-icon.svg");
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer, .link main section .viewportContainer footer .leftBar .volumeContainer {
  display: flex;
  align-items: center;
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volume, .link main section .viewportContainer footer .leftBar .volumeContainer .volume {
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  background: url("../images/viewport-volume-icon.svg") no-repeat center;
  transition: background var(--animation-speed-fast);
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volume:hover, .link main section .viewportContainer footer .leftBar .volumeContainer .volume:hover {
  background-color: hsl(0, 0%, 20%);
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volume.half, .link main section .viewportContainer footer .leftBar .volumeContainer .volume.half {
  background-image: url("../images/viewport-volume-half-icon.svg");
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volume.muted, .link main section .viewportContainer footer .leftBar .volumeContainer .volume.muted {
  background-image: url("../images/viewport-volume-muted-icon.svg");
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volumeRange, .link main section .viewportContainer footer .leftBar .volumeContainer .volumeRange {
  opacity: 0;
  width: 0px;
  height: 4px;
  border-radius: 4px;
  transition: opacity var(--animation-speed-fast), width var(--animation-speed-fast);
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volumeRange::-webkit-slider-runnable-track, .link main section .viewportContainer footer .leftBar .volumeContainer .volumeRange::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--blue-base-colour) 0%, var(--blue-base-colour) var(--volume), hsl(0, 0%, 30%) var(--volume), hsl(0, 0%, 30%) 100%);
  transition: background-color var(--animation-speed-fast);
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer .volumeRange::-webkit-slider-thumb, .link main section .viewportContainer footer .leftBar .volumeContainer .volumeRange::-webkit-slider-thumb {
  position: relative;
  transform: scale(0.85) translate(2px, calc(-50% + 2px));
  cursor: pointer;
  background-color: hsl(0, 0%, 80%);
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer:not(.viewer main section .viewportContainer footer .leftBar .volumeContainer.muted, .link main section .viewportContainer footer .leftBar .volumeContainer.muted):hover .volumeRange, .link main section .viewportContainer footer .leftBar .volumeContainer:not(.viewer main section .viewportContainer footer .leftBar .volumeContainer.muted, .link main section .viewportContainer footer .leftBar .volumeContainer.muted):hover .volumeRange {
  opacity: 1;
  width: 80px;
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer.muted .volumeRange, .link main section .viewportContainer footer .leftBar .volumeContainer.muted .volumeRange {
  pointer-events: none;
}
.viewer main section .viewportContainer footer .leftBar .volumeContainer.muted .volumeRange::-webkit-slider-runnable-track, .link main section .viewportContainer footer .leftBar .volumeContainer.muted .volumeRange::-webkit-slider-runnable-track {
  background: linear-gradient(to right, hsl(0, 0%, 30%) 0%, hsl(0, 0%, 30%) var(--volume), hsl(0, 0%, 10%) var(--volume), hsl(0, 0%, 10%) 100%);
}
.viewer main section .viewportContainer footer .centreBar, .link main section .viewportContainer footer .centreBar {
  display: flex;
  gap: 4px;
}
.viewer main section .viewportContainer footer .centreBar .volume, .viewer main section .viewportContainer footer .centreBar .timeDisplayContainer, .link main section .viewportContainer footer .centreBar .volume, .link main section .viewportContainer footer .centreBar .timeDisplayContainer {
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--animation-speed-medium);
}
.viewer main section .viewportContainer footer .centreBar .volume.active, .viewer main section .viewportContainer footer .centreBar .volume:hover, .viewer main section .viewportContainer footer .centreBar .timeDisplayContainer.active, .viewer main section .viewportContainer footer .centreBar .timeDisplayContainer:hover, .link main section .viewportContainer footer .centreBar .volume.active, .link main section .viewportContainer footer .centreBar .volume:hover, .link main section .viewportContainer footer .centreBar .timeDisplayContainer.active, .link main section .viewportContainer footer .centreBar .timeDisplayContainer:hover {
  background-color: hsl(0, 0%, 20%);
}
.viewer main section .viewportContainer footer .centreBar .timeDisplayContainer, .link main section .viewportContainer footer .centreBar .timeDisplayContainer {
  display: flex;
  width: fit-content;
  padding: 0px 8px;
}
.viewer main section .viewportContainer footer .centreBar .timeDisplayContainer .timeDisplayPicker, .link main section .viewportContainer footer .centreBar .timeDisplayContainer .timeDisplayPicker {
  width: 16px;
  height: 30px;
  background: url("../images/viewport-timeDisplay-icon.svg") no-repeat center;
  background-size: 10px;
  margin-left: 4px;
}
.viewer main section .viewportContainer footer .centreBar .timeDisplayContainer .currentTime, .link main section .viewportContainer footer .centreBar .timeDisplayContainer .currentTime {
  width: fit-content;
  height: 30px;
  line-height: 30px;
}
.viewer main section .viewportContainer footer .centreBar .timeDisplayContainer .duration, .link main section .viewportContainer footer .centreBar .timeDisplayContainer .duration {
  width: fit-content;
  height: 30px;
  line-height: 30px;
  color: hsl(0, 0%, 60%);
}
.viewer main section .viewportContainer footer .centreBar .timeDisplayContainer .duration:empty, .link main section .viewportContainer footer .centreBar .timeDisplayContainer .duration:empty {
  display: none;
}
.viewer main section .viewportContainer footer .centreBar .timeDisplayContainer .duration::before, .link main section .viewportContainer footer .centreBar .timeDisplayContainer .duration::before {
  content: "/";
  margin: 0px 4px;
}
.viewer main section .viewportContainer footer .rightBar, .link main section .viewportContainer footer .rightBar {
  display: flex;
  gap: 4px;
  flex: 0 0 220px;
  justify-content: flex-end;
}
.viewer main section .viewportContainer footer .rightBar .horizontalFlip, .viewer main section .viewportContainer footer .rightBar .verticalFlip, .viewer main section .viewportContainer footer .rightBar .zoomText, .viewer main section .viewportContainer footer .rightBar .safeFrame, .viewer main section .viewportContainer footer .rightBar .fullScreen, .link main section .viewportContainer footer .rightBar .horizontalFlip, .link main section .viewportContainer footer .rightBar .verticalFlip, .link main section .viewportContainer footer .rightBar .zoomText, .link main section .viewportContainer footer .rightBar .safeFrame, .link main section .viewportContainer footer .rightBar .fullScreen {
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--animation-speed-medium);
}
.viewer main section .viewportContainer footer .rightBar .horizontalFlip.active, .viewer main section .viewportContainer footer .rightBar .horizontalFlip:hover, .viewer main section .viewportContainer footer .rightBar .verticalFlip.active, .viewer main section .viewportContainer footer .rightBar .verticalFlip:hover, .viewer main section .viewportContainer footer .rightBar .zoomText.active, .viewer main section .viewportContainer footer .rightBar .zoomText:hover, .viewer main section .viewportContainer footer .rightBar .safeFrame.active, .viewer main section .viewportContainer footer .rightBar .safeFrame:hover, .viewer main section .viewportContainer footer .rightBar .fullScreen.active, .viewer main section .viewportContainer footer .rightBar .fullScreen:hover, .link main section .viewportContainer footer .rightBar .horizontalFlip.active, .link main section .viewportContainer footer .rightBar .horizontalFlip:hover, .link main section .viewportContainer footer .rightBar .verticalFlip.active, .link main section .viewportContainer footer .rightBar .verticalFlip:hover, .link main section .viewportContainer footer .rightBar .zoomText.active, .link main section .viewportContainer footer .rightBar .zoomText:hover, .link main section .viewportContainer footer .rightBar .safeFrame.active, .link main section .viewportContainer footer .rightBar .safeFrame:hover, .link main section .viewportContainer footer .rightBar .fullScreen.active, .link main section .viewportContainer footer .rightBar .fullScreen:hover {
  background-color: hsl(0, 0%, 20%);
}
.viewer main section .viewportContainer footer .rightBar .horizontalFlip, .link main section .viewportContainer footer .rightBar .horizontalFlip {
  background: url("../images/viewport-flipHorizontal-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer footer .rightBar .horizontalFlip.active, .link main section .viewportContainer footer .rightBar .horizontalFlip.active {
  background-image: url("../images/viewport-flipHorizontal-active-icon.svg");
}
.viewer main section .viewportContainer footer .rightBar .verticalFlip, .link main section .viewportContainer footer .rightBar .verticalFlip {
  background: url("../images/viewport-flipVertical-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer footer .rightBar .verticalFlip.active, .link main section .viewportContainer footer .rightBar .verticalFlip.active {
  background-image: url("../images/viewport-flipVertical-active-icon.svg");
}
.viewer main section .viewportContainer footer .rightBar .zoomText, .link main section .viewportContainer footer .rightBar .zoomText {
  line-height: 30px;
  text-align: center;
  padding: 0 4px;
  width: 36px;
}
.viewer main section .viewportContainer footer .rightBar .safeFrame, .link main section .viewportContainer footer .rightBar .safeFrame {
  background: url("../images/viewport-safeframe-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer footer .rightBar .safeFrame.active, .link main section .viewportContainer footer .rightBar .safeFrame.active {
  background-image: url("../images/viewport-safeframe-active-icon.svg");
}
.viewer main section .viewportContainer footer .rightBar .fullScreen, .link main section .viewportContainer footer .rightBar .fullScreen {
  background: url("../images/viewport-fullscreen-icon.svg") no-repeat center;
}
.viewer main section .viewportContainer footer .rightBar .fullScreen.active, .link main section .viewportContainer footer .rightBar .fullScreen.active {
  background-image: url("../images/viewport-fullscreen-active-icon.svg");
}
.viewer main section .commentsContainer, .link main section .commentsContainer {
  flex: 0 0 auto;
  min-width: 360px;
  max-width: 660px;
  display: flex;
  flex-direction: column;
}
.viewer main section .commentsContainer .replyContainer, .link main section .commentsContainer .replyContainer {
  height: var(--comment-reply-height);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.viewer main section .commentsContainer .replyContainer .texteditor, .link main section .commentsContainer .replyContainer .texteditor {
  background-color: hsl(0, 0%, 15%);
  height: var(--texteditor-height);
  max-height: 400px;
  line-height: 24px;
  padding: 4px 8px;
  border-radius: 4px;
  outline: 1px solid transparent;
  min-height: 64px;
  width: 100%;
  outline: hsl(0, 0%, 30%) solid 1px;
}
.viewer main section .commentsContainer .replyContainer .replyBar, .link main section .commentsContainer .replyContainer .replyBar {
  display: flex;
  justify-content: space-between;
}
.viewer main section .commentsContainer .replyContainer .replyBar .replyBarLeft button, .link main section .commentsContainer .replyContainer .replyBar .replyBarLeft button {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
.viewer main section .commentsContainer .commentsToolbarContainer, .link main section .commentsContainer .commentsToolbarContainer {
  flex: 0 0 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.viewer main section .commentsContainer .commentsToolbarContainer .leftSide, .link main section .commentsContainer .commentsToolbarContainer .leftSide {
  padding-left: 24px;
  display: flex;
  gap: 12px;
  color: hsl(0, 0%, 60%);
  transition: color var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio], .link main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio] {
  display: none;
}
.viewer main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio] + label, .link main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio] + label {
  cursor: pointer;
}
.viewer main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio]:checked + label, .viewer main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio] + label:hover, .link main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio]:checked + label, .link main section .commentsContainer .commentsToolbarContainer .leftSide input[type=radio] + label:hover {
  color: hsl(0, 0%, 80%);
}
.viewer main section .commentsContainer .commentsToolbarContainer .rightSide, .link main section .commentsContainer .commentsToolbarContainer .rightSide {
  flex: 0 0 auto;
  padding-right: 24px;
  display: flex;
  gap: 8px;
}
.viewer main section .commentsContainer .commentsToolbarContainer .rightSide .filter, .link main section .commentsContainer .commentsToolbarContainer .rightSide .filter {
  background: url("../images/filter-icon.svg") no-repeat center;
  width: 15px;
  height: 30px;
  cursor: pointer;
}
.viewer main section .commentsContainer .commentsToolbarContainer .rightSide .filter.active, .link main section .commentsContainer .commentsToolbarContainer .rightSide .filter.active {
  position: relative;
}
.viewer main section .commentsContainer .commentsToolbarContainer .rightSide .filter.active::after, .link main section .commentsContainer .commentsToolbarContainer .rightSide .filter.active::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--blue-base-colour);
}
.viewer main section .commentsContainer .commentsToolbarContainer .rightSide .sort, .link main section .commentsContainer .commentsToolbarContainer .rightSide .sort {
  width: 15px;
  height: 30px;
  background: url("/images/sort-icon.svg") no-repeat center;
  cursor: pointer;
}
.viewer main section .commentsContainer .commentsToolbarContainer .rightSide .sort:hover, .link main section .commentsContainer .commentsToolbarContainer .rightSide .sort:hover {
  background-image: url("/images/sort-icon-hover.svg");
}
.viewer main section .commentsContainer .commentsList, .link main section .commentsContainer .commentsList {
  flex: 1 1 auto;
  background-color: hsl(0, 0%, 13%);
  border-top-right-radius: 8px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
.viewer main section .commentsContainer .commentsList .comment, .link main section .commentsContainer .commentsList .comment {
  margin: var(--comment-margin) 8px 0px 8px;
  padding: var(--comment-margin) 8px;
  background-color: hsl(0, 0%, 15%);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: calc(100% - 32px);
  height: var(--comment-height);
  opacity: var(--comment-opacity);
  transition: background-color var(--animation-speed-medium), opacity var(--animation-speed-fast), height var(--animation-speed-fast), margin var(--animation-speed-fast), padding var(--animation-speed-fast);
}
.viewer main section .commentsContainer .commentsList .comment.pinned, .link main section .commentsContainer .commentsList .comment.pinned {
  outline: 1px solid var(--blue-base-colour);
}
.viewer main section .commentsContainer .commentsList .comment.filtered, .link main section .commentsContainer .commentsList .comment.filtered {
  display: none;
}
.viewer main section .commentsContainer .commentsList .comment.checked, .link main section .commentsContainer .commentsList .comment.checked {
  background-color: hsl(0, 0%, 10%);
}
.viewer main section .commentsContainer .commentsList .comment.checked .message, .link main section .commentsContainer .commentsList .comment.checked .message {
  opacity: 0.7;
}
.viewer main section .commentsContainer .commentsList .comment.checked .message .resolved, .link main section .commentsContainer .commentsList .comment.checked .message .resolved {
  opacity: 1 !important;
  background-image: url("../images/comment-completed-icon-checked.svg") !important;
}
.viewer main section .commentsContainer .commentsList .comment.selected:not(.checked), .link main section .commentsContainer .commentsList .comment.selected:not(.checked) {
  background-color: hsl(0, 0%, 18%);
  outline: 1px solid hsl(0, 0%, 30%);
}
.viewer main section .commentsContainer .commentsList .comment.selected:not(.checked) .timestamp, .link main section .commentsContainer .commentsList .comment.selected:not(.checked) .timestamp {
  background-color: hsl(0, 0%, 25%);
}
.viewer main section .commentsContainer .commentsList .comment.selected.checked, .link main section .commentsContainer .commentsList .comment.selected.checked {
  outline: 1px solid hsl(0, 0%, 30%);
}
.viewer main section .commentsContainer .commentsList .comment.selected.pinned, .link main section .commentsContainer .commentsList .comment.selected.pinned {
  outline: 1px solid var(--blue-bright-colour);
}
.viewer main section .commentsContainer .commentsList .comment .message, .link main section .commentsContainer .commentsList .comment .message {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: height var(--animation-speed-medium), opacity var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message::before, .link main section .commentsContainer .commentsList .comment .message::before {
  content: "";
  display: block;
  position: absolute;
  top: 29px;
  left: 16px;
  width: 1px;
  height: 100%;
  background-color: hsl(0, 0%, 40%);
}
.viewer main section .commentsContainer .commentsList .comment .message:nth-last-child(-n+2)::before, .link main section .commentsContainer .commentsList .comment .message:nth-last-child(-n+2)::before {
  display: none;
}
.viewer main section .commentsContainer .commentsList .comment .message:hover .resolved .message, .link main section .commentsContainer .commentsList .comment .message:hover .resolved .message {
  pointer-events: none;
}
.viewer main section .commentsContainer .commentsList .comment .message:hover .resolved, .viewer main section .commentsContainer .commentsList .comment .message:hover .menu, .link main section .commentsContainer .commentsList .comment .message:hover .resolved, .link main section .commentsContainer .commentsList .comment .message:hover .menu {
  opacity: 1 !important;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar, .link main section .commentsContainer .commentsList .comment .message .headerBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer {
  display: flex;
  gap: 4px;
  align-items: center;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .accountContainer, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .accountContainer {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  border-radius: 36px;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .initials, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .initials {
  font-weight: initial;
  font-size: 9px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .fullname, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .fullname {
  text-align: right;
  font-weight: initial;
  font-size: 12px;
  color: hsl(0, 0%, 80%);
  margin-left: 4px;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .commentime, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .commentime {
  color: hsl(0, 0%, 60%);
  font-size: 11px;
  position: relative;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .validlink, .viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .brokenlink, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .validlink, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .brokenlink {
  width: 16px;
  height: 24px;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .validlink, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .validlink {
  background: url("../images/comment-link-icon.svg") no-repeat center;
  background-size: 12px;
  transition: background var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .validlink:hover, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .validlink:hover {
  background-image: url("../images/comment-link-icon-hover.svg");
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .brokenlink, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .brokenlink {
  background: url("../images/comment-brokenlink-icon.svg") no-repeat center;
  background-size: 12px;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .completed, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .completed {
  width: 24px;
  height: 24px;
  background: url("../images/comment-completed-icon.svg") no-repeat center;
  background-size: 16px;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .completed:hover, .link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .completed:hover {
  background-image: url("../images/comment-completed-icon-checked.svg");
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer, .link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer {
  display: flex;
  gap: 4px;
  align-items: center;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer.disabled, .link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .resolved, .link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .resolved {
  width: 16px;
  height: 24px;
  background: url("../images/comment-completed-icon.svg") no-repeat center;
  background-size: 16px;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .resolved:hover, .link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .resolved:hover {
  background-image: url("../images/comment-completed-icon-checked.svg");
}
.viewer main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .menu, .link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .menu {
  width: 16px;
  height: 24px;
  opacity: 0;
  background: url("../images/hamburger-icon.svg") no-repeat center;
  transition: opacity var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection, .link main section .commentsContainer .commentsList .comment .message .messageSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0px 8px 36px;
  padding-right: 4px;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .messageText, .link main section .commentsContainer .commentsList .comment .message .messageSection .messageText {
  flex: 1 1 auto;
  overflow: auto;
  border-radius: 4px;
  text-align: left;
  box-sizing: border-box;
  text-indent: var(--timestamp-indent);
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--max-lines);
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: padding var(--animation-speed-fast);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .messageText[contenteditable=true], .link main section .commentsContainer .commentsList .comment .message .messageSection .messageText[contenteditable=true] {
  outline: 1px solid hsl(0, 0%, 40%);
  padding: 8px;
  width: 100%;
  cursor: text;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .showMoreText, .link main section .commentsContainer .commentsList .comment .message .messageSection .showMoreText {
  color: hsl(0, 0%, 60%);
  transition: color var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .showMoreText:hover, .link main section .commentsContainer .commentsList .comment .message .messageSection .showMoreText:hover {
  color: hsl(0, 0%, 80%);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions {
  width: 100%;
  height: 24px;
  line-height: 24px;
  display: flex;
  gap: 8px;
  overflow: hidden;
  transition: height var(--animation-speed-fast), opacity var(--animation-speed-fast);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions.collapse, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions.collapse {
  height: 0;
  opacity: 0;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions {
  background-color: hsl(0, 0%, 20%);
  border-radius: 4px;
  padding: 0px 4px;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions:hover, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions:hover {
  background-color: hsl(0, 0%, 30%);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions .reaction, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions .reaction {
  margin-left: -4px;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions .reaction:first-child, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions .reaction:first-child {
  margin-left: 0px;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions .reactionCount, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions .reactionCount {
  margin: 0px 8px;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions:empty, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .allReactions:empty {
  display: none;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .reactionIcon, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .reactionIcon {
  width: 16px;
  height: 24px;
  background: url("../images/comment-reaction-icon.svg") no-repeat center;
  background-size: 16px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .reactionIcon.disabled, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .reactionIcon.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.viewer main section .commentsContainer .commentsList .comment .message .messageSection .reactions .reactionIcon:hover, .link main section .commentsContainer .commentsList .comment .message .messageSection .reactions .reactionIcon:hover {
  opacity: 1;
}
.viewer main section .commentsContainer .commentsList .comment .message .timestamp, .link main section .commentsContainer .commentsList .comment .message .timestamp {
  top: 40px;
  left: 34px;
  margin: 0;
  transition: margin var(--animation-speed-fast), background-color var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .showMore, .link main section .commentsContainer .commentsList .comment .message .showMore {
  margin: 8px 0px 8px 36px;
  width: calc(100% - 36px);
  background-color: hsl(0, 0%, 20%);
  padding: 8px;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .message .showMore:hover, .link main section .commentsContainer .commentsList .comment .message .showMore:hover {
  color: hsl(0, 0%, 90%);
  background-color: hsl(0, 0%, 30%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted, .link main section .commentsContainer .commentsList .comment.accepted {
  background-color: hsl(190, 12%, 15%);
  outline: 1px solid hsl(200, 50%, 16%);
  transition: background var(--animation-speed-fast), outline var(--animation-speed-fast);
}
.viewer main section .commentsContainer .commentsList .comment.accepted .showMore, .link main section .commentsContainer .commentsList .comment.accepted .showMore {
  background-color: hsl(200, 25%, 20%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted .showMore:hover, .link main section .commentsContainer .commentsList .comment.accepted .showMore:hover {
  background-color: hsl(200, 25%, 30%);
  color: hsl(0, 0%, 90%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted.selected:not(.checked), .link main section .commentsContainer .commentsList .comment.accepted.selected:not(.checked) {
  background-color: hsl(198, 13%, 19%);
  outline: 1px solid hsl(200, 50%, 32%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted.selected:not(.checked) .showMore, .link main section .commentsContainer .commentsList .comment.accepted.selected:not(.checked) .showMore {
  background-color: hsl(200, 10%, 25%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted.checked, .link main section .commentsContainer .commentsList .comment.accepted.checked {
  background-color: hsl(200, 15%, 10%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted.checked .message, .link main section .commentsContainer .commentsList .comment.accepted.checked .message {
  opacity: 0.7;
}
.viewer main section .commentsContainer .commentsList .comment.accepted.checked.selected, .link main section .commentsContainer .commentsList .comment.accepted.checked.selected {
  outline: 1px solid hsl(200, 50%, 32%);
}
.viewer main section .commentsContainer .commentsList .comment.accepted.selected.pinned, .link main section .commentsContainer .commentsList .comment.accepted.selected.pinned {
  outline: 1px solid var(--blue-base-colour);
}
.viewer main section .commentsContainer .commentsList .comment.accepted.pinned, .link main section .commentsContainer .commentsList .comment.accepted.pinned {
  outline: 1px solid var(--blue-base-colour);
}
.viewer main section .commentsContainer .commentsList .comment .replyBox .replyButton, .link main section .commentsContainer .commentsList .comment .replyBox .replyButton {
  margin: 0px 0px 0px 36px;
  padding: 0px;
  height: 24px;
  line-height: 24px;
  color: hsl(0, 0%, 80%);
  transition: color var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentsList .comment .replyBox .replyButton.disabled, .link main section .commentsContainer .commentsList .comment .replyBox .replyButton.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.viewer main section .commentsContainer .commentsList .comment .replyBox .replyButton:hover, .link main section .commentsContainer .commentsList .comment .replyBox .replyButton:hover {
  color: hsl(0, 0%, 60%);
}
.viewer main section .commentsContainer .commentsList .comment .replyBox .replyButton.collapse, .link main section .commentsContainer .commentsList .comment .replyBox .replyButton.collapse {
  color: hsl(0, 0%, 30%);
  pointer-events: none;
  cursor: default;
}
.viewer main section .commentsContainer .commentEditorContainer, .link main section .commentsContainer .commentEditorContainer {
  background-color: hsl(0, 0%, 13%);
  border-bottom-right-radius: 8px;
}
.viewer main section .commentsContainer .commentEditorContainer.disabled, .link main section .commentsContainer .commentEditorContainer.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor, .link main section .commentsContainer .commentEditorContainer .commentEditor {
  margin: 8px;
  padding: 8px;
  background-color: hsl(0, 0%, 15%);
  border-radius: 8px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .topBar, .link main section .commentsContainer .commentEditorContainer .commentEditor .topBar {
  flex: 0 0 auto;
  display: flex;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .topBar .accountContainer, .link main section .commentsContainer .commentEditorContainer .commentEditor .topBar .accountContainer {
  flex: 0 0 auto;
  text-align: right;
  font-weight: initial;
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 5px;
  border-radius: 36px;
  cursor: default;
  color: hsl(0, 0%, 60%);
  transition: background-color var(--animation-speed-fast);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .topBar .accountContainer .initials, .link main section .commentsContainer .commentEditorContainer .commentEditor .topBar .accountContainer .initials {
  font-weight: initial;
  font-size: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .texteditor, .link main section .commentsContainer .commentEditorContainer .commentEditor .texteditor {
  background-color: inherit;
  flex: 1 1 auto;
  height: var(--texteditor-height);
  max-height: 400px;
  min-height: 92px;
  line-height: 24px;
  padding: 10px;
  border-radius: 4px;
  outline: 1px solid transparent;
  text-indent: var(--timestamp-indent);
  margin-top: 8px;
  transition: height var(--animation-speed-medium), outline var(--animation-speed-fast);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .texteditor:focus, .link main section .commentsContainer .commentEditorContainer .commentEditor .texteditor:focus {
  outline: hsl(0, 0%, 30%) solid 1px;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .timestamp, .link main section .commentsContainer .commentEditorContainer .commentEditor .timestamp {
  top: 64px;
  left: 16px;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer {
  margin-top: 8px;
  height: 30px;
  opacity: 1;
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .separator, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .separator {
  width: 2px;
  background-color: hsl(0, 0%, 30%);
  border-radius: 1px;
  margin: 4px 0px;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton {
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton:hover {
  background-color: hsl(0, 0%, 20%);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton {
  background: url("../images/commentTools-region-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .regionButton.active {
  background-image: url("../images/commentTools-region-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton {
  background: url("../images/commentTools-circle-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .circleButton.active {
  background-image: url("../images/commentTools-circle-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton {
  background: url("../images/commentTools-arrow-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .arrowButton.active {
  background-image: url("../images/commentTools-arrow-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton {
  background: url("../images/commentTools-freehand-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .freehandButton.active {
  background-image: url("../images/commentTools-freehand-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton {
  background: url("../images/commentTools-text-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .textButton.active {
  background-image: url("../images/commentTools-text-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton {
  background: url("../images/commentTools-inline-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .inlineButton.active {
  background-image: url("../images/commentTools-inline-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .yellowButton {
  background: url("../images/commentTools-yellow-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .redButton {
  background: url("../images/commentTools-red-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .greenButton {
  background: url("../images/commentTools-green-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton, .link main section .commentsContainer .commentEditorContainer .commentEditor .commentToolsContainer .blueButton {
  background: url("../images/commentTools-blue-icon.svg") no-repeat center;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar button, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar button {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .sending, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .sending {
  position: relative;
  pointer-events: none;
  cursor: wait;
  /* Spinner animation */
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .sending::before, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .sending::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: hsl(0, 0%, 90%);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .sending::after, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .sending::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid hsl(0, 0%, 60%);
  border-top-color: hsl(0, 0%, 10%);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft {
  display: flex;
  gap: 4px;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--animation-speed-medium);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle.active, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle:hover, .viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle:hover, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle.active {
  background-color: hsl(0, 0%, 20%);
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle {
  background: url("../images/commentTools-icon.svg") center no-repeat;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .commentToolsToggle.active {
  background-image: url("../images/commentTools-active-icon.svg");
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle {
  background: url("../images/timestampToggle-icon.svg") center no-repeat;
}
.viewer main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle.active, .link main section .commentsContainer .commentEditorContainer .commentEditor .bottomBar .bottomBarLeft .timestampToggle.active {
  background-image: url("../images/timestampToggle-active-icon.svg");
}
.viewer main section .timestamp, .link main section .timestamp {
  position: absolute;
  padding: 0px 4px;
  border-radius: 4px;
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
  cursor: default;
}
.viewer main section .resizer, .link main section .resizer {
  flex: 0 0 auto;
  width: 1px;
  height: 100%;
  background-color: hsl(0, 0%, 20%);
  border-left: 2px solid;
  border-right: 2px solid;
  border-top: none;
  border-bottom: none;
  border-image-source: linear-gradient(to bottom, hsl(0, 0%, 11%) 60px, hsl(0, 0%, 13%) 60px);
  border-image-slice: 1;
  z-index: 10;
  transition: background-color var(--animation-speed-medium), border-image-source var(--animation-speed-medium);
  cursor: col-resize;
}
.viewer main section .resizer:hover, .link main section .resizer:hover {
  background-color: hsl(0, 0%, 30%);
  border-image-source: linear-gradient(to bottom, hsl(0, 0%, 30%) 60px, hsl(0, 0%, 30%) 60px);
}

.link main section .commentsContainer .commentsList .comment.checked.accepted {
  background-color: hsl(200, 15%, 10%);
}
.link main section .commentsContainer .commentsList .comment.checked .message {
  opacity: 1;
}
.link main section .commentsContainer .commentsList .comment.checked .message .resolved {
  opacity: 1 !important;
  background-image: url("../images/comment-approved-icon-checked.svg") !important;
}
.link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .completed {
  background-image: url("../images/comment-approved-icon.svg");
}
.link main section .commentsContainer .commentsList .comment .message .headerBar .leftContainer .completed:hover {
  background-image: url("../images/comment-approved-icon-checked.svg");
}
.link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .resolved {
  background-image: url("../images/comment-approved-icon.svg");
}
.link main section .commentsContainer .commentsList .comment .message .headerBar .rightContainer .resolved:hover {
  background-image: url("../images/comment-approved-icon-checked.svg");
}
.link .buttonSend:enabled {
  background-color: var(--blue-base-colour);
}
.link .buttonSend:enabled:hover {
  background-color: var(--blue-bright-colour);
}
.link .buttonSend:enabled.sending {
  position: relative;
  pointer-events: none;
  cursor: wait;
  /* Spinner animation */
}
.link .buttonSend:enabled.sending::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: var(--blue-base-colour) !important;
}
.link .buttonSend:enabled.sending::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid var(--blue-bright-colour) !important;
  border-top-color: hsl(0, 0%, 100%) !important;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.videoPreviewContainer {
  position: absolute;
  transform: translate(-50%, -50px);
}
.videoPreviewContainer .videoPreview {
  height: 100%;
  border-radius: 8px;
}
.videoPreviewContainer .videoPreviewTimecode {
  background-color: hsl(0, 0%, 10%);
  border-radius: 8px;
  padding: 8px;
}

.hoverComment {
  position: absolute;
  padding: 8px;
  background-color: hsl(0, 0%, 15%);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 300px;
  transform: translateX(-50%);
  filter: drop-shadow(0px 0px 8px hsla(0, 0%, 0%, 0.5));
  transition: opacity var(--animation-speed-medium);
}
.hoverComment .message {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: height var(--animation-speed-medium), opacity var(--animation-speed-medium);
}
.hoverComment .message .headerBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}
.hoverComment .message .headerBar .leftContainer {
  display: flex;
  gap: 4px;
  align-items: center;
}
.hoverComment .message .headerBar .leftContainer .accountContainer {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  align-items: center;
  border-radius: 36px;
}
.hoverComment .message .headerBar .leftContainer .initials {
  font-weight: initial;
  font-size: 9px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
}
.hoverComment .message .headerBar .leftContainer .fullname {
  text-align: right;
  font-weight: initial;
  font-size: 12px;
  color: hsl(0, 0%, 80%);
  margin-left: 4px;
}
.hoverComment .message .headerBar .leftContainer .commentime {
  color: hsl(0, 0%, 60%);
  font-size: 11px;
  position: relative;
}
.hoverComment .message .headerBar .leftContainer .completed {
  width: 24px;
  height: 24px;
  background: url("../images/comment-completed-icon.svg") no-repeat center;
  background-size: 16px;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--animation-speed-medium);
}
.hoverComment .message .headerBar .leftContainer .completed:hover {
  background-image: url("../images/comment-completed-icon-checked.svg");
}
.hoverComment .message .headerBar .rightContainer {
  display: flex;
  gap: 4px;
  align-items: center;
}
.hoverComment .message .headerBar .rightContainer .resolved {
  width: 16px;
  height: 24px;
  background: url("../images/comment-completed-icon.svg") no-repeat center;
  background-size: 16px;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--animation-speed-medium);
}
.hoverComment .message .headerBar .rightContainer .resolved:hover {
  background-image: url("../images/comment-completed-icon-checked.svg");
}
.hoverComment .message .headerBar .rightContainer .menu {
  width: 16px;
  height: 24px;
  opacity: 0;
  background: url("../images/hamburger-icon.svg") no-repeat center;
  transition: opacity var(--animation-speed-medium);
}
.hoverComment .message .messageSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0px 8px 36px;
  padding-right: 4px;
}
.hoverComment .message .messageSection .messageText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  flex: 1 1 auto;
  border-radius: 4px;
  text-align: left;
  box-sizing: border-box;
  text-indent: var(--timestamp-indent);
  pointer-events: visible;
  transition: padding var(--animation-speed-fast);
}
.hoverComment .message .messageSection .messageText[contenteditable=true] {
  outline: 1px solid hsl(0, 0%, 40%);
  padding: 8px;
  width: 100%;
  cursor: text;
}
.hoverComment .message .messageSection .reactions {
  width: 100%;
  height: 24px;
  line-height: 24px;
  display: flex;
  gap: 8px;
}
.hoverComment .message .messageSection .reactions .allReactions {
  background-color: hsl(0, 0%, 20%);
  border-radius: 4px;
  padding: 0px 4px;
}
.hoverComment .message .messageSection .reactions .allReactions:hover {
  background-color: hsl(0, 0%, 30%);
}
.hoverComment .message .messageSection .reactions .allReactions .reaction {
  margin-left: -4px;
}
.hoverComment .message .messageSection .reactions .allReactions .reaction:first-child {
  margin-left: 0px;
}
.hoverComment .message .messageSection .reactions .allReactions .reactionCount {
  margin: 0px 8px;
}
.hoverComment .message .messageSection .reactions .allReactions:empty {
  display: none;
}
.hoverComment .message .messageSection .reactions .reactionIcon {
  width: 16px;
  height: 24px;
  background: url("../images/comment-reaction-icon.svg") no-repeat center;
  background-size: 16px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--animation-speed-medium);
}
.hoverComment .message .messageSection .reactions .reactionIcon.disabled {
  pointer-events: none;
  opacity: 0.25;
}
.hoverComment .message .messageSection .reactions .reactionIcon:hover {
  opacity: 1;
}
.hoverComment .message .timestamp {
  position: absolute;
  top: 40px;
  left: 34px;
  margin: 0;
  padding: 0px 4px;
  border-radius: 4px;
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
  cursor: default;
  transition: margin var(--animation-speed-fast);
}

.waitlistHeader {
  padding: 5px 0px;
  font-weight: bold;
  cursor: pointer;
  color: hsl(0, 0%, 100%);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.waitlistHeader .waitlistRow div:hover {
  text-decoration: underline;
}

.waitlistContainer {
  width: 100%;
}
.waitlistContainer .waitlistRow {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.waitlistContainer .waitlistRow div {
  width: 300px;
  text-align: center;
}
.waitlistContainer .waitlistRow .up::after {
  content: " ↑";
}
.waitlistContainer .waitlistRow .down::after {
  content: " ↓";
}

.global-header {
  flex: 0 0 90px;
  width: 100%;
  min-width: 423px;
  display: flex;
  align-items: center;
}
.global-header .logoContainer {
  flex: 0 0 auto;
  margin-left: 23px;
  height: 30px;
}
.global-header .iconContainer {
  flex: 0 0 13px;
  margin-left: 23px;
  height: 30px;
  margin-right: 20px;
}
.global-header .backButton {
  flex: 0 0 20px;
  background: url("/images/chevron-back.svg") no-repeat center center;
  height: 46px;
  cursor: pointer;
}
.global-header .projectTitle {
  font-size: 24pt;
  font-family: "aptos-bold";
  color: hsl(0, 0%, 90%);
  margin: 0px 8px 0px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.global-header .shareButton {
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0px 8px;
}
.global-header .privacyLabel {
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0px 8px;
  background-color: hsl(0, 0%, 20%);
  cursor: default;
}
.global-header .privacyLabel:empty {
  display: none;
}
.global-header .privacyLabel.islink {
  background-color: var(--blue-base-colour);
  color: hsl(0, 0%, 0%);
}
.global-header .privacyLabel.islink img {
  filter: brightness(0);
}
.global-header .spacer {
  flex: 1 1 auto;
}
.global-header .rightHandSideContainer {
  display: flex;
  align-items: center;
  gap: 16px;
}
.global-header .rightHandSideContainer .external-links {
  position: relative;
  width: 24px;
  height: 46px;
  background: url("/images/external-links-icon.svg") no-repeat center;
  background-size: 20px;
  cursor: pointer;
  transition: background var(--animation-speed-fast);
}
.global-header .rightHandSideContainer .external-links:hover {
  background-image: url("/images/external-links-icon-hover.svg");
}
.global-header .rightHandSideContainer .activityIcon {
  position: relative;
  width: 24px;
  height: 46px;
  background: url("/images/notifications-icon.svg") no-repeat center center;
  background-size: 20px;
  cursor: pointer;
  transition: background var(--animation-speed-fast);
}
.global-header .rightHandSideContainer .activityIcon.active, .global-header .rightHandSideContainer .activityIcon.active:hover {
  background-image: url("/images/notifications-active-icon.svg");
}
.global-header .rightHandSideContainer .activityIcon:hover {
  background-image: url("/images/notifications-hover-icon.svg");
}
.global-header .rightHandSideContainer .activityIcon.no-count::after {
  opacity: 0;
}
.global-header .rightHandSideContainer .activityIcon::after {
  content: attr(data-count);
  position: absolute;
  top: 4px;
  left: 18px;
  height: 16px;
  background-color: #dc143c;
  color: hsl(0, 0%, 100%);
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 0 6px;
  outline: 3px solid hsl(0, 0%, 10%);
  transition: opacity var(--animation-speed-fast);
}
.global-header .rightHandSideContainer .accountContainer {
  margin-right: 18px;
  flex: 0 0 auto;
  text-align: right;
  font-weight: initial;
  font-size: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 5px;
  border-radius: 36px;
  cursor: pointer;
  transition: background-color var(--animation-speed-fast);
}
@media screen and (max-width: 650px) {
  .global-header .rightHandSideContainer .accountContainer {
    margin-right: 0px;
  }
}
.global-header .rightHandSideContainer .accountContainer:hover {
  background-color: hsl(0, 0%, 15%);
}
.global-header .rightHandSideContainer .accountContainer .initials {
  font-weight: initial;
  font-size: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
}
.global-header .rightHandSideContainer .hamburger {
  display: none;
  background-image: url("/images/hamburger.svg");
  background-position: center right;
  background-repeat: no-repeat;
  cursor: pointer;
}
@media screen and (max-width: 650px) {
  .global-header .rightHandSideContainer .hamburger {
    display: block;
    width: 24px;
    height: 30px;
    margin-right: 18px;
  }
}

.global-nav {
  flex: 0 0 60px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.global-nav .closeNav {
  display: none;
}
.global-nav input[type=radio] {
  display: none;
}
.global-nav input[type=radio] + label {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 10px 0px;
  opacity: 0.25;
  cursor: pointer;
  font-size: 0;
  transition: opacity var(--animation-speed-medium);
}
.global-nav input[type=radio] + label[for=projects] {
  background-image: url("/images/project-icon.svg");
  background-size: 24px;
}
.global-nav input[type=radio] + label[for=links] {
  background-image: url("/images/links-icon.svg");
}
.global-nav input[type=radio] + label[for=activity] {
  background-image: url("/images/activity-icon.svg");
}
.global-nav input[type=radio] + label[for=archive] {
  background-image: url("/images/archive-icon.svg");
  background-size: 24px;
}
.global-nav input[type=radio] + label[for=deleted] {
  background-image: url("/images/deleted-icon.svg");
  background-size: 24px;
}
.global-nav input[type=radio]:checked + label, .global-nav input[type=radio] + label:hover {
  opacity: 1;
}
.global-nav input[type=radio]:checked + label::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: -10px;
  width: 3px;
  height: 100%;
  background-color: var(--blue-base-colour);
  border-radius: 1px;
}
@media screen and (max-width: 650px) {
  .global-nav {
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    z-index: 80;
    background-color: hsla(0, 0%, 10%, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
  .global-nav .closeNav {
    top: 12px;
    left: 0px;
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
    margin-bottom: 64px;
    background-image: url("/images/close-icon.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px;
  }
  .global-nav input[type=radio] + label {
    position: relative;
    width: 100%;
    margin: 0px;
    background-color: hsl(0, 0%, 15%);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px hsl(0, 0%, 10%);
    text-align: center;
    line-height: 40px;
    flex: 0 0 40px;
    font-size: inherit;
  }
  .global-nav input[type=radio] + label[for] {
    background-image: none;
    width: calc(100% - 24px);
  }
  .global-nav input[type=radio]:checked + label::before {
    display: none;
  }
}

.toastcontainer {
  position: absolute;
  left: 0;
  top: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
  pointer-events: none;
  overflow: visible;
}
.toastcontainer .toast {
  height: var(--toast-height);
  max-width: 300px;
  line-height: 24px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: hsl(0, 0%, 15%);
  outline: 1px solid hsl(0, 0%, 20%);
  color: hsl(0, 0%, 80%);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 8px;
  text-align: center;
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  gap: 4px;
  transition: height var(--animation-speed-medium), opacity var(--animation-speed-medium), margin var(--animation-speed-medium), top var(--animation-speed-medium);
}
.toastcontainer .toast .toastText {
  flex: 1 1 auto;
}
.toastcontainer .toast .toastClose {
  flex: 0 0 24px;
  cursor: pointer;
}
.toastcontainer .toast .toastClose circle {
  stroke: hsl(0, 0%, 80%);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 75; /* Adjusted for smaller circle */
  stroke-dashoffset: 0;
  animation: countdown 10s linear forwards;
}
@keyframes countdown {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 75;
  }
}
.toastcontainer .toast .toastClose line {
  stroke: hsl(0, 0%, 80%);
  stroke-width: 2;
  stroke-linecap: round;
}
.toastcontainer .hide {
  height: 0;
  opacity: 0;
  margin: 0;
}

.emailinput {
  max-height: 152px;
  width: calc(100% - 10px);
  border-radius: 4px;
  height: 30px;
  line-height: 30px;
  padding: 4px 5px;
  box-sizing: content-box;
  overflow: auto;
}
.emailinput .emailaddress {
  padding: 3px 3px 3px 6px;
  border-radius: 4px;
  background-color: #7e7e7e;
  color: black;
  display: inline-block;
  line-height: 20px;
  margin-right: 5px;
  display: inline-flex;
  height: 20px;
  pointer-events: none;
}
.emailinput .emailaddress .closebutton {
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  margin-right: 3px;
  background-image: url("/images/delete-x.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 15px;
  pointer-events: auto;
}
.emailinput .emailaddress:hover {
  background: hsl(0, 80%, 50%);
}

.loading {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: visible;
  position: absolute;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: wait !important;
}
.loading.blur {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.loading .spinner {
  animation: rotate var(--animation-speed-slow) linear infinite;
}
.loading .path {
  stroke: var(--blue-base-colour);
  stroke-dasharray: 88;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.5s ease-in-out infinite;
}
.loading .bar {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.loading .bar::after {
  content: "";
  width: 50%;
  height: 2px;
  background-color: var(--blue-base-colour);
  position: absolute;
  bottom: 0;
  left: -30%;
  animation: slide var(--animation-speed-slow) linear infinite;
}
@keyframes slide {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 88;
  }
  50% {
    stroke-dashoffset: 22;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 88;
    transform: rotate(450deg);
  }
}

.bannerContainer {
  width: 100%;
  position: fixed;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bannerContainer .bannerBox {
  max-width: 500px;
  padding: 20px;
  border-radius: 10px;
  background-color: hsl(0, 0%, 20%);
  display: flex;
  flex-direction: column;
  filter: drop-shadow(2px 4px 6px black);
  margin-bottom: 20px;
}
.bannerContainer .bannerBox .bannerMessage {
  display: flex;
}
.bannerContainer .bannerBox .buttonContainer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialogbg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-backdrop-filter: blur(10px) brightness(0.65);
  backdrop-filter: blur(10px) brightness(0.65);
  z-index: 100;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dialogbg .dialog {
  max-width: calc(100% - 100px);
  min-width: 350px;
  min-height: 100px;
  padding: 24px;
  border-radius: 8px;
  background-color: hsl(0, 0%, 12%);
  box-shadow: 0px 0px 8px hsl(0, 0%, 10%);
  display: flex;
  flex-direction: column;
  cursor: default;
  gap: 10px;
  color: hsl(0, 0%, 60%);
  width: var(--dialog-width);
}
.dialogbg .dialog button {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
}
.dialogbg .dialog header {
  flex: 0 0 auto;
  font-family: "aptos-bold";
  color: hsl(0, 0%, 80%);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.dialogbg .dialog main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: inherit;
}
.dialogbg .dialog main .emailinput {
  max-width: 340px;
  height: auto;
}
.dialogbg .dialog main .inviteAsContainer {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
}
.dialogbg .dialog main .inviteAsContainer .title {
  flex: 1 1 auto;
}
.dialogbg .dialog main .inviteAsContainer .ddContainer {
  flex: 0 0 100px;
}
.dialogbg .dialog main .paymentContainer {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  line-height: 30px;
}
.dialogbg .dialog main .dialogDescription {
  margin-top: -8px;
  margin-bottom: 8px;
}
.dialogbg .dialog main .settingsContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.dialogbg .dialog main .settingsContainer .optionContainer {
  width: calc(100% - 4px);
  line-height: 24px;
  display: flex;
  gap: 8px;
}
.dialogbg .dialog main .settingsContainer .optionContainer .emailinput {
  padding: 0px 2px;
  width: 380px;
  max-width: 380px;
}
.dialogbg .dialog main .settingsContainer .optionContainer .addEmailsButton {
  width: 88px;
}
.dialogbg .dialog main .settingsContainer .optionContainer input[type=text] {
  height: 30px;
  border-radius: 4px;
}
.dialogbg .dialog main .settingsContainer .optionContainer .publicPrivateButton {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  text-align: left;
  padding: 0 10px;
}
.dialogbg .dialog main .settingsContainer .optionContainer .publicPrivateButton::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 30px;
  right: 10px;
  background: url("/images/chevron-down.svg") no-repeat center center;
  background-size: 8px;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer:empty {
  display: none;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member {
  color: hsl(0, 0%, 60%);
  display: flex;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  transition: outline var(--animation-speed-fast), color var(--animation-speed-fast), background-color var(--animation-speed-fast), opacity var(--animation-speed-fast);
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled {
  background-color: hsl(0, 0%, 10%);
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .displayname, .dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .type, .dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .role {
  pointer-events: none;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .account, .dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .role {
  opacity: 0.5;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .delete {
  cursor: pointer;
  background-image: url("/images/add-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 10%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.disabled .delete:hover {
  background-image: url("/images/add-icon-hover.svg");
  background-color: hsl(0, 0%, 13%);
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member.owner {
  color: hsl(0, 0%, 80%);
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .account {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 60px;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .account .initials {
  flex: 0 0 32px;
  display: inline-block;
  background-color: var(--bgcolour);
  color: hsl(0, 0%, 20%);
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .account .nameContainer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .account .nameContainer .displayname {
  font-size: 14px;
  color: hsl(0, 0%, 80%);
  line-height: initial;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .account .nameContainer .jobtitle {
  font-size: 12px;
  color: hsl(0, 0%, 40%);
  line-height: initial;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .account .email {
  height: 30px;
  min-width: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: italic;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .role {
  flex: 0 0 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .type {
  flex: 0 0 90px;
  text-align: center;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .delete, .dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .delete_empty {
  height: 30px;
  flex: 0 0 32px;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .delete {
  cursor: pointer;
  background-image: url("/images/bin-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px;
  border-radius: 4px;
}
.dialogbg .dialog main .settingsContainer .emailsInvitesContainer .member .delete:hover {
  background-image: url("/images/bin-icon-hover.svg");
  background-color: hsl(0, 0%, 20%);
}
.dialogbg .dialog main .changed {
  outline: 1px solid var(--blue-base-colour);
  transition: outline var(--animation-speed-fast);
}
.dialogbg .dialog main .membersContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 24px 0px;
  max-height: 60vh;
  overflow: auto;
}
.dialogbg .dialog main .membersContainer .member {
  gap: 4px;
  display: flex;
  padding: 4px;
  border-radius: 8px;
}
.dialogbg .dialog main .membersContainer .member.disabled {
  background-color: hsl(0, 0%, 10%);
}
.dialogbg .dialog main .membersContainer .member.disabled .displayname, .dialogbg .dialog main .membersContainer .member.disabled .type, .dialogbg .dialog main .membersContainer .member.disabled .role {
  pointer-events: none;
}
.dialogbg .dialog main .membersContainer .member.disabled .account, .dialogbg .dialog main .membersContainer .member.disabled .role {
  opacity: 0.5;
}
.dialogbg .dialog main .membersContainer .member.disabled .delete {
  cursor: pointer;
  background-image: url("/images/add-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 10%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .dialog main .membersContainer .member.disabled .delete:hover {
  background-image: url("/images/add-icon-hover.svg");
  background-color: hsl(0, 0%, 13%);
}
.dialogbg .dialog main .membersContainer .member.owner {
  pointer-events: none;
  color: hsl(0, 0%, 80%);
}
.dialogbg .dialog main .membersContainer .member .account {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 60px;
}
.dialogbg .dialog main .membersContainer .member .account .initials {
  flex: 0 0 32px;
  display: inline-block;
  background-color: var(--bgcolour);
  color: hsl(0, 0%, 20%);
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dialogbg .dialog main .membersContainer .member .account .nameContainer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.dialogbg .dialog main .membersContainer .member .account .nameContainer .displayname {
  font-size: 14px;
  color: hsl(0, 0%, 80%);
}
.dialogbg .dialog main .membersContainer .member .account .nameContainer .jobtitle, .dialogbg .dialog main .membersContainer .member .account .nameContainer .email {
  color: hsl(0, 0%, 40%);
  font-size: 12px;
}
.dialogbg .dialog main .membersContainer .member .role {
  flex: 0 0 100px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.dialogbg .dialog main .membersContainer .member .role:last-child {
  text-align: right;
  margin-right: 8px;
}
.dialogbg .dialog main .membersContainer .member .type {
  flex: 0 0 90px;
  text-align: center;
}
.dialogbg .dialog main .membersContainer .member .delete, .dialogbg .dialog main .membersContainer .member .delete_empty {
  height: 30px;
  flex: 0 0 32px;
}
.dialogbg .dialog main .membersContainer .member .delete {
  cursor: pointer;
  background-image: url("/images/bin-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 15%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .dialog main .membersContainer .member .delete:hover {
  background-image: url("/images/bin-icon-hover.svg");
  background-color: hsl(0, 0%, 20%);
}
.dialogbg .dialog main .addMemberContainer {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dialogbg .dialog main .addMemberContainer label {
  cursor: pointer;
}
.dialogbg .dialog main .videoContainer {
  position: relative;
  width: 720px;
  height: 405px;
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: fit-content;
}
.dialogbg .dialog main .videoContainer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dialogbg .dialog main .videoContainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
.dialogbg .dialog main .textContainer {
  max-width: 720px;
  text-align: justify;
}
.dialogbg .dialog main .storageControlsContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.dialogbg .dialog main .storageControlsContainer .totalStorage {
  font-size: 36px;
  color: hsl(0, 0%, 100%);
  width: 115px;
  text-align: center;
  transition: color var(--animation-speed-medium);
}
.dialogbg .dialog main .storageControlsContainer .totalStorage.decreased {
  color: var(--blue-base-colour);
}
.dialogbg .dialog main .storageControlsContainer .totalStorage.increased {
  color: hsl(80, 50%, 50%);
}
.dialogbg .dialog main .storageControlsContainer .totalStorage.invalid {
  color: hsl(0, 80%, 50%);
}
.dialogbg .dialog main .storageControlsContainer button {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  padding: 0;
  font-weight: bold;
}
.dialogbg .dialog main .description {
  max-width: 640px;
  font-size: 12px;
  color: hsl(0, 0%, 60%);
  text-align: center;
  margin-bottom: -8px;
}
.dialogbg .dialog main .storagePriceCalculationContainer {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px 0;
  align-items: center;
  text-align: center;
  background-color: hsl(0, 0%, 15%);
  padding: 16px;
  border-radius: 8px;
}
.dialogbg .dialog main .storagePriceCalculationContainer .storagePriceCalculationText {
  color: hsl(0, 0%, 80%);
}
.dialogbg .dialog main .footnote {
  max-width: 640px;
  font-size: 12px;
  font-style: italic;
  color: hsl(0, 0%, 60%);
  text-align: center;
}
.dialogbg .dialog .verificationForm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  transition: opacity var(--animation-speed-medium);
}
.dialogbg .dialog .verificationForm input[type=number] {
  width: 30px;
  text-align: center;
}
.dialogbg .dialog .verificationForm .primary {
  width: 100%;
}
.dialogbg .dialog .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 2px;
}
.dialogbg .dialog .container.horizontal {
  flex-direction: row;
  align-items: center;
}
.dialogbg .dialog .container.horizontal * {
  margin-bottom: 0px;
  margin-right: 8px;
}
.dialogbg .dialog .container.horizontal :last-child {
  margin-bottom: 0px;
  margin-right: 0px;
}
.dialogbg .dialog .container * {
  margin-right: 0px;
  margin-bottom: 8px;
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium), width var(--animation-speed-medium), height var(--animation-speed-medium), margin var(--animation-speed-medium), opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}
.dialogbg .dialog .container :last-child {
  margin-right: 0px;
  margin-bottom: 0px;
}
.dialogbg .dialog .numbersContainer {
  display: flex;
  width: calc(100% - 4px);
  gap: 5px;
  padding: 2px;
}
.dialogbg .dialog footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}
.dialogbg .planUpgrade {
  width: 840px;
  height: 560px;
  max-width: initial;
  display: flex;
  flex-direction: row;
  padding: 0px;
  gap: 0px;
}
.dialogbg .planUpgrade .leftSide {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  flex: 0 0 420px;
  background-image: url("/images/plan-upgrade-bg.jpg");
}
.dialogbg .planUpgrade .rightSide {
  flex: 0 0 372px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.dialogbg .planUpgrade .rightSide h1 {
  font-family: "aptos-semibold";
  font-size: 39px;
}
.dialogbg .planUpgrade .rightSide .closeButton {
  align-self: flex-end;
  cursor: pointer;
}
.dialogbg .planUpgrade .rightSide .description {
  width: calc(100% - 48px);
  margin: 8px 0px 24px 0px;
  font-size: 19px;
}
.dialogbg .planUpgrade .rightSide .list {
  font-size: 16px;
  flex: 1 1 auto;
}
.dialogbg .planUpgrade .rightSide .list .item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dialogbg .planUpgrade .rightSide .list .item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("/images/check-icon.svg") no-repeat center center;
  background-size: 12px;
}
.dialogbg .planUpgrade .rightSide .footnote {
  margin-bottom: 16px;
  font-size: 15px;
}
.dialogbg .planUpgrade .rightSide .getUpgradedButton {
  width: 100%;
  height: 36px;
  line-height: 36px;
  background-color: var(--blue-base-colour);
}
.dialogbg .planUpgrade .rightSide .getUpgradedButton:hover {
  background-color: var(--blue-bright-colour);
}

.dialogbg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(10px) brightness(0.65);
  backdrop-filter: blur(10px) brightness(0.65);
  z-index: 100;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dialogbg .windowContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 96px);
  height: calc(100% - 96px);
  position: relative;
}
.dialogbg .windowContainer.showMore .uploadingDialog {
  opacity: 1;
  width: 300px;
  flex: 0 0 300px;
  margin-left: 8px;
  padding: 12px;
}
.dialogbg .windowContainer.showMore .showMoreButton {
  transform: rotate(-90deg) !important;
}
.dialogbg .windowContainer .jobContainer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 16px;
  height: 38px;
  border-radius: 8px;
}
.dialogbg .windowContainer .jobContainer .infoContainer {
  flex: 1 1 auto;
  display: flex;
}
.dialogbg .windowContainer .jobContainer .infoContainer .description {
  flex: 1 1 auto;
  color: hsl(0, 0%, 80%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dialogbg .windowContainer .jobContainer .infoContainer .state {
  flex: 0 0 88px;
  text-align: right;
}
.dialogbg .windowContainer .jobContainer .progress {
  flex: 1 1 auto;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--blue-base-colour) calc(var(--progress)), hsl(0, 0%, 20%) 0);
}
.dialogbg .windowContainer .jobContainer .infiniteLoading {
  overflow: hidden;
  position: relative;
}
.dialogbg .windowContainer .jobContainer .infiniteLoading::before {
  content: "";
  width: 30%;
  height: 100%;
  background-color: var(--blue-base-colour);
  position: absolute;
  top: 0;
  left: -30%;
  animation: slide 2s linear infinite;
}
@keyframes slide {
  0% {
    left: -30%;
  }
  100% {
    left: 100%;
  }
}
.dialogbg .windowContainer .projectSettingsDialog {
  width: 375px;
  flex: 0 0 375px;
  padding: 24px;
  margin-right: 8px;
  height: calc(100% - 48px);
  border-radius: 8px;
  background-color: hsl(0, 0%, 12%);
  box-shadow: 0px 0px 8px hsl(0, 0%, 10%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: default;
}
.dialogbg .windowContainer .projectSettingsDialog.editProject {
  height: fit-content;
  max-height: calc(100% - 48px);
}
.dialogbg .windowContainer .projectSettingsDialog.editVersions {
  width: 600px;
  flex: 0 0 600px;
  height: fit-content;
  max-height: calc(100% - 48px);
}
.dialogbg .windowContainer .projectSettingsDialog.editVersions .title, .dialogbg .windowContainer .projectSettingsDialog.editVersions .client, .dialogbg .windowContainer .projectSettingsDialog.editVersions .icon {
  cursor: default !important;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer {
  display: flex;
  justify-content: center;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card {
  width: 180px;
  aspect-ratio: 0.8/1;
  border-radius: 12px;
  box-sizing: content-box;
  background: var(--cover-url) center no-repeat;
  background-size: 36px;
  background-color: hsl(0, 0%, 18%);
  display: flex;
  flex-direction: column;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card.dragover {
  outline: 1px dashed var(--blue-base-colour);
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .header {
  display: none;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .icon {
  flex: 1 1 auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 36px;
  background-image: url("/images/project-icon-add.svg");
  cursor: pointer;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .textContainer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0px 16px 16px 16px;
  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.8));
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .textContainer .title, .dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .textContainer .client {
  flex: 0 0 auto;
  text-shadow: 0px 0px 8px black;
  white-space: nowrap;
  overflow: hidden;
  cursor: text;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .textContainer .title {
  color: hsl(0, 0%, 100%);
  font-family: "aptos-bold";
  font-size: 16px;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card .textContainer .client {
  color: hsl(0, 0%, 80%);
  font-family: "aptos-semibold";
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card.cover {
  background-image: var(--cover-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card.cover .header {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card.cover .header .deleteButton {
  cursor: pointer;
  padding: 6px;
  margin: 8px;
  border-radius: 4px;
  background: hsla(0, 0%, 20%, 0.8);
  transition: background var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card.cover .header .deleteButton:hover {
  background: hsla(0, 0%, 30%, 0.8);
}
.dialogbg .windowContainer .projectSettingsDialog .cardContainer .card.cover .icon {
  background-image: none;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .membersTitleContainer {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding: 4px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .membersTitleContainer .membersTitle {
  flex: 1 1 auto;
  font-size: 16px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .membersTitleContainer .membersSettings {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url("/images/hamburger-icon.svg") center no-repeat;
  background-size: 10px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .membersTitleContainer .membersSettings:hover {
  background-color: hsl(0, 0%, 20%);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 473px);
  overflow: auto;
  gap: 4px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member {
  gap: 4px;
  display: flex;
  padding: 4px;
  border-radius: 8px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled {
  background-color: hsl(0, 0%, 10%);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .displayname, .dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .type, .dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .role {
  pointer-events: none;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .account, .dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .role {
  opacity: 0.5;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .delete {
  cursor: pointer;
  background-image: url("/images/add-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 10%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.disabled .delete:hover {
  background-image: url("/images/add-icon-hover.svg");
  background-color: hsl(0, 0%, 13%);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member.owner {
  pointer-events: none;
  color: hsl(0, 0%, 80%);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .account {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 60px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .account .initials {
  flex: 0 0 32px;
  display: inline-block;
  background-color: var(--bgcolour);
  color: hsl(0, 0%, 20%);
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .account .nameContainer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .account .nameContainer .displayname {
  font-size: 14px;
  color: hsl(0, 0%, 80%);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .account .nameContainer .jobtitle, .dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .account .nameContainer .email {
  color: hsl(0, 0%, 40%);
  font-size: 12px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .role {
  flex: 0 0 70px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .role:last-child {
  text-align: right;
  margin-right: 8px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .type {
  flex: 0 0 90px;
  text-align: center;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .delete, .dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .delete_empty {
  height: 30px;
  flex: 0 0 32px;
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .delete {
  cursor: pointer;
  background-image: url("/images/bin-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 15%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .membersContainer .members .member .delete:hover {
  background-image: url("/images/bin-icon-hover.svg");
  background-color: hsl(0, 0%, 20%);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versionsTitleContainer {
  display: flex;
  height: 30px;
  line-height: 30px;
  padding: 4px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versionsTitleContainer .versionsTitle {
  flex: 1 1 auto;
  font-size: 16px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versionsTitleContainer .versionsSettings {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url("/images/hamburger-icon.svg") center no-repeat;
  background-size: 10px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versionsTitleContainer .versionsSettings:hover {
  background-color: hsl(0, 0%, 20%);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 473px);
  overflow: auto;
  gap: 4px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version {
  gap: 4px;
  display: flex;
  padding: 4px;
  border-radius: 8px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled {
  background-color: hsl(0, 0%, 10%);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .displayname, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .versionDescription {
  pointer-events: none;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .account, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .role, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .versionName, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .versionDescription, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .versionSize, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .versionDate {
  opacity: 0.5;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .delete {
  cursor: pointer;
  background-image: url("/images/add-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 10%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version.disabled .delete:hover {
  background-image: url("/images/add-icon-hover.svg");
  background-color: hsl(0, 0%, 13%);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .versionName {
  line-height: 31px;
  flex: 0 0 31px;
  color: hsl(0, 0%, 80%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .versionDescription {
  flex: 1 1 auto;
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
  border: none;
  border-radius: 4px;
  padding: 0 4px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .versionDescription.changed {
  outline: 1px solid var(--blue-base-colour);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .versionSize {
  flex: 0 0 70px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .versionDate {
  flex: 0 0 70px;
  text-align: center;
  font-size: 12px;
  color: hsl(0, 0%, 80%);
  line-height: 15px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .account {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  min-width: 60px;
  padding: 0 8px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .account .initials {
  flex: 0 0 32px;
  display: inline-block;
  background-color: var(--bgcolour);
  color: hsl(0, 0%, 20%);
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .account .nameContainer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .account .nameContainer .displayname {
  font-size: 14px;
  color: hsl(0, 0%, 80%);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .account .nameContainer .jobtitle, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .account .nameContainer .email {
  color: hsl(0, 0%, 40%);
  font-size: 12px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .role {
  flex: 0 0 60px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .role:last-child {
  text-align: right;
  margin-right: 8px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .type {
  flex: 0 0 90px;
  text-align: center;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .delete, .dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .delete_empty {
  height: 30px;
  flex: 0 0 32px;
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .delete {
  cursor: pointer;
  background-image: url("/images/bin-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: hsl(0, 0%, 15%);
  background-size: 16px;
  border-radius: 4px;
  transition: background-color var(--animation-speed-medium);
}
.dialogbg .windowContainer .projectSettingsDialog .versionsContainer .versions .version .delete:hover {
  background-image: url("/images/bin-icon-hover.svg");
  background-color: hsl(0, 0%, 20%);
}
.dialogbg .windowContainer .projectSettingsDialog .buttonsContainer {
  display: flex;
  justify-content: flex-end;
}
.dialogbg .windowContainer .uploaderDialog {
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  padding: 24px;
  border-radius: 8px;
  background-color: hsl(0, 0%, 12%);
  box-shadow: 0px 0px 8px hsl(0, 0%, 10%);
  display: flex;
  gap: 8px;
  flex-direction: column;
  color: hsl(0, 0%, 60%);
  cursor: default;
  position: relative;
  transition: opacity var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog .loading {
  top: 0;
}
.dialogbg .windowContainer .uploaderDialog.uploading header, .dialogbg .windowContainer .uploaderDialog.uploading main {
  filter: grayscale(1) blur(5px);
  cursor: wait !important;
  pointer-events: none;
}
.dialogbg .windowContainer .uploaderDialog.uploading header header, .dialogbg .windowContainer .uploaderDialog.uploading header main, .dialogbg .windowContainer .uploaderDialog.uploading main header, .dialogbg .windowContainer .uploaderDialog.uploading main main {
  opacity: 0.25;
}
.dialogbg .windowContainer .uploaderDialog header {
  display: flex;
  justify-content: space-between;
  flex: 0 0 50px;
  transition: opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 50px;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer {
  display: flex;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer h1 {
  cursor: text;
  padding-right: 30px;
  position: relative;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100% - 60px);
  width: fit-content;
  height: 30px;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer h1::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("/images/pencil-icon.svg");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer h1:hover::after {
  opacity: 0.75;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer h2 {
  cursor: text;
  padding-right: 30px;
  position: relative;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100% - 60px);
  width: fit-content;
  height: 30px;
  line-height: 30px;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer h2::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("/images/pencil-icon.svg");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .titleClientContainer h2:hover::after {
  opacity: 0.75;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .versionContainer {
  display: flex;
  gap: 4px;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .versionContainer .separator {
  color: hsl(0, 0%, 40%);
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .versionContainer .versionDescription {
  color: hsl(0, 0%, 80%);
  font-family: "aptos";
  width: fit-content;
  cursor: text;
  padding-right: 20px;
  position: relative;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: calc(100% - 40px);
  height: 22px;
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .versionContainer .versionDescription::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("/images/pencil-icon.svg");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog header .headerLeft .versionContainer .versionDescription:hover::after {
  opacity: 0.6;
}
.dialogbg .windowContainer .uploaderDialog header .headerRight {
  flex: 0 0 24px;
  height: 50px;
}
.dialogbg .windowContainer .uploaderDialog header .headerRight .closeButton {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog header .headerRight .closeButton:hover {
  opacity: 1;
}
.dialogbg .windowContainer .uploaderDialog main {
  flex: 1 1 auto;
  border-radius: 8px;
  outline: 1px dashed transparent;
  overflow: hidden;
  position: relative !important;
  height: 100%;
  transition: outline var(--animation-speed-fast), opacity var(--animation-speed-medium), filter var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog main .createContainer {
  margin: 0px;
  height: 100%;
}
.dialogbg .windowContainer .uploaderDialog main .emptyMessage {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.dialogbg .windowContainer .uploaderDialog main.dragover {
  outline: 1px dashed var(--blue-base-colour);
}
.dialogbg .windowContainer .uploaderDialog footer {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
}
.dialogbg .windowContainer .uploaderDialog footer .jobContainer {
  flex: 1 1 auto;
  padding: 0px;
}
.dialogbg .windowContainer .uploaderDialog footer .showMoreButton {
  width: 8px;
  padding: 0px;
  background: url("/images/chevron-down.svg") center no-repeat;
  transform: rotate(90deg);
  transition: transform var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploaderDialog footer .showMoreButton:disabled {
  opacity: 0.5;
}
.dialogbg .windowContainer .uploadingDialog {
  opacity: 0;
  flex: 0 0 0px;
  margin-left: 0px;
  padding: 12px 0px;
  width: 0px;
  height: calc(100% - 24px);
  border-radius: 8px;
  background-color: hsl(0, 0%, 12%);
  box-shadow: 0px 0px 8px hsl(0, 0%, 10%);
  transition: flex var(--animation-speed-medium), margin var(--animation-speed-medium), padding var(--animation-speed-medium), width var(--animation-speed-medium), opacity var(--animation-speed-medium);
}
.dialogbg .windowContainer .uploadingDialog .jobsContainer {
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}
.dialogbg .windowContainer .uploadingDialog .jobsContainer .jobContainer {
  background-color: hsl(0, 0%, 15%);
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.dialogbg .windowContainer .uploadingDialog .jobsContainer .jobContainer.finished {
  background-color: hsl(0, 0%, 10%);
}
.dialogbg .windowContainer .uploadingDialog .jobsContainer .jobContainer.finished .progress {
  background: hsl(0, 0%, 12%);
}
.dialogbg .windowContainer .uploadingDialog .jobsContainer .jobContainer .infoContainer {
  flex: 1 1 auto;
  width: 100%;
}
.dialogbg .windowContainer .uploadingDialog .jobsContainer .jobContainer .progress {
  flex: 0 0 2px;
}

.dropdown {
  height: 100%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  height: auto;
  border-radius: 4px;
  outline: 1px solid hsl(0, 0%, 30%);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
  transition: filter var(--animation-speed-medium), outline var(--animation-speed-medium);
}
.dropdown:hover .dropdown-default {
  background-color: hsl(0, 0%, 20%);
}
.dropdown:hover .dropdown-default .dropdown-title {
  color: hsl(0, 0%, 80%);
}
.dropdown.closed {
  outline: 1px solid hsl(0, 0%, 20%);
  filter: none;
}
.dropdown :first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.dropdown :last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dropdown .dropdown-default {
  display: flex;
  background-color: hsl(0, 0%, 20%);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  transition: border-bottom-left-radius var(--animation-speed-medium), border-bottom-right-radius var(--animation-speed-medium), background-color var(--animation-speed-medium);
}
.dropdown .dropdown-default.closed {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: hsl(0, 0%, 15%);
}
.dropdown .dropdown-default .dropdown-default-title {
  flex: 1 1 auto;
  text-align: left;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 8px;
  transition: color var(--animation-speed-medium);
}
.dropdown .dropdown-default .dropdown-default-icon {
  flex: 0 0 30px;
  background-image: url("../images/chevron-down.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px;
}
.dropdown .dropdown-item {
  display: flex;
  background-color: hsl(0, 0%, 15%);
  height: 30px;
  transition: height var(--animation-speed-medium), background-color var(--animation-speed-medium), color var(--animation-speed-medium);
}
.dropdown .dropdown-item:hover {
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
}
.dropdown .dropdown-item.closed {
  height: 0px;
}
.dropdown .dropdown-item.closed .dropdown-item-title {
  opacity: 0.1;
}
.dropdown .dropdown-item.selected {
  color: hsl(0, 0%, 90%);
}
.dropdown .dropdown-item .dropdown-item-title {
  flex: 1 1 auto;
  text-align: left;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 8px;
  transition: opacity var(--animation-speed-medium);
}
.dropdown .dropdown-item .dropdown-item-subtitle {
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--animation-speed-medium);
}
.dropdown .dropdown-item .dropdown-item-icon {
  flex: 0 0 30px;
}

.activity-component {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: hsl(0, 0%, 20%);
  border: 1px solid hsl(0, 0%, 25%);
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  background-color: hsla(0, 0%, 12%, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 8px;
  max-height: min(100vh - 122px, 517px);
  align-items: flex-end;
}
.activity-component .activity-component-no-activity {
  width: 350px;
  outline: 1px dashed hsl(0, 0%, 25%);
  border-radius: 4px;
  height: 42px;
  line-height: 42px;
  text-align: center;
}
.activity-component .mark-all-read {
  cursor: pointer;
  background: url("/images/mark-all-as-read-icon.svg") no-repeat left center;
  background-size: 16px;
  padding-left: 24px;
  transition: color var(--animation-speed-medium);
}
.activity-component .mark-all-read:hover {
  color: hsl(0, 0%, 100%);
}
.activity-component .activities-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  gap: 8px;
}
.activity-component .activities-container .activity-component-item {
  display: flex;
  align-items: center;
  width: 350px;
  height: 36px;
  border-radius: 4px;
  color: hsl(0, 0%, 60%);
  position: relative;
  cursor: pointer;
  transition: background var(--animation-speed-medium);
}
.activity-component .activities-container .activity-component-item .highlight {
  color: hsl(0, 0%, 80%);
}
.activity-component .activities-container .activity-component-item .activity-component-item-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  background-size: 16px;
}
.activity-component .activities-container .activity-component-item .activity-component-item-icon.project {
  background: url("/images/project-icon.svg") no-repeat center center;
  background-size: 16px;
}
.activity-component .activities-container .activity-component-item .activity-component-item-icon.link {
  background: url("/images/links-icon.svg") no-repeat center center;
  background-size: 16px;
}
.activity-component .activities-container .activity-component-item .activity-component-item-text-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}
.activity-component .activities-container .activity-component-item .activity-component-item-text-container .activity-component-item-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: visible;
}
.activity-component .activities-container .activity-component-item .activity-component-item-text-container .activity-component-item-time {
  font-size: 12px;
  color: hsl(0, 0%, 40%);
}
.activity-component .activities-container .activity-component-item.unread::after {
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background-color: var(--blue-base-colour);
  border-radius: 50%;
}
.activity-component .activities-container .activity-component-item:hover {
  background-color: hsl(0, 0%, 25%);
}
.activity-component .all-activity-button {
  width: 100%;
  height: 36px;
  border-radius: 4px;
}
@media screen and (max-width: 650px) {
  .activity-component {
    right: 8px !important;
  }
  .activity-component .activity-component-no-activity, .activity-component .activity-component-item {
    width: calc(100vw - 32px) !important;
  }
}

.context-menu {
  --context-item-width: 232px;
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background-color: hsl(0, 0%, 20%);
  border: 1px solid hsl(0, 0%, 25%);
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  background-color: hsla(0, 0%, 12%, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 4px;
  gap: 2px;
}
.context-menu .context-menu-item {
  flex: 0 0 auto;
  min-height: 30px;
  line-height: 30px;
  padding: 0px 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  width: var(--context-item-width);
  align-items: center;
}
.context-menu .context-menu-item:hover, .context-menu .context-menu-item.checked {
  background-color: hsla(0, 0%, 20%, 0.95);
}
.context-menu .context-menu-item .context-menu-item-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}
.context-menu .context-menu-item .context-menu-item-icon.settings {
  background-image: url("/images/settings-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.help {
  background-image: url("/images/help-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.support {
  background-image: url("/images/support-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.feedback {
  background-image: url("/images/feedback-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.changelog {
  background-image: url("/images/changelog-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.videotutorials {
  background-image: url("/images/videotutorials-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.reviewworkflow {
  background-image: url("/images/review-workflow-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.getfeedback {
  background-image: url("/images/links-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.plan {
  background-image: url("/images/plan-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.company {
  background-image: url("/images/company-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.signout {
  background-image: url("/images/signout-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.public {
  background-image: url("/images/public-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.private {
  background-image: url("/images/private-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.terms {
  background-image: url("/images/terms-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.privacy {
  background-image: url("/images/privacy-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.tutorialGettingStarted {
  background-image: url("/images/tutorial-getting-started-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.tutorialAdvancedUploads {
  background-image: url("/images/tutorial-advanced-uploads-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.activity {
  background-image: url("/images/activity-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.leave {
  background-image: url("/images/leave-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.delete {
  background-image: url("/images/delete-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.archive {
  background-image: url("/images/archive-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.restore {
  background-image: url("/images/restore-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.edit {
  background-image: url("/images/edit-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.link {
  background-image: url("/images/links-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.projectcover {
  background-image: url("/images/commentTools-inline-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.open {
  background-image: url("/images/project-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.copy {
  background-image: url("/images/copy-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.pin {
  background-image: url("/images/pin-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.versions {
  background-image: url("/images/versions-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.versions-add {
  background-image: url("/images/versions-add-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.folder {
  background-image: url("/images/folder-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.project {
  background-image: url("/images/project-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.team {
  background-image: url("/images/team-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.sortNameAsc {
  background-image: url("/images/sort-name-asc-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.sortNameDesc {
  background-image: url("/images/sort-name-desc-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.sortDateAsc {
  background-image: url("/images/sort-date-asc-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.sortDateDesc {
  background-image: url("/images/sort-date-desc-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.sortSizeAsc {
  background-image: url("/images/sort-size-asc-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.sortSizeDesc {
  background-image: url("/images/sort-size-desc-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.role1 {
  background-image: url("/images/role1-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.role2 {
  background-image: url("/images/role2-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.role3 {
  background-image: url("/images/role3-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.mark-as-unread {
  background-image: url("/images/mark-as-unread-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.mark-as-read {
  background-image: url("/images/mark-as-read-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-icon.mark-all-as-read {
  background-image: url("/images/mark-all-as-read-icon.svg");
}
.context-menu .context-menu-item .context-menu-item-avatar {
  flex: 0 0 24px;
  font-weight: initial;
  font-size: 9px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
}
.context-menu .context-menu-item .context-menu-item-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.context-menu .context-menu-item .context-menu-item-container .context-menu-item-text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.context-menu .context-menu-item .context-menu-item-container .context-menu-item-text.upgrade-label::after {
  content: "💎 Upgrade Plan";
  background-color: hsl(0, 0%, 20%);
  color: var(--blue-base-colour);
  border-radius: 4px;
  margin-left: 8px;
  padding: 4px 8px 4px 4px;
  font-size: 12px;
}
.context-menu .context-menu-item .context-menu-item-container .context-menu-item-description {
  width: 100%;
  font-size: 12px;
  color: hsl(0, 0%, 60%);
  line-height: 16px;
  padding-bottom: 4px;
}
.context-menu .context-menu-item .context-menu-item-shortcut {
  flex: 0 0 75px;
  width: 75px;
  text-align: right;
  padding-right: 8px;
}
.context-menu .context-menu-submenu-chevron {
  position: relative;
}
.context-menu .context-menu-submenu-chevron::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 8px;
  width: 8px;
  height: 30px;
  background: url("/images/chevron-right.svg") no-repeat center right;
  background-size: 6px;
}
.context-menu .context-menu-separator {
  height: 1px;
  background-color: hsl(0, 0%, 25%);
  margin: 4px;
}
.context-menu .context-menu-header {
  color: hsl(0, 0%, 60%);
  padding: 4px;
}

.tooltip {
  max-width: 250px;
  position: absolute;
  background: hsl(0, 0%, 20%);
  padding: 6px;
  border-radius: 4px;
  font-size: 12px;
  filter: drop-shadow(0px 0px 8px hsla(0, 0%, 0%, 0.25));
  transform: translate(-50%, -100%);
}

.reactionsMenu {
  position: absolute;
  display: flex;
  font-size: 20px;
  background: hsl(0, 0%, 20%);
  padding: 4px;
  border-radius: 8px;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25));
}
.reactionsMenu .reactionItem {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 2px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: background-color var(--animation-speed-medium);
}
.reactionsMenu .reactionItem:hover, .reactionsMenu .reactionItem.selected {
  background-color: hsl(0, 0%, 30%);
}

.empty-space {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.empty-space .main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.empty-space .main-container .projects, .empty-space .main-container .deleted, .empty-space .main-container .archive, .empty-space .main-container .links, .empty-space .main-container .external-links, .empty-space .main-container .uploader, .empty-space .main-container .company, .empty-space .main-container .activity {
  width: 40px;
  height: 40px;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
}
.empty-space .main-container .projects, .empty-space .main-container .uploader {
  background-image: url("/images/project-icon.svg");
}
.empty-space .main-container .deleted {
  background-image: url("/images/deleted-icon.svg");
}
.empty-space .main-container .archive {
  background-image: url("/images/archive-icon.svg");
}
.empty-space .main-container .links {
  background-image: url("/images/links-icon.svg");
}
.empty-space .main-container .external-links {
  background-image: url("/images/external-links-icon-hover.svg");
}
.empty-space .main-container .company {
  background-image: url("/images/company-bright-icon.svg");
}
.empty-space .main-container .activity {
  background-image: url("/images/activity-bright-icon.svg");
}
.empty-space .main-container .title {
  font-family: "aptos-bold";
  font-size: 16px;
  margin-top: 16px;
}
.empty-space .main-container .subtitle {
  color: hsl(0, 0%, 60%);
  text-align: center;
}
.empty-space .main-container .secondary {
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  margin-top: 16px;
}
.empty-space .main-container .button-container {
  display: flex;
  margin-top: 16px;
  align-items: center;
  gap: 8px;
}
.empty-space .main-container .button-container button {
  margin: 0;
}

.projects, .links, .dragPreview {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.projects.dragover, .links.dragover, .dragPreview.dragover {
  outline: 1px dashed var(--blue-base-colour);
}
.projects .newProject.dragover, .projects .project.dragover, .projects .link.dragover, .links .newProject.dragover, .links .project.dragover, .links .link.dragover, .dragPreview .newProject.dragover, .dragPreview .project.dragover, .dragPreview .link.dragover {
  outline: 1px dashed var(--blue-base-colour);
}
.projects .newProject:hover, .projects .newProject.selected, .projects .project:hover, .projects .project.selected, .projects .link:hover, .projects .link.selected, .links .newProject:hover, .links .newProject.selected, .links .project:hover, .links .project.selected, .links .link:hover, .links .link.selected, .dragPreview .newProject:hover, .dragPreview .newProject.selected, .dragPreview .project:hover, .dragPreview .project.selected, .dragPreview .link:hover, .dragPreview .link.selected {
  background-color: hsl(0, 0%, 16%);
}
.projects .newProject.selected, .projects .project.selected, .projects .link.selected, .links .newProject.selected, .links .project.selected, .links .link.selected, .dragPreview .newProject.selected, .dragPreview .project.selected, .dragPreview .link.selected {
  border: 1px solid var(--blue-base-colour);
}
.projects .newProject.hovered, .projects .project.hovered, .projects .link.hovered, .links .newProject.hovered, .links .project.hovered, .links .link.hovered, .dragPreview .newProject.hovered, .dragPreview .project.hovered, .dragPreview .link.hovered {
  border: 1px solid var(--blue-base-colour);
}
.projects .header, .links .header, .dragPreview .header {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "aptos-bold";
}
.projects .header .icon, .links .header .icon, .dragPreview .header .icon {
  background-image: url("/images/header-icon.svg");
}
.projects .project .icon, .links .project .icon, .dragPreview .project .icon {
  background-image: url("/images/project-icon.svg");
}
.projects .link .icon, .links .link .icon, .dragPreview .link .icon {
  background-image: url("/images/links-icon.svg");
}
.projects .company .icon, .links .company .icon, .dragPreview .company .icon {
  background-image: url("/images/company-icon.svg");
}

.dragPreview {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  width: fit-content;
  height: fit-content;
  top: -9999px;
}
.dragPreview .counter {
  position: absolute;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-family: "aptos";
  width: 50px;
}
.dragPreview.iconView .counter {
  width: 165px;
  height: 165px;
}
.dragPreview.listView .counter {
  width: calc(100% - 20px);
  height: 25px;
}

.gridView {
  display: grid !important;
  grid-auto-rows: max-content;
  gap: 8px;
}
.gridView .header {
  display: none;
}
.gridView .newProject, .gridView .project, .gridView .link {
  aspect-ratio: 0.8;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border: 1px solid transparent;
  background-color: hsl(0, 0%, 14%);
  cursor: pointer;
  box-sizing: content-box;
  transition: background-color var(--animation-speed-fast), border var(--animation-speed-fast);
}
.gridView .newProject .head, .gridView .project .head, .gridView .link .head {
  height: 41px;
  flex: 0 0 auto;
  order: 1;
  display: flex;
  justify-content: flex-end;
}
.gridView .newProject .head .label, .gridView .project .head .label, .gridView .link .head .label {
  width: fit-content;
  padding: 4px 8px;
  margin: 8px;
  border-radius: 4px;
  background: hsla(0, 0%, 20%, 0.8);
  position: relative;
  color: hsl(0, 0%, 100%);
}
.gridView .newProject .icon, .gridView .project .icon, .gridView .link .icon {
  order: 2;
  flex: 1 1 auto;
  background-position: center center;
  background-repeat: no-repeat;
}
.gridView .newProject .title, .gridView .project .title, .gridView .link .title {
  order: 3;
  flex: 0 0 auto;
  color: hsl(0, 0%, 100%);
  padding: 0px 16px;
  font-size: 16px;
  font-family: "aptos-bold";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0px 0px 8px black;
  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15));
}
.gridView .newProject .clientname, .gridView .project .clientname, .gridView .link .clientname {
  order: 4;
  flex: 0 0 auto;
  color: hsl(0, 0%, 80%);
  padding: 0px 16px 16px 16px;
  font-family: "aptos-semibold";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0px 0px 8px black;
  background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.15), hsla(0, 0%, 0%, 0.3));
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transform: translateZ(0);
}
.gridView .newProject .private, .gridView .newProject .creator, .gridView .newProject .size, .gridView .newProject .date, .gridView .project .private, .gridView .project .creator, .gridView .project .size, .gridView .project .date, .gridView .link .private, .gridView .link .creator, .gridView .link .size, .gridView .link .date {
  display: none;
}
.gridView .newTeam {
  background: hsl(0, 0%, 18%) url("/images/add-icon.svg") no-repeat center;
}
.gridView .newProject {
  background: hsl(0, 0%, 18%) url("/images/add-icon.svg") no-repeat center;
}
.gridView .team .icon {
  background-size: 30px;
}
.gridView .folder .icon {
  background-size: 36px;
}
.gridView .link .icon {
  background-size: 36px;
}
.gridView .link.cover {
  background-image: var(--cover-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.8);
  transition: filter var(--animation-speed-medium);
}
.gridView .link.cover:hover, .gridView .link.cover.selected, .gridView .link.cover.dragover {
  filter: unset;
}
.gridView .link.cover .icon {
  background-image: none;
}
.gridView .link .head .label {
  background-color: var(--blue-base-colour);
  color: hsl(0, 0%, 0%);
}
.gridView .project .icon {
  background-size: 36px;
}
.gridView .project.cover {
  background-image: var(--cover-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(0.8);
  transition: filter var(--animation-speed-medium);
}
.gridView .project.cover:hover, .gridView .project.cover.selected, .gridView .project.cover.dragover {
  filter: unset;
}
.gridView .project.cover .icon {
  background-image: none;
}

.listView {
  gap: 4px;
  display: flex;
  flex-direction: column;
}
.listView .header, .listView .newTeam, .listView .newProject, .listView .team, .listView .folder, .listView .project, .listView .link {
  padding: 0px 8px;
  flex: 0 0 30px;
  width: calc(100% - 18px);
  height: 30px;
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  border: 1px solid transparent;
  background-color: hsl(0, 0%, 12%);
  cursor: pointer;
  font-size: 12px;
  line-height: 30px;
  background-image: none !important;
  transition: background-color var(--animation-speed-fast), border var(--animation-speed-fast);
}
.listView .header .icon, .listView .newTeam .icon, .listView .newProject .icon, .listView .team .icon, .listView .folder .icon, .listView .project .icon, .listView .link .icon {
  flex: 0 0 30px;
  background-position: left center;
  background-repeat: no-repeat;
}
.listView .header .title, .listView .newTeam .title, .listView .newProject .title, .listView .team .title, .listView .folder .title, .listView .project .title, .listView .link .title {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.listView .header .clientname, .listView .newTeam .clientname, .listView .newProject .clientname, .listView .team .clientname, .listView .folder .clientname, .listView .project .clientname, .listView .link .clientname {
  display: none;
}
.listView .header .head, .listView .newTeam .head, .listView .newProject .head, .listView .team .head, .listView .folder .head, .listView .project .head, .listView .link .head {
  display: none;
}
.listView .header .private, .listView .newTeam .private, .listView .newProject .private, .listView .team .private, .listView .folder .private, .listView .project .private, .listView .link .private {
  flex: 0 0 75px;
  text-align: center;
}
.listView .header .creator, .listView .newTeam .creator, .listView .newProject .creator, .listView .team .creator, .listView .folder .creator, .listView .project .creator, .listView .link .creator {
  flex: 0 0 200px;
  text-align: center;
}
.listView .header .size, .listView .newTeam .size, .listView .newProject .size, .listView .team .size, .listView .folder .size, .listView .project .size, .listView .link .size {
  flex: 0 0 75px;
  text-align: center;
}
.listView .header .date, .listView .newTeam .date, .listView .newProject .date, .listView .team .date, .listView .folder .date, .listView .project .date, .listView .link .date {
  flex: 0 0 120px;
  text-align: right;
}
.listView .newTeam {
  background: hsl(0, 0%, 14%) url("/images/add-icon.svg") no-repeat center;
}
.listView .newProject {
  background: hsl(0, 0%, 14%) url("/images/add-icon.svg") no-repeat center;
}
.listView .header .title:hover, .listView .header .private:hover, .listView .header .creator:hover, .listView .header .size:hover, .listView .header .date:hover {
  text-decoration: underline;
}
.listView .team .icon {
  background-size: 14px;
}
.listView .folder .icon {
  background-size: 18px;
}
.listView .project .icon {
  background-size: 18px;
}
.listView .link .icon {
  background-size: 14px;
}
.listView .company .icon {
  background-size: 18px;
}

.links.gridView .title {
  padding-bottom: 16px;
}
.links.gridView .empty-space .title {
  padding-bottom: unset;
}

.reactionsContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.reactionsContainer .reactionContainer {
  display: flex;
  gap: 8px;
  align-items: center;
}
.reactionsContainer .reactionContainer .initials {
  font-weight: initial;
  font-size: 12px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  border-radius: 50%;
  text-align: center;
  color: hsl(0, 0%, 20%);
  background-color: var(--bgcolour);
  position: relative;
}
.reactionsContainer .reactionContainer .initials::after {
  content: attr(data-reaction);
  display: block;
  position: absolute;
  bottom: 0px;
  right: 0px;
  line-height: normal;
  font-size: 14px;
  filter: drop-shadow(0px 0px 1px #000);
}
.reactionsContainer .reactionContainer .detailsContainer {
  display: flex;
  flex-direction: column;
}
.reactionsContainer .reactionContainer .detailsContainer .displayname {
  font-weight: initial;
  font-size: 16px;
  color: hsl(0, 0%, 80%);
}
.reactionsContainer .reactionContainer .detailsContainer .email {
  font-size: 12px;
  color: hsl(0, 0%, 60%);
}

.categoriesContainer .category {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.categoriesContainer .category .category-title {
  color: hsl(0, 0%, 80%);
}
.categoriesContainer .category .category-title[contenteditable=true] {
  width: fit-content;
  cursor: text;
  padding-right: 20px;
  position: relative;
  white-space: nowrap;
  overflow-x: auto;
  max-width: calc(100% - 40px);
}
.categoriesContainer .category .category-title[contenteditable=true]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  background-image: url("/images/pencil-icon.svg");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
}
.categoriesContainer .category .category-options {
  display: flex;
  flex-direction: column;
}
.categoriesContainer .category .category-options input[type=radio] {
  display: none;
}
.categoriesContainer .category .category-options input[type=radio] + label {
  color: hsl(0, 0%, 60%);
  cursor: pointer;
  padding: 4px;
  padding-left: 12px;
  border-radius: 4px;
  position: relative;
  transition: background-color var(--animation-speed-medium), color var(--animation-speed-medium);
}
.categoriesContainer .category .category-options input[type=radio] + label:hover {
  color: hsl(0, 0%, 80%);
  background-color: hsl(0, 0%, 20%);
}
.categoriesContainer .category .category-options input[type=radio]:checked + label {
  color: hsl(0, 0%, 80%);
}
.categoriesContainer .category .category-options input[type=radio]:checked + label::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: calc(100% - 8px);
  background-color: hsl(0, 0%, 80%);
  position: absolute;
  left: 4px;
  top: 4px;
}
.categoriesContainer .category .category-options input[type=radio]:disabled + label {
  display: none;
}
.categoriesContainer ul {
  list-style-type: none;
  padding-left: 8px;
}
.categoriesContainer ul:first-child {
  padding: 0;
  margin: 0;
}
.categoriesContainer li {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  color: hsl(0, 0%, 60%);
  cursor: pointer;
}
.categoriesContainer li.selected > .folder {
  color: hsl(0, 0%, 100%);
}
.categoriesContainer li .folder, .categoriesContainer li .image, .categoriesContainer li .video {
  display: flex;
  padding: 4px;
  border-radius: 4px;
  height: 16px;
  line-height: 16px;
  gap: 4px;
  cursor: pointer;
}
.categoriesContainer li .folder .icon, .categoriesContainer li .image .icon, .categoriesContainer li .video .icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.categoriesContainer li .folder .name, .categoriesContainer li .image .name, .categoriesContainer li .video .name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.categoriesContainer li .folder input[type=radio], .categoriesContainer li .image input[type=radio], .categoriesContainer li .video input[type=radio] {
  display: none;
}
.categoriesContainer li .folder input[type=radio] + label, .categoriesContainer li .image input[type=radio] + label, .categoriesContainer li .video input[type=radio] + label {
  cursor: pointer;
}
.categoriesContainer li .folder input[type=radio]:checked + label, .categoriesContainer li .image input[type=radio]:checked + label, .categoriesContainer li .video input[type=radio]:checked + label {
  cursor: pointer;
  color: hsl(0, 0%, 100%);
}
.categoriesContainer li .folder .deleteButton, .categoriesContainer li .image .deleteButton, .categoriesContainer li .video .deleteButton {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: url("/images/delete-icon.svg") no-repeat center;
  background-size: 16px;
}
.categoriesContainer li .folder:hover, .categoriesContainer li .image:hover, .categoriesContainer li .video:hover {
  background-color: hsl(0, 0%, 20%);
}
.categoriesContainer li .folder .icon {
  background: url("/images/folder-icon.svg") no-repeat center;
}
.categoriesContainer li .image .icon {
  background: url("/images/image-icon.svg") no-repeat center;
  background-size: 14px;
}
.categoriesContainer li .video .icon {
  background: url("/images/video-icon.svg") no-repeat center;
}
.categoriesContainer .hidden {
  display: none;
}

.createContainer {
  display: flex;
  height: calc(100% - 36px);
  gap: 24px;
  margin: 12px 24px 24px 24px;
}
.createContainer .categoriesContainer {
  flex: 0 0 275px;
  border-radius: 8px;
  overflow: auto;
}
.createContainer .column {
  height: 100%;
  width: 2px;
  background-color: hsl(0, 0%, 20%);
}
.createContainer .imagePreviewContainer {
  flex: 1 1 auto;
}
.createContainer .imagePreviewContainer > img, .createContainer .imagePreviewContainer > video {
  height: 100%;
  width: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.createContainer .imagePreviewContainer .emptyMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: hsl(0, 0%, 40%);
  text-align: center;
}

.annotations.drag-over {
  background-color: rgba(155, 216, 247, 0.2);
}
.annotations .fromData {
  pointer-events: none !important;
}
.annotations .fromData .SVGlink {
  pointer-events: auto !important;
}
.annotations .yellow {
  stroke: #daa520;
}
.annotations .red {
  stroke: #dc143c;
}
.annotations .green {
  stroke: #2cba2f;
}
.annotations .blue {
  stroke: #1b75f0;
}
.annotations .SVGrect {
  fill: rgba(255, 255, 255, 0.0039215686);
  stroke-width: calc(var(--inverse-multiplier) * 2);
}
.annotations .SVGrect:hover, .annotations .SVGrect.selected {
  cursor: pointer;
  z-index: 10;
}
.annotations .SVGrect.selected {
  stroke-width: calc(var(--inverse-multiplier) * 3);
}
.annotations .SVGcircle {
  fill: rgba(255, 255, 255, 0.0039215686);
  stroke-width: calc(var(--inverse-multiplier) * 2);
}
.annotations .SVGcircle:hover, .annotations .SVGcircle.selected {
  cursor: pointer;
  z-index: 10;
}
.annotations .SVGcircle.selected {
  stroke-width: calc(var(--inverse-multiplier) * 3);
}
.annotations .SVGfreehand {
  fill: rgba(255, 255, 255, 0.0039215686);
  stroke-width: calc(var(--inverse-multiplier) * 2);
}
.annotations .SVGfreehand:hover, .annotations .SVGfreehand.selected {
  cursor: pointer;
  z-index: 10;
}
.annotations .SVGtext {
  font-size: var(--current-font-size);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.annotations .SVGtext.yellow {
  stroke: none;
  fill: #daa520;
}
.annotations .SVGtext.red {
  stroke: none;
  fill: #dc143c;
}
.annotations .SVGtext.green {
  stroke: none;
  fill: #2cba2f;
}
.annotations .SVGtext.blue {
  stroke: none;
  fill: #1b75f0;
}
.annotations .SVGtext .SVGlink {
  cursor: pointer;
  text-decoration: underline;
  fill: inherit;
  transition: fill var(--animation-speed-fast);
}
.annotations .SVGtext .SVGlink:hover {
  fill: hsl(0, 0%, 100%);
}
.annotations .SVGtext .SVGspan {
  position: relative;
  left: 0;
}
.annotations .SVGarrow {
  stroke-width: var(--inverse-multiplier);
}
.annotations .SVGarrow.yellow {
  fill: #daa520;
}
.annotations .SVGarrow.red {
  fill: #dc143c;
}
.annotations .SVGarrow.green {
  fill: #2cba2f;
}
.annotations .SVGarrow.blue {
  fill: #1b75f0;
}
.annotations .SVGarrow:hover, .annotations .SVGarrow.selected {
  cursor: pointer;
  z-index: 10;
}
.annotations .SVGarrow.selected {
  stroke: var(--blue-base-colour);
  stroke-width: var(--inverse-multiplier);
  cursor: move;
}
.annotations .SVGhandlesGroup {
  z-index: 100;
}
.annotations .SVGhandlesGroup .SVGhandlesRect {
  fill: rgba(0, 0, 255, 0.0039215686);
  stroke: var(--blue-base-colour);
  stroke-width: calc(var(--inverse-multiplier) * 2);
  cursor: pointer;
}
.annotations .SVGhandlesGroup .SVGhandlesRect:hover {
  fill: rgba(0, 0, 255, 0.1333333333);
  cursor: move;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner {
  fill: rgba(0, 0, 255, 0.1333333333);
  stroke: var(--blue-base-colour);
  stroke-width: calc(var(--inverse-multiplier) * 2);
  rx: 50% !important;
  ry: 50% !important;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner:hover {
  fill: #9bd8f7;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner.nw {
  cursor: nw-resize;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner.ne {
  cursor: ne-resize;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner.sw {
  cursor: sw-resize;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner.se {
  cursor: se-resize;
}
.annotations .SVGhandlesGroup .SVGhandlesCorner.tip, .annotations .SVGhandlesGroup .SVGhandlesCorner.tail {
  cursor: move;
}
.annotations.addMode .SVGrect:hover, .annotations.addMode .SVGrect.selected,
.annotations.addMode .SVGcircle:hover,
.annotations.addMode .SVGcircle.selected,
.annotations.addMode .SVGfreehand:hover,
.annotations.addMode .SVGfreehand.selected,
.annotations.addMode .SVGtext:hover,
.annotations.addMode .SVGtext.selected,
.annotations.addMode .SVGarrow:hover,
.annotations.addMode .SVGarrow.selected {
  cursor: crosshair !important;
}
.annotations.addMode .SVGhandlesGroup .SVGhandlesRect:hover,
.annotations.addMode .SVGhandlesGroup .SVGhandlesCorner:hover {
  cursor: crosshair !important;
}

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: hsl(0, 0%, 10%);
  color: hsl(0, 0%, 80%);
  font-family: "aptos";
  font-size: 14px;
}

/*# sourceMappingURL=style.css.map */