/*
Previous update: April 2020
Most current update: September 16th, 2021
*/

/*********************************************************************/
/***** DESIGN TOOLS CORE THEME IMPORT ********************************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/*********************************************************************/

@import 'https://uclaextension.evaluationkit.com/canvas/css';

/*********************************************************************/
/********************** Start UXO Visual Improvements ****************/
/*********************************************************************/

.ic-DashboardCard__box__header::after {
  content: "- Courses are published automatically 2 days before the start date";
  display: block;
  margin-left: 5px;   /* Adjust spacing as needed */
  font-size: 0.8em;   /* Reduced font size */
  font-weight: bold;  /* Bold text */
  color: #666;
  margin-top: 4px;
}

/*
.header-bar h1::after {
  content: "- Courses are available 2 days before the course start date until 30 days after the course end date (the first 14 days after the end date are full access; the rest are read-only)"; /* Replace with appropriate text */
  display: block;*/
  margin-left: 5px;   /* Adjust spacing as needed */
  font-size: 0.8em;   /* Reduced font size */
  font-weight: bold;  /* Bold text */
  color: #666;        /* Adjust the color */
  margin-top: 4px;    /* Space between the h1 and the pseudo-element */
}



/********    PAGES - Styles Page Titles   ********/

.pages.show .page-title {
    border-bottom: solid 6px #DAEBFE; 
    width: auto;
    font-size: 2.0em;
    letter-spacing: 1.25px;
    padding: 21px 18px 21px 20px;
    font-weight: 600;  
    margin: 0px 0 55px 0;
    color: white;
    background-image: linear-gradient(90deg, #2c73b7 0%, #3686c9 74%); } 


.pages .header-bar-outer-container {
    min-height: 0px; }

.header-bar {
    border-bottom: 1px solid whitesmoke; }



/********    PAGES - Styles Headings & Lists  ********/

.pages.show .show-content h2 {
    font-size: 1.7em;
    border-bottom: solid 5px whitesmoke;
    letter-spacing: 1.25px;
    padding-bottom: 8px;
    margin-top: 10px;
    margin-bottom: 20px; }


.pages.show .show-content h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    letter-spacing: 1.25px; }

.pages.show .show-content h4 {
    margin-top: 25px;
    margin-bottom: 10px;
    letter-spacing: 1.25px;
    font-size: 1.3em; }    


.pages.show .show-content ul {
    line-height: 1.6em; } 

 .pages.show .show-content ol {
    line-height: 1.6em; }    
  
.pages.show .show-content p {
    line-height: 1.65em; }   


.pages.show .show-content img {
    vertical-align: middle;
    padding-bottom: 3px; }   



 /********    PAGES - Styles Footer  ********/    

.pages.show .module-sequence-footer .module-sequence-footer-content {
    border-top: 8px solid;
    border-image: linear-gradient(45deg, rgb(44,115,183), rgb(54,134,201)) 1;
    margin-left: 12px;
    margin-right: 25px; }


#wiki_page_show {
    padding-bottom: 30px;}   



/********    ASSIGNMENTS - Styles Headings & Lists  ********/


#assignment_show .assignment-title {
    border-bottom: solid 6px #DAEBFE;
    width: auto;
    font-size: 0.9em;
    letter-spacing: 1.0px;
    padding: 21px 18px 21px 20px;
    font-weight: 600;
    margin: 0px 0 0px 0;
    color: white;
    background-image: linear-gradient(90deg, #2c73b7 0%, #3686c9 74%); } 


#assignment_show .student-assignment-overview {
    padding: 10px 25px 10px 25px;
    border-top: 0px;
    border-top: 0px;
    border-bottom: 0px;
    background: whitesmoke;
    margin: 0 0 45px 0;  }   


.description ul {
    line-height: 1.6em; } 

.description ol {
    line-height: 1.6em; } 


#assignment_show .description.teacher-version {
    border: 1.5px solid #c7cdd1; }


/* Assignment Rubrics */

.rubric_container {   
    margin-top: 35px; }

.rubric_container .rubric_title {
    font-weight: 600;
    letter-spacing: 0.75px;
    padding: 12px; }



/********    QUIZZES - Styles Headings & Lists  ********/

#quiz_show .description ul { 
    line-height: 1.6em; } 

#quiz_show .discussion-section ul {
    line-height: 1.6em; } 

#quiz_show .quiz-header #quiz_title {
    border-bottom: solid 6px #DAEBFE;
    width: auto;
    font-size: 1.5em;
    letter-spacing: 1.0px;
    padding: 21px 18px 21px 20px;
    font-weight: 500;
    margin: 0px 0 0px 0;
    color: white;
    background-image: linear-gradient(90deg, #2c73b7 0%, #3686c9 74%); } 


#quiz_show ul#quiz_student_details { 
    padding: 10px 25px 10px 25px;
    font-size: 1.0em;
    border-top: 0px;
    border-top: 0px;
    border-bottom: 0px;
    background: whitesmoke;
    margin: 0 0 45px 0;  }   


#quiz_show .description.teacher-version {
    border: 1.5px solid #c7cdd1; }

#quiz_show .user_content, .mceContentBody {
    padding-top: 25px;
}


/********    DISCUSSIONS - Styles Headings & Lists ********/

.discussion-section ol {
    line-height: 1.6em; } 

