.domraider .admin-menu {
  min-height: 50px;
}

.domraider .admin-menu > .md-button {
  text-transform: none;
}

.domraider .admin-menu > .md-button img.gravatar-img {
  display: inline-block;
  margin: 5px 10px 5px 0;
  vertical-align: middle;
  border-radius: 50%;
}

.domraider .admin-menu > .md-button .name {
  text-align: left;
}

.domraider .admin-menu > .md-button .name > div {
  height: 20px;
  line-height: 20px;
}

.domraider .admin-menu > .md-button .caret {
  margin: 0 0 0 8px;
  border-top: 4px solid #fff;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
}

.domraider .admin-menu-content > md-menu-item > .md-button {
  text-align: left;
}

.domraider .admin-menu-content > md-menu-item > a.md-button:not([disabled]) {
  font-size: 15px;
  color: #000;
}

.domraider dr-backoffice-header {
  display: block;
  height: 64px;
}

.domraider dr-backoffice-header .bo-header {
  position: fixed;
}

.domraider dr-backoffice-header .bo-header > .bo-header-toolbar > dr-logo {
  padding: 6px 10px;
  margin-right: 20px;
  background: #000;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}

.domraider dr-backoffice-header .bo-header > .bo-header-toolbar > dr-backoffice-menu {
  font-size: .8em;
}



.domraider .bo-order-detail-delete {
  width: 100%;
}

.domraider .bo-order-detail-delete .content {
  width: 100%;
}

.domraider .bo-order-detail-delete .content > .action-buttons {
  width: 100%;
  margin-top: 15px;
}

.domraider .bo-order-detail-delete .content > .description {
  text-align: left;
}

.domraider .bo-order-detail-infos {
  width: 100%;
}

.domraider .bo-order-detail-journal .md-subheader-inner {
  padding: 0;
}

.domraider .bo-order-detail-metrics {
  width: 100%;
}

.domraider .bo-order-detail-metrics a {
  font-size: 1.1em;
  text-decoration: none;
}

.domraider .bo-order-detail-metrics > .rank-details {
  width: 100%;
  padding: 10px 15px;
  color: #fff;
  background: #666;
}

.domraider .bo-order-detail-metrics > .rank-details ol,
.domraider .bo-order-detail-metrics > .rank-details ul {
  padding-left: 28px;
  margin: 0;
}

.domraider .bo-order-detail-metrics > .rank-details ol {
  font-size: 0.8em;
}

.domraider .bo-order-detail-metrics > .subs {
  width: 100%;
  margin-top: 10px;
}

.domraider .bo-order-detail {
  width: 800px;
}

.domraider .bo-order-detail > md-toolbar h1 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 600;
}

.domraider .bo-order-detail > md-dialog-content > md-tabs md-content {
  padding: 20px 30px 20px 30px;
}

.domraider .bo-order-detail > md-dialog-content > md-tabs md-content.whois > .md-button {
  position: absolute;
  top: 30px;
  right: 20px;
}

.domraider .bo-order-detail > md-dialog-content > md-tabs md-content.whois > .whois-raw {
  padding: 10px 15px;
  color: #fff;
  background: #666;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .bo-order-detail-recover {
  width: 100%;
}

.domraider .bo-order-detail-recover .recover-warn-message {
  font-weight: 800;
  color: #e65100;
}

.domraider .bo-order-detail-recover .recover-success-message {
  font-weight: 800;
  color: #558b2f;
}

.domraider .bo-order-detail-recover .recover-action {
  margin-top: 20px;
}

.domraider .auction-content > form > .auction-inputs {
  width: 100%;
  margin: 1em 0;
}

.domraider .auction-content > form > .auction-inputs > md-datepicker {
  margin-left: -3px;
}

.domraider .auction-content > form > .auction-inputs > md-datepicker > .md-datepicker-button {
  width: 24px;
  padding-right: 0;
  padding-left: 0;
  margin: 0;
}

.domraider .auction-content > form > .auction-inputs > md-datepicker > .md-datepicker-input-container {
  margin-left: 8px;
}

.domraider .none-content > form > .auction-inputs > md-checkbox {
  margin-top: 16px;
}

.domraider .none-content > form > .auction-inputs > md-datepicker {
  margin-left: -3px;
}

.domraider .none-content > form > .auction-inputs > md-datepicker > .md-datepicker-button {
  width: 24px;
  padding-right: 0;
  padding-left: 0;
  margin: 0;
}

.domraider .none-content > form > .auction-inputs > md-datepicker > .md-datepicker-input-container {
  margin-left: 8px;
}

.domraider .none-content > form > .button-form {
  margin-top: 15px;
}

.domraider .bo-order-detail-sale {
  width: 100%;
}

.domraider .bo-order-detail-sale .content > .action-buttons {
  width: 100%;
  margin-top: 15px;
}

.domraider .bo-order-detail-sale .content > .description {
  text-align: left;
}

.domraider .bo-order-detail-sale .content > form {
  width: 100%;
}

.domraider .sesame-container {
  margin-bottom: 10px;
}

.domraider .sesame-container > .sesame-btn.hidden {
  color: #000 !important;
  background-color: #cecece !important;
}

.domraider .sesame-container > md-input-container {
  margin: 0;
}

.domraider .sesame-container > md-input-container .md-errors-spacer {
  display: none;
}

.domraider .bo-user-detail-infos {
  width: 100%;
}

.domraider .bo-user-detail-infos .address {
  width: 80%;
  padding: 10px 15px;
  margin: 3px 0;
  color: #fff;
  background: #666;
}

.domraider .bo-user-detail-journal .md-subheader-inner {
  padding: 0;
}

.domraider .bo-user-detail {
  width: 80%;
}

.domraider .bo-user-detail > md-toolbar h1 {
  height: 50px;
  margin: 0;
  overflow: hidden;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 50px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domraider .bo-user-detail > md-dialog-content > md-tabs md-content {
  padding: 20px 30px 20px 30px;
}

.domraider .bo-user-detail-wallet {
  width: 100%;
}

.domraider .bo-user-detail-wallet > hr {
  width: 100%;
}

.domraider .bo-user-detail-wallet > h2 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
}

.domraider .bo-user-detail-wallet > #transaction {
  width: 100%;
}

.domraider .bo-user-detail-wallet > #transaction md-input-container {
  height: 34px;
  margin: 12px 0;
}

.domraider .bo-user-detail-wallet > #transaction md-input-container.transaction-note {
  width: 70%;
}

.domraider .bo-login-page {
  padding: 80px;
}

.domraider .bo-login-page > dr-logo {
  margin-bottom: 50px;
}

.domraider .bo-login-page > .bo-login-from {
  width: 300px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .orders-page > h1 {
  margin-bottom: 0;
}

.domraider .orders-page > h2 {
  margin-top: 7px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
}

.domraider .orders-page > .search-field {
  margin-bottom: 15px;
}

.domraider .orders-page md-table-container > table > tbody > tr > .status {
  color: #bdc3c7;
}

.domraider .orders-page md-table-container > table > tbody > tr > .status.finished {
  color: #bdc3c7;
}

.domraider .orders-page md-table-container > table > tbody > tr > .status.available {
  color: #8bc34a;
}

.domraider .orders-page md-table-container > table > tbody > tr > .status.pending-auction {
  color: #e65100;
}

.domraider .orders-page md-table-container > table > tbody > tr > .status.waiting,
.domraider .orders-page md-table-container > table > tbody > tr > .status.pending-snap {
  color: #2980b9;
}

.domraider .orders-page md-table-container > table > tbody > tr .loading {
  padding-top: 20px;
  padding-bottom: 5px;
}



/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .stats-detection iframe {
  width: 1100px;
  height: 800px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .stats-snap .md-select-value .md-container {
  display: inline;
}

.domraider .stats-snap .md-select-value .md-container div {
  display: inline;
}

.domraider .stats-snap > .main-table {
  width: 100%;
}

.domraider .stats-snap > .main-table table.md-table th.md-column {
  color: #fff;
  text-transform: uppercase;
}

.domraider .stats-snap > .main-table table.md-table thead tr {
  height: 28px;
  background-color: #2980b9;
}

.domraider .stats-snap > .main-table table.md-table thead tr th {
  font-size: 0.9em;
}

.domraider .stats-snap > .main-table table.md-table tbody tr.gray {
  background-color: #f6f6f4;
}

.domraider .stats-snap > .main-table table.md-table tbody tr.subheader {
  height: 28px;
  background-color: #3498db;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td {
  border: 0;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.status.status-success {
  color: #fff;
  background-color: #95c11e;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.status.status-failed {
  color: #fff;
  background-color: #ff3939;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.status.status-waiting {
  color: #fff;
  background-color: #2980b9;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.status.status-pending-snap {
  color: #fff;
  background-color: #2980b9;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.status.status-renewed {
  color: #fff;
  background-color: #979797;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.attribution.attribution-direct-sale {
  color: #fff;
  background-color: #f39c12;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.attribution.attribution-auction {
  color: #fff;
  background-color: #f39c12;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.attribution.attribution-direct {
  color: #fff;
  background-color: #516910;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.amount {
  padding-right: 0;
  text-align: right;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.amount.amount-direct {
  color: #fff;
  background-color: #516910;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.x-small {
  width: 7%;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td.small {
  width: 12%;
}

.domraider .stats-snap > .main-table table.md-table tbody tr td div {
  padding: 0 5px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .translate md-content h3 {
  margin-bottom: 40px;
}

.domraider .translate > .translate-table > table {
  width: 100%;
  margin-top: 30px;
}

.domraider .translate > .translate-table > table tr:hover,
.domraider .translate > .translate-table > table tr.active {
  color: white;
  cursor: hand;
  background-color: #8bc34a;
}

.domraider .translate > .translate-table > table td {
  padding: 4px;
}

.domraider .translate > .translate-table > table td > .badge {
  display: block;
  padding: 4px;
  margin: 3px;
  font-weight: bold;
  color: white;
  text-align: center;
  border-radius: 5px;
}

.domraider .translate > .translate-table > table td > .badge.green {
  background-color: #8bc34a;
}

.domraider .translate > .translate-table > table td > .badge.red {
  background-color: #e65100;
}

.domraider .translate > md-sidenav.translate-content,
.domraider .translate > md-sidenav.translate-content.md-locked-open,
.domraider .translate > md-sidenav.translate-content.md-closed.md-locked-open-add-active {
  width: 85vw !important;
  max-width: 400px !important;
  min-width: 200px !important;
}

.domraider .translate > md-sidenav.translate-content > md-content,
.domraider .translate > md-sidenav.translate-content.md-locked-open > md-content,
.domraider .translate > md-sidenav.translate-content.md-closed.md-locked-open-add-active > md-content {
  padding: 5px 20px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .users-page .titles > h1 {
  margin-bottom: 0;
}

.domraider .users-page .titles > h2 {
  margin-top: 7px;
  margin-bottom: 30px;
  font-size: 18px;
  font-weight: 200;
}

.domraider .users-page > dr-backoffice-sesame {
  display: block;
  margin-bottom: 20px;
}

.domraider .users-page > md-table-container > table > tbody > tr > td.limits > form {
  width: 55px;
}

.domraider .users-page > md-table-container > table > tbody > tr > td.limits > form md-input-container {
  height: 17px;
  margin: 0;
}

.domraider .users-page > md-table-container > table > tbody > tr > td.limits > form md-input-container input {
  height: 17px;
  line-height: 17px;
}

.domraider .users-page > md-table-container > table > tbody > tr > td > .red {
  font-weight: 900;
  color: #e65100;
}

.domraider .users-page > md-table-container > table > tbody > tr > td .loading {
  padding-top: 20px;
  padding-bottom: 20px;
}

.domraider .users-page > md-table-container > table > tbody > tr > td .refresh {
  outline: none;
}

.domraider .users-page > md-table-container > table > tbody > tr > td .refresh:hover {
  cursor: pointer;
}

.domraider .users-page > md-table-container > table > tbody > tr > td .bubble {
  padding: 2px 10px;
  color: white;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

.domraider .users-page > md-table-container > table > tbody > tr > td .bubble.red {
  background-color: red;
}

.domraider .users-page > md-table-container > table > tbody > tr > td .bubble.green {
  background-color: green;
}

/*doc
---
title: "Colored progress linear"
name: utility-colored-progress-linear
category: "Utilities"
---

- Directive : `dr-colored-progress-linear`
- Attributes :
  - `mode` (string)
  - `color` (string)

```html_example
<dr-colored-progress-linear mode="indeterminate" color="blue"></dr-colored-progress-linear>
```

```html_example
<dr-colored-progress-linear mode="indeterminate" color="red" current="'Immobilier'"></dr-colored-progress-linear>
```
*/

.domraider dr-colored-progress-linear {
  display: block;
  width: 100%;
}

/*doc
---
title: "Linear gauge"
name: utility-gauge
category: "Utilities"
---

- Directive : `dr-gauge`
- Attributes :
  - `percentage`
  - `stripable` (booléen achurable ou non)

```html_example
<div style="background: #333">
  <dr-gauge percentage="49"></dr-gauge>
</div>
```

```html_example
<div style="background: #333">
  <dr-gauge percentage="0" stripable="true"></dr-gauge>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

dr-gauge {
  position: relative;
  display: block;
  width: 100%;
  height: 9px;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

dr-gauge .md-container {
  position: relative;
  display: block;
  width: 100%;
  height: 9px;
  overflow: hidden;
  transform: translate(0, 0) scale(1, 1);
}

dr-gauge .md-container .md-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9px;
}

dr-gauge .md-container .md-bar.sale-domain,
dr-gauge .md-container .md-bar.backorder-domain {
  background: #eb5e57 !important;
}

dr-gauge .md-container .md-bar-striped {
  width: 100%;
  background: repeating-linear-gradient(-45deg, #ffffff, #ffffff 5px, transparent 5px, transparent 10px) !important;
}

dr-gauge .md-container .md-dashed:before {
  position: absolute;
  display: none;
  width: 100%;
  height: 9px;
  margin-top: 0;
  background-color: transparent;
  background-position: 0 -23px;
  background-size: 10px 10px !important;
  content: "";
}

/*doc
---
title: "Language"
name: user-language
category: "User"
---

- Directive : `dr-user-language`
- Attributes :
 - `user` (un utilisateur)

```html_example
<div style="background: rgb(36, 46, 71)">
  <dr-user-language user="{
          lang: 'fr'
      }">
  </dr-user-language>
</div>
```

```html_example
<div style="background: rgb(36, 46, 71)">
  <dr-user-language user="{
          lang: 'en'
      }">
  </dr-user-language>
</div>
```

```html_example
<div style="background: rgb(36, 46, 71)">
  <dr-user-language user="">
  </dr-user-language>
</div>
```
*/

.domraider #user-language {
  z-index: 2;
}

.domraider #user-language .lang-menu {
  font-size: 16px !important;
}

.domraider #user-language .caret {
  margin: 0 0 0 8px;
  border-top: 4px solid #fff;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
}

.domraider #user-language-menu {
  min-width: 60px;
}

.domraider #user-language-menu md-menu-item {
  height: 30px;
  min-height: 30px;
}

.domraider #user-language-menu md-menu-item > * {
  margin-top: 5px;
  margin-bottom: 5px;
}

.domraider #user-language-menu md-menu-item > *.flag-holder {
  height: 20px;
  padding-right: 12px;
  padding-left: 12px;
  line-height: 17px;
  cursor: pointer;
}

.domraider #user-language-menu md-menu-item > *.flag-holder > .flag {
  padding: 0;
  font-size: 16px;
}

/*doc
---
title: "Loading button"
name: loading-button
category: "Utilities"
---

- Directive : `dr-loading-button`

```html_example
<md-button class="md-primary md-raised md-cornered" ng-click="console.log('yolo')"
           aria-label="Alert yolo" dr-loading-button>
    Yolo disabled
</md-button>
```

```html_example
<md-button class="md-primary md-raised md-cornered" ng-click="console.log('yolo')"
           aria-label="Alert yolo" dr-loading-button dr-loading-button-options="{disableBtn: false}">
    Yolo
</md-button>
```

*/

/*doc
---
title: "Logo"
name: utility-logo
category: "Utilities"
---

- Directive : `dr-logo`
- Attributes :
  - `not-clickable` (boolean, clickable or not)
  - `url` (string, url to redirect to, default /)
  - `type` (string, use small or simple logo)

```html_example
<div style="background: #333">
  <dr-logo></dr-logo>
</div>
```

```html_example
<div style="background: #333">
  <dr-logo not-clickable="true"></dr-logo>
</div>
```

```html_example
<div style="background: #333">
  <dr-logo type="small" url="#"></dr-logo>
</div>
```

```html_example
<div style="background: #333">
  <dr-logo type="simple" url="#"></dr-logo>
</div>
```
*/

.domraider .logo {
  width: auto;
  height: 100%;
}

.domraider .logo img {
  width: auto;
  height: 100%;
}

.domraider .logo.small img {
  width: 160px;
  height: auto;
}

.domraider .logo.simple img {
  width: 180px;
  height: auto;
}

/*doc
---
title: "Crosslinking"
name: ad-crosslinking
category: "Ad"
---

- Directive : `dr-ad-crosslinking`
- Attributes :
  - `category` (category object)

```html_example
<dr-ad-crosslinking categories="{
                                state:
                                  {
                                    name: 'full.all.category',
                                    params: 'param'
                                  },
                                  translate_key_autocomplete_title: 'TITLE',
                                  translate_key_autocomplete_subtitle: 'subtitle'
                              },
                                state:
                                  {
                                    name: 'full.sales.category',
                                    params: 'param'
                                  },
                                  translate_key_autocomplete_title: 'TITLE 2',
                                  translate_key_autocomplete_subtitle: 'subtitle 2'
                              }">
</dr-ad-crosslinking>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .ad-crosslinkings {
  height: 100%;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking {
  width: 100%;
  height: 47%;
  min-width: 225px;
  min-height: 45px;
  padding: 5px 20px 5px 10px;
  margin: 0;
  color: #f5f5f5;
  text-align: left;
  text-transform: none;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking > .crosslinking-body {
  height: 100%;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking > .crosslinking-body > md-icon {
  margin: 0 10px 0 3px;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking > .crosslinking-body .crosslinking-icon {
  width: 20%;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking > .crosslinking-body .crosslinking-text {
  width: 80%;
  white-space: normal;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking > .crosslinking-body .crosslinking-text .ad-crosslinking-tile-title {
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domraider .ad-crosslinkings .md-button.md-raised.ad-crosslinking > .crosslinking-body .crosslinking-text .ad-crosslinking-tile-subtitle {
  width: 100%;
  font-size: 14px;
  font-weight: 100;
  line-height: 1em;
  white-space: normal;
}

/*doc
---
title: "Download"
name: ad-download
category: "Ad"
---

- Directive : `dr-ad-download`
- Attributes :
  - `download` (object with url, name and translate_key_title)

```html_example
<dr-ad-download download="{url: '#', name: 'Yolo download', translate_key_title: 'yolo.download'}"></dr-ad-download>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.ad-download {
  width: 100%;
  height: 100%;
  min-width: 225px;
  min-height: 45px;
  margin: 0;
  text-transform: none;
}

.domraider .md-button.ad-download > .download-body {
  height: 100%;
}

.domraider .md-button.ad-download > .download-body > .label-container {
  height: 100%;
  padding: .8em .8em;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.3em;
}

.domraider .md-button.ad-download > .download-body > .label-container > div {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: normal;
}

.domraider .md-button.ad-download > .download-body > .icon-container {
  height: 100%;
  padding: 1em;
}

/*doc
---
title: "Breadcrumb"
name: utility-breadcrumb
category: "Utilities"
---

- Directive : `dr-breadcrumb`
- Attributes :
  - `steps` (array)
  - `current` (string, the current step)
  - `name` (string)

```html_example
<dr-breadcrumb milestones="['design', 'content', 'yolo']" current="'design'"></dr-breadcrumb>
```

```html_example
<dr-breadcrumb milestones="['design', 'content', 'yolo']" current="'content'"></dr-breadcrumb>
```

```html_example
<dr-breadcrumb milestones="['design', 'content', 'yolo']" current="'yolo'"></dr-breadcrumb>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .breadcrumb {
  overflow: auto;
}

.domraider .breadcrumb > .step {
  position: relative;
  margin-right: 1px;
  margin-left: 1px;
}

.domraider .breadcrumb > .step > .md-button {
  min-height: 20px;
  padding-right: 14px;
  padding-left: 24px;
  margin: 0;
  font-weight: 300;
  line-height: 22px;
  color: #2e2447;
  text-transform: none;
  background: #f5f5f5;
  border-radius: 0;
  box-shadow: none;
}

.domraider .breadcrumb > .step > .md-button > .md-ripple-container {
  border-radius: 0;
}

.domraider .breadcrumb > .step > .md-button:hover {
  color: #e63229;
  background: #f5f5f5;
}

.domraider .breadcrumb > .step:first-child {
  margin-left: 0;
}

.domraider .breadcrumb > .step:first-child .md-button {
  padding-left: 8px;
  border-radius: 3px 0 0 3px;
}

.domraider .breadcrumb > .step:first-child .md-button > .md-ripple-container {
  border-radius: 3px 0 0 3px;
}

.domraider .breadcrumb > .step:first-child:before {
  display: none;
}

.domraider .breadcrumb > .step:last-child {
  margin-right: 0;
}

.domraider .breadcrumb > .step:last-child:after {
  display: none;
}

.domraider .breadcrumb > .step.current .md-button {
  color: #eb5e57;
}

.domraider .breadcrumb > .step:before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 0;
  height: 0;
  margin-top: -10px;
  pointer-events: none;
  border: solid transparent;
  border-left-color: #9b9b9b;
  border-width: 10px;
  content: " ";
}

.domraider .breadcrumb > .step:after {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 2;
  width: 0;
  height: 0;
  margin-top: -10px;
  pointer-events: none;
  border: solid transparent;
  border-left-color: #f5f5f5;
  border-width: 10px;
  content: " ";
}

/*doc
---
title: "Categories"
name: search-categories
category: "Search"
---

- Directive : `dr-categories`
- Attributes :
  - `categories` (array of categories)
  - `section` (string)
  - `current` (string)

```html_example
<dr-categories categories="[{name:'Sport', translate_key_btn:'content'}, {name:'Cuisine', translate_key_btn:'content'}, {name:'Immobilier', translate_key_btn:'content'}]" current="'Sport'"></dr-categories>
```

```html_example
<dr-categories categories="[{name:'Sport', translate_key_btn:'content'}, {name:'Cuisine', translate_key_btn:'content'}, {name:'Immobilier', translate_key_btn:'content'}]" current="'Immobilier'"></dr-categories>
```

```html_example

<dr-categories categories="[{name:'Sport', translate_key_btn:'content'}, {name:'Cuisine', translate_key_btn:'content'}, {name:'Immobilier', translate_key_btn:'content'}]" current="'Cuisine'"></dr-categories>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .categories {
  height: 50px;
  overflow: hidden;
}

.domraider .categories > .md-button {
  padding: 0 12px;
  font-size: 1em;
  border: 1px solid #8bc34a;
}

.domraider .categories > .md-button.md-raised {
  border: none;
}

.domraider .categories > .md-button:first-child {
  margin-left: 0;
}

/*doc
---
title: "Checkbox image"
name: utility-checkbox-img
category: "Utilities"
---

- Directive : `dr-checkbox-img`
- Attributes :
  - `src` (string)
  - `alt` (string)
  - `width` (integer)
  - `height` (integer)
  - `name` (string)
  - `value` (mixed)
  - `choice` (boolean, checked or not)

```html_example
<dr-checkbox-img src="'img/header/bg.png'" alt="'yolo'" name="yolo" value="'bg'" model="{selected: false}"></dr-checkbox-img>
```

```html_example
<dr-checkbox-img src="'img/header/bg.png'" alt="'yolo'" name="yolo" value="'bg'" model="{selected: true}"></dr-checkbox-img>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .checkbox-img {
  position: relative;
  display: inline-block;
  margin: 6px;
  line-height: 0;
  cursor: pointer;
  outline: none;
}

.domraider .checkbox-img > img {
  border: 1px solid #f5f5f5;
}

.domraider .checkbox-img.checked {
  margin: 0;
  border: 6px solid #8bc34a;
  border-radius: 6px;
}

.domraider .checkbox-img > md-icon {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-weight: 100;
  color: #8bc34a;
}

.domraider .checkbox-img > input {
  display: none;
}

/*doc
---
title: "Content title"
name: content-title
category: "Search"
---

- Directive : `dr-content-title`
- Attributes :
  - `title`
  - `count` (nombre de résultats)

```html_example
<dr-content-title title="'Tous les noms de domaine'" count="438"></dr-content-title>
```

```html_example
<dr-content-title title="'Noms de domaine les plus courts'" count="126"></dr-content-title>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #domains-title {
  padding-top: 15px;
  color: #2e2447;
}

.domraider #domains-title .domains-title {
  font-size: 16px;
  font-weight: 800;
}

/*doc
---
title: "Cookie law"
name: cookie-law
category: "User"
---

- Directive : `dr-cookie-law`

```html_example
<div style="background: black; width: 100%;">
<dr-cookie-law></dr-cookie-law>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #cookie-law {
  position: fixed;
  right: 2%;
  bottom: 1%;
  width: 35%;
  padding: 20px;
  color: black;
  text-align: justify;
  background: rgba(220, 220, 220, 0.9);
  opacity: 0;
}

.domraider #cookie-law #cookie-law-wrapper {
  width: 100%;
}

.domraider #cookie-law.bounce-in-up {
  animation: bounceInUp 2s forwards;
  animation-delay: 4s;
}

.domraider #cookie-law .cookie-law-text {
  margin-right: 20px;
}

.domraider #cookie-law a {
  color: black;
  text-decoration: underline;
}

.domraider #cookie-law .md-button.close-btn {
  position: absolute;
  top: 0;
  right: -5px;
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

/*doc
---
title: "Amount"
name: domain-amount
category: "Domain"
---

- Directive : `dr-domain-amount`
- Attributes :
  - `amount` (domain price)

```html_example
<dr-domain-amount amount="90"></dr-domain-amount>
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-amount {
  font-size: 32px;
  font-weight: 400;
  text-align: right;
}

/*doc
---
title: "Auction timer"
name: domain-auction-timer
category: "Domain"
---

- Directive : `dr-domain-auction-timer`
- Attributes :
  - `end` (datetime)
  - `finishCallback` (function name)

```html_example
<dr-domain-auction-timer end="'2017-06-30T14:00:00.000Z'"></dr-domain-auction-timer>
```
*/

