/*
**              _                  _              _           
**   _ __   ___| |_ _ __ ___   ___| |_ _ __ ___  | |__  _   _ 
**  | '_ \ / _ \ __| '_ ` _ \ / _ \ __| '__/ _ \ | '_ \| | | |
**  | | | |  __/ |_| | | | | |  __/ |_| | | (_) || | | | |_| |
**  |_| |_|\___|\__|_| |_| |_|\___|\__|_|  \___(_)_| |_|\__,_|    
**
**	---------------------------------------------------------
**
**	@file			style.css
**  @location       /public/css
**	@author			Lelesz Janos @ netmetro.hu
**	@copyright		Copyright (c) 2024, netmetro.hu
**	@website		www.netmetro.hu
**	@version		1.0.0
**
*/

@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), url('../webfonts/roboto/roboto-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

:root {
    --section-content-1000: 1000px;
    --section-content-1200: 1200px;
    --section-content-1400: 1400px;
    --szin-1: #ee606a;
    --szin-1-s: #ec4955;
    --szin-2: #f7ac61;
    --szin-2-s: #f6a04a;
    --szin-3: #eed754;
    --szin-3-s: #ecd23f;
    --szin-4: #3ab572;
    --szin-4-s: #22ac60;
    --szin-5: #6ab2e8;
    --szin-5-s: #57a8e5;
    --szin-6: #e354b0;
    --szin-6-s: #df3ba5;
    --szin-7: #9670b7;
    --szin-7-s: #875cad;
    --szin-8: #987055;
    --szin-8-s: #8a5c3d;
    --szin-9: #575859;
    --szin-9-s: #3e4042;
    
}

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    
}

body, html {
    overscroll-behavior: none;
    height: 100% !important; /* Sidebar miatt került be */
    color: #515151;
}

html {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px; 
}

body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    background-color: #f5f5f5;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    z-index: 1; /* Sidebar miatt került be */
    overflow-y: scroll;

    &:not(:has(section.nav)) {
        section.main {
            margin-top: 30px;
        }
    }

    > .helen {
        &.belepes {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
    }    
}

section.hiba {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    > .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 
        padding: 30px 30px 30px 30px;
        background-color: #ffffff;
        border-radius: 20px;

        > .content {
            display: flex;
            justify-content: center;
            align-items: center; 
            flex-direction: column;
            width: 100%;
            color: #7e7e7e;

            > .ikon {
                width: 80px;
                height: 80px;

                > svg {
                    color: #7e7e7e;
                    width: 80px;
                    height: 80px;
                } 
            }

            > .szoveg {
                font-size: 24px;
                font-weight: bold;
            }
            
            > .hibauzenet {
                margin-top: 10px;
            }
        }
    }
}

section.letoltes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    > .box {
        padding: 20px 20px 20px 20px;
        background-color: #ffffff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

        > .content1 {
            display: flex;
            align-items: center;
            flex-direction: column;

            > .logo {
                > img {
                    width: 120px;
                    height: 121px;
                }
            }

            > .szoveg {
                display: flex;
                align-items: center;
                flex-direction: column;
                margin-top: 10px;

                div:first-of-type {
                    font-size: 20px;
                    font-weight: bold;
                }
            }        

            > .content {
                display: flex;
                justify-content: center;
                flex-direction: column;
                width: 100%;  
                
                >.adatok {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                > .gomb {
                    display: flex;
                    justify-content: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
            
                    > .box {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        border-radius: 10px;
                        width: 180px;
                        height: 40px;
                        padding: 0px 20px 0px 20px;  
                        cursor: pointer;                 
                        color: #ffffff;
                        background-color: var(--szin-4);
            
                        &:hover {
                            cursor: pointer;
                            background-color: var(--szin-4-s);
                        }              
                        
                        > .ikon {
                            width: 22px;
                            height: 22px;
                            cursor: pointer;
                            margin-right: 5px;  
                            
                            > svg {
                                color: #ffffff;
                                width: 22px;
                                height: 22px;
                            }
                        }

                        > .szoveg {
                            height: 14px;
                            line-height: 14px;
                        }
                    }
                } 
            }
        }
        
        > .content2 {
            display: none;
            flex-direction: column;
            align-items: center;

            > .ikon {
                width: 80px;
                height: 80px;
                
                > svg {
                    color: #737373;
                    width: 80px;
                    height: 80px;
                }
            } 
            
            > .szoveg {
                display: flex;
                flex-direction: column;  
                align-items: center;
                margin-top: 20px;
            }
        }
    }    
}

section.belepes {
    > .box {
        width: 360px;
        padding: 25px 20px 25px 20px;
        background-color: #ffffff;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 

        > .logo {
            > img {
                width: 120px;
                height: 121px;
            }
        }

        > .szoveg {
            display: flex;
            align-items: center;
            flex-direction: column;
            margin-top: 10px;
            margin-bottom: 20px;

            div:first-of-type {
                font-size: 20px;
                font-weight: bold;
            }
        }
        
        > .content {
            display: flex;
            justify-content: center;
            width: 100%;

            > .form {
                width: 80%;
            } 
        }   
    }
}

section.header {
    width: 100%;
    display: flex;
    flex-direction: column;
    caret-color: transparent;

    > header {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 54px;
        background-color: var(--szin-4);
        color: #ffffff;

        > .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: var(--section-content-1400);

            > .bal {
                display: flex;
                align-items: center;

                > .logo {
                    display: flex; 
                    align-items: center; 
                    justify-content: center;
                    width: 36px;
                    height: 36px;
                    background-color: #ffffff; 
                    border-radius: 50px;  
                    margin-right: 5px;

                    > img {
                        width: 40px;
                        height: 19px;
                    }

                    > svg {
                        color: #7e7e7e;
                        width: 24px;
                        height: 24px;
                    } 
                }

                > .szoveg {
                    color: #ffffff;
                    margin-left: 5px;

                    div:first-of-type {
                        font-size: 14px;
                        line-height: 14px;
                        
                    }

                    div:last-of-type {
                        font-size: 12px;
                        line-height: 12px;
                    }
                }
            }

            > .jobb {
                display: flex;
                align-items: center;

                > .elem {
                    display: flex;
                    align-items: center;
                    flex-direction: row;

                    &:not(:last-of-type) {
                        margin-right: 5px;
                    }                     

                    > .szoveg {
                        text-align: right;
                        margin-right: 5px;

                        div:first-of-type {
                            font-size: 14px;
                            line-height: 14px;
                            text-transform: uppercase;
                        }

                        div:last-of-type {
                            font-size: 13px;
                            line-height: 13px;
                        }                    
                    }

                    > .ikon {
                        display: flex; 
                        align-items: center; 
                        justify-content: center;
                        width: 36px;
                        height: 36px;
                        background-color: #ffffff; 
                        border-radius: 50px;  
                        margin-right: 5px;
                        
                        &.link {
                            cursor: pointer;
                        }
                        
                        > svg {
                            color: #7e7e7e;
                            width: 20px;
                            height: 20px;
                        }                        
                    }
                }
            }
        }
    }    
}

section.nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    caret-color: transparent;

    > nav {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 70px;
        background-color: #ffffff;

        > .content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--section-content-1400);

            > .menu {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                border-width: 0px 0px 0px 1px;
                border-color: #c3c3c3;
                border-style: solid;
                padding: 0px 10px 0px 10px;
                width: 150px;           

                &:last-of-type {
                    border-width: 0px 1px 0px 1px;
                }                    

                > a {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    color: #7e7e7e;
                    text-decoration: none;
                    cursor: pointer;
                    width: 100%;

                    > .ikon {
                        > svg {
                            color: #7e7e7e;
                            width: 28px;
                            height: 28px;
                        } 
                    }

                    > .szoveg {}
                }

                &.aktiv {
                    & {
                        position: relative;

                        &:after {
                            content: '';
                            position: absolute;
                            bottom: -10px;
                            width: 151px;
                            height: 3px;
                            background-color: #c3c3c3;
                        }
                    }
                }

                &:not(.aktiv) { 
                    &:hover {
                        cursor: pointer;

                        & {
                            position: relative;

                            &:after {
                                content: '';
                                position: absolute;
                                bottom: -10px;
                                width: 131px;
                                height: 3px;
                                background-color: #c3c3c3;
                            }
                        }

                        > .ikon {
                            > svg {
                                color: #646464;
                            }
                        }

                        > .szoveg {
                            a {
                                color: #646464;
                                text-decoration: none;
                                font-weight: 500;
                            }
                        }

                        > a {
                            &:hover {
                                cursor: pointer;
                            }
                        }
                    }
                }                    
            }                                     
        }        
    }
}

