:root {
    --leftmenu-width: 220px;
    --upperbar-height: 70px;
    --bars-top-param: 76px;
    --header-top-param: 3px;
    --bars-horiz-param: 10px;
    --leftmenu_balrahuzas: -200px;
    --menu-bars-kozok: 10px;
}

*{
    box-sizing: border-box;
}

.full_page_container{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    overflow: hidden;
}

.b-rad_sm{
   border-radius:5px;
}
.b-rad_md{
   border-radius:10px;
}
.b-rad_lg{
   border-radius:15px;
}
.b-rad_xl{
   border-radius:20px;
}
.b-rad_full{
   border-radius:50%;
}

.main_leftmenu_container{
    position: fixed;
    top: var(--bars-top-param);
    left: var(--leftmenu_balrahuzas);
    width: var(--leftmenu-width);
    height: calc(100% - calc(var(--bars-top-param) + var(--header-top-param))); /* Alján és tetején is kihagyunk 3 -3 pixelt */
    /*background-color: #1e4b5d;*/
    background-color: #DDD;
    color:#FFF;
    /*border: 1px solid #17404f;*/
    border: 1px solid #CCC;
    opacity:0;
    /*transition: opacity 0.25s, left 0.25s;
    transition-timing-function: ease-out;*/
    z-index:2;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.main_center_container{
    position: fixed;
    top: var(--header-top-param);
    left: var(--bars-horiz-param);
    width: calc(100% - (var(--bars-horiz-param) + var(--bars-horiz-param)));
    height: var(--upperbar-height);
    /*transition: left 0.25s, width 0.25s;
    transition-timing-function: ease-out;*/
    z-index:1;
}

.main_center_container > *{

}

.main_upperbar_container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--upperbar-height);
    background: #fff;
    border:1px solid rgba(204, 204, 204, 0.76);
    transition: left 0.5s, width 0.5s;
    z-index:3;
}

.main_page_container{
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    top: calc(var(--upperbar-height) + var(--header-top-param));
    left: 0;
    width: 100%;
    height: calc(100vh - calc(var(--upperbar-height) + var(--header-top-param) + var(--header-top-param) + var(--header-top-param)));
    background-color:#FFF;
    border:1px solid #DEDEDE;
    transition: left 0.5s, width 0.5s;
    border-radius:10px;
}

.shared_main_page_container{
    background: #fff;
    background: linear-gradient(165deg,rgba(30, 86, 98, 0.6) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 95%, rgba(30, 86, 98, 0.6) 100% );
}

.main_leftmenu_container:hover{
    left:0;
    opacity: 1;
    box-shadow: 2px 2px 7px rgba(204, 204, 204, 0.76);
}

.main_leftmenu_container:hover + .main_center_container{
    left: calc(var(--leftmenu-width) + var(--menu-bars-kozok) );
    width: calc(100% - calc(var(--leftmenu-width) + var(--menu-bars-kozok) + var(--bars-horiz-param)));
}

.main_leftmenu_container_locked{
    left: 0 !important;
    opacity:1 !important;
}

.main_leftmenu_container_locked:hover{
    box-shadow: 0 0 0 rgba(204, 204, 204, 0.76);
}

.main_center_container_locked{
    left: calc(var(--leftmenu-width) + var(--menu-bars-kozok) ) !important;
    width: calc(100% - calc(var(--leftmenu-width) + var(--bars-horiz-param))) !important;
}

