/*
**
*Innovallys Plateform
*Ce Fichier fait partie du Projet Innovallys Plateforme web
*-----------------------------
*Copyright © Société Innovallys - Tout droits réservés
*-----------------------------
*Créer par : Innovallys
*Modifié par : Khawla Bendiaf
*-----------------------------
*Version : 0.076
*Date de création : 01/01/2017
*Date de mise à jour : 02/02/2019
*-----------------------------
*Description Fonction :
*
*/
/* edit by youssef */


@font-face {
    font-family: Nunito;
    src: url("../fonts/Nunito_Sans/NunitoSans-Regular.ttf");
    /* font-weight: 600;*/
    
}



.tooltips-password {
    z-index: 9999 !important;
    margin-right: 0px !important;
}
/* end of edit by youssef */
f.selector-for-some-widget {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

* {
    outline: none;
}

html {
    font-size: 62.5%;
}

@media screen and (max-width: 1700px) {
    html {
        font-size: 47%;
    }
}

@media screen and (max-width: 1400px) {
    html {
        font-size: 42%;
    }
}

@media screen and (max-width: 1300px) {
    html {
        font-size: 40%;
    }
}

@media screen and (max-width: 765px) {
    html {
        font-size: 15%;
    }
}

html, body {
    width: 100%;
    min-height: 100%;
    /* by khawla 11 12 2021*/
    /* overflow: hidden; */
    overflow-x: hidden;
}


body {
    font-family: "Nunito", sans-serif;
    color: #000000; /* by khawla 31 08 2020 */
    /* color: #808080;*/
    font-size: 2rem;
    font-weight: 400;
    /* by khawla 02 12 2020    background-color: #F0F0F0; */
    background-color: #f7f7f7;
    cursor: default;


}

.paddingscreen {
    padding-left: .4rem !important;
    padding-right: .4rem !important;
}

.copyright {
    font-size: 1.4rem;
    font-size: 1.2rem !important;
    color: #191970;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

    a::selection {
        text-decoration: none;
    }

.roundImg {
    border-radius: 50%;
}

.error {
    border: 1px solid red;
}

.right {
    float: right;
}

.button {
    min-width: 15rem !important;
    border-radius:5px;
}

/*.qrcode:hover {
    width:15rem;
    height:15rem;
    z-index:8000;
}*/
/**** HEADER ****/
#header {
    /*  background: url(../images/headerback.png) no-repeat center center / cover #FFFFFF;*/
    border-bottom: 3px solid #FFFFFF;
}

    #header img {
        height: 7rem;
    }

    #header span {
        font-size: 3rem;
        float: right;
        margin-right: 2.5rem;
        opacity: .6;
    }

.blur {
    text-shadow: 0 0 5px black;
    opacity: .5;
    color: #000000; /* by khawla 31 08 2020 */
    /* color: lightgray;*/
}

/**** WAIT ****/
#loader {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 1);
}

#wait {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    text-align: center;
}

    #wait.show {
        display: block;
        background-color: rgba(255, 255, 255, 1);
    }

    #wait.showtransp {
        display: block;
        background-color: rgba(255, 255, 255, .5);
    }

    #wait > span {
        position: absolute;
        z-index: 9999;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -6rem;
        font-size: 4.5rem;
        /* by khawla 10 01 2022 */
        color: #3A435E;
        -webkit-animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }

    #wait > label {
        position: absolute;
        z-index: 9999;
        top: 50%;
        left: 0;
        right: 0;
        font-size: 1.4rem;
        /* by khawla 10 01 2022 */
        color: #3A435E;
        margin-left: -1rem;
        margin-top: 1rem;
    }

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/**** TOOLTIP ****/
.formgroup .editor {
    padding: 0;
    margin: 0;
}

.formgroup i.tooltips {
    visibility: hidden;
}

.forminput i.tooltips {
    position: absolute;
    right: 0px;
    padding: .5rem 1px;
    display: none;
}

i.tooltips {
    position: relative;
    display: inline;
    color: red;
    cursor: help;
}

    i.tooltips span {
        position: absolute;
        width: 25rem;
        color: #FFF;
        background: #2C3e50;
        text-align: center;
        visibility: hidden;
        border-radius: 6px;
        padding: 0 .2rem
    }

        i.tooltips span:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -6rem;
            width: 0;
            height: 0;
            border-top: 8px solid #2C3e50;
            border-right: 8px solid transparent;
            border-left: 8px solid transparent;
        }

i:hover.tooltips span {
    visibility: visible;
    opacity: 1;
    bottom: 30px;
    left: 50%;
    margin-left: -7.5rem;
    z-index: 999;
}

i.tooltips {
    margin-right: 1rem;
}
/**** MENU ****/
.phonemenuopen {
    display: none;
}
/* modification in navbar padding*/
.navbar {
  /*  background: #2C3e50; /* by khawla 22 09 2020 */
    background: #FFFFFF; /* by khawla 19 10 2020 */
    padding: 1rem;
    margin: 0;
}

    .navbar li {
        list-style-type: none;
        color: #000000; /* by khawla 31 08 2020 */
        /*color: lightslategrey;*/
    }

    .navbar button {
        border: none;
        background: none;
        cursor: pointer;
        width: 100%;
        height: 5rem;
        line-height: 100%;
        text-align: left;
        /*  padding: 0 1rem;*/
        min-width: 5rem;
        /* border-bottom: 20px solid white; */
        /* border-right: 1px solid #FFF; */
        /*color: #FFF;*/
        font-size: 1.5rem;
        /*padding-right: 2rem;*/
    }

        .navbar button span {
            /* margin-right:.2rem; */
        }

    .navbar li:hover > button {
        opacity: 1;
    }

    .navbar .pull-lg-right button {
        border: none;
    }

/*.item-status button, .sub-item-status button{
    border-bottom:1px solid transparent!important;
}
.sub-item-status button, .sub-item-status-last button {
   padding-left:3rem!important;
    font-size: 1.4rem !important;
}
.sub-item-status-last button{
    border-bottom:1px solid #DCDCDC!important;
}*/
.userLoginImage {
    height: 5.8rem;
    width: 5.8rem
}

.navbar .divnotification {
    border: none;
    cursor: pointer;
    width: 100%;
    line-height: 100%;
    text-align: left;
    /* by khawla 06 08 2024 */
    color: #808080; /* #3A435E; */ /*  by khawla 19 10 2020 */
    /*color: #FFFFFF;*/
    height: 5rem !important;
    /* by khawla 19 08 2024 */
    /*font-size: 2rem;*/
    font-size: 2.2rem;

    font-family: "Nunito", sans-serif;
    padding: 1.8rem 0 .5rem 1rem;
    vertical-align: central !important;
}

    .navbar .divnotification:hover {
        /* by khawla 15 02 2022 */
        color:#2D95E3;
    }
    

    .navbar .divnotification span {
        margin-right: .8rem;
    }

.navbar li:hover > .divnotification {
    opacity: 1;
}

.navbar .pull-lg-right .divnotification {
    border: none;
}

/*.item-status .divnotification, .sub-item-status .divnotification {
    border-bottom: 1px solid transparent !important;*/
/* color: lightslategray;*/
/*}
.sub-item-status .divnotification, .sub-item-status-last .divnotification{
   padding-left:3rem!important;
    font-size:1.4rem!important;
}
.sub-item-status-last .divnotification{
    border-bottom:1px solid #DCDCDC!important;
}*/

.homecount {
    background-color: #2C3e50;
    font-size: 1.2rem;
    color: #FFF;
    padding: .3rem .5rem;
    margin-right: 1.5rem;
    float: right;
    border-radius: 25%;
}

.divmenucommand {
    border: 1px solid transparent;
    margin: .4rem 0;
}
/*-----------------------------------------------------------------------------------
NOTIFICATIONS
-----------------------------------------------------------------------------------*/
.notification, .news, .post, .inbox {
    font-size: 1rem;
    color: #FFF;
    padding: .3rem .5rem;
    border-radius: 50%;
    margin-left: .3rem;
}

.notification {
    background-color: red;
}

.news {
    background-color: green;
}
/* by khawla 17 11 2020  */
.post {
    background-color: #808080;
}

.inbox {
    background-color: orange;
}

.notificationImage {
    max-width: 4rem;
    max-height: 4rem;
    cursor: pointer;
    margin-right: .5rem;
}

.notificationAction {
    font-size: 1.3rem;
}

.notificationDate {
    font-size: 1rem;
}

.notification button {
    color: red !important;
}

@media (max-width: 1100px) {
}

#navitemleft {
}

#navitemmasc {
}

#searchmobile {
}
/* by khawla 26 02 2021 */
#showmobile {
}

#masciconformobile {
}
/*drop left  menu*/
@media (max-width: 900px) {
    html {
        font-size: 55%;
    }
    thumbnailcommandselectedinbox {
        font-size: 45%;
        top: 73px;
        left: 62px;
    }
    #header img {
        height: 4rem;
    }

    .navbar {
        padding-left: 1rem;
    }



    .navitemleft {
        display: none;
    }

    .searchmobile {
        display: none;
    }
    /* by khawla 26 02 2021 */
    .showmobile {
        display: none;
    }
    .phonemenuopen {
        float: right;
        margin-right: 1rem;
    }

    .footer {
        font-size: 5px;
    }
    /* by khawla 26 02 2021 */
    .scrollable {
        margin-top: 15rem;
        /* by khawla 19 08 2021 */
        margin-left: 0rem!important;
    }
}


/*drop search*/

@media (max-width: 800px) {
    html {
        font-size: 55%;
    }
    thumbnailcommandselectedinbox {
        font-size: 45%;
        top: 73px;
        left: 62px;
    }

    #header img {
        height: 4rem;
    }

    .navbar {
        padding-left: 1rem;
    }

    .navitemleft {
        display: none;
    }

    .navitemmasc {
        display: none;
    }
    .footerstyle {
        display: none !important;
    }

    .footerdetail {
        display: none !important;
    }

    .buttonstatdetail {
        display: none !important;
    }

    .headermobile {
        display: flex;
    }


    .searchmobile {
        display: none;
    }
    /* by khawla 26 02 2021 */
    .showmobile {
        display: none;
    }

    .phonemenuopen {
        float: right;
        margin-right: 1rem;
    }

    .footer {
        font-size: 7px;
    }
   
}



/*Phone*/
@media (max-width: 1000px) {

    html {
        /* by khawla 16 12 2022 */
        /* font-size: 55%; */
        font-size: 47%;
    }
    thumbnailcommandselectedinbox {
        font-size: 45%;
        top: 73px;
        left: 62px;
    }
    #header img {
        height: 4rem;
    }

    .navbar {
        padding-left: 1rem;
    }

    .navitemleft {
        display: none;
    }

    .navitemmasc {
        display: none;
    }
    .footerstyle {
        display: none !important;
    }

    .footerdetail {
        display: none !important;
    }

    .buttonstatdetail {
        display: none !important;
    }

    .searchmobile {
        display: inline;
    }
    /* by khawla 26 02 2021 */
    .showmobile {
        display: inline;
    }
    .phonemenuopen {
        float: right;
        margin-right: 1rem;
    }

    .masciconformobile {
        display: none;
    }

    .footer {
        font-size: 10px;
    }
    /* by khawla 26 02 2021 */
    .scrollable {
         margin-top: 6rem;

         /* by khawla 19 08 2021 */
         margin-left: 0rem!important;
    }

    /* by khawla 14 11 2024 */
    .col-xs-8 {
        width: 100%; /* Vous pouvez définir la largeur à 100% ou ajuster selon vos besoins */
        /* Vous pouvez également supprimer d'autres propriétés si nécessaire */
        padding-left: 0 !important; /* Réinitialiser les paddings */
        padding-right: 0 !important;
        align-content: unset !important; /* Réinitialiser align-content */
    }
    .col-sm-12 {
        width: 100%; /* La largeur est de 12 colonnes (100%) sur petits écrans */
    }
 
    #centerscroll {
        padding: 0rem !important;
    }
    /* by khawla 17 11 2024 */
    label {
        font-size: 2rem !important;
    }
    .panelcentral {
        
        padding: 0 1rem 0 1rem!important;
    }
    /* by khawla 18 11 2024 */
    #currentView {
        padding-left: 0rem!important;
        padding-right: 0rem!important;
    }
    /* by khawla 23 12 2024 */
    .textareareadonlydescription {
        margin-left: 0rem !important;
        margin-right: 0rem !important;
    }
    /* by khawla 26 12 2024 */
    /*.chatingdetailform {
        height:700px!important;
        width:400px!important;
    }
    .chatingdetailformdetail {
        min-height: 500px !important;
        min-width: 500px !important;
    }*/
}

/*Large Screen*/

@media (min-width: 1000px) {
    .searchmobile {
        display: none;
    }
    /* by khawla 26 02 2021 */
    .showmobile {
        display: inline;
    }
    .navbar .sub-item {
        font-size: 0.9em;
        position: absolute;
        z-index: 2000;
        /*width: auto;*/
        transform: translateY(-1000%);
        opacity: 0;
        transition: all 0s ease-in-out;
        padding-top: 0rem;
        margin-left: -15.5rem;
        /* by khawla 08 01 2021*/
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    }

    .navbar li:hover .sub-item {
        opacity: 1;
        transform: translateY(0rem);
        transition: all .6s;
    }

    .navbar .sub-item > li:first-child > button:after {
        content: '';
        position: absolute;
        height: 0;
        width: 0;
        /*left: 4.7rem;*/
        /* top: -.8rem;*/
        /* border: .8rem solid transparent; */
        border-top: 0;
        border-bottom-color: #FFF;
    }

    .navbar .sub-item button:hover {
        height: 4.5rem; /* modification */
        border: none;
        width: 25rem;
        padding: 2px 2px 2px 2px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        /* border-bottom:1px solid #DCDCDC;*/
        color: #0f8ff3;
        background: #DFF2FF;
    }

    .navbar .sub-item button {
        height: 4.5rem; /* modification */
        border: none;
        width: 25rem;
        padding: 2px 2px 2px 2px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        /* by khawla 08 01 2021
            background-color: #F7F7F7;*/
        background-color: #FFFFFF;
        /* border-bottom:1px solid #DCDCDC;*/
        color: #000000; /* by khawla 31 08 2020 */
        /*color: lightslategrey;*/
    }

    .navbar .sub-item > li:first-child > .divnotification:after {
        content: '';
        position: relative;
        height: 0;
        width: 0;
        /*  left: 4.7rem;
      top: -.8rem;*/
        /* border: .8rem solid transparent; */
        border-top: 0;
        border-bottom-color: #FFF;
    }

    .navbar .sub-item .divnotification {
        height: 3.5rem;
        border: none;
        background-color: #FFF; /* couleur item notif*/
        /*border-bottom:1px solid #DCDCDC;*/


        color: #C0C0C0;
    }

    .footer {
        font-size: 10px;
    }
    /* by khawla 26 02 2021 */
    .scrollable {
        margin-top: 15rem;
        /* by khawla 19 08 2021 */
        margin-left: 0rem!important;
    }
}

/*Print*/
@media print {

    .printhidden {
        display: none;
    }

    .printdisplay {
        display: inline;
    }
}

/**** SEARCH ****/
#search {
    /*border: none;*/
    border: 1px solid #3A435E; /* by khawla 19 10 2020*/
    padding: .3rem 1rem;
    margin: 0;
    background-color: #FFF;
}

    #search table {
        border: none;
        width: 100%;
        font-size: 1.6rem;
    }

        #search table input {
            border: none;
            width: 100%;
            padding-right: 2rem;
            color: #3A435E;
        }

        #search table span {
            cursor: pointer;
            color: #3A435E;
        }

/**** GENE ****/
.card {
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}

.numeric {
    text-align: right;
    padding-left: 3rem;
}

input, select {
    /*color: #404040;*/
    color: #000000; /* by khawla 31 08 2020 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;*/
    direction: ltr;
    border: 1px solid #D9D9D9;
}

    select::-ms-expand {
        display: none;
    }






.checkbox, /*.radio,*/ .checkbox span /*, .radio span*/ {
    margin-right: 1.2rem;
}

    .checkbox label /*, .radio label*/ {
        cursor: pointer;
    }

    .checkbox input[type="checkbox"] /*, .radio input[type="radio"]*/ {
        display: none;
    }

    .checkbox [type="checkbox"] /*,.radio [type="radio"]*/ {
        overflow: hidden;
        position: absolute;
    }

        .checkbox [type="checkbox"] + span::before /*,.radio [type="radio"] + span::before*/ {
            font-size: 1.8rem;
            color: #2C3e50;
            margin-right: .8rem;
        }

        .checkbox [type="checkbox"] + span::before {
            font-family: "Nunito", sans-serif;
            content: '\f096';
        }

        /*.radio [type="radio"] + span::before {
            font-family: "Fontello";
            content: '\f1db';
        }*/

        .checkbox [type="checkbox"]:checked + span::before {
            content: '\e80e';
        }

/*.radio [type="radio"]:checked + span::before {
            content: '\f192';
        }*/


.textarea, .textareareadonly {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    font-size: 1.4rem;
    /* by khawla 25 10 2023 */
    line-height: 1.3em;
    /* by khawla 29 02 2024*/
    text-align: left;
    text-align: justify;
}

.textarea {
    min-height: 7rem;
    padding: .5rem;
}

.textareareadonly, .textareareadonly:active, .textareareadonly:focus, .textareareadonlyinfo {
    cursor: default;
    outline: none;
    border: 0 none transparent;
    height: auto;
}

.link {
    cursor: pointer;
    color: #6495ED;
    font-size: 1.4rem;
}

    .link:hover {
        font-weight: bold;
    }

/**** THUMBNAIL ****/
.thumbnail {
    background-color: #FFFFFF;
}

.thumbnailheader, .thumbnailfooter, .statheader {
    font-size: 1.65rem;
    color: #000000; /* by khawla 31 08 2020 */
    /*color: #808080;*/
    cursor: default;
    padding: .15rem .2rem .15rem .3rem;
}

.thumbnailheader, .thumbnailfooter {
    height: 3rem;
}

.statheader {
    padding-left: .5rem;
}

.iconletter {
    background-color: #6495ED;
    color: #FFFFFF !important;
    margin: 0 .7rem 0 0;
    font-size: 1.6rem;
    font-weight: bold;
     padding: 0 0.3rem; 
}

.iconletternotpub {
    background-color: rgb(169,169,169);
    color: #ffffff !important;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0 .7rem 0 0;
    font-size: 1.6rem;
    font-weight: bold;
}

.thumbnailkpi {
    padding-left: .9rem;
    font-size: 1.2rem;
}

.thumbnailtitle {
    font-weight: bold;
}

.thumbnailweb {
    font-size: 2rem;
}

.thumbnaildoc {
    font-size: 1.1rem;
}

.thumbnailmore {
    text-align: right;
    padding-right: .6em;
    padding-top: .5rem;
}

.documentcommand, .emailcommand {
    font-size: 3rem;
}

.contextuelmenu {
    font-size: 1.3rem;
    border: 1px solid #D9D9D9;
    padding: .2rem 0;
    margin-right: .5rem;
    background-color: #FFFFFF;
    z-index: 9900;
    text-align: right;
    right: 0;
    position: absolute;
    top: 3rem;
}

    .contextuelmenu div {
        cursor: pointer;
        text-align: left;
        width: 19rem;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

        .contextuelmenu div:hover {
            background-color: #D9D9D9;
            color: #FFFFFF;
        }

        .contextuelmenu div span:nth-child(1) {
            margin-left: .5rem;
            margin-top: .1rem;
        }

        .contextuelmenu div span:nth-child(2) {
            position: absolute;
            right: .5rem;
        }

.verticaldot3:after {
    content: '\2807';
    font-size: 2.2rem;
}

.thumbnailcommand, .thumbnailmenu, .thumbnailcommandrotate, .documentcommand {
    transition: all .6s;
    color: #808080;
    cursor: pointer;
}

    .thumbnailcommand:hover, .thumbnailmenu:hover, .thumbnailcommandrotate:hover, .documentcommand:hover {
        color: #6495ED;
    }

    .thumbnailcommandrotate[aria-expanded="false"] {
        transform: rotate(180deg);
    }

.thumbnailcommandselected {
    /*
        #6495ED
    */
    /* by khawla 05 04 2021 */
    color: #6495ED;
}

    .thumbnailcommandselected:hover {
        color: #808080;
    }

.thumbnailcommanddisabled {
    cursor: default;
    color: #A9A9A9;
    opacity: .5;
}

    .thumbnailcommanddisabled:hover {
        cursor: default;
        color: #A9A9A9;
        opacity: .5;
    }

.thumbnailobjectuser {
    padding: .4rem;
}
/* by khawla 20 08 2024 */
    .thumbnailobjectuser img {
        max-width: 6rem;
        max-height: 6rem;
        margin: 1rem ;
        width: 6rem;
        height: 6rem;
        cursor: pointer;
    }

.thumbnailuserkpi {
    font-size: 2rem;
    background-color: #6495ED;
    color: #FFFFFF;
    padding: .1rem .8rem;
    border-radius: 50%;
    margin: .3rem;
}

.thumbnailobject {
    padding: 1rem 2rem;
    margin: 0;
}

    .thumbnailobject img {
        max-width: 80%;
        max-height: 20rem;
        height: auto;
        cursor: pointer;
    }

.actualitytitle {
    font-size: 2.3rem;
    font-weight: bold;
    color: #2C3e50;
    cursor: pointer;
}

.actualityseparator {
    border-bottom: 1px solid;
    margin: 0 2rem;
}

.eventresponseaccept {
    font-size: 4rem;
    color: green;
}

.eventresponsetentative {
    font-size: 4rem;
    color: orange;
}

.eventresponsedecline {
    font-size: 4rem;
    color: red;
}

/**** RANGE ****/

input[type=range] {
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    height: 2rem;
    border: 0px none;
    background: transparent;
}

    input[type=range]::-webkit-slider-runnable-track {
        height: .7rem;
        background: #2C3e50;
        border: none;
        border-radius: 3px;
        padding: 0 !important;
        margin: 0 !important
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 1.7rem;
        width: 1.7rem;
        border-radius: 50%;
        background: #FFFFFF;
        border: 1px solid #2C3e50;
        margin-top: -.5rem;
    }


    input[type=range]::-ms-track {
        border-color: transparent;
        color: transparent;
    }

    input[type=range]::-ms-thumb {
        background: #FFFFFF;
        border: 1px solid #2C3e50;
        border-radius: 50%;
        height: 1rem;
        width: 1rem
    }

    input[type=range]::-ms-fill-lower {
        background: #2C3e50;
    }

    input[type=range]::-ms-fill-upper {
        background: #2C3e50;
    }

/**** STATS ****/
.statobject {
    margin: .3rem 2rem;
}

    .statobject img {
        max-width: 5rem;
        width: auto;
        height: auto;
        cursor: pointer;
    }
/**** CHAT ****/
.chatuserout {
    text-decoration: line-through;
}

.chatuserimg {
    height: 3.5rem;
    margin-bottom: .3rem;
}

.chatcontent {
    color: #FFFFFF;
    border-radius: .6rem;
    padding: .5rem;
}

/**** FORM ****/

.form button, .form input, .form select, .checkbox span /*, .radio span*/ {
    /* by khawla 25 04 2024 */
    /*   font-size: 1.4rem;*/
    font-size: 1.7rem;
    font-weight: normal;
}

.form select {
    min-height: 2.8rem !important;
}

.panelform .textbox, .panelform .textareareadonly {
    margin-left: 2.5rem;
    margin-right: 2rem;
}

.filter span {
    margin-right: 1.2rem;
}

.panelcentral {
    margin: 0 0 .8rem 0;
    background-color: #FFFFFF;
    /* by khawla 16 09 2024 */
    /*padding: 0 1rem 0 2rem;*/
    padding: 0 3rem 0 3rem;
}

    .panelcentral .paneltitle {
        /* by khawla 16 08 2024 */
        font-size: 3rem;
    }

.paneltitle {
    cursor: default;
}

.panelcentral label {
    font-weight: bold;
    margin-top: .8rem;
    padding-left: .5rem;
}

.profiletitle {
    /* by khawla 01 09 2020*/
    /* color: darkgray !important;*/
    color: black;
    font-weight: bold;
}

.forminput {
    position: relative;
}

    .forminput input {
        padding-right: 30px;
        margin-bottom: 1rem;
    }

.form button {
    margin-bottom: 1rem;
}

.formgroup .separator {
    display: block;
}

.formgroup > div {
    margin-left: 0rem;
    margin-right: 0rem;
    margin-bottom: 1rem;
}
/*****/
.formgroupagenda {
}

    .formgroupagenda > div {
        margin-left: 0rem;
        margin-right: 0rem;
        margin-bottom: 0rem;
    }

.formgroup label {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.inputdate {
    width: 12rem;
}

.inputphone {
    width: 15rem;
}

.formdate div:nth-child(1), .formnum div:nth-child(1) {
    display: inline-block;
    width: 12rem;
}

.formdate divc, .formnum div:nth-child(2) {
    display: inline-block;
    width: 15rem;
}

.formdatetime div:nth-child(1) {
    display: inline-block;
    width: 12rem;
}

.formdatetime div:nth-child(2) {
    display: inline-block;
    width: 15rem;
}

.formdatetime div:nth-child(3) {
    display: inline-block;
    width: 12rem;
    text-align: right
}

.formdatetime div:nth-child(4) {
    display: inline-block;
    width: 15rem;
}

.formdate label, .formnum label, .formdatetime label, .formnumtime label {
    font-weight: normal;
    font-weight: 100;
}

.menucommand {
    /* by khawla 30 03 2024 */
    font-size: 1.7rem;
    padding-left: 1rem;
    padding-top: .8rem;
}

    .menucommand:hover {
        cursor: pointer;
        color: #6495ED;
    }

.menucommandselected {
    color: #6495ED;
}





.viewtitle {
    padding-left: 1.3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .viewtitle span {
        font-size: 2rem;
    }

.viewtitlelink {
    cursor: pointer;
    color: #2C3e50;
}

    .viewtitlelink:hover {
        font-weight: bold;
    }

.viewoverview {
    font-size: 1.27rem;
}

    .viewoverview div span:first-child {
        font-weight: bold;
        margin-right: .8rem;
    }

.formcommand {
    padding-top: 3rem;
}

/**** CONTENT ****/
.contentdocumenttitle, .contenttitle, .contentheadertitle {
    padding: .7rem 1rem;
    text-align: left;
    color: #000000;
    font-size: 2.7rem;
    font-weight: bold;
}

.contenttitle {
    font-size: 2rem;
    padding: .7rem .5rem;
}

.contentheadertitle {
    font-size: 1.6rem;
}

contentseparator {
    height: 2px;
    border: 0;
    background-image: linear-gradient(to right, rgba(27, 104, 175, 0), rgba(27, 104, 175, 0.75), rgba(27, 104, 175, 0));
}

.contentimage {
    max-width: 95%;
    max-height: 20rem;
    height: auto;
    margin-top: .5rem;
    cursor: pointer;
}

/**** USERLOGIN FORM ****/
.form-userlogin .card {
    text-align: center;
    max-width: 35rem;
    background-color: #F7F7F7;
    padding: 2rem 2.5rem 3rem;
    margin: 0 auto 2rem;
    margin-top: 5rem;
}

.form-userlogin .card-img {
    color: #2C3e50;
    font-size: 15rem;
    background-color: #FFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    max-width: 5rem;
    width: auto;
    height: auto;
}

.form-userlogin .title {
    font-size: 2.2rem;
}

/**** STEP ****/
.step .card {
    text-align: center;
    max-width: 50%;
    background-color: #F7F7F7;
    padding: 2rem 2.5rem 3rem;
    margin: 0 auto 2rem;
    margin-top: 5rem;
}

.step .card-img {
    color: #FFFFFF;
    font-size: 6rem;
    background-color: #2C3e50;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.step .card-desc {
    font-size: 2rem;
}

.step .title {
    font-size: 2.2rem;
}

/**** MEDIA ****/
.media span {
    margin-right: .3rem;
}

.displayinline {
    padding: .5rem 1rem 1rem 3rem;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

/**** MULTISELECT ****/
.uiselectlist, .uiselectmatch {
    /*color: #404040;*/
    color: #000000; /* by khawla 31 08 2020 */
    font-size: 1.4rem;
}

.externaluser {
    color: #4169E1;
}

select {
    border: 1px solid #D9D9D9;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*background: url(../images/down.png) no-repeat right 5px center;*/
}

.formgroupuiselect {
    padding: 0;
}

.ui-select-container {
    padding: 0;
    border: 1px solid #D9D9D9;
}

.ui-select-toggle {
    min-height: 3rem;
    border: 1px solid transparent;
}
/**** COMMENT ****/
.commentdeleted {
    font-size: 2rem;
    color: red;
}

@media (min-width: 100px) {
    .card-columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (min-width: 900px) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 1300px) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
/* by khawla 02 12 2020 */
/*
@media (min-width: 1600px) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}*/

/**** AGENDA ****/
.eventowner, .eventaccepted {
    font-size: 1.2rem;
    cursor: pointer;
    padding: .2rem .5rem;
}

.eventowner {
    background-color: #2C3e50;
}

.eventaccepted {
    background-color: green;
}

.datepicker-days td {
    min-width: 20px !important;
    font-size: 1rem;
    cursor: pointer;
}

#currentView {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.container-row {
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-fluid {
    padding: 0;
}

[class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
}

/**** ISOTOPE - MASONRY ****/
#list {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    column-count: 4;
    column-gap: 0;
    column-fill: auto;
}

.item {
    margin: 0;
    padding: 0 .5rem;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid transparent !important;
}

.wrapper {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

#fixedheader {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 300;
    /*adding-bottom:1rem;*/
    /* by khawla 21 09 2020  background-color: #F0F0F0;*/
    /* by khawla 10 01 2022 */
    /* by khawla 08 11 2024 */
    /*background-color: #3A435E;*/
}
/* by khawla 26 02 2020 */
.scrollable {
    /* margin-top: 10.5rem;*/
   /* margin-top: 15rem; /* by khawla 19 10 2020 */
   /* by khawla 19 08 2021 */
    margin-left: 2rem;
}
/* by khawla*/
.popupContainer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8000;
    background: rgba(220, 220, 220, 0.5);
}

    .popupContainer > div {
        background-color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50vh;
        transform: translateY(-50%);
        width: 40rem;
        height: 30rem;
    }

.popupForm .title {
    line-height: 5rem;
    background-color: #2C3e50;
    color: #FFF;
    font-size: 2.3rem;
}

.popupButton {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

    .popupButton button {
        width: 30%;
        margin: 1rem 1rem 2rem 1rem;
    }

.popupContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 3rem 2rem 3rem;
    font-size: 1.8rem;
}
/*  new style  */

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}



    .cb-slideshow li span {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
        opacity: 0;
        z-index: 0;
        animation: imageAnimation 30s linear infinite 0s;
    }

    .cb-slideshow li div {
        z-index: 1000;
        position: absolute;
        bottom: 30px;
        left: 0px;
        width: 100%;
        text-align: center;
        opacity: 0;
        color: #fff;
        animation: titleAnimation 30s linear infinite 0s;
    }

        .cb-slideshow li div h3 {
            font-family: "Nunito", sans-serif;
            font-size: 240px;
            padding: 0;
            line-height: 200px;
        }

   /* .cb-slideshow li:nth-child(1) span {
        background-image: url('../images/Light_Background/Background_01.jpg');
    }*/
/*  .cb-slideshow li:nth-child(2) span {
        background-image: url('../images/Light_Background/Background_01.jpg');
        animation-delay: 30s;
    }

 
 .cb-slideshow li:nth-child(3) span {
        background-image: url('../images/Light_Background/Background_17.jpg');
        animation-delay: 12s;
    }

    .cb-slideshow li:nth-child(4) span {
        background-image: url('../images/Light_Background/Background_05.jpg');
        animation-delay: 18s;
    }

    .cb-slideshow li:nth-child(5) span {
        background-image: url('../images/Light_Background/Background_06.jpg');
        animation-delay: 24s;
    }

 */















@keyframes imageAnimation {
    0% {
        opacity: 1;
        animation-timing-function: ease-in;
    }

    8% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out;
    }

    17% {
        opacity: 1;
        transform: scale(1.1) rotate(3deg);
    }

    25% {
        opacity: 0;
        transform: scale(1.1) rotate(3deg);
    }

    100% {
        opacity: 1;
    }
}