section.main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    > .navigation {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        caret-color: transparent;

        > .content {
            display: flex;
            justify-content: space-between;            
            width: var(--section-content-1400);

            > .bal {
                display: flex;
                flex-direction: row;
                padding: 0px 0px 0px 0px;

                > .gomb {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    border-radius: 10px;
                    height: 40px;
                    background-color: #ffffff;
                    padding: 0px 10px 0px 10px;  
                    border-width: 1px 1px 1px 1px;
                    border-color: #ffffff;
                    border-style: solid;                                      

                    > .ikon {
                        width: 24px;
                        height: 24px;

                        > svg {
                            color: #7e7e7e;
                            width: 24px;
                            height: 24px;
                        } 
                    }

                    > .szoveg {
                        margin-left: 5px;
                    }

                    &.link {
                        cursor: pointer;

                        &:hover {
                            border-width: 1px 1px 1px 1px;
                            border-color: #dbdbdb;
                            border-style: solid;
                        }                        
                    }

                    &:not(:last-of-type) {
                        margin-right: 10px;
                    }                    

                    /*
                    &:hover {
                        border-width: 1px 1px 1px 1px;
                        border-color: #dbdbdb;
                        border-style: solid;
                    }
                        */
                }

                /*
                > .elem {
                    display: flex;
                    align-items: center;
                    height: 40px;

                    > .ikon {
                        width: 24px;
                        height: 24px;

                        > svg {
                            color: #7e7e7e;
                            width: 24px;
                            height: 24px;
                        } 
                    }

                    > .szoveg {}
                    
                    &:not(:last-of-type) {
                        &:after {
                            font: var(--fa-font-solid);
                            content: '\f101';
                            height: 10px;
                            font-size: 11px;
                            margin-left: 10px;
                            margin-right: 10px;
                        }
                    }
                } 
                */              
            }

            > .jobb {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0px 0px 0px 0px;

                > .gomb {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    border-radius: 10px;
                    height: 40px;
                    background-color: #ffffff;
                    padding: 0px 10px 0px 10px;  
                    border-width: 1px 1px 1px 1px;
                    border-color: #ffffff;
                    border-style: solid;                                     

                    > .ikon {
                        width: 24px;
                        height: 24px;

                        > svg {
                            color: #7e7e7e;
                            width: 24px;
                            height: 24px;
                        } 
                    }

                    > .szoveg {
                        margin-left: 5px;
                    }

                    &:not(.link) {
                        > .szoveg {
                            margin-right: 5px;
                        }                        
                    }

                    &.link {
                        cursor: pointer;

                        &:hover {
                            border-width: 1px 1px 1px 1px;
                            border-color: #dbdbdb;
                            border-style: solid;
                        }                        
                    }                    

                    
                    &:not(:last-of-type):not(:first-of-type):not(.rejt) {
                        margin-left: 10px;
                    }

                    &:is(:last-child):not(.rejt) {
                        margin-left: 10px;
                    }
                    
                    /*
                    &:not(:last-of-type) {
                        /*
                        &:has(+ :not(.rejt)) {
                            margin-right: 10px;
                        }
                            
                        &:not(:has(.rejt)) {
                            margin-right: 10px;
                        }
                    }
                    */
                }             

                > .form {
                    > .elem {
                        display: flex;
                        align-items: center;
                        flex-direction: row;
                        border-radius: 10px;
                        width: 300px;
                        height: 40px;
                        background-color: #ffffff;
                        padding: 0px 0px 0px 10px;
                        border-width: 1px 1px 1px 1px;
                        border-color: #ffffff;
                        border-style: solid;
                        cursor: pointer;
        
                        > input[type=text] {    
                            width: calc(100% - 44px);
                            height: 36px;
                            border: none;
                            outline: none;
                            caret-color: #515151;

                            &:hover {
                                cursor: pointer;
                            }
                        }

                        > .ikon {
                            margin-left: 5px;
                            width: 24px;
                            height: 24px;

                            > svg {
                                color: #7e7e7e;
                                width: 24px;
                                height: 24px;
                            }
                        }

                        &:hover {
                            border-width: 1px 1px 1px 1px;
                            border-color: #dbdbdb;
                            border-style: solid;
                        }
                    }
                }
            }
        }         
    }  

    > main {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: var(--section-content-1400);
        border-radius: 10px 10px 10px 10px;

        &:is(.dashboard) {
            position: relative;

            > .content {
                display: flex;
                flex-direction: column;
                width: 100%;

                > .sor {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                    width: 100%;

                    &:not(:last-of-type) {
                        margin-bottom: 20px;
                    }

                    > .bubi {
                        width: 300px;
                        background-color: #ffffff;
                        border-radius: 10px 10px 10px 10px;
                        padding: 20px 20px 20px 20px;
                        color: #7e7e7e;

                        &:not(:last-of-type) {
                            margin-right: 20px;
                        }

                        > .felso {
                            display: flex;
                            justify-content: space-between;
                            
                            > .bal {
                                > .szoveg {}
                                > .szoveg2 {
                                    font-size: 18px;
                                    font-weight: bold;
                                }
                            }

                            > .jobb {
                                > .ikon {
                                    width: 36px;
                                    height: 36px;
                                    cursor: pointer;
            
                                    > svg {
                                        color: #7e7e7e;
                                        width: 36px;
                                        height: 36px;
                                    } 
                                }

                                > .ikon2 {
                                    width: 44px;
                                    height: 44px;
                                    cursor: pointer;
            
                                    > svg {
                                        color: #7e7e7e;
                                        width: 44px;
                                        height: 44px;
                                    } 
                                }                            
                            }
                        }

                        > .also {
                            display: flex;
                            justify-content: flex-end;
                            margin-top: 20px;

                            > .link {
                                > a {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    cursor: pointer;
                                    text-decoration: none;
                                    color: #7e7e7e;

                                    &:hover {
                                        color: #515151;

                                        > .ikon {
                                            svg {
                                                color: #515151;
                                            }
                                        }
                                    }

                                    > .szoveg {
                                        margin-right: 5px;
                                    }

                                    > .ikon {
                                        width: 18px;
                                        height: 18px;
                                        cursor: pointer;
                
                                        > svg {
                                            color: #7e7e7e;
                                            width: 18px;
                                            height: 18px;
                                        } 
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        &:is(.ajanlatkero) {
            margin-bottom: 10px;
            display: flex;
            flex-direction: row;
            width: var(--section-content-1400);

                > .bal {
                    width: 100%;
                    height: var(--ugyfel-box-magassag);
                    margin-right: 20px; 

                    > .content {
                        display: flex;
                        flex-direction: column;
                        width: 100%; 
                        height: var(--ugyfel-box-magassag);
                        padding: 20px 20px 20px 20px;
                        background: #ffffff;
                        border-radius: 10px 10px 10px 10px;
                        position: relative;

                        > .ugyfel, .erdeklodo {
                            > .fejlec {
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 10px;

                                .bal {

                                }

                                .jobb {
                                    > .ikon {
                                        width: 24px;
                                        height: 24px;
                                        cursor: pointer;
                
                                        > svg {
                                            color: #7e7e7e;
                                            width: 24px;
                                            height: 24px;
                                        } 
                                    }                            
                                }
                            }                    

                            > .adatok {
                                > .szoveg {
                                    display: flex;
                                    justify-content: space-between;
                                }
                            }
                        }
                    }
                }

                > .jobb {
                    width: 100%; 
                    height: var(--kapcs-box-magassag);

                    > .content {
                        display: flex;
                        flex-direction: column;
                        width: 100%; 
                        height: var(--kapcs-box-magassag);
                        padding: 20px 20px 20px 20px;
                        background: #ffffff;
                        border-radius: 10px 10px 10px 10px;
                        position: relative;

                        > .kapcsolattarto {
                            > .fejlec {
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 10px;

                                .bal {

                                }

                                .jobb {
                                    > .ikon {
                                        width: 24px;
                                        height: 24px;
                                        cursor: pointer;
                
                                        > svg {
                                            color: #7e7e7e;
                                            width: 24px;
                                            height: 24px;
                                        } 
                                    }                            
                                }
                            }

                            > .adatok {
                                > .szoveg {
                                    display: flex;
                                    justify-content: space-between;
                                }
                            }
                        }
                    }                            
                }
                        
        }

        &:is(.info) {
            position: relative;

            > .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0px 0px 0px 0px;
                width: 100%;

                > .plaza {
                    width: 100%;

                    > .adatok {
                        display: flex;
                        flex-direction: row;
                        width: 100%;

                        > .bal {
                            display: flex;
                            flex-direction: column;
                            padding: 20px 20px 20px 20px;
                            width: 100%; 
                            background: #ffffff;
                            border-radius: 10px 10px 10px 10px;
                            margin-right: 20px;

                            > .szoveg {
                                display: flex;
                                justify-content: space-between;
                            }
                        }

                        > .jobb {
                            display: flex;
                            flex-direction: column;
                            padding: 20px 20px 20px 20px;
                            width: 100%;
                            background: #ffffff;
                            border-radius: 10px 10px 10px 10px;

                            > .szoveg {
                                display: flex;
                                justify-content: space-between;
                            }                            
                        }
                    }
                }

                > .box {
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    margin-top: 20px;

                    > .bal {
                        display: flex;
                        flex-direction: column;
                        width: 300px;
                        margin-right: 20px;

                        > .kep {
                            display: flex;
                            flex-direction: column;
                            padding: 20px 20px 20px 20px;
                            background: #ffffff;
                            border-radius: 10px 10px 10px 10px;
                            
                            &:not(:last-of-type) {
                                margin-bottom: 10px;
                            }

                            > .feltoltes {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                border: #cacaca 2px dashed;
                                padding: 20px 20px 20px 20px;
                                border-radius: 10px 10px 10px 10px;
                                position: relative;

                                > form {
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;
                                
                                    input {
                                        display: none;
                                    }

                                    label {
                                        width: 100%;
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        cursor: pointer;

                                        > .ikon {
                                            width: 50px;
                                            height: 50px;
                
                                            > svg {
                                                color: #7e7e7e;
                                                width: 50px;
                                                height: 50px;
                                            }
                                        }

                                        > .szoveg {}
                                    }

                                    > .progress-bar-box {
                                        width: 100%;
                                        display: none;

                                        > .progress-bar {
                                            width: 100%;
                                            display: flex;
                                            flex-direction: row;
                                            align-items: center;
                                            justify-content: space-between;
                                            margin-top: 5px;

                                            > progress {
                                                -webkit-appearance: none;
                                                -moz-appearance: none;
                                                appearance: none;                                        
                                                background-color: #efefef;
                                                border: 0;
                                                width: calc(100% - 35px);
                                                height: 10px;
                                                color: #ffffff;
                                                position: relative;

                                                &::-webkit-progress-bar {
                                                    color: #ffffff;
                                                    background-color: #efefef; 
                                                }

                                                &::-webkit-progress-value {
                                                    background-color: var(--szin-4);  
                                                }
                                                
                                                &::-moz-progress-bar {
                                                    background-color: var(--szin-4);
                                                }                                       
                                            }

                                            > label {
                                                width: 38px;
                                                height: 16px;
                                                display: flex;
                                                align-items: flex-end;
                                            }
                                        }
                                    }
                                }
                            }

                            > .content {
                                position: relative;
                                
                                > .fejlec {
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    justify-content: space-between;
                                    margin-bottom: 15px;

                                    > .bal {
                                        height: 18px;
                                        display: flex;
                                        align-items: center;
                                    }

                                    > .jobb {
                                        width: 18px;
                                        height: 18px;
                                        cursor: pointer;
                                        
                                        > .ikon {
                                            > svg {
                                                color: #515151;
                                                width: 18px;
                                                height: 18px;
                                            }
                                        }
                                    }
                                }

                                > .main {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 100%;                                    
                                }
                            }
                        }
                    }

                    > .jobb {
                        display: flex;
                        flex-direction: column;
                        width: calc(100% - 320px); /* bal box szélesség + margin-right szélesség van kikvonva a 100%-ból */
                    }
                }
            }
        }
        
        &:is(.lista) {
            background-color: #ffffff;
            position: relative;

            > .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px 10px 10px 10px;
                width: 100%;

                > .fejlec {
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    font-weight: bold;
                    padding: 0px 10px 0px 10px;

                    > .box {
                        display: flex;
                        align-items: center;
                        width: var(--lista-cella-checkbox);
                        height: 30px;
                        position: relative; /* A fake checkbox miatt kell relative!! */
                    }

                    > .szovegek {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        width: calc(100% - (var(--lista-cella-checkbox) + var(--lista-cella-funkciok)));
                        height: 30px;      
                        
                        > .szoveg {
                            display: flex;
                            align-items: center;
                            width: var(--lista-cella);
                        }
                    }

                    > .funkciok {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        width: var(--lista-cella-funkciok);
                        height: 30px;
                    }                    
                }

                > .adatok {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    > :is(.elem) {
                        display: flex;
                        flex-direction: row;
                        width: 100%;
                        padding: 0px 10px 0px 10px;
                        
                        &:nth-child(2n) {
                            background-color: #f9f9f9;
                        }

                        &.checked {
                            background-color: #f0ede9 !important;
                        }

                        &.hiba {
                            background-color: #fde1e1;
                        }

                        > .box {
                            display: flex;
                            align-items: center;
                            width: var(--lista-cella-checkbox);
                            height: 42px;
                            position: relative; /* A fake checkbox miatt kell relative!! */
                            /*padding-left: calc((var(--lista-cella-checkbox) - 19px) / 2);*/
                        }

                        > .szovegek {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            width: calc(100% - (var(--lista-cella-checkbox) + var(--lista-cella-funkciok)));
                            height: 42px;   
                            
                            > .szoveg {
                                display: flex;
                                width: var(--lista-cella);
                                height: 16px;
                                line-height: 16px;
                            }

                            > .bubi {
                                display: flex;
                                width: var(--lista-cella);
                                height: 30px;
                                line-height: 30px;

                                > .szin-1, .szin-2, .szin-3, .szin-4, .szin-5, .szin-6, .szin-7, .szin-8, .szin-9, .szin-10, .szin-11 {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;     
                                    color: #ffffff;       
                                    border-radius: 10px;
                                    padding: 5px 10px 5px 10px;
                                    outline: none;    
                                    box-shadow: none; 
                                }

                                > .szin-1 {
                                    background-color: var(--szin-1);
                                }

                                > .szin-2 {
                                    background-color: var(--szin-2);
                                }

                                > .szin-3 {
                                    background-color: var(--szin-3);
                                }                                

                                > .szin-4 {
                                    background-color: var(--szin-4);
                                }                                

                                > .szin-5 {
                                    background-color: var(--szin-5);
                                }                                

                                > .szin-6 {
                                    background-color: var(--szin-6);
                                }                                

                                > .szin-7 {
                                    background-color: var(--szin-7);
                                }                                

                                > .szin-8 {
                                    background-color: var(--szin-8);
                                }                                

                                > .szin-9 {
                                    background-color: var(--szin-9);
                                }

                                > .szin-10 {
                                    background-image: linear-gradient(45deg, var(--szin-2) 50%, var(--szin-7) 50%);
                                }

                                > .szin-11 {
                                    background-image: linear-gradient(45deg, var(--szin-2) 50%, var(--szin-4) 50%);
                                }   
                                
                                > .szin-12 {
                                    background-image: linear-gradient(45deg, var(--szin-4) 50%, var(--szin-7) 50%);
                                }                                 
                            }

                            > .kocka {
                                display: flex;
                                width: var(--lista-cella);
                                align-items: center;
                                height: 30px;
                                line-height: 30px;

                                > .szin-1, .szin-2, .szin-3, .szin-4, .szin-5, .szin-6, .szin-7, .szin-8, .szin-9, .szin-10, .szin-11 {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;   
                                    width: 20px;
                                    height: 20px;  
                                    color: #ffffff;       
                                    outline: none;    
                                    box-shadow: none; 
                                    
                                    &:not(:last-of-type) {
                                        margin-right: 10px;
                                    }                                    
                                }   
                                
                                > .szin-1 {
                                    background-color: var(--szin-1);
                                }

                                > .szin-2 {
                                    background-color: var(--szin-2);
                                }

                                > .szin-3 {
                                    background-color: var(--szin-3);
                                }                                

                                > .szin-4 {
                                    background-color: var(--szin-4);
                                }                                

                                > .szin-5 {
                                    background-color: var(--szin-5);
                                }                                

                                > .szin-6 {
                                    background-color: var(--szin-6);
                                }                                

                                > .szin-7 {
                                    background-color: var(--szin-7);
                                }                                

                                > .szin-8 {
                                    background-color: var(--szin-8);
                                }                                

                                > .szin-9 {
                                    background-color: var(--szin-9);
                                }

                                > .szin-10 {
                                    background-image: linear-gradient(45deg, var(--szin-2) 50%, var(--szin-7) 50%);
                                }

                                > .szin-11 {
                                    background-image: linear-gradient(45deg, var(--szin-2) 50%, var(--szin-4) 50%);
                                }   
                                
                                > .szin-12 {
                                    background-image: linear-gradient(45deg, var(--szin-4) 50%, var(--szin-7) 50%);
                                }                                  
                            }
                        }

                        > .funkciok {
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            width: var(--lista-cella-funkciok);
                            height: 42px;

                            > .ikon {
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
    
                                > svg {
                                    color: #7e7e7e;
                                    width: 24px;
                                    height: 24px;
                                }

                                &:not(:last-of-type) {
                                    margin-right: 10px;
                                }
                            }
                        } 
                    }
                    
                    > :is(.hiba):not(.elem) {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        padding: 10px 0px 10px 0px;
    
                        > .ikon {
                            width: 80px;
                            height: 80px;
                            margin-bottom: 10px;
    
                            > svg {
                                color: #7e7e7e;
                                width: 80px;
                                height: 80px;                
                            }
                        }                
                    }                    
                }                

                > .alsolec {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    margin-top: 20px;
                    padding: 0px 10px 0px 7px;

                    > .bal {
                        display: flex;
                        align-items: center;

                        > .muveletek {
                            display: flex;
                            flex-direction: row;
                            align-items: center;

                            > .ikon {
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
    
                                > svg {
                                    color: #7e7e7e;
                                    width: 24px;
                                    height: 24px;
                                }

                                &:not(:last-of-type) {
                                    margin-right: 5px;
                                }                                
                            }
                            
                            > .vonal {
                                width: 16px;
                                height: 16px;
                                margin-right: 5px;

                                > svg {
                                    color: #7e7e7e;
                                    width: 16px;
                                    height: 16px;
                                }
                            }                            
                        }

                        > .elemszam, .reset {
                            display: flex;
                            align-items: center;

                            > .vonal {
                                width: 16px;
                                height: 16px;
                                margin-left: 5px;
                                margin-right: 5px;

                                > svg {
                                    color: #7e7e7e;
                                    width: 16px;
                                    height: 16px;
                                }
                            }

                            > .ikon {
                                width: 24px;
                                height: 24px;
                                cursor: pointer;
    
                                > svg {
                                    color: #7e7e7e;
                                    width: 24px;
                                    height: 24px;
                                }                                
                            }
                            
                            > .szoveg {
                                line-height: 12px;
                            }
                        }

                        > .lapmeret {
                            display: flex;
                            align-items: center;
                            height: 16px;
                            line-height: 16px;

                            > .vonal {
                                width: 16px;
                                height: 16px;
                                margin-left: 5px;
                                margin-right: 5px;

                                > svg {
                                    color: #7e7e7e;
                                    width: 16px;
                                    height: 16px;
                                }
                            }
                            
                            > .limit-box {
                                display: flex;

                                > .szoveg {
                                    display: flex;
                                    align-items: center;
                                    padding-right: 5px;
                                }

                                > .limitek {
                                    display: flex;

                                    > .limit {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        line-height: 20px;
                                        height: 20px;
                                        cursor: pointer;
                                        padding-left: 6px;
                                        padding-right: 6px;
                                        caret-color: transparent;

                                        &.aktiv {
                                            border-radius: 5px;
                                            background-color: #7e7e7e;
                                            color: #ffffff;
                                            cursor: default;
                                            pointer-events: none;
                                        }

                                        &:not(:last-of-type) {
                                            margin-right: 5px;
                                        } 
                                    }
                                }
                            }
                        }
                    }

                    > .jobb {
                        display: flex;
                        align-items: center;
                                                
                        > .oldalszam {
                            display: flex;
                            align-items: center;
                            height: 16px;
                            line-height: 16px;

                            > .vonal {
                                width: 16px;
                                height: 16px;
                                margin-left: 5px;
                                margin-right: 5px;

                                > svg {
                                    color: #7e7e7e;
                                    width: 16px;
                                    height: 16px;
                                }
                            }
                            
                            > .limit-box {
                                display: flex;

                                > .szoveg {
                                    display: flex;
                                    align-items: center;
                                    padding-right: 5px;
                                }

                                > .limitek {
                                    display: flex;

                                    > .limit {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        line-height: 20px;
                                        height: 20px;
                                        cursor: pointer;
                                        padding-left: 6px;
                                        padding-right: 6px;
                                        caret-color: transparent;

                                        &.aktiv {
                                            border-radius: 5px;
                                            background-color: #7e7e7e;
                                            color: #ffffff;
                                            cursor: default;
                                            pointer-events: none;
                                        }

                                        &:not(:last-of-type) {
                                            margin-right: 5px;
                                        } 
                                    }
                                }
                            }
                        }
                    }
                }

                > .hiba {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    > .ikon {
                        width: 80px;
                        height: 80px;
                        margin-bottom: 10px;

                        > svg {
                            color: #7e7e7e;
                            width: 80px;
                            height: 80px;                
                        }
                    }                
                }                
            }
        }

        &:is(.naptar) {
            --naptar-nap-w: calc(((var(--section-content-1400) - 22px) - (var(--naptar-cella-checkbox) + var(--naptar-cella-feluletek) + var(--naptar-cella-funkciok) + var(--naptar-cella-nyil))) / var(--naptar-napok-napszam));  /* Az 1400px-ből le kell vonni a két oldali paddingot 2 x 10px és a 2 x 1px keretet */

            background-color: #ffffff;
            position: relative;
            overflow: hidden;
            padding: 10px 10px 10px 10px;

            &.sticky {
                padding: 0px 10px 10px 10px;
            }            

            > .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                
                &.keret {
                    border-color: #dbdbdb;
                    border-style: solid;
                    border-radius: 5px;                     

                    &.on {
                        border-width: 1px 1px 1px 1px;
                    }

                    &.off {
                        border-width: 0px 0px 0px 0px !important;
                    }
                }
                    
                > .fejlec {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    position: relative;
                    background-color: #ffffff;

                    &.sticky {
                        position: fixed;
                        top: 0px;
                        width: calc(var(--section-content-1400) - 22px); /* Az 1400px-ből le kell vonni a két oldali paddingot 2 x 10px és a 2 x 1px keretet */
                        z-index: 100;
                    }                    

                    > .datum {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 48px;
                        line-height: 48px;
                        border-width: 0px 0px 1px 0px;
                        border-color: #dbdbdb;
                        border-style: solid;      
                        
                        > .elozo {
                            display: flex; 
                            justify-content: center;
                            width: 33px;
                            height: 26px;   
                            user-select: none;     
                            
                            > svg {
                                color: #7e7e7e;
                                width: 15px;
                                height: 24px;
                                cursor: pointer;
                            }                                
                        }

                        > .kovetkezo {
                            display: flex;
                            justify-content: center;
                            width: 33px;
                            height: 26px;
                            user-select: none;

                            > svg {
                                color: #7e7e7e;
                                width: 15px;
                                height: 24px;
                                cursor: pointer;
                            }                                 
                        }

                        > .aktualis {
                            display: flex;
                            justify-content: center;
                            width: calc(100% - 66px); /* Annyit kell kivonni amennyi a két szélső nyil */
                            text-transform: uppercase;   
                            user-select: none;                             
                        }
                    }

                    > .szovegek {
                        display: flex;

                        > .checkbox {
                            display: flex;
                            align-items: center;
                            width: var(--naptar-cella-checkbox);
                            height: 33px;
                            border-width: 0px 1px 1px 0px;
                            border-color: #dbdbdb;
                            border-style: solid;
                        }

                        > .feluletek {
                            display: flex;
                            align-items: center;
                            width: var(--naptar-cella-feluletek);
                            height: 33px;
                            border-width: 0px 1px 1px 0px;
                            border-color: #dbdbdb;
                            border-style: solid;

                            > .szoveg {
                                padding-left: 10px;
                            }
                        }

                        > .napok {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            width: calc(((var(--section-content-1400) - 22px) - (var(--naptar-cella-checkbox) + var(--naptar-cella-feluletek) + var(--naptar-cella-funkciok) + var(--naptar-cella-nyil))));
                            height: 33px;
                            border-width: 0px 0px 1px 0px;
                            border-color: #dbdbdb;
                            border-style: solid;
                            background: repeating-linear-gradient(to left, #dbdbdb 0px, #dbdbdb 1px, #ffffff 0px, #ffffff var(--naptar-nap-w));

                            > .keret {
                                display: grid;
                                width: 100%;
                                grid-template-columns: repeat(var(--naptar-napok-napszam), var(--naptar-nap-w));
                                grid-template-rows: 1fr;
                                grid-column-gap: 0px;
                                grid-row-gap: 0px;

                                > .nap {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: var(--naptar-nap-w);
                                    height: 32px;

                                    &.mai {
                                        width: calc(var(--naptar-nap-w) - 1px); /* -1px a jobb oldali border */
                                        background-color: #efefef;
                                        /* border-left: #dbdbdb 1px solid; */
                                    }
                                }
                            }
                        }

                        > .funkciok {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: var(--naptar-cella-funkciok);
                            height: 33px;
                            border-width: 0px 1px 1px 0px;
                            border-color: #dbdbdb;
                            border-style: solid;      
                            
                            > .szoveg {
                                
                            }
                        }

                        > .nyil {
                            display: flex;
                            align-items: center;
                            width: var(--naptar-cella-nyil);
                            height: 33px;
                            border-width: 0px 0px 1px 0px;
                            border-color: #dbdbdb;
                            border-style: solid;
                        }                        
                    }
                }
                    
                > .lista {
                    display: flex;
                    flex-direction: column;

                    > .adatok {
                        display: flex;
                        flex-direction: column;

                        &.sticky {
                            position: relative;
                            top: 91px; /* A 91px sor magassága */
                            margin-bottom: 91px; /* A 91px sor magassága */
                        }                        

                        > :is(.sor) {
                            display: flex;
                            width: 100%;
                            height: 91px;
                            border-width: 0px 0px 1px 0px;
                            border-color: #dbdbdb;
                            border-style: solid;    
                            transition: all .2s ease-in-out;        
                            overflow: hidden;  

                            &.checked {
                                background-color: #f8f7f5 !important;
                            }                            
                            
                            > .checkbox {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: var(--naptar-cella-checkbox);
                                border-width: 0px 1px 0px 0px;
                                border-color: #dbdbdb;
                                border-style: solid;
                                position: relative;

                                > .elem {
                                    position: absolute;
                                    width: 18px;
                                    height: 18px;
                                    top: calc((100% - 18px) / 2);

                                    > input[type="checkbox"] {
                                        position: absolute;
                                        width: 18px;
                                        height: 18px;
                                        left: 0;
                                        top: 0;
                                        opacity: 0;
                                        margin: 0;
                                        padding: 0;

                                        &:checked {
                                            + label {
                                                &:after {
                                                    opacity: 1;
                                                }
                                            }
                                        }
                                    }

                                    > label {
                                        &:before {
                                            position: absolute;
                                            content: '';
                                            width: 18px;
                                            height: 18px;
                                            left: 0;
                                            top: 0;
                                            background-color: #ffffff;
                                            border-width: 1px 1px 1px 1px;
                                            border-color: #c0c0c0;
                                            border-style: solid; 
                                            cursor: pointer;
                                        }

                                        &:after {
                                            content: '';
                                            position: absolute;
                                            width: 12px;
                                            height: 12px;
                                            left: 3px;
                                            top: 3px;
                                            opacity: 0;
                                            background-color: #878787;
                                            cursor: pointer;
                                        }
                                    }

                                    > .szoveg {
                                        display: flex;
                                        align-items: center;
                                        height: 18px;
                                        margin-left: 22px;
                                    } 
                                }                               
                            }                            

                            > .feluletek {
                                display: flex;
                                align-items: center;
                                width: var(--naptar-cella-feluletek);
                                border-width: 0px 1px 0px 0px;
                                border-color: #dbdbdb;
                                border-style: solid;

                                > .szovegek {
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    width: 100%;
                                    padding-left: 10px;
                                }

                                > .bejegyzes {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 12px;
                                    width: 25px;
                                    height: 100%;
                                    background: #efefef;
                                    writing-mode: sideways-lr;
                                    text-orientation: mixed;
                                }
                            }

                            > .napok {
                                display: flex;
                                align-items: center;
                                width: calc((var(--section-content-1400) - 22px) - (var(--naptar-cella-checkbox) + var(--naptar-cella-feluletek) + var(--naptar-cella-funkciok) + var(--naptar-cella-nyil)));
                               /*  background-image: repeating-linear-gradient(to left, #dbdbdb, #dbdbdb 1px, transparent 1px, transparent); */
                                /*background: repeating-linear-gradient(90deg, black, black 1px, white 0, white var(--naptar-nap-w));*/
                                /*background: repeating-linear-gradient(to left, #dbdbdb 0px, #dbdbdb 1px, #ffffff 0px, #ffffff var(--naptar-nap-w));*/
                                background: repeating-linear-gradient(to left, #dbdbdb 0px, #dbdbdb 1px, transparent 0px, transparent var(--naptar-nap-w));
                                /*background-size: var(--naptar-nap-w) var(--naptar-nap-w);*/
                                /*background-color: #ffffff;*/

                                > .bejegyzesek {
                                    width: 100%;
                                    height: 100%;
                                    position: relative;                                        

                                    > .bejegyzes {
                                        position: absolute;
                                        width: calc((((var(--naptar-elem-bejegyzes-vonal-stop) + 1) - var(--naptar-elem-bejegyzes-vonal-start)) * var(--naptar-nap-w)) - 5px); /* A -5px a padding és a keret szélessége */
                                        height: 28px;
                                        line-height: 28px;
                                        font-size: 14px;   
                                        top: calc((var(--naptar-elem-bejegyzes-index) * 38px) - 28px); /* 38px = 28px vonal magasság + 10px padding - 28px vonal magasság */
                                        left: calc(((var(--naptar-elem-bejegyzes-vonal-start) * var(--naptar-nap-w)) - var(--naptar-nap-w)) + 2px);  /* A +2px a padding */
                                        cursor: pointer;
                                        
                                        &:only-child {
                                            top: calc((87px - 28px) / 2) !important;
                                        }

                                        &[data-naptar-elem-rejt="igen"] {                                            
                                            display: none;
                                        }

                                        &.partner {
                                            > .vonal {
                                                border-width: 2px 2px 2px 2px;
                                                border-color: red;
                                                border-style: solid;       
                        
                                                &.szin-1 {
                                                    &::after {
                                                        background-color: var(--szin-2); /* Státusz -> Ajánlatadás alatt */
                                                    }
                                                }
                                                
                                                &.szin-2 {
                                                    &::after {
                                                        background-color: var(--szin-5); /* Státusz -> Időpont foglalva */
                                                    }
                                                }

                                                &.szin-3 {
                                                    &::after {
                                                        background-color: var(--szin-8); /* Státusz -> Megrendelve */
                                                    }
                                                }    
                                                
                                                &.szin-4 {
                                                    &::after {
                                                        background-color: var(--szin-7); /* Státusz -> Engedélyeztetés alatt */
                                                    }
                                                }   
                                                
                                                &.szin-5 {
                                                    &::after {
                                                        background-color: var(--szin-6); /* Státusz -> Engedélyeztetés alatt */
                                                    }
                                                }  
                                                
                                                &.szin-6 {
                                                    &::after {
                                                        background-color: var(--szin-4); /* Státusz -> Számlázandó */
                                                    }
                                                }                                                 
                                            }
                                        }

                                        &.helen {
                                            > .vonal {
                                                &.szin-2 {
                                                    &::after {
                                                        background-color: var(--szin-9);
                                                    }
                                                }

                                                &.szin-3 {
                                                    &::after {
                                                        background-color: var(--szin-2);
                                                    }
                                                }
                                                
                                                &.szin-4 {
                                                    &::after {
                                                        background-color: var(--szin-2);
                                                    }
                                                }

                                                &.szin-5 {
                                                    &::after {
                                                        background-color: var(--szin-5);
                                                    }
                                                }  
                                                
                                                &.szin-6 {
                                                    &::after {
                                                        background-color: var(--szin-8);
                                                    }
                                                }   
                                                
                                                &.szin-7 {
                                                    &::after {
                                                        background-color: var(--szin-2);
                                                    }
                                                }       

                                                &.szin-8 {
                                                    &::after {
                                                        background-color: var(--szin-7);
                                                    }
                                                }

                                                &.szin-9 {
                                                    &::after {
                                                        background-color: var(--szin-4);
                                                    }
                                                }

                                                &.szin-10 {
                                                    &::after {
                                                        background-color: var(--szin-6);
                                                    }
                                                }                                                     
                                            }
                                        }

                                        > .vonal {
                                            display: flex;

                                            &.szoveg {
                                                &::after {
                                                    content: attr(data-bejegyzes-content);
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;     
                                                    color: #ffffff;
                                                    padding: 0px 10px 0px 10px;
                                                    outline: none;    
                                                    box-shadow: none; 
                                                    width: 100%;
                                                }
                                            }

                                            &.ikon {
                                                &::after {
                                                    font-family: 'Font Awesome 6 Free';
                                                    font-weight: 900;
                                                    -webkit-font-smoothing: antialiased;
                                                    content: '\f08e';
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;     
                                                    color: #ffffff;
                                                    padding: 0px 10px 0px 10px;
                                                    outline: none;    
                                                    box-shadow: none; 
                                                    width: 100%;
                                                }
                                            }                                          
                                        }
                                    }

                                    > .status1 {
                                        width: 100%;
                                        height: 22px;
                                        line-height: 22px;
                                        font-size: 12px;                                    

                                        > .bubi1 {
                                            display: flex;

                                            &::after {
                                                content: attr(data-bubi-szoveg);
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;     
                                                color: #515151;       

                                                padding: 0px 10px 0px 10px;
                                                outline: none;    
                                                box-shadow: none; 
                                                width: 100%;                                                
                                            }

                                            &.szin-1 {
                                                &::after {
                                                    background-color: #dbdbdb;
                                                }
                                            }                                            
                                        }                                        
                                    }                                    
                                }
                            }

                            > .funkciok {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: var(--naptar-cella-funkciok);
                                border-width: 0px 1px 0px 0px;
                                border-color: #dbdbdb;
                                border-style: solid;
                                
                                
                                > .ikon {
                                    width: 24px;
                                    height: 24px;
                                    cursor: pointer;
        
                                    > svg {
                                        color: #7e7e7e;
                                        width: 24px;
                                        height: 24px;
                                    }
    
                                    &:not(:last-of-type) {
                                        margin-right: 10px;
                                    }
                                }                                
                            }

                            > .nyil {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: var(--naptar-cella-nyil);

                                > .ikon {
                                    width: 24px;
                                    height: 24px;
                                    cursor: pointer;
        
                                    > svg {
                                        color: #7e7e7e;
                                        width: 24px;
                                        height: 24px;
                                    }
    
                                    &:not(:last-of-type) {
                                        margin-right: 10px;
                                    }
                                }                                 
                            }                            
                        }

                        > :is(.hiba):not(.sor) {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            flex-direction: column;
                            padding: 10px 0px 10px 0px;
        
                            > .ikon {
                                width: 80px;
                                height: 80px;
                                margin-bottom: 10px;
        
                                > svg {
                                    color: #7e7e7e;
                                    width: 80px;
                                    height: 80px;
                                }
                            }
                        }                             
                    }                        
                }

                > .alsolec {
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    padding: 10px 10px 10px 10px;

                    > .bal {
                        display: flex;
                        align-items: center;

                        > .elemszam {
                            display: flex;
                            align-items: center;
                            
                            > .szoveg {
                                line-height: 12px;
                            }
                        }

                        > .lapmeret {
                            display: flex;
                            align-items: center;
                            height: 16px;
                            line-height: 16px;

                            > .vonal {
                                width: 16px;
                                height: 16px;
                                margin-left: 5px;
                                margin-right: 5px;

                                > svg {
                                    color: #7e7e7e;
                                    width: 16px;
                                    height: 16px;
                                }
                            }
                            
                            > .limit-box {
                                display: flex;

                                > .szoveg {
                                    display: flex;
                                    align-items: center;
                                    padding-right: 5px;
                                }

                                > .limitek {
                                    display: flex;

                                    > .limit {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        line-height: 20px;
                                        height: 20px;
                                        cursor: pointer;
                                        padding-left: 6px;
                                        padding-right: 6px;
                                        caret-color: transparent;

                                        &.aktiv {
                                            border-radius: 5px;
                                            background-color: #7e7e7e;
                                            color: #ffffff;
                                            cursor: default;
                                            pointer-events: none;
                                        }

                                        &:not(:last-of-type) {
                                            margin-right: 5px;
                                        } 
                                    }
                                }
                            }
                        }
                    }

                    > .jobb {
                        display: flex;
                        align-items: center;
                                                
                        > .oldalszam {
                            display: flex;
                            align-items: center;
                            height: 16px;
                            line-height: 16px;

                            > .vonal {
                                width: 16px;
                                height: 16px;
                                margin-left: 5px;
                                margin-right: 5px;

                                > svg {
                                    color: #7e7e7e;
                                    width: 16px;
                                    height: 16px;
                                }
                            }
                            
                            > .limit-box {
                                display: flex;

                                > .szoveg {
                                    display: flex;
                                    align-items: center;
                                    padding-right: 5px;
                                }

                                > .limitek {
                                    display: flex;

                                    > .limit {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        line-height: 20px;
                                        height: 20px;
                                        cursor: pointer;
                                        padding-left: 6px;
                                        padding-right: 6px;
                                        caret-color: transparent;

                                        &.aktiv {
                                            border-radius: 5px;
                                            background-color: #7e7e7e;
                                            color: #ffffff;
                                            cursor: default;
                                            pointer-events: none;
                                        }

                                        &:not(:last-of-type) {
                                            margin-right: 5px;
                                        } 
                                    }
                                }
                            }
                        }
                    }
                }  
                    
                > .hiba {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    > .ikon {
                        width: 80px;
                        height: 80px;
                        margin-bottom: 10px;

                        > svg {
                            color: #7e7e7e;
                            width: 80px;
                            height: 80px;                
                        }
                    }                
                }
            }            
        }         

        &:not(.info):not(.lista):not(.dashboard):not(.naptar) {
            > .content {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20px 0px 20px 0px;

                > .box {
                    position: relative; /* A betöltő miatt kell hogy relative legyen!! */
                    background-color: #ffffff;
                    border-radius: 10px 10px 10px 10px;
                    border-width: 1px 1px 1px 1px;
                    border-color: #cbcbcb;
                    border-style: solid;                

                    > .fejlec {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        height: 48px;
                        background-color: #e2e2e2;
                        color: #7e7e7e;
                        border-radius: 10px 10px 0px 0px;
                        border-width: 0px 0px 1px 0px;
                        border-color: #cbcbcb;
                        border-style: solid;
                        padding: 0px 15px 0px 15px;  

                        > .bal {
                            display: flex;
                            align-items: center;

                            > .ikon {
                                > svg {
                                    color: #7e7e7e;
                                    width: 24px;
                                    height: 24px;                
                                }                            
                            }

                            > .szoveg {
                                margin-left: 10px;
                            }
                        }

                        > .jobb {
                            > .ikon {
                                cursor: pointer;

                                > svg {
                                    color: #7e7e7e;
                                    width: 20px;
                                    height: 20px;                
                                } 
                            }

                            &:hover {
                                color: #646464;
                            }
                        }
                    }

                    > .content {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        height: calc(100% - 119px);
                        padding: 20px 10px 20px 10px;

                        > .form {
                            width: 80%;
                        }

                        > .infobox {
                            width: 80%;

                            > fieldset {
                                border-width: 2px 2px 2px 2px;
                                border-color: #c4c4c4;
                                border-style: dashed;
                                border-radius: 10px;
                                margin-top: 20px;

                                > legend {
                                    padding: 0px 10px 0px 10px;
                                    font-size: 12px;
                                }

                                > .box {
                                    padding: 0px 10px 0px 10px;
                                    font-size: 12px;

                                    > ul {
                                        padding: 10px 10px 10px 10px;

                                        > li {
                                            &::marker {
                                                color: #515151;
                                            }

                                            &:not(:last-of-type) {
                                                margin-bottom: 5px;
                                            }                                        
                                        }
                                    }
                                }
                            }                        
                        }
                    }

                    > .alsolec {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height: 71px;
                        border-radius: 0px 0px 16px 16px;
                        border-width: 1px 0px 0px 0px;
                        border-color: #dbdbdb;
                        border-style: solid;   
                        
                        > .gomb {
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            border-radius: 10px;
                            height: 40px;
                            background-color: #52b141;
                            padding: 0px 20px 0px 20px;  
                            cursor: pointer;                 
                            color: #ffffff;                   
            
                            > .szoveg {
                            }
        
                            &:hover {
                                background-color: #499f3a;
                                color: #ffffff;
                            }
                        }
                    }
                }

                > .hiba {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    > .ikon {
                        width: 80px;
                        height: 80px;
                        margin-bottom: 10px;

                        > svg {
                            color: #7e7e7e;
                            width: 80px;
                            height: 80px;                
                        }
                    }                
                }
            }
        } 
    }
}

section.tab {
    > .menu {
        display: flex;
        border-width: 0px 0px 0px 0px;
        border-color: #cbcbcb;
        border-style: solid;

        > .tab {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            color: #515151;

            &.on { 
                background-color: #ffffff;
                border-color: #cbcbcb #cbcbcb #ffffff #cbcbcb;
                border-style: solid; 
                position: relative;
                z-index: 10;

                &:before {
                    content: '';
                    position: absolute;
                    height: 3px;
                    background-color: var(--szin-4);
                    z-index: 30;
                    top: 0px;
                    left: -1px;
                }
                
                &:first-of-type {
                    z-index: 30;

                    &.on {
                        border-width: 0px 1px 1px 1px;
                        min-width: calc(var(--tab-width) + 2px);
                        
                        &:before {
                            width: calc(var(--tab-width) + 2px);
                        }                        
                    }
                }
                
                &:not(:last-of-type):not(:first-of-type) {
                    z-index: 30;

                    &.on {
                        border-width: 0px 1px 1px 0px;
                        min-width: calc(var(--tab-width) + 1px);

                        &:before {
                            width: calc(var(--tab-width) + 2px);
                        }                         
                    }
                } 
                
                &:last-of-type {
                    z-index: 30;

                    &.on {
                        border-width: 0px 1px 1px 0px;
                        min-width: calc(var(--tab-width) + 1px);

                        &:before {
                            width: calc(var(--tab-width) + 2px);
                        }
                    }
                }
                
                > .bubi {
                    position: relative;

                    &:after {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        right: -20px;
                        top: -6px;
                        content: attr(data-darab);
                        border-radius: 20px;
                        color: #ffffff;
                        background-color: var(--szin-4);
                        font-size: 12px;                       
                    }
                }
            }

            &.off {
                background-color: #ffffff;
                border-color: #cbcbcb;
                border-style: solid;  
                cursor: pointer;
                position: relative;
                z-index: 10;
                
                &:before {
                    content: '';
                    position: absolute;
                    width: 120px;
                    height: 3px;
                    background-color: #cbcbcb;
                    z-index: 20;
                    top: 0px;
                    left: 0px;
                }

                &:hover {
                    &.off {
                        &:before {
                            background-color: #b6b6b6;
                        }

                        > .szoveg {
                            color: #000000;
                        }

                        > .bubi {
                            &:after {
                                background-color: #b6b6b6;
                            }  
                        }
                    }
                }

                &:first-of-type {
                    &.off {
                        border-width: 0px 1px 1px 1px;
                        min-width: calc(var(--tab-width) + 2px);

                        &:before {
                            width: calc(var(--tab-width) + 2px);
                            left: -1px;
                        }
                    }
                }

                &:not(:last-of-type):not(:first-of-type) {
                    &.off {
                        border-width: 0px 1px 1px 0px;
                        min-width: calc(var(--tab-width) + 1px);
                        
                        &:before {
                            width: calc(var(--tab-width) + 2px);
                            left: -1px;
                        }                        
                    }
                }

                &:last-of-type {
                    &.off {
                        border-width: 0px 1px 1px 0px;
                        min-width: calc(var(--tab-width) + 1px);

                        &:before {
                            width: calc(var(--tab-width) + 2px);
                            left: -1px;
                        }                         
                    }
                }
            }
            
            > .bubi {
                position: relative;

                &:after {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    right: -20px;
                    top: -6px;
                    content: attr(data-darab);
                    border-radius: 20px;
                    color: #ffffff;
                    background-color: #cbcbcb;
                    font-size: 12px;                       
                }
            }            
        }

        &:after {
            display: flex;
            content: '';
            border-width: 0px 0px 1px 0px;
            border-color: #cbcbcb;
            border-style: solid;
            width: 100%;
            height: 50px;  
        }
    }

    > .content {
        display: flex;
        width: 100%;
        border-width: 0px 1px 1px 1px;
        border-color: #c3c3c3;
        border-style: solid; 

        > .tab {
            width: 100%;
            padding: 20px 20px 20px 20px;

            &.on {
                display: block;
            }

            &.off {
                display: none;
            }
        }
    }
}

section.elonezet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0px;
    border-radius: 0px;
    padding: 0px;
    position: relative;
    min-height: 150px;

    > .content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        > .kep {
            position: relative;

            > img {
                width: calc(var(--dialog-szelesseg) - 10px);
                height: auto;
            }
        }
    }    
}

section.feltoltes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-width: 2px 2px 2px 2px;
    border-color: #cacaca;
    border-style: dashed;
    border-radius: 10px 10px 10px 10px;
    padding: 20px 20px 20px 20px;
    position: relative;
    min-height: 150px;

    &.elonezet {
        border: 0px;
        border-radius: 0px;
        padding: 0px;
    }

    > .form {
        width: 100%;
    }

    > .content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        > .kep {
            position: relative;

            > img {
                width: calc(var(--dialog-szelesseg) - 40px);
                height: auto;
            }
        }

        > .szoveg {
            margin-top: 10px;
            color: #515151;
            cursor: pointer;

            &:hover {
                color: #000000;
            }
        }

        > .hiba {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #7e7e7e;

            > .ikon {
                width: 100px;
                height: 100px;
    
                > svg {
                    color: #7e7e7e;
                    width: 100px;
                    height: 100px;
                }
            } 
            
            > .szoveg {
                margin-top: 5px;
            }
        }
    }
}

section.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    caret-color: transparent;

    > footer {
        display: flex;
        justify-content: center;
        width: var(--section-content-1400);
        background-color: #7e7e7e;
        color: #ffffff;
        border-radius: 10px;

        > .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0px 15px 0px 15px;

            > .bal {
                display: flex;
                align-items: center;
            }

            > .jobb {
                display: flex;
                align-items: center;
                height: 60px;

                > .netmetro {
                    width: 140px;
                    height: 28px;
                    
                    svg {
                        width: 140px;
                        height: 28px;
                        color: #ffffff;
                    }
                }
            }            
        } 
    }
}

