/*
 * © 2024 AxonOps Limited. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/**
* Import global mixins, fonts definition and animations
*/
@import 'collections/globs';
@import 'collections/fonts';
@import 'collections/animations';
/**
* Import different collections
*/
@import 'collections/material_design';
@import 'collections/modals';

body {
  @include position();
  font: {
    family: 'Main', 'Minor', 'SimplifiedChinese', sans-serif;
    size: 15px;
  }
  background: #17181a;
  color: #e3e3e3;
  line-height: 25px;
  border-top: 1px rgba(0, 0, 0, 0.15) solid;
  direction: ltr;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

div.body {
  @include position();
  display: flex;
  flex: {
    direction: row;
    wrap: nowrap;
  }
  align-items: flex-start;
  justify-content: flex-start;

  div.left {
    position: relative;
    width: 80px;
    height: 100%;
    user-select: none;

    div.content {
      overflow: hidden;

      div.logo {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        transition: opacity 0.15s ease-in-out;
        cursor: pointer;

        &:hover {
          opacity: 0.95;
        }

        &:after {
          content: '';
          @include position();
        }

        img {
          @include position();
          height: 45px;
        }
      }

      div.switch-connections,
      div.switch-workspaces {
        background: #17181a;
        text-align: -webkit-center;
        border-radius: 8px;
        display: flex;
        flex: {
          direction: column;
          wrap: nowrap;
        }
        align: {
          items: center;
          content: center;
        }
        justify-content: flex-start;
        width: 50px;
        min-height: 45px;
        margin: 15px 0 10px;
        padding: 10px 0;
        transition: height 0.2s ease-in-out;

        div.connection,
        div.workspace {
          position: relative;
          width: 25px;
          height: 25px;
          border-radius: 7px;
          opacity: 0;
          transition: opacity 0.2s ease-in-out;

          &.connection {
            opacity: 0.45;
          }

          &:hover {
            opacity: 0.8;
          }

          &.show,
          &.workspace[home] {
            opacity: 0.45;
          }

          &[active] {
            opacity: 1 !important;
          }

          &:not([style*="display:none"]):not(:first-of-type):not([home]):not(:nth-child(2)) {
            margin-top: 10px;
          }

          button {
            @include position();

            ion-icon[name="sandbox"] {
              @include position();
              color: #17181a;
              font-size: 170%;
              opacity: 0;
              transform: translateY(5px);

              &.show {
                animation: {
                  name: show-sandbox-icon;
                  duration: 1.25s;
                  timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                  fill-mode: forwards;
                }
              }
            }
          }

          &.workspace[home] {
            ion-icon {
              @include position();
              font-size: 215%;
              filter: invert(1);
              transform: translateX(-1px) translateY(-2px);
            }
          }

          &.workspace:not([home]) {
            background: #7c7c7c;
          }

          &.connection {
            box-shadow: #7c7c7c 0 0 0 1px inset;

            button {
              color: #7c7c7c;
            }
          }
        }
      }

      div.switch-connections,
      div.switch-workspaces {
        position: relative;
        transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out, margin-bottom 0.25s ease-in-out;
        opacity: 0;
        pointer-events: none;

        &.show {
          opacity: 1;
          pointer-events: all;
        }

        &.show-more {
          &.switch-workspaces {
            margin-bottom: 50px;
          }

          div.more-connections,
          div.more-workspaces {
            bottom: -35px;
            opacity: 1;

            div.buttons {
              opacity: 0.45;
              pointer-events: all;
              transition-delay: 0.25s;
            }
          }
        }
      }

      div.switch-connections {
        transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;

        button {
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: center;
          margin: {
            bottom: 1px !important;
            left: 1px !important;
          }
          font-weight: 500;
        }
      }

      div.navigation {
        @include position(absolute, auto, 5px);

        div.group {
          background: #17181a;
          margin: 15px;
          text-align: -webkit-center;
          border-radius: 8px;
          display: flex;
          flex: {
            direction: column;
            wrap: nowrap;
          }
          align: {
            content: center;
            items: center;
          }
          justify-content: space-between;

          div.item {
            position: relative;
            width: 100%;
            display: flex;
            flex: {
              direction: column;
              wrap: nowrap;
            }
            align: {
              content: center;
              items: center;
            }
            justify-content: center;
            height: 42px;

            div.dropdown.dropend {
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }

            ul.dropdown-menu {
              margin: {
                left: 10px !important;
                top: -9px !important;
              }
              font-size: 95% !important;
              line-height: 22px;
              transform: none !important;
              top: -307px !important;
              left: 54px !important;

              li {
                font-size: 90%;

                h6 {
                  color: #dee2e6;
                  margin: 5px 0 0 5px;
                  font: {
                    size: 100%;
                    weight: 500;
                  }
                  opacity: 0.7;

                  span.badge {
                    opacity: 0.9;
                  }
                }
              }
            }

            div.sub-content {
              position: relative;
              width: 100%;
              height: 100%;
              border-radius: 10px;
              display: flex;
              flex-flow: column nowrap;
              align-items: center;
              justify-content: center;
              color: #797979;

              ion-icon {
                font-size: 170%;
              }

              &:hover {
                color: var(--mdb-btn-hover-color) !important;
              }
            }

            &[action="ai"] {
              ion-icon {
                font-size: 200% !important;
              }
            }

            &[action="settings"],
            &[action="notifications-center"] {
              ion-icon {
                font-size: 180% !important;
              }
            }

            &[action="about"] {
              ion-icon {
                transform: scale(1.55);
              }
            }

            &[action="update"] {
              ion-icon {
                font-size: 185%;
                position: relative;
                transition: all 0.2s ease-in-out;
              }
            }

            &[action="more"] {
              ion-icon {
                font-size: 200% !important;
              }
            }

            &[action="ai"] {
              div.answering {
                @include position(absolute, 0, 0, 0, auto);
                background: rgba(83, 85, 88, 0.4);
                width: 25px;
                height: 15px;
                border-radius: 5px;
                transform: scale(0.8) translateY(9px) translateX(-5px);
                backdrop-filter: blur(5px);
                opacity: 0;
                transition: opacity 0.2s ease-in-out;
                transition-delay: 0.1s;
                pointer-events: none;

                img {
                  transform: scale(3);
                  filter: invert(1);
                }

                &.show {
                  transition-delay: 0.4s;
                  opacity: 0.8;
                }
              }
            }
          }
        }
      }
    }
  }

  div.hidden-area {
    position: relative;
    width: 0;
    height: 100%;
    transition: width 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    div.content {
      display: none;

      &.notifications-center {
        div.notifications-container {
          margin: 0 10px;
          overflow-y: scroll;
          width: calc(100% - 15px);
          height: calc(100% - 10px);
          padding-right: 10px;
          opacity: 0.85;

          div.toast {
            position: relative;
            font: {
              size: 85%;
              align: left;
            }
            opacity: 0;
            transition: transform 0.2s ease-in-out;

            &:not(:first-of-type) {
              margin-top: 17px;
            }

            div.toast-body,
            div.toast-footer,
            div.toast-header {
              padding: 5px 0.65rem;
            }

            div.toast-header {
              span.toast-type {
                width: 20px;
                height: 20px;
              }
            }

            div.toast-footer {
              background: #1a1a1a;
              color: #e3e3e3;
            }

            &.show {
              animation: {
                name: show-question;
                duration: 1s;
                timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                fill-mode: forwards;
              }
            }

            &.new {
              filter: contrast(0.8);
            }
          }
        }

        div.empty {
          @include position();
          background: #202023;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.15s ease-in-out;

          div.sub-content {
            @include position();
            height: 50%;
            opacity: 0.7;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: center;

            img.gif {
              opacity: 0.3;
              transform: scale(0.8);
            }

            div.message {
              @include position();
              width: fit-content;
              height: fit-content;
              transform: translateY(100px);
              font-weight: 200;
              opacity: 0.5;
              transition: opacity 0.5s ease-in-out;
              transition-delay: 0.35s;
            }
          }
        }

        &._empty {
          div.empty {
            opacity: 1;
            pointer-events: all;
          }
        }
      }
      position: relative;
      overflow: hidden;
      font-size: 95%;

      .animate-hide {
        transition: opacity 0.1s ease-in-out;
        opacity: 0;
      }

      div.questions-and-answers {
        position: relative;
        height: calc(100% - 120px);
        overflow: {
          x: hidden;
          y: scroll;
        }
        font-size: 95%;

        div.block {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;

          &._left {
            flex-direction: row;

            div.question {
              button {
                @include position(absolute, auto, -25px, -3px, auto);
                font-size: 95%;
                color: inherit;
                transition: all 0.2s ease-in-out;
                opacity: 0.6;
                width: 30.86px;
                border-radius: 50%;
                display: none;

                &:hover {
                  opacity: 0.8;
                }

                &.active {
                  opacity: 1;
                }
              }
            }
          }

          &._right {
            flex-direction: row-reverse;

            div.answer {
              button {
                @include position(absolute, auto, -25px, auto, -3px);
                font-size: 95%;
                color: inherit;
                display: none;
                transition: opacity 0.2s ease-in-out;
                opacity: 0.6;
                width: 30.86px;
                border-radius: 50%;

                &:hover {
                  opacity: 0.8;
                }

                &.active {
                  opacity: 1;
                }
              }
            }
          }

          div.question {
            background: #3e3e3e;
            margin: 15px 10px;
          }

          div.answer {
            background: #17181a;
            margin: 15px 10px;
            min-width: 160px;
            transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;

            &.busy {
              box-shadow: inset 0 0 0 3px #17181a, inset 0 0 0 4px rgba(220, 76, 100, 0.8);
              color: rgba(220, 76, 100, 0.8);
            }

            div.answering {
              @include position();
              width: 140px;
              height: 25px;
              overflow: hidden;

              img {
                transform: scale(2.2) perspective(1px) translateZ(0);
                filter: invert(1);
                opacity: 0.3;
              }
            }
          }

          div.answer,
          div.question {
            position: relative;
            min: {
              width: 150px;
              height: 45px;
            }
            max-width: 80%;
            text-align: left;
            padding: 10px;
            border-radius: 10px;
            display: block;
            word-break: break-word;
            transition: transform 0.2s ease-in-out;

            &:after {
              content: attr(date);
              @include position(absolute, auto, -23px, auto, auto);
              font: {
                size: 65%;
                weight: 300;
              }
              opacity: 0.8;
              white-space: nowrap;
            }

            &.question,
            &.question:after {
              opacity: 0;
              transform: translateX(-10px);
            }

            &.answer,
            &.answer:after {
              opacity: 0;
              transform: translateX(10px);
            }

            &.question:after {
              left: 7px;
            }

            &.answer:after {
              right: 7px;
            }

            &.show {
              &.question {
                animation: {
                  name: show-question;
                  duration: 0.8s;
                  timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                  fill-mode: forwards;
                }
              }

              &.answer {
                animation: {
                  name: show-answer;
                  duration: 0.8s;
                  timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                  fill-mode: forwards;
                }
              }
            }

            &.show-date {
              &.question {
                &:after {
                  animation: {
                    name: show-question;
                    duration: 0.8s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                }
              }

              &.answer {
                &:after {
                  animation: {
                    name: show-answer;
                    duration: 0.8s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                }
              }
            }
          }
        }
      }

      div.question-container {
        position: relative;
        height: 120px;
        display: flex;
        flex: {
          direction: row;
          wrap: nowrap;
        }
        align-items: stretch;
        justify-content: flex-start;
        box-shadow: 0 0 20px 15px #201f23;

        div.textarea {
          position: relative;
          width: calc(100% - 30px);

          .form-outline .form-control.active~.form-label,
          .form-outline .form-control:focus~.form-label {
            transform: translateY(-1.07rem) translateY(.1rem) translateX(0.05rem) scale(.8);
          }

          div.form-outline {
            @include position();
            margin: 10px;
            width: calc(100% - 30px);
            height: calc(100% - 37px);

            textarea {
              width: 100%;
              height: calc(100% - 10px);
              margin: 5px 0;
              font-size: 95%;
              padding: 10px;
              resize: none;
            }

            div.form-helper {
              font-size: 70%;
            }
          }
        }

        div.send {
          position: relative;
          display: flex;
          flex: {
            direction: column;
            wrap: nowrap;
          }
          justify-content: center;
          align-items: center;
          width: 30px;
          left: -10px;
          bottom: 8px;

          button.btn {
            width: 36px;
            display: flex;
            flex-flow: column nowrap;
            place-content: center;
            align-items: center;
            color: inherit;

            ion-icon {
              font-size: 150%;
            }
          }
        }
      }

      div.loading {
        @include position();
        pointer-events: none;
        transition: opacity 0.2s ease-in-out;
        transition-delay: 0.5s;
        opacity: 0;
        background: #202023;
        z-index: 1;

        div.sub-content {
          @include position();
          height: 50%;
          opacity: 0.7;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-content: center;
          align-items: center;
          justify-content: center;

          img.gif {
            transition: opacity 0.4s ease-in-out;
            transition-delay: 0.2s;
            opacity: 0;
          }

          div.loading-text {
            @include position();
            width: fit-content;
            height: fit-content;
            transform: translateY(100px);
            font-weight: 200;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            transition-delay: 0.35s;
          }
        }
      }

      &._loading {
        div.loading {
          opacity: 1;
          pointer-events: all;
          transition-delay: 0s;

          div.sub-content {
            img.gif {
              opacity: 1;
            }

            div.loading-text {
              opacity: 0.5;
            }
          }
        }
      }

      &.answering {
        div.question-container {
          textarea {
            background-color: transparent !important;
          }

          label {
            color: #404040 !important;
          }
        }
      }
    }
  }

  div.right {
    position: relative;
    width: calc(100% - 80px);
    height: 100%;
    transition: width 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

    div.content-info {
      position: relative;
      background: #202023;
      margin: 10px;
      border-radius: 10px;
      box-shadow: 0 0 0 1px #141414;
      padding: 10px;
      width: calc(100% - 20px);
      height: 45px;
      transition: all 0.2s ease-in-out;

      &:before {
        content: '';
        position: absolute;
        margin: auto;
        background: #202023;
        bottom: -15px;
        left: 12px;
        width: 5px;
        height: 20px;
        transition: all 0.2s ease-in-out;
        transition-delay: 0.05s;
      }

      div._left,
      div._right {
        transition: all 0.2s ease-in-out;
        transition-delay: 0.15s;
      }

      div._left {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        float: left;

        div._connection,
        div._main {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          align-items: center;
          margin-right: 10px;
        }

        div._main {
          cursor: pointer;
          @extend .no-select;
          transition: opacity 0.2s ease-in-out;

          &:hover {
            opacity: 0.9;
          }
        }

        div.icon {
          margin-right: 5px;
          font-size: 120%;
          opacity: 0.9;
        }

        div.text {
          font-weight: 600;
          font-size: 110%;
        }

        div._arrow {
          margin-right: 10px;
          transform: rotate(90deg) translateX(5px);
          font-size: 110%;
          position: relative;
          top: 1px;
          opacity: 0;

          &.show {
            animation: {
              name: show-arrow;
              duration: 0.8s;
              timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
              fill-mode: forwards;
            }
          }
        }

        div._connection {
          opacity: 0;
          transform: translateY(5px);

          div._color {
            width: 18px;
            height: 18px;
            position: relative;
            margin-right: 5px;
            border-radius: 5px;
            opacity: 0;
            transition-delay: 0.5s;
          }

          div.text {
            font-weight: normal !important;
            position: relative;
            top: 1px;
          }

          &.show {
            animation: {
              name: show-connection;
              duration: 0.8s;
              timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
              fill-mode: forwards;
            }

            div._color {
              opacity: 1;
            }
          }
        }
      }

      div._right {
        border-radius: 7px;
        overflow: hidden;
        height: 35px;
        width: fit-content;
        float: right;
        position: relative;
        bottom: 5px;
        text-align: -webkit-right;
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        align-content: center;
        align-items: stretch;

        div._actions {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          align-items: center;
          justify-content: space-evenly;
          width: fit-content;
          height: 100%;
          transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
          opacity: 0;
          pointer-events: none;

          &.show {
            opacity: 1;
            pointer-events: all;
          }

          &._for-workspaces {
            transform: translateY(-30px);

            &.show {
              transform: translateY(0px);
            }
          }

          &._for-connections {
            transform: translateY(30px);

            &.show {
              transform: translateY(-35px);
            }
          }
        }

        div.action {
          width: 100%;
          height: 100%;
          margin: 0 5px;

          button {
            color: inherit !important;
            width: 100%;
            height: 100%;
            position: relative;
            transition: opacity 0.2s ease-in-out;
            opacity: 0.75;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            align-items: center;
            justify-content: flex-start;
            padding: 0 5px;

            ion-icon {
              margin-right: 5px;
            }

            span {
              white-space: nowrap;
            }

            &:hover {
              opacity: 0.95;
            }
          }

          &[action="search"] {
            margin-left: 0;

            ion-icon {
              font-size: 135%;
            }
          }

          &[action="import"] button ion-icon {
            font-size: 130%;
          }

          &[action="add"] button ion-icon {
            font-size: 160%;
          }

          &[action="refresh"] button ion-icon {
            font-size: 140%;
          }
        }
      }
    }

    div.content {
      position: relative;
      overflow: hidden;
      height: calc(100% - 20px - 55px) !important;
      transition: height 0.2s ease-out;

      div[content] {
        @include position();
        background: inherit;

        div.section-actions {
          @include position(absolute, auto, 0, 0, auto);
          margin: 20px;
          opacity: 0.9;
          transform: scale(0);
          transition: transform 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
          animation: {
            name: show-section-actions;
            duration: 0.3s;
            delay: 2s;
            timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
            fill-mode: forwards;
          }

          div.main {
            ion-icon {
              font-size: 190%;
              transition: transform 200ms ease-in-out;
            }
          }

          div.action {
            @include position(absolute, 5px, auto, auto, 5px);
            z-index: -1;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

            &[action="add"] {
              transition-delay: 70ms;

              ion-icon {
                font-size: 160%;
              }
            }

            &[action="refresh"] {
              ion-icon {
                font-size: 140%;
              }
            }

            &[action="clean"] {
              ion-icon {
                font-size: 160%;
              }
            }
          }

          &.show {
            div.main {
              ion-icon {
                transform: rotate(10deg);
              }
            }

            div.action {
              &[action="add"] {
                top: -40px;
                left: -30px;
              }

              &[action="refresh"] {
                top: 10px;
                left: -50px;
              }

              &[action="import"] {
                top: -50px;
                left: 20px;

                button {
                  ion-icon {
                    font-size: 130%;
                    position: relative;
                    bottom: 1px;
                  }
                }
              }
            }

            &.sandbox {
              div.action {
                &[action="clean"] {
                  transition-delay: 140ms;
                  top: -54px;
                  left: 18px;
                }

                &[action="add"] {
                  transition-delay: 70ms;
                }
              }
            }
          }
        }

        div.empty {
          @include position();
          pointer-events: none;
          transition: opacity 0.2s ease-in-out;
          transition-delay: 0.5s;
          opacity: 0;
          background: #202023;
          z-index: 1;

          div.sub-content {
            @include position();
            height: 30%;
            opacity: 0.7;

            [for-sandbox] {
              display: none;
            }

            div.create-item {
              transition: all 0.4s ease-in-out;
              transition-delay: 0.2s;
              opacity: 0;
              filter: brightness(1.5);
              border-radius: 50%;
              cursor: pointer;

              &:hover {
                transition-delay: 0s;
                opacity: 1 !important;
                transform: scale(1.2);
              }
            }

            div.message {
              margin-top: 20px;
              font-weight: 200;
              transition: opacity 0.5s ease-in-out;
              transition-delay: 0.25s;
              opacity: 0;
            }

            div.button {
              margin-top: 10px;
              transition: opacity 0.6s ease-in-out;
              transition-delay: 0.6s;
              opacity: 0;

              div.or {
                position: relative;
                margin: 22px 0;
                opacity: 0;
                transform: scale(0.9) translateY(-5px);

                &:before {
                  content: '';
                  @include position();
                  background: #ebedef;
                  width: 0;
                  height: 2px;
                  z-index: -1;
                  opacity: 0;
                }
              }

              div.import-workspaces-btn-container {
                bottom: 0 !important;
              }

              div.import-workspaces-btn-container,
              div.sandbox-btn-container {
                position: relative;
                bottom: 4px;
                width: fit-content;
                border-radius: 50%;

                button {
                  transform: scale(0);
                  opacity: 0;

                  ion-icon {
                    font-size: 150%;
                    position: relative;
                    right: 1px;
                    bottom: 1px;
                    transition: all 0.1s ease-in-out;
                  }

                  &:focus,
                  &:hover {
                    ion-icon {
                      transform: scale(1.05);
                    }
                  }
                }
              }
            }
          }

          &.for-sandbox {
            div.sub-content {
              [for-sandbox] {
                display: block;
              }

              button:not([for-sandbox]),
              div.create-item:not([for-sandbox]),
              div.message:not([for-sandbox]) {
                display: none;
              }
            }
          }
        }

        &[content="connections"] {
          div.empty {
            div.sub-content {
              div.create-item {
                position: relative;
              }
            }
          }
        }

        &[content="workarea"] {
          div.workarea {
            @include position();
            display: flex;
            flex: {
              direction: row;
              wrap: nowrap;
            }
            align-items: flex-start;
            justify-content: flex-start;

            div.sub-sides {
              height: 100%;

              &.left {
                width: 300px;

                div.connection-info {
                  margin: 10px;
                  border-radius: 5px;
                  text-align: left;
                  background: #17181a;
                  padding: 10px;
                  box-shadow: 0 0 0 1px #141414;

                  div.name-ssl {
                    display: flex;
                    flex: {
                      direction: row;
                      wrap: nowrap;
                    }
                    align-items: center;
                    justify-content: space-between;

                    div.name {
                      text-align: start;
                      font-weight: 500;
                      width: 70%;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }

                    div.status {
                      position: relative;
                      width: 18px;
                      height: 18px;

                      ion-icon[name="unknown"] {
                        @include position();
                        font-size: 200%;
                        transform: scale(0.6);
                        margin: 0 -5px -5px 0;
                      }

                      ion-icon[name="lock-opened"] {
                        @include position();
                        transform: translateX(2px) translateY(-2px);
                      }
                    }

                    div.status {
                      ion-icon {
                        position: relative;
                        bottom: 1px;
                        font-size: 120%;
                      }
                    }

                    div.axonops-agent,
                    div.axonops-integration-icon {
                      @include position(absolute, auto, auto, 20px, auto);
                      opacity: 0;
                      pointer-events: none;
                      cursor: pointer;
                      transition: opacity 0.2s ease-in-out;

                      &:hover {
                        opacity: 1 !important;
                      }
                    }

                    div.axonops-integration-icon {
                      transform: translateY(30px) translateX(-1px);
                      font-size: 110%;

                      ion-icon {
                        font-size: 105%;
                        transition: opacity 0.1s ease-in-out;

                        &[name="globe"] {
                          position: absolute;
                          inset: 0;
                          margin: auto;
                          opacity: 0;
                          font-size: 95%;
                        }
                      }

                      &:hover {
                        ion-icon[name="axonops"] {
                          opacity: 0;
                        }

                        ion-icon[name="globe"] {
                          opacity: 1;
                        }
                      }
                    }

                    div.axonops-integration-icon:not([hidden]) {
                      opacity: 0.9 !important;
                      pointer-events: all;
                    }

                    div.connection-status {
                      @include position(absolute, auto, auto, 50px, auto);
                      height: 20px;
                      opacity: 0;
                      transition: opacity 0.2s ease-in-out, filter 0.3s ease-out;
                      filter: grayscale(1) hue-rotate(0deg);

                      &.show {
                        opacity: 0.8;
                      }

                      &.not-connected {
                        filter: hue-rotate(330deg) grayscale(0);
                      }

                      &.connected {
                        filter: hue-rotate(-255deg) grayscale(0);
                      }
                    }

                    &.is-sandbox {
                      div.status {
                        opacity: 0;
                        pointer-events: none;
                      }

                      div.axonops-agent {
                        opacity: 0.8;
                        pointer-events: all;
                      }
                    }
                  }

                  div.additional {
                    width: fit-content;
                    opacity: 0.9;
                    transform: scale(0.95);
                    font: {
                      size: 75%;
                      weight: 300;
                    }
                    display: flex;
                    flex: {
                      direction: column;
                      wrap: wrap;
                    }
                    justify-content: flex-start;
                    align-items: flex-start;
                    margin-top: 5px;
                    margin-left: -4px;
                    margin-bottom: -6px;

                    div.info {
                      background: #2c2c2c;
                      border-radius: 5px;
                      overflow: hidden;
                      margin: 0 7px 7px 0;
                      width: fit-content;
                      padding-right: 10px;
                      display: flex;
                      flex: {
                        direction: row;
                        wrap: nowrap;
                      }
                      justify-content: flex-start;
                      align-items: center;
                      height: 25px;
                      white-space: nowrap;
                      animation: {
                        name: show-question;
                        duration: 1s;
                        timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                        fill-mode: forwards;
                      }
                      opacity: 0;
                      transform: translateX(-10px);

                      div._placeholder {
                        background: #404040;
                        width: 100%;
                        height: 15px;
                        border-radius: 5px;
                      }

                      div.title {
                        position: relative;
                        text-transform: capitalize;
                        margin-right: 5px;
                        background: rgba(255, 255, 255, 0.1);
                        padding: 0 7px 0 5px;

                        ion-icon {
                          @include position(absolute, 2px, 0, -9px, auto);
                          font-size: 165%;
                          color: #2c2c2c;
                          transform: scaleX(-1);
                        }
                      }

                      &[info="host"] {
                        animation-delay: 0.5s;

                        div.text {
                          max-width: 188px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        }
                      }

                      &[info="cassandra"] {
                        animation-delay: 0.6s;
                      }

                      &[info="data-center"] {
                        animation-delay: 0.7s;
                      }

                      &[info="cluster-name"] {
                        animation-delay: 0.8s;

                        div.text {
                          max-width: 150px;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        }
                      }

                      &[info="cassandra-username"] {
                        animation-delay: 0.9s;

                        div.text {
                          max-width: 150px;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        }
                      }

                      &[info="nodes"] {
                        animation-delay: 0.8s;

                        div.text {
                          margin-left: 5px;
                        }
                      }

                      &[info="axonops"] {
                        animation-delay: 0.9s;
                      }

                      &[info="management-tool"] {
                        animation-delay: 1s;
                      }
                    }
                  }
                }

                div.connection-metadata {
                  position: relative;
                  height: calc(100% - 249px);
                  margin: 25px 10px 10px;
                  border-radius: 5px;
                  text-align: left;
                  background: #17181a;
                  padding: 10px;
                  box-shadow: 0 0 0 1px #141414;

                  div.metadata-actions {
                    @include position(absolute, -13px, auto, 15px, auto);
                    width: 90px;
                    height: 30px;
                    display: flex;
                    flex: {
                      direction: row;
                      wrap: nowrap;
                    }
                    align-items: center;
                    justify-content: space-evenly;
                    background: #2c2c2c;
                    border-radius: 8px;

                    &.three {
                      width: 90px;

                      div.action {
                        &[action="refresh"] {
                          margin-left: 2px;
                        }
                      }
                    }

                    div.action {
                      position: relative;
                      bottom: 2px;

                      div.btn {
                        transition: opacity 0.2s ease-in-out;
                        opacity: 0.6;

                        ion-icon {
                          font-size: 130%;
                          color: #e3e3e3;
                        }

                        &:hover {
                          opacity: 0.8;
                        }

                        &.disabled {
                          pointer-events: none;

                          ion-icon {
                            color: #6c6c6c;
                          }
                        }
                      }
                    }
                  }

                  div.metadata-content {
                    @include position(absolute, 0, auto);
                    height: 100%;
                    padding-top: 20px;
                    overflow: scroll;
                    background: transparent;
                    @include scrollbar(#2c2c2c, #17181a);
                    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);

                    &.show-search-input {
                      top: 55px;
                      max-height: calc(100% - 55px);
                    }
                  }

                  div.loading {
                    @include position(absolute, 0, auto);
                    height: 100%;
                    padding-top: 20px;
                    background: #17181a;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.15s ease-in-out;

                    div.sub-content {
                      @include position();
                      opacity: 0.7;
                      height: 40%;
                    }
                  }

                  &.loading {
                    div.loading {
                      opacity: 1;
                      pointer-events: all;
                    }

                    div.metadata-actions {
                      pointer-events: none;

                      div.action {
                        div.btn {
                          ion-icon {
                            color: #6c6c6c;
                          }
                        }
                      }
                    }
                  }
                }
              }

              &.right {
                width: calc(100% - 300px);

                div.header {
                  display: flex;
                  flex: {
                    direction: row;
                    wrap: nowrap;
                  }
                  align-items: center;
                  justify-content: flex-start;

                  div.connection-tabs {
                    margin: 10px;
                    border-radius: 5px;
                    background: #17181a;
                    box-shadow: 0 0 0 1px #141414;
                    width: calc(100% - 80px);
                    height: 40px;
                    overflow: hidden;

                    ul {
                      position: relative;
                      bottom: 3px;

                      li {
                        height: 43px;
                      }

                      a.nav-link {
                        text-transform: capitalize;
                        font-size: 90%;
                        display: flex;
                        flex: {
                          direction: row;
                          wrap: nowrap;
                        }
                        justify-content: center;
                        align-items: center;
                        color: #e3e3e3;
                        height: 43px;

                        span {
                          display: inline-block;
                          opacity: 0.85;

                          &.title {
                            max-width: calc(100% - 100px);
                            white-space: nowrap;
                            overflow: hidden;
                            text: {
                              overflow: ellipsis;
                              align: left;
                            }
                          }

                          &.icon {
                            position: relative;
                            bottom: 1px;
                            width: 17.55px;
                            height: 17.55px;
                            vertical-align: middle;
                            margin-right: 7px;

                            ion-icon {
                              font-size: 130%;

                              &[name="query-tracing"],
                              &[name="differentiation"] {
                                @include position();
                                font-size: 240%;
                                margin-left: -8px;
                              }

                              &[name="cql-description"] {
                                font-size: 160%;
                                position: relative;
                                right: 1px;
                                top: -1px;
                              }

                              &[name="query-tracing"],
                              &[name="differentiation"] {
                                transform: scale(0.6);
                                margin-bottom: -8px;
                              }
                            }
                          }
                        }
                      }
                    }
                  }

                  div.connection-actions {
                    display: flex;
                    flex: {
                      direction: row;
                      wrap: nowrap;
                    }
                    align-items: center;
                    justify-content: space-evenly;
                    width: 80px;
                    height: 40px;
                    background: red;
                    margin: 10px;
                    border-radius: 5px;
                    background: #17181a;
                    box-shadow: 0 0 0 1px #141414;
                    overflow: hidden;

                    div.action {
                      div.btn-container {
                        position: relative;
                        display: flex;
                        flex: {
                          direction: column;
                          wrap: nowrap;
                        }
                        align-items: center;
                        justify-content: center;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        overflow: hidden;

                        div.btn {
                          @include position();
                          transition: opacity 0.2s ease-in-out;

                          &:hover {
                            opacity: 0.8;
                          }
                        }

                        ion-icon {
                          color: #e3e3e3;

                          &[name="restart"] {
                            @include position();
                            font-size: 250%;
                            transform: scale(0.53);
                            margin: auto auto auto -5px;
                          }

                          &[name="close"] {
                            @include position();
                            margin-left: -1px;
                            font-size: 180%;
                          }
                        }
                      }
                    }
                  }
                }
              }

              div.tab-content {
                position: relative;
                height: calc(100% - 75px);
                margin: 10px;
                border-radius: 5px;
                text-align: left;
                background: #17181a;
                box-shadow: 0 0 0 1px #141414;
                margin-top: 5px;
                overflow: hidden;

                div.tab-pane {
                  @include position();

                  div.terminal {
                    @include position();
                  }
                }
              }
            }
          }
        }

        &.empty {
          div.empty {
            opacity: 1;
            pointer-events: all;
            transition-delay: 0s;

            div.sub-content {
              div.create-item {
                opacity: 0.7;
              }

              div.message {
                opacity: 0.6;
                font-weight: 300;
                margin-bottom: 15px;
              }

              div.button {
                opacity: 1;

                div.or {
                  animation: {
                    name: animate-or;
                    duration: 0.8s;
                    delay: 0.8s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }

                  &:before {
                    animation: {
                      name: animate-or-before;
                      duration: 1.2s;
                      delay: 0.8s;
                      timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                      fill-mode: forwards;
                    }
                  }
                }

                button#createSandboxProjectProcess {
                  animation: {
                    name: animate-save-snapshot;
                    duration: 0.9s;
                    delay: 1.25s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                }

                button#importWorkspacesProcess {
                  opacity: 0;
                  transform: translateX(10px);
                  animation: {
                    name: show-answer;
                    duration: 0.9s;
                    delay: 0.5s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                }

                button#addWorkspaceProcess {
                  opacity: 0;
                  transform: translateX(-10px);
                  margin-right: 10px;
                  animation: {
                    name: show-question;
                    duration: 0.9s;
                    delay: 0.5s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                }
              }
            }
          }

          div.section-actions {
            transform: scale(0);
            pointer-events: none;
          }
        }

        &.instant {
          div.empty {
            transition: all 0s linear !important;
          }
        }

        &[content="workspaces"],
        &[content="connections"] {
          div.connections-container,
          div.workspaces-container {
            @include position();
            overflow-y: scroll;
            text-align: left;
            display: flex;
            flex: {
              direction: row;
              wrap: wrap;
            }
            align: {
              content: flex-start;
              items: flex-start;
            }
            justify-content: flex-start;

            div.connection,
            div.workspace {
              width: 300px;
              background: #161719;
              text-align: left;
              padding: 10px;
              border-radius: 10px;
              margin: 10px;

              div.header {
                margin: 0 5px;

                div.title {
                  font: {
                    size: 105%;
                    weight: 500;
                  }
                  margin-bottom: 5px;

                  &.connection-name,
                  &.workspace-name {
                    width: calc(100% - 30px);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }

                div._connections {
                  width: fit-content;
                  height: 25px;
                  border-radius: 8px;
                  display: flex;
                  flex-direction: row;
                  flex-wrap: nowrap;
                  align-items: center;
                  align-content: center;
                  justify-content: flex-start;
                  margin-bottom: 15px;
                  padding: 0 1px;
                  opacity: 0.75;
                  opacity: 0;
                  pointer-events: none;
                  min-width: 25px;

                  &.show {
                    opacity: 1;
                    pointer-events: all;
                  }

                  .loading-connections {
                    margin: 0 4px;
                    opacity: 0.55;
                  }

                  div._connection {
                    width: 14px;
                    height: 14px;
                    border-radius: 5px;
                    margin: 0 4px;
                    opacity: 0.3;
                    transition: background 0.2s ease-in-out;

                    &.clickable {
                      cursor: pointer;
                      opacity: 1;
                    }

                    &.dots {
                      &:after {
                        content: '...';
                        font-size: 180%;
                        height: 10px;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        align-items: center;
                        justify-content: center;
                        align-content: center;
                        transform: translateY(-5px);
                      }
                    }
                  }
                }
              }

              div.footer {
                margin-bottom: 5px;
                display: flex;
                flex: {
                  direction: row;
                  wrap: nowrap;
                }
                align: {
                  items: center;
                  content: center;
                }
                justify-content: space-between;
                margin: 0 4px;

                div.actions {
                  width: 80px;
                  display: flex;
                  flex: {
                    direction: row;
                    wrap: nowrap;
                  }
                  align: {
                    content: center;
                    items: center;
                  }
                  justify-content: space-between;
                  opacity: 0.75;

                  &.sandbox {
                    width: 26.67px;
                  }

                  &.axonops-integration:not(.sandbox) {
                    width: 106.68px;
                  }

                  div.action {
                    width: 100%;

                    ion-icon {
                      font-size: 125%;
                    }

                    &[action="settings"],
                    &[action="folder"] {
                      color: inherit;
                    }

                    &[action="delete"] {
                      color: var(--mdb-danger);
                    }

                    &[action="axonops-integration"] {
                      div.background {
                        content: '';
                        position: absolute;
                        bottom: 3px;
                        right: 0;
                        left: 0;
                        margin: auto;
                        height: 0;
                        border-radius: 40px;
                        width: 85%;
                        opacity: 0;
                        transition: all 0.4s linear;
                      }

                      ion-icon[name="axonops"] {
                        font-size: 125%;
                        opacity: 0.5;
                        transition: all 0.15s ease-in-out;
                      }

                      &.enabled {
                        ion-icon[name="axonops"] {
                          opacity: 1;
                        }
                      }

                      ion-icon.status {
                        position: absolute;
                        top: -10px;
                        left: 0;
                        right: 0;
                        margin: auto;
                        color: #e3e3e3;
                        opacity: 0;
                        transform: translateY(5px);
                        transition: opacity 0.1s ease-in-out 0s, transform 0.1s ease-in-out 0s;

                        &[name="close"] {
                          font-size: 160%;
                        }
                      }

                      &:hover {
                        div.background {
                          height: calc(100% + 11px);
                          opacity: 1;
                          transition-delay: 0.2s;
                        }

                        ion-icon[name="axonops"] {
                          opacity: 1;
                        }

                        ion-icon.status {
                          transition: opacity 0.15s ease-in-out 0.5s, transform 0.1s ease-in-out 0.55s;
                          transform: translateY(0px);
                          opacity: 1;
                        }
                      }

                      div.ripple-wave {
                        width: 100% !important;
                        height: calc(100%) !important;
                        position: absolute !important;
                        inset: 0 !important;
                        margin: auto !important;
                      }
                    }
                  }
                }
              }

              div.path-inaccessible {
                position: absolute;
                top: 20px;
                right: 20px;
                margin: auto;
                font-size: 250%;
                transition: opacity 0.2s ease-in-out;
                opacity: 0;
                pointer-events: none;
                filter: drop-shadow(0px 0px 15px #dd4c64);
                cursor: pointer;
              }

              &.inaccessible {
                div.path-inaccessible {
                  opacity: 1;
                  pointer-events: all;
                }

                div.header {
                  filter: grayscale(1);
                  pointer-events: none;
                }

                div.actions {
                  div.action:not([action="delete"]) {
                    opacity: 0.45;
                    pointer-events: none;
                  }
                }

                button {
                  background: #505050 !important;
                  color: #9f9f9f !important;
                  pointer-events: none;
                }
              }
              transform: translateX(-15px);
              opacity: 0;
              @for $i from 1 through 300 {
                &.show-#{$i} {
                  animation: {
                    name: show;
                    duration: 0.75s;
                    delay: #{$i/9}s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                }
              }

              div.loading {
                @include position();
                opacity: 0;
                border-radius: 10px;
                pointer-events: none;
                transition: opacity 0.15s ease-in-out;

                .ldr {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  top: 20px;
                  right: 20px;
                  left: auto;
                  bottom: auto;
                }
              }

              &.loading {
                div.loading {
                  opacity: 0.65;
                  pointer-events: all;
                }
              }

              div.test-connection {
                @include position();
                opacity: 0;
                border-radius: 10px;
                pointer-events: none;
                transition: opacity 0.15s ease-in-out;
                background: rgba(0, 0, 0, 0.5);

                .ldr {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  top: 5px;
                  right: 8px;
                  left: auto;
                  bottom: auto;
                }
              }

              div.terminate-process {
                right: 12px;
                left: auto;
                top: 45px;
                bottom: auto;
                opacity: 0;
                pointer-events: none;
                transition: top 0.4s ease-in-out, opacity 0.2s ease-in-out 0s;
              }

              &.test-connection {
                div.test-connection {
                  opacity: 0.65;
                  pointer-events: all;
                }

                div.status {
                  opacity: 0 !important;
                }
              }

              &.enable-terminate-process {
                div.terminate-process {
                  top: 55px;
                  opacity: 1;
                  pointer-events: all;
                  transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out 0.1s;
                }
              }
            }

            div.workspace {
              min-height: 123px;
            }

            div.connection {
              width: 395px;

              div.footer {
                div.actions {
                  width: 80px;
                  border-radius: 10px;
                }
              }

              &[data-is-sandbox="true"] {
                div.footer {
                  div.actions {
                    width: calc(80px - 26.67px);
                  }
                }
              }

              &[axonops-integration="ture"]:not([data-is-sandbox="true"]) {
                div.footer {
                  div.actions {
                    width: 106.68px;
                  }
                }
              }

              div.connection-info {
                width: fit-content;
                margin-bottom: 8px;
                opacity: 0.9;
                font: {
                  size: 75%;
                  weight: 300;
                }
                display: flex;
                flex: {
                  direction: row;
                  wrap: wrap;
                }
                justify-content: flex-start;
                align-items: flex-start;
                min-height: 64px;

                div.info {
                  background: #2c2c2c;
                  border-radius: 5px;
                  overflow: hidden;
                  margin: 0 7px 7px 0;
                  width: fit-content;
                  padding-right: 10px;
                  display: flex;
                  flex: {
                    direction: row;
                    wrap: nowrap;
                  }
                  justify-content: flex-start;
                  align-items: center;
                  height: 25px;
                  white-space: nowrap;
                  animation: {
                    name: show-question;
                    duration: 1s;
                    timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    fill-mode: forwards;
                  }
                  opacity: 0;
                  transform: translateX(-10px);

                  div._placeholder {
                    background: #404040;
                    width: 100%;
                    height: 15px;
                    border-radius: 5px;
                  }

                  div.title {
                    position: relative;
                    top: 2px;
                    text-transform: capitalize;
                    margin-right: 5px;
                    background: rgba(255, 255, 255, 0.1);
                    padding: 0 7px 0 5px;
                    @extend .no-select;

                    ion-icon {
                      font-size: 165%;
                      @include position(absolute, 2px, 0, -9px, auto);
                      color: #2c2c2c;
                      transform: scaleX(-1);
                    }
                  }

                  &[info="host"] {
                    min-width: 135px;
                    animation-delay: 0.5s;

                    div.text {
                      max-width: 235px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }

                  &[info="cassandra"] {
                    min-width: 117px;
                    animation-delay: 0.6s;
                  }

                  &[info="data-center"] {
                    animation-delay: 0.7s;

                    div._placeholder {
                      min-width: 40px;
                    }
                  }

                  &[info="nodes"] {
                    animation-delay: 0.8s;

                    div.text {
                      margin-left: 5px;
                    }
                  }

                  &[info="axonops"] {
                    animation-delay: 0.9s;
                  }

                  &[info="management-tool"] {
                    animation-delay: 1s;
                  }
                }
              }

              div.status {
                @include position(absolute, 13px, auto, 16px, auto);
                height: 20px;
                opacity: 0;
                transition: opacity 0.2s ease-in-out, filter 0.3s ease-out;
                filter: grayscale(1) hue-rotate(0deg);

                &.show {
                  opacity: 1;
                }

                &.failure {
                  filter: hue-rotate(330deg) grayscale(0);
                }

                &.success {
                  filter: hue-rotate(-255deg) grayscale(0);
                }
              }
            }

            div.connections[workspace-id] {
              display: flex;
              flex: {
                direction: row;
                wrap: wrap;
              }
              align: {
                content: flex-start;
                items: flex-start;
              }
              justify-content: flex-start;
            }
          }
        }
      }
    }

    &.hide-content-info {
      div.content-info {
        height: 0;
        padding: 0;
        margin: 0;

        &:before {
          height: 0;
        }

        * {
          color: transparent !important;
          opacity: 0 !important;
          transition-delay: 0s;
          display: none;
        }
      }

      div.content {
        height: calc(100% - 20px) !important;
      }
    }
  }

  div.hidden-area,
  div.left,
  div.right {
    div.content {
      height: calc(100% - 20px);
      width: calc(100% - 20px);
      background: #202023;
      margin: 10px;
      border-radius: 10px;
      box-shadow: 0 0 0 1px #141414;
      padding-top: 10px;
      text-align: -webkit-center;
    }
  }

  div.hidden-area {
    pointer-events: none;
  }

  &.show-hidden {
    div.hidden-area {
      width: 450px;
      pointer-events: all;

      div.content .animate-hide,
      div.content div.notifications-container .animate-hide,
      webview {
        transition: opacity 0.5s ease-in-out !important;
        transition-delay: 0.25s !important;
        opacity: 1 !important;
      }
    }

    div.right {
      width: calc(100% - 80px - 450px);
    }
  }
}

div[class*="col-md"].flex {
  display: flex;
  flex: {
    direction: column;
    wrap: nowrap;
  }
  align: {
    items: flex-end;
    content: center;
  }
  justify-content: flex-start;

  div.icon-button {
    position: relative;
    top: 15px;
    left: -1px;
    overflow: hidden;

    div.btn {
      height: 10px;

      ion-icon {
        position: relative;
        bottom: 10px;
        font-size: 145%;
        color: #e3e3e3;
        opacity: 0.5;
      }

      &.reset-path,
      &.reset-url {
        height: 20px;
        width: 20px;
        position: relative;
        left: -2px;

        ion-icon {
          transform: rotate(55deg) scaleX(-1);
          bottom: 9px;
          left: 1px;
        }
      }
    }
  }
}

button[class*="btn-"] {
  box-shadow: 0 0 black !important;

  &[disabled] {
    color: #404040 !important;
  }
}

div.row {
  div.clr-field {
    @include position(absolute, 15px, auto, auto, auto);
    opacity: 0;
    pointer-events: none;
  }
}

div.pinned-toast-container,
div.toast-container {
  @include position(absolute, auto, 40px);
  z-index: 100000000000000;
}

div.content.notifications-center div.notifications-container,
div.pinned-toast-container,
div.toast-container {
  div.toast {
    --mdb-toast-bg: #262626;
    transition: all 0.2s ease-in-out;
    overflow: hidden;

    div.toast-header {
      background: #1a1a1a;
      color: #e3e3e3;

      span.toast-type {
        position: relative;
        margin-right: 5px;
        height: 25px;
        width: 25px;

        img {
          @include position();
          margin: auto auto auto -5px;
          opacity: 0.8;
          transform: scale(0.75) perspective(1px) translateZ(0);
          backface-visibility: hidden;
          height: -webkit-fill-available;

          &[src*="neutral"] {
            filter: grayscale(1);
          }
        }
      }
    }

    .me-auto {
      position: relative;
      left: -4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.animate {
      animation: {
        name: animate-toast;
        duration: 0.8s;
        timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        fill-mode: forwards;
      }
    }

    div.hide-progress {
      @include position(absolute, auto);
      height: 2px;

      div.bar {
        @include position(absolute, 0, 0, auto);
        width: 100%;
      }

      &.warning {
        div.bar {
          background: #d0af05;
        }
      }

      &.success {
        div.bar {
          background: #539f1d;
        }
      }

      &.failure {
        div.bar {
          background: #d14055;
        }
      }

      &.bg-progress,
      &.neutral {
        div.bar {
          background: #929292;
        }
      }
    }

    &.animate-hide {
      transition: filter 0.1s ease-in-out !important;
      filter: opacity(0) !important;
    }
  }
}

div.toast-container {
  transition: transform 0.4s ease-out;
  transition-delay: 0.2s;
}

ion-icon {
  &.trailing.is-valid {
    color: #14a44d;
  }

  &.trailing.is-invalid {
    color: #dc4c64;
  }
}

*[class^='col-'] {
  &.left-padding {
    padding-left: 3px;
  }

  &.right-padding {
    padding-right: 3px;
  }
}

div.btn {
  position: relative;

  div.invalid-inputs {
    @include position(absolute, 0, 0, 0, auto);
    width: 7px;
    height: 7px;
    background: #dc4c64;
    border-radius: 50%;
    display: none;
  }
}

.xterm .xterm-viewport {
  @include scrollbar(#2c2c2c, #17181a);
}

div.tab-content {
  div.tab-pane {
    &[tab="metadata-differentiation"] {
      div.metadata-content-container {
        display: flex;
        flex: {
          direction: row;
          wrap: nowrap;
        }
        align: {
          items: flex-start;
          content: flex-start;
        }
        justify-content: space-between;
        @include position();

        div.metadata-content {
          position: relative;
          width: calc(100% - 15px);
          height: calc(100% - 45px);
          background: #1e1e1e;
          margin: 10px;
          border-radius: 8px;
          overflow: hidden;

          &.old {
            margin-right: 5px;
          }

          &.new {
            margin-left: 5px;
          }

          div[class*="editor-container-"] {
            @include position();

            div.monaco-diff-editor {
              height: 100% !important;
            }
          }
        }

        span.badge.old {
          @include position(absolute, auto, 0, auto, 0);
          margin: 5px 5px 5px 20px;

          span.old-snapshot {
            max-width: 350px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
          }
        }

        span.badge.new {
          @include position(absolute, auto, 0, 0, auto);
          margin: 5px 20px 5px 5px;
        }

        div.centered-badges {
          @include position(absolute, auto, 5px);
          width: fit-content;
          display: flex;
          flex-direction: row;
          align-items: center;

          span.changes {
            height: 19.3px;
            background-color: #dfe7f6;
            color: #2c58a0;
            text-transform: none;
            line-height: 7px;
          }

          div.actions,
          div.diff-navigation {
            height: 19.33px;
            overflow: hidden;
            margin-left: 10px;

            span.btn {
              position: relative;
              bottom: 6px;
              width: 10px !important;
              height: 19.13px;

              ion-icon {
                @include position();
                font-size: 115%;
                transition: transform 0.1s ease-in-out;
              }

              &.refreshing {
                ion-icon {
                  animation: rotate 0.5s linear infinite;
                }
              }

              &.refresh {
                ion-icon {
                  opacity: 0.7;
                }
              }

              &.change-view {
                ion-icon {
                  font-size: 130%;
                  opacity: 0.8;
                }
              }
            }
          }

          div.diff-navigation {
            span[class*=diff-nav] {
              ion-icon {
                font-size: 130%;
              }

              &.diff-nav-prev {
                ion-icon {
                  transform: rotate(-90deg);
                }
              }

              &.diff-nav-next {
                ion-icon {
                  transform: rotate(90deg);
                }
              }
            }
          }
        }

        div.save-snapshot-suffix {
          @include position(absolute, auto);
          width: fit-content;
          margin-bottom: 50px;
          display: flex;
          flex: {
            direction: row;
            wrap: nowrap;
          }
          align-items: center;
          justify-content: center;
          background: #262626;
          border: 1px rgba(20, 20, 20, 0.7) solid;
          box-shadow: 0 0 0 1px #141414;
          outline: 0;
          border-radius: 8px;
          padding: 15px;
          overflow: hidden;
          opacity: 0;
          transform: translateY(10px);
          transition: all 0.2s ease-in-out;
          z-index: 2;

          div.form-outline {
            width: 300px;
          }

          div.time {
            white-space: nowrap;
            margin-left: 3px;

            &:after {
              content: '_';
            }
          }

          button {
            white-space: nowrap;
            margin-left: 15px;
          }

          &.show {
            animation: {
              name: animate-save-snapshot;
              duration: 0.8s;
              timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              fill-mode: forwards;
            }
            z-index: 4;
          }
        }

        div.changes-lines {
          @include position(absolute, auto);
          font-family: 'Droid Sans Mono', 'monospace', monospace;
          width: 250px;
          max-height: 400px;
          margin-bottom: 50px;
          background: #262626;
          border: 1px rgba(20,20,20,0.7) solid;
          box-shadow: 0 0 0 1px #141414;
          outline: 0;
          border-radius: 8px;
          padding: 15px;
          overflow-y: scroll;
          @include scrollbar(#515151, #262626);
          z-index: 3;
          opacity: 0;
          pointer-events: none;
          transform: translateY(10px);
          transition: all 0.2s ease-in-out;

          &.show {
            pointer-events: all;
            animation: {
              name: animate-save-snapshot;
              duration: 0.8s;
              timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              fill-mode: forwards;
            }
          }

          div.line {
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 85%;
            user-select: none;
            cursor: pointer;

            &:after {
              content: '';
              @include position();
            }

            &:not(:last-of-type) {
              margin-bottom: 15px;
            }

            span.number {
              background: rgba(255,255,255,0.1);
              padding: 5px;
              border-radius: 5px;
              transition: background 0.15s ease-in-out;
            }

            span.content {
              position: relative;
              top: 1px;
            }

            &:hover {
              span.number {
                background: rgba(255,255,255,0.2);
              }
            }
          }
        }

        div.editor {
          &.modified {
            margin-left: 10px;
          }
        }

        &.view-horizontal {
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: stretch;
          align-content: center;

          div.metadata-content {
            div.editor-container-all {
              div.editor {
                &.original {
                  height: calc(50% - 15px);
                  width: calc(100% - 20px);
                  margin-right: 10px;
                  margin-bottom: 5px;
                }

                &.modified {
                  height: calc(50% - 15px);
                  width: calc(100% - 20px);
                  margin-left: 10px;
                  margin-top: 5px;
                }
              }
            }
          }

          span.badge {
            &.old {
              bottom: auto;
              top: 0;
            }

            &.new {
              bottom: 0;
              right: auto;
              left: 15px;
            }
          }
        }
      }
    }

    &[tab="cqlsh-session"],
    &[tab="bash-session"] {
      div.interactive-terminal-container,
      div.terminal-container {
        @include position();
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        background: #17181a;
      }

      div.interactive-terminal-container {
        div.container-header {
          width: calc(100% - 240px);
        }

        div.session-content {
          height: calc(100% - 240px);
          overflow-y: scroll;
          font-size: 85%;
          padding-bottom: 40px;

          div.block {
            background: #2a2a2a;
            margin-right: 10px;
            border-radius: 7px;
            opacity: 0;
            transform: translateY(10px);

            &:first-of-type {
              margin-top: 20px;
            }

            &.show {
              animation: {
                name: animate-save-snapshot;
                duration: 0.5s;
                timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                fill-mode: forwards;
              }
            }

            div.statement {
              background: rgba(62, 62, 62, 0.8);
              padding: 7px;
              font-family: 'Terminal', monospace;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-content: center;
              justify-content: space-between;
              align-items: flex-start;
              width: fit-content;
              max-width: 80%;
              border-radius: 10px;
              position: relative;
              bottom: 15px;
              left: 10px;

              &:hover {
                div.actions.for-statement {
                  opacity: 1 !important;
                  pointer-events: all !important;
                }
              }

              div.text {
                max-width: 100%;

                pre {
                  width: 100%;
                  white-space: pre-wrap;
                }

                &.executing {
                  position: relative;

                  span.spinner {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 1px;
                    height: 25px;
                    width: 25px;
                    display: inline;
                    overflow: hidden;
                    vertical-align: middle;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    align-content: center;
                    align-items: center;
                    justify-content: center;
                  }

                  pre {
                    transition: all 0.2s ease-in-out;
                    display: inline;
                    margin-left: 35px !important;
                  }
                }
              }

              &.capitalize {
                text-transform: capitalize;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: flex-start;
                align-content: center;
              }

              span.toast-type {
                height: 17px;
                margin-right: 5px;
                position: relative;
                bottom: 1px;
              }
            }

            div.info-badges {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: center;
              position: absolute;
              top: 0;
              right: 0;
              margin: 5px;
              max-width: 20%;
              justify-content: flex-end;

              div.badge {
                opacity: 0.85;
                position: relative;
                top: 3px;
                margin-left: 3px;
                margin-bottom: 3px;
              }
            }

            div.output {
              padding: 3px 10px 10px;
              font-family: 'Terminal', monospace;
              overflow: scroll;
              @include scrollbar(#515151, #2a2a2a);
              border-radius: 7px;
              border-top-left-radius: 0;
              border-top-right-radius: 0;
              min-height: 10px;
              position: relative;

              div.executing,
              div.sub-output {
                background: #393939;
                padding: 5px 10px;
                border-radius: 5px;
                margin-bottom: 10px;
                position: relative;

                &.actions-shown {
                  margin-bottom: 35px;
                }

                &:before {
                  content: '';
                  width: 2px;
                  height: calc(100% - 10px);
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 3px;
                  margin: auto;
                  opacity: 0.5;
                }

                &.error {
                  &:before {
                    background: #f44336;
                  }
                }

                &.info {
                  color: var(--mdb-info);

                  &:before {
                    background: var(--mdb-info);
                  }
                }

                div.sub-output-content {
                  pre {
                    white-space: pre-wrap;
                  }

                  &.all-errors {
                    cursor: default;

                    pre {
                      background: #2e2c2c;
                      border-radius: 5px;
                      padding: 5px;
                      margin-top: 10px !important;
                    }
                  }
                }

                &.error[data-count] {
                  div.sub-output-content:not(.all-errors) {
                    transition: all 0.2s ease-in-out;
                    @extend .no-select;
                    cursor: pointer;

                    &:hover {
                      opacity: 0.8;
                    }
                  }

                  span.arrow {
                    height: 17px;
                    display: inline-block;
                    width: 17px;
                    position: relative;
                    margin-right: 0;
                    top: 3px;
                    opacity: 0.75;
                    @extend .no-select;
                    transition: transform 0.15s ease-in-out;

                    ion-icon {
                      position: absolute;
                      inset: 0;
                      margin: auto;
                      font-size: 190%;
                      transform: rotate(-90deg) translate(-2px, -2px);
                    }

                    &.show {
                      transform: rotate(90deg);
                    }
                  }
                }
              }

              div.executing {
                height: 35px;
                animation-duration: 1s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-name: loading-effect;
                animation-timing-function: linear;
                background: #393939;
                background: linear-gradient(to right, #393939 8%, #454545 18%, #393939 33%);
              }

              div.tabulator {
                font-size: inherit;
                border-radius: 7px;
                background: #252525;
                border: none;

                div.tabulator-header {
                  font-weight: 600;
                  border-bottom-width: 1px;
                }

                div.tabulator-footer {
                  border-top-width: 1px;
                }
              }
            }

            div.actions.for-statement {
              width: 60px;
              right: -30px;
              left: auto;
              bottom: -15px;
              top: auto;
              transform: scale(0.9);
              opacity: 0;
              pointer-events: none;
              transition: opacity 0.15s ease-in-out;
            }

            div.actions,
            div.sub-actions {
              position: absolute;
              top: auto;
              bottom: -18px;
              right: 10px;
              left: auto;
              margin: auto;
              width: 60px;
              height: 30px;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-items: center;
              justify-content: space-evenly;
              background: #3e3e3e;
              border-radius: 8px;

              &.tabulator-action {
                width: 120px;
              }

              div.action[action="download"],
              div.sub-action[sub-action="download"] {
                ion-icon {
                  font-size: 140%;
                  position: relative;
                  bottom: 2px;
                }
              }

              div.download-options {
                position: absolute;
                left: -100px;
                margin: auto;
                background: red;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                align-content: center;
                width: 90px;
                height: 30px;
                border-radius: 7px;
                background: #3e3e3e;
                border-radius: 8px;
                padding: 0 5px;
                display: none;

                div.option {
                  &[option="pdf"] {
                    margin-left: 10px;
                  }

                  ion-icon {
                    font-size: 170%;
                  }
                }
              }

              div.btn {
                font-size: 100%;
                color: #e3e3e3;
                width: 100%;
                opacity: 0.4;
                transition: opacity 0.2s ease-in-out;

                &:focus,
                &:hover {
                  opacity: 0.6;
                }

                &:active {
                  opacity: 0.8;
                }

                &.disabled {
                  opacity: 0.15 !important;
                }

                &[action="tracing"],
                &[sub-action="tracing"] {
                  font-size: 200%;

                  ion-icon {
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    transform: scale(0.65) translateX(-2px) translateY(-2px);
                  }
                }

                &[action="delete"],
                &[sub-action="delete"] {
                  font-size: 120%;
                }
              }
            }

            div.sub-actions {
              bottom: -22px !important;
            }
            margin-top: 20px;

            &:not(:last-of-type) {
              margin-bottom: 35px;
            }
          }
        }

        div.empty-statements {
          position: absolute;
          top: 60px;
          margin: auto;
          z-index: 2;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          align-content: center;
          height: calc(100% - 240px);
          width: 100%;
          text-align: -webkit-center;
          @extend .no-select;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.3s ease-in-out;
          transition-delay: 0.05s;
          background: inherit;

          &.show {
            opacity: 1;
            pointer-events: all;
            transition-delay: 0.3s;
          }

          div.container {
            div.semi-colon {
              font-family: 'Terminal', monospace;
              font-size: 600%;
              font-weight: 600;
              height: fit-content;
              opacity: 0.8;
              animation: fade-in-out 5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
            }

            div.message {
              margin-top: 60px;
              font-weight: 200;
              opacity: 0.5;
              font-size: 13px;
            }
          }
        }

        div.container-footer {
          height: 155px;
          margin-top: 20px;
          box-shadow: 0 -10px 20px 10px #17181a;
          position: relative;

          div.top {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: flex-start;
            justify-content: flex-start;

            div.change-consistency-levels,
            div.change-pagination-size,
            div.history-items-clear-all {
              position: absolute;
              bottom: 165px;
              left: calc(50% + 15px);
              border: 0;
              outline: 0;
              opacity: 0;
              pointer-events: none;
              transform: translateX(-10px);
              transition: all 0.4s ease-in-out;

              &.change-consistency-levels,
              &.change-pagination-size {
                left: auto;
                right: calc(350px + 50px + 15px);
              }

              &.change-pagination-size {
                right: calc(250px + 50px + 15px);
              }

              button {
                background: rgb(38, 38, 38);
                padding-left: 5px;
                padding-right: 5px;
                color: inherit;

                ion-icon {
                  font-size: 125%;
                  vertical-align: middle;
                  position: relative;
                  bottom: 1px;
                }
              }

              &.show {
                pointer-events: all;
                animation: {
                  name: show-question;
                  duration: 0.5s;
                  delay: 0.2s;
                  timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                  fill-mode: forwards;
                }
                z-index: 4;
              }
            }

            div.consistency-levels,
            div.current-pagination-size,
            div.history-items {
              background: #262626;
              position: absolute;
              bottom: 165px;
              background-color: #262626;
              border: 0;
              outline: 0;
              font-family: 'Terminal', monospace;
              width: 50%;
              max-height: 510px;
              overflow-y: scroll;
              border-radius: 7px;
              padding: 5px 0;
              opacity: 0;
              pointer-events: none;
              transform: translateY(5px);
              transition: all 0.4s ease-in-out;

              &.consistency-levels,
              &.current-pagination-size {
                width: 350px;
                right: 50px;
                overflow: hidden;
                padding: 0;

                table {
                  width: 100%;
                  font-size: 85%;
                  border-radius: 5px;
                  overflow: hidden;
                  @extend .no-select;

                  th {
                    font-weight: bold;

                    &:after {
                      content: '';
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      right: 0;
                      margin: auto;
                      height: 100%;
                      width: 2px;
                      background: #262626;
                    }

                    ion-icon {
                      display: inline-block;
                      vertical-align: middle;
                      transform: rotate(90deg) translateX(-1px);
                      margin-right: 3px;
                      opacity: 0.9;
                    }
                  }

                  td,
                  th {
                    padding: 7px;
                    width: 50%;
                  }

                  td {
                    padding-bottom: 4px;
                    padding-top: 4px;

                    div.level {
                      cursor: pointer;
                      transition: all 0.2s ease-out;
                      border-radius: 2px;
                      padding: 3px 5px;

                      &:hover {
                        padding-left: 7px;
                        background: #3b3b3b;
                        opacity: 0.85;
                      }

                      &.selected {
                        background: #3b3b3b;
                        padding: 3px 5px !important;
                        opacity: 1 !important;
                      }
                    }
                  }
                }
              }

              &.current-pagination-size {
                width: 250px;
                padding: 10px;
                line-height: 15px;
              }

              &.show {
                pointer-events: all;
                animation: {
                  name: animate-save-snapshot;
                  duration: 0.5s;
                  timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                  fill-mode: forwards;
                }
                z-index: 4;
              }

              div.history-item {
                display: flex;
                flex-direction: row;
                align-content: flex-start;
                align-items: center;
                justify-content: space-between;
                background: #1d1d1e;
                height: 40px;
                padding: 0 10px;
                margin: 5px;
                font-size: 85% !important;
                border-radius: 5px;
                flex-wrap: nowrap;
                position: relative;

                div.index {
                  background: #333335;
                  padding: 0 5px;
                  border-radius: 3px;
                  width: 30px;
                  text-align: center;
                  margin-right: 7px;
                }

                div.click-area {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  background: rgba(255, 255, 255, 0.7);
                  opacity: 0;
                  cursor: pointer;
                  border-radius: 5px;
                  transition: opacity 0.15s ease-in-out;

                  &:hover {
                    opacity: 0.15;
                  }
                }

                div.inner-content {
                  background: #333335;
                  padding: 0 5px;
                  border-radius: 3px;
                  height: 25px;
                  width: calc(100% - 165px);

                  pre {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }

                div.action-copy,
                div.action-delete,
                div.action-execute {
                  width: 25px;
                  height: 25px;
                  margin-left: 7px;
                  display: flex;
                  flex-direction: column;
                  flex-wrap: nowrap;
                  align-content: center;
                  align-items: center;
                  justify-content: center;
                  overflow: hidden;
                  border-radius: 10px;
                  position: relative;

                  span.btn {
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    color: inherit;
                    opacity: 0.75;
                    transition: opacity 0.2s ease-in-out;

                    &:hover {
                      opacity: 0.65;
                    }

                    ion-icon {
                      font-size: 140%;
                      position: absolute;
                      inset: 0;
                      margin: auto;
                      transform: translateX(-4px);

                      &[name*="copy"] {
                        font-size: 125%;
                      }
                    }
                  }
                }
              }
            }

            div.textarea {
              width: calc(100% - 49px);
              opacity: 0;
              pointer-events: none;

              textarea {
                height: 45px;
                min-height: 45px;
                max-height: 100px;
                transition: height 0s;
              }

              div.form-outline {
                div.suggestion {
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  font-family: 'Terminal', monospace;
                  color: #e3e3e3;
                  z-index: 2;
                  opacity: 0.35;
                  padding: 0.32rem 0.75rem;
                  overflow: hidden;
                  overflow-wrap: break-word;
                  resize: none;
                  text-align: start;
                  height: 45px;
                  font-size: 95%;
                  line-height: 35px;
                }

                textarea {
                  font-family: 'Terminal', monospace;
                  background: transparent;
                  z-index: 3;
                  position: relative;
                  height: 40px;
                  resize: vertical !important;
                  font-size: 95%;
                  line-height: 35px;
                }

                label.form-label {
                  top: -2px;
                }
              }
            }

            div.execute,
            div.history {
              width: 44px;
              height: 44px;
              margin-left: 5px;
              position: relative;
              background: rgba(68, 68, 68, 0.5);
              border-radius: 7px;
              transition: background 0.2s ease-in-out;
              overflow: hidden;

              button {
                position: absolute;
                inset: 0;
                margin: auto;

                ion-icon {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  font-size: 170%;
                  color: #e3e3e3;
                  opacity: 0.8;
                }
              }

              &:active,
              &:focus,
              &:hover {
                background: rgba(68, 68, 68, 0.75);
              }
            }

            div.execute {
              button {
                l-reuleaux {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  transform: rotate(90deg);
                  filter: invert(1);
                  opacity: 0;
                }
              }

              ion-icon {
                transition: opacity 0.2s ease-in-out;
              }

              &.busy {
                ion-icon {
                  opacity: 0;
                  transition-delay: 0s;
                }

                l-reuleaux {
                  opacity: 0.7;
                  transition: opacity 0.2s ease-in-out;
                }
              }
            }

            div.history {
              border-radius: 50%;
              margin-left: 0;
              margin-right: 5px;
              background: transparent;

              &:hover {
                background: rgba(68, 68, 68, 0.5);
              }

              button {
                background: transparent !important;
                background-color: transparent !important;

                &[disabled] {
                  ion-icon {
                    color: #858585 !important;
                  }
                }
              }
            }

            div.kill-process {
              position: absolute;
              bottom: 110px;
              right: 7px;
              margin: auto;
              width: 35px;
              height: 35px;
              border-radius: 50%;
              overflow: hidden;
              opacity: 0;
              pointer-events: none;
              transform: translateY(5px);
              transition: all 0.4s ease-in-out;
              z-index: 2;

              &.show {
                pointer-events: all;
                animation-name: show-sandbox-icon;
                animation-duration: 0.9s;
                animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                animation-fill-mode: forwards;
              }

              button {
                position: absolute;
                inset: 0;
                margin: auto;
                padding: 0;
                color: inherit !important;

                ion-icon {
                  font-size: 190%;
                  position: absolute;
                  inset: 0;
                  margin: auto;
                }
              }
            }
          }

          div.hints-container {
            margin: 0 50px;
            font-family: 'Terminal', monospace;
            font-size: 85%;
            opacity: 0;
            pointer-events: none;
            transform: translateX(10px);
            transition: all 0.4s ease-in-out;
            display: flex;
            flex-direction: row-reverse;
            position: absolute;
            right: 2px;
            bottom: 115px;

            &.show {
              pointer-events: all;
              animation-name: show-answer;
              animation-duration: 0.9s;
              animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
              animation-fill-mode: forwards;
            }

            div.hint {
              width: fit-content;
              padding: 0 5px;
              border-radius: 5px;
              color: white;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              align-content: center;
              align-items: center;
              justify-content: flex-start;
              opacity: 0.85;
            }
          }

          div.bottom {
            opacity: 0.7;
            font-family: 'Terminal', monospace;
            margin-top: 3px;
            opacity: 0;
            pointer-events: none;

            div.suggestions-list {
              min-height: 30px;
              overflow-y: auto;
              position: relative;
              height: calc(100% - 40px);
              padding-bottom: 20px;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-content: flex-start;
              align-items: flex-start;
              justify-content: flex-start;
              margin: 12px 50px 0;

              span.suggestion {
                display: block;
                width: fit-content;
                height: fit-content;
                line-height: 1;
                text-transform: inherit;
                text-align: center;
                padding: 0.35em 0.65em;
                font-size: 0.75em;
                font-weight: 500;
                color: inherit;
                white-space: nowrap;
                vertical-align: baseline;
                overflow: hidden;
                box-shadow: 0 0;
                background: #303036;
                filter: opacity(0.6);
                transition: filter 0.2s ease-in-out;
                cursor: pointer;
                margin: 1px;

                &:first-child,
                &:first-of-type {
                  margin: 0 1px 0 0;
                }

                &:last-child,
                &:last-of-type {
                  margin-right: 0;
                }

                &:hover {
                  filter: opacity(0.75);
                }

                &[data-selected="true"] {
                  filter: opacity(0.95);
                }
              }
            }
          }

          div.console-editor {
            position: absolute;
            margin: auto;
            z-index: 3;
            height: calc(100% - 45px);
            bottom: 0;
            left: 0;
            width: calc(100% - 49px);
            border: 1px #474747 solid;
            // border-radius: 7px;
            // overflow: hidden;
          }

          div.ui-resizable-handle {
            top: 40px;
            width: calc(100% - 49px);
          }
        }

        div.session-actions {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          align-items: center;
          justify-content: flex-start;
          height: 40px;
          margin-bottom: 15px;
          opacity: 0.81;
          transform: scale(0.81);
          transform-origin: left;
          width: 119%;

          div.actions-right-side {
            position: absolute;
            bottom: 0;
            top: 1px;
            right: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
          }

          div.session-action {
            &:not(:first-of-type) {
              margin-left: 8px;
            }

            button {
              transition: opacity 0.2s ease-in-out;
              position: relative;
              height: 37px !important;

              ion-icon {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                transform: translateX(20px);
                font-size: 150%;
              }

              span:not(.button-label) {
                margin-left: 20px;
              }
            }

            &.consistency-level,
            &.pagination-size,
            &.query-tracing {
              display: none;

              button {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                align-items: center;
                justify-content: flex-start;
                height: 36px;

                ion-icon[name="pagination"] {
                  font-size: 170%;
                  transform: translateX(17px);
                }

                ion-icon[name="query-tracing"] {
                  transform: translateX(9px) translateY(1px) scale(0.65);
                  font-size: 300%;
                }

                span.badge {
                  font-size: 105%;
                  transform-origin: left;
                  opacity: 0.78;
                  font-weight: 500;
                  margin-left: 5px;
                  background-color: #1e1e1e;
                  pointer-events: none;
                }
              }
            }
          }

          &.hide-labels-right-side {
            div.actions-right-side {
              button.btn {
                padding-left: 40px;
              }

              span.button-label {
                display: none;
              }
            }
          }

          &.hide-labels {
            div.session-action {
              button.btn {
                padding-right: 34px;
              }

              span.button-label {
                display: none;
              }
            }

            div.actions-right-side {
              button.btn {
                padding-left: 40px;
                padding-right: 24px;
              }

              span.button-label {
                display: none;
              }
            }
          }
        }
      }

      div.loading {
        @include position();
        background: #17181a;
        transition: opacity 0.2s ease-in-out;
        transition-delay: 0.5s;
        opacity: 0;
        pointer-events: none;
        cursor: default !important;
        z-index: 6;

        div.sub-content {
          @include position();
          height: 25%;
          opacity: 0.7;

          img.gif {
            transition: opacity 0.4s ease-in-out;
            transition-delay: 0.2s;
            opacity: 0;
          }
        }
      }

      &.loading {
        div.loading {
          opacity: 1;
          pointer-events: all;
          transition-delay: 0s;

          div.sub-content {
            img.gif {
              opacity: 1;
            }
          }
        }
      }
    }

    &[tab="query-tracing"],
    &[tab="cql-description"] {
      div.descriptions-container,
      div.queries-container {
        padding: 15px 10px 10px;

        div.descriptions,
        div.queries {
          height: calc(100% - 90px);
          overflow-y: scroll;
          padding-right: 15px;

          div.description,
          div.query {
            position: relative;
            background: #252525;
            border-radius: 8px;
            margin-top: 20px;
            display: flex;
            transition: height 0.2s ease-in-out;
            flex: {
              direction: column;
              wrap: nowrap;
            }
            justify-content: flex-start;
            align-items: flex-start;

            span.badge {
              position: sticky;
              top: 0;
              left: 20px;
              background: #a1a3a4;
              color: #363940;
              cursor: pointer;
              user-select: none;
              -webkit-user-drag: none;
              z-index: 1;

              a {
                color: #363940 !important;
              }

              span.dot {
                display: inline-block;
                background: rgba(54, 57, 64, 0.8);
                width: 5px;
                height: 5px;
                margin: 0 3px 0 5px;
                border-radius: 50%;
                position: relative;
                bottom: 1px;
              }
            }

            div.info-left,
            div.info-right {
              width: 100%;
              padding: 15px;
              position: relative;

              div.copy-tracing {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                position: absolute;
                top: 5px;
                right: 10px;
                background: #3f4146;
                overflow: hidden;

                div.btn {
                  position: absolute;
                  inset: 0;
                  margin: auto;

                  ion-icon {
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    font-size: 120%;
                    color: #e3e3e3;
                    opacity: 0.7;
                  }
                }
              }
            }

            div.info-left {
              display: flex;
              flex: {
                direction: row;
                wrap: nowrap;
              }
              align-items: flex-start;
              justify-content: space-between;
              height: 400px;
              padding-top: 20px;

              div.left-chart {
                width: 70%;
                position: relative;

                button.zoom-reset {
                  position: absolute;
                  right: 5px;
                  top: -10px;
                  margin: auto;
                  width: 30px;
                  height: 30px;
                  border-radius: 50%;
                  background: rgb(63, 65, 70);
                  color: rgb(167, 167, 167);

                  ion-icon {
                    font-size: 150%;
                    transform: translateY(-4px);
                  }
                }
              }

              div.right-chart {
                width: 30%;
                text-align: -webkit-right;
              }

              div {
                width: 100%;
                height: 100%;

                canvas {
                  filter: invert(1);
                  max-height: 350px;
                }
              }
            }

            th[scope="col"] {
              white-space: nowrap;
            }

            span.color {
              position: relative;
              bottom: 2px;
              width: 13px;
              height: 13px;
              display: inline-block;
              border-radius: 4px;
              vertical-align: middle;
              margin-right: 3px;
              filter: invert(1);
            }

            div.sources {
              background: #3a3a3a;
              padding: 5px 0;
              margin-left: 10px;
              margin-right: 10px;
              border-radius: 8px;
              vertical-align: middle;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-content: flex-start;
              justify-content: flex-start;
              align-items: flex-start;
              transform-origin: left;
              transform: scale(0.9);
              width: calc(100% + 10% - 10px);
              margin-top: 12px;
              margin-bottom: 5px;

              button {
                margin: 2px 5px;

                span.badge {
                  text-transform: none;
                  background: var(--mdb-gray-400);
                  margin-left: 1px !important;
                  vertical-align: middle;
                  display: inline-block;
                }
              }
            }
          }

          div.description:first-of-type {
            margin-top: 10px !important;
          }
        }
      }

      div.empty {
        background: #17181a !important;

        div.lottie-container {
          @include position();
          height: 30%;

          img.gif {
            filter: grayscale(1) opacity(0.5);
          }

          div.message {
            margin-top: 20px;
            font-weight: 200;
            opacity: 0.5;
            transition: opacity 0.5s ease-in-out;
            transition-delay: 0.25s;
            text-align: center;
          }
        }
      }

      &[tab="cql-description"] {
        div.descriptions-container {
          div.descriptions {
            div.description {
              margin-bottom: 30px !important;

              &:last-of-type {
                margin-bottom: 10px !important;
              }

              div.inner-content {
                width: 100%;
                height: 100%;
                min-height: 400px;
                position: relative;
                transition: min-height 0.2s ease-out;
                margin-top: -19px;

                div.editor {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                }

                div.expand-shrink {
                  position: absolute;
                  bottom: -15px;
                  left: 0;
                  margin: auto;
                  background: #1e1e1e;
                  color: #363940;
                  height: 30px;
                  width: 30px;
                  border-radius: 50%;
                  display: flex;
                  flex: {
                    direction: column;
                    wrap: nowrap;
                  }
                  align-items: center;
                  justify-content: center;
                  box-shadow: 0 0 0 4px #17181a;
                  overflow: hidden;

                  button {
                    position: absolute;
                    inset: 0;
                    color: #e3e3e3;

                    ion-icon {
                      font-size: 130%;
                    }
                  }
                }
              }

              div.sticky-header {
                width: 100%;
                position: sticky;
                top: 0;
                left: 0;
                right: 0;
                z-index: 15;
              }

              div.expand-editor {
                background: #1e1e1e;
                position: absolute;
                bottom: -15px;
                left: 0;
                padding: 5px;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                box-shadow: 0 0 0 5px #17181a;
                overflow: hidden;

                button {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  transform: rotate(-90deg);
                  transition: transform 0.2s ease-in-out;

                  &.shrink {
                    transform: rotate(90deg);
                    transition-delay: 0.05s;
                  }

                  ion-icon {
                    color: #e3e3e3;
                    font-size: 128%;
                    opacity: 0.7;
                    position: relative;
                    top: -1px;
                  }
                }
              }

              span.badge.description-scope {
                background: #a1a3a4;
                color: #363940;
                cursor: pointer;
                user-select: none;
                -webkit-user-drag: none;
                z-index: 1;
                transform: translateX(10px);
              }

              div.close-description {
                background: #a1a3a4;
                position: absolute;
                top: 0;
                right: 0;
                padding: 5px;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                box-shadow: 0 0 0 5px #17181a;
                overflow: hidden;

                button {
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  transform: rotate(-90deg);
                  transition: opacity0.2s ease-in-out;

                  &:hover {
                    opacity: 0.9;
                  }

                  ion-icon {
                    color: #363940;
                    font-size: 165%;
                    opacity: 1;
                    position: relative;
                    top: -1px;
                  }
                }
              }
            }
          }

          div.close-all-descriptions {
            width: 40px;
            height: 44px;
            position: absolute;
            top: 1px;
            right: -45px;
            opacity: 0.65;

            button {
              position: absolute;
              inset: 0;
              margin: auto;

              ion-icon {
                font-size: 200%;
                position: absolute;
                inset: 0;
                margin: auto;
                color: #1e1e1e;
              }
            }
          }
        }

        div.empty {
          div.lottie-container {
            img.gif {
              filter: opacity(0.4);
              transform: scale(1.5);
            }
          }
        }
      }

      &._empty {
        div.empty {
          opacity: 1 !important;
          pointer-events: all !important;
        }
      }
    }
  }
}

div.workspaces-container {
  div.workspace.sandbox {
    ion-icon[name="sandbox"] {
      @include position();
      font-size: 600%;
      z-index: -1;
      pointer-events: none;
      color: #3b71ca;
      transform: translateY(15px);
      opacity: 0;
    }

    &[class*="show-"] {
      ion-icon[name="sandbox"] {
        animation: {
          name: show-sandbox;
          duration: 2s;
          delay: 0.7s;
          timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
          fill-mode: forwards;
        }
      }
    }
  }
}

.tooltip-left {
  display: block;
  text-align: left !important;
}

div.dropdown[for-select] {
  position: relative;
  bottom: 46px;
  margin-bottom: -21.59px;
  z-index: 1;

  &.adjust {
    bottom: 70px;
  }

  button {
    opacity: 0;
    pointer-events: none;
  }

  ul.dropdown-menu {
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
    animation-duration: 0.1s;

    &.show {
      animation-duration: 0.55s;
    }
  }
}

div.more-connections,
div.more-workspaces {
  background: #17181a;
  @include position(absolute, auto);
  border-radius: 10px;
  height: 50px;
  display: flex;
  opacity: 0;
  transition: bottom 0.35s cubic-bezier(0.45, 0.05, 0.55, 0.95), opacity 0.35s cubic-bezier(0.45, 0.05, 0.55, 0.95);

  div.buttons {
    @include position(absolute, auto, 10px);
    display: flex;
    flex: {
      direction: row;
      wrap: nowrap;
    }
    align-items: center;
    justify-content: space-around;
    width: 36px;
    height: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.45, 0.05, 0.55, 0.95);

    button {
      position: relative;
      width: 18px;
      height: 18px;
      border-radius: 50%;

      ion-icon {
        font-size: 150%;
        color: #e3e3e3;
        @include position();
      }
    }
  }
}

div.switch-connections div.connection:not([style*="none"]):nth-child(2) {
  margin-top: 0;
}

div.row {
  &.flex {
    display: flex;
    flex: {
      direction: row;
      wrap: nowrap;
    }
    align-items: center;
  }

  &.margin-bottom {
    margin-bottom: 28px;

    &.more-margin {
      margin-bottom: 45px;
    }
  }

  &.flex-advanced {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    align-items: flex-start;
  }
}

.table > :not(caption) > * > * {
  background-color: #262626;
}

table.table-dark {
  background-color: #262626;
}

div.form-helper.ai-assistant {
  bottom: -26px !important;

  span.float-left {
    float: left;

    kbd {
      opacity: 0.7;
    }
  }

  div.form-counter {
    float: right;
  }
}

div.range {
  div.default-value {
    @include position(absolute, 0, 0, auto, 56px);
    left: 56px;
    background: #fff;
    z-index: -1;
    width: 2px;
    height: 60%;
    border-radius: 100px;
    transform: translateY(1px) translateX(-1px);
    opacity: 0.8;
  }
}

div.btn {
  div.notify {
    @include position();

    img.gif {
      position: absolute;
      transform: scale(0.62);
      opacity: 0.45;
      transition: opacity 0.15s ease-in-out;
      height: -webkit-fill-available;
      inset: 0;
      margin: auto;

      &[update] {
        filter: grayscale(1);
        transition: all 0.15s ease-in-out;
        opacity: 1;
        transform: translateY(3px);
      }
    }
  }

  &.active {
    div.notify {
      img.gif {
        opacity: 0.7;

        &[update] {
          filter: grayscale(0);
        }
      }
    }
  }

  &:hover {
    div.notify {
      img.gif {
        opacity: 1;

        &[update] {
          filter: grayscale(0) brightness(125%);
        }
      }
    }
  }

  div.circle {
    width: 9px;
    height: 9px;
    position: absolute;
    background: #0080ff;
    border-radius: 50%;
    inset: 0;
    margin: auto;
    top: -15px;
    left: 15px;
    transform: scale(0);
    animation: {
      name: update-notification;
      duration: 3s;
      timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      iteration-count: infinite;
      fill-mode: forwards;
      delay: 0.5s;
    }
  }

  &:hover {
    div.circle {
      animation-play-state: paused;
    }
  }
}

div.question {
  div.buttons {
    button {
      &.btn.delete {
        font-size: 105% !important;
        opacity: 0 !important;
        pointer-events: none;
        transform: translateY(1px);
      }
    }
  }

  &.show-delete-btn {
    div.buttons {
      button {
        &.btn.copy {
          right: 20px !important;
        }

        &.btn.delete {
          opacity: 0.45 !important;
          transition-delay: 0.15s;
          pointer-events: all;

          &:hover {
            opacity: 0.65 !important;
          }
        }
      }
    }
  }
}

div.hidden-area {
  div.content {
    &.ai-assistant {
      div.loading-questions {
        @include position(absolute, 0, auto);
        height: 70px;
        opacity: 0;
        transform: scale(0);
        pointer-events: none;
        transition: all 0.2s ease-in-out;
        background: #202023;
        backdrop-filter: blur(5px);
      }

      div.questions-and-answers {
        &:before {
          content: '';
          width: 100%;
          height: 0;
          display: block;
          transition: height 0.2s ease-in-out;
        }
      }

      &.loading-old-questions {
        div.loading-questions {
          opacity: 0.7;
          transform: scale(1);
          transition-delay: 0.15s;
        }

        div.questions-and-answers {
          &:before {
            height: 50px;
          }
        }
      }
    }
  }
}

div.modal#addEditConnectionDialog {
  div.modal-dialog {
    div.modal-body {
      div.terminate-process {
        left: 80px;
        opacity: 0;
        pointer-events: none;
        transition: left 0.4s ease-in-out, opacity 0.2s ease-in-out 0s;
      }
    }
  }

  &.enable-terminate-process {
    div.modal-dialog {
      div.modal-body {
        div.terminate-process {
          left: 120px;
          opacity: 1;
          pointer-events: all;
          transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out 0.1s;
        }
      }
    }
  }
}

div.pinned-toast-container {
  --mdb-toast-zindex: 1060;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
  right: auto;
  left: 100px;
  transition: left 0.4s ease-out;
  transition-delay: 0.15s;
}

div.pinned-toast-container > :not(:last-child) {
  margin-bottom: var(--mdb-toast-spacing);
}

div.query {
  span.id-time {
    ion-icon {
      font-size: 140%;
      vertical-align: middle;
      position: relative;
      bottom: 1px;
      margin-left: 10px;
      opacity: 0.9;
    }
  }
}

#createSandboxProjectProcess,
#importWorkspacesProcess {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  span {
    vertical-align: middle;
    margin-left: 5px;
  }
}

div.webview-navigation {
  background: #2f2f2f;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;

  div.nav {
    width: 100%;

    button {
      color: inherit !important;
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;

      &.disabled {
        opacity: 0.35;
      }

      ion-icon {
        font-size: 150%;
        margin-left: 5px;
        transform: rotate(90deg);
      }
    }

    &[action="more"] {
      button {
        flex-direction: row;
      }
    }

    &[action="back"] {
      button {
        flex-direction: row;

        ion-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

div.webview-more-actions {
  position: absolute;
  background: #2f2f2f;
  bottom: 37px;
  right: 0;
  left: 0;
  margin: auto;
  width: 150px;
  border-radius: 7px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.2s ease-in-out;
  z-index: 1;

  &.show {
    pointer-events: all;
    animation: {
      name: animate-save-snapshot;
      duration: 0.8s;
      timing-function: ease-out;
      fill-mode: forwards;
    }
  }

  div.nav {
    width: 100%;
    position: relative;

    button {
      color: inherit !important;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      padding: 9px;
      font-size: 80%;

      &.disabled {
        opacity: 0.35;
      }

      ion-icon {
        font-size: 150%;
        margin-left: 5px;

        &[name="refresh"] {
          margin-right: 5px;
          font-size: 125%;
          position: relative;
          margin-left: 0;
          bottom: 1px;
        }

        &[name="logout"] {
          margin-right: 5px;
          font-size: 125%;
          position: relative;
          margin-left: 0;
          bottom: 1px;
          transform: scaleX(-1);
        }
      }
    }

    &[action="logout"] {
      border-radius: 0;
      border-top: 1px #4b4b4b solid;
    }

    &[action="refresh"] {
      ion-icon {
        font-size: 120%;
      }
    }
  }
}

div.ai-assistant {
  div.loading-page {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    height: calc(100% - 30px);
    bottom: auto;

    &.show {
      opacity: 1;
      pointer-events: all;
    }
  }
}

div.more-list-bg {
  position: absolute;
  inset: 0;
  margin: auto;
  display: none;
}

div.for-workspaces.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#addWorkspaceProcess {
  height: 36px;

  ion-icon {
    font-size: 190%;
    position: relative;
    bottom: 2px;
    vertical-align: middle;
  }

  span {
    position: relative;
    top: -1px;
  }
}

#appversion:before {
  content: 'v';
}

div.app-info-actions {
  margin-top: 10px;

  button {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 3px;
    position: relative;

    ion-icon {
      position: absolute;
      inset: 0;
      margin: auto !important;
      font-size: 130% !important;
      color: #e3e3e3;
      opacity: 0.8;
      transition: opacity 0.2s ease-in-out;

      &[name="external-link"] {
        opacity: 0.65;
      }
    }

    &:hover {
      ion-icon {
        opacity: 0.65;

        &[name="external-link"] {
          opacity: 0.50;
        }
      }
    }
  }
}

button#showMoreAbout {
  color: inherit;
  margin: 8px 0;
  padding: 6px 10px 6px 5px;

  ion-icon {
    font-size: 145%;
    transition: all 0.15s ease-in-out;
  }

  &.slideUp {
    ion-icon {
      transform: rotate(180deg);
    }
  }
}

div#moreAbout {
  background: #201f23;
  font-family: 'Terminal', monospace;
  font-size: 75%;
  text-align: left;
  padding: 5px;
  border-radius: 7px;
  width: 100%;
  display: none;

  div[data-version] {
    &:first-letter {
      text-transform: capitalize;
    }

    button {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      bottom: 2px;

      ion-icon {
        position: absolute;
        inset: 0;
        margin: auto !important;
        font-size: 120% !important;
        color: #e3e3e3;
        opacity: 0.8;
        transition: opacity 0.2s ease-in-out;

        &[name="external-link"] {
          opacity: 0.65;
        }
      }

      &:hover {
        ion-icon {
          opacity: 0.65;

          &[name="external-link"] {
            opacity: 0.50;
          }
        }
      }
    }
  }
}

div[check-result] {
  font-size: 80%;
  vertical-align: middle;
  position: relative;
  top: 6px;
  padding: 0 5px;
  border-radius: 7px;
  width: fit-content;
  height: 20px;
  line-height: 20px;
  opacity: 0;
  transform: translateX(-10px);
  pointer-events: none;
  color: inherit;
  box-shadow: none !important;
  text-transform: none;

  &.show {
    pointer-events: all;
    animation: {
      name: show-question;
      duration: 1s;
      timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      fill-mode: forwards;
    }
  }
}

button#checkNowForUpdates {
  l-momentum {
    width: 0;
    opacity: 0;
    transition: width 0.2s ease-in-out, opacity 0.05s ease-in-out;
  }

  &.checking {
    l-momentum {
      width: 13.5px;
      opacity: 1;
      transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out 0.15s;
    }
  }
}

div.management-tools {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;

  div.tool {
    background: #353535;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    padding: 10px;
    border-radius: 7px;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    &:hover {
      box-shadow: inset 0 0 0 1px rgba(59, 113, 202, 0.80);
    }

    &.selected {
      box-shadow: inset 0 0 0 2px rgba(59, 113, 202, 0.80);

      div.icon {
        filter: grayscale(0);
      }
    }

    &[tool="podman"] {
      margin-right: 6px;
    }

    &[tool="docker"] {
      margin-left: 6px;
    }

    div.icon {
      font-size: 200%;
      margin-right: 8px;
      filter: grayscale(0.5);
    }
  }
}

ion-icon.hint-icon,
ion-icon.management-tools-hint-icon {
  font-size: 130%;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
  transition: 0.2s ease-in-out;
  color: inherit;
  cursor: pointer;

  &:hover {
    opacity: 0.7;
  }

  &.no-select {
    pointer-events: none !important;
  }
}

div.management-tools-hint {
  background: rgba(123, 181, 255, 0.1);
  font-size: 85%;
  width: fit-content;
  padding: 0 5px;
  margin-top: -5px;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: default;
  display: none;

  span.link {
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    ion-icon {
      margin-left: 1px;
      vertical-align: middle;
      position: relative;
      bottom: 2px;
    }

    &:hover {
      opacity: 0.85;
    }
  }
}

div.row {
  &.for-logging-info,
  &.row.for-management-tools-settings {
    transform: scale(0.9);
    transform-origin: top;

    div.col-md-9 {
      position: relative;
      left: -15px;
    }
  }

  &.row.for-management-tools-settings {
    margin-bottom: 16px !important;
    margin-top: -11px;
  }

  &.for-logging-info {
    margin-top: 35px;

    div.col-md-8 {
      position: relative;
      left: -15px;
    }

    div.logs-info {
      background: #353535;
      vertical-align: middle;
      padding: 6px 10px;
      border-radius: 7px;
      align-items: center;
      height: 40px;
      position: relative;
      overflow: hidden;

      &.folder {
        margin-right: 5px;
      }

      span {
        width: calc(100% - 25px);
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      button {
        background: rgb(67, 67, 67);
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 30px;
        border-radius: 0;

        ion-icon {
          position: absolute;
          color: #e3e3e3;
          opacity: 0.7;
          inset: 0;
          margin: auto;
          font-size: 125%;
        }
      }

      &.file {
        button ion-icon {
          font-size: 139%;
        }
      }
    }
  }
}

div#selectContainersManagementTool {
  margin-bottom: 25px;

  &.show-selected {
    div.management-tools-hint,
    ion-icon.management-tools-hint-icon {
      display: none !important;
    }

    div.tool.selected {
      box-shadow: inset 0 0 0 1px rgba(59, 113, 202, 0.80) !important;
    }

    div.tool:not(.selected) {
      filter: grayscale(1);
      opacity: 0.5;
    }
    pointer-events: none;
  }
}

div.btn-group.delete-applied-to {
  filter: grayscale(0.35);

  label {
    box-shadow: none !important;

    ion-icon.column-icon {
      transform-origin: center;
      transform: rotate(90deg);
    }
  }
}

button#countAffectedRows {
  l-hatch {
    position: relative;
    bottom: -1px;
    right: -4px;
    width: 0;
    opacity: 0;
    transition: width 0.2s ease-in-out, opacity 0.05s ease-in-out;
  }

  &.counting {
    l-hatch {
      width: 12px;
      opacity: 0.9;
      transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out 0.15s;
    }
  }
}

button#backToSelect {
  margin-right: 10px;

  ion-icon {
    transform: rotate(-90deg);
    font-size: 130%;
    margin-right: 0;
    margin-left: -11px;
  }
}

div.create-item {
  position: relative;
  inset: 0;
  margin: auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  margin-bottom: 70px;

  l-ripples {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateX(-60px);
  }

  div.background {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 180px;
    height: 180px;
    background: #b9b8b8;
    border-radius: 50%;

    ion-icon {
      position: absolute;
      inset: 0;
      margin: auto;
      font-size: 750%;
      color: #202023;
    }
  }
}

div.axonops-webview-actions {
  position: absolute;
  bottom: 40px;
  right: 0;
  left: 0;
  margin: auto;
  width: fit-content;
  background: #48484b;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  border-radius: 7px;
  overflow: hidden;

  div.webview-action {
    width: 50px;
    height: 39px;
    color: #e3e3e3;
    transition: opacity 0.15s ease-in-out;

    &:hover {
      opacity: 0.8;
    }

    ion-icon {
      font-size: 135%;
      opacity: 0.85;

      &[name="home"] {
        font-size: 140%;
        filter: invert(1) drop-shadow(0px 0px 0px white);
      }
    }
  }
}

li.nav-item.axonops-integration-tab {
  display: none;
}

div.general-hint.select-rows {
  width: 100%;
  margin: 5px 0 10px;
  font-family: 'Main', 'Minor', 'SimplifiedChinese', sans-serif !important;
  font-size: 100%;

  kbd {
    background: #717171;
  }
}

div.sub-output-content {
  div.select-page-rows-container {
    background: #101010;
    padding: 6px;
    margin-bottom: -3px;
    padding-bottom: 10px;
    padding-top: 8px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 0;
      right: 0;
      margin: auto;
      height: 1px;
    }
  }
}
/**
* Import right-to-left style
*/
@import 'collections/rtl';