.no-cssanimations .cb-slideshow li span {
    opacity: 1;
}

@media screen and (max-width: 1140px) {
    .cb-slideshow li div h3 {
        font-size: 140px
    }
}

@media screen and (max-width: 600px) {
    .cb-slideshow li div h3 {
        font-size: 80px
    }
}

/******/
.step .img-lock {
    color: #2C3e50;
    font-size: 6rem;
    background-color: #FFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    max-width: 2rem;
    width: 20%;
    height: 50%;
}

/* *** */




#input_img {
    align-self: center;
    position: absolute;
    bottom: 2px;
    right: 5px;
    width: 40px;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 15px;
    height: 40px;
}



/*   06/02/2019  */

.search-box-container {
    display: inline-block;
    box-sizing: content-box;
    height: 25px;
    /* by khawla 14 10 2021*/
    width: 250px;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}


    .search-box-container * {
        /* by khawla 14 10 2021 */
        display: inline;
        margin: 0;
        height: 100%;
        width: 205px;
        padding-top: 2px;
        padding-bottom: 2px;
        border: 0;
        font-size: 2rem;
        font-family: "Nunito", sans-serif;
        outline: none;
    }


.search-box {
    cursor: pointer;
    color: #2C3e50;
    width: auto;
    padding: 0px;
    float: right;
    font-size: 2.5rem;
    font-family: "Nunito", sans-serif;
    background-color: white;
}
/* *****  */

#input_img_login {
    position: absolute;
    top: 39px;
    bottom: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

#input_img-icon {
    position: absolute;
    top: 10px;
    bottom: 0px;
    padding-left: 15px;
    padding-right: 1px;
}

#input_img-icon-activity {
    position: absolute;
    top: 10px;
    bottom: 0px;
    padding-left: 49px;
    padding-right: 1px;
}

#input_img-icon-actuality {
    position: absolute;
    top: 10px;
    bottom: 0px;
    padding-left: 55px;
    padding-right: 1px;
}

#input_img-icon-searching {
    /* by khawla 14 10 2021*/
    position: absolute;
    top: 15px;
    color: #000000; /* by khawla 31 08 2020 */
    /*color: dimgrey;*/
    padding-left: 1px;
    padding-right: 1px;
}


/* ** *  */
flag-icon-us {
    background-image: url(../images/en.png);
}

.flag-icon {
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
}


/****/
/* Style the links inside the sidenav */
#mySidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -200px; /* Position them outside of the screen */
    // transition: 0.3s; /* Add transition on hover */
    transition: left 1s, transform 0.3s;
    padding-left: 6px; /* 15px padding */
    width: 200px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 15px; /* Increase font size */
    color: black; /* White text color */
    border-radius: 0 0px 0px 0; /* Rounded corners on the top right and bottom right side */
}

#divsoustitre {
    padding-left: 5px;
    font-size: 10px;
}




#mySidenav a:hover {
    left: 0; /*On mouse-over, make the elements appear as they should */
}

#mySidenav div {
    background: #F7F7F7;
    padding: 5px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: #000000; /* by khawla 31 08 2020 */
    /*color: lightslategrey;*/
}


/* The about link: 20px from the top with a green background */
#about {
    /*top: 60px;*/
    top: 95px; /* by khawla 19 10 2020 */
    background-color: #dfdfdf;
}

    #about div:hover {
        color: #0f8ff3;
        background: #DFF2FF;
    }


#blog {
    top: 80px;
    background-color: #2C3e50;
}

#projects {
    top: 140px;
    background-color: #2C3e50;
}

#contact {
    top: 200px;
    background-color: #2C3e50;
}


/***header fix for mobile ***/
.userLoginImageheaderfix {
    height: 2.8rem;
    width: 2.8rem;
}

/* *****  */

#input_img_login_mobile_fix {
    position: absolute;
    top: 20px;
    bottom: 0px;
    padding-left: 10px;
    padding-right: 0px;
}

#input_img-icon_mobile_fix {
    position: absolute;
    top: 1px;
    bottom: 0px;
    padding-left: 11px;
    padding-right: 1px;
}

#input_img-icon-searching_mobile_fix {
    position: absolute;
    top: 0px;
    top: 5px;
    color: #000000; /* by khawla 31 08 2020 */
    /*color: dimgrey;*/
    padding-left: 10px;
    padding-right: 100px;
}

::-webkit-scrollbar {
    /*width: 0px; /* remove scrollbar space */
    /*background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    /* by khawla 14 12 2021 */
   /* background: #FF0000;*/
}


.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#footerfixe {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 300;
    padding-bottom: 1rem;
    /* by khawla 02 12 2020    background-color: #F0F0F0; */
    background-color:  #f7f7f7;
}


/*   SEARCH MOBILE   */
/* by khawla 03 03 2021 */
.search-box-container_mobile {
    display: inline-block;
    box-sizing: content-box;
    height: 20px;
    width: 200px;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}


    .search-box-container_mobile * {
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 150px;
        padding-top: 1px;
        padding-bottom: 2px;
        border: 0;
        font-size: 1rem;
        font-family: "Nunito", sans-serif;
        outline: none;
    }


.search-box_mobile {
    cursor: pointer;
    color: #2C3e50;
    width: auto;
    padding: 0px;
    float: right;
    font-size: 1.5rem;
    font-family: "Nunito", sans-serif;
    background-color: white;
}
/* by khawla 03 03 2021 */
#input_img-icon-searching_mobile_fix_mobile {
    position: absolute;
    top: 7px;
    color: #000000; /* by khawla 31 08 2020 */
    /*color: dimgrey;*/
    
}


/*************compose mail*************/
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.ct-example .badge, .ct-example .btn, .ct-example .form-control, .ct-example > .alert + .alert, .ct-example > .nav + .nav, .ct-example > .navbar + .navbar, .ct-example > .progress + .btn, .ct-example > .progress + .progress {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.btn:not(:last-child) {
    margin-right: .5rem;
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}

.btn {
    font-size: .875rem;
    position: relative;
    transition: all .15s ease;
    letter-spacing: .025em;
    text-transform: none;
    will-change: transform;
}

.btn-info {
    color: #fff;
    border-color: #11cdef;
    background-color: #11cdef;
}

.btn {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    display: inline-block;
    padding: .625rem 1.25rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid transparent;
    /* by khawla 17 08 2021 */
    border-radius: 5px;
}

button, select {
    text-transform: none;
}

button, input {
    overflow: visible;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

button {
    border-radius: 0;
}

*, ::after, ::before {
    box-sizing: border-box;
}

user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    padding: 1px 6px;
}

user agent stylesheet
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
}

user agent stylesheet
input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}

user agent stylesheet
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
}

user agent stylesheet
button {
    -webkit-appearance: button;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: .375rem;
    background-color: #fff;
    background-clip: border-box;
}

/*******************/
.menucommande {
    font-size: 1.5rem;
    padding-left: 1rem;
    padding-top: .8rem;
}

    .menucommande:hover {
        cursor: pointer;
        color: #11cdef;
    }

.menucommandeselected {
    /* by khawla 13 03 2025 */
    /* color: #11cdef;*/
    color :#120e58;
}
/*****/
.roundImginbox {
    border-radius: 40%;
}


/* The about link: 20px from the top with a green background */
#aboutttt {
}

    #aboutttt :hover {
        cursor: pointer;
    }
/*****/
.btn-info-agenda {
    color: #fff;
    border-color: #52ca35;
    background-color: #52ca35;
}
/******/
.chipsdemoBasicUsage .errors {
    font-size: 12px;
    color: #dd2c00;
    margin-top: 10px;
}

.chipsdemoBasicUsage .custom-chips md-chip {
    position: relative;
}

    .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container {
        position: absolute;
        right: 4px;
        top: 4px;
        margin-right: 0;
        height: 24px;
    }

        .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip {
            position: relative;
            height: 24px;
            width: 24px;
            line-height: 30px;
            text-align: center;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            border: none;
            box-shadow: none;
            padding: 0;
            margin: 0;
            transition: background 0.15s linear;
            display: block;
        }

            .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip md-icon {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%, -50%, 0) scale(0.7);
                color: white;
                fill: white;
            }

            .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:hover, .chipsdemoBasicUsage .custom-chips md-chip .md-chip-remove-container button.vegetablechip:focus {
                background: rgba(255, 0, 0, 0.8);
            }

.chipsdemoBasicUsage .custom-chips md-chips-wrap.md-removable md-chip md-chip-template {
    padding-right: 5px;
}


/* Commun à tous les styles */


.va0 {
    width: 10%;
}

.vt0 {
    width: 10%;
}

.vd0 {
    width: 10%;
}

.vn0 {
    width: 10%;
}

.va10 {
    width: 25%;
}

.vt10 {
    width: 25%;
}

.vd10 {
    width: 25%;
}

.vn10 {
    width: 25%;
}

.vd20 {
    width: 40%;
}

.vt20 {
    width: 40%;
}

.vn20 {
    width: 40%;
}

.va20 {
    width: 40%;
}


.va30 {
    width: 45%;
}

.vn30 {
    width: 45%;
}

.vt30 {
    width: 45%;
}

.vd30 {
    width: 45%;
}

.vd40 {
    width: 50%;
}

.vt40 {
    width: 50%;
}

.va40 {
    width: 50%;
}

.vn40 {
    width: 50%;
}


.vn50 {
    width: 55%;
}

.va50 {
    width: 55%;
}

.vd50 {
    width: 55%;
}

.vt50 {
    width: 55%;
}

.va60 {
    width: 60%;
}

.vn60 {
    width: 60%;
}

.vt60 {
    width: 60%;
}

.vd60 {
    width: 60%;
}

.va70 {
    width: 65%;
}

.vn70 {
    width: 65%;
}

.vt70 {
    width: 65%;
}

.vd70 {
    width: 65%;
}


.va80 {
    width: 70%;
}

.vn80 {
    width: 70%;
}

.vt80 {
    width: 70%;
}

.vd80 {
    width: 70%;
}


.va90 {
    width: 75%;
}

.vn90 {
    width: 75%;
}

.vt90 {
    width: 75%;
}

.vd90 {
    width: 75%;
}


.va100 {
    width: 80%;
}

.vn100 {
    width: 80%;
}

.vd100 {
    width: 80%;
}

.vt100 {
    width: 80%;
}


.multicolor .va100 {
    background: #008000;
}

.multicolor .va90 {
    background: #008000;
}

.multicolor .va80 {
    background: #008000;
}

.multicolor .va70 {
    background: #008000;
}

.multicolor .va60 {
    background: #008000;
}

.multicolor .va50 {
    background: #008000;
}

.multicolor .va40 {
    background: #008000;
}

.multicolor .va30 {
    background: #008000;
}

.multicolor .va0 {
    background: #008000;
}

.multicolor .va10 {
    background: #008000;
}

.multicolor .va20 {
    background: #008000;
}

.multicolor .vt100 {
    background: #ffa500;
}

.multicolor .vt90 {
    background: #ffa500;
}

.multicolor .vt80 {
    background: #ffa500;
}

.multicolor .vt70 {
    background: #ffa500;
}

.multicolor .vt60 {
    background: #ffa500;
}

.multicolor .vt50 {
    background: #ffa500;
}

.multicolor .vt40 {
    background: #ffa500;
}

.multicolor .vt30 {
    background: #ffa500;
}

.multicolor .vt0 {
    background: #ffa500;
}

.multicolor .vt10 {
    background: #ffa500;
}

.multicolor .vt20 {
    background: #ffa500;
}

.multicolor .vd100 {
    background: red;
}

.multicolor .vd90 {
    background: red;
}

.multicolor .vd80 {
    background: red;
}

.multicolor .vd70 {
    background: red;
}

.multicolor .vd60 {
    background: red;
}

.multicolor .vd50 {
    background: red;
}

.multicolor .vd40 {
    background: red;
}

.multicolor .vd30 {
    background: red;
}

.multicolor .vd0 {
    background: red;
}

.multicolor .vd10 {
    background: red;
}

.multicolor .vd20 {
    background: red;
}



.multicolor .vn100 {
    background: #add8e6;
}

.multicolor .vn90 {
    background: #add8e6;
}

.multicolor .vn80 {
    background: #add8e6;
}

.multicolor .vn70 {
    background: #add8e6;
}

.multicolor .vn60 {
    background: #add8e6;
}

.multicolor .vn50 {
    background: #add8e6;
}

.multicolor .vn40 {
    background: #add8e6;
}

.multicolor .vn30 {
    background: #add8e6;
}

.multicolor .vn0 {
    background: #add8e6;
}

.multicolor .vn10 {
    background: #add8e6;
}

.multicolor .vn20 {
    background: #add8e6;
}

/*
.multicolor .v20 {
    background: #12ff00;
}

.multicolor .v10 {
    background: #00ff60;
}*/
div.multicolor .percent {
    /* on passe l'élément span correspondant à la classe .percent
    en affichage en bloc pour pouvoir lui donner une dimension.
    Diverses autres choses sont modifiées ensuite à votre convenance. */
    display: block; /* on affiche le span sous forme de bloc pour lui affecter des dimensions */
    height: 1.5em;
    line-height: 1.5em;
    margin: 2.5px 5px;
    /*padding: 0 5px;*/
    text-align: right;
    color: #000;
    font-weight: bold;
    font-family: "Nunito", sans-serif;
    -moz-border-radius: 5px; /* un petit arrondi pour les navigateurs le supportant */
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    cursor: default;
}

/***************************************/
.chips.chips-initial {
    border-bottom: 1px solid #ddd;
}


.chip {
    font-size: 10px;
    font-weight: bold;
    line-height: 20px;
    padding: 0px 10px;
    border-radius: 16px;
    background-color: #eef2f3;
    margin: 2px 2px;
    display: inline-block;
    outline: none;
}

.chipdefault {
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    padding: 0px 10px;
    border-radius: 16px;
    background-color: #850606;
    margin: 2px 2px;
    display: inline-block;
    outline: none;
}
/*.chippppp {
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
    padding: 0px 13px;
    border-radius: 16px;
    background-color: #eef2f3;
    margin: 5px 5px;
    display: inline-block;
    outline: none;
}*/
.chip:focus {
    background-color: #51c5c2;
    color: #fff;
}

.closebtn {
    cursor: pointer;
}

.closebtn338 {
    cursor: pointer;
}

.chips.chips-initial input.chip-input {
    display: inline-block;
    float: none;
    width: 120px;
    min-width: 30px;
    border: none;
    outline: none;
}

.contentchip {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    font-size: 1.4rem;
    line-height: 1.3em;
    text-align: left;
    text-align: justify;
}

.displayinlineexternal {
    display: inline-block;
    float: none;
    min-width: 30px;
    border: none;
    outline: none;
}
/*********/




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

.custom-dropdown--small {
    font-size: 1em; /* font-size: .7em; */
}

.custom-dropdown__select {
    font-size: inherit; /* inherit size from .custom-dropdown */
    padding: .5em; /* add some space*/
    margin: 0; /* remove default margins */
}

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

@supports (pointer-events: none) and ((-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none)) {

    .custom-dropdown {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }

    .custom-dropdown__select {
        padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
        border: 0;
        border-radius: 3px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

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

    .custom-dropdown::after { /*  Custom dropdown arrow */
        content: "\25BC";
        height: 1em;
        font-size: .9em; /** font-size: .625em; **/
        line-height: 1;
        right: 1.2em;
        top: 50%;
        margin-top: -.5em;
    }

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

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

    .custom-dropdown.custom-dropdown--disabled::after {
        color: rgba(0,0,0,.1);
    }
    /* White dropdown style */
    .custom-dropdown--white::before {
        top: .5em;
        bottom: .5em;
        background-color: #fff;
        border-left: 1px solid rgba(0,0,0,.1);
    }

    .custom-dropdown--white::after {
        color: rgba(0,0,0,.9);
    }
    /* FF only temp fix */
    @-moz-document url-prefix() {
        .custom-dropdown__select {
            padding-right: .9em
        }

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

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

/********/


#cercleiconn {
    width: 15px;
    height: 15px;
    border-radius: 7px;
    background: green;
}

/*****/
.btn-info-actuality {
    color: #fff;
    border-color: #ff006e;
    background-color: #ff006e;
}

/*** by khawla ***/
.btn-info-visioconference {
    color: #fff;
    border-color: #3287C9;
    background-color: #3287C9;
}


/***********/
.actualitytitlearticle {
    /* font-size: 3rem;*/
    /*font-weight: bold;*/
    /*  color: #3287C9;*/
    /* 3287C9 */
    /*    text-align: center; */
    /* cursor: pointer;
    font-family: Trebuchet MS, sans-serif;
    */
    font-family: 'Nunito', sans-serif; /* font-family: 'Merriweather';*/
    font-size: 25px;
    color: #003366; /* #003366 */
    font-weight: 700;
}

.artclimg {
    border-style: none;
    vertical-align: top;
    max-width: 100%;
    height: auto;
    width: 850px;
    height: 491px;
}

.actualityseparatorarticle {
    border-bottom: 1px solid;
    margin: 0 2rem;
    color: orange;
}



.btn-info-group {
    color: #fff;
    border-color: #04B4AE;
    background-color: #04B4AE;
}

.btn-info-idea {
    color: #fff;
    border-color: #8000FF;
    background-color: #8000FF;
}

.btn-info-challenge {
    color: #fff;
    border-color: #FF0040;
    background-color: #FF0040;
}

.btn-info-mission {
    color: #fff;
    border-color: #FD62A2;
    background-color: #FD62A2;
}


.btn-info-forum {
    color: #fff;
    border-color: #D7DF01;
    background-color: #D7DF01;
}

.btn-info-survey {
    color: #fff;
    border-color: #FF8000;
    background-color: #FF8000;
}


.btn-info-raport {
    color: #fff;
    border-color: #088A4B;
    background-color: #088A4B;
}



.btn-info-annoncment {
    color: #fff;
    border-color: #013ADF;
    background-color: #013ADF;
}


.btn-info-document {
    color: #fff;
    border-color: #0B614B;
    background-color: #0B614B;
}

.btn-info-expertise {
    color: #fff;
    border-color: #61380B;
    background-color: #61380B;
}

.btn-info-keyword {
    color: #fff;
    border-color: #5FB404;
    background-color: #5FB404;
}



/***/
/**** WAIT ****/
#loaderliste {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
}

#waitliste {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    text-align: center;
}

    #waitliste.show {
        display: block;
        background-color: rgba(0, 0, 0, 0);
    }

    #waitliste.showtransp {
        display: block;
        background-color: rgba(0, 0, 0, 0);
    }

    #waitliste > span {
        position: absolute;
        z-index: 9999;
        top: 50%;
        left: 0;
        right: 0;
        margin-top: -6rem;
        font-size: 4.5rem;
        /* by khawla 10 01 2022 */
        color: #3A435E;
        -webkit-animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }

    #waitliste > label {
        position: absolute;
        z-index: 9999;
        top: 50%;
        left: 0;
        right: 0;
        font-size: 1.4rem;
        /* by khawla 10 01 2022 */
        color: #3A435E;
        margin-left: -1rem;
        margin-top: 1rem;
    }