.discussion-section ul {
    line-height: 1.6em; }  


div#discussion-managebar.toolbarView .headerBar {
    border-bottom: solid 6px #DAEBFE;
    border-top: none;
    border-right: none;
    border-left: none;
    width: auto;
    font-size: 1.5em;
    letter-spacing: 1.0px;
    font-weight: 500;
    margin: 0px 0 0px 0;
    color: white;
    background-image: linear-gradient(90deg, #2c73b7 0%, #3686c9 74%); } 


.topic h1.discussion-title {

    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 5px; }


.topic .entry-content .discussion-fyi {
    color: #fff;
    font-weight: 600; }

.topic .entry-content .discussion-section .discussion-fyi {
    display: none; }

.topic .entry-content .avatar {
    display: none; }

.topic .entry-content .discussion-subtitle a {
    display: none;  } 


/********    HOMEPAGE - Styles Headings & Lists ********/


.uclahomebanner {

    padding: 1.5% 2.5% 1.5% 1.5%; 
    text-align: right; 
    overflow: hidden; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    background-image: linear-gradient(90deg, #2c73b7 0%, #3686c9 74%);
    border-bottom: solid 6px #DAEBFE;    }

.uclahomelogo {

content:url("https://storage.googleapis.com/veeassets/Homepage/UCLA_Logo.png");
float: left; 
min-width: 17%; 
max-width: 17%;
width: 120; 
height: 28; }




/********    

COURSE THUMBNAILS - Removes Default Color Overlays   - OFF 

div.ic-DashboardCard__header_hero { 
    opacity: 0!important; }   


********/



/********    

TESTING AREA

/* .discussion-section discussion-assignment-section alert alert-info {
    background-color: whitesmoke;

}

#quiz_show .description.teacher-version {
    border: 1.5px solid #c7cdd1;  

 
#assignment_show .with-right-side #right-side-wrapper {
    display: none;
}   

********/

/*********************************************************************/
/********************** End UxO Visual Improvements ******************/
/*********************************************************************/




/*********************************************************************/
/***** BEGIN DESIGN TOOLS THEME CUSTOMIZATIONS ***********************/
/*********************************************************************/
/* Default Colors for find/replace */
/* Default Dark = #3284bf */
/* Default Medium Grey = dimgray */
/* Default Light Grey = whitesmoke */
/* Light Option 1 = #ffe800 */
/* Light Option 2 = #00a5e5 */
/* Dark Accent 1 = firebrick */

/*********************************************************************/
/*****    APPLE THEME   **********************************************/

/* Hide SYLLABUS & CONFERENCE Menu Items - April 8 2020 */

nav ul#section-tabs li a.syllabus, nav ul#section-tabs li a.conferences { 
	display: none; } 

/* END Hide SYLLABUS & CONFERENCE Menu Items */

#kl_wrapper_3.kl_apple #kl_banner h2 {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_apple #kl_banner #kl_banner_left .kl_mod_num {
  color: #3284bf;
}
#kl_wrapper_3.kl_apple #kl_banner #kl_banner_left:before {
  color: #fff;
}
#kl_wrapper_3.kl_apple #kl_banner .kl_subtitle {
  color: #000;
  border: 1px solid #3284bf;
  background-color: whitesmoke;
}
#kl_wrapper_3.kl_apple #kl_banner #kl_description {
  border: #3284bf 1px solid;
}
#kl_wrapper_3.kl_apple h3:not(.ui-state-default) {
  border: 1px solid dimgray;
  background: dimgray;
  color: #fff;
}
#kl_wrapper_3.kl_apple h4:not(.ui-state-default),
#kl_wrapper_3.kl_apple h5 {
  border: 1px solid dimgray;
}
#kl_wrapper_3.kl_apple #kl_navigation ul {
  background-color: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_apple #kl_navigation li a,
#kl_wrapper_3.kl_apple #kl_navigation li a:hover,
#kl_wrapper_3.kl_apple #kl_navigation li a:focus,
#kl_wrapper_3.kl_apple #kl_navigation li a:visited {
  color: #fff;
}
#kl_wrapper_3.kl_apple #kl_modules {
  border: 1px solid #3284bf;
}
#kl_wrapper_3.kl_apple > div > i {
  background-color: dimgray;
  color: #fff;
}
#kl_wrapper_3.kl_apple h3:not(.ui-state-default) i {
  color: #fff;
}

/*********************************************************************/
/*****    BASIC BAR THEME    *****************************************/

#kl_wrapper_3.kl_basic_bar #kl_banner h2 {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_basic_bar #kl_banner .kl_subtitle {
  color: #3284bf;
  border-color: #3284bf;
  background-color: #fff;
}
#kl_wrapper_3.kl_basic_bar #kl_banner #kl_description {
  border-color: #000;
  background-color: #fff;
}
#kl_wrapper_3.kl_basic_bar h3:not(.ui-state-default) {
  border-bottom-color: lightgray;
}

/*********************************************************************/
/*****    BASIC COLOR BANNER NAV THEME    ****************************/

