/* COLOR & font */

:root{

    /* FONT */
    --lct-font:#333;
    --lct-font-a:#999;


    /* COULEURS PRIMAIRES */
    --lct-vert:#5FBA47;
    --lct-rouge:#BF3030;

    /* DECLINAISON ROUGE */
    /* clair */
    --lct-rouge-a:#cf584f;
    --lct-rouge-b:#de7a6f;
    --lct-rouge-c:#ea9c91;
    --lct-rouge-d:#f4bdb5;

    /* foncé */
    --lct-rouge-1:#af2c2c;
    --lct-rouge-2:#a02828;
    --lct-rouge-3:#902424;
    --lct-rouge-4:#802020;

    /* DECLINAISON VERT */
    /* clair */
    --lct-vert-a:#8ccb61;
    --lct-vert-b:#a2d57f;
    --lct-vert-c:#b7de9c;
    --lct-vert-d:#cde8ba;

    /* foncé */
    --lct-vert-1:#6eb53c;
    --lct-vert-2:#65a737;
    --lct-vert-3:#5c9832;
    --lct-vert-4:#53892d;
}

/* MAIN */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    position:relative;
    font-family: Arial, sans-serif;
    /*background-color: #f2f2f2;*/
    min-height: 1vh;
    color:var(--lvt-font);
}

main{
    display:flex;
    justify-content: center;
}

.main-element{
    padding: 1em;
    /*margin-top: 1em;*/
    /*    min-width:1200px;
        max-width: 1200px;*/
    /*background: #FFF;*/
    /*min-height: 8000px;*/
}

h1{
    margin: .5em 0 1em 0;
    color:var(--lct-rouge);
}

h2{
    margin: .5em 0 1em 0;
    color:var(--lct-vert);
}

h3{
    margin: .5em 0 1em 0;
    color:var(--lct-rouge);
}

/* FORM */

.form-container{
    padding-left: 2em;
    border-left: 4px solid #dedede;
}

.form-label{
    min-width: 150px;
    margin-right: 1em;

}

.form-input-container{
    display:flex;
    margin: 1em 0 1.5em 0;
}

.form-input-container.reverse{
    flex-direction: column;
}
.form-input-container.reverse .form-label{
    margin-bottom: .5em;
}


.form-btn-container{
    display:flex;
    margin: 1em 0 1.5em 0;
}

.form-btn-container.side-btn{
    margin: 1em 0 1.5em 4em;
    ;
}


input.form-input{
    border-width: 0 0 1px 0;
    outline: none;
    transition: 0.3s;

}

input.form-input:focus{
    /*border-width: 0 0 2px 0;*/
    border-color: var(--lct-rouge);
}

select.form-input{
    border-width: 0px 0px 1px 0px;
}

button{
    padding: .5em 1em;
    border: #333 1px solid;
    background: #FFF;
}

button:hover{
    transition: 0.3s;
    border: #333 1px solid;
    background: var(--lct-rouge-d);
    cursor:pointer;
}

.text-editor{
    width: 100%;
    max-width: 700px;
}

.ql-toolbar{
    max-width: 700px !important;
}

/* NAV / BANNER */

.banner-wrapper{
    background-color: var(--lct-rouge);
    color: #fff;
    /*padding: 10px 1em;*/
    height: 120px;

    display: flex;
    justify-content: center;
}

.banner-body{
    display:flex;
    width: 1200px;
    border-bottom: 3px solid var(--lct-rouge-b);
    flex-wrap: wrap;
}

.banner-logo{
    display:flex;
    margin: .5em;
}

.banner-logo img{
    height: 100px;
    /*margin: 10px;*/
}

.banner-logo-label-wrapper{
    margin-left: 2em;
}

.banner-logo-label{
    font-weight: 600;
    font-size: 45px;
}

.navigation-wrapper{
    /*position: relative;*/
    display: flex;
    align-items: flex-end;
    /*top: 3px;*/
    background: var(--lct-rouge);
}

.navigation-input{
    padding-bottom: .5em;
    padding: 0em 1em .5em 1em;
    border-bottom: 3px solid var(--lct-rouge-b);
    transition: .2s;
    min-width: 150px;
    text-align: center;
}

.navigation-input a{
    color:#FFF;
}
.navigation-input:hover{
    border-bottom: 3px solid var(--lct-vert);
}
.navigation-input:hover a{
    color:var(--lct-vert-b);
}

.navigation-input.current a{
    color:var(--lct-vert);
    font-weight: 600;
}

.navigation-input.current{
    color:var(--lct-vert);
    font-weight: 600;
}

/* FILTER */

            .filter-form{
                margin: 1em;align-items: flex-start;
            }
            
            .filter-title{
                margin: 1em 0;
            }
            
            .filter-title h3{
                margin: 0px;
            }
            
            .filter-content{
                display: flex;flex-wrap: wrap;
            }
            
            .filter-part:first-child{
                margin-right: 2em;padding-left: 2em;
            }
            .filter-part:not(:first-child){
                padding-left: 2em;border-left: 4px solid var(--lct-vert-d);
            }
            .filter-part h3{
                margin: 0em 0 1em 0
            }
            
            .filter-input-wrapper{
                margin: 1em;
            }
            
            .filter-input{
                margin-right: 1em;
            }

