::-moz-selection 
{
    background: #333;
    color:#f5f5f5;
    text-shadow: none;
}

::selection 
{
    background: #333;
    color:#f5f5f5;
    text-shadow: none;
}

html, body 
{ 
    height: auto; min-height: 100%; 
}

body 
{ 
    overflow-y: visible; 
}

html
{
    background: #fff;
}

body
{
    font-family: "Google Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "GRAD" 0;
    margin:0px;
    color: #333;
    /*min-height:101vh;*/
    min-width:320px;
    /*max-width:100vw;*/
    /*overflow-x:hidden;*/
    /*overflow-y: auto;*/

    line-height: 25px;
    font-size: 13px;

    overscroll-behavior: none; /* iOS-en részben/inkonzisztensen */
    -webkit-overflow-scrolling: auto; /* ha valahol 'touch', az néha rángat */
}

body.busy 
{
    cursor: wait;
    filter: grayscale(1);
    opacity: 0.2;
    pointer-events: none;
}

body.busy *
{
    pointer-events: none;
}

@media( min-width:1080px ){

    body
    {
        line-height:30px;
        font-size:18px;
    }

}

body:not( .loaded )
{
    overflow:hidden;
}

@media( min-width:1025px ) and ( min-height:900px ){

    body
    {
        /*min-height:100vh;*/
        /*overflow-y:scroll;*/
    }

}

[data-tooltip]
{
    cursor:default;
}

/*
html,
body
{
    overflow-x:hidden;
}
*/

body.load-transition-ready
{
    transition:all 0.3s ease-out;
}

body.unloading
{
    transition:all 0.5s ease-out;
    transform:none;
}

*
{
    /*-webkit-overflow-scrolling: touch;*/
    position:relative;
    box-sizing:border-box;
    text-size-adjust: none;
}

h1
{
    margin:0px;
    padding:20px 0px;
}

p
{
    margin:0px;
    padding:20px 0px;
}

img,
iframe
{
    max-width:100%;
    vertical-align: middle;
}

a,
[data-popup]
{
    cursor: pointer;
    color:inherit;
    text-decoration: none;
    transition: all 0.1s ease-out;
}

a:hover
{
    text-decoration: underline;
}

a:active,
[data-popup]:hover
{
    transform: scale( 0.91 );
    opacity: 0.5;
}

input.error
{
    box-shadow: 0px 1px 1px rgb(227 34 116);
    background: #fff1f1;
}

input.apple-switch
{
    position: relative;
    appearance: none;
    outline: none;
    width: 50px;
    height: 20px;
    padding: 10px 20px;
    background-color: #F4F2F3;
    border-radius: 50px;
    transition-duration: 200ms;
    -webkit-transition-duration: 200ms;
    margin-left: 0px;
    margin-right: 10px;
}

input.apple-switch.magic-shipping
{
    background-color: #fff;
}

input.apple-switch:after
{
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    background-color: #A8A2A5;
    border-radius: 50%;
    transition: 0.1s all linear;
}

input.apple-switch:checked:after
{
    left: 20px;
    background-color: #9D547A;
}

input[type="checkbox"], .checkout input[type="radio"]
{
    width: fit-content;
    vertical-align: middle;
    display: inline-block;
}

.clear:before,
.clear:after
{
    content:" ";
    display:table;
}

br.clear
{
    clear:both;
}

.clear:after
{
    clear:both;
}

.clear
{
    *zoom:1;
}

.center
{
    text-align:center;
}

.prototype,
.hidden
{
    display:none !important;
}

.left
{
    float:left;
}

.right
{
    float:right;
}

.half
{
    width:50%;
}

.text-left
{
    text-align:left;
}

.zoom
{
    cursor:zoom-in;
    transition:all 0.2s ease-out;
}

.zoomed-image
{
    transition:all 0.1s ease-out !important;
    transition-delay:0s !important;
    cursor:zoom-out;
    transform:scale( 1.1 );
    background:rgba( 0,0,0,0.85 );
    z-index:340 !important;
}

.zoomed-image.active
{
    transform:none;
}

.zoomed-image img
{
    max-width:90%;
    max-height:90%;
    left:50%;
    top:50%;
    transform:translateY( -50% ) translateX( -50% );
}

.pointer-events-block
{
    pointer-events:none;
    opacity:0.6 !important;
}

.page
{
    z-index:1;
}

.page-content
{
    margin:0px auto;
    max-width:1080px;
    width:100vw;
}

/* Ezt a szekciót emeljük át backend-re, mert statikusan elég redundáns */

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 1 ),
.general-transition-delay-stair:nth-child( 1n + 1 )
{
    transition-delay:0.15s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 2 ),
.general-transition-delay-stair:nth-child( 1n + 2 )
{
    transition-delay:0.2s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 3 ),
.general-transition-delay-stair:nth-child( 1n + 3 )
{
    transition-delay:0.25s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 4 ),
.general-transition-delay-stair:nth-child( 1n + 4 )
{
    transition-delay:0.3s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 5 ),
.general-transition-delay-stair:nth-child( 1n + 5 )
{
    transition-delay:0.35s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 6 ),
.general-transition-delay-stair:nth-child( 1n + 6 )
{
    transition-delay:0.4s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 7 ),
.general-transition-delay-stair:nth-child( 1n + 7 )
{
    transition-delay:0.45s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 8 ),
.general-transition-delay-stair:nth-child( 1n + 8 )
{
    transition-delay:0.5s !important;
}

body:not( .load-phase-done ) .transition-delay-stair-during-load-phase:nth-child( 1n + 9 ),
.general-transition-delay-stair:nth-child( 1n + 9 )
{
    transition-delay:0.55s !important;
}

@media( min-width:1080px ){

    .mobile
    {
        display:none;
    }

}

@media( max-width:1079px ){

    .desktop
    {
        display:none !important;
    }

}

@media ( min-width: 1080px )
{

    .desktop-right
    {
        float: right;
    }

    .desktop-left
    {
        float: left;
    }

}

@media ( max-width: 767px )
{

    .desktop-and-tablet
    {
        display: none;
    }

}

/* Filter and similar windows */

.window-backdrop
{
    position:fixed;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background:rgba( 0,0,0,0.8 );
    z-index:320;
    pointer-events:none;
    opacity:0;
    transition:all 0.3s ease-out 0.5s;
}

.window-backdrop.active
{
    pointer-events:auto;
    opacity:1;
    transition:all 0.3s ease-out 0.3s;
}

