/********************
	Part - Style global
********************/
html,
body {
  height : 100%;
}

@-ms-viewport {
  width : device-width;
}

html {
  box-sizing                  : border-box;
  font-size                   : 16px;
  -ms-overflow-style          : scrollbar;
  -webkit-tap-highlight-color : transparent;
  font-family                 : sans-serif;
  -ms-text-size-adjust        : 100%;
}

body {
  font-family             : Urbanist, sans-serif;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  line-height             : 1.25em;
  font-size               : 16px;
}

[tabindex="-1"]:focus {
  outline : none !important
}

p {
  margin : 0;
}

abbr[data-original-title], abbr[title] {
  cursor        : help;
  border-bottom : 1px dotted var(--color-grey-default)
}

address {
  font-style  : normal;
  line-height : inherit
}

address, dl, ol, ul {
  margin-bottom : 1rem
}

dl, ol, ul {
  margin-top : 0
}

ol ol, ol ul, ul ol, ul ul {
  margin-bottom : 0
}

ul {
  list-style : none;
  padding    : 0;
  margin     : 0;
}

dt {
  font-weight : 700
}

dd {
  margin-bottom : .5rem;
  margin-left   : 0
}

blockquote {
  margin : 0 0 1rem
}

a {
  color           : var(--color-black-default);
  text-decoration : none;
  transition      : all .3s ease-in-out;
}

a:hover {
  color           : var(--link-color-on-hover);
  text-decoration : none;
}

a:focus {
  color           : var(--color-primary);
  text-decoration : none;
  outline         : none;
}

a:not([href]):not([tabindex]),
a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
  color           : inherit;
  text-decoration : none
}

a:not([href]):not([tabindex]):focus {
  outline : none
}

figure {
  margin : 0 0 1rem
}

img {
  vertical-align : middle;
  max-width      : 100%;
  object-fit     : contain;
}

[role=button] {
  cursor : pointer
}

[role=button], a, area, button, input, label, select, summary, textarea {
  -ms-touch-action : manipulation;
  touch-action     : manipulation
}

table {
  border-collapse  : collapse;
  background-color : transparent
}

caption {
  padding-top    : .75rem;
  padding-bottom : .75rem;
  color          : var(--color-grey-font-default);
  caption-side   : bottom
}

caption, th {
  text-align : left
}

label {
  display       : inline-block;
  margin-bottom : .5rem
}

button:focus {
  outline : 1px dotted;
  outline : 5px auto -webkit-focus-ring-color
}

button, input, select, textarea {
  line-height : inherit
}

input[type=checkbox]:disabled,
input[type=radio]:disabled {
  cursor : not-allowed
}

input[type=date],
input[type=datetime-local],
input[type=month],
input[type=time] {
  -webkit-appearance : listbox
}

textarea {
  resize : vertical
}

fieldset {
  min-width : 0;
  padding   : 0;
  margin    : 0;
  border    : 0
}

legend {
  display       : block;
  width         : 100%;
  padding       : 0;
  margin-bottom : .5rem;
  font-size     : 1.5rem;
  line-height   : inherit
}

input[type=search] {
  -webkit-appearance : none
}

output {
  display : inline-block
}

[hidden] {
  display : none !important
}

.clearfix:after {
  content : "";
  display : table;
  clear   : both
}

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

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position : static;
  width    : auto;
  height   : auto;
  margin   : 0;
  overflow : visible;
  clip     : auto
}

.color,
.custom-checkbox input[type=checkbox] + span.color {
  width           : 1.25rem;
  height          : 1.25rem;
  display         : inline-block;
  margin          : .3125rem;
  box-shadow      : 2px 2px 4px 0 rgba(0, 0, 0, .2);
  border          : 1px solid rgba(0, 0, 0, .05);
  cursor          : pointer;
  background-size : contain
}

.color.active, .color:hover,
.custom-checkbox input[type=checkbox] + span.color.active,
.custom-checkbox input[type=checkbox] + span.color:hover,
.facet-label.active .custom-checkbox span.color,
.facet-label:hover .custom-checkbox span.color {
  border : 2px solid var(--color-black-default)
}

