:root
{
    --background : #8c8c8c;

    --button : #686868;
    --button-hover : #8d8d8d;
    --button-text : #ffffff;

    --box : #4e4e4e;
    --brightBox : #5e5e5e;
    --box-shadow : #a1a1a18c;
    --box-text : #ffffff;

}







@media only screen and (min-width: 1061px) {
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        

        color: white;
        text-align: center;
        background: rgb(72, 72, 72);
        overflow: hidden;
        margin: .4em;
        border-radius: 7px;
        padding: .4em;
        box-shadow: rgb(176, 176, 176) 0px 0px 15px 0px;
        transition: 400ms;
    }
    body {
        font-family: 'Arial', Times, serif;
        text-align: center;
        align-items: center;
        background: var(--background);  
        body {
            background: white url(/base/fondecran/classicBG.jpg) no-repeat right bottom;
        }
    }
    h1 {
        font-family: 'Arial', Times, serif;
        font-weight: 0;
        font-size: 25px;
        padding: 0px 0px;
        border: 2px solid #ffffff;  
        background: radial-gradient(circle, rgb(69, 69, 69) 13%, rgb(58, 58, 58) 74%);
        border-radius: 10px;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        color: white;
        margin: .2em;
        transition: 150ms;
    }
    h1:hover {
        transition: 150ms;
    }
    h2 {
        font-family: 'Arial', Times, serif;
        font-weight: 0;
        font-size: 25px;
        padding: 0px 0px;
        border-radius: 5px;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        color: white;
        margin: .2em;
    
    }
    label {
        font-size: 25px;
        font-family: 'Arial', Times, serif;
    }
    button {
        font-family: 'Arial', Times, serif;
        font-size: 14px;
        color: var(--button-text);
        background-color: var(--button);
        padding: 5px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        transition : 400ms;
    }
    button:hover {
        padding: 5px 25px;
        text-align: center;
        transition : 100ms;
        color: #ffffff;
        background-color: var(--button-hover);
    }
    mark{
        border-radius: 4px;
    }
    textarea {
        border-radius: 5px;
        padding: 5px;
        background-color: #efefef;
        transition: 150ms;
        width: 90%;
        height: 300px;
    }
    .wellSizedBox{
        max-width: 65em;
        background: var(--box);
        overflow: hidden;
        margin: auto;
        border-radius: 8px;
        box-shadow: var(--box-shadow) 0px 0px 15px 0px;
        border: 1.5px solid;
    }
    .wellSizedBox a, .wellSizedBox label{
        float: center;
        color: #ffffff;
        text-align: center;
        padding: 14px 16px;
        font-size: 16.5px;
    }
    .wellSizedBoxb{
        max-width: 65em;
        background: var(--brightBox);
        overflow: hidden;
        margin: auto;
        border-radius: 8px;
        box-shadow: var(--box-shadow) 0px 0px 15px 0px;
        border: 1.5px solid;
    }
    .wellSizedBoxb a, .wellSizedBoxb label{
        float: center;
        color: #ffffff;
        text-align: center;
        padding: 14px 16px;
        font-size: 16.5px;
    }
    .exempleColorState {
        overflow: hidden;
        
        background: var(--box);
        box-shadow: var(--box-shadow) 0px 0px 15px 0px;
    
        
        border-radius: 5px;
        margin: 15px 15% 0px 15%;
        width: 48%;
        margin: .1%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .exempleColorState a{
        float: center;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        font-size: 15px;
    }
    .wellSizedBoxBackground{
        background: black;
    }
    .homeNav {
        background: linear-gradient(0deg, rgb(73, 73, 73) 17%, rgb(53, 53, 53) 92%);
        box-shadow: rgb(176, 176, 176) 0px 0px 15px 0px;
    
        overflow: hidden;
    
        margin: auto;
        border-radius: 10px;
        transition: 200ms;
    }
    .homeNav a {
        color: #ffffff;
        text-align: center;
        padding: .5% .4%;
        text-decoration: none;
        font-size: 17px;
        border-radius: 10px;
        transform: scale(0.95);
        transition: 200ms;
    }
    .homeNavItemRight{
        float: right;
    }
    .homeNavItemLeft{
        float: left;
    }
    .homeNav a:hover {
        background: linear-gradient(0deg, rgb(165, 165, 165) 0%, rgb(126, 126, 126) 94%); 
        color: rgb(255, 255, 255);
        text-align: center;
        transition: 200ms;
    }
    .littleSpace, .ls {
        height: .4em;
        width: .4em;
    }
    .filiereSelector {
        overflow: hidden;
        border-radius: 6px;
        font-size: 20px;
        margin: 10px;
        box-shadow: rgb(0 0 0 / 49%) 3px 3px 10px 1px;
        background-color: rgb(255 255 255 / 40%);
    }
    .horizontalSelector {
        display: table-row;
        overflow: hidden;
        border-radius: 6px;
        font-size: 20px;
        margin: 10px;
        box-shadow: rgb(0 0 0 / 49%) 3px 3px 10px 1px;
        background-color: rgb(255 255 255 / 40%);
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        height:35px;
    }
    .horizontalSelectorOption {
        display: table-cell;
        padding: 0px 4px 0px 4px;
    }
    .flex-container, .fc {
        display: flex;
        margin: 0%;
        justify-content: space-evenly;
        align-items: stretch;
        align-content: stretch;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .flex-child {
        flex: 1;
    }  
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }
    input{
        border-radius:7px;
        padding:.3em
    }
    .buttonSpecial{
        background-color: transparent;
        border-radius: 23px;
        border-color: #cb1c1c;
    }
    .buttonSpecial:hover{
        background-color: transparent;
    }
    .buttonSpecial:disabled{
        border-color: gray;
    }



    select{
        padding: .2em;
        border-radius: 7px;
    }

    .noDisplay{
        display: none;
    }


    .switch { 
        position : relative ;
        display : inline-block;
        width : 50px;
        height : 25px;
        background-color: #c0c0c0;
        border-radius: 20px;
        padding: 0px;
    }
    .switch::after {
        content: '';
        position: absolute;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background-color: rgb(255, 255, 255);
        top: 2px;
        left: 2px;
        transition: all 0.3s;
    }
    .checkbox:checked + .switch::after {
        left : 27px; 
    }
    .checkbox:checked + .switch {
        background-color: #7983ff;
    }
    .checkbox { 
        display : none;
    }

    .loginHeaderImageBox{
        width:40%;
        margin-left: .4em;
        margin: .4em;
        margin-bottom: .15em;
    }
    .loginHeaderImageLongBox{
        display: none;
    }
    .loginHeaderImage{
        border-radius: 8px;
    }
    .loginHeaderText{
        margin-top: .25em;
        margin-right: .2em;
    }
    .loginRegisterZone{
        width: 25%;
        min-width: 260px;
        margin: .4em;
        margin-left: 0px;
    }
    .loginConnectZone{
        width: 80%;
        margin: .4em;
    }








    .homeAccountInfoBox{
        margin: .4em auto .4em auto;
    }
    .homeAccountInfoInformations{
        margin: .4em;
        width: -webkit-fill-available;
    }
    .homeAccountInfoInformationBoxIduser{
        margin: .4em;
        width: -webkit-fill-available;
    }
    .homeAccountInfoInformationBoxPerm{
        margin: .4em;
        margin-left: 0;
        width: -webkit-fill-available;
        min-width: 240px;
    }
    .homeAccountInfoInformationBoxName{
        margin: .4em;
        margin-left: 0;
        width: -webkit-fill-available;
    }
    .homeAccountInfoInformationBoxEmail{
        margin: .4em;
        margin-left: 0;
        width: -webkit-fill-available;
    }
    .homeAccountSettingsDivBox{
        margin: auto .4em auto .4em;
    }











    .newDemandeTitreBox{
        margin: .4em;
        padding-bottom: .4em;
    }
    .newDemandeTitreInput{
        width: 550px;
        font-size: large;
    }
    .newDemandePriceSectionsFc{
        margin: .4em;
    }
    .newDemandePriceBox{
        width: 50%;
        padding-bottom: .4em;
    }
    .newDemandeSectionBox{
        width: 50%;
        margin-left: .4em;
        padding-bottom: .4em;
    }
    .newDemandeContenuBox{
        margin: .4em;
        padding-bottom: .4em;
    }
    .newDemandeButtonBox{
        margin: auto auto .4em auto;
        height: fit-content;
        width: fit-content;
        padding: .4em;
    }















    .readDemandeColoredHeaderTitle{
        font-size: 200%;
        background: linear-gradient(to right, white 30%, lime 60%, red 99%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0px 0px 20px #ced6ff;
    }
    .readDemandeFilterButtonOpener{
        display: none;
    }
    .readDemandeResetApplyExportBox{
        width:500px; 
        background-color:grey; 
        margin:auto
    }
    .readDemandeMoreInfoButtonOpener{
        display: none;
    }
    .readDemandeMoreInfoBoxFc{
        margin: .4em;
        display: ruby-text;
    }
    .readDemandeMoreInfoBoxFc div{
        min-width: fit-content;
    }

    .readDemandeLoopMainShow{
        margin-top: .4em;
    }
    .readDemandeShowAllFc{
        display: block;
        
    }
    .readDemandeFiltreText{
        margin: .4em 0% 0% 0%; 
        min-width:400px; 
        padding-top:.4em; 
        height:69px;
    }
    .readDemandeFiltreEtat{
        margin: .4em 0% 0% 0%;
        min-width:370px; 
        padding-top:.4em; 
        height:69px
    }
    .readDemandeFiltreArchived{
        margin: .4em 0% 0% 0%;
        min-width:100px; 
        max-width:200px; 
        padding-top:.4em; 
        height:69px;
    }
    .readDemandeFiltreSection{
        margin: .4em 0% 0% 0%; 
        min-width:200px; 
        padding-top:.4em; 
        height:69px;
    }
    .readDemandeFiltreImputation{
        margin: .4em 0% 0% 0%;
        min-width:200px;
        padding-top:.4em; 
        height:69px;
    }
    .readDemandeFiltreDate{
        margin: .4em 0% 0% 0%; 
        min-width:410px; 
        padding-top:.4em; 
        height:69px;
    }
    .readDemandeFiltrePrix{
        margin: .4em 0% 0% 0%; 
        min-width:280px; 
        padding-top:.4em; 
        height:69px;
    }
    






    .modifyDemandeFcMain {
        margin-top: .4em;
    }
    .modifyDemandeInformationPart {
        min-width: 22em;
        max-width: 22em;
        margin-top: 0px;
        margin-left: .4em;
        margin-right: .4em;
    }
    .modifyDemandeState {
        transform: scale(1);
        margin: .4em;
    }






    .usersMyprofileInformationTab{
        margin: 0 0 .4em .4em;
    }
    .usersMyprofileSettingsTab{
        margin: 0 .4em .4em .4em;

    }
    .usersMyprofileInformation_ID{
        margin: .4em;
    }
    .usersMyprofileInformation_PERM{
        margin: .4em;
    }
    .usersMyprofileInformation_NOM{
        margin: .4em;
    }
    .usersMyprofileInformation_PRENOM{
        margin: .4em;
    }
    .usersMyprofileInformation_EMAIL{
        margin: .4em;
    }
    .usersMyprofileSettingsSwitch{
        top: 2px;
    }








}





























































































@media only screen and (max-width: 1060px) {
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;

        color: white;
        text-align: center;
        background: rgb(72, 72, 72);
        overflow: hidden;
        margin: .4em;
        border-radius: 7px;
        padding: .4em;
        box-shadow: rgb(176, 176, 176) 0px 0px 15px 0px;
        transition: 400ms;
    }
    body {
        font-family: 'Arial', Times, serif;
        text-align: center;
        align-items: center;
        background: var(--background);  
        body {
            background: white url(/base/fondecran/classicBG.jpg) no-repeat right bottom;
        }
    }
    h1 {
        font-family: 'Arial', Times, serif;
        font-weight: 0;
        font-size: 45px;
        padding: 0px 0px;
        border: 2px solid #ffffff;  
        background: radial-gradient(circle, rgb(69, 69, 69) 13%, rgb(58, 58, 58) 74%);
        border-radius: 10px;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        color: white;
        margin: .3em;

    }
    h2 {
        font-family: 'Arial', Times, serif;
        font-weight: 0;
        font-size: 45px;
        padding: 0px 0px;
        border-radius: 5px;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        color: white;
        margin: 1%;

    }
    label {
        font-size: 25px;
        font-family: 'Arial', Times, serif;
    }
    button {
        font-family: 'Arial', Times, serif;
        font-size: 35px;
        color: var(--button-text);
        background-color: var(--button);
        padding: 5px 20px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        transition : 400ms;
    }
    button:hover {
        padding: 5px 25px;
        text-align: center;
        transition : 100ms;
        color: #ffffff;
        background-color: var(--button-hover);
    }
    input {
        width: 400px;
        height: 50px;
        border-radius: 8px;
        padding: 3px;
        transition: 150ms;
        font-size: 40px;
    }
    mark{
        border-radius: 7px;
    }
    textarea {
        border-radius: 5px;
        padding: 5px;
        background-color: #efefef;
        transition: 150ms;
        font-size: 40px;
        width: 90%;
        height: 300px;
    }
    .wellSizedBox{
        max-width: 65em;
        background: var(--box);
        overflow: hidden;
        margin: auto;
        border-radius: 8px;
        box-shadow: var(--box-shadow) 0px 0px 15px 0px;
        border: 1.5px solid;
    }
    .wellSizedBox a, .wellSizedBox label{
        float: center;
        color: #ffffff;
        text-align: center;
        padding: 14px 16px;
        font-size: 28px;
    }
    .brightWellSizedBox, .wellSizedBoxb{
        max-width: 65em;
        background: var(--brightBox);
        overflow: hidden;
        margin: auto;
        border-radius: 8px;
        box-shadow: var(--box-shadow) 0px 0px 15px 0px;
        border: 1.5px solid;
    }
    .brightWellSizedBox a, .brightWellSizedBox label, .wellSizedBoxb a, .wellSizedBoxb label{
        float: center;
        color: #ffffff;
        text-align: center;
        padding: 14px 16px;
        font-size: 30px;
    }
    .exempleColorState {
        overflow: hidden;
        
        background: var(--box);
        box-shadow: var(--box-shadow) 0px 0px 15px 0px;
    
        
        border-radius: 5px;
        margin: 15px 15% 0px 15%;
        width: 48%;
        margin: .1%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .exempleColorState a{
        float: center;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        font-size: 15px;
    }
    .wellSizedBoxBackground{
        background: black;
    }
    .homeNav {
        background: linear-gradient(0deg, rgb(73, 73, 73) 17%, rgb(53, 53, 53) 92%);
        box-shadow: rgb(176, 176, 176) 0px 0px 15px 0px;
    
        overflow: hidden;
    
        margin: auto;
        border-radius: 10px;
        transition: 200ms;
    }
    .homeNav a {
        color: #ffffff;
        text-align: center;
        padding: .5% .4%;
        text-decoration: none;
        font-size: 30px;
        border-radius: 10px;
        transform: scale(0.95);
        transition: 200ms;
    }
    .homeNavItemRight{
        float: right;
    }
    .homeNavItemLeft{
        float: left;
    }
    .littleSpace, .ls {
        height: .4em;
        width: .4em;
    }
    .filiereSelector {
        overflow: hidden;
        border-radius: 6px;
        font-size: 40px;
        margin: 10px;
        box-shadow: rgb(0 0 0 / 49%) 3px 3px 10px 1px;
        background-color: rgb(255 255 255 / 40%);
    }
    .horizontalSelector {
        display: table-row;
        overflow: hidden;
        border-radius: 6px;
        font-size: 20px;
        margin: 10px;
        box-shadow: rgb(0 0 0 / 49%) 3px 3px 10px 1px;
        background-color: rgb(255 255 255 / 40%);
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        height:35px;
    }
    .horizontalSelectorOption {
        display: table-cell;
        padding: 0px 4px 0px 4px;
    }
    .flex-container, .fc {
        display: flex;
        margin: 0%;
        margin-top: 1%;
        justify-content: space-evenly;
        align-items: stretch;
        align-content: stretch;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .flex-child {
        flex: 1;
    }  
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }
    select{
        font-size:40px;
        padding: .2em;
        border-radius: 7px;
    }
    .buttonSpecial{
        background-color: transparent;
        border-radius: 23px;
        border-color: #cb1c1c;
    }
    .buttonSpecial:hover{
        background-color: transparent;
    }
    .buttonSpecial:disabled{
        border-color: gray;
    }

    .noDisplay{
        display: none !important;
    }



    .smallChangeFc{
        display: block;
    }






    .switch { 
        position : relative ;
        display : inline-block;
        width : 80px;
        height : 40px;
        background-color: #c0c0c0;
        border-radius: 20px;
        padding: 0px;
    }
    .switch::after {
        content: '';
        position: absolute;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: rgb(255, 255, 255);
        top: 2px;
        left: 2px;
        transition: all 0.3s;
    }
    .checkbox:checked + .switch::after {
        left : 42px; 
    }
    .checkbox:checked + .switch {
        background-color: #7983ff;
    }
    .checkbox { 
        display : none;
    }









    .loginHeaderBoxFc{
        display: block;
        margin: 0;
    }
    .loginHeaderImageBox{
        display: none;
    }
    .loginHeaderImageLongBox{
        margin-left: .4em;
        margin: .4em;
        margin-bottom: .15em;
    }
    .loginHeaderImage{
        border-radius: 8px;
    }
    .loginMainBoxFc{
        margin: 0;
        display: block;
    }
    .loginConnectZone{
        
        margin: .4em;
    }
    .loginRegisterZone{
        min-width: 260px;
        margin: .4em;
    }










    .homeAccountInfoBox{
        margin: .4em auto .4em auto;
    }
    .homeAccountInfoInformations{
        margin: .4em;
    }
    .homeAccountInfoInformationFc{
        display: block;
        margin: 0;
    }
    .homeAccountInfoInformationBoxIduser{
        margin: .4em;
        padding-bottom: .4em;
    }
    .homeAccountInfoInformationBoxPerm{
        margin: .4em;
        padding-bottom: .4em;
    }
    .homeAccountInfoInformationBoxName{
        margin: .4em;
        padding-bottom: .4em;
    }
    .homeAccountInfoInformationBoxEmail{
        margin: .4em;
        padding-bottom: .4em;
    }
    .homeAccountInfoFc{
        display: block;
    }
    .homeAccountInfoBoxButton{
        width: fit-content;
        height: fit-content;
        margin: auto;
        padding: .4em;
        margin-bottom: .4em;
    }
    










    .newDemandeTitreBox{
        margin: .4em .4em 0 .4em;
        padding-bottom: .4em;
    }
    .newDemandeTitreInput{
        width: 80%;
        font-size: xx-large;
    }
    .newDemandePriceSectionsFc{
        margin: 0;
        display: block;
    }
    .newDemandePriceBox{
        margin: .4em .4em 0 .4em;
        padding-bottom: .4em;
    }
    .newDemandeSectionBox{
        margin: .4em .4em 0 .4em;
        padding-bottom: .4em;
    }
    .newDemandeContenuBox{
        margin: .4em;
        padding-bottom: .4em;
    }
    .newDemandeButtonBox{
        margin: auto auto .4em auto;
        height: fit-content;
        width: fit-content;
        padding: .4em;
    }











    .readDemandeColoredHeaderTitle{
        font-size: 170%;
        background: linear-gradient(to right, white 30%, lime 60%, red 99%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0px 0px 20px #ced6ff;
    }
    .readDemandeFilterButtonOpener{
        display: block;
        margin-bottom: .4em;
    }
    .readDemandeFilterBox.closed{
        display: none;
        transition: 2000ms;
    }
    .readDemandeResetApplyExportBox{
        width:fit-content;
        min-width: 860px;
        background-color:grey; 
        margin:auto
    }
    .readDemandeLoopMainShow{
        margin: .4em;
        width: 100%;
        float:left;
    }
    .readDemandeMoreInfoBoxFc{
        width: 100%;
        flex-direction: column;
    }
    .readDemandeMoreInfoButtonOpener{
        display: block;
    }
    .readDemandeFcForLoop{
        margin: .4em;
    }
    .readDemandeBoxFcButtons{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .readDemandeFiltreText{
        margin: .4em 0% 0% 0%; 
        min-width:650px; 
        padding-top:.4em; 
        height:110px;
    }
    .readDemandeFiltreEtat{
        margin: .4em 0% 0% 0%;
        min-width:370px; 
        padding-top:.4em; 
        height:110px;
    }
    .readDemandeFiltreArchived{
        margin: .4em 0% 0% 0%;
        min-width:100px; 
        max-width:200px; 
        padding-top:.4em; 
        height:110px;
    }
    .readDemandeFiltreSection{
        margin: .4em 0% 0% 0%; 
        min-width:200px; 
        padding-top:.4em; 
        height:110px;
    }
    .readDemandeFiltreImputation{
        margin: .4em 0% 0% 0%;
        min-width:200px;
        padding-top:.4em; 
        height:110px;
    }
    .readDemandeFiltreDate{
        margin: .4em 0% 0% 0%; 
        min-width:410px;
        
        padding: .4em .4em 0 .4em; 
        height:110px;
    }
    .readDemandeFiltreDate input{
        width: 400px;
        border-radius: 8px;
        transition: 150ms;
        font-size: 30px;
        width: 240px;
    }
    .readDemandeFiltrePrix{
        margin: .4em 0% 0% 0%; 
        min-width:280px; 
        padding-top:.4em; 
        height:110px;
    }
    .readDemandeShowAllFc{
        margin-top: 0;
    }





    .modifyDemandeFcMain {
        margin-top: .4em;
        flex-direction: column-reverse;
    }
    .modifyDemandeInformationPart {
        min-width: 22em;
        /* max-width: 22em; */
        margin-top: 0px;
        margin-left: .4em;
        margin-right: .4em;
        margin-bottom: .4em;
    }
    .modifyDemandeState {
        transform: scale(2);
        margin: 1.3em;
    }






    .userManagementAccountFc{
        display: block;
    }
    .userManagementAccountInfo{
        margin: .4em;
        padding: .2em;
    }




}