/*doc
---
title: "Backorder availability"
name: domain-backorder-availability
category: "Domain"
---

- Directive : `dr-domain-backorder-availability`
- Attributes :
  - `available` (datetime)

```html_example
<dr-domain-backorder-availability available="'2017-03-30T00:00:00.000Z'"></dr-domain-backorder-availability>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-action {
  color: #ffffff;
}

.domraider .domain-detail-action > dr-domain-amount {
  margin-top: 8px;
  font-size: 1.3em;
}

.domraider .domain-detail-action > h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: bold;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-action .md-button.dr-action-button {
  width: 190px;
  min-width: 160px;
  padding: 0 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.15em;
  font-weight: bold;
  font-weight: 700;
  line-height: 40px;
}

/*doc
---
title: "Action auction"
name: domain-detail-action-auction
category: "Domain detail"
---

- Directive : `dr-domain-detail-action-auction`
- Attributes :
  - `domain` (un domaine)

### Running

```html_example
<div style="background: #333">
  <dr-domain-detail-action-auction domain="domainDetailAuction"></dr-domain-detail-action-auction>
</div>
```

### Finished

```html_example
TODO
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-action .md-button.dr-action-button {
  margin-top: 0;
}

.domraider .domain-detail-action.action-auction > .history-link-layout {
  height: 16px;
  margin-top: -3px;
  margin-bottom: 18px;
}

.domraider .domain-detail-action.action-auction > .history-link-layout a {
  color: #f5f5f5;
  text-decoration: underline;
}

.domraider .domain-detail-action.action-auction > .history-link-layout .md-button.md-icon-button {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  line-height: 16px;
  cursor: default;
}

.domraider .domain-detail-action.action-auction .participating-info {
  font-size: 14px;
  font-weight: bold;
}

.domraider .domain-detail-action.action-auction .participating-info .auction-participating-winner {
  color: #8bc34a;
}

.domraider .domain-detail-action.action-auction .participating-info .auction-participating-looser {
  color: #f4d03f;
}

.domraider .domain-detail-action.action-auction > dr-domain-auction-timer {
  margin-top: -10px;
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: 600;
}

.domraider .domain-detail-action.action-auction > form {
  width: 100%;
  margin-top: 12px;
}

.domraider .domain-detail-action.action-auction > form > .auction-amount-container {
  width: 200px;
}

.domraider .domain-detail-action.action-auction > form > .auction-amount-container label {
  font-size: 14px;
}

.domraider .domain-detail-action.action-auction > form > .auction-amount-container > input {
  display: inline-block;
  height: 20px;
  padding: 1px;
  margin: 0;
  letter-spacing: normal;
  word-spacing: normal;
  color: #fff;
  text-align: start;
  text-indent: 0;
  text-rendering: auto;
  text-shadow: none;
  text-transform: none;
  cursor: auto;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}

.domraider .domain-detail-action.action-auction > form > .auction-amount-container > .errors {
  position: relative;
  width: 100%;
  height: 23px;
  padding-top: 3px;
  padding-left: 0;
  overflow: visible;
  clear: left;
  font-size: 14px;
  line-height: 10px;
  color: #F1A9A0;
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}

.domraider .domain-detail-action.action-auction > form > .auction-amount-container > .errors.hidden {
  height: 0;
}

.domraider .domain-detail-action.action-auction > form > .auction-amount-container .auction-current-bid {
  font-size: 12px;
}

.domraider .domain-detail-action.action-auction > .auction-finished-spacer {
  width: 100%;
  margin-top: 12px;
}

/*doc
---
title: "Action backorder"
name: domain-detail-action-backorder
category: "Domain detail"
---

- Directive : `dr-domain-detail-action-backorder`
- Attributes :
  - `domain` (un domaine)

### Not selected

```html_example
<div style="background: #333">
  <dr-domain-detail-action-backorder domain="domainDetailBackorder"></dr-domain-detail-action-backorder>
</div>
```

### Mine

```html_example
TODO
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-action.action-backorder > .availability {
  margin-top: 15px;
}

.domraider .domain-detail-action.action-backorder > .availability > md-icon {
  color: #ffffff;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-label {
  font-size: 0.8em;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-date {
  font-size: 0.9em;
  font-weight: 500;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-date > md-icon {
  font-size: 16px;
  line-height: 1.4;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-date > md-icon:hover {
  cursor: pointer;
}

.domraider .domain-detail-action.action-backorder > .bo-info-link {
  margin-top: 15px;
  text-transform: uppercase;
}

.domraider .domain-detail-action.action-backorder .already-backordered {
  font-size: 12px;
  color: #8bc34a;
}

/*doc
---
title: "Action sale"
name: domain-detail-action-sale
category: "Domain detail"
---

- Directive : `dr-domain-detail-action-sale`
- Attributes :
  - `domain` (un domaine)

```html_example
<div style="background: #333">
  <dr-domain-detail-action-sale domain="domainDetailSale"></dr-domain-detail-action-sale>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-action.action-sale {
  width: 100%;
}

.domraider .domain-detail-action.action-sale .message {
  padding-bottom: 10px;
}

.domraider .domain-detail-action.action-sale > .marketing {
  width: 100%;
  text-align: center;
}

.domraider .domain-detail-action.action-sale > .marketing .action-sale-commitment {
  height: 100%;
  padding-top: 10px;
}

.domraider .domain-detail-action.action-sale > .marketing > div > md-icon {
  display: block;
  color: white;
}

.domraider .domain-detail-action.action-sale > .marketing > div > h1 {
  margin: 0;
}

.domraider .domain-detail-action.action-sale > .marketing > div > span {
  display: block;
  padding: 0 4px;
  margin-top: 5px;
  font-size: 13px;
  text-align: center;
}

/*doc
---
title: "Action backorder"
name: domain-detail-action-backorder
category: "Domain detail"
---

- Directive : `dr-domain-detail-action-backorder`
- Attributes :
  - `domain` (un domaine)

### Not selected

```html_example
<div style="background: #333">
  <dr-domain-detail-action-backorder domain="domainDetailBackorder"></dr-domain-detail-action-backorder>
</div>
```

### Mine

```html_example
TODO
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-action.action-backorder > .availability {
  margin-top: 15px;
}

.domraider .domain-detail-action.action-backorder > .availability > md-icon {
  color: #ffffff;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-label {
  font-size: 0.8em;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-date {
  font-size: 0.9em;
  font-weight: 500;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-date > md-icon {
  font-size: 16px;
  line-height: 1.4;
}

.domraider .domain-detail-action.action-backorder > .availability > .availability-date > md-icon:hover {
  cursor: pointer;
}

.domraider .domain-detail-action.action-backorder > .bo-info-link {
  margin-top: 15px;
  text-transform: uppercase;
}

.domraider .domain-detail-action.action-backorder .already-backordered {
  font-size: 12px;
  color: #8bc34a;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .auction-detail .detail-more-content {
  height: 280px;
  overflow: auto;
}

.domraider .auction-detail .detail-more-content table.md-table tbody.md-body > tr.md-row,
.domraider .auction-detail .detail-more-content table.md-table tfoot.md-foot > tr.md-row {
  height: 24px;
}

.domraider .auction-detail .detail-more-content table th {
  text-transform: lowercase;
}

.domraider .auction-detail .detail-more-content table th:first-letter {
  text-transform: uppercase !important;
}

.domraider .auction-detail .detail-more-content table .md-button.info-btn {
  min-height: inherit;
}

.domraider .auction-detail .detail-more-content table .md-button.md-icon-button {
  height: 24px;
  padding: 5px;
}

.domraider .auction-detail .detail-more-content table .md-button.md-icon-button > md-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  font-size: 14px;
  color: white;
}

.domraider .auction-detail .detail-more-content table .user-label > .you-history {
  font-weight: 600;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .modal-auction-history {
  width: 600px;
}

.domraider .modal-auction-history h2 {
  color: #f5f5f5;
}

.domraider .modal-auction-history-content {
  padding: 50px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .detail-more-title {
  height: 100%;
  padding: 10px;
}

.domraider .detail-more-title h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 100;
  line-height: 42px;
  color: #f5f5f5;
  text-transform: uppercase;
}

.domraider .detail-more-title h2 {
  margin: 0;
  font-weight: 100;
  line-height: 20px;
  color: #f5f5f5;
  text-transform: uppercase;
}

.domraider .backorder-detail .detail-more-content {
  height: 100%;
  min-height: 280px;
  padding: 10px;
  overflow: hidden;
}

.domraider .backorder-detail .detail-more-content img {
  max-width: 100%;
  max-height: 90%;
}

.domraider .backorder-detail .detail-more-content table th,
.domraider .backorder-detail .detail-more-content table tr,
.domraider .backorder-detail .detail-more-content table td {
  color: white !important;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Data"
name: domain-detail-data
category: "Domain detail"
---

- Directive : `dr-domain-detail-data`
- Attributes :
  - `domain` (un domaine)

```html_example
<div style="background:#cccccc;" ng-init="domainDetailData={
              'status': 'redemption',
              'id': 'backorder.fr',
              'rate': 2.5,
              'release_at': '2016-05-23T15:47:46+02:00',
              'price': 10,
              'sell_status': 'backorder',
              'intention': 'md-accent',
              'seo': {
                'rank': 55,
                'age': 2,
                'length': 8,
                'majestic': {
                  'trust':12,
                  'citation':10,
                  'backlinks': 2145,
                  'domains': 84
                },
                'moz': {
                  'authority':30
                },
                'google': {
                  'pr':4
                },
                'archive': {
                  'first_seen_age': 2
                }
              },
              'metrics': {
                'age': 20,
                'length': 40,
                'majestic': {
                  'trust':50,
                  'citation':20,
                  'backlinks': 80,
                  'domains': 40
                },
                'moz': {
                  'authority':80
                },
                'google': {
                  'pr':60
                },
                'archive': {
                  'first_seen_at': 60
                }
              },
              'semantic': {
                'keywords_frequency': [
                  {text:'www','size':1},
                  {text:'physic','size':12},
                  {text:'gym','size':45},
                  {text:'physicgym','size':6},
                  {text:'fitness','size':43}
                ],
                'topics': {
                  'yolo': 75,
                  'yili': 40,
                  'yulu': 35,
                  'yala': 15
                }
              },
              'color_class': ['backorder-domain', 'zero-star'],
            'child' : {
              'selling_at' : '2017-03-30T00:00:00.000Z'
              }
    }">
<dr-domain-detail-data domain="domainDetailData"></dr-domain-detail-data>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-data {
  color: #ffffff;
}

.domraider .domain-detail-data > .left > dr-wordcloud {
  width: 100%;
  height: 255px;
  overflow: hidden;
  text-align: center;
}

.domraider .domain-detail-data > .right {
  padding: 20px 10px;
  border-right: 2px solid #f5f5f5;
}

.domraider .domain-detail-data > .right > .domain-name > h1 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-data > .right > .domain-name > dr-wishlist-button md-icon {
  font-weight: 100;
  color: #ffffff;
}

.domraider .domain-detail-data > .right > .summary > .metrics > dr-domain-detail-rank {
  margin-bottom: 10px;
}

.domraider .domain-detail-data > .right > .summary > .metrics > dr-domain-detail-rank h2,
.domraider .domain-detail-data > .right > .summary > .metrics > dr-domain-detail-rank h3 {
  color: #f5f5f5;
}

.domraider .domain-detail-data > .right > .summary > .metrics > dr-domain-detail-metrics {
  width: 100%;
  margin-left: 3px;
}

.domraider .domain-detail-data > .right > .summary > .topics {
  padding-left: 30px;
}

/*doc
---
title: "Detail"
name: domain-detail
category: "Domain detail"
---

- Directive : `dr-domain-detail`
- Attributes :
  - `domain` (un domaine)

### Auction

```html_example
<div ng-init="domainDetailAuction={
            'status': 'registered',
            'id': 'premium.fr',
            'rate': 3.5,
            'seo': {
              'rank': 55,
              'age': 2,
              'length': 8,
              'majestic': {
                'trust':12,
                'citation':10,
                'backlinks': 2145,
                'domains': 84
              },
              'moz': {
                'authority':30
              },
              'google': {
                'pr':4
              },
              'archive': {
                'first_seen_age': 2
              }
            },
            'metrics': {
              'age': 20,
              'length': 40,
              'majestic': {
                'trust':50,
                'citation':20,
                'backlinks': 80,
                'domains': 40
              },
              'moz': {
                'authority':80
              },
              'google': {
                'pr':60
              },
              'archive': {
                'first_seen_at': 60
              }
            },
            'semantic': {
              'keywords_frequency': [
                {text:'www','size':1},
                {text:'physic','size':12},
                {text:'gym','size':45},
                {text:'physicgym','size':6},
                {text:'fitness','size':43}
              ],
              'topics': {
                'yolo': 75,
                'yili': 40,
                'yulu': 35,
                'yala': 15
              }
            },
            'intention': 'md-warn',
            'color_class': ['auction-domain', 'three-star'],
            'sell_status': 'auction',
            'auction': {
               'participants' : {
                  'user_1':1,
                  '18140e5a1b337ede6637116e8c696da3':2,
                  'user_3':3,
               },
                user: {
                    isParticipating: true,
                    isTheWinner: true,
                    max : 20
                },
                rules : {
                    min : 250,
                    step : 10
                }
            },
            'child':{
              'auction': {
                'id':'18140e5a1b337ede6637116e8c696da3',
                'result': {
                  'amount':240,
                  'user_id':'18140e5a1b337ede6637116e8c696da3'
                },
                bids_count:25,
                finish_at:'2016-05-23T15:47:46+02:00',
                created_at:'2014-05-23T15:47:46+02:00',
                status : 'running',
                history: [
                  {
                    'created_at':'2014-05-23T15:47:46+02:00',
                    'raise_user_id':'user_1',
                    raise_amount : 40,
                    lead_amount:40,
                    lead_user_id : 'user_1'
                  },
                  {
                    'created_at':'2014-05-23T15:57:46+02:00',
                    'raise_user_id':'18140e5a1b337ede6637116e8c696da3',
                    raise_amount : 60,
                    lead_amount:60,
                    lead_user_id : '18140e5a1b337ede6637116e8c696da3'
                  },
                  {
                    'created_at':'2014-05-23T16:47:46+02:00',
                    'raise_user_id':'user_3',
                    raise_amount : 70,
                    lead_amount:70,
                    lead_user_id : 'user_3'
                  },
                  {
                    'created_at':'2014-05-23T16:48:46+02:00',
                    'raise_user_id':'user_4',
                    raise_amount : 80,
                    lead_amount:80,
                    lead_user_id : 'user_4'
                  },
                  {
                    'created_at':'2014-05-23T17:47:46+02:00',
                    'raise_user_id':'user_1',
                    raise_amount : 90,
                    lead_amount:90,
                    lead_user_id : 'user_1'
                  },
                  {
                    'created_at':'2014-05-23T17:47:46+02:00',
                    'raise_user_id':'18140e5a1b337ede6637116e8c696da3',
                    raise_amount : 100,
                    lead_amount:100,
                    lead_user_id : '18140e5a1b337ede6637116e8c696da3'
                  },
                  {
                    'created_at':'2014-05-23T17:49:46+02:00',
                    'raise_user_id':'user_4',
                    raise_amount : 180,
                    lead_amount:180,
                    lead_user_id : 'user_4'
                  },
                  {
                    'created_at':'2014-05-24T15:47:46+02:00',
                    'raise_user_id':'user_1',
                    raise_amount : 190,
                    lead_amount:190,
                    lead_user_id : 'user_1'
                  },
                  {
                    'created_at':'2014-05-25T15:47:46+02:00',
                    'raise_user_id':'18140e5a1b337ede6637116e8c696da3',
                    raise_amount : 200,
                    lead_amount:200,
                    lead_user_id : '18140e5a1b337ede6637116e8c696da3'
                  }
                ]
              }
            }
        }">
  <dr-domain-detail domain="domainDetailAuction" offset="150"></dr-domain-detail>
</div>
```

### AUCTION NEW RULES

```html_example
<div ng-init="domainDetailAuction={
            'status': 'registered',
            'id': 'premium.fr',
            'rate': 3.5,
            'seo': {
              'rank': 55,
              'age': 2,
              'length': 8,
              'majestic': {
                'trust':12,
                'citation':10,
                'backlinks': 2145,
                'domains': 84
              },
              'moz': {
                'authority':30
              },
              'google': {
                'pr':4
              },
              'archive': {
                'first_seen_age': 2
              }
            },
            'metrics': {
              'age': 20,
              'length': 40,
              'majestic': {
                'trust':50,
                'citation':20,
                'backlinks': 80,
                'domains': 40
              },
              'moz': {
                'authority':80
              },
              'google': {
                'pr':60
              },
              'archive': {
                'first_seen_at': 60
              }
            },
            'semantic': {
              'keywords_frequency': [
                {text:'www','size':1},
                {text:'physic','size':12},
                {text:'gym','size':45},
                {text:'physicgym','size':6},
                {text:'fitness','size':43}
              ],
              'topics': {
                'yolo': 75,
                'yili': 40,
                'yulu': 35,
                'yala': 15
              }
            },
            'intention': 'md-warn',
            'color_class': ['auction-domain', 'three-star'],
            'sell_status': 'auction',
            'auction': {
               'participants' : {
                  'user_1': 1,
                  'user_2': 2
               },
                user: {
                    isParticipating: true,
                    isTheWinner: true,
                    max : 20
                },
                rules : {
                    min : 110,
                    step : 10
                }
            },
            'child':{
              'auction': {
                'id':'18140e5a1b337ede6637116e8c696da3',
                'result': {
                  'amount': 50,
                  'user_id':'18140e5a1b337ede6637116e8c696da3'
                },
                bids_count:25,
                finish_at:'2017-02-23T15:47:46+02:00',
                created_at:'2014-05-23T15:47:46+02:00',
                status : 'running',
                history: [
                  {
                    created_at: '2014-05-20T15:47:46+02:00',
                    raise_user_id :'user_1',
                    raise_amount : 10,
                    lead_amount: 10,
                    lead_user_id : 'user_1'
                  },
                  {
                    created_at: '2014-05-21T15:47:46+02:00',
                    raise_user_id: 'user_2',
                    raise_amount : 50,
                    lead_amount: 20,
                    lead_user_id : 'user_2'
                  },
                  {
                    created_at: '2014-05-22T15:47:46+02:00',
                    raise_user_id: 'user_1',
                    raise_amount : 50,
                    lead_amount: 50,
                    lead_user_id : 'user_1'
                  },
                  {
                    created_at: '2014-05-23T15:47:46+02:00',
                    raise_user_id: 'user_2',
                    raise_amount : 50,
                    lead_amount: 50,
                    lead_user_id : 'user_2',
                    info: 'tie'
                  },
                  {
                    created_at: '2014-05-24T15:47:46+02:00',
                    raise_user_id: 'user_1',
                    raise_amount : 60,
                    lead_amount: 60,
                    lead_user_id : 'user_1'
                  },
                  {
                    created_at: '2014-05-25T15:47:46+02:00',
                    raise_user_id: 'user_2',
                    raise_amount : 70,
                    lead_amount: 70,
                    lead_user_id : 'user_2'
                  },
                  {
                    created_at: '2014-05-26T15:47:46+02:00',
                    raise_user_id: 'user_1',
                    raise_amount : 100,
                    lead_amount: 80,
                    lead_user_id : 'user_1'
                  },
                  {
                    created_at: '2014-05-27T15:47:46+02:00',
                    raise_user_id: 'user_1',
                    raise_amount : 100,
                    lead_amount: 100,
                    lead_user_id : 'user_1',
                    info: 'self-bid'
                  },
                  {
                    created_at: '2014-05-27T15:47:47+02:00',
                    raise_user_id: 'user_2',
                    raise_amount : 101,
                    lead_amount: 101,
                    lead_user_id : 'user_2'
                  },
                  {
                    created_at: '2014-05-27T15:48:46+02:00',
                    raise_user_id: 'user_1',
                    raise_amount : 110,
                    lead_amount: 110,
                    lead_user_id : 'user_1'
                  },
                  {
                    created_at: '2014-05-27T15:49:47+02:00',
                    raise_user_id: 'user_2',
                    raise_amount : 135,
                    lead_amount: 120,
                    lead_user_id : 'user_2'
                  },
                  {
                    created_at: '2014-05-27T15:50:46+02:00',
                    raise_user_id: 'user_1',
                    raise_amount : 130,
                    lead_amount: 130,
                    lead_user_id : 'user_1'
                  },
                  {
                    created_at: '2014-05-27T15:51:47+02:00',
                    raise_user_id: 'user_2',
                    raise_amount : 135,
                    lead_amount: 135,
                    lead_user_id : 'user_2',
                    info: 'lead-no-step'
                  }
                ]
              }
            }
        }">
  <dr-domain-detail domain="domainDetailAuction" offset="150"></dr-domain-detail>
</div>
```

### Backorder

```html_example
<div ng-init="domainDetailBackorder={
              'status': 'redemption',
              'id': 'backorder.fr',
              'rate': 2.5,
              'release_at': '2016-05-23T15:47:46+02:00',
              'price': 10,
              'sell_status': 'backorder',
              'intention': 'md-accent',
              'seo': {
                'rank': 55,
                'age': 2,
                'length': 8,
                'majestic': {
                  'trust':12,
                  'citation':10,
                  'backlinks': 2145,
                  'domains': 84
                },
                'moz': {
                  'authority':30
                },
                'google': {
                  'pr':4
                },
                'archive': {
                  'first_seen_age': 2
                }
              },
              'metrics': {
                'age': 20,
                'length': 40,
                'majestic': {
                  'trust':50,
                  'citation':20,
                  'backlinks': 80,
                  'domains': 40
                },
                'moz': {
                  'authority':80
                },
                'google': {
                  'pr':60
                },
                'archive': {
                  'first_seen_at': 60
                }
              },
              'semantic': {
                'keywords_frequency': [
                  {text:'www','size':1},
                  {text:'physic','size':12},
                  {text:'gym','size':45},
                  {text:'physicgym','size':6},
                  {text:'fitness','size':43}
                ],
                'topics': {
                  'yolo': 75,
                  'yili': 40,
                  'yulu': 35,
                  'yala': 15
                }
              },
              'color_class': ['backorder-domain', 'zero-star'],
            'child' : {
              'selling_at' : '2017-03-30T00:00:00.000Z'
              }
    }">
  <dr-domain-detail domain="domainDetailBackorder" offset="150"></dr-domain-detail>
</div>
```

### Backorder

```html_example
<div style="height: 340px;" ng-init="domainDetailSale={
              'status': 'registered',
              'id': 'premium.fr',
              'age': 4,
              'rate': 4.5,
              'seo': {
                'rank': 55,
                'age': 2,
                'length': 8,
                'majestic': {
                  'trust':12,
                  'citation':10,
                  'backlinks': 2145,
                  'domains': 84
                },
                'moz': {
                  'authority':30
                },
                'google': {
                  'pr':4
                },
                'archive': {
                  'first_seen_age': 2
                }
              },
              'metrics': {
                'age': 20,
                'length': 40,
                'majestic': {
                  'trust':50,
                  'citation':20,
                  'backlinks': 80,
                  'domains': 40
                },
                'moz': {
                  'authority':80
                },
                'google': {
                  'pr':60
                },
                'archive': {
                  'first_seen_at': 60
                }
              },
              'semantic': {
                'keywords_frequency': [
                  {text:'www','size':1},
                  {text:'physic','size':12},
                  {text:'gym','size':45},
                  {text:'physicgym','size':6},
                  {text:'fitness','size':43}
                ],
                'topics': {
                  'yolo': 75,
                  'yili': 40,
                  'yulu': 35,
                  'yala': 15
                }
              },
              'intention': 'md-primary',
              'color_class': ['sale-domain', 'four-star'],
              'sell_status': 'direct-sale',
              'child':{
                'sale': {
                  'amount':40,
                  'created_at':'2014-05-23T15:47:46+02:00'
                }
              }
    }">
  <dr-domain-detail domain="domainDetailSale" offset="150"></dr-domain-detail>
</div>
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-bubble > .domain-detail {
  margin-bottom: 15px;
  color: #ffffff;
  background-color: #2e2447;
}

.domraider .domain-detail-bubble > .domain-detail > .info > dr-domain-detail-auction-history,
.domraider .domain-detail-bubble > .domain-detail > .info dr-domain-detail-backorder-info {
  width: 100%;
  height: 100%;
}

.domraider .domain-detail-bubble > .domain-detail > .right > .close-btn-layout {
  height: 20px;
}

.domraider .domain-detail-bubble > .domain-detail > .right > .close-btn-layout > .md-button.close-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.domraider .domain-detail-bubble > .domain-detail > .right > .close-btn-layout > .md-button.close-btn > md-icon {
  color: #fff;
}

.domraider .domain-detail-bubble > .domain-detail > .right > .right-layout > dr-domain-detail-action-auction,
.domraider .domain-detail-bubble > .domain-detail > .right > .right-layout dr-domain-detail-action-backorder,
.domraider .domain-detail-bubble > .domain-detail > .right > .right-layout dr-domain-detail-action-sale {
  height: 100%;
}

.domraider .domain-detail-bubble > .arrow {
  position: absolute;
  bottom: -23px;
  content: "";
}

.domraider .domain-detail-bubble > .arrow > .caret {
  border-top: 20px solid #2e2447;
  border-right: 25px solid transparent;
  border-bottom: 0 dotted;
  border-left: 25px solid transparent;
}

.domraider .domain-detail-bubble table th,
.domraider .domain-detail-bubble table tr,
.domraider .domain-detail-bubble table td {
  color: white !important;
}

/*doc
---
title: "Metrics"
name: domain-metrics
category: "Domain detail"
---

- Directive : `dr-domain-detail-metrics`
- Attributes :
  - `domain` (les info seo du domaine)

### Auction

```html_example
<div style="background: #222;" ng-init="dataMetrics={
            'seo': {
              'age': 2,
              'length': 8,
              'majestic': {
                'trust':12,
                'citation':10,
                'backlinks': 2145,
                'domains': 84,
              },
              'moz': {
                'authority':30
              },
              'google': {
                'pr':4
              },
              'archive': {
                'first_seen_age': 2
              }
            },
            'score': {
              'age': 20,
              'length': 40,
              'majestic': {
                'trust':50,
                'citation':20,
                'backlinks': 80,
                'domains': 40
              },
              'moz': {
                'authority':80
              },
              'google': {
                'pr':60
              },
              'archive': {
                'first_seen_at': 60
              }
            },
            'child' : {
              'selling_at' : '2017-03-30T00:00:00.000Z'
              }
        }">
  <dr-domain-detail-metrics domain="dataMetrics"></dr-domain-detail-metrics>
</div>
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-metrics {
  font-size: 11px;
  font-weight: 300;
  color: #ffffff;
}

.domraider .domain-detail-metrics > .left > .domain-metric,
.domraider .domain-detail-metrics > .right > .domain-metric {
  margin-bottom: 7px;
  color: #ffffff;
}

.domraider .domain-detail-metrics > .left > .domain-metric a,
.domraider .domain-detail-metrics > .right > .domain-metric a {
  color: #ffffff;
}

.domraider .domain-detail-metrics > .left > .domain-metric md-icon,
.domraider .domain-detail-metrics > .right > .domain-metric md-icon {
  color: #ffffff;
}

.domraider .domain-detail-metrics > .left > .domain-metric > .domain-gauge,
.domraider .domain-detail-metrics > .right > .domain-metric > .domain-gauge {
  height: 8px;
}

.domraider .domain-detail-metrics > .left > .domain-metric > .domain-gauge dr-gauge,
.domraider .domain-detail-metrics > .right > .domain-metric > .domain-gauge dr-gauge {
  width: 85%;
  height: 8px;
  margin-right: 5px;
}

.domraider .domain-detail-metrics > .left > .domain-metric > .domain-gauge dr-gauge .md-bar,
.domraider .domain-detail-metrics > .right > .domain-metric > .domain-gauge dr-gauge .md-bar {
  height: 8px;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider .domain-detail-metrics > .left > .domain-metric > .domain-gauge dr-gauge .md-bar.md-bar1,
.domraider .domain-detail-metrics > .right > .domain-metric > .domain-gauge dr-gauge .md-bar.md-bar1 {
  opacity: 0.3;
}

.domraider .domain-detail-metrics > .left > .domain-metric > .domain-gauge > .metric,
.domraider .domain-detail-metrics > .right > .domain-metric > .domain-gauge > .metric {
  width: 30px;
  margin-left: 5px;
  line-height: 10px;
  text-align: left;
  text-transform: none;
}

.domraider .domain-detail-metrics > .left > .domain-metric > .domain-gauge > .metric.collected,
.domraider .domain-detail-metrics > .right > .domain-metric > .domain-gauge > .metric.collected {
  margin-left: 0;
}

.domraider .domain-detail-metrics > .left {
  margin-right: 10px;
}

/*doc
---
title: "Rank"
name: domain-detail-rank
category: "Domain detail"
---

- Directive : `dr-domain-detail-rank`
- Attributes :
  - `rate` (domain rate)

```html_example
<div style="background: black;">
  <dr-domain-detail-rank rate="5"></dr-domain-detail-rank>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-rank {
  margin-bottom: 8px;
  color: #ffffff;
}

.domraider .domain-detail-rank > h2 {
  margin: 0 0 0 3px;
  font-size: 0.8em;
  font-weight: 300;
  text-transform: uppercase;
}

.domraider .domain-detail-rank > .domain-detail-rate > dr-domain-star-rate {
  margin-right: 10px;
}

.domraider .domain-detail-rank > .domain-detail-rate > h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

/*doc
---
title: "Topics"
name: domain-topics
category: "Domain detail"
---

- Directive : `dr-domain-detail-topics`
- Attributes :
  - `topics` (les topics du domaine)
  - `limit` (limite du nombre de topics)

### Auction

```html_example
<div style="background: #222;" ng-init="dataTopics=
            [
              {name:'yolo', trust:75},
              {name:'yili', trust:40},
              {name:'yulu', trust:35},
              {name:'yala', trust:15}
            ]
        ">
  <dr-domain-detail-topics topics="dataTopics" limit="'3'"></dr-domain-detail-topics>
</div>
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-domain-detail-topics {
  color: #f5f5f5;
}

.domraider dr-domain-detail-topics h2 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 300;
  color: #f5f5f5;
  text-transform: uppercase;
}

.domraider dr-domain-detail-topics ul.topics-legend {
  width: 100%;
  padding: 0;
  margin-top: 4px;
  margin-bottom: 0;
}

.domraider dr-domain-detail-topics ul.topics-legend li {
  position: relative;
  width: 100%;
  margin-bottom: 4px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style-type: none;
  cursor: default;
}

.domraider dr-domain-detail-topics ul.topics-legend li span {
  display: inline-block;
  width: 13px;
  height: 13px;
  padding: 3px;
  margin-right: 5px;
  text-align: center;
  background-color: #eb5e57;
  border-radius: 3px;
}

/*doc
---
title: "List"
name: domain-list
category: "Domain"
---

- Directive : `dr-domain-list`
- Attributes :
  - `domains` (collection de domaines)

```html_example
<div ng-init="domainList=[
      {
        id: 'low-thrice.fr',
        rate: 1,
        seo: {
            rank: 20
        },
        child: {
          sale: {
            amount: 10
          }
        },
        intention: ['md-primary', 'md-hue-3'],
        sell_status: 'sale',
        tile: {
        }
      },
      {
        id: 'high.fr',
        rate: 5,
        seo: {
          rank: 66,
        },
        child: {
          auction: {
            result: {
              amount: 140
            }
          }
        },
        intention: ['md-warn'],
        sell_status: 'auction',
        tile: {
        }
      },
      {
        id: 'medium.fr',
        rate: 3,
        seo: {
            rank: 20
        },
        child: {
          auction: {
            result: {
              amount: 200
            }
          }
        },
        intention: ['md-warn', 'md-hue-2'],
        sell_status: 'auction',
        tile: {
        }
      },
      {
        id: 'high-twice.fr',
        rate: 5,
        seo: {
            rank: 100
        },
        child: {
          sale: {
            amount: 100
          }
        },
        intention: ['md-primary'],
        sell_status: 'direct-sale',
        tile: {
        }
      },
      {
        id: 'low.fr',
        rate: 2,
        seo: {
            rank: 24
        },
        intention: ['md-accent'],
        sell_status: 'backorder',
        tile: {
        }
      },
      {
        id: 'medium-thrice.fr',
        rate: 2,
        seo: {
            rank: 20
        },
        child: {
          sale: {
            amount: 30
          }
        },
        intention: ['md-primary', 'md-hue-3'],
        sell_status: 'direct-sale',
        tile: {
        }
      },
      {
        id: 'medium-twice.fr',
        rate: 4,
        seo: {
          rank: 38
        },
        child: {
          sale: {
            amount: 40
          }
        },
        intention: ['md-primary', 'md-hue-1'],
        sell_status: 'direct-sale',
        tile: {
        }
      },
      {
        id: 'low-twice.fr',
        rate: 1,
        seo: {
            rank: 20
        },
        intention: ['md-accent'],
        sell_status: 'backorder',
        tile: {
        }
      }
    ]; steps=[]">
    <dr-domain-list domains="domainList" steps="steps"></dr-domain-list>
</div>
```
*/

