@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Tahoma';
}

.containerM {
	visibility: hidden;
	width: 100%;
	min-height: 100%;
	max-width: 170px;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	position: fixed;
	z-index: 1000;
	/*transition: 0.1s ease-in-out;*/
}

.containerM .imgbox{
	position:relative;
	height: 120px;
	width: 100%;
	margin-bottom:20px;
	z-index: -1;
}

.containerM .navbar{
	width:100%; 
	padding: 0px;
	list-style:none;
}

.containerM .navbar .searchbox{
	position:relative;
	width:100%;
	background:#d6d6d6;
	padding:10px;
	border-radius:10px;
}

.searchbox .fa-search{
	position:absolute;
	font-size:20px;
	cursor:pointer;
	color:#3b3b3b;
	top:50%;
	transform:translateY(-50%);
	
}

.searchbox input{
	outline:none;
	border:none;
	margin-left:35px;
	font-size:18px;
	color:#000;
	background:none;
	overflow:hidden;
}

.searchbox:hover .fa-search{
	color:#009cff;
}

.containerM .navbar li{
	width:100%;
	display: inline-flex;
	margin: 5px 0;
}

.containerM .navbar li a{
	width:100%;
	margin-left: 8px;
	display:inline-flex;
	text-decoration:none;
	text-transform:capitalize;
	color:#3b3b3b;
	border-radius: 10px;
	align-items: center; 
	justify-content: left;
}

.containerM .navbar li:hover a{
	background: #009cff;
	color:#fff;
}

.containerM .navbar li a i{
	margin: auto 0;
	font-size:15px;
	width:32px;
	text-align:center;
}

	.containerM .navbar li a p {
		font-size: 15px;
		transform: scale(1);
		transform-origin: left;
		/*transition:0.3s;*/
		white-space: pre;
		margin: 0;
		align-items: center;
	}

#check:checked ~ .containerM .navbar li a p{
	transform: scale(0);
    width: 1rem;
}

.hide {
	-webkit-appearance:none;
	display:none;
	visibility:hidden;
}

.containerM label #arrow {
    position: absolute;
    width: 25px;
    height: 25px;
    line-height: 25px;
    right: -15px;
    font-size: 15px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    text-align: center;
    top: 60px;
    border-radius: 50px;
    color: #009cff;
    /*transition: 0.3s;*/
}

#check:checked ~ .containerM label #arrow {
    transform: rotate(180deg);
}

#check:checked ~ .containerM .profile label {
    display: none;
}



#check:checked ~ .containerM {
    max-width: 3.8rem;
}

    #check:checked ~ .containerM .hide-on-check {
        display: none;
    }

    #check:checked ~ .containerM .navbar li a .fa-chalkboard-user,
    #check:checked ~ .containerM .navbar li a .fa-sliders,
    #check:checked ~ .containerM .navbar li a .fa-hand-point-up,
    #check:checked ~ .containerM .navbar li a .fa-award,
    #check:checked ~ .containerM .navbar li a .fa-clock,
    #check:checked ~ .containerM .navbar li a .fa-list-check,
    #check:checked ~ .containerM .navbar li a .fa-print,
    #check:checked ~ .containerM .navbar li a .fa-book,
    #check:checked ~ .containerM .navbar li a .fa-shield-halved,
    #check:checked ~ .containerM .navbar li a .fa-arrow-right-from-brackets {
        margin-left: 3px;
    }

.containerM .navbar li span {
	position: absolute;
	display: block;
	background: #fff;
	border-radius: 8px;
	padding: 5px 8px;
	text-transform: capitalize;
	color: #009cff;
	/*transition: 0.2s;*/
	transform: translateX(100px);
	left: 80px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.3);
	visibility: hidden;
	opacity: 0;
	white-space: pre;
	font-size: 15px;
}

#check:checked ~ .containerM .navbar li:hover span{
	visibility:visible;
	opacity:1;
	transform:translateX(-12px);
	font-size:15px;
}

.containerM .navbar li span:before{
	position: absolute;
	content:'';
	border: 8px solid #fff;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	left: -14px;
	top:25%;
}

#check:checked  ~ section{
	filter: brigtness(70%);
}

#check:checked ~ .profile .imgbox{
	width:10px;
}

.profile {
    position: relative;
    display: grid;
    grid-template-rows: auto auto; 
    justify-items: center; 
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px 0; 
}

.profile .imgbox{
	position:relative;
	height: 100px;
	width: 100px;
	border: 2px solid #fff;
	border-radius:50%;
	overflow:hidden;
}

#check:checked ~ .containerM .profile .imgbox {
	height: 60px;
	width: 60px;
}

.profile label {
    font-size: 1rem;
    text-align: center;
}

/* PREENCHE TODO O ESPAÇO DA FOTO */
.imgbox img{
	width:100%;
	height:100%;
	object-fit:cover;
	
}

.heading{
	color:#000;
	
}

.heading h3{
	font-size:0.9em;
	font-weight:500;
}


.heading h4{
	opacity:0.5;
	font-size:0.8em;
	font-weight:400;
}

.containerM, .paginaPadrao {
	flex: 1; 
	min-width: 0;
  }

@media screen and (max-width:768px){
	.profile{
			display:grid;
			place-content:center;
	}	
}

@media screen and (min-width: 768px) {
	#check:checked ~ div:not(.containerM) {
		margin-left: 0;
		/*transition: 0.1s ease-in-out;*/
	}

	#check ~ div:not(.containerM) {
		margin-left: 180px;
		/*transition: 0.1s ease-in-out;*/
	}
}