:root {
	--CEULwhite: #FFF;
	--CEULbrown: #743c4a;
	--CEULblue: #3d698a;
	--CEULdarkgray: #224c4f;
	--CEULyellow:  #F4DA23  ;
	--CEULred: #A2130A; 
}
.nav-link-menu {
	display: block;
	max-width: 300px;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-link-menu[title] {
	cursor: pointer;
}
.tooltip {
	pointer-events: none !important;
}



.profile-letter {
  background: rgba(244, 218, 35, 1.00);
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #444444;
  display: inline-block;
  font-weight: bold;
  line-height: 2em;
  margin-right: 2px;
  text-align: center;
  width: 1.6em;
  font-size: 9px;
}

html .bg-ceulockeryellow,
html .background-color-ceulockeryellow {
  background-color: rgba(244, 218, 35, 1.00) !important;
  color: rgba(65, 64, 66, 1.00) !important;
}
  
.spoke-bg-yellow {
  background-color: #F4DA23  !important;
}


html .btn-yellow {
    background-color: #F4DA23;
    border-color: #F4DA23 #F4DA23 #F4DA23;
    color:#1C1C1C;
}

.btn-yellow {
    --bs-btn-color
#fff
: #fff;
    --bs-btn-bg: #F4DA23;
    --bs-btn-border-color: #F4DA23;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #F4DA23;
    --bs-btn-hover-border-color: #F4DA23
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #F4DA23;
    --bs-btn-active-border-color: #F4DA23;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #F4DA23;
    --bs-btn-disabled-border-color: #F4DA23;
}


/*****  Homepage Spoke Switcher ******/
/*USER ROLES BACKGROUND COLORS*/
.spoke-bg-holder {
  background-color: #51557f !important;
}

.spoke-bg-provider {
  background-color:  #0c3f0e !important;
}

.spoke-bg-reviewer {
  background-color: #097a83 !important;
}

.spoke-bg-admin {
  background-color: #743c4a !important;
}

.spoke-bg-super {
  background-color: #b00045  !important;
}

.spoke-bg-associate {
  background-color: cyan !important;
}

.spoke-bg-finance {
  background-color: grey !important;
}

.spoke-style {
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 0;
  margin: 0;
  text-align: center;
  font-style: small-caps;
  border-radius: 2px;
}

.cwRed {
  color: red;
  font-weight: bold;
}


/******* Parsley Styles ***********/
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;

  color: #c25d5d;
  font-weight: bold;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

.parsley-required {
  color: #c25d5d;
  font-weight: bold;
}

.parsley-type {
  color: #c25d5d;
  font-weight: bold;
}


/***********************************/




/*USER ROLES BORDER COLORS*/

.spoke-border-holder {
	
  border-color:  #51557f !important;
}

.spoke-border-provider {
  border-color:   #0c3f0e !important;
}

.spoke-border-reviewer {
  border-color:  #097a83 !important;
}

.spoke-border-admin {
  border-color:  #743c4a !important;
}

.spoke-border-super {
  border-color:  #b00045  !important;
}

.spoke-border-associate {
 border-color:  cyan !important;
}

.spoke-border-finance {
  border-color:  grey !important;
}




/***********************************/


html .wizard-progress.wizard-progress-lg ul li,
html.dark .wizard-progress.wizard-progress-lg ul li {
  margin-bottom: 45px;
}

.pbe-modal-title {
  text-align: center;
  padding-bottom: 9px !important;
  margin-top: 4px !important;
  font-weight: bold;
}

.pbe-form-wrapper .required-field {
  color: red !important;
  font-size: 10px;
}

.pbe-progress-bar {
  margin-bottom: 2px;
}

.modal-block {
  max-width: 800px !important;
}


/**********start STEPHEN ADDED NOV16 2025**************/

/* Only applies to toggles with class CEULv2 */

.CEULv2 > section.toggle > label {



    transition: all .15s ease-out;
    /* background: #F4F4F4; */
    /* border-left: 3px solid #CCC; */
    border-radius: 5px;
    /* color: #CCC; */
    display: block;
    font-size: 1.1em;
    min-height: 20px;
    padding: 0px; 
    position: relative;
    cursor: pointer;
    font-weight: 400;
	border: none;
	background: none;
	

}

.CEULv2 > section.toggle > label:before {
    border: none;
    border-left-color: none;
    content: '';
    margin-top: 0px;
    position: absolute;
    right: 0px;
    top: 50%;
}


.CEULv2 > section.toggle > label i.fa-plus {
    display: none;
}

.CEULv2 > section.toggle > label i.fa-minus {
    display: none;
}

.CEULv2 > section.toggle.active > label i.fa-plus {
    display: none;
}

.CEULv2 > section.toggle.active > label i.fa-minus {
    display: none;
}


.CEULv2 .toggle-primary  > .spoke-bg-holder > bg-primary {
  background-color: #51557f !important;
}

.CEULv2 .toggle-primary  > .spoke-bg-provider > bg-primary  {
  background-color:  #0c3f0e !important;
}


.CEULv2 section.toggle > label h4.title,
.CEULv2 .widget-summary .info .amount,
.CEULv2 .widget-summary .summary-footer > a.text-uppercase

{
	color: #ffffff !important;
}

.CEULv2 .widget-summary .summary-footer > a:hover.text-uppercase

{
	color: #848484 !important;
}

.CEULv2 .widget-summary-col-icon .summary-icon > i {
    margin-right: 15px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 51.2px;
    font-size: 3.2rem;
    text-align: center;
    color: #fff;
    border-radius: 55px;
}


.CEULv2 .widget-summary-col-icon .summary-icon > i {
    background-color: rgba(0, 0, 0, 0.1);
}



/**********end STEPHEN ADDED NOV16 2025**************/


/**********start STEPHEN ADDED NOV18 2025**************/



.CEULv2cart .spoke-cart-holder   { 
	background-color: #51557f !important;
	
}


.CEULv2cart .spoke-cart-holder + .card-body  { 
	border-width: 0px 1px 1px 1px !important;
	border-style: solid !important; 
	border-color: #51557f !important;
	
}


 .CEULv2cart  .spoke-cart-provider  { 
	background-color: #0c3f0e !important;
	
}

.CEULv2cart .spoke-cart-provider + .card-body  { 
	border-width: 0px 1px 1px 1px; 
	border-style: solid; 
	border-color: #0c3f0e !important;
	
}



.heading.heading-border.heading-middle-border h2 {
 border-bottom: solid 1px #666666
}


/* Selects the .row that immediately follows a .row containing your specific header */
.row:has(.heading.heading-border.heading-middle-border) + .row {
    padding-left: 20px; /* Example style */
 
}

/*dashboard BADGES*/

.CEULbadge.badge-draft{
	background-color: #666666 !important;
}

.CEULbadge.badge-submitted{
	background-color: #6497C4 !important;
}


.CEULbadge.badge-selfstored{
	background-color: #64A560 !important;
}


.CEULbadge.badge-review{
	background-color: #3B6F9C !important;
}


.CEULbadge.badge-notyetapproved{
	background-color: #C9B800 !important;
}

.CEULbadge.badge-denied{
	background-color: #740103 !important;
}


.CEULbadge.badge-approved{
	background-color: #066000 !important;
}


/*END badges*/

.nav-tabs li .nav-link, .nav-tabs li .nav-link.stats {
	background-color: #F4F4F4 !important ;
}

.nav-tabs li .nav-link.active, .nav-tabs li .nav-link.statsactive, .nav-tabs li .nav-link.stats:active, .nav-tabs li .nav-link:active {
	border-top-color: #00547e !important;
		background-color: #ffffff !important ;
}


.CEULv2list.list.list-icons li {
   
    padding-left: 0px;
}




.CEULv2toggle .toggle > label  {
    background-color: #ffffff !important;
}

/* Hides the FontAwesome icons inside the specific toggle label */
.CEULv2toggle .toggle label i {
    display: none !important;
}


.CEULv2accord1 .accordion-button { 
	
	background-color: #E8E8E8 !important;
	border-bottom: 1px #A9A9A9 solid !important;
    border-left: 1px #A9A9A9 solid !important;
	box-shadow: none !important;
	
}

.CEULv2accord1 .accordion-button:not(.collapsed) { 
	
	background-color: #E8E8E8 !important;
	border-bottom: none !important;
    border-left: 1px #A9A9A9 solid !important;
	box-shadow: none !important;
	
}

.accordion .accordion-flush .CEULv2accord1 {
	
border-left: 1px #A9A9A9 solid !important;
	
	
}

.CEULv2blue {
	color: #00547e !important;
}

.card.card-featured.CEULv2provider {
	 border-color:   #0c3f0e !important;
}


.CEULv2reviewer .accordion-header {
	background-color: #e7e7e7 !important;
	border: solid 1px #d5d5d5 !important;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	
}

.CEULv2reviewer .accordion-header:active, .CEULv2reviewer .accordion-header:hover, .CEULv2reviewer .accordion-header:focus  {
	background-color: #d5d5d5 !important;
	border: solid 1px #d5d5d5 !important;
}


.CEULv2reviewer .accordion-body {

	
	border-left: solid 1px #d5d5d5 !important;
	border-right: solid 1px #d5d5d5 !important;
	border-bottom: solid 1px #d5d5d5 !important;
	
	
}

.CEULv2reviewer .alert-danger {
	background-color: red !important;
	color: #E5E5E5 !important;
	font-weight: 800 !important;
	width: 100%;
	text-align: center;
	border-radius: 20px !important;
	
}

.CEULv2reviewer .alert-danger {
	padding: 3px 0px !important;
}




a.CEULv2help-styled {
    text-decoration: underline !important;
    font-weight: 7600!important;
    color:#F4DA23 !important; /* Standard link blue, optional */
}
div.rounddiv:has(#collapseCEUCEUL019206:not(.show)) {
    
    padding: 5px;
   
}

div.rounddiv:has(div[id*="collapseCEU"].show) {
    border: solid 1px #efefef;
    padding: 5px;
    background-color: #efefef;
    border-radius: 5px;
}


div[id*="collapseCEU"].show .card-body {
    background-color: transparent;
	border-radius: 0;
}


label[for^="answer_"] {
    font-weight: 600;
   
   font-size: 1.5em;
	margin-top: 20px;
}


#profile_data_div.row.widget .col-lg-12.title h2 {
    color: var(--CEULblue);
    font-size: 3.25rem;
    font-weight: 700;
    margin-top: 10px;
}