#kl_wrapper_3.kl_basic_color #kl_banner,
#kl_wrapper_3.kl_basic_color_panel_nav #kl_banner {
    background-color: #3284bf;
    color: #FFF;
}
#kl_wrapper_3.kl_basic_color #kl_banner #kl_banner_left,
#kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_banner_left {
   border-right: 3px solid #fff;
}
#kl_wrapper_3.kl_basic_color #kl_banner .kl_subtitle,
#kl_wrapper_3.kl_basic_color_panel_nav #kl_banner .kl_subtitle {
   background-color: #fff;
   color: #3284bf;
   border: 2px solid #3284bf;
}
#kl_wrapper_3.kl_basic_color #kl_banner #kl_description,
#kl_wrapper_3.kl_basic_color_panel_nav #kl_banner #kl_description {
   border-top: 3px solid #fff;
}
#kl_wrapper_3.kl_basic_color #kl_navigation ul li {
   background-color: #3284bf;
   color: #fff;
}

#kl_wrapper_3.kl_basic_color #kl_navigation ul li a {
   border-bottom: 3px solid #fff;
}
#kl_wrapper_3.kl_basic_color #kl_navigation ul li a,
#kl_wrapper_3.kl_basic_color #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_basic_color #kl_navigation ul li a:focus,
#kl_wrapper_3.kl_basic_color #kl_navigation ul li a:visited {
    color: #fff;
}
/* BASIC COLOR PANEL NAVIGAION */
#kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation ul li a {
   /*color:  #0088CC;*/
}
#kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation ul li a:hover {
    /*color: #0088CC;*/
}
#kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation li a:visited {
   /*color: #0088CC;*/
}
/* Media Queries w/ & w/out Course Menu Collapsed */
@media screen and (min-width: 640px) {
    #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation ul {
        background-color: rgba(255, 255, 255, 0.75);
    }
    #kl_wrapper_3.kl_basic_color_panel_nav #kl_navigation ul li a:hover {
        background: #fff;
    }
}

/*********************************************************************/
/*****    BOOKMARK THEME      ****************************************/

#kl_wrapper_3.kl_bookmark #kl_banner h2 {
   background-color: #3284bf;
   color: #FFF;
}
#kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left {
    border-right: 3px solid #fff;
}
#kl_wrapper_3.kl_bookmark #kl_banner #kl_banner_left .kl_mod_num {
    color: #3284bf;
}
#kl_wrapper_3.kl_bookmark #kl_banner .kl_subtitle {
    color: #fff;
    background-color: firebrick;
}
#kl_wrapper_3.kl_bookmark h3:not(.ui-state-default) {
    background-color: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_bookmark > div > i {
    background-color: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_bookmark h4:not(.kl_panel_heading),
#kl_wrapper_3.kl_bookmark h5:not(.kl_panel_heading) {
    background-color: dimgray;
    color: #fff;
}
#kl_wrapper_3.kl_bookmark #kl_banner #kl_description {
    border: 1px solid #3284bf;
}
#kl_wrapper_3.kl_bookmark #kl_navigation ul li a {
    background: #fff;
    color: #3284bf;
    border: 1px solid #eaeaea;
}
#kl_wrapper_3.kl_bookmark .kl_quick_check,
#kl_wrapper_3.kl_bookmark #kl_modules .ui-tabs-panel {
    background: #fff;
}

/*********************************************************************/
/***** BOX LEFT THEMES              **********************************/

/* BASE THEME */
#kl_wrapper_3.kl_box_left h2 {
  border-bottom: 2px solid lightgray;
}
#kl_wrapper_3.kl_box_left h3:not(.ui-state-default) {
  border-bottom: 1px solid lightgray;
  border-top: 1px solid lightgray;
}
#kl_wrapper_3.kl_box_left h3:not(.ui-state-default) i {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_box_left #kl_modules div.kl_module_content h3 {
  border: 1px solid lightgray;
}
#kl_wrapper_3.kl_box_left #kl_banner #kl_description {
  background: #fff;
  border: 1px solid lightgray;
}
#kl_wrapper_3.kl_box_left > div > i {
  color: #fff;
}
#kl_wrapper_3.kl_box_left #kl_banner #kl_banner_left {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_box_left > div > i {
  background: #3284bf;
}
#kl_wrapper_3.kl_box_left #kl_navigation ul li a,
#kl_wrapper_3.kl_box_left #kl_navigation ul li a:visited {
  background: #fff;
  color: #000;
  border: 1px solid #ffe800;
}
#kl_wrapper_3.kl_box_left #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_box_left #kl_navigation ul li a:focus {
 background: #ffe800;
 color: #000;
}

/* VARIATION #2 */
#kl_wrapper_3.kl_box_left.variation_2 #kl_banner #kl_banner_left {
  background: #00a5e5;
  color: #000;
}
#kl_wrapper_3.kl_box_left.variation_2 > div > i {
  background: #00a5e5;
  color: #000;
}
#kl_wrapper_3.kl_box_left.variation_2 h3:not(.ui-state-default) i {
  background: #00a5e5;
  color: #000;
}
#kl_wrapper_3.kl_box_left.variation_2 #kl_navigation ul li a,
#kl_wrapper_3.kl_box_left.variation_2 #kl_navigation ul li a:visited {
  background: #fff;
  color: #000;
  border: 1px solid #ffe800;
}
#kl_wrapper_3.kl_box_left.variation_2 #kl_navigation ul li a:focus,
#kl_wrapper_3.kl_box_left.variation_2 #kl_navigation ul li a:hover {
  background: #ffe800;
  color: #000;
}

