/*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 /)
  - `small` (boolean, use small logo or not)

```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 small="true" url="#"></dr-logo>
</div>
```
*/

.domraider .logo img {
  width: 200px;
  height: 181px;
}

.domraider .logo.small img {
  width: 180px;
  height: 16px;
}

.domraider .user-language .flag-holder {
  padding-bottom: 3px;
  cursor: pointer;
  border-bottom: solid 1px transparent;
}

.domraider .user-language .flag-holder.flag-holder-active {
  cursor: default;
  border-color: white;
}

/*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 steps="['design', 'content', 'yolo']" current="'design'"></dr-breadcrumb>
```

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

```html_example
<dr-breadcrumb steps="['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 (alt)

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

### Accent (alt)

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

.domraider .breadcrumb {
  overflow: auto;
}

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

.domraider .breadcrumb > .step > .md-button {
  min-height: 24px;
  padding-right: 8px;
  padding-left: 18px;
  margin: 0;
  line-height: 24px;
  color: #999999;
  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: #808080;
  background: #f5f5f5;
}

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

.domraider .breadcrumb > .step:first-child .md-button {
  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 {
  border-left-color: transparent;
}

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

.domraider .breadcrumb > .step.current .md-button {
  color: #fff !important;
  background: #6cc900;
}

.domraider .breadcrumb > .step.current .md-button:hover {
  background: #6cc900;
}

.domraider .breadcrumb > .step.current:after {
  border-left-color: #6cc900;
}

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

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

/*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 (alt)

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

### Accent (alt)

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

.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 #6cc900;
  border-radius: 6px;
}

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

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

/*doc
---
title: "Consultation"
name: utilities-consultation
category: "Utilities"
---

- Directive : `dr-consultation`

```html_example
<dr-consultation></dr-consultation>
```
*/

/*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 (alt)

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

### Accent (alt)

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

.domraider .consultation-btn {
  font-size: 1em;
  font-weight: 300;
  color: #fff !important;
  background: #1f1f1f !important;
  -webkit-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
          transform: rotate(5deg);
}

.domraider .consultation-btn > .consultation-btn-layout {
  padding: 0.5em 1em;
}

.domraider .consultation-btn > .consultation-btn-layout > .text {
  max-width: 150px;
  margin-right: 5px;
  overflow: hidden;
  line-height: normal;
  white-space: normal;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .consultation-modal {
  max-height: 100%;
  overflow: visible;
}

.domraider .consultation-modal h1 {
  padding: 5px 15px;
  margin: 0;
  font-size: 27px;
  font-weight: 300;
}

.domraider .consultation-modal .secondary {
  padding-top: 10px;
  padding-bottom: 26px;
}

.domraider .consultation-modal .secondary h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 300;
}

.domraider .consultation-modal .main-image {
  height: 250px;
  margin: 20px 20px 0 20px;
  background: url(/img/consultation.jpg) no-repeat bottom;
  background-size: contain;
}

.domraider .consultation-modal .content {
  padding: 24px 50px;
  color: white;
  background-color: #1f1f1f;
}

.domraider .consultation-modal .content > form.form-consultation > md-input-container {
  width: 100%;
  padding-bottom: 2px;
}

.domraider .consultation-modal .content > form.form-consultation > md-input-container > label {
  color: white;
}

.domraider .consultation-modal .content > form.form-consultation > md-input-container > input,
.domraider .consultation-modal .content > form.form-consultation > md-input-container > textarea {
  color: white;
  border-color: white;
}

.domraider .consultation-modal .content > form.form-consultation > md-input-container.md-input-focused > input.ng-invalid {
  border-color: #ef6130;
}

.domraider .consultation-modal .content > form.form-consultation > md-input-container.md-input-focused > input.ng-valid {
  border-color: #85bf16;
}

.domraider .consultation-modal .content md-icon.final-icon {
  width: 150px;
  height: 150px;
  margin-bottom: 80px;
  font-size: 150px;
  cursor: pointer;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .domain-amount {
  font-weight: normal;
}

.domraider .domain-amount > .price {
  font-size: 2em;
  font-weight: 700;
}

/*doc
---
title: "Blocks"
name: domain-blocks
category: "Domain"
---

## Les domaines avec un rank < 25

```html_example
<div ng-init="domainLow={
        _id: 'low-rank.fr',
        age: '0',
        seo: {
            rank: 20
        },
        price: 5
    }; steps=[]">
  <dr-domain-block domain="domainLow" steps="steps"></dr-domain-block>
</div>
```

## Les domaines avec un rank < 60

```html_example
<div ng-init="domainMiddle={
        _id: 'middle-rank.fr',
        age: '2',
        seo: {
            rank: 55,
            ahrefs: {
                backlinks: 2145,
                domains: 84
            }
        },
        price: 40
    }">
  <dr-domain-block domain="domainMiddle" steps="steps"></dr-domain-block>
</div>
```

## Les domaines avec un rank >= 60

```html_example
<div ng-init="domainHigh={
        _id: 'high-rank.fr',
        age: '4',
        seo: {
            rank: 70,
            ahrefs: {
                backlinks: 14203,
                domains: 141
            }
        },
        price: 60
    }">
  <dr-domain-block domain="domainHigh" steps="steps"></dr-domain-block>
</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 (alt)

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

### Accent (alt)

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

.domraider .md-button.domain-block {
  width: 100%;
  height: 100%;
  min-width: 215px;
  padding: 0;
  margin: 0;
  font-weight: normal;
  color: #fff !important;
  text-align: left;
  text-transform: none;
}

.domraider .md-button.domain-block > .domain-body > .domain-header {
  width: 100%;
  padding: 16px 16px 0 16px;
}

.domraider .md-button.domain-block > .domain-body > .domain-header > h3 {
  height: 26px;
  margin: 0;
  overflow: hidden;
  font-size: 1.6em;
  font-weight: 700;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.domraider .md-button.domain-block > .domain-body > .domain-header > h4 {
  margin: 0;
  font-size: 0.9em;
}

.domraider .md-button.domain-block > .domain-body > .domain-header > h4 > dr-domain-star-rate {
  margin-left: 6px;
}

.domraider .md-button.domain-block > .domain-body > .domain-summary {
  width: 100%;
  min-height: 9px;
  padding: 0 16px;
  margin-top: 3px;
  text-align: center;
}

.domraider .md-button.domain-block > .domain-body > .domain-summary > .summary-pane {
  margin-top: 6px;
}

.domraider .md-button.domain-block > .domain-body > .domain-summary > .summary-pane > .name {
  margin-top: -2px;
  font-size: 0.95em;
  text-transform: uppercase;
}

.domraider .md-button.domain-block > .domain-body > .domain-summary > .summary-pane > .score {
  font-size: 2.3em;
}

.domraider .md-button.domain-block > .domain-body > .domain-footer {
  width: 100%;
  padding: 0 16px;
  margin: 0;
}

.domraider .md-button.domain-block > .domain-body > .domain-footer > dr-domain-amount {
  padding-top: 3px;
}

.domraider .md-button.domain-block > .domain-body > .domain-footer > .plus {
  width: 34px;
  height: 34px;
  padding: 5px;
  margin-top: 2px;
  background-color: white;
  border-radius: 50%;
}

.domraider .md-button.domain-block > .domain-body > .domain-footer > .plus > md-icon {
  display: inherit;
  color: #6cc900 !important;
}

.domraider .md-button.domain-block.md-accent {
  border: 1px solid #557784;
}

.domraider .md-button.domain-block.md-accent > .domain-body > .domain-footer {
  border-top: 1px solid #6a8a97;
}

.domraider .md-button.domain-block.md-accent > .domain-body > .domain-footer .md-button.add-button > md-icon {
  color: #5a7e8c;
}

.domraider .md-button.domain-block.md-primary {
  border: 1px solid #66bd00;
}

.domraider .md-button.domain-block.md-primary > .domain-body > .domain-footer {
  border-top: 1px solid #7acd19;
}

.domraider .md-button.domain-block.md-primary > .domain-body > .domain-footer .md-button.add-button > md-icon {
  color: #6cc900;
}

.domraider .md-button.domain-block.md-warn {
  border: 1px solid #f04500;
}

.domraider .md-button.domain-block.md-warn > .domain-body > .domain-footer {
  border-top: 1px solid #fe5a19;
}

.domraider .md-button.domain-block.md-warn > .domain-body > .domain-footer .md-button.add-button > md-icon {
  color: #ff4900;
}

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

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

```html_example
<div ng-init="domainDetail={
            'status': 'unavailable',
            '_id': 'premium.fr',
            'age': 4,
            'rate': 3,
            'seo': {
                'rank': 55,
                'ahrefs': {
                    'backlinks': 2145,
                    'domains': 84,
                    'rank':45
                },
                'majestic': {
                  'trust':12,
                  'citation':10
                },
                'moz': {
                  'authority':30
                },
                'google': {
                  'pr':4
                }
            },
            'semantic': [
                {text:'www','size':1},
                {text:'physic','size':12},
                {text:'gym','size':45},
                {text:'physicgym','size':6},
                {text:'fitness','size':43}
            ],
            'selling_at': '2014-05-23T15:47:46+02:00'
            'price': 40
        }">
  <dr-domain-detail domain="domainDetail"></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 (alt)

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

### Accent (alt)

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

.domraider .domain-detail > .header {
  margin-bottom: 1em;
}

.domraider .domain-detail > .header > h1 {
  margin: 0;
  font-size: 2.4em;
}

.domraider .domain-detail > .header > h4 {
  margin-top: 0.2em;
  margin-bottom: 0;
  font-size: 0.9em;
  line-height: 1em;
}

.domraider .domain-detail > .content {
  padding: 0.2em 0;
}

@media (max-width: 599px) {
  .domraider .domain-detail > .content {
    padding: 0;
  }
}

.domraider .domain-detail > .content > .left {
  min-width: 230px;
}

.domraider .domain-detail > .content > .left > dr-domain-detail-rank {
  padding-bottom: 0.5em;
}

.domraider .domain-detail > .content > .left > dr-domain-detail-summary {
  padding-top: 0.5em;
}

.domraider .domain-detail > .content > .right {
  padding-left: 1em;
  overflow: auto;
}

@media (max-width: 599px) {
  .domraider .domain-detail > .content > .right {
    padding-left: 0;
  }
}

.domraider .domain-detail > .content > .right > dr-wordcloud {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

@media (max-width: 959px) {
  .domraider .domain-detail > .content > .right > .price {
    margin-top: 1em;
  }
}

.domraider .domain-detail > .content > .right > .price > .titles {
  padding-right: 1em;
}

@media (max-width: 959px) {
  .domraider .domain-detail > .content > .right > .price > .titles {
    padding-right: 0;
  }
}

.domraider .domain-detail > .content > .right > .price > .titles > h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: normal;
  text-align: right;
  text-transform: uppercase;
}

.domraider .domain-detail > .content > .right > .price > .titles > h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.8em;
  font-weight: normal;
  text-align: right;
}

.domraider .domain-detail > .content > .right > .price > .titles > h4 > a {
  display: inline;
  color: #000 !important;
  text-decoration: underline;
}

.domraider .domain-detail > .content > .right > .price > dr-domain-amount {
  padding: 0 2em 0.4em 2em;
  font-size: 20px;
  color: #6cc900;
  background: #f5f5f5;
}

@media (max-width: 959px) {
  .domraider .domain-detail > .content > .right > .price > dr-domain-amount {
    margin-top: 0.5em;
  }
}

.domraider .domain-detail-modal {
  width: 90%;
  max-width: 950px;
  max-height: 100%;
}

@media (max-width: 959px) {
  .domraider .domain-detail-modal {
    width: 95%;
  }
}

@media (max-width: 599px) {
  .domraider .domain-detail-modal {
    width: 100%;
  }
}

.domraider .domain-detail-modal > .domain-detail-modal-content {
  position: relative;
  max-height: 950px;
  padding: 30px 36px;
  overflow: auto;
  overflow-x: hidden;
}

@media (max-width: 959px) {
  .domraider .domain-detail-modal > .domain-detail-modal-content {
    padding: 15px 18px;
  }
}

.domraider .domain-detail-modal > .domain-detail-modal-content > dr-domain-detail {
  display: block;
}

.domraider .domain-detail-modal > .domain-detail-modal-content > .btn-close,
.domraider .domain-detail-modal > .domain-detail-modal-content > dr-domain-detail-switch {
  position: absolute;
  top: 14px;
  right: 10px;
}

.domraider .domain-detail-modal > .domain-detail-modal-content > .btn-close {
  width: 36px;
  height: 36px;
  min-height: 36px;
  line-height: 36px;
}

.domraider .domain-detail-modal > .domain-detail-modal-content > .btn-close > md-icon {
  font-weight: 700;
}

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

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

```html_example
<dr-domain-detail-rank rank="83" rate="5"></dr-domain-detail-rank>
```
*/

