/* @import "../css/reset.css"; */

      
        @font-face {
            font-family: TeleGroteskNext;
            src: url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGrotesk-NextRegular.woff2) format('woff2'),
			url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGrotesk-NextRegular.woff) format('woff'),
			url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Regular.ttf) format('truetype')
        }

        @font-face {
            font-family: TeleGroteskNext;
            src: url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Medium.woff2) format('woff2'),
			url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Medium.woff) format('woff'),
			url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Medium.ttf) format('truetype')
        }

        @font-face {
            font-family: TeleGroteskNext;
            src: url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Bold.woff2) format('woff2'),
			url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Bold.woff) format('woff'),
			url(/static-la/alkalmazasok/lp/szamlamagyarazo/static/fonts/TeleGroteskNext-Bold.ttf) format('truetype');
			font-weight: bold;
        }


/*--------------------*/
html.responsiveFrame section#frameContainer *, html.responsiveFrame section#frameContainer :after, html.responsiveFrame section#frameContainer :before {
    box-sizing:content-box; !important
}
	 
         html, body {
            background: #f7f8f9;
            font-family: TeleGroteskNext, Arial, sans-serif;
            font-size: 12px;
        }
        
        /*számlán belül*/     
        p {
            padding-bottom: 24px;
        }           

        #container {
            margin: 0 auto;
            max-width: 1152px;
            overflow: auto;
        }

        .pages {
            margin: 0 2rem;
        }
        
        .page {
            /* padding: 30px; */
            background: white;
            position: relative;
            min-height: 1100px;
        }

        /*-----------------------------------------*/
        /* tabos lapfüles cucc*/
        .content {
            background: #fff;
            border: 1px solid black;
            width: 800px;
        }
       
      /*  .content > section:not(:first-child) {*/
        .content > section {
               display: none;
        }
       
        input {
            display: none;
        }
       
        label {
            margin-bottom: -1px;
            display: inline-block;
            background:#fff;
            padding: 10px 20px;
            text-align: center;
            border: 1px solid #000;
            font-size: 1.5em;
            font-weight: 700;
        }
        label:hover {
            background: #f3118f;
            color: #000;
            cursor: pointer;
        }
        input:checked + label {
            background: #fff;
            color: #e2007f;
            border-bottom: 1px solid #fff;
        }

        #tab-1:checked ~ .content #page1,
        #tab-2:checked ~ .content #page2,
        #tab-3:checked ~ .content #page3,
        #tab-4:checked ~ .content #page4 {
            display: block;
        }

        /* ----------------------------------------- */
        section img {
            padding: 10px 0px;
        }

        section p {
            font-family: TeleGroteskNext, Arial, sans-serif;
            font-size: 1.1rem;
            line-height: 1;
        }

        .text-smol {
            font-size: .9rem;
        }


/*---------------------------------------------------*/
 
       /* TOOLTIP */

.hover {
    background-color: #e2007440 !important;
    transition: background-color .2s ease-in-out;
    border-radius: 5px;
    width: inherit;
}

.hl {
    position: absolute;
    top: 0px;
    left: 1px;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 5px;
    border: 1px solid #e20074;
    background: #e2007415;
    margin: 0 -2px;
    padding: 0 2px;
}


/* Popup container */
.popup {
    position: relative;
    /*display: inline-block;*/
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* z-index: 10; */
    margin-bottom: 2px;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 272px;
    background-color: #e20074;
    color: #fff;
    text-align: center;
    font-size:1.1rem;
    line-height: 20px;
    border-radius: 8px;
    padding: 10px;
    position: absolute;
    z-index: 100;
    bottom: 110%;
    left: 30px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 26%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #e20074 transparent transparent transparent;
}

        .popup .helptext {
            visibility: hidden;
            width: 285px;
            background-color: #e20074;
            color: #fff;
            font-size: 1.1rem;
            line-height: 20px;
            border-radius: 8px;
            padding: 10px;
            position: absolute;
            z-index: 100;
            margin-left: -80px;
            top: 25px;
            right: -20px;
        }

        .popup .helptext > ul {
            list-style-type: square;
            padding-left: 15px;
        }
        
        .popup .helptext::after {
            content: "";
            position: absolute;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
                    
            top: -10px;
            right: 33px;
            border-color: transparent transparent #e20074 transparent;
        }

        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn .3s;
            animation: fadeIn .3s;
        }

        @-webkit-keyframes fadeIn {
            from {opacity: 0;}
            to {opacity: 1;}
        }

        @keyframes fadeIn {
            from {opacity: 0;}
            to {opacity:1 ;}
        }
        
        
       
       
        
