@media screen and (min-width: 50px) {
    /************ RESET ***************/
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    .mb-5,.mobile-mb-5{
        margin-bottom:5px!important;
    }
     .mb-10,.mobile-mb-10{
        margin-bottom:10px!important;
    }
     .pd-b-10{
        padding-bottom:10px!important;
    }
    .pd-b-5{
        padding-bottom:5px!important;
    }
    .mt-5,.mobile-mt-5{
        margin-bottom:5px!important;
    }
    
    .mt-10,.mobile-mt-10{
        margin-bottom:10px!important;
    }
    .border-top{
        border-top: 1px solid #ddd!important;
    }
    
    .uppercase{
        text-transform:uppercase!important;
    }
    
    .hidden{
        display:none;
    }
    .no-border{
        border:0px!important;
        border:none!important;
    }
    .bold{
        font-weight:bold;
    }
    /*Scroll bar*/
    
    /* For WebKit browsers (e.g., Chrome, Safari) */
/* Note: These properties may only work in older versions of WebKit */
div.scroll_style1::-webkit-srollbarc,div::-webkit-scrollbar {
  width: 0px!important; /* width of the scrollbar */
}
div.scroll_style1:hover::-webkit-scrollbar,div:hover::-webkit-scrollbar {
  width: 0px; /* width of the scrollbar */
}

div.scroll_style1::-webkit-scrollbar-track,div::-webkit-scrollbar-track {
  background: #fff; /* color of the track */
}

div.scroll_style1::-webkit-scrollbar-thumb,div::-webkit-scrollbar-thumb {
  background: #888; /* color of the scrollbar */
}

div.scroll_style1::-webkit-scrollbar-thumb:hover,div::-webkit-scrollbar-thumb:hover {
  background: #555; /* color of the scrollbar when hovered */
}
div.scroll_style1,div {
  scrollbar-width: none;  
}
.no-bkg{
    background:none!important;
}
.no-border{
    border:none;
}
div.scroll_style1:hover,div:hover {
  scrollbar-width: 0;  
}
/* For Firefox */
/* Note: Firefox as of version 64 supports scrollbar styling without -moz prefix */
/* However, older versions might need the -moz prefix */

/* Track 
div.scroll_style1,div  {
  scrollbar-color: #888 #fff;  thumb color and track color 
}
*/
/*
div.scroll_style1,div {
  scrollbar-width: thin;  set the width of the scrollbar 
}
*/


.error_band{
    display: inline-block;
    width: 100%;
    text-align: center;
    background: #ffdbdb;
    color: #000;
    border: 1px solid #ff4e4e;
    border-radius: 5px;
    margin: 10px 0px;
    font-size: 0.8em;
    padding:10px;
}


.flashmessage {
    position: fixed;
    top: 90px;
    z-index: 9999;
    display: block;
    height: 40px;
    width: 400px;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
 
      line-height: 40px;
       font-size: 1.0em;
    font-weight: bold;  
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      text-align: center;
}
.flashmessage.success {
    
  
    background: #ddffdd;
    color: #009f18;
   
    
}
.flashmessage.error {
        background: #fbe3e3;
   
    color: #9f0000;

}

.success-message {
    background: green;
    text-align: center;
    color: #fff;
    padding: 5px 10px;
    border-radius: 3px;
    margin: 10px 0px 20px 0px;
}

    /*--Select css*/
    .no-wrap {
      white-space: nowrap;
        width: 100%;
        overflow: hidden;
    }
    
    /*---image file input*/

    
    .lb-data .lb-close{
        
        background-size:20px!important;
    }
    textarea:focus, input:focus{
    outline: none;
    }
   select::first-letter{
        text-transform: uppercase!important;
    }
    select option::first-letter{
        text-transform: uppercase!important;
    }
     select{
        background:#fff;
    }
    strong {
        font-weight: bold;
        text-decoration:none;
    }
    .overflow-auto {
        overflow: auto!important;
    }
    
    .pd-10{
        padding:10px!important;
    }
.strong{
    font-weight:bold;
}
.field-message {
    font-size: 0.8em;
    color: #777;
    padding-right: 10px;
}

.app_list_item_wrapper{}
.app_list_item{
    background-color: #002dfa ;
    background-image:url(https://afriliks.com/public/img/icons/ui_icons/newspaper_white.png); 
    background-repeat:no-repeat;
    background-position-x: center!important;
    background-position-y: center!important;
    background-size: 23px!important;
    width:  45px;
    max-width: 45px;
    height: 45px;
    text-indent: -99999px;
    margin: 0 auto;
    margin-bottom: 5px;
    border-radius: 50%;
}
 .actualite_bkg{
      background-color: #496e9e!important;
    background-image:url(https://afriliks.com/public/img/icons/ui_icons/newspaper_white.png)!important;
 }
 
  .feeds_bkg{
    
    background-image:url(https://afriliks.com/public/img/icons/ui_icons/travel_explore.png)!important;
 }
 
  .annonces_bkg{
 
       background-color: #1fb141!important;
    background-image:url(https://afriliks.com/public/img/icons/ui_icons/storefront_white.png)!important;
 }
 .weather_bkg{
      background-image:url(https://afriliks.com/public/img/icons/ui_icons/light_mode_white.png)!important;
          background-color: #444;
 }
 
  .account_circle_bkg{
      background-image:url(https://afriliks.com/public/img/icons/ui_icons/account_circle_white.png)!important;
 }
 
  .location_bkg{
      background-image:url(https://afriliks.com/public/img/icons/ui_icons/location_on_white.png)!important;
 }
 
 .booking_bkg{
      background-color:#008e93!important;
 background-image:url(https://afriliks.com/public/img/icons/airplane_ticket_white.png)!important;
 }
 
 .apay_bkg{
     
     background-color: darkblue!important;
     
 background-image:url(https://afriliks.com/public/img/icons/a_pay.png)!important;
 }
 
  .calculator_bkg{
      background-image:url(https://afriliks.com/public/img/icons/ui_icons/calculator.png)!important;
          background-color: brown!important;
 }
 
 .mconverster_bkg{
     background-image:url(https://afriliks.com/public/img/icons/ui_icons/currency_exchange.png)!important;
    background-color: #222!important;
 }
  .finance_bkg{
     background-image:url(https://afriliks.com/img/icons/ui_icons/finance_mode_white.png)!important;
    background-color: #007f1e!important;
 }
 
 .error{
     color:red;
 }
  .emploi_bkg{

        background-color: purple!important;
    background-image:url(https://afriliks.com/public/img/icons/ui_icons/work_white.png)!important;
 }
 .more_app_bkg{
      background-image:url(https://afriliks.com/public/img/icons/ui_icons/more_horiz_white.png)!important;
 }
 
    input[type="checkbox"] {
       display: inline!important;
    width: 15px!important;
    margin: 0!important;
    margin-right: 5px!important;
    height: 14px!important;
    padding: 0!important;
    line-height: 30px!important;
    border-radius: 0!important;
    float: left!important;
}
.checkbox-field{
    float:none!important;
    clear:both!important;
        margin-bottom: 10px!important;
    margin-top: 0px!important;
}
    html,
    body {
        height: 100%;
        margin: 0px;
        color: #444;
        overflow-x:hidden;
        /*font-family: "Segoe UI", 'News Cycle', sans-serif;*/
    }
     :root {
        --swiper-theme-color: #ffffff!important;
    }
      .text-center{
        
        text-align:center!important;
    }
    .text-bold{
        font-weight:bolder;
    }
    .desktop {
        display: none!important;
    }
    .width_1 {
        width: 100%!important;
    }
    .min_page_height{
        min-height:600px;
    }
    
    .mobile-header.sticky {
        position: fixed!important;
        left: 0px;
        right: 0px;
        top: 0px;
        transition: 0.6s;
        z-index: 999;
    }
  
    
    .header.mainpage .header2 .sitename2 img{
       width: 100% !important;
        max-width: 130px !important;
        position: relative !important;
        top: 45px !important;
                margin: 0 auto;

    
    }
    
    
    
    
   .header.mainpage .header2 .sitename2 img.light{
         display:none;
     }
     
     .img_background img.site_logo.dark{
    display:none!important;
}
.img_background img.site_logo.light{
    display:block!important;
}


    .sticky .header1 a.mobile-menu-button svg{
        display:none!important;
    }
    .sticky .header.mainpage .header2 .sitename2 img.dark{
        display:none!important;
    }
    .sticky .header.mainpage .header2 .sitename2 img.light{
        display:inline-block;
                margin-top: -45px;
         width: 50% !important;
    }
    .sticky header.style1 .header3 .user-icon.apps {
    background-image: url(https://afriliks.com/public/img/icons/ui_icons/apps_white.png)!important;
}

 .sticky header.style1 .header3 .user-icon.login {
    background-image: url(https://afriliks.com/public/img/icons/ui_icons/person_white.png)!important;
    background-size: 26px;
}
.sticky .header1 .mobile-menu-button img{
    width: 28px !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0px !important;
    
}
.sticky #mobile-menu-button{
    background:none!important;
}

  
    
 .line-height-normal{
     line-height:normal;
      margin-bottom: 10px;
 }   
 .line-height-normal label, .line-height-normal strong{
     display:inline-block;
     margin: 5px 0px;
 }
    .user_geolocation_btn{
        background: #33333369;
        color: #ccccccad;
        border-radius: 50%;
    }
    .user_geolocation_btn i {
        font-size: 16px!important;
    }
    td .green {
    background: green;
    color: #fff;
    margin: 5px;
    padding: 5px;
    font-size: 0.8em;
    border-radius: 5px;
        display: inline-block;
    margin-bottom: 5px;

}
    td .yellow {
    background: orange;
    color: #fff;
    margin: 5px;
    padding: 5px;
    font-size: 0.8em;
    border-radius: 5px;
        display: inline-block;
    margin-bottom: 5px;

}

    td .red {
    background: red;
    color: #fff;
    margin: 5px;
    padding: 5px;
    font-size: 0.8em;
    border-radius: 5px;
        display: inline-block;
    margin-bottom: 5px;

}


    .warning-wrapper{
        color:#fff;
        background:#af0000;
        min-height:30px;
        line-height:30px;
        text-align:center;
        padding:10px 0px;
            padding: 10px 10px;
    }
    .warning-wrapper .accordion_title{
        font-weight:bold;
        border-bottom:none!important;
        line-height: normal;
    }
    .warning-wrapper .accordion_content h3{
        font-weight:bold;
        font-size:1.3em!important;
            margin-bottom: 20px;
    }
    .warning-wrapper .accordion_content{
        text-align:left;
        background: #fff;
    color: #444;
    margin-bottom:20px;
        
    }
    
    /*------BUTTON STYLES----*/
    
    .btn-style-1 {
    display: inline-block;
    padding: 9px;
    border-radius: 2px;
    background-color: #002dfa;
    border: #002dfa 1px solid;
    color: #ddd;
    font-size: 0.9em;
    margin-left: 5px;
    font-weight: bold;
    border-radius:5px;
}
a.btn{
   
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    color:#444!important;

}
.cofrimation_message{
    padding: 10px!important;
    text-align: center!important;
    min-height: 400px;
    font-size: 1.1em;


}
.cofrimation_message h2{
    font-size:1.5em!important;
        font-weight: bold;
    margin-bottom: 20px;
      

}
.cofrimation_message button{
    background: #666!important;
    color: #fff!important;
    text-align: center!important;
    display: inline-block;
    padding: 10px 20px;
    border: 0px;
    border-radius: 5px;
}
.capitalized{
    text-transform:capitalize;
}
    /*-----HEADER -------*/
    * {
        box-sizing: border-box;
    }
    .color-back {
        color: #fff;
        background: #000;
    }
    header {
        background-color: red;
    }
    /*---Header design style 1*/
    header.style1 {
        background: none!important;
        box-shadow: none!important;
            border: none!important;
    height: auto!important;
    }
    header.style1 i,
    header.style1 svg {
        color: #444;
        font-size: 0.7em;
    }
    header.style1 a.logo {
        display: none!important;
    }
    header.style1 .header3 .user-icon {
        color: #fff;
        font-size: 2.5em;
        position: relative;
        background-image:url(https://afriliks.com/public/img/icons/ui_icons/person.png) top left no-repeat;
     
    }
    header.style1 .header3 .user-icon.login {
        position: relative;
        background-image: url(https://afriliks.com/public/img/icons/ui_icons/person.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px;
    }
    
     header.style1 .header3 .user-icon.apps {
        position: relative;
        background-image: url(https://afriliks.com/public/img/icons/ui_icons/apps_black.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px;
    }
    
    .header3 .user-account-dropdown-menu a {
        display: inline-block!important;
        width: 100%!important;
        padding: 0px 10px!important;
        font-size: 12px!important;
        text-align: left;
        height: 25px!important;
        line-height: 25px!important;
    }
    
    /*--- main page header*/
    
    header.mainpage .header-content{
        display:flex!important;
    }
    
    header.mainpage .header1 {
    width: 20%!important;
    }
    
    header.mainpage .header2 {
        width: 50%!important;
        text-align: center!important;
        position: relative;
        top: 5px;
        left: 10px;
    }
      header.mainpage .header2 .sitename2 {
        text-transform: uppercase!important;
        font-size: 1.5em!important;
        font-weight: 777!important;
        color: #002dfa;
        display: block;
        position: relative;
        top: 3px!important;
    }
    
   header.mainpage .header2 .sitename2 i {
   font-size: 22px!important;
    position: relative!important;
    top: 4px!important;
    display: inline-block!important;
    width: 30px!important;
    height: 30px!important;
    color: #002dfa;
}

    
    a.email-button {
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    color: #444!important;
}

a.email-button i {
    font-size: 16px;
    display: inline;
    line-height: 1px;
    position: relative;
    top: 3px;
}

    
    .job_menu {
     width: 100%;
    margin: 0 auto;
    max-width: 680px!important;
    height: 40px;
    line-height: 40px;
    background: #fff;
    margin-bottom: 5px;
    padding-left: 5px;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
        padding-right: 10px;
    }
    .job_menu a{
        display: inline-block;
        font-weight:400;
        line-height: 30px;
        padding: 0px 10px;
        border: 1px solid #ddd;
        border-radius: 20px;
        height: 30px;
        min-width: 60px;
        text-align: center;
        font-size: 0.9em;
        margin-left: 5px;
    }
    
    .job_menu a.active_menu {
    background: #d661d654;
    color: #620d62;
    border: 1px solid #80148024;
}
    i.search-icon {
            transform: rotateZ(89deg);
            position: relative;
           
            top: -5px;
        /* transform: rotateZ(45deg); */
    }
    .content-wrapper #search-button{
        background:none!important;
    }
    
     .search-list .ful-h-list-item .ful-h-list-item-content {
        padding: 0px 5px 0px 10px;
        min-height: 130px;
        width: 80%!important;
          overflow: hidden;
    }
    .search-list .ful-h-list-item {
        padding:10px!important;
        border-bottom:10px solid #ddd;
    }
    .search-list .ful-h-list-item img{
            width: 20%!important;
            height: 80px!important;
            display: inline-block;
            border-radius: 10px!important;
            object-fit: cover;
            object-position: top;

    }
    .search-page .site-content-region {
         padding: 0px!important;
         min-height:500px;
        }
    .result-msg{
          font-weight: 600;
    padding: 30px 10px 0px 10px;
    font-size: 1.2em;
    }
    .page-title-wrapper{
        width:100%;
        background:#fff;
    }
     .page-title-wrapper-wide{
        width:100%;
        background-color:#eee;
        padding:10px 10px;
    }
      .page-title-wrapper-wide .page-title-row{
         
        position:relative;
        width:100%;
        max-width:980px;
     
        height: 150px;
        margin:0 auto!important;
    }
    .page-title-wrapper-wide .page-title-row .page-title{
          color:gold;
          
    }
    .page-title-wrapper-wide .page-title{
        
      
        font-size:1.8em;
        border:0px!important;
        margin-bottom:10px;
        
    }
    
    .page-title-section{
        padding:10px;
    }
    .page-title-section .page-title{
        
        margin-bottom:10px!important;
    }
    
    .page-title-icon{
        display:block!important;
        text-align:center;
       
    }
    .page-title-icon i{
         font-size:40px!important;
    }
    .grid-list-header.mobile-title .grid-list-title{
        font-size: 1.2em!important;
        padding-left:0px!important;
        
    }
    
    .grid-list-header.mobile-title .separator, .mobile-title .grid-list-title i.material-icons{
        display:none!important;
    }
    
    .hslider-row{
       background: #fff;      
 min-height: 100px!important;
 padding: 5px 10px!important;
    }
     .hslider-row .row-title {
        margin-left: 0px;
        font-size: 1.0em;
        height: 20px;
        line-height: 20px;
    }
     .hslider-list-small{
         background: #fff;
        display: flex !important;
        overflow-x: auto !important;
        min-height: 100px !important;
        margin: 0 auto;
        position: relative!important;
        line-height: 30px!important;

    }
  
     .hslider-list-small .hslider-item{
       min-width: 120px;
       width: 120px;
        text-align: left;
        height: 155px;
        padding: 10px 5px;
        background: #fff;
            border: 1px solid #ddd;
        border: 1px solid #ddd;
        margin: 5px;
        display: block;
        border-radius: 10px;
        font-size: 0.9em;
        line-height: normal;
    }
    .hslider-list-small .hslider-item img{
      width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    background: #fff;
    border: 5px #ccc solid;
    padding: 5px;
    }
     .hslider-list-small .hslider-item .hslider-item-text-content{
            padding: 5px 5px;
            text-align:center;
    }
    .hslider-list-small .hslider-item .title{
        font-weight:400;
        margin:0px 0px;
        display:inline-block;
    }
    .hslider-list-small .hslider-item .title2{
        color:#666;
        display:block;
            font-size: 0.8em;
            line-height:13px;
    }
     .hslider-list-small .hslider-item .title:first-letter,.hslider-list-small .hslider-item .title2:first-letter{
         text-transform:uppercase;
     }
   

    
    .hslider-list-2{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;

    }
    
    .hslider-list-2 .hslider-item {
    position: relative;
    margin-bottom: 10px ;
    margin-right: 0px;
    font-size: 0.9em;
    line-height: 15px;
    padding-right: 5px;
    flex: 0 1 calc(50% - 0px)!important;
    width: 50%!important;
    box-shadow: none!important;
    padding-top: 20%!important;
    min-height: 200px;
}
  

    .hslider-list-2 .grid-col-content{
            margin-right: 5px!important;
    border-radius: 10px;
            height: 100%;
    width: 98%;
    border: #ddd 1px solid;
    background-color: #fff;
    display: inline-block;
    overflow: hidden;
    border-radius: 10px;
    position: absolute;
    top: 0px;
    left: 0px;


        
    }
    .hslider-list-2 .hslider-item img{
      width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    background: #fff;
    border: 5px #ccc solid;
    padding: 5px;
        margin-top: 10px;
    }
     .hslider-list-2 .hslider-item .hslider-item-text-content{
           padding: 5px 5px;
            text-align: center;
            position: relative;
            top: 10px;
    }
    .hslider-list-2 .hslider-item .title{
       font-weight: 600;
        margin: 0px 0px;
        display: inline-block;
        text-align: center;
        font-size: 1.2em;
        text-transform: capitalize;
    }
    .hslider-list-2 .hslider-item .title2{
        color:#666;
        display:block;
        font-size: 0.8em;
        line-height:13px;
        text-transform: capitalize;
    }
     .hslider-list-2 .hslider-item .title:first-letter,.hslider-list-small .hslider-item .title2:first-letter{
         text-transform:uppercase;
     }
     
      .hslider-list-2 .visit_btn{
          margin: 0 auto;
        width: 80%;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: #ddd solid 1px;
        border-radius: 5px;
        display: block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.9em;
        font-weight: bold;
        color: #777;
     }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
 
 
    
   
    
    /*------ header -------*/
    header {
        margin: 0;
        min-height: 45px;
  position:relative;
        background: #002dfa;
        padding: 0px;
        position: relative;
        left: 0;
        right: 0;
        z-index: 300;
      /*box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 8%);*/
      box-shadow: 0 1px 1px rgb(0 0 0 / 15%), 0 2px 6px rgb(123 123 123 / 2%)!important;
    
    height: 40px!important;
    
}
    
    .header1 {
       
        display: inline-block;
        position: relative;
            width: 100%;
    max-width: 220px;
    }
     .header1 .logo {
     
        padding-left: 5px!important;
        color:#444!important;
     }
    .header1  a.mobile-menu-button svg {
        display: block;
        width: 21px!important;
        position: absolute;
        height: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px!important;
        cursor: pointer;
        z-index: 3000;
    }

.header1 #mobile-menu-button{
        left: 0px;
}
    .header2 {
        
        display: inline-block;
        text-align: left;
        position: relative;
    }
    .header3 {
        
        display: inline-block;
        clear: right;
    }
    
   .logo i {
    
         padding: 0px 0px 0px 0px;
    font-size: 1.5em;
    position: relative;
    top: 5px;
    display: inline-block;
    width: 27px;
    height: 25px;
    text-align: left;
    overflow: hidden;
    line-height: 28px;
}
.img_background header.mainpage .header2 .sitename2 img{
    width: 45%;
    max-width: 100px;
}

.img_background .service-list-wrapper {
   
    max-width: 310px!important;
}
.img_background .service-list-item{
       font-size: 0.8em!important;
}
.img_background .service-list-item{
   
    padding: 7px 7px!important;
}

header.mainpage .header2 .sitename2 img{
    width: 45%;
    max-width: 100px;
}
.profilepic {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px #00000012 solid;
    object-fit: cover;
}
i.side-arrow{
    position:absolute;
       left: 110%!important;
    font-size: 1.2em;
}

.user-account-dropdown-menu {
    position: absolute;
    border-radius: 5px;
       left: -180px;
    top: 30px;
    display: none;
    width: 200px;
    min-height: 200px;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 0 0 1px #f1f1f1, 0 0px 1px rgb(0 0 0 / 0%), 0 2px 2px rgb(0 0 0 / 8%);
}

.user-account-dropdown-menu a.profile {
    display: flex!important;
    width: 100%!important;
    height: 60px!important;
    border-bottom: 1px solid #ddd!important;
    padding: 5px 10px!important;
    font-size: 12px!important;

}
.user-account-dropdown-menu a.profile .profilepic {
    width: 45px!important;
    height: 45px;
    font-size: 44px!important;
    float: left;
    border-radius: 50%!important;
    object-fit: cover!important;
}

.user-account-dropdown-menu a.profile .infos {
    padding-top: 5px!important;
    padding-left: 5px!important;
    line-height:normal!important;
    overflow:hidden!important;
}

.user-account-dropdown-menu a {
    display: inline-block!important;
    width: 100%!important;
    padding: 5px 10px!important;
    font-size: 12px!important;
        text-align: left;

}

strong.user_name_profil:first-letter{
    text-transform:uppercase;
    
}
.mobile-app-nav .list-item .material-icons{
    border-radius:50%!important;
}
.mobile-app-nav-title{
        font-weight: 400!important;
}
    .header3 .icons-menu{
        display: inline-block;
    
        height: 25px;
        position: absolute;
        top: 50%;
        transform:translateY(-50%);
        text-align: right;
        right: 8px;
        
    }
    .header3 .icons-menu a{
        position:relative;
        display:inline-block;
        width:25px;
        height:25px;
            margin-left: 0px;
    }
    .header3 .icons-menu a:hover{
        cursor:pointer!important;
    }
     .header3 .icons-menu i{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
            font-size: 23px;
        /*color:#fff;*/
      }
    .submenu {
        display: block;
        width: 100%;
        padding: 10px 20px 10px 0px;
        padding-bottom: 15px;
        white-space: nowrap!important;
        overflow-x: auto!important;
        overflow-y: hidden!important;
    }
    .submenu a {
        display: inline-block;
        padding: 2px 10px;
        border: #e3e9ff 1px solid;
        border-radius: 5px;
        background: #fff;
        text-transform: lowercase;
        height: 30px;
        line-height: 25px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);
    }
    .submenu a:first-letter {
        text-transform: uppercase;
    }
    .submenu a.active_menu,
    .submenu #active {
        background: #002dfa;
        color: #fff;
        border: 1px solid #002dfa;
        box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);
    }
    .header1,
    .header2,
    .header3 {
        
        height: 45px;
        margin: 0px;
        padding: 0px;
       
    }
    .header-menu{
          display: block!important;
        height: 40px;
        line-height: 40px;
        width: 100%;
        margin-bottom:0px;
        /*overflow: hidden;*/
        position: relative;
    }
    nav .header-menu,nav .header-menu ul {
        position: relative;
        display: block;
        width: 100%!important;
        white-space: nowrap!important;
        overflow-x: auto!important;
        overflow-y: hidden!important;
        height: 30px;
        /*background: #002dfa!important;*/
        margin: 0;
        margin: 0;
        padding: 0;
        padding-left: 10px;
        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 0 0 1px rgb(0 0 0 / 8%);
    }
   
    nav .header-menu ul {
        list-style: none;
        padding-left: 0px;

    }
    nav .header-menu::-webkit-scrollbar,.header-menu ul::-webkit-scrollbar {
        height: 0px;
    }
    nav .header-menu >a,nav .header-menu ul li a{
        margin: 0px;
        padding: 0px 4px;
        display: inline-block;
        height: 100%;
        line-height: 30px!important;
        /*color: #fff;*/
        font-weight: 550;
    }
    nav .header-menu >a:first-letter,nav .header-menu ul li a:first-letter {text-transform: uppercase}
    
  
    nav .header-menu ul li{
         display: inline-block;
    }
    #active_menu {
        background: #4762d9;
    }
    
    nav .header-menu2 {
        display: block;
        width: 100%;
        padding: 0px 40px 5px 0px;
        padding-bottom: 15px;
        white-space: nowrap!important;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        bottom: -5px;
        overflow-x: auto;
        overflow-y: hidden;
        background: #fdfeff;
        height: 40px;
        border-bottom: #ddd solid 1px;
    
    
    }
     nav .header-menu2::-webkit-scrollbar{
        height: 0px;
    }
    nav .header-menu2 a {
      position:relative;
     display: inline-block;
    padding: 0px 10px;
    /*border: #ddd 1px solid;*/
    border-radius: 0px;
    background: #fff;
    text-transform: lowercase;
    min-height: 40px;
    line-height: 40px;
        font-weight: 500;
    /*
    box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);
    */
    }
    nav .header-menu2 a:first-letter {
        text-transform: uppercase;
    }
    nav .header-menu2 a.active_menu,
    nav .header-menu2 #active,nav #active_menu {
        background: #f5f5f5;
        color: #000;
        font-weight: 500;
    /*border: 1px solid #494bb4;*/
        /*box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);*/
    }
    
    
    
    
    header .logo {
    padding: 0px;
     
        margin: 0px auto;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1.0em;
        font-weight: 900;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 7px;
        min-width: 120px!important;
        height: 50px;
        line-height: 50px;
        display: inline-block;
        color:#002dfa!important;
        
    }
    .logo.afriliks_logo_dark{
      background-image: url(https://afriliks.com/img/logo/afriliks_logo_dark.png) !important;
              background-repeat: no-repeat !important;
        background-position: 0px center !important;
        background-size: 80% !important;

    }
    img.site_logo {
           width: 25px;
      
        margin-right: 5px;
        margin-left: 0px;
        position: relative;
        top: 7px;
}
    header .logo a {
        color:#fff!important;
    }
    a.mobile-menu-button svg {
      display: block;
    width: 21px!important;
    position: absolute;
    height: 15px;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    cursor: pointer;
    z-index: 3000;
    }
    /*a#search-button {
       display: block;
        width: 25px;
        height: 25px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 12px;
        z-index: 9000;
        background: url(https://www.congopedia.com/sites/all/themes/congopediamobile/images/icons/search-icon.svg) top left no-repeat;
        background-size: 25px!important;
    }*/
    /*---search bar----*/
      .search-bar-header-region {
          display:none!important;
        height: 50px;
        margin-bottom: 10px;
        width: 100%;
        clear: both;
    }
    
    
   .search-bar-header-region .search-form-2 {
    position: relative;
    display: inline-block;
    width: 285px;
    height: 35px;
    border-radius: 20px;
  
   transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    text-align: center;
     /*box-shadow:0 1px 6px rgb(32 33 36 / 28%);
    box-shadow: 1px 0px 4px 2px rgb(9 9 9 / 14%), 0px 0px 12px rgb(123 123 123 / 0%);
    box-shadow: 1px 0px 10px 2px rgb(7 7 7 / 17%), 0px 0px 12px rgb(123 123 123 / 0%);*/
    }
    
    .search-bar-header-region input.searchbar-2 {
          display: inline-block;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.0em;
             width: 280px;
             height: 30px;
            color: #444;
            border-top: #fff solid 1px;
            border-left: #fff solid 1px;
            border-bottom: #fff solid 1px;
            border-right: #fff solid 1px!important;
            padding: 5px 10px;
            border-bottom-left-radius: 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background-color: #fff;
            overflow: hidden;
            padding-right: 30px;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
    }
    
     .search-bar-header-region .search-btn-2 {
             position: absolute;
            height: 30px;
            width: 30px;
            font-weight: bold;
            font-size: 0.88em;
            left: 248px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #fff;
            color: #fff;
            border: none;
            border-bottom-right-radius: 20px;
            border-top-right-radius: 20px;
            padding: 0px 10px 0px 10px;
            text-transform: uppercase;
        }
        .search-bar-header-region .search-btn-2 i{
                  position: absolute;
                  color:#444;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                font-size: 17px;
        }

    
    .search-bar-region {
        height: 100px;
        width: 100%;
        padding-top: 20px;
    }
    .search-bar {
        position: relative;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 35px;
        border: 1px solid #ddd;
        border-radius: 30px;
        margin: 0 auto;
        padding: 0px 15px;
        padding-right: 50px;
    }
    .search-bar input {
        width: 100%;
        display: block;
        position: relative;
        height: 25px;
        border: none;
    }
    .search-bar button {
        position: absolute;
        right: 0px;
        top: 0px;
        border: none;
        background-color: #fff;
    }
    .header-menu-search {
        position: relative;
        display: block!important;
        width: 100%!important;
        white-space: nowrap!important;
        overflow-x: auto!important;
        overflow-y: hidden!important;
        height: 30px;
        margin: 0;
        padding: 0 20px;
        line-height: 30px;
        margin-top: 20px;
    }
    #header-menu-search a {
        padding: 0 5px;
    }
    #header-menu-search a#active_menu {
        padding: 5px 10px 5px 0px;
        background: #fff!important;
        border-bottom: 2px solid #004ccc!important;
    }
    #termList {
        display: none;
        position: absolute;
        left: 0px;
        right: 0px;
        width: 100%;
        background: #fff;
        top: 61px;
        min-height: 200px;
        border-bottom: 1px solid #ddd;
        padding-top: 10px;
        padding-bottom: 30px;
        overflow: auto;
    }
    #termList .list-unstyled li {
        display: inline-block;
        list-style: none;
        min-height: 20px;
        width: 100%;
        background: #fff;
        padding: 7px 10px;
        font-size: 1.2em;
        font-weight: bolder;
    }
    #termList .list-unstyled li:hover {
        cursor: pointer;
        background: #ddd;
    }
    
    
    .home-top-section{
        position:relative!important;
        
        top: 60px!important;
    
        min-height:150px!important;
            margin-bottom: 150px!important;
                margin-top: 15px!important;
    }
    /*----search bar----*/
    .search-region {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 9999;
    }
    .search-region .search-form {
        display: flex;
        width: 100%;
        min-height: 55px;
        border-bottom: 1px solid #ddd;
    }
    .hidesearchbar {
        display: block;
        height: 40px;
        width: 40px;
        margin: 10px 5px;
        text-align: center;
        padding-top: 8px;
    }
    .search-region .search-form input {
        width: 100%;
        margin: 10px 2px 10px 0px;
        height: 40px;
        padding: 0px 10px;
        border: 0;
        font-size: 1.1em;
      
    }
    .search-region .search-form input:focus {
        outline: none;
    }
    .search-region .search-form button {
        width: 40px;
        margin: 10px 5px;
        height: 40px;
        background: none;
        border: none;
    }
    .wrapper {
        position: relative;
        width:100%;
        /* top: 124px !important; */
        top: 0px !important;
    }
    .section-wrap {
        background:#fff;
        margin-top:0px;
        margin-bottom:10px;
        min-height: 100px;
        width: 100%;
        padding: 0;
        margin: 0;
        clear: both;
        display: block;
        border-left: 0;
        border-right: 0;
        position: static;
         margin-bottom:10px;
        
    }
    .section-row {
        margin: 0 auto;
        padding: 10px 10px!important;
        min-height: 300px;
        position: relative;
        line-height: 30px;
        z-index: 9;
    }
    .site-content-region {
        padding: 10px 15px!important;
        min-height:500px;
    }
    .type1{
          background: #fff!important;
            
    }
    .type1 .section-row h2 {
        font-size: 1.0em;
        padding: 0px 0px!important;
        margin: 0px 0px 10px 0px!important;
      
        font-weight: bolder;
        line-height: normal;
}
.type1 .section-row {
    margin: 0 auto;
    padding: 10px 10px!important;
    min-height: 100px!important;
    position: relative;
    line-height: 20px;
    padding-bottom: 20px!important;
    z-index: 9;
    /*border-top: #ddd solid 1px;*/
    border-bottom: #ddd solid 1px;
}
    .section-row .profile_picture{
        position:relative;
        text-align: center;
        width: 100%;
        display: inline-block;
        font-size: 0.8em;
        margin-top: 30px;
        text-decoration: none!important;
        line-height:normal;
    }
    .strong,strong{
        color:#444;
    }
    .no-underline{
         text-decoration: none!important;
         text-underline:none;
    }
    .section-row .profile_picture img{
        width: 70px !important;
        height: 70px !important;
        border-radius: 100% !important;
       
    }
    .section-row .shortcuts .material-icons{
        font-size:20px;
         color:#444!important;
    }
   .section-row .profile_picture .full_name {
        font-weight: bold;
        font-size: 1.6em;
        line-height: 30px;
        text-transform: capitalize;
    }
    .user_account{
        text-decoration:none;
    }
    .user_account .section-wrap{
        margin-bottom:0px!important;
    }
    .user_account .special_section .section-row{
     
    }
    .user_account .type1 .section-row h2{
        font-size:1.1em;
    }
    .section-row .profile_picture .chage_profile {
        /*position: absolute;
        right: 10px;
        top: -15px;*/
        font-size: 0.8em;
    }
     .section-row .shortcuts{
        display: flex;
        min-height: 40px;
        
        /* border-radius: 5px; */
        width:80%;
        max-width: 300px;
        margin: 20px auto;
    }
    .section-row .shortcuts a{
        display:inline-block;
      
        width: 33.33%;
        min-height: 10px;
        text-align: center;
        padding: 10px;
        font-size: 0.9em;
        line-height: normal;
    }
    .section-row .shortcuts i{
        display:inline-block;
        width:100%;
    }
    .bkg-white{
        background:#fff!important;
    }
    /**----Text formating and topography***/
    i.material-icons.smaltext-icon {
        font-size: 1.0em;
        float: left;
        padding: 2px 2px 0px 0px;
    }
    /*================== Taxonomy ================*/
    /*---Material icon------*/
    .regular-text-icon {
        width: 17px!important;
        height: 17px!important;
        border-radius: 50%!important;
        float: left!important;
        margin-right: 2px!important;
        padding: 0px!important;
        position: relative;
        top: 4px;
        margin: 0px 5px!important;
    }
    html,
    body {
        height: 100%;
        margin: 0px;
        font-size: 13px;
        /*scroll-behavior: smooth;*/
        /* overflow-x: hidden;*/
        background: none;
        /*font-family: 'Roboto', sans-serif!important;*/
        font-family: -apple-system,BlinkMacSystemFont,'Roboto',"Segoe UI",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        /*
        font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif !important;*/
        position: relative !important;
        -webkit-transition-property: -webkit-transform, transform, background-color, border-color !important;
        -moz-transition-property: transform, background-color, border-color !important;
        color: #333;
        background-color: #f6f8fc;
        padding: 0px;
    }
    /*--Linear backgrounds****/
    .lineargray {
        background-image: linear-gradient(180deg, rgba(54, 62, 98, .2) 0%, rgba(54, 62, 98, 0) 343px)!important;
    
            background-attachment: fixed;
    }
    .white-bkg {
        background-color: #fff!important;
    }
    h1 {
       font-family: sans-serif;
        font-size: 1.8em;
        padding: 10px 0px!important;
        margin: 10px 0px;
        line-height: normal;
        font-weight: bolder;
        color: #444;
    }
    h1.page-title{
    font-size: 1.6em;
    font-weight: bolder!important;
    padding: 0px 0px;
    padding-bottom: 10px;
    margin: 0px 0px 30px 0px!important;
    border-bottom: #ddd 1px solid;
    }
    h2.page-title {
        font-size: 1.3em;
     font-weight: bolder!important;
    padding: 0px 0px;
    padding-bottom: 10px;
    margin: 0px 0px 10px 0px!important;
    border-bottom: #ddd 1px solid;
    }
    h2 {
        font-size: 1.6em;
        padding: 10px 0px!important;
        margin: 10px 0px;
    }
    h3 {
        font-size: 1.2em;
    }
    h4,
    h5,
    h6 {
        font-size: 1.3em;
    }
    strong {
           font-weight: 500;
            color: #000;
    }
    p {
        margin-bottom: 10px;
        list-style: disc;
    }
    a {
        text-decoration: none;
        color: #333;
    }
    .gridlist-item-title a.large-list-title{
        font-size:1.2em!important;
    }
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    /****-------HEADER REGION---------****/
    /******** SECTION REGIONS
    
      .wrapper
        >.section-wrap
            >.section-row  

*******/


/*centered content layput*/
.center-content-wrapper{
       display: block;
    min-height: 600px;
    margin: 0 auto;
    padding-top: 0px;
}

.center-content-wrapper h1 .material-icons {
    position: relative!important;
    top: 6px!important;
    font-size: 50px!important;
    color: green!important;
    margin-bottom: 10px!important;
}
.qr_codeblock{
    min-height: 600px!important;
}
.qr_codeblock .icon-tabs ul{
    border-bottom: #ddd 1px solid;
}

.qr_codeblock .icon-tabs ul li{
        list-style: none;
        text-align: center;
        border-top: 1px solid #ddd;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        margin: 10px 5px 0px 5px;
        font-size: 0.9em;
        padding: 10px;
        padding-bottom: 15px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
.qr_codeblock .icon-tabs ul li.ui-tabs-active{
        font-weight: bold;
        color: #02138b;
        border-bottom: 5px solid #02138b;
    }
    
.qr_codeblock .icon-tabs ul li.ui-tabs-active a{
    color: #02138b;
}
.tab-content{
    display:none;
}
.qr_codeblock .icon-tabs ul li img{
            
            width:20px!important;
            display:block;
            margin:0 auto;
            margin-bottom: 5px;
            
        }
.qr_codeblock .tab-content{
    text-align:center;
}
   .start_scanning_btn{
       display:block;
       background-image:url('https://afriliks.com/public/img/icons/ui_icons/qr_code_scanner_100.png');
       background-position:top left;
       background-size:cover;
        width:100px;
       height:100px;
       margin:0 auto;
               border: 1px solid #eee;
        margin-top: 100px;
      
   }     
.card .q_rcode {
   text-align:center;
}

.card .q_rcode img {
    max-width: 200px;
    padding: 20px;
}
.payment_method_list .payment_method{
    position:relative;
    display:block;
    padding: 10px;
    height: 100px;
    border: 1px #ddd solid;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    line-height:20px;
}
.payment_method_list .payment_method .menu{
    position:absolute;
    bottom:10px;
    right:10px;
            font-size: 0.8em;
}
.payment_method_list .payment_method .menu{
    margin-left:5px;
}

.process_step_content{
        margin-bottom: 20px;
    border-bottom: 1px solid #444;
}

.product_summary{
        line-height: normal;
    padding: 10px;
    font-weight:normal;
    font-size:1.0em;
}

.product_summary .price{
  font-size: 1.3em;
        font-weight: 300;
        color: #F44336;
        margin: 30px 0px 10px 0px;
}

.product_summary .product_title{
    
    font-size:1.1em;
    font-weight:bolder;
    
    display:inline-block;
    margin-bottom:10px;
    
}

.align-conter-center{
    text-align:center!important;
  
}
/*Menu bution*/
.menu_button_container{
    display: flex;
    margin: 10px 0px;
    margin-bottom:20px;
     padding-bottom:10px;
     scrollbar-width:0;
    
    overflow-x: auto;
}
.menu_button_container:hover{
      scrollbar-width:0;
}
.menu_button{
   display: flex;
    width: 140px;
    height: 60px;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    
    
    background: #3a4585;
    color: #fff;
    border: #3a4585 solid 1px;
    

}
.menu_button .text{
    display: inline-block;
    width: 110px;
    padding-right: 0px;
    font-weight: 500;
    font-size: 1.0em;
    text-shadow: 0.4px 0.5px #000;
}

.menu_button .icon{
        width: 20px;
}



/*---Special homepage---*/
.special-home-content-container{
    padding:10px 0px;
}

.special-home-content-container .highlight-region-slider{
    height:220px!important;
}
.special-home-content-container .highlight-region-slider a.highlight-region-slider-title{
        font-size: 1.4em!important;
            z-index: 999!important;
        
}

.special-home-content-container .grid-list-title{
    background:#fff;
    height:auto!important;
    font-size: 1.3em;
    
}
.special-home-content-container .grid-list-title i.material-icons {
    right:-18px!important;
}
.special-home-content-container .grid-list-title i.material-icons{
      background:#fff;
}
.special-home-content-container .right-section{
    margin-bottom:0px!important;
    margin-bottom: 0px !important;
    flex-flow: nowrap;
    overflow-x: auto;
    padding-bottom:10px;
    
}

.special-home-content-container .h-gridlist.news{
    height: 400px;
    overflow-y: auto;
}

.current_region{
        color: #555;
    font-size: 0.8em;
    
}
.current_region i{
    font-size: 14px;
    position: relative;
    top: 2px;
    right: 3px;
}
/*END*/
    .wrapper {
        position: relative;
        /* top: 124px !important; */
        top: 0px !important;
    }
    .section-wrap {
        min-height: 100px;
        width: 100%;
 
        padding: 0;
        margin: 0;
        clear: both;
        display: block;
        border-left: 0;
        border-right: 0;
        position: static;
         margin-bottom:10px;
    }
    .section-row {
        margin: 0 auto;
        padding: 10px 10px!important;
        min-height: 300px;
        position: relative;
        line-height: 30px;
        z-index: 9;
    }
    
    .justify-content{
        display:block;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        text-align:center;
        
    }
    .gridlist .justify-content{
          transform:translate(-50%,0%)!important;
    }
    .footer-wrap {
        min-height: 100px;
        color: #fff;
        width: 100%;
        margin: 0;
        clear: both;
        display: block;
        border-left: 0;
        border-right: 0;
        position: relative;
        background-color: #444;
        z-index:8888;
    }
    .footer-wrap .accordion_title{
        border-bottom:0px;
        font-size: 1.2em;
    }
   .footer-wrap #accordion{
        margin-bottom: 20px;
    margin-top: 10px;
        padding: 0px 10px;
        border: 1px #6b6b6b solid;

    }
    .footer-wrap a {
        color: #ffffffd1;
    }
    .footer-wrap a:hover {
        color: #fff;
    }
    .footer-row {
        margin: 0 auto;
        padding: 10px 10px!important;
        min-height: 100px;
        position: relative;
        line-height: 30px;
        z-index: 9;
    }
    footer .site-map {
        display: block;
    }
    footer .site-map .menu-column {
        width: 65%!important;
        max-width: 250px;
        padding: 10px;
    }
    .footer-socials_medias {
        display: flex;
    }
    .footer-socials_medias a {
        width: 50%;
        max-width: 35px;
        padding-right: 5px;
    }
    .footer-socials_medias a img {
        width: 100%;
    }
    .site-info-footer {
        width: 100%;
        background: #363636;
    }
    .site-info-footer-center {
        padding: 10px 10px;
    }
    .menu-column a {
        display: block;
        line-height: normal;
        margin-bottom: 8px;
        font-weight: 100;
    }
    .menu-column .col-title {
        line-height: normal;
        font-weight: 200;
        margin-bottom: 15px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 200!important;
    }
    /** 
    GRIDS

.gridlist .col-N
    >.gridlist-item
        >.grid-col-content


**/
    .gridlist {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;
    }
    .article-rank{
        position: absolute;
    top: 5px;
    left: 5px;
    z-index: 99999;
    font-size: 1.2em;
    font-weight: 600;
    background: #111111b8;
    color: #ffff;
    padding: 5px 10px;
    text-align: center;
        border-radius: 7px;
    }
    /**grid with 4 columns col-4**/
    .col-4 {
        width: 50%!important;
        position: relative;
        margin-bottom: 10px;
        flex: 0 1 calc(50% - 0px);
    }
    .col-4:nth-child(2n) .grid-col-content {
        margin-right: 0px!important;
    }
    .col-4 .grid-col-content {
        margin-right: 10px!important;
    }
    .gridlist .gridlist-item {
        position: relative;
    margin-bottom: 10px;
    margin-right: 0px;
    /* flex: 0 1 calc(24.5% - 4px); */
    font-size: 0.93em;
    line-height: 15px;
    padding-right: 5px;
    padding-top: 70%;
    }
    .gridlist .grid-col-content {
         height: 100%;
        width: 98%;
        border: #ddd 1px solid;
        background-color: #fff;
        display: inline-block;
        overflow: hidden;
        border-radius: 10px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .gridlist .grid-col-content .price {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        padding: 10px;
        background-color: #002dfa;
        color: #ffffff;
        font-weight: bolder;
        text-align: center;
        z-index: 9999;
        font-size: 1.5em;
        border-top-left-radius: 10px;
    }
    .gridlist .grid-col-content .prix {
       display: block;
        position: absolute;
        bottom: 30px;
        right: 10px;
        padding: 0px 0px;
        font-weight: bolder;
        text-align: left;
        z-index: 9999;
        font-size: 1.2em;
        color: brown;
    }
    .distance-proximite {
    position: absolute;
    bottom: 0px;
    background-color: #262626;
    padding: 2px 5px;
    color: #fff;
}
    .grid-col-content .logo.gridlist-item-note img {
        width: 12px;
        height: 12px!important;
        border-radius: 50%;
        margin-right: 2px;
        padding: 0px!important;
        position: relative;
        top: 3px;
    }
    .grid-col-content .logo.gridlist-item-note,.gridlist-item-note {
        text-transform: uppercase;
        line-height: 15px;
        font-size: 0.8em;
            padding: 0px 0px;
        position: absolute;
    bottom: 0px;
    }
    .grid-list-header {
        display: block;
        width: 100%;
        position: relative;
        margin-bottom: 10px!important;
    }
    .separator {
        top: 50%;
        width: 100%;
        height: 1px;
        background: #777;
        position: absolute;
        border:none!important;
    }
    a.header-seemorebtn {
       display: inline-block;
        height: 22px;
        line-height: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0px;
        border: #ddd 1.4px solid;
        color: #777;
        border-radius: 50px;
        padding: 0px 5px;
        font-size: 0.9em;
       
    }
    a.header-seemorebtn i {
       float: right;
        position: relative;
        top: 5px;
        right: -1px;
        font-size: 1.1em;
    }
    a.header-seemorebtn:hover {
        background-color: #4e6ef2;
        border-color: #4e6ef2;
        color: #fff;
    }
    .grid-list-title,.row-title {
       position: relative;
        display: inline-block;
        font-size: 1.2em;
        font-weight: 500;
        padding: 0px 10px 5px 0px;
        text-transform: lowercase;
        height: 33px;
        text-shadow: 0.3px 0.2px #000;
        hyphens: auto;
        word-break: break-word;
        color: #000;
    }
    .grid-list-title a,.row-title{
            color: #555;
            max-width: 220px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
        
           
    }
    .grid-list-title a::first-letter,.row-title::first-letter{
         text-transform: uppercase;
    }
    .grid-list-title:first-letter,.row-title:first-letter { /*Element must be a block or inline-block*/
          text-transform: uppercase;
        
    }
    .grid-list-title .subtitle_multi{
                max-width: 100%;
        display: inline-block;
        height: 25px;
        overflow: hidden;
        text-transform: capitalize;
        text-wrap: nowrap;
    }
    .grid-list-title i.material-icons {
        font-size: 1.4em;
        font-weight: 100;
        float: right;
        padding: 0px;
        color: #6b6b6b;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-58%);
        background: none;
        z-index: 9999;
    }
    .box-shadow-1 {
        box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);
    }
    .gridlist .gridlist-item-img {
        position: relative;
            height: 53%;
            border-bottom: 1px solid #ddd;

       
    }
    .gridlist-item-img .action-btn {
        position: absolute;
        top: 10px;
        right: 5px;
        font-size: 0.9em;
        width: 20px;
        z-index: 9999999;
    }
    .action-btn .material-icons {
        font-size: 1.3em;
        margin-bottom: 7px;
    }
    .action-btn .material-icons {
        font-size: 1.1em;
        margin-bottom: 7px;
        border: black solid 1px;
        border-radius: 50%;
        padding: 3.5px;
        background: #000000c9;
        color: #fff;
        display: inline-block;
        width: 20px;
        height: 20px;
        overflow: hidden;

    }
    
    .action-btn .material-icons:hover,
    .action-btn a:hover,
    .action-btn .saved {

       color: gold!important;
        border-radius: 50%;
    }
    .action-btn .saved i, .liked i {
   
        color: gold!important;
        border-radius: 50%;
    }
    .gridlist .gridlist-item img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        object-position: top;
        position:relative;
    }
    .gridlist .gridlist-item-img .video-duration {
        display: block;
        right: 10px;
        position: absolute;
        bottom: 10px;
        background-color: #000;
        font-size: 1.1em;
        text-align: center;
        font-weight: bold;
        color: #fff;
        min-width: 40px;
        padding: 5px;
    }
    .gridlist .gridlist-item-text {
        padding: 5px 10px;
        position: relative;
    }
    .gridlist .gridlist-item-title,
    .gridlist .gridlist-item-title a {
        font-weight: 500;
        color: #666 !important;
        text-shadow: 0.1px 0.1px #ddd;
        hyphens: auto;
        word-break: break-word;
        
        text-decoration: none;
        padding: 5px 0px;
        
        padding-top:0px!important;
        line-height: normal;
       
        max-height: 63px;
        overflow: hidden;
        font-size: 1.0em;
          margin: 3px 0px 20px 0px;
       
    }
    
    .gridlist-item-title.product-title{
        max-height:30px!important;
        
    }
    .gridlist-item-note {
        font-size: 1.0em;
        
        color: #444;
    }
     .gridlist-item-note._views {
         position:absolute;
         bottom: 25px;
        left: 10px;
     }
    .gridlist .gridlist-item-subtitle2 {
        color: #666;
        font-size: 12px;
        font-weight: 500;
        padding: 0px 0px;
        height: 13px;
        overflow: hidden;
        font-size: 0.8em;
            margin-bottom: 2px;
    }
    
    .gridlist-style2 .gridlist-item img {
    width: 100%;
    object-fit: scale-down;;
    height: 150px;
    object-position:center;
   
    }
    
    .gridlist-style2 .gridlist-item .gridlist-item-title{
        font-size:1.2em!important;
       
    max-height: 100px!important;
    }
    
    
    
    
.gridlist-style3 .gridlist-item img {
 width: 90px!important;
    height: 90px!important;
    display: block!important;
    margin: 10px auto!important;
    border-radius: 100%!important;
    padding: 5px!important;
    border: 3px solid #ddd!important;
    object-fit: initial!important;

   
    }
    
    .gridlist-style3 .gridlist-item .gridlist-item-title{
       font-size: 1.1em!important;
    max-height: 70px!important;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 5px;

    }
    
    .gridlist-style3 .gridlist-item-img{
        position: relative;
        height: 40%!important;
    }
    .gridlist-style3 .gridlist-item-note a{
            font-weight: bold;
    color: #002dfa;
    background: #ddd;
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0px;
    }
    .gridlist-style3 .gridlist-item-note{
       margin-bottom:5px; 
       position:relative;
    }
    .gridlist-style3 .btn{
        padding: 5px;
        margin: 5px 0px 0px 0px;
        display: block;
        border: 1px solid #ddd;
        text-align: center;
        border-radius: 5px;

    }
    
    
    
    /*----Horizontal scroll-----*/
    .h-scroll-list {
        width: 100%;
        top: 0px;
        position: relative;
        flex-flow: row nowrap!important;
        display: block!important;
        white-space: nowrap!important;
        overflow-x: auto!important;
        overflow-y: hidden!important;
        min-height: 220px;
        margin: 0 auto;
    }
    .h-scroll-list .gridlist-item {
        display: inline-block!important;
        white-space: normal!important;
    }
    .h-scroll-list .gridlist-item .gridlist-item-title {
        white-space: normal!important;
    }
    /*-----5 columns grid list------*/
    .col-5 {
        width: 50%!important;
        position: relative;
        margin-bottom: 10px;
        flex: 0 1 calc(50% - 0px);
    }
    .col-5:nth-child(2n) .grid-col-content,
    .col-5:nth-child(2n) {
        margin-right: 0px!important;
        padding-right: 0px!important;
    }
    .col-5 .grid-col-content {
        margin-right: 5px!important;
        border-radius: 10px;
    }
    .col-5 .gridlist-item-title,
    .col-5 .gridlist-item-title a {
        font-size: 1.0em;
        height: normal;
       
    }
    /*--Horizontal List*/
    .col-3 {
        width: 100%!important;
        position: relative;
        margin-bottom: 10px;
    }
    .col-3 .grid-col-content .logo.gridlist-item-note {
        text-transform: uppercase;
        line-height: 15px;
        font-size: 0.8em;
        position: absolute;
        bottom: 5px;
    }
    
    .gridlist-item-footer {
        text-transform: uppercase;
      
        position: absolute;
        width:100%!important;
        padding:5px 10px!important;
        bottom: 5px!important;
    }
    


    .h-gridlist {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;
    }
    .h-gridlist .gridlist-item {
        position: relative;
        margin-bottom: 10px;
        margin-right: 0px;
        /* flex: 0 1 calc(24.5% - 4px); */
        flex: 0 1 calc(100% - 0px);
        font-size: 0.9em;
        line-height: 15px;
    }
    .h-gridlist .col-3:nth-child(3n) .grid-col-content {
        margin-right: 0px!important;
    }
    .h-gridlist .grid-col-content {
        display: flex;
        background: #fff;
        padding: 5px 5px;
        border-radius: 5px;
        border: 1px solid #ddd;
        height: 120px;
    }
    .h-gridlist .gridlist-item-img {
        width: 40%!important;
        display: inline-block!important;
        position: relative;
    }
    .h-gridlist .gridlist-item img {
        width: 100%;
        padding: 5px;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
        object-position: top;
        position: relative;
    }
    img{
     position:relative;
  
   
  
   
    }
   img.brokenable::before {
     content: '';
     width: 100%;
     display:block;
      height: 100%;
     background-color: #fff!important;
     background-image:url(https://afriliks.com/public/img/globe1.png)!important;
    background-position: center!important;
      background-repeat: no-repeat;
    background-size: 70%!important;
     border-radius: 10px;
     position: absolute;
     top:0px;
     left:0px;
     z-index:100;
    
 }
  article img.brokenable::before {
      position: relative!important;
      position: relative!important;
    background-size: 200px!important;
    width: 200px;
    height: 200px;
    left:50%;
        transform: translateX(-40%);
  }
 img.brokenable::after {
     
      content: "\2639" " " attr(alt);
        background-color: #fff;
     font-size: 18px;
     color: rgb(100, 100, 100);

     display: block;
     position: absolute;
     z-index: 2;
     top: 5px;
     left: 0;
     width: 100%;
     height: 100%;
}
 
 
    .h-gridlist .gridlist-item-text {
        padding: 5px!important;
        position: relative;
        width: 60%;
    }
    .h-gridlist .gridlist-item-title,
    .h-gridlist .gridlist-item-title a {
        hyphens: auto;
    word-break: break-word;
        color: #444 !important;
        text-decoration: none !important;
        padding: 0px 0px !important;
        line-height: normal !important;
        font-size: 1.0em !important;
        max-height: 58px;
        margin-bottom: 5px;
        margin-top: 5px;
        overflow: hidden;
        font-weight: 500;
        
    }
    .h-gridlist .gridlist-item-subtitle2 {
        display:inline-block;
        font-size: 0.8em;
        text-transform: lowercase;
    }
    .h-gridlist .gridlist-item-subtitle2:first-letter {
         text-transform: uppercase;
    }
    /*----gid list for text only*/
    .h-gridlist-text {}
    .h-gridlist-text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;
        border-radius: 10px;
        background: #fff;
        padding: 0px;
        /*box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);*/
      
    }
    .h-gridlist-text .gridlist-item {
        position: relative;
        margin-bottom: 7px;
        margin-right: 0px;
        flex: 0 1 calc(100% - 0px);
        font-size: 0.9em;
        line-height: 15px;
    }
    .h-gridlist-text .col-3:nth-child(3n) .grid-col-content {
        margin-right: 0px!important;
    }
    .h-gridlist-text .grid-col-content {
   display: flex;
    background: #fff;
    padding: 5px 5px;
    margin-right: 0px;
    min-height: 50px;
    box-shadow: none!important;
    border: 1px solid #ddd!important;
    border-radius: 5px;
    margin-bottom: 0px;
}
.h-gridlist-text .col-3:last-child .grid-col-content {
    
   
    
}
.h-gridlist-text .gridlist-item .gridlist-item-note{
    position: absolute!important;
    bottom: 0px!important;
    
}
    .h-gridlist-text .gridlist-item-text {
        padding: 5px!important;
        position: relative;
        width: 96%;
    }
    .h-gridlist-text .gridlist-item-title,
    .h-gridlist-text .gridlist-item-title a {
       color: #444 !important;
    text-decoration: none !important;
    padding: 0px 0px 20px 0px !important;
    line-height: 1.5em !important;
    font-size: 1.0em !important;
    /* max-height: 55px; */
    margin-bottom: 5px;
    margin-top: 5px;
    overflow: hidden;
    font-weight: 400;
    text-shadow: 0.2px 0.1px #666;
    hyphens: auto;
    word-break: break-word;
    }
    .h-gridlist-text .gridlist-item-subtitle2 {
        font-size: 0.9em;
    }
 .gridlist-item-text .text-icon {
    font-size: 0.9em;
    margin-bottom: 3px;
    color: #888;
    font-style: normal;
    overflow: hidden;
    height:15px!important;
        display: inline-block;
        width: 95%;
   
}
    .gridlist-item-text .text-icon .material-icons {
        font-size: 1.0em;
        position: relative;
        top: 2px;
    }
    .point-inline-list:after {
        content: "";
        height: 5px;
        width: 5px;
        border-radius: 50%;
        background: #666;
        display: inline-block;
        margin: 0 0.25rem 0 0.5rem;
        position: relative;
        top: -1px;
    }
    .point-inline-list:last-child:after {
        height: 0px!important;
        width: 0px!important;
        
    }
    .h-gridlist-text i {
        font-size: 1.2em;
    }
    .h-list-item-sider {
        width: 20px;
        padding: 10px 0px;
    }
    .h-list-item-sider a {
        margin-bottom: 10px;
        display: inline-block;
    }
    .h-list-item-sider a .material-icons:hover,
    .h-list-item-sider a.saved .material-icons {
        color: #4e6ef2;
    }
    .h-list-item-sider a:hover {}
.time_ago {
    font-size: 0.7em!important;
    background: none;
    display: inline-block;
    padding: 5px 0px 0px 0px;
    border-radius: 10px;
    color: #888!important;
    font-weight: normal;
    margin: 5px 0px 0px 0px;
    font-style: normal;
    text-transform: none;
}
    /*---Full horizontal list-----*/
    .ful-h-list-item {
        width: 100%;
        display: flex;
        margin: 20px 0px;
        padding: 0px 10px 0px 0px;
    }
    .separator {
        border-bottom: #ccc solid 1px;
        display:none;
    }
    .ful-h-list-item .ful-h-list-item-content {
        padding: 0px 5px 0px 10px;
        min-height: 130px;
        width: 70%;
    }
    .ful-h-list-item .ful-h-list-item-content.no-image {
        flex: 0 0 98%!important;
    }
    .ful-h-list-item .overeffect {
        border-bottom: 1px solid #dbe7ff;
    }
    .ful-h-list-item .overeffect:hover {}
    .ful-h-list-item img {
        width: 20%!important;
        height: 110px!important;
        display: inline-block;
        border-radius: 20px;
        object-fit: cover;
        object-position: top;
    }
    .ful-h-list-item .list-item-title {
        font-weight: bold;
        margin: 5px 0px;
        display: block;
        font-size: 1.2em;
    }
    .ful-h-list-item .list-item-title:hover {
        color: #4e6ef2;
    }
    .ful-h-list-item a.ville:after {
        content: "";
        height: 5px;
        width: 5px;
        border-radius: 50%;
        background: #666;
        display: inline-block;
        margin: 0 0.25rem 0 0.5rem;
        position: relative;
        top: -1px;
    }
    .ful-h-list-item a.ville:last-child:after {
        content: "";
        height: 0px;
        width: 0px;
    }
    .ful-h-list-item h2.item-title {
        font-size: 1.4em;
        font-weight: 500;
        padding: 0px 0px!important;
        margin: 0px 0px;
        margin-bottom: 10px!important;
        color: #223fb9;
    }
    .ful-h-list-item .body-overview {
        text-align: justify;
    }
    /*--------Reels grid ----*/
    .gridlist-reel {}
    .gridlist-reel {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;
        margin-bottom: 30px;
    }
    .gridlist-reel .gridlist-item {}
    .gridlist-reel .gridlist-item {
        position: relative;
        margin-bottom: 10px;
        margin-right: 0px;
        /* flex: 0 1 calc(24.5% - 4px); */
        flex: 0 1 calc(25% - 0px);
        width: 200px;
        font-size: 0.9em;
        line-height: 15px;
    }
    .gridlist-reel .grid-col-content .price {
        display: block;
        position: absolute;
        top: 1px;
        left: 1px;
        padding: 10px;
        background-color: #002dfaad;
        color: #ffffff;
        font-weight: bolder;
        text-align: center;
        z-index: 9999;
        font-size: 1.5em;
    }
    .gridlist-reel .grid-col-content .logo.gridlist-item-note img {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        float: left;
        margin-right: 2px;
    }
    .gridlist-reel .grid-col-content .logo.gridlist-item-note {
        text-transform: uppercase;
        line-height: 15px;
        font-size: 0.8em;
    }
    .gridlist-reel .grid-col-content {
        position: relative;
        height: 100%;
        width: auto;
        border: #ddd 1px solid;
        margin-right: 10px;
        background-color: #fff;
        display: inline-block;
        overflow: hidden;
    }
    .gridlist-reel .gridlist-item-img {
        position: relative;
    }
    .gridlist-reel .gridlist-item-img .action-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 0.9em;
        width: 20px;
    }
    .gridlist-reel .gridlist-item img {
        width: 100%;
    }
    .gridlist-reel .gridlist-item-img .video-duration {
        display: block;
        right: 10px;
        position: absolute;
        bottom: 10px;
        background-color: #000;
        font-size: 1em;
        text-align: center;
        font-weight: bolder;
        color: #fff;
        min-width: 40px;
        padding: 5px;
    }
    .gridlist-reel .gridlist-item-text {
        padding: 10px;
        position: relative;
    }
    .gridlist-reel .gridlist-item-title,
    .gridlist-reel .gridlist-item-title a {
        font-weight: 700;
        color: #444 !important;
        text-decoration: none;
        padding: 5px 0px;
        line-height: normal;
        max-height: 55px;
        overflow: hidden;
        font-size: 1.1em;
        margin-bottom: 7px;
    }
    .gridlist-item-note {
        font-size: 0.8em;
        color: #444;
    }
    .gridlist-reel .gridlist-item-subtitle2 {
        color: #666;
        font-size: 12px;
        font-weight: 500;
        padding: 0px 0px;
    }
    /*------Two colomns section-------*/
    .section-col-2 {
        display: block;
    }
    .left-section {
        position: relative;
        margin-bottom: 15px;
        margin-right: 0px;
        font-size: 0.9em;
        line-height: 15px;
        border-radius: 5px;
        width: 100%;
    }
    .right-section {
        position: relative;
        margin-bottom: 20px;
        margin-right: 0px;
        font-size: 0.9em;
        line-height: 15px;
        border-radius: 5px;
        width: 100%;
        display: flex;
    }
    .highlight-region-row {
        padding: 5px 10px;
    }
    /*.highlited-col-4-grid {
        position: relative;
        width: 50%;
        height: 180px;
        margin-bottom: 5px;
    }*/
     .highlited-col-4-grid {
        position: relative;
        width: 50%;
        padding-top: 40%;
        margin-bottom: 5px;
            min-width: 150px;
    }
    .highlited-col-4-grid .gridlist-item-img{
            height: 100%!important;
    }
    .highlited-col-4-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position:relative;
    }
    .highlight-region-slider img {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .highlited-col-4-grid .gridlist-item-text {
        position: absolute;
        bottom: 0px;
        background-color: #00000082;
        color: #f5f5f5!important;
        background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0) 100%);
        z-index: 444;
    }
    .highlited-col-4-grid .gridlist-item-text a {
        color: #f5f5f5!important;
        font-size: 1.0em;
        padding: 0px!important;
    }
    .highlited-col-4-grid .gridlist-item-text .gridlist-item-title {
        padding: 0px!important;
        position: relative;
        top: -7px;
    }
    .highlited-col-4-grid .gridlist-item-note {
         color: #f5f5f5!important;
        text-transform: uppercase!important;
        padding: 5px 0px;
        margin-top: 5px;
        bottom:5px!important;

    }
    
   
    
    .highlited-col-4-grid .grid-col-content {
        margin-left: 0px;
        margin-right: 0px!important;
        border-radius: 10px;
        -moz-box-shadow: 0px 1px 1px 0px rgb(50 50 50 / 10%);
        box-shadow: 0px 1px 1px 0px rgb(50 50 50 / 10%);
        width: 98%!important;
        border: solid #ddd 1px;
        height: 100%;
        position: absolute;
        top: 0px;

    }

    /*.highlited-col-4-grid .grid-col-content {
     margin-left: 0px;
    margin-right: 0px!important;
    border-radius: 10px;
    -moz-box-shadow: 0px 1px 1px 0px rgb(50 50 50 / 10%);
    box-shadow: 0px 1px 1px 0px rgb(50 50 50 / 10%);
    width: 98%!important;
    border: solid #ddd 1px;

    }*/
    .highlited-col-4-grid:nth-child(1n) .grid-col-content,
    .highlited-col-4-grid:nth-child(3n) .grid-col-content {
        margin-right: 5px;
    }
    /*---News highligh----*/
    .highlight-region {
        display: block;
        width: 100%;
        margin-bottom: 0px;
        background-color: none;
    }
    .highlight-region .swiper-button-next,
    .highlight-region .swiper-button-prev {
        display:none!important;
        top: 40%!important;
        --swiper-theme-color: #dedede!important;
        background: #000000ab!important;
        --swiper-navigation-size: 20px!important;
        padding: 10px!important;
        height: 50px!important;
        width: 30px!important;
    }
    .highlight-region .swiper-button-next {
        right: 0px!important;
    }
    .highlight-region .swiper-button-prev {
        left: 0px!important;
    }
    .highlight-region .swiper-pagination-bullet {
        background: #fff!important;
    }
    .highlight-region-slider {
        width: 100%;
        height: 280px!important;
        position: relative;
        padding: 0px;
        margin: 0px;
    }
    .highlight-region .swiper {
           
    border: 1px solid #ddd;
        border-radius: 10px!important;
        /*-webkit-box-shadow: 0px 1px 2px 0px rgb(50 50 50 / 75%);
    -moz-box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 1px 2px 0px rgb(50 50 50 / 75%);*/
    }
    .highlight-region-slider img {
        width: 100%;
        height: 100%!important;
        object-fit: cover;
        position: relative;
    }
    .news-highlight img {
        height: 400px!important;
    }
    a.highlight-region-slider-title {
        font-size: 1.6em;
        line-height: normal;
        display: block;
        width: 100%;
        min-height: 120px;
        background-color: #000000bf;
        color: #FFFFFF;
        padding: 15px;
        padding-bottom: 50px;
        position: absolute;
        bottom: 0px;
        font-weight: 500;
        background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0) 100%);
    }
    .highlight-region-slider-category {
        position: absolute;
        background: #4e6ef2;
        display: none;
        color: #fff;
        padding: 10px;
        text-transform: capitalize;
    }
    .highlight-region-title {
        font-size: 0.8em;
        text-transform: capitalize;
        line-height: 30px;
        font-weight: bolder;
        overflow: hidden;
        height: 30px;
        padding: 0px 10px;
        margin-bottom: 7px;
        border-bottom: 1px solid #ddd;
        background-color: #f6f8fc;
    }
    /***--Pager--****/
    .pager {}
    .pager-container {
        text-align: center;
        line-height: 50px;
        height: 50px;
        margin-bottom: 30px;
            margin-top: 30px;
    }
    
    .pager_titple{
            font-weight: bolder;
    margin-bottom: 10px;
    text-align: left;
    margin-right: 20px;
        color: #666;
    }
    #pagerPrev {}
    #pagerNext {}
    #pagerNext,
    #pagerPrev {
        position: relative;
        top: -10px;
        padding: 0px 0px;
        display: inline-block;
        color: #666;
    }
    #pagerNext i,
    #pagerPrev i {
        font-size: 1.3em!important;
    }
    #pagerNext:hover,
    #pagerPrev:hover {
        color: #444;
        cursor: pointer;
    }
    .pager {
        display: inline-block;
        white-space: nowrap;
        height: 36px!important;
        min-width: 10px;
        /* width: 40%; */
        max-width: 196px;
        overflow: auto;
        margin: 10px auto;
        text-align: center;
        margin-bottom: 0px!important;
        overflow-y: hidden!important;
    }
    .pager a.active_pager {
        color: #002dfa;
        font-weight: bolder;
        font-size: 1.0em;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        text-decoration: none;
        text-decoration: underline;
    }
    .pager a {
         font-weight: bolder;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        margin: 0px;
        color: #666;
        display: inline-block;
        position: relative;
        top: -25%;
    }
    .pager a:hover {
        color: #000;
    }
    .home-footer-region {
        width: 100%;
        min-height: 200px;
    }
    /*---form---*/
    .login-form-section {
          min-height: 100%;
        position: relative;
        padding: 0 10px;
        padding-top: 40px;
           
        max-width: 350px!important;
        margin: 0 auto;
    }
    
    .login-form-section .login-form{
        padding: 20px 20px!important;
        border: #ddd 1px solid;
        background: #ffff;
        border-radius: 5px;
        padding-bottom: 40px!important;
    }
    .login-form {
     font-size: 1.0em;
    position: relative;
    top: 0px;
    display: block;
    text-align: left;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    padding-bottom: 50px;
        /*background: #fff;
        box-shadow: 0 2px 4px rgb(0 0 0 / 8%), 0 4px 12px rgb(123 123 123 / 8%);
        border-radius: 5px;*/
    }
     .login-form .pageTitle1{
          margin: 10px 0px!important;
          text-align: center;
     }
     .login-form .instructions{
       line-height: normal;
    font-size: 1.0em;
    text-align: center;
    margin: 10px 0px;
    color: #777;
   
}
   .login-form .login_subtitle {
    font-size: 0.9em;
    margin: 0px 0px;
    display: inline-block;
}
    .login-form h1 {
        font-size: 1.5em;
        font-weight: 600;
        line-height: 23px;
        padding: 0px!important;
        margin: 5px auto;
        width: 200px;
        text-transform: none;
        color: #022dfa;
    }
    .form-field {
        display: block;
        margin-bottom: 10px;
    }
    .form-field small {
    font-size: 0.8em;
    color: #888;
}
   .form-field #gpsmsg{
        display: inline-block;
        text-align: center;
        width: 100%;

    }
    .form-field input,.form-field select {
        margin-bottom:0px!important;
    }
     .field-instruction{
        line-height: normal;
      
    margin: 5px 0px;
    }
    .field-instruction span{
        display:inline-block;
        width:100%;
        min-height:5px;
    }
    .login-form input,
    .login-form button,
    .login-form select {
        width: 100%;
    height: 30px;
    margin-left: 0px;
    margin-bottom: 8px;
    border: #414459 solid 0.5px;
    padding: 5px 10px;
    border-radius: 5px;
    }
    .login-form label {
        font-weight: 500;
        margin-bottom: 5px;
        display: block;
    }
    .login-form button,
    .btn-primary {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 32px;
        margin-left: 0px;
        margin-top: 20px;
        border: none;
        border-radius: 0px;
        font-size: 1.0em;
        background-color: #002dfa;
        
        color: #fff;
        border-radius: 20px;
    }
    .login-form button:hover,
    .btn-primary:hover{
        cursor:pointer;
    }
    .login-form .links-block {
        display: block;
        font-size: 1.0em;
        width: 100%;
        text-align: center;
        line-height: 1.8em;
        text-decoration: underline;
        margin-top: 10px;
    }
    .login-form .sns-login {
        display: block;
        width: 100%;
        text-align: center;
        margin: 30px 0px;
    }
    .login-form .sns-login .text {
        font-weight: bold;
        margin: 20px 0px;
        display: block;
        width: 100%;
        text-align: center;
    }
    .login-form .sns-login .sns {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .register-btn{
        border: 1px solid #002dfa;
        padding: 5px;
        border-radius: 20px;
        background: #fff;
        width: 100%;
        display: inline-block;
        color: #002dfa;
        text-align: center;
    }
    .login-form .sns-login .sns img {
        width: 100%;
        height: 100%;
    }
    .login-form .invalidFeedback {
        color: red;
        font-size: 0.85em;
                display: inline-block;
        margin-top: 5px;
        width: 100%;
    }
    .login-terms {
        padding: 10px 0px 20px 0px;
        text-align: left;
    font-size: 0.9em;
    line-height: 18px;
    overflow-y: auto;
    height: 100px;
    margin-bottom: 50px;
    background: #ddd;
    padding: 5px;

    }
    .champ-obligatoire {
        color: tomato;
    }
    .cofrimation_message {
        text-align: center;
        padding-top: 70px;
        display: block;
        max-width: 300px;
        margin: 20px auto;
    }
    .cofrimation_message h1 {
        text-align: center;
        font-size: 1.4em;
        line-height: 1.4em;
        font-weight: bold;
        margin-bottom: 40px;
    }
    .cofrimation_message p {
        font-size: 1.1em;
        line-height: 1.3em;
    }
    .cofrimation_message strong {
        font-weight: bold;
        color: #002dfa;
        font-style: italic;
    }
    .login-form .profile_picture img {
        display: block;
        width: 100px;
        height: 100px;
        margin: 30px auto;
    }
    .login-form input[type='file'] {
        border: 0px!important;
        margin: 0px 0px 30px 0px;
        padding: 0px!important;
    }
    .user-post-form {
        /*margin: 0 auto!important;*/
    }
    .user-post-form textarea {
        width: 100%;
        min-height: 150px;
        margin: 10px 0px;
        padding: 10px;
    }
    #termList {
       display: none;
        position: absolute;
        left: 0px;
        right: 0px;
        width: 100%;
        background: #fff;
        top: 56px;
        min-height: 200px;
        border-bottom: 1px solid #ddd;
        padding-top: 0px;
        padding-bottom: 30px;
        overflow: auto;
        box-shadow: 0 2px 4px rgb(0 0 0 / 8%), 0 4px 12px rgb(123 123 123 / 8%);
        border-radius: 0px;
    }
    #termList .list-unstyled li {
        display: flex;
        list-style: none;
        min-height: 20px;
        width: 100%;
        background: #fff;
        padding: 8px 10px;
        font-size: 1.0em;
        font-weight: 500;
        color: #444;
        text-align: left;
    }
    #termList .list-unstyled li:hover {
        cursor: pointer;
        color: #002dfa;
    }
    #termList .list-unstyled li .material-icons {
        float: left;
        padding: 0px 10px 0px 5px;
    }
    
    /*---Form style 2--*/
    .form-style-2 label {
        font-weight: bold!important;
        font-size: 0.9em!important;
        color: #555;
    
    }
