@import url("https://use.typekit.net/wbs3mzl.css");

/* ===== Tags ===== */

html,
body {
    margin: 0;
    padding: 0;
}

body[class^="selling-"], 
body[class*=" selling-"],
body[class^="hub-"], 
body[class*=" hub-"] {
    background-color: #e3e8ee;
}

body[class^="hub-"] a:not(.text-link), 
body[class*=" hub-"] a:not(.text-link),
body[class^="hub-"] #nav-tabs .nav-link,
body[class*=" hub-"] #nav-tabs .nav-link {
    color: #191919;
}

h1, h2, h3, h4, h5, h6 {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
}

select {
    cursor: pointer;
}

::-ms-clear {
    width: 0;
    height: 0;
    display: none;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #ccc;
    opacity: 1;
    text-overflow: ellipsis;
    background-color: unset;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
    color: #ccc;
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder,
select::-ms-input-placeholder {
    color: #ccc;
}

.form-control:focus {
    color: #212529;
}

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.2em; 
    margin: 0.6em 0;
    border-radius: 0.1em;
    -webkit-border-radius: 0.1em;
    -moz-border-radius: 0.1em;
    background: #ccc; 
    outline: none; 
    cursor: pointer; 
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 1em; 
    height: 1em; 
    background: #29c74d;
    /* background: #fff;
    border: 0.3em solid #2C3E50; */
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    cursor: pointer; 
}

.slider::-moz-range-thumb {
    width: 1em;
    height: 1em;
    background: #29c74d;
    /* background: #fff;
    border: 0.3em solid #2C3E50; */
    cursor: pointer;
}

/* ===== Common Classes ===== */

.no-overflow {
    overflow: hidden;
}

.text-overflow-hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rtl {
    direction: rtl;
}

.nobreak {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hide {
    display: none;
}

.clickable {
    cursor: pointer;
}

.disabled {
    pointer-events: none;
}

.view {
    padding: 15px 0;
}

.hub .view {
    padding: 0;
}

.mt-10, .my-10 {
    margin-top: 6rem !important;
}

.mb-10, .my-10 {
    margin-bottom: 6rem !important;
}

.mr-10, .mx-10 {
    margin-right: 6rem !important;
}

.ml-10, .mx-10 {
    margin-left: 6rem !important;
}

.pt-10, .py-10 {
    padding-top: 6rem !important;
}

.pb-10, .py-10 {
    padding-bottom: 6rem !important;
}

.pr-10, .px-10 {
    padding-right: 6rem !important;
}

.pl-10, .px-10 {
    padding-left: 6rem !important;
}

.view>h2 {
    margin-top: 0;
}

.simple-input {
    border: 0;
    border-bottom: 1px solid transparent;
    outline: 0;
}

.simple-input.invalid {
    color: #d43f3a;
    border-color: #d43f3a;
}


.sticky {    
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 10px;
    z-index: 1;
}

.print-only {
    display: none;
}

.print-hide {
    display: block;
}

.base-url {
    white-space: nowrap;
    color: var(--gray);
    font-size: 1em;
}

.text-xl {
    font-size: 1.4em;
}

.text-large,
.text-lg {
    font-size: 1.2em;
}

.text-sm,
.text-small {
    font-size: 0.85em;
}

.text-link {
    cursor: pointer;
    color: #29c74d;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.text-link:hover {
    color: #0f7864;
    text-decoration: underline;
}

.text-link.text-warning {
    color: #F39C12 !important;
}

.text-link.text-danger {
    color: #E74C3C !important;
}

.text-link.text-primary {
    color: #2c3e50 !important;
}

.text-green {
    color: #29c74d;
}

.btn-upgrade {
    text-decoration: none !important;
}

.badge-green {
    background-color: #29c74d !important;
    color: #fff;
}

.badge-success {
    background-color: #00CCFF !important;
    color: #fff;
}

.badge-lg {
    line-height: 1.8em !important;
    font-size: 0.8em !important;
}

.result-spec.active {
    background-color: #fafffb !important;
}

#selling-billinghistory .result-details {
    display: flex !important;
}

.plan-pending-term-end {
    background-color: #fcf9e9 !important;
}