.cards-title {
	
word-break: keep-all !important;
overflow-wrap: normal !important;
}

.right-align-column {
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
    align-items: center;       /* Centers vertically if needed */
    text-align: right;
}

.CEULv2HelpPage {
}



.CEULv2accord1 .accordion-collapse.show .accordion-body {
    border-left: 1px solid #999999;
	 border-right: 1px solid #999999; 
	 border-bottom: 1px solid #999999; 
    padding-left: 20px;       
	padding-right: 20px;  
	padding-bottom: 20px;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 6px 12px -4px rgba(0,0,0,0.15); /* Bottom Shadow */
}

.CEULv2user .call-to-action-primary {
padding: 0px !important;
	background-color: transparent !important;
	
	
}

.CEULv2user-right {
padding: 5px !important;
	border-top-right-radius: 5px !important;
		border-bottom-right-radius: 5px !important;
	background-color: #743c4a !important;
	color: #ffffff !important;
	
	
}

.CEULv2user-right a {  color: #ffffff !important; 
	text-decoration: none !important;
}


.CEULv2user-left {
padding: 5px 5px 15px 15px !important;
	border-top-left-radius: 5px !important;
		border-bottom-left-radius: 5px !important;
	background-color: #51557f !important;
	
	
}

.CEULv2user-left .call-to-action-content h3, .CEULv2user-left .call-to-action-content p   {
	color: #ffffff !important;
	letter-spacing: 0px !important;
}