/* VARIATION #3 */
#kl_wrapper_3.kl_box_left.variation_3 #kl_banner #kl_banner_left {
  background: #ffe800;
  color: #000;
}
#kl_wrapper_3.kl_box_left.variation_3 > div > i {
  background: #ffe800;
  color: #000;
}
#kl_wrapper_3.kl_box_left.variation_3 h3:not(.ui-state-default) i {
  background: #ffe800;
  color: #000;
}
#kl_wrapper_3.kl_box_left.variation_3 #kl_navigation ul li a,
#kl_wrapper_3.kl_box_left.variation_3 #kl_navigation ul li a:visited {
   background: #fff;
   color: #000;
   border: 1px solid #ffe800;
}
#kl_wrapper_3.kl_box_left.variation_3 #kl_navigation ul li a:focus,
#kl_wrapper_3.kl_box_left.variation_3 #kl_navigation ul li a:hover {
  background: #ffe800;
  color: #000;
}

/*********************************************************************/
/***** CIRCLE-LEFT THEME *********************************************/

/* BASE THEME */
#kl_wrapper_3.kl_circle_left #kl_banner_left {
    border: 5px solid #fff;
}
#kl_wrapper_3.kl_circle_left h3:not(.ui-state-default) {
    background-color: #fff;
}
#kl_wrapper_3.kl_circle_left > div > h3:not(.ui-state-default) i,
#kl_wrapper_3.kl_circle_left #kl_modules div.kl_module_content h3 i  {
    border: 5px solid #fff;
}
#kl_wrapper_3.kl_circle_left #kl_navigation ul li i {
    border: 3px solid #fff;
    background: #ffe800;
    color: #3284bf;
}
#kl_wrapper_3.kl_circle_left,
#kl_wrapper_3.kl_circle_left #kl_banner .kl_subtitle,
#kl_wrapper_3.kl_circle_left #kl_banner #kl_description,
#kl_wrapper_3.kl_circle_left h3:not(.ui-state-default),
#kl_wrapper_3.kl_circle_left h4:not(.kl_panel_heading),
#kl_wrapper_3.kl_circle_left h5,
#kl_wrapper_3.kl_circle_left #kl_banner_image img {
    border-color: #ffe800;
}
#kl_wrapper_3.kl_circle_left #kl_banner_left,
#kl_wrapper_3.kl_circle_left h3 i,
#kl_wrapper_3.kl_circle_left > div > i {
    background: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_circle_left #kl_navigation ul li a,
#kl_wrapper_3.kl_circle_left #kl_navigation ul li a {
    background: #3284bf;
    color: #FFF;
}
#kl_wrapper_3.kl_circle_left #kl_banner h2 {
    background: #ffe800;
    color: #000;
}

/* Variation 2 */
#kl_wrapper_3.kl_circle_left.variation_2,
#kl_wrapper_3.kl_circle_left.variation_2 #kl_banner .kl_subtitle,
#kl_wrapper_3.kl_circle_left.variation_2 #kl_banner #kl_description,
#kl_wrapper_3.kl_circle_left.variation_2 #kl_banner_image img {
    border-color: #00a5e5;
}
#kl_wrapper_3.kl_circle_left.variation_2 h4:not(.kl_panel_heading),
#kl_wrapper_3.kl_circle_left.variation_2 h5,
#kl_wrapper_3.kl_circle_left.variation_2 h3:not(.ui-state-default) {
    border-color: #3284bf;
}
#kl_wrapper_3.kl_circle_left.variation_2 #kl_banner_left,
#kl_wrapper_3.kl_circle_left.variation_2 h3 i,
#kl_wrapper_3.kl_circle_left.variation_2 > div > i {
    background: #00a5e5;
    color: #000;
}
#kl_wrapper_3.kl_circle_left.variation_2 #kl_navigation ul li i {
    background: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_circle_left.variation_2 #kl_navigation ul li a,
#kl_wrapper_3.kl_circle_left.variation_2 #kl_navigation ul li a {
    background: #00a5e5;
    color: #000;
}
#kl_wrapper_3.kl_circle_left.variation_2 #kl_banner h2 {
    background: #3284bf;
    color: #FFF;
}

/* Variation 3 */
#kl_wrapper_3.kl_circle_left.variation_3,
#kl_wrapper_3.kl_circle_left.variation_3 #kl_banner .kl_subtitle,
#kl_wrapper_3.kl_circle_left.variation_3 #kl_banner #kl_description,
#kl_wrapper_3.kl_circle_left.variation_3 #kl_banner_image img {
    border-color: #ffe800;
}
#kl_wrapper_3.kl_circle_left.variation_3 h4:not(.kl_panel_heading),
#kl_wrapper_3.kl_circle_left.variation_3 h5,
#kl_wrapper_3.kl_circle_left.variation_3 h3:not(.ui-state-default) {
    border-color: #3284bf;
}
#kl_wrapper_3.kl_circle_left.variation_3 #kl_banner_left,
#kl_wrapper_3.kl_circle_left.variation_3 h3:not(.ui-state-default) i,
#kl_wrapper_3.kl_circle_left.variation_3 > div > i {
    background: #ffe800;
    color: #000;
}
#kl_wrapper_3.kl_circle_left.variation_3 #kl_navigation.kl_active a,
#kl_wrapper_3.kl_circle_left.variation_3 #kl_navigation ul li i {
    background: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_circle_left.variation_3 #kl_navigation ul li a,