.domraider dr-domain-list {
  margin-top: 10px !important;
}

.domraider .domain-list-layout > .domain-list dr-domain-tile,
.domraider .domain-list-layout > .domain-list dr-domain-tile-featured {
  width: 100%;
  height: 100%;
}

.domraider .domain-list-layout > .domain-list dr-ad-crosslinking {
  width: 100%;
  height: 100%;
}

.domraider .domain-list-layout > .domain-list dr-ad-download {
  width: 100%;
  height: 100%;
}

.domraider .domain-list-layout > .domain-list dr-domain-detail {
  width: 100%;
  height: 100%;
}

/*doc
---
title: "Pill"
name: domain-pill
category: "Domain"
---

## Les pills

- Directive : `dr-domain-pill`
- Attributes :
  - `domain` (un domaine)

```html_example
<div ng-init="domainAuction={'id': 'auction.fr', theme: 'domraider-auction', 'intention': 'md-primary', sell_status: 'auction'}">
    <dr-domain-pill domain="domainAuction"></dr-domain-pill>
</div>
```

```html_example
<div ng-init="domainBo={'id': 'backorder.fr', theme: 'domraider-backorder', 'intention': 'md-primary', sell_status: 'backorder'}">
    <dr-domain-pill domain="domainBo"></dr-domain-pill>
</div>
```
*/

.domraider .md-button.domain-pill {
  width: 250px;
  padding: 0 25px;
  overflow: visible;
  color: #fff;
  text-transform: lowercase;
}

.domraider .md-button.domain-pill > img {
  position: absolute;
  top: -7px;
  right: 4px;
  display: block;
  width: 31px;
}

