fix*ZNTA-2620) user profile button styling

@import "../../styles/variables.less";
/* User profile */

#profile {
  .userProfile {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    /* Safari 7.0+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: flex-start;
    margin-left: auto;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    /* Safari 6.1+ */
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
    margin-right: auto;
    max-width: 20rem;
    width: 100%;
  }
  .userProfile-wrapper {
    margin-top: @spacing-rh;
  }
  h2.matrixHeading {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
  }
  .modal-content {
    max-width: 750px !important;
  }
  .dateRange-textField input.textInput {
    font-size: 0.986rem;
    text-align: center;
  }
  .dateRange-calendar {
    width: 100%;
  }
  .dateRange-container {
    width: 13rem;
  }
  .dateRange-container button {
    width: 100%;
  }
  #userProfile-matrix canvas {
    width: 100% !important;
    max-width: 100% !important;
  }
  #profile-username, #profileLanguages, #profileRoles {
    line-height: @line-height-large;
  }
  #profileLanguages {
    display: inline-flex;
  }
  .rdr-MonthAndYear-innerWrapper .button {
    padding: 0;
  }
  #profileLanguages a {
    display: block;
    padding-right: @spacing-rq;
  }
  #profileLanguages .iconLanguage {
    padding-right: @spacing-rq;
  }
  .dateRange-textField input.textInput {
    width: 12rem;
    font-size: 0.986rem;
  }
  .dateRange-calendar {
    width: 100%;
  }
  .userProfile .loaderText {
    width: 100%;
  }
  .userProfile-details {
    width: 100%;
    min-width: 21rem;
    max-width: 24rem;
    margin-bottom: @spacing-base-and-a-half;
  }
  img.userProfile-details-avatar {
    border-radius: @border-radius-img;
    margin-left: auto;
    float: right;
    overflow: hidden;
    width: 30%;
  }
  .userProfile .userProfile-details-text {
    margin-right: @spacing-rq;
    flex: 1;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -webkit-flex: 1;
  }
  .userProfile .username {
    font-size: 1.728rem;
    font-weight: 600;
  }
  ul.largeFontList {
    padding-left: 0;
    overflow: hidden;
  }
  span.userProfile-email {
    margin-left: @spacing-rh;
    color: @color-muted;
  }
  ul.largeFontList li.u-flexCenter svg {
    margin-right: @spacing-rq;
  }
  #userProfile-matrix tbody tr td:not(:first-child), #userProfile-matrix tr th:not(:first-child) {
    text-align: center;
  }
  #userProfile-overview {
    align-items: flex-start;
    -webkit-align-items: flex-start;
    /* Safari 7.0+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    /* Safari 6.1+ */
    width: 100%;
    margin-bottom: @spacing-base-and-a-half;
  }
  #profile-displayname {
    margin-bottom: @spacing-rh;
    margin-top: 0;
    padding-right: @spacing-rh;
    height: 100%;
  }
  #userProfile-matrix h2, #userProfile-matrix h3 {
    color: @color-dark;
    font-size: 1.2rem;
    margin-bottom: 0;
  }
  #userProfile-matrix h3 {
    margin-top: 1rem;
  }
  h2.userProfile-recentContributions {
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
  }
  .userProfile-activityGraph {
    background-clip: padding-box;
    border-width: @spacing-rh;
    border-color: transparent;
    border-style: solid;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: top;
    margin-bottom: @spacing-base-and-a-half;
    table-layout: fixed;
    width: 100%
  }
  .userProfile-activityGraph h3 {
    color: @color-dark;
  }
  .userProfile-activityGraph .matrixBox {
    position: relative !important;
  }
  .userProfile-activityGraph .cal-date {
    font-size: 0.833rem !important;
    padding-top: @spacing-rq;
    padding-bottom: @spacing-rq;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .userProfile-activityGraph .cal-info {
    background-color: rgba(255, 255, 255, 0.30);
    padding-top: @spacing-rq;
    padding-bottom: @spacing-rq;
    font-weight: 600;
  }
  .userProfile-activityTable-inner {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    margin-bottom: @spacing-rq;
  }
  #userProfile-activityTable td button {
    padding: 0 !important;
    height: initial;
    width: 95%;
    border: none !important;
  }
  #userProfile-activityTable td button.btn-primary {
    background-color: rgba(84, 102, 119, 0.65) !important;
  }
  #userProfile-activityTable td button.btn-warning {
    background-color: rgba(233, 221, 0, 0.65);
    color: @color-dark;
  }
  #userProfile-activityTable td button.btn-info {
    background-color: rgba(2, 154, 207, 0.65);
  }
  #userProfile-activityTable td button.btn-success {
    background-color: rgba(98, 200, 118, 0.65);
  }
  table.userProfile-activityGraph tr td {
    padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
  }
 .success.btn-default, .plain.btn-default, .primary.btn-default, .unsure.btn-default {
    border-radius: 1.071rem;
    margin-right: @spacing-half-base;
    border: solid 1px @gray;
    margin-bottom: @spacing-half-base;
  }
  .plain.btn-default:focus, .plain.btn-default:hover, .plain.btn-default.active {
    background-color: rgba(84, 102, 119, 0.95);
    color: #fff;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  .primary.btn-default:focus, .primary.btn-default:hover, .primary.btn-default.active {
    background-color: rgba(3, 166, 215, 0.95);
    color: #fff;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  .success.btn-default:focus, .success.btn-default:hover, .success.btn-default.active {
    background-color: rgba(98, 200, 118, 0.95);
    color: #fff;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  .unsure.btn-default:focus, .unsure.btn-default:hover, .unsure.btn-default.active {
    background-color: rgba(233, 221, 0, 1);
    color: @color-dark;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  #userProfile-activityTable td button.active.btn.btn-primary {
    background-color: @color-dark;
  }
  #userProfile-activityTable td button.active.btn.btn-warning {
    background-color: @color-unsure;
    color: @color-dark;
  }
  #userProfile-activityTable td button.active.btn.btn-info {
    background-color: @color-light;
  }
  #userProfile-activityTable td button.active.btn.btn-success {
    background-color: @color-success;
  }
  #userProfile-activityTable td button.btn-primary:focus, #userProfile-activityTable td button.btn-info:focus, #userProfile-activityTable td button.btn-warning:focus, #userProfile-activityTable td button.btn-success:focus {
    outline: 0;
    color: #fff;
    box-shadow: none;
  }
  #userProfile-activityTable td button.btn-warning:focus {
    background-color: rgba(233, 221, 0, 0.95);
    color: @color-dark;
  }
  #userProfile-activityTable td button.btn-primary:focus {
    background-color: rgba(84, 102, 119, 0.85);
  }
  #userProfile-activityTable td button.btn-info:focus {
    background-color: rgba(2, 154, 207, 0.85);
  }
  #userProfile-activityTable td button.btn-success:focus {
    background-color: rgba(98, 200, 118, 0.85);
  }
  #userProfile-activityTable .btn-clear {
    margin-top: @spacing-half-base;
    padding: 0;
    margin-left: @spacing-base;
  }
  #userProfile-activityTable th {
    text-align: center;
  }
  #userProfile-activityTable td .btn {
    width: 85%;
    border-radius: 0;
    line-height: 1.4rem;
    padding: 0 !important;
    border: none;
    margin: @spacing-rq;
  }
  .modal-content {
    max-width: inherit;
  } // @screen-xs variable depreciated
  @media (max-width: 29.375rem) {
    .matrix-table {
      display: block;
    }
    .matrixHeading {
      padding-bottom: @spacing-base;
    }
    #userProfile-matrix {
      padding-left: 0;
    }
  }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .matrix-table {
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-inner {
      width: 100%;
      margin-right: @spacing-base;
    }
    .matrixHeading {
      width: 100%;
    }
    #userProfile-matrix h2 {
      margin-top: 0;
    }
    h2.matrixHeading {
      max-width: 100%;
      min-width: 100%;
    }
  }
  @media (min-width: @screen-md-min) {
    .matrixHeading {
      margin-right: @spacing-rq;
      margin-left: @spacing-rq;
    }
    h2.matrixHeading {
      min-width: 0;
      margin-left: 3rem;
    }
  }
  @media (min-width: @screen-md-min) and (max-width: @screen-lg-min) {
    .userProfile-wrapper {
      flex-direction: column;
      -webkit-flex-direction: column;
    }
  }
  @media (min-width: 1200px) {
    .userProfile-wrapper {
      padding-right: 4rem;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-table {
      display: flex;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-inner {
      width: 50%;
      margin-right: @spacing-rq;
    }
  }
}
@media (min-width: @screen-md-min) {
  .wideView {
    margin-top: @spacing-rh;
  }
}

@import "../../styles/variables.less";
/* User profile */

#profile {
  .userProfile {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    /* Safari 7.0+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    flex-direction: column;
    -webkit-flex-direction: column;
    justify-content: flex-start;
    margin-left: auto;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    /* Safari 6.1+ */
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
    margin-right: auto;
    max-width: 20rem;
    width: 100%;
  }
  .userProfile-wrapper {
    margin-top: @spacing-rh;
  }
  h2.matrixHeading {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
  }
  .modal-content {
    max-width: 750px !important;
  }
  .dateRange-textField input.textInput {
    font-size: 0.986rem;
    text-align: center;
  }
  .dateRange-calendar {
    width: 100%;
  }
  .dateRange-container {
    width: 13rem;
  }
  .dateRange-container button {
    width: 100%;
  }
  #userProfile-matrix canvas {
    width: 100% !important;
    max-width: 100% !important;
  }
  #profile-username, #profileLanguages, #profileRoles {
    line-height: @line-height-large;
  }
  #profileLanguages {
    display: inline-flex;
  }
  .rdr-MonthAndYear-innerWrapper .button {
    padding: 0;
  }
  #profileLanguages a {
    display: block;
    padding-right: @spacing-rq;
  }
  #profileLanguages .iconLanguage {
    padding-right: @spacing-rq;
  }
  .dateRange-textField input.textInput {
    width: 12rem;
    font-size: 0.986rem;
  }
  .dateRange-calendar {
    width: 100%;
  }
  .userProfile .loaderText {
    width: 100%;
  }
  .userProfile-details {
    width: 100%;
    min-width: 21rem;
    max-width: 24rem;
    margin-bottom: @spacing-base-and-a-half;
  }
  img.userProfile-details-avatar {
    border-radius: @border-radius-img;
    margin-left: auto;
    float: right;
    overflow: hidden;
    width: 30%;
  }
  .userProfile .userProfile-details-text {
    margin-right: @spacing-rq;
    flex: 1;
    -webkit-box-flex: 1;
    -moz-flex: 1;
    -webkit-flex: 1;
  }
  .userProfile .username {
    font-size: 1.728rem;
    font-weight: 600;
  }
  ul.largeFontList {
    padding-left: 0;
    overflow: hidden;
  }
  span.userProfile-email {
    margin-left: @spacing-rh;
    color: @color-muted;
  }
  ul.largeFontList li.u-flexCenter svg {
    margin-right: @spacing-rq;
  }
  #userProfile-matrix tbody tr td:not(:first-child), #userProfile-matrix tr th:not(:first-child) {
    text-align: center;
  }
  #userProfile-overview {
    align-items: flex-start;
    -webkit-align-items: flex-start;
    /* Safari 7.0+ */
    align-content: flex-start;
    -webkit-align-content: flex-start;
    flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    /* Safari 6.1+ */
    width: 100%;
    margin-bottom: @spacing-base-and-a-half;
  }
  #profile-displayname {
    margin-bottom: @spacing-rh;
    margin-top: 0;
    padding-right: @spacing-rh;
    height: 100%;
  }
  #userProfile-matrix h2, #userProfile-matrix h3 {
    color: @color-dark;
    font-size: 1.2rem;
    margin-bottom: 0;
  }
  #userProfile-matrix h3 {
    margin-top: 1rem;
  }
  h2.userProfile-recentContributions {
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
  }
  .userProfile-activityGraph {
    background-clip: padding-box;
    border-width: @spacing-rh;
    border-color: transparent;
    border-style: solid;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    vertical-align: top;
    margin-bottom: @spacing-base-and-a-half;
    table-layout: fixed;
    width: 100%
  }
  .userProfile-activityGraph h3 {
    color: @color-dark;
  }
  .userProfile-activityGraph .matrixBox {
    position: relative !important;
  }
  .userProfile-activityGraph .cal-date {
    font-size: 0.833rem !important;
    padding-top: @spacing-rq;
    padding-bottom: @spacing-rq;
    background-color: rgba(255, 255, 255, 0.15);
  }
  .userProfile-activityGraph .cal-info {
    background-color: rgba(255, 255, 255, 0.30);
    padding-top: @spacing-rq;
    padding-bottom: @spacing-rq;
    font-weight: 600;
  }
  .userProfile-activityTable-inner {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    margin-bottom: @spacing-rq;
  }
  #userProfile-activityTable td button {
    padding: 0 !important;
    height: initial;
    width: 95%
    border: none !important;
  }
  #userProfile-activityTable td button.btn-primary {
    background-color: rgba(84, 102, 119, 0.65) !important;
  }
  #userProfile-activityTable td button.btn-warning {
    background-color: rgba(233, 221, 0, 0.65);
    color: @color-dark;
  }
  #userProfile-activityTable td button.btn-info {
    background-color: rgba(2, 154, 207, 0.65);
  }
  #userProfile-activityTable td button.btn-success {
    background-color: rgba(98, 200, 118, 0.65);
  }
  table.userProfile-activityGraph tr td {
    padding-bottom: 0.5rem;
    padding-left: 0;
    padding-right: 0;
  }
 .success.btn-default, .plain.btn-default, .primary.btn-default, .unsure.btn-default {
    border-radius: 1.071rem;
    margin-right: @spacing-half-base;
    border: solid 1px @gray;
    margin-bottom: @spacing-half-base;
  }
  .plain.btn-default:focus, .plain.btn-default:hover, .plain.btn-default.active {
    background-color: rgba(84, 102, 119, 0.95);
    color: #fff;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  .primary.btn-default:focus, .primary.btn-default:hover, .primary.btn-default.active {
    background-color: rgba(3, 166, 215, 0.95);
    color: #fff;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  .success.btn-default:focus, .success.btn-default:hover, .success.btn-default.active {
    background-color: rgba(98, 200, 118, 0.95);
    color: #fff;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  .unsure.btn-default:focus, .unsure.btn-default:hover, .unsure.btn-default.active {
    background-color: rgba(233, 221, 0, 1);
    color: @color-dark;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
  }
  #userProfile-activityTable td button.active.btn.btn-primary {
    background-color: @color-dark;
  }
  #userProfile-activityTable td button.active.btn.btn-warning {
    background-color: @color-unsure;
    color: @color-dark;
  }
  #userProfile-activityTable td button.active.btn.btn-info {
    background-color: @color-light;
  }
  #userProfile-activityTable td button.active.btn.btn-success {
    background-color: @color-success;
  }
  #userProfile-activityTable td button.btn-primary:focus, #userProfile-activityTable td button.btn-info:focus, #userProfile-activityTable td button.btn-warning:focus, #userProfile-activityTable td button.btn-success:focus {
    outline: 0;
    color: #fff;
    box-shadow: none;
  }
  #userProfile-activityTable td button.btn-warning:focus {
    background-color: rgba(233, 221, 0, 0.95);
    color: @color-dark;
  }
  #userProfile-activityTable td button.btn-primary:focus {
    background-color: rgba(84, 102, 119, 0.85);
  }
  #userProfile-activityTable td button.btn-info:focus {
    background-color: rgba(2, 154, 207, 0.85);
  }
  #userProfile-activityTable td button.btn-success:focus {
    background-color: rgba(98, 200, 118, 0.85);
  }
  #userProfile-activityTable .btn-clear {
    margin-top: @spacing-half-base;
    padding: 0;
    margin-left: @spacing-base;
  }
  #userProfile-activityTable th {
    text-align: center;
  }
  #userProfile-activityTable td .btn {
    width: 85%;
    border-radius: 0;
    line-height: 1.4rem;
    padding: 0 !important;
    border: none;
    margin: @spacing-rq;
  }
  .modal-content {
    max-width: inherit;
  } // @screen-xs variable depreciated
  @media (max-width: 29.375rem) {
    .matrix-table {
      display: block;
    }
    .matrixHeading {
      padding-bottom: @spacing-base;
    }
    #userProfile-matrix {
      padding-left: 0;
    }
  }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .matrix-table {
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-inner {
      width: 100%;
      margin-right: @spacing-base;
    }
    .matrixHeading {
      width: 100%;
    }
    #userProfile-matrix h2 {
      margin-top: 0;
    }
    h2.matrixHeading {
      max-width: 100%;
      min-width: 100%;
    }
  }
  @media (min-width: @screen-md-min) {
    .matrixHeading {
      margin-right: @spacing-rq;
      margin-left: @spacing-rq;
    }
    h2.matrixHeading {
      min-width: 0;
      margin-left: 3rem;
    }
  }
  @media (min-width: @screen-md-min) and (max-width: @screen-lg-min) {
    .userProfile-wrapper {
      flex-direction: column;
      -webkit-flex-direction: column;
    }
  }
  @media (min-width: 1200px) {
    .userProfile-wrapper {
      padding-right: 4rem;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-table {
      display: flex;
      flex-direction: row;
      -webkit-flex-direction: row;
    }
    .matrix-inner {
      width: 50%;
      margin-right: @spacing-rq;
    }
  }
}
@media (min-width: @screen-md-min) {
  .wideView {
    margin-top: @spacing-rh;
  }
}


