/*NOTE : This script is loaded by the last_version_file() php func.*/

:root {
    --colBlack: #4a4a4a;
    --colPink: #ffa1c0;
    --colPinkLight: #ffebf6;
    --colYellow: #fece74;
    --colYellowLight: #fff3dc;
    --colPurple: #6c5ed3;
    --colPurpleLight: #e7e2ff;
    --colCyan: #cef4fe;
    --colCyanLight: #e8f9ff;
    --colGreen: #7fb97a;
    --colGreenLight: #D7F4D4;
    --colGreenDark: #48923B;
    --colBlue: #3f8bff;
    --colOrange: #F87853;
    --colOrangeLight: #FF9667;
    --colOrangeVeryLight: #FFD7B5;
    --colGreyVeryLight: rgb(250, 250, 250);
    --colGreyLight: #CCC;
    --colGrey: #999;
    --colGreyDark: #777;
    --colHover: var(--colBlue);
    --shadowBig: 0px 2px 20px rgba(0, 0, 0, .2);
    --shadowSmall: 0px 2px 5px rgba(0, 0, 0, .1);
    --shadowVeryBig: 0px 20px 80px rgb(0 0 0 / 7%);
    /* Fonts*/
    --fontRegF: 'GoogleSans_reg', sans-serif;
    --fontBigF: 'Poppins-SemiBold', sans-serif;
    --fontBigW: 600;
    --fontBigLS: -0.03em;
    --fontLightF: 'Poppins-Light', sans-serif;
    --fontLightW: 300;
    --fontLightLS: -0.03em;
    /* var per object */
    --survBg: var(--colPinkLight);
    --survCol: var(--colPink);

    --qcmBg: var(--colYellowLight);
    --qcmCol: var(--colYellow);

    --courseBg: var(--colPurpleLight);
    --courseCol: var(--colPurple);

    --colInfoBg : var(--colGreyVeryLight);
    --colInfoCol : var(--colGrey);
/*
    --bgTypQ_buttons:#fadf98;
    --bgTypQ_inputStrict:#b3d350;
    --bgTypQ_inputSoft:#9afabd;
    --bgTypQ_longInput:#9ef4dc;
    --bgTypQ_dragdrop:#f39fef;
    --bgTypQ_imageBullets:#dd9ff4;
    --bgTypQ_linker:#f3a39f;
    --bgTypQ_gapsInTextInput:#c09ef3;

    --bgTypQ_buttons:#9ed6f4;
    --bgTypQ_inputStrict:#9fd6f3;
    --bgTypQ_inputSoft:#9feff3;
    --bgTypQ_longInput:#9ff5dc;
    --bgTypQ_dragdrop:#50a6d4;
    --bgTypQ_imageBullets:#5090d3;
    --bgTypQ_linker:#4eced4;
    --bgTypQ_gapsInTextInput:#4f77d4;
*/
    --bgTypQ_buttons:#e16e5a;
    --bgTypQ_inputStrict:#4fa9b3;
    --bgTypQ_inputSoft:#397685;
    --bgTypQ_longInput:#df4e78;
    --bgTypQ_dragdrop:#d94c4c;
    --bgTypQ_imageBullets:#94ae89;
    --bgTypQ_linker:#ffba4a;
    --bgTypQ_gapsInTextInput:#a186c4;


    --colGrad1_1:#fbed7f;
    --colGrad1_2:#c7f272;
    --colGrad1_3:#8bf1e0;
    --colGrad1_4:#8ad7f3;
    --colGrad1_5:#d4a9ff;
    --colGrad1_6:#fcaafc;

/*
    #4fa9b3 ----
    #ffba4a ----
    #e16e5a ----
    #94ae89 ----
    #a186c4 --
    #397685 ----
    #df4e78 ----
    #d94c4c ----
*/
}


/* ----------------------------------------- 
FONT
*/

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    line-height: initial;
    font-size: 15px;
    font-family: var(--fontRegF);
    /*background: url(../images/main/gone_7_light_blue.svg) no-repeat -700px -700px;
    background-size: 1200px;*/
    background-image: url(../images/main/gone_7_blue.svg), url(../images/main/gone_7_light_blue.svg);
    background-repeat: no-repeat;
    background-position: -160px -400px, calc(80% + 300px) calc(100%);
    background-size: 500px, 1000px;
}

body.preview_mode {
    background-image: none;
}



@font-face {
    font-family: GoogleSans_reg;
    src: url('fonts/GoogleSans-Regular.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Helvetica;
    /*src: url('fonts/Blogger Sans.otf');*/
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Roboto;
    src: url('fonts/Roboto-Medium.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Roboto_Light;
    src: url('fonts/Roboto-Light.woff');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('fonts/Poppins-SemiBold.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Poppins-SemiBold';
    src: url('fonts/Poppins-SemiBold.ttf');
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Poppins-Light;
    src: url('fonts/Poppins-Light.ttf');
    text-rendering: optimizeLegibility;
}


/*
@font-face {
    font-family: Roboto_Thin;
    src: url('fonts/Roboto-Thin.woff');
    text-rendering: optimizeLegibility;
}*/

.flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-end {
    justify-content: flex-end;
}

.flex-justify-sb {
    justify-content: space-between;
}

.long_text {
    font-size: 0.8em;
}

ul {
    list-style: none;
    padding: 0px;
}

a {
    cursor: pointer;
}

.big_line_height {
    line-height: 1.6em;
}

.dev {
    display: none;
}



/* img */
img.img_shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* To vertical align text we need a dom in display table and in it another dom in display: table-cell. The second one should be the text/html container */

.v_align_outer {
    display: table;
    width: 100%;
    height: 100%;
}

.v_align_inner {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}


/* usefull stuff */

.inline-block {
    display: inline-block;
}

.break-word {
    word-wrap: break-word;
}


/* OPACITY */

.opacity-0 {
    opacity: 0.0;
    filter: alpha(opacity=0);
}

.opacity-1 {
    opacity: 0.1;
    filter: alpha(opacity=10);
}

.opacity-2 {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.opacity-3 {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.opacity-4 {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.opacity-5 {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.opacity-6 {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.opacity-7 {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.opacity-8 {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.opacity-9 {
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.opacity-10 {
    opacity: 1;
    filter: alpha(opacity=100);
}


/* big, small */

.small {
    font-size: 0.8em;
}

.small1 {
    font-size: 0.8em;
}

.small2 {
    font-size: 0.6em;
}

.small3 {
    font-size: 0.4em;
}

.small4 {
    font-size: 0.2em;
}

.small5 {
    font-size: 0.1em;
}

.small6 {
    font-size: 0.05em;
}

.small_important {
    font-size: 0.8em !important;
}

.big {
    font-size: 1.2em;
}

.big1 {
    font-size: 1.2em;
}

.big2 {
    font-size: 1.4em;
}

.big3 {
    font-size: 1.8em;
}

.big4 {
    font-size: 2em;
}

.big5 {
    font-size: 3em;
}

.big6 {
    font-size: 5em;
}

.bold {
    font-weight: bold;
}

.margin-top-0 {
    margin-top: 0px;
}

.margin-top-05 {
    margin-top: 0.5em;
}

.margin-top-10 {
    margin-top: 1.0em;
}

.margin-top-15 {
    margin-top: 1.5em;
}

.margin-top-20 {
    margin-top: 2.0em;
}

.margin-top-25 {
    margin-top: 2.5em;
}

.margin-top-30 {
    margin-top: 3.0em;
}

.margin-top-50 {
    margin-top: 5.0em;
}

.margin-top-m05 {
    margin-top: -0.5em;
}

.margin-top-m10 {
    margin-top: -1.0em;
}

.margin-top-m15 {
    margin-top: -1.5em;
}

.margin-top-m20 {
    margin-top: -2.0em;
}

.margin-top-m25 {
    margin-top: -2.5em;
}

.margin-top-m30 {
    margin-top: -3.0em;
}

.margin-top-m50 {
    margin-top: -5.0em;
}

.margin-bottom-0 {
    margin-bottom: 0px;
}

.margin-bottom-05 {
    margin-bottom: 0.5em;
}

.margin-bottom-10 {
    margin-bottom: 1.0em;
}

.margin-bottom-15 {
    margin-bottom: 1.5em;
}

.margin-bottom-20 {
    margin-bottom: 2.0em;
}

.margin-bottom-25 {
    margin-bottom: 2.5em;
}

.margin-bottom-30 {
    margin-bottom: 3.0em;
}

.margin-bottom-50 {
    margin-bottom: 5em;
}


/* Text in <i class='fa */

i.fa .text {
    font-family: Poppins-Light;
}


/* h */

h2 {
    font-size: 40px;
    text-align: left;
    margin-bottom: 50px;
    line-height: 0.8em;
    font-size: 1.7em;
}

h2 small {
    font-weight: 300;
    font-size: 32px;
    letter-spacing: -0.05em;
    color: inherit;
}

h2 .xsmall {
    font-weight: 300;
    font-size: 24px;
    letter-spacing: -0.06em;
}

h3 {
    font-family: var(--fontBigF);
    font-weight: var(--fontBigW);
    letter-spacing: var(--fontBigLS);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fontLightF);
}

a:hover,
a:focus {
    color: var(--colBlue);
}


/* combo */

option.default_option {
    color: var(--colGrey);
}

option {
    font-size: 1.2em;
    padding: 2px;
    color: #666;
}

option:nth-child(even) {
    background: #EEE
}

option:hover {}

select.small,
input.small {
    height: 25px;
}

select.vertical-center {
    margin-top: -4px;
}


/* .parsley-error */

.parsley_error_added {
    background: #FFD3C3 !important;
}

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.parsley-errors-list {
    margin: 2px 0 3px;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
    clear: both;
}


/* ico bg */

i.bloc_bg_ico {
    position: absolute;
    top: -70px;
    left: -70px;
    font-size: 16em;
}

.bloc_bg_outer {
    position: relative;
    overflow: hidden;
}

/* Fontawesome as Bg */
.fabg{
    position:relative;
    overflow: hidden;
}
.fabg *{/* needed to avoid the before to be upon the content */
    position:relative;
}
.fabg:before {
    /*content: "\25AE";*//*   this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    right: 0px;
    position: absolute;
    top: -14px;
    font-size: 7em;
    opacity: 0.2;
    
}
.fabg.bad:before{
    content: "\f00d";
    color: var(--colPink);
}
.fabg.good:before{
    content: "\f00c";
    color:var(--colGreen);
}
.fabg.notAnswered:before{
    content: "\f192";
    color:var(--colGrey);
    font-size: 6em;
    top: -4px;
}
.fabg.info:before{
    content: "\f05a";
    color:var(--colGreen);
}

/* transition */
.trans{
    transition: all 0.1s linear;
}


/* Button */

.pointer {
    cursor: pointer;
}

.ico_btn {
    cursor: pointer;
    color: #AAA;
    opacity: 1;
    filter: alpha(opacity100);
}

.ico_btn:hover {
    color: var(--colHover);
}


.btn-link {
    color: var(--colGrey);
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: none;
    color: var(--colHover);
}

.ico_btn_alt,
.btn_link_alt {
    color: var(--colHover);
}

.ico_btn_alt:hover,
.btn_link_alt:hover {
    color: #337ab7;
}

.ico_btn_forced {
    cursor: pointer;
    color: #CCC !important;
}

.ico_btn_forced:hover {
    color: var(--colHover) !important;
}



.btn {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    transition: all 0.1s linear;
}

.btn-primary, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .btn-primary .open > .dropdown-toggle.btn-primary {
    background: var(--colHover);
    color: #FFF; 
    border: none;
}

.btn-primary:hover {
    background: var(--colCyanLight);
    color: var(--colBlue);
}


/*.btn-primary{background: none; border:none; color:var(--colGrey);}
*/

.btn-primary[disabled],
.btn-primary.disabled {
    background: var(--colGreyVeryLight);
    color: var(--colGrey);
}

.btn-primary-alt {
    background: var(--colCyanLight);
    color: var(--colBlue);
}

.btn-primary-alt:hover {
    
    background: var(--colHover);
    color: #FFF;
}


.btn-warning {
    background: var(--colOrange);
    color: #FFF;
    border: none;
}

.btn-warning:hover {
    background: var(--colOrangeLight);
    
}

.btn-warning-alt {
    background: var(--colYellowLight);
    color: var(--colOrange);
    border: none;
}

.btn-warning-alt:hover {
    background: var(--colOrange);
    color: #FFF;
    
    
}

.btn-link-simple {
    padding: 0px;
}

.popoverBtn {
    cursor: pointer;
}

.input-group.input_group_rounded .form-control:first-child {
    -webkit-border-radius: 20px 0 0 20px;
    border-radius: 20px 0 0 20px;
}

.input-group.input_group_rounded .input-group-btn .btn {
    -webkit-border-radius: 0 20px 20px 0 !important;
    border-radius: 0 20px 20px 0 !important;
}

.alert-info {
    color: var(--colInfoCol);
    background-color: var(--colInfoBg);
    border: none;
    line-height: 1.6em;
    position: relative;
    overflow:hidden;
    padding-left: 60px;
}
.alert-info:before{
    content: "\f05a";
    color: var(--colInfoCol);
    font-family: FontAwesome;
    left: 4px;
    position: absolute;
    top: 16px;
    font-size: 3.7em;
    opacity: 0.1;
}



.custom-tabs-left > .nav-tabs {
    border-right: 1px solid #ddd;
}


/* bloc */


/*-----------------------------------*/

.bloc {
    padding: 2px;
    margin: 10px 0px 0;
}

.bloc_little {
    border-radius: 20px;
    padding: 10px 20px;
}

.inline_bloc {
    display: inline-block;
}


/* sweetAlert2 derogation */


/*-----------------------------------*/

.swal2-popup {
    font-size: initial !important;
}


/* Bootstrap add */

.alert-grey {
    color: #333;
    background-color: #EEE;
    border-color: #DDD;
}

.alert_small {
    padding: 5px;
    font-size: 0.9em;
}


/* bootstrap.css derogation */

.text-success {
    color: var(--colGreen);
}

.text-danger {
    color: #CE181A;
}

.text-warning {
    color: var(--colOrange);
}

.alert.alert-warning {
    background: var(--colYellowLight);
    color: var(--colOrange);
    border-color: none;
}

.label-success, .bg_success {
    background: #87E140;
}

.label-as-badge {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.label-default {
    background-color: #CCC;
}

label {
    font-family: var(--fontBigF);
}

em.info,
div.info {
    background: #4CC9EE;
    color: #fff;
    padding: 3px;
    font-weight: bold;
}

.bloc_grey {
    background: #F2F2F2;
    color: #666;
}


/* Because tinyMCE translate <i by <em (copy of themes/repute/css/main.css line 4384) */

.testimonial-fancy em.fa {
    position: absolute;
    top: -12px;
    font-size: 3em;
    color: #406da4;
    z-index: 1;
}

.testimonial-body p {
    font-size: 1.1em;
    color: #333;
}

.testimonial-fancy i,
.testimonial-fancy em.fa {
    font-size: 2em;
    top: 0px
}

.testimonial-bubble {
    padding: 30px;
    background: #EBEBFF;
}

.testimonial-bubble:after {
    border-color: #EBEBFF transparent;
}


/* for_fancy-style : For element to be close to the fancy styling */

label.for_fancy-style {
    font-size: 13px;
    font-family: "Open Sans", sans-serif;
}

.fancy-checkbox span.disabled {
    color: #CCC;
}

.fancy-checkbox input[type="checkbox"] + span:before{
    border-radius: 2px;
}

.switch-input{
    display: inline-block;
}
.switch-input i{
    text-align: initial;
}

.switch-input.disabled {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.switch-input i.switch_in_builder {
    right: auto;
    top: -1px;
}

.input_modern {
    border: none;
    border-bottom: solid 1px #DDD;
    max-width: 100%;
    min-height: 35px;
    box-shadow: none;
    -webkit-box-shadow: none;
    font-size: 1.2em;
}

h3 .input_modern {
    min-height: 40px;
    line-height: 1.3em;
}


/* page-content */

.page-content {
    position: relative;
}

.page-content p:first-child {
    margin: 0px;
}

.wrapper,
.navbar-default {
    background: none;
}

.navbar-collapse.collapse.in, .navbar-collapse.collapsing{
    background: #FFF;
    border-bottom: solid 1px #CCC;
}


/*#########################################
#       container for admin spaces
#########################################*/

.userSpace .container {
    width: 100% !important;
}

.userSpace h1 {
    display: none !important;
}

.userSpace {
    /* In userSpace the containers are 100% wide. So The 'gone' below the logo should always been at the same place, whatever the @mediaquery. */
    background-position: -160px -400px, calc(80% + 300px) 500px;
    /*
    background-image: url(../images/main/gone_7_blue.svg), url(../images/main/gone_7_light_blue.svg);
    background-repeat: no-repeat;
    background-position:-160px -400px, calc(80% + 300px) calc(100%);
    background-size: 500px, 1000px;
    */
}

.userSpace footer {
    display: none;
}


/* GAME PAGE SPECIAL */

.game_page #main_navbar {}

.game_page #main_navbar .topbar {
    float: right;
    margin-left: 20px;
}

.game_page img#imgLogo {
    top: 5px !important;
}

.game_page .page-content {
    margin-top: 0px;
}


/* Waiter */

.waiter_container {
    text-align: center;
}

.waiter {
    color: #CCC;
}


/* The button_for_display_navbar is controled by vpSite.js */

#button_for_display_navbar {
    font-size: 1.5em;
    background: #FFF;
    color: #53b2ee;
    border: none;
    float: right;
    margin-top: 6px;
    display: none;
    line-height: 0.7em;
    border-radius: 20px;
    width: 35px;
    padding: 0px;
    height: 35px;
}

.text-white-color h1,
.text-white-color h2,
.text-white-color h3 {
    color: #fff;
}

.page-header {
    padding: 0px;
    border-bottom: none;
    /*background-image: radial-gradient(#03c1f0, #304fa3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%, 1291px;
    background-attachment: fixed;
    background-blend-mode: normal;*/
}


/*#E3F7F7; <= for dev; #406DA4 <= for prod*/

.page-header.page_header_dark {
    padding: 0px;
    border-bottom: none;
    background-image: radial-gradient(#03c1f0, #304fa3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%, 1291px;
    background-attachment: fixed;
    background-blend-mode: normal;
}


/*#E3F7F7; <= for dev; #406DA4 <= for prod*/

.page-header.page_header_dark h1 {
    color: #FFFFFF;
}

.page-header h1 a {
    color: var(--colBlue);
}

h1 {
    font-family: var(--fontBigF);
    font-weight: var(--fontBigW);
    letter-spacing: var(--fontBigLS);
    margin-top: 60px;
    margin-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}


/*color:#FFFFFF;*/

h2 {
    font-family: var(--fontBigF);
    font-weight: var(--fontBigW);
    letter-spacing: var(--fontBigLS);
}

.panel {
    border: none;
    box-shadow: var(--shadowVeryBig);
}

.panel-heading h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.game_page h1 {
    margin: 2px 0px;
}

.navbar-default {
    border-bottom: none;
}


/* for the desired line to be under the header */

a.anchor {
    margin-bottom: 70px;
    display: block;
}


/* ----------------------------------- -----------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
*/


/* BG */

.bg_purple {
    background: var(--colPurpleLight);
}

.bg_green {
    background: var(--colGreenLight);
}

.bg_pink {
    background: var(--colPinkLight);
}

.bg_red {
    background: var(--colPinkLight);
}

.bg_blue {
    background: var(--colBlueLight);
}

.bg_orange {
    background: var(--colOrange);
}

.bg_white {
    background: #fff;
}

.color_purple {
    color: var(--colPurple)
}

.color_green {
    color: var(--colGreen);
}

.color_blue {
    color: var(--colBlue);
}

.color_orange {
    color: var(--colOrange);
}

.color_red {
    color: #C52D22
}

.color_yellow {
    color: var(--colYellow);
}

.text_outline_white {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.text_outline_black {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

a .fa.fa_btn {
    color: var(--colHover);
}

a .fa.fa_btn.alt_btn {
    color: #7A7E7A;
}

a .fa.fa_btn.alt_btn:hover {
    color: var(--colHover);
}

.ico_btn.onDark {
    color: #FFF;
}


/* DragDrop */


/*-----------------------------------*/

.dragItem {
    cursor: grab;
}

#content {
    margin-top: 0px;
}


/* NAV BAR */

#main_navbar {
    font-size: 1.1em;
    width: 100%;
    /*background-image: 
        radial-gradient(#03c1f0, #304fa3);
    background-repeat:  no-repeat;
    background-position:  center;
    background-size: 100%, 1291px;
    background-attachment: fixed;
    background-blend-mode: normal;*/
}

#main_navbar .topbar {
    float: right;
    margin-left: 30px;
}


/*webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.3);*/


/*box-shadow: 0px 2px 4px rgba(0,0,0,0.3); */

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--colHover);
}

.navbar-brand.navbar-logo-bigger img {
    width: 150px;
    top: 7px;
}

.navbar-fixed-top.shrink-active .navbar-brand img {
    width: 80px;
    top: -3px;
}

.navbar-fixed-top .navbar-nav {
    margin-right: 100px;
}


/* MENU */

.navbar-default .navbar-nav > li > a {
    font-family: Poppins-Light;
    font-weight: 150;
    letter-spacing: -0.05em;
    background: none;
    color: #999;
    text-rendering: geometricPrecision;
}



.navbar-default .navbar-nav .dropdown-toggle i {
    display: none;
    color: #fff;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background: #53b2ee;
    padding: 0 4px;
}

.navbar-default .navbar-nav {
    margin-right: 0px;
}


/* HOME */

#home_first_section {
    background: url(../images/main/home_header_bg.png) no-repeat 50% 100% #54b2ef;
    margin-bottom: 0px;
}

#home_first_section .row {
    padding: 30px 0px;
}

#home_first_section h1 {
    font-size: 2.3em;
}

#home_first_section h2 {
    font-family: Blogger_Sans_Light;
    font-size: 1.5em;
    margin-top: 40px;
}

#bandeau_beta {
    height: 44px;
    background: #79cb3e;
    color: #FFF;
    text-align: center;
    padding-top: 12px;
    font-weight: bold;
    font-size: 1.4em;
}

#video_container_in_home_big_bandeau {
    text-align: right;
}

.video_container{
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    display:flex;
    justify-content: center;
}
.video_container_inner{
    /*top: 240px;*/
    border-radius: 10px;
    
}

.video_container iframe{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}


/* height: 312px; */

#video_container_in_home_big_bandeau iframe {
    border: 2px solid #FFF;
}

.stat_big {
    text-align: center;
    margin: 30px 0px;
    margin-bottom: 20px;
}

.stat_big .num {
    font-size: 3em;
    font-family: Roboto;
}

.full-width-section {
    padding: 0px;
}

.blocs_3_section {
    padding: 30px 0;
}

.popover {
    max-width: 500px;
    background: #FFF;
    color: #333;
    border-radius: 2px;
    width: max-content;
}

.popover.top > .arrow:after {
    border-top-color: #FFF;
}

.popover.right {
    margin-left: 30px;
}

.popover-title {
    background-color: #FFF;
}

#login_win_outer {
    width: 250px;
}

