﻿/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800');*/

:root { --ratp: #00AA91; --mobileViewport:480px;}

html, body {margin:0; padding:0;}
body {font-family:/*'Open Sans',*/ arial, sans-serif; /*margin:0 auto;*/ }
main, header, footer { display: block; }
    header {padding:1em 1em 0;}

a {text-decoration:none;}
img {max-width:100%;}
button, input[type="submit"] {font:inherit;}

main form, footer { display: flex; flex-direction: column; align-items: stretch; }
input[type="text"] { width: calc(100% - 2em); }
input[type="email"], input[type="password"] { width: calc(100% - 2.5em); }
select, textarea { width: 100%; }
textarea { height: 50vh; }
input, select, button, .button { flex: 1; }
    input[type="submit"], button, .button, .buttonContainer { align-self: flex-end; margin-top: .5em; }
main label { display: block; }

.radioGroup, .radios, .radio { display: flex; align-items: baseline; }
    .radioGroup > label { margin-right: 1em; }
.radio { margin-right: .3em; }
input[type="radio"] { margin: 0 .5em; }


/*input[type="text"] {border:none; background:#C2D5ED;}
input[type="submit"] {border:thin solid #fff; background:#F0F0F0; padding:1px; width:100px; cursor:pointer;}
*/
div.clear {height:1px;}
hr.clear { margin:0; clear:both; border:none;}

.error {color:#f00; font-weight:bold;}
.comment {margin-top:1em;}
    /*.comment:before {content:'Commentaires : '; text-decoration:underline;}*/
.warning {color:#ff6a00; font-weight:bold; /*border:thin solid #ff6a00;*/ /*padding:.5em 1em; text-align:center; margin:.5em 0;*/}
.button { background: #E9E9ED; border: thin solid #8F8F9D; padding: .5em 1em; border-radius: 3px; color: inherit; display:inline-block; text-align:center; }
    .button:hover { background:#D0D0D7;}

/*body { padding: 1vw; }*/

/*header .banner { display: flex; justify-content: space-between; }
    header .button { background-color: var(--ratp); color: #fff; font-weight: bold; padding: .2em 1em; }
        header .button a { text-decoration: none; color: inherit; font-weight: bold; }
*/
    .loggedUser {float:right; font-style:italic; margin:1em; font-size:.8em;}
    .loggedUser a {color:#000; text-decoration:underline;}

    /*body:not(.accueil) .homedisplayed {display:none;}*/
        
    /*.field {margin:.5em 0;}*/
    .field {padding:.2em 0;}
        label {margin-bottom:.5em;}
        input, select, button {padding:.5em 1em;}
        .cbContener {display:flex;}

.progression { display: flex; justify-content: center; align-items:center; gap: 1em; }
    .indicator { border: thin solid #808; background:#fff; border-radius:2px;}
        .indicator div { height: 100%; display: none; }
            .indicator div.active { display: block; }
 /*       .indicator:nth-child(1) div { background: #ff0000; }
        .indicator:nth-child(2) div { background: #ff6a00; }
        .indicator:nth-child(3) div{ background: #ff8500; }
        .indicator:nth-child(4) div, .Pilot .indicator:nth-child(3) div  { background: #ffbb00; }
        .indicator:nth-child(5) div, .Pilot .indicator:nth-child(4) div { background: #ffd800; }
        .indicator:nth-child(6) div, .Pilot .indicator:nth-child(5) div { background: #e5ff00; }
        .indicator:nth-child(7) div, .Pilot .indicator:nth-child(6) div { background: #4cff00; }*/

        .indicator:nth-last-child(1) div { background: #4cff00; }
        .indicator:nth-last-child(2) div { background: #e5ff00; }
        .indicator:nth-last-child(3) div { background: #ffd800; }
        .indicator:nth-last-child(4) div { background: #ffbb00; }
        .indicator:nth-last-child(5) div { background: #ff8500; }
        .indicator:nth-last-child(6) div { background: #ff6a00; }
        .indicator:nth-last-child(7) div { background: #ff0000; }

.Profile main .content { text-align:center; }
    .Profile main a { background: var(--ratp); color: #fff; border: thin solid #007d6b; padding: 1em 2em; font-weight: bold; font-size: 1.2em; display: inline-block; background: var(--ratp) url(/Images/listing.png) no-repeat 10px center; padding-left: calc(1em + 35px); }
        .Profile .technician {background-image:url(/Images/Technician.png);}
        .Profile .pilot {background-image:url(/Images/Pilot.png);}
        .Profile .location {background-image:url(/Images/Orientation.png);}
        .Profile .reactive {background-image:url(/Images/Truc.png);}
        .Profile .stats {background-image:url(/Images/Statistics.png);}
        .Profile .end {background-image:url(/Images/Listing.png);}

body:not(.Pilot, .Profile) main .content { max-width: var(--mobileViewport); margin: 0 auto; padding:1em;}
.container {clear:both;}
    main .container:nth-child(even) {background:#f8f8f8; border:thin solid #dfdfdf; border-style: solid none; padding:2em 3vw; }
    .Home main h1, .Profile main h1 { text-align:center; }

footer {padding:2em 3vw;}
    .Technician footer, .Technician header { max-width: var(--mobileViewport); margin: 0 auto; }
    /*footer .validationBt {max-width:200px;}*/
    .copywrite { font-size: 10px; color: #666; }

@media screen and (max-width: 640px) {
    .progression { gap: .5em; }
    .Profile main a {margin-bottom:.5em;}
}