.btn-info-liste {
    color: #fff;
    border-color: #235989;
    background-color: #235989;
}


/** by khawla **/

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 17px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 13px;
        width: 13px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #4CAF50;
}

input:focus + .slider {
    box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 17px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/* by khawla */
/*  
control {
    display: inline;
    position: absolute;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 18px;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 14px;
    width: 14px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #ccc;
}

.control input:checked ~ .control__indicator {
    background: #2aa1c0;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #0e647d;
}

.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    left: 4.45px;
    top: 4.45px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}

.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}
*/


@-webkit-keyframes click-wave {
    0% {
        height: 40px;
        width: 40px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0;
    }
}

@-moz-keyframes click-wave {
    0% {
        height: 40px;
        width: 40px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0;
    }
}

@keyframes click-wave {
    0% {
        height: 40px;
        width: 40px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0;
    }
}

.option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    right: 0;
    bottom: 0;
    left: 0;
    height: 14px;
    width: 14px;
    -webkit-transition: all 0.15s ease-out 0s;
    -moz-transition: all 0.15s ease-out 0s;
    transition: all 0.15s ease-out 0s;
    background: #cbd1d8;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
}

    .option-input:hover {
        background: #9faab7;
    }

    .option-input:checked {
        background: #1a76ab;
    }

        .option-input:checked::before {
            height: 14px;
            width: 13.5px;
            position: absolute;
            content: "\2716";
            display: inline-block;
            font-size: 8.6666666667px;
            text-align: center;
            line-height: 14.7px;
        }

        .option-input:checked::after {
            -webkit-animation: click-wave 0.65s;
            -moz-animation: click-wave 0.65s;
            animation: click-wave 0.65s;
            background: #1a76ab;
            content: "";
            display: block;
        }

    .option-input.radio {
        border-radius: 50%;
    }

        .option-input.radio::after {
            border-radius: 50%;
        }
/* style="font-weight: normal;font-size:1.4rem;text-align:center;" */
.radiocheckboxspan {
    font-weight: normal;
    font-size: 1.6rem;
    padding: 0px 30px 0px 0px;
}

/* by khawla 21 08 2020 */
/* by khawla 17 11 2020 */

.btn-draft {
    background-color: #806666;
    opacity: 0.72;
    color: #FFFFFF;
}

/* by khawla 26 08 2020 */
ul.a {
    list-style-type: none;
}

footer {
    /* by khawla 10 01 2022 */
    color: white;
    /*  by khawla 16 09 2022 */
    /* background: #3A435E; */
    /* by khawla 16 11 2020 */
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    /* by khawla 21 09 2020   background-color: #2C3e50;*/
    /*  by khawla 16 09 2022 */
    /*background-color: #3A435E;*/
    /* by khawla 12 10 2022 */
    background-color: #3A435E;
    background: #3A435E;
    /* by khawla 16 11 2020 */
}

#logo {
    height: 60px;
}

#nom {
    font-family: "Nunito", sans-serif;
    color: #a7b8c4;
    height: 10px;
    width: 150px;
    margin-top: 0px;
    margin-right: 150px;
    margin-left: 0px;
    margin-bottom: 10px;
    padding-left: 80px;
    text-align: left;
}

#sousnom {
    font-family: "Nunito", sans-serif;
    vertical-align: top;
    color: #c8e2f1;
    height: 150px;
    width: 500px;
    margin-top: 0px;
    margin-left: 50px;
    margin-right: 10px;
    margin-bottom: 30px;
    padding-left: 80px;
    text-align: left;
}

#nous {
    font-family: "Nunito", sans-serif;
    color: #c8e2f1;
    height: 10px;
    float: center;
    margin-top: 10px;
    /*margin-right: 0px;
    margin-left: 50px;*/
    margin-bottom: 20px;
    text-align: left;
}

#sousnous {
    font-family: "Nunito", sans-serif;
    vertical-align: top;
    color: #c8e2f1;
    height: 150px;
    width: 500px;
    margin-top: 0px;
    margin-left: 50px;
    margin-right: 150px;
    margin-bottom: 0px;
    text-align: left;
}

#liens {
    font-family: "Nunito", sans-serif;
    color: #c8e2f1;
    height: 10px;
    width: 300px;
    margin-top: 10px;
    margin-left: 140px;
    /* margin-right: 50px;*/
    margin-bottom: 20px;
}

#souslien {
    font-family: "Nunito", sans-serif;
    color: #c8e2f1;
    float: left;
    margin-top: 0px;
    margin-left: 105px;
    margin-right: 50px;
    margin-bottom: 25px;
    text-align: left;
}

#souslien1 {
    font-family: "Nunito", sans-serif;
    width: 400px;
    color: #c8e2f1;
    float: left;
    margin-top: 0px;
    margin-left: 108px;
    margin-right: 50px;
    margin-bottom: 25px;
    text-align: left;
}

/* by khawla  15 09 2020 */
#mySidenav::-webkit-scrollbar {
    width: 0px; /* remove scrollbar space */
    background: transparent; /* optional: just make scrollbar invisible */
}

#about::-webkit-scrollbar {
    width: 0px; /* remove scrollbar space */
    background: transparent; /* optional: just make scrollbar invisible */
}



.styletitle {
    font-size: 2.5rem;
    color: #000000; /* by khawla 31 08 2020 */
    /*color: #808080;*/
    font: bold;
    cursor: default;
    padding: 2rem 2rem 2rem 5rem;
}


/* by khawla 20 10 2020 */
.notifmenu {

}
    .notifmenu :hover {
       
        background: #DFF2FF;
    }

#notifscroll {

}

    #notifscroll::-webkit-scrollbar {
        width: 0px; /* remove scrollbar space */
        background: transparent; /* optional: just make scrollbar invisible */
    }


/* by khawla 22 10 2020 */
.ck-editor__editable {
    min-height: 200px;
  
}


/* by khawla 09 11 2020 */
/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */
:root {
    --ck-image-style-spacing: 1.5em;
}

   .image-style-side, .image-style-align-left,  .image-style-align-center,  .image-style-align-right

{
    max-width: 50%;
}

