/* =======================================================================================
============================== VARIABLES COULEURS DES PRÉPAS =============================
*/
/*:root {
    antemed-epsilon
    --color-1: 8,42,67;
    --color-2: 249,90,69;
    prépa défi
    --color-3: 8,42,67;
    --color-4: 178,25,27;
    stan santé
    --color-5: 5,89,123;
    --color-6: 208,189,133;
    sup dijon
    --color-7: 0,92,147;
    --color-8: 140,24,91;
    bersot formation
    --color-9: 44,47,125;
    --color-10: 206,40,85;
    supexam nantes
    --color-11: 0,92,147;
    --color-12: 175,202,11;
    prépa vesale
    --color-13: 52,151,205;
    --color-14: 230,45,47;
    cepsup
    --color-15: 232,88,45;
    --color-16: 40,37,77;
    segmo
    --color-17: 41,184,206;
    --color-18: 207,19,72;
    cappec
    --color-19: 133,214,118;
    --color-20: 109,30,77;
    supexam paris
    --color-21: 15,53,83;
    --color-22: 236,106,88;
    ipe santé
    --color-23: 4,57,94;
    --color-24: 0,155,119;
    terminale santé
    --color-25: 10,53,84;
    --color-26: 68,187,153;
    première santé
    --color-27: 68,187,153;
    --color-28: 10,53,84;
    alpha prépa santé
    --color-29: 251,196,16;
    --color-30: 53,63,113;
    skol santé rennes
    --color-31: 48,75,154;
    --color-32: 233,73,110;
}*/