.boxed-content.left-aligned i {
    font-size: 3em;
}

#cb_keep_login {
    max-width: 100px;
}

.wrapper > footer, footer{
    position: relative;
    background: #30374e;
    padding-top: 80px;
    padding-bottom: 40px;
}

footer h2 {
    color: #ffffff;
}

.footer-nav > li {
    display: inline-block;
    margin-left: 8px;
    padding-right: 8px;
    border-right: solid 1px #FFF;
}

.footer-nav > li:last-child {
    border: none;
}

.footer-nav > li > a {
    color: #FFF;
}

.logoFooter {
    /*mix-blend-mode: luminosity;*/
    margin-top: 20px;
    margin-bottom: 20px;
}

.logoFooter{
    width: 300px;
    
}

#logo_site_footer{
    width:200px;
}
#logoFooter_container{
    display: flex;
    margin-bottom:20px;
}
#logoFooter_container .logoFooter{
    width:450px;
    margin:auto;
}

.logo_jnc{
    width: 150px;
    margin-left: 10px;
}

.copyright {
    background: none;
    color: #fff;
}


/* carousel home */

#carousel_testimonials {
    padding: 40px;
    height: 450px;
}

#carousel_testimonials .carousel-inner {}


/* Login menu */

#user_menu.dropdown-menu {
    left: -142px
}

#login_form_bloc .dropdown-menu li a {
    font-size: 1.5em;
}


/* subscribe form */

#user_form {
    float: none;
    margin: auto;
}

#bloc_unsuscribe {
    float: none;
    margin: auto;
    margin-top: 30px;
}

#captcha_img {
    border: solid 1px #333;
}

#form_user .bloc_button {
    text-align: center;
}

#bloc_unsuscribe .bloc_button {
    text-align: center;
}

#bloc_unsuscribe {
    padding: 20px 0;
}

.ulCbMatieres li {
    float: left;
    width: 49%;
}


/* FORM CSS (subscribe form)*/

.tfAlert {
    background: #FFDBEB;
    border: solid 1px #FF9EA9;
    color: #C1201E;
}

.tfGood {
    background: #C9FFC5;
    border: solid 1px #38B332;
    color: #2B862C;
}

.tfInfo {
    background: #B9E0FF;
    color: #375699;
}

.vpAlert {
    color: #993333;
}

.vpGood {
    color: #339933;
}

.note {
    color: var(--colGrey);
}

.input-group[class*="col-"].float_left {
    float: left;
}


/* Home content */

.ul_buttons_class_home_page li {
    display: inline-block;
    margin: 3px;
}

.ul_buttons_class_home_page li a {
    font-size: 1.5em;
}

.row_i_am h2 {
    text-align: center;
}

.row_i_am h2 .small2 {
    font-family: Poppins-Light;
}

.row_i_am .ico_bloc {
    width: 10px;
    font-size: 0.5em;
    float: left;
}

.row_i_am p {
    text-align: justify;
}

.row_i_am p.bold {
    font-weight: bold;
}

.row_i_am .col-md-4 {
    padding: 0 40px;
}

.btn_with_big_icon {
    padding: 0px 12px 0px 20px;
    display: block;
    height: 40px;
}

.btn_with_big_icon i {
    float: right;
    margin-right: -8px;
    font-size: 3em;
    margin-top: 4px;
    background: none !important;
}

.btn_with_big_icon a i.fa,
.btn_with_big_icon i.fa {
    background: #fff !important;
    padding: 3px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    font-size: 1.8em;
    width: 30px;
    height: 30px;
    line-height: 1.05em;
}

.btn_with_big_icon label {
    float: center;
    font-size: 1.3em;
    margin-top: 8px;
}

label.two_lines {
    line-height: 1em;
    margin-top: 1px;
}

label .small {
    font-family: Poppins-Light;
}

/*#########################################
#       student code bloc
#########################################*/

.childCodeCont {
    width: 100%;
    display: flex;
    justify-content: center;
}

.childCodeBlock {
    width: 310px;
    height: 100%;
    color: #30374e;
    border-radius: 50px;
    /*border-radius: 10px 10px 30px 30px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fccd1a;
    padding: 4px 0 3px;
    
}
.childCodeBlock .btn{
    border-radius: 15px;
}
.childCodeCont p{
    margin-bottom: 5px;
}

.childCodeCont input{
    border:none;
    border-radius:15px;
    color:#502b22;
    margin-bottom: 5px;
    font-size:.8em;
    padding:5px 10px;
    width:100px;

}
.childCodeCont input::placeholder{
    color:#CCC;
}
.childCodeCont input:focus {
    outline: none !important;
}
.btn_codeGo{
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--color3);
    color:#FFF;
    padding: 8px;
    border-radius: 20px;
    margin-left:10px;
    margin-bottom:10px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#form_class_code {
    height: 83px;
    padding: 15px;
    padding-top: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    font-size: 1.1em;
}

#form_class_code label {
    color: #e09602
}

#form_class_code input {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: none;
}

#form_class_code input {
    width: 146px;
    height: 28px;
    background-color: #faefd9;
    border-radius: 5px;
    margin-right: 10px;
    margin-top: 6px;
}

#form_class_code .input-group-btn:last-child > .btn {
    border-radius: 12px;
    border: 2px #e09602 solid;
    color: #e09602 !important;
    font-size: 26px;
    font-weight: 500;
    padding: 6px;
    background: none;
    line-height: 0.7em;
}

#form_class_code .input-group-btn:last-child > .btn:hover {
    background: #3C6699;
}

/* in the popup login_win_outer : */
#login_win_outer form.form_class_code {
    text-align: center;
}


/* Section 3 */

#section_3 {
    background: #53B2EE;
    color: #FFF;
}


/* #fbf4fa;} */

#section_3 h2 {
    color: #FFF;
}

#section_3 #news,
#section_3 #news h2 {
    color: #333;
    margin-top: 30px;
}

#section_1 {
    background: #0891e6;
    background-image: none;
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: 100% auto;
    background-image: linear-gradient(to right, #0891e6 0%, #1ab9cb 100%);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
    padding: 0px;
}

#section_1_bg_svg {
    background-image: url("../images/main/biseau_white.svg");
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: no-repeat;
    background-size: 100%;
}

#section_1_bg_svg_bottom {
    background-image: url("../images/main/biseau_white_bottom.svg");
    background-position-x: 0%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 240px 0;
}

#middle_bg {
    background: url(../images/main/certificate.svg) no-repeat 130% 50%;
    background-size: 70%;
}

#section_3 {
    background: #ff683e;
    background-image: none;
    background-repeat: repeat;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
    background-image: url("../images/main/bg_waves_01.svg"), linear-gradient(to right, #ff683e 0%, #fe9124 100%);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 0px;
    color: white;
}

#section_3_bg_svg {
    background-image: url("../images/main/wave_white.svg");
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: no-repeat;
    background-size: 100%;
}

#section_3_bg_svg_bottom {
    background-image: url("../images/main/wave_white_bottom.svg");
    background-position-x: 0%;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 240px 0;
}


