#search-list-group
{
    position: absolute;
    z-index: 40;
    left: 0px;
    top: 200px;
    max-height: 200px;
    overflow-y: scroll;
    display: none;


}
#search-list-group .list-group-item
{
    padding-left: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    z-index: 40;
}

#search-list-group .tt-product
{
    white-space: nowrap;
    width: 55%;
    overflow: hidden;
    text-overflow:ellipsis;
    color: #000;
    display: inline-block;
    padding: 0px;
    margin: 0;
    font-size: 13px;
}

#search-list-group .tt-categorie
{
    white-space: nowrap;
    width: 40%;
    overflow: hidden;
    color: #1d75b3;
    text-overflow:ellipsis;
    display: inline-block;
    padding: 0px;
    margin: 0;
    font-size: 13px;
}

#search-list-group .tt-nb
{
    white-space: nowrap;
    width: 18%;
    overflow: hidden;
    color: #000;
    text-overflow:ellipsis;
    display: inline-block;
    padding: 0px;
    margin: 0;
    font-size: 12px;

}

#navbar .container
{
    padding: 0px;

}
#navbar .header-top {
     height: 32px;
     margin: 0 auto;
     border-top: none;
     margin-top: 0px;
     margin-bottom: 0px;
     padding: 0px;
     background-color: var(--red-diardzair);
 }

#navbar .logo
{
    font-size: 24px;
    color: var(--red-diardzair);
    font-weight: 600;
    padding-top: 15px;



}
#navbar .logo-mob
{
  display: none;

}

#navbar .logo img
{




}

.header-top .mobile {
     display: none;
 }
 
 #navbar .header-middle .cart-mobile {
     display: none;
 }
 
 #navbar .header-top .desktop button {
     border: none;
     background-color: #f8f8f8;
     border-inline-start: 0.2px solid lightgrey;
     border-inline-end: 0.2px solid lightgrey;
     border-radius: 0px;
     background-color: var(--red-diardzair);
     color: white;
 }

#navbarheader-topdesktopa
{
    border: none;
    background-color: #f8f8f8;
    border-inline-start: 0.2px solid lightgrey;
    border-inline-end: 0.2px solid lightgrey;
    border-radius: 0px;
}
 
 #navbar .header-top .btn-group {
     display: inline;
     float: right;
     color: white;
 }
 
 #navbar .header-middle {
     height: 120px;
     margin: 0 auto;
     border-top: none;
     margin-top: 0px;
     margin-bottom: 5px;
     padding: 0px;
 }
#navbar .header-middle .header-middle-1 {
    background-color: var(--red-diardzair);
    height: 120px;
    margin-top: 0px;
    width: 30%;
    float: left;
    text-align: center;
    box-shadow: rgba(0,0,0,0.4)  2px 2px;

}
#navbar .header-middle .header-middle-2 {
    background-color: var(--red-diardzair);
    height: 70px;
    margin-top: 0px;
    width: 70%;
    float: left;

    color: white;
    box-shadow: rgba(0,0,0,0.4)  2px 2px;

}
#navbar .header-middle .header-middle-21 {
    background-color:var(--red-diardzair);
   display: inline;
    margin-top: 0px;
    float: left;
    text-align: center;
    color: white;
    width: 60%;


}

#navbar .header-middle .header-middle-22-btn
{
    background-color:var(--red-diardzair);
}
#navbar .header-middle .header-middle-22-btn .btn
{
    margin-top: 5px;
    background-color: var(--red-diardzair);
    border: none;
    color: white;
    padding-bottom: 0px;

}
#navbar .header-middle .header-middle-22{
    background-color: var(--red-diardzair);
    margin-top: 0px;
    padding: 0px;
    margin: 0px;
    float: left;
    display: inline;
    text-align: center;
    color: white;
    width: 40%;



}

#navbar .header-middle .header-middle-3 {
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid var(--red-diardzair);
    float: left;

}
#navbar .header-middle .btn-header-middle {
     background-color:var(--red-diardzair);
    width: 150px;
    margin-top: 10px;
    border-radius:360px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