/* ===============================================================
============================== GLOBAL =============================
*/
body {
    color: #292929;
    font-size: 15px;
    font-family: "Open Sans", sans-serif;
    background-color: #f0f0f0;
}
i, .top-title { color: rgba(var(--color-2),1);}
a {color: #292929;}
.divider {
    margin-top: 0;
    margin-bottom: 0.875rem;
    width: 100%;
    height: 9px;
    background: left top url("../images/bg-hr.jpg") repeat-x;
    border: none !important;
}
h3 span {
    font-size: 1rem;
    font-weight: normal;
}
.h3px {height: 3px !important;}
.mh-400px {
    max-height: 400px;
    overflow-y: scroll;
}
.mw-240 {
    width: 240px;
    max-width: 240px;
}
.top-title {
    display: inline-block;
    padding: 8px 20px 6px 16px;
    background-color: #ffffff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-bottom: 0;
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 2rem;
}
.checked, .checked i {opacity: 65%;}
.badge {margin-left: 6px;}
.bd-callout {
    background-color: #fafafa;
    padding: .875rem;
    margin: 0 0 1.25rem 0;
    border: 1px solid #cdd2d6;
    border-left-width: .3rem;
    border-radius: .25rem;
}
.bd-callout-new {border-left-color: #dc3545;}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: rgba(var(--color-2),1);
    background-color: rgba(var(--color-2),1);
}
hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: none;
    width: 100%;
    height: 3px;
    background: left top url("../images/bg-hr.jpg") repeat-x transparent;
}
.titre-n2 {
    padding: 6px 16px;
    font-size: 1.15rem;
    font-weight: bold;
    border-bottom: solid 1px rgba(0,0,0,.1);
}
.titre-n3 {
    margin: 1.5rem 0 .875rem;
    display: block;
    padding: 4px 0;
    font-size: 1rem;
    font-weight: bold;
    border-bottom: solid 1px rgba(0,0,0,.1);
}
.bg-gris {background-color: #f0f0f0;}
.bg-gris-2 {background-color: #e1e1e1;}
.bg-oc {background-color: rgba(var(--color-2),.08);}
.bg-bleu-alpha {background-color: rgba(var(--color-1),1);}
.bg-bleu-plain {background-color: #d5dbdf;}
.text-muted {color: #989ea4 !important;}
#box-btn-e-learning .card-body {padding: 1.25rem 0;}
@media (min-width:2560px) {
    #box-btn-e-learning .card-body .mt-3.extend-mt-xl-3 {margin-top: 0 !important;}
}
.box-btn-e-learning-bis {
    text-align: center;
    background-color: rgba(var(--color-2),1);
    border-radius: 20px;
    padding: 8px 0 0 0;
    border: solid 1px rgba(var(--color-2),1);
}
.box-btn-e-learning-bis.reverse_colors {
    background-color: rgba(var(--color-1),1);
    border: solid 1px rgba(var(--color-1),1);
}
.box-btn-e-learning a:hover, .box-btn-e-learning-bis a:hover {color: inherit;}
.btn-e-learning .fa-head-side-gear, .btn-e-learning-bis .fa-head-side-gear {
    --fa-primary-color: #ffffff;
    --fa-secondary-color: rgba(var(--color-2),1);
    --fa-secondary-opacity: 1;
}
.box-btn-e-learning-bis.reverse_colors .btn-e-learning-bis .fa-head-side-gear {
    --fa-secondary-color: rgba(var(--color-1),1);
}
.box-btn-e-learning:hover {
    border: solid 1px rgba(var(--color-2),.3);
    background-color: rgba(var(--color-2),.1);
}
.box-btn-e-learning:hover .matiere {
    border-top: solid 1px rgba(var(--color-2),.3);
    border-bottom: solid 1px rgba(var(--color-2),.3);
}
.box-btn-e-learning:hover .fa-head-side-gear {}
.btn-e-learning {
    border-radius: 40px;
    font-size: 1.25rem;
    font-weight: 800;
    color: rgba(255,255,255,1);
    background: rgba(var(--color-1),1);
    padding: 6px 24px 6px 6px;
}
.training {
    padding: 8px 0;
    text-align: center;
    font-size: .875rem;
    font-weight: normal;
}
.matiere {
    padding: 8px;
    border-top: solid 1px rgba(var(--color-1),.3);
    border-bottom: solid 1px rgba(var(--color-1),.3);
    background-color: #ffffff;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}
.btn-e-learning-bis {
    border-radius: 40px;
    font-size: 1.25rem;
    font-weight: 900;
    color: rgba(255,255,255,1);
    padding: 0 0 10px 0;
}
.training-bis {
    background: url("../images/bg-mat-head.svg") left -70px / 1070px 110px no-repeat #f5f5f5;
    padding: 10px 8px;
    text-align: center;
    font-size: .875rem;
    font-weight: normal;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: background-color .3s ease-in-out;
    border-top-left-radius: 40px;
}
.box-btn-e-learning-bis:hover .training-bis {background-color: #feeeec;}
.box-btn-e-learning-bis:hover .matiere-bis {border: solid 1px rgba(var(--color-2),.3);}
.matiere-bis {
    background-color: #ffffff;
    margin: 10px 0;
    padding: 8px;
    border-radius: 20px;
    border: solid 1px rgba(var(--color-1),.3);
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
}
.btn-e-learning i, .btn-e-learning-bis i {
    padding-top: 6px;
    text-align: center;
    font-size: 1.5rem;
    color: rgba(var(--color-1),1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(var(--color-1),1);
}
.box-btn-e-learning-bis.reverse_colors .btn-e-learning-bis i {
    color: rgba(var(--color-2),1);
    background-color: rgba(var(--color-2),1);
}


/* ===============================================================
============================== INDEX =============================
*/
#logo-prepa .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: none;
    border-radius: 0;
}
#logo-prepa .card img {
    width: auto;
    max-width: 150px;
    height: 55px;
}

/* ===============================================================
============================== IDENTITÉ ==========================
*/
.pref .dropdown-toggle::after {
    display: none;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

/* ===============================================================
============================== MENU / NAVIGATION =================
*/
@media (min-width:1200px) {
    #menu-box.col-xl-3 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (min-width:1920px) {
    #menu-box.col-xl-3 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    #menu-box.hack-xl-6 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
    .extend-xl-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    #accueil .hack-xl-6 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    #accueil .hack-xl-6-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #accueil .hack-xl-6-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #accueil .hack-xl-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    #accueil .order-xl-2 {order: 4;}
    #accueil .order-xl-4 {order: 3;}
}
@media (min-width:2560px) {
    #menu-box.col-xl-3 {
        flex: 0 0 10%;
        max-width: 10%;
    }
    #matiere .extend-xl-4 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}
@media (min-width:2560px) {
    #accueil .hack-xl-6-2 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    #accueil .hack-xl-12 {
        flex: 0 0 66.66%;
        max-width: 66.66%;
    }
}
#top-menu {
    min-height: 100vh !important;
    border-bottom: solid 1px #cdd2d6;
    
}
@media (min-width:1200px) {
    #top-menu {
        overflow: auto;
        height: 1vh;
    }
}
/*@media (max-width:1280px) {  #top-menu {min-height: auto !important;}  }*/
@media (max-width:1199px) {  #top-menu {min-height: auto !important;}  }
.navbar-toggler {
    background-color: #f0f0f0;
    border: 1px solid rgba(var(--color-1),1);
}
.navbar {
    align-items: start;
    padding: 1rem;
}
.navbar-brand img {
    margin: 0 auto;
    display: block;
    height: 70px;
    width: auto;
    max-width: 80%;
}
.navbar-brand {
    font-weight: 600;
    margin: 0 0 14px 0 !important;
}
.navbar-brand:hover { color: rgba(var(--color-2),1); }
.logo img {
    width: 55px;
    height: auto;
}
.active i { color: rgba(255,255,255,.95);}
.page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 50%;
}
.nav a.nav-link.active, .nav a.nav-link.active:hover {
    font-weight: bold;
    background-color: rgba(var(--color-2),1);
    border-radius: 8px;
    color: rgba(255,255,255,.95);
}
.nav a.nav-link:hover {
    border-radius: 8px;
    background-color: rgba(var(--color-2),.08);
    color: inherit;
}
.nav-link {transition: background-color .3s ease-in-out;}
.dropdown-menu {font-size: 15px;}
.dropdown-item:hover {background-color: rgba(var(--color-2),.08);}
.dropdown-menu.show {box-shadow: 0 0 16px rgba(0,0,0,.1);}
.dropdown-notifications .badge-notifications {
    position: absolute;
    right: 7px;
    cursor: pointer;
    z-index: 2;
}
.dropdown-notifications .dropdown-menu {
    max-height: 500px;
    overflow-y: auto;
    width: 400px;
    padding: 15px;
}

/* ===============================================================
============================== MES MATIÈRES ======================
*/
#matiere .card {border-radius: 40px;}
.compte .pref {
    line-height: normal;
    font-size: 2.4rem;
    max-width: 80px;
}
.compte .name {
    font-size: 26px;
    font-weight: 700;
}
.mat-box {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 2.5rem;
}
.mat-box:hover {box-shadow: 0 0 16px rgba(0,0,0,.13);}
.mat-title {
    font-size: 20px;
    font-weight: bold;
}
.mat-header {
    border-radius: 2.5rem 2.5rem 0 0;
    padding-top: 8px;
    background: left -14px url("../images/bg-mat-head.svg") no-repeat;
    background-size: 1070px 110px;
}
.mat-img {
    margin: 0 auto;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: solid 3px #ffffff;
    background-color: rgba(var(--color-2),1);
    overflow: hidden;
}
.mat-img img {
    width: 43px;
    height: 43px;
    margin: 14px auto;
}
.mat-img.visuel_jpg img {
    width: 100%;
    height: 100%;
    margin: 0;
}
.mat-body {padding: 15px 15px 0 15px;}
.mat-comp {
    min-height: auto;
    height: auto;
}
@media (min-width:768px) {  .mat-comp {min-height: 53px;}  }
.text-btn-stats {
    font-size: 14px;
    color: rgba(var(--color-2),1);
}
.text-btn-stats::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
@media (min-width:768px) {
    .mat-header {
        background: left top url("../images/bg-mat-head.svg") no-repeat;
        background-size: 1070px 110px;
    }
    .mat-img {
        width: 7.5rem;
        height: 7.5rem;
        border: solid 5px #ffffff;
        overflow: hidden;
    }
    .mat-img img {
        width: 65px;
        height: 65px;
        margin: 20px auto;
    }
    .mat-img.visuel_jpg img {
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .mat-body {padding: 15px 15px 15px 15px;}
}
.mat-footer {
    padding: 0 15px;
    margin-top: auto;
}
.mat-footer .navbar-toggler {
    border-radius: 20px;
    position: relative;
    padding: .35rem .75rem;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    border: solid 1px rgba(var(--color-1),.33);
}
.stat-body {padding: 6px 0 15px 0;}
.stat-title {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: rgba(var(--color-1),1);
    color: rgba(255,255,255,.95);
    font-size: .75rem;
    font-weight: bold;
}
@media (min-width:1280px) {  .mat-box .stat-title {font-size: 10px;}  }
@media (min-width:1920px) {  .mat-box .stat-title {font-size: .75rem;}  }
.stat-body img {
    width: 100px;
    height: 100px;
}

/* ===============================================================
============================== LOGIN =============================
*/
.form-group {margin-bottom: 1.2rem;}
#form-login input {
    font-weight: 500;
    /*color: rgba(var(--color-2),.65);*/
}
.login-box {
    border-radius: 2.5rem;
    box-shadow: 0 0 18px rgba(0,0,0,.08);
}
.login-box:hover .login-picto i {color: rgba(var(--color-2),1);}
.login-header {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    padding: 40px 10px;
    background-color: rgba(var(--color-1),1);
}
.login-picto i {
    color: rgba(var(--color-1),1);
    transition: color .2s ease-in-out;
}
.login-picto {
    width: 83px;
    text-align: center;
    padding:0 10px;
    font-size: 50px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 16px 0 16px 16px;
}
.login-title {
    font-size: 2rem;
    font-weight:200;
    text-align: center;
    background: left -70px url("../images/bg-mat-head.svg") no-repeat;
    background-size: 1070px 110px;
}
.form-control::placeholder {color: #afb5bb;}
.login-box .btn {
    width: 100%;
    display: block;
    border-radius: 20px 0 20px 20px;
    padding: 0.375rem 36px;
}
.btn-primary {
    font-weight: 600;
    color: rgba(255,255,255,.95);
    background-color: rgba(var(--color-1),1);
    border-color: rgba(var(--color-1),1);
}
.btn-primary:hover {
    color: #fff;
    background-color: rgba(var(--color-2),1);
    border-color: rgba(var(--color-2),1);
}
.btn-primary i {
    color: #fff;
}
#mdp {
    display: block;
    padding: 6px 12px;
    margin: .5rem 1.5rem 0;
    border: solid 1px #ffffff;
    border-radius: 0;
    transition:
            background-color .2s ease-in-out,
            border-color .2s ease-in-out,
            border-radius .2s ease-in-out;
}
#mdp:hover {
    border-radius: 20px;
    background-color: rgba(var(--color-2),.05);
    border: solid 1px;
    border-color: rgba(var(--color-2),.1);
}

/* ===============================================================
============================== ACCUEIL ===========================
*/
.onglet {
    display: inline-block;
    border-radius: 20px 20px 0 0;
    background-color: rgba(var(--color-1),1);
    padding: 5px 20px 0 20px;
    color: rgba(255,255,255,.95);
    font-size: 1.15rem;
    font-weight: bold;
    text-align: left;
}
.onglet2 {
    display: inline-block;
    color: rgba(var(--color-1),1);
    padding: 5px 20px 0 0px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
}
.line {
    display: inline-block;
    width: 100%;
    height: 10px;
    background-color: rgba(var(--color-1),1);
}
#accueil .card, #uexx .card, #box-livrets .card,
#cours .card, #box-btn-e-learning .card, #box-videos .card, #box-parcours .card, #forum .card {background: none; border: none;}
#accueil .card-header, #uexx .card-header, #box-livrets .card-header,
#cours .card-header, #box-btn-e-learning .card-header,
#box-videos .card-header, #box-parcours .card-header, #forum .card-header {
    padding: 0;
    margin-bottom: 15px;
    background-color: transparent;
    box-sizing: border-box;
    border: none;
    border-bottom: solid 8px rgba(var(--color-1),1);
}
#accueil .card-header:first-child, #uexx .card-header:first-child,
#box-livrets .card-header:first-child, #cours .card-header:first-child, #forum .card-header:first-child,
#box-btn-e-learning .card-header:first-child, #box-videos .card-header:first-child, #box-parcours .card-header:first-child { border-radius: 0; }
#accueil .card-body, #uexx .card-body, #box-livrets .card-body, #cours .card-body, #box-btn-e-learning .card-body, #box-videos .card-body, #box-parcours .card-body, #forum .card-body, #seances .card-body, #plannings .card-body, #profil .card-body, #scolarite .card-body, #infos_concours .card-body {
    box-shadow: 0 0 15px rgba(0,0,0,.08);
    border: 1px solid #cdd2d6;
    background-color: #ffffff;
    border-radius: 0 0 8px 8px;
}
#accueil .card-body {
    height: 500px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: none;
}
#accueil .card-body img
    {
    /*width: 100%;*/
    max-width: 100%;
}
@media (min-width:1920px) {  #ancrage .card-body img {width: 100%; max-width: 90%;}  }
@media (min-width:2560px) {  #ancrage .card-body img {width: 100%; max-width: 55%;}  }
/*.list-group-item {
    padding: 1rem 1rem 1rem 0;
    border-top: 1px solid rgba(0,0,0,.125);
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-left: none;
    border-right: none;
}*/
.stat-box img {margin: 6px auto;}
.bd-callout a {
    color: #292929;
    text-decoration: none !important;
}

/* ===============================================================
============================== UEXX ==============================
*/
#barre-filtre {box-shadow: 4px 5px 8px rgba(0,0,0,.12);}
.filters {
    font-weight: bold;
    padding: 6px 16px 6px 12px;
    background: #ffffff;
    border: 1px solid rgba(var(--color-1),.25);
    border-radius: 20px;
    transition: background-color .2s ease-in-out, border .2s ease-in-out;
}
.filters.filter_active {
    border: solid 1px #ffffff;
    color: rgba(255,255,255,.95);
    background: rgba(var(--color-1),1);
}
@media (hover: hover) and (pointer: fine) {
    .filters:hover {
        border: solid 1px #ffffff;
        color: rgba(255,255,255,.95);
        background: rgba(var(--color-1),1);
    }
}
#TagsPrimaires.form-control, #TagsSecondaires.form-control,
#box-question .form-control, #box-mes-questions .form-control {
    border-radius: 20px;
    border: 1px solid rgba(var(--color-1),.25);
}
.question-dp img {
    max-width: 80%;
    height: auto;
}
.e-learning {
    width: 100%;
    line-height: 15px;
    font-size: .875rem;
    text-align: center;
    border-radius: 0 0 8px 8px;
    padding: .35rem .75rem;
    margin-bottom: 0;
    background-color: rgba(var(--color-2),.1);
    border: solid 1px rgba(var(--color-1),.1);
}
.e-learning:hover {
    background-color: #f5f5f5;
    box-shadow: 0 0 16px rgba(0,0,0,.08);
}
.e-learning i {color: rgba(var(--color-1),1);}
.e-learning:hover i {color: rgba(var(--color-2),1);}
.badge-btn {
    box-shadow: 0 0 16px rgba(0,0,0,.08);
    font-size: 2.5rem;
    text-align: center;
    width: 4rem;
    height: 4rem;
    margin: 10px auto;
    display: block;
    padding-top: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    border: solid 1px rgba(var(--color-1),.2);
}
.text-btn {font-weight: normal;}
#progression .stat-body {padding: 15px 0;}
.link-cours, .link-e-learning, .link-reussir {
    display: flex;
    align-items: stretch;
}
.link-cours, .link-reussir, #box-livrets .box-btn-e-learning-bis {margin: 16px 8px;}
.link-cours:hover .box-fichiers, .link-cours:hover .box-fichiers img,
.link-e-learning:hover .box-e-learning, .link-reussir:hover .box-fichiers,
.link-reussir:hover .box-fichiers img {box-shadow: 0 0 16px rgba(0,0,0,.13);}
.link-cours:hover .box-fichiers img, .link-reussir:hover .box-fichiers img {box-shadow: 0 0 8px rgba(0,0,0,.18);}
#reussir .box-fichiers {margin-top: 0;}
.box-fichiers {
    position: relative;
    padding: 16px;
    text-align: center;
    border-radius: 20px;
    border: solid 1px rgba(var(--color-1),.3);
    box-sizing: border-box;
    width: 240px;
    background-color: #fafafa;
}
.box-fichiers.small {
    width: 180px;
    padding: 8px;
}
.box-fichiers.big {
    width: 346px;
}
.marquage {
    position: absolute;
    left: 6px;
}
.marquage i {
    color: rgba(var(--color-1),1);
    background: #ffffff;
    margin-bottom: 6px;
    padding: 5px;
    border-radius: 6px;
    border: solid 1px rgba(var(--color-1),.3);
    font-size: 1.3rem;
    display: block;
}
.marquage i.fav, .marquage i.add_fav_video:hover {
    color: rgba(var(--color-2),1);
    cursor: pointer;
}
.box-fichiers img {
    height: 190px;
    width: 138px;
    object-fit: contain;
    max-width: 138px;
    margin: 0 0 10px 0;
    padding: 6px;
    border-radius: 6px;
    border: solid 1px rgba(var(--color-1),.3);
    background-color: #ffffff;
}
.box-fichiers.small img {
    height: 120px;
    width: 87px;
    max-width: 87px;
}
.box-fichiers.big img {
    height: 354px;
    width: 250px;
    max-width: 250px;
}
.nom-cours {
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
}
.box-fichiers.small .nom-cours {
    font-size: 0.8rem;
}
.box-divider {font-size: .875rem; line-height: .875rem;}
@media (min-width:1920px) {
    .box-divider {display: none;}
    #barre-filtre .col-xl-12.extend-xl-7 {flex: 0 0 58.333333%; max-width: 58.333333%;}
    #barre-filtre .col-xl-12.extend-xl-5 {flex: 0 0 41.666667%; max-width: 41.666667%;}
    #barre-filtre .col-xl-12.extend-xl-6 {flex: 0 0 50%; max-width: 50%;}
    #barre-filtre .col-xl-12.extend-xl-6 {flex: 0 0 50%; max-width: 50%;}
    #progression .hack-xl-3 { max-width: 50%; flex: 0 0 50%; }
    #uexx .col-12.hack-xl-8 { max-width: 66.66%; flex: 0 0 66.66%; }
    #uexx .col-12.hack-xl-4 { max-width: 33.33%; flex: 0 0 33.33%; }
    #uexx .mt-4.mt-xl-4 {margin-top: 0 !important;}
}
.box-e-learning {
    position: relative;
    margin: 16px;
    padding: 16px;
    text-align: center;
    border-radius: 20px;
    border: solid 1px rgba(var(--color-1),.3);
    box-sizing: border-box;
    width: 240px;
    background-color: rgba(var(--color-2),.05);
}
.titre-e-learning {
    padding: 6px 12px;
    color: rgba(255,255,255,.95);
    background-color: rgba(var(--color-1),1);
    border-radius: 8px 8px 0 0;
    font-size: 1.25rem;
    font-weight: bold;
}
.sous-titre {
    color: #989ea4;
    font-size: 15px;
}
.box-e-learning img {
    max-width: 164px;
    margin: 0 0 10px 0;
    padding: 6px;
}
#Tags-1-2 .form-group {margin-bottom: 0;}
#Tags-1-2 input::placeholder {font-size: 13px;}

/* ===============================================================
============================== COURS ==============================
*/
@media (min-width:1920px) {
    #cours .col-xl-12.hack-xl-12 { max-width: 75%; }
    #cours .col-xl-6.hack-xl-6 { max-width: 25%; }
    /*#cours .order-2 {order: 3;}
    #cours .order-3 {order: 2;}*/
}
@media (min-width:2560px) {  #cours .col-xl-12.extend-xl-12 {max-width: 50%;}  }
.reponse {
    border-radius: 8px;
    border: solid 1px rgba(0,0,0,.1);
    padding: 16px;
    background-color: rgba(var(--color-2),.06);
}
.elearning-etud, .elearning-prepa {
    font-weight: 600;
    padding: 8px 0;
    display: flex;
    align-items: center;
    width: 100%;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, border-radius .3s ease-in-out;
    border: solid 1px rgba(var(--color-2),.6);
    border-radius: 8px;
    background-color: #ffffff;
}
.elearning-etud i, .elearning-prepa i {
    color: rgba(255,255,255,.95);
    padding-top: 8px;
    font-size: 1.35rem;
    text-align: center;
    height: 40px;
    width: 40px;
    transition: background-color .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
    background-color: rgba(var(--color-2),1);
    border: solid 1px rgba(var(--color-2),1);
    border-radius: 50%;
}
.elearning-etud:hover, .elearning-prepa:hover {
    border-radius: 60px;
    border-color: rgba(var(--color-1),.16);
    background-color: rgba(var(--color-1),.08);
}
.elearning-etud:hover i, .elearning-prepa:hover i {
    color: rgba(var(--color-2),1);
    border-color: rgba(var(--color-1),.24);
    background-color: #ffffff;
}
.date, .prof, .sup_question_forum {
    font-size: 12px;
    padding: 2px 12px;
    display: inline-block;
    border-radius: 40px;
    margin-bottom: 12px;
}
.date {
    margin-right: 1rem;
    color: #989ea4;
    background-color: #ffffff;
    border: solid 1px rgba(var(--color-2),.3);
}
.prof {
    float: right;
    font-weight: 600;
    color: rgba(255,255,255,.95);
    background-color: rgba(var(--color-2),1);
    border: solid 1px rgba(var(--color-2),1);
}
.sup_question_forum, .sup_question_forum:hover {
    float: right;
    font-weight: 600;
    color: rgba(255,255,255,.95);
    background-color: #f00;
    border: solid 1px #f00;
    cursor: pointer;
    text-decoration: none;
}
.prof i, .sup_question_forum i {color: rgba(255,255,255,.95);}




/* ===============================================================
============================== AUTRE ==============================
*/

@media (min-width:1920px) {
    #forum .formulaire.col-xl-12.hack-xl-12 { max-width: 25%; }
    #forum .questions.col-xl-12.hack-xl-12 { max-width: 75%; }
}

#forum .reponse img {
    max-width: 80% !important;
    height: auto !important;
}

.install_app_banner {
	display: block;
	position: fixed;
	width: 100%;
	padding: 10px;
	bottom: 0;
	text-align: center;
	background-color: #1ABB9C;
	color: #fff;
	z-index: 99999;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
}

.ios-safari-prompt, .ios-nosafari-prompt {
    background-color: #3B86C4;
	display: none;
	padding: 5px 5px 0px 5px;
	text-decoration: none;
	font-size: 14px;
	font-family: Arial, "sans-serif";
	color: #FFF;
	position: fixed;
	margin: 0 auto 1rem;
	left: 1rem;
	right: 1rem;
	bottom: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.59); 
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.59);
    z-index: 999999;
}
.ios-safari-prompt:after {
	content:'';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto 0 auto;
	width: 0;
	height: 0;
	border-top: 15px solid #3B86C4;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	}

@media (min-width:650px) {
        .install_app_banner, .ios-safari-prompt, .ios-nosafari-prompt {
            display: none !important;
        }
    }

.main-footer {
        box-shadow: 0 0 15px rgba(0,0,0,.08);
        border: 1px solid #cdd2d6;
        background-color: #ffffff;
        border-radius: 8px;
        padding: 15px;
        color: #444;
        margin-bottom: 10px;
      }

.amsify-suggestags-input-area {
    padding: .375rem .4rem !important;
    border-radius: 25px !important;
}

.amsify-select-tag, .amsify-suggestags-input {
    font-size: 14px;
}

.badge {
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
}

.photo_utilisateur {
	width: 125px;
    height: 125px;
    background-position: center center;
    background-size: cover;
    border-radius: 75px;
    float: left;
    margin-right: 15px;
}

.photo_utilisateur_top {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    margin-top: 0px;
    border-radius: 50% !important;
}

.no_photo_utilisateur_top {
    --fa-primary-color: #ffffff;
    --fa-primary-opacity: 1.0;
    --fa-secondary-color: rgba(var(--color-2),1);
    --fa-secondary-opacity: 1.0;
}

.checkbox-priorites {
    margin-right: 10px;
    transform: scale(1.2);
}

.checkbox-priorites:hover, #to-do-list i:hover {
    cursor: pointer;
}