.form-style-2 .form-field {
    display: block;
    margin-bottom: 10px!important;
    padding: 10px 0px!important;
    border-bottom: 1px solid #ddd!important;
}

.form-style-2 input, .form-style-2 select{
    max-width: 300px!important;
    margin-bottom: 10px!important;
}
    /*----Sub site css----*/
    .subsite-header-row {
        margin: 0 auto;
        padding: 10px 10px!important;
        /* min-height: 300px; */
        position: relative;
        line-height: 30px;
        z-index: 9;
    }
    h1.subsite-title {
        font-size: 1.2em;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: 2px 2px #ddd;
    }
    h1.subsite-title .material-icons {
        position: relative;
        top: 6px;
        font-size: 22px;
    }
    /**---Article text page------*/
    .site-main-content,
    .site-main {
        display: block;
        position: relative;
        min-height: 500px;
        width: 100%!important;
            z-index: 1;
    }
    .min_height{
        min-height:800px!important;
    }
    
    article{
          /* These are technically the same, but use both */
          overflow-wrap: break-word;
          word-wrap: break-word;
        
          -ms-word-break: break-all;
          /* This is the dangerous one in WebKit, as it breaks things wherever */
          word-break: break-all;
          /* Instead use this non-standard one: */
          word-break: break-word;
        
          /* Adds a hyphen where the word breaks, if supported (No Blink) */
          -ms-hyphens: auto;
          -moz-hyphens: auto;
          -webkit-hyphens: auto;
          hyphens: auto;
    }
    
    .job-article div,.job-article>p,.job-article>div>p,.job-article table,.job-article ul,.job-article>div>ul,.job-article>p>ul {
        margin:20px 0px!important;
        
        
    }
    .job-article h1,.job-article h2,.job-article h3{
        font-size:1.3em;
        font-weight:bolder;
    }
    .job-article table div{
        margin:0px 0px!important;
    }
    .job-article ul li{
        margin:5px 0px!important;
        
    }
    
    .job-article table {
      width: 100%; /* Set the table width to 100% */
      border-collapse: collapse; /* Remove cell spacing */
      line-height:normal;
    }
    
    /* Set the minimum width for the first column */
    .job-article table tr td {
      min-width: 120px;
      padding:10px 10px 0px 0px;
    }

    .job-article span{
        font-weight:bold;
    }
    article.job-article img{
        height:auto!important;
         
    max-height: none!important;
    }
    ul{
         list-style-position: inside;
        list-style-type: disc;
        text-align: left;
    }
    article ul>ul,
    article ul>ul>ul,
    article ul>ul>ul>ul{
        padding:0px;
        margin:0px;
            display: inline-block;
   

    }
    .article-stats {
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .article-stats i {
        margin-right: 0px;
        font-size: 1.2em;
        position: relative;
        top: 3px;
    }
    .article-stats span,
    .article-stats a {
        margin-right: 10px;
        display: inline-block;
    }
    .site-main-content article {
        position: relative;
        width: 100%;
        display: block;
        font-size: 1.1em;
        line-height: 23px;
        text-align: justify;
        min-height: 1000px;
        margin-bottom: 100px;

    }
    .site-main-content article img {
        position:relative;
        width: 100%;
        max-height: 450px;
        object-fit: cover;
        object-position: top;
        margin: 10px 0px;
        margin-bottom: 30px;
        border-radius: 10px;
            display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    }
    article h1 {
        color:#444;
        font-size: 1.5em;
        padding: 0px 0px!important;
        margin: 10px 0px;
        line-height: normal;
        text-align: left;
        font-weight: 800;
    }
    .read-full-bkg {
        display: block;
        width: 100%;
        background:linear-gradient(358deg, rgb(255 255 255) 0%, rgb(255 255 255) 48%, rgb(255 255 255 / 82%) 100%);
        height: 20px;
        position: relative;
        bottom: 0px;
    }
    .read-full {
        display: block;
        max-width: 400px;
        text-align: center;
        padding: 10px 20px;
        background-color: #ddd;
        margin-bottom: 0px!important;
        margin: 40px auto;
        border-radius: 20px;
        position: relative;
        top: 60%;
        font-weight: 300;
    }
    .read-full:hover {
        background-color: #ddd;
    }
    article .media-source img{
          padding: 0px 5px 0px 0px!important;
            margin: 0px!important;
            top: 5px;
    }
    .small_text{
        font-size:0.8em;
    }
    article .media-source{
        text-transform:uppercase;
            font-size: 0.8em;
    }
    
    article .user-actions{
        display:flex;
        position:relative;
            margin-bottom: 10px;
    }
    article .user-actions .action-options{
        position: relative;
        top: 5px;
        left: 5px;
    }
     article .user-actions .sns-share-btn{
        padding:0px!important;
        margin:0px!important;
        position: absolute;
        right: 0px;
        top: 0px;
    }
    article .action-options a{
        margin-right: 10px!important;
    }
    article .action-options i.material-icons{
        font-size: 1.3em!important;
        
    }
    article .social-media-options {
        margin: 0px 0px!important;
        padding: 0px!important;
        padding: 0px;
    }
    article .socialmediaicon {
        text-align: center;
        padding: 0px;
        font-size: 0.8em;
        width: 30px;
        height: 30px;
    }
      article .socialmediaicon img{
          margin: 0px 0px!important;
        padding: 0px!important;
      }
    article .social-media-options a {
        padding: 0px;
        display: inline-block;
        text-decoration: none;
        color: #757575;
        width: 30px;
        height: 30px;
    }
    article .social-media-options a img {
        width: 100%!important;
        padding: 0px;
    }
    article .socialmediaicon .sns-name {
        text-indent: -99999px;
    }
    .subtitle_multi {
    max-width: 90px;
    display: inline-block;
    height: 25px;
    overflow: hidden;
    text-transform: capitalize;
}
    
    /*----comments-----*/
    .comments-section-title{
        font-size: 1.3em;
        font-weight: 600;
        color: #444;
        margin-bottom: 20px;
    }
    .article-comments {
        display: block;
        width: 100%;
        padding: 0px 0px;
    }
    .article-comments .comments-stat {
        display: flex;
        height: 30px;
        line-height: 30px;
        border-top: 1px solid #ddd;
    }
    .article-comments .region-1 {
        display: block;
        width: 20%;
        text-align: left;
    }
    .article-comments .region-2 {
        display: block;
        width: 80%;
        text-align: right;
    }
    .region-2 a {
        display: inline-block;
        padding-right: 20px;
    }
    .region-2 .n-comments {}
    .article-comments i {
        font-size: 1.5em;
        position: relative;
        top: 5px;
        width: auto;
    }
    .comment-actions {
        display: flex;
        text-align: center;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-top: #ddd 1px solid;
        border-bottom: #ddd 1px solid;
    }
    .comment-actions>* {
        display: inline-block;
      
    }
    .comment-actions .like,.comment-actions .share-btn{
          width: 30%;
    }
    .comment-actions .like {
         text-align: left;
        padding-left: 5px;
     }
    .liked {
        color: #4e6ef2!important;
    }
    .comment-actions .comments{
            width: 40%;
            text-align: center;
    }
    .comment-actions .share-btn{
        text-align: right;
        padding-right: 10px;
    }
    .loggin-action-message{
        background: #ffb40021;
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0px;
       
        text-align: center;
    }
    .loggin-action-message .message{
         font-style: italic;
        font-weight: 500;
        font-size: 1.0em;
        margin-bottom:5px;
        color: #555;
        
    }
    
 .loggin-action-message a{
    text-decoration: underline;
    font-weight: 100;
    font-size: 1.0em;
}
    .article-comment-form {
        display: block;
        width: 100%;
        min-height: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .article-comment-form .comment-field {
        display: flex;
        width: 100%;
        position: relative;
        border-radius: 30px;
        padding: 0px 10px;
        background: #ddd;
        border: 1px solid #ddd;
    }
    .article-comment-form textarea {
         font-family: arial, sans-serif;
        font-size: 15px!important;
        color: #444!important;
        width: 100%!important;
        position: relative;
        border: 0px;
        padding-top: 5px!important;
        padding-bottom: 5px!important;
        padding-left: 10px!important;
        padding: 0px;
        min-height: 0px;
        background: #ddd0;
    }
    .article-comment-form .comment-field button {
        border: none;
        background: none;
        position: relative;
    }
    .article-comment-form .comment-field button i {
        position: relative;
        top: 2px;
    }
    .comments-list {
        display: block;
        width: 100%;
        padding-bottom: 30px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;

    }
    .comment-container {
        display: flex;
        padding: 5px 0px;
    }
    .comment-container img {
        width: 55px;
        height: 55px;
        padding: 5px;
        border-radius: 55px;
        
    }
    .comment-container .post_readmore,
    .comment-container .post_readLess{
        color:#4e6ef2!important;
    }
    .comment-info .user-name {
           font-weight: bold;
    margin: 0px 0px 5px 0px;
    text-transform: capitalize;
    font-size: 0.9em;
    text-decoration: none!important;
    }
    .comment-info .date-time {
        font-size: 0.8em;
    }
    .comment-info {
        width: 90%;
        background-color: #f6f8fc;
        padding: 10px 10px;
        border-radius: 10px;
        position: relative;
            max-width: 400px;
    }
    .comment-container .comment {
           min-height: 20px;
    margin: 5px 0px 5px 0px;
    }
    .comment-container i.user-picture{
            font-size: 3.0em!important;
    }
    .comment-container.deletecomment {}
    .comment-info .date {
        position: absolute;
        top: 10px;
        right: 40px;
    }
    .comment-container .published-time{
       font-size: 0.6em;
    font-style: italic;
    position: absolute;
    bottom: 7px;
    right: 10px; 
    }
    .comment-menu {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 20px;
        height: 20px;
    }
    .comment-menu .material-icons {
        font-size: 13px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
    }
    .comment-menu .material-icons:hover {
        color: #000;
        cursor: pointer;
    }
    .comment-info .voirpluscomments {
        color: #444;
        font-weight: bold;
        margin-top: 10px;
        display: inline-block;
    }
    .deletecomment {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
     .popup {
        display: none;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        background-color: #000000b0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        z-index: 9999999999999!important;
        overflow-y: auto;
    }
    
    .popup .close{
        position: absolute;
        top: 10px;
        right: 12px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        text-align: center;
        line-height: 20px;
        color: #444;

        
    }
    .popup .close i{
        font-size:18px;
        
    }
    .popupcontentcontainer {
        background-color: #ffffff!important;
        position: absolute!important;
        width: 70%;
        max-width: 300px;
        border-radius: 3px;
        min-height: 300px;
        height: auto;
        padding: 10px 10px;
        overflow-x: auto;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        overflow-x: auto;
    }
    .popupcontent{
        font-size:0.9em;
        text-align:center;
    }
    .popupcontent h3{
        font-size:1.2em;
        margin-top:5px;
        margin-bottom:20px;
    }
    .popupcontent .popupcontent-body{
        max-width: 250px;
        margin: 0 auto;
        line-height: 16px;
       
    }
    .popupcontent .response-text{
            
    display: inline-block;
    text-align:center;
    border-radius:5px;
    padding:5px;
    color:#555;
        
    }
    .last-localization{
        font-size:0.9em;
        color:#777;
        line-height:16px;
        margin:10px;
    }
    .popupcontent .actualiter_btn{
        font-size:0.9em;
        display: inline-block;
        text-align:center;
        border-radius:5px;
        padding:5px 10px;
        color:#fff;
        background: #555;
        margin: 10px;
        
    }
    .popupcontent button.activate_geo{
        display:inline-block;
        border-radius: 50%;
        border: 2px solid #ddd;
        padding: 15px;
        background:#ffff;
        color:#ccc;
        margin:10px;
    }
    .popupcontent button.activate_geo i{
         color:#ccc;
    }
    /*--social media sharing--*/
    .social-share-popup {}
    .social-share-popup {
        display: none;
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        background-color: #000000b0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        z-index: 9999999999999!important;
    }
    .social-share-box {
        background-color: #ffffff!important;
        position: absolute!important;
        width: 70%;
        max-width: 300px;
        border-radius: 3px;
        height: auto;
        padding: 10px 10px;
        overflow-x: auto;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        left: 50%;
        overflow-x: auto;
    }
    .social-share-box .block-title.popup{
        margin-left:10px;
    }
    .social-media-options {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 0px!important;
        width: min(95%, 45rem);
        margin: 0 auto;
    }
    .socialmediaicon {
        text-align: center;
        padding: 5px;
        font-size: 0.8em;
        width: 25%;
    }
    .social-media-options a {
        display: inline-block;
        text-decoration: none;
        color: #757575;
    }
    .socialmediaicon img {
        padding: 5px;
        width: 50px;
        margin-bottom: 4px;
    }
    .sharelink {
        position: relative;
        display: block;
        border: 1px solid #ddd;
        overflow-x: hidden;
        overflow-y: hidden;
        width: 90%;
        min-height: 30px;
        margin: 20px auto;
        line-height: 30px;
        height: 30px;
        padding: 0 10px;
        background-color: #ddd;
        color: #000;
        border-radius: 3px;

    }
    .bknlinkcopy {
        width: 100%;
        height: 50px;
        overflow-x: scroll;
        white-space: nowrap;
        padding-right: 220px;
        box-sizing: content-box;
        display: block;
        font-size:0.7em;
    }
    .tooltip {
        position: relative;
        display: inline-block;
    }
    .tooltiplinkcopy {
        display: inline-block;
        background: #f5f5f5;
        right: 0!important;
        top: 0px!important;
        position: absolute!important;
        display: block;
        height: 30px;
        line-height: 30px;
        z-index: 50;
        padding-right: 5px;
    }
    .close-btn,
    .close-btn-2 {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
      
      
    }
    .close-btn i,
    .close-btn-2 i{
        font-size:18px!important;
        
    }
    .tooltiplinkcopy .info-btn {
        border: none!important;
        background-color: unset!important;
        font-size: 0.7em!important;
        line-height:30px;
        display: inline-block;
        position: relative;
        top: 0px;
    }
    .tooltip .tooltiptext.tooltiptext2 {
        visibility: hidden!important;
        font-size: 1.5em!important;
        width: 140px!important;
        background-color: #555!important;
        color: #fff!important;
        text-align: center!important;
        border-radius: 6px!important;
        -webkit-border-radius: 6px;
        padding: 5px!important;
        position: absolute!important;
        z-index: 1!important;
        bottom: 5px!important;
        left: -10px!important;
        margin-left: -75px!important;
        opacity: 0!important;
        -webkit-transition: opacity 0.3s!important;
        -o-transition: opacity 0.3s!important;
        transition: opacity 0.3s!important;
        z-index: 9999999!important;
    }
    
    /*------Login popup-----*/
    #popup_login_form .popupcontent{
           background: #fff;
    display: flex;
    max-width: 300px;
    width: 100%;
    min-width: 200px;
    position: relative;
    border-radius: 10px;
    padding: 10px 0px 40px 0px;
        
        
    }
    #popup_login_form .popupcontent form{
        height:auto!important;
    }
    .login-form{
        padding:0px!important;
    }
    
     #popup_login_form .login-form h1{
        margin: 0px auto!important;
        margin-top:5px!important;
        width: 100%!important;
    }
    .popup-close-btn{
       position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .popup-close-btn i{
        font-size:16px!important;
    }
    
    
    
    /*---Light box popup*/
    
    .lb-data .lb-close{
        background-size: 15px!important;
    }
    
    .lb-closeContainer {
        position: absolute!important;
        top: -25px!important;
        right: 10px!important;
    }
    /*-----Emploi page ------*/
    
    .profil_emploi_wrapper{
        
    }
    
    .cv_wrapper{
      
        padding: 0px!important;
        min-height:600px;
    }
    .profil_emploi_wrapper .section-wrap{
    
        border-bottom: 1px solid #ddd;
        margin-bottom: 5px;
        min-height:600px!important;
    }
     .profil_emploi_wrapper .profile_banner{
         min-height:300px!important;
     }
  .cv_personal_info{
     
          position: relative;
    margin: 40px 0px;
    margin-bottom: 30px;
  }
   .cv_personal_info .cv_photo img{
    width: 100px!important;
    height: 100px!important;
    object-fit: cover;
  

       
   }
   
   .cv_personal_info .cv_photo {
       text-align: center;
    margin-bottom: 30px;

}
.cv_personal_info .info-field {
    margin-bottom: 3px;
    line-height: 19px;
    text-align: left;
    font-size: 0.9em;
}
.cv_title{
  
        text-align: center;
    font-weight: bold;
    margin-top: 0;
}

.profil_emploi_wrapper .block-footer{
        text-align: center;
    font-size: 0.8em;
    color: #000;
 text-decoration:underline;
}
    table.cv-table{
        width: 100%;
        text-align: left;
        line-height: normal;
        font-size: 0.9em;
    }
    table.cv-table td:nth-child(1) {
    /* your styles here */
    font-style:italic;
}

   table.cv-table td:nth-child(2) {
  
    font-weight:bold;
}

    table.cv-table tr td{
        padding-bottom: 15px!important;
        line-height: normal;
        padding-right: 5px;

    }
    
    i.edit{
        padding:5px 0px!important;
    }
      .info_personnelle{
          position:relative;
             text-align: center;
            padding: 0px;
            line-height: 20px;
            margin-bottom: 10px;
            margin-top: 10px;
          
      }
      .info_personnelle .cv_photo img {
               width: 100px!important;
            height: 100px!important;
            padding: 0px 0px;
            margin: 10px;
            object-fit: cover;
            border-radius: 100%;
        }
        
        .info_personnelle .name{
             font-weight:bold;
                 font-size: 1.2em;
        }
        .info-field{
            margin-bottom:10px;
            line-height:19px;
            text-align:left;
        }
        .info-field .name{
            font-size: 1.4em;
        font-weight: bold;
        padding-bottom: 10px;
        display: inline-block;
        }
        
    .btn_icon {
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px;
        min-width: 70px;
        text-align: center;
        border-radius: 20px;
        text-decoration: underline;
    }
            
        .action_menu{
            padding:10px;
        }
            
        .action_menu a{
            display:inline-block;
            width:100%;
            height:30px;
            line-height:30px;
            border-bottom:1px solid #f5f5f5;
            
        }
      .cv-title{
          font-weight:bold;
          text-align:left;
          text-transform:none;
              margin-bottom: 30px;
            font-size: 1.3em;
      }
    .emploi-section-title{
            font-size: 1.0em;
        text-transform: uppercase;
        font-weight: bold;
        padding: 0px 10px;
        color: #fff;
        background: #601a60;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .sns-main-content.emploi{
        
    }
    main.emploi .content-no-found{
        text-align:center;
       
    }
    .post-content-formatter{
            padding: 0px 10px!important;
        min-height:170px;
    }
    h1.article-title{
        font-size:1.5em!important;
        font-weight:bolder;
    }
    .article-details {
        display: block;
        width: 100%;
        margin: 10px 0px 20px 0px;
        border-bottom: #ddd solid 1px;
    }
    .article-details .article-details-champ {
        display: inline-block;
        border-top: #ddd solid 1px;
        width: 100%;
        padding: 10px 10px;
            padding-left: 0px;
    }
    .article-details .article-details-champ label {
        font-weight: bold;
    }
    .article-details-champ .material-icons {
        font-size: 1.2em;
        position: relative;
        top: 4px;
    }
    .btn_text.saved {
        background: gold!important;
        color: #000;
    }
    
    .btn_text.desactived,.btn_text.desactived:hover{
            background: #909090!important;
    }
    .btn_text {
        font-size: 0.8em;
        padding: 2px 10px;
        border: 1px solid #ddd;
        line-height: 25px;
        border-radius: 40px;
        padding-left: 28px;
        margin-bottom: 20px;
        font-weight: bold;
        text-align: left;
        min-width: 80px;
        display: inline-block;
        position: relative;
        background: #4e6ef2;
        color: #fff;
    }
    .btn_text:hover,
    .btn_text.active {
        color: #fff;
        background: #4662d9;
        cursor: pointer;
    }
    .btn_text .material-icons {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        left: 10px;
    }
    .btn_text.mini {
        line-height: 20px;
    }
    .no-icon {
        padding-left: 0px!important;
    }
    .btn_text.mini .material-icons {
        font-size: 14px;
        left: 12px;
    }
    .btn_text .material-icons {}
    .region_btn {
        display: inline-block;
        position: absolute;
        top: 15px;
        right: 10px;
    }
    .region_btn_float_right {
        display: flex;
        justify-content: flex-end;
    }
    .region_btn_float_right a.btn_text {}
    .btn_text.saved {
        background: gold!important;
        color: #000;
    }
    .btn_text {
        font-size: 0.8em;
        padding: 2px 10px;
        border: 1px solid #ddd;
        line-height: 25px;
        border-radius: 40px;
        padding-left: 27px;
        margin-bottom: 20px;
        font-weight: 300;
        text-align: left;
        min-width: 80px;
        display: inline-block;
        position: relative;
        background: #4e6ef2;
        color: #fff;
    }
    .btn_text:hover,
    .btn_text.active {
        color: #fff;
        background: #4662d9;
        cursor: pointer;
    }
    .btn_text .material-icons {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        left: 10px;
    }
    .btn_text.mini {
        line-height: 20px;
    }
    .no-icon {
        padding-left: 0px!important;
    }
    .btn_text.mini .material-icons {
        font-size: 14px;
        left: 12px;
    }
    .btn_text .material-icons {}
    .region_btn {
        display: inline-block;
        position: absolute;
        top: 15px;
        right: 10px;
    }
    .cv_photo img{
        width:90px!important;
        height:100px!important;
            object-fit: cover;
    }
    .cv_form{
       
       
    }
    .cv_form .sns-post{
         padding-top:10px;
         padding-bottom:30px;
    }
    .cv_form .block-title{
        font-weight:bold;
        margin-bottom:10px;
    }
    .cv_form h1 {
    font-size: 1.5em!important;
    font-weight: bold!important;
    }
    .cv_form label{
        display:block;
        font-weight:bold;
        padding-top:10px;
    }
    .cv_form input{
        display: block;
        width: 60%;
        min-width: 200px;
        max-width: 300px;
        height: 25px;
        border: 1px solid #777;

    }
    .cv_form button{
        margin-top:10px;
    }
    /*---annonces***/
    
   .sub_menu a.active{
       color:#000!important;
       font-weight:bold;
   }
    
   .category_menu_list {
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0px;
    background: #000000d9;
  
    transform:translateX(-50%);
    left:50%;
    height: 100vh;
    padding: 30px 10px;
}
.category_menu_list .popup-close-btn{
   position:absolute;
   top:20px;
   right:30px;
}

.category_menu_list .popup-close-btn i {
    font-size: 26px!important;
    color: #fff;
}

    .category_menu_list .flex-container {
     display: block!important;
    
    margin-bottom: 30px;
    max-width:450px;
     transform:translateX(-50%);
    left:50%;
     height: 80vh;
    justify-content: center;
    max-height: 630px;
    padding-bottom: 40px;
    overflow-y: auto;
    position: relative;
    top: 4%;
    background: #fff;
    z-index: 999;
    border-radius:5px;
    }
    .category_menu_list .flex-container:after {
        content: "";
        flex: auto;
    }
    .category_menu_list .category_menu_items {
         display: inline-block;
        vertical-align: middle;
        width: 48.0%;
        height: 70px;
        line-height: normal;
        padding: 5px 0px !important;
        font-size: 0.9em;
        margin-right: 5px;
        margin-top: 5px;
        padding: 0px;
        position: relative;
        background-color: #fff;
        border-radius: 0px;
        border: #ddd 1px solid;
        box-shadow: 0 2px 4px rgb(0 0 0 / 4%), 0 4px 6px rgb(123 123 123 / 4%);
        overflow: hidden;

    }
    .category_menu_list .category_menu_items:hover,
    .category_menu_list .active_menu {
        background-color: #4e6ef2;
        color: #fff;
    }
    .category_menu_list .category_menu_items span {
       display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height:100%!important;
        border-radius:none;
    }
    
    .category_menu_list .cat_menu_icon_wrapper{
        display: block !important;
        width: 50px !important;
        /* height: 100% !important; */
        background: whitesmoke;
        float: left !important;
        border-radius: 50%;
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    
    

    .category_menu_list .category_menu_items .material-icons {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        float: left;
        height: 100%;
        margin-bottom: 5px;
    }
   .category_menu_list .category_menu_items .menu_cat_name{
       font-size: 0.8em;
    font-weight: bold;
    display: block;
    max-width: 200px;
    max-height: 50px;
   
    overflow: hidden;
    padding: 5px;
    }
    .category_menu_list .category_menu_items .menu_cat_name::first-letter{
         text-transform: uppercase;
    }
    
   .category_menu_list .category_menu_items img.cat_menu_icon{
        width: 80%;
        height: 80%;
        float: left;
        padding: 5px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;

    }
    
.category_list_2{
    display:flex;
    width: 130%;
    height: 100px !important;
    
 
    
}
.category_list_2.fixed-slide{
     overflow-x:auto;
     margin-bottom:5px;
}
.h_auto_swiper{
    overflow:hidden;
    position: relative;
    margin-bottom:30px;
    overflow-x:auto;
}

.h_auto_swiper .category_list_2{
   
    position: relative;
    
     

}
.category_list_2-row{
    overflow-x:hidden;
    margin:10px auto!important;
    padding:10px 10px ;

}
.category_list_2 .category_menu_items{
    min-width: 70px !important;
    width: 80px !important;
    line-height: normal;
    text-align: center;
    font-size: 0.8em;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden !important;
    height: 100px !important;
    padding: 10px;
}

.category_list_2 .category_menu_items .menu_cat_name {
      margin-top: 10px;
    padding: 0px 0px;
    text-transform: capitalize;
    font-size: 12px;

}
.cat_menu_icon_wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:50px;
     background:whitesmoke;
    margin: 0 auto;
    border-radius:50%;
    
}
.category_list_2 .category_menu_items img{
    width:25px;
    height:25px;
  
    
}


    /*---form---*/
    .form-section {
        min-height: 100%;
        position: relative;
    }
    .form {
        font-size: 1.1em;
        position: relative;
     
        display: block;
        text-align: left;
        max-width: 500px;
        width: 100%;
        padding: 10px 10px 10px 10px;
        padding-bottom: 20px;
    }
    form #imageDisplay img{
        margin-right:5px;
    }
    .form-field {}
    .form input,
    .form button,
    .form select,.form textarea {
        width: 100%;
        display:block;
        height: 35px;
        margin-left: 0px;
        margin-bottom: 8px;
        border: #333 solid 0.5px;
        padding: 5px 10px;
        border-radius: 3px;
        color: #000;
    }
    .form select{
        width: 50%!important;
        text-transform: capitalize;
    }
    .form textarea {
        height:100px;
    }
    .form .inline_group{
        display:flex;
        gap:5px;
    }
    .form .inline_group .field{
        
    }
    
    .form label {
        font-weight: bold;
        font-size: 1.0em;
    }
    .form button,
    .btn-primary {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 32px;
        margin-left: 0px;
        margin-top: 20px;
        border: none;
        border-radius: 0px;
        font-size: 1.0em;
        background-color: #002dfa!important;
        color: #fff;
        border-radius: 20px;
            font-weight: bold;
    }
    a.back_link{
       
        font-size: 1.0em;
        margin: 20px 10px;
        border: 0px;
        font-weight:500;
    }
    .form .links-block {
        display: block;
        font-size: 1.0em;
        width: 100%;
        text-align: center;
        line-height: 1.8em;
        text-decoration: underline;
        margin-top: 20px;
    }
    .form-info small{
           font-size: 0.8em;
    font-style: italic;
    }
    .form .sns-login {
        display: block;
        width: 100%;
        text-align: center;
        margin: 30px 0px;
    }
    .form .sns-login .text {
        font-weight: bold;
        margin: 20px 0px;
        display: block;
        width: 100%;
        text-align: center;
    }
    .form .sns-login .sns {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }
    .form .sns-login .sns img {
        width: 100%;
        height: 100%;
    }
    .form .invalidFeedback {
        color: red;
        font-size: 0.85em;
    }
    .terms {
        padding: 10px 0px 20px 0px;
        text-align: justify;
    }
    .champ-obligatoire {
        color: tomato;
        margin-left:3px;
    }
    .cofrimation_message {
        text-align: center;
        padding-top: 70px;
        display: block;
        max-width: 300px;
        margin: 20px auto;
    }
    .cofrimation_message h1 {
        text-align: center;
        font-size: 1.4em;
        line-height: 1.4em;
        font-weight: bold;
        margin-bottom: 40px;
    }
    .cofrimation_message p {
        font-size: 1.1em;
        line-height: 1.3em;
    }
    .cofrimation_message strong {
        font-weight: bold;
        color: #002dfa;
        font-style: italic;
    }
    .form .profile_picture img {
        display: block;
        width: 100px;
        height: 100px;
        margin: 30px auto;
    }
    .form input[type='file'] {
        border: 0px!important;
        margin: 0px 0px 5px 0px;
        padding: 0px!important;
        height: 25px;
    }
    .user-post-form textarea {
        width: 100%;
        min-height: 150px;
        margin: 10px 0px;
        padding: 10px;
        font-family: inherit;
    }
    /*--user admin tables*/
     table.admin-table{
         min-width:800px;
         width:100%; 
         max-width:980px;
         overflow-x:auto;
         table-layout: fixed; /* This makes the table respect the width of the cells */
        border-collapse: collapse;
     }
      .max-width-col {
        max-width: 100px; /* Set the maximum width for the column */
        overflow: hidden; /* Ensures the content doesn't overflow the cell's bounds */
        text-overflow: ellipsis; /* Adds an ellipsis if the content overflows */
        white-space: nowrap; /* Prevents the content from wrapping */
    }
    table.admin-table img {
        width: 80px!important;
        height: auto;
    }
    table.admin-table tr th {
        min-width: 30px;
        background-color: #5b6178;
        font-weight: bold;
        color: #fff;
        padding: 5px;
        border: 0px;
         max-width: 100px; /* Set the maximum width for the column */
        overflow: hidden; /* Ensures the content doesn't overflow the cell's bounds */
        text-overflow: ellipsis; /* Adds an ellipsis if the content overflows */
        white-space: nowrap; /* Prevents the content from wrapping */
        
    }
    table.admin-table tr td {
        border-bottom: #ddd 1px solid;
            min-width: 30px;
    text-align: center;
     max-width: 100px; /* Set the maximum width for the column */
     max-height: 80px;
        overflow-y: auto; /* Ensures the content doesn't overflow the cell's bounds */
        
        white-space: auto; /* Prevents the content from wrapping */
    }
    table.admin-table td {
        vertical-align: top;
        padding: 10px 5px;
        line-height: normal;
    }
    table.admin-table td .title {
        font-size: 1.1em;
        font-weight: bold;
        color: #444;
    }
    table.admin-table td:nth-child(2) {
        width: 35%;
    }
    table .btn {
        padding: 2px 5px;
        color: #fff;
        border-radius: 10px;
        font-size: 0.8em;
        width: 80px;
        display: inline-block;
        text-align: center;
    }
    
    .table-wraper{
        width:100%;
        overflow-y:auto!important;
        padding-bottom:20px;
      
    }
    .primary {
        background: #002dfa;
    }
    .btn-danger {
        background: red;
    }
    /*---Ma page annonce--*/
    .top-highlights-region {
        width: 100%;
       
        background: #fff;
        line-height: normal;
    }
    .top-highlights-region .col1 {
        display: block;
        width: 100%;
    }
    .top-highlights-region .col2 {
        display: block;
        width: 100%;
        padding: 10px;
        border-left: 1px solid #ddd;
    }
    .top-highlights-region .text-content {
        display: inline-block;
        min-width: 150px;
        max-width: 500px;
        min-height: 150px;
        padding: 0px 10px;
    }
    .top-highlights-region img.profile-picture {
        display: block!important;
        margin:0 auto!important;
        float:none!important;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 5px #fff solid;
        background: #fff;
    }
    .followedbtn,.followedbtn a{
    color: green;
    border-color: green!important;
    }
    .followers {
        font-weight: bold;
        padding: 10px 0px;
    }
    .annonce-profile-header-wrap {
        background: #fff!important;
        min-height: 200px!important;
        box-shadow: 0 2px 4px rgb(0 0 0 / 0%), 0 4px 12px rgb(123 123 123 / 8%);
        border-radius: 10px;
            margin-top: 10px;
    }
    /***User badge****/
    .user-info-badge {
        min-height: 150px;
        background: #fff;
        display: flex;
        padding: 5px;
        border-radius: 10px;
    }
    .user-info-badge .profile_picture {
       width: 75px!important;
        height: 75px!important;
        padding: 5px;
        border-radius: 50%;
        margin-right: 20px;
        object-fit: cover;
        display: block;
        margin: 0 auto;
        border: 5px solid #ddd;
        padding: 0px;
    }
    .user-info-badge {
        margin-top:30px;
            border-top: 1px solid #ddd;
    border-radius: 0;
    padding-left: 0px ;
        /*box-shadow: rgb(0 0 0 / 4%) 0px 2px 4px, rgb(123 123 123 / 4%) 0px 4px 6px;
    border: #ddd 1px solid;*/
    
    }
    .user-info-badge .profile_username {
       font-weight: bold;
        margin-bottom: 7px;
        font-size: 1.2em;
        text-align: center;
        
        text-transform: capitalize;
    


    }
    .user-info-badge label {
        font-weight: bold;
    }
    .user-info-badge .infoitem {
        margin-top: 0px;
        text-align:center;
    }
    .user-info-badge a.btn {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 5px;
        margin-top: 5px;
        background: #002dfa;
        color: #fff;
        font-weight: bold;
        font-size: 0.9em;
        width: auto;
    }
    .page_info_wrapper{
        margin:20px 0px;
    }
    .page_info_wrapper .infoitem {
        display: block;
        width: 100%;
        max-width: 220px;
        margin: 5px auto;
        border: #000 solid 1px;
        border-radius:3px;
    }
    .page_info_wrapper .infoitem:hover {
        background:#000;
        color:#fff;
    }
    
    .user-info-badge-title1{
        font-size:1.0em!important;
        text-align: center;
        line-height: normal;
        max-width: 70%;
        margin: 0 auto;
        margin-bottom: 20px;
        margin-top: 10px;
}

    .infoitem.btngroup{
        text-align:center;
    }
    .user-info-badge .btngroup {}
    .user-info-badge label .material-icons {
        font-family: 'Material Icons'!important;
        font-weight: normal!important;
        font-style: normal!important;
        font-size: inherit!important;
        line-height: 1;
        position: relative;
        top: 2px;
    }
    .user-info-badge .date {
        font-size: 0.8em;
        margin: 5px 0px 10px 0px;
    }
    /*---Annonces popu----*/
    .gallery-thumbs a {
        width: 25%!important;
        height: 120px;
        margin: 10px 0px;
    }
    .ishop .article-photo-gallery {
        position:relative;
    }
   .ishop .article-photo-gallery .action-btn {
            position: absolute;
            top: 15px;
            right: 5px;
            z-index: 99;
            width:35px;
}
 .ishop .article-photo-gallery .action-btn .material-icons{
         display: block;
    font-size: 15px;
    line-height: normal;
    display: block;
    color: #000000;
    background: #ffffffb8;
    border-radius: 100%;
    padding: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid #ccc;
 }
 

    .ishop .article-photo-gallery .action-btn .save-btn i {
           position: relative;
            top: 0px;
        
    }
    .ishop .article-photo-gallery .action-btn .save-btn i:hover,.ishop .article-photo-gallery .action-btn .save-btn.saved i{
        color: #ff0000!important;
    }
    .article-details-champ.article-stats{
        margin-bottom:0!important;
    }
    .article-stats.article-details .article-details-champ{
        margin-bottom:0px!important;
    }
    .main-article-thumb {
        width: 100%!important;
        height: 500px!important;
        object-fit: cover;
        object-position: top;
    }
    .gallery-thumbs {
        display: flex;
    }
    .main-article-image-thumb {
        width: 100%!important;
        height: 100%!important;
        object-fit: cover;
        object-position: top;
    }
    article.ishop .price-title {
       font-size: 1.8em !important;
        font-weight: bold !important;
        display: inline-block;
        width: 100%;
        margin: 0px 0px;
        background: #ddd;
        color: #000000;
        padding: 10px;
       
        border-top: 1px solid #ccc;
    }
    article.ishop .price-title .price-text{
        color:brown!important;
    }
    /*--Popup product offer*****/
    .popup-block-box {
        position: relative;
        display: block;
        width: 90%;
        max-width: 500px;
        min-height: 400px;
        background-color: #fff;
        padding: 10px;
        position: relative;
        margin: 0 auto;
        top: 30%;
        transform: translateY(-70%);
        border-radius: 5px;
        overflow-y: auto;
    }
    .pop-up-block-title {
        font-size: 1.3em;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 20px;
        text-align: center;
        width: 100%;
    }
    .pop-up-block-title i {
        /* border: 1px solid #000; */
        font-size: 1.5em;
        position: relative;
        top: 5px;
        margin-right: 5px;
    }
    .popup-block-box .contents {
        width: 300px;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        min-height: 300px;
    }
    .popup-block-box .contents label {
        font-weight: bold;
        color: #555;
    }
    .popup-block-box .contents input,
    textarea {
        width: 100%;
        margin: 5px 0px;
        border: #ddd 1px solid;
        padding: 10px;
        font-family: system-ui;
    }
    .popup-block-box .contents input {
        height: 30px;
    }
    .product-preview {
        display: flex;
        width: 100%;
        font-size: 0.8em;
        line-height: 20px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 5px;
    }
    .product-preview label {}
    .product-preview .image {
        width: 20%!important;
        height: auto;
    }
    .product-preview .product-title {
        font-weight: bold;
    }
    .product-preview .image img {
        width: 100%;
        height: auto;
    }
    .product-preview .product-info {
        width: 80%;
        padding: 0 5px;
        line-height: 14px;
    }
    .popup-block-box-close {
        text-align: center;
        display: block;
        position: absolute!important;
        right: 10px;
        top: 10px;
        border-radius: 50%;
        color: #444;
        width: 20px;
        height: 20px;
    }
    .popup-block-box-close i {
        color: #444;
        font-size: 1.3em;
    }
    .popup-block-box-close:hover {
        cursor: pointer;
    }
    /**/
    .select-btn .select {
        display: none;
        position: absolute;
        top: 30px;
        left: 30px;
        width: 160px;
        min-height: 130px;
        background: #353949;
        border-radius: 5px;
        padding: 10px 0px;
        z-index: 9;
    }
    .select-btn .select a {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 30px;
        color: #fff;
        display: block;
        position: relative;
        font-size: 10px;
        font-weight: bold;
    }
    .select-btn .select a:hover {
        background: #585e76;
    }
    /*----user nmessaging css------------------*/
    .message-wrapper {
        display: flex;
        background: #fff;
    }
    .message-horizontal-menu {
        width: 70px;
        background-color: #444;
    }
    .message-chat-menu {
        position: relative;
        top: 150px;
        color: #ddd;
    }
    a.message-chat-menu-item {
        color: #ddd!important;
        font-size: 0.8em;
        display: block;
        text-align: center;
        height: 80px;
        padding: 5px;
    }
    a.message-chat-menu-item:hover {
        color: #fff!important;
    }
    .messages-list {
        width: 35%;
    }
    .messages-list-item {
        font-size: 0.9em;
        position: relative;
        display: flex;
        border-bottom: #ddd solid 1px;
        width: 100%;
        padding: 10px 5px;
    }
    .messages-list-item .user-profile {
        width: 60px;
        height: 60px;
        padding: 5px;
        display: inline;
    }
    .messages-list-item .user-profile img {
        width: 100%!important;
        height: 100%!important;
        border-radius: 50%;
    }
    .messages-list-item .message-info {
        display: inline;
        padding: 7px 0px;
        text-transform: initial;
    }
    .messages-list-item:hover,
    .messages-list-item.active {
        background-color: #002dfa;
        color: #fff;
    }
    .message-body {
        position: relative;
        border-left: 1px solid #ddd;
        width: 65%;
        padding: 10px;
        height: 900px;
    }
    .messages-list-item-link {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }
    .message-body-messages-wrapper {
        height: 600px;
        overflow: scroll;
    }
    .message_editing {
        width: 100%;
        padding: 10px;
    }
    .message_editing form textarea {
        display: block;
        font-family: arial, sans-serif;
        width: 100%;
        height: 120px;
        position: relative;
        padding: 10px;
        border: 1px #ddd solid;
        margin-bottom: 20px;
    }
    .message-center-container {
        position: relative;
        width: 980px;
        max-width: 980px;
        display: block;
        margin: 0 auto;
        border: none;
        min-height: 900px;
        margin-top: 20px;
    }
    .message-content-region {
        margin-bottom: 10px;
    }
    .message-main-content {
        padding: 0px;
    }
    .message-main-content h2 i {
        position: relative;
        top: 4px;
    }
    .message-post {}
    .message-post .post-content {
        padding: 0px;
        min-height: 200px;
    }
    .attached-files {
        padding: 10px 0px;
    }
    .attached-files .attached-btn {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #ddd;
        background-color: #ddd;
        text-align: left;
    }
    .attached-files .attached-btn i:hover {
        color: #002dfa;
    }
    .message-content {
        min-height: 70px;
        padding: 0px;
        border-radius: 5px;
        display: flex;
        margin-bottom: 20px;
        max-width: 450px;
        position: relative;
    }
    .message-content:hover {}
    .message-user-picture {
        width: 75px;
        height: 75px;
        float: left;
        text-align: center;
    }
    .message-user-picture img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .message-text-wrapper {
        width: 100%;
    }
    .message-text-wrapper .text-message {
        position: relative;
        border-radius: 5px;
        margin-top: 10px;
        line-height: 18px;
        width: 90%;
        text-align: left;
        font-size: 0.9em;
        background: #ecf3ff;
        padding: 10px;
        min-height: 30px;
    }
    .message-text-wrapper .text-message:hover {
        background-color: #f6f8fc;
    }
    .messages-list-header {
        position: relative;
        width: 100%;
        height: 70px;
        background-color: #fff;
        padding: 10px;
    }
    .messages-list-header .title {
        font-weight: bold;
        font-size: 1.5em;
    }
    .messages-search {
        width: 100%;
        height: 70px;
        background-color: #f6f8fc;
        padding: 20px 10px;
        margin-bottom: 10px;
        border-bottom: 1px #ddd solid;
    }
    .messages-search-input-wrapper {
        display: block;
        position: relative;
        width: 100%;
        height: 35px;
        border-radius: 20px;
        border: #ddd solid 1px;
        padding: 10px;
        background: #fff;
    }
    .messages-search-input-wrapper input {
        display: inline-block;
        position: absolute;
        top: 5px;
        left: 10px;
        border: 0px;
        width: 90%;
        padding: 5px;
    }
    .messages-list-header img.user-profile {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
    }
    .date-message {
        text-align: center;
        margin: 10px;
        font-style: italic;
        font-weight: bold;
        color: #666;
    }
    .message-menu-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .message-content .message-time {
        font-size: 0.8em;
        position: absolute;
        right: -35px;
        bottom: 0px;
    }
    .message-menu-btn a:hover {
        color: #002dfa;
    }
    .text-message a {
        color: blue;
    }
    .text-message .seen {
        text-align: right;
        color: #02cd02;
        display: block;
        position: absolute;
        right: 10px;
        bottom: 5px;
    }
    .text-message .seen i {
        font-size: 1.1em;
    }
    .messages-list-item .unread-msgs {
        font-weight: bold;
        background: red;
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    .message-body .chat-home-message {
        display: inline-block;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translateY(-40%);
        transform: translateX(-50%);
        text-align: center;
    }
    .chat-home-message i {
        margin: 10px;
        font-size: 5.0em;
        color: #ddd;
    }
    /**END MESSAGE**/
    /*transtation page*/
    .transaction-steps {
        width: 100%;
        overflow-x: auto;
    }
    .steps-menu {
        width: 100%;
        display: flex;
    }
    .steps-menu-item {
        width: 25%;
        height: 100px;
        display: block;
        border: 1px solid #ddd;
    }
    .steps-menu-item .step-number {
        color: #4e6ef2;
        font-weight: bold;
        text-align: center;
        border: 1px solid #4e6ef2;
    }
    .step-title {
        text-align: center;
        padding: 5px;
    }
    a.underlinelink0 {
        text-decoration: underline;
    }
    a.underlinelink1 i {
        font-size: 1.5em;
        padding-right: 3px;
        display: inline-block;
    }
    a.underlinelink1 i.left {
        float: left;
    }
    a.underlinelink1 i.right {
        float: right;
        text-decoration: none!important;
    }
    a.underlinelink1 {
        display: flex;
        font-size: 0.9em;
        line-height: normal;
        margin-bottom: 5px;
        width: 150px;
    }
    .underlinetext {
        text-decoration: underline;
    }
    table .status {
        padding: 2px;
        display: inline-block;
        width: 80px;
        text-align: center;
        background-color: #666;
        margin-top: 5px;
        line-height: normal;
        font-size: 0.7em;
        color: #fff;
        border-radius: 20px;
    }
    table .status.active {
        background-color: #002dfa;
    }
    /*-----Landing page afriliks services------*/
    .content-wrapper {
        width: 100%;
        position: relative;
        display: block;
        background:#fff!important;
    }
    .sitename2 {
       text-transform: initial;
    font-size: 2.5em;
    font-weight: 777;
    color: #002dfa;
    display: block;

    }
    .sitename2 i{
            font-size: 35px;
        position: relative;
        top: 7px;
        
        display: inline-block;
        width: 40px;
        height: 40px;
    
    }
    .main-content {
        display: block;
        position: relative;
        top: 0px;
        min-height: 120px;
        text-align: center;
    }
    .main-content .search-form-2 {
position: relative;
    display: block;
    background-color: #fff;
    height: 45px;
    transform: none;
    top: 0;
    text-align: center;
    width: 80%;
    max-width: 320px;
    margin: 10px auto;
    margin-bottom:10px!important
    ;
    border: 5px #fff solid;
    border-radius: 30px;

    }
    .main-content .search-options-2 {
        display: inline-block;
        position: absolute;
        top: 18%;
        transform: translateY(-50%);
    }
    .main-content .searchbar-2 {
      display: inline-block;
        position: absolute;
        left: 12px;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.0em;
        width: auto;
        height: 40px;
        color: #444;
        padding: 5px 10px;
        border: 0px;
    }
    .main-content .search-btn-2 {
       height: 40px;
        width: 35px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
        font-size: 0.88em;
        position: absolute;
        right: 12px;
        background: none;
        color: #444;
        border: 0px;
    }
    
    
    .main-content .search-btn-2 i{
        color:#444;
    }
    .service-list-wrapper{
        position:relative;
        max-width: 350px;
        width: 100%;
        margin: 20px auto;
        overflow-y: hidden;
        overflow-x: hidden;
        padding: 0px 10px;
   
        
    }
    .service-list {
        display: flex;
        margin: 0 auto;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 5px;
        max-width: 100%;
        overflow-y: hidden;
        overflow-x: auto;

    }
    .service-list-item {
        
        position: relative;
    min-width: 50px !important;
    width: 25%;
    flex: 0 1 calc(25% - 5px);
    text-align: center;
    margin-bottom: 5px;
    line-height: initial;
    background: none!important;/*#f6f8fc;*/
    font-size: 0.9em;
    border-radius: 10px;
    padding: 8px 6px;
    text-wrap: nowrap!important;
    max-height:90px;
    
  
    }
    .service-list > :first-child {
        
    }
    .service-list-item-content {
      
        width: 100%;
        height: 100%;
        display: inline-block;
        color: #555;
        overflow:hidden;
    }
    .service-list-item-content:hover {
        color: #002dfa;
    }
    .service-list-item-content i {
        font-size: 2.4em;
        background: #002dfa;
        padding: 5px;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 5px;
    }
    .service-list-item-content .title {
        position:relative;
        line-height: normal;
        margin-top: 0px;
        font-size:1.0em!important;
        text-wrap: nowrap!important;
    }
    
    .service_title{
    width: 100%!important;
    text-align: left;
    margin-left: 10px;
    margin-bottom: 15px;
}

    /*-------Mobile sidebar----*/

#mobile-menu-button {
    display: block;
    width: 40px;
        height: 39px;
    position: absolute;
    right: 0px;
    background: #fff;
    color: #444;
}

