/* Reset */
* {
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; border: none; padding: 0; margin: 0; box-sizing: border-box; list-style: none; text-decoration: none;
}


/* Defaults */
body {
    background: #03a9f0;
}
body.overflow {
    overflow: hidden;
}
h1 {
    font-size: 25px; color: #303030; font-weight: 400;
}
h2 {
    font-size: 20px; color: #303030; font-weight: 400;
}
h4 {
    font-size: 14px; color: #303030; font-weight: 700;
}
p {
    line-height: 20px;
}
a {
    color: #303030;
}
a:hover {
    color: #23527c;
}
strong {
    font-weight: 600;
}
::placeholder {
    color: #c7c7c7;
}


/* Font faces */
@font-face {
    font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url('../fonts/opensans-300.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/opensans-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('../fonts/opensans-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/opensans-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'icons'; src: url('../fonts/icons.eot'); src: url('../fonts/icons.eot?#fix') format('embedded-opentype'), url('../fonts/icons.woff') format('woff'), url('../fonts/icons.ttf') format('truetype'), url('../fonts/icons.svg#icons') format('svg'); font-weight: normal; font-style: normal;
}


/* Key frames */
@keyframes flipInX {

    from {
        transform: perspective(2000px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0;
    }
    40% {
        transform: perspective(2000px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in;
    }
    60% {
        transform: perspective(2000px) rotate3d(1, 0, 0, 10deg); opacity: 1;
    }
    80% {
        transform: perspective(2000px) rotate3d(1, 0, 0, -5deg);
    }
    to {
        transform: perspective(2000px);
    }
}

@keyframes bounceInDown {

    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0; transform: translate3d(0, -2000px, 0);
    }
    60% {
        opacity: 1; transform: translate3d(0, 25px, 0);
    }
    75% {
        transform: translate3d(0, -10px, 0);
    }
    90% {
        transform: translate3d(0, 5px, 0);
    }
    to {
        transform: none; opacity: 1;
    }
}

@keyframes sk-bouncedelay {

    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

@keyframes fadeInDown {

    0% {
        z-index: 10; opacity: 0; transform: translate3d(0, -100%, 0);
    }
    10% {
        opacity: 1; transform: none;
    }
    90% {
        opacity: 1;
    }
    99% {
        position: relative;
    }
    100% {
        opacity: 0; position: absolute;
    }
}

@keyframes progress {

    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes foldCubeAngle {

    0%, 10% {
        transform: perspective(140px) rotateX(-180deg); opacity: 0;
    }
    25%, 75% {
        transform: perspective(140px) rotateX(0deg); opacity: 1;
    }
    90%, 100% {
        transform: perspective(140px) rotateY(180deg); opacity: 0;
    }
}

@keyframes modalFadeIn {

    0% {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); height: auto;
    }
    100% {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); height: auto;
    }
}

@keyframes highlight {
    16% {
        background-color: #e0f5ff;
    }
    32% {
        background-color: #fff;
    }
    48% {
        background-color: #e0f5ff;
    }
    64% {
        background-color: #fff;
    }
    80% {
        background-color: #e0f5ff;
    }
    100% {
        background-color: #fff;
    }
}


/* Icons */
[class*='icon-'] { text-decoration: none; position: relative; text-align: center; font-family: 'icons', fantasy; }
.icon-refresh:before { content: '\a017'; }
.icon-message:before { content: '\b086'; }
.icon-list:before { content: '\e2a0'; }
.icon-toggle:before { content: '\b205'; }
.icon-view:before { content: '\e1d6'; }
.icon-user:before { content: '\e901'; }
.icon-bell:before { content: '\e902'; }
.icon-bin:before { content: '\e14a'; }
.icon-logout:before { content: '\e274'; }
.icon-menu:before { content: '\ec71'; }
.icon-unlink:before { content: '\ec9c'; }
.icon-home:before { content: '\b0a2'; }
.icon-settings:before { content: '\b020'; }
.icon-close:before { content: '\b139'; }
.icon-warning:before { content: '\ea07'; }
.icon-success:before { content: '\e26a'; }
.icon-info:before { content: '\ea0c'; }
.icon-plus:before { content: '\ea0a'; }
.icon-search:before { content: '\e0b1'; }
.icon-target:before { content: '\e175'; }
.icon-notification:before { content: '\ea08'; }
.icon-arrow-up:before { content: '\f106'; }
.icon-arrow-down:before { content: '\f107'; }
.icon-arrow-left:before { content: '\f104'; }
.icon-arrow-right:before { content: '\f105'; }
.icon-clock:before { content: '\e94e'; }
.icon-coin-dollar:before { content: '\e93b'; }
.icon-coin-euro:before { content: '\e93c'; }
.icon-coin-pound:before { content: '\e93d'; }
.icon-ellipsis-horizontal:before { content: '\f141'; }
.icon-company:before { content: '\e00b'; }
.icon-cart:before { content: '\e93a'; }

span.icon-bg {
    background-color: #fff; border: 1px solid #ddd; width: 50px; display: inline-block; transition: background-color 0.3s; font-size: 16px; cursor: pointer; border-radius: 3px; height: 100%; display: flex; justify-content: center; flex-direction: column;
}
span.icon-bg:hover {
    background-color: #eee; color: #23527c;
}


/* Main header */
header.main {
    background: #303030; box-shadow: 0 0 20px rgba(0,0,0,.3); height: 60px;
}
header.main > .container {
    display: flex; justify-content: space-between; max-width: 1500px; margin: auto; padding: 0 2%; height: 100%;  align-items: center;
}
header.main img {
    max-height: 45px;
}
header.main .bar {
    display: flex; align-items: center;
}

/* Main header cart */
header.main .bar .cart {
    position: relative; cursor: pointer; margin-right: 30px;
}
header.main .bar .cart .icon-cart {
    font-size: 22px; color: #fff;
}
header.main .bar .cart-amount {
    position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #039ee1; bottom: -5px; line-height: 22px; text-align: center; color: #fff; left: 15px;
}

/* Main header user */
header.main .bar .user {
    cursor: pointer; position: relative;
}
header.main .bar .user .menu {
    z-index: 5; overflow: hidden; position: absolute; right: 0; top: 54px; background: #343434; box-shadow: 0 6px 12px rgba(0,0,0,.175); max-width: 300px; min-width: 225px; backface-visibility: visible; animation-name: flipInX; display: none;
}
header.main .bar .user label {
    cursor: pointer;
}
header.main .bar .user input {
    display: none;
}
header.main .bar .user input:checked + .menu {
    animation-duration: 0.75s; animation-fill-mode: both; display: block;
}
header.main .bar .user .menu li a {
    color: #fff; text-decoration: none; padding: 5px 20px 5px 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header.main .bar .user .menu li [class*='icon-'] {
    min-width: 20px; margin-right: 15px; display: inline-block; color: #fff; font-size: 14px;
}
header.main .bar .user .menu li {
    line-height: 36px; white-space: nowrap; transition: background-color .1s; background-color: #343434;
}
header.main .bar .user .menu li:hover {
    background-color: #03a9f4;
}
@media(max-width: 500px) {

    header.main .bar .user .menu {
        right: 0; left: 0; top:60px; width: auto; max-width: 100%;
    }
    header.main .bar .user {
        position: initial;
    }
}


/* Main navigation */
nav.main .main-menu {
    display: flex; flex-wrap: wrap; width: 100%;
}
nav.main input.nav {
    display: none;
}
@media(min-width: 750px) {

    nav.main {
        margin-top: 30px;
    }
    nav.main header {
        display: none;
    }
    nav.main label.nav {
        cursor: pointer; padding: 13px 25px; width: auto; color: #fff; text-align: center; font-size: 14px; transition: all 0.1s ease-in-out; border-top-right-radius: 5px; border-top-left-radius: 5px;
    }
    nav.main label.nav [class*="icon"] {
        display: none;
    }
    nav.main label.nav:hover {
        background: #303030;
    }
    nav.main .content {
        order: 99;
    }
    nav.main .content a {
        color: #444; text-decoration: none; display: block; padding: 20px 25px; cursor: pointer;
    }
    nav.main .content a:hover {
        text-decoration: underline;
    }
    nav.main input.nav:checked + label.nav + .content {
        display: flex;
    }
    nav.main input.nav:focus + label.nav {
        z-index: 1;
    }
    nav.main input.nav:checked + label.nav {
        color: #000; background: #fff;
    }
    nav.main .content {
        display: none; background: #fff; width: 100%; box-shadow: 0 20px 83px -32px rgba(0,0,0,0.12);
    }
}
@media(max-width: 749px) {

    nav.main {
        margin-bottom: 50px;
    }
    nav.main header {
        background: #262626; cursor: pointer; display: flex; justify-content: space-between; box-shadow: 0 10px 20px -5px rgba(0,0,0,.3); position: absolute; left: 0; right: 0; padding: 0 2%; align-items: center; height: 50px
    }
    nav.main header .title {
        color: #fff; font-size: 16px;
    }
    nav.main header .icon-menu {
        color: #fff; font-size: 22px;
    }
    nav.main header label {
        display: flex; height: 100%; width: 100%; color: #fff; justify-content: space-between; align-items: center; cursor: pointer;
    }
    nav.main header label span {
        user-select: none;
    }
    nav.main .main-menu {
        max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; position: absolute; left: 0; right: 0; top: 50px; background: #c8c8c8; z-index: 4;
    }
    nav.main #main-menu:checked + .main-menu {
        max-height: 500px; box-shadow: 0 20px 50px 0 rgba(0,0,0,.3);
    }
    nav.main .main-menu label {
        white-space: nowrap; transition: background-color .1s; background-color: #343434; width: 100%; width: 100%; display: flex; color: #fff; padding: 10px 2%; cursor: pointer;
    }
    nav.main .content {
        background: #fff; width: 100%; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden;
    }
    nav.main input.nav:checked + label.nav + .content {
        max-height: 250px;
    }
    nav.main input.nav + label.nav {
        display: flex; justify-content: space-between;
    }
    nav.main .main-menu label.nav [class*="icon"] {
        color: #a6a6a6; font-size: 18px;
    }
    nav.main .main-menu label.nav:hover [class*="icon"] {
        color: #fff;
    }
    nav.main input.nav + label.nav .icon-arrow-right, nav.main input.nav:checked + label.nav .icon-arrow-down {
        display: block;
    }
    nav.main input.nav:checked + label.nav .icon-arrow-right, nav.main input.nav + label.nav .icon-arrow-down  {
        display: none;
    }
    nav.main .content a {
        display: block; padding: 10px 2%; cursor: pointer;
    }
    nav.main .content a:before {
        content: '- ';
    }
    nav.main .content a:hover {
        background: #f5f5f5; color: #000;
    }
}


/* Breadcrumbs */
nav.breadcrumb {
    width: 100%; margin: 30px 0 15px 0;
}
nav.breadcrumb .crumbs {
    background: #fff; padding: 15px 20px; box-shadow: 0 0 20px rgba(0,0,0,.3);
}
nav.breadcrumb .crumbs .title {
    margin-bottom: 5px;
}
nav.breadcrumb .crumbs .url {
    word-wrap: break-word;
}
nav.breadcrumb .crumbs .url a {
    text-decoration: underline; cursor: pointer; transition: color 0.4s;
}
nav.breadcrumb .crumbs .url a:hover {
    color: #03a9f4;
}
nav.breadcrumb .crumbs .breakslash {
    padding: 0 5px;
}


/* Box */
.boxes {
    display: grid; grid-template-columns: /*1fr 1fr*/ 1fr; column-gap: 20px; row-gap: 30px; margin: 15px 0;
}
.boxes .box {
    box-shadow: 0 0 20px rgba(0,0,0,.3); background: #fff; position: relative; min-width: 0;
}
.boxes .box .title {
    padding: 15px 20px; background: #f9f9f9; border-bottom: 1px solid #ccc;
}
.boxes .box .content {
    padding: 20px;
}
.boxes .box .content .scroll {
    overflow-y: auto; width: 100%;
}


/* Footer */
footer {
    background: #333; margin-top: 15px
}
footer .copyright {
    color: #fff; padding: 25px 0; text-align: center;
}


/* Input checkbox */
input[type="checkbox"] {
    vertical-align: middle; position: relative; bottom: 1px;
}
.checkbox-container {
    display: block; position: relative; cursor: pointer; user-select: none; height: 14px;
}
.checkbox-container input {
    display: none;
}
.checkbox-container input:checked ~ .checkmark {
    background: #03a9f0 linear-gradient(to bottom, rgba(3, 169, 240, 1) 0%, rgba(3, 169, 240, 1) 100%); border: none;
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox-container .checkmark {
    height: 17px; width: 17px; background: linear-gradient(to bottom, rgba(236,236,236,1) 0%, rgba(221,221,221,1) 100%); border-radius: 3px; border: 1px solid #cecece; display: inline-block;
}
.checkbox-container .checkmark:after {
    content: ''; position: absolute; display: none; width: 3px; height: 8px; margin: 2px 0 0 6px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);
}


/* Input text / password */
input[type="text"], input[type="password"], input[type="date"], input[type="number"] {
    box-shadow: 0 0 0 30px white inset; font-size: 14px; color: #303030; border: 1px solid #ddd; outline: none; background-color: #fff; border-radius: 3px; display: block; transition: border-color .15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%;
}
input[type="text"]:focus, input[type="password"]:focus {
    border-color: #03a9f4;
}
input.input-label {
    padding: 23px 12px 6px 12px;
}
input.input-default {
    padding: 7px 12px;
}
input.input-label:disabled, input.input-default:disabled {
    color: #a5a5a5;
}


/* Input select box */
select {
    font-size: 14px; color: #303030; border: 1px solid #ddd; outline: none; border-radius: 3px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; background: #fff;
}
select:disabled {
    background: #f5f5f5;
}
select option:disabled {
    color: #a5a5a5;
}
select:focus {
    border-color: #03a9f4; outline: none;
}
select.input-label {
    padding: 22px 8px 5px 8px;
}
select.input-default {
    padding: 8px 12px;
}

/* Input textarea */
textarea.input-label {
    font-size: 14px; color: #303030; min-height: 200px; border: 1px solid #ddd; outline: none; background-color: #fff; border-radius: 3px; display: block; padding: 23px 12px 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%;
}
textarea.input-label:focus {
    border-color: #03a9f4; outline: none;
}


/* Buttons */
.btn {
    background-color: #03a9f4; font-size: 14px; font-weight: 400; color: #fff; padding: 9px 24px; cursor: pointer; transition: background-color 0.5s; outline: none;
}
.btn:hover {
    background-color: #333;
}
.btn.warning {
    background-color: #f39c12;
}
.btn.warning:hover {
    background-color: #333;
}
.btn + .btn {
    margin-left: 10px;
}
a.btn {
    display: inline-block; text-decoration: none;
}
a.btn:hover {
    color: #fff;
}
.file-btn {
    position: relative; text-decoration: none; cursor: pointer; color:#fff; display: inline-block;
}
.file-btn:hover {
    color: #fff; cursor: pointer;
}
.file-btn input{
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}


/* Floating labels */
.form li {
    position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;
}
.form li.align-right {
    justify-content: end; align-items: end;
}
.form li:not(:first-child) {
    margin-top: 20px;
}
.form li .input {
    position:relative; table-layout: fixed; white-space: nowrap; text-overflow: ellipsis; width: 100%;
}
.form li > *:not(:first-child) {
    margin-left: 15px;
}
.form li label {
    position: absolute; transition: .2s; font-size: 14px; left: 13px; top: 16px; color: #c7c7c7; cursor: text; user-select: none;
}
.form li input:focus + label, .form li input:valid + label, .form li input:disabled + label {
    top: 5px; font-size: 12px;
}
.form li select:focus + label, .form li select:valid + label, .form li select:disabled + label {
    top: 5px; font-size: 12px;
}
.form li textarea:focus + label, .form li textarea:valid + label, .form li textarea:disabled + label {
    top: 5px; font-size: 12px;
}
.form li .icons {
    display: flex; align-items: center;
}
.form li .icons > *, .form li .icons .icon-bg {
    height: 100%;
}
.form li .icons > *:not(:first-child) {
    margin-left: 5px;
}


/* Errors */
.input-wrapper {
    position: relative; flex-grow: 1;
}
input.error, select.error, textarea.error {
    border: 1px solid #d2664f;
}
.error + label + .error-icon {
    opacity: 1; z-index: 2; transform: translate3d(0, -50%, 0);
}
.error:focus + label + .error-icon + .error-text {
    z-index: 3; opacity: 1; transform: translate3d(0, 0, 0);
}
.error-text {
    position: absolute; transform: translate3d(0, 8px, 0); right: 11px; top: -40px; padding: 6px 10px; background: rgba(0,0,0,0.8); color: #fff; font-size: 13px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: all 0.15s ease; z-index: 0;
}
.error-text:before {
    content: ''; position: absolute; height: 0; width: 0; left: initial; right: 15px; top: 100%; bottom: initial; border-style: solid; border-width: 6px; border-color: transparent; margin-left: -6px; border-bottom-width: 0; border-top-color: rgba(0,0,0,0.8);
}
.error-icon {
    position: absolute; transform: translate3d(0, 8px, 0); right: 20px; width: 24px; height: 24px; line-height: 24px; top: 50%; text-align: center; font-size: 18px; font-weight: bold; background: #d2664f; color: #fff; border-radius: 50%; opacity: 0; transition: all 0.15s ease; z-index: 0;
}
[class*='input-icon-'] + .error-icon {
    right: 60px;
}
select + label + .error-icon {
    right: 30px;
}
textarea + label + .error-icon {
    top: 20px; right: 20px;
}
textarea + label + .error-icon.active {
    transform: translate3d(0, 0, 0);
}
textarea[area-invalid="true"] {
    padding-right: 35px;
}
input[area-invalid="true"] {
    padding-right: 48px;
}


/* Table options */
.table-options {
    display: flex; margin-bottom: 20px; align-items: center;
}
.table-options .options {
    margin-left: auto;
}
.table-options .options li {
    border: 1px solid #ddd; display: inline-block; transition: background-color 0.3s; cursor: pointer; position: relative; border-radius: 3px;
}
.table-options .options li:hover {
    background-color: #eee;
}
.table-options .options li + li {
    margin-left: 5px;
}
.table-options .options [class*="icon"] {
    padding: 10px 12px; display: inline-block;
}


/* Tables */
table {
    width: 100%;
}
table, tr, th, td {
    border: 1px solid #dddddd; border-collapse: collapse; text-align: left;
}
table tr:hover {
    background: #fcfcfc;
}
td, th {
    border-collapse: collapse; border-bottom: 1px solid #dddddd; white-space: nowrap;
}
th {
    color: #333; font-size: 14px; font-weight: 700; padding: 8px; text-align: left; background: #f5f5f5;
}
td {
    color: #333; font-size: 14px; padding: 8px;
}
table [class*='td-'] a + span, table [class*='td-'] a + a, table [class*='td-'] span + a, table [class*='td-'] span + span {
    margin-left: 5px;
}
table .not-found {
    text-align: center; padding: 30px;
}
table td.center, table th.center {
    width: 50px; text-align: center;
}
table td.icons {
    display: flex; border: none;
}
table td.icons .icon-bg {
    height: 45px;
}
table td.icons .icon-bg:not(:first-child) {
    margin-left: 5px;
}


/* Field sets and legends */
legend {
    padding: 0 5px; font-weight: 600;
}
fieldset {
    border: 1px solid #c7c7c7; padding: 20px; position: relative; width: 100%;
}
fieldset .close {
    background: #fff; height: 28px; width: 28px; text-align: center; line-height: 28px; display: block; border-radius: 50%; position: absolute; right: -14px; top: -25px; cursor: pointer;
}
fieldset .close .icon-close {
    color: #03a9f4; font-size: 30px; transition: color .3s;
}
fieldset .close .icon-close:hover {
    color: #303030;
}


/* Pagination */
.pagination {
    display: flex; align-items: center;
}
.pagination select {
    border: 1px solid #ccc; padding: 5px; margin: 0 2px 0 5px; width: auto;
}
.pagination .pages {
    margin-left: auto;
}
.pagination .pages li {
    display: inline-block; margin-left: -1px;
}
.pagination .pages a {
    background-color: #fff; text-decoration: none; cursor: pointer; border: 1px solid #ddd; color: #337ab7; padding: 6px 12px; display: block; transition: background-color 0.3s;
}
.pagination .pages a:hover {
    background-color: #eee; color: #23527c;
}
.pagination .pages a.active {
    background-color: #03a9f4; border-color: #03a9f4; color: #fff;
}
.pagination.table-pagination {
    border: 1px solid #ddd; border-top: none; border-collapse: collapse; padding: 20px 8px;
}
@media screen and (max-width: 900px) {

    .pagination {
        flex-wrap: wrap;
    }
    .pagination .details {
        flex-basis: 100%; text-align: center; margin-bottom: 20px;
    }
    .pagination .pages {
        flex-basis: 100%; text-align: center;
    }
}
@media screen and (max-width: 480px) {

    .pagination .details {
        margin-bottom: 0;
    }
    .pagination .details span {
        display: block; margin-bottom: 12px;
    }
}


/* Form wizard */
.wizard {
    display: flex; margin-bottom: 30px;
}
.wizard li {
    flex: 1; text-align: center; position: relative; background: #fff;
}
.wizard li span {
    display: inline-block; border-radius: 50%; border: 3px solid #f3f3f3; height: 50px; width: 50px; line-height: 46px; position: relative; background: #fff; z-index: 1;
}
.wizard li p {
    font-size: 13px; margin-top: 5px;
}
.wizard li:after, .wizard li:before {
    content: ''; display: block; position: absolute; z-index: 0; top: 25px; width: 50%; height: 3px; background-color: #f3f3f3;
}
.wizard li:after {
    right: 0;
}
.wizard li:before {
    left: 0;
}
.wizard li:first-of-type:before {
    content: none;
}
.wizard li:last-of-type:after {
    content: none;
}
.wizard li.done-100 span {
    background: #03a9f0; color: #fff; border: 3px solid #03a9f0;
}
.wizard li.done-50 span {
    border: 3px solid #03a9f0;
}
.wizard li.done-100:after, .wizard li.done-50:before {
    background-color: #03a9f0;
}


/* Auto suggest */
.autosuggest {
    position: absolute; margin: -2px 0; background: #fff; z-index: 2; width: 100%; color: #c7c7c7; max-height: 176px; box-shadow: 0 6px 20px -10px rgba(0,0,0,.3); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #03a9f4; border-top: none; opacity: 1; transition: .2s
}
.autosuggest li {
    padding: 8px 12px; cursor: pointer; text-align: left;
}
.autosuggest li.active {
    background: #03a9f0; color: #fff;
}
.suggest-transition-enter-active, .suggest-transition-leave-active {
    transition-duration: .15s; opacity: 1;
}
.suggest-transition-enter, .suggest-transition-leave-to {
    opacity: 0;
}


/* Password meter */
input + label + .password-meter {
    margin-top: 8px;
}
.password-meter {
    width: 100%; height: 20px; background-color: #f5f5f5; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); border-radius: 3px; overflow: hidden;
}
.password-meter .progress {
    transition: all 0.5s; background-color: #fff; width: 0; height: 100%;
}
.password-meter .progress.very-weak {
    background-color: #d9534f; width: 5%;
}
.password-meter .progress.weak {
    background-color: #e35e4e; width: 25%;
}
.password-meter .progress.less-weak {
    background-color: #f0764e; width: 35%;
}
.password-meter .progress.medium {
    background-color: #f09b4e; width: 50%;
}
.password-meter .progress.better {
    background-color: #ccb955; width: 60%;
}
.password-meter .progress.strong {
    background-color: #71c567; width: 70%;
}
.password-meter .progress.stronger {
    background-color: #52ac5a; width: 85%;
}
.password-meter .progress.very-strong {
    background-color: #4e984e; width: 100%;
}


/* Establishments */
.establishments {
    display: flex; gap: 5%; flex-flow: row wrap;
}
.establishment {
    text-align: center; background: #03a9f4; color: #fff; padding: 2% 4%; cursor: pointer; transition: background-color 0.5s; flex-basis: 30%;
}
.establishment:hover {
    background-color: #333;
}
.establishment h4{
    font-weight: 600; color: #fff; margin-top: 5px;
}
.establishment [class*='icon-'] {
    font-size: 30px;
}


/* Loader */
.loader {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; display: none;
}
.loading {
    position: relative;
}
.loading > *:not(.loader){
    filter: blur(1.8px);
}
.loading .loader {
    display: flex;
}


/* Loader folding cube */
.folding-cube {
    display: none;
}
.loading [class*='folding-cube'] {
    margin: 20px auto; width: 40px; height: 40px; position: relative; transform: rotateZ(45deg); display: block;
}
.loading .folding-cube-small {
    width: 20px; height: 20px;
}
.loading [class*='folding-cube'] .cube {
    float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1);
}
.loading [class*='folding-cube'] .cube:before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #03a9f0; animation: foldCubeAngle 2.4s infinite linear both; transform-origin: 100% 100%;
}
.loading .black [class*='folding-cube'] .cube:before {
    background-color: #000;
}
.loading [class*='folding-cube'] .cube:nth-child(1):before {
    animation-delay: 0.3s;
}
.loading [class*='folding-cube'] .cube:nth-child(2) {
    transform: scale(1.1) rotateZ(90deg);
}
.loading [class*='folding-cube'] .cube:nth-child(2):before {
    animation-delay: 0.6s;
}
.loading [class*='folding-cube'] .cube:nth-child(3) {
    transform: scale(1.1) rotateZ(270deg);
}
.loading [class*='folding-cube'] .cube:nth-child(3):before {
    animation-delay: 1.2s;
}
.loading [class*='folding-cube'] .cube:nth-child(4) {
    transform: scale(1.1) rotateZ(180deg);
}
.loading [class*='folding-cube'] .cube:nth-child(4):before {
    animation-delay: 0.9s;
}


