@-webkit-keyframes fadeEffect {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeEffect {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes anim {
    12.5% {
        stroke-dasharray: 33.9887319946px,242.7766571045px;
        stroke-dashoffset: -26.7054322815px
    }

    43.75% {
        stroke-dasharray: 84.9718299866px,242.7766571045px;
        stroke-dashoffset: -84.9718299866px
    }

    to {
        stroke-dasharray: 2.427766571px,242.7766571045px;
        stroke-dashoffset: -240.3488905334px
    }
}

@keyframes bounce {
    0%,25%,50%,75%,to {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-20px)
    }

    60% {
        transform: translateY(-12px)
    }
}

html body {
    overflow-x: hidden;
    color: #212121;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    transition: background-color .3s
}

img {
    max-width: 100%
}

a {
    text-decoration: none;
    color: #888
}

a:hover {
    text-decoration: underline
}

.height-space {
    height: 30px
}

#header_nav {
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e9e9e9;
    box-shadow: rgba(0,0,0,.329412)0 0 3px 0;
    -webkit-box-shadow: rgba(0,0,0,.329412)0 0 3px 0;
    float: left;
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 10000;
    height: 50px;
    background-position: initial initial;
    background-repeat: initial initial;
    fill: #666;
    top: 0
}

.forcenospeech{display:none !important}

#connected-user,.hidden {
    display: none
}

.top_header {
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #ddd;
    position: fixed;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,.26)
}

.header_left {
    position: fixed;
    float: left;
    top: 0;
    left: 15px;
    z-index: 20
}

.header_center {
    margin-top: 10px;
    z-index: 10;
    position: fixed;
    left: 44%
}

.menu_home {
    position: fixed;
    left: 15px;
    display: block;
    top: 12px
}

.menu_home a,.menu_home a:hover {
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
    padding-top: 5px;
    text-decoration: none
}

.reader_mode {
    position: fixed;
    top: 7px
}

.list_lang_header {
    float: left;
    margin-right: 15px;
    margin-top: 10px
}

.morecontent {
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 30px
}

.liste_langues_translate {
    font-size: 18px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #888
}

.liste_contenu_translate,.liste_langues_translate {
    float: left;
    margin: 10px;
    display: table;
    width: 250px
}

.icon-user {
    width: 22px;
    height: 22px;
    fill: #88c1df
}

.green {
    fill: green
}

.gray {
    fill: gray
}

.icon-homearticle,.smallicon {
    width: 20px;
    height: 20px
}

.icon-homearticle {
    fill: #bbb
}

.icon-homearticle:hover {
    fill: #333
}

.icon-home,.icon-pencil {
    fill: #fff
}

.icon-pencil:hover {
    fill: #b2ebf2
}

.icon-play2:hover,.icon-readermode:hover,.icon-undo:hover {
    fill: #88c1df
}

.ui-icon-next {
    background-color: var(--blue2)
}

.btn_autoplay {
    background-color: var(--green)
}

.ui-icon-prev {
    background-color: var(--blue2);
    width: 33px;
    height: 33px;
    margin-top: 8px;
    float: left
}

#btn_speech.disabled,#btn_speech2.disabled {
    background-color: var(--blue2);
    height: 33px;
    top: 0;
    width: 100px;
    float: left;
    margin-right: 15px
}

.summary-player .icon-vpn_key {
    float: right;
    margin-right: 15px;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #fff;
    margin-top: -4px
}

.summary-player .icon-vpn_key:lang(ar),.summary-player .icon-vpn_key:lang(he) {
    float: left
}

.summary-player .icon-bubbles {
    float: right;
    margin-right: 15px;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #fff;
    margin-top: -4px
}

.summary-player .icon-bubbles:lang(ar),.summary-player .icon-bubbles:lang(he) {
    float: left
}

.summary-player .icon-list {
    float: right;
    margin-right: 15px;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #fff;
    margin-top: -4px;
}

.summary-player .icon-list:lang(ar),.summary-player .icon-list:lang(he) {
    float: left
}

#lang option {
    color: #000
}

.summary-player {
    height: 0;
    color: #fff;
    cursor: pointer;
    padding-left: 30px;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 30px;
    padding-bottom: 60px;
    background: linear-gradient(183deg,#4c90b3 15%,rgb(103 176 199) 100%);
    font-size: 25px;
    font-weight: 600
}

.summary-player:lang(ar),.summary-player:lang(he) {
    padding-right: 20px;
    text-align: right;
}

.fade_translate {
    margin-top: 15px;
    margin-bottom: 15px
}

.forward,.player {
    display: inline
}

.forward {
    margin-right: 10px;
    padding-left: 0
}

.iframe_youtube_translate {
    width: 171px;
    height: 171px;
    border: 0
}

.vignette-video {
    width: 171px;
    height: 171px
}

.circle_youtub {
    position: fixed;
    text-align: center;
    display: block;
    background-color: rgba(153,153,153,.5);
    border: 2px solid #fff;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    left: 70px;
    top: 220px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,.6)
}

.circle_youtub:hover {
    background-color: rgba(204,204,204,.5)
}

.play_youtub {
    position: relative;
    border-top: 8px solid transparent;
    border-left: 12px solid #fff;
    border-bottom: 8px solid transparent;
    margin-left: 11px;
    margin-top: 7px
}

hr {
    border: 1px solid #a4d6db
}

h1,h2 {
    font-weight: 400;
    letter-spacing: 1px
}

h1 {
    margin: 0;
    font-size: 45px;
    color: #ccc
}

h2 {
    font-size: 30px;
    color: #4c90b3
}

.marges,.marges_lexique {
    text-decoration: none;
    text-align: left;
    font-size: 22px;
    line-height: 1.5625
}

.marges {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.marges_lexique {
    padding: 150px 10% 50px;
    color: #0c0c0c;
    background-color: #edf2f2
}

.marges_lexique a {
    color: #01579b
}

.marges_lexique .texte,.marges_lexique a {
    text-decoration: none;
    font-size: 18px
}

.marges_lexique .right {
    text-align: right;
    font-size: 22px;
    color: #aaa
}

#s_player .marges_lexique {
    padding: 0
}

.contentText {
    font-size: 22px;
    text-align: justify;
    text-justify: inter-word;
    word-wrap: break-word
}

.contentText hr,.contentText_bas {
    text-align: center;
    line-height: 0
}

.left,.right {
    font-size: 40px
}

.right {
    text-align: right
}

.left {
    margin: 0;
    padding: 0
}

.contentText hr {
    display: block;
    clear: both;
    height: 0;
    margin: 15px 0 45px;
    padding: 15px 0;
    border: 0;
    font-size: 30px;
    line-height: 1
}

.contentText h1 {
    color: #265f87;
    font-size: 34px
}

.contentText hr:after {
    content: "✽✽✽";
    height: 0;
    letter-spacing: 1em;
    color: #4c90b3
}

.contentText .v {
    background-color: #ddd;
    color: #01579b
}

.contentText .v2 {
    background-color: #b2dfdb;
    color: #01579b
}

.contentText .v3 {
    background-color: red;
    color: #fff
}

.ralert {
    color: red;
}

.highlight,.highlight2,.highlight2v {
    background-color: #ffe082!important;
    color: #000!important;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}

.contentText .hl3v,.contentText .hl3vt {
    box-shadow: -1px 2px 5px 1px rgba(0,0,0,.2);
    margin: 3px
}

.contentText .hl3v {
    background: #ddd
}

.contentText .hl3vt {
    background: #eee;
    color: #000
}

.pup_result.tscroll .content ul,.ttext-menu {
    margin: 20px
}

.notools,.ttext p {
    background-color: #fff;
    padding: 10px;
    color: #999
}

.otext .sentence {
    background-color: #fff;
    color: #666
}

.uv {
    color: #000
}

.header-t-bib,.header-t-cat {
    background-color: #4c90b3;
    text-align: left;
    width: 70%;
    padding: 90px 15% 40px
}

.header-t-bib h1,.header-t-cat h1 {
    color: #e0f7fa;
    font-size: 34px;
    margin-bottom: 0
}

.header-t-bib .sous-titre-t {
    color: #e0f7fa;
    font-size: 20px;
    line-height: 28px
}

.header-t-cat {
    padding: 65px 15%;
    margin-bottom: 40px
}

.header-t-art {
    margin: 0;
    text-align: left;
    z-index: 200;
    border-top: 145px solid;
    height: auto
}

.right-header-t-art h1 {
    margin: 20px 0 0;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #999;
    left: 15%;
    line-height: 40px
}

.pages_title {
    font-size: 20px;
    color: #666;
    padding-left: 15px
}

.left-header-t-art {
    position: fixed;
    float: left;
    padding-bottom: 10px
}

.right-header-t-art {
    padding-right: 10px;
    padding-left: 10px
}

.menu_translate,.menu_translate li {
    background-color: #88c1df;
    display: inline-block
}

.menu_translate {
    padding-bottom: 0;
    padding-left: 0;
    position: fixed;
    top: 50px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc
}

.menu_translate ul,.menu_translate_home ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%
}

.menu_translate li {
    float: left;
    padding: 11px 0 5px;
    height: 35px
}

.menu_translate ul li a,.menu_translate_home ul li a {
    font-size: 25px;
    text-decoration: none;
    color: #fff
}

.menu_translate ul li a:hover,.menu_translate_home ul li a:hover {
    color: #fff
}

.nav-pills-loecsen>li.active>a,.nav-pills-loecsen>li.active>a:focus,.nav-pills-loecsen>li.active>a:hover {
    text-align: left;
    color: #fff!important;
    padding-bottom: 7px;
    border-bottom: 3px solid #fff
}

#home_content {
    text-decoration: none;
    text-align: left;
    font-size: 22px;
    line-height: 1.5625
}

.menu_translate_home li {
    padding: 11px 0 5px
}

#home_content .tabcontent {
    width: 900px
}

#header-t-art-actions {
    box-shadow: 0 2px 5px rgba(0,0,0,.26)
}

div.logomenu {
    padding-top: 3px;
    width: 100%;
    z-index: 5000;
    background-color: #d6eaf5;
    font-size: 0;
    overflow: auto;
    white-space: nowrap
}

#header-t-art-actions .logomenu .left {
    background: #f4511e;
    font-size: 0
}

.logomenu a.active,.logomenu a:hover {
    background-color: #fff;
    fill: #88c1df
}

#forgetMe ul {
    margin: 10px
}

#forgetMe li,#header-t-art-actions .tabcontent li {
    list-style-type: decimal;
    padding: 5px;
    margin-left: 10px
}

#header-t-art-actions input[type=search] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fff;
    padding: 12px 20px 12px 40px
}

#header-t-art-actions input[type=email] {
    -webkit-appearance: textfield;
    background-color: #fff;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 1px;
    border: 1px solid #4c90b3;
    margin-bottom: 15px;
    margin-top: 15px
}

#bigger,#smaller {
    font-size: 24px
}

#ajouter,textarea {
    font-size: 18px
}

#donext,#timer_loader,.form-wrap .tabs-content div[id$=tab-content] {
    display: none
}

#simple_loader {
    display: block;
    background: url(/images2/mywordlist/ring-alt.svg)no-repeat center center;
    height: 100%;
    width: 30%;
    margin: auto
}

.loader {
    display: block
}

.loadingoverlay {
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.9);
    background-size: 100px
}

.translate-box {
    margin: 0;
    padding-top: 50px
}

.top-marge {
    padding-top: 100px
}

.chapitre {
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 30px;
    overflow: hidden;
    padding-top: 50px
}

.chapitre-menu {
    border-left: 5px solid #4c90b3;
    padding-left: 20px;
    margin-top: 40px
}

.chapitre-menu h1 {
    font-size: 17px;
    line-height: 16px;
    padding-bottom: 0;
    padding-top: 0;
    font-weight: 400;
    color: #757575
}

.chapitre-menu a,.rating a {
    color: #4c90b3;
    text-decoration: none;
    font-size: 22px
}

.border-blue-image {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    border: 5px solid #fff
}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    color: #000;
    width: 100%;
    display: inline-block;
    border: 1px solid #4c90b3;
    padding: 10px
}

.text-select {
    font-size: 18px;
    line-height: 25px;
    color: #fff
}

.bouton-t-1 {
    border-radius: 5px;
    border: 0;
    display: inline-block;
    outline: 0;
    padding: 6px 16px;
    margin-bottom: 5px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none!important;
    color: #fff;
    background-color: #f4511e;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    font-size: 20px
}

.bouton-t-1 span,.button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: .5s
}

.bouton-t-1 span:after {
    content: " »";
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: .5s
}

.bouton-t-1:hover span,.button:hover span {
    padding-right: 25px
}

.bouton-t-1:hover span:after,.button:hover span:after {
    opacity: 1;
    right: 0
}

.rating {
    margin-top: 5px
}

.rating a {
    color: #aaa;
    font-size: 1em;
    transition: color .4s
}

.rating a:focus,.rating a:focus~a,.rating a:hover,.rating a:hover~a {
    color: orange;
    cursor: pointer
}

.col-1,.col-2 {
    width: 49.99999%
}

.col-1 {
    float: left
}

.col-2 {
    display: inline-block;
    text-align: center
}

.Footer_translate {
    border-top: 1px solid #e9e9e9;
    box-shadow: 0 0 3px 0 rgba(0,0,0,.33);
    -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,.33);
    width: 100%;
    background: #fff;
    text-align: center;
    font-size: 13px;
    color: #999
}

.title {
    margin: 0;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
    padding-top: 30px
}

.content-heading {
    width: 350px;
    text-align: left;
    background: #4c90b3;
    padding: 11px 0 12px 14px;
    margin-bottom: 40px;
    margin-top: 15px;
    left: 0;
    position: absolute
}

.content-heading,.content-heading a {
    font-size: 18px;
    color: #fff
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
    overflow-x: hidden;
    transition: .5s;
    padding-top: 60px
}

.sidenav li,ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.line {
    border-top: 1px solid #4c90b3;
    border-bottom: 1px solid #4c90b3
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: .3s
}

.offcanvas a:focus,.sidenav a:hover {
    color: #4c90b3
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px
}

.button {
    background-color: #f4511e;
    border: 0;
    color: #fff;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    margin: 5px
}

.button span:after {
    content: " »";
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: .5s
}

.radio-group input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none
}