.image-style-side {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

.image-style-align-left {
    float: left;
    resize: both;
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    margin-right: var(--ck-image-style-spacing);
}

.image-style-align-center {
    align-content: center;
    margin-left: auto;
   
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    margin-right: auto;
}

.image-style-align-right {
    float: right;
    resize: both;
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    margin-left: var(--ck-image-style-spacing);
}

.figure {
    resize: both; /* chttps://developer.mozilla.org/fr/docs/Web/CSS/resize */
    max-width: 50%;
    word-wrap: break-word;
}

.figure p {
    word-wrap: break-word;
}
.textareareadonly figure p {
    word-wrap: break-word;

}
.textareareadonly  figure img {
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}
.textareareadonly figure {
    /* by khawla 24 04 2025 */
    float:none;
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}
.textareareadonly iframe {
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

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

.div editor   {
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

/* by khawla 10 11 2020 */
.image-style-full {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

.textareareadonly figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* by khawla 16 11 2020 */
.textareareadonly figure iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}



/* by khawla 25 11 2020 */
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp:21;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-min {
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* by khawla 26 11 2020 */
.line-clamp12 {
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-min6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* by khawla 02 12 2020 */
.card-columns2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

/* by khawla 03 12 2020 */
.title-act {
    font-family: 'Nunito', sans-serif;
    margin-top: 0;
    margin-bottom: 10px;
    color: #171821;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.card-transp {
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 0px;
}


.line-clamp-min2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/******/



/*-------------------------------------------------------*/
/* Table of Content

1.General
  1.1.Typography
  1.2.Grid
2.Common Elements
3.Layout
4.Blog
5.About me
6.Contact
7.Navigation
8.Footer
9.Helper CLasses

/*-------------------------------------------------------*/
/*-------------------------------------------------------*/
/* General
/*-------------------------------------------------------*/
.clearfix {
    *zoom: 1;
}

    .clearfix:before, .clearfix:after {
        display: table;
        line-height: 0;
        content: "";
    }

    .clearfix:after {
        clear: both;
    }

.clear {
    clear: both;
}

.oh {
    overflow: hidden;
}

.relative {
    position: relative;
}

.white {
    color: #fff;
}

.left {
    float: left;
}

.right {
    float: right;
}

.bg-light {
    background-color: #f7f7f7;
}

.bg-dark {
    background-color: #171821;
}

.last {
    margin-bottom: 0 !important;
}

.img-fullwidth {
    width: 100%;
}

.uppercase {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.nocaps {
    text-transform: none;
    letter-spacing: 0;
}

::-moz-selection {
    color: #333;
    background: #fbedc4;
}

::-webkit-selection {
    color: #333;
    background: #fbedc4;
}

::selection {
    color: #333;
    background: #fbedc4;
}


/*-------------------------------------------------------*/
/* Preloader
/*-------------------------------------------------------*/
.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
}

.loader {
    display: block;
    position: absolute;
    font-size: 0;
    color: #2D95E3;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

    .loader > div {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 100%;
        display: inline-block;
        float: none;
        width: 38px;
        height: 38px;
        background: transparent;
        border-style: solid;
        border-width: 2px;
        border-right-color: transparent;
        border-left-color: transparent;
        -webkit-animation: ball-clip-rotate-pulse-rotate 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
        animation: ball-clip-rotate-pulse-rotate 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
    }

@-webkit-keyframes ball-clip-rotate-pulse-rotate {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes ball-clip-rotate-pulse-rotate {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0);
        transform: translate(-50%, -50%) rotate(0);
    }

    50% {
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
        transform: translate(-50%, -50%) rotate(180deg);
    }

    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes ball-clip-rotate-pulse-scale {
    0%, 100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }

    30% {
        opacity: .3;
        -webkit-transform: translate(-50%, -50%) scale(0.15);
        transform: translate(-50%, -50%) scale(0.15);
    }
}

@keyframes ball-clip-rotate-pulse-scale {
    0%, 100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }

    30% {
        opacity: .3;
        -webkit-transform: translate(-50%, -50%) scale(0.15);
        transform: translate(-50%, -50%) scale(0.15);
    }
}

/*-------------------------------------------------------*/
/* Typography
/*-------------------------------------------------------*/
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.styleh2 {
    font-family: 'Nunito', sans-serif;
    margin-top: 0;
    font-size: 26px;
    margin-bottom: 10px;
    color: #171821;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.styleah2 {
    color: inherit;
}
/* by khawla 07 12 2020 */

.stylehhh {
    font-family: 'Nunito', sans-serif;
    margin-top: 0;
    font-size: 26px;
    margin-bottom: 10px;
    color: #171821;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
}
.stylehhh {
    color: inherit;
}

@media only screen and (max-width: 575px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 19px;
    }

    h4 {
        font-size: 18px;
    }
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    color: inherit;
}


address {
    font-style: normal;
    margin-bottom: 0;
    font-size: 16px;
}

.lead {
    font-size: 18px;
    line-height: 30px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

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

@media only screen and (max-width: 1199px) {
    .text-lg-center {
        text-align: center;
    }
}

@media only screen and (max-width: 991px) {
    .text-md-center {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .text-sm-center {
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .text-xs-center {
        text-align: center;
    }
}

blockquote {
    /* by khawla 20 08 2024 */
    text-align: center;
    margin-bottom: 20px;
    margin-top: 20px;
    /*margin-bottom: 40px;
    margin-top: 40px;*/
}

    stylep {
        font-size: 32px;
        line-height: 1.3;
        margin-bottom: 0 !important;
        position: relative;
        color: #171821;
    }

    blockquote cite {
        font-size: 15px;
        font-weight: 400;
        color: #83858F;
    }

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #E3E4E8;
}

/*-------------------------------------------------------*/
/* Grid
/*-------------------------------------------------------*/
.section {
    margin-bottom: 40px;
}

@media (min-width: 1280px) {
    .container {
        max-width: 1248px;
    }
}

.container-semi-fluid {
    padding: 0 50px;
}

@media only screen and (max-width: 767px) {
    .container-semi-fluid {
        padding: 0 15px;
    }
}

/* Flexbox
-------------------------------------------------------*/
.flex-parent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-child {
    -webkit-box-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
}

/* Columns With No Gutters
-------------------------------------------------------*/
.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

    .no-gutters > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }

/* Row Gutters
-------------------------------------------------------*/
.row-2 {
    margin: 0 -1px;
}

    .row-2 > div,
    .row-2 > aside {
        padding: 0 1px;
    }

.row-8 {
    margin: 0 -4px;
}

    .row-8 > div,
    .row-8 > aside {
        padding: 0 4px;
    }

.row-10 {
    margin: 0 -5px;
}

    .row-10 > div,
    .row-10 > aside {
        padding: 0 5px;
    }

.row-16 {
    margin: 0 -8px;
}

    .row-16 > div,
    .row-16 > aside {
        padding: 0 8px;
    }

.row-20 {
    margin: 0 -10px;
}

    .row-20 > div,
    .row-20 > aside {
        padding: 0 10px;
    }

.row-24 {
    margin: 0 -12px;
}

    .row-24 > div,
    .row-24 > aside {
        padding: 0 12px;
    }

/*-------------------------------------------------------*/
/* Buttons
/*-------------------------------------------------------*/

.btn-lg, .btn-lg.btn-button {
    font-size: 14px;
    padding: 0 16px;
}

    .btn-lg span, .btn-lg.btn-button span {
        line-height: 46px;
    }

    .btn-lg.btn-button {
        height: 46px;
    }

.btn-sm, .btn-sm.btn-button {
    font-size: 11px;
    padding: 0 20px;
    line-height: 28px;
}

    .btn-sm.btn-button {
        height: 30px;
    }

.btn-color {
    background-color: #2D95E3;
}

    .btn-color:hover {
        opacity: .92;
    }

.btn-dark {
    background-color: #171821;
}

.btn-white {
    background-color: #fff;
    color: #171821;
}

.btn-light {
    background-color: #f7f7f7;
    color: #171821;
}

.btn-stroke {
    background-color: transparent;
    border: 1px solid #E3E4E8;
    color: #171821;
}

.btn-wide {
    width: 100%;
}

.btn-white:focus, .btn-light:focus, .btn-stroke:focus {
    background-color: #171821;
    border-color: transparent;
}

.btn i {
    font-size: 10px;
    position: relative;
    margin-left: 3px;
    top: -1px;
    line-height: 1;
}

.rounded,
.rounded:before {
    border-radius: 70px;
}

.section-buttons {
    margin-bottom: 50px;
}

    .section-buttons a {
        margin-bottom: 10px;
    }

/* Input Buttons
-------------------------------------------------------*/
.btn-button {
    border: none;
    margin-bottom: 0;
    width: auto;
}

    .btn-button.btn-color, .btn-button.btn-dark {
        color: #fff;
    }

    .btn-button.btn-wide {
        width: 100%;
    }

    .btn-button:hover, .btn-button:focus {
        color: #fff;
        background-color: #171821;
    }

/*-------------------------------------------------------*/
/* Form Elements
/*-------------------------------------------------------*/

textarea {
    height: 46px;
    border: 1px solid #E3E4E8;
    background-color: #fff;
    width: 100%;
    margin-bottom: 24px;
    padding: 0 12px;
    -webkit-transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

textarea {
    height: auto;
    display: block;
    padding: 8px 16px;
    margin-bottom: 24px;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

input[type=search] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input:focus,
textarea:focus {
    border-color: #2D95E3;
    background-color: #fff;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Change Color of Placeholders */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #54555E;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #54555E;
    opacity: 1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #54555E;
    opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #54555E;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-left: 12px;
    /* by khawla 31 12 2020 */
   /* background-image: url(../img/dropdown.png);*/
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

    select::-ms-expand {
        display: none;
    }

label {
    color: #171821;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 6px;
}


/*-------------------------------------------------------*/
/* Sliders
/*-------------------------------------------------------*/
/*! Flickity v2.1.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
    position: relative;
}

    .flickity-enabled:focus {
        outline: 0;
    }

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .flickity-enabled.is-draggable .flickity-viewport {
        cursor: move;
        cursor: -webkit-grab;
        cursor: grab;
    }

        .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
            cursor: -webkit-grabbing;
            cursor: grabbing;
        }

.flickity-button {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    border: none;
    color: #333;
}

    .flickity-button:hover {
        background: #fff;
        cursor: pointer;
    }

    .flickity-button:focus {
        outline: 0;
        -webkit-box-shadow: 0 0 0 5px #19f;
        box-shadow: 0 0 0 5px #19f;
    }

    .flickity-button:active {
        opacity: .6;
    }

    .flickity-button:disabled {
        opacity: .3;
        cursor: auto;
        pointer-events: none;
    }

.flickity-button-icon {
    fill: #333;
}

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .flickity-prev-next-button.previous {
        left: 10px;
    }

    .flickity-prev-next-button.next {
        right: 10px;
    }

.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
}

.flickity-rtl .flickity-page-dots {
    direction: rtl;
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: .25;
    cursor: pointer;
}

    .flickity-page-dots .dot.is-selected {
        opacity: 1;
    }

/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-carousel, .owl-carousel .owl-item {
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.owl-carousel {
    display: none;
    width: 100%;
    z-index: 1;
}

    .owl-carousel .owl-stage {
        position: relative;
        -ms-touch-action: pan-Y;
        -moz-backface-visibility: hidden;
    }

        .owl-carousel .owl-stage:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

    .owl-carousel .owl-stage-outer {
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }

    .owl-carousel .owl-item, .owl-carousel .owl-wrapper {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
    }

    .owl-carousel .owl-item {
        min-height: 1px;
        float: left;
        -webkit-backface-visibility: hidden;
        -webkit-touch-callout: none;
    }

        .owl-carousel .owl-item img {
            display: block;
            width: 100%;
        }

    .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
        display: none;
    }

    .no-js .owl-carousel, .owl-carousel.owl-loaded {
        display: block;
    }

    .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
        cursor: pointer;
        cursor: hand;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .owl-carousel.owl-loading {
        opacity: 0;
        display: block;
    }

    .owl-carousel.owl-hidden {
        opacity: 0;
    }

    .owl-carousel.owl-refresh .owl-item {
        visibility: hidden;
    }

    .owl-carousel.owl-drag .owl-item {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .owl-carousel.owl-grab {
        cursor: move;
        cursor: -webkit-grab;
        cursor: grab;
    }

    .owl-carousel.owl-rtl {
        direction: rtl;
    }

        .owl-carousel.owl-rtl .owl-item {
            float: right;
        }

    .owl-carousel .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .owl-carousel .owl-animated-in {
        z-index: 0;
    }

    .owl-carousel .owl-animated-out {
        z-index: 1;
    }

    .owl-carousel .fadeOut {
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.owl-height {
    -webkit-transition: height .5s ease-in-out;
    transition: height .5s ease-in-out;
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease;
}

.owl-carousel .owl-item img.owl-lazy {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000;
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: -webkit-transform .1s ease;
    transition: -webkit-transform .1s ease;
    transition: transform .1s ease;
    transition: transform .1s ease, -webkit-transform .1s ease;
}

    .owl-carousel .owl-video-play-icon:hover {
        -webkit-transform: scale(1.3, 1.3);
        transform: scale(1.3, 1.3);
    }

.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {
    display: none;
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease;
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.owl-prev, .owl-next {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -24px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 48px;
    z-index: 10;
    width: 48px;
    height: 48px;
    font-size: 14px;
    color: #171821;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .owl-prev:hover, .owl-next:hover {
        color: #fff;
        background-color: #2D95E3;
        border-color: transparent;
    }

.owl-prev {
    left: 10px;
}

.owl-next {
    right: 10px;
}

.owl-carousel:hover .owl-prev,
.owl-carousel:hover .owl-next {
    opacity: 1;
}

.owl-carousel--dark-arrows .owl-prev, .owl-carousel--dark-arrows .owl-next {
    color: #54555E;
}

.owl-carousel--visible-arrows .owl-prev, .owl-carousel--visible-arrows .owl-next {
    opacity: 1;
}

.owl-carousel--visible-arrows .owl-prev,
.owl-carousel--visible-arrows:hover .owl-prev {
    left: -60px;
}

.owl-carousel--visible-arrows .owl-next,
.owl-carousel--visible-arrows:hover .owl-next {
    right: -60px;
}

.owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    margin-top: 30px;
}

.owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

    .owl-dot span {
        width: 22px;
        height: 4px;
        margin: 3px;
        background: #fff;
        opacity: 0.4;
        display: block;
        -webkit-backface-visibility: visible;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .owl-dot.active span,
    .owl-dot:hover span {
        opacity: 1;
        background-color: #2D95E3;
    }

.owl-carousel--dots-inside .owl-dots {
    position: absolute;
    bottom: 20px;
    margin-top: 0;
    width: 100%;
}

.owl-carousel--arrows-outside .owl-prev,
.owl-carousel--arrows-outside .owl-next {
    opacity: 1;
    top: -62px;
    margin-top: 0;
    padding: 0;
    width: 28px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #E3E4E8;
    font-size: 12px;
    border-radius: 0;
}

    .owl-carousel--arrows-outside .owl-prev:hover,
    .owl-carousel--arrows-outside .owl-next:hover {
        border-color: transparent;
    }

.owl-carousel--arrows-outside .owl-prev {
    right: 32px;
    left: auto;
}

.owl-carousel--arrows-outside .owl-next {
    right: 0;
}

.owl-custom-nav {
    margin-top: 24px;
}

.owl-custom-nav__btn {
    text-transform: uppercase;
    font-size: 10px;
    border-radius: 5px;
    border: 1px solid #E3E4E8;
    padding: 0 5px;
    line-height: 26px;
    background-color: transparent;
}

    .owl-custom-nav__btn:hover {
        background-color: #2D95E3;
        color: #fff;
        border-color: transparent;
    }

    .owl-custom-nav__btn:focus {
        outline: none;
    }

    .owl-custom-nav__btn i {
        font-size: 8px;
        margin: 0 3px;
        position: relative;
        top: -1px;
    }

/*-------------------------------------------------------*/
/* Magnific Pupop
/*-------------------------------------------------------*/
.mfp-bg, .mfp-wrap {
    position: fixed;
    left: 0;
    top: 0;
}

.mfp-bg, .mfp-container, .mfp-wrap {
    height: 100%;
    width: 100%;
}

    .mfp-arrow:after, .mfp-arrow:before, .mfp-container:before, .mfp-figure:after {
        content: '';
    }

.mfp-bg {
    z-index: 1042;
    overflow: hidden;
    background: #0b0b0b;
    opacity: .8;
}

.mfp-wrap {
    z-index: 1043;
    outline: 0 !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .mfp-container:before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-ajax-holder .mfp-content, .mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-arrow, .mfp-close, .mfp-counter, .mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

    .mfp-preloader a {
        color: #CCC;
    }

        .mfp-close, .mfp-preloader a:hover {
            color: #FFF;
        }

.mfp-s-error .mfp-content, .mfp-s-ready .mfp-preloader {
    display: none;
}

button.mfp-arrow, button.mfp-close {
    overflow: visible;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: 0;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.mfp-figure:after, .mfp-iframe-scaler iframe {
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: .65;
    padding: 0 0 18px 10px;
    font-style: normal;
    font-size: 28px;
    font-family: Arial,Baskerville,monospace;
}

    .mfp-close:focus, .mfp-close:hover {
        opacity: 1;
    }

    .mfp-close:active {
        top: 1px;
    }

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-figure, img.mfp-img {
    line-height: 0;
}

.mfp-arrow {
    position: absolute;
    opacity: .65;
    margin: -55px 0 0;
    top: 50%;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

    .mfp-arrow:active {
        margin-top: -54px;
    }

    .mfp-arrow:focus, .mfp-arrow:hover {
        opacity: 1;
    }

    .mfp-arrow:after, .mfp-arrow:before {
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        left: 0;
        top: 0;
        margin-top: 35px;
        margin-left: 35px;
        border: inset transparent;
    }

    .mfp-arrow:after {
        border-top-width: 13px;
        border-bottom-width: 13px;
        top: 8px;
    }

    .mfp-arrow:before {
        border-top-width: 21px;
        border-bottom-width: 21px;
        opacity: .7;
    }

.mfp-arrow-left {
    left: 0;
}

    .mfp-arrow-left:after {
        border-right: 17px solid #FFF;
        margin-left: 31px;
    }

    .mfp-arrow-left:before {
        margin-left: 25px;
        border-right: 27px solid #3F3F3F;
    }

.mfp-arrow-right {
    right: 0;
}

    .mfp-arrow-right:after {
        border-left: 17px solid #FFF;
        margin-left: 39px;
    }

    .mfp-arrow-right:before {
        border-left: 27px solid #3F3F3F;
    }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

    .mfp-iframe-holder .mfp-content {
        line-height: 0;
        width: 100%;
        max-width: 900px;
    }

.mfp-image-holder .mfp-content, img.mfp-img {
    max-width: 100%;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

    .mfp-iframe-scaler iframe {
        display: block;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
    }

.mfp-figure:after, img.mfp-img {
    width: auto;
    height: auto;
    display: block;
}

img.mfp-img {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0;
    margin: 0 auto;
}

.mfp-figure:after {
    top: 40px;
    bottom: 40px;
    right: 0;
    z-index: -1;
    background: #444;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .mfp-img-mobile .mfp-bottom-bar:empty {
            padding: 0;
        }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/*-------------------------------------------------------*/
/* Tables
/*-------------------------------------------------------*/
.table-wrap {
    margin-bottom: 34px;
}

/*-------------------------------------------------------*/
/* Tabs
/*-------------------------------------------------------*/
.tabs__list {
    margin-bottom: -1px;
    overflow: hidden;
}

.tabs__item {
    position: relative;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 700;
    color: #171821;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .tabs__item:not(:first-child) {
        margin-left: -1px;
    }

@media only screen and (max-width: 575px) {
    .tabs__item {
        display: block;
        margin-right: 0;
    }
}

.tabs__url {
    display: block;
    position: relative;
    padding: 12px 18px 11px;
    border: 1px solid #E3E4E8;
    color: #171821;
    -webkit-transition: background-color 0.1s ease-in-out;
    transition: background-color 0.1s ease-in-out;
}

    .tabs__url:focus {
        color: inherit;
    }

    .tabs__url:hover {
        background-color: white;
    }

.tabs__item--active:before {
    content: '';
    height: 2px;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #2D95E3;
}

.tabs__item--active .tabs__url {
    color: #171821;
    background-color: #fff;
    border-bottom: 1px solid transparent;
}

.tabs__content {
    border: 0px solid #E3E4E8;
    overflow: hidden;
}

.tabs__content-pane {
    display: none;
}

.tabs__content-pane--active {
    display: block;
}

/*-------------------------------------------------------*/
/* Social Icons
/*-------------------------------------------------------*/
.socials {
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.socials--nobase a {
    width: 13px;
    height: auto;
    border: 0;
    line-height: 32px;
    margin-right: 15px;
    margin-bottom: 0;
    color: #54555E;
    background-color: transparent;
}

    .socials--nobase a:hover, .socials--nobase a:focus {
        color: #fff;
        background-color: transparent !important;
    }

.socials--white-base a {
    background-color: #fff;
    color: #171821;
}

.socials--dark .social-facebook:hover,
.socials--dark .social-facebook:focus {
    color: #39599f !important;
}

.socials--dark .social-twitter:hover,
.socials--dark .social-twitter:focus {
    color: #55ACEE !important;
}

.socials--dark .social-google-plus:hover,
.socials--dark .social-google-plus:focus {
    color: #DE4B39 !important;
}

.socials--dark .social-youtube:hover,
.socials--dark .social-youtube:focus {
    color: #c61d23 !important;
}

.socials--dark .social-snapchat:hover,
.socials--dark .social-snapchat:focus {
    color: #fffb01 !important;
}

.socials--dark .social-linkedin:hover,
.socials--dark .social-linkedin:focus {
    color: #0e76a8 !important;
}

.socials--dark .social-pinterest:hover,
.socials--dark .social-pinterest:focus {
    color: #c8232c !important;
}

.socials--dark .social-instagram:hover,
.socials--dark .social-instagram:focus {
    color: #e1306c !important;
}

.socials--dark .social-rss:hover,
.socials--dark .social-rss:focus {
    color: #ef822a !important;
}

.socials--grey a {
    background-color: #f7f7f7;
    color: #171821;
}

.socials--medium a {
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 16px;
}

.socials--large a {
    height: 46px;
    width: 46px;
    line-height: 46px;
    font-size: 16px;
}

.socials--wide a {
    width: 100%;
    padding: 0 15px;
    margin: 0;
    margin-bottom: 16px;
}

.socials--rounded a {
    border-radius: 50% !important;
}

.social {
    display: inline-block;
    line-height: 32px;
    width: 32px;
    height: 32px;
    color: #fff;
    text-align: center;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    -webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

    .social:hover, .social:focus {
        color: #fff;
    }

    .social:last-child {
        margin-right: 0;
    }

.social__text {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media only screen and (max-width: 1199px) {
    .social__text {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .social__text {
        display: inline-block;
    }
}

@media only screen and (max-width: 575px) {
    .social__text {
        display: none;
    }
}

.social-facebook {
    background-color: #39599f;
}

    .social-facebook:hover {
        background-color: #324e8c !important;
        color: #fff !important;
    }

.social-twitter {
    background-color: #55ACEE;
}

    .social-twitter:hover {
        background-color: #3ea1ec !important;
        color: #fff !important;
    }

.social-google-plus {
    background-color: #DE4B39;
}

    .social-google-plus:hover {
        background-color: #d93824 !important;
        color: #fff !important;
    }

.social-youtube {
    background-color: #c61d23;
}

    .social-youtube:hover {
        background-color: #b01a1f !important;
        color: #fff !important;
    }

.social-snapchat {
    background-color: #fffb01;
}

    .social-snapchat:hover {
        background-color: #e7e300 !important;
        color: #fff !important;
    }

.social-linkedin {
    background-color: #0e76a8;
}

    .social-linkedin:hover {
        background-color: #0c6590 !important;
        color: #fff !important;
    }

.social-pinterest {
    background-color: #c8232c;
}

    .social-pinterest:hover {
        background-color: #b21f27 !important;
        color: #fff !important;
    }

.social-instagram {
    background-color: #e1306c;
}

    .social-instagram:hover {
        background-color: #d81f5e !important;
        color: #fff !important;
    }

.social-rss {
    background-color: #ef822a;
}

    .social-rss:hover {
        background-color: #ed7412 !important;
        color: #fff !important;
    }

/*-------------------------------------------------------*/
/* Main Entry Styles
/*-------------------------------------------------------*/
.entry {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.entry__img-holder {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.entry__img {
    width: 100%;
}



/* by khawla 24 07 2020 */
    /* by khawla 08 12 2020 */

    .entry__img figure {
        width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

    .entry__img iframe {
        width: 100%; /* les images seront limitées à la largeur de leur parent */
    }



.entry__title {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 3px;
    margin-bottom: 5px;
}

    .entry__title:hover a {
        color: #2D95E3;
    }


.entry__title--sm {
    font-size: 15px;
}

.entry__excerpt {
    margin-top: 16px;
}

    .entry__excerpt p {
        margin-bottom: 0;
    }

.entry__play-time {
    position: absolute;
    bottom: 32px;
    left: 32px;
    background-color: #2D95E3;
    color: #fff;
    padding: 7px 11px;
    font-weight: 700;
    pointer-events: none;
}

    .entry__play-time i {
        margin-right: 5px;
    }

/* Meta
-------------------------------------------------------*/
.entry__meta li {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #83858F;
}

    .entry__meta li:after {
        content: '-';
        display: inline-block;
        margin: 0 3px;
    }

    .entry__meta li.entry__meta-views:after {
        content: '';
        margin: 0 8px;
        display: inline-block;
    }

    .entry__meta li:last-child:after {
        display: none;
    }

.entry__meta a {
    color: #2D95E3;
}

    .entry__meta a:hover {
        color: #171821;
    }

.entry__meta i {
    display: inline-block;
    margin-right: 5px;
}

.entry__meta-category {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 700;
    color: #0098d0;
}

.entry__meta-category--label {
    font-size: 10px;
    background-color: #2D95E3;
    padding: 5px 10px;
    z-index: 2;
    color: #fff;
    margin-bottom: 0;
    display: inline-block;
}

    .entry__meta-category--label:hover, .entry__meta-category--label:focus {
        color: #fff;
        opacity: 0.90;
    }

.entry__meta-category--align-in-corner {
    position: absolute;
    left: 16px;
    bottom: 16px;
}

.entry__meta-category--violet {
    background-color: #3E3EDD;
}

.entry__meta-category--purple {
    background-color: #9C27B0;
}

.entry__meta-category--blue {
    background-color: #0E79C9;
}

.entry__meta-category--cyan {
    background-color: #00BCD4;
}

.entry__meta-category--green {
    background-color: #19C22A;
}

.entry__meta-category--orange {
    background-color: #E65100;
}

.entry__meta-category--red {
    background-color: #F44336;
}

.entry__meta-rating i {
    font-size: 16px;
    color: #FBC02D;
    margin-right: 2px;
}

.entry__meta + .entry__meta,
.entry__meta-category--label + .entry__meta {
    margin-top: 16px;
}

.entry__meta + .entry__img-holder {
    margin-top: 20px;
}

.entry__meta-holder {
    margin-top: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

    .entry__meta-holder .entry__meta {
        margin-top: 0;
    }

.entry-date-label {
    background-color: #fff;
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 8px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
}

.entry-date-label__weekday, .entry-date-label__month {
    font-size: 8px;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 600;
}

.entry-date-label__weekday {
    color: #54555E;
}

.entry-date-label__day {
    color: #2D95E3;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.25;
}

.entry-date-label__month {
    color: #2D95E3;
}

/*-------------------------------------------------------*/
/* Post Thumbs
/*-------------------------------------------------------*/
.thumb-container {
    background-color: #f7f7f7;
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .thumb-container img  {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .thumb-container figure {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }



.footer--dark .thumb-container {
    background-color: #171821;
}

.thumb-text-holder {
    position: absolute;
    bottom: 24px;
    width: 100%;
    z-index: 3;
    padding: 0 24px;
    text-align: center;
}

    .thumb-text-holder .entry__meta li,
    .thumb-text-holder .entry__meta a,
    .thumb-text-holder .entry__meta a:hover,
    .thumb-text-holder .entry__meta a:focus {
        color: #fff !important;
    }

.thumb-text-holder--1 {
    text-align: left;
}

    .thumb-text-holder--1 .thumb-entry-title {
        font-size: 18px;
        margin-bottom: 24px;
    }

.thumb-text-holder--2 {
    text-align: left;
}

    .thumb-text-holder--2 .thumb-entry-title {
        font-size: 34px;
        margin-top: 14px;
        margin-bottom: 8px;
    }

@media only screen and (max-width: 767px) {
    .thumb-text-holder--2 .thumb-entry-title {
        font-size: 20px;
    }
}

.thumb-text-holder--2 .entry__meta a {
    color: #fff !important;
}

.thumb-text-holder--3 {
    text-align: left;
}

    .thumb-text-holder--3 .thumb-entry-title {
        font-size: 28px;
        margin-top: 16px;
    }

@media only screen and (max-width: 767px) {
    .thumb-text-holder--3 .thumb-entry-title {
        font-size: 20px;
    }
}

.thumb-text-holder--4 {
    text-align: left;
}

    .thumb-text-holder--4 .thumb-entry-title {
        font-size: 16px;
    }

.thumb-text-holder--5 {
    text-align: center;
    top: 50%;
    left: 50%;
    bottom: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .thumb-text-holder--5 .thumb-entry-title {
        font-size: 40px;
        max-width: 770px;
        margin: 8px auto;
    }

@media only screen and (max-width: 767px) {
    .thumb-text-holder--5 .thumb-entry-title {
        font-size: 20px;
    }
}

.thumb {
    margin-bottom: 48px;
}

.thumb--mb-20 {
    margin-bottom: 20px;
}

.thumb--size-1 {
    height: 197px;
}

.thumb--size-2 {
    height: 298px;
}

.thumb--size-3 {
    height: 460px;
}

.thumb--size-4 {
    height: 395px;
}

.thumb--size-5 {
    height: 521px;
}

.thumb--size-6 {
    height: 609px;
}

@media only screen and (max-width: 991px) {
    .thumb--size-6 {
        height: 440px;
    }
}

@media only screen and (max-width: 767px) {
    .thumb--size-3, .thumb--size-4, .thumb--size-5, .thumb--size-6 {
        height: 300px;
    }
}

.thumb__img-holder {
    height: 100%;
    margin-bottom: 0;
}

.thumb-url {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.thumb-entry-title {
    color: #fff;
    font-size: 15px;
    margin-bottom: 0;
}

    .thumb-entry-title:hover a,
    .thumb-entry-title a:focus {
        color: #fff;
    }

.thumb-50 {
    padding-bottom: 50%;
}

.thumb-60 {
    padding-bottom: 60%;
}

.thumb-65 {
    padding-bottom: 65%;
}

.thumb-70 {
    padding-bottom: 70%;
}

.thumb-75 {
    padding-bottom: 75%;
}

.thumb-80 {
    padding-bottom: 80%;
}

.thumb-100 {
    padding-bottom: 100%;
}

/*-------------------------------------------------------*/
/* Trending Now
/*-------------------------------------------------------*/
.trending-now {
    background-color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 24px;
    height: 36px;
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.trending-now__label {
    background-color: #2D95E3;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 700;
    display: inline-block;
    color: #fff;
    padding: 0 16px;
    line-height: 36px;
    height: 36px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
    float: left;
}

.trending-now__text {
    margin-left: 5px;
}

.trending-now--1 {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 0;
}

    .trending-now--1 .newsticker {
        border: 1px solid #E3E4E8;
    }

.newsticker {
    padding-right: 80px;
    padding-left: 20px;
    overflow: hidden;
}

.newsticker__item {
    line-height: 36px;
    white-space: nowrap;
}

.newsticker__item-url {
    color: #54555E;
}

    .newsticker__item-url:hover {
        color: #2D95E3;
    }

.newsticker-buttons {
    position: absolute;
    top: 0;
    right: 0;
}

.newsticker-button {
    background-color: transparent;
    float: left;
    padding: 0;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 12px;
    color: #54555E;
    border: none;
}

    .newsticker-button:first-child {
        border-right: 1px solid #E3E4E8;
    }

    .newsticker-button:focus {
        outline: none;
    }

    .newsticker-button:hover {
        background-color: #2D95E3;
        color: #fff;
        border-color: transparent;
    }

/*-------------------------------------------------------*/
/* Featured Posts Grid
/*-------------------------------------------------------*/
.featured-posts-grid {
    padding-bottom: 24px;
    padding-top: 24px;
    overflow: hidden;
}

.featured-posts-grid__item {
    padding-bottom: 8px;
}

.featured-posts-grid__item--sm {
    height: 33.333%;
}

    .featured-posts-grid__item--sm .entry__title {
        font-size: 16px;
    }

@media only screen and (min-width: 992px) {
    .featured-posts-grid__item--sm:first-child .post-list__img-holder, .featured-posts-grid__item--sm:last-child .post-list__img-holder {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
}

.featured-posts-grid__entry {
    height: 100%;
    margin-bottom: 0 !important;
    min-height: auto !important;
}

.featured-posts-grid__item--lg {
    height: 100%;
}

    .featured-posts-grid__item--lg .thumb-text-holder {
        bottom: 60px;
        padding: 0 50px;
    }

    .featured-posts-grid__item--lg .entry__title {
        font-size: 32px;
        line-height: 1.3;
    }

@media only screen and (max-width: 767px) {
    .featured-posts-grid__item--lg .entry__title {
        font-size: 20px;
    }
}

.featured-posts-grid--1 {
    padding-bottom: 32px;
}

    .featured-posts-grid--1 .row {
        margin: 0 -1px;
    }

        .featured-posts-grid--1 .row > div {
            padding: 0 1px;
        }

    .featured-posts-grid--1 .thumb {
        margin-bottom: 2px;
    }

/*-------------------------------------------------------*/
/* Hero
/*-------------------------------------------------------*/
.hero {
    background-color: #fff;
}

@media only screen and (min-width: 1200px) {
    .hero__item .entry {
        overflow: visible;
        margin-bottom: 42px;
    }

    .hero__item .entry__body {
        -webkit-transform: translate(100%, -100%);
        transform: translate(100%, -100%);
        padding: 24px;
        background: #fff;
        position: absolute;
        right: 0;
        left: 50px;
        z-index: 1;
        max-width: 83%;
        min-height: 210px;
        margin-top: -20px;
    }
}

.hero__item .entry__title {
    font-size: 28px;
}

/*-------------------------------------------------------*/
/* Hero Slider (Games)
/*-------------------------------------------------------*/
.hero-slider {
    margin-top: 8px;
    margin-bottom: 40px;
}

.hero-slider__item .thumb {
    height: 537px;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .hero-slider__item .thumb {
        height: 460px;
    }
}

@media only screen and (max-width: 575px) {
    .hero-slider__item .thumb {
        height: 320px;
    }
}

/*-------------------------------------------------------*/
/* Hero Slider 1 (Music)
/*-------------------------------------------------------*/
.hero-slider-1 {
    position: relative;
}

.hero-slider-1__item {
    width: 100%;
    height: 75vh;
}

@media only screen and (max-width: 767px) {
    .hero-slider-1__item {
        height: 360px;
    }
}

.hero-slider-1__entry {
    height: 100%;
    margin: 0 !important;
}

.hero-slider-1__thumb-img-holder {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .hero-slider-1__thumb-img-holder .bottom-gradient {
        background: #171821;
        /* Old browsers */
        /* FF3.6+ */
        /* Chrome,Safari4+ */
        /* Chrome10+,Safari5.1+ */
        /* Opera 11.10+ */
        /* IE10+ */
        background: -webkit-gradient(linear, left bottom, left top, from(#171821), to(transparent));
        background: linear-gradient(to top, #171821 0%, transparent 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
        /* IE6-9 */
    }

.hero-slider-1__thumb-text-holder {
    top: 50%;
    position: absolute;
    width: 100%;
    z-index: 3;
}

@media only screen and (max-width: 767px) {
    .hero-slider-1__thumb-text-holder {
        top: 30%;
    }
}

.hero-slider-1__entry-title {
    color: #fff;
    font-size: 40px;
    max-width: 594px;
}

    .hero-slider-1__entry-title:hover a,
    .hero-slider-1__entry-title:focus a {
        color: #fff;
    }

@media only screen and (max-width: 767px) {
    .hero-slider-1__entry-title {
        font-size: 24px;
    }
}

/* Fade CSS */
.carousel-main .flickity-slider {
    -webkit-transform: none !important;
    transform: none !important;
}

.carousel-main .carousel-cell {
    left: 0 !important;
    opacity: 0;
    -webkit-transition: opacity 0.7s ease-in-out;
    transition: opacity 0.7s ease-in-out;
    z-index: -1;
}

    .carousel-main .carousel-cell.is-selected {
        opacity: 1;
        z-index: 0;
    }

/*-------------------------------------------------------*/
/* Hero Slider Thumbs
/*-------------------------------------------------------*/
.carousel-thumbs {
    max-width: 594px;
    margin: auto;
    background-color: #fff;
    padding: 5px;
}

.carousel-thumbs-holder {
    position: absolute;
    bottom: 0;
    width: 100%;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}

.carousel-thumbs__item {
    cursor: pointer;
    padding: 5px;
    opacity: .3;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.carousel-thumbs .carousel-cell {
    width: 25%;
}

    .carousel-thumbs .carousel-cell.is-selected .carousel-thumbs__item {
        opacity: 1;
    }

/*-------------------------------------------------------*/
/* Content
/*-------------------------------------------------------*/
.title-wrap {
    position: relative;
    overflow: hidden;
    margin-bottom: 32px;
}

.title-wrap--line {
    border-top: 3px solid #888994;
    padding-top: 32px;
}

.title-wrap--pr {
    padding-right: 62px;
}

.section-title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
    font-size: 21px;
    display: inline-block;
    float: left;
    font-weight: 700;
}

.section-title--sm {
    font-size: 18px;
}

@media only screen and (max-width: 767px) {
    .section-title {
        float: none;
    }
}

.all-posts-url {
    float: right;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: "Montserrat", sans-serif;
    color: #54555E;
    font-size: 11px;
    line-height: 28px;
}

.content-box {
    background-color: #fff;
    padding: 40px;
}

@media only screen and (min-width: 992px) {
    .content-box--top-offset {
        margin-top: -232px;
    }
}

@media only screen and (max-width: 575px) {
    .content-box {
        padding: 24px;
    }
}

.content-box--pt-108 {
    padding-top: 108px;
}

@media only screen and (max-width: 575px) {
    .content-box--pt-108 {
        padding-top: 60px;
    }
}

/* Tab Post
-------------------------------------------------------*/
.tab-post__tabs {
    float: right;
    line-height: 27px;
}

@media only screen and (max-width: 767px) {
    .tab-post__tabs {
        float: none;
        width: 100%;
        margin-top: 10px;
    }
}

.tab-post__tabs .tabs__item {
    margin-right: 26px;
}

    .tab-post__tabs .tabs__item a {
        color: #54555E;
    }

        .tab-post__tabs .tabs__item a:hover, .tab-post__tabs .tabs__item a:focus {
            color: #2D95E3;
        }

    .tab-post__tabs .tabs__item:last-child {
        margin-right: 0;
    }

.tab-post__tabs .tabs__item--active a {
    color: #2D95E3;
}

.tab-post__tabs .tabs__item--active:before {
    display: none;
}

.tab-post .tabs__content {
    padding: 0;
    border: 0;
}

.tab-post .entry {
    margin-bottom: 20px;
}

/* Card
-------------------------------------------------------*/
.card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
   /* by khawla 19 12 2020 */
   /* overflow: hidden; */
}

.card-row > div {
    margin-bottom: 30px;
}

.card-row .card {
    height: 100%;
    margin-bottom: 0;
}

.card__img-holder {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

.card__body {
    background-color: #fff;
    padding: 24px 32px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.card--1 .entry__title {
    margin-bottom: 32px;
}

/* Post List
-------------------------------------------------------*/
.post-list {
    position: relative;
    margin-bottom: 20px;
    min-height: 241px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

    .post-list:last-child {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

.post-list__img-holder {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    margin-right: 30px;
    margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
    .post-list__img-holder {
        width: 170px;
    }
}

.post-list__body {
    overflow: hidden;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

@media only screen and (max-width: 575px) {
    .post-list {
        display: block;
    }

    .post-list__img-holder, .post-list__body {
        width: 100%;
    }

    .post-list__img-holder {
        float: none;
        margin-right: 0;
        margin-bottom: 30px;
        height: 180px;
    }
}

/* Post List Small
-------------------------------------------------------*/
.post-list-small__item {
    padding: 16px 0;
    position: relative;
}

    .post-list-small__item:first-child {
        padding-top: 0;
    }

    .post-list-small__item:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

.post-list-small__img-holder {
    width: 88px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

@media only screen and (max-width: 575px) {
    .post-list-small__img-holder {
        width: 50px;
    }
}

.post-list-small__img--rounded {
    border-radius: 50%;
    overflow: hidden;
}

.post-list-small__body {
    overflow: hidden;
}

.post-list-small__entry-title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 5px;
    margin-top: 5px;
}

    .post-list-small__entry-title a {
        color: #171821;
    }

        .post-list-small__entry-title a:hover, .post-list-small__entry-title a:focus {
            color: #2D95E3;
        }

.post-list-small--border-top {
    border-top: 1px solid #E3E4E8;
    padding-top: 16px;
    margin-top: -10px;
}

.post-list-small--dividers li {
    border-bottom: 1px solid #E3E4E8;
}

.post-list-small--arrows {
    position: relative;
}

    .post-list-small--arrows li {
        padding-left: 16px;
    }

        .post-list-small--arrows li:before {
            content: '\e804';
            font-family: 'ui-icons';
            color: #2D95E3;
            position: absolute;
            left: 0;
            top: 22px;
            font-size: 10px;
        }

        .post-list-small--arrows li:first-child:before {
            top: 6px;
        }

.post-list-small--1 .post-list-small__item {
    border-bottom: 1px solid #E3E4E8;
}

    .post-list-small--1 .post-list-small__item:last-child {
        border-bottom: 0;
    }

.post-list-small--1 .post-list-small__img-holder {
    border-radius: 0;
    width: 78px;
}

.post-list-small--1 .post-list-small__entry-title {
    margin: 0;
}

.post-list-small--2 .post-list-small__img-holder {
    border-radius: 0;
    width: 130px;
}

.post-list-small--2 .post-list-small__entry-title {
    font-size: 16px;
}

.post-list-small--3 {
    margin-bottom: 48px;
}

    .post-list-small--3 .post-list-small__item {
        border-bottom: 1px solid #E3E4E8;
        padding: 24px 0;
    }

        .post-list-small--3 .post-list-small__item:first-child {
            border-top: 1px solid #E3E4E8;
        }

        .post-list-small--3 .post-list-small__item:last-child {
            padding-bottom: 24px;
        }

    .post-list-small--3 .post-list-small__img-holder {
        border-radius: 0;
        width: 84px;
    }

    .post-list-small--3 .post-list-small__entry-title {
        margin-top: 0;
        font-size: 16px;
        font-weight: 500;
        color: #54555E;
    }

/* Video Playlist
-------------------------------------------------------*/
.video-playlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.video-playlist__content {
    width: 68%;
}

    .video-playlist__content > div {
        height: 100%;
    }

.video-playlist__list {
    width: 32%;
    background-color: #fff;
    border: 1px solid #E3E4E8;
}

.video-playlist__list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    line-height: 1;
    padding: 16px 14px;
    border-bottom: 1px solid #E3E4E8;
}

    .video-playlist__list-item:last-child {
        border-bottom: 0;
    }

    .video-playlist__list-item:hover .video-playlist__list-item-title {
        color: #2D95E3;
    }

.video-playlist__list-item--active .video-playlist__list-item-title {
    color: #2D95E3;
}

.video-playlist__list-item-thumb {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 81px;
    flex: 0 0 81px;
    margin-right: 13px;
}

.video-playlist__list-item-description {
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
}

.video-playlist__list-item-title {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1.3;
}

@media only screen and (max-width: 991px) {
    .video-playlist {
        display: block;
    }

    .video-playlist__list, .video-playlist__content {
        width: 100%;
    }
}

/* Entry Score
-------------------------------------------------------*/
.entry-score {
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: #2D95E3;
    width: 34px;
    height: 34px;
    line-height: 32px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}

.entry__img-holder .entry-score {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

/* Play Btn
-------------------------------------------------------*/
.play-btn {
    display: inline-block;
    position: absolute;
    z-index: 3;
    pointer-events: none;
    width: 48px;
    height: 48px;
    border: 3px solid #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .play-btn:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        margin: -7px 0 0 -4px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 7px 0 7px 10px;
        border-color: transparent transparent transparent #fff;
    }


/*-------------------------------------------------------*/
/* Widgets
/*-------------------------------------------------------*/
.widget-title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
    font-weight: 700;
}

.widget .entry:last-child {
    margin-bottom: 0;
}

.widget .sub-menu {
    padding-left: 15px;
    padding-top: 5px;
}

    .widget .sub-menu li {
        padding: 5px 0 !important;
    }

.widget .children {
    padding-top: 10px;
    padding-left: 15px;
    margin-top: 10px;
}

/* Widget Ad
-------------------------------------------------------*/
.widget_media_image {
    text-align: center;
    padding: 0 !important;
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Widget Search
-------------------------------------------------------*/
.widget-search-button,
.search-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    line-height: 46px;
    padding: 0 !important;
    border: 0;
    vertical-align: middle;
}

    .widget-search-button i,
    .search-button i {
        font-size: 18px;
        margin: 0;
        top: 3px;
    }

.search-form {
    position: relative;
}


/* Widget Socials
-------------------------------------------------------*/
.widget-socials .socials {
    display: block;
}

/* Widget Review Posts
-------------------------------------------------------*/
.widget-rating-posts .entry__title {
    font-size: 15px;
}

.widget-rating-posts .post-list-small--2 .post-list-small__entry-title {
    font-size: 14px;
}

/* Widget Latest Videos
-------------------------------------------------------*/
.widget-latest-videos .entry__title {
    font-size: 15px;
}

/* Widget Instagram
-------------------------------------------------------*/
.widget-instagram-wide {
    padding-top: 48px;
    background-color: #fff;
}

.widget-instagram-wide__title {
    margin-bottom: 32px;
}

.widget-instagram-wide__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.widget-instagram__list {
    margin-left: -24px;
}

.widget-instagram li {
    padding: 0 0 24px 24px;
    float: left;
    width: 33.3333%;
}

/* Widget Logo
-------------------------------------------------------*/
.widget-logo .copyright {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Widget Twitter
-------------------------------------------------------*/
.tweet {
    word-wrap: break-word;
    margin-bottom: 5px;
}

#tweets li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 18px;
}

    #tweets li:last-child {
        margin-bottom: 0;
    }

    #tweets li:before {
        content: '\f099';
        font-family: 'ui-icons';
        color: #1DA1F2;
        font-size: 14px;
        position: absolute;
        left: 0;
        top: 3px;
    }

.timePosted {
    font-size: 12px !important;
    color: #83858F;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Widget Tags / Entry Tags
-------------------------------------------------------*/
.widget_tag_cloud a,
.entry__tags a {
    padding: 6px 10px;
    line-height: 1;
    margin: 0 8px 8px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #f7f7f7;
    font-family: "Source Sans Pro", sans-serif;
    color: #54555E;
    display: inline-block;
    float: left;
}

    .widget_tag_cloud a:hover,
    .entry__tags a:hover {
        background-color: #2D95E3 !important;
        border-color: transparent;
        color: #fff !important;
    }

.tagcloud {
    overflow: hidden;
}

/*-------------------------------------------------------*/
/* Breadcrumbs
/*-------------------------------------------------------*/
.breadcrumbs {
    margin-top: 24px;
    margin-bottom: 24px;
}

.breadcrumbs__item {
    display: inline-block;
    font-size: 14px;
}

    .breadcrumbs__item:last-child:after {
        display: none;
    }

    .breadcrumbs__item i {
        font-size: 14px;
    }

    .breadcrumbs__item:after {
        content: '\e804';
        font-family: 'ui-icons';
        display: inline-block;
        position: relative;
        top: -1px;
        font-size: 9px;
        margin: 0 6px;
    }

.breadcrumbs__url {
    color: #83858F;
}

/*-------------------------------------------------------*/
/* Single Post
/*-------------------------------------------------------*/
.single-post__entry-header {
    margin-bottom: 24px;
}

.single-post__entry-title {
    font-size: 36px;
    margin-top: 12px;
    margin-bottom: 5px;
}

@media only screen and (max-width: 767px) {
    .single-post__entry-title {
        font-size: 24px;
    }
}

.single-post__thumb-entry-title {
    max-width: 570px;
}

.entry__article-wrap {
    margin-top: 40px;
    margin-bottom: 40px;
}

@media only screen and (min-width: 992px) {
    .entry__article-wrap .entry__article {
        padding-left: 30px;
    }

    .entry__article-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

.entry__article > h1,
.entry__article > h2,
.entry__article > h3,
.entry__article > h4,
.entry__article > h5,
.entry__article > h6 {
    margin-top: 36px;
}

.entry__article > p {
    margin-bottom: 34px;
    font-size: 18px;
    line-height: 30px;
}

.entry__article p > a {
    text-decoration: underline;
}

.entry__article figure {
    margin-bottom: 24px;
}

.entry__article ol, .entry__article ul {
    padding-left: 24px;
    line-height: 26px;
}

.entry__article ul {
    list-style: disc;
}

figure {
    margin: 0;
}

figcaption {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 12px;
    font-style: italic;
    margin-top: 10px;
    color: #83858F;
}

.entry__share {
    margin-bottom: 16px;
}

/* Final Review
/*-------------------------------------------------------*/
.final-review {
    background-color: #171821;
    margin-bottom: 48px;
    background-position: center;
    background-repear: no-repeat;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.final-review__score {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.final-review__score-number {
    background-color: #2D95E3;
    border: 5px solid #fff;
    font-size: 36px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    width: 100px;
    height: 100px;
    line-height: 90px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
}

.final-review__text-holder {
    padding: 48px 40px;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 50%;
    flex: 1 0 50%;
    position: relative;
}

    .final-review__text-holder:before {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        width: 100%;
        background-color: #2D95E3;
        opacity: .8;
    }

.final-review__title, .final-review__text {
    color: #fff !important;
    position: relative;
    z-index: 1;
}

.final-review__title {
    font-size: 36px;
}

@media only screen and (max-width: 767px) {
    .final-review {
        display: block;
    }

    .final-review__score {
        padding: 48px 0;
    }
}

/* Entry Tags
/*-------------------------------------------------------*/
.entry__tags {
    margin-top: 30px;
}

    .entry__tags a {
        float: none;
    }

    .entry__tags i {
        font-size: 12px;
    }

.entry__tags-label {
    color: #171821;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-right: 8px;
    margin-left: 3px;
}

/* Author
/*-------------------------------------------------------*/
.entry-author {
    position: relative;
    padding: 24px;
    border: 1px solid #E3E4E8;
    margin-bottom: 30px;
    margin-top: 30px;
}

    .entry-author .avatar {
        display: block;
        float: left;
        margin-right: 24px;
        border-radius: 50%;
    }

@media only screen and (max-width: 575px) {
    .entry-author .avatar {
        width: 50px;
        margin-right: 15px;
    }
}

.entry-author__name {
    font-size: 16px;
    font-weight: 700;
}

.entry-author__label {
    color: #83858F;
    display: inline-block;
    margin-right: 5px;
}

.entry-author__info {
    overflow: hidden;
}

/*-------------------------------------------------------*/
/* Pagination
/*-------------------------------------------------------*/
.pagination {
    margin-top: 40px;
    text-align: center;
}

.pagination__page {
    font-size: 15px;
    display: inline-block;
    width: 30px;
    height: 32px;
    line-height: 32px;
    margin-right: 2px;
    text-align: center;
    color: #171821;
    background-color: #fff;
    vertical-align: middle;
}

    .pagination__page:not(span):hover {
        background-color: #2D95E3;
        border-color: transparent;
        color: #fff;
    }

.pagination__page--current {
    background-color: #2D95E3;
    color: #fff;
    border-color: transparent;
}

.pagination__icon {
    font-size: 12px;
}

/*-------------------------------------------------------*/
/* Page Title
/*-------------------------------------------------------*/
.page-title {
    font-size: 38px;
    margin-bottom: 24px;
}

@media only screen and (max-width: 575px) {
    .page-title {
        font-size: 24px;
    }
}

.page-featured-img {
    margin-bottom: 40px;
}

/*-------------------------------------------------------*/
/* Contact Page
/*-------------------------------------------------------*/
/* Gmap
-------------------------------------------------------*/
.gmap {
    width: 100%;
    height: 480px;
    margin-bottom: 40px;
}

.contact-items {
    margin-bottom: 24px;
}

.contact-item {
    padding: 3px 0;
}

.contact-name,
.contact-email,
.contact-subject {
    max-width: 266px;
}

/*-------------------------------------------------------*/
/* 404
/*-------------------------------------------------------*/
.page-404-number {
    font-size: 80px;
    margin-bottom: 0;
}

@media only screen and (max-width: 575px) {
    .page-404-number {
        font-size: 50px;
    }
}


/* Go to Top
-------------------------------------------------------*/
#back-to-top {
    display: block;
    z-index: 100;
    width: 34px;
    height: 34px;
    text-align: center;
    font-size: 12px;
    position: fixed;
    bottom: -34px;
    right: 20px;
    line-height: 32px;
    background-color: rgba(23, 24, 33, 0.5);
    -webkit-box-shadow: 1px 1.732px 12px 0px rgba(0, 0, 0, 0.03);
    box-shadow: 1px 1.732px 12px 0px rgba(0, 0, 0, 0.03);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

    #back-to-top i {
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    #back-to-top a {
        display: block;
        color: #fff;
    }

    #back-to-top.show {
        bottom: 20px;
    }

    #back-to-top:hover {
        background-color: #2D95E3;
        border-color: transparent;
    }

        #back-to-top:hover i {
            color: #fff;
        }

/*-------------------------------------------------------*/
/* Nav Mobile Styles
/*-------------------------------------------------------*/
@media only screen and (max-width: 991px) {
    .nav__header {
        height: 48px;
    }

    .nav__wrap {
        text-align: left;
    }

    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        height: 48px;
        line-height: 48px;
        text-align: center;
    }
}


/*-------------------------------------------------------*/
/* Spacings
/*-------------------------------------------------------*/
.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-8 {
    margin-top: 8px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-56 {
    margin-top: 56px;
}

.mt-64 {
    margin-top: 64px;
}

.mt-72 {
    margin-top: 72px;
}

.mt-80 {
    margin-top: 80px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

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

.mb-16 {
    margin-bottom: 16px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-32 {
    margin-bottom: 32px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-48 {
    margin-bottom: 48px;
}

.mb-56 {
    margin-bottom: 56px;
}

.mb-64 {
    margin-bottom: 64px;
}

.mb-72 {
    margin-bottom: 72px;
}

.mb-80 {
    margin-bottom: 80px;
}

.pt-0 {
    padding-top: 0;
}

.pt-8 {
    padding-top: 8px;
}

.pt-16 {
    padding-top: 16px;
}

.pt-24 {
    padding-top: 24px;
}

.pt-32 {
    padding-top: 32px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-48 {
    padding-top: 48px;
}

.pt-56 {
    padding-top: 56px;
}

.pt-64 {
    padding-top: 64px;
}

.pt-72 {
    padding-top: 72px;
}

.pt-80 {
    padding-top: 80px;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-8 {
    padding-bottom: 8px;
}

.pb-16 {
    padding-bottom: 16px;
}

.pb-24 {
    padding-bottom: 24px;
}

.pb-32 {
    padding-bottom: 32px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-48 {
    padding-bottom: 48px;
}

.pb-56 {
    padding-bottom: 56px;
}

.pb-64 {
    padding-bottom: 64px;
}

.pb-72 {
    padding-bottom: 72px;
}

.pb-80 {
    padding-bottom: 80px;
}

@media only screen and (max-width: 1199px) {
    .mt-lg-0 {
        margin-top: 0 !important;
    }

    .mt-lg-8 {
        margin-top: 8px;
    }

    .mt-lg-16 {
        margin-top: 16px;
    }

    .mt-lg-24 {
        margin-top: 24px;
    }

    .mt-lg-32 {
        margin-top: 32px;
    }

    .mt-lg-40 {
        margin-top: 40px;
    }

    .mt-lg-48 {
        margin-top: 48px;
    }

    .mt-lg-56 {
        margin-top: 56px;
    }

    .mt-lg-64 {
        margin-top: 64px;
    }

    .mt-lg-72 {
        margin-top: 72px;
    }

    .mt-lg-80 {
        margin-top: 80px;
    }

    .mb-lg-0 {
        margin-bottom: 0 !important;
    }

    .mb-lg-8 {
        margin-bottom: 8px;
    }

    .mb-lg-16 {
        margin-bottom: 16px;
    }

    .mb-lg-24 {
        margin-bottom: 24px;
    }

    .mb-lg-32 {
        margin-bottom: 32px;
    }

    .mb-lg-40 {
        margin-bottom: 40px;
    }

    .mb-lg-48 {
        margin-bottom: 48px;
    }

    .mb-lg-56 {
        margin-bottom: 56px;
    }

    .mb-lg-64 {
        margin-bottom: 64px;
    }

    .mb-lg-72 {
        margin-bottom: 72px;
    }

    .mb-lg-80 {
        margin-bottom: 80px;
    }

    .pt-lg-0 {
        padding-top: 0;
    }

    .pt-lg-8 {
        padding-top: 8px;
    }

    .pt-lg-16 {
        padding-top: 16px;
    }

    .pt-lg-24 {
        padding-top: 24px;
    }

    .pt-lg-32 {
        padding-top: 32px;
    }

    .pt-lg-40 {
        padding-top: 40px;
    }

    .pt-lg-48 {
        padding-top: 48px;
    }

    .pt-lg-56 {
        padding-top: 56px;
    }

    .pt-lg-64 {
        padding-top: 64px;
    }

    .pt-lg-72 {
        padding-top: 72px;
    }

    .pt-lg-80 {
        padding-top: 80px;
    }

    .pb-lg-0 {
        padding-bottom: 0;
    }

    .pb-lg-8 {
        padding-bottom: 8px;
    }

    .pb-lg-16 {
        padding-bottom: 16px;
    }

    .pb-lg-24 {
        padding-bottom: 24px;
    }

    .pb-lg-32 {
        padding-bottom: 32px;
    }

    .pb-lg-40 {
        padding-bottom: 40px;
    }

    .pb-lg-48 {
        padding-bottom: 48px;
    }

    .pb-lg-56 {
        padding-bottom: 56px;
    }

    .pb-lg-64 {
        padding-bottom: 64px;
    }

    .pb-lg-72 {
        padding-bottom: 72px;
    }

    .pb-lg-80 {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-md-0 {
        margin-top: 0 !important;
    }

    .mt-md-8 {
        margin-top: 8px;
    }

    .mt-md-16 {
        margin-top: 16px;
    }

    .mt-md-24 {
        margin-top: 24px;
    }

    .mt-md-32 {
        margin-top: 32px;
    }

    .mt-md-40 {
        margin-top: 40px;
    }

    .mt-md-48 {
        margin-top: 48px;
    }

    .mt-md-56 {
        margin-top: 56px;
    }

    .mt-md-64 {
        margin-top: 64px;
    }

    .mt-md-72 {
        margin-top: 72px;
    }

    .mt-md-80 {
        margin-top: 80px;
    }

    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .mb-md-8 {
        margin-bottom: 8px;
    }

    .mb-md-16 {
        margin-bottom: 16px;
    }

    .mb-md-24 {
        margin-bottom: 24px;
    }

    .mb-md-32 {
        margin-bottom: 32px;
    }

    .mb-md-40 {
        margin-bottom: 40px;
    }

    .mb-md-48 {
        margin-bottom: 48px;
    }

    .mb-md-56 {
        margin-bottom: 56px;
    }

    .mb-md-64 {
        margin-bottom: 64px;
    }

    .mb-md-72 {
        margin-bottom: 72px;
    }

    .mb-md-80 {
        margin-bottom: 80px;
    }

    .pt-md-0 {
        padding-top: 0;
    }

    .pt-md-8 {
        padding-top: 8px;
    }

    .pt-md-16 {
        padding-top: 16px;
    }

    .pt-md-24 {
        padding-top: 24px;
    }

    .pt-md-32 {
        padding-top: 32px;
    }

    .pt-md-40 {
        padding-top: 40px;
    }

    .pt-md-48 {
        padding-top: 48px;
    }

    .pt-md-56 {
        padding-top: 56px;
    }

    .pt-md-64 {
        padding-top: 64px;
    }

    .pt-md-72 {
        padding-top: 72px;
    }

    .pt-md-80 {
        padding-top: 80px;
    }

    .pb-md-0 {
        padding-bottom: 0;
    }

    .pb-md-8 {
        padding-bottom: 8px;
    }

    .pb-md-16 {
        padding-bottom: 16px;
    }

    .pb-md-24 {
        padding-bottom: 24px;
    }

    .pb-md-32 {
        padding-bottom: 32px;
    }

    .pb-md-40 {
        padding-bottom: 40px;
    }

    .pb-md-48 {
        padding-bottom: 48px;
    }

    .pb-md-56 {
        padding-bottom: 56px;
    }

    .pb-md-64 {
        padding-bottom: 64px;
    }

    .pb-md-72 {
        padding-bottom: 72px;
    }

    .pb-md-80 {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-sm-0 {
        margin-top: 0 !important;
    }

    .mt-sm-8 {
        margin-top: 8px;
    }

    .mt-sm-16 {
        margin-top: 16px;
    }

    .mt-sm-24 {
        margin-top: 24px;
    }

    .mt-sm-32 {
        margin-top: 32px;
    }

    .mt-sm-40 {
        margin-top: 40px;
    }

    .mt-sm-48 {
        margin-top: 48px;
    }

    .mt-sm-56 {
        margin-top: 56px;
    }

    .mt-sm-64 {
        margin-top: 64px;
    }

    .mt-sm-72 {
        margin-top: 72px;
    }

    .mt-sm-80 {
        margin-top: 80px;
    }

    .mb-sm-0 {
        margin-bottom: 0 !important;
    }

    .mb-sm-8 {
        margin-bottom: 8px;
    }

    .mb-sm-16 {
        margin-bottom: 16px;
    }

    .mb-sm-24 {
        margin-bottom: 24px;
    }

    .mb-sm-32 {
        margin-bottom: 32px;
    }

    .mb-sm-40 {
        margin-bottom: 40px;
    }

    .mb-sm-48 {
        margin-bottom: 48px;
    }

    .mb-sm-56 {
        margin-bottom: 56px;
    }

    .mb-sm-64 {
        margin-bottom: 64px;
    }

    .mb-sm-72 {
        margin-bottom: 72px;
    }

    .mb-sm-80 {
        margin-bottom: 80px;
    }

    .pt-sm-0 {
        padding-top: 0;
    }

    .pt-sm-8 {
        padding-top: 8px;
    }

    .pt-sm-16 {
        padding-top: 16px;
    }

    .pt-sm-24 {
        padding-top: 24px;
    }

    .pt-sm-32 {
        padding-top: 32px;
    }

    .pt-sm-40 {
        padding-top: 40px;
    }

    .pt-sm-48 {
        padding-top: 48px;
    }

    .pt-sm-56 {
        padding-top: 56px;
    }

    .pt-sm-64 {
        padding-top: 64px;
    }

    .pt-sm-72 {
        padding-top: 72px;
    }

    .pt-sm-80 {
        padding-top: 80px;
    }

    .pb-sm-0 {
        padding-bottom: 0;
    }

    .pb-sm-8 {
        padding-bottom: 8px;
    }

    .pb-sm-16 {
        padding-bottom: 16px;
    }

    .pb-sm-24 {
        padding-bottom: 24px;
    }

    .pb-sm-32 {
        padding-bottom: 32px;
    }

    .pb-sm-40 {
        padding-bottom: 40px;
    }

    .pb-sm-48 {
        padding-bottom: 48px;
    }

    .pb-sm-56 {
        padding-bottom: 56px;
    }

    .pb-sm-64 {
        padding-bottom: 64px;
    }

    .pb-sm-72 {
        padding-bottom: 72px;
    }

    .pb-sm-80 {
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 575px) {
    .mt-xs-0 {
        margin-top: 0 !important;
    }

    .mt-xs-8 {
        margin-top: 8px;
    }

    .mt-xs-16 {
        margin-top: 16px;
    }

    .mt-xs-24 {
        margin-top: 24px;
    }

    .mt-xs-32 {
        margin-top: 32px;
    }

    .mt-xs-40 {
        margin-top: 40px;
    }

    .mt-xs-48 {
        margin-top: 48px;
    }

    .mt-xs-56 {
        margin-top: 56px;
    }

    .mt-xs-64 {
        margin-top: 64px;
    }

    .mt-xs-72 {
        margin-top: 72px;
    }

    .mt-xs-80 {
        margin-top: 80px;
    }

    .mb-xs-0 {
        margin-bottom: 0 !important;
    }

    .mb-xs-8 {
        margin-bottom: 8px;
    }

    .mb-xs-16 {
        margin-bottom: 16px;
    }

    .mb-xs-24 {
        margin-bottom: 24px;
    }

    .mb-xs-32 {
        margin-bottom: 32px;
    }

    .mb-xs-40 {
        margin-bottom: 40px;
    }

    .mb-xs-48 {
        margin-bottom: 48px;
    }

    .mb-xs-56 {
        margin-bottom: 56px;
    }

    .mb-xs-64 {
        margin-bottom: 64px;
    }

    .mb-xs-72 {
        margin-bottom: 72px;
    }

    .mb-xs-80 {
        margin-bottom: 80px;
    }

    .pt-xs-0 {
        padding-top: 0;
    }

    .pt-xs-8 {
        padding-top: 8px;
    }

    .pt-xs-16 {
        padding-top: 16px;
    }

    .pt-xs-24 {
        padding-top: 24px;
    }

    .pt-xs-32 {
        padding-top: 32px;
    }

    .pt-xs-40 {
        padding-top: 40px;
    }

    .pt-xs-48 {
        padding-top: 48px;
    }

    .pt-xs-56 {
        padding-top: 56px;
    }

    .pt-xs-64 {
        padding-top: 64px;
    }

    .pt-xs-72 {
        padding-top: 72px;
    }

    .pt-xs-80 {
        padding-top: 80px;
    }

    .pb-xs-0 {
        padding-bottom: 0;
    }

    .pb-xs-8 {
        padding-bottom: 8px;
    }

    .pb-xs-16 {
        padding-bottom: 16px;
    }

    .pb-xs-24 {
        padding-bottom: 24px;
    }

    .pb-xs-32 {
        padding-bottom: 32px;
    }

    .pb-xs-40 {
        padding-bottom: 40px;
    }

    .pb-xs-48 {
        padding-bottom: 48px;
    }

    .pb-xs-56 {
        padding-bottom: 56px;
    }

    .pb-xs-64 {
        padding-bottom: 64px;
    }

    .pb-xs-72 {
        padding-bottom: 72px;
    }

    .pb-xs-80 {
        padding-bottom: 80px;
    }
}

/*-------------------------------------------------------*/
/* Helper Classes
/*-------------------------------------------------------*/
/* Gradients / Overlays
-------------------------------------------------------*/
.full-overlay {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

.bottom-gradient {
    position: absolute;
    width: 100%;
    height: 70%;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
    /* Old browsers */
    /* FF3.6+ */
    /* Chrome,Safari4+ */
    /* Chrome10+,Safari5.1+ */
    /* Opera 11.10+ */
    /* IE10+ */
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.7)), to(transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
    /* IE6-9 */
}

/* Section Dividers
-------------------------------------------------------*/
.top-divider {
    border-top: 1px solid #E3E4E8;
}

.bottom-divider {
    border-bottom: 1px solid #E3E4E8;
}





/* by khawla 16 12 2020 */
.contextuelmenuview {
    font-size: 2.3rem;
    border: 1px solid #D9D9D9;
    padding: .2rem 0;
    margin-right: .5rem;
    background-color: #FFFFFF;
    z-index: 9900;
    max-width:250px;
    right: 0;
    position: absolute;
    top: 3rem;
}
    .contextuelmenuview :hover {
        background: #DFF2FF;
    }



    /* by khawla 16 12 2020 */
.line-clamp-min3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* by khawla 22 12 2020 */

.cardDOC {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 1px solid #D9D9D9;
    border-radius: .375rem;
    background-color: #fff;
    background-clip: border-box;
}

.cardDOCtable {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 1px solid #f6f6f6;
    border-radius: .375rem;
    background-color: #fff;
    background-clip: border-box;
}


/* by khawla 30 12 2020 */
.cardDOCmenu {
    position: relative;
}

.contextuelmenuDOC {
    font-size: 2.3rem;
    border: 1px solid #D9D9D9;
    padding: .2rem 0;
    margin-right: .5rem;
    background-color: #FFFFFF;
    z-index: 9900;
    min-width: 250px;
    right: 0;
    position: absolute;
    top: 3rem;
}
.styletddoc {
}
.styletddoc:hover {
    
    background: #DFF2FF;
}


/* by khawla 12 0 2021 */
.bottonsending {
    background-color: #3A435E;
    color: #ffffff;
    border-radius: 5px;
}
.bottoncanceling {
    background-color: #b7da24;
    color: #ffffff;
    border-radius: 5px;
}



/* by khawla 02 02 2021*/
.textareareadonly object {
    max-width: 100%; /* les images seront limitées à la largeur de leur parent */
}

/* by khawla 02 02 2021*/
.textareareadonly figure object {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* by khawla 02 02 2021*/
.entry__img object {
    width: 100%; /* les images seront limitées à la largeur de leur parent */
}
/* by khawla 05 02 2021*/
.btn-info-ideation {
    color: #fff;
    border-color: #f0d50a;
    background-color: #f0d50a;
}



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

#clockdiv {
    font-family: "Nunito", sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 10px; /*  font-size: 15px;*/
}

    #clockdiv > div {
        padding: 2px; /*     padding: 5px;*/
        border-radius: 3px;
        background: #00BF96;
        display: inline-block;
    }

    #clockdiv div > span {
        padding: 2px; /*     padding: 5px;*/
        border-radius: 3px;
        background: #00816A;
        display: inline-block;
    }

.smalltext {
    padding-top: 2px;
    font-size: 10px;
}
/* by khawla 15 02 2021*/
#clockdivmobile {
    font-family: "Nunito", sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 10px; /*     font-size: 15px;*/
}

    #clockdivmobile > div {
        padding: 2px; /*     padding: 5px;*/
        border-radius: 3px;
        background: #00BF96;
        display: inline-block;
    }

    #clockdivmobile div > span {
        padding: 2px; /*     padding: 5px;*/
        border-radius: 3px;
        background: #00816A;
        display: inline-block;
    }

    /* by khawla 24 02 2021 */
.panelcentralchart {
    margin: 0 0 .0rem 0;
    background-color: #FFFFFF;
    padding: 0 1rem 0 2rem;
}

/* by khawla 26 02 2021 */
.scrollablemobile {
    /* margin-top: 10.5rem;*/
    margin-top: 8rem; /* by khawla 19 10 2020 */
    margin-left: 4rem;
}

/* by khawla 02 03 2021 */
.highcharts-figure, .highcharts-data-table table {
    min-width: 320px;
    max-width: 500px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


/* by khawla 08 03 2021 */
/* by khawla 05 02 2021*/
.btn-info-ideachallenge {
    color: #fff;
    border-color: #C70039;
    background-color: #C70039;
}

/* by khawla 18 03 2021 */
.switch-field {
    /*margin-bottom: 36px;*/
    text-align:center;
    overflow: hidden;
}

    .switch-field input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    }

    .switch-field label {
        background-color:  #E3E4E8;
        color: #54555E;
        font-size: 14px;
        line-height: 0.5;
        text-align: center;
        padding: 8px 16px;
        margin-right: -1px;
        border: #ffffff;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
        transition: all 0.1s ease-in-out;
    }

        .switch-field label:hover {
            cursor: pointer;
        }

    .switch-field input:checked + label {
        background-color: #D9D9D9;
        box-shadow: none;
    }

    .switch-field label:first-of-type {
        border-radius: 4px 0 0 4px;
    }

    .switch-field label:last-of-type {
        border-radius: 0 4px 4px 0;
    }

    /* by khawla 12 04 2021 */
.iconcomment {
    background-color: #f7f7f7;
    color: #000000 !important;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0 .7rem 0 0;
    font-size: 1.6rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    border-radius: 0rem 1rem 1rem 1rem;
}


/* by khawla 27 05 2021 */
.iconlettername {
    background-color: #6495ED;
    color: #FFFFFF; /* !important */
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
}
/* by khawla 27 05 2021 */

.iconletternotpubname {
    background-color: rgb(169,169,169);
    color: #ffffff !important;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    border-radius: 1rem 1rem 1rem 1rem;
}


/* by khawla 13 04 2021 */
.menucommandeclick {
   /* by khawla 14 08 2024 */
    font-size: 1.rem;
    color: #808080;
}

    .menucommandeclick:hover {
        cursor: pointer;
        color: #6495ED;
    }
    
    /* by khawla 14 04 2021 */
.iconletterconfidentiality {
    background-color: #d9d9d9;
    color: #ffffff !important;
    padding: 0.3rem 0.7rem 0.3rem 0.7rem;
    margin: 0 .7rem 0 0;
    font-size: 1.6rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    border-radius: 1rem 1rem 1rem 1rem;
}

/* by khawla 15 04 2021 */
.displayinlineuser {
    padding: .0rem ;
    display: inline-block;
    margin-right: .0rem;
    margin-bottom: .5rem;
    font-size:0.1rem;
}

#reaction {
    position: relative;
    top: 1px;
    bottom: 0px;
    padding-left: 11px;
    padding-right: 1px;
}

/* by khawla 16 04 2021 */
.line-clamp-comment {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.comment-box {
    display: inline-block;
    box-sizing: content-box;
    height: 25px;
    width: 95%;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}


    .comment-box * {
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 100%;
        padding-top: 1px;
        padding-bottom: 2px;
        border: 0;
        font-size: 1rem;
        font-family: 'Nunito', sans-serif;
        outline: none;
    }

#commentnew {
    /*border: none;*/
    border: 1px solid #b3b3b3; /* by khawla 19 10 2020*/
    padding: .1rem 1rem;
    margin: 0;
    background-color: #FFF;
}


/* by khawla 19 04 2021 */
.comment-box-second {
    display: inline-block;
    box-sizing: content-box;
    height: 25px;
    width: 90%;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}
    .comment-box-second * {
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 100%;
        padding-top: 1px;
        padding-bottom: 2px;
        border: 0;
        font-size: 1rem;
        font-family: 'Nunito', sans-serif;
        outline: none;
    }

.comment-box-third {
    display: inline-block;
    box-sizing: content-box;
    height: 25px;
    width: 80%;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}

    .comment-box-third * {
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 100%;
        padding-top: 1px;
        padding-bottom: 2px;
        border: 0;
        font-size: 1rem;
        font-family: "Rubik", sans-serif;
        outline: none;
    }


    /* by khawla 20 04 2021 */
.comment-box-four {
    display: inline-block;
    box-sizing: content-box;
    height: 25px;
    width: 80%;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}

    .comment-box-four * {
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 100%;
        padding-top: 1px;
        padding-bottom: 2px;
        border: 0;
        font-size: 1rem;
        font-family: "Rubik", sans-serif;
        outline: none;
    }

.comment-box-cmd {
    display: inline-block;
    box-sizing: content-box;
    height: 25px;
    width: 85%;
    background-color: white;
    border: 0;
    border-radius: 45px;
    overflow: hidden;
}


    .comment-box-cmd * {
        display: inline-block;
        margin: 0;
        height: 100%;
        width: 100%;
        padding-top: 1px;
        padding-bottom: 2px;
        border: 0;
        font-size: 1rem;
        font-family: "Rubik", sans-serif;
        outline: none;
    }



/* by khawla 15 06 2021 */
.zoomhelp {
    width: 320px;
    height: 240px;
}

.imagehelp {
    width: 100%;
    height: 100%;
}

    .imagehelp img {
        /* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
        -webkit-transition: all 1s ease; /* Safari et Chrome */
        -moz-transition: all 1s ease; /* Firefox */
        -ms-transition: all 1s ease; /* Internet Explorer 9 */
        -o-transition: all 1s ease; /* Opera */
        transition: all 1s ease;
    }

    .imagehelp:hover img {
        /* L'image est grossie de 25% */
        -webkit-transform: scale(2.00); /* Safari et Chrome */
        -moz-transform: scale(2.00); /* Firefox */
        -ms-transform: scale(2.00); /* Internet Explorer 9 */
        -o-transform: scale(2.00); /* Opera */
        transform: scale(2.00);
    }

#photohelp {
    height: 300px;
    widows: 300px;
    position: relative;
    box-align: center;
    margin-left: 50px;
}



#menu-accordeon {
    padding: 0;
    list-style: none;
    width: 150px;
}

    #menu-accordeon ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #menu-accordeon li {
        background-color: white;
        border-radius: 6px;
        margin-bottom: 2px;
    }

        #menu-accordeon li li {
            max-height: 0;
            overflow: hidden;
            transition: all .5s;
            border-radius: 0;
            background: white;
            color: gray;
            box-shadow: none;
            border: none;
            margin: 0;
            text-align: left;
        }

    #menu-accordeon a {
        display: block;
        text-decoration: none;
        color: black;
        font-family: 'Nunito', sans-serif;
        font-size: 1.2em
    }

    #menu-accordeon ul li a, #menu-accordeon li:hover li a {
        font-size: 1em
    }

    #menu-accordeon ul li:last-child {
        border-radius: 0 0 6px 6px;
        border: none;
    }

    #menu-accordeon li:hover li {
        max-height: 10em;
    }


/* by khawla 13 06 2021 */
:root {
    --size: 100px;
    --bord: 10px;
}

.chart {
    width: var(--size);
    height: var(--size);
    margin: 1em auto;
    border-radius: 50%;
    background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .chart::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - var(--bord));
        height: calc(100% - var(--bord));
        background: white;
        border-radius: inherit;
    }


/* by khawla 28 06 2021   */
.info-box {
    min-height: 100px;
    background: #fff;
    width: 100%;
    box-shadow: 0 5px 20px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
}

.state-overview {
    color: #fff;
}

    .state-overview h1.sbold,
    .state-overview p.sbold {
        float: left;
    }

    .state-overview p {
        float: left;
        width: 100%;
    }

    .state-overview .purple {
        background: #a979d1;
        color: #fff;
    }

    .state-overview .orange {
        background: #e67d21;
        color: #fff;
    }

    .state-overview .blue {
        background: #55acef;
        color: #fff;
    }

    .state-overview .blue {
        background: #55acef;
        color: #fff;
    }

    .state-overview .green {
        background: #15a087;
        color: #fff;
    }

    .state-overview .symbol {
        width: 30%;
        padding: 50px 15px;
    }

    .state-overview .symbol,
    .state-overview .value {
        display: inline-block;
        text-align: center;
    }

        .state-overview .symbol i {
            font-size: 25px;
        }

.fa-send:before,
.fa-paper-plane:before {
    content: "\f1d8";
}

.state-overview .value.white {
    border-color: rgba(255, 255, 255, 0.2);
    text-align: left;
}

.state-overview .value {
    width: 68%;
    margin-top: 30px;
    border-left: 1px solid;
    padding-left: 10%;
}

.state-overview .value {
    float: right;
    text-align: left;
}

.state-overview .symbol,
.state-overview .value {
    display: inline-block;
    text-align: center;
}

    .state-overview .value h1 {
        font-weight: 300;
    }

    .state-overview .value h1,
    .state-overview .value p {
        margin: 0;
        padding: 0;
    }

    .state-overview .value h1,
    .state-overview .value p {
        margin: 0;
        padding-bottom: 15px;
    }

.bg-blue {
    background-color: #389af0;
}

.info-box {
    min-height: 100px;
    background: #fff;
    width: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 10px;
}

    .info-box small {
        font-size: 14px;
    }

    .info-box .progress {
        background: rgba(0, 0, 0, 0.2);
        margin: 5px -10px 5px 0;
        height: 2px;
    }

        .info-box .progress,
        .info-box .progress .progress-bar {
            border-radius: 0;
        }

            .info-box .progress .progress-bar {
                background: #fff;
            }

.info-box-icon {
    float: left;
    height: 40px;
    width: 40px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 100%;
}

    .info-box-icon.push-bottom {
        margin-top: 5px;
    }

    .info-box-icon > img {
        max-width: 100%;
    }

.info-box-content {
    padding: 10px 10px 10px 0;
    margin-left: 50px;
}

.info-box-number {
    font-weight: 300;
    font-size: 15px;
    font-weight: bold;
}

.info-box-text,
.progress-description {
    display: block;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}

.info-box-title {
    font-weight: 600;
 
}

.info-icon {
    font-size: 10px;
    margin: 10px 0px;
}

.progress-description {
    margin: 0;
}

.progress {
    background-color: #dfe2e9;
}

    .progress
    .progress-bar {
        box-shadow: none;
    }

.progress {
    display: block;
    height: 8px;
    margin: 8px 0 2px;
}

/* by khawla 29 06 2021 */
.progress-bar {
    background: #fff;
}
/* by khawla 07 07 2021 */

.info-box-user {
    min-height: 70px;
    background: #fff;
    width: 100%;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
}

/* by khawla 14 07 2021 */
.titleadminconsole {
    padding: 5px;
    font-size: 13px;
    font-weight: bold;
}
.soustitleadminconsole {
    padding: 5px;
    font-size: 12px;
    color: grey
}

/* by khawla 21 07 2021 */
.bottonsendingclient {
    background-color: #83858F;
    color: #ffffff;
    border-radius: 5px;
}
   /* .bottonsendingclient:focus {
        background-color: #0275d8;
        color: #ffffff;
        border-radius: 5px;
    }*/
/* by khawla 29 07 2021 */

.bottoncancelingrouge {
    background-color: red;
    color: #ffffff;
    border-radius: 5px;
}
.bottoncancelingris {
    background-color: #83858F;
    color: #ffffff;
    border-radius: 5px;
}
/* by khawla 02 08 2021 */
.styletitleorg {
    font-family: "Nunito", sans-serif;
    font-size: 26px;
    color: #171821;
    font-weight: 600;
    letter-spacing: -0.5px;
}
.coldivorg {
    flex: 1;
}
/* by khawla 05 08 2021 */
/* by khawla 02 12 2020 
.card-columns-filiale {
    -webkit-columns: 4;
    -moz-columns: 4;
    columns: 4;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
}*/


@media (min-width: 576px) {
    .card-columns-filiale {
        columns: 3;
    }
}

@media (min-width: 1024px) {
    .card-columns-filiale {
        columns: 4;
    }
}


.card-columns-filiale > * {
    -webkit-column-break-inside: avoid; /* WebKit fix */
    page-break-inside: avoid; /* Firefox fix */
    break-inside: avoid-column; /* W3C */
    word-wrap: break-word;
}






/* formular */
form.fUni {
    width: 100%; /*max-width: 440px; */
    padding: 0px 0 10px;
    margin: 0 auto;
}

    form.fUni label.label {
        width: 100px; /*max-width: 440px; */
        /padding: 0px 10px 10px 0px;
        margin: 0 auto;
        /float: left;
    }

    form.fUni input.text, form.fUni textarea, form.fUni select {
        border: 1px solid #e1e1e1;
        width: 100%;
        background-color: #e1e1e1;
        padding: 10px 4px 10px 16px;
        height: auto;
        padding: 0.5em 1em;
        font-size: 0.9em;
        border-radius: 4px;
        /float: left;
    }

.user-login-body .inputObal input.text {
    background: var(--textcolor);
    color: var(--purple);
    font-weight: bold;
    border-radius: 0 0 5px 5px;
}

.user-login-body .inputyObal label {
    color: var(--formdetailbg);
    padding: 0.2em 1em;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    background: var(--textcolor);
    width: auto;
    display: block;
    min-width: fit-content;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px solid var(--purpleitembg);
}

.user-login-body .tlObal a.tlacitko {
    width: 100%;
    margin: 0em auto 1em;
}

.user-login-body .inputObal {
    margin-bottom: 1em;
}

    .user-login-body .inputObal:last-of-type {
        margin-bottom: 0.5em;
    }
/* registration */
.user-registration-body form.fUni label.label {
    width: 100%;
    display: block;
}

form.fUni input.text::placeholder {
    color: white;
    font-size: 0.9em;
}

form.fUni textarea {
    height: 130px;
    overflow: auto;
    vertical-align: top;
}

form.fUni select {
    padding: 9px 4px 9px 12px;
}
/* by khawla 12 08 2024 */
/*
input.text:focus, textarea:focus, select:focus {
    border: 1px solid #ffb696 !important;
    transition: all 0.25s ease-in-out !important;
    -webkit-transition: all 0.25s ease-in-out !important;
    -moz-transition: all 0.25s ease-in-out !important;
}*/

form.fUni table {
    width: 100%;
}

    form.fUni table tr td {
        padding: 8px 0 8px 0;
    }

        form.fUni table tr td span {
            display: inline-block;
            padding: 0 0 6px 11px;
        }

        form.fUni table tr td.right {
            padding-bottom: 0;
        }

form.fUni td.tdTlacitko {
    text-align: center;
    text-transform: uppercase;
}

form.fUni table td .povinneUdaje {
    background: url(../images/req.gif) no-repeat left 11px;
    padding: 0 0 0 18px !important;
    font-size: .9em;
}

input.req, textarea.req {
    /background: url('../images/req.gif') no-repeat right 2px;
}

::-webkit-input-placeholder {
    color: #4b4b4b;
    opacity: 1 !important;
}

:-moz-placeholder {
    color: #4b4b4b;
    opacity: 1 !important;
}

::-moz-placeholder {
    color: #4b4b4b;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #4b4b4b;
    opacity: 1 !important;
}

.ok, .chyba {
    font-size: 0.9em;
    border-radius: 7px;
    margin: 0 0 10px 0px;
    padding: .5em .7em 0.5em 40px !important;
    width: fit-content;
    background-repeat: no-repeat;
    background-position: 15px center;
    text-align: left !important;
}

.ok {
    border: 1px solid #abeaab;
    color: green;
    background-color: var(--background);
    background-image: url('../images/ok.png');
    box-shadow: 0 4px 17px -9px green;
}

.chyba {
    display: block;
    border: 1px solid red;
    color: red;
    background-color: #FEEFB3;
    background-image: url('../images/chyba.png');
    box-shadow: 0 4px 17px -9px red;
}



div#mainDataItems {
    clear: both;
    float: left;
}


.produktListDetail {
    display: inline-block;
    height: 210px;
    width: 200px;
    padding: 10px 10px 10px 10px;
    text-align: left;
}

    .produktListDetail:hover img.produktImg {
        width: 280px;
    }

.produktImg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.module-repository .produktImg {
    object-fit: contain;
    padding: 10px;
    background: white;
}

.module-organization-registry .produktImg {
    object-fit: contain;
    padding: 10px;
    background: white;
}

.module-business-marketplace .produktImg {
    object-fit: contain;
    padding: 10px;
    background: white;
}

.produktListDetail a.img {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.produktListDetail a.tlDetail, .produktListDetail a.tlEdit, .produktListDetail a.tlDelete, .produktListDetail a.tlCopy {
    text-align: left;
    margin: 5px 0;
    color: #2998c7;
    text-decoration: underline;
}

    .produktListDetail a.tlDetail:hover, .produktListDetail a.tlEdit:hover, .produktListDetail a.tlDelete:hover, .produktListDetail a.tlCopy:hover {
        text-decoration: none;
    }

.produktListDetail a.tlDetail, .produktListDetail a.tlEdit, .produktListDetail a.tlDelete, .produktListDetail a.tlCopy {
    margin-right: 15px;
}

.produktListDetail a.tlCopy {
    right: 0px;
}

div#hlavni {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
    grid-template-rows: repeat( auto-fit, minmax(200px, 1fr) );
    justify-items: center;
    grid-gap: 2vw;
    width: 100%;
    margin: 0 auto;
}

.produktListDetail {
    position: relative;
    background: var(--purple);
    padding: 0px;
    height: 200px;
    max-width: 270px;
    width: 100%;
    box-shadow: 0px 0px 23px -13px var(--purple);
    overflow: hidden;
    cursor: pointer;
    border-bottom: 1px solid var(--darkpurple);
    border-right: 1px solid var(--purple);
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

    .produktListDetail:hover {
        box-shadow: 0px 0px 13px -2px var(--bluefade);
    }

    .produktListDetail a.img {
        box-shadow: 0 13px 17px -7px rgba(0,0,0,0.1);
    }

    .produktListDetail:hover h2 {
        height: 100%;
        display: -webkit-box;
        -webkit-box-align: center;
        -webkit-box-pack: center;
    }

    .produktListDetail h2 {
        padding: 5px;
        color: white;
        display: block;
        font-weight: bold;
        text-align: center;
        font-size: 17px;
        text-transform: uppercase;
        background: var(--purpleitembg);
        overflow: hidden;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        height: 27px;
        transition: height 0.2s ease;
    }

.tlDiv {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
    display: flex;
    background: var(--blue);
}

.module-repository .tlDiv {
    position: relative;
    bottom: unset;
    height: 20px;
    width: calc(100% + 20px);
    display: flex;
    background: var(--blue);
    margin: 0 auto;
    transform: translate(-10px, 10px);
}

.produktListDetail a.tlDetail, .produktListDetail a.tlEdit, .produktListDetail a.tlDelete {
    margin: 0px 10px 10px 10px !important;
    color: var(--textcolor);
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
    display: block;
    text-decoration: none;
}

.produktListDetail div.tlDiv a.tlDetail, .produktListDetail div.tlDiv a.tlEdit, .produktListDetail div.tlDiv a.tlDelete, .produktListDetail div.tlDiv a.tlCopy {
    display: inline-block;
    width: 100%
}



.elementContainer {
    background: #faf9fa;
}


.elementContainerContent {
    padding: 14px 10px 10px;
    font-size: 14px;
    text-align: left;
    width: 100%;
    margin: auto;
}

    .elementContainerContent.elementContainerContent_checkbox_list {
        max-height: var(--maxBoxHeight);
    }

.uvodni .elementContainerContent.elementContainerContent_checkbox_list {
    max-height: unset;
}

.elementContainerContentRequired .mCustomScrollBox {
    height: calc(var(--maxBoxHeight) - 2em);
}

label.elementContainerLabel {
    background: var(--textcolor);
    color: var(--purpleitembg);
    padding: 3px;
    display: block;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: bold;
}

label.elementContainerLabel {
    background: var(--formdetailbg);
    color: var(--textcolor);
    padding: 3px;
    display: block;
    font-size: 16px;
    text-transform: uppercase;
}

.imageDisplay {
    border-radius: 5px;
    object-fit: cover;
    width: 100%;
    overflow: hidden;
}


.noDisplayFilter {
    display: none !important;
}

/* majacky stavu u TASKu */
body.module-type-task div#hlavni {
    display: flex;
    justify-items: center;
    width: 100%;
    margin: 0 auto;
}

body.module-type-task .produktListDetail {
    position: relative;
    background: #f7f7f7;
    padding: 0px;
    border-radius: 4px;
    max-width: 270px;
    width: 100%;
    box-shadow: 0px 0px 23px -13px var(--purple);
    cursor: pointer;
    border: 1px solid #b6b6b6;
    margin: 5px 10px 5px 10px;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

body.module-type-task .productListDetailClick {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 10px;
}

body.module-type-task a.tlDetailImg {
    display: block;
    text-align: center;
    width: 100%;
}

body.module-type-task .productListDetailClick h2 {
    display: block;
    width: 100%;
    text-align: center;
    padding: unset;
    font-size: 18px;
    line-height: 1.5;
}
:root {
    --background: rgba(78, 119, 173, 0.98);
    --purpleitembg: rgba(78, 119, 173, 0.98);
}
/* by khawla 09 08 2021 */
.card-filiale {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 1px solid rgba(78, 119, 173, 0.98);
    border-radius: .375rem;
    background-color: #fff;
    background-clip: border-box;
}

/* by khawla 29 09 2021 */
.bg-springgreen {
    background-color: springgreen;
}

.bg-darkgreen {
    background-color: #0B614B;
}

.bg-rosybrown {
    background-color: rosybrown;
}

.bg-crimson {
    background-color: crimson;
}

.bg-darksalmon {
    background-color: darksalmon;
}

thumbnailcommandselectedinbox {
   
}

/* by khawla 07 10 2021 */
profilstyle {
 font-family:   -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Fira Sans",Ubuntu,Oxygen,"Oxygen Sans",Cantarell,"Droid Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Emoji","Segoe UI Symbol","Lucida Grande",Helvetica,Arial,sans-serif;
}

.experiencestyle {
    color: rgba(0, 0, 0, 0.9);
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-weight: 400;
    letter-spacing: normal;
    orphans: 2;
    text-align: start;
    text-indent: 0px;
    text-transform: none;
    white-space: normal;
    widows: 2;
    word-spacing: 0px;
    -webkit-text-stroke-width: 0px;
    background-color: rgb(255, 255, 255);
    text-decoration-style: initial;
    text-decoration-color: initial;
    display: inline !important;
    float: none;
}
/* by khawla 13 10 2021 */
.entryobjectfooter{
    position: relative;
    /* by khawla 24 08 2023 */
    background-color:#FFFFFF;

 /*   overflow: hidden;*/
    margin-bottom: 10px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

/* by khawla 14 10 2021 */
.verticallinesearch {
    border-left: 6px solid green;
    height: 500px;
}
/* by khawla 26 10 2021 */
.inputsearch {
}

inputsearch .input {
    width: 100%;
}


/* by khawla 05 11 2021 */
.iconlettersearch {
    border: 1px solid rgb(169,169,169);
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    border-radius: 1rem;
}


/* by khawla 11 12 2021 */
#droitscroll {
}

   

#gauche1scroll {
}

  

#gauche2scroll {
}

   
#centerscroll {
}

#gauche1scroll::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
#gauche2scroll::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

    #centerscroll::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
#droitscroll::-webkit-scrollbar {
    width: 0px; 
    background: transparent;
}

/* by khawla 21 01 2022 */
/* by khawla 13 03 2025 */

.btn-outline-primary {
    border: 1px solid #243875;
    color: #243875 !important;
    background-color: transparent;
}
    /* by khawla 13 03 2025 */

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.focus, .btn-outline-primary:not(:disabled):not(.disabled):active {
        background-color: #243875;
        border-color: #243875;
        color: #ffffff !important;
        box-shadow: 0 3px 5px 0 rgba(47, 85, 212, 0.1);
    }

    /* by khawla 13 03 2025 */
.btn-market-primary {
    background-color: #243875 !important;
    border: 1px solid #243875 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 5px 0 rgba(47, 85, 212, 0.1);
}
    /* by khawla 13 03 2025 */

    .btn-market-primary:hover, .btn-market-primary:focus, .btn-market-primary:active, .btn-market-primary.active, .btn-market-primary.focus {
        background-color: #243875 !important;
        border-color: #243875 !important;
        color: #ffffff !important;
    }

.btnshare {
    padding: 8px 20px;
    outline: none;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: all 0.3s;
    font-weight: 300;
    border-radius: 6px;
}

    .btnshare:focus {
        box-shadow: none !important;
    }

.btnsharemarket {
    padding: 5px;
    outline: none;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.4px;
    transition: all 0.3s;
    font-weight: 200;
    border-radius: 6px;
}

    .btnsharemarket:focus {
        box-shadow: none !important;
    }

    /* by khawla 31 01 2022 */


    /* by khawla 04 04 2022 */
.btnpremium {
    border: 1px solid #b7da24;
    color: #FFFFFF !important;
    background-color: transparent;
}

    .btnpremium:hover, .btnpremium:focus, .btnpremium:active, .btnpremium.active, .btnpremium.focus, .btnpremium:not(:disabled):not(.disabled):active {
        background-color: #b7da24;
        border-color: #b7da24;
        color: #ffffff !important;
        box-shadow: 0 3px 5px 0 rgba(47, 85, 212, 0.1);
    }


   .clr{
       color:red;
   }


   /* by khawla 18 07 2022 */
.bg-bluecolorone {
    background-color: rgb(68, 175, 221);
}
.bg-bluecolortwo {
    background-color: rgb(125, 201, 27);
    
}


/* by khawla 19 09 2022 */

.iconletternotseenname {
    background-color: red;
    color: #ffffff !important;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    border-radius: 1rem 1rem 1rem 1rem;
}
/* by khawla 25 09 2022 */
.btnmyspacemyprofil {
    border: 1px solid #000000;
    color: #000000 !important;
    background-color: transparent;
}

    .btnmyspacemyprofil:hover, .btnmyspacemyprofil:focus, .btnmyspacemyprofil:active, .btnmyspacemyprofil.active, .btnmyspacemyprofil.focus, .btnmyspacemyprofil:not(:disabled):not(.disabled):active {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff !important;
        box-shadow: 0 3px 5px 0 rgba(47, 85, 212, 0.1);
    }

/* by khawla 07 10 2022 */
.mycommunity {
    color: #fff;
    border-color: #47b7e5;
    background-color: #47b7e5;
}

/* by khawla 12 10 2022 */
#input_img_accounteditinfoorg {
    align-self: center;
    position: absolute;
    bottom: 2px;
    right: 5px;
    width: 40px;
    padding-top: 25px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-right: 15px;
    height: 40px;
}

/* by khawla 07 11 2022 */
.popupContainerChat {
 
    position: absolute !important;
    
    height: 0rem;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8000;
    /*  background: rgba(220, 220, 220, 0.5);*/
}

    .popupContainerChat > div {
        background-color: #FFFFFF;
        margin-left: auto;
        margin-right: auto;
        /*margin-top: 50vh;*/
        transform: translateY(-50%);
        width: 40rem;
        height: 30rem;
    }

    /* by khawla 06 12 2022 */
.displayinlinechatgif {
    padding: 0.5rem 1rem 1rem 1rem;
    display: inline-flex;
    margin-right: 1rem;
    margin-bottom: 1rem;
}
.thumbnailobjectchatgif {
    padding: 0rem;
    margin: 0;
}

    .thumbnailobjectchatgif img {
        max-width: 80%;
        max-height: 20rem;
        height: auto;
        cursor: pointer;
    }



/* by khawla 15 12 2022 */

/* #chatparticipant {
                                                            background: #edf3f8;
                                                            font-size: 1.7rem;
                                                            height: 100%;
                                                            color: #53575a;
                                                            box-shadow: none;
                                                            border: none;
                                                        }*/
#chatparticipant{

}
span.chatparticipant > .ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
    outline: 0;
    margin: 0 3px 3px 0;
    background-color: #1c8d0b;
    color: #FFFFFF;
    border-radius: 25px;
}
span.chatparticipant > .ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
    /* color: #aaaaaa; */
    text-align: right;
    font-size: 28px;
    font-weight: normal;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    text-shadow: 0 0px 0 #fff;
    opacity: 1;
}


/*span.chatparticipant > .close {
                                                            color: #FFFFFF;
                                                        }*/
/* by khawla 16 12 2022 */
@media screen and (min-width: 1700px) {
    html {
        font-size: 47%;
    }
}


/* by khawla 27 12 2022 */
/* by khawla 16 12 2020 */
.contextuelmenuviewchat {
    /*font-size: 2.3rem;
    border: 1px solid #D9D9D9;
    padding: .2rem 0;
    margin-right: .5rem;
    background-color: #FFFFFF;
    align-content:flex-end;
    position: absolute;
    top: 3rem;*/
    /* by khawla 04 01 2023 */
    /*border-bottom: 1px solid #f0f0f0;
    border: 1px solid #D9D9D9;
    */
    padding: 1rem;
    position: fixed;
    width: 200px;

    font-size: 2.3rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 5px;
    padding: .2rem 0;
    margin-right: .5rem;
    background-color: #FFFFFF;
    align-content: flex-end;
}
/* by khawla 28 12 2022 */
  /*  .contextuelmenuviewchat :hover {
        background: #DFF2FF;
    }*/
.notifmenuchat {
}

    .notifmenuchat :hover {
        background: #E3E4E8;
        color: #54555E;
    }

    /* by khawla 12 01 2023 */
/*span.chatparticipant > input.ui-select-search {
    color: #FFFFFF;
    background: #edf3f8;
    font-size: 1.7rem;
    height: 100%;
    color: #53575a;
    box-shadow: none;
    border: none;
    max-height: 5px;
    overflow-y: auto;
}
*/
/* by khawla 13 01 2023 */
.memberchat {
}

    .memberchat :hover {
        background: #add8e6;
  
    }

    /* by khawla 19 04 2023 */
.thumbnailcommandrotatehelp {
    transition: all .6s;
    color: #032d72;
    cursor: pointer;
    height: 25px;
    width: 25px;
}

    .thumbnailcommandrotatehelp:hover {
        color: #6495ED;
    }

    .thumbnailcommandrotatehelp[aria-expanded="false"] {
        transform: rotate(180deg);
    }



    /* by khawla 02 08 2023 */

/* by khawla 10 03 2023 */

/* by khawla 04 05 2022 */
.star {
    font-size: 3rem;
}

.hover {
    color: rgb(255,196,0);
}



.note {
}

#starcolor {
    color: rgb(255,196,0);
}

/* by khawla 20 06 2023 */
.styleh6stastique {
    display: block;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 12px;
    font-family: 'Archivo', var(--bs-font-sans-serif);
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

.styleh2stastique {
    line-height: 1;
    color: #1c273c;
    font-weight: 600;
    font-size: 30px;
    font-family: 'Archivo', var(--bs-font-sans-serif);
    letter-spacing: -1px;
    margin-top: 10px;
    margin-bottom: 2px;
}

.card-statistique {
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
}

/* by khawla 12 08 2023 */

.has-details {
    position: relative;
}

.details {
    position: absolute;
    top: 0;
    transform: translateY(70%) scale(0);
    transition: transform 0.1s ease-in;
    transform-origin: left;
    display: inline;
    background: white;
    z-index: 2000;
    min-width: 100%;
    padding: 1rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 5px;
}

.has-details:hover span {
    /* by khawla 04 09 2023*/
    transform: translateY(10%) scale(1);
}

/* by khawla 07 09 2023 */

/* file: angular-pdf-ui/src/style.css  */
* {
    box-sizing: border-box;
}

.wrapper {
    margin: 0 auto;
  /*  width: 960px;*/
}

.pdf-controls {
    width: 100%;
    display: block;
    background: #eee;
    padding: 1em;
}

.rotate0 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotate270 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.fixed {
    position: fixed;
    top: 0;
    left: calc(50% - 480px);
    z-index: 100;
    width: 100%;
    padding: 1em;
    background: rgba(238, 238, 238,.9);
    width: 960px;
}

.toolbar {
    background: #303030;
    padding: 10px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
}

    .toolbar span {
        color: white;
    }

.my-icon {
    margin: 0 7px;
    cursor: pointer;
}

    .my-icon:hover {
        opacity: 0.5;
    }

    .my-icon.active {
        opacity: 0.5;
    }

        .my-icon.active:hover {
            opacity: 1;
        }

.page-num {
    width: 50px;
    border: 0;
    margin-right: 2px;
    text-align: center;
}

.searchbox {
    width: 0;
    opacity: 0;
    transition: all 0.3s ease-out;
    border: 0px;
    padding: 0 3px;
}

    .searchbox:focus, .searchbox:active {
        outline: 0;
        box-shadow: none;
    }

    .searchbox:focus {
        opacity: 1;
        width: 200px;
    }

.pdf-body {
    margin-top: 46px;
}

input:focus, input:active {
    outline: 0;
    box-shadow: none;
}

/* by khawla 21 09 2023 */

.menucommandselectedarborescence {
    /* color: red !important; */
   /* font-weight: bold !important;*/
    color: #6495ED !important;
}

/* by khawla 29 09 2023 */
.editor {

    border: 1px solid #ddd;
    overflow: auto;
    /* by khawla 06 09 2024 */
    border-radius:5px;
}

.sizeiconfontello{
    height:25px;
    width:25px;
}

/* by khawla 26 10 2023 */
.iconletterrappel {
    background-color: orange;
    color: #FFFFFF; /* !important */
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 1.1rem 0.1rem 1rem 1rem;
}

/* by khawla 27 10 2023 */
#popupscrollrappel {
}

    #popupscrollrappel::-webkit-scrollbar {
        width: 0px; /* remove scrollbar space */
        background: transparent; /* optional: just make scrollbar invisible */
    }



/* by khawla 15 12 2023 */

.iconletterabusname {
    background-color: rgb(0,0,0);
    color: #ffffff !important;
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    /* by khawla 12 04 2021 */
    padding: 0.5rem 1rem 0.4rem 1rem;
}


/* by khawla 10 01 2024 */
.iconletternamepublished {
    background-color: #6495ED;
    color: #FFFFFF; /* !important */
    font-size: 1.5rem;
    vertical-align: middle;
    display: inline;
    margin: 0rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

.iconletternamenotpublished {
    background-color: rgb(169,169,169);
    color: #ffffff !important;
    font-size: 1.5rem;
    vertical-align: middle;
    display: inline;
    margin: 0rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

.iconletternamenotseen {
    background-color: red;
    color: #ffffff !important;
    font-size: 1.5rem;
    vertical-align: middle;
    display: inline;
    margin: 0rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

.iconletternameabuse {
    background-color: #000000;
    color: #ffffff !important;
    font-size: 1.5rem;
    vertical-align: middle;
    display: inline;
    margin: 0rem;
    white-space: nowrap;
    border-radius: 0.5rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

.iconletterbesoinabandonner {
    background-color: #7f7f7f;
    color: #FFFFFF; /* !important */
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

.iconletterbesoinstandby {
    background-color: #8064a2;
    color: #FFFFFF; /* !important */
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

.iconletterbesoinproject {
    background-color: #9bbb59;
    color: #FFFFFF; /* !important */
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 1.5rem;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    /*padding: 0.5rem 1rem 0.4rem 1rem;*/
    padding: 0.5rem 1rem 0.4rem 1rem;
}

/* by khawla 09 02 2024 */
.datepicker td, .datepicker th {
    font-size: 2rem;
    padding:8px;
}

/* by khawla 23 02 2024 */


:root {
    --background-modal-color: #fff;
    --body-color: #fff;
    --color-timeline-default: #D2D3D8;
    --color-step-completed: #5C6174;
    --color-checkmark-completed: #fff;
    --color-in-progress: #13CB8F;
    --color-label-default: var(--color-timeline-default);
    --color-label-completed: var(--color-step-completed);
    --color-label-loading: var(--color-in-progress);
    --color-icon-completed: var(--color-step-completed);
    --color-icon-default: var(--color-timeline-default);
}

:root.dark-mode {
    --color-checkmark-completed: #fff;
    --background-modal-color: #5C6174;
    --color-timeline-default: #9799A3;
    --color-checkmark-completed: var(--background-modal-color);
    --body-color: #fff;
    --color-step-completed: #fff;
}

* {
    box-sizing: border-box;
}

.wrapper {
    font-family: "Muli", sans-serif;
    background: var(--body-color);
    padding: 0;
    margin: 0;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    position: relative;
}

.toggle {
    transform: scale(0.8);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 200px;
}

    .toggle span {
        margin: 0 0.5rem;
    }

    .toggle input[type=checkbox] {
        height: 0;
        width: 0;
        visibility: hidden;
    }

        .toggle input[type=checkbox]:checked + label {
            background: #13CB8F;
        }

            .toggle input[type=checkbox]:checked + label:after {
                left: calc(100% - 2px);
                transform: translateX(-100%);
            }

    .toggle label {
        cursor: pointer;
        width: 200px;
        background: #D2D3D8;
        display: inline;
        border-radius: 40px;
        position: relative;
        white-space: nowrap;
    }

        .toggle label:after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 30px;
            background: #fff;
            border-radius: 40px;
            transition: 0.3s;
            white-space: nowrap;
        }

.main-container {
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    transition: all 200ms ease;
    background: var(--background-modal-color);
    flex-grow: 1;
    border-radius: 5px;
}

    .main-container .steps-container {
        display: flex;
        align-items: center;
        /* justify-content: center;*/
        width: auto;
        padding: 0px 0px 0px 0px;
    }

        .main-container .steps-container .step {
            z-index: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 200ms ease;
            flex-grow: 0;
            height: 15px;
            width: 15px;
            border: 4px solid var(--color-timeline-default);
            border-radius: 50%;
        }

            .main-container .steps-container .step .preloader, body .main-container .steps-container .step svg {
                display: none;
            }

            .main-container .steps-container .step.completed {
                width: 18px;
                height: 18px;
                background: var(--color-step-completed);
                border: none;
            }

                .main-container .steps-container .step.completed svg {
                    transition: all 200ms ease;
                    display: block;
                    height: 10px;
                    width: 10px;
                    fill: var(--color-checkmark-completed);
                }

            .main-container .steps-container .step.in-progress {
                width: 17px;
                height: 17px;
                background: var(--color-in-progress);
                border: none;
            }


                .main-container .steps-container .step.in-progress .preloader {
                    display: block;
                    height: 10px;
                    width: 10px;
                    border: 2px solid #fff;
                    border-radius: 50%;
                    border-left-color: transparent;
                    /* by khawla 03 04 2024 */
                    /*animation-name: spin;
                    animation-duration: 2000ms;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;*/
                }

            .main-container .steps-container .step .label {
                position: absolute;
                top: 25px;
                filter: none;
                z-index: 2000;
                color: var(--color-label-default);
                transition: all 200ms ease;
            }

.step.in-progress .label {
}

.main-container .steps-container .step .label.completed {
    color: var(--color-label-completed);
}

body .main-container .steps-container .step .label.loading {
    color: var(--color-label-loading);
}

.main-container .steps-container .step .icon {
    font-size: 40px;
    position: absolute;
    top: -60px;
    color: var(--color-icon-default);
    transition: color 200ms ease;
}

    .main-container .steps-container .step .icon.completed {
        color: var(--color-icon-completed);
    }

    .main-container .steps-container .step .icon.in-progress {
        color: var(--color-in-progress);
    }

.main-container .steps-container .line {
    transition: all 200ms ease;
    height: 2px;
    flex-grow: 1;
    max-width: 120px;
    background: var(--color-timeline-default);
}

    .main-container .steps-container .line.completed {
        background: var(--color-step-completed);
    }

    .main-container .steps-container .line.next-step-uncomplete {
        background: linear-gradient(to right, var(--color-step-completed), var(--color-timeline-default));
    }

    .main-container .steps-container .line.next-step-in-progress {
        background: linear-gradient(to right, var(--color-step-completed), var(--color-in-progress));
    }

    .main-container .steps-container .line.prev-step-in-progress {
        background: linear-gradient(to right, var(--color-in-progress), var(--color-timeline-default));
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* by khawla 11 03 2024 */
/* by khawla  15 09 2020 */
#scrollabout{
}
    #scrollabout::-webkit-scrollbar {
        width: 5px;
        background: orange;
    }


    /* by khawla 12 03 2024 */
.textareareadonly img {
    max-width: 100%;
}


/* by khawla 30 03 2024 */
.textareareadonlydescription {
    border: 1px solid #D9D9D9;
    border-radius: 3px;
    /* by khawla 25 10 2023 */
    /*line-height: 1.3em;*/
    text-align: left;
    text-align: justify;
}

    .textareareadonlydescription, .textareareadonlydescription:active, .textareareadonlydescription:focus {
        cursor: default;
        outline: none;
        border: 0 none transparent;
        height: auto;
    }

.textareareadonlydescription {
    margin-left: 2.5rem;
    margin-right: 2rem;
}

    .textareareadonlydescription figure p {
        word-wrap: break-word;
    }

    .textareareadonlydescription figure img {
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

    .textareareadonlydescription figure {
        /* by khawla 24 04 2025 */
        float: none;
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

    .textareareadonlydescription iframe {
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

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

    .textareareadonlydescription figure img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .textareareadonlydescription figure iframe {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .textareareadonlydescription object {
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }


    .textareareadonlydescription figure object {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


    .textareareadonlydescription img {
        max-width: 100%;
    }

    /* by khawla 25 04 2024 */
.form-control {
    font-size:1.7rem;
}

/* by khawla 28 04 2024 */
.iconlettercategorie {
    background-color: white;
    color: #740cea; /* !important */
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-family: 'Nunito',sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
}

/* by khawla 22 05 2024 */
.iconlettercompotanse {
    background-color: #ccfae1;
    margin: 0 .7rem 0 0;
    /* by khawla 05 27 2021 */
    /* by khawla 08 07 2021 */
    font-size: 2rem;
    font-weight: bold;
    /* by khawla 12 04 2021 */
    /* padding: 0 0.3rem; */
    border-radius: 1rem 1rem 1rem 1rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
}

/* by khawla 24 05 2024 */

@media (min-width: 100px) {
    .card-columnsservice {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (min-width: 900px) {
    .card-columnsservice {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 1300px) {
    .card-columnsservice {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
/* by khawla 19 07 2024 */
.menulanguageeselected {
    background-color: #E3E4E8;
}

/* by khawla 01 08 2024 */
.input-container {
    position: relative;
    display: inline-block;
    /* by khawla 23 03 2025 */
    width: 350px; /* Ajustez la largeur selon vos besoins */
}

    .input-container input {
        width: 100%;
        padding: 8px;
        padding-left:40px;
        padding-right: 40px; /* Laissez de l'espace pour les icônes */
        border: 0px solid #ccc;
        border-radius: 18px;
        font-size: 11px;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
        height: 30px;
        background-color: #f7f7f7;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .input-container i {
        position: absolute;
        top: 50%;
        font-weight: bold;
        padding: 2px;
        transform: translateY(-50%);
        color: #808080;
        cursor: pointer;
    }

    .input-container .lni-plus {
        left: 10px; /* Positionne le + à gauche */
        font-size: 2.2rem; /* Ajustez la taille de l'icône */
    }

    .input-container .lni-search-alt {
        right: 10px; /* Positionne l'icône de recherche à droite */
        font-size: 2.2rem; /* Ajustez la taille de l'icône */
    }




    /* by khawla 12 08 2024 */
    /***/

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

.custom-dropdown-objects--small {
    font-size: 1em; /* font-size: .7em; */
}

.custom-dropdown-objects__select {
    font-size: inherit; /* inherit size from .custom-dropdown */
    padding: .5em; /* add some space*/
    margin: 0; /* remove default margins */
}

.custom-dropdown-objects__select--white {
    background-color: #fff;
    color: #A9A9A9;
}

@supports (pointer-events: none) and ((-webkit-appearance: none) or
      (-moz-appearance: none) or
      (appearance: none)) {

    .custom-dropdown-objects {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        color: #000000;
        border-radius: 25px;
    }

    .custom-dropdown-objects__select {
        padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
        border: 0;
        color: #000000;
        border: 0.2px solid #000000;
        border-radius: 10px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

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

    .custom-dropdown-objects::after { /*  Custom dropdown arrow */
        content: "\25BC";
        height: 1em;
        font-size: .9em; /** font-size: .625em; **/
        line-height: 1;
        right: 1.2em;
        top: 50%;
        margin-top: -.5em;
    }

    .custom-dropdown-objects::before { /*  Custom dropdown arrow cover */
        width: 2em;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0 3px 3px 0;
    }

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

    .custom-dropdown-objects.custom-dropdown--disabled::after {
        color: rgba(0,0,0,.1);
    }
    /* White dropdown style */
    .custom-dropdown-objects--white::before {
        top: .5em;
        bottom: .5em;
        background-color: #fff;
        border-left: 1px solid rgba(0,0,0,.1);
    }

    .custom-dropdown-objects--white::after {
        color: rgba(0,0,0,.9);
    }
    /* FF only temp fix */
    @-moz-document url-prefix() {
        .custom-dropdown-objects__select {
            padding-right: .9em
        }

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

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

.info-box-text {
    display: flex;
    align-items: center;
    padding: 2px;
    cursor: pointer;
    gap: 5px; /* Ajoute un espacement entre les éléments */
}

.icon-container {
    font-size: 15px;
}

.text-container {
    flex-grow: 1; /* Permet au texte de prendre l'espace restant */
    text-align: left; /* Aligne le texte à gauche */
}

.number-container {
    margin-left: auto; /* Aligne le nombre à droite */
    padding-left: 5px; /* Ajoute un espacement entre le texte et le nombre */
}

.marginmiddle {
    margin-left: 10px;
    margin-right: 10px;
}

/* by khawla 20 08 2024 */
.typeobjectthumbnail {
width: 100px; 
overflow: hidden;
display:inline;
font-size:2rem;
white-space: nowrap;
border: 1px solid  #6495ED; 
border-radius: 1rem 1rem 1rem 1rem;
        padding: 0rem;
}
.thumbnailobjectuserlstimg {
    max-width: 4rem !important;
    max-height: 4rem !important;
    margin: 1rem 1rem .1rem 1rem;
    width: 4rem !important;
    height: 4rem !important;
    cursor: pointer;
    border-radius: 50% !important;
}
.thumbnailobjectuserlstth {
    padding: .4rem;
}

/* by khawla 21 08 2024 */
.center-items {
    display: flex; /* Utilise Flexbox pour les éléments au centre */
    justify-content: center; /* Centre les éléments horizontalement */
    flex: 1; /* Permet à cet élément de prendre l'espace disponible */
}

.right-item {
    margin-left: auto; /* Pousse cet élément vers la droite */
}
.left-item {
    margin-right: auto; /* Pousse cet élément vers la droite */
}


/* by khawla 24 08 2024 */
.btn-dashbord {
    background-color: #47B7E5 !important;
    border: 1px solid #47B7E5 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 5px 0 rgba(47, 85, 212, 0.1);
}

    .btn-dashbord:hover, .btn-dashbord:focus, .btn-dashbord:active, .btn-dashbord.active, .btn-dashbord.focus {
        background-color: #47B7E5 !important;
        border-color: #47B7E5 !important;
        color: #ffffff !important;
    }


/* khaoula mabrouk 01 03 24*/
/* style page content */
.page-toc-card {
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    tab-size: 4;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    background-repeat: no-repeat;
    box-sizing: inherit;
    padding: 0;
    margin: 10px;
    border-width: thin;
    display: block;
    max-width: 100%;
    outline: none;
    text-decoration: none;
    transition-property: box-shadow, opacity;
    overflow-wrap: break-word;
    position: relative;
    white-space: normal;
    margin-bottom: 10px !important;
    border-color: #fff;
    background-color: #fff;
    color: rgba(0, 0, 0, .87);
    border-radius: 4px;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2); /* Ombre avec couleur bleue */
}

.v-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.v-list-item {
    display: flex;
    align-items: center;
    padding: 5px;
    height: auto;
}

.v-list-item--link {
    color: inherit;
}

.v-list-item__title {
    flex: auto;
}

.v-icon {
    margin-right: 12px;
}

.container {
    background-color: #f9f9f9;
}


.sidebar {
    background-color: #f5f5f5;
    max-height: 300px;
    padding: 10px;
}

/* Style du header du sidebar */
.sidebar-header {
    border-radius: 5px;
    text-align: center;
    margin-bottom: auto;
    color: #096fb7; /* Couleur du texte blanc */
    padding: 10px; /* Ajout de padding */
}


/* Style des éléments de menu */
.menu-item {
    list-style: none;
    margin-bottom: 10px;
}

    .menu-item span {
        text-decoration: none;
        color: #000; /* Couleur du texte noir pour les éléments */
        display: block;
        padding: 10px; /* Ajout de padding pour l'espace intérieur des éléments */
        transition: all 0.3s ease;
    }



/* Style pour les sous-menus */
.sub-menu {
    padding-left: 10px; /* Ajout d'un décalage pour les sous-menus */
    text-decoration-color: #777; /* Couleur du texte gris plus foncé */
}

.sub-menu-item {
    border-bottom: none; /* Suppression de la ligne séparatrice pour les sous-éléments */
    text-decoration-color: #777; /* Couleur du texte gris plus foncé */
}

    .sub-menu-item span {
        padding: 5px 0px 5px 10px; /* Ajustement du padding pour les sous-éléments */
    }

/* Style pour les sous-sous-menus */
.sub-sub-menu {
}

.sub-sub-menu-item {
    border-bottom: none; /* Suppression de la ligne séparatrice pour les sous-sous-éléments */
    color: #777; /* Couleur du texte gris plus foncé */
}

    .sub-sub-menu-item span {
        padding: 5px 0px 5px 10px; /* Ajustement du padding pour les sous-sous-éléments */
        color: #777; /* Couleur du texte gris plus foncé */
    }

.item {
    margin-bottom: 10px;
    border: 1px solid #808080;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .item:hover {
        background-color: #ececec;
    }

.title {
    cursor: pointer;
    display: inline-block;
    color: #333; /* Couleur de texte moins foncée */
    font-weight: bold; /* Rendre le titre en gras */
}

.toggle {
    position: absolute;
    top: 5px; /* Ajuster la position verticale */
    right: 5px; /* Ajuster la position horizontale */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold; /* Rendre le texte en gras */
    color: #000; /* Couleur noire */
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

    .toggle:hover {
        color: #333; /* Couleur noire foncée au survol */
    }

.description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%; /* Ajustez selon vos besoins */
    color: #333; /* Couleur de texte moins foncée */
}

    .description.show {
        white-space: initial;
        max-width: initial;
    }

.btn-confirm {
    background-color: white;
    color: #096fb7; /* Couleur du texte */
}

.page-header-section {
    padding: 10px; /* Espacement intérieur */
}

.headline {
    font-weight: bold; /* Gras */
    padding-top: 20px; /* Espacement en haut */
}


[ng-repeat="itmss in lstchapitre | orderBy:'displayorder'"]:hover {
    background-color: #f5f5f5; /* Couleur de fond au survol */
}


.notification-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2);
    padding: 5px;
    margin-bottom: 15px;
}

.notificationia {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ECFDF5;
    border-radius: 8px;
    margin-bottom: 10px;
    width: 100%;
}

    .notificationia .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .notificationia .content {
        flex: 1;
    }

    .notificationia .title {
        font-weight: bold;
        color: #166fd4;
        font-size: 15px;
    }

    .notificationia .description {
        color: #0d65ff;
        font-size: 11px;
        width: 100%;
    }

.notifications-container {
    width: 100%;
}






/* khaoula mabrouk 01 03 24*/
/* style page content */

.active-item {
    color: #096fb7;
    /*  la couleur du texte */
    font-weight: bold; /* Changer le style de police */
    /* Autres styles CSS si nécessaire */
}

.page-toc-card {
    -webkit-text-size-adjust: 100%;
    word-break: normal;
    tab-size: 4;
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    background-repeat: no-repeat;
    box-sizing: inherit;
    padding: 0;
    margin: 10px;
    border-width: thin;
    display: block;
    max-width: 100%;
    outline: none;
    text-decoration: none;
    transition-property: box-shadow, opacity;
    overflow-wrap: break-word;
    position: relative;
    white-space: normal;
    margin-bottom: 10px !important;
    border-color: #fff;
    background-color: #fff;
    color: rgba(0, 0, 0, .87);
    border-radius: 4px;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2); /* Ombre avec couleur bleue */
}

.v-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.v-list-item {
    display: flex;
    align-items: center;
    padding: 5px;
    height: auto;
}

.v-list-item--link {
    color: inherit;
}

.v-list-item__title {
    flex: auto;
}

.v-icon {
    margin-right: 12px;
}

.container {
    background-color: #f9f9f9;
}

/* style sidebar */
.cardhelp {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 10px;
    margin: 5px; /* Réduire l'espacement à 5px */
    /* overflow: hidden; /* Pour cacher le débordement du sidebar */
}

.sidebar {
    background-color: #f5f5f5;
    max-height: 300px;
    padding: 10px;
}

/* Style du header du sidebar */
.sidebar-header {
    border-radius: 5px;
    text-align: center;
    margin-bottom: auto;
    color: #096fb7; /* Couleur du texte blanc */
    padding: 10px; /* Ajout de padding */
}


/* Style des éléments de menu */
.menu-item {
    list-style: none;
    margin-bottom: 10px;
}

    .menu-item span {
        text-decoration: none;
        /*color: #000; /* Couleur du texte noir pour les éléments */
        display: block;
        padding: 10px; /* Ajout de padding pour l'espace intérieur des éléments */
        transition: all 0.3s ease;
    }



/* Style pour les sous-menus */
.sub-menu {
    padding-left: 10px; /* Ajout d'un décalage pour les sous-menus */
    /* text-decoration-color: #777; /* Couleur du texte gris plus foncé */
}

.sub-menu-item {
    border-bottom: none; /* Suppression de la ligne séparatrice pour les sous-éléments */
    /*  text-decoration-color: #777; /* Couleur du texte gris plus foncé */
}

    .sub-menu-item span {
        padding: 5px 0px 5px 10px; /* Ajustement du padding pour les sous-éléments */
    }

/* Style pour les sous-sous-menus */
.sub-sub-menu {
}

.sub-sub-menu-item {
    border-bottom: none; /* Suppression de la ligne séparatrice pour les sous-sous-éléments */
    /*color: #777; /* Couleur du texte gris plus foncé */
}

    .sub-sub-menu-item span {
        padding: 5px 0px 5px 10px; /* Ajustement du padding pour les sous-sous-éléments */
        /*color: #777; /* Couleur du texte gris plus foncé */
    }

/* khaoula mabrouk  27 03 24 */
.item {
    margin-bottom: 10px;
    border: 1px solid #808080;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .item:hover {
        background-color: #ececec;
    }

.title {
    cursor: pointer;
    display: inline-block;
    color: #333; /* Couleur de texte moins foncée */
    font-weight: bold; /* Rendre le titre en gras */
}

.toggle {
    position: absolute;
    top: 5px; /* Ajuster la position verticale */
    right: 5px; /* Ajuster la position horizontale */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold; /* Rendre le texte en gras */
    color: #000; /* Couleur noire */
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

    .toggle:hover {
        color: #333; /* Couleur noire foncée au survol */
    }

.description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*max-width: 80%;  Ajustez selon vos besoins */
    color: #333; /* Couleur de texte moins foncée */
    width: 100%;
}

    .description.show {
        white-space: initial;
        max-width: initial;
    }

/* khaoula mabrouk  27 03 24 */
.item {
    margin-bottom: 10px;
    border: 1px solid #808080;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .item:hover {
        background-color: #ececec;
    }

.title {
    cursor: pointer;
    display: inline-block;
    color: #333; /* Couleur de texte moins foncée */
    font-weight: bold; /* Rendre le titre en gras */
}

.toggle {
    position: absolute;
    top: 5px; /* Ajuster la position verticale */
    right: 5px; /* Ajuster la position horizontale */
    cursor: pointer;
    font-size: 20px;
    font-weight: bold; /* Rendre le texte en gras */
    color: #000; /* Couleur noire */
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

    .toggle:hover {
        color: #333; /* Couleur noire foncée au survol */
    }

.description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%; /* Ajustez selon vos besoins */
    color: #333; /* Couleur de texte moins foncée */
}

    .description.show {
        white-space: initial;
        max-width: initial;
    }

.btn-confirm {
    background-color: white;
    color: #096fb7; /* Couleur du texte */
}

.page-header-section {
    padding: 10px; /* Espacement intérieur */
}

.headline {
    font-weight: bold; /* Gras */
    padding-top: 20px; /* Espacement en haut */
}


.textareareadonlydescription {
    margin-left: 2.5rem;
    margin-right: 2rem;
}

    .textareareadonlydescription figure p {
        word-wrap: break-word;
    }

    .textareareadonlydescription figure img {
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

    .textareareadonlydescription figure {
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

    .textareareadonlydescription iframe {
        max-width: 100%; /* les images seront limitées à la largeur de leur parent */
    }

[ng-repeat="itmss in lstchapitre | orderBy:'displayorder'"]:hover {
    background-color: #f5f5f5; /* Couleur de fond au survol */
}

/* Appliquez la même valeur de padding à tous les côtés */
#droitscroll, #centerscroll {
    padding: 1em; /* Remplacez 1em par la valeur de votre choix */
}

overline pa-5 pb-0 primary--text
/* Si vous souhaitez spécifier des valeurs différentes pour chaque côté */
#droitscroll {
    padding-left: 0.5em; /* Remplacez 0.5em par la valeur souhaitée */
}

#centerscroll {
    padding-left: 2em; /* Remplacez 2em par la valeur souhaitée */
}

.notification-card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2);
    padding: 5px;
    margin-bottom: 15px;
}

.notificationia {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ECFDF5;
    border-radius: 8px;
    margin-bottom: 10px;
    width: 100%;
}

    .notificationia .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    .notificationia .content {
        flex: 1;
    }

    .notificationia .title {
        font-weight: bold;
        color: #166fd4;
        font-size: 15px;
    }

    .notificationia .description {
        color: #0d65ff;
        font-size: 11px;
        width: 100%;
    }

.notifications-container {
    width: 100%;
    padding-left: 8px;
}

.translate-container {
    padding: 10px;
}



    .translate-container label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
    }

    .translate-container select,
    .translate-container input,
    .translate-container textarea {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
    }

    .translate-container textarea {
        resize: vertical;
    }

    .translate-container button {
        margin-top: 20px;
        background-color: #085b99;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

        .translate-container button:hover {
            background-color: #064a7a;
        }


        /* by khawla 03 09 2024 */



#chat-widget {
    width: 320px;
    position: fixed;
    bottom: -1px;
    right: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    background-color: #f3f3f3;
    z-index: 1000;
    flex-direction: column;
}

#chat-widget .card-header {
    color: #ddd;
    height: 46px;
    border-radius: 5px 5px 0px 0px;
    padding: 18px;
}

#chat-widget .btn-close {
    color: #fff;
    position: absolute;
    padding: 10px;
    right: 10px;
    transform: translateY(-50%);
}

#chat-widget .card-body {
    margin-right: 1px;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    margin-top: 10px
}

#chat-widget .card-footer {
}

#chat-widget-input {
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 15px;
    font-size: 13px;
}

#chat-widget-button {
    width: 350px;
    height: 40px;
    font-size: 20px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: none;
    border-radius: 4px;
    background-color: white;
    color: dimgrey;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration-color: black;
}


#chat-widget-messages .user-message {
    border-radius: 10px 0px 10px 10px;
    width: 200px;
    height: auto;
    color: #333;
    background: #e5fcf4;
    align-self: flex-end;
    margin-right: 10px;
    margin-left: 85px;
    margin-bottom: 25px;
    margin-top: 15px;
}



    #chat-widget-messages .user-message .message-time {
        font-size: 8px;
        color: #666;
        margin-bottom: -14px;
        margin-left: 127px;
    }

#chat-widget-messages .bot-message .message-time {
    font-size: 8px;
    color: #666;
    margin-bottom: -13px;
    margin-left: 124px;
}

#chat-widget-messages .bot-message {
    border-radius: 0px 10px 10px 10px;
    width: 200px;
    height: auto;
    color: #333;
    background-color: #e4eeff;
    align-self: flex-start;
    margin-right: 10px;
    margin-left: 27px;
    margin-bottom: 24px;
    justify-content: flex-end;
    font-size: 13px;
}

#chat-widget-messages {
    margin: 10px 0;
}



    /* Styles pour la barre de défilement */
    #chat-widget-messages::-webkit-scrollbar {
        width: 5px;
    }

    /* Barre de défilement de la piste */
    #chat-widget-messages::-webkit-scrollbar-track {
        background: #ffffff;
    }

    /* Styles pour le bouton de défilement de la poignée */
    #chat-widget-messages::-webkit-scrollbar-thumb {
        background: #DCDCDC;
        border-radius: 5px;
    }

        /* Changement de couleur de la poignée au survol */
        #chat-widget-messages::-webkit-scrollbar-thumb:hover {
            background: #c1c1c1;
        }


.confirmation-box {
    z-index: 9999;
}

.confirmation-content {
    z-index: 9999;
    background-color: #fefefe;
    width: 316px;
    HEIGHT: 364px;
    margin: 20% auto;
    padding: 20px;
    /* border-radius: 5px; */
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
    margin-top: -10px;
    position: fixed;
    border-top: 2px solid #f7f7f7;
}

    .confirmation-content p {
    }

.button-container {
    text-align: center;
}

.buttondesign {
    padding: 8px 20px;
    /* margin: 0 10px; */
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white;
    color: #355ca9;
    cursor: pointer;
    width: 286px;
    text-align: center;
    margin-top: 21px;
    height: 38px;
    font-size: 13px;
    font-weight: 600;
    margin-left: -7px;
}

buttondesign:focus {
    outline: none;
}


/* by khawla 07 09 2024 */
.contextuelmenuviewhelp {
    font-size: 2.3rem;
    border: 1px solid #D9D9D9;
    margin-right: 7rem;
    margin-top: 6rem;
    background-color: #FFFFFF;
    z-index: 9900;
    max-width: 250px;
    right: 0;
    position: absolute;
    top: 3rem;
}

    .contextuelmenuviewhelp :hover {
        background: #DFF2FF;
    }

/* by khawla 11 09 2024 */
.contextuelmenuviewhelpedit {
    font-size: 2.3rem;
    border: 1px solid #D9D9D9;
    margin-right: 2rem;
    margin-top: 2rem;
    background-color: #FFFFFF;
    z-index: 9900;
    max-width: 250px;
    right: 0;
    position: absolute;
    top: 2rem;
}

.contextuelmenuviewhelpedit :hover {
    background: #DFF2FF;
}

/* by khawla 27 09 2024 */


#chat-widget-messagerie .user-message {
    border-radius: 10px 0px 10px 10px;
    width: 200px;
    height: auto;
    color: #333;
    background: #e5fcf4;
    align-self: flex-end;
    margin-right: 10px;
    margin-left: 85px;
    margin-bottom: 25px;
    margin-top: 15px;
}



    #chat-widget-messagerie .user-message .message-time {
        font-size: 8px;
        color: #666;
        margin-bottom: -14px;
        margin-left: 127px;
    }

#chat-widget-messagerie .bot-message .message-time {
    font-size: 8px;
    color: #666;
    margin-bottom: -13px;
    margin-left: 124px;
}

#chat-widget-messagerie .bot-message {
    border-radius: 0px 10px 10px 10px;
    width: 200px;
    height: auto;
    color: #333;
    background-color: #e4eeff;
    align-self: flex-start;
    margin-right: 10px;
    margin-left: 27px;
    margin-bottom: 24px;
    justify-content: flex-end;
    font-size: 13px;
}

/*#chat-widget-messagerie {
    margin: 10px 0;
}*/



    /* Styles pour la barre de défilement */
    #chat-widget-messagerie::-webkit-scrollbar {
        width: 5px;
    }

    /* Barre de défilement de la piste */
    #chat-widget-messagerie::-webkit-scrollbar-track {
        background: #ffffff;
    }

    /* Styles pour le bouton de défilement de la poignée */
    #chat-widget-messagerie::-webkit-scrollbar-thumb {
        background: #DCDCDC;
        border-radius: 5px;
    }

        /* Changement de couleur de la poignée au survol */
        #chat-widget-messagerie::-webkit-scrollbar-thumb:hover {
            background: #c1c1c1;
        }

        /* by khawla 17 11 2024 */