Make tooltip more recognizable by adding thin shadow

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import 'ui-variables';

// https://github.com/atom/atom-dark-syntax/blob/master/stylesheets/syntax-variables.less
@import 'syntax-variables';

// https://github.com/styleguide/css/7.0
@import 'octicon-utf-codes';

.lint {
  .violation {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-width: 0;

    &.violation-info {
      border-bottom-color: @text-color-info;
    }

    &.violation-warning {
      border-bottom-color: @text-color-warning;
    }

    // .error is already defined in /Applications/Atom.app/Contents/Resources/app/static/utilities.less
    // and it adds unexpected CSS animation.
    &.violation-error {
      border-bottom-color: @text-color-error;
    }
  }

  .tooltip {
    font-family: @font-family;
  }

  .tooltip.bottom {
    margin-top: 1px;

    .tooltip-arrow {
      left: 0 !important;
      margin-left: 0 !important;
      border-left-width: 0 !important;
    }
  }

  .tooltip .tooltip-inner {
    white-space: pre;
    text-align: left;
    box-shadow: 0 0 3px 1px fadeout(@syntax-background-color, 10%);

    .attachment {
      margin-top: 5px;
    }

    .code-label {
      margin: 0;
    }

    pre {
      margin: 5px 0;
      padding: 4px 8px;
      font-size: 10px;
      background-color: transparent;
      border: 1px solid transparent;
    }
  }

  .tooltip.bottom .tooltip-inner {
    border-top-left-radius: 0 !important;
  }
}