.radio-group label {
    color: #332f35;
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    padding: 5px 20px 0
}

.radio-group input[type=radio]:checked+label {
    color: #09c;
    background: #fff
}

.radio-group input[type=radio]:hover+label {
    color: #09c;
    background: #fff
}

.radio-group {
    border: solid 3px #88c1df;
    display: inline-block;
    border-radius: 10px;
    overflow: hidden
}

.c_ex {
    display: block
}

@media screen and (max-height:450px) {
    .sidenav {
        padding-top: 15px
    }

    .sidenav a {
        font-size: 18px
    }
}

@media print {
    body * {
        visibility: hidden
    }

    #section-to-print * {
        visibility: visible
    }

    #section-to-print {
        position: absolute;
        top: 0
    }

    .cadre_image {
        border: solid 0#ccc;
        box-shadow: 0 0 0#fff;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        margin-top: 15px;
        margin-bottom: 15px
    }

    .hidden {
        display: block;
        font-size: 30px;
        text-align: center;
        padding-top: 10px
    }

    .no-print {
        display: none
    }
}

.printDiv {
    font-size: 17px;
    border-spacing: 0;
    margin: inherit;
    counter-reset: rowNumber;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    padding-bottom: 30px
}

.contentfiches table tr:nth-child(even) {
    background: #d3eaf7
}

.contentfiches table tr:nth-child(even):hover {
    background: #ffcdd2
}

.printDiv td,.printDiv th {
   
    text-align: left;
    padding: 8px
}

.printDiv th {
    padding: 9px 8px;
    background-color: #88c1df;
    color: #fff
}

.printDiv tr {
    cursor: pointer
}

.printDiv tr.c {
    counter-increment: rowNumber
}

.printDiv tr:hover {
    background-color: #ffcdd2;
    color: #000
}

.printDiv tr:active {
    background-color: #80deea;
    color: #000;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.printDiv tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: .5em
}

.printDiv tr:not(.v) {
    background-color: #ffca28
}

.printDiv tr:not(.v):hover {
    background-color: #ffa000
}

.flags_menu {
    border-top-left-radius: 45px 40px;
    border-top-right-radius: 45px 40px;
    border-bottom-left-radius: 45px 40px;
    border-bottom-right-radius: 45px 40px
}

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

.marg {
    padding: 10px 0
}

.progress-loecsen {
    margin-bottom: 10px;
    display: none
}

.progress-bar-loecsen {
    background-color: #4c90b3!important
}

.v-d {
    clear: both;
    position: relative
}

.v-d:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden
}

.v-d .col:not(:first-child):after {
    background: #4c90b3;
    bottom: 0;
    content: " ";
    margin-left: 0;
    position: absolute;
    top: 0;
    width: 1px
}

.cont {
    position: relative;
    margin: 2px auto;
    padding: 0
}

.col button {
    background: 0 0;
    border: 0;
    font-size: 20px;
    color: #777;
    line-height: 16px
}

.col button.button-content-simple {
    font-size: 14px!important
}

.tooltipster-base .fd1:nth-of-type(1),.tooltipster-base .lt2 {
    margin: 7px 0;
    padding: 7px 0 0;
    border-top: 1px solid #888!important;
    display: block;
    font-size: 17px!important;
    text-align: left
}

.tooltipster-base .lt2 span {
    display: block
}

.cont .col {
    float: left;
    display: inline;
    margin-left: 2px;
    margin-right: 2px
}

.tooltip_loop {
    font-weight: 700;
    color: #0097a7
}

.toolsPic {
    float: right;
    margin-top: 5px
}

.toolsPic img {
    height: 16px
}

.sound {
    float: left;
    padding-left: 20px
}

.soundTextOff,.soundTextOn {
    color: #fff;
    font-weight: 700
}

.soundTextOn {
    color: #4c90b3
}

.tooltipster-default {
    border-radius: 3px;
    border: 2px solid #4c90b3;
    background: #dfdedb;
    color: #000
}

.tooltipster-default .tooltipster-content {
    font-weight: 400;
    line-height: 16px;
    padding: 8px 10px;
    overflow: hidden
}

.tooltipster-api,.tooltipster-light,.tooltipster-validate-admin {
    border-radius: 2px;
    border: 1px solid #fff;
    background: #fff;
    color: gray;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}

.tooltipster-api .tooltipster-content,.tooltipster-light .tooltipster-content {
    padding: 4px
}

.tooltipster-api,.tooltipster-validate-admin {
    border: 1px solid silver
}

.tooltipster-validate-admin .tooltipster-content {
    padding: 4px;
    background-color: #d2f7e4
}

.tooltipster-icon {
    cursor: help;
    margin-left: 4px
}

.tooltipster-shadow {
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 14px rgba(0,0,0,.3);
    color: #2c2c2c
}

.tooltipster-shadow .tooltipster-content {
    font-size: 14px;
    line-height: 16px;
    padding: 8px 10px
}

.tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    max-width: 300px;
    text-align: left;
    overflow: visible
}

.tooltipster-base .tooltipster-content {
    overflow: hidden
}

.tooltipster-base .icon {
    height: 15px;
    width: 15px
}

.tooltipster-base .disabled {
    display: none!important
}

.tooltipster-base .right {
    position: relative;
    float: right;
    margin-right: 8px
}

.tooltipster-base .right2 {
    position: absolute
}

.tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.tooltipster-arrow span,.tooltipster-arrow-border {
    display: block;
    width: 0;
    height: 0;
    position: absolute
}

.tooltipster-arrow-top span,.tooltipster-arrow-top-left span,.tooltipster-arrow-top-right span {
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
    border-top: 8px solid;
    bottom: -7px
}

.tooltipster-arrow-top .tooltipster-arrow-border,.tooltipster-arrow-top-left .tooltipster-arrow-border,.tooltipster-arrow-top-right .tooltipster-arrow-border {
    border-left: 9px solid transparent!important;
    border-right: 9px solid transparent!important;
    border-top: 9px solid;
    bottom: -7px
}

.tooltipster-arrow-bottom span,.tooltipster-arrow-bottom-left span,.tooltipster-arrow-bottom-right span {
    border-left: 8px solid transparent!important;
    border-right: 8px solid transparent!important;
    border-bottom: 8px solid;
    top: -7px
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,.tooltipster-arrow-bottom-left .tooltipster-arrow-border,.tooltipster-arrow-bottom-right .tooltipster-arrow-border {
    border-left: 9px solid transparent!important;
    border-right: 9px solid transparent!important;
    border-bottom: 9px solid;
    top: -7px
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,.tooltipster-arrow-bottom span,.tooltipster-arrow-top .tooltipster-arrow-border,.tooltipster-arrow-top span {
    left: 0;
    right: 0;
    margin: 0 auto
}

.tooltipster-arrow-bottom-left span,.tooltipster-arrow-top-left span {
    left: 6px
}

.tooltipster-arrow-bottom-left .tooltipster-arrow-border,.tooltipster-arrow-top-left .tooltipster-arrow-border {
    left: 5px
}

.tooltipster-arrow-bottom-right span,.tooltipster-arrow-top-right span {
    right: 6px
}

.tooltipster-arrow-bottom-right .tooltipster-arrow-border,.tooltipster-arrow-top-right .tooltipster-arrow-border {
    right: 5px
}

.tooltipster-arrow-left span,.tooltipster-arrow-right span {
    border-top: 8px solid transparent!important;
    border-bottom: 8px solid transparent!important;
    top: 50%;
    margin-top: -7px
}

.tooltipster-arrow-left span {
    border-left: 8px solid;
    right: -7px
}

.tooltipster-arrow-left .tooltipster-arrow-border,.tooltipster-arrow-right .tooltipster-arrow-border {
    top: 50%;
    border-top: 9px solid transparent!important;
    border-bottom: 9px solid transparent!important;
    margin-top: -8px
}

.tooltipster-arrow-left .tooltipster-arrow-border {
    right: -7px;
    border-left: 9px solid
}

.tooltipster-arrow-right span {
    border-right: 8px solid;
    left: -7px
}

.tooltipster-arrow-right .tooltipster-arrow-border {
    left: -7px;
    border-right: 9px solid
}

.tooltipster-fade {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity
}

.tooltipster-fade-show {
    opacity: 1
}

.tooltipster-grow {
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -o-transform: scale(0,0);
    -ms-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform;
    -webkit-backface-visibility: hidden
}

.tooltipster-grow-show {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    -moz-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    -ms-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    -o-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    transition-timing-function: cubic-bezier(.175,.885,.32,1.15)
}

.tooltipster-swing {
    opacity: 0;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -o-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    transform: rotateZ(4deg);
    -webkit-transition-property: -webkit-transform,opacity;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    -ms-transition-property: -ms-transform;
    transition-property: transform
}

.tooltipster-swing-show {
    opacity: 1;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transition-timing-function: cubic-bezier(.23,.635,.495,2.4);
    -moz-transition-timing-function: cubic-bezier(.23,.635,.495,2.4);
    -ms-transition-timing-function: cubic-bezier(.23,.635,.495,2.4);
    -o-transition-timing-function: cubic-bezier(.23,.635,.495,2.4);
    transition-timing-function: cubic-bezier(.23,.635,.495,2.4)
}

.tooltipster-fall,.tooltipster-slide {
    -webkit-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    -moz-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    -ms-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    -o-transition-timing-function: cubic-bezier(.175,.885,.32,1.15);
    transition-timing-function: cubic-bezier(.175,.885,.32,1.15)
}

.tooltipster-fall {
    top: 0;
    -webkit-transition-property: top;
    -moz-transition-property: top;
    -o-transition-property: top;
    -ms-transition-property: top;
    transition-property: top
}

.tooltipster-fall.tooltipster-dying,.tooltipster-slide.tooltipster-dying {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;
    opacity: 0
}

.tooltipster-fall.tooltipster-dying {
    top: 0!important
}

.tooltipster-slide {
    left: -40px;
    -webkit-transition-property: left;
    -moz-transition-property: left;
    -o-transition-property: left;
    -ms-transition-property: left;
    transition-property: left
}

.tooltipster-slide.tooltipster-dying {
    left: 0!important
}

.tooltipster-content-changing {
    opacity: .5;
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1)
}

.img_user {
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 4px
}

.audioonoff {
    float: left;
    width: 40px;
    padding-top: 5px
}

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

.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden
}

.cmn-toggle+label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

input.cmn-toggle-round-flat+label {
    padding: 2px;
    width: 80px;
    height: 40px;
    background-color: #ddd;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px
}

input.cmn-toggle-round-flat+label:after,input.cmn-toggle-round-flat+label:before {
    display: block;
    position: absolute;
    content: ""
}

input.cmn-toggle-round-flat+label,input.cmn-toggle-round-flat+label:before {
    -webkit-transition: background .4s;
    -moz-transition: background .4s;
    -o-transition: background .4s;
    transition: background .4s
}

input.cmn-toggle-round-flat+label:before {
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px
}

input.cmn-toggle-round-flat+label:after {
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 42px;
    background-color: #ddd;
    -webkit-border-radius: 52px;
    -moz-border-radius: 52px;
    -ms-border-radius: 52px;
    -o-border-radius: 52px;
    border-radius: 42px;
    -webkit-transition: margin .4s,background .4s;
    -moz-transition: margin .4s,background .4s;
    -o-transition: margin .4s,background .4s;
    transition: margin .4s,background .4s
}

input.cmn-toggle-round-flat:checked+label {
    background-color: #88c1df
}

input.cmn-toggle-round-flat:checked+label:after {
    margin-left: 33px;
    background-color: #88c1df
}


  #prescontent .acco21rdion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
        transition: 0.4s;
        border:1px solid #ddd;
    }

    #prescontent .active, .acco21rdion:hover {
        background-color: #ccc;
    }

    #prescontent img {
        width: 150px;
    }


    #prescontent .acco21rdion:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    #prescontent .active:after {
        content: "\2212";
    }

    #prescontent .panel {
        padding: 0 18px;
        background-color: #fbfbfb;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        border:1px solid #ddd;
        margin-top:-4px;
    }


    #prescontent .presentation {
        padding:0;
        margin:25px;
        box-shadow: none;
    }

    #prescontent div.logomenu {
        width: 80px;
        height: 80px;
        background-color: var(--blue3);
        font-size: 0;
        overflow: auto;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgb(0 0 0 / 26%);
        border-radius: 50%;
        margin: 0 auto;
    }

    #prescontent div.logomenu .icon {
        fill: var(--blue2);
        width: 40px;
        height: 65px;

    }

    #prescontent .icon {
        fill: white;

    }

    #prescontent .iconhelp {
        fill: var(--blue2);
        width: 25px;
        height: 25px;
        margin-right: 10px;
    }

    #prescontent .icon2 {
        fill: #fff;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        padding: 20px;
        background: var(--blue2);

    }

    #prescontent .icon-gamepad {
        float: none;
    }

    #prescontent .features-wrapper {
        margin-top: 0px;
        display: grid!important;
        gap: 0px;
        grid-template-columns: repeat(auto-fit, [col-start] minmax(350px, 1fr) [col-end]);
    }

    #prescontent .features-single {
        text-align: center;
        padding:25px 0;
    }

    #d-pres-opinion .features-single .stars {
    direction: rtl;
}

    #prescontent  .features-single p{
        text-align: left;
    }
    /* Style pour le champ de commentaire dans HELP*/
         #help #comment {
            width: 100%;
            height: 100px;
            resize: none;
            margin-bottom: 10px;
        }

      #d-pres-opinion {display:none}
        
      #d-pres-opinion  #btn-submit {
            color: white;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }

      #d-pres-opinion  #btn-submit:hover {
            background-color: #3e8e41;
        }
        
        #d-pres-opinion .summary-player.todo{
            background: linear-gradient(183deg,#ff6550 15%,#db9a91 100%);
        }

        /* Style pour les étoiles de notation */
      #d-pres-opinion  .rating {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }

      #d-pres-opinion  .rating label {
            color: #ddd;
            font-size: 50px;
            cursor: pointer;
            font-family: 'Arial', sans-serif;
            transition: color 0.2s;
        }

      #d-pres-opinion  .rating input[type="radio"] {
            display: none;
        }

       #d-pres-opinion .rating label:hover,
       #d-pres-opinion .rating label:hover ~ label,
       #d-pres-opinion .rating input[type="radio"]:checked ~ label {
            color: #FFD700;
            flex-direction: row-reverse;
        }



        /* Style pour le bouton de soumission */
        #btn-submit {
            background-color: #4CAF50;
            border: none
        }
        
        #d-pres-opinion .g-recaptcha{margin:10px 0}
        
        #d-pres-opinion #opinion-step-2 {display:none}

        #d-pres-opinion #trust-o-img {
            cursor:pointer;
            margin:10px 0 20px 0
        }
    