/* #chating-widget-messagerie {
    margin: 10px 0;
}*/



    /* Styles pour la barre de défilement */
    #chating-widget-messagerie::-webkit-scrollbar {
        width: 5px;
    }

    /* Barre de défilement de la piste */
    #chating-widget-messagerie::-webkit-scrollbar-track {
        background: #ffffff;
    }

    /* Styles pour le bouton de défilement de la poignée */
    #chating-widget-messagerie::-webkit-scrollbar-thumb {
        background: #DCDCDC;
        border-radius: 5px;
    }

        /* Changement de couleur de la poignée au survol */
        #chating-widget-messagerie::-webkit-scrollbar-thumb:hover {
            background: #c1c1c1;
        }



/*#arborescence-widget {
    margin: 10px 0;
}*/



    /* Styles pour la barre de défilement */
    #arborescence-widget::-webkit-scrollbar {
        width: 5px;
    }

    /* Barre de défilement de la piste */
    #arborescence-widget::-webkit-scrollbar-track {
        background: #ffffff;
    }

    /* Styles pour le bouton de défilement de la poignée */
    #arborescence-widget::-webkit-scrollbar-thumb {
        background: #DCDCDC;
        border-radius: 5px;
    }

        /* Changement de couleur de la poignée au survol */
        #arborescence-widget::-webkit-scrollbar-thumb:hover {
            background: #c1c1c1;
        }

        /* by khawla 29 11 2024 */