.muted {
    color: #999;
    font-style: italic;
}

.mon-compte .dropdown-toggle::after {
    display: none;
    content: "";
}

.mon-compte .badge {
    font-size:14px;
    padding:5px 8px 6px 8px;
    margin-left: 0px;
    margin-top: 5px;
    border-radius:15px;
}

.mon-compte .dropdown-menu {
    margin-top:6px;
}

.mon-compte .fa-user {
    color: #FFF;
    margin-left: 4px;
    margin-right: 4px;
}

.onglet_ajout_calendrier {
    float:right;
    color: #fff;
    font-weight: normal;
}

.onglet_ajout_calendrier:hover {
    text-decoration: none;
    color: #fff;
}

.onglet_ajout_calendrier i {
    color: #fff;
}




/********* MENU ACCORDEON **********/

    .bootstrap-vertical-nav {
        margin-bottom: 15px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        border-radius : 5px;
    } 
    
    .bootstrap-vertical-nav #second_nav ul li:last-child {
        border-bottom-left-radius : 5px;
        border-bottom-right-radius : 5px;
    }
        
    .bootstrap-vertical-nav .titre_second_nav, .box-forum_recherche {
        background: #389af0;
        color: #fff;
        padding: .5rem 1rem;
        font-weight: bold;
        border-top-left-radius : 5px;
        border-top-right-radius : 5px;
    }
            
    .bootstrap-vertical-nav li.nav-item {
        background-color: #FFF;
        border-top: solid 1px #C2D2E0;
    }
    
    .bootstrap-vertical-nav li.nav-item.disabled, .bootstrap-vertical-nav li.nav-item.disabled .nav-link:hover {
        background-color: #D8D8D8 !important;
        border-left-color: #D8D8D8 !important;
        cursor: not-allowed;
        border-color: #C0C0C0;
    }
            
    .bootstrap-vertical-nav li.nav-item li.nav-item {
        padding-left: 20px;
        background: #FBFBFB;
    }
            
    .bootstrap-vertical-nav .flex-column > li > a.nav-link.active, .bootstrap-vertical-nav .flex-column > li > a.nav-link:hover {
          background: #FDFDFD;
          color: #444;
          border-top: 0;
          border-left-color: #389af0;
    }
            
    .bootstrap-vertical-nav .nav-link[data-toggle].collapsed:after, .bootstrap-vertical-nav .titre_second_nav[data-toggle].collapsed:after {
        font-family: "FontAwesome";
        content: " \f107";
        float: right;
        font-size: 22px;
        line-height: 22px;
    }
    .bootstrap-vertical-nav .nav-link[data-toggle]:not(.collapsed):after, .bootstrap-vertical-nav .titre_second_nav[data-toggle]:not(.collapsed):after {
        font-family: "FontAwesome";
        content: " \f105";
        float: right;
        font-size: 22px;
        line-height: 22px;
    }
            
    @media (min-width: 768px) {
        .bootstrap-vertical-nav #second_nav {
            display: block;
        }
    }