.plan-estimated-bill {
    background-color: #fffffb !important;
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

.nowrap {
    white-space: nowrap;
}

/* ===== Status Badges ===== */

.badge.status-ordered {
    background: #00CCFF !important;
    color: var(--white) !important;
}

.badge.status-processing,
.badge.status-outfordelivery,
.badge.status-readyforcollection {
    background: #F39C12 !important;
    color: var(--white) !important;
}

.badge.status-completed,
.badge.status-dispatched,
.badge.status-delivered,
.badge.status-collected {
    background: #269f42 !important;
    color: var(--white) !important;
}

.badge.status-onhold,
.badge.status-waitingforstock {
    background: #8736e2 !important;
    color: var(--white) !important;
}

.badge.status-cancelled,
.badge.status-discontinued {
    background: #95a5a6 !important;
    color: var(--white) !important;
}

.badge-active {
    background: #29c74d;
    border: solid 2px #fff;
}

/* ===== Payment Status Badges ===== */

.badge.paymentstatus-refunded,
.badge.paymentstatus-paid {
    background: #269f42 !important;
    color: var(--white) !important;
}

.badge.paymentstatus-overpaid,
.badge.paymentstatus-unpaid {
    background: #F39C12 !important;
    color: var(--white) !important;
}

.badge.paymentstatus-partpaid,
.badge.paymentstatus-partrefund {
    background: #8736e2 !important;
    color: var(--white) !important;
}

/* ===== Status Messages ===== */

.message.status-ordered {
    border: 3px solid #00CCFF !important;
    background: var(--white) !important;
    color: #212529 !important;
}

.message.status-processing,
.message.status-outfordelivery,
.message.status-readyforcollection {
    border: 3px solid #F39C12 !important;
    background: var(--white) !important;
    color: #212529 !important;
}

.message.status-completed,
.message.status-dispatched,
.message.status-delivered,
.message.status-collected,
.message-success {
    border: 3px solid #269f42 !important;
    background: var(--white) !important;
    color: #212529 !important;
}

.message-danger {
    border: 3px solid rgb(185, 60, 60) !important;
    background: rgb(185, 60, 60) !important;
    color: rgb(255, 255, 255) !important;
}

.message.status-onhold,
.message.status-waitingforstock {
    border: 3px solid #8736e2 !important;
    background: var(--white) !important;
    color: #212529 !important;
}

.message.status-cancelled,
.message.status-discontinued {
    border: 3px solid #95a5a6 !important;
    background: var(--white) !important;
    color: #212529 !important;
}

/* ===== Plugins and Resources ===== */

.form-control-large {
    font-size: 18px;
}

.form-group {
    clear: both;
}

.form-group label {
    font-weight: bold;
    padding-right: 0.5em;
    margin-bottom: 0;
}

.form-group img.form-control {
    padding: 0.75em;
}

input.form-control,
textarea.form-control,
select.form-control {
    color: #212529;
}

.form .form-control.invalid,
.form .vue-treeselect.invalid .vue-treeselect__control,
.form .help.invalid {
    color: #d43f3a;
    border-color: #d43f3a;
}

.form .vue-treeselect.invalid .vue-treeselect__input:focus,
.form .form-control.invalid:focus {
    border-color: #d43f3a;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
}

.form .help.success {
    color: #4cae4c;
}

a.btn:not(.btn-danger):not(.btn-outline):not(.btn-blue):not(.btn-primary):hover {
    color: #24292e;
}

.btn-group>.form-control:not(:last-child):not(.dropdown-toggle), 
.btn-group>.btn-group:not(:last-child)>.form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.btn-group>.form-control:not(:first-child), 
.btn-group>.btn-group:not(:first-child)>.form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}

.btn-badge {
    border-radius: 100px;
    padding-left: 1.25em;
    padding-right: 1.25em;
    margin-right: 0.5em;
    transition: unset;
}

.btn-badge.active {
    box-shadow: 0 0 0 0.2em rgba(3, 102, 214, .3);
}

.btn-badge.btn-badge-blue {
    background: #2c7cf5;
    color: var(--white);
}

