@charset "utf-8";

::selection{ background: #282828; color: white}
::-moz-selection{ background: #282828; color: white}

/* Border-boxing */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input, select { -webkit-appearance: none; }
select { -webkit-appearance: menulist; }

/* Clearfix */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }

/* Base */
html,
body,
.wrapper { height: 100%; }
body { background: #fff; font-size: 16px; margin: 0; padding: 0; }
img { border: 0; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; position: relative; }
.controle { clear: both; word-spacing: -4px; height: 0; line-height: 0; }
.divider { border-bottom: 1px solid #eee; height: 0; margin: 40px 0; overflow: hidden; }

a { color: #101921; text-decoration: underline; }
a:hover { text-decoration: none; }

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.sr-only { height: 1px; width: 1px; overflow: hidden; }
.grecaptcha-badge { visibility: hidden; }

/* Messages */
.message { border-radius: 2px; color: #fff; font: bold 13px Arial, Helvetica, sans-serif; margin: 10px 0 20px; padding: 20px; text-shadow: 1px 1px 0px rgba(0,0,0,0.15); }

/* Colors */
.white { color: #fff; }
.default { color: #3ccbb5; }

/* UI Colors */
.c-default { background: #fafafa; border: 1px solid #ddd; color: #484848; }
.c-default:hover, .c-default:focus { background: #eee; }
.c-primary { background: #2282F0; }
.c-primary:hover, .c-primary:focus { background: #1771d8; }
.c-success { background: #61b261; }
.c-success:hover, .c-success:focus { background: #58a558; }
.c-info { background: #428bca; }
.c-info:hover, .c-info:focus { background: #3f7fb7; }
.c-alert { background: #f0b94e; }
.c-alert:hover, .c-alert:focus { background: #d9a43c; }
.c-error { background: #d9534f; }
.c-error:hover, .c-error:focus { background: #cf4a46; }
.c-black { background: #353535; }
.c-black:hover, .c-black:focus { background: #252525; }

/* Scroll to top */
.btn-scroll-to-top { display: none; cursor: pointer; border: 2px solid #282828; color: #282828; border-radius: 2px; position: fixed; bottom: 20px; right: 20px; z-index: 1200; width: 38px; height: 38px; text-align: center; line-height: 33px; font-family: FontAwesome; font-size: 1em; }
.wp-fixed { box-shadow: 0 5px 10px rgba(0,0,0,0.15); position: fixed; bottom: 18px; right: 70px; z-index: 9999; width: auto; border-radius: 50px; background: #25d366; vertical-align: middle; text-align: center; padding: 7.5px 15px; color: #fff;  font: 600 13px 'Poppins', Arial, Helvetica, sans-serif; text-decoration: none; }
.wp-fixed i { font-size: 26px; vertical-align: middle; margin: 0 5px 0 0; }

/* Structure */
header { border-bottom: 0px solid rgba(0,0,0,0.1); height: auto; margin: 0; padding: 20px 0; width: 100%; position: absolute; top: 0; left: 0; z-index: 3001; transition: all 0.35s ease; }
header .wrap { position: relative; }
header .logotipo { color: #fff; font: 600 16px/50px 'Poppins', Arial, Helvetica, sans-serif; float: left; margin: 0 25px 0 0; padding: 0; height: 50px; text-decoration: none; text-transform: lowercase; }
header .logotipo img { display: inline-block; height: 30px; margin: 0 6px 0 0; vertical-align: middle; }
header nav { display: block; height: 100%; margin: 0; padding: 0; text-align: right; }
header nav > a { color: #fff; display: inline-block; font: 500 13px/50px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0 0 0 20px; padding: 0 2px; text-decoration: none; transition: all 0.5s ease; position: relative; }
header nav > a:after { content: ''; background: #27f3b2; height: 3px; border-radius: 6px; width: 0; position: absolute; left: 50%; bottom: -1px; transition: all 0.25s ease-out; }
header nav > a.active:after,
header nav > a:hover:after { left: 0; width: 100%; }
header .header-itens { margin: 0 0 0 30px; padding: 0; display: inline-block; vertical-align: middle; }
header .header-itens .btn { border: 2px solid #27f3b2; border-radius: 50px; color: #27f3b2; font: 600 14px/20px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0px; display: inline-block; margin: 0; padding: 10px 20px; text-decoration: none; text-transform: lowercase; vertical-align: middle; }
header .nav-ico,
header .close-btn { display: none; }

footer { border-top: 1px solid rgba(0,0,0,0.05); font-size: 0; margin: 50px 0 0; padding: 50px 0; position: relative; width: 100%; }
footer h5 { color: #050505; font: 700 22px/110% 'Poppins', Arial, Helvetica, sans-serif; margin: 0 0 10px; padding: 0; text-transform: none; }
footer h5 img { display: inline-block; height: 30px; margin: 0 6px 0 0; vertical-align: middle; }
footer nav { margin: 20px 0; }
footer a { display: inline-block; color: #050505; font: 500 14px/160% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0.25px; margin: 0 10px; padding: 0 5px; text-decoration: none; }
footer .social-ico { background: #fff; color: #27f3b2; display: inline-block; vertical-align: middle; margin: 10px; padding: 0; }
footer .social-ico:before { content: attr(data-ico); color: #27f3b2; font-family: 'FontAwesome'; font-size: 28px; font-weight: normal; }
footer .social-ico:after { width: 60% !important; left: 20% !important; bottom: 5px; }

/* Home */
.hero { background: -moz-linear-gradient(45deg, #101921 0%, #15242f 100%); background: -webkit-linear-gradient(45deg, #101921 0%, #15242f 100%); background: linear-gradient(45deg, #101921 0%, #15242f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101921', endColorstr='#15242f',GradientType=1 ); height: auto; margin: 0 0 200px; padding: 200px 0 0; position: relative; width: 100%; }
.hero:after { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.55); background-image: url(/assets/images/rocket.svg); background-attachment: fixed; background-position: center bottom; background-size: 90% auto; background-repeat: no-repeat; mix-blend-mode: multiply; filter: grayscale(100%); opacity: 0.25; }
.hero h1 { color: #fff; font: 300 50px/110% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 30px auto 60px; padding: 0; max-width: 600px; position: relative; z-index: 2; }
.hero h1 strong { font-weight: 600; color: #27f3b2; }
.hero .hero-img { position: relative; margin: 0 auto -100px; max-width: 600px; position: relative; z-index: 2; }

.section { background: none; padding: 24px 0; font-size: 0; position: relative; }
.section-wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.section-wrap:nth-child(odd) { flex-direction: row-reverse; }
.flex-item { flex-basis: 50%; padding: 40px; }
.flex-item img { max-width: 100%; }
.section h2 { color: #050505; font: 600 32px/115% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: -0.5px; margin: 0 0 16px; padding: 0; }
.section p { color: #282828; font: 400 16px/150% 'Poppins', Arial, Helvetica, sans-serif; text-rendering: optimizelegibility; margin: 0 0 20px; }

.shadow-default { box-shadow: 0 10px 15px rgba(15,35,191,0.095); border-radius: 16px; position: relative; }
.shadow-default:after { content: ''; background: none; border-radius: 16px; box-shadow: 0 0 25px rgba(15,35,191,0.5); display: block; position: absolute; height: 20%; bottom: 0; left: 10%; width: 80%; z-index: -1; }

/* Login/Cadastro */
.login-wrap { background: -moz-linear-gradient(45deg, #101921 0%, #15242f 100%); background: -webkit-linear-gradient(45deg, #101921 0%, #15242f 100%); background: linear-gradient(45deg, #101921 0%, #15242f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101921', endColorstr='#15242f',GradientType=1 ); height: auto; margin: 0; padding: 200px 0 100px; position: relative; width: 100%; }
.login-wrap:after { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0,0,0,0.55); background-image: url(/assets/images/rocket.svg); background-attachment: fixed; background-position: center bottom; background-size: 90% auto; background-repeat: no-repeat; mix-blend-mode: multiply; filter: grayscale(100%); opacity: 0.25; }
.login-wrap .wrap { position: relative; z-index: 10; }
.login-wrap h1 { color: #fff; font: 300 32px/110% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 30px auto 60px; padding: 0; position: relative; z-index: 2; }
.login-wrap h1 strong { font-weight: 600; color: #27f3b2; }
.login-wrap p { color: #fff; font: 400 12px/150% 'Poppins', Arial, Helvetica, sans-serif; text-rendering: optimizelegibility; margin: 0; padding: 0; }
.login-wrap p a { color: #fff; }
.login-wrap .form { background: #fff; border-radius: 4px; margin: 0 auto 30px; padding: 32px; max-width: 460px;}
.login-wrap .form p,
.login-wrap .form p a { color: #666; }

/* Content */
.title { background: -moz-linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); background: -webkit-linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); background: linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27f3b2', endColorstr='#4cb3e4',GradientType=1 ); position: relative; }
.title-bg { background-position: center; background-repeat: no-repeat; mix-blend-mode: overlay; filter: grayscale(100%); background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.325; }
.title h1 { color: #fff; font: 600 48px/120% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0.5px; margin: 0; padding: 260px 0 80px; text-shadow: 3px 5px 8px rgba(0,0,0,0.125); text-align: center; }
.title .ico-support { background: #fff; padding: 16px; width: 72px; height: 72px; position: absolute; bottom: -37px; left: 50%; margin-left: -37px; }
.title .ico-support img { display: block; width: 100%; height: auto; }

.content { padding: 80px 0; }
.content h1 { color: #333; font: 700 44px/100% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0 0 25px; padding: 0; background: -moz-linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); background: -webkit-linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); background: linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27f3b2', endColorstr='#4cb3e4',GradientType=1 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.content h2 { color: #27f3b2; font: 600 36px/105% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: -0.5px; margin: 0 0 20px; padding: 0; }
.content h3 { color: #444; font: 600 24px/40px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 15px 0; padding: 0; }
.content h4 { color: #333; font: 600 18px/22px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 15px 0; padding: 0; }
.content h5 { color: #333; font: 600 15px/22px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0 0 10px; padding: 0; text-transform: uppercase; }
.content p { color: #666; font: 500 16px/175% 'Poppins', Arial, Helvetica, sans-serif; text-rendering: optimizelegibility; margin: 0 auto 24px; }
.content ul,
.content ol { color: #666; font: 500 16px/150% 'Poppins', Arial, Helvetica, sans-serif; text-rendering: optimizelegibility; font-feature-settings: "liga"; margin: 0 auto 24px; padding: 0 25px; }
.content ul li,
.content ol li { margin: 5px 0; padding: 0; }
.content-text { margin: 0 auto; padding: 20px 0; max-width: 80%; }

/* Forms */
.form { font-size: 0; margin: 0 auto; text-align: left; }
.form label { display: block; margin: 0 0 5px; padding: 0; width: 100%; }
.form label span { display: block; color: rgba(0,0,0,0.65); font: 500 12px/150% 'Poppins', Arial, Helvetica, sans-serif; padding: 4px; }
.form label .text { border: 1px solid rgba(0,0,0,0.25); border-radius: 4px; box-shadow: 0 7px 10px rgba(0,0,0,0.05); background: #fff; margin: 0; padding: 12px 15px; outline: none; color: rgba(0,0,0,0.85); font: 600 16px/20px 'Poppins', Arial, Helvetica, sans-serif; width: 100%; transition: all 0.5s ease; text-transform: none; opacity: 0.85; }
.form label .text:focus { border-color: #27f3b2; }
.form label .text.jscolor { border: 1px solid rgba(0,0,0,0.25); }
.form label select { height: 54px; padding: 10px; }
.form label textarea { height: 120px; }
.form input[type="submit"] { background: #27f3b2; border: 0; border-bottom: 2px solid rgba(0,0,0,0.15); border-radius: 4px; cursor: pointer; color: #fff; font: 600 16px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 1px; width: auto; margin: 20px 0; padding: 10px 32px; }
.form input[type="submit"].full-width { width: 100%; }

.radio, .checkbox { cursor: pointer; margin: 0 0 5px !important; vertical-align: middle; }
.radio-inline, .checkbox-inline { display: inline-block !important; padding: 0 30px 0 0; width: auto !important; }
.radio input, .checkbox input { float: left; margin: 3px 10px 0 0; }

.custom-radio { padding: 10px; overflow: hidden; }
.custom-radio input { visibility: hidden; position: absolute; text-indent: -9999px; }
.custom-radio span { display: inline-block; padding: 0; }
.custom-radio span:before { content: '\f00c'; color: #fff; font-family: 'FontAwesome'; font-size: 9px; font-weight: normal; display: inline-block; line-height: 12px; width: 18px; height: 18px; background: #fff; border: 3px solid #ccc; border-radius: 50%; margin: -1px 7px 0; vertical-align: middle; text-align: center; }
.custom-radio.radio-on span:before { border: 3px solid #00386b !important; background: #00386b; }

.custom-checkbox { padding: 5px !important; margin: 0 10px 10px 0 !important; overflow: hidden; }
.custom-checkbox input { visibility: hidden; position: absolute; text-indent: -9999px; }
.custom-checkbox span { display: inline-block; padding: 0; font-size: 18px !important; }
.custom-checkbox span:before { content: '\f00d'; color: #fff; font-family: 'FontAwesome'; font-size: 12px; font-weight: normal; display: inline-block; line-height: 18px; width: 24px; height: 24px; background: #fff; border: 3px solid #ccc; border-radius: 10%; margin: -1px 10px 0 0; vertical-align: middle; text-align: center; }
.custom-checkbox.checkbox-on span { color: #27f3b2 !important; }
.custom-checkbox.checkbox-on span:before { border: 3px solid #27f3b2 !important; background: #27f3b2; }

.localizacao iframe { display: block; width: 100%; height: 500px; }

/* Mensagens */
.sucesso { background: #d9edd7 url(/assets/images/painel/sucesso.png) 10px center no-repeat; border: 1px solid #a1d29a; border-radius: 2px; color: #575f56; font: bold 0.688em/2.273em Tahoma, Geneva, sans-serif; margin: 0 0 20px; padding: 10px 10px 10px 50px; }
.alerta { background: #ffefcc url(/assets/images/painel/alerta.png) 10px center no-repeat; border: 1px solid #ffd67f; border-radius: 2px; color: #de8912; font: bold 0.688em/2.273em Tahoma, Geneva, sans-serif; margin: 0 0 20px; padding: 10px 10px 10px 50px; }
.informacao { background: #ccdcff url(/assets/images/painel/informacao.png) 10px center no-repeat; border: 1px solid #7fa6ff; border-radius: 2px; color: #3d4a66; font: bold 0.688em/2.273em Tahoma, Geneva, sans-serif; margin: 0 0 20px; padding: 10px 10px 10px 50px; }
.erro { background: #ffcccc url(/assets/images/painel/erro.png) 10px center no-repeat; border: 1px solid #ff7f7f; border-radius: 2px; color: #ba4747; font: bold 0.688em/2.273em Tahoma, Geneva, sans-serif; margin: 0 0 20px; padding: 10px 10px 10px 50px; }
.msg { background: #000; color: #fff; text-align: center; height: 80px; font: 700 1em/5.000em 'Lato', Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; opacity: 0.75; }

/* Modal */
.modal { display: none; width: 700px; max-width: 96%; padding: 0 !important; }
.modal h2 { background: -moz-linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); background: -webkit-linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); background: linear-gradient(45deg, #27f3b2 0%, #4cb3e4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27f3b2', endColorstr='#4cb3e4',GradientType=1 ); border-bottom: 1px solid rgba(0,0,0,0.05); color: #fff; font: 700 28px/30px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0; padding: 30px 45px; position: relative; }
.modal h2:after { content: ''; height: 4px; width: 100px; border-radius: 30px; display: block; margin: 0; background: #1e1e1e; display: block; margin: 0; position: absolute; bottom: -2px; left: 45px; }
.modal .c-form { padding: 45px; }
.modal .c-form p { color: #2f2f2f; font: 400 18px/28px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0 0 10px; padding: 0; }
.modal .c-form label { width: 100%; }
.modal .c-form div:not(.message) { text-align: center; padding: 0; position: relative; }
.modal .fancybox-close-small:after { background: none; border: 2px solid #fff; color: #fff; line-height: 28px; top: 30px; right: 25px; }

*:disabled { border: 2px solid rgba(0,0,0,0.05) !important; opacity: 0.75; cursor: not-allowed; }


/* Admin */
.rocket-bar { position: fixed; top: 0; left: 0; width: 64px; height: 100%; background: -moz-linear-gradient(45deg, #101921 0%, #15242f 100%); background: -webkit-linear-gradient(45deg, #101921 0%, #15242f 100%); background: linear-gradient(45deg, #101921 0%, #15242f 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101921', endColorstr='#15242f',GradientType=1 ); }
.rocket-bar .logotipo { border-bottom: 1px solid rgba(0,0,0,0.1); display: block; height: 64px; padding: 16px; }
.rocket-bar .logotipo img { margin: 0 auto; display: block; width: 100%; height: auto; }

.builder-wrap { background: #fafafa; height: 100%; margin: 0 556px 0 64px; padding: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-grow: 1; }
.builder-wrap nav { background: #fff; border-bottom: 1px solid rgba(0,0,0,0.1); display: block; height: 64px; width: 100%; margin: 0; padding: 12px; text-align: left; }
.builder-wrap nav > a { color: #050505; display: inline-block; font: 600 13px/40px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0 15px; padding: 0 2px; text-decoration: none; transition: all 0.5s ease; position: relative; }
.builder-wrap nav > a:after { content: ''; background: #27f3b2; height: 3px; border-radius: 6px; width: 0; position: absolute; left: 50%; bottom: -12px; transition: all 0.25s ease-out; }
.builder-wrap nav > a.active:after,
.builder-wrap nav > a:hover:after { left: 0; width: 100%; }
.builder-wrap nav > a span.badge { display: inline-block; background: #10b37f; border-radius: 4px; color: #fff; font: 500 9px/10px 'Poppins', Arial, Helvetica, sans-serif; margin: 0 0 0 3px; padding: 3px; text-transform: uppercase; vertical-align: middle; }
.builder-wrap .builder-main { overflow: auto; border: 4px solid transparent; padding: 40px; }
.builder-wrap .builder-main::-webkit-scrollbar { width: 6px; }
.builder-wrap .builder-main::-webkit-scrollbar-track { background: none; }
.builder-wrap .builder-main::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 16px; }
.builder-wrap .builder-main::-webkit-scrollbar-thumb:hover { background: #15242f; }
.builder-wrap .builder-content { display: block; background: #fff; border-radius: 8px; margin: 0 auto 40px; padding: 32px; max-width: 620px; width: 100%; }
.builder-wrap .builder-content .builder-block { border-bottom: 1px solid rgba(0,0,0,0.1); margin: 0 0 40px; padding: 0 0 40px; }
.builder-wrap .builder-content .builder-block:last-child { border: 0; margin: 0; }
.builder-wrap .builder-content .block-image { margin: 10px 0; }
.builder-wrap .builder-content .block-image .image-wrap { background: #fafafa; border-radius: 6px; display: inline-block; width: 100px; height: 100px; vertical-align: middle; text-align: center; }
.builder-wrap .builder-content .block-image .image-wrap img { display: inline-block; border-radius: 6px; margin: 0 auto; line-height: 100px; max-width: 100px; max-height: 100px; }
.builder-wrap .builder-content .block-image label { display: inline-block; vertical-align: middle; margin: 0 10px; max-width: 60%; }
.builder-wrap .builder-content .builder-btns input[type="submit"] { background: #27f3b2; border: 0; border-bottom: 2px solid rgba(0,0,0,0.15); border-radius: 4px; cursor: pointer; color: #fff; font: 600 16px 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 1px; width: auto; margin: 20px 0; padding: 10px 32px; }
.builder-wrap .builder-content .builder-btns input[type="submit"].full-width { width: 100%; }

.icon-list { border: 1px dashed rgba(0,0,0,0.15); border-radius: 4px; list-style: none; margin: 0; padding: 8px 16px; }
.icon-list li { background: #fff; border-bottom: 2px solid rgba(0,0,0,0.1); box-shadow: -4px 4px 8px rgba(0,0,0,0.075); border-radius: 4px; margin: 8px 0; padding: 0 12px 0 0; display: flex; align-items: center; flex-grow: 1; }
.icon-list li span.move { border-right: 1px solid rgba(0,0,0,0.085); width: 33px; height: 60px; text-align: center; cursor: move; display: flex; align-items: center; justify-content: center; }
.icon-list li span.move svg { opacity: 0.3; }
.icon-list li span.ico { width: 50px; height: 60px; text-align: center; }
.icon-list li span.ico i { display: block; text-align: center; color: #aaa; font-size: 26px; line-height: 60px; }
.icon-list li span.input { height: 60px; text-align: center; display: flex; flex-grow: 1; padding: 8px 24px 8px 0; }
.icon-list li span.input input { border: 0; border-bottom: 1px solid #ddd; width: 100%; margin: 0; padding: 5px; color: #555; font: 13px Arial, Helvetica, sans-serif; outline: none; }
.icon-list li span.input input:focus { border-bottom: 1px solid #101921; color: #101921; }
.icon-list li span.active-toggle { background: rgba(0,0,0,0.15); border-radius: 60px; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.05); position: relative; padding: 3px; width: 36px; height: 22px; text-align: left; font-size: 0; line-height: 20px; cursor: pointer; transition: all 0.35s ease; }
.icon-list li span.active-toggle span { background: #fff; border-radius: 50%; box-shadow: 2px 2px 2px rgba(0,0,0,0.05); height: 16px; width: 16px; display: inline-block; position: absolute; top: 3px; left: 3px; line-height: 20px; margin: 0; padding: 0; transition: all 0.35s ease; }
.icon-list li span.active-toggle[data-active="yes"] { background: #27f3b2; }
.icon-list li span.active-toggle[data-active="yes"] span { left: initial; right: 3px; }

.builder-wrap h1 { color: #050505; font: 600 24px/110% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: -0.5px; margin: 0 0 32px; padding: 0; text-align: center; }
.builder-wrap h2 { color: #050505; font: 600 16px/110% 'Poppins', Arial, Helvetica, sans-serif; letter-spacing: 0; margin: 0 0 16px; padding: 0; }
.builder-wrap p { color: #666; font: 13px/165% Arial, Helvetica, sans-serif; text-rendering: optimizelegibility; margin: 0 0 20px; }

.builder-preview { position: fixed; top: 0; right: 0; width: 556px; height: 100%; background: #fff; border-left: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; }
.mockup { background: #232222; border-bottom: 6px solid rgba(0,0,0,0.5); border-radius: 15px; box-shadow: 0 8px 28px rgba(0,0,0,0.2); height: 685px; width: 380px; padding: 30px 10px 10px; position: relative; }
.mockup:before { content: ''; background: #080808; border-radius: 10px; height: 6px; width: 80px; position: absolute; top: 13px; left: 50%; margin-left: -40px; opacity: 0.45; }
.mockup iframe { display: block; border-radius: 6px; width: 360px; height: 640px; overflow: auto; border: 0; }