/******************************************************
 * Fonts
 ******************************************************/

@font-face {
  font-family: "Sora";
  src: local("Sora"), url(./assets/Sora.ttf) format("truetype");
  font-weight: normal;
}

@font-face {
  font-family: "Sora";
  src: local("Sora"), url(./assets/Sora-SemiBold.ttf) format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Sora";
  src: local("Sora"), url(./assets/Sora-ExtraBold.ttf) format("truetype");
  font-weight: 800;
}

@font-face {
  font-family: "Poppins";
  src: local("Poppins"), url(./assets/Poppins-Regular.ttf) format("truetype");
}

/* You can add global styles to this file, and also import other style files */
.ace_hidpi .ace_text-layer, .ace_hidpi .ace_gutter-layer, .ace_hidpi .ace_content, .ace_hidpi .ace_gutter {
  will-change: contents;
}

.app-full-bleed-dialog .mat-dialog-container {
  padding: 0;
  border: 0;
  margin: 0;
  border-radius: 10px;
}

.node-badge {
  position: absolute;
  text-align: center;
  border-radius: 30px 30px 30px 30px;
  width: 16px;
  height: 16px;
  left: 43px;
  top: 295px;
  color: white;
  background: #7D66EE;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
}

.nodeIcon {
  position: absolute;
  text-align: center;
  border-radius: 30px 30px 30px 30px;
  width: 16px;
  height: 16px;
  left: 10px;
  top: 300px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
}

.register-link-copy-box {
  display: flex;
  align-items: center;
  border: 1px solid white;
  background: #DBE6F0;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: nowrap;
}

.register-link-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 10px;
  color: black;
}

.connecting {
  cursor: pointer !important;
}

.available-cell {
  stroke: #FFC42C !important;
  cursor: pointer !important;
}

.scalable {
  opacity: 0;
}

.subscription-plan {
  float: left;
  width: 280px;
  border-radius: 10px;
}

/******************************************************
 * Subscription Styles
 ******************************************************/

 .subscription-header {
  background-color:#008FD6;
  font-family: Sora;
  font-weight: 800;
  font-size: 18px;
  line-height: 120%;
  color: #FFFFFF;
  border-bottom: 1px solid white;
}

.subscription-info {
  background-color:#DBE6F0;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #121826;
  border-bottom: 1px solid white;
}

.subscription-details {
  background-color:#ECF3FB;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #121826;
  border-bottom: 1px solid white;
}

.subscription-button {
  background-color:#DBE6F0;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #121826;
}

.subscription-item {
  background-color:#DBE6F0;
  color: #121826;
  border-bottom: 1px solid white;
}

/* Style the list */
.price {
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

/* List items */
.price li {
  padding: 20px;
  text-align: center;
}

/* Grey list item */
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

/******************************************************
 * Component Styles
 ******************************************************/

#accountSettingsDialog mat-divider {
  --mat-divider-color: rgb(191, 198, 229);
}

/******************************************************
 * Joint JS
 ******************************************************/
.joint-paper body {
  background: transparent;
}

.joint-type-harpoon-link .link-tools {
  display: none;
}

.joint-type-harpoon-link path {
  stroke-width: 2;
  box-shadow: 2px 2px 10px black;
}

.joint-type-harpoon-link .marker-arrowhead-group-source {
  display: none;
}

.joint-type-harpoon-link .marker-arrowhead-group-source {
  display: none;
}

.joint-type-link .marker-arrowhead-group-target {
  display: none;
}

.joint-type-link .marker-arrowhead-group-source {
  display: none;
}

.joint-type-link .tool-options {
  display: none;
}

.joint-type-link path {
  stroke-width: 2;
  box-shadow: 2px 2px 10px black;
}

.joint-tool[data-tool-name="button"] circle {
  fill: var(--secondary-blue);
}

