/* STYLES POUR LA PAGE DES ENSEIGNANTS */
@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Dosis");

*{
	-webkit-transition: all 0.4s cubic-bezier(0.075,0.82,0.165,1);
	-moz-transition: all 0.4s cubic-bezier(0.075,0.82,0.165,1);
	-o-transition: all 0.4s cubic-bezier(0.075,0.82,0.165,1);
	transition: all 0.4s cubic-bezier(0.075,0.82,0.165,1);
}

::-moz-selection{
	color:white;text-shadow:none;background:#333;
}
::selection{
	color:white;text-shadow:none;background:#333;
}
img::selection{
	color:white;background:transparent;
}
img::-moz-selection{
	color:white;background:transparent;
}

::-webkit-scrollbar {
    width: 8px;
	opacity: 0.4;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(81, 90, 90); 
    border-radius: 2px;
	opacity: 0.4;
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(81, 90, 90); 
    background:rgba(81, 90, 90);
	opacity: 0.4;
}

::-webkit-scrollbar:hover, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-thumb:hover {
	opacity: 1;
} 

a{
	text-decoration: none;
	color: inherit;
}

a:hover{
	color: #72b91e;
}

cite{
	font-size: 0.8em;
}

img{
	vertical-align: middle;
}

h1,h2,h3,h4,h5,h6{
	margin: 0;
}

input[type="button"],input[type="submit"],input[type="reset"],button,.button {
	background: #000;
	border: 1px solid #000;
	color: #fff;
	padding: 10px;
	border-radius: 40px;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.15);
	margin: auto 2px;
	outline: unset;
	cursor: pointer;
}
input[type="button"]:hover:focus,input[type="submit"]:hover:focus,input[type="reset"]:hover:focus,button:hover:focus,.button:hover:focus,input[type="button"]:active,input[type="submit"]:active,input[type="reset"]:active,button:active,.button:active{
	background: #fff;
	color: #000;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

input[type="text"],input[type="tel"],input[type="email"],input[type="date"],input[type="password"],input[type="datetime-local"],input[type="datetime"],input[type="number"],input[type="search"],input[type="url"],textarea:not(.edit-text),select {
	outline: unset;
	width: 70%;
	display: block;
	padding: 6px;
	border-radius: 5px;
	border: 1px solid #d1d1d1;
	margin: 10px 0px;
}

textarea:not(.edit-text){
	height: 100px;
	resize: unset;
	
}

select option{
	padding: 6px;
}

.link, a{
	cursor: pointer;
	font-weight: bolder;
	font-family: roboto;
	color: #e55337;
}

.link:hover, a:hover{
	color: rgba(0,0,0,0.5);
	letter-spacing: 3px;
}
input[type="text"]:hover:focus,input[type="tel"]:hover:focus,input[type="email"]:hover:focus,input[type="date"]:hover:focus,input[type="password"]:hover:focus,input[type="datetime-local"]:hover:focus,input[type="datetime"]:hover:focus,input[type="number"]:hover:focus,input[type="search"]:hover:focus,input[type="url"]:hover:focus{
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.10);
}


input[type="image"] {
    width: 15px;
    /* background: #FFEB3B; */
    border: 1px solid;
    border-radius: 10px;
    padding: 10px;
}

.label-file {
    cursor: pointer;
    color: #1a1f14;
    text-align: right;
    font-weight: bold;
	width: 65%;
    background-color: #00b1ca5c;
    border: 1px solid #c4c7c7;
    padding: 10px;
    background: url(../icones/upload.png);
    background-size: 30px;
    background-position: left;
	background-position-x: 20px;
	box-shadow: 0px 0px 4px rgba(158, 158, 158, 0.28);
    background-repeat: no-repeat;
	display: block;
	margin: 15px 4%;
}

.label-file:hover {
    color: #72b91e;
}

.input-file {
    display: none;
}

a{
	text-decoration: none;
	color: inherit;
	outline: none;
}
.alert{
	color: red;
	font-size: 11px;
	padding: 10px;
	margin: 0 10%;	
}

.menu,.submenu,.interact-menu{
	display: block;
	list-style-type: disc;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
	margin:0;
	padding: 0;
	list-style: none;
}