#forgetMe {
    margin-top: 40px;
    font-size: 18px;
    border: 2px solid #eee;
    padding: 15px;
    margin-bottom: 20px;
    display: none;
    border-radius: 5px
}

#forgetMe p,.forgetMe_left {
    font-weight: 700
}

.forgetMe_left {
    margin-top: 15px
}

.close-forgive,.close-forgive a {
    margin-top: 15px;
    width: 145px;
    height: 50px;
    text-align: center;
    padding-top: 5px;
    font-size: 25px;
    border: 0;
    text-decoration: none;
    color: #fff;
    background: orange;
    cursor: pointer
}

.box-right {
    display: inline-block;
    float: right;
    padding-right: 15px
}

.box-left {
    display: inline-block;
    float: left;
    padding-left: 15px
}

.custom-dropdown--large {
    font-size: 1.5em
}

.custom-dropdown--small {
    font-size: .7em
}

.custom-dropdown__select {
    font-size: inherit;
    padding: .5em;
    margin: 0
}

.custom-dropdown__select--white {
    background-color: #fff;
    color: #666
}

@supports (pointer-events:none) and ((-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none)) {
    .custom-dropdown {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
        margin-left: 20px
    }

    .custom-dropdown__select {
        padding-right: 2.5em;
        border: 2px solid #88c1df;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    .custom-dropdown::after,.custom-dropdown::before {
        content: "";
        position: absolute;
        pointer-events: none
    }

    .custom-dropdown::after {
        content: "▼";
        height: 1em;
        font-size: .625em;
        line-height: 1;
        right: 1.2em;
        top: 50%;
        margin-top: -.5em
    }

    .custom-dropdown::before {
        width: 2em;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0 3px 3px 0
    }

    .custom-dropdown__select[disabled] {
        color: rgba(0,0,0,.3)
    }

    .custom-dropdown.custom-dropdown--disabled::after {
        color: rgba(0,0,0,.1)
    }

    .custom-dropdown--white::before {
        top: .5em;
        bottom: .5em;
        background-color: #fff;
        border-left: 1px solid rgba(0,0,0,.1);
        border-right: 2px solid #88c1df
    }

    .custom-dropdown--white::after {
        color: #666
    }@    -moz-document url-prefix() {
        .custom-dropdown__select{padding-right: .9em
    }

    .custom-dropdown--large .custom-dropdown__select {
        padding-right: 1.3em
    }

    .custom-dropdown--small .custom-dropdown__select {
        padding-right: .5em
    }
}}

.marges_t,div.zui-pager-box {
    padding: 0
}

.left-div,.right-div {
    display: inline-block;
    text-align: left
}

.left-div {
    align: left
}

.right-div {
    vertical-align: top;
    padding-left: 5px
}

.center-div {
    width: 100%;
    text-align: center
}

.tra .marges {
    padding-left: 10%;
    padding-right: 10%
}

.tra .numero {
    background-color: #d6e2e6
}

.tra .color,.tra .numero {
    color: #4c90b3
}

.tra .titre,.tra .titre-top {
    padding-left: 10px;
    background-color: #4c90b3
}

.tra .titre .texte {
    padding-left: 40px
}

.tra .titre-top {
    padding-top: 10px;
    color: #fff;
    font-weight: 700;
    min-height: 45px;
    max-width: 100%;
    border-radius: 5px 5px 0 0
}

.tra .content {
    padding: 20px;
    color: #284952;
    overflow: hidden;
    padding-top:0px;
}

.tra .trait {
    height: 1px;
    width: 100%;
    background: #4c90b3
}

.details-inside{
    background: #fff;
    margin-left: 30px;
    margin-right: 30px;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 20px;
 
}

.archive a,.tra .archive {
    padding-left: 10px;
    text-decoration: underline;
    font-size: 16px;
    color: #4c90b3;
    padding-top: 15px;
    height: 50px
}

.tra .choice {
    padding: 0;
    min-height: 120px
}

#notes .cercle {
    width: 2em;
    height: 2em;
    border-radius: 15%;
    border: 2px solid #88c1df;
    padding: 5px;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 20px
}

#forgetMe,#notes .cercle.active,#notes .cercle:hover,.form-wrap .tabs h3 a.active {
    background-color: #fff
}

#notes .cercle,.radiobtn,.tra .box,.tra .tableau .checkbox {
    -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25))
}

#notes .cercle,.tra .box {
    webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25))
}

.tra .box {
    margin-bottom: 30px;
    background-color: #d6eaf5;
    border-radius: 5px
}

.tra .button_validate,.tra .total {
    color: #fff;
    text-align: center;
    font-size: 40px;
    padding: 20px
}

.tra .total {
    background-color: #366572;
    font-weight: 700;
    margin-bottom: 5px
}

.tra .button_validate {
    background-color: #f4511e;
    border: 0;
    cursor: pointer;
    margin: 5px
}

.tra .tableau p {
    clear: both;
    margin: 0 0 5px 160px
}

.tra .tableau p span {
    float: left;
    min-width: 120px;
    margin: 2px 0 0-160px;
    text-align: left
}

.tra .tableau input[type=checkbox] {
    opacity: 0
}

.radiobtn,.tra .tableau .checkbox {
    width: 30px;
    height: 30px;
    display: inline-block;
    cursor: pointer;
    -webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    position: relative
}

.tra .tableau .dark-blue input[type=checkbox]+label span.checkbox {
    background: #fff;
    border-radius: 50%;
    border: 5px solid #ecf0f1
}

.tra .tableau .dark-blue input[type=checkbox]:checked+label span.checkbox:before {
    background: #8bc34a;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: var(--blue2);
    border-radius: 50%
}

.tra .time input[type=number] {
    background-color: #fff;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 8px;
    width: 50px;
    font-size: 23px
}

.tra .time select {
    background-color: #fff;
    border-radius: 0;
    height: 50px;
    width: 70px;
    font-size: 23px;
    border: 1px solid #eee
}

.tra .cl2 {
    color: #284952;
    width: 100%
}

.tra .checklist {
    margin-bottom: 20px;
    list-style: none;
    height: 10em;
    overflow-y: scroll;
    width: 100%
}

.tra .checklist,.tra .checklist li {
    margin-left: 0;
    padding: 0
}

.tra .liste input[type=text] {
    width: 70px;
    padding: 5px
}

.tra .cl2 label {
    padding: .2em .2em .2em 25px
}

.tra .checklist label {
    display: block;
    padding-left: 25px;
    text-indent: -25px
}

#notes .icon {
    display: block;
    width: 1.125em;
    height: 1.125em;
    stroke-width: 0;
    stroke: currentColor;
    fill: #999;
    float: left;
    position: relative;
    left: 50%;
    top: 20%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: pointer
}

.tra .icon_2,.tra .icon_3,.tra .icon_4 {
    width: 1.25em;
    height: 1.25em;
    padding-top: 5px;
    fill: #4c90b3;
    cursor: pointer
}

.tra .icon_3,.tra .icon_4 {
    fill: #8bc34a
}

.tra .icon_4 {
    fill: #f4511e
}

#menu .slider .bar.btn_playerc,.tra .progress ul {
    margin-left: 0
}

.tra .progress ol {
    counter-reset: stats;
    display: table
}

.tra .progress li {
    list-style-type: none;
    counter-increment: stats;
    margin-bottom: 10px;
    display: table-row
}

.tra .progress li:before {
    content: counter(stats)".";
    padding: 5px 20px 6px;
    margin-right: 8px;
    font-weight: 700;
    font-size: 1em;
    color: #4c90b3;
    display: table-cell;
    text-align: right
}

.clock-container {
    background: rgba(200,200,200,.9);
    padding: 2em;
    border-radius: .5em;
    max-height: 500px;
    max-width: 450px
}

.clock {
    border-radius: 50%;
    background: #fff url(/images2/mywordlist/ios_clock.svg)no-repeat center;
    background-size: 88%;
    height: 20em;
    position: relative;
    width: 20em
}

.clock.show {
    opacity: 1;
    transition: all 2.5s cubic-bezier(.12,1.03,.34,1)
}

#h0 {
    -webkit-transform: translate(0,-220px);
    -o-transform: translate(0,-220px);
    transform: translate(0,-220px)
}

#h1 {
    -webkit-transform: rotate(35deg) translate(0,-225px);
    -o-transform: rotate(35deg) translate(0,-225px);
    transform: rotate(35deg) translate(0,-225px)
}

#h1-2 {
    -webkit-transform: rotate(35deg) translate(0,-245px);
    -o-transform: rotate(35deg) translate(0,-245px);
    transform: rotate(35deg) translate(0,-245px)
}

#h2 {
    -webkit-transform: rotate(65deg) translate(0,-230px);
    -o-transform: rotate(65deg) translate(0,-230px);
    transform: rotate(65deg) translate(0,-230px)
}

#h3 {
    -webkit-transform: rotate(95deg) translate(0,-240px);
    -o-transform: rotate(95deg) translate(0,-240px);
    transform: rotate(95deg) translate(0,-240px)
}

#h4 {
    -webkit-transform: rotate(125deg) translate(0,-250px);
    -o-transform: rotate(125deg) translate(0,-250px);
    transform: rotate(125deg) translate(0,-250px)
}

#h5 {
    -webkit-transform: rotate(150deg) translate(0,-260px);
    -o-transform: rotate(150deg) translate(0,-260px);
    transform: rotate(150deg) translate(0,-260px)
}

#h6 {
    -webkit-transform: rotate(180deg) translate(0,-260px);
    -o-transform: rotate(180deg) translate(0,-260px);
    transform: rotate(180deg) translate(0,-260px)
}

#h7 {
    -webkit-transform: rotate(210deg) translate(0,-260px);
    -o-transform: rotate(210deg) translate(0,-260px);
    transform: rotate(210deg) translate(0,-260px)
}

#h8 {
    -webkit-transform: rotate(235deg) translate(0,-260px);
    -o-transform: rotate(235deg) translate(0,-260px);
    transform: rotate(235deg) translate(0,-260px)
}

#h9 {
    -webkit-transform: rotate(265deg) translate(0,-250px);
    -o-transform: rotate(265deg) translate(0,-250px);
    transform: rotate(265deg) translate(0,-250px)
}

#h10 {
    -webkit-transform: rotate(295deg) translate(0,-240px);
    -o-transform: rotate(295deg) translate(0,-240px);
    transform: rotate(295deg) translate(0,-240px)
}

#h11 {
    -webkit-transform: rotate(325deg) translate(0,-230px);
    -o-transform: rotate(325deg) translate(0,-230px);
    transform: rotate(325deg) translate(0,-230px)
}

.sep {
    height: 10px;
    width: 10px;
    text-align: center;
    top: 195px;
    left: 220px;
    color: #fff;
    font-size: 20px
}

.sep:after {
    content: "";
}

.clock:after,.clock:before,.sep {
    border-radius: 50%;
    position: absolute
}

.clock:after,.clock:before {
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.clock:before {
    background: #000;
    width: 6%;
    height: 6%;
    z-index: 0
}

.clock:after {
    background: red;
    width: 2%;
    height: 2%;
    z-index: 10
}

.hours-container,.minutes-container,.seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.hours,.minutes {
    width: 2.5%;
    height: 20%;
    left: 48.75%;
    top: 30%;
    transform-origin: 50% 100%;
    position: absolute;
    background: #000;
    border-radius: 85%/10%
}

.minutes {
    border-radius: 150%/10%;
    width: 2%;
    height: 35%;
    left: 49%;
    top: 15%
}

.hours-container {
    animation: rotate 43200s infinite linear
}

.minutes-container {
    transition: transform .3s cubic-bezier(.4,2.08,.55,.44)
}

.seconds-container {
    transition: transform .2s cubic-bezier(.4,2.08,.55,.44)
}

.form-wrap {
    background-color: #fff;
    width: 320px;
    margin: 0 auto;
    box-shadow: 0 1px 8px #bebebe;
    -webkit-box-shadow: 0 1px 8px #bebebe;
    -moz-box-shadow: 0 1px 8px #bebebe
}

#pres #intropres,.form-wrap .tabs {
    overflow: hidden
}

.form-wrap .tabs h3 {
    float: left;
    width: 50%
}

.form-wrap .tabs h3 a {
    padding: .5em 0;
    text-align: center;
    font-weight: 400;
    background-color: #e6e7e8;
    display: block;
    color: #666
}

.form-wrap .tabs-content {
    padding: 1.5em
}

.form-wrap .tabs-content .active {
    display: block!important
}

.form-wrap form .button:hover {
    background-color: #4c90b3
}

.form-wrap form .checkbox {
    visibility: hidden;
    padding: 20px;
    margin: .5em 0 1.5em
}

.form-wrap form .checkbox:checked+label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1
}

.form-wrap form label[for] {
    position: relative;
    padding-left: 20px;
    cursor: pointer
}

.form-wrap .help-text {
    margin-top: .6em
}

.form-wrap .help-text p {
    text-align: center;
    font-size: 14px
}

.center,.zui-pager small dpaginator {
    width: 100%;
    text-align: center
}

.zui-pager--center {
    text-align: center
}

.zui-pager--right {
    text-align: right
}

.zui-pager .btn-group {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block
}

.zui-pager .btn-group__item {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 40px;
    float: left
}

.zui-pager .btn-group__item .btn {
    margin-left: 0;
    padding: 5px;
    border: 0;
    font-weight: 300;
    background-color: transparent;
    color: #bbb
}

.zui-pager .btn-group__item .btn:hover {
    box-shadow: inset 0-4px 0 0#bbb
}

.zui-pager .btn-group__item .current {
    box-shadow: inset 0-4px 0 0#00bcd4;
    color: #00bcd4;
    font-weight: 700
}

.zui-pager .btn-group__item .current:hover {
    box-shadow: inset 0-4px 0 0#00bcd4;
    cursor: default
}

