@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
*,
*::after,
*::before{
    box-sizing: border-box;
}
:root{
    --el-light: #EBF5FB;
    --el-blue: #4D81FE;
    --el-blue-c: #AECCDC;
    --el-orange: #E29815;
    --el-pink: #F24266;
    --el-green: #18BD5A;
    --el-dark: #151B37;
    --el-blue-e: #1b349d;
    --el-border: #4C5681;
    --el-border-d: #0F1D58;
    --main-text: 'Inter', sans-serif;
    --el-blue-dark: #162256;
    --el-bg-card-c: #313D6E;
    --el-bg-card-d: #162256;
    --el-bg-grey-dark: #202C61;
    --el-bg-nav: #0F1D58;
    --el-bg-thead-table: #253163;
    --el-border-table: #162256;
    --el-icon: 'Font Awesome 6 Free Solid';
    --el-success: #198754;
}
body{
    margin: 0;
    font-family: var(--main-text);
    color: var(--el-light);
    font-size: 13px;
    font-weight: 300;
    background-color: #09133F;
    /* background-color: #091443; */
    background-size: 100% 100% !important;
}
.bg-body{
    background: url("../../../../assets/themes/other/images/bg.png") center no-repeat;
    background-size: auto;
}
ul, ol{
    margin: 0;
    padding: 0;
    list-style: none;
}

.limiter{
    width: 100%;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
}

button{
    cursor: pointer;
}

.divider{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
}

.divider::before{
    content: '';
    height: 1px;
}

.divider-sm::before{
    width: 15px;
    margin-bottom: 15px;
}
.divider-md::before{
    width: 40px;
    margin-bottom: 15px;
}

.divider-lg::before{
    width: 75px;
    margin-bottom: 30px;
}

.divider-sm::before{
    background-color: var(--el-orange);
}
.divider-md::before{
    background-color: var(--el-orange);
}
.divider-lg::before{
    background-color: var(--el-blue);
}
.divider-start{
    justify-content: start!important;
}
.divider-center{
    justify-content: center!important;
}
.divider-end{
    justify-content: end!important;
}
.text-center{
    text-align: center;
}
/* formulaire */

.login-field{
    margin-bottom: 15px;
}
.login-label{
    font-weight: 500;
    font-size: 13px;
    color: var(--el-dark);
    margin-bottom: 7px;
    display: block;
}
.login-input{
    width: 100%;
    padding: 10px;
    outline: none;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
    transition: box-shadow .3s;
}

.login-input:active,
.login-input:focus,
.login-input:hover {
    outline: none;
    box-shadow: 0px 10px 8px -6px rgba(0,0,0,0.2);
}

.login-submit {
    background: var(--el-blue);
    font-size: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--el-light);
    cursor: pointer;
    transition: .2s;
    outline: none;
    border: none;
}

/* formulaire interieur*/



.el-form{
    display: block;
    border-radius: 8px;
    border: 1px solid var(--el-border);
    background-color: transparent;
    width: 100%;
    font-size: 14px;
    line-height: 1.5;    
    padding: 0.5rem 0.75rem;    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--el-light);
}
.el-form:focus{
    border-color: var(--el-blue);
    outline: 0;
}

.el-form::-moz-placeholder {
    color: var(--el-light);
    opacity: .5;
    font-weight: 300;
}
.el-form::placeholder {
    color: var(--el-light);
    opacity: .5;
    font-weight: 300;
}



.el-form-select {
    --select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23AECCDC' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.9,3.6H1.1c-1,0-1.5,1.2-0.8,1.9l6.9,6.6c0.4,0.4,1.1,0.4,1.6,0l6.9-6.6C16.4,4.8,15.9,3.6,14.9,3.6z'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    /*padding: 0.375rem 2.25rem 0.375rem 0.75rem;*/
    padding: 0.50rem 2.25rem 0.50rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--el-light);
    background-color: transparent;
    background-image: var(--select-bg-img), var(--select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--el-border);
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.el-form-select:focus {
    outline: 0;
    border-color: var(--el-blue);
}
.el-form-select option{
    background-color: var(--el-bg-card-d);
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}
.el-form-file{
    background-color: var(--el-orange);
}

.el-form::file-selector-button {
    padding: 0.375rem 0.75rem;
    margin: -10px -9px;
    margin-top: -13px;
    -webkit-margin-end: 0.75rem;
    margin-inline-end: 0.75rem;
    color: var(--el-light);
    background-color: var(--el-border);
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: var(--el-border);
    border-radius: 4px; 
}
.el-form-group{
    display: flex;
    align-items: center;
}
.el-label-group{
    font-size: 14px;
    border: 1px solid var(--el-border);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-right: 0;
    line-height: 1.5; 
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;   
}
.el-form-group .el-form,
.el-form-group .el-form-select{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: inherit;
    min-width: 200px;
}
@media only screen and (max-width: 1200px) and (min-width: 550px)  {
    .form-group-row .el-form-select-group, #select-data-change {
        min-width: 173px !important;
    }
}

@media (max-width: 550px){
    .form-group-row .el-form-select-group , #select-data-change{
        min-width: 90px !important;
    }
}
#select-data-change{
    min-width: 123px;
}
.form-group-row .el-form-select-group {
    min-width: 129px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.form-group-row button i {
    font-size: 12px;
}
.form-group-row button{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.el-btn{
    display: block;
}
.el-btn,
.el-btn-icon,
.el-btn-bulleted{
    
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    padding: .7rem 1rem;
    border-radius: 8px;
    outline: none;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .3s ease;
}
.el-btn-icon{
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 15px;
}
.el-btn-icon:hover{
    opacity: .85; ;    
}

.el-btn-icon i{
    font-size: 16px;
}


.el-btn-bulleted{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0 10px;
    text-transform: none;
    font-size: 14px;
}

.el-btn-bulleted:hover{
    opacity: .85; ;    
}

.el-btn-bulleted i{
    font-size: 15px;
}


/* .page-link-wrap{
    width: 100%;
    max-width: 300px;
    margin-left: auto;
}
.page-link-wrap a ~ a{
    margin-top: 10px;
} */

.page-link-header{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.page-link-header a{
    margin-right: 15px; 
    width: 35px;
    height: 35px;   
}




.el-btn-full{
    width: 100%;
}
.el-btn-orange,
.el-btn-pink,
.el-btn-blue,
.el-btn-green,
.el-btn-success,
.el-btn-dark{
    color: var(--el-light);
}
.el-btn-light{
    color: var(--el-dark);
    background-color: var(--el-light);
}
.el-btn-orange{
    background-color: var(--el-orange);
}
.el-btn-pink{
    background-color: var(--el-pink);
}
.el-btn-blue{
    background-color: var(--el-blue);
}
.el-btn-green{
    background-color: var(--el-green);
}
.el-btn-success{
    background-color: var(--el-success);
}
.el-btn-dark{
    background-color: var(--el-dark);
}
.el-btn-border{
    background-color: var(--el-border);
}
.el-btn-submit{
    background-color: var(--el-light);
    color: var(--el-dark);
    display: none;
}

.btn-size{
    position: relative;
}
.btn-size::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 1;
}
.el-search{
    position: relative;
}
.el-search i{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 13px;
    left: 15px;
    color: var(--el-orange);
}
.el-search input{
    padding-left: 40px;
}


.el-form-container{
    background-color: var(--el-bg-nav);
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.form-container{

}
.el-label{
    display: block;
    margin-bottom: 8px;
}


@media (min-width: 540px){
    .form-container{
        width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* boutton accueil */


.btn-home-container,
.btn-home a,
.btn-dashboard a{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    flex-direction: column;
}
.btn-home-container{
    flex-direction: row;
    justify-content: center;
}
.btn-home-container > div{
    flex: 0 0 50%;
    width: 50%;
}
.btn-home-left{
    padding-right: 8px;
}
.btn-home-right{
    padding-left: 8px;
}
.btn-home-right .btn-home + div{
    margin-top: 16px;
}
.btn-home{
    width: 100%;
}
.btn-home a,
.btn-dashboard a{
    color: var(--el-light);
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    overflow: hidden;
}
.btn-home a{    
    padding: 20px 15px;
    text-align: center;
}
.btn-dashboard a{
    padding: 15px;
}
.btn-home a > *{
    position: relative;
    z-index: 1;
}
.btn-home i,
.btn-dashboard i{
    margin-bottom: 10px;
    font-size: 35px;
    min-width: 30px;
    text-align: center;
}
/*.btn-home a:hover{
    background-color: var(--el-dark);
}*/
.btn-home-green a{
    background-color: var(--el-green);
}
.btn-home-pink a{
    background-color: var(--el-pink);
}
.btn-home-orange a{
    background-color: var(--el-orange);
}
.btn-home-blue a{
    background-color: var(--el-blue);
}

.btn-home a {
    position: relative;
    transition: all .4s cubic-bezier(0.5, 0, 0.6, 1);
}
.btn-home a:hover {
    text-shadow: nthree;
}
.btn-home a:hover::before {
    left: 0%;
    right: auto;
    width: 100%;
}
.btn-home a::before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0;
    z-index: 0;
    content: '';
    /*background: #313D6E;*/
    transition: all .4s cubic-bezier(0.5, 0, 0.6, 1);
}

.btn-dashboard{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
}
.notification-dashboard{
    display: -ms-flexbox;
    justify-content: center;
    max-width: 358px;
    width: 100%;
    height: auto;
}
.notification-dashboard div {
    display: flex;
    display: -ms-flexbox;
    align-items: initial;
    flex-direction: column;
    transition: all .4s cubic-bezier(0.5, 0, 0.6, 1);
    background-color: var(--el-light);
    padding: 10px;
    color: violet;
    min-height: 150px;
    color: var(--el-blue);
}
@media (min-width: 768px){
    .notification-dashboard.btn-home-blue {
        display: inline-table;
    }
}

.notification-dashboard.btn-home-blue {
    margin: 0 auto;
}

.btn-dashboard a{
    transition: all .4s cubic-bezier(0.5, 0, 0.6, 1);
    background-color: var(--el-blue);
}
.btn-dashboard a:hover{
    background-color: #313D6E;
}


/*------------------tab----------------*/


.content{
     overflow: hidden;
}
.tab-wrap{
    flex-wrap: wrap;
}




.tab-nav-container{
    padding-left: 40px;
    padding-right: 25px;
}

.tab-nav-item{
    background-color: var(--el-bg-card-c);
    margin-right: 15px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.tab-nav-item::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 11;
}
.page-stage-teacher .tab-nav-item::before{
    height: calc(100% - 30px);
    z-index: 11;
}
.tab-nav-item h4{
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    padding-bottom: 15px;
    position: relative;
    z-index: 10;
}
.tab-nav-item-head{
    padding: 15px 15px 0;
    position: relative;
    z-index: 10;
}

.course-color{
    height: 5px;
    width: 100%;
    position: absolute;
    bottom: 30px;
    left: 0;
    transition: height .3s ease;
    z-index: 9;
}
.page-stage-teacher .tab-nav-item:hover .course-color,
.page-stage-teacher .tab-nav-item.active .course-color{    
    height: calc(100% - 30px);
}
.tab-nav-item-footer{
    display: flex;
    background-color: var(--el-bg-grey-dark);
}
.tab-nav-item-footer button{
    background: transparent;
    border: none;
    flex: 0 0 25%;
    height: 30px;
    font-size: 16px;
}
.tab-nav-item-footer button:hover{
    background: var(--el-bg-nav);
}

.tab-nav-item-footer button ~ button{
    border-left: 1px solid var(--el-bg-card-c);
}
.tab-nav-item-footer .btn-add{
    color: var(--el-blue);
}
.tab-nav-item-footer .btn-edit{
    color: var(--el-orange);
}
.tab-nav-item-footer .btn-duplicate{
    color: var(--el-green);
}
.tab-nav-item-footer .btn-trash{
    color: var(--el-pink);
}
.tab-content-container{
    background-color: var(--el-bg-card-d);
    padding: 10px 15px 25px;
    border-radius: 18px;
    min-height: 375px;
    position: relative;
}

.tab-wrap .tab-content{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: collapse;
    transform: translateY(15px);
    transition: transform .3s ease, opacity .3s ease;
    z-index: 9;
    width: 100%;
}
.tab-wrap .tab-content.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
    z-index: 10;
}
.tab-content-empty{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    font-size: 30px;
}
.tab-nav-document .tab-nav,
.tab-nav-document .tab-nav-item{
    display: flex;
    align-items: center;
}
.tab-nav-document .tab-nav{
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}
.tab-nav-document .tab-nav-item{
    gap: 10px;
    padding: 10px;
    margin-right: 0;
    color: var(--el-light);
    border: none;
    flex: 0 0 calc(50% - 15px);
}
.tab-nav-document .tab-nav-item:hover,
.tab-nav-document .tab-nav-item.active{
    background: var(--el-blue)!important;
}
.tab-nav-document .tab-nav-item:hover i,
.tab-nav-document .tab-nav-item.active i{
    color: var(--el-light);
}
.tab-nav-document .tab-nav-item i{
    color: var(--el-orange);
    font-size: 18px;
}


@media (min-width: 768px){
    .tab-nav-document .tab-nav{
        justify-content: start;
    }
    .tab-nav-document .tab-nav-item{        
        flex: inherit;
    }
}
@media (min-width: 992px){
    .tab-nav-document .tab-nav-item{        
        flex: 0 0 100%;
    }
}
.tab-title{
    margin-bottom: 30px;
    border-bottom: 1px solid var(--el-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tab-title h2{
    font-size: 18px;
    font-weight: 500;
}
.tab-title > span{
    font-size: 13px;
    font-weight: 300;
    color: var(--el-orange);
}


.card-container{
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px; 
    gap: 10px 0;   
}
.card-style-1,
.card-style-2{
    flex: 0 0 100%;
    max-width: 100%;  
    padding-left: 5px;
    padding-right: 5px;
    
}

.card{
    background-color: var(--el-bg-card-c);
    width: 100%;
    display: flex;

}

.card-style-1 .card .card-left{
    flex: 0 0 33.3333333%;
    max-width: 33.3333333%;
    overflow: hidden;
}
.card-style-1 .card .card-left a{
    display: block;
    max-height: 130px;
}
.card-style-1 .card .card-left a img{
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
}
.card-style-1 .card .card-right{
    flex: 0 0 66.6666666%;
    max-width: 66.666666%;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}





.card-style-2 .card .card-left{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 15px;
    background-color: var(--el-bg-grey-dark);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-style-2 .card .card-left a{
    display: block;
    max-height: 130px;
}
.card-style-2 .card .card-left a img{
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.card-style-2 .card .card-right{
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.card-style-2 .card-title{
    padding-top: 15px;
}
.card-style-2 .card-title h4{
    margin-top: 0;
}
.card-style-2 .card-title::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: var(--el-orange);
    top: 0;
    left: 0;
}

.card-style-2 .el-form-wrap{
    display: inline-flex;
    justify-content: space-between;
    gap: 10px;
}
.card-style-2 .el-form-wrap .el-checkbox,
#container_tab_planning_form_cours_history label.el-checkbox  {
    padding-top: 15px;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.card-style-2 .el-form-wrap .el-checkbox  label{
    margin-right: 5px;
}
.card-style-2 .el-form-wrap .el-checkbox  span,
#container_tab_planning_form_cours_history label.el-checkbox span{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    bottom: 0;
    background-color: #E29815;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid var(--el-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-style-2 .el-form-wrap .el-checkbox  input:checked + span::before,
#container_tab_planning_form_cours_history label.el-checkbox  input:checked + span::before{
    content: '\f164';
    font-family: var(--el-icon);
    font-size: 12px;
    color: var(--el-light);
}
.card-style-2 .el-form-wrap .el-checkbox  input:checked + span,
#container_tab_planning_form_cours_history label.el-checkbox  input:checked + span{
    background-color: var(--el-green);  
    border: none;
}
.card-style-2 .el-form-wrap .el-checkbox .el-form-check,
#container_tab_planning_form_cours_history label.el-form-check .el-form-check{
    
    cursor: pointer;
    background-color: transparent;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    
    margin: 0;
    margin-left: 5px;
    opacity: 0;
}
.card-style-2 .el-form-wrap .el-checkbox .el-form-check:checked,
#container_tab_planning_form_cours_history .el-form-check:checked,{
    background-color: var(--el-green);
}
.card-style-2 .el-textarea{
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid var(--el-border);
    background-color: transparent;
    color: var(--el-light);
    outline: none;
    padding: 15px;
    margin: 0;
    min-height: 120px;
    margin-bottom: 15px;
    font-family: var(--main-text);
    font-weight: 300;
}
.card-style-2 .notification{
    display: flex;
    gap: 10px;
    padding-top: 15px;
    align-items: center;
}
.card-style-2 .notification .notification-not-sent{
    color: var(--el-pink);
    font-size: 16px;
}
.card-style-2 .notification .notification-sent{
    color: var(--el-green);
    font-size: 16px;
}

.card-title{
    position: relative;
}
.card-title h4{
    font-weight: 500;
}
.card-footer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--el-border);
}
.card-footer .btn-see,
.card-footer .add-comment,
.card-footer .add-favorite,
.card-footer .btn-edit,
.card-footer .btn-delete,
.card-footer .btn-publish{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--el-bg-nav);
    height: 25px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}
.page-stage-teacher .card-footer .add-favorite,
.page-stage-teacher .card-footer .btn-edit{
    margin-left: auto;
}
.card-footer.opacity {
    opacity: 0 !important;
    min-height: 45px;
}
.card-footer .btn-see{
    flex: 0 0 50px;
    max-width: 50px;
    border-radius: 13px;
    color: var(--el-light);
}
.card-footer .add-comment{
    flex: 0 0 25px;
    max-width: 25px;
    border-radius: 50%;
    color: var(--el-blue);
    margin-left: auto;
}
.card-footer .add-favorite{
    flex: 0 0 25px;
    max-width: 25px;
    border-radius: 50%;
    color: var(--el-pink);
}
.card-footer .btn-edit{
    flex: 0 0 25px;
    max-width: 25px;
    border-radius: 50%;
    color: var(--el-light);
}
.card-footer .btn-delete{
    flex: 0 0 25px;
    border-radius: 25px;
    color: var(--el-pink);
    font-size: 18px;
}





@media (min-width: 576px){
    .btn-home-container > div{
        flex: 0 0 37%;
        width: 37%;
    }
    
}