#left-sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    background: #ddd;
    z-index: 4000;
    -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
    width: 250px;
    overflow-y: auto;
}

.with--sidebar {
    transform: translateX(250px);
    -webkit-transform: translateX(250px);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.with--sidebar2 {
    display: block;
    -webkit-transform: translateX(0px)!important;
    transform: translateX(0px)!important;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

#left-sidebar .menulogo {
    padding: 10px;
    background: #262626;
    color: #fff;
    display: block;
    min-height: 100px;
    width: 100%;
    text-align: left;
}
#left-sidebar .user-icon img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
#left-sidebar .menulogo a {
    color: #fff;
}

#left-sidebar .infos,#left-sidebar .infos strong,#left-sidebar .infos a {
    font-size: 0.9em;
    line-height: normal;
  margin-bottom:10px;
  color:#fff!important;
}

.region-mobile-sidebar-top {
    text-align: center;
}

.region-mobile-sidebar-top .user-icon i {
    width: 50px;
    height: 50px;
    font-size: 4.0em!important;
    position: relative;
    top: 0px;
}

.user-icon.user-account-icon-menu {
    width: 25px;
    height: 25px;
    display: inline-block;
    position:relative;
}
.user-icon.user-account-icon-menu:hover{
    cursor:pointer!important;
}