.btn-badge.btn-badge-blue:hover {
    background: #1c61cc;
    color: var(--white) !important;
}

.notification-badge {
    margin-left: 0.25em;
    font-size: 12px;
    position: relative;
    top: -1px;
    background: #ff0000;
    color: var(--white) !important;
}

.notification-badge:hover {
    background: #dd0202;
    color: var(--white) !important;
}

.dropdown.dropdown-hover:hover .dropdown-menu:not(.hide) {
    display: block;
}

.dropdown-menu .dropdown-item {
    line-height: 1.5em;
    cursor: pointer;
}

.show>.dropdown-menu {
    display: block;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropup .dropdown-menu {
    position: absolute;
    transform: translate3d(0px, calc(-100% - 3px), 0px);
    top: 0px;
    left: 0px;
}

.dropup .dropdown-menu.dropdown-left {
    position: absolute;
    transform: translate3d(calc(-100% - -90px), calc(-100% - 3px), 0px);
    top: 0px;
    left: 0px;
}

.cc-window {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    padding: 1em !important;
    font-size: 15px !important;
    border-radius: 4px;
    background-color: #353535 !important;
    color: #fff !important;
}

.cc-window .cc-btn {    
    color: #fff !important;
    background-color: #29c74d !important;
    background-image: linear-gradient(-180deg,#34d058 0,#29c74d 90%) !important;
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    cursor: pointer;
    background-position: -1px -1px;
    background-size: 110% 110%;
    border: 1px solid rgba(27,31,35,.2) !important;
    border-radius: .25em;
    text-transform: none;
}

.cc-window .cc-btn:hover, .cc-window .cc-btn:active {
    background-color: #269f42 !important;
    background-image: linear-gradient(-180deg,#2fcb53 0,#269f42 90%) !important;
    background-position: -.5em !important;
    border-color: rgba(27,31,35,.5) !important;
    text-decoration: none;
    background-repeat: repeat-x;
}

.cc-window .cc-btn:active {
    box-shadow: 0 0 0 .2em rgba(52,208,88,.4) !important;
}

.cc-window .cc-btn:focus {
    outline: 0;
}

.cc-window .cc-link {    
    display: inline;
    cursor: pointer;
    color: var(--green) !important;
    border-radius: 0.25rem;
    text-decoration: none;
}

.cc-window .cc-link:hover {
    color: #0f7864 !important;
}

.vue-treeselect__control {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.vue-treeselect__label {
    width: 100% !important;
    float: none !important;
}

.vue-treeselect__multi-value-item,
.vue-treeselect:not(.vue-treeselect--disabled) .vue-treeselect__multi-value-item:not(.vue-treeselect__multi-value-item-disabled):hover {    
    background: var(--blue);
    color: var(--white);
    font-size: 10pt;
}

.vue-treeselect__value-remove {
    color: var(--white);
}

.vue-treeselect__checkbox--checked, 
.vue-treeselect__label-wrapper:hover .vue-treeselect__checkbox--checked {
    background: var(--blue);
    border-color: var(--blue);
}

.vue-treeselect__label-wrapper:hover .vue-treeselect__checkbox--unchecked {
    background: var(--white);
    border-color: var(--blue);
}

.vue-treeselect__label {
    color: #222529;
}

.uploadcare--widget__button {
    all: initial;
    box-sizing: border-box;
    margin: 0;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    text-align: center;
    white-space: nowrap;
    font: inherit;
    line-height: inherit;
    box-shadow: none;
    text-shadow: inherit;
    transition: background .3s;    
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
    cursor: pointer;
    background-position: -1px -1px;
    background-size: 110% 110%;
    border: 1px solid rgba(27,31,35,.2);
    border-radius: .25em;
    color: #24292e;
    background-color: #f7fafc;
    background-image: linear-gradient(-180deg,#fafbfc 0,#f7fafc 90%);
}

.uploadcare--widget__button.focus, 
.uploadcare--widget__button:focus,
.uploadcare--widget__button.hover, 
.uploadcare--widget__button:hover {
    color: #24292e;
    text-shadow: inherit;
    font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #e6ebf1;
    background-image: linear-gradient(-180deg,#f0f3f6 0,#e6ebf1 90%);
    background-position: -.5em;
    border-color: rgba(27,31,35,.35);
    font-weight: bold;
    font-size: 14px;
}
.uploadcare--widget__button:hover {
    text-decoration: none;
}

.custom-radio-large {
    padding-left: 1.7rem;
}
.custom-radio-large .custom-control-label {
    font-size: 1.2em;
}
.custom-radio-large .custom-control {
    min-height: 1.7rem;
}
.custom-radio-large .custom-control-label::before {
    width: 1.2rem;
    height: 1.2rem;
}
.custom-radio-large .custom-control-label::after {
    width: 1.2rem;
    height: 1.2rem;
}

.vc-chrome {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

.vdp-datepicker input {
    color: #212529;    
    display: block;
    padding: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.vdp-datepicker__calendar .cell.selected {
    background: #00CCFF !important;
    color: #fff !important;
}

.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
.vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
  border: 1px solid #00CCFF !important;
}
.vdp-datepicker__calendar .cell.selected {
  background: #00CCFF !important;
}
.vdp-datepicker__calendar .cell.selected:hover {
  background: #00CCFF !important;
}
.vdp-datepicker__calendar .cell.selected.highlighted {
  background: #00CCFF !important;
}
.vdp-datepicker__calendar .cell.highlighted {
  background: rgba(0, 204, 255, 0.6) !important;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 2.5rem;
}

.custom-switch .custom-control-label::before {
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
    top: calc(0.203125rem + 3px);
    left: calc(2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #b4bcc2;
    border-radius: 0.5rem;
    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .custom-switch .custom-control-label::after {
        -webkit-transition: none;
        transition: none;
    }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    -webkit-transform: translateX(0.75rem);
    transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(44, 62, 80, 0.5);
}

/* ===== Header ===== */

img.logo {
    height: 55px;
}

img.logo-lg {
    height: 100px;
}

img.signin-logo {
    width: 50%;
}

.navbar img.navbar-logo {
    height: 40px;
    margin-right: 1em;
}

.profile-pic {
    height: 18px;
    width: 18px;
    position: relative;
    top: -1px;
}

.navbar-toggler {
    width: auto;
    height: 35px;
    font-size: 12px;
}

.navbar-buttons a.btn {
    margin-left: 3px;
}

#nav-tabs .nav-link {
    cursor: pointer;
    color: var(--green);
    padding: 0.5rem 2em;
    border-radius: 0.25rem;
    text-decoration: none;
}
#nav-mobile-tabs .nav-link {
    color: var(--green);
}

#nav-tabs .nav-link:hover,
#nav-mobile-tabs .nav-link:hover {
    color: #0f7864;
}

#nav-tabs .nav-item > a {
    padding: 0.5rem 2em;
    border-radius: 0.25rem;
    text-decoration: none;
}

#nav-tabs .nav-link.active, 
#nav-tabs .nav-item > a.active,
#nav-mobile-tabs .nav-link.active, 
#nav-mobile-tabs .nav-item > a.active {
    color: var(--white) !important;
    background-color: var(--blue);
}

#nav-mobile-tabs {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background: var(--white);
}

#suggestedDomain {
    width: 100%;
    text-align: center;
    background-color: var(--green);
}

#suggestedDomain .alert {
    margin: 0 auto;  
}