#kl_wrapper_3.kl_circle_left.variation_3 #kl_navigation ul li a {
    background: #ffe800;
    color: #000;
}
#kl_wrapper_3.kl_circle_left.variation_3 #kl_banner h2 {
    background: #3284bf;
    color: #FFF;
}

/*********************************************************************/
/*****    CIRCLES OVERLAP THEME        *******************************/

/* This one still needs a lot of work */
#kl_wrapper_3.kl_circles_overlap #kl_banner #kl_banner_right {
    color: #696969;
    background: rgba(255, 255, 255, 0.68);
}
#kl_wrapper_3.kl_circles_overlap #kl_banner .kl_subtitle {
    background: rgba(255, 255, 255, 0.72);
}
#kl_wrapper_3.kl_circles_overlap #kl_banner #kl_description {
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.42);
}
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a,
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover,
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a:focus,
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a:visited {
 color: #fff;
}
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a {
    background-color: #3284bf;
}
#kl_wrapper_3.kl_circles_overlap > div > i,
#kl_wrapper_3.kl_circles_overlap h3:not(.ui-state-default) i{
    background-color: dimgray;
    color: #fff;
}
#tinymce.kl_mce_visual_blocks #kl_wrapper_3.kl_circles_overlap #kl_navigation li a,
#kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a,
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover {
    color: #fff;
    background: dimgray !important;
}
#tinymce.kl_mce_visual_blocks #kl_wrapper_3.kl_circles_overlap #kl_navigation li a i,
#kl_wrapper_3.kl_circles_overlap #kl_navigation.kl_active li a i,
#kl_wrapper_3.kl_circles_overlap #kl_navigation li a:hover i {
    background-color: dimgray;
}

/*********************************************************************/
/***** COLORED HEADINGS & COLORED HEADINGS BOX LEFT THEMES  **********/

/* SHARED */
#kl_wrapper_3.kl_colored_headings_box_left > div,
#kl_wrapper_3.kl_colored_headings > div {
  background-color: #fff;
  border: 1px solid lightgray;
}

#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation ul,
#kl_wrapper_3.kl_colored_headings #kl_navigation ul {
  background-color: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:hover,
#kl_wrapper_3.kl_colored_headings #kl_navigation li a:hover {
  color: #fff;
  background-color: #3e3e3e;
  -moz-box-shadow:    inset 0 0 3px #fff;
  -webkit-box-shadow: inset 0 0 3px #fff;
  box-shadow:         inset 0 0 3px #fff;
}

/* With Banner */
#kl_wrapper_3.kl_colored_headings_box_left #kl_banner {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_colored_headings_box_left #kl_banner #kl_banner_left {
  background-color: #fff;
  color: #696969;
  border-bottom: 5px solid #696969;
}
#kl_wrapper_3.kl_colored_headings_box_left #kl_banner .kl_subtitle {
  background-color: #fff;
  color: #000;
}
/* Without default banner */
#kl_wrapper_3.kl_colored_headings #kl_banner {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_colored_headings #kl_banner #kl_banner_left {
  background-color: #fff;
  color: #696969;
}
#kl_wrapper_3.kl_colored_headings #kl_banner .kl_subtitle {
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
}
#kl_wrapper_3.kl_colored_headings #kl_banner #kl_description {
  background-color: #fff;
  color: #000;
}
#kl_wrapper_3.kl_colored_headings #kl_navigation li a,
#kl_wrapper_3.kl_colored_headings #kl_navigation li a:hover,
#kl_wrapper_3.kl_colored_headings #kl_navigation li a:focus,
#kl_wrapper_3.kl_colored_headings #kl_navigation li a:visited,
#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a,
#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:hover,
#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:focus,
#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation li a:visited {
  color: #fff;
}
#kl_wrapper_3.kl_colored_headings_box_left #kl_navigation i,
#kl_wrapper_3.kl_colored_headings #kl_navigation i {
  background: #fff;
  color: #696969;
  border-bottom: 5px solid #696969;
}
#kl_wrapper_3.kl_colored_headings_box_left #kl_modules .ui-widget-content,
#kl_wrapper_3.kl_colored_headings #kl_modules .ui-widget-content {
  border: 1px solid lightgray;
  background: #fff;
}