/*doc
---
title: "Star rate"
name: domain-star-rate
category: "Domain"
---

- Directive : `dr-domain-star-rate`
- Attributes :
  - `rate` (integer de 0 à 5)
  - `bg` (string, light)

```html_example
<div style="background: #aaa;">
  <dr-domain-star-rate rate="0"></dr-domain-star-rate>
</div>
```

```html_example
<div style="background: #aaa;">
  <dr-domain-star-rate rate="3"></dr-domain-star-rate>
</div>
```

```html_example
<div style="background: #aaa;">
  <dr-domain-star-rate rate="1" size="big"></dr-domain-star-rate>
</div>
```

```html_example
<div style="background: #fff;">
  <dr-domain-star-rate rate="0" bg="light"></dr-domain-star-rate>
</div>
```

```html_example
<div style="background: #fff;">
  <dr-domain-star-rate rate="3" bg="light"></dr-domain-star-rate>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .star-rate > md-icon {
  width: 20px;
  height: 20px;
  margin: 0;
  font-size: 20px;
  color: #676476 !important;
  vertical-align: middle;
}

.domraider .star-rate > md-icon.empty {
  height: 22px;
  font-size: 22px;
}

.domraider .star-rate.dark > md-icon {
  color: #ffffff !important;
}

.domraider .star-rate.big > md-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.domraider .star-rate.big > md-icon.empty {
  height: 26px;
  font-size: 26px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-domain-tile-content .domain-content {
  width: 90px;
}

.domraider dr-domain-tile-content .domain-content > .domain-offer {
  margin-right: 5px;
  text-align: right;
}

.domraider dr-domain-tile-content .domain-content > .domain-offer .backorder-availability,
.domraider dr-domain-tile-content .domain-content > .domain-offer .auction-timer,
.domraider dr-domain-tile-content .domain-content > .domain-offer .sale-availability {
  font-size: 0.9em;
  text-align: center;
}

.domraider dr-domain-tile-content .domain-content > .domain-offer .backorder-availability > md-icon,
.domraider dr-domain-tile-content .domain-content > .domain-offer .auction-timer > md-icon,
.domraider dr-domain-tile-content .domain-content > .domain-offer .sale-availability > md-icon {
  margin-right: 3px;
  color: #2e2447;
}

.domraider dr-domain-tile-content .domain-content > .domain-offer .auction-timer md-icon {
  color: #f5f5f5 !important;
}

.domraider dr-domain-tile-content .domain-content .auction {
  color: #f5f5f5;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-tile {
  padding: 13px 15px 12px 15px;
}

.domraider .domain-tile .featured {
  padding-top: 15px;
  margin-top: -15px;
  margin-bottom: -15px;
  text-align: center;
  background: url(http://www.scmagazine.cz/img/featured-ribbon.png) no-repeat top center;
  opacity: 0.5;
}

.domraider .domain-tile .featured h3 {
  margin: 0;
  font-weight: 400;
}

.domraider .domain-tile .featured.backorder-domain.poor-star * {
  color: #1c5372;
}

.domraider .domain-tile .featured.backorder-domain.low-star * {
  color: #22668c;
}

.domraider .domain-tile .featured.backorder-domain.mid-star * {
  color: #2878a5;
}

.domraider .domain-tile .featured.backorder-domain.great-star * {
  color: #2e8bbf;
}

.domraider .domain-tile .featured.seo-domain.poor-star * {
  color: #007f39;
}

.domraider .domain-tile .featured.seo-domain.low-star * {
  color: #009945;
}

.domraider .domain-tile .featured.seo-domain.mid-star * {
  color: #00b250;
}

.domraider .domain-tile .featured.seo-domain.great-star * {
  color: #00cc5c;
}

.domraider .domain-tile .featured.auction-domain.poor-star * {
  color: #b24000;
}

.domraider .domain-tile .featured.auction-domain.low-star * {
  color: #cc4900;
}

.domraider .domain-tile .featured.auction-domain.mid-star * {
  color: #e55200;
}

.domraider .domain-tile .featured.auction-domain.great-star * {
  color: #ff5b00;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-domain-tile-head .domain-tile-header {
  margin-bottom: 5px;
  color: #fff;
}

.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h3 {
  height: 23px;
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  color: #eb5e57;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h3.auction-domain {
  color: #f5f5f5;
}

.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h3 .sale-domain,
.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h3 .backorder-domain {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h3 .auction-domain {
  color: #f5f5f5;
}

.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h4 {
  height: 20px;
  margin: 0;
  font-size: 0.9em;
}

.domraider dr-domain-tile-head .domain-tile-header > .domain-tile-title > h4 > dr-domain-star-rate {
  display: block;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-metric {
  max-width: 150px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 300;
}

.domraider .domain-metric.sale-domain,
.domraider .domain-metric.backorder-domain {
  color: #eb5e57;
}

.domraider .domain-metric.auction-domain {
  color: #f5f5f5;
}

.domraider .domain-metric > .domain-gauge {
  height: 8px;
}

.domraider .domain-metric > .domain-gauge > .metric {
  width: 10%;
  line-height: 8px;
  text-align: right;
}

.domraider .domain-metric > .domain-gauge > dr-gauge {
  width: 90%;
  margin-right: 5px;
}

.domraider .domain-metric > .domain-gauge > dr-gauge .md-bar {
  height: 8px;
  background: white;
}

.domraider .domain-metric > .domain-gauge > dr-gauge .md-bar.md-bar1 {
  opacity: 0.3;
}

.domraider .domain-metric > .domain-gauge > dr-gauge .md-bar.md-bar2 {
  opacity: 0.7;
}

.domraider .domain-metric > .domain-gauge > dr-gauge .md-bar.md-bar-striped {
  opacity: 0.7;
}

/*doc
---
title: "Tiles"
name: domain-tile
category: "Domain"
---

- Directive : `dr-domain-tile`
- Attributes :
  - `domain` (domain)

## Direct sale

```html_example
<div ng-init="domainDS={
        id: 'direct-saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaale.fr',
        age: '0',
        seo: {
            rank: 20
        },
        child: {
          sale: {
            amount: 100
          }
        },
        rate: 5,
        intention: 'md-primary',
        sell_status: 'direct-sale'
    };">
  <dr-domain-tile domain="domainDS"></dr-domain-tile>
</div>
```

## Auction

```html_example
<div ng-init="domainAR2={
        id: 'auctionr2.fr',
        age: '2',
        seo: {
            rank: 55
        },
        child: {
          auction: {
            finish_at: '2017-02-14T00:00:00.000Z',
            result: {
              amount: 100
            }
          }
        },
        rate: 3,
        sell_status: 'auction',
        theme: 'domraider',
        intention: ['md-warn']
    }">
  <dr-domain-tile domain="domainAR2" steps="steps"></dr-domain-tile>
</div>
```

## Back order

```html_example
<div ng-init="domainBO={
        id: 'backorder.fr',
        age: '4',
        seo: {
            rank: 0,
        },
        rate: 0,
        release_at:'2018-02-20',
        intention: ['md-accent'],
        rowspan: 1,
        sell_status: 'backorder'
    }">
  <dr-domain-tile domain="domainBO" steps="steps"></dr-domain-tile>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-domain-tile .md-button.md-raised {
  box-shadow: none;
}

.domraider dr-domain-tile .new-bid {
  animation: pulse 1s ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes disappear {
  0% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.3;
  }
}

.domraider dr-domain-tile .open-tile {
  background: #f5f5f5 !important;
}

.domraider dr-domain-tile .wishlist-deleted {
  animation: disappear 1.5s forwards;
}

.domraider dr-domain-tile .auction-finished {
  opacity: 0.4;
}

.domraider dr-domain-tile > dr-wishlist-button {
  position: absolute;
  top: 0;
  right: -5px;
}

.domraider dr-domain-tile > .domain-tile {
  min-width: 250px;
  padding: 13px 15px 12px 15px;
  margin: 0;
  font-weight: normal;
  line-height: normal;
  text-align: left;
  text-transform: none;
}

.domraider dr-domain-tile > .domain-tile > .domain-body dr-domain-tile-metrics {
  margin-right: 20px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .editable-field {
  position: relative;
  display: block;
  height: 20px;
  padding: 6px 4px;
  margin: 0;
  overflow: hidden;
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  outline: none;
}

.domraider .editable-field.hover {
  cursor: text;
  border-color: #9b9b9b;
  border-style: dotted;
}

.domraider .editable-field.focus {
  border-color: #9b9b9b;
  border-style: solid;
}

.domraider .editable-field.focus.select {
  border-color: transparent;
}

.domraider .editable-field.focus.select form {
  width: 96%;
}

.domraider .editable-field.error {
  border-color: #eb5c37;
}

.domraider .editable-field form {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 34px;
}

.domraider .editable-field form input {
  z-index: 2;
  width: 100%;
  padding: 6px 4px;
  margin: 0;
  background: transparent;
  border: 0;
  outline: none;
}

.domraider .editable-field form select {
  z-index: 2;
  width: 100%;
  height: 30px;
  padding: 0;
  margin: 0;
  background: #ffffff;
  outline: none;
}

/*doc
---
title: "Blocks"
name: footer-blocks
category: "Footer"
---

- Directive : `dr-footer-blocks`

```html_example
<dr-footer-blocks></dr-footer-blocks>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .footer-blocks {
  padding: 20px 0 40px 0;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  background: #2e2447;
}

.domraider .footer-blocks .footer-blocks-title {
  padding-bottom: 20px;
  margin-top: 20px;
  font-size: 30px;
  font-weight: 100;
}

.domraider .footer-blocks .footer-best {
  font-family: 'Lobster Two', cursive !important;
  font-size: 20px;
}

.domraider .footer-blocks .footer-expired {
  text-transform: uppercase;
}

.domraider .footer-blocks .footer-social-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.domraider .footer-blocks .footer-domraider {
  width: auto;
  height: 18px;
  margin-top: 4px;
  margin-right: 4px;
}

.domraider .footer-blocks #footer-domraider-best {
  margin-top: 5px;
}

.domraider .footer-blocks #footer-expired {
  margin-top: 5px;
}

/*doc
---
title: "Copyright"
name: footer-copyright
category: "Footer"
---

- Directive : `dr-footer-copyright`

```html_example
<dr-footer-copyright></dr-footer-copyright>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .footer-copyright {
  padding: 20px 0 18px 0;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background: #2e2447;
}

.domraider .footer-copyright > .footer-copyright-element {
  margin: 5px;
}

/*doc
---
title: "Footer"
name: footer
category: "Footer"
---

- Directive : `dr-footer`

```html_example
<dr-footer></dr-footer>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider footer.footer {
  color: #ffffff;
}

/*doc
---
title: "Links"
name: footer-links
category: "Footer"
---

- Directive : `dr-footer-links`

```html_example
<dr-footer-links></dr-footer-links>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .footer-links {
  padding: 20px 0 18px 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background: #333333;
}

.domraider .footer-links a {
  font-size: 14px;
}

/*doc
---
title: "Marketing"
name: footer-marketing
category: "Footer"
---

- Directive : `dr-footer-marketing`

```html_example
<dr-footer-marketing></dr-footer-marketing>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .footer-layout {
  color: #fff;
}

.domraider .footer-layout > .white-space {
  width: 100%;
  height: 80px;
  background: transparent;
  content: "";
}

.domraider .footer-layout > .dark-space {
  width: 100%;
  height: 175px;
  padding: 0;
  background: #20201f;
  border-top: 1px solid #5f6162;
}

.domraider .footer-layout > .dark-space > dr-marketing-reinsurance {
  position: relative;
  top: -50px;
  display: block;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 599px) {
  .domraider .footer-layout > .dark-space > dr-marketing-reinsurance {
    top: auto;
  }
}

/*doc
---
title: "Social"
name: footer-social
category: "Footer"
---

- Directive : `dr-footer-social`

```html_example
<dr-footer-social></dr-footer-social>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .footer-social-layout {
  position: relative;
  width: 100%;
  height: 35px;
  background: #333333;
  border-top: 1px solid #5f6162;
}

.domraider .footer-social-layout > .footer-social {
  position: relative;
  top: -17px;
  height: 44px;
}

.domraider .footer-social-layout > .footer-social > .md-button {
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.domraider .footer-social-layout > .footer-social > .md-button.blog {
  width: auto;
  padding: 0 6px;
}

.domraider .footer-social-layout > .footer-social > .md-button.blog > .layout > span {
  margin-right: 2px;
  margin-left: 6px;
  font-size: 0.9em;
  font-weight: 600;
}

.domraider .footer-social-layout > .footer-social > .md-button > .layout {
  width: 100%;
  height: 100%;
}

.domraider .footer-social-layout > .footer-social > .md-button > .layout > md-icon {
  margin: 0 !important;
  color: #fff;
}

/*doc
---
title: "Header"
name: header
category: "Header"
---

- Directive : `dr-header`
- Attributes :
  - `user` (un utilisateur)
  - `section` (une section)
  - `category` (une catégorie)
  - `term` (recherche)

```html_example
<div style="background: #000;" ng-init="user={email: 'yolo@ici.com', lang: 'fr'};">
  <dr-header user="user" section="new"></dr-header>
</div>
```

```html_example
<div style="background: #000;" ng-init="user={email: 'yolo@ici.com', lang: 'fr'};">
  <dr-header user="user" section="{name: 'all'}" term="'yolo'"></dr-header>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-header .sales,
.domraider dr-header .backorders,
.domraider dr-header .search,
.domraider dr-header .all,
.domraider dr-header .auctions,
.domraider dr-header .dashboard,
.domraider dr-header .wishlist {
  background-image: url('http://www.scmagazine.cz/img/header/blue-header.jpg');
}

.domraider dr-header > header.header,
.domraider dr-home-header > header.header {
  padding-bottom: 20px;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  border-bottom: 1px solid #f1f1f1;
}

.domraider dr-header > header.header dr-logo,
.domraider dr-home-header > header.header dr-logo {
  float: left;
  width: auto;
  height: 60px;
}

.domraider dr-header > header.header > .header-fill,
.domraider dr-home-header > header.header > .header-fill {
  width: 100%;
  height: 50px;
}

.domraider dr-header > header.header > .header-fill > dr-user-language,
.domraider dr-home-header > header.header > .header-fill > dr-user-language {
  margin-top: 15px;
  margin-right: 30px;
}

.domraider dr-header > header.header > .content-padding,
.domraider dr-home-header > header.header > .content-padding {
  padding-top: 20px;
}

.domraider dr-header > header.header > .header-middle,
.domraider dr-home-header > header.header > .header-middle {
  width: 100%;
  padding-bottom: 20px;
}

@media (max-width: 599px) {
  .domraider dr-header > header.header > .header-middle,
  .domraider dr-home-header > header.header > .header-middle {
    padding-right: 12px;
    padding-left: 12px;
  }
}

.domraider dr-header > header.header > .header-middle > dr-logo,
.domraider dr-home-header > header.header > .header-middle > dr-logo {
  position: relative;
  z-index: 2;
  width: 210px;
}

.domraider dr-header > header.header > .header-middle > .md-button.menu-btn,
.domraider dr-home-header > header.header > .header-middle > .md-button.menu-btn {
  padding: 0;
  margin-right: 20px;
}

.domraider dr-header > header.header > .header-middle > .md-button.menu-btn > md-icon,
.domraider dr-home-header > header.header > .header-middle > .md-button.menu-btn > md-icon {
  color: #fff;
}

.domraider dr-header > header.header > .header-middle > .header-top-middle,
.domraider dr-home-header > header.header > .header-middle > .header-top-middle {
  width: 100%;
}

.domraider dr-header > header.header > .header-middle > .header-top-middle .header-title,
.domraider dr-home-header > header.header > .header-middle > .header-top-middle .header-title {
  width: 100%;
  font-size: 24px;
  font-weight: 800;
  color: #f5f5f5;
}

.domraider dr-header > header.header > .header-middle > .header-top-middle .header-search,
.domraider dr-home-header > header.header > .header-middle > .header-top-middle .header-search {
  width: 100%;
  padding: 0 12%;
}

@media (max-width: 959px) {
  .domraider dr-header > header.header > .header-middle > .header-top-middle,
  .domraider dr-home-header > header.header > .header-middle > .header-top-middle {
    margin-right: 20px;
    margin-left: 0;
  }
}

@media (max-width: 599px) {
  .domraider dr-header > header.header > .header-middle > .header-top-middle,
  .domraider dr-home-header > header.header > .header-middle > .header-top-middle {
    margin: 0;
  }
}

.domraider dr-header > header.header > .header-middle > .header-top-right,
.domraider dr-home-header > header.header > .header-middle > .header-top-right {
  position: relative;
  top: -3px;
}

.domraider dr-header > header.header > .header-top,
.domraider dr-home-header > header.header > .header-top {
  width: 80%;
  margin-top: 10px;
  margin-left: 10%;
}

.domraider dr-header > header.header > .header-bottom,
.domraider dr-home-header > header.header > .header-bottom {
  width: 100%;
  padding: 0 20px 1.5em 20px;
  margin-top: -40px;
}

@media (max-width: 959px) {
  .domraider dr-header > header.header > .header-bottom,
  .domraider dr-home-header > header.header > .header-bottom {
    padding-top: 1em;
    margin-top: 0;
  }
}

.domraider dr-header > header.header > dr-search-sections,
.domraider dr-home-header > header.header > dr-search-sections {
  width: 100%;
  padding: 0 30px;
}

@media (max-width: 599px) {
  .domraider dr-header > header.header > dr-search-sections,
  .domraider dr-home-header > header.header > dr-search-sections {
    padding: 0 12px;
  }
}

.domraider dr-header > header.header > dr-loading-bar,
.domraider dr-home-header > header.header > dr-loading-bar {
  width: 100%;
}

.domraider dr-header > header.header > dr-header-top-bar,
.domraider dr-home-header > header.header > dr-header-top-bar {
  width: 100%;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .mobile-menu > md-toolbar {
  padding: 3px 10px;
  background: #333333;
}

.domraider .mobile-menu > md-content > dr-search-sections {
  width: 100%;
}

.domraider .mobile-menu > md-content > md-list.close-list {
  width: 100%;
}

.domraider .mobile-menu > md-content > md-list.close-list > md-list-item > .md-button {
  text-transform: capitalize;
  border-radius: 0;
}

.domraider .mobile-menu > md-content > md-list.close-list > md-list-item > .md-button md-icon {
  margin-top: 0;
  margin-right: 8px;
  margin-bottom: 2px;
}

.domraider .mobile-menu > md-content > md-list.close-list > md-list-item > .md-button > .md-ripple-container {
  border-radius: 0;
}

/*doc
---
title: "Header simple"
name: header-simple
category: "Header"
---

- Directive : `dr-header-simple`

```html_example
<div style="background: #000;">
  <dr-header-simple></dr-header-simple>
</div>
```
*/

.domraider header.header-simple > .header-fill {
  width: 100%;
  height: 50px;
}

.domraider header.header-simple > .header-fill > dr-user-language {
  margin-top: 15px;
  margin-right: 30px;
}

.domraider header.header-simple > dr-logo {
  margin-top: 50px;
  opacity: 0.7;
}

/*doc
---
title: "Top bar"
name: header-top-bar
category: "Header"
---

- Directive : `dr-header-top-bar`
- Attributes :

``` html_example
<dr-header-top-bar></dr-header-top-bar>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-header-top-bar > .header-top-bar {
  background: #2e2447;
}

.domraider dr-header-top-bar > .header-top-bar > .header-top-bar-content {
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.domraider dr-header-top-bar > .header-top-bar > .header-top-bar-content a {
  color: #f5f5f5;
}

.domraider dr-header-top-bar > .header-top-bar > .header-top-bar-content .md-button {
  min-width: 0;
  padding: 0 10px 0 10px;
  margin-right: 0;
  margin-left: 0;
  font-size: 14px;
}

.domraider dr-header-top-bar > .header-top-bar > .header-top-bar-content .md-button > md-icon {
  color: #eb5e57;
}

/*doc
---
title: "Loading"
name: utilities-loading
category: "Utilities"
---

- Directive : `dr-loading`
- Attributes :
  - `type` (type de loader, circular ou linear)
  - `mode` (determinate ou inderminate)
  - `loading` (booléen qui permet de savoir si le loader est actif ou non)

```html_example
<dr-loading type="circular" mode="indeterminate"></dr-loading>
```

```html_example
<dr-loading type="linear" mode="determinate"></dr-loading>
```

*/

.domraider dr-loading {
  display: block;
}

.domraider dr-loading > .loading-dr.circular {
  width: 100px;
  height: 100px;
}

.domraider dr-loading > .loading-dr.linear {
  height: 6px;
}

.domraider dr-loading > .loading-dr.linear > md-progress-linear {
  height: 6px;
}

.domraider dr-loading > .loading-dr.linear > md-progress-linear > .md-container {
  height: 6px;
}

.domraider dr-loading > .loading-dr.linear > md-progress-linear > .md-container > .md-bar {
  height: 6px;
}

/*doc
---
title: "Demo block"
name: marketing-demo-block
category: "Marketing"
---

- Directive : `dr-marketing-demo-block`
- Attributes :
  - `src` (string: image src)
  - `name` (string: name)

```html_example
<dr-marketing-demo-block src="/img/demo/tsonga.jpg" name="Tsonga.fr"></dr-marketing-demo-block>
```
*/

.domraider .marketing-demo-block {
  position: relative;
  display: inline-block;
  width: 312px;
  height: 312px;
  overflow: hidden;
  cursor: pointer;
  outline: 0;
  transition: 250ms ease-in-out;
}

.domraider .marketing-demo-block:hover:before {
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333, Direction=90, Strength=15), progid:DXImageTransform.Microsoft.Shadow(color=#333333, Direction=180, Strength=15), progid:DXImageTransform.Microsoft.Shadow(color=#cccccc, Direction=180, Strength=12);
  -webkit-box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #cccccc;
     -moz-box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #cccccc;
       -o-box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #cccccc;
          box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #cccccc;
}

.domraider .marketing-demo-block:before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  content: "";
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#333333, Direction=90, Strength=15), progid:DXImageTransform.Microsoft.Shadow(color=#333333, Direction=180, Strength=15), progid:DXImageTransform.Microsoft.Shadow(color=#888888, Direction=180, Strength=12);
  -webkit-box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #888888;
     -moz-box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #888888;
       -o-box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #888888;
          box-shadow: inset 0 -15px 15px -15px #444444, inset 0 15px 15px -15px #444444, inset -15px 0 10px -16px #888888;
}

.domraider .marketing-demo-block > img {
  z-index: 1;
  height: 312px;
}

/*doc
---
title: "Demo carousel"
name: marketing-demo-carousel
category: "Marketing"
---

- Directive : `dr-marketing-demo-carousel`

```html_example
<dr-marketing-demo-carousel></dr-marketing-demo-carousel>
```
*/

.domraider .marketing-demo-carousel {
  position: relative;
  width: 100%;
  height: 312px;
  overflow: hidden;
  white-space: nowrap;
  background: #333;
}

.domraider .marketing-demo-carousel > .marketing-demo-carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 329px;
  overflow-x: scroll;
  overflow-y: hidden;
}

.domraider .marketing-demo-carousel > .marketing-demo-carousel-inner > dr-marketing-demo-block {
  position: relative;
  display: inline-block;
  width: 312px;
}

.domraider .marketing-demo-modal {
  max-width: 95%;
}

.domraider .marketing-demo-modal > .marketing-demo-modal-content > .demo-image-layout {
  max-width: 100%;
}

.domraider .marketing-demo-modal > .marketing-demo-modal-content > .demo-image-layout > img {
  width: 100%;
  height: auto;
}

/*doc
---
title: "Reinsurance"
name: marketing-reinsurance
category: "Marketing"
---

- Directive : `dr-marketing-reinsurance`

```html_example
<div style="background: #333">
  <dr-marketing-reinsurance></dr-marketing-reinsurance>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .marketing-reinsurance {
  width: 100%;
}

@media (max-width: 599px) {
  .domraider .marketing-reinsurance {
    margin-bottom: 1.8em;
  }
}

.domraider .marketing-reinsurance > .elem {
  max-width: 350px;
  padding: 0 10px;
  color: #fff;
}

@media (max-width: 599px) {
  .domraider .marketing-reinsurance > .elem {
    padding: 8px 10px;
  }
}

.domraider .marketing-reinsurance > .elem > md-whiteframe.icon-container {
  width: 90px;
  height: 90px;
  background: #455a64;
}

@media (max-width: 599px) {
  .domraider .marketing-reinsurance > .elem > md-whiteframe.icon-container {
    width: 45px;
    height: 45px;
  }
}

.domraider .marketing-reinsurance > .elem > .description {
  width: 170px;
  margin-top: 1.5em;
  font-size: 0.8em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 599px) {
  .domraider .marketing-reinsurance > .elem > .description {
    margin-top: 0;
    margin-left: 1em;
    text-align: left;
  }
}

@media (max-width: 959px) {
  .domraider .marketing-reinsurance > .elem > .description {
    width: 150px;
  }
}

/*doc
---
title: "Next step"
name: next-step
category: "Next-step"
---

- Directive : `dr-next-step`
- Attributes :
  - `label` (string, label to translate)
  - `icon` (string, name of icon to display)
  - `name` (string)
  - `type` (string, button type, submit, button, etc...)
  - `disabled` (boolean, double bound)

```html_example
<dr-next-step></dr-next-step>
```

```html_example
<dr-next-step label="yolo" icon="loop"></dr-next-step>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.next-step {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: visible;
  font-size: 1.1em;
  font-weight: 700;
  vertical-align: middle !important;
  border-top: 1px solid #eb5e57;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.26);
}

.domraider .md-button.next-step > .next-step-layout {
  height: 55px;
  padding: 8px 15px;
}

.domraider .md-button.next-step > .next-step-layout > .btn-content {
  width: 100%;
}

.domraider .md-button.next-step > .next-step-layout > .btn-content > md-icon {
  margin-left: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12);
}

.domraider .md-button.next-step:disabled {
  color: #9b9b9b !important;
  background: #f5f5f5 !important;
  border-top: 1px solid #9b9b9b;
}

.domraider .md-button.next-step:disabled:active {
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.26);
}

.domraider .md-button.next-step:active {
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.6);
}

.domraider .md-button.next-step.float {
  width: 100%;
}

.domraider .md-button.next-step.float > .next-step-layout > .btn-content {
  text-align: right;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Filters"
name: order-filters
category: "Order"
---

- Directive : `dr-order-filters`

```html_example
<dr-order-filters></dr-order-filters>
```
*/

.domraider dr-order-filters {
  margin-left: 20px;
}

.domraider dr-order-filters > .order-filters-layout md-checkbox {
  margin-top: 5px;
  margin-bottom: 5px;
}

/*doc
---
title: "List"
name: order-list
category: "Order"
---

- Directive : `dr-order-list`
- Attributes :
  - `orders` (collection de commandes)

```html_example
<dr-order-list orders="[
      {
        id: 'yolo',
        domain: {id: 'yolo.fr'},
        use: 'parking',
        amount: 499,
        available_at: '2004-05-08T01:33:05Z'
      },
      {
        id: 'yolo2',
        domain: {id: 'yolo2.fr'},
        use: 'dns',
        amount: 299,
        available_at: '2009-08-01T02:47:18Z'
      },
      {
        id: 'yolo3',
        domain: {id: 'yolo3.fr'},
        use: 'redirect',
        amount: 499,
        available_at: '2017-02-04T07:33:25Z'
      }
    ]"
    translate-key-no-results="No results"></dr-order-list>
```
*/

.domraider dr-order-list {
  margin-top: 10px !important;
}

.domraider .order-list-layout > .order-list dr-order-tile {
  width: 100%;
  height: 100%;
}

.domraider .order-list-layout > .order-list dr-order-tile-detail {
  width: 100%;
  height: 100%;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #order-parameters-config > dr-order-pending-operations {
  display: block;
  width: 100%;
}

.domraider #order-parameters-config > .config {
  display: block;
  margin-top: 20px;
}

.domraider #order-parameters-config > .config > .order-use-choice {
  margin-bottom: 12px;
}

.domraider #order-parameters-config > .config > .order-use-choice > md-radio-button {
  margin-right: 32px;
  margin-bottom: 15px;
}

.domraider #order-parameters-config > .config > .form-secondary {
  padding: 0 20px;
}

.domraider #order-parameters-config > .config > .form-secondary .redirect-fields {
  margin-bottom: 15px;
}

.domraider #order-parameters-config > .config > .form-secondary .redirect-fields > md-input-container {
  margin-bottom: 0;
}

.domraider #order-parameters-config > .config > .form-secondary .redirect-fields > md-input-container.child {
  width: 250px;
}

.domraider #order-parameters-config > .config > .form-secondary .redirect-fields > md-input-container .md-errors-spacer {
  min-height: 18px;
}

.domraider #order-parameters-config > .config > .form-secondary .parking-fields {
  margin-bottom: 30px;
}

.domraider #order-parameters-config > .config > .validate-button-layout {
  padding: 0;
  margin-top: 9px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #order-parameters-config-modal {
  width: 90%;
  max-width: 600px;
}

@media (max-width: 599px) {
  .domraider #order-parameters-config-modal {
    width: 100%;
  }
}

.domraider #order-parameters-config-modal > md-dialog-content {
  padding-right: 1.2em;
  padding-left: 1.7em;
  margin-top: 1.3em;
  margin-bottom: 0.9em;
  line-height: 1.5em;
  text-align: left;
}

.domraider #order-parameters-config-modal > md-dialog-actions {
  min-height: inherit;
  padding: 0;
}

.domraider #order-parameters-config-modal > md-dialog-actions > .bottom-bar {
  margin-top: 0;
  background: #2e2447;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "DNS Records disabled"
name: order-dns-records-disabled
category: "Order"
---

- Directive : `dr-order-parameters-dns-records-disabled`
- Attributes :
  - `order` (une commande)

```html_example
<dr-order-parameters-dns-records
  order="{use: 'dns', dns: {dns1: 'ns1.domraider.com', dns2: 'ns2.domraider.com'}}">
</dr-order-parameters-dns-records>
```

```html_example
<dr-order-parameters-dns-records
  order="{use: 'dns', dns: {dns1: 'ns1.bill.com', dns2: 'ns2.bill.com'}}">
</dr-order-parameters-dns-records>
```
*/

.domraider dr-order-parameters-dns-records-disabled {
  display: block;
  margin-top: -20px;
}

.domraider dr-order-parameters-dns-records-disabled .validate-button-layout {
  margin-top: 21px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "DNS Records"
name: order-dns-records
category: "Order"
---

- Directive : `dr-order-parameters-dns-records`
- Attributes :
  - `order` (une commande)

```html_example
<dr-order-parameters-dns-records
  order="{dns_records: [
    {id: 'yolo', type: 'a', name: 'yolo', value: '168.0.0.1', ttl: 'auto'},
    {id: 'yili', type: 'cname', name: 'yili', value: 'yili.com', ttl: 'auto'},
    {id: 'yulu', type: 'mx', name: 'yulu', value: 'yolo', mx: {priority: 5}, ttl: '5m'}
  ]}">
</dr-order-parameters-dns-records>
```
*/

.domraider dr-order-parameters-dns-records {
  display: block;
  margin-top: 20px;
  margin-bottom: 30px;
}

.domraider dr-order-parameters-dns-records #add-dns-record {
  margin: 0 0 10px 0;
}

.domraider dr-order-parameters-dns-records #add-dns-record md-input-container {
  margin: 18px 4px 0 4px;
}

.domraider dr-order-parameters-dns-records #add-dns-record md-input-container:first-child {
  margin-left: 0;
}

.domraider dr-order-parameters-dns-records #add-dns-record md-input-container:last-child {
  margin-right: 0;
}