.zui-pager .btn[disabled] {
    box-shadow: inset 0-2px 0 0#e6e6e6;
    color: #e6e6e6
}

.zui-pager .btn[disabled]:hover {
    box-shadow: inset 0-2px 0 0#e6e6e6;
    cursor: default
}

.zui-pager__input {
    display: inline-block;
    margin-top: 0
}

.zui-pager__input>input {
    width: 5.5em;
    padding: 4px 10px 3px;
    border: 1px solid #ccc;
    border-radius: 0;
    line-height: 1;
    text-align: center
}

.zui-pager .i-chevron-left,.zui-pager .i-chevron-right {
    margin: 15px 0;
    border-style: solid;
    border-color: #999;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer
}

.zui-pager .i-chevron-left:hover,.zui-pager .i-chevron-right:hover {
    border-color: red
}

.i-chevron-left-no,.i-chevron-right-no {
    margin: 15px 0;
    border-style: solid;
    border-color: #eee;
    width: 20px;
    height: 20px;
    display: block
}

.i-chevron-left-no {
    float: left;
    border-width: 3px 0 0 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.i-chevron-right-no {
    float: right
}

.zui-pager .i-chevron-left {
    border-width: 3px 0 0 3px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.i-chevron-right-no,.zui-pager .i-chevron-right {
    border-width: 3px 3px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.i-caret-down {
    border-width: 10px;
    border-style: solid;
    border-color: #000 transparent transparent;
    position: absolute;
    top: 18px;
    right: 3px;
    cursor: pointer
}

.small .btn {
    position: relative;
    box-shadow: 0 0 0 transparent!important
}

.small span:nth-of-type(1) {
    font-weight: 700;
    color: #00bcd4
}

.small span:nth-of-type(2) {
    margin: 0 5px
}

.small .select-overlay {
    background-color: #fff;
    width: 65px;
    font-size: 20px
}

.min-h {
    height: 100vh
}

ul.tab {
    list-style-type: none;
    overflow: hidden;
    margin-bottom: 0;
    padding-bottom: 20px
}

ul.tab li {
    float: left
}

ul.tab li a {
    display: inline-block;
    color: #999;
    font-size: 28px;
    font-weight: 300;
    line-height: 1.4em;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    transition: .3s;
    border: 2px solid #88c1df;
    margin: 0 10px 10px 0;
    border-radius: 5px;
    webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25))
}

.tab-home .active,ul.tab li a:focus {
    background-color: #fff;
    color: #88c1df
}

.tabs-content .active,.tabs-content ul.tab li a:focus {
    background-color: #fff
}



.tabcontent {
    border-top: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s
}

ul.tab li a:hover {
    background-color: #fff;
    color: #88c1df
}

.page_content {
    padding: 30px;
    margin: 20px;
 
}

.page_content .row,.row {
    width: 100%;
    margin: 0 4%;
    text-align: left
}

.page_content .info-bib {
    margin-top: 15px;
    line-height: 16px;
    max-height: 50px;
    margin-bottom: 40px
}

.row {
    margin: 10px 0
}

.row>div {
    float: left;
    margin: 0 5px 0 0
}

.clear {
    clear: both
}

.w-1 {
    width: 60px
}

.w-2 {
    width: 140px
}

.w-3 {
    width: 24%
}

.w-4 {
    width: 22%
}

.w-5 {
    width: 380px
}

.w-6 {
    width: 460px
}

.w-7 {
    width: 540px
}

.w-8 {
    width: 620px
}

.w-9 {
    width: 700px
}

.w-10 {
    width: 780px
}

.w-11 {
    width: 860px
}

.w-12 {
    width: 940px
}

.img-selection {
    width: 100%;
    height: 100%
}

.fond_image_t {
    display: inline-block;
    width: 100%
}

.fond_image_t img {
    -moz-transition: opacity .9s;
    -webkit-transition: opacity .9s;
    -o-transition: opacity .9s
}

.fond_image_t img:hover {
    opacity: .6;
    -moz-transition: opacity .7s;
    -webkit-transition: opacity .7s;
    -o-transition: opacity .7s
}

.link_t_thumb {
    color: #333;
    text-decoration: none;
    font-size: 18px
}

.info-bib {
    margin-top: 15px;
    line-height: 16px;
    max-height: 50px
}

.saut-de-ligne-15 {
    height: 0;
    clear: both
}

.link_2_t_thumb {
    color: #999;
    text-decoration: none;
    font-size: 15px;
    line-height: 16px
}

.fleche_bas {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    display: inline-block;
    border-top: 10px solid #fff
}

.dropbtn {
    background-color: #fff;
    height: 30px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 5px;
    width: 180px;
    cursor: pointer;
    color: transparent;
    text-shadow: 0 0 0#000;
    outline: 0;
    white-space: nowrap;
    background-image: url(/OrizonFlash_V2/images/icone_select_player.png);
    text-align: center;
    overflow: hidden;
    background-position: 100% 50%;
    background-repeat: no-repeat no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: ellipsis
}

.dropdown {
    position: relative;
    display: table
}

.dropdown-cadre {
    padding-top: 5px;
    height: 42px
}

.dropdown-cadre-header {
    padding: 0;
    height: 42px
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #f9f9f9;
    padding-left: 5%;
    top: 50px;
    z-index: 1;
    left: 0;
    width: 100%
}

.dropdown-content a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.show {
    display: block
}

.header-image {
    width: 100%;
    height: 239px
}

.index {
    font-size: 20px;
    line-height: 16px;
    padding-bottom: 12px;
    font-weight: 400;
    color: #757575
}

@media screen and (max-width:500px) {

      .contentfiches th:nth-child(3),.contentfiches th:nth-child(4),.contentfiches th:nth-child(5) {
        display: none
    }
    .transt {
        position: relative
    }

    .marges_lexique {
        padding-left: 0;
        padding-right: 0;
        margin: 0
    }

    .marges {
        padding-left: 5px;
        padding-right: 5px;
    }

    .marges_lexique .right {
        text-align: right;
        font-size: 22px;
        width: 95%
    }

    #home_content,.tra .marges {
        padding-left: 0;
        padding-right: 0
    }

    .header-t-art {
        margin: 0;
        text-align: center;
        height: auto
    }

    .left-header-t-art {
        text-align: center;
        float: left;
        position: relative;
        width: 100%;
        background-color: #000;
        padding-top: 23px;
        padding-bottom: 0;
        margin-bottom: 20px;
        height: 245px
    }

    .right-header-t-art h1 {
        font-size: 40px;
        font-weight: 400;
        letter-spacing: 0;
        color: #999;
        margin-top: 10px
    }

    div.logomenu {
        padding-top: 0
    }

    .iframe_youtube_translate {
        width: 70%;
        height: 180px;
        border: 0;
        padding-left: 15%;
        padding-right: 15%;
        position: relative;
        margin: 0;
        text-align: center
    }

    .vignette-video {
        width: 185px;
        height: 185px
    }

    .circle_youtub {
        position: absolute;
        top: 100px;
        left: 45%
    }

    #home_content .tabcontent {
        width: 100%;
        border-radius: 0
    }

    .pages_title {
        position: relative;
        text-align: center;
        padding-top: 5px
    }

    .menu_translate li {
        float: left;
        background-color: #88c1df;
        display: inline-block;
        padding: 10px 0 6px;
        color: #aaa;
        width: 33%
    }

    .menu_translate ul li a {
        font-size: 20px;
        padding: 0 20px
    }

    .nav-pills-loecsen>li.active>a,.nav-pills-loecsen>li.active>a:focus,.nav-pills-loecsen>li.active>a:hover {
        padding-bottom: 13px;
        border-bottom: 4px solid #fff
    }

    #header-t-art-actions {
        top: 102px;
        min-height: 40px
    }

    #header-t-art-actions .

    .row {
        width: 100%
    }

    .row>div {
        margin: 0 1%
    }

    .w-1,.w-10,.w-11,.w-12,.w-2,.w-3,.w-4,.w-5,.w-6,.w-7,.w-8,.w-9 {
        width: 98%;
        float: none
    }

    .img-selection {
        width: 100%;
        max-width: 500px;
        height: 100%
    }

    .fond_image_t {
        display: inline-block;
        width: 95%
    }

    .liste_contenu_translate {
        float: left;
        margin: 10px;
        display: table;
        width: 100%
    }

    .tra .choice {
        border-left: 0
    }

    .tra .cercle {
        width: 1.5em;
        height: 1.5em;
        margin-right: 10px
    }

    .tra .titre {
        font-size: 20px
    }

    .col-1,.col-2 {
        width: 100%
    }

    .page_content {
        padding: 10px;
        margin: 0;
        border-radius: 0;
        webkit-filter: none;
        -moz-filter: none;
        filter: none
    }
}

@media screen and (max-width:740px) {
    .summary-player {
        margin-left: 6px;
        margin-right: 6px
    }

    .details-inside {
    margin-left: 7px;
    margin-right: 7px;
    padding-left: 20px;
    padding-right: 20px;

}
}

@media screen and (min-width:500px) and (max-width:740px) {
    #header-t-art-actions {
        top: 101px;
        min-height: 47px
    }

    #header-t-art-actions .tabcontent {
        padding-left: 5%;
        padding-right: 5%
    }

    .header-t-art {
        margin: 0;
        padding-top: 0;
        height: auto
    }

    div.logomenu {
        padding-top: 4px
    }

    .circle_youtub {
        position: absolute;
        top: 70px
    }

    .right-header-t-art h1 {
        font-size: 40px
    }

    .left-header-t-art {
        float: left;
        position: relative;
        margin-right: 15px
    }

    .menu_translate li {
        width: 33.1%
    }

    .menu_translate ul li a {
        font-size: 25px;
        padding: 0 20px
    }

    .marges,.marges_lexique {
        padding-left: 5%;
        padding-right: 5%
    }

    .row {
        width: 100%
    }

    .row>div {
        margin: 0 .5%
    }

    .w-1 {
        width: 7.3%
    }

    .w-2 {
        width: 15.6%
    }

    .w-3 {
        width: 49%
    }

    .w-4 {
        width: 32.3%
    }

    .w-5 {
        width: 40.6%
    }

    .w-6 {
        width: 49%
    }

    .w-7 {
        width: 57.3%
    }

    .w-8 {
        width: 65.6%
    }

    .w-9 {
        width: 74%
    }

    .w-10 {
        width: 82.3%
    }

    .w-11 {
        width: 90.6%
    }

    .w-12 {
        width: 99%
    }

    code,pre,samp,table,td,textarea,th {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word
    }

    code,pre,samp {
        white-space: pre-wrap
    }

    .liste_contenu_translate {
        width: 45.8%
    }

    .info-bib {
        height: 70px
    }

    #home_content {
        padding-left: 0;
        padding-right: 0
    }

    #home_content .tabcontent {
        width: 100%;
        border-radius: 0
    }

    .col-1,.col-2 {
        width: 100%
    }

    .page_content .row>div {
        width: 45%
    }
}

@media screen and (min-width:740px) and (max-width:980px) {
    #header-t-art-actions .tabcontent,#home_content {
        padding-left: 20px;
        padding-right: 20px
    }
    
    #header-t-art-actions .tabcontent.short{
        height: auto !important;
    }

    .marges_lexique {
        padding-left: 5%;
        padding-right: 5%
    }

    .liste_contenu_translate {
        width: 30.5%
    }

    #home_content .tabcontent {
        width: 690px;
        margin: 0 auto
    }

    ul.tab {
        width: 690px
    }

    .col-1,.col-2 {
        width: 100%
    }

    .link_t_thumb {
        font-size: 16px
    }

    .page_content .info-bib {
        margin-bottom: 40px
    }
}

@media screen and (min-width:980px) and (max-width:1200px) {
    #home_content {
        padding-left: 20px;
        padding-right: 20px
    }

    #home_content .tabcontent {
        width: 960px;
        margin: 0 auto
    }

    .liste_contenu_translate {
        width: 31%
    }

    ul.tab {
        width: 960px
    }
}

@media screen and (min-width:1200px) and (max-width:1400px) {
    #home_content {
        padding-left: 80px;
        padding-right: 80px
    }

    #home_content .tabcontent {
        width: 1040px;
        margin: 0 auto
    }

    .liste_contenu_translate {
        width: 31%
    }

    ul.tab {
        width: 1040px
    }
}

@media screen and (min-width:1400px) {
    .liste_contenu_translate {
        width: 23.4%
    }

    #home_content {
        padding-left: 100px;
        padding-right: 100px
    }

    #home_content .tabcontent {
        width: 1200px;
        margin: 0 auto
    }

    ul.tab {
        width: 1200px
    }
}

.transt {
    position: relative
}

.transt .movable {
    display: flex;
    transition: transform .4s
}

.transt .movable>div {
    flex: 1;
    min-width: 100%;
    box-sizing: border-box;
    width: 100%;
    height: 100%
}

.hide-ad {
    position: absolute!important;
    top: -9999px!important;
    left: -9999px!important
}

#AdButton {
    font-weight: 400;
    font-size: 11px;
    cursor: pointer
}

@media (max-device-width:768px) and (orientation:landscape) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }
}

body,html {
    background-color: var(--blue2);
    -webkit-tap-highlight-color: transparent
}

.white {
    color: #fff
}

.blue2 {
    color: var(--blue2)
}

.red,span.alert {
    color: var(--red)
}

.back-red {
    background-color: var(--red)
}

.small {
    font-size: small
}

.medium {
    font-size: medium
}

.large {
    font-size: large
}

#user-infos span,.bold {
    font-weight: 700
}

.underline {
    text-decoration: underline
}

#menu .slidemenu label:hover,#training .arrow-d svg,.arrow-r svg,.pointer {
    cursor: pointer
}

.italic {
    font-style: italic
}

.shadow {
    filter: drop-shadow(0 1px 8px #000)
}

.fgre {
    fill: var(--green)!important
}

.fora {
    fill: #ffa726!important
}

.fred {
    fill: var(--red)!important
}

.fblue {
    fill: var(--blue1)!important
}

.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: #000;
    text-align: center;
    height: 1.5em;
    opacity: .5
}

.hr-text:before {
    content: "";
    background: linear-gradient(to right,transparent,#818078,transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px
}

.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.5em;
    color: #818078;
    background-color: #fcfcfa
}

