:root {
    --bg: #08090d;
    --surface: #101218;
    --surface2: #161921;
    --border: rgba(255,255,255,.07);
    --border2: rgba(255,255,255,.12);
    --accent: #5be3a0;
    --accent2: #3dc9ff;
    --accent3: #ff6b6b;
    --text: #e8eaf2;
    --muted: #6b7280;
    --muted2: #4b5563;
    --tag-bg: rgba(91,227,160,.10);
    --tag-text: #5be3a0;
}

html,
body {
    background-color: var(--bg);
}

body {
    color: var(--text);
    overflow-x: hidden;
}

.form-control,
.input-group .form-control,
.custom-select,
.dropdown-menu,
.popover,
.modal-content,
.page-list,
.table .table,
.card {
    background-color: var(--surface);
    color: var(--text)
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 15% 10%, rgba(91,227,160,.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 80%, rgba(61,201,255,.05) 0%, transparent 55%);
    pointer-events: none;
}

.bootstrap-touchspin .input-group-btn-vertical {
    position: relative;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
    display: table-cell
}

.bootstrap-touchspin .input-group-btn-vertical>.btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    margin-left: -1px;
    position: relative
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    border-radius: 0;
    border-top-right-radius: 4px
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
    margin-top: -2px;
    border-radius: 0;
    border-bottom-right-radius: 4px
}

.bootstrap-touchspin .input-group-btn-vertical i {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 9px;
    font-weight: 400
}



body,
html {
    font-family: "Manrope", sans-serif
}

*,
:after,
:before {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased
}


body,
html {
    height: 100%
}

.material-icons,
body {
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    font-family: Manrope, sans-serif;
    font-size: 1rem;
    line-height: 1.65
}

#header .top-menu a[data-depth="0"]:hover,
a:hover {
    color: var(--accent);
    text-decoration: none
}

.page-content.page-cms ul,
p {
    font-size: .9375rem;
    font-weight: 400;
    color: var(--text)
}

.custom-checkbox input[type=checkbox]+span.color,
.variant-links .color,
label .color {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin: .3125rem .5rem .3125rem .3125rem;
    cursor: pointer;
    background-size: contain;
    border: 1px solid rgba(255,255,255,.15)
}

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

.facet-label.active .custom-checkbox span.color,
.facet-label:hover .custom-checkbox span.color {
    border: 1px solid rgba(255,255,255,.15)
}

.h1,
.h2,
.h3 {
    text-transform: uppercase
}

.h1,
.h2,
.h3,
.h4,
body {
    color: var(--text)
}

.h4 {
    font-weight: 700
}

.btn-primary,
.btn-secondary {
    padding: .5rem 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 6px;
    transition: opacity .2s
}

.btn-primary:hover,
.btn-secondary:hover {
    opacity: .85;
    background: var(--accent);
    color: #000
}

.btn-primary .material-icons,
.btn-secondary .material-icons,
.btn-tertiary .material-icons {
    margin-right: .625rem
}

.btn-tertiary {
    padding: .25rem;
    margin: .25rem 0;
    font-size: .875rem;
    font-weight: 400;
    color: var(--muted);
    text-transform: lowercase;
    background-color: var(--surface)
}

.btn-tertiary .material-icons,
body#checkout section.checkout-step .step-edit .edit {
    font-size: 1rem
}

.btn-tertiary:hover {
    border: 1px solid var(--border)
}

.btn-unstyle {
    padding: 0;
    text-align: inherit;
    background-color: transparent;
    border: 0
}

.btn-unstyle:focus {
    outline: 0
}

.block_newsletter form input[type=text]:focus+button .search,
.btn-unstyle:focus .expand-more,
.search-widget form input[type=text]:focus+button .search {
    color: var(--accent)
}

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

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

.form-control-label {
    padding-top: .625rem
}

.form-control {
    padding: .5rem 1rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border)
}