#navbar .header-middle .btn-header-middle-taksit {
    background-color: #005343;
    background-color: #005343;
    width: 150px;
    margin-top: 10px;
    border-radius:360px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}


#navbar .header-top .header-top-1 {
    background-color:var(--red-diardzair);
    height: 30px;
    margin-top: 0px;
    width: 100%;
    float: left;
    text-align: center;
    color: white;
}
#navbar .header-top .btn-header-top {
    background-color: var(--red-diardzair);

    border-color:var(--red-diardzair);
    font-size: 12px;
    font-weight: 600;

}

#navbar .header-middle .logo {
     margin: auto;
 }
 
 #navbar .header-middle .login {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 70px;
     float: right;
 }
 
 #navbar .header-middle .dropdown-menu {
     width: 200px;
     margin: 0px;
     margin-left: 10px;
     margin-top: 0px;
     z-index: 999;

 }
 
 #navbar .header-middle .dropdown-menu .btn {
     width: 80%;
     margin-top: 5px;
     margin-left: 15px;
     margin-right: 15px;
     padding-bottom: 10px;
     padding-top: 6px;
     height: 31px;
     color: white;
     border-bottom-right-radius: 0%;
     background-color: var(--red-diardzair);
 }
 
 #navbar .header-middle .dropdown-menu .btn:hover {
     color: white;
     background: #c9181f;
 }
 
 #navbar .header-middle .dropdown-menu .compte-menu .newcmpt span {
     margin-top: 10px;
     font-size: 11px;
     color: black;
     margin-left: 5px;
     line-height: 1.42857;
     color: #555;
 }
 
 .header-middle .dropdown-menu .compte-menu .newcmpt a {
     font-size: 10px;
     color: black;
     line-height: 1.42857;
     color: dodgerblue;
 }
 
 #navbar .header-middle .dropdown-menu .compte-menu .newcmpt {
     margin-top: 5px;
 }
 
 #navbar .header-middle .login button {
     height: 47px;
     float: right;
     border: none;
 }
 
 #navbar .header-middle .show-on-hover:hover>ul.dropdown-menu {
     display: block;
 }
 
 #navbar .header-middle .login .tt1 {
     line-height: 0.8;
 }
 
 #navbar .header-middle .login button p {
     font: 10px sans-serif;
     line-height: 0.5;
 }
 
 #navbar .header-middle .pub {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 60px;
     float: left;
     padding:0px;
     margin: 5px;

 }




#navbar #search-btn-2 {
    background-color: var(--red-diardzair);
    color: white;
    height: 46px;
    border-radius: 0px;
    position: absolute;
    left: 630px;
}
#navbar #search-btn-2:hover {
    background-color: #c9181f;
    color: white;
    height: 46px;
    border-radius: 0px;
    position: absolute;
    left: 630px;
}



#navbar .header-middle .pub .subpub {
     height: 47px;
     width: 155px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     padding: 5px;
     border: 1.5px solid var(--red-diardzair);
     background-color:  var(--red-diardzair);
     border-radius: 4px;

 }

