html {

}

*{margin: 0;padding: 0;}
.transition{ -webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;}
.transitionAll *{ -webkit-transition: 0.3s ease 0s; -moz-transition: 0.3s ease 0s; -o-transition: 0.3s ease 0s; -ms-transition: 0.3s ease 0s; transition: 0.3s ease 0s;}

h1,h2,h3,h4,h5{font-weight: normal;font-size: inherit;}

/*******MARGIN***********/
.top-1{margin-top:-1px;}
.left-1{margin-left:-1px;}
.right-1{margin-right:-1px;}
.bottom-1{margin-bottom:-1px;}
.bottom5{margin-bottom:5px}
.bottom10{margin-bottom:10px}
.bottom20{margin-bottom:20px}
.bottom30{margin-bottom:30px}
.bottom40{margin-bottom:40px}
.bottom50{margin-bottom:50px}
.bottom90{margin-bottom:90px;}
.top5{margin-top:5px;}
.top10{margin-top:10px;}
.top15{margin-top:15px;}
.top20{margin-top:20px;}
.top25{margin-top:25px;}
.top30{margin-top:30px;}
.top35{margin-top:35px;}
.top40{margin-top:40px;}
.top50{margin-top:50px;}
.top60{margin-top:60px;}
.top80{margin-top:80px;}
.top90{margin-top:90px;}
.top100{margin-top:100px;}
.left5{margin-left:5px;}
.left10{margin-left:10px;}
.left15{margin-left:15px;}
.left20{margin-left:20px;}
.left30{margin-left:30px;}
.left40{margin-left:40px;}
.left50{margin-left:50px;}
.left60{margin-left:60px;}
.left80{margin-left:80px;}
.left100{margin-left:100px;}
.left2P{margin-left:2%;}
.left5P{margin-left:5%;}
.auto{margin:0 auto}
.autolr{margin-left:auto;margin-right:auto}
.padB10{padding-bottom:10px}
.padB30{padding-bottom:30px}
.padT10{padding-top:10px}
.pad5{padding:5px}
.pad10{padding:10px}
.pad50{padding:5px 0}
.pad100{padding:10px 0}
.pad200{padding:20px 0}
.pad010{padding:0 10px}
.pad020{padding:0 20px}
.pad030{padding:0 30px}
.pad520{padding:5px 20px !important}
.padLR50{padding-left:50px !important;padding-right:50px !important}
.padLR100{padding-left:100px !important;padding-right:100px !important}
.pad1020{padding:10px 20px !important}
.pad5{padding:5px;}
.pad2P{padding:2%;}
.padL5 {padding-left: 5px;}
.padL10 {padding-left: 10px;}
.padL20 {padding-left: 20px;}
.padL1P {padding-left: 1%;}
.padL2P {padding-left: 2%;}
.padL5P {padding-left: 5%;}
.padL10P {padding-left: 10%;}
.padR20 {padding-right: 20px;}
.right5{margin-right:5px;}
.right10{margin-right:10px;}
.right15{margin-right:15px;}
.right20{margin-right:20px;}

/*******POSITION***********/

.left{float:left}
.right{float:right}
.spacer{clear:both}
.center{text-align:center}
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.hidden{overflow:hidden}
.block{display:block}
.inblock{display:inline-block}
.table{display:table}
.cell{display:table-cell;vertical-align:middle}
.row{display:table-row}
.none{display:none}
.noneMobile{display:none}
a{cursor:pointer;color:inherit;text-decoration:none;}
.z1{z-index: 1}
.z2{z-index: 2}
.z10{z-index: 10}

