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

/*
* eLearning Style Guide - 2025 CCO Rebrand
* Grid & Style Guide Formatting
* Icons: https://instructure.design/#icons-font
*/


/* Table of contents
--------------------------------------------------
- Grid
- Utilities
- Clearing
- Media Queries
- Accordion
- Video
- Parralax
- Headers
- Alert Boxes
- Banners
- Tables
- Text Formatting
  - Block Quotes
  - Lists
  - Large Fonts 
- Sticky Notes
- Buttons
- Iconography
- Dividers
- Images
- Syllabus Only
- Interactives
  - Multiple Choice Questions
  - Flip Cards
- Coding Tools
  - Gist Embeds
  - Prism
- Champlain College UI Changes
  - Group Notice Box
  - CC Help Dialog
  - Custom CSS: Numbered Boxes
  - Call Out Divs
  - Dropdowns
  - Tabs
  - Experimental
  - 
*/

/* Grid
-------------------------------------------------- */
.cc-container {
  position: relative;
  width: 100%;
  max-width: 1300px; 
  margin: 0 0;
  padding: 0 0 0 20px;
  box-sizing: border-box; }

.cc-row                                        { margin-bottom: 20px; }

/* For devices larger than 910px */
@media (min-width: 910px) {
  .cc-container {
    width: 100%; }

  .cc-1                    { margin-left: 10px; width: calc(6.25% - 10px); float: left; box-sizing: border-box;}
  .cc-1:first-child        {margin-left: 0; }
  .cc-2                    { margin-left: 10px;  width: calc(12.5% - 10px); float: left; box-sizing: border-box; }
  .cc-2:first-child        {margin-left: 0; }
  .cc-3                    { margin-left: 10px;  width: calc(18.75% - 10px); float: left; box-sizing: border-box;}
  .cc-3:first-child        {margin-left: 0; }
  .cc-4                    { margin-left: 10px; width: calc(25% - 10px); float: left; box-sizing: border-box;}
  .cc-4:first-child        {margin-left: 0; }
  .cc-5                    { margin-left: 10px;  width: calc(31.25% - 10px); float: left; box-sizing: border-box; }
  .cc-5:first-child        {margin-left: 0; }
  .cc-6                    { margin-left: 10px;  width: calc(37.5% - 10px); float: left; box-sizing: border-box;}
  .cc-6:first-child        {margin-left: 0; }
  .cc-7                    { margin-left: 10px; width: calc(43.75% - 10px); float: left; box-sizing: border-box;}
  .cc-7:first-child        {margin-left: 0; }
  .cc-8                    { margin-left: 10px;  width: calc(50% - 10px); float: left; box-sizing: border-box; }
  .cc-8:first-child        {margin-left: 0; }
  .cc-9                    { margin-left: 10px;  width: calc(56.25% - 10px); float: left; box-sizing: border-box;}
  .cc-9:first-child        {margin-left: 0; }
  .cc-10                    { margin-left: 10px; width: calc(62.5% - 10px); float: left; box-sizing: border-box;}
  .cc-10:first-child        {margin-left: 0; }
  .cc-11                    { margin-left: 10px;  width: calc(68.75% - 10px); float: left; box-sizing: border-box; }
  .cc-11:first-child        {margin-left: 0; }
  .cc-12                    { margin-left: 10px;  width: calc(75% - 10px); float: left; box-sizing: border-box; }
  .cc-12:first-child        {margin-left: 0; }
  .cc-13                    { margin-left: 10px;  width: calc(81.25% - 10px); float: left; box-sizing: border-box;}
  .cc-13:first-child        {margin-left: 0; }
  .cc-14                    { margin-left: 10px; width: calc(87.5% - 10px); float: left; box-sizing: border-box;}
  .cc-14:first-child        {margin-left: 0; }
  .cc-15                    { margin-left: 10px;  width: calc(93.75% - 10px); float: left; box-sizing: border-box; }
  .cc-15:first-child        {margin-left: 0; }
  .cc-16                    { margin-left: 0px;  width: calc(100%); float: left; box-sizing: border-box;}
  .cc-16:first-child        {margin-left: 0; }

 
  .cc-1-3rd                 { margin-left: 10px;  width: calc(33.333333% - 10px); float: left; box-sizing: border-box;}
  .cc-1-3rd:first-child     { margin-left: 0; }

  .cc-2-3rd                 { margin-left: 10px;  width: calc(66.666666% - 10px); float: left; box-sizing: border-box;}
  .cc-2-3rd:first-child     { margin-left: 0; }



  /* Offsets */
  .cc-container .cc-offset-1          { margin-left: 6.25%; }
  .cc-container .cc-offset-2         { margin-left: 12.5%; }
  .cc-container .cc-offset-3          { margin-left: 18.75%; }
  .cc-container .cc-offset-4         { margin-left: 25%; }
  .cc-container .cc-offset-5          { margin-left: 31.25%; }
  .cc-container .cc-offset-6         { margin-left: 37.5%; }
  .cc-container .cc-offset-7          { margin-left: 43.75%; }
  .cc-container .cc-offset-8         { margin-left: 50%; }
  .cc-container .cc-offset-9          { margin-left: 56.25%; }
  .cc-container .cc-offset-10         { margin-left: 62.5%; }
  .cc-container .cc-offset-11         { margin-left: 68.75%; }
  .cc-container .cc-offset-12        { margin-left: 75%; }
  .cc-container .cc-offset-13          { margin-left: 81.25%; }
  .cc-container .cc-offset-14         { margin-left: 87.5%; }
  .cc-container .cc-offset-15         { margin-left: 93.75%; }
  
 
  .cc-container .offset-1-3rd    { margin-left: 33.3333333%; }
  .cc-container .offset-2-3rd    { margin-left: 66.6666666%; }

}