.region-mobile-sidebar-top .login-links {
    line-height: 25px;
    position: relative;
    top: 5px;
    font-size: 1.0em;
}

.menu-vlist a {
    display: block;
    text-transform: uppercase;
    margin-top: 14px;
    font-size: 1.0em;
}

.menu-vlist a i {
    font-size: 1.4em;
    position: relative;
    top: 3px;
    margin-right: 3px;
}
.mobile-side-menu section{
   background:#fff; 
   padding-bottom:10px;
   min-height:200px;
}
.mobile-side-menu .header-menu2 a,.mobile-side-menu .header-menu a{
    display: block;

    padding: 5px 10px;
    font-size: 1.0em;
    color: #444!important;
    background-color: none!important;
    border-color: 0px!important;
}
.mobile-side-menu h2{
    padding:0px!important;
    margin:0px!important;
        font-size: 1.5em;
    font-weight: 600
}
.mobile-side-menu .section-title{
    padding: 5px 10px;
    font-weight: bold;
    margin-top: 10px;
    background:#ddd;
}

.mobile-side-menu .header-menu2 a:first-letter,.mobile-side-menu .header-menu a:first-letter{
   text-transform:uppercase; 
}

.mobile-side-menu .section.user-menu{
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 10px;
}
.site-transparence {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
}