/*******APPARENCE***********/
.ombre{box-shadow:0 3px 3px rgba(0, 0, 0, 0.2)}
.ombre2{box-shadow:0 10px 10px rgba(0, 0, 0, 0.5)}
ul li{list-style:none}
img{border:none}
.radius{border-radius: 5px;}
.line12{line-height:12px;}
.line15{line-height:15px;}
.line18{line-height:18px}
.line20{line-height:20px}
.line22{line-height:22px;height:22px}
.line25{line-height:25px;height:25px}
.line28{line-height:25px;height:28px}
.line30{line-height:30px;height:30px}
.line40{line-height:40px}
.line50{line-height:50px}
.line60{line-height:60px}
.line80{line-height:80px}
.line90{line-height:90px}
.line100{line-height:100px}
.line120{line-height:120px}
.ptrouge{width: 15px;height: 15px;border-radius: 10px;background-color: #FE0000}
.ptbleu{width: 15px;height: 15px;border-radius: 10px;background-color: #2C8DB8}
.scrollY{overflow-y: auto;overflow-x: hidden;}
.op0{opacity:0}
.op1{opacity:1}
/*******WIDTH***********/
.w20{width:20px}
.w25{width:25px}
.w30{width:30px}
.w35{width:35px}
.w40{width:40px}
.w50{width:50px}
.w55{width:55px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w110{width:110px}
.w120{width:120px}
.w140{width:140px}
.w150{width:150px}
.w170{width:170px}
.w180{width:180px}
.w190{width:190px}
.w200{width:200px}
.w220{width:220px}
.w240{width:240px}
.w250{width:250px}
.w260{width:260px}
.w270{width:270px}
.w280{width:280px}
.w290{width:290px}
.w300{width:300px}
.w320{width:320px}
.w350{width:350px}
.w400{width:400px}
.w420{width:420px}
.w440{width:440px}
.w500{width:500px}
.w550{width:550px}
.w560{width:560px}
.w580{width:580px}
.w600{width:600px}
.w730{width:730px}
.w740{width:740px}
.maxw600{max-width:600px}
.maxw1200{max-width:1200px}
.w3P{width:3%}
.w5P{width:5%}
.w9P{width:9%}
.w10P{width:10%}
.w12P{width:12%}
.w13P{width:13%}
.w14P{width:14%}
.w15P{width:15%}
.w18P{width:18%}
.w19P{width:19%}
.w20P{width:20%}
.w21P{width:21%}
.w22P{width:22%}
.w24P{width:24%}
.w25P{width:25%}
.w28P{width:28%}
.w29P{width:29%}
.w30P{width:30%}
.w32P{width:32%}
.w33P{width:33.3%}
.w34P{width:34%}
.w35P{width:35%}
.w40P{width:40%}
.w44P{width:44%}
.w45P{width:45%}
.w46P{width:46%}
.w48P{width:48%}
.w49P{width:49%}
.w50P{width:50%}
.w60P{width:60%}
.w65P{width:65%}
.w68P{width:68%}
.w70P{width:70%}
.w75P{width:75%}
.w80P{width:80%}
.w85P{width:85%}
.w90P{width:90%}
.w95P{width:95%}
.w96P{width:96%}
.w98P{width:98%}
.w100P{width:100%}
.w26P{width:26%}
.w25P-5{width: calc(25% - 5px)}
.h0{height:0px}
.h20{height:20px}
.h25{height:25px}
.h30{height:30px}
.h40{height:40px}
.h50{height:50px}
.h60{height:60px}
.h70{height:70px}
.h80{height:80px}
.h90{height:90px}
.h100{height:100px}
.h120{height:120px}
.h140{height:140px}
.h200{height:200px}
.h220{height:220px}
.h10P{height:10%}
.h20P{height:20%}
.h25P{height:25%}
.h33P{height:33.333%}
.h40P{height:40%}
.h45P{height:45%}
.h50P{height:50%}
.h100P{height:100%}
.w0{width:0%}


/*******BORDER***********/
.br{border-right:1px solid #ccc;margin-right:-1px}
.bl{border-left:1px solid #ccc;margin-left:-1px}
.bt{border-top:1px solid #ccc;}
.bb{border-bottom:1px solid #ccc;margin-bottom:-1px}
.bn{border:none}
.ba{border:1px solid #ccc; margin: -1px -1px 0 0}

/*******BACKGROUND***********/
.fg{background-color:#eee}
.ff2{background-color:#f2f2f2}
.fgc{background-color:#ccc}
.fn20{background-color:#202020}
.fn{background-color:#484848}
.fb{background-color:#fff}
.ligneTab,.ligneTab2{margin-bottom: inherit !important}
.ligneTab:nth-child(even),.ligneTab2:nth-child(even) {background-color: #fff;}
.ligneTab:nth-child(odd),.ligneTab2:nth-child(odd) {background-color: #eee;}
.legende.fg {color: #484848;}
.legende.fg .gccc {color: #999;}
.fg.blanc{color:#484848}
.fo{background-color: #F19542}
.fr{background-color: #ff7f00}

.client .fd,.fournisseur .client .fd{background-color: #A6D1D5}
.client .fc,.fournisseur .client .fc{background-color: #75CCD3}
.client .fbl,.fournisseur .client .fbl{background-color: #45C7D2}
.client .ff, .fclient,.fournisseur .client .ff, .fclient{background-color: #15C2D1}


.fournisseur .fd,.client .fournisseur .fd{background-color: #C4B1CC}
.fournisseur .fc,.client .fournisseur .fc{background-color: #B28DC1}
.fournisseur .fbl,.client .fournisseur .fbl{background-color: #A069B7}
.fournisseur .ff,.ffournisseur,.client .fournisseur .ff,.ffournisseur{background-color: #8E44AD}

/*******FONTS***********/
.font10{font-size:10px;}
.font11{font-size:11px;}
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font24{font-size:24px;}
.font26{font-size:26px;}
.font28{font-size:28px;}
.font30{font-size:30px;}
.font40{font-size:40px;}
.font50{font-size:50px;}
.font120{font-size:120px;}

.font100{font-weight:100;letter-spacing: 0 !important}
.font300{font-weight:300}
.font400{font-weight:400}
.font500{font-weight:500}
.font700{font-weight:700}
.font900{font-weight:900}
.bold{font-weight: bold}
.upper{text-transform:uppercase;}
.capital{text-transform:capitalize;}
.lower{text-transform:lowercase;}
.pointer{cursor:pointer}
.italic{font-style:italic}
.barre{text-decoration:line-through}
.underline{text-decoration:underline}
.nounder{text-decoration:none}
.center{text-align:center}
.justify{text-align:justify}
.txtRight{text-align:right}
.txtLeft{text-align:left}
.etc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.letter3{letter-spacing: 3px}
.letter5{letter-spacing: 5px}
.letter10{letter-spacing: 10px}
.txtombre{text-shadow: 0 2px 2px #000000}

/*******COULEUR***********/
.blanc{color:#ffffff;}
.blancCasse{color:#f5f5f5;}
.gris{color:#333;}
.noir{color:#484848;}
.g8d{color:#8D8D8D;}
.g999{color:#999;}
.g666{color:#666;}
.geee{color:#eee;}
.gccc{color:#ccc;}
.gbbb{color:#bbb;}
.grisBleu{color:#267D8D;}
.bleu{color:#01D2FF}
.bleuf{color:#04B2D1}
.marronFonce{color:#9f907a;}
.marron{color:#B5A08A;}
.marronClair{color:#EEE9E4;}
.orange{color:#03C4A9;}
.rouge{color:#ff7f00;}
.vert{color:#C3FF68}
.changeCouleur:hover,.changeCouleur:active{color:#03C4A9;}

.client .orange{color:#15C2D1;}
.fournisseur .orange{color:#B83FD1;}

.violet{color:#4502ff;}
.rouge{color:#ff7f00;}
.client .changeCouleur:hover,.client .changeCouleur:active{color:#15C2D1;}
.fournisseur .changeCouleur:hover,.fournisseur .changeCouleur:active{color:#B83FD1;}

/*******FORM***********/


select {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding-left:2%;
    line-height: 42px;
    height: 42px;
    margin: 0;
    background: #fff;
    color:#484848;
    border:1px solid #ccc;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    padding-right: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 !important;
    width:calc(100% + 2px) !important;
}
.trans select {
    background: transparent !important;
    border:none !important;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:25px}
}

label.select {
    position:relative;
    display: block;
    height: 40px;
    line-height: 40px;
}
label.select::after {
    border-left: 1px solid #ccc;
    color: #ccc;
    content: "↕";
    font-size: 12px;
    padding: 0 0 2px;
    pointer-events: none;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 0px;
    width: 23px;
    height: 40px;
    line-height: 40px;
    box-sizing: inherit;
}
label.select::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    display: block;
    height: 40px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 1px;
    width: 25px;
    box-sizing: inherit;
}
input, textarea {
    border:1px solid #ccc;
    padding-left:2%;

    line-height: 40px;
    height: 40px;
    resize: none;
    color:#484848;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
}
textarea {
    line-height: normal;
    padding-top: 5px;
}

input[readonly="readonly"], input[readonly="readonly"]:focus {
    cursor: pointer;
    color:#999;
    /*-moz-user-select: -moz-none;*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    user-select: none;
}

input:focus{
    color: #8A191F;
}
input[type="checkbox"], input[type="radio"] {
    display:none;
}
input[type="checkbox"] + label, input[type="radio"] + label {
    cursor: pointer;
    display: block;
    padding: 5px 0;
    font-size: 14px;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:16px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
}
input[type="checkbox"]:checked + label, input[type="radio"]:checked + label  {
    color: #03C4A9;
}
input[type="radio"] {
    display:none;
}
input[type="radio"] + label span {
    display:inline-block;
    width:16px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
}
input[type="radio"]:checked + label span {
}
.input{padding-left:2%}

input.trans{border: none;background-color: transparent}
label.select.trans::after, label.select.trans::before{height:38px;background-color:transparent}
label.select.trans.h30, label.select.trans.h30{height: 30px;line-height: 30px;}
label.select.trans.h30::after, label.select.trans.h30::before{height:30px;line-height: 30px;background-color:transparent}
.trans.h30 select, input.h30{height: 30px;line-height: 30px;}

/*******POPUP***********/
.popup,.pop{margin:0 auto;width:100%}
#popupContact,#popupImg,#blocContact{background:#222;bottom:0;display:none;left:0;position:fixed;right:0;top:0;z-index:2;opacity:0.7}
#popupContenu{background:#fff;box-shadow:0 3px 10px 0 #222;display:none;padding:10px;position:fixed;z-index:2;border-radius: 5px}
#popupBlanc {background-color: rgba(255, 255, 255, 0.7);bottom: 0;display: none;left: 0;position: fixed;right: 0;top: 0;z-index: 2;}
.croix{background:url("../images/croix.png") no-repeat scroll center -371px #03C4A9;border-radius:20px;cursor:pointer;height:10px;padding:8px;right:-5px;top:-5px;transition: all 0.4s ease 0s;width: 10px;z-index: 992;}.croix:hover{background-color: #20a489;}

/*******BOUTON***********/
.blocBt{right:0;top:40%}
.boutonBleu{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#01D2FF;height:30px;line-height:30px;padding:0 15px;cursor:pointer;border:1px solid #01d2ff}
.boutonBleu:active{background-color:#00b2df;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4) inset;border:1px solid #00b2df}
.btOrange{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#03C4A9;padding:10px;cursor:pointer;border:1px solid #03C4A9}
.btOrange:active{background-color:#df5f00;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4) inset;border:1px solid #df5f00}
.btRouge{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#d33d28;padding:10px;cursor:pointer;border:1px solid #d33d28}
.btRouge:active{background-color:#b31d08;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4) inset;border:1px solid #b31d08}
.btGris{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#575759;padding:10px;cursor:pointer;border:1px solid #575759}
.btGris:active{background-color:#4b4b4b;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4) inset;border:1px solid #4b4b4b}
.btBlanc{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#f2f2f2;padding:10px;cursor:pointer;border:1px solid #d6d6d6}
.btBlanc:active{background-color:#fff;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;}

.bouton:active, .bouton:hover {
    background-color: #03C4A9;
}
.bouton.fo:active, .bouton.fo:hover {
    background-color: #484848 !important;
}
.bouton.blanc:active, .bouton.blanc:hover,.bouton.orange:active, .bouton.blanc:hover {
    background-color: #03C4A9;
    color:#fff;
}
.boutonLog.fn:active, .boutonLog.fn:hover{
    background-color: #DD0F19;
    color: #fff;
}
.client .bouton:active,.client .bouton:hover,.fournisseur .client .bouton:active,.fournisseur .client .bouton:hover{background-color: #15C2D1;}
.fournisseur .bouton:active,.fournisseur .bouton:hover,.client .fournisseur .bouton:active,.client .fournisseur .bouton:hover{background-color: #8E44AD;}
.bouton.fd:active,.bouton.fd:hover,.bouton.fc:active,.bouton.fc:hover,.bouton.fbl:active,.bouton.fbl:hover,.bouton.ff:active,.bouton.ff:hover{
    box-shadow: 0 6px 10px 2px rgba(0,0,0,0.3) inset;-ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95)
}
.bouton.fclient:active,.bouton.fclient:hover{
    background-color: #00A2B1 !important;
    color:#fff;
}
.bouton.ffournisseur:active,.bouton.ffournisseur:hover{
    background-color: #6e248d!important;
    color:#fff;
}
.bouton.orange:hover,.bouton.orange:active{color:#fff !important}
.client .backactive,.fournisseur .client .backactive{background-color: #007281;box-shadow: 0 6px 10px 2px rgba(0,0,0,0.3);-ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05)}
.fournisseur .backactive,.client .fournisseur .backactive{background-color: #5b117a;box-shadow: 0 6px 10px 2px rgba(0,0,0,0.3);-ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05)}

.boutonBlanc{box-shadow:0 2px 3px rgba(0, 0, 0, 0.1);border-radius:5px;background-color:#f2f2f2;border:1px solid #d6d6d6;height:30px;line-height:30px;padding:0 15px;cursor:pointer;}
.boutonBlanc:active{background-color:#fff;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;}
.boutonBlanc.actif{background-color:#575759;color:#fff;box-shadow: 0 2px 3px #000 inset;}
.ptBleu{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#01D2FF;padding:0 5px;cursor:pointer;border:1px solid #01d2ff;height:22px;line-height: 22px}
.ptBleu:active{background-color:#00b2df;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4) inset;border:1px solid #00b2df}
.ptBlanc{box-shadow: 0 2px 1px rgba(0, 0, 0, 0.4);border-radius:5px;background-color:#f2f2f2;padding:0 5px;cursor:pointer;border:1px solid #d6d6d6;height:22px;line-height: 22px}
.ptBlanc:active{background-color:#fff;box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1) inset;border:1px solid #d6d6d6}

.switch {
    overflow: hidden;
    cursor: pointer;
}
.curseur {left: 0;top: 0;width: 200%;font-weight: bold;}

.curseur.off {left: -100%;top: 0;}
.curseur .active{width: 50%;}
.curseur .active:not(.fo) {width: 50%;background-color: #484848;}
.curseur .inactive {width: 50%;background-color: #f2f2f2;}


/***********BLOCK****************/

.bloc{border-radius:5px;box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);background-color:#fff;padding:10px}
.blocN{border-radius:5px;box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);background-color:#444;padding:10px}
.blocN:after{border-right: 10px solid #444;border-bottom: 12px solid transparent;border-top: 12px solid transparent;top: 50%;content: " ";height: 0;left: -10px !important;position: absolute;width: 0;}
.blocOnglet{border-top-right-radius:5px;border-top-left-radius: 5px;box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.15);background-color:#fff;padding:5px 10px;margin-left:5px ;margin-right:5px ;}
.blocOnglet.actif{background-color: #575759;color:#fff}
.trait{border-bottom:1px solid #666;margin-top:10px;margin-bottom:10px;}

@media only screen and (max-width: 400px) {
    .noneMobile{display:block}
    .nonePc{display:none}
}


#centrer {
    left: 50%;
    margin: -140px 0 0 -140px;
    padding: 40px;
    top: 50%;
}