.CEULv2user .card-featured-primary {
    border-color: #51557f !important
	
}

/* Default Style (Mobile): Clickable & Styled */
.mobile-call-only {
    text-decoration: underline;
    color: #004480; /* Your theme's link color */
    cursor: pointer;
}

/* Desktop Override: Un-clickable plain text */
@media only screen and (min-width: 768px) {
    .mobile-call-only {
        pointer-events: none; /* Disables the click completely */
        cursor: text;         /* Changes cursor from "hand" to "text" bar */
        text-decoration: none;/* Removes underline */
        color: inherit;       /* Inherits the color of the surrounding text */
    }
}


.courseinterests {
	border-radius: 5px; background-color:#fffae3; color:#171717; padding: 8px; margin-top: 15px;
}

.courseinterests p {
	 color:#171717 !important;
}


/* Specifically hide the Overview/Edit tab navigation within the general tab */
#general-tab .tabs > .nav-tabs {
    display: none !important;
}

/* Remove default tab containers' borders/padding for a cleaner look */
#general-tab .tab-content {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.CEULv2gravatar .thumb-info-inner { font-size: .8em; letter-spacing: 0px;
	
	
}


.CEULv2adminsettings .card-body {
	
	background-color: #E6E6E6 !important;
	border-left: solid  1px #D5D5D5 !important;
		border-right: solid  1px #D5D5D5 !important;
		border-bottom: solid  1px #D5D5D5 !important;
	
}