.window-frame
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateY( -50% ) translateX( -50% );
    opacity:0;
    margin-top:-15%;
    transition:all 0.5s cubic-bezier(0.68, -0.15, 0.265, 1.35);
    background:#fff;
    color:#333;
    font-size: 14px;
    padding:20px;
    width:310px;
    border-radius:10px;
    box-shadow: 0px 20px 20px rgba( 0,0,0,0.3 );
    user-select:none;
}

.window-backdrop.active .window-frame
{
    transform:translateY( -50% ) translateX( -50% );
    opacity:1;
    margin-top:0px;
}

.window-heading
{
    text-transform: uppercase;
    color: #fff;
    text-shadow: 1px 1px 1px rgba( 0,0,0,0.1 );
    padding: 5px 10px;
    background: #3188ba;
    font-size: 25px;
    line-height: 40px;
    height: 46px;
    border-radius:inherit;
}

.window-frame label
{
    display: block;
    padding: 10px 0px 5px 2px;
}

.window-frame .option
{
    display: inline-block;
    vertical-align: top;
    margin-right:10px;
    margin-bottom:10px;
    min-width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    padding:0px 10px;
    transform-origin:50% 50%;
}

.window-frame .option:active
{
    transform:scale( 0.95 );
}

.window-frame .option:hover
{
    background:#f5f5f5;
}

.window-frame .option.active
{
    background:#e5e5e5;   
}

.window-frame button
{
    text-transform:uppercase;
    font-weight: normal;
    box-shadow: 1px 1px 0px 1px rgba( 0,0,0,0.2 );
    top: 10px;
    margin: 10px auto 20px auto;
    display: block;
    transform-origin:50% 50%;
    transition:none;
    padding-top:4px;
}

.window-frame button:active
{
    transform:scale( 0.98 ) translateY( 0.5px ) translateX( 0.5px );
    box-shadow: 1px 1px 0px 0px rgba( 0,0,0,0.4 );
    box-shadow:none;
}

/* 

    Aivagynem

*/

.hero 
{   
    padding-bottom: 30px;
    overflow: hidden;
    color: #fff;
    background: #5d2db5;
}

.hero .background.blurred
{
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    height: calc( 100% + 20px );
    width: calc( 100% + 20px );
    filter: blur( 5px );
    z-index: 0;
    background: #5d2db5;
}

.hero .content
{
    padding: 20px 0px;
}

.hero [src*="logo"]
{
    max-width: 160px;
    width: calc( 50% - 15px );
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    padding-top: 15px;
    vertical-align: middle;
}

.hero .cta
{
    display: inline-block;
    vertical-align: middle;
}

.hero .upload-area
{
    padding: 30px 0px;
    padding-bottom: 30px;
    border-radius: 25px;
    border: 3px dashed rgba( 255,255,255,0.7 );
    background: rgba( 255,255,255,0.1 );
    cursor: pointer;
    transition: all 0.1s ease-out;
    user-select: none;
    width: 92vw;
    min-width: 310px;
}

.hero .upload-area:hover
{
    background: rgba( 0,0,0,0.1 );
}

.hero .upload-area:active
{
    background: rgba( 0,0,0,0.2 );
}

.hero .upload-area span
{
    margin-right: 5px;
}

.hero .upload-area span img 
{
    height: 24px;
    vertical-align: middle;
    top: -1px;
}

.hero .upload-area small
{
    font-size: 11px;
    top: -1px;
    color: rgba( 255,255,255,0.9 );
}

.hero .upload-area.dragover
{
    border-color: #fff;
    background: rgba( 255,255,255,0.3 );
    transform: scale( 1.05 );
}

.hero .upload-area.busy
{
    pointer-events: none;
}

.hero .upload-area .busy-dependant
{
    position: absolute;
    top: 20px;
    bottom: 20px;
    height: calc( 100% - 40px );
    aspect-ratio: 1/1;
    left: 50%;
    transform: translateX( -50% );
    opacity: 0;
    pointer-events: none;
}

.hero .upload-area.busy .busy-dependant
{
    opacity: 1;
}

.hero .upload-area.busy .non-busy-dependant
{
    opacity: 0;
}

.hero .url input
{
    padding: 10px 20px;
    border-radius: 15px;
    border: 1px solid #eee;
    margin-top: 20px;
    display: block;
    width: 100%;
    font-size: 11px;
    box-shadow: 0px 2px 2px rgba( 0,0,0,0.5 );
}

.hero .url input:focus
{
    outline-color: #ddd;
}

.hero .url .social
{
    position: absolute;
    top: 50%;
    right: 20px;
    line-height: 10px;
    transform: translateY( -50% );
    background: #fff;
}

.hero .url .social img 
{
    margin-left: 4px;
    height: 14px;
    border-radius: 3px;
}

.hero .list-container
{
    max-width: 50%;
    display: inline-block;
    vertical-align: middle;
}

.hero .list 
{
    text-align: left;
    font-size: 85%;
}

.hero .list .item
{
    height: 20px;
    overflow: hidden;
    transition: all 0.3s ease-out;
}

.hero .list .item:nth-child( n+6 ):not( .visibility-anticipated ),
.hero .list .item.inactive
{
    height: 0px;
    opacity: 0;
    transform: translateY( -10px );
}

.hero h1
{
    margin: 0px;
    padding-bottom: 20px;
    padding-top: 0px;
    line-height: 30px;
    font-size: 22px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}

.hero h2
{
    margin-bottom: 8px;
    margin-top: 8px;
    font-size: 120%;
}

@media( min-width:640px ){

    .hero [src*="logo"]
    {
        padding-top: 0px;
    }

    .hero .upload-area
    {
        max-width: 310px;
    }

}

@media( min-width:1080px ){

    .hero .content
    {
        padding: 70px 0px;
    }

    .hero .upload-area
    {
        padding: 45px;
        padding-bottom: 40px;
        width:auto;
        margin-top: 20px;
        max-width: none;
    }

    .hero .upload-area small
    {
        font-size: 13.5px;
    }

    .hero .url .social img
    {
        margin-left: 3px;
        height: 18px;
    }

    .hero [src*="logo"]
    {
        padding: 0px;
        max-width: 256px;
    }

    .hero .list
    {
        font-size: 100%;
        padding: 0px 20px;
    }

    .hero .list .item
    {
        height: 30px;
    }

    .hero h1
    {
        padding-bottom: 50px;
        line-height: 40px;
        font-size: 36px;
    }

    .hero h2
    {
        margin: 22.5px 0px;
    }

    .hero .url input
    {
        font-size: 13px;
    }

}

