/* ================================================================================== */ /* == Normalize.css v7.0.0 ========================================================== */ /* ================================================================================== */ html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:0.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ================================================================================== */ /* == Web Fonts ===================================================================== */ /* ================================================================================== */ @font-face { font-family: 'vo-font'; src: url('../fonts/proximanova-regular-webfont.woff2') format('woff2'), url('../fonts/proximanova-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'vo-font'; src: url('../fonts/proximanova-regularit-webfont.woff2') format('woff2'), url('../fonts/proximanova-regularit-webfont.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'vo-font'; src: url('../fonts/proximanova-semibold-webfont.woff2') format('woff2'), url('../fonts/proximanova-semibold-webfont.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'vo-font'; src: url('../fonts/proximanova-semiboldit-webfont.woff2') format('woff2'), url('../fonts/proximanova-semiboldit-webfont.woff') format('woff'); font-weight: 600; font-style: italic; } @font-face { font-family: 'vo-font'; src: url('../fonts/proximanova-bold-webfont.woff2') format('woff2'), url('../fonts/proximanova-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; } /* ================================================================================== */ /* == Variables ===================================================================== */ /* ================================================================================== */ :root { --text-darkest: #353A40; --text-default: #6F7780; --text-lightest: #9EA4AE; --text-table-header: #7E8DA3; --color-primary: #5874C8; --color-primary-hover: rgb(from var(--color-primary) calc(r - 13) calc(g - 13) calc(b - 13)); --color-primary-active: rgb(from var(--color-primary) calc(r - 25) calc(g - 25) calc(b - 25)); --color-blue2: #239DEF; --color-blue2-hover: rgb(from var(--color-blue2) calc(r - 13) calc(g - 13) calc(b - 13)); --color-blue2-active: rgb(from var(--color-blue2) calc(r - 25) calc(g - 25) calc(b - 25)); --color-dark-blue: #485C99; --color-dark-blue-hover: rgb(from var(--color-dark-blue) calc(r - 13) calc(g - 13) calc(b - 13)); --color-dark-blue-active: rgb(from var(--color-dark-blue) calc(r - 25) calc(g - 25) calc(b - 25)); --color-darkest-blue: #2A375C; --color-red: #F86B67; --color-red2: #D45245; --color-red2-hover: rgb(from var(--color-red2) calc(r - 13) calc(g - 13) calc(b - 13)); --color-red2-active: rgb(from var(--color-red2) calc(r - 25) calc(g - 25) calc(b - 25)); --color-green: #36AF47; --color-green-hover: rgb(from var(--color-green) calc(r - 13) calc(g - 13) calc(b - 13)); --color-green-active: rgb(from var(--color-green) calc(r - 25) calc(g - 25) calc(b - 25)); --color-green2: #7BC43C; --color-yellow: #FDD948; --color-yellow2: #FDCF1A; --color-yellow2-hover: rgb(from var(--color-yellow2) calc(r - 13) calc(g - 13) calc(b - 13)); --color-yellow2-active: rgb(from var(--color-yellow2) calc(r - 25) calc(g - 25) calc(b - 25)); --color-yellow3: #DA932C; --color-purple: #A050E0; --color-border: #E6EAEE; --color-border-strong: #CFD6DE; --bg-table-header: #F4F7F9; --bg-body: #EFF3F6; --bg-gray: #F6F9FA; --bg-subtle: #FAFBFC; --checkbox-border: #DEE3E9; --table-border: #ECEFF2; /* Notice Colors */ --notice-neutral-text: var(--text-darkest); --notice-neutral-bg: var(--bg-gray); --notice-neutral-border: var(--color-border); --notice-primary-text: oklch(from var(--color-primary) 0.45 calc(c * 0.55) h); --notice-primary-bg: color-mix(in srgb, var(--color-primary) 30%, #fff); --notice-primary-border: color-mix(in srgb, var(--color-primary) 65%, #fff); --notice-info-text: oklch(from var(--color-blue2) 0.45 calc(c * 0.55) h); --notice-info-bg: color-mix(in srgb, var(--color-blue2) 30%, #fff); --notice-info-border: color-mix(in srgb, var(--color-blue2) 65%, #fff); --notice-success-text: oklch(from var(--color-green) 0.45 calc(c * 0.55) h); --notice-success-bg: color-mix(in srgb, var(--color-green) 30%, #fff); --notice-success-border: color-mix(in srgb, var(--color-green) 65%, #fff); --notice-warning-text: oklch(from var(--color-yellow2) 0.45 calc(c * 0.55) h); --notice-warning-bg: color-mix(in srgb, var(--color-yellow2) 30%, #fff); --notice-warning-border: color-mix(in srgb, var(--color-yellow2) 65%, #fff); --notice-danger-text: oklch(from var(--color-red2) 0.45 calc(c * 0.55) h); --notice-danger-bg: color-mix(in srgb, var(--color-red2) 30%, #fff); --notice-danger-border: color-mix(in srgb, var(--color-red2) 65%, #fff); --notice-accent-text: oklch(from var(--color-purple) 0.45 calc(c * 0.55) h); --notice-accent-bg: color-mix(in srgb, var(--color-purple) 30%, #fff); --notice-accent-border: color-mix(in srgb, var(--color-purple) 65%, #fff); /* Navigation Accent */ --color-nav-active: #90EA4F; } /* ================================================================================== */ /* == General Styles ================================================================ */ /* ================================================================================== */ html, body { background: var(--bg-body); font-size: 14px; line-height: 1.35; font-family: 'vo-font', Helvetica Neue, Arial, sans-serif; color: var(--text-default); } a { text-decoration: none; color: var(--color-primary); transition: all 0.218s; } a:hover { color: var(--color-red); } h1, h2, h3, h4 ,h5 { font-weight: 600; color: var(--text-darkest); margin: 0; } h1 { font-size: 26px; } h2 { font-size: 18px; margin-bottom: 13px; } input, textarea { height: 40px; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; font-family: 'vo-font'; color: var(--text-darkest); font-size: 14px; line-height: 1.35; font-weight: 600; padding: 0 13px; } input:focus, textarea:focus { outline: none; border-color: var(--color-primary) !important; } input::placeholder, textarea::placeholder { color: var(--text-lightest); } input.sm { height: 31px; border-radius: 3px; font-size: 12px; line-height: 1.5; padding: 5px 10px; } /* Loading Element */ .cnd-waiting-for-results, .waiting-for-results { height: 300px; background: url(../../img/loader.gif) no-repeat center; background-size: 34px; } /* No Results */ .cnd-no-results, .no-results { padding: 20px; } .no-results.no-results--no-pad { padding: 0px; } /* Tooltip */ .tooltip { display: inline-block; width: 12px; height: 12px; background: var(--color-primary); border-radius: 50%; line-height: 13px; font-size: 11px; text-align: center; color: #fff; font-weight: bold; vertical-align: 1px; margin-left: 3px; cursor: help; } .ui-tooltip { width: 300px; background: var(--text-darkest); border-radius: 5px; box-shadow: 0px 2px 5px rgba(0,0,0,0.3); color: rgba(255,255,255,0.75); font-size: 11px; line-height: 1.35em; padding: 15px 20px; } /* Video Tooltip */ .tooltip.tooltip--video { display: inline-block; width: 15px; height: 12px; background: var(--color-red) url(../../img/icon-video-play.svg) no-repeat center; background-size: 10px; border-radius: 2px; line-height: 13px; font-size: 11px; text-indent: -9999px; color: #fff; font-weight: bold; vertical-align: 1px; margin-left: 3px; cursor: help; } /* Edit Buttons */ span.edit, a.edit { font-weight: 600; color: var(--color-red); cursor: pointer; } /* Error Message */ .error-message { background: var(--color-yellow2); border-radius: 4px; color: var(--text-darkest); font-weight: 600; padding: 20px; margin-bottom: 40px; } .error-message:before { content: "ERROR: "; float: left; font-weight: 700; margin-right: 5px; } .error-message.error-message--no-title:before { display: none; } .page-header + .error-message { margin: 40px 40px 0 40px; } /* For when an error message follows the page title. */ .block .error-message { padding: 15px; margin-bottom: 20px; } /* For error message inside a block. */ /* Note Message */ .note-message { background: var(--color-blue2); border-radius: 4px; color: #fff; font-weight: 600; padding: 20px; margin-bottom: 40px; } .note-message:before { content: "Note: "; font-weight: 700; } .note-message a { color: inherit; text-decoration: underline; } .note-message.note-message--no-title:before { display: none; } .block .note-message { padding: 15px; margin-bottom: 20px; } /* For success message inside a block. */ /* Success Message */ .success-message { background: var(--color-blue2); border-radius: 4px; color: #fff; font-weight: 600; padding: 20px; margin-bottom: 40px; } .success-message:before { content: "Success: "; font-weight: 700; } .success-message.success-message--no-title:before { display: none; } .block .success-message { padding: 15px; margin-bottom: 20px; } /* For success message inside a block. */ /* Warning Message */ .warning-message { background: var(--color-yellow3); border-radius: 4px; color: #fff; font-weight: 600; padding: 20px; margin-bottom: 40px; } .warning-message:before { content: "Warning: "; font-weight: 700; } .warning-message.warning-message--no-title:before { display: none; } .block .warning-message { padding: 15px; margin-bottom: 20px; } /* For success message inside a block. */ /* Notification Success Message */ .notification-success-message { background: var(--color-blue2); border-radius: 4px; color: #fff; font-weight: 600; padding: 20px; margin-bottom: 40px; } .notification-success-message:before { content: "Success: "; font-weight: 700; } .notification-success-message.notification-success-message--no-title:before { display: none; } .block .notification-success-message { padding: 15px; margin-bottom: 20px; } /* For success message inside a block. */ /* Notification Error Message */ .notification-error-message { background: var(--color-yellow2); border-radius: 4px; color: var(--text-darkest); font-weight: 600; padding: 20px; margin-bottom: 40px; } .notification-error-message:before { content: "ERROR: "; float: left; font-weight: 700; margin-right: 5px; } .notification-error-message.notification-error-message--no-title:before { display: none; } .block .notification-error-message { padding: 15px; margin-bottom: 20px; } /* For error message inside a block. */ /* Embedded Video Container */ .video-container { height: 0; max-width: 100%; overflow: hidden; padding-bottom: 56.25%; position: relative; } .video-container iframe, .video-container object, .video-container embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ================================================================================== */ /* == Site Layout =================================================================== */ /* ================================================================================== */ html, body { height: 100%; } body { min-width: 900px; } .site-wrapper { min-height: calc(100% - 80px); position: relative; } .site-wrapper:after { content: ""; display: table; clear: both; } .site-nav { float: left; clear: both; width: 220px; height: 100%; position: absolute; top: 0; transition: all 1s; } .site-main { float: right; width: calc(100% - 220px); transition: all 1s; } /* Nav collapsed */ .nav-collapsed .site-nav { width: 80px; } .nav-collapsed .site-main { width: calc(100% - 80px); } /* Auto Save Indicator */ #vo-async-progress { /* background: rgba(0,0,0,0.25); */ width: calc(100% - 40px); height: 25px; border-radius: 5px; text-indent: -9999px; margin: 20px auto 0 auto; opacity: 0; transition: opacity 0.5s; } #vo-async-progress .loader { width: 25px; margin: 0px auto; position: relative; } #vo-async-progress .loader:before { content:''; display: block; padding-top: 100%; } #vo-async-progress .loader svg { height: 100%; width: 100%; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #vo-async-progress svg .loader_rotation, #vo-async-progress svg .loader_path { stroke-linecap: square; stroke-width: 3; } #vo-async-progress .loader_path { stroke: #ffffff; opacity: 0; transition: opacity 0.5s, stroke-dashoffset 0.5s; } #vo-async-progress .loader_background { fill: var(--color-green2); opacity: 0; transition: opacity 0.5s, stroke-dashoffset 0.5s; } #vo-async-progress .loader_rotation { stroke: var(--color-green2); stroke-dasharray: 1,200; stroke-dashoffset: 0; transform-origin: bottom right; transition: opacity 0.5s; animation: dash 1.5s ease-in-out infinite, rotate 2s linear infinite; } #vo-async-progress.saving, #vo-async-progress.saved { opacity: 1; } #vo-async-progress.saved .loader .loader_path, #vo-async-progress.saved .loader .loader_background { stroke-dashoffset: 0; opacity: 1; } #vo-async-progress.saved .loader .loader_rotation { opacity: 0; } @keyframes rotate { 100%{ transform: rotate(360deg); } } @keyframes dash { 0%{ stroke-dasharray: 1,200; stroke-dashoffset: 0; } 50%{ stroke-dasharray: 89,200; stroke-dashoffset: -35px; } 100%{ stroke-dasharray: 89,200; stroke-dashoffset: -124px; } } /* ================================================================================== */ /* == Site Header =================================================================== */ /* ================================================================================== */ .site-header { height: 80px; background: var(--color-primary); background: linear-gradient(to bottom, var(--color-primary) 0%,#4260b9 100%); line-height: 80px; color: #fff; padding: 0 30px; } .site-header h1 { float: left; font-size: 26px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); margin: 0; } .site-header h1 a { color: #fff; } .site-header .tagline { float: left; height: 80px; font-size: 13px; font-weight: normal; color: #fff; text-shadow: none; line-height: 86px; margin-left: 14px; opacity: 0.7; } .site-header .site-switcher { float: left; margin-left: 15px; } .site-header .site-switcher .bootstrap-select { width: 26px; height: 26px; border-radius: 3px; } .site-header .site-switcher .bootstrap-select .dropdown-toggle { width: 100%; height: 100%; background: linear-gradient(180deg, rgba(58,70,108,0.57) 0%, rgba(38,50,88,0.55) 100%); border-radius: 3px; border: none; text-indent: -9999px; padding: 0; } .site-header .site-switcher .bootstrap-select .dropdown-toggle .caret { width: 100%; height: 100%; background: url(../../img/icon-arrow-down-white.svg) no-repeat center 4px; background-size: 20px; margin: 0; top: 0; left: 0; right: 0; opacity: 0.95; } .site-header .site-switcher .bootstrap-select .dropdown-toggle:hover { background: linear-gradient(180deg, rgba(58,70,108,0.8) 0%, rgba(38,50,88,0.8) 100%); } .site-header .site-switcher .bootstrap-select.open > .dropdown-toggle { background: linear-gradient(180deg, rgba(58,70,108,1) 0%, rgba(38,50,88,1) 100%); } .site-header .site-switcher ul li { width: 100%; } .site-header .site-switcher ul li:before { display: none; } .site-header ul { float: right; } .site-header ul li { float: left; } .site-header ul li:before { content: "|"; padding-right: 9px; margin-left: 10px; } .site-header ul li:first-child:before { display: none; } .site-header ul li#help { width: 40px; background: url(../../img/icon-help.svg) no-repeat center 30px; text-indent: -9999px; margin-left: 5px; opacity: 0.6; transition: opacity .2s; } .site-header ul li#help:before { display: none; } .site-header ul li#help a { display: block; } .site-header ul li#help:hover { opacity: 1; } .site-header ul a { display: inline-block; color: #fff; } /* ================================================================================== */ /* == Sidebar Navigation ============================================================ */ /* ================================================================================== */ /* Navigation */ .site-nav { height: calc(100% - 80px); height: 100%; background: var(--color-primary); background: linear-gradient(to bottom, #3A466C 0%,#263258 100%); position: absolute; top: 0px; transition: width 1s; } .site-nav.sticky { height: 100vh; position: sticky; } .site-nav-upper { overflow: hidden; /* position: -webkit-sticky; position: sticky; */ padding-top: 20px; top: 0; } .site-nav .nav li { position: relative; } .site-nav .nav li span { display: block; height: 46px; background-repeat: no-repeat; background-position: 0px center; overflow: hidden; line-height: 46px; color: rgba(255,255,255,0.8); padding: 0 0 0 30px; cursor: pointer; transition: text-indent 1s; } .site-nav .nav li span:hover { background: rgba(0,0,0,0.1); } .site-nav .nav li span a { display: block; color: rgba(255,255,255,0.8); } .site-nav .nav li { width: 220px; } .site-nav .nav li > ul { display: none; background: rgba(0,0,0,0.25); font-size: 13px; padding: 10px 0; } .site-nav .nav li > ul a { display: block; color: rgba(255,255,255,0.8); padding: 8px 30px; } .site-nav .nav li > ul li.active:before { content: ""; width: 6px; height: 6px; background: var(--color-blue2); border-radius: 50%; position: absolute; top: 12px; left: 14px; } .site-nav .nav li svg { float: left; height: 46px; width: 20px; margin-right: 17px; } .site-nav .nav li svg path { fill: #fff; opacity: 0.8; } .site-nav .nav li.active svg path { fill: var(--color-nav-active); opacity: 1; } .site-nav .nav li#site-nav-ai svg { margin-left: 1px; margin-right: 16px; } /* This is just to optically align the AI icon */ .site-nav .nav li .message-counter { float: right; min-width: 16px; background: var(--color-red); border-radius: 3px; font-size: 10px; font-weight: 600; line-height: 12px; text-align: center; padding: 2px 3px 1px 3px; margin-right: 30px; margin-top: 14px; } .site-nav .nav li li .message-counter { color: #fff; margin-top: 0; position: absolute; top: 9px; right: 0; } /* Active Page */ .site-nav .nav li.active span { background-color: rgba(0,0,0,0.1); border-left: 4px solid var(--color-nav-active); padding-left: 26px; } body#index .site-nav .nav li#site-nav-dash span, body.ana .site-nav .nav li#site-nav-ana span, body.cmc .site-nav .nav li#site-nav-cmc span, body.cmn .site-nav .nav li#site-nav-cmn span, body.cms .site-nav .nav li#site-nav-cms span, body.core .site-nav .nav li#site-nav-core span, body.ppl .site-nav .nav li#site-nav-ppl span { background-color: rgba(0,0,0,0.1); border-left: 4px solid var(--color-nav-active); padding-left: 26px; } /* Nav Collapsed */ .nav-collapsed .site-nav .nav span { text-indent: 200px; } .site-nav .nav li:nth-child(1) span { } .site-nav .nav li:nth-child(2) span { transition-delay: .075s; } .site-nav .nav li:nth-child(3) span { transition-delay: .15s; } .site-nav .nav li:nth-child(4) span { transition-delay: .225s; } .site-nav .nav li:nth-child(5) span { transition-delay: .3s; } .site-nav .nav li:nth-child(6) span { transition-delay: .375s; } .site-nav .nav li:nth-child(7) span { transition-delay: .45s; } .site-nav .nav li:nth-child(8) span { transition-delay: .52s; } /* Sticky Footer */ .site-nav-footer { height: 90px; overflow: hidden; position: -webkit-sticky; position: sticky; top: calc(100vh - 90px); } /* Nav Toggle */ .site-nav .toggle-nav { height: 46px; background: url(../../img/icon-arrow-left-white.svg) no-repeat 25px; background-size: 18px; background-image: url(../../img/icon-arrow-left-white.svg), url(../../img/icon-arrow-left-white.svg); background-repeat: no-repeat, no-repeat; background-position: 25px, 30px; color: #fff; font-size: 11px; line-height: 46px; padding-left: 47px; cursor: pointer; opacity: 0.5; } .site-nav .toggle-nav span { transition: opacity 2s; transition-delay: 1s; } .nav-collapsed .site-nav .toggle-nav { background-image: url(../../img/icon-arrow-right-white.svg), url(../../img/icon-arrow-right-white.svg); background-repeat: no-repeat, no-repeat; background-position: 29px, 34px; } .nav-collapsed .site-nav .toggle-nav span { opacity: 0; transition: opacity .2s; } /* Site Switcher - NOTE: this is now gone via GitHub issue #584 */ .site-nav .bootstrap-select { width: 178px; margin: 3px 0 10px 20px !important; transition: all 1s; } .site-nav .bootstrap-select li a { padding: 2px 15px; } .site-nav .bootstrap-select .dropdown-toggle { background-color: rgba(0,0,0,0.1); border-color: transparent; color: rgba(255,255,255,0.8); /* box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15); */ } /* Site Switcher - When sidebar is closed - NOTE: this is now gone via GitHub issue #584 */ .nav-collapsed .site-nav .bootstrap-select { width: calc(100% - 40px); } .nav-collapsed .site-nav .bootstrap-select .dropdown-toggle { background-image: url(../../img/nav-site.svg); background-repeat: no-repeat; background-position: center; background-size: 20px; text-indent: -9999px; padding: 0; } .nav-collapsed .site-nav .bootstrap-select .caret { display: none; } /* ================================================================================== */ /* == Page Parts ==================================================================== */ /* ================================================================================== */ /* Page Header */ .page-header { background: #fff; border-bottom: 1px solid var(--color-border); line-height: 80px; padding: 0 40px; } .page-header h1 { float: left; font-size: 26px; margin-right: 18px; } .page-header:after { content: ""; display: table; clear: both; } .page-header .tagline { font-size: 13px; color: var(--color-red); font-style: italic; vertical-align: middle; margin-left: 8px; } .page-header .tagline.tagline--blue { color: var(--color-blue2); } /* Page Header - Back Button */ .page-header .go-back, .page-header .action-return { float: left; width: 40px; height: 40px; background: var(--bg-body) url(../../img/icon-back-arrow.svg) no-repeat center; border: none; border-radius: 3px; text-indent: -9999px; margin: 20px 20px 0 0; cursor: pointer; } .page-header .go-back:hover, .page-header .action-return:hover { animation: backButton 1.5s linear infinite; } @keyframes backButton { 0% { background-position: center center; } 20% { background-position: 10px center; } 40% { background-position: center center; } 80% { background-position: 13px center; } 100% { background-position: center center; } } /* Page Body */ .page-body { min-height: calc(100vh - 161px); padding: 40px; padding-bottom: 0; position: relative; } .page-body--with-filters { float: right; width: calc(100% - 210px); } .page-body--with-sidebar { float: left; width: calc(100% - 210px); position: relative; } .page-body--with-sidebar:after { content: ""; width: 210px; height: 100%; background: #fff; border-left: 1px solid var(--color-border); position: absolute; top: 0; right: -210px; z-index: 1; } /* This creates a fake sidebar background that is 100% tall */ /* Page Tabs */ .page-tabs { height: 45px; background: #FFF; border-bottom: 1px solid var(--color-border); -webkit-font-smoothing: antialiased; margin: -41px -40px 40px -40px; position: relative; position: relative; z-index: 2; } .page-tabs .ui-tabs-nav { height: 45px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 1px 40px 0 40px; } .page-tabs .ui-tabs-nav::-webkit-scrollbar { display: none; } .page-tabs:before { content: ""; width: 100px; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%), linear-gradient(to right, rgba(255,255,255,0) 20%, #fff 100%); position: absolute; top: 0; right: 0; z-index: 9; pointer-events: none; } .page-tabs .ui-tabs-nav li { display: inline-block; height: 100%; border: 1px solid var(--color-border); border-bottom: none; border-radius: 4px 4px 0 0; font-weight: 600; margin-right: 7px; position: relative; } .page-tabs .ui-tabs-nav li a { display: block; outline: 0; line-height: 44px; color: var(--text-default); padding: 0 20px; } .page-tabs .ui-tabs-nav li.ui-tabs-active { background: var(--bg-body); } .page-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--text-darkest); } .page-tabs .ui-tabs-nav li.ui-tabs-active:after { content: ""; width: 100%; height: 2px; background: var(--bg-body); position: absolute; bottom: -1px; } .page-body--with-sidebar .page-tabs:after { content: ""; width: 210px; height: 45px; background: #FFF; border-bottom: 1px solid var(--color-border); position: absolute; right: -210px; top: 0; } /* Page Title Message */ .page-title { text-align: center; margin-bottom: 40px; } .page-title h1 { font-weight: normal; } .page-title p { font-size: 16px; color: var(--text-table-header); margin-top: 5px; } /* Page Description */ .page-description { margin-bottom: 40px; } .page-description p { margin-bottom: 14px; } .page-description p:last-child { margin: 0; } /* Copy-to-clipboard icon button (e.g. masked API private keys) */ .copy-key { display: inline-block; width: 20px; height: 20px; background: url(../../img/icon-copy.svg) no-repeat center; background-size: 14px; border: none; vertical-align: middle; margin-left: 6px; padding: 0; cursor: pointer; } /* API Key dialog: Name fills the remaining width, Status sits fixed-width on the right */ #api-key-dialog .api-key-name-status { display: flex; align-items: center; gap: 16px; margin-bottom: 15px; } #api-key-dialog .api-key-name-status .form-row { margin-bottom: 0; } #api-key-dialog .api-key-name { flex: 1 1 auto; } #api-key-dialog .api-key-name input { width: 100%; } #api-key-dialog .api-key-status { flex: 0 0 auto; } /* API Key dialog: Content's advanced list/detail/metadata sub-rules panel */ #api-key-dialog .cnd-rules-toggle { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; font-size: 11px; line-height: 1; color: var(--text-lightest); padding: 4px 9px; margin-left: 8px; vertical-align: 1px; cursor: pointer; } #api-key-dialog .cnd-rules-toggle:hover:enabled { border-color: var(--color-primary); color: var(--color-primary); } #api-key-dialog .cnd-rules-toggle:disabled { opacity: 0.4; cursor: default; } #api-key-dialog .cnd-rules-row > td { background: var(--bg-gray); } #api-key-dialog .cnd-rules-panel { padding: 4px 0; } #api-key-dialog .cnd-rules-hint { color: var(--text-lightest); font-size: 12px; margin-bottom: 8px; } #api-key-dialog .cnd-option { display: flex; align-items: center; font-weight: normal; color: var(--text-darkest); gap: 8px; margin-bottom: 7px; cursor: pointer; } #api-key-dialog .cnd-option:last-child { margin-bottom: 0; } #api-key-dialog .cnd-option .checkbox { display: block; flex: 0 0 16px; } #api-key-dialog .cnd-option em { color: var(--text-lightest); font-size: 12px; font-style: normal; } #api-key-dialog .cnd-metadata-group { border-left: 2px solid var(--color-border); margin-top: 12px; padding-left: 16px; } #api-key-dialog .cnd-metadata-group.disabled { opacity: 0.4; pointer-events: none; } /* Page Note */ .page-note { background: url(../../img/icon-info.svg) no-repeat 16px center; background-size: 30px; background-color: var(--notice-warning-bg); border-radius: 4px; border: 1px solid var(--notice-warning-border); color: var(--notice-warning-text); padding: 20px 20px 20px 59px; margin-bottom: 40px; } .page-note:before { content: "Note: "; font-weight: bold; } a.page-note:hover { color: color-mix(in srgb, var(--notice-warning-text) 80%, #000); } /* the whole box is a link on the dashboard */ /* Button Footer independent at bottom of page */ .page-button-footer { clear: both; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; padding: 20px; position: relative; } /* ================================================================================== */ /* == Floating Save Prompt ========================================================== */ /* ================================================================================== */ .vo-save-prompt { display: flex; justify-content: center; position: fixed; left: 220px; right: 0; bottom: 24px; z-index: 900; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(18px); transition: left 1s, opacity 1000ms ease-out, transform 1000ms ease-out, visibility 0s linear 1000ms; } .vo-save-prompt--visible { opacity: 1; visibility: visible; transform: translateY(0); transition: left 1s, opacity 1000ms ease-out, transform 1000ms ease-out, visibility 0s; } .nav-collapsed .vo-save-prompt { left: 80px; } /* The wrapper spans the content area, so only the box itself may take clicks. */ .vo-save-prompt-box { display: flex; justify-content: space-between; align-items: center; min-width: 600px; max-width: calc(100% - 80px); background: #fff; border-radius: 6px; box-shadow: 0 4px 5px rgba(42, 44, 92, 0.16), 0 0 25px rgba(42, 44, 92, 0.1), 0 0 50px rgba(42, 44, 92, 0.1), 0 0 0 1px var(--color-border); font-family: 'vo-font'; font-weight: 600; font-size: 14px; color: var(--text-darkest); gap: 20px; padding: 14px 16px 14px 20px; pointer-events: auto; } .vo-save-prompt-message { color: var(--text-darkest); line-height: 40px; font-weight: 400; } .vo-save-prompt-message--error { color: var(--color-red2); } .vo-save-prompt-message .vo-save-prompt-field-link { color: var(--color-red2); text-decoration: underline; font-weight: 600; } .vo-save-prompt-message .vo-save-prompt-field-link:hover { color: var(--text-darkest); } .vo-save-prompt-actions { display: flex; align-items: center; flex-shrink: 0; gap: 10px; } .vo-save-prompt-actions .btn { margin: 0; } .vo-save-prompt-actions .vo-save-prompt-save { min-width: 74px; } .vo-save-prompt-actions .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Check mark for the saved confirmation, drawn rather than loaded so it needs no asset. */ .vo-save-prompt-check { display: inline-block; width: 14px; height: 8px; border-left: 2px solid var(--color-green); border-bottom: 2px solid var(--color-green); margin-right: 10px; transform: rotate(-45deg) translate(1px, -3px); } /* A bottom-pinned box covers the last rows of the page, so pad the content out from under it while it is up. .page-body sets padding-bottom:0, hence the override. The shift is at the very bottom of the scroll container and is invisible unless already scrolled to the end. */ body.vo-save-prompt-active .page-body { padding-bottom: 80px; } /* ================================================================================== */ /* == Page Sidebars ================================================================= */ /* ================================================================================== */ /* Page Sidebar */ .sidebar { float: right; min-height: calc(100vh - 161px); width: 210px; background: #fff; border-left: 1px solid var(--color-border); padding: 20px; position: relative; z-index: 2; } .sidebar--under-tabs { margin-top: 45px; } .sidebar--sticky { position: sticky; top: 0; } .sidebar h2 { font-size: 13px; text-transform: uppercase; margin-bottom: 9px; } .sidebar .controls-list > li { border-top: 1px solid var(--color-border); padding-top: 28px; margin-bottom: 30px; } .sidebar .controls-list > li:first-child { border: none; padding-top: 0; } .sidebar .controls-list > li:after { content: ""; display: table; clear: both; } .sidebar .controls-list > li > ul > li { margin-bottom: 10px; } .sidebar .controls-list > li > ul > li:last-child { margin-bottom: 0; } .sidebar .version-message { background: var(--color-yellow2); color: var(--text-darkest); font-size: 12px; font-style: italic; margin: -20px -20px 20px -20px; padding: 12px 20px 11px 20px; } .sidebar .btn { width: 100%; height: 34px !important; line-height: 34px; font-size: 13px; text-align: left; font-weight: normal; position: relative; } .sidebar .btn-default { background: var(--bg-body); background: linear-gradient(to bottom, var(--bg-subtle) 0%,var(--bg-table-header) 100%); border-color: var(--color-border); color: var(--text-default); } .sidebar .btn-primary { } .sidebar .bootstrap-select { width: 100%; } .sidebar .bootstrap-select .dropdown-menu { max-width: 100%; } .sidebar input { width: 100%; height: 34px; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; font-size: 13px; color: var(--text-default); padding: 0 10px; } .sidebar .btn-group--split { width: 100%; } .sidebar .btn-group--split .btn { width: calc(100% - 25px); line-height: 25px; } .sidebar .btn-group--split .btn.unclickable { background: var(--bg-subtle); } .sidebar .btn-group--split .dropdown-toggle { width: 26px; } .sidebar .btn-sidebar-processing:after { content: ""; width: 14px; height: 14px; background: url(../../img/loader9b.svg) no-repeat; background-size: 100%; margin-top: -7px; position: absolute; right: 10px; top: 50%; } .sidebar .btn-primary.btn-sidebar-processing:after { background: url(../../img/loader9.svg) no-repeat; background-size: 100%; } /* Buttons with Icons */ .sidebar .btn.save, .sidebar .btn.vo-save-order-draft { background: url(../../img/icon-save.svg) no-repeat 10px center, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.btn-primary.save { background-image: url(../../img/icon-save-white.svg); background-position: 10px center; background-color: var(--color-primary); border-color: var(--color-primary); } .sidebar .btn.preview { background: url(../../img/icon-preview.svg) no-repeat 10px center, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.publish { background-image: url(../../img/icon-publish.svg); background-repeat: no-repeat; background-position: 10px center; padding-left: 38px; } .sidebar .btn.send-test, .sidebar .btn.resend-invoice, .sidebar .btn.vo-email-invoice { background: url(../../img/icon-send.svg) no-repeat 10px center, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.vo-generate-invoice { background: url(../../img/icon-document.svg) no-repeat 11px center, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.unpublish { background-image: url(../../img/icon-restore.svg); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; padding-left: 38px; } .sidebar .btn.send-settings { background: url(../../img/icon-settings.svg) no-repeat 10px center, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.delete, .sidebar .btn.vo-delete-order { background: url(../../img/icon-trash.svg) no-repeat 12px 10px, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.vo-print-invoice, .sidebar .btn.vo-print-packing-slip { background: url(../../img/icon-print.svg) no-repeat 10px center, url(../../img/btn-bg.png) repeat-x; background-size: auto, 32px 100%; padding-left: 38px; } .sidebar .btn.add-split { background: url(../../img/icon-split.svg) no-repeat 9px 9px, url(../../img/btn-bg.png) repeat-x; background-size: 16px, 32px 100%; padding-left: 38px; } .sidebar .date-display { background-image: url(../../img/icon-calendar.svg); background-repeat: no-repeat; background-position: 10px center; padding-left: 32px; } .sidebar .btn.vo-start-new-ship-package, .sidebar .btn.vo-manual-ship-package, .sidebar .btn.vo-manual-edit-ship-package { background: url(../../img/icon-package.svg) no-repeat 10px center, url(../../img/btn-bg.png) repeat-x; background-size: 15px, 32px 100%; padding-left: 38px; } .sidebar .toggle-option { font-size: 13px; padding-left: 1px; } .sidebar .toggle-option strong { color: var(--text-darkest); font-weight: 600; margin-right: 2px; } .sidebar .toggle-option .toggle-switch { float: right; } .sidebar #publish-date > li { float: left; margin-right: 9px; margin-bottom: 0; } .sidebar #publish-date > li:first-child { margin: 0 0 10px 0; } .sidebar #publish-date > li:last-child { margin: 0; } .sidebar #publish-date .dropdown-toggle { width: 50px; padding: 0 20px 0 10px; } .sidebar #publish-date .dropdown-toggle .caret { right: 8px; } .sidebar .featured-image { } .sidebar .featured-image .no-image { background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; line-height: 100px; text-align: center; } .sidebar .featured-image img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: 3px; } .sidebar .featured-image .set-image, .sidebar .featured-image .change-image { display: block; font-size: 12px; color: var(--color-blue2); margin-top: 7px; margin-bottom: -5px; cursor: pointer; } /* Tags List */ .tag-builder .tag-list { clear: both; overflow: hidden; margin-top: 10px; margin-bottom: -7px; } .tag-builder .tag-list li { float: left; font-weight: 600; line-height: 24px; margin-right: 20px; } .tag-builder .tag-list li .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; cursor: pointer; } .tag-builder .tag-list li .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } .tag-builder .tag-list li .delete:focus { outline: none; } /* Filter Sidebar */ .filters { float: left; min-height: calc(100vh - 160px); width: 210px; -webkit-font-smoothing: antialiased; padding: 40px 0 40px 40px; } .filters h3 { font-size: 13px; text-transform: uppercase; color: var(--text-table-header); margin-bottom: 9px; } .filters h3 .collapse { display: none !important; } /* This hides the collapse buttons */ .filters h3 .cancel { float: right; width: 16px; height: 16px; background: url(../../img/icon-tag-x.svg) no-repeat center right; background-size: 50%; cursor: pointer; } .filters h3 .cancel span { display: none; } .filters .cnd-header { margin-bottom: 28px; } .filters .cnd-searchable-list { position: relative; } .filters .cnd-searchable-list .cnd-list { max-height: 216px; overflow-y: scroll; } .filters .cnd-searchable-list:before { content: ""; width: 100%; height: 8px; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, var(--bg-body) 100%); position: absolute; left: 0; top: 57px; z-index: 1; } .filters .cnd-searchable-list:after { content: ""; width: 100%; height: 10px; background: linear-gradient(0deg, var(--bg-body) 0%, rgba(255,255,255,0) 100%); position: absolute; left: 0; bottom: 0; z-index: 1; } .filters .vo-search-context { margin: -4px 0 5px -2px; } .filters .vo-search-context input { height: 30px; width: calc(100% + 2px); background: #fff url(../../img/icon-search.svg) no-repeat 6px center; background-size: 10px; font-size: 12px; padding: 0 9px 0 20px; } .filters .vo-search-context input::placeholder { color: var(--text-lightest); } .filters .cnd-list li { padding: 3px 0 3px 18px; position: relative; cursor: pointer; } .filters .cnd-list li:before { content: ""; width: 8px; height: 8px; background: var(--color-primary); border-radius: 2px; position: absolute; top: 7px; left: 0; } .filters .cnd-list .ui-state-active { background: none; color: inherit; font-weight: 600; } .filters .cnd-list li.ui-state-active:before { background: var(--color-green); } .filters .vo-ui-info span { display: inline-block; background: var(--bg-table-header) url(../../img/icon-info.svg) no-repeat left 6px center; background-size: 15px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; font-style: italic; font-weight: 600; color: var(--text-table-header); padding: 5px 9px 5px 25px; cursor: pointer; } .filters .vo-ui-info span:hover { border-color: var(--checkbox-border); } /* Message Schedule */ .sidebar .days-range {} .sidebar .days-range li { float: left; width: calc(50% - 17px); text-align: center; } .sidebar .days-range li:nth-child(2) { width: 34px; line-height: 33px; } .sidebar .days-range li[style*="display: none"] + li.vo-days-to:not([style*="display: none"]) { width: 100%; } .sidebar .days-range li[style*="display: none"] + li.vo-days-to:not([style*="display: none"]) input { float: left; width: calc(50% - 17px); } .sidebar .days-range .txt-days-before { float: left; line-height: 33px; font-size: 13px; margin-left: 5px; } .sidebar .days-range .switch-option { display: block; clear: both; width: 100%; text-align: left; margin-top: -2px; } .sidebar .days-range .switch-option span { font-size: 12px; color: var(--color-blue2); cursor: pointer; } /* The time range slider for VigoAlessi */ .filters .cnd-slider-range { margin-top: 7px; } .filters label { display: flex; justify-content: space-between; } /* ================================================================================== */ /* == Buttons ======================================================================= */ /* ================================================================================== */ /*! * Bootstrap v3.3.7 (http://getbootstrap.com) * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=cf50894a7467a27d095f0278c7d8e943) * Config saved to config.json and https://gist.github.com/cf50894a7467a27d095f0278c7d8e943 */ .btn { display: inline-block; margin-bottom: 0; font-weight: 600; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 0 15px; font-size: 14px; line-height: 38px; border-radius: 3px; user-select: none; font-family: 'vo-font'; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { /* outline: 5px auto -webkit-focus-ring-color; */ outline: 0; outline-offset: -2px; } .btn:hover, .btn:focus, .btn.focus { color: var(--text-darkest); text-decoration: none; } .btn:active, .btn.active { outline: 0; background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .btn.disabled, .btn[disabled] { cursor: not-allowed; opacity: 0.65; filter: alpha(opacity=65); box-shadow: none; } a.btn.disabled { pointer-events: none; } .btn.unclickable { pointer-events: none; } /* Button Default */ .btn-default { color: var(--text-darkest); background-color: #ffffff; border-color: var(--checkbox-border); } .btn-default:focus, .btn-default.focus { color: var(--text-darkest); background-color: var(--bg-table-header); border-color: var(--color-border-strong); } .btn-default:hover { color: var(--text-darkest); background-color: var(--bg-table-header); border-color: var(--color-border-strong); } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: var(--text-darkest); background-color: var(--bg-table-header); border-color: var(--color-border-strong); } .btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus { color: var(--text-darkest); background-color: var(--bg-table-header); border-color: var(--color-border-strong); } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled:hover, .btn-default[disabled]:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, .btn-default.disabled.focus, .btn-default[disabled].focus { background-color: #ffffff; border-color: var(--checkbox-border); } .btn-default .badge { color: #ffffff; background-color: var(--text-darkest); } /* Button Primary */ .btn-primary { color: #ffffff; background-color: var(--color-primary); border-color: var(--color-primary); } .btn-primary:focus, .btn-primary.focus { color: #ffffff; background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-primary:hover { color: #ffffff; background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #ffffff; background-color: var(--color-primary-active); border-color: var(--color-primary-active); } .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus { color: #ffffff; background-color: var(--color-primary-active); border-color: var(--color-primary-active); } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled:hover, .btn-primary[disabled]:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus { background-color: var(--color-primary); border-color: var(--color-primary); } .btn-primary .badge { color: var(--color-primary); background-color: #ffffff; } /* Button Success */ .btn-success { color: #ffffff; background-color: var(--color-green); border-color: var(--color-green); } .btn-success:focus, .btn-success.focus { color: #ffffff; background-color: var(--color-green-hover); border-color: var(--color-green-hover); } .btn-success:hover { color: #ffffff; background-color: var(--color-green-hover); border-color: var(--color-green-hover); } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #ffffff; background-color: var(--color-green-active); border-color: var(--color-green-active); } .btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus { color: #ffffff; background-color: var(--color-green-active); border-color: var(--color-green-active); } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background-image: none; } .btn-success.disabled:hover, .btn-success[disabled]:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, .btn-success.disabled.focus, .btn-success[disabled].focus { background-color: var(--color-green); border-color: var(--color-green); } .btn-success .badge { color: var(--color-green); background-color: #ffffff; } /* Button Info */ .btn-info { color: #ffffff; background-color: var(--color-blue2); border-color: var(--color-blue2); } .btn-info:focus, .btn-info.focus { color: #ffffff; background-color: var(--color-blue2-hover); border-color: var(--color-blue2-hover); } .btn-info:hover { color: #ffffff; background-color: var(--color-blue2-hover); border-color: var(--color-blue2-hover); } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: #ffffff; background-color: var(--color-blue2-active); border-color: var(--color-blue2-active); } .btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus { color: #ffffff; background-color: var(--color-blue2-active); border-color: var(--color-blue2-active); } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; } .btn-info.disabled:hover, .btn-info[disabled]:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, .btn-info.disabled.focus, .btn-info[disabled].focus { background-color: var(--color-blue2); border-color: var(--color-blue2); } .btn-info .badge { color: var(--color-blue2); background-color: #ffffff; } /* Button Warning */ .btn-warning { color: #ffffff; background-color: var(--color-yellow2); border-color: var(--color-yellow2); } .btn-warning:focus, .btn-warning.focus { color: #ffffff; background-color: var(--color-yellow2-hover); border-color: var(--color-yellow2-hover); } .btn-warning:hover { color: #ffffff; background-color: var(--color-yellow2-hover); border-color: var(--color-yellow2-hover); } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: #ffffff; background-color: var(--color-yellow2-active); border-color: var(--color-yellow2-active); } .btn-warning:active:hover, .btn-warning.active:hover, .open > .dropdown-toggle.btn-warning:hover, .btn-warning:active:focus, .btn-warning.active:focus, .open > .dropdown-toggle.btn-warning:focus, .btn-warning:active.focus, .btn-warning.active.focus, .open > .dropdown-toggle.btn-warning.focus { color: #ffffff; background-color: var(--color-yellow2-active); border-color: var(--color-yellow2-active); } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background-image: none; } .btn-warning.disabled:hover, .btn-warning[disabled]:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus { background-color: var(--color-yellow2); border-color: var(--color-yellow2); } .btn-warning .badge { color: var(--color-yellow2); background-color: #ffffff; } /* Button Danger */ .btn-danger { color: #ffffff; background-color: var(--color-red2); border-color: var(--color-red2); } .btn-danger:focus, .btn-danger.focus { color: #ffffff; background-color: var(--color-red2-hover); border-color: var(--color-red2-hover); } .btn-danger:hover { color: #ffffff; background-color: var(--color-red2-hover); border-color: var(--color-red2-hover); } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #ffffff; background-color: var(--color-red2-active); border-color: var(--color-red2-active); } .btn-danger:active:hover, .btn-danger.active:hover, .open > .dropdown-toggle.btn-danger:hover, .btn-danger:active:focus, .btn-danger.active:focus, .open > .dropdown-toggle.btn-danger:focus, .btn-danger:active.focus, .btn-danger.active.focus, .open > .dropdown-toggle.btn-danger.focus { color: #ffffff; background-color: var(--color-red2-active); border-color: var(--color-red2-active); } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-image: none; } .btn-danger.disabled:hover, .btn-danger[disabled]:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus { background-color: var(--color-red2); border-color: var(--color-red2); } .btn-danger .badge { color: var(--color-red2); background-color: #ffffff; } /* Button Link */ .btn-link { color: var(--color-primary); font-weight: normal; border-radius: 0; } .btn-link, .btn-link:active, .btn-link.active, .btn-link[disabled] { background-color: transparent; box-shadow: none; } .btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { border-color: transparent; } .btn-link:hover, .btn-link:focus { color: var(--color-primary-hover); text-decoration: underline; background-color: transparent; } .btn-link[disabled]:hover, .btn-link[disabled]:focus { color: var(--text-lightest); text-decoration: none; } /* Button Processing */ .btn-processing { background-image: url(../../img/loader9.svg); background-size: auto 50%; background-repeat: no-repeat; background-position: center; color: rgba(0,0,0,0) !important; } /* Button Large */ .btn-lg, .btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } /* Button Small */ .btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* Button Extra Small */ .btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } /* Buttons in Tables */ table .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; display: block; } table .btn.dropdown-toggle { height: 30px; } /* Button Block */ .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 5px; } input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; } /* Caret */ .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; /* border-top: 4px dashed; border-top: 4px solid \9; border-right: 4px solid transparent; border-left: 4px solid transparent; */ background: url(../../img/icon-dropdown-arrow.svg) no-repeat; width: 8px; height: 6px; } /* Dropdowns */ .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left; background-color: #ffffff; border: 1px solid var(--color-border-strong); /* border: 1px solid rgba(0, 0, 0, 0.15); */ border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; } .dropdown-menu.pull-right, .dropdown-menu--right { right: 0; left: auto; } .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: var(--color-border); } .dropdown-menu > li > a { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 1.42857143; color: var(--text-darkest); white-space: nowrap; cursor: pointer; } .dropdown-menu > li > a.level0 { padding-left: 15px; } .dropdown-menu > li > a.level1 { padding-left: 30px; } .dropdown-menu > li > a.level2 { padding-left: 45px; } .dropdown-menu > li > a.level3 { padding-left: 60px; } .dropdown-menu > li > a.level4 { padding-left: 75px; } .dropdown-menu > li > a.level5 { padding-left: 90px; } .dropdown-menu > li > a.level6 { padding-left: 105px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; color: var(--text-darkest); background-color: var(--bg-table-header); } .dropdown-menu > li > a:hover { background: color-mix(in srgb, var(--color-blue2) 12%, #fff); box-shadow: inset 3px 0 0 var(--color-blue2); } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #ffffff; text-decoration: none; outline: 0; background-color: var(--color-primary); } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: var(--text-default); } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .open > .dropdown-menu { display: block; } .open > a { outline: 0; } .dropdown-menu-right { left: auto; right: 0; } .dropdown-menu-left { left: 0; right: auto; } .dropdown-header { display: block; padding: 3px 15px; font-size: 12px; line-height: 1.42857143; color: var(--text-default); white-space: nowrap; } .dropdown-backdrop { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 990; } .dropup .caret { /* border-top: 0; border-bottom: 4px dashed; border-bottom: 4px solid \9; */ content: ""; background: url(../../img/icon-dropdown-arrow-up.svg) no-repeat; width: 8px; height: 6px;} .dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 2px; } /* Button Groups */ .btn-group { position: relative; display: inline-block; vertical-align: middle; } .btn-group > .btn { position: relative; float: left; } .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 2; } .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px; } .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; } .btn-group > .btn:first-child { margin-left: 0; } .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } .btn-group > .btn-group { float: left; } .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { border-bottom-right-radius: 0; border-top-right-radius: 0; } .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; } .btn-group > .btn-lg + .dropdown-toggle { padding-left: 12px; padding-right: 12px; } .btn-group.open .dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } .btn-group.open .dropdown-toggle.btn-link { box-shadow: none; } .btn .caret { margin-left: 5px; } .btn-lg .caret { border-width: 5px 5px 0; border-bottom-width: 0; } .dropup .btn-lg .caret { border-width: 0 5px 5px; } .btn-group > .btn + .dropdown-toggle .caret { margin: 0; } [data-toggle="buttons"] > .btn input[type="radio"], [data-toggle="buttons"] > .btn-group > .btn input[type="radio"], [data-toggle="buttons"] > .btn input[type="checkbox"], [data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } /* More button */ .btn-more { position: absolute; right: 20px; top: 20px; } .btn-more .dropdown-toggle { width: 26px; height: 26px; background: var(--bg-gray) url(../../img/icon-more.svg) no-repeat center !important; border: 1px solid var(--color-border); border-radius: 50%; text-indent: -9999px; padding: 0; } .btn-more .dropdown-menu { min-width: 100px; background: var(--bg-gray); font-size: 13px; padding: 0; left: auto; right: 0; } .btn-more li { border-bottom: 1px solid var(--color-border); padding: 8px 10px; margin: 0; /* color: var(--text-darkest); */ cursor: pointer; } .btn-more li:last-child { border: none; } /* More button in tables */ .btn-table-more { margin-top: -13px; position: absolute; right: 20px; top: 50%; } .btn-table-more .dropdown-toggle { width: 26px; height: 26px !important; background: var(--bg-gray) url(../../img/icon-more.svg) no-repeat center !important; border: 1px solid var(--color-border); border-radius: 50%; text-indent: -9999px; padding: 0; } .btn-table-more .dropdown-menu { min-width: 100px; background: var(--bg-gray); font-size: 13px; padding: 0; left: auto; right: 0; } .btn-table-more li { border-bottom: 1px solid var(--color-border); padding: 8px 10px; margin: 0; /* color: var(--text-darkest); */ cursor: pointer; } .btn-table-more li:last-child { border: none; } /* ================================================================================== */ /* == Select Menus ================================================================== */ /* ================================================================================== */ /*! * Bootstrap-select v1.12.2 (http://silviomoreto.github.io/bootstrap-select) */ select.bs-select-hidden, select.selectpicker { display: none !important; } .bootstrap-select > .dropdown-toggle { width: 100%; padding-right: 25px; z-index: 1; height: 40px; } .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: var(--text-lightest); } .bootstrap-select > select { position: absolute !important; bottom: 0; left: 50%; display: block !important; width: 0.5px !important; height: 100% !important; padding: 0 !important; opacity: 0 !important; border: none; } .bootstrap-select > select.mobile-device { top: 0; left: 0; display: block !important; width: 100% !important; z-index: 2; } .has-error .bootstrap-select .dropdown-toggle, .error .bootstrap-select .dropdown-toggle { border-color: var(--color-red); } .voForm .vo-error, input.vo-error { border-color: var(--color-red) !important; } .form-list > li.vo-error-select .bootstrap-select .dropdown-toggle { border-color: var(--color-red); } .bootstrap-select.fit-width { width: auto !important; } /* .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 220px; } */ .bootstrap-select .dropdown-toggle:focus { /* outline: thin dotted var(--text-darkest) !important; outline: 5px auto -webkit-focus-ring-color !important; */ outline: 0; outline-offset: -2px; } .bootstrap-select.form-control { margin-bottom: 0; padding: 0; border: none; } .bootstrap-select.form-control:not([class*="col-"]) { width: 100%; } .bootstrap-select.form-control.input-group-btn { z-index: auto; } .bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn { border-radius: 0; } .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] { float: none; display: inline-block; margin-left: 0; } .bootstrap-select.btn-group.dropdown-menu-right, .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right, .row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right { float: right; } .bootstrap-select.btn-group.disabled, .bootstrap-select.btn-group > .disabled { cursor: not-allowed; } .bootstrap-select.btn-group.disabled:focus, .bootstrap-select.btn-group > .disabled:focus { outline: none !important; } .bootstrap-select.btn-group.bs-container { position: absolute; height: 0 !important; padding: 0 !important; } .bootstrap-select.btn-group.bs-container .dropdown-menu { z-index: 1060; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { display: inline-block; overflow: hidden; width: 100%; text-align: left; } .bootstrap-select.btn-group .dropdown-toggle .caret { position: absolute; top: 50%; right: 12px; margin-top: -2px; margin-left: 0;vertical-align: middle; } .bootstrap-select.btn-group[class*="col-"] .dropdown-toggle { width: 100%; } .bootstrap-select.btn-group .dropdown-menu { min-width: 100%; box-sizing: border-box; } .bootstrap-select.btn-group .dropdown-menu.inner { position: static; float: none; border: 0; padding: 0; margin: 0; border-radius: 0; box-shadow: none; } .bootstrap-select.btn-group .dropdown-menu li { position: relative; } .bootstrap-select.btn-group .dropdown-menu li.active small { color: #fff; } .bootstrap-select.btn-group .dropdown-menu li.disabled a { cursor: not-allowed; } .bootstrap-select.btn-group .dropdown-menu li a { cursor: pointer; user-select: none; outline: 0; } .bootstrap-select.btn-group .dropdown-menu li a.opt { position: relative; } .bootstrap-select.btn-group .dropdown-menu li a span.check-mark { display: none; } .bootstrap-select.btn-group.no-tick .dropdown-menu li a span.check-mark { display: none !important; } .bootstrap-select.btn-group .dropdown-menu li a span.text { display: inline-block; } .bootstrap-select.btn-group .dropdown-menu li small { padding-left: 0.5em; } .bootstrap-select.btn-group .dropdown-menu .notify { position: absolute; bottom: 5px; width: 96%; margin: 0 2%; min-height: 26px; padding: 3px 5px; background: var(--bg-gray); border: 1px solid var(--color-border); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0.9; box-sizing: border-box; } .bootstrap-select.btn-group .no-results { padding: 3px; background: var(--bg-gray); margin: 0 5px; white-space: nowrap; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option { position: static; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .caret { position: static; top: auto; margin-top: -1px; } .bootstrap-select.btn-group .dropdown-menu li a:hover { background: color-mix(in srgb, var(--color-blue2) 12%, #fff); box-shadow: inset 3px 0 0 var(--color-blue2); } .bootstrap-select.btn-group .dropdown-menu li.selected a { background: color-mix(in srgb, var(--color-blue2) 12%, #fff); } .bootstrap-select.btn-group .dropdown-menu li.selected a span.check-mark { position: absolute; display: inline-block; right: 15px; top: 0; background: url(../../img/icon-check.svg) no-repeat center; background-size: 100%; height: 100%; width: 14px; } .bootstrap-select.btn-group .dropdown-menu li a span.text { margin-right: 34px; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle { z-index: 1061; } .bootstrap-select.show-menu-arrow .dropdown-toggle:before { content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(204, 204, 204, 0.2); position: absolute; bottom: -4px; left: 9px; display: none; } .bootstrap-select.show-menu-arrow .dropdown-toggle:after { content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; position: absolute; bottom: -4px; left: 10px; display: none; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before { bottom: auto; top: -3px; border-top: 7px solid rgba(204, 204, 204, 0.2); border-bottom: 0; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after { bottom: auto; top: -3px; border-top: 6px solid white; border-bottom: 0; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before { right: 12px; left: auto; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after { right: 13px; left: auto; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after { display: block; } .bs-searchbox, .bs-actionsbox, .bs-donebutton { padding: 4px 8px; } .bs-actionsbox { width: 100%; box-sizing: border-box; } .bs-actionsbox .btn-group button { width: 50%; } .bs-donebutton { float: left; width: 100%; box-sizing: border-box; } .bs-donebutton .btn-group button { width: 100%; } .bs-searchbox + .bs-actionsbox { padding: 0 8px 4px; } .bs-searchbox .form-control { margin-bottom: 0; width: 100%; float: none; } /* Select Medium */ .select-medium .dropdown-toggle { height: 34px; font-size: 13px !important; line-height: 34px; padding: 0 20px 0 10px; } .select-medium .dropdown-toggle .caret { right: 10px !important; } .select-medium .dropdown-menu > li.dropdown-header { padding: 3px 10px; } .select-medium .dropdown-menu > li > a, .select-medium .dropdown-menu > li > a.level0 { padding: 3px 10px; } .select-medium .dropdown-menu > li > a.level1 { padding-left: 25px; } .select-medium .dropdown-menu > li > a.level2 { padding-left: 40px; } .select-medium .dropdown-menu > li > a.level3 { padding-left: 55px; } .select-medium .dropdown-menu > li > a.level4 { padding-left: 70px; } .select-medium .dropdown-menu > li > a.level5 { padding-left: 85px; } .select-medium .dropdown-menu > li > a.level6 { padding-left: 100px; } /* ================================================================================== */ /* == Checkboxes, Radios, and Toggles =============================================== */ /* ================================================================================== */ /* Checkbox */ .checkbox { width: 16px; height: 16px; position: relative; } .checkbox > * { position: absolute; } .checkbox-placeholder { width: 16px; height: 16px; background: var(--bg-subtle); border: 1px solid var(--checkbox-border); border-radius: 4px; } .checkbox > input { display: block; width: 16px; height: 16px; left: 50%; top: 50%; z-index: 1; transform: translatex(-50%) translatey(-50%); opacity: 0; cursor: pointer; } .checkbox > input:checked + .checkbox-placeholder { background: url(../../img/icon-checkbox.svg) no-repeat center 4px; background-color: var(--color-green); border-color: var(--color-green); } .checkbox > input:hover + .checkbox-placeholder { border-color: var(--color-border-strong); } .checkbox > input:hover:checked + .checkbox-placeholder { border-color: var(--color-green); } /* .checkbox > input:focus + .checkbox-placeholder { border-color: blue; } */ /* Toggle Switch */ .toggle-switch { width: 36px; height: 19px; position: relative; } .toggle-switch > * { position: absolute; } .toggle-switch-placeholder { background-color: var(--color-border-strong); border-radius: 25px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; transition: .4s; } .toggle-switch-placeholder:before { content: ""; height: 15px; width: 15px; background-color: white; border-radius: 50%; position: absolute; left: 2px; bottom: 2px; transition: .4s; } .toggle-switch > input { width: 100% !important; height: 100% !important; appearance: none; border: none; padding: 0 !important; z-index: 2; opacity: 0; cursor: pointer; } .toggle-switch > input:checked + .toggle-switch-placeholder { background-color: var(--color-green); } .toggle-switch > input:checked + .toggle-switch-placeholder:before { transform: translateX(17px); } /* Toggle Switch - Yes/No */ .toggle-switch.toggle-switch--yes-no { width: 50px; } .toggle-switch.toggle-switch--yes-no input { position: absolute; left: 0; } .toggle-switch.toggle-switch--yes-no .toggle-switch-placeholder:after { content:"NO"; font-size: 11px; font-weight: 600; color: var(--text-default); position: absolute; top: 2px; right: 10px; opacity: 0.95; } .toggle-switch.toggle-switch--yes-no > input:checked + .toggle-switch-placeholder:before { transform: translateX(31px); } .toggle-switch.toggle-switch--yes-no > input:checked + .toggle-switch-placeholder:after { content:"YES"; color: #fff; right: auto; left: 9px; opacity: 0.95; } /* Toggle Switch - On/Off */ .toggle-switch.toggle-switch--on-off { width: 50px; } .toggle-switch.toggle-switch--on-off input { position: absolute; left: 0; } .toggle-switch.toggle-switch--on-off .toggle-switch-placeholder:after { content:"OFF"; font-size: 11px; font-weight: 600; color: var(--text-default); position: absolute; top: 2px; right: 9px; opacity: 0.95; } .toggle-switch.toggle-switch--on-off > input:checked + .toggle-switch-placeholder:before { transform: translateX(31px); } .toggle-switch.toggle-switch--on-off > input:checked + .toggle-switch-placeholder:after { content:"ON"; color: #fff; right: auto; left: 10px; opacity: 0.95; } /* Radio */ .radio { width: 16px; height: 16px; position: relative; } .radio > * { position: absolute; } .radio-placeholder { width: 16px; height: 16px; background: var(--bg-subtle); border: 1px solid var(--checkbox-border); border-radius: 50%; } .radio > input { display: block; width: 16px !important; height: 16px !important; left: 50%; top: 50%; z-index: 1; transform: translatex(-50%) translatey(-50%); opacity: 0; cursor: pointer; } .radio > input:checked + .radio-placeholder { background: url(../../img/icon-checkbox.svg) no-repeat center 4px; background-color: var(--color-green); border-color: var(--color-green); } .radio > input:hover + .radio-placeholder { border-color: var(--color-border-strong); } .radio > input:hover:checked + .radio-placeholder { border-color: var(--color-green); } /* ================================================================================== */ /* == Toolbars ====================================================================== */ /* ================================================================================== */ /* Standard Toolbar */ .toolbar { background: var(--color-primary); padding: 10px; position: relative; } .toolbar:after { content: ""; display: table; clear: both; } /* clearfix */ /* Toolbar Dark */ .toolbar--dark { background: var(--color-darkest-blue); } .toolbar--dark .btn-default:hover { background: var(--color-primary); } /* Toolbar Buttons */ .toolbar .toolbar-btn { float: left; font-size: 13px; margin-right: 10px; } .toolbar .btn-default { background-color: var(--color-dark-blue); border-color: var(--color-dark-blue); color: rgba(255,255,255,0.9); font-size: 13px; } .toolbar .btn-default.dropdown-toggle .filter-option { color: rgba(255,255,255,0.9); } .toolbar .btn-default .tooltip { background: var(--color-darkest-blue); } .toolbar .btn-default:focus, .toolbar .btn-default.focus, .toolbar .btn-default:hover { background-color: var(--color-dark-blue-hover); border-color: var(--color-dark-blue-hover); color: #ffffff; } .toolbar .btn-default:active, .toolbar .btn-default.active, .toolbar .open > .dropdown-toggle.btn-default { background-color: var(--color-dark-blue-active); border-color: var(--color-dark-blue-active); box-shadow: inset 0 1px 1px rgba(0,0,0,0.08), inset 0 6px 8px rgba(0,0,0,0.08); color: #fff; } .toolbar .toolbar-btn.btn-open { background-color: var(--color-dark-blue-active); border-color: var(--color-dark-blue-active); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 6px 8px rgba(0,0,0,0.1), inset 0 14px 16px rgba(0,0,0,0.1); } /* Toolbar Text Inputs */ .toolbar .input { height: 40px; background-color: var(--color-dark-blue); border: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); border-radius: 3px; text-align: left; color: rgba(255,255,255,0.9); font-weight: 600; padding: 0 15px; } .toolbar .input::-webkit-input-placeholder { color: rgba(255,255,255,0.5); } .toolbar .input:-moz-placeholder { color: rgba(255,255,255,0.5); } .toolbar .input::-moz-placeholder { color: rgba(255,255,255,0.5); } .toolbar .input:-ms-input-placeholder { color: rgba(255,255,255,0.5); } .toolbar .input:disabled { background-color: var(--bg-body) !important; color: var(--text-default) !important; cursor: not-allowed; } /* This is the X that clears an input text value */ .toolbar .clear { width: 20px; height: 20px; background: url(../../img/icon-delete-white.svg) no-repeat center; background-size: 16px; text-indent: -9999px; position: absolute; top: 10px; right: 8px; opacity: 0.5; cursor: pointer; } .toolbar .clear:hover { opacity: 0.75; } /* Toolbar Search */ .toolbar .cnd-search { float: left; width: 42px; border-radius: 3px; overflow: hidden; margin-right: 10px; position: relative; transition: width 0.7s; } .toolbar .search { width: 200px; background-image: url(../../img/icon-search-white.svg); background-repeat: no-repeat; background-position: 13px; background-size: 15px; box-shadow: none; padding: 0 0 0 42px; cursor: pointer; } .toolbar .search:hover { background-color: var(--color-dark-blue-hover); } .toolbar .cnd-search.active { width: 200px; } .toolbar .cnd-search.active .search { width: 200px; background-color: var(--color-dark-blue-hover); box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); cursor: default; } .toolbar .cnd-search .clear { left: 172px; } /* Toolbar Date Filter */ .toolbar .date-filter { background-image: url(../../img/icon-calendar-white.svg); background-repeat: no-repeat; background-position: 10px center; background-size: 19px; padding-left: 36px; } /* Toolbar Date Type next to Date Filter */ .toolbar .date-type { border-left: 1px solid color-mix(in srgb, var(--color-dark-blue) 50%, var(--color-primary)); margin-left: -12px !important; } .toolbar .date-type .btn { border-radius: 0 3px 3px 0; } .toolbar .date-type:before { content: ""; width: 20px; height: 100%; background: linear-gradient(270deg, rgb(from var(--color-dark-blue-hover) r g b / 0.2) 0%, rgba(0,0,0,0) 100%); position: absolute; top: 0; left: -21px; } /* Toolbar OLD Date Filter */ .toolbar .old-date-filter input{ width: 285px; background-image: url(../../img/icon-calendar-white.svg); background-repeat: no-repeat; background-position: 10px center; background-size: 19px; text-align: left; padding-left: 36px; } /* Toolbar Month Iterator */ .toolbar .period-nav { } .toolbar .period-nav .period-nav-prev { width: 34px; background-image: url(../../img/icon-arrow-left-white.svg); background-repeat: no-repeat; background-position: center; background-size: 18px; border-radius: 3px 0 0 3px; border-right: 1px solid rgba(0,0,0,0.1); text-indent: -9999px; margin: 0; padding: 0; } .toolbar .period-nav .period-nav-next { width: 34px; background-image: url(../../img/icon-arrow-right-white.svg); background-repeat: no-repeat; background-position: center; background-size: 18px; border-radius: 0 3px 3px 0; border-left: 1px solid rgba(0,0,0,0.1); text-indent: -9999px; } .toolbar .period-nav .period-nav-label { width: 130px; border-radius: 0; margin: 0; } /* Toolbar Country State Filter */ .toolbar .vo-country-state-filter { } .toolbar .vo-country-state-filter > ul > li { float: left; } /* Toolbar Multisite Dropdown */ .toolbar .multi-site { float: left; } /* Toolbar Dropdowns */ .toolbar .bootstrap-select { float: left !important; margin-right: 10px; } .toolbar .filter-option { color: #fff; } .toolbar .dropdown-menu { font-size: 13px; } .toolbar .caret { background: url(../../img/icon-dropdown-arrow-white.svg) no-repeat; } /* Toolbar Large Input */ .toolbar .input.input--large { height: 40px; width: 100%; background: #fff; border: none; box-shadow: none; color: var(--text-darkest); font-size: 18px; font-weight: 600; line-height: 42px; } .toolbar .input.input--large::-webkit-input-placeholder { color: var(--text-lightest); } .toolbar .input.input--large:-moz-placeholder { color: var(--text-lightest); } .toolbar .input.input--large::-moz-placeholder { color: var(--text-lightest); } .toolbar .input.input--large:-ms-input-placeholder { color: var(--text-lightest); } /* Toolbar Small */ .toolbar--small { height: 50px; } .toolbar--small .toolbar-btn { line-height: 28px; } .toolbar--small .input { height: 30px; } .toolbar--small .search { background-size: 12px; padding-left: 38px; } /* ================================================================================== */ /* == Blocks ======================================================================== */ /* ================================================================================== */ .block { background: #fff; border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: 40px; position: relative; } /* Overflow:hidden on div.block is critical to properly achieving rounded corners in all situations. Unfortuately, this occassionaly cuts off dropdown menus. So I'm trying a wild thing and using images to accomplish perfect rounded corners without the use of overflow:hidden. */ .block:before { content: ""; width: 4px; height: 4px; background: url(../../img/rounded-corner-left.png); background-size: 4px; position: absolute; top: -1px; left: -1px; z-index: 1; } .block:after { content: ""; width: 4px; height: 4px; background: url(../../img/rounded-corner-right.png); background-size: 4px; position: absolute; top: -1px; right: -1px; z-index: 1; } .block .block-header { height: 60px; background: var(--color-primary); overflow: hidden; color: #fff; line-height: 60px; padding: 0 20px; position: relative; } .block .block-header .tooltip { width: 14px; height: 14px; background: var(--color-dark-blue); line-height: 15px; margin-left: 5px; } .block .block-header h2 { float: left; font-size: 20px; font-weight: normal; color: #fff; margin: 0 20px 0 0; } .block .block-body, .block .block-tabs-body { padding: 20px; } .block .block-body:after { content: ""; display: table; clear: both; } .block .block-body--no-pad { padding: 0; } .block h3 { font-size: 14px; margin-bottom: 7px; } /* Block Disabled */ .block-disabled { display: none; height: 0 !important; overflow: hidden; opacity: 0; visibility: hidden; } /* Toolbar that follows a heading */ .block .block-header + .toolbar { background: var(--color-darkest-blue); border-color: var(--color-darkest-blue); } .block .block-header + .toolbar .toolbar-btn { } .block .block-header + .toolbar .btn-default:focus, .block .block-header + .toolbar .btn-default.focus, .block .block-header + .toolbar .btn-default:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .block .block-header + .toolbar .btn-default:active, .block .block-header + .toolbar .btn-default.active, .block .block-header + .toolbar .btn-default:active:hover, .block .block-header + .toolbar .btn-default.active:hover, .block .block-header + .toolbar .btn-default:active.focus, .block .block-header + .toolbar .btn-default.active.focus { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #ffffff; } /* Small block heading and toolbar */ .block .block-header--small { height: 50px; line-height: 50px; } .block .block-header--small h2 { font-size: 16px; font-weight: 600; -webkit-font-smoothing: antialiased; } .block .block-header--small h2 .small-title { font-size: 13px; opacity: 0.65; } .block .block-header--small h2 .small-title:before { content:"- "; } .block .block-header--small + .toolbar { height: 50px; } .block .block-header--small + .toolbar .toolbar-btn { line-height: 28px; } .block .block-header--small + .toolbar .input { height: 30px; } .block .block-header--small + .toolbar .search { background-size: 12px; padding-left: 38px; } .block .block-header--small + .toolbar .cnd-search { width: 38px; } .block .block-header--small + .toolbar .cnd-search.active { width: 200px; } .block .block-header--small + .toolbar .cnd-search .clear { top: 5px; } /* Accordian Toggle Arrow */ .block .block-header-toggle { width: 64px; height: 100%; background: url(../../img/icon-arrow-up-white.svg) no-repeat center right 20px; position: absolute; right: 0; cursor: pointer; } .block.block--collapsed { overflow: hidden; } .block.block--collapsed .block-header-toggle { background: url(../../img/icon-arrow-down-white.svg) no-repeat center right 20px; } /* Button Footer */ .button-footer { clear: both; border-top: 1px solid var(--color-border); margin: 20px -20px -20px -20px; padding: 20px; } .button-footer:after { content: ""; display: table; clear: both; } /* clearfix */ .button-footer.button-footer--right .btn { float: right; margin-left: 10px; } .button-footer.button-footer--left .btn { float: left; margin-right: 10px; } .block .block-body--no-pad .button-footer { margin: 0; } #dialog-import-group-members .vo-file-processor { } #dialog-import-group-members .vo-file-processor .vo-feedback { height: 400px; overflow: auto; margin: 25px 0 0 25px; } .vo-waiting-for-import .progress-bar { height: 42px; width:0; background: var(--color-green); border-radius: 8px; color:#ffffff; font-weight: bold; margin: -1px; padding:12px; position: relative; } .vo-waiting-for-import .vo-progress-rate { display: block; color: #000; font-weight: bold; position: absolute; top: 31px; left: 28px; } /* Text Message */ .block .message { margin-bottom: 18px; } /* Tabs inside a block */ /* This is the old sort dropdown */ .block-tabs { background: var(--bg-table-header); border-bottom: 1px solid var(--color-border); -webkit-font-smoothing: antialiased; position: relative; } .block-tabs .ui-tabs-nav { height: 54px; padding: 10px 10px 0 10px; } .block-tabs .ui-tabs-nav li { float: left; height: 100%; border: 1px solid var(--color-border); border-bottom: none; border-radius: 4px 4px 0 0; font-weight: 600; margin-right: 10px; position: relative; } .block-tabs .ui-tabs-nav li a { display: block; outline: 0; line-height: 44px; color: var(--text-default); padding: 0 20px; } .block-tabs .ui-tabs-nav li a .count { display: inline-block; min-width: 15px; height: 15px; background: var(--color-primary); border-radius: 20px; color: #fff; line-height: 15px; text-align: center; font-size: 10px; margin-left: 5px; vertical-align: 1px; } .block-tabs .ui-tabs-nav li a .count:empty { display: none; } .block-tabs .ui-tabs-nav li.ui-tabs-active { background: #fff; } .block-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--text-darkest); } .block-tabs .ui-tabs-nav li.ui-tabs-active:after { content: ""; width: 100%; height: 2px; background: #fff; position: absolute; bottom: -1px; } /* Block Tabs Dark */ .block-tabs--dark { background: var(--color-darkest-blue); border-bottom: none; } .block-tabs--dark .ui-tabs-nav li { background: color-mix(in srgb, var(--color-primary) 25%, var(--color-darkest-blue)); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-darkest-blue)); } .block-tabs--dark .ui-tabs-nav li.ui-tabs-active, .block-tabs--dark .ui-tabs-nav li.ui-tabs-active:after { background: var(--color-primary); } .block-tabs--dark .ui-tabs-nav li.ui-tabs-active { border-color: var(--color-primary); } .block-tabs--dark .ui-tabs-nav li a { color: rgba(255,255,255,0.65); } .block-tabs--dark .ui-tabs-nav li.ui-tabs-active a { color: rgba(255,255,255,0.9); } .block-tabs .cnd-sort { width: 130px; position: absolute; top: 9px; right: 10px; z-index: 1; } .block-tabs .cnd-sort .dropdown-toggle { background: none !important; border: none; box-shadow: none !important; font-size: 13px; color: var(--text-lightest) !important; font-weight: 600; } .block-tabs .cnd-sort .dropdown-toggle:focus { outline: none !important; outline: none !important; } .block-tabs .cnd-sort .btn-group { width: 100%; } .block-tabs .cnd-sort .filter-option { text-align: right !important; padding-right: 5px; } .block-tabs .cnd-sort .caret { margin-top: -4px !important; } /* When a table with a thead follows blocks tabs */ .block-tabs ~ table thead, table thead.thead--with-tabs, .block-tabs ~ table thead tr:hover, table thead.thead--with-tabs tr:hover { background: #fff; background: linear-gradient(to bottom, #FFFFFF 0%, var(--bg-subtle) 100%); border-top: none; } /* Description at top of tabs */ .tab-description { background: linear-gradient(to bottom, #FFFFFF 0%, var(--bg-subtle) 100%); font-style: italic; font-size: 13px; padding: 15px 20px; } /* Flex Wrap */ .flex-wrap { display: flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; } .flex-wrap .block { flex-grow: 1 1 auto; width: calc(50% - 20px); } /* 2 Columns */ .left-column { float: left; width: calc(50% - 20px); } .right-column { float: right; width: calc(50% - 20px); } /* Slider Drawer */ .block .slider { background: var(--bg-gray); border-top: 1px solid var(--color-border); } /* ================================================================================== */ /* == Cards ========================================================================= */ /* ================================================================================== */ .cards-container { clear: both; display: flex; overflow: hidden; gap: 40px; } .cards-container:has(.card:nth-child(5)) { gap: 20px; } /* if contains 5 or more cards */ .cards-container .card { flex: 1; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; text-align: center; line-height: normal; padding: 30px 10px; margin: 0 0 40px 0; } .cards-container .card .number { display: block; min-height: 30px; font-size: 30px; color: var(--text-darkest); } .cards-container .card h3 { font-size: 12px; text-transform: uppercase; font-weight: 600; margin-top: 15px; } .cards-container .card .change { background: var(--bg-gray); border-top: 1px solid var(--color-border); font-size: 12px; padding: 19px 20px; margin: 30px -10px -30px -10px; } .cards-container .card .plus { color: var(--color-green); position: relative; } .cards-container .card .plus:before { content: ""; width: 12px; height: 12px; background: var(--color-green); border-radius: 50%; margin-top: -7px; position: absolute; top: 50%; left: -20px; } .cards-container .card .plus:after { content: ""; height: 0; width: 0; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 0 2px 3px 2px; margin-top: -3px; position: absolute; top: 50%; left: -16px; } .cards-container .card .minus { color: var(--color-red); position: relative; } .cards-container .card .minus:before { content: ""; width: 12px; height: 12px; background: var(--color-red2); border-radius: 50%; margin-top: -7px; position: absolute; top: 50%; left: -20px; } .cards-container .card .minus:after { content: ""; height: 0; width: 0; border-style: solid; border-color: #fff transparent transparent transparent; border-width: 3px 2px 0 2px; margin-top: -2px; position: absolute; top: 50%; left: -16px; } .cards-container .card .data { font-weight: 600; } .cards-container .card .data:after { content:"%"; } .cards-container .card .plus .data { color: var(--color-green); } .cards-container .card .minus .data { color: var(--color-red2); } .cards-container .card:nth-child(1) h3 { color: var(--color-blue2); } .cards-container .card:nth-child(2) h3 { color: var(--color-green); } .cards-container .card:nth-child(3) h3 { color: var(--color-yellow3); } .cards-container .card:nth-child(4) h3 { color: var(--color-red); } .cards-container .card:nth-child(5) h3 { color: var(--color-blue2); } .cards-container .card:nth-child(6) h3 { color: var(--color-green); } .cards-container .card:nth-child(7) h3 { color: var(--color-yellow3); } .cards-container .card:nth-child(8) h3 { color: var(--color-red); } .cards-container .card:nth-child(9) h3 { color: var(--color-blue2); } .cards-container .card:nth-child(10) h3 { color: var(--color-green); } .cards-container .card:nth-child(11) h3 { color: var(--color-yellow3); } .cards-container .card:nth-child(12) h3 { color: var(--color-red); } .cards-container .card.card-subs h3 { color: var(--color-blue2); } .cards-container .card.card-trials h3 { color: var(--color-yellow3); } .cards-container .card.card-revenue h3 { color: var(--color-green); } .cards-container .card.card-mrr h3 { color: var(--color-red); } .cards-container .card-meter-blocks { } .cards-container .card-meter-blocks h3 { color: var(--color-red) !important; } .cards-container .card-meter-blocks .plus, .cards-container .card-meter-blocks .minus { color: var(--text-default); } .cards-container .card-meter-blocks .plus:before, .cards-container .card-meter-blocks .minus:before { width: auto; height: auto; background: none; border-radius: 0; margin: 0; position: static; } .cards-container .card-meter-blocks .plus:before { content: "Up "; } .cards-container .card-meter-blocks .minus:before { content: "Down "; } .cards-container .card-meter-blocks .plus:after, .cards-container .card-meter-blocks .minus:after { display: none; } .cards-container.cards-in-table { background: var(--bg-table-header); border-bottom: 1px solid var(--color-border); padding: 20px; gap: 20px; } .cards-container.cards-in-table .card { background: #fff; margin: 0; } .block-tabs + .cards-container.cards-in-table { background: linear-gradient(to bottom, #FFFFFF 0%, var(--bg-table-header) 100%); } .cards-container .card-top-links { max-width: 50%; padding: 0; } .cards-container .card-top-links table { table-layout: fixed; width: 100%; } .cards-container .card-top-links table thead { border-bottom: 1px solid var(--color-border); } .cards-container .card-top-links .title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 5px 0; } .cards-container .card-top-links table td { padding: 0 15px; } .cards-container .card-top-links table tr { border: none; } .cards-container .card-top-links table th:last-child, .cards-container .card-top-links table td:last-child { width: 130px; text-align: right; } .cards-container .card-top-links table tr:first-child td { padding-top: 8px; } .cards-container .card-top-links table tr:last-child td { padding-bottom: 8px; } .cards-container.cards-container-small { } .cards-container.cards-container-small .card { text-align: left; padding: 20px; } .cards-container.cards-container-small .card h3 { margin: 0 0 10px 0; } .cards-container.cards-container-small .card .number { min-height: 25px; font-size: 25px; } /* ================================================================================== */ /* == Promotion Performance Cards =================================================== */ /* ================================================================================== */ .promo-cards-container { clear: both; display: flex; overflow: hidden; gap: 40px; } .promo-cards-container .promo-card { flex: 1; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; line-height: normal; padding: 20px; margin: 0 0 40px 0; } .promo-cards-container .promo-card h3 { font-size: 17px; margin: -1px 0 19px 0; } .promo-cards-container .promo-card .vo-promo-link { color: var(--text-darkest); } .promo-cards-container .promo-card .vo-plan-link { display: block; color: var(--text-lightest); font-size: 12px; margin: -18px 0 18px 0; } .promo-cards-container .promo-card .number { display: block; min-height: 30px; font-size: 30px; color: var(--text-darkest); } .promo-cards-container .promo-card h4 { float: left; font-size: 12px; text-transform: uppercase; font-weight: 600; margin-bottom: 15px; } .promo-cards-container .promo-card .number { clear: both; } .promo-cards-container .promo-card .trend { float: right; border-radius: 50px; font-weight: 600; font-size: 11px; padding: 2px 7px 2px 22px; margin-top: -1px; } .promo-cards-container .promo-card .trend, .promo-cards-container .promo-card .trend.up { background: #d5eed8 url(../../img/icon-trending-up.svg) no-repeat 6px 4px; background-size: 13px; color: var(--color-green); } .promo-cards-container .promo-card .trend.down { background: #f6dbd8 url(../../img/icon-trending-down.svg) no-repeat 6px 4px; background-size: 13px; color: var(--color-red2); } .promo-cards-container .promo-card .sub-cards { container-type: inline-size; container-name: promo-sub-cards; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .promo-cards-container .promo-card .sub-card { background: var(--bg-gray); /* border: 1px solid var(--color-border); */ border-radius: 4px; padding: 20px; } .promo-cards-container .promo-card .sub-card:nth-child(1) { background: #f0f8fe; } .promo-cards-container .promo-card .sub-card:nth-child(1) h4 { color: var(--color-blue2); } .promo-cards-container .promo-card .sub-card:nth-child(2) { background: #fdf6f6; background: #f8f3fd; } .promo-cards-container .promo-card .sub-card:nth-child(2) h4 { color: var(--color-purple); } .promo-cards-container .promo-card .sub-card:nth-child(3) { background: #f1f9f2; } .promo-cards-container .promo-card .sub-card:nth-child(3) h4 { color: var(--color-green); } .promo-cards-container .promo-card .sub-card:nth-child(4) { background: #fcf7f0; } .promo-cards-container .promo-card .sub-card:nth-child(4) h4 { color: var(--color-yellow3); } @media only screen and (min-width: 1250px) { .promo-cards-container .promo-card { max-width: 50%; } } @container promo-sub-cards (max-width: 415px) { .promo-cards-container .promo-card h4 { float: none; } .promo-cards-container .promo-card .trend { float: none; display: inline-block; margin: -8px 0 25px 0; vertical-align: 8px; } /* .promo-cards-container .promo-card .sub-card:nth-child(4) h4 { margin-bottom: 52px; } */ } /* ================================================================================== */ /* == Percentage Circles ============================================================ */ /* ================================================================================== */ .circle-stats { width: 100%; } .circle-stats .stat-circle { float: left; width: 20%; text-align: center; } .circle-stats .stat-circle .c100 { float: none; margin: 0 auto 17px auto; } .stat-circle { color: var(--text-darkest); } .stat-circle .c100 { } .stat-circle h3 { clear: both; font-size: 12px; text-transform: uppercase; font-weight: 600; margin-top: 15px; } .circle-stats .stat-circle:nth-child(1) h3 { color: var(--color-blue2); } .circle-stats .stat-circle:nth-child(2) h3 { color: var(--color-green); } .circle-stats .stat-circle:nth-child(3) h3 { color: var(--color-yellow3); } .circle-stats .stat-circle:nth-child(4) h3 { color: var(--color-red); } /* CSS Percentage Circle - Author: Andre Firchow */ .rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice { clip: rect(auto, auto, auto, auto); } .pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill { position: absolute; border: 0.08em solid var(--color-blue2); width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: 50%; transform: rotate(0deg); } .pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill { transform: rotate(180deg); } .c100 { position: relative; font-size: 115px; width: 1em; height: 1em; border-radius: 50%; float: left; margin: 0 0.1em 0.1em 0; background-color: var(--color-border); } .c100 *, .c100 *:before, .c100 *:after { box-sizing: content-box; } .c100 > span { position: absolute; width: 100%; z-index: 1; left: 0; top: 0; line-height: 112px; text-indent: 11px; font-size: 30px; color: var(--text-darkest); display: block; text-align: center; white-space: nowrap; transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-out; } .c100 > span em { font-size: 22px; font-weight: 600; font-style: normal; } .c100:after { position: absolute; top: 0.05em; left: 0.05em; display: block; content: " "; border-radius: 50%; background-color: #fff; width: 0.9em; height: 0.9em; transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-in; } .c100 .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } /* Bar Rotations */ .c100.p1 .bar { transform: rotate(3.6deg) } .c100.p2 .bar { transform: rotate(7.2deg) } .c100.p3 .bar { transform: rotate(10.8deg) } .c100.p4 .bar { transform: rotate(14.4deg) } .c100.p5 .bar { transform: rotate(18deg) } .c100.p6 .bar { transform: rotate(21.6deg) } .c100.p7 .bar { transform: rotate(25.2deg) } .c100.p8 .bar { transform: rotate(28.8deg) } .c100.p9 .bar { transform: rotate(32.4deg) } .c100.p10 .bar { transform: rotate(36deg) } .c100.p11 .bar { transform: rotate(39.6deg) } .c100.p12 .bar { transform: rotate(43.2deg) } .c100.p13 .bar { transform: rotate(46.8deg) } .c100.p14 .bar { transform: rotate(50.4deg) } .c100.p15 .bar { transform: rotate(54deg) } .c100.p16 .bar { transform: rotate(57.6deg) } .c100.p17 .bar { transform: rotate(61.2deg) } .c100.p18 .bar { transform: rotate(64.8deg) } .c100.p19 .bar { transform: rotate(68.4deg) } .c100.p20 .bar { transform: rotate(72deg) } .c100.p21 .bar { transform: rotate(75.6deg) } .c100.p22 .bar { transform: rotate(79.2deg) } .c100.p23 .bar { transform: rotate(82.8deg) } .c100.p24 .bar { transform: rotate(86.4deg) } .c100.p25 .bar { transform: rotate(90deg) } .c100.p26 .bar { transform: rotate(93.6deg) } .c100.p27 .bar { transform: rotate(97.2deg) } .c100.p28 .bar { transform: rotate(100.8deg) } .c100.p29 .bar { transform: rotate(104.4deg) } .c100.p30 .bar { transform: rotate(108deg) } .c100.p31 .bar { transform: rotate(111.6deg) } .c100.p32 .bar { transform: rotate(115.2deg) } .c100.p33 .bar { transform: rotate(118.8deg) } .c100.p34 .bar { transform: rotate(122.4deg) } .c100.p35 .bar { transform: rotate(126deg) } .c100.p36 .bar { transform: rotate(129.6deg) } .c100.p37 .bar { transform: rotate(133.2deg) } .c100.p38 .bar { transform: rotate(136.8deg) } .c100.p39 .bar { transform: rotate(140.4deg) } .c100.p40 .bar { transform: rotate(144deg) } .c100.p41 .bar { transform: rotate(147.6deg) } .c100.p42 .bar { transform: rotate(151.2deg) } .c100.p43 .bar { transform: rotate(154.8deg) } .c100.p44 .bar { transform: rotate(158.4deg) } .c100.p45 .bar { transform: rotate(162deg) } .c100.p46 .bar { transform: rotate(165.6deg) } .c100.p47 .bar { transform: rotate(169.2deg) } .c100.p48 .bar { transform: rotate(172.8deg) } .c100.p49 .bar { transform: rotate(176.4deg) } .c100.p50 .bar { transform: rotate(180deg) } .c100.p51 .bar { transform: rotate(183.6deg) } .c100.p52 .bar { transform: rotate(187.2deg) } .c100.p53 .bar { transform: rotate(190.8deg) } .c100.p54 .bar { transform: rotate(194.4deg) } .c100.p55 .bar { transform: rotate(198deg) } .c100.p56 .bar { transform: rotate(201.6deg) } .c100.p57 .bar { transform: rotate(205.2deg) } .c100.p58 .bar { transform: rotate(208.8deg) } .c100.p59 .bar { transform: rotate(212.4deg) } .c100.p60 .bar { transform: rotate(216deg) } .c100.p61 .bar { transform: rotate(219.6deg) } .c100.p62 .bar { transform: rotate(223.2deg) } .c100.p63 .bar { transform: rotate(226.8deg) } .c100.p64 .bar { transform: rotate(230.4deg) } .c100.p65 .bar { transform: rotate(234deg) } .c100.p66 .bar { transform: rotate(237.6deg) } .c100.p67 .bar { transform: rotate(241.2deg) } .c100.p68 .bar { transform: rotate(244.8deg) } .c100.p69 .bar { transform: rotate(248.4deg) } .c100.p70 .bar { transform: rotate(252deg) } .c100.p71 .bar { transform: rotate(255.6deg) } .c100.p72 .bar { transform: rotate(259.2deg) } .c100.p73 .bar { transform: rotate(262.8deg) } .c100.p74 .bar { transform: rotate(266.4deg) } .c100.p75 .bar { transform: rotate(270deg) } .c100.p76 .bar { transform: rotate(273.6deg) } .c100.p77 .bar { transform: rotate(277.2deg) } .c100.p78 .bar { transform: rotate(280.8deg) } .c100.p79 .bar { transform: rotate(284.4deg) } .c100.p80 .bar { transform: rotate(288deg) } .c100.p81 .bar { transform: rotate(291.6deg) } .c100.p82 .bar { transform: rotate(295.2deg) } .c100.p83 .bar { transform: rotate(298.8deg) } .c100.p84 .bar { transform: rotate(302.4deg) } .c100.p85 .bar { transform: rotate(306deg) } .c100.p86 .bar { transform: rotate(309.6deg) } .c100.p87 .bar { transform: rotate(313.2deg) } .c100.p88 .bar { transform: rotate(316.8deg) } .c100.p89 .bar { transform: rotate(320.4deg) } .c100.p90 .bar { transform: rotate(324deg) } .c100.p91 .bar { transform: rotate(327.6deg) } .c100.p92 .bar { transform: rotate(331.2deg) } .c100.p93 .bar { transform: rotate(334.8deg) } .c100.p94 .bar { transform: rotate(338.4deg) } .c100.p95 .bar { transform: rotate(342deg) } .c100.p96 .bar { transform: rotate(345.6deg) } .c100.p97 .bar { transform: rotate(349.2deg) } .c100.p98 .bar { transform: rotate(352.8deg) } .c100.p99 .bar { transform: rotate(356.4deg) } .c100.p100 .bar { transform: rotate(360deg) } .c100:hover { cursor: default; } .c100:hover > span { color: var(--color-blue2); } .c100:hover:after { top: 0.04em; left: 0.04em; width: 0.92em; height: 0.92em; } .c100.c-green .bar, .c100.c-green .fill { border-color: var(--color-green) !important; } .c100.c-green:hover > span { color: var(--color-green); } .c100.c-yellow .bar, .c100.c-yellow .fill { border-color: var(--color-yellow3) !important; } .c100.c-yellow:hover > span { color: var(--color-yellow3); } .c100.c-red .bar, .c100.c-red .fill { border-color: var(--color-red) !important; } .c100.c-red:hover > span { color: var(--color-red); } /* ================================================================================== */ /* == Tables ======================================================================== */ /* ================================================================================== */ table { width: 100%; border-collapse: collapse; } table thead { background: var(--bg-table-header); color: var(--text-table-header); } div + table thead { border-top: 1px solid var(--table-border); } /* Table header will not have a top border unless it comes after some other div. This helps tables look better when they are the first or only element in a .block. */ table thead tr:hover { background: var(--bg-table-header); } /* This is to cancel the general TR hover on THEAD */ table .tablehead-small th { padding: 10px 15px; } table th { font-weight: bold; } table tr { border-bottom: 1px solid var(--table-border); } table td, table th { text-align: left; padding: 15px; position: relative; } table td { -webkit-font-smoothing: antialiased; } table a, table a:hover { color: var(--text-default); } table tr:hover, table tr.ui-state-hover { background: var(--bg-subtle); } table tr.disabled, table tr.disabled td, table tr.disabled > a, tr.disabled .btn.disabled { background: var(--bg-subtle); color: var(--text-lightest) !important; } tr.disabled .btn.disabled { opacity: 0.9; } table td .title, table td .name, table td .full_name { display: block; font-weight: 600; color: var(--text-darkest); } table td .detail, table td .page-slug, table td .email, table td .no-email, table td .summary, table td .tax, table td .website, table td .change-detail { display: block; font-size: 12px; line-height: normal; margin-top: 3px; } table td .detail:empty, table td .page-slug:empty, table td .summary:empty { display: none; } table td .page-slug, table td .email { color: var(--color-red); } table td .tax { color: var(--text-lightest); } table td .website { color: var(--color-blue2); } table td .no-email { color: var(--text-lightest); } table .cnd tr.edit { cursor: pointer; } /* Period-average row — theme/admin/VO4/ana/subscriptions.tpl tbody.period-average (Conversion Funnel, Plans tab) */ table tbody.period-average { } table tbody.period-average tr { border: none; } table tbody.period-average td { background: var(--bg-subtle); box-shadow: inset 0 -2px 0 -1px var(--color-border); position: sticky; top: 0; z-index: 2; } table tbody.period-average td:first-child { font-weight: 600; } table tbody.period-average .detail { display: inline; font-size: 14px; } table td .change-detail { } table td .change-detail .plus { color: var(--color-green); } table td .change-detail .plus:before { content: "+ "; } table td .change-detail .minus { color: var(--color-red); } table td .change-detail .minus:before { content: "- "; } table td span.trend-up { padding-right: 20px; position: relative; } table td span.trend-up:before { content: ""; width: 12px; height: 12px; background: var(--color-green); border-radius: 50%; margin-top: -7px; position: absolute; top: 50%; right: 0px; } table td span.trend-up:after { content: ""; height: 0; width: 0; border-style: solid; border-color: transparent transparent #fff transparent; border-width: 0 2px 3px 2px; margin-top: -3px; position: absolute; top: 50%; right: 4px; } table td span.trend-down { padding-right: 20px; position: relative; } table td span.trend-down:before { content: ""; width: 12px; height: 12px; background: var(--color-red2); border-radius: 50%; margin-top: -7px; position: absolute; top: 50%; right: 0px; } table td span.trend-down:after { content: ""; height: 0; width: 0; border-style: solid; border-color: #fff transparent transparent transparent; border-width: 3px 2px 0 2px; margin-top: -2px; position: absolute; top: 50%; right: 4px; } /* Engagement > API Activity */ /* Outcome is encoded in colour as well as in the number, so a failing integration reads at a glance rather than only on a careful scan. "unknown" is deliberately neutral grey, never green: those calls were logged before the API instrumentation shipped and were never measured, so showing them as healthy would be inventing a result we do not have. */ table td span.vo-api-status { display: inline-block; min-width: 3.4em; border-radius: 10px; font-size: 13px; font-variant-numeric: tabular-nums; padding: 1px 7px; } table td span.vo-api-status.ok { background: rgba(54,175,71,.12); color: var(--color-green); } table td span.vo-api-status.error { background: rgba(212,82,69,.12); color: var(--color-red2); } /* Expected rejection (a wrong password, an unregistered email) rather than a fault. Amber, not red: a login endpoint collects these routinely, and painting them like a 500 would drown out the failures that actually mean something is broken. */ table td span.vo-api-status.warn { background: rgba(218,147,44,.14); color: var(--color-yellow3); } table td span.vo-api-status.unknown { background: rgba(0,0,0,.05); color: var(--text-lightest); } table td span.vo-api-status-reason { display: block; font-size: 11px; color: var(--text-lightest); margin-top: 2px; } table td span.vo-api-errors.negative { color: var(--color-red2); font-weight: 600; } table tr.vo-api-row-alert td { background: rgba(212,82,69,.06); } table td span.vo-api-error-rate, table td span.vo-api-unknown, table td span.vo-api-avg { display: block; font-size: 12px; color: var(--text-lightest); } /* Endpoint path and decoded parameters. Both must be free to wrap: an api url is one long unbroken token, so without break-word a single call runs off the side of the page and takes the table layout with it. The parameters column is capped and scrolls internally rather than widening, so one call with eleven nested filters can't dictate the width of every other row. */ table td span.vo-api-path { word-break: break-word; } table td span.vo-api-params { display: block; max-height: 5.5em; overflow-y: auto; font-size: 12px; line-height: 1.5; color: var(--text-default); word-break: break-word; white-space: normal; } table col.parameters { width: 32%; } table col.endpoint { width: 18%; } /* Delete table row item */ table .delete { width: 20px; height: 20px; background: url(../../img/icon-delete.svg) no-repeat center; background-size: 18px; border: none; text-align: left; text-indent: -9999px; margin-top: -9px; /* display: none; */ position: absolute; right: 18px; top: 50%; cursor: pointer; visibility: hidden; opacity: 0; transition: all .35s; } table tr:hover .delete { /* display: block; */ visibility: visible; opacity: 1; } table tr .delete:hover { background-size: 20px; } /* Quick Edit */ table .quick-edit-trigger { width: 20px; height: 20px; background: var(--bg-subtle) url(../../img/icon-edit.svg) no-repeat center; background-size: 18px; border: none; text-indent: -9999px; margin-top: -9px; position: absolute; right: 45px; top: 50%; cursor: pointer; visibility: hidden; opacity: 0; transition: all .35s; } table tr:hover .quick-edit-trigger { /* display: block; */ visibility: visible; opacity: 1; } table tr .quick-edit-trigger:hover { background-size: 20px; } table .quick-edit-trigger:before { content: ""; height: 100%; width: 100px; background: linear-gradient(to right, rgb(from var(--bg-subtle) r g b / 0) 0%, var(--bg-subtle) 85%); position: absolute; top: 0; right: 20px; transition: all .35s; } table tr.quick-edit { width: 100%; background: var(--bg-gray); } table tr.quick-edit td { padding: 0; } table tr.quick-edit .delete { margin: 0; position: static; visibility: visible; opacity: 1; } table tr.quick-edit .category-editor, table tr.quick-edit .tag-editor { float: left; width: 50%; padding: 15px; position: relative; } table tr.quick-edit .category-editor:after { content: ""; width: 1px; height: 100%; background: var(--table-border); position: absolute; top: 0; right: 0; } table tr.quick-edit .tag-editor:after { content: ""; width: 1px; height: 100%; background: var(--table-border); position: absolute; top: 0; left: -1px; } table tr.quick-edit .category-editor #quick-edit-category-list { overflow: hidden; margin-top: 7px; } table tr.quick-edit .category-tag-editor .category-list { clear: both; overflow: hidden; margin-top: 10px; } table tr.quick-edit .category-editor .bootstrap-select { width: 100%; } table tr.quick-edit .category-editor .bootstrap-select .text-muted { color: var(--color-blue2); padding: 0; } table tr.quick-edit .category-editor .item-category { float: left; font-weight: 600; line-height: 24px; margin-right: 20px; } table tr.quick-edit .category-editor .item-category .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; cursor: pointer; } table tr.quick-edit .category-editor .item-category .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } table tr.quick-edit .category-editor .item-category .delete:focus { outline: none; } table tr.quick-edit .tag-editor .tag-group-container { margin-bottom: 7px; } table tr.quick-edit .tag-editor .tag-group-container > span { display: inline-block; width: 100px; color: var(--text-darkest); font-weight: 600; } table tr.quick-edit .bootstrap-select { width: calc(100% - 100px); } table tr.quick-edit .bootstrap-select .btn { height: 34px; font-size: 13px; line-height: 34px; padding: 0 20px 0 10px; } /* just to override TABLE .BTN */ table tr.quick-edit .bootstrap-select .filter-option { line-height: 32px; } /* Status */ table .status-indicator { height: 100%; position: absolute; top: 0; left: 0px; } table .status-indicator .status { display: block; height: 100%; width: 3px; text-indent: -9999px; } table .status-indicator .enabled { background: var(--color-green2); } table .status-indicator .disabled { background: var(--color-red); } table .status-indicator .temporary { background: var(--color-yellow2); } table tr.status-pending .status, table tr.status-pending .status_f { /* color: var(--color-yellow3); */ font-style: italic; color: var(--text-lightest); } table tr.status-pending .amount, table tr.status-pending .amount_f { font-style: italic; color: var(--text-lightest); } table tr.status-pending td:first-child:before { content: ""; width: 3px; height: 100%; background: var(--color-yellow2); position: absolute; top: 0; left: 0; } table tr.status-failed td:first-child:before { content: ""; width: 3px; height: 100%; background: var(--color-red); position: absolute; top: 0; left: 0; } table tr.status-complete td:first-child:before, table tr.status-completed td:first-child:before { content: ""; width: 3px; height: 100%; background: var(--color-green2); position: absolute; top: 0; left: 0; } /* This is a possible status indicator alternative style to the little code block above. */ /* table tr.status-pending .status, table tr.status-pending .status_f { background: var(--color-yellow2); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-shadow: 0 0 3px rgba(0,0,0,0.2); } table tr.status-pending .amount, table tr.status-pending .amount_f { font-style: italic; color: var(--text-lightest); } table tr.status-failed .status, table tr.status-failed .status_f { background: var(--color-red2); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-shadow: 0 0 3px rgba(0,0,0,0.15);} table tr.status-complete .status, table tr.status-complete .status_f, table tr.status-completed .status, table tr.status-completed .status_f { background: var(--color-green2); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-shadow: 0 0 3px rgba(0,0,0,0.15); } table tr.status-pending .amount, table tr.status-pending .amount_f { font-style: italic; color: var(--text-lightest); } */ /* TR Accordian Slider Arrows */ table .slider-arrow { float: left; width: 20px; height: 32px; text-indent: -9999px !important; cursor: pointer; } table .slider-arrow.ui-collapsed { background: url(../../img/icon-dropdown-arrow.svg) no-repeat center left; } table .slider-arrow.ui-expanded { background: url(../../img/icon-dropdown-arrow-up.svg) no-repeat center left; } table .slider-set { background: var(--bg-gray); } table .slider-set td:first-child { padding-left: 35px; } table tr.level2 td:first-child { padding-left: 65px; } table tr.level3 td:first-child { padding-left: 95px; } table tr.level4 td:first-child { padding-left: 125px; } /* Unplublished */ table tr.unpublished td:first-child:after { content: ""; width: 3px; height: 100%; background: var(--color-red); position: absolute; top: 0; left: 0; } /* Draggable TRs */ /* table tr.ui-draggable td:first-child { padding-left: 13px; } table tr.ui-draggable td:first-child:before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 100%; background: url(../../img/icon-draggable.svg) no-repeat center; background-size: 5px auto; background-color: var(--bg-gray); opacity: 0.75; border-right: 1px solid var(--table-border); text-align: center; cursor: grab; } table tr.ui-draggable.unpublished td:first-child:after { left: 13px; } */ /* Pagination */ .cnd-pagination { background: var(--bg-table-header); overflow: hidden; font-size: 12px; color: var(--text-lightest); text-align: center; line-height: 50px; -webkit-font-smoothing: antialiased; position: relative; } /* Overflow:hidden on div.block is critical to properly achieving rounded corners in all situations. Unfortuately, this occassionaly cuts off dropdown menus. So I'm trying a wild thing and using images to accomplish perfect rounded corners without the use of overflow:hidden. */ .cnd-pagination:before { content: ""; width: 4px; height: 4px; background: url(../../img/rounded-corner-left-bottom.png); background-size: 4px; position: absolute; bottom: -1px; left: -1px; z-index: 1; } .cnd-pagination:after { content: ""; width: 4px; height: 4px; background: url(../../img/rounded-corner-right-bottom.png); background-size: 4px; position: absolute; bottom: -1px; right: -1px; z-index: 1; } .cnd-pagination button { height: 100%; width: 50px; background: none; border: none; text-indent: -9999px; padding: 0; position: absolute; cursor: pointer; } .cnd-pagination button.next { top: 0; right: 0; } .cnd-pagination button:after { content: ""; height: 0; width: 0; border-style: solid; margin-top: -5px; position: absolute; top: 50%; } .cnd-pagination button.previous:after { border-color: transparent var(--text-lightest) transparent transparent; border-width: 5px 6px 5px 0; left: 20px; } .cnd-pagination button.next:after { border-color: transparent transparent transparent var(--text-lightest); border-width: 5px 0 5px 6px; right: 20px; } .cnd-pagination button.next:hover:after { border-color: transparent transparent transparent var(--text-default); } .cnd-pagination button.previous:hover:after { border-color: transparent var(--text-default) transparent transparent; } .cnd-pagination button.previous { top: 0; left: 0; } .cnd-pagination .current-page:before { content: "Page "; } .cnd-pagination .total-page:before { content: " of "; } .cnd-pagination .total-item:before { content: "|"; padding: 0 5px 0 6px; } .cnd-pagination .total-item:after { content: " Total Items"; } /* People Manager Index Table */ table.people { } table.people .name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; padding-left: 18px; } table.people .name a { float: left; color: var(--text-darkest); } table.people .name .person-type { display: none; } table.people .name .parent_name { float: left; font-size: 11px; font-weight: normal; color: var(--color-red); margin-left: 10px; margin-top: 4px; } table.people tr.quick-edit .tag-editor .tag-group-container > span { display: inline-block; width: 150px; color: var(--text-darkest); font-weight: 600; } table.people tr.quick-edit .tag-editor .tag-group-container .bootstrap-select { width: calc(100% - 150px); } .waiting-for-results-ppl { width: 100%; height: calc(100% - 56px); background-color: rgba(255,255,255,0.92); position: absolute; top: 55px; z-index: 1000; } /* ================================================================================== */ /* == Forms ========================================================================= */ /* ================================================================================== */ fieldset { border: none; padding: 0; } .form-list { -webkit-font-smoothing: antialiased; } .form-list > li { /* height: 40px; */ clear: both; margin-bottom: 15px; } .form-list > li:last-child { margin-bottom: 0; } .form-list > li label { float: left; width: 150px; line-height: 18px; color: var(--text-darkest); font-weight: 600; padding: 11px 5px 10px 0; } /* .form-list > li.required label:after { content: "*"; color: var(--color-red); margin-left: 4px; font-size: 18px; vertical-align: top; } */ .form-list > li .required-flag { color: var(--color-red); font-size: 18px; margin-left: 4px; vertical-align: top; } .form-list > li input, .form-list > li textarea { height: 40px; width: calc(100% - 150px); background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; } .slider .form-list > li input, .slider .form-list > li textarea { background: #fff; } .form-list > li textarea { display: block; min-height: 70px; padding: 9px 13px; } .form-list > li input.disabled { filter: alpha(opacity=65); box-shadow: none; cursor: not-allowed; opacity: 0.65; } .form-list > li .bootstrap-select { width: calc(100% - 150px); } .form-list > li .bootstrap-select .dropdown-toggle { background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; font-weight: 600; } .slider .form-list > li .bootstrap-select .dropdown-toggle { background: #fff; } .form-list > li .bootstrap-select .bs-placeholder { color: var(--text-lightest); } .form-list > li .bootstrap-select .caret { border-top-color: var(--text-lightest); } .form-list > li .toggle-switch { display: inline-block; margin-top: 11px; } .form-list.form-list--full-width { } .form-list.form-list--full-width > li label { float: none; display: block; width: 100%; padding: 0 0 8px 0; } .form-list.form-list--full-width > li input, .form-list.form-list--full-width > li textarea { width: 100%; } .form-list li input::-webkit-input-placeholder { color: var(--text-lightest); } .form-list li input:-moz-placeholder { color: var(--text-lightest); } .form-list li input::-moz-placeholder { color: var(--text-lightest); } .form-list li input:-ms-input-placeholder { color: var(--text-lightest); } input.input-icon--dollar { background-image: url(../../img/icon-currency-dollar.svg) !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 13px !important; padding-left: 24px !important; } input.input-icon--pound { background-image: url(../../img/icon-currency-pound.svg) !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 13px !important; padding-left: 25px !important; } input.input-icon--euro { background-image: url(../../img/icon-currency-euro.svg) !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 13px !important; padding-left: 26px !important; } input.input-icon--yen { background-image: url(../../img/icon-currency-yen.svg) !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 13px !important; padding-left: 26px !important; } input.input-icon--cent { background-image: url(../../img/icon-currency-cent.svg) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 13px !important; padding-right: 30px !important; } input.input-icon--number { background-image: url(../../img/icon-currency-number.svg) !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 13px !important; padding-left: 24px !important; } input.input-icon--percent { background-image: url(../../img/icon-currency-percent.svg) !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 13px !important; padding-right: 30px !important; } .form-list .input-box { display: inline-block; height: 40px; width: calc(100% - 150px); background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; overflow: hidden; line-height: 38px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; position: relative; } .form-list .input-box--textarea { height: auto; min-height: 40px; line-height: normal; padding: 9px 13px; } .slider .form-list .input-box, .slider .form-list .input-box--textarea { background: #fff; } .form-list .sub-text { display: block; font-size: 12px; line-height: 1.5; color: var(--text-lightest); margin: 4px 10px 11px 150px; cursor: pointer; } .form-list .sub-text.vo-error { color: var(--color-red); } .form-list .sub-link { display: block; font-size: 12px; line-height: 1.5; color: var(--color-blue2); margin: 4px 10px 11px 150px; cursor: pointer; } .form-list.credit-card { } .form-list.credit-card > li { position: relative; } .form-list.credit-card > li.number .vo-card-type { position: absolute; top: 11px; right: 10px; } .form-list.credit-card > li.expiration { height: 40px; } .form-list.credit-card > li.expiration .bootstrap-select { float: left; width: calc((100% - 164px) / 2); } .form-list.credit-card > li.expiration .bootstrap-select:last-child { float: right; } /* Drag and Drop image in form list */ .form-list > li.image-upload { } .form-list > li.image-upload .vo-files { display: inline-block; width: calc(100% - 150px); padding: 0 0 1px 0; } .form-list > li.image-upload .vo-files .no-results { border: none; } .form-list > li.image-upload .drop-files-prompt { height: 150px; background-size: 36px; background-position: center 36px; background-color: var(--bg-subtle); border: 1px dashed var(--checkbox-border); border-radius: 3px; font-size: 14px; padding-top: 78px; } .form-list > li.image-upload .drop-files-prompt span { font-size: 16px; } .form-list > li.image-upload .vo-files .image { height: 140px; background-color: var(--bg-subtle); background-origin: content-box; border: 1px solid var(--color-border); box-shadow: none; border-radius: 3px; overflow: hidden; padding: 0px; } .form-list > li.image-upload .vo-files .name { font-size: 12.5px; color: var(--text-lightest); } .form-list > li.image-upload .vo-files ul li { width: 200px; } .form-list > li.image-upload .vo-files ul .image-controls { backdrop-filter: blur(2px); background: rgba(246,249,255,0.3); } .form-list > li.image-upload .vo-files ul .image-controls button { box-shadow: 0 0 4px rgba(246,249,255,0.3), 0 0 12px rgba(246,249,255,0.3), 0 0 25px rgba(246,249,255,0.3); } .form-list > li.image-upload .vo-files ul li.bad { } /* File type not allowed */ .form-list > li.image-upload .vo-files ul li.bad .image { border-color: var(--color-red); color: var(--color-red); } .form-list > li.image-upload .vo-files ul li.bad .progress-bar { display: none; } .form-list > li.image-upload .vo-files ul li.bad .error-controls .remove { display: block; width: 100%; background: var(--color-red); border: none; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; text-align: center; padding: 7px; margin-top: 10px; cursor: pointer; } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ /* Activity Dock Begins Below */ #dock-container { display: none; width: 400px; background: rgba(255,255,255,0.95); box-shadow: 0 3px 10px rgba(0,0,0,0.2); border-radius: 5px; padding: 20px; z-index: 999; position: fixed; bottom: 20px; left: 20px; opacity: .95; } #activity-dock h2 { margin: 0 0 5px 0; } /* ================================================================================== */ /* == User Profile ================================================================== */ /* ================================================================================== */ /* -- Profile Dashboard ------------------------------------------------------------- */ .profile-dashboard {} /* Cards Bar */ .profile-dashboard .cards-bar { display: flex; background: #fff; border: 1px solid var(--color-border); border-radius: 5px; margin-bottom: 40px; } .profile-dashboard .cards-bar .card { flex: 1; border-radius: 0; border: none; border-right: 1px solid var(--color-border); margin: 0; padding: 20px; } .profile-dashboard .cards-bar .card:last-child { border: none; } .profile-dashboard .cards-bar .card label { display: block; text-transform: uppercase; font-weight: 600; color: var(--text-lightest); font-size: 12px; margin-bottom: 5px; } .profile-dashboard .cards-bar .card .number { display: inline-block; color: var(--text-darkest); font-size: 30px; margin-bottom: -4px; } .profile-dashboard .cards-bar .card:nth-child(1) label { color: var(--color-red); } .profile-dashboard .cards-bar .card:nth-child(2) label { color: var(--color-green); } .profile-dashboard .cards-bar .card:nth-child(3) label { color: var(--color-blue2); } .profile-dashboard .cards-bar .extra-info { font-size: 13px; margin-left: 8px; } .profile-dashboard .cards-bar .card--account-status { background: var(--text-default); color: #fff; } .profile-dashboard .cards-bar .card--account-status.enabled { background: var(--color-green2); } .profile-dashboard .cards-bar .card--account-status.disabled { background: var(--color-red); } .profile-dashboard .cards-bar .card--account-status.temporary { background: var(--color-yellow3); } .profile-dashboard .cards-bar .card--account-status .number { color: #fff !important; } .profile-dashboard .cards-bar .card--account-status h3, .profile-dashboard .cards-bar .card--account-status label { color: rgba(255,255,255,0.75) !important; } /* Note Builder */ .profile-dashboard .vo-note-builder { } .profile-dashboard .vo-note-builder .item { border: 1px solid var(--color-border); border-radius: 5px; box-shadow: rgba(9, 30, 66, 0.05) 0px 4px 8px -2px; margin: 20px 0; position: relative; } .profile-dashboard .vo-note-builder .item:first-child { margin-top: 0; } .profile-dashboard .vo-note-builder .item:last-child { margin-bottom: 0; } .profile-dashboard .vo-note-builder .item .title-bar { overflow: hidden; border-bottom: 1px solid var(--color-border); padding: 10px 38px 9px 10px; } .profile-dashboard .vo-note-builder .item .title-bar h3 { float: left; margin: 0; } .profile-dashboard .vo-note-builder .item .title-bar span.vo-time-passed { float: right; color: var(--text-lightest); font-size: 12px; font-weight: 400; margin-top: 1px; } .profile-dashboard .vo-note-builder .item .btn-more { top: 6px; right: 7px; } .profile-dashboard .vo-note-builder .item .btn-more .dropdown-toggle { transform: scale(0.8); } /* .profile-dashboard .vo-note-builder .item .btn-more .dropdown-toggle { border: none; background-color: transparent !important; transform: rotate(90deg); background-size: 12px !important;} */ .profile-dashboard .vo-note-builder .item .input-box { padding: 15px; } .profile-dashboard .vo-note-builder .item .input-box h3:empty { display: none; } .profile-dashboard .vo-note-builder .item .input-box p { margin-bottom: 7px; } .profile-dashboard .vo-note-builder .item .input-box p:last-child { margin-bottom: 0; } .profile-dashboard .vo-note-builder .item .ticket-number:before { content: "Note"; } .profile-dashboard .vo-note-builder .item .ticket-number { float: left; background: rgba(35,157,239, 0.25); border: 1px solid rgba(35,157,239, 0.25); border-radius: 3px; color: var(--color-blue2); font-size: 12px; line-height: 1.5; padding: 0 5px; margin-right: 7px; } .profile-dashboard .vo-note-builder .item.ticket-open .ticket-number:before { content: "Ticket "; } .profile-dashboard .vo-note-builder .item.ticket-open .ticket-number { background: rgba(54,175,71,0.25); border: 1px solid rgba(54,175,71,0.25); color: var(--color-green); } .profile-dashboard .vo-note-builder .item.ticket-closed .ticket-number:before { content: "Ticket "; } .profile-dashboard .vo-note-builder .item.ticket-closed .ticket-number:after { content: " Closed"; } .profile-dashboard .vo-note-builder .item.ticket-closed .ticket-number { background: rgba(248, 107, 103,0.25); border: 1px solid rgba(248, 107, 103,0.25); color: var(--color-red2); } .profile-dashboard .vo-note-builder .item.ticket-closed { background: var(--bg-gray); } .profile-dashboard .vo-note-builder .vo-show-closed-tickets { display: block; font-weight: 600; color: var(--text-lightest); /* font-size: 13px; */ text-align: center; cursor: pointer; } .profile-dashboard .vo-note-builder .edit-mode { background: var(--bg-body); border: 1px solid var(--checkbox-border); border-radius: 5px; box-shadow: rgba(9, 30, 66, 0.05) 0px 4px 8px -2px; padding: 10px; margin-bottom: 20px; } .profile-dashboard .vo-note-builder .edit-mode input { width: 100%; border: 1px solid var(--checkbox-border); } .profile-dashboard .vo-note-builder .edit-mode .tox-tinymce { border: 1px solid var(--checkbox-border); border-radius: 5px; } .profile-dashboard .vo-note-builder .edit-mode .vo-ticket-title { margin-bottom: 10px; } .profile-dashboard .vo-note-builder .edit-mode .new, .profile-dashboard .vo-note-builder .edit-mode .update { overflow: hidden; margin-top: 10px; } .profile-dashboard .vo-note-builder .edit-mode .btn { float: right; min-width: 84px; margin-left: 10px; } /* For adding ticket */ /* .profile-dashboard .vo-note-builder .edit-mode { background: rgba(248, 107, 103,0.25); border: 1px solid rgba(248, 107, 103,0.25); } .profile-dashboard .vo-note-builder .edit-mode input { border: 1px solid rgba(248, 107, 103,0.5); } .profile-dashboard .vo-note-builder .edit-mode .tox-tinymce { border: 1px solid rgba(248, 107, 103,0.5); } */ /* For adding note */ /* .profile-dashboard .vo-note-builder .edit-mode { background: rgba(35,157,239, 0.25); border: 1px solid rgba(35,157,239, 0.25); } .profile-dashboard .vo-note-builder .edit-mode .tox-tinymce { border: 1px solid rgba(35,157,239, 0.35); } */ /* Dashboard Info */ .profile-dashboard .profile-dashboard-info { } .profile-dashboard .profile-dashboard-info label { font-weight: 600; color: var(--text-darkest); } .profile-dashboard .profile-dashboard-info li { margin-bottom: 15px; } .profile-dashboard .profile-dashboard-info .vo-view-as-user a { } .profile-dashboard .profile-dashboard-info .vo-view-as-user a:after { content: ""; display: inline-block; width: 12px; height: 18px; background: url(../../img/icon-open-tab.svg) no-repeat center; background-size: 12px; vertical-align: top; margin-left: 4px; } /* Activity Timeline */ .profile-dashboard .profile-dashboard-timeline {} .profile-dashboard .profile-dashboard-timeline ul { position: relative; } .profile-dashboard .profile-dashboard-timeline ul:before { content: ""; width: 2px; height: 100%; background: var(--text-lightest); position: absolute; top: 0; left: 8px; } .profile-dashboard .profile-dashboard-timeline li { background: #fff; overflow: hidden; padding: 5px 0 5px 30px; margin-bottom: 15px; position: relative; } .profile-dashboard .profile-dashboard-timeline li:last-child { margin: 0; } .profile-dashboard .profile-dashboard-timeline li .activity { float: left; font-weight: 600; color: var(--text-darkest); } .profile-dashboard .profile-dashboard-timeline li .time { float: right; color: var(--text-lightest); font-size: 12px; } .profile-dashboard .profile-dashboard-timeline li:before { content: ""; width: 18px; height: 18px; background: var(--text-lightest); border-radius: 50%; position: absolute; left: 0; } .profile-dashboard .profile-dashboard-timeline li.timeline-canceled:before { background: var(--color-red) url(../../img/icon-timeline-close.svg) no-repeat center; background-size: 13px; } .profile-dashboard .profile-dashboard-timeline li.timeline-error:before { background: var(--color-red) url(../../img/icon-timeline-error.svg) no-repeat center; background-size: 11px; } .profile-dashboard .profile-dashboard-timeline li.timeline-trial:before { background: var(--color-yellow3) url(../../img/icon-timeline-plus.svg) no-repeat center; background-size: 14px; } .profile-dashboard .profile-dashboard-timeline li.timeline-subscribed:before { background: var(--color-green2) url(../../img/icon-timeline-dollar.svg) no-repeat center; background-size: 14px; } .profile-dashboard .profile-dashboard-timeline li.timeline-renewed:before { background: var(--color-green2) url(../../img/icon-timeline-refresh.svg) no-repeat center; background-size: 15px; } .profile-dashboard .profile-dashboard-timeline li.timeline-password:before { background: var(--text-lightest) url(../../img/icon-timeline-key.svg) no-repeat center; background-size: 12px; } /* Plan Summary */ .profile-dashboard .profile-dashboard-plan { } .profile-dashboard .profile-dashboard-plan ul { overflow: hidden; } .profile-dashboard .profile-dashboard-plan li { padding: 20px; } .profile-dashboard .profile-dashboard-plan li:nth-child(1) { border-bottom: 1px solid var(--color-border); } .profile-dashboard .profile-dashboard-plan li:nth-child(1) span { display: block; font-style: italic; color: var(--text-lightest); font-size: 13px; } .profile-dashboard .profile-dashboard-plan li:nth-child(2) { float: left; width: 50%; border-right: 1px solid var(--color-border); /* background: var(--bg-gray); */ } .profile-dashboard .profile-dashboard-plan li:nth-child(3) { float: right; width: 50%; /* background: var(--bg-gray); */ } .profile-dashboard .profile-dashboard-plan label { font-weight: 600; color: var(--text-darkest); } /* Go To Tab Link */ .profile-dashboard .go-to-tab { background: var(--bg-gray); border-top: 1px solid var(--color-border); font-size: 13px; color: var(--text-lightest); padding: 15px 20px; cursor: pointer; } .profile-dashboard .go-to-tab:after { content: ""; display: inline-block; width: 12px; height: 14px; background: url(../../img/icon-arrow-right.svg) no-repeat center; background-size: 14px; vertical-align: -3px; margin-left: 2px; opacity: 0.75; } /* -- Profile Tab ------------------------------------------------------------------- */ #profile-top { display: flow-root; } /* Profile Information Block */ #tab-profile #profile .email { margin-bottom: 15px; } /* Account Information Block */ #tab-profile #account-info .temporary-access .input-box .btn { position: absolute; top: 8px; right: 8px; } #tab-profile #account-info .temporary-access .input-box img { float: left; margin: 11px 6px 0 -2px; } #tab-profile #account-info #email-invitation { } #tab-profile #account-info #email-invitation .input-box .btn { position: absolute; top: 8px; right: 8px; } #tab-profile #account-info #email-invitation .vo-last-sent-message { margin-right: 10px; } @media only screen and (max-width: 1210px) { #tab-profile #account-info #email-invitation .vo-last-sent-message span:first-child { display: none; } } #tab-profile #account-info #change-password .input-box { cursor: not-allowed; pointer-events: none; } #tab-profile #account-info #change-password .input-box .btn { position: absolute; top: 8px; right: 8px; pointer-events: auto; } /* Address Block */ #profile-top #address { } #profile-top #address li { float: left; width: 50%; } #profile-top #address li.validated h3:after { content: "Verified"; background: var(--color-green2) url(../../img/icon-check-white.svg) no-repeat 3px center; background-size: 11px; border-radius: 3px; color: #fff; font-size: 11px; line-height: 1.5; padding: 1px 5px 1px 16px; vertical-align: 1px; margin-left: 10px; } #profile-top #address .edit { display: block; margin-top: 7px; } /* IP Addresses */ #allowed-ip #toggle-ip-formats { color: var(--color-primary); font-weight: 600; cursor: pointer; } #allowed-ip #toggle-ip-formats .icon { display: inline-block; width: 14px; height: 14px; background: url(../../img/icon-long-arrow-right.svg) no-repeat center 2px; background-size: contain; } #allowed-ip #supported-ip-formats { display: none; background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 4px; padding: 20px 20px 15px 20px; margin-top: 10px; transition: all 0.3s ease-out; } #allowed-ip #supported-ip-formats.active { display: block; } #allowed-ip #supported-ip-formats h3 { color: var(--color-primary); margin-bottom: 15px; } #allowed-ip #supported-ip-formats strong { color: var(--text-darkest); font-weight: 600; } #allowed-ip #supported-ip-formats code { font-size: 12px; } #allowed-ip #supported-ip-formats ul li { margin: 5px 0; } #allowed-ip .list-builder .list-builder-primary > span { font-family: monospace; font-size: 13px; } /* List Selector */ .voListParentChildSelector li { overflow: hidden; padding: 6px 0; } .voListParentChildSelector > li:first-child { padding-top: 0; } .voListParentChildSelector > li:last-child { padding-bottom: 0; } .voListParentChildSelector .children li { margin-left: 26px; } .voListParentChildSelector .children li:first-child { padding-top: 12px; } .voListParentChildSelector .children li:last-child { padding-bottom: 0; } .voListParentChildSelector .checkbox { float: left; margin-right: 10px; vertical-align: -2px; } .voListParentChildSelector li label { width: auto; line-height: 16px; font-weight: normal; color: var(--text-default); padding: 0; } .voListParentChildSelector .subscriber-count { color: var(--color-primary); font-weight: 600; font-size: 13px; margin-left: 5px; } .voListParentChildSelector.vo-no-plan { border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 12px; } /* the no-plan row sits above the plan list it belongs with */ /* List Builder */ .list-builder { } .list-builder form .new, .list-builder form .update { float: right; } .list-builder form input { width: calc(100% - 90px); height: 40px; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; margin-bottom: 10px; padding: 0 13px; } .list-builder form input:last-of-type { margin-bottom: 0; } .list-builder form button { float: left; width: 80px; margin: 0 0 0 10px; } .list-builder ul.item-list li { margin-bottom: 7px; padding: 0; } .list-builder ul.item-list li .count { color: var(--color-primary); font-weight: 600; font-size: 13px; margin-left: 4px; } .list-builder .toolbar { float: right; background: none; font-size: 11px; padding: 0; } .list-builder .toolbar .delete, .list-builder .toolbar .edit { float: right; font-weight: 600; color: var(--color-red); margin-left: 10px; cursor: pointer; } .list-builder .add-new-item { font-weight: 600; color: var(--color-red); cursor: pointer; } .list-builder .cancel { display: none !important; } /* Hiding the cancel button. Let's see whether or not we can simplify and live without it. */ .list-builder .list-builder-primary > span { cursor: grab; } .list-builder .list-builder-primary > span.edit { color: inherit; font-weight: inherit; } .list-builder .list-builder-primary > form input { /* width: calc(100% - 230px); */ } .list-builder .list-builder-primary > form .bootstrap-select { width: 130px; vertical-align: top; } .list-builder .list-builder-primary > form .bootstrap-select .btn { background: var(--bg-subtle); border: 1px solid var(--color-border); } .list-builder .list-builder-children { margin-left: 20px; margin-top: 7px; } .list-builder .list-builder-children .vo-view { display: inline-block; } .list-builder .list-builder-children .vo-add { font-weight: 600; color: var(--color-red); font-size: 11px; cursor: pointer; cursor: pointer; } .list-builder .list-builder-children .vo-edit { cursor: pointer; } .list-builder .list-builder-children input { width: 100%; } .list-builder .list-builder-children > li:hover { background: var(--bg-gray); } .list-builder .list-builder-children .vo-app-id { color: var(--color-primary); font-weight: 600; font-size: 13px; } .list-builder .list-builder-children .toolbar { margin: 2px 10px 0 0; } .list-builder .vo-tag-extend { background: #fff; padding: 7px 0; } .list-builder .vo-tag-extend { background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; padding: 14px 15px 7px 15px; margin: 14px 0; } .list-builder .vo-tag-extend input, .list-builder .vo-tag-extend .bootstrap-select .dropdown-toggle { background: #fff; } /* .list-builder .vo-tag-extend > li { margin-bottom: 15px !important; } */ .list-builder .vo-tag-extend .bootstrap-select li { margin-bottom: 0; } .list-builder .vo-tag-extend input { width: calc(100% - 150px); } .list-builder .vo-regex-body { color: var(--color-yellow3); } .list-builder .vo-regex-flag { color: var(--color-green); } .list-builder .vo-regex-delimiter-span { padding: 0 1px; } .list-builder .wildcard { color: var(--color-red); font-size: 1.6em; line-height: 8px; vertical-align: -7px; padding: 0 1px; } /* A list builder that matches the ul.form-list styles */ .form-list-item-creator.list-builder { } .form-list-item-creator.list-builder label { float: left; width: 150px; line-height: 18px; color: var(--text-darkest); font-weight: 600; padding: 11px 5px 10px 0; cursor: grab; } .form-list-item-creator.list-builder li:active label { cursor: grabbing; } .form-list-item-creator.list-builder .input-box { display: inline-block; height: 40px; width: calc(100% - 150px); background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; overflow: hidden; line-height: 38px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; position: relative; position: relative; cursor: default; } .form-list-item-creator.list-builder .input-box .edit { color: var(--text-darkest); cursor: text; } .form-list-item-creator.list-builder .item:hover .input-box { width: calc(100% - 180px); } .form-list-item-creator.list-builder .delete { display: none; float: right; width: 20px; height: 20px; background: url(../../img/icon-delete.svg) no-repeat center; background-size: 18px; border-radius: 50%; text-indent: -9999px; margin-top: 9px; cursor: pointer; transition: all .2s ease-in-out; } .form-list-item-creator.list-builder .delete:hover { transform: scale(1.1); } .form-list-item-creator.list-builder .item:hover .delete { display: block; } .form-list-item-creator.list-builder .add-new-item { float: right; } /* Address Modal */ #dialog-address-book { height: 570px !important; padding: 0; } .address-book { } .address-book h2 { margin-bottom: 15px; } .address-book .left-column { float: left; width: 57%; padding: 20px; } .address-book .right-column { float: right; width: 43%; border-left: 1px solid var(--color-border); } .address-book .right-column h2 { padding: 20px 20px 0 20px; margin-bottom: 0; } .address-book .right-column h2:before { content: ""; width: calc(43% - 1px); height: 25px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); position: absolute; top: 44px; right: 0; z-index: 1; pointer-events: none; } .address-book .right-column h2:after { content: ""; width: calc(43% - 1px); height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); position: absolute; bottom: 0px; right: 0; z-index: 1; pointer-events: none; } .address-book #recent-addresses { height: 526px; overflow: hidden; overflow-y: auto; position: relative; } .address-book #recent-addresses .click-address-new { width: calc(100% - 40px); margin: 14px 0 0 20px; } .address-book #recent-addresses .button-footer { overflow: hidden; border-top: none; padding: 11px 0 0 0; margin: 0; } .address-book #recent-addresses .button-footer button { float: left; background: none; border: none; font-size: 12px; color: var(--color-red); margin-right: 10px; padding: 0; cursor: pointer; } .address-book #recent-addresses .button-footer button.click-address-delete { float: right; margin: 0; } .address-book #recent-addresses .button-footer button.click-address-edit { border-left: 1px solid var(--color-border); padding-left: 10px; } .address-book .addresses { font-size: 13px; } .address-book .addresses li { border-bottom: 1px solid var(--color-border); overflow: hidden; padding: 16px 20px; } .address-book .addresses li .alias { font-weight: bold; color: var(--text-darkest); } .address-book #edit-address .button-footer { border-top: 1px solid var(--color-border); padding: 20px; margin: 20px -20px -20px -20px; } .address-book .form-list { font-size: 13px; } .address-book .form-list > li { clear: both; margin-bottom: 10px; } .address-book .form-list > li label { line-height: 32px; } .address-book .form-list > li .required-flag { font-size: 15px; } .address-book .form-list > li input, .address-book .form-list > li textarea { height: 32px; font-size: 13px; padding: 0 10px; } .address-book .form-list > li .bootstrap-select { height: 32px; } .address-book .form-list > li .bootstrap-select .dropdown-toggle { height: 32px; line-height: 32px; font-size: 13px; padding: 0 10px; } /* Tags */ #tab-profile .category-tag-editor {} #tab-profile .category-tag-editor .tag-editor .tag-group-container { clear: both; margin-bottom: 15px; } #tab-profile .category-tag-editor .tag-editor .tag-group-container:last-child { margin: 0; } #tab-profile .category-tag-editor .tag-editor .tag-group-container > span { float: left; width: 150px; color: var(--text-darkest); font-weight: 600; line-height: 18px; padding: 11px 5px 10px 0; } #tab-profile .category-tag-editor .tag-editor .tag-group-container .bootstrap-select { width: calc(100% - 150px); } #tab-profile .category-tag-editor .tag-editor .tag-group-container .bootstrap-select .dropdown-toggle { height: 40px; background: var(--bg-subtle); border: 1px solid var(--color-border); line-height: 38px; font-size: 14px !important; padding: 0 25px 0 15px !important; } /* -- Members Tab ------------------------------------------------------------------- */ #tab-members .member-limit { font-style: italic; font-size: 13px; margin-left: -3px; opacity: 0.75; } #tab-members .add-members-block { } #tab-members .add-members-block .add-member { overflow: hidden; padding: 10px; } #tab-members .add-members-block .add-member > input { float: left; width: calc((100% - 240px) / 2); margin-right: 10px; } #tab-members .add-members-block .btn { float: left; } #tab-members .add-members-block .send-invite-container { float: left; width: 95px; margin: 12px 0 0 10px; } #tab-members .add-members-block .send-invite-container .checkbox { float: left; margin-right: 5px; } #tab-members .add-members-block .error-message, #tab-members .add-members-block .success-message { margin-bottom: 10px; padding: 10px 11px; } #tab-members tr { position: relative; } #tab-members tr:before { content: ""; height: 100%; width: 3px; position: absolute; top: 0; left: 0px; z-index: 1; } #tab-members tr td:first-child { padding-left: 18px; } #tab-members tr.enabled:before { background: var(--color-green2); } #tab-members tr.disabled:before { background: var(--color-red); } #tab-members tr.admin td:first-child:after { content: "Admin"; background: var(--color-yellow3); border-radius: 3px; color: #fff; font-size: 12px; padding: 4px 5px; vertical-align: 1px; margin-left: 7px; } /* -- Activity Tab ------------------------------------------------------------------ */ #tab-user-activity .cnd-user-activity table td { } #tab-user-activity .cnd-user-activity table td:nth-child(2), #tab-user-activity .cnd-user-activity table td:nth-child(3) { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; } /* -- Plans Tab --------------------------------------------------------------------- */ #tab-plans { } #tab-plans .row { display: flex; border-top: 1px solid var(--color-border); } #tab-plans .row:first-child { border: none; } #tab-plans .row .col { width: 27%; border-left: 1px solid var(--color-border); padding: 20px; } #tab-plans .row .col:first-child { min-width: 46%; border: none; } #tab-plans .row .calendar-icon { vertical-align: -3px; margin-left: 1px; cursor: pointer; } #tab-plans #vo-toggle-canceled-subscriptions { float: none; background: url(../../img/icon-arrow-down-white.svg) no-repeat right; margin: 0; cursor: pointer; } #tab-plans .row .status { color: var(--color-red2); font-weight: 600; margin-bottom: 3px; } /* Cancelled, Suspended, Expired, Failed is red */ #tab-plans .row [data-status-type^="Active"] { color: var(--color-green); } /* Active is green */ #tab-plans .row [data-status-type^="Pend"], #tab-plans .row [data-status-type^="Not"] { color: var(--color-yellow3); } /* Pending and Not Set is yellow */ #tab-plans .row .status.flag-admin:after { content: "Admin"; background: var(--color-yellow3); border-radius: 3px; color: #fff; font-size: 12px; line-height: 1.5; padding: 1px 5px; vertical-align: 0.6px; margin-left: 5px; } #tab-plans .row .edit { display: block; margin-top: 7px; } #tab-plans .row .vo-open-giver-account, #tab-plans .row .vo-gift-unclaimed, #tab-plans .row .vo-open-recipient-account { display: block; font-weight: 600; margin-top: 3px; } #tab-plans .row input { display: block; height: 34px; width: 100%; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; margin: 7px 0; } #tab-plans li.validated h3:after { content: "Verified"; display: block; width: 63px; background: var(--color-green2) url(../../img/icon-check-white.svg) no-repeat 3px center; background-size: 11px; border-radius: 3px; color: #fff; font-size: 11px; line-height: 1.5; margin: 11px 0 0 0; padding: 1px 5px 1px 16px; } #tab-plans .subscription-status { line-height: 1.45; } #tab-plans .subscription-status .plan-controls { margin: 14px 0 0 0; } #tab-plans .subscription-status .plan-controls .btn { display: inline-block; color: var(--text-darkest); margin-right: 3px; margin-top: 0; } #tab-plans .subscription-status .vo-renew-subscription, #tab-plans .subscription-status .vo-extend-subscription { font-weight: 600; color: var(--color-red); font-size: 13px; margin-left: 5px; cursor: pointer; } #tab-plans .subscription-status .detail { font-size: 12px; font-style: italic; color: var(--text-lightest); margin: -3px 0 3px 0; } #tab-plans .subscription-payment { } #tab-plans .subscription-payment .stars { font-size: 1.3rem; line-height: 1rem; vertical-align: -5px; } #tab-plans .subscription-payment .cc-type { color: var(--color-blue2); font-weight: 600; margin-bottom: 3px; } #tab-plans .subscription-payment .vo-auth-method { font-size: 12px; font-style: italic; color: var(--text-lightest); margin-top: 14px; } #subscription-payment-slider { padding: 20px; } #tab-plans .vo-claim-gift { background: var(--bg-gray); border-bottom: 1px solid var(--color-border); padding: 20px; } #tab-plans .vo-claim-gift input { float: left; width: calc(100% - 150px); margin-right: 10px; } /* Stripe Payment Input */ .StripeElement { height: 40px; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 11px 13px; } .StripeElement--focus { border-color: var(--color-blue2); } .StripeElement--invalid { border-color: var(--color-red); } .slider .StripeElement { background: #fff; } /* Braintree Payment Inputs */ .braintree-card-element { } .braintree-card-element .input-box.braintree-hosted-fields-focused { outline: none; border-color: var(--color-primary) !important; } .braintree-card-element .input-box.braintree-hosted-fields-invalid { border-color: var(--color-red) !important; } /* Subscription Status Slider */ #subscription-change-slider { display: flex; flex-wrap: wrap; padding: 0; } #subscription-change-slider:after { content: ""; display: table; clear: both; } #subscription-change-slider .choose-plan { float: left; width: 55%; border-right: 1px solid var(--color-border); padding: 20px; } #subscription-change-slider .choose-plan .form-list { } #subscription-change-slider .choose-plan .bootstrap-select { } #subscription-change-slider .choose-plan .bootstrap-select li small { color: var(--color-blue2); } #subscription-change-slider .choose-plan .button-footer { border-color: var(--color-border); } #subscription-change-slider .plan-options { float: right; width: 45%; background: var(--color-primary); color: rgba(255,255,255,0.8); padding: 20px; } #subscription-change-slider .plan-options h2, #subscription-change-slider .plan-options h3 { color: #fff; } #subscription-change-slider .plan-options .section-heading { } #subscription-change-slider .plan-options .edit { color: var(--color-yellow2); } #subscription-change-slider .plan-options .payment-details-default ul { margin-bottom: 7px; } #subscription-change-slider .plan-options .tooltip { background: var(--color-dark-blue); } #subscription-change-slider .plan-options .item .checkbox { float: left; margin-right: 7px; } #subscription-change-slider .plan-options .option { margin-bottom: 7px; } #subscription-change-slider .plan-options input { height: 40px; width: 100%; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; } #subscription-change-slider .plan-options .if-trial .bootstrap-select { float: right; width: calc(100% - 135px); } #subscription-change-slider .button-footer { border-color: rgba(255,255,255,0.25); line-height: 40px; } #subscription-change-slider .button-footer .submit-subscription-change, #subscription-change-slider .button-footer .email { float: right; } #subscription-change-slider .button-footer .email { margin-right: 10px; } #subscription-change-slider .button-footer .email .checkbox { float: left; margin-right: 10px; margin-top: 11px; } #subscription-change-slider .button-footer .email.disabled { opacity: 0.6; cursor: default; } #subscription-change-slider .button-footer .cancel-subscription { float: left; } #subscription-change-slider .details, #subscription-change-slider .plan-block, #subscription-change-slider .invoice-block, #subscription-change-slider .payment-block { margin-bottom: 20px; } #subscription-change-slider .plan-block .bootstrap-select { width: 100%; } #subscription-change-slider .section-title { position: relative; } #subscription-change-slider .section-title .btn { position: absolute; right: 20px; } #subscription-change-slider .vo-gift { overflow: hidden; } #subscription-change-slider .vo-gift p { float: left; } #subscription-change-slider .vo-gift .toggle-switch { float: right; } #subscription-change-slider .plan-options .card { } #subscription-change-slider .plan-options .card .edit { float: right; margin-top: 7px; } #subscription-change-slider .plan-options .card { background: rgba(255,255,255,0.1); border-radius: 3px; padding: 15px 15px 10px 15px; } #subscription-change-slider .plan-options .card ul.credit-card { } #subscription-change-slider .plan-options .card ul.credit-card > li { clear: both; height: 40px; margin-bottom: 7px; } #subscription-change-slider .plan-options .card ul.credit-card li LABEL { float: left; width: 124px; color: #fff; } #subscription-change-slider .plan-options .card ul.credit-card li input{ float: right; width: calc(100% - 124px) !important; } #subscription-change-slider .plan-options .card ul.credit-card li .bootstrap-select { float: left; width: calc((100% - 134px) / 2); } #subscription-change-slider .plan-options .card ul.credit-card li .bootstrap-select:last-child { float: right; } #subscription-change-slider .plan-options .card .edit { float: right; } /* Combo Plans */ #subscription-change-slider .plan-options .vo-combo-options {} #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker { overflow: hidden; margin: 0 auto 20px auto; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li { float: left; width: 50%; text-align: center; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li input { width: 0; height: 0; position: absolute; left: -9999px; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li label { display: block; height: 32px; width: 100%; line-height: 33px; padding: 0 10px; transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out; cursor: pointer; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li:first-child label { border-radius: 3px 0 0 3px; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li:last-child label { border-radius: 0 3px 3px 0; border-left: none; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li label { background: var(--bg-subtle); color: var(--text-default); font-size: 13px; } #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li input:checked + label { background: var(--color-green); color: #fff; } /* quick fix for when there are three terms */ #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li:nth-child(1):nth-last-child(3), #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li:nth-child(2):nth-last-child(2), #subscription-change-slider .plan-options .vo-combo-options .vo-term-picker li:nth-child(3):nth-last-child(1) { width: 33.3333%; } #subscription-change-slider .plan-options .vo-combo-options .option { overflow: hidden; margin-bottom: 20px; } #subscription-change-slider .plan-options .vo-combo-options .option:last-of-type { margin-bottom: 0; } #subscription-change-slider .plan-options .vo-combo-options .option h2 { font-size: 14px; margin-bottom: 2px; } #subscription-change-slider .plan-options .vo-combo-options .option li { font-size: 13px; } #subscription-change-slider .plan-options .vo-combo-options .option ul li { list-style: disc; margin-left: 20px; } #subscription-change-slider .plan-options .vo-combo-options .option .option-detail { float: left; width: calc(100% - 138px); } #subscription-change-slider .plan-options .vo-combo-options .option .option-selection { float: right; width: 100px; text-align: right; } #subscription-change-slider .plan-options .vo-combo-options .option .option-selection .vo-price { display: block; } #subscription-change-slider .plan-options .vo-combo-options .option .option-selection .vo-original { display: block; text-decoration: line-through; color: var(--text-lightest); font-size: 14px; font-style: italic; margin-top:-3px; } #subscription-change-slider .plan-options .vo-combo-options .option .option-selection .toggle-switch { float: right; } #subscription-change-slider .error-message { flex: 0 0 100%; border-radius: 0; margin: 0; } #subscription-change-slider .error-message div { margin-bottom: 1em; } #subscription-change-slider .error-message div:last-child { margin: 0; } #dialog-change-plan { } #dialog-change-plan .change-options { } #dialog-change-plan .change-options .option { border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; padding: 20px; margin-bottom: 20px; } #dialog-change-plan .change-options .radio { float: left; margin-right: 10px; } #dialog-change-plan .change-options .option .refund input, #dialog-change-plan .change-options .option .charge input { float: left; margin: 10px 0 0 25px; } #dialog-pause-subscription { } #dialog-pause-subscription .when-pause { margin-bottom: 20px; } #dialog-pause-subscription h3, #dialog-resume-subscription h3 { margin-bottom: 10px; } #dialog-pause-subscription .radio, #dialog-resume-subscription .radio { float: left; margin-right: 10px; } #dialog-pause-subscription .option-title, #dialog-resume-subscription .option-title { float: left; } #dialog-pause-subscription .form-list li, #dialog-resume-subscription .form-list li { overflow: hidden; } #dialog-pause-subscription .vo-date-pause, #dialog-pause-subscription .vo-date-resume, #dialog-resume-subscription .vo-date-resume { float: left; margin-left: 6px; } #dialog-pause-subscription .vo-date-pause:before, #dialog-pause-subscription .vo-date-resume:before, #dialog-resume-subscription .vo-date-resume:before { content: "-"; margin-right: 1px; } #dialog-pause-subscription .vo-date-pause .datepick-trigger, #dialog-pause-subscription .vo-date-resume .datepick-trigger, #dialog-resume-subscription .vo-date-resume .datepick-trigger { vertical-align: -3px; margin-left: 1px; cursor: pointer; } /* -- Transaction History Tab ------------------------------------------------------- */ #tab-transactions { } /* -- Orders Tab -------------------------------------------------------------------- */ #tab-orders { } #tab-orders .totals { background: var(--bg-table-header); overflow: hidden; font-size: 14px; color: var(--text-darkest); text-align: right; -webkit-font-smoothing: antialiased; padding: 10px 20px; position: relative; } #tab-orders .totals div { margin: 5px 0; } #tab-orders .totals div span { font-weight: 600; color: var(--text-table-header); } #tab-orders .totals div span .amount { display: inline-block; min-width: 100px; font-weight: normal; color: var(--text-default); } #tab-orders .totals .grand-total span, #tab-orders .totals .vo-net-received span { color: var(--text-darkest) !important; font-weight: 700 !important; } #tab-orders .totals .vo-discounts-applied { margin-top: 10px; } #tab-orders .totals .vo-discounts-applied h3 { color: var(--color-primary); margin: 0 0 1px 0; } #tab-orders .totals .vo-discounts-applied .discount-code { color: var(--color-primary); } #tab-orders .totals .vo-discounts-applied .discount-code:after { content: " - "; padding: 0 1px; } #tab-orders .totals .vo-discounts-applied .discount-code:empty { display: none; } #tab-orders .totals .vo-discounts-applied .discount-name { font-weight: normal; font-style: italic; } #tab-orders .totals .vo-amount-due span { color: var(--color-red) !important; font-weight: 700 !important; } .order-detail { } .order-detail .close-order-detail { float: left; width: 40px; height: 40px; background: #FFF url(../../img/icon-back-arrow.svg) no-repeat center; border: 1px solid var(--color-border); border-radius: 3px; text-indent: -9999px; margin: 6px 18px 0 0; cursor: pointer; } .order-detail .order-header { margin: -7px 0 33px 0; } .order-detail .order-header h1 { font-weight: normal; margin-bottom: 2px; } .order-detail .order-header .separator:after { content: " \\ "; margin: 0 4px 0 6px; } .order-detail .order-header h1 .separator:after { margin: 0 3px; } .order-detail .order-header .vo-order-date, .order-detail .order-header .vo-order-time, .order-detail .order-header .vo-order-created-by { font-size: 16px; color: var(--text-table-header); } .order-detail .order-header .vo-order-created-by a.customer, .order-detail .order-header .vo-order-created-by a.system { color: var(--text-table-header); cursor: text; } .order-detail .order-header .vo-order-date { cursor: pointer; } .order-detail { padding-right: 210px; position: relative; } .order-detail .sidebar { height: calc(100% + 80px); position: absolute; top: -33px; right: -40px; } .order-detail table .delete { right: -10px; } .order-detail table .vo-revert-price { line-height: 10px; padding: 5px 7px; margin-top: 4px; } .order-detail .order-item .title input { width: 100%; } .order-detail .order-item .quantity input { width: 60px; text-align: center; } .order-detail .order-item .add { float: left; width: 115px; } .order-detail .order-item .add .btn { float: right; } .order-detail .order-item .add input { float: left; width: 60px; height: 31px; } .order-detail .order-item .subtotal .price { display: block; } .order-detail .order-item .subtotal .original { text-decoration: line-through; color: var(--text-lightest); font-size: .85em; } .order-detail .transactions .add-gateway-transaction.slider { border-top: none; padding: 20px; } .order-detail .transactions .add-gateway-transaction li.amount { margin-bottom: 15px; } .order-detail .transactions .add-gateway-transaction li.expiration { height: 40px; } .order-detail .transactions .add-gateway-transaction li.expiration .bootstrap-select { float: right; width: calc((100% - 164px) / 2); } .order-detail .transactions .add-gateway-transaction li.expiration .bootstrap-select:first-of-type { float: left; } .order-detail .transactions .add-gateway-transaction .dropdown-toggle { background: #fff; } .order-detail .vo-transactions .add-gateway-transaction.slider { } .order-detail .vo-transactions .add-gateway-transaction.slider .payment-details-default { background: #fff; overflow: hidden; border: 1px solid var(--color-border); border-radius: 5px; padding: 20px; margin-bottom: 20px; } .order-detail .vo-transactions .add-gateway-transaction.slider .payment-details-default .credit-card-mockup, .order-detail .vo-transactions .add-gateway-transaction.slider .payment-details-default .paypal-mockup { float: left; } .order-detail .vo-transactions .add-gateway-transaction.slider .payment-details-default .message { float: left; width: calc(100% - 220px); padding: 23px 0 0 20px; margin: 0; } .order-detail .vo-transactions .add-gateway-transaction.slider .payment-details-default .message .edit { display: block; margin-top: 7px; } .order-detail .vo-transactions table td.number { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; } /* Editable Transaction Cells */ .order-detail .vo-transactions table td.editable { cursor: text; } .order-detail .vo-transactions table td.editable:hover { background: var(--bg-gray); box-shadow: inset 0 0 0 1px var(--color-border-strong); } .order-detail .vo-transactions table td.editable input { width: 100%; } .order-detail .vo-add-catalog-item { } .order-detail .vo-add-catalog-item input { width: 100%; } .order-detail .vo-add-custom-item { } .order-detail .vo-add-custom-item li { float: left; margin-right: 20px; } .order-detail .vo-add-custom-item li:last-child { width: 90px; margin: 0; } .order-detail .vo-add-custom-item input { width: 100%; } .order-detail .vo-add-custom-item li { width: calc(50% - 65px); } .order-detail .transactions .add-offline-transaction.slider { border-top: none; padding: 10px; } .order-detail .transactions .add-offline-transaction table thead, .order-detail .transactions .add-offline-transaction table tr { background: none; border: none; padding: 0; } .order-detail .transactions .add-offline-transaction table th { color: var(--text-darkest); padding-top: 10px; padding-bottom: 0; } .order-detail .transactions .add-offline-transaction table td { padding: 10px; } .order-detail .transactions .add-offline-transaction table input { width: 100%; } .order-detail .transactions .add-offline-transaction table input { height: 40px; width: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; } .order-detail .transactions .add-offline-transaction.slider .button-footer { margin: 10px -10px -10px -10px; } .order-detail .transactions .add-offline-transaction.slider .button-footer .btn { margin-right: 7px; } .order-detail .packages-list { } .order-detail .packages-list .packages li { border-bottom: 1px solid var(--table-border); padding: 15px 20px; cursor: pointer; } .order-detail .packages-list .packages li:last-child { border: none; } .order-detail .packages-list .name { font-weight: 600; color: var(--text-darkest); } .order-detail .shipping-rates { clear: both; background: var(--bg-gray); border: 1px solid var(--table-border); border-radius: 3px; padding: 20px 10px; } .order-detail .shipping-rates > ul { clear: both; display: flex; justify-content: space-between; } .order-detail .shipping-rates li.carrier { flex-grow: 1; padding: 0 10px; } .order-detail .shipping-rates li.carrier .open-add-stamp-postage { width: 14px; line-height: 12px; font-weight: bold; padding: 0; margin: -2px 0 0 5px !important; } .order-detail .shipping-rates li.carrier .bootstrap-select { width: 100%; margin-bottom: 12px; } .order-detail .shipping-rates li.carrier .rate-options li { margin: 12px 0; padding-left: 22px; position: relative; } .order-detail .shipping-rates li.carrier .rate-options li:first-child { margin-top: 0; } .order-detail .shipping-rates li.carrier .rate-options li .radio { position: absolute; top: 0; left: 0; } .order-detail .shipping-rates li.carrier .rate-options li .rate { color: var(--color-blue2); font-weight: 600; } .order-detail .shipping-rates li.carrier .waiting-for-results { height: 120px; margin-bottom: 12px; } .order-detail .ship-package-editor { } .order-detail .ship-package-editor .add-all-block p, .order-detail .ship-package-editor .add-all-block .btn { display: inline-block; margin-right: 5px; } .order-detail .ship-package-editor .shipping-block { overflow: hidden; margin: 20px 0; } .order-detail .ship-package-editor .shipping-block .form-list > li { float: left; clear: none; width: calc((100% - 120px) / 4); margin-right: 10px; } .order-detail .ship-package-editor .shipping-block .form-list > li:last-child { width: 80px; margin: 0; } .order-detail .ship-package-editor .shipping-block .form-list > li input, .order-detail .ship-package-editor .shipping-block .form-list > li .btn { width: 100%; } .order-detail .add-offline-transaction { } .order-detail .add-offline-transaction .error-message { border-radius: 0; margin: -1px 0 0 0; } .order-detail .add-offline-transaction table td:not(:last-child) { padding-right: 0; } .order-detail .add-offline-transaction table input { width: 100%; background-color: #fff; } .order-detail .default-address { } .order-detail .default-address li { float: left; width: 50%; } .order-detail .default-address .edit { display: block; margin-top: 7px; } /* -- Permissions Tab --------------------------------------------------------------- */ #tab-permissions { } /* Permissions List */ .user-groups > li { line-height: 30px; } .user-modules { display: flex; justify-content: space-around; } .user-modules > li { border-right: 1px solid var(--color-border); padding: 20px; } .user-modules > li:last-child { border: none; } .user-modules > li li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 30px; } .user-modules > li h3 { line-height: normal; margin-bottom: 5px; } .user-modules > li .checkbox, .user-groups > li .checkbox { float: left; margin-top: 6px; margin-right: 6px; } /* one item */ .user-modules > li:first-child:nth-last-child(1) { width: 100%; } /* two items */ .user-modules > li:first-child:nth-last-child(2), .user-modules > li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ .user-modules > li:first-child:nth-last-child(3), .user-modules > li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ .user-modules > li:first-child:nth-last-child(4), .user-modules > li:first-child:nth-last-child(4) ~ li { width: 25%; } /* four items */ .user-modules > li:first-child:nth-last-child(6), .user-modules > li:first-child:nth-last-child(6) ~ li { width: 16.66%; } /* four items */ .user-modules > li:first-child:nth-last-child(7), .user-modules > li:first-child:nth-last-child(7) ~ li { width: 14.2%; } /* People Manager > Settings - Tag Groups */ #people-settings-page { } #people-settings-page #tab-tag-groups { } #people-settings-page #tab-tag-groups .list-builder .list-builder-primary { font-weight: 600; color: var(--text-darkest); } #people-settings-page #tab-tag-groups .list-builder .item { margin-bottom: 15px; } /* ================================================================================== */ /* == Imported Accounts ============================================================= */ /* ================================================================================== */ #ppl_imported-user table td.email { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; } /* ================================================================================== */ /* == Post Index ==================================================================== */ /* ================================================================================== */ /* A hacky way to improve the clickable area. I'd like to better standardize clickable table rows. */ table.posts td.title { padding: 0; } table.posts td.title .name { display: block; padding: 15px; cursor: pointer; } /* table.posts .quick-edit-trigger { display: none; } !*Hiding the quick edit thing for now. Not sure how much it's used.*! */ .ui-draggable-dragging { background: #fff; border: 1px solid var(--color-border); padding: 10px; margin: 0 0 5px 20px; cursor: grab; } .waiting-for-results-blog { width: 100%; height: calc(100% - 60px); background-color: rgba(255,255,255,0.92); border-radius: 0 0 2px 2px; position: absolute; top: 60px; z-index: 1000; } /* Widget Sliders - global */ .widget-slider { padding: 15px; } .widget-slider .sub-title-bar { background: var(--bg-table-header); border-bottom: 1px solid var(--table-border); color: var(--text-table-header); margin: -15px -15px 15px -15px; padding: 15px; } /* Widget Slider */ #widget-slider { } #widget-slider #widget-tabs { margin: -15px; } #widget-slider #widget-tabs .ui-tabs-panel { background: #fff; padding: 10px; } #widget-slider #widget-tabs .description { padding: 5px 0 3px 9px; } #widget-slider .ui-sortable { display: flex; flex-wrap: wrap; } #widget-slider .ui-sortable li { width: 133px; height: 100px; background: var(--bg-body); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); line-height: 89px; text-align: center; padding: 0; margin: 10px; position: relative; cursor: grab; } #widget-slider .ui-sortable li.paused:before { content: ""; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; opacity: 0.65; } #widget-slider .ui-sortable li.paused:after { content: ""; width: 26px; height: 26px; background: var(--color-yellow3) url(../../img/icon-pause.svg) no-repeat center; background-size: 17px; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.15); position: absolute; top: -12px; right: -12px; } #widget-slider .item-control-toolbar { width: 100%; height: 100%; background: rgba(240,243,246,.75); position: absolute; top: 0; } #widget-slider .item-control-toolbar .delete-item, #widget-slider .item-control-toolbar .edit-item, #widget-slider .item-control-toolbar .vo-pause-item { display: block; margin: 3px; padding: 3px; } #widget-slider .item-control-toolbar .vo-pause-item { background: var(--color-yellow3); } #widget-slider .button-footer { text-align: right; padding: 15px; margin: 10px -10px -10px -10px; } #widget-slider .last-published { margin-right: 10px; } #widget-slider .last-published:before { content: "Last published: "; } /* Widget Slideshow */ #widget-slider .item-editor { padding: 20px; } #widget-slider .item-editor img { width: 100%; background: var(--text-darkest); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); margin-right: 20px; } #widget-slider .item-editor .no-image { width: 133px; height: 100px; background: var(--bg-body); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); line-height: 89px; text-align: center; } #widget-slider .item-editor .edit-image { width: 100%; margin-top: 10px; } #widget-slider .item-editor .right { float: right; width: calc(100% - 160px); margin-bottom: 20px; } #widget-slider .item-editor .form-list { } #widget-slider .item-editor .form-list label { width: 100px; } #widget-slider .item-editor .form-list > li input, #widget-slider .item-editor .form-list > li textarea { width: calc(100% - 100px); } #widget-slider .item-editor input, #widget-slider .item-editor textarea { display: block; } #widget-slider .item-editor label { display: block; font-weight: bold; color: var(--text-darkest); } #widget-slider .item-editor .left { float: left; width: 133px; } #widget-slider .item-editor .button-footer { margin: 20px -20px -20px -20px; } #widget-slider .item-editor .button-footer .btn { margin-left: 7px; } /* Featured Stories Widget */ #featured-slider { } #featured-slider ol.ui-sortable { column-count: 2; column-gap: 20px; } #featured-slider ol.ui-sortable li { break-inside: avoid; background: #fff; border: 1px solid var(--color-border); list-style: decimal !important; margin-left: 30px; padding: 10px; margin: 0 0 5px 20px; position: relative; cursor: grab; } #featured-slider .ui-sortable span.delete-item { height: 18px; width: 18px; background: #fff url(../../img/icon-delete.svg) no-repeat center; background-size: 15px; text-indent: -9999px; margin: 0 0 0 5px; position: absolute; top: 8px; left: -26px; cursor: pointer; } #featured-slider .ui-sortable span.delete-item:hover { background-size: 18px; } #featured-slider .button-footer { text-align: right; padding: 15px; margin: 15px -15px -15px -15px; } #featured-slider .last-published { margin-right: 10px; } #featured-slider .last-published:before { content: "Last published: "; } /* Organize Widget */ #vo-organize-slider { position: relative; } #vo-organize-slider .vo-organize-tabs { margin: -15px; } #vo-organize-slider .quick-edit { background: #fff; border-bottom: none; } #vo-organize-slider #vo-organize-tab-status > ul { padding: 20px; } #vo-organize-slider .button-footer { text-align: right; padding: 15px; } #vo-organize-slider .vo-progress-output { height: 4px; width: 100%; position: absolute; bottom: 57px; left: 0px; } #vo-organize-slider .vo-progress-output .vo-progress-bar { height: 4px; background: var(--color-border); overflow: hidden; border-radius: 0; } #vo-organize-slider .vo-progress-output .vo-progress-bar .ui-progressbar-value { background: var(--color-blue2); background: linear-gradient(90deg, var(--color-blue2) 0%, var(--color-green2) 100%); border-radius: 0; margin: 0; } /* Blog Settings Page */ #tab-settings { } #tab-settings .permalink-blog { height: auto; } #tab-settings .permalink-blog .slug { background: var(--color-yellow) !important; } #tab-settings .permalink-blog .change-slug { width: 200px; height: 22px; background: #fff; padding: 0 8px; } #tab-settings .permalink-blog .controls { display: inline-block; vertical-align: 2px; } #tab-settings .permalink-blog .warning { background: var(--color-yellow2); line-height: normal; color: var(--text-darkest); font-weight: 600; padding: 10px 15px; margin: 0 -15px -2px; } /* Category Manager Dialog */ #dialog-category { } #dialog-category .default-image { float: left; width: calc(100% - 150px); position: relative; } #dialog-category .default-image img { width: 133px; height: 100px; border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); } #dialog-category .default-image .delete-category-image { display: none; position: absolute; top: 39px; left: 20px; } #dialog-category .default-image:hover .delete-category-image { display: block; } /* ================================================================================== */ /* == Post Edit ===================================================================== */ /* ================================================================================== */ .post-edit { } /* Permalink */ .post-edit .permalink { display: flex; min-height: 33px; background: var(--bg-table-header); border-bottom: 1px solid var(--color-border); font-size: 13px; -webkit-font-smoothing: antialiased; color: var(--text-default); font-weight: normal; padding: 8px 10px 6px 10px; } .post-edit .permalink strong { text-transform: uppercase; color: var(--text-darkest); font-weight: 600; } .post-edit .permalink .url { } .post-edit .permalink .controls { margin-left: 4px; margin-top: -2px; } .post-edit .permalink .controls button { background: var(--color-green); border: none; border-radius: 3px; font-size: 9px; font-family: 'vo-font'; line-height: 20px; color: #fff; text-transform: uppercase; font-weight: 600; padding: 0px 6px; } .post-edit .permalink .change-slug { flex: 1; height: 20px; border: 1px solid var(--color-border); font-size: 13px; padding: 0 4px; margin-top: -2px; } .post-edit .permalink .post_slug { background: var(--color-yellow) !important; } /* Notes */ .post-edit .vo-notes.vo-slide-down { background: var(--bg-gray); border-bottom: 1px solid var(--color-border); padding: 20px; } .post-edit .vo-notes.vo-slide-down h2 { font-size: 14px; margin: -4px 0 5px 0; } .post-edit .vo-notes.vo-slide-down textarea { width: 100%; min-height: 89px; border-radius: 3px; border: 1px solid var(--color-border); padding: 12px 15px; } /* Excerpt */ .post-edit .excerpt2 { background: var(--bg-gray); border-top: 1px solid var(--color-border) !important; padding: 20px; } .post-edit .excerpt2 h2 { font-size: 13px; text-transform: uppercase; margin: -4px 0 5px 0; } .post-edit .excerpt2 textarea { width: 100%; min-height: 89px; border-radius: 3px; border: 1px solid var(--color-border); padding: 12px 15px; } /* .post-edit .excerpt:empty { display: none; } */ /* Category & Tags */ .post-edit .category-tag-editor h2 { font-size: 13px; text-transform: uppercase; margin: -4px 0 9px 0; } .post-edit .category-tag-editor .category-editor, .post-edit .category-tag-editor .tag-editor { background: var(--bg-gray); border-top: 1px solid var(--color-border) !important; padding: 20px; } .post-edit .category-tag-editor .category-list { clear: both; overflow: hidden; margin-top: 10px; margin-bottom: -7px; } .post-edit .category-tag-editor .category-editor .bootstrap-select { width: 100%; } .post-edit .category-tag-editor .category-editor .bootstrap-select .text-muted { display: none; color: var(--color-blue2); padding: 0; } .post-edit .category-tag-editor .category-editor .item-category { float: left; font-weight: 600; line-height: 24px; margin-right: 20px; } .post-edit .category-tag-editor .category-editor .item-category .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; cursor: pointer; } .post-edit .category-tag-editor .category-editor .item-category .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } .post-edit .category-tag-editor .category-editor .item-category .delete:focus { outline: none; } .post-edit .category-tag-editor .tag-editor .tag-group-container { margin-bottom: 7px; } .post-edit .category-tag-editor .tag-editor .tag-group-container > span { display: inline-block; width: 100px; } .post-edit .category-tag-editor .tag-editor .tag-group-container .bootstrap-select { width: calc(100% - 100px); } .post-edit .category-tag-editor .tag-editor .tag-group-container .bootstrap-select .filter-option { line-height: 32px; } /* Global Category and Tag Editor */ .category-tag-editors { display: flex; } .category-tag-editors h3 { margin-bottom: 10px; } .category-tag-editors .category-editor, .category-tag-editors .tag-editor { width: 50%; padding: 20px; } .category-tag-editors .tag-editor { border-left: 1px solid var(--color-border); } .category-tag-editors .category-list { clear: both; overflow: hidden; margin-top: 10px; } .category-tag-editors .bootstrap-select { width: 100%; } .category-tag-editors .bootstrap-select .dropdown-toggle { background: var(--bg-subtle); } .category-tag-editors .category-editor .item-category { float: left; font-weight: 600; line-height: 24px; margin-right: 20px; } .category-tag-editors .category-editor .item-category .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; cursor: pointer; } .category-tag-editors .category-editor .item-category .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } .category-tag-editors .category-editor .item-category .delete:focus { outline: none; } .category-tag-editors .tag-editor .tag-group-container { margin-bottom: 7px; } .category-tag-editors .tag-editor .tag-group-container > span { display: inline-block; width: 100px; font-weight: 600; color: var(--text-darkest); } .category-tag-editors .tag-editor .tag-group-container .bootstrap-select { width: calc(100% - 100px); } .category-tag-editors .tag-editor .tag-group-container .bootstrap-select .filter-option { line-height: 32px; } /* Plugins */ .vo-plugin { clear: both; background: var(--bg-gray); border-top: 1px solid var(--color-border) !important; padding: 20px; } .vo-plugin h2 { font-size: 13px; text-transform: uppercase; margin-bottom: 9px; } .vo-plugin input { width: 100%; height: 34px; background: #fff; border-radius: 3px; border: 1px solid var(--color-border); font-size: 13px; padding: 0 10px; } .vo-plugin .btn { width: 100%; height: 34px !important; line-height: 34px; font-size: 13px; text-align: left; font-weight: normal; } .vo-plugin .btn-default { background: #FFF; border-color: var(--color-border); color: var(--text-default); } /* Recipe Builder */ .vo-plugin .vo-plugin-recipe { } .vo-plugin .vo-plugin-recipe .dropdown-toggle { font-weight: 600; color: var(--text-darkest); } .vo-plugin .vo-plugin-recipe .ingredient-list { } .vo-plugin .vo-plugin-recipe .ingredient-list li { line-height: 30px; position: relative; } .vo-plugin .vo-plugin-recipe .ingredient-list li:after { content: ""; display: table; clear: both; } .vo-plugin .vo-plugin-recipe .ingredient-list li span { float: left; margin-right: 5px; } .vo-plugin .vo-plugin-recipe .ingredient-list .ingredient { min-height: 30px; padding-left: 18px; } .vo-plugin .vo-plugin-recipe .ingredient-list .ingredient:before { content: ""; width: 4px; height: 4px; background: var(--color-green); border-radius: 50%; margin-top: -2px; position: absolute; left: 3px; top: 50%; } .vo-plugin .vo-plugin-recipe .ingredient-list .toolbar { float: left; background: none; line-height: 30px; padding: 0; } .vo-plugin .vo-plugin-recipe .ingredient-list .toolbar .remove { width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat center; text-indent: -9999px; cursor: pointer; } .vo-plugin .vo-plugin-recipe .ingredient-list .toolbar .remove:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat center; } .vo-plugin .vo-plugin-recipe .ingredient-list .toolbar .edit { width: 12px; height: 100%; background: url(../../img/icon-edit.svg) no-repeat center; background-size: 10px; text-indent: -9999px; cursor: pointer; } .vo-plugin .vo-plugin-recipe .edit-mode { position: relative; } .vo-plugin .vo-plugin-recipe .edit-mode:after { content: ""; display: table; clear: both; } .vo-plugin .vo-plugin-recipe .edit-mode input, .vo-plugin .vo-plugin-recipe .edit-mode .bootstrap-select { float: left; width: calc(33% - 90px); margin-right: 10px; margin-bottom: 10px; } .vo-plugin .vo-plugin-recipe .edit-mode .bootstrap-select .btn { width: 100%; margin: 0; } .vo-plugin .vo-plugin-recipe .edit-mode .relate-ingredient-container { clear: both; } .vo-plugin .vo-plugin-recipe .edit-mode .relate-ingredient-container:after { content: ""; display: table; clear: both; } .vo-plugin .vo-plugin-recipe .edit-mode .buttons { position: absolute; top: 0; right: 0; } .vo-plugin .vo-plugin-recipe .edit-mode .btn { width: 70px; text-align: center; margin-left: 5px; } .vo-plugin .vo-plugin-recipe .edit-mode .btn.cancel-relate, .vo-plugin .vo-plugin-recipe .edit-mode .btn.remove-relate { width: calc(33% - 90px); margin: 0; } .vo-plugin .vo-plugin-recipe .edit-mode .new, .vo-plugin .vo-plugin-recipe .edit-mode .change { float: right; } .vo-plugin .vo-plugin-recipe .edit-mode .bootstrap-select span { float: none; margin: 0; } .vo-plugin .vo-plugin-recipe .add-new-ingredient { width: auto; margin: 18px 8px 8px 0; } .vo-plugin .vo-plugin-recipe #add-recipe-to-editor { width: auto; } .vo-plugin .vo-plugin-recipe #recipe-extended { margin: 20px 0; } .vo-plugin .vo-plugin-recipe #recipe-extended ul { overflow: hidden; margin-bottom: 20px; } .vo-plugin .vo-plugin-recipe #recipe-extended ul li { float: left; width: calc(33.33% - 14px); margin-right: 20px; } .vo-plugin .vo-plugin-recipe #recipe-extended ul li:last-child { margin: 0; } .vo-plugin .vo-plugin-recipe #recipe-extended ul li label { display: block; margin-bottom: 5px; } .vo-plugin .vo-plugin-recipe .tag-group-container .tag-list { margin-top: 9px; } .vo-plugin .vo-plugin-recipe .tag-group-container .post-tag { display: inline-block; font-weight: 600; line-height: 24px; margin-right: 20px; } .vo-plugin .vo-plugin-recipe .tag-group-container .post-tag .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; cursor: pointer; } .vo-plugin .vo-plugin-recipe .tag-group-container .post-tag .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } .vo-plugin .vo-plugin-recipe .tag-group-container .post-tag .delete:focus { outline: none; } /* Event Builder */ .vo-plugin #event-builder { } .vo-plugin #event-builder .list-builder-primary .date { color: var(--color-blue2); vertical-align: middle; margin-right: 5px; } .vo-plugin #event-builder .list-builder .event-name { width: calc(100% - 70px); } .vo-plugin #event-builder .list-builder .date-filter { display: inline-block; width: calc(100% - 70px); background: #fff url(../../img/icon-calendar.svg) no-repeat 10px center; padding: 0 15px 0 33px; } .vo-plugin #event-builder .delete { width: auto; height: auto; background: none; text-indent: initial; } /* just to override TABLE .DELETE styles */ .vo-plugin #event-builder .edit-mode .btn.save { margin: 0; } .vo-plugin #event-builder .btn.save { display: inline-block; width: 60px; text-align: center; font-weight: 600; margin: 10px 0 0 0; padding: 0 15px; } .vo-plugin #event-builder .expand-items { margin-top: 17px; } .vo-plugin #event-builder .edit-mode { position: relative; } .vo-plugin #event-builder .edit-mode .keep-open { background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 0 3px 3px 0; font-size: 13px; line-height: 32px; padding: 0 10px; position: absolute; top: 40px; right: 70px; } .vo-plugin #event-builder .edit-mode .keep-open .checkbox { float: left; margin: 7px 10px 0 0; vertical-align: 12px; } .vo-plugin #event-builder .edit-mode .keep-open .checkbox input { width: 34px; height: 34px; } .vo-plugin #event-builder .edit-mode .keep-open .checkbox .checkbox-placeholder { background: #fff; } .vo-plugin #event-builder .edit-mode .keep-open .checkbox > input:checked + .checkbox-placeholder { background: url(../../img/icon-checkbox.svg) no-repeat center 4px; background-color: var(--color-green); } .vo-plugin #event-builder .keep-open-badge .date:after { content: "Keep Open"; background: var(--color-blue2); border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px 2px; vertical-align: 2px; margin-left: 7px; } @media (hover: none) { /* Always show the toolbar on touchscreen devices */ .vo-plugin #event-builder .list-builder .toolbar { display: block !important; } } /* ================================================================================== */ /* == Gallery Edit ================================================================== */ /* ================================================================================== */ /* Edit Photo Dialog */ #dialog-photo { } #dialog-photo input, #dialog-photo textarea { display: block; } #dialog-photo label { display: block; font-weight: bold; color: var(--text-darkest); } #dialog-photo .image { width: 150px; height: 150px; background: var(--text-darkest); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); position: relative; } #dialog-photo .form-list { float: right; width: calc(100% - 180px); } #dialog-photo .form-list label { width: 60px; } #dialog-photo .form-list > li input, #dialog-photo .form-list > li textarea { width: calc(100% - 60px); } /* ================================================================================== */ /* == Settings ====================================================================== */ /* ================================================================================== */ #core-env .form-list li { float: left !important; clear: none; width: calc(50% - 20px); } #core-env .form-list li:nth-child(even) { float: right !important; } /* Root Account Access */ .vo-load-balancer li ul { padding: 5px 0 20px 0; } .vo-load-balancer li ul li { height: 24px; list-style: disc; line-height: 24px; margin-left: 20px; position: relative; } .vo-load-balancer .delete { height: 20px; width: 20px; background: #fff url(../../img/icon-delete.svg) no-repeat center !important; background-size: 14px !important; border: none; text-indent: -9999px; position: absolute; top: 2px; left: -22px; cursor: pointer; } .vo-load-balancer .delete:hover { background-size: 16px !important; } /* Extended Data Menu Lists */ .vo-extend-fields { } .vo-extend-fields .list-builder { margin-bottom: 15px; } .vo-extend-fields .list-builder:last-child { margin-bottom: 0; } /* Email Sender Identity */ #email-sender { } #email-sender table { table-layout: fixed; width: calc(100% + 40px); background: var(--bg-subtle); border-top: 1px solid var(--color-border); margin: 20px -20px -20px -20px; } #email-sender table thead { font-weight: bold; } #email-sender table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #email-sender table tbody tr:last-child { border: none; } #email-sender tr td:first-child { width: 100px; } #email-sender tr td:nth-child(2) { width: 100px; } #email-sender tr td:nth-child(3) { width: 280px; } #email-sender tr td:last-child { width: calc(100% - 280px); } #email-sender table .dns-status span { border-radius: 3px; color: #fff; font-weight: 600; font-size: 12px; line-height: 1.5; padding: 2px 6px; vertical-align: -1px; } #email-sender table .vo-pending { background: var(--color-yellow3); } #email-sender table .vo-valid { background: var(--color-green2); } #email-sender h3 { border-top: 1px solid var(--color-border); margin: 22px -20px 8px; padding: 18px 20px 0; } #email-sender table .dns-name button, #email-sender table .dns-value button{ display: inline-block; font-size: 10px; text-transform: uppercase; margin-right: 10px; padding: 1px 5px; } #email-sender .parent-auth-details { background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 4px; padding: 20px; margin-top: 10px; } /* Per-Site Environment Overrides (multi_site tenants, /admin/core/environment). Each row is label / override toggle / value, so the toggle has to opt out of the .form-list > li label and .form-list > li input rules — those float every label to 150px and stretch every input to fill the rest, which would put the checkbox on its own 40px-tall line. */ .vo-site-environment h3.vo-site-env-group { clear: both; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-lightest); margin: 22px 0 10px; } .vo-site-environment h3.vo-site-env-group:first-of-type { margin-top: 0; } .vo-site-environment .form-list { margin-bottom: 4px; } .vo-site-env-row .vo-site-env-toggle { float: left; width: 86px; line-height: 18px; padding: 11px 0 10px; } .vo-site-env-row .vo-site-env-toggle input[type="checkbox"] { float: none; width: auto; height: auto; padding: 0; margin: 0; vertical-align: middle; } .vo-site-env-row .vo-site-env-toggle label { float: none; width: auto; font-size: 12px; font-weight: 400; color: var(--text-lightest); padding: 0 0 0 5px; cursor: pointer; } .vo-site-env-row input.vo-site-env-value { width: calc(100% - 236px); } /* Not overridden: the field shows the inherited account-wide value as a placeholder, so it reads as informational rather than as an empty box someone forgot to fill in. */ .vo-site-env-row input.vo-site-env-value[readonly] { background: transparent; border-style: dashed; color: var(--text-lightest); font-weight: 400; } .vo-site-env-row.is-override .vo-site-env-toggle label { color: var(--text-darkest); font-weight: 600; } /* ================================================================================== */ /* == Manage Properties ============================================================= */ /* ================================================================================== */ #core_manage-properties { } #core_manage-properties table .event-fail span { display: inline-block; background: var(--color-yellow) url(../../img/icon-alert-dark-yellow.svg) no-repeat 8px center; background-size: 16px; border-radius: 3px; color: var(--text-darkest); font-weight: 600; text-align: center; font-size: 12px; line-height: 1.5; vertical-align: middle; padding: 5px 10px 5px 27px; cursor: pointer; } /* ================================================================================== */ /* == Paywall Editor ================================================================ */ /* ================================================================================== */ #core-paywall-list { } /* General Form Styles */ #paywall-edit-instance .form-list li.enabled {} #paywall-edit-instance .form-list li.enabled .bootstrap-select { width: 150px; } #paywall-edit-instance .form-list li.enabled .vo-menu-control { float: right; width: calc(100% - 310px); } #paywall-edit-instance .form-list li.enabled .vo-menu-control input { width: 100%; } #paywall-edit-instance .form-list li.enabled .vo-menu-control .bootstrap-select { width: 100%; } /* Fills the control, not the 150px above. */ #paywall-edit-instance .form-list li.enabled .vo-menu-control .sub-text { margin-left: 0; margin-bottom: 0; } #paywall-edit-instance .vo-meter-settings, #paywall-edit-instance .vo-time-meter-settings, #paywall-edit-instance .vo-combo-landing-settings{ padding-left: 20px; } #paywall-edit-instance .vo-meter-settings > ul > li, #paywall-edit-instance .vo-time-meter-settings > ul > li, #paywall-edit-instance .vo-combo-landing-settings > ul > li{ clear: both; margin-bottom: 15px; } /* a label wrapped to two lines otherwise pushes the next row's label right */ #paywall-edit-instance .vo-time-meter-settings .time-meter-duration { overflow: hidden; } #paywall-edit-instance .vo-time-meter-settings .time-meter-duration div { float: left; width: calc(50% - 81px); } #paywall-edit-instance .vo-time-meter-settings .time-meter-duration div:last-child { float: right; } #paywall-edit-instance .vo-time-meter-settings .time-meter-duration div label { width: 70px; height: 40px; background: #fff; border: 1px solid var(--color-border); border-radius: 0 3px 3px 0; border-left: none; text-align: center; font-size: 12px; line-height: 38px; padding: 0; } #paywall-edit-instance .vo-time-meter-settings .time-meter-duration input { float: left; width: calc(100% - 70px); border-radius: 3px 0 0 3px; } /* Meter Unit */ #paywall-edit-instance .vo-meter-settings .meter-unit { overflow: hidden; } #paywall-edit-instance .vo-meter-settings .meter-unit input { float: left; width: 130px; margin-right: 10px; } /* two short fields beside the label, not two full-width rows */ /* URL Tester */ .url-tester { } .url-tester .url-link-tester { } .url-tester .url-link-tester:after { content: ""; display: table; clear: both; } /* clearfix */ .url-tester .url-link-tester .bootstrap-select { float: left !important; width: 130px; } .url-tester .url-link-tester .bootstrap-select .dropdown-toggle { width: 100%; background: var(--bg-subtle); border: 1px solid var(--color-border); } .url-tester .url-link-tester input { float: left; width: calc(100% - 240px); margin: 0 10px; } .url-tester .url-link-tester .btn { float: left; width: 90px; } .url-tester .vo-test-results { clear: both; background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 3px; overflow: hidden; margin-top: 20px; } .url-tester .vo-test-results .url-container { border-bottom: 1px solid var(--color-border); overflow: hidden; padding: 15px; } .url-tester .vo-test-results .vo-url-tested { float: left; color: var(--text-darkest); font-weight: 600; line-height: 30px; text-decoration: underline; } .url-tester .vo-test-results .vo-allowed { float: left; margin-right: 15px; } .url-tester .vo-test-results .vo-allowed span { display: block; width: 84px; border-radius: 3px; color: #fff; text-align: center; font-weight: 700; font-size: 11px; text-transform: uppercase; } .url-tester .vo-test-results .vo-allowed .vo-true { background: var(--color-green2) url(../../img/icon-unlocked2.svg) no-repeat 19px 9px; background-size: 8px; padding: 8px 10px 8px 22px; } .url-tester .vo-test-results .vo-allowed .vo-false { background: var(--color-red2) url(../../img/icon-lock.svg) no-repeat 13px 9px; background-size: 8px; padding: 8px 10px 8px 24px; } .url-tester .vo-test-results .vo-allowed .vo-metered { background: var(--color-yellow3) url(../../img/icon-lock.svg) no-repeat 13px 9px; background-size: 8px; padding: 8px 10px 8px 24px; } .url-tester .vo-test-results .vo-test-result-reasons { background: #fff; overflow: hidden; padding: 10px 15px; } .url-tester .vo-test-results li.vo-site-default, .url-tester .vo-test-results li[class^='vo-reason'], .url-tester .vo-test-results li[class*=' vo-reason'] { float: left; font-weight: 600; font-weight: 700; font-size: 13px; padding: 5px 20px 5px 0; position: relative; } .url-tester .vo-test-results li.vo-site-default:after, .url-tester .vo-test-results li[class^='vo-reason']:after, .url-tester .vo-test-results li[class*=' vo-reason']:after { content: ""; width: 20px; height: 100%; background: url(../../img/icon-arrow-right.svg) no-repeat center center; background-size: 100% auto; position: absolute; top: 0; right: 0; } .url-tester .vo-test-results li.vo-site-default.last, .url-tester .vo-test-results li[class^='vo-reason'].last, .url-tester .vo-test-results li[class*=' vo-reason'].last { padding-right: 0; } .url-tester .vo-test-results li.vo-site-default.last:after, .url-tester .vo-test-results li[class^='vo-reason'].last:after, .url-tester .vo-test-results li[class*=' vo-reason'].last:after { display: none; } .url-tester .vo-test-results li.vo-site-default.vo-locked.last, .url-tester .vo-test-results li.vo-reason-restricted.last { color: var(--color-red2); } .url-tester .vo-test-results li.vo-site-default.vo-unlocked.last, .url-tester .vo-test-results li.vo-reason-whitelist.last { color: var(--color-green); } .url-tester .vo-test-results li.vo-site-default.vo-metered.last, .url-tester .vo-test-results li.vo-reason-exception.last { color: var(--color-yellow3); } @keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } @keyframes bounce { from, 20%, 53%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -6px, 0); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -3px, 0); } 80% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 90% { transform: translate3d(0, -1px, 0); } } .url-tester .vo-test-results .vo-url-tested { animation-duration: .8s; animation-timing-function: ease-in-out; animation-name: headShake; } /* .url-tester .vo-test-results .vo-url-tested { animation-duration: 1s; animation-name: bounce; transform-origin: center bottom; } */ /* Settings Block */ .paywall-editor-settings {} .paywall-rules-header { overflow: hidden; margin: 0 0 20px 0; } .paywall-rules-header .vo-back-to-parent { float: left; width: 40px; height: 40px; background: #FFF url(../../img/icon-back-arrow.svg) no-repeat center; border: 1px solid var(--color-border); border-radius: 3px; text-indent: -9999px; margin: 0 18px 0 0; cursor: pointer; } .paywall-rules-header h1 { font-weight: normal; line-height: 40px; } /* URL Lists */ #paywall-edit-instance { } #paywall-edit-instance .list-builder .edit-mode { } #paywall-edit-instance .list-builder .edit-mode:hover { background: #fff !important; } #paywall-edit-instance .list-builder .edit-mode:after { content: ""; display: table; clear: both; } /* clearfix */ #paywall-edit-instance .list-builder .edit-mode .bootstrap-select { float: left; width: 200px; margin-left: 10px; } #paywall-edit-instance .list-builder .edit-mode .bootstrap-select .btn { background: var(--bg-subtle); border: 1px solid var(--color-border); } #paywall-edit-instance .list-builder .edit-mode input { float: left; width: calc(100% - 300px); } #paywall-edit-instance .list-builder form:after { content: ""; display: table; clear: both; } /* clearfix */ #paywall-edit-instance .list-builder ul.item-list li:hover { background: var(--bg-gray); } #paywall-edit-instance .list-builder ul.item-list li .toolbar { margin: 2px 10px 0 0; } #paywall-edit-instance .list-builder .edit-mode-regex input { width: calc(100% - 321px); margin-bottom: 0; } #paywall-edit-instance .list-builder .edit-mode-regex .bootstrap-select { margin: 0; } #paywall-edit-instance .list-builder .edit-mode-regex .vo-regex-delimiter-span { float: left; line-height: 40px; font-size: 18px; font-weight: 600; padding: 0 6px 0 7px; } #paywall-edit-instance .list-builder .edit-mode-regex .vo-regex-delimiter-span:first-of-type { padding-left: 0; } #paywall-edit-instance .list-builder .edit-mode-regex .flags-description { display: block !important; } #paywall-edit-instance .list-builder .flags-description { clear: both; background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 3px; font-size: 0.85em; margin-top: 12px; padding: 7px 12px 10px; } #paywall-edit-instance .list-builder .flags-description h3 { font-size: 1.1em; margin-bottom: 2px; } #paywall-edit-instance .list-builder .flags-description span { display: inline-block; width: 10px; text-align: center; color: var(--color-green); font-weight: 600; margin-right: 5px; } #paywall-edit-instance .item-list .item { margin-bottom: 7px; position: relative; } #paywall-edit-instance .item-list .wildcard { color: var(--color-red); font-size: 1.6em; line-height: 8px; vertical-align: -7px; padding: 0 1px; } #paywall-edit-instance .item-list .item.item-category-group:not(:first-child) { border-top: 1px solid var(--color-border); padding-top: 15px; } #paywall-edit-instance .item-list .item.item-category-group { padding-bottom: 15px; margin: 0; } #paywall-edit-instance .item-list .item:not(.item-category-group) + .item-category-group { margin-top: 15px; } #paywall-edit-instance .item-list .item.item-category-group:has( + .item:not(.item-category-group)) { border-bottom: 1px solid var(--color-border); margin-bottom: 15px; } #paywall-edit-instance .item-list .item .group-label { display: block; font-weight: bold; color: var(--text-darkest); } #paywall-edit-instance .item-list .item .blog-group { font-weight: 600; font-size: 13px; color: var(--color-blue2); margin-top: 7px; } #paywall-edit-instance .item-list .item .vo-category-list span { display: block; margin-top: 6px; } #paywall-edit-instance .item-list .item.item-category-group .toolbar { position: absolute; right: 0; bottom: 18px; } #paywall-edit-instance .item-list .item .vo-tag-list span { display: block; margin-top: 6px; } #paywall-edit-instance .list-builder .category-editor { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 15px 0; margin-bottom: 7px; position: relative; } #paywall-edit-instance .list-builder .category-editor .bootstrap-select { float: none; width: 100%; margin: 0; } #paywall-edit-instance .list-builder .category-editor .bootstrap-select li { margin: 0; } #paywall-edit-instance .list-builder .category-editor .bootstrap-select .text-muted { color: var(--color-blue2); padding: 0; } #paywall-edit-instance .list-builder .category-editor .category-list { clear: both; overflow: hidden; margin-top: 12px; } #paywall-edit-instance .list-builder .category-editor .item-category { float: left; font-weight: 600; line-height: 24px; margin-right: 20px; } #paywall-edit-instance .list-builder .category-editor .item-category .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; margin: 0; cursor: pointer; } #paywall-edit-instance .list-builder .category-editor .item-category .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } #paywall-edit-instance .list-builder .category-editor .item-category .delete:focus { outline: none; } #paywall-edit-instance .list-builder .tag-editor { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 15px 0; margin-bottom: 7px; position: relative; } #paywall-edit-instance .list-builder .tag-editor .bootstrap-select { float: none; width: 100%; margin: 0; } #paywall-edit-instance .list-builder .tag-editor .bootstrap-select li { margin: 0; } #paywall-edit-instance .list-builder .tag-editor .bootstrap-select .text-muted { color: var(--color-blue2); padding: 0; } #paywall-edit-instance .list-builder .tag-editor .tag-group-name { display: none; } #paywall-edit-instance .list-builder .tag-editor .tag-list { clear: both; overflow: hidden; margin-top: 12px; } #paywall-edit-instance .list-builder .tag-editor .item-tag { float: left; font-weight: 600; line-height: 24px; margin-right: 20px; } #paywall-edit-instance .list-builder .tag-editor .item-tag .delete { float: right; width: 12px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right 9px; border: none; text-indent: -9999px; margin: 0; cursor: pointer; } #paywall-edit-instance .list-builder .tag-editor .item-tag .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right 9px; } #paywall-edit-instance .list-builder .tag-editor .item-tag .delete:focus { outline: none; } #paywall-edit-instance .vo-segment-rule-view {/* opacity: 0.75; pointer-events: none; */} #paywall-edit-instance .vo-segment-rule-view .block .block-header{ background: var(--text-lightest); } #paywall-edit-instance .vo-plan-ruleset-list li.item:hover > .toolbar { display: block !important; } /* Connected Plans */ #paywall-edit-instance #editor-sidebar .vo-paywall-plans { } #paywall-edit-instance #editor-sidebar .vo-paywall-plans li span, #paywall-edit-instance #editor-sidebar .vo-paywall-plans li:hover .vo-delete{ display: inline-block; } #paywall-edit-instance #editor-sidebar .vo-paywall-plans .vo-delete { display: none; width: 12px; height: 16px; background: url(../../img/icon-tag-x.svg) no-repeat center; text-indent: -9999px; margin-left: 3px; cursor: pointer; } #paywall-edit-instance #editor-sidebar .vo-paywall-plans .vo-delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat center; } /* ================================================================================== */ /* == Translate ===================================================================== */ /* ================================================================================== */ #core-env table.translate { } #core-env table.translate textarea { font-weight: normal; padding: 10px 13px; } #core-env table.translate .reference { color: var(--text-darkest); } #core-env table.translate th .bootstrap-select { width: 100%; } #core-env table.translate .vo-publish { height: 40px; font-size: 14px; padding: 0 20px; } /* Currencies selector (env page) */ .vo-currency-config .message { margin-bottom: 16px; } .vo-currency-config .vo-currency-editor .vo-currency-select { max-width: 260px; } .vo-currency-config .vo-currency-list { display: flex; flex-wrap: wrap; margin-top: 14px; gap: 8px; } .vo-currency-config .vo-currency-list:empty { display: none; } .vo-currency-config .item-currency { display: inline-flex; align-items: center; background: var(--notice-neutral-bg); border: 1px solid var(--notice-neutral-border); border-radius: 4px; font-size: 13px; line-height: 1.4; gap: 8px; padding: 7px 12px; } .vo-currency-config .item-currency.is-main { background: var(--notice-success-bg); border-color: var(--notice-success-border); } .vo-currency-config .item-currency .currency-name { font-weight: 600; color: var(--text-darkest); } .vo-currency-config .item-currency .badge-main { background: var(--color-green); border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; } .vo-currency-config .item-currency .set-main { background: var(--color-blue2); border: none; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.4; padding: 1px 6px; cursor: pointer; } .vo-currency-config .item-currency .set-main:hover { background: var(--color-blue2-active); } .vo-currency-config .item-currency .delete { width: 11px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat right center; background-size: 10px; border: none; text-indent: -9999px; cursor: pointer; } .vo-currency-config .item-currency .delete:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat right center; background-size: 10px; } /* ================================================================================== */ /* == Billing ======================================================================= */ /* ================================================================================== */ /* Global Credit Card Mockup */ .credit-card-mockup { display: inline-block; min-width: 15.5em; background-color: #21D4FD; background-image: linear-gradient(16deg, var(--color-dark-blue) 10%, var(--color-red) 100%); /* background-image: linear-gradient(18deg, var(--color-dark-blue) 20%, var(--color-green) 120%); */ border-radius: 5px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); padding: 0.7em 1em; position: relative; } .credit-card-mockup [data-field-name="type_f"] { text-align: right; } .credit-card-mockup [data-field-name="full_number"], .credit-card-mockup [data-field-name="last_four"] { height: 2em; line-height: 2em; text-align: center; font-size: 1.25em; margin: 1.4em 0 1em 0; } .credit-card-mockup [data-field-name="last_four"]:before { content: "**** **** **** "; font-size: 1.5em; letter-spacing: 0.055em; vertical-align: -.3em; } .credit-card-mockup [data-field-name="name"] { float: left; font-size: 0.9em; margin-right: 1.4em; } .credit-card-mockup [data-field-name="expiration"] { float: right; font-size: 0.9em; } .credit-card-mockup [data-field-name="code"] { float: right; font-size: 0.9em; } .credit-card-mockup [data-field-name="name"]:before { content: "Card Holder"; } .credit-card-mockup [data-field-name="expiration"]:before { content: "Expires"; } .credit-card-mockup [data-field-name="code"]:before { content: "Code"; } .credit-card-mockup [data-field-name="name"]:before, .credit-card-mockup [data-field-name="expiration"]:before, .credit-card-mockup [data-field-name="code"]:before { display: block; text-transform: uppercase; font-weight: 600; font-size: .6em; color: rgba(255,255,255,0.65); margin-bottom: 1px; } #core_billing .vo-current-payment .edit { display: block; margin-top: 18px; } /* Autopay */ #core_billing .vo-auto-pay { max-width: 640px; border-top: 1px solid var(--color-border); margin-top: 18px; padding-top: 16px; } #core_billing .vo-auto-pay-header { display: flex; align-items: center; gap: 10px; } #core_billing .vo-auto-pay-header .toggle-switch { flex: 0 0 auto; } #core_billing .vo-auto-pay-state { font-weight: 600; color: var(--text-darkest); } #core_billing .vo-auto-pay-scope { display: block; font-size: 0.9em; line-height: 1.5; color: var(--text-default); margin-top: 8px; } #core_billing .vo-auto-pay-authorization { display: flex; align-items: flex-start; gap: 10px; padding-top: 16px; } #core_billing .vo-auto-pay-authorization .checkbox { flex: 0 0 auto; margin-top: 2px; } #core_billing .vo-auto-pay-authorization .vo-auto-pay-label { flex: 1; line-height: 1.4; cursor: pointer; } #core_billing .vo-auto-pay-authorization .vo-auto-pay-scope { margin-top: 4px; } /* Update Payment Details */ #core_billing .error-message, #core_billing .success-message { margin-bottom: 20px; } #core_billing .credit-card { } #core_billing .credit-card > li { clear: both; height: 40px; margin-bottom: 7px; } #core_billing .credit-card > li label { float: left; width: 124px; } #core_billing .credit-card > li input{ float: right; width: calc(100% - 124px) !important; } #core_billing .credit-card > li .bootstrap-select { float: left; width: calc((100% - 134px) / 2); } #core_billing .credit-card > li .bootstrap-select:last-child { float: right; } .paypal-mockup { display: inline-block; min-width: 200px; height: 120px; background-color: #21D4FD; background-image: linear-gradient(18deg, var(--color-blue2) 0%, var(--color-dark-blue) 100%); border-radius: 5px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); font-weight: 600; text-indent: -9999px; padding: 11px 15px; position: relative; } .paypal-mockup:after { content: ""; display: block; width: 100px; height: 46px; background: url(../../img/gateway-paypal-white.png) no-repeat left; background-size: 75px auto; position: absolute; top: 0; left: 15px; } /* ================================================================================== */ /* == Gateway ======================================================================= */ /* ================================================================================== */ #gateway-container { } #gateway-container h2 { margin: 0; } #gateway-container p { margin: 5px 0 15px 0; } #gateway-container .choose-gateway { background: var(--bg-gray); border-bottom: 1px solid var(--color-border); padding: 20px; margin: -20px -20px 20px -20px; } #gateway-container ul#gateways { display: flex; column-gap: 20px; } #gateway-container ul#gateways li { flex: 1; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; text-indent: -9999px; font-size: 0; padding: 20px; position: relative; cursor: pointer; } #gateway-container ul#gateways li.active { border: 2px solid var(--color-blue2); box-shadow: 0 8px 10px -10px rgba(35, 157, 239, 0.5); } #gateway-container ul#gateways li span { display: block; width: 100%; aspect-ratio: 3/1; } #gateway-container ul#gateways li#AuthNet span, #gateway-container ul#gateways li#AuthNet2 span { background: url(../../img/gateway-authnet.png) no-repeat center; background-size: contain; } #gateway-container ul#gateways li#BluePay span{ background: url(../../img/gateway-clover.svg) no-repeat center; background-size: contain; } #gateway-container ul#gateways li#Braintree span { background: url(../../img/gateway-braintree.png) no-repeat center; background-size: contain; } #gateway-container ul#gateways li#Payflow span { background: url(../../img/gateway-payflow.png) no-repeat center; background-size: contain; } #gateway-container ul#gateways li#Paypal span { background: url(../../img/gateway-paypal.png) no-repeat center; background-size: contain; } #gateway-container ul#gateways li#Stripe span { background: url(../../img/gateway-stripe.png) no-repeat center; background-size: contain; } #gateway-container ul#gateways li#AlignPay span { background: url(../../img/gateway-alignpay.png) no-repeat center; background-size: contain; } #gateway-container h2.gateway-name { display: inline-block; width: 140px; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; padding: 15px; margin-bottom: 12px; } #gateway-container h2.gateway-name span { display: block; width: 100%; aspect-ratio: 3/1; text-indent: -9999px; } #gateway-container h2.gateway-name span.alignpay { background: url(../../img/gateway-alignpay.png) no-repeat left; background-size: contain; } #gateway-container h2.gateway-name span.authnet { background: url(../../img/gateway-authnet.png) no-repeat left; background-size: contain; } #gateway-container h2.gateway-name span.bluepay { background: url(../../img/gateway-bluepay.png) no-repeat left; background-size: contain; } #gateway-container h2.gateway-name span.braintree { background: url(../../img/gateway-braintree.png) no-repeat left; background-size: contain; } #gateway-container h2.gateway-name span.payflow { background: url(../../img/gateway-payflow.png) no-repeat left; background-size: contain; } #gateway-container h2.gateway-name span[class*="paypal"] { background: url(../../img/gateway-paypal.png) no-repeat left; background-size: contain; } #gateway-container h2.gateway-name span.stripe { background: url(../../img/gateway-stripe.png) no-repeat left; background-size: contain; } #gateway-container .gateway-sandbox-badge { display: inline-block; background: var(--notice-warning-bg); border: 1px solid var(--notice-warning-border); border-radius: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--notice-warning-text); vertical-align: top; margin-left: 12px; padding: 5px 12px; } #gateway-container .vo-test-warning { background: var(--notice-warning-bg); border: 1px solid var(--notice-warning-border); border-radius: 3px; font-size: 13px; color: var(--notice-warning-text); margin-top: 10px; padding: 10px 14px; } #gateway-container .vo-test-warning:before { content: "\26A0\FE0F"; margin-right: 8px; } #gateway-container #input-fields { clear: both; padding-top: 20px; } #gateway-container #input-fields span { display: block; } #gateway-container #input-fields input { display: block; width: 100%; } #gateway-container .test-connection { float: left; width: 160px; height: 40px; margin-right: 15px; position: relative; } #gateway-container .test-connection .btn { width: 160px; position: absolute; } /* #gateway-container .test-connection .btn-danger { background-image: url(../../img/icon-alert.svg); background-repeat: no-repeat; background-position: 15px center; background-size: 16px; padding-left: 25px;} */ /* -- Gateway List ------------------------------------------------------------------ */ /* The gateway logos are keyed off data-gateway rather than an id, because the editor canvas lives in the same document and already owns #gateway-container. */ #core-gateway-list .subject .gateway-logo { display: inline-block; width: 84px; height: 28px; overflow: hidden; text-indent: -9999px; vertical-align: middle; margin-right: 12px; } #core-gateway-list .subject .gateway-logo.alignpay { background: url(../../img/gateway-alignpay.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .gateway-logo.authnet { background: url(../../img/gateway-authnet.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .gateway-logo.bluepay { background: url(../../img/gateway-bluepay.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .gateway-logo.braintree { background: url(../../img/gateway-braintree.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .gateway-logo.payflow { background: url(../../img/gateway-payflow.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .gateway-logo[class*="paypal"] { background: url(../../img/gateway-paypal.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .gateway-logo.stripe { background: url(../../img/gateway-stripe.png) no-repeat center; background-size: contain; } #core-gateway-list .subject .name { display: inline-block; font-weight: 600; color: var(--text-darkest); vertical-align: middle; } #core-gateway-list .subject .gateway-type { display: block; font-size: 12px; color: var(--text-lightest); margin-top: 3px; margin-left: 96px; } #core-gateway-list .gateway-status { font-weight: 600; } #core-gateway-list .gateway-status.is-default { color: var(--color-green); } #core-gateway-list .gateway-status.is-unconfigured { color: var(--text-lightest); font-weight: normal; font-style: italic; } #core-gateway-list .gateway-mode.is-sandbox { color: var(--notice-warning-text); font-weight: 600; } /* -- Add Gateway Picker ------------------------------------------------------------ */ .vo-gateway-picker { margin: 0 -20px 20px -20px; } .vo-gateway-picker .choose-gateway { background: var(--bg-gray); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 20px; } .vo-gateway-picker .choose-gateway h2 { margin: 0; } .vo-gateway-picker .choose-gateway p { margin: 5px 0 15px 0; } .vo-gateway-picker ul.gateway-choices { display: flex; flex-wrap: wrap; gap: 20px; } .vo-gateway-picker ul.gateway-choices li { flex: 0 0 calc(20% - 16px); background: #fff; border: 1px solid var(--color-border); border-radius: 4px; text-indent: -9999px; font-size: 0; padding: 20px; position: relative; cursor: pointer; } .vo-gateway-picker ul.gateway-choices li:hover { border-color: var(--color-blue2); box-shadow: 0 8px 10px -10px rgba(35, 157, 239, 0.5); } .vo-gateway-picker ul.gateway-choices li span { display: block; width: 100%; aspect-ratio: 3/1; } .vo-gateway-picker ul.gateway-choices li.gateway-choice-alignpay span { background: url(../../img/gateway-alignpay.png) no-repeat center; background-size: contain; } .vo-gateway-picker ul.gateway-choices li.gateway-choice-authnet span { background: url(../../img/gateway-authnet.png) no-repeat center; background-size: contain; } .vo-gateway-picker ul.gateway-choices li.gateway-choice-bluepay span { background: url(../../img/gateway-clover.svg) no-repeat center; background-size: contain; } .vo-gateway-picker ul.gateway-choices li.gateway-choice-braintree span { background: url(../../img/gateway-braintree.png) no-repeat center; background-size: contain; } .vo-gateway-picker ul.gateway-choices li.gateway-choice-payflow span { background: url(../../img/gateway-payflow.png) no-repeat center; background-size: contain; } .vo-gateway-picker ul.gateway-choices li[class*="gateway-choice-paypal"] span { background: url(../../img/gateway-paypal.png) no-repeat center; background-size: contain; } .vo-gateway-picker ul.gateway-choices li.gateway-choice-stripe span { background: url(../../img/gateway-stripe.png) no-repeat center; background-size: contain; } /* The li itself hides text so only the logo shows; the count has to opt back in. */ .vo-gateway-picker ul.gateway-choices li.gateway-choice--in-use { border-color: var(--color-blue2); } .vo-gateway-picker .gateway-choice-count { display: block; font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; text-indent: 0; text-align: center; color: var(--text-lightest); margin-top: 8px; } .vo-gateway-picker ul.gateway-choices li:hover .gateway-choice-count { color: var(--color-blue2); } .vo-gateway-picker .vo-no-gateway-choices { font-style: italic; color: var(--text-lightest); } .vo-gateway-picker .vo-cancel-add-gateway { margin-top: 15px; padding: 0; } /* -- Gateway Editor ---------------------------------------------------------------- */ .gateway-manager .vo-gateway-role-note { max-width: 640px; color: var(--text-default); margin: 12px 0 20px 0; } .gateway-manager .vo-credential-fields:empty:before { content: "This gateway has no settings to fill in."; font-style: italic; color: var(--text-lightest); } .vo-gateway-toolbar .gateway-default-badge { display: block; background: var(--notice-primary-bg); border: 1px solid var(--notice-primary-border); border-radius: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--notice-primary-text); padding: 9px 12px; } .vo-gateway-toolbar .gateway-role-badge { display: block; background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--text-default); padding: 9px 12px; } .vo-gateway-toolbar .sidebar-note { font-size: 12px; line-height: 1.5; color: var(--text-lightest); margin: 10px 0 0 0; } .vo-gateway-toolbar .vo-remove-gateway { border-top: 1px solid var(--color-border); margin-top: 30px; padding-top: 28px; } .vo-gateway-toolbar .vo-remove-blocked { border-top: 1px solid var(--color-border); margin-top: 30px; padding-top: 28px; } /* ================================================================================== */ /* == Inbox ========================================================================= */ /* ================================================================================== */ /* Inbox Index */ table.inbox .title .name { display: block; font-weight: 600; color: var(--text-darkest); } table.inbox .title .email { display: block; font-size: 12px; line-height: normal; font-weight: normal; margin-top: 4px; } table.inbox .unread .full_name { position: relative; } table.inbox .unread .full_name:before { content: ""; height: 100%; width: 3px; background: var(--color-blue2); position: absolute; top: 0; left: 0px; } /* Inbox Message */ .inbox-message { } .inbox-message .meta { background: var(--bg-table-header); border-bottom: 1px solid var(--table-border); color: var(--text-table-header); padding: 15px 20px 13px 20px; margin: -20px -20px 20px -20px; } .inbox-message ul > li { margin-bottom: 40px; } .inbox-message ul > li:last-child { margin-bottom: 0; } .inbox-message ul > li ul li { margin-bottom: 20px; } .inbox-message ul > li ul li p:empty:after { content: "empty"; font-style: italic; } .inbox-message h3 { margin-bottom: 2px; } /* Form Editor */ #cmn_form-editor #questions { } #cmn_form-editor #questions .block-tabs { margin: -20px -20px 20px -20px; } /* ================================================================================== */ /* == Dashboard ===================================================================== */ /* ================================================================================== */ #dashboard-home { } /* ================================================================================== */ /* == Message Campaigns ============================================================= */ /* ================================================================================== */ /* A hacky way to improve the clickable area. I'd like to better standardize clickable table rows. */ #cmn-message-campaign a.subject { display: block; padding: 15px; cursor: pointer; } #cmn-message-campaign tr.newsletter td:first-child { padding: 0; } #cmn-message-list tr, #cmn-newsletter-list tr { cursor: pointer; } #cmn-message-campaign .settings { display: none; width: 20px; height: 20px; background: none; border: none; text-indent: -9999px; margin-top: -9px; position: absolute; right: 50px; top: 50%; cursor: pointer; } #cmn-message-campaign .settings:after { content: ''; width: 100%; height: 100%; background: url(../../img/icon-settings.svg); background-size: cover; position: absolute; top: 0; left: 0; } #cmn-message-campaign tr:hover .settings { display: block; } #cmn-message-campaign .settings:hover:after { animation: spin 4s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .send-rules .member-count { background: var(--color-yellow2); border-radius: 3px; color: var(--text-darkest); font-weight: 600; margin-bottom: 15px; padding: 10px 14px; } .send-rules .member-count:before { content: "Estimated Recipients: "; } /* Message Scheduler */ .cnd-newsletters .vo-send-cta { background: var(--bg-gray); } .cnd-newsletters .scheduler { background: var(--bg-gray); } .cnd-newsletters .scheduler p { float: left; width: 60px; font-size: 11px; line-height: 31px; text-align: center; margin: 0 10px 0 20px; position: relative; } .cnd-newsletters .scheduler p:before { content: ""; height: 1px; width: 15px; background: var(--checkbox-border); position: absolute; top: 45%; left: 0; } .cnd-newsletters .scheduler p:after { content: ""; height: 1px; width: 15px; background: var(--checkbox-border); position: absolute; top: 45%; right: 0; } .cnd-newsletters .scheduler .btn { float: left; width: 100px; margin-left: 10px; } .cnd-newsletters .scheduler .scheduler-setter { position: relative; } .cnd-newsletters .scheduler .scheduler-setter .btn { width: 150px; } .cnd-newsletters .scheduler .scheduler-setter .datepicker { } .cnd-newsletters .scheduler .scheduler-setter .ui-timepicker-select { height: 31px; appearance:none; background: var(--bg-subtle); outline:none; border: 1px solid var(--color-border); border-radius: 3px; border-radius: 3px; font-size: 12px; font-family: 'vo-font', Helvetica Neue, Arial, sans-serif; font-weight: 600; line-height: 1.5; padding: 5px 10px; margin-left: 10px; } .cnd-newsletters .scheduler .scheduler-setter span { font-size: 12px; position: absolute; right: 480px; top: 8px; } .cnd-newsletters .scheduler .scheduler-setter .datepicker, .cnd-newsletters .scheduler .scheduler-setter .ui-timepicker-select { float: left; width: calc(50% - 240px); background: #fff; } /* ================================================================================== */ /* == Message Editor ================================================================ */ /* ================================================================================== */ #vo-dragitemslistcontainer { } #vo-dragitemslistcontainer .btn { background: var(--bg-gray); border-color: var(--color-border); border-style: dashed; color: var(--text-default); } .message-editor-container { position: relative; } .message-editor-container .message-editor-toolbar { box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0,0,0,0.12); position: sticky; top: 0; z-index: 10; } .message-editor, .message-editor iframe { border: none; } .message-editor .loading { min-height: 250px; background: url(../../img/loader3.gif) no-repeat center; background-size: 50px; text-indent: -9999px; } /* Message Frame */ /* The .message-frame class wraps the rendered email inside the editor. We must reset the styles on it to prevent the admin styles from contaminating the email styles, and to return to browser defaults. */ .message-frame { all: revert; } .message-frame *, .message-frame *::before, .message-frame *::after { box-sizing: content-box; list-style: revert; margin: revert; padding: revert; } .recipient-filters { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 20px 0; padding: 20px 0; } .recipient-filters .vo-plan-filters { margin-top: 20px; } /* Recipient Lists */ .an-recipients { margin-top: 30px; } .test-recipients label, .an-recipients label { float: left; width: 45px; height: auto; color: var(--text-default) !important; line-height: 40px; font-weight: normal; } .test-recipients input, .an-recipients input { float: left; height: 40px; width: calc(50% - 70px); background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; } .test-recipients .delete, .an-recipients .delete { float: right; height: 40px; width: 20px; background: url(../../img/icon-delete.svg) no-repeat center !important; background-size: 18px; border: none; text-indent: -9999px; cursor: pointer; } .test-recipients .delete:hover, .an-recipients .delete:hover { background-size: 20px; } .test-recipients ul li, .an-recipients ul li { overflow: hidden; margin: 10px 0 15px 0; } .test-recipients ul li input:first-of-type, .an-recipients ul li input:first-of-type { margin-right: 20px; } .test-recipients p, .an-recipients p { margin-bottom: 10px; } /* ================================================================================== */ /* == Push Notification Editor ====================================================== */ /* ================================================================================== */ /* Option Descriptions */ #form-push-notification .bootstrap-select.vo-push-sub-type .text { font-weight: 600; } #form-push-notification .bootstrap-select.vo-push-sub-type .text-muted, #form-push-notification .vo-cta-add-menu .text-muted { display: block; color: var(--text-lightest); font-size: 12px; font-weight: 400; line-height: 1.5; padding: 0; margin-top: -2px; } /* Button Editor */ #form-push-notification .vo-push-buttons-block { border-top: 1px solid var(--color-border); padding-top: 20px; margin-top: 20px; } #form-push-notification .vo-push-buttons-head { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 15px; } #form-push-notification .vo-push-buttons-title { font-size: 14px; font-weight: 600; margin: 0; } #form-push-notification .vo-cta-add-toggle { background: none; border: 0; color: var(--color-primary); font-size: 13px; font-weight: 600; padding: 0; cursor: pointer; } #form-push-notification .vo-cta-add-toggle:hover { color: var(--color-primary-active); } #form-push-notification .vo-cta-add.open .dropdown-toggle{ box-shadow: none; } #form-push-notification .vo-cta-group { background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; padding: 15px; margin-bottom: 15px; } #form-push-notification .vo-cta-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; } #form-push-notification .vo-cta-group-head strong { color: var(--text-default); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } #form-push-notification .vo-cta-remove { width: 16px; height: 100%; background: url(../../img/icon-tag-x.svg) no-repeat center; background-size: 10px; border: none; text-indent: -9999px; cursor: pointer; } #form-push-notification .vo-cta-remove:hover { background: url(../../img/icon-tag-x-hover.svg) no-repeat center; background-size: 10px; } #form-push-notification .vo-cta-group input, #form-push-notification .vo-cta-group .bootstrap-select .dropdown-toggle { background: #fff } #form-push-notification .vo-cta-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 15px; } #form-push-notification .vo-cta-fields > li { min-width: 0; margin: 0; } #form-push-notification .vo-cta-fields > li:nth-child(n+3) { grid-column: 1 / -1; } #form-push-notification .vo-cta-fields > li .bootstrap-select { width: 100%; } #form-push-notification .vo-cta-fields .sub-text { margin: 6px 0 0; cursor: default; } #form-push-notification .vo-cta-note { background: var(--notice-neutral-bg) url(../../img/icon-info-neutral.svg) no-repeat 14px center; background-size: 18px; border: 1px solid var(--notice-neutral-border); border-radius: 4px; color: var(--text-default); font-size: 12px; padding: 11px 14px 11px 42px; margin-top: 15px; } /* Timing & Frequency Rows */ #form-push-notification .vo-timing-row label.item { width: 95px; } #form-push-notification .vo-timing-row .vo-inline-fields { display: flex; align-items: center; width: calc(100% - 95px); gap: 8px; } #form-push-notification .vo-timing-row input.vo-timing-number { flex: 0 0 auto; width: 60px; } #form-push-notification .vo-timing-row .bootstrap-select { flex: 0 0 auto; width: 95px; } #form-push-notification .vo-timing-row .vo-inline-label { flex: 0 0 auto; color: var(--text-darkest); font-weight: 600; white-space: nowrap; } #form-push-notification .vo-meter-summary .vo-meter-note--caution { color: var(--notice-warning-text); } #form-push-notification .vo-meter-summary .vo-meter-note--problem { color: var(--notice-danger-text); } #form-push-notification .vo-push-preview-frame-wrap { background: #fff; border: 1px solid var(--color-border); border-radius: 3px; overflow: hidden; } #form-push-notification .vo-push-preview-frame { display: block; width: 100%; height: 360px; border: 0; } #form-push-notification .vo-push-preview-frame.vo-preview-tall { height: 620px; } /* ================================================================================== */ /* == Messages - Manage Lists ======================================================= */ /* ================================================================================== */ /* Prompt to setup email sender identity */ #email-deliverability-prompt { display: block; background-image: linear-gradient(0deg, #1a84e3 0%, #3f60c8 100%); background-position: 0 -30px; background-size: 100% calc(100% + 30px); border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); font-size: 15px; font-weight: 600; line-height: 1.5; padding: 30px 30px 30px 170px; margin-bottom: 40px; position: relative; transition: background 0.7s; } #email-deliverability-prompt:hover { background-position: 0 0; } #email-deliverability-prompt:before { content: ""; width: 142px; height: 107px; background: url(../../img/paper-airplanes.png) no-repeat top right; background-size: 100% auto; position: absolute; left: 10px; bottom: -17px; transition: all ease-out 0.45s; } #email-deliverability-prompt:after { content: ""; width: 100%; height: 88%; background: url(../../img/clouds.png) no-repeat top right; background-size: auto 100%; position: absolute; right: 0; bottom: 0; transition: all ease-out 0.7s; } #email-deliverability-prompt:hover:before { width: 122px; height: 87px; left: 40px; bottom: 7px; } #email-deliverability-prompt:hover:after { height: 92%; } #tab-msg-list-members { } /* For some reason there is extra padding here. There's probably a better way to correct the spacing issue without these override styles. */ #tab-msg-list-members .filters { padding: 0; } #tab-msg-list-members .page-body { padding: 0; } /* Email Service Providers */ #vo-default-mail-provider-list { } #vo-default-mail-provider-list .recipient-filters { border: none; margin: 0; padding: 0; } /* Email Service Provider Credentials */ #integrations-info { } #integrations-info .ems-credentials { background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 4px; padding: 20px; margin-top: 60px; margin-bottom: 0; position: relative; } #integrations-info .ems-credentials h3 { position: absolute; top: -27px; left: 0; } #integrations-info .ems-credentials input { background: #fff; } #integrations-info .ems-credentials .btn { width: calc(100% - 150px); } /* Sync Result Details */ #integrations-info .vo-sync-details { margin-top: 10px; } #integrations-info .vo-sync-details summary { cursor: pointer; } #integrations-info .vo-sync-details-body { max-height: 300px; overflow: auto; font-weight: 400; white-space: pre-line; margin-top: 10px; } /* ================================================================================== */ /* == Messages - Import Lists ======================================================= */ /* ================================================================================== */ #tab-msg-list-import { } #tab-msg-list-import #import-data-container table .bootstrap-select { width: 170px; } /* Draggable TRs */ /* #tab-msg-list-import #import-data-container table td:first-child { padding-left: 28px; width: 250px; } #tab-msg-list-import #import-data-container table td:first-child:before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 100%; background: url(../../img/icon-draggable.svg) no-repeat center; background-size: 5px auto; background-color: var(--bg-gray); opacity: 0.75; border-right: 1px solid var(--table-border); text-align: center; cursor: pointer; cursor: grab; } */ #tab-msg-list-import #import-data-container table tr { /* prevent highlighting */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: grab; } #tab-msg-list-import #import-data-container table tr.row-grabbed { background: var(--bg-table-header); } #tab-msg-list-import #import-data-container table tr:active { cursor: grabbing; } #tab-msg-list-import .vo-notification-results { } #tab-msg-list-import .vo-notification-results > div { border-radius: 0; margin: 0; } #tab-msg-list-import .vo-exclude-members-container { float: left; margin: 11px 0 0 12px; } #tab-msg-list-import .vo-exclude-members-container label { float: left; } #tab-msg-list-import .vo-exclude-members-container .toggle-switch { float: left; margin: -1px 8px 0 0; } #tab-msg-list-import .processing-import { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 20px; } #tab-msg-list-import .processing-import h3 { float: left; } #tab-msg-list-import .processing-import .percent-complete { float: right; font-size: 13px; } #tab-msg-list-import .processing-import .progress-bar { width: 100%; height: 10px; background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; } #tab-msg-list-import .processing-import .progress-bar-value { height: 100%; background: linear-gradient(90deg, var(--color-blue2) 0%, var(--color-green2) 100%); transition: width 2s; } #tab-msg-list-import .processing-import .progress-bar { background-color: var(--bg-gray); background-image: linear-gradient(45deg, rgb(from var(--color-border) r g b / 0.7) 25%, transparent 25%, transparent 50%, rgb(from var(--color-border) r g b / 0.7) 50%, rgb(from var(--color-border) r g b / 0.7) 75%, transparent 75%, transparent); background-size: 20px 20px; animation: progress-bar-stripes 2s linear infinite; } @keyframes progress-bar-stripes { from { background-position: 20px 0; } to { background-position: 0 0; } } /* ================================================================================== */ /* === Event Messages =============================================================== */ /* ================================================================================== */ /* Trigger Purpose Note */ .vo-trigger-about { background: var(--notice-neutral-bg); border: 1px solid var(--notice-neutral-border); border-radius: 4px; color: var(--notice-neutral-text); font-size: 13px; line-height: 1.5; padding: 12px 15px; margin: 0 0 20px 0; } .vo-trigger-about p { margin: 0; } .vo-trigger-about .vo-trigger-coverage { color: var(--text-default); margin-top: 6px; } /* Send To */ /* The three checkboxes sit in the control column, so they override .form-list > li label, which floats every label in a settings row to a 150px column of its own. */ .vo-send-to:after { content: ""; display: table; clear: both; } /* clearfix: the label floats and the checkbox row can be shorter than it */ .vo-send-to .vo-send-to-kinds { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 11px 0 0 0; margin: 0 0 0 150px; } .vo-send-to .vo-send-to-kinds > li { margin: 0; } .vo-send-to .vo-send-to-kinds label { display: flex; float: none; align-items: center; width: auto; color: var(--text-darkest); font-weight: 600; gap: 8px; padding: 0; cursor: pointer; } .vo-send-to .vo-send-to-kinds li.is-locked label { cursor: default; opacity: 0.6; } /* the type does not allow this one off */ .vo-send-to .vo-send-to-locked { clear: both; color: var(--text-muted); font-size: 13px; margin-left: 150px; } /* System Event Copy */ .vo-system-copy .vo-system-copy-note { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0 0 10px 0; } /* Letter Return Address */ .vo-letter-return-current { color: var(--text-default); font-size: 13px; line-height: 1.5; } .vo-letter-return-current .vo-address-inherited { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; } .vo-letter-return-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* Series Hand-Off */ .vo-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .vo-chain-row label { color: var(--text-muted); font-size: 12px; margin: 0; white-space: nowrap; } .vo-chain-row select { flex: 1 1 180px; min-width: 140px; } .vo-chain-row .vo-chain-days { width: 60px; text-align: center; } .vo-chain-row .vo-chain-time { width: 80px; text-align: center; } .vo-chain-row .vo-chain-unit { color: var(--text-muted); font-size: 12px; white-space: nowrap; } .vo-chain-empty { color: var(--text-muted); font-size: 13px; } #tab-message-list .subject { cursor: pointer; } #tab-message-list .vo-stats { color: var(--color-blue2); cursor: pointer; } .sidebar .status { } /* Split Settings */ .split-settings { border-bottom: 1px solid var(--color-border); } .split-settings > ul { display: -ms-flex; display: -webkit-flex; display: flex; } .split-settings > ul > li { flex: 1 0 0px; border-right: 1px solid var(--color-border); padding: 20px; position: relative; } .split-settings > ul > li:last-child { border: none; } .split-settings > ul > li h2 { margin-bottom: 10px; margin-right: 40px; } .split-settings > ul > li p { margin: 10px 0; } .split-settings > ul > li .condition { } .split-settings > ul > li .type2 .bootstrap-select { float: left; width: calc(70% - 5px); } .split-settings > ul > li .type2 input { float: right; width: calc(30% - 5px); height: 40px; } .split-settings .button-footer { text-align: right; margin: 0; padding: 15px 20px; } .split-settings .button-footer .action { margin: 0 0 0 7px; } .split-settings > ul > li.split-disabled { } .split-settings > ul > li.split-disabled h2, .split-settings > ul > li.split-disabled > div { opacity: 0.5; pointer-events: none; } .split-settings > ul > li.split-disabled > div.btn-more { opacity: 1; pointer-events: all; } .split-settings > ul > li.split-disabled h2:after { content: " - Disabled"; text-transform: uppercase; color: var(--color-red); font-size: 0.8em; vertical-align: 1px; } /* An enabled split with no condition saved: it reads as live but can never be chosen (CMN_Event::checkForSplits skips a variant with an empty split_filter), so it is called out in amber rather than the red used for a deliberate Disable. */ .split-settings > ul > li.split-no-condition h2:after { content: " - No conditions"; text-transform: uppercase; color: var(--color-yellow3); font-size: 0.8em; vertical-align: 1px; } .split-settings > ul > li .vo-split-warning { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--color-yellow3); background: rgb(from var(--color-yellow) r g b / 0.12); } .split-settings > ul > li .vo-split-warning p { margin: 0; font-size: 12.5px; line-height: 1.5; } /* Split Message Tabs */ #cmn_message_event .block-tabs--dark .ui-tabs-nav li.ui-state-disabled { opacity: 1; } #cmn_message_event .block-tabs--dark .ui-tabs-nav li.ui-state-disabled a:after { content: " - Disabled"; text-transform: uppercase; color: var(--color-red); font-size: 0.8em; vertical-align: 1px; } #cmn_message_event .block-tabs--dark .ui-tabs-nav li.split-no-condition a:after { content: " - No conditions"; text-transform: uppercase; color: var(--color-yellow3); font-size: 0.8em; vertical-align: 1px; } /* Message Timing */ .day-time { } .day-time label { display: inline-block; width: 50%; height: 34px; line-height: 34px; font-size: 13px; font-weight: 600; color: var(--text-darkest); } .day-time input { float: right; width: 50%; } /* Event Message Settings Tab */ .event-message-settings { } .event-message-settings .event-trigger-plan-product { margin: 20px 0; } .event-message-settings .vo-plan-all-row { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); } .event-message-settings .vo-plan-list--all { opacity: 0.5; pointer-events: none; } /* All plans ticked: shown, not editable */ .event-message-settings .vo-plan-list:not(.vo-plan-list--all) .children input:disabled + .checkbox-placeholder { opacity: 0.5; } /* plan implied by its ticked product */ .event-message-settings .test-recipients { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 20px 0; padding: 20px 0; } /* ================================================================================== */ /* === Bounces ====================================================================== */ /* === admin/cmn/message/bounce ===================================================== */ /* ================================================================================== */ #cmn_bounce table .reason { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; } /* ================================================================================== */ /* == Print Vendor ================================================================== */ /* ================================================================================== */ #triggers-list tr.new-trigger-template { background: var(--bg-gray); } #triggers-list tr.new-trigger-template #issue-code-fld { width: 100%; } #triggers-list tr.new-trigger-template input { float: left; background: #fff; } #triggers-list tr.new-trigger-template .btn { float: right; margin-left: 10px; } #triggers-list tr.new-trigger-template .ui-timepicker-select { float: left; margin-left: 10px; } #triggers-list tr.new-trigger-template .dropdown-toggle { font-size: 14px; line-height: 1; } #form-print-vendor ul.weekly-period-list { } #form-print-vendor ul.weekly-period-list li { clear: both; } #form-print-vendor .recipient-filters { border: none; margin: 0 0 20px 0; padding: 0; } #form-print-vendor .distribution-schedule { margin-bottom: 20px; } #form-print-vendor .monthly-period { overflow: hidden; } #form-print-vendor .monthly-period #multiple-date-picker { float: right; width: calc(100% - 150px); } #form-print-vendor .monthly-period #multiple-date-picker .ui-datepicker { background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; } #cmn_print_vendor .vo-send-terms { font-size: 13px; font-style: italic; margin-left: -7px; opacity: 0.75; } /* Print Vendor error message in table */ #cmn_print_vendor tr.vo-row-error-message { border-color: var(--color-red); } #cmn_print_vendor tr.vo-row-error-message td.vo-error-content { background: url(../../img/icon-error-white.svg) no-repeat 15px center !important; background-color: var(--color-red) !important; background-size: 20px !important; font-weight: 600; padding: 15px 20px 16px 45px; } #cmn_print_vendor tr.vo-row-error-message + tr td, #cmn_print_vendor tr.vo-row-error-message + tr td .btn { border-color: var(--color-red2); color: var(--color-red2); } #cmn_print_vendor tr.vo-row-error-message + tr td .btn .caret { background-image: url(../../img/icon-dropdown-arrow-red.svg); } #cmn_print_vendor tr.vo-row-error-message + tr td:first-child:before { content: ""; width: 3px; height: 100%; background: var(--color-red); position: absolute; top: 0; left: 0; } #cmn_print_vendor tr.vo-row-error-message + tr td:last-child:before { content: ""; width: 3px; height: 100%; background: var(--color-red); position: absolute; top: 0; right: 0; } #cmn_print_vendor tr.vo-row-error-message + tr td:after { content: ""; width: 100%; height: 3px; background: var(--color-red); position: absolute; bottom: 0; left: 0; } /* Schedules */ #vo-distribution-schedule .send-rules .member-count:before { content: "Estimated Subscribers: "; } /* ================================================================================== */ /* == Order Manager ================================================================= */ /* ================================================================================== */ table.orders .email { color: var(--text-default); } table.orders .canceled { color: var(--color-red2); font-style: italic; font-size: 12px; vertical-align: 1px; } table.orders .canceled:before { content: " - "; color: var(--text-darkest); } table.orders .canceled:after { content: ""; height: 100%; position: absolute; top: 0; left: 0px; } table.orders .canceled:after { display: block; height: 100%; width: 3px; background: var(--color-red); text-indent: -9999px; } #dialog-batch-print-packing-slips { overflow-y: auto; padding: 0; } #dialog-batch-print-packing-slips .block-body { padding-bottom: 5px; } #dialog-batch-print-packing-slips p { margin: 0 0 15px 0; } #dialog-batch-print-packing-slips .btn { margin: 0 10px 15px 0; } #dialog-batch-print-packing-slips input { height: auto; } /* ================================================================================== */ /* == Subscription Manager ========================================================== */ /* ================================================================================== */ /* Link Filter Notice */ .subscription-filter-note { background: var(--notice-info-bg); border: 1px solid var(--notice-info-border); border-radius: 4px; color: var(--notice-info-text); padding: 12px 15px; margin-bottom: 20px; } /* ================================================================================== */ /* == Catalog ======================================================================= */ /* ================================================================================== */ /* Catalog Page */ #product-container { padding: 20px; position: relative; } #product-container ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 20px; } #product-container ul li { } #product-container ul li a { display: block; } #product-container ul li .image { display: block; width: 100%; background: var(--bg-gray); border: 1px solid var(--color-border); padding-top: 100%; } #product-container ul li .name { display: block; color: var(--text-darkest); font-weight: 600; padding: 3px 0; } #product-container ul li .retail { display: block; color: var(--text-darkest); font-weight: 700; } #product-container ul li .no-image { background: var(--bg-gray); border: 1px solid var(--color-border); padding-top: 100%; vertical-align: middle; } #product-container ul li .no-image:after { content: "No Image"; display: block; text-align: center; color: var(--text-default); font-weight: 600; margin-top: calc(-50% - 7px); } .waiting-for-results-catalog { width: 100%; height :100%; background-color: rgba(255,255,255,0.92); position: absolute; top: 0; left: 0; } /* Item Information */ #product-item-list { } #product-item-list .row { border-top: 1px solid var(--color-border); overflow: hidden; padding: 20px; } #product-item-list .row .col { float: left; } #product-item-list .row .vo-make-default { width: 100%; border-top-left-radius:0; border-top-right-radius:0; border-top: none; margin: 0 !important; } #product-item-list .row .col:first-child { width: 118px; margin-right: 20px; } #product-item-list .row .vo-default-image { float: left; width: 100%; background: var(--bg-gray); border: 1px solid var(--color-border); padding-top: 100%; } #product-item-list .row .vo-default-image.no-image { background: var(--bg-gray); border: 1px solid var(--color-border); vertical-align: middle; } #product-item-list .row .vo-default-image.no-image:after { content: "No Image"; display: block; text-align: center; color: var(--text-default); font-weight: 600; margin-top: calc(-50% - 7px); } #product-item-list .row .item h3 { font-size: 15px; } #product-item-list .row .item div { font-weight: 600; color: var(--text-darkest); } #product-item-list .row .item div span { font-weight: 400; color: var(--text-default); } #product-item-list .row .item .edit { display: block; margin-top: 8px; } #product-item-list .slider { /* padding: 20px; */ } #product-item-list .slider .button-footer { margin: 0; } #product-item-list .slider .button-footer .btn { min-width: 90px; } #product-item-list .slider h3 { font-size: 16px; color: var(--color-primary); margin: -4px 0 16px 0; } #product-item-list .slider .sub-text { font-size: 12px; line-height: 1.5; margin: 4px 0 11px 0; } #product-item-list .vo-autosave-cta { font-size: 13px; margin: -14px 0 14px 0; } #product-item-list .vo-open-advanced { background: url(../../img/icon-arrow-down.svg) no-repeat center right; color: var(--text-darkest); font-weight: 600; margin: 0 !important; cursor: pointer; } #product-item-list .vo-advanced .form-list { margin-top: 15px; } #product-item-list .image-area { } #product-item-list .image-area .upload-prompt { display: inline-block; background: rgba(0,0,0,0.02); border: 1px dashed var(--color-border); border-radius: 5px; margin-bottom: 15px; margin-top: -10px; padding: 5px; } #product-item-list .image-area .upload-prompt .btn { display: inline-block; } #product-item-list .image-area .upload-prompt .sub-text { display: inline-block; line-height: 1; margin: 5px 10px 5px 3px; } /* #product-item-list .image-area .vo-files:hover { box-shadow: inset 0px 0px 0px 5px var(--color-green2); } */ /* Category & Tags */ #product-item-list .tag-editor { clear: both; } /* #product-item-list .tag-editor h3 { font-size: 13px; margin: -4px 0 9px 0; text-transform: uppercase; } */ #product-item-list .tag-editor .tag-group-container { margin-bottom: 7px; } #product-item-list .tag-editor .tag-group-container > span { display: inline-block; width: 100px; color: var(--text-darkest); font-weight: 600; } #product-item-list .tag-editor .tag-group-container .bootstrap-select { width: calc(100% - 100px); } /* Tangible Item Editor Grid */ #product-item-list #item-slider-tangible .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* grid-template-rows: repeat(4, 1fr); */ grid-column-gap: 0px; grid-row-gap: 0px; } #product-item-list #item-slider-tangible .grid-container > div { padding: 20px; } #product-item-list #item-slider-tangible .grid1 { grid-area: 1 / 1 / 2 / 3; border-bottom: 1px solid var(--color-border); } #product-item-list #item-slider-tangible .grid2 { grid-area: 2 / 1 / 3 / 2; } #product-item-list #item-slider-tangible .grid3 { grid-area: 2 / 2 / 3 / 3; border-left: 1px solid var(--color-border); } #product-item-list #item-slider-tangible .grid4 { grid-area: 3 / 1 / 4 / 3; border-top: 1px solid var(--color-border); } #product-item-list #item-slider-tangible .grid5 { grid-area: 4 / 1 / 5 / 3; border-top: 1px solid var(--color-border); } /* Resource Item Editor Grid */ #product-item-list #item-slider-resource .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* grid-template-rows: repeat(4, 1fr); */ grid-column-gap: 0px; grid-row-gap: 0px; } #product-item-list #item-slider-resource .grid-container > div { padding: 20px; } #product-item-list #item-slider-resource .grid1 { grid-area: 1 / 1 / 2 / 3; border-bottom: 1px solid var(--color-border); } #product-item-list #item-slider-resource .grid2 { grid-area: 2 / 1 / 3 / 2; } #product-item-list #item-slider-resource .grid3 { grid-area: 2 / 2 / 3 / 3; border-left: 1px solid var(--color-border); } #product-item-list #item-slider-resource .grid4 { grid-area: 3 / 1 / 4 / 3; border-top: 1px solid var(--color-border); } #product-item-list #item-slider-resource .grid5 { grid-area: 4 / 1 / 5 / 3; border-top: 1px solid var(--color-border); } /* ================================================================================== */ /* == Plan Manager ================================================================== */ /* ================================================================================== */ /* -- Plan List --------------------------------------------------------------------- */ /* Custom Layout Badge */ .cmc.plan .list .vo-layout-override { display: inline-block; background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 10px; color: var(--text-lightest); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; padding: 1px 7px; vertical-align: middle; } .cmc.plan .list .vo-layout-override:empty { display: none; } /* A plan on the shared layout sends no label. */ /* -- Plan Profile Tab -------------------------------------------------------------- */ .cmc.plan #product-item-list .row { padding: 0; } .cmc.plan #product-item-list .row .col { padding: 20px; } .cmc.plan #product-item-list .row .col:first-child { width: 50%; margin: 0; } .cmc.plan #product-item-list .row .col:nth-child(2) { width: 50%; margin: 0; } .cmc.plan #product-item-list .row.no-results { line-height: 240px; text-align: center; padding: 20px; } .cmc.plan .term-blank-state { border-top: 1px solid var(--color-border); text-align: center; padding: 100px 20px; } .cmc.plan .term-blank-state img { display: block; width: 180px; margin: 0 auto 20px; } .cmc.plan .term-blank-state p { font-size: 15px; margin: 0 0 18px 0; } .cmc.plan .term-blank-state .btn { background-image: url(../../img/icon-add.svg); background-size: 16px; background-repeat: no-repeat; background-position: 10px; padding-left: 30px; } .cmc.plan .no-results { border-top: 1px solid var(--color-border); } .cmc.plan .block#profile .list-builder { margin-top: 15px; } .cmc.plan .block#profile .list-builder li { height: 40px; margin-bottom: 15px; } .cmc.plan .block#profile .list-builder .expand-items li { height: auto; margin: 0; } .cmc.plan .block#profile .list-builder .edit-mode input { width: calc(100% - 150px); } @media only screen and (min-width: 1210px) { .cmc.plan .block#profile { float: left; width: calc(60% - 40px); } .cmc.plan .block#account-info { float: right; width: 40%; } } /* -- Terms Tab --------------------------------------------------------------------- */ .cmc.plan #product-item-list .subscription-status h2.vo-title.flag-admin:after { content: "Admin"; background: var(--color-yellow3); border-radius: 3px; color: #fff; font-size: 12px; line-height: 1.5; padding: 1px 5px; vertical-align: 2px; margin-left: 5px; } .cmc.plan #product-item-list .subscription-status .number { margin-bottom: 3px; } .cmc.plan #product-item-list .row {} .cmc.plan #product-item-list .row .description { font-weight: 400; font-style: italic; color: var(--text-default); margin: -13px 0 13px 0; } .cmc.plan #product-item-list .row .permalink { margin: -13px 0 13px 0; } .cmc.plan #product-item-list .row .vo-term-update-scheduled, .cmc.plan #product-item-list .row .vo-subscriptions-updating{ background: var(--color-red); border-radius: 4px; overflow: hidden; color: #fff; font-weight: 600; padding: 15px; margin: 20px 20px -7px 20px; position: relative; } .cmc.plan #product-item-list .row .vo-term-update-scheduled span { color: #fff; font-weight: 600; } .cmc.plan #product-item-list .row .vo-term-update-scheduled span.vo-new-terms { font-style: italic; font-weight: 400; } .cmc.plan #product-item-list .row .vo-term-update-scheduled .text { float: left; width: calc(100% - 120px); } .cmc.plan #product-item-list .row .vo-term-update-scheduled .btn { background: color-mix(in srgb, var(--color-red) 83%, #000); border-color: color-mix(in srgb, var(--color-red) 82%, #000); color: #fff; margin-top: -15px; position: absolute; right: 15px; top: 50%; transition: all linear .218s; } .cmc.plan #product-item-list .row .vo-term-update-scheduled .btn:hover { background: color-mix(in srgb, var(--color-red) 78%, #000); border-color: color-mix(in srgb, var(--color-red) 77%, #000); } .cmc.plan #product-item-list .row .subscription-promo { } .cmc.plan #product-item-list .row .subscription-promo h2 { display: none; } .cmc.plan #product-item-list .row .subscription-promo .description { margin-top: 25px; } .cmc.plan #product-item-list .row .subscription-promo .vo-promo { } .cmc.plan #product-item-list .row .subscription-promo .vo-promo .vo-block-template { margin-bottom: 3px; } .cmc.plan #product-item-list .row .subscription-promo .vo-promo .vo-promo-name { color: var(--text-darkest); font-weight: 600; font-size: 13px; } .cmc.plan #product-item-list .row .subscription-promo .vo-promo .vo-promo-name:before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--color-yellow3); border-radius: 10px; vertical-align: 2px; margin-right: 7px; } /* Terms Editor Grid */ .cmc.plan #product-item-list #plan-slider-subscription .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* grid-template-rows: repeat(4, 1fr); */ grid-column-gap: 0px; grid-row-gap: 0px; } .cmc.plan #product-item-list #plan-slider-subscription .grid-container > div { padding: 20px; } .cmc.plan #product-item-list #plan-slider-subscription .grid1 { grid-area: 1 / 1 / 1 / 1; border-right: 1px solid var(--color-border); } .cmc.plan #product-item-list #plan-slider-subscription .grid2 { grid-area: 2 / 2 / 1 / 2; } .cmc.plan #product-item-list #plan-slider-subscription .grid3 { grid-area: 3 / 1 / 3 / 3; border-top: 1px solid var(--color-border); } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted { } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted li.vo-li-price .bootstrap-select { float: right; width: calc(100% - 255px); } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted li.vo-li-price input { width: 90px; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted li.vo-li-billing-period .bootstrap-select { float: right; width: calc(100% - 255px); } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted li.vo-li-billing-period input { width: 90px; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options { overflow: hidden; margin-bottom: 20px; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option { background: #fff; border: 1px solid var(--color-border); border-radius: 4px; padding: 15px 15px 15px 52px; margin: 8px 0; position: relative; cursor: pointer; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option:last-of-type { float: right; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option.selected { background: var(--color-primary); color: rgba(255,255,255,0.83); } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option.selected label { color: #fff; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option.selected .tooltip { background-color: var(--color-dark-blue); } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option .radio { width: 24px; height: 24px; margin-top: -12px; position: absolute; top: 50%; left: 15px; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option .radio-placeholder { width: 100%; height: 100%; background-size: 12px; background-position: center 6px; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options label { display: block; font-weight: 600; color: var(--text-darkest); margin-bottom: 5px; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option p { font-size: 13px; } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option:not(.selected):hover { background:#f8fafe; border-color: #d2deea; } .cmc.plan #product-item-list #plan-slider-subscription li.show-input {} .cmc.plan #product-item-list #plan-slider-subscription li.show-input .bootstrap-select { float: right; width: calc(100% - 255px); } .cmc.plan #product-item-list #plan-slider-subscription li.show-input input { width: 90px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-subscription-early-extension { } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters { background: #fff; overflow: hidden; border: 1px solid var(--color-border); border-radius: 4px; margin-top: 15px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters p { font-weight: 600; color: var(--text-darkest); padding: 15px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .early-renewal-timing { overflow: hidden; padding: 15px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .early-renewal-timing p { float: left; width: calc(100% - 100px); padding: 1px 0 0 0; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .early-renewal-timing input { float: right; width: 90px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .early-renewal-options { border-top: 1px solid var(--color-border); } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .vo-template { border-top: 1px dashed var(--color-border); } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .vo-template li { overflow: hidden; border-bottom: 1px dashed var(--color-border); } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .vo-template li:last-child { border: none; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .vo-template .toggle-switch { float: left; margin: 19px 0 0 15px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .vo-template .text { float: right; width: calc(100% - 65px); padding: 15px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .vo-template .vo-title { font-weight: 600; color: var(--text-darkest); } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .early-renewal-link { border-top: 1px solid var(--color-border); padding: 15px; } .cmc.plan #product-item-list #plan-slider-subscription .vo-promo-early-extension-filters .early-renewal-link p { padding: 0 0 7px 0; } /* Disabled section when update is scheduled */ .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled { cursor: not-allowed; /* background: #f6f2f2; */ } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled > * { color: var(--text-default); opacity: 0.7; cursor: not-allowed; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled *, .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled .apply_changes_options .option { cursor: not-allowed; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled .apply_changes_options .option.selected { background: var(--text-lightest); } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled .apply_changes_options .option .radio > input:checked + .radio-placeholder { background-color: var(--text-default); border-color: var(--text-default); } .cmc.plan #product-item-list #plan-slider-subscription .apply_changes_options .option:not(.selected):hover { background:#fff; border-color: var(--color-border); } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted.disabled li input { opacity: 0.7; } /* Update scheduled message */ .cmc.plan #product-item-list #plan-slider-subscription .member-restricted .vo-term-update-scheduled { background: var(--color-red); border-radius: 4px; overflow: hidden; color: #fff; font-weight: 600; padding: 15px; margin-bottom: 20px; position: relative; opacity: 1; cursor: auto; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted .vo-term-update-scheduled * { cursor: auto; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted .vo-term-update-scheduled span { color: #fff; font-weight: 600; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted .vo-term-update-scheduled span.vo-new-terms { font-style: italic; font-weight: 400; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted .vo-term-update-scheduled .btn { background: color-mix(in srgb, var(--color-red) 83%, #000); border-color: color-mix(in srgb, var(--color-red) 82%, #000); color: #fff; margin-top: 10px; cursor: pointer; transition: all linear .218s; } .cmc.plan #product-item-list #plan-slider-subscription .member-restricted .vo-term-update-scheduled .btn:hover { background: color-mix(in srgb, var(--color-red) 78%, #000); border-color: color-mix(in srgb, var(--color-red) 77%, #000); } /* Confirm Update Dialog */ .cmc.plan #dialog-change-item { } .cmc.plan #dialog-change-item h3 { margin-bottom: 5px; } .cmc.plan #dialog-change-item .vo-body { margin-bottom: 20px; } .cmc.plan #dialog-change-item .vo-body .warning-message { margin: 20px 0; } .cmc.plan #dialog-change-item .vo-confirm { display: inline-block; background:#f8fafe; border: 1px solid; border-color: #d2deea; border-radius: 4px; color: var(--color-dark-blue); padding: 10px 15px; margin-bottom: 20px; } .cmc.plan #dialog-change-item .vo-confirm .vo-confirm-message { display: inline; } .cmc.plan #dialog-change-item .vo-confirm .btn { display: inline-block; margin-left: 7px; } .cmc.plan #dialog-change-item .scheduler { overflow: hidden; margin-top: 5px; } .cmc.plan #dialog-change-item .scheduler .option { width: 350px; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; padding: 15px 15px 15px 42px; margin: 10px 0 0 0; position: relative; cursor: pointer; } .cmc.plan #dialog-change-item .scheduler .option.selected { background: var(--color-primary); color: rgba(255,255,255,0.83); } .cmc.plan #dialog-change-item .scheduler .option.selected label { color: #fff; } .cmc.plan #dialog-change-item .scheduler .option .radio { position: absolute; top: 16px; left: 15px; } .cmc.plan #dialog-change-item .scheduler label { display: block; font-weight: 600; color: var(--text-darkest); cursor: pointer; } .cmc.plan #dialog-change-item .scheduler .option:not(.selected):hover { background:#f8fafe; border-color: #d2deea; } .cmc.plan #dialog-change-item .scheduler .vo-schedule-inputs { margin-top: 10px; } .cmc.plan #dialog-change-item .scheduler .ui-timepicker-select { height: 31px; appearance: none; background: var(--bg-subtle); outline: none; border: 1px solid var(--color-border); border-radius: 3px; border-radius: 3px; font-size: 12px; font-family: 'vo-font', Helvetica Neue, Arial, sans-serif; font-weight: 600; line-height: 1.5; padding: 5px 10px; margin-left: 10px; } .cmc.plan #dialog-change-item .scheduler span { font-weight: 600; font-size: 12px; margin-left: 7px; } /* -- Promotions Tab ---------------------------------------------------------------- */ .cmc.plan #tab-promotions { } .cmc.plan #tab-promotions .vo-plan-promotion-editor { } .cmc.plan #tab-promotions .vo-plan-promotion-editor .button-footer .btn { min-width: 90px; } .cmc.plan #tab-promotions li.show-input .bootstrap-select { float: left; width: calc(100% - 255px); margin-right: 15px; } .cmc.plan #tab-promotions li.show-input input { width: 90px; } .cmc.plan .promo-detail-header { overflow: hidden; margin: 0 0 20px 0; } .cmc.plan .promo-detail-header .vo-close-promo-detail { float: left; width: 40px; height: 40px; background: #FFF url(../../img/icon-back-arrow.svg) no-repeat center; border: 1px solid var(--color-border); border-radius: 3px; text-indent: -9999px; margin: 0 18px 0 0; cursor: pointer; } .cmc.plan .promo-detail-header h1 { font-weight: normal; line-height: 40px; } .cmc.plan #tab-promotions .notice { background: var(--color-yellow3); color: #fff; font-weight: 600; padding: 20px; } .cmc.plan #tab-promotions .notice.vo-term-lockdown { background: var(--notice-warning-bg); border: 1px solid var(--notice-warning-border); color: var(--notice-warning-text); padding: 19px; } .cmc.plan #tab-promotions .vo-plan-promotion-editor .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); /* grid-template-rows: repeat(4, 1fr); */ grid-column-gap: 0px; grid-row-gap: 0px; } .cmc.plan #tab-promotions .vo-plan-promotion-editor .grid-container > div { padding: 20px; } .cmc.plan #tab-promotions .vo-plan-promotion-editor .grid1 { grid-area: 1 / 1 / 1 / 1; border-right: 1px solid var(--color-border); } .cmc.plan #tab-promotions .vo-plan-promotion-editor .grid2 { grid-area: 2 / 2 / 1 / 2; } .cmc.plan #tab-promotions .vo-plan-promotion-editor .grid3 { grid-area: 3 / 1 / 3 / 3; border-top: 1px solid var(--color-border); } .cmc.plan #tab-promotions .vo-plan-promotion-editor .grid4 { grid-area: 4 / 1 / 4 / 3; border-top: 1px solid var(--color-border); } .cmc.plan #tab-promotions .vo-plan-promotion-editor h3 { font-size: 16px; color: var(--color-primary); margin: -4px 0 16px 0; } .cmc.plan #tab-promotions .vo-plan-promotion-editor .vo-open-advanced { background: url(../../img/icon-arrow-down.svg) no-repeat center right; font-weight: 600; margin: 0 !important; cursor: pointer; } .cmc.plan #tab-promotions .vo-plan-promotion-editor .vo-advanced .form-list { margin-top: 15px; } .cmc.plan #tab-promotions .vo-custom-promo-terms { } .cmc.plan #tab-promotions .vo-custom-promo-terms li.vo-li-billing-period .bootstrap-select { float: right; width: 90px; } .cmc.plan #tab-promotions .vo-custom-promo-terms li.vo-li-billing-period input { width: calc(100% - 255px); } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template { box-shadow: 0 2px 8px -2px rgba(0,0,0,0.05), 0 3px 4px -3px rgba(0,0,0,0.05); margin: 20px 0; padding-bottom: 0; transition: box-shadow .25s; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template:before, .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template:after { display: none; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template:last-child { margin-bottom: 0; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template:hover { box-shadow: 0 2px 10px -2px rgba(0,0,0,0.09), 0 3px 5px -3px rgba(0,0,0,0.08); } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template.disabled { } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template.disabled .checkbox > .checkbox-placeholder { background: url(../../img/icon-checkbox.svg) no-repeat center 4px; background-color: var(--text-lightest); border-color: color-mix(in srgb, var(--text-lightest) 88%, #000); } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-header { height: auto; background: #fff; border-radius: 3px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-header h2 { float: none; color: var(--text-darkest); margin: 0 0 0 27px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-header h2.vo-title.flag-admin .vo-term-name:after { content: "Admin"; background: var(--color-yellow3); border-radius: 3px; color: #fff; font-size: 11px; line-height: 1.5; padding: 1px 4px; vertical-align: 2px; margin-left: 4px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-header .checkbox { float: left; position: absolute; top: 25px; left: 18px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-header .vo-term { font-size: 12px; font-style: italic; color: var(--color-blue2); font-weight: 400; vertical-align: 1px; margin-left: 1px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-header .vo-term-detail { clear: both; color: var(--text-default); font-style: italic; line-height: normal; font-size: 13px; margin: -16px 0 16px 27px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .block-body { display: none; background: var(--bg-gray); border-top: 1px solid var(--color-border); border-radius: 0 0 3px 3px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template input { background-color: #fff; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template input.disabled { cursor: not-allowed; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .bootstrap-select .btn{ background: #fff; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .vo-promo-term-copy { background: var(--bg-body); border: 1px solid var(--color-border); border-radius: 3px; font-style: italic; font-size: 13px; margin: -4px 0 17px 0; padding: 10px 13px; } .cmc.plan #tab-promotions .vo-specific-terms .vo-block-template .vo-promo-term-copy:before { content: "Promo Preview"; display: block; font-weight: 600; font-style: normal; color: var(--text-darkest); } .cmc.plan #tab-promotions .vo-availability { } .cmc.plan #tab-promotions .vo-availability input { background: var(--bg-subtle) url(../../img/icon-calendar.svg) no-repeat 10px center; margin: 15px 0 0 150px; padding: 0 15px 0 33px; } .cmc.plan #tab-promotions .vo-promotion-terms { background: var(--bg-gray); } .cmc.plan #tab-promotions .vo-promotion-terms .row { border-top: 1px dashed var(--color-border); margin: 20px 0 0 0; padding-top: 18px; } .cmc.plan #tab-promotions .vo-promotion-terms .row .item div { font-weight: 600; color: var(--text-darkest); } .cmc.plan #tab-promotions .vo-promotion-terms .row .item div span { font-weight: 400; color: var(--text-default); } .cmc.plan #tab-promotions .vo-promotion-terms .row .item .description { font-weight: 400; font-style: italic; color: var(--text-default); margin: -13px 0 13px 0; } .cmc.plan #tab-promotions .vo-promotion-terms .row .item .permalink { margin: -13px 0 13px 0; } .cmc.plan #tab-promotions .vo-promotion-terms .row .item .number, .cmc.plan #tab-promotions .vo-promotion-terms .row .item .status, .cmc.plan #tab-promotions .vo-promotion-terms .row .item .display { margin-bottom: 3px; } /* -- Combo Promotions Tab ---------------------------------------------------------- */ /* theme/admin/VO4/cmc/catalog/combo-profile.tpl Intro pricing for a bundle. Deliberately the same furniture as the single-plan promotions tab above: two columns, numbered steps, the same generated-terms strip at the bottom. The rules are restated rather than shared because that tab's selectors are scoped to #tab-promotions, and both canvases are in the DOM at once — so the ids can't be merged without one editor styling the other. .promo-detail-header is already scoped to .cmc.plan alone, so it is inherited as-is. Step 4 is the one real departure: a bundle picker instead of a parent-term list. */ .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .button-footer .btn { min-width: 90px; } .cmc.plan #tab-combo-promotions .notice { background: var(--color-yellow3); color: #fff; font-weight: 600; padding: 20px; } .cmc.plan #tab-combo-promotions .notice.vo-term-lockdown { background: var(--notice-warning-bg); border: 1px solid var(--notice-warning-border); color: var(--notice-warning-text); padding: 19px; } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid-container > div { padding: 20px; } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid1 { grid-area: 1 / 1 / 1 / 1; border-right: 1px solid var(--color-border); } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid2 { grid-area: 2 / 2 / 1 / 2; } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid3 { grid-area: 3 / 1 / 3 / 3; border-top: 1px solid var(--color-border); } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor h3 { font-size: 16px; color: var(--color-primary); margin: -4px 0 16px 0; } /* Replaces the inline border/margin the single-plan tab repeats on each step wrapper. */ .cmc.plan #tab-combo-promotions .promo-section { border-top: 1px solid var(--color-border); margin: 20px 0 0 0; padding-top: 20px; } /* Guidance inside a column. .tab-description is built for the full-width strip at the top of a tab (it carries its own gradient and padding), so it reads as a misplaced banner in here. */ .cmc.plan #tab-combo-promotions .promo-hint { font-style: italic; font-size: 13px; line-height: 1.5; color: var(--text-default); margin: -6px 0 16px 0; } .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-li-billing-period .bootstrap-select { float: right; width: 90px; } .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-li-billing-period input { width: calc(100% - 255px); } /* "Expire after X cycles" reveals a count beside the dropdown; "Recurring until cancelled" hides it. .show-input is toggled by the JS, the same contract the single-plan tab uses. */ .cmc.plan #tab-combo-promotions li.vo-subscription-cycle.show-input .bootstrap-select { float: left; width: calc(100% - 255px); margin-right: 15px; } .cmc.plan #tab-combo-promotions li.vo-subscription-cycle.show-input input { width: 90px; } /* Per-currency rows: the code and its field belong on one line, aligned to the input column. Left to the .form-list default the input claims calc(100% - 150px) and wraps under the code. */ .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-custom-rate-presets .currency-preset { display: flex; align-items: center; margin: 0 0 7px 150px; } .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-custom-rate-presets .currency-preset:last-child { margin-bottom: 0; } .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-custom-rate-presets .currency-preset .currency-preset-code { flex: 0 0 42px; font-size: 12px; color: var(--text-default); } .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-custom-rate-presets .currency-preset input { flex: 1 1 auto; width: auto; min-width: 0; } .cmc.plan #tab-combo-promotions .vo-availability input { background: var(--bg-subtle) url(../../img/icon-calendar.svg) no-repeat 10px center; margin: 15px 0 0 150px; padding: 0 15px 0 33px; } /* Step 4 — the bundle picker. Rows reuse the .vo-block-template treatment the single-plan tab gives its term list, so a selectable thing looks the same in both places. */ /* "Applies to": one tick per term the combo sells. Laid out on the .form-list grid so the label lines up with the fields in the column opposite. */ .cmc.plan #tab-combo-promotions .vo-build-terms { overflow: hidden; margin-bottom: 16px; } .cmc.plan #tab-combo-promotions .vo-build-terms > label.item { float: left; width: 150px; line-height: 18px; color: var(--text-darkest); font-weight: 600; padding: 11px 5px 10px 0; } .cmc.plan #tab-combo-promotions .vo-build-term-list { display: flex; flex-wrap: wrap; margin-left: 150px; padding-top: 9px; gap: 7px 20px; } .cmc.plan #tab-combo-promotions .vo-build-term-option { display: flex; align-items: center; gap: 8px; } .cmc.plan #tab-combo-promotions .vo-build-term-option .vo-build-term-label { color: var(--text-darkest); font-weight: 600; } .cmc.plan #tab-combo-promotions .vo-build-option { box-shadow: 0 2px 8px -2px rgba(0,0,0,0.05), 0 3px 4px -3px rgba(0,0,0,0.05); margin: 12px 0; padding-bottom: 0; transition: box-shadow .25s; } .cmc.plan #tab-combo-promotions .vo-build-option:before, .cmc.plan #tab-combo-promotions .vo-build-option:after { display: none; } .cmc.plan #tab-combo-promotions .vo-build-option:last-child { margin-bottom: 0; } .cmc.plan #tab-combo-promotions .vo-build-option:hover { box-shadow: 0 2px 10px -2px rgba(0,0,0,0.09), 0 3px 5px -3px rgba(0,0,0,0.08); } .cmc.plan #tab-combo-promotions .vo-build-option .block-header { height: auto; background: #fff; border-radius: 3px; padding: 18px; position: relative; } .cmc.plan #tab-combo-promotions .vo-build-option .block-header .checkbox { position: absolute; top: 20px; left: 18px; } .cmc.plan #tab-combo-promotions .vo-build-option .block-header h2 { float: none; color: var(--text-darkest); line-height: normal; margin: 0 0 0 27px; } .cmc.plan #tab-combo-promotions .vo-build-option .block-header .vo-term { font-size: 12px; font-style: italic; color: var(--color-blue2); font-weight: 400; vertical-align: 1px; margin-left: 2px; } .cmc.plan #tab-combo-promotions .vo-build-option .block-header .vo-term-detail { color: var(--text-default); font-style: italic; line-height: normal; font-size: 13px; margin: 6px 0 0 27px; } /* A plan that can't be bundled on the selected term stays listed, greyed, with the reason — hiding it would leave the admin wondering where their title went. */ .cmc.plan #tab-combo-promotions .vo-build-option.disabled { box-shadow: none; border-style: dashed; pointer-events: none; } .cmc.plan #tab-combo-promotions .vo-build-option.disabled .block-header { background: var(--bg-gray); } .cmc.plan #tab-combo-promotions .vo-build-option.disabled .block-header h2 { color: var(--text-default); } /* The rates ride on the row they belong to, one line per term the title is bundled into. Hidden until the server has priced the selection, so a stale or empty figure is never shown. */ .cmc.plan #tab-combo-promotions .vo-build-option .block-body { display: none; } .cmc.plan #tab-combo-promotions .vo-build-option.is-selected .block-body { display: block; background: var(--bg-gray); border-top: 1px solid var(--color-border); border-radius: 0 0 3px 3px; padding: 9px 18px; } .cmc.plan #tab-combo-promotions .vo-build-rate-line { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; } .cmc.plan #tab-combo-promotions .vo-build-rate-line .vo-build-rate-term { flex: 0 0 84px; font-size: 12px; font-weight: 600; color: var(--text-darkest); } .cmc.plan #tab-combo-promotions .vo-build-rate-line .vo-build-role { flex: 1 1 auto; font-size: 12px; font-style: italic; color: var(--text-default); } .cmc.plan #tab-combo-promotions .vo-build-rate-line .vo-build-price { flex: 0 0 auto; font-weight: 600; color: var(--text-darkest); } .cmc.plan #tab-combo-promotions .vo-build-option.is-anchor .vo-build-rate-line .vo-build-price { color: var(--color-primary); } /* What they actually pay when the intro ends, per term — the figures the whole step exists to produce. */ .cmc.plan #tab-combo-promotions .vo-build-summary { display: none; background: var(--bg-body); border: 1px solid var(--color-border); border-radius: 4px; margin-top: 20px; padding: 15px 18px; } .cmc.plan #tab-combo-promotions .vo-build-summary:before { content: "When the intro ends"; display: block; font-weight: 600; color: var(--text-darkest); margin-bottom: 3px; } .cmc.plan #tab-combo-promotions .vo-build-summary.has-error { background: var(--notice-danger-bg); border-color: var(--notice-danger-border); color: var(--notice-danger-text); } .cmc.plan #tab-combo-promotions .vo-build-summary.has-error:before { content: "This bundle won't sell yet"; color: var(--notice-danger-text); } .cmc.plan #tab-combo-promotions .vo-build-summary-line { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .cmc.plan #tab-combo-promotions .vo-build-summary-line .vo-build-summary-term { flex: 0 0 84px; font-style: italic; color: var(--text-default); } .cmc.plan #tab-combo-promotions .vo-build-summary-line .vo-build-summary-label { color: var(--text-default); } .cmc.plan #tab-combo-promotions .vo-build-summary-line .vo-build-total { font-size: 20px; font-weight: 600; color: var(--color-primary); } .cmc.plan #tab-combo-promotions .vo-build-summary .vo-build-summary-name { font-size: 13px; color: var(--text-default); margin-top: 6px; } .cmc.plan #tab-combo-promotions .vo-build-summary .vo-build-error { font-size: 13px; line-height: 1.5; } .cmc.plan #tab-combo-promotions .vo-build-warnings { margin-top: 15px; } .cmc.plan #tab-combo-promotions .vo-build-warnings .notice { border-radius: 3px; font-size: 13px; font-weight: 400; padding: 11px 14px; margin-bottom: 7px; } .cmc.plan #tab-combo-promotions .vo-build-warnings .notice:last-child { margin-bottom: 0; } .cmc.plan #tab-combo-promotions .vo-promotion-terms { background: var(--bg-gray); } .cmc.plan #tab-combo-promotions .vo-promotion-terms .row { border-top: 1px dashed var(--color-border); margin: 20px 0 0 0; padding-top: 18px; } .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item div { font-weight: 600; color: var(--text-darkest); } .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item div span { font-weight: 400; color: var(--text-default); } .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item .description { font-weight: 400; font-style: italic; color: var(--text-default); margin: -13px 0 13px 0; } .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item .permalink { margin: -13px 0 13px 0; } .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item .number, .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item .status, .cmc.plan #tab-combo-promotions .vo-promotion-terms .row .item .display { margin-bottom: 3px; } /* One column under the breakpoint the plan canvas already uses for its floated profile blocks. */ @media only screen and (max-width: 1210px) { .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid-container { grid-template-columns: 1fr; } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid1 { border-right: none; border-bottom: 1px solid var(--color-border); } .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid1, .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid2, .cmc.plan #tab-combo-promotions .vo-combo-promotion-editor .grid3 { grid-area: auto; } .cmc.plan #tab-combo-promotions .vo-custom-promo-terms li.vo-li-billing-period input { width: calc(100% - 255px); } } /* Confirm Promotion Change dialog. Sits outside the tab, so it is scoped by its own id. */ #dialog-change-combo-promotion .vo-action { margin-bottom: 15px; } #dialog-change-combo-promotion .vo-action .vo-title { font-size: 15px; color: var(--text-darkest); margin: 0 0 5px 0; } #dialog-change-combo-promotion .vo-action .vo-body ul { margin: 0; padding-left: 18px; } #dialog-change-combo-promotion .vo-action .vo-body li { font-size: 13px; line-height: 1.6; color: var(--text-default); } #dialog-change-combo-promotion .vo-change-summary:not(:empty) { background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 3px; padding: 13px 15px; margin-bottom: 15px; } #dialog-change-combo-promotion .vo-change-summary-line { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } #dialog-change-combo-promotion .vo-change-summary-line:last-child { margin-bottom: 0; } #dialog-change-combo-promotion .vo-change-summary-term { flex: 0 0 84px; font-style: italic; color: var(--text-default); } #dialog-change-combo-promotion .vo-change-summary-label { color: var(--text-default); } #dialog-change-combo-promotion .vo-change-summary-total { font-size: 17px; font-weight: 600; color: var(--color-primary); } #dialog-change-combo-promotion .button-footer { border-top: 1px solid var(--color-border); text-align: right; padding-top: 15px; } #dialog-change-combo-promotion .button-footer .btn { margin-left: 7px; } /* -- Combo Plan Builder ------------------------------------------------------------ */ /* The bundle grid crosses each bundled plan (row) with each billing term (column). A cell is either mapped to a plan term, offering one or more rates to map, or empty because the plan doesn't sell that term. */ .vo-combo-grid { width: 100%; } .vo-combo-grid td { vertical-align: top; } .vo-combo-grid .vo-option-cell .name { display: block; font-weight: 600; } .vo-combo-grid .vo-term-cell .price { display: block; font-weight: 600; } .vo-combo-grid .vo-term-cell .vo-term-name { display: block; color: var(--text-lightest); margin: 2px 0; } .vo-combo-grid .vo-term-cell a.edit { margin-right: 8px; } .vo-combo-grid .vo-unavailable { color: var(--text-lightest); } /* Mapped, but the term went disabled or admin-only on the plan after it was bundled — it still occupies the cell while doing nothing on the public picker, so it reads as inactive. */ .vo-combo-grid .vo-term-inactive .price, .vo-combo-grid .vo-term-inactive .vo-term-name { text-decoration: line-through; opacity: 0.45; } .vo-term-badge { display: inline-block; background: var(--text-lightest); border-radius: 3px; font-size: 11px; font-weight: 600; color: #fff; padding: 1px 6px; } .vo-term-badge--error { background: var(--color-red); } .vo-term-row, .vo-plan-row { display: flex; align-items: center; border-bottom: 1px solid var(--color-border); gap: 10px; padding: 8px 0; } .vo-term-row .name, .vo-plan-row .name { flex: 1 1 auto; font-weight: 600; } .vo-term-row .price { color: var(--text-lightest); } .vo-term-row .btn, .vo-plan-row .btn { flex: 0 0 auto; } /* Combo Plan Discounts */ .vo-scale-table { margin: 0 0 20px 0; } .vo-scale-table h3 { font-size: 14px; margin: 0 0 6px 0; } .vo-scale-table input[type="number"] { width: 100px; } .vo-scale-table .sub-text { display: inline-block; margin-left: 6px; } .vo-ignore-rule { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); gap: 8px; padding: 8px 0; } .vo-ignore-rule input[type="number"] { width: 70px; } .vo-ignore-rule select { min-width: 260px; max-width: 100%; } .vo-ignore-rule .sub-text { margin: 0; } .vo-discount-actions { display: flex; align-items: center; margin: 20px 0; gap: 12px; } /* Combo Bundle Display The name/subtitle/bullets a merged bundle shows in place of its leading plan's. */ .vo-unit-actions a.edit + a.edit { margin-left: 12px; } /* Combo Upsell - Per-Currency Rates One row per presentment currency under the settlement box. Only rendered when the tenant has extra currencies enabled, so single-currency grids keep their original spacing. */ .vo-unit-currency { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .vo-unit-currency .vo-term-name { flex: 0 0 34px; font-weight: 600; margin: 0; } .vo-unit-currency .vo-unit-currency-preset { flex: 1 1 auto; min-width: 0; } .vo-detail-point { display: flex; align-items: center; border-bottom: 1px solid var(--color-border); gap: 8px; padding: 6px 0; } .vo-detail-point .vo-detail-text { flex: 1 1 auto; min-width: 0; } .vo-display-detail { margin-bottom: 12px; } .vo-display-detail .sub-text { margin: 0; padding: 6px 0; } .vo-display-actions { margin: 20px 0 0 0; } .vo-preview-table { width: 100%; margin: 0 0 20px 0; } .vo-preview-table caption { text-align: left; font-weight: 600; text-transform: capitalize; padding: 6px 0; } .vo-preview-table .vo-preview-total { font-weight: 600; } .vo-preview-table .vo-preview-item { display: block; font-size: 12px; color: var(--text-lightest); } .vo-preview-table .vo-preview-item .vo-term-badge { margin-left: 6px; } /* Combo publish readiness. The block sits below the floated #profile / #account-info columns, so it clears them — jQuery .show() only rewrites display, leaving the inline clear:both in the template intact, and this backs it up. */ .vo-publish-state { clear: both; } .vo-publish-state .error-message ul, .vo-publish-state .note-message ul { list-style: disc; margin: 6px 0 0 18px; padding: 0; } .vo-publish-state .error-message li, .vo-publish-state .note-message li { margin: 2px 0; } .vo-combo-permalink .sub-text { margin-top: 6px; } /* A bundled plan disabled at the plan level — its terms can't be sold regardless of their own status, so the whole row reads as inactive. */ .vo-combo-grid tr.vo-plan-disabled .price, .vo-combo-grid tr.vo-plan-disabled .vo-term-name, .vo-combo-grid tr.vo-plan-disabled .vo-option-cell .name { opacity: 0.45; } .vo-combo-grid tr.vo-plan-disabled .vo-term-cell .price { text-decoration: line-through; } /* -- Plan Landing Page Tab --------------------------------------------------------- */ .cmc.plan #tab-landing { } .cmc.plan #tab-landing .permalink { background: #fff; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; margin-bottom: 25px; } .cmc.plan #tab-landing .permalink h4 { float: left; background: var(--bg-gray); border-right: 1px solid var(--color-border); padding: 15px 20px; } .cmc.plan #tab-landing .permalink a { float: left; padding: 15px 20px; } /* ================================================================================== */ /* == Analytics Pages =============================================================== */ /* ================================================================================== */ .analytics-header { } .analytics-header .vo-close-drill-down { float: left; width: 40px; height: 40px; background: #FFF url(../../img/icon-back-arrow.svg) no-repeat center; border: 1px solid var(--color-border); border-radius: 3px; text-indent: -9999px; margin: 0 18px 0 0; cursor: pointer; } .analytics-header { overflow: hidden; margin: 0 0 20px 0; } .analytics-header h1 { font-weight: normal; line-height: 40px; } .temporary-dashboard-message { background: var(--color-primary); border-radius: 4px; padding: 125px 40px 150px 40px; } .temporary-dashboard-message h2 { background: url(../../img/icon-finger.png) no-repeat center top; background-size: auto 62px; color: #fff; text-align: center; margin: 0 auto; padding-top: 85px; } /* Engagement Analytics - Group Activity Tab */ .engagement table.f_group_user_page_views td:nth-child(1) { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; } /* Subscription Analytics - Conversion Funnel Tab — theme/admin/VO4/ana/index.tpl */ .funnel-visual { position: relative; padding: 20px; border-bottom: 1px solid var(--color-border); background: linear-gradient(to bottom, #FFFFFF 0%, var(--bg-table-header) 100%); --funnel-arrow-width: 50px; --funnel-gap: 10px; --funnel-stat-pad-x: 10px; } .funnel-visual-chain { display: flex; align-items: center; flex-wrap: wrap; gap: var(--funnel-gap); } .funnel-visual-stat { flex: 1; min-width: 150px; background: var(--color-primary); border-radius: 4px; text-align: center; line-height: normal; text-shadow: 0 1px 3px rgba(42, 44, 92, 0.3); padding: 18px var(--funnel-stat-pad-x); } .funnel-visual-stat .number { display: block; font-size: 26px; color: #fff; } .funnel-visual-stat .label { font-size: 12px; color: #fff; margin: 6px 0 0 0; } .funnel-visual-arrow { flex: 0 0 var(--funnel-arrow-width); display: flex; align-items: center; justify-content: center; } .funnel-visual-arrow-ratio { font-size: 13px; font-weight: 600; color: var(--color-primary); padding-bottom: 12px; position: relative; } .funnel-visual-arrow-ratio:after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid var(--text-default); margin-left: -6px; position: absolute; left: 50%; bottom: 0px; opacity: 0.85; } .funnel-visual-outcomes { flex: 1 1 calc(var(--funnel-arrow-width) + var(--funnel-gap) + (2 * var(--funnel-stat-pad-x))); display: flex; flex-direction: column; gap: 8px; margin: -5px 0; } .funnel-visual-outcome { display: flex; align-items: center; gap: var(--funnel-gap); } .funnel-visual-outcomes .funnel-visual-outcome:not(:only-child) .funnel-visual-stat { padding: 13px var(--funnel-stat-pad-x); } .funnel-visual-outcomes .funnel-visual-outcome:not(:only-child) .number { font-size: 20px; font-weight: 600; margin: -6px 0 -4px; } .funnel-visual-chain .funnel-visual-outcome .funnel-visual-stat { background: var(--color-green); background: #7e95da; background: linear-gradient(to bottom, #7e95da 0%, #758ed7 100%); box-shadow: inset 0 0 20px rgb(from var(--color-primary) r g b / 0.1); } .funnel-visual-chain > .funnel-visual-stat:nth-child(1) { background: var(--color-darkest-blue); } .funnel-visual-chain > .funnel-visual-stat:nth-child(3) { background: var(--color-dark-blue); } /* Subscription Analytics - Conversion Reports Tab */ .period-nav-page-header { overflow: hidden; margin-bottom: 30px; } .period-nav-page-header button { float: left; width: 34px; height: 34px; background: #fff; border: 1px solid var(--color-border); border-radius: 3px; text-indent: -9999px; } .period-nav-page-header button:disabled { opacity: 0.5; } .period-nav-page-header .period-nav-label { float: left; font-weight: normal; font-size: 26px; color: var(--text-darkest); margin: 0 15px; } .period-nav-page-header .period-nav-prev { background-image: url(../../img/icon-arrow-left.svg); background-repeat: no-repeat; background-position: center; background-size: 24px; } .period-nav-page-header .period-nav-next { background-image: url(../../img/icon-arrow-right.svg); background-repeat: no-repeat; background-position: center; background-size: 24px; } .conversion-report .page-note:before { display: none; } .conversion-report .ai-suggestions { } .conversion-report .ai-suggestions .suggestion { margin-bottom: 15px; padding-left: 30px; position: relative; } .conversion-report .ai-suggestions .suggestion:last-child { margin: 0; } .conversion-report .ai-suggestions .suggestion:before { content: ""; width: 20px; height: 20px; border-radius: 50%; position: absolute; left: 0; top: 0; } .conversion-report .ai-suggestions .suggestion h3 { margin-bottom: 0.25em; } .conversion-report .ai-suggestions .suggestion p { } .conversion-report .ai-suggestions.ai-suggestions-insights .suggestion:before { background: rgba(35, 157, 239, 0.2) url(../../img/icon-lightbulb2.svg) no-repeat center; background-size: 13px; } .conversion-report .ai-suggestions.ai-suggestions-actions .suggestion:before { background: rgba(123, 196, 60, 0.2) url(../../img/icon-check-green.svg) no-repeat center; background-size: 13px; } /* Subscription Analytics - Rate Changes Tab */ .rate-change-status { display: inline-block; background: var(--text-lightest); border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; } .rate-change-status:empty { display: none; } .rate-change-status.rate-change-status--1 { background: var(--color-blue2); } /* Scheduled */ .rate-change-status.rate-change-status--2, .rate-change-status.rate-change-status--3 { background: var(--color-primary); } /* Queued, running */ .rate-change-status.rate-change-status--4 { background: var(--color-green); } /* Completed */ .rate-change-status.rate-change-status--6 { background: var(--color-red); } /* Failed */ .rate-change-status.rate-change-status--stalled { background: var(--color-yellow3); } .rate-change-status.rate-change-item-status--2 { background: var(--color-green); } /* Updated */ .rate-change-status.rate-change-item-status--4 { background: var(--color-red); } /* Failed */ .rate-change-status.rate-change-item-status--1 { background: var(--color-blue2); } /* Pending */ /* Progress Bar */ .rate-change-progress { width: 120px; height: 6px; background: var(--bg-gray); border-radius: 3px; overflow: hidden; margin-top: 6px; } .rate-change-progress span { display: block; width: 0; height: 100%; background: var(--color-primary); transition: width 0.4s; } .rate-change-progress.rate-change-progress--large { width: 100%; height: 10px; border-radius: 5px; margin: 0 0 20px 0; } /* Rate Change List */ .rate-change-list tbody tr { cursor: pointer; } .rate-change-list .summary { display: block; color: var(--text-default); font-size: 12px; } .rate-change-intro { color: var(--text-default); padding: 15px; margin: 0; } /* Detail Counts */ .rate-change-counts { display: flex; gap: 40px; margin-bottom: 20px; } .rate-change-counts li { color: var(--text-default); font-size: 13px; } .rate-change-counts .rate-change-count { display: block; color: var(--text-darkest); font-size: 24px; font-weight: 600; } /* Detail Facts */ .rate-change-facts { display: grid; grid-template-columns: 140px 1fr; gap: 6px 20px; } .rate-change-facts dt { color: var(--text-default); } .rate-change-facts dd:empty:before { content: "—"; color: var(--text-lightest); } /* Subscriber Rows */ .rate-change-items .email { display: block; color: var(--text-default); } .rate-change-items .summary { display: block; color: var(--text-default); font-size: 12px; margin-top: 3px; } .rate-change-flag { display: inline-block; background: var(--color-yellow3); border-radius: 3px; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; margin-left: 6px; } /* Dry Run Summary */ .rate-change-preview { width: 100%; border-collapse: collapse; margin: 10px 0 15px 0; } /* Also the term dialog's dry run. */ .rate-change-preview th { color: var(--text-table-header); font-size: 12px; text-align: left; text-transform: uppercase; padding: 6px 10px 6px 0; } .rate-change-preview td { border-top: 1px solid var(--table-border); padding: 7px 10px 7px 0; } .rate-change-preview tfoot td { border-top: 2px solid var(--color-border-strong); font-weight: 600; } .rate-change-preview-notes { background: var(--notice-warning-bg); border: 1px solid var(--notice-warning-border); border-radius: 4px; list-style: disc; color: var(--notice-warning-text); padding: 12px 15px 12px 32px; margin-bottom: 15px; } .rate-change-preview-notes li + li { margin-top: 6px; } /* ================================================================================== */ /* == Pigeon AI ===================================================================== */ /* ================================================================================== */ /* Pigeon AI Add-on Prompt */ #ai_settings .pigeon-ai-upsell { container-type: inline-size; container-name: pigeon-ai-upsell; max-width: 1080px; background: linear-gradient(135deg, #FFFFFF 0%, #F7F9FF 68%, #F0F7FF 100%); overflow: hidden; box-shadow: 0 12px 32px rgb(from var(--color-darkest-blue) r g b / 0.04); margin: 0 auto 40px auto; } #ai_settings .pigeon-ai-upsell:before, #ai_settings .pigeon-ai-upsell:after { display: none; } #ai_settings .pigeon-ai-upsell__intro { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 26px; padding: 40px 40px 36px 40px; } #ai_settings .pigeon-ai-upsell__icon { width: 68px; height: 68px; background-color: var(--color-dark-blue); background-image: url(../../img/nav-ai.svg), linear-gradient(145deg, var(--color-primary) 0%, var(--color-darkest-blue) 100%); background-repeat: no-repeat; background-position: center; background-size: 30px, 100%; border-radius: 10px; box-shadow: 0 10px 24px rgba(72,92,153,0.28); } #ai_settings .pigeon-ai-upsell__copy h2 { float: left; max-width: 760px; color: var(--text-darkest); font-size: 30px; line-height: 1.1; font-weight: 600; margin: -2px 12px 12px 0; } #ai_settings .pigeon-ai-upsell__pill { float:left; background: rgb(88 116 200 / 22%); border-radius: 50px; color: var(--color-dark-blue); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 6px 0 0 0; padding: 3px 10px; } #ai_settings .pigeon-ai-upsell__lead { clear: both; max-width: 760px; color: var(--text-darkest); font-size: 16px; line-height: 1.5; } #ai_settings .pigeon-ai-upsell__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 40px 40px 40px; } #ai_settings .pigeon-ai-upsell__benefits li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; min-width: 0; background: rgba(255,255,255,0.82); border: 1px solid var(--color-border); border-radius: 6px; gap: 11px; padding: 17px 18px; } #ai_settings .pigeon-ai-upsell__check { width: 24px; height: 24px; background: #EAF7EC url(../../img/icon-check-green.svg) no-repeat center; background-size: 16px; border-radius: 50%; } #ai_settings .pigeon-ai-upsell__benefits h3 { color: var(--text-darkest); font-size: 15px; line-height: 1.3; margin: 1px 0 4px 0; } #ai_settings .pigeon-ai-upsell__benefits p { font-size: 13px; line-height: 1.45; } #ai_settings .pigeon-ai-upsell__footer { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.92); border-top: 1px solid var(--color-border); gap: 30px; padding: 25px 40px; } #ai_settings .pigeon-ai-upsell__status { display: flex; flex: 1 1 auto; align-items: center; max-width: 540px; gap: 13px; } #ai_settings .pigeon-ai-upsell__status p { line-height: 1.45; } #ai_settings .pigeon-ai-upsell__inactive { flex: 0 0 30px; width: 30px; height: 30px; background: #ffdcda url(../../img/icon-close-red.svg) no-repeat center; background-size: 18px; border-radius: 50%; } #ai_settings .pigeon-ai-upsell__footer strong { display: block; color: var(--text-darkest); font-size: 15px; font-weight: 600; margin-bottom: 2px; } #ai_settings .pigeon-ai-upsell__actions { display: flex; flex: 0 0 auto; gap: 10px; } #ai_settings .pigeon-ai-upsell__primary { background: var(--color-dark-blue); border-color: var(--color-dark-blue); color: #FFFFFF; } #ai_settings .pigeon-ai-upsell__primary:hover, #ai_settings .pigeon-ai-upsell__primary:focus { background: var(--color-darkest-blue); border-color: var(--color-darkest-blue); color: #FFFFFF; } #ai_settings .pigeon-ai-upsell__actions .btn:focus-visible { outline: 3px solid var(--color-dark-blue); outline-offset: 3px; } @container pigeon-ai-upsell (max-width: 700px) { #ai_settings .pigeon-ai-upsell__intro { grid-template-columns: 58px minmax(0, 1fr); gap: 20px; padding: 34px 34px 26px 34px; } #ai_settings .pigeon-ai-upsell__icon { width: 58px; height: 58px; background-size: 25px, 100%; border-radius: 14px; } #ai_settings .pigeon-ai-upsell__copy h2 { font-size: 30px; } #ai_settings .pigeon-ai-upsell__benefits { grid-template-columns: 1fr; padding: 0 34px 32px 34px; } #ai_settings .pigeon-ai-upsell__footer { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 34px; } #ai_settings .pigeon-ai-upsell__status { max-width: none; } } @container pigeon-ai-upsell (max-width: 470px) { #ai_settings .pigeon-ai-upsell__intro { grid-template-columns: 1fr; padding: 28px 26px 24px 26px; } #ai_settings .pigeon-ai-upsell__icon { width: 52px; height: 52px; } #ai_settings .pigeon-ai-upsell__copy h2 { font-size: 28px; } #ai_settings .pigeon-ai-upsell__lead { font-size: 16px; } #ai_settings .pigeon-ai-upsell__benefits { padding: 0 26px 28px 26px; } #ai_settings .pigeon-ai-upsell__footer { padding: 22px 26px 26px 26px; } #ai_settings .pigeon-ai-upsell__actions { flex-direction: column; width: 100%; } #ai_settings .pigeon-ai-upsell__actions .btn { width: 100%; } } /* ================================================================================== */ /* == FAQ Page ====================================================================== */ /* ================================================================================== */ .faq-list { } .faq-list > li { border-bottom: 1px solid var(--color-border); padding: 20px; } .faq-list > li .faq-q { display: block; background: url(../../img/icon-arrow-down.svg) no-repeat center right; font-weight: 600; color: var(--text-darkest); font-size: 16px; padding-right: 30px; position: relative; cursor: pointer; } .faq-list > li .faq-a { display: none; } .faq-list > li h2 { font-size: 16px; margin: 15px 0 -10px 0; } .faq-list > li h3 { font-size: 14.5px; margin: 15px 0 -10px 0; } .faq-list > li p { margin: 15px 0 0 0; } .faq-list > li strong { font-weight: 600; color: var(--text-darkest); } .faq-list > li ul { list-style: disc; padding-left: 18px; margin-top: 10px; } .faq-list > li ul > li { list-style: disc; margin-top: 5px; } .faq-list > li ol { list-style: disc; padding-left: 18px; margin-top: 10px; } .faq-list > li ol > li { list-style: decimal; margin-top: 5px; } .faq-list > li h3 + ul, .faq-list > li h3 + ol { margin-top: 15px; } .faq-list > li img { display: block; max-width: 600px; margin: 15px 0 0 0; } .faq-list > li img + p, .faq-list > li img + h2, .faq-list > li img + h3 { margin-top: 30px; } /* This is so hot-linking directly to an FAQ question */ /* will have a little breathing room at the top of the page. */ .faq-list > li *[id]:before { content: " "; display: block; height: 20px; margin-top: -20px; visibility: hidden; } /* ================================================================================== */ /* == Changelog ===================================================================== */ /* ================================================================================== */ .changelog-container {} .changelog-list { max-width: 600px; margin: 0 auto; position: relative; } .changelog-list:before { content: ""; width: 1px; height: calc(100% - 30px); background: var(--checkbox-border); position: absolute; top: 20px; left: 58px; } .changelog-block { overflow: hidden; margin-bottom: 30px; padding: 10px; } .changelog-block .date { float: left; width: 60px; background: var(--bg-body); text-align: right; line-height: normal; padding: 5px 10px 5px 0; margin: 8px 10px 0 0; position: relative; } .changelog-block .date span { display: block; font-weight: bold; color: var(--text-darkest); } .changelog-block .box { float: right; width: calc(100% - 70px); background: #fff; border-radius: 4px; box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; padding: 10px 20px; } .changelog-block .version { display: inline-block; height: 24px; background: var(--text-darkest); border-radius: 3px; color: #fff; font-weight: 600; line-height: 23px; padding: 0 6px; margin-bottom: 5px; } .changelog-block .version:before { content: "v"; margin-right: 1px; } .changelog-block img { display: block; width: 100%; aspect-ratio: 480 / 230; background: var(--color-border); border-radius: 3px; box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; margin: 10px 0 20px 0; } .changelog-block .item { margin: 10px 0; padding-left: 22px; position: relative; } .changelog-block .item:before { content: "→"; position: absolute; top: -1px; left: 2px; } .changelog-block .badge-bug, .changelog-block .badge-new, .changelog-block .badge-speed, .changelog-block .badge-enhance, .changelog-block .badge-security { padding-left: 0; } .changelog-block .badge-bug:before, .changelog-block .badge-new:before, .changelog-block .badge-speed:before, .changelog-block .badge-enhance:before, .changelog-block .badge-security:before { display: inline-block; background: var(--text-lightest); border-radius: 3px; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 6px; margin-right: 7px; position: relative; top: auto; left: auto; } .changelog-block .badge-announce { padding-left: 0; } .changelog-block .badge-announce:before { content: "Announcement"; display: inline-block; background: var(--color-purple, #7b5cd6); border-radius: 3px; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 6px; margin-bottom: 8px; position: relative; top: auto; left: auto; } .changelog-block .badge-announce p { margin: 0 0 10px 0; } .changelog-block .badge-announce p:last-child { margin-bottom: 0; } .changelog-block .badge-announce .announce-heading { font-size: 15px; font-weight: 700; color: var(--text-darkest); margin: 16px 0 6px 0; } .changelog-block .badge-announce .announce-heading:first-child { margin-top: 0; } .changelog-block .badge-announce strong { font-weight: 700; } .changelog-block .badge-bug:before { content: "Bug Fix"; background: var(--color-red); } .changelog-block .badge-new:before { content: "New Feature"; background: var(--color-green); } .changelog-block .badge-speed:before { content: "Speed Improvement"; background: var(--color-yellow3); } .changelog-block .badge-enhance:before { content: "Enhancement"; background: var(--color-blue2); } .changelog-block .badge-security:before { content: "Security"; background: var(--text-darkest); } .changelog-container .before-2024 { max-width: 600px; height: 1px; background: var(--checkbox-border); text-align: center; margin: 40px auto; position: relative; } .changelog-container .before-2024:after { content: "November 1, 2024"; background: var(--bg-body); font-weight: 600; color: var(--text-darkest); padding: 5px 10px; margin-left: -58px; position: absolute; top: -14px; left: 50%; } .changelog-container .previous-commit-count { text-align: center; padding-bottom: 40px; } /* Changelog version badge in the sidebar footer (see header.tpl) — the footer is a fixed-height sticky box, so it only grows when the badge is present */ .site-nav-footer.has-version { height: 112px; top: calc(100vh - 112px); } .site-nav-footer .changelog-version { display: block; text-align: center; font-size: 11px; line-height: 15px; color: rgba(255,255,255,0.45); text-decoration: none; padding: 4px 0 3px 0; } .site-nav-footer .changelog-version:hover { color: rgba(255,255,255,0.75); } .changelog-version-dot { display: none; } .has-new .changelog-version-dot { display: inline-block; width: 6px; height: 6px; background: var(--color-red); border-radius: 50%; margin-left: 5px; vertical-align: 1px; } /* hide the changelog version number until changelog is ready for the public */ .site-nav-footer .changelog-version { display: none !important; } /* ================================================================================== */ /* == Login Page ==================================================================== */ /* ================================================================================== */ BODY#login { height: 100%; min-width: 0; background: #2b408d; background: linear-gradient(135deg, #2b408d 0%,#0289cb 100%); transform-style: preserve-3d; } BODY#login #login-container { max-width: 430px; margin: 0 auto; position: relative; top: 47%; transform: translateY(-50%); } BODY#login #login-box--logo { height: 136px; background: url(../../img/logo-white-text-embossed.png) no-repeat top; background-size: 232px; text-indent: -9999px; } BODY#login #login-box { background: #fff; box-shadow: 0px 7px 20px rgba(0,0,0,0.1), 0px 4px 8px rgba(0,0,0,0.05), 0px 10px 30px rgba(0,0,0,0.1); border-radius: 9px; overflow: hidden; } BODY#login #login-box form { padding: 45px; } BODY#login #login-box form input { width: 100%; height: 55px; font-size: 18px; padding: 0 20px; } BODY#login #login-box form li { margin-bottom: 15px; } BODY#login #login-box form li:last-child { margin: 0; } BODY#login #login-box form input#submit { background: #487AB5; box-shadow: inset 0px 1px 0px #85a7cf, 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0 -10px 20px rgba(0, 0, 0, 0.1), inset 0px 10px 20px rgba(255, 255, 255, 0.1); border: 1px solid #32557e; border-top-color: #396191; border-bottom-color: #2b496c; } BODY#login #login-box form input#submit:hover { background: #3e699b; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #6c95c4, inset 0 -10px 20px rgba(0, 0, 0, 0.1), inset 0px 10px 20px rgba(255, 255, 255, 0.1); border-color: #284464; border-top-color: #2f5077; border-bottom-color: #213852; } BODY#login #login-box form input#submit:active { background: #365c88; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #6c95c4, inset 0 -10px 20px rgba(0, 0, 0, 0.1), inset 0px 10px 20px rgba(255, 255, 255, 0.1); border-color: #284464; border-top-color: #2f5077; border-bottom-color: #213852; } .sso-login { padding-top: 45px; position: relative; } .sso-login:before { content: ""; width: 100%; height: 1px; background: var(--color-border); position: absolute; top: 23px; } .sso-login:after { content: "OR"; width: 40px; background: #fff; font-size: 13px; text-align: center; font-style: italic; color: var(--text-lightest); margin-left: -20px; z-index: 1; position: absolute; top: 14px; left: 50%; } .sso-login #sso-login-button { display: block; width: 100%; height: 55px; background: #ecb223; border-color: #ecb223; color: #fff; font-size: 18px; line-height: 53px; text-shadow: 0 1px 3px var(--color-yellow3); padding: 0 20px; } .sso-login #sso-login-button { background: #ecb223; box-shadow: inset 0px 1px 0px #f3ce73, 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0 -10px 20px rgba(0, 0, 0, 0.1), inset 0px 10px 20px rgba(255, 255, 255, 0.1); border: 1px solid #b3840f; border-top-color: #cb9511; border-bottom-color: #9c730d; } .sso-login #sso-login-button:hover { background: #d99f13; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #f0c253, inset 0 -10px 20px rgba(0, 0, 0, 0.1), inset 0px 10px 20px rgba(255, 255, 255, 0.1); border-color: #936b0d; border-top-color: #aa7d0f; border-bottom-color: #7b5a0b; } .sso-login #sso-login-button:active { background: #c18d11; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #f0c253, inset 0 -10px 20px rgba(0, 0, 0, 0.1), inset 0px 10px 20px rgba(255, 255, 255, 0.1); border-color: #936b0d; border-top-color: #aa7d0f; border-bottom-color: #7b5a0b; } /* Device sign-in button injected by vo-passkey.js — .vo-passkey-mount is the explicit mount point it looks for (see findContainer() in theme/lib/js/vo-passkey.js). Empty until a device with WebAuthn support is detected, so the "OR" divider stays hidden rather than appearing over an empty gap on devices that can't offer it. The button itself carries .btn.btn-primary (see render() in that file), so it already matches the Login button above without any CSS here. */ .vo-passkey-mount:empty { display: none; } .vo-passkey-mount { padding-top: 45px; position: relative; } .vo-passkey-mount:before { content: ""; width: 100%; height: 1px; background: var(--color-border); position: absolute; top: 23px; } .vo-passkey-mount:after { content: "OR"; width: 40px; background: #fff; font-size: 13px; text-align: center; font-style: italic; color: var(--text-lightest); margin-left: -20px; z-index: 1; position: absolute; top: 14px; left: 50%; } .vo-passkey-mount .vo-passkey-button { display: block; width: 100%; height: 55px; line-height: 53px; font-size: 18px; } BODY#login #login-box #login-box--header { display: none; background: var(--bg-gray); border-bottom: 1px solid var(--color-border); text-align: center; padding: 25px; } BODY#login #login-box #login-box--header h2 { font-size: 26px; font-weight: normal; margin: 0; } BODY#login #login-box--footer { text-align: center; /* border-top: 1px solid var(--color-border); */ color: rgba(255,255,255,0.5); /* background: var(--bg-gray); */ padding: 25px 0 0 0; } BODY#login #login-box--footer ul { font-size: 11px; } BODY#login #login-box--footer ul a { color: rgba(255,255,255,0.55); } BODY#login #login-box--footer ul li { display: inline; } BODY#login #login-box--footer ul li#forgot-my-password { border-left: 1px solid rgba(255,255,255,0.5); padding-left: 8px; margin-left: 7px; cursor: pointer; } BODY#login #login-box--footer p#forgot-my-password { } BODY#login #login-box #app-message { display: none; background: var(--color-yellow2); text-align: center; font-size: 16px; color: var(--text-darkest); font-weight: 600; padding: 34px 0; } BODY#login #dialog-forgot-password { } BODY#login #dialog-forgot-password .message { background: var(--color-yellow2); text-align: center; color: var(--text-darkest); font-weight: 600; padding: 20px; margin: -20px -20px 20px -20px; } BODY#login #dialog-forgot-password .message:empty { display: none; } BODY#login #dialog-forgot-password label { display: block; margin-bottom: 1em; } BODY#login #dialog-forgot-password input { width: 100%; } /* ================================================================================== */ /* == Dialogs ======================================================================= */ /* ================================================================================== */ /* Media Manager */ #dialog-media-manager { height: auto !important; padding: 0; } #dialog-media-manager .drop-files-prompt { margin-bottom: -40px; } /* Media Manager - image edit */ #dialog-media-manager .vo-item-editor-template { padding: 20px; } #dialog-media-manager .vo-item-editor-template img { width: 100%; background: var(--text-darkest); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); margin-right: 20px; } #dialog-media-manager .vo-item-editor-template .no-image { width: 133px; height: 100px; background: var(--bg-body); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); line-height: 89px; text-align: center; } #dialog-media-manager .vo-item-editor-template .edit-image { width: 100%; margin-top: 10px; } #dialog-media-manager .vo-item-editor-template .right { float: right; width: calc(100% - 160px); margin-bottom: 20px; } #dialog-media-manager .vo-item-editor-template .form-list label { width: 100px; } #dialog-media-manager .vo-item-editor-template .form-list > li input, #dialog-media-manager .vo-item-editor-template .form-list > li textarea { width: calc(100% - 100px); } #dialog-media-manager .vo-item-editor-template .left { float: left; width: 133px; } /* Refund Transaction */ #dialog-refund-transaction { } #dialog-refund-transaction .checkbox { float: left; margin: 2px 10px 0 0; } #dialog-refund-transaction h3 { margin-bottom: 1em; } #dialog-refund-transaction .processing { float: right; background: url(../../img/loader2.gif) no-repeat right; background-size: 24px; line-height: 40px; margin-right: 5px; padding-right: 30px; } #dialog-refund-transaction .email { float: right; line-height: 40px; margin-right: 7px; } #dialog-refund-transaction .email .checkbox { float: left; margin: 12px 10px 0 0; } #dialog-refund-transaction .vo-order-splits { clear: both; padding-top: 5px; } #dialog-refund-transaction .split-payment-notice { color: var(--text-default); line-height: 1.5; margin-bottom: 15px; } /* Bulk Order Payment Dialog */ #dialog-payment-bulk-order .dialog-intro { color: var(--text-default); line-height: 1.5; margin-bottom: 15px; } #dialog-payment-bulk-order .dialog-intro strong { color: var(--text-darkest); font-weight: 600; } /* Payment-method form panels open as the card body, between the toolbar and the order list */ #dialog-payment-bulk-order .slider { background: var(--bg-gray); background: linear-gradient(to bottom, var(--bg-table-header) 0%, #FFFFFF 100%); border: none; overflow: hidden; } #dialog-payment-bulk-order .add-offline-transaction.slider table thead, #dialog-payment-bulk-order .add-offline-transaction.slider table tr { background: none; border: none; } #dialog-payment-bulk-order .add-offline-transaction.slider table td { padding: 5px; } #dialog-payment-bulk-order .add-offline-transaction.slider table td:first-child { padding-left: 0; } #dialog-payment-bulk-order .add-offline-transaction.slider table td:last-child { padding-right: 0; } #dialog-payment-bulk-order .add-offline-transaction.slider table input { height: 40px; width: 100%; background: #fff; border: 1px solid var(--color-border); border-radius: 3px; color: var(--text-darkest); font-weight: 600; padding: 0 13px; } #dialog-payment-bulk-order .payment-details-default { background: #fff; overflow: hidden; border: 1px solid var(--color-border); border-radius: 5px; padding: 20px; margin-bottom: 20px; } #dialog-payment-bulk-order .payment-details-default .credit-card-mockup, #dialog-payment-bulk-order .payment-details-default .paypal-mockup { float: left; } #dialog-payment-bulk-order .payment-details-default .message { float: left; width: calc(100% - 220px); padding: 23px 0 0 20px; margin: 0; } #dialog-payment-bulk-order .payment-details-default .message .edit { display: block; margin-top: 7px; } /* Bulk calculations summary — welded as the footer of the order-splits card (bulk payment + refund dialogs) */ .vo-bulk-calculations { display: flex; background: var(--bg-gray); border-top: 1px solid var(--color-border); } .vo-bulk-calculations > div { flex: 1 1 0; border-right: 1px solid var(--color-border); font-size: 12px; font-weight: 600; color: var(--text-default); padding: 10px 15px; } .vo-bulk-calculations > div:last-child { border-right: none; } .vo-bulk-calculations > div > span.amount { display: block; min-height: 19px; font-size: 16px; color: var(--text-darkest); margin-top: 2px; } .vo-bulk-calculations .vo-total-not-applied.is-remaining > span.amount { color: var(--color-red2); } /* Order splits list (bulk payment + refund dialogs) */ .order-splits { border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; } .order-splits .toolbar { display: flex; align-items: center; justify-content: space-between; } .order-splits .toolbar:after { display: none; } /* clearfix pseudo-element would become a stray flex item */ .order-splits .toolbar-actions { display: flex; align-items: center; gap: 10px; } /* payment actions, left */ .order-splits .toolbar-options { display: flex; align-items: center; gap: 15px; margin-left: auto; } /* list controls, right — auto-apply lands over the Apply column */ .order-splits .toolbar .toolbar-btn { float: none; margin: 0; } .order-splits .toolbar .statement-btn { width: 34px; background-image: url(../../img/icon-document-white.svg); background-repeat: no-repeat; background-position: center; background-size: 15px; overflow: hidden; text-indent: -9999px; padding: 0; } .order-splits .toolbar .auto-apply { display: flex; align-items: center; color: #fff; font-weight: 600; margin-left: 5px; } .order-splits .toolbar .auto-apply .tooltip { background: var(--color-darkest-blue); margin: 0 10px 0 5px; } .order-splits table.vo-orders { width: 100%; } .order-splits table.vo-orders col.added { width: 170px; } .order-splits table.vo-orders col.total { width: 130px; } .order-splits table.vo-orders col.apply { width: 150px; } .order-splits table.vo-orders th { white-space: nowrap; } .order-splits table.vo-orders th:nth-child(3), .order-splits table.vo-orders td.total2, .order-splits table.vo-orders th:nth-child(4), .order-splits table.vo-orders td.due { text-align: right; } .order-splits table.vo-orders td .summary { display: block; font-size: 12px; color: var(--text-lightest); } .order-splits table.vo-orders td .order.id { font-weight: 600; color: var(--text-darkest); } .order-splits table.vo-orders td.due input.vo-due { width: 120px; text-align: right; } .order-splits table.vo-orders td.due input.vo-due:disabled { background-color: transparent; border-color: var(--table-border); color: var(--text-default); cursor: default; } .order-splits table.vo-orders tbody tr:last-child { border-bottom: none; } .order-splits table.vo-orders tr.has-applied-value td { background: rgba(54,175,71,0.05); } .order-splits table.vo-orders tr.has-applied-value td.due input.vo-due { background: #fff; color: var(--color-green); font-weight: 600; } .order-splits .cnd-waiting-for-results { height: 120px; } .order-splits .cnd-no-results { text-align: center; color: var(--text-lightest); padding: 30px 15px; } /* Gallery Management - Global */ .vo-files { height: auto !important; padding: 20px; } .vo-files ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); list-style: none; /* display: flex; flex-wrap: wrap; */ grid-gap: 20px; } .vo-files ul li { padding: 0; /* width: 140px; */ position: relative; /* margin: 10px; */ } .vo-files ul li .image { width: 100%; background: var(--bg-gray); border: 5px solid #fff; box-shadow: 0 0 0 1px var(--color-border); border-radius: 3px; padding-top: calc(100% - 10px); position: relative; } .vo-files ul li .image.pdf { background: url(../../img/icon-document.svg) no-repeat center; background-size: 50px; background-color: var(--color-border); } .vo-files ul li .image.pdf:after { content: "PDF"; background: var(--color-red2); border-radius: 3px; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 6px; position: absolute; top: 50%; left: calc(50% - 30px); } .vo-files ul li .image.txt { background: url(../../img/icon-document.svg) no-repeat center; background-size: 50px; background-color: var(--color-border); } .vo-files ul li .image.txt:after { content: "TXT"; background: var(--color-blue2); border-radius: 3px; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 6px; position: absolute; top: 50%; left: calc(50% - 30px); } .vo-files ul li .image.csv { background: url(../../img/icon-document.svg) no-repeat center; background-size: 50px; background-color: var(--color-border); } .vo-files ul li .image.csv:after { content: "CSV"; background: var(--color-green2); border-radius: 3px; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 6px; position: absolute; top: 50%; left: calc(50% - 30px); } .vo-files ul li .image.mp3 { background: url(../../img/icon-document.svg) no-repeat center; background-size: 50px; background-color: var(--color-border); } .vo-files ul li .image.mp3:after { content: "MP3"; background: var(--color-green2); border-radius: 3px; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 6px; position: absolute; top: 50%; left: calc(50% - 30px); } .vo-files ul li .name { display: block; width: 140px; word-break: break-word; margin-top: 10px; } .vo-files ul li.ui-selected { } .vo-files ul li.ui-selecting { } .vo-files ul .progress-bar { width: 80%; height: 6px; background: var(--color-border); overflow: hidden; border-radius: 20px; position: absolute; top: calc(50% - 18px); left: 10%; } .vo-files ul .progress-bar .ui-progressbar-value { background: var(--color-blue2); background: linear-gradient(90deg, var(--color-blue2) 0%, var(--color-green2) 100%); margin: 0; } .vo-files ul li .video:after, .vo-files ul li .mp4:after { content: ""; width: 60px; height: 60px; background: url(../../img/icon-video-play.svg) no-repeat center; background-size: 100%; margin: -30px 0 0 -30px; position: absolute; top: 50%; left: 50%; opacity: 0.9; } .vo-files ul .default-image .image { box-shadow: 0 0 0 3px var(--color-green2); } .vo-files ul .default-image:after { content: "Featured"; width: 100%; background: var(--color-green2); color: #fff; font-weight: 600; font-size: 11px; padding: 2px 5px 4px 10px; position: absolute; top: 0; left: 0; } .vo-files ul .image-controls { display: none; width: calc(100% + 10px); height: calc(100% + 10px); backdrop-filter: blur(2px); background: rgba(246,249,255,0.3); background: rgba(0,0,0,0.4); border: 5px solid #fff; text-align: center; padding: 8px; position: absolute; bottom: -5px; left: -5px; } .vo-files ul li .image:hover .image-controls { display: block; z-index: 9; } .vo-files ul .image-controls button { width: 100%; background: var(--color-primary); border: none; border-radius: 3px; box-shadow: 0 0 10px rgba(246,249,255,0.2), 0 0 20px rgba(246,249,255,0.2); box-shadow: 0 0 4px rgba(0,0,0,0.3), 0 0 12px rgba(0,0,0,0.3), 0 0 25px rgba(0,0,0,0.3); color: #fff; font-size: 11px; /* text-transform: uppercase; */ font-weight: 600; padding: 7px; margin: 0 0 6px 0; cursor: pointer; } .vo-files ul .image-controls .edit:after { content: "Edit"; } .vo-files ul .image-controls .delete { background: var(--color-red); margin: 0; position: sticky; top: 100%; } .vo-files ul .image-controls .delete:after { content: "Delete"; } .vo-files ul .image-controls .set-default:after { content: "Make Featured Image"; } .vo-files ul .image-controls .set-default.ui-state-active { background-color: var(--color-green2); } .vo-files ul .default-image .image-controls .set-default:after { content: "Featured Image"; } .vo-files ul .image-controls .smugmug:after { content: "Add to SmugMug"; } .vo-files ul .image-controls .add:after { content: "Add to Editor"; } .vo-files ul .loading .image { display: block; /* background: var(--bg-gray) url(../../img/loader.gif) no-repeat center; background-size: 34px; */ width: 100%; } .vo-files ul .loading .image img { display: none; } .vo-files ul .loading .image-controls { display: none !important; } .vo-files ul .loading .cdn-message { background: var(--color-yellow); font-size: 12px; color: var(--text-darkest); padding: 3px 0 2px 0; } .vo-files ul .loading .loading-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Drag and Drop files prompter */ .drop-files-prompt { height: 290px; background: url(../../img/icon-upload.svg) no-repeat center 74px; background-size: 70px; border: 2px dashed var(--checkbox-border); border-radius: 10px; text-align: center; font-size: 16px; padding-top: 154px; pointer-events: none; } .drop-files-prompt span { display: block; font-size: 26px; color: var(--color-green2); font-weight: bold; } /* Highlighting dropzone when dragging a file into it */ .drag-file-dropzone .drop-files-prompt { border-color: var(--color-green2) !important; border-style: solid !important; box-shadow: inset 0px 0px 0px 2px var(--color-green2); } /* Dropzone Highlighting customizations for the Gallery Edit page */ .gallery.drag-file-dropzone .vo-files { box-shadow: inset 0px 0px 0px 3px var(--color-green2); } .gallery .no-results { background: #fff; margin: -20px; padding: 20px; } /* Dropzone Highlighting for the Media Manager dialog box */ #dialog-media-manager.drag-file-dropzone:after { content: ""; width: 100%; height: calc(100% - 60px); border: 4px solid var(--color-green2); position: absolute; bottom: 0; left: 0; pointer-events:none; } /* ================================================================================== */ /* == Charts ======================================================================== */ /* ================================================================================== */ .nvd3-svg { fill: var(--text-default); } /* Text color */ .nvd3 text { fill: var(--text-default); } .nvd3 .nv-axis line { stroke: var(--color-border) !important; opacity: 0.55; } /* Horizontal lines */ .nv-y .tick.zero line { stroke: var(--color-border) !important; opacity: 1 !important; } /* Bottom horizontal border */ .nv-y .nv-axis g path.domain { display: none; stroke: var(--color-border) !important; opacity: 1 !important; } /* Right vertical border */ .nv-y .nv-axis g text { transform: translateX(-7px); } .nv-y .nv-axis .nv-axisMaxMin text { font-weight: normal !important; } .nv-y .nv-axis .nv-axisMaxMin:last-child { /* display: none; */ } .nvd3 text { font-family: 'vo-font', Helvetica Neue, Arial, sans-serif !important; /* font-weight: normal !important; */ } .nvd3 .title { font-family: 'vo-font', Helvetica Neue, Arial, sans-serif !important; } .nvtooltip { font-family: 'vo-font', Helvetica Neue, Arial, sans-serif !important; } /* Transaction revenue chart */ .transaction-revenue { height: 356px; position: relative; } .transaction-revenue > svg { position: absolute; top: 22px; left: -5px; transform: scaleX(0.98); } /* Engagement chart */ .engagement.chart { height: 360px; position: relative; } .engagement.chart > svg { position: absolute; top: 25px; left: -4px; transform: scaleX(0.99); } /* Engagement Combo */ .engagement-combo { } .engagement-combo .engagement-combo-container { display: flex; gap: 40px; } .engagement-combo .engagement-combo-container > div { flex: 1; } .engagement-combo .card { } .engagement-combo .card .number { padding-top: 20px; } /* This is a hacky way to make the card the same height as the circle stats */ .engagement-combo .card .change { margin-top: 46px; } /* ================================================================================== */ /* == Help Page ===================================================================== */ /* ================================================================================== */ .ad-faq { display: block; background-color: #21D4FD; background-image: linear-gradient(18deg, var(--color-blue2) 0%, var(--color-red) 100%); border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.15); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); font-size: 26px; font-style: italic; font-weight: 600; padding: 40px 210px 40px 40px; margin-bottom: 40px; position: relative; cursor: pointer; } .ad-faq:after { content: ""; width: 200px; height: 160px; background: url(../../img/pigeon-bird.png) no-repeat top left; background-size: 100% auto; position: absolute; bottom: 0; right: 0; transition: all 0.35s; } .ad-faq:hover { background-image: linear-gradient(8deg, var(--color-blue2) -10%, var(--color-red) 100%); color: #fff; } .ad-faq:hover:after { height: 180px; } /* ================================================================================== */ /* == Landing Page Builder ========================================================== */ /* ================================================================================== */ /* The '.theme-builder' class is the general class used to style all the builder-type components. */ /* The class is used on both the 'Theme Styles' and 'Landing Page Builder' pages. */ .theme-builder .block .block-body { position: relative; } .theme-builder .form-list li { position: relative; } .theme-builder .form-list li input.active { border-color: var(--color-blue2); } .theme-builder .color-preview { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 2px; cursor: pointer; transition: all .2s ease-in-out; box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.05), 0 8px 14px rgba(0,0,0,0.05), 0 10px 26px rgba(0,0,0,0.05), 0 10px 36px rgba(0,0,0,0.05); clip-path: inset(-10px -10px -10px -100px); } .theme-builder .color-preview:hover { transform: scale(1.1); } .theme-builder .color-preview.invalid { background: url(../../img/icon-alert.svg) no-repeat center !important; background-size: 100% auto !important; border: none; box-shadow: none; } .theme-builder .form-list li.open-color-input {} .theme-builder .form-list li.open-color-input input, .theme-builder .form-list li.open-color-input textarea { border-radius: 3px 3px 0 0; } .theme-builder .color-input-slide { height: 0; overflow: hidden; transition: height .7s ease-in-out; } .theme-builder .open-color-input-slide .color-input-slide { height: 40px; } .theme-builder .open-color-input-slide .color-preview { pointer-events: none; } .theme-builder .color-input-slide label { float: left; width: 132px; background: #fff; border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 0 3px; margin-left: 150px; padding-left: 13px; } .theme-builder .color-input-slide input { float: right; width: calc(100% - 282px); border-radius: 0 0 3px 0 !important; border-left-color: transparent; border-top-color: transparent; } /* .theme-builder .color-input .color-preview { top: auto; bottom: 10px; width: calc( 100% - 240px); height: 40px; bottom: 0; right: 0; border-radius: 0 0 3px 0; } */ /* .theme-builder .color-preview.color-preview-background { width: calc( 100% - 240px); height: 40px; top: 0; right: 0; } */ .error-shake { animation: error_shake 0.425s 1 linear; } @keyframes error_shake { 0% { transform: translate(25px); } 20% { transform: translate(-25px); } 40% { transform: translate(15px); } 60% { transform: translate(-15px); } 80% { transform: translate(8px); } 100% { transform: translate(0px); } } .theme-builder .add { width: 20px; height: 20px; background: var(--color-green) url(../../img/icon-add.svg) no-repeat center; background-size: 18px; border-radius: 50%; text-indent: -9999px; position: absolute; top: 10px; right: 10px; cursor: pointer; transition: all .2s ease-in-out; } .theme-builder .add:hover { transform: scale(1.1); } /* Logo Image */ .theme-builder .form-list > li .vo-logo-image .image { padding: 13px; } .theme-builder .form-list > li.logo-width { } .theme-builder .form-list > li.logo-width input { width: 200px; } /* Pixel arrows incrementer */ .px-incrementer { } .px-incrementer input { padding-left: 32px !important; } .px-incrementer .arrows { width: 19px; height: 40px; background: #fff; border: 1px solid var(--color-border); border-radius: 3px 0 0 3px; overflow: hidden; position: absolute; left: 150px; top: 0; } .px-incrementer .arrows:after { content: ""; width: 100%; height: 1px; background: var(--color-border); position: absolute; top: 50%; left: 0; } .px-incrementer .arrows div { width: 100%; height: 50%; text-indent: -9999px; position: absolute; left: 0; cursor: pointer; } .px-incrementer .arrows div:active { background-color: var(--bg-gray); } .px-incrementer .arrows .increase { background: url(../../img/icon-arrow-up.svg) no-repeat center; background-size: 15px; top: 0; } .px-incrementer .arrows .decrease { background: url(../../img/icon-arrow-down.svg) no-repeat center; background-size: 15px; bottom: 0; } .px-incrementer .max-warning { color: var(--color-red); font-size: 12px; margin-left: 10px; } .section-preview { border-bottom: 1px solid var(--color-border); } /* Sidebar */ #theme-edit-instance #editor-sidebar .vo-delete-theme { border-top: 1px solid var(--color-border); margin-top: 30px; padding-top: 20px; } /* -- Global Theme Preview ---------------------------------------------------------- */ #preview-global-theme { font-size: 15px; } #preview-global-theme .left { float: left; } #preview-global-theme .right { float: right; } #preview-global-theme .container { overflow: hidden; padding: 20px; } #preview-global-theme #header { height: 80px; box-shadow: 0px 2px 4px rgba(0,0,0,0.15); line-height: 80px; } #preview-global-theme #header .container { padding: 0 20px; } #preview-global-theme #header h1 { font-weight: 700; } #preview-global-theme #header h1 a { display: block; height: 100%; background-size: 100% auto; background-position: center; background-repeat: no-repeat; } #preview-global-theme #header h1 a.has-logo { width: 260px; text-indent: -9999px; } #preview-global-theme #header h1 a:not(.has-logo) { width: auto !important; } #preview-global-theme #header li { display: inline-block; margin-left: 10px; } #preview-global-theme #content { width: 80%; background: #fff; border-radius: 5px; box-shadow: 0px 2px 4px rgba(0,0,0,0.3); overflow: hidden; padding: 40px; margin: 50px auto; } #preview-global-theme #content p { margin-bottom: .5em; } #preview-global-theme #content-header { padding: 15px 30px; margin: -40px -40px 40px -40px; } #preview-global-theme #content-header h1 { font-size: 30px; font-weight: 700; } #preview-global-theme #button { display: table; height: 42px; width: 100%; width: auto; background: #bbb; border-radius: 5px; border: 1px solid #aaa; line-height: 40px; text-decoration: none; font-size: 16px; font-weight: bold; color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.45); font-weight: 600; font-size: 18px; text-align: center; padding: 0; margin: 15px 0 0 0; padding-left: 20px; padding-right: 20px; cursor: pointer; } #preview-global-theme #footer { font-size: 12px; } #preview-global-theme.invalid, #preview-global-theme .invalid { background-color: #fff !important; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%) !important; background-size: 20px 20px !important; background-position: 0 0, 0 10px, 10px -10px, -10px 0px !important; } #preview-global-theme #header.light, #preview-global-theme #header.light a { color: #474747; } #preview-global-theme #header.light h1 a { color: #333; } #preview-global-theme #header.dark, #preview-global-theme #header.dark a { color: rgba(255,255,255,0.9); } #preview-global-theme #header.dark h1 a { color: #fff; } #preview-global-theme #footer.light { color: rgba(0,0,0,0.55); } #preview-global-theme #footer.dark { color: rgba(255,255,255,0.65); } #preview-global-theme #content-header.light { color: #474747; color: rgba(0,0,0,0.55); } #preview-global-theme #content-header.light h1 { color: #333; } #preview-global-theme #content-header.dark { color: #999; color: rgba(255,255,255,0.65); } #preview-global-theme #content-header.dark h1 { color: #fff; } #preview-global-theme .editable:hover { outline: 3px solid var(--color-blue2); outline-offset: -3px; cursor: pointer; } /* If the block is too small and breaks the default layout */ .theme-builder .block { container-name: theme-builder-block; container-type: inline-size; } @container theme-builder-block (max-width: 500px) { .form-list > li label { float: none; display: block; width: 100%; padding-top: 0; } .form-list > li input, .form-list > li textarea, .form-list > li .bootstrap-select { width: 100%; } .block .color-preview { top: 38px; } .block .px-incrementer .arrows { top: auto; bottom: 0; left: 0; } .block .add { top: 38px; } } /* Sidebar Component Thumbnails */ #vo-dragitemslistcontainer.component-thumbnails { } #vo-dragitemslistcontainer.component-thumbnails li { margin-bottom: 20px; } #vo-dragitemslistcontainer.component-thumbnails img { display: block; width: 100%; height: auto; background: var(--bg-gray); border: 2px dashed var(--color-border); border-radius: 4px; } #vo-dragitemslistcontainer.component-thumbnails p { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; } /* Custom CSS Block */ .theme-builder .custom-css-block { } .theme-builder .custom-css-block .message p { margin-bottom: 1em; } .theme-builder .custom-css-block .textarea-header { container-name: textarea-header; container-type: inline-size; background: var(--table-border); border: 1px solid var(--color-border); border-radius: 3px 3px 0 0; border-bottom: none; overflow: hidden; padding: 1em 1.25em; margin: 0; } .theme-builder .custom-css-block .textarea-header h3 { margin: 0; } .theme-builder .custom-css-block .textarea-header p { font-style: italic; font-size: 12px; } .theme-builder .custom-css-block textarea { width: 100%; min-height: 300px; font-family: monospace; font-size: 13px; font-weight: normal; padding: 1.5em; } .theme-builder .custom-css-block textarea { border-radius: 0 0 3px 3px; text-shadow: 0 1px white; font-family: 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 13px; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } @container textarea-header (min-width: 510px) { .theme-builder .custom-css-block .textarea-header h3 { float: left; } .theme-builder .custom-css-block .textarea-header p { float: right; line-height: 18px; } } /* -- Email Theme Preview ----------------------------------------------------------- */ #preview-email-theme { font-size: 16px; padding: 40px; } #preview-email-theme #main-box { max-width: 580px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); overflow: hidden; margin: 0 auto; } #preview-email-theme #header { border-bottom: 1px solid #d3d7de; text-align: center; padding: 35px; } #preview-email-theme #header a { display: block; text-decoration: none; font-size: 32px; font-weight: 700; margin: 0 auto; } #preview-email-theme #header.dark a { color: #fff; } #preview-email-theme #header.light a { color: #000; } #preview-email-theme #header a.no-logo { width: auto !important; max-width: none !important; } #preview-email-theme #header a img { display: block; max-width: 100%; margin: 0 auto; } #preview-email-theme #content-body { padding: 40px; } #preview-email-theme #content-body p { margin-bottom: 1rem; } #preview-email-theme #content-body p:last-child { font-size: 15px; margin: 0; } #preview-email-theme #footer { text-align: center; font-size: 13px; margin-top: 10px; } #preview-email-theme a { text-decoration: underline; } /* -- Layout Editor Block Settings -------------------------------------------------- */ /* Floated over the preview, anchored to the block being edited. */ /* The panel lives in this document rather than in the preview iframe, because its controls need the admin's styling, its jQuery and selectpicker — none of which exist in there. So cmc-layout.js positions it over the frame instead, which is why it carries no layout of its own until then. */ .vo-block-settings-panel--floating { background: #fff; border: 1px solid var(--color-border); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 15px 20px; margin: 0; position: absolute; z-index: 900; } .vo-block-settings-panel--floating h2 { font-size: 13px; margin: 0 0 10px 0; } .vo-block-settings-panel--floating .vo-block-settings-field { margin-bottom: 10px; } .vo-block-settings-panel--floating .vo-block-settings-field:last-child { margin-bottom: 0; } /* Offers Page Plan Rules */ .vo-block-settings-panel--floating.vo-plan-rules-panel { max-height: 70vh; overflow-y: auto; } /* fifteen rules outgrow a short window */ .vo-plan-rules-panel .vo-plan-rules-intro { margin-bottom: 5px; } .vo-plan-rules-panel .vo-block-settings-field > label.item { display: block; margin: 0 0 3px 0; } .vo-plan-rules-panel .vo-block-settings-field input[type="text"] { box-sizing: border-box; width: 100%; } .vo-block-settings-panel--floating.vo-plan-rules-panel .vo-block-settings-actions { background: #fff; border-top: 1px solid var(--color-border); padding: 10px 20px 15px 20px; margin: 15px -20px -15px -20px; position: sticky; bottom: -15px; z-index: 1; } /* negative bottom and margins cover the panel's own padding */ .vo-plan-rules-panel .vo-block-settings-group { border-top: 1px solid var(--color-border); color: var(--text-table-header); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 10px; margin: 15px 0 8px 0; } /* Setting Toggle */ .vo-setting-toggle label.item { display: flex; align-items: center; font-weight: 400; gap: 6px; margin: 0; cursor: pointer; } .vo-setting-toggle input[type="checkbox"] { flex: none; margin: 0; } /* Brand Targeting */ /* A tick and its words are one thing, so the row is a flex line rather than an inline input beside a text node — on a baseline the box sits low and the two read as unrelated. */ .vo-brand-target label.item { display: flex; align-items: center; font-weight: 400; gap: 6px; margin: 0 0 4px 0; cursor: pointer; } .vo-brand-target input[type="radio"], .vo-brand-target input[type="checkbox"] { flex: none; margin: 0; } .vo-brand-target .vo-brand-target-list { list-style: none; margin: 4px 0 4px 20px; padding: 0; } .vo-brand-target .vo-brand-target-list li { margin-bottom: 2px; } /* Preview Switchers */ /* Two dropdowns side by side — which plan the shared layout previews against, and which title's page is being looked at. Both need their labels: "Donegal Digital" could name either a plan or a title, and unlabelled they are indistinguishable. The label sits ABOVE its control rather than beside it, so the pair line up, and it is light because the toolbar is --color-primary. Without the float they were block-level divs stacking down the bar. */ .vo-layout-editor .toolbar .vo-layout-preview-as, .vo-layout-editor .toolbar .vo-layout-brand-as { float: left; margin: 0 15px 0 0; } .vo-layout-editor .toolbar .vo-layout-preview-as label.item, .vo-layout-editor .toolbar .vo-layout-brand-as label.item { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,0.9); margin: 0 0 3px 0; padding: 0; } .vo-layout-editor .toolbar .bootstrap-select { width: auto; min-width: 170px; } .vo-layout-editor .toolbar .vo-layout-no-preview { clear: both; color: rgba(255,255,255,0.9); padding-top: 8px; } /* below the switchers, not beside them */ /* Editor Columns */ /* The two columns scroll independently: sidebar--sticky pins this one, and the canvas keeps the page scroll it already had. Overflow here so a sidebar taller than the window scrolls within itself rather than having its foot cut off — nine draggable blocks, the controls and a block settings panel add up past a short window. Deliberately NOT a fixed height on both columns: this editor is nested inside a tab panel, so the chrome above it is not a number worth hard-coding, and a wrong guess leaves either a dead strip or a second scrollbar on the page. The clearfix is what makes the sticky work at all. Both columns float, so the body collapsed to clientHeight 0 — and a sticky element travels only within its parent's box, so with no box it simply scrolled away. Measured: the sidebar went from top 201 to top -699 on a 900px scroll until this line existed. */ .vo-layout-editor-body:after { content: ""; display: table; clear: both; } /* clearfix */ .vo-layout-sidebar.sidebar--sticky { max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; } /* Page Settings */ /* The label wraps the checkbox, so it needs to lay the two out as a row rather than take the block width a label would otherwise get in this sidebar. */ .vo-layout-sign-in-label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .vo-layout-sign-in-label span { font-size: 13px; } .vo-block-settings-panel--floating .vo-block-settings-actions { text-align: right; margin-top: 15px; } .vo-block-settings-panel--floating .vo-block-settings-actions .btn { margin-left: 5px; } .vo-block-settings-panel--floating .bootstrap-select { width: 100%; } /* the picker sizes to its parent, which here is the floated panel */ /* ================================================================================== */ /* == Event Lifecycle Lists ========================================================= */ /* ================================================================================== */ /* -- Group List -------------------------------------------------------------------- */ /* Group List */ /* Shared by Communication > Events and Settings > Events Setup, rendered by ui/js/vo-lifecycle-list.js. The group colors are the design handoff's own and belong to this component alone, so they stay literals rather than joining the shared palette: hex first as the fallback, then the handoff's oklch. */ .vo-lifecycle-colhead { display: grid; padding: 14px 28px 12px; font-size: 12px; font-weight: 600; color: #8a94ab; letter-spacing: .03em; text-transform: uppercase; border-bottom: 1px solid #e6e8ef; } .vo-lifecycle-group { border-left: 4px solid #71767f; } .vo-lifecycle-group-header { display: flex; align-items: center; gap: 10px; padding: 13px 24px; border-bottom: 1px solid #e0e3ec; cursor: pointer; user-select: none; } .vo-lifecycle-group-header .group-name { font-size: 13px; font-weight: 700; } .vo-lifecycle-group-header .group-count { font-size: 11px; font-weight: 600; line-height: 1.5; color: #ffffff; padding: 2px 8px; border-radius: 10px; } .vo-lifecycle-chevron { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; transition: transform .15s; } .vo-lifecycle-chevron .tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; } .vo-lifecycle-group.collapsed .vo-lifecycle-chevron { transform: rotate(-90deg); } .vo-lifecycle-group.collapsed .vo-lifecycle-group-rows { display: none; } .vo-lifecycle-row { display: grid; align-items: center; padding: 15px 24px; border-bottom: 1px solid #eef0f5; background: #ffffff; cursor: pointer; } .vo-lifecycle-row:hover { background: #f7f8fb; } .vo-lifecycle-row .row-name { font-size: 14px; font-weight: 700; color: #2c3550; } .vo-lifecycle-row .row-subtitle { font-size: 12px; color: #9aa3b8; margin-top: 2px; } .vo-lifecycle-row .row-status { font-size: 13px; font-weight: 600; } .vo-lifecycle-row .row-status.enabled { color: #2f9e5c; } .vo-lifecycle-row .row-status.disabled { color: #b0b6c4; } .vo-lifecycle-row .row-status.archived { color: var(--text-muted); font-style: italic; } /* Delete reveals on row hover (or keyboard focus) — the grid column is a fixed 40px, so fading rather than display:none keeps the row from reflowing. pointer-events is dropped while hidden so an invisible button can't take a stray click; keyboard focus is unaffected by that, which is what keeps :focus-visible reachable via Tab. */ .vo-lifecycle-row .row-delete { width: 22px; height: 22px; border: none; border-radius: 50%; background: #e0533f; color: #ffffff; font-size: 12px; font-weight: 700; line-height: 22px; padding: 0; text-align: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s ease; } .vo-lifecycle-row:hover .row-delete, .vo-lifecycle-row .row-delete:focus { opacity: 1; pointer-events: auto; } .vo-lifecycle-row .row-flags { font-size: 12px; color: #8a94ab; display: flex; flex-wrap: wrap; gap: 6px; } .vo-lifecycle-row .row-flag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: 600; background: #eef0f5; color: #5b6478; } .vo-lifecycle-row .row-flag.on { background: #e5f3ee; color: #2f9e5c; } /* Column Layouts */ .vo-lifecycle-list--events .vo-lifecycle-colhead, .vo-lifecycle-list--events .vo-lifecycle-row { grid-template-columns: 1fr 140px 40px; } .vo-lifecycle-list--setup .vo-lifecycle-colhead, .vo-lifecycle-list--setup .vo-lifecycle-row { grid-template-columns: 1fr 300px; } /* Group: Registration & Purchase */ .vo-lifecycle-group.lifecycle-1 { border-left-color: #4a6fb5; border-left-color: oklch(0.55 0.13 250); } .vo-lifecycle-group.lifecycle-1 .vo-lifecycle-group-header { background: #e9eef7; background: oklch(0.95 0.02 250); } .vo-lifecycle-group.lifecycle-1 .group-name, .vo-lifecycle-group.lifecycle-1 .vo-lifecycle-chevron { color: #4a6fb5; color: oklch(0.55 0.13 250); } .vo-lifecycle-group.lifecycle-1 .group-count { background: #4a6fb5; background: oklch(0.55 0.13 250); } /* Group: Active Subscription & Billing */ .vo-lifecycle-group.lifecycle-2 { border-left-color: #1f9070; border-left-color: oklch(0.55 0.13 165); } .vo-lifecycle-group.lifecycle-2 .vo-lifecycle-group-header { background: #e5f3ee; background: oklch(0.95 0.02 165); } .vo-lifecycle-group.lifecycle-2 .group-name, .vo-lifecycle-group.lifecycle-2 .vo-lifecycle-chevron { color: #1f9070; color: oklch(0.55 0.13 165); } .vo-lifecycle-group.lifecycle-2 .group-count { background: #1f9070; background: oklch(0.55 0.13 165); } /* Group: End of Subscription & Win-back */ .vo-lifecycle-group.lifecycle-3 { border-left-color: #bf7a2e; border-left-color: oklch(0.6 0.14 55); } .vo-lifecycle-group.lifecycle-3 .vo-lifecycle-group-header { background: #f8efe4; background: oklch(0.95 0.025 55); } .vo-lifecycle-group.lifecycle-3 .group-name, .vo-lifecycle-group.lifecycle-3 .vo-lifecycle-chevron { color: #bf7a2e; color: oklch(0.6 0.14 55); } .vo-lifecycle-group.lifecycle-3 .group-count { background: #bf7a2e; background: oklch(0.6 0.14 55); } /* Group: Account Management & Other */ .vo-lifecycle-group.lifecycle-4 { border-left-color: #71767f; border-left-color: oklch(0.55 0.02 260); } .vo-lifecycle-group.lifecycle-4 .vo-lifecycle-group-header { background: #f0f1f3; background: oklch(0.95 0.005 260); } .vo-lifecycle-group.lifecycle-4 .group-name, .vo-lifecycle-group.lifecycle-4 .vo-lifecycle-chevron { color: #71767f; color: oklch(0.55 0.02 260); } .vo-lifecycle-group.lifecycle-4 .group-count { background: #71767f; background: oklch(0.55 0.02 260); } /* -- Events Setup ------------------------------------------------------------------ */ /* Reference Rows */ /* The admin-facing label on the left, the backend value it stands for on the right. The whole module is a view over the registries in code, so nothing here is an input. */ .vo-readonly-note { margin: 0 0 16px 0; padding: 8px 12px; border-left: 3px solid #8a94ab; background: #f0f1f3; color: #5b6478; font-size: 12px; border-radius: 0 3px 3px 0; } .vo-readonly-form > li .input-box { padding-top: 9px; color: var(--text-default); } .vo-flag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #eef0f5; color: #5b6478; } .vo-flag.on { background: #e5f3ee; color: #2f9e5c; } .vo-ref-list { margin: 0 0 18px 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: 3px; } .vo-ref-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--color-border); } .vo-ref-list > li:last-child { border-bottom: none; } .vo-ref-main { display: flex; align-items: center; gap: 6px; min-width: 0; } .vo-ref-name { font-weight: 600; color: var(--text-darkest); font-size: 13px; } .vo-ref-main .tooltip { flex: none; } .vo-ref-value { font-family: Menlo, Consolas, monospace; font-size: 12px; color: #5b6478; background: var(--bg-subtle); border: 1px solid var(--color-border); border-radius: 3px; padding: 2px 6px; word-break: break-all; } .vo-merge-variable-groups h3:first-child { margin-top: 0; } .vo-merge-variable-groups .sub-text { margin: 0 0 8px 0; } /* Variables that belong to other events — shown for reference, not usable here. */ .vo-ref-list--unavailable > li { opacity: 0.6; } .vo-ref-list--unavailable .vo-ref-name { font-weight: 400; text-decoration: line-through; } /* Plan Preview List */ .vo-plan-preview-list { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 3px; background: var(--bg-subtle); } .vo-plan-preview-list:empty { display: none; } .vo-plan-preview-list > li { padding: 7px 12px; font-size: 13px; color: var(--text-default); border-bottom: 1px solid var(--color-border); } .vo-plan-preview-list > li:last-child { border-bottom: none; } .vo-plan-preview-list .vo-plan-preview-product { font-weight: 600; color: var(--text-darkest); } .vo-plan-preview-summary { margin: 0 0 8px 0; } .vo-plan-filter-axes h3:first-child { margin-top: 0; } /* ================================================================================== */ /* == Demo Mode ===================================================================== */ /* ================================================================================== */ .banner-demo-mode { background: var(--color-yellow2); overflow: hidden; color: var(--text-darkest); text-align: center; font-size: 15px; padding: 17px; } .banner-demo-mode .text { display: inline-block; line-height: 30px; } .banner-demo-mode a { display: inline-block; background: var(--text-darkest); border-radius: 4px; color: #fff; font-weight: 700; font-size: 13px; line-height: 30px; margin-left: 10px; padding: 0 10px; } .banner-demo-mode a:hover { background: #000; } .get-started-list { max-width: 800px; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; font-size: 15px; margin: 0 auto 40px; } .get-started-list h1 { margin: -0.4rem 0 0.25rem; } .get-started-list .item { background: var(--bg-gray); border-bottom: 1px solid var(--color-border); overflow: hidden; padding: 25px 40px; } .get-started-list .item .status { float: left; width: 40px; height: 40px; background: var(--bg-subtle); border-radius: 50%; border: 1px solid var(--checkbox-border); margin-top: 4px; } .get-started-list .item .status.status-done { background: var(--color-green2) url(../../img/icon-check-white.svg) no-repeat center; background-size: 70%; border: none; } .get-started-list .item .text { float: left; width: calc(100% - 160px); padding: 0 40px; } .get-started-list .item .btn { float: right; width: 120px; margin-top: 0.5em; } .get-started-list .item h2 { margin-bottom: 0; } .get-started-list .item p { margin-top: 0.5em; } .get-started-list .more { border-bottom: 1px solid var(--color-border); overflow: hidden; padding: 30px 40px; } .get-started-list .item .walkthrough-videos { float: left; width: 40px; height: 32px; background: var(--color-red) url(../../img/icon-video-play.svg) no-repeat center; background-size: 60%; border-radius: 3px; text-indent: -9999px; margin-top: 4px; } .get-started-list .item .rocket { float: left; width: 40px; height: 40px; background: url(../../img/icon-rocket-launch.svg) no-repeat center; background-size: contain; text-indent: -9999px; } .get-started-list .credit-card-mockup { font-size: 11px; /* background-image: linear-gradient(18deg, var(--color-darkest-blue) 10%, var(--color-blue2) 100%); */ margin-top: 16px; } /* ================================================================================== */ /* == Pattern Library =============================================================== */ /* ================================================================================== */ .pattern-component { border-bottom: 1px solid var(--color-border); padding: 40px 40px; } .pattern-component .pattern-component-description { margin-bottom: 20px; } .pattern-component .pattern-component-description h3 { font-size: 18px; } .code-block { background: var(--bg-gray); border: 1px solid var(--color-border); border-radius: 4px; padding: 20px; margin-top: 20px; } /* PrismJS 1.16.0 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ code[class*="language-"], pre[class*="language-"] { color: var(--text-darkest); background: none; text-shadow: 0 1px white; font-family: 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } /* Code blocks */ pre[class*="language-"] { /* padding: 1em; margin: .5em 0; */ overflow: auto; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: none; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: var(--text-lightest); } .namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: var(--color-primary); } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--color-blue2); } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; background: hsla(0, 0%, 100%, .5); } .token.atrule, .token.attr-value, .token.keyword { color: var(--color-red); } .token.function, .token.class-name { color: #DD4A68; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; }