#navbar .header-middle .pub .subpub2 {
    height: 47px;
    width: 155px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5px;
    border: 1.5px solid  #005343;
    background-image: url('/uploads/img/icon/Botton-DiarDzair-01.jpg');
    border-radius: 4px;

}
 #navbar .header-middle .pub a {
     text-decoration-line: none;
     color: black;
     cursor: pointer;

 }
 
 #navbar .header-middle .pub a :hover {
     text-decoration-line: none;
    background-color: #b51616;
 }
 
 #navbar .header-middle .pub .subpub .iconn {
     font-size: 9px;
     width: 25px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-right: 2px;
     color: white;
 }
 
 #navbar .header-middle .pub .subpub .tt {
     font-size: 16px;
     font-weight: normal;
     color: white;
     display: flex;
     flex-direction: column;
     justify-content: center;


     margin-right: 5px;

 }





 
 #navbar .header-bottom {
     height: 60px;
     width: 100%;
     margin-right: 0px;
     margin-left: 0px;
     background-color: #f5f5f5;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     flex-direction: row;
     border: 0.1px solid lightgray;
 }
 
 #navbar .header-bottom .search {
     border-top: none;
     margin-top: 0px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     padding: 8px;
     width: 600px;
 }
 
 #navbar .header-bottom .search input {
     height: 46px;
     width: 1100px;
     margin: 0px;
     padding: 2px;
     border-radius: 0px;
 }
 
 #navbar #search-btn {
     background-color:var(--red-diardzair);
     color: white;
     height: 46px;
     border-radius: 0px;

 }
 
 #dropdown-menu-aide {
     margin-left: 120px;
 }
 
 #navbar #search-btn:hover {
     background-color: #c9181f;
     color: white;
     height: 46px;
     border-radius: 0px;
 }
 /* Extra small devices (phones, 600px and down) */
 
 #navbar .header-bottom .cart {
     margin: 0px;
     padding-top: 7px;
     padding-bottom: 7px;
     display: flex;
     flex-direction: row;
     justify-content: center;
 }
 
 #navbar #cart13 {
     display: none;
 }
 
 #navbar .header-bottom .link-cart {
     margin: 0px;
 }
 
 #navbar .header-bottom .cart .cart1 {
     padding-left: 5px;
     margin-top: 7px;
     margin-bottom: 7px;
     margin-right: 15px;
 }
 
 #navbar .header-bottom .cart .cart1 .cart12 {
     font-size: 11px;
     color:var(--red-diardzair);
 }
 
 #navbar .header-bottom .cart .cart1 .cart12 .badge {
     font-size: 12px;
     background-color: var(--red-diardzair);
 }
 
 #navbar .header-bottom .cart .img {
     margin-top: 7px;
     margin-bottom: 7px;
 }
 
 #navbar .header-bottom .catego {
     margin-left: 10px;
     margin-top: 7px;
     margin-bottom: 7px;
     color: white;
 }
 
 #navbar .header-bottom .catego .dropdown-toggle:hover {
     background-color: white;
     border: 1px solid black;
     border-radius: 0px;
     background: var(--red-diardzair);
     color: white;
 }
 
 #navbar .header-bottom .catego .dropdown-toggle:focus {
     background-color: white;
     border: 0.1px solid lightgray;
     border-radius: 0px;
     background:var(--red-diardzair);
     color: white;
 }
 
 #navbar .header-bottom .catego .dropdown-toggle {
     background-color: white;
     border: 0.1px solid lightgray;
     border-radius: 0px;
     background: var(--red-diardzair);
     color: white;
     font-size: 14px;
     text-transform: uppercase;
 }
 
 #navbar .header-bottom .catego button {
     height: 46px;
     width: 260px;
 }
 
 #navbar .link-cart {
     text-decoration: none;
     margin: 5px;
     color: black;
 }
 
 #navbar .link-cart:hover {
     text-decoration: none;
     color: var(--red-diardzair);
 }
 
 #navbar .header-bottom .catego .dropdown-menu {
     width: 260px;
     border: 0.1px solid lightgray;
     border-radius: 0px;
     border-radius: 4px;
     margin-top: 20px;
     height: 350px;

 }
 
 #navbar .header-bottom .catego ul.dropdown-menu {
     border-radius: 0px;
     box-shadow: none;
     margin-top: 0px;
     width: 260px;
     height: 350px;
     -webkit-box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
     -moz-box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
     box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
 }
 
 #navbar .header-bottom .catego .glyphicon-chevron-right {
     float: left;
 }
 
 #navbar #dropdown-menu-li {
     display: block;
     margin: 0px;
     height: 34px;
     z-index: 100;
 }
 
 #navbar #dropdown-menu-li a:hover {
     color: var(--red-diardzair);
 }
 
 #navbar .dropdown-sub-menu {
     margin-left: 258px;
     top: 0px;
     height: 400px;
     border: 1px solid lightgray;
     width: 1000px;
     z-index: 99;
     display: none;
     position: absolute;
     background-color: white;
     -webkit-box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
     -moz-box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
     box-shadow: 10px 10px 5px -9px rgba(0,0,0,0.75);
 }
 
 #navbar .dropdown-sub-menu li {
     height: 20px;
     display: inline-block;
 }
 
 #navbar .dropdown-sub-menu>li>ul {
     padding: 0;
     margin: 0;
     width: 180px;
 }