html,body{
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
	color: #1a1f14;
	font-family: Raleway,Dosis,'Trebuchet MS',Roboto,'Helvetica Neue',Arial,sans-serif;
	background: url(../img/bg/colors8.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
}


.wrapper {
    height: 100vh;
    overflow: hidden;
	background: #f5f5f5;
}

.outframe{
	z-index: 1;
	position: absolute;
	bottom: 0;
	height: 0;
	opacity: 0;
	width: 100%;
	background: rgba(5,9,9,0.6); 
}
	.frame{
		z-index: 9;
		position: absolute;
		top: 170vh;
		left: 30%;
		margin: auto;
		background: #fff;
		height: 70vh;
		width: 40%;
		border-radius: 8px;
		box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
		overflow: hidden;
	}
		.frame > header,.frame > footer{
			height: 10%;
			overflow: hidden;
		}
		
		.frame > header{
			padding: 10px;
			text-align: center;
		}
		
		.frame > footer{
			display: flex;
			justify-content: center;
			border-top: 1px solid #d1d1d1;
		}
		.frame > article{
			height: 50vh;
			padding-left: 10px;
			padding-right: 10px;
			overflow: auto;
			overflow-x: hidden;
			position: relative;
		}
		
		.frame > article > div{
			position: absolute;
			left: -1000%;
		}
		.frame > article > div.visible{
			left: 0;
			width: 98%;
			padding: 1%;
		}
		
		.interact-menu{
			list-style: none;
			display: flex;
			width: 100%;
		}
		
		.interact-menu li{
			border-bottom: 2px solid #d1d1d1;
			padding: 5px;
			width: 100%;
			cursor: pointer;
			font-weight: bolder;
		}
		
		.interact-menu li.active{
			/*border-bottom: 2px solid #0a9bf7;*/
			border-bottom: 2px solid #090909;
		}
		
	.menubutton{
		display: none;
		z-index: 99;
		width: 30px;
		height: 20px;
		cursor: pointer;
		padding: 10px;
	}
	
		.menubutton div{
			width: 100%;
			height: 3px;
			margin: 4px;
			background: #1b1b19;
		}

.header, .login{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
}

.header{
	margin: 0px;
	background: #fff;
}

.login img {
    width: 150px;
}

.header img{
	width: 80px;
}


.main-frame{
	position: relative;
    padding: 40px;
}

.logform{
	display: grid;
	grid-template-columns: 1fr 1fr;
    align-items: center;
	margin: auto 20%;
}
	.logform > div{
		padding: 10px;
	}
	.logform > div:first-of-type img{
		width: 50%;
	}

.framework{
	height: 80%;
    overflow: hidden;
	display: grid;
	grid-template-columns: minmax(200px,15%) 1fr;
	/* border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac; */
	font-size: 0.9em;
}

.main-wrapper {
    border-left: 1px solid #e5e5e5;
	border-top: 1px solid #e5e5e5;
    background: #fff;
    padding: 5px;
	display: grid;
    grid-template-columns: minmax(300px,80%) 1fr;
}

.main-footer {
    font-size: inherit;
    color: #333;
    text-align: center;
}

	
.user-header {
	display: flex;
	justify-content: start;
	position: relative;
	background: #92d401;
	margin-bottom: 20px;
	/*padding: 5px;*/
	
    border-top: 2px solid #72b91e;
    border-bottom: 2px solid #72b91e;
}

#avatar{
	position: absolute;
    top: -10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    left: 0;
    margin: auto;	
	cursor: pointer;
}
#avatar:hover{
	box-shadow: 0px 0px 8px;
}

.workzone{
	position: relative;
	height: 80vh;
	overflow: auto;
}

.annonces{
	background: #f9f9f9;
    border: 2px solid #f5f5f5
}

.edit-zone{
	background: #fff;
	/* box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
	border-radius: 4px;
	width: 96%;
	margin: 10px auto;
	padding: 2%; */
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.edit-form{
	background: rgb(249, 249, 249);
	overflow: hidden;
	padding-left: 10px;
	padding-top: 10px;
}

.edit-zone-header{
	width: 96%;
	background: rgb(249, 249, 249);
	padding: 2%;
}

.edit-text{
	resize: none;
	width: 95%;
	height: 40vh;
	border: 2px solid #f9f9f9;
	padding: 2%;
	outline: none;
}

.edit-zone-header input[type="button"] {
	border-radius: 4px;
	margin: auto 0;
}

#viewDiv {
	padding: 10px;
}
	
	.menu{
		position: relative;
	}
	
	.submenu{
		display: none;
		margin-left: 20px;
	}
	
	.vue{
		display: block;
	}
	
		.menu li{
			padding: 10px;
			margin: 0;
			cursor: pointer;
		}
		
		.menu li:hover{
			background: #d1d1d1;
			font-weight: bold;
			letter-spacing: 1px;
		}
		
		.menu li.actif {
			color: #030303;
			font-weight: bold;
			letter-spacing: 1px;
		}
		
			.menu li.actif:hover {
				background: unset;
			}
			
			.submenu li.actifs{
				color: #139ff7;
			}
	
	.menu li img {
		width: 20px;
		margin: auto 5px;
	}


.images-frame {
    margin-right: 5px;
	border-radius: 4px;
    overflow: hidden;
	display: grid;
    grid-template-columns: minmax(100px,50%) minmax(100px,50%);
    grid-gap: 4px;
    grid-column-gap: 4px;
	grid-auto-rows: min-content;
}

.images-frame > img{
	box-shadow: 0px 1px 2px;
}

.image{
	position: relative;
	
}
.del-image{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9;
	cursor: pointer;
	width: 20px;
	height: 20px;
	text-align: center;
	padding: 10px;
	border-radius: 50%;
	box-shadow: 1px 2px 4px;
	color: #333;
	font-weight: bold;
	background: #fff;
	opacity: 0.5;
	
	
	-webkit-transition: all 0.4s cubic-bezier(0.17,.67,.83,.67);
	-moz-transition: all 0.4s cubic-bezier(0.17,.67,.83,.67);
	-o-transition: all 0.4s cubic-bezier(0.17,.67,.83,.67);
	transition: all 0.4s cubic-bezier(0.17,.67,.83,.67);
}

.image:hover > .del-image{
	opacity: 1;
}
/* For smartphones */
@media screen and (max-width: 780px) {
	.menubutton{
		display: block;
	}
	
	.menu > li{
		display: none;		
	}
	
	.header, .login {
		margin: 0;
	}
	
	.main-frame{
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.frame{
		left: 10%;
		height: 90vh;
		width: 80%;
	}
		.frame > article {
			height: 68vh;
		}
		
	.framework{
		display: block;
		height: 90%;
	}
	.main-wrapper {
		display: block;
	}
	.annonces{
		display: none;
	}
	
	.edit-zone,div.edit-zone{
		display: block;
	}
	
	
	.logform {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		margin: auto 0%;
	}
	
	.logform > div:nth-child(1) > img{
		display: none;
	}
}