/* 

    --- Charcoal
    HEX #1AIAIA
    RGB (26, 2426)
    --- ACS blue (BG ONLY)
    HEX #0000EF
    RGB (0, 0, 239)
    --- Dark grey (BG ONLY)
    HEX #484848
    RGB (72, 72, 72)
    --- Medium grey (BG ONLY)
    HEX #CACACA
    RGB (202, 202, 202)
    --- Light grey (BG ONLY)
    HEX #EDEDED
    RGB (237,237.237)
    --- Community (Value drive bg)
    HEX #5165E8
    RGB (81, 101, 232)
    --- Capability (Value drive bg)
    HEX #FE3057
    RGB (254 48.87)
    --- Career (Value drive bg)
    HEX #9D3DF9
    RGB (157, 61, 24)
    --- Migration (Value drive bg)
    HEX #F34C9A
    RGB (243.76.154)

    --- Master Gradient
    -- Blue to red (linear)
    background: linear-gradient(115deg, rgba(4,2,92,1) 2%, rgba(31,14,253,1) 27%, rgba(31,14,253,1) 58%, rgba(184,46,165,1) 75%, rgba(253,35,34,1) 89%, rgba(135,15,14,1) 100%) !important;

    -- Value drive gradient (radial)
    - Community
    TBA
    - Capability
    TBA
    - Career
    TBA
    - Migration
    TBA

*/
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-300.woff2') format('woff2'),
         url('/assets/fonts/dinpro-300.woff') format('woff'),
         url('/assets/fonts/dinpro-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-400.woff2') format('woff2'),
         url('/assets/fonts/dinpro-400.woff') format('woff'),
         url('/assets/fonts/dinpro-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-500.woff2') format('woff2'),
         url('/assets/fonts/dinpro-500.woff') format('woff'),
         url('/assets/fonts/dinpro-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-400.woff2') format('woff2'),
         url('/assets/fonts/dinpro-400.woff') format('woff'),
         url('/assets/fonts/dinpro-400.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-400.woff2') format('woff2'),
         url('/assets/fonts/dinpro-400.woff') format('woff'),
         url('/assets/fonts/dinpro-400.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-700.woff2') format('woff2'),
         url('/assets/fonts/dinpro-700.woff') format('woff'),
         url('/assets/fonts/dinpro-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'DIN';
    src: url('/assets/fonts/dinpro-900.woff2') format('woff2'),
         url('/assets/fonts/dinpro-900.woff') format('woff'),
         url('/assets/fonts/dinpro-900.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}


/* Website width setting */
@media (min-width: 1440px){
    .container {
        max-width: 1400px !important;
    }
}

/* CSS Variables */
:root {
    --primary-typeface:       'DIN';
    --secondary-typeface:     'DIN';
    --base-font-size:         14px;
    --site-header-height:     60px;

    --primary-color-one:     #0057B8;
    --primary-color-alt:     #0057B8;
    --primary-color-two:     #0057B8;
    --primary-color-three:   #0057B8;
    --primary-color-four:    #0057B8;
    --primary-color-five:    #0057B8;

    --color-red:             #DA291C;
    --color-green:           #43B02A;
    --color-blue:            #0057B8; 
    --color-gold:            #FFD700; 
    --color-orange:          #FF8F1C;
    --color-disabled:        #d8d8d8;
    --color-completed:       #43B02A;
 
    --border-color-one:      #ededed;
    --border-color-two:      #d2d2d2;
    --border-color-three:    #989798;
 
    --text-color-primary:    #484e53;
    --text-color-alt:        #989798;

    --chart-light-txt-color: #ffffff;
    --chart-dark-txt-color:  #333333;
    --chart-color-one:       #43B02A;
    --chart-color-two:       #5F259F;
    --chart-color-three:     #C8102E;
    --chart-color-four:      #0057B8;
    --chart-color-five:      #FF8F1C;
    --chart-color-six:       #E10098;

    --chart-tool-tip-bg: rgba(0, 0, 0, 0.7);
    --chart-tool-tip-title-color: #fff;
    --chart-tool-tip-content-color: #fff;
    --chart-tool-tip-additional-info-color: #fff;

    --bg-color-one:          #484848;
    --bg-color-two: 	     #ffffff;
    --bg-color-three:        #CACACA;

    --btn-hover-color:       #0057B8;
    --btn-default-color:     #0066CC;
    --btn-default-txt-color: #ffffff;
    --btn-alt-color:           transparent;
    --btn-alt-txt-color:     #0066CC;
    --anchor-link-color:     #0066CC;

    --badge-color-primary: 	 #0057B8;
    --badge-color-inactive:	 #989798;
    --badge-color-attention: #FF8F1C;
    --badge-color-success:	 #43B02A;
    --badge-color-bg: 		 #484e53;
    --badge-color-bg-alt: 	 #484e53;

    --banner-bg-color:       #002c4b;
    --banner-text-color:     #ffffff;
    --banner-icon-color:     #ffffff;

    --type-text-color:       #737373;

    --event-invitation-color:#002c4b;
    --event-session-color:   #162f4d;

    --calendar-bg-color:     #afc1d0;
    --calendar-txt-color:    #ffffff;
    --calendar-txt-alt-color:#484e53;
    --calendar-bookmark-color:#afc1d0;

    --results-graph-color-1: rgba(0, 133, 202, 0.8);
    --results-graph-color-2: rgba(95, 37, 159, 0.8);
    --results-graph-color-3: rgba(200, 16, 46, 0.8);
    --results-graph-color-4: rgba(43, 176, 42, 0.8);
    --results-graph-color-5: rgba(255, 143, 28, 0.8);
    --results-graph-color-6: rgba(225, 0, 152, 0.8);

    --sfia-red: #ed1e38;
    --sfia-pink: #cc2d93;
    --sfia-yellow: #fecd0f;
    --sfia-brown: #ce6727;
    --sfia-blue: #2399c5;
    --sfia-green: #128c44;

    --shadow-default: 0px 0px 15px 0px #0000000D;
    --btn-padding-lrg: 16px 32px 16px 32px;
    --btn-padding-med: 12px 24px 12px 24px;
    --btn-padding-sml: 8px 16px 8px 16px;
}


/* CSS Overrides */

.reports-modal .modal-body .table-wrapper .header-claim,
.reports-modal .modal-body .table-wrapper .header-program{
    color: var(--chart-light-txt-color);
}

c4-col-group.bg-active:before{
    background: transparent !important;
}

c4-row-group.STYLE1.bg-active,
c4-col-group.STYLE1.col{
    background: #13294B !important;
    background: linear-gradient(133.37deg, #001A72 0%, #0085CA 100%) !important;
}

c4-row-group.STYLE2.bg-active,
c4-col-group.STYLE2.col {
    background: #001a72 !important;
}

c4-row-group.STYLE3.bg-active,
c4-col-group.STYLE3.col {
    background: #001a72 !important;
    background: linear-gradient(133.37deg,#001a72,#0085ca) !important;
}

c4-row-group.STYLE4.bg-active,
c4-col-group.STYLE4.col {
    background: #1A1A1A !important;
    background-color: #1A1A1A !important;
}

c4-row-group.STYLE5.bg-active,
c4-col-group.STYLE5.col {
    background: #484848 !important;
    background-color: #484848 !important;
}

c4-row-group.STYLE6.bg-active,
c4-col-group.STYLE6.col {
    background: #CACACA !important;
    background-color: #CACACA !important;
}

c4-row-group.STYLE7.bg-active,
c4-col-group.STYLE7.col {
    background: #EDEDED !important;
    background-color: #EDEDED !important;
}

c4-row-group.STYLE8.bg-active,
c4-col-group.STYLE8.col {
    background: #5165E8 !important;
    background-color: #5165E8 !important;
}
c4-row-group.STYLE9.bg-active,
c4-col-group.STYLE9.col {
    background: #FE3057 !important;
    background-color: #FE3057 !important;
}
c4-row-group.STYLE10.bg-active,
c4-col-group.STYLE10.col {
    background: #9D3DF9 !important;
    background-color: #9D3DF9 !important;
}
c4-row-group.STYLE10.bg-active,
c4-col-group.STYLE10.col {
    background: #F34C9A !important;
    background-color: #F34C9A !important;
}

/* hompeage header bg */
c4-row-group.STYLE20.bg-active,
c4-col-group.STYLE20.col{
    background: #13294B !important;
    background: linear-gradient(133.37deg, #001A72 0%, #0085CA 100%) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: var(--shadow-default);
}
c4-row-group.STYLE20.bg-active > .container > .row > c4-col-group{
    padding: 5px 25px;
}
c4-row-group.STYLE20.bg-active > .container > .row > c4-col-group > c4-item  .asset-label > .cursor-pointer:after{  /*the arrow*/
    content: "\f061";
    position: absolute;
    right: 0px;
    bottom: 10px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
    z-index: 0;
}

c4-row-group.STYLE21.bg-active,
c4-col-group.STYLE21.col{
    background: #13294B !important;
    background: linear-gradient(133.37deg, #001A72 0%, #0085CA 100%) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: var(--shadow-default);
}
c4-row-group.STYLE21.bg-active > .container > .row > c4-col-group{
    padding: 0;
}
c4-row-group.STYLE21.bg-active > .container > .row > c4-col-group > c4-item > c4-row-group > .container {
    margin-bottom: 0 !important;
}
c4-row-group.STYLE21.bg-active h1{
    font-size: 2.29em;
}
c4-row-group.STYLE21.bg-active h4{
    font-size: 1.28em;
}
c4-row-group.STYLE21.bg-active > .container > .row > c4-col-group > c4-item > c4-row-group > .container > .row > c4-col-group:first-child {
    padding: 25px;
    padding-bottom: 5px
}
c4-row-group.STYLE21.bg-active > .container > .row > c4-col-group > c4-item > c4-row-group > .container > .row > c4-col-group:last-child {
    background-size: contain !important;
    background-color: #1a1a1a !important;
}
c4-row-group.STYLE21.bg-active > .container > .row > c4-col-group > c4-item > c4-row-group > .container > .row > c4-col-group:last-child > c4-item > c4-row-group > div > div {
    min-height: 334px !important;
}
c4-row-group.STYLE21.bg-active h4{
    margin-bottom: 0 !important;
    line-height: 1.3 !important
}
c4-row-group.STYLE21.bg-active p{
    line-height: 1.3 !important;
}

c4-row-group.STYLE1:before,
c4-col-group.STYLE1:before,
c4-row-group.STYLE2:before,
c4-col-group.STYLE2:before,
c4-row-group.STYLE3:before,
c4-col-group.STYLE3:before,
c4-row-group.STYLE4:before,
c4-col-group.STYLE4:before,
c4-row-group.STYLE5:before,
c4-col-group.STYLE5:before,
c4-row-group.STYLE6:before,
c4-col-group.STYLE6:before,
c4-row-group.STYLE7:before,
c4-col-group.STYLE7:before,
c4-row-group.STYLE8:before,
c4-col-group.STYLE8:before,
c4-row-group.STYLE9:before,
c4-col-group.STYLE9:before,
c4-row-group.STYLE10:before,
c4-col-group.STYLE10:before,
c4-row-group.STYLE20:before,
c4-col-group.STYLE20:before{
    background: transparent !important;
}

c4-row-group.STYLE1.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE1.col *:not([class^="c4-"]),
c4-row-group.STYLE2.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE2.col *:not([class^="c4-"]),
c4-row-group.STYLE3.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE3.col *:not([class^="c4-"]),
c4-row-group.STYLE4.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE4.col *:not([class^="c4-"]),
c4-row-group.STYLE5.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE5.col *:not([class^="c4-"]),
c4-row-group.STYLE6.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE6.col *:not([class^="c4-"]),
c4-row-group.STYLE7.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE7.col *:not([class^="c4-"]),
c4-row-group.STYLE8.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE8.col *:not([class^="c4-"]),
c4-row-group.STYLE9.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE9.col *:not([class^="c4-"]),
c4-row-group.STYLE10.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE10.col *:not([class^="c4-"]),
c4-row-group.STYLE20.bg-active *:not([class^="c4-"]),
c4-col-group.STYLE20.col *:not([class^="c4-"]){
    color: #fff !important;
}

.c4-a00{
    color: #ffffff !important;
}
.c4-a01{
    color: #282828 !important;
}

.c4-a1{
    color: #0057B8 !important;
}
.c4-a2{
    color: #13294B !important;
}
.c4-a3{
    color: #737373 !important;
}
.c4-a4{
    color: #898989 !important;
}
.c4-a5{
    color: #862633 !important;
}
.c4-a6{
    color: #DA291C !important;
}
.c4-a7{
    color: #B94700 !important;
}
.c4-a8{
    color: #FF8F1C !important;
}
.c4-a9{
    color: #43B02A !important;
}

.c4-a10{ /* SFIA Red */
    color: var(--sfia-red) !important;
}
.c4-a11{ /* SFIA Pink */
    color: var(--sfia-pink) !important;
}
.c4-a12{ /* SFIA Yellow */
    color: var(--sfia-yellow) !important;
}
.c4-a13{ /* SFIA Brown */
    color: var(--sfia-brown) !important;
}
.c4-a14{ /* SFIA Blue */
    color: var(--sfia-blue) !important;
}
.c4-a15{ /* SFIA Green */
    color: var(--sfia-green) !important;
}

.c4-a19{ /* Jumbo size */
    font-size: 54px;
    font-weight: normal;
    line-height: 52px;
}

/* typography */
h1, .h1 { /*48px*/
    font-size: 3.43em;
     line-height: 52.8px !important;
}
h2, .h2 { /*32px*/
    font-size: 2.29em;
    line-height: 41.6px !important;
}
h3, .h3 { /*24px*/
    font-size: 1.71em;
    line-height: 31.2px !important;
}
h4, .h4 { /*20px*/
    font-size: 1.42em;
    line-height: 28px !important;
}
h5, .h5 { /*18px*/
    font-size: 1.28em;
    font-weight: bold;
    font-style: italic;
}
.text-container h1{
    line-height: 52.8px !important;
}
.text-container h2{
   line-height: 41.6px !important;
}
.text-container h3{
   line-height: 31.2px !important;
}
.text-container h4{
   line-height: 28px !important;
}

.article-advice .text-box h3 {
    color: var(--text-color-priamry);
}


/* Accent Container styling */
.A20 {
    box-shadow: var(--shadow-default);
    border-radius: 8px;
    overflow: hidden;
}
.A20 > .container > .row > .col > c4-item:first-child .asset-label {
    background: linear-gradient(133.37deg,#0085CA 0%, #001A72 100%);
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
    padding: 10.3px 15px;
}

.A20 > .container > .row > .col > c4-item:first-child .asset-label h2{
    color: #fff;
    line-height: 1.3;
    font-size: 1.28em;
    font-weight: 400;
}
.A20.bg-active > .container > .row > c4-col-group > c4-item .asset-label > .cursor-pointer .c4-a1:after {
    content: "\f061";
    right: 0px;
    bottom: 10px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    margin-left:10px
}

/* homepage container links */
c4-item:has(> .A21):first-child{
    margin-top: -15px
}
c4-item:has(> .A21):not(:last-child):after{
    content: "";
    width: calc(100% + 30px);
    height:1px;
    left: -15px;
    position: absolute;
    background:#b4b4b480;
    z-index: 1;
    bottom: 0;
}
c4-item:has(> .A21) .image.img-cmpt,
c4-item:has(> .A21) .asset-label{
    margin-bottom: 0;
}
c4-item:has(> .A21) .asset-label  h4{
    font-size: 1.28em;
}
c4-item:has(> .A21) .asset-label> .cursor-pointer:after {
    content: "\f061";
    position: absolute;
    right: 0px;
    bottom: -10px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 500;
    font-size: 17px;
    cursor: pointer;
    z-index: 0;
    color: #0057B8;
}

.A20 .A21{
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0!important;
}

/* SFIA Quote */
p:has(.c4-a22) + blockquote {
    border-width: 10px;
    padding-top: 6px;
    padding-bottom: 0;
}
p:has(.c4-a22) + blockquote > *:not(:last-child){
    margin-bottom: 5px;
}
p:has(.c4-a22){
    display: none !important;
}
p:has(.c4-a22):has(.c4-a10) + blockquote { /* Quote Red */
    border-color: var(--sfia-red);
}
p:has(.c4-a22):has(.c4-a11) + blockquote { /* Quote Pink */
    border-color: var(--sfia-pink);
}
p:has(.c4-a22):has(.c4-a12) + blockquote { /* Quote Yellow */
    border-color: var(--sfia-yellow);
}
p:has(.c4-a22):has(.c4-a13) + blockquote { /* Quote Brown */
    border-color: var(--sfia-brown);
}
p:has(.c4-a22):has(.c4-a14) + blockquote { /* Quote Blue */
    border-color: var(--sfia-blue);
}
p:has(.c4-a22):has(.c4-a15) + blockquote { /* Quote Green */
    border-color: var(--sfia-green);
}

/* this is for default theme */

.login-page .overlay-bg{
    /* background: #f8f8f8; */
    background: rgb(4,2,92);
    background: linear-gradient(115deg, rgba(4,2,92,1) 23%, rgba(31,14,253,1) 37%, rgba(31,14,253,1) 58%, rgba(184,46,165,1) 75%, rgba(253,35,34,1) 89%, rgba(135,15,14,1) 100%) !important;
}
.login-page #login-wrapper{
    box-shadow: none !important;
}

@media (min-width: 575px){
    .login-page div#website-logo{
        /* right:20px; */
        left: calc(25% + 20px);
    }
    .login-page div#website-logo img {
        max-height: 70px !important;
    }
}

#signup-page header .header-surround img,
.forgot-form header .header-surround img, .reset-form header .header-surround img,
.header .logo img {
    max-height: 45px !important;
}

.forgot-form #forgot-page:before, .forgot-form #resetpw-page:before, .reset-form #forgot-page:before, .reset-form #resetpw-page:before{
    background: #f8f8f8;
}




#profile-header {
    background: linear-gradient(357deg, var(--primary-color-one) -39%, var(--primary-color-alt) 75.71%);
}

#profile-header .container .statistics-row .stat-item i{
    background: var(--primary-color-five) !important;
    color: #fff !important;
}

.owl-theme .owl-dots .owl-dot.active span {
    background: var(--btn-default-color) none repeat scroll 0 0 !important;
}

.owl-theme .owl-dots .owl-dot:hover:not(.active) span {
    background: rgba(221,98,83,.6) none repeat scroll 0 0 !important;
}

#event-session-scroller{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* c4-row-group.STYLE5 *:not([class^="c4-"]),
c4-col-group.STYLE5 *:not([class^="c4-"]){
    color: #fff;
} */

@media(max-width: 576px){
    .login-page div#website-logo img {
        max-height: 22px !important;
    }

    .login-page div#website-logo{
        height: 60px;
        display: flex;
        align-items: center;
    }
}