.hero-overlay-bar
{
    padding: 5px 0px;
    width: 95vw;
    max-width: 600px;
    margin: 0px auto;
    top: -15px;
    margin-top: -5px;
    border-radius: 40px;
    box-shadow: 0px -3px 2px rgba(0, 0, 0, 0.2);
    font-size: 80%;
    background: #f5f5f5;
    color: #27261d;
    border-bottom: 2px solid #eee;
}

.hero-overlay-bar img 
{
    height: 14px;
    padding-right: 1px;
    vertical-align: middle;
    top: -1px;
}

.hero-overlay-bar .report
{
    color: #464d77;
}

.hero-overlay-bar .medal
{
    color: #8b460d;
}

.hero-overlay-bar .verified
{
    color: #34b0eb;
}

.hero-overlay-bar .content>span
{
    margin: 0px 1%;
}

@media( min-width:1080px ){

    .hero-overlay-bar
    {
        font-size: 75%;
        line-height: 30px;
        padding: 15px;
        top: -25px;
    }

    .hero-overlay-bar img 
    {
        height: 24px;
        padding-right: 5px;
    }

    .hero-overlay-bar .content>span
    {
        margin: 0px 3%;
    }

}

@media( max-width:374px ){

    .hero-overlay-bar .medal
    {
        display: none;
    }

}


h2 
{
    font-size: 100%;
    margin: 0px;
    margin-bottom: 0px;
}

.how-it-works h2 
{
    margin-bottom: 20px;
}

.how-it-works .steps
{   
    max-width: 1050px;
    margin: 0px auto;
}

.how-it-works .step 
{
    padding: 5px;
    padding-bottom: 20px;
    color: #222;
    font-size: 75%;
    line-height: 150%;

    width: 310px;
    border-right: 2px solid;
    padding-bottom: 5px;
    margin: 0px auto;
    margin-bottom: 3px;
    text-align: left;
}

.how-it-works .step .step-heading
{
    font-weight: bold;
    font-size: 90%;
}

.how-it-works .step>img 
{
    height: 25px;
    width: 25px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
    margin: 0px;
}

.how-it-works .step img[src*="crown"],
img[src*="crown"]
{
    height: 15px;
    width: 13px;
    object-fit: contain;
    top: -1px;
}

.how-it-works .text-content
{
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}

.how-it-works .step:nth-child( 1 )
{  
    color: #5d2db5;
}

.how-it-works .step:nth-child( 2 )
{  
    color: #b532ad;
}

.how-it-works .step:nth-child( 3 )
{  
    color: #d1328a;
}

.how-it-works .step:nth-child( 4 )
{  
    color: #e31e5f;
}

.how-it-works .step:nth-child( 5 )
{  
    color: #f37d00;
}

@media( min-width:500px ){

    .how-it-works .step
    {
        font-size: 100%;
        width: 400px;
    }

}

@media( min-width:1080px ){

    h2
    {
        font-size: 150%;
        margin: 10px 0px;
    }

    .how-it-works .steps
    {
        padding:20px 10px;
    }

    .how-it-works .step
    {
        font-size: 75%;
        padding: 20px 12px;
        width: auto;
        float: none;
        border-right:none;
        padding-bottom: 0px;
        margin: 0px auto;
        margin-bottom: 20px;
        text-align: center;
        display: inline-block;
    }

    .how-it-works .step>img
    {
        height: 50px;
        width: 50px;
    }

}

.actions button
{
    overflow: hidden;
    padding: 10px 14.5px;
    border-radius: 5px;
    overflow: hidden;
    font-size: 10px;
    font-weight: normal;
    display: inline-block;
    margin: 2px;
    margin-top: 20px;
    line-height: 15px;
}

.actions button:last-child
{
    background: #d1328a;
}

.actions button img 
{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 45px;
    height: 45px;
    object-fit: contain;
    padding: 12px;
    background: rgba( 0,0,0,0.2 );
    transition: all 0.3s ease-out;
}

.actions button.upload span,
.actions button.examples span
{
    padding-left: 0px;
}

.actions button.upload img,
.actions button.examples img
{
    display: none;
}

.actions button:hover
{
    background: #a7286e;
}

.actions button span
{
    padding-left: 30px;
    display: inline-block;
    transition: all 0.3s ease-out;
}

.actions button:hover span
{
    top: -2px;
}

.actions button:hover img
{
    background: transparent;
    width: 1px;
    opacity: 0;
}

@media( min-width:500px ){

    .actions button
    {
        padding: 12px 31px;
        font-size: 11px;
        height: 45px;
    }

}

@media( min-width:1080px ){

    .actions button
    {
        font-size: 13px;
        padding: 15px 30px;
        border-radius: 15px;
        margin: 20px;
        width: 300px;
        max-width: 100%;
    }

    .actions button.upload
    {
        width: 200px;
    }

    .actions button:hover span,
    .actions button.upload:hover span,
    .actions button.examples:hover span
    {
        padding: 0px;
        padding: 0px 8.5px;
    }

    .actions button.upload img,
    .actions button.examples img
    {
        display: inline-block;
    }

    .actions button.upload span,
    .actions button.examples span
    {
        padding-left: 30px;
    }

    .actions button span
    {
        padding-left: 30px;
    }

}

.no-break
{
    white-space: nowrap;
    word-break: keep-all;
}

.meta
{
    background: #222;
    padding: 25px 20px;
    color: #eee;
    font-size: 75%;
}

.meta.top
{
    /*padding: 5px 15px;*/
    padding: 5px 10px;
}

.meta img:not( .unicredit )
{
    height: 18px;
    margin-left: 7px;
    margin-right: 5px;
    vertical-align: middle;
    top: -1px;
}

.meta [data-popup]:has(img)
{
    /*margin-left: 20px;*/
    margin-left: 10px;
}

.meta [data-popup] img
{
    height: 17px;
    top: -1px;
    margin-right: 0px;
    transition: all 0.1s ease-out;
}

.meta [data-popup]:hover img
{
    opacity: 0.85;
}

.meta [data-popup]:active img
{
    opacity: 0.7;
    transform: scale( 0.95 );
}

.meta a 
{
    text-decoration: none;
    white-space: nowrap;
    word-break: keep-all;
    transition: all 0.1s ease-out;
}