#suggestedDomainLink {
    color: var(--white);
    font-weight: bold;
    text-decoration: underline;
}

.badge-lg {
    font-size: 1.1em;
}

.bg-seller {
    background-color: #00CCFF !important
}

.price-lg {
    font-size:4em;
}

.price-sm {
    font-size:2em;
}

.font-bold {
    font-weight: bold !important;
}

/* ===== Footer ===== */

footer {
    left: 0;
    right: 0;
    font-size: 8pt;
    padding-bottom: 2em;
}

footer .footer-language {
    display: inline-block;
    width: 100%;
    max-width: 150px;
    height: 20px;
    position: relative;
    top: 5px;
    margin-bottom: 15px;
}

footer .footer-text {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
    display: inline-block;
    margin: 0;
    padding: 0 1em;
}

footer .footer-links {
    margin: 0;
    padding: 0 1em;
    line-height: 30px;
}

footer .footer-language .vue-treeselect__control {
    height: 20px !important;
}

footer .footer-language .vue-treeselect__placeholder,
footer .footer-language .vue-treeselect__single-value {
    line-height: 18px !important;
}

footer .footer-divider {
    box-sizing: border-box;
}

footer .footer-divider-inner {
    height: 44px;
    margin-bottom: -18px;
    background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, .14), rgba(0, 0, 0, .03) 3px, transparent);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .14), rgba(0, 0, 0, .03) 3px, transparent);
    z-index: 0;
    zoom: 1;
}