/* CONNEXION */

.connexion-container-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(./img/connexion-bg.png);
    background-size: auto;
    background-position: center;
}

.connexion-container{
    display:flex;
    align-items: center;

    padding: 1em 2em;
    background: #FFF;
    border: 1px solid #333;
    border-radius: 8px;
}


.connexion-logo-wrapper{
    margin-right: 1.5em;
}

.connexion-logo{
    height: 180px;
}

.connexion-title{
    margin: 1em 0 1em 0;
}

.connexion-title-main{
    color:var(--lct-rouge);
    font-size: 44px;
    font-weight: 600;
}

.connexion-subtitle{
    color:var(--lct-font-a);
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.connexion-form-wrapper{
    display: flex;
    justify-content: center;
}

.connexion-form-btn-wrapper{
    display:flex;
    justify-content: center;
}

.connexion-input{
    display:flex;
    align-content: center;
    justify-content: center;
}

.connexion-ico{
    color : var(--lct-font-a);
    font-size: 18px;
    margin-right: .5em;
}

/* CLIENT */

.client-item-wrapper{
    border-bottom: 1px solid #dedede;
}

.client-item-body{
    display:flex;
    align-items: center;
    padding: .5em;
}

.client-item-body-content{
    display: flex;
    margin-right: 3em;
    min-width: 340px;
}

.client-item-body-content-id{
    display:flex;
    align-items: center;
    background: var(--lct-rouge-d);
    padding: .5em;
    min-width: 52px;
    text-align: center;
    justify-content: center;
}

.client-item-body-content-label{
    margin-left: .5em;
}

.client-item-body-content-label.bottom-label{
    color: #999;
}
.client-item-cmd-ico{
    margin-right: 1em;
    cursor:pointer;
    transition: 0.3s;
}
.client-item-cmd-ico.selected{
    color:var(--lct-rouge);
}
.client-item-cmd-ico:hover{
    color:var(--lct-rouge);
}

.cli-update-form{
    display:none;
    margin-left: .5em;
}

.cli-delete-form{
    display:none;
    margin-left: .5em;
}

.cli-regeneratepsswd-form{
    display:none;
    margin-left: .5em;
}

    .cli-insert-form-wrapper{
        display: flex;
    }
    
    .cli-insert-form{
        display: flex;align-items: end;
    }
    
    .cli-insert-confirm{
        display:none;background: var(--lct-vert-d);padding: 1em;
    }
    .cli-insert-confirm-close{
        margin-top: 1em;text-align: end;cursor:pointer;
    }
    .cli-insert-confirm-close:hover{
        text-decoration: underline;
        color: var(--lct-rouge);
    }
/* ITEM PROJET */

.item-projet-display-header-wrapper{
    display:flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
}

.item-projet-display-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.item-projet-display-header-ico{
    /*margin-left: 1em;*/
}


.item-projet-display-header-label{
    display:flex;
    flex:1;
    justify-content: space-between;
}

.item-projet-display-header-label-name{
    padding: 8px;
}

.item-projet-display-header-label-conf{
    padding: 8px;
}

.item-projet-display-header-label-conf .conf{
    display:none;
}

.item-projet-display{
    background: #FFF;
    margin: 8px;
    max-width: 1100px;
    border:1px solid #dedede;
    border-width: 1px 1px 1px 0;
}

.navigation-in-project-wrapper{
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px 0;
    /*border-bottom: 2px solid #CCC;*/
    color: #000;
}

.navigation-in-project-wrapper > div{
}

.nip-btn{
    display:none;
}

.nip-label{
    /*transition: 0.2s;*/
    /*    cursor:pointer;
        padding: 4px 8px;
        border-bottom: 3px solid #999;
        position:relative;
        bottom:-1px;*/

    border : 1px solid #dedede;
    box-shadow: 0 3px 3px #0000002b;
    padding: .7em;
    margin-right: 1.5em;
    transition: 0.2s;
    cursor:pointer;
}

.nip-label:hover{
    background: var(--lct-rouge-d);
    border : 1px solid var(--lct-rouge);

}

.nip-btn:checked + label{
    background: var(--lct-rouge-d);
    border : 1px solid var(--lct-rouge);
}

.nip-label-txt{
    display:inline;
}

.nip-label-ico{
    /*display:none;*/
    margin-right: .5em;
}

.nip-label-ico-only{
    text-align: center;
}

.nip-label-ico-only .nip-label-ico{
    margin-right: 0em;
}

.nip-close{
    visibility:hidden;
    /*display:none;*/
    cursor:pointer;
    width: 43px;
    height: 43px;
    display:flex;
    justify-content: center;
    align-content: center;
}
.nip-content-wrapper{
    display:none;
}

.nip-content{
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #999;
    display:none;
    border-left: 4px solid var(--lct-vert);
}

.nip-body{
    display:flex;
    /*align-items: center;*/
    min-height: 150px;
    margin-left: 1em;

}

.nip-body-content{
    width: 100%;
}

.nip-content.displayed{
    display:block;
    padding: 8px;
    border-bottom: 1px solid #999;
    /*background: aliceblue;*/
}

/* création projet */

.projet-note-textarea{
    min-width: 600px;
    min-height: 200px;
    border: 1px solid #999;
}

.cli-selector-separator{
    display:flex;
    align-items: center;
    margin: .5em 0;
}
.cli-selector-separator .label{
    margin: 0 .3em;
}
.cli-selector-separator .separator{
    width: 35px;
    height: 1px;
    background: var(--lct-rouge);
}

.creation-projet-btn-wrapper{
    display:flex;
    justify-content: center;
    margin: 1em 0 3em 1em;
}

.creation-projet-btn-wrapper button{
    font-size: 30px;
}

.admin-variable-grid{
    display: flex;
    /*flex-direction: column;*/
    flex-wrap: wrap;

}

.var-input-item-wrapper{
    text-align: center;
    min-width: 220px;
}

.admin-variable-grid .var-input-item-wrapper{
    margin: .5em 0em .5em 0;
}

.admin-variable-grid .var-input-item-wrapper:not(:last-child){
    border-right: 1px solid var(--lct-vert);
}

.admin-variable-grid .var-input-item-wrapper:not(:first-child){
    padding: 0 0 0 1em;
}

.var-input-item-body{
    /*display: flex;*/
}

.var-input-item-body.check-ok .var-input-value{
    color:var(--lct-vert);
    font-weight: 600;
}
.var-input-item-body.check-nok .var-input-value{
    color:var(--lct-rouge);
    font-weight: 600;
}

.var-input-item{
    /*margin-left: 1em;*/
    margin: .5em .5em;
    text-align: center;
}

.var-input-label{
    margin-bottom: .2em;
}

.var-input-item input.form-input{
    background: var(--lct-rouge-d);
    border-width: 0px;
    text-align: center;
    padding: .2em;
}
.var-input-item select.form-input{
    padding: .2em;
}
.var-input-item input{
    width: 80px;
}
.send-email-container{
    display:flex;
    flex-direction: column;
}

.send-email-input{
    cursor:pointer;
    margin-right: 1em;
}

.send-email-label{
    font-size: 18px;
    cursor:pointer;
}

.send-email-sublabel{
    font-size: 14px;
    margin-top: .5em;
}

.mail-addon{
    color:var(--lct-rouge);font-weight: 600;
}

/* upload */
.input-upload{
    display:flex;
    align-items: center;
    background: var(--lct-rouge-d);
    padding: .5em;
    border-left: 4px solid var(--lct-rouge);
    cursor:pointer;
    transition: 0.3s;
}
.input-upload:hover{
    background: var(--lct-rouge-c);
}
.file-upload{
    display:none;
}

.upload-ico-standby{
    font-size: 28px;
    margin-right: .5em;
}

.upload-prompt{
    /*max-width: 600px;*/
}

.upload-prompt-no-f{
    margin: 8px;
    color:#999;
}
.upload-projet-categ{
    display: flex;
    flex-wrap: wrap;
}

.upload-projet-categ-title{

}

.upload-projet-container:not(:last-child){
    margin-right: 4em;
}

.upload-display-aside{
    display:flex;
}

.upload-delete{
    margin-left: 1em;
}

.upload-prompt-item-wrapper{
    display:flex;
    margin: .5em 0 0em .5em;
    align-items: center;
}

.upload-prompt-item{
    display:flex;
    background:#FFF;
    padding: .2em;
    justify-content: center;
    align-items: center;
}

.upload-prompt-item-ico{
    font-size: 18px;
    color:var(--lct-rouge);
}

.upload-prompt-item-label-wrapper{
    margin-left: 4px;
}

.upload-prompt-item-label-wrapper:hover{
    text-decoration: underline;
    color:var(--lct-rouge);
    cursor:pointer;
}

.upload-prompt-item-label{
    display:flex;
    justify-content: center;
    align-items: center;
}

.upload-prompt-item-label-text{
    margin: 0 4px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-prompt-item-label-text a:hover{
    color:var(--lct-rouge);
}


.upload-delete{

}

.upload-delete:hover{
    text-decoration: underline;
    color:var(--lct-rouge);
    cursor:pointer;
}

/* ANIMATION */

.loader {
    display:none;
    
  width:50px;
  height:50px;
  border-radius:50%;
  border:8px solid;
  border-color:#cde8ba;
  border-right-color: #BF3030;
  animation:s2 1s infinite linear;
}
@keyframes s2 {to{transform: rotate(1turn)}}