.contextuelmenuviewchatemojie {
    padding: 1rem;
    position: fixed;
    width: 392px;
    height: 392px;
    font-size: 2.3rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 5px;
    margin-right: .5rem;
    background-color: #FFFFFF;
    overflow-y: auto; /* Ensures scrolling when the content overflows */
}




/* Styles pour la barre de défilement */
#MenuchatsimpleEMOJIE::-webkit-scrollbar {
    width: 5px;
}

/* Barre de défilement de la piste */
#MenuchatsimpleEMOJIE::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Styles pour le bouton de défilement de la poignée */
#MenuchatsimpleEMOJIE::-webkit-scrollbar-thumb {
    background: #DCDCDC;
    border-radius: 5px;
}

    /* Changement de couleur de la poignée au survol */
    #MenuchatsimpleEMOJIE::-webkit-scrollbar-thumb:hover {
        background: #c1c1c1;
    }



/* Styles pour la barre de défilement */
#MenuchatsimpleEMOJIEnewchat::-webkit-scrollbar {
    width: 5px;
}

/* Barre de défilement de la piste */
#MenuchatsimpleEMOJIEnewchat::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Styles pour le bouton de défilement de la poignée */
#MenuchatsimpleEMOJIEnewchat::-webkit-scrollbar-thumb {
    background: #DCDCDC;
    border-radius: 5px;
}

    /* Changement de couleur de la poignée au survol */
    #MenuchatsimpleEMOJIEnewchat::-webkit-scrollbar-thumb:hover {
        background: #c1c1c1;
    }




