/* 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;
    }

}