/* ------------- HELP ----------- */
.help {
    color:  #e20074;
    top: 8px;
}

.help:hover .far,
.help .fas {
    display: none;
}
.help:hover .fas {
    display: inline;
    cursor: pointer;
    /*transition: all .3s ease-in-out;*/
}

 

/* ------------- 1. oldal ------------ */

.p1h1 {
    position: absolute !important;
    top: 94px;
    left: 4px;
    width: 345px;
    height: 117px;
}

.p1h2 {
    position: absolute !important;
    top: 214px;
    left: 4px;
    width: 345px;
    height: 26px;
}

.p1h3 {
    position: absolute !important;
    top: 243px;
    left: 4px;
    width: 345px;
    height: 35px;
}

.p1h4 {
    position: absolute !important;
    top: 304px;
    left: 4px;
    width: 345px;
    height: 19px;
}

.p1h5 {
    position: absolute !important;
    top: 380px;
    left: 4px;
    width: 408px;
    height: 51px;
}

.p1h6 {
    position: absolute !important;
    top: 380px;
    left: 419px;
    width: 119px;
    height: 51px;
}

.p1h7 {
    position: absolute !important;
    top: 434px;
    left: 4px;
    width: 534px;
    height: 43px;
}

.p1h8 {
    position: absolute !important;
    top: 480px;
    left: 4px;
    width: 534px;
    height: 19px;
}

.p1h9 {
    position: absolute !important;
    top: 504px;
    left: 4px;
    width: 534px;
    height: 23px;
}

.p1h10 {
    position: absolute !important;
    top: 530px;
    left: 4px;
    width: 534px;
    height: 21px;
}

.p1h11 {
    position: absolute !important;
    top: 692px;
    left: 477px;
    width: 295px;
    height: 199px;
}

/* ------------- 2. oldal ------------ */

.p2h1 {
    position: absolute !important;
    top: 89px;
    left: 283px;
    width: 63px;
    height: 30px;
}

.p2h2 {
    position: absolute !important;
    top: 122px;
    left: 4px;
    width: 794px;
    height: 29px;
}

.p2h3 {
    position: absolute !important;
    top: 154px;
    left: 4px;
    width: 794px;
    height: 14px;
}

.p2h4 {
    position: absolute !important;
    top: 171px;
    left: 4px;
    width: 794px;
    height: 435px;
}

.p2h5 {
    position: absolute !important;
    top: 629px;
    left: 4px;
    width: 794px;
    height: 45px;
}

.p2h6 {
    position: absolute !important;
    top: 677px;
    left: 4px;
    width: 794px;
    height: 121px;
}

/* ------------- 3. oldal ------------ */

.p3h1 {
    position: absolute !important;
    top: 147px;
    left: 4px;
    width: 794px;
    height: 16px;
}

.p3h2 {
    position: absolute !important;
    top: 166px;
    left: 4px;
    width: 794px;
    height: 87px;
}

.p3h3 {
    position: absolute !important;
    top: 275px;
    left: 4px;
    width: 794px;
    height: 129px;
}

/* .p3h4 {
    position: absolute !important;
    top: 677px;
    left: 4px;
    width: 794px;
    height: 121px;
} */

.p3h5 {
    position: absolute !important;
    top: 409px;
    left: 4px;
    width: 794px;
    height: 44px;
}

.p3h6 {
    position: absolute !important;
    top: 456px;
    left: 4px;
    width: 794px;
    height: 219px;
}

.p3h7 {
    position: absolute !important;
    top: 713px;
    left: 4px;
    width: 794px;
    height: 83px;
}

.p3h8 {
    position: absolute !important;
    top: 799px;
    left: 4px;
    width: 794px;
    height: 18px;
}