.contextuelmenuviewchatemojiechat {
    padding: 1rem;
    position: fixed;
    width: 292px;
    height: 292px;
    font-size: 2.3rem;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    border-radius: 5px;
    margin-right: .5rem;
    background-color: #FFFFFF;
    overflow-y: auto; /* Ensures scrolling when the content overflows */
}

/* by khawla 01 12 2024 */

/* Styles pour la barre de défilement */
#MenuchatsimpleEMOJIEnewchatemojie::-webkit-scrollbar {
    width: 5px;
}

/* Barre de défilement de la piste */
#MenuchatsimpleEMOJIEnewchatemojie::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Styles pour le bouton de défilement de la poignée */
#MenuchatsimpleEMOJIEnewchatemojie::-webkit-scrollbar-thumb {
    background: #DCDCDC;
    border-radius: 5px;
}

    /* Changement de couleur de la poignée au survol */
    #MenuchatsimpleEMOJIEnewchatemojie::-webkit-scrollbar-thumb:hover {
        background: #c1c1c1;
    }

    /* by khawla 02 12 2024 */

/* Styles pour la barre de défilement */
#gifnewchatscroll::-webkit-scrollbar {
    width: 5px;
}

/* Barre de défilement de la piste */
#gifnewchatscroll::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Styles pour le bouton de défilement de la poignée */
#gifnewchatscroll::-webkit-scrollbar-thumb {
    background: #DCDCDC;
    border-radius: 5px;
}

    /* Changement de couleur de la poignée au survol */
    #gifnewchatscroll::-webkit-scrollbar-thumb:hover {
        background: #c1c1c1;
    }