.editor .gutter .line-number {
  &.lint-warning .icon-right {
    visibility: visible;

    &:before {
      content: @alert;
      color: @text-color-warning;
    }
  }

  &.lint-error .icon-right {
    visibility: visible;

    &:before {
      content: @alert;
      color: @text-color-error;
    }
  }
}

.status-bar .lint-status {
  .icon {
    margin-left: 4px;
  }

  .icon:before {
    @font-size: 12px;
    width: @font-size;
    height: @font-size;
    font-size: @font-size;
    top: 0;
  }

  .lint-clean:before {
    color: @text-color-success;
  }

  .lint-warning:before {
    color: @text-color-warning;
  }

  .lint-error:before {
    color: @text-color-error;
  }
}

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less
// for a full listing of what's available.
@import 'ui-variables';

// https://github.com/styleguide/css/7.0
@import 'octicon-utf-codes';

.lint {
  .violation {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-width: 0;

    &.violation-info {
      border-bottom-color: @text-color-info;
    }

    &.violation-warning {
      border-bottom-color: @text-color-warning;
    }

    // .error is already defined in /Applications/Atom.app/Contents/Resources/app/static/utilities.less
    // and it adds unexpected CSS animation.
    &.violation-error {
      border-bottom-color: @text-color-error;
    }
  }

  .tooltip {
    font-family: @font-family;
  }

  .tooltip.bottom {
    margin-top: 1px;

    .tooltip-arrow {
      left: 0 !important;
      margin-left: 0 !important;
      border-left-width: 0 !important;
    }
  }

  .tooltip .tooltip-inner {
    white-space: pre;
    text-align: left;

    .attachment {
      margin-top: 5px;
    }

    .code-label {
      margin: 0;
    }

    pre {
      margin: 5px 0;
      padding: 4px 8px;
      font-size: 10px;
      background-color: transparent;
      border: 1px solid transparent;
    }
  }

  .tooltip.bottom .tooltip-inner {
    border-top-left-radius: 0 !important;
  }
}