.domraider dr-order-parameters-dns-records #add-dns-record md-input-container .type {
  text-transform: uppercase;
}

.domraider dr-order-parameters-dns-records #add-dns-record button.md-button {
  margin: 0 0 0 10px;
}

.domraider dr-order-parameters-dns-records #dns-records-list th.md-column,
.domraider dr-order-parameters-dns-records #dns-records-list-ns th.md-column {
  color: #ffffff;
  text-transform: uppercase;
}

.domraider dr-order-parameters-dns-records #dns-records-list thead tr,
.domraider dr-order-parameters-dns-records #dns-records-list-ns thead tr {
  height: 55px;
  background-color: #2e2447;
}

.domraider dr-order-parameters-dns-records #dns-records-list thead tr th,
.domraider dr-order-parameters-dns-records #dns-records-list-ns thead tr th {
  font-size: 0.9em;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr {
  height: 55px;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr.no-record,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr.no-record {
  font-style: italic;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr.gray,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr.gray {
  background-color: #f6f6f4;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr td,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr td {
  font-size: 0.9em;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr td strong,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr td strong {
  text-transform: uppercase;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr td.transaction-label p,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr td.transaction-label p {
  margin: 0;
}

.domraider dr-order-parameters-dns-records #dns-records-list tbody tr td.price,
.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr td.price {
  text-align: right;
}

.domraider dr-order-parameters-dns-records #dns-records-list-ns thead tr {
  background-color: #656071;
}

.domraider dr-order-parameters-dns-records #dns-records-list-ns tbody tr {
  height: 55px;
  font-style: italic;
  background-color: #ffffff !important;
}

.domraider dr-order-parameters-dns-records h3 {
  margin-top: 50px;
  margin-bottom: 15px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #order-parameters-dns-records-modal {
  width: 90%;
  max-width: 600px;
}

@media (max-width: 599px) {
  .domraider #order-parameters-dns-records-modal {
    width: 100%;
  }
}

.domraider #order-parameters-dns-records-modal > md-dialog-content {
  padding-right: 1.2em;
  padding-left: 1.7em;
  margin-top: 1.3em;
  margin-bottom: 0.9em;
  line-height: 1.5em;
  text-align: left;
}

.domraider #order-parameters-dns-records-modal > md-dialog-actions {
  min-height: inherit;
  padding: 0;
}

.domraider #order-parameters-dns-records-modal > md-dialog-actions > .bottom-bar {
  margin-top: 0;
  background: #2e2447;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

md-dialog.record-value md-toolbar h2 {
  color: #ffffff;
}

md-dialog.record-value > md-dialog-content {
  margin: 15px;
}

md-dialog.record-value > md-dialog-content md-input-container {
  margin: 12px 4px 0 4px;
}

md-dialog.record-value > md-dialog-content md-input-container:first-child {
  margin-left: 0;
}

md-dialog.record-value > md-dialog-content md-input-container:last-child {
  margin-right: 0;
}

md-dialog.record-value > md-dialog-content md-input-container .md-errors-spacer {
  min-height: 19px;
}

md-dialog.record-value > md-dialog-actions {
  min-height: inherit;
  padding: 0;
}

md-dialog.record-value > md-dialog-actions > .bottom-bar {
  margin-top: 0;
  background: #2e2447;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "DNS Servers"
name: order-dns-servers
category: "Order"
---

- Directive : `dr-order-parameters-dns-servers`
- Attributes :
  - `order` (une commande)

```html_example
<dr-order-parameters-dns-servers
  order="{dns: {
      dns1: 'ns1.domraider.com',
      dns2: 'ns2.domraider.com'
  }}">
</dr-order-parameters-dns-servers>
```

```html_example
<dr-order-parameters-dns-servers
  order="{dns: {
      dns1: 'ns1.domraider.com',
      dns2: 'ns2.domraider.com',
      dns3: 'ns3.domraider.com'
  }}">
</dr-order-parameters-dns-servers>
```

```html_example
<dr-order-parameters-dns-servers
  order="{}">
</dr-order-parameters-dns-servers>
```
*/

.domraider #order-parameters-dns-servers > dr-order-pending-operations {
  display: block;
  width: 100%;
}

.domraider #order-parameters-dns-servers > .config {
  display: block;
  margin-top: 20px;
}

.domraider #order-parameters-dns-servers > .config .dns-fields {
  margin-bottom: 15px;
}

.domraider #order-parameters-dns-servers > .config .dns-fields .dns-field > md-input-container {
  margin-bottom: 0;
}

.domraider #order-parameters-dns-servers > .config .dns-fields .dns-field > md-input-container.child {
  width: 250px;
}

.domraider #order-parameters-dns-servers > .config .dns-fields .dns-field > md-input-container .md-errors-spacer {
  min-height: 18px;
}

.domraider #order-parameters-dns-servers > .config > .validate-button-layout {
  padding: 0;
  margin-top: 9px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #order-parameters-dns-servers-modal {
  width: 90%;
  max-width: 600px;
}

@media (max-width: 599px) {
  .domraider #order-parameters-dns-servers-modal {
    width: 100%;
  }
}

.domraider #order-parameters-dns-servers-modal > md-dialog-content {
  padding-right: 1.2em;
  padding-left: 1.7em;
  margin-top: 1.3em;
  margin-bottom: 0.9em;
  line-height: 1.5em;
  text-align: left;
}

.domraider #order-parameters-dns-servers-modal > md-dialog-actions {
  min-height: inherit;
  padding: 0;
}

.domraider #order-parameters-dns-servers-modal > md-dialog-actions > .bottom-bar {
  margin-top: 0;
  background: #2e2447;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-parameters-informations .order-parameters-informations-data {
  margin-bottom: 20px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-parameters-terminate .terminate .terminate-action .label {
  margin-right: 12px;
}

.domraider dr-order-parameters-terminate .terminate .terminate-confirmation .label {
  margin-bottom: 15px;
  font-weight: 600;
}

.domraider dr-order-parameters-terminate .terminate .terminate-confirmation .buttons > .md-button:first-child {
  margin-left: 0;
}

.domraider dr-order-parameters-terminate .terminate .terminate-confirmation .buttons > .md-button:last-child {
  margin-right: 0;
}

.domraider dr-order-parameters-terminate .terminate .terminate-success {
  font-weight: 600;
  color: #558b2f;
}

.domraider #order-parameters-transfer > dr-order-pending-operations {
  display: block;
  width: 100%;
}

.domraider #order-parameters-transfer > .administration > .plan-update,
.domraider #order-parameters-transfer > .administration > .leave {
  width: 100%;
}

.domraider #order-parameters-transfer > .administration > .plan-update > .label,
.domraider #order-parameters-transfer > .administration > .leave > .label {
  margin-right: 12px;
  text-align: right;
}

.domraider #order-parameters-transfer > .administration > .plan-update > .disabled,
.domraider #order-parameters-transfer > .administration > .leave > .disabled {
  margin-right: 6px;
  text-align: right;
}

.domraider #order-parameters-transfer > .administration .transfer-date {
  font-weight: 800;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .order-detail {
  width: 90%;
  max-width: 800px;
}

@media (max-width: 599px) {
  .domraider .order-detail {
    width: 100%;
  }
}

.domraider .order-detail md-toolbar h2 {
  color: #ffffff;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > dr-order-pending-operations {
  display: block;
  width: 100%;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration {
  margin: 10px 25px;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration > .plan-update,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration > .leave {
  width: 100%;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration > .plan-update > .label,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration > .leave > .label {
  margin-right: 12px;
  text-align: right;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration > .plan-update > .disabled,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .administration > .leave > .disabled {
  margin-right: 6px;
  text-align: right;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config {
  display: block;
  margin-top: 10px;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .parking-radio,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .dns-radio,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .redirect-radio {
  margin-bottom: 15px;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .dns-fields,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .redirect-fields,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .parking-fields {
  margin-top: 20px;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .dns-fields > md-input-container,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .redirect-fields > md-input-container,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .parking-fields > md-input-container {
  margin: 0;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .dns-fields > md-input-container .md-errors-spacer,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .redirect-fields > md-input-container .md-errors-spacer,
.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .parking-fields > md-input-container .md-errors-spacer {
  min-height: 18px;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config .dns-fields {
  margin-bottom: 15px;
}

.domraider .order-detail > md-dialog-content > md-tabs md-content > .config md-input-container.child {
  width: 300px;
  margin-left: 30px;
}

.domraider .order-detail > md-dialog-actions {
  min-height: inherit;
  padding: 0;
}

.domraider .order-detail > md-dialog-actions > .bottom-bar {
  margin-top: 0;
  background: #2e2447;
}

.domraider .order-detail .error-message {
  color: #e55200;
}

.domraider .order-detail .transfer-date {
  font-weight: 800;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-pending-operations > .order-pending-operation {
  margin-bottom: 10px;
}

.domraider dr-order-pending-operations > .order-pending-operation md-progress-circular {
  margin-right: 8px;
}

.domraider dr-order-pending-operations > .order-pending-operation .pending-label {
  color: #8f9497;
}

/*doc
---
title: "Sort"
name: order-sort
category: "Order"
---

- Directive : `dr-order-sort`
- Attributes :
  - `currentSort` (sorting courant)
  - `sortCallback` (sort method to call when a new field is selected)

```html_example
<dr-order-sort></dr-order-sort>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-sort {
  margin-left: 22px;
}

.domraider dr-order-sort .sorting-bordered {
  padding: 4px 8px;
  border: 2px solid #2e2447;
  border-radius: 2px;
}

.domraider dr-order-sort .sorting-title {
  padding-right: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #2e2447;
  text-transform: uppercase;
}

.domraider dr-order-sort .sorting-criteria {
  font-size: 14px;
  font-weight: 800;
  line-height: 1em;
  color: #2e2447;
  text-transform: uppercase;
}

.domraider dr-order-sort .caret {
  margin-left: 8px;
  border-top: 6px solid #2e2447;
  border-right: 5px solid transparent;
  border-bottom: 0 dotted;
  border-left: 5px solid transparent;
}

.domraider dr-order-sort .md-button {
  padding: 0;
  margin: 0;
  text-transform: none;
}

.domraider dr-order-sort > .order-sort-menu > .md-button.menu-icon {
  padding: 2px;
}

.domraider md-menu-content.order-sort-content {
  overflow: scroll;
}

@media (min-height: 1000px) {
  .domraider md-menu-content.order-sort-content {
    max-height: 585px;
  }
}

.domraider md-menu-content.order-sort-content > md-menu-item > .md-button.order-sort.selected {
  background-color: #f5f5f5;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-tile-content > .order-tile-content {
  font-size: 13px;
}

/*doc
---
title: "Detail"
name: order-detail
category: "Order detail"
---

- Directive : `dr-order-tile-detail`
- Attributes :
  - `order` (une commande)
  - `offset` (la position de la tuile de départ)

```html_example
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .domain-detail-bubble > .domain-detail .order-detail-use > h2.use-label {
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 300;
  color: #ffffff;
}

.domraider .domain-detail-bubble > .domain-detail .order-detail-use > dr-order-use {
  margin-top: 4px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-tile-head .order-tile-header {
  margin-bottom: 5px;
  color: #fff;
}

.domraider dr-order-tile-head .order-tile-header > .order-tile-title > h3 {
  height: 23px;
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  color: #eb5e57;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Tiles"
name: order-tile
category: "Order"
---

- Directive : `dr-order-tile`
- Attributes :
  - `order` (order)

```html_example
<dr-order-tile order="{
    domain: {id: 'yolo.fr'},
    use: 'parking',
    amount: 499,
    available_at: '2004-05-08T01:33:05Z'}">
</dr-order-tile>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-tile .md-button.md-raised {
  box-shadow: none;
}

.domraider dr-order-tile > .order-tile {
  min-width: 250px;
  padding: 13px 15px 12px 15px;
  margin: 0;
  font-weight: normal;
  line-height: normal;
  text-align: left;
  text-transform: none;
}

.domraider dr-order-tile > .order-tile > .order-body > dr-order-use {
  margin-top: 4px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-order-use > .order-use-layout span {
  font-size: 13px;
  font-weight: 600;
  color: #eb5e57;
  text-transform: uppercase;
}

.domraider dr-order-use > .order-use-layout md-icon {
  margin: 0 2px 0 0;
  color: #eb5e57 !important;
}

.domraider dr-order-use > .order-use-layout.big span {
  font-size: 18px;
  font-weight: 900;
}

.domraider dr-order-use > .order-use-layout.light span {
  color: #ffffff;
}

.domraider dr-order-use > .order-use-layout.light md-icon {
  color: #ffffff !important;
}

/*doc
---
title: "Pager"
name: utility-pager
category: "Utilities"
---

- Directive : `dr-pager`
- Attributes :
  - `current` (integer)
  - `total` (integer)
  - `name` (string)

```html_example
<dr-pager current="2" total="12"></dr-pager>
```

```html_example
<dr-pager current="3" total="12"></dr-pager>
```

```html_example
<dr-pager current="1" total="12"></dr-pager>
```

```html_example
<dr-pager current="11" total="12"></dr-pager>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .pager > .navigate {
  width: 40px;
}

.domraider .pager > .positions {
  margin: 0 20px;
}

.domraider .pager .md-button {
  width: auto;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 24px;
}

.domraider .pager .md-button.manual {
  color: #545454;
  border-radius: 0;
}

.domraider .pager .md-button.manual:disabled {
  padding-right: 5px;
  padding-left: 5px;
  color: #ffffff !important;
  background-color: #5e5f61;
  border: 1px solid #4b4c4e;
}

.domraider .pager .md-button.previous,
.domraider .pager .md-button.next {
  font-weight: 600;
  color: #545454 !important;
}

.domraider #payment-form {
  margin-top: 20px;
}

.domraider #payment-form md-radio-button {
  margin-bottom: 30px;
  font-size: 1.2em;
}

.domraider #payment-form .radio-content {
  margin-bottom: 40px;
  margin-left: 40px;
}

.domraider #payment-form .cgv {
  margin-bottom: 0;
  font-size: 0.8em;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #paypal-form .cgv.error {
  color: #ffa09d;
}

.domraider #paypal .paypal-info {
  max-width: 300px;
  margin-bottom: 20px;
}

.domraider #paypal .paypal-info > div {
  margin-top: 0.4em;
}

.domraider #paypal .paypal-info > div .label::first-letter {
  text-transform: uppercase;
}

.domraider #paypal.action {
  margin: 0;
}

/*doc
---
title: "Stripe card"
name: user-stripe-card
category: "User"
---

- Directive : `dr-user-stripe-card`
- Attributes :
  - `user` (un utilisateur)
  - `need-card` (booléen)
  - `no-change` (booléen)

```html_example
<div ng-init="needCardFalse = false;"></div>
<dr-user-stripe-card need-card="needCardFalse" user="{
          email: 'user@fai.com'
      }">
</dr-user-stripe-card>
```

```html_example
<div ng-init="needCardTrue = true;"></div>
<dr-user-stripe-card need-card="needCardTrue" user="{
          email: 'user@fai.com',
          stripe: {
              card: {
                  brand: 'Visa',
                  last4: '9999',
                  expire_at: '2018-04-30T23:00:00.000+0100'
              },
              valid: true
          },
          contact: {
              firstname: 'Yolo'
          }
      }">
</dr-user-stripe-card>
```

```html_example
<div ng-init="needCardTrue = true;"></div>
<dr-user-stripe-card need-card="needCardTrue" no-change="true" user="{
          email: 'user@fai.com',
          stripe: {
              card: {
                  brand: 'Visa',
                  last4: '9999',
                  expire_at: '2018-04-30T23:00:00.000+0100'
              },
              valid: true
          },
          contact: {
              firstname: 'Yolo'
          }
      }">
</dr-user-stripe-card>
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #stripe-card-form .combined > md-input-container {
  margin-right: 6px;
  margin-left: 6px;
}

@media (max-width: 599px) {
  .domraider #stripe-card-form .combined > md-input-container {
    margin-right: 0;
    margin-left: 0;
  }
}

.domraider #stripe-card-form .combined > md-input-container:first-child {
  margin-left: 0;
}

.domraider #stripe-card-form .combined > md-input-container:last-child {
  margin-right: 0;
}

.domraider #stripe-card-form .combined .date-separator {
  margin: 28px 5px 0 5px;
  text-align: center;
}

.domraider #stripe-card-form .reduced {
  margin-bottom: 0;
}

.domraider #stripe-card-form .fields {
  max-width: 275px;
}

.domraider #stripe-card-form .cgv.error {
  color: #ffa09d;
}

.domraider #stripe-card .stripe-card-info {
  max-width: 300px;
  margin-bottom: 20px;
}

.domraider #stripe-card .stripe-card-info > div {
  margin-top: 0.4em;
}

.domraider #stripe-card .stripe-card-info > div .label::first-letter {
  text-transform: uppercase;
}

.domraider #stripe-card .action {
  margin: 0;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #sepa-conditions h1 {
  margin: 0;
  font-weight: 600;
  color: #ffffff;
}

.domraider #sepa-conditions md-dialog-content {
  padding: 20px 55px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #stripe-sepa-form .combined > md-input-container {
  margin-right: 6px;
  margin-left: 6px;
}

@media (max-width: 599px) {
  .domraider #stripe-sepa-form .combined > md-input-container {
    margin-right: 0;
    margin-left: 0;
  }
}

.domraider #stripe-sepa-form .combined > md-input-container:first-child {
  margin-left: 0;
}

.domraider #stripe-sepa-form .combined > md-input-container:last-child {
  margin-right: 0;
}

.domraider #stripe-sepa-form md-radio-button {
  font-size: 1em !important;
}

.domraider #stripe-sepa-form .reduced {
  margin-bottom: 0 !important;
}

.domraider #stripe-sepa-form .fields {
  max-width: 390px;
}

.domraider #stripe-sepa-form .fields md-radio-button .md-label::first-letter {
  text-transform: uppercase;
}

.domraider #stripe-sepa-form .cgv a {
  text-decoration: underline;
}

.domraider #stripe-sepa-form .cgv.error {
  color: #ffa09d;
}

.domraider #stripe-sepa-form .cgv.error a {
  color: #ffa09d;
}

.domraider #stripe-sepa .stripe-sepa-info {
  max-width: 360px;
  margin-bottom: 20px;
}

.domraider #stripe-sepa .stripe-sepa-info > div {
  margin-top: 0.4em;
}

.domraider #stripe-sepa .stripe-sepa-info > div .label::first-letter {
  text-transform: uppercase;
}

.domraider #stripe-sepa .action {
  margin: 0;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Preferences menu"
name: preferences-menu
category: "Preferences"
---

- Directive : `dr-preferences-menu`
- Attributes :

```html_example
  <dr-preferences-menu></dr-preferences-menu>
```
*/

.domraider #preferences-menu {
  margin-bottom: 10px;
}

.domraider #preferences-menu button {
  padding: 0;
}

.domraider #preferences-menu .caret-down {
  margin-left: 8px;
  border-top: 6px solid #34495e;
  border-right: 5px solid transparent;
  border-bottom: 0 dotted;
  border-left: 5px solid transparent;
}

.domraider #preferences-menu .caret-up {
  margin-left: 8px;
  border-top: 0 solid #34495e;
  border-right: 5px solid transparent;
  border-bottom: 6px dotted;
  border-left: 5px solid transparent;
}

.domraider #preferences-menu .caret-selected-grey {
  position: absolute;
  top: 45px;
  bottom: 0;
  z-index: 3;
  border-top: 0 solid #595d5f;
  border-right: 50px solid transparent;
  border-bottom: 50px dotted;
  border-left: 50px solid transparent;
}

.domraider #preferences-menu .caret-selected-white {
  position: absolute;
  top: 45px;
  bottom: 0;
  z-index: 2;
  border-top: 0 solid white;
  border-right: 48px solid transparent;
  border-bottom: 48px dotted;
  border-left: 48px solid transparent;
}

.domraider #preferences-menu #preferences-metrics-config {
  margin-right: 0;
  text-transform: none;
}

.domraider #preferences-menu #preferences-metrics-config .preferences-bordered {
  padding: 4px 8px;
  border: 2px solid #2e2447;
  border-radius: 2px;
}

.domraider #preferences-menu #preferences-metrics-config .metrics-config-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1em;
  color: #2e2447;
  text-transform: uppercase;
}

.domraider #preferences-menu #panel-preferences {
  position: relative;
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 30px;
  background: white;
  border-top: 8px solid #686c6f;
}

.domraider #preferences-menu #panel-preferences #panel-preferences-config {
  width: 100%;
}

.domraider #preferences-menu #panel-preferences #config-apply {
  width: 100%;
}

.domraider #preferences-menu #panel-preferences .show-hide {
  transition: all linear 1s;
}

.domraider #preferences-menu #panel-preferences .show-hide.ng-hide {
  opacity: 0;
}

.domraider #preferences-menu #panel-preferences .md-button.apply-btn {
  padding: 5px 50px 5px 50px;
  font-size: 20px;
}

.domraider #preferences-menu #panel-preferences .md-button.close-btn {
  position: absolute;
  top: 0;
  right: -5px;
}

.domraider #preferences-menu #panel-preferences .preferences-flag-container > .preferences-flag {
  position: relative;
  display: block;
  height: 20px;
  padding: 5px 15px 3px 5px;
  margin: 0;
  font-size: 1.1em;
  font-weight: normal;
  line-height: 18px;
  color: white;
  text-align: left;
  background-color: #686c6f;
}

.domraider #preferences-menu #panel-preferences .preferences-flag-container > .preferences-flag:first-letter {
  text-transform: uppercase;
}

.domraider #preferences-menu #panel-preferences .preferences-flag-container > .preferences-flag:after {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: 0;
  height: 0;
  margin-top: -14px;
  pointer-events: none;
  border: solid transparent;
  border-right-color: white;
  border-width: 14px;
  content: " ";
}

.domraider #preferences-menu #panel-preferences .preferences-panel-title {
  font-size: 50px;
  font-weight: 200;
  text-transform: uppercase;
}

.domraider #preferences-menu #panel-preferences .preferences-panel-img {
  width: 350px;
  height: auto;
}

.domraider #preferences-menu #panel-preferences .preferences-panel-column-extensions {
  width: 190px;
  margin-top: 30px;
  margin-right: 50px;
  font-size: 14px;
}

.domraider #preferences-menu #panel-preferences .extension-list {
  padding: 0 0 0 10px;
  margin-top: 20px;
}

.domraider #preferences-menu #panel-preferences .extension-list-element {
  width: 80px;
}

.domraider #preferences-menu #panel-preferences .preferences-panel-column-metrics {
  width: 480px;
  margin-top: 30px;
  font-size: 14px;
}

.domraider #preferences-menu #panel-preferences .metric-list {
  padding: 0 0 0 10px;
  margin-top: 20px;
}

.domraider #preferences-menu #panel-preferences .metric-list-element {
  width: 220px;
}

.domraider #preferences-menu #panel-preferences .metrics-max-selected {
  margin-top: 20px;
  color: #686c6f;
}

.domraider #preferences-menu #panel-preferences .tld-select-all {
  margin-top: 20px;
}

.domraider #preferences-menu #panel-preferences .tld-select-all > a {
  font-weight: 600;
  color: #eb5e57;
}