.form-control:focus {
    color: var(--text);
    background-color: var(--surface2);
    outline: none;
    border-color: rgba(91,227,160,.3)
}

.input-group,
body#checkout .custom-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.input-group.focus {
    outline: none;
    border-color: rgba(91,227,160,.3)
}

.input-group .form-control:focus {
    outline: 0
}

.input-group .input-group-btn {
    display: block;
    width: auto
}

.input-group .input-group-btn>.btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding: .25rem 1rem;
    margin-left: 0;
    font-size: .6875rem;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none
}

.input-group .input-group-btn>.btn[data-action=show-password] {
    padding: .78rem 1rem;
    background: var(--accent);
    color: #000;    
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: var(--muted)
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: var(--muted)
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: var(--muted)
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: var(--muted)
}

input:active::-webkit-input-placeholder,
textarea:active::-webkit-input-placeholder {
    color: var(--text)
}

input:active::-moz-placeholder,
textarea:active::-moz-placeholder {
    color: var(--text)
}

input:active:-ms-input-placeholder,
textarea:active:-ms-input-placeholder {
    color: var(--text)
}

input:active:-moz-placeholder,
textarea:active:-moz-placeholder {
    color: var(--text)
}

.form-control-select {
    height: 2.625rem;
    padding: 0 .5rem;
    background: var(--surface) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAPklEQVR4Ae3TwREAEBQD0V/6do4SXPZg7EsBhsQ8IEmSMOsiuEfg3gL3oXC7wK0bd1G4o8X9F4yIkyQfSrIByQBjp7QuND8AAAAASUVORK5CYII=) no-repeat right .5rem center/1.25rem 1.25rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none
}

.form-control-valign {
    padding-top: .5rem
}

.form-control-comment {
    padding-top: .5rem;
    font-size: .875rem;
    color: var(--muted)
}

.form-control-submit.disabled {
    color: var(--text);
    background: var(--accent2)
}

.form-group.has-error input,
.form-group.has-error select {
    outline: .1875rem solid var(--accent3)
}

.form-group.has-error .help-block {
    color: var(--accent3)
}

#mobile_top_menu_wrapper .top-menu .sub-menu ul[data-depth="1"],
.group-span-filestyle label,
.page-order-detail #order-infos ul,
body#checkout section.checkout-step hr {
    margin: 0
}

.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default {
    padding: .5rem 1rem;
    font-size: .875rem;
    color: #000;
    text-transform: uppercase;
    background: var(--accent);
    border-radius: 0
}

.bootstrap-touchspin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
    width: auto
}

.bootstrap-touchspin input:focus {
    outline: 0
}

.bootstrap-touchspin input.form-control,
.bootstrap-touchspin input.input-group {
    float: left;
    width: 3rem;
    height: 2.5rem;
    padding: .175rem .5rem;
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border)
}

.bootstrap-touchspin .btn-touchspin {
    height: 1.3125rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text)
}

#order-items table tr.total-value,
.bootstrap-touchspin .btn-touchspin:hover {
    background-color: var(--surface2)
}

.bootstrap-touchspin .input-group-btn-vertical {
    float: left;
    width: auto;
    color: var(--text)
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down,
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    border-radius: 0
}

.bootstrap-touchspin .input-group-btn-vertical .touchspin-up::after {
    content: ""
}

.bootstrap-touchspin .input-group-btn-vertical .touchspin-down::after {
    content: ""
}

.bootstrap-touchspin .input-group-btn-vertical i {
    top: .0625rem;
    left: .1875rem;
    font-size: .9375rem
}

.radio-inline .custom-radio {
    margin-right: .5rem
}

.radio-inline:first-of-type {
    margin-right: 1rem
}

form section .form-informations {
    display: inline-block;
    margin-top: .25rem;
    margin-bottom: 1rem;
    color: var(--text)
}

form section .form-informations-option,
form section .form-informations-title {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.25rem
}

form .form-control-label {
    padding: 8px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--text)
}

