/* IMPORT */ @charset "utf-8"; /*@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400&display=swap');*/ @media screen and (min-width: 600px) { @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/nunito-sans-v6-latin-ext_latin-300.eot'); src: local('Nunito Sans'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-300.woff2') format('woff2'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-300.woff') format('woff'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-300.ttf') format('truetype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-300.svg#NunitoSans') format('svg'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/nunito-sans-v6-latin-ext_latin-600.eot'); src: local('Nunito Sans'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-600.woff2') format('woff2'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-600.woff') format('woff'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-600.ttf') format('truetype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-600.svg#NunitoSans') format('svg'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/nunito-sans-v6-latin-ext_latin-700.eot'); src: local('Nunito Sans'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-700.woff2') format('woff2'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-700.woff') format('woff'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-700.ttf') format('truetype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-700.svg#NunitoSans') format('svg'); } @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/nunito-sans-v6-latin-ext_latin-800.eot'); src: local('Nunito Sans'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-800.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-800.woff2') format('woff2'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-800.woff') format('woff'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-800.ttf') format('truetype'), url('/assets/fonts/nunito-sans-v6-latin-ext_latin-800.svg#NunitoSans') format('svg'); } } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(/elements/iconfont/MaterialIcons-Regular.eot); src: local('Material Icons'), local('MaterialIcons-Regular'), url(/elements/iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(/elements/iconfont/MaterialIcons-Regular.woff) format('woff'), url(/elements/iconfont/MaterialIcons-Regular.ttf) format('truetype'); font-display: swap; } /* CSS VARIABLES */ :root { /*COLORS*/ --white-color: #FFF; --primary-color: #361CC6; --primary-color-light-1: #F4F5FC; --primary-color-light-2: #E4E5F9; --primary-color-light-3: #BABCEF; --primary-color-light-4: #9092E5; --primary-color-dark-1: #21117A; --primary-color-dark-2: #140B4B; --secondary-color: #140B4B; --light-gray: rgba(28, 30, 81, 0.44); --overlay-color: rgba(28, 30, 81, 0.44); --yellow: #F6C42C; --yellow-light: #FEF6DD; --red: #E3342F; --red-light: #FBDFDE; --green: #84D571; --green-light: #ECF9E9; --primary-color-transparent: #4B4ED524; --primary-color-gradient: radial-gradient(#5438ED, #361CC6); --lesson-cta-gradient: linear-gradient(0deg, #F4F5FC 60%, #f4f5fc00 100%); --gray-light-1: #F7F8F8; --gray-light-2: #E9EBEB; --gray-light-3: #AFB7B7; --gray-light-4: #818E8F; /*SHADOWS*/ --primary-shadow: 0px 16px 16px rgba(35, 38, 170, 0.44); --normal-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16); --small-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12); --large-shadow: 0px 16px 16px rgba(0, 0, 0, 0.16); /*RADIUS*/ --small-radius: 4px; --normal-radius: 8px; --large-radius: 12px; /*FONTS*/ --h1: 48px; --h1-height: 52px; --h2: 24px; --h2-height: 28px; --h3: 18px; --h3-height: 24px; --h4: 14px; --h4-height: 20px; --normal-font: 16px; --normal-font-height: 20px; --small-font: 12px; --small-font-height: 16px; /*SPACES*/ --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-4: 4px; --space-12: 12px; --space-20: 20px; --space-btn: 12px 24px; /*SIZES*/ --desktop-content-width : 940px; /* TRANSITIONS */ --basic-move: all 0.34s cubic-bezier(0, 0.99, 1, 1); } /* CSS DEFAULT */ html, body, div, main, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, vat, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-family: 'Nunito Sans', sans-serif; font-size: var(--normal-font); line-height: var(--normal-font-height); color: var(--secondary-color); font-weight: var(--normal-font-height); vertical-align: baseline; text-decoration:none; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } body { background-color: var(--primary-color-light-1); } /* ICONS */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; vertical-align: middle; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; } header .material-icons { width: 24px; height: 24px; overflow: hidden; } /* ALIGN SYSTEM */ .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .m-auto { margin-left: auto; margin-right: auto; } /* CONTROLL SYSTEM */ .hide { display: none !important; } .disabled { opacity: 0.24; pointer-events: none; } .invisible { opacity: 0; pointer-events: none; } .invisible-hide { height: 0; width: 0; overflow: hidden; opacity: 0; pointer-events: none; } body.no-scroll { overflow: hidden; } /* MARGIN AND GRID SYSTEM */ .container { display: block; width: 100%; max-width: var(--desktop-content-width); margin-left: auto; margin-right: auto; padding-left: var(--space-24); padding-right: var(--space-24); } .mt4 {margin-top: var(--space-4);} .mt8 {margin-top: var(--space-8);} .mt12 {margin-top: var(--space-12);} .mt16 {margin-top: var(--space-16);} .mt20 {margin-top: var(--space-20);} .mt24 {margin-top: var(--space-24);} .mt32 {margin-top: var(--space-32);} .mt40 {margin-top: var(--space-40);} .mt48 {margin-top: var(--space-48);} .mt56 {margin-top: var(--space-56);} .mt64 {margin-top: var(--space-64);} .mt72 {margin-top: var(--space-72);} .mb4 {margin-bottom: var(--space-4);} .mb8 {margin-bottom: var(--space-8);} .mb12 {margin-bottom: var(--space-12);} .mb16 {margin-bottom: var(--space-16);} .mb20 {margin-bottom: var(--space-20);} .mb24 {margin-bottom: var(--space-24);} .mb32 {margin-bottom: var(--space-32);} .mb40 {margin-bottom: var(--space-40);} .mb48 {margin-bottom: var(--space-48);} .mb56 {margin-bottom: var(--space-56);} .mb64 {margin-bottom: var(--space-64);} .mb72 {margin-bottom: var(--space-72);} .ml4 {margin-left: var(--space-4);} .ml8 {margin-left: var(--space-8);} .ml12 {margin-left: var(--space-12);} .ml16 {margin-left: var(--space-16);} .ml20 {margin-left: var(--space-20);} .ml24 {margin-left: var(--space-24);} .ml32 {margin-left: var(--space-32);} .ml40 {margin-left: var(--space-40);} .ml48 {margin-left: var(--space-48);} .ml56 {margin-left: var(--space-56);} .ml64 {margin-left: var(--space-64);} .ml72 {margin-left: var(--space-72);} .mr4 {margin-right: var(--space-4);} .mr8 {margin-right: var(--space-8);} .mr12 {margin-right: var(--space-12);} .mr16 {margin-right: var(--space-16);} .mr20 {margin-right: var(--space-20);} .mr24 {margin-right: var(--space-24);} .mr32 {margin-right: var(--space-32);} .mr40 {margin-right: var(--space-40);} .mr48 {margin-right: var(--space-48);} .mr56 {margin-right: var(--space-56);} .mr64 {margin-right: var(--space-64);} .mr72 {margin-right: var(--space-72);} .grid { box-sizing:border-box; display:-webkit-flex; display:-ms-flexbox; display:-webkit-box; display:flex; -webkit-flex:0 1 auto; -ms-flex:0 1 auto; -webkit-box-flex:0; flex:0 1 auto; -webkit-flex-direction:row; -ms-flex-direction:row; -webkit-box-orient:horizontal; -webkit-box-direction:normal; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; margin-left: -8px; margin-right: -8px; } .grid.grid-nogutter { margin-left: 0; margin-right: 0; } .grid.grid-nogutter > .col { padding-left: 0; padding-right: 0; } .grid.grid-large-gutter { margin-left: -16px; margin-right: -16px; } .grid.grid-large-gutter > .col { padding: 0 16px 0 16px; } .grid.grid-small-gutter { margin-left: -4px; margin-right: -4px; } .grid.grid-small-gutter > .col { padding: 0 4px 0 4px; } .col { box-sizing:border-box; -webkit-flex:0 0 auto; -ms-flex:0 0 auto; flex:0 0 auto; -webkit-flex-grow:1; -ms-flex-positive:1; -webkit-box-flex:1; flex-grow:1; -ms-flex-preferred-size:0; -webkit-flex-basis:0; flex-basis:0; max-width:100%; min-width:0; padding: 0 8px 0 8px; } .sm-visible, .xs-visible, .sm-visible-flex, .xs-visible-flex, .sm-visible-inline, .xs-visible-inline { display: none; } .col-align-top { -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start } .col-align-bottom { align-self:flex-end } .col-align-middle { -webkit-align-self:center; -ms-flex-item-align:center; align-self:center } .col-top { justify-content:flex-start !important; flex-direction:column; display:flex } .col-bottom { justify-content:flex-end !important; flex-direction:column; display:flex } .col-middle { justify-content:center; flex-direction:column; display:flex } .col.sm-visible-flex { display: none } .grid-start { -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start } .grid-center { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } .grid-end { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end } .grid-around { justify-content:space-around } .grid-between { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between } .col-first { -webkit-box-ordinal-group:0; -ms-flex-order:-1; order:-1 } .col-last { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1 } .grid-reverse { -webkit-box-orient:horizontal; -webkit-box-direction:reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse } .col-fixed { flex:initial } .col-grow-2 { flex-grow:2 } .col-grow-3 { flex-grow:3 } .col-grow-4 { flex-grow:4 } .col-grow-5 { flex-grow:5 } .col-grow-6 { flex-grow:6 } .col-grow-7 { flex-grow:7 } .col-grow-8 { flex-grow:8 } .col-grow-9 { flex-grow:9 } .col-grow-10 { flex-grow:10 } .col-grow-11 { flex-grow:11 } .col-1 { -ms-flex-preferred-size:8.33333%; -webkit-flex-basis:8.33333%; flex-basis:8.33333%; max-width:8.33333% } .col-2 { -ms-flex-preferred-size:16.66667%; -webkit-flex-basis:16.66667%; flex-basis:16.66667%; max-width:16.66667% } .col-3 { -ms-flex-preferred-size:25%; -webkit-flex-basis:25%; flex-basis:25%; max-width:25% } .col-4 { -ms-flex-preferred-size:33.33333%; -webkit-flex-basis:33.33333%; flex-basis:33.33333%; max-width:33.33333% } .col-5 { -ms-flex-preferred-size:41.66667%; -webkit-flex-basis:41.66667%; flex-basis:41.66667%; max-width:41.66667% } .col-6 { -ms-flex-preferred-size:50%; -webkit-flex-basis:50%; flex-basis:50%; max-width:50% } .col-7 { -ms-flex-preferred-size:58.33333%; -webkit-flex-basis:58.33333%; flex-basis:58.33333%; max-width:58.33333% } .col-8{ -ms-flex-preferred-size:66.66667%; -webkit-flex-basis:66.66667%; flex-basis:66.66667%; max-width:66.66667% } .col-9 { -ms-flex-preferred-size:75%; -webkit-flex-basis:75%; flex-basis:75%; max-width:75% } .col-10 { -ms-flex-preferred-size:83.33333%; -webkit-flex-basis:83.33333%; flex-basis:83.33333%; max-width:83.33333% } .col-11 { -ms-flex-preferred-size:91.66667%; -webkit-flex-basis:91.66667%; flex-basis:91.66667%; max-width:91.66667% } .col-12 { -ms-flex-preferred-size:100%; -webkit-flex-basis:100%; flex-basis:100%; max-width:100% } @media all and (max-width: 1024px) { .sm-mt4 {margin-top: var(--space-4);} .sm-mt8 {margin-top: var(--space-8);} .sm-mt12 {margin-top: var(--space-12);} .sm-mt16 {margin-top: var(--space-16);} .sm-mt20 {margin-top: var(--space-20);} .sm-mt24 {margin-top: var(--space-24);} .sm-mt32 {margin-top: var(--space-32);} .sm-mt40 {margin-top: var(--space-40);} .sm-mt48 {margin-top: var(--space-48);} .sm-mt56 {margin-top: var(--space-56);} .sm-mt64 {margin-top: var(--space-64);} .sm-mt72 {margin-top: var(--space-72);} .sm-mb4 {margin-bottom: var(--space-4);} .sm-mb8 {margin-bottom: var(--space-8);} .sm-mb12 {margin-bottom: var(--space-12);} .sm-mb16 {margin-bottom: var(--space-16);} .sm-mb20 {margin-bottom: var(--space-20);} .sm-mb24 {margin-bottom: var(--space-24);} .sm-mb32 {margin-bottom: var(--space-32);} .sm-mb40 {margin-bottom: var(--space-40);} .sm-mb48 {margin-bottom: var(--space-48);} .sm-mb56 {margin-bottom: var(--space-56);} .sm-mb64 {margin-bottom: var(--space-64);} .sm-mb72 {margin-bottom: var(--space-72);} .sm-ml4 {margin-left: var(--space-4);} .sm-ml8 {margin-left: var(--space-8);} .sm-ml12 {margin-left: var(--space-12);} .sm-ml16 {margin-left: var(--space-16);} .sm-ml20 {margin-left: var(--space-20);} .sm-ml24 {margin-left: var(--space-24);} .sm-ml32 {margin-left: var(--space-32);} .sm-ml40 {margin-left: var(--space-40);} .sm-ml48 {margin-left: var(--space-48);} .sm-ml56 {margin-left: var(--space-56);} .sm-ml64 {margin-left: var(--space-64);} .sm-ml72 {margin-left: var(--space-72);} .sm-mr4 {margin-right: var(--space-4);} .sm-mr8 {margin-right: var(--space-8);} .sm-mr12 {margin-right: var(--space-12);} .sm-mr16 {margin-right: var(--space-16);} .sm-mr20 {margin-right: var(--space-20);} .sm-mr24 {margin-right: var(--space-24);} .sm-mr32 {margin-right: var(--space-32);} .sm-mr40 {margin-right: var(--space-40);} .sm-mr48 {margin-right: var(--space-48);} .sm-mr56 {margin-right: var(--space-56);} .sm-mr64 {margin-right: var(--space-64);} .sm-mr72 {margin-right: var(--space-72);} .sm-left { text-align: left; } .sm-right { text-align: right; } .sm-center { text-align: center; } .sm-m-auto { margin-left: auto; margin-right: auto; } .sm-hide { display: none; } .sm-visible { display: block !important; } .sm-visible-flex { display: flex !important; } .sm-visible-inline { display: inline-block !important; } .sm-col-fixed { flex:initial } .grid.sm-grid-small-gutter { margin-left: -4px; margin-right: -4px; } .grid.sm-grid-nogutter { margin-left: 0; margin-right: 0; } .grid.sm-grid-nogutter > .col { padding-left: 0; padding-right: 0; } .sm-col-align-top { -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start } .sm-col-align-bottom { align-self:flex-end } .sm-col-align-middle { -webkit-align-self:center; -ms-flex-item-align:center; align-self:center } .sm-col-top { justify-content:flex-start !important; flex-direction:column; display:flex } .sm-col-bottom { justify-content:flex-end !important; flex-direction:column; display:flex } .sm-col-middle { justify-content:center; flex-direction:column; display:flex } .sm-grid-start { -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start } .sm-grid-center { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } .sm-grid-end { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end } .sm-grid-around { justify-content:space-around } .sm-grid-between { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between } .sm-col-first { -webkit-box-ordinal-group:0; -ms-flex-order:-1; order:-1 } .sm-col-last { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1 } .sm-order-1 { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1 } .sm-order-2 { -webkit-box-ordinal-group:2; -ms-flex-order:2; order:2 } .sm-order-3 { -webkit-box-ordinal-group:2; -ms-flex-order:3; order:3 } .sm-order-4 { -webkit-box-ordinal-group:2; -ms-flex-order:4; order:4 } .sm-order-5 { -webkit-box-ordinal-group:2; -ms-flex-order:5; order:5 } .sm-order-6 { -webkit-box-ordinal-group:2; -ms-flex-order:6; order:6 } .sm-grid-reverse { -webkit-box-orient:horizontal; -webkit-box-direction:reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse } .sm-col-1 { -ms-flex-preferred-size:8.33333%; -webkit-flex-basis:8.33333%; flex-basis:8.33333%; max-width:8.33333% } .sm-col-2 { -ms-flex-preferred-size:16.66667%; -webkit-flex-basis:16.66667%; flex-basis:16.66667%; max-width:16.66667% } .sm-col-3 { -ms-flex-preferred-size:25%; -webkit-flex-basis:25%; flex-basis:25%; max-width:25% } .sm-col-4 { -ms-flex-preferred-size:33.33333%; -webkit-flex-basis:33.33333%; flex-basis:33.33333%; max-width:33.33333% } .sm-col-5 { -ms-flex-preferred-size:41.66667%; -webkit-flex-basis:41.66667%; flex-basis:41.66667%; max-width:41.66667% } .sm-col-6 { -ms-flex-preferred-size:50%; -webkit-flex-basis:50%; flex-basis:50%; max-width:50% } .sm-col-7{ -ms-flex-preferred-size:58.33333%; -webkit-flex-basis:58.33333%; flex-basis:58.33333%; max-width:58.33333% } .sm-col-8 { -ms-flex-preferred-size:66.66667%; -webkit-flex-basis:66.66667%; flex-basis:66.66667%; max-width:66.66667% } .sm-col-9 { -ms-flex-preferred-size:75%; -webkit-flex-basis:75%; flex-basis:75%; max-width:75% } .sm-col-10{ -ms-flex-preferred-size:83.33333%; -webkit-flex-basis:83.33333%; flex-basis:83.33333%; max-width:83.33333% } .sm-col-11{ -ms-flex-preferred-size:91.66667%; -webkit-flex-basis:91.66667%; flex-basis:91.66667%; max-width:91.66667% } .sm-col-12 { -ms-flex-preferred-size:100%; -webkit-flex-basis:100%; flex-basis:100%; max-width:100% } .col-sm { flex:100%; max-width:100% } } .minimal-select option { color: #000 } @media all and (max-width: 680px) { .xs-mt4 {margin-top: var(--space-4);} .xs-mt8 {margin-top: var(--space-8);} .xs-mt12 {margin-top: var(--space-12);} .xs-mt16 {margin-top: var(--space-16);} .xs-mt20 {margin-top: var(--space-20);} .xs-mt24 {margin-top: var(--space-24);} .xs-mt32 {margin-top: var(--space-32);} .xs-mt40 {margin-top: var(--space-40);} .xs-mt48 {margin-top: var(--space-48);} .xs-mt56 {margin-top: var(--space-56);} .xs-mt64 {margin-top: var(--space-64);} .xs-mt72 {margin-top: var(--space-72);} .xs-mb4 {margin-bottom: var(--space-4);} .xs-mb8 {margin-bottom: var(--space-8);} .xs-mb12 {margin-bottom: var(--space-12);} .xs-mb16 {margin-bottom: var(--space-16);} .xs-mb20 {margin-bottom: var(--space-20);} .xs-mb24 {margin-bottom: var(--space-24);} .xs-mb32 {margin-bottom: var(--space-32);} .xs-mb40 {margin-bottom: var(--space-40);} .xs-mb48 {margin-bottom: var(--space-48);} .xs-mb56 {margin-bottom: var(--space-56);} .xs-mb64 {margin-bottom: var(--space-64);} .xs-mb72 {margin-bottom: var(--space-72);} .xs-ml4 {margin-left: var(--space-4);} .xs-ml8 {margin-left: var(--space-8);} .xs-ml12 {margin-left: var(--space-12);} .xs-ml16 {margin-left: var(--space-16);} .xs-ml20 {margin-left: var(--space-20);} .xs-ml24 {margin-left: var(--space-24);} .xs-ml32 {margin-left: var(--space-32);} .xs-ml40 {margin-left: var(--space-40);} .xs-ml48 {margin-left: var(--space-48);} .xs-ml56 {margin-left: var(--space-56);} .xs-ml64 {margin-left: var(--space-64);} .xs-ml72 {margin-left: var(--space-72);} .xs-mr4 {margin-right: var(--space-4);} .xs-mr8 {margin-right: var(--space-8);} .xs-mr12 {margin-right: var(--space-12);} .xs-mr16 {margin-right: var(--space-16);} .xs-mr20 {margin-right: var(--space-20);} .xs-mr24 {margin-right: var(--space-24);} .xs-mr32 {margin-right: var(--space-32);} .xs-mr40 {margin-right: var(--space-40);} .xs-mr48 {margin-right: var(--space-48);} .xs-mr56 {margin-right: var(--space-56);} .xs-mr64 {margin-right: var(--space-64);} .xs-mr72 {margin-right: var(--space-72);} .xs-left { text-align: left; } .xs-right { text-align: right; } .xs-center { text-align: center; } .xs-m-auto { margin-left: auto; margin-right: auto; } .xs-hide { display: none; } .xs-visible { display: block !important; } .xs-visible-flex { display: flex !important; } .xs-visible-inline { display: inline-block !important; } .xs-col-fixed { flex:initial } .grid.xs-grid-small-gutter { margin-left: -4px; margin-right: -4px; } .grid.xs-grid-nogutter { margin-left: 0; margin-right: 0; } .grid.xs-grid-nogutter > .col { padding-left: 0; padding-right: 0; } .xs-col-align-top { -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start } .xs-col-align-bottom { align-self:flex-end } .xs-col-align-middle { -webkit-align-self:center; -ms-flex-item-align:center; align-self:center } .xs-col-top { justify-content:flex-start !important; flex-direction:column; display:flex } .xs-col-bottom { justify-content:flex-end !important; flex-direction:column; display:flex } .xs-col-middle { justify-content:center; flex-direction:column; display:flex } .xs-grid-start { -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start } .xs-grid-center { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center } .xs-grid-end { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end } .xs-grid-around { justify-content:space-around } .xs-grid-between { -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between } .xs-col-first { -webkit-box-ordinal-group:0; -ms-flex-order:-1; order:-1 } .xs-col-last { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1 } .xs-order-1 { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1 } .xs-order-2 { -webkit-box-ordinal-group:2; -ms-flex-order:2; order:2 } .xs-order-3 { -webkit-box-ordinal-group:2; -ms-flex-order:3; order:3 } .xs-order-4 { -webkit-box-ordinal-group:2; -ms-flex-order:4; order:4 } .xs-order-5 { -webkit-box-ordinal-group:2; -ms-flex-order:5; order:5 } .xs-order-6 { -webkit-box-ordinal-group:2; -ms-flex-order:6; order:6 } .xs-grid-reverse { -webkit-box-orient:horizontal; -webkit-box-direction:reverse; -ms-flex-direction:row-reverse; flex-direction:row-reverse } .xs-col-1 { -ms-flex-preferred-size:8.33333%; -webkit-flex-basis:8.33333%; flex-basis:8.33333%; max-width:8.33333% } .xs-col-2 { -ms-flex-preferred-size:16.66667%; -webkit-flex-basis:16.66667%; flex-basis:16.66667%; max-width:16.66667% } .xs-col-3 { -ms-flex-preferred-size:25%; -webkit-flex-basis:25%; flex-basis:25%; max-width:25% } .xs-col-4 { -ms-flex-preferred-size:33.33333%; -webkit-flex-basis:33.33333%; flex-basis:33.33333%; max-width:33.33333% } .xs-col-5 { -ms-flex-preferred-size:41.66667%; -webkit-flex-basis:41.66667%; flex-basis:41.66667%; max-width:41.66667% } .xs-col-6 { -ms-flex-preferred-size:50%; -webkit-flex-basis:50%; flex-basis:50%; max-width:50% } .xs-col-7{ -ms-flex-preferred-size:58.33333%; -webkit-flex-basis:58.33333%; flex-basis:58.33333%; max-width:58.33333% } .xs-col-8 { -ms-flex-preferred-size:66.66667%; -webkit-flex-basis:66.66667%; flex-basis:66.66667%; max-width:66.66667% } .xs-col-9 { -ms-flex-preferred-size:75%; -webkit-flex-basis:75%; flex-basis:75%; max-width:75% } .xs-col-10{ -ms-flex-preferred-size:83.33333%; -webkit-flex-basis:83.33333%; flex-basis:83.33333%; max-width:83.33333% } .xs-col-11{ -ms-flex-preferred-size:91.66667%; -webkit-flex-basis:91.66667%; flex-basis:91.66667%; max-width:91.66667% } .xs-col-12 { -ms-flex-preferred-size:100%; -webkit-flex-basis:100%; flex-basis:100%; max-width:100% } .col-xs { flex:100%; max-width:100% } } /* FONTS */ h1, .h1 { font-size: var(--h1); line-height: var(--h1-height); font-weight: 800; margin: 0 !important; } h2, .h2 { font-size: var(--h2); line-height: var(--h2-height); font-weight: 800; } h3, .h3 { font-size: var(--h3); line-height: var(--h3-height); font-weight: 700; } h4, .h4 { font-size: var(--h4); line-height: var(--h4-height); font-weight: 700; text-transform: uppercase; } b { font-weight: 700; } a { color: var(--primary-color); cursor: pointer; } a:hover { color: var(--primary-color-dark-1); } .highlight-text { color: var(--primary-color); } .small-text { font-size: var(--small-font); line-height: var(--small-font-height); } .small-text-gray { font-size: var(--small-font); color: var(--light-gray); } .text-cut-line-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text-cut-line-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .text-cut-line-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .text-cut-line-4 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .text-cut-line-5 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } .text-cut-line-6 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .text-cut-line-7 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; } .text-cut-line-8 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; } .indent { position: relative; padding-left: var(--space-24); } .indent:after { display: block; content: ""; position: absolute; display: block; left: 0; top: 0; width: 6px; height: 100%; border-radius: var(--normal-radius); background-color: var(--primary-color-light-2); } ul { list-style: none; } ul li { position: relative; padding-left: var(--space-24); margin-bottom: var(--space-4); /*transition: var(--basic-move);*/ } ul li::before { content: "\2022"; color: var(--primary-color); display: inline-block; width: var(--space-24); position: absolute; left: 0; } ul.ul-highlight { display: inline-block; padding: var(--space-16); border-radius: var(--normal-radius); background-color: var(--primary-color-light-1); } ul.ul-highlight-seperate li { display: table; padding: var(--space-8) var(--space-16); padding-left: calc( var(--space-24) + var(--space-16) ); margin-bottom: var(--space-8); border-radius: var(--normal-radius); background-color: var(--primary-color-light-1); } ul.ul-highlight-seperate li:hover { transform: translate(4% , 0%); } ul.ul-highlight-seperate li::before { left: calc( var(--space-24) / 2 + 4px ); } ul.ul-count { counter-reset: ul-count; } ul.ul-count li { padding-left: 44px; margin-bottom: var(--space-16); /*transition: var(--basic-move);*/ } ul.ul-count li::before { counter-increment: ul-count; content: counter(ul-count); font-weight: 800; color: var(--primary-color-dark-1); display: inline-block; text-align: center; padding: var(--space-4); border-radius: var(--small-radius); background-color: var(--primary-color-light-1); position: absolute; left: 0; } ul.ul-count:hover li { color: var(--light-gray); } ul.ul-count li:hover { color: var(--secondary-color) } ul.ul-count li:hover::before { color: var(--white-color); background-color: var(--primary-color-dark-1); } /* SEPAS */ .sepa { display: block; width: 100%; height: 1px; background-color: var(--primary-color-light-2); } /* LOADING */ .loading:after { display: inline-block; content: ""; width: 12px; height: 12px; border-radius: 24px; border: 3px solid var(--primary-color); border-left-color: transparent; vertical-align: middle; margin-left: var(--space-8); animation: spin 1600ms infinite linear; } #modal_loading { transform: none; left: 0; top: 0; width: 100%; max-height: 100%; height: 100%; max-width: 100%; border-radius: 0; background-color: transparent; } #modal_loading .loading-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* BUTTONS */ .btn { display: inline-block; color: var(--primary-color); background-color: var(--primary-color-light-2); border-radius: var(--normal-radius); padding: var(--space-btn); font-weight: 800; text-align: center; /*transition: var(--basic-move);*/ cursor: pointer; font-family: inherit; font-size: var(--normal-font); outline: none; border: 0; } .btn:hover { background-color: var(--primary-color-light-3); transform: scale(0.98); } .btn .material-icons { color: var(--primary-color); } .btn.btn-primary { color: var(--white-color); background-color: var(--primary-color); } .btn.loading { pointer-events: none !important; background-color: var(--primary-color-light-4) !important; box-shadow: 0px 0px 0px rgba(35, 38, 170, 0) !important; color: var(--white-color) !important; border: 0; animation: pulse 1600ms infinite linear; } .btn.loading:after { border-color: var(--primary-color); border-left-color: transparent; vertical-align: middle; margin-left: var(--space-8); animation: spin 1600ms infinite linear; } .btn.btn-primary:hover { background-color: var(--primary-color-dark-1); } .btn.btn-primary-shadow { color: var(--white-color); background-color: var(--primary-color); box-shadow: var(--primary-shadow); } .btn.btn-primary-shadow:hover { background-color: var(--primary-color-dark-1); box-shadow: 0px 0px 0px rgba(35, 38, 170, 0); } .btn.btn-outline { color: var(--primary-color); border: 1px solid var(--primary-color); background-color: transparent; } .btn.btn-outline:hover { color: var(--white-color); background-color: var(--primary-color); } .btn.btn-outline-white { color: var(--white-color); border: 1px solid var(--white-color); background-color: transparent; } .btn.btn-outline-white:hover { color: var(--secondary-color); background-color: var(--white-color); } .btn.btn-white { color: var(--primary-color); background-color: var(--white-color); } .btn.btn-white:hover { background-color: var(--primary-color-light-2); } .btn.btn-yellow { color: var(--primary-color); background-color: var(--yellow); } .btn.btn-yellow:hover { filter: brightness(96%); } .btn.btn-red { color: var(--red); background-color: var(--red-light); } .btn.btn-red:hover { filter: brightness(96%); } .btn.btn-red-strong { color: var(--white-color); background-color: var(--red); } .btn.btn-red-strong:hover { filter: brightness(96%); } .btn-fluid { width: 100%; display: block; } .btn-fluid-limited { width: 100%; max-width: 320px; display: inline-block; } .btn-fluid-limited-short { width: 100%; max-width: 180px; display: inline-block; } /* FILTER INPUT */ .input-with-icon.filter-input { position: relative; } .input-with-icon.filter-input input[type=text] { border: 0; border-radius: 64px; background-color: var(--primary-color-light-1); padding: var(--space-btn); padding-left: calc( 24px + var(--space-16) + var(--space-8) ); } .input-with-icon.filter-input .material-icons { color: var(--secondary-color); z-index: 1; } /* SLIDER */ .slider { height: 26px; } .slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--primary-color-light-2); border-radius: 8px; outline: none; } .slider input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--white-color); box-shadow: var(--small-shadow); border: 1px solid var(--primary-color-light-2); cursor: pointer; } .slider input::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--white-color); box-shadow: var(--small-shadow); border: 1p solid var(--primary-color-light-2); cursor: pointer; } /* ICON BUTTONS */ .icon-btn { display: inline-block; color: var(--primary-color); background-color: var(--primary-color-light-2); padding: var(--space-8); font-weight: 800; /*transition: var(--basic-move);*/ cursor: pointer; border-radius: 64px; } .icon-btn:hover { background-color: var(--primary-color-light-3); transform: scale(0.98); } .icon-btn.icon-btn-primary { background-color: var(--primary-color); } .icon-btn.icon-btn-primary span { color: var(--white-color); } .icon-btn.icon-btn-primary:hover { background-color: var(--primary-color-dark-1); } .icon-btn.icon-btn-primary-shadow { background-color: var(--primary-color); box-shadow: var(--primary-shadow); } .icon-btn.icon-btn-primary-shadow span { color: var(--white-color); } .icon-btn.icon-btn-primary-shadow:hover { box-shadow: 0px 0px 0px rgba(35, 38, 170, 0); } .icon-btn.icon-btn-primary-overlay { background-color: var(--primary-color-light-4); } .icon-btn.icon-btn-primary-overlay span { color: var(--white-color); } .icon-btn.icon-btn-small { padding: var(--space-4); } .icon-btn.icon-btn-small span { font-size: 21px; } .icon-btn.icon-btn-large { padding: var(--space-16); display: none !important; } .icon-btn.icon-btn-brick { border-radius: var(--normal-radius); padding: var(--space-8) var(--space-16); } .icon-btn.icon-btn-brick span { color: var(--primary-color); } .icon-btn.icon-btn-brick.icon-btn-primary span { color: var(--white-color); } /* CHIPS */ .chips { display: inline-block; color: var(--primary-color); border-radius: 64px; border: 1px solid var(--primary-color); padding: var(--space-4) var(--space-8); /*transition: var(--basic-move);*/ cursor: pointer; vertical-align: middle; } .chips.chips-tiny { font-size: var(--small-font); padding: 2px var(--space-8); font-weight: 700; } .chips.chips-tiny img { height: var(--small-font); margin-top: -2px; } .chips:hover { color: var(--white-color); background-color: var(--primary-color); } .chips img { height: var(--normal-font); vertical-align: middle; } .chips .material-icons { font-size: 18px; color: var(--primary-color); } .chips:hover .material-icons, .chips.selected .material-icons { color: var(--white-color); } .chips.chips-primary, .chips.selected { color: var(--white-color); background-color: var(--primary-color); } .chips.chips-primary:hover { background-color: var(--primary-color-dark-1); border: 1px solid var(--primary-color-dark-1); } .chips.chips-primary .material-icons { font-size: 18px; padding: var(--space-4); margin-left: var(--space-4); border-radius: 64px; color: var(--white-color); background-color: var(--primary-color-light-4); } .chips.chips-yellow { color: var(--secondary-color); background-color: var(--yellow); border-color: var(--yellow); } .chips.chips-yellow:hover { filter: brightness(96%); } .chips.chips-dark { color: var(--white-color); background-color: var(--primary-color-dark-2); border-color: var(--primary-color-dark-2); } .chips.chips-dark:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); } .chips-float-left { position: absolute; left: 0; top: var(--space-24); display: inline-block; font-size: var(--small-font); font-weight: 700; padding: var(--space-4) var(--space-8); background: var(--white-color); border-radius: 64px; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.16); } .chips-float-left a { font-size: var(--small-font); font-weight: 700; color: var(--secondary-color); text-decoration: none !important; } .chips.chips-static { pointer-events: none; } /* INFO ICON */ .info-icon { display: inline-block; font-size: 20px; color: var(--primary-color-light-3); vertical-align: middle; /*transition: var(--basic-move);*/ } .info-icon:hover { color: var(--primary-color-light-4); transform: scale(1.2); } /* TEXT BRICK */ .text-brick { display: inline-block; vertical-align: middle; padding: var(--space-4) var(--space-8); background-color: var(--primary-color-light-2); border-radius: var(--normal-radius); } .text-brick.text-brick-large { padding: var(--space-8) var(--space-16); } .text-brick.text-brick-strong { font-weight: 800; } .text-brick.text-brick-red { color: var(--white-color); background-color: var(--red); } .text-brick.text-brick-green { color: var(--white-color); background-color: var(--green); } .text-brick .sepa { display: inline-block; vertical-align: middle; width: 1px; height: var(--normal-font); background-color: var(--primary-color-light-3); } /* INPUTS */ input::-webkit-input-placeholder { color: var(--light-gray); font-family: 'Nunito Sans', sans-serif; } input::-webkit-calendar-picker-indicator { display: none; } input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], select, .datalist-cont input, .bounce-code-paste-area { width: 100%; display: block; color: var(--secondary-color); border: 1px solid var(--primary-color); background-color: transparent; border-radius: var(--normal-radius); padding: var(--space-btn); /*transition: var(--basic-move);*/ cursor: pointer; font-family: inherit; font-size: var(--normal-font); outline: none; -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: var(--normal-font-height); } input:focus { transform: scale(1.01); box-shadow: var(--large-shadow); } .input-with-icon:focus-within { transform: scale(1.01); /*transition: var(--basic-move);*/ } .input-with-icon:focus-within input:focus { transform: scale(1); } .input-limited { max-width: 320px; } .input-with-icon { position: relative; } .input-with-icon input { width: 100%; } .input-with-icon span { position: absolute; right: var(--space-16); top: 50%; transform: translate(0, -50%); color: var(--primary-color); cursor: pointer; /*transition: var(--basic-move);*/ z-index: 2; } .input-with-icon.input-icon-bg span { right: 1px; top: 1px; height: calc(100% - 2px); line-height: calc( var(--space-16)*2 + 14px ); transform: translate(0, 0); width: calc( var(--space-16)*2 + 24px ); text-align: center; border-left: 1px solid var(--primary-color); background-color: var(--primary-color-light-1); border-top-right-radius: calc( var(--normal-radius) - 1px ); border-bottom-right-radius: calc( var(--normal-radius) - 1px ); /*transition: var(--basic-move);*/ } .input-with-icon.input-icon-bg span:hover { color: var(--white-color); background-color: var(--primary-color); border-left: 1px solid var(--primary-color); } .input-with-icon.icon-first span { display: inline-block; pointer-events: none; left: var(--space-16); } .input-with-icon.icon-first span.sm-visible-inline { display: none; left: var(--space-16) } .icon-btn.sm-visible { display: none } .input-with-icon.icon-first input { padding-left: calc( 24px + var(--space-16) + var(--space-8) ); } .input-with-icon select + span, .datalist-cont span { pointer-events: none; } .input-white, .input-with-icon.input-white input, .input-with-icon.input-white select { color: var(--white-color); border-color: var(--white-color); } .input-with-icon.input-white .material-icons { color: var(--white-color); } .input-white input::-webkit-input-placeholder, input.input-white::-webkit-input-placeholder { color: var(--primary-color-light-4); } select.minimal-select { color: var(--primary-color); border: none; display: inline-block; width: auto; padding: 0; cursor: pointer; } /* SWITCH */ .switch { display: inline-block; cursor: pointer; -webkit-tap-highlight-color: transparent; vertical-align: middle; } .switch i { position: relative; display: inline-block; width: 54px; height: 34px; background-color: var(--primary-color-light-2); border-radius: 23px; vertical-align: text-bottom; /*transition: var(--basic-move);*/ } .switch i::after { content: ""; position: absolute; left: 0; width: 28px; height: 28px; background-color: #fff; border-radius: 24px; box-shadow: var(--small-shadow); transform: translate3d(4px, 3px, 0); /*transition: var(--basic-move);*/ } .switch:active input:checked + i::after { transform: translate3d(16px, 3px, 0); } .switch input { display: none; } .switch input:checked + i { background-color: var(--primary-color); } .switch input:checked + i::after { transform: translate3d(23px, 3px, 0); } /* CHECKBOX */ .checkbox { display: inline-block; cursor: pointer; } .checkbox .status { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: middle; } .checkbox input { display: none; } .checkbox:active input:checked { border-color: var(--primary-color); } .checkbox input:checked + .status .checked { z-index: 2; transform: scale(1); opacity: 1; border-radius: 4px; } .checkbox input:checked + .status .default { border-color: var(--primary-color); } .checkbox input:checked + .status .checked svg { z-index: 2; transform: scale(1); opacity: 1; } .checkbox .default, .checkbox .checked { position: absolute; top: -2px; left: -2px; width: 20px; height: 20px; border-radius: 2px; } .checkbox .default { background: transparent; z-index: 1; border: 1px solid var(--primary-color); border-radius: 4px; top: -2px; left: -2px; } .checkbox .checked { z-index: 0; opacity: 0; background: var(--primary-color); text-align: center; color: #fff; line-height: 20px; /*transition: var(--basic-move);*/ } .checkbox .checked svg { width: 14px; height: 14px; transform: scale(0); margin-top: 3px; fill: none; /*transition: var(--basic-move);*/ } .checkbox .checked svg path { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .checkbox span { vertical-align: middle; } .checkbox.checkbox-black .default { border-color: var(--primary-color-light-2); } .checkbox.checkbox-black span { color:var(--primary-color-light-2); } /* RADIO BUTTON */ .radio_btn { display: inline-block; cursor: pointer; } .radio_btn .status { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: middle; } .radio_btn input { display: none; } .radio_btn:active input:checked { border-color: var(--primary-color); } .radio_btn input:checked + .status .checked { z-index: 2; transform: scale(1); opacity: 1; } .radio_btn input:checked + .status .default { border-color: var(--primary-color); background-color: var(--primary-color); } .radio_btn .default, .radio_btn .checked { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 16px; } .radio_btn .default { background: transparent; z-index: 1; border: 1px solid var(--primary-color); top: -2px; left: -2px; } .radio_btn .checked { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; z-index: 0; opacity: 0; transform: scale(0); background: #FFF; text-align: center; color: #fff; line-height: 20px; /*transition: var(--basic-move);*/ } .radio_btn span { vertical-align: middle; } .radio_btn.radio_btn-black .default { border-color: var(--light-gray); } .radio_btn.radio_btn-black span { color: var(--light-gray); } /* BOXES */ .box { padding: var(--space-32) var(--space-40); border-radius: var(--large-radius); background-color: var(--white-color); } .box.box-highlight { background-color: var(--primary-color-light-1); } .box.box-highlight-2 { background-color: var(--primary-color-light-2); } .box.box-inline { display: inline-block; } .box.box-small { padding: var(--space-20) var(--space-24); } .box.box-tiny { padding: var(--space-8); } .box.box-huge { padding: var(--space-40) var(--space-48); } .box.box-trans { background-color: transparent; } .box.box-title-hlight { position: relative; } .box.box-title-hlight::after { display: block; content: ""; width: 8px; height: calc( var(--h1) - 4px ); border-radius: var(--normal-radius); position: absolute; left: 0; top: calc( 2px + var( --space-32) ); background-color: var( --primary-color); } .box.box-huge.box-title-hlight::after { display: block; content: ""; width: 8px; height: calc( var(--h1) - 4px ); border-radius: var(--normal-radius); position: absolute; left: 0; top: calc( 2px + var( --space-40) ); background-color: var( --primary-color); } /* CARDS */ .article-card { display: inline-block; width: 100%; padding: var(--space-24); background-color: var(--white-color); border-radius: var(--large-radius); cursor: pointer; position: relative; overflow: hidden; /*transition: var(--basic-move);*/ } .article-card .cover { display: block; width: calc(100% + var(--space-24)*2); height: 136px; object-fit: cover; border-radius: var(--large-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin: calc( 0px - var(--space-24) ); margin-bottom: 0; } .col-8 .article-card .cover { display: block; width: calc(100% + var(--space-24)*2); height: 206px; object-fit: cover; border-radius: var(--large-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin: calc( 0px - var(--space-24) ); margin-bottom: 0; } .article-card .content { min-height: 172px; } .col-8 .article-card .content { min-height: 103px; } .article-card.article-card.huge-card.member .content { min-height: 268px; } .article-card.article-card.huge-card.member .content p { -webkit-line-clamp: 8; } .article-card.without-cover .content { min-height: 172px; } .article-card .chips.level { position: absolute; top: 136px; right: var(--space-16); transform: translate(0% , -50%); } .col-8 .article-card .chips.level { position: absolute; top: 206px; right: var(--space-16); transform: translate(0% , -50%); } .article-card:hover { transform: scale(1.02); box-shadow: var(--large-shadow); } .article-card.member .chips-float-left { transform: translate(-120% , 0%); /*transition: var(--basic-move);*/ } .article-card.member:hover .chips-float-left { /*transform: translate(0% , 0%);*/ } .article-card.without-cover h2, .article-card.huge-card h2 { margin-top: var(--space-32); } .article-card.without-cover .level, .article-card.huge-card .level { top: var(--space-16); right: var(--space-16); transform: translate(0% , 0%); } .article-card.highlight { background-color: var(--primary-color); } .article-card.highlight h2, .article-card.highlight p, .article-card.highlight a { color: var(--white-color); } .article-card.highlight .category { color: var(--white-color); border-color: var(--white-color); } .article-card.highlight .category:hover { color: var(--primary-color); background-color: var(--white-color); } .article-card.highlight .small-text-gray { color: var(--primary-color-light-2); } .article-card .trustpilot img { width: 100%; max-width: 80px; } .article-card .article-master-cta { display: none; position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; /*transition: all 0.4s ease-in;*/ width: 100%; max-width: 416px; padding: var(--space-24); border-radius: var(--large-radius); } @supports (backdrop-filter: none) { .article-card .article-master-cta { backdrop-filter: contrast(40%) saturate(80%) brightness(200%) blur(32px); } } @supports not (backdrop-filter: none) { .article-card .article-master-cta { background-color: var(--white-color); } } .article-card.master:hover .article-master-cta { position: absolute; pointer-events: all; opacity: 1; } .article-card .article-master-cta p .material-icons { font-size: 20px; color: var(--green); margin-right: var(--space-4); } .article-card .article-master-cta p, .article-card .article-master-cta .more { font-size: var(--small-font); } .article-card .article-master-cta .grid { width: calc(100% + 64px); } .article-mini-card { display: inline-block; width: 100%; min-height: 226px; padding: var(--space-24); background-color: var(--white-color); border-radius: var(--large-radius); cursor: pointer; position: relative; overflow: hidden; /*transition: var(--basic-move);*/ } .article-mini-card .cover { display: block; width: calc(100% + var(--space-24)*2); height: 100px; object-fit: cover; border-radius: var(--large-radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin: calc( 0px - var(--space-24) ); margin-bottom: 0; } .article-mini-card:hover { transform: scale(1.02); box-shadow: var(--large-shadow); } .article-mini-card .card-info { position: absolute; left: 0; right: 0; bottom: 26px; padding: var(--space-16); background-color: var(--white-color); /*transition: var(--basic-move);*/ } .article-mini-card:hover .card-info .desc { height: 100px; } .article-mini-card .card-info .desc { position: relative; height: 0; overflow: hidden; /*transition: var(--basic-move);*/ } .article-mini-card .chips.level { position: absolute; left: var(--space-16); bottom: var(--space-16); } .article-mini-card .card-info .w-gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);; /*transition: var(--basic-move);*/ } @media all and (min-width: 680px) { .article-card.huge-card { display: grid; grid-auto-flow: column; grid-template-columns: calc(50% + var(--space-24)) calc(50% - var(--space-24)); gap: 0; } .article-card.huge-card.master { grid-template-columns: calc(70% + var(--space-24)) calc(30% - var(--space-24)); } .article-card.huge-card.member { grid-template-columns: calc(70% + var(--space-24)) calc(30% - var(--space-24)); } .article-card.huge-card.public { grid-template-columns: calc(70% + var(--space-24)) calc(30% - var(--space-24)); } .article-card.huge-card .cover { width: 100%; height: calc( 100% + var(--space-24)*2 ); border-radius: var(--large-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } .article-card .article-master-cta { display: block; } } /* HIGHLIGHT RESULTS */ .highlight-result-box { width: 100%; max-width: 160px; text-align: center; display: inline-block; padding: var(--space-24); border-radius: var(--large-radius); background-color: var(--primary-color-light-1); } .highlight-result-box h1, .highlight-result-box h3 { color: var(--primary-color-dark-1); } .highlight-result-box.highlight-result-green { background-color: var(--green-light); } .highlight-result-box.highlight-result-green h1, .highlight-result-box.highlight-result-green h3 { color: var(--green); } .highlight-result-box.highlight-result-red { background-color: var(--red-light); } .highlight-result-box.highlight-result-red h1, .highlight-result-box.highlight-result-red h3 { color: var(--red); } .highlight-result-box.highlight-result-yellow { background-color: var(--yellow-light); } .highlight-result-box.highlight-result-yellow h1, .highlight-result-box.highlight-result-yellow h3 { color: var(--yellow); } .highlight-result-box.fluid { max-width: 100%; } /* IMAGE */ .img-fluid { height: auto; max-width: 100%; } /* WIDGETS */ .widget-quote i { font-size: var(--h3); line-height: var(--h3-height); font-weight: 300; } .widget-file .file-name { text-decoration: underline; } .widget-general { display: grid; grid-auto-flow: column; grid-template-columns: 20% auto min-content; gap: 0; } .widget-general .cover { position: relative; } .widget-general .action { align-self: center; } .widget-general .cover img { position: absolute; top: calc(0px - var(--space-20) ); left: calc(0px - var(--space-24) ); width: 100%; height: calc( 100% + var(--space-20) * 2 ); border-top-left-radius: var(--normal-radius); border-bottom-left-radius: var(--normal-radius); object-fit: cover; } .widget-general.widget-general-minimal { grid-template-columns: auto min-content; } .widget-article-img { width: 100%; border-radius: var(--normal-radius); } .widget-article-img-signature img { width: 100%; display: block; border-top-left-radius: var(--normal-radius); border-top-right-radius: var(--normal-radius); } .widget-article-img-signature .signature { padding: var(--space-16) var(--space-24); background-color: var(--primary-color-light-1); border-bottom-left-radius: var(--normal-radius); border-bottom-right-radius: var(--normal-radius); } .widget-article-img-signature-float { position: relative; } .widget-article-img-signature-float img { width: 100% !important; display: block; border-radius: var(--normal-radius); } .widget-article-img-signature-float .signature { max-width: 80%; position: absolute; left: var(--space-24); bottom: var(--space-24); padding: var(--space-16) var(--space-24); background-color: var(--primary-color-light-1); border-radius: var(--normal-radius); z-index: 1; } .widget-article-img-gallery img { display: block; width: 100%; height: 160px; border-radius: var(--small-radius); object-fit: cover; margin-bottom: var(--space-16); } .widget .btn { font-size: 14px; font-weight: 800; padding: var(--space-8) var(--space-16); } .widget.widget-quiz img { width: 74px; height: 111px; margin-top: -32px; } .widget.widget-quiz .time span { color: var(--light-gray); font-size: 14px; } .widget.widget-quiz .time .material-icons { font-size: 20px; } .widget.widget-quiz .time b { font-size: 14px; color: var(--secondary-color); } .article-preview-link { position: relative; display: inline-block; } .article-preview-link .article-preview.box { display: inline-block; position: absolute; left: calc(50% - 95px); bottom: calc( var(--normal-font) + 12px ); pointer-events: none; opacity: 0; transform: scale(0.94); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /*transition: var(--basic-move);*/ } .article-preview-link:hover .article-preview.box { opacity: 1; pointer-events: all; transform: scale(1); box-shadow: var(--large-shadow); } .article-preview.box { display: inline-block; width: 186px; position: relative; padding-top: calc( 110px + var(--space-16) ) !important; box-shadow: var(--large-shadow); } .article-preview img { position: absolute; left: 0; top: 0; width: 100%; height: 110px; width: 100%; object-fit: cover; display: block; border-top-left-radius: var(--normal-radius); border-top-right-radius: var(--normal-radius); } .article-preview .cta, .article-preview-link .material-icons { color: var(--primary-color); } .article-preview .cta:hover, .article-preview-link:hover .material-icons { color: var(--primary-color-dark-1); } .article-preview .spike-wrap { position: absolute; width: 100%; height: 16px; bottom: -8px; left: 0; line-height: 0; text-align: center; } .article-preview .spike { display: inline-block; width: 16px; height: 16px; margin-top: -2px; transform: rotate(45deg); background-color: var(--white-color); border-radius: var(--small-radius); } /* HOVER INFO */ .hover-info { position: relative; } .hover-info .hover-info-box.box { display: none; position: absolute; left: calc(50% - 95px); bottom: calc( var(--normal-font) + 12px ); pointer-events: none; opacity: 1; transform: scale(0.94); /*transition: var(--basic-move);*/ width: 186px; box-shadow: var(--large-shadow); } .hover-info:hover .hover-info-box.box { opacity: 1; display: inline-block; pointer-events: all; transform: scale(1); box-shadow: var(--large-shadow); } .hover-info .hover-info-box img { position: absolute; left: 0; top: 0; width: 100%; height: 110px; width: 100%; object-fit: cover; display: block; border-top-left-radius: var(--normal-radius); border-top-right-radius: var(--normal-radius); } .hover-info .spike-wrap { position: absolute; width: 100%; height: 16px; bottom: -8px; left: 0; text-align: center; } .hover-info .spike { display: inline-block; width: 16px; height: 16px; margin-top: -2px; transform: rotate(45deg); background-color: var(--white-color); border-radius: var(--small-radius); } /* ATTENTION BOX */ .attention-box { display: inline-block; opacity: 0; position: fixed; bottom: var(--space-48); left: var(--space-48); border-radius: 60px 60px 60px 0px; background: var(--white-color); box-shadow: 40px 94px 66px rgba(0, 0, 0, 0.16); padding: var(--space-32); padding-bottom: var(--space-24); transition: var(--basic-move); transform-origin: bottom left; transform: scale(0) translate(-86px, 86px); z-index: 4; } .attention-box.yellow { background-color: var(--yellow); box-shadow: 40px 94px 66px rgba(172, 132, 13, 0.34); } .attention-box.primary { background-color: var(--primary-color); box-shadow: 40px 94px 66px rgba(33, 17, 122, 0.32); } .attention-box.dark-blue { background-color: var(--primary-color-dark-1); box-shadow: 40px 94px 66px rgba(33, 17, 122, 0.32); } .attention-box.dark { background-color: var(--secondary-color); box-shadow: 40px 94px 66px rgba(28, 30, 81, 0.32); } .attention-box.primary h2, .attention-box.dark-blue h2, .attention-box.dark h2, .attention-box.primary p, .attention-box.dark-blue p, .attention-box.dark p, .attention-box.primary b, .attention-box.dark-blue b, .attention-box.dark b { color: var(--white-color); } .attention-box.active { opacity: 1; display: inline-block; transform: scale(1) translate(0, 0); } .attention-box .content { width: 100%; max-width: 334px; } .attention-box .close { position: absolute; right: 0; top: 0; opacity: 0; transform: translate(10%, -5%) scale(1); transition: all 0.44s cubic-bezier(0.2, 1.88, 1, 1); } .attention-box.active .close { position: absolute; right: 0; top: 0; opacity: 1; transform: translate(10%, -5%) scale(1); } .attention-box .crea { align-self: flex-end; } .attention-box .crea img { max-width: 80px; margin-left: calc(0px - var(--space-16) ); margin-top: calc(0px - (var(--space-32) + 34px)); opacity: 0; transform: scale(0); transition: all 0.52s cubic-bezier(0.21, 1.22, 1, 1); } .attention-box.active .crea img { opacity: 1; transform: scale(1); } .attention-box .check-list .material-icons { color: var(--green); } .attention-box .check-list .material-icons { color: var(--green); } .attention-box.notify-attention .crea img { margin-right: -55px; max-width: 150px; margin-top: calc(0px - (var(--space-32) + 54px)); } .attention-box.social-media-attention .icon-wrap { width: 20px; height: 20px; margin: var(--space-4) 0; text-align: center; } .attention-box.social-media-attention .crea img { margin-top: calc(0px - (var(--space-32) + 54px)); } .attention-box.member-attention .crea img, .attention-box.pro-attention .crea img, .attention-box.master-attention .crea img, .attention-box.member-offer-attention .crea img, .attention-box.pro-offer-attention .crea img, .attention-box.master-offer-attention .crea img { max-width: 174px; margin-left: calc(-40px - var(--space-16) ); margin-right: -28px; margin-bottom: -28px; margin-top: calc(0px - (var(--space-32) + 54px)); } .attention-box.ea-attention .ea-logo { margin-top: calc(0px - var(--space-16)); margin-left: calc(0px - var(--space-16)); width: 84px; height: 84px; background-color: var(--primary-color-dark-1); padding: var(--space-16); border-radius: 64px; } .attention-box.ea-attention .ea-logo img { width: 100%; } .attention-box.about-tamas-attention img { width: 98px; margin-top: calc(0px - var(--space-16)); margin-left: calc(0px - var(--space-16)); } .attention-box.pro-offer-attention .chips, .attention-box.master-offer-attention .chips { font-weight: 800; border: 0; background-color: var(--yellow); font-size: var(--small-font); color: var(--secondary-color); } .attention-box.member-offer-attention .chips { font-weight: 800; border: 0; background-color: var(--secondary-color); font-size: var(--small-font); color: var(--yellow); } /* STEP CIRCLE */ .step-circle { display: inline-block; } .step-circle .step-item { display: inline-block; width: 36px; height: 36px; text-align: center; border: 1px solid var(--light-gray); border-radius: 64px; } .step-circle .step-item .step-number { line-height: 36px; } .step-circle .selected .step-number { color: var(--primary-color); } .step-circle .step-sepa { display: inline-block; margin: 0 var(--space-4); height: 1px; background-color: var(--light-gray); width: var(--space-20); } .step-circle .material-icons { display: none; } .step-circle .selected .step-item { border-color: var(--primary-color); } .step-circle .done .step-number { display: none; } .step-circle .done .step-item { background-color: var(--primary-color); border-color: var(--primary-color); line-height: 32px; } .step-circle .done .material-icons { display: inline-block; line-height: 32px; color: var(--white-color) } .step-circle .done + .col .step-sepa { background-color: var(--primary-color); } /* GENERAL WIDGETS */ .widget-box { margin: var(--space-24) 0; background-color: var(--white-color); border-radius: var(--large-radius); border: 1px solid var(--primary-color-light-2); padding: var(--space-32); } .widget-box .crea { width: 100%; max-width: 320px; } .widget-box .float-crea { width: 100%; } .widget-box.yellow { background-color: var(--yellow); border: 0; } .widget-box.dark-blue { background-color: var(--primary-color-dark-1); border: 0; } .widget-box.dark { background-color: var(--secondary-color); border: 0; } .widget-box.light-gradient { background: linear-gradient(45deg, #fff 0%, #e4e5f9 100%); } .widget-box.dark-blue b, .widget-box.dark-blue p, .widget-box.dark b, .widget-box.dark p { color: var(--white-color); } .widget-box p { font-size: 14px; line-height: 16px; } .widget-box.widget-member .crea, .widget-box.widget-pro .crea, .widget-box.widget-master .crea { max-width: 162px; margin-top: calc( -60px - var(--space-32) ); margin-bottom: calc( -8px - var(--space-32) ); } .widget-box.widget-member, .widget-box.widget-pro, .widget-box.widget-master { margin-top: calc( var(--space-12) + 60px ); padding-left: 0; } .widget-box.widget-about-tamas .crea-box { align-self: flex-end; } .widget-box.widget-about-tamas { padding-left: 0; } .widget-box.widget-about-tamas .crea-box img { width: 100%; margin-bottom: calc( 0px - var(--space-32) ); } .widget-box.widget-review p { font-style: italic; } .widget-box.widget-review .avatar-img { object-fit: cover; width: 36px; height: 36px; border-radius: 64px; border: 2px solid var(--white-color); } .widget-box.widget-review .rating-icon { vertical-align: middle; } .widget-box.widget-review .trustpilot_rate { vertical-align: middle; color: #1BB67A; font-weight: 800; } .widget-box.widget-affilate .crea { max-width: 132px; } .widget-box.widget-affilate .earn-box { border-left: 1px solid var(--primary-color-light-2); } .widget-box.widget-affilate .earn-box p { font-size: var(--small-font); line-height: var(--small-font-height); font-weight: 700; text-transform: uppercase; color: var(--primary-color-dark-1); } .widget-box.widget-affilate .earn-box .earn-amount { display: inline-block; border-radius: 64px; border: 2px solid var(--primary-color-dark-1); padding: var(--space-4) var(--space-16); font-size: 32px; line-height: 32px; font-weight: 800; color: var(--primary-color-dark-1); } .listing-view .col-8 .widget-box { margin-top: 0; padding: var(--space-32); } .listing-view .col-8 .widget-box p { font-size: var(--normal-font); line-height: var(--normal-font-height); } .listing-view .col-8 .widget-box .grid > div:nth-child(1) { justify-content: center; flex-direction: column; display: flex; flex: initial; max-width: 100%; width: 42%; } .listing-view .col-8 .widget-box .grid > div:nth-child(1) img { width: 100%; max-width: 224px; } .listing-view .col-8 .widget-box .grid > div:nth-child(2) { min-height: 316px; } .listing-view .col-8 .widget-box .crea { margin: 0; } .listing-view .col-8 .widget-box .grid > div:nth-child(3) { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .listing-view .col-8 .widget-box.about-ea-widget { background: var(--white-color); } .listing-view .col-8 .widget-box.about-ea-widget .grid > div:nth-child(1) img { max-width: 104px; } .listing-view .col-8 .widget-box.about-ea-widget { background: var(--white-color); } .listing-view .col-8 .widget-box.about-ea-widget .btn.btn-white { background-color: var(--primary-color-light-1); } .listing-view .col-8 .widget-box.widget-review { min-height: 422px; } .listing-view .col-8 .widget-box.widget-review > .grid > div:nth-child(1), .listing-view .col-8 .widget-box.widget-review > .grid > div:nth-child(2) { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .listing-view .col-8 .widget-box.widget-review .grid > div:nth-child(1) { display: block; } .listing-view .col-8 .widget-box.widget-review > .grid > div:nth-child(2) { margin-top: var(--space-16); } .listing-view .col-8 .widget-box.widget-review .grid > div:nth-child(1) img { max-width: 36px; } .listing-view .col-8 .widget-box.widget-review .grid > div:nth-child(1) img.rating-icon { max-width: 18px; display: inline-block; } .listing-view .col-8 .widget-box.widget-review .grid > div:nth-child(1) { width: auto; } .listing-view .col-8 .widget-box.widget-review .grid > div:nth-child(2) { min-height: auto; } .listing-view .col-8 .widget-box.widget-affilate .grid > div:nth-child(3) { display: none; } .listing-view .col-8 .widget-box.widget-affilate .grid > div:nth-child(4) { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .listing-view .col-4 .widget-box { margin-top: 0; min-height: 422px; padding: var(--space-24); } .listing-view .col-4 .widget-box > .grid > div:nth-child(1), .listing-view .col-4 .widget-box > .grid > div:nth-child(2), .listing-view .col-4 .widget-box > .grid > div:nth-child(3), .listing-view .col-4 .widget-box > .grid > div:nth-child(4) { -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; flex-basis: 100%; max-width: 100%; } .listing-view .col-4 .widget-box .grid .btn { margin-top: var(--space-12); } .listing-view .col-4 .widget-box .crea, .listing-view .col-4 .widget-box > .grid > div:nth-child(1) img { width: 100%; max-width: 160px; margin-top: calc(0px - var(--space-12) ); margin-bottom: var(--space-8); max-height: 120px; } .listing-view .col-4 .widget-box.widget-box.light-gradient { background: var(--white-color); } .listing-view .col-4 .widget-box.about-ea-widget > .grid > div:nth-child(1) img { max-height: 80px; margin-top: var(--space-8); margin-bottom: var(--space-16); } .listing-view .col-4 .widget-box .btn.btn-white { background-color: var(--primary-color-light-2); } .listing-view .col-4 .widget-box.widget-review .grid > div:nth-child(1) .avatar-img { width: 36px; } .listing-view .col-4 .widget-box.widget-review .grid > div:nth-child(1) .rating-icon { width: 18px; margin-bottom: 0; } .listing-view .col-4 .widget-box.widget-review > .grid > div:nth-child(2) { margin-top: var(--space-12); } .listing-view .col-4 .widget-box.widget-review > .grid p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .listing-view .col-4 .widget-box.widget-affilate p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .listing-view .col-4 .widget-box.widget-affilate .grid > div:nth-child(3) { display: none; } /* RATING ITEM */ .rating-item { border-radius: var(--normal-radius); background-color: var(--primary-color-light-2); padding: var(--space-24); /*transition: var(--basic-move);*/ } .rating-item p { font-size: 14px; font-weight: 300; line-height: 22px; font-style: italic; } .footer .rating-item .stars { /*transition: var(--basic-move);*/ } .rating-item .avatar-img { display: block; border: 2px solid var(--white-color); border-radius: 88px; width: 32px; height: 32px; vertical-align: middle; object-fit: cover; } /* COMMENT ELEMENTS */ .write-comment-block { position: relative; transition: var(--basic-move); padding-bottom: 32px; } .write-comment-block .input-wrapper { position: relative; } .write-comment-block input[type=text] { display: block; width: 100%; padding: var(--space-20) var(--space-24); padding-right: calc( var(--space-16)*2 + var(--space-24)*2 + 24px ); border-radius: var(--large-radius); border: 0; background-color: var(--primary-color-light-2); } .write-comment-block input[type=text]::-webkit-input-placeholder { font-style: italic; } .write-comment-block .icon-btn { position: absolute; top: 50%; right: var(--space-24); transform: translate(0% , -50%); } .write-comment-block:focus-within { transform: scale(1.01); } .write-comment-block:focus-within input:focus { transform: scale(1); } .write-comment-block .avatar-box { display: inline-block; position: absolute; left: var(--space-24); bottom: 0px; } .write-comment-block .avatar-box img, .comment-block .avatar-box img { display: inline-block; width: 42px; height: 42px; border-radius: 42px; border: 2px solid var(--white-color); object-fit: cover; vertical-align: bottom; } .comment-block .avatar-box { margin-left: var(--space-24); margin-top: 12px; } .comment-block { display: block; position: relative; /*transition: var(--basic-move);*/ } .comment-block p { display: inline-block; padding: var(--space-20) var(--space-24); border-radius: var(--large-radius); border: 0; background-color: var(--white-color); } .comment-block .avatar-box span { color: var(--light-gray); font-size: 14px; } .comment-block .avatar-box a b { font-size: 12px; vertical-align: text-bottom; color: var(--primary-color); } .comment-block .avatar-box a { font-size: 14px; } .comment-block .avatar-box a span, .comment-block .avatar-box b { color: inherit; } .comment-block .avatar-box .material-icons { font-size: 24px; } .comment-block .avatar-box .wrap { display: inline-block; } .nested-comment-block { padding-left: var(--space-64); } .nested-comment-block .comment-block p { background-color: var(--primary-color-light-2); } /* PAGER */ .pager .pages { display: inline-block; } .pager .pages span { display: inline-block; border-radius: var(--normal-radius); padding: var(--space-8); /*transition: var(--basic-move);*/ cursor: pointer; } .pager .pages span:hover { background-color: var(--primary-color-light-1); transform: scale(1.1); } .pager .pages .selected { background-color: var(--primary-color-light-1); font-weight: 800; } ul.pagination { list-style-type: none; text-align: center; margin: var(--space-16) auto; } ul.pagination > li { display: inline; margin: var(--space-4); padding: var(--space-8) var(--space-12); cursor: pointer; } ul.pagination > li::before { content: ""; } ul.pagination > li.selected { font-weight: 800; } ul.pagination > li:first-of-type, ul.pagination > li:nth-last-child(1), ul.pagination > li:nth-last-child(2) { border-radius: var(--normal-radius); color: var(--primary-color); background-color: var(--primary-color-light-2); font-weight: 800; /*transition: var(--basic-move);*/ } /* TAB BAR */ .tab-bar { display: flex; background-color: var(--primary-color-light-1); border-radius: 64px; } .tab-bar .tab-item { flex: 1; margin: var(--space-4); text-align: center; text-transform: uppercase; /*transition: var(--basic-move);*/ padding: var(--space-12) 0px; border-radius: 64px; cursor: pointer; } .tab-bar .tab-item:hover { background-color: var(--primary-color-light-2); } .tab-bar.tab-bar-darker { background-color: var(--primary-color-light-2); } .tab-bar.tab-bar-darker .tab-item:hover { background-color: var(--primary-color-light-3); } .tab-bar .selected, .tab-bar .tab-item.selected:hover { font-weight: 800; color: var(--primary-color); background-color: var(--white-color); } .tab-bar.tab-bar-small .tab-item { font-size: var(--h4); padding: var(--space-8) 0px; } /* COLLAPSE ITEM */ .collapse-item .head { padding: var(--space-24); background-color: var(--primary-color-light-1); border-radius: var(--large-radius); /*transition: var(--basic-move);*/ } .collapse-item .body { opacity: 0; height: 0; overflow: hidden; /*transition: var(--basic-move);*/ transition-property: height, opacity; border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); border: 1px solid var(--primary-color-light-1); } .collapse-item.active .body { opacity: 1; height: auto; padding: var(--space-16); } .collapse-item.active .head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* CODE SNIPPET */ .code-snippet { background-color: var(--primary-color-light-1); padding: var(--space-24); border-radius: var(--large-radius); border: 1px solid var(--primary-color); } .code-snippet pre { font-size: 14px; font-family: system-ui; overflow: auto; max-height: 220px; } /* DROPDOWN MENU */ .dropdown-menu { position: relative; } .dropdown-elements { position: absolute; top: 80%; left: 0%; width: 180px; background-color: var(--white-color); padding: var(--space-16); border-radius: var(--normal-radius); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); opacity: 0; pointer-events: none; /*transition: var(--basic-move);*/ } .dropdown-elements a { display: inline-block; width: 100%; color: var(--primary-color-dark-1); padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid var(--primary-color-light-2); text-transform: none; } .dropdown-elements a:hover { color: var(--secondary-color); font-weight: 600; } .dropdown-elements a:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .dropdown-menu:hover .dropdown-elements { display: inline-block; top: 100%; opacity: 1; box-shadow: var(--large-shadow); pointer-events: all; } /* LOGIN REQUIRED */ .login-required { padding: var(--space-8) var(--space-16); border-radius: var(--large-radius); background-color: var(--green-light); } .login-required .material-icons { color: var(--green); } /* CHARTS */ .circle-percent-box { position: relative; display: inline-block; } .circle-percent-box h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* HEADER */ .header { padding: var(--space-16) 0; background: var(--primary-color); /*transition: var(--basic-move);*/ } .header.header-fixed { position: fixed; left: 0; top: 0; width: 100%; z-index: 1008; display: table; } .header.header-fixed.fixed-filter-active { z-index: 102; } .header.header-fixed.fixed-filter-active .container .grid:first-of-type { display: none; } .header.header-fixed.fixed-filter-active .icon-btn { margin-bottom: calc(0px - var(--space-8)); } .header.header-fixed.fixed-filter-active .icon-btn span { color: var(--primary-color); } .header.header-filter-section { display: none; padding-top: calc( var(--space-16)*2 + 44px ); } .header .logo { width: 100%; max-width: 160px; display: inline-block; vertical-align: middle; margin-right: var(--space-24); } .header .logo-box { flex: 0.5; } .header .menu-item { display: inline-block; color: var(--primary-color-light-2); font-weight: 300; text-transform: uppercase; margin-right: var(--space-24); vertical-align: middle; margin-top: 4px; } .header .menu-item span, .header .mobile-menu-icon span { color: var(--primary-color-light-2); font-weight: 300; } .header .menu-item:hover, .header .menu-item:hover span, .header .mobile-menu-icon:hover span { color: var(--white-color); cursor: pointer; } .header h2 { color: var(--white-color); text-align: center; font-size: 34px; line-height: 38px; } .header .main-title .slide-title-item { /*transition: opacity 0.8s ease-in;*/ height: 0; overflow: hidden; opacity: 0; color: var(--white-color); text-align: center; font-size: 34px; line-height: 38px; } .header .main-title .slide-title-item.active { opacity: 1; height: auto; } .listing-view .header .filter-open-icon { opacity: 0; pointer-events: none; /*transition: var(--basic-move);*/ } .header.scroll-active { box-shadow: var(--large-shadow); } .header.scroll-active .filter-open-icon { opacity: 1; pointer-events: all; } .header .filter-box span, .header .sort-box span, .header.header-filter-open span, .header .sort-box select { color: var(--white-color); } .header .filter-box .input-category { width: 198px; } .header .filter-box .input-level { width: 136px; } .header .filter-box .btn.btn-white { width: 140px; } /* FOOTER */ .footer { background-color: var(--primary-color-dark-2); } .footer h2, .footer h3, .footer b, .footer p { color: var(--white-color); } .footer h2 { font-size: 36px; line-height: 46px; } .footer .cta-title { font-size: 36px; line-height: 46px; color: var(--white-color); font-weight: 800; } .footer .sub-heading { font-size: var(--h3); line-height: var(--h3-height); font-weight: 800; color: var(--white-color); } .footer a { color: var(--primary-color-light-3); } .footer .footer-cta { background-color: var(--primary-color-transparent); } .footer .footer-cta .material-icons { color: var(--green) } .footer .footer-links .link-boxes a { display: inline-block; margin-top: var(--space-4); /*transition: var(--basic-move);*/ } .footer .footer-links .link-boxes a:hover, .footer .footer-copyright a:hover { color: var(--primary-color-light-4); } .footer .footer-links .link-boxes h3 { font-weight: 800; } .footer .footer-logo { max-width: 216px; } .footer .social-icons svg { margin: var(--space-8); } .footer .social-icons { margin: 0 calc( 0px - var(--space-8) ); } .footer .social-icons svg path { fill: var(--primary-color-light-3); /*transition: var(--basic-move);*/ } .footer .social-icons a:hover path { fill: var(--primary-color-light-4); } .footer .footer-copyright .sepa { display: block; width: 100%; height: 1px; background-color: var(--primary-color-light-3); opacity: 0.24; } .footer .footer-copyright p { color: var(--primary-color-light-2); } .footer .footer-copyright .text-sepa { color: var(--primary-color-light-2); opacity: 0.24; } .footer .footer-copyright p { display: inline-block; } .footer .footer-copyright .mwl-crea img { width: 64px; display: inline-block; vertical-align: middle; margin-right: -24px; margin-top: -2px; } .footer .rating-item { background-color: rgba(255, 255, 255, 0.12); } /* COOKIE BAR */ .cookie-bar { position: fixed; left: 0; bottom: 0; width: 100%; background-color: var(--primary-color-light-2); z-index: 2; } .cookie-bar p, .cookie-bar p b, .cookie-bar p a { font-size: 13px; line-height: 15px; } /* MODAL WINDOW */ .modal { position: fixed; min-width: 300px; max-width: calc(100% - (var(--space-24) * 2) ); top: 50%; left: 50%; -ms-transform: scale(1) translate(-50%, -50%); transform: scale(1) translate(-50%, -50%); background-color: var(--primary-color-light-1); border-radius: var(--large-radius); padding: var(--space-32); box-sizing: border-box; z-index: 100; opacity: 1; transition: var(--basic-move); transform-origin: left; max-height: 100vh; overflow-y: auto; } .modal.invisible { -ms-transform: scale(0.8) translate(-50%, -50%); transform: scale(0.8) translate(-50%, -50%); opacity: 0; } .modal.modal-fix-width { width: 100%; max-width: 480px; } .modal.modal-fix-width-small { width: 100%; max-width: 400px; } .modal.modal-fix-width-large { width: 100%; max-width: 840px; } .modal#modal_register_checkout .grecaptcha-badge { margin-left: -125px; } /* OVERLAY */ .overlay { opacity: 1; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--overlay-color); z-index: 99; transition: var(--basic-move); } .overlay.invisible { background-color: rgba(0,0,0,0.00); pointer-events: none; } /* TOB BAR */ .top-bar { position: fixed; max-width: 640px; width: 100%; top: -260px; left: 50%; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); background-color: var(--primary-color-light-1); padding: var(--space-24); box-sizing: border-box; box-shadow: var(--large-shadow); z-index: 1009; color: var(--secondary-color); border-radius: var(--large-radius); transition: all 0.4s ease-in; } .top-bar.active { top: 6%; transition: var(--basic-move); } .top-bar .content { display: inline-block; vertical-align: text-top; width: calc(100% - 64px); box-sizing: border-box; } .top-bar .custom-content:empty { display:none; } .top-bar .custom-content { width: 100%; display: inline-block; padding-top: var(--space-8); } .top-bar i.icon { margin-right: var(--space-8); color: var(--primary-color-light-3); } .top-bar i.close { position: absolute; top: calc(50% - 18px); right: var(--space-16); } .top-bar.red, .top-bar.red i.close { background-color: var(--red-light); } .top-bar.red i.icon, .top-bar.red .content, .top-bar.red i.close { color: var(--red); } /* LESSON CTA BOX */ .lesson-cta-container { position: relative; } .lesson-cta-heading { font-size: var(--h1); line-height: var(--h1-height); font-weight: 800; } .lesson-cta-container.active-cta-box .lesson-cta-box { position: fixed; bottom: 0; } .lesson-cta-box { position: absolute; top: auto; left: -8px; width: calc(100% + 16px); text-align: center; background: var(--lesson-cta-gradient); padding-top: 40vh; padding-bottom: var(--space-64); z-index: 4; } .lesson-cta-container.active-cta-box .lesson-cta-box.reached-bottom { position: absolute; bottom: 0px; left: -8px !important; } .lesson-cta-box .sub-info { display: inline-block; max-width: 460px; } .lesson-cta-box .offer-box { width: 100%; max-width: 460px; text-align: left; margin-left: auto; margin-right: auto; } .lesson-cta-box .offer-box .material-icons { color: var(--green); } .lesson-cta-box .offer-box p { font-size: var(--small-font); line-height: var(--small-font-height); } #lesson-cta-start { position: relative; } #lesson-cta-start .blur { position: absolute; left: calc( 0px - var(--space-24) ); top: 0; width: calc( 100% + var(--space-24)*4 ); margin-left: calc( 0px - var(--space-24) ); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2; } @supports not ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) { #lesson-cta-start .blur { background: linear-gradient(0deg, #F4F5FC 92%, #f4f5fc00 100%); } } /* LISTING VIEW */ .listing-view .header.header-filter-section { display: block; } .listing-view .header.header-fixed { background: transparent; } .listing-view .header { background: var(--primary-color-gradient); } .listing-view .header.header-fixed.scroll-active { background: var(--primary-color); } .listing-view .article-listing { margin-top: calc( 0px - var(--space-40) ); } .listing-view .article-listing .article-card { margin-bottom: var(--space-24); } /* ARTICLE VIEW */ .article-view { padding-top: calc( var(--space-16)*2 + 44px ); } .sub-section-title { font-size: var(--h2); line-height: var(--h2-height); font-weight: 800; } .article-view .titles { position: relative; padding-left: calc( 4px + var(--space-8) ); } .article-view .titles .selected { font-weight: 800; color: var(--primary-color); } .article-view .titles .progress-line { position: absolute; left: -4px; top: 0; width: 4px; height: 100%; border-radius: var(--small-radius); background-color: var(--primary-color-light-1); z-index: 1; } .article-view .titles .progress-line .actual-progress { position: absolute; top: 0; left: 0; width: 100%; border-radius: var(--small-radius); background-color: var(--primary-color); /*transition: var(--basic-move);*/ z-index: 2; } .article-view .titles p { font-size: var(--small-font); margin-top: var(--space-4); } .article-view .titles p:hover { font-weight: 800; cursor: pointer; color: var(--primary-color); /*transition: var(--basic-move);*/ } .article-view .article .article-top-options .social-icons { display: inline-block; vertical-align: middle; } .article-view .article .article-top-options .social-icons svg { margin: var(--space-8); } .article-view .article .article-top-options .social-icons a:hover { fill: var(--primary-color-dark-1); } .article-view .article .article-top-options .social-icons path { fill: var(--primary-color); } .article-view .article .article-top-options .material-icons { vertical-align: top; color: var(--primary-color); margin: var(--space-8); font-size: 20px; } .article-view .article .article-top-options .hover-info .hover-info-box.box { bottom: calc( var(--normal-font) + 28px ); } .article-view .article-info p { display: inline-block; } .article-view .article-info p span { font-size: 14px; color: var(--light-gray); } .article-view .article-info p b { font-size: 14px; font-weight: 600; } .article-view .popular-items { padding-bottom: calc( var(--space-20) - var(--space-8) ); } .article-view .popular-items .popular-item { display: inline-block; margin-bottom: var(--space-8); margin-right: var(--space-24); } .article-view .popular-items .popular-item img { width: 32px; height: 32px; background: var(--primary-color-gradient); border-radius: 64px; padding: var(--space-4); vertical-align: middle; margin-right: var(--space-4); /*transition: var(--basic-move);*/ } .article-view .popular-items .popular-item:hover img { opacity: 1 !important; } .article-view .article .side-wrapper { position: fixed; top: auto; left: auto; width: calc(25% - var(--space-24)); max-width: calc( var(--desktop-content-width) * 0.25 - var(--space-32) ); } .article-view .article .stop-left-side-float { position: relative; } .article-view .article .stop-left-side-float .side-wrapper { position: absolute; bottom: 0; width: 100%; } .article-view .article-content .article-body { --normal-font: 18px; --normal-font-height: 28px; letter-spacing: 0.2px; font-weight: 300; } .artible-body li { overflow-wrap: anywhere !important; } .article-body img:not(.article-preview-img) { width: 581px; height: 304px; aspect-ratio: auto 581/304; object-fit: contain } .article-view .videowrap .play-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(244, 245, 252, 0.86); z-index: 1; } .article-view .videowrap .play-overlay .material-icons { position: absolute; left: 50%; top: 50%; font-size: 32px; transform: translate(-50%, -50%); z-index: 2; background: var(--primary-color-gradient); padding: var(--space-12); border-radius: 64px; color: var(--white-color); box-shadow: var(--primary-shadow); transition: var(--basic-move); } .article-view .videowrap { position: relative; cursor: pointer; } .article-view .videowrap:hover .play-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(244, 245, 252, 0.86); z-index: 1; } .article-view .videowrap:hover .play-overlay .material-icons { position: absolute; left: 50%; top: 50%; font-size: 32px; transform: translate(-50%, -50%); z-index: 2; background: var(--primary-color-gradient); padding: var(--space-12); border-radius: 64px; color: var(--white-color); box-shadow: var(--primary-shadow); /*transition: var(--basic-move);*/ } .article-view .videowrap:hover .play-overlay .material-icons::after { display: block; content: ""; width: calc( var(--space-12)*2 + 46px ); height: calc( var(--space-12)*2 + 46px ); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center; border-radius: 64px; border: 2px solid var(--primary-color); animation: video_pulse 1600ms infinite linear; } .article-view .videowrap:hover .play-overlay .material-icons:hover { box-shadow: var(--small-shadow); transform: scale(0.98) translate(-50%, -50%); } .article-view .videowrap:hover .play-overlay .material-icons:hover::after { opacity: 0 !important; } .article-view:not(.include-lesson) h2:before, .article-view:not(.include-lesson) .anchor { display: block; content: " "; margin-top: -100px; height: 100px; visibility: hidden; pointer-events: none; } /* LOGIN VIEW */ .login-view .login-container > .col { min-height: 100vh; } .login-view .crea-side.col, .login-view .data-side.col { padding: var(--space-24); } .login-view .crea-side .offer-info .material-icons { color: var(--green) } .login-view .crea-side .offer-info p { font-size: var(--small-font); } .login-view .crea-side .rating-box { max-width: 460px; } .login-view .crea-side .logo { max-width: 132px; } .login-view .crea-side .crea { height: 36vh; margin: var(--space-24) 0; } .login-view .crea-side .rating-item { background-color: transparent; } .login-view .data-side { background-color: var(--white-color); } .login-view .data-side .policy-box { max-width: 320px; margin-left: auto; margin-right: auto; } /* PROFILE VIEW */ .profile-view { padding-top: calc( var(--space-16)*2 + 44px ); } .profile-view .profile-menu { min-width: 240px; } .profile-view .profile-menu .profile-item { padding: var(--space-12) var(--space-16); border-radius: var(--large-radius); transition: var(--basic-move); cursor: pointer; } .profile-view .profile-menu .profile-item h4 { display: inline-block; vertical-align: middle; margin-left: var(--space-12); } .profile-view .profile-menu .profile-item span { color: var(--primary-color-light-3); } .profile-view .profile-menu .profile-item.selected, .profile-view .profile-menu .profile-item:hover { background-color: var(--primary-color-light-2); } .profile-view .profile-menu .profile-item.selected h4, .profile-view .profile-menu .profile-item.selected span { color: var(--primary-color); } .profile-view .profile-menu .profile-item.selected h4 { font-weight: 800; } .profile-view .profile .avatar-img { position: relative; display: inline-block; } .profile-view .profile .avatar-img img { display: inline-block; border-radius: 88px; width: 104px; height: 104px; vertical-align: middle; object-fit: cover; } .profile-view .profile .avatar-img .material-icons { position: absolute; bottom: 0; right: 0; transform: translate(20%, 0); color: var(--white-color); background-color: var(--primary-color); padding: var(--space-8); display: inline-block; border: 2px solid var(--primary-color-light-1); border-radius: 88px; vertical-align: middle; object-fit: cover; transition: var(--basic-move); } .profile-view .profile .avatar-img:hover .material-icons { transform: translate(20%, 0) scale(1.06); background-color: var(--primary-color-dark-1); } .profile-view .profile .packages .package-item { border-radius: var(--large-radius); border: 1px solid var(--primary-color-light-1); cursor: pointer; transition: var(--basic-move); } .profile-view .profile .packages .package-item:hover { border-color: var(--primary-color-light-3); } .profile-view .profile .packages .package-item h4 { font-weight: 600; } .profile-view .profile .packages .package-item .price { border-bottom-left-radius: calc(var(--large-radius) - 3px); border-bottom-right-radius: calc(var(--large-radius) - 3px); background-color: var(--primary-color-light-1); padding: var(--space-8) 0; } .profile-view .profile .packages .package-item .price span { font-size: var(--small-font); } .profile-view .profile .packages .public path { fill: var(--primary-color); } .profile-view .profile .packages .member path { fill: var(--yellow); } .profile-view .profile .packages .master path { fill: var(--primary-color-dark-2); } .profile-view .profile .packages .package-item.selected { border: 2px solid var(--primary-color); } .profile-view .profile .packages .package-item.selected .price { background-color: var(--primary-color); } .profile-view .profile .packages .package-item.selected .price p, .profile-view .profile .packages .package-item.selected .price span { color: var(--white-color); } .profile-view .profile .packages .package-item .price { border-bottom-left-radius: calc(var(--large-radius) - 2px); border-bottom-right-radius: calc(var(--large-radius) - 2px); background-color: var(--primary-color-light-1); padding: var(--space-8) 0; } .profile-view .profile .addon-item { padding: var(--space-12) var(--space-16); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .profile-view .profile .addon-item .material-icons { color: var(--primary-color); font-size: 32px; } .profile-view .pay-box img { vertical-align: middle; margin-top: -2px; } .profile-view .billing-info { border: 1px solid var(--primary-color-light-2) } .profile-view .coupons .coupon-sepa { position: relative; border-right: 2px dashed var(--primary-color-light-2); } .profile-view .coupons .coupon-sepa .material-icons { position: absolute; top: 50%; right: var(--space-8); transform: translate(0, -50%); color: var(--primary-color-light-3); } .profile-view .coupons .coupon-body .col:nth-of-type(3) { font-size: 14px; } .profile-view .coupons .coupon-details .material-icons { color: var(--light-gray); } .profile-view .affiliate-program .affiliate-crea { margin-top: calc( 0px - var(--h1-height) - var(--space-16) ) } .profile-view .affiliate-program .affiliate-offers .head { border-top-left-radius: var(--normal-radius); border-top-right-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); padding: var(--space-16); } .profile-view .affiliate-program .affiliate-offers .head img { width: auto; max-height: 32px; } .profile-view .affiliate-program .affiliate-offers .body { font-size: 14px; padding: var(--space-16); border: 1px solid var(--primary-color-light-2); border-top: 0; border-bottom-left-radius: var(--normal-radius); border-bottom-right-radius: var(--normal-radius); } .profile-view #edit_profile a .material-icons, .profile-view #edit_profile_img a .material-icons { color: var(--primary-color); } .profile-view #edit_profile a:hover .material-icons, .profile-view #edit_profile_img a:hover .material-icons { color: var(--primary-color-dark-1); } .profile-view #edit_profile_img .img-upload { padding-top: 24%; width: 340px; height: 340px; background-size: cover; border-radius: 380px; background-color: var(--primary-color-light-2); } .profile-view #edit_profile_img .img-upload.selected-img .prev-icon, .profile-view #edit_profile_img .img-upload.selected-img h2 { opacity: 0; transition: var(--basic-move); } .profile-view #edit_profile_img .img-upload h2 { color: var(--primary-color-light-3); } .profile-view #edit_profile_img .btn-white:hover { background-color: var(--primary-color-light-1); } .profile-view .invoices .invoice-table-head { padding: 0 var(--space-20); } .profile-view .invoices .invoice-table-body .box { padding-top: var(--space-16); padding-bottom: var(--space-16); } .profile-view .api-key .api-item .key-icon { color: var(--primary-color-light-3); } .profile-view .api-key .api-item .comment { color: var(--light-gray); } .profile-view .automations .automation-crea img { width: 198px; margin-top: calc(0px - var(--h1-height) - var(--space-16) ); } .profile-view .automations .report-download-box { padding: var(--space-8) var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .profile-view .automations .domain-names { height: calc(340px - 2px - var(--space-12)*2 - var(--space-16) - var(--normal-font-height) ) ; overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .profile-view .automations .domain-names input { padding-left: var(--space-12); border: 0; } .profile-view .automations .domain-names input:focus { transform: none; box-shadow: none; } .profile-view .automations .report-wrap { height: 340px; overflow: auto; } .profile-view .data-usage { position: relative; } .profile-view .data-usage .account-type { padding: var(--space-32); border: 1px solid var(--primary-color-light-2); border-radius: var(--large-radius); } .profile-view .data-usage .account-type img { display: block; margin: 0 auto; } .profile-view .data-usage .usage-item { padding-bottom: var(--space-16); margin-bottom: var(--space-32); border-bottom: 1px solid var(--primary-color-light-2); } .profile-view .data-usage .usage-item:last-of-type { border-bottom: 0; margin-bottom: 0; } .profile-view .data-usage .usage-item .amount, .profile-view .data-usage .usage-item .used-amount { font-size: 32px; line-height: 40px; font-weight: 600; } .profile-view .data-usage .usage-item .used-amount { color: var(--primary-color); } .profile-view .data-usage .usage-item.alert .used-amount { color: var(--red); } .profile-view .data-usage .usage-item .icon-wrap { position: relative; } .profile-view .data-usage .usage-item .icon-wrap .material-icons { font-size: 32px; padding: var(--space-24); border-radius: 68px; background-color: var(--primary-color-light-2); } .profile-view .data-usage .usage-item .icon-wrap .progress-ring { stroke-width: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); } .profile-view .data-usage .usage-item .icon-wrap .progress-ring-circle { stroke-dasharray: 10 20; stroke: var(--primary-color); transition: var(--basic-move); stroke-linecap: round; } .profile-view .data-usage .usage-item.alert .icon-wrap .progress-ring-circle { stroke: var(--red); } .profile-view .data-usage .usage-item .upgrade-box { padding: var(--space-16); } .profile-view .data-usage .floating-offer { position: fixed; bottom: -240px; background-color: var(--primary-color); border-radius: var(--large-radius); padding: var(--space-16) var(--space-24); box-shadow: var(--large-shadow); transition: bottom 0.36s ease-out; z-index: 12; } .profile-view .data-usage .floating-offer.active { bottom: var(--space-16); } .profile-view .data-usage .floating-offer p, .profile-view .data-usage .floating-offer span { color: var(--primary-color-light-2); font-weight: 300; } .profile-view .data-usage .floating-offer .monthly-price { font-size: var(--h2); } .profile-view .data-usage .floating-offer .monthly-price b { font-size: 36px; line-height: 40px; font-weight: 700; color: var(--yellow); } .profile-view .data-usage .floating-offer .onetime-price b { color: var(--yellow); } #dpa_modal { width: 100%; max-width: 720px; padding: 0; z-index: 999999; } #dpa_modal .dpa-content-wrap { padding: var(--space-32); max-height: 96vh; overflow: auto; } .tool-box { white-space: initial; } #dpa_modal h1, #dpa_modal h1 span { font-size: 32px; line-height: 40px; } #dpa_modal h1 span { color: var(--primary-color); } #dpa_modal .tab-bar { background-color: var(--primary-color-light-2); } #dpa_modal .dpa-content { font-size: var(--small-font); line-height: var(--small-font-height); padding-bottom: calc( (var(--normal-font-height) + var(--space-12) * 4) * 2 + var(--space-32) ); } #dpa_modal .accept-box { position: absolute; width: 100%; left: 0; bottom: 0; padding: var(--space-32); z-index: 3; } #dpa_modal .bottom-gradient { position: absolute; width: 100%; height: 160px; pointer-events: none; background: linear-gradient(0deg, #F4F5FC 40%, #f4f5fc00 100%); left: 0; bottom: 0; z-index: 2; } /* QUIZ */ #modal_quiz { width: 100%; max-width: 580px; } #modal_quiz .step { position: relative; display: inline-block; } #modal_quiz .step span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #modal_quiz .quiz-progress-ring { stroke-width: 6px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); } #modal_quiz .quiz-progress-circle { stroke-dasharray: 10 20; stroke: var(--green); transition: var(--basic-move); stroke-linecap: round; } #modal_quiz .answer-box { justify-content: space-between; } #modal_quiz .answer-box .answer-item { position: relative; padding: var(--space-16) var(--space-24); padding-left: calc( var(--normal-font) + var(--space-8)*4 ); border-radius: var(--large-radius); border: 1px solid var(--primary-color); transition: var(--basic-move); margin-bottom: var(--space-16); margin-top: 0; flex-basis: calc(50% - var(--space-8) ); max-width: 100%; } #modal_quiz .answer-box .answer-item:hover { background-color: var(--primary-color); } #modal_quiz .answer-box .answer-item:hover span { color: var(--white-color); } #modal_quiz .answer-box .answer-item:hover span { background-color: var(--primary-color-dark-1); } #modal_quiz .answer-box .answer-item span { position: absolute; color: var(--white-color); background-color: var(--primary-color); padding: var(--space-8); border-radius: var(--normal-radius); left: var(--space-8); top: 50%; transform: translate(0, -50%); text-transform: uppercase; } #modal_quiz .result .quiz-result-ring { stroke-width: 6px; } #modal_quiz .result .result-ring { display: inline-block; position: relative; } #modal_quiz .result .total-score h4 { font-size: var(--h3); line-height: var(--h3-height); text-transform: uppercase; font-weight: 700; } #modal_quiz .result .result-ring .bg { stroke: var(--primary-color-light-2); transition: var(--basic-move); stroke-linecap: round; } #modal_quiz .result .result-ring h2 { position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); display: inline-block; } #modal_quiz .result .result-ring span { display: block; font-weight: 300; font-size: var(--h1); line-height: var(--h1-height); } #modal_quiz .result .quiz-result-circle { stroke-dasharray: 10 20; stroke: var(--green); transition: var(--basic-move); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; } #modal_quiz .result .tab-item.selected span { color: var(--primary-color); } #modal_quiz .result .result-item { margin-top: var(--space-16); padding-bottom: var(--space-16); border-bottom: 1px solid var(--primary-color-light-2); } #modal_quiz .result .result-item .result-good .material-icons { font-size: 32px; color: var(--green); } #modal_quiz .result .result-item .result-wrong .material-icons { font-size: 32px; color: var(--red); } #modal_quiz.good-result .bad-score-text { display: none; } #modal_quiz.bad-result .result .quiz-result-circle { stroke: var(--red); } #modal_quiz.bad-result .good-score-text { display: none; } /* AFFILIATE VIEW */ .affiliate-view { padding-top: calc( var(--space-16)*2 + 44px ); } .affiliate-view .account-info .avatar-img { display: inline-block; border-radius: 88px; width: 86px; height: 86px; vertical-align: middle; object-fit: cover; border: 2px solid var(--primary-color-light-1); } .affiliate-view .account-info h2, .affiliate-view .account-info h2 span { font-size: 34px; font-weight: 700; } .affiliate-view .account-info h3 { font-weight: 300; } .affiliate-view #balance_chart { width: calc(100% + var(--space-40)*2 ); margin-left: calc(0px - var(--space-40)); margin-right: calc(0px - var(--space-40)); } .affiliate-view .account-balance .balance-data-prev { overflow: auto; max-height: 128px; } .affiliate-view #pay_out .head-wrapper { background-color: var(--primary-color-dark-2); margin: calc(0px - var(--space-32)); margin-bottom: 0; padding: var(--space-32); padding-bottom: calc( var(--space-32) + var(--space-8) ); } .affiliate-view #pay_out .head-wrapper h1, .affiliate-view #pay_out .head-wrapper h2, .affiliate-view #pay_out .head-wrapper h3, .affiliate-view #pay_out .head-wrapper p { color: var(--white-color); } .affiliate-view #pay_out .tab-bar { background-color: var(--primary-color-light-2); margin-top: calc(0px - var(--space-24)); } .affiliate-view .recommend-us .tab-bar img { height: 28px; vertical-align: middle; } .affiliate-view .recommend-us .social-icons svg { margin: var(--space-8); } .affiliate-view .recommend-us .social-icons { margin: 0 calc( 0px - var(--space-8) ); } .affiliate-view .recommend-us .social-icons svg path { fill: var(--primary-color); transition: var(--basic-move); } .affiliate-view .recommend-us .social-icons a:hover path { fill: var(--primary-color-dark-1); } .affiliate-view .recommend-us .banner-preview { position: relative; background-color: var(--primary-color-light-2); border: 2px dashed var(--primary-color-light-3); } .affiliate-view .recommend-us .banner-preview h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--white-color); } .affiliate-view #balance_min_chart { width: 100%; } .affiliate-view #min_pay_out .min-pay-line { height: 1px; border-top: 2px dashed var(--primary-color); } .affiliate-view #min_pay_out .minimum-pay-out-level { transform: translate(0,50%); } .affiliate-view #min_pay_out .minimum-pay-out-level .chips b { color: var(--primary-color); } .affiliate-view #balance_modal { width: 100%; max-width: 680px; } .affiliate-view #balance_modal_chart { width: calc(100% + var(--space-32)*2); margin-left: calc(0px - var(--space-32)); } .affiliate-view #balance_modal .trend-up { color: var(--green); } .affiliate-view #balance_modal .trend-down { color: var(--red); } /* CHECKOUT VIEW */ .checkout-view { padding-top: calc( var(--space-16)*2 + 44px ); } .checkout-view .title h1 span { display: block; font-size: var(--h1); line-height: var(--h1-height); font-weight: 300; color: var(--secondary-color) } .checkout-view .title h1 { color: var(--primary-color); } #modal_success_payment p, #modal_failed_payment p { max-width: 340px; margin-left: auto; margin-right: auto; } #modal_success_payment .middle-crea { position: relative; text-align: center; } #modal_success_payment .middle-crea .material-icons { font-size: 84px; color: var(--primary-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #modal_failed_payment .middle-crea .material-icons { font-size: 74px; color: var(--red); border-radius: 84px; border: 5px solid var(--red); } #modal_failed_payment h2 { color: var(--red); } /* PRICING VIEW */ .pricing-view { padding-top: calc( var(--space-16)*2 + 44px ); } .pricing-view .head-info { max-width: 600px; } .pricing-view .tab-bar.period { max-width: 300px; background-color: var(--primary-color-light-2); } .pricing-view .icon { display: inline-block; background-color: var(--primary-color-light-1); border-radius: 64px; text-align: center; height: 58px; width: 58px; padding-top: 16px; transition: var(--basic-move); } .pricing-view .price-table .sepa { display: block; width: 36px; height: 4px; border-radius: 2px; } .pricing-view .price-table .grid { margin-left: -2px; margin-right: -2px; } .pricing-view .price-table .grid > .col { padding: 0 2px 0 2px; } .pricing-view .price-table .grid .box { transition: var(--basic-move); padding-top: var(--space-16); } .pricing-view .price-table .grid .box:hover { box-shadow: var(--large-shadow); transform: scale(1.04); cursor: pointer; } .pricing-view .price-box { margin-left: calc(0px - var(--space-8)); margin-right: calc(0px - var(--space-8)); margin-bottom: calc(0px - var(--space-8)); padding: var(--space-8); border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } .pricing-view .price-box h2 { color: var(--white-color); } .pricing-view .price-box h2 span { font-size: var(--small-font); font-weight: 600; color: var(--white-color); } .pricing-view .price-table p { font-size: 13px; line-height: 15px; font-weight: 300; margin-bottom: var(--space-16); } .pricing-view .price-table b { font-size: 13px; line-height: 15px; } .pricing-view .icon svg path { transition: var(--basic-move); } .pricing-view .public .icon svg path { fill: var(--primary-color); } .pricing-view .public .sepa, .pricing-view .public .price-box { background-color: var(--primary-color); } .pricing-view .price-table .public .box:hover .icon svg path { fill: var(--white-color); } .pricing-view .price-table .public .box:hover .icon { background-color: var(--primary-color); } .pricing-view .member .icon svg path, .pricing-view .pro .icon svg path { fill: var(--yellow); transition: var(--basic-move); } .pricing-view .member .sepa, .pricing-view .pro .sepa, .pricing-view .member .price-box, .pricing-view .pro .price-box { background-color: var(--yellow); } .pricing-view .public .price-box { margin-top: calc( var(--space-16) + var(--normal-font-height) + var(--space-8) + var(--space-12)*2 ); } .pricing-view .member { position: relative; } .pricing-view .member .member-plus-details { opacity: 0; } .pricing-view .member .middle { position: absolute; width: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--white-color); padding: var(--space-8); } .pricing-view .member .middle p { margin-bottom: 0; } .pricing-view .member .price-box h2 span, .pricing-view .pro .price-box h2 span { color: var(--secondary-color); } .pricing-view .member .price-box h2, .pricing-view .pro .price-box h2 { color: var(--secondary-color); } .pricing-view .member .price-box .btn, .pricing-view .pro .price-box .btn { border-color: var(--secondary-color); color: var(--secondary-color); } .pricing-view .member .price-box .btn:hover, .pricing-view .pro .price-box .btn:hover { background-color: var(--secondary-color); color: var(--white-color) } .pricing-view .master .price-box .btn-outline { border-color: var(--white-color); color: var(--white-color); } .pricing-view .master .price-box .btn-outline:hover { background-color: var(--white-color); color: var(--secondary-color); } .pricing-view .master .price-box .btn { width: 100%; padding-left: 8px; padding-right: 8px; } .pricing-view .price-table .member .box:hover .icon svg path, .pricing-view .price-table .pro .box:hover .icon svg path { fill: var(--white-color); } .pricing-view .price-table .member .box:hover .icon, .pricing-view .price-table .pro .box:hover .icon { background-color: var(--yellow); } .pricing-view .master .icon svg path { fill: var(--primary-color-dark-2); } .pricing-view .master .sepa, .pricing-view .master .price-box { background-color: var(--primary-color-dark-2); } .pricing-view .price-table .master .box:hover .icon svg path { fill: var(--white-color); } .pricing-view .price-table .master .box:hover .icon { background-color: var(--primary-color-dark-2); } .pricing-view .enterprise { display: inline-block; width: 178px; background-color: var(--primary-color-light-1); border-radius: var(--large-radius); padding: var(--space-16); } .pricing-view .enterprise .sepa { display: block; width: 36px; height: 4px; border-radius: 2px; background-color: var(--secondary-color); } .pricing-view .enterprise .icon { background-color: var(--secondary-color) } .pricing-view .enterprise .icon svg path { fill: var(--white-color); } .pricing-view .package-table-head .public, .pricing-view .package-table-head .member, .pricing-view .package-table-head .pro, .pricing-view .package-table-head .master { border-top-left-radius: var(--normal-radius); border-top-right-radius: var(--normal-radius); padding: var(--space-8) 0; margin-left: calc(0px - var(--space-4) ); margin-right: calc(0px - var(--space-4) ); } .pricing-view .package-table-head .public { background-color: var(--primary-color); color: var(--white-color); } .pricing-view .package-table-head .member, .pricing-view .package-table-head .pro { background-color: var(--yellow); color: var(--secondary-color); } .pricing-view .package-table-head .master { background-color: var(--primary-color-dark-2); color: var(--white-color); } .pricing-view .package-table-body .col, .pricing-view .package-table-body p, .pricing-view .package-table-body b { font-size: 13px; line-height: 15px; } .pricing-view .package-table-body .col { padding: var(--space-12) var(--space-4); border-bottom: 1px solid var(--primary-color-transparent); } .pricing-view .package-table-body .col:nth-of-type(2n) { background-color: var(--primary-color-light-2); } .pricing-view .package-table-body .done { color: var(--green); } .pricing-view .package-table-body .close { color: var(--red); } /* MASTER SETUP VIEW */ .master-setup-view { padding-top: calc( var(--space-16)*2 + 44px ); } .master-setup-view .setup-items { margin: calc( 0px - var(--space-32) ); padding: calc( 0px + var(--space-32) ); margin-top: 0; max-height: 390px; overflow: auto; margin-bottom: calc(0px - var(--space-32)); } .master-setup-view .setup-item .icon-btn-brick { padding: var(--space-4); } .master-setup-view .summary-item .icon-wrap .material-icons { padding: var(--space-12); border-radius: 68px; background-color: var(--primary-color-light-2); } .master-setup-view .summary-item p span { font-size: 28px; font-weight: 700; color: var(--primary-color); } .master-setup-view .summary-item .icon-wrap { position: relative; } .master-setup-view .summary-item .progress-ring { stroke-width: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); } .master-setup-view .summary-item .progress-ring-circle { stroke-dasharray: 10 20; stroke: var(--primary-color); transition: var(--basic-move); stroke-linecap: round; } .master-setup-view .summary .price-sum h1 { color: var(--primary-color); } .master-setup-view .summary .price-sum h1 span { font-size: var(--h2); font-weight: 300; color: var(--secondary-color); } .master-setup-view .price-info { font-size: 14px; line-height: 20px; font-weight: 300; } /* TOOLS VIEW */ :root .tools-view { --h1: 38px; --h1-height: 44px; } .tool-title { font-size: var(--h2); line-height: var(--h2-height); font-weight: 800; } .tools-view { padding-top: calc( var(--space-16)*2 + 44px ); } .tools-view .tool-crea { height: auto; width: 100%; } .tools-view .tool-item .material-icons { color: var(--primary-color); font-size: 32px; } .tools-view .tool-item { cursor: pointer; /*transition: var(--basic-move);*/ height: 120px; } .tools-view .tool-item .tool-menu-title { min-height: calc( var(--h4-height)*2 ); justify-content: center; flex-direction: column; display: flex; } .tools-view .tool-item .tool-menu-title span { line-height: 16px; } .tools-view .tool-item.selected .material-icons, .tools-view .tool-item.selected h4 { color: var(--white-color); background-color: var(--primary-color); font-weight: 700; } .tools-view .tool-item.selected { color: var(--white-color); background-color: var(--primary-color); } .tools-view .reason-box .material-icons { font-size: 32px; border-radius: 64px; padding: var(--space-20); color: var(--primary-color); background-color: var(--primary-color-light-2); } .tools-view .tool-item:hover { background-color: var(--primary-color-light-2); transform: scale(0.98); } .tools-view .tool-item.selected:hover { background-color: var(--primary-color); } .tools-view .all-tools { position: relative; } .tools-view .all-tools:hover { transform: none; } .tools-view .all-tools:hover .all-tools-cont { display: block !important; } .tools-view .all-tools .all-tools-cont { position: absolute; left: -320px; top: 80px; width: 0; max-height: 0; /*overflow: hidden;*/ box-shadow: 0px 96px 166px rgb(0 0 0 / 32%); /*transition: var(--basic-move);*/ opacity: 0; z-index: 1; } .tools-view .all-tools .filter-input, .tools-view .all-tools .tool-item-box { display: none; } .tools-view .all-tools.active .all-tools-cont, .tools-view .all-tools:hover .all-tools-cont { width: auto; max-width: auto; max-height: calc( 96vh - 220px ); overflow: auto; opacity: 1; } .tools-view .all-tools.active .all-tools-cont .filter-input , .tools-view .all-tools:hover .all-tools-cont .filter-input { display: block; } .tools-view .all-tools.active .all-tools-cont .tool-item-box, .tools-view .all-tools:hover .all-tools-cont .tool-item-box { display: flex; } .tools-view .all-tools .tool-item-box { width: 80vw; max-width: 700px; } .tools-view .all-tools .tool-element { padding: var(--space-24); padding-left: var(--space-12); /*transition: var(--basic-move);*/ } .tools-view .all-tools .tool-element:hover { background-color: var(--primary-color-light-1); border-radius: var(--normal-radius); } .tools-view .all-tools .tool-element .material-icons { color: var(--primary-color); } .tools-view h1 span { font-size: var(--h1); line-height: var(--h1-height); color: var(--primary-color); } .tools-view .tool-usage-ring { stroke-width: 8px; } .tools-view .tool-usage-ring .bg { stroke: var(--primary-color-light-2); /*transition: var(--basic-move);*/ stroke-linecap: round; } .tools-view .tool-usage-circle { stroke-dasharray: 10 20; stroke: var(--primary-color); /*transition: var(--basic-move);*/ stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; } /* MODAL - TOOL PRICES*/ .tools-view #modal_tool_prices .master-block { padding: var(--space-24) var(--space-20); background-color: var(--secondary-color); border-radius: var(--large-radius) } .tools-view #modal_tool_prices .pro-block { padding: var(--space-24); background-color: var(--yellow); border-radius: var(--large-radius) } .tools-view #modal_tool_prices { width: 100%; max-width: 640px } .tools-view #modal_tool_prices .h1 span { color: var(--primary-color); font-size: var(--h1); line-height: var(--h1-height) } .tools-view #modal_tool_prices .master-block .amount-box a,.tools-view #modal_tool_prices .master-block b,.tools-view #modal_tool_prices .master-block p { color: var(--white-color) } .tools-view #modal_tool_prices .pro-block .amount-box a,.tools-view #modal_tool_prices .pro-block b,.tools-view #modal_tool_prices .pro-block p { color: var(--secondary-color) } .tools-view #modal_tool_prices .pro-block .amount-number, .tools-view #modal_tool_prices .master-block .amount-number { font-weight: 800; } .tools-view #modal_tool_prices .pro-block .access-other-tools, .tools-view #modal_tool_prices .master-block .access-other-tools { font-size: 14px; } .tools-view #modal_tool_prices .level-icon { position: relative; min-width: 64px; } .tools-view #modal_tool_prices .level-icon .sepa-item { position: absolute; right: 12px; top: 0; height: 100%; width: 1px; background-color: var(--secondary-color); opacity: 0.12; } .tools-view #modal_tool_prices .amount-number { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--primary-color); } .tools-view #modal_tool_prices .amount-item { padding: var(--space-16); border-radius: var(--large-radius); border: 1px solid var(--primary-color) } .tools-view #modal_tool_prices .amount-item img { vertical-align: middle } .tools-view #modal_tool_prices .amount-item .price b { color: var(--primary-color) } .tools-view .social-icons { display: inline-block; vertical-align: middle; } .tools-view .article-view { padding-top: calc(var(--space-16)*2) !important; } .tools-view .article-body img { width: 812px; height: 372px; aspect-ratio: auto 812/372; object-fit: contain; } .tools-view .social-icons svg { margin: var(--space-4); } .tools-view .social-icons a:hover { fill: var(--primary-color-dark-1); } .tools-view .social-icons path { fill: var(--primary-color); } .tools-view .social-icons .material-icons { vertical-align: top; color: var(--primary-color); margin: var(--space-4); font-size: 20px; } .tools-view .tool-title { font-size: 36px; line-height: 42px; font-weight: 300; } .tools-view .social-icons .hover-info .hover-info-box.box { bottom: calc( var(--normal-font) + 2px ); } /* TOOLS VIEW - AUTOMATIONS */ .tools-view .automations .automation-crea img { width: 198px; margin-top: calc(0px - var(--h1-height) - var(--space-16) ); } .tools-view .automations .report-download-box { padding: var(--space-8) var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .automations .domain-names { height: calc(340px - 2px - var(--space-12)*2 - var(--space-16) - var(--normal-font-height) ) ; overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .automations .domain-names input { padding-left: var(--space-12); border: 0; } .tools-view .automations .domain-names input:focus { transform: none; box-shadow: none; } .tools-view .automations .report-wrap { height: 340px; overflow: auto; } /* TOOLS VIEW - BLACKLIST CHECKER */ .tools-view .blacklist-checker .result-box .result-item { border: 1px solid var(--primary-color-light-2); } .tools-view .blacklist-checker .status-box .material-icons { color: var(--primary-color); animation: pulse 1400ms infinite linear; } .tools-view .blacklist-checker .result-item .report-download .material-icons { color: var(--primary-color); } .tools-view .blacklist-checker .result-item h3 { font-weight: 800; } .tools-view .blacklist-checker .result-item .result-data { display: none; } .tools-view .blacklist-checker .result-item.active .result-data { display: block; } .tools-view .blacklist-checker .domain-list { height: 180px; overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .blacklist-checker .domain-list input { padding-left: var(--space-12); border: 0; } .tools-view .blacklist-checker .domain-list input:focus { transform: none; box-shadow: none; } .tools-view .blacklist-checker .blacklist-crea img { width: 116%; margin-left: -12%; } .tools-view .blacklist-checker-result .highlight-result-box { width: 180px; } .tools-view .blacklist-checker-result .clear-result .box-highlight, .tools-view .blacklist-checker-result .blocked-result .box-highlight, .tools-view .inbox-tester-blacklist .clear-result .box-highlight, .tools-view .inbox-tester-blacklist .blocked-result .box-highlight { height: 308px; overflow: auto; } .tools-view .blacklist-checker-result .clear-result .material-icons, .tools-view .inbox-tester-blacklist .clear-result .material-icons { color: var(--green); } .tools-view .blacklist-checker-result .blocked-result .material-icons, .tools-view .inbox-tester-blacklist .blocked-result .material-icons { color: var(--red); } .tools-view .blacklist-checker-result .back .material-icons { color: var(--primary-color); } .tools-view .blacklist-checker-result .api-box .api-cta-box { margin-top: -24px; } .tools-view .blacklist-checker-result .result-list, .tools-view .inbox-tester-blacklist .result-list { position: relative; } .tools-view .blacklist-checker-result .result-list .promo-box, .tools-view .inbox-tester-blacklist .result-list .promo-box { position: absolute; top: calc( var(--h2-height) + var(--space-4) ); left: 0; width: 100%; height: calc( 100% - var(--h2-height) - var(--space-4) ); border-radius: var(--large-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .blacklist-checker-result .result-list h1, .tools-view .inbox-tester-blacklist .result-list h1 { font-size: 40px; line-height: 42px; } .tools-view .blacklist-checker-result .result-list .cta-text, .tools-view .inbox-tester-blacklist .result-list .cta-text { width: 100%; max-width: 420px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @supports (backdrop-filter: none) { .tools-view .blacklist-checker-result .result-list .promo-box, .tools-view .inbox-tester-blacklist .result-list .promo-box { backdrop-filter: saturate(80%) brightness(100%) blur(8px); } } @supports not (backdrop-filter: none) { .tools-view .blacklist-checker-result .result-list .promo-box, .tools-view .inbox-tester-blacklist .result-list .promo-box { background-color: var(--primary-color-light-2); } } .tools-view .improve-box { padding-top: 0; } .tools-view .improve-box .improve-item img { width: 90px; height: 90px; border-radius: var(--normal-radius); object-fit: cover; } .tools-view .improve-box .improve-item h3 { color: var(--primary-color); } .tools-view .automations .automation-crea img { width: 138px; margin-top: calc(0px - var(--h1-height) - var(--space-16) ); } .tools-view .file-upload-box { border: 2px dashed var(--primary-color-light-2); text-align: center; } .tools-view .file-upload-box h2, .tools-view .file-upload-box p { color: var(--primary-color-light-3); } /* TOOLS VIEW - BLACKLIST MONITOR */ .tools-view .automations .auto-blacklist-checker { padding: 0; } .tools-view .automations .domain-names, .tools-view .blacklist-monitor .domain-names { height: calc(450px - 2px - var(--space-12)*2 - var(--space-16) - var(--normal-font-height) ); overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .automations .domain-names input, .tools-view .blacklist-monitor .domain-names input { padding-left: var(--space-12); border: 0; } .tools-view .automations .domain-names input:focus, .tools-view .blacklist-monitor .domain-names input:focus { transform: scale(1); box-shadow: none; } .tools-view .automations .blacklist-monitor-result .result-item { padding-bottom: var(--space-32); margin-bottom: var( --space-32); border-bottom: 1px solid var( --primary-color-light-2); } .tools-view .automations .blacklist-monitor-result .result-item .site-icon { background-color: var(--primary-color-light-1); border-radius: 64px; padding: var(--space-8); } .tools-view .automations .blacklist-monitor-result .result-item.bad .result-highlight { background-color: var(--red-light); border-radius: var(--large-radius); padding: var(--space-16); } .tools-view .automations .blacklist-monitor-result .blocked-list .wrapper { width: 100%; max-width: 120px; display: inline-block; } .tools-view .automations .blacklist-monitor-result .blocked-list .collapse-item .list { max-height: calc( var(--small-font-height)*3 ); overflow: hidden; } .tools-view .automations .blacklist-monitor-result .blocked-list .collapse-item.active .list { max-height: 120px; overflow: auto; } .tools-view .automations .blacklist-monitor-result .blocked-list .collapse-item .list span { display: block; font-size: var(--small-font); line-height: var(--small-font-height); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tools-view .automations .blacklist-monitor-result .result-item.bad .blocked-number .h1, .tools-view .automations .blacklist-monitor-result .result-item.bad .blocked-number b { color: var(--red); } .tools-view .automations .blacklist-monitor-result .result-item.bad .blocked-list a { font-size: var(--small-font); line-height: var(--small-font-height); color: var(--red); } .tools-view .automations .blacklist-monitor-result .result-item.bad .btn-primary { color: var(--white-color); background-color: var(--red); } .tools-view .automations .blacklist-monitor-result .result-item.bad .btn-primary:hover { filter: brightness(96%); } .tools-view .automations .blacklist-monitor-result .result-item.good .result-highlight { background-color: var(--green-light); border-radius: var(--large-radius); padding: var(--space-16); } .tools-view .automations .blacklist-monitor-result .result-item.good .blocked-number .h1, .tools-view .automations .blacklist-monitor-result .result-item.good .blocked-number b { color: var(--green); } .tools-view .automations .blacklist-monitor-result .result-item.good .blocked-list a { font-size: var(--small-font); line-height: var(--small-font-height); color: var(--green); } .tools-view .automations .blacklist-monitor-result .result-item.good .btn-primary { color: var(--white-color); background-color: var(--green); } .tools-view .automations .blacklist-monitor-result .result-item.good .btn-primary:hover { filter: brightness(96%); } /* TOOLS VIEW - BLACKLIST MONITOR */ .tools-view .automations .auto-blacklist-checker { padding: 0; } .tools-view .automations .domain-names { height: calc(450px - 2px - var(--space-12)*2 - var(--space-16) - var(--normal-font-height) ); overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .automations .domain-names input { padding-left: var(--space-12); border: 0; } .tools-view .automations .domain-names input:focus { transform: scale(1); box-shadow: none; } .tools-view .automations .blacklist-monitor-result .result-item { padding-bottom: var(--space-32); margin-bottom: var( --space-32); border-bottom: 1px solid var( --primary-color-light-2); } .tools-view .automations .blacklist-monitor-result .result-item .site-icon { background-color: var(--primary-color-light-1); border-radius: 64px; padding: var(--space-8); } .tools-view .automations .blacklist-monitor-result .result-item.bad .result-highlight { background-color: var(--red-light); border-radius: var(--large-radius); padding: var(--space-16); } .tools-view .automations .blacklist-monitor-result .blocked-list .wrapper { width: 100%; max-width: 120px; display: inline-block; } .tools-view .automations .blacklist-monitor-result .blocked-list .collapse-item .list { max-height: calc( var(--small-font-height)*3 ); overflow: hidden; } .tools-view .automations .blacklist-monitor-result .blocked-list .collapse-item.active .list { max-height: 120px; overflow: auto; } .tools-view .automations .blacklist-monitor-result .blocked-list .collapse-item .list span { display: block; font-size: var(--small-font); line-height: var(--small-font-height); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tools-view .automations .blacklist-monitor-result .result-item.bad .blocked-number .h1, .tools-view .automations .blacklist-monitor-result .result-item.bad .blocked-number b { color: var(--red); } .tools-view .automations .blacklist-monitor-result .result-item.bad .blocked-list a { font-size: var(--small-font); line-height: var(--small-font-height); color: var(--red); } .tools-view .automations .blacklist-monitor-result .result-item.bad .btn-primary { color: var(--white-color); background-color: var(--red); } .tools-view .automations .blacklist-monitor-result .result-item.bad .btn-primary:hover { filter: brightness(96%); } .tools-view .automations .blacklist-monitor-result .result-item.good .result-highlight { background-color: var(--green-light); border-radius: var(--large-radius); padding: var(--space-16); } .tools-view .automations .blacklist-monitor-result .result-item.good .blocked-number .h1, .tools-view .automations .blacklist-monitor-result .result-item.good .blocked-number b { color: var(--green); } .tools-view .automations .blacklist-monitor-result .result-item.good .blocked-list a { font-size: var(--small-font); line-height: var(--small-font-height); color: var(--green); } .tools-view .automations .blacklist-monitor-result .result-item.good .btn-primary { color: var(--white-color); background-color: var(--green); } .tools-view .automations .blacklist-monitor-result .result-item.good .btn-primary:hover { filter: brightness(96%); } .tools-view .automations .blacklist-monitor-result .result-item.neutral p { color: var(--primary-color-light-4); } .tools-view .automations .blacklist-monitor-result .result-item.neutral .result-highlight { background-color: var(--primary-color-light-1); border-radius: var(--large-radius); padding: var(--space-16); } /* TOOLS VIEW - WEBSITE MONITOR */ .tools-view .website-monitor .domain-names { height: calc(450px - 2px - var(--space-12)*2 - var(--space-16) - var(--normal-font-height) ); overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .website-monitor .domain-names input { padding-left: var(--space-12); border: 0; } .tools-view .website-monitor .domain-names input:focus { transform: scale(1); box-shadow: none; } .tools-view .website-monitor .website-monitor-result .result-item { padding-bottom: var(--space-32); margin-bottom: var( --space-32); border-bottom: 1px solid var( --primary-color-light-2); } .tools-view .website-monitor .website-monitor-result .result-item .site-icon { background-color: var(--primary-color-light-1); border-radius: 64px; padding: var(--space-8); } .tools-view .website-monitor .website-monitor-result .result-item.bad .result-highlight { background-color: var(--red-light); border-radius: var(--large-radius); padding: var(--space-16); } .tools-view .website-monitor .website-monitor-result .result-item.bad .status .h3 { color: var(--red); } .tools-view .website-monitor .website-monitor-result .result-item.bad .btn-primary { color: var(--white-color); background-color: var(--red); } .tools-view .website-monitor .website-monitor-result .result-item.bad .btn-primary:hover { filter: brightness(96%); } .tools-view .website-monitor .website-monitor-result .result-item.good .result-highlight { background-color: var(--green-light); border-radius: var(--large-radius); padding: var(--space-16); } .tools-view .website-monitor .website-monitor-result .result-item.good .status .h3 { color: var(--green); } .tools-view .website-monitor .website-monitor-result .result-item.good .btn-primary { color: var(--white-color); background-color: var(--green); } .tools-view .website-monitor .website-monitor-result .result-item.good .btn-primary:hover { filter: brightness(96%); } /* TOOLS VIEW - EMAIL VERIFIER */ .tools-view .email-verifier .source-type { max-width: 480px; } .tools-view .email-verifier .email-adresses { height: 180px; overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .email-verifier .email-adresses input { padding-left: var(--space-12); border: 0; } .tools-view .email-verifier .email-adresses input:focus { transform: none; box-shadow: none; } .tools-view .email-verifier .result-box .result-item { border: 1px solid var(--primary-color-light-2); } .tools-view .email-verifier .status-box .material-icons { color: var(--primary-color); animation: pulse 1400ms infinite linear; } .tools-view .email-verifier .result-item .report-download .material-icons { color: var(--primary-color); } .tools-view .email-verifier .result-item h3 { font-weight: 800; } .tools-view .email-verifier .result-item .result-data { display: none; } .tools-view .email-verifier .result-item.active .result-data { display: block; } .tools-view .email-verifier .single-mail-result .body { border-radius: var(--normal-radius); } .tools-view .email-verifier .single-mail-result.good .body { background-color: var(--green-light); } .tools-view .email-verifier .single-mail-result.good .body b, .tools-view .email-verifier .single-mail-result.good .body .material-icons { color: var(--green); } .tools-view .email-verifier .single-mail-result.risky .body { background-color: var(--yellow-light); } .tools-view .email-verifier .single-mail-result.risky .body b, .tools-view .email-verifier .single-mail-result.risky .body .material-icons { color: var(--yellow); } .tools-view .email-verifier .single-mail-result.bad .body { background-color: var(--red-light); } .tools-view .email-verifier .single-mail-result.bad .body b, .tools-view .email-verifier .single-mail-result.bad .body .material-icons { color: var(--red); } #modal_file_verify .file-info { border-radius: var(--large-radius); text-align: center; border: 1px solid var(--primary-color-light-3); } #modal_file_verify .file-info .head { border-top-left-radius: var(--large-radius); border-top-right-radius: var(--large-radius); background-color: var(--primary-color-light-2); padding: var(--space-24) var(--space-16); border-bottom: 1px solid var(--primary-color-light-3); } #modal_file_verify .file-info h2 { display: inline-block; vertical-align: middle; } #modal_file_verify .file-info .file-name { padding: var(--space-16); } #modal_file_verify .balance-status { color: var(--primary-color); font-size: var(--h2); font-weight: 700; } #modal_file_verify .balance-status span { color: var(--secondary-color); } #modal_file_format img { width: 100%; } .tools-view .file-upload-box { border: 2px dashed var(--primary-color-light-2); text-align: center; } .tools-view .file-upload-box h2, .tools-view .file-upload-box p { color: var(--primary-color-light-3); } .tools-view .api-response { position: relative; padding: var(--space-12); background-color: var(--gray-light-1); border-radius: var(--normal-radius); border: 1px solid var(--gray-light-2); } .tools-view .api-response h5 { position: absolute; right: var(--space-16); top: var(--space-16); } .tools-view .api-response code { display: inline-block; font-size: 14px; line-height: 17px; } .tools-view .api-response .bottom { font-size: var(--small-font); padding-top: var(--space-8); border-top: 1px solid var(--gray-light-2); text-align: center; margin-left: calc(0px - var(--space-12) ); margin-right: calc(0px - var(--space-12) ); margin-top: var(--space-12); } .tools-view .api-response .bottom a { font-size: var(--small-font); } .tools-view #api-tab.collapse-item .document-box { display: none; } .tools-view #api-tab.collapse-item.active .document-box { display: block; } .tools-view #api-tab .material-icons { color: var(--primary-color); } /* TOOLS VIEW - BOUNCE CODE ANALISER */ .tools-view .bounce-code .bounce-list-codes { height: 180px; overflow: auto; padding: var(--space-12); border-radius: var(--normal-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .bounce-code .bounce-list-codes input { padding-left: var(--space-12); border: 0; } .tools-view .bounce-code .bounce-list-codes input:focus { transform: none; box-shadow: none; } .tools-view .bounce-code .bounce-code-result { padding: var(--space-16); border-radius: var(--large-radius); border: 1px solid var(--primary-color-light-2); } .tools-view .bounce-code .err-code { display: inline-block; padding: var(--space-4) var(--space-8); border-radius: var(--normal-radius); font-weight: 800; color: var(--red); background-color: var(--red-light); } .tools-view .bounce-code .bounce-code-result .err-info { border-left: 1px solid var(--primary-color-light-2); padding-left: var(--space-24); } .tools-view .bounce-code .result-box .result-item { border: 1px solid var(--primary-color-light-2); } .tools-view .bounce-code .result-box .result-item .title span { color: var(--red); } .tools-view .bounce-code .result-box .result-item.collapse-item .explanation-box { display: none; } .tools-view .bounce-code .result-box .result-item.collapse-item.active .explanation-box { display: flex; } .tools-view .bounce-code .result-item .report-download .material-icons { color: var(--primary-color); } .bounce-code-paste-area { border: none; resize: none; } .bounce-code-column-item { border: 1px solid var(--primary-color-light-3); border-radius: var(--large-radius); height: 100%; } .bounce-code-column-item ul { margin: var(--space-8); } .bounce-code-column-item li, .bounce-code-column-item i { font-size: var(--small-font); line-height: 95%; } /* TOOLS VIEW - EMAIL TEMPLATES */ .tools-view .email-templates .template-item { position: relative; width: 100%; height: 340px; border-radius: 0; border: 4px solid var(--primary-color-light-1); overflow: hidden; } .tools-view .email-templates .template-item img { position: absolute; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%; /*transition: var(--basic-move);*/ } .tools-view .email-templates .template-item .template-details { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--space-24); backdrop-filter: saturate(80%) brightness(100%) blur(24px); background-color: var(--overlay-color); /*transition: var(--basic-move);*/ transform: translate(0, 100%); } .tools-view .email-templates .template-item .icon-btn { padding: calc( var(--space-12) - (24px - var(--normal-font-height))/2 ) var(--space-16); } .tools-view .email-templates .template-item .template-details h3, .tools-view .email-templates .template-item .template-details span { color: var(--white-color); } .tools-view .email-templates .template-item:hover .template-details { transform: translate(0, 0%); } .tools-view .email-templates .template-item:hover img { transform: scale(1.06); } .tools-view #modal_template_preview { width: 100%; max-width: 640px; } .tools-view #modal_template_preview .head { position: relative; margin: calc(0px - var(--space-32)); margin-bottom: 0; padding: calc(0px + var(--space-24)); } .tools-view #modal_template_preview .head::after { position: absolute; display: block; content: ""; bottom: 0px; left: 0; width: 100%; height: 100%; box-shadow: var(--normal-shadow); background-color: transparent; pointer-events: none; } .tools-view #modal_template_preview .template-content { border: 4px solid var(--primary-color-light-2); border-top: 0; max-height: calc(86vh - 120px); overflow: auto; margin: calc(0px - var(--space-32)); margin-top: 0; border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } .tools-view #modal_template_preview .template-content img { width: 100%; } /* TOOLS VIEW - HTML EDITOR */ .html-editor .editor-wrapper { width: 600px; } .html-editor .drag-item { padding: var(--space-16); border-radius: var(--normal-radius); background-color: var(--primary-color-light-1); cursor: pointer; /*transition: var(--basic-move);*/ } .html-editor .drag-item b { font-size: 14px; } .html-editor .drag-item .material-icons { color: var(--primary-color-light-2); } .html-editor .drag-item:hover, .html-editor .drag-item:active { background-color: var(--white-color); box-shadow: var(--large-shadow); transform: scale(1.12); } /* TOOLS VIEW - BLACKLIST MONITOR */ .tools-view .automations .auto-blacklist-checker { padding: 0; } /* TOOLS VIEW - INBOX TESTER */ .tools-view .inbox-tester .inbox-tester-crea { position: relative; } .tools-view .inbox-tester .inbox-tester-crea .email-submit { position: absolute; width: 80%; left: -33%; top: 55%; z-index: 1; } .tools-view .inbox-tester .inbox-tester-crea img { width: 100%; } .tools-view .inbox-tester-overview h4, .tools-view .inbox-tester-providers h4 { font-size: var(--h3); line-height: var(--h3-height); } .tools-view .inbox-tester-overview .result-item { border-bottom: 1px solid var(--primary-color-light-2); padding-bottom: var(--space-8); margin-bottom: var(--space-8); } .tools-view .inbox-tester-overview .result-item:last-of-type { border-bottom: 0; } .tools-view .inbox-tester-overview .result-item .item-score { font-size: 20px; } .tools-view .inbox-tester-overview .result-item .material-icons { font-size: 32px; } .tools-view .inbox-tester-overview .result-item.good .material-icons { color: var(--green); } .tools-view .inbox-tester-overview .result-item.bad .material-icons { color: var(--red); } .tools-view .inbox-tester-overview .overview-result-ring { stroke-width: 10px; } .tools-view .inbox-tester-overview .result-ring { display: inline-block; position: relative; } .tools-view .inbox-tester-overview .result-ring .bg { stroke: var(--primary-color-light-2); /*transition: var(--basic-move);*/ stroke-linecap: round; } .tools-view .inbox-tester-overview .result-ring b { position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); display: inline-block; font-size: 54px; font-weight: 500; } .tools-view .inbox-tester-overview .overview-result-circle { stroke-dasharray: 10 20; stroke: var(--green); /*transition: var(--basic-move);*/ stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; } .tools-view .inbox-tester-providers .provider-img { display: block; margin: 0 auto; text-align: center; width: 86px; height: 86px; position: relative; border-radius: 64px; background-color: var(--primary-color-light-1); padding: var(--space-24); } .tools-view .inbox-tester-providers .provider-img img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; } .tools-view .inbox-tester-providers .provider-img .material-icons { position: absolute; top: 0; right: 0; transform: translate(20%, -20%); padding: var(--space-4); border-radius: 16px; } .tools-view .inbox-tester-providers .provider-item.good .material-icons { background-color: var(--green-light); color: var(--green); } .tools-view .inbox-tester-providers .provider-item.bad .material-icons { background-color: var(--red-light); color: var(--red); } .tools-view .inbox-tester-providers .provider-item.bad p { color: var(--red); } .tools-view .inbox-tester-signatures .signature-item .head { background-color: var(--primary-color-light-1); border-top-left-radius: var(--large-radius); border-top-right-radius: var(--large-radius); padding: var(--space-32) var(--space-16); } .tools-view .inbox-tester-signatures .signature-item .head .material-icons { font-size: 44px; vertical-align: bottom; margin-left: calc(0px - var(--space-8) ); } .tools-view .inbox-tester-signatures .signature-item b { font-size: var(--h1); line-height: var(--h1-height); font-weight: 500; } .tools-view .inbox-tester-signatures .signature-item .body { padding: var(--space-12) var(--space-16); border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } .tools-view .inbox-tester-signatures .signature-item .body span { color: var(--white-color); } .tools-view .inbox-tester-signatures .signature-item.good .head .material-icons { color: var(--green); } .tools-view .inbox-tester-signatures .signature-item.good .body { background-color: var(--green); } .tools-view .inbox-tester-signatures .signature-item.bad .head .material-icons { color: var(--red); } .tools-view .inbox-tester-signatures .signature-item.bad .body { background-color: var(--red); } .tools-view .inbox-tester-content-analysis .result-item .material-icons { font-size: 32px; } .tools-view .inbox-tester-content-analysis .result-item.good .material-icons { color: var(--green); } .tools-view .inbox-tester-content-analysis .result-item.bad .material-icons { color: var(--red); } .tools-view .inbox-tester-spamassassin-report .material-icons, .tools-view .inbox-tester-email-information .material-icons { color: var(--primary-color); } /* TOOLS VIEW - IMAGE CONVERTER */ #modal_convert { width: max-content; width: -moz-max-content; padding: 0; } .tools-view .image-converter .file-upload-box .material-icons { font-size: 32px; color: var(--primary-color-light-3); } .tools-view .image-converter .selected-images-box { position: relative; } .tools-view .image-converter .selected-images { position: absolute; height: calc(100% - var(--space-16) - var(--normal-font-height) ); left: var(--space-16); right: var(--space-16); padding-bottom: calc( var(--space-24)*2 + var(--space-12)*2 + var(--normal-font-height) ); overflow: auto; } .tools-view .image-converter .selected-images-box .action-btn-wrapper { position: absolute; padding: var(--space-16) var(--space-24); left: var(--space-16); right: var(--space-16); bottom: 0; background-color: var(--primary-color-light-1); border-radius: var(--large-radius); z-index: 2; } .tools-view .image-converter .selected-images .image-item img { width: 100%; border-radius: var(--small-radius); border: 2px solid var(--white-color); object-fit: cover; /*transition: var(--basic-move);*/ } .tools-view .image-converter .selected-images .image-item { position: relative; } .tools-view .image-converter .selected-images .image-item .remove, .tools-view .image-converter .selected-images .image-item .check { font-size: 32px; position: absolute; top: 0%; right: 0%; transform: translate(50%, -50%); color: var(--primary-color-light-2); border-radius: 64px; z-index: 1; cursor: pointer; /*transition: var(--basic-move);*/ } .tools-view .image-converter .selected-images .image-item .remove:hover { color: var(--primary-color-light-3); transform: translate(50%, -50%) scale(0.94); } .tools-view .image-converter .selected-images .image-item .check { display: none; } .tools-view .image-converter .selected-images .image-item.selected .check { display: inline-block; color: var(--primary-color); } .tools-view .image-converter .selected-images .image-item.selected .check::after { background-color: var(--primary-color-light-1); } .tools-view .image-converter .selected-images .image-item.selected .remove { display: none; } .tools-view .image-converter .selected-images .image-item.selected img { border-color: var(--primary-color); } .tools-view .image-converter .selected-images .image-item span::after { display: block; content: ''; position: absolute; width: 24px; height: 24px; background-color: var(--secondary-color); border-radius: 64px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .tools-view .image-converter .image-settings .image-size input { border: 0; background-color: var(--primary-color-light-1); padding-left: var(--space-4); padding-right: var(--space-4); text-align: center; } .tools-view .image-converter .image-settings .slider.quality-slider { height: 32px; border: 0; background-color: var(--primary-color-light-1); background: linear-gradient(90deg, #c61c5d 0%, #361cc6 100%); text-align: center; } .tools-view .image-converter .image-settings .slider.quality-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 26px; border-radius: 64px; background: var(--white-color); box-shadow: var(--normal-shadow); border: 0; } .tools-view .image-converter .image-settings .slider.quality-slider::-moz-range-thumb { width: 12px; height: 26px; border-radius: 64px; background: var(--white-color); box-shadow: var(--normal-shadow); border: 0; cursor: pointer; } .tools-view .image-converter .image-settings .file-types .btn.selected { color: var(--white-color); background-color: var(--primary-color); } .tools-view .image-converter .storage-usage .circle-wrap { position: relative; } .tools-view .image-converter .storage-usage .material-icons { position: absolute; left: 50%; top: calc(50% - 3px); transform: translate(-50%, -50%); color: var(--primary-color); font-size: 20px; } .tools-view .image-converter .image-item { border-bottom: 1px solid var(--primary-color-light-2); padding-bottom: var(--space-12); margin-bottom: var(--space-24); } .tools-view .image-converter .nested-image-item .image-item p, .tools-view .image-converter .nested-image-item .image-item b, .tools-view .image-converter .nested-image-item .image-item .text-brick { font-size: 14px; } .tools-view .image-converter .nested-image-item .image-item h2 { font-size: 14px; } .tools-view .image-converter .image-item:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .tools-view .image-converter .image-item .preview-img { width: 100%; height: 106px; object-fit: cover; border-radius: var(--small-radius); } .tools-view .image-converter .nested-image-item .image-item .preview-img { width: 76%; height: 78px; } .tools-view .image-converter .nested-image-item .image-item { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; margin-top: var(--space-8); } .tools-view .image-converter .image-item .preview-box .format { margin-top: -42px; margin-right: -12px; } .tools-view .image-converter .selected-images-box .no-images { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .tools-view .image-converter .selected-images-box .no-images .material-icons, .tools-view .image-converter .selected-images-box .no-images h2 { color: var(--primary-color-light-3); } /* OUR TOOLS */ .our-tools-view { background-color: var(--white-color); } .our-tools-view .header-our-tools { padding-top: calc( var(--space-16)*2 + 44px ); margin-bottom: calc(0px - var(--space-24) ); } .our-tools-view .header-our-tools .tool-crea { width: 100%; max-width: 532px; } .our-tools-view .header-our-tools .ea-icon { width: 80px; } .our-tools-view .header-our-tools .head-info { max-width: 406px; margin-left: auto; margin-right: auto; margin-top: -54px; } .our-tools-view .header-our-tools .head-info h1, .our-tools-view .header-our-tools .head-info p { color: var(--white-color); } .our-tools-view .our-tool-cont .tool-preview { position: relative; } .our-tools-view .our-tool-cont .tool-preview img { position: absolute; left: var(--space-16); height: 100%; width: calc(100% - var(--space-16)*2 ); object-fit: cover; object-position: top; border-radius: var(--normal-radius); } .our-tools-view .our-tool-cont .btn { max-width: 160px; } .our-tools-view .our-tool-cont .tool-info p { font-weight: 300; font-size: 18px; line-height: 24px; } /* GENERAL MODALS */ #notify_trigger_modal { width: 100%; max-width: 740px; } #notify_trigger_modal .ntf_crea { width: 116%; } #notify_trigger_modal .xs-alert-icon { font-size: 42px; color: var(--red); } #limit_modal { width: 100%; max-width: 680px; } #limit_modal .offer-item { margin-left: calc(0px - var(--space-32)); margin-right: calc(0px - var(--space-32)); } #limit_modal .offer-item:last-of-type { margin-bottom: calc(0px - var(--space-32)); border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } #limit_modal .offer-item .offer-crea { width: 110%; } #limit_modal .offer-item .info { padding-right: var(--space-32); } #limit_modal .offer-item .btn { width: 100%; max-width: 160px; } #limit_modal .offer-item.member { background-color: var(--yellow); } #limit_modal .offer-item.pro { background-color: var(--primary-color-dark-1); } #limit_modal .offer-item.master { background-color: var(--secondary-color); } #limit_modal .offer-item.pro h2, #limit_modal .offer-item.pro p, #limit_modal .offer-item.master h2, #limit_modal .offer-item.master p { color: var(--white-color); } /* GENERAL MODALS */ #notify_trigger_modal { width: 100%; max-width: 740px; } #notify_trigger_modal .ntf_crea { width: 116%; } #notify_trigger_modal .xs-alert-icon { font-size: 42px; color: var(--red); } #limit_modal { width: 100%; max-width: 680px; } #limit_modal .offer-item { margin-left: calc(0px - var(--space-32)); margin-right: calc(0px - var(--space-32)); } #limit_modal .offer-item:last-of-type { margin-bottom: calc(0px - var(--space-32)); border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } #limit_modal .offer-item .offer-crea { width: 110%; } #limit_modal .offer-item .info { padding-right: var(--space-32); } #limit_modal .offer-item .btn { width: 100%; max-width: 160px; } #limit_modal .offer-item.member { background-color: var(--yellow); } #limit_modal .offer-item.pro { background-color: var(--primary-color-dark-1); } #limit_modal .offer-item.master { background-color: var(--secondary-color); } #limit_modal .offer-item.pro h2, #limit_modal .offer-item.pro p, #limit_modal .offer-item.master h2, #limit_modal .offer-item.master p { color: var(--white-color); } /* GENERAL MODALS */ #notify_trigger_modal { width: 100%; max-width: 740px; } #notify_trigger_modal .ntf_crea { width: 116%; } #notify_trigger_modal .xs-alert-icon { font-size: 42px; color: var(--red); } #limit_modal { width: 100%; max-width: 680px; } #limit_modal .offer-item { margin-left: calc(0px - var(--space-32)); margin-right: calc(0px - var(--space-32)); } #limit_modal .offer-item:last-of-type { margin-bottom: calc(0px - var(--space-32)); border-bottom-left-radius: var(--large-radius); border-bottom-right-radius: var(--large-radius); } #limit_modal .offer-item .offer-crea { width: 110%; } #limit_modal .offer-item .info { padding-right: var(--space-32); } #limit_modal .offer-item .btn { width: 100%; max-width: 160px; } #limit_modal .offer-item.member { background-color: var(--yellow); } #limit_modal .offer-item.pro { background-color: var(--primary-color-dark-1); } #limit_modal .offer-item.master { background-color: var(--secondary-color); } #limit_modal .offer-item.pro h2, #limit_modal .offer-item.pro p, #limit_modal .offer-item.master h2, #limit_modal .offer-item.master p { color: var(--white-color); } /* 404 VIEW */ .missing-page-view { padding-top: calc( var(--space-16)*2 + 44px ); } .missing-page-view h1 span { color: var(--primary-color); font-size: 68px; line-height: 70px; display: block; } .missing-page-view .missing-page-crea { width: 100%; max-width: 380px; } .missing-page-view .section-title { display: block; font-weight: 800; } .missing-page-view .link-section a { display: block; margin-top: var(--space-4); } /* UI KIT VIEW */ .ui-kit { background-color: #FFF; } .ui-kit .ui-container { max-width: 840px; margin: var(--space-48) auto; } .ui-kit .ui-container .color { width: 44px; height: 44px; border-radius: 64px; display: inline-block; /*transition: var(--basic-move);*/ } .ui-kit .ui-container .color:hover { transform: scale(4); box-shadow: var(--normal-shadow); } .ui-kit .ui-container .color:first-of-type { border: 2px solid var(--primary-color-light-2); } .ui-kit .ui-container .article-card.huge-card.master { grid-template-columns: calc(66% + var(--space-24)) calc(34% - var(--space-24)); } .ui-kit .ui-container .article-card.huge-card.public { grid-template-columns: calc(66% + var(--space-24)) calc(34% - var(--space-24)); } .ui-kit .ui-container .article-card.huge-card.member { grid-template-columns: calc(66% + var(--space-24)) calc(34% - var(--space-24)); } .ui-kit .ui-container .article-card .article-master-cta { left: 30%; } /* ANIMATIONS */ @keyframes spin { from { opacity: 1; transform:rotate(0deg); } to { transform:rotate(360deg); } } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes video_pulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } } /* RESPONSIVE CHANGES */ @media all and (max-width: 1024px) { .sm-mt16 { margin-top:var(--space-16) } .sm-mt24 { margin-top: var(--space-24) } .sm-visible { display: block!important } .sm-visible-flex { display: flex!important } .sm-visible-inline { display: inline-block!important } .sm-col-12 { -ms-flex-preferred-size: 100%!important; -webkit-flex-basis: 100%!important; flex-basis: 100%!important; max-width: 100%!important; } /* HEADER */ .header .logo-box { flex: 1; } .header.mobile-menu-open, .listing-view .header.mobile-menu-open, .header.mobile-menu-open.header-fixed.scroll-active { height: 100%; background: var(--primary-color-dark-1); } .header .menu-items { text-align: center; margin-top: var(--space-64); } .header .menu-item { color: var(--primary-color-light-2); display: block; margin: var(--space-24) 0; } .header.mobile-menu-open .col, .header.mobile-menu-open .grid { display: block !important; } .header.mobile-menu-open .menu-item.dropdown-menu .dropdown-elements { transition: none; } .header.mobile-menu-open .menu-item.dropdown-menu:hover .dropdown-elements { position: static; display: block; width: 100%; box-shadow: none; background-color: transparent; } .header.mobile-menu-open .menu-item.dropdown-menu:hover .dropdown-next-trigger { font-weight: 800; } .header.mobile-menu-open .menu-item.dropdown-menu:hover .dropdown-elements a { color: var(--primary-color-light-2); border-bottom: 0; } .header.mobile-menu-open .mobile-menu-icon { top: var(--space-16); right: var(--space-16); position: fixed; } .header.mobile-menu-open .mobile-menu-icon span { font-size: 36px; width: auto; height: auto; } .listing-view .header.mobile-menu-open .filter-open-icon { opacity: 1; pointer-events: all; } .header.mobile-menu-open .sign-in { color: var(--white-color); border: 1px solid var(--white-color); padding: var(--space-btn); border-radius: var(--large-radius); margin-bottom: var(--space-24); /*transition: var(--basic-move);*/ text-transform: none; font-weight: 800; } .header.mobile-menu-open .sign-in:hover { background-color: var(--white-color); color: var(--primary-color-dark-1); transform: scale(0.98); } .header.mobile-menu-open .sign-up { width: 100%; } /* HEADER FILTER */ .header.header-filter-section .filter-box { display: none; } .mobile-search-icon { display: inline-block !important; position: fixed !important; right: var(--space-32) !important; bottom: calc(24px + var(--space-72)) !important; z-index: 2 !important; width: 56px !important; height: 56px !important; } .header.fixed-filter-active { bottom: 0; top: auto; background: var(--primary-color-gradient) !important; } .header.fixed-filter-active .filter-box .input-level, .header.fixed-filter-active .filter-box .input-category, .header.fixed-filter-active .filter-box .btn.btn-white { width: 100%; } /* ARTICLE VIEW */ .mobile-table-content-icon { display: inline-block; position: fixed; left: var(--space-32); bottom: var(--space-32); box-shadow: var(--large-shadow); z-index: 2; } .article-view .article .left-side.table-of-content-active { display: inline-block; z-index: 102; } .article-view .article .left-side.table-of-content-active .table-of-contents { position: fixed; width: 180px; display: inline-block; z-index: 102; left: var(--space-24); bottom: calc( 0px + var(--space-32) + var(--space-16)*2 + 24px + var(--space-16) ); } .article-view .article .left-side.table-of-content-active .article-offer { display: none; } .article-view .progress-ring { stroke-width: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .article-view .progress-ring-circle { stroke-dasharray: 10 20; stroke: var(--primary-color); /*transition: var(--basic-move);*/ stroke-linecap: round; } .article-view .more-lessons { overflow: auto; flex-wrap: nowrap; padding-right: var(--space-24); padding-left: var(--space-24); padding-bottom: var(--space-24); margin-right: calc(0px - var(--space-24) ); margin-left: calc(0px - var(--space-24) - 8px ); } .article-view .more-lessons .col { min-width: 168px; } .lesson-cta-container.active-cta-box .lesson-cta-box.reached-bottom { left: -8px !important; } /* PROFILE VIEW */ .profile-view { padding-top: calc( var(--space-16)*2 ); } .profile-view .affiliate-program .affiliate-crea { margin-top: 0; } .profile-view .data-usage .floating-offer.active { bottom: 0px !important; left: 0px !important; width: 100% !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* PRICING VIEW */ .pricing-view .package-table-body .col { background-color: var(--primary-color-light-2); } .pricing-view .package-table-body .col:nth-of-type(1) { background-color: transparent; } .pricing-view .package-table-head .col, .pricing-view .package-table-body .col { display: none; } .pricing-view .package-table-head .col:nth-of-type(1), .pricing-view .package-table-body .col:nth-of-type(1), .pricing-view .package-table-head .col:nth-of-type(2), .pricing-view .package-table-body .col:nth-of-type(2) { display: block; } .pricing-view .price-table { margin-left: calc(0px - var(--space-24)); margin-right: calc(0px - var(--space-24)); padding-left: var(--space-24); overflow: auto; } .pricing-view .price-table .grid .box:hover { box-shadow: none; transform: none; } .pricing-view .price-table > .grid { min-width: 900px; padding-right: var(--space-24); } /* TOOLS VIEW */ .tools-view .blacklist-checker .blacklist-crea img, .tools-view .blacklist-monitor .blacklist-crea img, .tools-view .email-verifier .email-verifier-crea img, .tools-view .bounce-code .bounce-code-crea img, .tools-view .inbox-tester .inbox-tester-crea img, .tools-view .image-converter .image-converter-crea img { width: 100%; max-width: 350px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-16); } /* TOOLS VIEW - INBOX TESTER */ .tools-view .inbox-tester .inbox-tester-crea .email-submit { display: none; } /* GENERAL WIDGETS */ .widget-box.widget-about-tamas .crea-box img { display: block; border: 2px solid var(--white-color); margin: 0 auto; border-radius: 88px; width: 82px; height: 82px; vertical-align: middle; object-fit: cover; } .widget-box.widget-about-tamas .crea-box { align-self: baseline; } .widget-box.widget-affilate .earn-box { border-left: 0; } } @media all and (max-width: 680px) { :root { --h1: 32px; --h1-height: 32px; --h2: 20px; --h2-height: 24px; --h3: 18px; --h3-height: 24px; --h4: 14px; --h4-height: 20px; --normal-font: 16px; --normal-font-height: 20px; --small-font: 12px; --small-font-height: 16px; } /* WIDGETS */ .widget-article-img-signature-float .signature { max-width: 100%; position: static; border-top-left-radius: 0; border-top-right-radius: 0; } .widget-article-img-signature-float img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* BOXES */ .box, .box.box-huge { padding: var(--space-32) var(--space-24); } .box.box-small { padding: var(--space-16); } /* TAB BAR */ .xs-tab-bar-vert.tab-bar { padding: var(--space-4); display: block; border-radius: var(--large-radius); } .xs-tab-bar-vert.tab-bar .selected, .xs-tab-bar-vert.tab-bar .tab-item:hover { border-radius: var(--large-radius); } .xs-tab-bar-chips.tab-bar { display: block; background: transparent; white-space: nowrap; overflow: auto; width: calc(100% + var(--space-24)*2 ); margin-left: calc(0px - var(--space-24) ); margin-right: calc(0px - var(--space-24) ); padding-left: var(--space-24); border-radius: 0; } .xs-tab-bar-chips.tab-bar .tab-item { display: inline-block; border: 1px solid var(--primary-color-light-2); padding: var(--space-8); } .xs-tab-bar-chips.tab-bar .tab-item.selected { color: var(--white-color); background-color: var(--primary-color); border-color: var(--primary-color); } .xs-tab-bar-chips.tab-bar .tab-item:hover, .xs-tab-bar-chips.tab-bar .tab-item.selected:hover { border-radius: 64px; } .xs-left { text-align:left } .xs-center { text-align: center } .xs-hide { display: none!important } .xs-col-12 { -ms-flex-preferred-size: 100%!important; -webkit-flex-basis: 100%!important; flex-basis: 100%!important; max-width: 100%!important } /* MODAL */ .modal.invisible { max-width: 100%; top: auto; bottom: 0; left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: var(--space-24); -ms-transform: scale(1) translate(0%, 100%); transform: scale(1) translate(0%, 100%); } .modal { max-width: 100%; top: auto; bottom: 0; left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: var(--space-24); -ms-transform: scale(1) translate(0%, 0%); transform: scale(1) translate(0%, 0%); } .modal, .modal.modal.modal-fix-width { width: 100%; max-width: 100%; } /* FOOTER */ .footer h2 { font-size: 26px; line-height: 32px; } .footer .footer-logo { max-width: 164px; } /* LISTING VIEW */ .listing-view .article-card.huge-card .level { top: 136px; right: var(--space-16); transform: translate(0% , -50%); } .listing-view .article-card.huge-card.master { width: calc(100% + var(--space-24)*2 ); margin-left: calc(0px - var(--space-24)); margin-right: calc(0px - var(--space-24)); border-radius: 0; } .listing-view .article-card.huge-card.member { width: calc(100% + var(--space-24)*2 ); margin-left: calc(0px - var(--space-24)); margin-right: calc(0px - var(--space-24)); border-radius: 0; } .listing-view .article-card.huge-card.public { width: calc(100% + var(--space-24)*2 ); margin-left: calc(0px - var(--space-24)); margin-right: calc(0px - var(--space-24)); border-radius: 0; } .listing-view .article-card.huge-card.master img { border-radius: 0; } .listing-view .article-card:hover { transform: none; box-shadow: none; } .listing-view .article-card .content { min-height: auto; } /* PROFILE VIEW */ .profile-view .coupons .coupon-sepa { border-right: 0; } .profile-view .coupons .btn-primary { margin-left: 0; } .profile-view .affiliate-program .policy-agree { background-color: transparent; padding: 0; } .profile-view .avatar-img img { width: 94px; height: 94px; } .profile-view #edit_profile_img .img-upload { width: 280px; height: 280px; } .profile-view .automations .automation-crea img { margin-top: var(--space-16); } .profile-view #edit_profile_img .img-upload { padding-top: 64px; } .profile-view #dpa_modal h1, .profile-view #dpa_modal h1 span { font-size: 26px; line-height: 30px; } .profile-view #dpa_modal .dpa-content-wrap { max-height: 100vh; } .profile-view #dpa_modal .btn-disagree { display: block; width: 100%; } /* ARTICLE VIEW */ .article-view { padding-top: 0!important; } .article-view .article-content .article-body { --normal-font: 16px; --normal-font-height: 25px; } .article-view .article-head .update, .article-view .article-head .reading-time { display: none; } .article-head h1 { font-size: var(--h1); line-height: var(--h1-height); font-weight: 800!important; } .article-view .article-content { margin: 0 calc(0px - var(--space-24)); padding-top: calc( var(--space-16)*2 + 44px ); } .article-view .article.container { margin-top: 0; } .article-view .comment-block .avatar-box { position: relative; margin-top: -18px; } .article-view .comment-block .avatar-box .wrap { display: block; margin-left: 44px; } .article-view .comment-block p { padding-bottom: calc(8px + var(--space-24)); } .article-view .nested-comment-block { padding-left: var(--space-32); } .article-view .write-comment-block .icon-btn { right: var(--space-16); } .profile-view #edit_profile_img .img-upload { padding-top: 64px; } /* QUIZ */ #modal_quiz .answer-box .answer-item { flex-basis: 100%; max-width: 100%; } /* AFFILIATE VIEW */ .affiliate-view #balance_chart { width: calc(100% + var(--space-24)*2 ); margin-left: calc(0px - var(--space-24)); margin-right: calc(0px - var(--space-24)); } .affiliate-view .balance-data-prev .balance-item, .affiliate-view #balance_modal .balance-item { border-bottom: 1px solid var(--primary-color-light-2); padding-bottom: var(--space-8); margin-bottom: var(--space-8); } .affiliate-view .balance-data-prev .balance-item div:first-of-type, .affiliate-view #balance_modal .balance-data .xs-order-1 { font-size: var(--small-font); color: var(--light-gray); } .affiliate-view .account-balance .balance-data-prev { max-height: 178px; } .affiliate-view .recommend-us .tab-bar img { height: 26px; } .affiliate-view .recommend-us .tab-bar { padding: var(--space-4); display: block; border-radius: var(--large-radius); } .affiliate-view .tab-bar .selected, .tab-bar .tab-item:hover { border-radius: var(--large-radius); } /* WIDGETS */ .widget-general { display: block; } .widget-general .cover img { position: static; border-radius: var(--normal-radius); margin-bottom: var(--space-16); } .widget-general .action { text-align: center; margin-top: var(--space-16); } .widget-general .btn-primary { margin: 0; } /* TOOLS VIEW */ .tools-view .tools-menu { display: block; /* white-space: nowrap; */ overflow: auto; margin-left: calc(0px - var(--space-24)); padding-right: var(--space-24); padding-left: var(--space-24); width: calc(100% + var(--space-24)*2); } .tools-view .tools-menu > .col { width: 32%; display: inline-block; white-space: normal; padding: 2px 2px; vertical-align: top; } .tools-view .tool-item .material-icons { font-size: 24px !important; } .tools-view .box-trans { padding: 0; } .tools-view .reason-box .material-icons { padding: var(--space-16); } .tools-view .all-tools .tool-element { padding: var(--space-8); } .tools-view .all-tools .tool-element h2 { font-size: var(--normal-font); line-height: var(--normal-font-height); font-weight: 500; } .tools-view .all-tools .tool-item-box { width: calc(100vw - var(--space-24)*3 ) } /* TOOLS VIEW - BLACLKIST CHECKER */ .tools-view .blacklist-checker-result .api-box .api-cta-box { margin-top: var(--space-16); } .tools-view .blacklist-checker-result .highlight-result-box { width: 100%; max-width: 100%; } .tools-view .blacklist-checker-result .cta-text { padding: var(--space-16); } .tools-view .blacklist-checker-result .cta-text h1, .tools-view .inbox-tester-blacklist .cta-text h1 { font-size: 32px; line-height: 36px; } .tools-view .blacklist-checker-result .clear-result .box-highlight, .tools-view .blacklist-checker-result .blocked-result .box-highlight, .tools-view .inbox-tester-blacklist .clear-result .box-highlight, .tools-view .inbox-tester-blacklist .blocked-result .box-highlight { height: 208px; } .tools-view .automations .automation-crea img { margin-top: 0; margin-bottom: var(--space-16); } /* TOOLS VIEW - EMAIL VERIFIER */ .tools-view .email-verifier .result-item .remove { display: block; float: none; flex: auto; text-align: right; } .tools-view .email-verifier .result-item .remove .icon-btn { padding: 0; margin: 0; background-color: transparent; } /* TOOLS VIEW - INBOX TESTER */ .tools-view .inbox-tester-providers .highlight-result-box { max-width: 100%; } /* TOOLS VIEW - BOUNCE CODE */ .tools-view .bounce-code .bounce-code-result .err-info { border-top: 1px solid var(--primary-color-light-2); border-left: 0; padding-left: 0; margin-top: var(--space-16); padding-top: var(--space-16); } .tools-view .bounce-code .result-item .remove { display: block; float: none; flex: auto; text-align: right; } .tools-view .bounce-code .result-item .remove .icon-btn { padding: 0; margin: 0; background-color: transparent; } /* TOOLS VIEW - EMAIL TEMPLATES */ .tools-view #modal_template_preview .head > .col:nth-of-type(2) { flex: auto; display: block; } .tools-view #modal_template_preview .template-content { margin: calc(0px - var(--space-24)); margin-top: 0; } /* TOOLS VIEW - IMAGE CONVERTER */ .tools-view .image-converter .selected-images-box { min-height: 60vh; } .tools-view .image-converter .image-item .preview-img { height: 166px; } /* OUR TOOLS */ .our-tools-view .our-tool-cont .tool-preview { height: 240px; } /* 404 VIEW */ .missing-page-view .missing-page-crea { max-width: 240px; } /* ATTENTION BOX */ .attention-box { width: 100vw; bottom: 0; left: 0; border-radius: 16px 16px 0px 0px; padding-top: var(--space-48); } .attention-box .content { width: 100%; max-width: 100%; } .attention-box.active .close { right: var(--space-16); top: var(--space-16); } /* GENERAL WIDGETS */ .widget-box { padding: var(--space-24); } .widget-box.widget-about-tamas { padding-left: var(--space-24); } .widget-box.widget-member, .widget-box.widget-pro, .widget-box.widget-master { padding-left: var(--space-24); } .widget-box.widget-member .crea, .widget-box.widget-pro .crea, .widget-box.widget-master .crea { margin-bottom: 0; } .listing-view .col-8 .widget-box .grid > div:nth-child(1) { width: 100%; } .listing-view .col-8 .widget-box .grid > div:nth-child(1) img { margin-left: auto; margin-right: auto; } .listing-view .widget-box .grid > div:nth-child(2) { min-height: auto !important; } .listing-view .col-8 .widget-box.widget-review { min-height: auto; } .listing-view .col-8 .widget-box .grid > div:nth-child(1) img { max-height: 160px; max-width: 80%; } .listing-view .col-4 .widget-box .crea, .listing-view .col-4 .widget-box > .grid > div:nth-child(1) img { max-height: 160px; max-width: 80%; } .listing-view .col-4 .widget-box { min-height: auto; } }