*{ -webkit-overflow-scrolling: touch; }
:root {
    --blue: #3c8dbc;
    --blue-soft: #b0e2ff;
    --grey-soft-soft: #f9f9f9;
    --grey-soft: #787878;
    --grey: #333333;

    /* formulaires */

    --form-text: #555555;

    /* table */

    --table-tr-odd: #f5f5f5;
    --table-tr-hover: #b0e2ff;
    --table-border: #d6d6d6;

    /* etats devsi/commandes/factures */

    --invoice-state-0: red;  /* supprimé */
    --invoice-state-1: #f49e25; /* demandes de devis */
    --invoice-state-2: #f66954; /* demandes de devis refusées */
    --invoice-state-3: #f0cb00; /* devis à envoyer */
    --invoice-state-4: #04C0E9; /* devis transmis */
    --invoice-state-5: #f66954; /* devis refusés */
    --invoice-state-6: #06a65a; /* commande */
    --invoice-state-7: #f66954; /* non payé */
    --invoice-state-8: #06a65a; /* payé */
    --invoice-state-9: grey; /* avoir */

    /* paiements */

    --payment-none: red;
    --payment-partial: orange;
    --payment-done: green;
}
html{
	height: 100%;
    width: 100%;
	margin: 0;
	padding: 0;
	font-size: 14px;
}
body{
    height: 100%;
    width: 100%;
	margin: 0;
    padding: 0;
}
.all-content{
    min-height:100vh;
}
.main-content{
    min-height:100vh;
}
.cursor-pointer:hover{
    cursor: pointer;
}
.empty{
    color: orange;
    font-style: italic;
}

/* Titres */

h1{
    margin: 2rem 0 2rem 0;
    font-size: 2.25rem;
}
h2{
    margin: 1.5rem 0 1.5rem 0;
    font-size: 1.75rem;
}
h3{
    margin: 1.25rem 0 1.25rem 0;
    font-size: 1.5rem;
}
h4{
    margin: 1.2rem 0 1.2rem 0;
    font-size: 1.25rem;
}

/* Liens */

a.email, a.tel{
    display: inline-block;
    background: var(--blue);
    color: white;
    padding: 3px 6px 3px 6px;
    margin: 3px;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
a.email:hover, a.tel:hover {
    background: var(--grey-soft);
    color: white;
}

/* Messages Flash */

.message {
    font-size: 1.15rem;
    padding: 1rem;
    background: #eff8ff;
    color: #2779bd;
    border-color: #6cb2eb;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 2rem;
}
.message:hover {
    cursor: pointer;
}
.message::after {
    content: ' ⊗';
}
.message.hidden {
    display: none;
}
.message.success {
    position: fixed;
    top: 15px;
    right: 15px;
    background: #e3fcec;
    color: #1f9d55;
    border-color: #51d88a;
}
.message.error {
    position: fixed;
    top: 15px;
    right: 15px;
    background: #fcebea;
    color: #cc1f1a;
    border-color: #ef5753;
}

/* Blocs */

.box{
    background: var(--grey-soft-soft);
    border: solid 1px var(--grey-soft);
    padding: 7px;
    margin: 0 10px 20px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* Formulaires */

input:not([type='checkbox']):not([type='radio']) {
    /*
    width: 100%;
    max-width: 100%;
    */
    margin-bottom: 1rem;
    padding: 6px 10px 6px 10px;
    color: var(--form-text);
}
select,
.select2-container .select2-selection--single {
    width: 100% !important;
    max-width: 100%;
    height: 38px;
    margin-bottom: 1rem;
    padding: 6px 10px 6px 10px;
    color: var(--form-text);
}
ul.select2-results__options{
    background: var(--grey-soft-soft);
}
button,
.button {
    display: inline-block;
    width: auto;
    margin: 0.5rem 0 0.5rem 0;
    background: var(--blue);
    color: white;
    padding: 6px 10px 6px 10px;
    text-decoration: none;
    border: none;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
button:hover, .button:hover {
    background: var(--grey-soft);
    color: white;
    cursor: pointer;
}
.button-delete{
    display: inline-block;
    width: auto;
    margin: 0.5rem 0 0.5rem 0;
    background: orange;
    color: white;
    padding: 6px 10px 6px 10px;
    text-decoration: none;
    border: none;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.button-delete:hover{
    background: red;
    color: white;
    cursor: pointer;
}
.button-delete-small{
    display: inline-block;
    width: auto;
    margin: 0.25rem 0 0.25rem 0;
    background: orange;
    color: white;
    padding: 0 5px 0 5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.button-delete-small:hover{
    background: red;
    color: white;
}
label{
    font-weight: bold;
    color: var(--grey);
}
.input.radio,
.input.checkbox {
    margin-bottom: 2.0rem;
}
.input.radio input,
.input.checkbox input {
    margin: 0;
}
.input.radio label,
.input.checkbox label {
    margin: 0;
    display: flex;
    align-items: center;
}
.input.radio label > input,
.input.checkbox label > input {
    margin-right: 1.0rem;
}
/*
.input.radio label:first-of-type {
    margin-bottom: 2.0rem;
}
*/
textarea{
    width: 100%;
    padding: 6px 10px 6px 10px;
}
.add-input{
    color: var(--blue);
}
.delete-input{
    position: absolute;
    top: 5px;
    right: 20px;
    font-weight: bold;
    color: var(--blue);
}
.form-error{
    border: solid 2px red !important;
}
.form-error:focus{
    border: solid 2px red !important;
    outline: none;
}



/*================================================================================================ */
/* ==================================== BOOTSTRAP BREACKPOINTS =================================== */
/*================================================================================================ */
.jcBPdebug{position:fixed;right:0;bottom:0;z-index:999999;background:yellow;color:black;display:block !important;}
@media (max-width: 575.98px){ /* Bootsrap auto */
    .jcBPdebug:after{content:'{auto}';font-size:smaller;}
}
@media (min-width: 576px){ /* Bootsrap SM */
    .jcBPdebug:after{content:'{SM}';font-size:smaller;}
}
@media (min-width: 768px){ /* Bootsrap MD */
    .jcBPdebug:after{content:'{MD}';font-size:smaller;}
}
@media (min-width: 992px){ /* Bootsrap LG */
    .jcBPdebug:after{content:'{LG}';font-size:smaller;}
}
@media (min-width: 1200px){ /* Bootsrap XL */
    .jcBPdebug:after{content:'{XL}';font-size:smaller;}
}