.db-theme(@theme, @bg-color, @color, @color1, @color2, @color3) {

  .db-theme-@{theme} {

    .db-theme {
      background-color: @bg-color !important;
      color: @color !important;
    }

    &.db-theme-inverted, .db-theme-inverted {
      color: @bg-color !important;
      background-color: inherit;
    }

    .db-theme-form {
      input {
        border: none;
        color: @color;
        background-color: @color2;

        &:focus, &:active {
          color: @color;
        }

        /* do not group these rules */
        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
          color: @color;
          opacity: 0.65;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
          color: @color;
          opacity: 0.65;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
          color: @color;
          opacity: 0.65;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
          color: @color;
          opacity: 0.65;
        }
      }

      .input-group-addon {
        border: none;
        color: @color;
        background-color: @color1;
      }

      .input-group-addon:hover {
        border: none;
        color: @color;
        background-color: @color2;
      }
      .input-group-addon.clear {
        background-color: @color2;
      }
      .input-group-addon.clear:hover {
        background-color: @color2;
      }

      .input-group-addon.clear a {
        color: @color1!important;
      }
      .input-group-addon.clear a:hover {
        color: white!important;
      }

      .input-group-addon.inactive {
        color: @color2!important;
      }

      .total-count {
        border: 0 solid @bg-color;
        border-width: 0 1px;
      }
    }

    .my-navbar {
      border-radius: 0;
      border: none;
      background-color: @bg-color !important;
      color: @color !important;

      a.dropdown-toggle, a.navbar-brand {
        color: @color !important;
      }

      &.navbar-default .navbar-nav > .open > a {
        background-color: @color1;
      }
    }

    .theme-color {
      color: @color !important;
    }

    .btn.btn-inverted {
      &:hover, &:focus {
        background-color: @color1;
      }
    }

  }


  .db-theme-documents-@{theme} {
    .tree-view {
      .column-headers {
        td {
          color: @color1
        }
      }

      .cell.key .drm-index {
        color: @color1
      }
    }
  }

  .db-theme-shadow-box .db-theme-@{theme} > .db-theme-inverted,
  .db-theme-shadow-box .db-theme-@{theme}.db-theme-inverted {
    color: @bg-color !important;
  }
}

.db-theme(default, @main-color, lighten(@main-color, 55), lighten(@main-color, 15), lighten(@main-color, 30), lighten(@main-color, 5));

.db-theme(dark-blue, #2c3e50, lighten(#2c3e50, 67), lighten(#2c3e50, 15), lighten(#2c3e50, 30), lighten(#2c3e50, 5));
.db-theme(dark-teal, #27637a, #E0E7E0, #518f8e, #86a7a0, #2E748E);
.db-theme(blue, #2185D0, lighten(#2185D0, 55), lighten(#2185D0, 15), lighten(#2185D0, 30), lighten(#2185D0, 5));
.db-theme(light-blue, #5bc0de, lighten(#5bc0de, 50), darken(#5bc0de, 20), lighten(#5bc0de, 10), lighten(#5bc0de, 5));
.db-theme(green, #27ae60, lighten(#27ae60, 58), darken(#27ae60, 15), darken(#27ae60, 8), lighten(#27ae60, 5));
.db-theme(brown, #5F4130, lighten(#5F4130, 63), darken(#5F4130, 15), darken(#5F4130, 8), darken(#5F4130, 3));
.db-theme(orange, #d35400, lighten(#d35400, 55), darken(#d35400, 15), darken(#d35400, 8), darken(#d35400, 3));
.db-theme(red, #c0392b, lighten(#c0392b, 55), lighten(#c0392b, 10), lighten(#c0392b, 25), lighten(#c0392b, 3));
.db-theme(purple, #6435C9, lighten(#6435C9, 55), lighten(#6435C9, 15), lighten(#6435C9, 30), lighten(#6435C9, 4));