footer .footer-divider-inner::after {
    height: 44px;
    margin-bottom: -38px;
    display: block;
    width: 100%;
    background-color: transparent;
    background: -webkit-linear-gradient(to right, var(--white), rgba(255, 255, 255, 0), var(--white));
    background: linear-gradient(to right, var(--white), rgba(255, 255, 255, 0), var(--white));
    z-index: 1;
    content: "";
}

body[class^="selling-"] footer .footer-divider-inner::after, 
body[class*=" selling-"] footer .footer-divider-inner::after,
body[class^="hub-"] footer .footer-divider-inner::after, 
body[class*=" hub-"] footer .footer-divider-inner::after {
    height: 4px;
    margin-bottom: 0px;
    background: none;
}

/* ===== Settings Pages ===== */

.header-tools {
    line-height: 2.5em;
}

body.buying-setup #settings-menu,
body.selling-setup #settings-menu,
body.hub-setup #settings-menu,
body.selling-order-ticklist #settings-menu {
    display: none;
}

body.buying-setup #settings-content,
body.selling-setup #settings-content,
body.hub-setup #settings-content,
body.selling-order-ticklist #settings-content {
    max-width: unset;
    flex: none;
}

/* ===== Adverts ===== */

.buying-advert img {
    width: 150px;
}

.buying-advert h1,
.buying-advert ul {
    margin-left: 180px;
}

.selling-advert .jumbotron {
    padding: 20px;
    background-color: #e74c3c05;
    border-color: #e74c3c61;
    border-width: 1px;
    border-style: solid;
}

.selling-advert div {
    margin-bottom: 5px;
    font-size: 13px;
}

/* ===== Sign In Loop ===== */

.input-group-text.fa.fa-fw {
    padding: 9px 15px;
    width: 3em;
}

.card.payment-method.active,
.card.app-wrap.active {
    background-color: #fafffb;
}

.card.app-wrap.active svg {
    font-size: 14px;
}

.app-webhook {
    background-color: var(--light);
}

.plan-basic {
    color: #95a5a6 !important;
}

.plan-basic.bg-seller {
    color: #fff !important;
}

.effective-text {
    font-size: 0.7rem;
}

.app-logo { 
    max-height: 40px;
    max-width: 125px;
}

.index-app-logo {
    max-height: 70px;
    max-width: 150px;
}

#seller-index .apps-partners .card {
    min-height: 250px;
}

.card-pr-reduced {
    padding-right: 0 !important;
}

.card-fixed-height {
    min-height:193px;
}

.card-disabled {
    opacity: 0.6 !important;
}


/* ===== Media ===== */

@media screen and (min-width: 992px) {

    #settings-menu {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

    #settings-content {
        flex: 0 0 80% !important;
        max-width: 80% !important;
    }
    
    .desktop-hide {
        display: none;
    }
    .form-group > label {
        float: left;
        width: 30%;
        margin-bottom: inherit;
    }
    .form-group .form-text,
    .form-group .form-control {
        width: 70%;
        margin-left: 30%;
    }
}

@media screen and (max-width: 1199px) {
    .buying-advert img.pull-left {
        float: none !important;
    }
    .buying-advert h1,
    .buying-advert ul {
        margin-left: 0px !important;
    }
}

