/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  /* box-sizing: border-box;*/
 }
 
 
 /* -------------------------------- 
 
 Main Page Content
 
 -------------------------------- */
 .cd-main-content .content-wrapper {
   /* padding: 56px 1px 1px 1px; */
   /* border: 0px solid #ff7f74; */
   position: fixed;
   top: 55px;
   
   max-height: 100%;
   /* z-index: 1000012; */
   height: 92%!important;
   /* max-width: 100%; */
   overflow-x: hidden;
 }
 .cd-main-content .content-wrapper h1 {
   text-align: center;
   /* padding: 3em 0; */
   font-size: 2rem;
 }
 .cd-main-content::before {
   /* never visible - used to check MQ in jQuery */
   display: none;
   content: 'mobile';
 }
 @media only screen and (min-width: 800px) {/* update Lahcen : 768px*/
   .cd-main-content .content-wrapper {
     /* margin-left: 110px; */
     /* padding-top: 55px; */
   }
   .cd-main-content .content-wrapper h1 {
     /*padding: 4em 0;
     font-size: 3.2rem;
     font-weight: 300;/*
   }
   .cd-main-content::before {
     content: 'tablet';
   }
 }
 @media only screen and (min-width: 1170px) {
   .cd-main-content .content-wrapper {
     /* margin-left: 200px; */
   }
   .cd-main-content::before {
     content: 'desktop';
   }
 .cd-main-content .content-wrapper {
     left: 74px;
     width: 94%;
 }
 }
 
 /* -------------------------------- 
 
 Header
 
 -------------------------------- */
 .cd-main-header h3 {
     color: #ffffff !important;
     font-size: 24px;
 }
 .cd-main-header {
   position: absolute;
   z-index: 1000015;
   top: 0;
   left: 0;
   height: 45px;
   width: 100%;
   background: #2e4363;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 .cd-main-header::after {
   clear: both;
   content: "";
   display: table;
 }
 @media only screen and (min-width: 768px) {
   .cd-main-header {
     position: fixed;
     height: 55px;
   }
 }
 
 .cd-logo {
   float: left;
   display: block;
   margin: 11px 0 0 5%;
 }
 .cd-logo img {
   display: block;
 }
 @media only screen and (min-width: 800px) {
   .cd-logo {
     margin: 16px 0 0 36px;
   }
 }
 
 .cd-nav-trigger {
   /* navigation trigger - visible on mobile devices only */
   float: right;
   position: relative;
   display: block;
   width: 34px;
   height: 44px;
   /*margin-right: 5%; */
   /* hide text */
   overflow: hidden;
   white-space: nowrap;
   color: transparent;
 }
 .cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {
   /* hamburger icon in CSS */
   position: absolute;
   display: inline-block;
   height: 3px;
   width: 24px;
   background: #ffffff;
 }
 .cd-nav-trigger span {
   /* line in the center */
   position: absolute;
   top: 50%;
   right: 5px;
   margin-top: -2px;
   -webkit-transition: background 0.2s;
   -moz-transition: background 0.2s;
   transition: background 0.2s;
 }
 .cd-nav-trigger span::before, .cd-nav-trigger span::after {
   /* other 2 lines */
   content: '';
   right: 0;
   /* Force Hardware Acceleration in WebKit */
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform-origin: 0% 50%;
   -moz-transform-origin: 0% 50%;
   -ms-transform-origin: 0% 50%;
   -o-transform-origin: 0% 50%;
   transform-origin: 0% 50%;
   -webkit-transition: -webkit-transform 0.2s;
   -moz-transition: -moz-transform 0.2s;
   transition: transform 0.2s;
 }
 .cd-nav-trigger span::before {
   /* menu icon top line */
   top: -6px;
 }
 .cd-nav-trigger span::after {
   /* menu icon bottom line */
   top: 6px;
 }
 .cd-nav-trigger.nav-is-visible span {
   /* hide line in the center */
   background: rgba(255, 255, 255, 0);
 }
 .cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
   /* keep visible other 2 lines */
   background: white;
 }
 .cd-nav-trigger.nav-is-visible span::before {
   -webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
   -moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
   -ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
   -o-transform: translateX(4px) translateY(-3px) rotate(45deg);
   transform: translateX(4px) translateY(-3px) rotate(45deg);
 }
 .cd-nav-trigger.nav-is-visible span::after {
   -webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
   -moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
   -ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
   -o-transform: translateX(4px) translateY(2px) rotate(-45deg);
   transform: translateX(4px) translateY(2px) rotate(-45deg);
 }
 
 
 
 
 
 @media only screen and (min-width: 768px) {
   .cd-nav-trigger {
     display: none;
   }
   .forMobile {
     display: none;
   }
 }
 
 
 .cd-search {
   position: relative;
   margin: 1.2em 5% 0.6em;
 }
 .cd-search.is-hidden {
   opacity: 0;
 }
 .cd-search::before {
   /* lens icon */
   content: '';
   position: absolute;
   left: 8px;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   height: 16px;
   width: 16px;
   background: url(../img/cd-search.svg) no-repeat 0 0;
 }
 .cd-search input {
   padding-left: 32px;
   width: 100%;
   height: 36px;
   border: none;
   border-radius: .25em;
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
   -o-appearance: none;
   appearance: none;
 }
 .cd-search input:focus {
   outline: none;
 }
 @media only screen and (min-width: 800px) {
   .cd-search {
     float: left;
     display: inline-block;
     width: 250px;
     height: 100%;
     margin: 0 0 0 2.5em;
   }
   .cd-search.is-hidden {
     /* reset style */
     opacity: 1;
   }
   .cd-search::before {
     background-position: 0 -16px;
     left: 1em;
   }
   .cd-search form, .cd-search input {
     height: 100%;
     width: 100%;
   }
   .cd-search input {
     border: none;
     padding-left: 2.6em;
     border-radius: 0;
     background-color: #3e454c;
     border-left: 1px solid #51575d;
     color: #ffffff;
   }
   .cd-search input::-webkit-input-placeholder {
     color: #777c81;
   }
   .cd-search input::-moz-placeholder {
     color: #777c81;
   }
   .cd-search input:-moz-placeholder {
     color: #777c81;
   }
   .cd-search input:-ms-input-placeholder {
     color: #777c81;
   }
 }
 
 /* -------------------------------- 
 
 Top Navigation
 
 -------------------------------- */
 .cd-nav h3 {
     color: #ffffff !important;
 }
 .cd-nav {
   /* top nav - not visible on mobile devices */
   display: none;
 }
 
 @media only screen and (min-width: 800px) {
   .cd-nav {
     display: block;
     float: right;
     height: 100%;
   }
 }
 
 .cd-top-nav > li > a::before {
   /* reset style */
   display: none;
 }
 .cd-top-nav > li a {
   padding: 1em 5% !important;
 }
 .cd-top-nav img {
   /* avatar image */
   position: absolute;
   right: 44px;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   height: 20px;
   width: 20px;
   border-radius: 50%;
   display: none;
 }
 @media only screen and (min-width: 800px) {
   .cd-top-nav {
     height: 100%;
   }
   .cd-top-nav a {
     display: block;
     font-size: 1.4rem;
     color: #fff !important;
   }
   .cd-top-nav > li {
     display: inline-block;
     margin-right: 1em;
     height: 100%;
   }
   .cd-top-nav > li:last-of-type {
     margin-right: 0;
   }
   .cd-top-nav > li a {
     padding: 1em .6em !important;
   }
   .cd-top-nav img {
     display: block;
   }
 }
 @media only screen and (min-width: 1170px) {
   .cd-top-nav li:not(.has-children) a:hover {
      color: #1784c7;
   }
 }
 .cd-top-nav-subnav > li > a:hover{
   background-color: #fff !important;
   color:  #188eb1 !important;
 }
 
 /* -------------------------------- 
 
 Sidebar
 
 -------------------------------- */
 .cd-side-nav {
   position: absolute;
   /* z-index: 1000012; */
   left: 0;
   top: 0;
   width: 100%;
   padding: 45px 0 0;
   background-color: #ffffff;
   visibility: hidden;
   opacity: 0;
   /* max-height: 100vh; */
   overflow: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
   -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
   transition: opacity 0.2s 0s, visibility 0s 0.2s;
 }
 .cd-side-nav.nav-is-visible {
   opacity: 1;
   visibility: visible;
   overflow: visible;
   -webkit-overflow-scrolling: touch;
   -webkit-transition: opacity 0.2s 0s, visibility 0s 0s;
   -moz-transition: opacity 0.2s 0s, visibility 0s 0s;
   transition: opacity 0.2s 0s, visibility 0s 0s;
   max-height: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
 .cd-side-nav > ul {
   padding: 0.6em 0;
 }
 .cd-side-nav > ul:last-of-type {
   padding-bottom: 0;
 }
 .cd-side-nav .cd-label, .cd-side-nav a {
   display: block;
   padding: 1em 5%;
 }
 .cd-side-nav .cd-label {
   background-color: #ff7f74;
   text-transform: uppercase;
   font-weight: bold;
   color: #ffffff;
   font-size: 1rem;
   letter-spacing: .1em;
   margin-bottom: : 5px!important;
   margin-bottom: 4px;
   border-bottom: 3px solid #2e4363;
 }
 .cd-side-nav a {
   position: relative;
   color: #ffffff;
   font-size: 1.4rem;
 }
 
 .cd-side-nav ul.cd-top-nav > li:last-of-type > a {
   border-bottom: none;
 }
 .cd-side-nav > ul > li > a {
   padding-left: calc(5% + 24px);
   border-bottom: 1px solid #ffffff;
 }
 .cd-side-nav > ul > li > a::before {
   /* icon before item name */
   position: absolute;
   content: '';
   left: 5%;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   height: 16px;
   width: 16px;
   /*background: url(../img/cd-nav-icons.svg) no-repeat 0 0;**/
 }
 .cd-side-nav > ul > li.overview > a::before {
   background-position: -64px 0;
 }
 .cd-side-nav > ul > li.notifications > a::before {
   background-position: -80px 0;
 }
 .cd-side-nav > ul > li.comments > a::before {
   background-position: -48px 0;
 }
 .cd-side-nav > ul > li.bookmarks > a::before {
   background-position: -32px 0;
 }
 .cd-side-nav > ul > li.images > a::before {
   background-position: 0 0;
 }
 .cd-side-nav > ul > li.users > a::before {
   background-position: -16px 0;
 }
 .cd-side-nav .count {
   /* notification badge */
   position: absolute;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   right: calc(5% + 16px + 0.4em);
   padding: 0.2em 0.4em;
   background-color: #ff7e66;
   border-radius: .25em;
   color: #ffffff;
   font-weight: bold;
   font-size: 1.2rem;
   text-align: center;
 }
 .cd-side-nav .action-btn a {
   display: block;
   margin: 0 5%;
   padding: 1em 0;
   background-color: #1784c7;
   border-radius: .25em;
   border: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   text-align: center;
   color: #ffffff;
   font-weight: bold;
 }
 .cd-side-nav .action-btn a::before {
   display: none;
 }
 @media only screen and (min-width: 800px) {
   .cd-side-nav {
     position: fixed;
     float: left;
     top: 55px;
     width: 110px;
     min-height: 100vh;
     padding-top: 0px;
     /* reset style */
     visibility: visible;
     opacity: 1;
     overflow: visible;
     max-height: none;
   }
   .cd-side-nav.nav-is-visible {
     box-shadow: none;
   }
   .cd-side-nav.is-fixed {
     position: fixed;
   }
   .cd-side-nav > ul {
     /* reset style */
     padding: 0;
   }
   .cd-side-nav .cd-label {
     /* remove labels on minified version of the sidebar */
     display: none;
   }
   .cd-side-nav a {
     font-size: 1.2rem;
     text-align: center;
   }
   .cd-side-nav > ul > li > a {
     padding: calc(2.2em + 24px) 0 2.4em;
   }
   .cd-side-nav > ul > li > a::before {
     left: 50%;
     right: auto;
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     transform: translateX(-50%);
     top: 2.4em;
   }
 
   .cd-side-nav .action-btn a {
     margin: 1em 10% 0;
   }
   .cd-side-nav .count {
     height: 8px;
     width: 8px;
     border-radius: 50%;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
     padding: 0;
     top: 2em;
     -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
     -o-transform: translateX(-50%);
     transform: translateX(-50%);
     left: calc(50% + 5px);
     right: auto;
     color: transparent;
   }
 }
 @media only screen and (min-width: 1170px) {
   .cd-side-nav {
     width: 200px;
     /* overflow-x: visible; */
   }
   .cd-side-nav > ul {
     padding: 0 0px;
   }
   .cd-side-nav > ul > li:not(.action-btn):hover > a {
     background-color: #33383e;
   }
   .cd-side-nav > ul > li > a {
     padding: 1em 1em 1em 42px;
     text-align: left;
     border-bottom: none;
   }
   .cd-side-nav > ul > li > a::before {
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
     left: 18px;
   }
   .cd-side-nav .cd-label {
     display: block;
     /* padding: 4px 9px; */
     background: #ff7f74;
   }
   .cd-side-nav .action-btn {
     text-align: left;
   }
   .cd-side-nav .action-btn a {
     margin: 0 18px;
   }
   .no-touch .cd-side-nav .action-btn a:hover {
     background-color: #1a93de;
   }
   .cd-side-nav .count {
     /* reset style */
     color: #ffffff;
     height: auto;
     width: auto;
     border-radius: .25em;
     padding: .2em .4em;
     top: 50%;
     bottom: auto;
     -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
     right: 18px;
     left: auto;
     box-shadow: none;
   }
 }
 
 .has-children ul {
   position: relative;
   width: 100%;
   display: none;
   background-color: #1c1f22;
 }
 .has-children > a::after {
   /* arrow icon */
   position: absolute;
   content: '';
   height: 16px;
   width: 16px;
   right: 5%;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
   background: url(../img/cd-arrow.svg);
 }
 .has-children.selected > ul {
   display: block;
 }
 .has-children.selected > a::after {
   -webkit-transform: translateY(-50%) rotate(180deg);
   -moz-transform: translateY(-50%) rotate(180deg);
   -ms-transform: translateY(-50%) rotate(180deg);
   -o-transform: translateY(-50%) rotate(180deg);
   transform: translateY(-50%) rotate(180deg);
 }
 @media only screen and (min-width: 768px) {
   .has-children {
     position: relative;
   }
   .has-children ul {
     position: absolute;
     top: 0;
     left: 100%;
     width: 160px;
     padding: 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   }
   .has-children ul a {
     text-align: left;
     border: none;
     padding: 1em;
   }
   .no-touch .has-children ul a:hover {
     color: #1784c7;
   }
   .has-children > a::after {
     display: none;
   }
   .cd-side-nav .has-children.selected > a {
     /* focus state -> show sub pages */
     background-color: #33383e;
   }
   .cd-top-nav .has-children {
     position: relative;
     background-color: rgb(24, 142, 177);
     color: #fff;
   }
   .cd-top-nav .has-children > a {
     height: 100%;
     padding: 0 calc(1.8em + 22px) 0 calc(1.8em + 26px) !important;
     line-height: 55px;
   }
   .cd-top-nav .has-children > a::after {
     display: block;
     right: 1.8em;
   }
   .cd-top-nav .has-children ul {
     background-color: #1c1f22;
     width: 200px;
     top: 100%;
     right: 0;
     left: auto;
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
   }
   .cd-top-nav .has-children ul a {
     padding-left: 18px !important;
   }
   .cd-side-nav{
     width: 7%;
   }
   .cd-side-nav > ul > li > a {
     font-size: xx-large;
   }
 }
 @media only screen and (min-width: 1170px) {
   .has-children > ul {
     width: 100%;
     z-index: 1;
   }
   .has-children ul a {
     padding-left: 18px;
   }
   .has-children.active > ul {
     /* if the item is active, make the subnavigation visible */
     position: relative;
     display: block;
     /* reset style */
     left: 0;
     box-shadow: none;
   }
   .no-touch .cd-side-nav .has-children:hover > ul, .cd-side-nav .has-children.hover > ul {
     /* show subnavigation on hover */
     display: block;
     opacity: 1;
     visibility: visible;
   }
   .cd-side-nav{
     width: 65px;
   }
 }
 .cd-side-nav > ul > li > a {
     padding: calc(2.2em + 24px) 0 2.4em;
 }
 .cd-side-nav > ul > li > a >i {
     padding-right: 6px;
 }
 
 .cd-side-nav .active > a {
   /* current page */
   /* box-shadow: inset 8px 0 0 #ffa49c; */
   background-color: rgba(255, 255, 255, 0.93);
   /* padding: 14px; */
   /* width: 103%; */
   border-right: 4px solid  #ff7f74;
   /* border-right: 4px solid #ffa49c; */
   /* border-top-right-radius: 8px; */
   /* border-bottom-right-radius: 8px; */
   /* color: #188eb1 !important;*/
 }
 .cd-side-nav > ul > li > a  {
   background-color: #fff;
   padding: 14px;
 }
 
 .tooltip .tooltip-inner {
   background-color: #33383e;
   color: #fff;
   min-width: 100px;
   font-size: large;
   font-family: "museo-sans", sans-serif;
   font-weight: bolder;
   border: 1px solid #fff;
   z-index: 1000015
     
 }
 .tooltip {
   z-index: 1000015!important;
 }
 
 .has-children.active > ul{
    background-color: rgba(255, 164, 156, 0.53)!important;
 }
 
 .has-children.active > ul li a{
   color :#252f31 !important;
   padding: 14px;
   font-size: x-large;
   border-bottom: 1px solid #ff7f74;
   border-right: 4px solid #ff7f74;
 }
 
 
 .cd-side-nav {
      height: 99%!important;
      /* overflow-y: scroll!important; */
 }