/* banners */
.program-banner .text-box .title {
    font-size: 48px !important;
    line-height: 52.8px !important;
    font-weight: 400 !important
}

@media (min-width: 768px) {
    .page-header .title,
    .program-banner .text-box .title{
        font-size: 3.43em !important;
        line-height: 53px !important;
        font-weight: normal !important;
    }
}



.program-banner .text-box .program-type{
    display: none;
    color: #fff;
    font-weight: 700 !important;
}

.program-surround.list-view .contents > h2{
    font-size: 1.71em;
}

.program-surround .top-note-surround h3{
    font-size: 1.42em;
}


#profile-header,
.program-banner,
.page-header,
.tags-baner,
.compliance-banner,
#progress-row,
#events-header{
    background: rgb(4,2,92);
    background: linear-gradient(133.37deg, #001A72 0%, #0085CA 100%) !important;
}

/* search page */
#search-header {
    /* background: linear-gradient(133.37deg,#001a72,#0085ca) !important; */
    background: rgb(4,2,92);
    background: linear-gradient(133.37deg, #001A72 0%, #0085CA 100%) !important;
}
section#search-header .page-title{
    font-size: 2.29em;
}
section#search-bottom-header-wrapper .category-filtersort h1{
    font-size: 1.71em;
    line-height: 1.3;
}