.editor .gutter .line-number {
  &.lint-warning .icon-right {
    visibility: visible;

    &:before {
      content: @alert;
      color: @text-color-warning;
    }
  }

  &.lint-error .icon-right {
    visibility: visible;

    &:before {
      content: @alert;
      color: @text-color-error;
    }
  }
}

.status-bar .lint-status {
  .icon {
    margin-left: 4px;
  }

  .icon:before {
    @font-size: 12px;
    width: @font-size;
    height: @font-size;
    font-size: @font-size;
    top: 0;
  }

  .lint-clean:before {
    color: @text-color-success;
  }

  .lint-warning:before {
    color: @text-color-warning;
  }

  .lint-error:before {
    color: @text-color-error;
  }
}


hide about dialog text on page load

hide about dialog text on page load

@import "normalize.min.less";
@import "variables.less";
@import "mixins.less";

/* ==========================================================================
    BASE ELEMENTS
   ========================================================================== */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 12px;
    background: #fff;
    font-family:'Open Sans', sans-serif;
}

::-moz-selection {
    background: @selectionColor;
    text-shadow: none;
}

::selection {
    background: @selectionColor;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.nopad { padding: 0px !important; }
.header-container, .main-container { min-width: 1024px; }
#entitiesList.filterListClosed, #entitiesList { width: 150px !important; }

#aboutdialog {
    padding: 1em;
    display: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.header-container {
    position: relative;
    width: 100%;
    #logo {
        position: relative;
        top:8px;
        left: 0px;
        width:57px;
        height: 59px;
        float: left;
        margin-left:15px;
        margin-bottom: 13px;
    }
    #globalsearch {
        position: relative;
        top:15px;
        float: left;
        margin-left: 15px;
        input {
            background: url("../img/searchBackground.png") 0 0 no-repeat;
            border:none;
            width: 411px;
            height: 44px;
            font-family:'Open Sans', sans-serif;
            padding:10px;
            font-size: 14px;
            color:@gris6;
            box-shadow: inset 0px 1px 5px #aaa;
            .rounded(4px);
        }
        .button {
            background: url("../img/icon_search.png") 0 0 no-repeat;
            width: 28px;
            height: 29px;
            position: absolute;
            top:8px;
            border: none;
            right: 5px;
        }
    }
    #globalMusic {
        position: relative;
        float:left;
        top:16px;
        margin-left: 15px;
        label {
            position: relative;
            font-size: 10px;
        }
        #gmSelected {
            position: absolute;
            top:16px;
            left: 0px;
            background: url("../img/smallArrow.png") 0 7px no-repeat;
            padding-left: 12px;
            cursor: pointer;
        }
        #gmDropDown {
            list-style: none;
            margin:0px;
            position: absolute;
            z-index: 1;
            .boxesCloth;
            display: none;
            li {
                list-style: none;
                display: block;
                white-space: nowrap;
                cursor: pointer;
            }
        }
    }
    #erclogo {
        float: right;
        position: relative;
        width: 300px;
        text-align: right;
        padding-right: 10px;
        margin-top: 5px;
        >div {
            font-size: 10px;
            margin-top: 15px;
            display: inline-block;
            padding-right: 10px;
        }
        span {
            display: block;
            text-align: right;
        }
        >img {
            height: 60px;
            vertical-align: middle;
            float: right;
        }
    }
    nav#mainmenu {
        float: right;
        margin-top:24px;
        margin-right: 10px;
        >a {
            float: left;
            margin: 0;
            margin-left: 5px;
            padding: 4px 7px 3px 7px;
            display: block;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            color: #221F1F;
            background: #eeeded;
            .rounded (4px);
            font-size: 12px;
            box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
        }
        #usermenu {
            float: left;
            display: block;
            position: relative;
            width:auto;
            height: auto;
            padding-right: 5px;
            >a {
                margin: 0;
                margin-left: 5px;
                padding: 4px 7px 3px 7px;
                display: block;
                text-align: center;
                text-decoration: none;
                font-size: 14px;
                .rounded (4px);
                font-size: 12px;
                box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
                background: #666;
                background-size: 177px 157px;
                color: #fff;
                cursor: pointer;
                img {
                    width: 20px;
                }
                &.loggedin {
                    background: url("../img/texturelogo.png") 21% 42% no-repeat;
                }
            }
        }
        #usermenuoptions {
            display: none;
            position: absolute;
            right: 9px;
            top: 30px;
            font-size: 14px;
            .rounded (4px);
            font-size: 12px;
            box-shadow: inset 0px 1px 5px #ddd, 2px 2px 4px #666;
            color: #221F1F;
            background: #eeeded;
            padding:15px;
            z-index:40;
            margin-top:5px;
            >img {
                width: 150px;
            }
            >a {
                color: #000;
                text-decoration: none;
                display: block;
                white-space: nowrap;
                &:hover {
                    text-decoration: underline;
                }
            }
            >h3 {
                b {
                    color:#600;
                }
                color: #000;
                display: block;
                white-space: nowrap;
            }
            #userArrow {
                position: absolute;
                width: 27px;
                height: 15px;
                background: url("../img/userArrow.png") 0 0 no-repeat;
                top: -9px;
                right: 8px;
            }
            &.open {
                margin-top:0px;
            }
        }
        li:first-child a {
               margin-left: 0;
           }
        li:last-child a {
            margin-right: 0;
        }
        ul li {
            display: inline;
        }
        .oldie nav a {
            margin: 0 0.7%;
        }
    }
}