@media (min-width: 768px) {
    .divider{
        justify-content: start;
    }
    
    .btn-home a{
        padding: 15px;
    }
    .btn-home-container > div{
        flex: 0 0 50%;
        width: 50%;
    }
    .notification-dashboard{
        justify-content: start;
    }
    .btn-dashboard{
        justify-content: start;
    }
    .card-style-1,
    .card-style-2{
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    
    
    .btn-home-container{
        flex-direction: row;
    }
    .btn-home-container > div{
        flex: 0 0 50%;
        max-width: 50%;
    }
    
}

@media (min-width: 1280px) {
    .card-style-1,
    .card-style-2{
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%;
    }
}

@media (min-width: 1700px) {
    .card-style-1,
    .card-style-2{
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%;
    }
}


/******************************************************/
.position-relative{
    position: relative;
}
.tab-main{
    flex-wrap: wrap;
}

.video-nav-content,
.audio-nav-content,
.corpus-nav-content{
    position: fixed;
    transition: all .5s ease;
    width: 260px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 5000;
    left: -260px;
}
.video-nav-content.open,
.audio-nav-content.open,
.corpus-nav-content.open{
    left: 0;
}

.video-nav-content.open .tab-nav-toggle i{
    transform: rotateZ(180deg);
}






.tab-nav-right{
    position: fixed;
    transition: all .5s ease;
    width: 260px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 5000;
    right: -260px;
}
.tab-nav-right.open{
    right: 0;
}
.tab-nav-header h3{
    margin: 0;
}
.tab-main .tab-content{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: collapse;
    transform: translateY(15px);
    transition: transform .3s ease, opacity .3s ease;
    z-index: 9;
}
.tab-main .tab-content.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
    z-index: 10;
}

.tab-nav-toggle {
    position: absolute;
    left: 260px;
    right: -40px;
    width: 40px;
    height: 40px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border: none;
    color: var(--el-light);
    cursor: pointer;
    z-index: 800;
    overflow: hidden;
}

.page-library .tab-nav-toggle{
    background-color: var(--el-pink);
}

.page-stage .tab-nav-toggle{
    background-color: var(--el-orange);
}

.page-boosters .tab-nav-toggle{
    background-color: var(--el-blue);
}

.page-profile .tab-nav-toggle{
    background-color: var(--el-green);
}


.tab-nav-toggle::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: transparent;
}
.tab-nav-toggle i{
    transition: transform .3s ease;
}
.tab-nav-right.open .tab-nav-toggle i{
    transform: rotateZ(180deg);
}

.tab-nav-header {
    border-top-left-radius: 20px;
    overflow: hidden;
    background-color: var(--el-bg-card-c);
    padding: 15px;
}
#navigation-library {
    border-top-left-radius: 20px;
}
.tab-nav-right .tab-nav{
    background-color: var(--el-bg-nav);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 10px;
    height: 190px;
    overflow-y: scroll;
}

.tab-nav-right .tab-nav > button{
    width: 100%;
    position: relative;
    border-radius: 10px;
    background-color: transparent;
    border: 0;
    color: var(--el-light);
    text-align: left;
    padding: 10px;
    transition: background-color .4s cubic-bezier(0.5, 0, 0.6, 1);
    cursor: pointer;
}
.tab-nav-right .tab-nav button ~ button{
    margin-top: 1px;
}
.tab-nav-right .tab-nav button ~ button::after{
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    top: -1px;
    height: 1px;
    background-color: var(--el-bg-card-c);
    z-index: 0;
}
.page-library .tab-nav .tablinks:hover,
.page-library .tab-nav .tablinks.active{
    background-color: var(--el-pink);
}

.page-stage .tab-nav .tablinks:hover,
.page-stage .tab-nav .tablinks.active{
    background-color: var(--el-orange);
}

@media (min-width: 576px) {
    
    .tab-nav-right .tab-nav-right.open{
        right: 50px;
    }
    
}

@media (min-width: 768px) {
    
    .tab-nav-right .tab-nav{
        height: auto;
        overflow-y: auto;
    }
}

@media (min-width: 992px) {    
    .tab-nav-right{
        position: inherit;
        width: auto;
        right: 0;
    }
    .video-nav-content,
    .audio-nav-content,
    .corpus-nav-content{
        position: inherit;
        width: auto;
        left: 0;
    }
    .tab-nav-toggle{
        opacity: 0;
        visibility: hidden;
    }
    .tab-nav-header,#navigation-library{
        border-top-right-radius: 20px;
    }
    .tab-nav-right{
        box-shadow: none;
    }
} 



/*-----------------modal-----------------*/

.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #090e22bf;
    z-index: 10000;
    visibility: hidden;
    backdrop-filter: blur(1px);
    perspective: 1500px;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease;
    display: flex;
    align-items: start;
    justify-content: center;
    overflow-y: auto;
}

.modal{
    padding: 70px 10px 30px;
}

.modal h2, .modal h3, .modal h4, .modal h5, .modal h6{
    margin: 0;
}
.modal.open{
    visibility: visible; 
    opacity: 1;   
}
.modal-show{
    overflow: hidden;
}

.modal-open{
    overflow: hidden;
}

.modal-dialog{
    padding: 70px 10px 10px;
    width: 100%;
}

.modal-content{
    padding: 20px;
    background-color: var(--el-bg-card-c);
    width: 100%;
    transform: rotateY(-90deg);
    transition: transform .3s ease;
    box-shadow: 0px 8px 6px -6px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.modal.open .modal-content{
    
    transform: rotateY(0);
}
.modal-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eaf4fa4f;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.modal-header h5{
    font-size: 16px;
    font-weight: 500;
}

.modal-body .el-form,
.modal-body .el-form-select{
    border-color: #eaf4fa4f;
}

.modal-action,
.form-action{
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 15px;
}

.modal-action .el-btn,
.form-action .el-btn{
    padding: 15px 30px ;
}





.modal-close{
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--el-light);
    color: var(--el-light);
    font-size: 12px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.modal-btn,
.close{
    position: relative;
}

.modal-btn::before,
.close::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
}




@media (min-width: 576px){
    .modal-content{
        padding: 25px;
        width: 510px;
    }
    .modal-dialog{
        width: auto;
    }
}

@media (min-width: 768px){
    .modal{
        align-items: center;
        padding: 0;
    }
    .modal.open{
        align-items: center;   
    }
    .modal-content{
        padding: 25px;
        width: 510px;
    }
    .modal-dialog{
        width: auto;
    }
}
@media (min-width: 1280px) {
    

    .modal-show{
        margin-right: 17px;
    }
}

.page-el{
    position: relative;
}
#mydiv {
    position: absolute;
    z-index: 9000;
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    text-align: center;left: 270px;
    height: 200px;
    width: 400px;
    bottom: 0;
  }
  
  #mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
  }

/*navigation*/

.navigation{
    width: 100%;
    position: relative;
    height: auto;
}
.navigation > div{
    width: 100%;
    flex: 0 0 100%;
}
.navigation .btn-home-container{
    transition: transform .3s ease;
}
.navigation .btn-home-container.close{
    transform: translateX(-100%);
    visibility: hidden;
}


.page-link-wrap{
    padding-left: 40px;
    padding-right: 40px;
}
.page-link-wrap > div{
    flex: 0 0 80%;
}
.page-link{
    position: relative;
}
.page-link-item + li{
    margin-top: 10px;
}

/* .navigation .page-link-wrap{
    transition: transform .3s ease;
    top: 0;
    right: -300px;
    transform: translateX(-0%);
    position: absolute;
    opacity: 0;
    visibility: hidden;
}
.navigation .page-link-wrap.open{
    transform: translateX(-100%);
    opacity: 1;
    visibility: visible;
} */

@media (min-width: 576px){
    .page-link-wrap{
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 768px){
    .page-link-wrap{
        padding-left: 60px;
        padding-right: 0;
    }
}

/*navigation*/





.el-btn-outline{
    border: 1px solid var(--el-border)!important;
}

.el-btn-outline-light,
.el-btn-outline-pink,
.el-btn-outline-green,
.el-btn-outline-orange,
.el-btn-outline-blue{
    color: var(--el-light);
    background-color: transparent;
}

.el-btn-outline-light{
    color: var(--el-light);
    border: 1px solid var(--el-border);
}
.el-btn-outline-pink{
    color: var(--el-light);
    border: 1px solid var(--el-pink);
}
.el-btn-outline-green{
    color: var(--el-light);
    border: 1px solid var(--el-green);
}
.el-btn-outline-orange{
    color: var(--el-light);
    border: 1px solid var(--el-orange);
}
.el-btn-outline-blue{
    color: var(--el-light);
    border: 1px solid var(--el-blue);
}

.el-btn-outline-light:hover{
    color: var(--el-dark);
    background-color: var(--el-light);
}
.el-btn-outline-pink:hover{
    background-color: var(--el-pink);
}
.el-btn-outline-green:hover{
    background-color: var(--el-green);
}
.el-btn-outline-orange:hover{
    background-color: var(--el-orange);
}
.el-btn-outline-blue:hover{
    background-color: var(--el-blue);
}

.page-library .el-btn-outline.active{
    background-color: var(--el-pink);
}



.tab-newsletter{
    min-height: 570px;
}
.tab-nav.newsletter-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px!important;
    padding: 15px;
}

.tab-nav.newsletter-nav .tablinks{
    display: flex;
    align-items: center;
    text-align: center;
    flex: 0 0 calc(50% - 5px);
    text-decoration: none;
    color: var(--el-light);
    margin-top: 0;
    border-radius: 0;
    position: relative;
    font-weight: 500;
    overflow: hidden;
    height: 90px;
}
.tab-nav.newsletter-nav .tablinks:first-of-type{
    border: 1px solid var(--el-border);
}
.tab-nav.newsletter-nav .tablinks ~ .tablinks::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity .4s ease;
    background-color: var(--el-bg-card-d);
    opacity: .6;
    z-index: 1;
}
.tab-nav.newsletter-nav .tablinks ~ .tablinks::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 20;
}
.tab-nav.newsletter-nav .tablinks.active::before,
.tab-nav.newsletter-nav .tablinks:hover::before{
    opacity: .2;
}
.tab-nav.newsletter-nav .tablinks::after{
    background: transparent;
}
.tab-nav.newsletter-nav .tablinks.active{
    border: 2px solid var(--el-blue);
}

.page-library .tab-nav.newsletter-nav .tablinks:hover, .page-library .tab-nav.newsletter-nav .tablinks.active {
    background-color: var(--el-blue);
}


.tab-nav.newsletter-nav .tablinks img{
    display: block;
    width: 100%;
    height: 90px;
    object-fit: cover;
    transition: transform .4s ease;
}
.tab-nav.newsletter-nav .tablinks:hover img,
.tab-nav.newsletter-nav .tablinks.active img{
    transform: scale(1.3);
}

.tab-nav.newsletter-nav .tablinks span{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-8px);
    z-index: 10;
}



.tab-content-wrap{
    background: var(--el-blue-dark);
    padding: 15px;
    border-radius: 18px;
}
.content-nav-header{
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}
.tab-title h2 span{
    color: var(--el-blue);
}





/*tab-secondary*/
.tab-nav-wrap-secondary{
    padding-left: 40px;
    padding-right: 25px;
}

.tab-nav-item-secondary {
    padding: 0 15px;
    background-color: var(--el-bg-card-c);
    margin-right: 15px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.tab-nav-item-secondary::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 1;
}

.page-library .tab-nav-item-secondary:hover, .page-library .tab-nav-item-secondary.active {
    background: var(--el-orange);
}

.tab-content-wrap-secondary {
    padding: 10px 15px 25px;
    position: relative;
}

.tab-content-secondary {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: collapse;
    transform: translateY(15px);
    transition: transform .3s ease, opacity .3s ease;
    z-index: 9;
}

.tab-content-secondary.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
    z-index: 10;
}





/*newsletter of the month & past nesletter*/
.content-nav-header{
    padding-top: 15px;
}
.content-inner-wrap{
    position: relative;
}
.tab-inner-panel{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform .4s ease;
}
button[aria-selected="true"] {
    background: var(--el-pink);
}

div[aria-current="false"]{
    visibility: hidden;
    opacity: 0;
    transform: translateX(30px);
    z-index: 99;
}
div[aria-current="true"]{
    position: relative;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    z-index: 100;
}