/* news */

#news {
    background: #FFF;
    padding: 12px 0px 18px 18px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
}

#news .content {
    max-height: 500px;
    overflow-y: auto;
    padding: 5px;
}

#news .unit {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: solid 1px #CCC;
}

#news h3 {
    font-family: Poppins-Light;
    font-size: 1.8em;
}

#news .date {
    font-size: 0.8em;
    color: var(--colGrey);
}

#news .author {
    font-family: Roboto;
    font-size: 1.1em;
    font-weight: bold;
}

#news_page_content {
    margin-top: 30px;
}


/* class='video_iframe' */

.video_iframe_container iframe {
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    border: solid 1px #666;
}


/*Sociable*/

#sociable_bloc {
    margin-bottom: 20px;
}

#sociable_bloc .sociable_bloc_inner {
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding: 25px 0 10px 0;
    background: #D6ECFA;
    color: #3F9BD5;
}

#welcome_bloc {
    margin-bottom: 20px;
}

#welcome_bloc_inner {
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding: 25px 20px 10px 20px;
    background: #D6ECFA;
    color: #3F9BD5;
}


/* GAME THUMBS */

.gameThumb {
    margin-bottom: 10px;
}

.gameThumb .gameThumbInner {
    position: relative;
    height: 2.5em;
    width: 30em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

.gameThumb .matiere_ico_bloc {
    position: absolute;
    font-size: 2.3em;
    left: 0.14em;
    top: 0.13em;
    width: 0.85em;
    height: 0.85em;
    border-radius: 3em;
}

.gameThumb .matiere_ico_bloc .content {
    font-size: 0.4em;
    color: #FFF;
    line-height: 2em;
    text-align: center;
    letter-spacing: -0.06em;
}

.gameThumb .matiere_ico_bloc .content .fa {
    font-size: 1.6em;
    color: #FFF;
    padding-top: 0.1em;
}

.gameThumb .gameThumbImageInDescription {
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.gameThumb .gameThumbImageInDescription img {
    max-width: 90%;
}

.gameBigThumbImg {
    cursor: pointer;
}


/*  position:absolute; font-size:2.3em; left: 4px; top:1px;}
*/

.gameThumb .textInThumb {
    position: absolute;
    left: 1.9em;
    margin-top: 0.4em;
    font-size: 1.4em;
    font-family: Roboto;
    white-space: nowrap;
    letter-spacing: -0.04em;
}

.gameThumb .info_ico_bloc {
    float: right;
    margin-right: 0.2em;
    font-size: 1.9em;
    margin-top: 0.15em;
}

.gameThumb a:hover {
    text-decoration: underline;
}


/* webkit derogation
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .gameThumb .matiere_ico_bloc{ top:-1px;}
    .gameThumb .info_ico_bloc{margin-top: 0.07em;}
}
*/


/* IE derogation */


/*.ie .gameThumb .matiere_ico_bloc{ top:-7px;}*/

.ie .gameThumb .textInThumb {
    margin-top: -0.02em
}

.ie .gameThumb .info_ico_bloc {
    margin-top: -0.1em;
}

.gameThumb .gameDescription .gameBaseline {
    color: #999;
    font-weight: bold;
    white-space: normal;
}

.gameThumb .gameDescription {
    width: 25em;
    margin-left: 2.5em;
    padding: 10px 20px;
    line-height: 1.2em;
    color: #666;
    font-size: 1em;
    display: none;
    text-align: justify;
    background: #fff;
    border: solid 3px #EEE;
    border-top: none;
    -webkit-border-radius: 0 0px 6px 6px;
    border-radius: 0 0px 6px 6px;
}

.gameThumb .badgeContainer {
    position: absolute;
    top: 0.5em;
    right: -3.2em;
    text-align: center;
    width: 3em;
}

.gameThumb .badge {
    background: #CCC;
}

.smallGameName {
    letter-spacing: -0.075em;
}


/* Game list */

.game_list {
    list-style: none;
}

.game_list .gameThumb {
    margin-bottom: 10px;
}


/*game_list_per_matiere*/

.sousMatiereMenu li {
    font-size: 1.3em;
    font-family: "Roboto Condensed";
}


/*display:inline-block; margin:0 25px;*/

.sousMatiereMenu li:first-child {}

.sousMatiereMenu li a:hover {
    color: #337ab7;
}

.game_list_per_matiere {
    font-size: 0.98em;
}

.gameThumbListLittle {
    font-size: 0.7em;
}

.gameListAccordion li {
    display: none;
}

.gameListAccordion li.matiere_name {
    display: block;
    cursor: pointer;
}


/* MATIERES COLOR CODE */

.bg.promote {
    background: #FF713A;
}

.color.promote {
    color: #FF713A;
}


/* Default thumbs colors */


/*-----------------------------------*/

.gameThumb .bg {
    background: #5369ee;
}

.gameThumb .bg.light {
    background: #e5e9fc;
}

.gameThumb .fa,
.gameThumb .color {
    color: #5369ee;
}

.gameThumb .color.dark {
    color: #2c356f;
}

.gameThumb .color.grey {
    color: #8e98d2;
}


/* Default matiere color */


/*-----------------------------------*/

.sousMatiereMenu li a,
.color.matiere {
    color: #5369ee;
}


/* for not detailled matieres */

.bg {
    background: #CCC;
}

.bg.fra {
    background: #ff5c5c;
}

.bg.fra.light {
    background: #ffe7e7;
}

.fa.fra,
.color.fra {
    color: #ff5c5c;
}

.color.dark.fra {
    color: #6e3434;
}

.color.grey.fra {
    color: #b58484;
}

.bg.math {
    background: #f57b50;
}

.bg.math.light {
    background: #feebe5;
}

.fa.math,
.color.math {
    color: #f57b50;
}

.color.dark.math {
    color: #a53b15;
}

.color.grey.math {
    color: #cb8267;
}

.bg.histgeo {
    background: #f3aa2a;
}

.bg.histgeo.light {
    background: #fdf2df;
}

.fa.histgeo,
.color.histgeo {
    color: #f3aa2a;
}

.color.dark.histgeo {
    color: #765432;
}

.color.grey.histgeo {
    color: #cea071;
}

.bg.phychim {
    background: #20b755;
}

.bg.phychim.light {
    background: #def4e6;
}

.fa.phychim,
.color.phychim {
    color: #20b755;
}

.color.dark.phychim {
    color: #184e2b;
}

.color.grey.phychim {
    color: #6bbb87;
}

.bg.eng {
    background: #4680e1;
}

.bg.eng.light {
    background: #e3ecfb;
}

.fa.eng,
.color.eng {
    color: #4680e1;
}

.color.dark.eng {
    color: #16356a;
}

.color.grey.eng {
    color: #8ba6d3;
}

.bg.ita {
    background: #665ed9;
}

.bg.ita.light {
    background: #e8e7f9;
}

.fa.ita,
.color.ita {
    color: #665ed9;
}

.color.dark.ita {
    color: #322e73;
}

.color.grey.ita {
    color: #9896c2;
}

.bg.ger {
    background: #5656dd;
}

.bg.ger.light {
    background: #e6e6fa;
}

.fa.ger,
.color.ger {
    color: #5656dd;
}

.color.dark.ger {
    color: #322e73;
}

.color.grey.ger {
    color: #9896c2;
}

.bg.spa {
    background: #5369ee;
}

.bg.spa.light {
    background: #e5e9fc;
}

.fa.spa,
.color.spa {
    color: #5369ee;
}

.color.dark.spa {
    color: #2c356f;
}

.color.grey.spa {
    color: #8e98d2;
}

.bg.svt {
    background: #85c92c;
}

.bg.svt.light {
    background: #edf7e0;
}

.fa.svt,
.color.svt {
    color: #85c92c;
}

.color.dark.svt {
    color: #3b4f21;
}

.color.grey.svt {
    color: #9cae84;
}

.bg.tech {
    background: #1aaba6;
}

.bg.tech.light {
    background: #ddf2f2;
}

.fa.tech,
.color.tech {
    color: #1aaba6;
}

.color.dark.tech {
    color: #1b4241;
}

.color.grey.tech {
    color: #81a9a8;
}

.bg.histArt {
    background: #bdc813;
}

.bg.histArt.light {
    background: #eef1c4;
}

.fa.histArt,
.color.histArt {
    color: #bdc813;
}

.color.dark.histArt {
    color: #494c19;
}

.color.grey.histArt {
    color: #b3b771;
}

.bg.philo {
    background: #d74770;
}

.bg.philo.light {
    background: #f5d1db;
}

.fa.philo,
.color.philo {
    color: #d74770;
}

.color.dark.philo {
    color: #743345;
}

.color.grey.philo {
    color: #b99ca4;
}

.bg.footam {
    background: #5369ee;
}

.bg.footam.light {
    background: #e5e9fc;
}

.fa.footam,
.color.footam {
    color: #5369ee;
}

.color.dark.footam {
    color: #2c356f;
}

.color.grey.footam {
    color: #8e98d2;
}

.border.white {
    border: solid 1px#FFF;
}


/* matiere_cell
 */

.matiere_cell {
    display: inline-block;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


/* Fontawesome add */

.fa-happybook:before {
    content: "\f23b";
}

.fa-fra:before {
    content: "\f23d";
}

.fa-math:before {
    content: "\f23c";
}

.fa-phychim:before {
    content: "\f23e";
}

.fa-hist:before {
    content: "\f23a";
}

.fa-geo:before {
    content: "\f500";
}

.fa-eng:before {
    content: "\f22f";
}


/* Modal */

.modal-content {
    border-radius: 6px;
    border: none;
    box-shadow: var(--shadowBig);
}

.modal-header {
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    /*background-image: radial-gradient(#03c1f0, #304fa3);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%, 1291px;
    background-attachment: fixed;
    background-blend-mode: normal;*/
}

.modal-header h2 {
    color: #000;
    font-size: 1.7em;
    text-align: center;
    margin: 20px 0 0 0;
}

.modal-header .close {
    color: var(--colGrey);
    opacity: 1;
    filter: alpha(opacity=100);
}

#modalWaiter .modal-body{
    display: flex;
    flex-direction: column;
    min-height: 200px;
    justify-content: center;
}


/* Popover */

.popover-title {
    font-weight: bold;
    text-align: center;
}


/* FORM GLOBAL */

.parsley-error {
    background: #FFD3C3;
}

.parsley-success {
    background: #CCFFC9;
}

.form-group label .note {
    margin-top: 10px;
    font-family: var(--fontLightF);
    font-weight: var(--fontLightW);
}


/* back_button_in_h1 */

.back_button_in_h1 {
    color: #FFF;
}


/* overlay */


/*-----------------------------------*/

.overlay {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black background with opacity */
    z-index: 12;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
}


/* COMMENTS */


/*-----------------------------------*/

#comments_container {}

.comment_frame {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin-bottom: 20px;
}


/*background:#3b8de1;*/

.comments_intro.alert {
    color: #666;
    background: none;
    border: none;
}

.comment_unit {
    position: relative;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: none;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
}


/*.comment_unit:last-child{margin-bottom: 0px;}*/

.comment_unit .timeago {
    font-size: 0.7em;
    color: #666;
}

.comment_unit.reply {
    padding-left: 120px;
}

.comment_unit .admins_comment {
    background-color: #FEE;
}

.comment_unit .admins_comment::after {
    border-color: #FEE transparent;
}

.comment_title {
    padding-left: 0px;
    text-align: center;
}

.comment_title .avatar {
    margin: auto;
}

.comment_content_col {
    padding-right: 0px;
}

.comment_content {
    background: #EAF2F9;
    padding: 15px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


/*#D7F4FA*/

.comment_content::after {
    content: "";
    position: absolute;
    top: 10px;
    left: -5px;
    border-width: 20px 0 0 20px;
    border-style: solid;
    border-color: #EAF2F9 transparent;
}

.comment_content.current_user {
    background: #D8FF91 !important;
}

.comment_content.current_user::after {
    border-color: #D8FF91 transparent !important;
}

.comment_content p {
    overflow-x: hidden;
    margin: 0px;
    color: #666;
}

.comment_content {
    color: #666;
}

.comment_content p .quote {
    font-style: italic;
}

.comment_content blockquote {
    padding: 10px 20px;
    font-style: italic;
    font-size: 1em;
    border-left: solid 1px #7b7b7b;
}

.comment_unit .btn_vote_bloc {
    float: right;
    margin-top: 30px;
}

.comment_unit .btn_vote_down {
    margin-right: 5px;
    color: #FAA489;
}

.comment_unit .btn_vote_up {
    margin-right: 5px;
    color: #77F680;
}

.comment_unit .btn_reply {
    margin-right: 10px;
}

.reply_form_bloc .btn_close {
    display: inline-block;
    float: right;
}

.comments_nav {
    text-align: center;
    font-size: 1.5em;
}


/*.replies_not_displayed_content_result .fa-reply{display: none;}*/

.btn_replies_not_displayed {
    text-align: right;
}

#commments_archives_link {
    text-align: center;
}


/* HELP */

.textual_help {
    text-align: left;
    margin: 30px 0;
}


/* ADMIN TEACHER */


/*#########################################
#       mainClassTabContentResult
#########################################*/

.bigBloc {
    box-shadow: var(--shadowVeryBig);
    padding: 30px;
    border-radius: 10px;
    background: #FFF;
}




/*#########################################
#       tabClasses
#########################################*/

.nav-tabs h3 {
    color: var(--colGrey);
    font-weight: bold;
}

.nav-tabs .active h3 {
    color: #000;
}

#tabClasses {
    padding-right: 50px;
    border-bottom: none;
    margin-bottom: 30px;
}

#tabClasses li {
    float: right;
}

#tabClasses li a {
    padding: 3px 20px;
    border-radius: 10px;
    margin-right: 10px;
}

#tabClasses li.active a {}

#tabClasses li a h3 {
    margin: 5px 0px;
    font-family: var(--fontLightF);
    font-weight: var(--fontLightW);
}

#tabClasses li.active a h3 {
    font-family: var(--fontBigF);
    font-weight: var(--fontBigW);
}

#tabClasses li.active > a,
#tabClasses li.active > a:hover,
#tabClasses li.active > a:focus {
    cursor: default;
    background-color: var(--colPurple);
    border: none;
    border-bottom: inherit;
}

#tabClasses.nav-tabs .active h3 {
    color: #FFF;
}


#mainClassArchivedTitle{
    font-size: 3em;
    opacity: 0.2;
    font-family: var(--fontBigF);
}

/*#########################################
#       tabSubjects
#########################################*/

#tabSubjects {
    padding: 0 0 50px 0;
}

#tabSubjects li {
    text-align: center;
    padding: 7px;
}

.nav-tabs .active i {
    color: #333;
}

#tabSubjects i {}

#tabSubjects .text {
    display: none;
}

#tabSubjects li.active a {
    color: #FFF;
    background: var(--colOrange);
    border: none;
    border-radius: 10px;
}

#tabSubjects.custom-tabs-left > .nav-tabs a {
    border: none;
    padding: 10px;
    position: relative;
    display: inline;
    color: var(--colGrey);
}