.h1, .h2, .h3 {
  text-transform : uppercase;
  color          : var(--color-black-default)
}

.h4 {
  font-weight : 700;
  color       : var(--color-black-default)
}

.label, label {
  color      : var(--color-black-default);
  text-align : right;
  font-size  : .875rem
}

small.label, small.value {
  font-size : .8125rem
}

@media (max-width : 767px) {
  .bold {
    font-weight : 700
  }
}

.text-muted {
  font-size : .875rem
}

.done {
  color        : #4cbb6c;
  display      : inline-block;
  padding      : 0 .8125rem;
  margin-right : 1.563rem
}

@media (max-width : 991px) {
  .done {
    margin  : 0;
    padding : 0
  }
}

.group-span-filestyle label {
  margin : 0
}

.popover.bs-tether-element-attached-top {
  margin-top : 0
}

/********************
	Part - Style payment-confirmation
********************/
@media (max-width : 575px) {
  #payment-confirmation button {
    font-size : .875rem
  }

  #payment-confirmation button.btn {
    white-space : normal
  }
}

/********************
	Part - Style payment-binary
********************/
.js-payment-binary,
.js-payment-binary .accept-cgv {
  display : none
}

.js-payment-binary.disabled {
  opacity : .6;
  cursor  : not-allowed
}

.js-payment-binary.disabled:before {
  content        : "";
  position       : absolute;
  top            : 0;
  right          : 0;
  bottom         : 0;
  left           : 0;
  pointer-events : none
}

.js-payment-binary.disabled .accept-cgv {
  display : block
}

/********************
	Part - Style table-labeled
********************/
.table-labeled td, .table-labeled th {
  vertical-align : middle
}

.table-labeled .label {
  font-weight   : 400;
  border-radius : 3px;
  font-size     : inherit;
  padding       : .25rem .375rem;
  margin        : .125rem;
  color         : #fff;
  white-space   : nowrap
}

/********************
	Part - Style definition-list
********************/
.definition-list dl {
  display       : -webkit-box;
  display       : -ms-flexbox;
  display       : flex;
  -ms-flex-wrap : wrap;
  flex-wrap     : wrap
}

.definition-list dl dt {
  font-weight : 400
}

.definition-list dl dd, .definition-list dl dt {
  -webkit-box-flex : 0;
  -ms-flex         : 0 0 45%;
  flex             : 0 0 45%;
  background       : var(--color-grey-default);
  padding          : .625rem;
  margin           : .125rem
}

.definition-list dl dd:nth-of-type(2n), .definition-list dl dt:nth-of-type(2n) {
  background : #f6f6f6
}

/********************
	Part - nav-item
********************/
.nav-item .nav-link, .nav-item .nav-separtor {
  color       : var(--color-grey-font-default);
  font-weight : 700
}

.nav-item .nav-link.active, .nav-item .nav-separtor.active {
  color : var(--color-black-default)
}

/********************
	Part -separator
********************/
.separator {
  margin       : 0;
  border-color : rgba(0, 0, 0, .25)
}

/********************
	Part - page authentication
********************/
#authentication .tooltip.tooltip-bottom {
  padding : 0;
  margin  : 0
}

#authentication .custom-checkbox {
  display : -webkit-box;
  display : -ms-flexbox;
  display : flex
}

#authentication .custom-checkbox span {
  -webkit-box-flex : 0;
  -ms-flex         : 0 0 0.9375rem;
  flex             : 0 0 0.9375rem
}

#authentication .custom-checkbox label {
  padding-left : .625rem
}

#authentication .radio-inline, #identity .radio-inline {
  padding : 0
}

#authentication .radio-inline .custom-radio, #identity .radio-inline .custom-radio {
  margin-right : 0
}

/********************
	Part - order-confirmation
********************/
#order-confirmation #registration-form {
  width  : 50%;
  margin : 0 auto 1rem
}

@media (max-width : 991px) {
  #order-confirmation #registration-form {
    width : 100%
  }
}