/* Default Headings */
#kl_wrapper_3.kl_colored_headings_box_left #kl_modules h3,
#kl_wrapper_3.kl_colored_headings #kl_modules h3,
#kl_wrapper_3.kl_colored_headings_box_left > div > h3:not(.ui-state-default),
#kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) {
  background-color: #747474;
  border-top: 5px solid #4e4e4e;
  color: #fff;
}
#kl_wrapper_3.kl_colored_headings_box_left > div > h3 i,
#kl_wrapper_3.kl_colored_headings > div > h3:not(.ui-state-default) i,
#kl_wrapper_3.kl_colored_headings_box_left #kl_modules h3 i,
#kl_wrapper_3.kl_colored_headings #kl_modules h3:not(.ui-state-default) i {
  background-color: #fff;
  color: #696969;
  border-bottom: 4px solid #696969;
}
/* Objectives Blue*/
#kl_wrapper_3.kl_colored_headings_box_left #kl_objectives h3:not(.ui-state-default),
#kl_wrapper_3.kl_colored_headings #kl_objectives h3:not(.ui-state-default) {
  background-color: #337cac;
  border-top: 5px solid #1b5378;
  color: #fff;
}
/* Readings Red */
#kl_wrapper_3.kl_colored_headings_box_left #kl_readings h3:not(.ui-state-default),
#kl_wrapper_3.kl_colored_headings #kl_readings h3:not(.ui-state-default) {
  background-color: #d24536;
  border-top: 5px solid #ae3225;
  color: #fff;
}
/* Lectures Green */
#kl_wrapper_3.kl_colored_headings_box_left #kl_lectures h3:not(.ui-state-default),
#kl_wrapper_3.kl_colored_headings #kl_lectures h3:not(.ui-state-default) {
  background-color: #28834e;
  border-top: 5px solid #176c3b;
  color: #fff;
}
/* Activities Orange */
#kl_wrapper_3.kl_colored_headings_box_left #kl_activities h3:not(.ui-state-default),
#kl_wrapper_3.kl_colored_headings #kl_activities h3:not(.ui-state-default) {
  background-color: #bf5900;
  border-top: 5px solid #913a01;
  color: #fff;
}
/* Assignments Purple */
#kl_wrapper_3.kl_colored_headings_box_left #kl_assignments h3:not(.ui-state-default),
#kl_wrapper_3.kl_colored_headings #kl_assignments h3:not(.ui-state-default) {
  background-color: #9b59b6;
  border-top: 5px solid #8e44ad;
  color: #fff;
}
/* Other Styles */
#kl_wrapper_3.kl_colored_headings_box_left h4,
#kl_wrapper_3.kl_colored_headings h4 {
  border-bottom: 1px solid #E0E0E0;
  color: #000;
}
#kl_wrapper_3.kl_colored_headings_box_left h5,
#kl_wrapper_3.kl_colored_headings h5 {
  border-bottom: 1px solid #E0E0E0;
  color: #000;
}
#kl_wrapper_3.kl_colored_headings_box_left .well,
#kl_wrapper_3.kl_colored_headings .well {
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/*********************************************************************/
/***** EMTA THEME         ********************************************/

#kl_wrapper_3.kl_emta {
  color: #000;
}
#kl_wrapper_3.kl_emta #kl_banner h2 {
  background-color: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_emta #kl_banner #kl_banner_left {
  border-right: 2px solid #fff;
}
#kl_wrapper_3.kl_emta #kl_banner #kl_banner_left .kl_mod_num{
  color: #3284bf;
}
#kl_wrapper_3.kl_emta #kl_banner {
  background: #CACDCF;
}
#kl_wrapper_3.kl_emta #kl_banner #kl_description {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_emta h3:not(.ui-state-default) {
  color: #000;
  background: #CACDCF;
}
#kl_wrapper_3.kl_emta #kl_navigation ul {
  background-color: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_emta #kl_navigation li a,
#kl_wrapper_3.kl_emta #kl_navigation li a:hover,
#kl_wrapper_3.kl_emta #kl_navigation li a:focus,
#kl_wrapper_3.kl_emta #kl_navigation li a:visited {
  color: #fff;
}
#kl_wrapper_3.kl_emta #kl_modules {
  border: 1px solid #3284bf;
}

/********************************************************************/
/**** FLAT SECTIONS & FLAT SECTIONS MAIN THEMES *********************/

/**** FLAT SECTIONS MAIN ****/
#kl_wrapper_3.kl_flat_sections_main #kl_banner {
    background: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_banner_left{
    background-color: #fff;
    color: #696969;
}
#kl_wrapper_3.kl_flat_sections_main #kl_banner .kl_subtitle {
   background: #fff;
   color: black;
}
#kl_wrapper_3.kl_flat_sections_main #kl_banner #kl_description {
   border-top: 2px solid #fff;
}

/**** FLAT SECTIONS ****/
#kl_wrapper_3.kl_flat_sections #kl_banner {
    background: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_flat_sections #kl_banner h2 {
   border-top: 1px solid #fff;
}
#kl_wrapper_3.kl_flat_sections #kl_banner #kl_banner_left{
   background-color: #fff;
   color: #696969;
}
#kl_wrapper_3.kl_flat_sections #kl_banner .kl_subtitle {
   background: #fff;
   color: #696969;
}
#kl_wrapper_3.kl_flat_sections #kl_banner #kl_description {
   background: #fff;
   color: #696969;
}

