

@media (max-width: 1200px) {
	.list-builder-feature .visual { max-width: initial; }
}
@media (max-width: 576px) {
	.list-builder-feature .visual { max-width: 100%; }
}

.media-link { color: #455464; text-decoration: none; padding: .5rem 0; }
.media-link:hover { color: #6b7988; text-decoration: none; }
.media-link .media-header { color: #10253e; }
.media-link:hover .media-header { color: #416aa2; }
.media-graphic { padding: .25rem; background-color: #fff; border: 1px solid #ddd; border-radius: .2rem; }


/* Welcome Setup Steps */
.dashboard-setup-steps { position: relative; }

.setup-step { position: relative; border-top: 5px solid #f4f4f4; padding: 1.6rem 1.5rem 1.2rem 1.5rem; }
.step-first { border-top-left-radius: .5rem; }
.step-last { border-top-right-radius: .5rem; }
.step-icon { font-size: 24px; display: inline-block; background-color: #fff; position: absolute; top: -22px; left: 50%; transform: translate(-50%,0); width: 34px; height: 34px; line-height: 31px; border-radius: 50%; box-shadow: 0 2px 5px -1px rgba(50,50,93,0.25),0 1px 3px -1px rgba(0,0,0,0.3); color: #e3e5e8; }
.step-icon .material-icons { line-height: initial; }

.setup-step.complete { border-color: #5fac4a; color: #8c8e92; }
.setup-step.complete .step-icon { color: #5fac4a; }

@media (max-width: 768px) {
	.setup-step, .setup-step.complete { border-top: none; border-bottom: 1px solid #ddd; border-left: 5px solid #f4f4f4; padding: 1.5rem; }
	.setup-step.complete { border-left-color: #5fac4a; }
	.step-icon { top: 50%; left: -22px; transform: translate(0,-50%); }
	.step-last { border-bottom: none; }
}


/* List builder pod */
.list-builder-feature { background: #222b42; color: #fff; }
.feature-visual { margin: 0 -1.5rem; }


/* Welcome Modal */
.welcome-modal .modal-content { box-shadow: 0 30px 60px -12px rgba(50,50,93,.25),0 18px 36px -18px rgba(0,0,0,.3),0 -12px 36px -8px rgba(0,0,0,.025); overflow: hidden; border-radius: 1rem; }

.bg-element-accent { background: linear-gradient(to bottom, rgba(243,242,247,1) 0%,rgba(249,248,251,1) 100%); }
.welcome-msg { padding: 2rem 3rem; }
.industry-leaders { padding: 2rem; }

.brand-partner { display: inline-block; background: #fff; border-radius: 1.25rem; text-align: center; position: relative; width: 120px; height: 120px; box-shadow: 0 10px 25px rgba(0,0,0,.05),0 3px 10px rgba(0,0,0,.03); }
.brand-partner img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }


/* Complete Trial Plans */
.plan-trial-options .card { border-radius: .5rem; overflow: hidden; }

#account-ready-badge { position: absolute; top: -21px; left: 50%; background-color: #e6f5e7; color: #58ba60; padding: .25rem 1rem; border-radius: 33px; border: 4px solid #fff; transform: translate(-50%,0); }

.btn-package-select { position: relative; padding: 0; transition: all .1s ease; border-radius: .5rem; background: #fff; }
.btn-package-select:hover { opacity: .85; }
.btn-package-select .form-check-label { background: #fafbfc; border: 1px solid #fff; color: #002f46; box-shadow: 0 1px 1px rgba(0,0,0,.06),0 0 2px rgba(0,0,0,.06),0 2px 10px rgba(0,0,0,.07); border-radius: .5rem; display: block; padding: 1rem 3rem 1rem 1.5rem; cursor: pointer; }
.btn-package-select .form-check-label:hover { border-color: #3287f2; }
.btn-package-select .form-check-input { position: absolute; top: 50%; right: 2rem; transform: translate(0,-50%); margin: 0; }
.input-wrap { display: block; position: absolute; top: 50%; right: 1.67rem; transform: translate(0,-50%); margin: 0; background: #fff; width: 25px; height: 25px; border-radius: 50%; }

.form-check-input[type="radio"]:checked+label { background: #2173e7; color: #fff; }

.s-plan { overflow: hidden; border-radius: .25rem; border: none; border-top: 4px solid #d8ddec; box-shadow: 0 7px 11px -4px rgb(0 23 62 / 20%), 0 0 1px 0 #a8b9d5; }

.s-plan-essential .bg-accent {  }
.s-plan-enhanced { border-top-color: #d44b3b; }
.s-plan-enhanced .bg-accent {  }


.modal-icon { background: #fff; width: 90px; height: 85px; border-radius: 1.1rem; box-shadow: 0 2.5px 5px -1px rgba(50,50,93,.25),0 1.5px 3px -1.5px rgba(0,0,0,.3); text-align: center; position: absolute; top: -20px; left: 50%; z-index: 40; transform: translate(-50%,0); }
.modal-icon .material-icons { font-size: 2.4rem; background: linear-gradient(135deg, rgba(248,80,50,1) 0%,rgba(241,111,92,1) 50%,rgba(246,41,12,1) 51%,rgba(240,47,23,1) 71%,rgba(231,56,39,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.complete-setup { color: #555c63; }

.plan-list { list-style: none; padding: 0; }
.plan-list li { position: relative; padding: .25rem 0 .25rem 1.75rem; }
.plan-list li.includes { background: url(/images/v2/svg/list-check.svg) left .45rem/17px auto no-repeat; }
.plan-list li.not-included { background: url(/images/v2/svg/list-x.svg) left .45rem/17px auto no-repeat; }


#product-error { position: absolute; top: 0; right: 0; background: #f8e4e4; padding: .25rem .5rem; border-radius: .25rem; transform: translate(0,-50%); }

/* Dashboard Welcome Tour */
.tour-backdrop { opacity: .1; }

.popover { font-family: "Graphik", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; border: none; padding: 0; min-width: 276px; max-width: 300px; border-radius: 10px; box-shadow: 0 20px 30px -10px #26394d; }
.popover-title { background-color: #1f66c5; color: #fff; font-weight: 500; border: none; padding: 10px 14px; margin: 0; border-radius: 10px 10px 0 0; }
.popover-content { background-color: #2673db; color: #fff; }
.popover-navigation { background-color: #2673db; color: #fff; border-color: #1f66c5; border-radius: 0 0 10px 10px; }
.popover-navigation .btn-default { border-color: #fff; background: none; font-weight: 500; color: #fff; padding: 3px 10px; }
.popover-navigation .btn-default:hover { background-color: #fff; color: #1f66c5; }
.popover-navigation .btn-default.disabled:hover { background: none; color: #fff; }

.popover.top > .arrow, .popover.top > .arrow:after { border-top-color: #2673db; }
.popover.bottom > .arrow, .popover.bottom > .arrow:after { border-bottom-color: #1f66c5; }

.popover.left > .arrow, .popover.left > .arrow:after { border-left-color: #2673db; }
.popover.right > .arrow, .popover.right > .arrow:after { border-right-color: #2673db; }