form > .CEULv2form .bg-primary, form > .CEULv2form .bg-secondary {background-color:#666666 !important;
}

.holder_profile_form > .CEULv2form .bg-primary, .holder_profile_form > .CEULv2form .bg-secondary {background-color:#666666 !important;
}

/* Fix for CEULv2 Reviewer Form Badges extending past margin */
.CEULv2form .form-label .badge {
    white-space: normal !important;  /* Forces text to wrap instead of staying on one line */
    text-align: left;                /* Ensures wrapped text aligns left for readability */
    line-height: 1.4;                /* Adds slight spacing between wrapped lines */
    display: block;                  /* Ensures the badge container respects the parent width */
    width: 100%;                     /* Forces the badge to fill the label container */
}


.CEULv2providersettingtab .card-settings .card-header {
    background-color: #0c3f0e !important; 
	
	
	
}

.CEULv2providersettingtab .card-settings .card-header h2.card-title {

	color: #ffffff !important;
	
	
}

.CEULv2providersettingtab .badge-light {
	background-color:#666666 !important;
	
}


.bucket_div > h3 {
    font-size: 1.2 rem !important;
    font-weight: 500 !important;
    background-color: #555555 !important;
    color: white !important;
    padding: 20px !important;
}

.popover {
	
	background-color:#2C2C2C !important;
	
	
}

.popover-body {
	
	
	color: #ffffff !important;
	
}







/***************************************/
/***************************************/
/***************************************/
/***************************************/
/***************************************/
/***************************************/

/***************************************/
/*Mobile CSS changes by Stephen*/