/*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 (alt)

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

### Accent (alt)

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

.domraider .domain-detail-rank {
  padding: 0.3em 0.4em;
  color: #fff;
  background: #6cc900;
}

.domraider .domain-detail-rank > dr-domain-star-rate {
  margin-top: 0.4em;
}

.domraider .domain-detail-rank > h2 {
  margin-top: -8px;
  margin-bottom: 0;
  font-size: 5em;
  font-weight: 800;
}

.domraider .domain-detail-rank > h3 {
  margin-top: 0.2em;
  margin-bottom: 0;
  font-size: 1.2em;
  font-weight: 300;
  text-transform: uppercase;
}

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

- Directive : `dr-domain-detail-summary`
- Attributes :
  - `seo` (domain seo)
  - `age` (domain age)

```html_example
<div ng-init="seo={}">
  <dr-domain-detail-summary seo="seo" age="5"></dr-domain-detail-summary>
</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 (alt)

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

### Accent (alt)

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

.domraider .domain-detail-summary {
  padding: 1em 0.1em;
  font-size: 0.8em;
  background: #f5f5f5;
}

.domraider .domain-detail-summary > .numbers > span,
.domraider .domain-detail-summary > .labels > span {
  padding: 0.3em 0.2em;
}

.domraider .domain-detail-summary > .numbers {
  font-weight: 500;
}

.domraider .domain-detail-summary > .labels {
  text-transform: uppercase;
}

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

- Directive : `dr-domain-detail-switch`
- Attributes :
  - `list` (array, list of all domain ids)
  - `current` (string, the current domain id)

```html_example
<dr-domain-detail-switch list="" current=""></dr-domain-detail-switch>
```
*/

/*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 (alt)

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

### Accent (alt)

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

.domraider .domain-detail-switch > .cursor {
  font-size: 1.4em;
  color: #6cc900;
}

.domraider .domain-detail-switch > .md-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  line-height: 36px;
}

.domraider .domain-detail-switch > .md-button > md-icon {
  font-weight: 700;
}

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

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

```html_example
<div ng-init="domainList=[
        {
            _id: 'high.fr',
            age: '4',
            seo: {
                rank: 66,
                ahrefs: {
                    backlinks: 2145,
                    domains: 84
                }
            },
            price: 40
        },
        {
            _id: 'high-twice.fr',
            age: '6',
            seo: {
                rank: 100,
                ahrefs: {
                    backlinks: 24587,
                    domains: 1452
                }
            },
            price: 60
        },
        {
            _id: 'medium.fr',
            age: '4',
            seo: {
                rank: 38,
                ahrefs: {
                    backlinks: 541,
                    domains: 14
                }
            },
            price: 30
        },
        {
            _id: 'low.fr',
            age: '2',
            seo: {
                rank: 24
            },
            price: 10
        },
        {
            _id: 'low-twice.fr',
            age: '1',
            seo: {
                rank: 20
            },
            price: 5
        }
    ]; steps=[]">
    <dr-domain-list domains="domainList" steps="steps"></dr-domain-list>
</div>
```
*/