/**** SHARED ****/
#kl_wrapper_3.kl_flat_sections_main #kl_navigation ul,
#kl_wrapper_3.kl_flat_sections #kl_navigation ul {
    background-color: #3284bf;
    color: #fff;
}
#kl_wrapper_3.kl_flat_sections #kl_navigation li a,
#kl_wrapper_3.kl_flat_sections #kl_navigation li a:visited,
#kl_wrapper_3.kl_flat_sections_main #kl_navigation li a,
#kl_wrapper_3.kl_flat_sections_main #kl_navigation li a:visited {
   color: #fff;
}
#kl_wrapper_3.kl_flat_sections #kl_navigation li a:hover,
#kl_wrapper_3.kl_flat_sections #kl_navigation li a:focus,
#kl_wrapper_3.kl_flat_sections_main #kl_navigation li a:hover,
#kl_wrapper_3.kl_flat_sections_main #kl_navigation li a:focus {
    background: slategray;
    color: #fff;
}
#kl_wrapper_3.kl_flat_sections_main #kl_navigation i,
#kl_wrapper_3.kl_flat_sections #kl_navigation i {
   background: #fff;
   color: #696969;
   border: 1px solid #696969;
}
/* Content */
#kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default),
#kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) {
    color: #000;
    border-top: 1px solid #E0E0E0;
}
#kl_wrapper_3.kl_flat_sections_main > div > i,
#kl_wrapper_3.kl_flat_sections > div > i {
    color: #696969;
    border: 1px solid #E0E0E0;
    background: #fff;
}
#kl_wrapper_3.kl_flat_sections_main h3:not(.ui-state-default) i:first-child,
#kl_wrapper_3.kl_flat_sections h3:not(.ui-state-default) i:first-child {
    color: #696969;
    border: 1px solid #E0E0E0;
    background: #fff;
}
#kl_wrapper_3.kl_flat_sections_main h4,
#kl_wrapper_3.kl_flat_sections h4 {
    color: #000;
    border-bottom: 1px solid #E0E0E0;
}
#kl_wrapper_3.kl_flat_sections_main h5,
#kl_wrapper_3.kl_flat_sections h5 {
    color: #000;
    border-bottom: 1px solid #E0E0E0;
}
#kl_wrapper_3.kl_flat_sections_main > div:nth-child(odd),
#kl_wrapper_3.kl_flat_sections > div:nth-child(odd) {
    background: whitesmoke;
}
#kl_wrapper_3.kl_flat_sections_main .well,
#kl_wrapper_3.kl_flat_sections .well {
   background-color: #f5f5f5;
   border: 1px solid #e3e3e3;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
#kl_wrapper_3.kl_flat_sections_main blockquote,
#kl_wrapper_3.kl_flat_sections blockquote {
    border-left: 5px solid #E0E0E0;
}

/*********************************************************************/
/***** GENERIC THEME  ************************************************/

/* .kl_generic: This one is intentionally generic so there is no customization needed */


/*********************************************************************/
/*****    RIBBONS THEME      *****************************************/

#kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_left {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_ribbons_main #kl_banner #kl_banner_right {
  background: rgba(255, 255, 255, 0.65);
  border-bottom: 1px solid #b9b9b9;
}
#kl_wrapper_3.kl_ribbons_main #kl_banner .kl_subtitle {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid #b9b9b9;
}
#kl_wrapper_3.kl_ribbons_main #kl_banner #kl_description {
  border: 4px double #b9b9b9;
  background: rgba(255, 255, 255, 0.8);
}
#kl_wrapper_3.kl_ribbons_main #kl_navigation a i {
  background: #3284bf;
  color: #FFF;
}
#kl_wrapper_3.kl_ribbons_main #kl_navigation li a{
  background: rgba(255, 255, 255, 0.8);
  color: #545454;
  border: 1px solid #b9b9b9;
}
#kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) {
  background-color: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_ribbons_main h3:not(.ui-state-default) i {
  background: #FFF;
  color: #3284bf;
}
#kl_wrapper_3.kl_ribbons_main > div > i {
  background-color: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_ribbons_main .kl_quick_check,
#kl_wrapper_3.kl_ribbons_main #kl_modules .ui-tabs-panel {
  background: #fff;
}
/* Course Menu Expanded */
@media screen and (min-width: 950px) {

  body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{
    background: #fff;
  }
  body.course-menu-expanded #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after {
    border: 22px solid #fff;
    border-left: 20px solid transparent;
  }
}
/* Banner text above Navigation as ribbons */
/* Course Menu Collapsed */
@media screen and (min-width: 800px) and (max-width: 969px) {
  body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{
    background: #fff;
  }
  body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after {
    border: 22px solid #fff;
    border-left: 20px solid transparent;
  }
}
/* Navigation as rotated ribbons */
/* Course Menu Collapsed */
@media screen and (min-width: 1000px) {
  body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation li a{
    background: #fff;
  }
  body:not(.course-menu-expanded) #kl_wrapper_3.kl_ribbons_main #kl_navigation a:after {
    border: 22px solid #fff;
    border-left: 20px solid transparent;
  }
}

/*********************************************************************/
/***** ROUNDED-INSET THEMES 1, 2, 3 **********************************/

/* BASE */
#kl_wrapper_3.kl_rounded_inset h2 {
 border-color: #8A8A8A;
 background: #fff;
 color: #000;
}
#kl_wrapper_3.kl_rounded_inset #kl_banner {
 background: #3284bf;
 color: #fff;
}
#kl_wrapper_3.kl_rounded_inset #kl_banner_left {
  border-color: #3284bf;
}
#kl_wrapper_3.kl_rounded_inset #kl_banner #kl_description,
#kl_wrapper_3.kl_rounded_inset #kl_banner .kl_subtitle {
  color: #fff;
}
#kl_wrapper_3.kl_rounded_inset h3:not(.ui-state-default) {
  border-color: #efefef;
  background-color: #fff;
}
#kl_wrapper_3.kl_rounded_inset > div > i {
  border-color: #efefef;
}
#kl_wrapper_3.kl_rounded_inset #kl_navigation ul li a,
#kl_wrapper_3.kl_rounded_inset #kl_navigation ul li a:visited {
 color: #3284bf;
 border-color: #3284bf;
}
#kl_wrapper_3.kl_rounded_inset #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_rounded_inset #kl_navigation ul li a:focus {
 background: #3284bf;
 color: #FFF;
}
/* VARIATION 2 */
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner {
 background: #ffe800;
 color: #000;
}
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner_left {
  border-color: #ffe800;
}
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner #kl_description,
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_banner .kl_subtitle {
  color: #000;
}
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation ul li a,
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation ul li a:visited {
 color: #000;
 border-color: #ffe800;
}
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_rounded_inset.variation_2 #kl_navigation ul li a:focus {
 background: #ffe800;
 color: #000;
}