/********************
	Part - order-items
********************/
#order-items {
  border-right : 1px solid var(--color-grey-default)
}

#order-items hr {
  border-top-color : var(--color-black-default)
}

#order-items table {
  width : 100%
}

#order-items table tr {
  height : 1.875rem
}

#order-items table tr td:last-child {
  text-align : right
}

#order-items .order-line {
  margin-top : 1rem
}

#order-items .image img {
  width         : 100%;
  border        : 1px solid gray-lighter;
  margin-bottom : 1rem
}

#order-items .details {
  margin-bottom : 1rem
}

#order-items .details .customizations {
  margin-top : .625rem
}

#order-items .qty {
  margin-bottom : 1rem
}

@media (max-width : 767px) {
  #order-items {
    border-right  : 0;
    margin-bottom : 2.5rem
  }

  #order-items .card-title {
    border-bottom  : 1px solid var(--color-grey-default);
    margin-bottom  : 1rem;
    padding-bottom : 1rem
  }

  #order-items hr {
    border-top-color : var(--color-grey-default)
  }
}

/********************
	Part - order-details
********************/
#order-details {
  padding-left : 1.875rem
}

#order-details > .card-title {
  margin-bottom : 1.875rem
}

#order-details ul {
  margin-bottom : 1.25rem
}

#order-details ul li {
  margin-bottom : .625rem
}

@media (max-width : 767px) {
  #order-details {
    padding-left : .9375rem
  }

  #order-details .card-title {
    border-bottom  : 1px solid var(--color-grey-default);
    margin-bottom  : 1rem;
    padding-bottom : 1rem
  }
}

/********************
	Part - page page-order
********************/
.page-order .table {
  margin-bottom : 0
}

.page-order table td, .page-order table th {
  padding : .5rem
}

.page-order table thead th {
  text-align : center
}

/********************
	Part - page-order-detail
********************/
.page-order-detail {
  font-size : .875rem;
  color     : var(--color-grey-font-default)
}

.page-order-detail .box {
  box-shadow    : 2px 2px 8px 0 rgba(0, 0, 0, .2);
  background    : #fff;
  padding       : 1rem;
  margin-bottom : 1rem
}

.page-order-detail h3 {
  font-size      : 1rem;
  font-weight    : 700;
  text-transform : uppercase;
  color          : var(--color-black-default);
  margin-bottom  : 1rem
}

.page-order-detail #order-infos ul {
  margin : 0
}

.page-order-detail #order-history .history-lines .history-line {
  padding       : .5rem 0;
  border-bottom : 1px solid #f6f6f6
}

.page-order-detail #order-history .history-lines .history-line:last-child {
  border-bottom : 0
}

.page-order-detail #order-history .history-lines .history-line .label {
  display       : inline-block;
  margin        : .25rem 0;
  padding       : .25rem .375rem;
  color         : #fff;
  border-radius : 3px
}

.page-order-detail .addresses {
  margin : 0 -.9375rem
}

.page-order-detail .addresses h4 {
  font-size   : 1rem;
  font-weight : 700
}

.page-order-detail #order-products.return {
  margin-bottom : 1rem
}

.page-order-detail #order-products.return th.head-checkbox {
  width : 30px
}

.page-order-detail #order-products.return td {
  padding : 1.375rem .75rem
}

.page-order-detail #order-products.return td.qty {
  min-width : 125px
}

.page-order-detail #order-products.return td.qty .current {
  width         : 30%;
  float         : left;
  text-align    : right;
  padding-right : .5rem
}

.page-order-detail #order-products.return td.qty .select {
  width        : 70%;
  float        : left;
  margin       : -.625rem 0;
  padding-left : .25rem
}

.page-order-detail #order-products.return td.qty .select select {
  text-align : center
}

.page-order-detail .order-items {
  padding : 0 !important
}

.page-order-detail .order-items .order-item {
  padding       : 1rem 1rem 0;
  border-bottom : 1px solid #f6f6f6
}

.page-order-detail .order-items .order-item .checkbox {
  width   : 30px;
  float   : left;
  padding : 0 .9375rem
}