#cookie-bar {
    display: none;
    position: fixed;
    height: 50px;
    z-index: 2;
    opacity: 0.95;
    background: black;
    background: rgb(46,46,46);
    width: 980px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    bottom: 0px;
    margin: 0;
    left: 50%;
    margin-left: -490px; /* Half of the width */

    p {
        font-size: 12px;
        font-style: italic;
        color: white;
        margin: 5px;
    }
    a {
        color: #AB4646;
    }
}

/* ==========================
 * Common to all pages
 * ======================== */
.miniitem {
    height: auto !important;
    left: 0px;
    position: relative;
    top: 0px;
    width:100% !important;
    background: none;
    margin-top: 5px;
    padding:6px;
    padding-right: 15px;
    padding-bottom:5px;
    clear: both;
    label {
        font-size: 12px;
        line-height: 14px;
        display: block;
        color: rgba(0,0,0,0.5);
        b {
            display: block;
            color: #000;
        }
    }
    .disco {
        float: left;
        margin-right: 8px;
        margin-bottom: 15px;
        img { width: 40px !important; }
        a {
            background: none;
        }
    }
}

/******************************
 * Small things inside badges or on page lists
 *****************************/

.miniitem.artist .colorCode { border-color: @artist_color !important; }
.miniitem.concert .colorCode { border-color: @concert_color !important; }
.miniitem.work .colorCode { border-color: @work_color !important; }
.miniitem.instrument .colorCode { border-color: @instrument_color !important; }
.miniitem.raaga .colorCode { border-color: @raaga_color !important; }
.miniitem.taala .colorCode { border-color: @taala_color !important; }
.miniitem.recording .colorCode { border-color: @recording_color !important; }
.miniitem.composer .colorCode { border-color: @composer_color !important; }

/* ==========================================================================
   LOGIN
   ========================================================================== */
#login {
    position: relative;
    margin:0 auto;
    width:500px;
    padding: 30px;
    padding-top:100px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    .rounded(10px);
    font-size: 12px;
    box-shadow: inset 0px 1px 8px #ddd, 2px 2px 10px #888;
    background: #fff url("../img/logoDunya.png") 50% 40px no-repeat;
    color: #333;
    margin-top: 100px;
    text-align: center;
    h1 {
        text-shadow: 1px 2px 2px black;
        color:#ddd;
    }
    label {
        text-align: right;
        width: 125px;
        position: relative;
        display: inline-block;
    }
    &.logCenter label {
        text-align: center;
    }
}

input[type="button"], input[type="submit"] {
    position: relative;
    text-align: center;
    .rounded(5px);
    font-size: 12px;
    box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
    background: #fff;
    color: #444;
    border: none;
    text-transform: uppercase;
    outline: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 6px;
}

input[type="button"]:hover, input[type="submit"]:hover {
    background: #444;
    color: #ddd;
}

input[type="text"], input[type="password"], input[type="email"] {
    position: relative;
    padding: 10px;
    .rounded(5px);
    font-size: 12px;
    border:none;
    box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
    background: #fff;
    color: #000;
    outline: 0;
}

/************
 * Top segment, used for browse interface and also navigation header on other pages
 ************/

#filterMask #filterArea #entitiesList ul li.artist .colorCode { border-color: @artist_color; }
#filterMask #filterArea #entitiesList ul li.concert .colorCode { border-color: @concert_color; }
#filterMask #filterArea #entitiesList ul li.work .colorCode { border-color: @work_color; }
#filterMask #filterArea #entitiesList ul li.instrument .colorCode { border-color: @instrument_color; }
#filterMask #filterArea #entitiesList ul li.raaga .colorCode { border-color: @raaga_color; }
#filterMask #filterArea #entitiesList ul li.taala .colorCode { border-color: @taala_color; }
#filterMask #filterArea #entitiesList ul li.recording .colorCode { border-color: @recording_color; }
#filterMask #filterArea #entitiesList ul li.composer .colorCode { border-color: @composer_color; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.invisible {
    visibility: hidden;
}
.clearer { clear: both; }
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

@import "normalize.min.less";
@import "variables.less";
@import "mixins.less";

/* ==========================================================================
    BASE ELEMENTS
   ========================================================================== */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 12px;
    background: #fff;
    font-family:'Open Sans', sans-serif;
}