#tabSubjects .fa.fa_btn {
    color: var(--colGrey);
}

#tabSubjects .active .fa.fa_btn,
#tabSubjects a:hover .fa.fa_btn {
    color: inherit;
}

#tabSubjects.custom-tabs-left > .nav-tabs .active a {}


/* To crush the repute custom-tabs-left rules */

#tabSubjects..custom-tabs-left > .nav-tabs > li a:hover {
    background: #eee;
}

@media (max-width: 992px) {
    #tabSubjects li {
        float: left;
    }
    #tabSubjects {
        padding: 5px 0;
        border-right: none;
    }
    .custom-tabs-left > .nav-tabs .active a {
        border: none;
    }
}


/* table.dataTable derogation */

table.dataTable thead th,
table.dataTable thead td,
table.dataTable.no-footer {
    border-bottom: solid 1px #DDD !important;
}

table.dataTable tbody td {
    padding: 15px 10px;
}

table.dataTable .table-condensed tbody th,
table.dataTable .table-condensed tbody td {
    padding: 5px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--colGreyVeryLight);
}

.table-hover > tbody > tr:hover {
    background-color: var(--colYellowLight);
}

.table th {
    font-size: 1.2em;
    color: var(--colGrey);
}

.table > thead > tr > th {
    line-height: 1em;
    font-family: var(--fontLightF);
}

.ta_table td,
.ta_table th {
    text-align: center;
}

.ta_table .tdName,
.ta_table .thName {
    text-align: left;
    /*min-width: 170px;*/
}

.ta_table .tdName .icoBloc {
    float: right;
}

.ta_table .tdMail {
    text-align: left;
}

.ta_table .tdCode,
.ta_table .thCode {
    width: 150px;
}

.popover_del_student_content {
    text-align: center;
}


/* students Panel */

#buttonClassModify {
    float: right;
    margin-top: 10px;
}

#tableStudents .tdIcoBloc {
    width: 50px;
}


/* whole_class panel */

.icoButtonModClassCode {
    color: #666;
}


/* gameChoise Panel */

#gamesChoiseListBloc .sous_matiere_title {
    margin-top: 20px;
    border-top: solid 1px #EEE;
    border-bottom: solid 1px #EEE;
}

.gameSortableList {
    background: #F6F6F9;
    padding: 10px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.gameSortableList li.gameThumbContainer {
    margin-bottom: 10px;
    cursor: pointer;
}


/*max-width: 80%;*/

#selectedGamesList {
    background: #fff;
}

#proposedGamesList .gameThumbs .textInThumb {
    background: #EEE;
}

#proposedGamesList li.note {
    font-size: 1.4em;
    color: #999;
    padding: 15px;
    padding-top: 30px;
}

#ul_games_promoted {
    border: dashed 2px #FF713A;
    background: #fff;
    padding: 5px;
    margin-top: 20px;
}

.gameThumbsListContainer {
    display: flex;
    flex-wrap: wrap;
}

.gameThumbsListContainer li {
    align-self: flex-start;
}

.gameThumbsListContainer .gameThumbContainerInner {
    display: inline-block;
    float: left;
}

.gameThumbsListContainer .gameThumbContainer .btnIcoBloc {
    display: inline-block;
    padding-top: 5px;
    margin-left: 5px;
    width: 46px;
}

.gameThumbsListContainer .gameThumbContainer .btnIcoBloc div {
    display: inline-block;
}

.game_promoted {
    border: dashed 2px #FF713A;
}

.gameThumbsListContainer.btnIcoBloc {}

.gameList h2 {
    margin-top: 20px;
    margin-bottom: 0px;
    /*background: #CCC;*/
    color: #FFF;
    padding: 2px 10px;
}

#class_tab_content .filtersContainer .fancy-checkbox {
    display: inline-block;
    ;
}

#class_tab_content .filtersContainer select {
    max-width: 100px;
}


/* accordion_game_list_per_class */

#accordion_game_list_per_class .gameThumbContainer {
    font-size: 0.9em;
}


/* resultPerGame Panel */

#combo_game_thumbs .dropdown-menu {
    width: 500px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

#combo_game_thumbs li li {
    padding: 5px 10px;
    font-size: 0.8em;
}

#combo_game_thumbs li li .qcmThumb {
    font-size: 1.2em;
}

#combo_game_thumbs li.gameThumbContainer {
    margin-bottom: 0;
    cursor: pointer;
}

#combo_game_thumbs li.gameThumbContainer:hover {
    background: var(--colHover);
}

#combo_game_thumb_active,
#combo_game_thumbs_button_container {
    position: inherit;
}

#ul_combo_game_thumbs_list.gameThumbListFromGameStudentPage {
    left: 50%;
}

#game_list_student_mode_intro h3 {}

#game_list_student_mode_intro p {
    color: var(--colGreyDark);
    font-family: var(--fontLightF);
}

#game_list_student_mode_container h3 {
    margin-bottom: 40px;
}

#game_list_student_mode_container .bigBloc h3 {
    margin-bottom: 70px;
}

#game_list_student_mode_container #ul_game_thumbs_list {
    padding-top: 30px;
}

#game_list_student_mode_container #ul_game_thumbs_list li {
    padding: 5px 0px;
    font-size: 0.8em;
}

#game_list_student_mode_container .gameList h2 {
    width: 100%;
    margin-left: 0px;
}

#game_list_student_mode_container .nav_tabs_bloc {
    margin-top: 30px;
}

#game_list_student_mode_container #tabClasses {
    padding-right: 0px;
}

#tableResultPerGame .ico_btn {
    float: right;
}

.popover_del_result_student_and_game_content {
    text-align: center;
}


/* Tournaments */

.no_tournament_container {
    margin-bottom: 30px;
}

.tournaments_container .displayedGameThumbContainer .gameThumb {
    font-size: 0.9em;
}

#tournament_creation_game_selected {
    font-size: 0.8em;
}

#buttonCreateTournament {
    margin-top: 16px;
}

.tournament_unit {
    margin-top: 30px;
}

.date_in_tournament.date_start {
    padding-top: 3px;
}

#buttonCreateTournamentOpenPopover {
    margin-top: 18px;
}


/* game preview page */

#game_preview_container {}


/*#game_preview_container .row{margin-bottom:30px;}*/

#game_details_container {
    margin-top: 50px;
}


/* Game Details table */

#questionsList {
    width: 100%;
}

#questionsList tr {
    border-bottom: solid 1px #CCC;
    padding: 5px;
}

#questionsList tr:first-child {
    border-top: solid 1px #CCC;
}

#questionsList tr.avoided {
    background: #EEE;
    color: #666;
}

#questionsList tr:hover {
    background: #FFF6D1;
}

#questionsList tr.avoided:hover {
    background: #EEE7C5;
}

#questionsList td {
    padding: 7px 5px;
}

#questionsList td.num {
    color: #CCC;
}


/* game student mode */

#game_student_mode_container .combo_game_thumbs {
    position: absolute;
    top: 3px;
    left: 100px;
}

h1 .student_combo {
    margin-top: -2px;
    float: right;
}

h1 .student_combo .form-control {
    font-size: 0.5em;
    display: inline-block;
    width: 80%;
}

.student_combo.init_display {
    position: absolute;
    top: 100px;
    left: 50%;
    z-index: 99;
    text-align: center;
    width: 824px;
    height: 520px;
    padding: 150px 250px;
    margin-left: -370px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

#ico_button_student_page {
    font-size: 0.6em;
    color: #4772C2;
    background: #FFF;
    padding: 4px;
    border-radius: 6px;
}


/*h3 .ico_button_student_page{color:inherit;}*/

#button_play_as_student_confirm {
    margin-top: 15px;
}

#game_outer_row {
    height: 600px;
}

h1 .text_h1 {
    float: left;
}

h1 #combo_game_thumbs {
    float: left;
}

#combo_game_thumbs_button_container i.fa-caret-down {
    color: #fff;
    margin-left: 15px;
    padding-top: 7px;
    line-height: 0em;
    font-size: 1.2em;
    height: 17px;
    overflow: hidden;
}

#combo_game_thumbs_button_container i.fa-caret-down div {
    margin-top: 0px;
    margin-left: 30px;
    font-family: Roboto;
    color: #ADE3FF;
}

#combo_game_thumbs_button_container.on_light_bg i {
    color: #333;
}

#combo_game_thumbs_button_container #button_launch_game {
    margin-left: 40px;
}

#button_display_hof {
    margin-top: 30px;
}

#hof_content_result {
    padding-top: 40px;
}


/* student_page */

.stars_stats_container .boxed-content {
    position: relative;
}

.stars_stats_container .big_star_bg {
    color: #FCE51F;
    font-size: 15em;
}

.stars_stats {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 100;
}

.stars_stats p {
    text-align: center;
    font-size: 2.5em;
    padding-top: 50px;
    color: #F48C29;
}

.stars_stats i {
    font-size: 4.5em;
    line-height: 0.5em;
}

.stars_stats .second_line {
    line-height: 0.7em;
}

.pie-chart .percent {
    font-size: 2em !important;
}

.nb_plays_stats i {
    font-size: 13em;
}

.nb_plays_stats .title {
    font-size: 24px;
}


/* Page game list */

.panel-heading.matiere_header {
    -webkit-border-radius: 20em;
    border-radius: 20em;
}

.panel-heading.matiere_header h2 {
    color: #FFF;
}

.game_thumbs_list li.title {
    margin-top: 20px;
}

#accordion_game_list .game_thumbs_list .panel-heading {
    background: #CCC;
    color: #FFF;
    padding: 0px;
    margin: 2px;
}

#accordion_game_list .panel-heading:hover {
    background: #6F97EE;
    color: #FFF !important;
}

#accordion_game_list .panel-body {
    border-top: none;
}

.game_thumbs_list li.gameThumbContainer {
    display: inline-block;
    margin-right: 10px;
}

#accordion_game_list .inner_bloc {
    padding: 0 40px;
}

.game_thumbs_list h3 {
    padding: 5px;
    font-size: 2.3em;
}

.game_thumbs_list h4 {
    padding-left: 5px;
}

.game_thumbs_list .panel-default {
    border: none;
    box-shadow: none;
}

.game_thumbs_list .panel-body {
    border-top: none !important;
}

.game_thumbs_list .panel-default > .panel-heading {
    padding: 0px;
}

.game_thumbs_list .panel-default > .panel-heading .vp_badge {
    display: inline-block;
    background: #FFF;
    top: -5px;
    -webkit-border-radius: 20em;
    border-radius: 20em;
    font-size: 0.6em;
    height: 30px;
    width: 30px;
    text-align: center;
    padding: 0;
    padding-top: 7px;
}

.no_item_exist {
    font-size: 1.3em;
    color: var(--colGrey);
    font-family: var(--fontLightF);
    font-weight: 300;
}


/* STARS */

.stars_container {
    color: #FCE51F;
    white-space: nowrap;
    letter-spacing: -0.1em;
}


/* TEACHER ADMIN */

#h2YourClasses {
    margin-top: -10px;
}

#instituteNameInTeacherAdmin {
    padding-top: 30px;
    color: #666;
    font-size: 1.2em;
}


/* trumbowyg_small */


/*-----------------------------------*/

#trumbowyg-icons {
    height: 0px;
}


/* to avoid a flash to of the page*/

.trumbowyg_small .trumbowyg-box {
    min-height: auto;
    margin: auto;
}

.trumbowyg_small .trumbowyg-editor,
.trumbowyg_small .trumbowyg-textarea {
    min-height: auto;
    margin: auto;
    padding: 10px;
}

.trumbowyg_small .trumbowyg-button-pane {
    min-height: auto;
}

.trumbowyg_small .trumbowyg-button-pane button {
    height: 20px;
}

.trumbowyg_small .trumbowyg-button-pane .trumbowyg-button-group::after {
    height: 20px;
}

.trumbowyg_small .trumbowyg-button-pane::after {
    top: 21px;
}


/* PROMOTE BLOC */


/*#promote_button_bloc{padding:15px;}
.promote_ico_bloc{color:#FFF;}*/

.promote_ico_bloc i {
    font-size: 6.5em;
}


/* schools search */

#school_quick_search_content_result {
    max-height: 500px;
    overflow-y: auto;
}

#school_quick_search_content_result .gameThumb {
    font-size: 0.8em;
}

.game_thumbs_list h2.matiere_header {
    color: #FFF;
    padding: 5px;
}

#nb_schools_container {
    font-family: Roboto;
    padding: 5px;
    text-align: center;
}

.school_type_1 {
    background: #def4e6;
}


/*mater : green*/

.school_type_2 {
    background: #e3ecfb;
}


/*primaire : blue*/

.school_type_3 {
    background: #feebe5;
}


/*college : orange*/

.school_type_4 {
    background: #ffe7e7;
}


/*lycée : red*/

.school_type_1_dark {
    color: #184e2b;
}


/*mater : green*/

.school_type_2_dark {
    color: #16356a;
}


/*primaire : blue*/

.school_type_3_dark {
    color: #a53b15;
}


/*college : orange*/

.school_type_4_dark {
    color: #6e3434;
}


/*lycée : red*/

.school_list_item {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 3px 10px;
    margin: 3px 0px;
    display: inline-block;
    cursor: pointer;
}

.school_list_item .name,
.school_thumb_active .name {
    font-size: 1.1em;
    font-weight: bold;
}

.school_thumb_active {
    background: #E4EDF4;
    color: #3E6D8E;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px 10px;
}

.school_list_item:hover {
    color: #fff;
    background: #53B2EE;
}

.school_list_item.selected {
    color: #fff;
    background: #44DD66;
}


/* member_only */

#memberOnlyGameAlertBloc {
    width: 900px;
    height: 600px;
    margin: auto;
    position: absolute;
    left: 50%;
    margin-left: -450px;
    z-index: 200;
}

#memberOnlyGameAlertBloc img {
    width: 900px;
}


/* report_bug_link */

#report_bug_form_container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 20px;
    border: solid 1px #CCC;
    padding-top: 20px;
}

#report_bug_bloc {
    margin-top: 50px;
    margin-bottom: 50px;
}

#report_bug_form_bloc {
    margin-top: 30px;
    margin-bottom: 30px;
}


/* QCM BUILDER */

#qcm_content_result {
    min-height: 600px;
}

#modalQcmResults .completion_ratio {
    position: absolute;
    width: 180px;
    z-index: 200;
    top: 160px;
    left: 62px;
    color: var(--colGreyLight);
    font-size: 6em;
    text-align: center;
    letter-spacing: -0.05em;
    font-weight: 800;
    white-space: nowrap;
}

#resultsGlobal h2{
    margin-bottom: 30px;
}


#btn_alert_qcm_notes,
#btn_alert_survb_notes,
#btn_alert_course_notes {
    font-size: 1.7em;
    float: right;
    margin-right: 10px;
}

#qcm_list_bloc {}

#qcm_list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.colQcm{
    color:var(--colQcm);
}
.colBg{
    color:var(--colBg);
}

.qcm_unit {
    padding: 6px 5px 10px 15px;
    background: var(--qcmBg);
    border-radius: 5px;
    display: inline-block;
    height: 60px;
    margin-bottom: 15px;
    width: 370px;
    /*box-shadow: var(--smallShadow);*/
}