#navbar .dropdown-sub-menu>li>ul>li {
     height: 10px;
 }
 

 
 #navbar .dropdown-sub-menu li>ul>li>a {
     display: block;
     color: #222;
     font-size: 12px;
     padding: 3px 5px;

 }
 
 #navbar .dropdown-sub-menu li>ul>li {
     border: 1px solid;
     list-style: none;
 }
 
 #navbar #dropdown-sub-menu-header {
     height: 30px;
     width: 180px;



 }
#navbar #dropdown-sub-menu-sub{

    width: 180px;

}


 
 #navbar #dropdown-sub-menu-header a {
     font-size: 15px;
     color: black;
     font-weight: 700;
     padding: 5px 5px 5px 5px;
     line-height: normal;
     border-bottom: 1px solid lightgray;



 }
 
 #navbar .mobile .modal .modal-title {
     color: white;
     float: left;
     padding-bottom: 5px;
 }
 
 #navbar .mobile .modal .modal-header {
     color: white;
     background-color: #ea3a3c;
     margin: 0px;
     height: 50px;
 }
 
 #navbar #accordion-sub-menu-header a {
     font-size: 14px;
     color: black;
     height: 35px;
     text-decoration: none;
     padding: 0px;
 }
 
 #navbar #accordion-sub-menu-header :hover a {
     color: #ea3a3c;
 }
 
 #navbar #accordion-sub-menu-header {
     font-size: 15px;
     color: black;
     height: 35px;
     margin: 0px;
     display: inline-block;
     margin-top: 10px;

 }
 
 #navbar .accordion {
     width: 100%;
     margin: 15px auto 20px;
     background: #FFF;
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
     border-radius: 0px;
     padding: 0px;
 }
 
 #navbar .accordion .link {
     cursor: pointer;
     display: block;
     padding: 15px 15px 15px 42px;
     color: black;
     font-size: 15px;
     font-weight: 700;
     border-bottom: 1px solid #CCC;
     position: relative;
     -webkit-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     transition: all 0.4s ease;
 }
 
 #navbar .accordion li:last-child .link {
     border-bottom: 0;
 }
 
 #navbar .accordion li i {
     position: absolute;
     top: 16px;
     left: 12px;
     font-size: 18px;
     color: black;
 }
 
 #navbar .accordion li i.fa-chevron-down {
     right: 12px;
     left: auto;
     font-size: 16px;
 }
 
 #navbar .accordion li.open .link {
     color: var(--red-diardzair);
 }
 
 #navbar .accordion li.open i {
     color: var(--red-diardzair);
 }
 
 #navbar .accordion li.open i.fa-chevron-down {
     -webkit-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);
 }
 
 #navbar .accordion ul {
     list-style-type: none;
     margin: 0px;
 }
 
 #navbar #accordion-sub-menu {
     height: 25px;
 }
 
 #navbar #accordion-sub-menu a {
     padding: 0px;
     font-size: 12px;
 }
 



#navbar .sidebarNavigation .submenu {
     display: none;
     background: white;
     font-size: 14px;
     color: black;
     border: none;
 }
 
 #navbar .sidebarNavigation .subli {
     background: white;
     font-size: 12px;
     color: black;
 }
 
 #navbar .sidebarNavigation .submenu a {
     display: block;
     color: black;
     padding: 5px;
     padding-left: 3px;

 }


 #navbar .sidebarNavigation .subli a {
     display: block;
     color: black;
     padding: 8px;
     padding-left: 38px;
     text-decoration: var(--red-diardzair);
 }