/*doc
---
title: "Sorting"
name: preferences-sorting
category: "Preferences"
---

- Directive : `dr-preferences-sorting`
- Attributes :
  - `user` (préférences utilisateur)

```html_example
<div ng-init="preferences = {
                                  preferences : {
                                    sorts : ['seo.archive.age', 'seo.majestic.domains', 'seo.rank', 'seo.majestic.citation'] }
                                }">
  <dr-preferences-sorting user="preferences"></dr-preferences-sorting>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-preferences-sort .sorting-bordered {
  padding: 4px 8px;
  border: 2px solid #2e2447;
  border-radius: 2px;
}

.domraider dr-preferences-sort .sorting-title {
  padding-right: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #2e2447;
  text-transform: uppercase;
}

.domraider dr-preferences-sort .sorting-criteria {
  font-size: 14px;
  font-weight: 800;
  line-height: 1em;
  color: #2e2447;
  text-transform: uppercase;
}

.domraider dr-preferences-sort .caret {
  margin-left: 8px;
  border-top: 6px solid #34495e;
  border-right: 5px solid transparent;
  border-bottom: 0 dotted;
  border-left: 5px solid transparent;
}

.domraider dr-preferences-sort .md-button {
  margin-left: 0;
  text-transform: none;
}

.domraider dr-preferences-sort > .preferences-sort-menu > .md-button.menu-icon {
  padding: 2px;
}

.domraider md-menu-content.preferences-sort-content {
  overflow: scroll;
}

@media (min-height: 1000px) {
  .domraider md-menu-content.preferences-sort-content {
    max-height: 585px;
  }
}

.domraider md-menu-content.preferences-sort-content > md-menu-item > .md-button.preferences-sort.selected {
  color: #fff;
  background-color: #8bc34a;
}

.domraider md-menu-content.preferences-sort-content > md-menu-item > .md-button md-icon {
  color: #2e2447;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #purchase-confirm h1 {
  margin: 0;
  font-weight: 600;
  color: #ffffff;
}

.domraider #purchase-confirm md-dialog-content {
  padding: 20px 55px;
}

.domraider #purchase-confirm md-dialog-content .purchase-confirm-content .baseline {
  font-size: 1.1em;
}

.domraider #purchase-confirm md-dialog-content .purchase-confirm-content .sub {
  font-size: 0.9em;
  text-align: right;
}

.domraider #purchase-confirm md-dialog-content .purchase-confirm-action {
  padding-top: 15px;
}

/*doc
---
title: "Header"
name: purchase-header
category: "Purchase"
---

- Directive : `dr-purchase-header`

```html_example
<dr-purchase-header></dr-purchase-header>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-purchase-header {
  width: 100%;
}

.domraider header.purchase-header {
  width: 100%;
  height: 50px;
  padding: 2px 15px;
  background-color: #2e2447;
}

.domraider header.purchase-header > .purchase-header-layout {
  width: 100%;
}

.domraider header.purchase-header > .purchase-header-layout > dr-logo {
  margin-top: 0;
  margin-left: 0;
}

/*doc
---
title: "Reinsurance"
name: purchase-reinsurance
category: "Purchase"
---

```html_example
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-purchase-reinsurance md-icon {
  width: 40px !important;
  height: 40px !important;
  padding: 6px;
  margin-right: 6px;
  font-size: 28px !important;
  color: #ffffff;
  background: #2e2447;
  border-radius: 50%;
}

.domraider dr-purchase-reinsurance h4 {
  margin: 0;
  line-height: 16px;
  color: #2e2447;
}

.domraider dr-purchase-reinsurance span {
  font-size: 0.8em;
  color: #eb5e57;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .advanced-search md-sidenav,
.domraider .advanced-search md-sidenav.md-locked-open,
.domraider .advanced-search md-sidenav.md-closed.md-locked-open-add-active {
  width: 85vw !important;
  max-width: 600px !important;
  min-width: 200px !important;
}

.domraider .advanced-search md-sidenav {
  background-color: #333333;
}

.domraider .advanced-search md-sidenav md-content {
  padding: 20px;
  color: #fff;
  background-color: transparent;
}

.domraider .advanced-search md-sidenav md-content h1 {
  margin: 0;
  font-size: 37px;
  font-weight: 400;
}

.domraider .advanced-search md-sidenav md-content h2 {
  margin: 85px 0 45px 0;
  font-size: 34px;
  font-weight: 400;
}

.domraider .advanced-search md-sidenav md-content .title {
  margin-top: 14px;
}

.domraider .advanced-search md-sidenav md-content .title md-icon {
  width: 68px;
  height: 68px;
  margin: 0;
  font-size: 68px;
}

.domraider .advanced-search md-sidenav md-content md-select {
  margin: 0;
}

.domraider .advanced-search md-sidenav md-content md-icon {
  color: #fff;
}

.domraider .advanced-search md-sidenav md-content md-select {
  width: 100%;
}

.domraider .advanced-search md-sidenav md-content md-select md-select-value {
  padding: 10px !important;
  color: #fff !important;
  border-top: solid 1px #8bc34a;
  border-bottom: solid 1px #8bc34a !important;
}

.domraider .advanced-search md-sidenav md-content md-select md-select-value .md-select-icon {
  color: #8bc34a;
}

.domraider .advanced-search md-sidenav md-content .price-slider,
.domraider .advanced-search md-sidenav md-content .majestic-slider,
.domraider .advanced-search md-sidenav md-content .ref-domains-slider,
.domraider .advanced-search md-sidenav md-content .backlinks-slider,
.domraider .advanced-search md-sidenav md-content .length-slider,
.domraider .advanced-search md-sidenav md-content .raiderrank-slider {
  width: 100%;
}

.domraider .advanced-search md-sidenav md-content .tld-filter md-checkbox {
  margin-top: 0;
  margin-right: 30px;
  margin-bottom: 0;
}

.domraider .advanced-search md-sidenav md-content .tld-filter md-checkbox.md-domraider-theme:not([disabled]).md-primary .md-icon {
  border-color: #b4b4b4;
}

.domraider .advanced-search md-sidenav md-content .tld-filter md-checkbox.md-domraider-theme:not([disabled]).md-primary .md-icon:after {
  border-color: #333333;
}

.domraider .advanced-search md-sidenav md-content .search-btn {
  width: 100%;
  margin: 110px 0 14px 0;
}

.domraider .advanced-search md-sidenav md-content .search-btn .md-button:disabled {
  background-color: #5c5c5c;
}

/*doc
---
title: "Menu"
name: menu
category: "Header"
---

## Sections

- Directive : `dr-menu`
- Attributes :
  - `sections` (collection of sections)
  - `current` (la section)

```html_example
<div style="background: #fff; padding: 10px;">
  <dr-menu sections="[
        {name: 'premium', url: '', translate_key_btn:'section'},
        {name: 'new', url: '', translate_key_btn:'section'},
        {name: 'juicy', url: '', translate_key_btn:'section'}
    ]" current="'premium'">
    </dr-menu>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menuBorderHover {
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ea5290), to(#eb5c37));
  background-image: -webkit-linear-gradient(left, #ea5290, #eb5c37);
  background-image: -moz-linear-gradient(left, #ea5290, #eb5c37);
  background-image: -o-linear-gradient(left, #ea5290, #eb5c37);
}

.menuBorderSelected {
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#eb5c37), to(#ea5290));
  background-image: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background-image: -moz-linear-gradient(left, #eb5c37, #ea5290);
  background-image: -o-linear-gradient(left, #eb5c37, #ea5290);
}

.domraider .categories-menu-content .active {
  background-color: #f5f5f5;
}

.domraider .categories-menu {
  min-height: 56px;
  background-color: white;
  border-bottom: 1px solid #ddd;
}

.domraider .categories-menu .categories-menu-button {
  position: relative;
  z-index: 100;
  height: 100%;
  padding: 10px 15px 11px 15px;
  margin: 0 25px;
  font-size: 1em;
  font-weight: 800;
  line-height: 34px;
  color: #2e2447;
  text-transform: initial;
  border-bottom: 0;
  border-radius: 0;
  outline: 0;
  -webkit-transition: background-image 10ms linear;
     -moz-transition: background-image 10ms linear;
      -ms-transition: background-image 10ms linear;
       -o-transition: background-image 10ms linear;
          transition: background-image 10ms linear;
  will-change: background-image;
}

.domraider .categories-menu .categories-menu-button.hover,
.domraider .categories-menu .categories-menu-button.selected {
  cursor: pointer;
  background: none;
}

.domraider .categories-menu .categories-menu-button.hover:after,
.domraider .categories-menu .categories-menu-button.selected:after {
  position: absolute;
  right: -3px;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
}

.domraider .categories-menu .categories-menu-button.hover:after {
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ea5290), to(#eb5c37));
  background-image: -webkit-linear-gradient(left, #ea5290, #eb5c37);
  background-image: -moz-linear-gradient(left, #ea5290, #eb5c37);
  background-image: -o-linear-gradient(left, #ea5290, #eb5c37);
}

.domraider .categories-menu .categories-menu-button.selected {
  border-color: #eb5c37;
}

.domraider .categories-menu .categories-menu-button.selected:after {
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#eb5c37), to(#ea5290));
  background-image: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background-image: -moz-linear-gradient(left, #eb5c37, #ea5290);
  background-image: -o-linear-gradient(left, #eb5c37, #ea5290);
}

.domraider .categories-menu .caret-down {
  margin-left: 8px;
  border-top: 6px solid #34495e;
  border-right: 5px solid transparent;
  border-bottom: 0 dotted;
  border-left: 5px solid transparent;
}

/*doc
---
title: "Field"
name: search-field
category: "Search"
---

- Directive : `dr-search-field`
- Attributes :
  - `placeholder` (string)
  - `section` (une section)
  - `category` (une catégorie)

```html_example
<div style="background: #444; padding: 10px;">
  <dr-search-field placeholder="Search" section="'auctions'" category="'all'"></dr-search-field>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .search-field-autocomplete li {
  height: 44px;
  padding-top: 8px;
  padding-bottom: 12px;
  color: #666666;
  border-bottom: 1px solid #f5f5f5;
}

.domraider .search-field-autocomplete li:hover {
  background: #f5f5f5;
}

.domraider .search-field-autocomplete li.selected {
  color: #ffffff;
  background: #eb5e57;
}

.domraider .search-field-autocomplete li.selected md-icon.md-primary {
  color: #ffffff;
}

.domraider .search-field-autocomplete li.selected .highlight {
  font-weight: 600;
  color: #ffffff;
}

.domraider .search-field-autocomplete li:last-child {
  border-bottom-width: 0;
}

.domraider .search-field-autocomplete li .item {
  height: 44px;
}

.domraider .search-field-autocomplete li .item > .value {
  font-size: 1.2em;
  line-height: 1.7;
}

.domraider .search-field-autocomplete li .item > .value > md-icon {
  margin: 0 6px 0 0;
}

.domraider .search-field-autocomplete li .item > .value .important {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}

.domraider .search-field-autocomplete li .item > .subtitle {
  font-size: 0.9em;
  line-height: 1.3;
}

.domraider .search-field-autocomplete li .item.generic > .value .title {
  text-transform: uppercase;
}

.domraider dr-search-field {
  width: 100%;
  margin-right: 20px;
}

.domraider dr-search-field md-autocomplete {
  width: 100%;
  height: 60px;
  background: transparent;
  border: 1px solid #ffffff;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.domraider dr-search-field md-autocomplete > md-autocomplete-wrap {
  height: 60px;
}

.domraider dr-search-field md-autocomplete > md-autocomplete-wrap > input {
  height: 60px;
  padding-top: 1px;
  font-size: 18px;
  line-height: 60px;
  color: #ffffff;
}

.domraider dr-search-field md-autocomplete md-progress-linear {
  height: 6px;
}

.domraider dr-search-field .md-button.search-btn {
  width: 70px;
  height: 60px;
  min-height: 60px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 0;
  line-height: 60px;
  border-radius: 0 2px 2px 0;
}

.domraider #results-title {
  padding: 0 0 15px 6px;
}

.domraider #results-title h3.results {
  margin: 0;
}

.domraider #results-title button {
  margin-right: 0;
}

/*doc
---
title: "Sections"
name: search-sections
category: "Search"
---

## Sections

- Directive : `dr-search-sections`
- Attributes :
  - `sections` (collection of sections)
  - `mode` (display mode : button, menu or grid)
  - `current` (la section)

```html_example
<div style="background: #fff; padding: 10px;">
  <dr-search-sections mode="button" sections="[
        {name: 'premium', url: '', translate_key_btn:'section'},
        {name: 'new', url: '', translate_key_btn:'section'},
        {name: 'juicy', url: '', translate_key_btn:'section'}
    ]" current="'premium'">
    </dr-search-sections>
</div>
```

```html_example
<div style="background: #fff;">
  <dr-search-sections mode="menu" sections="[
        {name: 'premium', url: '', translate_key_btn:'section'},
        {name: 'new', url: '', translate_key_btn:'section'},
        {name: 'juicy', url: '', translate_key_btn:'section'}
    ]" current="'juicy'">
    </dr-search-sections>
</div>
```

```html_example
<div style="background: #555; padding: 10px;">
  <dr-search-sections mode="grid" sections="[
        {name: 'premium', url: '', translate_key_btn:'section'},
        {name: 'new', url: '', translate_key_btn:'section'},
        {name: 'juicy', url: '', translate_key_btn:'section'}
    ]" current="'new'">
    </dr-search-sections>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .search-sections .md-button.section-btn {
  width: 100%;
  min-height: 40px;
  padding-right: 1em;
  padding-left: 1em;
  margin-right: 0;
  margin-left: 0;
  overflow: hidden;
  font-size: 1.1em;
  line-height: 40px;
  color: #ffffff;
  text-overflow: ellipsis;
  background: transparent;
  border: 1px solid #8bc34a;
}

@media (max-width: 1279px) {
  .domraider .search-sections .md-button.section-btn {
    padding-right: 0.5em;
    padding-left: 0.5em;
    font-size: 1em;
  }
}

@media (max-width: 959px) {
  .domraider .search-sections .md-button.section-btn {
    font-size: .9em;
  }
}

.domraider .search-sections > .sections-btn > .sections-btn-layout {
  min-width: 100px;
  margin: 0 8px;
}

.domraider .search-sections > .sections-btn > .sections-btn-layout:first-child {
  margin-left: 0;
}

.domraider .search-sections > .sections-btn > .sections-btn-layout:last-child {
  margin-right: 0;
}

@media (max-width: 599px) {
  .domraider .search-sections > .sections-btn > .sections-btn-layout {
    min-width: 140px;
  }
}

.domraider .search-sections > md-list.sections-menu > md-list-item.section-elmt > .md-button {
  border-radius: 0;
}

.domraider .search-sections > md-list.sections-menu > md-list-item.section-elmt > .md-button > .md-ripple-container {
  border-radius: 0;
}

.domraider .search-sections > md-grid-list.sections-grid > md-grid-tile.section-grid {
  min-width: 120px;
}

.domraider .search-sections > md-grid-list.sections-grid > md-grid-tile.section-grid .md-button.section-btn {
  width: 100%;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .slider .slider-legend {
  padding: 0;
  margin-bottom: 20px;
  font-size: 13px;
  text-align: center;
}

.domraider .slider .slider-body .slider-selector {
  padding: 0 14px;
}

.domraider .slider .slider-body .slider-selector input {
  width: 40px;
  padding: 2px;
  font-size: 13px;
  color: #5c5c5c;
  background-color: transparent;
  border: solid 1px #5c5c5c;
}

.domraider .slider .slider-body .slider-bar {
  height: 21px;
}

.domraider .slider .slider-body .jslider div.jslider-pointer {
  top: -8px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background-color: #8bc34a;
}

.domraider .slider .slider-body .jslider div.jslider-bg i {
  background-color: #8bc34a;
}

.domraider .slider .slider-body .jslider div.jslider-bg i.left,
.domraider .slider .slider-body .jslider div.jslider-bg i.right,
.domraider .slider .slider-body .jslider div.jslider-bg i.default {
  background-color: #5c5c5c;
}

.domraider .slider .slider-body .jslider div.jslider-bg i.default {
  background-color: transparent;
}

.domraider .slider .slider-body .jslider div.jslider-value {
  display: none;
}

/*doc
---
title: "Social bar"
name: utility-social-bar
category: "Utilities"
---

- Directive : `dr-social-bar`

```html_example
<dr-social-bar></dr-social-bar>
```
*/

.domraider .social-bar {
  height: 24px;
}

.domraider .social-bar .md-button {
  width: 24px;
  padding-right: 0;
  padding-left: 0;
  margin-right: 6px;
  margin-left: 6px;
  line-height: 24px;
  border-radius: 0;
  opacity: 0.3;
}

.domraider .social-bar .md-button:hover {
  opacity: 0.8;
}

/*doc
---
title: "Contacts"
name: user-contacts
category: "User"
---

- Directive : `dr-user-contacts`
- Attributes :
  - `contacts` (coordonnées user)
  - `form` (un formulaire)

```html_example
<dr-user-contacts
                  contacts="{
                              company : {name : '4X', intracommunity_vat : 'FR'},
                              firstname : 'John',
                              lastname : 'Doe',
                              address : {city : 'Clermont-Fd', zip : '63000'}
                           }"
                  form="">
</dr-user-contacts>
```
*/

.domraider #billing-form {
  display: block;
}

.domraider #billing-form .user-contacts > .user-contacts-content md-input-container {
  margin-bottom: 0;
}

.domraider #billing-form .user-contacts > .user-contacts-content md-input-container > md-select {
  margin-bottom: 24px;
}

.domraider #billing-form .user-contacts > .user-contacts-content .combined > md-input-container {
  margin-right: 6px;
  margin-left: 6px;
}

@media (max-width: 599px) {
  .domraider #billing-form .user-contacts > .user-contacts-content .combined > md-input-container {
    margin-right: 0;
    margin-left: 0;
  }
}

.domraider #billing-form .user-contacts > .user-contacts-content .combined > md-input-container:first-child {
  margin-left: 0;
}

.domraider #billing-form .user-contacts > .user-contacts-content .combined > md-input-container:last-child {
  margin-right: 0;
}

.domraider #billing-form .billing-form-submit {
  margin-top: 10px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Alert item"
name: dashboard-alert-item
category: "Dashboard"
---

- Directive : `dr-user-dashboard-alert-item`
- Attributes :
  - `alert` (une alerte)

```html_example
<dr-user-dashboard-alert-item alert="{term: 'search', extensions: ['be', 'de', 'com'], category: 'catégorie'}"></dr-user-dashboard-alert-item>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .alert-item {
  width: 600px;
  height: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.domraider .alert-item .alert-count {
  width: 90px;
  padding-right: 30px;
}

.domraider .alert-item .alert-count .alert-item-last-count {
  width: 48px;
  height: 48px;
  font-weight: 400;
  color: #fff;
  background: #eb5e57;
  border-radius: 50%;
}

.domraider .alert-item .alert-details {
  width: 350px;
}

.domraider .alert-item .alert-details .alert-item-title {
  font-size: 1.4em;
  font-weight: 600;
}

.domraider .alert-item .alert-details .alert-item-extensions,
.domraider .alert-item .alert-details .alert-item-category {
  font-size: 1em;
  font-weight: 400;
}

.domraider .alert-item .alert-actions .alert-item-enable {
  width: 65px;
  padding-right: 20px;
}

.domraider .alert-item .alert-actions .alert-item-enable .alert-checkbox {
  width: 20px;
  margin: 0 10px;
}

.domraider .alert-item .alert-actions .alert-item-delete {
  width: 75px;
}

.domraider .alert-item .alert-actions .alert-item-delete .md-button {
  margin: 0;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Alerts"
name: dashboard-alerts
category: "Dashboard"
---

- Directive : `dr-user-dashboard-alerts`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-alerts user=""></dr-user-dashboard-alerts>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.user-dashboard-alerts {
  color: #ffffff;
}

.domraider .md-button.user-dashboard-alerts > .alerts-layout > h1 {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.user-dashboard-alerts > .alerts-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  text-align: left;
  text-transform: none;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button > .auctions-layout > h1 {
  font-weight: bold;
  color: #f5f5f5;
}

.domraider .md-button > .auctions-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button > .backorders-layout > h1 {
  font-weight: bold;
  color: #f5f5f5;
}

.domraider .md-button > .backorders-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

/*doc
---
title: "Balance"
name: dashboard-balance
category: "Dashboard"
---

- Directive : `dr-user-dashboard-balance`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-balance user="{wallet : 50}"></dr-user-dashboard-balance>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.user-dashboard-balance > .balance-layout > h1 {
  font-weight: bold;
  color: #f5f5f5;
  text-transform: none !important;
}

.domraider .md-button.user-dashboard-balance > .balance-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .dashboard-block {
  width: 100%;
  height: 100%;
  margin: 0;
}

.domraider .dashboard-block input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */

  color: #9b9b9b;
}

.domraider .dashboard-block input::-moz-placeholder {
  /* Firefox 19+ */

  color: #9b9b9b;
}

.domraider .dashboard-block input:-ms-input-placeholder {
  /* IE 10+ */

  color: #9b9b9b;
}

.domraider .dashboard-block input:-moz-placeholder {
  /* Firefox 18- */

  color: #9b9b9b;
}

.domraider .dashboard-block.md-button {
  font-size: 16px;
  text-transform: none;
}

.domraider .dashboard-block > .dashboard-layout {
  width: 100%;
  height: 100%;
}

.domraider .dashboard-block > .dashboard-layout > h1 {
  width: 100%;
  padding: 0.5em 0.3em 0 0.3em;
  margin: 0;
  font-size: 1.3em;
  line-height: 1.3em;
  text-align: left;
}

/*doc
---
title: "Contacts"
name: dashboard-contacts
category: "Dashboard"
---

- Directive : `dr-user-dashboard-contacts`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-contacts user="{contact:{
                              firstname : 'John',
                              lastname : 'Doe',
                              address : {street: 'La Pardieu', city : 'Clermont-Fd', zip : '63000'}
                           }}"></dr-user-dashboard-contacts>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.user-dashboard-contacts {
  color: #fff;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > a.gravatar-link {
  height: 105px;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > a.gravatar-link:hover > img.gravatar-img {
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#eb5e57, Direction=134, Strength=3);
  -webkit-box-shadow: 2px 2px 3px 0 #eb5e57;
     -moz-box-shadow: 2px 2px 3px 0 #eb5e57;
       -o-box-shadow: 2px 2px 3px 0 #eb5e57;
          box-shadow: 2px 2px 3px 0 #eb5e57;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > a.gravatar-link > img.gravatar-img {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #eb5e57;
  border-radius: 50%;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .name {
  font-size: 1.25em;
  font-weight: bold;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .name > .firstname,
.domraider .md-button.user-dashboard-contacts > .contacts-layout > .name > .email {
  text-transform: none;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .name > .lastname {
  text-transform: uppercase;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .address {
  width: 100%;
  padding: 0 10%;
  font-size: 0.95em;
  text-transform: none;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .address .contact-element {
  width: 100%;
  overflow: hidden;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .address .contact-element .label {
  font-weight: 600;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .address .contact-element .label:first-letter {
  text-transform: uppercase;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .address .contact-element .value {
  padding-left: 1em;
}

.domraider .md-button.user-dashboard-contacts > .contacts-layout > .address .contact-element .value:first-letter {
  text-transform: uppercase;
}

/*doc
---
title: "Credentials"
name: dashboard-credentials
category: "Dashboard"
---

- Directive : `dr-user-dashboard-credentials`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-credentials user="{email : 'kb@domraider.com'}"></dr-user-dashboard-contacts>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.user-dashboard-credentials {
  color: #ffffff;
}

.domraider .md-button.user-dashboard-credentials > .credentials-layout > h1 {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button.user-dashboard-credentials > .credentials-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  text-align: left;
  text-transform: none;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .user-dashboard-credentials-modal {
  width: 90%;
  max-width: 800px;
}

@media (max-width: 599px) {
  .domraider .user-dashboard-credentials-modal {
    width: 100%;
  }
}

.domraider .user-dashboard-credentials-modal md-toolbar h2 {
  color: #ffffff;
}

.domraider .user-dashboard-credentials-modal > md-dialog-content > md-tabs md-content > form {
  margin-top: 10px;
}

.domraider .user-dashboard-credentials-modal > md-dialog-content > md-tabs md-content > form > md-input-container {
  width: 280px;
  margin-bottom: 0;
}

.domraider .user-dashboard-credentials-modal > md-dialog-actions {
  min-height: inherit;
  padding: 0;
}

.domraider .user-dashboard-credentials-modal > md-dialog-actions > .bottom-bar {
  margin-top: 0;
  background: #2e2447;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Newsletter"
name: dashboard-newsletter
category: "Dashboard"
---

- Directive : `dr-user-dashboard-newsletter`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-newsletter user="{email : 'kb@domraider.com'}"></dr-user-dashboard-newsletter>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .user-dashboard-newsletter {
  color: #f5f5f5;
  background-color: #2e2447;
  border-radius: 2px;
  box-sizing: border-box;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > h1 {
  margin-left: 70px;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content > form {
  margin: 35px;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content > form > md-input-container {
  margin: 0;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content > form > md-input-container > input {
  color: rgba(255, 255, 255, 0.87);
  border-color: rgba(255, 255, 255, 0.87);
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content > form > md-input-container > div[role='alert'] > div > span {
  color: #fff;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content > form > .md-button {
  margin-bottom: 24px;
}

.domraider .user-dashboard-newsletter > .newsletter-layout > .content > form > .md-button > md-icon {
  color: rgba(255, 255, 255, 0.87);
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .md-button > .orders-layout > h1 {
  font-weight: bold;
  color: #f5f5f5;
}

.domraider .md-button > .orders-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Payment"
name: dashboard-payment
category: "Dashboard"
---

- Directive : `dr-user-dashboard-payment`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-payment user="{stripe : {valid : true}}"></dr-user-dashboard-payment>
```