@media (min-width: 1280px) {
    .card-style-1-xl{
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.card-style-3{
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
}
.card-style-3 .card{
    background-color: transparent;
}
.card-style-3 .card a{
    padding: 15px;
    color: var(--el-light);
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--el-border);
    border-radius: 8px;
    min-height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-style-3 .card a:hover{
    background-color: var(--el-bg-card-c);
}

@media (min-width: 576px) {
    .card-style-3{
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media (min-width: 768px) {
    .card-style-3{
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%;
    }
}
@media (min-width: 1280px) {
    .card-style-3{
        flex: 0 0 25%;
        max-width: 25%;
    }
    .card-style-3.content-page{
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%;
    }
}


/*post*/
.post-container{
    border-radius: 20px;
    background-color: var(--el-bg-grey-dark);
    padding: 30px 15px;
    margin-bottom: 30px;
}


.post-title{
    border-bottom: 1px solid var(--el-bg-card-c);
    margin-bottom: 15px;
    text-align: center;
}
.post-category{
    text-align: center;
}
.post-subtitle{
    padding: 2px 15px;
    background: var(--el-pink);
    font-size: 14px;
}
.post-title h3{
    font-size: 22px;
}

.post-meta{
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}
.post-meta-left{
    flex: 0 0 100%;
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.post-meta-right{
    flex: 0 0 100%;
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}
.meta{
    padding: 5px 10px;
    border-radius: 16px;
    border: 1px solid var(--el-border);
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-wrap: wrap;
}
.meta i{
    margin-right: 10px;
    font-size: 16px;
}

.meta-date{
    display: flex;
    align-items: center;
}
.meta-date i{
    color: var(--el-blue);
    margin-right: 10px;
    font-size: 16px;
}
.meta-term i{
    color: var(--el-blue);
}
.meta-time i{
    color: var(--el-blue);
}
.meta-comment i{
    color: var(--el-green);
}
.meta-favorite i{
    margin-right: 0;
    color: var(--el-pink);
    
}





.post-content{
    line-height: 20px;
    text-align: justify;
}

.post-image img{
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.post-nav{
    padding-left: 40px;
    padding-right: 25px;
}
.post-nav-header{
    text-align: center;
    font-size: 20px;
    padding-bottom: 5px;
    margin-bottom: 25px;
    position: relative;
}
.post-nav-header::before,
.post-nav-header::after{
    position: absolute;
    content: '';
    width: 25px;
    height: 1px;
    background: var(--el-orange);
    bottom: 0;
}
.post-nav-header::before{
    left: 50%;
}
.post-nav-header::after{
    right: 50%;
}
.post-nav-header h4{
    margin-bottom: 15px;
}
.post-nav-item{
    margin-right: 15px;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid var(--el-border);
}

.post-nav-item .post-nav-image{
    margin-bottom: 15px;
}
.post-nav-item .post-nav-image a img{
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.post-nav-title{
    text-align: center;
    font-size: 14px;
}




/*info bulle*/
.post-content{
    position: relative;
}
.post-content span[role="button"]{
    cursor: pointer;
    color: var(--el-orange);
    border-bottom: 1px solid var(--el-orange);
    font-weight: 500;
}
.tooltip{
    width: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 1px solid var(--el-border);
    box-shadow: 0px 10px 8px -6px rgba(0,0,0,0.4);
    margin-bottom: 15px;
    position: absolute;
    background: var(--el-bg-card-d);
}

.tooltip > ul{
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.tooltip > ul li ~ li{
    margin-top: 10px;
}
.tooltip ul li span{
    font-weight: 500;
    color: var(--el-orange);
}
.tooltip-footer{
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    background-color: var(--el-bg-grey-dark);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.tooltip-btn{
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 16px;
    border: 1px solid var(--el-border);
    text-decoration: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.add-comment i{
    color: var(--el-green);
}
.add-favorite i{
    color: var(--el-pink);
}
.read i{
    color: var(--el-blue);
}
.play i{
    color: var(--el-blue);    
}
.add-expression i{
    color: var(--el-light);    
}

@media (min-width: 768px) {
    .post-category,
    .post-title{
        text-align: left;
    }
    .post-meta-left{
        flex: 1;
        justify-content: space-between;
    }
    .post-meta-right{
        flex: inherit;
        justify-content: end;
    }
    .post-image img{
        height: 400px;
    }
}
@media (min-width: 992px) {
    .post-meta-left{
        flex: 1;
    }
    .post-image img{
        height: 600px;
    }
}
@media (min-width: 1280px) {
    .post-container{
        padding: 30px;
    }
}



.content-container{
    border-radius: 20px;
    background-color: var(--el-bg-grey-dark);
    padding: 30px;
    margin-bottom: 30px;
}
.video-container{
    background: #010100;
    border-radius: 16px;
    overflow: hidden;
}

.content-media.active,
.content-audio.active,
.content-corpus-lexical.active,
.content-expression-recording.active,
.content-loop-glossary.active {
    position: unset;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 10;
    display: block;
}
.content-media,
.content-audio,
.content-corpus-lexical,
.content-expression-recording,
.content-loop-glossary {
    display: none;
    position: absolute;
    top: 0;
    /* left: 0; */
    /* opacity: 0; */
    visibility: collapse;
    z-index: 9;
    /* display: contents; */
    width: initial;
    opacity: 0;
}

.video-nav-content,
.audio-nav-content,
.corpus-nav-content{
    padding: 1px 10px 10px;
    background: var(--el-bg-nav);
    border-radius: 16px;
    border-top-right-radius: 0;
}
.main-video{
    width: 100%;
    height: 300px;
    background: #010100;
    overflow: hidden;
    display: block;
}
.main-video-meta{
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}
.main-audio-meta{
    display: flex;
    align-items: center;
    gap: 15px;
}
.icon-audio{
    border: 1px solid var(--el-border);
    border-radius: 16px;
    padding: 20px
}
.icon-audio i{
    font-size: 32px;
    color: var(--el-blue);
}
.audio-ttl h4{
    margin: 0;
    margin-bottom: 10px;
}
.video-date,
.audio-date{
    display: flex;
    align-items: center;
    gap: 10px;
}
.video-date i,
.audio-date i{
    color: var(--el-blue);
    font-size: 16px;
}
.video-nav{
    padding-left: 40px;
    padding-right: 25px;
}
.video-nav-item,
.audio-nav-item{
    position: relative;
    display: flex;
    padding: 8px;
    border-radius: 8px;
    background: var(--el-bg-grey-dark);
    display: flex;
    gap: 10px;
    align-items: center;
}
.video-nav-item ~ div,
.audio-nav-item ~ div{
    margin-top: 8px;
    cursor: pointer;
}
.video-item{
    position: relative;
    max-width: 60px;
}
.video-item video{
    width: 100%;
    height: 100%;
    background: #060A20; 
    display: block;
}
.video-item-play{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background: transparent;
    border: none;
}
.video-item-play i{
    font-size: 22px;
    background-color: var(--el-blue-c);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding-left: 2px;
    padding-top: 2px;
}
.video-item-play:hover i{
    background: var(--el-blue);
    color: var(--el-light);
}
.video-nav-item:hover,
.video-nav-item.active,
.audio-nav-item:hover,
.audio-nav-item.active{
    background: #060A20;    
    cursor: pointer;
}
.video-nav-item.active .video-item-play{
    display: none;
}
.video-meta .video-legend{
    margin-bottom: 10px;
}

.audio-container{
    background: var(--el-bg-nav);
    padding: 15px;
    border-radius: 16px;
    flex: 0 0 100%;
    width: 100%;
}
.audio-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}
.audio-play-list{
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
}

.audio-item{
    flex: 0 0 100%;
    background: var(--el-bg-grey-dark);
    color: var(--el-light);
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
}
.audio-item.active,
.audio-item:hover{
    background: #060A20;
}


.corpus-lexical-list{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 20px;
}
.corpus-lexical-item,
.expression-recording-item,
.loop-glossary-item{
    /* flex: 0 0 100%; */
    background: var(--el-bg-grey-dark);
    color: var(--el-light);
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.expression-recording-item.active, .expression-recording-item:hover,
.corpus-lexical-item.active, .corpus-lexical-item:hover,
.loop-glossary-item.active, .loop-glossary-item:hover {
    background: var(--el-border);
}

.prototype-content {
    background-color: var(--el-blue);
    width: calc(100% + 20px);
    margin-right: -10px;
    margin-left: -10px;
    padding: 10px;
    
}
.prototype-content h4{
    margin: 0;
    margin-bottom: 10px;
}
.prototype-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--el-bg-nav);
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--el-blue-dark);
}

.prototype-meta{
    display: flex;
    gap: 10px;
    justify-content: space-between;
}





.main-audio,
.audio-player{
    width: 100%;
    filter: invert(100);
}
.main-audio{
    margin-bottom: 15px;
}
.audio-statistics{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.audio-statistics .el-table{
    border-radius: 8px;
    overflow: hidden;
    min-width: 100%!important;
}
.audio-statistics .el-table tr,
.audio-statistics .el-table td{
    padding: 7px 10px;
}
.el-ttl i{
    font-weight: 500;
    margin-right: 5px;
}

.media-container,
.audio-no-result{
    height: 400px;
    overflow: auto;
}
/* .audio-nav-content .media-container{
    height: 390px;
} */

.el-scroll-bar::-webkit-scrollbar,
::-webkit-scrollbar {
    width: .5em;
}

.el-scroll-bar::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: var(--el-dark);
}

.el-scroll-bar::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background-color: var(--el-blue);
}

.video-controls{
    display: flex;
    justify-content: center;
    align-items: center;
}
.controls-inner select ~ button{
    margin-top: 10px;
}
.controls-inner button{
    width: 100%;
    justify-content: start;
}


.main-audio-meta{
    margin-bottom: 25px;
}

.modal-analyse-lexicale,
.modal-modification-content-corpus{
    background: transparent;
}
.analyse-words{
    background: var(--el-bg-card-c);
    width: 100%;
}
.analyse-words-header{
    background-color: var(--el-blue);
    padding: 10px;
}
.analyse-words-content{
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.analyse-words-content span{
    flex: 0 0 calc(50% - 10px);
}

/*corpus lexical*/
.corpus-nav-content{
    padding: 0;
}
/*corpus lexical*/
@media (min-width: 576px) {
    .analyse-words-content span{
        flex: 0 0 calc(33.3333333% - 7px);
    }
}
@media (min-width: 768px) {
    .media-container,
    .audio-no-result{
        height: 370px;
    }
    .analyse-words-content span{
        flex: 0 0 calc(25% - 10px);
    }
}
@media (min-width: 960px) {
    .analyse-words-content span{
        flex: 0 0 calc(50% - 10px);
    }
    .media-container,
    .audio-no-result{
        height: 540px;
    }
    .video-nav-content,
    .audio-nav-content,
    .corpus-nav-content{
        border-top-right-radius: 16px;
    }
    .corpus-nav-content{
        background: none;
        box-shadow: none;
    }
}

/***********************************************************/

.transcription,
.translate{
    border-radius: 16px;
    background: var(--el-bg-card-d);
    overflow: hidden;
}
.transcription + .transcription{
    margin-top: 15px;
}
.transcription-header,
.translate-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 0 15px;
    background: var(--el-bg-card-c);
}
.transcription .el-textarea, .el-textarea,
.translate-header .el-textarea{
    max-width: 100%;
    min-width: 100%;
    border-radius: 4px;
    border: 1px solid var(--el-border);
    background-color: transparent;
    color: var(--el-light);
    outline: none;
    padding: 15px;
    margin: 0;
    min-height: 150px;
    font-family: var(--main-text);
    font-weight: 300;
}
.audio-text .el-textarea{
    min-height: 300px;
}
.transcription-btn,
.translate-btn{
    display: flex;
    gap: 5px;
}
.btn-copy,
.btn-edit,
.btn-download{
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--el-light);
    width: 35px;
    height: 35px;
    border-radius: 4px;
    overflow: hidden;
    border: none;
    font-size: 20px;
}

.btn-copy:hover,
.btn-edit:hover,
.btn-download:hover{
    background: var(--el-blue);
}
.transcription-txt,
.translate-txt{
    padding: 15px;
}

/*card-style-4 / card-style-5*/
.card-style-4,
.card-style-5{
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 5px;
    padding-right: 5px;
}
.card-style-4 .card,
.card-style-5 .card{
    background: var(--el-bg-grey-dark);
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;    
}

/*card style 6*/
.card-style-6{
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}
.card-style-6 .card {
    display: contents;
}

.card-style-6 .card .card-title i {
    color: var(--el-pink);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #D81F44;
    background-color: #ECF1F1;
    display: inline-grid;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}
/* .card-style-4 .card-style-4{
    flex: 0 0 100%;
    max-width: 100%;
} */
.card-style-4 .card-img,
.card-style-5 .card-img{
    border-bottom-right-radius: 20px;
    overflow: hidden;
}
.card-style-4 .card-img a img{
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.card-style-5 .card-img a img{
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.card-style-4 .card-title{
    padding: 10px;
    min-height: 60px;
}
.card-style-4 .card-title h4{
    margin: 0;
}
.card-style-4 .card-footer,
.card-style-5 .card-footer{
    border: none;
    padding-left: 10px;
    padding-right: 10px;
    align-items: center;
    gap: 8px;
}
.card-style-4 .card-footer .add-comment,
.card-style-5 .card-footer .add-comment{
    margin-left: 0;
}
.card-style-4 .card-footer .btn-explore,
.card-style-5 .card-footer .btn-explore{
    margin-left: auto;
    text-decoration: none;
    color: var(--el-light);
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-style-4 .card-footer .btn-explore i,
.card-style-5 .card-footer .btn-explore i{
    color: var(--el-orange);
}

.card-style-5 .card-img a{
    position: relative;
}
.card-style-5 .card-img a .card-title{
    position: absolute;
    width: 100%;    
    left: 0;
    bottom: 0;
    background-color: #050b23d9;
    color: var(--el-light);
    text-decoration: none;
    padding-left: 15px;
    padding-right: 15px;
}

.tab-title{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}
.tab-title .btn-prev{
    background: var(--el-bg-card-c);
    border: 1px solid #515959;
    width: 35px;
    height: 35px;
    color: var(--el-light);
    border-radius: 8px;
}

@media (min-width: 576px) {
    .card-style-4 .card-footer,
    .card-style-5 .card-footer{
        gap: 15px;
    }
}
@media (min-width: 768px) {
    .card-style-4,
    .card-style-5{
        flex: 0 0 33.3333333%;
        max-width: 33.3333333%;
        padding-left: 5px;
        padding-right: 5px;
    }
}
@media (min-width: 1280px) {
    .card-style-4,
    .card-style-5{
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 5px;
        padding-right: 5px;
    }
}

/*modal*/

.modal-sm,
.modal-md,
.modal-lg,
.modal-xl{
    width: 100%;
}

@media (min-width: 576px) {
    .modal{
        padding-left: 15px;
        padding-right: 15px;
    }
    .modal-sm{
        width: 540px;
    }
}

@media (min-width: 768px) {
    .modal-md{
        width: 720px;
    }
}

@media (min-width: 992px) {
    .modal-lg{
        width: 960px;
    }
}

@media (min-width: 1280px) {
    .modal-xl{
        width: 1140px;
    }
}
.modal-wrap-xl{
    padding-top: 30px;
    padding-bottom: 30px;
    align-items: start!important;
}
span.notification-not-sent,
span.notification-sent {
    margin-top: 5px;
}



/*------page links & document--------*/

.repertory-container{
    display: flex;
    gap: 10px 0;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}
.parent-repertory{
    padding-right: 5px;
    padding-left: 5px;
    flex: 0 0 50%;
    cursor: pointer;
    text-align: center;
}
.content-repertory{
    background-color: var(--el-bg-grey-dark);
    border: 1px solid var(--el-bg-card-c);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    padding: 20px 15px 0;
    min-height: 140px;
}
.parent-repertory .content-repertory:hover{
    background-color: var(--el-orange);
}
.parent-repertory h4{
    font-weight: 300;
    font-size: 13px;
}
.icon-folder{
    -webkit-mask-size: cover;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-position: center;
    -webkit-mask: url('../images/icon-folder.svg');
    mask: url('../images/icon-folder.svg');
    background-color: var(--el-blue-c);
    width: 68px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;    
}
.parent-repertory:hover .icon-folder{
    background-color: var(--el-light);
}
.repertory-inner{
    width: 100%;
}
.repertory-inner .el-table-container,
.tab-content.tab-portefeuilleprof{
    width: 100%;
    overflow: auto;
}
.repertory-inner-head{
    margin-bottom: 30px;
    display: flex;
    gap: 25px;
    padding-left: 5px;
    padding-right: 5px;
}
.el-btn-back{    
    font-size: 20px;
    padding: 5px;
    border-radius: 4px;
    color: var(--el-orange);
    border: 1px solid #4f5e9a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 50px;
}
.el-btn-edit-repertory,
.el-btn-delete-repertory{
    font-size: 24px;
    text-decoration: none;
    display: block;
    padding: 3px;
    border-radius: 4px;
}
.el-btn-edit-repertory{
    color: var(--el-blue);
}
.el-btn-delete-repertory{
    color: var(--el-pink);
}
.el-btn-edit-repertory:hover,
.el-btn-delete-repertory:hover{
    background-color: var(--el-bg-card-c);
}
.folder-open{
    display: flex;
    align-items: center;
    gap: 10px;
}
.folder-open i{
    font-size: 24px;
    color: var(--el-orange);
}
.folder-open h4{
    margin: 0;
}




.el-table-container{
    padding-left: 5px;
    padding-right: 5px;
    flex: 0 0 100%;
}

.el-table{
    min-width: 500px;
    border-collapse: collapse;
    background-color: var(--el-bg-grey-dark);
}
.el-table thead{
    background-color: var(--el-bg-card-c);
    height: 55px;
    text-align: left;
}

.el-table tbody tr{
    border-bottom: 1px solid #2f3b6b;
}
.el-table th,
.el-table td{
    min-height: 55px;
    vertical-align: middle;
    padding: 10px 15px;
}
.table-action{
    position: relative;
    display: flex;
    justify-content: end;
    align-items: center;
    z-index: 10;
}
.el-dropdown{
    background: var(--el-bg-nav);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid #2f3b6b;
    border-radius: 4px;
    overflow: hidden;
    width: 200px;
    position: absolute;
    top: 10px;
    right: 55px;
}

.el-dropdown li + li{
    border-top: 1px solid #2f3b6b;
}
.dropdown-link{
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--el-light);
}
.dropdown-link:hover{
    background: var(--el-blue);
}

.el-btn-drop{
    font-size: 20px;
    padding: 5px;
    border-radius: 4px;
    outline: none;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .3s ease;
    opacity: 1;
    background-color: var(--el-bg-card-c);
    color: var(--el-light);
    display: flex;
    align-items: center;
    border: 1px solid #4f5e9a;
    height: 30px;
}
.el-btn-drop:hover{
    opacity: 0.8;
}

.el-btn-comment{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--el-light);
    gap: 15px;
    background-color: var(--el-green);
    padding: 5px 10px;
    border-radius: 20px;
    max-width: 70px;
}
.el-btn-comment i{
    font-size: 18px;
}

@media (min-width: 576px) {
    
}

@media (min-width: 768px) {
    .parent-repertory{
        flex: 0 0 33.3333333%;
    }
    .repertory-inner .el-table-container{
        overflow: inherit;
    }
    .el-table{
        min-width: 100%;
    }
}

@media (min-width: 992px) {
    .parent-repertory{
        flex: 0 0 25%;
    }
}

@media (min-width: 1280px) {
    .parent-repertory{
        flex: 0 0 20%;
    }
    .page-stage.el-statitistic .parent-repertory{
        flex: 0 0 50%;
    }
}

.repertory-container div[aria-current="false"] {
    display: none;
}
.el-links {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
}
table#d-table {
    font-size: 13px;
}

.repertory-container div[aria-selected="true"] .content-repertory {
    background: var(--el-orange);
}
.input-search-document {
    border-radius: 15px !important;
}
div[aria-loop="false"] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
}
ul[aria-current="false"]{
    visibility: hidden;
    opacity: 0;
    transform: translateX(30px);
    z-index: 99;
}
ul[aria-current="true"]{
    position: absolute;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    z-index: 100;
}

/*th[aria-data-view="true"],
td[aria-data-view="true"] {
    display: table-cell;
}

th[aria-data-view="false"],
td[aria-data-view="false"]{
    display: none;
}*/

.tab-nav-left {
    position: fixed;
    transition: all .5s ease;
    width: 260px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 900;
    left: -260px;
}
.tab-nav-left.open{
    left: 0;
}
.tab-nav-left.open .tab-nav-toggle i{
    transform: rotateZ(180deg);
}
.tab-nav-left .tab-nav{
    background-color: var(--el-bg-nav);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 10px;
    height: 250px;
    overflow-y: scroll;
}

.tab-nav-left .tab-nav > button{
    width: 100%;
    position: relative;
    border-radius: 10px;
    background-color: transparent;
    border: 0;
    color: var(--el-light);
    text-align: left;
    padding: 10px;
    transition: background-color .4s cubic-bezier(0.5, 0, 0.6, 1);
    cursor: pointer;
}
.tab-nav-left .tab-nav button ~ button{
    margin-top: 1px;
}
.tab-nav-left .tab-nav button ~ button::after{
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    top: -1px;
    height: 1px;
    background-color: var(--el-bg-card-c);
    z-index: 0;
}
@media (min-width: 576px) {
    
    .tab-nav-left .tab-nav-left.open{
        left: 50px;
    }
}

@media (min-width: 768px) {
    
    .tab-nav-left .tab-nav{
        height: auto;
        overflow-y: auto;
    }
}

@media (min-width: 992px) {    
    .tab-nav-left{
        position: inherit;
        width: auto;
        left: 0;
    }
    .tab-nav-left{
        box-shadow: none;
    }
} 

#content-module-library .tab-nav-item-footer button {
    border-left: none !important;
    z-index: 9999;
}
#content-module-library .tab-nav-item-footer {
    justify-content: space-between;
}

.showload {
    display: inherit !important;
}
#view-all-result-search-data {
    width: -webkit-fill-available;
}
@media (max-width: 574px){
    form#search-data-library button {
        margin-top: 15px;
    }
}

@media only screen and (max-width: 766px) and (min-width: 574px)  {
    form#search-data-library button i {
        display: none;
    }
}


.tab-nav-item-form{
    /*background-color: var(--el-bg-card-c);*/
    margin-right: 15px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.tab-nav-item-form::before{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    z-index: 11;
}
.page-stage-teacher .tab-nav-item-form::before{
    height: calc(100% - 30px);
    z-index: 11;
}
.tab-nav-item-form h4{
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    padding-bottom: 15px;
    position: relative;
 }
 .tab-nav-item-form{
    display: flex;
    align-items: center;
}
.tab-nav-item-form{
    gap: 10px;
    /*padding: 10px;*/
    margin-right: 0;
    color: var(--el-light);
    border: none;
    flex: 0 0 calc(50% - 15px);
}

.tab-nav-item-form i{
    color: var(--el-orange);
    font-size: 18px;
}


@media (min-width: 768px){
    .tab-nav-item-form{        
        flex: inherit;
    }
}
@media (min-width: 992px){
    .tab-nav-item-form{        
        flex: 0 0 100%;
    }
}

.el-form-group label.el-label-group {
    line-height: 1.8;
}

.el-label-suf {
    padding: 0.375rem 0.10rem 0.375rem 0.10rem !important;
}

.trainer-page-el .card-style-2 .card-footer {
    gap: 6px;
}

.trainer-page-el .card-style-2 .el-form-wrap {
    justify-content: center;
}
.tab-nav-item-form .el-search i {
    top: 10px;
}
li.page-link-item a {
    text-align: start;
}
span.progres-title {
    margin-left: 10px;
    font-size: 13px;
    line-height: 30px;
    background: var(--el-blue-e);
    width: 75px;
    border-radius: 7px;
}
.tab-title.title-active-manuel{
    margin-top: 0px;
    width: 100%;
}

button[disabled=disabled], button:disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: #c0c0c0;
    background-color: #ffffff;
}
/*.container-corpus-lexical,*/
.container-expression-recording,
.container-loop-glossary {
    background: var(--el-bg-grey-dark);
    color: var(--el-light);
    margin-bottom: 5px;
    /*line-height: 55px;*/
    text-align: left;
    border-radius: 10px;
}
.hidden-prototype,.hidden{
    display: none;
}
.btn-action-speak {
    border-radius: 50%;
    padding: 9px;
    background-color: var(--el-blue-dark);
    color: var(--el-orange);
    cursor: pointer;
}
.btn-action-speak i {
    font-size: 15px;
    text-align: center;
}


span.el-nb-vocab {
    float: none;
    padding-left: 2px;
}

