/* ============= */
/* Base styles   */
/* ============= */

html {
    position: relative;
    min-height: 100%;
}
body {
}
.MainHeader {
    position:relative;
    background-color: #f5f5f5;
    text-align: center;
}
.MainHeaderLogo {
}
.MainHeaderTitle {
}
.MainHeaderSubTitle {
    padding-bottom: 0;
}
.MainMenuBackground {
    background-color: #f5f5f5;
    box-shadow-bottom: 0px 2px 4px #999999;
    -moz-box-shadow: 0px 2px 4px #999999;
    -webkit-box-shadow: 0px 2px 4px #999999;
}
.MainMenuForeground {
    border-top: 1px solid lightgray;
    color:white;
}
.MainFooter {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5;
    color: #343a40;
}
.MainContent {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.MainContent h1 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}
.MainContent h2 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}
.MainContent h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.card-title {
    font-weight: bold;
    font-size: 2rem;
    line-height: 2rem;
}
.card-body {
    padding-top: 0;
}
.labelChoixDateTailleMin {
    min-width: 5rem;
}
/* ========================================================================== */
/* Changes to the above styles for each BOOTSTRAP breaks (xl, lg, md, sm, xs) */
/* ========================================================================== */

/* xs */
@media (max-width:575px) {
    /*    html {
            font-size: 75%;
        }*/
    body {
        margin-bottom: 16rem;  /* MainFooter.height + desired margin */
    }
    .MainHeader {
        height:7rem;
        padding-top: 0.5rem;
    }
    .MainHeaderLogo {
        height:6rem;
    }
    .MainHeaderTitle {
        font-size: 3.5rem;
        line-height: 3rem;
    }
    .MainHeaderSubTitle {
        font-size: 0.8rem;
        padding-left: 1.25rem; 
    }
    .MainFooter {
        height: 14rem;
    }
    .card-title {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }    
}
/* sm */
@media (min-width:576px) {
    /*    html {
            font-size: 85%;
        }*/
    body {
        margin-bottom: 18rem;  /* MainFooter.height + desired margin */
    }
    .MainHeader {
        height:8rem;
        padding-top: 0.5rem;
    }
    .MainHeaderLogo {
        height:7rem;
    }
    .MainHeaderTitle {
        font-size: 4rem;
        line-height: 3.5rem;
    }
    .MainHeaderSubTitle {
        font-size: 1rem;
        padding-left: 1.5rem; 
    }
    .MainFooter {
        height: 14rem;
    }
    .card-title {
        font-size: 1.75rem;
        line-height: 1.75rem;
    }    
}
/* md */
@media (min-width:768px) {
    /*    html {
            font-size: 90%;
        }*/
    body {
        margin-bottom: 20rem;  /* MainFooter.height + desired margin */
    }
    .MainHeader {
        height:9rem;
        padding-top: 0.7rem;
    }
    .MainHeaderLogo {
        height:8rem;
    }
    .MainHeaderTitle {
        font-size: 5rem;
        line-height: 4.5rem;
    }
    .MainHeaderSubTitle {
        font-size: 1.25rem;
        padding-left: 3rem; 
    }
    .MainFooter {
        height: 14rem;
    }
    .card-title {
        font-size: 2rem;
        line-height: 2rem;
    }        
}
/* lg */
@media (min-width:992px) {
    /*    html {
            font-size: 95%;
        }*/
    body {
        margin-bottom: 20rem;  /* MainFooter.height + desired margin */
    }
    .MainHeader {
        height:11.5rem;
        padding-top: 1rem;
    }
    .MainHeaderLogo {
        height:10rem;
    }
    .MainHeaderTitle {
        font-size: 6rem;
        line-height: 5rem;
    }
    .MainHeaderSubTitle {
        font-size: 1.75rem;
        padding-left: 4rem; 
    }
    .MainFooter {
        height: 14rem;
    }
    .card-title {
        font-size: 2.25rem;
        line-height: 2.25rem;
    }    
}
/* xl */
@media (min-width:1200px) {
    /*    html {
            font-size: 100%;
        }*/
    body {
        margin-bottom: 20rem;  /* MainFooter.height + desired margin */
    }
    .MainHeader {
        height:12.5rem;
        padding-top: 1rem;
    }
    .MainHeaderLogo {
        height:11rem;
    }
    .MainHeaderTitle {
        font-size: 7rem;
        line-height: 6rem;
    }
    .MainHeaderSubTitle {
        font-size: 2rem;
        padding-left: 5rem; 
    }
    .MainFooter {
        height: 14rem;
    }
    .card-title {
        font-size: 3rem;
        line-height: 3rem;
    }    
}

/*
div .MainHeaderForeground h1 {
    font-weight: 500;
    text-align: justify;
}*/