::-moz-selection {
    background: @selectionColor;
    text-shadow: none;
}

::selection {
    background: @selectionColor;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.nopad { padding: 0px !important; }
.header-container, .main-container { min-width: 1024px; }
#entitiesList.filterListClosed, #entitiesList { width: 150px !important; }

#aboutdialog {
    padding: 1em;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.header-container {
    position: relative;
    width: 100%;
    #logo {
        position: relative;
        top:8px;
        left: 0px;
        width:57px;
        height: 59px;
        float: left;
        margin-left:15px;
        margin-bottom: 13px;
    }
    #globalsearch {
        position: relative;
        top:15px;
        float: left;
        margin-left: 15px;
        input {
            background: url("../img/searchBackground.png") 0 0 no-repeat;
            border:none;
            width: 411px;
            height: 44px;
            font-family:'Open Sans', sans-serif;
            padding:10px;
            font-size: 14px;
            color:@gris6;
            box-shadow: inset 0px 1px 5px #aaa;
            .rounded(4px);
        }
        .button {
            background: url("../img/icon_search.png") 0 0 no-repeat;
            width: 28px;
            height: 29px;
            position: absolute;
            top:8px;
            border: none;
            right: 5px;
        }
    }
    #globalMusic {
        position: relative;
        float:left;
        top:16px;
        margin-left: 15px;
        label {
            position: relative;
            font-size: 10px;
        }
        #gmSelected {
            position: absolute;
            top:16px;
            left: 0px;
            background: url("../img/smallArrow.png") 0 7px no-repeat;
            padding-left: 12px;
            cursor: pointer;
        }
        #gmDropDown {
            list-style: none;
            margin:0px;
            position: absolute;
            z-index: 1;
            .boxesCloth;
            display: none;
            li {
                list-style: none;
                display: block;
                white-space: nowrap;
                cursor: pointer;
            }
        }
    }
    #erclogo {
        float: right;
        position: relative;
        width: 300px;
        text-align: right;
        padding-right: 10px;
        margin-top: 5px;
        >div {
            font-size: 10px;
            margin-top: 15px;
            display: inline-block;
            padding-right: 10px;
        }
        span {
            display: block;
            text-align: right;
        }
        >img {
            height: 60px;
            vertical-align: middle;
            float: right;
        }
    }
    nav#mainmenu {
        float: right;
        margin-top:24px;
        margin-right: 10px;
        >a {
            float: left;
            margin: 0;
            margin-left: 5px;
            padding: 4px 7px 3px 7px;
            display: block;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            color: #221F1F;
            background: #eeeded;
            .rounded (4px);
            font-size: 12px;
            box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
        }
        #usermenu {
            float: left;
            display: block;
            position: relative;
            width:auto;
            height: auto;
            padding-right: 5px;
            >a {
                margin: 0;
                margin-left: 5px;
                padding: 4px 7px 3px 7px;
                display: block;
                text-align: center;
                text-decoration: none;
                font-size: 14px;
                .rounded (4px);
                font-size: 12px;
                box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
                background: #666;
                background-size: 177px 157px;
                color: #fff;
                cursor: pointer;
                img {
                    width: 20px;
                }
                &.loggedin {
                    background: url("../img/texturelogo.png") 21% 42% no-repeat;
                }
            }
        }
        #usermenuoptions {
            display: none;
            position: absolute;
            right: 9px;
            top: 30px;
            font-size: 14px;
            .rounded (4px);
            font-size: 12px;
            box-shadow: inset 0px 1px 5px #ddd, 2px 2px 4px #666;
            color: #221F1F;
            background: #eeeded;
            padding:15px;
            z-index:40;
            margin-top:5px;
            >img {
                width: 150px;
            }
            >a {
                color: #000;
                text-decoration: none;
                display: block;
                white-space: nowrap;
                &:hover {
                    text-decoration: underline;
                }
            }
            >h3 {
                b {
                    color:#600;
                }
                color: #000;
                display: block;
                white-space: nowrap;
            }
            #userArrow {
                position: absolute;
                width: 27px;
                height: 15px;
                background: url("../img/userArrow.png") 0 0 no-repeat;
                top: -9px;
                right: 8px;
            }
            &.open {
                margin-top:0px;
            }
        }
        li:first-child a {
               margin-left: 0;
           }
        li:last-child a {
            margin-right: 0;
        }
        ul li {
            display: inline;
        }
        .oldie nav a {
            margin: 0 0.7%;
        }
    }
}

#cookie-bar {
    display: none;
    position: fixed;
    height: 50px;
    z-index: 2;
    opacity: 0.95;
    background: black;
    background: rgb(46,46,46);
    width: 980px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    bottom: 0px;
    margin: 0;
    left: 50%;
    margin-left: -490px; /* Half of the width */

    p {
        font-size: 12px;
        font-style: italic;
        color: white;
        margin: 5px;
    }
    a {
        color: #AB4646;
    }
}

/* ==========================
 * Common to all pages
 * ======================== */
.miniitem {
    height: auto !important;
    left: 0px;
    position: relative;
    top: 0px;
    width:100% !important;
    background: none;
    margin-top: 5px;
    padding:6px;
    padding-right: 15px;
    padding-bottom:5px;
    clear: both;
    label {
        font-size: 12px;
        line-height: 14px;
        display: block;
        color: rgba(0,0,0,0.5);
        b {
            display: block;
            color: #000;
        }
    }
    .disco {
        float: left;
        margin-right: 8px;
        margin-bottom: 15px;
        img { width: 40px !important; }
        a {
            background: none;
        }
    }
}

/******************************
 * Small things inside badges or on page lists
 *****************************/

.miniitem.artist .colorCode { border-color: @artist_color !important; }
.miniitem.concert .colorCode { border-color: @concert_color !important; }
.miniitem.work .colorCode { border-color: @work_color !important; }
.miniitem.instrument .colorCode { border-color: @instrument_color !important; }
.miniitem.raaga .colorCode { border-color: @raaga_color !important; }
.miniitem.taala .colorCode { border-color: @taala_color !important; }
.miniitem.recording .colorCode { border-color: @recording_color !important; }
.miniitem.composer .colorCode { border-color: @composer_color !important; }

/* ==========================================================================
   LOGIN
   ========================================================================== */