/********* FIN MENU ACCORDEON **********/


/********* BOX **********/
.small-box {
    border-radius: 10px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
}
.small-box>.inner {
    padding: 10px;
	min-height: 100px;
}
.small-box>.small-box-footer {
    position: relative;
    text-align: right;
    padding: 3px 10px;
    color: #fff;
    color: rgba(255, 255, 255, .8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, .1);
    text-decoration: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.small-box>.small-box-footer:hover {
    color: #fff;
    background: rgba(0, 0, 0, .15);
}
.small-box h3 {
    font-size: 19px;
    margin: 0 0 7px;
    padding: 0;
}
.poser_question_forum {
    display:block;
    position:absolute;
    bottom:0px;
    right:0px;
    z-index:666;
    color:#FFF;
    padding: 3px 8px;
    border-bottom-right-radius: 10px;
    font-weight: bold;
}
.poser_question_forum:hover {
    color:#FFF;
    background-color: #389af0;
}
.poser_question_forum:focus {
    color:#FFF;
}
.resize-h400 {
    height: 400px;
    resize: vertical;
    overflow: auto;
}
.small-box p {
    font-size: 15px;
	margin-bottom: 10px;
}
.small-box p>small {
    display: block;
    color: #f9f9f9;
    font-size: 13px;
    margin-top: 5px;
}
.small-box h3, .small-box p {
    z-index: 5;
}
.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 0;
    font-size: 72px;
    color: rgba(0, 0, 0, .15);
}
.small-box:hover {
    text-decoration: none;
    color: #f9f9f9;
}
.small-box:hover .icon {
    font-size: 78px;
}
@media (max-width:767px) {
    .small-box {
        text-align: center;
    }
    .small-box .icon {
        display: none;
    }
    .small-box p {
        font-size: 12px;
    }
}