```html_example
<dr-user-dashboard-payment user="{stripe : {valid : false}}"></dr-user-dashboard-payment>
```
*/

.domraider .user-dashboard-payment {
  color: #f5f5f5;
}

.domraider .user-dashboard-payment > .payment-layout > h1 {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .user-dashboard-payment > .payment-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

.domraider .user-dashboard-payment > .payment-layout > .content > .type {
  font-weight: 600;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Newsletter"
name: dashboard-voucher
category: "Dashboard"
---

- Directive : `dr-user-dashboard-voucher`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-voucher></dr-user-dashboard-voucher>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .user-dashboard-voucher {
  color: #f5f5f5;
  background-color: #2e2447;
  border-radius: 2px;
  box-sizing: border-box;
}

.domraider .user-dashboard-voucher > .voucher-layout > h1 {
  margin-left: 70px;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .user-dashboard-voucher > .voucher-layout > .content {
  width: 100%;
  padding-left: 0.5em;
  margin-bottom: 0.8em;
  font-size: 0.95em;
  line-height: 1.5em;
  color: #ffffff;
  text-align: left;
  text-transform: none;
}

.domraider .user-dashboard-voucher > .voucher-layout > .content > form {
  margin: 35px;
}

.domraider .user-dashboard-voucher > .voucher-layout > .content > form > md-input-container {
  margin: 0;
}

.domraider .user-dashboard-voucher > .voucher-layout > .content > form > md-input-container > input {
  color: rgba(255, 255, 255, 0.87);
  border-color: rgba(255, 255, 255, 0.87);
}

.domraider .user-dashboard-voucher > .voucher-layout > .content > form > md-input-container > div[role='alert'] > div > span {
  color: #fff;
}

.domraider .user-dashboard-voucher > .voucher-layout > .content > form > .md-button {
  margin-bottom: 24px;
}

.domraider .user-dashboard-voucher > .voucher-layout > .content > form > .md-button > md-icon {
  color: rgba(255, 255, 255, 0.87);
}

/*doc
---
title: "Login"
name: user-login
category: "User"
---

- Directive : `dr-user-login`

```html_example
<dr-user-login></dr-user-login>
```

*/

.domraider .user-login-btns > .main-login-container > .md-button.main-login {
  margin-top: 1em;
  color: #fff;
  text-transform: none;
}

/*doc
---
title: "Menu"
name: user-menu
category: "User"
---

- Directive : `dr-user-menu`
- Attributes :
 - `user` (un utilisateur)

```html_example
<div style="background: #333">
  <dr-user-menu user="{
          email: 'user@fai.com'
      }">
  </dr-user-menu>
</div>
```

```html_example
<div style="background: #333">
  <dr-user-menu user="{
          email: 'user@fai.com',
          contact: {
              firstname: 'User',
              lastname: 'Someone'
          }
      }">
  </dr-user-menu>
</div>
```

```html_example
<div style="background: #333">
  <dr-user-menu user="">
  </dr-user-menu>
</div>
```
*/

.domraider .user-menu {
  display: block;
  padding: 0;
  color: #fff;
}

.domraider .user-menu.links {
  margin: 0 8px;
}

.domraider .user-menu > .md-button {
  margin-top: 0;
  margin-bottom: 0;
  text-transform: none;
}

.domraider .user-menu > .md-button img.gravatar-img {
  display: inline-block;
  margin: 5px 10px 5px 0;
  vertical-align: middle;
  border-radius: 50%;
}

.domraider .user-menu > .md-button .name {
  text-align: left;
}

.domraider .user-menu > .md-button .name > div {
  height: 20px;
  line-height: 20px;
}

.domraider .user-menu > .md-button .caret {
  margin: 0 0 0 8px;
  border-top: 4px solid #fff;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
}

.domraider .user-menu-content a {
  line-height: 46px;
}

/*doc
---
title: "Social login"
name: user-social-login
category: "User"
---

- Directive : `dr-user-social-login`
- Attributes :
  - `layout` (class)

```html_example
<dr-user-social-login></dr-user-social-login>
```

```html_example
<dr-user-social-login layout="column"></dr-user-social-login>
```
*/

.domraider .social-login.layout-column > .md-button {
  width: 100%;
}

@media (max-width: 599px) {
  .domraider .social-login > .md-button {
    width: 100%;
  }
}

/*doc
---
title: "Wishlist Button"
name: wishlist-button
category: "Domain"

---

- Directive : `dr-wishlist-button`
- Attributes :
  - `domain` (un domaine)
  - `css` (classe css)

```html_example
<div ng-init="wishlistDomain={wishlist:true}" style="background:black;">
  <dr-wishlist-button css="md-16" domain="wishlistDomain"></dr-wishlist-button>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-wishlist-button md-icon {
  color: #ffffff;
}

.domraider dr-wishlist-button md-icon.sale-domain,
.domraider dr-wishlist-button md-icon.backorder-domain {
  color: #2e2447;
}

.domraider dr-wishlist-button md-icon.auction-domain {
  color: #ffffff;
}

/*doc
---
title: "Wishlist Menu"
name: wishlist-menu
category: "Domain"
---

- Directive : `dr-wishlist-menu`
- Attributes :
  - `count` (compteur)

```html_example
<dr-wishlist-menu count="22"></dr-wishlist-menu>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider dr-wishlist-menu {
  position: relative;
  display: block;
  width: 54px;
}

.domraider dr-wishlist-menu .md-fab md-icon {
  color: #eb5e57 !important;
}

.domraider dr-wishlist-menu .badge {
  position: absolute;
  top: -8px;
  right: -20px;
  z-index: 29;
  width: 32px;
  height: 32px;
  font-size: 16px;
  line-height: 30px;
  color: white;
  text-align: center;
  background-color: #eb5e57;
  border-radius: 50%;
}

/*doc
---
title: "Wordcloud"
name: domain-wordcloud
category: "Wordcloud"
---

- Directive : `dr-wordcloud`
- Attributes :
  - `width` (hauteur)
  - `height` (largeur)
  - `font-family`
  - `font-size`
  - `words` (mots-clés avec poids)
  - `on-click` (funciton)
  - `on-hover` (function)

```html_example
<div ng-init='words=[{"text":"coreen","occurs":11},{"text":"coreenne","occurs":9},{"text":"ampli","occurs":7},{"text":"coree","occurs":5},{"text":"caracteres","occurs":5},{"text":"mobiles","occurs":5},{"text":"culture","occurs":5},{"text":"linvention","occurs":5},{"text":"dimprimerie","occurs":5},{"text":"lissage","occurs":4},{"text":"titre","occurs":4},{"text":"fender","occurs":4},{"text":"revue","occurs":4},{"text":"guitare","occurs":4},{"text":"table","occurs":3},{"text":"japonais","occurs":3},{"text":"cinema","occurs":3},{"text":"france","occurs":3},{"text":"telecharger","occurs":2},{"text":"traduction","occurs":2},{"text":"basse","occurs":2},{"text":"pdf","occurs":2},{"text":"botox","occurs":2},{"text":"jazzmaster","occurs":2},{"text":"arts","occurs":2},{"text":"neuilly","occurs":2},{"text":"escalier","occurs":2},{"text":"squier","occurs":2},{"text":"garen","occurs":2},{"text":1965,"occurs":2},{"text":"princeton","occurs":2},{"text":"copie","occurs":2},{"text":"culturecoreenne","occurs":2},{"text":"tarif","occurs":2},{"text":"coreens","occurs":2},{"text":"made","occurs":2},{"text":"samick","occurs":2},{"text":"vox","occurs":2},{"text":"ancienne","occurs":2},{"text":"gratuit","occurs":1},{"text":"histoires","occurs":1},{"text":"descargar","occurs":1},{"text":"traditions","occurs":1},{"text":"roman","occurs":1},{"text":"fichier","occurs":1},{"text":"contemporain","occurs":1},{"text":"dragons","occurs":1},{"text":"prix","occurs":1},{"text":"lart","occurs":1},{"text":"metal","occurs":1},{"text":"gibson","occurs":1},{"text":"contrebasse","occurs":1},{"text":"guild","occurs":1},{"text":"sheraton","occurs":1},{"text":"epiphone","occurs":1},{"text":"seine","occurs":1},{"text":"paris","occurs":1},{"text":"ac4","occurs":1},{"text":"meuble","occurs":1},{"text":"japan","occurs":1},{"text":"electrique","occurs":1},{"text":"litterature","occurs":1},{"text":"korean","occurs":1},{"text":"armoire","occurs":1},{"text":"reims","occurs":1},{"text":"burny","occurs":1},{"text":"articles","occurs":1},{"text":"auto","occurs":1},{"text":"50th","occurs":1},{"text":"korea","occurs":1},{"text":"sud","occurs":1},{"text":"vietcongs","occurs":1},{"text":"tasses","occurs":1},{"text":"amplis","occurs":1},{"text":"www","occurs":1},{"text":"porcelaines","occurs":1},{"text":"decorees","occurs":1},{"text":1967,"occurs":1},{"text":"neuf","occurs":1},{"text":"auteur","occurs":1},{"text":"date","occurs":1},{"text":"toute","occurs":1},{"text":"vitalite","occurs":1},{"text":"une","occurs":1},{"text":"epreuve","occurs":1},{"text":"theatre","occurs":1},{"text":"edition","occurs":1},{"text":"surtitrage","occurs":1},{"text":"metrage","occurs":1},{"text":"court","occurs":1},{"text":"adulte","occurs":1},{"text":"lage","occurs":1},{"text":"annees","occurs":1},{"text":"ans","occurs":1},{"text":"femme","occurs":1},{"text":"actuelle","occurs":1},{"text":"societe","occurs":1},{"text":"levolution","occurs":1}]'></div>
<dr-wordcloud words="words" width="600" height="250" searched="'super'"></dr-wordcloud>
```

```html_example
<div ng-init='words=[{"text":"coreen","occurs":1},{"text":"coreenne","occurs":1},{"text":"ampli","occurs":1},{"text":"coree","occurs":1},{"text":"caracteres","occurs":1},{"text":"mobiles","occurs":1},{"text":"culture","occurs":1},{"text":"linvention","occurs":1},{"text":"dimprimerie","occurs":1},{"text":"lissage","occurs":1},{"text":"titre","occurs":1},{"text":"fender","occurs":1},{"text":"revue","occurs":1},{"text":"guitare","occurs":1},{"text":"table","occurs":1},{"text":"japonais","occurs":1},{"text":"cinema","occurs":1},{"text":"france","occurs":1},{"text":"telecharger","occurs":1},{"text":"traduction","occurs":1},{"text":"basse","occurs":1},{"text":"pdf","occurs":1}]'></div>
<dr-wordcloud words="words" width="400" height="250" searched="'super'"></dr-wordcloud>
```

*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .searched-term {
  color: black !important;
  background: yellow !important;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #home-static-mobile {
  height: 100%;
  background-color: #f2f2f2;
}

.domraider #home-static-mobile a {
  color: #eb5e57 !important;
}

.domraider #home-static-mobile #home-static-mobile-content .mobile-text-small {
  margin-top: 50px;
  font-size: 4.3vw;
  font-weight: 400;
}

.domraider #home-static-mobile #home-static-mobile-content .mobile-text-big {
  font-size: 11.6vw;
  font-weight: 600;
}

.domraider #home-static-mobile #home-static-mobile-content .mobile-blog-link {
  margin-top: 10%;
  margin-bottom: 50px;
  font-size: 4.8vw;
  font-weight: 600;
  text-decoration: underline;
}

.domraider #home-static-mobile #home-static-mobile-content .mobile-mockups img {
  width: 100%;
  object-fit: cover;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #account-init-template {
  height: auto !important;
}

.domraider #account-init-template #account-init-body {
  position: relative;
  background: #ffffff;
}

.domraider #account-init-template #account-init-body #account-init-global {
  padding: 40px 40px;
  margin: 50px 0;
  background: #f5f5f5;
  border-radius: 20px;
}

.domraider #account-init-template #account-init-body #account-init-global h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.65em;
  font-weight: 700;
  text-align: center;
}

.domraider #account-init-template #account-init-body #account-init-global h2 {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: 700;
}

.domraider #account-init-template #account-init-body > .loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
}

.domraider #account-init-template #account-init-body > .loader > dr-loading {
  margin-top: 20%;
}

.domraider #account-init-template .account-init-footer {
  bottom: 0;
  height: 12px;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider #authentication-page {
  height: auto;
}

.domraider #authentication-page::before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('http://www.scmagazine.cz/img/home/bg-signup.jpg') no-repeat center center;
  background-color: white;
  background-size: cover;
  content: ' ';
  will-change: transform;
}

.domraider #authentication-page > .content-login-layout {
  z-index: 1;
  margin-top: 6%;
}

@media (max-width: 599px) {
  .domraider #authentication-page > .content-login-layout {
    margin-top: 20px;
  }
}

.domraider #authentication-page > .content-login-layout > .content-login {
  width: 100%;
  max-width: 400px;
  margin: 15px;
}

.domraider #full .dashboard-back-btn md-icon {
  margin-right: 6px;
}

.domraider #full .dashboard-back-btn.hidden {
  display: none;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #full {
  height: auto !important;
}

.domraider #full > dr-header,
.domraider #full dr-footer {
  width: 100%;
}

.domraider #full > #full-body {
  position: relative;
  width: 100%;
}

.domraider #full > #full-body > .loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
}

.domraider #full > #full-body > .loader > dr-loading {
  margin-top: 8%;
}

.domraider #full > #full-body > #full-dynamic-content > md-content {
  width: 100%;
}

.domraider #full #sections-menu {
  width: 100%;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .legal-layout md-content {
  position: relative;
  width: 100%;
  overflow: visible;
}

.domraider .legal-layout .legal-contact a {
  color: #eb5c37 !important;
  text-decoration: underline !important;
}

.domraider #loading-page {
  background: url('http://www.scmagazine.cz/img/home/bg-global.jpg') no-repeat center center;
  background-color: white;
  background-size: cover;
}

.domraider #loading-page > .loader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.domraider #loading-page > .loader > dr-logo {
  position: absolute;
  top: 5%;
}

.domraider #loading-page > .loader > .loading-dr {
  position: absolute;
  top: 35%;
}

.domraider #account-init-billing .account-init-billing-body {
  width: 70%;
}

.domraider #account-init-billing .account-init-billing-body > dr-breadcrumb {
  margin: 30px 0 20px 0;
}

.domraider #account-init-billing dr-purchase-reinsurance {
  display: block;
  margin-top: 60px;
}

.domraider #account-init-payment .account-init-payment-body {
  width: 70%;
}

.domraider #account-init-payment .account-init-payment-body > dr-breadcrumb {
  margin: 30px 0 20px 0;
}

.domraider #account-init-payment > dr-purchase-reinsurance {
  display: block;
  margin-top: 60px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #account-init-success .account-init-success-body {
  width: 70%;
}

.domraider #account-init-success .account-init-success-body .congrats-layout {
  margin-top: 20px;
  margin-bottom: 40px;
}

.domraider #account-init-success .account-init-success-body .congrats-layout img.congrats {
  width: 280px;
  border-radius: 50%;
}

.domraider #account-init-success .account-init-success-body .reinsurance-layout {
  font-size: 1.1em;
}

.domraider #account-init-success .account-init-success-body .reinsurance-layout > span,
.domraider #account-init-success .account-init-success-body .reinsurance-layout div {
  margin-bottom: 20px;
}

.domraider #account-init-success .account-init-success-body .reinsurance-layout > span > md-icon,
.domraider #account-init-success .account-init-success-body .reinsurance-layout div > md-icon {
  width: 40px !important;
  height: 40px !important;
  padding: 7px;
  margin-right: 6px;
  font-size: 26px !important;
  color: #ffffff;
  background: #2e2447;
  border-radius: 50%;
}

.domraider #account-init-success .success-continue {
  margin-top: 20px;
}

.domraider #account-init-success > dr-purchase-reinsurance {
  display: block;
  margin-top: 60px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider md-menu-item a,
.domraider md-menu-item .md-button {
  color: #2e2447;
}

.domraider md-tooltip:not(.domain-tooltip) .md-content {
  color: #f5f5f5;
}

.domraider .md-autocomplete-suggestions li.selected {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider .md-autocomplete-suggestions span.highlight {
  color: #595d5f;
}



.domraider #auctions-list .appstore-img {
  width: auto;
  height: 30px;
  margin-right: 10px;
}

.domraider #backorders-list .result-bottom > .download-btn-layout > .md-button.download-btn {
  margin: 0;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Alerts"
name: dashboard-alert-list
category: "Dashboard"
---

- Directive : `dr-user-dashboard-alert-list`
- Attributes :
  - `user` (un utilisateur)

```html_example
<dr-user-dashboard-alerts user=""></dr-user-dashboard-alerts>
```
*/

.domraider #dashboard-alerts {
  width: 600px;
}

.domraider #dashboard-alerts #alert-list {
  width: 100%;
}

.domraider #dashboard-alerts #alert-list .alert-list-item {
  width: 100%;
  padding: 0;
}

.domraider #dashboard-alerts #alert-list-header {
  margin-top: 20px;
  font-weight: 600;
}

.domraider #dashboard-alerts #alert-list-header .alert-list-header-domains {
  width: 90px;
}

.domraider #dashboard-alerts #alert-list-header .alert-list-header-alert {
  width: 350px;
}

.domraider #dashboard-alerts #alert-list-header .alert-list-header-enabled {
  width: 65px;
}

.domraider #dashboard-alerts #alert-list-header .alert-list-header-delete {
  width: 75px;
}

.domraider #dashboard-alerts #alerts-title-count {
  margin-left: 10px;
  font-size: 30px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-backorders-batch .backorders-batch-text {
  font-weight: 800;
}

.domraider #dashboard-backorders-batch #backorder-list {
  width: 800px;
  margin-top: 20px;
  margin-bottom: 40px;
  resize: none;
}

.domraider #dashboard-backorders-batch .btn-submit-list {
  width: 806px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-balance > .search-field {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 18px;
}

.domraider #dashboard-balance > .search-field > md-icon {
  margin-right: 8px;
  color: #8f9497;
}

.domraider #dashboard-balance > .search-field > md-autocomplete {
  width: 100%;
}

.domraider #dashboard-balance > .search-field > md-autocomplete input {
  font-size: 1.1em;
}

.domraider #dashboard-balance > .main-table {
  width: 100%;
}

.domraider #dashboard-balance > .main-table table.md-table th.md-column {
  color: #fff;
  text-transform: uppercase;
}

.domraider #dashboard-balance > .main-table table.md-table thead tr {
  height: 68px;
  background-color: #2e2447;
}

.domraider #dashboard-balance > .main-table table.md-table thead tr th {
  font-size: 0.9em;
}

.domraider #dashboard-balance > .main-table table.md-table tbody tr {
  height: 68px;
}

.domraider #dashboard-balance > .main-table table.md-table tbody tr.gray {
  background-color: #f6f6f4;
}

.domraider #dashboard-balance > .main-table table.md-table tbody tr td {
  font-size: 0.9em;
}

.domraider #dashboard-balance > .main-table table.md-table tbody tr td strong {
  text-transform: uppercase;
}

.domraider #dashboard-balance > .main-table table.md-table tbody tr td.transaction-label p {
  margin: 0;
}

.domraider #dashboard-balance > .main-table table.md-table tbody tr td.price {
  text-align: right;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-contacts {
  margin-top: 30px;
  margin-bottom: 6px;
}

.domraider #dashboard-contacts .form-layout {
  width: 100%;
  max-width: 750px;
  padding: 40px 90px;
  background: #f5f5f5;
  border-radius: 20px;
}

.domraider #dashboard-contacts .form-layout h1 {
  margin-top: 10px;
}

.domraider #dashboard-contacts .form-layout dr-user-contacts {
  width: 100%;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-main h1 {
  margin-top: 0;
}

.domraider #dashboard-main > .dashboard-list > md-grid-tile .full {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.domraider #dashboard-main > .dashboard-list > md-grid-tile .user-dashboard-message {
  background-color: #bdc3c7;
}

.domraider .my-orders-list .my-layout h1 {
  margin-top: 30px;
  margin-bottom: 5px;
}

.domraider .my-orders-list .my-layout .orders-search-field-layout {
  padding: 10px 10px 10px 0;
  margin-top: 0;
  margin-bottom: 35px;
}

.domraider .my-orders-list .my-layout .orders-search-field-layout .orders-search-field {
  width: 600px;
  height: 26px;
  padding: 10px;
  margin-right: 10px;
  margin-left: 0;
  border: none;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
  -webkit-box-shadow: 1px 1px 5px 0 #656565;
     -moz-box-shadow: 1px 1px 5px 0 #656565;
       -o-box-shadow: 1px 1px 5px 0 #656565;
          box-shadow: 1px 1px 5px 0 #656565;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-orders .orders-search-field {
  width: 400px;
  height: 46px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-orders-parameters md-sidenav {
  min-height: 100%;
  overflow: auto;
}

.domraider #dashboard-orders-parameters md-sidenav > md-content {
  max-height: 980px;
  min-height: 600px;
  background-color: #2e2447;
}