/* Profile Memebership page */
#page_plan-claims .claim-item .claim-status,
.membership-surround .mbs-footer, .membership-card .mbs-footer {
    color: #fff !important;
    background: #1a1a1a;
}
.membership-surround .mbs-body .type, .membership-card .mbs-body .type{
    font-weight:700
}

#page_cpd-claims .claim-item .claim-controls button.view-btn, 
#page_plan-claims .claim-item .claim-controls button.view-btn, 
#page_certificates .claim-item .claim-controls button.view-btn,
.membership-surround .mbs-header button.edit-membership-btn, .membership-card .mbs-header button.edit-membership-btn{
    color: var(--btn-default-color) !important;
}

/* profile CPD  header */
.compliance-banner .row .membership-header .reports-header .btn{
    background: #fff;
    color: #000 !important;
}
.compliance-banner .row .membership-header .reports-header .btn:hover{
    border-color: #fff;
}

.compliance-banner .row .plans-header .row .complete-credit p,
.compliance-banner .row .plans-header .row .lp-count span,
.compliance-banner .row .claim-header .resp-meta .count{
    color:#fff;
}

/* profile cliam */
section#claims-header .btn.round{
    color: var(--text-color-primary) !important;
    background: #fff;
}
section#claims-header .btn.round:hover{
    color: white !important;
    border-color: #fff;
}
#page_plan-claims .claim-item .claim-status *{
    color: #fff !important;
}