.prototype-container.removebordertoprigth {
    /* border-top-right-radius: 0px; */
}
.text-to-speech-content{
    width: 100%;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


a.btn-read-text-to-speech-origin,
a.btn-read-text-to-speech-traduction {
    border-radius: 50%;
    display: flex;
    padding: 0;
    flex: 0 0 45px;
    height: 45px;
    width: 45px;
}

.analyse-words-header{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: var(--el-bg-nav);
}
.text-to-speech-control{
    display: flex;
    align-items: center;
    gap: 10px;
}
.text-to-speech-control > *{
    min-width: 16px;
}

@media (min-width: 540px){
    .form-container-profil{
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
}

.content-corpus-lexical,
.content-expression-recording,
.content-loop-glossary {
    padding: 0px 15px;
}

/*.container-corpus-lexical .el-ttl,*/
.container-expression-recording .el-ttl,
.container-loop-glossary .el-ttl{
    line-height: 10px!important;
}

.container-expression-databank{
    text-transform: initial;
}

.header-theme-expression {
    background-color: inherit;
}

.container-expression-databank .expression-recording-item.active, 
.container-expression-databank .expression-recording-item:hover,
.container-expression-databank .corpus-lexical-item.active, 
.container-expression-databank .corpus-lexical-item:hover {
    background: var(--el-blue);
}
.el-btn-blue-color{
    color: var(--el-blue);
    cursor: pointer;
}
.el-btn-pink-color{
    color: var(--el-pink);
    cursor: pointer;
}

.el-icones-light{
    color: var(--el-light);
}
.el-icones-orange{
    color: var(--el-orange);
}

.el-icones-green{
    color: var(--el-green);
}

.el-personnalise{    
    font-size: 18px;
    padding-left: 5px;
}

.card-footer a {
    z-index: 9999;
}
.el-navigation-tab{
    display: none;
}
.el-navigation-tab.active {
    display: block;
}
.el-navigation-tab .el-nav-item-li  a {
    list-style: none;
    display: list-item;
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: #fff;
}

.el-navigation-tab .el-nav-item-li > a {
    display: flex;
    align-items: center;
    color: var(--el-light);
    padding: 10px;
    border-radius: 8px;
}

.el-navigation-tab .el-nav-item-li:hover, .el-navigation-tab .el-nav-item-li.active {
    background: var(--el-orange);
    border-radius: 8px;
}
@media (min-width: 1400px){
    .container {
        max-width: 1320px;
    }
}
@media (min-width: 1800px){
    .container {
        max-width: 1600px;
    }
}


/**************************************************************/
/**************************************************************/

.tab-nav-left .tab-nav > button {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
}

.button-container{
    margin-bottom: 10px;
}
.button-container ~ div{
    border-top: 1px solid var(--el-border);
    padding-top: 10px;
}

a.btn-dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    border-radius: 50%;
    width: 25px;
    flex: 0 0 25px;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    background: var(--el-bg-thead-table);
    color: var(--el-light);
    position: absolute;
    right: 10px;
    top: calc(50% - 12px);
    z-index: 10000;
}

.page-library .tab-nav .tablinks:hover + a.btn-dropdown,
.page-library .tab-nav .tablinks.active + a.btn-dropdown{    
    background: var(--el-border-table);
}

.nav-dropdown{
    margin-top: 10px;
    margin-bottom: 10px;
}

.nav-dropdown ul{
    margin-bottom: 10px;
}
.nav-dropdown ul li + li{
    margin-top: 1px;
}
.nav-dropdown ul li a,
.tab-nav-newsletter ul li a{
    text-decoration: none;
    display: block;
    padding: 10px;
    color: var(--el-light);
    background: var(--el-bg-thead-table);
    border-radius: 6px;
}
.tab-nav-newsletter .el-nav-item-li:hover, .tab-nav-newsletter .el-nav-item-li.active,
.tab-nav-newsletter .el-nav-item-li a:hover, .tab-nav-newsletter .el-nav-item-li.active a {
    background: var(--el-pink);
    border-radius: 8px;
}
.tab-nav-newsletter ul li.active, .tab-nav-newsletter ul li:hover {
    border: none !important;
}
.tab-nav-newsletter ul li {
    padding: 2px;
    border: 0px !important;
}
.page-library .nav-dropdown ul li a:hover,
.page-library .nav-dropdown ul li a.active{
    background: var(--el-border);
}
.button-inner{
    position: relative;
}
.tab-nav-left .tab-nav .button-container .button-inner  > button {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
}
.tab-nav-left .tab-nav .button-container .button-inner > button {
    width: 100%;
    position: relative;
    border-radius: 10px;
    background-color: transparent;
    border: 0;
    color: var(--el-light);
    text-align: left;
    padding: 10px;
    padding-right: 45px;
    transition: background-color .4s cubic-bezier(0.5, 0, 0.6, 1);
    cursor: pointer;
}
.tab-nav-left .tab-nav .button-container .button-inner {
    margin-top: 1px;
}
.page-library .tab-nav .button-container .button-inner .tablinks:hover,
.page-library .tab-nav .button-container .button-inner .tablinks.active {
    background-color: var(--el-pink);
}





/*bouton fixe racourcis*/
.shortcuts li{
    position: relative;
}
.btn-bulle{
    position: absolute;
    display: flex;
    align-items: center;
    padding-left: 15px;
    height: 40px;
    min-width: 150px;
    padding-right: 30px;
    top: 0;
    right: 20px;
    color: var(--el-light);
    z-index: -1;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    opacity: 0;
    transition: opacity .3s ease;
    display: none;
}

.side-bar-shortcuts .shortcuts li > button:hover + .btn-bulle,
 .side-bar-shortcuts .shortcuts li > a:hover + .btn-bulle{
    opacity: 1;
    display: flex;
 }
.container-dropdown{
    display: none;
}
.lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    -webkit-animation: swiper-preloader-spin 1s infinite linear;
    animation: swiper-preloader-spin 1s infinite linear;
    box-sizing: border-box;
    border: 4px solid var(--swiper-theme-color);
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}


/*.tab-nav-item{
    padding-right: 45px!important;
}*/
.btn-wrap{
    flex: 1;
}
.btn-inner{
    display: flex;
    position: relative;
}
a[data-comportement="in"] + button{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.sub-nav-dropdown{
    background: var(--el-bg-nav);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    max-height: 300px;
    overflow: auto;
}

.sub-nav-dropdown ul{
    padding: 10px;
}

.sub-nav-dropdown ul li + li{
    border-top: 1px solid var(--el-bg-card-c);
}
.sub-nav-dropdown ul li a{
    display: block;
    padding: 10px;
    text-decoration: none;
    color: var(--el-light);
    border-radius: 6px;
}
.sub-nav-dropdown ul li a:hover,
.sub-nav-dropdown ul li a.active{
    background: var(--el-border);
}

.tab-nav-newsletter .button-container .button-inner > button{
    justify-content: start !important;
    padding: 18px !important;
}

.tab-nav-newsletter .button-container .button-inner > button.active{
    background: var(--el-blue)!important;
}
.content.page-stage-teacher .card-style-2 .el-form-wrap {
    gap: 0px;
}
.content-page-result .tox {
    min-height: 350px;
}
.container-notification li {
    padding: 5px;
    color: var(--el-dark);
    font-size: 13px;
}
span.badge.notification {
    color: var(--el-light);
    font-size: 14px;
    background: var(--el-green);
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-grid;
    border-radius: 50%;
    text-align: center;
}
.container-notification a {
    background: no-repeat;
    text-decoration: none;
    font-size: 14px;
    color: var(--el-orange);
    font-weight: 900;
}
.side-bar-shortcuts a.el-btn-light i {
    color: var(--el-pink);
}
span.accountStat {
    font-size: 12px;
    background: var(--el-pink);
    border: 1px solid var(--el-pink);
    border-radius: 50%;
    height: 22px;
    width: 22px;
    display: inline-table;
    line-height: 22px;
}
/*canvas#statistic-el {
    width: 100%;
    height: 100%;
}*/

.modal-container-page{
    z-index: 5000 !important;
}
.page-course-history .slick-dotted.slick-slider {
    z-index: 4900;
}
.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
span.blink {
    color: var(--el-green);
}
div#content-article .tab-wrap-secondary article.post-container, .tooltip.terme-detect {
    background: var(--el-light) !important;
    color: var(--el-dark) !important;
    border: var(--el-light) !important;
}
.tooltip-footer{
    background: var(--el-light) !important;
    color: var(--el-dark) !important;
}
div#content-article .tab-wrap-secondary article.post-container  .meta, div#content-article .tab-wrap-secondary article.post-container  .tooltip-btn {
    background: var(--el-bg-grey-dark);
    color: var(--el-light);
}
div#content-article span.post-subtitle {
    color: var(--el-light);
}
.hidden-wrap {
    display: none;
}
.show-wrap {
    display: block;
}

.btn-explore.explore-article.btn-publish {
    background-color: var(--el-pink);
    color: var(--el-light);
    border-radius: 25px;
    padding: 4px;
    gap: 3px;
}

.transcription-txt iframe body,
.transcription-txt iframe body pre{
  background: none;
}
.transcription-txt iframe body pre{
  color: #F8F6EB;
}
.btn-disconnect {
    cursor: pointer;
}
div#modal_confirm_action_timeout {
    align-items: end;
    left: 0;
    float: left !important;
    backdrop-filter: inherit;
    justify-content: left;
    z-index: 10000;
}
a.btn-el-circle {
    border-radius: 50%;
    height: 39px;
    width: 50px;
    background-color: var(--el-pink);
    border-color: var(--el-pink);
    color: var(--el-light);
    border: none !important;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

a.btn-el-circle-action-save {
    border-radius: 50%;
    height: 39px;
    width: 70px;
    background-color: var(--el-blue);
    border-color: var(--el-blue);
    color: var(--el-ligth);
    border: none !important;
    font-size: 20px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
}

a.btn-el-circle-action-cancel {
    border-radius: 50%;
    height: 39px;
    /* width: 70px; */
    /* background-color: var(--el-light); */
    border-color: var(--el-light);
    color: var(--el-pink);
    border: none !important;
    font-size: 40px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
}
.side-bar-shortcuts span.btn-bulle.el-btn-light {
    color: var(--el-pink);
}
.spinner {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: url('../../../../assets/icons-f2+/f2plus-logo-loader.gif') 50% 50% no-repeat rgb(303,451,249);
  opacity: 0.9;
}
iframe.embed-responsive-item.iframeActivitySequence {
    width: -webkit-fill-available;
    width: 100%;
    max-width: 100%;
    min-height: 720px;
    height: 100%;
    background-color: snow;
    z-index: 10;
}
h4.nothing-data.text-center {
    font-size: larger;
}
.tab-content-empty h5 {
    font-size: 17px;
}
div#content-nodata {
    margin: 0 auto;
    width: 100%;
}
div#content-nodata  .card {
    background: none;
}
.footer-page-result .btn-open-page {
    max-width: 100%;
    background: none;
}
.footer-page-result .card-title {
    width: 100%;
}
.finishedtodo-check {
    color: var(--el-green);
    font-size: 16px;
}

/*shortcut form*/
div#container-wp-myodb {
    right: 50px;
    background: var(--el-bg-card-c);
    width: 300px;
    /*border: 1px solid #ffffff;*/
    border-radius: 10px;
    z-index: 9999;
}

div.width-max {
    width: 430px !important;
}


@media (min-width: 1280px) {
    
    div#container-wp-myodb{
        right: 75px;
    }
}
.expression-databank-shorctuf-from h5,
div#incident-technic-form  h5 {
    font-size: 1rem;
    margin-left: 10px;
}
#expression-databank-shorctuf-from,
#white-paper-shorctuf-from,#container-wp-myodb,#incident-technic-form{
  display: none;
}
/*div#expression-databank-shorctuf-from form,*/
div#incident-technic-form form {
    margin: 0 10px 10px 10px;
}

div#white-paper-shorctuf-from iframe.embed-responsive-item, div#trainer-note-shorctuf-from iframe.embed-responsive-item {
    min-height: 450px;
}
section.content.page-white-paper iframe.embed-responsive-item {
    width: 100%;
    position: relative;
    min-height: 460px;
}
section.content.page-white-paper .embed-responsive.embed-responsive-16by9,
section.content.page-white-paper .card-container {
    width: inherit;
}
div#row\ empty-data-row, .row.empty-data-row {
    width: 100%;
    text-align: center;
}
p.tab-nav-item.info-tabs,p.tab-nav-item.info-tabs:hover {
    background: none !important;
    padding: 0px;
}
.form-group-select {
    width: 100%;
    border: 1px solid var(--el-border);
    border-radius: 8px;
}
.form-group-select label{
    margin-top: 8px;
}
.form-group-select select{
    border-top: 0px;
    border-bottom: 0px;
    border-right: 0px;
}
.form-group-select label, .form-group-select select {
    min-width: auto !important;
    width: 50% !important;
    text-align: center;
}

button.remove-content-favorites,
button.remove-page-course-history {
    position: relative;
    top: 78px;
    right: 25px;
    line-height: 0px;
    background-color: inherit !important;
    border: 0px !important;
    height: 22px;
    color: var(--el-pink);
    z-index: 999;
}
/*.navigation-training-area {
    max-width: 231px !important;
}*/
.footer-item-between {
    justify-content: space-between;
}
/*.footer-item-between .remove-favorites-training {
    border-left: none;
}*/
.tab-nav-item-footer.footer-item-between button {
    flex: 0 0 34%;
}
.footer-item-between button {
    z-index: 999;
}
.btn-add-new-class.modal-btn {
    text-transform: inherit;
}
iframe.iframecontainerel, iframe.iframetrainingarea {
    width: 100%;
    height: 100%;
    min-height: 450px;
}
div#content-nodata .card-container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
p.info-user-create {
    margin: 0 auto;
    padding: 8px;
}
.page-home::before{
    content: '';
    position: absolute;
    width: 750px;
    height: 750px;
    right: 0;
    bottom: 0;
    background: url('../../../../assets/themes/other/images/bg-laptop.png') no-repeat right bottom;
    background-size: cover;
    background-position: 210px 230px;
    z-index: -2;
}

.login-container,
.home-container{
    min-height: calc(100vh - 60px);
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}


/*logo*/
.brand-wrap{
    text-align: center;
}
.brand-wrap img{
    max-width: 358px;
    width: 100%;
    height: auto;
}
.brand-container{
    display: flex;
    display: -ms-flexbox;
    margin-bottom: 40px;
    justify-content: center;
}
.brand{
    width: 250px;
    height: 54px;
}

.brand{
    -webkit-mask-size: cover;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-position: center;
    -webkit-mask: url('../images/forma2+.svg');
    mask: url('../images/forma2+.svg');
    background-color: var(--el-light);
}

.basline{
    text-align: center;
}
.basline h5{
    margin: 0;
    font-size: 18px;
    font-weight: 400;
}
.basline h5::first-letter{
    text-transform: uppercase;
}
/* login */

.login-wrap,
.login-inner{
    position: relative;    
    padding: 20px;
}
.login-wrap::before,
.login-inner::before{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    z-index: -1;
}
.login-wrap::before{
    border: 1px solid #363F64;        
    border-radius: 90px;
    -webkit-mask-size: 150px 150px, 150px 360px, 255px 60px, 50px 250px;
    mask-size: 150px 150px, 150px 360px, 255px 60px, 50px 250px;
    -webkit-mask-image: url(../images/mask-outer-1.svg), url(../images/mask-outer-2.svg), url(../images/mask-outer-3.svg), url(../images/mask-outer-4.svg);
    mask-image: url(../images/mask-outer-1.svg), url(../images/mask-outer-2.svg), url(../images/mask-outer-3.svg), url(../images/mask-outer-4.svg);
}
.login-inner::before{
    border: 1px solid #50423A;
    border-radius: 70px;
    -webkit-mask-size: 120px 110px, 180px 280px, 110px 130px, 200px 300px;
    mask-size: 120px 110px, 180px 280px, 110px 130px, 200px 300px;
    -webkit-mask-image: url(../images/mask-inner-1.svg), url(../images/mask-inner-2.svg), url(../images/mask-inner-3.svg), url(../images/mask-inner-4.svg);
    mask-image: url(../images/mask-inner-1.svg), url(../images/mask-inner-2.svg), url(../images/mask-inner-3.svg), url(../images/mask-inner-4.svg);
}
.login-wrap::before,
.login-inner::before{
    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    mask-position: top left, top right, bottom right, bottom left;
    -webkit-mask-position: top left, top right, bottom right, bottom left;  
}
.login{
    background-color: var(--el-blue-c);    
    border-radius: 50px;
    padding: 30px;
}

.login-head{
    margin-bottom: 30px;
    text-align: center;
    color: var(--el-dark);
}
.login-head i{
    display: block;
    text-align: center;
    font-size: 50px;
    margin-bottom: 15px;
}
.login-head span{
    font-size: 13px;
}



.footer{
    text-align: center;
    height: 60px;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    /* align-self: end; */
}

@media (min-width: 576px){
    .limiter::before,
    .limiter::after{
        content: '';
        position: absolute;
        z-index: -1;
        top: 50px;
        left: 50px;
        bottom: 50px;
        right: 50px;
    }
    .limiter::before{
        background: url('../../../../assets/themes/other/images/poin-1.svg') no-repeat, url('../../../../assets/themes/other/images/point-2.svg') no-repeat;
        background-size: auto, auto;
        background-position: top left, bottom right;
    }
    .limiter::after{
        background: url('../../../../assets/themes/other/images/ellipse-1.svg') no-repeat, url('../../../../assets/themes/other/images/ellipse-2.svg') no-repeat;
        background-size: auto, auto;
        background-position: top right, bottom left;
    }

    .limiter.limiter-trainer::before{
        background: none !important;
        background-size: auto, auto;
        background-position: top left, bottom right;
    }
    .limiter.limiter-trainer::after{
        background: none !important;
        background-size: auto, auto;
        background-position: top right, bottom left;
    }
}

@media (min-width: 576px){
    .login-container, .home-container {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .home-container.home-container-trainer{
        padding-top: 5px;
    }
}
@media (min-width: 768px){
    .brand-container {
        justify-content: start;
    }
    .basline {
        text-align: left;
    }
}
@media (min-width: 992px){
    .brand-wrap {
        text-align: left;
    }
    .brand {
        width: 300px;
        height: 65px;
    }
    .login-container, .home-container {
        /*padding-top: 105px;*/
        padding-top: 70px;
    }
}
@media (min-width: 1200px){
    .container{
        max-width: 1140px;
    }
}

/*-------------------------------------------------------*/
/*--------------------page-elearning--------------------*/
/*-----------------------------------------------------*/

.breadcrumb{
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-top: 20px;
}
.breadcrumb > i{
    font-size: 12px;
    color: var(--el-blue);
}
.breadcrumb ol{
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
}
.breadcrumb-item + .breadcrumb-item::before{
    font-family: "Font Awesome 6 Free Solid";
    font-size: 12px;
    content: '\f054';
    display: inline-block;
    color: var(--el-blue);
}
.breadcrumb ol a{
    color: var(--el-light);
    text-decoration: none;
    padding-left: 15px;
    padding-right: 15px;
}


.elearning{
    background: url('../images/bg-main.png') no-repeat top center fixed;
}
.main-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0;
    min-height: calc(100vh - 242px);
}


