/* STRUCTURE */
#dpt-wrapper {
	
	height: 70vh;
	margin-top:3vh;
	}

#dpt-filter {
	background:    rgba(192, 192, 192, 0.7);
	width:         300px;
	
	padding:       .5em 1em;
	position:      absolute;
	font-size:     90%;
	border-radius: 10px;
	}

#dpt-content {
	position: absolute;
	left:     330px;
	
	width:    calc(95vw - 330px);
	}


#dpt-wrapper label {
	display:     block;
	margin:      1em 0 .2em 0;
	width: 100%;
	}

#dpt-wrapper .btn {
	background:    white;
	color:         #6ECCDD;
	border-radius: 100px;
	border:        0;
	font-weight:   900;
	margin:        2em 0 0;
	font-size:     100%;
	}

#dpt-wrapper .btn:hover {
	text-decoration: none;
	background:      rgb(255, 25, 190);
	color:           white;
	}

#dpt-bar {
	display:         flex;
	justify-content: space-between;
	margin:          0 0 5vh 0;
	}

#dpt-wrapper .btn.small, #dpt-backdrop .btn.small {
	margin:     0;
	padding:    .2em .5em;
	background: #6ECCDD;
	font-size:  90%;
	color:      white;
	border-radius:100px;
	cursor: pointer;
	}

#dpt-backdrop .btn.small.cancel {
	background: silver;
	}

#dpt-backdrop .btn.small.submit {
	float: right;
	}

#dpt-backdrop {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height: 100vh;
	background: rgba(0,0,0,.5);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(15px);
	z-index: 9999;
	display:none;
	flex-direction: column;
	justify-content: center;
	}

#dpt-backdrop.show {
	display: flex;
	}

#dpt-modal {
	width:   50vw;
	padding: 2vw;
	background: white;
	margin: auto 25vw;
	border-radius: 10px;
	box-shadow: 0px 10px 30px black;
	}

#dpt-modal #actions{
	min-height: 7em;
	height: 12em;
	
	font-size: 80%;
	color:#666
	}

#dpt-modal select {
	
	}

/* LISTE PROJETS */
.projet-item {
	padding:       .5em 1em;
	border:        1px solid silver;
	margin-bottom: 20px;
	border-radius: 8px;
	}

.projet-item p {
	margin: 0 0 4px 0;
	}

.projet-item .date {
	font-size: 80%;
	width: 100%;
	text-align: right;
	}

.projet-row {
	display:         flex;
	justify-content: space-between;
	margin-bottom:1em
	}

.pastille {
	display: inline-block;
	font-size: 60%;
	text-align: center;
	font-weight: 900;
	width: 1.5em;
	height: 1.5em;
	border-radius: 100px;
	background: grey;
	color:white;
	margin: 0 0 0 .5em;
	}

.dotted {
	border-bottom: 1px dotted silver;
	padding-bottom: 1em ;
	}

.projet-row>div {
	flex:0 1 33%;
	}

#dpt-wrapper #btn-filtrer.btn{
	margin-top: 2.6em;
	
	}

.btn-media {
	margin: 5px;
	border:1px solid gray;
	border-radius: 5px;
	padding: .2em .5em;
	font-size: 90%;
	color:grey;
	width: 18em;
	display: block;
	text-align: center;
	float:right;
	}

.btn-media:hover {
	text-decoration: none;
	color:white;
	background: grey;
	}

#dpt-logs {
	background: #95e39d;
	padding: 1em;
	border-radius: 8px;
	}

#projets ul {
	list-style: none;
	}

.dpt-titre {
	font-weight:900;
	margin: 0;
	padding: 0;
	font-size: 1.5vw;
	}

#dpt-wrapper .dpt-titre a.btn.small {
	background: silver;
	margin: 0 10px;
	opacity:0;
	font-size: 80%;
	
	}

#dpt-wrapper .projet-item:hover .dpt-titre a.btn.small {
	opacity:1;
	}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	#dpt-wrapper .dpt-titre a.btn.small {
		background: silver;
		margin: 0 5px;
		opacity:1;
		font-size: 80%;
		
		}
	}

.dpt-status {
	font-weight:100;
	margin: 0 1em 0 0;
	padding: 0;
	font-size: 1vw;
	
	}

.dpt-status-bar  {
	text-align: right;
	}
.projet-notes {
	margin-top: 1em;
	padding-left: 33%;
	}

