/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    /*height: 26rem;*/
    /*    line-height: 128px;  Vertically center the text there */
    background-color: #f5f5f5;
    color: #343a40;
}

.pied-de-page-marge {
    height: 50px;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
    padding: 70px 15px 0;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

code {
    font-size: 80%;
}

/* =========================== */
/*  Ajax calls animation       */
/* CSS loading spinner with a semi-transparent background          */
/* =========================== */


#loading-background {
    position:fixed;
    /*    width:100%; */
    left:-160px;right:0;top:-160px;bottom:0;        /* 160px is the size of the spinner */
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#loading-background::after {
    content:'';
    display:block;
    position:absolute;
    width:160px;height:160px;       /* 160px is the size of the spinner */
    left:50%;top:35%;
    border-style:solid;
    border-color:black;
    border-top-color:transparent;
    border-width: 12px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

/*
 Image affichée pendant les chargements 
#loading-indicator {
    width: 40%;
}

#loading-indicator-container {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 300px;
}

#loading-text-container {
    font-weight: bold;
    width: 100%;
}

 Conteneur de l'image affichée pendant les chargements 
#loading-background {
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 4;
}*/

/* =========================== */
/*  Header and footer          */
/* =========================== */
.my-header-title-logo {
    font-size: 3rem;
    font-weight: 500;
    color:white;
    /*  line-height: 1.5;
      color: #212529;*/
}

.my-header-title-logo-small {
    font-size: 2rem;
    font-weight: 500;
    /*  line-height: 1.5;
      color: #212529;*/
}

.my-header-title-logo-container {
    display:flex;
    align-items:center;
    flex-direction: row;
    color:#f5f5f5;
}

.my-footer-title-logo-container {
    display:flex;  
    align-items:center;
    text-align: center !important;  
    white-space: nowrap !important;
    flex-direction: row;
    color:#343a40;
}

/* =========================== */
/*  New account form           */
/* =========================== */

.form-control-with-pattern:valid{
    background: #DDFFDD;
}
.form-control-with-pattern:invalid{
    background: #FFDDDD;
}

.form-control-hints{
    font-size: 0.8rem;
    font-style: oblique;
    font-weight: 100;
}

/* =========================== */
/*  All Popover's              */
/* =========================== */

.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

/* =========================== */
/*  Login form                 */
/* =========================== */

.my-login-btn {
    width: 260px !important;
}
.my-createaccount-btn {
    width: 260px !important;
}
/*.card {display:inline-block;}*/

/* =========================== */
/*  Responsive card deck       */
/*  Bootstrap 4                */
/* =========================== */

.my-cards-container{
    width: 100%;
    display:inline-flex;
    flex-wrap:wrap;
    /*border:1px solid black;*/
}
.my-cards-container-flex-direction{
    flex-direction:row;
}

@media screen and (max-width: 500px) {
    .my-cards-container-flex-direction{
        flex-direction:column;
    }
}

.my-cards-container .card img {
    height:auto;
    width:100%;
    object-fit: scale-down;
    max-height: 8rem;
    max-width:20rem;
}
.my-cards-container .card {
    /*max-height: 50rem;*/
    width: 22rem;
    margin: 0.5rem;
}

.my-cards-container .card-header {
    height: 10rem;
    /*background: #FFFFFF;*/
    background: rgba(0, 0, 0, 0.12);

}

.my-cards-container .card-footer {
    background: rgba(0, 0, 0, 0.05);
}

.my-cards-container .card-body {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    background: rgba(0, 0, 0, 0.02);
}
.my-cards-container .card-body .input-group-text {
    /*width:5rem !important;*/
    min-width: 6rem;
    /*justify-content: flex-end;*/    
}

/* =========================== */
/*  All data must be shown in  */
/*  non-proportional fonts.    */
/* =========================== */

.my-cards-container input,
.my-cards-container textarea {
    /*font-family: Consolas, Lucida Console, monospace;*/
    font-family: 'Inconsolata';
}

.my-card-corner-contained {
    position: relative;
}

.my-card-corner-contained-place-br {
    position: absolute;
    right: 0;
    bottom: 0;
}

.my-card-corner-contained-place-tl {
    position: absolute;
    left: 0;
    top: 0;
}

/* =========================== */
/*  To fix the <a></a> menu links  */
/* =========================== */
/*
.minimal-height {
    height:1px;
}*/

/* =========================== */
/* To make the gray used in input fields much lighter  */
/* =========================== */

.form-control::-webkit-input-placeholder {
    color: #DDDDDD !important;
}

input::-webkit-input-placeholder {
    color: #DDDDDD !important;
}

input::-moz-placeholder {
    color: #DDDDDD !important;
}

input:-ms-input-placeholder {
    color: #DDDDDD !important;
}

input::placeholder {
    color: #DDDDDD !important;
}

/* =========================== */
/* To make the font smaller depending on the current breakpoint */
/* =========================== */

/* xs */
@media (max-width:575px) {
    .card-columns {
        column-count: 1;
    }
    html {
        font-size: 90%;
    }
    .my-cards-container .card {
        width: 320px;
        margin: 10px;
    }  
    .my-jumbotron-width {
        width: 24rem;
        /*        max-width: 120rem; */
    }
    .my-footer-title-logo {
        font-size: 2rem;
        font-weight: 500;
    }    
    body {
        margin-top: 6rem;  
        margin-bottom: 22rem;
    }
    .footer {
        height: 16rem;
    }
}
/* sm */
@media (min-width:576px) {
    .card-columns {
        column-count: 1;
    }
    html {
        font-size: 95%;
    }
    .my-cards-container .card {
        width: 480px;
        margin: 10px;
    }  
    .my-jumbotron-width {
        width: 26rem;
        /*        max-width: 120rem; */
    }
    .my-footer-title-logo {
        font-size: 2.5rem;
        font-weight: 500;
    }    
    body {
        margin-top: 6rem;  
        margin-bottom: 20rem;
    }
    .footer {
        height: 16rem;
    }
}
/* md */
@media (min-width:768px) {
    .card-columns {
        column-count: 2;
    }
    html {
        font-size: 100%;
    }
    .my-cards-container .card {
        width: 320px;
        margin: 10px;
    }  
    .my-jumbotron-width {
        width: 35rem;
        /*        max-width: 120rem; */
    }
    .my-footer-title-logo {
        font-size: 3rem;
        font-weight: 500;
    }    
    body {
        margin-top: 6rem;  
        margin-bottom: 20rem;
    }
    .footer {
        height: 18rem;
    }
}
/* lg */
@media (min-width:992px) {
    .card-columns {
        column-count: 2;
    }
    html {
        font-size: 100%;
    }
    .my-cards-container .card {
        width: 26rem;
        margin: 0.5rem;
    }  
    .my-jumbotron-width {
        width: 40rem;
        /*        max-width: 120rem; */
    }
    .my-footer-title-logo {
        font-size: 4rem;
        font-weight: 500;
    }        
    body {
        margin-top: 6rem;  
        margin-bottom: 22rem;
    }
    .footer {
        height: 20rem;
    }
}
/* xl */
@media (min-width:1200px) {
    .card-columns {
        column-count: 3;
    }
    html {
        font-size: 100%;
    }
    .my-cards-container .card {
        width: 22rem;
        margin: 0.5rem;
    }  
    .my-jumbotron-width {
        width: 45rem;
        /*        max-width: 120rem; */
    }
    .my-footer-title-logo {
        font-size: 4rem;
        font-weight: 500;
    }    
    body {
        margin-top: 6rem;  
        margin-bottom: 22rem;
    }
    .footer {
        height: 20rem;
    }
}

/* =========================== */
/* To make the js-croll links without underline */
/* =========================== */

.js-scroll {
    text-decoration: none !important;
}

/* =========================== */
/* To make the nav bar links of the right color */
/* =========================== */


/* =========================== */
/* To make the footer links of the right color */
/* =========================== */

.note-is-dirty {
    border-width: 3px;
    border-color: #ffc107;
    background-color: #fff5d9;
}

/* =========================== */
/* To make the main menu headers color */
/* =========================== */

/*.dropdown-header {
        background-color:rgba(0, 0, 0, 0.3);
        color:white;
    font-size: 1rem;
    background-color:rgba(0, 0, 0, 0.08);
    color:#007bff;
    color:#666666;
        text-align: center;
}*/

h1 {
    margin-bottom: 2rem;
}

h5 {
    margin-top: 1rem;
}

.json-code-readable {
    font-family: 'Inconsolata';
    font-size: 0.8rem;
    font-weight: bold;
    color:blue;
    text-align: left !important;   
    line-height: 0.5rem !important;
}
.json-code-readable-key {
    font-family: 'Inconsolata';
    font-size: 0.8rem;
    font-weight: normal;
    color:darkred;
    text-align: left !important;    
    line-height: 0.5rem !important;
}
.json-code-readable-value {
    font-family: 'Inconsolata';
    font-size: 0.8rem;
    font-weight: normal;
    color:black;
    text-align: left !important;   
    line-height: 0.5rem !important;
}



/* =========================== */
/* To change the main menu drop downs */
/* =========================== */

.dropdown-header {
    font-size: 1.2rem;
    font-family: Arial;
    font-weight: bold;
    background-color:#ddd;
    /*color:#888;*/
    /*color:white;*/

    /*color:#212529;*/
    color:#007bff;
}

a.dropdown-item:hover{
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

a.dropdown-item.disabled{
    color: #ddd !important;
}

div .dropdown-menu {
    background-color: #f5f5f5 !important;
    border-color: #ccc;
    /*border-color: #212529;*/
    box-shadow: 0px 3px 6px #999999;
    -moz-box-shadow: 0px 3px 6px #999999;
    -webkit-box-shadow: 0px 3px 6px #999999;
}

/* =========================== */
/* To make the main menu drop downs auto open on hover */
/* =========================== */
/*
.dropdown:hover>.dropdown-menu {
    display: block;
}*/

/* ========================================================================= */
/* To remove the yellow background in the input fields because of "autofill" */
/* ========================================================================= */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}