.top{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: var(--el-bg-grey-dark);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.top-inner{
    height: 100%;
    align-items: center;   
}

.top-left{
    display: flex;
    align-items: center;
    gap: 15px;
}

.el-brand{
    width: 110px;
    height: 40px;
    background: url('../images/forma2plus-min.svg') no-repeat center;
    background-size: cover;
}


/*el-navbar*/

.burger {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 8px;
    border: 2px solid var(--el-bg-nav);
    background-color: var(--el-bg-card-c);
    color: var(--el-light);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}



.el-navbar{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.el-nav-item a{
    text-decoration: none;
}
.el-nav-item > a{
    display: flex;
    align-items: center;
    color: var(--el-light);
    padding: 10px;
    border-radius: 8px;
}
.el-nav-item > a i{
    font-size: 25px;
    margin-right: 10px;
}

.el-nav-item:first-child > a i{
    color: var(--el-pink);
}
.el-nav-item:nth-child(2) > a i{
    color: var(--el-orange);
}
.el-nav-item:nth-child(3) > a i{
    color: var(--el-blue);
}
.el-nav-item:last-child > a i{
    color: var(--el-green);
}

.el-nav-item > a:hover i,
.el-nav-item > a.active i{
    color: var(--el-light);
}

.el-nav-item:first-child > a:hover,
.el-nav-item:first-child > a.active{
    background: var(--el-pink);
}
.el-nav-item:nth-child(2) > a:hover,
.el-nav-item:nth-child(2) > a.active{
    background: var(--el-orange);
}
.el-nav-item:nth-child(3) > a:hover,
.el-nav-item:nth-child(3) > a.active{
    background: var(--el-blue);
}
.el-nav-item:last-child > a:hover,
.el-nav-item:last-child > a.active{
    background: var(--el-green);
}
/*el-navbar-toggle*/
.el-nav-toggle{
    margin-top: -70px;
    background: var(--el-dark);  
    padding-top: 15px;
    padding-bottom: 15px;
    transition: margin-top .4s ease;
}
.el-nav-toggle.open{
    margin-top: 60px;  
}
.el-nav-toggle .el-navbar{
    flex-wrap: wrap;
    gap: 10px;
}
.el-nav-toggle .el-navbar .el-nav-item{
    flex: 0 0 calc(50% - 10px);
}
.el-nav-toggle .el-navbar .el-nav-item:nth-child(odd){
    margin-left: 0;
}

.el-nav-toggle .el-nav-item:first-child > a{
    background: var(--el-pink);
}
.el-nav-toggle .el-nav-item:nth-child(2) > a{
    background: var(--el-orange);
}
.el-nav-toggle .el-nav-item:nth-child(3) > a{
    background: var(--el-blue);
}
.el-nav-toggle .el-nav-item:last-child > a{
    background: var(--el-green);
}
.el-nav-toggle .el-nav-item  > a i{
    color: var(--el-light);
}


#library .modal-content,
#training .modal-content,
#boosters .modal-content,
#profile .modal-content{
    width: 350px;
    background-color: var(--el-blue-dark);
}

.modal{
    background-color: #03081df0;
}

@media (min-width: 768px){    
    .el-nav-toggle{
        margin-top: -15px;
    }
    .el-nav-toggle .el-navbar .el-nav-item{
        flex: 0 0 calc(74% / 3 - 10px);
    }
    .el-nav-toggle .el-navbar .el-nav-item:first-child{
        flex: 0 0 26%;
    }
}
@media (min-width: 992px){
    .el-nav-toggle{
        display: none;
    }
    .burger{
        display: none;
    }
}
@media (min-width: 1200px){
    .container{
        max-width: 1140px;
        /*max-width: 1240px;*/
    }
    .el-brand{
        width: 185px;
        background: url('../images/forma2plus.svg') no-repeat center;
        background-size: cover;
    }
}

.top-right,
.top-right > ul{
    display: flex;
    align-items: center;    
}

.top-right{
    justify-content: end;
    position: relative;
}

.top-right > button{
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 8px;
    border: 2px solid var(--el-bg-nav);
    background-color: var(--el-bg-card-c);
    color: var(--el-light);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.top-right > ul li:nth-child(2) > button::before,
.top-right > button::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
}
.top-right > button ~ button{
    margin-left: 10px;
}

.top-right > ul{
    list-style: none;
    margin: 0;
}


.top-right > ul.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.top-right > ul li + li{
    margin-left: 10px;
}
.top-right > ul li > a,
.top-right > ul li > button,
.profile-dropdown.open span.initial-name{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--el-bg-nav);
    color: var(--el-light);
    cursor: pointer;
}
.profile-dropdown.open span.initial-name{
    background-color: var(--el-pink);
}
.top-right > ul li > button.btn-profile,
.top-right > ul li:last-child .profile-dropdown.open button{
    background-color: var(--el-pink);
    color: var(--el-light) !important;
    font-size: 13px;
}
.top-right > ul li:first-child a{
    color: var(--el-orange);
    text-decoration: none;
    font-size: 20px;
}
.top-right > ul li:nth-child(2) > button{
    padding: 0;
    overflow: hidden;
    position: relative;
}
.top-right > ul li:nth-child(2) button img{
    width: 100%;
    height: auto;
}
.top-right > ul li:last-child button{
    font-size: 20px;
    color: var(--el-blue);
}
.top-right > ul li{
    position: relative;
}
.top-right > ul li .profile-dropdown{
    background-color: var(--el-bg-card-d);
    border-radius: 4px;
    border: 1px solid var(--el-border);
    position: absolute;
    top: 60px;
    right: 0;
    transform: translateY(15px);
    transition: all .3s ease;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    min-width: 200px;
}

.top-right > ul li .profile-dropdown{
    padding: 15px;
}
.top-right > ul li .profile-dropdown .profile-header{
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.top-right > ul li .profile-dropdown .profile-header .profile-img{
    width: 50px;
    height: 50px;
    overflow: hidden;
    /*border-radius: 50%;*/
}
.top-right > ul li .profile-dropdown .profile-header .profile-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top-right > ul li .profile-dropdown .profile-header .profile-basline span{
    display: block;
}
.top-right > ul li .profile-dropdown .profile-header .profile-basline span + span{
    color: var(--el-blue);
}
.top-right > ul li .profile-dropdown .profile-action{
    display: flex;
    flex-direction: column;
    gap: 15px
}
.top-right > ul li .profile-dropdown .profile-action > *{
    justify-content: start;
    min-width: 150px;
}
.top-right > ul li .profile-dropdown.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@media (min-width: 768px) {
    
    .top-right > ul{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .top-right > ul{
        box-shadow: none;
    }
    .top-right > ul{
        position: inherit;
        top: inherit;
        right: inherit;
        background-color: transparent;
    }
}


@media (min-width: 1280px) {
    
    .top-right > button.burger{
        display: none;
    }
}
/*tab*/
.page-stage .tab-nav-item:hover,
.page-stage .tab-nav-item.active{    
    background: var(--el-orange);
}
.page-library .tab-nav-item:hover,
.page-library .tab-nav-item.active{    
    background: var(--el-pink);
}
.page-boosters .tab-nav-item:hover,
.page-boosters .tab-nav-item.active{    
    background: var(--el-blue);
}
.page-profile .tab-nav-item:hover,
.page-profile .tab-nav-item.active{    
    background: var(--el-green) !important;
}

.page-stage .tab-nav-item{
    
}
.tab-nav-item h4{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}
.tab-nav-item-head{
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}


/*raccourcis*/
.side-bar-shortcuts{
    position: fixed;
    right: 0;
    bottom: 15px;
    z-index: 5000;
}
.side-bar-shortcuts .shortcuts li ~ li{
    margin-top: 10px;
}
.side-bar-shortcuts .shortcuts li > button,
.side-bar-shortcuts .shortcuts li > a{
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-light);
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    cursor: pointer;
    transition: background-color .4s cubic-bezier(0.5, 0, 0.6, 1);
    position: relative;
    overflow: hidden;
}
.side-bar-shortcuts .shortcuts li > button::before,
.side-bar-shortcuts .shortcuts li > a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.side-bar-shortcuts .shortcuts li > button i,
.side-bar-shortcuts .shortcuts li > a i{
    width: 18px; 
    text-align: center;
}
.side-bar-shortcuts .shortcuts li > button:hover,
.side-bar-shortcuts .shortcuts li > a:hover{
    background-color: var(--el-bg-grey-dark);
}

@media (min-width: 1280px) {
    
    .side-bar-shortcuts{
        position: fixed;
        right: 30px;
        bottom: 50px;
        z-index: 5000;
    }
    .side-bar-shortcuts .shortcuts li > button,
    .side-bar-shortcuts .shortcuts li > a{
        border-radius: 50%;
    }
}

.btn-group{
    display: flex;
    justify-content: end;
    gap: 15px;
    width: 100%;
}



.top-right{
    display: flex;
    justify-content: end;
    align-items: center;
}
.top-right .date i,
.top-right .times i{
    color: var(--el-green);
    font-size: 14px;
    margin-right: 10px;
}

.top-right .date{
    margin-right: 30px;
}



.nav-container{
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    height: 140px;
    overflow: hidden;
    transition: height .3s ease;
    margin-top: 15px;
    width: 350px;
    margin-left: auto;
    margin-right: auto;
}
.nav-container:not(.show){
    height: 0;
    overflow: hidden;
    margin-top: 0;
}
.nav-left,
.nav-right{
    flex: 1;
}
.nav-right{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nav-top a{
    color: var(--el-light);
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.nav-top a i{
    font-size: 20px;
}
.nav-top-green a{
    background-color: var(--el-green);
}
.nav-top-pink a{
    background-color: var(--el-pink);
}
.nav-top-orange a{
    background-color: var(--el-orange);
}
.nav-top-blue a{
    background-color: var(--el-blue);
}
.nav-top a > *{
    position: relative;
    z-index: 1;
}
.nav-top a {
    position: relative;
    transition: all .4s cubic-bezier(0.5, 0, 0.6, 1);
}

.nav-top a:hover::before {
    left: 0%;
    right: auto;
    width: 100%;
}
.nav-top a::before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0;
    z-index: 0;
    content: '';
    background: #313D6E;
    transition: all .4s cubic-bezier(0.5, 0, 0.6, 1);
}
.el-ttl-library,
.el-ttl-boosters,
.el-ttl-stage,
.el-ttl-profile{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}
.el-ttl-library,
.el-ttl-boosters,
.el-ttl-stage,
.el-ttl-profile,
.el-ttl-library a,
.el-ttl-boosters a,
.el-ttl-stage a,
.el-ttl-profile a{
    font-size: 12px;
    text-decoration: none;
    color: var(--el-light);
}
.el-ttl-library i{
    color: var(--el-pink);
}
.el-ttl-boosters i{
    color: var(--el-blue);
}
.el-ttl-stage i{
    color: var(--el-orange);
}
.el-ttl-profile i{
    color: var(--el-green);
}
.el-ttl-library i,
.el-ttl-boosters i,
.el-ttl-stage i,
.el-ttl-profile i{
    font-size: 25px;
}
.el-title{
    margin-top: 85px;
    /*margin-bottom: 40px;*/
    margin-bottom: 25px;
}
.el-title h1{
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    padding: 8px 20px;
    display: inline-block;
    position: relative;
}
.el-title h1::before,
.el-title h1::after{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
}
.el-title h1::before{
    border-top: 3px solid var(--el-light);
    border-left: 3px solid var(--el-light);
    top: 0;
    left: 0;
}
.el-title h1.search-form-container::before{
    border-top: none;
    border-left: none;
    top: 0;
    left: 0;
}
.el-title h1::after{
    border-right: 3px solid;
    border-bottom: 3px solid;
    right: 0;
    bottom: 0;
}
.el-title h1.search-form-container::after{
    border-right: none;
    border-bottom: none;
    right: 0;
    bottom: 0;
}
.el-ttl-library + h1::after{
    border-color: var(--el-pink);
}
.el-ttl-boosters + h1::after{
    border-color: var(--el-blue);
}
.el-ttl-stage + h1::after{
    border-color: var(--el-orange);
}
.el-ttl-profile + h1::after{
    border-color: var(--el-green);
}
h1.search-form-container {
    z-index: 10;
}

@media (min-width: 576px){
        
}

@media (min-width: 768px) {
    .top-right{
        justify-content: space-between;
    }
    .el-title .divider{
        justify-content: center;
    }
}
@media (min-width: 992px) {
    
    .top{
        position: relative;
        background: transparent;
        box-shadow: none;
    }
    .top-inner{
        align-items: start;
    }
    .top-right{
        flex-direction: column;
        align-items: start;
        gap: 30px;
        padding-top: 15px;
    }
    .nav-container{
        margin-right: 0;
    }
    .nav-container:not(.show){
        height: 140px;
    }
    .el-title .divider{
        justify-content: start;
    }
    .el-title{
        margin-top: -30px;
    }
    .el-title h1{
        text-align: left;
    }
    .main-content{
        margin-top: 0;
    }
    
}

@media (min-width: 1280px) {
    
}

@media (min-width: 1700px) {
    
}
.mc-calendar.mc-calendar--modal.mc-calendar--opened {
    z-index: 99999;
}
.tooltip.terme-detect {
    background: var(--el-bg-card-d);
    color: inherit;
}
.tooltip-footer {
    margin: 0 auto;
    width: 100%;
}
/*Profil extranet EL*/
.cont-bg-personnal {
  min-height: 100vh;
  /*background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );*/
  padding: 1rem;
  display: flex;
  /*flex-direction: column;
  align-items: center;*/
  justify-content: center;
}


.cont-main-personnal {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox-personnal {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
}

.cont-checkbox-personnal:first-of-type {
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
}

.cont-checkbox-personnal:active {
  transform: scale(0.9);
}

input.checkbox-input-personnal,
#container_tab_planning_form_cours_history input#planning_send_mail {
  display: none;
}

input.checkbox-input-personnal:checked + label.label-personnal,
#container_tab_planning_form_cours_history input#planning_send_mail:checked + label.label-personnal {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--background);
}

input.checkbox-input-personnal:checked + label.label-personnal img,
#container_tab_planning_form_cours_history input#planning_send_mail:checked + label.label-personnal img {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}

input.checkbox-input-personnal:checked + label.label-personnal .cover-checkbox-personnal,
#container_tab_planning_form_cours_history input#planning_send_mail:checked + label.label-personnal .cover-checkbox-personnal {
  opacity: 1;
  transform: scale(1);
}

input.checkbox-input-personnal:checked + label.label-personnal .cover-checkbox-personnal svg {
  stroke-dashoffset: 0;
}

label.label-personnal {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  /*opacity: 0.6;*/
}

label.label-personnal img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
  /*-webkit-filter: grayscale(100%); 
  filter: grayscale(100%);*/
}

label.label-personnal .cover-checkbox-personnal {
  position: absolute;
  right: 5px;
  top: 3px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--box-shadow);
  border: 2px solid #fff;
  transition: transform var(--transition),
    opacity calc(var(--transition) * 1.2) linear;
  opacity: 0;
  transform: scale(0);
}

label.label-personnal .cover-checkbox-personnal svg {
  width: 13px;
  height: 11px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 5px 0 0 3px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  transition: stroke-dashoffset 0.4s ease var(--transition);
  stroke-dashoffset: 16px;
}

label.label-personnal .info-personnal {
  text-align: center;
  margin-top: 0.2rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #ffc107;
}
.post-container.container-mail-demarage{
    background-color: var(--el-light);
    color: var(--el-dark);
}
.el-btn-glossary,
.btn-commande-glossaire-papier,
.btn-personnalise-content-glossary{
    text-transform: none !important;
}

.post-category.display-flex-content{
    display: flex;
}
.post-category.display-flex-content a {
    color: var(--el-light);
    border-radius: 0px;
    margin-left: 2px;
    background-color: var(--el-blue-e);
}
/*.inc-btn{
    background-color: #202C61;
    color: #ECF1F1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    border-radius: 20px;
    overflow: hidden;
}
.inc-btn:hover{
    background-color: #D81F44;
}
.inc-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid #D81F44;
    background-color: #ECF1F1;
    display: flex;
    justify-content: center;
    align-items: center;
}*/
@media (max-width: 768px) {   
    .brand-wrap.incident-technic-wrag a {
        margin: 0 auto;
    }
}

/*.inc-icon::before{
    content: '';
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath fill='%23D81F44' d='M15,3.3c0.74,0,1.43,0.39,1.8,1.03l11.29,19.23c0.38,0.65,0.38,1.45,0.01,2.1c-0.37,0.65-1.07,1.05-1.81,1.05 H3.71c-0.75,0-1.44-0.4-1.81-1.05c-0.37-0.65-0.37-1.45,0.01-2.1L13.2,4.33C13.57,3.69,14.26,3.3,15,3.3z M15,9.98 c-0.69,0-1.25,0.56-1.25,1.25v5.85c0,0.69,0.56,1.25,1.25,1.25c0.69,0,1.25-0.56,1.25-1.25v-5.85C16.25,10.54,15.69,9.98,15,9.98z M16.67,21.69c0-0.92-0.75-1.67-1.67-1.67s-1.67,0.75-1.67,1.67s0.75,1.67,1.67,1.67S16.67,22.61,16.67,21.69z'/%3e%3c/svg%3e");
}*/

/*@media (min-width: 992px) {    
    .inc-btn span{
        display: block;
        padding-right: 10px;
    }
}*/
li.navigation-professor i.inc-icon {
    height: auto;
    width: auto;
}
li.navigation-professor {
    margin-top: -5px;
}
.btn-home-left a.navigation-menu {
    top: -11px;
}

#modal-personnalise-content-personnal-traning-area .modal-btn-edit-content-personnal-training-area {
    color: #FFFFFF;
    font-size: 1em;
    background: none;
    border: 0px;
    margin-bottom: 21px;
}
#modal-personnalise-content-personnal-traning-area .modal-btn-edit-content-personnal-training-area {
    padding: 15px;
}
#modal-personnalise-content-personnal-traning-area .tablinks:hover, 
#modal-personnalise-content-personnal-traning-area .tablinks.active {
    background-color: var(--el-orange);
}
#modal-personnalise-content-personnal-traning-area .modal-btn-edit-content-personnal-training-area.active, 
#modal-personnalise-content-personnal-traning-area .modal-btn-edit-content-personnal-training-area:hover {
    background-color: var(--el-pink);
    border-radius: 15px;
}
#modal-personnalise-content-personnal-traning-area ul li a .glyphicon-plus-sign-modules::before {
    font-size: 20px;
    color: var(--el-pink);
}

#modal-personnalise-content-personnal-traning-area ul li a i.bx.bxs-minus-circle.glyphicon-plus-sign-modules::before {
    color: var(--el-light);
}

#modal-personnalise-content-personnal-traning-area ul li a {
    color: var(--el-light);
    font-size: 12px !important;
}

#modal-personnalise-content-personnal-traning-area .tree {
    overflow-y: auto;
    max-height: 230px;
    overflow-x: hidden;
}
.gl-detail{
    padding: 15px 30px;
    background: var(--el-bg-nav);
}
.gl-detail ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.gl-detail ul li span{
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 8px;
}
.gl-detail ul li + li{
    border-top: 1px solid var(--el-bg-card-c);
}
.client{
    background-color: var(--el-bg-thead-table);
}
.prototype{
    background-color: var(--el-bg-thead-table);
}
.terms{
    background: var(--el-blue);
}
.company{
    background: var(--el-green);
}
.generics{
    background: var(--el-pink);
}
.gl-commande{
    padding: 30px;
    background: var(--el-bg-card-d);
}
.gl-commande h2{
    margin: 0;
    margin-bottom: 15px;
}
.el-switch{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}

.switch {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.switch input {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 0;
    height: 0;
}
.switch input + span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #313D6E;
    border: 1px solid #707070;
    border-radius: 20px;
    width: 40px;
    height: 20px;
}
.switch input + span:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 4px;
    width: 14px;
    height: 14px;
    background: #ED254E;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all .3s;
}