#pres p,.left {
    text-align: left
}

.fleft {
    float: left
}

.rright {
    float: right
}

.full {
    width: 100%
}

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.nqe {
    display: inline-flex;
    top: 17px;
    position: absolute;
    left: 105px
}

.nqe span {
    display: none;
    background: var(--blue2);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 4px
}

.bq1:not(.ui-icon-off) .nqe span {
    background: var(--blue3)
}

.nqe span.ok {
    background: var(--blue3);
    outline: 2px solid var(--blue2)
}

::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: #f1f1f1
}

::-webkit-scrollbar-thumb {
    background: var(--blue2)
}

#grd_block4 .pquizz {
    fill: red!important
}

.user:not(.connected) {
    background-color: #ff6550
}

.quizz_result.onlyone span:last-child .icon {
    border-radius: 20px
}

.tablinks2.notvisited {
    background-color: var(--greenv)
}

#nav {
    padding: 0
}

#nav,#subs .subs {
    list-style: none outside none;
    margin: 0
}

#menu {
    background-color: var(--blue1);
    box-shadow: -2px 0 10px var(--blue2);
    height: 110px;
    padding-top: 10px
}

#menu>div {
    text-align: center;
    position: relative
}

#menu .clear {
    clear: both
}

#menu .slide-toggle {
    display: none !important;
}

#menu .slidemenu {
    margin: 10px auto;
    max-width: 600px
}

#menu .slidemenu label {
    margin: 0 15px;
    width: 25%;
    text-align: center;
    display: block;
    float: left;
    color: var(--blue2)
}

#menu .slidemenu label .icon:hover {
    box-shadow: 0 1px 15px 4px #4c90b3
}

#menu .slidemenu label span {
    padding: 3px;
    font-size: 15px;
    font-weight: 700
}

#menu .slidemenu label .icon {
    padding: 10px;
    font-size: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    display: block;
    margin: 0 auto;
    line-height: 30px;
    border-radius: 50%;
    background-color: #fff;
    fill: var(--blue2)
}

#menu .slider {
    width: 95%;
    height: 5px;
    display: block;
    background: var(--blue3);
    margin-top: 10px;
    border-radius: 5px;
    direction: initial
}

#menu .slider .bar {
    width: 35%;
    height: 5px;
    background: var(--blue2);
    border-radius: 5px
}

#menu .slidemenu label:not(.hovered),.slider .bar {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    position: relative
}

#menu .slidemenu .slide-toggle:checked+label {
    opacity: 1
}

#menu .slider .bar.btn_canvc {
    margin-left: 33%
}

#menu .slider .bar.btn_quizz1,#menu .slider .bar.btn_quizzb {
    margin-left: 66%
}

#wrapper {
    position: relative;
    margin: auto
}

#meter {
    width: 100%;
    height: 100%;
    transform: rotateX(180deg)
}

.circle {
    fill: none
}

#mask,.outline {
    stroke-width: 65
}

.range {
    stroke-width: 60
}

#lbl,#slider,.sbV,.sbV div {
    position: absolute
}

#slider {
    cursor: pointer;
    left: 0;
    margin: auto;
    right: 0;
    top: 58%;
    width: 94%
}

#lbl {
    background-color: #4b4c51;
    border-radius: 2px;
    color: #fff;
    font-family: "courier new";
    font-size: 15pt;
    font-weight: 700;
    padding: 4px 4px 2px;
    right: -48px;
    top: 57%
}

#meter_needle {
    height: 50%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 25%;
    transform-origin: bottom center;
    transform: rotate(270deg)
}

#subs .close {
    z-index: 10000;
    right: 20px;
    fill: #aaa;
    position: fixed;
    top: 110px;
    cursor: pointer
}

#subs .subs {
    box-shadow: rgb(0 0 0/20%) 1px 1px 5px;
    color: #999;
    top: 150px;
    padding: 2%;
    background: #fff;
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 1000
}

#nav li:hover ul.subs {
    display: block;
    z-index: 10
}

#subs .subs>li {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 22%;
    padding: 0;
    color: var(--blue2);
    font-size: 1em;
    text-transform: uppercase;
    line-height: 25px
}

#subs .subs>li a {
    color: var(--black);
    line-height: 23px;
    text-align: left;
    text-transform: none
}

#subs .subs>li a:hover {
    color: var(--black);
    text-align: left;
    text-decoration: underline
}

#subs li a:hover {
    color: #ce1a00;
    text-align: left
}

#subs .subs>li>a {
    font-size: 1.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-decoration: underline
}

#subs .subs>li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0;
    -ms-transition: padding 150ms ease-out 0;
    -o-transition: padding 150ms ease-out 0;
    -webkit-transition: padding 150ms ease-out 0;
    transition: padding 150ms ease-out 0
}

#subs .subs>li li:hover {
    padding-left: 8px;
    text-decoration: underline
}

.sbV,.sbV div {
    z-index: 10000
}

.sbV {
    background: #f1f1f1;
    width: 12px;
    bottom: 2px;
    top: 0;
    right: 1px;
    transition-property: opacity;
    overflow: hidden;
    opacity: 1
}

.sbV div {
    background: padding-box padding-box #88c1df;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0;
    transition-property: -webkit-transform;
    transition-timing-function: cubic-bezier(.33,.66,.66,1);
    transform: translate(0,0) translateZ(0);
    height: 175px
}

#outline {
    stroke-dasharray: 2.427766571px,242.7766571045px;
    stroke-dashoffset: 0;
    animation: anim 1.6s linear infinite
}

.phypcchecbox {
    float: right
}

.check-out {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #fff
}

.readermode {
    position: fixed;
    margin-top: 9px;
    right: 50px
}

.icon-readermode {
    width: 25px;
    height: 25px;
    fill: var(--blue2)
}

.login {
    float: right;
    position: fixed;
    right: 10px
}

.login.connected .icon {
    fill: var(--blue2)
}

.c_group {
    display: none
}

#img_exp {
    position:relative;
}

#img_exp img:nth-of-type(2),#img_exp img:nth-of-type(3) {
  display: none;
}

#img_exp.boost img{
    display:none;
}

#img_exp img{ 
    width:100%;
    top:15%;
    position:relative;
}

#img_exp img.tolang{
    width:70%;
}

#img_exp .balloon {
    position: absolute;
    width: 100px;
    bottom: 20px;
    z-index: 1
}

#img_exp .info,#img_exp .info2 {
    position: absolute;
    bottom: 20px;
    z-index: 100000;
    font-size: 15px;
    display: none
}

#img_exp .info2 {
    bottom: 100px
}

#cnt_exp .q_r {
    z-index: 9999
}

#bpram .m {
    display: none
}

#floca {
    cursor: pointer;
    float: left
}

#pres {
    background-color: var(--blue1);
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center
}

#pres .t {
    font-size: 50px;
    color: var(--blue2);
    margin: 0
}

#pres .cadre {
    width: 90%;
    background-color: #fff;
    padding: 20px 0;
    min-height: 300px;
    border-radius: 5px;
    margin: 0 auto 10px
}

#pres .cadre img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

#pres .cadre span {
    display: block;
    width: 90%;
    font-size: .8em;
    margin: 20px auto
}

#pres .prevpres span {
    margin: 0;
    display: inline-flex;
    position: absolute
}

#pres .footer {
    text-align: center;
    margin-top: 30px
}

#pres .footer label,#pres h2 {
    font-size: .8em;
    font-weight: 700
}

#pres .footer div {
    cursor: pointer;
    text-decoration: underline
}

#pres div {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0
}

#pres .presentation {
    padding-left: 50px;
    padding-right: 50px
}

#pres h2 {
    font-size: 26px;
    color: var(--blue2)
}

#pres a {
    text-decoration: none;
    color: #fff
}

#pres .icon3 {
    width: 16px;
    height: 16px;
    fill: var(--blue2)
}

#pres .middle {
    font-size: 30px;
    margin-top: 20px
}

#pres .part2 {
    display: none
}

#pres .accordion {
    color: #fff;
    cursor: pointer;
    padding: 18px;
    border: 0;
    text-align: left;
    outline: 0;
    font-size: 15px;
    transition: .4s;
    font-weight: 700;
    background-color: var(--red);
    margin-bottom: 25px;
    margin-top: 8px
}

#pres .accordion:hover,#pres .active {
    filter: saturate(201%);
    -webkit-filter: saturate(201%);
    -moz-filter: saturate(201%)
}

#pres .icon {
    fill: var(--blue2)
}

#pres .cadre .textes {
    display: block;
    width: 80%;
    font-size: 20px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px
}

.imagepres {
    margin-right: 30px;
    width: 250px;
    padding-left: 20px
}

#pres .cadre .imgcadre {
    display: block;
    width: 100%;
    max-width: 550px;
    margin: 15px auto 30px;
    border: solid 5px;
    background: linear-gradient(to top,rgba(#cffffe,.3),rgba(#f9f7d9,.3),rgba(#fce2ce,.3),rgba(#ffc1f3,.3));
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3ClinearGradient id='g' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23cffffe' /%3E%3Cstop offset='25%25' stop-color='%23f9f7d9' /%3E%3Cstop offset='50%25' stop-color='%23fce2ce' /%3E%3Cstop offset='100%25' stop-color='%23ffc1f3' /%3E%3C/linearGradient%3E %3Cpath d='M1.5 1.5 l97 0l0 97l-97 0 l0 -97' stroke-linecap='square' stroke='url(%23g)' stroke-width='3'/%3E %3C/svg%3E")1;
    filter: drop-shadow(1px 1px 8px rgba(0,0,0,.25))
}

#pres .prevpres {
    margin-bottom: 10px
}

#pres .margin-top {
    margin-top: 160px
}

#pres .part1 {
    padding-top: 20px;
    border-radius: 5px
}

#showpres {
    width: 80%;
    margin: auto
}

.balloon:nth-child(1) {
    left: 50px
}

.balloon:nth-child(2) {
    left: 150px
}

.balloon:nth-child(3) {
    left: 250px
}

.balloon:nth-child(4) {
    left: 350px
}

.balloon:nth-child(5) {
    left: 450px
}

.balloon:nth-child(6) {
    left: 550px
}

.balloon:nth-child(7) {
    left: 650px
}

#grd_block1.locked {
    opacity: .3;
    pointer-events: none
}

#container {
    background-color: var(--blue1);
    position: relative;
    border-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.width_stack {
    width: 10%
}

#footer .width_390 {
    display: inline
}

#footer .width_390:before {
    content: "";
    display: block;
    border-top: solid 2px #bebebe;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 50%;
    z-index: 0
}

#dl .loading {

display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    left: 10%;
    padding-left: 150px;}

#splits .loading {
    top: 50%;
    left: 50%;
    position: absolute;
    display: block;
    z-index: 100
}

.tra .order p {
    margin-left: 380px
}

.tra .order p span {
    margin: 15px 0 0-300px
}

.wrap_btn_player .p:first-child {
    padding: 6px 8px 3px;
    display: inline
}

.pquizz .ui-icon-quizz:first-child {
    padding: 6px 29px 0 10px
}

.wrap_btn_player {
    margin-top: 3px;
    background-color: var(--blue3)
}

.wrap_btn_player:not(:first-child) {
    margin-left: 15px
}

.expand {
    cursor: pointer
}

.expand>span {
    font-weight: 700;
    display: flex
}

.arrow-d svg,.arrow-r svg {
    width: 20px;
    height: 20px;
    margin-left: 10px
}

.collapse-container>:nth-child(even) p {
    padding: 0 5px
}

.collapse-container>:nth-child(odd):hover {
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none
}

#btn_quizz4,#btn_quizzb {
    display: none;
    fill: var(--blue2)
}

#btn_quizz4.on,#btn_quizzb.on {
    fill: #fff
}

#bttrad {
    display: none
}

#rcanv svg {
    position: absolute;
    top: 50%;
    fill: #fff;
    left: 51%
}

#rcanv iframe.stretch {
    transform: scale(2,2)
}

#rcanv2 {
    position: absolute;
    z-index: 1000
}

#rcanv2.pause {
    background-size: cover;
    background-image: url(/images2/mywordlist/fond-video-ecoute.jpg)
}

.logomenu .icon {
    fill: inherit
}

.icon {
    width: 18px;
    height: 18px
}

.icon-barometer {
    width: 100px;
    height: 100px;
    fill: var(--blue2)
}

.ui-icon-mic {
    background-color: var(--ora);
    width: 33px;
    height: 33px;
    margin-top: 6px;
    float: left
}

#canvmob .ui-icon-next,.ui-icon-next {
    width: 33px;
    height: 33px;
    margin-top: 8px;
    float: left;
    /*margin-right: 10px*/
}

#canvmob .ui-icon-next {
    background-color: var(--blue2)
}

.btn_cad {
    left: 45%;
    vertical-align: center;
    visibility: hidden;
    position: relative;
    top: 40%;
    background: url(/images2/lock.svg)no-repeat;
    z-index: 1
}

.btn_cad.ena {
    visibility: visible
}

.tabcontent {
    webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    padding-bottom: 10px
}

#notes .tri {
    float: left;
    width: auto!important
}

#notes .icon-pencil2,#notes .icon-question {
    left: 50px!important;
    fill: #fff;
    top: 3px;
    filter: drop-shadow(0 0 .75rem #fff)
}

#notes .icon-question {
    left: 80px!important
}

.icon-expand {
    fill: #fff;
    width: 15px;
    margin-top: 5px;
    padding: 2px 0 0
}

.tra .titre {
    display: flex;
    align-items: center;
    padding-top: inherit;
    color: #fff;
    font-weight: 700;
    background-color: var(--blue2);
    min-height: 50px;
    max-width: 100%;
    height: 38px;
    font-size: 22px
}

.tra .numero {
  border-radius: 50%;
color: var(--blue2);
background-color: var(--blue3);
margin-right: 10px;
 width: 11px;
    height: 19px;
    float: left;
    display: inline-block;
    box-sizing: content-box;
     padding: 2px 10px 10px 10px;
}

.tra .numero:lang(ar),.tra .numero:lang(he) {
    margin-left: 15px
}

.fondtransparent {
    position: relative;
    border-radius: 5px
}

.fondtransparent.full {
    width: 100%
}