.meta a:hover
{
    color: #aaa;
}

.meta a[href*="#"]:not( [href="#segitseg"] ):not( [href="#unicredit"] )
{
    font-weight: bold;
    margin-right: 10px;
}

.meta .user-level
{
    display: inline-block;
    padding: 0px 4.4px;
    line-height: 16px;
    background: #e31e5f;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 5px;
    text-transform: uppercase;

    height: 18px;
    width: 19px;
    line-height: 18px;
    padding: 0px;
    text-align: center;
    margin: 0px 6px;
    margin-right: 4.5px;
    font-weight: bold;
    font-size: 10px;
    color: #fff;
    top: -1px;
}

.meta .user-email
{
    max-width: calc( 100vw - 250px );
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 10px;
    color: #888;
}

.meta .user-level-container
{
    color: #888;
}

.meta .unicredit
{
    margin-top: 10px;
    border-radius: 10px;
    padding: 3px 4px;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    max-height: 38px;
    max-width: 300px;
}

.meta.bottom
{
    padding: 35px 10px;
    z-index: 11;
}

.meta.bottom .links
{
    top: 12px; 
    right: -5px;
}

.meta.bottom>.container
{
    margin-bottom: 10px;
}

.meta.bottom>.container.bottom
{
    margin-bottom: 0px;
}

@media( min-width:1024px ){

    .meta.bottom
    {
        z-index: 9;
    }

    .meta .unicredit
    {
        margin: 10px 0px;
        max-width: 380px;
    }

}

@media( min-width:1080px ){

    .meta,
    .meta.top
    {
        padding: 5px 10px;
    }

    .meta [data-popup]:has(img)
    {
        margin-left: 10px;
    }

    .meta>.container
    {
        /*max-width: 1100px;*/
        max-width: 1024px;
        margin: 0px auto;
    }   

    .meta .user-level
    {
        margin-left: 10px;
        margin-right: 10px;
    }

    .meta .user-email
    {
        margin-right: 0px;
    }

}

.pricing
{
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: 1200px;
    margin: 0px auto;
    gap: 0;
    background: transparent;
    padding: 0 10px 0 10px;
    padding-top: 80px;
}

.pricing ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing li
{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
    padding: 0 15px;
    font-size: 82%;
}

.pricing li img
{
    width: 25px;
}

.pricing-wrapper, 
.packet
{
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
}

.pricing-wrapper
{
    flex: 2;
}