#login {
    position: relative;
    margin:0 auto;
    width:500px;
    padding: 30px;
    padding-top:100px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    .rounded(10px);
    font-size: 12px;
    box-shadow: inset 0px 1px 8px #ddd, 2px 2px 10px #888;
    background: #fff url("../img/logoDunya.png") 50% 40px no-repeat;
    color: #333;
    margin-top: 100px;
    text-align: center;
    h1 {
        text-shadow: 1px 2px 2px black;
        color:#ddd;
    }
    label {
        text-align: right;
        width: 125px;
        position: relative;
        display: inline-block;
    }
    &.logCenter label {
        text-align: center;
    }
}

input[type="button"], input[type="submit"] {
    position: relative;
    text-align: center;
    .rounded(5px);
    font-size: 12px;
    box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
    background: #fff;
    color: #444;
    border: none;
    text-transform: uppercase;
    outline: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 6px;
}

input[type="button"]:hover, input[type="submit"]:hover {
    background: #444;
    color: #ddd;
}

input[type="text"], input[type="password"], input[type="email"] {
    position: relative;
    padding: 10px;
    .rounded(5px);
    font-size: 12px;
    border:none;
    box-shadow: inset 0px 1px 5px #ddd, 2px 2px 2px #888;
    background: #fff;
    color: #000;
    outline: 0;
}

/************
 * Top segment, used for browse interface and also navigation header on other pages
 ************/

#filterMask #filterArea #entitiesList ul li.artist .colorCode { border-color: @artist_color; }
#filterMask #filterArea #entitiesList ul li.concert .colorCode { border-color: @concert_color; }
#filterMask #filterArea #entitiesList ul li.work .colorCode { border-color: @work_color; }
#filterMask #filterArea #entitiesList ul li.instrument .colorCode { border-color: @instrument_color; }
#filterMask #filterArea #entitiesList ul li.raaga .colorCode { border-color: @raaga_color; }
#filterMask #filterArea #entitiesList ul li.taala .colorCode { border-color: @taala_color; }
#filterMask #filterArea #entitiesList ul li.recording .colorCode { border-color: @recording_color; }
#filterMask #filterArea #entitiesList ul li.composer .colorCode { border-color: @composer_color; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.invisible {
    visibility: hidden;
}
.clearer { clear: both; }
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


Only use remote fonts

Only use remote fonts

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 200;
    src: url("@{gb-font-path-raleway}/extralight.ttf") format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url("@{gb-font-path-raleway}/light.ttf") format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url("@{gb-font-path-raleway}/normal.ttf") format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url("@{gb-font-path-raleway}/semibold.ttf") format('truetype');
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 200;
    src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'), url("@{gb-font-path-raleway}/extralight.ttf") format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: local('Raleway Light'), local('Raleway-Light'), url("@{gb-font-path-raleway}/light.ttf") format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), url("@{gb-font-path-raleway}/normal.ttf") format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url("@{gb-font-path-raleway}/semibold.ttf") format('truetype');
}


Increase muted text contrast

Increase muted text contrast

// ---------------------------------
// CONFIG

@config-primary-color:             #536F90;
@config-secondary-color:           #536F90;
@config-dark-mode:                 false;
@config-colored-header:            false;

// ---------------------------------
// COLORS

@primary-hue:                      hue(@primary-color);
@primary-sat:                      saturation(@primary-color);

@secondary-hue:                    hue(@secondary-color);
@secondary-sat:                    saturation(@secondary-color);

// Derive the primary/secondary colors from the config variables. In dark mode,
// we make the user-set colors a bit darker, otherwise they will stand out too
// much.
.define-colors(@config-dark-mode);
.define-colors(false) {
  @primary-color:                  @config-primary-color;
  @secondary-color:                @config-secondary-color;

  @body-bg:                        #fff;
  @text-color:                     #111;
  @link-color:                     saturate(@primary-color, 10%);
  @heading-color:                  @text-color;
  @muted-color:                    hsl(@secondary-hue, min(20%, @secondary-sat), 50%);
  @muted-more-color:               #aaa;
  @shadow-color:                   rgba(0, 0, 0, 0.35);

  @control-bg:                     hsl(@secondary-hue, min(50%, @secondary-sat), 93%);
  @control-color:                  @muted-color;
  @control-danger-bg:              #fdd;
  @control-danger-color:           #d66;

  @overlay-bg:                     fade(@secondary-color, 90%);

  @code-bg:                        darken(@body-bg, 3%);
  @code-color:                     lighten(@text-color, 30%);
}
.define-colors(true) {
  @primary-color:                  @config-primary-color;
  @secondary-color:                @config-secondary-color;

  @body-bg:                        hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
  @text-color:                     #ddd;
  @link-color:                     saturate(@primary-color, 10%);
  @heading-color:                  @text-color;
  @muted-color:                    hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
  @muted-more-color:               hsl(@secondary-hue, min(10%, @secondary-sat), 40%);
  @shadow-color:                   rgba(0, 0, 0, 0.5);

  @control-bg:                     hsl(@secondary-hue, min(20%, @secondary-sat), 13%);
  @control-color:                  @muted-color;
  @control-danger-bg:              #411;
  @control-danger-color:           #a88;

  @overlay-bg:                     fade(darken(@body-bg, 5%), 90%);

  @code-bg:                        darken(@body-bg, 3%);
  @code-color:                     #fff;
}

@hero-bg:                          @control-bg;
@hero-color:                       @control-color;
@hero-muted-color:                 @control-color;

@alert-bg:                         #fff2ae;
@alert-color:                      #ad6c00;

@alert-error-bg:                   #d83e3e;
@alert-error-color:                #fff;

@alert-success-bg:                 #B4F1AF;
@alert-success-color:              #33722D;

