:root {
    --content-size: 1em;
    --body-color: #ededed;
    --default-radius: 5px;

    --header-background: #FFFFFF;
    --header-content: #43464a;
    --header-content-hover: #003e7e;
    --header-nav-hover: #003e7e;
    --header-content-icon: #62aaf1;
    --header-badge:#003e7e;
    --header-badge-text:#FFFFFF;

    --background-left-panle: #003e7e;
    --left-nav-header: #002046;
    --left-nav-title: #ffffff;
    --left-nav-content: #d1e4f8;
    --left-nav-content-dark: #FFFFFF;
    --left-nav-content-hover: #ffffff;
    --left-nav-content-hover-background: #002c58;
    --left-nav-current: #62aaf1;
    --left-nav-border: #6a8299;

    --background-1: #ffffff;
    --background-2: #ededed;
    --background-3: #d4d4d4;
    --background-4: #4a4a4a;
    --background-5: #000000;

    --content-color:#43464a;
    --content-color-light:#777777;
    --content-color-dark:#272727;
    --content-color-darker:#003e7e;
    --content-white:#FFFFFF;
    
    --primary: #003e7e;
    --primary-dark: #003e7e;
    --primary-darker: #02284f;
    --primary-light: #d6eefc;

    --secondary: #003e7e;
    --secondary-dark: #003e7e;
    --secondary-darker: #02284f;
    --secondary-light: #dfdfdf;

    /* --secondary: #7e7e7e;
    --secondary-dark: #3a3a3a;
    --secondary-darker: #1d1d1d;
    --secondary-light: #dfdfdf; */
}

.button.dark {
    background: var(--primary-dark);
    color: var(--light);
}

/* ================== Header ================= */
header .main-header .menu a {
    border-bottom: 2px solid var(--header-background);
    color: var(header-content);
}
header .main-header .menu a:hover, header .main-header .menu .is-active > a:hover {
    border-bottom: 2px solid var(--header-nav-hover);
    background: none;
    color: var(--header-content-hover);
}
header .main-header .menu .is-active > a {
    border-bottom: 2px solid var(--header-nav-hover);
    color: var(--header-content-hover);
}
header .header-search-for-mobile {
    background: var(--header-content-hover);
}
header .header-user {
    background: var(--header-content-hover);
    color: var(--header-content-hover);
}
.header-right-menu .icon-button {
    color: var(--header-content-icon)
}
.header-right-menu .icon-button .badge {
    background: var(--header-badge);
    color: var(--header-badge-text)
}
#header-search .search-field, .header-search-for-mobile .search-field {
    color: var(--header-badge-text);
    border-color: var(--header-badge-text);
}
header ul.custom-dropdown li a:hover, ul.listing li:hover {
    color: var(--header-content);
    /* background: var(--header-nav-hover); */
}
header > .main-header-mobile .menu-icon::after {
    background: var(--header-content);
    -webkit-box-shadow: 0 7px 0 var(--header-content),0 14px 0 var(--header-content);
    box-shadow: 0 7px 0 var(--header-content), 0 14px 0 var(--header-content);
}
#header-search .closearch {
    color: var(--header-badge-text);
}

.subHeader {
    background: var(--secondary-dark);
    color: var(--content-white);
}
.subHeader .is-active a {
    color: var(--content-dark);
    border:1px solid var(--content-white);
}
/* ================== ./Header ================= */

/* ================== Left Panel ================== */
.left-panel-content {
    color: var(--left-nav-content);
}
.left-panel-content h3 {
    color: var(--left-nav-content-dark) !important;
}
.left-panel-content h4 {
    color: var(--left-nav-content) !important;
}
.left-panel-content .progress .progress-meter {
    background-color: #3eae00;
}
.progress .progress-meter {
    /* background-color:var(--secondary); */
    /* background-color:var(--header-content-icon); */
    background-color: #3eae00;
}
.leftNavigation a {
    border-color: var(--background-left-panle);
    color: var(--left-nav-content);
}
.leftNavigation a::after {
    border-color: var(--left-nav-border) transparent transparent !important;
}
.with-fixed-left-panel .off-canvas {
    background: var(--background-left-panle);
}
.leftNavigation li a:hover {
    color: var(--left-nav-current);
    background: var(--left-nav-content-hover-background);
    border-color: var(--left-nav-content-hover-background);
}
.leftNavigation li.current a {
    border-left: 4px solid var(--left-nav-current);
    color: var(--left-nav-current);
}
.leftNavigation li.current a:hover {
    color: var(--left-nav-content);
}
.leftNavigation li ul a::before {
    /* content: url(../images/accourion-arrow-right.svg); */
}
ul.listing-with-left-border-and-icons li.tick::before {
    background: url(../images/bullit-tick.svg);
}
ul.listing-with-left-border-and-icons li.markable::before {
    background: url(../images/bullit-markable.svg);
}
ul.listing-with-left-border-and-icons li.lock::before {
    background: url(../images/bullit-lock.svg);
}

/* Thumbnail */
.thumbnail {
    background: var(--primary-light);
  }

/* Card Title */
  .card-main-title {
    background: var(--primary);
}

/* Custom Tree Menu */
.cTreeMenu .tree .total {
    color: var(--secondary-dark);
}

/* Accordion */
.accordion-leftAarrow .accordion-title::before {
    /* content: url(../images/accourion-arrow-down.svg); */
}
.accordion-leftAarrow .is-active > .accordion-title::before {
    /* content: url(../images/accourion-arrow-up.svg); */
}

.ui-tabs .ui-state-active a,
.ui-tabs .ui-state-active a:link,
.ui-tabs .ui-state-active a:visited {
    color: var(--content-white);
    background: var(--primary);
}