.pricing-wrapper .card-header
{
    border-radius: 20px 0 0 0;
    background: #5d2db5;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.service-list
{
    background-color: #333;
    color: white;
    border-radius: 0 0 0 20px;
}

.service-list li
{
    border-bottom: 1px solid #444;
}

.service-list li:nth-child(even)
{
    background-color: rgba(255, 255, 255, 0.05);
}

.service-list li:last-child
{
    border-bottom: 0px;
}

.pricing-wrapper .service-list li:nth-of-type(3)
{
    border-radius: 0 0 0 20px;
}

.packet .card-header
{
    height: 140px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.packet:nth-of-type(2) .card-header { background: #b532ad; }
.packet:nth-of-type(3) .card-header { background: #d1328a; }
.packet:nth-of-type(4) .card-header { background: #e31e5f; }
.packet:nth-of-type(5) .card-header { background: #f77f00; border-radius: 0 20px 0 0; }

.status-list
{
    background-color: #fff;
}

.status-list li
{
    color: #666;
    font-weight: bold;
}

.status-list li:nth-child(even)
{
    background-color: #f9f9f9;
}

.packet:nth-of-type(5) .status-list,
.packet:nth-of-type(5) .status-list li:nth-of-type(3)
{
    border-radius: 0 0 20px 0;
}

.packet button
{
    margin-bottom: 20px;
}

.pricing-name
{
    text-transform: uppercase;
    font-weight: bold;
}

button
{
    user-select: none;
    color: #fff;
    background: #5d2db5;
    box-shadow: 0 5px 15px rgba(93, 45, 181, 0.4);
    padding: 10px 30px 10px 30px;
    margin: 20px 15px 0 15px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition:all 0.1s cubic-bezier( 0.68 , -0.15 , 0.265, 1.35 ), color 1ms linear, text-shadow 1ms linear;
}

button::after
{
    content: '';
    position: absolute;
    width: 90%;
    transform: scaleX(0); /* Alaphelyzetben nulla a szélessége */
    height: 2px;
    bottom: 15%;
    left: 5%;
    background-color: rgba( 255, 255, 255, 0.7 );
    transform-origin: bottom right;
    transition: transform 0.25s ease-out; /* Itt az animáció titka */
}

button:hover::after
{
    transform: scaleX(1);
    transform-origin: bottom left;
}

button:active
{
    top: 1px;
}

.packet:nth-of-type(2) button { background: #b532ad; box-shadow: 0 2px 2px rgba(181, 50, 173, 0.4);  }
.packet:nth-of-type(3) button { background: #d1328a; box-shadow: 0 2px 2px rgba(209, 50, 138, 0.4);  }
.packet:nth-of-type(4) button { background: #e31e5f; box-shadow: 0 2px 2px rgba(227, 30, 95, 0.4); }
.packet:nth-of-type(5) button { background: #f77f00; box-shadow: 0 2px 2px rgba(247, 127, 0, 0.4);  }

.packet:nth-of-type(4) .card-header
{
    transform: translateY(-20px);
    z-index: 10;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
    border-radius: 20px 20px 0 0;
}

.packet:nth-of-type(4) .status-list
{
    transform: translateY(-20px);
    z-index: 10;
    box-shadow: 0 -30px 30px rgba(0,0,0,0.1);
}

.card-header img[src*="logo"]
{
    height: 80px;
}

@media (max-width: 768px) {

    .packet:nth-of-type(4) .card-header
    {
        transform: translateY(-10px);
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    .packet:nth-of-type(4) .status-list
    {
        transform: translateY(-10px);
    }

    .pricing-wrapper
    {
        flex: 3;
    }

    .packet
    {
        flex: 1;
        min-width: 45px;
    }

    .packet button
    {
        margin-bottom: 5px;
    }

    .pricing
    {
        margin: 0px auto 0px auto;
        padding-top: 60px;
    }

    .pricing li
    {
        border-right: 1px solid #eee;
        border-bottom: none;
        height: 35px;
        line-height: 16.5px;
    }

    .pricing li img
    {
        width: 18px;
    }

    .price
    {
        margin-top: 5px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        margin: 0 auto;
    }

    .packet button
    {
        writing-mode: horizontal-tb;
        transform: none;
        margin-top: 15px;
        padding: 10px 2px;
        font-size: 10px;
        border-radius: 8px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 40px;
        text-transform: uppercase;
        overflow: hidden;
        color: transparent;
        position: relative;
    }

    .packet button::before
    {
        content: '';
    }

    .packet button img
    {
        position: absolute;
        top: 50%;
        transform: translateY( -50% ) scale( 0.75 );
    }

    .card-header img[src*="logo"]
    {
        display: block;
        margin-bottom: 10px;
    }

}

.packet .status-list ul li:last-child
{
    border-bottom: none;
}


.under-development .title
{
    margin: 0px 10px 30px 10px;
}

html.popup-open,
html.popup-open body
{
    overflow: hidden;
    height: 100%;
}

/*

html.popup-open .meta
{
    opacity: 0;
}

*/

.popup
{
    display: none;
    position: fixed;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(95, 84, 90, 0.9);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: all 0.15s ease-out;
    -webkit-overflow-scrolling: touch;
}

.popup.active
{
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.popup .content
{
    padding: 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
    max-width: 320px;
    width: 95%;
    position: absolute;
    top:calc( 50% - 30px );
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    max-height: calc(100% - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.popup .content button
{
    margin-top: 30px;
}

.popup iframe
{
    width: 100%;
    height: calc( 100% - 100px );
}

.packet a:hover
{
    text-decoration: none;
    color: #666666a8;
}

.popup.under-development .content
{
    text-align: center;
    /*background: #f4f2f3;*/
}

.popup .title
{
    font-weight: bold;
    margin-bottom: 10px;
    margin: 10px 0px 20px 0px;
}

.popup .title img 
{
    display: block;
    margin: 0px auto;
    margin-bottom: 20px;
}

.popup small
{
    font-size: 85%;
    line-height: 150%;
    display: block;
}

.popup small.flow-text 
{
    font-size: 10px;
}

.popup details summary small
{
    display: none;
}

.popup details[open] summary small.open-only
{
    display: inline;
}

.popup details:not( [open] ) summary small.closed-only
{
    display: inline;
}

.popup hr 
{
    margin: 10px 0px;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.popup .form
{
    padding: 5px 0px;
}

.popup .form select,
.popup .form input
{
    padding: 10px 20px;
    margin-top: 10px;
    display: block;
    width: 100%;
    border-radius: 5px;
    border:1px solid #ddd;
}

.popup .form details summary
{
    font-size: 12px;
    margin-top: 10px;
    cursor: pointer;
}

.popup .actions button
{
    border-radius: 5px;
    width: 100%;
    margin: 10px 0px;
    padding: 15px 14.5px;
    font-size: 13px;
    transition: all 0.1s ease-out;
}

.popup .warning
{
    text-align: left;
    padding: 10px 15px;
    background: #fffbd4;
    color: #5b531b;
    font-size: 12px;
    line-height: 19px;
    border-radius: 5px;
    border: 1px solid #dfd352;
    margin-top: 5px;
    margin-bottom: 1px;
}

.aszf-info
{
    padding: 15px 0px;
}

.aszf-info .label
{
    font-size: 66%;
    line-height: 13px;
    width: calc(100% - 55px);
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding-left: 10px;
}

@media( min-width:600px ){

    .popup .content
    {
        padding: 30px 40px;
        max-width: 400px;
    }

    .popup.wide .content
    {
        padding: 30px 40px;
        max-width: 600px;
    }

    .popup .form details summary
    {
        font-size: 15px;
    }

    .aszf-info .label
    {
        font-size: 58%;
        line-height: 16px;
    }

    .popup .actions button.desktop-left,
    .popup .actions button.desktop-right
    {
        width: 275px;
    }

}

/* Eredmény */

.eredmeny.not-ai .hero .vanta.blurred
{
    /*filter: blur( 5px ) hue-rotate( 220deg ) brightness(1.5) contrast(1.1);*/
    /*filter:blur(5px) hue-rotate(260deg) brightness(1.3) contrast(1.1);*/
}

.eredmeny.not-ai .topic-category .topic b
{
    /*color: #005dd1;*/
}

.eredmeny.ai .hero .vanta.blurred
{
    /*filter: blur( 5px ) hue-rotate( 80deg ) brightness( 1.2 ) contrast( 1.1 );*/
    filter:blur( 5px ) hue-rotate( 40deg ) brightness( 1.1 ) contrast( 1 );
}

.eredmeny.ai .topic-category .topic b
{
    color: #a80e47;
}

.eredmeny .short-result
{
    font-size: 20px;
    line-height: 35px;
    font-weight: bold;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}

.eredmeny .short-result .conclusion
{
    border: 2px solid #fff;
    padding: 10px 16px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
    width: 295px;
    margin-left: 0px;
    margin-top: 10px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}

.eredmeny .short-explanation
{
    max-width: 700px;
    margin: 15px auto 0px auto;
}

.eredmeny .short-explanation .text
{
    background: #fff;
    padding: 20px 15px;
    border-radius: 10px;
    color: #444;
    font-size: 80%;
    line-height: 150%;
    max-width: 90vw;
    margin: 0px auto;
    width: 600px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}

.eredmeny .short-explanation .text:before
{
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 3px solid #eee;
    border-radius: 8px;
}

.eredmeny .short-explanation .text:after
{
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    left: calc( 50% - 10px );
    top:-10px;
    z-index: 3;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
}

.eredmeny .warning
{
    text-align: left;
    padding: 10px 15px;
    background: #fffbd4;
    color: #5b531b;
    font-size: 11.5px;
    line-height: 19px;
    border-radius: 5px;
    border: 1px solid #dfd352;
    margin-top: 0px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    /* margin: 30px; */
    margin: 0px auto 20px auto;
    max-width: 690px;
    width: calc( 100% - 40px );
}

.eredmeny .warning hr
{
    border: none;
    height: 0px;
    border-top: 1px solid #dfd352;
    margin: 10px 0px;
}

.eredmeny .hero-overlay-bar
{
    margin-top: -27px;
    padding: 12px 0px 16px 0px;
    line-height: 230%;
    margin-top: -22px;
    user-select: none;
}

.eredmeny .hero-overlay-bar .packet-name
{
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px;
    margin: 0px 4px;
    background: #222;
    color: #fff;
    border-radius: 5px;
    font-weight: 500;
    top: -1px;
}

/*

.eredmeny .hero-overlay-bar .packet-name.XS
{
    background: #b532ad;
}

.eredmeny .hero-overlay-bar .packet-name.S
{
    background: #d1328a;
}

.eredmeny .hero-overlay-bar .packet-name.M
{
    background: #e31e5f;
}

.eredmeny .hero-overlay-bar .packet-name.L
{
    background: #f77f00;
}

*/

.eredmeny .hero [src*="logo"]
{
    padding-top: 0px;
    padding-bottom: 20px;
}

@media( min-width:580px ){

    .eredmeny .hero-overlay-bar
    {
        padding: 18px 0px;
        margin-top: -12px;
    }

    .eredmeny .hero-overlay-bar br
    {
        display: none;
    }

    .eredmeny .short-result .conclusion
    {
        width:auto;
        margin-left: 10px;
        margin-top: 0px;
    }

}

@media( min-width:1080px ){

    .eredmeny .short-result
    {
        font-size: 30px;
    }

    .eredmeny .hero .content
    {
        padding: 40px 0px;
    }

    .eredmeny .short-explanation
    {
        margin: 30px auto;
    }

    .eredmeny .short-explanation .text
    {
        padding: 20px 25px;
        text-align: left;
        width: calc( 100% - 270px );
        display: inline-block;
        vertical-align: middle;
    }

    .eredmeny .short-explanation .text:after
    {
        left: -10px;
        top: auto;
        bottom: calc(50% - 10px);
        border-right: 10px solid #fff;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: none;
    }

}

.eredmeny .topics
{
    padding: 0px 10px 40px 10px;
}

.eredmeny .topic-category
{
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba( 0,0,0,0.2 );
    font-size: 80%;
    line-height: 150%;
    padding: 4px 10px;
}

.eredmeny .topic-category .title
{
    padding: 10px 0px;
    padding-bottom: 0px;
    font-size: 100%;
    font-weight: bold;
}

.eredmeny .topic-category .topic
{
    padding: 5px 18px;
    padding-right: 0px;
    margin: 15px 7px;
    border-left: 1px solid rgba( 0,0,0,0.1 );
}

.eredmeny .topic-category .topic .heading
{
    padding-right: 10px;
    padding-bottom: 5px;
    font-weight: 500;
    display: block;
}

.eredmeny .topic-category .topic img,
.eredmeny .topic-category .topic .video-container
{
    margin: 10px 0px;
    max-width: 100%;
}

.eredmeny .topic-category .topic .video-container video,
.eredmeny .topic-category .topic .video-container img
{
    width: 300px;
    min-width: calc(50% - 5px);
    max-width: 100%;
    border-radius: 5px;
    height: 300px;
    background: #222;
    object-fit: contain;
}

.eredmeny .topic-category .topic .paywall
{
    display: block;
    padding: 5px 10px;
    border: 3px solid #f5f5f5;
    background: #fafafa;
    font-size: 95%;
    color: #666;
    border-radius: 8px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
}

.eredmeny .topic-category .topic .paywall.inline
{
    display: inline-block;
    vertical-align: text-bottom;
    margin-left: 0px;
    margin-top: 0px;
    top: 3px;
    padding: 2px 8px 2px 5px;
    border: 0px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    color: #aaa;
    font-size: 70%;
}

.eredmeny .topic-category .topic b 
{
    font-weight: 500;
    color: #921577;
}

@media( min-width:600px ){

    .eredmeny .topic-category
    {
        padding: 10px 20px;
    }

    .eredmeny .topic-category .topic
    {
        padding: 5px 22px;
    }

    .eredmeny .topic-category .title
    {
        padding: 10px 0px;
        font-size: inherit;
    }

    .eredmeny .topic-category .topic .video-container video,
    .eredmeny .topic-category .topic .video-container img
    {
        margin-right: 5px; 
    }

    .eredmeny .topic-category .topic .paywall
    {
        font-size: 80%;
    }

    .eredmeny .topic-category .topic .paywall.inline
    {
        margin-left: 5px;
    }  

}

/* Fő loading detektálás alatt  */

body.detection-loading-active
{
    overflow: hidden;
}

.detection-loading
{
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    overflow:hidden;
    position:fixed;
    inset:0;
    z-index:9999;
    background:#111;
    color: #fff;
    font-size:95%;
    opacity: 0;
    transition: all 1s ease-out;
    pointer-events: none;
}

body.detection-loading-active .detection-loading
{
    opacity: 1;
    pointer-events:auto;
}

.detection-loading video,
.detection-loading img,
.detection-loading .vanta
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.05;
    filter: blur( 2px );
    z-index: 2;
}

@keyframes opacityPulse {

    0% { 
        opacity: 0.05; 
        filter: blur( 2px ); 
    }
    
    50% { 
        opacity: 0.15; 
        filter: blur( 0px ); 
    }
    
    100% { 
        opacity: 0.05; 
        filter: blur( 2px ); 
    }

}

.detection-loading video,
.detection-loading img
{
    animation:opacityPulse 2s ease-in-out infinite;;
}

.detection-loading .vanta
{
    opacity: 0.8;
    filter: blur( 5px );
    z-index: 1;
}

.detection-loading .content
{
    position: absolute;
    top: calc( 50% );
    left: 50%;
    transform: translateY( -50% ) translateX( -50% );
    z-index: 3;
}

.detection-loading .content svg
{
    height: 100px;
    margin-bottom: 30px;
}

.detection-loading .changing-text 
{
    height: 70px;
    line-height: 35px;
    font-size: 175%;
    min-width: 300px;
    width: 90vw;
    overflow: hidden;
}

.detection-loading .changing-text .text 
{
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    filter: blur(6px);
    transition:
        opacity 0.6s ease,
        transform 0.6s cubic-bezier(.68,-0.15,.265,1.35),
        filter 0.6s ease;
}

.detection-loading .changing-text .text.active 
{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    z-index: 2;
}

.detection-loading .changing-text .text.exit 
{
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
    filter: blur(6px);
    z-index: 1;
}

/* Segítség */

.segitseg
{
    font-size: 80%;
}

.segitseg a img
{
    margin-right: 10px;
}

/* Bejelentkezés */

.bejelentkezes input
{
    padding: 10px 20px;
    border-radius: 5px;
}

.bejelentkezes button
{
    background: #219bee;
}

/* Esettanulmányok */

.examples
{
    padding-top: 50px;
    padding-bottom: 30px;
}

.examples .card-stack
{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-padding-left: 10px;
    contain: content;
    padding: 20px;
    padding-bottom: 0px;
    outline: none;

    -webkit-overflow-scrolling: touch;
}

.examples .card-stack .card
{
    display: inline-block;
    vertical-align: top;
    /*width: 140px;
    height: 240px;*/
    width: 300px;
    height: 600px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba( 0,0,0,0.3 );
    border: 5px solid #f5f5f5;
    margin: 5px;
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.examples .card-stack::-webkit-scrollbar
{
    height: 0px;
    opacity: 0;
}

/*

.examples .card-stack .card:after
{
    content: "";
    position: absolute;
    height: 100px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

*/

.examples .card-stack .card:after
{
    content: "Megnézem az elemzést →";
    height: 69px;
    line-height: 109px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: #f5f5f5;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(245 245 245) 50%, rgb(245 245 245) 100%);
    text-shadow: 0px 1px 0px rgba( 0,0,0,0.1 );
    color: #5d2db5;
    transition: all 0.3s ease-out;
    pointer-events:none;
    scroll-snap-align: start;
}

.examples .card-stack .card:hover
{
    /*border-color: #e31e5f;*/
    border-color: #ddd;
}

.examples .card-stack .card:hover img 
{
    /*opacity: 0.9;*/
}

.examples .card-stack .card:hover:after
{
    color: #d1328a;

    /* color: #fff;
       background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #e31e5f 50%, #e31e5f 100%);*/

    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ddd 50%, #ddd 100%);
}

.examples .card-stack .card:active
{
    border-color: #222;
}

.examples .card-stack .card:active:after
{
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #222 50%, #222 100%); */
    color: #222;
}

.examples .card-stack .card img 
{
    border-radius: 5px;
}

.examples .card-stack .card video.playing
{
    pointer-events: none;
}

.examples .card-stack .card video,
.examples .card-stack .card>img:first-child,
.examples .card-stack .card .index
{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111;
    display: block;
    border-radius: 5px;
    overflow: hidden;
    border-bottom: 3px solid #f5f5f5;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.examples .card-stack .card .index img
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY( -50% ) translateX( -50% );
    z-index: 2;
}

.examples .card-stack .card img ~ video,
.examples .card-stack .card .index ~ video
{
    display: none;
}

.examples .card-stack .card img.poster-clicked,
.examples .card-stack .card .index.poster-clicked
{
    display: none;
}

.examples .card-stack .card img.poster-clicked ~ video,
.examples .card-stack .card .index.poster-clicked ~ video
{
    display: block;
}

@media( min-width:1024px ){

    .examples .card-stack .card
    {
        width: 200px;
        height: 340px;
    }

    .examples .card-stack .card
    {
        width: 410px;
        height: 820px;
    }

    .examples .card-stack .card:after
    {
        height: 95px;
        line-height: 143px;
        font-size: 15px;
    }

    .examples .card-stack .card video
    {
    }

}

.popup.unicredit
{
    font-size: 80%;
    line-height: 130%;
    text-align: left;
}

.popup.unicredit .card-brands
{
    display: block;
    padding: 5px 13px;
    margin-bottom: 5px;
    border-radius: 8px;
    box-shadow: 0px 1px 2.8px 0px rgba(0, 0, 0, 0.25);
    background: #fff;
    vertical-align: middle;
    font-size: 80%;
    line-height: 32px;
    height: 42px;
    max-width: 280px;
}

.popup.unicredit .card-brands img
{
    margin: 3px 0px 3px 8px;
}

.popup.unicredit .text
{
    padding: 10px 0px;
    font-size: 90%;
}

@media( min-width:600px ){

    .popup.unicredit .text
    {
        font-size: 85%;
    }

}

.popup.extrawide .content
{
    max-width: 1080px;
}

.popup .pricing
{
    margin: 10px -10px;
    padding: 10px 0px;
}

.popup.adategyeztetes
{
    z-index: 10000;
}

@keyframes floatingChatHangleHighlight {
    0%   { background: #fa206a; }  
    50%  { background: #3f3fff; }  
    100% { background: #fa206a; }  
}

.floating-chat-handle
{
    position: fixed;
    bottom: 25px;
    right: 0px;
    /*width:280px;*/
    z-index: 10;
    padding: 8px;
    padding-right: 30px;
    border-radius: 19px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    background: #eee;
    border: 2px solid #fff;
    box-shadow: 0px 2px 2px rgba( 0,0,0,0.3 );
    user-select: none;
    transition: all 0.1s ease-out;
    cursor: pointer;
    overflow: hidden;

    transform: none !important;
    opacity: 1 !important;
}

.floating-chat-handle:hover
{
    background: #ddd;
}

.floating-chat-handle:active
{
    background: #ccc;
}

.floating-chat-handle:before
{
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    height: calc( 100% - 16px );
    transform: translateY( -50% );
    width: 5px;
    border-radius: 5px;
    animation: floatingChatHangleHighlight 3s linear infinite;
}

.floating-chat-handle img
{
    height: 40px;
}

.floating-chat-handle .text
{
    max-width: calc( 100% - 40px );
    font-size: 13px;
    line-height: 20px;
    margin-left: 10px;
}

@keyframes sheen {

    0%   { left:-160%; }
    45%  { left:-160%; }
    100% { left:190%; }

}

.floating-chat-handle:after
{
    content:"";
    position:absolute;
    top:-25%;
    left:-160%;
    width:75%;
    height:150%;
    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.65), transparent );
    animation: sheen 3.8s ease-in-out infinite;
    pointer-events:none;
    z-index: 3;
}

.explanation .floating-chat-handle
{
    position: relative;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: 10px;
}

.ai-szakerto .content
{
    padding:5px;
}

.ai-szakerto .conversation
{
    text-align: left;
    border-radius:9px;
    background: #eee;
    padding: 10px;
    font-size: 13px;
    line-height: 18px;
    padding: 5px;
}

.ai-szakerto .conversation .messages
{
    min-height: 200px;
}

.ai-szakerto .conversation .message
{
    margin: 10px;
}

.ai-szakerto .conversation .message.user 
{

}

.ai-szakerto .conversation .message img
{
    height: 40px; 
    float: left;
    margin-right: 10px;
    vertical-align: middle;
}

.ai-szakerto .conversation .message .text
{
    float: left;
    max-width: calc(100% - 50px);
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

.ai-szakerto .conversation .message.user .text
{
    float: right;
    background: #674f61;
    color: #fff;
    max-width: calc(100% - 50px);
    width: auto;
}

.ai-szakerto .conversation .message .text:before
{
    content: "";
    position: absolute;
    left: -7px;
    top: 10px;
    border-right: 8px solid #fff;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: none;
}

.ai-szakerto .conversation .message.user .text:before
{
    display: none;
}

.ai-szakerto .conversation .message .text:after
{
    content: " ";
    display: inline-block;
    font-size: 1px;
}

.ai-szakerto .conversation .new-message
{
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    width: calc(100% - 20px);
    margin-top: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    outline: none;
}

.ai-szakerto .conversation .new-message.status-display
{
    display: none;
    margin-top: -49px;
    background: #eee;
}

.ai-szakerto .conversation .new-message[disabled] ~ .status-display
{
    display: block;
}

.ai-szakerto .conversation .new-message.status-display img
{
    height: 17px;
    margin-right: 5px;
}

.popup.ai-szakerto.active ~ .floating-chat-handle
{
    display: none;
}

.ai-szakerto .x 
{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    line-height: 31px;
    color: #222;
    z-index: 2;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.ai-szakerto .x:hover
{
    background: rgba( 0,0,0,0.15 );
}

.ai-szakerto .x:active
{
    background: rgba( 0,0,0,0.2 );
}

.szerkeszto .title
{
    margin-top: 25px;
    line-height: 150%;
}

.szerkeszto input
{
    outline: none;
    width: 100%;
    margin-top: 50px;
}

.szerkeszto .preview-container
{
    background: #111;
    border-radius: 10px;
} 

.szerkeszto video 
{
    object-fit: contain;
    width: 100%;
    aspect-ratio: 16/9;
    background: inherit;
    margin-top: 20px;
    /*pointer-events: none;*/
    transition: all 0.3s ease-out;
}

.szerkeszto video.loading
{   
    opacity: 0.8;
}

.szerkeszto .text 
{
    padding-top: 20px;
    padding-bottom: 10px;
}

.szerkeszto .text b 
{
    color: #881798;
}

.szerkeszto .timeline-wrap
{
    position:relative;
    margin-top:10px;
    height:56px;
    border-radius:10px;
    background:#111;
}

.szerkeszto .timeline-canvas
{
    display:block;
    width:100%;
    height:56px;
    border-radius:10px;
}

.szerkeszto .timeline-selection
{
    position:absolute;
    top:0;
    height:100%;
    border-radius:10px;
    background:rgba(250,32,106,0.22);
    outline:2px solid rgba(250,32,106,0.9);
    box-shadow:0 0 0 9999px rgba(0,0,0,0.25) inset;
    cursor:grab;
    touch-action:none;
    transition: all 0.1s ease-out;
}

.szerkeszto .timeline-selection.dragging
{ 
    cursor:grabbing; 
}

.szerkeszto .timeline-tooltip
{
    display: none;

    position:absolute;
    top:-34px;
    padding:6px 10px;
    border-radius:10px;
    background:rgba(0,0,0,0.75);
    color:#fff;
    font-size:12px;
    white-space:nowrap;
    transform:translateX(-50%);
    pointer-events:none;
    opacity:0;
    transition:opacity .12s ease;
}

.szerkeszto .timeline-tooltip.active
{ 
    opacity:1; 
}

.popup[class*="minta"]
{

}

.popup[class*="minta"] iframe
{
    /*height: calc(100vh - 305px);*/
    height: calc( 100vh - 125px );
    margin-top: 100px;
}

.popup[class*="minta"] .content
{
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7);
    width: calc( 100% - 20px );
    height: calc( 100% - 20px );
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    transform: none;
    max-height: 100%;
    max-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.popup[class*="minta"] .actions
{
    background: #222;
    padding: 20px 40px;
    position: absolute;
    z-index: 2;
    left: 0px;
    top: 0px;
    right: 0px;
}

.popup[class*="minta"] .actions .supporting-text
{
    color: #fff;
    padding-right: 10px;
    font-size: 80%;
    line-height: 65px;
}

.popup[class*="minta"] .actions button
{
    box-shadow: none;
}

.popup[class*="minta"] .actions [href*="#minta"] button
{
    width: 50px;
    margin-right: 10px;
}

.popup[class*="minta"] .actions [href*="#minta"] button span
{
    padding-left: 0px;
}

.popup[class*="minta"] .actions [href*="#minta-XS"] button { background: #b532ad; box-shadow: 0 2px 2px rgba(181, 50, 173, 0.4);  }
.popup[class*="minta"] .actions [href*="#minta-S"] button { background: #d1328a; box-shadow: 0 2px 2px rgba(209, 50, 138, 0.4);  }
.popup[class*="minta"] .actions [href*="#minta-M"] button { background: #e31e5f; box-shadow: 0 2px 2px rgba(227, 30, 95, 0.4); }
.popup[class*="minta"] .actions [href*="#minta-L"] button { background: #f77f00; box-shadow: 0 2px 2px rgba(247, 127, 0, 0.4);  }

.popup[class*="minta"] .actions [href*="#minta"].disabled button
{
    pointer-events: none;
    filter: grayscale( 1 );
}

#gyik
{
    padding-top: 20px;
}

.gyik
{
    font-size: 80%;
    line-height: 150%;
    padding: 20px 0px;
}

.gyik details
{
    border: 1px solid #eee;
    padding: 20px;
    margin: 5px;
    display: inline-block;
    width: calc(100% - 10px);
    border-radius: 8px;
    vertical-align: top;
    text-align: left;
}

.gyik details summary
{
    margin: -16px;
    padding: 10px;
    user-select: none;
    cursor: pointer;
}

.gyik details:not( [open] ) summary:hover
{
    background: #fafafa;
}

.gyik details .answer
{
    padding: 19px;
    padding-bottom: 7px;
}

.gyik details .answer a
{
    font-weight: bold;
    color: #226;
}

@media( min-width:1024px ){

    #gyik
    {
        padding-top: 40px;
    }

    .gyik
    {
        padding-bottom: 40px;
    }

    .gyik details
    {
        width:calc( 50% - 10px );
    }

    .gyik details[open]
    {
        width:calc( 100% - 10px );
    }

    .gyik details summary
    {
        padding: 20px;
    }

}