.qcm_unit_inner {
    display: flex;
    justify-content: space-between;
}

.qcm_list_in_admin .qcm_unit {
    border-radius: 5px;
}

.qcm_unit:hover {
    background: var(--colHover);
    color: #FFF;
}

.qcm_unit.sel {
    background: var(--colHover);
    color: #FFF;
}

.qcm_unit.sel .note {
    color: #BCE8F1;
}

.qcm_unit .title {
    font-family: var(--fontBigF);
    letter-spacing: var(--fontBigLS);
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    width: 310px;
    line-height: 1.2em;
}

.qcm_unit .info_bloc {
    width: 44px;
    text-align: right;
    margin-right: 6px;
    margin-top: 3px;
    height: 46px;
}

.qcm_unit .number_of_questions_bloc {
    display: inline-block;
}

.qcm_unit .number_of_questions_bloc.note {
    color: var(--qcmCol);
}

.qcm_unit:hover .number_of_questions_bloc.note,
.qcm_unit.sel .number_of_questions_bloc.note {
    color: #FFF;
}

.qcm_unit .ico_bloc {
    width: 21px;
    display: inline-block;
}

.qcm_unit .fa-times {
    color: var(--colOrange);
}

.qcm_unit .fa-check {
    margin-top: -7px;
}

.qcm_unit .completion {
    display: inline-block;
    width: 9px;
    text-align: center;
    line-height: 0.8em;
    float: left;
    margin-top: 3px;
    height: 81%;
}

.qcm_unit .completion_bar {
    background: var(--qcmCol);
    height: 100%;
    position: relative;
}

.qcm_unit .completion_bar .completion_bar_done {
    background: var(--colGreen);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.qcmThumb {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 10px 10px 15px;
    background: var(--qcmBg);
    border-radius: 20px;
    margin-bottom: 5px;
    color: #4a4a4a;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 370px;
}

.qcmThumb:hover{
    background: var(--colHover);
    color: #FFF;
}

.qcmThumb:hover .questionNb,
.qcmThumb:hover .qcm_ico,
.qcmThumb:hover .completionMark {
    
    color: #FFF;
}

.qcmThumb .qcm_ico_bloc {
    display: table-cell;
    vertical-align: middle;
}

.qcmThumb .qcm_ico {
    font-size: 1.3em;
    margin-right: 10px;
    opacity: 1;
    color: var(--qcmCol);
}

.qcmThumb .title {
    font-family: var(--fontBigF);
    letter-spacing: var(--fontBigLS);
    display: table-cell;
    vertical-align: middle;
    flex-grow: 1;
}

.qcmThumb .questionNb {
    float: right;
    margin-right: 5px;
    color: var(--qcmCol);
    display: table-cell;
    vertical-align: middle;
}

#game_list_student_mode_container .qcmThumb .questionNb{
    display:none; /* We hide this because it doesn't seem to be usefull 240429 */
}

.qcmThumb .completionMark i {
    float: right;
    line-height: 20px;
    display: table-cell;
    vertical-align: middle;
}

#qcm_detail_menu,
#surv_detail_menu {
    text-align: right;
    font-size: 1em;
}

#qcm_detail_menu .btn-xs,
#surv_detail_menu .btn-xs {
    font-size: 1em;
}

#qcm_detail_menu li,
#surv_detail_menu li {
    display: inline-block;
}

#qcm_detail_menu #button_back_qcm_list,
#surv_detail_menu #button_back_surv_list {
    float: left;
}

#btn_display_qcm_options {
    /*position: absolute;
    top:200px;
    left:0px;
    z-index: 9;*/
}

#published_bloc{
    padding:5px 20px 2px;
    margin-right: 8px;
}

#published_bloc.bg_orange{
    color:#FFF;
}

.popup_page_options_bloc {
    position: absolute;
    top: 150px;
    left: 0px;
    z-index: 10;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    background: #FFF;
    box-shadow: var(--shadowBig);
    padding: 70px 20px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.popup_page_options_bloc .close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.popup_page_options_bloc i.bloc_bg_ico {
    opacity: 0.2;
    color: var(--colGreyLight);
    font-size: 25em;
    top: -120px;
}

.popup_page_options_bloc h3 {
    text-align: center;
    color: var(--colGrey);
    margin-bottom: 60px;
}

#qcm_questions_container_outer {
    background: #FFF;
}

#form_qcm label {
    font-family: Roboto Condensed, arial;
    font-size: 1.1em;
}

#form_qcm .label_matiere {
    padding-top: 0px;
}

#form_qcm .select_matiere_id {
    margin-top: -4px;
}

#form_qcm .switch-input i {
    left: 0px;
    margin-top: -7px;
}

#form_qcm #qcm_nb_questions_asked {
    width: 40px;
    float: right;
}

#form_qcm #qcm_duration {
    width: 50px;
    float: right;
    text-align: right;
}

/*#########################################
#         linker selects interface
#########################################*/
.linkerSelectsBlocUnit{
    margin-top:10px;
}
.blocLinkerBase{
    padding:5px;
    border-radius: 5px;
}

.blocLinkerL{
    background: var(--colOrangeVeryLight);
}

.blocLinkerR{
    background: var(--colPurpleLight);
}
.linkerSelectsBloc textarea{
    display:inline-block;
    border-radius: 5px;
    border-bottom:none;
    min-width: 250px;
    padding: 5px;
}
.linkerSelectsBloc .comboBloc{
    display: inline-block;
    margin-left:10px;
}
.linkerSelectsBloc .pil{
    display:inline-block;
    margin-left: 3px;
    margin-right: 10px;
    font-weight: bold;
    padding: 3px;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    text-align: center;
    background: var(--colPinkLight);
    border: solid 1px #888;
    line-height: 1.1em;
}
.linkerSelectsBloc select{
    border: solid 1px #888;
}

.blocLinkerL.empty, 
.blocLinkerR.empty{
    background: var(--colGreyVeryLight);
    color: var(--colGrey);
}
.blocLinkerR.empty .pil{
    background: var(--colGreyVeryLight) !important;
}
.blocLinkerL.warning{
    background: var(--colOrange);
    color: var(--colPink);
}


/*#########################################
#         question_pils
#########################################*/
.question_pils_bloc {
    margin-top: 15px;
}

.questions_pils_container_bloc{
    padding-right: 0px;
}

#question_pils_bloc_inner{
    overflow-y: scroll;
    max-height: 650px;
    overflow-x: hidden;
}

#question_pils_bloc .question_pil {
    position: relative;
    text-align: left;
    padding: 6px 5px;
    border-radius: 10px;
}

.question_pil .qtype_thumb_small {
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    color: #FFF;
}

.question_pil .note{
    font-size:0.9em;
}

.question_pil .placeholder{
    color: var(--colGreyLight);
}

.question_pil .text[tooltip]:before{
    top:auto;
    bottom:2.5em;
}

.question_pil .qtype_thumb_small .note {
    color: #FFF;
}


/*#question_pils_bloc .question_pil:hover{background: #CFC;}*/

.question_pils_ico {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.question_pil:hover {
    background: rgb(250, 250, 250);
}

.question_pil.sel .btn_rank,
.question_pil.sel .note {
    color: #FFF !important;
}

.btn_rank {
    padding: 5px 7px;
    transition: all .3s ease-in;
    border-radius: 50%;
}

.question_pil:hover .btn_rank {
    background: #EEE;
}

.question_pil.sel:hover .btn_rank {
    background: rgba(255, 255, 255, .2);
}

.question_pil.sel {
    background: var(--colHover);
    color: #FFF;
}

.question_pil.sel:after {
    content: "";
    position: absolute;
    bottom: 35%;
    right: -11px;
    border-width: 20px 0px 0px 20px;
    border-style: solid;
    border-color: var(--colHover) transparent;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#question_pils_bloc .question_pil .qtype_thumb_small {
    width: 60px;
    border-radius: 4px;
    padding-left: 40px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-weight: 600;
    padding-top: 5px;
    height: 30px;
}

#question_pils_bloc .question_pil .btn_rank {
    position: absolute;
    top: 10px;
    right: 10px;
}

.question_pil .qtype_thumb_small,
.question_pil .text {
    display: inline-block;
}

.question_pil .text {
    margin-left: 10px;
}

.qcm_question_unit {
    padding: 15px;
    padding-top: 0px;
    padding-right: 0px;
    /*padding-top: 20px;
    margin-top:10px;*/
    margin-bottom: 20px;
}

.qcm_question_unit .question_note {
    margin-bottom: 10px;
}

.qcm_question_unit .form-group.row {
    margin-bottom: 35px;
}

.cbMultiAnswerError{min-width: 80px;}


/* fancy disabled */

.fancy-radio.disabled,
.fancy-checkbox.disabled {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.fancy-radio.disabled input[type="radio"]:checked + span i::after,
.fancy-checkbox.disabled input[type="checkbox"]:checked + span::before {
    background-color: #666;
    border-color: #666;
}

.fancy-checkbox input[type="checkbox"]:checked + span:before {
    background: var(--colHover);
    border: 1px solid var(--colHover);
}

.fancy-radio input[type="radio"]:checked + span i:after {
    background-color: var(--colHover);
}

.select_qType {
    width: 100% !important;
}

@media (min-width: 768px) {
    .form-inline .form-control {
        display: inline-block;
        width: 100%;
        vertical-align: middle;
    }
}

.qcmb_image_bloc {
    margin: 10px 0px;
}

.qcmb_image_tag {
    border-radius: 4px;
}

.i_qcm_bad_answer {
   /* width: 450px;*/
}

#form_accept_reuse {
    display: none;
}

#btnDisplayMathNotes {
    display: none;
}


/* QCMB : Video_intro */

.video_thumb {
    display: inline-block;
    width: 60px;
    height: 40px;
    text-align: center;
    background-size: cover;
    border-radius: 4px;
}

.video_intro_bloc {
    display: inline-block;
}

.video_intro_bloc .ico_btn {
    display: inline-block;
}

.btn_video_intro_upload {
    font-size: 1.6em;
}

.btn_video_intro_play {
    margin-top: 3px;
    font-size: 2em;
}

.btn_video_intro_del {
    margin-left: 10px;
}

.btn_video_intro_play i {
    text-shadow: 0px 0px 3px rgb(0 0 0 / 70%);
    color: #FFF;
}

.btn_video_intro_play i:hover {
    color: var(--colHover);
}


/* QCM / SURV preview */


/*-----------------------------------*/

.popup_iframe_preview {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -450px;
    width: 940px;
    padding: 10px;
    z-index: 900;
    background: #FFF;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

#popup_iframe_preview_waiter {
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 200;
}

#b_close_iframe {
    float: right;
    padding: 0px;
}

#popup_iframe_preview_qcm #b_close_iframe, #popup_iframe_preview_surv #b_close_iframe {
    float: unset;
    position: absolute;
    top: 20px;
    right:10px;
}

#popup_iframe_preview_surv #b_close_iframe {
    right : 25px;
}

.iframe_preview {
    border: none;
}


/* tableSurvResultsPerQuestion */


/*-----------------------------------*/

#tableSurvResultsPerQuestion .question_title {
    font-weight: 600;
    margin-bottom: 20px;
}

#tableSurvResultsPerQuestion td {
    padding: 15px 0;
}


/* Export */


/*-----------------------------------*/

#surv_export_content_result textarea,
#qcm_export_content_result textarea {
    height: 350px;
}


/* Math notes */


/*-----------------------------------*/

.mathNoteItems {
    display: inline-block;
    padding: 3px 6px;
    border: solid 1px #DDD;
}


/*#########################################
#         QCM THEMES
#########################################*/

#select_theme_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    align-content: stretch;
}
#select_theme_list li{
    border: solid 2px rgba(0,0,0,0);
}
#select_theme_list li:hover{
    border-color : var(--colCyan);
}

#select_theme_list li.sel{
    border-color : var(--colHover);
}

#select_theme_list img{
    box-shadow: var(--shadowBig);
    border-radius: 2px;
    margin-bottom: 10px;
}




/* QCM view results */
/*-----------------------------------*/

#ulThemesResult li {
    display: inline-block;
    margin: 10px;
}

#modalQcmResults .modal-body {
    overflow-y: auto;
    min-height: 370px;
    padding: 30px;
}

#view_result_main{
    margin-top:20px;
}

#view_result_main .student_header{
    margin-bottom:30px;
}

#qcm_view_result_student_name{
    font-size: 2em;
}

#table_qcm_view_results{
    margin-bottom: 100px;
    padding-bottom: 100px;
    border-bottom-style: solid;
    border-bottom-width: thick;
    border-bottom-color: #CCC;
}

#table_qcm_view_results .question_container{
    margin-bottom:20px;
    padding:20px;
    border-radius: 10px;
}

#table_qcm_view_results .question_container.bad {
    background: var(--colPinkLight) !important;
}

#table_qcm_view_results .question_container.good {
    background: var(--colGreenLight) !important;
}

#table_qcm_view_results .question_container.warning {
    background: var(--colYellowLight) !important;
}

#table_qcm_view_results h3 {
    font-size: 1.2em;
    font-weight: bold; 
}

#table_qcm_view_results .tr_answers{
    margin-top:20px;
}


#table_qcm_view_results .answer_unit {
    font-size: 1.2em;
    margin-left: 10px;
    margin-right: 10px;
}

#table_qcm_view_results .answer_unit i {
    margin-right: 5px;
}

#table_qcm_view_results .question_container.notAnswered {
    color: var(--colGrey);
    background: var(--colGreyVeryLight);
}
#table_qcm_view_results .tr_answers.notAnswered{
    justify-content: center;
}

#table_qcm_view_results .noteFormBloc {
    font-size: 1em;
    font-weight: 200;
    margin-top: 10px;
}

#table_qcm_view_results .noteFormBloc label {
    display: inline-block;
    margin-right: 3px;
}

#table_qcm_view_results .noteFormBloc input {
    display: inline-block;
    margin-right: 15px;
}

#table_qcm_view_results i.good{
    color:var(--colGreen);
}

#table_qcm_view_results i.bad{
    color:var(--colPink);
}

#table_qcm_view_results .gapInTextAnswer{
    font-weight: bold;
    display:inline-block;
    padding:1px 3px;
    margin-bottom: 6px;
}
#table_qcm_view_results .dragdropAnswer{
    font-weight: bold;
    display:block;
    margin-top:10px;
    padding:1px 10px;
}
#table_qcm_view_results .answer_part.good{
    background: var(--colGreen);
    color: #FFF;
}

#table_qcm_view_results .answer_part.bad{
    background: var(--colOrange);
    color: #FFF;
}

#tableQcmResults .empty td span {
    display: none;
}

#tableQcmResults .ico_btn {}

#tableQcmResults .ico_btn:hover {
    color: var(--colHover);
}

#tableQcmResults th {
    font-family: helvetica;
    font-size: 1em;
    font-weight: 100;
}

/*#########################################
#         EXPORT PDF
#########################################*/