.domraider #dashboard-orders-parameters md-sidenav > md-content > md-list {
  padding: 10px 0;
  background-color: #2e2447;
}

.domraider #dashboard-orders-parameters md-sidenav > md-content > md-list > md-list-item .md-button {
  height: 52px;
  background-color: #2e2447;
  border-left-color: #2e2447;
  border-left-style: solid;
  border-left-width: 2px;
}

.domraider #dashboard-orders-parameters md-sidenav > md-content > md-list > md-list-item h4 {
  z-index: 2;
  font-weight: 400;
  color: #ffffff;
  outline: 0;
}

.domraider #dashboard-orders-parameters md-sidenav > md-content > md-list > md-list-item.selected .md-button {
  border-left-color: #eb5c37 !important;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-header {
  padding: 40px 30px 20px 30px;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-header #orders-search-field {
  margin-bottom: 0;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-header #orders-search-field .orders-search-field {
  width: 400px;
  height: 46px;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-content #order-parameters-content {
  background-color: #f5f5f5;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-content #order-parameters-content > h1 {
  padding: 15px 30px;
  margin: 8px 0;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-content #order-parameters-content md-tab-item {
  padding: 10px;
  margin: 0 20px;
  font-size: 16px;
  line-height: 28px;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-content #order-parameters-content md-tab-content {
  background-color: #ffffff;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-content #order-parameters-content md-tab-content > div > md-content {
  padding: 25px 30px;
}

.domraider #dashboard-orders-parameters #dashboard-orders-parameters-none {
  margin-top: 30px;
  font-size: 20px;
  font-weight: 800;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider #dashboard-payment {
  margin-top: 30px;
  margin-bottom: 6px;
}

.domraider #dashboard-payment .form-layout {
  width: 100%;
  max-width: 750px;
  padding: 40px 70px;
  background: #f5f5f5;
  border-radius: 20px;
}

.domraider #dashboard-payment .form-layout h1 {
  margin-top: 10px;
}

.domraider #dashboard-payment .form-layout dr-payment-choice {
  width: 100%;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .legal-contact {
  width: 100%;
}

.domraider .legal-contact li {
  padding: 10px;
  padding-left: 30px;
  list-style: none;
  border: 1px solid #bdc3c7;
}

.domraider .legal-contact li + li {
  padding: 10px;
  padding-left: 30px;
  list-style: none;
  border-top: none;
}

.domraider .follow-content {
  width: 100%;
  margin-bottom: 50px;
}

.domraider .uk-content {
  width: 100%;
  margin-bottom: 50px;
}

/*doc
---
title: "FAQ"
name: "faq"
category: "FAQ"
---

```html_example
<div class="faq">
  <div class="container">
    <h3 class="question">
      <i class="fa fa-caret-right"></i>
      Question
    </h3>

    <div class="answser">
      <p>la réponse</p>
    </div>
  </div>
</div>
```
*/

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .faq .md-button.submit {
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
}

.domraider .faq .container {
  margin-bottom: 50px;
}

.domraider .faq .container a {
  color: #2141cc !important;
  text-decoration: underline !important;
}

.domraider .faq .container h2 {
  margin-top: 40px;
  font-weight: 600;
  border-bottom: 1px solid gray;
}

.domraider .faq .container h3 {
  margin-top: 24px;
  margin-bottom: 5px;
}

.domraider .faq .container h3.question {
  font-weight: 400;
  color: #eb5e57;
  cursor: pointer;
}

.domraider .faq .container h3.question i.fa {
  min-width: 16px;
  color: #eb5e57;
}

.domraider .faq .container h3.question:hover {
  color: #e63229 !important;
}

.domraider .faq .container h3.question:hover i.fa {
  color: #e63229 !important;
}

.domraider .faq .container table {
  margin-top: 5px;
  margin-bottom: 5px;
}

.domraider .faq .container table td,
.domraider .faq .container table th {
  padding: 4px;
}

.domraider .faq .container table th {
  border-bottom: 2px solid gray;
}

.domraider .faq .container div.answer {
  display: none;
  margin-left: 20px;
}

.domraider .faq .container div.answer.visible {
  display: block;
}

.domraider .faq .container div[role=button] {
  outline: 0;
}

.domraider .faq .container blockquote {
  padding: 10px;
  margin-left: 0;
  background-color: #f5f5f5;
  border-left: 5px solid #767676 !important;
}

.domraider #full #full-dynamic-content .filter-bar > dr-search-field {
  width: 420px;
}

@media (max-width: 959px) {
  .domraider #full #full-dynamic-content .filter-bar > dr-search-field {
    width: 320px;
  }
}

@media (max-width: 599px) {
  .domraider #full #full-dynamic-content .filter-bar > dr-search-field {
    max-width: 100%;
  }
}

.domraider #full #full-dynamic-content dr-domain-list {
  display: block;
  margin-top: 30px;
}

.domraider #full #full-dynamic-content .result-bottom {
  margin-top: 50px;
}

.domraider #full #full-dynamic-content .result-bottom > dr-pager {
  padding-top: 8px;
  text-align: center;
}

.domraider .page-password-lost-done .alt-login {
  margin-top: 14px;
}

.domraider .page-password-lost-done .alt-login > .md-button {
  width: 100%;
}

.domraider .page-password-lost-done .alt-login > .md-button > md-icon {
  margin-right: 6px;
}



.domraider .page-password-reset-done .alt-login {
  margin-top: 14px;
}

.domraider .page-password-reset-done .alt-login > .md-button {
  width: 100%;
}

.domraider .page-password-reset-done .alt-login > .md-button > md-icon {
  margin-right: 6px;
}





/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .form-login-layout {
  color: #ffffff;
}

.domraider .form-login-layout > .form-login {
  width: 100%;
}

.domraider .form-login-layout > .form-login > h1 {
  margin-top: 0;
  margin-bottom: 0.6em;
  font-size: 2.6em;
  color: #ffffff;
}

.domraider .form-login-layout > .form-login > form {
  margin-top: 0.6em;
}

.domraider .form-login-layout > .form-login > form > .md-button {
  width: 100%;
  margin-top: 2em;
  margin-right: 0;
  margin-left: 0;
}

.domraider .form-login-layout > .form-login > form > md-input-container {
  width: 100%;
  padding-bottom: 2px;
}

.domraider .form-login-layout > .form-login > form > md-input-container > label {
  color: #ffffff;
}

.domraider .form-login-layout > .form-login > form > md-input-container > input {
  color: #ffffff;
  border-color: #ffffff;
}

.domraider .form-login-layout > .form-login > form > md-input-container.md-input-focused > input.ng-invalid {
  border-color: #ef6130;
}

.domraider .form-login-layout > .form-login > form > md-input-container.md-input-focused > input.ng-valid {
  border-color: #85bf16;
}

.domraider .form-login-layout > .form-login > form > .pw-forgot {
  width: 100%;
  font-size: 0.9em;
  color: #bbb;
  text-align: left;
}

.domraider .form-login-layout > .alt-login {
  width: 100%;
  margin-top: 2.8em;
}

.domraider .form-login-layout > .alt-login > dr-user-social-login {
  width: 100%;
}

.domraider .form-login-layout > .alt-login > .description {
  width: 100%;
  margin-bottom: 10px;
  font-size: 0.9em;
  text-align: left;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider .parking-page {
  height: 100%;
  min-height: 1025px;
  overflow: auto;
  color: #ffffff;
  background: url("img/bg-parking.jpg") no-repeat center fixed;
  -webkit-background-size: cover;
          background-size: cover;
}

.domraider .parking-page > .header > dr-user-language {
  padding: 33px;
}

.domraider .parking-page > section h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.4em;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.domraider .parking-page > section h2 {
  margin-bottom: 2.5em;
  font-size: 1.7em;
  font-weight: 200;
  color: #ffffff;
  text-align: center;
}

.domraider .parking-page > section h2 a {
  font-weight: 400;
  color: #ffffff;
  text-decoration: underline;
}

.domraider .parking-page > section h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.9em;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.domraider .parking-page > section h4 {
  margin-bottom: 1.5em;
  font-size: 1.4em;
  font-weight: 200;
  color: #ffffff;
  text-align: center;
}

.domraider .parking-page > section.title {
  padding: 0 2em;
  margin-top: 7%;
}

.domraider .parking-page > section.contact {
  width: 100%;
  padding: 2em;
  margin-bottom: 8%;
  background: rgba(100, 100, 100, 0.3);
}

.domraider .parking-page > section.contact > .contact-form {
  width: 100%;
  padding-bottom: 1em;
}

.domraider .parking-page > section.contact > .contact-form > form .or {
  text-align: center;
}

.domraider .parking-page > section.contact > .contact-form > form md-input-container label {
  font-size: 1.2em;
  color: white;
}

.domraider .parking-page > section.contact > .contact-form > form md-input-container input {
  font-size: 1.2em;
  color: white;
  border-color: white;
}

.domraider .parking-page > section.contact > .contact-form > form md-input-container.answer {
  height: 58px;
  margin-bottom: 36px;
}

.domraider .parking-page > section.contact > .contact-form > form md-input-container.answer > md-select .md-select-value {
  font-size: 1.2em;
  color: white;
  border-bottom-color: white;
}

.domraider .parking-page > section.contact > .contact-form > form md-input-container.md-input-focused > input.ng-invalid {
  border-color: #ef6130;
}

.domraider .parking-page > section.contact > .contact-form > form md-input-container.md-input-focused > input.ng-valid {
  border-color: #85bf16;
}

@media (max-width: 959px) {
  .domraider .parking-page > section.contact > .contact-form > form md-input-container {
    width: 100%;
  }
}

.domraider .parking-page > .footer {
  padding: 1.7em 0;
  background: #2e2447;
  border-top: 1px solid #666666;
}

html .domraider {
  font-family: 'Source Sans Pro', sans-serif !important;
}

html .domraider input {
  font-family: 'Source Sans Pro', sans-serif !important;
}

html .domraider .layout-align-center-center.layout-align-gt-sm-start-center {
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
}

@media (max-width: 959px) {
  html .domraider .layout-align-center-center.layout-align-gt-sm-start-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.domraider md-content.backoffice-content {
  padding: 30px;
  overflow: auto;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider md-menu-item .md-button:hover {
  background: #f5f5f5 !important;
}

.domraider .md-button {
  padding: 0 30px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition-duration: .1s;
  transition-property: background;
}

.domraider .md-button:hover {
  text-decoration: none !important;
}

.domraider .md-button.md-domraider-theme.md-fab {
  min-height: inherit !important;
  line-height: 54px !important;
}

.domraider .md-button.md-domraider-theme.md-primary {
  min-height: 34px;
  line-height: 34px;
  color: #eb5e57;
  background-color: transparent;
  border-color: #eb5e57;
  border-style: solid;
  border-width: 1px;
}

.domraider .md-button.md-domraider-theme.md-primary md-icon {
  color: #eb5e57;
}

.domraider .md-button.md-domraider-theme.md-primary:hover {
  color: #2e2447 !important;
  border-color: #2e2447 !important;
}

.domraider .md-button.md-domraider-theme.md-primary:hover md-icon {
  color: #2e2447;
}

.domraider .md-button.md-domraider-theme.md-primary.md-raised {
  min-height: 36px;
  line-height: 36px;
  color: #ffffff;
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
  border-width: 0;
}

.domraider .md-button.md-domraider-theme.md-primary.md-raised md-icon {
  color: #ffffff;
}

.domraider .md-button.md-domraider-theme.md-primary.md-raised:hover {
  color: #ffffff !important;
  background: none;
  background-color: #eb5e57 !important;
}

.domraider .md-button.md-domraider-theme.md-primary.md-raised:hover md-icon {
  color: #ffffff;
}

.domraider .md-button.md-domraider-theme.md-accent {
  min-height: 34px;
  line-height: 34px;
  color: #eb5e57;
  background-color: transparent;
  border-color: #eb5e57;
  border-style: solid;
  border-width: 1px;
}

.domraider .md-button.md-domraider-theme.md-accent md-icon {
  color: #eb5e57;
}

.domraider .md-button.md-domraider-theme.md-accent:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.domraider .md-button.md-domraider-theme.md-accent:hover md-icon {
  color: #ffffff;
}

.domraider .md-button.md-domraider-theme.md-accent.md-raised {
  min-height: 36px;
  line-height: 36px;
  color: #2e2447;
  background-color: #ffffff;
  border-width: 0;
}

.domraider .md-button.md-domraider-theme.md-accent.md-raised md-icon {
  color: #2e2447;
}

.domraider .md-button.md-domraider-theme.md-accent.md-raised:hover {
  color: #eb5e57;
  background-color: #ffffff;
}

.domraider .md-button.md-domraider-theme.md-accent.md-raised:hover md-icon {
  color: #eb5e57;
}

.domraider .md-button.md-fab {
  padding: 0 6px;
}

.domraider .md-button.md-thin {
  min-width: 70px;
  min-height: 28px !important;
  padding: 0 14px;
  margin: 2px 6px;
  font-size: .8em;
  line-height: 28px !important;
}

.domraider .md-button.md-icon-button {
  padding: 0 6px;
}

.domraider .md-button.md-icon-button.flag {
  width: 24px;
  height: 19px;
  min-height: 19px;
  line-height: 19px;
  border-radius: 0;
}

.domraider .md-button.md-icon-button.flag .md-ripple-container {
  width: 24px;
  height: 19px;
}

.domraider .md-button.facebook.md-raised {
  color: white;
  background-color: #3b5998 !important;
}

.domraider .md-button.facebook.md-raised md-icon {
  margin-right: 6px;
  color: white;
}

.domraider .md-button.facebook.md-raised:hover {
  background-color: #4264aa;
}

.domraider .md-button.twitter.md-raised {
  color: white;
  background-color: #55acee !important;
}

.domraider .md-button.twitter.md-raised md-icon {
  margin-right: 6px;
  color: white;
}

.domraider .md-button.twitter.md-raised:hover {
  background-color: #6cb7f0;
}

.domraider .md-button.googleplus.md-raised {
  color: white;
  background-color: #d44936 !important;
}

.domraider .md-button.googleplus.md-raised md-icon {
  margin-right: 6px;
  color: white;
}

.domraider .md-button.googleplus.md-raised:hover {
  background-color: #d85c4b;
}

.domraider .md-button.download {
  color: #2141cc;
}

.domraider .md-button.neutral {
  font-weight: 400;
  color: #fff !important;
  background-color: transparent;
  border: 1px solid #fff;
}

.domraider .md-button.neutral.md-warn {
  border: 1px solid #e65100;
}

.domraider .md-button.neutral.md-warn:hover {
  background-color: #ff5a00;
}

.domraider .md-button.neutral:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

.domraider .md-button.neutral.dark {
  color: #000 !important;
  border-color: #000;
}

.domraider .md-button.neutral.dark:hover {
  background-color: rgba(97, 97, 97, 0.2);
}

.domraider .md-button.big {
  padding: .3em 1em;
  font-size: 1.4em;
  font-weight: 600;
  line-height: 2em;
}

.domraider .md-button.big md-icon {
  margin-left: .4em;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider md-dialog a {
  color: rgba(0, 0, 0, 0.87);
  text-decoration: underline;
}

.domraider md-dialog a:active,
.domraider md-dialog a:visited {
  color: rgba(0, 0, 0, 0.87);
}

.domraider md-dialog a:hover {
  color: rgba(0, 0, 0, 0.9);
}

.domraider md-dialog > md-toolbar > .md-toolbar-tools {
  height: 76px;
  max-height: 76px;
}

.domraider md-dialog > md-toolbar > .md-toolbar-tools > h2 {
  font-size: 1.2em;
  font-weight: 700;
  text-transform: uppercase;
}

.domraider md-dialog > md-toolbar > .md-toolbar-tools > h2 > md-icon {
  margin-right: 6px;
}

.domraider md-dialog > md-dialog-actions > .bottom-bar {
  width: 100%;
  height: 19px;
  margin-top: 1.5em;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

md-input-container.md-domraider-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
  color: #ffffff;
}

form {
  margin-bottom: 0;
}

label:first-letter {
  text-transform: uppercase;
}

.md-select-value span:first-letter {
  text-transform: uppercase;
}

::-webkit-input-placeholder:first-letter {
  text-transform: uppercase;
}

::-moz-placeholder:first-letter {
  text-transform: uppercase;
}

:-ms-input-placeholder:first-letter {
  text-transform: uppercase;
}

input:-moz-placeholder:first-letter {
  text-transform: uppercase;
}

md-select-menu.md-domraider-theme md-content md-option {
  color: #2e2447;
}

.material-icons {
  font-family: 'Material Icons' !important;
}

.domraider .material-icons.md-16,
.domraider md-icon.md-16 {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  font-size: 16px;
}

.domraider .material-icons.md-18,
.domraider md-icon.md-18 {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  font-size: 18px;
}

.domraider .material-icons.md-24,
.domraider md-icon.md-24 {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  font-size: 24px;
}

.domraider .material-icons.md-30,
.domraider md-icon.md-30 {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  font-size: 30px;
}

.domraider .material-icons.md-36,
.domraider md-icon.md-36 {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  font-size: 36px;
}

.domraider .material-icons.md-48,
.domraider md-icon.md-48 {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  font-size: 48px;
}

.domraider .material-icons.md-60,
.domraider md-icon.md-60 {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  font-size: 60px;
}

.domraider .material-icons.md-dark,
.domraider md-icon.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.domraider .material-icons.md-dark.md-inactive,
.domraider md-icon.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

.domraider .material-icons.md-light,
.domraider md-icon.md-light {
  color: #ffffff;
}

.domraider .material-icons.md-light.md-inactive,
.domraider md-icon.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

.domraider .material-icons > svg,
.domraider md-icon > svg {
  display: block;
}

.domraider .md-subheader .material-icons,
.domraider .md-subheader .md-icon {
  color: inherit;
}

.domraider .content-padding {
  padding: 50px 60px;
}

@media (max-width: 959px) {
  .domraider .content-padding {
    padding: 30px 40px;
  }
}

@media (max-width: 599px) {
  .domraider .content-padding {
    padding: 30px 30px;
  }
}

.domraider .content-max-width {
  max-width: 1600px;
}

.domraider .purchase-max-width {
  max-width: 950px;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.domraider a {
  font-size: inherit;
  color: #2e2447;
  text-decoration: none;
  cursor: pointer;
}

.domraider a:hover {
  color: #2e2447;
  text-decoration: underline;
}

.domraider a:active,
.domraider a:visited {
  color: #2e2447;
}

.domraider a.light {
  color: #ffffff;
}

.domraider a.light:hover {
  color: #ffffff;
  text-decoration: underline;
}

.domraider a.light:active,
.domraider a.light:visited {
  color: #ffffff;
}

.domraider a.stealth-link {
  display: block;
  font-size: 1em;
  color: #ffffff;
  text-decoration: underline;
}

.domraider a.stealth-link > span {
  display: block;
}

.domraider .md-subheader a {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
}

.domraider .md-subheader a:active,
.domraider .md-subheader a:visited,
.domraider .md-subheader a:hover {
  color: inherit;
}

.relative * {
  position: relative !important;
}

#loading-bar .bar {
  background: #92C74A !important;
}

#loading-bar .peg {
  box-shadow: 0 0 10px #92C74A, 0 0 5px #92C74A;
}

#loading-bar,
#loading-bar-spinner {
  -webkit-pointer-events: none;
          pointer-events: none;
  -webkit-transition: 150ms linear all !important;
     -moz-transition: 150ms linear all !important;
       -o-transition: 150ms linear all !important;
          transition: 150ms linear all !important;
}

.domraider dr-colored-progress-linear.button-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: transparent;
  opacity: .2;
}

.domraider dr-colored-progress-linear.button-progress > md-progress-linear {
  height: 100%;
}

.domraider dr-colored-progress-linear.button-progress > md-progress-linear > .md-container {
  height: 100%;
  background-color: transparent;
}

.domraider dr-colored-progress-linear.button-progress > md-progress-linear > .md-container > .md-bar {
  height: 100%;
}

.domraider hr {
  border-top: 1px solid #f8f8f8;
  border-right: 0;
  border-bottom: 1px solid #ececec;
  border-left: 0;
}

.domraider md-tabs md-pagination-wrapper {
  width: auto !important;
}

.domraider .checkbox-legend {
  margin-left: 38px;
  font-size: 0.8em;
}

.domraider md-tooltip {
  font-size: 1em;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 {
  font-size: 32px;
  font-weight: 300;
  line-height: 38px;
  letter-spacing: 2px;
  color: #2e2447;
}

h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  color: #2e2447;
}

h3 {
  font-size: 19px;
  font-weight: 400;
  line-height: 24px;
  color: #2e2447;
}

h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #2e2447;
}

h5 {
  font-size: 13px;
  font-weight: 400;
  line-height: 17px;
  color: #2e2447;
}

h6 {
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  color: #2e2447;
}

a {
  color: #eb5e57;
  text-decoration: underline;
}

/*doc
---
title: "Colors"
name: basic-colors
category: "Basics"
---

## Les couleurs

Les couleurs prédéfinies du thème domraider. Peuvent s'appliquer à tout les éléments de material design.

### Primary

```html_example
<md-button class="md-primary md-raised">Primary</md-button>
<md-button class="md-primary">Primary</md-button>
```

### Accent

```html_example
<md-button class="md-accent md-raised">Accent</md-button>
<md-button class="md-accent">Accent</md-button>
```

### Warn

```html_example
<md-button class="md-warn md-raised">Warn</md-button>
<md-button class="md-warn">Warn</md-button>
```

### Primary (tile)

```html_example
<md-button md-theme="dr-tile" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-tile" class="md-primary">Primary alt</md-button>
```

### Accent (tile)

```html_example
<md-button md-theme="dr-tile" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-accent">Accent alt</md-button>
```

### Warn (tile)

```html_example
<md-button md-theme="dr-tile" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-tile" class="md-warn">Accent alt</md-button>
```

### Primary (special)

```html_example
<md-button md-theme="dr-special" class="md-primary md-raised">Primary alt</md-button>
<md-button md-theme="dr-special" class="md-primary">Primary alt</md-button>
```

### Accent (special)

```html_example
<md-button md-theme="dr-special" class="md-accent md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-accent">Accent alt</md-button>
```

### Warn (special)

```html_example
<md-button md-theme="dr-special" class="md-warn md-raised">Accent alt</md-button>
<md-button md-theme="dr-special" class="md-warn">Accent alt</md-button>
```
*/

.domraider-gradient {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  background: -o-linear-gradient(right, #eb5c37, #ea5290);
  background: -moz-linear-gradient(right, #eb5c37, #ea5290);
  background: linear-gradient(to right, #eb5c37, #ea5290);
  background-color: #eb5c37;
}

.domraider-gradient-text {
  background: -webkit-linear-gradient(left, #eb5c37, #ea5290);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

md-toast.success-toast .md-toast-content {
  color: #ffffff;
  background-color: #8bc34a;
}

md-toast.warn-toast .md-toast-content {
  color: #ffffff;
  background-color: #eb5e57;
}

md-toast.accent-toast .md-toast-content {
  color: #2e2447;
  background-color: #ffffff;
}

.domraider md-tooltip.md-domraider-theme .md-content {
  background-color: #000;
}