section.form {
    color: #515151;

    > .elem {
        display: flex;
        flex-direction: column;

        > .szoveg {
            display: flex;
            justify-content: space-between;
            
            > .bal {}
            > .jobb {
                svg {
                    color: #7e7e7e;
                    width: 8px;
                    height: 8px;
                }                    
            }
        }

        > .multi {
            display: flex;
            flex-direction: row;
            align-items: center;

            > .elem {
                width: 100%;

                &:not(:last-of-type) {
                    margin-right: 15px;
                }
            }
        }

        > .hiba {
            margin-top: 5px;
            margin-right: 5px;
            color: #eb4436;
            text-align: right;
            display: none;                

            &.mutat {
                display: block;
            }
        }

        label {
            display: flex;
            justify-content: space-between;

            > span:last-of-type {
                svg {
                    color: #7e7e7e;
                    width: 8px;
                    height: 8px;
                }                
            }
        }

        input[type=number] {
            -moz-appearance: textfield;

            &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }

        input[type=date] {
            &:valid {
                color: #515151;
            }

            &:invalid {
                color: #515151;
            }

            &::-webkit-calendar-picker-indicator {
                cursor: pointer;
                filter: brightness(0) saturate(100%) invert(32%) sepia(0%) saturate(123%) hue-rotate(233deg) brightness(97%) contrast(93%);
            }
        }        

        input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
            font-family: "Roboto", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;                
            width: 100%;
            padding: 12px 20px;
            margin: 5px 0px 0px 0px;
            display: inline-block;
            border-width: 1px 1px 1px 1px;
            border-color: #c4c4c4;
            border-style: solid;
            border-radius: 10px;
            box-sizing: border-box;
            outline: none;
            caret-color: #515151;

            &.hiba {
                border-color: #eb4436;

                &:hover {
                    border-color: #eb4436;
                }

                &:focus {
                    border-color: #eb4436;
                }
            }

            &.kod {
                text-align: center;
                font-size: 18px;
                font-weight: bold;
                color: #515151;
            }

            &:hover {
                cursor: pointer;
                
                border-width: 1px 1px 1px 1px;
                border-color: #878787;
                border-style: solid;                
            }

            &:focus {
                background-color: #fbfbfb;
                border-width: 1px 1px 1px 1px;
                border-color: #878787;
                border-style: solid;
            }
        }

        &:not(:last-of-type) {
            margin-bottom: 15px;
        }

        textarea {
            resize: none;
            white-space: normal;
            text-align: justify;
        }
    }

    > .infobox {
        > fieldset {
            border-width: 2px 2px 2px 2px;
            border-color: #c4c4c4;
            border-style: dashed;
            border-radius: 10px;
            margin-top: 20px;

            > legend {
                padding: 0px 10px 0px 10px;
                font-size: 12px;
            }

            > .box {
                padding: 0px 10px 0px 10px;
                font-size: 12px;

                > ul {
                    padding: 10px 10px 10px 10px;

                    > li {
                        &::marker {
                            color: #515151;
                        }

                        &:not(:last-of-type) {
                            margin-bottom: 5px;
                        }                                        
                    }
                }
            }
        }                        
    }

    > .checkbox {
        position: absolute;
        width: 18px;
        height: 18px;
        top: calc((100% - 18px) / 2);

        > input[type="checkbox"] {
            position: absolute;
            width: 18px;
            height: 18px;
            left: 0;
            top: 0;
            opacity: 0;
            margin: 0;
            padding: 0;

            &:checked {
                + label {
                    &:after {
                        opacity: 1;
                    }
                }
            }
        }

        > label {
            &:before {
                position: absolute;
                content: '';
                width: 18px;
                height: 18px;
                left: 0;
                top: 0;
                background-color: #ffffff;
                border-width: 1px 1px 1px 1px;
                border-color: #c0c0c0;
                border-style: solid; 
                cursor: pointer;
            }

            &:after {
                content: '';
                position: absolute;
                width: 12px;
                height: 12px;
                left: 3px;
                top: 3px;
                opacity: 0;
                background-color: #878787;
                cursor: pointer;
            }
        }

        > .szoveg {
            display: flex;
            align-items: center;
            height: 18px;
            margin-left: 22px;
        }
    }

    > .beallitasok {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .checkbox2 {
        > input[type="checkbox"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: rgba(0, 0, 0, 0);
            margin: 0;
            position: relative;
            border-radius: 0px;
            display: inline-block;
            overflow: hidden;
            width: 50px;
            height: 26px;
            border-radius: 16px;
            background-color: #d4d4d4;
            transition: background-color 250ms;
            vertical-align: middle;
            cursor: pointer;
    
            &:before {
                position: absolute;
                top: 2px;
                left: 2px;
                border-radius: 16px;
                content: '';
                display: inline-block;
                width: 22px;
                height: 22px;
                background-color: #ffffff;
                transition: all 200ms;
                
            }
    
            &:checked {
                background-color: var(--szin-4);
    
                &:before {
                    left: 26px;
                }
            }
    
            &:disabled {
                background-color: #efefef;
    
                &:checked {
                    background-color: #b7dec0;  
                }
            }
    
            + label {
                vertical-align: middle;
                font-family: Verdana;
            }
        }
    }
    
    
    @media (prefers-reduced-motion) {
        .checkbox2 {
            > input[type=checkbox] {
                transition: none;
    
                &:before {
                    transition: none;
                }
            }
        }
    }    

    > .kereso {
        display: flex;            
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 42px;
        padding: 0px 20px 0px 20px;
        margin: 5px 0px 0px 0px;
        border-width: 1px 1px 1px 1px;
        border-color: #c4c4c4;
        border-style: solid;
        border-radius: 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
        
        > .input {
            width: calc(100% - 32px); /* Annyi pixel kell levonni amennyi a kereső ikon box szélessége + 10px margin */

            > input[type=text] {
                width: 100%;
                line-height: 24px;
                font-size: 14px;
                color: #515151;
                font-family: "Roboto", sans-serif;
                border-width: 0px 0px 0px 0px;
                outline: none;
                caret-color: #515151;
            }
        }

        > .ikon {
            width: 22px;
            height: 22px;
            cursor: pointer;

            > svg {
                color: #7e7e7e;
                width: 22px;
                height: 22px;
            }
        }            
    }

    > .gomb {
        display: flex;
        justify-content: center;
        margin-top: 40px;

        > .belepes {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            width: 160px;
            height: 40px;
            padding: 0px 20px 0px 20px;  
            cursor: pointer;                 
            color: #ffffff;
            background-color: var(--szin-4);

            &:hover {
                cursor: pointer;
                background-color: var(--szin-4-s);
            }              
            
            > .ikon {
                width: 22px;
                height: 22px;
                cursor: pointer;
                margin-right: 5px;  
                
                > svg {
                    color: #ffffff;
                    width: 22px;
                    height: 22px;
                }
            }
        }
    }

    > .feltoltes {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    
        > input[type=file] {
            display: none;
        }

        > label {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            > .ikon {
                width: 60px;
                height: 60px;

                > svg {
                    color: #7e7e7e;
                    width: 60px;
                    height: 60px;
                }
            }

            > .szoveg {}
        }

        > .progress-bar-box {
            width: 100%;
            display: none;

            &.kampany, &.plaza, &.felulet {
                display: block !important;
            }

            > .progress-bar {
                width: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 5px;

                > progress {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;                                        
                    background-color: #efefef;
                    border: 0;
                    width: calc(100% - 35px);
                    height: 10px;
                    color: #ffffff;
                    position: relative;

                    &.kampany {
                        width: 100% !important;
                    }

                    &::-webkit-progress-bar {
                        color: #ffffff;
                        background-color: #efefef; 
                    }

                    &::-webkit-progress-value {
                        background-color: var(--szin-4);  
                    }
                    
                    &::-moz-progress-bar {
                        background-color: var(--szin-4);
                    }                                       
                }

                > label {
                    width: 38px;
                    height: 16px;
                    display: flex;
                    align-items: flex-end;
                }
            }
        }
    }
}