.switch input:checked + span:before {
    left: 20px;
    background: #18BD5A;
}
.checkbox-label{
    margin-left: 50px;
    font-size: 14px;
    font-weight: 400;
}
.gl-quantity{
    min-width: 50px;
    height: 40px;
    border-radius: 4px;
    background-color: var(--el-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
}
.btn-group-position-left {
    justify-content: left;
}

/*HOME*/
.btn-home-right {
    padding-right: 8px;
}
.btn-home-left {
    padding-left: 8px;
}

.navigation-el h3{
    margin: 0;
}



/*notification*/

.notif-container{
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 15px;
    background: #162256;
    border-radius: 16px;
}
.notif-icon{
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background-color: #202C61;
    font-size: 24px;
    color: var(--el-light);
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.notif-num{
    display: block;
    position: absolute;
    font-size: 14px;
    font-weight: 400;
    min-width: 20px;
    height: 20px;
    text-align: center;
    padding: 2px 5px;
    background-color: var(--el-green);
    border-radius: 10px;
    left: 60%;
    bottom: 60%;
}
.notif-content{
    width: calc(100% - 40px);
    padding-left: 40px;
    padding-right: 60px;
}
.notif-content .slick-dots{
    display: none!important;
}
.notif-content .slick-dotted.slick-slider{
    margin-bottom: 0;
}
.notif-content .slick-prev{
    left: -45px;
    background-color: #4D81FE;
}
.notif-content .slick-next{
    right: -30px;
    background-color: #4D81FE;
}
.notif-item{
    background: #202C61;
    padding: 15px 20px;
    margin-right: 15px;
    border-left: 3px solid;
}
.notif-booster{
    border-color: #4D81FE;
}
.notif-library{
    border-color: #ED254E
}
.notif-training{
    border-color: #F6AE2D;
}

/*.inc-btn{
    background-color: #202C61;
    color: #ECF1F1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    border-radius: 20px;
    overflow: hidden;
}
.inc-btn:hover{
    background-color: #D81F44;
}
.inc-btn span{
    display: none;
}
.inc-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 5px solid #D81F44;
    background-color: #ECF1F1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inc-icon::before{
    content: '';
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath fill='%23D81F44' d='M15,3.3c0.74,0,1.43,0.39,1.8,1.03l11.29,19.23c0.38,0.65,0.38,1.45,0.01,2.1c-0.37,0.65-1.07,1.05-1.81,1.05 H3.71c-0.75,0-1.44-0.4-1.81-1.05c-0.37-0.65-0.37-1.45,0.01-2.1L13.2,4.33C13.57,3.69,14.26,3.3,15,3.3z M15,9.98 c-0.69,0-1.25,0.56-1.25,1.25v5.85c0,0.69,0.56,1.25,1.25,1.25c0.69,0,1.25-0.56,1.25-1.25v-5.85C16.25,10.54,15.69,9.98,15,9.98z M16.67,21.69c0-0.92-0.75-1.67-1.67-1.67s-1.67,0.75-1.67,1.67s0.75,1.67,1.67,1.67S16.67,22.61,16.67,21.69z'/%3e%3c/svg%3e");
}

@media (min-width: 992px) {    
    .inc-btn span{
        display: block;
        padding-right: 10px;
    }
}*/
.notif-container div.notif-item {
    cursor: pointer;
}
a#el-btn-custom-content {
    font-size: 12px !important;
}
.tree li {
    color: inherit !important;
}
form.session-form .tree ul li:last-child:before{
    background: inherit;
}

form.session-form .tree ul li:before {
    border-top: 0px solid;
}

form.session-form .tree li {
    padding: 0 3em;
    font-size: 13px;
}
form.session-form .tree span a {
    padding: 0 8px;
}

.card-style-6 .card form.session-form a i.bx.bx-trash-alt  {
    color: var(--el-pink);
    font-size: 18px;
}
.card-style-6 .card form.session-form a i.bx.bx-plus {
    color: var(--el-light);
    font-size: 18px;
}

.card-style-6 .card form.session-form label.switch {
    display: inline;
}
#el-container-btn-action-customs a i {
    font-size: 30px !important;
    line-height: 16px;
}
.modal-action-maj-content button{
    text-transform: none !important;
}

.border-bootton-style-el {
    border-top: 1px solid var(--el-light);
    padding-top: 15px !important;
}
a.btn-dropdown.btn-remove-content-module {
    right: 63px;
    color: var(--el-orange);
    /*background: var(--el-light) !important;*/
    background: none !important;
}
a.btn-dropdown.btn-edit-content-module {
    right: 37px;
    color: var(--el-light);
    background: none !important;
}
div#form-el-library {
    background-color: inherit;
    box-shadow: inherit;
    padding: 0px;
}
div.content-flex{
    display: flex;
}


.el-sidebar {
    width: 350px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -355px;
    z-index: 1020;
    background: #162256;
    color: #fff;
    transition: all .3s;
    box-shadow: 3px 3px 3px rgba(15, 10, 37, 0.5);
    text-align: left;
    padding: 15px;
    overflow: auto;
}
 
.el-sidebar.active {
    left: 0;
}
.el-sidebar h3{
    font-size: 18px;
}
.el-pta{
    position: fixed;
    bottom: 15px;
    left: 0;
    z-index: 1010;
    box-shadow: 3px 3px 3px rgba(51, 51, 51, 0.2);
}
.el-open-menu {    
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-light);
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background: var(--el-orange);
    font-size: 20px;
    transition: background-color .4s cubic-bezier(0.5, 0, 0.6, 1);
}
.el-open-menu:hover{
    background-color: var(--el-bg-grey-dark);
}

.pta-bull{
    position: absolute;
    display: flex;
    align-items: center;
    padding-left: 15px;
    height: 40px;
    min-width: 150px;
    padding-left: 30px;
    top: 0;
    left: 20px;
    color: var(--el-light);
    z-index: -1;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    opacity: 0;
    transition: opacity .3s ease;
    display: none;
}
.el-open-menu:hover + span{
    opacity: 1;
    display: flex;
}
@media (min-width: 1280px) {
    .el-sidebar{
        width: 400px;
        left: -405px;
    }
    .el-pta{
        left: 30px;
        bottom: 50px;
    }
    .el-open-menu{
        border-radius: 50%;
    }
}

.el-dismiss {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: all .3s;
    background: var(--el-pink);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 20px;
}
 
.el-dismiss:hover,
.el-dismiss:focus {
    background: var(--el-pink);
    color: #fff;
}



.personnal-training-area-sidebar{
    padding-left: 50px;
    padding-right: 50px;
}
.personnal-training-area-sidebar .slick-prev {
    left: 0;
    background: var(--el-bg-thead-table);
}
.personnal-training-area-sidebar .slick-next {
    right: 0;
    background: var(--el-bg-thead-table);
}

.personnal-training-area-sidebar .nav{
    border: none;
}
.pta-card{
    margin-top: 10px;
}

.pta-tab-item{
    min-height: 40px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    color: var(--el-light);
    background: var(--el-border);
}
.pta-tab-item > span{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 5px 15px;
    font-size: 14px;
}

.pta-tab-item.active{
    background-color: var(--el-orange);
}

.pta-nav{
    display: flex;
    align-items: center;
}
.pta-btn{
    flex: 1;
    text-align: left;
    color: var(--el-light);
    border: none;
    padding-right: 60px;
}

.pta-btn:not(.collapsed){
    padding-right: 10px;
}

button.pta-save{
    display: none;
    color: var(--el-light);
    border: none;
    width: 50px;
    height: 30px;
    border-radius: 16px;
    background: var(--el-green);
    font-size: 20px;
}
.pta-btn:not(.collapsed) + button.pta-save{
    display: block;
}

/*deactive style in bootstrap rtl*/
/*section.page-stage .card {
    flex-direction: row;
}*/
#sidbar-rtl .card {
    background-color: var(--el-bg-card-c);
}

div.container-read-data-library iframe#container-content-library {
    width: -webkit-fill-available;
    max-width: 100%;
    min-height: 400px;
    height: 100%;
    background-color: snow;
    z-index: 10;
}

div.container-read-data-library .embed-responsive.embed-responsive-16by9,
div.container-read-data-library .card-container{
    width: inherit;
}
.container-read-data-library .card {
    background-color: inherit;
}

.inc-btn{
    background-color: #4D81FE;
    color: #ECF1F1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    border-radius: 20px;
    padding: 5px 10px;
    overflow: hidden;
}
.inc-btn:hover{
    background-color: #376ce6;
}
/*.inc-btn span{
    display: none;
}*/
.inc-icon{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.side-bar-shortcuts button img{
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 574px){
    .incident-technic-login span {
        display: block;
    }
    .incident-technic-login a {
        margin: 0 auto;
        text-align: center;
    }
}
a.inc-btn.btn-shortcuts-el.btn-logout {
    color: var(--el-light);
    background-color: var(--el-pink);
}
.trainee-dashbord-incident-technic {
    gap: 3px;
}

@media (min-width: 300px) {    
    
    /*.trainee-dashbord-incident-technic span {
        display: none;
    }*/
}

@media (min-width: 992px) {    
    .inc-btn span{
        display: block;
    }
}
li.el-nav-item.navigation-professor a {
    margin-top: 5px;
}

/*booster*/
.audio-statistics .el-table tr, .audio-statistics .el-table td {
    border: 2px solid #0f1d58;
}
.bs-bg-blue{
    background-color: var(--el-blue)!important;
}
.bs-bg-orange{
    background-color: var(--el-orange)!important;
}
.bs-bg-pink{
    background-color: var(--el-pink)!important;
}
.bs-bg-green{
    background-color: var(--el-green)!important;
}

.main-audio-meta{
    padding-top: 20px;
    flex-direction: column;
    gap: 25px;
}
.audio-ttl{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}
.audio-ttl h4{
    margin: 0;
}
.transcription .el-textarea,
.translate .el-textarea {
    min-height: 260px;
}

.bs-stat-container{
    display: flex;
    gap: 10px;
    width: 100%;
}
.bs-stat{
    flex: 1;
    border-radius: 8px;
    text-align: center;
    padding: 5px 10px;
    background-color: #202c61;
}
.bs-stat span{
    display: block;
}
h4{
    font-size: 13px;
    margin-top: 1.3em;
    margin-bottom: 1.3em;
}
.p-boosters{
    margin-bottom: 0!important;
}


.bs-menu{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    margin-bottom: 20px;
}
.bs-menu-item{
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--el-light);
    background: var(--el-bg-card-c);
    padding: 5px 10px;
    border-radius: 16px;
    text-decoration: none;
}
.bs-video:hover,
.bs-video.active{
    background: var(--el-blue);
}
.bs-expression:hover,
.bs-expression.active{
    background: var(--el-blue);
}
.bs-img:hover,
.bs-img.active{
    background: var(--el-blue);
}
.bs-audio:hover,
.bs-audio.active{
    background: var(--el-blue);
}
.bs-menu-item i{
    font-size: 14px;
}
.bs-list-container{
    margin-bottom: 15px;
}
.bs-btn-list{
    background: var(--el-bg-card-c);
    padding: 5px 10px;
    border-radius: 15px;
    color: var(--el-light);
    text-transform: lowercase;
}
.bs-btn-list span{
    display: inline-block;
}
.bs-btn-list span::first-letter{
    text-transform: uppercase;
}
.bs-btn-list i{
    transition: transform .4s ease;
}

.bs-btn-list:not(.collapsed){
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.bs-btn-list{
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}
.bs-btn-list.collapsed i{
    transform: rotateZ(180deg);
    transition: transform .4s ease;
}

.bs-list{
    background: #090E23;
    padding: 15px;
    border-radius: 16px;
    border-top-left-radius: 0;
    min-height: 250px;
}

.bs-nav,
.bs-nav a{
    display: flex;
}

.bs-nav{
    gap: 20px;
}

.bs-nav i{
    font-size: 18px;
}
.bs-nav a{
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--el-light);
    padding: 10px 0;
    position: relative;
}

.bs-nav a::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    background: transparent;
    top: 100%;
    left: 0;
}

.bs-nav a.active{
    color: var(--el-blue-c);
}
.bs-nav a.active::after{
    background: var(--el-blue);
}


.bs-nav a:hover{
    color: var(--el-light);
}
.bs-nav a.active i,
.bs-nav a:hover i{
    color: var(--el-blue);
}




.bs-list-item{
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.bs-list-item li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.bs-list-item li + li{
    border-top: 1px solid var(--el-bg-thead-table);
}

.bs-list-item li:hover,
.bs-list-item .active{
    background-color: var(--el-dark);
}

.bs-list-item a{
    display: flex;
    gap: 10px;
    padding: 10px;
    align-items: center;
    text-decoration: none;
    color: var(--el-light);
    flex: 1;
    padding-right: 90px;
}
.bs-video-icon a i{
    font-size: 16px;
    color: var(--el-pink);
}
.bs-audio-icon a i{
    font-size: 16px;
    color: var(--el-green);
}



.bs-action{
    display: flex;
    gap: 10px;
    position: absolute;
    top: 9px;
    right: 10px;
}
.bs-edit,
.bs-delete{
    background: var(--el-bg-card-c);
    border: none;
    border-radius: 13px;
    padding: 5px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-light);
}


.bs-delete{
    background-color: var(--el-pink);
}

@media (min-width: 576px) {
    .bs-menu {
        gap: 10px;
    }
    .bs-menu-item {
        gap: 10px;
    }
}

/*analyse lexicale*/

.el-analyse-lexicale{
    position: fixed;
    background-color: var(--el-blue-dark);
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: 10000;
    padding-bottom: 30px;
}
.analyse-content .plot-container{
    display: flex;
    justify-content: center;
}
#analyse-lexicale.modal{
    z-index: -1;
}
#analyse-lexicale.open{
    z-index: 10000;
}
#analyse-lexicale .modal-close{
    position: absolute;
    right: 10px;
    top: 10px;
}
#analyse-lexicale .el-table{
    width: 100%;
    min-width: 100%;
}

.analyse-header{
    background: var(--el-bg-grey-dark);
    padding-top: 15px;
    padding-bottom: 15px;
}
.analyse-title{
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    margin: 0;
    padding-right: 40px;
}
.analyse-title i{
    font-size: 30px;
    color: var(--el-green);
}

.audio-choice{
    display: flex;
}
.audio-choice span{
    border: 1px solid var(--el-border);    
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1.2;
}
.audio-choice select{
    width: inherit;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.analyse-content{
    padding-top: 30px;
}
.el-plot-layout{
    background: var(--el-bg-card-c);
    border-radius: 16px;
    overflow: hidden;
}


.text-list{
    border-radius: 16px;
    background: var(--el-bg-card-c);
    overflow: hidden;
}
.text-list-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 7px 15px;
    background: var(--el-bg-card-c);
}
.list-number{
    background: var(--el-pink);
    padding: 3px 15px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 15px;
}
.text-content{
    padding: 15px;
    padding-top: 0;
}


@media (min-width: 768px) {
    #analyse-lexicale .modal-close{
        right: 30px;
        top: 20px;
    }
    .audio-choice{
        justify-content: end;
    }
}

.bs-list-content{
    background: var(--el-bg-grey-dark);
    padding: 15px;
}
.bs-nav-list-analysis{
    border-bottom: 1px solid var(--el-bg-card-c);
}
.bs-nav-list-analysis > a{
    text-decoration: none;
    color: var(--el-light);
    padding: 10px 15px;
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    flex: 1;
    text-align: center;
}
.bs-nav-list-analysis > a.active{
    background: var(--el-bg-grey-dark);
}
.gramatical-nav{
    padding-left: 50px;
    padding-right: 50px;    
}
.gramatical-nav,
.gramatical-nav .nav,
.syntactic-nav{
    border: none;
}
.gramatical-nav .slick-next {
    right: 0;
    background: var(--el-bg-thead-table);
}
.gramatical-nav .slick-prev {
    left: 0;
    background: var(--el-bg-thead-table);
}
.lx-nav{
    display: inline-block;
}
.lx-nav,
.gr-nav,
.st-nav{
    text-decoration: none;
    color: var(--el-light);
    padding: 5px 15px;
    border-radius: 16px;
}
.lx-nav.active,
.gr-nav.active,
.st-nav.active{
    background-color: var(--el-pink);
}

@media (min-width: 768px) {
    .bs-nav-list-analysis > a{
        flex: inherit;
    }
}
@media (min-width: 768px) {
    .gramatical-nav{
        padding-left: 0;
        padding-right: 0;
    }
}
.container-media.active {
    display: inline-flex;
}
.container-media {
    display: none;
}
div.stat-modal-expression .tablinks {
    background-color: inherit;
    border: 0px;
    border-radius: 15px;
    padding: 8px;
    color: var(--el-light);
}
div.stat-modal-expression .tablinks:hover,div.stat-modal-expression .tablinks.active,
div.stat-modal-expression .tablinks:focus {
    background-color: var(--el-orange);
    border-radius: 15px;
    padding: 8px;
    /* width: 100%; */
}
/*analyse lexicale*/
/*end booster*/

.btn-action-speak {
    line-height: 1px;
}
.nav-boosters a {
    z-index: 950;
}

/*images*/

.images-container{
    background: var(--el-bg-nav);
    padding: 15px;
    border-radius: 16px;
}
.images-container h2{
    font-size: 22px!important;
}
.bs-img-container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background: var(--el-bg-grey-dark);
}
.bs-images{
    background: var(--el-dark);
    text-align: center;
    height: 450px;
    overflow: hidden;
}
.bs-images img{
    height: 100%;
}
.bs-images,
.bs-images-transcription{
    flex: 1;
}
.bs-images-transcription{
    padding-left: 15px;
    padding-right: 15px;
}
.bs-images img{
    width: 100%;
    /*height: auto;*/
}
.img-transcription-header{
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: space-between;
}
.img-transcription-txt{
    padding-bottom: 10px;
}
.img-transcription-txt .el-textarea{
    height: 250px;
}

.splide--nav>.splide__track>.splide__list>.splide__slide.is-active {
    border: 3px solid var(--el-blue);
}

@media (min-width: 768px) {
    .bs-img-container{
        flex-direction: row;
    }
    .img-transcription-txt .el-textarea{
        height: 385px;
    }
}

a.btn-forgot-password.el-btn {
    padding: 0px 0px 0px 5px;
    text-transform: none;
    color: var(--el-pink);
    text-align: left;
}

label.label-remember.el-checkbox,
#container_tab_planning_form_cours_history label.el-checkbox{
    cursor: pointer;
    color: var(--el-blue);
}
a.el-btn.go-back-login {
    color: var(--el-dark);
    font-weight: 900;
    text-transform: initial;
}
.login .alert {
    color: var(--el-pink);
    text-align: justify;
    font-weight: 500;
}

.video-container audio.main-audio {
    height: 300px;
}
button.btn-save-data{
    color: var(--el-green) !important;
}
.btn-action-media-content{
    display: inline-flex;
}
.modal-action.controls-inner.control-record-audio button {
    padding: 10px 15px;
}
.modal-action.controls-inner.control-record-audio {
    gap: 5px;
}

.bs-nav-header,
.bs-nav-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.el-btn-icon.bs-menu-item{
    text-transform: none;
    min-height: 30px;
}
.audio-container{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}
.main-audio{
    margin-bottom: 0;
}
.media-meta{
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
}
.media-meta h3{
    font-size: 24px;
    margin: 0;
}
.media-audio{
    background: #060A20;
    display: flex;
    align-items: center;
    border-radius: 16px;
    flex: 1;
}
.main-video-meta h4{
    margin: 0;
}