/* loginpage */
.login-page #login-wrapper .inner .btn.round{
    background: var(--btn-default-color);
    border-color: var(--btn-default-color);
    padding: var(--btn-padding-med) !important;
}
.login-page #login-wrapper .inner .btn.round:hover:not(.disabled){
    color: var(--btn-default-txt-color) !important;
}

.login-page #login-wrapper .footer-logo .terms-privacy img {
    max-height: 23px !important;
}

/* breadcrub bar */
.course-navigations {
    background-color: #fdfdfd;
}

/* profile */
#profile-master .mainbody-surround .pf-header .surround .section-title{
    font-size: 1.42em;
    line-height:1;
}
#profile-master .sidebar-surround .menu-wrapper .profile-menu-container .nav .nav-link.active{
    background:#0057B8;
    color:#fff;
}
#profile-master .sidebar-surround .menu-wrapper .profile-menu-container .nav .nav-link.parent.active{
    background: #484848;
    color: #fff;
}
#profile-master .sidebar-surround .menu-wrapper .profile-menu-container .nav > .nav-item .child-menu > .nav{
    background: #fdfdfd;
}

    /* collaboration */
        #collaboration-container #messenger-container .title-bar{
            background-color: #1a1a1a !important;
        }
        #collaboration-container #messenger-container .list-container .list-item-container .list-item:hover:not(.inactive) {
            background: var(--btn-default-color);
        }

        #collaboration-container #messenger-container .list-container .list-item-container .list-item:hover:not(.inactive) *{
            color: var(--btn-default-txt-color);
        }
        #collaboration-container #messenger-container .list-container .add-btn {
            background: var(--btn-default-color);
        }
        #collaboration-container #messenger-container .list-container .add-btn i{
            color: var(--btn-default-txt-color);
        }
        #collaboration-container #messenger-container .detail-container .list-container .inner-list-container .top-section .chat-menu.show .dropdown-toggle {
            background: #eee !important;
            color: var(--btn-default-color) !important;
        }
        #collaboration-container #messenger-container .detail-container .all-container .top-pannel {
            background-color: var(--bg-color-one) !important;
        }
        #collaboration-container #messenger-container .detail-container #collapse-chat-btn:hover {
            color: var(--btn-default-color) !important;
        }
        #collaboration-container #default-icon .badge{
            background-color: var(--primary-color-one) !important;
            color: var(--text-color-primary) !important;
        }
        #collaboration-container #messenger-container .detail-container .list-container .inner-list-container .top-section .chat-menu .dropdown-toggle:hover{
            color:  var(--btn-default-color) !important;
        }
        #collaboration-container #messenger-container .detail-container .all-container .top-pannel{
            background: var(--primary-color-alt) !important;
        }

        #collaboration-container #messenger-container .title-bar .minimise-btn:hover{
            border-color: #E2EFF4 !important;
            color: #E2EFF4 !important;
        }

        .detail-container .list-container .inner-list-container .top-section .ic-btn:hover{
            color: var(--primary-color-one) !important;
        }

        .detail-container #collapse-chat-btn:hover i{
            color: #E2EFF4 !important;
        }

        .detail-container .list-container .profile-list .profile-item.add{
            background-color: var(--primary-color-one) !important;
        }