.active path {
  stroke: var(--secondary-blue) !important;
  cursor: pointer;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.show {display: block;}

.home {/* dark mode */
  height: 100vh;
  display: flex;
  justify-content: center;
}

.organization {
  background: #ECF3FB;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.home-overlay {
  background: rgba(18, 24, 38, 0.5); /* dark mode */
}

.home-header {
  position: absolute;
  height: 76px;
  left: 0px;
  right: 0px;
  top: 0px;
}

/******************************************************
 * Loaders
 ******************************************************/

.loader-node,
.loader-node:after {
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.loader-node {
  margin: 0px auto;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader-deploy,
.loader-deploy:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader-deploy {
  margin: 45px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 45px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader-destroy {
  margin: 0px auto;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.loader-destroy,
.loader-destroy:after {
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.project-loader,
.project-loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.project-loader {
  margin: auto;
  margin-top: 10%;
  font-size: 30px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loader-node-text, .loader-deploy-text, .loader-destroy-text {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.loader-deploy-text {
  font-size: 18px;
  margin-top: -28px;
}

.project-loader-text {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-size: 36px;
  line-height: 120%;
  text-align: center;
}

.invalid-feedback {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 18px;
  margin-top: -20px;
  display: block;
}

.logo {
  position: absolute;
  width: 112px;
  height: 28px;
  margin-left: 16px;
  margin-top: 24px;
}

.org-invite-register {
  height: 100vh;
  display: flex;
  justify-content: center;
}

/******************************************************
 * Settings Box
 ******************************************************/

 .settings-box {
  position: absolute;
  width: 157px;
  height: 44px;
  right: 16px;
  top: 16px;

  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 24px;

  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
}

/* inside settings-content */
.settings-dropdown {
  position: static;
  width: 20px;
  height: 20px;
  right: 0px;
  top: 0px;

  /* Inside Auto Layout */
  flex: none;
  order: 2;
  flex-grow: 0;
  margin: 0px 4px;
}

/* inside settings-content */
.username {
  position: static;
  width: 61px;
  height: 17px;
  left: 24px;
  top: 1.5px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%; /* identical to box height, or 17px */
  display: flex;
  align-items: flex-end;
  text-align: right;

  /* Inside Auto Layout */
  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0px 4px;
}

/* inside settings-content */
.account-icon {
  position: static;
  left: 0%;
  right: 81.65%;
  top: 0%;
  bottom: 0%;

  /* Inside Auto Layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 0px 4px;
}

.home-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding:110px 142px 0px 142px;
}

.organization-content {
  display: flex;
  align-items: flex-start;
  padding-top: 50px;
  width: 100vw;
}

.organization-settings {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 70px;
  width: 60vw;
}

.organization-title {
  font-family: Sora;
  font-style: normal;
  font-weight: 800;
  font-size: 19px;
  line-height: 120%;
  flex-basis: 62px;
}

.members-title {
  font-family: Sora;
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  line-height: 120%;
  flex-basis: 62px;
  margin-bottom: 5px;
}

.project-actions {
  width: 70vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  margin-top: 12px;
  margin-bottom: 4px;
}

.org-actions {
  width: 68vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  margin-top: 5px;
  margin-bottom: 4px;
}

.org-actions {
  width: 68vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  margin-top: 5px;
  margin-bottom: 4px;
}

.new-project {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  color: #008FD6;
}

.new-project:hover {
  opacity: 0.6;
  cursor: pointer;
}

.new-project:focus {
  border: 2px solid #008FD6;
  outline: none;
  opacity: 1;
}

.add-icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin-right: 4px;
  font-size: 15px;
}

.org-add-icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  margin-right: 4px;
  font-size: 15px;
}

.new-project-text {
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
}

.new-invite-text {
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 120%;
}

.new-invite-text {
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 120%;
}

.sort-project {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 2px solid transparent;
  background-color: transparent;
  width: 180px;
  height: 20px;
}

.sort-project:hover {
  opacity: 0.6;
  cursor: pointer;
}

.sort-project:focus {
  opacity: 1;
}

.sort-project:focus + .sort-dropdown-menu {
  border: none;
  outline: 2px solid var(--secondary-blue);
}

.sort-dropdown-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.org-header {
  padding:0px 250px 20px 142px
}

.org-form-control {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;
}

/******************************************************
 * MatCard
 ******************************************************/

mat-card {
  width: 21vw !important;
  min-width: 191px !important;
  cursor: pointer !important;
  height: 42vh !important;
  max-height: 275px !important;
  font-family: Sora !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  padding: 0px !important;

  margin: 0 1em 1em 1em !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

mat-card-header {
  margin-top: 12px !important;
}

mat-card-content {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

.info-item {
  display: flex;
  justify-content: space-between;

  padding: 1em;
  cursor: pointer;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item span {
  font-size: 19px;
}

.info-item .value {
  font-weight: bold;
}

.value {
  font-weight: bold;
}

.organization-navigation {
  display: flex;
  height: 85vh;
  flex-direction: column;
}

.project-scrolling {
  overflow: scroll;
  height: 100vw;
}

.project-scrolling::-webkit-scrollbar {
  display: none;
}

.draft-invitation-scrolling {
  overflow: scroll;
  height: 36vh;
  max-height: 40vh;
  width: 68vw;
  border-radius: 4px;
}

.permissionsSelect {
  width: 120px !important;
}

.permissionsOption {
  width: 135px !important;
}

.draft-invitation-scrolling::-webkit-scrollbar {
  display: none;
}

.pending-invitation-scrolling {
  overflow: scroll;
  height: 40vh;
  max-height: 40vh;
  width: 68vw;
  border-radius: 4px;
}

.pending-invitation-scrolling::-webkit-scrollbar {
  display: none;
}

.member-invitation-scrolling {
  overflow: scroll;
  height: 85vh;
  width: 69vw;
  border-radius: 4px;
}

.member-invitation-scrolling::-webkit-scrollbar {
  display: none;
}

.graph-scroll::-webkit-scrollbar {
  display: none;
}

.invite-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wide-button, .wide-button.mat-mdc-unelevated-button {
  width: 384px;
  height: 48px;

  border-radius: 4px;
  border: none;

  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
}

.wide-button[disabled] {
  background: gray;
}

.wide-button:hover:not([disabled]) {
  cursor: pointer;
  background: var(--secondary-blue);
}

.wide-button:disabled {
  cursor: not-allowed;
}

.cancel-button:disabled {
  cursor: not-allowed;
}

/* light/dark mode button */
.mode {
  position: absolute;
  width: 36px;
  height: 36px;
  right: 16px;
  bottom: 16px;
  border-radius: 8px;
}

/******************************************************
 * Sidebar
 ******************************************************/

.workspace-sidebar {
  width: 360px;
  height: 100vh;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1); /* dark mode */
  z-index: 1000;
  background: var(--card);
}

.workspace-graph {
  left: 360px;
  width: 100vw;
  height: 100vh;
}

.sidebar-cluster-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;

  position: absolute;
  width: 328px;
  height: 48px;
  left: 16px;
  top: 60px;
  border-bottom: 1px solid #5C657B;
}

.sidebar-dropdown {
  position: absolute;
  width: 328px;
  height: 48px;
  left: 16px;
  top: 76px;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 4px;
}

.sidebar-dropdown:hover {
  cursor: pointer;
  border: 1px solid var(--secondary-blue);
}

.sidebar-dropdown:focus,
.sidebar-dropdown:focus + .sidebar-dropdown-menu {
  border: none;
  outline: 2px solid var(--secondary-blue) !important;
}

.sidebar-dropdown-menu {
  display: none;
  position: absolute;
  width: 328px;
  height: 207px;
  left: 16px;
  top: 124px;
  z-index: 100;

  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: var(--card);
  border: 1px solid var(--border);
}

.sidebar-dropdown-option {
  position: relative;
  width: 326px;
  height: 47px;
  font-family: Poppins;
  border: none;
  box-sizing: border-box;
  border-radius: 4px;
  margin-bottom: 2px;
  background-color: var(--card);
}

.sidebar-dropdown-option:hover {
  border: none;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--hover-bg);
}

.sidebar-dropdown-option:focus {
  outline: 2px solid var(--secondary-blue);
}

.grey-out {
  opacity: 0.5;
}

.sidebar-dropdown-content {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0px;

  position: absolute;
  width: 114px;
  height: 24px;
  left: 11px;
  top: 12px;
  pointer-events: none;
}

.sidebar-dropdown-icon {
  position: static;
  width: 22px;
  height: 22px;
  right: 15px;
  top: 0px;
  flex: none;
  order: 0;
  flex-grow: 0;
  pointer-events: none;
}

.sidebar-dropdown-text {
  position: static;
  width: 82px;
  height: 24px;
  left: 32px;
  top: calc(50% - 24px/2);

  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px; /* identical to box height, or 171% */
  text-align: left;

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0px 10px;
  pointer-events: none;
}

.sidebar-dropdown-arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  right: 8px;
  top: 10px;
  pointer-events: none;
}

.projects-dropdown-arrow {
  width: 20px;
  height: 20px;

  color: #5C657B;
}

.sidebar-search {
  position: absolute;
  left: 16px;
  top: 140px;
}

.sidebar-search-button:hover {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.sidebar-search-button:active {
  outline: 2px solid var(--secondary-blue);
}

.sidebar-search-input {
  width: 258px;
  height: 20px;
  left: 28px;
  top: calc(50% - 20px/2);

  font-family: Sora;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px; /* identical to box height, or 17px */

  border: none;

  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 0px 4px 0px 8px;
}

.sidebar-search-input:hover {
  border: none;
}

.sidebar-search-input:active, .sidebar-search-input:focus {
  border: none;
  outline: none;
}

.sidebar-search-delete {
  position: absolute;
}

.sidebar-search-delete:hover {
  border-radius: 4px;
  mix-blend-mode: normal;
}

.sidebar-search-delete:active {
  outline: 2px solid var(--secondary-blue);
}

.switch {
  position: absolute;
  top: 141px;
  left: 254px;
  display: inline-block;
  width: 90px;
  height: 24px;
  z-index: 20;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #BDC9D5;
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 44px;
  left: 1px;
  bottom: 1px;
  -webkit-transition: .3s;
  transition: .3s;
  border-radius: 34px;
}

input:checked + .slider {
  background-color: var(--secondary-blue);
}

input:checked + .slider:before {
  -webkit-transform: translateX(45px);
  -ms-transform: translateX(45px);
  transform: translateX(45px);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--secondary-blue);
}

.slider-public {
  position: absolute;
  font-family: Sora;
  font-size: 12px;
  margin-top: 145px;
  margin-left: 301px;
  z-index: 25;
}

.slider-private {
  position: absolute;
  font-family: Sora;
  font-size: 12px;
  margin-top: 145px;
  margin-left: 256px;
  z-index: 25;
}

.sidebar-results {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;

  position: relative;
  width: 360px;
  height: calc(100vh - 243px);
  left: 0px;
  top: 184px;

  overflow: auto;
}

.empty-results-text {
  margin-left: 24px;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  color: #5C657B;
}

.empty-results {
  margin-left: 60px;
  margin-top: 120px;
}

.container-card, .repository-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px 16px;
  width: 100%;
}

.container-card {
  height: 79px;
}

.repository-card {
  height: 96px;
}

.container-card:hover, .repository-card:hover {
  border-radius: 4px;
}

.container-card:active, .repository-card:active {
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 4px;
  cursor: copy;
}

.dragging {
  opacity: 0.5;
  border-radius: 4px;
}

.container-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 4px 0px;
}

.container-card-title {
  max-width: 274px;
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  overflow-wrap: break-word;
}

.container-card-star {
  position: absolute;
  height: 16px;
  left: 300px;
  margin-top: 4px;

  font-family: Sora;
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 140%;
  letter-spacing: 0.5px;
}

.container-card-owner {
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
}

.container-card-details {
  font-family: Sora;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 140%;
}

.container-wrapper {
  background-color: transparent;
  height: 245px;
}

.container {
  display: inline-block;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  box-sizing: border-box;
  border-radius: 8px;
  padding: 7px;
  width: 330px;
  height: 225px;
  z-index: 10;
}

.container:hover {
  padding: 7px;
  cursor: move;
}

.container:active {
  padding: 7px;
  cursor: grabbing;
}

.content {
  border-radius: 10px;
}

.container-logo {
  margin-right: 25px;
}

.harbor-logo {
  margin-right: 25px;
  width: 24px;
  height: 24px;
}

.harpoon-logo {
  width: 24px;
  height: 24px;
}

.harborImage {
  width: auto;
  height: 48px;
}

.gcpImage {
  width: auto;
  height: 48px;
}

.azureImage {
  width: auto;
  height: 48px;
}

.configDeleteButton {
  background-color: transparent;
  border: 2px solid transparent;
  margin-right: -29px;
  z-index: 1000;
  margin-top: 13px;
}

.configDeleteButton:hover {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.element-buttons {
  background-color: transparent;
  border: 2px solid transparent;
  margin-left: 8px;
  font-size: 13px !important;
}

.element-buttons:not([disabled]):hover {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.element-buttons:active {
  border-radius: 4px;
  outline: 2px solid var(--secondary-blue);
}

.element-buttons:disabled {
  cursor: not-allowed;
}

.container-content {
  display: flex;
  flex-direction: column;
}

.container-content > .container-title {
  direction: rtl;
}

.container-title {
  max-width: min-content;
  margin-top: 8px;
  font-family: Sora;
  font-weight: 800;
  font-size: 16px;
  line-height: 120%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.container-dropdown-label {
  position: absolute;
  top: 73px;
  left: 35px;
  z-index: 1;
  font-family: Sora;
  font-size: 12px;
  line-height: 115%;
  background-color: transparent;
}

.user-provider-label {
  position: absolute;
  top: 75px;
  left: 45px;
  z-index: 1;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 3px;
}

.repo-dropdown-branch {
  position: absolute;
  top: 71px;
  left: 35px;
  z-index: 1;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  background-color: transparent;
}

.repo-dropdown-label-commit {
  position: absolute;
  top: 71px;
  left: 185px;
  z-index: 1;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  background-color: transparent;
}

.container-dropdown, .provider-dropdown {
  position: relative;
  width: 298px;
  height: 56px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  cursor: pointer;
}

.provider-dropdown {
  width: 384px;
}

.repo-dropdown {
  position: relative;
  width: 90%;
  height: 56px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  cursor: pointer;
}

.repo-dropdown-commit {
  position: relative;
  width: 90%;
  height: 56px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  cursor: pointer;
}

select {
	float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;

	background:url("assets/arrow-down.png");
	background-repeat:no-repeat;
	background-size:11px 8px;

  background-position-x: 359px;
  background-position-y: center;
}

select.container-dropdown {
	float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;

	background-repeat:no-repeat;
	background-size:11px 8px;

  background-position-x: 273px;
  background-position-y: center;
}

select.repo-dropdown {
	float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;

	background-repeat:no-repeat;
	background-size:11px 8px;

  background-position-x: 115px;
  background-position-y: center;
}

select.repo-dropdown-commit {
	float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;

	background-repeat:no-repeat;
	background-size:11px 8px;

  background-position-x: 115px;
  background-position-y: center;
}

select.provider-dropdown {
	float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;

	background:url("assets/arrow-down.png");
	background-repeat:no-repeat;
	background-size:11px 8px;

  background-position-x: 359px;
  background-position-y: center;
}

.user-tutorial {
  position: relative;
  width: 530px;
  height: 56px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  cursor: pointer;

  float:left;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;

	background:url("assets/arrow-down.png");
	background-repeat:no-repeat;
	background-size:11px 8px;

  background-position-x: 500px;
  background-position-y: center;
}

.container-dropdown:hover {
  border: 1px solid var(--secondary-blue);
}

.container-dropdown:focus,
.container-dropdown:active {
  outline: none;
  border: 2px solid var(--secondary-blue);
}

.repo-dropdown:hover {
  border: 1px solid var(--secondary-blue);
}

.repo-dropdown:focus, .repo-dropdown:active {
  outline: none;
  border: 2px solid var(--secondary-blue);
}

.repo-dropdown-commit:hover {
  border: 1px solid var(--secondary-blue);
}

.repo-dropdown-commit:focus, .repo-dropdown-commit:active {
  outline: none;
  border: 2px solid var(--secondary-blue);
}

.container-actions {
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}

.container-quantity {
  display: flex;
  flex: column;
  width: 70px;
  height: 24px;
  margin-right: 16px;
  margin-top: 12px;
}

.container-quantity-button {
  background-color: transparent;
  font-size: 12px;
  border: 2px solid transparent;
}

.container-quantity-button:focus, .container-quantity-button:active {
  border: 2px solid transparent;
  outline: 2px solid var(--secondary-blue);
}

.container-quantity-button:disabled {
  background-color: transparent;
  border: 2px solid transparent;
  cursor: not-allowed;
}

.container-quantity-value {
  width: 100%;
  min-width: 20px;
  height: 24px;
  text-align: center;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  border: none;
  outline: none;

  font-family: Poppins;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;

  background-color: transparent;
}

.container-quantity-value:active {
  border: none;
  outline: none;
}

.container-quantity-value:focus {
  border: none;
  outline: none;
}

.container-quantity-value:hover {
  border: none;
  outline: none;
}

.container-deploy, .cancel-build {
  width: 212px;
  height: 48px;
  border-radius: 4px;
}

.container-deploy:hover {
  border: 1px solid var(--secondary-blue);
}

.container-deploy:disabled {
  cursor: not-allowed;
}

.repository-build {
  width: 98px;
  height: 48px;
  border-radius: 4px;
  margin-right: 16px;
}

.repository-build:disabled {
  cursor: not-allowed;
}

.repository-deploy {
  width: 98px;
  height: 48px;
  border-radius: 4px;
}

.repository-deploy:disabled {
  cursor: not-allowed;
}

.node {
  width: 100%;
  height: 100%;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  padding: 6px;
}

.node:hover, .node-group:hover {
  padding: 6px;
  cursor: move;
}

.node:active, .node-group:active {
  padding: 6px;
  cursor: grabbing;
}

.node.dynamic {
  border-style: dashed;
  border-color: lightgrey;
}

.node-content, .normalNode {
  display: flex;
  flex-direction: column;
}

.element {
  width: 211px;
  height: 89px;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  padding: 6px;
}

.element:hover {
  padding: 6px;
  cursor: move;
}

.element:active {
  padding: 5px;
  cursor: grabbing;
}

.element-content {
  display: flex;
  flex-direction: column;
}

.element-icon {
  margin-right: 45px;
}

.lock-button {
  background-color: transparent;
  border: 2px solid transparent;
  margin-right: 60px;
}

.lock-button:hover {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.lock-button:focus {
  border-radius: 4px;
  outline: 2px solid var(--secondary-blue);
}

.element-text {
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  margin-right: 8px;
}

.element-details {
  display: flex;
  flex-direction: row;
}

.element-details > .overflow {
  direction: rtl;
}

.element-data {
  max-width: min-content;
  display: block;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  overflow: hidden;
  text-align: left;
}

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

.element-input {
  width: 128px;
  border: none;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
}

.elements-bar {
  position: fixed;
  width: 83px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
}

.elements-bar-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
}

.element-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px;
  border: 1px transparent;

  pointer-events: auto;
  -webkit-user-select: none;
}

.element-card:hover {
  border-radius: 4px;
  border: 1px transparent;
  z-index: 5;
}

.element-card:active {
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  cursor: copy;
}

.element-drag {
  width: 56px;
  height: 56px;
  border: 1px transparent;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.config-map-icon {
  cursor: pointer;
  pointer-events: none;
}

.volume-icon {
  color: #78CEC9;
  cursor: pointer;
  pointer-events: none;
}

.server-icon {
  color: #8CC6E3;
  cursor: pointer;
  pointer-events: none;
}

.secret-icon {
  color: #7E89E8;
  cursor: pointer;
  pointer-events: none;
}

.ingress-route-icon {
  color: #E7C46D;
  cursor: pointer;
  pointer-events: none;
  margin-right: 0px;
}

.cloud-icon {
  color: #8CC6E3;
  cursor: pointer;
  pointer-events: none;
}

.element-label {
  margin-top: -16px;
  z-index: 15;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  text-align: center;
}

/******************************************************
 * Settings Menu
 ******************************************************/

.settings {
  /* position: absolute; */
  width: 145px;
  height: 44px;
  right: 180px;
  top: 16px;
  border-radius: 8px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  flex-grow: 0;
  padding-left: 30px;
}

settings i,
.settings span {
  display: inline-block;
  pointer-events: none;
}

.centered-header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  transition: transform 0.35s ease-in-out, left 0.35s ease-in-out;
}

.centered-header.pushExtraRight {
  left: calc(40% + 180px);
}

@media (min-width: 1750px) {
  .centered-header.pushExtraRight {
    transform: translateX(-40%);
  }
}

.centered-header-wrapper {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  position: relative;
}

.right-header {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.cluster-collaboration {
  height: 44px;
  width: 143px;
  right: 330px;
  top: 16px;
  border-radius: 8px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: none;
  flex-grow: 0;
  padding-left: 30px;
}

.organizations-dropdown {
  width: 160px;
  height: 44px;
  right: 16px;
  top: 16px;
  border-radius: 8px;
  z-index: 10;
}

.header-bar {
  display: flex;
  position: relative;
  top: 16px;
  margin-left: 360px;
  right: 0;
  z-index: 10;
  align-items: flex-start;
  gap: 8px;
  padding-right: 12px;
}

.settings:hover {
  cursor: pointer;
  border: 1px solid var(--secondary-blue);
}

.cluster-collaboration:hover {
  cursor: pointer;
  border: 1px solid var(--secondary-blue);
}

.organizations-dropdown:hover {
  cursor: pointer;
  border: 1px solid var(--secondary-blue);
}

.organizations-dropdown-menu {
  border: none;
}

.organizations-dropdown-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 24px;
}

.user-username {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  display: flex;
  align-items: flex-end;
  text-align: right;

  margin-left: 8px;
  margin-top: 2px;
  overflow: auto;
}

.organizations-dropdown-username {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  display: flex;
  align-items: flex-end;
  text-align: right;

  margin-left: 8px;
  margin-top: 2px;
  overflow: auto;
  white-space: nowrap;
}

.cluster-control-dropdown-menu {
  flex-direction: column;
  position: fixed;
  width: 143px;
  right: 333px;
  top: 60px;
  z-index: 10;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: var(--card);
  border: 1px solid var(--border);
  outline: 1px solid var(--secondary-blue) !important;
}

.settings-dropdown-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 145px;
  right: 180px;
  top: 60px;
  z-index: 10;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: var(--card);
  border: 1px solid var(--border);
  outline: 1px solid var(--secondary-blue) !important;
}

.organizations-dropdown-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  width: 160px;
  right: 12px;
  top: 60px;
  z-index: 10;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: var(--card);
  border: 1px solid var(--border);
  outline: 1px solid var(--secondary-blue) !important;
}

.sort-dropdown-menu {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 10;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 8px;
  margin-left: 10px;
  margin-top: 2px;
  background-color: var(--card);
  border: 1px solid var(--border);
}

.user-dropdown-group {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0px;
}

.organizations-dropdown-group {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0px;
}

.user-dropdown-option {
  position: relative;
  width: 142px;
  height: 42px;
  font-family: Poppins;
  border: none;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: small;
  padding: 0px;
  background-color: var(--card);
}

.organizations-dropdown-option {
  position: relative;
  width: 158px;
  height: 42px;
  font-family: Poppins;
  border: none;
  box-sizing: border-box;
  border-radius: 8px;
  margin-bottom: 2px;
  font-size: small;
  padding: 0px;
  background-color: var(--card);
}

.user-dropdown-option:hover {
  border: none;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
  background: var(--hover-bg);
}

.user-dropdown-option:focus {
  outline: 2px solid var(--secondary-blue);
}

.user-dropdown-option:disabled {
  background-color: #d3d3d3;
  color: #a0a0a0;
  cursor: not-allowed;
  opacity: 0.6;
}

.organizations-dropdown-option:hover {
  border: none;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
  background: var(--hover-bg);
}

.organizations-dropdown-option:focus {
  outline: 2px solid var(--secondary-blue);
}

.dialog-overlay {
  backdrop-filter: blur(4px);
  height: 100vh;
  width: 100vw;
}

.dialog {
  width: 448px;
  position: fixed;
  top: 100px;
  left: calc(50% - 448px/2);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 32px;
  z-index: 100001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
}

.dialog-yaml {
  width: 65vw;
  height: 86vh;
  position: fixed;
  top: 10%;
  left: 20%;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  padding: 32px;
  z-index: 100;
  background: var(--card);
}

.elementTitle {
  border: none;
  outline-style: none;
  background: transparent;
  font-size:25px;
  font-weight: 800;
}

.configMap-editor {
  min-height: 47vh;
  max-height: 47vh;
  border-radius: 10px;
  overflow: scroll;
}

.config-editor {
  width:50vw;
  position: relative;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  padding: 12px 32px;
  z-index: 100;
  background: var(--card);
}

.log-dialog {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 32px;
  z-index: 100;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
}

.aws-dialog {
  width: 505px;
  position: fixed;
  top: calc(50% - 398px/2);
  left: calc(50% - 448px/2);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 32px;
  z-index: 100;
  background: var(--card);
}

.azure-dialog {
  width: 505px;
  position: fixed;
  top: calc(50% - 398px/2);
  left: calc(50% - 448px/2);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 32px;
  z-index: 100;
  background: var(--card);
}

.gcp-dialog {
  width: 505px;
  position: fixed;
  top: calc(50% - 398px/2);
  left: calc(50% - 448px/2);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 32px;
  z-index: 100;
  background: var(--card);
}

.membership-dialog {
  position: fixed;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
  top: calc(50% - 525px/2);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 32px;
  z-index: 100;
  background: var(--card);
}

.membership-content {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.dialog-content, .dialog-content-linked {
  display: flex;
  flex-direction: column;
}

.dialog-content-aws, .dialog-content-aws-success, .dialog-content-github-success, .dialog-content-harbor, .dialog-content-harbor-success, .dialog-content-gcp, .dialog-content-gcp-success, .dialog-content-gcp-permissions, .dialog-content-azure, .dialog-content-azure-success {
  flex-direction: column;
}

.dialog-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.dialog-title, .dialog-title-linked, .dialog-title-aws, .dialog-title-success, .dialog-title-harbor, .dialog-title-gcp, .dialog-title-gcp-permissions, .dialog-title-azure {
  font-family: Sora;
  font-weight: 800;
  font-size: 18px;
  line-height: 120%;
}

.aws-policies {
  font-family: Sora;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
}

.azure-policies {
  font-family: Sora;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
}

.gcp-policies {
  font-family: Sora;
  font-weight: 600;
  font-size: 16px;
  line-height: 120%;
}

#line {
  width: 95%;
  height: 40px;
}

.aws-policy-error {
  border: none;
  overflow: visible;
  text-align: center;
  height: 5px;
}

.aws-policy-error:after {
  content: 'OR';
  padding: 0 4px;
  position: relative;
  top: -13px;
}

.license-key {
  width: 384px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 32px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
}

.dialog-title-aws, .dialog-title-success, .dialog-title-harbor, .dialog-title-gcp, .dialog-title-gcp-permissions, .dialog-title-azure {
  display: none;
}

.success-text {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 120%;
  margin-bottom: 24px;
}

.port-tag , .ip-tag {
  display: inline;
  font-size: 16px;
  border-radius: 5px;
  padding: 3px 5px;
  margin-right: 8px;
  margin-bottom: 8px;
  display: inline;
}

.del, .ip-del, .internalDel, .externalDel {
  border: none;
  mix-blend-mode: normal;
  border-radius: 4px;
}

.del:hover, .internalDel:hover, .externalDel:hover {
  cursor: pointer;
}

.dialog-delete {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.dialog-delete:hover {
  cursor: pointer;
}

.dialog-delete:focus {
  background: var(--hover-bg);
  border: 2px solid var(--secondary-blue);
}

.upload-file {
  border-radius: 4px;
}

.upload-file:hover {
  cursor: pointer;
}

.upload-file:focus {
  background: var(--hover-bg);
  border: 2px solid var(--secondary-blue);
}

.copy-info {
  mix-blend-mode: normal;
  border-radius: 4px;
  padding-left: 10px;
}

.dialog-inputs {
  display: flex;
  flex-direction: row;
}

.dialog-input-account {
  width: 530px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-bottom: 24px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
}

.dialog-input-linked {
  width: 384px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 32px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
}

.gcp-dialog-helper {
  font-family: Sora;
  font-size: 12px;
  font-weight: 700;
  margin-top: 15px;
  text-align: center;
}

.dialog-input-volume, .dialog-input-ingress, .dialog-input-internal-port,
.dialog-input-service-internal, .dialog-input-service-external,
.dialog-input-nodepool-name, .dialog-input-linked-aws {
  width: 384px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 20px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
}

.dialog-input-config,
.dialog-input-config-mount,
.dialog-input-secret-mount,
.dialog-input-secrets,
.dialog-select-secrets,
.dialog-select-config,
.dialog-select-ingress,
.dialog-select-nodepool-vm,
.dialog-select-nodepool-os,
.dialog-select-storageClass,
.dialog-select-storageSize,
.dialog-select-storageUnit,
.dialog-input-autoscale {
  height: 38px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
}

.dialog-input-nodepool-name {
  width: 400px;
}

.dialog-input-config {
  width: 400px;
  padding: 12px 16px;
  margin-bottom: 2px;
  margin-left: 30px;
}

.dialog-input-config-mount {
  width: 400px;
  padding: 12px 16px;
  z-index: 1;
}

.dialog-input-secret-mount {
  width: 400px;
  padding: 12px 16px;
  z-index: 1;
}

.dialog-input-secrets {
  width: 400px;
  padding: 12px 16px;
  z-index: 1;
  margin-left: 30px;
}

.dialog-select-secrets {
  width: 400px;
  margin-left: 30px;
  padding-left: 10px;
}

.dialog-select-config {
  width: 400px;
  margin-left: 30px;
  padding-left: 10px;
}

.dialog-select-ingress {
  width: 384px;
  padding-left: 10px;
}

.dialog-select-nodepool-vm {
  width: 375px;
  margin-top: 25px;
  padding-left: 12px;
  background-position-x: 350px;
}

.dialog-select-nodepool-os {
  width: 375px;
  padding-left: 12px;
  margin-top: 5px;
  background-position-x: 350px;
}

.dialog-select-storageClass {
  width: 175px;
  margin-top: 20px;
  padding-left: 5px;
}

.dialog-select-storageSize {
  width: 95px;
  margin-top: 20px;
  margin-left: 10px;
  padding-left: 10px;
}

.dialog-select-storageUnit {
  width: 95px;
  margin-top: 20px;
  margin-left: 10px;
  padding-left: 10px;
}

.dialog-input-autoscale {
  padding: 6px 8px;
}

input.dialog-input-autoscale {
  width: 50px;
}

.dialog-input-label-volume,
.dialog-input-label-nodegroup,
.dialog-input-label-ingress,
.dialog-input-label-service,
.dialog-input-label-ingress-hostname,
.dialog-input-label-ingress-certificate,
.dialog-input-label-commands,
.dialog-input-label-arguments,
.dialog-input-label-settings,
.dialog-input-label-account,
.dialog-input-label-linked,
.dialog-input-label-linked-aws,
.dialog-input-label-linked-harbor,
.dialog-input-label-linked-azure,
.dialog-input-label-secrets-left,
.dialog-input-label-secrets-right,
.dialog-input-label-secrets-mountPath,
.dialog-select-label-secrets-mountSelect,
.dialog-select-label-storageClass,
.dialog-select-label-storageSize,
.dialog-select-label-storageUnit,
.dialog-input-label-config-right,
.dialog-input-label-config-left,
.dialog-input-label-config-mountPath,
.dialog-select-label-config-mountSelect,
.dialog-select-label-helm-secret,
.dialog-select-label-nodepool-vm,
.dialog-select-label-nodepool-os {
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  z-index: 30;
}

.dialog-input-label-volume {
  position: absolute;
  top: 73px;
  left: 44px;
  padding: 4px;
}

.dialog-input-label-nodegroup {
  position: absolute;
  top: 71px;
  left: 44px;
  padding: 4px;
}

.dialog-input-label-ingress {
  position: absolute;
  top: 90px;
  left: 44px;
  padding: 2px;
}

.dialog-input-label-service {
  position: relative;
  top: -53px;
  left: 13px;
  padding: 2px;
  width: 138px;
}

.dialog-input-label-ingress-hostname {
  position: relative;
  top: 10px;
  left: 13px;
  padding: 2px;
}

.dialog-input-label-ingress-certificate {
  position: relative;
  top: 10px;
  left: 13px;
  padding: 2px;
}

.input-wrapper {
  display: block;
}

.dialog-input-label-commands {
  position: absolute;
  top: 72px;
  left: 44px;
  padding: 2px;
}

.dialog-input-label-arguments {
  position: absolute;
  top: 129px;
  left: 44px;
  padding: 2px;
}

.deploymentCommand {
  overflow-y: scroll;
  max-height: 95vh;
}

.deploymentCommand .mat-divider {
  margin: 30px 0 !important;
}

.deploymentCommand mat-slider {
  width: 80%;
}

.dialog-input-label-settings {
  position: absolute;
  top: 163px;
  left: 44px;
  padding: 4px;
}

.dialog-input-label-account {
  position: absolute;
  margin-left: 10px;
  margin-top: -10px;
  padding: 2px;
  margin-bottom: 1px;
}

.dialog-input-label-linked {
  position: absolute;
  top: 195px;
  left: 44px;
  padding: 2px;
  margin-bottom: 1px;
}

.dialog-input-label-linked-aws, .dialog-input-label-linked-harbor, .dialog-input-label-linked-azure {
  position: absolute;
  top: 23px;
  left: 10px;
  padding: 2px;
  margin-bottom: 1px;
}

.ports-wrapper {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 14px;
  margin-bottom: -14px;
}

.ips-wrapper {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.mat-mdc-dialog-actions {
  padding: 0 !important;
}

.dialog-input-label-secrets-left {
  position: absolute;
  top: 76px;
  left: 58px;
  padding: 2px;
}

.dialog-input-label-secrets-right {
  position: absolute;
  top: 76px;
  left: 470px;
  padding: 2px;
}
.dialog-input-label-secrets-mountPath {
  position: relative;
  top: -49px;
  left: 40px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-secrets-mountSelect {
  position: relative;
  top: -50px;
  left: 47px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.uploadFileLabel {
  display: flex;
  align-items: center;
  color: #121826;
  padding: 0.5rem 1rem;
  font-family: Poppins;
  border-radius: 0.3rem;
  cursor: pointer;
  width: 170px;
}

.dialog-select-label-storageClass {
  position: relative;
  top: -52px;
  left: 11px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-storageSize {
  position: relative;
  top: -52px;
  left: 17px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-storageUnit {
  position: relative;
  top: -52px;
  left: 17px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-input-label-config-right, .dialog-input-label-config-left {
  position: relative;
  top: 9px;
  margin-bottom: -9px;
  left: 47px;
  padding: 2px;
  height: 15px;
  max-width: 78px;
}

.dialog-input-label-config-mountPath {
  position: relative;
  top: -49px;
  left: 30px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-config-mountSelect {
  position: relative;
  top: -50px;
  left: 47px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-helm-secret {
  position: relative;
  top: 10px;
  left: 23px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-nodepool-vm {
  position: relative;
  top: -50px;
  left: 20px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-select-label-nodepool-os {
  position: relative;
  top: -20px;
  left: 20px;
  margin-bottom: 1px;
  padding: 2px;
  white-space: nowrap;
  height: 15px;
  max-width: 77px;
}

.dialog-input-label-autoscale {
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  width: 90px;
  padding: 4px;
}

fieldset {
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 18px 12px 0px 12px;
}

fieldset > legend {
  position: absolute;
  max-width: max-content;
  top: -10px;
  left: 18px;
  z-index: 30;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 2px;
}

#dialog-autoscale-enable-row {
  height: 35px;
}

.dialog-autoscale-row {
  height: 45px;
}

.dialog-instruction {
  font-family: Sora;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: -4px;
}

#configMapParent {
  max-height: 420px;
  overflow: scroll;
  width: 98%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#configMapParent::-webkit-scrollbar {
  display: none;
}

#secretParent {
  max-height: 420px;
  overflow: scroll;
  width: 98%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#secretParent::-webkit-scrollbar {
  display: none;
}

.dialog-buttons {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 22px;
}

.dialog-buttons-org {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.dialog-buttons-config {
  position: relative;
  display: flex;
  flex-direction: row;
  padding-left: 247px;
  margin-top: 22px;
}

.dialog-buttons-secret {
  position: relative;
  display: flex;
  flex-direction: row;
  padding-left: 247px;
  margin-top: 22px;
}

.mask {
  -webkit-text-security: disc !important;
}

.linked-accounts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.github-icon {
  height: 40px;
  width: auto;
}

.unlink {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 140%;
  margin-left: auto;
  margin-top: 15.5px;
}

.unlink:hover {
  text-decoration: underline;
  font-style: italic;
  cursor: pointer;
}

.back {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  margin-bottom: 14px;
  width: 60px;
  padding: 4px;
  border: none;
}

.back:hover {
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
}

.subscription-text {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  margin-bottom: 12px;
}

.unlinked-text {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  margin-bottom: 12px;
}

.unlinked-accounts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.unlinked-accounts-non-admin {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.unlinked-account-type {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  margin-top: 14px;
}

.account-group, .unlinked-account-group, .aws-header, .harbor-header, .azure-header {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  padding: 4px;
}

.unlinked-account-group:hover {
  background-color: #454D60;
  cursor: pointer;
}

.unlinked-account-group:active {
  outline: 2px solid #006FA6;
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.linked-accounts-icon {
  position: static;
  width: 40px;
  height: 40px;
  margin-right: 24px;
}

.account-info {
  display: flex;
  flex-direction: column;
}

.account-type {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  margin-top: 8px;
}

.account-user {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  margin-top: 4px;
}

.proj-dialog {
  position: absolute;
  width: 550px;
  left: 445px;
  top: 80px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 30px;
}

.proj-dialog-content {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.proj-dialog-title {
  display: block;
  text-align: center;
}

.proj-dialog-input {
  font-family: Sora;
  font-weight: 800;
  font-size: 18px;
  line-height: 120%;
  border: 1px solid #BDC9D5;
}

.proj-dialog-buttons {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 30px;
  margin-bottom: 10px;
}

.proj-dialog-button {
  height: 210px;
  width: 210px;
  font-size: 30px;
  border: none;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  border-radius: 4px;
  white-space:normal !important;
  word-wrap:break-word;
}

.proj-dialog-button:disabled {
  opacity: 55%;
}

.proj-dialog-label {
  text-align: center;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 120%;
}

.cancel-button {
  width: 184px;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
}

.cancel-button:hover {
  border: 1px solid var(--secondary-blue);
  color: var(--secondary-blue);
}

.cancel-button-org {
  width: 24.5vw;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
}

.delete-button-org {
  width: 24.5vw;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
}

.delete-button-org:disabled {
  opacity: 55%;
  width: 24.5vw;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
}

.cancel-button-solo {
  width: 384px;
}

.cancel-account-button {
  width: 530px;
  margin-top: 25px;
  height: 48px;
  border: 1px solid #121826;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
}

.cancel-account-button:hover {
  border: 1px solid var(--secondary-blue);
  color: var(--secondary-blue);
}

.cancel-account-button:focus {
  outline: 2px solid var(--secondary-blue);
}

.save-button {
  width: 184px;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
  margin-left: 14px !important;
  background-color: var(--primary-blue);
  color: var(--button-primary-fg);
}

.save-button:enabled:hover {
  background-color: var(--secondary-blue);
}

.save-button:focus {
  outline: 2px solid var(--secondary-blue);
}

.save-button-account {
  width: 184px;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: var(--primary-blue);
  color: var(--button-primary-fg);
}

.close-button {
  width: 184px;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
  margin-left: 14px;
  background-color: var(--primary-blue);
  color: var(--button-primary-fg);
}

.close-button:hover {
  background-color: var(--secondary-blue);
}

.close-button:focus {
  outline: 2px solid var(--secondary-blue);
}

.save-button:disabled {
  cursor: not-allowed;
  background-color: var(--button-disabled-bg);
}

.cancel-account-button:disabled {
  cursor: not-allowed;
  background-color: var(--button-disabled-bg);
}

.close-button:disabled {
  background-color: #BDC9D5;
  cursor: not-allowed;
}

.plus-button {
  border: none;
  background-color: transparent;
  padding: 0;
  margin-top: 30px;
  /* margin-left: 8px; */
  cursor: pointer;
  pointer-events: auto;
}

.secrets-toggle {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  padding: 0;
  outline: none;
  border-radius: 5px;
  z-index: 9999;
	position: absolute;
	top: 22%;
	right: 20px;
}

.aws-secrets-toggle, .harbor-secrets-toggle {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  padding: 0;
  outline: none;
  border-radius: 5px;
  z-index: 9999;
	position: absolute;
	top: 55%;
	right: 10px;
}

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.configMapChild {
  display: flex;
}

.configMapMounts {
  width: 98%;
  height: 98%;
}

.plus-secret {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  padding: 0;
  outline: none;
  border-radius: 5px;
  margin-top: -37px;
  margin-left: 890px;
  position: absolute;
  z-index: 1000;
}

.plus-configMap {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  padding: 0;
  outline: none;
  border-radius: 5px;
  margin-top: -37px;
  margin-left: 890px;
  position: absolute;
  z-index: 1000;
}

.edit-configMap {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  padding: 0;
  outline: none;
  border-radius: 5px;
  margin-top: 13px;
  z-index: 1000;
  margin-left: 10px;
}

.projects-bar {
  width: 168px;
  height: 44px;
  left: 50.69%;
  top: 16px;
  z-index: 10;
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ng-bar {
  width: 168px;
  height: 44px;
  left: 62.69%;
  top: 16px;
  z-index: 10;
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 95%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 4px;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0s;
  z-index: 1000;
  max-width: max-content;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  text-align: center;
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0s;
  z-index: 1000;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
  transition-delay: 300ms;
}

.plus-configMap:hover, .plus-secret:hover, .edit-configMap:hover {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.plus-configMap:active, .plus-secret:active, .edit-configMap:active {
  border-radius: 4px;
  outline: 2px solid var(--secondary-blue);
}

.projects-dropdown-text {
  margin: 0 auto;
}

.projects-bar-content {
  display: flex;
  flex: row;
  justify-content: center;
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%; /* identical to box height, or 17px */
}

.projects-bar:hover, .ng-bar:hover {
  cursor: pointer;
}

.projects-bar:focus
.projects-bar:focus + .projects-dropdown-menu
.ng-bar:focus
.ng-bar:focus + .ng-dropdown-menu {
  border: none;
}

.projects-dropdown-arrow {
  width: 20px;
  height: 20px;
  right: 8px;
  top: 6px;
}

.projects-dropdown-menu {
  display: none;
  flex-direction: column;
  width: 168px;
  height: 46px;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 8px;
}

.ng-dropdown-menu {
  display: none;
  flex-direction: column;
  width: 168px;
  height: 46px;
  font-family: Poppins;
  box-sizing: border-box;
  border-radius: 8px;
}

.projects-dropdown-group {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  padding: 0px;
}

.projects-dropdown-option {
  position: relative;
  width: 166px;
  height: 44px;
  font-family: Poppins;
  border: none;
  box-sizing: border-box;
  border-radius: 8px;
  margin-bottom: 2px;
}

.projects-dropdown-option:hover {
  border: none;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 4px;
  cursor: pointer;
}

.divider {
  border-top: 1px solid #DBE6F0 !important;
}

.invite-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 94px 250px 0px 250px;
}

.invite-content-header {
  display:flex; justify-content:center; align-items:center;
  gap:.35em; padding:0 16px;
  font-size:clamp(24px, 6vw, 40px);
  line-height:1.2; text-align:center; white-space:nowrap;
  padding: 45px 175px 0px 175px;
}

.invite-content-header .company {
  max-width:min(60vw, 28ch);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  vertical-align:bottom;
  overflow-wrap:anywhere;
}

.invite-input {
  width: 30vw;
  height: 56px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  border: 1px solid #BDC9D5;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  margin-bottom: 24px;
}

.organization-input {
  width: 50vw;
  height: 5vh;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  border: 1px solid #BDC9D5;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  margin-bottom: 40px;
}

.invites-input {
  border: none;
  background-color: inherit;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
  margin-bottom: 2px;
}

.invites-input:focus {
  outline: none;
  border-radius: 4px;
}

.invites-input.error {
  border: 1px solid red;
  border-radius: 4px;
  outline: none;
}

.error-message {
  color: red;
  font-size: 12px;
  margin-left: 60px;
}

.error-color {
  color: #ff0033;
}

.error-font-size {
  font-size: 12px;
}

.custom-panel {
  position: relative !important;
  transform: translateY(0) !important;
  top: 0 !important;
  border-radius: 4px !important;
}

.invite-button {
  background-color: green !important;
  color: white !important;
  margin-right: 20px !important;
  width: 25% !important;
  padding: 0 0px !important;
}

.invite-button:disabled {
  background-color: lightgray !important;
  color: gray !important;
  cursor: not-allowed !important;
}

.delete-button {
  background-color: red !important;
  color: white !important;
  margin-right: 20px !important;
  width: 25% !important;
  padding: 0 0px !important;
}

.remove-org-button {
  background-color: gray !important;
  color: white !important;
  margin-right: 20px !important;
  width: 25% !important;
  padding: 0 0px !important;
}

.custom-select .mat-select-trigger {
  background-color: inherit;
  border: none;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.custom-select .mat-select-trigger .mat-select-value {
  padding: 0;
}

.mat-table {
  margin-top: 10px;
  margin-left: 11px;
  margin-bottom: 10px;
  width: 66vw;
  border-radius: 8px;
}

.mat-row {
  height: 65px !important;
}

.mat-cell {
  border: none !important;
}

.mat-header-cell {
  border: none !important;
}

.login-input:hover,
.organization-input:hover,
.login-input-password:hover,
.dialog-input-account:hover,
.dialog-input-linked:hover,
.dialog-input-linked-aws:hover,
.dialog-input-linked-harbor:hover,
.dialog-input-linked-azure:hover {
  border: 1px solid var(--secondary-blue);
}

.login-input:focus,
.login-input-password:focus,
.dialog-input-account:focus,
.dialog-input-linked:focus,
.dialog-input-linked-aws:focus,
.dialog-input-linked-harbor:focus,
.dialog-input-linked-azure:focus {
  border: none;
  outline: 2px solid var(--secondary-blue);
}

.organization-input-label {
  position: absolute;
  margin-left: 10px;
  margin-top: -12px;
  z-index: 30;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 3px;
}

.organization-invites-label {
  position: relative;
  top: 17px;
  left: 20px;
  width: 75px;
  z-index: 30;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 3px;
  display: inline-block;
  white-space: nowrap;
}

.organization-invites-small-label {
  position: relative;
  top: 16px;
  left: 15px;
  width: 48px;
  z-index: 30;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 3px;
  display: inline-block;
}

.organization-invites-large-label {
  position: relative;
  top: 16px;
  left: 15px;
  width: 123px;
  z-index: 30;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 3px;
  display: inline-block;
}

.submit-button {
  width: 184px;
  height: 48px;
  border: 1px solid transparent;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  box-sizing: border-box;
  border-radius: 4px;
  margin-left: 14px;
  background-color: var(--primary-blue);
}

.submit-button:hover {
  border: 1px solid var(--secondary-blue);
  background-color: var(--secondary-blue);
}

.invite-submit-button {
  width: 30vw;
  height: 48px;
  border: 1px solid transparent;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: var(--primary-blue);
}

.submit-button-org {
  width: 24.5vw;
  height: 48px;
  border: 1px solid transparent;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  border-radius: 4px;
  margin-left: 1vw !important;
  background-color: var(--primary-blue);
}

.submit-button:disabled {
  background-color: #BDC9D5;
}

.back-button-org {
  width: 80px;
  height: 32px;
  background-color: transparent;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: 15px 0 !important;
  border: 1px solid transparent;
}

.social-button {
  border: 1px solid darkgray;
  background-color: lightgray;
}

.dialog-content-mfa {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dialog-content-mfa-option {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-radius: 4px;
  padding: 10px 4px;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  margin-top: 5px;
}

.dialog-content-mfa-option:hover {
  cursor: pointer;
  background-color: var(--hover-bg);
}

.dialog-content-mfa-option:active {
  outline: 2px solid var(--secondary-blue);
}

#authApp, .dialog-content-totp, .dialog-content-totp-unlink {
  display: none;
}

.add-mfa-button {
  margin: 10px 0;
  width: 100%;
}

.mfa-another-method {
  margin-top: 20px;
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.mfa-error {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-top: -20px;
  width: 384px;
}

.mfa-login-button {
  margin-top: 12px;
  margin-left: 0px;
  width: 384px;
}

.mfa-another-method:hover {
  text-decoration: underline;
}

.mfa-login-button {
  margin-top: 12px;
  margin-left: 0px;
  width: 384px;
}

.mfa-error {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-top: -20px;
  width: 384px;
}

.mfa-resend-success {
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-top: -20px;
}

.mfa-dialog {
  width: 505px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid transparent;
  padding: 32px;
  z-index: 100;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
}

.resetPasswordText {
  font-family: Sora;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  margin-top: 12px;
}

.register-eye-toggle, .login-eye-toggle {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  font-size: 20px;
  border-radius: 5px;
  float: right;
  z-index: 1;
  position: absolute;
  top: 15%;
  right: 10px;
}

.register-eye-toggle:focus, .login-eye-toggle:focus, .api-eye-toggle:focus {
  outline: none;
}

.api-eye-toggle {
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
  border: none;
  font-size: 17px;
  border-radius: 5px;
  float: right;
  z-index: 1;
}

.is-invalid {
  border-color: #EA5D31;
  border-width: 2px;
}

.invalid-feedback-secret {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  width: 184px;
  margin: none;
}

.invalid-feedback-config {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-left: 38px;
}

.invalid-feedback-config-mount {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  width: 160px;
  margin-top: -16px;
  margin-left: 30px;
}

.invalid-label-nodepool {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-top: 10px;
}

.invalid-vm-nodepool {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  margin-top: -16px;
}

.invalid-feedback-secret-val {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  width: 200px;
  margin-top: -16px;
}

.invalid-feedback-config-val {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  width: 160px;
  margin-left: 24px;
}

.invalid-feedback-config-path {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 140%;
  width: 200px;
  margin-top: -16px;
}

.is-invalid-secret-key, .is-invalid-secret-val {
  width: 400px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 20px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
  border-color: #EA5D31;
}

.is-invalid-config-key, .is-invalid-config-val {
  width: 400px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  padding: 12px 16px;
  border-color: #EA5D31;
}

.is-invalid-secret-eye {
  top: 29%;
}

.is-invalid-secret-mount {
  width: 400px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  border-color: #EA5D31;
}

.is-invalid-config-mount {
  width: 400px;
  height: 38px;
  box-sizing: border-box;
  border-radius: 4px;
  font-family: Sora;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
  border-color: #EA5D31;
}

.is-invalid:hover {
  border: 2px solid #EA5D31;
}

.is-invalid:focus {
  border: none;
  outline: 2px solid #EA5D31;
}

.flexContent {
  position: relative;
  flex: 1;
  overflow: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.flexContent::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.flexContent {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.flexInnerContent {
  width: 100%;
  height: 100vh;
  position: relative;
  flex: 1;
}

/* svg stuff */
#paper svg {
  background: transparent;
}
#paper svg .link {
  z-index: 2;
}

.glowRed {
  box-shadow:
    inset 0 0 50px #000,      /* inner white */
    inset -20px 100px 20px #E80000,  /* inner right red short */
    inset -20px 0 100px #E80000, /* inner right red broad */
    0 0 10px #E80000,            /* outer red */
    0 0 10px #E80000;         /* outer right red */
}

.darkmode-toggle {
  position: absolute;
  right: 0px; bottom: 0px;
  width: 90px;
  height:90px;
  z-index: 10;
  border-radius: 8px;
}

.darkmode-button:focus {
  outline: none;
}

.darkmode-button {
  width: 50px;
  height: 50px;
  z-index: 11;
  border: 0 transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  pointer-events: auto;
}

.bottomright {
  position:  absolute;
  width: 50px;
  height:50px;
  z-index: 10;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
}

.bottomleft {
  position:  absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  background: #242936;
}

.tooltip-inner {
  max-width: max-content;
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 4px;
  text-align: center;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-width: 0.4rem 0.4rem 0;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-right .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-width: 0.4rem 0.4rem 0.4rem 0;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-width: 0 0.4rem 0.4rem 0.4rem;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-width: 0.4rem 0 0.4rem 0.4rem;
}

.custom-foreign-object {
  overflow: visible;
}

.harborIcon {
  position: static;
  width: 22px;
  height: 22px;
  right: 15px;
  top: 0px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.harpoonIcon {
  position: static;
  width: 22px;
  height: 22px;
  right: 15px;
  top: 0px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.generateAPIToken {
  width: 530px;
  height: 50px;
  background: #48C2FF;
  border-radius: 4px;
  border: #48C2FF;
  margin-top: 15px;
}

.generateAPIToken:disabled {
  background-color: #BDC9D5;
  cursor: not-allowed;
}

.container-logs {
  padding: 32px;
  padding-top: 0px;
  height: 50%;
  width: 50%;
}

.container-logs-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.container-logs-header {
  margin-top: 32px;
  display: flex;
  flex-direction: row;
}

.container-logs-delete {
  margin-left: auto;
}

.container-logs-footer {
 height: 32px;
}

.container-logs-refresh {
  margin-left: 5px;
  border-radius: 4px;
}

.container-logs-refresh:focus {
  border: none;
  outline: none;
}

.container-logs-refresh:hover {
  cursor: pointer;
}

.logs-title {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  line-height: 120%;
  margin: 0px 0px 0px 20px;
}

.logs-data {
  height: 100%;
  width: 100%;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 140%;
  border: none;
  overflow: scroll;
}

.loader-logs,
.loader-logs:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader-logs {
  width: 20vmin;
  height: 20vmin;
  margin: auto;
  margin-top: 5%;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.element-logs-text {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-size: 28px;
  font-size: 2vw;
  margin-top: 20px;
  line-height: 120%;
  text-align: center;
}

.cupon-promo {
  border: none;
  color: #48C2FF;
  font-weight: bold;
  background: none;
  font-size: 16px;
}

.cluster-info-drop-down {
  background: none;
  width: 100%;
  max-width: 100%;
  max-height: 560px;
  box-sizing: border-box;
  overflow: auto;
  resize: vertical;
  outline: none;
}

.promo-input {
  width: 384px;
  height: 44px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 10px;
  padding: 12px 16px;
  line-height: 24px;
  font-family: monospace;
  font-size: 19px;
}

.promo-input::placeholder { /* Most modern browsers support this now. */
  color: '#269';
}

.relative {
  position: relative;
}

.tutorial-container {
  width: 400px;
  height: 150px;
  position: absolute;
  padding-right: 10px;
  border-radius: 8px;
  z-index: 1002;
}

.tutorial-delete {
  mix-blend-mode: normal;
  border-radius: 4px;
}

.header {
  margin-top: 10px;
  margin-bottom: 0px;
  font-family: "Helvetica Neue", Helvetica ,Arial, sans-serif;
  font-size: 1.7rem;
}

.stepHome {
  top: 209px;
  left: -24px;
  z-index: 100;
  height: 212px;
}

.stepHomeExpand {
  top: 100px;
  left: 25px;
  z-index: 100;
  height: 212px;
}

.stepHomeExpandAccount {
  top: 17px;
  left: -25px;
  z-index: 100;
  height: 212px;
}

.stepHomeNoProject {
  left: 200px;
  z-index: 100;
  top: 280px;
}

.stepExpandSidebar {
  left: 375px;
  top: calc(50vh - 72px);
}

.step1 {
  right: -428px;
  top: -97px;
  height: 200px;
}

.step2 {
  top: 100px;
}

.step3 {
  top: -145px;
  left: 13px;
}

.step4 {
  right: -395px;
  top: -44px;
}

.step5 {
  left: 5px;
  top: -58px;
}

.stepDragFromSideBar {
  left: -355px;
}

.step7 {
  top: -160px;
  left: -92px;
}

.step8 {
  top: -145px;
  left: -59px;
}

.stepAddEnvs {
  left: -373px;
  height: 175px;
}

.stepEnterThirdConfig {
  left: -380px;
  height: 195px;
}

.stepEnvSave {
  right: -110px;
  top: -105px;
}

.step11 {
  top: -160px;
  left: -92px;
}

.stepClickUserSettings {
  left: -440px;
  top: -34px;
  cursor: default;
}

.stepClickLinkedAccount {
  left: -280px;
}

.stepLinkAccounts {
  left: 26px;
  top: -57px;
}

.stepLinkAccounts-add-aws {
  left: -78px;
  top: -57px;
}

.stepLinkAccounts-add-github {
  left: -78px;
  top: -100px;
}

.stepLinkAccounts-configure-aws {
  left: -410px;
  top: -64px;
}

.stepClickGithubSearch {
  left: 320px;
  top: 18px;
}

.stepSearchGithub {
  right: -428px;
  top: -72px;
  height: 145px;
}

.stepDragGithubDemo {
  top: 383px;
}

.stepDragGithubDemoFront {
  top: 480px;
}

.step21 {
  top: 47px;
  left: -16px;
  /* left: -22px; when import is added */
}

.step22 {
  top: 200px;
  left: -50px;
}

.step23 {
  top: 200px;
  left: 5px;
}

.step24 {
  top: -143px;
  left: -114px;
}

.stepCopyMongoName {
  left: -102px;
  top: 40px;
  height: 155px;
}

.step27 {
  top: -160px;
  left: -92px;
  width: 465px;
}

.step28 {
  top: -150px;
  left: -58px;
}

.step33 {
  top: -145px;
  left: 13px;
}

.stepPasteConnectionString {
  top: 60px;
  left: 640px;
  width: 500px;
}

.stepEnterBackendPort {
  left: 385px;
  top: -44px;
}

.stepSaveBackendPort {
  left: 5px;
  top: -58px;
}

.step36 {
  top: 200px;
  left: -52px;
}

.step37 {
  top: 195px;
  left: 62px;
}

.step38 {
  top: -144px;
  left: -113px;
  width: 435px;
}

.step41 {
  top: -170px;
  left: -85px;
  height: 165px;
}

.stepCopyBackendName {
  top:170px;
  height: 225px;
}

.stepCopyBackendNameOnly {
  top:170px;
  left: 143px;
}

.stepCopyBackendIsn {
  top: 40px;
  left: 565px;
}

.step47 {
  top: -160px;
  left: -91px;
}

.step48 {
  top: -149px;
  left: -62px;
}

.stepSaveIngressPort {
  left: 370px;
  top: -36px;
}

.step51 {
  top: 200px;
  left: 62px;
  width: 425px;
}

.step52 {
  top: -145px;
  left: -102px;
}

.stepGoBackToCopyAgain {
  right: -400px;
  top: -100px;
}

.step62 {
  top: -145px;
  left: -58px;
}

.stepPasteThirdConnection {
  top: 60px;
  left: 480px;
}

.step63 {
  top: -148px;
  left: 91px;
}

.stepWrongConfig {
  right: -304px;
}

.stepExitCopyStep {
  top: 70px;
  left: 250px;
  height: 100px;
}

.stepAddNewNode {
  left: -358px;
  top: 62px;
}

.arrowRight::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 100%;
  top: 76px;
	border: 8px solid transparent;
	border-right: none;
}

.arrowRightTop::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 100%;
  top: 30px;
	border: 8px solid transparent;
	border-right: none;
}

.arrowTop::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
  left: 76px;
	border: 8px solid transparent;
	border-top: none;
}

.arrowTopDeploy::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
  left: 67px;
	border: 8px solid transparent;
	border-top: none;
}

.arrowBottom::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
  left: 190px;
	border: 8px solid transparent;
	border-bottom: none;
}

.arrowBottomLeft::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
  left: 75px;
	border: 8px solid transparent;
	border-bottom: none;
}

.arrowBottomRight::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
  right: 50px;
	border: 8px solid transparent;
	border-bottom: none;
}

.arrowLeft::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	right: 100%;
  top: 76px;
	border: 8px solid transparent;
	border-left: none;
}

.arrowTopRight::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
  left: 350px;
	border: 8px solid transparent;
	border-top: none;
}

.arrowTopLeft::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
  left: 25px;
	border: 8px solid transparent;
	border-top: none;
}

.arrowTopMiddle::before {
  content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
  left: 195px;
	border: 8px solid transparent;
	border-top: none;
}

.slideshow-container {
  position: relative;
  margin:0;
  padding-left: 10px;
}

.mySlides {
  padding: 5px 15px 5px 15px;
  text-align: center;
}

.homeStep {
  padding: 5px 30px 10px 30px;
  text-align: center;
}

.nextArrow {
  font-size: 20px;
}

.next {
  cursor: pointer;
  position: absolute;
  padding: 4px 8px;
  font-weight: bold;
  border-radius: 3px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  bottom: -10px;
  transform: translate(-50%, -50%);
  left: 50%;
}

.next:hover {
  text-decoration: none;
}

.title {
  margin-top: 5px;
  padding: 0 10px 0 0;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica ,Arial, sans-serif;
}

.dismiss-tutorial {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  z-index: 10;
}

.onGraph {
  display: none;
}

.displayNone {
  display: none;
}

.gcp-permission-container {
  display: flex;
  margin-top: 15px;
  gap: 5px;
  flex-direction: column;
}

.gcp-permission-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.gcp-permissions-button {
  width: 150px;
  height: 40px;
  background: #008FD6;
  border-radius: 4px;
  border: none;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  color: #FFFFFF;
}

.gcp-permissions-button:hover {
  cursor: pointer;
}

.gcp-err-msg {
  color: #EA5D31;
  font-family: Sora;
  font-size: 14px;
  line-height: 125%;
  text-align: center;
}

.vm-container {
  position: relative;
  display: inline-block;
}

.vm-loader {
  /* Spinner styles */
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;

  /* Positioning the spinner over the select box */
  position: absolute;
  top: 20%;
  left: 44%;
  transform: translate(-50%, -50%);
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Adjust the select box styling as needed */
.provider-dropdown.user-provider {
  width: 100%;
  /* Other styling as needed */
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

app-harpoon-graph article[class*='read-only'] .joint-cell {
  pointer-events: none;
}

app-harpoon-graph article[class*='read-only'] .containerInfoButton,
app-harpoon-graph article[class*='read-only'] .podYamlButton,
app-harpoon-graph article[class*='read-only'] .volumeYamlButton,
app-harpoon-graph article[class*='read-only'] .ingressYamlButton,
app-harpoon-graph article[class*='read-only'] .externalLinkButton,
app-harpoon-graph article[class*='read-only'] .secretYamlButton,
app-harpoon-graph article[class*='read-only'] .configMapYamlButton,
app-harpoon-graph article[class*='read-only'] .virtualServiceYamlButton,
app-harpoon-graph article[class*='read-only'] .virtualServiceOpenButton,
app-harpoon-graph article[class*='read-only'] .logButton {
  pointer-events: auto;
}

#navigator {
  z-index: 10;
  padding: 5px;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
}

#navigator .joint-navigator {
  border: none;
}

#navigator #floating-container div {
  display: inline-block;
}

#navigator #floating-container div[data-type='separator'] {
  min-width: 5px;
}

#navigator #floating-container .joint-toolbar {
  top: -320px;
}

#navigator button {
  border: none;
  color: #BDC9D5;
  background-color: #242936;
}

#navigator button:hover {
  border-radius: 4px;
  border: 1px transparent;
}

#hideSidebar {
  position: absolute;
  top: calc(50vh);
  left: 352px;
  border-radius: 50%;
  z-index: 1001;
  cursor: pointer;
}

#hideSidebar:hover {
  color: #8cc6e3;
}

#sidebar {
  transition: transform 0.25s ease-in-out;
}

.bottomleft, cluster-control {
  left: 376px;
  transition: transform 0.35s ease-in-out;
}

.collapsed {
  transform: translateX(-352px);
}

.collapsed-bottom-left {
  transform: translateX(-252px);
}

[data-type="zoomSlider"] {
  font-family: var(--bs-body-font-family);
  font-size: 12px;
}

[data-type="zoomSlider"] output {
  padding-left: 6px;
}

/* For WebKit Browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px; /* Width for vertical scrollbars */
  height: 6px; /* Height for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  border-radius: 5px; /* Rounded edges */
}

::-webkit-scrollbar-thumb {
  background: #3a3a3a; /* Medium-dark thumb color */
  border-radius: 5px; /* Rounded edges for the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: #555; /* Lighter thumb color on hover */
}

html.harpoon {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #3a3a3a #1e1e1e; /* Thumb color, track color */
  --mat-autocomplete-background-color: #242936 !important;
  --mat-form-field-container-height: 39px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 8px;
  --mdc-outlined-text-field-input-text-placeholder-color: #757575;
  --mdc-outlined-text-field-label-text-weight: 400;
  --mdc-outlined-text-field-label-text-font: Sora, sans-serif;
  --mdc-outlined-text-field-label-text-size: 12px;
  /* SELECT */
  --mat-select-panel-background-color: #242936 !important;
  --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
  --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
  --mat-select-focused-arrow-color: rgba(156, 39, 176, .87);
  --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87);
  --mat-option-label-text-color: white !important;
  --mat-option-selected-state-label-text-color: #ace1ff !important;
}

html.harpoon .mat-mdc-slide-toggle.mat-accent {
  /** SWITCH **/
  --mat-switch-label-text-color: #BDC9D5;
  --mdc-switch-disabled-label-text-color: : #BDC9D5;
  --mdc-switch-selected-focus-state-layer-color: #d81b60;
  --mdc-switch-selected-hover-state-layer-color: #d81b60;
  --mdc-switch-selected-pressed-state-layer-color: #d81b60;
  --mdc-switch-selected-handle-color: #1284bd;
  --mdc-switch-selected-focus-handle-color: #1284bd;
  --mdc-switch-selected-hover-handle-color: #1284bd;
  --mdc-switch-selected-pressed-handle-color: #1284bd;
  --mdc-switch-selected-pressed-handle-color: #1284bd;
  --mdc-switch-selected-icon-color: white;
  --mdc-switch-selected-focus-track-color: #ace1ff;
  --mdc-switch-selected-hover-track-color: #ace1ff;
  --mdc-switch-selected-pressed-track-color: #ace1ff;
  --mdc-switch-selected-track-color: #ace1ff;
}

.previewContainer {
  height: 250px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ng-body {
  fill: transparent;
  stroke-dasharray: 10, 5;
}

.ng-label {
  font-size: 16px;
}

.dialog-btn-spinner {
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.helm-container {
  padding: 10px;
  width: 360px;
  height: 390px;
  border-radius: 12px;
}

.helm-icons {
  display: flex;
  justify-content: space-between;
}

.helm-title-container {
  display: flex;
  justify-content: space-between;
}

.helmChart-body {
  border-radius: 12px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.helmChart-title {
  font-size: 16px;
  font-weight: bold;
  max-width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: auto;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: gray;
  display: inline-block;
  margin-right: 5px;
}

.pods-container-section {
  max-height: 230px; /* Ensures pods list does not overflow */
  overflow-y: auto;
  padding: 5px;
  border-radius: 5px;
  scrollbar-color: auto;
  height: 230px;
  max-width: 325px;
}

.pods-container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 5px;
  column-gap: 10px;
}

.pod-item {
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
  max-height: min-content;
}

.pod-name {
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 290px;
}

.pod-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pods-header {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  padding-left: 5px;
}

.status-running {
  background-color: green;
}

.status-down {
  background-color: red;
}

.status-deploying {
  background-color: yellow;
}

.helm-buttons-container {
  display: flex;
  gap: 5px;
}

.helmDeployButton {
  width: 100%;
  color: white;
  font-weight: bold;
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.helmDeployButton:disabled,
.helmDeployButton.deploying {
  cursor: not-allowed;
}

.viewGraphButton {
  width: 100%;
  background: white;
  font-weight: bold;
  border: 2px solid;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.viewGraphButton:hover {
  color: white;
}

.viewGraphButton:disabled {
  cursor: not-allowed;
  color: white !important;
}

.podsSpinner {
  width: 100%;
  padding: 10px 10px 0 0;
  position: absolute;
}

.virtualServiceContainer {
  padding: 6px;
  width: 211px;
  height: 89px;
  border-radius: 12px;
}

.vs-content {
  margin-top: 12px;
}

.helmReturnText {
  margin-left: 10px;
}

.helmGraphReturnButton {
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  width: 125px;
  height: 44px;
  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;
}

.helmGraphReturnButton:hover {
  cursor: pointer;
}

.bottomcenter {
  position:  absolute;
  bottom: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  transition: transform 0.35s ease-in-out, left 0.35s ease-in-out;
}

@media (min-width: 1750px) {
  .bottomcenter.pushExtraRight {
    transform: translateX(40%);
  }
}

.helm-version-container {
  position: relative;
  width: 320px;
  margin: 0 auto 10px auto;
}

.helm-version-label {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 0 4px;
  font-size: 12px;
  z-index: 2;
  pointer-events: none;
  font-family: Sora;
}

.helm-version-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 8px 2px 8px 12px;
  box-sizing: border-box;
}

.helm-version-wrapper:hover, .helm-version-wrapper:focus, .helm-version-wrapper:active {
  border: 1px solid var(--secondary-blue);
}

.helm-version-select {
  width: 100%;
  border: none;
  font-size: 14px;
  background: transparent;
  appearance: none;
  padding-right: 32px;
  z-index: 1;
  cursor: pointer;
  pointer-events: auto;
}

.helm-version-select:focus {
  outline: none;
}

.helm-version-arrow-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  z-index: 0;
}

.secret-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.dockerSecretPass {
  display: block;
  align-items: center;
  position: relative;
}

input.dialog-input-config.ng-invalid.ng-touched {
  border-color: #EA5D31;
}

.no-secrets-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  font-style: italic;
  font-family: Sora;
}

.dockerSecretIcon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  margin-top: 18px;
}

.dockerSecretAdd {
  position: absolute;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 50;
  margin-top: 5px;
}

.dockerSecretForm {
  margin-top: 10px;
}

.dockerSecretBtns {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

#ng-name {
  text-overflow: ellipsis;
  max-width: 130px;
  max-height: 30px;
  overflow: hidden;
}

.descriptionLabel {
  display: flex;
  align-items: center;
  /* font-weight: 600; */
  margin-left: 30px;
}

.toggle-description-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  margin-left: 0.5rem;
  padding: 0;
}

.elementDescription {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  cursor: pointer;
}

.elementDescription.open {
  max-height: 250px;
}

.scrollable-textarea {
  width: 100%;
  height: 100%;
  min-height: 120px;    /* minimum height when open */
  max-height: 250px;    /* matches the .open max-height */
  overflow-y: auto;     /* scroll when content exceeds max-height */
  resize: vertical;     /* allow user to drag-resize if desired */
  padding: 0.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  border-radius: 4px;
  box-sizing: border-box;
}

.mat-mdc-icon-button.no-state-layer .mdc-icon-button__ripple,
.mat-mdc-icon-button.no-state-layer .mat-mdc-button-persistent-ripple,
.mat-mdc-icon-button.no-state-layer .mat-mdc-focus-indicator {
  display: none !important;
}

cluster-control {
  position: absolute;
  top: 16px;
  z-index: 999;
}

cluster-control .cluster-control-bar {
  height: 44px;
  /* width: 210px; */
  width: 190px;
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  padding: 0px 10px;
}

cluster-control button {
  background-color: transparent;
  border: 2px solid transparent;
  cursor: pointer;
}

cluster-control button[disabled] {
  color: #575757;
  cursor: not-allowed;
}

cluster-control button:hover:not([disabled]) {
  mix-blend-mode: normal;
  border-radius: 4px;
}

cluster-control .clusterIconButton {
  padding-right: 5px;
  color: #8CC6E3;
}

cluster-control .clusterControls {
  flex: 1;
  justify-content: center;
  text-align: center;
}

cluster-control .cluster-status-bar {
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(36, 41, 54, 0.1);
  border-radius: 8px;
  margin-top: 4px;
  padding: 5px 10px;
  font-size: 12px;
  width: 190px;
}

cluster-control .cluster-status-state {
  display: flex;
  flex-direction: row;
}

cluster-control .cluster-name {
  overflow: scroll;
}

cluster-control .cluster-status-bar .status-label {
  font-weight: bold;
  flex: 1;
}

cluster-control .cluster-status-bar .status-icon {
  margin-right: 5px;
}

cluster-control .cluster-status-bar .status-icon .up,
cluster-control .cluster-status-bar .status-icon .creating,
cluster-control .cluster-status-bar .status-icon .updating {
  color: green;
}

cluster-control .cluster-status-bar .status-icon .down {
  color: gray;
}

cluster-control .cluster-status-bar .status-icon .unknown {
  color: gray;
}

cluster-control .cluster-status-bar .status-icon .destroying,
cluster-control .cluster-status-bar .status-icon .error {
  color: red;
}

/******************************************************
 * Common styles for the login page
 ******************************************************/

.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 94px 528px 0px 528px;
}

/** FIXME these styles ar used in more than login */
.login-input-label {
  position: absolute;
  margin-left: 10px;
  margin-top: -10px;
  z-index: 30;
  font-family: Sora;
  font-size: 12px;
  line-height: 140%;
  padding: 3px;
}

.login-input, .login-input-password {
  width: 384px;
  height: 56px;

  font-family: Sora;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 120%;

  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 8px;
  margin-bottom: 24px;
  border: 1px solid #BDC9D5;
}

.login-buttons {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-top: 12px;
}

.register-eye-toggle, .login-eye-toggle {
  cursor: pointer;
  pointer-events: auto;
  border: none;
  font-size: 20px;
  border-radius: 5px;
  float: right;
  z-index: 1;
	position: absolute;
}

.register-eye-toggle, .login-eye-toggle {
	top: 15%;
	right: 10px;
}

.register-eye-toggle:focus, .login-eye-toggle:focus, .api-eye-toggle:focus {
  outline: none;
}

.forgot-password {
  width: 384px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  margin-top: 24px;
  text-align: center;
  cursor: pointer;
}

.forgot-password:hover {
  text-decoration: underline;
  font-style: italic;
}

.social-button {
  border-radius: 10px;
  width: 100%;
  height: 32px;
}

.social-login {
  width: 384px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  margin-top: 24px;
  text-align: center;
}

.hyperlink-button {
  width: 184px;
  height: 48px;
  font-family: Poppins;
  font-weight: 600;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  padding-top: 16px;
}

.api-eye-toggle {
  cursor: pointer;
  pointer-events: auto;
  border: none;
  font-size: 17px;
  border-radius: 5px;
  float: right;
  z-index: 1;
}

/******************************************************
 * Stripe Styles
 ******************************************************/
.StripeElement {
  margin: 12px 0 12px;
  background-color: white;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  width:384px;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #EA5D31;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}