@import url('https://fonts.googleapis.com/css2?family=Exo:wght@200;300;400;600');
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono&family=JetBrains+Mono&family=Overpass+Mono&family=Share+Tech+Mono&family=Space+Mono&family=Syne+Mono&display=swap');

body {
    padding-bottom: 150px;
}

body.login {
    background: url(../../public/img/museum-london.jpg) no-repeat center center fixed;
}
body.code {
    background: url('../../public/img/grande-porte.jpg') no-repeat center center fixed;
}
body.home {
    background: url('../../public/img/london-bridge.jpg') no-repeat center center fixed;
}

body.login,
body.code,
body.home {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

div.block-part:hover div.content-part {
    opacity: 0.7;
}

div.block-part:hover div.block-part-actions {
    display: block !important;
    border: solid 1px #efefef;
    z-index: 1000;
}

a.breadcrumb-link,
a.link-decoration-none {
    text-decoration: none;
}

a.breadcrumb-link:hover,
a.link-decoration-none:hover {
    text-decoration: underline;
}

/* Boutons pour les indices */
a.btn-indice, a.btn-reponse {
    display: inline-block;
    width: 70px !important;
    height: 70px !important;
    padding-top: 2px;
}

a.btn-indice, a.indice-style, a.next-button-style {
    background-color: rgb(124,231,73);
    background-image: linear-gradient(132deg, rgba(124,231,73,1) 10%, rgba(247,255,58,1) 45%, rgba(255,188,0,1) 81%);
    border: solid 2px #cdd521;
}

a.btn-reponse {
    background: rgb(234,0,0);
    background: linear-gradient(132deg, rgba(234,0,0,1) 0%, rgba(235,197,197,1) 46%, rgba(240,158,124,1) 91%);
    border: solid 2px #ff7c7c;
}

a.indice-style,
a.next-button-style{
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 25px;
    color: #666;
}
a.next-button-style{
    font-size: 1.4em;
    font-weight: 600;
}

a.btn-indice i.bi, a.btn-reponse i.bi {
    transition: all 0.2s;
    opacity: 0.7;
    font-size: 40px;
}

a.btn-rounded {
    display: inline-block;
    width: 54px !important;
    height: 54px !important;
    padding-top: 2px;
}



a.btn-indice:hover i.bi, a.btn-reponse:hover i.bi {
    opacity: 1;
}

div.div-response {
    background: rgb(134,240,84);
    background: linear-gradient(180deg, rgba(134,240,84,1) 3%, rgba(218,237,84,1) 61%, rgba(247,215,120,1) 100%);
}

.lettre, .lettre-geante {
    background-color: darkmagenta;
    color: white;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    font-size: 0.90em;
    box-shadow: 1px 1px 2px #999;
    text-align: center;


    /*font-family: 'Azeret Mono', monospace;*/
    /*font-family: 'JetBrains Mono', monospace;*/
    /*font-family: 'Overpass Mono', monospace;*/
    font-family: 'Share Tech Mono', monospace;
    /*font-family: 'Syne Mono', monospace;    font à l'écriture un peu farfelue*/
}

.lettre-geante {
    width: 62px;
    height: 62px;
    border-radius: 32px;
    font-size: 2.6em;
}

.fixed-centered {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    /*width: 94%;*/
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.alert-delayed {
    opacity: 0;
}

.fade.in {
    opacity: 1;
}

.user-disabled {
    text-decoration: line-through;
    color: #ccc !important;
}

.progression {
    width: 100%;
    background: lightgrey;
    border-radius: 15px;
    box-shadow: 1px 3px 4px #999;
}

.progression .progression-bar {
    background: rgb(22,147,22);
    background: linear-gradient(0deg, rgba(22,147,22,1) 1%, rgba(36,171,36,1) 46%, rgba(30,158,30,1) 98%);
    border-radius: 15px;
    font-size: 0.8em;
}

.i-short {
    display: inline-block;
    width: 12px;
}

.gradient-underline {
    padding-bottom: 16px;
    position: relative;
    text-decoration: none;
    display: inline-block;
}

.gradient-underline::after {
    /*    background: #f00;
        background: linear-gradient(to right, transparent 0%, #0f0 50%, transparent 100%);*/

    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(246,24,24,1) 18%, rgba(118,121,9,1) 35%, rgba(242,254,39,1) 54%, rgba(62,164,126,1) 66%, rgba(27,191,198,1) 85%, rgba(0,212,255,1) 100%);

    content: "";
    position: absolute;
    width: 90%;
    left: 5%;
    bottom: 0;
    height: 3px;
    border-radius: 20px;
}

.bg-underline {
    position: relative;
    z-index: 0;
}

.bg-underline::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 16px;
    width: 100%;
    height: 5px;
    background-color: #ffc107;
    border-radius: 5px;

    /* draw behind child elements */
    z-index: -1;
}