.header-1 {
    display: block;
    padding-top: 15px;
    margin: 0 auto;
    text-align: center
}

.list_themes {
    position: relative
}

#header-t-art-actions .tabcontent {
    display: none;
    -webkit-animation: none;
    animation: none;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border-radius: initial;
    width: 99%
}

#header-t-art-actions {
    top: 45px;
    width: 100%;
    position: fixed;
    z-index: 5000;
    -webkit-animation: fadeEffect .3s;
    animation: fadeEffect .31s;
    box-shadow: none
}

.tra .box_2 {
    margin-bottom: 30px;
    padding-bottom: 20px;
    background-color: #fff;
    width:100%!important;
}

#header-t-art-actions .tabcontent ul {
    margin: 10px;
    padding-left: 20px
}

.background_color_FFF {
    float: left;
    background-color: #fff;
    margin: 0 auto;
    overflow: initial
}

#btn_quizz_restart {
    font-size: 25px;
    font-weight: 700;
    left: 37%;
    top: 37%;
    position: absolute;
    display: block;
    background-color: var(--red);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

#btn_quizz_restart svg {
    fill: #fff;
    margin-bottom: -3px
}

#bar_left .width_390,.all .b {
    display: none
}

#cnt_exp.active_quizz .exp_word,#cnt_exp.fromboost .exp_word {
    position: absolute;
    height: 90px;
    left: 0!important;
    bottom: 0!important
}

.btn_save {
    margin: 15px auto 0 20px;
    text-align: center;
    color: #fff;
    background-color: var(--blue2);
    display: inline-block;
    width: 180px;
    text-decoration: none;
    border: solid 1px var(--blue2);
    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-sizing: border-box
}

#list_exp.locked {
    pointer-events: none
}

#list_exp.locked li {
    color: transparent;
    text-shadow: 0 0 8px rgba(0,0,0,.5)
}

#list_exp.locked .pbou,#list_exp.quizz .sbV {
    display: none
}

#lbl_trans span.fq,#train,.pbou {
    display: block
}

#baro {
    height: 140px
}

#cnt_exp #lbl_trans span span,#lbl_trans span span,#train .header-1 {
    padding: 0
}

#memo,.tra select[name=AMPM] {
    display: none
}

.tra .icon-reco {
    fill: var(--blue1)
}

.tra .c1 p,.tra .days p {
    margin-left: 230px
}

.tra .c1 p span,.tra .days p span {
    margin-top: 15px
}

#user-infos {
    text-align: justify;
    padding: 10px
}

#cnt_exp #lbl_trans svg,#user-infos,#vocmemo>div,.printDiv tr.disa,.tabcontent .alt {
    display: none
}

#vocmemo>div:first-child {
    display: block
}

#vocmemo td:last-child {
    width: 5%;
    font-weight: 700;
    text-align: center
}

#vocmemo table {
    margin-bottom: 30px
}

#scroller .bounce {
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -25px
}

.bounce {
    -webkit-animation: bounce 4s;
    animation-iteration-count: 1
}

.bounce svg {
    height: 50px;
    width: 50px;
    fill: red
}

.ui-icon-listen {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.3);
    background-color: var(--blue2);
    width: 33px;
    height: 33px;
    margin-top: 8px;
    float: left
}

.ui-icon-quizz.ui-icon-on .icon-list {
    fill: #fff
}

#page_bar .icon-moon-fill {
    fill: var(--black);
    padding: 7px 2px 0
}

.passwordc{
    position:relative;
}

.passwordc .toggle-password{
    top: 5px;
    right: 10px;
    position: absolute;
    cursor: pointer;
}

.passwordc .toggle-password svg{fill:var(--blue2);}

.ui-icon-quizz:not(.hovered) .icon-moon-fill {
    fill: #fff
}

.ui-icon-off.of .icon-moon-fill,.ui-icon-quizz .icon-bullseye,.ui-icon-quizz .icon-moon-fill {
    fill: var(--blue2)
}

#page_bar .icon-bullseye {
    fill: var(--black);
    padding: 7px 2px 0
}

.ui-icon-listen:not(.ui-icon-off) .icon-list .icon-list {
    fill: var(--blue2)!important;
    box-shadow: 1px 1px 12px var(--blue2);
    border: 1px solid #fff
}

.nq {
    width: 20px;
    position: absolute;
    display: inline-table;
    text-decoration: none;
    top: 0;
    font-size: 16px;
    left: 95px
}

.nq:hover {
    color: var(--blue2)
}

.quizz_result .icon.quizz_yes {
    fill: #fff;
    background: var(--blue2);
    display: none
}

.ui-icon-quizz {
    color: #fff;
    background-color: var(--blue2);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    margin: 0;
    float: left
}

.aquizz .ui-icon-quizz.disabled,.pquizz .ui-icon-quizz.disabled {
    opacity: .5;
    cursor: auto
}

.wrap_btn_player.noquizz {
    background-color: #d3d3d3;
    filter: brightness(1.1)
}

.noquizz .ui-icon-quizz:not(.on) .icon-gamepad {
    fill: #4c90b336
}

.noquizz .nq {
    color: gray
}

.icon-graduation-cap {
    fill: var(--blue2);
    margin: 0;
    padding: 7px 5px 0 15px;
    height: 22px;
    width: 30px
}

.ui-icon-quizz:not(.hovered,.ui-icon-off) .icon-graduation-cap {
    fill: #fff
}

.ui-icon-quizz:not(.on) .icon-graduation-cap {
    fill: var(--blue2)
}

.ui-icon-quizz:not(.ui-icon-off) .icon-graduation-cap {
    fill: #fff
}

.on.hovered .icon-graduation-cap {
    fill: var(--blue2)
}

.ui-icon-quizz:not(.hovered,.ui-icon-off) .icon-gamepad {
    fill: #fff
}

.ui-icon-quizz:not(.on) .icon-gamepad {
    fill: var(--blue2)
}

.ui-icon-quizz:not(.ui-icon-off) .icon-gamepad {
    fill: #fff
}

.on.hovered .icon-gamepad,.ui-icon-off {
    fill: var(--blue2)
}

.ui-icon-off {
    background-color: transparent
}

.ui-icon-d {
    background-color: #80deea;
    width: 33px;
    height: 33px;
    margin-top: 8px;
    float: left
}

.ui-btn.disa {
    opacity: .5
}

.ui-btn.purple {
    background-color: #9370db
}

.ui-btn.yellow {
    background-color: gold
}

.ui-btn.active {
    -moz-box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue3);
    -webkit-box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue3);
    box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue3)
}

.ui-btn.hide {
    display: none!important
}

.alert .top {
    top: inherit;
    transform: inherit;
    left: inherit;
    margin-top: 35px
}

#cnt_exp #lbl_trans {
    left: 0
}

#cnt_exp #lbl_trans.example {
    width: 95%;
    text-align: center
}

#cnt_exp #lbl_trans.example>span,.syal {
    display: inline-block
}

#cnt_exp #lbl_trans.example span {
    color: var(--black);
    width: 95%;
    font-size: var(--textsize);
    font-weight: 700
}

#cnt_exp #lbl_phon span {
    font-size: var(--textsize)
}

#cnt_exp #lbl_exp {
    padding-left: 0!important;
    line-height: 1em
}

#cnt_exp #lbl_exp span,#cnt_exp #lbl_trans.example span b {
    font-weight: 600;
    border-radius: 5px;
    opacity: 1;
    color: var(--red);
    text-decoration: none
}

#cnt_exp #lbl_phon {
    width: 95%;
    text-align: center
}

#lbl_trans span.prov {
    font-weight: italic;
    font-size: 15px
}

.syal {
    font-size: .8em;
    font-style: italic
}

#lbl_exp .e {
    position: relative;
    margin-left: 15px;
    text-align: left
}

#cnt_exp #lbl_exp .sdat>span,#cnt_exp #lbl_trans span {
    padding: 0;
    background-position: initial;
    background-repeat: initial
}

#cnt_exp #lbl_exp .sdat>span {
    opacity: 1;
    color: var(--black);
    font-weight: 500;
    margin-bottom: 10px;
    font-size: var(--textsize)
}

#cnt_exp.fromboost #lbl_exp .sdat>span {
    color: #069
}

#cnt_exp #lbl_exp .sdat>span>span {
    padding: 0;
    color: #069;
    font-weight: 400
}

#cnt_exp #lbl_exp span.hover b,#cnt_exp #lbl_exp span.hover span {
    display: inline-block;
    width: auto
}

#cnt_exp #lbl_trans span {
    color: var(--black);
    width: 95%;
    font-size: var(--textsize);
    font-weight: 700;
    }

#cnt_exp .counter {
    padding: 10px!important;
    border-radius: 50px!important;
    background-color: #fff!important
}

#lbl_exp div.but,#st-buttons {
    display: none;
    float: right;
    top: 10px;
    position: relative;
    right: 55px
}

#st-buttons div {
    margin-bottom: 4px;
    background-color: var(--blue1);
    margin-left: 10px;
    font-size: 13px;
    padding: 5px
}

#lbl_exp div.but {
    right: 40px;
    top: 5px
}

.right_h {
    width: 120px;
    float: right
}

.left_h span,.right_h span {
    width: 30px;
    display: inline-block;
    margin-top: 6px
}

.left_h {
    width: 80px;
    float: left
}

.c_ex,.menu_translate_home.mact {
    cursor: pointer
}

.Footer_translate {
    bottom: 0;
    padding: 7px 0
}

.menu_translate_home li {
    display: block;
    height: auto
}

.menu_translate_home h1 {
    font-size: 25px;
    text-decoration: none;
    color: #fff;
    width: 100%
}

.menu_translate_home {
    padding-bottom: 0;
    padding-left: 0;
    position: fixed;
    top: 4px;
    display: inline-block;
    width: 100%;
    text-align: center;
    z-index: 10001
}

.contentfiches th {
    padding: 5px 10px;
    background-color: var(--blue2);
    font-weight: 700;
    color: #fff
}

.contentfiches th:lang(ar),.contentfiches th:lang(he) {
    text-align: right
}

.contentfiches th:nth-child(3),.contentfiches th:nth-child(4),.contentfiches th:nth-child(5),.contentfiches th:nth-child(7) {
    text-align: center;
    width: 40px
}

.contentfiches td:nth-child(7) {
    border-left: 1px solid #ccc;
    text-align: center
}

.to-print {
    padding: 0 10px
}

.printDiv>tbody>tr>td:last-child {
    cursor: pointer
}

.printDiv>tbody>tr>td:first-child {
    color: inherit;
    background-color: inherit;
    cursor: pointer;
    text-align: left
}

.printDiv>tbody>tr>td:first-child:lang(ar),.printDiv>tbody>tr>td:first-child:lang(he) {
    text-align: right
}

.printDiv tr td:first-child::before {
    content: normal
}

.printDiv tbody tr.v {
    display: revert!important
}

.gre2,.ora2,.printDiv .moy,.printDiv .r,.red2 {
    background-color: #ef7d63!important;
    color: #fff;
    border-bottom: 1px solid #fff
}

.gre2,.ora2,.printDiv .moy {
    background-color: #ffa726!important
}

.gre2,.printDiv .moy {
    background-color: #92bd45!important
}

.printDiv .re .dfatas {
    min-height: 40px
}

.printDiv .icon-checkmark {
    margin-left: 15px;
    margin-top: 15px;
    fill: var(--blue1);
    width: 18px;
    height: 18px
}

.printDiv .re div:nth-child(2) span {
    display: inline-block
}

.printDiv td:nth-child(1) span {
    display: block;
    color: #000
}

.printDiv svg {
    width: 15px;
    height: 15px
}

.printDiv .bu {
    float: left;
    margin-right: 8px;
    margin-top: 5px;
    display: inline
}

.printDiv .bub {
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--blue2)
}

.printDiv .act2 svg.noav,.printDiv .disact2 svg {
    opacity: .3
}

.printDiv tr.inte :not(:last-child) {
    opacity: .5
}

.printDiv tr.inte2 {
    background-color: #ffcdd2
}

.printDiv .act2 svg {
    fill: #999
}

.progs {
    float: left;
    margin-bottom: 30px;
    width: 100%
}

.progress-bar-button.fit-content {
    width: fit-content;
    margin: 10px 0
}

.progress-bar-button {
    width: 80%;
    margin: 10px auto;
    float: initial;
    text-align: center;
    padding: 10px
}

.viewobj {
    background-color: #88c1df
}

.to-print,.viewobj {
    display: none
}

.contentfiches {
    background: var(--blue1)
}

.tab_e span {
    position: relative!important;
    float: left;
    font-size: var(--textsizelist)
}

#lbl_trans input {
    padding: 0 5px;
    font-size: .9em;
    color: #e85355;
    margin: 0
}

#lbl_trans input.input_quizz3 {
    border: 0
}

#lbl_trans input.input_quizz3:focus {
    outline: 0
}

#notes .range-wrap {
    position: relative
}

#notes .toolbar button {
    width: 40px;
    background-color: #ff6550;
    color: #fff
}

#notes .links,#notes .m1,.rmob div div {
    display: block
}

#notes .words {
    background-color: #88c1df;
    width: 30%
}

#notes .words div {
    display: inline-block
}

#notes .link {
    cursor: pointer;
    text-decoration: underline
}

#p_mess {
    border-radius: 7px;
    background-color: #eee;
    top: 60%;
    right: 20px;
    width: 40%;
    display: none;
    height: 10%;
    padding: 10px;
    font-size: 15px
}

#p_mess .close {
    float: right;
    margin: 5px
}

.cp3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.48);
    z-index: 9999999;
    display: none
}

#p_mess,.pup_result {
    z-index: 1000;
    position: absolute
}

.pup_result {
    margin: 0 auto;
    right: 2%;
    left: 2%;
    width: 600px;
    background-color: #fff;
    border-radius: 0;
    padding: 26px;
    color: #333;
    top: 10%;
    height: 350px
}

.pup_result.full {
    top: 20%;
    height: 50%
}

input.cmn-toggle-round-flat:checked+label {
    background-color: var(--blue1)
}

#editobj .title {
    margin-bottom: 20px;
    font-size: 30px;
    color: var(--blue2)!important;
    width: 100%;
    border-bottom: 2px solid var(--blue2)!important;
    padding-top: 0;
    padding-bottom: 10px;
    float: left
}