/* =============== */
/*  OTHER STYLES   */
/* =============== */


/* ==================================== */
/*  Clickable calendar to choose dates  */
/* ==================================== */

.DateProposalCalendarTable {
    border: #000 3px solid;
    width:100%;
    /*font-family: Consolas,monaco,monospace;*/ 
    /*font-size: 1rem;*/
    text-align: center;
    vertical-align: middle;
}

.DateProposalCalendarCellTitle {
    border:#000 1px solid;
    background-color: #000;
    color: white;
    padding: 0.2rem;
    font-weight: bold;
    cursor: not-allowed;    
}

.DateProposalCalendarCellNonData {
    border-left:#000 3px solid;
    border-right:#000 3px solid;
    border-bottom:#000 1px solid;
    border-top:#000 1px solid;
    background-color: #bbb;
    padding: 0.2rem;
    cursor: not-allowed;    
}

.DateProposalCalendarCellData {
    border:#000 1px solid;
    background-color: #fff;
    padding: 0.2rem;
    cursor: pointer;    
}

.DateProposalCalendarCellDataWeekend {
    border:#000 1px solid;
    background-color: #f4f4f4;
    padding: 0.2rem;
    cursor: pointer;    
}

.DateProposalCalendarCellDataSelected {
    border:#000 1px solid;
    background-color: #007bff;
    color: white;
    padding: 0.2rem;
    cursor: pointer;    
}

/* ==================== */
/*  Gravatar image      */
/* ==================== */