#result_for_pdf.displayForExport .tab-pane{
    display: block;
    visibility: visible;
    opacity: 1;
    margin-bottom: 140px;
    min-height: 460px;
}
#result_for_pdf.displayForExport .alert,
#result_for_pdf.displayForExport .td_btn_container,
#result_for_pdf.displayForExport #btn_print_all_bloc,
#result_for_pdf.displayForExport .timeago{
    display:none;
}
#result_for_pdf.displayForExport .rawdate{
    display:inline-block !important;
}

#result_for_pdf.displayForExport .td_btn_container h1{
    margin-bottom:90px;
}

#result_for_pdf.displayForExport .titleForExport{
    display: block !important;
    margin-top:50px;
    margin-bottom: 30px;
}
#result_for_pdf.displayForExport table.dataTable thead .sorting,
#result_for_pdf.displayForExport table.dataTable thead .sorting_asc{
    background-image:none;
}




/* result surv and qcm */

#modalQcmResults #btnBackInQcmResultDetails,
#modalSurvResults #btnBackInSurvResultDetails {
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    margin-left: 10px;
    /*position: absolute;
    right: 14px;
    top: 40px;*/
}

#modalSurvResults #surv_container h2{
    display:none;
}


/* QCM PRINT */


/*-----------------------------------*/

body.body_for_print {
    background: none;
}

#div_for_print {
    width: 900px;
    margin: auto;
    position: relative;
}


#div_for_print .header {
    margin-top: 40px;
}

#div_for_print .student_header {
    margin-top: 80px;
}

#div_for_print .student_name {}

#div_for_print * {
    -webkit-print-color-adjust: exact;
}

#div_for_print h1 {
    color: #000;
    margin: 20px 0 80px 0;
    text-align: center;
}


/*.qcm_question_unit_for_print{ margin:10px 0; margin-right:20px; width:44%; float: left;}*/


/*.qcm_question_unit_for_print{ width:420px; height:220px; position: relative; }
.qcm_question_unit_for_print.left{float:left;}
.qcm_question_unit_for_print.right{float:right;}*/

#div_for_print h2 {
    font-size: 1.1em;
    font-weight: bold;
    display: inline-block;
    letter-spacing: -0.04em;
    margin: 10px 0px;
}

#div_for_print ul.answers_bloc {
    padding-left: 25px;
}

#div_for_print li.answer_unit {
    position: relative;
    margin-bottom: 5px;
}

.qcm_question_unit_for_print {
    margin-top: 40px;
}

#div_for_print .fake_text_field {
    width: 500px;
    min-height: 70px;
    border: solid 1px #999;
    padding: 10px;
}

#div_for_print .fake_text_field.large {
    height: 400px;
}

#div_for_print .answers_bloc {
    position: relative;
}

#div_for_print .answer_unit.sel {}

#div_for_print .answer_unit.good_answer {}

#div_for_print .answer_unit .hand_circle {
    width: 20px;
    left: -27px;
    top: 0px;
    position: absolute;
}

#div_for_print .answer_unit .question_pil {
    width: 15px;
    left: -25px;
    top: 3px;
    position: absolute;
}

#div_for_print .answers_bloc .error_mark {
    position: absolute;
    font-size: 6em;
    color: #000;
    opacity: 0.1;
    z-index: 100;
    top: -30px;
    left: 100px;
}

#qcm_print_header {
    margin-top: 20px;
}

.one_line.left {
    float: left;
}

.one_line.center {
    float: left;
    margin-left: 200px;
}

.one_line.right {
    float: right;
    margin-right: 30px;
}


.dragdrop_linker_unit_for_print span{
    display: inline-block;
    padding : 3px 5px;
    border:solid 1px #CCC;
    margin:5px;
}


/* SURV */


/*-----------------------------------*/

#surv_list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}


.survCol{
    color:var(--survCol);
}
.survBg{
    background-color:var(--survBg);
}

.surv_unit {
    padding: 6px 5px 10px 15px;
    background: var(--survBg);
    border-radius: 5px;
    margin-bottom: 5px;
    display: inline-block;
    height: 60px;
    margin-right: 5px;
    width: 370px;
}

.surv_unit_inner {
    display: flex;
    justify-content: space-between;
}

.surv_list_in_admin .qcm_unit {
    border-radius: 5px;
}

.surv_unit:hover,
.surv_unit.sel {
    background: var(--colHover);
    color: #FFF;
}

.surv_unit .note {
    color: var(--survCol);
}

.surv_unit .fa-times {
    color: var(--colOrange);
}

.surv_unit .title {
    font-family: var(--fontBigF);
    letter-spacing: var(--fontBigLS);
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    width: 310px;
    line-height: 1.2em;
}

.surv_unit .info_bloc {
    width: 44px;
    text-align: right;
    margin-right: 6px;
    margin-top: 3px;
    height: 46px;
}

.surv_unit .number_of_questions_bloc {
    display: inline-block;
}

.surv_unit .ico_bloc {
    width: 21px;
    display: inline-block;
}

.surv_unit .fa-check {
    margin-top: -7px;
}

.surv_unit .completion {
    display: inline-block;
    width: 9px;
    text-align: center;
    line-height: 0.8em;
    float: left;
    margin-top: 3px;
    height: 81%;
}

.surv_unit .completion_bar {
    background: var(--survCol);
    height: 100%;
    position: relative;
}

.surv_unit .completion_bar .completion_bar_done {
    background: var(--colGreen);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}


/*.surv_unit.sel:after{content: "";
    position: absolute;
    bottom: 8px;
    right: -11px;
    border-width: 20px 0px 0px 20px;
    border-style: solid;
    border-color: #53B2EE transparent;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}*/

#modalSurvResults .student_name {
    margin:auto;
    font-size:1.2em;
}

.surv_question_unit .form-group.row {
    margin-bottom: 35px;
}

#modalSurvResults textarea {
    box-shadow: none !important;
}

.surv_question_unit .switch-input {
    padding: 17px 60px 0 0;
    display: inline-block;
}

#form_survb_bloc .switch-input i {
    top: 0px;
    right: auto;
    display: inline-block;
}

#survb_with_user_note_bloc .switch-input i {
    right: 0px;
}

#winEndSurv,
#winEndQcm {
    font-size: 1.6em;
    margin-top: 50px;
    text-align: center;
    box-shadow: var(--shadowVeryBig);
    padding: 16px;
}

#winEndSurv h3 {
    margin-bottom: 30px;
}

#survHeader {
    color: var(--colGreyDark);
    font-family: var(--fontLightF);
}

#survFooter {
    color: var(--colGreyDark);
    font-family: var(--fontLightF);
    text-align: center;
    margin-top: 110px;
}


/* SurvThumb */

.survThumb {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 10px 10px 15px;
    background: var(--survBg);
    border-radius: 20px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    width: 370px;
}

.survThumb:hover,
.survThumb:hover .surv_ico {
    background: var(--colHover);
    color: #FFF;
}

.survThumb .title {
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    width: 310px;
    font-family: var(--fontBigF);
    letter-spacing: var(--fontBigLS);
}

.survThumb .questionNb {
    float: right;
    margin-right: 5px;
    color: var(--survCol);
}

.survThumb .surv_ico_bloc {
    display: table-cell;
    vertical-align: middle;
    margin: auto;
}

.survThumb .surv_ico {
    font-size: 1.3em;
    margin-right: 10px;
    opacity: 1;
    color: var(--survCol);
}

.survThumb .completionMark {
    display: table-cell;
    vertical-align: middle;
    margin: auto;
}

.survThumb .completionMark.not_finished {
    display: inline-block;
    float: right;
    line-height: 12px;
    margin-right: 5px;
    text-align: center;
    color: #999;
}

.survThumb .completionMark i {
    line-height: 20px;
    float: right;
    display: table-cell;
    vertical-align: middle;
    margin: auto;
}


/* For modals to fit the window height with overflow.  */

.modal_overflow .modal-body {
    overflow-y: auto;
    min-height: 370px;
}


/* surv print */

.surv_question_unit_for_print {
    margin-top: 40px;
}

.questions_pils_container_bloc {
    border-right: solid 1px #EEE;
}

.questions_container_bloc {
    padding-left: 40px;
}


/* modalPush */

.modal_fancy .modal-header {
    background: #FFF;
    border-radius: 0;
    border: none;
}

.modal_fancy .modal-content {
    border-radius: 10px;
    border: solid 10px #A8D8FF;
    background: url(../images/main/perso_footer_01.png) #FFF no-repeat 100% 107%;
    background-size: 201px 82px;
}

.modal_fancy .b_close {
    background: #fee145;
    color: #994d04;
    font-weight: bold;
    padding: 7px 10px;
    border-radius: 20px;
    cursor: pointer;
    float: right;
    margin-top: -30px;
    margin-right: -30px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.modal_fancy .b_close:hover {
    background: #FEF0A7;
}

.fb_share_button {
    background: #43609C;
    color: #FFF;
    padding: 5px 5px 2px 5px;
    border-radius: 2px;
}

.fb_share_button:hover {
    background: #4F73BC;
    color: #FFF;
}


/* cookie directive */

#cookiesdirective #impliedsubmit {
    color: #000;
}


/* vp_survey */

#modalSurvey .modal-body .row {
    margin-top: 25px;
}

#modalSurvey .answer_button {
    margin-bottom: 10px;
    font-weight: bold;
}


/* ta_mail_content */


/*-----------------------------------*/

#ta_mail_content {
    width: 100%;
    height: 200px;
}


/* img_print */

.img_print_list li {
    float: left;
    margin: 10px;
    text-align: center;
}

.img_print_list img {
    max-width: 200px;
}

.img_print_list a {
    margin: 10px;
}


/* matiere in tabs */

.nav.nav-tabs .matiere_header {
    color: #FFF;
    padding: 2px 12px;
    margin-bottom: 5px;
}


/* 08_game_list_student_mode */

.tabMatieres {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 1px;
}

.tabMatieres li {
    flex-grow: 1;
}

.tabMatieres.nav-tabs > li.active > a,
.tabMatieres.nav-tabs > li.active > a:hover,
.tabMatieres.nav-tabs > li.active > a:focus {
    border: none;
    background: #FFE;
}

.tabMatieres.nav > li > a:hover {
    border-color: #FFF;
}

#game_list_student_mode_container .tab-content {
    text-align: left;
}

#game_list_student_mode_container .tab-pane ul li {}


/* AJOUTS OLIVIER */

.blocs_3_section.btn {
    width: 70%;
}


/* Popup  */


/*-----------------------------------*/

.popup {
    position: absolute;
    top: 230px;
    left: 10px;
    padding: 15px;
    background: #FFF;
    border-radius: 10px;
    z-index: 1000;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.popup.draggable {
    cursor: move;
}


/* Upload */

#popup_upload_photo {
    width: 800px;
    top: 100px;
}

#popup_upload_photo .unsplashSearch .listBloc{
    height:400px !important;
}

#progress_upload {
    width: 300px;
    margin: auto;
}

#upload_drop_zone {
    width: 300px;
    border-radius: 20px;
    border: dashed 3px #CCC;
    text-align: center;
    color: var(--colGrey);
    padding: 50px 30px;
    margin: auto;
}


/* ----------------------------------------- */


/* special spans */

.logo {
    font-weight: 700;
    font-style: italic;
}


/* RESIZE & CENTER */

.imgResize100 {
    max-width: 100%;
    height: auto;
}

.imgResize80 {
    max-width: 80%;
    box-sizing: border-box;
}

.hCenter {
    text-align: center;
    display: flex;
    justify-content: center;
}

.hCenterColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vCenter {
    display: flex;
    align-items: center;
}

.txtCenter {
    text-align: center;
}


/* institute_data FOOTER*/

.institute_data {
    text-align: center;
    margin-top: 50px;
}

.institute_data .name {
    font-weight: 600;
}


/**
 * student_code_form (login:student_code)
 */

#student_col_form_big {
    font-size: 2em;
}

#student_col_form_big #form_class_code input {
    width: 300px;
    height: 40px;
}


/* FORUM */


/*-----------------------------------*/

#forum_bloc h2 {
    font-family: "Roboto Condensed", sans-serif;
}

#formNewMsg textarea {
    height: 300px;
}

#forumMenuLeft {}

.threadUnit h2 {
    border-bottom: solid 1px #CCC;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.threadMain {
    display: flex;
    justify-content: space-between;
}

.threadMain .threadPartLeft {
    order: 1;
    flex-grow: 1;
}

.threadMain .threadPartRight {
    order: 2;
    text-align: right;
    margin-left: 10px;
}

.threadTitle {
    word-break: break-word;
}

.threadContent {
    margin-bottom: 10px;
    word-break: break-word;
}

.threadAuthor {
    text-align: right;
}

.threadAuthorInner {
    display: inline-block;
    background: #EEE;
    color: #666;
    padding: 0 5px;
}

.threadDate {
    color: #CCC;
    text-align: right;
    font-size: .9em;
}

.threadViews {
    margin-top: 10px;
    text-align: right;
    color: #6a737c;
}

.threadViews .text {
    font-size: 0.8em;
}

#formForumMsg .switch-input {
    display: inline;
}

#formForumMsg .buttonHelpOpenPopover {
    font-size: 1.4em;
}

.forumAnswerUnit {
    min-height: 100px;
}

.forumAnswerUnit.grey {
    background: #EEE;
    color: #666;
}

.forumAnswerUnit .threadContent {}

.forumAnswerUnit .threadVoteBloc {
    margin-top: -20px;
}

#forum_bloc .editbloc {
    text-align: right;
    margin-top: 10px;
}

.forumAnswersNav {
    display: inline-block;
}

.forumAnswersNav button {
    font-size: 1.2em;
}

.forumAnswersNav button:disabled {
    color: #ccc;
}

.forumAnswersNav .waiter_container {
    display: inline-block;
}

.threadVoteBloc {
    text-align: center;
    float: left;
    font-size: 1.7em;
}

.threadVoteBloc button {
    padding: 0px;
    font-size: 1.3em;
    line-height: 13px;
    color: #CCC;
}

.threadVoteBloc button i {}

.threadVoteBloc button.answerAccepted {
    margin-top: -24px;
}

.threadVoteBloc button.answerAccepted.accepted {
    color: #5FBA7D;
}

.threadVoteBloc button.answerAccepted i {
    font-size: 0.7em;
}

.threadVoteUp {
    margin-bottom: -8px;
}

.threadVoteDown {
    margin-top: -15px;
}

.vote_content_result {
    color: #6a737c;
}

.threadThumb {
    margin: 5px 0px;
}

.voteInThreadsThumbPils {
    display: inline-block;
    padding: 1px 8px;
    background: #EEE;
    color: #999;
    border-radius: 2px;
}

.threadThumb .threadNbAnswers {
    display: inline-block;
    padding: 1px 8px;
    background: #EEE;
    color: #999;
    border-radius: 2px;
    margin-right: 5px;
}

.threadThumb .threadNbAnswers.green {
    background: #5FBA7D;
    color: #FFF;
}

.threadThumb.detailed {
    display: flex;
    border-bottom: solid 1px #eaeaea;
    padding: 10px 0px;
}

.threadThumb.detailed .thumbLeftPart {
    width: 50px;
    text-align: center;
    margin-right: 20px;
    order: 1;
}