/* Utilities
-------------------------------------------------- */
.cc-full-width {
  width: 100%;
  box-sizing: border-box; }
.cc-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.cc-pull-right {
  float: right; }
.cc-pull-left {
  float: left; }



/* Clearing
-------------------------------------------------- */

/* Self Clearing Goodness */
.cc-container:after,
.cc-row:after,
.cc-clearfix {
  content: "";
  display: table;
  clear: both; }







/* Media Queries
-------------------------------------------------- */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* Accordion
-------------------------------------------------- */
.cc-accordion {
  margin: 1em 1em 1em 0;
  clear: left;
}

.cc-accordion dt {
  background-color: #7ED3EF;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
  line-height: 1.25em;
  margin-top:1em;
  padding:5px 5px 5px 15px;
  border-radius: 3px;
  color: #003C5F;
}
.cc-accordion dt:hover {
  background-color: #7ED3EF;
  color:#363738;
}

.cc-accordion-visible{
  display:block;
}

.cc-accordion dt[aria-expanded="true"] {
  background-color: #0085C2;
  color: white;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}



.cc-accordion dt[aria-expanded="true"]::before{
  color:#fff;
  content:"-";
  font-size: 2rem;
  line-height: 1rem;;
  width: 18px
}
.cc-accordion dt::before {
  color:#000;
  content: "+";
  display: inline-block;
  margin-right: .2em;
  font-size: 2rem;
  line-height: 1rem;
  width:18px;
}


.cc-accordion .cc-accordion-toggle {
  display: inline-block;
  zoom:1;
  _display:inline;
}

.cc-accordion dd {
  border: 1px solid #ccc;
  border-top: 0;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin: 0 0 1em;
  max-height: 650px;
  overflow: auto;
  -webkit-transition: all .75s ease-in-out;
  transition: all .75s ease-in-out;
}

.cc-accordion dd>* {
  padding: .5rem;
  padding-left: 1rem;
  margin: 0
}

.cc-accordion .faq-anchor{
  display:none;
  float: right;
  padding: 0 1em 20px;
}

.cc-accordion .a11y-acc-hide {
  display: block;
  max-height: 0 !important;
}

.cc-accordion-wrap.with-buttons>a:first-child {
  margin-right: 1em;
}

/* Video
-------------------------------------------------- */


/* http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */
/*The padding-bottom value is calculated out of the aspect ratio of the video. 
In this case, the aspect ratio is 16:9, which means that the height will be 56.25% 
of the width. For a video with a 4:3 aspect ratio, we set padding-bottom to 75%. */
.cc-container  .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/* The height is set to 0 because padding-bottom gives the element the height it 
needs. We do not set the width because it will automatically resize with the 
responsive element that contains this div. */
.cc-container  .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