#editobj .range span.m,#rangev span.m,.obj span.m {
    text-align: center;
    display: inline-block;
    padding: 11px;
    background-color: var(--blue2)!important;
    width: 30px;
    color: #fff;
    border-radius: 5px
}

.pup_result.simple .content {
    top: 24%;
    font-size: larger;
    float: none;
    width: 95%;
    margin: auto;
    padding-top:10px;
}

.pup_result.tscroll .content {
    float: left;
    font-size: larger;
    height: 280px;
    overflow: overlay
}

.pup_result .choices {
    width: 80%;
    margin: auto
}

.pup_result .choices .center {
    width: 80%
}

.w_details {
    width: 580px;
    padding-left: 10px;
    position: absolute;
    background-color: #fff;
    min-height: 20px;
    color: #333
}

#rangev span.m {
    width: 85px;
    margin-top: 15px
}

.annboost {
    border-radius: 5px;
    webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    filter: drop-shadow(11px 10px 14px rgba(0,0,0,.25));
    padding: 15px;
    margin-top: 25px;
    margin-bottom: 25px
}

.annboost,.tra .box {
    background-color: var(--blue1)
}

.pup_result .t {
    margin: 0;
    font-size: 30px;
    color: var(--blue2);
    width: 100%;
    border-bottom: 2px solid var(--blue2)!important;
    padding-top: 0;
    padding-bottom: 10px;
    float: left;
    font-weight: 400;
    min-height: 34px
}

.pup_result .t.red {
    color: var(--red)
}

.pup_result .content {
    display: inline-block;
    width: 100%;
    margin-top: 20px
}

.pup_result .h {
    font-family: cursive
}

.pup_result .close {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 25px;
    top: 25px;
    fill: #999;
    cursor: pointer
}

.pup_result .a .close:lang(ar),.pup_result .a .close:lang(he),.pup_result .close:lang(ar),.pup_result .close:lang(he) {
    right: auto;
    left: 25px
}

.pup_result .close:hover {
    fill: #ff6550;
    cursor: pointer
}

#pup_result4 .a .close {
    fill: #ff6550
}

#pup_result4 .t {
    height: 40px;
    position: relative!important;
    top: 0!important
}

.bot {
    position: absolute;
    width: 100%
}

#pup_result4 .disa {
    opacity: .6;
    cursor: initial;
    padding: 5px
}

#pup_result4 .content {
    height: 250px;
    overflow-y: scroll;
    margin: 15px 0;
    padding: 5px;
    margin-top: 0!important;
    margin-bottom: 0!important;
    box-shadow: 1px 1px 12px #555;
    background-color: #fff
}

.varia {
    font-style: italic
}

#scroller .pbou {
    margin-top: 65px
}

#scroller span.wts {
    font-style: italic;
    margin-left: 20px
}

#scroller ul span.wt.show {
    display: contents!important
}

#bar_tools .btvideo,#btn_speech2,#revtrain {
    display: none
}

.pup_result ::-webkit-scrollbar-thumb {
    background: var(--blue1)
}

.pup_result ::-webkit-scrollbar-track {
    background: #eee
}

.pup_result .icon-chevron-down,.pup_result .icon-chevron-up {
    fill: #9d9d9d
}

.pup_result.slogin .form-wrap {
    box-shadow: none;
    width: auto
}

.pup_result.slogin a {
    text-decoration: none;
    text-align: center
}

.pup_result.slogin a:hover {
    background-color: #87cbc0;
    color: #fff
}

.pup_result.slogin .form-wrap .tabs h3 a.active {
    background-color: #448393;
    color: #fff
}

#scroller ul li:not(.ui-btn-up-a) {
    background-color: #d6eaf58a
}

#scroller ul li.ui-btn-up-d:hover {
    background-color: var(--blue3)
}

#scroller ul li.av:not(.ui-btn-up-a) {
    background-color: #fff
}

#scroller ul li.av:not(.ui-btn-up-a):hover {
    background-color: var(--blue3)
}

#list_exp_mobile div.compg:not(.quizz_used3),#list_exp_mobile div.disa,#scroller ul li.compg:not(.quizz_used3),#scroller ul li.disa {
    display: none!important
}

#scroller.gr ul li:not(.ch):not(.quizz_select):not(.news) {
    border-top: 1px solid #000
}

.ui-btn-up-a {
    background: var(--blue2);
    color: #fff
}

#mgraph {
    margin-top: 25px;
    margin-left: 15px
}

.canv {
    display: none;
    z-index: 99999;
    top: 0;
    left: 0;
    background-color: var(--blue2)!important;
    overflow: hidden
}

.divided {
    z-index: -1;
    border-top: 7px solid var(--blue3);
    margin-top: 17px;
    width: 100px;
    position: absolute;
    margin-left: 25px
}

.divided.short {
    width: 70px
}

.btn_error {
    background-color: #88c1df
}

.btn_error .icon {
    width: 18px;
    height: 18px
}

.col-sm-10 {
    padding-right: 15px;
    padding-left: 15px
}

#profile-user {
    background: #fff;
    display: block;
    padding: 0
}

#order-co,#profile-co,#profile-noco {
    display: none;
    position: relative;
    top: 125px;
    width: 90%;
    margin: auto
}

#order-co {
    display: block;
    top: 70px
}

#register {
    color: var(--blue2);
    font-size: 20px
}

#bar_tools.canvy .btn_autoplay,#bar_tools.canvy .btn_pause {
    display: block
}

#chartprog .percount {
    text-align: center;
    left: 45%;
    position: absolute;
    bottom: 15px
}

#chartprog .wrapper {
    font-size: 1em;
    position: relative;
    height: 9em
}

#chartprog .progressbar-wrapper {
    width: 300px;
    height: 60px;
    top: 42%;
    left: 48.3%;
    position: absolute;
    transform: translate(-50%,-50%)
}

#chartprog .progressbar {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-30deg)
}

#chartprog .side {
    width: 100%;
    height: 100%;
    background-color: rgb(112 82 82/10%);
    top: 0;
    left: 0;
    position: absolute
}

#chartprog .bottom {
    box-shadow: 10px 10px 50px 5px rgba(90,90,90,.7);
    transform: rotateX(90deg);
    transform-origin: bottom
}

#chartprog .top {
    transform: translate(0,-100%) rotateX(90deg);
    transform-origin: bottom
}

#chartprog .back {
    transform: translateZ(-60px)
}

#chartprog .left {
    width: 60px;
    transform: rotateY(90deg);
    transform-origin: left;
    background-color: var(--blue1)
}

#chartprog .bar {
    height: 100%;
    background-color: var(--blue1);
    box-shadow: 5px 5px 50px 5px var(--shadow-color);
    width: 70%
}

#btfulldes {
    position: absolute;
    top: 60px;
    z-index: 100000
}

#cnt_exp.active_quizz #lbl_exp div span.q4hover {
    padding: 15px;
    background-color: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 10px -1px #fff;
    -moz-box-shadow: 0 0 10px -1px #fff;
    box-shadow: 0 0 10px -1px #fff
}

#smile {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 20%
}

#smile svg.green {
    fill: var(--greenv)
}

#smile svg.red {
    fill: var(--red)
}

@media screen and (min-width:740px) {
    #page_bar.quizz #btn_speech2 {
        display: block
    }

    #footer:not(.fromloecsen) #lbl_exp.nplay,#footer:not(.fromloecsen) #lbl_exp.nplay span {
        background-color: #8edbe9!important
    }

    #footer:not(.fromloecsen) #cnt_exp:not(.active_quizz) {
        /*background: radial-gradient(ellipse at center,#fffeea 0,#fffeea 35%,#9bddff 100%)*/
    }

    #header-t-art-actions .tabcontent {
        width: 500px
    }

    #bar_tools {
        width: auto
    }

    #bar_tools .btn_error {
        background-color: #88c1df
    }

    #bar_c .pquizz,#bar_left .divided {
        display: none
    }

    #cnt_exp {
        position: relative;
        box-shadow: 0 0 12px var(--blue2);
        margin-top: 1px
    }

    #smile svg {
        width: 70px;
        height: 70px
    }

    #img_expn svg {
        position: absolute;
        left: 0
    }

    #bar_c {
        visibility: hidden;
        background-color: unset;
        width: auto;
        margin-left: 50%;
        padding: 0;
        margin-bottom: 0
    }

    #bar_c .pquizz svg,.ui-icon-quizz.ui-icon-on .icon-list:hover {
        fill: var(--blue2)
    }

    #bar_c .pquizz .on:not(.hovered) svg {
        fill: #fff
    }

    #actim,.noquizz .ui-icon-quizz .nq,.ui-btn.mob {
        display: none
    }

    #btn_quizz1 {
        width: 45px;
        height: 33px
    }

    .height_50 {
        margin-bottom: 10px;
        width: auto
    }

    .ui-icon-quizz.hovered .nq {
        color: var(--blue2)
    }

    #page_bar .ui-btn:not(.large,.noact):hover {
        -moz-box-shadow: inset 0 0 3px #fff,0 0 9px #fff;
        -webkit-box-shadow: inset 0 0 3px #fff,0 0 9px #fff;
        box-shadow: inset 0 0 3px #fff,0 0 9px #fff;
        background-color: #fff0;
        cursor: pointer
    }

    .ui-btn:not(.noact,.large,.change_lang,.tab,.ui-slider,.btfulldes,.phoca-flagbox-header):hover {
        -webkit-box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue2);
        box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue2);
        background-color: #fff;
        cursor: pointer;
        -moz-box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue2)
    }

    .blink_hovered {
        animation: blinker 1s linear infinite
    }@    keyframes blinker {
        50%{-moz-box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue2);
        -webkit-box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue2);
        box-shadow: inset 0 0 3px #fff,0 0 9px var(--blue2);
        background-color: #fff
    }
}

.ui-btn.large:hover {
    box-shadow: inherit
}

.my-header-grid {
    background-image: none;
    background-color: var(--blue2) 4d;
    box-shadow: -2px 0 10px var(--blue2)
}

#list_exp {
    box-shadow: -3px 0 5px 0 var(--blue2)
}

#cnt_exp.active_quizz #lbl_exp span,#cnt_exp.active_quizz #lbl_exp span span {
    padding: 15px 0 0
}

.c_ex a,.rmob-f {
    display: none
}

.validate_choice:not(.ui-disabled) {
    font-size: 30px
}

.quizz_result {
    top: 100px;
    right: 30px;
    position: relative
}

.quizz_result>span {
    background-color: #fff
}

.quizz_result .icon {
    width: 1.3em;
    height: .8em;
    padding: 5px;
    background: var(--blue3)
}

.menu_translate_home {
    width: 50%;
    left: 15%
}

.locked .fnplay,.menu_home {
    display: none
}

#scroller .tab_exp.quizz_disabled .tab_e{
    font-style: normal;
}

#scroller .tab_exp {
    position: relative
}

#scroller .tab_exp .icon-checkmark {
    padding: 0 10px;
    float: right;
    position: relative;
    top: 22%;
    display: block;
    fill: var(--blue1)
}

#scroller .tab_exp .icon-checkmark:lang(ar),#scroller .tab_exp .icon-checkmark:lang(he) {
    float: left
}

#list_exp #scroller .tab_exp .fnplay {
    right: 8px;
    position: absolute;
    fill: gray;
    top: 5px
}

#list_exp #scroller .tab_exp .fnplay:lang(ar),#list_exp #scroller .tab_exp .fnplay:lang(he) {
    right: auto;
    left: 8px
}

#scroller .tab_exp.quizz_used3 .icon-checkmark {
    display: none
}}