section.sidebar {
    position: fixed;
    width: var(--sidebar-szelesseg);
    min-height: 100vh;
    z-index: 10000;
    overflow: hidden;

    &[data-oldal="jobb"] {
        top: 0px;
        right: calc(var(--sidebar-szelesseg) * -1);
        -webkit-box-shadow: 0px 0px 20px 0px rgba(151,151,151,0.7);
        -moz-box-shadow: 0px 0px 20px 0px rgba(151,151,151,0.7);
        box-shadow: 0px 0px 20px 0px rgba(151,151,151,0.7);

        &.on {
            animation-name: sidebar-jobb-on;
            animation-duration: 0.4s; 
            animation-timing-function: ease; 
            animation-fill-mode: forwards;       
        } 
        
        &.off {
            animation-name: sidebar-jobb-off !important;
            animation-duration: 0.6s !important; 
            animation-timing-function: ease !important; 
            animation-fill-mode: forwards !important;       
        }
    }

    &[data-oldal="bal"] {
        top: 0px;
        left: calc(var(--sidebar-szelesseg) * -1);
        -webkit-box-shadow: 0px 0px 20px 0px rgba(151,151,151,0.7);
        -moz-box-shadow: 0px 0px 20px 0px rgba(151,151,151,0.7);
        box-shadow: 0px 0px 20px 0px rgba(151,151,151,0.7);

        &.on {
            animation-name: sidebar-bal-on;
            animation-duration: 0.4s; 
            animation-timing-function: ease; 
            animation-fill-mode: forwards;       
        }  
        
        &.off {
            animation-name: sidebar-bal-off !important;
            animation-duration: 0.6s !important; 
            animation-timing-function: ease !important; 
            animation-fill-mode: forwards !important;       
        }
    }    

    > main {
        position: relative;
        background-color: #ffffff;
        width: var(--sidebar-szelesseg);
        min-height: 100vh;
        color: #515151;
        
        > .fejlec {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: var(--sidebar-szelesseg);
            height: 54px;
            background-color: #ffffff;
            padding: 0px 15px 0px 15px;              
            
            > .bal, .jobb {
                display: flex;
                align-items: center;

                > .ikon {
                    width: 22px;
                    height: 22px;

                    > svg {
                        color: #737373;
                        width: 22px;
                        height: 22px;                                
                    }
                }

                > .szoveg {
                    height: 22px;
                    display: flex;
                    align-items: center;
                    color: #737373;
                    font-weight: bold;
                }
            }

            > .bal {
                > .szoveg {
                    margin-left: 5px;
                }
            }

            > .jobb {
                > .szoveg {
                    margin-right: 5px;
                }
            }
        }        

        > .content {
            position: relative;
            background-color: #f7f7f7;
            width: var(--sidebar-szelesseg);
            min-height: calc(100vh - 124px);

            > .layout {
                overflow-y: scroll;
                -ms-overflow-style: none;
                scrollbar-width: none;
                overscroll-behavior: contain; 
                width: var(--sidebar-szelesseg);
                max-height: calc(100vh - 124px);
                padding: 20px 10px 20px 10px;
                &::-webkit-scrollbar { 
                    display: none;
                }                
            }
        }

        > .alsolec {
            width: var(--sidebar-szelesseg);
            height: 70px;
            background-color: #ffffff;

            > .gombok {
                border-radius: 0px 0px 10px 10px;
                width: 100%;
    
                > .content {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: row;
                    padding: 15px 20px 15px 20px;
    
                    > .gomb {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        border-radius: 10px;
                        height: 40px;
                        padding: 0px 20px 0px 20px;  
                        cursor: pointer;                 
                        color: #ffffff;                   
                        
                        > .ikon {
                            width: 22px;
                            height: 22px;
                            cursor: pointer;
                            margin-right: 5px;  
                            
                            > svg {
                                color: #ffffff;
                                width: 22px;
                                height: 22px;
                            }
                        }

                        > .szoveg {
                            height: 14px;
                            line-height: 14px;                            
                        }

                        &.off {
                            pointer-events: none;
                        }                        

                        &.success {
                            background-color: var(--szin-4);

                            &:hover {
                                background-color: var(--szin-4-s);
                                color: #ffffff;
                            }                            
                        }

                        &.warning {
                            background-color: var(--szin-2);

                            &:hover {
                                background-color: var(--szin-2-s);
                                color: #ffffff;
                            }                            
                        }

                        &.error {
                            background-color: var(--szin-1);

                            &:hover {
                                background-color: var(--szin-1-s);
                                color: #ffffff;
                            }                            
                        }

                        &.info {
                            background-color: var(--szin-5);

                            &:hover {
                                background-color: var(--szin-5-s);
                                color: #ffffff;
                            }                            
                        }
    
                        &:not(:last-of-type) {
                            margin-right: 40px;
                        }
                    }
                }                        
            }             
        }
    }
}