.lexical-analysis{
    gap: 40px;
}
.lexical-analysis .el-btn{
    width: 40%;
    margin: 0 auto;
}
.bs-stat{
    background: #186189;
    cursor: pointer;
}
.audio-statistics{
    gap: 10px;
}
.reworked-container .translate-header{
    padding-left: 0;
    gap: 5px;
}
.media-tab-item{
    color: var(--el-light);
    text-decoration: none;
    padding: 15px 15px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.media-tab-item.active{
    background-color: var(--el-bg-card-d);
}


/*compariason*/

.al-title{
    font-size: 24px;
    margin: 0;    
    margin-bottom: 15px;
}

.al-container{
    background: var(--el-bg-nav);
    padding: 15px;
    border-radius: 16px;
}

.al-table{
    width: 100%;
}
.al-table th{
    width: 25%;
    padding-left: 15px;
}
.al-table td{
    width: 37.5%;
}
.al-table th,
.al-table td{
    border: 1px solid #344172;    
}
.al-stat th,
.al-stat td{
    padding: 10px 15px;
}
.al-stat td{
    text-align: center;
}
.al-select{
    width: 100%;
    background: var(--el-bg-grey-dark);
    color: var(--el-light);
    border: none;
    padding: 10px;
}
.al-btn{
    background: var(--el-bg-card-c);
    color: var(--el-light);
    border: none;
    width: 100%;
    text-align: left;
    padding: 10px 15px;
}
.al-btn[aria-expanded="true"]{
    background-color: var(--el-orange);
}
.al-comment{
    height: 100%;
    overflow-y: auto;
}
.comment-header h4{
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 20px;
}
.comment-txt{
    overflow-y: auto;
    height: auto;
    /*border: 1px solid var(--el-border);
    padding: 15px;*/
}

/*comparaison suite*/
.al-transcription{
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}
.al-btn-wrap{
    flex: 0 0 25%;
}
.btn-transcription{
    width: 100%;
    max-width: 130px;
    color: var(--el-light);
    text-transform: initial;
    line-height: 1.4;
    padding: 5px 10px;
}
.btn-transcription[aria-expanded="true"] .btn-show{
    display: none;
}
.btn-transcription[aria-expanded="false"] .btn-hide{
    display: none;
}
.btn-transcription[aria-expanded="true"]{
    background-color: var(--el-pink)!important;
}
.btn-transcription[aria-expanded="false"]{
    background: var(--el-bg-card-c);
}


.transcription-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    gap: 10px;
}
.transcription-left,
.transcription-right{
    flex: 1;
}

.transcription-title{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    background: var(--el-bg-card-c);
}
.transcription-title h6{
    margin: 10px 0;
    font-size: 13px;
}
.transcription-title button{
    background: var(--el-pink);
    color: var(--el-light);
    border: none;
    height: 35px;
    flex: 0 0 35px;
    font-size: 20px;
}

@media (min-width: 768px) {
    .al-table th{
        width: 25%;
    }
    .al-table td{
        width: 37.5%;
    }
    .al-transcription{
        flex-direction: row;
    }
    .transcription-content{
        flex-direction: row;
        gap: 0;
        padding-top: 0;
    }
}
.row.justify-content-between.modal-action.controls-inner.control-record-audio.action-form-save-record {
    gap: 0px;
}
textarea.el-textarea.comment-audio {
    min-height: 273px;
}

.el-pta .shortcuts li ~ li {
    margin-top: 10px;
}
.el-pta .shortcuts li > a {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-light);
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    cursor: pointer;
    transition: background-color .4s cubic-bezier(0.5, 0, 0.6, 1);
    position: relative;
    overflow: hidden;
}

.el-pta .shortcuts li > a:hover{
    background-color: var(--el-bg-grey-dark);
}
.el-pta .shortcuts li > a:hover + .btn-bulle{
    opacity: 1;
    display: flex;
}

.el-pta .btn-bulle{
    left: 20px;
    padding-right: 15px;
    padding-left: 30px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.el-pta .shortcuts li > a.btn-shortcuts-el,
.el-pta .shortcuts li > a{
    font-size: 22px;
}

@media (min-width: 1280px) {
    .el-pta .shortcuts li > a {
        border-radius: 50%;
    }
}

.expression-recording{
    background: var(--el-bg-card-c);
    /*width: 321px;*/
    width: 300px;
    position: fixed;
    left: 80px;
    bottom: 50px;
    /*padding: 15px;*/
    padding: 0px 10px 10px 10px;
    border-radius: 16px;
    z-index: 9999;
}

.expression-recording .controls-inner{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.expression-recording .controls-inner > *{
    flex: 1;
}

.expression-recording .controls-inner select{
    flex: 0 0 35%;
}
.expression-recording .controls-inner select ~ button{
    margin-top: 0;
}
.bs-audio-player audio{
    width: 100%;
    filter: invert(100%);
}

.ck.ck-editor__main {
    color: black;
    max-height: 210px;
    min-height: 210px;
    overflow-y: auto;
}
.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
    min-height: 200px;
}

/*Recording audio*/
.recording-container{
    min-height: 400px;
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}
.recording-inner{
    width: 100%;
}
.ep-record{    
    margin-left: auto;
    margin-right: auto;
    width: 75px;
    position: relative;
    margin-bottom: 50px;
}
.btn-recording{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    position: relative;
    background: var(--el-green);
    color: var(--el-light);
}


.wave{
    position: absolute;
    top: -40px;
    left: -40px;
    background: none;
    border: 1px solid var(--el-light);
    z-index: 100000;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    opacity: 0;
    display: none;
}
.wave-1{
    animation: recording-wave 3s ease-in infinite;
}
.wave-2{
    animation: recording-wave 3s 1.5s ease-in infinite;
}

.btn-recording:disabled ~ .wave{
    display: block;
}


.btn-recording:disabled{
    background: var(--el-pink);
    color: var(--el-light);
}

@keyframes recording-wave {
    0%{
        opacity: 0;
    }
    100% { 
        transform: scale(.5);
        opacity: 1;
    }
}


.recording-time-container{
    margin-bottom: 20px;
}
.recording-time{
    font-size: 30px;
    font-weight: 300;
}

.controls-recording{
    display: flex;
    justify-content: center;
    gap: 15px;
}


.choice-lang{
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choice-lang input[type="radio"]{
    display: none;
}
.choice-lang input[type="radio"] + label{
    background: var(--el-bg-grey-dark);
    /*min-width: 100px;
    max-width: 100px;*/
    width: 100px;
    padding: 5px 10px;
    margin: 0 auto;
    border-radius: 16px;
    cursor: pointer;
}

.choice-lang input[type="radio"]:checked + label{
    background: var(--el-orange);
}

.audio-expression-record {
    min-width: 100px;
    padding: 5px 10px;
    margin: 0 auto;
    border-radius: 16px;
    text-align: center;
}

.expression-recording-form .btn-action-speak i{
    font-size: 19px;
}

.audio-expression-record i{
    color: var(--el-green);
}

.expression-recording-form .form-action {
    gap: 0px;
}


.expression-recording-form a.btn-action-speak {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.expression-recording-form .form-action input {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px;
}

a.btn-seak-text-expression-recording:hover, a.btn-seak-text-expression-recording:focus {
    color: var(--el-light);
    background-color: var(--el-orange);
    border-color: var(--el-orange);
}

.audio-expression-record a.bs-menu-item.bs-video.active {
    height: 35px;
    width: 35px;
    border-radius: 50px;
    color: #fff;
    background: var(--el-green);
}
.audio-expression-record i {
    color: var(--el-ligh);
    font-size: 35px;
    margin-left: -10px;
}
.audio-expression-record span.label-expression {
    margin-top: 10px;
}
a.btn.el-btn-lexical.btn-circle.btn-action-speak.btn-no-border {
    border-radius: 20px !important;
}
.audio-expression-record.expression-container .form-action{
    padding-top: 0px;
}

.audio-expression-record.expression-container .form-action .el-ttl{
    line-height: 30px!important;
}

.container-specific.active {
    position: unset;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 10;
    display: block;
}

.container-specific {
    display: none;
    position: absolute;
    top: 0;
    /* left: 0; */
    /* opacity: 0; */
    visibility: collapse;
    z-index: 9;
    /* display: contents; */
    width: initial;
    opacity: 0;
}

.expression-recording-container-txt #content-origin {
    min-height: 70px;
}

.container-expression-recording .form-action {
    justify-content: flex-start;
}
span.time-interval-expression-recording-db {
    font-size: 20px;
    display: none;
}

.recording-block{
    background: #060A20;
    border-radius: 16px;
    padding: 15px;
}
.choice-lang{
    flex-direction: row!important;
    justify-content: center!important;
    margin-bottom: 15px;
}
.choice-lang input[type="radio"] + label{
    margin: 0;
}

.ep-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}


.ep-record{
    margin: 0;
    width: fit-content;
}

.btn-recording,
.ep-btn{
    width: 46px;
    height: 46px;
    font-size: 24px;
}
.ep-btn{
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-light);
    background: var(--el-bg-card-c);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.recording-time{
    font-size: 16px;
}
.recording-time-container{
    margin-bottom: 0;
}
.wave{
    width: 76px;
    height: 76px;
    top: -15px;
    left: -15px;
    z-index: 0;
}
.wave-1{
    animation: recording-wave 3s ease-in-out infinite;
}
.wave-2{
    animation: recording-wave 3s 1.5s ease-in-out infinite;
}
.ep-play-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
}
.ep-btn-play{
    background: var(--el-green);
}

.ep-audio-title{
    text-align: left;
}



.ep-input-wrap{

}
.ep-input-title{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    margin-bottom: 10px;
}
.ep-input-title h6{
    font-weight: 300;
    font-size: 13px;
    margin-bottom: 0;
    margin-top: 0;
}
.ep-flag{
    display: flex;
    align-items: center;
    gap: 10px;
}
.flag{
    position: relative;
    width: 28px;
    height: 17px;
    background: #18BD5A;
}
.flag::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.flag-en::before{
    background: url(../../flag/Flag-en.png);
}
.flag-fr::before{
    background: url(../../flag/Flag-fr.png);
}
.lang-en::before{
    content: 'EN';
}
.lang-fr::before{
    content: 'FR';
}

.flag-ru::before{
    background: url(../../flag/Flag-ru.png);
}
.lang-ru::before{
    content: 'RU';
}

.flag-es::before{
    background: url(../../flag/Flag-es.png);
}
.lang-es::before{
    content: 'ES';
}

.flag-ar::before{
    background: url(../../flag/Flag-ar.png);
}
.lang-ar::before{
    content: 'AR';
}

.flag-zh::before{
    background: url(../../flag/Flag-zh.png);
}
.lang-zh::before{
    content: 'ZH';
}

.lang-it::before{
    content: 'IT';
}

.flag-it::before{
    background: url(../../flag/Flag-it.png);
}

.lang-de::before{
    content: 'DE';
}

.flag-de::before{
    background: url(../../flag/Flag-de.png);
}

.ep-input{
    position: relative;
}
.ep-input textarea{
    border-top-right-radius: 0;
}
.el-text-to-speech{
    display: block;
    width: 40px;
    height: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background-color: var(--el-blue-dark);
    color: var(--el-orange);
    text-decoration: none;
    position: absolute;
    bottom: 100%;
    right: 0;
}
.el-text-to-speech:hover{
    color: var(--el-light);
    background-color: var(--el-orange);
}

#expression-recording-source {
    text-decoration: none;
    cursor: pointer;
}

a.btn-recording[disabled=disabled] {
    cursor: not-allowed;
    pointer-events: none;
    background: var(--el-pink);
    color: var(--el-light);
}

a.btn-recording {
    cursor: pointer;
    text-decoration: none;
}

.d-block{
    display: block;
}


#modal-save-expression-recording.modal:not(.open){
    display: none!important;
    visibility: visible!important;
}
#modal-save-expression-recording.modal.open{
    visibility: visible!important;
}

#modal-save-expression-recording.modal.open .modal-content{
    transform: none!important;
}

@media (min-width: 576px) {
    #modal-save-expression-recording.modal .modal-content {
        width: 100%
    }
}


.ep-category-wrap{
    background-color: var(--el-blue-dark);
    border-radius: 8px;
    margin-bottom: 15px;
    min-height: 200px;
}
.ep-category-header{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative;
}
.ep-new-category{
    background: var(--el-blue);
    color: var(--el-light);
    border: none;
    border-radius: 8px;
    padding: 5px 10px;
}

.ep-category-content{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: start;
}

.ep-category-content input[type="radio"]{
    display: none;
}
.ep-category-content input[type="radio"] + label{
    background: none;
    border: 1px solid var(--el-bg-card-c);
    min-width: 100px;
    padding: 5px 10px;
    border-radius: 16px;
    cursor: pointer;
    height: 40px;
    text-align: center;
    flex: 1 0 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 15px;
    max-width: max-content;
}

.ep-category-content input[type="radio"]:checked + label{
    background: var(--el-orange);
}

.ep-form{
    position: absolute;
    top: calc(100% + 15px);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: var(--el-bg-card-c);
    border-radius: 16px;
    width: 100%;
}
.ep-add-category,
.ep-close-form{
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50px;
    border: none;
    font-size: 24px;
    line-height: 40px;
    color: var(--el-light);
}

.ep-add-category{
    background: var(--el-green);
}
.ep-close-form{
    background: var(--el-pink);
}




.expression-recording{
    left: 40px;
    bottom: 15px;
}
.el-pta .shortcuts li > a{
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
@media (min-width: 992px) {
    .ep-form{
        width: fit-content;
        left: 30%;
    }
    .expression-recording{
        left: 60px;
        bottom: 40px;
    }
}
@media (min-width: 1200px) {
    .expression-recording{
        left: 80px;
        bottom: 50px;
    }
    .el-pta .shortcuts li > a{
        border-radius: 50%;
    }
}

.margin-auto{
    margin: 0 auto;
}

.el-btn-stop {
    color: var(--el-pink);
}

/*.slide-other-article-nl {
    z-index: 1 !important;
}*/
.page-library .tab-nav-item-secondary:hover, .page-library .tab-nav-item-secondary.active {
    background: var(--el-pink) !important;
}
.page-library .tab-nav-newsletter .button-container .button-inner > button.active {
    background: var(--el-pink) !important;

}
@media (min-width:1400px){
    .page-el .container{
        max-width: 1320px;
    }
    section.content.page-white-paper iframe.embed-responsive-item{
        min-height: calc(100vh - 200px);
    }
}

@media (min-width:1700px){
    .page-el .container{
        max-width: 1560px;
    }
    section.content.page-white-paper iframe.embed-responsive-item{
        min-height: calc(100vh - 300px);
    }
    .tab-content-container{
        min-height: 600px;
    }
}

@media (min-width:2400px){
    .page-el .container{
        max-width: 2200px;
    }
}

div#modal_new_expression form#form-expression-recording {
    width: 100%;
}

a.content-el-to-text-to-speach i {
    color: var(--el-pink);
    margin-right: 0px;
    font-size: 16px;
    margin-top: 0px;
}

#text-to-speech-article .text-to-speech-control {
    width: 100%;
}

.initial-name {
    font-size: 18px;
}

#portefeuille .profile-text,
.profile-text.init-name-dashobord {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background-color: var(--el-light);
    color: var(--el-pink);
    text-align: center;
    padding: 8px;
    font-size: 19px;
    font-weight: 900;
}

a.btn-switch-version i {
    background: var(--bs-gray-900);
    font-size: 28px;
    border-radius: 50px;
    margin-left: -8px;
}
a.btn-switch-version {
    background: var(--bs-danger);
    color: var(--el-light);
}

li.switch-link a, li.switch-link {
    width: auto !important;
    height: auto;
    border-radius: 30px !important;
    background: var(--bs-red) !important;
}

header.header-to-trainee a.btn-switch-version {
    padding: 10px;
}

.page-library .prototype-content{
    background: var(--el-pink);
}

.home-container .home-container-btn button.btn-profile,
.home-home-header .home-container-btn button.btn-profile {
    padding: 0;
    overflow: hidden;
    position: relative;
}

.home-container .home-container-btn button.btn-profile,
.home-header .home-container-btn button.btn-profile {
    background-color: var(--el-pink);
}

.home-container .home-container-btn button.btn-profile, 
.home-container .home-container-btn .profile-dropdown.open span.initial-name,
.home-header .home-container-btn button.btn-profile, 
.home-header .home-container-btn .profile-dropdown.open span.initial-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--el-pink);
    color: var(--el-light);
    cursor: pointer;
}


.home-container .home-container-btn .profile-dropdown,
.home-header .home-container-btn .profile-dropdown  {
    background-color: var(--el-bg-card-d);
    border-radius: 4px;
    border: 1px solid var(--el-border);
    position: absolute;
    top: 100px;
    /*right: 130px;*/
    transform: translateY(15px);
    transition: all .3s ease;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    z-index: 10;
}
.home-header .home-container-btn .profile-dropdown{
    top: 57px !important;
    z-index: 9999;
}

.home-container .home-container-btn .profile-dropdown,
.home-header .home-container-btn .profile-dropdown{
    padding: 15px;
}
.home-container .home-container-btn .profile-dropdown .profile-header,
.home-header .home-container-btn .profile-dropdown .profile-header{
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.home-container .home-container-btn .profile-dropdown .profile-header .profile-img,
.home-header .home-container-btn .profile-dropdown .profile-header .profile-img{
    width: 50px;
    height: 50px;
    overflow: hidden;
    /*border-radius: 50%;*/
}
.home-container .home-container-btn .profile-dropdown .profile-header .profile-img img,
.home-header .home-container-btn .profile-dropdown .profile-header .profile-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-container .home-container-btn .profile-dropdown .profile-header .profile-basline span,
.home-header .home-container-btn .profile-dropdown .profile-header .profile-basline span{
    display: block;
}
.home-container .home-container-btn .profile-dropdown .profile-header .profile-basline span + span,
.home-header .home-container-btn .profile-dropdown .profile-header .profile-basline span + span{
    color: var(--el-blue);
}
.home-container .home-container-btn .profile-dropdown .profile-action,
.home-header .home-container-btn .profile-dropdown .profile-action{
    display: flex;
    flex-direction: column;
    gap: 15px
}
.home-container .home-container-btn .profile-dropdown .profile-action > *,
.home-header .home-container-btn .profile-dropdown .profile-action > *{
    justify-content: start;
    min-width: 150px;
}
.home-container .home-container-btn .profile-dropdown.open,
.home-header .home-container-btn .profile-dropdown.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px)  {
    .home-container .home-container-btn a span,
    .home-header .home-container-btn a span {
        display: none;
    }
    .home-container .home-container-btn a.btn-switch-version i,
    .home-header .home-container-btn a.btn-switch-version i {
        margin-left: -5px;
        background: inherit;
    }
    .home-container .home-container-btn a.btn-switch-version,
    .home-container .home-container-btn a.btn-incident-technic,
    .home-header .home-container-btn a.btn-switch-version,
    .home-header .home-container-btn a.btn-incident-technic{
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 992px)  {
    .home-container .home-container-btn .profile-dropdown{
        top: 164px;
    }
}

@media (max-width: 992px) and (min-width: 768px) {
    .home-container .home-container-btn a span,
    .home-header .home-container-btn a span{
        font-size: 10px;
    }
}


.visibilite-hidden{
    visibility: hidden;
}

.z-index-min-important{
    z-index: 9 !important;
}

.content_unavailable {
    padding-top: 100px;
}

.btn-refresh-from-fr {
    width: 100px;
    height: 30px;
    margin: 0 auto;
    text-transform: inherit;
    border-radius: 24px;
}

.btn-refresh-from-fr i {
    background-color: var(--bs-gray-900);
    border-radius: 50%;
    margin-left: 0px;
    font-size: 24px;
}

.btn-refresh-from-other {
    width: 100px;
    height: 30px;
    margin: 0 auto;
    text-transform: inherit;
    border-radius: 24px;
}

.btn-refresh-from-other i {
    background-color: var(--bs-gray-900);
    border-radius: 50%;
    margin-left: -8px;
    font-size: 26px;
}

.loader-text-to-speach {
    display: flex;
    position: absolute;
    bottom: 100%;
    right: 0;
}

.overflow-inherit {
    overflow: inherit !important;
}
/*.container-nl-lib .tab-wrap .tab-content{
    display: none;
}

.container-nl-lib .tab-wrap .tab-content.active {
    display: block;
}
.container-nl-lib .tab-wrap-secondary .tab-nav-item-secondary{
    min-width: fit-content;
}*/

@media (min-width:1700px){
    .page-course-history .container{
        max-width: 1560px;
    }
    .page-course-history .tab-content-container{
        min-height: 1110px;
    }
    .page-course-history .tab-content-container iframe{
        min-height: 1110px;
    }
}

.burger-refresh{
    background-color: var(--el-light) !important;
}
.burger-refresh i{
    color: var(--el-pink);
    font-size: 28px;
    font-weight: 100;
}

button.burger-dashbord {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--el-bg-nav);
    color: var(--el-light);
    cursor: pointer;
}