.threadThumb.detailed .voteInThreadsThumbPils {
    padding: 2px 0px;
    margin-bottom: 5px;
}

.threadThumb.detailed .thumbLeftPart div {
    width: 50px;
}

.threadThumb.detailed .threadNbAnswers {
    font-size: 1em;
    padding: 2px 0px;
}

.threadThumb.threadNbAnswers.green {
    background: #5FBA7D;
    color: #FFF;
    border-radius: 2px;
    margin-top: 3px;
}

.threadThumb.detailed .thumbLeftPart .num {
    font-size: 1.5em;
}

.threadThumb.detailed .thumbMainPart {
    order: 2;
    flex: 1;
}

.threadThumb.detailed .thumbRightPart {
    order: 3;
}

.threadThumb.detailed .threadTitle {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.threadThumb.detailed .threadContent {
    font-size: 0.9em;
    margin-bottom: 10px;
}


/*.threadThumb.detailed .threadAuthor{text-align: left;}
.threadThumb.detailed .threadDate{text-align: left;}*/


/* Tags (from stackoverflow)*/


/*-----------------------------------*/

.tagThumb {
    text-align: center;
    color: #39739d;
    background-color: #E1ECF4;
    padding: 3px 5px;
    margin: 0px 2px 2px 0 !important;
    text-decoration: none;
    font-size: 0.8em;
    white-space: nowrap;
    display: inline-block;
    border-radius: 0;
    border: 1px solid #E1ECF4;
    float: none;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#t_tags_autocomp {
    width: 200px;
    display: inline-block;
    margin-left: 10px;
}

#form_tags_thumbs_list {
    display: inline-block;
    margin-left: 10px;
}

.btnDelTag {
    margin-left: 2px;
    cursor: pointer;
    padding: 2px;
}

.btnDelTag:hover {
    background-color: #39739d;
    color: #E1ECF4;
}

.ui-autocomplete.ui-front.ui-menu {
    font-size: .9em;
    background: #FFF;
    border-color: #DDD;
}

.ui-autocomplete.ui-front.ui-menu .ui-menu-item {}

.ui-autocomplete.ui-front.ui-menu .ui-menu-item:hover,
.ui-autocomplete.ui-front.ui-menu .ui-menu-item.ui-state-focus {
    background: #E1ECF4;
    border-color: #DDD;
}


/* tagThumbList */


/*-----------------------------------*/

.forum_right_part .forumThumbsList {
    margin-bottom: 40px;
}

.tagsList .tagThumbUnit {
    float: left;
}


/* PREMIUM */


/*-----------------------------------*/

#banner_premium_valid_alert,
#banner_premium_free_month_alert {
    /*padding: 4px;
    float: right;*/
   /* margin-top: -80px;*/
   position: fixed;
   bottom: -20px;
   z-index: 2000;
   width: 100%;
   left: 0px;
}

/* BANK */
/*-----------------------------------*/
#table_premium_tier tr.disabled{
    color:#AAA;
}
#table_premium_tier_container .tva_note{
    color:var(--colGrey);
    font-style: italic;
    font-size:0.8em;
}
#table_premium_tier .bg_success {
    background: var(--colGreenLight);
    font-weight: 600;
    font-size: 1.1em;
}


/* COURSES */


/*-----------------------------------*/
.courseCol{
    color:var(--courseCol);
}
.courseBg{
    background-color:var(--courseBg);
}
#courses_list {
    align-items: flex-start;
    flex-wrap: wrap;
}

#courses_list li {
    padding: 20px;
    background: var(--courseBg);
    border-radius: 10px;
    margin: 20px;
    min-width: 40%;
}

#courses_list li embed, #courses_list li object {
    margin-right: 20px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
    border-radius:5px;
    border:solid 2px var(--colPurple);

}

#courses_list li .first_part {
    display: flex;
}

#courses_list li .buttons_bloc {
    width: 40px;
}

#courses_list li .buttons_bloc .ico_btn {
    color: var(--courseCol);
}

#courses_list li .course_info {
    margin-top: 20px;
    padding: 20px;
    background: #FFF;
    border-radius: 10px;
}

#courses_list li .course_title {
    font-weight: 600;
}

#courses_list li .course_note {
    font-weight: 200;
    font-style: italic;
}

#class_tab_content #courses_list li {}

#popup_edit_course {
    top: 50px;
    left: calc(50% - 200px);
    width: 400px;
    height: 300px;
}

#game_list_student_mode_container #courses_list {}

#game_list_student_mode_container #courses_list .btn_display_course {
    font-size: 2em;
}

#modalCourseViewsStats .modal-body {
    overflow-y: auto;
    min-height: 370px;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* ----------------------------- ----------------------------- ----------------------------- */


/* ----------------------------- ----------------------------- ----------------------------- */


/* ----------------------------- ----------------------------- ----------------------------- */


/* ----------------------------- ----------------------------- ----------------------------- */


/* COPIE DE HOME_001.CSS 
(impossisble de lier home_001.css à une autre page que la home)*/


/*-----------------------------------*/


/* ----------------------------- ----------------------------- ----------------------------- */


/* RESIZE & CENTER */

.imgResize100 {
    max-width: 100%;
}

.imgResize80 {
    max-width: 80%;
    box-sizing: border-box;
}

.hCenter {
    text-align: center;
    display: flex;
    justify-content: center;
}

.hCenterColumn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vCenter {
    display: flex;
    align-items: center;
}

.txtCenter {
    text-align: center;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* MARGIN & vSPACE */

.marginBottom50 {
    margin-bottom: 50px;
}

.marginBottom80 {
    margin-bottom: 80px;
}

.paddingTop20 {
    padding-top: 20px;
}

.paddingTop50 {
    padding-top: 50px;
}

.vSpace_2 {
    height: 2px;
}

.vSpace_25 {
    height: 25px;
}

.vSpace_50 {
    height: 50px;
}

.vSpace_100 {
    height: 100px;
}

.vSpace_150 {
    height: 150px;
}


/* ----------------------------- ----------------------------- ----------------------------- */

.imgArrondieOmbree {
    border: 3px solid white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 80px;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* BOUTONS */

.button {
    border: 2px solid;
    border-radius: 10px;
    text-align: center;
    padding: 10px 30px 10px 30px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 500;
    font-size: 20px;
}

.buttonContainer {
    display: flex;
    justify-content: center;
    position: relative;
}

.buttonContainer2 {
    transition-property: opacity;
    transition-duration: .3s;
}

.buttonContainer2:hover {
    opacity: 0.5;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* TITRES H2 */

.titresH1 {
    display: flex;
}

.puceTitreH1 {
    margin: 0px 8px 0px 8px;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* BLOCS DE TEXTES*/

.txtBlocs {
    margin-top: 10px;
    padding: 20px 30px 20px 30px;
    font-weight: 300;
    font-size: 19px;
    text-align: left;
    line-height: 1.3em;
}

@media(max-width:767px) {
    .txtBlocs {
        padding: 20px 100px 20px 100px;
    }
    .BlocDeTexteAvecIconeDessus {
        padding-top: 50px;
    }
}

.iconeSurTxt {
    height: 90px;
    line-height: 90px;
    text-align: center;
    margin-top: 20px;
}

.grdTxt {
    font-weight: 500;
    font-size: 22px;
}

.letterSpacingFaible {
    letter-spacing: -0.07em;
}

.sepOmbre {
    width: 100%;
    height: 16px;
    background-image: url(../images/main/sepOmbre.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 80% 16px;
    margin-top: 12px;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* CAROUSEL IMAC*/

.carouselIMAC {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.carouselIMAC_ecran {
    width: 100%;
    max-width: 600px;
    border: #070b18 25px solid;
    border-radius: 15px 15px 0px 0px;
}

.carouselIMAC_pied {
    width: 100%;
    max-width: 600px;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.carousel-indicators {
    bottom: -73px;
}


/* ----------------------------- ----------------------------- ----------------------------- */


/* BOUTS FIXES */

.objetsFixes {
    position: fixed;
    z-index: auto;
    right: 17px;
    top: 50%;
}

.boutFixe {
    height: 25px;
    width: 25px;
    opacity: .3;
    background-image: url(../images/main/boutFixeRd_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.boutFixe:hover {
    transition-property: opacity;
    transition-duration: .3s;
    opacity: .7;
}


/* ---------------------------- ---------------------------- ----------------------------*/


/* Backgrounds */

#main_navbar.shrink-active {
    background: #FFF;
    webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

#bg1 {
    background-image: url(../images/main/_bg/bg1_fin.svg), url(../images/main/_bg/bg1_rd_blancs_01.png);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom, 50% 87px;
    background-size: 110%;
    background-attachment: scroll, fixed;
    background-blend-mode: normal, color-dodge;
    padding-top: 50px;
}

.rdBlancs {
    background-image: url(../images/main/_bg/bg1_rd_blancs_01.png);
    background-size: 100%;
    width: 1291px;
    height: 733px;
    position: fixed;
    left: 0%;
    top: 10%;
    z-index: 1;
}

#bgWhite1 {
    background-color: white;
    width: 100%;
}

#bg2 {
    width: 100%;
    background-color: #b6c7fb;
    background-image: url(../images/main/_bg/bg2_deb_02.svg), url(../images/main/_bg/bg2_fin_02.svg), /*linear-gradient(-6deg, #fff, #b6c7fb, #c3effc, #b6c7fb);*/
    linear-gradient(to right, #1cc58d 0%, #1cc0b8 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top, bottom, center;
    background-size: 110%, 110%, 100%;
    background-attachment: scroll, scroll, fixed;
    padding: 80px 0px;
}

#bgWhite2 {
    background-color: white;
    margin-top: -1px;
}

#bg3 {
    background-image: url(../images/main/_bg/bg3_deb.svg), url(../images/main/_bg/bg3_fin.svg), linear-gradient(to right, #fcaa36, #fc7336);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top, bottom, center;
    background-size: 110%, 110%, 100%;
    padding: 80px 0px;
}

#bgWhite3 {
    background-color: white;
    padding-top: 80px;
    margin-top: -1px;
}

#bg4 {
    height: 250px;
    background-image: url(../images/main/_bg/bg4_deb.svg), radial-gradient(at top, #273f61, #041122);
    background-repeat: no-repeat, no-repeat;
    background-position: top, bottom;
    background-size: 110%, 110%;
}


/* ---------------------------- ---------------------------- ----------------------------*/


/* HEADER */

header {
    color: #FFF;
    font-size: 16px;
    margin-top: 20px;
}

header.col-md-2 {
    height: 53px;
    line-height: -2em;
}

#menuHaut {
    font-weight: 100;
    margin-bottom: 50px;
}

.logoHeader {
    padding: 0px 15px 0px 15px;
    margin-bottom: 50px;
}


/*.imgHeader{max-width: 534px;}*/

#baseline {
    padding: 0px 15px 0px 15px;
    margin-bottom: 50px;
}

#baseline1 {
    color: #FFF;
    text-align: left;
    font-weight: 300;
    font-size: 26px;
    line-height: 1.2em;
}

#baseline2 {
    margin-top: 15px;
    color: #FFF;
    text-align: left;
    font-weight: 100;
    font-size: 20px;
    line-height: 1.2em;
}


/* ---------------------------- ---------------------------- ----------------------------*/


/* 3 Blocs */

.cont3blocs {
    padding: 0px;
    margin: 0px;
}

._3Blocs {
    min-height: 100px;
    padding: 5px 20px 50px 20px;
    margin: -1px 5px 10px 5px;
    background-color: #FFF;
    border-radius: 0px 0px 10px 10px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

._3blocsTop {
    height: 35px;
    margin: 0px 5px 0px 5px;
    background-size: 100% 102%;
    background-position: bottom center;
    background-repeat: no-repeat;
}


/*
#topBlocDirecteur{background-image: url("../images/main/3Blocs_blocDir_bg.svg");}
#topBlocFormateur{background-image: url("../images/main/3Blocs_blocForm_bg.svg");}
#topBlocStudent{background-image: url("../images/main/3Blocs_blocStudent_bg.svg");}
*/


/* Titre 3Blocs */

.titre3Blocs {
    text-align: center;
    line-height: 1.7em;
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.titre3Blocs_txt {
    margin-left: 10px;
}

.titre3blocs_thin {
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
}

.titre3Blocs_bold {
    font-size: 35px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.01em;
}


/* Textes 3Blocs */

.txt1_3Blocs {
    font-size: 18px;
    font-weight: 300;
    text-align: left;
    margin-top: 15px;
    letter-spacing: -0.02em;
}

.txt2_3Blocs {
    font-size: 16px;
    font-weight: 300;
    color: #74849a;
    text-align: left;
    padding-top: 10px;
    margin-bottom: 20px;
}


/* buttons 3Blocs */

#b_savoirPlus_dir,
#b_savoirPlus_dir a {
    border-color: #e18e00;
    color: #e18e00;
    margin-top: 0px;
}

#b_savoirPlus_form,
#b_savoirPlus_form a {
    border-color: #dfb70c;
    color: #dfb70c;
    margin-top: 0px;
}

#form_class_code label {
    color: #e09602;
}

#form_class_code label div {
    display: inline;
}

#boutGoStudent.boutGo,
#boutGoStudent.boutGo a,
#form_class_code .input-group-btn:last-child > .btn {
    border-radius: 50px;
    border: 2px #e09602 solid;
    color: #e09602;
    font-size: 26px;
    font-weight: 500;
    padding: 8px;
    width: auto;
    line-height: 0.7em;
    height: auto;
}

.inputStudent {
    margin-top: 0px;
    color: #e09602;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inputStudent strong {
    font-size: 20px;
}

.zoneInputStudent,
#form_class_code input {
    width: 146px;
    height: 28px;
    background-color: #faefd9;
    border-radius: 5px;
    margin-right: 10px;
    margin-top: 6px;
}

.inputStudentZoneEtBout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


/* ---------------------------- ---------------------------- ----------------------------*/


/* etage 3 DeuxServices */

#bg2,
#bg2 a,
#bg2 h2 {
    color: #FFF;
}


/*color:#364f66;*/

#bg2 .txtBlocs {
    padding: inherit 50px inherit 50px;
}

#bgViolet,
#bgViolet a,
#bgViolet h2 {
    color: #FFF;
}


/*color:#364f66;*/

#bgViolet .txtBlocs {
    padding: inherit 50px inherit 50px;
}


/* ----------------------------- */


/* etage 4 Directeur */

#bgWhite2 .txtTitreH2 h2 {
    color: #a8b3c5;
}

#bgWhite2 .txtBlocs {
    font-size: 16px;
    margin-top: 15px;
    padding-top: 5px;
}

#bgWhite2 .txtBlocs strong {
    font-size: 20px;
}

#bgWhite2 em {
    font-style: normal;
    font-weight: 500;
    color: #e18e00;
}


/* ----------------------------- */


/* etage 5 Formateur */

#bg3,
#bg3 h2,
#bg3 h3 {
    color: #FFF;
}

#bg3 .txtBlocs {
    padding: 50px inherit 40px inherit;
}

.conclusion {
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 40px;
}


/* ----------------------------- */


/* etage 6 Nos jeux */

#bgWhite3 .txtBlocs {
    padding: 20px 50px 40px 50px;
}