@keyframes sidebar-bal-on {
    0% {
        transform: translateX(calc(var(--sidebar-szelesseg) * -1));
    }
  
    100% {
        transform: translateX(var(--sidebar-szelesseg));
    }
}

@keyframes sidebar-bal-off {
    0% {
        transform: translateX(var(--sidebar-szelesseg));
    }
  
    100% {
        transform: translateX(calc(var(--sidebar-szelesseg) * -1));
    }
}

@keyframes sidebar-jobb-on {
    100% {
        transform: translateX(calc(var(--sidebar-szelesseg) * -1));
    }
  
    0% {
        transform: translateX(var(--sidebar-szelesseg));
    }
}

@keyframes sidebar-jobb-off {
    100% {
        transform: translateX(var(--sidebar-szelesseg));
    }
  
    0% {
        transform: translateX(calc(var(--sidebar-szelesseg) * -1));
    }
}

dialog {
    min-height: 100vh;
    background: none;
    margin: 0 auto;
    outline: none;
    border: none;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    caret-color: transparent;

    &::-webkit-scrollbar { 
        display: none;
    }

    &.on {
        &::backdrop {
            background-color:rgba(0, 0, 0, 0.3);
            animation-name: dialog-backdrop-on;
            animation-duration: 0.4s; 
            animation-timing-function: ease; 
            animation-fill-mode: forwards; 
        }        
    }

    &.off {
        &::backdrop {
            background-color:rgba(0, 0, 0, 0.3);
            animation-name: dialog-backdrop-off;
            animation-duration: 0.4s; 
            animation-timing-function: ease; 
            animation-fill-mode: forwards; 
        }
    }   

    > .ablak {
        background: none;
        padding-bottom: 200px; 

        &.on {
            animation-name: ablak-top-on;
            animation-duration: 0.4s; 
            animation-timing-function: ease; 
            animation-fill-mode: forwards; 
            transform: translateY(200px);       
        }
    
        &.off {
            animation-name: ablak-top-off !important;
            animation-duration: 0.4s !important; 
            animation-timing-function: ease !important; 
            animation-fill-mode: forwards !important;     
        }

        > .box {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            overflow: hidden;
            position: relative;

            > .fejlec {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: 47px;
                background-color: #e2e2e2;
                color: #7e7e7e;
                border-radius: 10px 10px 0px 0px;
                border-width: 0px 0px 1px 0px;
                border-color: #cbcbcb;
                border-style: solid;
                padding: 0px 15px 0px 15px;              
                
                > .bal {
                    display: flex;
                    align-items: center;
    
                    > .ikon {
                        width: 22px;
                        height: 22px;
    
                        > svg {
                            color: #737373;
                            width: 22px;
                            height: 22px;                                
                        }
                    }
    
                    > .szoveg {
                        height: 22px;
                        display: flex;
                        align-items: center;
                        color: #737373;
                        font-weight: bold;
                        margin-left: 5px;
                    }
                }
    
                > .jobb {
                    display: flex;
                    align-items: center;
                    flex-direction: row;
                    
                    > .ikon {
                        width: 20px;
                        height: 20px;
                        cursor: pointer; 

                        &:not(:last-of-type) {
                            margin-left: 10px;
                        }                          
                        
                        > svg {
                            color: #737373;
                            width: 20px;
                            height: 20px;
                        }
                    }

                    > .elvalaszto {
                        width: 14px;
                        height: 14px;
                        margin-left: 5px;  
                        margin-right: 5px;
                        
                        > svg {
                            color: #737373;
                            width: 14px;
                            height: 14px;
                        }
                    } 
                    
                    > .bezaras {
                        width: 22px;
                        height: 22px;
                        cursor: pointer;  
                        
                        > svg {
                            color: #737373;
                            width: 22px;
                            height: 22px;
                        }
                    }                    
                }
            }

            > .content {
                width: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;
                padding: 20px 20px 20px 20px;
    
                > .adatok {
                    display: flex;
                    flex-direction: column;

                    > .dialog-lista {
                        
                    }

                    :is(section.fajl) {
                        display: flex;
                        flex-direction: column;
                        
                        > .fejlec {
                            display: flex;
                            justify-content: space-between;
                            padding: 0px 0px 10px 0px;

                            > .bal {
                                > .szoveg {}
                            }
                            
                            > .jobb {
                                display: flex;
                                flex-direction: row;
                                align-items: center;

                                > .szoveg {
                                    padding-right: 5px;
                                }

                                > .ikon {
                                    width: 22px;
                                    height: 22px;
                                    cursor: pointer;
        
                                    > svg {
                                        color: #7e7e7e;
                                        width: 22px;
                                        height: 22px;
                                    }
                                } 
                            }                           
                        }
                            
                        > .url {
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 100%;
                            height: 40px;
                            line-height: 40px;
                            
                            &.on {
                                color: #c4c4c4;

                                &:before {
                                    animation-name: dialog-url-masolas-on;
                                    animation-duration: 0.2s; 
                                    animation-timing-function: ease; 
                                    animation-fill-mode: forwards; 
                                    content: '';
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    background: rgba(226, 226, 226, 0.6);
                                    border-radius: 10px 10px 10px 10px;
                                    z-index: 8998;
                                }
    
                                &:after {
                                    animation-name: dialog-url-masolas-on;
                                    animation-duration: 0.2s; 
                                    animation-timing-function: ease; 
                                    animation-fill-mode: forwards;                                    
                                    content: 'VÁGÓLAPRA MÁSOLVA';
                                    position: absolute;
                                    text-align: center;
                                    width: 100%;
                                    height: 100%;
                                    z-index: 8999;
                                    color: #7e7e7e;
                                }                                 
                            }
                        
                            &.off {
                                color: #515151 !important;

                                &:before {
                                    animation-name: dialog-url-masolas-off !important;
                                    animation-duration: 0.2s !important; 
                                    animation-timing-function: ease !important; 
                                    animation-fill-mode: forwards !important; 

                                }
    
                                &:after {
                                    animation-name: dialog-url-masolas-off !important;
                                    animation-duration: 0.2s !important; 
                                    animation-timing-function: ease !important; 
                                    animation-fill-mode: forwards !important; 
                                }                                 
                            }                                                                                        
                        }

                        > .szoveg {
                            text-align: center;
                        } 
                        
                        > .pdf {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-top: 10px;

                            > .gomb {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                padding: 10px;

                                &:hover {
                                    background: rgba(226, 226, 226, 0.4);
                                    border-radius: 10px 10px 10px 10px;
                                }

                                > .ikon {
                                    width: 22px;
                                    height: 22px;
        
                                    > svg {
                                        color: #7e7e7e;
                                        width: 22px;
                                        height: 22px;
                                    }
                                }    
                                
                                > .szoveg {
                                }
                            }
                        }
                    }

                    :is(section.infobox) {
                        display: flex;
                        flex-direction: column;   
                        
                        > .szoveg {
                            display: flex;
                            justify-content: space-between;
                        }                        
                    }

                    :is(section.keresobox) {
                        position: relative;
                        color: #515151;
                    
                        > .info {
                            display: flex;
                            flex-direction: column;
                
                            > .ugyfel, .kapcsolattarto, .kapcsolattartok {
                                > .szoveg {
                                    display: flex;
                                    justify-content: space-between;
                                }
                            }
                
                            > .kapcsolattarto {
                                margin-top: 20px;
                            }
                        }
                    
                        > .lista {
                            display: flex;
                            flex-direction: column;
                            overflow: hidden;
                            max-height: 225px;
                            padding: 10px 15px 10px 15px;
                            border-width: 1px 1px 1px 1px;
                            border-color: #c4c4c4;
                            border-style: solid;
                            border-radius: 10px;
                            box-sizing: border-box;
                            outline: none;
                
                            > .content {
                                width: 100%;
                                height: 100%;
                                overflow-y: scroll;
                                -ms-overflow-style: none;
                                scrollbar-width: none;
                                box-sizing: content-box;
                            
                                &::-webkit-scrollbar { 
                                    display: none;
                                }   
                                
                                > .sor {
                                    display: flex;
                                    width: 100%;
                
                                    > .elem {
                                        width: 100%;
                                        height: 33px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-between;
                                        padding: 0px 5px 0px 5px;
                                        
                                        > .bal {
                                            display: flex;
                                            flex-direction: row;
                                            width: 100%;

                                            > .cella {

                                            }

                                            > .vonal {
                                                width: 16px;
                                                height: 16px;
                                                margin-left: 5px;
                                                margin-right: 5px;
                
                                                > svg {
                                                    color: #7e7e7e;
                                                    width: 16px;
                                                    height: 16px;
                                                }
                                            }                                            
                                        }
                
                                        > .jobb {
                                            display: flex;
                                            align-items: center;
                                            width: 17px;
                                            height: 34px;
                                            position: relative; /* A fake checkbox miatt kell relative!! */
                
                                            > .ikon {
                                                width: 22px;
                                                height: 22px;
                                                cursor: pointer;
                    
                                                > svg {
                                                    color: #7e7e7e;
                                                    width: 22px;
                                                    height: 22px;
                                                }
                                            }
                                        }
                                    }
                
                                    &:not(:last-of-type) {
                                        border-width: 0px 0px 1px 0px;
                                        border-color: #c4c4c4;
                                        border-style: dashed;
                                    } 
                                }
                
                                > .hiba {
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-between;
                                    height: 33px;
                                    padding: 0px 5px 0px 5px;
                
                                    > .bal {
                
                                    }
                
                                    > .jobb {
                                        > .ikon {
                                            width: 20px;
                                            height: 20px;
                                            cursor: pointer;
                
                                            > svg {
                                                color: #7e7e7e;
                                                width: 20px;
                                                height: 20px;
                                            }
                                        }
                                    }                        
                                }
                            }
                        }
                
                        > .hiba {
                            display: flex;
                            justify-content: center;
                        }
                    }

                    :is(section.main) {
                        > .lista {
                            width: 1160px;
                            max-height: 346px;

                            > .content {
                                padding: 10px 10px 10px 10px;
                                overflow: hidden;

                                > .adatok {
                                    overflow-y: scroll;
                                    -ms-overflow-style: none;
                                    scrollbar-width: none;
                                    box-sizing: content-box;
                                
                                    &::-webkit-scrollbar { 
                                        display: none;
                                    } 
                                                                        
                                    > .elem {
                                        > .funkciok {
                                            position: relative;

                                            > .box {
                                                width: 18px; /* Olyan szélessnek kell lenni mint maga a checkbox!! */
                                            }
                                        }
                                    }
                                }

                                > .alsolec {
                                    > .jobb {
                                        display: flex;
                                        align-items: center;

                                        > .muveletek {
                                            display: flex;
                                            flex-direction: row;
                
                                            > .ikon {
                                                width: 24px;
                                                height: 24px;
                                                cursor: pointer;
                    
                                                > svg {
                                                    color: #7e7e7e;
                                                    width: 24px;
                                                    height: 24px;
                                                }
                
                                                &:not(:last-of-type) {
                                                    margin-right: 5px;
                                                }                                
                                            }                            
                                        }
                                    }
                                }
                            }
                        }
                    }

                    :is(section.fajlok) {
                        display: flex;
                        flex-direction: column;
                        position: relative;

                        > .fejlec {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex-direction: row;
                            width: 100%;
                            height: 42px;
                            padding: 0px 10px 0px 10px;

                            &.rejt {
                                display: none;
                            }

                            > .bal {
                                > .szoveg {
                                    font-weight: bold;
                                }
                            }

                            > .jobb {
                                > .szoveg {
                                    font-weight: bold;
                                }
                            }                            
                        }

                        > .lista {
                            display: flex;
                            flex-direction: column;
                            width: 100%;
                            position: relative;

                            > .elem {
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                flex-direction: row;
                                width: 100%;
                                height: 36px;
                                padding: 0px 10px 0px 10px;
                                
                                &:nth-child(2n) {
                                    background-color: #f9f9f9;
                                } 

                                > .bal {
                                    > .szoveg {

                                    }
                                }
                                
                                > .jobb {
                                    display: flex;
                                    flex-direction: row;

                                    > .ikon {
                                        width: 22px;
                                        height: 22px;
                                        cursor: pointer;
            
                                        > svg {
                                            color: #7e7e7e;
                                            width: 22px;
                                            height: 22px;
                                        }
        
                                        &:not(:last-of-type) {
                                            margin-right: 10px;
                                        }
                                    }
                                }
                            } 

                            > .hiba {
                                display: flex;
                                justify-content: center;
                            }                       
                        }
                    }
                
                    > .bejegyzes-info, .erdeklodo-info, .ugyfel-info, .kapcsolattarto-info, .plaza-info, .felulet-info, .plaza-hibalista, .plaza-felulet-hibalista, .plaza-kapcsolattarto-hibalista, .dialog-info {
                        > .elem {
                            color: #515151;

                            > .szoveg {
                                display: flex;
                                justify-content: space-between;
                            }
    
                            > .leiras {
                                display: flex;
                                align-items: center;
                                flex-direction: column;
        
                                div:first-of-type {
                                    margin-bottom: 10px;
                                }
        
                                div:last-of-type {
                                    word-break: break-all;
                                    text-align: justify;
                                }
                            }
    
                            &:not(:last-of-type) {
                                margin-bottom: 20px;
                            }   
                        }
                    }

                    > .help {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 230px;

                        > .kozep {
                            display: flex;
                            align-items: center;   
                            flex-direction: column;   
                            width: 100%;   
                            
                            > .szoveg {
                                padding-bottom: 10px;
                            }

                            > .elemek {
                                > .elem {
                                    display: flex;
                                    color: #515151;

                                    &:not(:last-of-type) {
                                        margin-bottom: 10px;
                                    } 

                                    > .kocka {
                                        width: 20px;
                                        height: 20px;

                                        &.szin-3 {
                                            background-color: var(--szin-2);
                                        }
                                        
                                        &.szin-4 {
                                            background-color: var(--szin-2);
                                        }

                                        &.szin-5 {
                                            background-color: var(--szin-5);
                                        }  
                                        
                                        &.szin-6 {
                                            background-color: var(--szin-8);
                                        }   
                                        
                                        &.szin-7 {
                                            background-color: var(--szin-2);
                                        }       

                                        &.szin-8 {
                                            background-color: var(--szin-7);
                                        }

                                        &.szin-9 {
                                            background-color: var(--szin-4);
                                        }

                                        &.szin-10 {
                                            background-color: var(--szin-6);
                                        }    
                                        
                                        &.szin-11 {
                                            background-image: linear-gradient(45deg, var(--szin-2) 50%, var(--szin-7) 50%);
                                        }
                                    }

                                    > .szoveg {
                                        display: flex;
                                        padding-left: 15px;
                                    }
                                }
                            }                            
                        }
                    }                    

                    > .naptar-help {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 260px;

                        > .bal {
                            display: flex;
                            flex-direction: column;
                            height: 100%;

                            > .szoveg {
                                padding-bottom: 10px;
                            }

                            > .elemek {
                                > .elem {
                                    display: flex;
                                    color: #515151;

                                    &:not(:last-of-type) {
                                        margin-bottom: 10px;
                                    } 

                                    > .kocka {
                                        width: 20px;
                                        height: 20px;

                                        &.szin-3 {
                                            background-color: var(--szin-2);
                                        }
                                        
                                        &.szin-4 {
                                            background-color: var(--szin-2);
                                        }

                                        &.szin-5 {
                                            background-color: var(--szin-5);
                                        }  
                                        
                                        &.szin-6 {
                                            background-color: var(--szin-8);
                                        }   
                                        
                                        &.szin-7 {
                                            background-color: var(--szin-2);
                                        }       

                                        &.szin-8 {
                                            background-color: var(--szin-7);
                                        }

                                        &.szin-9 {
                                            background-color: var(--szin-4);
                                        }

                                        &.szin-10 {
                                            background-color: var(--szin-6);
                                        }    
                                        
                                        &.szin-11 {
                                            background-image: linear-gradient(45deg, var(--szin-2) 50%, var(--szin-7) 50%);
                                        }
                                    }

                                    > .szoveg {
                                        display: flex;
                                        width: 320px;
                                        padding-left: 15px;
                                    }
                                }
                            }
                        }

                        > .jobb {
                            display: flex;
                            align-items: flex-end;
                            flex-direction: column;
                            height: 100%;

                            > .szoveg {
                                padding-bottom: 10px;
                            }

                            > .elemek {
                                > .elem {
                                    display: flex;
                                    color: #515151;

                                    &:not(:last-of-type) {
                                        margin-bottom: 10px;
                                    } 

                                    > .kocka {
                                        width: 20px;
                                        height: 20px;
                                        border-width: 2px 2px 2px 2px;
                                        border-color: red;
                                        border-style: solid;  

                                        &.szin-1 {
                                            background-color: var(--szin-2); /* Státusz -> Ajánlatadás alatt */
                                        }
                                        
                                        &.szin-2 {
                                            background-color: var(--szin-5); /* Státusz -> Időpont foglalva */
                                        }

                                        &.szin-3 {
                                            background-color: var(--szin-8); /* Státusz -> Megrendelve */
                                        }  
                                        
                                        &.szin-4 {
                                            background-color: var(--szin-7); /* Státusz -> Engedélyeztetés alatt */
                                        }   
                                        
                                        &.szin-5 {
                                            background-color: var(--szin-6); /* Státusz -> Engedélyeztetés alatt */
                                        }

                                        &.szin-6 {
                                            background-color: var(--szin-4); /* Státusz -> Számlázandó */
                                        } 
                                        
                                        &.szin-7 {
                                            background-image: linear-gradient(45deg, var(--szin-8) 50%, var(--szin-7) 50%); /* Státusz -> Megrendelve / Engedélyeztetés alatt */
                                        }
                                    }

                                    > .szoveg {
                                        display: flex;
                                        justify-content: flex-end;
                                        width: 320px;
                                        padding-right: 15px;
                                    }
                                }
                            }
                        }                        
                    }

                    > .felulet-kepek-info {
                        > .elem {
                            color: #515151;

                            > .kep {
                                position: relative;

                                > img {
                                    width: calc(var(--dialog-szelesseg));
                                    height: auto;
                                }
                            }

                            > .hiba {
                                width: 100%;
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                color: #7e7e7e;
                    
                                > .ikon {
                                    width: 100px;
                                    height: 100px;
                        
                                    > svg {
                                        color: #7e7e7e;
                                        width: 100px;
                                        height: 100px;
                                    }
                                } 
                                
                                > .szoveg {
                                    margin-top: 5px;
                                }
                            }  
                        }                      
                    }
                    
                    > .erdeklodok, .ugyfelek {
                        > .main {
                            display: flex;
                            flex-direction: column;
                            padding: 20px;

                            > .content {
                                display: flex;
                                justify-content: space-between;
                                width: 100%; 
                                
                                > .box {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    border-radius: 10px 10px 10px 10px;
                                    border-width: 2px 2px 2px 2px;
                                    border-color: #dbdbdb;
                                    border-style: dashed;                                    
                                    padding: 20px 20px 20px 20px;
                                    width: 200px;
                                    cursor: pointer;

                                    &:hover {
                                        border-color: #c5c5c5;

                                        svg {
                                            color: #818181 !important;
                                        }
                                    }

                                    > .ikon1 {
                                        width: 50px;
                                        height: 50px; 
                                        
                                        > svg {
                                            color: #8f8f8f;
                                            width: 50px;
                                            height: 50px;
                                        }
                                    }

                                    > .ikon2 {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 50px;
                                        height: 50px; 
                                        
                                        > svg {
                                            color: #8f8f8f;
                                            width: 40px;
                                            height: 40px;
                                        }
                                    }                                    
                                }
                            }

                            > .info {
                                text-align: center;
                                margin-top: 20px;
                            }

                            > .infobox {
                                width: 100%;
    
                                > fieldset {
                                    border-width: 2px 2px 2px 2px;
                                    border-color: #c4c4c4;
                                    border-style: dashed;
                                    border-radius: 10px;
                                    margin-top: 20px;
    
                                    > legend {
                                        padding: 0px 10px 0px 10px;
                                        font-size: 12px;
                                    }
    
                                    > .box {
                                        padding: 0px 10px 0px 10px;
                                        font-size: 12px;
    
                                        > ul {
                                            padding: 10px 10px 10px 10px;
    
                                            > li {
                                                &::marker {
                                                    color: #515151;
                                                }
    
                                                &:not(:last-of-type) {
                                                    margin-bottom: 5px;
                                                }                                        
                                            }
                                        }
                                    }
                                }                        
                            }                            
                        }

                    }

                    > .hiba {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        padding: 10px 0px 10px 0px;
    
                        > .ikon {
                            width: 80px;
                            height: 80px;
                            margin-bottom: 10px;
    
                            > svg {
                                color: #7e7e7e;
                                width: 80px;
                                height: 80px;                
                            }
                        }                
                    }                    
                }

                > .ikon {
                    > i {
                        font-size: 60px;
                        color: #7e7e7e;
                    }
                }
    
                > .szoveg {
                    text-align: center;
                    padding: 10px 0px 0px 0px;
                }                
            }          
            
            > .gombok {
                border-radius: 0px 0px 10px 10px;
                border-width: 1px 0px 0px 0px;
                border-color: #dbdbdb;
                border-style: solid;
                width: 100%;
    
                > .content {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: row;
                    padding: 15px 20px 15px 20px;
    
                    > .gomb {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        border-radius: 15px;
                        border-width: 2px 2px 2px 2px;
                        border-color: #ffffff;
                        border-style: solid;
                        height: 40px;
                        padding: 0px 20px 0px 20px;  
                        cursor: pointer;                 
                        color: #ffffff;
                        outline-width: 2px;  
                        outline-style: solid;                 
                        
                        > .ikon {
                            width: 22px;
                            height: 22px;
                            cursor: pointer;
                            margin-right: 7px;  
                            
                            > svg {
                                color: #ffffff;
                                width: 22px;
                                height: 22px;
                            }
                        }

                        > .szoveg {
                            height: 14px;
                            line-height: 14px;                            
                        }

                        &.success {
                            background-color: var(--szin-4);
                            outline-color: var(--szin-4);

                            &:hover {
                                background-color: var(--szin-4-s) !important;
                                outline-color: var(--szin-4-s) !important;
                                color: #ffffff;
                            }                            
                        }

                        &.warning {
                            background-color: var(--szin-2);
                            outline-color: var(--szin-2);

                            &:hover {
                                background-color: var(--szin-2-s) !important;
                                outline-color: var(--szin-2-s) !important;
                                color: #ffffff;
                            }                            
                        }

                        &.error {
                            background-color: var(--szin-1);
                            outline-color: var(--szin-1);

                            &:hover {
                                background-color: var(--szin-1-s) !important;
                                outline-color: var(--szin-1-s) !important;
                                color: #ffffff;
                            }                            
                        }

                        &.info {
                            background-color: var(--szin-5);
                            outline-color: var(--szin-5);

                            &:hover {
                                background-color: var(--szin-5-s) !important;
                                outline-color: var(--szin-5-s) !important;
                                color: #ffffff;
                            }                            
                        }
    
                        &:not(:last-of-type) {
                            margin-right: 40px;
                        }
                    }
                }                        
            }            
        }
    }    
}