.projet-note {
	margin:     .5em 0 .5em 0;
	background: #f3dfae;
	font-size:90%;
	padding: 1em;
	border-radius: 8px;
	}

.projet-note .label {
	font-weight: 100;
	font-size: 80%;
	text-align: left;
	border-bottom: 1px dotted rgba(0,0,0,.2);
	margin-bottom: .5em;
	padding-bottom: .3em;
	}

.btn-note, .btn-save-note {
	background: #f3dfae;
	border-radius:100px;
	border:0;
	font-size: 80%;
	padding: .2em 1em;
	margin: 1em 0 0 0;
	cursor: pointer;
	}

.btn-note:hover {
	color:black;
	}

.frm-note {
	margin-top: 1em;
	}

.frm-note textarea {
	background: #f3dfae;
	border: 1px solid grey;
	font-size: 90%;
	padding: .5em;
	border-radius: 8px;
	}

.frm-delete-note {
	float:right;
	display: inline-block;
	}

.btn-delete-note {
	background: transparent;
	border: 0;
	display: inline-block;
	border-radius: 100px;
	width: 2em;
	height: 2em;
	cursor: pointer;
	
	}

.btn-delete-note:hover {
	background: rgba(0,0,0,.2);
	}
.frm-note {
	display:none;
	}

.frm-note.show {
	display:block;
	}
/*
    SITE
***************************************************/

/* UI */

.dpt-explications {
	padding: 1em 0;
	text-align: left;
	
	}

.dpt-explications a {
	color:  rgb(90, 56, 200);
	}

.dpt-explications ul {
	list-style: circle;
	}

.dpt-confirmation {
	color:rgb(90, 56, 200);;
	margin:    10vh 10vw 10vh 0;
	font-size: 120%;
	font-family: TriviaGroteskN6
	}

#depot_projet .btn {
	
	color:         white;
	background: rgb(90, 56, 200);;
	border-radius: 100px;
	border:        0;
	font-weight:   900;
	font-size:     120%;
	padding:       .3em .6em;
	font-size:     100%;
	}

.dpt-btn:hover {
	text-decoration: none;
	background:      rgb(255, 25, 190);
	color:           white;
	
	}

/* FORMULAIRE */
#depot_projet #esp-form {
	margin-right: 10vw;
	}

#depot_projet #esp-form .btn {
	background: rgb(90, 56, 200);;
	color:        white;
	border-radius: 100px;
	border:        0;
	font-weight:   900;
	font-size:     120%;
	}

#depot_projet #esp-form .btn:hover {
	text-decoration: none;
	background:      black;
	color:           white;
	}

#depot_projet #esp-form .btn i {
	display: none;
	}

#depot_projet #esp-form label:not(.radio) {
	width:       100%;
	padding-top:  2em;

	/*font-weight: bold;*/
	text-transform: uppercase;
	font-size:   100%;
	display: block;
	}

#depot_projet #esp-form input[type=text] {
	width:       100%;
	font-family: "Roboto Condensed";
	}

#depot_projet #esp-form .radio-box > label {
	font-family: "Roboto Condensed";
	text-transform: none;
	}

#depot_projet #esp-form small.error {
	display: none;
	}

#depot_projet #esp-form .many_to_many {
	display:   flex;
	flex-wrap: wrap;
	}

#depot_projet #esp-form .many_to_many label {
	display: none;
	}

#depot_projet #esp-form .many_to_many > div {
	flex:        0 0 30%;
	font-weight: 300;
	
	}

#depot_projet #esp-form .radio-box {
	display:   flex;
	flex-wrap: wrap;
	}

#depot_projet #esp-form input[type=checkbox], #depot_projet #esp-form input[type=radio] {
	width: auto;
	}

#depot_projet #esp-form .radio-box > label {
	flex:        0 0 30%;
	margin:      0;
	font-weight: 300;
	font-size:   100%;
	}

#depot_projet #esp-form .radio-box input[type=radio] {
	width:  auto;
	float:  left;
	/*margin: -.5em .2em 0 0;*/
	}



#depot_projet #esp-form .help_text {
	font-weight: 300;
	font-size:   80%;
	margin-top:  .4em;
	font-family: "Roboto Condensed";
	text-transform: none;
	font-style: italic;
	}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)  {
	#depot_projet #esp-form .radio-box input[type=radio] {
		margin: 0.2em .2em 0 0;
		}
		
	}


#dpt-filter label {
	font-weight: bold;
	}

#dpt-filter .radio-box {
	margin-top: 1em;
	}