@media only screen and (max-width: 767px) {
  
/* Default Style (Mobile): Clickable & Styled */
.mobile-call-only {
    text-decoration: underline;
    color: #004480; /* Your theme's link color */
    cursor: pointer;
}
	

	
	
	
	
.userbox .profile-picture {
        display:inline !important; 
    }
	
	
.userbox .profile-info  {margin: -3px 5px 0px 3px !important;
}

.userbox .name, .userbox .role {
        max-width: 135px !important;
       
    }
	
.userbox {
        float: left;
        position: relative;
        margin: 1px 0px 0px 1px !important;
	padding-left: 2px !important;
    }

	


.accordion {

    --bs-accordion-btn-padding-x: 5px !important;
    --bs-accordion-btn-padding-y: 2px !important;
	
}
	
button {
    
    line-height:1.1 !important;	
	
	}

.card-body:has(.widget-summary) {
    padding: 0.4rem !important;
}
	
.card-body .amount { font-size: 0.8rem !important;
	}
	
	
.card-body .widget-summary .summary-icon {
    margin-right: 5px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    
    font-size: 2.2rem;
	
	
	
	
		}
	
.CEULv2 .widget-summary-col-icon .summary-icon > i {
    margin-right: 15px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    
    font-size: 2.2rem;
	}
	
	
.row .col-lg-12 .table { margin-left: -30px !important;
		
	} 	
	
.row .col-lg-12 .table.table-hover { margin-left: 0px !important;
		
	} 	
	

.export-form-area
 {
    padding: 15px !important;
	} 

.export-title {
    font-size: 20px !important;

		} 
	
	
.export-left-box i
 {
    font-size: 38px !important;

}	
	
.export-left-box
 {
    font-size: 38px !important;
   width: 50px !important;
	 padding: 40px 5px !important;
}	
	.export-left-box .card-header-icon {
   width: 60px !important;
 height: 60px !important;
	}
	
.cards-title {
	
word-break: keep-all !important;
overflow-wrap: normal !important;
}	
    /*end phone only*/	

	
	
	
    /*start tablet also*/
	
}	


@media (max-width: 991px) {
.header-btn-collapse-nav,
    .header-btn-collapse-nav:hover,
    .header-btn-collapse-nav:focus,
    .header-btn-collapse-nav:active,
    .header-btn-collapse-nav.active,
    .header-btn-collapse-nav[aria-expanded="true"] {
        background-color: #00547e !important; /* Keeps background transparent */
        border-color: #00547e !important;       /* Forces dark grey border */
        color: #ffffff !important;              /* Forces dark grey icon */
        outline: none !important;               /* Removes browser focus outline */
        box-shadow: none !important;            /* Removes Bootstrap blue glow */
    }	

	
	
	
	
html.sidebar-left-big-icons .sidebar-left {
        width: 60px;
    }
	
	  }
    /*end tablet also*/



/* Force Mobile Menu Above Sidebar */
    @media only screen and (max-width: 1079px) {
        
        /* 1. Raise the Header container above the Sidebar */
        .header {
            z-index: 9999 !important;
            position: relative; /* Ensure z-index applies */
        }

        /* 2. Ensure the specific menu dropdown is on top */
        #main-menu-nav {
            z-index: 10000 !important;
            position: relative; 
            background-color: #f6f6f6; /* Ensures the menu isn't transparent */
        }
        
        /* 3. Optional: Lower sidebar index if the above doesn't work immediately */
        aside.sidebar-left {
            z-index: 100 !important; 
        }
    }
@media (max-width: 991px) {
    #main-menu-nav.collapse.show {
        /* Adjust '60px' to match the actual height of your yellow header bar */
        top: 60px !important;       
        
        /* Calculate height so it doesn't scroll past the bottom */
        height: calc(100vh - 60px) !important; 
        
        /* Remove the extra padding since the header isn't covering the top items anymore */
        padding-top: 20px; 
    }
	
.header.header-nav-menu .header-nav-main nav > ul li {
        
        padding: 5px 0 !important;
	}
	
.header.header-nav-menu .header-nav-main nav > ul li a {
	
	font-size: 1.3rem !important;
	line-height: 1.6em !important;
	}
	
.header.header-nav-menu .header-nav-main {
        
        max-height: 450px !important;
	
	
}


/*end all mobile*/

/***************************************/