@keyframes ablak-top-on {
    0% {
        transform: translateY(-100%);
        display: none;
    }
  
    100% {
        transform: translateY(200px);
        display: block;
    }
}
  
@keyframes ablak-top-off {
    0% {
        transform: translateY(200px);
        display: block;
    }
    
    100% {
        transform: translateY(-100%);
        display: none;
    }
}
  
@keyframes dialog-backdrop-on {
    0% {
        opacity: 0;
    }
  
    100% {
        opacity: 1;
    }
}

@keyframes dialog-backdrop-off {
    0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    }
}

@keyframes dialog-url-masolas-on {
    0% {
        opacity: 0;
    }
  
    100% {
        opacity: 1;
    }
}

@keyframes dialog-url-masolas-off {
    0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    }
}

#lapozo {
    display: flex;
    flex-direction: row;
    height: 24px;
    line-height: 24px;
    align-items: center;

    > .ikon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        cursor: pointer;
        pointer-events: none;

        > svg {
            color: #7e7e7e;
            width: 16px;
            height: 16px;                
        } 
    }

    > .szamok {
        display: flex;
        flex-direction: row;

        > .szam {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            line-height: 20px;
            height: 20px;
            cursor: pointer;
            pointer-events: none;
            padding-left: 3px;  
            padding-right: 3px;

            > .oldal {
                padding-left: 6px;
                padding-right: 6px;

                &.aktiv {
                    border-radius: 5px;
                    background-color: #7e7e7e;
                    color: #ffffff;
                }
            }
        }
    }
}