/*-----ANNONCE PAGE CSS*/
.mobile-side-menu .category_menu_list{
    display:none!important;
}
 /*--Filter--*/
    
    .filter{
        
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 30px;
    padding: 0px 0px 10px 0px;


    }
    .filter,.filter:hover{
      
      scrollbar-width: none; 
    }
    .filter::-webkit-srollbar,.filter:hover::-webkit-srollbar{
      
      width: 0; 
    }
    .filter .filter-field{
        
        padding: 2px;
    }
.filter input, .filter select, .filter button {
   border: 1px solid #ddd;
    background: #fff;
    color: #444;
    display: inline-block;
    height: 30px;
    padding: 5px 10px;
    border-radius: 5px;
    min-width:100px;
    width: 100%;
    max-width:120px;
    margin: 5px 5px 0px 0px;
    text-transform:capitalize;
}
.filter input[name="minprice"],
.filter input[name='maxprice']{
    min-width:80px;
    max-width: 90px;
}

.filter select:first-letter, .filter button:first-letter {
    text-transform:uppercase;
}
.annonce-post-slider>a{
    width:100%;
}
.annonce-post-slider img{
  
    border-radius: 0px !important;
   
}


a.setting-menu-btn{
    width:30px;
    height:30px;
    border-radius:50%;
    border:#ddd solid 1px;
    text-align:center;
    line-height:35px;
    position:absolute;
    right:0px;
    top:0px;
}
a.setting-menu-btn:hover,a.setting-menu-btn:hover >i,a.setting-menu-btn.active,a.setting-menu-btn.active>i{
    background:#444;
    border: 1px solid #444;
    color:#fff!important;
}
a.setting-menu-btn i {
    font-size: 18px;
    color: #777;
}
.header-section-row .setting_menu{
    padding: 10px 0px;
}
.setting_menu a{
    display:block;
    width:100%;
    padding:5px 10px;
    border-bottom:1px solid #ddd!important;
    text-align:left;
}
.drop_down_menu a:hover{
    color:#002dfa;
    background:#ddd;
}
.drop_down_menu{
   min-height: 200px;
    width: 170px;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    top: 30px;
    z-index: 900;
    
}
article.ishop{
    max-width:700px!important;
}
.ishop .article-body {
    max-height: 300px;
    overflow-y: auto;
    line-height:18px;
    text-align:justify;
        padding: 0px 20px 25px 10px;
}


 .region_btn_float_right.mobile-default {
        display: block!important;
        margin-top:20px!important;
       
    }
    .mobile-default .price-title {
        display: block!important;
        padding:10px 0px;
       
    }
    