/* card */
    /* program item listing */
    .card-item.mini-list .content-holder .content-surround .card-title,
    .card-item.list-view .content-holder .content-surround .contents .card-title{
        font-weight:400;
        font-size: 1.42em;
    }
    /* course card */
    .card-item.grid-view .content-holder .content-surround .card-title{
        font-weight:600 !important;
        font-size: 1.28em;
    }

    .card-progress ul li:not(.blocked):not(.completed) a {
        background: transparent !important;
        border: 1px solid var(--btn-default-color) !important
    }
    .card-progress ul li:not(.blocked):not(.completed) a i{
        color: var(--btn-default-color) !important
    }
    .card-progress ul li.completed a {
        background: transparent !important;
        border: 1px solid var(--color-green) !important
    }
    .card-progress ul li.completed a i{
        color: var(--color-green) !important
    }

    .card-item.mini-list .content-holder .card-controls .learn-btn,
    .card-item.post-item .content-holder .btn,
    .card-item.grid-view .content-holder .card-footer .view-btn{
        text-transform: uppercase;
        font-size: 13px;
    }
    .card-item.mini-list .content-holder .card-controls .learn-btn i:before,
    .card-item.post-item .content-holder .btn i:before,
    .card-item.grid-view .content-holder .card-footer .view-btn i:before{
        content: "\f061";
        top: -1px;
        position:relative;
    }
    .card-item.list-view .content-holder .content-surround .contents .type-meta,
    .card-item.grid-view .content-holder .content-surround .mt-surround,
    .card-item.grid-view .content-holder .content-surround .type-meta{
        display: none !important;
    }
    /* remove program card fx */
    .content-first:after,
    .content-first:before{
        display: none
    }