#elvalaszto {
    display: flex;
    align-items: center;
    color: #c4c4c4;
    margin: 20px 0px 20px 0px;

    &:before, &:after {
        content: '';
        flex-grow: 1;
        background-color: #c4c4c4;
        height: 1px;
        font-size: 0px;
        line-height: 0px;
    }

    &:before {
        margin-right: 15px;
    }

    &:after {
        margin-left: 15px;    
    } 
}

/* Kör alakú betöltő */
.betoltes {
    z-index: 9998;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.70);
        /*inset: 7px auto auto 7px;*/
        z-index: 9998;
        overflow-y: hidden;
    }

    &:after {
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        box-shadow:
            0em -1.3em rgba(197, 197, 197, 0.1428),
            0.65em -1.1em rgba(197, 197, 197, 0.2857),
            1.1em -0.65em rgba(197, 197, 197, 0.4286),
            1.3em 0em rgba(197, 197, 197, 0.5714),
            1.1em 0.65em rgba(197, 197, 197, 0.7143),
            0.65em 1.1em rgba(197, 197, 197, 0.8572),
            0em 1.3em rgba(197, 197, 197, 1);
        animation: spinner 1.2s linear infinite;
        inset: calc(50% - 3px) auto auto calc(50% - 3px);
        z-index: 9999;        
    }
    
    &:is(.belepes) {
        &:before {
            border-radius: 20px;
        }
    }    
    
    &:is(.box) {
        &:before {
            border-radius: 10px;
        }
    }

    &:is(.lista) {
        &:before {
            border-radius: 10px;
        }
    }

    &:is(.feltoltes) {
        &:before {
            border-radius: 10px;
        }
    }
    
    &:is(.kep) {
        &:before {
            border-radius: 0px;
        }
    } 
    
    &:is(section.main) {
        &:before {
            border-radius: 10px;
            width: var(--section-content-1400);
        }
    }
    
    &:is(.ajanlatkero .bal .content) {
        &:before {
            border-radius: 10px;
            inset: 0px auto auto 0px;
        }
    }
    
    &:is(.ajanlatkero .jobb .content) {
        &:before {
            border-radius: 10px;
            inset: 0px auto auto 0px;
        }
    }
}

