html {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px;}
body {margin: 0px; background-color: #EBEEF0;}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
table {width: 100%; border-spacing: 0; border-collapse: collapse;}
ul {list-style: none; margin: 0; padding: 0;}
a {color:inherit; text-decoration: none;}
input[type="text"], input[type="password"], input[type="number"], input[type="email"], textarea {padding: 0.6em 0.7em; border: 1px solid #d3dbe2; border-radius: 3px; font-size: 13px; color: #333333; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; line-height: normal; vertical-align: baseline; -webkit-appearance: none;}
input.error, select.error {border-color: red;}
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}

select {appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ border-radius: 0;}
select,.custom-select{line-height:normal; width: 100%; color:#333333; border: 1px solid #d3dbe2; border-radius: 3px; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0.6em 0.7em; padding-right: 29px; font-size:13px; text-transform:none; font-weight:400; overflow:hidden;background:#fdfdfd url('../images/select.png') no-repeat;background-position:right 10px center;background-size:10px;box-shadow:none;}

.animation, a {-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}

.msg i {margin-right: 10px;}
.msg.success {padding: 10px 10px 10px 15px; text-align: left; margin-bottom: 12px; background: #EAF7D9; border: 1px solid #BBDF8D; color: #555555; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;}
.msg.success i {color: green;}
.msg.warning {padding: 10px 10px 10px 15px; text-align: left; margin-bottom: 12px; background: #FFD1D1; border: 1px solid #F8ACAC; color: #555555; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;}
.msg.warning i {color: red;}
.msg.attention {padding: 10px 10px 10px 15px; margin-bottom: 15px; background: #FFF5CC; border: 1px solid #F2DD8C; color: #555555; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -khtml-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;}
.msg.attention i {color: orange;}

.wrapper {max-width: 1300px; margin: auto; padding: 0 20px;}
.box {background-color: white; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); color: #31373d; padding: 20px;}
.box h2 {margin-top: 0; color: #31373d; font-size: 18px; font-weight: 400;}
.btn {cursor: pointer; display: inline-block; padding: 8.5px 15px; margin: 0; border-radius: 3px; font-size: 13px; line-height: 1; white-space: nowrap; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-appearance: none; background-color: #fff; color: #479ccf; border: 1px solid #ccc;}
.btn:hover {background-color: #f7f4f4;}

.btn.small {
    font-size: 10px;
    padding: 5px 9px;
    display: block;
    float:left;
    width: auto;
}
.btn.small.right {
    float:right !important;
}
.btn.small i {
    font-size: 10px !important;
}

.btn-primary {background-color: #479ccf; color: #ffffff; border-color: #479ccf;}
.btn-primary:hover {background-color: #4293C2;}
.btn-primary:disabled {background-color: #ccc; border-color: #ccc;}

.btn-danger {background-color: #d9534f; color: #ffffff; border-color: #d9534f;}
.btn-danger:hover {background-color: #c12e2a;}
.btn-danger:disabled {background-color: #ccc; border-color: #ccc;}

.btn .spinner {border-color: #fff; border-right-color: transparent;}

.btn.center {
    display:block; margin: auto !important;
}

.calendar {
    position:relative;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.calendar:before {
    content: "\f073";
    position: absolute;
    top:7px;
    right: 7px;
    font-size:17px;
}

.spinner {margin: 0; height: 13px; width: 13px; position: relative; text-align: center; animation: rotate 0.6s infinite linear; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%;}
@-webkit-keyframes rotate {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
@keyframes rotate {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.product-filter-context {
  max-width: 35em;
}
.product-filter-context input[type=radio] {
  display: none;
}
.product-filter-context input[type=radio] + label {
  padding: 0.5em;
  border: 1px solid #d3dbe2;
  background: white;
  width: 100%;
  display: inline-block;
  color: #757575;
  text-align: center;
  cursor: pointer;
}
.product-filter-context input[type=radio]:checked + label {
  color: inherit;
  border: 1px solid #4293C2;
  font-weight: 600;
  background: #b1d5ea;  
  cursor: default;
}

.filter {margin-bottom: 15px;}
.filter label, .filter input, .filter button, .filter .select {display: inline-block;}
.filter input[type="text"] {width: 150px;}
.filter .inputs > input, .filter .inputs > div {margin-top: 8px;}
.filter .buttons > input, .filter .buttons > button {margin-top: 8px;}

.paginator {margin: 10px 0;}
.paginator li {display: inline-block; padding: 1px 6px; margin-right: 4px;}
.paginator li.inactive a {cursor: default;}
.paginator li.current {background-color: #788C9C; border-radius: 2px; color: #fff;}
.paginator .total {display: inline-block; margin-left: 15px; margin-top: 1px; color: #788C9C; letter-spacing: 0.05em; font-size: 13px;}
.exporter {padding: 12px 0;}
.file-field .file:not(.hide) {display: flex; align-items: center;}
.file-field .file-edit {font-size: 18px; margin-right: 1em;}

.tbl thead {background-color: #788C9C; color: #fff;}
.tbl thead th {padding: 12px; text-align: left;}
.tbl thead th:first-of-type {border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
.tbl thead th:last-of-type {border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
.tbl thead th.actions {width: 10%; text-align: center;}
.tbl tbody tr {border-bottom: 1px solid #E4E7EA;}
.tbl tbody tr:last-of-type {border-bottom: 0;}
.tbl tbody td {padding: 18px 12px;}
.tbl tbody td i {font-size: 18px;}
.tbl tbody td i:hover {color: #969696;}
.tbl tbody td span {color: red;}
.tbl tbody .note {font-size: 11px; margin-top: 5px; color: #bec4ca;}

.no-data {text-align: center; margin-top: 20px;}

header {background-color: #fff; font-size: 24px; line-height: 56px;}
header img {width: 20px; height: 20px; margin-right: 10px;}
header .store {position: absolute; right: 42px; top: 0; font-size: 12px;}
header .icons {position: absolute; right: 8px; top: 15px; color: #31373D;}

nav li {display: inline-block; margin-right: -4px;}
nav .main {background-color: #31373D; color: #fff;}
nav .main li:first-child {padding: 8px 0;}
nav .main li:first-child a {padding: 0; padding-right: 10px;}
nav .main li a {display: inline-block; padding: 15px 20px;}
nav .main .active {background-color: #0D1217; position: relative;}
nav .main .active::after { content: '\00a0'; z-index: 10; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 9px solid #0D1217; position: absolute; margin-top: 45px; left: 50%; margin-left: -12px;}
nav .main .btn {padding: 5.5px 15px;}
nav .second {background: #e2e7ea; border-bottom: 1px solid #CCD3D7;}
nav .second li:not(.active)::after {background-color: #CCD3D7; width: 1px; height: 25px; content: '\00a0'; position: absolute; margin-top: 22px;}
nav .second li a {display: inline-block; padding: 2em 1.5em 1.5em; font-size: 1em; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;}
nav .second .active {border-top: 1px solid #CCD3D7; background-color: #D9DFE2; position: relative;}
nav .second li:last-child::after {display: none;}

main {margin: 20px 0;}
main .top-bar {margin-bottom: 12px;}
main .top-bar label {line-height: 30px;}

footer div.wrapper > div {padding: 20px 0; border-top: 1px solid #CCD3D7; font-size: 12px; color: #788C9C;}

.red {color: red;}

/*************** POP UP ***************/

#modal_container {z-index: 551; display: none}
.modal-bg, .aviary-modal-bg {background-color: rgba(0, 0, 0, 0.25); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 550; display: none}
.modal-bg.visible, .aviary-modal-bg.visible {display: block}
.app-modal-iframe {width: 100%; height: 100%}
.modal-iframe {height: 100px; overflow: hidden; -webkit-transition: height 0.25s ease-out; transition: height 0.25s ease-out}
.modal-iframe .content {height: calc(100vh - 175px); overflow: auto; background-color: #EBEEF0; padding: 20px 0;}
.modal {-webkit-transition: all 0.5s; transition: all 0.5s; position: fixed; top: 100px; right: 0; left: 0; margin: auto; width: calc(100% - 20px); max-width: 620px; min-width: 10%; min-height: 10%; max-height: calc(100vh - 100px); background: #ffffff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); border-radius: 3px; overflow-x: hidden }
.modal.fullscreen-modal {top: 20px; max-height: calc(100vh - 40px); }
.modal:focus {outline: none}
.modal header {position: relative; margin: 0; padding: 20px; min-height: 20px; border-bottom: 1px solid #e6e6e6}
.modal header h1, .modal header h2, .modal header h3 {margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; line-height: 1}
.modal header .close-modal {background-image: url(//cdn.shopify.com/s/assets/admin/icon-sprite-fd0620cf871991a01f2321ba21b521b4502c86d282ea36fbd5e9b58aa6f2e072.png); background-repeat: no-repeat; background-position: 50% -3305px; opacity: 0.7; display: block; position: absolute; top: 5px; right: 6px; text-indent: -9999px; width: 34px; height: 34px}
.modal header .close-modal:hover {text-decoration: none; opacity: 1}
.modal .body {padding: 0px; max-height: calc(100vh - 374px); overflow: auto; -webkit-transition: max-height 0.15s; transition: max-height 0.15s }
.modal.fullscreen-modal .body {max-height: calc(100vh - 175px); height: 100%;}
.modal.fullscreen-modal .modal-iframe {height: 100%;}
.modal .buttons {padding: 20px; min-height: 32px; margin: 0; background: none; border-top: 1px solid #e6e6e6; border-bottom: none}
.modal .buttons .btn {margin-left: 5px; float: left;}
.modal.large-modal {max-width: 980px}
.modal.small-modal {max-width: 430px}
.modal.small-long-modal {max-width: 430px; min-height: 480px }
.modal.fullscreen-modal {-webkit-transition: none; transition: none; left: 20px; right: 20px; width: auto; max-width: none; margin: 0; box-sizing: border-box; height: 100%;}
.modal.real-fullscreen-modal {width: 100%; min-height: 100%; max-width: none; top: 0; left: 0; margin-left: 0; box-sizing: border-box}
.modal.real-fullscreen-modal .fullscreen-container {width: 100%; height: 100%; position: absolute; vertical-align: top}
.modal.real-fullscreen-modal .fullscreen-container textarea {height: 90%; padding: 20px; resize: none; border: 0 }
.modal.real-fullscreen-modal .buttons, .modal.real-fullscreen-modal .shipping-rate-buttons {box-sizing: border-box; position: absolute; bottom: 0; width: 100%}
.modal-bg.visible {-webkit-animation: modalBgOpen 0.15s ease; animation: modalBgOpen 0.15s ease}

/*************** PAGES ***************/

/* Index */
#page-index .grid__item {margin-bottom: 15px;}
#page-index .box {color: #aeb7c1; border-radius: 10px; padding: 25px;}
#page-index .box .icon .circle {width: 100px; height: 100px; border: 2px solid #aeb7c1; border-radius: 100%;}
#page-index .box .icon i {font-size: 45px; line-height: 100px;}
#page-index .box .icon i.icon-ebay {font-size: 60px;}
#page-index .box .title {margin: 25px 0 20px 0; padding-bottom: 20px; border-bottom: 2px solid #aeb7c1; color: #31373D; font-weight: bold; font-size: 16px;}
#page-index .box .description {color: #63696d; line-height: 150%; font-size: 15px;}
#page-index .box.app:hover {background-color: #409ACD; color: #fff;}
#page-index .box.app:hover .icon i {color: #b2cbe3;}
#page-index .box.app:hover .circle {border-color: #b2cbe3;}
#page-index .box.app:hover .title {border-color: #b2cbe3; color: #fff;}
#page-index .box.app:hover .description {color: #e6f0f6;}

/* Stores */
#edit-store-popup .box .grid__item {margin-bottom: 10px;}
#edit-store-popup .box label {cursor: pointer;}

/* Flash - Select Products */
#page-select-products #shopify-products a.selected {color: #479CCF;}
#page-select-products table.tbl-filter td {padding-bottom: 5px;}
#page-select-products table.tbl-filter .btn {margin-top: 5px;}

/* Ebay */
#page-ebay-products .tbl .published {color: green;}
#page-ebay-products .tbl .unpublished {color: orange;}

/* Ebay - Publish Popup */
#product-publish-popup .header {background: #EBEEF0; padding: 20px; border-radius: 2px;}
#product-publish-popup .header label {font-weight: bold;}
#product-publish-popup .header input {display: inline-block; width: 130px; margin-left: 11px;}
#product-publish-popup .categories {height: calc(100vh - 330px); padding-left: 20px; overflow: auto; }
#product-publish-popup .categories p.note {margin: 30px 0; font-size: 12px; padding-bottom: 30px; border-bottom: 1px solid #eee;}
#product-publish-popup .categories .spinner {border-color: #ccc; border-right-color: transparent; display: inline-block; height: 10px; width: 10px;}
#product-publish-popup .categories .spinner.hide {display: none;}
#product-publish-popup .row {margin: 16px 0; }
#product-publish-popup .row a {padding-bottom: 3px; border-bottom: 1px solid #fff; }
#product-publish-popup .row a:hover {border-bottom: 1px solid #000; }
#product-publish-popup .sub-row {padding: 8px 0; padding-left: 30px; color: #777; border-left: 1px dashed #ccc;}
#product-publish-popup .sub-row a {padding-bottom: 3px; border-bottom: 1px solid #fff; }
#product-publish-popup .sub-row a:hover {border-bottom: 1px solid #888; }
#product-publish-popup a.active {font-weight: bold;}

/* Ebay - View Product */
#view-product-popup .description textarea {width: 100%; height: 150px;}
#view-product-popup .images img {width: 100%; border: 1px solid #F1F2F4;}
#view-product-popup .variants th, #view-product-popup .variants td {border-bottom: solid 1px #ebeef0; padding: 10px; text-align: left;}
#view-product-popup .variants tr:last-child td {border: 0;}
#view-product-popup table {font-size: 13px;}


/* Bulk Invite */
#page-bulkinvite .status-sent {color: green;}
#page-bulkinvite .status-pending {color: orange;}
#page-bulkinvite .status-notsent {color: red;}

/* Bulk Invite - Email Preview */
#invitation-popup #preview iframe {width: 100%; border: 1px solid #ccc; height: calc(100vh - 455px);}

/* Wishlist */
#page-wishlist-view {padding: 0 20px;}
#page-wishlist-view .tbl img {max-height: 70px;}

/* Referral */
#page-referral .fa-remove {cursor: pointer;}
#page-referral .tbl .spinner {border-color: #000; border-right-color: transparent; margin-left: 3px;}
#page-referral .total-purchases, #page-referral .total-referred {margin: 10px 0; margin-left: 15px;}
#page-referral .total-referred {margin-left: 5px;}
#page-referral .total-purchases span, #page-referral .total-referred span {font-weight: bold;}

/* Fashion - Linked products */
.linked-products .swatch div {margin: auto; width: 20px; height: 20px; border: 1px solid #000;}
#swatches-popup .swatch {margin-right: 10px; margin-bottom: 10px; width: 30px; height: 30px; border: 1px solid #d9d9d9; float: left;}
#swatches-popup .selected .swatch {border: 2px solid #000;}


/* Cronjob switches */
.changed {
    border-color: orange !important;
}
.cronLbl {
    padding: 3px 10px 0 0;
}
.cronSetup em,
.nextShipping em {
    font-size: 10px !important;
}


/*********** HELPERS ***********/

.text-left{text-align: left}
.text-right{text-align: right}
.text-center{text-align: center}

.flex {display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important;}
.flex-wrap {-webkit-box-wrap: wrap; -moz-box-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.flex-1 {-webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1;}
.direction-row {-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
.direction-column {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
.row-reverse {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
.column-reverse {-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
.justify-content-start {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
.justify-content-center {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.justify-content-end {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}
.justify-content-around {-ms-flex-pack: distribute;justify-content: space-around;}
.justify-content-between {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.justify-content-evenly {justify-content: space-around;}
.align-items-start {-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.align-items-center {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.align-items-end {-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}