/* VARIATION 3 */
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_banner {
 background: #00a5e5;
 color: #000;
}
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_banner_left {
  border-color: #00a5e5;
}
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_banner #kl_description,
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_banner .kl_subtitle {
  color: #000;
}
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_navigation ul li a,
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_navigation ul li a:visited {
 color: #3284bf;
 border-color: #00a5e5;
}
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_navigation ul li a:focus,
#kl_wrapper_3.kl_rounded_inset.variation_3 #kl_navigation ul li a:hover {
 background: #00a5e5;
 color: #000;
}

/*********************************************************************/
/***** SQUARE RIGHT THEMES 1, 2, 3  **********************************/

/* BASE */
#kl_wrapper_3.kl_square_right h2 {
  background: #ffe800;
  color: #000;
}
#kl_wrapper_3.kl_square_right #kl_banner_left {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_square_right #kl_banner #kl_description,
#kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle {
 border-color: #ffe800;
}
#kl_wrapper_3.kl_square_right h3:not(.ui-state-default) {
 border-color: #D5D5D5;
 background-color: #fff;
}
#kl_wrapper_3.kl_square_right #kl_banner .kl_subtitle {
 color: #3284bf;
}
#kl_wrapper_3.kl_square_right #kl_navigation ul li i {
 background: #ffe800;
 color: #000;
}
#kl_wrapper_3.kl_square_right > div > i,
#kl_wrapper_3.kl_square_right h3:not(.ui-state-default) i {
 background: #3284bf;
 color: #fff;
}
#kl_wrapper_3.kl_square_right #kl_navigation ul li a,
#kl_wrapper_3.kl_square_right #kl_navigation ul li a:visited {
 background: #fff;
 color: #000;
 border-color: #ffe800;
}
#kl_wrapper_3.kl_square_right #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_square_right #kl_navigation ul li a:focus {
 background: #3284bf;
 color: #FFF;
}

/* 2 */
#kl_wrapper_3.kl_square_right.variation_2 h2 {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_square_right.variation_2 #kl_banner_left {
  background: #ffe800;
  color: #000;
}
#kl_wrapper_3.kl_square_right.variation_2 #kl_banner #kl_description,
#kl_wrapper_3.kl_square_right.variation_2 #kl_banner .kl_subtitle {
 border-color: #3284bf;
}
#kl_wrapper_3.kl_square_right.variation_2 > div > i,
#kl_wrapper_3.kl_square_right.variation_2 h3:not(.ui-state-default) i {
 background: #ffe800;
 color: #000;
}
#kl_wrapper_3.kl_square_right.variation_2 #kl_navigation ul li a,
#kl_wrapper_3.kl_square_right.variation_2 #kl_navigation ul li a:visited {
 background: #fff;
 color: #000;
 border-color: #ffe800;
}
#kl_wrapper_3.kl_square_right.variation_2 #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_square_right.variation_2 #kl_navigation ul li a:focus {
 background: #ffe800;
 color: #000;
}
#kl_wrapper_3.kl_square_right.variation_2 #kl_navigation ul li i {
 background: #3284bf;
 color: #fff;
}

/* 3 */
#kl_wrapper_3.kl_square_right.variation_3 h2 {
  background: #3284bf;
  color: #fff;
}
#kl_wrapper_3.kl_square_right.variation_3 #kl_banner_left {
  background: #00a5e5;
  color: #000;
}
#kl_wrapper_3.kl_square_right.variation_3 #kl_banner #kl_description,
#kl_wrapper_3.kl_square_right.variation_3 #kl_banner .kl_subtitle {
 border-color: #3284bf;
}
#kl_wrapper_3.kl_square_right.variation_3 > div > i,
#kl_wrapper_3.kl_square_right.variation_3 h3:not(.ui-state-default) i {
 background: #00a5e5;
 color: #000;
}
#kl_wrapper_3.kl_square_right.variation_3 #kl_navigation ul li a,
#kl_wrapper_3.kl_square_right.variation_3 #kl_navigation ul li a:visited {
 background: #fff;
 color: #000;
 border-color: #00a5e5;
}
#kl_wrapper_3.kl_square_right.variation_3 #kl_navigation ul li a:hover,
#kl_wrapper_3.kl_square_right.variation_3 #kl_navigation ul li a:focus {
 background: #00a5e5;
 color: #000;
}
#kl_wrapper_3.kl_square_right.variation_3 #kl_navigation ul li i {
 background: #3284bf;
 color: #fff;
}

/*********************************************************************/
/***** END DESIGN TOOLS THEME CUSTOMIZATIONS *************************/
/*********************************************************************/