@-webkit-keyframes info-box-anim {
	0%, 10%, 90% { max-height: 500px; }
	0%, 100% { opacity: 0; }
	10%, 90% { opacity: 1; }
	100% { max-height: 0; }
}

@keyframes info-box-anim {
	0%, 10%, 90% { max-height: 500px; }
	0%, 100% { opacity: 0; }
	10%, 90% { opacity: 1; }
	100% { max-height: 0; }
}

.scroll-styler { padding-right: 1.5rem; padding-left: 0.75rem; background-color: #fff; outline: 20px solid #fff; color: #333; }
.scroll-styler__body { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.scroll-styler__main { text-align: left; }
.scroll-styler__aside { position: relative; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); padding: 0.75rem 1.25rem; text-align: center; border-radius: 0.25rem; background-color: #e8e8e8; }
.scroll-styler__header-title { display: inline-block; vertical-align: middle; text-align: center; border-bottom: 6px solid #132092;  margin: 0 0 3rem 0; padding: 3rem 1.5rem 0.5rem 0; font-size: 2rem; line-height: 1.2; color: #132092; }
.scroll-styler__form-info { display: grid; grid-template-columns: min-content 1fr; gap: 0.75rem; margin-bottom: 3.5rem; padding: 1.25rem; background-color: #e2e2e2; border-radius: 0.25rem; font-size: 1.125em; line-height: 1.15; }
.scroll-styler__form-info-icon { display: inline-block; vertical-align: middle; margin-top: -0.125rem; width: 1.25rem; height: 1.25rem; background-image: url(../img/ic-info.svg); background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
.scroll-styler__form-info i { font-family: 'Courier New', Courier, monospace; font-style: normal; }
.scroll-styler__form-body { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.scroll-styler__form-row { position: relative; }
.scroll-styler__form-row.scroll-styler__form-row--btn-bar { margin-top: 3rem; margin-bottom: 3rem; text-align: center; }
.scroll-styler__form-row--px:after { display: block; content: 'px'; width: 48px; height: 48px; line-height: 48px; position: absolute; bottom: 1px; right: 1px; background-color: #eaeaea; text-align: center; vertical-align: middle; border-radius: 0 0.25rem 0.25rem 0; }
.scroll-styler__form-label { display: block; margin-bottom: 6px; font-size: 15px; color: #000; }
.scroll-styler__form-label-details { white-space: nowrap; background-color: #eee; color: #666; padding: 2px 8px; font-size: 13px; border-radius: 0.25rem; }
.scroll-styler__form-control { transition: border-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1) !important; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; display: block; width: 100%; max-width: 100%; height: 50px !important; padding: 5px 10px; background-color: #fff; border: 1px solid #ccc !important; font-size: 16px; line-height: 1.5; color: #000 !important; }
.scroll-styler__form-control:focus { border-color: #aaa !important; outline: 0; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.13) !important; }
.scroll-styler__btn { transition: background-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3); width: 100%; display: inline-block; vertical-align: middle; font-size: 1rem; line-height: 1.5; padding: 16px 60px; border: 0; border-radius: 0.25rem; background-color: #132092; color: #fff; }
.scroll-styler__btn:hover { cursor: pointer; }
.scroll-styler__btn:hover,
.scroll-styler__btn:focus { background-color: #000; outline: 0; }
.scroll-styler__btn:active { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); }

.scroll-styler__info-box-container { overflow: hidden; }
.scroll-styler__info-box-container--is-toggle { -webkit-animation: info-box-anim 3s ease forwards; animation: info-box-anim 3s ease forwards; }
.scroll-styler__info-box { margin-bottom: 1.25rem; padding: 1.25rem; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); border-radius: 0.25rem; font-size: 1.125em; font-weight: 500; line-height: 1.15; }
.scroll-styler__info-box--success { background-color: #25d484; color: #fff; }
.scroll-styler__info-box-icon { position: relative; display: inline-block; vertical-align: middle; margin-top: -1px; margin-right: 4px; width: 20px; height: 20px; background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
.scroll-styler__info-box-icon--success { top: 2px; background-image: url(../img/ic-success.svg); }
.scroll-styler__info-box-desc { display: inline-block; vertical-align: middle; }

.scroll-styler__promo { border-radius: 0.25rem; overflow: hidden; }
.scroll-styler__promo:not(:first-child) {  margin-top: 0.25rem; }
.scroll-styler__promo-box { margin-bottom: 1em; }
.scroll-styler__promo-box-main-title { margin-top: 1rem; margin-bottom: 1rem; text-align: left; font-size: 1.375rem; line-height: 1.15; text-transform: uppercase; font-weight: 500; }
.scroll-styler__promo-box-title { margin-top: 0; margin-bottom: 0.5rem; text-align: left; font-size: 1.2rem; line-height: 1.2; font-weight: normal; }
.scroll-styler__promo-box-title em { font-size: 0.75em; font-family: 'Courier New', Courier, monospace; font-style: normal; line-height: 1.15; }
.scroll-styler__promo-link { position: relative; text-decoration: none; text-align: left; display: grid; gap: 1rem; grid-template-columns: 80px 1fr; align-items: center; background-color: #d8d8d8; transition: background-color 0.2s ease; }
.scroll-styler__promo-link:focus { outline: none; -webkit-box-shadow: none !important; box-shadow: none !important; }
.scroll-styler__promo-link:hover,
.scroll-styler__promo-link:focus { background-color: #fff; }
.scroll-styler__promo-text { padding-right: 1em; font-size: 1.125em; color: #333; }
.scroll-styler__promo-text b { display: inline-block; vertical-align: middle; margin-bottom: 0.25em; font-weight: 600; }
.scroll-styler__promo-img { display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto; }

/* Minicolors */
.scroll-styler .minicolors { display: block; }
.scroll-styler .minicolors-panel { left: auto !important; right: 0; }
.scroll-styler .minicolors-input { display: block; width: 100%; padding-left: 10px; }
.scroll-styler .minicolors-input + .minicolors-swatch { width: 48px; height: 48px; top: 1px; right: 1px; left: initial; border: 0; border-radius: 0 0.25rem 0.25rem 0; }
.scroll-styler .minicolors-input + .minicolors-swatch .minicolors-swatch-color { border-radius: 0 0.1875rem 0.1875rem 0; }

@media (min-width: 783px) {
	.scroll-styler { padding-right: 2rem; padding-left: 0.75rem; }
	.scroll-styler__header-title { text-align: left; }
	.scroll-styler__body {  grid-template-columns: 1fr 23rem; gap: 2rem; }
	.scroll-styler__form-row.scroll-styler__form-row--btn-bar { margin-top: 5rem; }
	.scroll-styler__btn { width: auto; }
}

@media (min-width: 992px) {
	.scroll-styler { padding-right: 3rem; padding-left: 2rem; }
	.scroll-styler__btn { min-width: 18.75rem; }
}

@media (min-width: 1400px) {
	.scroll-styler__form-body { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}


@media (min-width: 1640px) {
	.scroll-styler__form-body { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
}