/*=========General=============*/
body {font-family: 'Open Sans', sans-serif;}
a{text-decoration:none;color:black;}
.inline{display:inline-block;}
#main{padding:1vw 2vw;}

#titre{background: var(--main-bg-color);height: 5em;display: flex;flex-wrap: wrap;align-items: center;}
#titre a {color: white;}
#titre a.titre_iconapp {background: white;border-radius: 0.1em;height: 4em;margin-left: 2vw;padding-left: 0.7em;}
		.titre_iconapp img{height: 100%;}
#titre a.titre_app {font-size: 1.5em;margin: 0;padding: 0 2vw;font-weight: 700;flex-grow: 1;}
#titre a.titre_disconnect {text-align: center;border: 1px solid #d8d8d8;border-radius: .2em;color: #d8d8d8;padding: .2em .5em;font-size: .9em;}
#titre a.titre_version {flex-basis: 7em;text-align: center;font-size: .7em;color: var(--main-bg-color);filter: brightness(3) grayscale(70%);}
#titre a.titre_disconnect:hover {background: var(--main-bg-color);opacity: .8;filter: grayscale(.3);}
.margin_right{margin-right: 1em;}
.margin_top{margin-top: 1em;}
.text_center{text-align:center;}
form{margin:0;}

/*=========popup============*/
.blackscreen {position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,.8);top: 0;left: 0;animation: fadeblackscreen .3s 1 ease;z-index: 1;}
.popup {position: absolute;top: 15vh;left: 50%;transform: translatex(-50%);background: white;padding: 2vw;border-radius: .2em;animation: apparitionbox .5s 1 ease;z-index: 2;}
.popup_title {margin: -2vw -2vw 1vw -2vw;background: rgb(43, 43, 43);padding: 0 2vw;line-height: 2em;color: rgb(255, 255, 255);font-weight: 700;border-radius: .2em .2em 0 0;border: 2px solid rgb(255, 255, 255);}


/*=========boutons============*/
#boutons{background: rgb(209, 209, 209);padding: 0.5em 2vw;display: flex;flex-wrap: wrap;}
#boutons a ,.bouton{padding: .5em 1em;border-radius: .2em;background: var(--main-bg-color);color: white;margin: .5em .5em .5em 0;display: block;text-align: center;cursor:pointer;}
#boutons a:hover,.bouton:hover {opacity: .8;}
#boutons a img{height:1.2em;}
.new_devis::first-letter {font-size: 2em;font-weight: 700;line-height: 1rem;vertical-align: sub;}
input.bouton {border: none;display: inline-block;margin-left: 1em;}

.single_bouton{border: 1px solid #2b2b2b;border-radius: .2em;padding: 0 1em;background: #f5f5f5;color: #2b2b2b;line-height: 2em;cursor: pointer;font-weight: 700;
			   display: table;min-width: 3em;text-align: center;margin: 1em auto 0;}

