:root {
/* ========== Primary Brand Colors ========== */
--color-primary-blue: #61B6E6;
--color-primary-blue-dark: #299cdd;
--color-primary-red: #CD544E;
--color-primary-red-dark: #8F3030;
--color-primary-orange: #DAA43A;
--color-primary-orange-dark: #B86B10;
--color-primary-green: #58CC9E;
--color-primary-green-dark: #36AA7F;
--color-primary-grey-1: #FCFCFC;
--color-primary-grey-2: #EEEEEE;
--color-primary-grey-3: #CCCCCC;
--color-primary-grey-4: #828282;
--color-primary-grey-5: #303030;
--color-primary-grey-6: #222222;
--color-secondary-green: #71DB7B;
--color-alt-blue-0: #B2DBF240;
--color-alt-blue-1: #B2DBF2;
--color-alt-blue-2: #A1D4EF;
--color-alt-green-0: #B6F0D675;
--color-alt-green-1: #B6F0D6;
--color-alt-green-2: #A1ECCB;
--color-alt-yellow-1: #F7F1A4;
--color-alt-yellow-2: #F7F18D;
--color-alt-red-0: #F8BAA875;
--color-alt-red-1: #F8BAA8;
--color-alt-red-2: #F7A895;
/* ========== Extended Grays ========== */
--color-white: #ffffff;
--color-black: #000000;
--color-gray-50: #fafafa;
--color-gray-100: #f9f9f9;
--color-gray-150: #f4f4f4;
--color-gray-200: #f1f1f1;
--color-gray-300: #e5e5e5;
--color-gray-400: #dadada;
--color-gray-500: #cccccc;
--color-gray-600: #bbbbbb;
--color-gray-700: #999999;
--color-gray-750: #666666;
--color-gray-800: #555555;
--color-gray-850: #3c3c3c;
--color-gray-900: #333333;
--color-gray-950: #d9d9d9;
/* ========== Common RGBA Overlays ========== */
--overlay-black-light: rgba(0, 0, 0, 0.08);
--overlay-black-medium: rgba(0, 0, 0, 0.16);
--overlay-black-dark: rgba(0, 0, 0, 0.3);
--overlay-black-darker: rgba(0, 0, 0, 0.4);
--overlay-black-darkest: rgba(0, 0, 0, 0.5);
--overlay-white-light: rgba(255, 255, 255, 0.8);
--overlay-white-medium: rgba(255, 255, 255, 0.5);
/* ========== Alert/Status Colors ========== */
--color-error: #aa0000;
--color-success: #649733;
--color-warning: #d08937;
--color-info: #37699b;
/* ========== Fonts ========== */
--font-primary-regular: 'Lato', serif;
--font-primary-bold: 'latobold', arial, helvetica, sans-serif;
--font-icons: 'icons';
--font-fallback: Arial, Helvetica, sans-serif;
/* ========== Border Radius ========== */
--border-radius-tiny: 2px;
--border-radius-small: 4px;
--border-radius-medium: 8px;
--border-radius-large: 16px;
--border-radius-xlarge: 32px;
--border-radius-3: 3px;
--border-radius-5: 5px;
--border-radius-6: 6px;
--border-radius-10: 10px;
/* ========== Box Shadows ========== */
--boxshadow-none: none;
--boxshadow-xs: 0 0 2px rgba(0, 0, 0, 0.4);
--boxshadow-sm: 0 1px 4px rgba(0, 0, 0, 0.12);
--boxshadow-primary: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
--boxshadow-sub: 0px 1px 4px 0px rgba(0, 0, 0, 0.12);
--boxshadow-lg: 0 2px 10px rgba(0, 0, 0, 0.3);
--boxshadow-inset: inset 0 0 3px rgba(0, 0, 0, 0.2);
/* ========== Transitions ========== */
--transition-primary: 0.3s ease;
--transition-fast: 0.15s ease-in;
--transition-medium: 0.3s ease;
--transition-slow: 0.25s ease-in-out;
--transition-opacity: opacity 0.2s ease-in;
--transition-all: all 0.3s ease;
--transition-bg-color: background-color 0.3s ease;
/* ========== Spacing ========== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
/* ========== Common Padding/Margin Patterns ========== */
--padding-input: 6px 4px;
--padding-btn: 4px 8px;
--padding-section: 20px 0;
}
/*==================== Sidebar ====================*/
.side_bar {
width: 130px;
float: left;
margin: 0 0 0 -130px;
/* min-height: calc(100vh - 120px); */
min-height: calc(100vh - 400px);
}
.content_wrapper_v2 {
margin-left: 160px !important;
line-height: normal !important;
}
.content_wrapper_v2 .side_bar {
margin-left: -160px !important;
}
.content_wrapper_v2 .content_area {
padding: 12px 0 0 0;
}
.content_wrapper_v2 .widget_box {
margin-bottom: 19px;
margin-right: 30px;
color: var(--color-primary-grey-5);
font-family: var(--font-primary-regular);
font-size: 11px;
letter-spacing: .08em;
font-weight: normal;
line-height: 1.7em;
}
.content_wrapper_v2 .widget_box span.info {
width: 14px;
height: 13px;
}
.content_wrapper_v2 .widget_box .title_bar {
/* background: var(--color-primary-grey-1); */
background: var(--color-primary-grey-2);
/* border: 1px solid var(--color-primary-grey-3); */
border: none;
border-radius: 6px;
color: var(--color-primary-grey-5);
letter-spacing: 0.1em;
font-size: 1.1em;
margin: 0;
padding: 6px 12px;
margin-left: -12px;
height: auto;
text-shadow: none;
font-family: var(--font-primary-regular);
font-weight: normal;
input[type="submit"] {
background-color: var(--color-primary-blue);
border: none;
border-radius: 4px;
padding: 4px 8px;
color: var(--color-white);
letter-spacing: 0.04em;
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
}
.content_wrapper_v2 .widget_box .title_bar strong {
display: inline-block;
float: none;
height: auto;
letter-spacing: 0.1em;
}
.content_wrapper_v2 .widget_box .title_bar a {
color: var(--color-white);
}
.content_wrapper_v2 .widget_box .title_bar img {
float: left;
margin: 0 7px 0 0;
}
.content_wrapper_v2 .widget_box .title_bar span {
display: block;
float: right;
}
.content_wrapper_v2 .widget_box .title_bar span img {
margin: 4px 8px 0 0;
}
.content_wrapper_v2 .box_bg {
background: transparent;
padding: 20px 0 20px 0;
border: none;
}
body[data-main-form-action="/merchant/configuration/digitalDeliverySave.do"] .content_wrapper_v2 .box_bg {
background: transparent;
padding: 20px 0 0 0;
max-width: 520px;
}
body[data-main-form-action="/merchant/configuration/digitalDeliverySave.do"] .content_wrapper_v2 br {
display: none;
}
body[data-main-form-action="/merchant/configuration/digitalDeliverySave.do"] .content_wrapper_v2 table {
margin-top: 16px;
}
body[data-main-form-action="/merchant/configuration/digitalDeliverySave.do"] .content_wrapper_v2 table tbody tr td {
padding-bottom: 16px;
padding-right: 8px;
}
body[data-main-form-action="/merchant/configuration/digitalDeliverySave.do"] .content_wrapper_v2 table tbody tr td input[type="checkbox"] {
opacity: 0.75;
}
body[data-main-form-action="/merchant/configuration/digitalDeliverySave.do"] input[value="Save"] {
margin-bottom: 16px;
}
.content_wrapper_v2 .breadcrumbs a {
color: var(--color-primary-blue);
text-decoration: none;
}
.content_wrapper_v2 .return_link {
margin-bottom: 10px;
margin-top: 10px;
}
.content_wrapper_v2 .breadcrumbs a:hover {
text-decoration: underline;
}
.content_wrapper_v2 span.info {
position: relative;
top: 0;
}
.content_wrapper_v2 span.info {
color: inherit;
height: inherit;
cursor: pointer;
}
.content_wrapper_v2 .title_bar span.info {
float: left !important;
}
.content_wrapper_v2 span.info_hl {}
.content_wrapper_v2 .title_bar span.info_hl {
float: left !important;
}
.content_wrapper_v2 span.info_empty {
background: url(/merchant/images/v2/icon_star.png) no-repeat center center !important;
}
.content_wrapper_v2 .title_bar span.info_empty {
background: url(/merchant/images/v2/icon_star.png) no-repeat center center !important;
float: left !important;
}
.content_wrapper_v2 .title_bar .btn {
border-top: 1px solid #4b4b4b;
border-left: 1px solid #4b4b4b;
border-bottom: 1px solid #6f6f6f;
border-right: 1px solid #6f6f6f;
height: 16px;
text-align: center;
line-height: 16px;
margin: 5px 0 5px 5px;
float: left;
box-shadow: inset 0 0 1px var(--color-black);
}
.content_wrapper_v2 .title_bar .title_icon {
height: 16px;
text-align: center;
line-height: 16px;
margin: 5px 0 5px 5px !important;
float: left;
cursor: pointer;
}
.content_wrapper_v2 .title_bar .title_link {
color: var(--color-white) !important;
text-shadow: 1px 1px 0 #333;
padding: 0 5px;
letter-spacing: .1em;
font-size: 11px;
}
.content_wrapper_v2 .title_bar a:hover {
text-decoration: none !important;
}
.content_wrapper_v2 .normalText {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: var(--color-primary-grey-5);
font-weight: normal;
}
.content_wrapper_v2 .normal-text-btn {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: var(--color-primary-grey-5);
font-weight: normal;
padding: 5px;
}
.content_wrapper_v2 .normalTextRedBold {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: #AA0000 !important;
font-weight: bold !important;
}
.content_wrapper_v2 .normalTextRed {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: #AA0000 !important;
}
.content_wrapper_v2 .red {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: #AA0000 !important;
}
.content_wrapper_v2 .normalTextBlueBold {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: blue;
font-weight: bold;
}
.content_wrapper_v2 .normalTextBlue {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: blue;
}
.content_wrapper_v2 .normalTextYellow {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: yellow;
}
.content_wrapper_v2 .normalTextGreen {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
color: green;
}
.content_wrapper_v2 .boldText {
font-family: Arial, Helvetica, sans-serif;
font-size: inherit;
font-weight: bold;
}
.content_wrapper_v2 .columnHeaderText {
font-weight: bold;
}
.content_wrapper_v2 .alt,
.content_wrapper_v2 .odd {
background-color: var(--color-primary-grey-1);
}
.content_wrapper_v2 .ucTableStriping {
padding-top: 0;
}
/*==================== Top Navigation ====================*/
.content_wrapper_v2 .minwidth {
min-width: 100px;
width: auto !important;
width: 100px;
}
/* TODO (12/9/24) - need to look in the backend and see where this is being used */
.content_wrapper_v2 .top_nav {
margin: 0 20px 20px 0;
background: var(--color-primary-grey-5);
font-size: 11px;
color: var(--color-white);
border: none;
border-radius: var(--border-radius-medium);
text-shadow: none;
white-space: nowrap;
}
.content_wrapper_v2 .top_nav img {
float: left;
margin: 6px 7px 0 0;
}
.content_wrapper_v2 .top_nav .first {
line-height: 28px;
font-size: 11px;
color: var(--color-white);
float: left;
/* display: block; */
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y;
padding: 0 8px;
display: inline;
}
.content_wrapper_v2 .top_nav .active {
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y #505050;
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y -webkit-gradient(linear, 0 0, 0 bottom, from(#3c3c3c), to(#505050));
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y -moz-linear-gradient(#3c3c3c, #505050);
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y linear-gradient(#3c3c3c, #505050);
}
.content_wrapper_v2 .top_nav a {
line-height: 28px;
color: var(--color-white);
float: left;
/* display: block; */
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y;
display: inline;
padding: 0 8px;
/* letter-spacing: 0.1em; */
}
.content_wrapper_v2 .table_nav {
margin: 0 20px 20px 0;
background: linear-gradient(180deg, var(--color-gray-750), var(--color-gray-800));
height: 28px;
font-size: 11px;
color: var(--color-white);
border: 1px solid #3c3c3c;
border-radius: var(--border-radius-5);
text-shadow: 1px 1px 1px #333;
white-space: nowrap;
}
.content_wrapper_v2 .table_nav img {
float: left;
margin: 6px 7px 0 0;
}
.content_wrapper_v2 .table_nav .first {
line-height: 28px;
font-size: 11px;
color: var(--color-white);
float: left;
/* display: block; */
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y;
padding: 0 6px;
display: inline;
}
.content_wrapper_v2 .table_nav .last {
width: 30px;
}
.content_wrapper_v2 .table_nav .active {
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y #505050;
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y -webkit-gradient(linear, 0 0, 0 bottom, from(#3c3c3c), to(#505050));
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y -moz-linear-gradient(#3c3c3c, #505050);
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y linear-gradient(#3c3c3c, #505050);
}
.content_wrapper_v2 .table_nav a {
line-height: 28px;
color: var(--color-white);
float: left;
/* display: block; */
background: url(/merchant/images/v2/nav_divider.png) top right repeat-y;
display: inline;
padding: 0 6px;
/* letter-spacing: 0.1em; */
}
.content_wrapper_v2 table {
border-collapse: separate !important;
border-spacing: 2px;
}
.content_wrapper_v2 .radius_3 {
border-radius: var(--border-radius-3);
}
.content_wrapper_v2 .radius_5 {
border-radius: var(--border-radius-5);
}
.content_wrapper_v2 .radius_10 {
border-radius: var(--border-radius-10);
}
.content_wrapper_v2 .gradient_orange {
background: linear-gradient(180deg, var(--color-warning), #a76e2d);
}
.content_wrapper_v2 .gradient_green {
background: linear-gradient(180deg, var(--color-success), #537c2a);
}
.content_wrapper_v2 .gradient_red {
background: linear-gradient(180deg, #c93232, #a72a2a);
}
.content_wrapper_v2 .gradient_blue {
background: linear-gradient(180deg, var(--color-info), #295179);
}
.content_wrapper_v2 .title_btn_green {
color: var(--color-white) !important;
background: inherit;
border: 1px solid #537c2a;
border-radius: var(--border-radius-3);
}
.content_wrapper_v2 .title_btn_red {
color: var(--color-white) !important;
background: inherit;
border: 1px solid #c93232;
border-radius: 3px 3px 3px 3px;
}
.content_wrapper_v2 .title_btn_orange {
color: var(--color-white) !important;
background: inherit;
border: 1px solid #d08937;
border-radius: 3px 3px 3px 3px;
}
.content_wrapper_v2 .title_btn_blue {
color: var(--color-white) !important;
background: inherit;
border: 1px solid #295179;
border-radius: 3px 3px 3px 3px;
}
.content_wrapper_v2 .linky {
cursor: pointer;
}
.content_wrapper_v2 .linky:hover {
color: var(--color-white)f99;
}
.body_fullscreen {
background-image: none !important;
}
.content_fullscreen {
background-image: none !important;
}
body.solo::before,
body.solo::after,
body.body_fullscreen::before,
body.body_fullscreen::after,
body.content_fullscreen::before,
body.content_fullscreen::after {
display: none;
}
.content_wrapper_fullscreen {
margin-left: 20px !important;
}
/*==================== Content Area ====================*/
.content_wrapper_v2 .content_area {
float: left;
/*overflow: hidden;*/
padding: 12px 0 0;
width: 100%;
}
.content_wrapper_v2 .content_full {
/*width:340px;*/
width: 100%;
float: left;
margin-right: 0;
}
.content_wrapper_v2 .content_left {
/*width:340px;*/
width: 49%;
float: left;
margin-right: 0;
}
.content_wrapper_v2 .alert_content {
margin: 5px;
color: var(--color-gray-900);
font-size: 11px;
line-height: 1.5em;
}
.content_wrapper_v2 .alert_success {
margin-right: 20px;
border: 1px solid #669933;
background: #d0dac5;
padding: 3px 5px;
margin-bottom: 5px;
border-radius: var(--border-radius-small);
}
.content_wrapper_v2 .alert_note {
line-height: 16px;
margin-right: 20px;
border: 1px solid #3366ff;
background: #99ffff url(/merchant/images/note_16x16.png) no-repeat 7px 50%;
padding: 5px 5px 5px 30px;
margin-bottom: 8px;
border-radius: var(--border-radius-medium);
}
.content_wrapper_v2 .warningText,
.alert_warn {
line-height: 16px;
margin-right: 20px;
border: none;
background: var(--color-primary-orange-dark);
color: white;
margin-bottom: 8px;
padding: 16px 16px 16px 40px;
border-radius: var(--border-radius-medium);
position: relative;
}
.content_wrapper_v2 .warningText::before,
.alert_warn::before {
content: "\f1f7";
display: block;
width: 16px;
height: 16px;
font-size: 16px;
font-family: var(--font-icons);
position: absolute;
top: 16px;
left: 16px;
}
.content_wrapper_v2 .errorText,
.alert_fail {
margin-right: 20px;
border: 1px solid var(--color-primary-red);
background: #e4c5c6;
margin-bottom: 5px;
padding: 3px 5px;
border-radius: var(--border-radius-small);
position: relative;
}
.content_wrapper_v2 .field_error_span {
background: transparent url("/merchant/images/v2/field_error.png") no-repeat scroll left center;
padding-left: 18px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 3px;
}
.content_wrapper_v2 .field_warning_span {
background: transparent url("/merchant/images/v2/field_warning.png") no-repeat scroll left center;
padding-left: 18px;
padding-top: 2px;
padding-bottom: 2px;
margin-left: 3px;
}
.content_wrapper_v2 .notifications {
margin-right: 30px;
}
.none {
display: none;
}
/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
height: auto;
font-size: 14px;
}
body {
height: 100%;
width: 100%;
font-size: 1em;
line-height: 1.4;
}
body.no-header {
background: var(--color-white);
}
tr {
/*padding: 20px 0;*/
padding: 0;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
border: 0;
}
a::-moz-focus-inner {
border: 0;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
a {
text-decoration: none;
color: var(--color-primary-blue);
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: .2em 0;
background: var(--color-gray-500);
color: #000;
padding: .2em 0;
}
/* ==========================================================================
Animations
========================================================================== */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
/* background: var(--color-white) url(../../images/v3/left-menu-background.png) repeat-y left top; */
font-family: var(--font-primary-regular);
font-size: 14px;
color: var(--color-primary-grey-5);
padding: 0;
margin: 0;
height: auto;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
body:not(:is(.no-header, .body_fullscreen))::before {
content: "";
display: block;
width: 130px;
height: 100%;
position: absolute;
left: 0;
top:0;
z-index: 0;
background-color: var(--color-primary-grey-2);
pointer-events: none;
}
body:not(:is(.no-header, .body_fullscreen))::after {
content: "";
display: block;
width: 130px;
height: 100%;
position: absolute;
left: 0;
top:0;
z-index: 0;
background: linear-gradient(90deg, rgba(0,0,0,0) 95%, rgba(0,0,0,0.08) 100%);
pointer-events: none;
}
p[style="color: red;"],
strong[style="color: red;"] {
color: var(--color-primary-red) !important;
}
.strong,
strong {
font-family: var(--font-primary-bold);;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
pre {
white-space: pre;
}
pre strong {
font-family: monospace, serif;
}
table {
font-size: 0.8em;
font-size: 0.786rem;
}
table table {
font-size: 1em;
}
.content_wrapper_v2 table {
font-size: 1em;
}
#wrap {
min-height: 100%;
/*height: auto !important;*/
/*height: 100%;*/
/*margin: 0 auto -300px;*/
/*margin: 0 auto 0;*/
/*position: relative;*/
}
body.body_fullscreen #push {
height: 20px;
}
#push {
height: 300px;
}
/* ==========================================================================
Universal Styles
========================================================================== */
.clr {
clear: both;
}
.red {
color: var(--color-primary-red) !important;
}
.green {
color: #8dab00 !important;
}
.blue {
color: var(--color-primary-blue) !important;
}
.orange {
color: var(--color-primary-orange) !important;
}
.full {
width: 100%;
}
.width_1000 {
max-width: 1000px;
}
.width_800 {
max-width: 800px;
}
.width_400 {
max-width: 400px;
}
.width_390 {
width: 390px;
float: left;
margin-bottom: 20px;
}
.padding_top_5 {
padding-top: 5px;
}
.padding_top_10 {
padding-top: 10px;
}
.padding_top_20 {
padding-top: 20px;
}
.space_top_0 {
margin-top: 0;
}
.space_top_5 {
margin-top: 5px;
}
.space_top_10 {
margin-top: 10px !important;
}
.space_top_20 {
margin-top: 20px;
}
/* backport */
.space_top_30 {
margin-top: 30px;
}
.space_bottom_0 {
margin-bottom: 0 !important;
}
.space_bottom_5 {
margin-bottom: 5px !important;
}
.space_bottom_10 {
margin-bottom: 10px !important;
}
.space_bottom_20 {
margin-bottom: 20px;
}
.space_bottom_30 {
margin-bottom: 30px;
}
.space_left_10 {
margin-left: 10px;
}
.space_left_20 {
margin-left: 20px;
}
.space_right_0 {
margin-right: 0;
}
.space_right_10 {
margin-right: 10px;
}
.space_right_20 {
margin-right: 20px;
}
.list_small_input {
width: 20px;
height: 20px;
float: left;
}
.list_small_input .last {
margin-bottom: 0;
}
.list_50 {
width: 50px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_30 {
width: 30px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
table .list_50 {
margin-bottom: 0;
}
.div_table {
white-space: nowrap;
}
.div_table .list_100,
.div_table .list_150 {
float: none;
display: inline-block;
}
.list_75 {
width: 75px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_100 {
width: 100px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_fullwidth {
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
table .list_100,
table .list_fullwidth {
margin-bottom: 0;
}
table .list_150 {
font-size: 1em;
}
table .list_160 {
margin-bottom: 0;
}
table .list_200 {
font-size: 1em;
margin-bottom: 0;
}
.full {
width: 100%;
}
.minimum_width {
width: auto !important;
}
.list_100.last,
.list_fullwidth.list {
margin-bottom: 0;
}
.list_100 input {
width: 88px;
}
.list_100 input.margin-bottom,
.list_fullwidth input.margin-bottom {
margin-bottom: 10px;
}
.list_100 select,
.list_fullwidth select {
width: 100%;
}
.list_100 textarea,
.list_fullwidth textarea {
width: 88px;
}
.list_150 {
width: 150px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_150 h4 {
margin: 0;
font-size: 14px;
}
.list_200 {
width: 200px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_250 {
width: 250px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_160 {
width: 160px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_300 {
width: 300px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_350 {
width: 350px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_400 {
width: 400px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_500 {
width: 500px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_600 {
width: 600px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_1000 {
width: 1000px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.list_200.last {
margin-bottom: 0;
}
.list_200 select {
border: 1px solid var(--color-primary-grey-3);
background: #F1F1F1;
width: 198px;
font-size: 1em;
}
.list_200 textarea {
border: 1px solid var(--color-primary-grey-3);
background: #F1F1F1;
width: 188px;
}
.list_200 input[type="text"] {
width: 188px;
}
.list_200 input[type="radio"] {
margin-bottom: 10px;
}
.list_half {
display: block;
float: left;
padding: 0;
width: 46%;
min-width: 300px;
overflow: auto;
margin-right: 20px;
margin-bottom: 20px;
}
.list_half.menu {
min-width: 550px !important;
}
.list_full {
display: block;
float: left;
padding: 0;
width: 100%;
min-width: 300px;
overflow: auto;
}
.list_100 span.info,
.list_fullwidth span.info,
.list_150 span.info,
.list_160 span.info,
.list_300 span.info,
.list_500 span.info {
top: auto;
}
.list_third {
display: block;
width: 33%;
float: left;
}
.list_third .list_content {
margin-right: 20px;
}
.list_third .list_content.last {
margin-right: 0;
}
ul.unstyled {
margin: 0;
padding: 0;
}
ul.unstyled > li {
list-style: none;
}
.row {
margin-bottom: 20px;
}
.title.row {
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-size: .9em;
margin-bottom: 0;
}
.default_info {
margin-bottom: 20px;
}
.currencyinput {
border: 1px solid #bbb;
background: #F1F1F1;
background: white;
letter-spacing: .08em;
padding: 5px;
width: 198px;
border-radius: 4px;
}
.currencyinput input {
border: 0 !important;
padding: 0 5px !important;
width: 70px;
}
table .btn {
font-size: 1em;
}
input[type="submit"][value="Save"] {
color: var(--color-white);
background-color: var(--color-primary-blue);
border: none;
padding: 6px 8px;
letter-spacing: 0.08em;
border-radius: var(--border-radius-small);
line-height: 1;
cursor: pointer;
font-weight: bold;
}
.btn {
color: var(--color-white);
background-color: var(--color-primary-blue);
border: none;
padding: 5px;
letter-spacing: 0.08em;
border-radius: var(--border-radius-small);
line-height: 1.5;
cursor: pointer;
font-weight: bold;
}
.btn.toggled {
color: white !important;
background: var(--color-primary-grey-4) !important;
}
.btn:disabled {
color: var(--color-gray-700) !important;
background-color: var(--color-primary-grey-2) !important;
cursor: default;
}
.btn.btn-ai {
background-color: #6F4173;
transition: var(--transition-all);
}
.btn.btn-ai:hover {
background-color: #623864;
}
.btn.btn-docs {
background-color: transparent;
color: var(--color-primary-blue);
border: 1px solid var(--color-primary-blue);
transition: var(--transition-all);
}
.btn.btn-docs:hover {
background-color: transparent;
color: var(--color-primary-blue-dark);
border: 1px solid var(--color-primary-blue-dark);
}
#uc-reports .tools-buttons .btn.btn-ai {
background-color: #6F4173 !important;
}
.btn.delete {
background: var(--color-primary-red);
}
.list_200 .btn {
font-size: 1em;
}
.remove.btn {
background: var(--color-primary-red);
}
td .btn {
margin-right: 5px;
}
.btn.save_btn {
width: 100%;
padding: 8px 12px;
background: #d7a02b;
font-weight: bold;
margin-bottom: 20px;
font-size: 1.2em;
}
.btn.orange_btn {
background: var(--color-primary-orange);
font-weight: bold;
transition: background var(--transition-primary);
&:hover {
background: var(--color-primary-orange-dark);
}
}
.btn.help_btn {
background: var(--color-primary-green) !important;
transition: background var(--transition-primary);
}
.btn.green_btn {
background: var(--color-primary-green);
font-weight: bold;
}
.btn.help_btn:hover,
.btn.green_btn:hover {
background: var(--color-primary-green-dark) !important;
}
.widget_box_content {
padding: 20px;
}
/*
UltraList Styles
*/
.ultralist {
padding: 0;
list-style-type: none;
font-size: 11px;
margin-top: 0;
margin-bottom: 10px;
}
.ultralist li {
margin-bottom: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCC;
padding-top: 5px;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.ultralist .ultralistterm {
display: inline-block;
width: 100px;
font-family: 'latobold';
}
.ultralist .ultralistdefinition,
.ultralist .ultralistentry {
margin-right: 20px;
}
.ultralist .ultralistterm,
.ultralist .ultralistdefinition,
.ultralist .ultralistentry {
display: inline-block;
}
.ultralist .ultralisticon.ultralistedit {
background: url(../../images/v3/icons.png) no-repeat -80px -400px;
}
.ultralist .ultralisticon.ultralistdelete {
background: url(../../images/v3/icons.png) no-repeat -160px -480px;
}
.ultralistadd.btn {
display: inline-block;
padding: 0 5px 0 5px;
}
.ultralist .ultralisticon {
display: block;
width: 16px;
height: 16px;
padding: 0;
margin-right: 10px;
border: none;
float: right;
cursor: pointer !important;
}
/*
Font Family Picker Styles
*/
.fontFamilyPicker {
padding: 0;
list-style-type: none;
font-size: 11px;
margin-top: 0;
margin-bottom: 10px;
}
.fontFamilyPicker li {
margin-bottom: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCC;
padding-top: 5px;
}
.fontFamilyPicker.grab li {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.fontFamilyPicker .fontFamilyPickerEntry {
margin-right: 20px;
display: inline-block;
}
.fontFamilyPicker .fontFamilyPickerIcon.fontFamilyPickerDelete {
background: url(../../images/v3/icons.png) no-repeat -160px -480px;
}
.fontFamilyPickerAdd.btn {
display: inline-block;
padding: 0 5px 0 5px;
}
.fontFamilyPicker .fontFamilyPickerIcon {
display: block;
width: 16px;
height: 16px;
padding: 0;
margin-right: 0;
border: none;
float: right;
cursor: pointer !important;
}
.fontedit.btn {
display: inline-block;
padding: 0 5px 0 5px;
}
#fontFamilyPickerAddDialogDiv .fontSelection {
width: 344px;
}
.fontSelectionDropDown .select2-results__option {
padding: 0;
}
.fontSelectionDropDown .select2-results__option:hover {
border: 1px solid blue;
}
.fontSelectionDropDown .select2-results__options li div {
background: url("/js/jquery-font-family-picker/imgs/googleFontList.gif") !important;
background-repeat: no-repeat;
overflow: hidden;
text-indent: -999px;
height: 30px;
}
.select2-container {
z-index: 200000;
}
.fontFamilyPicker li:first-child {
padding-top: 0;
}
.fontFamilyPicker li:last-child {
border-bottom: none;
}
/*
Video List Styles
*/
#videoListAddDialogDiv .embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-right: 0;
}
#videoListAddDialogDiv .embed iframe,
#videoListAddDialogDiv .embed-container object,
#videoListAddDialogDiv .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videolist {
padding: 0;
list-style-type: none;
font-size: 11px;
margin-top: 0;
margin-bottom: 10px;
}
.videolist li {
margin-bottom: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCC;
padding-top: 5px;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.videolist li:first-child {
padding-top: 0;
}
.videolist li:last-child {
border-bottom: none;
}
.videolisticon {
display: block;
width: 16px;
height: 16px;
padding: 0;
margin-right: 0;
border: none;
float: right;
cursor: pointer !important;
}
.videolisticon.videolistdelete {
background: url(/merchant/images/v3/icons.png) no-repeat -160px -480px;
margin-left: 10px;
margin-bottom: 10px;
}
/* Mailing list styles */
.mailinglist {
padding: 0;
list-style-type: none;
font-size: 11px;
margin-top: 0;
margin-bottom: 10px;
}
.mailinglist li {
margin-bottom: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCC;
padding-top: 5px;
}
.mailinglist li:first-child {
padding-top: 0;
}
.mailinglist li:last-child {
border-bottom: none;
}
.mailinglisticon {
display: block;
width: 16px;
height: 16px;
padding: 0;
margin-right: 0;
border: none;
float: right;
cursor: pointer !important;
}
.mailinglisticon.mailinglistdelete {
background: url(/merchant/images/v3/icons.png) no-repeat -160px -480px;
margin-left: 10px;
margin-bottom: 10px;
}
/*
Lightbox Styles
*/
.ultralightbox {
display: none;
}
.ultralightbox-body {
overflow: hidden;
}
#ultralightbox-overlay,
.ultralightbox-overlay {
content: "";
display: block;
position: fixed;
/* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 200;
background-color: var(--overlay-black-darker);
}
.ultralightbox.ultralightbox-dynamic {
/*padding: 20px;*/
}
.ultralightbox .ultralightbox-title {
font-family: latobold, arial;
font-size: 1.17em;
font-weight: normal;
padding-bottom: 7px;
padding-top: 20px;
padding-right: 20px;
}
.ultralightbox .ultralightbox-content-wrapper {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.ultralightbox .ultralightbox-title-wrapper {
margin: 0 20px 20px 20px;
/* border-bottom: 1px solid #bbb; */
font-weight: bold;
position: relative;
}
.ultralightbox .ultralightbox-close-icon {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
color: var(--color-primary-blue);
cursor: pointer;
line-height: 50px;
position: absolute;
right: -20px;
text-align: center;
top: 0;
width: 60px;
height: 100%;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.ultralightbox .ultralightbox-close-icon::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f1fa";
font-size: 16px;
width: 16px;
height: 16px;
display: block;
color: var(--overlay-black-dark);
pointer-events: none;
transition: all 0.3s ease-in-out;
}
.ultralightbox .ultralightbox-close-icon:hover::before {
color: rgba(0, 0, 0, 0.75)
}
.ultralightbox .ultralightbox-close-icon span {
display: none;
}
.ultralightbox-show {
display: block !important;
background-color: white;
/* border: 1px solid #000; */
box-shadow: 0 5px 10px var(--overlay-black-darkest);
top: 20px;
left: 50%;
margin: 0 auto;
position: fixed;
z-index: 1100;
max-height: 90%;
overflow-y: auto;
border-radius: var(--border-radius-10);
}
/*
Report Status Styles
*/
.ultrareportstatus {
display: none;
}
.ultrareportstatus-body {
overflow: hidden;
}
#ultrareportstatus-overlay {
content: "";
display: block;
position: fixed;
/* could also be absolute */
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 20;
background-color: rgba(0, 0, 0, 0.90);
}
.ultrareportstatus.ultrareportstatus-dynamic {
padding: 20px;
}
.ultrareportstatus .ultrareportstatus-title {
font-family: var(--font-primary-regular);
font-size: 1.17em;
font-weight: normal;
padding-bottom: 7px;
}
.ultrareportstatus .ultrareportstatus-title-wrapper {
margin-bottom: 20px;
border-bottom: 1px solid #bbb;
}
.ultrareportstatus .jobTitleWrapper {
position: relative;
}
.ultrareportstatus .ultrareportstatus-background-icon {
/* background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3); */
color: var(--color-primary-blue);
cursor: pointer;
line-height: 50px;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 60px;
z-index: 9999;
span {
color: transparent;
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
}
.ultrareportstatus-show {
display: block !important;
background-color: white;
border: 1px solid #000;
border-radius: 16px;
top: 50%;
left: 50%;
margin: 0 auto;
position: fixed;
z-index: 10000;
max-height: 90%;
overflow-y: auto;
min-width: 420px;
}
.ultrareportstatus-show-top {
top: 0;
left: 50%;
margin: 0 auto;
position: fixed;
}
.ultrareportstatus .jobProgressPercentageBar .ui-progressbar-value {
/* TODO: Something better than red */
background: none repeat scroll 0 0 #ff0000;
}
/*
Generic Styling, for Desktops/Laptops
*/
.interior_content table.responsive {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
.content_wrapper_v2 .responsive {
border-collapse: collapse;
border-spacing: 0;
}
.content_wrapper_v2 .responsive tr:nth-of-type(odd) td {
background: var(--color-primary-grey-1);
}
.interior_content .responsive th {
background: var(--color-primary-grey-2);
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
.interior_content .responsive td,
.content_wrapper_v2 .responsive th {
padding: 6px;
text-align: left;
border-top: 0;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #cccccc70;
padding: 12px 12px 12px 12px;
font-family: var(--font-primary-regular);
color: var(--color-primary-grey-4);
/* border-collapse: collapse; */
/* border-spacing: 0; */
&[align="center"] {
text-align: center;
}
}
.responsive td {
padding: 12px 12px 12px 12px;
color: #888
}
.interior_content table.nonresponsive {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border-radius: var(--border-radius-medium);
}
.interior_content table.nonresponsive thead tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.interior_content table.nonresponsive thead tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.interior_content table.nonresponsive tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.interior_content table.nonresponsive tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
table.responsive.transactional-merchant-notes th,
table.responsive.transactional-merchant-notes td {
font-size: 12px;
color: #888;
font-family: 'latoregular';
}
table.responsive.transactional-merchant-notes td {
line-height: 22px;
}
table.responsive.transactional-merchant-notes {
border-bottom: 1px solid var(--color-primary-grey-2);
}
/* Zebra striping */
.interior_content .nonresponsive tr:nth-of-type(odd) {
background: var(--color-gray-100);
}
.interior_content .nonresponsive th {
background: var(--color-primary-grey-2);
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
.interior_content .nonresponsive td,
.nonresponsive th {
padding: 6px;
/* border: 1px solid var(--color-primary-grey-3); */
text-align: left;
}
.interior_content table.nonresponsive.nowrap td {
white-space: nowrap;
}
.interior_content table.nostyle {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
.interior_content .nostyle tr {
background: none !important;
}
.interior_content .nostyle th {
background: none !important;
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
.interior_content .nostyle td,
.nostyle th {
padding: 0;
border: none;
text-align: left;
}
.interior_content table.nostyle.nowrap td {
white-space: nowrap;
}
.full_divider {
clear: both;
border-bottom: 1px solid var(--color-primary-grey-3);
margin: 20px 0;
}
.section_content .full_divider {
border-bottom-style: dashed;
margin: 20px 0;
}
.icon_link {
width: 16px;
height: 16px;
background: url(../../images/v3/icons.png) no-repeat -200px -480px;
border: none !important;
}
.icon_view {
width: 16px;
height: 11px;
background: url(../../images/v3/icons.png) no-repeat -457px -240px;
border: none !important;
text-indent: -9999px;
}
.icon_hide {
width: 16px;
height: 11px;
background: url(../../images/v3/icons.png) no-repeat -457px -252px;
border: none !important;
text-indent: -9999px;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 1024px),
(min-device-width: 1024px) and (max-device-width: 1200px) {
/* Force table to not be like tables anymore */
table.responsive,
.responsive thead,
.responsive tbody,
.responsive th,
.responsive td,
.responsive tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.responsive thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive tr {
/*border: 1px solid #ccc;*/
padding: 0;
margin-bottom: 20px;
}
.responsive td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid var(--color-primary-grey-2);
position: relative;
padding: 6px 6px 6px 50% !important;
}
.responsive td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 10%;
text-align: left;
padding-right: 10px;
white-space: nowrap;
}
}
/* Smartphones (portrait and landscape) ----------- */
/* @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
padding: 0;
margin: 0;
width: 320px;
}
} */
/* iPads (portrait and landscape) ----------- */
/* @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 100vw;
}
} */
/*==================== Header ====================*/
header,
.head {
width: 100%;
height: 100px;
/* background: url(../../images/v3/head-background.png) repeat-x #333; */
background-color: var(--color-primary-grey-6);
position: relative;
min-width: 768px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
z-index: 100;
}
#header_extension {
/* background: url(../../images/v3/head-background.png) repeat-x #333; */
background-color: var(--color-primary-grey-6);
height: 100px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.logo {
position: relative;
width: 320px;
z-index: 20;
display: flex;
align-items: center;
gap: 16px
}
.logo .whats-new-wrapper {
background-color: rgba(255,255,255,0.3);
padding: 4px 4px 4px 8px;
display: none;
align-items: center;
gap: 6px;
border-radius: 16px;
cursor: pointer;
transition: background-color 0.6s ease, box-shadow 0.4s ease;
box-shadow: 0 0 0 0 var(--color-alt-green-1);
}
.logo .whats-new-wrapper.active {
display: flex;
}
.logo .whats-new-wrapper.active:hover {
background-color: var(--color-alt-green-1);
box-shadow: 0 0 20px 4px var(--color-alt-green-1);
}
@supports (color: color-mix(in srgb, red, transparent)){
.logo .whats-new-wrapper.active:hover {
background-color: var(--color-alt-green-1);
box-shadow: 0 0 22px 5px color-mix(in srgb, var(--color-alt-green-1) 55%, transparent);
}
}
.logo .whats-new-wrapper.active.new {
background-color: var(--color-alt-green-1);
animation: whatsNewPulse 3.5s ease-in-out infinite;
}
@keyframes whatsNewPulse{
0%,100%{ box-shadow: 0 0 10px 2px var(--color-alt-green-1); }
50% { box-shadow: 0 0 22px 5px var(--color-alt-green-1); }
}
@supports (color: color-mix(in srgb, red, transparent)){
@keyframes whatsNewPulse{
0%,100%{ box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-alt-green-1) 20%, transparent); }
50% { box-shadow: 0 0 22px 5px color-mix(in srgb, var(--color-alt-green-1) 55%, transparent); }
}
}
.logo .whats-new-wrapper.active.new:hover {
background-color: var(--color-alt-green-1);
box-shadow: 0 0 20px 4px var(--color-alt-green-1);
}
.logo .whats-new-wrapper span {
white-space: nowrap;
font-size: 12px;
font-weight: bold;
}
.logo .whats-new-wrapper svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.header_right {
position: relative;
width: 450px;
box-sizing: border-box;
z-index: 10;
}
.header_right .feedback {
float: right;
position: relative;
background: var(--color-primary-blue);
color: var(--color-white);
font-family: var(--font-primary-regular);
font-size: 0.8em;
font-size: 0.786rem;
text-transform: uppercase;
width: 140px;
height: 30px;
line-height: 30px;
letter-spacing: .1em;
text-align: center;
margin-right: 10px;
border-radius: var(--border-radius-3);
cursor: pointer;
}
.header_right .feedback:after {
content: "";
position: absolute;
bottom: -5px;
left: 10px;
border-width: 5px 5px 0;
border-style: solid;
border-color: var(--color-primary-blue) transparent;
display: block;
width: 0;
}
.search_area {
width: 200px;
height: 30px;
float: right;
}
/* ----------- Search ----------- */
.search_area input {
}
.search_block {
height: 30px;
position: relative;
}
.search_block::after {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f1ae";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: var(--color-white);
position: absolute;
top: 9px;
right: 9px;
pointer-events: none;
}
.search_bg {
background: rgba(255, 255, 255, 0.2) !important;
width: 150px;
height: 30px;
line-height: 30px;
float: left;
font-size: 12px;
color: rgba(255, 255, 255, 0.5) !important;
border: 0 !important;
padding: 0 0 0 10px !important;
border-radius: var(--border-radius-small);
}
.search_btn {
background-color: var(--color-primary-blue);
background-position: 13px 7px;
width: 30px;
height: 30px;
border: 0;
cursor: pointer;
float: right;
border-radius: var(--border-radius-small);
position: relative;
transition: var(--transition-all);
}
.search_btn:hover {
background-color: var(--color-primary-blue-dark);
}
.search_hint {
position: absolute;
right: 199px;
text-align: right;
height: 28px;
line-height: 26px;
white-space: nowrap;
/*border: 1px solid #404040;*/
padding: 0 15px 0 10px;
font-family: 'latolight_italic';
letter-spacing: .08em;
color: rgba(255, 255, 255, 0.6);
/*color: var(--color-primary-grey-4);*/
}
.search_hint .arrow {
display: none;
/*display: block;*/
background: url(../../images/v3/icons.png) no-repeat -33px -209px;
width: 8px;
height: 8px;
position: absolute;
right: -4px;
top: 10px;
}
.system_alert {
display: none;
}
/* ----------- Search Results ----------- */
#ucresults {
position: absolute;
top: 65px;
right: 30px;
width: 1050px;
z-index: 999;
font-size: 0.8em;
font-size: 0.786rem;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#ucresults .column {
float: right;
width: 348px;
border: 1px solid #bbb;
margin-right: -1px;
box-shadow: var(--boxshadow-xs);
}
#ucresults .column h2 {
display: block;
background: rgb(255, 255, 255);
/* The Fallback */
background: rgba(255, 255, 255, 1);
line-height: initial;
padding: 10px;
border-bottom: 1px solid #BBB;
}
#ucresults .column dl {
margin: 0;
}
#ucresults .column dl {
background: rgb(241, 241, 241);
/* The Fallback */
background: rgba(241, 241, 241, .95);
padding: 10px;
line-height: initial;
margin: 0;
}
#ucresults .column dl.hover {
background: rgb(218, 236, 247);
/* The Fallback */
background: rgba(218, 236, 247, 1);
}
#ucresults .column dl.search_hierarchy_list {
background: var(--color-primary-grey-4);
color: var(--color-white);
}
#ucresults .column dl.search_hierarchy_list.hover {
background: rgb(218, 236, 247);
/* The Fallback */
background: rgba(218, 236, 247, 1);
color: var(--color-white);
}
#ucresults .column dl.search_hierarchy_list a {
color: var(--color-white);
}
#ucresults .column dl.search_hierarchy_list.hover a {
color: var(--color-primary-blue);
}
@media only screen and (max-width: 768px) {
.search_results {
width: 600px;
}
.search_results .column {
width: 198px;
}
#ucresults {
width: 600px;
}
#ucresults .column {
width: 198px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1160px) {
.search_results {
width: 750px;
}
.search_results .column {
width: 248px;
}
#ucresults {
width: 750px;
}
#ucresults .column {
width: 248px;
}
}
@media only screen and (min-width: 1160px) and (max-width: 1350px) {
.search_results {
width: 900px;
}
.search_results .column {
width: 298px;
}
#ucresults {
width: 900px;
}
#ucresults .column {
width: 298px;
}
}
.system_alert {
display: none;
}
/*==================== Content Area & Sidebar Wrappers ====================*/
.content {
width: 100%;
min-height: 553px;
min-height: 90%;
background-color: var(--color-primary-grey-1);
}
body[data-main-form-action="/merchant/item/review/reviewTemplateEditSave.do"],
body[data-main-form-action="/merchant/item/review/reviewSettingsQuestionEditSave.do"],
body[data-main-form-action="/merchant/item/editor/autoOrderV3Save.do"],
body[data-main-form-action="/merchant/orderprocessing/sd/shippingDepartmentListSave.do"],
body[data-main-form-action="/merchant/orderprocessing/ar/accountsReceivableListSave2.do"],
body[data-main-form-action="/merchant/item/review/reviewTemplateEditSave.do"] {
.content {
background-color: var(--color-primary-grey-1);
}
p.return_link {
margin-left: 30px;
}
}
.content_wrapper {
clear: both;
margin-left: 130px;
&::after {
content: "";
display: table;
clear: both;
}
}
/*==================== User Info ====================*/
.user_info {
width: 130px;
height: 150px;
position: relative;
}
.old_ie .user_info .account_dialog {
display: none;
}
.user_info .account_dialog {
position: absolute;
/*width: 270px;*/
width: 0;
height: 200px;
background: var(--color-white);
border-radius: var(--border-radius-10);
left: 120px;
top: 38px;
border: -1px solid #d9d9d9;
z-index: 999;
font-size: 0.8em;
font-size: 0.786rem;
box-shadow: var(--boxshadow-xs);
/*-moz-transform-origin: 0% 100%;*/
/*-ms-transform-origin: 0% 100%;*/
/*-o-transform-origin: 0% 100%;*/
/*transform-origin: 0% 100%;*/
/*-webkit-transform: rotateY(-90deg);*/
/*-moz-transform: rotateY(-90deg);*/
/*-ms-transform: rotateY(-90deg);*/
/*-o-transform: rotateY(-90deg);*/
/*transform: rotateY(-90deg);*/
/*-webkit-transition: -webkit-transform .15s linear;*/
/*-moz-transition: -moz-transform .15s linear;*/
/*-ms-transition: -ms-transform .15s linear;*/
/*-o-transition: -o-transform .15s linear;*/
/*transition: transform .15s linear;*/
display: none;
}
.user_info .account_dialog.not_safari {
/*-webkit-transform-origin: 0% 100%;*/
}
.user_info.activeMenu .account_dialog {
display: block;
width: 270px;
/*-webkit-transform: rotateY(0deg);*/
/*-moz-transform: rotateY(0deg);*/
/*-ms-transform: rotateY(0deg);*/
/*-o-transform: rotateY(0deg);*/
/*transform: rotateY(0deg);*/
}
.user_info.activeMenu .user_merch_id .arrow {
background: transparent;
border: none;
}
.account_dialog .arrow {
display: block;
position: absolute;
width: 12px;
height: 24px;
background: url(../../images/v3/menu-active.png) no-repeat right center;
top: 87px;
left: -12px;
}
.account_dialog .account_login {
height: 40px;
background: transparent;
line-height: 40px;
font-family: latobold, arial;
letter-spacing: .1em;
padding-left: 20px;
color: #5b5b5b;
border-bottom: none;
}
.account_dialog .account_login span {
opacity: 0;
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
}
.user_info.activeMenu .account_dialog .account_login span {
opacity: 1;
}
.account_dialog .account_info {
position: relative;
height: 40px;
border-bottom: none;
margin-top: 10px;
line-height: 40px;
font-family: latobold, arial;
letter-spacing: .1em;
padding-left: 20px;
color: #5b5b5b;
}
.account_dialog .account_info a {
opacity: 0;
text-decoration: none;
color: #5fb2ea;
display: block;
height: 100%;
width: 100%;
-webkit-transition: opacity .2s ease-in;
-moz-transition: opacity .2s ease-in;
-o-transition: opacity .2s ease-in;
-ms-transition: opacity .2s ease-in;
transition: opacity .2s ease-in;
}
.user_info.activeMenu .account_dialog .account_info a {
opacity: 1;
}
.icon_account {
display: block;
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
background: url(../../images/v3/icons.png) no-repeat 0 -80px;
}
.icon_pref {
display: block;
position: absolute;
top: 13px;
right: 20px;
width: 20px;
height: 20px;
background: url(../../images/v3/icons.png) no-repeat -40px -80px;
background: none;
}
.icon_out {
display: block;
position: absolute;
top: 15px;
right: 20px;
width: 20px;
height: 20px;
background: url(../../images/v3/icons.png) no-repeat -80px -80px;
background: none;
}
.icon_out::before,
.icon_pref::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f1ff";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: rgb(95, 178, 234);
position: absolute;
top: 0;
right: 0;
pointer-events: none;
}
.icon_pref::before {
content: "\f1c2";
}
.user_info .user_img {
position: absolute;
width: 100px;
height: 100px;
background: url(../../images/v3/user-img-default.jpg);
z-index: 10;
left: 15px;
top: 15px;
border-radius: 50%;
background-position: center;
}
.user_info .user_merch_id {
width: 130px;
height: 23px;
text-align: center;
text-transform: uppercase;
position: absolute;
left: 0;
bottom: 0;
color: var(--color-gray-750);
font-family: var(--font-primary-regular);
font-size: 16px;
letter-spacing: 1px;
cursor: pointer;
padding-top: 5px;
z-index: 11;
}
.user_info .user_merch_id .arrow {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -30px;
right: 20px;
width: 20px;
height: 20px;
background-color: var(--color-primary-blue);
border-radius: 50%;
border: 2px solid #e6e7e6;
transition: border 0.3s ease, background-color 0.3s ease;
}
.user_info .user_merch_id .arrow::after {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f22c";
font-size: 8px;
width: 8px;
height: 8px;
display: block;
color: var(--color-white);
position: relative;
pointer-events: none;
}
.user_info.activeMenu .user_merch_id .arrow {
background-color: var(--color-primary-blue);
border: 3px solid #e6e7e6;
}
/*==================== Navigation ====================*/
.nav {
font-size: 11px;
}
.nav ul {
padding: 0;
margin: 0;
}
.nav ul li {
list-style: none;
background-color: transparent;
display: block;
position: relative;
min-height: 40px;
margin-top: 0;
font-family: latobold, Arial;
font-size: 12px;
/* text-transform: uppercase; */
line-height: 40px;
cursor: pointer;
color: rgba(0, 0, 0, 0.75);
transition: color 0.3s ease;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
/* background: rgba(255,0,0,0.3); */
transition: background-color 0.3s ease-in;
}
.nav ul li.activeMenu {
background-color: rgba(255, 255, 255, 0.75);
}
.nav ul li div.nav_click_area {
margin-left: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.nav ul li.activeMenu div.nav_click_area {
}
.nav ul li div.sub_menu div.nav_click_area {
padding: 0 10px 10px 10px;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
}
.nav ul li div.nav_click_area.beta::before {
content: "beta";
position: absolute;
font-size: 8px;
bottom: 1px;
left: 30px;
line-height: 1;
background-color: rgba(0, 0, 0, 0.75);
color: #eaeaea;
padding: 2px 4px;
border-radius: 1px 4px 4px 4px;
}
.nav .nav_task_count {
line-height: 17px;
position: relative;
display: block;
border-radius: var(--border-radius-medium);
padding: 0 5px;
font-weight: bold;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
color: white;
background-color: var(--color-primary-grey-3);
}
.nav .nav_task_count.open {
background-color: var(--color-primary-blue);
}
.nav ul li a {
color: rgba(0, 0, 0, 0.75);
transition: color 0.3s ease;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.nav ul li.activeMenu a {
color: rgba(0, 0, 0, 0.6);
}
.nav ul li.activeMenu li a:hover {
color: rgb(106, 187, 235);
}
.nav ul li.hover {
/* background: url(../../images/v3/shadow-right.png) repeat-y right top #f1f1f1 !important; */
color: rgba(0, 0, 0, 0.6);
}
/* .nav ul li.active {
background: url(../../images/v3/shadow-right.png) repeat-y right top #5c5c5c;
} */
.sub_arrow_right_wrapper {
padding: 8px 10px 10px 10px;
width: 8px;
position: absolute;
right: 4px;
top: 8px;
}
.nav_head_support .sub_arrow_right_wrapper {
top: 12px;
}
.nav ul li.activeMenu div.sub_menu .sub_arrow_right_wrapper {
top: 0;
padding-top: 6px;
padding-bottom: 9px;
}
.nav ul li .sub_arrow_right {
display: block;
/* background: url(../../images/v3/icons.png) no-repeat 0 -218px; */
width: 8px;
height: 8px;
position: relative;
}
.nav ul li .sub_arrow_right::after {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f155";
font-size: 8px;
width: 8px;
height: 8px;
display: block;
color: var(--overlay-black-dark);
position: absolute;
top: 0;
right: 0;
pointer-events: none;
transition: color 0.3s ease;
}
.nav ul li.activeMenu > .sub_arrow_right_wrapper .sub_arrow_right::after {
/*display: block;*/
/* background: url(../../images/v3/icons.png) no-repeat -24px -218px; */
/*width:8px;*/
/*height:8px;*/
/*position: absolute;*/
/*right: 10px;*/
/*top: 26px;*/
color: var(--overlay-black-dark);
}
.nav ul li .sub_arrow_right_white {
display: block;
background: url(../../images/v3/icons.png) no-repeat 0 -209px;
width: 8px;
height: 8px;
position: absolute;
right: 10px;
top: 26px;
}
.nav ul li.activeMenu .sub_arrow_right_white {
display: block;
background: url(../../images/v3/icons.png) no-repeat -24px -209px;
width: 8px;
height: 8px;
position: absolute;
right: 10px;
top: 26px;
}
.nav ul li.nav_head_support {
background: var(--color-primary-green);
height: 50px;
/* margin-top: 20px; */
/*padding: 0 0 0 10px;*/
font-family: latobold, Arial;
color: var(--color-white);
text-transform: uppercase;
line-height: 50px;
font-size: 10px;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.004);
}
.nav ul li.support {
background: var(--color-primary-green);
list-style: none;
height: auto;
padding: 10px 0;
line-height: 22px;
font-size: 12px;
letter-spacing: 1px;
border-bottom: 1px solid var(--color-primary-grey-3);
text-transform: none;
}
/* .nav ul li.support a {
color: #8dab00;
padding: 0 0 0 20px;
display: block;
text-decoration: none;
font-family: var(--font-primary-regular);
} */
.nav ul li .icon {
display: block;
width: 12px;
height: 12px;
position: relative;
}
/* .nav ul li.nav_head_support .icon {
margin: 10px 5px 0 0;
} */
.nav ul li .icon::after {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f188";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: var(--overlay-black-dark);
pointer-events: none;
}
.nav ul li.nav_head_support .icon::after {
color: var(--overlay-white-light);
}
.nav ul li .nav_with_submenu > .icon {
margin-top: 0;
}
.nav ul li .icon.admin::after {
content: "\f137";
}
.nav ul li .icon.config::after {
content: "\f160";
}
.nav ul li .icon.catalog::after {
content: "\f160";
}
.nav ul li .icon.store::after {
content: "\f150";
}
.nav ul li .icon.items::after {
content: "\f1e5";
}
.nav ul li .icon.operations::after {
content: "\f159";
}
.nav ul li .icon.advance::after {
content: "\f15f";
}
.nav ul li .icon.support::after {
content: "\f201";
}
.nav ul li .icon.conversations::after {
content: "\f151";
}
.nav ul li .icon.tasks::after {
content: "\f157";
}
/* .nav ul li .icon.admin {
background: url(../../images/v3/icons.png) no-repeat 0 -40px;
} */
/* .nav ul li .icon.config {
background: url(../../images/v3/icons.png) no-repeat -40px -40px;
} */
/* .nav ul li .icon.catalog {
background: url(../../images/v3/icons.png) no-repeat -80px -40px;
} */
/* .nav ul li .icon.store {
background: url(../../images/v3/icons.png) no-repeat -80px -40px;
} */
/* .nav ul li .icon.items {
background: url(../../images/v3/icons.png) no-repeat -200px -40px;
}
.nav ul li .icon.operations {
background: url(../../images/v3/icons.png) no-repeat -120px -40px;
}
.nav ul li .icon.advance {
background: url(../../images/v3/icons.png) no-repeat -160px -40px;
} */
/* .nav ul li.hover .icon.admin {
background: url(../../images/v3/icons.png) no-repeat 0 -40px;
}
.nav ul li.hover .icon.config {
background: url(../../images/v3/icons.png) no-repeat -40px -60px;
}
.nav ul li.hover .icon.store {
background: url(../../images/v3/icons.png) no-repeat -80px -60px;
}
.nav ul li.hover .icon.operations {
background: url(../../images/v3/icons.png) no-repeat -120px -60px;
}
.nav ul li.hover .icon.advance {
background: url(../../images/v3/icons.png) no-repeat -160px -60px;
} */
/* .nav ul li .icon.support {
background: url(../../images/v3/icons.png) no-repeat -200px 0;
} */
.nav ul li .icon.feedback {
background: url(../../images/v3/icons.png) no-repeat -280px -40px;
}
.nav ul li.hover .icon.feedback {
background: url(../../images/v3/icons.png) no-repeat -280px -60px;
}
.old_ie .nav ul li .sub_menu {
display: none;
}
.nav ul li .sub_menu {
min-width: 180px;
position: absolute;
top: 0;
left: 130px;
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(4px);
z-index: 999;
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
white-space: nowrap;
display: none;
padding-top: 10px;
border-radius: 0 8px 8px 8px;
}
.nav ul li .sub_menu::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f14d";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: rgba(255, 255, 255, 1);
position: absolute;
top: 11px;
left: -8px;
pointer-events: none;
transition: color 0.3s ease;
/* text-shadow: 0 0 2px rgba(0,0,0,0.3); */
display: none;
}
/* This is a hack for the nested menus issue */
.nav ul li .sub_menu .sub_menu {
left: 180px;
}
.nav ul li .sub_menu ul {
margin: 0;
opacity: 0;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
transition: opacity .3s ease-in;
}
.nav ul li .sub_menu ul li {
background: none;
list-style: none;
height: auto;
/*padding: 10px 0;*/
line-height: 18px;
font-size: 12px;
letter-spacing: 1px;
/* border-bottom: 1px solid var(--color-primary-grey-3); */
text-transform: none;
color: rgba(0, 0, 0, 0.75);
font-weight: bold;
font-size: 10px;
}
.nav ul li .sub_menu.sub_menu_compact {
max-width: calc(100vw - 150px);
overflow-x: auto;
}
.nav ul li .sub_menu.sub_menu_compact ul li {
min-height: 30px;
}
.nav ul li .sub_menu ul li:first-child {
/*padding-top: 10px;*/
}
.nav ul li .sub_menu ul li:last-child {
/* padding-bottom: 10px; */
}
.nav ul li .sub_menu a {
/*padding: 0 10px 0 10px;*/
display: block;
text-decoration: none;
font-family: var(--font-primary-regular);
}
.nav ul li .sub_menu .nav_with_submenu > div a {
padding: 0;
}
/* .nav_without_submenu.activeMenu {
background: url(../../images/v3/shadow-right.png) repeat-y right top #f1f1f1 !important;
color: var(--color-primary-grey-4);
-webkit-transition: background .15s ease-in;
-moz-transition: background .15s ease-in;
-o-transition: background .15s ease-in;
-ms-transition: background .15s ease-in;
transition: background .15s ease-in;
-webkit-transition: color .15s ease-in;
-moz-transition: color .15s ease-in;
-o-transition: color .15s ease-in;
-ms-transition: color .15s ease-in;
transition: color .15s ease-in;
}
.nav_head_support.activeMenu {
color: black !important;
}
.nav_feedback.activeMenu {
background: url(../../images/v3/shadow-right.png) repeat-y right top #f1f1f1 !important;
color: var(--color-primary-grey-4);
-webkit-transition: background .15s ease-in;
-moz-transition: background .15s ease-in;
-o-transition: background .15s ease-in;
-ms-transition: background .15s ease-in;
transition: background .15s ease-in;
-webkit-transition: color .15s ease-in;
-moz-transition: color .15s ease-in;
-o-transition: color .15s ease-in;
-ms-transition: color .15s ease-in;
transition: color .15s ease-in;
}
.nav_with_submenu.activeMenu {
background: url(../../images/v3/shadow-right.png) repeat-y right top #f1f1f1 !important;
color: var(--color-primary-grey-4);
-webkit-transition: background .15s ease-in;
-moz-transition: background .15s ease-in;
-o-transition: background .15s ease-in;
-ms-transition: background .15s ease-in;
transition: background .15s ease-in;
-webkit-transition: color .15s ease-in;
-moz-transition: color .15s ease-in;
-o-transition: color .15s ease-in;
-ms-transition: color .15s ease-in;
transition: color .15s ease-in;
} */
/* .nav_without_submenu.activeMenu .icon.admin {
background: url(../../images/v3/icons.png) no-repeat 0 -120px;
}
.nav_without_submenu.activeMenu .icon.config {
background: url(../../images/v3/icons.png) no-repeat -40px -120px;
}
.nav_with_submenu.activeMenu .icon.store {
background: url(../../images/v3/icons.png) no-repeat -80px -120px;
}
.nav_with_submenu.activeMenu .icon.operations {
background: url(../../images/v3/icons.png) no-repeat -120px -120px;
}
.nav_with_submenu.activeMenu .icon.advance {
background: url(../../images/v3/icons.png) no-repeat -160px -120px;
}
.nav_with_submenu.activeMenu .icon.feedback {
background: url(../../images/v3/icons.png) no-repeat -280px -120px;
} */
.nav_with_submenu.activeMenu > .sub_menu {
display: block !important;
/*-webkit-transform: rotateY(0deg);*/
/*-moz-transform: rotateY(0deg);*/
/*-ms-transform: rotateY(0deg);*/
/*-o-transform: rotateY(0deg);*/
/*transform: rotateY(0deg);*/
}
.nav_with_submenu.activeMenu > .sub_menu ul {
opacity: 1;
}
.nav ul li .sub_menu > ul li.nav_with_submenu {
/*padding-left: 20px;*/
padding-right: 20px;
}
.nav ul li .sub_menu > ul li.nav_with_submenu > span.sub_arrow_right {
top: 18px;
}
.nav .ad {
width: 130px;
cursor: pointer;
}
.nav .ui_switch {
height: 170px;
background: url(../../images/v3/ad-switch-back.png);
}
/*==================== Content Area ====================*/
.content_area {
float: left;
/*overflow: hidden;*/
padding: 0;
width: 100%;
min-width: 608px;
background-color: var(--color-primary-grey-1);
/* min-height: calc(100vh - 368px); */
}
/*==================== Menu ===========================*/
.advanced {
}
.advancedHide {
display: none !important;
}
.basic {
}
.basicHide {
display: none !important;
}
/*==================== Section Title Bar Area ====================*/
.section_title_bar_container {
float: left;
position: relative;
width: 100%;
}
.section_title_bar {
/*border-bottom: 1px solid var(--color-primary-grey-3);*/
min-height: 59px;
margin: 30px 30px 0 30px;
}
.section_title {
float: left;
position: relative;
overflow: hidden;
color: #303030;
font-size: 24px;
padding: 0;
font-family: var(--font-primary-regular);
margin: 0;
z-index: 10;
max-width: calc(100vw - 90px);
}
.section_title h1,
.content_area .section_title h1 {
font-size: 1.25rem !important;
font-family: var(--font-primary-regular) !important;
color: var(--color-primary-grey-5) !important;
/* background-color: white; */
padding-right: 10px;
}
.content_area.v2 .section_title.section_title h1 {
font-family: var(--font-primary-regular);
font-size: 1.25rem;
}
.content_area.v2 .section_title .section_back {
display: inline-block;
padding: 2px 6px 2px 20px;
background: #57a3cf;
color: var(--color-white);
border-radius: var(--border-radius-small);
cursor: pointer;
font-size: 14px;
position: relative;
margin-bottom: 20px;
}
.content_area.v2 .section_title .section_back::before {
position: absolute;
left: 5px;
top: 6px;
font-size: 10px;
}
/*==================== Breadcrumbs ====================*/
.section_title_v2 .breadcrumbs {
font-family: var(--font-primary-regular);
text-transform: none;
font-size: 11px;
}
.breadcrumbs {
padding: 0;
letter-spacing: .08em;
/* text-transform: uppercase; */
font-family: var(--font-primary-regular);
font-size: 11px;
margin: 0 0 20px;
}
.breadcrumbs .oi {
font-size: 8px;
padding-left: 5px;
color: #ccc;
}
.breadcrumbs a {
color: var(--color-primary-blue);
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs ul {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
.breadcrumbs ul li {
color: var(--color-primary-grey-3);
display: inline;
font-size: 14px;
font-weight: normal;
}
/*==================== Screen Help ====================*/
body.body_fullscreen .screen_help {
top: 30px;
}
.screen_help {
position: absolute;
top: 130px;
right: 30px;
background: var(--color-primary-green);
color: var(--color-white);
font-weight: 600;
font-family: var(--font-primary-regular);
text-transform: none;
padding-right: 12px;
height: 30px;
line-height: 30px;
display: flex;
align-items: center;
letter-spacing: .1em;
font-size: 11px;
border-radius: 20px;
transition: var(--transition-primary)
}
.screen_help:hover {
background: var(--color-primary-green-dark);
}
.screen_help a {
color: var(--color-white);
}
.screen_help .screen_icon {
float: left;
margin: 9px 8px 0 8px;
background: url(../../images/v3/icons.png) no-repeat -40px 0;
background: none;
width: 12px;
height: 12px;
text-align: center;
}
.screen_help .screen_icon::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f1cf";
display: block;
height: 12px;
width: 12px;
font-size: 12px;
color: var(--color-white);
}
.help_icon {
display: block;
height: 12px;
width: 12px;
/* background: url(../../images/v3/icons.png) no-repeat 0 -360px; */
}
.help_icon::before {
font-family: "icons" !important;
content: "\f256";
display: block;
line-height: 1;
width: 1em;
text-align: center;
box-sizing: content-box;
font-size: 12px;
color: var(--color-primary-green);
rotate: 180deg;
}
body.body_fullscreen .onscreen_tour {
top: 30px;
}
/* Overwrite Dashboard css */
.content {
.widget_full {
min-width: auto;
}
}
.dashboard .widget .widget_title .widget_options {
width: auto;
}
.dashboard .widget .widget_title .widget_options .widget_note {
font-size: 9px;
letter-spacing: 0.05em;
background-color: var(--color-primary-grey-4);
padding: 4px 6px;
color: var(--color-primary-grey-1);
border-radius: var(--border-radius-medium);
}
.dashboard.page_options {
right: 300px;
}
.dashboard.page_options .configure_widgets {
display: flex;
align-items: center;
gap: 4px;
width: auto;
padding-right: 12px;
border-radius: 20px;
text-transform: none;
font-size: 11px;
line-height: 30px;
font-weight: 600;
float: none;
background-color: var(--color-primary-grey-5);
transition: var(--transition-all);
}
.dashboard.page_options .configure_widgets:hover {
background-color: var(--color-primary-blue-dark);
}
.dashboard.page_options .configure_widgets .widgets_icon {
display:flex;
align-items:center;
justify-content:center;
float: none;
margin: 0 ;
background: none !important;
width: 30px;
height: 20px;
}
.dashboard table .view_orders,
.dashboard .view_orders,
.dashboard table .quick_jump,
.dashboard .quick_jump,
.dashboard .search_orders,
.dashboard .launch_beoe {
background-color: var(--color-primary-blue);
}
.dashboard table .view_orders:hover,
.dashboard .view_orders:hover,
.dashboard table .quick_jump:hover,
.dashboard .quick_jump:hover,
.dashboard .search_orders:hover,
.dashboard .launch_beoe:hover {
background-color: var(--color-primary-blue-dark);
}
.dashboard .standard .grid-item h4.dashboard-metric-percentage-change-up .dashboard-metric-period-summary-change-arrow {
background-color: var(--color-primary-green-dark);
}
.dashboard .standard .grid-item .dashboard-metric-percentage-change-up,
.dashboard .standard .grid-item .dashboard-metric-percentage-change-up.h4 {
color: var(--color-primary-green-dark);
}
.dashboard .standard .grid-item h4.dashboard-metric-percentage-change-down .dashboard-metric-period-summary-change-arrow {
background-color: var(--color-primary-red);
}
.dashboard .standard .grid-item .dashboard-metric-percentage-change-down,
.dashboard .standard .grid-item .dashboard-metric-percentage-change-down.h4 {
color: var(--color-primary-red);
}
.configure_widgets .widgets_icon::before {
font-family: "icons" !important;
content: "\f191";
display: block;
line-height: 1;
width: 1em;
text-align: center;
box-sizing: content-box;
font-size: 12px;
color: white;
}
#wrap .onscreen_tour {
font-size: 11px;
border-radius: 20px;
font-weight: 600;
right: 199px;
text-transform: none;
display: flex;
align-items: center;
width: auto;
padding-right: 12px;
background-color: var(--color-primary-grey-5);
transition: var(--transition-all);
}
#wrap .onscreen_tour:hover {
background-color: var(--color-primary-blue-dark);
}
#wrap .onscreen_tour .screen_icon {
display:flex;
align-items:center;
justify-content:center;
float: none;
margin: 0 ;
background: none !important;
width: 30px;
height: 20px;
}
#wrap .onscreen_tour .screen_icon::before {
font-family: "icons" !important;
content: "\f1bd";
display: block;
line-height: 1;
width: 1em;
text-align: center;
box-sizing: content-box;
font-size: 12px;
color: white;
}
#cboxContent #configure_dashboard {
background-color: var(--color-primary-grey-1) !important;
}
#cboxContent #configure_dashboard .intro_title,
#cboxContent #configure_dashboard .inactive_widgets .title {
background-color: var(--color-primary-grey-1);
border-bottom: 1px solid var(--color-primary-grey-2);
padding: 16px;
box-sizing: border-box;
}
#cboxContent #configure_dashboard .intro_title h3,
#cboxContent #configure_dashboard .inactive_widgets .title h3 {
font-size: 16px;
font-family: var(--font-primary-regular);
color: var(--color-primary-grey-5);
}
#cboxContent #configure_dashboard .inactive_widgets .title,
#cboxContent #configure_dashboard .inactive_widgets {
background-color: var(--color-primary-grey-2);
}
#cboxContent #configure_dashboard .inactive_widgets {
height: calc(100% - 103px);
box-sizing: border-box;
top: 34px;
}
body.body_fullscreen .dashboard.page_options {
top: 30px;
}
.onscreen_tour {
position: absolute;
top: 130px;
right: 240px;
background: #8dab00;
color: var(--color-white);
font-family: var(--font-primary-regular);
text-transform: uppercase;
width: 160px;
height: 30px;
line-height: 30px;
letter-spacing: .1em;
font-size: 0.8em;
font-size: 0.786rem;
}
.onscreen_tour a {
color: var(--color-white);
}
.onscreen_tour .screen_icon {
float: left;
margin: 5px 10px 5px 5px;
background: url(../../images/v3/icons.png) no-repeat -240px 0;
width: 22px;
height: 20px;
}
/*==================== Notifications ====================*/
.note_intro {
position: relative;
background: #ECECEC;
margin: 10px 0;
min-height: 30px;
border-radius: var(--border-radius-medium);
}
.note_intro .intro_img {
display: table-cell;
vertical-align: top;
width: 250px;
height: 250px;
}
.note_intro .intro_content {
display: table-cell;
vertical-align: top;
padding: 20px;
}
.note_intro .intro_content .intro_text {
width: 50%;
min-width: 300px;
float: left;
}
.note_intro .intro_content .intro_text div {
padding: 0 40px 20px 0;
}
.note_intro .intro_content .intro_text p {
color: var(--color-gray-700);
font-size: 14px;
line-height: 1.8em;
}
.note_intro .intro_content .intro_form {
width: 50%;
min-width: 300px;
float: left;
}
.note_intro .intro_content .intro_form input {
margin: 10px 0 20px 0;
border: 1px solid #bbb;
background: var(--color-gray-200);
color: #777;
letter-spacing: .08em;
padding: 5px;
width: 80%;
}
.note_intro .intro_content .intro_form select {
margin: 10px 0 20px 0;
border: 1px solid #dadada;
background: var(--color-gray-200);
color: #777;
letter-spacing: .08em;
padding: 2px 4px;
width: 80%;
}
.note_intro .intro_content .intro_form .btn {
color: var(--color-white);
background: var(--color-primary-blue);
border: none;
padding: 5px;
text-transform: uppercase;
font-size: .9em;
letter-spacing: 0.08em;
border-radius: var(--border-radius-3);
line-height: 1.5;
}
.dashboard .notifications {
margin: 10px 0 0 0;
}
.notifications p {
margin: 0 0 10px 0;
}
.note_error {
/*display: none;*/
position: relative;
background: url(../../images/v3/alert-overlay.png) repeat-y top left var(--color-primary-red);
padding: 10px 10px 10px 50px;
margin: 0 0 10px;
min-height: 30px;
border-radius: var(--border-radius-medium);
}
.note_error p,
.interior_content .note_error p {
color: var(--color-white);
letter-spacing: .1em;
line-height: 14px;
}
.note_error pre {
color: var(--color-white);
line-height: 14px;
}
.note_error a {
color: #31090b;
}
.note_error h3 {
font-family: var(--font-primary-regular);
letter-spacing: .1em;
color: var(--color-white);
}
.note_error span {
display: flex;
position: absolute;
width: 30px;
height: 30px;
top: 14px;
left: 9px;
}
.note_error span::after {
display: block;
font-family: var(--font-icons) !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f1fa";
color: var(--color-primary-red);
font-size: 12px;
width: 12px;
height: 12px;
pointer-events: none;
position: relative;
cursor: pointer;
transition: color 0.3s ease;
}
.note_error a {
color: #31090b;
}
.note_alert {
/*display: none;*/
position: relative;
background-color: var(--color-alt-yellow-1);
color: var(--color-primary-grey-5);
padding: 10px 10px 10px 50px;
margin: 0 0 10px;
min-height: 30px;
border-radius: var(--border-radius-medium);
overflow: hidden;
&::after {
content: "";
display: block;
position: absolute;
width: 40px;
height: 100%;
top: 0;
left: 0;
background-image: url('data:image/svg+xml,');
background-color: rgba(0, 0, 0, 0.1);
background-repeat: no-repeat;
background-position: center 6px;
z-index: 1;
}
}
.note_alert p,
.interior_content .note_alert p {
color: var(--color-primary-grey-5);
letter-spacing: .1em;
line-height: 14px;
}
.note_alert a,
#uc-item-editor .notifications .note_alert a {
color: var(--color-primary-grey-5);
}
.note_alert h3 {
font-family: var(--font-primary-regular);
letter-spacing: .1em;
color: var(--color-primary-grey-5);
margin-bottom: 5px !important;
}
#uc-item-editor div[class*="note_"].note_alert > span:first-child::before {
content: "" !important;
}
.note_alert span {
display: none;
position: absolute;
width: 30px;
height: 30px;
top: 0;
left: 0;
background: url(../../images/v3/icons.png) no-repeat -1240px -200px;
}
.note_confirm {
/*display: none;*/
position: relative;
background: url(../../images/v3/alert-overlay.png) repeat-y top left #e3eb5e;
padding: 10px 10px 10px 50px;
margin: 0 0 10px;
min-height: 30px;
}
.note_confirm p {
color: #323232;
letter-spacing: .1em;
line-height: 14px;
}
.note_confirm h3 {
font-family: var(--font-primary-regular);
letter-spacing: .1em;
color: #323232;
}
.note_confirm span {
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0;
left: 0;
background: url(../../images/v3/icons.png) no-repeat -1280px -200px;
}
.note_info {
/*display: none;*/
position: relative;
background: url(../../images/v3/alert-overlay.png) repeat-y top left #c9e9f6;
padding: 10px 10px 10px 50px;
margin: 0 0 10px;
min-height: 30px;
}
.note_info p {
color: #323232;
letter-spacing: .1em;
line-height: 14px;
}
.note_info a {
color: #60889f;
}
.note_info h3 {
font-family: var(--font-primary-regular);
letter-spacing: .1em;
color: #323232;
}
.note_info span {
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 0;
left: 0;
background: url(../../images/v3/icons.png) no-repeat -1320px -200px;
}
/*==================== Page Title Bar Area ====================*/
.page_title_bar_container {
float: left;
position: relative;
width: 100%;
}
.page_title_bar {
height: 50px;
margin: -40px 30px 0 30px;
}
.page_title {
position: relative;
width: 500px;
float: left;
overflow: hidden;
padding: 20px 0 0 0;
margin: 0;
font-family: var(--font-primary-regular);
color: var(--color-gray-750);
font-size: 15px;
height: 30px;
display: none;
}
.page_title.sub_nav {
padding: 20px 0 0 70px;
}
.page_title .add_kit,
.page_title .add_item {
display: block;
position: absolute;
width: 80px;
line-height: 25px;
background: var(--color-primary-blue);
color: var(--color-white);
text-align: right;
margin-top: -5px;
text-transform: uppercase;
text-align: center;
font-family: 'latoregular', arial;
font-size: 12px;
letter-spacing: 0.1em;
border-radius: var(--border-radius-3);
}
.page_title .add_kit {
top: 21px;
left: 250px;
}
.page_title .add_item {
top: 21px;
left: 160px;
}
.page_title_bar .quick_jump {
position: absolute;
top: -30px;
right: 30px;
width: 200px;
z-index: 10;
}
.quick_jump .search_area {
width: 200px;
height: 30px;
float: right;
}
.quick_jump .search_area input {
/*-moz-border-radius: 2px 0 0 2px !important;
-webkit-border-radius: 2px 0 0 2px !important;
border-radius: 2px 0 0 2px !important;*/
}
.quickjump_btn {
background: url(../../images/v3/icons.png) no-repeat var(--color-primary-blue);
background-position: -349px -513px;
width: 40px;
height: 30px;
border: 0;
cursor: pointer;
float: left;
}
.page_options {
width: 250px;
padding-left: 20px;
height: 30px;
position: relative;
float: right;
margin-top: 20px;
line-height: 30px;
letter-spacing: .1em;
font-family: var(--font-primary-regular);
}
#wrap .dashboard.page_options {
display: flex;
align-items: center;
padding-left: 0;
padding-top: 0;
width: auto;
margin: 0;
float: none;
height: 30px;
position: absolute;
top: 130px;
right: 335px;
letter-spacing: .1em;
font-family: var(--font-primary-regular);
}
.page_options .view_options {
background: var(--color-gray-200);
position: relative;
float: right;
width: 198px;
height: 29px;
padding: 0;
border-top: 1px solid var(--color-primary-grey-3);
border-right: 1px solid var(--color-primary-grey-3);
border-left: 1px solid var(--color-primary-grey-3);
}
.page_options .option_btn {
float: right;
width: 99px;
height: 30px;
line-height: 28px;
font-family: var(--font-primary-regular);
font-size: 0.8em;
font-size: 0.786rem;
letter-spacing: .2em;
text-align: center;
color: var(--color-primary-blue);
cursor: pointer;
}
#viewAdvancedId {
width: 98px;
border-left: 1px solid var(--color-primary-grey-3);
}
.page_options .active {
background: var(--color-white) !important;
width: 99px;
height: 30px;
color: var(--color-primary-grey-4) !important;
}
.page_options .help_icon {
position: absolute;
top: 10px;
left: 0;
}
.page_options .view_options .up_arrow_white {
position: absolute;
bottom: 0;
}
.up_arrow_white {
display: none;
width: 10px;
height: 7px;
background: url(../../images/v3/icons.png) no-repeat -81px -213px;
}
.wrapper-dropdown-1 {
/* Size and position */
position: relative;
/* Enable absolute positioning for children and pseudo elements */
width: 228px;
/*padding: 10px;*/
/*margin: 0 auto;*/
padding-left: 10px;
z-index: 999;
/* Styles */
background: none;
color: var(--color-primary-blue);
outline: none;
cursor: pointer;
/* Font settings */
/*font-weight: bold;*/
font-size: .9em;
letter-spacing: 0;
}
.wrapper-dropdown-1:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent var(--color-primary-blue);
}
.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
/* Size */
right: 0;
/* Size */
/* Styles */
background: var(--color-white);
font-weight: normal;
/* Overwrites previous font-weight: bold; */
padding: 0;
margin: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-1 .dropdown li a {
border-bottom: 1px solid #bbb;
}
.wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}
/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
background: #f3f8f8;
}
/* Active state */
.wrapper-dropdown-1.active .dropdown {
opacity: 1;
pointer-events: auto;
}
.wrapper-dropdown-1.active:after {
border-color: var(--color-gray-600) transparent;
border-width: 6px 6px 0 6px;
margin-top: -3px;
}
.wrapper-dropdown-1.active {
background: var(--color-white);
background: linear-gradient(to right, #fff 0%, #fff 83%, #f1f1f1 83%, #f1f1f1 100%);
}
/*==================== General Elements ====================*/
h1 {
color: var(--color-primary-grey-5);
font-size: 1.01em;
padding: 0;
font-family: var(--font-primary-regular);
margin: 0;
font-weight: normal;
}
h2 {
color: var(--color-gray-750);
font-size: 1em;
line-height: normal;
padding: 0;
font-family: var(--font-primary-regular);
margin: 0;
font-weight: normal;
}
h3 {
font-family: var(--font-primary-regular);
font-size: 1.17em;
margin: 0;
font-weight: normal;
}
h4 {
font-family: var(--font-primary-regular);
font-size: 1em;
font-weight: normal;
}
/*==================== Interior Page Elements ====================*/
.interior {
margin: 0 30px 30px;
border-top: 1px solid var(--color-primary-grey-3);
border-bottom: 1px solid var(--color-primary-grey-3);
}
body[data-main-form-action="/merchant/orderprocessing/sd/shippingDepartmentListSave.do"] {
.interior {
border-top: 0;
border-bottom: 0;
}
}
.interior_full {
clear: both;
}
.interior_title {
background: var(--color-white);
height: 60px;
clear: both;
position: relative;
border-bottom: 1px solid var(--color-primary-grey-3);
border-top: 1px solid var(--color-primary-grey-3);
}
.interior_title h3 {
line-height: 60px;
font-family: var(--font-primary-regular);
font-weight: 400;
letter-spacing: .1em;
font-size: 15px;
margin: 0;
padding-left: 30px;
}
.interior_title .dash_icon {
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 20px;
left: 20px;
}
.interior_container {
display: block;
position: relative;
min-height: calc(100vh - 368px);
}
.left_nav li a:focus {
outline: none;
}
.interior_container .left_nav_sub_container {
position: absolute;
top: 0;
left: 2px;
width: 239px;
height: 100%;
overflow: hidden;
}
.interior_container .left_nav_sub_parent_icons {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
z-index: 100;
}
.interior_container .left_nav_sub_container.activeMenu {
display: none;
}
.interior_container .left_nav_sub {
position: absolute;
top: 0;
left: 50px;
width: 189px;
height: 100%;
background: url(../../images/v3/light-grey.gif) right repeat-y #d9d9d9;
border-left: 1px solid #BBB;
overflow: hidden;
z-index: 100;
-webkit-transition: all .125s ease-in-out;
-moz-transition: all .125s ease-in-out;
-o-transition: all .125s ease-in-out;
-ms-transition: all .125s ease-in-out;
transition: all .125s ease-in-out;
}
.interior_container .left_nav_sub_parent_icons.activeMenu {
-webkit-transition: var(--transition-slow);
-moz-transition: var(--transition-slow);
-o-transition: var(--transition-slow);
-ms-transition: var(--transition-slow);
transition: var(--transition-slow);
width: 239px !important;
}
.interior_container .left_nav_sub.activeMenu {
-webkit-transition: var(--transition-slow);
-moz-transition: var(--transition-slow);
-o-transition: var(--transition-slow);
-ms-transition: var(--transition-slow);
transition: var(--transition-slow);
left: 239px !important;
}
.interior_container .left_nav .left_nav_click_area {
}
.interior_container .left_nav .left_nav_sub ul li {
display: table;
position: relative;
width: 187px;
min-height: 60px;
height: 60px;
margin: 0;
background: var(--color-gray-950);
border-left: none;
border-bottom: 1px solid #BBB;
border-right: 1px solid #bbb;
color: var(--color-primary-blue);
font-family: var(--font-primary-regular);
font-size: 14px;
}
.interior_container .left_nav .left_nav_sub ul li.active {
background: var(--color-white);
border-right: 1px solid #fff;
}
.interior_container .left_nav {
display: table-cell;
table-layout: fixed;
position: relative;
vertical-align: top;
width: 240px;
background: url(../../images/v3/light-grey.gif) right repeat-y var(--color-primary-grey-2);
overflow: hidden;
}
.interior_container .left_nav ul {
display: table-cell;
padding: 0;
background: url(../../images/v3/light-grey.gif) right repeat-y var(--color-primary-grey-2);
}
.interior_container .left_nav ul li {
display: block;
position: relative;
width: 239px;
min-height: 40px;
margin: 0;
background: var(--color-primary-grey-2);
border-bottom: 1px solid var(--color-primary-grey-3);
color: var(--color-primary-blue);
font-family: var(--font-primary-regular);
font-size: 14px;
/* overflow-x: hidden; */
border-right: 1px solid var(--color-primary-grey-3);
cursor: pointer;
border-left: 1px solid var(--color-primary-grey-3);
-webkit-transition: var(--transition-slow);
-moz-transition: var(--transition-slow);
-o-transition: var(--transition-slow);
-ms-transition: var(--transition-slow);
transition: var(--transition-slow);
}
.storefront.pageItemsRow {
min-width: 680px;
}
.storefront .interior_container .left_nav ul li {
min-height: 40px;
box-sizing: content-box;
}
.storefront .website_preview {
width: 1400px;
height: 1040px;
-webkit-transform: scale(0.285);
transform: scale(0.285);
pointer-events: none;
border: none;
left: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin-top: 20px;
}
.storefront .website_preview_container .website_preview_url {
position: absolute;
top: 4px;
width: calc(100% - 34px);
display: block;
background-color: white;
left: 30px;
border: none;
font-size: 8px;
padding-left: 5px;
box-sizing: border-box;
border-radius: var(--border-radius-3);
}
.storefront .website_preview_container .website_preview_url::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f14d";
display: block;
color: rgb(140, 140, 140);
pointer-events: none;
width: 6px;
height: 6px;
font-size: 6px;
position: absolute;
top: 2px;
left: -24px;
}
.storefront .website_preview_container .website_preview_url::after {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f14e";
display: block;
color: rgb(140, 140, 140);
pointer-events: none;
width: 6px;
height: 6px;
font-size: 6px;
position: absolute;
top: 2px;
left: -16px;
}
.storefront .website_preview_container {
overflow: hidden;
}
.storefront .website_preview_container .website_preview_url a {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
width: 100%;
display: block;
}
.storefront .website_preview_container {
height: 330px;
width: 400px;
position: relative;
box-sizing: border-box;
background-color: var(--color-primary-grey-3);
padding-top: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid var(--color-primary-grey-3);
padding-bottom: 10px;
box-shadow: 0 0 30px var(--overlay-black-dark);
}
.storefront .website_preview_overlay {
display: block;
width: 100%;
height: 100%;
background-color: var(--overlay-black-darkest);
box-sizing: border-box;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
position: absolute;
left: 0;
top: 0;
padding-top: 161px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.storefront .website_preview_overlay:hover {
opacity: 1;
}
.storefront .website_preview_overlay .website_preview_overlay_text {
color: white;
font-size: 16px;
line-height: 18px;
}
.template_theme_upgrade_check_wrapper .change_log_read_only .change_log_version_change_description {
width: 550px;
}
.storefront .change_log_read_only .new_change_log,
.storefront .change_log_read_only .change_log_version_change_delete {
display: none;
}
.storefront .change_log_version ul {
list-style: none;
padding-left: 0;
display: none;
}
.storefront .change_log_version.open .change_log_version_header:before {
display: block;
float: left;
content: "[-]";
margin-right: 10px;
}
.storefront .change_log_version .change_log_version_header:before {
display: block;
float: left;
content: "[+]";
margin-right: 10px;
}
.storefront.template_theme_upgrade_check_wrapper .change_log_version.open .change_log_version_header:before {
content: "";
margin-right: 0;
}
.storefront.template_theme_upgrade_check_wrapper .change_log_version .change_log_version_header:before {
content: "";
margin-right: 0;
}
.storefront.template_theme_upgrade_check_wrapper .list_150:has(input[value="Duplicate and Upgrade"]),
.storefront.template_theme_upgrade_check_wrapper .list_100:has(.themeUpgradeCancelBtn) {
width: auto;
margin-bottom: 0;
margin-right: 8px;
}
.storefront .change_log_version.open ul {
display: block;
}
.storefront .change_log_version ul li {
margin-bottom: 0;
}
.storefront .change_log_version_header {
margin-bottom: 10px;
}
.storefront .change_log_version .list_300,
.storefront .change_log_version .list_100 {
margin-bottom: 10px;
}
.storefront .change_log_version_change_category {
background-color: #f3f3f3;
border-right: 3px solid #ccc;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
color: var(--color-gray-900);
display: inline-block;
font-size: 11px;
font-size: .6875rem;
font-style: normal;
line-height: 14px;
padding: 4px 2px 4px 33px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
text-transform: uppercase;
position: relative;
}
.storefront .change_log_version_change_category::before {
content: "";
display: block;
position: absolute;
text-shadow: none;
left: 5px;
font-size: 12px;
font-family: 'ultracarticons';
}
.storefront .change_log_version_change_category_new {
background-color: #ffedcf;
border-color: #f90;
}
.storefront .change_log_version_change_category_new:before {
content: "\e043";
color: #f90;
}
.storefront .change_log_version_change_category_changed {
background-color: #e9cfff;
border-color: #8106e0;
}
.storefront .change_log_version_change_category_changed:before {
content: "\e03f";
color: #8106e0;
}
.storefront .change_log_version_change_category_important {
background-color: #f8dfd8;
border-color: #d85027;
}
.storefront .change_log_version_change_category_important:before {
content: "\e042";
color: #d85027;
}
.storefront .change_log_version_change_category_developer {
background-color: #d8d8d8;
border-color: var(--color-primary-grey-4);
}
.storefront .change_log_version_change_category_developer:before {
content: "\e040";
color: var(--color-primary-grey-4);
}
.storefront .change_log_version_change_category_fixed {
background-color: #f0ffe1;
border-color: #5ba622;
}
.storefront .change_log_version_change_category_fixed:before {
content: "\e041";
color: #5ba622;
}
.storefront .change_log_version_change_category_browser {
background-color: #9bc7e3;
border-color: #3d6c87;
}
.storefront .change_log_version_change_category_browser:before {
content: "\e03e";
color: #3d6c87;
}
.storefront .change_log_version_change_category_responsive {
background-color: #f3f3f3;
border-color: #c4c3c3;
}
.storefront .change_log_version_change_category_responsive:before {
content: "\e044";
color: #c4c3c3;
}
.storefront .urlDisplay {
/*width: 600px;*/
width: 400px;
float: left;
margin-right: 20px;
margin-bottom: 10px;
font-size: 14px;
background: var(--color-gray-150);
border: 1px solid var(--color-primary-grey-3);
height: 30px;
padding: 4px 6px;
box-sizing: border-box;
border-radius: var(--border-radius-small);
}
.storefront .urlDisplay span {
color: var(--color-primary-grey-3);
}
.storefront .urlDisplay span.status {
background: #999;
display: block;
width: 10px;
height: 10px;
border-radius: var(--border-radius-small);
margin-top: 5px;
margin-right: 3px;
float: right;
}
.storefront .urlDisplay span.status.correctDns {
background: #99CC33;
}
.storefront .urlDisplay span.status.warningDns {
background: orange;
}
.storefront .urlDisplay span.status.incorrectDns {
background: #990000;
}
.interior_container .left_nav ul li.collapse {
width: 50px;
height: 60px;
overflow-y: hidden;
-webkit-transition: var(--transition-slow);
-moz-transition: var(--transition-slow);
-o-transition: var(--transition-slow);
-ms-transition: var(--transition-slow);
transition: var(--transition-slow);
}
.interior_container .left_nav ul .parent_nav {
display: table;
position: relative;
width: 239px;
margin: 0;
border-bottom: 1px solid var(--color-primary-grey-3);
color: var(--color-white);
background: #6a6a6a;
font-family: var(--font-primary-regular);
font-size: 14px;
}
.interior_container .left_nav ul .parent_nav a {
color: var(--color-white);
display: table-cell;
vertical-align: middle;
padding: 20px 0 20px 50px;
}
.interior_container .left_nav ul a {
display: table-cell;
vertical-align: middle;
padding-left: 20px;
}
.interior_container .left_nav .left_nav_sub ul a {
padding: 20px 40px 20px 20px;
}
.left_nav ul .sales {
line-height: 40px !important;
}
.left_nav ul li .help_icon {
display: block;
height: 10px;
width: 10px;
position: absolute;
top: 25px;
right: 20px;
background: url(../../images/v3/icons.png) no-repeat 0 -360px;
}
.interior_container .left_nav ul .has_icon {
}
.interior_container .left_nav ul .sub {
width: 230px;
border-left: 10px solid #fff;
border-bottom: none;
background: #f3f3f3;
height: auto !important;
min-height: initial !important;
}
.interior_container .left_nav ul .post_sub {
border-top: 1px solid #bbb;
}
.interior_container .left_nav ul .sub_divider {
height: 1px;
min-height: 1px !important;
border-top: none;
background-color: var(--color-primary-grey-3);
border-bottom: none;
}
.interior_container .left_nav ul .parent {
background: #eaeaea;
}
.interior_container .left_nav ul .active {
color: var(--color-primary-grey-4);
background: var(--color-white);
border-right: 1px solid #FFF;
}
.interior_container .left_nav ul .has_icon .active a {
color: var(--color-primary-grey-4);
display: table-cell;
vertical-align: middle;
padding: 0 0 0 50px;
}
.left_nav ul li .summary {
display: block;
position: absolute;
top: 20px;
left: 20px;
color: var(--color-primary-grey-4);
font-size: 11px;
letter-spacing: .1em;
}
.interior_container .left_nav ul .has_icon a {
display: table-cell;
vertical-align: middle;
padding: 10px 20px 10px 40px;
}
.storefront .interior_container .left_nav ul .has_icon a {
padding: 10px 20px 10px 40px;
}
.nav-2020 #tabUpsellsId,
.nav-2020 #tabBlogId,
.storeFrontNav #tabCommunicationId,
.storeFrontNav .communication_folder,
.storefront #tabLocationsId {
display: none;
}
.nav-2020 .storeFrontNav.content_folder_open #tabBlogId,
.nav-2020 .storeFrontNav.content_folder_open #tabLocationsId {
display: block;
}
.storeFrontNav.supports_communication #tabCommunicationId,
.storeFrontNav.supports_communication .communication_folder,
.storeFrontNav.content_folder_open.supports_upsells #tabUpsellsId,
.nav-2020.supports_blog #tabBlogId,
.nav-2020.supports_paypal_contextual_messaging #tabAdvertisingId,
.nav-2020.supports_store_locator #tabLocationsId {
display: block;
}
.storeFrontNav.supports_communication #tabEmailsId {
display: none;
}
.nav-2020 .storeFrontNav.screen_recordings_folder_open .screen_recordings_folder,
.nav-2020 .storeFrontNav.content_folder_open .content_folder,
.nav-2020 .storeFrontNav.appearance_folder_open .appearance_folder {
display: block;
}
.nav-2020 .storeFrontNav .screen_recordings_folder,
.nav-2020 .storeFrontNav .content_folder,
.nav-2020 .storeFrontNav .appearance_folder {
display: none;
}
.uc-selectize-option .itemId {
}
.uc-selectize-option .description {
font-size: 9px;
padding: 0 0 5px 0;
display: block;
clear: both;
color: var(--color-gray-700);
border-bottom: 1px solid #bbb;
}
.interior_container .left_nav ul a {
display: table-cell;
vertical-align: middle;
padding: 10px 20px;
}
.interior_container .nav_interior_content {
display: table-cell;
vertical-align: top;
width: 100%;
}
.interior_content {
padding: 30px 0 30px 30px;
&#contentCardinalCommerceId {
padding: 30px 0 30px 0;
}
}
.interior_content.table {
padding: 0 0 30px 30px;
}
.interior_content.table .no_items {
width: 100%;
height: 320px;
background: var(--color-gray-200);
margin-top: 20px;
padding-top: 10px;
}
.interior_content.table .no_items p {
text-align: center;
width: 420px;
display: block;
margin: 30px auto;
}
.interior_content.table .no_items .options {
clear: both;
margin: 0 auto;
padding: 10px 10px 10px 0;
top: 16px;
right: 0;
width: 270px;
height: 125px;
background: var(--color-primary-blue);
}
.no_items .options .add_item_btn,
.no_items .options .add_kit_btn {
display: block;
width: 125px;
height: 125px;
background: var(--color-white);
float: right;
margin-left: 10px;
text-align: center;
text-transform: uppercase;
font-family: latobold, Helvetica;
letter-spacing: .08em;
position: relative;
opacity: 1;
}
.interior_content p {
font-size: 0.8em;
font-size: 0.786rem;
line-height: 21px;
color: var(--color-primary-grey-5);
letter-spacing: .1em;
margin-top: 0;
}
.interior_content ul {
font-size: 0.8em;
font-size: 0.786rem;
}
.interior_content code[class*=language-],
.interior_content pre[class*=language-] {
text-shadow: none;
}
.interior_content .language-css .token.string,
.interior_content .style .token.string,
.interior_content .token.entity,
.interior_content .token.operator,
.interior_content .token.url {
background: transparent;
}
.interior_content p.sub {
font-size: .9em;
line-height: 1.5em;
color: var(--color-primary-grey-4);
}
.interior_content .intro {
border-bottom: 1px solid var(--color-primary-grey-3);
padding-bottom: 20px;
margin-top: 0;
}
.interior_content .list_half {
display: block;
float: left;
padding: 0;
width: 40%;
min-width: 300px;
overflow: inherit;
}
.interior_content .list_review {
display: block;
float: left;
padding: 0;
overflow: inherit;
margin: 0 10px 0 0;
}
.interior_content .list_review li {
display: block;
list-style: none;
clear: both;
margin-bottom: 0;
}
#filterForm .list_review input {
box-sizing: border-box;
width: 100%;
}
#filterForm .list_review select {
border: 1px solid var(--color-primary-grey-3);
background: var(--color-white);
border-radius: var(--border-radius-small);
font-size: 1em;
height: 24px;
padding: 2px 4px;
width: 147px;
}
.interior_content .two_column {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.interior_content .three_column {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
@media only screen and (max-width: 825px) {
.interior_content .two_column {
-moz-column-count: 1 !important;
-webkit-column-count: 1 !important;
column-count: 1 !important;
}
.interior_content .three_column {
-moz-column-count: 1 !important;
-webkit-column-count: 1 !important;
column-count: 1 !important;
}
}
.interior_content .list_half li {
display: block;
list-style: none;
line-height: 30px;
font-size: 14px;
padding-left: 20px;
margin-bottom: 10px;
clear: both;
}
.interior_content .list_half li a {
color: var(--color-primary-blue);
}
.interior_content .list_half li .help_icon {
position: absolute;
top: 10px;
left: 0;
}
.interior_content ul li {
font-size: 1em;
margin-bottom: 15px;
}
.left_nav ul .active a {
color: var(--color-gray-700);
}
/*==================== New Menu Icons ====================*/
.left_nav ul li span[class*="config_icon"],
.left_nav ul .active span[class*="config_icon"] {
display: block;
height: 16px;
width: 16px;
background: none;
}
.left_nav ul li span[class*="affiliate_icon"]::before,
.left_nav ul li span[class*="config_icon"]::before,
.left_nav ul li span[class*="review_icon"]::before,
.left_nav ul li span[class*="marketing_icon"]::before {
font-family: "icons" !important;
font-weight: normal !important;
speak: none;
line-height: 1;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
content: "\f160";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: var(--color-primary-blue);
position: absolute;
top: 2px;
right: 4px;
pointer-events: none;
}
.left_nav ul .active span[class*="config_icon"]::before {
color: rgb(183, 183, 183);
}
/* General Cog icon */
.left_nav ul li span.config_icon_general::before,
.left_nav ul li span.config_icon_office::before {
content: "\f160";
}
/* Accounts / Users - People icon */
.left_nav ul li span.config_icon_users::before,
.left_nav ul li span.affiliate_icon_affiliates::before {
content: "\f1c3";
}
/* Accounting - Clipboard */
.left_nav ul li span.affiliate_icon_reports::before,
.left_nav ul li span.config_icon_accounting::before {
content: "\f159";
}
/* Call Centers - Headphones */
.left_nav ul li span.config_icon_call_centers::before {
content: "\f195";
}
/* Channel Partners - Puzzle Piece */
.left_nav ul li:nth-child(2) span[class*="marketing_icon"]::before,
.left_nav ul li span.config_icon_channel_partners::before {
content: "\f1ce";
}
/* Checkout - Cart */
.left_nav ul li span.config_icon_checkout::before {
content: "\f150";
}
/* Development - Code */
.left_nav ul li span.config_icon_development::before {
content: "\f15f";
}
/* Order Management - Layers */
.left_nav ul li span.config_icon_orders::before {
content: "\f1a2";
}
/* Email Notifications - Envelope */
.left_nav ul li span.config_icon_email::before,
.left_nav ul li span.marketing_icon_none::before {
content: "\f17b";
}
/* External Integrations - Puzzle Piece */
.left_nav ul li span.config_icon_integrations::before {
content: "\f1ce";
}
/* Items - Box */
.left_nav ul li span.config_icon_items::before {
content: "\f142";
}
/* Review Templates - Layers */
.left_nav ul li span.review_icon_template_list::before {
content: "\f1a2";
}
/* Unapproved Reviews - Alert Circle */
.left_nav ul li span.review_icon_unapproved::before {
content: "\f256";
}
/* Comissions - Dollar */
.left_nav ul li span.affiliate_icon_commissions::before {
content: "\f172";
}
/* Overview - Eye */
.left_nav ul li span.affiliate_icon_overview::before {
content: "\f184";
}
/* Email Templates - Envelope */
.left_nav ul li span.affiliate_icon_email_templates::before {
content: "\f17b";
}
/* Links - Link */
.left_nav ul li span.affiliate_icon_affiliate_links::before,
.left_nav ul li span.affiliate_icon_merchant_links::before {
content: "\f1a5";
}
.left_nav ul li span.config_icon_general {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
/* background: url(../../images/v3/icons.png) no-repeat 0 -400px; */
}
.left_nav ul .active .config_icon_general {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
/* background: url(../../images/v3/icons.png) no-repeat 0 -440px; */
}
.left_nav ul li .config_icon_checkout {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -40px -400px;
}
.left_nav ul .active .config_icon_checkout {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -40px -440px;
}
.left_nav ul li .config_icon_look {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -80px -400px;
}
.left_nav ul .active .config_icon_look {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -80px -440px;
}
.left_nav ul li .config_icon_office {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -120px -400px;
}
.left_nav ul .active .config_icon_office {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -120px -440px;
}
.left_nav ul li .config_icon_email {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -160px -400px;
}
.left_nav ul .active .config_icon_email {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -160px -440px;
}
.left_nav ul li .config_icon_integrations {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -200px -400px;
}
.left_nav ul .active .config_icon_integrations {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -200px -440px;
}
.left_nav ul li .config_icon_call_centers {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -320px -400px;
}
.left_nav ul .active .config_icon_call_centers {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -320px -440px;
}
.left_nav ul li .config_icon_channel_partners {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -360px -400px;
}
.left_nav ul .active .config_icon_channel_partners {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -360px -440px;
}
.left_nav ul li .config_icon_social_marketing {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -400px -400px;
}
.left_nav ul .active .config_icon_social_marketing {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -400px -440px;
}
.left_nav ul li .config_icon_items {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -160px -320px;
}
.left_nav ul .active .config_icon_items {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -160px -360px;
}
/*==================== Item Tools ====================*/
#item-tools-modal {
header {
padding: 32px 32px 0 32px;
border-bottom: none;
h2.header-text {
font-size: 1.25em;
font-weight: 700;
color: var(--color-primary-grey-4);
}
}
.close-button {
top: 32px;
right: 32px;
z-index: 100;
}
section.item-tools-wrapper {
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
.tools-row {
display: flex;
gap: 16px;
margin: 0;
&::after {
display: none;
}
.item-tool {
margin: 0;
float: none;
border-radius: var(--border-radius-medium);
overflow: hidden;
border: 1px solid var(--color-primary-grey-3);
width: 100%;
.card-icon-background {
background-color: transparent;
}
}
}
}
}
/*==================== Items ====================*/
/* form[action="/merchant/item/itemListSave.do"] {
background-color: var(--color-primary-grey-1);
} */
.left_nav ul li .item_icon_configuration {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -240px -400px;
}
.left_nav ul .active .item_icon_configuration {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -240px -440px;
}
.left_nav ul li a .item_icon_tools {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -280px -400px;
}
.left_nav ul .active .item_icon_tools {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -280px -440px;
}
.item_title_bar_container {
float: left;
position: relative;
width: 100%;
border-bottom: 1px solid var(--color-primary-grey-3);
min-width: 660px;
}
.item_title_bar_container h3 {
color: var(--color-primary-grey-4);
}
.folder_header {
position: relative;
/*width: 260px;*/
float: left;
overflow: hidden;
padding: 0;
/*margin: 0 10px;*/
padding-left: 10px;
line-height: 40px;
}
.folder_header h3 {
display: inline;
}
.item_header {
position: relative;
width: 260px;
float: left;
overflow: hidden;
padding: 0;
margin: 0 20px;
line-height: 40px;
}
.item_header h3 {
display: inline;
}
.all_item_options {
position: absolute;
width: 256px;
height: 20px;
right: 0;
top: 12px;
}
.all_item_options .add {
display: block;
position: relative;
float: right;
width: 40px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat 0 -582px;
margin-right: 8px;
z-index: 999;
}
.old_ie .all_item_options .add .options {
display: none;
}
.all_item_options .add .options {
position: absolute;
padding: 10px 10px 10px 0;
top: 16px;
right: 0;
width: 405px;
height: 125px;
background: var(--color-primary-blue);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transition: -moz-transform .15s linear;
-ms-transition: -ms-transform .15s linear;
-o-transition: -o-transform .15s linear;
transition: transform .15s linear;
}
.all_item_options .add.active .options {
display: block;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.all_item_options .add.active .add_item_btn,
.all_item_options .add.active .add_kit_btn,
.all_item_options .add.active .add_folder_btn {
opacity: 1;
}
.options .add_item_btn,
.options .add_kit_btn,
.options .add_folder_btn {
display: block;
width: 125px;
height: 125px;
background: var(--color-white);
float: right;
margin-left: 10px;
text-align: center;
font-family: latobold, Helvetica;
font-weight: normal;
letter-spacing: .08em;
font-size: 0.8em;
font-size: 0.786rem;
position: relative;
opacity: 0;
-webkit-transition: opacity .15s ease-out;
-moz-transition: opacity .15s ease-out;
-o-transition: opacity .15s ease-out;
-ms-transition: opacity .15s ease-out;
transition: opacity .15s ease-out;
}
.options .add_item_btn .icon,
.options .add_kit_btn .icon,
.options .add_folder_btn .icon {
display: block;
width: 32px;
height: 32px;
margin: 35px auto 20px auto;
}
.options .add_item_btn .icon {
background: url(../../images/v3/icons.png) no-repeat -360px -480px;
}
.options .add_item_btn input {
display: block;
width: 125px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: none;
border: none;
}
.options .add_kit_btn input {
display: block;
width: 125px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: none;
border: none;
}
.options .add_folder_btn input {
display: block;
width: 125px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: none;
border: none;
}
.options .add_kit_btn .icon {
background: url(../../images/v3/icons.png) no-repeat -400px -480px;
}
.options .add_folder_btn .icon {
background: url(../../images/v3/icons.png) no-repeat -440px -480px;
}
.all_item_options .import {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -160px -520px;
margin-right: 8px;
border: none;
}
.all_item_options .export {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -120px -520px;
margin-right: 8px;
border: none;
}
.all_item_options .store_wide {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -40px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .barcode {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -80px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .convert {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -80px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .move {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -120px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .copy {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -160px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .search {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -200px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .tools {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -240px -560px;
margin-right: 8px;
border: none;
}
.all_item_options .delete {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -160px -480px;
margin-right: 0;
border: none;
}
#itemTable {
width: 100%;
}
#itemTable thead tr {
padding: 0;
}
#itemTable thead .title th {
text-align: left;
height: 15px;
padding: 0 10px 10px 10px;
border-bottom: 1px solid var(--color-primary-grey-3);
}
#itemTable thead .title .checkbox {
width: 5px;
}
#itemTable thead .title .item_id {
width: 125px;
}
#itemTable thead .title .cost {
width: 75px;
}
#itemTable thead .title .description {
}
#itemTable thead .title .actions {
width: 85px;
text-align: center;
}
/* #itemTable thead .title .ts_header span {
display: block;
width: 8px;
height: 8px;
float: right;
background: url(../../images/v3/icons.png) no-repeat -24px -218px;
margin-top: 5px;
}
#itemTable thead .title .ts_header.headerSortDown span {
display: block;
width: 8px;
height: 8px;
float: right;
background: url(../../images/v3/icons.png) no-repeat -11px -218px;
margin-top: 5px;
}
#itemTable thead .title .ts_header.headerSortUp span {
display: block;
width: 8px;
height: 8px;
float: right;
background: url(../../images/v3/icons.png) no-repeat 0 -218px;
margin-top: 5px;
} */
#itemTable tbody tr {
border-bottom: 1px solid var(--color-primary-grey-3);
transition: var(--transition-all);
}
#itemTable tbody tr:hover {
box-shadow: 0 0 16px rgba(0,0,0,0.25);
z-index: 10;
border-radius: var(--border-radius-medium);
}
#itemTable tbody .checkbox {
padding: 10px;
vertical-align: top;
border-right: 1px solid var(--color-primary-grey-3);
}
#itemTable tbody .item_id {
padding: 10px;
vertical-align: top;
border-right: 1px solid var(--color-primary-grey-3);
white-space: nowrap;
}
#itemTable tbody .item_id a {
display: block;
margin-right: 36px;
}
#itemTable .item_id .item {
display: block;
float: right;
margin: 0 5px 0 0;
width: 16px;
height: 16px;
background: url(../../images/v3/icons.png) no-repeat -280px -480px;
}
#itemTable .item_id .kit {
display: block;
float: right;
margin: 0 5px 0 0;
width: 16px;
height: 16px;
background: url(../../images/v3/icons.png) no-repeat -320px -480px;
}
.kit .hide-if-kit {
display: none;
}
#itemTable tbody .cost {
text-align: left;
padding: 10px;
vertical-align: top;
border-right: 1px solid var(--color-primary-grey-3);
}
#itemTable tbody .cost .cost_currency {
color: #888;
}
#itemTable tbody .cost .cost_value {
float: right;
}
#itemTable tbody .description {
padding: 0 10px;
border-right: 1px solid var(--color-primary-grey-3);
min-width: 300px;
}
#itemTable tbody .actions {
padding: 10px;
vertical-align: top;
}
#itemTable tbody .actions div {
width: 84px;
height: 16px;
}
#itemTable tbody .actions .icon {
display: block;
float: left;
width: 16px;
height: 16px;
padding: 0;
margin-right: 5px;
border: none
}
#itemTable tbody .actions .icon.edit {
background: url(../../images/v3/icons.png) no-repeat -80px -400px;
}
#itemTable tbody .actions .icon.link {
background: url(../../images/v3/icons.png) no-repeat -200px -480px;
}
#itemTable tbody .actions .icon.history {
background: url(../../images/v3/icons.png) no-repeat -240px -480px;
}
#itemTable tbody .actions .icon.delete {
background: url(../../images/v3/icons.png) no-repeat -160px -480px;
float: right;
}
#itemTable tbody p {
font-size: 11px;
margin-top: 10px;
line-height: 15px;
}
#itemTable tbody tr.even {
background: var(--color-gray-200);
}
.stripedTable tbody p {
font-size: 11px;
margin-top: 10px;
line-height: 15px;
}
.stripedTable tbody tr.even {
background: var(--color-gray-200);
}
/* ITEMS FOLDER NAVIGATION */
.folder_nav {
display: table-cell;
vertical-align: top;
width: 220px;
background: url(../../images/v3/light-grey.gif) right repeat-y #f1f1f1;
}
.folder_nav ul {
display: table-cell;
width: 220px;
padding: 0;
}
.custom.folder_nav ul .folder a {
padding: 10px 150px 10px 40px;
}
.folder_nav ul li {
display: table;
position: relative;
width: 100%;
margin: 0;
border-bottom: 1px solid var(--color-primary-grey-3);
color: var(--color-primary-blue);
font-family: var(--font-primary-regular);
font-size: 14px;
}
.folder_nav ul li.custom {
min-height: 55px;
}
.folder_nav ul a {
display: table-cell;
vertical-align: middle;
padding: 10px 0 10px 10px;
}
.folder_nav ul .rootFolder a {
font-size: 14px !important;
padding-left: 10px !important;
}
.folder_nav ul .active a {
color: var(--color-primary-grey-4);
}
.folder_nav ul .folder a {
display: block;
/* width:80px; */
font-size: 12px;
padding: 10px 100px 10px 40px;
white-space: nowrap;
}
.folder_nav ul .folder div {
position: relative;
}
.folder_nav ul .active {
border-right: 1px solid #fff;
color: var(--color-primary-grey-4);
background: var(--color-white);
/*padding: 10px 100px 10px 40px;*/
white-space: nowrap;
}
.folder_nav ul li a .filing_icon {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat 0 -520px;
}
.folder_nav ul li a .folder_icon {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -80px -480px;
}
.folder_nav ul .child_1 a .folder_icon {
left: 12px;
}
.folder_nav ul li .folder_options {
position: absolute;
/*width:64px;*/
/*height:16px;*/
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.folder_nav ul li .folder_options .edit {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -80px -400px;
margin-right: 8px;
border: none;
}
.folder_nav ul li.active .folder_options .edit {
margin-right: 32px;
}
.folder_nav ul li .folder_options .custom_move {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -120px -560px;
margin-right: 8px;
border: none;
}
/*.folder_nav ul li .folder_options .delete{
display: block;
float:right;
width:16px;
height:16px;
padding:0;
background: url(../../images/v3/icons.png) no-repeat -160px -480px;
margin-right:8px;
border:none;
}*/
.folder_nav ul li .folder_options .add_sub {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -40px -480px;
border: none;
}
.folder_nav ul li .folder_options .add_folder {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
/*background: url(../../images/v3/icons.png) no-repeat -120px -480px;*/
margin-right: 0;
border: none;
}
.folder_nav ul li .folder_options .custom_hh_remove {
display: block;
float: right;
width: 32px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -200px -520px;
margin-right: 8px;
border: none;
}
.folder_nav ul li .folder_options .delete {
display: block;
float: right;
width: 16px;
height: 16px;
padding: 0;
background: url(../../images/v3/icons.png) no-repeat -160px -480px;
margin-right: 8px;
border: none;
}
/*==================== Item Editor ====================*/
/*==================== Item Reviews ====================*/
#uc-item-editor #contentReviewsId.interior_content {
.btn[value="Save"] {
background-color: var(--color-primary-blue);
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
.btn[name="newReview"] {
background-color: var(--color-primary-green);
text-transform: capitalize;
&:hover {
background-color: var(--color-primary-green-dark);
}
}
select[name="reviewTemplate"],
input[type="text"] {
min-height: 32px;
box-sizing: border-box;
padding: 4px 8px;
margin-bottom: 0;
}
table.responsive.minimum_width {
width: 100% !important;
margin-left: -12px;
tr {
th,
td {
background-color: transparent;
font-family: var(--font-primary-regular);
text-align: left;
padding: 12px;
color: var(--color-primary-grey-4);
&:first-child {
border-radius: 4px 0 0 4px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
}
th {
opacity: 0.75;
}
td {
background-color: transparent;
transition: var(--transition-bg-color);
&:last-child {
text-align: right;
width: 1%;
}
}
&:hover {
td {
background-color: white;
}
}
}
}
}
/*==================== New Item Editor 01-08-15 ====================*/
.storefront .interior_content.rest_item_editor input[type="text"] {
line-height: 12px;
}
.storefront .interior_content.rest_item_editor select {
height: 24px;
}
.item_editor.rest_item_editor .interior_content {
padding: 0;
}
.item_editor .section_content {
padding: 30px 0 0 30px;
}
.item_editor .full_divider {
margin: 30px 0;
}
.item_editor .content_half {
float: left;
width: 50%;
}
.item_editor .content_third {
float: left;
width: 33%;
}
.item_editor .content_quarter {
float: left;
width: 25%;
box-sizing: border-box;
}
.item_editor .content_half .left {
padding-right: 10px;
}
.item_editor .content_half .right {
padding-left: 10px;
}
.item_editor .content_quarter .left {
padding-right: 10px;
}
.item_editor .content_quarter .right {
padding-left: 10px;
}
.item_editor input.full,
.item_editor textarea.full {
margin-bottom: 20px;
}
.item_editor input.full,
.item_editor textarea.full {
width: 100%;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
.item_editor .list_200 .btn {
font-size: 1em;
width: 200px;
margin-top: 10px;
}
.image_delete {
background: var(--color-primary-red);
height: 20px;
display: block;
float: left;
margin-right: 5px;
text-align: center;
border-radius: var(--border-radius-3);
cursor: pointer;
}
.image_delete .icon {
width: 12px;
height: 12px;
display: block;
margin: 4px;
background: url(../../images/v3/icons.png) no-repeat -868px -320px;
}
.image_add {
background: #eaeaea;
height: 20px;
display: block;
float: left;
margin-right: 5px;
text-align: center;
border-radius: var(--border-radius-3);
cursor: pointer;
}
.image_add .icon {
width: 12px;
height: 12px;
display: block;
margin: 4px;
background: url(../../images/v3/icons.png) no-repeat -753px -314px var(--color-primary-blue);
}
.image_edit {
background: var(--color-primary-blue);
height: 20px;
display: block;
float: left;
margin-right: 5px;
text-align: center;
border-radius: var(--border-radius-3);
cursor: pointer;
color: var(--color-white);
border: none;
}
.rest_item_editor .image_make_default {
background: var(--color-primary-blue);
height: 20px;
display: block;
float: left;
margin-right: 5px;
text-align: center;
border-radius: var(--border-radius-3);
cursor: pointer;
color: var(--color-white);
border: none;
}
.rest_item_editor .addAssignment,
.rest_item_editor .add_kit {
display: inline-block;
width: 20px;
height: 20px;
background: var(--color-primary-blue);
border-radius: var(--border-radius-3);
color: var(--color-white);
font-size: 16px;
text-align: center;
line-height: 17px;
cursor: pointer;
}
.rest_item_editor select {
font-size: 0.786rem;
background: none repeat scroll 0 0 #f1f1f1;
border: 1px solid rgb(187, 187, 187);
height: 32px;
padding: 2px 4px;
}
.rest_item_editor .availablePagesForAssignment {
width: 230px;
margin-right: 10px;
}
.rest_item_editor .item_image,
#tabBlogPostEdit-container .item_image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
width: 127px;
height: 127px;
overflow: hidden;
float: left;
border: 1px solid var(--color-primary-grey-3);
background: var(--color-primary-grey-1);
position: relative;
border-radius: var(--border-radius-medium);
}
.rest_item_editor .item_image_img,
#tabBlogPostEdit-container .item_image_img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: var(--color-primary-grey-5);
}
.rest_item_editor .item_image .preview,
#tabBlogPostEdit-container .item_image .preview {
display: none;
}
.rest_item_editor .item_image .code,
#tabBlogPostEdit-container .item_image .code {
color: var(--color-gray-700);
font-size: 12px;
text-align: center;
}
.rest_item_editor .item_image.hover .preview,
#tabBlogPostEdit-container .item_image.hover .preview {
display: block;
width: 100%;
height: 100%;
background: var(--overlay-black-darkest);
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.rest_item_editor .item_image .preview:after,
#tabBlogPostEdit-container .item_image .preview:after {
color: var(--color-white);
font-size: 16px;
display: block;
position: absolute;
font-family: var(--font-icons);
content: "\f1ae";
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.rest_item_editor {
.image_info {
.image_delete {
height: 26px;
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-red-dark);
}
.icon {
height: 16px;
width: 16px;
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
}
.image_edit {
height: 26px;
line-height: 26px;
padding: 0 8px;
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
}
}
.item_editor .image_info,
#tabBlogPostEdit-container .image_info {
float: left;
margin-left: 10px;
font-size: 12px;
max-width: 200px;
}
.rest_item_editor .image_info .btn,
#tabBlogPostEdit-container .image_info .btn {
display: inline-block;
height: 20px;
padding-bottom: 0;
padding-top: 0;
width: auto !important;
margin-top: 0 !important;
line-height: 20px;
}
.item_editor .image_info ul,
#tabBlogPostEdit-container .image_info ul {
margin: 0;
padding: 0;
}
.item_editor .image_info ul li,
#tabBlogPostEdit-container .image_info ul li {
list-style: none;
padding: 0;
margin: 5px 0 0 0;
}
.item_editor .image_info ul li.file,
.item_editor .image_info ul li.url,
#tabBlogPostEdit-container .image_info ul li.file,
#tabBlogPostEdit-container .image_info ul li.url {
word-break: break-all;
}
.show_cost_options {
font-size: 12px;
color: var(--color-primary-blue);
/*margin-top: 33px;*/
cursor: pointer;
}
.item_editor .section_content table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* Zebra striping */
.item_editor .section_content tr:nth-of-type(odd) {
background: var(--color-gray-100);
}
.item_editor .section_content th {
background: var(--color-white);
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
.item_editor .section_content td,
.item_editor .section_content th {
padding: 4px 6px;
border: 1px solid var(--color-primary-grey-3);
text-align: left;
position: relative;
}
.item_editor .section_content table.nowrap td {
white-space: nowrap;
}
.item_editor table.storefront_assignment {
margin: 20px 0 20px 0;
}
.item_editor th.item_id {
width: 105px;
}
.item_editor th.quantity {
width: 55px;
}
.item_editor th.cost {
width: 55px;
}
.item_editor th.description {
width: 180px;
}
.item_editor th.inventory {
width: 50px;
}
.item_editor th.warnings {
width: 80px;
}
.item_editor th.trash {
width: 10px;
}
.item_editor .storefront_assignment th.trash {
width: 20px;
}
#uc-item-editor #item_storefront table.storefront_assignment {
table-layout: auto;
width: 100%;
}
#uc-item-editor #item_storefront table.storefront_assignment thead th:first-child,
#uc-item-editor #item_storefront table.storefront_assignment tbody td:first-child {
min-width: 90px;
}
#uc-item-editor #item_storefront table.storefront_assignment tbody tr td:first-child a:last-child {
word-break: break-all;
}
#uc-item-editor #item_storefront table.storefront_assignment .pageAssignmentEditButton::after {
content: "\f1c2";
}
.item_editor th.assignment {
width: 200px;
}
.item_editor table input.full,
.item_editor table textarea.full {
margin-bottom: 0;
}
.sf_image,
.bp_image {
clear: both;
margin-bottom: 20px;
}
.item_editor .sticky_save {
background: var(--color-gray-200);
padding: 0;
}
.item_editor .sticky_save div.more_notice {
display: none;
}
.item_editor .sticky_save.is_stuck {
margin-top: 21px;
}
.item_editor .sticky_save.is_stuck div.more_notice {
background-color: var(--color-gray-600);
background: rgba(187, 187, 187, 0.6);
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
color: var(--color-gray-800);
display: block;
height: 20px;
margin-top: -21px;
padding-left: 20px;
position: relative;
text-align: center;
margin-right: -1px;
}
.item_editor .sticky_save .save_btn.btn.bottom {
font-size: 11px;
padding: 5px;
margin: 20px;
}
.item_editor .no_orphan_note {
display: none;
}
.item_editor .orphan {
color: var(--color-primary-red) !important;
}
/*==================== New Item Editor 01-08-15 ====================*/
.item_editor table .btn {
font-size: 1em;
&[value="Make Default"] {
width: 95px;
}
}
.item_editor .btn {
color: var(--color-white);
background-color: var(--color-primary-blue);
font-weight: bold;
border: none;
padding: 5px;
font-size: 0.8em;
font-size: 0.786rem;
letter-spacing: 0.08em;
border-radius: var(--border-radius-small);
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
.item_editor .select_box {
border: 1px solid #BBB;
background: none repeat scroll 0 0 #F1F1F1;
color: var(--color-gray-900);
letter-spacing: 0.08em;
padding: 5px;
font-size: 0.786rem;
}
.item_editor .list_100 .btn,
.item_editor .list_fullwidth .btn {
font-size: 1em;
}
.item_editor .list_200 .btn {
font-size: 1em;
}
.item_editor .remove.btn {
background-color: var(--color-primary-red);
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-red-dark);
}
}
.item_editor td .btn {
margin-right: 5px;
}
.item_editor .btn.save_btn {
width: 100%;
padding: 10px;
background-color: var(--color-primary-blue);
margin-bottom: 20px;
}
.item_editor .btn.orange_btn {
background-color: var(--color-primary-orange);
}
.item_editor .btn.green_btn {
background-color: var(--color-primary-green);
font-weight: bold;
}
.item_editor .btn.toggled {
color: white !important;
background-color: var(--color-primary-grey-4) !important;
}
.item_editor .save_btn.bottom {
margin-bottom: 30px;
padding: 10px;
}
.item_editor .top_btn {
padding: 10px;
display: block;
color: var(--color-white);
margin-bottom: 20px;
}
.item_editor .top_btn.upload {
/*background: var(--color-primary-orange);*/
margin-right: 5px;
}
.item_editor .top_btn.import {
/*background: var(--color-primary-orange);*/
margin-left: 5px;
}
.item_editor .top_btn.gallery {
background: var(--color-primary-blue);
margin-left: 10px;
}
.item_editor .media_item .btn {
/*display: block;*/
clear: both;
margin-bottom: 10px;
margin-right: 1px;
border: none;
}
.item_editor .btn.edit {
background: var(--color-primary-blue);
}
.item_editor .btn.delete {
background: var(--color-primary-red);
}
.related_item .btn {
margin-left: 10px;
}
.interior_content h3 {
margin-bottom: 20px;
}
.item_editor .interior_content h3 {
margin-bottom: 20px;
}
#editMultimediaPopup .template_multimedia_edit_wrapper {
bottom: 0;
left: 0;
padding: 20px;
position: absolute;
right: 0;
top: 0;
}
#editMultimediaPopup .template_multimedia_edit_wrapper > div {
position: relative;
border-bottom: none !important;
}
#editMultimediaPopup .template_multimedia_edit_wrapper .list_100:has(.btn) {
margin-right: 0;
}
#editMultimediaPopup .template_multimedia_edit_wrapper .btn.saveMultimediaBtn {
margin-right: 0;
background-color: var(--color-primary-green);
width: 100%;
}
#editMultimediaPopup .template_multimedia_edit_wrapper .btn.saveMultimediaBtn:hover {
background-color: var(--color-primary-green-dark);
}
#editMultimediaPopup .template_multimedia_edit_wrapper {
padding-top: 0;
}
#editMultimediaPopup .template_multimedia_edit_wrapper table td {
padding-bottom: 10px;
padding-right: 20px;
position: relative;
}
#editMultimediaPopup .template_multimedia_edit_wrapper table td span.info {
top: calc(50% - 5px);
left: -15px;
transform: translateY(-50%);
/* These tooltips dont appear to be working anyway */
display: none;
}
#editMultimediaPopup {
width: 725px;
height: 375px;
}
#editMultimediaPopup .btn {
text-align: center;
}
.left_nav ul li .editor_icon_item {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -160px -320px;
}
.left_nav ul .active .editor_icon_item {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -160px -360px;
}
.left_nav ul li .editor_icon_multimedia {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -200px -320px;
}
.left_nav ul .active .editor_icon_multimedia {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -200px -360px;
}
.left_nav ul li .editor_icon_options {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -240px -320px;
}
.left_nav ul .active .editor_icon_options {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -240px -360px;
}
.left_nav ul li .editor_icon_digital {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -280px -320px;
}
.left_nav ul .active .editor_icon_digital {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -280px -360px;
}
.left_nav ul li .editor_icon_discounts {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -320px -320px;
}
.left_nav ul .active .editor_icon_discounts {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -320px -360px;
}
.left_nav ul li .editor_icon_reviews {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -1160px -480px;
}
.left_nav ul .active .editor_icon_reviews {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -1160px -520px;
}
.left_nav ul li .editor_icon_related {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -360px -320px;
}
.left_nav ul .active .editor_icon_related {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -360px -360px;
}
.left_nav ul li .editor_icon_amazon {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -400px -320px;
}
.left_nav ul .active .editor_icon_amazon {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -400px -360px;
}
.left_nav ul li .editor_icon_google {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -440px -320px;
}
.left_nav ul .active .editor_icon_google {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -440px -360px;
}
.left_nav ul li .editor_icon_ebay {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -320px;
}
.left_nav ul .active .editor_icon_ebay {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -360px;
}
.left_nav ul li .editor_icon_auto {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -320px;
}
.left_nav ul .active .editor_icon_auto {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -360px;
}
.left_nav ul li .editor_icon_shipping {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -320px;
}
.left_nav ul .active .editor_icon_shipping {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -360px;
}
.left_nav ul li .editor_icon_catalog {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -480px;
}
.left_nav ul .active .editor_icon_catalog {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -520px;
}
.left_nav ul li .editor_icon_other {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -480px;
}
.left_nav ul .active .editor_icon_other {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -520px;
}
.left_nav ul li .editor_icon_tax {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -560px;
}
.left_nav ul .active .editor_icon_tax {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -600px;
}
/* NEW icon styles */
.left_nav ul li .editor_icon_shipping,
.left_nav ul .active .editor_icon_shipping,
.left_nav ul li .editor_icon_other,
.left_nav ul .active .editor_icon_other,
.left_nav ul li .editor_icon_coupons,
.left_nav ul .active .editor_icon_coupons,
.left_nav ul li .editor_icon_tax,
.left_nav ul .active .editor_icon_tax,
.left_nav ul li .editor_icon_gift,
.left_nav ul .active .editor_icon_gift,
.left_nav ul li .editor_icon_items,
.left_nav ul .active .editor_icon_items,
.left_nav ul li .editor_icon_billing,
.left_nav ul .active .editor_icon_billing {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: none;
}
.left_nav ul li .editor_icon_shipping::before,
.left_nav ul li .editor_icon_other::before,
.left_nav ul li .editor_icon_coupons::before,
.left_nav ul li .editor_icon_tax::before,
.left_nav ul li .editor_icon_gift::before,
.left_nav ul li .editor_icon_items::before,
.left_nav ul li .editor_icon_billing::before {
font-family: "icons" !important;
font-weight: normal !important;
speak: none;
line-height: 1;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
content: "\f160";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: var(--color-primary-blue);
position: absolute;
top: 2px;
right: 4px;
pointer-events: none;
}
.left_nav ul .active .editor_icon_shipping::before,
.left_nav ul .active .editor_icon_other::before,
.left_nav ul .active .editor_icon_coupons::before,
.left_nav ul .active .editor_icon_tax::before,
.left_nav ul .active .editor_icon_gift::before,
.left_nav ul .active .editor_icon_items::before,
.left_nav ul .active .editor_icon_billing::before {
color: rgb(183, 183, 183);
}
/* Icon Plane */
.left_nav ul li .editor_icon_shipping::before {
content: "\f22b";
}
/* Icon Credit Card */
.left_nav ul li .editor_icon_billing::before {
content: "\f16a";
}
/* Icon Box */
.left_nav ul li .editor_icon_items::before {
content: "\f142";
}
/* Icon Gift */
.left_nav ul li .editor_icon_gift::before {
content: "\f21f";
}
/* Icon Dollar */
.left_nav ul li .editor_icon_tax::before {
content: "\f172";
}
/* Icon Tag */
.left_nav ul li .editor_icon_coupons::before {
content: "\f1e4";
}
/* Icon Other */
.left_nav ul li .editor_icon_other::before {
content: "\f13f";
}
.item_options {
margin: 20px 0;
}
.item_options .btn {
margin-right: 10px;
float: left;
}
.item_options .option_title {
clear: both;
font-size: 1.1em;
margin-top: 30px;
border-bottom: 1px solid #d9d9d9;
}
.item_options .option_title .name {
margin-top: 20px;
font-family: "latobold";
}
.item_options .option_title .order {
margin-top: 20px;
font-family: "latobold";
}
.item_options .name {
width: 120px;
float: left;
margin-bottom: 20px;
padding-right: 20px;
}
.item_options .name {
width: 120px;
float: left;
margin-bottom: 20px;
padding-right: 20px;
}
.item_options .order {
width: 60px;
float: left;
margin-bottom: 20px;
}
.item_options .option {
clear: both;
}
#contentDigitalDeliveryId .move_arrows {
width: 16px;
margin: 90px 20px 0 0;
float: left;
}
#contentDigitalDeliveryId .move_arrows .arrow_left {
display: block;
height: 16px;
width: 16px;
clear: both;
margin-top: 10px;
/* background: url(../../images/v3/icons.png) no-repeat -33px -200px; */
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
#contentDigitalDeliveryId .move_arrows .arrow_right {
display: block;
height: 16px;
width: 16px;
/* background: url(../../images/v3/icons.png) no-repeat -24px -200px; */
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
#contentDigitalActivationId .activation_code {
clear: both;
margin-bottom: 20px;
}
body[data-main-form-action="/merchant/digitallibrary/editDigitalItemSave.do"] {
.content_area {
min-width: 0px;
.box_bg {
height: auto !important;
}
}
#fileTableId {
width: 100%;
tr {
td {
padding-left: 8px;
padding-right: 8px;
&:first-child {
padding-left: 0;
}
&:nth-child(4),
&:nth-child(5) {
text-align: center;
width: 20px;
white-space: nowrap;
overflow: hidden;
position: relative;
}
}
}
a {
max-width: 600px;
break-word: break-all;
display: flex;
gap: 8px;
word-break: break-word;
white-space: break-spaces;
&::before {
content: url('data:image/svg+xml,');
display: block;
}
}
input[type="button"] {
width: 20px;
height: 20px;
border-radius: 4px;
color: transparent !important;
background-color: transparent;
border: none;
outline: none;
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
transition: var(--transition-bg-color);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
&[value="edit"] {
background-image: url('data:image/svg+xml,');
&:hover {
background-color: var(--color-alt-blue-1);
}
}
&[value="delete"] {
background-image: url('data:image/svg+xml,');
&:hover {
background-color: var(--color-alt-red-1);
}
}
}
}
form[action="/merchant/digitallibrary/editDigitalItemSave.do"] {
table {
td:has(#file-input) {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--color-alt-blue-1);
color: var(--color-primary-grey-5);
border-radius: var(--border-radius-medium);
padding: 8px;
transition: var(--transition-bg-color);
input[type="file"] {
cursor: pointer;
font-family: var(--font-primary-regular);
&::file-selector-button {
background-color: var(--color-primary-grey-5);
font-family: var(--font-primary-regular);
letter-spacing: 1px;
color: white;
padding: 0.6em 0.8em;
border: none;
border-radius: 4px;
margin-right: 4px;
cursor: pointer;
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
}
&:has(input[name="fileName"]):hover {
background-color: var(--color-alt-blue-2);
}
&::before {
content: '';
display: block;
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
td:has(> input[type="checkbox"]) {
position: relative;
&::before {
content: '';
display: block;
position: relative;
width: 24px;
height: 16px;
background-color: var(--color-primary-grey-3);
border-radius: 12px;
float: left;
margin-right: 4px;
transition: var(--transition-bg-color);
}
&::after {
content: '';
position: absolute;
display: block;
width: 12px;
height: 12px;
top: 50%;
transform: translateY(-50%);
left: 3px;
background-color: white;
border-radius: 6px;
transition: left 0.3s ease;
}
&:has(input[type="checkbox"]:checked) {
&::before {
background-color: var(--color-primary-green);
}
&::after {
left: 10px;
}
}
input[type="checkbox"] {
width: 24px;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
}
tr:has(#description-input) {
td {
padding-top: 8px;
input[type="text"] {
box-sizing: border-box;
width: 100%;
}
}
}
td[width="50%"] {
vertical-align: top;
table {
width: 100%;
}
.widget_box {
margin-bottom: 0;
br {
display: none;
}
}
}
}
input[type="submit"] {
color: var(--color-white);
background-color: var(--color-primary-blue);
border: none;
padding: 6px 8px;
letter-spacing: 0.08em;
border-radius: var(--border-radius-small);
line-height: 1;
cursor: pointer;
font-weight: bold;
transition: var(--transition-bg-color);
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
}
}
.item_editor {
#contentRelatedItemsId {
table.minimum_width {
width: 100% !important;
max-width: 515px;
th,
td {
background: transparent;
text-align: left;
padding: 6px 12px 6px 12px;
&:first-child {
padding: 6px 12px 6px 0;
}
&:last-child {
padding: 6px 0 6px 12px;
text-align: right;
}
}
}
.related_item {
margin-bottom: 8px;
clear: both;
border-bottom: 1px solid var(--color-primary-grey-3);
padding-bottom: 8px;
margin-right: 20px;
&.add {
border-bottom: none;
}
.btn {
margin-left: 8px;
}
.related_item_id {
margin-bottom: 16px;
width: 200px;
font-family: 'latobold';
}
.related_item_description {
clear: both;
color: var(--color-primary-grey-4);
width: 200px;
}
input[type="text"] {
margin-top: 4px;
margin-bottom: 16px
}
.add-related-btn {
margin-top: 16px;
background-color: var(--color-primary-green);
padding: 4px 12px;
&:hover {
background-color: var(--color-primary-green-dark);
}
}
}
.remove.btn {
padding: 5px;
}
.advanced {
.list_small_input {
position: relative;
width: 32px;
cursor: pointer;
input[type="checkbox"] {
position: absolute;
top: 0;
left: 0;
margin: 0;
opacity: 0;
width: 100%;
height: 100%;
z-index: 10;
cursor: pointer;
}
&::before {
content: "";
display: block;
width: 24px;
height: 16px;
border-radius: var(--border-radius-medium);
background-color: var(--color-primary-grey-3);
transition: var(--transition-bg-color);
}
&:after {
content: "";
display: block;
width: 12px;
height: 12px;
border-radius: 6px;
background-color: white;
position: absolute;
top: 2px;
left: 2px;
transition: left 0.3s ease;
pointer-events: none;
}
&:has(input[type="checkbox"]:checked) {
&::before {
background-color: var(--color-primary-green);
}
&::after {
left: 10px;
}
}
&:hover {
&::before {
background-color: var(--color-primary-green-dark);
}
}
}
.list_200 {
width: 100%;
max-width: 240px;
margin-right: 0;
}
}
}
}
.autoorder.step select,
.autoorder.step input[type="text"] {
background: white;
}
.autoorder.step .step_pause_fields {
display: none;
}
.autoorder.step .step_type_pause .step_pause_fields {
display: inline;
}
.autoorder.step .step_pause_until_fields {
display: none;
}
.autoorder.step .step_type_pause_until .step_pause_until_fields {
display: inline;
}
.autoorder.step .step_item_fields {
display: none;
}
.autoorder.step .step_type_kit_only .step_item_fields,
.autoorder.step .step_type_item .step_item_fields {
display: inline;
}
.autoorder.step {
display: block;
clear: both;
margin-bottom: 20px;
}
.autoorder.step .step_number {
display: block;
width: 10px;
height: 10px;
font-family: 'latobold';
color: var(--color-white);
background: var(--color-gray-950);
z-index: 20;
float: left;
margin-top: -37px;
margin-left: 7px;
}
.triangle-topleft {
width: 0;
height: 0;
border-top: 40px solid #d9d9d9;
border-right: 40px solid transparent;
z-index: 10;
float: left;
margin-top: -20px;
margin-left: -20px;
}
.autoorder.step .step_content {
padding: 20px;
background: var(--color-primary-grey-2);
display: table-cell;
position: relative;
}
.autoorder.step .grandfather_content {
padding: 20px;
background: #eaeaea;
border: 1px solid #d9d9d9;
}
.autoorder.step .step_content .top_label {
padding-left: 0;
min-height: 32px;
}
.autoorder.step .step_content .list_100 {
min-height: 70px;
}
.autoorder.step .step_content .list_100.step_type {
margin-left: -20px;
}
@media only screen and (max-width: 1024px),
(min-device-width: 1024px) and (max-device-width: 1200px) {
/*--- Auto Order - example - Label the data ---*/
.autoorder-example td:nth-of-type(1):before {
content: "Order Number:";
}
.autoorder-example td:nth-of-type(2):before {
content: "Date:";
}
.autoorder-example td:nth-of-type(3):before {
content: "Item ID:";
}
.autoorder-example td:nth-of-type(4):before {
content: "Comment:";
}
.autoorder-example td:nth-of-type(5):before {
content: "";
}
/*--- Auto Order - Sample Order Schedule - Label the data ---*/
.autoorder-sos td:nth-of-type(1):before {
content: "Order Number:";
}
.autoorder-sos td:nth-of-type(2):before {
content: "Date:";
}
.autoorder-sos td:nth-of-type(3):before {
content: "Item ID:";
}
.autoorder-sos td:nth-of-type(4):before {
content: "Comment:";
}
/*--- Shipping - Method Specific - Label the data ---*/
.shipping-mso td:nth-of-type(1):before {
content: "Shipping Method:";
}
.shipping-mso td:nth-of-type(2):before {
content: "Invalid For:";
}
.shipping-mso td:nth-of-type(3):before {
content: "Valid For:";
}
.shipping-mso td:nth-of-type(4):before {
content: "Valid Only For:";
}
.shipping-mso td:nth-of-type(5):before {
content: "Free Shipping Cost:";
}
.shipping-mso td:nth-of-type(6):before {
content: "Relax Restrictions on Upsell:";
}
.shipping-mso td:nth-of-type(7):before {
content: "Filter to if Available:";
}
.shipping-mso td:nth-of-type(8):before {
content: "Fixed Shipping Cost:";
}
.shipping-mso td:nth-of-type(9):before {
content: "Flat Fee Markup:";
}
.shipping-mso td:nth-of-type(10):before {
content: "Per Item Fee Markup:";
}
.shipping-mso td:nth-of-type(11):before {
content: "First Item Markup:";
}
.shipping-mso td:nth-of-type(12):before {
content: "Each Additional Item Markup:";
}
.shipping-mso td:nth-of-type(13):before {
content: "Percentage of Shipping Markup:";
}
.shipping-mso td:nth-of-type(14):before {
content: "Percentage of Item Markup:";
}
.shipping-mso td:nth-of-type(15):before {
content: "";
}
/*--- Shipping - Methods ---*/
#methodsTableId td:nth-of-type(1):before {
content: "Method:";
}
#methodsTableId td:nth-of-type(2):before {
content: "Display Name:";
}
#methodsTableId td:nth-of-type(3):before {
content: "Delivery Days:";
}
#methodsTableId td:nth-of-type(4):before {
content: "Options:";
}
#methodsTableId td:nth-of-type(4):before {
content: "Warning:";
}
#methodsTableId td {
white-space: normal !important;
}
#methodsTableId td .btn {
margin-bottom: 5px !important;
}
/*--- Shipping - Destination Markups - Label the data ---*/
.shipping-dm td:nth-of-type(1):before {
content: "Country:";
}
.shipping-dm td:nth-of-type(2):before {
content: "State:";
}
.shipping-dm td:nth-of-type(3):before {
content: "Postal Code:";
}
.shipping-dm td:nth-of-type(4):before {
content: "Shipping Method:";
}
.shipping-dm td:nth-of-type(5):before {
content: "Flat Fee:";
}
.shipping-dm td:nth-of-type(6):before {
content: "Per Item:";
}
.shipping-dm td:nth-of-type(7):before {
content: "";
}
/*--- Shipping - Destination Restrictions - Label the data ---*/
.shipping-mr td:nth-of-type(1):before {
content: "Country:";
}
.shipping-mr td:nth-of-type(2):before {
content: "State:";
}
.shipping-mr td:nth-of-type(3):before {
content: "Validity:";
}
.shipping-mr td:nth-of-type(4):before {
content: "";
}
/*--- Other - Payment Method Restrictions - Label the data ---*/
.other_pmr td:nth-of-type(1):before {
content: "Payment Method:";
}
.other_pmr td:nth-of-type(2):before {
content: "Invalid for:";
}
.other_pmr td:nth-of-type(3):before {
content: "Valid for:";
}
.other_pmr td:nth-of-type(4):before {
content: "Valid only for:";
}
/*--- Other - Tax Exemptions - Label the data ---*/
.other_te td:nth-of-type(1):before {
content: "Country:";
}
.other_te td:nth-of-type(2):before {
content: "State (Optional):";
}
.other_te td:nth-of-type(3):before {
content: "County (Optional):";
}
.other_te td:nth-of-type(4):before {
content: "City (Optional):";
}
.other_te td:nth-of-type(5):before {
content: "Postal Code (Optional):";
}
}
/*==================== Configuration - Payments ====================*/
.left_nav ul li .payment_icon_methods {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -440px -400px;
}
.left_nav ul .active .payment_icon_methods {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -440px -440px;
}
.left_nav ul li .payment_icon_gateways {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -400px;
}
.left_nav ul .active .payment_icon_gateways {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -440px;
}
.left_nav ul li .payment_icon_options {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -400px;
}
.left_nav ul .active .payment_icon_options {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -440px;
}
.left_nav ul li .payment_icon_restrictions {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -400px;
}
.left_nav ul .active .payment_icon_restrictions {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -440px;
}
.left_nav ul li .payment_icon_tests {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -400px;
}
.left_nav ul .active .payment_icon_tests {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -440px;
}
.left_nav ul li .payment_icon_rotating {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -400px;
}
.left_nav ul .active .payment_icon_rotating {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -440px;
}
.left_nav ul li .payment_icon_cardinal {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -680px -400px;
}
.left_nav ul .active .payment_icon_cardinal {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -680px -440px;
}
.method-creditcard .restrictions-edit {
width: 15%;
min-width: 45px;
float: left;
}
.method-creditcard .restrictions-text {
width: 45%;
float: left;
clear: both;
font-size: 0.8em;
font-size: 0.786rem;
}
.method-creditcard .restrictions-text p {
line-height: 1.5em;
margin-bottom: 0;
}
.method-creditcard input[type="checkbox"] {
float: left;
margin-right: 10px;
}
#contentCreditCardsId .icon_amex,
.sub .icon_amex {
display: block;
height: 34px;
width: 56px;
float: left;
margin-right: 5px;
background-size: 70px;
background-position: center -5px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
#contentCreditCardsId .icon_diners_club,
.sub .icon_dc {
display: block;
height: 34px;
width: 56px;
float: left;
margin-right: 5px;
background-size: 70px;
background-position: center -5px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
#contentCreditCardsId .icon_discover,
.sub .icon_discover {
display: block;
height: 34px;
width: 56px;
float: left;
margin-right: 5px;
background-size: 70px;
background-position: center -5px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
#contentCreditCardsId .icon_jcb,
.sub .icon_jcb {
display: block;
height: 34px;
width: 56px;
float: left;
margin-right: 5px;
background-size: 70px;
background-position: center -5px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
#contentCreditCardsId .icon_mastercard,
.sub .icon_mc {
display: block;
height: 34px;
width: 56px;
float: left;
margin-right: 5px;
background-size: 70px;
background-position: center -5px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
#contentCreditCardsId .icon_visa,
.sub .icon_visa {
display: block;
height: 34px;
width: 56px;
float: left;
margin-right: 5px;
background-size: 70px;
background-position: center -5px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
/* keeping this in case I F it up */
/* #contentCreditCardsId .icon_diners_club,
.sub .icon_dc {
display: block;
height: 14px;
width: 21px;
float: left;
margin-right: 5px;
background: url(../../images/v3/payment-creditcards.png) no-repeat -31px -2px;
}
#contentCreditCardsId .icon_discover,
.sub .icon_discover {
display: block;
height: 14px;
width: 21px;
float: left;
margin-right: 5px;
background: url(../../images/v3/payment-creditcards.png) no-repeat -62px -2px;
}
#contentCreditCardsId .icon_jcb,
.sub .icon_jcb {
display: block;
height: 14px;
width: 21px;
float: left;
margin-right: 5px;
background: url(../../images/v3/payment-creditcards.png) no-repeat -93px -2px;
}
#contentCreditCardsId .icon_mastercard,
.sub .icon_mc {
display: block;
height: 14px;
width: 21px;
float: left;
margin-right: 5px;
background: url(../../images/v3/payment-creditcards.png) no-repeat -124px -2px;
}
#contentCreditCardsId .icon_visa,
.sub .icon_visa {
display: block;
height: 14px;
width: 21px;
float: left;
margin-right: 5px;
background: url(../../images/v3/payment-creditcards.png) no-repeat -155px -2px;
} */
/*==================== Configuration - Shipping ====================*/
.left_nav ul li .shipping_icon_carriers,
.left_nav ul li .shipping_icon_checkout,
.left_nav ul li .shipping_icon_restrictions,
.left_nav ul li .shipping_icon_distribution,
.left_nav ul li .shipping_icon_methods,
.left_nav ul li .shipping_icon_packages,
.left_nav ul li .shipping_icon_tracking {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: none;
}
.left_nav ul li .shipping_icon_carriers::after,
.left_nav ul li .shipping_icon_checkout::after,
.left_nav ul li .shipping_icon_restrictions::after,
.left_nav ul li .shipping_icon_distribution::after,
.left_nav ul li .shipping_icon_methods::after,
.left_nav ul li .shipping_icon_packages::after,
.left_nav ul li .shipping_icon_tracking::after {
font-family: "icons" !important;
font-weight: normal !important;
speak: none;
line-height: 1;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
content: "\f22b";
font-size: 16px;
width: 16px;
height: 16px;
display: block;
color: var(--color-primary-blue);
position: relative;
pointer-events: none;
}
.left_nav ul li.active .shipping_icon_carriers::after,
.left_nav ul li.active .shipping_icon_checkout::after,
.left_nav ul li.active .shipping_icon_restrictions::after,
.left_nav ul li.active .shipping_icon_distribution::after,
.left_nav ul li.active .shipping_icon_methods::after,
.left_nav ul li.active .shipping_icon_packages::after,
.left_nav ul li.active .shipping_icon_tracking::after {
color: var(--color-primary-grey-4);
}
.left_nav ul li .shipping_icon_carriers::after {
content: "\f1b0";
}
.left_nav ul li .shipping_icon_checkout::after {
content: "\f150";
}
.left_nav ul li .shipping_icon_restrictions::after {
content: "\f25f";
}
.left_nav ul li .shipping_icon_distribution::after {
content: "\f22b";
}
.left_nav ul li .shipping_icon_methods::after {
content: "\f1e7";
}
.left_nav ul li .shipping_icon_packages::after {
content: "\f142";
}
.left_nav ul li .shipping_icon_tracking::after {
content: "\f1a8";
}
.left_nav ul li .shipping_icon_tracking.oi[data-glyph="location"]::before {
display: none;
}
/* .left_nav ul li .shipping_icon_distribution {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -320px;
background: none;
}
.left_nav ul .active .shipping_icon_distribution {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -360px;
}
.left_nav ul li .shipping_icon_checkout {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -40px -400px;
}
.left_nav ul .active .shipping_icon_checkout {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -40px -440px;
}
.left_nav ul li .shipping_icon_methods {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -320px;
}
.left_nav ul .active .shipping_icon_methods {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -360px;
}
.left_nav ul li .shipping_icon_packages {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -320px;
}
.left_nav ul .active .shipping_icon_packages {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -360px;
}
#tabTracking .shipping_icon_tracking.oi {
position: absolute;
left: 11px;
top: 12px;
} */
/* .left_nav ul li .shipping_icon_carriers {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -400px;
}
.left_nav ul .active .shipping_icon_carriers {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -440px;
}
.left_nav ul li .shipping_icon_restrictions {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -400px;
}
.left_nav ul .active .shipping_icon_restrictions {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -440px;
} */
.config-shipping-d .col_options {
min-width: 200px;
}
@media only screen and (max-width: 1024px),
(min-device-width: 1024px) and (max-device-width: 1200px) {
/*--- Configuration - Shipping - Dustribution Centers - Label the data ---*/
.config-shipping-d td:nth-of-type(1):before {
content: "Code:";
}
.config-shipping-d td:nth-of-type(2):before {
content: "Name:";
}
.config-shipping-d td:nth-of-type(3):before {
content: "Location:";
}
.config-shipping-d td:nth-of-type(4):before {
content: "Default:";
}
.config-shipping-d td:nth-of-type(5):before {
content: "Transmission:";
}
.config-shipping-d td:nth-of-type(6):before {
content: "options:";
}
/*--- Configuration - Shipping - Methods - Label the data ---*/
.config-shipping-m td:nth-of-type(1):before {
content: "Method:";
}
.config-shipping-m td:nth-of-type(2):before {
content: "Name:";
}
.config-shipping-m td:nth-of-type(3):before {
content: "Default:";
}
.config-shipping-m td:nth-of-type(4):before {
content: "Delivery Days:";
}
.config-shipping-m td:nth-of-type(5):before {
content: "Disabled:";
}
.config-shipping-m td:nth-of-type(6):before {
content: "options:";
}
/*--- Configuration - Shipping - Destination Restrictions - Label the data ---*/
.config-shipping-dr td:nth-of-type(1):before {
content: "Country:";
}
.config-shipping-dr td:nth-of-type(2):before {
content: "State:";
}
.config-shipping-dr td:nth-of-type(3):before {
content: "City:";
}
.config-shipping-dr td:nth-of-type(4):before {
content: "Postal Code:";
}
.config-shipping-dr td:nth-of-type(5):before {
content: "Validity:";
}
.config-shipping-dr td:nth-of-type(6):before {
content: "Options:";
}
}
/*==================== Configuration - Shipping - Distribution Center ====================*/
.distribution_centers table .list_100 {
margin-bottom: 20px;
font-size: 1.2em;
}
.distribution_centers table .list_160 {
margin-bottom: 20px;
font-size: 1.2em;
}
.distribution_centers table .list_200 {
margin-bottom: 20px;
font-size: 1.2em;
}
.distribution_center_options {
width: 500px;
float: left;
margin-right: 20px;
}
.distribution_center_map {
width: 300px;
float: left;
margin-right: 0;
}
.dc_tm_options {
padding-top: 20px;
}
.distribution_centers .widget_box .list_100,
.distribution_centers .widget_box .list_150,
.distribution_centers .widget_box .list_200,
.distribution_centers .widget_box .list_300,
.distribution_centers .widget_box .list_500 {
font-size: 1em;
}
.distribution_centers .widget_box .widget_title {
margin-bottom: 0;
}
.distribution_centers .widget_box .widget_title .btn {
margin-left: 10px;
margin-top: -3px;
}
@media only screen and (max-width: 1024px),
(min-device-width: 1024px) and (max-device-width: 1200px) {
/*--- Configuration - Shipping - Dustribution Centers - Transmission Mechanism ---*/
.distribution-tm td:nth-of-type(1):before {
content: "";
}
.distribution-tm td:nth-of-type(2):before {
content: "Name:";
}
.distribution-tm td:nth-of-type(3):before {
content: "Integration Type:";
}
.distribution-tm td:nth-of-type(4):before {
content: "Supported Shipping Methods:";
}
/*--- Configuration - Shipping - Dustribution Centers - Prefrences ---*/
.distribution-pref td:nth-of-type(1):before {
content: "Preference:";
}
.distribution-pref td:nth-of-type(2):before {
content: "Country:";
}
.distribution-pref td:nth-of-type(3):before {
content: "State:";
}
.distribution-pref td:nth-of-type(4):before {
content: "Postal Code:";
}
}
/*--- Configuration - Shipping - Methods ---*/
#methodsTableId td:has(input[value="enable"]) input[value="make default"],
#methodsTableId td:has(input[value="disabled"]) input[value="make default"] {
pointer-events: none;
opacity: 0.5;
}
#methodsTableId td input[value="disable"],
#methodsTableId td input[value="enabled"] {
background-color: var(--color-primary-green);
}
#methodsTableId td input[value="disabled"],
#methodsTableId td input[value="disable"],
#methodsTableId td input[value="enabled"] {
width: 80px !important;
}
#methodsTableId td input.btn.toggled[value="default"] {
background-color: var(--color-primary-green) !important;
}
#methodsTableId td input[value="delete"] {
color: transparent;
width: 26px;
position: relative;
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: background-color 0.3s;
}
#methodsTableId td input[value="delete"]:hover {
background-color: var(--color-primary-red-dark);
}
/* #methodsTableId td input[value="delete"]::before {
content: "\f22d";
display: block;
width: 16px;
height: 16px;
font-family: var(--font-icons);
font-size: 16px;
line-height: 16px;
text-align: center;
color: white;
} */
/*==================== Configuration - Custom Fields Values ====================*/
form[action="/merchant/configuration/customFieldsSave.do"] .widget_box {
margin-right: 30px;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 16px;
margin-right: 30px;
margin-bottom: 64px;
}
@media only screen and (min-width: 768px) {
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (min-width: 1024px) {
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_wrapper {
grid-template-columns: repeat(5, 1fr);
grid-gap: 32px;
}
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_wrapper .title_bar {
padding: 6px 12px;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_wrapper .widget_box {
width: 100%;
margin: 0;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_wrapper .box_bg {
padding: 0;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_list {
display: flex;
flex-direction: column;
gap: 8px;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_row {
display: flex;
gap: 8px;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_row input[type="text"]{
width: 100%;
transition: border-color var(--transition-primary);
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_row:has(input[type="button"][value="delete"]:hover) input[type="text"] {
border-color: var(--color-primary-red-dark);
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_row input[type="button"][value="delete"] {
background-color: var(--color-primary-red);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
border: none;
border-radius: var(--border-radius-small);
color: transparent;
transition: background-color var(--transition-primary);
width: 32px;
}
form[action="/merchant/configuration/customFieldsSave.do"] .custom-field_row input[type="button"][value="delete"]:hover {
background-color: var(--color-primary-red-dark);
}
/* Configuration - Free Promotional Items */
form[action="/merchant/configuration/freePromotionSave.do"] .alert_warn {
max-width: 600px;
}
/*==================== Configuration - Order Properties ====================*/
form[action="/merchant/configuration/orderPropertiesSave.do"] .widget_box {
margin-right: 30px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 16px;
margin-right: 30px;
margin-bottom: 64px;
}
@media only screen and (min-width: 768px) {
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (min-width: 1024px) {
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper {
grid-template-columns: repeat(1, 1fr);
grid-gap: 32px;
}
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .widget_box.order-property-container {
width: 100%;
box-shadow: var(--boxshadow-primary);
border-radius: var(--border-radius-medium);
border: none;
margin-bottom: 0;
overflow: hidden;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar {
display: flex;
align-items: center;
padding: 12px;
gap: 4px;
margin-left: 0;
background-color: transparent;
border-bottom: 1px solid var(--color-primary-grey-3);
border-radius: 0;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar .order-property-sort {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
width: 12px;
margin-right: 8px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar .order-property-sort .order-property-up,
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar .order-property-sort .order-property-down {
display: flex;
align-items: center;
width: 12px;
height: 12px;
cursor: pointer;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .order-property-container:first-child .title_bar .order-property-sort .order-property-up {
opacity: 0.25;
pointer-events: none;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .order-property-container:last-child .title_bar .order-property-sort .order-property-down {
opacity: 0.25;
pointer-events: none;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar .order-property-general {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar .order-property-name,
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .title_bar .field-type-container {
margin-top: 0;
display: flex;
align-items: center;
gap: 4px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .widget_box {
width: 100%;
margin: 0;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-wrapper .box_bg {
margin-right: 0 !important;
padding: 4px 12px 12px 12px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-list {
display: flex;
flex-direction: column;
gap: 8px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-row {
display: flex;
gap: 8px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-row input[type="text"]{
width: 100%;
transition: border-color var(--transition-primary);
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .title_bar:has(input[type="button"][value="delete"]:hover) input[type="text"],
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-row:has(input[type="button"][value="delete"]:hover) input[type="text"] {
border-color: var(--color-primary-red-dark);
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .title_bar input[type="button"][value="delete"],
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-row input[type="button"][value="delete"] {
background-color: var(--color-primary-red);
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
border: none;
border-radius: var(--border-radius-small);
color: transparent;
transition: background-color var(--transition-primary);
width: 32px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .title_bar input[type="button"][value="delete"]:hover,
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-row input[type="button"][value="delete"]:hover {
background-color: var(--color-primary-red-dark);
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .field-type-container,
form[action="/merchant/configuration/orderPropertiesSave.do"] .display-checkbox-container,
form[action="/merchant/configuration/orderPropertiesSave.do"] .optional-checkbox-container,
form[action="/merchant/configuration/orderPropertiesSave.do"] .keepwhencloning-checkbox-container {
margin-top: 8px;
justify-content: flex-start;
gap: 8px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .display-checkbox-container > span,
form[action="/merchant/configuration/orderPropertiesSave.do"] .optional-checkbox-container > span,
form[action="/merchant/configuration/orderPropertiesSave.do"] .keepwhencloning-checkbox-container > span {
min-width: 200px;
}
form[action="/merchant/configuration/orderPropertiesSave.do"] .title_bar input[type="button"][value="delete"],
form[action="/merchant/configuration/orderPropertiesSave.do"] .order-property-row input[type="button"][value="delete"] {
height: 25px;
}
/* Configuration - Free Promotional Items */
form[action="/merchant/configuration/freePromotionSave.do"] .alert_warn {
max-width: 600px;
}
/*==================== Screen Branding Themes ====================*/
.left_nav ul li .theme_icon_theme {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat 0 -400px;
}
.left_nav ul .active .theme_icon_theme {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat 0 -440px;
}
.left_nav ul li .theme_icon_graphics_library {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -480px;
}
.left_nav ul .active .theme_icon_graphics_library {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -600px -520px;
}
.left_nav ul li .theme_icon_screens {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -480px;
}
.left_nav ul .active .theme_icon_screens {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -560px -520px;
}
.left_nav ul li .theme_icon_conversion {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -480px;
}
.left_nav ul .active .theme_icon_conversion {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -640px -520px;
}
/*==================== Order Editor =======================================*/
/*.order_editor table td, .order_editor table th {*/
/*padding: initial;*/
/*}*/
.order_editor .list_110 {
width: 110px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
font-size: 0.8em;
font-size: 0.786rem;
}
.order_editor input.full,
.order_editor textarea.full {
width: 100%;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
}
.order_editor .space_right_0 {
margin-right: 0 !important;
}
.order_editor .select_box {
border: 1px solid var(--color-primary-grey-3);
background: none repeat scroll 0 0 #F1F1F1;
background-color: var(--color-white);
color: var(--color-gray-900);
letter-spacing: 0.08em;
padding: 5px;
font-size: 0.786rem;
border-radius: var(--border-radius-small);
}
.order_editor .content_half {
float: left;
width: 50%;
}
.order_editor .sticky_save {
background: var(--color-gray-200);
padding: 0;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
}
.order_editor .recalculate_shipping,
.order_editor .update_shipping_address_option {
margin-top: 25px;
font-size: 11px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.order_editor .sticky_save div.more_notice {
display: none;
}
.order_editor .sticky_save.is_stuck {
margin-top: 21px;
}
.order_editor .sticky_save.is_stuck div.more_notice {
background-color: var(--color-gray-600);
background: rgba(187, 187, 187, 0.6);
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
color: var(--color-gray-800);
display: block;
height: 20px;
margin-top: -21px;
padding-left: 20px;
position: relative;
text-align: center;
margin-right: -1px;
}
.order_editor .sticky_save .save_btn.btn.bottom {
font-size: 11px;
padding: 5px;
margin: 20px;
}
.order_editor .payment_method {
list-style: none;
padding-left: 0;
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
.order_editor .payment_method li {
margin-bottom: 2px;
}
/*==================== Order Management - Order Review ====================*/
.left_nav ul li .order_search {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -200px -560px;
}
.left_nav ul .active .order_search {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -200px -600px;
}
.left_nav ul li .order_search_results {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -560px;
}
.left_nav ul .active .order_search_results {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -520px -600px;
}
.left_nav ul li .order {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -560px;
}
.left_nav ul .active .order {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat -480px -600px;
}
.left_nav ul li .results_settings {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat 0 -400px;
}
.left_nav ul .active .results_settings {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
background: url(../../images/v3/icons.png) no-repeat 0 -440px;
}
body[data-main-form-action="/merchant/configuration/payment/v5/transactionGatewaysSave.do"] {
#contentTransactionGatewaysId {
table[summary="gateway list"] {
div[id*="questionsFor"] {
background-color: white;
border-radius: var(--border-radius-medium);
padding: 16px;
box-shadow: var(--boxshadow-sub);
margin-right: -6px;
margin-left: -6px;
margin-bottom: 10px;
table {
width: 100%;
font-family: var(--font-primary-regular);
color: var(--color-primary-grey-5);
input[type="submit"] {
border: none;
background-color: var(--color-primary-grey-5);
color: white;
border-radius: 4px;
padding: 4px 8px;
display: block;
margin-bottom: 4px;
margin-top: -6px;
width: 100%;
&:hover {
background-color: var(--color-primary-blue-dark);
}
}
a {
color: var(--color-primary-blue) !important;
font-wight: 400 !important;
}
input[type="text"],
select {
width: 100%;
box-sizing: border-box;
}
/* This caused issues with the large table structure on unrelated pages*/
/* td:has(span[class*="icon"]),
td:has(input[name*="supportECheck"]) {
display: flex;
align-items: center;
gap: 4px;
}
&[summary="gateway Stripe Connect options"] {
font-family: var(--font-primary-regular) !important;
a {
color: var(--color-primary-blue) !important;
font-wight: 400 !important;
}
} */
}
}
}
}
}
.interior_content .gateways tr:nth-of-type(odd) {
/* background: var(--color-gray-100); */
background-color: rgba(0,0,0,0.04)
}
.interior_content .gateways th {
background: var(--color-primary-grey-1);
color: var(--color-primary-grey-4);
font-family: var(--font-primary-bold);
}
.interior_content .gateways td,
.gateways th {
padding: 6px;
border: none;
text-align: left;
}
.interior_content .gateways td:has(span.issupported) {
background-color: var(--color-alt-green-1);
}
.gateways .col1 {
width: 12px;
}
.gateways .col2 {
width: 472px;
}
.gateways .col3,
.gateways .col4,
.gateways .col5 {
width: 100px;
}
.gateways .supported {
text-align: center;
}
.gateways .supported .issupported {
display: block;
height: 14px;
width: 19px;
margin: 0 auto;
/* background: url(../../images/v3/icons.png) no-repeat -1400px -200px; */
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
.gateways .supported .notsupported {
display: block;
height: 14px;
width: 14px;
margin: 0 auto;
background-image: url('data:image/svg+xml,');
background-size: 16px;
background-repeat: no-repeat;
background-position: center;
}
.gateways .sub tr:nth-of-type(odd) {
background: var(--color-white);
}
.gateways .sub td,
.gateways .sub th {
padding: 6px;
border: none;
text-align: left;
}
.interior_content .floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
/*width: 850px !important;*/
padding: 0;
}
@media only screen and (max-width: 1300px) {
.interior_content table.gateways {
border-collapse: collapse;
width: 550px;
}
.gateways .col1 {
width: 12px;
}
.gateways .col2 {
width: 172px;
}
.gateways .col3,
.gateways .col4,
.gateways .col5 {
width: 100px;
}
}
@media only screen and (max-width: 1024px),
(min-device-width: 1024px) and (max-device-width: 1200px) {
/*--- Payment Methods - Credit Cards - Label the data ---*/
.method-creditcard td {
min-height: 50px;
}
.method-creditcard td:before {
white-space: pre;
}
.method-creditcard td:nth-of-type(1):before {
content: "";
}
/* .method-creditcard td:nth-of-type(2):before {
content: "Supported:";
} */
.method-creditcard td:has(input[name*="accountingCode"])::before {
content: "Method Quickbooks code:";
}
.method-creditcard td:has(input[name*="depositToAccount"])::before {
content: "Method Quickbooks deposit to account:";
}
.method-creditcard td:has(input[name*="surchargeAccountingCode"])::before {
content: "Surcharge Quickbooks code:";
}
.method-creditcard td:has(input[name*="transactionFee"])::before {
content: "Surcharge transaction fee:";
}
.method-creditcard td:has(input[name*="transactionPercentage"])::before {
content: "Surcharge transaction percentage:";
}
.method-creditcard td:has(.restrictions-edit)::before {
content: "Method restrictions:";
}
}
/*==================== Store Fronts ====================*/
#sf_intro {
padding: 0;
}
#sf_intro .intro_banner {
height: 350px;
background: url(../../images/v3/storefront/intro-banner.png) no-repeat left bottom #93d7f3;
padding-right: 30px;
margin-top: 32px;
border-radius: 16px;
box-shadow: var(--boxshadow-primary);
}
#sf_intro .intro_banner span {
display: block;
margin-left: 470px;
padding-top: 50px;
}
#sf_intro .intro_banner span h2 {
font-size: 28px;
letter-spacing: 1px;
color: var(--color-white);
margin-bottom: 10px;
text-shadow: 2px 2px var(--overlay-black-dark);
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
#sf_intro .intro_banner span p {
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
}
#sf_intro .intro_banner .sf_domain {
color: #d35d5d;
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
#sf_intro h3 {
margin-top: 20px;
font-family: 'latobold', Arial, Helvetica, sans-serif;
font-weight: normal;
}
#storeFrontSeoHelpDiv .lorem-ipsum,
.storefront .lorem-ipsum {
background-color: yellow;
}
.storefront .interior_content input[type="text"] {
width: 100%;
box-sizing: border-box;
border-radius: var(--border-radius-small);
}
.storefront .interior_content .minicolors-theme-default .minicolors-input {
height: 30px;
}
/*==================== StoreFronts - Privacy and Tracking ====================*/
.storefront .interior_content #contentStoreFrontConversionTracking ul.etabs {
border: none;
padding: 0;
margin-bottom: 32px;
}
.storefront .interior_content #contentStoreFrontConversionTracking ul.etabs li.tab {
border: none;
}
.storefront .interior_content #contentStoreFrontConversionTracking ul.etabs li.tab a {
border: none;
border-radius: var(--border-radius-small);
color: var(--color-white);
background-color: var(--color-primary-blue);
transition: background-color var(--transition-primary);
}
.storefront .interior_content #contentStoreFrontConversionTracking ul.etabs li.tab a:hover {
background-color: var(--color-primary-blue-dark);
}
.storefront .interior_content #contentStoreFrontConversionTracking ul.etabs li.tab a.active {
color: var(--color-primary-grey-4);
background-color: white;
border: 1px solid var(--color-primary-grey-3);
}
.storefront .interior_content #contentStoreFrontConversionTracking {
width: 850px;
}
.storefront .interior_content #contentStoreFrontConversionTracking input[type="text"] {
width: auto;
}
.storefront .interior_content #contentStoreFrontConversionTracking .list_100,
.storefront .interior_content #contentStoreFrontConversionTracking .list_150,
.storefront .interior_content #contentStoreFrontConversionTracking .list_300,
.storefront .interior_content #contentStoreFrontConversionTracking .list_500 {
margin-bottom: 16px;
}
.storefront .interior_content #contentStoreFrontConversionTracking #tabsCT-pixels {
.list_100 {
width: 160px;
}
.list_500 {
width: 440px;
}
#facebookConversionPixelId,
#facebookServerSideAccessToken {
width: 100%;
box-sizing: border-box;
margin-bottom: 4px;
}
.list_500:has(#facebookConversionPixelId),
.list_500:has(#facebookServerSideAccessToken) {
font-size: 0.8em;
color: var(--color-primary-grey-4);
}
.list_500:has(#facebookOptInType) {
display: flex;
gap: 4px;
align-items: center;
white-space: nowrap;
select {
width: 100%;
}
}
}
/* FACEBOOK Tracking */
.storefront .interior_content #contentStoreFrontConversionTracking #tabsCT-google {
.list_150:not(:first-child) {
position: relative;
box-sizing: border-box;
.info {
position: absolute;
margin: 0;
left: -16px;
top: 2px;
}
}
}
.storefront .interior_content #contentStoreFrontConversionTracking #tabsCT-google textarea,
.storefront .interior_content #contentStoreFrontConversionTracking #tabsCT-google input[type="text"] {
width: 100%;
box-sizing: border-box;
}
.storefront .interior_content #contentStoreFrontConversionTracking #tabsCT-google .select_box {
background-color: var(--color-white);
height: 30px;
}
.storefront .interior_content #contentStoreFrontConversionTracking #tabsCT-google #googleConversionFormat {
width: 100%;
}
.storefront .interior_content #contentStoreFrontConversionTracking #affiliateNetworkPixelsTableId {
box-shadow: var(--boxshadow-sub);
}
.storefront .interior_content #contentStoreFrontConversionTracking #affiliateNetworkPixelsTableId .list_50 {
width: 32px;
margin-right: 0;
}
.storefront .interior_content #contentStoreFrontConversionTracking .editAffiliateNetworkPixel,
.storefront .interior_content #contentStoreFrontConversionTracking .deleteAffiliateNetworkPixel {
color: transparent;
width: 32px;
position: relative;
box-sizing: border-box;
}
.storefront .interior_content #contentStoreFrontConversionTracking .editAffiliateNetworkPixel::after,
.storefront .interior_content #contentStoreFrontConversionTracking .deleteAffiliateNetworkPixel::after {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f22c";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: var(--color-white);
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
.storefront .interior_content #contentStoreFrontConversionTracking .deleteAffiliateNetworkPixel::after {
content: "\f22d";
}
.storefront #tabsCT-custom .CodeMirror {
border-radius: var(--border-radius-medium);
border: 1px solid var(--color-primary-grey-3);
}
/*==================== StoreFronts - Search ====================*/
.storefront .interior_content #tabSearch-container ul.etabs {
border: none;
padding: 0;
margin-bottom: 32px;
}
.storefront .interior_content #tabSearch-container ul.etabs li.tab {
border: none;
}
.storefront .interior_content #tabSearch-container ul.etabs li.tab a {
border: none;
border-radius: var(--border-radius-small);
color: var(--color-white);
background-color: var(--color-primary-blue);
transition: background-color var(--transition-primary);
}
.storefront .interior_content #tabSearch-container ul.etabs li.tab a:hover {
background-color: var(--color-primary-blue-dark);
}
.storefront .interior_content #tabSearch-container ul.etabs li.tab a.active {
color: var(--color-primary-grey-4);
background-color: white;
border: 1px solid var(--color-primary-grey-3);
}
/*==================== StoreFronts - Privacy and Tracking - Shortcodes ====================*/
.storefront #tabsCT-usc .utm_short_codes {
position: relative;
}
.storefront #tabsCT-usc .btn.js-new-utm-short-code {
position: absolute;
right: 0;
top: 0;
padding: 3px 8px;
}
.storefront #tabsCT-usc .dataTables_wrapper .dataTables_filter {
margin-right: 55px;
}
.storefront #tabsCT-usc table.dataTable.no-footer {
border-bottom: none;
}
.storefront #tabsCT-usc .usc_datatables.dataTable {
float: left;
margin-top: 16px;
margin-bottom: 16px;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
border-radius: var(--border-radius-medium);
overflow: hidden;
border-bottom: none;
}
.usc_datatables.dataTable tbody tr td ul {
padding: 0;
margin: 0;
list-style: none;
}
.usc_datatables.dataTable tbody tr td ul li {
margin-bottom: 0;
}
.usc_datatables.dataTable tbody tr:nth-child(odd) {
background-color: var(--color-primary-grey-1);
}
.storefront #tabsCT-usc table.dataTable thead tr th {
border-bottom: 1px solid var(--color-primary-grey-3);
}
.storefront #tabsCT-usc table.dataTable thead tr th {
text-align: left;
padding: 8px 8px;
}
.storefront #tabsCT-usc table.dataTable thead tr th.sorting,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_asc,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_desc {
background-image: none;
position: relative;
}
.storefront #tabsCT-usc table.dataTable thead tr th.sorting::before,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting::after,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_asc::before,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_asc::after,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_desc::before,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_desc::after {
content: "\f156";
display: block;
font-family: var(--font-icons);
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 8px;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
font-size: 8px;
width: 8px;
height: 8px;
position: absolute;
top: calc(50% - 4px);
right: 8px;
transform: translateY(-50%);
opacity: 0.4;
}
.storefront #tabsCT-usc table.dataTable thead tr th.sorting::after,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_asc::after,
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_desc::after {
content: "\f153";
top: calc(50% + 4px);
}
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_asc::after {
opacity: 1;
}
.storefront #tabsCT-usc table.dataTable thead tr th.sorting_desc::before {
opacity: 1;
}
.storefront #tabsCT-usc table.dataTable tbody tr td {
border-bottom: 1px solid var(--color-primary-grey-3);
border-right: 1px solid var(--color-primary-grey-3);
}
.storefront #tabsCT-usc table.dataTable tbody tr td:nth-child(3),
.storefront #tabsCT-usc table.dataTable tbody tr td:nth-child(4) {
width: 160px;
}
.storefront #tabsCT-usc table.dataTable tbody tr:last-child td {
border-bottom: none;
}
.storefront #tabsCT-usc table.dataTable tbody tr td:last-child {
border-right: none;
}
.storefront #tabsCT-usc table.dataTable tbody tr td:last-child div {
display: flex;
gap: 8px;
}
.storefront #tabsCT-usc table.dataTable tbody tr td:last-child div button {
margin: 0;
width: 26px;
height: 26px;
}
.storefront #tabsCT-usc .dataTables_filter input[type="search"] {
border: 1px solid var(--color-primary-grey-3);
border-radius: var(--border-radius-small);
background: var(--color-white);
color: var(--color-primary-grey-5);
letter-spacing: .08em;
padding: 5px;
font-size: 0.8em;
font-size: 0.786rem;
}
.storefront #tabsCT-usc {
min-width: 820px;
}
.storefront #tabsCT-usc .intro {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 32px;
}
.storefront #tabsCT-usc .shortcode_list-wrapper {
width: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--boxshadow-primary);
border-radius: var(--border-radius-medium);
box-sizing: border-box;
margin-bottom: 32px;
background-color: var(--color-white);
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn {
white-space: nowrap;
}
.storefront #tabsCT-usc .shortcode_list-header {
display: flex;
width: 100%;
justify-content: space-between;
padding: 16px 16px 16px 16px;
box-sizing: border-box;
gap: 16px;
background-color: var(--color-primary-grey-2);
border-bottom: 1px solid var(--color-primary-grey-3);
}
.storefront #tabsCT-usc .shortcode_list-labels {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
color: var(--color-primary-grey-4);
font-weight: bold;
}
.storefront #tabsCT-usc .shortcode_list-col-shortcode {
width: 180px;
flex-shrink: 0;
box-sizing: border-box;
}
.storefront #tabsCT-usc .shortcode_list-col-description {
width: 100%;
}
.storefront #tabsCT-usc .shortcode_list-row {
display: flex;
width: 100%;
justify-content: space-between;
padding: 8px 16px 8px 16px;
box-sizing: border-box;
gap: 16px;
}
.storefront #tabsCT-usc .shortcode_list-item {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
color: var(--color-primary-grey-5);
}
.storefront #tabsCT-usc .shortcode_item-actions {
display: flex;
gap: 8px;
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: background-color var(--transition-primary);
min-width: 32px;
box-sizing: border-box;
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
content: "\f1c2";
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: var(--color-white);
position: relative;
pointer-events: none;
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-delete::before {
content: "\f22d";
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-add {
background-color: var(--color-primary-green)
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-edit:hover {
background-color: var(--color-primary-blue-dark);
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-delete:hover {
background-color: var(--color-primary-red-dark);
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-edit,
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-delete {
gap: 0;
text-indent: -999px;
overflow: hidden;
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-edit::before,
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-delete::before {
text-indent: 0;
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-add:hover {
background-color: var(--color-primary-green-dark)
}
.storefront #tabsCT-usc .shortcode_list-wrapper .btn.shortcode_action-add::before {
content: "\f1c9"
}
.storefront #tabsCT-usc .shortcode_guide-wrapper {
margin-bottom: 32px;
background-color: var(--color-white);
border-radius: 16px;
padding: 16px;
}
.storefront #tabsCT-usc .shortcode_guide-structure {
display: inline-flex;
gap: 2px;
align-items: center;
padding: 8px 8px 8px 16px;
border-radius: var(--border-radius-medium);
background-color: white;
border: 1px solid var(--color-primary-grey-3);
position: relative;
margin-bottom: 16px;
}
.storefront #tabsCT-usc .shortcode_guide-shortcode {
padding: 2px 4px;
color: var(--color-primary-grey-5);
background-color: #F2E478;
border-radius: 4px;
}
.storefront #tabsCT-usc .shortcode_guide-utmprops {
position: absolute;
display: block;
top: -6px;
left: calc(100% - 16px);
background-color: var(--color-white);
color: var(--color-primary-grey-4);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
padding: 4px 8px;
white-space: nowrap;
border-radius: var(--border-radius-medium);
}
.utmShortcodeEditor {
box-sizing: border-box;
border-radius: var(--border-radius-medium);
padding: 16px;
border: none;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
color: var(--color-primary-grey-4);
max-height: 90vh;
min-width: 640px;
box-sizing: border-box;
}
.utmShortcodeEditor * {
box-sizing: border-box;
}
.utmShortcodeEditor .utmShortcodeHeader {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% + 32px);
height: auto;
margin-left: -16px;
margin-right: -16px;
margin-top: -16px;
margin-bottom: 20px;
padding: 16px;
background-color: var(--color-primary-grey-1);
}
.utmShortcodeEditor .utmShortcodeContent.utmShortcodeParams {
margin-bottom: 16px;
padding: 16px;
border: 1px solid var(--color-primary-grey-3);
border-radius: var(--border-radius-small);
background-color: var(--color-primary-grey-1);
flex-direction: column;
}
.utmShortcodeEditor .utmShortcodeContent {
width: 100%;
display: flex;
gap: 16px;
}
.utmShortcodeEditor .utmShortcodeContent .utmShortcodeList {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.utmShortcodeEditor .utmShortcodeContent .utmShortcodeInput {
width: 100%;
display: flex;
gap: 8px;
align-items: center;
}
.utmShortcodeEditor .utmShortcodeContent .utmShortcodeInput span {
white-space: nowrap;
min-width: 100px;
}
.storefront .interior_content #contentStoreFrontConversionTracking .utmShortcodeEditor .utmShortcodeContent .utmShortcodeInput input[type=text] {
width: 100%;
flex-shrink: 1;
}
.storefront .interior_content #contentStoreFrontConversionTracking .utmShortcodeEditor .utmShortcodeContent .utmShortcodeInput input[type=text]::placeholder {
color: var(--color-primary-grey-3);
}
.utmShortcodeEditor .utmShortcodeEditor .utmShortcodeFooter {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
margin-bottom: -16px;
margin-top: 12px;
padding: 16px;
background-color: var(--color-primary-grey-1);
}
.storefront .save_btn {
/*background: none repeat scroll 0% 0% var(--color-primary-blue);*/
padding: 5px;
font-size: 1em;
font-size: 1rem;
}
.storefront .select_box,
.template_anp_edit_wrapper .select_box {
border: 1px solid var(--color-primary-grey-3);
background: none repeat scroll 0 0 white;
color: var(--color-primary-grey-5);
letter-spacing: 0.08em;
padding: 5px;
font-size: 0.786rem;
min-height: 28px;
}
.storefront .left_nav ul li .sf_icon {
display: block;
height: 16px;
width: 16px;
position: absolute;
top: 12px;
left: 12px;
}
.storefront .left_nav ul li .sf_icon::before {
font-family: "icons" !important;
font-style: normal;
font-weight: normal !important;
vertical-align: top;
display: inline-block;
speak: none;
line-height: 1;
vertical-align: baseline;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
/* content: "\f160"; */
font-size: 12px;
width: 12px;
height: 12px;
display: block;
color: rgb(183, 183, 183);
position: absolute;
top: 2px;
right: 4px;
pointer-events: none;
}
.storefront .left_nav ul li .sf_icon_general {
background: url(../../images/v3/icons.png) no-repeat 0 -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_general::before {
content: "\f160";
}
.storefront .left_nav ul .active .sf_icon_general {
background: url(../../images/v3/icons.png) no-repeat 0 -440px;
background: none;
}
.storefront .left_nav ul li .sf_icon_pages {
background: url(../../images/v3/icons.png) no-repeat -720px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_pages::before {
content: "\f145";
}
.storefront .left_nav ul .active .sf_icon_pages {
background: url(../../images/v3/icons.png) no-repeat -720px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_appearance {
background: url(../../images/v3/icons.png) no-repeat -360px -560px;
background: none;
}
.storefront .left_nav ul li .sf_icon_appearance::before {
content: "\f146";
}
.storefront .left_nav ul .active .sf_icon_appearance {
background: url(../../images/v3/icons.png) no-repeat -360px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_themes {
background: url(../../images/v3/icons.png) no-repeat -800px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_themes::before {
content: "\f185";
}
.storefront .left_nav ul .active .sf_icon_themes {
background: url(../../images/v3/icons.png) no-repeat -800px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_templates {
background: url(../../images/v3/icons.png) no-repeat -840px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_templates::before {
content: "\f1a2";
}
.storefront .left_nav ul .active .sf_icon_templates {
background: url(../../images/v3/icons.png) no-repeat -840px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_menus {
background: url(../../images/v3/icons.png) no-repeat -880px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_menus::before {
content: "\f1ba";
}
.storefront .left_nav ul .active .sf_icon_menus {
background: url(../../images/v3/icons.png) no-repeat -880px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_email {
background: url(../../images/v3/icons.png) no-repeat -1200px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_email::before {
content: "\f17b";
}
.storefront .left_nav ul .active .sf_icon_email {
background: url(../../images/v3/icons.png) no-repeat -1200px -440px;
background: none;
}
.storefront .left_nav ul li .sf_icon_language {
background: url(../../images/v3/icons.png) no-repeat -1240px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_language::before {
content: "\f18e";
}
.storefront .left_nav ul .active .sf_icon_language {
background: url(../../images/v3/icons.png) no-repeat -1240px -440px;
background: none;
}
.storefront .left_nav ul li .sf_icon_files {
background: url(../../images/v3/icons.png) no-repeat -920px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_files::before {
content: "\f18a";
}
.storefront .left_nav ul .active .sf_icon_files {
background: url(../../images/v3/icons.png) no-repeat -920px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_search {
background: url(../../images/v3/icons.png) no-repeat -200px -560px;
background: none;
}
.storefront .left_nav ul li .sf_icon_search::before {
content: "\f1ae";
}
.storefront .left_nav ul .active .sf_icon_search {
background: url(../../images/v3/icons.png) no-repeat -200px -600px;
background: none;
}
.storefront .left_nav ul li .sf_icon_seo {
background: url(../../images/v3/icons.png) no-repeat -440px -320px;
background: none;
}
.storefront .left_nav ul li .sf_icon_seo::before {
content: "\f188";
}
.storefront .left_nav ul .active .sf_icon_seo {
background: url(../../images/v3/icons.png) no-repeat -440px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_social {
background: url(../../images/v3/icons.png) no-repeat -200px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_social::before {
content: "\f118";
}
.storefront .left_nav ul .active .sf_icon_social {
background: url(../../images/v3/icons.png) no-repeat -200px -440px;
background: none;
}
.storefront .left_nav ul li .sf_icon_locations {
background: url(../../images/v3/icons.png) no-repeat -1040px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_locations::before {
content: "\f1af";
}
.storefront .left_nav ul li .sf_icon_advertising {
background: url(../../images/v3/icons.png) no-repeat -1280px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_advertising::before {
content: "\f148";
}
.storefront .left_nav ul .active .sf_icon_advertising {
background: url(../../images/v3/icons.png) no-repeat -1280px -440px;
background: none;
}
.storefront .left_nav ul li .sf_icon_conversion {
background: url(../../images/v3/icons.png) no-repeat -760px -560px;
background: none;
}
.storefront .left_nav ul li .sf_icon_conversion::before {
content: "\f184";
}
.storefront .left_nav ul .active .sf_icon_conversion {
background: url(../../images/v3/icons.png) no-repeat -760px -600px;
background: none;
}
.storefront .left_nav ul li .sf_icon_advanced {
background: url(../../images/v3/icons.png) no-repeat -960px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_advanced::before {
content: "\f1f9";
}
.storefront .left_nav ul .active .sf_icon_advanced {
background: url(../../images/v3/icons.png) no-repeat -960px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_logs {
background: url(../../images/v3/icons.png) no-repeat -1000px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_logs::before {
content: "\f1cd";
}
.storefront .left_nav ul .active .sf_icon_logs {
background: url(../../images/v3/icons.png) no-repeat -1000px -360px;
background: none;
}
.storefront .left_nav ul li .sf_icon_blog {
background: url(../../images/v3/icons.png) no-repeat -1080px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_blog::before {
content: "\f17e";
}
.storefront .left_nav ul .active .sf_icon_blog {
background: url(../../images/v3/icons.png) no-repeat -1080px -440px;
background: none;
}
.storefront .left_nav ul li .sf_icon_css {
background: url(../../images/v3/icons.png) no-repeat -720px -480px;
background: none;
}
.storefront .left_nav ul li .sf_icon_css::before {
content: "\f204";
}
.storefront .left_nav ul .active .sf_icon_css {
background: url(../../images/v3/icons.png) no-repeat -720px -520px;
background: none;
}
.storefront .left_nav ul li .sf_icon_content {
background: url(../../images/v3/icons.png) no-repeat -520px -480px;
background: none;
}
.storefront .left_nav ul li .sf_icon_content::before {
content: "\f1a6";
}
.storefront .left_nav ul .active .sf_icon_content {
background: url(../../images/v3/icons.png) no-repeat -520px -520px;
background: none;
}
.storefront .left_nav ul li .sf_icon_upsells {
background: url(../../images/v3/icons.png) no-repeat -1320px -400px;
background: none;
}
.storefront .left_nav ul li .sf_icon_upsells::before {
content: "\f172";
}
.storefront .left_nav ul .active .sf_icon_upsells {
background: url(../../images/v3/icons.png) no-repeat -1320px -440px;
background: none;
}
.storefront .left_nav ul li > .sub_arrow_right_wrapper .sub_arrow_right {
display: block;
background: url(../../images/v3/icons.png) no-repeat -24px -218px;
width: 8px;
height: 8px;
position: absolute;
right: 10px;
top: 10px;
}
.storefront .left_nav ul li > .sub_arrow_right_wrapper .sub_arrow_down {
display: block;
background: url(../../images/v3/icons.png) no-repeat 0 -218px;
width: 8px;
height: 8px;
position: absolute;
right: 10px;
top: 10px;
}
.storefront .left_nav ul li .sub_arrow_right_wrapper {
padding: 10px;
width: 8px;
height: 8px;
position: absolute;
right: 0;
top: 5px;
}
.storefront span.info {
position: relative;
float: left;
margin-right: 5px;
margin-top: 2px;
top: auto;
display: block;
width: 10px;
height: 10px;
}
.storefront .etabs .subTab {
font-size: 10px;
}
.storefront .attributes_list span.info {
float: none;
display: inline-block;
margin-left: 0;
margin-top: 0;
}
.attributes_list .orphan {
color: var(--color-primary-red) !important;
}
.storefront .attributes_list li.attribute_fullscreen {
background: none repeat scroll 0 0 white;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
padding: 20px 0 0 20px;
}
body.storefront_attribute_fullscreen {
overflow: hidden;
}
.storefront .theme_attribute_tooltip_anchor {
color: inherit;
/* background: url(../../images/v3/icons.png) no-repeat 0 -360px; */
position: relative;
display: block;
float: left;
cursor: pointer;
height: 12px;
width: 12px;
margin-right: 5px;
margin-top: 1px;
}
.storefront .theme_attribute_tooltip_anchor::before {
font-family: "icons" !important;
content: "\f256";
display: block;
line-height: 1;
width: 1em;
text-align: center;
box-sizing: content-box;
font-size: 12px;
color: var(--color-primary-green);
rotate: 180deg;
}
.storefront .attribute_section {
border: 1px solid var(--color-primary-grey-3);
border-radius: var(--border-radius-small);
background-color: var(--color-white);
}
.storefront .sf_page .attribute_section {
margin-top: 0;
}
.storefront .sf_page_container.has_children > .sf_page > .sf_page_title > .actions > .btn.delete {
background-color: var(--color-primary-grey-3) !important;
cursor: not-allowed;
}
.storefront .attribute_section_name {
background: var(--color-primary-grey-1);
border: none;
border-radius: 8px 8px 0 0;
color: var(--color-primary-grey-4);
font-size: 11px;
height: 30px;
padding: 10px 0 0 10px;
text-shadow: none;
font-family: var(--font-primary-regular);
font-weight: normal;
}
.storefront .attribute_section_content {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border-top: 1px solid var(--color-primary-grey-3);
}
.storefront .sf_page_edit .attribute_section_content {
padding-top: 20px;
padding-left: 0;
padding-right: 0;
border-top: 1px solid var(--color-primary-grey-3);
}
.storefront .upsellOfferEdit .attribute_section {
overflow: hidden;
border: none;
border-radius: var(--border-radius-medium);
box-shadow: var(--boxshadow-primary);
}
.storefront .upsellOfferEdit .attribute_section_name {
font-size: 14px;
font-family: var(--font-primary-bold);
height: 40px;
display: flex;
align-items: center;
padding: 0 0 0 8px;
box-sizing: border-box;
}
.storefront .upsellOfferEdit .attribute_section_name .attribute_section_toggle::before {
content: url('data:image/svg+xml,');
transform: rotate(90deg);
transition: var(--transition-all);
}
.storefront .upsellOfferEdit .attribute_section_closed > .attribute_section_name > .attribute_section_toggle:before {
content: url('data:image/svg+xml,');
transform: rotate(0);
}
.storefront .attribute_section_content.attribute_section_content_grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
padding-top: 16px;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
color: var(--color-primary-grey-5);
background-color: var(--color-primary-grey-1);
}
.storefront .upsellOfferEdit .attribute_section_content {
border-top: 1px solid var(--color-primary-grey-2);
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell {
padding: 16px;
border-radius: var(--border-radius-medium);
background-color: white;
box-shadow: var(--boxshadow-sub);
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_header {
font-famly: var(--font-primary-bold);
font-weight: bold;
margin-bottom: 8px;
letter-spacing: 0.04em;
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content {
color: var(--color-primary-grey-5);
font-weight: 400;
display: flex;
flex-direction: column;
gap: 8px;
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content > div {
color: var(--color-primary-grey-5);
font-weight: 400;
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content div[data-trigger-payment-method],
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content div[data-trigger-shipping-method],
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content div:has( > input[type="checkbox"]) {
display: flex;
align-items: center;
gap: 4px;
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content div:has( > input[type="checkbox"]):not(:last-child) {
margin-bottom: 8px;
}
.storefront .attribute_section_content.attribute_section_content_grid .attribute_section_content_cell .attribute_section_content_cell_content div > input[type="checkbox"] {
margin-left: 0px !important;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemLogic,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemLogic {
border: 1px solid var(--color-primary-grey-3);
padding: 8px;
height: auto;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemIdColumn,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemIdColumn {
width: 100%;
flex: 1 1 100%;
align-items: stretch;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemIdColumn::after,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemIdColumn::after {
background-color: var(--color-primary-grey-2);
color: var(--color-primary-grey-4);
padding: 2px 6px;
border-radius: 4px;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemRemove,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionrItemRemove {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-alt-red-1);
color: var(--color-primary-red-dark);
border: none;
border-radius: 4px;
width: 24px;
flex: 0;
transition: var(--transition-all);
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemRemove:hover,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionrItemRemove:hover {
background-color: var(--color-primary-red-dark);
color: white;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemAddButton,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemAddButton {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-alt-green-1);
color: var(--color-primary-green-dark);
border: none;
border-radius: 4px;
width: 24px;
flex: 0;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemAddButton:hover,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemAddButton:hover {
background-color: var(--color-primary-green-dark);
color: white;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemTotalWrapper,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemTotalWrapper {
gap: 8px;
align-items: center;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerTotalQuantityComparison,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionTotalQuantityComparison {
max-width: 36px;
}
.storefront .attribute_section_content.attribute_section_content_grid .offerTriggerItemOperator,
.storefront .attribute_section_content.attribute_section_content_grid .offerSuppressionItemOperator {
height: auto;
}
.storefront .offerSuppressionItem,
.storefront .offerTriggerItem {
display: flex;
gap: 8px;
margin-top: 8px;
}
.storefront .offerTriggerItemAddWrapper,
.storefront .offerSuppressionItemAddWrapper {
display: flex;
gap: 8px;
}
.storefront .offerSuppressionItemList .offerSuppressionItemTotalWrapper,
.storefront .offerSuppressionItemList[data-view='total'] .offerSuppressionItemOperatorColumn,
.storefront .offerSuppressionItemList[data-view='total'] .offerSuppressionItemComparisonColumn,
.storefront .offerSuppressionItemList[data-view='contains_any'] .offerSuppressionItemOperatorColumn,
.storefront .offerSuppressionItemList[data-view='contains_any'] .offerSuppressionItemComparisonColumn,
.storefront .offerSuppressionItemList[data-view='contains_all'] .offerSuppressionItemOperatorColumn,
.storefront .offerSuppressionItemList[data-view='contains_all'] .offerSuppressionItemComparisonColumn,
.storefront .offerTriggerItemList .offerTriggerItemTotalWrapper,
.storefront .offerTriggerItemList[data-view='total'] .offerTriggerItemOperatorColumn,
.storefront .offerTriggerItemList[data-view='total'] .offerTriggerItemComparisonColumn,
.storefront .offerTriggerItemList[data-view='contains_any'] .offerTriggerItemOperatorColumn,
.storefront .offerTriggerItemList[data-view='contains_any'] .offerTriggerItemComparisonColumn,
.storefront .offerTriggerItemList[data-view='contains_all'] .offerTriggerItemOperatorColumn,
.storefront .offerTriggerItemList[data-view='contains_all'] .offerTriggerItemComparisonColumn {
display: none;
}
.storefront .offerSuppressionItemList[data-view='total'] .offerSuppressionItemTotalWrapper,
.storefront .offerTriggerItemList[data-view='total'] .offerTriggerItemTotalWrapper {
display: flex;
}
.storefront .offerSuppressionItemList[data-view='contains_all'] .offerSuppressionItemIdColumn,
.storefront .offerSuppressionItemList[data-view='contains_any'] .offerSuppressionItemIdColumn,
.storefront .offerTriggerItemList[data-view='contains_all'] .offerTriggerItemIdColumn,
.storefront .offerTriggerItemList[data-view='contains_any'] .offerTriggerItemIdColumn {
display: flex;
gap: 8px;
}
.storefront .offerSuppressionItemList[data-view='contains_all'] .offerTriggerItem .offerSuppressionItemIdColumn::after,
.storefront .offerTriggerItemList[data-view='contains_all'] .offerTriggerItem .offerTriggerItemIdColumn::after {
display: block;
white-space: nowrap;
content: "EXISTS AND";
}
.storefront .offerSuppressionItemList[data-view='contains_all'] .offerTriggerItem:last-child .offerSuppressionItemIdColumn::after,
.storefront .offerTriggerItemList[data-view='contains_all'] .offerTriggerItem:last-child .offerTriggerItemIdColumn::after {
display: block;
content: "EXISTS";
}
.storefront .offerSuppressionItemList[data-view='contains_any'] .offerTriggerItem .offerSuppressionItemIdColumn::after,
.storefront .offerTriggerItemList[data-view='contains_any'] .offerTriggerItem .offerTriggerItemIdColumn::after {
display: block;
white-space: nowrap;
content: "EXISTS OR ";
}
.storefront .offerSuppressionItemList[data-view='contains_any'] .offerTriggerItem:last-child .offerSuppressionItemIdColumn::after,
.storefront .offerTriggerItemList[data-view='contains_any'] .offerTriggerItem:last-child .offerTriggerItemIdColumn::after {
display: block;
content: "EXISTS";
}
/* ==========================================================================
Upsell PATH editor Item(s) Logic
--------------------------------------------------------------------------
The path editor reuses the offer editor's offerTrigger*/offerSuppression*
markup, but it renders inside the .upsell_path_edit_wrapper lightbox, which
is NOT inside .attribute_section_content_grid (and may sit outside
.storefront entirely). The offer rules above therefore don't reach it, so
we mirror them here scoped to .upsell_path_edit_wrapper. (Two bugs from the
offer rules are corrected here: the .offerSuppressionItemRemove class name,
and the suppression ::after labels targeting .offerSuppressionItem.)
========================================================================== */
.upsell_path_edit_wrapper .offerTriggerItemLogic,
.upsell_path_edit_wrapper .offerSuppressionItemLogic {
border: 1px solid var(--color-primary-grey-3);
padding: 8px;
height: auto;
box-sizing: border-box;
}
/* Logic dropdown spans the full width of the item-logic block. Targeted as the direct-child