.user-info-badge{
    display:block!important;
}

.annonce-body{
    min-height:200px;
    margin-bottom:50px;
}

.field-label{
    font-weight:bold;
}
.section-wrap.height50px{
   
        min-height: 50px!important;
}

.section-wrap.mobile-default{
    padding:0px 10px;
}

.page-menu{
    display: block;
    width: 100%;
    padding: 10px 10px;
    background: #fff;
    margin-top: 5px;    
}
.page-menu ul {
    list-style: none;
    width: 100%;
}
.page-menu ul li {
    display:inline-block;
}
.page-menu ul li.ui-state-active a{
        color: #1fb141;
    /* font-weight: bold; */
    border: 1px solid #1fb141;
  

}
.page-menu a{
    display:inline-block;
    text-align:center;
  
    color: #444;
    /* font-weight: bold; */
    border: 1px solid #7e7e7e;
    padding: 5px 10px;
    border-radius: 20px;
    margin-right: 5px;
}

.field-content{
    line-height:normal;
        margin-bottom: 20px;
}

.field-content label{
  color: #555;
    font-weight: bold;
    display: inline-block;
    margin: 5px 5px 0px 0px;
}

.field-content label i{
    color:#222;
    font-size:1.3em;
    position:realative;
    top:4px;
}
.field-content .field-content-wrapper{
    margin-top:10px;
    line-height: 20px;
}
.snspage-wrapper{
    
}
.snspage-wrapper .header-section-row{
    padding:30px 10px;
    text-align:center;
    background:#fff;
}

.snspage-wrapper .grid-list-header{
   font-size:1.2em;
   font-weight:bold;
}

.snspage-wrapper .section-row{
min-height: 600px!important;
}

.snspage-wrapper .header-section-row>div{
    display:inline-block;
    text-align:center;
    width:100%;
    margin-bottom:10px;
    position:relative;
}

.snspage-wrapper .header-section-row div>div{
    display:block;
    margin:0 auto;
    text-align:center;
    background:#fff;
}
.snspage-wrapper .header-section-row div>div.profil{
    max-width:200px!important;
}

.snspage-wrapper .header-section-row .profil img{
  object-fit: cover;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin: 10px auto;
    background: #fff;
    border: 5px #ccc solid;
    padding: 5px;
}
.snspage-wrapper .header-section-row .username
{
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0px;
    text-transform:uppercase;
}
.snspage-wrapper .header-section-row .sitename
{
    color:#888;
    font-size:0.8em;
}
.snspage-wrapper .header-section-row .page-stats>div{
    display:inline-block;

    margin: 5px;
    font-size: 1em;
}
.snspage-wrapper .header-section-row .page-stats>div .sub-text{
   color:#777; 

}
.snspage-wrapper .header-section-row .user-actions-btn>div{
    
    display:inline-block;
   
    margin: 5px 0px 5px 5px;
    font-size: 0.8em;
}

.header-section-row .user-actions-btn>div {
    padding: 5px 10px;
    border: 1px solid #888;
    border-radius: 30px;
}