.page-order-detail .order-items .order-item .content {
  width   : calc(100% - 30px);
  float   : left;
  padding : 0 .9375rem
}

.page-order-detail .order-items .order-item .desc {
  margin-bottom : 1rem
}

.page-order-detail .order-items .order-item .desc .name {
  font-weight : 700
}

.page-order-detail .order-items .order-item .qty {
  margin-bottom : 1rem
}

.page-order-detail .order-items .order-item .qty .q,
.page-order-detail .order-items .order-item .qty .s {
  margin-bottom : .25rem
}

.page-order-detail .messages .message {
  margin-top    : .5rem;
  border-bottom : 1px solid #f6f6f6
}

.page-order-detail .messages .message:last-child {
  border-bottom : 0
}

.page-order-detail .messages .message > div {
  margin-bottom : .5rem
}

.page-order-detail .customization {
  margin-top : .75rem
}

/********************
	Part - order-return-infos
********************/
#order-return-infos .thead-default th {
  color : var(--color-black-default)
}

#order-return-infos .customization {
  margin-top : .75rem
}

/********************
	Part - login
********************/
.login-form {
  margin-top : 15px
}

/********************
	Part - renew password
********************/
.send-renew-password-link {
  padding-left  : 10px;
  padding-right : 10px
}

.renew-password {
  margin-left : 10px
}

.renew-password .email {
  padding-bottom : 30px
}

.renew-password [type=submit] {
  margin-left : 50px
}

/********************
	Part - ???
********************/
.comments_note {
  text-align : center;
  color      : var(--color-grey-font-default)
}

.count {
  color       : var(--color-grey-font-default);
  font-weight : 700;
  position    : relative;
  bottom      : .5rem
}

/********************
	Part - #products
********************/
#products .products-select {
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-align : baseline;
  -ms-flex-align    : baseline;
  align-items       : baseline;
  -webkit-box-pack  : justify;
  -ms-flex-pack     : justify;
  justify-content   : space-between
}

#products .up {
  margin-bottom : 1rem
}

#products .up .btn-secondary,
#products .up .btn-tertiary {
  color          : var(--color-grey-font-default);
  text-transform : inherit
}

#products .up .btn-secondary .material-icons, #products .up .btn-tertiary .material-icons {
  margin-right : 0
}

/********************
	Part - advertising-block
********************/
.advertising-block {
  margin-bottom : 1.563rem
}

.advertising-block img {
  width : 100%
}

/********************
	Part - content wrapper
********************/
@media (max-width : 767px) {
  #best-sales #content-wrapper,
  #new-products #content-wrapper,
  #prices-drop #content-wrapper {
    width : 100%
  }
}

/********************
	Part - card
********************/
@media screen and (max-width : 767px) {
  .card-block {
    padding : 0
  }

  .card {
    box-shadow       : none;
    background-color : inherit;
    border           : none
  }
}

.input-color {
  position : absolute;
  opacity  : 0;
  cursor   : pointer;
  height   : 1.25rem;
  width    : 1.25rem
}

.input-container {
  position : relative
}

.input-radio {
  position : absolute;
  top      : 0;
  cursor   : pointer;
  opacity  : 0;
  width    : 100%;
  height   : 100%
}

.input-color:checked + span, .input-color:hover + span, .input-radio:checked + span, .input-radio:hover + span {
  border : 2px solid var(--color-black-default)
}

.radio-label {
  box-shadow  : 2px 2px 8px 0 rgba(0, 0, 0, .2);
  background  : #fff;
  display     : inline-block;
  padding     : .125rem .625rem;
  font-weight : 600;
  border      : 2px solid #fff
}


#main .page-content h6 {
  margin-bottom : 1.125rem
}

@media (max-width : 991px) {
  .container {
    max-width : 100%
  }
}

@media (max-width : 767px) {
  #checkout-cart-summary {
    float      : none;
    width      : 100%;
    margin-top : 1rem
  }

  .default-input {
    min-width : 100%
  }

  label {
    clear : both
  }

  .dropdown-item,
  .menu {
    padding-left : 0
  }
}