.domraider .domain-list dr-domain-block {
  width: 100%;
  height: 100%;
}

/*doc
---
title: "Pills"
name: domain-pills
category: "Domain"
---

## Les pills

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

```html_example
<div ng-init="domainPills=[
        {
            'class': 'md-primary',
            '_id': 'premium.fr'
        },
        {
            'class': 'md-primary',
            '_id': 'premium-twice.fr'
        },
        {
            'class': 'md-warn',
            '_id': 'redemption.fr'
        },
        {
            'class': 'md-accent',
            '_id': 'available.fr'
        },
        {
            'class': 'md-accent',
            '_id': 'available-twice.fr'
        }
    ]">
    <dr-domain-pills domains="domainPills"></dr-domain-pills>
</div>
```
*/

.domraider .domain-pills .md-button {
  text-transform: lowercase;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .star-rate > md-icon {
  width: 15px;
  height: 23px;
  font-size: 20px;
  color: #ffffff;
  vertical-align: middle;
}

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

.domraider .star-rate.light > md-icon {
  color: #999999;
}

.domraider .star-rate.light > md-icon.ticked {
  color: #fac13b !important;
}

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

/*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 (alt)

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

### Accent (alt)

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

.domraider footer.footer {
  border-top: 1px solid #333333;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .footer-links {
  padding: 20px 0 18px 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background: #333333;
  border-top: 1px solid #5f6162;
}

.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 (alt)

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

### Accent (alt)

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

.domraider .footer-layout {
  padding: 15px 5% 30px 5%;
  color: #fff;
  background: #20201f;
  border-top: 1px solid #5f6162;
}

.domraider .footer-layout > h2 {
  margin-top: 0.5em;
  margin-bottom: 0.8em;
  font-size: 2.2em;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.domraider .footer-layout > dr-marketing-reinsurance {
  width: 100%;
}

/*doc
---
title: "Header"
name: header
category: "Header"
---

- Directive : `dr-header`

```html_example
<div ng-init="user={email: 'yolo@ici.com'}; categories=[{name: 'premium', url: ''}, {name: 'new', url: ''}, {name: 'juicy', url: ''}]">
  <dr-header user="user" categories="categories"></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 (alt)

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

### Accent (alt)

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

.domraider header.header {
  background: #333333;
  border-bottom: 1px solid #f1f1f1;
}

.domraider header.header > .header-fill {
  width: 100%;
  height: 50px;
}

.domraider header.header > .header-fill > dr-user-language {
  margin-top: 15px;
  margin-right: 30px;
}

.domraider header.header > .header-top {
  width: 100%;
  height: 80px;
  max-width: 1340px;
  padding: 0 3% 2px 3%;
  border-bottom: 1px solid #404040;
}

.domraider header.header > .header-top > dr-logo {
  position: relative;
  top: 23px;
  z-index: 2;
  width: 210px;
}

.domraider header.header > .header-top > dr-user-menu {
  margin-top: 1px;
}

.domraider header.header > .header-bottom {
  width: 100%;
  padding: 16px 3% 11px 3%;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #dadada;
}

.domraider header.header > .header-bottom > dr-search-categories {
  height: 36px;
  overflow: hidden;
}

.domraider header.mobile-header {
  padding: 10px 10px;
  background: #333333;
  border-bottom: 1px solid #f1f1f1;
}

.domraider header.mobile-header > .md-button {
  margin-left: 0;
}

.domraider header.mobile-header > .md-button > md-icon {
  color: #fff;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .mobile-menu > md-toolbar {
  padding: 3px 10px;
  background: #333333;
}

.domraider .mobile-menu > md-content > dr-search-categories {
  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: "Carousel Body"
name: home-carousel-body
category: "Home"
---

- Directive : `dr-home-carousel-body`

```html_example
<div style="background: #333">
  <dr-home-carousel-body></dr-home-carousel-body>
</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 (alt)

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

### Accent (alt)

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

.domraider .home-carousel > .carousel-body > .carousel-content {
  margin-bottom: 20px;
}

.domraider .home-carousel > .carousel-body > .carousel-content > h1 {
  margin-bottom: 0.3em;
  font-size: 2.6em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.domraider .home-carousel > .carousel-body > .carousel-content > h2 {
  margin-top: 0;
  font-size: 1.5em;
  font-weight: 300;
  color: #fff;
  text-align: center;
}

.domraider .home-carousel > .carousel-body .md-button.main-login {
  color: #fff;
  text-transform: none;
}

/*doc
---
title: "Carousel Tabs"
name: home-carousel-tabs
category: "Home"
---

- Directive : `dr-home-carousel-tabs`

```html_example
<div style="background: #333">
  <dr-home-carousel-tabs></dr-home-carousel-tabs>
</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 (alt)

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

### Accent (alt)

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

.domraider .home-carousel .carousel-tabs {
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid #565656;
}

.domraider .home-carousel .carousel-tabs > .md-button {
  height: 60px;
  padding-right: 20px;
  padding-left: 20px;
  margin: 0;
  font-size: 1.1em;
  font-weight: 300;
  color: #fff !important;
  text-transform: none;
  background: transparent;
  border-bottom: 3px inset transparent;
  border-radius: 0;
  box-shadow: none;
}

.domraider .home-carousel .carousel-tabs > .md-button .md-ripple-container {
  border-radius: 0;
}

.domraider .home-carousel .carousel-tabs > .md-button md-icon {
  margin-right: 8px;
  color: #fff;
}

.domraider .home-carousel .carousel-tabs > .md-button:hover {
  background: transparent;
}

.domraider .home-carousel .carousel-tabs > .md-button:disabled {
  font-weight: 500;
  color: #fff !important;
  cursor: auto;
  background: transparent;
  border-bottom: 3px inset #ffffff;
}

/*doc
---
title: "Header"
name: home-header
category: "Home"
---

- Directive : `dr-home-header`

```html_example
<div style="background: #333">
  <dr-home-header></dr-home-header>
</div>
```
*/

.domraider .home-header > dr-logo {
  height: 247px;
  padding: 33px;
}

.domraider .home-header dr-user-menu {
  height: 179px;
  padding: 33px 33px 83px 33px;
}

.domraider .home-header dr-user-language {
  margin-top: 15px;
  margin-right: 30px;
}

/*doc
---
title: "Marketing"
name: home-marketing
category: "Home"
---

- Directive : `dr-home-marketing`

```html_example
<dr-home-marketing></dr-home-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 (alt)

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

### Accent (alt)

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

.domraider .home-marketing {
  position: relative;
  overflow: hidden;
  color: #706f6f;
  background: #ffffff;
}

.domraider .home-marketing h2 {
  margin-bottom: 0;
  font-size: 2.2em;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

.domraider .home-marketing h3 {
  margin-top: 0;
  font-size: 1.1em;
  font-weight: 200;
  text-align: center;
}

.domraider .home-marketing > .steps {
  width: 100%;
  max-width: 1300px;
  margin-top: 1em;
  margin-bottom: 1em;
}

.domraider .home-marketing > .steps > dr-marketing-steps {
  width: 100%;
}

.domraider .home-marketing > dr-marketing-demo-carousel {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1.2em;
}

.domraider .home-marketing > dr-consultation {
  position: absolute;
  top: 750px;
  right: -17px;
  z-index: 2;
}

.domraider .home-marketing > .features {
  width: 100%;
  max-width: 1300px;
}

.domraider .home-marketing > .features > dr-marketing-features {
  width: 100%;
  margin-top: 2.5em;
}

.domraider .home-marketing > .features > .md-button {
  margin: 4em 0;
}

/*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 > img {
  max-width: 100%;
}

/*doc
---
title: "Features"
name: marketing-features
category: "Marketing"
---

- Directive : `dr-marketing-features`

```html_example
<dr-marketing-features></dr-marketing-features>
```
*/

/*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 (alt)

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

### Accent (alt)

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

.domraider .marketing-features > md-grid-tile {
  background: #fafafa;
}

.domraider .marketing-features > md-grid-tile .elem {
  width: 100%;
  margin: 0 15px;
  overflow: hidden;
  font-size: 0.9em;
  text-align: left;
}

.domraider .marketing-features > md-grid-tile .elem > md-icon {
  margin-right: 0.5em;
  margin-left: 0;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .marketing-reinsurance {
  width: 100%;
}

.domraider .marketing-reinsurance > .elem {
  max-width: 350px;
  padding: 5px 10px;
  color: #fff;
}

.domraider .marketing-reinsurance > .elem > md-icon {
  margin-right: 10px;
}

.domraider .marketing-reinsurance > .elem > .description {
  font-size: 0.8em;
  text-transform: uppercase;
}

/*doc
---
title: "Steps"
name: marketing-steps
category: "Marketing"
---

- Directive : `dr-marketing-steps`

```html_example
<dr-marketing-steps></dr-marketing-steps>
```
*/

/*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 (alt)

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

### Accent (alt)

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

.domraider .marketing-steps {
  color: #706f6f;
}

.domraider .marketing-steps > .step {
  padding: 1em 1em;
}

.domraider .marketing-steps > .step > h4 {
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-size: 1.1em;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
}

.domraider .marketing-steps > .step > .description {
  font-size: 0.9em;
  font-weight: 200;
  text-align: center;
}

/*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...)
  - `mode` (string, modal)
  - `step` (string, the current step, useful for not modal domain button)
  - `disabled` (boolean, double bound)
  - `no-badge`: (boolean, do not display badge),
  - `no-marketing`: (boolean, do not display marketing)

```html_example
<dr-next-step></dr-next-step>
```

```html_example
<dr-next-step label="yolo" icon="loop"></dr-next-step>
```

```html_example
<dr-next-step mode="modal"></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 (alt)

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

### Accent (alt)

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

.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 #66bd00;
  border-radius: 0;
  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 > dr-next-step-badge {
  position: relative;
  bottom: 28px;
  z-index: 2;
  display: inherit;
}

@media (max-width: 599px) {
  .domraider .md-button.next-step > .next-step-layout > dr-next-step-badge.hide-sm:not(.show-sm):not(.show),
  .domraider .md-button.next-step > .next-step-layout > dr-next-step-badge.hide:not(.show-sm):not(.show) {
    display: none;
  }
}

.domraider .md-button.next-step > .next-step-layout > dr-next-step-marketing {
  padding-left: 5px;
}

.domraider .md-button.next-step > .next-step-layout > .btn-content {
  max-width: 840px;
  text-align: right;
}

.domraider .md-button.next-step > .next-step-layout > .btn-content > md-icon {
  margin-left: 18px;
  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 {
  background: #eee;
  border-top: 1px solid #cecece;
}

.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 > .md-ripple-container {
  border-radius: 0;
}

.domraider .md-button.next-step.modal {
  background-color: #6cc900 !important;
  border-top: 1px solid #66bd00 !important;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.domraider .md-button.next-step.modal > .next-step-layout {
  height: 65px;
  padding: 1.1em 2.5em;
}

.domraider .md-button.next-step.modal > .next-step-layout > .btn-content {
  max-width: none;
}

.domraider .md-button.next-step.modal > .next-step-layout > .btn-content > md-icon {
  margin-left: 14px;
}

/*doc
---
title: "Detail"
name: order-detail
category: "Popup"
---

- Directive : `dr-order-detail`
- Attributes :
  -`order` (une commande)

```html_example
<dr-order-detail class="domraider" order="{
                'status': 'pending-blog',
            'domain_id': 'premium.fr',
            'amount': 40
        }">
</dr-order-detail>
```
*/

.domraider .order-detail md-tab-item {
  max-width: none !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 (alt)

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

### Accent (alt)

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

.domraider .pager > .navigate {
  width: 40px;
}

.domraider .pager > .positions {
  width: 210px;
}

.domraider .pager .md-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  margin-right: 2px;
  margin-left: 2px;
  font-size: 24px;
  line-height: 32px;
}

.domraider .pager .md-button.manual {
  color: #545454;
}

.domraider .pager .md-button.manual:disabled {
  padding-right: 5px;
  padding-left: 5px;
  color: #ffffff !important;
  background-color: #5e5f61;
  border: 1px solid #4b4c4e;
  border-radius: 3px;
}

.domraider .pager .md-button.previous,
.domraider .pager .md-button.next {
  font-weight: 600;
  color: #545454 !important;
}

@media (max-width: 599px) {
  .domraider .product-call-to-action {
    display: block;
    text-align: center;
  }
}

.domraider .product-call-to-action > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.domraider .product-call-to-action > div > md-icon {
  margin-right: 0;
}

/*doc
---
title: "Header"
name: purchase-header
category: "Purchase"
---

- Directive : `dr-purchase-header`

```html_example
<dr-purchase-header></dr-purchase-header>
```
*/

.domraider header.purchase-header {
  height: 50px;
  padding: 5px 15px;
}

.domraider header.purchase-header > dr-logo {
  max-width: 840px;
  margin-top: 0;
  margin-left: 0;
}

.domraider md-dialog.thumbup {
  width: 80%;
  max-width: 870px;
  overflow-x: hidden;
}

@media (max-width: 959px) {
  .domraider md-dialog.thumbup {
    width: 90%;
  }
}

@media (max-width: 599px) {
  .domraider md-dialog.thumbup {
    width: 95%;
  }
}

.domraider md-dialog.thumbup > .purchase-layout > md-content {
  padding-right: 30px;
  padding-left: 30px;
}

.domraider md-dialog.thumbup > .purchase-layout > md-content > .step-content > h1 {
  margin-top: 0.2em;
}

.domraider md-dialog.thumbup > .purchase-layout > md-content > .step-content > .image {
  margin-top: 35px;
  margin-bottom: 10px;
}

.domraider md-dialog.thumbup > .purchase-layout > md-content > .step-content > .image > .round-cropper {
  position: relative;
  width: 220px;
  height: 220px;
  overflow: hidden;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

.domraider md-dialog.thumbup > .purchase-layout > md-content > .step-content > .image > .round-cropper > img {
  position: relative;
  top: -26px;
  left: -140px;
}

/*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 (alt)

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

### Accent (alt)

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

.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 #6cc900;
  border-bottom: solid 1px #6cc900 !important;
}

.domraider .advanced-search md-sidenav md-content md-select md-select-value .md-select-icon {
  color: #6cc900;
}

.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: "Categories"
name: search-categories
category: "Search"
---

## Categories

- Directive : `dr-search-categories`
- Attributes :
  - `categories` (collection of categories)
  - `mode` (display mode : button, menu or grid)
  - `bg` (background type : dark or light)

```html_example
<div style="background: #fff; padding: 10px;">
  <dr-search-categories mode="button" categories="[
        {name: 'premium', url: ''},
        {name: 'new', url: ''},
        {name: 'juicy', url: ''}
    ]">
    </dr-search-categories>
</div>
```

```html_example
<div style="background: #fff;">
  <dr-search-categories mode="menu" categories="[
        {name: 'premium', url: ''},
        {name: 'new', url: ''},
        {name: 'juicy', url: ''}
    ]">
    </dr-search-categories>
</div>
```

```html_example
<div style="background: #555; padding: 10px;">
  <dr-search-categories mode="grid" bg="dark" categories="[
        {name: 'premium', url: ''},
        {name: 'new', url: ''},
        {name: 'juicy', url: ''}
    ]">
    </dr-search-categories>
</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 (alt)

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

### Accent (alt)

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

.domraider .search-categories .md-button.category-btn {
  font-size: 0.9em;
  color: #85a71f !important;
  text-transform: none;
  background: transparent !important;
  box-shadow: none;
}

.domraider .search-categories .md-button.category-btn:first-child {
  margin-left: 0;
}

.domraider .search-categories .md-button.category-btn.md-raised {
  border: 1px solid #e4e4e4;
}

.domraider .search-categories .md-button.category-btn.md-raised.dark {
  border: 1px solid #ffffff;
}

.domraider .search-categories > md-list.categories-menu > md-list-item.category-elmt > .md-button {
  border-radius: 0;
}

.domraider .search-categories > md-list.categories-menu > md-list-item.category-elmt > .md-button > .md-ripple-container {
  border-radius: 0;
}

.domraider .search-categories > md-grid-list.categories-grid > md-grid-tile.category-grid {
  min-width: 120px;
}

/*doc
---
title: "Field"
name: search-field
category: "Search"
---

- Directive : `dr-search-field`
- Attributes :
  - `categories` (collection of all categories)

```html_example
<div style="background: #444; padding: 10px;">
  <dr-search-field></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 (alt)

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

### Accent (alt)

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

.domraider .search-field {
  min-width: 150px;
}

.domraider .search-field > div > #search {
  width: 100%;
  height: 42px;
  padding: 0 20px;
  font-family: 'Raleway', sans-serif !important;
  font-size: 1.2em;
  line-height: 40px;
  border: 1px solid #edeef0;
  border-radius: 3px 0 0 3px;
  outline: 0;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

@media (max-width: 599px) {
  .domraider .search-field > div > #search {
    padding: 0 10px;
    border-radius: 3px;
  }
}

.domraider .search-field > div > .md-button.submit {
  height: 42px;
  min-width: 58px;
  min-height: 32px;
  padding: 4px 0;
  margin: 0 0 0 -2px;
  line-height: 32px;
  border: 1px solid #66bd00;
}

.domraider .search-field > div > .md-button.submit > md-icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

/*doc
---
title: "Keywords"
name: search-keywords
category: "Search"
---

- Directive : `dr-search-keywords`
- Attributes :
  - keywords (object with name and url)

```html_example
<dr-search-keywords keywords="[{name: 'yolo', url: ''}, {name: 'palace', url: ''}, {name: 'hotel', url: ''}]">
</dr-search-keywords>
```
*/

.domraider .keywords .md-button {
  text-transform: lowercase;
}

.domraider div.keyword {
  padding-top: 7px;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .search-popular .md-button.popular-btn {
  color: #ffffff !important;
  text-transform: none;
  background: rgba(112, 112, 112, 0.5) !important;
}

.domraider .search-popular .md-button.popular-btn.md-raised {
  border: 1px solid transparent;
}

.domraider .search-popular > md-grid-list.populars-btn > md-grid-tile {
  margin-top: 2px;
  margin-bottom: 2px;
}

.domraider .search-popular > md-grid-list.populars-grid > md-grid-tile.popular-grid > .md-button.popular-btn {
  padding: 0;
  font-size: 0.9em;
  box-shadow: none;
}

.domraider .search-popular > md-grid-list.populars-grid > md-grid-tile.popular-grid > .md-button.popular-btn:first-child {
  margin-left: 0;
}

.domraider .search-popular > md-grid-list.populars-grid > md-grid-tile.popular-grid > .md-button.popular-btn.md-raised:hover {
  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 (alt)

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

### Accent (alt)

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

.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: #6cc900;
}

.domraider .slider .slider-body .jslider div.jslider-bg i {
  background-color: #6cc900;
}

.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;
  height: 24px;
  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: "Menu"
name: user-menu
category: "User"
---

- Directive : `dr-user-menu`

```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 {
  min-height: 50px;
  color: #fff;
}

.domraider .user-menu.links {
  margin: 0 8px;
}

.domraider .user-menu > .md-button {
  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 > md-menu-item > .md-button {
  text-align: left;
}

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

/*doc
---
title: "Social login"
name: user-social-login
category: "User"
---

- Directive : `dr-user-social-login`

```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: "Wordcloud"
name: domain-wordcloud
category: "Wordcloud"
---

- Directive : `wordcloud`

```html_example
<div ng-init='words=[{"text":"coreen","size":11},{"text":"coreenne","size":9},{"text":"ampli","size":7},{"text":"coree","size":5},{"text":"caracteres","size":5},{"text":"mobiles","size":5},{"text":"culture","size":5},{"text":"linvention","size":5},{"text":"dimprimerie","size":5},{"text":"lissage","size":4},{"text":"titre","size":4},{"text":"fender","size":4},{"text":"revue","size":4},{"text":"guitare","size":4},{"text":"table","size":3},{"text":"japonais","size":3},{"text":"cinema","size":3},{"text":"france","size":3},{"text":"telecharger","size":2},{"text":"traduction","size":2},{"text":"basse","size":2},{"text":"pdf","size":2},{"text":"botox","size":2},{"text":"jazzmaster","size":2},{"text":"arts","size":2},{"text":"neuilly","size":2},{"text":"escalier","size":2},{"text":"squier","size":2},{"text":"garen","size":2},{"text":1965,"size":2},{"text":"princeton","size":2},{"text":"copie","size":2},{"text":"culturecoreenne","size":2},{"text":"tarif","size":2},{"text":"coreens","size":2},{"text":"made","size":2},{"text":"samick","size":2},{"text":"vox","size":2},{"text":"ancienne","size":2},{"text":"gratuit","size":1},{"text":"histoires","size":1},{"text":"descargar","size":1},{"text":"traditions","size":1},{"text":"roman","size":1},{"text":"fichier","size":1},{"text":"contemporain","size":1},{"text":"dragons","size":1},{"text":"prix","size":1},{"text":"lart","size":1},{"text":"metal","size":1},{"text":"gibson","size":1},{"text":"contrebasse","size":1},{"text":"guild","size":1},{"text":"sheraton","size":1},{"text":"epiphone","size":1},{"text":"seine","size":1},{"text":"paris","size":1},{"text":"ac4","size":1},{"text":"meuble","size":1},{"text":"japan","size":1},{"text":"electrique","size":1},{"text":"litterature","size":1},{"text":"korean","size":1},{"text":"armoire","size":1},{"text":"reims","size":1},{"text":"burny","size":1},{"text":"articles","size":1},{"text":"auto","size":1},{"text":"50th","size":1},{"text":"korea","size":1},{"text":"sud","size":1},{"text":"vietcongs","size":1},{"text":"tasses","size":1},{"text":"amplis","size":1},{"text":"www","size":1},{"text":"porcelaines","size":1},{"text":"decorees","size":1},{"text":1967,"size":1},{"text":"neuf","size":1},{"text":"auteur","size":1},{"text":"date","size":1},{"text":"toute","size":1},{"text":"vitalite","size":1},{"text":"une","size":1},{"text":"epreuve","size":1},{"text":"theatre","size":1},{"text":"edition","size":1},{"text":"surtitrage","size":1},{"text":"metrage","size":1},{"text":"court","size":1},{"text":"adulte","size":1},{"text":"lage","size":1},{"text":"annees","size":1},{"text":"ans","size":1},{"text":"femme","size":1},{"text":"actuelle","size":1},{"text":"societe","size":1},{"text":"levolution","size":1}]'></div>
<wordcloud words="words" width="600" height="250"></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 (alt)

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

### Accent (alt)

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

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

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

.translate table tr:hover,
.translate table tr.active {
  color: white;
  cursor: hand;
  background-color: #6cc900;
}

.translate table td {
  padding: 4px;
}

.translate md-content {
  padding: 30px;
  overflow: auto;
}

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

.translate span.badge.green {
  background-color: #6cc900;
}

.translate span.badge.red {
  background-color: #ff4900;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .faq .container {
  margin-bottom: 50px;
}

.domraider .faq .container a {
  color: #2141cc !important;
  text-decoration: underline !important;
}

.domraider .faq .container h2 {
  margin-top: 40px;
  border-bottom: 1px solid gray;
}

.domraider .faq .container h3 {
  margin-top: 24px;
  margin-bottom: 5px;
}

.domraider .faq .container h3.question {
  color: #5a7e8c;
  cursor: pointer;
}

.domraider .faq .container h3.question i.fa {
  min-width: 16px;
  color: #5a7e8c;
}

.domraider .faq .container h3.question:hover {
  color: #93afb9 !important;
}

.domraider .faq .container h3.question:hover i.fa {
  color: #93afb9 !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;
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .home.connected {
  min-height: 760px;
}

.domraider .home.connected > .home-header {
  background: url("/img/home/bg-connected.jpg") no-repeat bottom;
  -webkit-background-size: cover;
  /* pour anciens Chrome et Safari */

          background-size: cover;
  /* version standardisée */

}

.domraider .home.connected > .home-header > .connected-layout > .titles > h1 {
  margin-bottom: 0.3em;
  font-size: 2.6em;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.domraider .home.connected > .home-header > .connected-layout > .titles > h2 {
  margin-top: 0;
  font-size: 1.7em;
  font-weight: 300;
  color: #fff;
  text-align: center;
}

.domraider .home.connected > .home-header > .connected-layout > .search {
  width: 100%;
  padding: 0 20px;
}

.domraider .home.connected > .home-header > .connected-layout > .search > dr-search-field {
  max-width: 560px;
}

.domraider .home.connected > .home-header > .connected-layout > h3 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.25em;
  font-weight: 300;
  color: #fff;
}

.domraider .home.connected > .home-header > .connected-layout > dr-search-categories,
.domraider .home.connected > .home-header > .connected-layout > dr-search-popular {
  width: 100%;
  max-width: 630px;
}

@media (max-width: 599px) {
  .domraider .home.connected > .home-header > .connected-layout > dr-search-categories,
  .domraider .home.connected > .home-header > .connected-layout > dr-search-popular {
    max-width: 170px;
  }
}

@media (max-width: 959px) and (min-width: 600px) {
  .domraider .home.connected > .home-header > .connected-layout > dr-search-categories,
  .domraider .home.connected > .home-header > .connected-layout > dr-search-popular {
    max-width: 350px;
  }
}

.domraider .home.connected > .home-header > .connected-layout > dr-search-categories {
  margin-top: 30px;
}

.domraider .home {
  min-height: 530px;
  color: #fff;
  background: url("/img/home/bg-global.jpg") no-repeat center;
  -webkit-background-size: cover;
          background-size: cover;
}

.domraider .home .home-header > .home-content {
  padding-top: 5em;
  padding-bottom: 5em;
}

.domraider .home > .home-layout {
  background: url("/img/home/bg-global.jpg") no-repeat top;
  -webkit-background-size: cover;
  /* pour anciens Chrome et Safari */

          background-size: cover;
  /* version standardisée */

}

.domraider .home > .home-layout.blogger {
  background-image: url("/img/home/bg-blogger.jpg");
}

.domraider .home > .home-layout.seo {
  background-image: url("/img/home/bg-seo.jpg");
}

.domraider .home > .home-layout.webmarketer {
  background-image: url("/img/home/bg-webmarketer.jpg");
}

.domraider .home > .home-layout.preload {
  display: none;
}

.domraider .page-order dr-header {
  width: 100%;
}

.domraider .page-order dr-footer {
  width: 100%;
}

.domraider .page-order md-content {
  width: 100%;
}

.domraider .page-order md-list-item.head {
  font-weight: 700;
}

.domraider .page-order md-list-item.content {
  border-top: solid 1px;
}

.domraider .page-order md-list-item.content .md-list-item-text div {
  padding: 0 5px;
}

.domraider .page-order md-list-item.content .md-list-item-text div.domain-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/*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 (alt)

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

### Accent (alt)

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

.legal-contact .content a {
  color: #2141cc !important;
  text-decoration: underline !important;
}

.domraider .page-login > .content-login {
  margin-top: 15%;
}

@media (max-width: 600px) {
  .domraider .page-login > .content-login {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  .domraider .page-login > .content-login {
    margin-top: 12%;
  }
}

@media (min-width: 1200px) {
  .domraider .page-login > .content-login {
    margin-top: 9%;
  }
}

.domraider .page-login > .content-login > .form-login {
  width: 100%;
  padding: 8px;
}

.domraider .page-login > .content-login > .form-login > h1 {
  margin-top: 0;
  margin-bottom: 0.6em;
  font-size: 2.6em;
  color: #fff;
}

.domraider .page-login > .content-login > .form-login > form {
  margin-top: 0.6em;
}

.domraider .page-login > .content-login > .form-login > form > .md-button {
  width: 100%;
  margin-top: 2em;
  margin-right: 0;
  margin-left: 0;
}

.domraider .page-login > .content-login > .form-login > form > md-input-container {
  width: 100%;
  padding-bottom: 2px;
}

.domraider .page-login > .content-login > .form-login > form > md-input-container > label {
  color: white;
}

.domraider .page-login > .content-login > .form-login > form > md-input-container > input {
  color: white;
  border-color: white;
}

.domraider .page-login > .content-login > .form-login > form > md-input-container.md-input-focused > input.ng-invalid {
  border-color: #ef6130;
}

.domraider .page-login > .content-login > .form-login > form > md-input-container.md-input-focused > input.ng-valid {
  border-color: #85bf16;
}

.domraider .page-login > .content-login > .form-login > form > .pw-forgot {
  width: 100%;
  font-size: 0.9em;
  color: #bbb;
  text-align: left;
}

.domraider .page-login > .content-login .alt-login {
  width: 100%;
  padding: 8px;
  margin-top: 2.8em;
}

.domraider .page-login > .content-login .alt-login > dr-user-social-login {
  width: 100%;
}

.domraider .page-login > .content-login .alt-login > .description {
  width: 100%;
  margin-bottom: 10px;
  font-size: 0.9em;
  text-align: left;
}

.domraider .page-login dr-user-language {
  margin-top: 15px;
  margin-right: 30px;
}

.domraider .page-order dr-header {
  width: 100%;
}

.domraider .page-order dr-footer {
  width: 100%;
}

.domraider .page-order md-content {
  width: 100%;
}

.domraider .page-order md-list-item.head {
  font-weight: 700;
}

.domraider .page-order md-list-item.content {
  border-top: solid 1px;
}

.domraider .page-order md-list-item.content .md-list-item-text div {
  padding: 0 5px;
}

.domraider .page-order md-list-item.content .md-list-item-text div.domain-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.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 (alt)

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

### Accent (alt)

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

.domraider .product-page {
  overflow: hidden;
  color: #ffffff;
  background: url("/img/product/bg.jpg") no-repeat center fixed;
  -webkit-background-size: cover;
          background-size: cover;
}

@media (max-width: 599px) {
  .domraider .product-page {
    font-size: 14px;
  }
}

.domraider .product-page > section {
  max-height: 950px;
}

.domraider .product-page > section > .layout {
  width: 100%;
  overflow: hidden;
  color: #ffffff;
  background: transparent;
}

.domraider .product-page > section > .layout > .content {
  width: 100%;
  max-width: 1100px;
  margin-bottom: 1.3em;
}

.domraider .product-page > section > .layout > .content > .title {
  margin-bottom: 2em;
}

@media (max-width: 599px) {
  .domraider .product-page > section > .layout > .content > .title {
    margin-bottom: 1.5em;
  }
}

.domraider .product-page > section > .layout > .content > .title > h2 {
  margin-top: 0.5em;
  margin-bottom: 0.2em;
  font-size: 3em;
  font-weight: 200;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 599px) {
  .domraider .product-page > section > .layout > .content > .title > h2 {
    margin-top: 0;
    font-size: 2em;
  }
}

.domraider .product-page > section > .layout > .content > .title:after {
  width: 250px;
  height: 5px;
  min-width: 150px;
  background-color: #ffffff;
  content: "";
}

.domraider .product-page > section > .layout > .content .full {
  width: 100%;
}

.domraider .product-page > section > .layout > .content .block {
  text-align: left;
}

.domraider .product-page > section > .layout > .content .block.padded {
  padding-top: 1em;
  padding-bottom: 1em;
}

.domraider .product-page > section > .layout > .content .block > h3 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

@media (max-width: 599px) {
  .domraider .product-page > section > .layout > .content .block > h3 {
    margin-bottom: 0.1em;
  }
}

.domraider .product-page > section > .layout .padded {
  padding: 0 2em;
}

@media (max-width: 599px) {
  .domraider .product-page > section > .layout .padded {
    padding: 0 1em;
  }
}

.domraider .product-page > section > .layout .shadow {
  box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.26);
}

.domraider .product-page > section dr-product-call-to-action {
  margin-top: 1.5em;
  text-align: center;
}

.domraider .product-page > section .image {
  overflow: visible;
}

.domraider .product-page > section .image.left {
  padding-right: 1em;
}

.domraider .product-page > section .image.right {
  padding-left: 1em;
}

.domraider .product-page > section .image.top {
  padding-bottom: 1em;
}

.domraider .product-page > section .image.bottom {
  padding-top: 1em;
}

.domraider .product-page > section > .separator {
  width: 100%;
  height: 113px;
  background: url("/img/product/white-separator.png") no-repeat center;
  -webkit-background-size: cover;
          background-size: cover;
}

.domraider .product-page > section h3 {
  font-size: 1.5em;
  font-weight: 200;
  text-transform: uppercase;
}

@media (max-width: 599px) {
  .domraider .product-page > section h3 {
    font-size: 1.2em;
  }
}

.domraider .product-page > section.odd > .layout {
  color: #5d5d5d;
  background: #ffffff;
}

.domraider .product-page > section.odd > .layout > .content .title:after {
  background-color: #6cc900;
}

.domraider .product-page > section.odd > .separator {
  background-image: url("/img/product/white-separator_alt.png");
}

.domraider .product-page > section#intro > .layout > .header {
  width: 100%;
}

.domraider .product-page > section#intro > .layout > .header > dr-logo {
  padding: 33px;
}

.domraider .product-page > section#intro > .layout > .header > dr-user-language {
  padding: 33px;
}

.domraider .product-page > section#intro > .layout > .content > h1 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.8em;
  font-weight: 200;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 599px) {
  .domraider .product-page > section#intro > .layout > .content > h1 {
    font-size: 3em;
  }
}

.domraider .product-page > section#intro > .layout > .content > h3 {
  margin-top: 0;
  margin-bottom: 2em;
  text-align: center;
}

.domraider .product-page > section#intro > .layout > .content > .sections-btn .md-button {
  margin-bottom: 1.5em;
}

.domraider .product-page > section#guarantee > .separator {
  background-image: url("/img/product/grey-separator.png");
}

.domraider .product-page > section#guarantee > .separator > .macbernik {
  position: relative;
  bottom: 37px;
  z-index: 2;
}

.domraider .product-page > section#guarantee > .footer-container {
  width: 100%;
  height: 280px;
  background: #333333;
}

.domraider .product-page > section#guarantee > .footer-container > dr-product-call-to-action {
  margin-top: 0;
}

.domraider .product-page > section#guarantee > .footer-container > dr-footer-links {
  width: 100%;
}

@media (max-width: 959px) {
  .domraider .product-page > section#guarantee > .footer-container {
    height: 200px;
  }
}

@media (max-width: 599px) {
  .domraider .product-page > section#guarantee > .footer-container {
    height: 150px;
  }
}

.domraider #purchase-content {
  display: block;
  overflow: hidden;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-language {
  padding: 10px 40px 30px 40px;
  margin: 0;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-language > md-radio-button {
  padding: 0 15px;
  margin: 15px 0;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-language > md-radio-button md-icon {
  width: 16px;
  margin-right: 5px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-thematic {
  display: block;
  padding: 10px 40px 30px 40px;
  margin: 0;
}

@media (max-width: 959px) {
  .domraider #purchase-content > .purchase-layout .step-content.content-step > .content-thematic {
    padding-right: 10px;
    padding-left: 10px;
  }
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-thematic .keep {
  margin-bottom: 20px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-thematic .keep > dr-wordcloud {
  margin-top: 10px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-thematic .thematic > md-radio-group > md-radio-button {
  margin-bottom: 10px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-thematic .thematic > md-chips {
  margin: 0 15px 15px 41px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks {
  display: block;
  padding: 10px 40px 60px 40px;
  margin: 0;
}

@media (max-width: 959px) {
  .domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks {
    padding-right: 10px;
    padding-left: 10px;
  }
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks > md-checkbox {
  margin: 15px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks > md-checkbox.authority {
  margin-bottom: 30px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks > md-checkbox.websites {
  margin-bottom: 10px;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks > md-input-container {
  display: block;
  margin-right: 12px;
  margin-bottom: 4px;
  margin-left: 41px;
  outline: none;
}

.domraider #purchase-content > .purchase-layout .step-content.content-step > .content-backlinks > md-input-container > label:first-letter {
  text-transform: none;
}

.domraider #purchase-design {
  display: block;
  overflow: hidden;
}

.domraider #purchase-design > .purchase-layout .step-content.design-step > .design-list {
  margin-top: 35px;
  margin-bottom: 50px;
}

.domraider #stripe_form {
  display: block;
  overflow: hidden;
}

.domraider #stripe_form > .purchase-layout .step-content.payment-step md-input-container {
  padding-bottom: 6px;
}

.domraider #stripe_form > .purchase-layout .step-content.payment-step .combined > md-input-container {
  margin-right: 6px;
  margin-left: 6px;
}

@media (max-width: 599px) {
  .domraider #stripe_form > .purchase-layout .step-content.payment-step .combined > md-input-container {
    margin-right: 0;
    margin-left: 0;
  }
}

.domraider #stripe_form > .purchase-layout .step-content.payment-step .combined > md-input-container:first-child {
  margin-left: 0;
}

.domraider #stripe_form > .purchase-layout .step-content.payment-step .combined > md-input-container:last-child {
  margin-right: 0;
}

.domraider #stripe_form > .purchase-layout .step-content.payment-step .combined .date-separator {
  margin-top: 28px;
  text-align: center;
}

.domraider #stripe_form > .purchase-layout .step-content.payment-step > .credit-card {
  margin-bottom: 50px;
}

.domraider .purchase-layout > dr-purchase-header {
  width: 100%;
}

.domraider .purchase-layout > md-content {
  width: 100%;
  padding: 30px 15px;
}

.domraider .purchase-layout > md-content .step-content {
  max-width: 840px;
}

.domraider .purchase-layout > md-content .step-content > h1 {
  margin-top: 1.3em;
  margin-bottom: 0.3em;
  font-size: 1.8em;
}

.domraider .purchase-layout > md-content .step-content > h2 {
  margin-top: 0;
  font-size: 1em;
  font-weight: normal;
}

.domraider .purchase-layout dr-next-step {
  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 (alt)

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

### Accent (alt)

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

.domraider #purchase-summary {
  display: block;
  overflow: hidden;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step {
  /*.order-summary {
            list-style: none;
            padding-left: 0;
            margin-top: 25px;
            margin-left: 8px;
            margin-right: 8px;

            & > li {
              margin-top: 5px;

              & > md-icon {
                margin-right: 12px;
                width: 19px;
                height: 19px;
                font-size: 16px;
                line-height: 16px;
                font-weight: 300;
                color: #000;
              }

              & > ul {
                padding-left: 50px;

                & > li {
                  margin-top: 5px;
                }
              }
            }
          }*/

}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .layout-margin {
  margin-right: 40px;
  margin-left: 40px;
}

@media (max-width: 599px) {
  .domraider #purchase-summary .purchase-layout .step-content.summary-step .layout-margin {
    margin-right: 10px;
    margin-left: 10px;
  }
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step > h3 {
  font-size: 1.8em;
  font-weight: normal;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step > dr-marketing-features {
  padding: 0 10px;
  margin: 40px 0;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot {
  margin-top: 35px;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot > .reinsurance > h3 {
  margin: 0;
  font-size: 1.5em;
  font-weight: 200;
  color: #6cc900;
  text-transform: uppercase;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot > .reinsurance > .list {
  padding-left: 0;
  margin-top: 0.2em;
  list-style: none;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot > .reinsurance > .list > li {
  margin-top: 0.2em;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot > .reinsurance > .list > li > md-icon {
  width: 14px;
  height: 14px;
  margin-right: 2px;
  font-size: 14px;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot > .reinsurance > .list > li > span {
  font-size: 0.8em;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot .order-amount > h3 {
  margin: 0;
  font-size: 1.8em;
  font-weight: 700;
  color: #6cc900;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot .md-button {
  width: 100%;
  margin: 15px 0 30px 0;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot .cgv {
  padding: 0 1.5em;
  font-size: 0.75em;
  text-align: right;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step .pre-foot .cgv a {
  color: #000 !important;
  text-decoration: underline;
}

.domraider #purchase-summary .purchase-layout .step-content.summary-step md-input-container {
  outline: 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 (alt)

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

### Accent (alt)

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

.domraider .page-search {
  min-height: 100%;
}

.domraider .page-search > dr-header,
.domraider .page-search dr-footer {
  width: 100%;
}

.domraider .page-search > md-content {
  width: 100%;
}

.domraider .page-search > md-content > dr-breadcrumb {
  margin-bottom: 30px;
}

.domraider .page-search > md-content > .result-bottom {
  margin-top: 50px;
}

.domraider .page-search > md-content > .result-bottom > .separator {
  width: 100%;
  height: 8px;
  max-width: 300px;
  border-bottom: 1px solid #6cc900;
  content: '';
}

.domraider .page-search > md-content > .result-bottom > dr-pager {
  padding-top: 8px;
  text-align: center;
}

.domraider .page-search > md-content > .suggestions {
  margin-top: 85px;
}

.domraider .page-search > md-content > .suggestions > div {
  margin-top: 5px;
  margin-bottom: 5px;
}

.domraider .page-search > md-content > .suggestions > div:first-child {
  margin-top: 0;
}

.domraider .page-search > md-content > .suggestions > div:last-child {
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .domraider .page-search > md-content > .suggestions > div > .label {
    margin-bottom: 5px;
    margin-left: 6px;
  }
}

.domraider .page-search > md-content > .suggestions > div > dr-search-keywords,
.domraider .page-search > md-content > .suggestions > div > dr-domain-pills {
  height: 36px;
  overflow: hidden;
}

.domraider .page-search > md-content > .suggestions > div.populars {
  margin-top: 30px;
}

.domraider .page-search > md-content > .suggestions > div.populars > .label {
  padding-top: 12px;
}

@media (max-width: 599px) {
  .domraider .page-search > md-content > .suggestions > div.populars > dr-search-popular {
    width: 100%;
  }
}

.domraider .page-signup .form-signup > h1 > .edito {
  font-size: 0.8em;
  font-weight: 300;
}

.domraider .page-signup dr-user-language {
  margin-top: 15px;
  margin-right: 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 (alt)

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

### Accent (alt)

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

.domraider .parking-page {
  min-height: 580px;
  background: url("/img/home/bg-connected.jpg") no-repeat center fixed;
  -webkit-background-size: cover;
          background-size: cover;
}

.domraider .parking-page > .header > dr-user-language {
  padding: 33px;
}

.domraider .parking-page > .content {
  padding: 0 2em;
  color: #fff;
}

.domraider .parking-page > .content > h1 {
  margin-bottom: 0.1em;
  font-size: 3.3em;
  font-weight: 600;
  text-align: center;
}

.domraider .parking-page > .content > h2 {
  margin-bottom: 2.5em;
  font-size: 1.4em;
  font-weight: 200;
  text-align: center;
}

.domraider .parking-page > .content > h2 a {
  font-weight: 400;
  text-decoration: underline;
}

.domraider .parking-page > .footer {
  padding: 1.7em 0;
  background: #333333;
  border-top: 1px solid #5f6162;
}

html .domraider {
  font-family: 'Raleway', sans-serif !important;
}

html .domraider input {
  font-family: 'Raleway', sans-serif !important;
}

html .domraider .layout-align-center-center.layout-align-gt-md-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-md-start-center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

/*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 (alt)

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

### Accent (alt)

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

.domraider .md-button {
  text-decoration: none;
}

.domraider .md-button:hover {
  text-decoration: none;
}

.domraider .md-button.md-thin {
  min-height: 30px;
  padding: 0 14px;
  margin: 2px 6px;
  font-size: 1.05em;
  line-height: 30px;
}

.domraider .md-button.md-icon-button.flag {
  width: 24px;
  height: 19px;
  min-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 !important;
  border: 1px solid #fff !important;
}

.domraider .md-button.neutral:hover {
  background-color: rgba(158, 158, 158, 0.2) !important;
}

.domraider .md-button.big {
  padding-right: 1em;
  padding-left: 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 (alt)

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

### Accent (alt)

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

.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);
}

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;
}

.material-icons {
  font-family: 'Material Icons' !important;
}

.domraider .material-icons.md-18 {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

.domraider .material-icons.md-24 {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.domraider .material-icons.md-36 {
  width: 36px;
  height: 36px;
  font-size: 36px;
}

.domraider .material-icons.md-48 {
  width: 48px;
  height: 48px;
  font-size: 48px;
}

.domraider .material-icons.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.domraider .material-icons.md-dark.md-inactive {
  color: rgba(0, 0, 0, 0.26);
}

.domraider .material-icons.md-light {
  color: #ffffff;
}

.domraider .material-icons.md-light.md-inactive {
  color: rgba(255, 255, 255, 0.3);
}

.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: 1300px;
}

.domraider a {
  font-size: inherit;
  color: #fff;
  text-decoration: none;
}

.domraider a:hover {
  color: #fff;
  text-decoration: underline;
}

.domraider a:active,
.domraider a:visited {
  color: #fff;
}

.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 hr {
  border-top: 1px solid #f8f8f8;
  border-right: 0;
  border-bottom: 1px solid #ececec;
  border-left: 0;
}

.domraider .checkbox-legend {
  margin-left: 38px;
  font-size: 0.8em;
}

.domraider md-tooltip {
  font-size: 1em;
}