/* Custom quiz styling */

    /* step counter */
    /* .timeline .steps-wrapper .step-container .step.active .step-lbl {
        background: var(--primary-color-one);
        border-color: var(--primary-color-one);
    }
    
    .timeline .steps-wrapper .progress-line {
        background: var(--primary-color-one);
    }
    
    .timeline .steps-wrapper .step-container .step.touched .step-lbl {
        border-color: var(--primary-color-one);
    } */


    #quiz-content .quiz-content-surround .question-header .feed-back-actions .btn{
        background: #0057B8;
    }


    /* answer buttons */
    #quiz-group .question-answer-container.quiz-box .column-view li > div.quiz-btn.active span:not(.radio):not(.check) {
        background: #0057B8;
    }
    #quiz-group .question-answer-container.quiz-box .column-view li > div.quiz-btn.active a span:not(.radio) > p, 
    #quiz-group .question-answer-container.quiz-box .column-view li > div.quiz-btn.active a span:not(.check) > p{
       background: #0057B8;
    }


    


.card-item.post-item .content-holder .type-meta,
.card-item .content-holder .content-surround .contents .type-meta,
.event-item .content-holder .content-container .type-meta,
.card-item .content-holder .content-surround .type-meta{
    font-weight:700;
    display: none;
}

#profile-master .mainbody-surround .pf-header .surround .tab-menu .nav .nav-item .nav-link:hover,
section.tab-nav .nav-tabs li:hover:not(.active), .tab-nav .nav-tabs li:hover:not(.active) {
    border-bottom-color: #0057B8 !important;
}

.categories-surround .sub-menu .column ul.parent-list button.active, .categories-surround .sub-menu .column ul.parent-list button:hover,
.categories-navigation .contents .sub-taxonomies .owl-item{
    background: #0057B8;
}

.card-item.mini-list .card-controls a{
    color: #0057B8;
}

/* default homepage */
#progress-row .section-header-surround .btn{
    background: #fff;
    color: #0057B8;
}

#progress-row .section-header-surround .btn:hover{
    background: transparent;
    border-color: #fff !important;
}

#progress-row .section-header-surround .btn:hover *{
    color: #fff !important;
}

.program-surround .top-note-surround {
    border-bottom: 3px solid #0057B8;
    box-shadow: var(--shadow-default) !important;
    border-radius: 8px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.event-session-surrround .session-item .session-img {
    background-position: 0 0 !important;
}

div#preview-content-msg {
    display: none;
}



/* text gradient colour */

.gradient-text {
    background-color: #0057B8;
    background-image: linear-gradient(115deg, rgba(4,2,92,1) 2%, rgba(31,14,253,1) 37%, rgba(31,14,253,1) 58%, rgba(184,46,165,1) 75%, rgba(253,35,34,1) 89%, rgba(135,15,14,1) 100%);
    background-size: 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}



/* card */


.image-holder .type-icon{
    background-color: #1a1a1a;
}

.content-first:before{
    border-radius: 0 0 8px 8px;
}

.content-first:after{
    border-radius: 0 0 8px 8px;
}





.card-item.list-view .image-holder{
    border-radius: 8px 0 0 8px;
}
.card-item.list-view{
    border-radius: 8px;
}

.card-item.mini-list{
    border-radius: 8px;
}
@media (min-width: 992px) {
    .card-item.mini-list .image-holder {
        border-radius: 8px 0 0 8px;
    }
}


.card-item.list-view,
.card-item.grid-view{
    border-radius: 8px;
    box-shadow: var(--shadow-default) !important;
}
.card-item.grid-view .image-holder{
    border-radius: 8px 8px 0px 0px;
}
.card-item.grid-view .content-holder{
    border-radius: 0px 0px 8px 8px;
}


.event-item .event-item-inner{
    border-radius: 8px;;
}


.notes-box{
    box-shadow: var(--shadow-default) !important;
}
.notes-box .content h3{
    font-size: 1.42em;
}

/* award card */
.award-card .award-surround > h3 {
    font-size: 1em !important;
}





/* programss */

/* program banner top card */
.program-banner .meta-container{
    border-radius: 8px !important;
}

.top-note-surround .icon-holder .icon{
    background: var(--bg-color-two) !important;
}



/* interactions */
.article-left ul li c4-bookmark .image-holder.active, .article-left ul li c4-bookmark .image-holder:hover,
.article-left ul li c4-like .image-holder.active, .article-left ul li c4-like .image-holder:hover,
.article-left ul li c4-share .image-holder.active, .article-left ul li c4-share .image-holder:hover{
    color: var(--primary-color-two) !important;
}