.main_center_container_locked > .main_page_container{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.menu_logo{
    width:100%;
    text-align: center;
    margin-top:20px;
    margin-bottom:10px;
    height:70px;
    border-bottom:2px solid rgba(17, 53, 65, 0.51);
}

.menu_logo img{
    max-width:70%;
    max-height:60px;
}

.leftmenu_lock_sidebar_button_container{
    position: absolute;
    height:20px;
    width:20px;
    text-align:center;
    display:block;
    bottom:5px;
    right:5px;
    /*left: calc(var(--leftmenu-width) - 50px);*/
}

.leftmenu_lock_sidebar_button_container a{
    display:block;
    width:20px;
    text-align:center;
    background-color:rgba(30, 75, 93,0.3);
    color: rgba(255,255,255,0.3) !important;
    cursor: pointer;
    height:20px;
    font-size:12px;
    padding:2px 5px;
    border-radius:50%;
}

.leftmenu_lock_sidebar_button_container a:hover , .leftmenu_lock_sidebar_button_container a.lockerbutton_locked:hover{
    background-color:rgba(30, 75, 93,1);
    color: rgba(255,255,255,1) !important;
}

.leftmenu_lock_sidebar_button_container a.lockerbutton_locked{
    background-color:rgba(30, 75, 93,0.3);
    color: rgba(255,255,255,0.3) !important;
    text-align:right;
    padding-right:15px;
}

.leftmenu_content{
    height:100%; /* A logo és a sidebar locker miatt  */
    overflow-y: auto;
}

.upperbar_content{
    padding:20px 30px;
}

.upperbar_content img{
    height:40px;
    margin-top:-5px;
}


.main_page_content{
    padding:20px 30px;
}

.profil_icon{
    text-align:center;
    margin-top:-10px;
    height:calc(var(--upperbar-height) - 20px);
    border-radius:50px;
    width:calc(var(--upperbar-height) - 20px);
    border:5px solid #d8e3e8;
    color:#84a5b6;
    overflow:hidden;
    background-color:#d8e3e8;

}

.profil_icon a{
    margin-top:-5px !important;
    font-size:36px;
    cursor:pointer;
    color:#84a5b6;
    background-color:#d8e3e8;
    display:block;
    width:100%;
    height:38px;
    text-align:center;
    transition:transform 0.2s;
}

.profil_icon_inner{
    position: relative;
    opacity:0;
    width:100%;
    height:100px;
    transition: opacity 0.25s;
    border-radius:5px;
}

.profil_icon_inner p{
    padding:10px 0;
}

.profil_icon_inner p.name{
    padding:0;
    padding-bottom:2px;
    margin-bottom:0px;
    background-color:#d8e3e8;
    color:#84a5b6;
    font-weight:bold;
}

.profil_gombok{

}

.profil_icon:hover{

}

.profil_icon:hover > a{
    transform: scale(1.2);
}

.cool_leallitas{
    position: fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#000;
    color:#FFF;
    font-size:20px;
}

.leftmenu_content ul{
    margin:0;
    width:100%;
    padding:0;
    list-style-type: none;
}

.leftmenu_content ul li{
    padding:4px;
    display:block;
    margin-bottom:0px;
}

.leftmenu_content ul li a, .leftmenu_content ul li .menuGomb{
    display:block;
    text-align: left;
    text-decoration: none;
    color:#333;
    overflow:hidden;
    padding:10px 15px;
    cursor:pointer;
}

.one_menu_container{
    display:flex;
    justify-content: start;
    align-items: center;
}

.one_menu_container div{
    line-height:18px;
}

.leftmenu_content ul li a div.menuicon{
    text-align: center;
    font-size:18px;
    margin-right:10px;
}

.leftmenu_content ul li a span{
    font-size:16px;
}

.leftmenu_content ul li a:hover{
    background-color:rgba(33,33,33,0.1);
    color:#333;
    border-radius:5px;
}

.upperbar_content h1{
    color:#1e4b5d;
    font-size:26px;
    font-weight:bold;
}

.upperbar_content h1 span{
    display: inline-block;
    color:#000;
    font-size:18px;
    font-weight:bold;
}

.pin_kodos_belepeshez_pinkero_ablak{
    position: fixed;
    right:10px;
    top:50%;
    margin-top:-200px;
    height:380px;
    width:0;
    background-color:#d8e3e8;
    color:#1e4b5d;
    overflow: hidden;
    animation-name: beuszas_jobbrol;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    border-radius:15px;
    box-shadow: 0 0 5px rgba(51, 51, 51, 0.58);
    padding:25px;
}

.pin_kodos_belepeshez_pinkero_ablak h3{
    margin-bottom:30px;
}

.pin_kodos_belepeshez_pinkero_ablak p{
    color:#333;
}

@keyframes beuszas_jobbrol {
    0%{
        opacity: 0;
        width:0;
        margin-right:0;
        right:10px;
    }
    100%{
        opacity: 1;
        width:400px;
        right:50%;
        margin-right:-200px;
    }
}

.pinkodos_bezargomb{
    display: block;
    position: absolute;
    right:0;
    top:0;
    border-top-right-radius: 15px;
    width:40px;
    height:40px;
    background-color:#E00;
    color:#FFF;
    text-align: center;
    text-decoration: none;
    padding:5px;
    font-weight:bold;
    font-size:20px;
    cursor: pointer;
}

.pinkodos_bezargomb:hover{
    opacity:0.5;
    color:#FFF;
}

.pinkod_profil_kep_container{
    text-align: center;
    background-color:#d8e3e8;
    border-radius:50%;
    position: fixed;
    top:50px;
    left:50%;
    margin-left:-50px;
    width:100px;
    height:100px;
    box-shadow: 0px 0px 0px 10px rgba(30, 75, 93, 0.8);
    overflow: hidden;
    padding:5px 0px;
}

.pinkod_profil_kep_container img{
    max-width:100%;
    max-height:80px;
}

.pinkod_profil_nev_container{
    text-align: center;
    position: fixed;
    top:170px;
    left:50%;
    margin-left:-150px;
    width:300px;
    height:100px;
    overflow: hidden;
    padding:5px 0;
    font-size:20px;
    color: rgba(30, 75, 93, 1);
    font-weight:bold;
}


.user_data_box{
    margin-top:20px;
    text-align:center;
    font-size:18px;
    font-weight:bold;
}

.user_data_box span{
    display: inline-block;
    color:#84a5b6;
    border:1px solid #d8e3e8;
    background-color:#d8e3e8;
    border-radius:50%;
    margin-right:10px;
}

.user_data_box span i{
    font-size:20px;
    padding:5px;
}

.cooldesk_clickhide_container{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
}

.miniProfilWindow{
    position: fixed;
    top:10px;
    right:30px;
    width:90%;
    max-width:350px;
    height:200px;
    color:#84a5b6;
    background-color:#d8e3e8;
    border-radius:10px;
    z-index:1001;
    padding:20px 20px;
}

.miniProfilWindow .profil_icon_container{
    text-align: center;
}

.miniProfilWindow .profil_icon_container .p_icon{
    display:inline-block;
    width:50px;
    height:50px;
    border-radius:50%;
    color:#d8e3e8;
    background-color: #6c8c9c;
    text-align: center;
    font-size:36px;
}

.miniProfilWindow p.name{
    text-align:center;
    padding:0;
    padding-bottom:2px;
    margin-bottom:0;
    margin-top:15px;
    background-color:#d8e3e8;
    color: #6c8c9c;
    font-weight:bold;
    font-size:18px;
}

.menu_section_begin{
    color: #d8e3e8;
    background-color:#1e4b5d;
    text-align:center;
    font-size:10px;
    padding:3px 10px;
}

.upper_bar_button_container{
    text-align:right;
    padding-right:5%;
}

.upper_bar_button_container button{
    margin-right: 10px;
    font-size:16px;
    padding-left:10px;
    padding-right:10px;
}


@media screen and (max-width: 768px){
    .main_page_content{
        padding:10px 10px;
    }
}