/*         CSS BY SZOKACS         */

/*           ADMIN CSS            */


/* LOGIN */
@media (max-width: 400px){
    .container{ 
        width: 210px;
    }
    .container h1{
        font-size: 25px;
    }
}

/* MENU */
@media (max-width: 1170px){
    header{ padding: 0 20px; }
    .menu-toggle{ display: block; }
    header nav{
        position: absolute;
        width: 100%;
        height: calc(100vh - 50px);
        background: #333333;
        top: 50px;
        left: -100%;
        transition: 0.5s;
    }
    header nav.active{ left: 0; }
    header nav ul{ 
        display: block; 
        text-align: center;
    }
    header nav ul li a{ border-bottom: 1px solid rgba(0, 0, 0, .2) }
    header nav ul li.active ul{
        position: relative;
        background: #555555;
    }
    header nav ul li ul li{ width: 100%; }
}
/* TABLE */
@media (max-width: 1170px){
    .container .pagetitle{ margin-bottom: 10px; }
    .pagecontent table, thead, tbody, th, td, tr{ display: block; }
    .pagecontent th{ display: none; }
    .pagecontent td:before {
        display: block;
        top: 15px;
        left: 6px;
        width: 40px;
        padding-right: 40px;
        margin-bottom: 15px;
        color: #f9c200;
    }
    /*
    .pagecontent td:nth-of-type(1):before { content: "Teendő"; }
    .pagecontent td:nth-of-type(2):before { content: "Megjegyzés"; }
    .pagecontent td:nth-of-type(3):before { content: "Helyszín/Projekt"; }
    .pagecontent td:nth-of-type(4):before { content: "Felelős";}
    .pagecontent td:nth-of-type(5):before { content: "Időpont";}
    .pagecontent td:nth-of-type(6):before { content: "Számla";}
    .pagecontent td:nth-of-type(7):before { content: "Státusz";}
    .pagecontent td:nth-of-type(8):before { content: "Sürgős";}
    .pagecontent td:nth-of-type(9):before { 
        font-family: fontAwesome; 
        content: "\f085";
    }
    */
    .container .pagetitle .addnew{
        display: block;
        margin: 10px 50px 0px 50px;
        float: none;
    }
    .container .pagecontent .exitsub{
        display: block;
        margin: 10px 50px 0px 50px;
        float: none;
    }
    .container .pagecontent .newuser{
        margin-top: -15px;
    }
}
@media (max-width: 600px){
    .container .pagetitle {
        float: none;
        display: block;
        text-align: center;
    }
    .container .pagetitle p{ 
        float: none;
        display: block;
        margin: 5px 0 10px 0;
        text-align: center;
    }
    .container .pagetitle .addnew{
        display: block;
        margin: 0px 50px 0px 50px;
        float: none;
        font-size: 15px;
    }
}
@media (max-width: 490px){
    .container .pagetitle .addnew{
        margin: 0px 50px 0px 50px;
        font-size: 15px;
    }
}
@media (max-width: 470px){
    .container .pagetitle{ margin-bottom: 10px; }
    .container .pagetitle p{ display: block; }
}
@media (max-width: 450px){

}
@media (max-width: 405px){
    .container .pagetitle .addnew{ margin: 0px 50px 0px 50px; }
}
/*   

400px től nagyon behúz a jobb margó valamiért és balra zár az egész... jobb oldalt kihagy egy jó darab helyet.
401px felett jó elvileg a responsivitás

*/