.header-section-row .user-actions-btn>div i {
    font-size: 1.1em;
    position: relative;
    top: 1px;
    left: -2px;
}





a.follow-btn {
    display: inline;
    margin: 5px 0px 5px 5px;
    border: 1px solid #888;
    border-radius: 30px;
    font-size: 0.8em;
    padding: 3px 10px;
}

a.follow-btn i {
    font-size: 1.1em;
    position: relative;
    top: 1px;
    left: -2px;
}



.snspage-wrapper .section-wrap {
    background: #fff!important;
    margin-top: 5px!important;
}

.snspage-wrapper .section-wrap .grid-list-title {
    background: none!important;
    padding: 0px!important;
    padding-bottom: 10px!important;
    font-size:1.3em;
}



#localiser {
        background: #666;
    padding: 5px 15px;
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    margin: 0 auto;
    
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    margin: 10px 0px;
}
#localiser i {
    /* float: left; */
  display: inline-block;
    position: relative;
    top: 2px;
    font-size: 15px;
}


/****-----ads banners--------*****/

   .main_banner_wrapper .swiper-button-next:after, .main_banner_wrapper .swiper-rtl .swiper-button-prev:after,.main_banner_wrapper .swiper-button-prev:after {
   font-size:18px;
   background:#000;
   padding:7px;

}


.main_banner1{
   
    width:100%;
    height:200px;
    padding:0px;
}
.main_banner1 img{
    width:100%!important;
    height:100%!important;
    /*border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;*/

}
.slider-menu {
 min-height: 30px;
    width: 100%;
    height: auto!important;
    display: flex;
    margin-top: 20px;
    margin-bottom: 30px;
    overflow-x: auto!important;
    padding-bottom: 10px!important;
    overflow-y: hidden!important;
    

}

.slider-menu-item{
   position: relative;
    padding: 10px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    min-width: 180px !important;
    height: 80px !important;
    padding-right: 50px;
    margin-right: 10px;
    font-weight: 400;
    color: #555;
    line-height: normal !important;
    text-shadow: 0.2px 0.1px #ddd;
    hyphens: auto;
    word-break: break-word;

}
.section_with_more_btn .slider-menu-item{
     min-width: 150px!important;
}
.slider-menu-item img{
    position:absolute;
    top:10px;
    right:10px;
    width:23px;
}

.light_blue {
    background: #4871a7;
    color: #fff;
    border: #4871a7 solid 1px;
}