#bgWhite3 {
    color: #375066;
}

#bgWhite3 .txtTitreH2 h2 {
    color: #375066;
}

#bgGrey1 .txtTitreH2 h2 {
    color: #375066;
}


/* ----------------------------- */


/* FOOTER */

#bg4 {
    color: #FFF;
    font-weight: 300;
}


/* Needed to avoid a blue line form the .wrapper bg. */


— .video_container_in_home_big_bandeau {
    text-align: center;
    display: flex;
    justify-content: center;
}

.video_container_in_home_big_bandeau iframe {
    border: solid 4px #FFF;
}


/* FIN DE COPIE DE HOME_001.CSS */


/*-----------------------------------*/

.txtBig {
    font-size: 1.2em;
}

.txtBig2 {
    font-size: 1.4em;
}

.txtBig2b {
    font-size: 1.4em;
    font-weight: bold;
}

.txtBig3 {
    font-size: 2em;
}

.txtBig3b {
    font-size: 2em;
    font-weight: bold;
}

.txtBig4b {
    font-size: 2.6em;
    font-weight: bold;
}

.blocText2 {
    padding: 20px;
    margin-bottom: 20px;
}

.imgMaxSize600 {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.imgMaxSize400 {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.imgMaxSize100 {
    max-width: 100px;
    width: 100%;
    height: auto;
}

.imgMaxSize70 {
    max-width: 100px;
    width: 100%;
    height: auto;
}

#bgGrey1 {
    width: 100%;
    background-color: #dbdadc;
    background-image: url(../images/main/_bg/bg2_deb_02.svg), /*linear-gradient(-6deg, #fff, #b6c7fb, #c3effc, #b6c7fb);*/
    linear-gradient(to right, #e7edf5 0%, #e7edf5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: top, center;
    background-size: 110%, 100%;
    background-attachment: scroll, fixed;
    padding: 80px 0px;
}

#bgViolet {
    background-image: url(../images/main/_bg/bg2_deb_02.svg), url(../images/main/_bg/bg2_fin_02.svg), linear-gradient(180deg, rgba(163, 111, 196, 1) 0%, rgba(128, 159, 207, 1) 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top, bottom, center;
    background-size: 110%, 110%, 100%;
    background-attachment: scroll, scroll, fixed;
    padding: 80px 0px;
}

#pageGrdsEntreprises h3 {
    font-size: 2em;
}

.txtCenter {
    text-align: center;
}

#pageGrdsEntreprises .imgArrondieOmbree {
    margin-bottom: 0px;
}

.user_name.xs {
    display: flex;
    align-items: center;
    padding-top: 29px;
}

.user_name.xs .avatar {
    margin-right: 10px;
}

#btn_edit_avatar_in_teacher_admin {
    position: absolute;
    top: 56px;
    left: 22px;
}


/*#########################################
#       vp_select
#########################################*/

.vp_select {
    cursor: pointer;
    position: relative;
    width: 400px;
    max-width: 100%;
    font-family: var(--fontBigF);
}
.vp_select li{
    display:none;
}

ul.vp_select_ul  {
    position: absolute;
    max-height: 400px;
    overflow-y: auto;
    z-index: 200;
    background: #FFF;
    border: solid 2px #DDD;
    width: 100%;
    min-width: max-content;
}

.vp_select_overlay{
    background: rgba(255, 255, 0, 0);
    position: absolute;
    top:0px;
    left:0px;
    z-index:199;
    width:100%;
    height: 100%;
}

.vp_select .vp_select_title {
    padding: 5px;
    padding-left: 10px;
    background: #FFFFFF;
    /*border:solid 2px #DDD;*/
    border-radius: 2px;
    font-weight: 600;
}

.vp_select .vp_select_title:hover {
    background: var(--colHover);
    color: #FFF;
}

ul.vp_select_ul li {
    display: none;
    cursor: pointer;
    padding: 5px;
    padding-left: 10px;
    font-family: var(--fontLightF);
}

ul.vp_select_ul li:hover {
    background: #EEE;
}

ul.vp_select_ul li.selected {
    background: var(--colHover);
    color: #FFF;
}


/*#########################################
#       qtype_thumb
#########################################*/

.qtype_thumb {
    display: inline-block;
    width: 60px;
    height: 40px;
    background-size: 60px 33px, cover !important;
    background-position-y: 3px !important;
    vertical-align: middle;
    margin-right: 10px;
}

.qtype_thumb_buttons {
    background: url(../images/ico/question_type/ico_buttons.png) no-repeat, #f6ca78;
}

.qtype_thumb_multiAnswers {
    background: url(../images/ico/question_type/ico_multiAnswers.png) no-repeat, #f3965d;
}

.qtype_thumb_quizImage {
    background: url(../images/ico/question_type/ico_quizImage.png) no-repeat, #24795b;
}

.qtype_thumb_quizImageMultiAnswers {
    background: url(../images/ico/question_type/ico_quizImageMultiAnswers.png) no-repeat, #49785a;
}

.qtype_thumb_inputStrict {
    background: url(../images/ico/question_type/ico_inputStrict.png) no-repeat, #ac8f63;
}

.qtype_thumb_inputSoft {
    background: url(../images/ico/question_type/ico_inputSoft.png) no-repeat, #dfa7ef;
}

.qtype_thumb_longInput {
    background: url(../images/ico/question_type/ico_longInput.png) no-repeat, #5fcf9c;
}

.qtype_thumb_dragdrop {
    background: url(../images/ico/question_type/ico_dragdrop.png) no-repeat, #9ba963;
}

.qtype_thumb_imageBullets {
    background: url(../images/ico/question_type/ico_imageBullets.png) no-repeat, #ffbd82;
}

.qtype_thumb_linker {
    background: url(../images/ico/question_type/ico_linker.png) no-repeat, #fe5849;
}

.qtype_thumb_gapsInTextInput {
    background: url(../images/ico/question_type/ico_gapsInTextInput.png) no-repeat, #e787fc;
}

.qtype_thumb_small {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-size: 25px 25px, cover !important;
    background-position: 5px !important;
    border-radius: 50%;
}
/*
.qtype_thumb_small_buttons {
    background: url(../images/ico/question_type/ico_small_multiAnswers.png) no-repeat, #f3965d;
}

.qtype_thumb_small_multiAnswers {
    background: url(../images/ico/question_type/ico_small_multiAnswers.png) no-repeat, #f3965d;
}

.qtype_thumb_small_quizImage {
    background: url(../images/ico/question_type/ico_small_quizImage.png) no-repeat, #24795b;
}

.qtype_thumb_small_quizImageMultiAnswers {
    background: url(../images/ico/question_type/ico_small_quizImageMultiAnswers.png) no-repeat, #49785a;
}

.qtype_thumb_small_inputStrict {
    background: url(../images/ico/question_type/ico_small_inputStrict.png) no-repeat, #ac8f63;
}

.qtype_thumb_small_inputSoft {
    background: url(../images/ico/question_type/ico_small_inputSoft.png) no-repeat, #dfa7ef;
}

.qtype_thumb_small_longInput {
    background: url(../images/ico/question_type/ico_small_longInput.png) no-repeat, #5fcf9c;
}

.qtype_thumb_small_dragdrop {
    background: url(../images/ico/question_type/ico_small_dragdrop.png) no-repeat, #9ba963;
}

.qtype_thumb_small_imageBullets {
    background: url(../images/ico/question_type/ico_small_imageBullets.png) no-repeat, #ffbd82;
}

.qtype_thumb_small_linker {
    background: url(../images/ico/question_type/ico_small_linker.png) no-repeat, #fe5849;
}

.qtype_thumb_small_gapsInTextInput {
    background: url(../images/ico/question_type/ico_small_gapsInTextInput.png) no-repeat, #e787fc;
}
*/
/*------------------*/
.qtype_thumb_small_buttons {
    background: url(../images/ico/question_type/ico_small_multiAnswers.png) no-repeat, var(--bgTypQ_buttons);
}

.qtype_thumb_small_multiAnswers {
    background: url(../images/ico/question_type/ico_small_multiAnswers.png) no-repeat, #f3965d;
}

.qtype_thumb_small_quizImage {
    background: url(../images/ico/question_type/ico_small_quizImage.png) no-repeat, #24795b;
}

.qtype_thumb_small_quizImageMultiAnswers {
    background: url(../images/ico/question_type/ico_small_quizImageMultiAnswers.png) no-repeat, #49785a;
}

.qtype_thumb_small_inputStrict {
    background: url(../images/ico/question_type/ico_small_inputStrict.png) no-repeat, var(--bgTypQ_inputStrict);
}

.qtype_thumb_small_inputSoft {
    background: url(../images/ico/question_type/ico_small_inputSoft.png) no-repeat, var(--bgTypQ_inputSoft);
}

.qtype_thumb_small_longInput {
    background: url(../images/ico/question_type/ico_small_longInput.png) no-repeat, var(--bgTypQ_longInput);
}

.qtype_thumb_small_dragdrop {
    background: url(../images/ico/question_type/ico_small_dragdrop.png) no-repeat, var(--bgTypQ_dragdrop);
}

.qtype_thumb_small_imageBullets {
    background: url(../images/ico/question_type/ico_small_imageBullets.png) no-repeat, var(--bgTypQ_imageBullets);
}

.qtype_thumb_small_linker {
    background: url(../images/ico/question_type/ico_small_linker.png) no-repeat, var(--bgTypQ_linker);
}

.qtype_thumb_small_gapsInTextInput {
    background: url(../images/ico/question_type/ico_small_gapsInTextInput.png) no-repeat, var(--bgTypQ_gapsInTextInput);
}


/*------------------*/

.qtype_bg_buttons {
    background: #f3965d; /*#f6ca78;*/
}

.qtype_bg_multiAnswers {
    background: #f3965d;
}

.qtype_bg_quizImage {
    background: #24795b;
}

.qtype_bg_quizImageMultiAnswers {
    background: #49785a;
}

.qtype_bg_inputStrict {
    background: #ac8f63;
}

.qtype_bg_inputSoft {
    background: #dfa7ef;
}

.qtype_bg_longInput {
    background: #5fcf9c;
}

.qtype_bg_dragdrop {
    background: #9ba963;
}

.qtype_bg_imageBullets {
    background: #ffbd82;
}

.qtype_bg_linker {
    background: #fe5849;
}

.qtype_bg_gapsInTextInput {
    background: #e787fc;
}

.vp_select .qtype_thumb_small,
.vp_select_ul .qtype_thumb_small {
    margin-right: 10px;
    vertical-align: middle;
}

/*

#f6ca78, #f3965d, #ac8f63, #49785a, #24795b, #78cba3, #5fcf9c, #9ba963, #ffbd82, #fe5849, #f6ca78, #f0f1b3, #8be7cd


#96cddc
#4fa9b3 --
#046451
#ffba4a --
#e16e5a --
#94ae89 --
#a186c4 --
#be385b
#397685 --
#74a4bf
#f3cd59
#efa097
#df4e78 --
#58457a
#bf9777
#3c6997
#b9c26c
#d94c4c --

*/


/*#########################################
#       popupPage
#########################################*/

.popupPage {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 30px;
    background: #FFF;
    z-index: 10;
}

.popupPage .close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
}

.popupPage h2 {
    margin: 0px;
}


/*#########################################
#       AVATAR
#########################################*/

#avatar_buttons_container .panel-default > .panel-heading {
    background-color: #FFF;
}


/*#########################################
#         tooltip
#########################################*/
*[tooltip] {
  position: relative;

}
*[tooltip]:before{
    content: attr(tooltip);
    background-color: var(--colBlack); /*rgba(0,0,0,.6);*/
    font-size:0.9em;
    color: #fff;
    top: -2em;
    position: absolute;
    /* white-space: nowrap;*/
    padding:5px;
    max-width:100%;
    opacity: 0; /* define initial transition property */
    -webkit-transition: all .4s .4s ease-in-out; /* define transitions */
    transition: all .4s .4s ease-in-out;
    pointer-events: none;
    border-radius: 5px;
    
}
*[tooltip]:hover:before {
  opacity:1;
}




/*#########################################
#         MEDIA QUESRIES
#########################################*/
@media (max-width: 768px) {
    /*xs*/
    body {
        background-position: -160px -400px, calc(80% + 300px) calc(100%);
    }

    .linkerSelectsBloc textarea{
        min-width: 150px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    /*sm*/
    body {
        background-position: calc(50% - 310px) -400px, calc(80% + 300px) calc(100%);
    }

    ul#tabSubjects{
        width: 100%;
        display:flex;
        justify-content: space-around;
    }

    .linkerSelectsBloc textarea{
        min-width: 200px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    /*md*/
    body {
        background-position: calc(50% - 410px) -400px, calc(80% + 300px) calc(100%);
    }
    .text-md-right{text-align:right;}
}

@media (min-width: 1200px) {
    /*lg*/
    body {
        background-position: calc(50% - 480px) -400px, calc(80% + 300px) calc(100%);
    }
    .text-md-right{text-align:right;}
}

/*#########################################
#         special Pages
#########################################*/

.specialPages{
    font-size: 1.2em;
    line-height: 1.4;
}
.specialPages h1{
    margin-bottom: 80px;
}
.specialPages h2{
    margin-top: 150px;
}
.specialPages h4{
    font-weight: bold;
    margin-top: 15px;
    color: #2d63b8;
}
.titreSommaire{
    font-size: 1.2em;
    font-weight: bold;
    margin: 15px 0px;
}
.sommaire li{
    margin-left: 40px;
    list-style-type: disc;
    margin-bottom: 20px;
}
.specialPages button{
    display: inline-block;
    max-width: 300px;
    box-shadow: 0px 0px 5px rgba(0,0,0,.1);
    margin: 0px 10px;
}

.specialPages .capture{
    display: flex;
    justify-content: center;
    margin: 90px 20px;
}
.specialPages img{
    box-shadow: 0px 0px 25px rgba(0,0,0,.3);
    border-radius: 5px;
    margin: auto;
    width: 100%;
}
.specialPages .fen{
    max-width: 600px;
}

.tip {
    position: relative;
    margin: 80px auto 80px auto;
    background-color: #ffe2d0;
    border-radius: 30px;
    border: solid 3px #ed6138;
    max-width: 600px;
    padding: 5px 15px;
    padding-top: 28px;
    color: #cd5534;
}
.tipTitle {
    position: absolute;
    top: -20px;
    background-color: #ffe2d0;
    border-radius: 30px;
    border: solid 3px #ed6138;
    padding: 5px 15px;
    width: 160px;
    text-align: center;
    font-weight: bold;
}

.listeTypesQuestions{
    position: relative;
    background-color: #e6ebf9;
    border: solid 3px #90c5fc;
    font-size: .8em;
    padding: 15px;
    margin: 25px;
    border-radius: 20px;
}
.listeTypesQuestionsTitle{
    position: absolute;
    top: -20px;
    background-color: #e6ebf9;
    border-radius: 30px;
    border: solid 3px #90c5fc;
    padding: 5px 15px;
    width: 260px;
    text-align: center;
    font-weight: bold;
    color: #2d63b8;
    font-size: 1.2em;
}