html.dark {
  #buildApp {
    .logo {
      background: url("/images/build/CFEngine_build_logo_dark.svg") no-repeat;
    }

    .project-create {
      .top {
        h1 {
          color: @darkTextColor;
        }
      }
      form {
        .radio_group {
          span {
            color: @darkTextColor;
          }
        }
        a.generate-ssh
        {
          color: #62B1F8;
        }
        .delete-key {
          color: @Red300;
        }
        .private-key-area .or {
          color: rgba(255, 255, 255, 0.87);
        }
      }
    }

    .chosen-container {
      margin-bottom: 40px;
      a.chosen-single {
        border: 1px solid rgba(255, 255, 255, 0.38);
        background: transparent !important;
      }
      .chosen-drop {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: #32373E;
      }
      .chosen-results {
        li {
          color: @darkTextColor;
          &.highlighted {
            color: @darkTextColor  !important;
          }
          &.create-project {
            color: @darkBlue200 !important;
            border-bottom: 1px solid rgba(191, 191, 191, 0.3);
            i {
              color: @darkBlue200 !important;
            }
          }
        }
      }
    }

    .project-home {
      aside {
        border-color: rgba(255, 255, 255, 0.12);

        .empty-project {
          color: rgba(255, 255, 255, 0.6);
          background: #32373E;

          .btn {
            color: @darkTextColor;
          }
        }

      }
    }

    .added-modules {
      h4 {
        border-color: rgba(255, 255, 255, 0.12);
      }

      &_empty {
        color: @darkTextColor;
      }

      ul {
        li {
          border-color: rgba(255, 255, 255, 0.12);

          > i.bi-info-circle-fill {
            color: @Red300;
          }

          &.selected {
            background: @darkGray750;

            a {
              color: @darkBlue200;
            }
          }

          a {
            color: @darkBlue200;
          }
        }
      }
    }

    .build-modules {
      .search-bar {
        &:before {
          border-top: 1px solid rgba(255, 255, 255, 0.12);
        }
        a.btn, button.btn {
          &[disabled] {
            background: #3C4044;
            border-color: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.38) !important;
            i {
              color: rgba(255, 255, 255, 0.38);
            }
          }
        }
        .deploy-btn {
          background: @Orange800;
          &, i {
            color: @darkGray900 !important;
          }
          &[disabled="disabled"] {
            i {
              color: rgba(255, 255, 255, 0.38) !important;
            }
          }
        }

        .actionSelector {
          border: 1px solid rgba(255, 255, 255, 0.12);
          background: @darkGray750;
          > div {
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);

            button {
              color: rgba(255, 255, 255, 0.87);
              &[disabled="disabled"] {
                color: rgba(255, 255, 255, 0.38) !important;
              }
            }
            span {
              color: rgba(255, 255, 255, 0.87);
            }
            &.disabled {
              span {
                color: rgba(255, 255, 255, 0.38);
              }
            }
          }
        }
      }
      .search {
        border: 1px solid rgba(255, 255, 255, 0.38);

        input {
          color: @darkTextColor;

          &::placeholder {
            color: @darkTextColor;
          }
        }

        button {
          i {
            color: @darkTextColor;
          }
        }
      }

      .build-welcome {
        h1 {
          color: @darkTextColor;
        }

        &_illustration {
          background-image: url("/images/build/build_illustration_dark.svg");
        }

        &_subtitle {
          color: rgba(255, 255, 255, 0.6);
        }
      }

      .build-quickstart {
        &_card {
          background: #2B3137;

          &-top {
            border-color: rgba(255, 255, 255, 0.12);
          }

          &-body {
            color: rgba(255, 255, 255, 0.6);

            ol {

              li {

                a {
                  color: #62B1F8;
                }

                &::before {
                  color: @darkTextColor;
                  background: rgba(255, 255, 255, 0.12);
                }

                div {
                  color: @darkTextColor;
                }
              }
            }
          }
        }

        &_help {
          color: rgba(255, 255, 255, 0.38);
        }
      }

      .modules {
        &-title {
          border-color: rgba(255, 255, 255, 0.12);
        }

        &-item {
          &_title {
            color: #8FC7FA;
          }

          &_author, &_version {
            color: rgba(255, 255, 255, 0.6);
          }

          &_description {
            color: @darkTextColor;
          }

        }
      }
    }

    .build-modules-list {
      .modules {
        &-top {
          color: rgba(255, 255, 255, 0.6);
        }
        &-item {
          border-color: rgba(255, 255, 255, 0.38);
        }
      }
    }

    .paginator_SE {
      a.disabled {
        i {
          color: rgba(255, 255, 255, 0.38);
        }
      }
    }

    .build-module-page {
      h1.title {
        color: rgba(255, 255, 255, 0.87);

        &:before {
          background: url(/images/build/build_icon_big_dark.svg) no-repeat;
        }
      }

      &_top {
        border-color: rgba(255, 255, 255, 0.12);
      }

      .not-on-build {
        color: rgba(255, 255, 255, 0.6);
      }

      .details {
        > div {
          div {
            a.update {
              color: @Red300;
              border-color: @Red300;

              i {
                color: @Red300;
              }
            }
            a {
              border-color: @darkLinkColor;
            }
          }
        }
      }

      .description {
        ul {
          li {
            &::before {
              color: rgba(255, 255, 255, 0.87);
            }
          }
        }

        * {
          color: rgba(255, 255, 255, 0.87);
        }
        code{
          background-color: #44494F;
        }
      }

      .section {
        > a, a:before {
          color: rgba(255, 255, 255, 0.87);
        }

        > a {
          border-color: rgba(255, 255, 255, 0.12);
        }
      }
    }
    .build-input-form {
      input {
        border: 1px solid #646566;
      }
    }
    .input-buttons {
      border-color: rgba(255,255,255,0.12);
      .btn-primary {
        background-color: @CFE_light_blue;
        color: white !important;
      }
    }
    .add-item, .add-item i {
      color: @darkBlue200;
      background: none;
    }
  }
  .icon-build {
    background: url("/images/build/build_icon_dark.svg") no-repeat !important;
    filter: none;
  }
}

.update-module-dialog {
  .modal-body {
    div {
      span {
        a {
          color: #62B1F8 !important;
          *, i {
            color: #62B1F8 !important;
          }
        }
        input {
          border: 1px solid @Gray600;
          background: transparent;
        }
      }
    }
  }
}