/********* FIN BOX **********/


#content-box {
    display: flex;
    flex-direction: column;
}

@media (min-width:1200px) {
    #content-box {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }
}

@media (min-width:1920px) {
    #content-box {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }
}

@media (min-width:2560px) {
    #content-box {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }
}

@media (min-width:1200px) {
    #menu-box.condensed + #content-box {
        -ms-flex: calc(100% - 140px) !important;
        flex: calc(100% - 140px) !important;
        max-width: calc(100% - 140px) !important;
    }
}

.main-footer {
    margin-top: auto;
}


/********* MENU **********/

#toggle_nav {
    margin: 20px 0 20px 0;
    display: none;
    position: absolute;
    top: 15px;
    right: -6px;
    z-index: 9999;
    cursor: pointer;
}

@media (min-width:1200px) {

    #menu-box {
        /*transition: max-width 0.3s ease;*/
    }

    #menu-box.condensed {
        max-width: 140px;
    }

    #toggle_nav {
        display: block;
    }

    #toggle_nav .fa-angle-left {
        /*transition: transform 0.3s ease;*/
    }

    #menu-box.condensed #toggle_nav .fa-angle-left {
        transform: rotate(180deg);
        margin-top: 1px;
    }

    #menu-box.condensed #top-menu {
        padding: 0 4px;
    }

    #menu-box.condensed i {
        display: block;
        font-size: 20px;
    }

    #menu-box.condensed .nav-link {
        text-align: center;
        font-size: 10px;
        padding: 14px 2px !important;
    }

    #menu-box.condensed .dropdown-menu {
        font-size: 10px;
        left: -29px;
        text-align: center;
    }

    #menu-box .fa-circle {
        font-size: 24px;
        color: #fff;
    }

    #menu-box .fa-circle:before {
        text-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    }

    #menu-box .fa-angle-left {
        font-size: 17px;
        color: #464646;
        text-align: center;
    }

}