.dark_blue  {
    background: #3a4585;
    color: #fff;
    border: #3a4585 solid 1px;
}
.orange_bkg{
    background: #FF9800;
    color: #fff;
    border: 1px solid #ff9800;
}
/*----Weather css------*/
.weather-wrapper{
   
    background-image: linear-gradient(to bottom, #e6f2ff 0%, #ffffff 100%)!important;
}
.weather-wrapper h2 {
        font-size: 1.4em!important;
        color: #000!important;
        font-weight: 200!important;
}
.weather-info {
    display: flex;
    padding:0px 10px!important;
}

.weather-info .material-icons{
    font-size: 4.0em!important;
    color: #666;
    position: relative;
    top: -7px;
    padding: 0px 10px;
    
}
.meteo_page_wrapper .section-wrap{
    padding: 20px 0px!important;
    background-image: linear-gradient(to top, #e6f2ff 0%, #ffffff 100%);

}
.meteo .gridlist-item-title{
    font-weight:100!important;
    
    
}
.meteo_page_wrapper h3{
        font-size: 1.3em;
    margin-bottom: 5px;
    font-weight: bold;

}
.meteo_page_wrapper .sub_title1{
    text-transform:capitalize;
    margin-bottom:10px;
}
.weather-info .temperature {
    padding-left: 10px;
}
.weather-info .date {
    font-size: 0.9em!important;
    position: absolute;
    top: 0px;
    right: 10px;
    text-transform: capitalize;
}

.weather-info .temperature_1{
    font-size:2.0em!important;
    line-height: normal;
        text-align: center;
    font-weight: bold;
    color:#555;
    
    
}
.weather-info .temperature_1 .temp_hr{
   font-size: 12px!important;
    margin-left: 10px;
    position: absolute;
    right: 10px;
    top: 25%;
}

.weather-info .temperature_2{
       font-size: 0.9em;
    padding: 0px;
    line-height: normal;
}


.h-gridlist-text-2{
    
}
.h-gridlist-text-2 .gridlist-item{
    border:1px solid #ddd;
    border-radius:5px;
    position:relative;
        background-image: linear-gradient(to top, #eaf4ff 0%, #ffffff 100%);
}
.h-gridlist-text-2 .gridlist-item-title{
    font-size: 1.2em;
    text-transform: uppercase;
    padding: 5px 10px 0px 10px;
    font-weight: bold;
}

.grid-col-content .see-more{
   font-size: 0.9em!important;
    position: absolute;
    right: 10px;
    bottom: 0px;
  
}

.weather_info{
    text-align:center;
    line-height:normal;
        margin-bottom: 30px;
}
.weather_info .weather-icon{
font-size: 50px;

}
.h-gridlist-text-2.meteo{
    margin-top:30px;
}

.weather_info .temp_{
        font-size: 50px;
}
.weather_info .city_name{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 300;
}

    
.weather_info .date{
    text-transform: capitalize;
    font-weight: 100;
    font-size: 1.4em;

}
.summary{
    line-height:18px;
}
.summary .titre{
    
    line-height: normal;
    font-weight: 300;
    margin: 10px 0px;
}
.horizontal_list{
    display:flex;
    width:100%;
    overflow:auto;
    margin: 10px 0px;
}
.horizontal_list_item{
  flex: 0 1 calc(50% - 0px);
    min-width: 150px;
    min-height: 200px;
    border: 1px solid #ddd;
    padding: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    line-height: 20px;
    font-size: 0.9em;
    border-radius: 10px;
}
.horizontal_list_item .hour{
    font-size:1.1em;
    text-align: center;
    margin: 0px 0px;
    text-transform: capitalize;
    font-weight:bold;
 
}
.horizontal_list_item .temp_{
  font-size: 1.5em;
    text-align: center;
    margin: 0px 0px;
    font-weight: bold;

}
.horizontal_list_item .w-icon{
     text-align: center;
}
.horizontal_list_item .weather-icon{
     font-size:3.3em;
         text-align: center;
}
.horizontal_list_item .min-text{
    line-height: 15px;
    font-size: 0.9em;
    text-align: center;
    margin: 10px 0px;
  
    color: #000;

}
.horizontal_list_item a.read_more{
       display: block;
    width: 120px;
    text-align: center;
    color: #000;
    padding: 2px;
    background: #f5f5f5;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 130px;
    font-size: 0.9em;
}

img.weather_icon{
    width: 80px;
    height: auto!important;
    position: relative;
   
}
.weather-info img.weather_icon{
     top: -15px;
    left: -5px;
}
.section_with_more_btn{
   border-bottom: 7px solid #ddd;
    margin-bottom: 0px!important;
    padding-bottom: 20px!important;
}
.section_with_more_btn .see-more{
  text-align: center;
    display: block;
    margin: 0 auto;
    color: #555;
    width: 250px;
    background: #ddd;
    border-radius: 30px;
    font-size: 0.9em;
    margin-top: 20px;
   
    position: relative;
   
}

/*--------- Ads styles--------*/
.ads_section{
         padding: 0px 10px;
    margin: 0px 0px 20px 0px;
    min-height: 0px!important;
    position: relative!important;
    height: auto!important;
}
.h-ads {
    background: #ddd;
    width: 90%;
    margin: 0 auto!important;
    padding-top: 20%!important; /* Adjust this value based on the desired aspect ratio */
    overflow: hidden;
    position: relative; /* Added to contain child elements */
      min-height: 1px!important;
}

/* If you have content inside .h-ads, it should be positioned absolutely */
.h-ads-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#accordion{
   
    max-width:900px;
    width:100%;
    border:1px #ddd solid;
    border-radius:5px;
        padding: 0px 20px;
    
    
}
.accordion_title{
        padding: 6px 10px 6px 10px;

    border-bottom: 1px solid #ddd;
    font-size: 1.0em;
    font-weight: 500;
    
  
    background-image:url(https://afriliks.com/public/img/icons/arrow_down.png); 
    background-repeat:no-repeat;
    background-position-x: right!important;
    background-position-y: center!important;
    background-size: 20px!important;

}
.accordion_title.ui-state-active{
     background-image:url(https://afriliks.com/public/img/icons/arrow_up.png)!important;
    
}
.accordion_content{
    padding:10px;
}
.accordion_content {
        line-height: 25px;
}
.accordion_title:hover{
    cursor:pointer;   
}

/*------ Help center / Support Center ------------*/

.support_style{
    font-size:15px;

    
}
.support_style a{
    color:#1776f2!important;
}
.support_style h1, .support_style h2,.support_style h3,.support_style h4{
    font-weight:bold!important;
    margin: 10px 0px;
}
.support_style h1, .support_style h2,.support_style h3{
    margin-bottom: 20px!important;
}
.support_style h1.subsite-title .material-icons {
    position: relative;
    top: 7px;
    font-size: 35px;
    line-height: 10px;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.support_style .title-section-wrapper{
    display: block;
    width: 100%;
    padding:10px 10px;
    background: #f5f5f5;
    border-bottom: #ddd solid 1px;
   
}
.support_style .subsite-header-row{
    height:100px;
    position:relative;
    
}

.support_style .subsite-header-row .subsite-title{
   position: absolute;
    left: 0px;
    top: 40%;
    transform: translateY(-50%);
    text-shadow: none!important;
    font-size: 1.2em;

    
}

/*----Light-box-------*/

.lb-nav a.lb-next,.lb-nav a.lb-prev{
    opacity:10!important;
}

/*----Calculator------*/

.calculator{
  width: 95%;
    max-width: 300px;
    margin: 0 auto;
    padding: 10px;
    background: #444;
    min-height: 400px;
    border-radius: 5px;
}

 .c_button {
   
    display:flex;
    flex-wrap:wrap;
    gap:0px;
    
}


input[type="button"] {
   width: 16.6%;
    padding: 12px 0px;
    background-color: #323232;
    color: white;
    font-size: 15px;
    font-weight: bold;
    flex: 0 1 calc(16.6% - 0px);
    border: 0.1px solid #9a9a9a;
}

.calculator .c_screen input[type="text"] {
       padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 0px;
    border: 1px solid black;
    text-align: left;
    width: 100%;
    background-color: #ddd;
    margin-bottom: 10px;
}

.tools_page_title{
    padding:20px 10px !important;
    text-align: center!important;
    text-transform: uppercase!important;
    font-size: 16px!important;
}




/***-------BOOKING --------****/

.booking .flex_box{
        display:flex;
        width:100%;
    }
    .booking_form{
        
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;

    }
    .booking_form h2{
        font-weight:bolder;
        
    }
    .booking_form .field_wrapper{
        
            padding: 7px;
    border-bottom: #ddd solid 1px;
  
    
    }
     .booking_form .field{
         min-height:50px;
         background-color:#fff;
         width: 100%;
         font-weight: bold;
        
    }
    
     .booking_form .field button{
       padding: 10px;
        border-radius: 20px;
        border: 1px solid #ddd;
        margin-top: 10px;
        margin-bottom: 10px;
        
    }
     .booking_form .field button:hover{
        border: 1px solid #333;
        
    }
    
   .booking .quatity .field {
        width: 33.33%!important;
    }
    .booking_form input{
        border:none!important;
        background:none!important;
        background-color:none!important;
        color:#444!important;
        
    }
    .booking_form input[type="text"]{
        font-size:16px;
    }
   .booking .input_type_2{
        padding:10px 0px!important;
    }
    .input_type_2 input[type="text"]{
        border:0.5px solid #ccc!important;
        padding: 0px 10px;
        border-radius:0px;
    }
    
    .booking_form input::placeholder {
        color:#444;
         font-size:13px;
         font-weight:normal;
    }
    
    .booking_form input[type="checkbox"] {
        display: inline !important;
        width: 15px !important;
        margin: 0 !important;
        margin-right: 5px !important;
        height: 14px !important;
        padding: 0 !important;
        line-height: 30px !important;
        border-radius: 0 !important;
        float: none !important;
        position: relative !important;
        top: 3px !important;
    }
    
    .booking_form input[type="date"] {
  
    background: #eee !important;
    padding: 5px;
    border-radius: 5px;
    
    }

     .booking_form button.submit{
        

    background: #068793;
    width: 100%;
    height: 45px;
    margin-top: 50px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: #068793 solid 2px;
    border-radius: 5px;
}
.booking .payment_methods_examples img{
    width: 70%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
    margin-top: 30px;
    margin-bottom: 10px;
}
.booking .page-title{
    font-size:1.8em;
    font-weight:bolder;
    
    border:none!important;
    margin-bottom:30px;
}
.booking .check_box_wrapper{
    display: flex;
    flex-wrap: wrap;
}
.booking .check_box_wrapper div{
   width:50%;
}
.booking-banner-bkg{
    background:url(https://r-xx.bstatic.com/xdata/images/xphoto/2880x868/324562486.jpeg?k=981efa07850cd8e3935d5290488927e5db02da5873dcc63f1bc194699d10dc08&o=);
   
    background-size: cover;
    background-position: center;
}

.flight-booking-bkg{
     background:url("https://afriliks.com/public/img/booking/airlines/airplaine-bkg.jpeg");
    background-size: cover;
    background-position: center;
}

.rental_car{
     background:url("https://afriliks.com/public/img/booking/rental_car/rental_car_bkg.jpeg");
    background-size: cover;
    background-position: center;
    
}

.booking ul{
    display: flex;
    list-style: none;
}
.booking ul.ui-tabs-nav li{
       border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin-right: 5px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 5px 15px 5px 10px;

    display: flex;
    align-items: center;
}
.booking .gridlist .gridlist-item {
    padding-top: 59%;
}
.booking ul.ui-tabs-nav .material-icons{
    margin-right:5px;
}
.booking ul li.ui-state-active{
    background:#ddd;
}

.booking .radio_wrapper{
    display:flex;
    padding:15px 0px;
}
.booking .radio_container{
    display:inline-block;
    margin-right:20px;
    display:flex;
    align-items: center;
}
.h-gridlist.style_2{
    height:150px!important;
}

.grid-col-content .signature{
    position:absolute;
    bottom:5px;
    left:10px;
}
.grid-col-content.half-content{
    display:flex;
     height: 140px!important;
   
}

.grid-col-content .signature{
    position: absolute;
    bottom: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    font-size: 0.9em;
}

.grid-col-content.half-content .icon-img{
       width: 15px;
    height: 15px;
    padding: 0;
    float: left;
    margin-right: 5px;
}

.grid-col-content.half-content .flex-item{
 
        padding: 7px 5px;
        position:relative;
}
.grid-col-content.half-content .half-right{
    text-align:right;
       width:40%;
}

.grid-col-content.half-content .half-left{
    text-align:left;
       width:60%;
}
.half-content div.text{
     margin-bottom:5px;
         line-height: 15px;
}
.half-content .text-style1{
    font-weight:bolder;
    font-size:1.2em;
    margin-bottom:10px;
    color: #038e93;

}
.half-content .text-style2{
    font-weight:bolder;
    font-size:1.4em;
    margin-bottom:5px;
}
    
    .process-step-style1{
        display: inline-block;
        margin-right: 5px;
        font-size: 0.7em;
        text-align: center;
        border: 2px solid darkblue;
        border-radius: 50%;
        width: 23px;
        height: 23px;
        line-height: 20px;
        background: #fff;
        color: darkblue;
        font-weight: normal;
    }
    
    .process-step-title-style1 {
        font-weight: 300;
        font-size: 1.5em;
        margin-bottom: 10px !important;
        padding-bottom: 0px !important;
        color: darkblue;
    }
    
 
    
ul.ui-menu{
    list-style: none;
    width:200px;
    background:#f5f5f5;
    z-index:999;
}

ul.ui-menu li{
    font-size:1.1em;
    display:block;
    width:100%;
    border:1px #ddd solid;
    padding:10px;
  
}
    
ul.ui-menu li:hover{
     background:#eee;
}


/***Flights style--------*/
.itineraire-title-wrapper{
    margin-top:10px;
    margin-bottom:40px;
}
.itineraire-step{
    display:flex;
}
.itineraire-title{
    font-weight:bolder;
    font-size:1.5em;
    margin-bottom:5px!important;
    padding-bottom:0px!important;
}
.itineraire-step .left-side{
        position: relative;
    width:65%;
     border-left:1px solid #444;
    padding-left:10px;
        margin-left: 5px;
}
.itineraire-step .origin{
    height:100px;
   
}

.itineraire-step .left-side .date_time,.left-side .airportname{
    position:relative;
    padding:0px;
    line-height:normal;
}


.itineraire-step .right-side{
        font-size: 0.8em;
    width: 35%;
    line-height: 15px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
}


.itineraire-step .right-side .company_name{
    display:flex;
    align-items:center;
        font-weight: bold;
    margin-bottom: 5px;

}

.itineraire-step .right-side .company_name img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 50%;
    
}
.itineraire-step .left-side .dot{
    display:block;
    width:15px;
    height:15px;
    border:2px solid #000;
    border-radius:50%;
    background:#fff;
}
.itineraire-step .left-side  .airportname{
    font-weight:bolder;
}
.itineraire-step .left-side .origin-dot{
    position:absolute;
    left:-7px;
    top:0px;
}

.itineraire-step .left-side .destination-dot{
    position:absolute;
    left:-7px;
    bottom:0px;
}


.line-list-wrapper .line-list-item{
  line-height: 20px;
    border-bottom: solid #eee 1px;
    padding: 10px 0px;
}
.section-line-top-style1{
    border-top: 10px solid #eee;

}
.booking-action-container{
    position:fixed;
    bottom:50px;
    width:100%;
    height:70px;
    background:#038e93;
    z-index:999999;
    padding: 10px;
    font-size: 0.8em;
    color:#fff;
}

.booking-action-container .price{
    
    font-weight: bolder;
    font-size: 1.8em;
   
}

.booking-action-container .btn-booking{
   padding: 10px;
    text-align: center;
    border-radius: 5px;
    width: 100px;
    display: block;
    background: #FF9800;
    color: #fff;
    font-weight: bold;
    font-size: 1.3em;
    position: absolute;
    right: 10px;
    bottom: 15px;
        text-transform: uppercase;
}
.booking-action-container .info{
    width:50%;
}


.payment-methods-wrapper{
   display: flex;
    max-width: 500px;
    padding: 10px;
    width: 100%;
    margin:0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
}


    

.payment-methods-wrapper .payment-method-option{
   width: calc(33.33% - 5px);
    text-align: center;
    font-weight: bolder;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 10px 20px;
    line-height:normal;
}
.paynow-btn{
   padding: 10px 20px;
    height: 50px;
    line-height: 30px;
    text-align: center;
    font-size: 1.2em;
    width: 100%;
    max-width: 490px;
    margin: 10px auto;
    background: #444;
    color: #fff;
    display: block;
    border: 0;
    border-radius: 10px;
    font-weight: bolder;
}

.payment-methods-wrapper .payment-method-option img{
    width: 50px;
    margin-bottom: 7px;
    padding: 5px;
    border: 1px solid #ddd;
    height: 50px;
    border-radius: 20%;
    margin: 10px auto;
    display: block;
    
}

.payment-methods-wrapper .payment-method-option:hover{
   
    border: 1px solid #111;
    
}


.payments-methods-tabs ul{
    width:100%;
    overflow-x:auto;
    display:flex;
    flex-wrap:nowrap;
    list-style:none;
}

.payments-methods-tabs ul.ui-tabs-nav li {
    line-height: normal !important;
        font-size: 0.8em;
        display: block !important;
        border: 1px solid #ddd !important;
        text-align: center;
        margin-right: 5px;
        border-radius: 5px !important;
        height: 50px;
        padding: 5px;
    
}


        
        
.payments-methods-tabs ul.ui-tabs-nav li a {
    line-height:normal;
   
  
}
.payments-methods-tabs ul.ui-tabs-nav li a span{
      display:none;
}

.payments-methods-tabs ul li img{
    display:block;
    width:50px;
    height:100%;
        border-radius: 10%;
}
.payments-methods-tabs ul.ui-tabs-nav li.ui-tabs-active{
        border: 1px solid #383838!important;
    background:none!important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;

}

.checkout-popup .paragraph {
    line-height: normal;
    margin-bottom: 20px;
}

.payment-form{
       max-width: 500px;
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 10px;
    padding:10px;
}
.payment-form label{
    font-size:0.9em;
    font-weight:bolder;
}
.payment-form .form-field{
    position:relative;
      width: 100%;
    max-width: 450px;
    margin: 20px auto;
}
.payment-form .form-field .currency{
        position: absolute;
        display: block;
        right: 0px;
        bottom: 0px;
        padding: 0px 10px;
        background: #444;
        color: #fff;
        height: 100%;
        width: 50px;
        font-size: 0.8em;
        text-align: center;
        text-wrap: nowrap;
        line-height: 30px;
        max-height: 30px;
}
.payment-form .form-field.checkbox{
    display: flex;
    align-items: center;
    line-height: normal;
    font-size: 0.8em;
}
.payment-form input[type="text"],input[type="email"],input[type="password"]{
      display: block;
    width: 100%;
    height: 30px;
    border: 0;
    border-bottom: #000 solid 0.5px;
    border-radius: 0px;
    padding: 10px 10px 10px 0px;
    font-size: 1.0em;

}
.payment-form input[type="text"]:focus{
    border-bottom: #038e93 solid 1px;
}
.champ-obligatoire{
    color:orange;
}

.payment-form .tab-content {
    padding: 10px;
    border: 1px solid #ddd;
    margin-top: 10px;
}
.payment-form .form-header{
 text-align:center;   
         margin-bottom: 30px;
}
.payment-form .form-header .icon-img{
    display: block;
    width: 50px;
    height: 45px;
    margin: 0 auto;
    
}

.payment-form h2 {
    font-size: 1.1em;
    color: #000;
    font-weight: 200;
    padding: 10px 0px !important;
    margin: 10px 0px;
    text-transform: uppercase;
}


.payment-form .paynow-btn {
   padding: 6px 20px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    font-size: 1.2em;
    width: 100%;
    max-width: 490px;
    margin: 10px auto;
    background: #017276;
    color: #fff;
    display: block;
    border: 0;
    border-radius: 10px;
    font-weight: bolder;
}
.payment-form .transaction-price{
    text-align:right;
            line-height: 20px;
}
.payment-form .transaction-price .small{
    font-size:0.8em;
}
.payment-form .transaction-price .price{
    font-size:1.3em;
    font-weight:bolder;
}



.eticket{
  
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 1px 0px 5px 0px #eee;

}


.detail-section {
    border-top: 1px solid #eee;
    padding-top: 10px;
}


/******- Wallet CSS***********/

.wallet_theme .quick-menu{
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    height:120px;
    overflow-x:auto;
    text-align:center;
    margin-bottom: 30px;
    font-size: 0.9em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    background:#fff;
    border-radius:10px;
}
.wallet_theme .quick-menu .menu-item{
    min-width: 80px;
        height: 100px;
        
        line-height: normal;
        display: block;
        padding: 5px;
        margin: 5px;
        font-size: 0.89em;
        overflow: hidden;
          text-align:center;
}
.wallet_theme .quick-menu .menu-item .menu-item-img-wrap{
  width: 50px;
        height: 50px;
        margin: 5px auto;
        border: 0.3px solid #eee;
        border-radius: 50%;
        background: #fff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    
    
}
.wallet_theme .quick-menu .menu-item img{
    width:25px;
    height:25px;
}
.wallet_theme .section-wrap{
             background-color: #fafbff;
}
.wallet_theme .booking-action-container{
    background-color:#02138b!important;
}
.wallet_theme .main-row{
    min-height: 600px !important;
    max-width:500px!important;
    padding: 15px !important;
}

.wallet_theme .username {
        font-size: 1.2em;
        font-weight: bolder;
        text-transform: capitalize;
        margin: 20px 0px 30px;
}
.wallet_theme .block{
    width: 100%;
    min-height: 120px;
    line-height:normal;
    
    background: #fff;
    border-radius: 10px;
    margin: 20px 0px;
  
    
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
  
}
.wallet_theme .block .hightlight{
   font-size: 1.8em;
    font-weight: 200;
    color: #FF5722;
    margin: 10px 0px;

}

.wallet_theme .text-center{
    
    text-align:center;
}
.wallet_theme .text-bold{
    font-weight:bolder;
    
}


.wallet_theme .block-fixed {
  display: block;
    width: 100%;
    min-height: 30px;
    /*border: #ddd solid 1px;*/
    background: #fff;
    border-radius: 10px;
    text-align: left !important;
    line-height: normal;
    padding: 15px;
    
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    

}
.wallet_theme .block-fixed .solde{
    
    padding: 0px 5px 10px 0px;
    margin-bottom: 10px;
    font-weight: bold;
    border-bottom: 1px #ddd dashed;

}

.block{
    
}

.wallet_theme .primary_btn{
    color: #ffffff;
    padding: 10px 10px;
    background: #72035f;
    border-radius: 5px;
}

.wallet_theme .grand_sold{
            font-size: 1.4em;
        font-weight: bolder;
        margin-bottom: 20px;
        height: 50px;
        line-height: 50px;
        text-align: center;
}

.wallet_theme .button{
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: darkblue;
    border-radius: 7px;
    color: #fff;
    margin-top: 10px;
    font-weight: normal;
    text-transform: uppercase;
    font-weight: 200;
}
.wallet_theme .block .list-item:last-child{
    border-bottom:none!important;
}
.wallet_theme .block .list-item{
    position:relative;
    height:120px;
    border-bottom:1px solid #ddd;
    
}

.wallet_theme .title-top{
    
    display: flex;
    align-items: center;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2em;
    font-weight: bolder;
    gap: 5px;

}



.wallet_theme .title-top .profile{
    background:darkblue;
    text-align:center;
    line-height:30px;
    color:#fff;
    font-size:1.2em;
    display:block;
    width:30px;
    height:30px;
    border-radius:50%;
  
    
}

.wallet_theme .title-top .profile-name {
    max-width: 150px;
    text-wrap: nowrap;
    overflow: hidden;
    font-size:1.0em;
}

.wallet_theme h2 {
          font-weight: 300;
        line-height: normal;
        font-size: 1.9em;
        padding: 0px 0px !important;
        margin: 10px 0px;
        text-align: left;
        margin-bottom: 20px;
        color: #000f81;
}

.pd-20{
    padding:20px;
}

.wallet_theme .title-top .profile{
    
  
    
}

.wallet_theme .title-top .profile img{
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.wallet_theme .fotter-left{
       display: flex;
    gap: 5px;
    align-items: center;
    position: absolute;
    bottom: 5px;
    left: 10px;
}





.wallet_theme .fotter-left .logo{
      display:block;
    width:18px;
    height:18px;
    border-radius:50%;
     
      font-size: 0.8em;
   
}

.wallet_theme .credit_balance{
    margin-bottom:40px;
}
.wallet_theme .fotter-left .logo img{
     width: 100%;
    height: 100%;
    border-radius: 100%;
     border: 2px solid #eee;
    
}
.wallet_theme .list-item .montent{
     font-size: 1.4em;
    position: absolute;
    top: 30px;
    right: 10px;
}

.wallet_theme .list-item .sold{
    font-size: 0.8em;
    color: #F44336;
    position: absolute;
    top: 50px;
    right: 10px;
}

.wallet_theme .list-item .datetime {
    font-size: 0.8em;
    position: absolute;
    right: 10px;
    top: 5px;
    color: #666;
}
.wallet_theme .list-item .transaction-type{
    font-size: 0.8em;
     position: absolute;
    top: 70px;
    right: 10px;
}

.wallet_theme .block .list-footer{
    text-align:center;
    padding:10px;
}
.wallet_theme .sub-title {
    font-weight: 200;
   
    color: #FF5722;
    font-size: 1.4em;
    margin-bottom: 5px !important;
    padding-bottom: 0px !important;
    text-shadow: 0 0 0px black;
}
.wallet_theme .paragraph{
    color:#000;
    font-weight: 200;
    line-height:normal;
    padding:5px;
}

.wallet_theme .payments-methods-tabs ul {
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
.wallet_theme .payment-form .paynow-btn{
    background:darkblue;
}


.wallet_theme .payment-form .paynow-btn.cancel{
    background:#fff;
    color:#333;
}

.wallet_theme .block-fixed .form-field{
    position:relative;
    text-align: center;
    margin: 0;
}
.wallet_theme .block-fixed .form-field .currency{
  position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.0em;
        width: 46px;
        text-align: center;
    
}
.wallet_theme .block-fixed input[type="text"] {
   position: relative;
        right: 10px;
        display: block;
        margin: 0 auto;
        height: 30px;
        width: 90%;
        max-width: 200px;
        padding: 5px 5px 5px 0px;
        border: 0;
        border-bottom: none;
        font-size: 1.5em;
        font-weight: bolder;
        text-align: center;
}

.wallet_theme .block-fixed input::placeholder{
    font-size: 1.0em!important;
    font-weight: normal!important;
}

.wallet_theme .checkout-popup{
    padding:20px 0px;
}

.wallet_theme .payments-methods-tabs{
    padding:20px;
}
.wallet_theme .payment-form{
    border:none!important;
}

.wallet_theme .tab-content{
    min-height:200px;
    padding: 0px!important;
        border: none!important;
    margin-top: 10px;
}

.wallet_theme .pending_list,.wallet_theme .cardlist{
    position:relative;
        padding:20px 10px;
        min-height:400px!important;
        border-radius:5px!important;
    }
.wallet_theme .cardlist.preview{
    min-height:100px!important;
    padding:0px 0px;
    margin-bottom: 40px;
}
    .wallet_theme .pending_list .no-results{
        position:absolute;
        top:50%;
         left:50%;
        transform:translate(-50%, -50%);
    }
     .wallet_theme  .pending_list_item{
         
           background-color: #fff7f7;
        border: #b4b4b4 1px solid;
        display: block;
        position: relative;
        width: 100%;
        height: 90px;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 10px;
        
    }
    
     .wallet_theme .pending_list_item .list-title{
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 1.0em;
            font-weight: bolder;
        
    }
     .wallet_theme .pending_list_item .amount{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
           font-size:1.8em;
           text-align:  center;
           font-weight:bolder;
        
    }
    
     .wallet_theme .pending_list_item .datetime{
         
          position:absolute;
         bottom:5px;
         left:10px;
         font-size:0.8em;
        
    }
    
    .wallet_theme .cardlist .item{
        
         
         background-color: #fff;
        border: #e2e2e2 1px solid;
        display: block;
        position: relative;
        width: 100%;
        min-height: 90px;
        padding: 10px;
        text-align: left;
        line-height:20px;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    
.wallet_theme .cardlist .item .list-title {
    color: #02138b;
    margin-bottom: 3px;
    
}

.wallet_theme .cardlist .item .amount{
    text-align: center;
        font-size: 1.3em;
        margin: 5px;
        position: absolute;
        top: 5px;
        right: 5px;
        font-weight: bold;

}


.cardlist-title{
    font-size: 1.3em;
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 5px;
    font-weight: 500;
    color: #000;
}


.date-group{
    font-weight: 300;
        margin-bottom: 10px;
        font-size: 1.2em;
        margin-top: 20px;
        /* text-align: right; */
    
}
.wallet_theme .block .title {
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: bold;
}








    .invalidFeedback{
        color:red;
    }

.wallet_theme .payment_method .unverified {
    background: #666;
    padding: 2px 5px;
    margin: 5px 0px;
    font-size: 0.8em;
    color: #fff;
    border-radius: 5px;
}

.wallet_theme .payment_method .verified {
    background: green;
    padding: 2px 5px;
    margin: 5px 0px;
    font-size: 0.8em;
    color: #fff;
    border-radius: 5px;
}

.wallet_theme .payment_method .name{
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.wallet_theme .payment_method .number{
     margin-bottom: 5px!important;
}

.wallet_theme .addmethod{
                display: flex;
        flex-wrap: nowrap;
        width: 90%;
        padding: 10px;
        border: 1px solid #eee;
        position: relative;
        justify-content: center;
        align-items: center;
        background: #fff;
        margin-top: 7px;
        border-radius: 10px;
        height: 100px;
        height: 100px;
        margin: 50px auto 70px auto;
    
}
.wallet_theme .addmethod .addmethod-btn{
     display: flex;
    width:70%;
    height:70%;
    border:1px #ddd dashed;
    justify-content:center;
    align-items:center;
    color:#666;
    
}

.pay_method_check_list{
           margin: 20px 0px;
        background: #fff;
        padding: 10px 20px;
        border-radius: 10px;
        padding-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    
}
.pay_method_check_list .form-check{
    display: flex;
        flex-wrap: nowrap;
        width: 100%;
        padding: 10px;
        border: 1px solid #eee;
        position: relative;
        line-height: normal;
        background: #fff;
        margin-top: 7px;
        border-radius: 10px;
    
}
.pay_method_check_list .form-check.disabled{
    
        color: #777!important;
    background: #f6f6f6!important;
}
.pay_method_check_list .form-check img{
        width: 40px;
        height: 30px;
        margin-right: 10px;
        border: 1px solid #eee;
        border-radius: 2px;

}

.pay_method_check_list .form-check input[type="radio"]{
    
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    
}
.pay_method_check_list .pay_methods_wrapper{
  margin-bottom: 70px;
        min-height: 100px;
        max-height: 300px;
        overflow-y: auto;
        margin-top: 10px;
}
.pay_method_check_list .payment-form input[type="text"]{
    
          padding-right: 55px!important;
            font-size:1.2em!important;
}

.pay_method_check_list .payment-form input::placeholder,.pay_method_check_list .payment-form input::placeholder {
    
     font-size:1.0em!important;
}

/*-------Subscriptions style------*/

.subscriptions .card{
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.subscriptions .card h3 {
   line-height: normal;
        color: #000;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 15px;
        font-size: 1.5em;
        font-weight: bolder;
        text-align: center;
}

.subscriptions .card .card-body {
    line-height: 25px;
   
        min-height: 250px;
}
.subscriptions .card .card-body .text{
     text-align: justify;
}

.subscriptions .card .button {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 5px 10px;
    background: gold;
    border-radius: 7px;
}

.subscriptions .card .price {
    font-size: 3.0em;
    padding: 20px;
    text-align: center;
    margin-bottom: 50px;
}

.subscriptions .card .price .mini-bold {
    display: inline-block;
    font-size: 15px!important;
}



/*-------- Feeds css -------*/

.site-content-container.feeds{
           background: #d8dee9;
           padding-top: 20px;
}
    .feed_wrapper{
           margin: 0 auto;
        width: 100%;
        max-width: 600px;
        padding:0px;
    
        min-height:600px;
    
    }
    .feed_post_list{
        width: 100%;
        margin:10px 0px;
        padding:0;
        /*min-height: 1200px;*/
    }
 .feeds #loader{
        text-align:center;
        font-weight:bolder;
    }
    
   .feed_post_list .feed_post{
   
        width: 100%;
    
        min-height: 300px;
        margin-bottom: 10px;
        border-radius: 5px;
        background:#fff!important;
        
    }
   .feed_post_list .feed_post h2 {
        font-size: 1.2em;
        line-height: 1.4em;
        padding: 10px 10px !important;
        margin: 0px 0px;
        font-weight: bolder;
    }
     .feed_post_list .feed_post .header{
   
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #eee;
    box-shadow: none !important;
         
     }
    .feed_post_list .feed_post .header .profile {
   width: 60%;
    display: flex;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    align-items: center;
   
    height: 100%;
    padding-left: 8px;
    overflow: hidden;
    
}
  .feed_post_list .feed_post .header .profile .source_title{
          justify-content: left;
        font-size: 1.0em;
        font-weight: bolder;
        padding-right: 5px;
        text-transform:capitalize;
     }
     .feed_post_list .feed_post .header .profile .published{
          justify-content: left;
        font-size: 0.8em;
        color:#666;
     }
     .feed_post_list .feed_post .header .profile .published a{
             color: #0044bf!important;
         
     }
.feed_post_list .feed_post .header .profile img {
    width: 30px;
    height: 30px;
    margin-right:5px;
}
     
     .feed_post_list .feed_post .body{
              width: 100%;
            height: 84%;
            max-height: 500px;
           
     }
     .body-overview{
         padding:10px;
         font-size: 1.0em;
         line-height:1.5em;
     }
    .feed_post_list .feed_post .body img{
         width:100%;
         height:300px;
        object-fit: cover;
        object-position: top;
     }
     
.feed_post_list .feed_post .body .ful-h-list-item-content{
  min-height:50px;
         
     }
    .feed_post_list .feed_post a.full-post{
        display:flex;
        align-items:center;
        justify-content:center;
        line-height:2.0em;
         height:300px;
         text-align:center;
        background-image: linear-gradient(-225deg, rgb(82, 113, 196) 0%, rgb(177, 159, 255) 48%, rgb(236, 161, 254) 100%);
        color:#fff;

     }
     .feed_post_list .feed_post a.full-post .hightlight_color{
         color:gold;
     }
     
     .feed_post_list .feed_post a.full-post h2{
         width:75%;
     }
     
     
     .feed_post_list .feed_post .footer{
          
            height: 50px;
          border-top:1px solid #eee;
           width:100%;
               display: flex;
           align-items: center;
           justify-content: center;
     }
     .feed_post_list .feed_post .footer .items{
         width:33.33%;
         display:flex;
            align-items: center;
             justify-content: center;
     }
      .feed_post_list .feed_post .footer .items i {
         font-size: 18px!important;
        padding: 5px!important;
        color:#555!important;
     }
     
.feed_post .footer .save {
       
        display: flex;
        align-items: center;
    }
.feed_post .footer .save-btn{
        display: flex;
    align-items: center;
}
.feed_post .footer .save-btn.saved i, .saved i {
    
    color: #ff5874!important;
}
     
.feeds .images-gallery{
         position:relative;
         height:300px;
         overflow: hidden;
         display: flex;
          flex-wrap: nowrap;
          gap:5px
  
     }
     
     
.feeds .images-gallery .image-item{
          max-width: 100%!important;
              min-width: 50%;
         height: 100%!important;
    
     }
     
.feeds .images-gallery .image-item img {
         width: 100%!important;
         height: 100%!important;
 

}

.feeds .image_container  .price{
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 10px 10px;
    min-width: 70px;
    text-align: center;
    font-weight: 200;
    background: #195a39;
    font-size: 1.3em;
    color: #fff;
    border-bottom-right-radius: 5px;

}
.feeds .videocontainer {
    width: 100%;
    height: 0px;
    padding-bottom: 56.25%;
  
    overflow: hidden;
    position: relative;
}

.feeds .videocontainer iframe, .live-off-info {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}

.ytp-large-play-button-red-bg path.ytp-large-play-button-bg {
    fill: #f000!important;
    fill-opacity: 1!important;
}

.feed_post_list .feed_post .body.videos .body-overview {
    display:none;
}
.feed_post_list .feed_post .body .image_container{
 position:relative;
}

/*----- ------*/
.feeds .reals-wrapper{
    width: 100%;
    margin: 5px 0px;
     border-radius: 5px;
     padding: 10px;
      background: #fff;
}
.feeds .reals-title{
 padding: 0px 0px 10px 5px;
    font-weight: 600;
    font-size: 1.3em;

}
.feeds .reals{
    
    width: 100%;
    height: 250px;
    background: #f5f5f5;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 5px 5px;
    border-radius: 5px;
    
  
}

.feeds .reals_item{
     display: block;
    height: 100%;
    min-width: 150px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-right: 10px;
    overflow: hidden;
}
.feeds .reals_item img{
    width: 100%;
        object-fit: cover;
        height: 100%;
        object-position: top;
        position: relative;
    
}





/*----Afriliks Fnance-----*/

.finance .grid-list-title, .finance .row-title {
    
        font-size: 1.5em;
   
        color: #015715;
    
}
.finance h2{
    font-weight:bolder;
    color: #015715;
}
.finance h3{
      font-weight:bolder;
      margin: 10px 0px;
        line-height: 1.6em;
}
.finance p{
            line-height: 1.6em;
            text-align: justify;
}
.exchange_rates_list{
        display: flex;
        flex-wrap:wrap;
        padding: 20px 0px;
        margin-top: 10px;
        gap: 5px;
        overflow-x: auto;
    
}
.hidden{
    display:none;
}

.exchange_rate{
       flex: 1; /* Take equal space */
            max-width: calc(50% - 2.5px); /* Adjust for the gap */
         
            box-sizing: border-box; /* Include padding in width */
            
        position:relative;
        display: block;
        width: 20%;
        height: 80px;
        border: #ddd solid 1px;
        border-radius: 5px;
        padding: 5px 5px;
        min-width: 180px;
        line-height: normal;
    
}

.finance .infos h3 {
    font-weight: bolder;
    border-top: 1px solid #ddd;
    margin-top: 50px;
    padding-top: 10px;
}

.trend_dir img{
    width: 12px;
    position: absolute;
    top: 5px;
    right: 5px;
}
 img.trend_dir{
    width: 10px;
}

.currency_symbols{
    font-weight:bolder;
    display: flex;
    align-items: center;
}

.currency_symbols .flag{
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-right:5px;
}

.currency_symbols .flag img {
        position: relative;
        object-fit: fill;
        object-position: top;
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }

.c_rate_info {
    /* text-align: center; */
    margin-left: 25px;
            margin-top: 5px;
                    line-height: 18px;
}

.green{
    color:green;
}
.red{
    color:red;
}

.page-title-wrapper-wide.finance{
            background-color: #444!important;
            color:#fff!important;
            text-align:center;
}

.converter_section {
    min-height: 500px;
    position: relative;
    top: -60px;
    background:none!important;
}
.converter_form{
    width:100%;
    max-width:500px;
    border-radius: 8px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(35, 55, 80, 0.3) 0px 6px 12px;
    margin-top: 20px;
    padding:10px;
    min-height:600px;
    margin: 0 auto;
}
.converter_form form{
      padding:13px;
}


.converter_form form .main_field_wrapper{
    margin-bottom: 10px;
}

.converter_form form .field_wrapper {
    display:flex;
    flex-wrap:nowrap;
    border: #ddd solid 1px;
    padding: 10px;
    border-radius: 5px;
    align-items: center;
    font-size: 1.1em;
}

.converter_form form label {
    font-weight: bolder;
    font-size: 1.1em;
    margin-bottom: 10px;
}


.converter_form form .field {
    height:35px;
    width:100%;
    border:none;
    font-size: 1.0em;
    color:#444!important;
}
.converter_form form .field.monay_value{
    font-size: 1.1em;
    font-weight:bolder;
    
}
.converter_form .convertion_results{
    display:none;
}
.converter_form .convertion_results h3{
    font-size:1.3;
    font-weight:bolder;
}
.converter_form form .convert-button {
    text-align:center;
    font-size: 1.3em;
    font-weight:bolder;
    border-radius: 5px;
    border: none;
    display: block;
    padding: 10px;
    width: 100%;
    background: #015715;
    color: #fff;
}

.converter_form .converted_value {
    font-size: 1.8em;
    font-weight: bolder;
}
.converter_section .text-info {
    max-width: 500px;
    margin: 0 auto;
    text-align: justify;
    /* background: #f6f9ff; */
    padding: 10px 10px;
    margin-top: 30px;
    border-radius: 10px;
    line-height: normal;
    font-size:0.8em;
 
 
}
.converter_section .text-info li{
    list-style-type: circle;
            margin-top: 10px;

}
.converter_section .text-info label{
    font-weight:bolder;
}
.convertion_results{
    margin-top:20px;
            margin-bottom: 30px;
        text-align: center;
    
}
.monay_currency img{
    width:20px;
    height:20px;
    border-radius:50%;
    
    
}
.monay_currency{
    display:flex;
    margin-right: 5px;
}

.finance .readmore {
    text-align: center;
    padding: 10px;
    margin-top: 50px;
    font-weight: bolder;
}










}

@media screen and (max-width: 400px) {
    
    .gridlist .gridlist-item{
        padding-top: 79%;
    }
    
    .app_list_item {
    background-size: 20px !important;
    width: 35px;
    max-width: 45px;
    height: 35px;
 
}
.service-list-wrapper {
   
    max-width: 350px;
}


.service-list-item {
    padding:7px 0px;
}





    
    
    
    
    
    
}