@media screen and (max-width: 991px) {
    .no-overflow-mobile {
        overflow: hidden;
    }

    .tablet-hide {
        display: none;
    }

    img.logo {
        height: 35px;
    }

    .buying-advert h1 {
        font-size: 2rem;
    }

    #mainNav {
        margin-top: 0.5em;
    }

    #nav-tabs,
    #nav-account {
        display: none;
    }

    #nav-mobile-tabs {
        display: block;
    }

    #settings-menu {
        display: none;
    }

    #settings-content {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .nav-item a {
        display: block;
        padding: 0.5rem 2rem;
    }
}

@media screen and (max-width: 767px) {
    .nav-tabs .nav-item {
        padding-left: 15px;
        padding-right: 15px;
        font-size: 0.9em;
    }

    .view {
        padding: 0;
    }

    .jumbotron {
        padding: 1em 0.5em;
        margin: 0.5em 0;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .text-xl {
        font-size: 1.2em;
    }
    
    .text-lg {
        font-size: 1.1em;
    }

    .mobile-hide {
        display: none;
    }

    .header-tools {
        line-height: 2em;
    }
    
    .header-tools .btn {
        padding: 3px 10px;
        font-size: 12px;
    }
    
    .header-info {
        font-size: 0.75rem !important;
    }

    #selling-billinghistory .result-details {
        font-size: 0.85rem !important;
        display: block !important;
    }

    #selling-billinghistory .ml-1,
    #selling-billinghistory .ml-2,
    #selling-billinghistory .ml-3 {
        margin-left: 0 !important;;
    }

    #settings-content h3 {
        font-size: 1.2em;
        line-height: 1.5;
    }
    
    .btn-outline {
        color: #212529;
    }

    footer .footer-divider-inner {
        height: 1.5rem;
    }

    footer .footer-language {
        margin-bottom: 0.75rem;
    }

    .card-header,
    .card-footer,
    .card-body {
        padding: 0.75rem;
    }

    .card-pr-reduced {
        padding-right: 15px !important;
    }

    .card-fixed-height {
        min-height: auto;
    }
}

@media screen and (max-width: 480px) {
    .mobile-sm-hide {
        display: none;
    }

    #nav-tabs {
        display: block;
        margin-left: 0 !important;
        padding: 0;
    }

    .nav-tabs .nav-item {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.8em;
    }

    .nav-item a {
        display: block;
        padding: 0.5rem 2rem;
    }

    .navbar-buttons .btn-group {
        display: block;
    }

    .header-info {
        font-size: 0.75rem !important;
    }

    .btn-outline {
        color: #212529;
    }

    #accountDropdownBtn {
        display: block;
        width: 100%;
        border-radius: .25em;
    }
}

@media print {
    body {
        background: transparent;
        margin: 1em auto;
    }

    body[class^="selling-"], 
    body[class*=" selling-"],
    body[class^="hub-"],
    body[class*=" hub-"] {
        background-color: #fff !important;
    }

    .print-only {
        display: block;
    }

    .print-hide {
        display: none !important;
    }

    footer,
    #settings-menu,
    .header-tools,
    .order-select,
    .order-update {
        display: none;
    }

    #settings-content {
        display: block;
        flex: unset;
        width: 100%;
        max-width: unset;
    }
}

.ios-only {
    display: none;
}

.ios-hide {
    display: block;
}

@supports (-webkit-overflow-scrolling: touch) {
    .ios-only {
        display: block !important;
    }

    .ios-hide {
        display: none !important;
    }
}

.selling-payments-stripe-logo {
    width: 100px;
}

.selling-payments-service-deactivate {
    color: #2c3e50;
    font-size:0.7em;
    float:right;
    margin-top:22px;
}


.header-info {
    color: #747474 !important;
    font-size: 0.85rem;
    background-color: #efefef;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
}

body[class^="selling-"] .header-info, 
body[class*=" selling-"] .header-info,
body[class^="hub-"] .header-info, 
body[class*=" hub-"] .header-info {
    color: #7b8a8b !important;
    background-color: #f7fafc;
}

body.company .navbar .signed-out,
body.discover-place .navbar .signed-out,
body.discover .navbar .signed-out,
body.selling-order-ticklist .navbar {
    display: none;
}

body.selling-order-ticklist .footer {
    display: none;
}