.define-header(@config-colored-header);
.define-header(false) {
  @header-bg:                      @body-bg;
  @header-color:                   @primary-color;
  @header-control-bg:              @control-bg;
  @header-control-color:           @control-color;
}
.define-header(true) {
  @header-bg:                      @primary-color;
  @header-color:                   @body-bg;
  @header-control-bg:              mix(#000, @header-bg, 10%);
  @header-control-color:           mix(@body-bg, @header-bg, 60%);
}

// ---------------------------------
// LAYOUT

@drawer-width:                     270px;
@pane-width:                       400px;
@header-height:                    52px;
@header-height-phone:              46px;

@border-radius:                    4px;

@zindex-header:                    1000;
@zindex-pane:                      1010;
@zindex-composer:                  1020;
@zindex-dropdown:                  1030;
@zindex-modal-background:          1040;
@zindex-modal:                     1050;
@zindex-alerts:                    1060;
@zindex-tooltip:                   1070;

// ---------------------------------
// BREAKPOINTS

@screen-phone-max:                 (@screen-tablet - 1);

@screen-tablet:                    768px;
@screen-tablet-max:                (@screen-desktop - 1);

@screen-desktop:                   992px;
@screen-desktop-max:               (@screen-desktop-hd - 1);

@screen-desktop-hd:                1100px;

@phone:                            ~"(max-width: @{screen-phone-max})";
@tablet:                           ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
@desktop:                          ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
@desktop-hd:                       ~"(min-width: @{screen-desktop-hd})";

@tablet-up:                        ~"(min-width: @{screen-tablet})";
@desktop-up:                       ~"(min-width: @{screen-desktop})";

// ---------------------------------
// COMPONENTS

@tooltip-bg:                       rgba(0, 0, 0, 0.9);
@tooltip-color:                    #fff;

@online-user-circle-color:         #7FBA00;

// ---------------------------------
// CONFIG

@config-primary-color:             #536F90;
@config-secondary-color:           #536F90;
@config-dark-mode:                 false;
@config-colored-header:            false;

// ---------------------------------
// COLORS

@primary-hue:                      hue(@primary-color);
@primary-sat:                      saturation(@primary-color);

@secondary-hue:                    hue(@secondary-color);
@secondary-sat:                    saturation(@secondary-color);

// Derive the primary/secondary colors from the config variables. In dark mode,
// we make the user-set colors a bit darker, otherwise they will stand out too
// much.
.define-colors(@config-dark-mode);
.define-colors(false) {
  @primary-color:                  @config-primary-color;
  @secondary-color:                @config-secondary-color;

  @body-bg:                        #fff;
  @text-color:                     #111;
  @link-color:                     saturate(@primary-color, 10%);
  @heading-color:                  @text-color;
  @muted-color:                    hsl(@secondary-hue, min(25%, @secondary-sat), 55%);
  @muted-more-color:               #aaa;
  @shadow-color:                   rgba(0, 0, 0, 0.35);

  @control-bg:                     hsl(@secondary-hue, min(50%, @secondary-sat), 93%);
  @control-color:                  @muted-color;
  @control-danger-bg:              #fdd;
  @control-danger-color:           #d66;

  @overlay-bg:                     fade(@secondary-color, 90%);

  @code-bg:                        darken(@body-bg, 3%);
  @code-color:                     lighten(@text-color, 30%);
}
.define-colors(true) {
  @primary-color:                  @config-primary-color;
  @secondary-color:                @config-secondary-color;

  @body-bg:                        hsl(@secondary-hue, min(20%, @secondary-sat), 10%);
  @text-color:                     #ddd;
  @link-color:                     saturate(@primary-color, 10%);
  @heading-color:                  @text-color;
  @muted-color:                    hsl(@secondary-hue, min(15%, @secondary-sat), 50%);
  @muted-more-color:               hsl(@secondary-hue, min(10%, @secondary-sat), 40%);
  @shadow-color:                   rgba(0, 0, 0, 0.5);

  @control-bg:                     hsl(@secondary-hue, min(20%, @secondary-sat), 13%);
  @control-color:                  @muted-color;
  @control-danger-bg:              #411;
  @control-danger-color:           #a88;

  @overlay-bg:                     fade(darken(@body-bg, 5%), 90%);

  @code-bg:                        darken(@body-bg, 3%);
  @code-color:                     #fff;
}

@hero-bg:                          @control-bg;
@hero-color:                       @control-color;
@hero-muted-color:                 @control-color;

@alert-bg:                         #fff2ae;
@alert-color:                      #ad6c00;

@alert-error-bg:                   #d83e3e;
@alert-error-color:                #fff;

@alert-success-bg:                 #B4F1AF;
@alert-success-color:              #33722D;

.define-header(@config-colored-header);
.define-header(false) {
  @header-bg:                      @body-bg;
  @header-color:                   @primary-color;
  @header-control-bg:              @control-bg;
  @header-control-color:           @control-color;
}
.define-header(true) {
  @header-bg:                      @primary-color;
  @header-color:                   @body-bg;
  @header-control-bg:              mix(#000, @header-bg, 10%);
  @header-control-color:           mix(@body-bg, @header-bg, 60%);
}

// ---------------------------------
// LAYOUT

@drawer-width:                     270px;
@pane-width:                       400px;
@header-height:                    52px;
@header-height-phone:              46px;

@border-radius:                    4px;

@zindex-header:                    1000;
@zindex-pane:                      1010;
@zindex-composer:                  1020;
@zindex-dropdown:                  1030;
@zindex-modal-background:          1040;
@zindex-modal:                     1050;
@zindex-alerts:                    1060;
@zindex-tooltip:                   1070;

// ---------------------------------
// BREAKPOINTS

@screen-phone-max:                 (@screen-tablet - 1);

@screen-tablet:                    768px;
@screen-tablet-max:                (@screen-desktop - 1);

@screen-desktop:                   992px;
@screen-desktop-max:               (@screen-desktop-hd - 1);

@screen-desktop-hd:                1100px;

@phone:                            ~"(max-width: @{screen-phone-max})";
@tablet:                           ~"(min-width: @{screen-tablet}) and (max-width: @{screen-tablet-max})";
@desktop:                          ~"(min-width: @{screen-desktop}) and (max-width: @{screen-desktop-max})";
@desktop-hd:                       ~"(min-width: @{screen-desktop-hd})";

@tablet-up:                        ~"(min-width: @{screen-tablet})";
@desktop-up:                       ~"(min-width: @{screen-desktop})";

// ---------------------------------
// COMPONENTS

@tooltip-bg:                       rgba(0, 0, 0, 0.9);
@tooltip-color:                    #fff;

@online-user-circle-color:         #7FBA00;