.home-container-btn a, 
.home-container-btn button {
    margin: 4px;
}

.btn-disabled-dark {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; 
}

#submitBtnIncident {
    background: var(--el-blue) !important;
    padding: 10px 30px !important;
    border-radius: 16px !important;
    color: var(--el-light) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    border: none !important;
    cursor: pointer !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: 3px 5px var(--el-dark) !important;
    transition: opacity ease .3s !important;
}
#portefeuille a.btn-disconnect {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/*new view from nl*/
.news-list{
    background: var(--el-bg-card-c) !important;
    min-height: 257px;
}

.news-img{
    width: 100%;
    position: relative;
}
.news-img img{
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.news-level{
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    color: var(--el-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
}
.news-level ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 5px;
    color: var(--el-blue-dark);
}
.level-pre-intermediate{   
    background-color: var(--el-green);
}
.level-intermediate{
    background-color: var(--el-orange);
}
.level-advenced{
    background-color: var(--el-pink);
}
.level-pre-intermediate ul li:first-child{
    color: var(--el-light);
}
.level-intermediate ul li:first-child,
.level-intermediate ul li:nth-child(2){
    color: var(--el-light);
}
.level-advenced ul li{
    color: var(--el-light);
}

.news-action{
    right: 8px;
    left: 8px;
    bottom: 15px;
    position: absolute;
    
}
.news-action .card-footer{
    border: none;
    padding: 0;
    gap: 10px;
}
.news-ttl{
    padding: 5px 15px;
    color: var(--el-light);
    cursor: pointer;
}
.news-ttl h4{
    margin: 10px 0;
}
.news-level{
    gap: 15px;
}
.text-upercase{
    text-transform: uppercase;
}
.post-category .news-level{
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}


.news-list.level-pre-intermediate .news-ttl:hover, .news-list.level-pre-intermediate .news-ttl:focus{
    color: var(--el-green);
}

.news-list.level-intermediate .news-ttl:hover, .news-list.level-intermediate .news-ttl:focus{
    color: var(--el-orange);
}

.news-list.level-advenced .news-ttl:hover, .news-list.level-advenced .news-ttl:focus{
    color: var(--el-pink);
}

.news-action{
    bottom: 0;
}

.news-action .btn-explore.explore-article.btn-publish {
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 4px 8px;
    height: 30px;
}

.news-action .card-footer{
    gap: 5px;
}

.news-action .card-footer .add-comment,
.news-action .card-footer .add-favorite,
.news-action .card-footer-trainner .add-course{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 18px;
    background-color: var(--el-bg-card-c);
    max-width: 30px;
    flex-direction: 0 0 30px;
    height: 30px;
}

a.btn-help-dashbord {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--el-bg-nav);
    color: var(--el-orange);
    cursor: pointer;
    text-decoration: none;
    font-size: 20px;
}
.card-footer  a.btn-explore.explore-article {
    margin-left: auto;
    text-decoration: none;
    color: var(--el-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-footer a.btn-explore.explore-article i {
    color: var(--el-orange);
}
.bs-action.bs-action-img {
    left: 10px;
    z-index: 10;
}

.bs-action-img-control {
    background: var(--el-light);
    border: none;
    border-radius: 50%;
    padding: 5px 10px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-pink);
    height: 30px;
    width: 30px;
}

a.btn-tutorial,
a.btn-help-dashbord {
    background-color: var(--el-orange) !important;
    color: var(--el-light) !important;
}

.bs-zoom {
    background-position: 50% 50%;
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
}
.bs-zoom img:hover {
    opacity: 0;
}
.bs-zoom img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
}

.btn-group-border .btn {
    border-radius: 50% !important;
}



.btn-action-add-to-ddbk {
    background-color: var(--el-orange) !important;
    color: var(--el-light) !important;
}

.btn-group-border>a{
    flex: 0 !important;
}

.el-color-pink{
    color: var(--el-pink);
}

.el-radio-group {
    border: solid 1px var(--el-border);
    display: inline-block;
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0;
}
input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
}
input[type=radio]:checked+label {
    color: var(--el-light);
    background: var(--el-green);
}
.el-radio-group label {
    color: var(--el-light);
    display: inline-block;
    cursor: pointer;
    font-weight: 400;
    padding: 5px 12px;
    font-size: 14px;
}
label+input[type=radio]+label {
    border-left: solid 1px var(--el-border);
}

a.el-btn-icon.el-btn-full.el-btn-border.container-expression-databank.modal-btn {
    color: var(--el-light);
}

.el-btn-circle {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    align-items: center;
    display: flex;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.logo-eiffage{
    position: relative;
    bottom: 0;
    background: var(--el-light);
    border-radius: 15px;
    padding: 8px;
    min-height: 38px;
    display: none;
}
.logo-eiffage img{
    min-width: 100px;
    height: auto;
}

.el-brand-container{
    display: flex;
    gap: 10px;
    align-items: center ;
}

.el-brand-wrap > a img{
    min-width: 75px;
    height: auto;
}

@media (min-width: 768px) {
    .logo-eiffage{
        display: block;
    }
}

.logo-eiffage-home{
    background: var(--el-light);
    border-radius: 4px;
    padding: 8px;
    min-height: 38px;
    display: inline-block;
    margin-top: 15px;
}

.logo-eiffage-home img{
    max-width: 100px;
    height: auto;
}


div#audio-container-record audio {
    width: 100%;
    height: 100PX;
    padding: 24px;
}

div#container_tab_planning_form_cours_history .ck.ck-editor__main {
    max-height: 100px;
    min-height: 100px;
}

div#container_tab_planning_form_cours_history .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred {
    min-height: 100px;
}

div#container_tab_planning_form_cours_history .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
    min-height: 100px;
}

div#container_tab_planning_form_cours_history h6 {
    width: 100%;
    line-height: 15px;
    margin-bottom: 30px;
}

div#container_tab_planning_form_cours_history span.checkmark {
    position: inherit !important;
    left: 5px;
}

#container_tab_planning_form_cours_history label.el-checkbox {
    padding-top: 0px !important;
    color: var(--el-light) !important;
}

.label-drop-file-group input[type=file] {
    width: inherit;
    height: 31px;
    max-width: 100%;
    color: var(--el-light);
    padding: 0px;
    background-color: inherit;
    border: 0px;
}

.label-drop-file-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px
    color: var(--el-light);
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
    /*width: 250px;*/
    background: var(--el-blue);
    border: 10px solid var(--el-blue);
    border-radius: 10px;
    height: 39px;
    margin: 0 auto;
}

.label-drop-file-group input[type='file'] {
    position: absolute;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.ep-el-overflow-y {
    overflow-y: auto;
    max-height: 200px;
    overflow-x: clip;
}

.el-inherit-padding{
    padding: inherit;
}

.el-font-30{
    font-size: 30px !important;
}

#modal-confirm-access-dtbk a,
#modal-confirm-access-dtbk button{
    text-transform: initial;
}

form#form-expression-recording {
    width: 100%;
}


/*select option + adding flag*/
/*.ep-flag-select-language {
  position:absolute;
  right:15px;
  bottom:15px;
  display:inline-block;
  width:300px;
  height:35px;
  background:url('http://www.foxrep.com/wp-content/uploads/2017/11/Down-Arrow-PNG.png') no-repeat right 10px center #ffffff;
  background-size:20px auto;
  border:1px solid #000000;
}*/

.ep-flag-select-language {
    --select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23AECCDC' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.9,3.6H1.1c-1,0-1.5,1.2-0.8,1.9l6.9,6.6c0.4,0.4,1.1,0.4,1.6,0l6.9-6.6C16.4,4.8,15.9,3.6,14.9,3.6z'/%3e%3c/svg%3e");
    position: relative;
    /* right: 15px; */
    /* bottom: 15px; */
    display: inline-block;
    width: 115px;
    height: 35px;
    color: var(--el-light);
    background-color: transparent;
    background-image: var(--select-bg-img), var(--select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--el-border);
    border-radius: 8px;
    z-index: 99999;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--el-light);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*.ep-flag-select-language {
    --select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23AECCDC' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14.9,3.6H1.1c-1,0-1.5,1.2-0.8,1.9l6.9,6.6c0.4,0.4,1.1,0.4,1.6,0l6.9-6.6C16.4,4.8,15.9,3.6,14.9,3.6z'/%3e%3c/svg%3e");
    display: block;
    width: 100%;
    padding: 0.50rem 2.25rem 0.50rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--el-light);
    background-color: transparent;
    background-image: var(--select-bg-img), var(--select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--el-border);
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}*/

/*.ep-flag-select-language span {
  display:block;
  line-height:35px;
  padding:0 10px;
  cursor:pointer;
}*/

.ep-flag-select-language span {
    display: flex;
    line-height: 20px;
    padding: 7px 10px;
    cursor: pointer;
    gap: 10px;
}

.ep-flag-select-language ul {
    display: none;
    position: absolute;
    left: -1px;
    right: -1px;
    top: 36px;
    list-style-type: none;
    background-color: var(--el-bg-card-d);
    margin: 0;
    padding: 0px 0;
    /* border: 1px solid #000000; */
    border-top: 0;
    border-radius: 8px;
    overflow-y: scroll;
    max-height: 100px;
}

/*.ep-flag-select-language ul li {
  display:block;
  padding:5px 10px;
  cursor:pointer;
}*/

.ep-flag-select-language ul li {
    display: flex;
    padding: 5px 15px;
    cursor: pointer;
    gap: 15px;
    line-height: 15px;
}

.ep-flag-select-language span img,
.ep-flag-select-language ul li img {
  display:inline-block;
  vertical-align:middle;
  width:20px;
  margin-right:15px;
}

.ep-flag-select-language ul li:hover {
  background-color:var(--bs-primary);
}
/*end select option + adding flag*/


.btn-speach-content-audio {
    background-color: var(--el-blue);
    width: 27px;
    height: 27px;
    border-radius: 50%!important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-light);
    font-size: 15px;
    margin-top: 2px;
}
.btn-speach-content-audio:hover {
    background-color: var(--el-blue-dark);
    color: var(--el-blue);
}

@media (min-width: 992px) {
    .nav-container.nav-toggle.visibilite-hidden.rf-container:not(.show) {
        height: 71px;
    }
}

div#container-statistical-detail {
    max-height: 400px;
    overflow: auto;
}

td.webkit-align-center {
    text-align: -webkit-center;
    -webkit-align-content: center;
}

.btn-el-circle-audio {
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 15px;
    left: -10px;
    text-decoration: none;
}
.padding-none {
    padding: 0px !important;
}

.el-btn-new-theme {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 50%;
    outline: none;
    border: none;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .3s ease;
    justify-content: center;
    display: flex !important;
    text-align: center;
    align-items: center;
}

/*div#speech-audio-content-sentence {
    background: var(--el-bg-card-c);
    width: 300px;
    padding: 0px 10px 10px 10px;
    border-radius: 16px;
    position: fixed;
    right: 0;
    bottom: 15px;
    z-index: 5000;
}*/
.el-pta.trainee-pta.ep-btn-speech {
    bottom: 200px;
}

.el-pta.trainee-pta.ep-btn-speech a[disabled=disabled], .el-pta.trainee-pta.ep-btn-speech a:disabled {
    cursor: not-allowed;
    pointer-events: none;
    color: #c0c0c0;
    background-color: #ffffff;
}

#btn-start-conversation {
    /*padding: 38px 5px;
    border-radius: 50%;*/
    text-transform: capitalize;
}


.btn-start-conversation {
    animation: glowing 1300ms infinite;
}

@keyframes glowing {
    0% {
      background-color: var(--el-orange);
      box-shadow: 0 0 5px var(--el-orange);
    }
    50% {
      background-color: var(--el-dark);
      box-shadow: 0 0 20px var(--el-dark);
    }
    100% {
      background-color: var(--el-orange);
      box-shadow: 0 0 5px var(--el-orange);
    }
}

#realtimeChatContainer {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.message.PROF {
    /* color: var(--el-green); */
    color: var(--el-dark);
    font-weight: 900;
    text-align: left;
}

.message.STAG { 
    color: var(--el-light); 
    text-align: right; 
    font-weight: 900;
}

#realtimeWaiting, #realtimeTimer {
  display: none; 
  text-align: center; 
  margin: 10px 0;
  font-size: 18px;
  font-weight: 900;
}
#controls button { margin-right: 5px; }

.form-realtime-discution .modal-action .el-btn, .form-realtime-discution .form-action .el-btn {
    padding: 10px 20px;
    text-transform: inherit;
}

div#realtimeWaiting {
    text-align: center !important;
    width: max-content;
    margin: 0 auto;
}
.bo-form .form-label, .modal .form-label {
    color: var(--el-blue-c);
    font-weight: 400;
    line-height: 24px;
    height: 24px;
    font-size: 14px;
    opacity: 1;
    pointer-events: none;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.config-chat-form .checkbox-group,
.config-chat-form .radio-group {
    display: flex;
    gap: 25px;
    align-items: center;
    padding-top: 15px;
}

.config-chat-form .checkbox-group>label,
.config-chat-form .radio-group>label {
    display: flex;
    align-items: center;
}


.config-chat-form .option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: all 0.15s ease-out 0s;
    background: transparent;
    border: none;
    color: var(--el-light);
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
    border: 1px solid var(--el-blue-c);
}



.config-chat-form input[type="checkbox"].option-input:checked {
    background: var(--el-green);
}

.config-chat-form input[type="radio"].option-input:checked {
    background: var(--el-orange);
}

.config-chat-form .option-input:checked::before {
    width: 25px;
    height: 25px;
    display: flex;
    content: "\ea41";
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    align-items: center;
    justify-content: center;
    font-family: 'boxicons';
    margin-top: -1px;
    margin-left: -1px;
}

.config-chat-form .option-input:checked::after {
    -webkit-animation: click-wave 0.65s;
    -moz-animation: click-wave 0.65s;
    animation: click-wave 0.65s;
    content: '';
    display: block;
    position: relative;
    z-index: 100;
}

.config-chat-form input[type="checkbox"].option-input:checked {
    border-color: var(--el-green);
}

.config-chat-form input[type="radio"].option-input:checked {
    border-color: var(--el-orange);
}

.config-chat-form input[type="checkbox"].option-input:checked::after {
    background: var(--el-green);
}

.config-chat-form input[type="radio"].option-input:checked::after {
    background: var(--el-orange);
}

.config-chat-form input[type="checkbox"].option-input {
    border-radius: 5px;
}

.config-chat-form input[type="radio"].option-input {
    border-radius: 50%;
}

.config-chat-form input[type="checkbox"].option-input::after {
    border-radius: 10px;
}

.config-chat-form input[type="radio"].option-input::after {
    border-radius: 50%;
}



.config-chat-form input[type=radio] {
    position: inherit;
    visibility: visible;
    display: flex;
}

button#realtimeMicBtn i {
    font-size: 2.3rem !important;
}

button#realtimeMicBtn {
    width: 45px;
    height: 45px;
    background-color: inherit;
    border-radius: 0px !important;
    border: none;
    /*color: var(--el-pink);*/
    color: var(--el-light);
}

div#realtimeChatBotF2p {
    background-color: var(--el-success);
    /* background-color: #1e1e1e; */
    border-radius: 16px;
    box-shadow: 0 10px 25px rgb(47 112 90);
}

div#realtimeChatBotF2p .form-label, div#realtimeChatBotF2p label {
    font-size: 0.9rem;
    font-weight: bold;
}

div#realtimeChatBotF2p .radio-group label {
    font-weight: normal;
}

div#realtimeChatBotF2p i{
    font-weight: bold;
    font-size: 1.2rem;
}

div#realtimeChatBotF2p .el-form-select option {
    background-color: var(--el-success);
}

div#realtimeChatBotF2p .el-form-select > option:hover,
div#realtimeChatBotF2p .el-form-select > option:focus {
    color: var(--el-success) !important;
    background-color: var(--el-light) !important;
}

button#btn-config-conversation,
a#el-btn-histori-realtime-conversation,
button#btn-save-conversation {
    text-transform: math-auto;
    font-size: 1rem;
    padding: 12px;
    color: var(--el-light);
}

button#btn-start-conversation,
button#btn-save-conversation {
    text-transform: math-auto;
    font-size: 1rem;
    padding: 12px;
}

#realtimeChatBotF2p h3{
    font-size: 1.3rem;
}

.text-pink{
    color: var(--el-pink);
}

.text-dark{
    color: var(--el-dark);
}

.text-light{
    color: var(--el-light);
}

.text-orange{
    color: var(--el-orange);
}

#realtime-chat-bot-history .al-container {
    background: inherit;
}

#realtime-chat-bot-history .message.PROF {
    color: var(--el-orange);
}

#realtime-chat-bot-history #realtimeChatContainer {
    border: 1px solid var(--el-orange);
    /* border-top-left-radius: 0px; */
    /* border-top-right-radius: 0px; */
    border-radius: 0px;
    max-height: 300px !important;
    height: inherit;
}

div#realtime-chat-bot-history .modal-content {
    overflow-y: hidden;
    height: inherit;
}

div#al-content {
    overflow-y: auto;
    max-height: 400px;
}

.view-content-ch .bs-meta-images {
    padding: 0px;
    background: none;
    gap: 30px !important;
    position: inherit;
}

.view-content-ch .tab-title h2 span {
    color: inherit;
}

img.img-content-activity.img-zoom {
    width: 100%;
}