@smartface-blue: #3399CC;
@light-border-color: #cccccc;
@dark-background: #4b4b4b;
@dark-border-color: rgb(39, 41, 42);
@smartface-dark-blue: darken(@smartface-blue, 20%);
@smartface-light-blue: lighten(@smartface-blue, 20%);
@dark-theme-text-color: rgb(176, 177, 170);
@light-theme-text-color: rgb(143, 143, 143);
@light-theme-label-color: darken(@light-theme-text-color, 20%);
@dark-theme-label-color: darken(@dark-theme-text-color, 20%);
@color: lighten(@dark-background, 5%);
@dark-theme-card-bgcolor: lighten(@dark-background, 5%);
@light-theme-card-bgcolor: darken(#ffffff, 5%);

#marketplace {
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}

.marketplaceContainer,
.containContent {
  height: 100%;
}

.textLink {
  text-decoration: underline !important;
  font-size: 0.9em;
  font-weight: bold;
}

.marketplace {
  &-panel-button {}

  &-typeBadge {
    color: #fff;
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 0 0 .25rem .25rem;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    margin-right: 0.5em;
    &_accessType {
      &__is_public {
        color: #e8e8e8;
        background-color: #256fb5;
      }
      &__is_private {
        color: #e8e8e8;
        background-color: #fb5f10;
      }
    }
    &_packageType {
      background-color: #6c757d;
      margin-right: 1em;
    }
  }

  * {
    &:extend(.textColor);
    text-decoration: none;
  }
  a,
  a:visited,
  a:active {
    .textColor;
    opacity: 0.9;
    text-decoration: none;
  }

  a:hover {
    opacity: 1;
  }

  h3 {
    & when not (@preferences-flat) {
      color: @smartface-light-blue;
      ;
    }
    & when (@preferences-flat) {
      color: #256fb5;
    }
    margin: 0;
    max-width: 170px;
    text-overflow: ellipsis;
    max-height: 18px;
    overflow: hidden;
    white-space: nowrap;
  }

  h4 {
    margin-block-start: 1px;
    margin-block-end: 6px;
  }

  &-dashboard {
    overflow-y: hidden;
    width: 100%;
    height: 100%;


    &-list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      padding: 0.5em 0 0 1em;
      overflow-y: auto;
      .textColor;
      &-preloader {
        .textColor;
        width: 100%;
        height: 100%;
        align-self: center;
      }
    }
    label {
      font-weight: bold;
    }
    &-card {
      position: relative;
      flex-grow: 1;
      display: flex;
      word-wrap: break-word;
      flex-direction: row;
      align-items: stretch;
      background-clip: border-box;
      margin: 0.5em 1em 0.5em 0;
      border-radius: .25rem;
      height: 170px;
      width: 300px;
      overflow: hidden;
      & when not (@preferences-flat) {
        background-color: @dark-theme-card-bgcolor;
        border: 1px solid #3e3e3e;

      }
      & when (@preferences-flat) {
        border: 1px solid;
        .borderColor;
        background-color: #e9e9e9;
      }

      &-moreLink {
        .textLink;
      }

      &-body {
        flex-grow: 1;
        min-width: 120px;
        flex-wrap: wrap;
        font-size: 1em;
        display: flex;
        padding: 1em 1em 0.6em 0em;
        flex-basis: 120px;
        justify-content: space-between;
        flex-direction: column;
        &-author {
          font-size: 11px;
          color: #848484;
        }
        &-name {
          &:first-letter {
            text-transform: capitalize;
          }
        }
        &-download_info {
          position: relative;
          display: flex;
          flex-direction: row;
          align-items: center;
          i {
            margin-right: 5px;
          }
        }
        &-info {
          .textColor;
          display: flex;
          flex-direction: column;
          width: 100%; // width: ~'calc(100% - 90px - 0.5em)';
          justify-content: space-between;
          margin-top: 0.5em;
          flex-grow: 1;
          margin-bottom: 5px;

          >div:first-child {
            margin-top: 0.5em;
          }
          >a,
          div {
            margin-bottom: 0.5em;
          }
        }
        &-description {
          .textColor;
          width: 100%;
          max-height: 2.5em; // padding-top: 0.5em;
          // height: 16px;
          overflow: hidden;
          text-overflow: ellipsis; // white-space: nowrap;
        }
        &-footer {
          .textColor;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 22px;

          &-install {
            display: flex;
            align-items: center;

            &>span>div {
              display: flex;
              align-items: center;
            }
            &>span {
              text-decoration: none;
              display: inline-block;
              font-weight: bold;
              text-align: center;
              white-space: nowrap;
              vertical-align: middle;
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              border: 1px solid transparent;
              transition: all .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
              border-radius: .25rem;
              margin-left: 10px;
              i {
                .textColor;
                &:hover {
                  color: #65a700;
                  ;
                }
              }
            }
            &>.btn-primary {
              i:hover {
                color: #0686ff;
              }
            }
          }

          &-downloading {
            rect {
              & when (@preferences-flat) {
                fill: @light-theme-text-color;
              }
              & when not (@preferences-flat) {
                fill: @dark-theme-text-color;
              }

            }
          }
        }

        &-type {
          position: absolute;
          top: 0px;
          right: 0px;
          display: flex;
          i {
            .textColor;
          }
          span {
            margin-right: 10px;
            margin-left: 5px;
          }
        }
      }

      &-detailLink {
        .textLink;
        &:hover {
          color: #0686ff;
        }
      }

      &-appImg {
        width: 90px;
        height: ~"calc(100% - 2em)";
        object-fit: contain;
        margin: 1em;
        border-radius: 4px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAAH6Nf8rAAAABGdBTUEAALGPC/xhBQAAAGdJREFUGBmNjkESQBEMQ+Ofxf3vY7hLSf6k04UFC+V5TWHOOSJiNG5rLYAEQjoB6L3/mPQ7QCs7mj1iuafqVd7ZlEto0xaFDOTF6woz03m076YHOY+1DjW/dvux1pxdYf2H+XPis7gBf7RFQiVO09UAAAAASUVORK5CYII=);
      }

    }
    &-dropdown {
      &-outer {
        display: flex;
        align-items: center;
        margin: 5px;
        &>a {
          margin: 0px 6px;
        }
        .progress-rotating {
          animation: rotating 1.5s linear infinite;
          opacity: 1;
          color: @smartface-dark-blue
        }

      }
      &-inner {
        min-width: 40px;
        position: relative;
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #b0b1aa;
        border: 1px solid gray;
        margin: 5px 5px;

        &>div {
          width: 100%;
          cursor: default;
          &>input {
            text-align: left;
            cursor: text;
            margin-left: 10px;
            width: ~"calc( 100% - 10px)";
          }
          &>div {
            max-height: 300px;
            position: relative;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 10;
            color: #b0b1aa;
            & when (@preferences-flat) {
              background-color: @light-theme-card-bgcolor;
            }
            & when not (@preferences-flat) {
              background-color: @dark-theme-card-bgcolor;
            }
            border: 1px solid gray;
            border-top: none;
            text-align: left;
            cursor: default;
            .active {
              background: @smartface-dark-blue;
              color: #FFFFFF;
            }
            &>div {
              position: relative;
              padding-left: 10px;
              padding-right: 10px;
              cursor: default;
              text-overflow: ellipsis;
              line-height: 20px;
              white-space: pre;
              overflow: hidden;
            }
          }
        }
        &>i {
          position: absolute;
          color: gray;
          right: 6px;
          top: 3px;
        }
        input {
          height: 100%;
          font: inherit;
          background-color: transparent;
          border: none;
          outline: none;
          -webkit-appearance: none;
          text-align: center;
          color: inherit;
        }
      }
    }
  }

}