/*=========page clients============*/
.clt_add {border: 1px solid #b5b5b5;border-radius: .2em;padding: 0 1em;background: #e0e0e0;color: #424242;margin-right: 2em;line-height: 2em;cursor: pointer;font-weight: 700;}
.clt_add:hover {background: #ececec;color: #545454;}
.clt_search{border: 1px solid #b5b5b5;border-radius: .2em;padding: 0 1em;line-height: 2em;text-align:center;width:15em;transition: width .3s ease;}
.clt_search:focus{width:20em;}
.clt_nb_txt {margin: 1em 0;}
.clt_nb {display: inline-block;font-weight: 700;}
.ligne {display: grid;grid-template-columns: 2fr 3fr 1fr 2fr;align-items: center;line-height: 2em;border-bottom:1px solid #eaeaea;}
a.ligne:hover {background: #efefef;}
.lignefirst{background:var(--main-bg-color);color: white;font-weight: 700;line-height: 3em;border-bottom:none;height: 3em !important;}
.clt_nom {padding-left:2em;}
.clt_address {text-align: center;}
.clt_cp {text-align: center;}
.clt_ville {padding-left:2em;}
.clt_nvx_form{display: flex;max-width: 60em;flex-wrap: wrap;min-width: 50em;}
.clt_nvx_prenom{flex-basis: 49%;margin-right:2%;}
.clt_nvx_nom{flex-basis: 49%;}
.clt_nvx_adresse,.clt_nvx_telfixe,.clt_nvx_mobile,.clt_nvx_email{flex-basis: 100%;}
.clt_nvx_cp{flex-basis: 29%;margin-right:2%;}
.clt_nvx_ville{flex-basis: 69%;}
.clt_nvx_contact {text-align: center;flex-basis: 100%;margin: 2em 0 0.5em;color: #2b2b2b;font-weight: 700;}
.clt_nvx_input,.pdt_select{line-height: 2em;text-align: center;border-radius: .2em;border: 1px solid #bfbfbf;margin-bottom:1em;background: #f5f5f5;}
.clt_buttons{display: flex;margin: 1rem auto 0;font-size: 1.2em;}
.clt_nvx_submit {border: 1px solid #2b2b2b;border-radius: .2em;padding: 0 1em;background: #2b2b2b;color: #ffffff;line-height: 2em;height: 2em;cursor: pointer;font-weight: 700;}
.clt_nvx_submit_ghost{border: 1px solid #2b2b2b;border-radius: .2em;padding: 0 1em;background: #f5f5f5;color: #2b2b2b;line-height: 2em;cursor: pointer;font-weight: 700;}
.clt_nvx_submit_suppr{border: 1px solid #b50000;border-radius: .2em;padding: 0 1em;background: #f5f5f5;color: #b50000;line-height: 2em;cursor: pointer;font-weight: 700;}
.clt_nvx_submit:hover{background:rgb(61, 76, 87);}
.clt_nvx_submit_ghost:hover,.clt_nvx_submit_suppr:hover,.single_bouton:hover{background: #ececec;}

/*=========page produits============*/
.pdt_ligne {display: grid;grid-template-columns: 4em 4fr 1fr 1fr 4em;align-items: center;line-height: 2em;border-bottom:1px solid #eaeaea;height: 5em;}
a.pdt_ligne:hover {background: #efefef;}
.pdt_class{color: #b1b1b1;font-size: 0.6em;margin: 0 0 0 1rem;}
.pdt_prix{text-align: center;}
.pdt_unite{text-align: center;}
.pdt_move{text-align: center;}
.pdt_nom2 {margin-left: 2em;color: grey;font-size: 0.9em;line-height: 1em;}
.move_bt {display:none;width: 1.5em;height: 1em;background: url(img/icon_move.svg) no-repeat;background-size: contain;border: none;cursor: pointer;}
.pdt_ligne_move {border: .2em dashed #ffffff;display: block;color: #a8b8c3;text-align: center;line-height: .5em;border-radius:.2em;transition:line-height .1s ease,opacity .5s ease;}
.move_text{opacity:0;}
.pdt_ligne_move:hover{line-height: 5em;border: .2em dashed #a8b8c3;}
.pdt_ligne_move:hover .move_text{opacity:1;animation: .4s linear infinite shake2;transform: rotate(-4deg);}
.pdt_ligne.selected_to_move {background: #ebedef;border: 0.2em solid #a8b8c3;border-radius: .2em;animation: .8s linear infinite shake;transform: rotate(-1deg);}
.pdt_ligne:hover .move_bt{display:block;}
.pdt_nvx_class{flex-basis: 9%;margin-right:2%;}
.pdt_nvx_nom1{flex-basis: 100%;}
.pdt_nvx_nom2{flex-basis: 100%;background: #fdfdfd;border-color: #d6d6d6;margin-left: 10%;color: #383838;margin: -.5em auto 1em;line-height: 1.5em;}
.pdt_nvx_prix_container {flex-basis: 100%; margin: 1em auto 0;display:flex;}
.pdt_nvx_prix{flex-basis: 40%;}
.pdt_select{flex-basis: 40%;text-align-last:center;}
.pdt_devise {font-size: 1.5rem;color: #333333;line-height: 1.5em;margin-left: 0.2em;flex-basis: 10%;}
.pdt_txt_unite {font-size: 1.5rem;color: #333333;line-height: 1.5em;margin-right: 0.2em;flex-basis: 10%;text-align: right;}

/*=========création / modif devis============*/
.nouveau_devis_titre {font-size: 1.2em;font-weight: 700;color: #21282d;margin-bottom: 1em;}
.select_client_titre{line-height: 2em;}
.clt_select_button{border: 1px solid #b5b5b5;border-radius: .2em;padding: 0 1em;background: #e0e0e0;color: #424242;margin-left: 1em;line-height: 2em;cursor: pointer;font-weight: 700;}
.select_client_from_list {display: block;line-height: 1.5em;padding: 0 1em;}
.select_client_from_list:hover {background: #2b2b2b;color: white;border-radius: .2em;}
.adresse_client {font-size: 1.2em;border: 1px solid #21282d;display: table;padding: .5em 2em;border-radius: .2em;color: #21282d;font-weight: 700;line-height: 1.5em;}
.devis_titre {text-align: center;font-size: 2em;font-weight: 700;border: 1px solid rgb(128, 128, 128);background: rgb(230, 230, 230);margin: 1em auto 0;padding: .5em;}
.devis_ligne {display: grid;grid-template-columns: 5fr 1fr 1fr 1fr 1fr 2em 2em;align-items: center;line-height: 1em;border-bottom:1px solid #eaeaea;}
.devis_designation{padding-left:2vw;}
.input_quantite,.input_designation {line-height: 5em;}
.input_add {padding: 1em 0;border-radius: .2em;border: 1px solid #0c88e0;background: #0c88e0;color: white;font-weight: 700;cursor: pointer;}
.devis_ligne_totaldevis{border:none;}

.devis_ligne.selected_to_move {background: #ebedef;border: 0.2em solid #a8b8c3;border-radius: .2em;animation: .8s linear infinite shake;transform: rotate(-1deg);}
.totaldevis {
    background:var(--main-bg-color);
    line-height: 3em;
    color: white;
    font-weight: 700;
	font-size: 1.2em;
	grid-column-start: 4;
    grid-column-end: 6;
}

.devis_ajout_produit{
	background: #f3f3f3;
    line-height: 3em;
    height: 3em;	
}

.devis_add_produit {
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 0 1em;
    padding: .5em 1em;
    border: 1px solid #d1d1d1;
    border-radius: .2em;
}

.popup_select_produit{
	max-height: 80vh;
    overflow-y: auto;
    top: 5vh;
    width: 40em;
}
.select_produit_from_list{display: block;line-height: 2em;padding: 1em .5em;border-bottom: 1px solid #eaeaea;}
.select_produit_from_list:hover {background: #2b2b2b;color: white;border-radius: .2em;}

.input_quantite {
    text-align: center;
    font-size: 1em;
    margin: 1em auto;
    padding: 0;
    line-height: 2em;
    border: 1px solid #e6e6e6;
    border-radius: .2em;
    width: 5em;
}
.input_quantite:focus {border-color: #21282d;outline: none;}
.devis_ligne_hoverable:hover {
    background: #efefef;
}
input.input_hidden {
    font-size: 0;
    border: none;
    background: no-repeat;
    opacity: 0;
    position: absolute;
    top: -10em;
    left: -10em;
}
.icon_bt {height: 1em;opacity:0;cursor:pointer;}
.devis_ligne:hover .icon_bt {opacity: 1;}

/*==========page main=======*/
.main_ligne {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr 3fr 3fr 1fr 1fr;
	line-height: 3em;border-bottom:1px solid #eaeaea;
}
.main_ligne_hoverable:hover{
	background: #efefef;
	cursor: pointer;
}
.main_options{display: flex;justify-content: flex-end;align-items: center;}


.bt_option_main {
    background-color:transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 1.5em;
    height: 1.5em;
    border: none;
    margin: 0 1em;
    opacity: .3;
    cursor: pointer;
    outline: none;
    filter: brightness(1.5);
    transition: opacity .3s ease;
	filter: grayscale(1);
}


.bt_option_main_transform{background-image: url(img/icon_transform2.svg);}
.bt_option_main_edit {background-image: url(img/icon_pencil2.svg);}
.bt_option_main_delete{background-image: url(img/icon_trash4.svg);}
.bt_option_main:hover{ opacity:1;filter: grayscale(0);}
/*.bt_option_main:focus{transform:rotate(-45deg);}*/

/*==========viewdoc=======*/
.main_logo{width: 20em;}

#affiche_main{margin:0 auto;width:750px;border: 1px solid grey;box-shadow: 2px 2px 5px rgb(123, 123, 123);min-height: 100vh;position:relative;}
.entete {display: flex;max-height: 10em;}
.affiche_adresse {font-size: 1.2em;border: 1px solid grey;border-radius: 0.2em;display: table;padding: 2% 5%;align-self: center;margin: 0 auto;}
.bandeau_haut {
    background: var(--main-bg-color);
    color: white;
    font-weight: 700;
    font-size: 1.2em;
    display: flex;
    justify-content: space-evenly;
    padding: 1em 0;
    margin-top: 1em;
}
.view_ligne {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    align-items: center;
}
.view_ligne_first{
	background: rgb(213, 213, 213);
    font-weight: 700;
    font-size: .9em;
}
.view_ligne_simple {
    height: 4em;
    border-bottom: 1px solid #efefef;
}
.view_designation{margin-left:2em;}
.bottom {
    display: flex;
    margin-top: 2em;
}
.box_accord {
    display: table;
    width: 40%;
    border: 1px solid grey;
    border-radius: .1em;
    padding: .5em .5em 5em .5em;
    margin: 0 auto;
    flex-shrink: 1;
}
.box_sign {
    flex-basis: 50%;
    line-height: 2em;
}
.cond_generales {
    display: flex;
    margin-top: 4em;
    font-size: 0.6em;
    color: grey;
    border: 1pt dashed grey;
    padding: 1em 0em;
    bottom: 1em;
    width: 100%;
    left: 0;
    box-sizing: border-box;
    justify-content: center;
}

.net_a_payer {
    background: var(--main-bg-color);
    padding: 1em 3em;
    color: white;
    font-weight: bold;
    display: table;
    margin: 1em 0 0 auto;
}

/*==========aide declaration=======*/
.period_selection {
    text-align: center;
    background: #efefef;
    border: 1px solid #d1d1d1;
    border-radius: .2em;
    padding: 1em 0;
}

.selecteur{margin: 0 1em;
    padding: .5em 1em;
    border: 1px solid #d1d1d1;
    border-radius: .2em;}
 .ligne_declaration {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 3fr 4fr 2fr;
        text-align:center;
        line-height: 3em;
    }
.declaration_ligne_hoverable:hover{
        background: #efefef;
        
    }

.declaration_total {
    background:var(--main-bg-color);
    color: white;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 10em;
}
/*==========graph declaration=======*/
.barre_container {
    display: flex;
    height: 15em;
    justify-content: space-around;
    align-items: flex-end;
    margin-bottom: 4em;
    position: relative;
}
.barre {
    background: yellowgreen;
    background-image: linear-gradient(yellowgreen, #7c9c3b);
    width: 100%;
    margin: 0 .5em;
    position: relative;
    border-radius: .2em .2em 0 0;
}
.txt_barre {
    position: absolute;
    font-size: .7em;
    bottom: -1.5em;
    text-align: center;
    width: 100%;
    border-top: 1px solid #7c9c3b;
    height: 1.5em;
    word-break: break-word;
}
.montant_barre {
    position: absolute;
    top: 0;
    font-size: .8em;
    color: #5c7132;
    font-weight: 700;
    width: 100%;
    text-align: center;
    word-break: break-word;
}
.graph_moyenne {
    position: absolute;
    top: -1rem;
    right: 0;
    font-size: .8em;
    border: 1px solid grey;
    color: grey;
    padding: .5em 1em;
    border-radius: .2rem;
}


/*==========settings=======*/
.setting {
    border: 1px solid #d1d1d1;
    padding: 1em 0 1em 4em;
    margin-bottom: 2em;
    background: #f9f9f9;
    box-sizing: border-box;
    border-radius: .2em;
}
.setting_item{
    border: 1px solid #b5b5b5;
    border-radius: .2em;
    text-align: center;}
.setting_titre{
    font-weight: 700;
    margin: -1rem 0 1rem -4rem;
    background:var(--main-bg-color);
    color: white;
    padding: .5em 1em;
    border-radius: .2em .2em 0 0;}
.setting_submit{
    height: 2em;
    vertical-align: bottom;}
.setting_select{
    padding: 0 1em;
    line-height: 2em;
    width: 15em;
    height: 2em;
    margin-right: 1em;
    }
.setting_textarea{display: flex;
    font-size: 0.6em;
    color: grey;
    border: 1pt dashed grey;
    padding: 1em 0em;
    width: 50vw;
    height: 6em;
    box-sizing: border-box;
    justify-content: center;
    margin-bottom: 1em;
}   
 .setting_number {
        height: 2em;
        margin-right: 1em;
    }
.setting_texte {
    width: 30em;
    display: block;
    margin-bottom: 1em;
}
.setting_textarea2 {
    border: 1px solid #b5b5b5;
    border-radius: .2em;
    padding: 0 1em;
    line-height: 2em;
    text-align: center;
    width: 30em;
    height: 8em;
    display: block;
    margin-bottom: 1em;
}

/*==========version=======*/
.version_new_titre_container {
    display: flex;
    color: var(--main-bg-color);
}
.version_new_date {
    font-weight: 700;
    margin-right: 1em;
    line-height: 2em;
}
input.version_new_titre {
    border: 1px solid #d1d1d1;
    line-height: 2em;
    width: 50em;
    border-radius: .2em;
    padding: 0 1em;
}
.version_new_text {
    width: 50vw;
    height: 15em;
    display: block;
    margin: 1em 0;
}
.tips {
    margin: 12rem 1rem 0;
    font-style: italic;
    font-size: .8em;
}


/*==========login=======*/
.login_container {
    display: table;
    text-align: center;
    margin: 5em auto 0;
    
    padding: 1em 3em;
    width: 30em;
}
.login_bg_img {
    margin: -1em -3em 3em;
    padding: 1em;
    border-bottom: 2px solid var(--main-bg-color);
}
.login_logo {
    height: 5em;
}
.login_input {
    display: block;
    width: 100%;
    line-height: 2em;
    text-align: center;
    font-size: 1.2em;
    border-radius: .2em;
    border: 1px solid #b5b5b5;
}
.login_user{margin: 1em 0;
}
.login_mdp{margin: 0 0 1em;
}
.login_submit {
    width: auto;
    margin: 0 auto;
    padding: 0 2em;
    background: var(--main-bg-color);
    color: white;
    cursor: pointer;
}
.login_submit:hover{opacity:.8;}


/*==========envoi mail=======*/
.send_per_mail img {
    height: 1em;
    vertical-align: bottom;
    margin-right: .5em;
	filter: invert(1);
}
.send_per_mail {
    text-align: right;
    border: 1px solid grey;
    display: table;
    margin: 0 2em 0 auto;
    padding: .3em 1em;
    border-radius: .2em;
    background: #21282d;
    color: white;
	cursor:pointer;
}
.mail_sent_ok{
	margin: 1em auto 0;
    display: table;}



/*==========fix update possibilité tri colonne main=======*/
.main_date a,.main_nomclient a {
    color: inherit;
}



/*==========animation=======*/
@Keyframes apparitionbox{0% {transform:translatex(-50%) translatey(3em);opacity:0;} 100%{transform:translatex(-50%) translatey(0);opacity:1;}}
@Keyframes fadeblackscreen{0% {opacity:0;} 100%{opacity:1;}}
@keyframes shake {0% {transform: rotate(-1deg);}50% {transform: rotate(1deg);}0% {transform: rotate(-1deg);}}
@keyframes shake2 {0% {transform: rotate(-4deg);}50% {transform: rotate(4deg);}0% {transform: rotate(-4deg);}}





/*=========@media print=============*/

@media print {
	#affiche_main{border: none;box-shadow: none;}
	.bandeau_haut{border:1px solid rgb(182, 182, 182);color:black;box-shadow:0 0 30cm rgb(213, 213, 213)inset;}
	.view_ligne_first{box-shadow:0 0 30cm rgb(240, 240, 240)inset;}
	.view_ligne_simple:nth-child(2n+1){box-shadow:0 0 30cm rgb(240, 240, 240)inset;}
	.net_a_payer{box-shadow:0 0 30cm rgb(213, 213, 213)inset;color:black;}
	.send_per_mail{display:none;}
}



@media only screen and (min-width: 769px) and (max-width: 1281px) { 
	#affiche_main{width:unset;}
	.entete {max-height: 13em;}
/*=========debug pour cibler iPhone=============*/
  /* for 10 inches tablet screens 
  body::before {
    content: "tablet to some desktop media query (769 > 1281) fired";
    font-weight: bold;
    display: block;
    text-align: center;
    background: rgba(255, 255, 0, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }*/
}