/*
  CMS

***************************************************/
/* STRUCTURE */
#dpt-wrapper {

    height: 70vh;
    margin-top:3vh;
}

#dpt-filter {
    background:    rgba(192, 192, 192, 0.7);
    width:         300px;

    padding:       .5em 1em;
    position:      fixed;
    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:white
}

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

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

.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_temp #esp-form {
    margin-right: 10vw;
}

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

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

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

#depot_projet_temp #esp-form label {
    width:       100%;
    margin-top:  2em;
    font-family: TriviaGroteskN6;
    /*font-weight: bold;*/
    text-transform: uppercase;
    font-size:   100%;
}

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

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

    }

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

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

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

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

}

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

}

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

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



#depot_projet_temp #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_temp #esp-form .radio-box input[type=radio] {
        margin: 0.2em .2em 0 0;
    }

}