/*----------- APRO MOBILOK -------------*/
@media (max-width: 325px) {
    :root {
        --btn-height: calc( var(--s-header-height) / 2 - 12px / 2);
    }
    #menubox {
        left: -260px;
        width: 260px;
    }
    #menubtn div {
        width: max(2vw, 20px);
        height: 1px;
        margin-bottom: 4px;
    }
        #menubtn.active #top {
            transform: translateY(5px) rotate(-135deg);
        }
        #menubtn.active #bottom {
            transform: translateY(-5px) rotate(-45deg);
        }
    #menubtn {
        left: 6vw;
    }
    #clock_label {
        right: 6vw;
    }
    #clock_label, #logout, #logout img{
        width: max(2vw, 20px);
        height: max(2vw, 20px);
    }
    #login-form,
    #sign-up-form {
        padding: 10% 10% 15px 15px;
        width: 70vw;
    }
}
@media (max-height: 300px) {
    :root{
        --s-header-height: 15vh;
        --fs-smaller: 0.75vh;
        --fs-small: 0.95vh;
        --fs-middle: 1.45vh;
        --fs-default: 3vh;
        --fs-big: 3.2vh;
        --fs-bigger: 4vh;
        --fs-header: 5vh;
    }
    .offline, .online, .skeleton, .unpluged {
    height: 30vh;
    }
}

/*---------MOBILOK VEGE------*/

/*-----------TABLETEK ES HASZONSZORUEK---------*/

@media screen and (max-width: 1024px) {
    :root {
        --fs-smaller: 0.75vh;
        --fs-small: 0.95vh;
        --fs-middle: 1.45vh;
        --fs-default: 2.2vh;
        --fs-big: 2.8vh;
        --fs-bigger: 3.4vh;
        --fs-header: 3.5vh;

        --s-header-height: 7vh;
    }
	#today {
		flex-direction: column;
	}
	#today > * {
		width: 95%;
		margin-bottom: 1.25vh;
	}
    #ups_state {
        width: 89%;
    }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
    #contentContainer {
		flex-direction: column;
	}
    
}


@media screen and (max-width: 767px) {
    #login-form,
    #sign-up-form {
        width: 70vw;
    }
    #menubtn {
        left: 6vw;
    }
    #clock_label {
        right: 6vw;
    }
    .offline, .online, .skeleton, .unpluged {
        width: 80vw;
    }
    #logout {
		left: 18vw;
	}
    #ups_label {
        right: 18vw;
    }
    #gepek-container {
		width: 95%;
	}
}

@media (min-aspect-ratio: 1/3) and (max-aspect-ratio: 2/3) {
	:root{
        --fs-header: 2.5vh;
        --s-header-height: 8vh;
        --h-container: auto;
    }
    #gepek-BE, #gepek-KI {
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	justify-items: center;
	place-self: center;
	}
    .pihole-button, .eszkozok-button, .gepek-button {
		margin: 2.5% 2.5%;
	}
    .gepek-button:first-child {
        margin-left: 0px;
    }
	#gepek-container {
		width: 95%;
	}
    #menubox {
        left: -80vw;
        width: 80vw;
    }
    #menubtn.active {
        left: 8vw;
    }
    #login-form,
    #sign-up-form {
        width: 70vw;
    }
    #logout {
		left: 18vw;
	}
    #today {
		flex-direction: column;
	}
	#today > * {
		width: 95%;
		margin-bottom: 1.25vh;
	}
    .offline, .online, .skeleton {
        width: 80vw;
    }
    #oldal {
        flex-direction: row;
        columns: 2;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

}


@media (max-aspect-ratio: 108/120) and (min-width: 767px) {
    :root{
        --fs-smaller: 0.55vh;
        --fs-small: 0.75vh;
        --fs-middle: 0.85vh;
        --fs-default: 1.0vh;
        --fs-big: 1.8vh;
        --fs-bigger: 3.7vh;
        --fs-header: 3vh;
        --h-container: 55vh;
        --s-header-height: 6vh;
    }
    #menubox {
        left: -450px;
        width: 450px;
    }
    #menubtn.active {
        left: 8vw;
    }
    #login-form,
    #sign-up-form {
        width: 60vw;
    }
    #logout {
		left: 18vw;
	}
    #today {
		flex-direction: row;
	}
	#today > * {
		width: 30%;
        height: 9vh;
		margin-bottom: 1.25vh;
        
	}
    .ora, .datum {
        font-size: var(--fs-bigger);
    }
    #oldal-container, #eszkozok-container, #gepek-container {
        height: var(--h-container);
    }
    .offline, .online, .skeleton, .unpluged {
        max-height: 5vh;
        width: 18vw;
    }
    #oldal {
        flex-direction: row;
        columns: 2;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
}