@media screen and (max-width:740px) {
    .fondtransparent {
        border-radius: 0
    }
    
    #img_expn img{
        width: 75%;
        left: 10%;
    }

    .logomenu::-webkit-scrollbar-thumb {
        background: var(--red)
    }

    #p_subs {
        height: 40vh
    }

    .navs ul.subs>li {
        width: 60%
    }

    .toppenu {
        margin-right: 0
    }

    .tabcontent::-webkit-scrollbar-thumb {
        background: var(--blue2)
    }

    #menu label span {
        display: none;
        position: relative;
        left: -5px
    }

    #menu label span.actbutton {
        display: block
    }

    #menu .slidemenu {
        width: 80%
    }

    #menu {
        box-shadow: none
    }

    #menu .slidemenu label {
        margin: 0 8px
    }

    #menu .nqe,.tra .titre-top {
        display: none
    }

    #canvmenumob {
        width: 42%;
        margin: 10px auto
    }

    #canvmenumob .ui-btn {
        margin-left: 5px
    }

    #smile svg {
        width: 30px;
        height: 30px
    }

    #btfulldes {
        right: 10px
    }

    #baro {
        height: 120px;
    }

    .annboost {
        background-color: transparent;
        border-radius: 0;
        webkit-filter: none;
        -moz-filter: none;
        filter: none;
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        text-align: center
    }

    #baro-msg {
        font-size: 15px
    }

    #wrapper {
        height: 110px;
        transform: scale(1.1)
    }

    .to-print {
        padding: 0
    }

    #container {
        background-color: #fff
    }

    .tra .titre {
        max-width: 100%;
        font-size: 18px
    }

    #next_exp,#prev_exp {
        width: 15%;
        float: left
    }

    #canvmob:not(.full) {
        width: 100%;
        top: 6vh;
        position: absolute
    }

    .header-1 {
        width: 97%;
        display: inline-table;
        padding: 5px
    }

    .align-header .tooltip3:hover .top,.tooltip3.largehover .top {
        visibility: visible;
        opacity: 1;
        z-index: 99999;
        background-color: #fff;
        width: 80%;
        margin: 0 auto;
        font-size: 16px;
        min-height: 150px;
        text-align: left!important;
        padding: 30px 10px 10px
    }

    .tooltip3 .top.menuhaut {
        top: 40px;
        left: -5px
    }

    #cnt_exp.finish #img_exp {
        margin-top: 0;
        margin-bottom: 0;
        height: 240px!important
    }

    #cnt_exp #lbl_trans {
        display: none;
        top: 11px;
        left: 0
    }

    #pres,#pres .cadre,#pres .t {
        width: 100%
    }

    #pres {
        margin: auto;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0;
        background-color: var(--blue1)
    }

    #pres .t {
        font-size: 30px;
        font-weight: 700
    }

    #pres .imagepres {
        float: none;
        padding-left: 10px;
        width: 200px
    }

    #pres .cadre {
        margin: 0 auto
    }

    #pres .cadre .textes {
        width: 92%;
        padding: 0
    }

    #pres .margin-top {
        margin-top: 20px
    }

    #pres .footer {
        color: var(--blue2);
        min-height: 100px;
        margin: 0;
        padding-top: 20px
    }

    #pres .part1 {
        border-radius: 0;
        background: 0 0
    }

    #pres #intropres {
        padding-left: 15px;
        padding-right: 15px;
        box-shadow: none
    }

    #training {
        margin-bottom: 50px
    }

    #page1 {
        display: block
    }

    #pup_result3.lock .nprogress-bar-button {
        width: 100%
    }

    #page_bar.quizz {
        width: 100%;
        position: absolute;
        display: block;
        border-bottom: unset
    }

    #page_bar.quizz #btn_speech2 {
        right: 0;
        display: block;
        top: 205px;
        z-index: 10
    }

    #bar_c,#page_bar,#page_bar.quizz #bar_right {
        display: none
    }

    #list_exp_mobile.fromloecsen,.wrap_list_exp_mobile.fromloecsen {
        height: 280px;
        background: var(--blue2);
        background: linear-gradient(var(--blue2),var(--blue1))
    }

    #cnt_exp.canvy {
        height: 80vh;
        background-color: #000
    }

    #cnt_exp #lbl_exp .sdat>span {
        color: var(--blue2);
        line-height: 34px
    }

    #lbl_exp.nplay,#lbl_exp.nplay span {
        padding-bottom: 4px
    }

    #profile-user label {
        width: 100%;
        justify-content: inherit
    }

    #profile-user .modify-button {
        width: 60%
    }

    .pup_result .t {
        font-size: larger;
        width: 90%
    }

    #btn_remix {
        display: block!important
    }

    .btn_cad {
        top: 0;
        margin: 7px;
        height: 20px;
        width: 20px
    }

    #bar_left {
        float: none;
        margin: auto
    }

    #bar_left .width_390 {
        display: block;
        width: max-content
    }

    #bar_left .disabled {
        display: none
    }

    #bttrad {
        display: inline;
        width: 33px;
        height: 33px;
        margin-top: 8px;
        float: left;
        background-color: #a5d28c
    }

    #bar_tools a:not(.md) {
        display: none
    }

    #btn_quizz_restart {
        font-size: 15px;
        left: 27%;
        top: 60%;
        height: 28px;
        z-index: 99999
    }

    #lbl_exp.nplay,#lbl_exp.nplay span {
        background-color: transparent
    }

    #bpram .d {
        display: none
    }

    #bpram .m {
        display: block
    }

    #cnt_exp:not(.active_quizz) #lbl_exp div span {
        font-size: medium;
        padding: 0;
        background-color: transparent!important
    }

    #cnt_exp.active_quizz #lbl_exp div span {
        font-size: 15px
    }

    #cnt_exp:not(.active_quizz) #lbl_trans {
        text-align: center;
        align-items: center;
        display: flex
    }

    #lbl_trans {
        font-size: 20px
    }

    #home_content .iframeplayer {
        padding-bottom: 0
    }

    .tra .box {
        webkit-filter: none;
        -moz-filter: none;
        filter: none
    }

    .dropdown #content {
        position: absolute;
        right: 0;
        top: 70px
    }

    .btn_delete,.btn_error,.btn_remove {
        background-color: var(--blue2)
    }

    #smnav .icon {
        width: 15px;
        height: 15px
    }

    #lbl_trans.swipelefta,#lbl_trans.swiperighta {
        -webkit-transform: translate(-500px,0);
        transform: translate(-500px,0);
        -webkit-transition: -webkit-transform .3s ease-in-out;
        transition: -webkit-transform .3s ease-in-out
    }

    #lbl_trans.swiperighta {
        -webkit-transform: translate(500px,0);
        transform: translate(500px,0)
    }

    .width_stack {
        display: none
    }

    #selectExpC,.c_group {
        display: block
    }

    .pup_result {
        width: 80%;
        top: 5%;
        height: 50%;
        overflow: overlay
    }

    #selectExpC {
        width: 25%;
        margin: auto
    }

    #selectExpC>div {
        width: 30%
    }

    #selectExpC>div:nth-child(1) {
        float: left
    }

    #selectExpC>div:nth-child(2) {
        float: right
    }

    #selectExp .content .icon {
        top: 5px;
        right: 6px;
        float: right;
        position: absolute;
        fill: var(--blue2)
    }

      #selectExp .content .icon:lang(ar), #selectExp .content .icon:lang(he) {
        left: 6px;
        right: initial;
        float: left;
    }

    #selectExp .panel.ena {
        display: block
    }

    #selectExp .panel.srok.panel_active {
        color: #fff;
        background: var(--blue2)
    }

    #selectExp .panel.srok {
        background-color: #d3eaf7;
        margin-bottom: 6px;
        color: #769691;
        border-left: 2px solid var(--blue2)
    }

    #nav .ui-btn {
        margin-right: 3px
    }

    #nav .btspeech {
        margin-left: 15px
    }

    #list_exp_mobile:not(.quizz) {
        box-shadow: 0 1px 14px -1px rgba(0,0,0,.39);
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
        background: var(--blue1);
        background: linear-gradient(#d5f0f8,#fff,#c0e7f5)
    }

    #list_exp_mobile .panel.srok .panel_value {
        margin-left: -2px
    }

    #selectExpQuizz {
        position: relative;
        top: 10px
    }

    #list_exp_mobile.fromloecsen #selectExpQuizz {
        top: 65px
    }

    #w_list_exp_mobile .pbou {
        display: none;
        height: 20px;
        line-height: 1;
        text-align: center
    }

    #w_list_exp_mobile .pbou svg {
        height: 20px;
        width: 20px
    }

    .WrapSelectExp {
        width: 100%;
        margin: auto;
        position: relative
    }

    #list_exp_mobile,.quizz,.wrap_list_exp_mobile {
        background: var(--blue1);
        background: linear-gradient(var(--blue2),var(--blue1));
        height: 210px
    }

    #list_exp_mobile .panel {
        color: #666
    }

    #selectExpQuizz .panel {
        background-color: #fff!important;
        margin-bottom: 5px;
        width: 99%;
        padding: 2px 0
    }

    #selectExpQuizz .fnplay {
        margin-top: 0;
        position: absolute;
        right: 10px;
        fill: gray
    }

    #list_exp_mobile.quizz .icon-checkmark,#sent,.ocean,.rmob .desk {
        display: none
    }

    #selectExpQuizz.locked {
        pointer-events: none
    }

    #selectExpQuizz.locked .panel_value {
        color: transparent;
        text-shadow: 0 0 8px rgba(0,0,0,.5)
    }

    #selectExpQuizz .selected {
        background-color: var(--blue1);
        color: #769691
    }

    #selectExpQuizz .panel.selected {
        background-color: var(--blue1);
        color: var(--blue2);
        font-weight: 700
    }

    #selectExpQuizz .panel.wrong_rep {
        color: var(--red);
        font-weight: 700
    }

    #bar_left .icon-graduation-cap {
        padding: 2px 5px 0 25px
    }

    #sent {
        font-size: 5vw;
        line-height: 1.2;
        position: absolute;
        width: 90%;
        margin: 0 20px;
        min-height: 45px;
        text-align: left;
        color: #fff;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #sent>span {
        display: table-cell;
        vertical-align: middle
    }

    .nq {
        left: 54px;
        top: 0
    }

    #sent .input_quizz3 {
        padding: 1px 10px;
        font-size: 1em;
        background-color: var(--blue3);
        margin: 0
    }

    #sent input[type=text] {
        box-sizing: border-box;
        border: 0px
        color:var(--red)
    }

    #selectExp .panel_value {
        position: relative;
        top: 50%;
        transform: translateY(-50%)
    }

    #selectExpQuizz .panel_value {
        position: absolute;
        align-items: center;
        justify-content: center
    }

    #list_exp_mobile .panel_value {
        padding: 0 20px;
        font-size: .81em;
        z-index: 999;
        font-weight: 400;
        line-height: 18px;
    }

    #list_exp_mobile .panel_value:lang(ar), #list_exp_mobile .panel_value:lang(he) {
      text-align: right;
    }

    #list_exp_mobile .wt {
        float: right;
        position: absolute;
        right: 40px
    }

    #list_exp_mobile .panel:not(.panel_active) .wt {
        display: none
    }

    #mgraph {
        width: 300px;
        height: 300px
    }

    #list_exp_mobile .panel .panel_trad,.reader_mode {
        display: none
    }

    #list_exp_mobile .panel_active {
        background: var(--blue2)
    }

    #list_exp_mobile .panel_active .panel_trad {
        top: 62%;
        display: block;
        text-align: left;
        padding: 0 20px;
        font-size: .9em;
        z-index: 999;
        font-weight: 400;
        line-height: 15px;
        position: absolute;
        width: 100%;
        background: var(--blue2)
    }

    #list_exp_mobile .panel {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 41px;
        background-color: transparent;
        z-index: 999
    }

    #list_exp_mobile #selectExpQuizz .panel {
        margin-bottom: 6px;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        align-items: center
    }

    .login {
        top: 12px
    }

    .c_ex a,.rmob-f {
        display: block
    }

    .rmob,.tooltip3 .top i {
        display: none
    }

    .rmob-f.rmob {
        display: inline
    }

    .wrap_btn_player:not(:first-child) {
        margin-left: 8px
    }

    .wrap_btn_player {
        margin-left: 8px
    }

    .wrap_btn_player .p .ui-icon-quizz:first-child {
        padding: 0 10px 0 9px;
        display: inline
    }

    .tooltip3 .top {
        margin-left: 6px;
        padding: 0;
        width: 95%;
        top: 61px;
        left: auto;
        transform: inherit
    }

    .divided {
        margin-top: 22px;
        margin-left: 160px
    }

    #lbl_exp .icon {
        width: 14px;
        height: 14px
    }

    .exp_word {
        height: 33px!important
    }

    .validate_desktop {
        margin-top: 30px;
        width: 40%;
        height: 22px;
        font-size: 18px;
        padding: 5px;
        position: relative;
        left: 33%;
        line-height: 22px
    }

    .menu_translate_home {
        position: absolute
    }

    #img_exp {
        float: left;
        margin-top: 5vh;
        margin-bottom: 2vh
    }

    #cnt_exp #lbl_phon span {
        background: 0 0;
        background-color: transparent
    }

    #cnt_exp {
        line-height: 22px
    }

    #footer .height_50 {
        padding: 8px
    }

    #header-t-art-actions {
        position: absolute
    }

    #training .content {
        padding-right: 0;
        padding-left: 5px;
        display: inline-block;
        margin-top: 0
    }

  
    #pup_result3 .choices a {
        width: 80%
    }

    .progress-bar-button {
        width: 70%
    }

    .bouton-t-1 {
        white-space: normal
    }

    .progt div:first-child {
        margin-top: 20px
    }

    .printDiv {
        table-layout: fixed;
        font-size: 14px;
        font-weight: 700
    }

    .printDiv .v {
        height: 45px
    }

    .printDiv td,.printDiv th {
        text-align: left;
        padding: 8px;
        border: 0
    }

    .inf {
        margin-left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        text-align: center;
        visibility: hidden
    }

    .printDiv .re .n,.printDiv .re .o {
        width: 10px;
        height: 10px;
        margin-right: 0;
        margin-left: 3px
    }

    .contentfiches thead tr:nth-child(1) {
        background-color: var(--blue2)
    }

    .contentfiches td {
        width: inherit;
        border: 0
    }

    .contentfiches td:nth-child(1),.contentfiches th:nth-child(1) {
        display: revert
    }

    .contentfiches td:nth-child(1) {
        border-right: 1px solid #ccc;
        height: 35px
    }

    .contentfiches td:nth-child(7) {
        font-size: 10px;
        text-align: center;
        width: 23px
    }

    #training .choice {
        padding: 0 8px
    }

    .contentfiches th {
        padding: 4px
    }

  

    .contentfiches th:nth-child(7) {
        font-size: 10px;
        width: 23px
    }

    .wrap_btn_player .p:first-child {
        padding: 1px 10px 2px 9px
    }

    .ui-icon-quizz.ui-icon-off .icon-trophy {
        fill: var(--blue2)!important
    }

    .arrow {
        width: 0%;
        margin: 5px auto;
        height: 0;
        border-style: solid
    }

    .arrow.dis {
        opacity: .5
    }

    .arrow-right {
        border-width: 30px 20px 0;
        border-color: var(--blue1) transparent transparent transparent
    }

    .arrow-left {
        border-width: 0 20px 30px;
        border-color: transparent transparent var(--blue1) transparent
    }

    #cnt_exp #lbl_trans.example span b,#sent span b {
        color: var(--red);
        font-size: var(--textsize);
        font-weight: 600
    }

    #bar_left .icon-bullseye {
        padding: 0 1px;
        margin: 0
    }

    #bar_left .icon-moon-fill {
        padding: 1px 4px;
        margin: 0
    }

    #navm {
        width: 100%;
        height: 50px;
        padding: 5px 0;
        position: relative;
        background-color: var(--blue1)
    }

    .ui-icon-mic,.ui-icon-next,.btspeed {
        background-color: var(--blue2);
        width: 43px;
        height: 43px;
        margin-left:5px;
    }

    .ui-icon-mic {
        background-color: var(--ora);
        margin-top: 8px;
        float: left;
        border: 0
    }

    .background_color_FFF {
        /*height: 35vh;*/
        width: 100%
    }

    #navm .icon {
        width: 25px;
        height: 25px;
        fill: #fff;
        margin-top: 7px;
        padding: 2px 0 0
    }

    #smnav {
        margin-bottom: 20px;
        height: 30px
    }

    #smnav .ui-btn {
        margin-right: 12px
    }

    .navm .content {
        margin: 0 auto;
        width: fit-content
    }

    #DivLogin {
        top: 60px;
        display: block;
        margin: auto;
        z-index: 9999999;
        width: 100%
    }

    .pup_result.choices,.pup_result.simple,.pup_result.slogin,.pup_result.tscroll {
        overflow: hidden
    }
}