#navbar  .sidebarNavigation , #myNavbar,#myNavbar2

{
    display: none;

}



#navbar  div.header-middle-mob {
    overflow: auto;
    white-space: nowrap;
    width: 100%;
     text-align: center;



}

#navbar  div.header-middle-mob::-webkit-scrollbar {
    width: 0 !important;

}

#navbar  .header-middle-mob .btn-dar-mob
{
    background-color: var(--red-diardzair);
    color: white;

    font-size: 13px;
    font-weight: 700;
    width: 100%;

    border-radius: 35px;
}
#navbar  .header-middle-mob .btn-dar-mob:hover
{
    background-color: #c9181f;
    color: white;
}

#navbar  .header-middle-mob .btn-dar-taksit-mob
{
    background-color:var(--red-diardzair);
    color: white;
    background-image: url('/uploads/img/icon/Botton-DiarDzair-01.jpg');
    background-size: cover;
    width: 100%;
    height: 34px;
    border-radius: 35px;
}


#navbar  .header-middle-mob

{
    display: none;
}

#navbar  .dar-pub
{
    margin-left:  50px;


}


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


    #navbar  .header-middle-mob

    {
        display: block;

    }


     #search-list-group
     {
         position: absolute;
         z-index: 40;
         left: 0px;
         top: 200px;
         max-height: 200px;
         overflow-y: scroll;
         display: none;


     }
     #search-list-group .list-group-item
     {
         padding-left: 5px;
         padding-bottom: 2px;
         padding-top: 8px;
         z-index: 40;
         height: 30px;
         font-size: 10px;
         padding-top: 0px;
         line-height: 18px;
     }


     #navbar #categodropdownopen {
         display: none;
     }
     #navbar .header-middle .pub {
         display: none;
     }
     #navbar .header-top .spallo {
         display: none;
     }
     #navbar .header-middle .login {
         display: none;
     }
     #navbar .header-top {
         height: 45px;
         margin: 0 ;
         border-top: none;
         margin-top: 0px;
         margin-bottom: 0px;
         padding: 0px;
         background-color: var(--red-diardzair);
         display: flex;
         flex-direction: row;
         justify-content: center;
         display: none;

     }
     #navbar .header-top .mobile {
         display: none;
     }
     #navbar .header-top .desktop {
         display: none;
     }


     #navbar .header-top .mobile button {
         border-inline-start: 0.2px solid white;
         border-inline-end: 0.2px solid white;
         border: none;
         background-color: var(--red-diardzair);
         color: white;
         border-radius: 0px;
         float: right;

     }

     #navbarheader-topmobilea {
         text-decoration: none;
         border-inline-start: 0.2px solid white;
         border-inline-end: 0.2px solid white;
         border: none;
         background-color:var(--red-diardzair);
         color: white;
         border-radius: 0px;
         float: right;
         border: none;


     }


     #navbar .header-top .mobile .catego {
         float: left;
     }
     #navbar .cart {
         margin: 0px;
         padding-top: 7px;
         padding-bottom: 7px;
         border-top: none;
         display: flex;
         flex-direction: row;
         justify-content: center;
     }
     #navbar .cart .cart1 .cart11 {
         display: none;
     }
     #navbar .cart .cart1 .cart12 {
         display: none;
     }
     #navbar .cart .img .bottom-left {
         position: relative;
         bottom: 40px;
         left: 40px;
         font-size: 14px;
     }
     #navbar .header-top .mobile .catego {
         color: white;
         padding: 0px;
         margin-top: 4px;
         margin-right: 25px;
         float: left;
         padding-left: 0;
     }
     #navbar .header-top .mobile .catego .dropdown-menu {
         width: 300px;
         margin-top: 20px;
         margin-left: -30px;
     }
     #navbar .header-bottom .search input {
         height: 40px;
         margin: 0px;
         padding: 2px;
         width: 100%;
         border-radius: 0px;
         border: 0.1px solid lightgray;
     }
     #navbar .header-bottom .search button {
         width: 50px;
         height: 40px;
         border-radius: 0px;
         border: 0.1px solid lightgray;
     }
     #navbar .header-bottom {

         height: 54px;
         width: 100%;
         background-color: #f5f5f5;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         flex-direction: row;
         border: 0.1px solid lightgray;

     }
     #navbar #cart13 {
         display: block;
     }
     #navbar #cart13 .badge {
         font-size: 12px;
         background-color: var(--red-diardzair);
         margin-left: -10px;
     }
     #navbar .header-middle .cart-mobile {
         display: block;
         float: right;
         margin-top: 10px;
         margin-right: 20px;
     }



     #navbar .header-middle .link-cart {
         margin: 0px;
     }
     #navbar .header-bottom .link-cart {
         display: none;
     }
     #navbar #search-btn {
         background-color: var(--red-diardzair);
         color: white;
         height: 40px;
         border-radius: 0px;
     }
     #navbar #search-btn:hover {
         background-color: #c9181f;
         color: white;
         height: 40px;
         border-radius: 0px;
     }
     #navbar .logo
     {
       display: none;


     }
     #navbar .logo-mob
     {
         margin-top: 15px;
         display:inline-block;


     }
     #navbar .header-top .container-fluid{
        padding: 0px;
         margin: 0px;
         height-max: 20px;
     }
     #navbar .header-middle {
         height: 50px;
         margin: 0 auto;
         border-top: none;
         margin-top: 0px;
         margin-bottom: 0px;
         padding: 0px;
     }


     #navbar  .container-fluid-header-middle
     {
         height: 54px;
         padding: 0px;

     }
     #navbar  .form-horizontal  , .container-header-bottom
     {         width: 100%;

         display: flex;
         height: 54px;
         margin: 0px;
         padding: 0px;
         flex-wrap: nowrap;
     }

     #navbar  .container-header-bottom
     {

         width: 100%;
           display: flex;
         padding: 0px;
         line-height: 5px;
      flex-wrap: nowrap;

     }



     #navbar .header-bottom {

         height: 54px;
         width: 100%;
         background-color: #f5f5f5;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         flex-direction: row;
         border: 0.1px solid lightgray;
         z-index: 50;
         flex-wrap: nowrap;


     }


     #navbar  {


         display: flex;
         flex-direction: column;
         flex-wrap: nowrap;


     }


     div.scrollmenu {
         background-color: #333;
         overflow: auto;
         white-space: nowrap;
     }

     div.scrollmenu a {
         display: inline-block;
         color: white;
         text-align: center;
         padding: 14px;
         text-decoration: none;
     }

     div.scrollmenu a:hover {
         background-color: #777;
     }




 }