/* Styles pour la barre de défilement */
#gifchatscroll::-webkit-scrollbar {
    width: 5px;
}

/* Barre de défilement de la piste */
#gifchatscroll::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Styles pour le bouton de défilement de la poignée */
#gifchatscroll::-webkit-scrollbar-thumb {
    background: #DCDCDC;
    border-radius: 5px;
}

    /* Changement de couleur de la poignée au survol */
    #gifchatscroll::-webkit-scrollbar-thumb:hover {
        background: #c1c1c1;
    }

    /* by khawla 26 12 2024 */
.chatingdetailform{

}
.chatingdetailformdetai{

}

/* by khawla 13 03 2025 */

.custom-button {
    border: 1px solid #243875 !important;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    cursor: pointer;
    color: white;
    font-size: 16px;
}

    .custom-button img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid white;
    }

    /* by khawla 08 05 2025 */
/* Styles pour la barre de défilement */
#detailsearchscroll::-webkit-scrollbar {
    width: 5px;
}

/* Barre de défilement de la piste */
#detailsearchscroll::-webkit-scrollbar-track {
    background: #ffffff;
}

/* Styles pour le bouton de défilement de la poignée */
#detailsearchscroll::-webkit-scrollbar-thumb {
    background: #DCDCDC;
    border-radius: 5px;
}

    /* Changement de couleur de la poignée au survol */
    #detailsearchscroll::-webkit-scrollbar-thumb:hover {
        background: #c1c1c1;
    }

.footerstyle {
    display: flex ;
    flex-direction: column ;
    height: 90vh ;
    padding-top: 1em ;
    overflow: hidden ;
}
.footerdetail {
    margin-top: auto;
    padding-bottom: 60px
}
.buttonstatdetail {
    flex: 1;
}
.headermobile {
}

/* by khawla 03 06 2025 */
#CKeditor5descriptionObject p {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    margin: 0;
}


/* by khawla 07 06 2025 */

.subcribe-form .btn {
    padding: 10px 20px;
}

.subcribe-form input {
    padding: 12px 20px;
    width: 100%;
    color: #3c4858 !important;
    border: none;
    outline: none !important;
    padding-right: 160px;
    padding-left: 30px;
    background-color: #fcfcfc;
    height: 50px;
}

.subcribe-form button {
    position: absolute;
    top: 2px;
    right: 3px;
    outline: none !important;
}

.subcribe-form form {
    position: relative;
    max-width: 600px;
    margin: 0px auto;
    background-color: #f7f7f7;
}



/* by khawla 13 06 2025 */


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ulstyle {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}



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

.center {
    justify-content: center;
    flex: 1;
}

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

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

.notification-badge {
    position: absolute;
    top: -5px;
    right: -12px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
}

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

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: 'Nunito', sans-serif;
}

.modern-select {
    width: 100%;
    padding: 8px 40px 8px 12px;
    font-size: 2rem;
    color: #495057;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 1px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

    .modern-select:focus {
        outline: none;
        border-color: #007bff;
    }

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 2rem;
    color: #888;
}





/* by khawla 22 10 2025 */

.dashboard-page {
    --bg: #f6f7fb;
    --card: #ffffff;
    --muted: #9aa3af;
    --accent: #6c5ce7;
    --green: #13cb8f;
    --danger: #ff6b6b;
    --soft: #f1f3f6;
    --shadow: 0 6px 18px rgba(22,30,60,0.06);
    --border-radius: 12px;
    --gap: 18px;
    --container-width: 1200px;
}

.dashboard-page html,
.dashboard-page body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.dashboard-page body {
    background: var(--bg);
    color: #24303a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 28px;
    box-sizing: border-box;
}

/* Layout */
.dashboard-page .wrap {
    max-width: var(--container-width);
    margin: 0 auto;
}

.dashboard-page .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
}

/* Small cards top */
.dashboard-page .card {
    background: var(--card);
    border-radius: var(--border-radius);
    padding: 18px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(20,30,60,0.03);
}

.dashboard-page .kpi {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .dashboard-page .kpi .label {
        /*font-size: 0.9rem;*/
        color: var(--muted);
    }

    .dashboard-page .kpi .value {
        font-weight: 700;
        /*  font-size: 1.6rem;*/
        color: #4b4f6b;
    }

    .dashboard-page .kpi .delta {
        /*font-size: 0.85rem;*/
        color: var(--green);
        margin-top: 6px;
    }

/* grid placement helpers */
.dashboard-page .col-3 {
    grid-column: span 3;
}

.dashboard-page .col-6 {
    grid-column: span 6;
}

.dashboard-page .col-4 {
    grid-column: span 4;
}

.dashboard-page .col-8 {
    grid-column: span 8;
}

.dashboard-page .col-12 {
    grid-column: span 12;
}

/* charts area */
.dashboard-page .charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: start;
}

/* small boxes under charts */
.dashboard-page .mini-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
    margin-top: var(--gap);
}

/* card title */
.dashboard-page .card h3 {
    margin: 0 0 8px 0;
    /* font-size: 1rem;*/
    color: #344156;
    font-weight: 600;
}

/* Legend / pills */
.dashboard-page .pills {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.dashboard-page .pill {
    background: var(--soft);
    padding: 6px 10px;
    border-radius: 20px;
    /*font-size: 0.85rem;*/
    color: #425461;
}

/* canvas responsive */
.dashboard-page .canvas-wrap {
    width: 100%;
    height: 320px;
    position: relative;
}

/* donut card */
.dashboard-page .donut-wrap {
    display: flex;
    align-items: center;
    /*gap: 18px;*/
}




.dashboard-page .donut-legend {
    /* font-size: 0.9rem;*/
    color: var(--muted);
}

/* list card */
.dashboard-page .list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.04);
}

    .dashboard-page .list-item:last-child {
        border-bottom: 0;
    }

/* CTA or stat card */
.dashboard-page .big-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 160px;
    text-align: center;
}

    .dashboard-page .big-stat .num {
        /*font-size: 2.4rem;*/
        font-weight: 700;
        color: #e94e5b;
    }

    .dashboard-page .big-stat .desc {
        color: var(--muted);
        /*   font-size: 0.9rem;*/
    }

/* responsive */
@media (max-width:1000px) {
    .dashboard-page .grid {
        grid-template-columns: repeat(6,1fr);
    }

    .dashboard-page .col-3 {
        grid-column: span 3;
    }

    .dashboard-page .col-6 {
        grid-column: span 6;
    }

    .dashboard-page .col-4 {
        grid-column: span 6;
    }

    .dashboard-page .col-8 {
        grid-column: span 6;
    }

    .dashboard-page .charts-row {
        grid-template-columns: 1fr;
    }

    .dashboard-page .mini-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:600px) {
    .dashboard-page .grid {
        grid-template-columns: repeat(1,1fr);
    }

    .dashboard-page .col-3,
    .dashboard-page .col-4,
    .dashboard-page .col-6,
    .dashboard-page .col-8,
    .dashboard-page .col-12 {
        grid-column: span 1;
    }

    .dashboard-page .mini-row {
        grid-template-columns: 1fr;
    }
}

/* small neat styles for axes and points (canvas-drawn but we can style fallback elements) */
.dashboard-page .muted-small {
    color: var(--muted);
    /* font-size: 0.85rem;*/
}

.dashboard-page .center {
    text-align: center;
}



/* Empêche les graphiques (canvas) de dépasser le cadre blanc */
.dashboard-page .card .canvas-wrap {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden; /* 🔥 empêche le débordement */
    border-radius: var(--border-radius); /* arrondit les bords du contenu interne */
}

.dashboard-page .card canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* garde le canvas bien à l'intérieur */
    border-radius: inherit;
}



.pill.active {
    background: var(--accent);
    color: white;
}