.bg-underline span {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #fff;
    color: #ffc107;
    text-shadow: 1px 1px 1px #999;
}

.flex-even {
    flex: 1;
}

a.underline-none {
    text-decoration: none;
}

a.underline-none:hover {
    opacity: 0.7;
}

a.link-top-left,
a.link-top-right,
.badge-top-right {
    position: absolute;
    top: 12px;
    padding-left: 1em;
    padding-right: 1em;
}

a.link-top-left {
    left: 12px;
}

a.link-top-right,
.badge-top-right {
    right: 12px;
}

label.label-niveau-colored {
    display: block;
    font-size: 0.8em;
    text-align: center;
    padding-top: 1px;
    padding-bottom: 3px;
    margin-bottom: 0px;
    border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: solid 1px #dee2e6;
    border-bottom: 0px;
}

textarea.ta-niveau {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

/* variante */
label.label-niveau-colored {
    font-size: 0.8em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0px;
    box-shadow: 1px 1px 6px #ddd;
}
textarea.ta-niveau {
    border-top: none;
    border-radius: 0px;
    box-shadow: 1px 1px 6px #ddd;
}
/* FIN - variante */

table.table-evaluation {
    border-collapse: separate;
    border-spacing: 5px;
    /*border: solid 1px #ddd;*/
    border: none;
}

table.table-evaluation thead tr {
}

table.table-evaluation thead tr th {
    border: solid 1px #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    /*box-shadow: inset 0px 0px 1px #777 !important;*/
    font-weight: 600;
}
table.table-evaluation thead tr th.first,
table.table-evaluation thead tr th.last {
    background-color: #000;
    border-color: #000;
    color: #fff;
    text-align: center;
}
table.table-evaluation tr {
    vertical-align: top;
}

table.table-evaluation tr td {
    border: solid 1px #eee;
    padding-top: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
}

table.table-evaluation tr td.case-niveau {
    padding-top: 20px;
    padding-bottom: 20px;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-help {
    cursor: help;
}

.selected {
    background-color: #ffffcc !important; /* jaune clair */
    border-width: 2px !important;
    border-color: #e6e600 !important;
}

table.table-evaluation th.first {
}
table.table-evaluation p {
    margin: 0px;
    padding: 0px;
    font-size: 0.8em !important;
}
table.table-evaluation td.first p {
    text-align: center;
}
table.table-evaluation p.p-commentaires {
    font-style: italic;
    margin-top: 2px !important;
    margin-bottom: 5px !important;
    text-align: center;
}
table.table-evaluation th.last {
}
table.table-evaluation td.last {
    text-align: center;
}

.border-left-none {
    border-left: none;
}
.border-right-none {
    border-right: none;
}

.pastille,
.pastille-soft,
.pastille-big {
    border: solid 1px;
    padding: 3px 12px;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 3px;
    font-size: 0.9em;
    cursor: default;
    font-weight: 600;
    text-shadow: 1px 1px 2px #888;
}

.pastille-soft {
    font-weight: normal;
    text-shadow: none;
}

.pastille-big {
    font-size: 1.1em;
    padding: 8px 12px !important;
    width: 60px;
}

.pastille.critere,
.pastille-soft.critere {
    border-style: dashed !important;
    border-width: 2px !important;
}

table.table-competences td.last {
    border-left: solid 3px #999 !important;
    border-right: solid 3px #999 !important;
}

table.table-competences td.last.bottom {
    border-bottom: solid 3px #999 !important;
}

table.table-competences th.last {
    border-left: solid 3px #999 !important;
    border-top: solid 3px #999 !important;
    border-right: solid 3px #999 !important;
    padding: 5px 15px !important;
}

i.sub-navbar-divider {
    font-size: 0.4em; 
    padding-bottom: 0.4em; 
    vertical-align: middle;    
    color: #666;
}

a.sub-navbar-link.active {
    font-weight: 600;
}

span.xs {
    font-size: 11px;
    font-style: italic;
    margin-left: -5px;
}