@media only screen and (max-width: 960px) {
    #ddmobile,.header-middle {
        display: none;


    }

    #navbar   .overlay,
    #navbar  .sideMenu {
        position: fixed;
        bottom: 0
    }

    #navbar    .overlay {
        top: 0;

        width: 100%;
        background-color: rgba(0, 0, 0, .4);
        z-index: 9998;
        transition: all ease 20ms;
        position: fixed;
        bottom: 0;
        display: none;;
    }






    #navbar    .sidebarNavigation .left-navbar-toggle {
        float: left;
        margin-right: 0;
        margin-left: 15px
    }

    #navbar   .sideMenu {
        left: -100%;
        top: 52px;
        transition: all ease-in-out .4s;
        overflow: hidden;
        width: 100%;
        max-width: 70%;


    }

    #navbar  .sideMenu.open {
        left: 0;
        display: block;
        overflow-y: auto
    }

    #navbar   .sideMenu ul {
        margin: 0
    }

    #navbar    .navbar-header {
        background-color: var(--red-diardzair);
        margin: 0px;
        border: none;
        height: 50px;

    }

    #navbar    .navbar-toggle  {
        color: black;
        background-color: white;
        box-sizing :border-box;
        position: relative;
        display: block;
        padding: 8px;
        margin: 9px;

    }


    #navbar   .navbar-toggle2 {
        color: black;
        background-color: white;
        float: right;
        box-sizing :border-box;
        position: relative;
        display: block;
        padding: 8px;
        margin: 9px;
    }

    #navbar   .iconbutt {
        width: 44px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: none;
        margin-left: 0px;
        margin-right: 0px;
    }

    #navbar   .iconbutt:hover {
        width: 44px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: 1px solid black;
    }

    #navbar   .iconbutt:focus {
        width: 44px;
        height: 40px;
        text-align: center;
        color: white;

        font-size: 20px;
        border: 1px solid #af0e14;
        text-decoration: none;
    }

    #navbar   .iconbutt2:focus {
        width: 60px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: 1px solid #af0e14;
        text-decoration: none;
    }

    #navbar   .iconbutt2:hover {
        width: 60px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: 1px solid black;
    }



    #navbar   .iconbutt2 {
        width: 60px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: none;
    }





    #afasfa-user:hover {
        width: 44px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: 1px solid #af0e14;
        text-decoration: none;
        cursor: pointer;
    }

    #afasfa-question:hover {
        width: 44px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: 1px solid #af0e14;
        text-decoration: none;
        cursor: pointer;
    }

    #afasfa-align-justify:hover {
        width: 44px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: var(--red-diardzair);
        font-size: 20px;
        border: 1px solid #af0e14;
        text-decoration: none;
        cursor: pointer;
    }

    .sidebarNavigation {
        height: 50px;
    }



    #navbar  .t0 {
        font-size: 17px;
        color: black;
        font-weight: 700;
        border-bottom: 1px solid #CCC;
        text-transform: capitalize;
    }

    #navbar  .t1 {
        font-size: 14px;
        color: black;
        font-weight: 700;
        border-bottom: 1px solid #CCC;
        text-transform: capitalize;
    }

    #navbar .t2 {
    line-height: 26px;
    color: #666666;
    margin: 5px;
    font-size: 15px;
    padding: 7px 0px;
    background-color: transparent;
    border-bottom: 1px solid #CCC;
    }


    #myNavbar .fa-angle-right  ,#myNavbar .fa-angle-down,#myNavbar2 .fa-angle-down
    {
        float: right;
    }


    #navbar  .sidebarNavigation  .container-fluid
    {
        margin: 0px;
        padding: 0px;


    }

    #navbar   .navbar-default
    {
        background-color: white;
    }




    #navbar  .sidebarNavigation

    {
        display: block;
      border: none;
        -webkit-box-shadow: 0 4px 6px -6px #222;
        -moz-box-shadow: 0 4px 6px -6px #222;
        box-shadow: 0 4px 6px -6px #222;


    }


    #myNavbar2 .t5

    {
        font-size: 12px;
        font-weight: 600;
        display: inline-block;
        float: left;
        color: black;
        line-height: 14px;

        padding: 5px;
        margin-bottom: 10px;

    }


    #NavUsermodel  .modal-header
    {
        background-color: var(--red-diardzair);
        color: white;
        height: 40px;
        padding: 10px;
    }


    #NavUsermodel  a
    {
        font-size: 12px;
    }

    #NavUsermodel  .profile
    {
        font-size: 16px;
        text-decoration: none;

    }
    #myNavbar  a:hover
    {
        color: var(--red-diardzair);
    }

    #navbar .header-middle-mob .btn-header-middle {
        background-color: var(--red-diardzair);
        width: 100px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius:360px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }


    .table123 ul{
        width: 100%;
        list-style: none;
        padding-left: 20px;
        text-align: left;


    }
    .table123  li {
        display: inline;
    }
    .table123 {
        display: table;   /* Allow the centering to work */
        margin: 0 auto;


    }

    #navbar .header-middle-mob .btn-header-middle-taksit {
        background-color: #005343;
        background-color: #005343;
        width: 100px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius:360px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }



    #navbar .fa-shopping-cart .badge
    {
        background-color: white;
        color: var(--red-diardzair);
        font-size: 9px;
        top: 2px;
        position: absolute;
        left: 20px;
    }


}