/********* FIN MENU **********/


/********* SELECT MATIERES **********/

.select-container {
  display: flex;
  align-items: center;
  background-color: rgba(var(--color-1),1);
  padding: 5px 5px;
  border-radius: 30px;
  color: white;
  font-family: sans-serif;
  width: fit-content;
  gap: 10px;
  float: left;
}

.select-container label {
  font-weight: bold;
  white-space: nowrap;
  margin: 0 0 0 10px;
}

.custom-select-wrapper {
  position: relative;
}

.custom-select-wrapper select {
  appearance: none; /* Retire la flèche native */
  border: none;
  border-radius: 20px;
  padding: 8px 40px 8px 12px;
  font-size: 14px;
  background-color: white;
  color: #333;
  cursor: pointer;
  min-width: 160px;
}

.custom-select-wrapper select:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none;
}

/* Flèche personnalisée */
.custom-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(var(--color-1),1);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  pointer-events: none;
}

.custom-arrow::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  width: 9px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media screen and (max-width: 600px) {
  .select-container {
    width: 100%;
  }

  .custom-select-wrapper {
    width: 100%;
  }

  .custom-select-wrapper select {
    width: 100%;
  }
}

/********* FIN SELECT MATIERE **********/

.tabs_types_docs .nav-tabs {
    border-bottom: 4px solid rgba(var(--color-1),1);
}

.tabs_types_docs .nav-tabs .nav-item {
    margin-right: 4px;
}

.tabs_types_docs .nav-tabs .nav-link {
    margin-bottom: 0px;
    font-weight: bold;
    border-radius: 20px 20px 0 0;
    background-color: #FFF;
    border-color: #FFF;
    color: #888;
    line-height: 24px;
}

.tabs_types_docs .nav-tabs .nav-link:hover {
    border-color: #FFF;
}

.tabs_types_docs .nav-tabs .nav-link.active {
  color: #FFF;
  background-color: rgba(var(--color-1),1);
  border-color: rgba(var(--color-1),1);
}

.tabs_types_docs .nav-tabs .nav-link span.docs_non_lus {
    display: inline-block;
    background-color: rgba(var(--color-1),1);
    color: #FFF;
    text-align: center;
    height: 22px;
    width: 22px;
    line-height: 22px;
    border-radius: 11px;
    font-size: 12px;
    margin-left: 5px;
}

.tabs_types_docs .nav-tabs .nav-link.active span.docs_non_lus {
    background-color: #FFF;
    color: rgba(var(--color-1),1);
}