.custom-radio {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: .5rem;
    vertical-align: middle;
    cursor: pointer;
    background: var(--surface);
    border: rgba(255,255,255,.15) 1px solid;
    border-radius: 50%
}

.custom-radio input[type=radio] {
    cursor: pointer;
    opacity: 0
}

.custom-radio input[type=radio]:checked+span {
    position: absolute;
    top: .125rem;
    left: .125rem;
    display: block;
    width: 12px;
    height: 12px;
    background-color: var(--accent);
    border-radius: 50%
}

.custom-checkbox input[type=checkbox]:focus+span,
.custom-radio input[type=radio]:focus+span {
    border-color: var(--muted)
}

.custom-checkbox {
    position: relative;
    word-break: break-word
}

.custom-checkbox input[type=checkbox] {
    position: absolute;
    width: 18px;
    height: 18px;
    margin-top: .25rem;
    cursor: pointer;
    opacity: 0
}

.custom-checkbox input[type=checkbox]+span {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin-right: .5rem;
    vertical-align: middle;
    pointer-events: none;
    cursor: pointer;
    border: 1px rgba(255,255,255,.15) solid
}

.custom-checkbox input[type=checkbox]+span .checkbox-checked {
    display: none;
    margin: -.125rem;
    font-size: 1.25rem;
    color: var(--text)
}

.custom-checkbox input[type=checkbox]:checked+span .checkbox-checked {
    display: block
}

.custom-checkbox label,
body#checkout #delivery>label,
body#checkout section.checkout-step #customer-form .form-control-label,
body#checkout section.checkout-step #delivery-address .form-control-label,
body#checkout section.checkout-step #invoice-address .form-control-label,
body#checkout section.checkout-step #login-form .form-control-label {
    text-align: left
}

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

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

.thumb-mask>.mask {
    position: relative;
    width: 3.438rem;
    height: 3.438rem;
    margin: .625rem 0;
    overflow: hidden;
    border: var(--border) 1px solid
}

.thumb-mask>.mask img {
    width: 55px;
    height: 55px
}

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

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

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

.definition-list dl dd:nth-of-type(even),
.definition-list dl dt:nth-of-type(even),
.product-features>dl.data-sheet dd.value:nth-of-type(even),
.product-features>dl.data-sheet dt.name:nth-of-type(even) {
    background: var(--surface)
}

.help-block {
    margin-top: .625rem
}

.btn.disabled,
.btn.disabled:hover {
    color: var(--muted);
    background: var(--surface);
    opacity: 1
}

.alert-warning .material-icons {
    padding-top: .3125rem;
    margin-right: .625rem;
    font-size: 2rem;
    color: #ff9a52
}

.alert-warning .alert-text {
    padding-top: .625rem;
    font-size: .9375rem
}

.alert-warning .alert-link {
    padding: .3125rem 1.25rem;
    margin-left: .625rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--muted);
    border-width: 2px;
    border-radius: 2px
}

.alert-warning ul li:last-child .alert-link {
    color: #fff
}

.alert-warning .warning-buttons {
    margin-top: .3125rem
}

.btn-tertiary-outline {
    color: var(--muted);
    background-color: transparent;
    background-image: none;
    border: .15rem solid var(--muted);
    border-color: var(--muted)
}

.btn-tertiary-outline:hover {
    color: var(--text);
    border-color: var(--text)
}

.alert {
    font-size: .8125rem
}

.nav-item .nav-link,
.nav-item .nav-separtor {
    font-weight: 600;
    color: var(--muted)
}

#mobile_top_menu_wrapper .top-menu,
.nav-item .nav-link.active,
.nav-item .nav-separtor.active,
.page-addresses .address .address-footer a:hover,
body#checkout,
body#checkout section.checkout-step .add-address a {
    color: var(--text)
}

.separator {
    margin: 0;
    border-color: var(--border)
}

main {
    position: relative;
    z-index: 1
}

.card {
    background: var(--surface);
    border: 1px solid var(--border)
}