/*
 * Styles des éléments HTML
 */
*
{
    box-sizing: border-box;
}
html
{
    min-height: -webkit-fill-available;
    min-height: -moz-available;
    min-height: 1080px;
}
#container
{
    min-height: inherit;
    position: relative;
    background: -moz-linear-gradient(-45deg, rgb(255 87 0) 40%,rgb(0 0 0) 100%);
    background: -webkit-linear-gradient(-45deg, rgb(255 87 0) 40%,rgb(0 0 0) 100%);
    background: linear-gradient(135deg, rgb(255 87 0) 40%,rgb(0 0 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#2218bd',GradientType=1 );
    overflow-x: hidden;
    background-repeat: no-repeat;
}

label
{
    font-weight:bold;
    color: #ffffff;
    font-size: 20px;
}

a
{
    color : #ffffff;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.25s;
}

.fa-plus
{
    font-size: 0.8em;
}
#newCustomer
{
    padding-top: 5px;
}
pre
{
    margin: 0;
}

body
{
    /* structure */
    width: 100%;
    min-height: inherit;

    /* presentation */
    font-family: 'Karla', sans-serif;
}

main
{
    width: 100%;
    margin:auto;
    margin-bottom: 10%;
}
fieldset
{
    /* structure 
    margin-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;*/

    /* presentation */
    border-color: #FFF;
    border-radius: 6px;
}
fieldset legend
{
    /* structure */
    padding: 0 0.5em;
    width: unset;

    /* presentation */
    color: #ffffff;
    font-weight: bold;
}

footer
{
    /* structure */
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;

    /* presentation */
    text-align: center;
    box-shadow: 0 0 12px rgb(255, 255, 255);
    padding: 20px 0 30px 0;
}

h1
{
    color: #17469E;
    font-family: 'Oleo Script Swash Caps', cursive;
    letter-spacing: 0.15em;
    text-align: center;
}

h1 a,
h1 a:hover
{
    color: inherit;
}

h1 img
{
    margin-right: 0.5em;
    vertical-align: middle;
}

h2
{
    /* structure */
    margin: 1.5em 0;

    /* presentation */
    color: #ffffff;
    text-align: center;
    text-shadow: 0px 0px 10px black;
}

.link-list:last-child:not(.menu, .home-center)
{
    margin-left: 10px;
}
header .user-interface .link-list:first-child
{
    padding: 0 !important;
    width: 50%;
    margin: auto;
    /*margin-left: auto;
    margin-left: 60%;*/
}
nav ul li .button-primary:last-child
{
    margin-right: 10px;
    margin-top: 5px;
}

header
{
    background: -moz-linear-gradient(-45deg, rgb(255 87 0) 40%,rgb(0 0 0) 100%);
    background: -webkit-linear-gradient(-45deg, rgb(255 87 0) 40%,rgb(0 0 0) 100%);
    background: linear-gradient(135deg, rgb(255 87 0) 40%,rgb(0 0 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#2218bd',GradientType=1 );
    background-repeat: no-repeat;
    width: 100%;
    margin: auto;
    box-shadow: 0 0 12px rgba(255,255,255);
    padding-bottom: 10px;
}

/*
 * Classes génériques
 */
.hidden{display: none;}

.large{
    font-size: 125%;
    vertical-align: bottom;
}

.layout-center{text-align: center;}
header .layout-right{
    margin: 2% 0;
    width: 100%;
}
header .layout-right .button{margin: 0 !important;}
.layout-right{
    position: relative;
    margin: 0 40%;
}

.link-list:not(.user-interface .link-list){padding-left: 10px;}
.link-list,
.generic-form ul{
    /* structure */
    position: relative;

    /* presentation */
    list-style-type: none;
}
.link-list li{display: inline-block;}

.small{
    font-size: 75%;
    vertical-align: bottom;
}

div i.fa.fa-cogs{
    height: 25px;
    padding-top: 4px;
}

i.fa-exclamation-circle{
    color: #F44336;
}
i.fas.fa-file-invoice,
i.fas.fa-cash-register,
i.fas.fa-sync,
i.fas.fa-info,
i.fas.fa-edit
{
    text-shadow: 0 0 10px #000000;
    color: white;
}
i.fas.fa-check-circle,
i.fas.fa-times-circle,
i.fas.fa-clock
{
    text-shadow: 0 0 10px #000000;
}

/*
 * CSS de l'interface utilisateur
 */
#home{
    margin-top: 10%;
    box-shadow: 0 0 20px;
    border-radius: 50px;
}
.home-center .layout-right{margin: 0 !important;}
.home-center{
    width: 50%;
    padding: 10% 10%;
    margin: 0 auto !important;
}

.user-interface .welcome{
    margin: 0 !important;
    display: inline-block;
    font-family: 'Oleo Script Swash Caps', cursive;
    padding-right: 72px;
}
.user-interface .welcome strong{color: #17469E;}

/*
 * CSS de la page d'accueil
 */
.notice{
    /* structure */
    margin-bottom: 2em;

    /* presentation */
    background-color: rgba(208, 255, 255, 0.33);
    border: 1px solid #0face4;
    border-radius: 6px;
    color: #0face4;
    font-size: 1.33em;
    text-align: center;
}
.uppercase{
    text-transform: uppercase;
}
.center{
    text-align: center;
}
.bold{
    font-weight: bold;
}

#logo-profil{height: 50%;}

/*
 * CSS de la page de création de devis
 */
.basket-empty{
    color: #0face4;
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
}
.product-details label{width: 120px;}
.product-details{
    /* structure */
    width: 95%;

    margin-top: 1em;
    padding: 0.5em 0 0 0.5em;

    /* presentation */
    background-color: #688894;
    border-radius: 4px;
    border: 1px solid #ffffff;
    display: inline-block;
}
.product-details:after{
    clear: left;
    content: ' ';
    display: block;
}
.product-details img{
    float: left;
    margin-right: 1em;
}
.product-details p{
    /* structure */
    margin-top: 0;

    /* presentation */
    text-align: justify;
    font-weight: bold;
}
.purple-background{
    background-color: #9c27b0 !important;
}
.green-background{
    background-color: #4caf50 !important;
}
.brown-background{
    background-color: #795548 !important;
}
@media only screen and (min-width: 768px){
    #container{min-width: 400px;}
}

@media only screen and (max-width: 991px){
    .user-interface a,
    main h2,
    main caption{
        font-size: 3em;
    }
    main .generic-table th,
    main .generic-table td{
        font-size: 30px;
        padding: 0.5em;
    }
    .user-interface .link-list .button-primary{
        width: 100%;
        display: inline-block;
        margin-top: 10px;
    }
    .user-interface .link-list li{width: 100%;}

    .user-interface .link-list .layout-right:not(.welcome){margin: 0 !important;}
    
    .user-interface .link-list
    {
        display: inline-block;
    }
    .home-center
    {
        padding: 0 !important;
        width: 100%;
    }
    .home-center .button
    {
        margin: 0 !important;
    }
    .menu
    {
        padding: 0 !important;
    }
    header
    {
        width: 100%;
    }
    select[name="civilite"]
    {
        margin: 0;
    }
    .generic-form input,
    .generic-form select,
    .generic-form textarea
    {
        margin: 0 !important;
    }
    label
    {
        width: 100% !important;
    }
}
@media only screen and (max-width: 1700px){
    main
    {
        width: 100%;
    }
}