.article-left ul li c4-bookmark .image-holder.active i, .article-left ul li c4-bookmark .image-holder:hover i,
.article-left ul li c4-share a .image-holder:hover i,
.article-left ul li c4-like a .image-holder:hover i {
    color: var(--primary-color-one) !important;
}

.program-banner.programs .interactions-holder ul li c4-bookmark .image-holder.active, 
.program-banner.programs .interactions-holder ul li c4-bookmark .image-holder:hover{
    color: var(--primary-color-two) !important;
}
.program-banner.programs .interactions-holder ul li c4-bookmark .image-holder.active i, 
.program-banner.programs .interactions-holder ul li c4-bookmark .image-holder:hover i {
    color: var(--primary-color-one) !important;
}


/* notification panel */
.notifications-surround {
    box-shadow: var(--shadow-default);
    border: 1px solid var(--border-color-one)
}

/* claims page */
#claims-form-container .window,
.notes-box.color-primary{
    box-shadow: var(--shadow-default);
}




/* Assessment overrides */
.assessment-results .top-msg {
    background: #f9f9f9;
}

#quiz-content .quiz-content-surround .question-header .question-type{
    display:none;
}
#quiz-content .quiz-content-surround{
    background: transparent;
    padding:0px;
}
#quiz-group .question-answer-container.quiz-box .column-view li > div a span:not(.radio).answer-description{
    padding-left: 10px;
}
#quiz-group .question-answer-container.quiz-box .column-view li > div a .radio, 
#quiz-group .question-answer-container.quiz-box .column-view li > div a .check{
    display:none;
}

.question-asset-container.border-rounded.bg-white.mb-4 {
    background: transparent !important;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 10px !important;
}
.group-asset-container, .question-asset-container {
    padding-top: 45px;
}

@media (min-width: 575px) {
    #logout-pg #website-logo img {
        max-width: 200px;
        max-height: 45px !important;
    }
}

.assignment-page .window, .assessing-page .window,
.assignment-page .view-tab .accordion, .assessing-page .view-tab .accordion{
    box-shadow: var(--shadow-default) !important;
}

.assignment-page .window .window-footer .btn, 
.assessing-page .window .window-footer .btn{
    padding: 10px 20px !important;
    height: unset;
}
.submission-header .button-control .btn{
    padding: 10px 20px !important;
    height: unset;
}

#tab_profile-assessment .main-body .ngb-accordion .card{
    box-shadow: var(--shadow-default) !important;
}

#quiz-group .question-answer-container.quiz-box .column-view li > div a span:not(.radio).answer-description{
    align-items:center;
}

dropdown-multi-answer .dropdown .dropdown-menu .dropdown-item:hover .check-container-item *{
    color: #fff;
}

/* assessment filters */
assessment-question-filter .filter-container h1 {
    font-size: 1.42em;
}

assessment-question-filter .selection-container .selection,
assessment-question-filter .filter-container > div{
    box-shadow: var(--shadow-default) !important
}

assessment-question-filter .selection.disabled {
    background: #e0e0e0 !important
}

/* forum discussion */
.tax-cat,
.tags-detail-box h3{
    font-size: 14px;
}
.post-list-sec .post-list-box.question-header h1{
    font-size: 2.29em;
}
.post-list-sec .post-list-box.question-header .bottom .ask-question-btn{
    gap: 8px !important;
    border-radius: 48px !important;
    text-transform: uppercase !important;
    line-height: 16.41px;
    /* max-height: 49px; */
    height: unset;
    padding: 8px 20px !important;
    font-size: 14px !important
}

#discussion.program-pg.qa-tab .head .add-post-btn{
    padding: var(--btn-padding-sml);
    font-size: 14px;
}


/* login */
.login-page #login-wrapper .inner form .alternate-login{
    margin-top: 15px;
    padding-top: 15px
}

.login-page #login-wrapper .inner form .alternate-login > .seperator{
    margin-bottom: 10px !important;
}

.login-page #login-wrapper .inner form .alternate-login > p{
    display:none;
}
.login-page #login-wrapper .inner form .alternate-login .other-login a .auth-icon i{
    font-size:30px;
    height: 30px;
    width: 30px;
    margin-right:10px;
}
.login-page #login-wrapper .inner form .alternate-login .or-lbl{
    top: 5px;
}

.login-page #login-wrapper .inner form .alternate-login .other-login{
    margin-bottom:15px;
    flex-wrap: wrap;
    width: 100%;
}

.login-page #login-wrapper .inner form .alternate-login .other-login a{
    border: 1px solid var(--border-color-two);
    padding: 7px 15px;
    border-radius: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--btn-default-color);
    transition: all .3s;
    flex-direction: row;
    background: #fff;
    margin-bottom: 10px;
}
.login-page #login-wrapper .inner form .alternate-login .other-login a .label{
    font-size: 1em;
    font-weight: 500;
}
.login-page #login-wrapper .inner form .alternate-login .other-login a:hover{
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%)
}

.login-page #login-wrapper .inner .lbl-lg-with{
    display:none;
}