.spinnerColor {
  & when (@preferences-flat) {
    fill: @light-theme-text-color;
  }
  & when not (@preferences-flat) {
    fill: @dark-theme-text-color;
  }
}

.textColor {
  & when (@preferences-flat) {
    color: @light-theme-text-color;
  }
  & when not (@preferences-flat) {
    color: @dark-theme-text-color;
  }
}

.labelColor {
  & when (@preferences-flat) {
    color: @light-theme-label-color;
  }
  & when not (@preferences-flat) {
    color: @dark-theme-label-color;
  }
}

.borderColor {
  & when (@preferences-flat) {
    border-color: @light-border-color !important;
  }
  & when not (@preferences-flat) {
    border-color: @dark-border-color !important;
  }
}

.groundColor {
  & when not(@preferences-flat) {
    background-color: rgb(75, 75, 75) !important;
  }
  & when (@preferences-flat) {
    background-color: white !important;
  }
}

.transition {
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
  transition: all 0.3s;
}

.absoluteCentering {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.uiEditor_form {
  .groundColor;

  &_footer {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 15px 8px;
    & when not(@preferences-flat) {
      min-height: 120px;
    }
    & when (@preferences-flat) {
      min-height: 100px;
    }
    &_right {
      display: flex;
      width: 100px;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      overflow: hidden;
      align-self: stretch;
      &_button {
        bottom: 0;
        top: 0;
        margin: auto;
        position: absolute !important;
        width: 100%;
        & when not (@preferences-flat) {
          height: 24px !important;
        }
        & when (@preferences-flat) {
          height: 30px !important;
        }

        &_close {}
      }
      &_indicator {
        max-width: 40px;
        max-height: 40px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
        border: none !important;
        & when not (@preferences-flat) {
          bottom: 2px
        }
        & when (@preferences-flat) {
          bottom: 3px
        }
        overflow: hidden !important;
        rect {
          background-color: white;
          fill: white;
        }
      }
    }
    &_label {
      white-space: pre-line !important;
      margin: 0px 5px;
      overflow-y: auto !important;
      max-height: 90px;
      & when not(@preferences-flat) {
        max-height: 110px;
      }
      width: 100%;
      &::-webkit-scrollbar {
        width: 2px;
      }
    }
  }

  &_wrongInput {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    &>div {
      background-color: rgb(239, 125, 125) !important;
    }
    .btnclose {
      display: none !important;
    }
  }

  .tb_textboxDisabled,
  .taDisabled {
    .btnclose {
      display: none !important;
    }
  }

}

.uiEditor_wizard {
  & when not (@preferences-flat) {
    height: 415px;
  }
  & when (@preferences-flat) {
    height: 450px;
  }
  .basic {
    .groundColor;
    .dialog-buttons {
      display: none !important;
    }
  }
  .bk-container {
    & when (@preferences-flat) {
      .dialog-buttons {
        display: none !important;
      }
    }
  }
  .groundColor;

}

@-webkit-keyframes rotating
/* Safari and Chrome */

  {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}