/* Kocka alakú betöltő */
.betoltes2 {
    --w: 8px; /* kocka szélesség (csak páros) */
    --h: 9px; /* kocka magasság (csak páratlan) */
    --p: 5px; /* kocka padding */
    --bw: calc((var(--w) * 7) + (var(--p) * 6)); /* kocka box szélesség (szélesség * kocka darabszám) + (padding * padding darabszám) */  
    
    position: relative;  

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.6);
        /* background-color: brown; */
        z-index: 9998;
        overflow-y: hidden;   
    }

    &:after {
        content: '';
        position: absolute;
        width: var(--w);
        height: var(--h);
        display: flex;
        animation: loader 1s linear infinite;
        animation-fill-mode: forwards;
        z-index: 9997;
        /*animation-direction: alternate;*/      
        top: calc(calc(100% - (var(--h) * 3)) / 2);
        left: calc(calc(100% - var(--bw)) / 2);        
    }

    &:is(.szuro .fejlec) {
        &:before {
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%; 
        }
    }
}

@keyframes loader {
    0% {	
        content: '';       
        box-shadow:
            0px var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(55, 55, 55, 1);
    }
    14% {
        content: '';
        box-shadow:
            0px var(--h) 0px 0px rgba(55, 55, 55, 1),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(78, 78, 78, 0.84);
    }
    28% {
        content: '';
        box-shadow:
            0px var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(55, 55, 55, 1),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(102, 102, 102, 0.7);
    }
    42% {
        content: '';
        box-shadow:
            0px var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(55, 55, 55, 1),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(126, 126, 126, 0.56);
    }
    56% {
        content: '';
        box-shadow:
            0px var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(55, 55, 55, 1),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(150, 150, 150, 0.42);
    }
    70% {
        content: '';
        box-shadow:
            0px var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(55, 55, 55, 1),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(173, 173, 173, 0.28);
    }     
    84% {
        content: '';
        box-shadow:
            0px var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(55, 55, 55, 1),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(197, 197, 197, 0.14);
    }
    100% {	
        content: '';        
        box-shadow:
            0px var(--h) 0px 0px rgba(197, 197, 197, 0.14),
            calc(var(--w) + var(--p)) var(--h) 0px 0px rgba(173, 173, 173, 0.28),
            calc((var(--w) + var(--p)) * 2) var(--h) 0px 0px rgba(150, 150, 150, 0.42),
            calc((var(--w) + var(--p)) * 3) var(--h) 0px 0px rgba(126, 126, 126, 0.56),
            calc((var(--w) + var(--p)) * 4) var(--h) 0px 0px rgba(102, 102, 102, 0.7),
            calc((var(--w) + var(--p)) * 5) var(--h) 0px 0px rgba(78, 78, 78, 0.84),
            calc((var(--w) + var(--p)) * 6) var(--h) 0px 0px rgba(55, 55, 55, 1);
    }                   
}

@keyframes spinner {
    100% {
        transform: rotate(360deg);
    }
}

.rejt {
    display: none !important;
}

.no-scroll-body {
    overflow-y: hidden;
}

.no-scroll-app {
    display: block;
    min-height: 100%;
    overflow-y: scroll !important;
}

.no-scroll { 
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.szuro {
    display: flex;
    flex-direction: column;
    width: 100%;

    &:not(:last-of-type) {
        margin-bottom: 10px;
    } 

    > .fejlec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-width: 1px 1px 1px 1px;
        border-color: #dbdbdb;
        border-style: solid;
        background-color: #ffffff;
        padding: 0px 10px 0px 10px;
        width: 100%;     
        height: 48px;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        color: #515151;
        
        &.on {
            border-bottom: 1px #dbdbdb dashed;
        }

        > .bal {
            display: flex;
            
            > .ikon {
                width: 22px;
                height: 22px;
                margin-right: 10px;

                > svg {
                    color: #737373;
                    width: 22px;
                    height: 22px;
                }
            }

            > .szoveg {
                > .alap, .kivalasztott {
                    line-height: 22px;
                }
            }
        }

        > .jobb {
            display: flex;

            > .ikon {
                width: 20px;
                height: 24px;

                > svg {
                    color: #737373;
                    width: 22px;
                    height: 22px;

                    &.on {
                        display: block;
                    }
                    &.off {
                        display: none;
                    }
                }
            }            
        }
    } 
    
    > .content {
        visibility: hidden;
        position: absolute;
        border-width: 0px 1px 1px 1px;
        border-color: #dbdbdb;
        border-style: solid;
        background-color: #ffffff;
        padding: 5px 5px 5px 5px; 
        width: 100%;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;

        &.on {
            visibility: visible;
            position: relative;
        }

        > .kereso {
            display: flex;            
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            height: 42px;
            padding: 0px 10px 0px 10px;
            margin: 5px 0px 5px 0px;
            border-width: 1px 1px 1px 1px;
            border-color: #dbdbdb;
            border-style: solid;
            box-sizing: border-box;
            
            > .input {
                width: calc(100% - 32px); /* Annyi pixel kell levonni amennyi a kereső ikon box szélessége + 10px margin */
    
                > input[type=text] {
                    width: 100%;
                    line-height: 24px;
                    font-size: 14px;
                    color: #515151;
                    font-family: "Roboto", sans-serif;
                    border-width: 0px 0px 0px 0px;
                    outline: none;  
                    caret-color: #515151;               
                }                 
            }
    
            > .ikon {
                width: 22px;
                height: 22px;
    
                > svg {
                    color: #7e7e7e;
                    width: 22px;
                    height: 22px;
                }
            }  
            
            &:hover {
                border-width: 1px 1px 1px 1px;
                border-color: #c3c3c3;
                border-style: solid;                
            }             
        }
        
        > .elvalaszto {
            display: flex;
            align-items: center;
            color: #bbbbbb;
            margin: 10px 0px 10px 0px;
        
            &:before, &:after {
                content: '';
                flex-grow: 1;
                background-color: #dbdbdb;
                height: 1px;
                font-size: 0px;
                line-height: 0px;
            }
        
            &:before {
                margin-right: 10px;
            }
        
            &:after {
                margin-left: 10px;    
            } 
        }        

        > .lista {
            display: flex;
            flex-direction: column;  
            width: 100%;
            
            > .sor {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 5px 0px 5px; 
                width: 100%;
                height: 42px;
                line-height: 42px;

                &:nth-child(2n) {
                    background-color: #f9f9f9;
                }

                &.checked {
                    background-color: #f0ede9 !important;
                }

                > .bal {

                }

                > .jobb {
                    position: relative;
                    width: 18px;
                    height: 42px;
                }
            }

            > .hiba {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 5px 0px 5px; 
                width: 100%;
                height: 42px;
                line-height: 42px;

                > .bal {

                }

                > .jobb {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;

                    > .ikon {
                        width: 20px;
                        height: 20px;

                        > svg {
                            color: #7e7e7e;
                            width: 20px;
                            height: 20px;
                        }
                    }
                }                        
            }            
        }
    }
}