.login-page #login-wrapper .inner form .alternate-login .or-lbl span{
    line-height: 17px !important;
    font-size: 14px;
    height:100%;
}

.login-page #login-wrapper .inner form .alternate-login.multi-col .other-login {
    gap: 15px;
    flex-wrap: wrap;
}

.login-page #login-wrapper .inner form .alternate-login.multi-col .other-login a{
    width: calc(50% - 7.5px) !important;
    margin-bottom: 15px;
}

/* comments container */
.article-comments h2{
    font-size: 1.71em;   
}


/* buttons */

.btn.btn-primary:not(.dropdown-toggle),
.btn.round:not(.dropdown-toggle),
.btn.btn-secondary:not(.dropdown-toggle),
.btn.btn-success:not(.dropdown-toggle),
.btn.btn-danger:not(.dropdown-toggle),
.btn.btn-outline-primary:not(.dropdown-toggle),
.btn.btn-outline-secondary:not(.dropdown-toggle),
.qz-btns .finish-btn{
    padding: var(--btn-padding-med);
    gap: 8px !important;
    border-radius: 48px !important;
    text-transform: uppercase !important;
    line-height: 16.41px;
    max-height: 49px;
    font-weight: 500 !important;
}

.btn.btn-outline-secondary,
.btn.btn-secondary{
    border-color: var(--btn-default-color) !important;
    background: #fff !important;
    color: var(--btn-default-color) !important;
}

.btn.btn-primary:not(.disbaled):not(:disabled):not(.prog-bg):hover,
.btn.round:not(.disbaled):not(:disabled):not(.prog-bg):hover{
    border-color: var(--btn-hover-color);
    background: var(--btn-hover-color) !important;
    color: var(--btn-default-txt-color) !important;
}



.btn.btn-outline-primary:not(.disbaled):not(:disabled):hover,
.btn.btn-outline-secondary:not(.disbaled):not(:disabled):hover{
    border-color: var(--btn-hover-color) !important;
    background: #fff !important;
    color: var(--btn-hover-color) !important;
}


.btn.round:not(.disbaled):not(:disabled):hover{
    gap: 8px !important;
    border-radius: 48px !important;
    text-transform: uppercase !important;
}
.btn .fa-chevron-left:before,
.btn .fa-angle-left:before,
.btn .fa-chevron-circle-left:before {
    content: "\f060";
}
.btn .fa-chevron-right:before,
.btn .fa-angle-right:before,
.btn .fa-chevron-circle-right:before {
    content: "\f061"
}

.course-navigations .container .flex-col.navs .btn {
    padding: var(--btn-padding-sml);
    gap: 5px !important;
    border-width: 1px; 
    background: transparent;
    color: var(--btn-default-color) !important;
    border-color: var(--btn-default-color) !important;
}
.course-navigations .container .flex-col.navs .btn:hover {
    border-color: var(--btn-hover-color) !important;
    background: transparent !important;
    color: var(--btn-hover-color) !important
}

/* assessments */
#back-to-filter-btn {
    padding: var(--btn-padding-sml);
    font-size: 14px
}
#back-to-filter-btn i{
    margin-right:8px;
}

#quiz-content.required-question-triggered{
    padding:5px 15px;
}
.assessment-results #download-assessment-report-btn{
    display: none;
    pointer-events:none;
}

/* smaller button sizing */
.upload-resources .file-dropzone button.round,
button.btn.round.browse-resources-btn,
button.btn.btn-submit-comment.btn-primary {
    padding: 8px 20px !important;
    font-size: 14px !important
}

/* profile settings page */
.settings-pg .profile-btn-control .btn {
    padding: 11px 30px;
}
.pf-mainbody .table{
    box-shadow: var(--shadow-default);
}
.week-calendar-carousel .owl-item {
    box-shadow: var(--shadow-default);
}

/* profile awards certificates */
.certificate-detail-modal .modal-content .modal-footer .btn {
    padding: 7px 15px;
    gap: 10px;
}

/* profile taxonomy */
#page_profile_taxonomy .btn.btn-danger.rounded-circle,
.skill-item-container .btn.round {
    padding: var(--btn-padding-sml)
}

/* profile settings */
#page_settings #personal-row > [class^="col"] > div{
    box-shadow: var(--shadow-default)
}

c4-row-group#container-357.A20 > .container{
    background: url(/img/75c478bb-c1a5-4653-b289-142edca38689.png);
    background-repeat: no-repeat;
    background-size: cover important;
}
@media( width <= 767px){
    c4-row-group#container-357.A20 > .container{
        background-position: 100px 70px;
        background-size: 100%;
    }
    .homepage {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media(768px <= width <= 991px){
    c4-row-group#container-357.A20 > .container{
        background-position: 140% 1100%;
        background-size: 90%;
    }
}
@media(992px <= width <= 1199px){
    c4-row-group#container-357.A20 > .container{
        background-position: 103% 33%;
        background-size: 89%;
    }
}
@media(width >= 1200px){
    c4-row-group#container-357.A20 > .container{
        background-position: 103% 33%;
        background-size: 60%;
    }
}

#assessment-header-notes{
    display: block !important;
}

#assessment-header-notes > div{
    margin-bottom: 10px !important;
}

#error-page .row>div h1{
    line-height: 1 !important;
}