.cc-container  .video-container-standard iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.cc-container  .video-container-standard {
  position: relative;
  padding-bottom: 75%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

/* Parralax
-------------------------------------------------- */

div.cc-pmodule:last-child {
  margin-bottom: 0; }

div.cc-pmodule.cc-parallax {
  height: 300px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

div.cc-pmodule.cc-parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 64px;
  line-height: 300px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

/* Headers
-------------------------------------------------- */

h2.cc-arrow-blue {
  color: #34598e;
  position: relative;
  background-image: url("https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/arrow_blue.jpg");
  background-repeat: no-repeat;
  background-position: 0px 5px;
  background-attachment: inherit;
  padding-left: 50px; }

h2.cc-arrow-orange {
  color: #a64523;
  position: relative;
  background-image: url("https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/arrow_orange.jpg");
  background-repeat: no-repeat;
  background-position: 0px 5px;
  background-attachment: inherit;
  padding-left: 50px; }

.cc-container h2{
  font-size: 1.75rem; 
}

.cc-container h3{
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 1.5;
  font-size: 1.5rem;
}

.cc-container h4{
  font-weight: 800;
  font-size: 1.3rem;
}

.cc-container h5{
  font-weight: 600;
  font-size: 1.2rem;  
}

.cc-container h6{
  font-weight: 800;
  font-size: 1.1rem;  
}

.cc-instructor-header {
  background-color: #003c5f;
  color: white;
  padding: 5px;
}



/* Alert Boxes
-------------------------------------------------- */

.cc-alert-blue {
  background-color: #d9edf7;
  border: 2px solid #bce9f1;
  color: #3a87ad;
  padding: 8px 14px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 3px; }

.cc-alert-yellow {
  background-color: #fcf8e3;
  border: 2px solid #fbeed5;
  color: #81632f;
  padding: 8px 14px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 3px; }

.cc-alert-red {
  background-color: #f2dede;
  border: 2px solid #eed3d7;
  color: #b94a48;
  padding: 8px 14px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 3px; }

.cc-alert-green {
  background-color: #dff0d8;
  border: 2px solid #d7e9c6;
  color: #417e42;
  padding: 8px 14px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 3px; }




/* New Alert Boxes for new CCO Style Guide 2022
 * cco-aim, cco-question, cc-important, cco-tip 
 * are 4 new alert boxes to be used to stylize courses. Developed
 * 5/2022
 */

.cco-aim {
    background-color: #FFFFFF;
    background-image: url('https://8c84befcbc521d4a0362-20089affd50e40574e4ca6f45667cc0c.ssl.cf2.rackcdn.com/cco-branding/Aim_Bullseye_Icon.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 8px 8px;
    border: 3px solid #7ED321;
    color: #333;
    padding: 8px 14px 8px 70px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgb(235 237 238 / 50%);
    border-radius: 3px;
    min-height: 70px;
}

.cco-question {
    background-color: #FFFFFF;
    background-image: url('https://8c84befcbc521d4a0362-20089affd50e40574e4ca6f45667cc0c.ssl.cf2.rackcdn.com/cco-branding/Question_Question%20Mark_Icon.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 8px 8px;
    border: 3px solid #236192 ;
    color: #333;
    padding: 8px 14px 8px 70px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgb(235 237 238 / 50%);
    border-radius: 3px;
    min-height: 70px;
}

.cco-important {
    background-color: #FFFFFF;
    background-image: url('https://8c84befcbc521d4a0362-20089affd50e40574e4ca6f45667cc0c.ssl.cf2.rackcdn.com/cco-branding/Exclamation%20Icon.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 8px 8px;
    border: 3px solid #00A9E0;
    color: #333;
    padding: 8px 14px 8px 70px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgb(235 237 238 / 50%);
    border-radius: 3px;
    min-height: 70px;
}

.cco-tip {
    background-color: #FFFFFF;
    background-image: url('https://8c84befcbc521d4a0362-20089affd50e40574e4ca6f45667cc0c.ssl.cf2.rackcdn.com/cco-branding/Tip_Lightbulb_Icon.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 50px;
    background-position: 8px 8px;
    border: 3px solid #FDC55E;
    color: #333;
    padding: 8px 14px 8px 70px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgb(235 237 238 / 50%);
    border-radius: 3px;
    min-height: 70px;
}

/* Banners
-------------------------------------------------- */

/*Gradient Banner using school Blue--------------------------- */
/*Gradient banner should only be applied to H tags, but we are leaving the ability to apply to other tags to support existing content*/
.cc-gradient-banner {
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 0 rgba(44, 44, 44, 0.8);
  padding: 8px 35px 8px 14px;
  background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(0, #9ccded), color-stop(1, #005795));
  background-image: -o-linear-gradient(left, #9ccded 0%, #005795 100%);
  background-image: -moz-linear-gradient(left, #9ccded 0%, #005795 100%);
  background-image: -webkit-linear-gradient(left, #9ccded 0%, #005795 100%);
  background-image: -ms-linear-gradient(left, #9ccded 0%, #005795 100%);
  background-image: linear-gradient(to left, #9ccded 0%, #005795 100%); }

/* Tables
-------------------------------------------------- */

.cc-container table {
  border-collapse: collapse; }

.cc-container table td, .cc-container table th {
  padding: 5px; }

.cc-container table th {
  background-color: #555555;
  color: white;
  font-weight: bold; }

.cc-zebra tbody tr:nth-of-type(odd) {
  background: #d6ecfc; }

/*fix for Firefox was not showing all vertical lines as black w/out this*/
.cc-container td {
  border: 1px solid black; }


/*Captions*/
.user_content .cc-container table caption {
  font-size: 1.2rem !important;
  padding: 10px;
  font-weight: bold;
}

/*Layout tables have no borders*/
table.cc-layout td {
  border: 0px;
  padding: 0px;
}


/*Small text tables to be used when there are many columns of text.*/
.user_content .cc-container table.cc-small-text-table td{
  font-size: 0.9rem !important;
  line-height: 20px !important; 
}
.user_content .cc-container table.cc-small-text-table td ul, .user_content .cc-container table.cc-small-text-table td ol {
   padding-left: 30px;
   margin-left:  0px;
}

/* Text Formatting
-------------------------------------------------- */

/*Illuminated text - first letter is in a colored box with a serif font*/
.cc-illuminated {
  float: left;
  margin-left: 10px;
  margin-right: 3px;
  border: thick;
  background-color: #ffc;
  border-color: #000;
  text-align: center;
  width: 40px;
  height: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 28px;
  border-style: solid;
  color: #ff6600;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold; }

/* Fancy Blockquote */
blockquote.cc-quote {
  background: #f5f2f0;
  color: #000000  !important;
  /*  margin: 5px;*/
  padding: 0.5em 10px;
  border-radius: 10px;
  border: 2px solid #d0cecc;
  box-shadow: 5px 5px 10px #888;
  text-align: left !important; }

blockquote.cc-quote:before {
  color: #bab6b2 !important;
  content: open-quote;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 4em;
  font-weight: bold;
  line-height: .1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  font-style: normal; }

/*Commented out 12/8 per discussion JB & PV
blockquote.cc-quote:after {
  color: #f5f2f0;
  content: close-quote; }
*/

blockquote.cc-quote cite {
  display: inherit;
  text-align: right;
  font-style: italic;
  color: #999; }

blockquote.cc-quote p {
  display: inline; }

/* Plain Blockquote */
blockquote.cc-plain-quote, .cc-container blockquote {
  /*  margin: 5px;*/
  padding: 0.5em 10px;
  border-left: none; }

blockquote.cc-plain-quote:before, .cc-container blockquote:before {
  color: #333333;
  content: open-quote;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 4em;
  font-weight: bold;
  line-height: .1em;
  margin-right: 0.25em;
  vertical-align: -0.4em; }

/*Changed closing quote to visibility=hidden.  The closing quote 
needs to exist to match the opening quote otherwise the browser 
formats the next quote on the page incorrectly */
blockquote.cc-plain-quote:after, .cc-container blockquote:after {
  color: #ffffff;
  content: close-quote;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1em; 
  visibility: hidden;
}


blockquote.cc-plain-quote p, .cc-container blockquote p {
  display: inline; }

blockquote.cc-plain-quote cite, .cc-container blockquote cite {
  display: inherit;
  text-align: right;
  font-style: italic;
  color: #999; }

/****************** List Formatting - Applies to any lists inside cc-container *************/


.cc-container ul, .cc-container ol {
  padding-left: 50px;
  margin-left:  0px;
}

.cc-container ul  ul, .cc-container ol  ol, .cc-container li  ul, .cc-container li  ol {
  padding-left: 25px;
  margin-left:  0px;
}

.cc-container ul li, .cc-container ol li{
  padding-left: 0px;
  margin-left: 0px;
}

.cc-container ol{ list-style-type: decimal;}

.cc-container ol ol{ list-style-type: lower-alpha;}

.cc-container ol ol ol{ list-style-type: lower-roman;}





/****************** Large Fonts For Everyone**********************/
#discussion_topic .user_content, #assignment_show .user_content, #wiki_page_show .user_content, #course_syllabus.user_content, #quiz_show .user_content {
  font-size:1.09rem;
 
  line-height: 1.35;
}

#discussion_topic .user_content ul,#discussion_topic .user_content ol, #discussion_topic .user_content li, #discussion_topic .user_content dl,#discussion_topic .user_content p,#discussion_topic .user_content dt,#discussion_topic .user_content dd,#discussion_topic .user_content cite,
#assignment_show .user_content ul,#assignment_show .user_content ol, #assignment_show .user_content li, #assignment_show .user_content dl,#assignment_show .user_content p,#assignment_show .user_content dt,#assignment_show .user_content dd,#assignment_show .user_content cite,
#wiki_page_show .user_content ul,#wiki_page_show .user_content ol, #wiki_page_show .user_content li, #wiki_page_show .user_content dl,#wiki_page_show .user_content p,#wiki_page_show .user_content dt,#wiki_page_show .user_content dd,#wiki_page_show .user_content cite,
#course_syllabus.user_content ul,#course_syllabus.user_content ol, #course_syllabus.user_content li, #course_syllabus.user_content dl,#course_syllabus.user_content p,#course_syllabus.user_content dt,#course_syllabus.user_content dd,#course_syllabus.user_content cite,
#quiz_show .user_content ul,#quiz_show .user_content ol, #quiz_show .user_content li, #quiz_show .user_content dl,#quiz_show .user_content p,#quiz_show .user_content dt,#quiz_show .user_content dd,#quiz_show .user_content cite{

  line-height: 1.35;
}

/*Increase size of discussion entries slightly*/
.discussion_entry .entry-content{
  font-size: 0.9rem;
}


.user_content table td, .user_content table th,.user_content table caption{
  font-size: 0.81495rem !important;
  line-height: 20px !important; 
}

.user_content .cc-container table td, .user_content .cc-container table th,  .user_content .cc-container table caption{
  font-size:1.09rem !important;
  line-height: 1.35 !important;
}



/*Adjust arrow icon to line up with larger text*/
h2[class*="cc-arrow-"]{
  background-position: 0px 8px;
}


div[class*="cc-sticky-"]{
  font-size:   1rem;  
  line-height: 1.35;  
}

.cc-alert-green, .cc-alert-red, .cc-alert-yellow, .cc-alert-blue, .cc-alert-black {
  font-size:   1rem;  
  line-height: 1.35;  
}

.cc-quote, .cc-plain-quote{
  font-size: 1rem;
  line-height: 1.35;  
}
  



/* Sticky Notes
-------------------------------------------------- */


div[class*="cc-sticky-"] {
  height: 100%;
  min-height: 100px;
  max-width: 400px;
  padding: 20px;
  position: relative;
  margin-left: auto;
  margin-right: auto; }

div[class*="cc-sticky-"]:before, div[class*="cc-sticky-"]:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg); }

div[class*="cc-sticky-"]:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto; }

/*Yellow*/
.cc-sticky-yellow {
  background: #FDC55E;
  color: #003C5F;
}

/*Green*/
.cc-sticky-green {
  background: #7ED321;
  color: #003C5F;
}

/*Orange*/
.cc-sticky-orange {
  background: #ffc05c;
  color: #003C5F;
}

/*blue*/
.cc-sticky-blue {
  background: #7ED3EF;
  color: #003C5F;
}

/* Buttons
-------------------------------------------------- */
a[class*="cc-button"]{

  background: #F1F5F9;
  background: linear-gradient(to bottom, #F1F5F9 0%, #F1F5F9 50%, #F1F5F9 100%);
  color: #003C5F;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  padding: 8px 14px;
  margin-bottom: 0px;
  font-size: 1rem;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  text-shadow: none;
  -moz-user-select: none;
  font-weight: 400;
}

a.cc-button:hover, a.cc-button-redtext:hover{
  background: #CCCCCC;
  background: linear-gradient(to bottom, #CCCCCC 0%,#CCCCCC 50%,#CCCCCC 100%);
}

a[class*="cc-button"]:hover span {
  text-decoration: none;
}

a.cc-button-redtext{
  color: #BE3A34;
}

a.cc-button-blue{
  color: white !important;
  background: #236192;
}

a.cc-button-blue:hover{
  background: #7ED3EF;
  color:#003C5F;
}

a.cc-button-red{
  color: #FFF  !important;
  background: #BE3A34;
  background: linear-gradient(to bottom, #BE3A34 0%, #BE3A34 50%, #BE3A34 100%);
}

a.cc-button-red:hover{
  background: #8d2b26;
  background: linear-gradient(to bottom, #8d2b26 0%,#8d2b26 50%, #8d2b26 100%);
}

/*Button list for making a vertical list of buttons for course navigation*/
ul.cc-button-list{
    list-style-type: none;
  margin:0px;
  padding:0px;
}

.cc-button-list li a {
    display: block;
    width: 95%;
    margin:5px;
  
}

/* Iconography
-------------------------------------------------- */

/*Add Icons to left side of Sticky Notes or colored boxes*/
.cc-tip {
  padding-left: 90px !important;
  min-height: 75px;
  background-image: url("https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/bulb_idea.png");
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: 10px 10px; }

.cc-important {
  padding-left: 90px !important;
  min-height: 75px;
  background-image: url("https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/important.png");
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: 10px 10px; }

.cc-question {
  padding-left: 90px !important;
  min-height: 75px;
  background-image: url("https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/headQuestion_75x75.gif");
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: 10px 10px; }

.cc-action {
  padding-left: 90px !important;
  min-height: 75px;
  background-image: url("https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/action-icon.png");
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: 10px 10px; }



/* Dividers
-------------------------------------------------- */


h4.cc-divider-blue, h5.cc-divider-blue, h6.cc-divider-blue {
  background-color: #26394c;
  color: #ffffff;
  padding: 3px;
  text-indent: 5px;
  font-weight: 400;
}

.cc-blue-hr {
  height: 5px;
  background-color: #003c5f;
  border: none; /* Ensure no border appears */
}



/* Images
-------------------------------------------------- */

div.cc-figure p {
  padding-top: 3px;  
  text-align: center;
  font-style: italic;
  font-size: .8rem;
  color: #666666;
  text-indent: 0;
}

/*Use cc-image only when you want an image to take up the full width of a column*/
.cc-image{width: 100% !important;}

@media (max-width: 909px) {
  .cc-image {width: 90% !important; display: block; margin-left: auto; margin-right: auto; padding-top: 10px;}
}

/****************** Syllabus Formatting - Applies only to Syllabus page *************/


#course_syllabus .cc-container p {
   line-height: 1.1;
   margin: 12px;

}


#course_syllabus .cc-container ul, #course_syllabus .cc-container ol {
    padding-left: 30px;
}

/*Make the color of table headers not contrast with the cc-divider*/
#course_syllabus .cc-container th {
  background-color: #26394c;
  font-weight: 400;
}

/* Interactives
-------------------------------------------------- */

/****************** Multiple Choice Questions *************/
.cc-interactive-mcquestion {
  background-image:url(https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/multiplechoice.png);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: 10px 10px; 
  background-color: #fbeed5;
  padding: 11px 15px 11px 90px;
  border-radius: 3px;
  max-width: 700px;
  border: 1px solid #3C3933;
}

ol.cc-mcanswerlist {
  list-style-type: upper-alpha;
}

ol.cc-mcanswerlist li {
  cursor: pointer;
  background-color: #FFFBF2;
  margin: 11px 11px 11px 11px;
  padding: 7px 27px 7px 27px;
  border-radius: 3px;
  -moz-box-shadow: inset 0 0 3px #5F6B78;
  -webkit-box-shadow: inset 0 0 3px #5F6B78;
  box-shadow: inset 0 0 3px #5F6B78;
}

ol.cc-mcanswerlist li.cc-mcdisplaycorrect {
  background-color: #23CF28;
  -webkit-animation-name: transitionToGreen;
  /* Chrome, Safari, Opera */
  
  -webkit-animation-duration: 0.6s;
  /* Chrome, Safari, Opera */
  
  animation-name: transitionToGreen;
  animation-duration: 0.6s;
}

ol.cc-mcanswerlist li.cc-mcdisplaycorrect:after {
  content: " - CORRECT!";
}

ol.cc-mcanswerlist li.cc-mcdisplaywrong {
  background-color: #F24E18;
  -webkit-animation-name: transitionToRed;
  /* Chrome, Safari, Opera */
  
  -webkit-animation-duration: 0.6s;
  /* Chrome, Safari, Opera */
  
  animation-name: transitionToRed;
  animation-duration: 0.6s;
}

.cc-mchint {
  display: none;
}

.cc-mchint:before {
  content: "Hint: ";
  font-weight: bold;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes transitionToRed {
  from {
    background-color: #B1D5F9;
  }
  to {
    background-color: #F24E18;
  }
}

@-webkit-keyframes transitionToGreen {
  from {
    background-color: #B1D5F9;
  }
  to {
    background-color: #23CF28;
  }
}
/* Standard syntax */

@keyframes transitionToRed {
  from {
    background-color: #B1D5F9;
  }
  to {
    background-color: #F24E18;
  }
}

@keyframes transitionToGreen {
  from {
    background-color: #B1D5F9;
  }
  to {
    background-color: #23CF28;
  }
}


/********************** Flip Cards **********************/
.cc-interactive-card {
  position: relative;
  /* styling */
  min-width: 300px;
  max-width: 450px;
  min-height: 200px;
  max-height: 400px;
}
.cc-interactive-card .cc-card-back,
.cc-interactive-card .cc-card-front {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* styling */
  padding: 11px 15px 11px 15px;
  border-radius: 3px;
  border: 1px solid #3C3933;
  cursor: pointer;
}
.cc-interactive-card .cc-card-front {
  z-index: 2;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -ms-transition: all 0.55s ease-in-out;
  -moz-transition: all 0.55s ease-in-out;
  -webkit-transition: all 0.55s ease-in-out;
  transition: all 0.55s ease-in-out;
  /* styling */
  background-image: url(https://0e751f1553e71db86ee4-54f1e9216cb9bd0b2b3928cba4aaf6e4.ssl.cf1.rackcdn.com/Graphics/touch.png);
  background-repeat: no-repeat;
  background-attachment: inherit;
  background-position: 98% 95%;
  background-color: #fbeed5;
}
.cc-interactive-card .cc-card-back {
  z-index: 1;
  -webkit-transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateY(-180deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -o-transition: all 0.55s ease-in-out;
  -ms-transition: all 0.55s ease-in-out;
  -moz-transition: all 0.55s ease-in-out;
  -webkit-transition: all 0.55s ease-in-out;
  transition: all 0.55s ease-in-out;
  background-color: #FFFBF2;
}
.cc-interactive-card .cc-card-largetext {
  font-size: 1.75rem;
  text-align: center;
}
.cc-interactive-card:hover .cc-card-front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}
.cc-interactive-card:hover .cc-card-back {
  z-index: 3;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

/* Coding Tools
-------------------------------------------------- */


/* Change <code> within a paragraph to black instead of red */
.cc-container code{
  color:#333;
}

/* Gist Embed Font Size */
body.pages iframe .gist .line-pre {
  font-size: 1em !important;
}

/*Prism formatting*/
pre[class*="language-"]{
  font-size:12px;
  padding-bottom: 25px !important;
}
pre[class*="language-"] code[class*="language-"]
{
  font-size: 12px;
  padding-top: 2px; 
}

/* Champlain College UI Changes */

/* Group Notice Message */
#noticeBox {min-height:30px; padding:10px;}
#noticeBox #noticeBoxLink {color:white; float:right; margin:0 10px; padding:5px 10px;}
#noticeBox #noticeBoxText {display:block; margin-top:5px;}
#noticeBox #noticeBoxLinkMore {text-decoration:underline;}

/*Add space for custom announcement notification on left side course navigation*/
.ic-app-course-menu {
  padding-right: 0px;
}

.ic-app-course-menu nav li .nav-badge{
  margin-left: 6px;
  float: none;
}


/* CC Implementation of the Canvas Modal Dialog Boxes */
.cc-help-dialog.ui-dialog-content {
  width:400px;
  overflow:visible;
  position:relative;
  padding:0;
}

.cc-help-dialog .cc-help-dialog-options {
  list-style:none;
  overflow:auto;
  background:#e6e7e9;
  margin:0;
  padding:0;
}

.cc-help-dialog .cc-help-dialog-options li a {
  border-top:1px solid #fafafa;
  border-bottom:1px solid #d4d5d7;
  display:block;
  text-decoration:none;
  padding:10px 25px;
}

.cc-help-dialog .cc-help-dialog-options li a .text {
  color:#1e7eca;
  font-size:1.1em;
}

.cc-help-dialog .cc-help-dialog-options li a .subtext {
  color:#a2a2a3;
  font-style:italic;
  display:block;
  font-size:.9em;
  line-height:1.1em;
}

.cc-help-dialog .cc-help-dialog-options li a:hover {
  border-top-color:#d7eefb;
  border-bottom-color:#297fd1;
  background-color: #008fd6;
  background-image: linear-gradient(to bottom, #0abdff, #008fd6);
  text-decoration:none;
}

.cc-help-dialog .cc-help-dialog-options li a:hover .text {
  color:#fff;
}

.cc-help-dialog .cc-help-dialog-options li a:hover .subtext {
  color:#015f99;
}

.cc-help-dialog .cc-help-dialog-options li.user li.user,
.cc-help-dialog .cc-help-dialog-options li.student li.student,
.cc-help-dialog .cc-help-dialog-options li.teacher li.teacher,
.cc-help-dialog .cc-help-dialog-options li.admin li.admin {
  display:block;
}

.cc-help-dialog form {
  width:380px;
  position:absolute;
  left:400px;
  top:0;
  padding:10px 10px 6px;
}

.cc-help-dialog textarea {
  height:100px;
  resize:none;
}

.cc-help-dialog small {
  font-size:10px;
  display:block;
  color:#555;
  margin-top:-6px;
}

.cc-help-dialog .ui-state-error,.cc-help-dialog .ui-state-highlight {
  border-radius:4px!important;
  position:relative;
  padding:10px 10px 10px 35px;
}

.cc-help-dialog .ui-state-error a,.cc-help-dialog .ui-state-highlight a {
  text-decoration:underline;
}

.cc-help-dialog .ui-state-error .ui-icon,.cc-help-dialog .ui-state-highlight .ui-icon {
  position:absolute;
  left:10px;
  top:10px;
}

i[class*=icon-].cc-icon, i[class^=icon-].cc-icon {
  color:#fff;
  height:30px;
  line-height: 30px;
  width: 30px;
  transition:all 0.2s ease-out;
}
li a .cc-menu-image img,
li a .cc-menu-image svg {
  transition:all 0.2s ease-out;
}
i.cc-icon::before {
  font-size: 30px;
  transition:all 0.2s ease-out;
  margin: 0 auto;
}
li:hover i[class*=icon-].cc-icon,li:hover  i[class^=icon-].cc-icon {
  width: 32px; 
}

li:hover i.cc-icon::before, li:hover i.cc-icon::before {
 /* font-size: 32px; */
}
li:hover a .cc-menu-image img{
  height:47px;
  width:32px;
}
li:hover a .cc-menu-image svg {
 /* transform:scale(1.1); */
}

/* Hide Help Menu Links */
#help-dialog-options a[href="https://community.canvaslms.com/community/ideas/feature-ideas"],
#help-dialog-options a[href="https://community.canvaslms.com/community/answers"] {
  display: none !important;
}

/******** Call Out Divs ******/

.cc-callout-div {
  background-color: #003C5F;
  padding: 15px;
  margin: auto;
  color: #fff;
}
.cc-callout-div p {
  padding: 15px;
  margin: auto;
  color: white;
  font-size: 14pt;
}

/****** Dropdowns *******/
.cc-dropdown {
  margin-bottom: 20px;
}

.cc-dropdown details {
  width: 100%;
}

.cc-dropdown summary {
  cursor: pointer;
  font-size: large;
  border: 1px solid #D6D9DC;
  background-color: #003C5F;
  color: #ffffff;
  max-width: 230px;
  padding: 10px 20px;
  border-radius: 25px;
  list-style: none;
  width: fit-content;
}

.cc-dropdown summary:hover {
  background-color: #236192; /* Optional hover effect */
}

.cc-dropdown .cc-dropdown-content {
  margin-top: 20px;
  margin-left: 20px;
  width: 100%;
}

/******* Tabs ******/

.cco-tabs>ul,
.enhanceable_content.tabs>ul {
  list-style: none; /* Remove default list styling */
  padding: 0;
  margin: 0;
  display: flex; /* Align tabs horizontally */
  gap: 10px; /* Add space between tabs */
}

.cco-tabs>ul li,
.enhanceable_content.tabs>ul li {
  margin: 0;
  border: none;
}

.cco-tabs>ul li a,
.enhanceable_content.tabs>ul li a {
  background-color: #236192; /* Tab background */
  color: #ffffff; /* Tab text color */
  font-size: 16pt; /* Font size */
  font-weight: bold; /* Bold text */
  text-decoration: none; /* Remove underline from links */
  padding: 10px 15px; /* Add padding for clickable area */
  display: inline-block;
  border-radius: 5px 5px 0 0; /* Rounded corners */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.cco-tabs>ul li a:hover,
.enhanceable_content.tabs ul li a:hover {
  background-color: #003C5F ; /* Slightly darker background on hover */
}

.cco-tabs>ul li a:active,
.enhanceable_content.tabs ul li a:active {
  background-color: #003C5F; /* Active tab color */
}

.cco-tabs>div,
.enhanceable_content.tabs>div {
  padding: 1rem; /* Space between tabs and content */
  border: 1px solid #003C5F;
}

.cco-tabs>div h3,
.enhanceable_content.tabs>div h3 {
  font-weight: bold; /* Bold tab content title */
  margin-bottom: 10px; /* Add space below the title */
}

.cco-tabs>div p,
.enhanceable_content.tabs>div p {
  margin-bottom: 10px; /* Add spacing between paragraphs */
}

.cco-tabs>ul li a.active,
.enhanceable_content.tabs>ul li a.active {
  background-color: #003C5F; /* Active tab color */
  color: #ffffff;
}



/****EXPERIMENTAL****/

/*Changes the built in page titles of Canvas pages*/
h1.page-title{
  font-size: 2rem !important;
  color: black !important;
  font-weight: 500 !important;

}

/*
	Custom CSS for: numbered boxes - style guide
	Created By: Patrick Volz
	Date Last Edited: 3/10/17
	Purpose/Usage:  This will be used for numbered boxes
	*/
/* New Alert box - Gray and black
--------------------------------------------------------------*/
.cc-alert-black {
  background-color: #EBEDEE;
  border: 2px solid #394B58;
  color: #394B58;
  padding: 8px 14px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(235, 237, 238, 0.5);
  border-radius: 3px; }




/* The base styles for frame & steps
-------------------------------------------------------------- */

.cc-auto-steps {
  counter-reset: step;
  /*  border-bottom: 1px solid #eee;*/
  /*  background: #fff;*/
  padding: 10px 10px;
}

.cc-auto-steps .cc-step-style-red{
  margin: 70px 0 5px;
  position: relative;
  background-color: #f2dede;
  border: 5px solid #b94a48;
  color: #b94a48;
  padding: 30px 14px 8px 14px;

  border-radius: 15px;
}

.cc-auto-steps .cc-step-style-red::before{
  /* content */

  content: counter(cc-auto-steps, decimal);

  /* style */
  background: #653334;
  border: 6px solid #b94a48;
  color: white;
  font-size: 34px;
  font-weight:bold;
  text-align: center;
  border-radius: 50%;

  /* sizing */
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  margin-top: -20px;
  /* mobile first postition */
  float: left;
  position: absolute;
  left: calc(50% - 30px);
  top: -12px;
}





.cc-auto-steps .cc-step-style-blue{
  margin: 70px 0 25px;
  position: relative;
  background-color: #d9edf7;
  border: 5px solid #3a87ad;
  color: #3a87ad;
  padding: 30px 14px 8px 14px;

  border-radius: 15px;
}

.cc-auto-steps .cc-step-style-blue::before{
  /* content */

  content: counter(cc-auto-steps, decimal);

  /* style */
  background: #2a5d76;
  border: 6px solid #3a87ad;
  color: white;
  font-size: 34px;
  font-weight:bold;
  text-align: center;
  border-radius: 50%;

  /* sizing */
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  margin-top: -20px;
  /* mobile first postition */
  float: left;
  position: absolute;
  left: calc(50% - 30px);
  top: -12px;
}



.cc-auto-steps .cc-step-style-green{
  margin: 70px 0 25px;
  position: relative;
  background-color: #dff0d8;
  border: 5px solid #417e42;
  color: #417e42;
  padding: 30px 14px 8px 14px;

  border-radius: 15px;
}

.cc-auto-steps .cc-step-style-green::before{
  /* content */
  /*  content: counter( cc-step-style-blue, decimal);*/
  /*  counter-increment: cc-step-style-blue;*/
  content: counter(cc-auto-steps, decimal);

  /* style */
  background: #2e5c2f;
  border: 6px solid #417e42;
  color: white;
  font-size: 34px;
  font-weight:bold;
  text-align: center;
  border-radius: 50%;

  /* sizing */
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  margin-top: -20px;
  /* mobile first postition */
  float: left;
  position: absolute;
  left: calc(50% - 30px);
  top: -12px;
}





.cc-auto-steps .cc-step-style-yellow{
  margin: 70px 0 25px;
  position: relative;
  background-color: #fcf8e3;
  border: 5px solid #dfd3bd;
  color: #81632f;
  padding: 30px 14px 8px 14px;

  border-radius: 15px;
}

.cc-auto-steps .cc-step-style-yellow::before{
  /* content */

  content: counter(cc-auto-steps, decimal);

  /* style */
  background: #6c5328;
  border: 6px solid #dfd3bd;
  color: white;
  font-size: 34px;
  font-weight:bold;
  text-align: center;
  border-radius: 50%;

  /* sizing */
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  margin-top: -20px;
  /* mobile first postition */
  float: left;
  position: absolute;
  left: calc(50% - 30px);
  top: -12px;
}



.cc-auto-steps .cc-step-style-black{
  margin: 70px 0 25px;
  position: relative;
  background-color: #EBEDEE;
  border: 5px solid #394B58;
  color: #394B58;
  padding: 30px 14px 8px 14px;

  border-radius: 15px;
}

.cc-auto-steps .cc-step-style-black::before{
  /* content */

  content: counter(cc-auto-steps, decimal);

  /* style */
  background: black;
  border: 6px solid #394B58;
  color: white;
  font-size: 34px;
  font-weight:bold;
  text-align: center;
  border-radius: 50%;

  /* sizing */
  box-sizing: content-box;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin-right: 10px;
  margin-top: -20px;
  /* mobile first postition */
  float: left;
  position: absolute;
  left: calc(50% - 30px);
  top: -12px;
}


#cc-counter {
  counter-increment: cc-auto-steps;
}


.cc-clear {
  counter-reset: cc-auto-steps;
}