/* Tabs */
.tabs {
    display: flex; flex-wrap: wrap;
}
.tabs input.nav {
    position: absolute; opacity: 0;
}
.tabs label.nav {
    cursor: pointer;  padding: 0 25px; line-height: 47px;
}
.tabs input.nav:focus + label.nav {
    z-index: 1;
}
.tabs input.nav:checked + label.nav {
    color: #000; background: #fff;
}
.tabs .content {
    display: none; padding: 20px; background: #fff; width: 100%; box-shadow: 0 20px 83px -32px rgba(0,0,0,0.12);
}
.tabs input.nav:checked + label.nav + .content {
    display: block;
}
@media(min-width: 750px) {

    .tabs label.nav {
        width: auto; color: #fff; text-align: center; font-size: 14px; transition: all 0.1s ease-in-out; border-top-right-radius: 5px; border-top-left-radius: 5px;
    }
    .tabs label.nav:hover {
        background: #303030;
    }
    .tabs .content {
        order: 99;
    }
}
@media(max-width: 749px) {

    .tabs label.nav {
        width: 100%; background: #f9f9f9; border-bottom: 1px solid #ccc;
    }
    .tabs input.nav:checked + label.nav {
        background: #f9f9f9;
    }
    .tabs {
        box-shadow: 0 0 20px rgba(0,0,0,.3);
    }
}


/* Toggle columns */
.toggle-columns .multi-select, .toggle-columns > label + input {
    display: none;
}
.toggle-columns > label {
    cursor: pointer;
}
.toggle-columns > label + input:checked + .multi-select {
    display:block; border: 1px solid rgba(0,0,0,.15); box-shadow: 0 6px 12px rgba(0,0,0,.175); border-radius: 4px; min-width: 160px; position: absolute; z-index: 3; background: #fff; max-height: 200px; overflow-y: auto; top: 100%; right: 0; margin-top: 5px;
}
.toggle-columns .multi-select label {
    width: 100%; display: flex; height: 40px; padding: 0 10px; align-items: center;
}
.toggle-columns .multi-select label:hover {
    background: #f5f5f5;
}
.toggle-columns .multi-select label .text {
    padding-left: 10px;
}


/* Miscellaneous */
.address-box:not(:first-child) {
    margin-top: 40px; padding-top: 25px; border-top: 1px dashed #a0a0a0;
}
#app > .container {
    display: grid; max-width: 1500px; margin: auto; padding: 0 2%; position: relative;
}