/* Embeded page styles */
body.embed-company .navbar,
body.embed-company #suggestedDomain,
body.embed-company #playstoreAndroidBuyer,
body.embed-company #playstoreIosBuyer,
body.embed-company #playstoreAndroidSeller,
body.embed-company #playstoreIosSeller,
body.embed-company .footer {
    display: none;
}

body.embed-company #embed-company.view {
    padding: 0;
}

body.embed-company #layoutContainer {
    width: 100%;
    max-width: unset;
    max-height: unset;
}


.btn-seller-primary,
#layoutContainer.seller .btn-primary {
    color: #fff;
    background-color: #00CCFF;
    background-image: linear-gradient(-180deg,#00CCFF 0,#00CCFF 90%);
}

.btn-seller-primary.hover, 
.btn-seller-primary:hover, 
.btn-seller-primary.active, 
.btn-seller-primary:active, 
#layoutContainer.seller .btn-primary.hover, 
#layoutContainer.seller .btn-primary:hover, 
#layoutContainer.seller .btn-primary.active, 
#layoutContainer.seller .btn-primary:active {
    background-color: #00CCFF;
    box-shadow: unset !important;
    background-image: linear-gradient(-180deg,#00CCFF 0%, rgb(0, 159, 199) 90%) !important;
}

#layoutContainer.seller a:not(.btn),
#layoutContainer.seller #nav-mobile-tabs .nav-link,
#layoutContainer.seller #nav-tabs .nav-link,
#layoutContainer.seller .dropdown-item.clickable {
    color: #2c3e50;
}

#layoutContainer.seller .text-success,
#layoutContainer.seller .text-brand,
#layoutContainer.seller .text-link {
    color: #00CCFF !important;
}

#layoutContainer.seller .text-link.text-warning {
    color: #F39C12 !important;
}

#layoutContainer.seller .text-link.text-danger {
    color: #E74C3C !important;
}

#layoutContainer.seller .text-link.text-primary {
    color: #2c3e50 !important;
}

#layoutContainer.seller a:hover:not(.btn),
#layoutContainer.seller #nav-mobile-tabs .nav-link:hover,
#layoutContainer.seller #nav-tabs .nav-link:hover {
    color: rgba(44, 62, 80, 0.75);
}

#layoutContainer.seller .dropdown-menu .dropdown-item:hover,
#layoutContainer.seller #nav-tabs .nav-link.active {
    color: #fff;
}

#layoutContainer.seller .page-link {
    background-color: #00CCFF;
}

#layoutContainer.seller .page-link:hover {
    background-color: rgb(0, 159, 199) 90%;
}

#layoutContainer.seller .page-item.disabled .page-link {
    pointer-events: none;
    cursor: auto;
    color: rgba(36,41,46,.4);
    background-color: #f7fafc;
    background-image: none;
    box-shadow: none;
}

#footerContainer.seller a {
    color: #00CCFF;
}

#embed-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f7fafc;
    margin-bottom: 1em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
}

#embed-header .navbar-mini-logo {
    height: 22px;
}

.btn-group.pagination-filter,
.btn-group.pagination-sort-order,
.btn-group.pagination-results,
.btn-group.pagination-paging {
    box-shadow: 0 2px 5px 0 rgba(60,66,87, .12), 0 1px 1px 0 rgba(0,0,0, .12);
}

.btn-group.pagination-filter.pagination-footer,
.btn-group.pagination-sort-order.pagination-footer,
.pad-description .btn-group.pagination-sort-order {
    box-shadow: none;
}

.app-settings-content .list-group,
.app-settings-content .card {
    box-shadow: 0 7px 14px 0 rgba(60,66,87, .12), 0 3px 6px 0 rgba(0,0,0, .12);
}

.app-settings-content #pads .form-group {
    box-shadow: 0 7px 14px 0 rgba(60,66,87, .12), 0 3px 6px 0 rgba(0,0,0, .12);
    padding: 20px;
}

.app-settings-content .card-body .list-group,
.app-settings-content #padEditContent .list-group {
    box-shadow: none;
}

.display-contents {
    display: contents;
}

.text-xs {
    font-size: 0.75em;
}

.uppy-Root {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}