.gravatarImage {
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.gravatarImageSmall {
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ================================== */
/* 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;
}

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;
}

/* ================= */
/* Big cards buttons */
/* ================= */

.myBigButton {
    color:#212529;
    border-color: #999 !important;
    background-color: #f5f5f5;
    text-decoration: none;
    box-shadow: 0px 2px 4px #999999;
    -moz-box-shadow: 0px 2px 4px #999999;
    -webkit-box-shadow: 0px 2px 4px #999999;
}

.myBigButton:hover {
    background-color: #007bff !important;
    color:white;
    text-decoration: none;
}

/* =================================================== */
/* 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 mandatory input fields display they are mandatory */
/* ========================================================= */

/* Show red borders when filled, but invalid */
/*input.mandatory:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);
}*/

/* Show red borders when not filled, but invalid */
input.mandatory:placeholder-shown {
    background-color: #fffafa !important;
    border-color: #c00000 !important;
}

/* Show green borders when valid */
input.mandatory:not(:valid) {
    background-color: #fffafa !important;
    border-color: #c00000 !important;
}

/* Show green borders when valid */
input.mandatory:valid {
    background-color: #fafffa !important;
    border-color: #00c000 !important;
}

/* Show green borders when valid */
input.nowvalidated {
    background-color: #fafffa !important;
}

/* ============================================================================ */
/* To place a X top-left of Jumbotrons to close them and go back to tool choice */
/* ============================================================================ */

.jumbotron {
    position: relative;
}

#idButtonCloseJumbotron {
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: 0.5rem;
    right: 0.5rem;
}


/* =========================== */
/* Collapsible panels          */
/* =========================== */
/*
.wrapper{
    width:100%;
}
.panel-heading {
    padding: 0;
    border:0;
}
.panel-title>a, .panel-title>a:active{
    display:block;
    padding:15px;
    color:#555;
    color:#343a40;
        font-size:16px;
        font-weight:bold;
        text-transform:uppercase;
        letter-spacing:1px;
        word-spacing:3px;
    text-decoration:none;
}
.panel-heading  a:before {
        font-family: 'Font Awesome 5 Free';
        content: "\f0da\00A0\00A0";
    content: ">\00A0";
    float: left;
    color:#007bff;
    transition: all 0.5s;
}
.panel-heading.active a:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
} 
.panel-heading  a:hover {
    color:#007bff;
}
.myCollapsiblePanelTitle {
    background-color: #f5f5f5;
    background-color: #dddfe2;
}
.QuestionDomain {
    margin-top: 2rem;
    font-weight:400;
}
.MyCourseRecapTable {
    border:#999 1px solid;
    width:100%;
}
.MyCourseRecapTableTR {
}
.MyCourseRecapTableTDT {
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: right;
    background-color: #f5f5f5;
}
.MyCourseRecapTableTDTL {
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: left;
    background-color: #f5f5f5;
}

.MyCourseRecapTableTDC {
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: left;
}


.MyEEEReviewTable {
        border:#999 1px solid;
    width:100%;
}
.MyEEEReviewTableTR {
}
.MyEEEReviewTableTDT {
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: left;
    background-color: #f5f5f5;
}
.MyEEEReviewTableTDC {
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: left;
}
.MyEEEReviewTableTDCC {
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: center;
    width:15rem;
}
.MyEEEReviewTableProgressBar {
    min-width:10rem;
    height:1.5rem;    
}
.MyEEEChartsOuterDiv{
    width:100%;    
}
.MyEEEChartsDistribution {
    width:120px;
    height: 120px;
}
.MyEEEChartsDistributionDiv{
    width:20rem;
    height:auto;
}

.MyEEECommentTable {
    width:100%;
}
.MyEEECommentTableTR {
}
.MyEEECommentTableTDT {
    width:50%;
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: left;
    background-color: #f5f5f5;
}
.MyEEECommentTableTDC {
    width:50%;
    border:#999 1px solid;
    padding: 0.5rem;
    text-align: left;
}


.EnteteCommentairesNegatifs{
    background-color:#FFDADA;
    width:50%;
}
.EnteteCommentairesPositifs{
    background-color:#DAFFDA;
    width:50%;
}
.CommentairesNegatifs{
    background-color:#FFF3F3;
}
.CommentairesPositifs{
    background-color:#F3FFF3;
}

.MyCourseEvalSlider {
    width:20rem;
}
.MyEvaluationTable {
    width:100%;
    border:#999 1px solid;
}
.MyEvaluationTableColQuestion {
    width:80%;
    background-color: #f5f5f5;
    padding: 0.5rem;
}
.MyEvaluationTableColEvaluate {
    width:20%;
    min-width: 13rem;
    background-color: #f5f5f5;
    padding: 0.5rem;
    text-align: center;
}
.MyEvaluationTableHeaderRow {
    background-color: #c5c5c5;
    background-color: black;
    color:white;
    padding: 0.5rem;
}
.MyEvaluationTableColQuestionFirst {
    width:80%;
    background-color: #f5f5f5;
    padding-top: 2rem;
    padding-left: 0.5rem;
    padding-right : 0.5rem;
    padding-bottom: 0.5rem;
}
.MyEvaluationTableColEvaluateFirst {
    width:20%;
    min-width: 13rem;
    background-color: #f5f5f5;
    padding-top: 2rem;
    padding-left: 0.5rem;
    padding-right : 0.5rem;
    padding-bottom: 0.5rem;
    text-align: center;
}
.MyEvaluationTableColPositiveFirst {   
    background-color: #e5ffe5;
    padding-top: 2rem;
    padding-left: 0.5rem;
    padding-right : 0.5rem;
    padding-bottom: 0.5rem;
}
.MyEvaluationTableColPositive {   
    background-color: #e5ffe5;
    padding: 0.5rem;
}
.MyEvaluationTableColNegativeFirst {   
    background-color: #ffe5e5;
    padding-top: 2rem;
    padding-left: 0.5rem;
    padding-right : 0.5rem;
    padding-bottom: 0.5rem;
}
.MyEvaluationTableColNegative {   
    background-color: #ffe5e5;
    padding: 0.5rem;
}
.MyEvaluationTableRemarkInput {   
    width: 100%;
}
.fullWidth {   
    width: 100%;
}

.MyEEERadarTable {
    width:100%;
}
.MyEEERadarTableTR {
}
.MyEEERadarTableTDCC {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    background-color:#FEFCF6;    
}

.MyEEERadarViewCanvas {
    width: 100%;
    height: auto;
}*/

/* ============================================================================ */
/*  Ajax calls animation / 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;
}


/* =========================== */
/*  News and changes      */
/* =========================== */
/*
.NewsAndChangesCompareItem {
    background-color: #f5f5f5;
    padding: 0.5rem;
}


.ManageSpecificEEEAnswersCount {
    font-size: 3rem;
    font-weight: bold;
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: white;
    z-index: 999999;
}

#generated_qrcode img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 80%;    
}

.fillparent {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
}

#generated_code {
    position: fixed;
    top:40%;
    text-align: center;
    width: 100%;
    height: auto;
    font-weight: bold;
    font-family: Inconsolata;
}

 Code display auto-stretch  
 xs 
@media (max-width:575px) {
    #generated_code {   font-size: 16px;    }
}
 sm 
@media (min-width:576px) {
    #generated_code {   font-size: 24px;    }
}
 md 
@media (min-width:768px) {
    #generated_code {   font-size: 32px;     }
}
 lg 
@media (min-width:992px) {
    #generated_code {   font-size: 42px;   }
}
 xl 
@media (min-width:1200px) {
    #generated_code {   font-size: 54px;    }
}
 xl2 
@media (min-width:1600px) {
    #generated_code {   font-size: 72px;    }
}
 xl3 
@media (min-width:2000px) {
    #generated_code {   font-size: 92px;   }
}*/