/* Note: I like this green color: hsl(123.47deg 25% 68.71%) */

:root {
  /* Set colors for environments */
    
    --assembbody: var(--bluelight, hsl(240, 14%, 99%));
    --assembborder: var(--blue, hsl(210, 40%, 60%));
    --assembhead: var(--blue, hsl(210, 40%, 75%));
    --definitionbody: var(--greenlight, hsl(180, 35%, 95%));
    --definitionborder: var(--green, hsl(180, 40%, 80%));
    --definitionhead: var(--green, hsl(180, 40%, 50%));
    --theorembody: var(--violetlight, hsl(270, 40%, 94%));
    --theoremborder: var(--violet, hsl(270, 40%, 75%));
    --theoremhead: var(--violetdark, hsl(270, 40%, 25%));
    --examplebody: var(--bluedull, hsl(240, 40%, 90%));
    /* --exampleborder: var(--bluedark, hsl(240, 40%, 25%)); */
    --exampleborder: var(--darkbluedull, hsl(224.78deg 91.78% 85.69%));
    --examplehead: var(--purewhite, hsl(0, 0%, 100%));
    --examplelikebody: var(--examplebody);
    --examplelikeborder: var(--bluedull, hsl(240, 40%, 75%));
    --examplelikehead: var(--examplelikeborder);
    --projectbody: var(--greenlight, hsl(180, 40%, 94%));
    --projectborder: var(--green, hsl(180, 40%, 75%));
    --projecthead: var(--green, hsl(180, 40%, 75%));
    --investigateborder: var(--bluerich, hsl(180, 40%, 25%));
    --goalborder: var(--violetrich, hsl(270, 90%, 25%));
    --remarklikebody: var(--yellowlight, hsl(59, 55%, 85%));
    --remarklikeborder: var(--yellow, hsl(59, 55%, 50%));
    --remarklikehead: var(--yellow, hsl(59, 55%, 50%));
    --computationborder: var(--orangedull, hsl(180, 40%, 75%));
    --parttoactive: var(--blue, hsl(190, 56%, 46%));
    /* temporary workaround for setcolors.css use of assemblage */
    --asemblagebackground: var(--assembbody) !important;
    --assemblageborder: var(--assembborder) !important;
  }
  
  /* We can style all the *-like environments: 
      definition-like, 
      theorem-like, 
      example-like, 
      project-like, 
      remark-like, 
      computation-like, 
      goal-like, and
      assemblage-like. 
    We also could do something for proofs, and commentary. 
  
    (should we style aside-like?  Or just copy from style_default?)
    
    We define the style of environments in three steps: first the shape, then the color, and finally the shape and color of the heading/title.  The only reason to group these as such is that we can then have a common shape for differet *-like elements, but still allow for different colors to distinguish them.
  
    Start with the important custom environments (theorem might be different from the other theorem-like, etc.), then clean up any standard *-like.
    
  */
  
  /* definitions, theorems, assemblages, with theorem-like.theorem distinguished */
  .ptx-content .assemblage-like,
  .ptx-content .definition-like,
  .ptx-content .theorem-like.theorem {
      margin-top: 1.75em;
      padding: 1em;
      border-radius: 12px;
      margin-bottom: 1em;
  }
  
  .ptx-content .theorem-like {
    margin-top: 1.25em;
    padding: 1em;
    border-radius: 2px;
    margin-bottom: 1em;
  }
  
  .ptx-content .assemblage-like{
      background-color: var(--assembbody);
      border: 2px solid var(--assembborder);
  }
  
  .ptx-content .definition-like {
    background-color: var(--definitionbody);
    border: 2px solid var(--definitionborder);
  }
  
  .ptx-content .theorem-like.theorem,
  .ptx-content .theorem-like {
    background-color: var(--theorembody);
    border: 2px solid var(--theoremborder);
  }
  
  .ptx-content .assemblage-like .heading,
  .ptx-content .definition-like .heading,
  .ptx-content .theorem-like.theorem .heading {
    margin-top: -1.75em;
    margin-left: -1.0em;
    display: table;
    padding-top:    0.05em;
    padding-bottom: 0.05em;
    padding-left:   0.4em;
    padding-right:  0.2em;
    text-transform: uppercase;
    /* text-shadow: 1px 1px 0px #957dad,
                1px 2px 0px #957dad,
                1px 3px 0px #957dad,
                1px 4px 0px #957dad,
                1px 5px 0px #957dad,
                1px 6px 0px #957dad,
                1px 10px 5px rgba(16, 16, 16, 0.5),
                1px 15px 10px rgba(16, 16, 16, 0.4),
                1px 20px 30px rgba(16, 16, 16, 0.3),
                1px 25px 50px rgba(16, 16, 16, 0.2); */
  }
  
  .ptx-content .assemblage-like .heading {
    background-color: var(--assembhead);
    color: #000;
  }
  
  .ptx-content .definition-like .heading {
    background-color: var(--definitionborder);
    color: #000;
    border: 2px solid var(--definitionborder);
    border-radius: 0px;
  }
  
  .ptx-content .theorem-like.theorem .heading {
    background-color: var(--theoremborder);
    color: #000;
  }
  
  .ptx-content .example-like > .heading + .introduction, 
  .ptx-content .computation-like > .heading + .introduction,
  .ptx-content .assemblage-like .heading + .para,
  .ptx-content .computation-like > .heading + .para,
  .ptx-content .example-like .heading + .para,
  .ptx-content .theorem-like.theorem .heading + .para,
  .ptx-content .definition-like .heading + .para {
    display: block;
    margin-top: 0.25em;
  }
  
  /* Examples and example-like; computation-like styled same as example-like with different colors 
  .ptx-content .example-like,
  .ptx-content .computation-like {
    padding-left: 0.8em;
    padding-bottom: 0.5em;
  }
  
  .ptx-content .example-like.example {
    border-left: 0.1em solid var(--examplehead);
    border-bottom: 0.1em solid var(--examplehead);
  }
  
  .ptx-content .example-like {
    border-left: 0.1em solid var(--examplelikeborder);
    border-bottom: 0.1em solid var(--examplelikeborder);
  }
  
  .ptx-content .computation-like {
    border-left: 0.1em solid var(--computationborder);
    border-bottom: 0.1em solid var(--computationborder);
  }
  
  .ptx-content .example-like > .heading,
  .ptx-content .computation-like > .heading {
    display: inline-block;
    padding: 0.3em 0.5em;
    margin-left: -0.8em;
  }
  
  .ptx-content .example-like {
    background-color: transparent;
    border: 2px solid var(--definitionborder);
  }

  .ptx-content .example-like.example > .heading {
    border: 0.1em solid var(--examplehead);
    background: var(--examplehead);
    color: white;
  }
  
  .ptx-content .example-like > .heading {
    background: var(--examplelikeborder);
    color: black;
  }
  
  .ptx-content .computation-like > .heading {
    background: var(--computationborder);
    color: black;
  }*/
  


  /* Examples and example-like; computation-like styled same as example-like with different colors */
  .ptx-content .example-like,
  .ptx-content .computation-like {
  padding-top: 0.3em;
  padding-left: 1em;
  padding-bottom: 1em;
  padding-right: 1em;
  margin-bottom: 1em;
  border-radius: 8px 0px 8px 0px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(178deg, #fff 0%, hsl(198.28deg 92.04% 85.36%) 100%);
  }

  .ptx-content .example-like.example {
  /* border-left: 4px solid var(--examplehead); */

  }

  .ptx-content .example-like {
  /* border-left: 4px solid var(--examplelikeborder); */
  border: 2px solid var(--exampleborder);
  }

  .ptx-content .computation-like {
  border-left: 4px solid var(--computationborder);
  border-bottom: 3px solid var(--computationborder);
  }

  .ptx-content .example-like > .heading,
  .ptx-content .computation-like > .heading {
  display: inline-block;
  padding: 0.25em 0.2em;
  margin-left: -0.85em;
  margin-top: -0.4em;
  font-weight: bold;
  font-size: 1.2em;
  border-radius: 4px 0px 4px 0px
  }

  .ptx-content .example-like.example > .heading {
  border: none;
  /* background: var(--examplehead); */
  color: rgb(0, 0, 0);
  }

  .ptx-content .example-like > .heading {
  background: var(--exampleborder);
  color: white;
  }

  .ptx-content .computation-like > .heading {
  background: var(--computationborder);
  color: white;
  }

  /* Example content styling */
  .ptx-content .example-like p,
  .ptx-content .computation-like p {
  margin: 0.5em 0;
  line-height: 1.6;
  }

  .ptx-content .example-like code,
  .ptx-content .computation-like code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 4px;
  }

  Example and computation blocks hover effect
  .ptx-content .example-like:hover,
  .ptx-content .computation-like:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
  }

  /* .ptx-content .example-like.example:hover,
  .ptx-content .example-like:hover > .heading,
  .ptx-content .computation-like:hover > .heading {
  background: hsl(123.47deg 25% 75%);
  color: #fff;
  } */

  /* .ptx-content .example-like.example:hover > .heading {
  background: hsl(123.47deg 25% 60%);
  } */

  .ptx-content .example-like .aside-like {
  margin-top: 0.5em;
  padding: 0.5em;
  background: rgba(255, 255, 255, 0.8);
  border-left: 4px solid var(--examplelikeborder);
  border-radius: 4px;
  }

  /* Project-like */
  .ptx-content .project-like {
    background-color: white;
    border: solid 3px var(--projectborder);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 1em;
  }
  
  .ptx-content .project-like.investigation {
    border-color: var(--investigateborder);
  }
  
  .ptx-content .project-like > .heading {
    margin-top: -1.5em;
    background-color: white;
    display: table !important;
    padding: 5px 1em;
    margin-left: 10px;
    font-style: italic;
    font-size: 120% !important;
  }
  
  /* Added these to improve examples and solutions */
  .ptx-content article.example-like > .solution-like,
  .ptx-content article.exercise-like > .solution-like {
  margin-top: 0.7em;
  padding-left: 0.0em;
  }

  .knowl__link:is(:hover, :focus, [open]) {
      background-color: transparent;
      border-bottom-color: transparent;
  }

  .knowl__content {
    padding-top: 0.0em;
    padding-bottom: 0.0em;
    padding-right: 0.4em;
    padding-left: 0.4em;
}
  

  /* Goal-like */
  .ptx-content .goal-like {
    background-color: white;
    border-radius: 0em;
    padding: 0.7em;
    margin-bottom: 1em;
  }
  .ptx-content .goal-like.objectives {
    border-top: solid 3px var(--goalborder);
    border-bottom: solid 3px var(--goalborder);
  }
  .ptx-content .goal-like.outcomes {
    border-top: solid 3px var(--goalborder);
    border-bottom: solid 3px var(--goalborder);
  }
  
  .ptx-content .goal-like .heading {
    margin-top: -1.5em;
    background-color: white;
    display: table;
    padding: 5px 1em;
    margin-left: 10px;
    font-style: italic;
    font-size: 120%;
  }
  
  /* remark-like */
  
  .ptx-content .remark-like {
    margin-top: 0.50em;
    padding: 0.50em;
    padding-top: 0.2em;
    margin-bottom: 0.2em;
    border-radius: 0px;
    /* border-left: 0px solid var(--remarklikeborder); */
    background-color: transparent;
  }

  /* .ptx-content .remark-like:hover, .ptx-content .remark-like:focus, [open] {
    background-color: transparent;
  } */
  
  /* proofs */
  
  .ptx-content section > .proof {
    margin-bottom: 1em;
  }
  
  
  /* Common fixes? */
  .ptx-content .assemblage-like .heading::after,
  .ptx-content .theorem-like.theorem .heading::after,
  .ptx-content .theorem-like .heading::after,
  .ptx-content .example-like > .heading::after,
  .ptx-content .project-like > .heading::after {
    content: "";
  }
  
  /* Fixes for mathjax: */
  /* These gradients need to be adjusted to match background colors */
  .ptx-content .assemblage-like .MJXc-display,
  .ptx-content .definition-like .MJXc-display,
  .ptx-content .theorem-like.theorem .MJXc-display {
      background-image: linear-gradient(to right, #e9eff5, #e9eff5), linear-gradient(to right, #e9eff5, #e9eff5), linear-gradient(to right, rgba(0,0,0,.25), rgba(242,242,254,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(242,242,254,0));
  }
  .ptx-content .theorem-like.corollary .MJXc-display {
      background-image: linear-gradient(to right, var(--bodytitlehighlight), var(--bodytitlehighlight)), linear-gradient(to right, var(--bodytitlehighlight), var(--bodytitlehighlight)), linear-gradient(to right, rgba(0,0,0,.25), rgba(242,242,254,0)), linear-gradient(to left, rgba(0,0,0,.25), rgba(242,242,254,0));
  }
  
  /* 
  END OF STYLE_OSCARLEVIN
  (below is only stuff copied from style_default)
  */
  
  
  
  /* Assides, copied directly from style_default.css */
  /* next selector first part of the following is due to the mistake of
     putting paragraph spacing in the margin-bottom 
     Redo when we fix that error */
  .ptx-content .aside-like {
   /*   margin-top: -1.25em;
  */
      position: absolute;
      margin-left: 45%;
      overflow-x: hidden;
      max-width: 495px;
      max-height: 7em;
      overflow-y: hidden;
      border: none;
      padding: 4px 10px 0 10px;
      color: #888;
  }
  .ptx-content .example-like .aside-like {
      margin-top: 0;
      position: absolute;
  }
  .ptx-content .aside-like {
      font-size: 90%;
  }
  .ptx-content .aside-like {
    margin-bottom: 5px;
    background-color: #f5faff;
    box-shadow: 0 0 1.0em 0.2em #fff inset;
  }
  .ptx-content .aside-like:first-child {
      margin-top: -2.25em;
  }
  .ptx-content .aside-like:after {
    content  : "";
    position : absolute;
    z-index  : 1;
    top   : 0em;  
    bottom   : 0;
    left     : 0;
    pointer-events   : none;
    background-image : linear-gradient(to bottom, 
                      rgba(255,255,255, 0.4), 
                      rgba(255,255,255, 1) 90%);
    width    : 550px;
    height   : 8em;
  }
  /* example of where the following is needed? */
  /*
  .ptx-content .aside-like * {
      background-color: #f5faff !important;
  }
  */
  .ptx-content .aside-like.front, .ptx-content .example-like .aside-like.front {
    position: relative;
    z-index: 0;
    padding: 8px 15px 10px 15px;
    padding: 2px 10px;
    margin: 5px 0px 5px 10px;
    border: 2px solid #dcebfa;
    max-height: none;
    max-width: 550px;
    color: inherit;
    font-size: 100%;
    box-shadow: none;
  }
  .ptx-content .aside-like.front:after, .ptx-content .example-like .aside-like.front:after {
      background-image: none;
  }
  .ptx-content .example-like .aside-like.front {
      margin-top: 1.25em;
  }
  
  .ptx-content .aside-like.front + .para{
      margin-top: 1.25em !important;
      padding-top: 0;
  }
  
  
  
  .ptx-content .aside-like .aside-like {
    background-color: #fafff5;
    border: 1px dotted #aaa;
  }
  
  .ptx-content article.aside-like > .para:first-child {
      margin-top: 0;
  }
  
  .ptx-content .aside-like > .heading {
      font-size: 95%;
  }
  
  .ptx-content .aside-like + *{
      margin-top: 3em !important;
      margin-right: 3em;
  }
  
  /* on sufficiently large screens, there is enough of a margin to see part of the aside */
  
  @media screen and (min-width: 943px) {
    .ptx-content .aside-like + * {
        margin-right: 0;
    }
  }
  
  /* on a wide screen, asides should appear in the right margin */
  @media screen and (min-width: 1100px) {
    .ptx-content .aside-like, .ptx-content .aside-like.front, .ptx-content .example-like .aside-like, .ptx-content .example-like .aside-like.front {
        position: absolute;
        margin-top: -2em;
        margin-left: 660px;
        max-width: 200px;  /* for some reason the width was too small, so I had to put width (next line) */
        width: 200px;
        color: inherit;
    }
    .ptx-content .aside-like.front, .ptx-content .example-like .aside-like.front {
        max-height: none;
        max-width: 223px;
        border: 2px solid #dcebfa;
  }
    .ptx-content .example-like .aside-like, .ptx-content .example-like .aside-like.front {
        margin-left: 654px;  /* because .example-like has 6px of padding */
    }
  
    .ptx-content .aside-like + * {
        margin-top: 1.25em !important;
    /*    background: none;  */
        margin-right: 0;
    }
  
    .ptx-content .aside-like.front:after, .ptx-content .example-like .aside-like.front:after {
      background-image: none;
    }
  
    .ptx-content .aside-like:nth-of-type(3n+1) {
      margin-left: 660px;
  }
    .ptx-content .aside-like:nth-of-type(3n) {
      margin-left: 680px;
  }
    .ptx-content .aside-like:nth-of-type(3n+2) {
      margin-left: 640px;
  }
  }
  
  .ptx-content .aside-like:hover:after, .ptx-content .aside-like:focus:after {
      top: 3em;
      height: auto;
      background-image : none;
  }
  
  .ptx-content .aside-like:hover, .ptx-content .aside-like:focus {
      color: inherit;
      padding: 2px 8px 0 8px;
      border: 2px solid #dcebfa;
      height: auto;
      max-height: none;
  }
  .ptx-content .aside-like.front:hover, .ptx-content .aside-like.front:focus {
      padding: 4px 10px;
  }
  
  /* find a better way to handle asides in content that has a wide left margin */
  /* see http://pretext.jahrme.com/aside-in-knowl/section-1.html */
  .ptx-content section dl dd .aside-like {
      margin-top: 0 !important;
      margin-left: 100px !important;
  }
  .ptx-content section dl dd .aside-like.front {
      margin-left: -300px !important;
  }
  
  .runestone_caption {
    display:none;
  }

  /* .ptx-runestone-container br {
    display: none;
  } */

  .ptx-runestone-container label {
    margin-right: 15px;
  }
  
  .ptx-runestone-container *{
    font-weight: 400;
  }

  .ptx-runestone-container .alert alert-info div {
    margin-bottom: 1px;
  }

  .ptx-runestone-container form + br {
    display: none;
  }

  .ptx-runestone-container div[id*="fillin"] br {
    display: none;
  }

  .ptx-content section.reading-questions {
    border-top: solid 3px var(--goalborder);
    border-bottom: solid 3px var(--goalborder);
    margin-top: 1.5em;
  }

  .ptx-content section.reading-questions > .heading {
    margin-top: -1.0em;
    background-color: white;
    display: table;
    padding: 5px 0.7em;
    margin-left: 10px;
    font-style: italic;
    font-size: 120%;
  }
  
  .ptx-content summary.knowl__link {
    border-bottom-style: hidden;
    margin-bottom: 0.5em;
  }

  .ptx-content summary.knowl__link > .heading {
    font-weight: 200;
  }

  .ptx-toc.focused > .toc-item-list > :is(.toc-frontmatter, .toc-part, .toc-backmatter).active { 
    background-color: hsl(206, 64%, 46%);
    color: hsl(0, 0%, 0%);
  }

  .ptx-toc.focused ul.structural li.active > ul > li[class*="toc-reading-questions"] {
    display: none;
  }

  /* .ptx-content summary.knowl__link span:not(.title) {
    display: none;
  } */

	/* .ptx-content summary.knowl__link .title {
		display: inline; /* Ensure the title is displayed 
	} */

	.ptx-content summary.knowl__link span:not(.title) {
		display: none;
	}

	.ptx-content summary.knowl__link span[class*="process-math"] {
		display: inline;
	}


  @media screen and (max-width: 1099px) {
    .ptx-content .aside-like {
      position: relative;
      float: right;
      z-index: 0;
      overflow-x: hidden;
      margin-left: 1em;
      margin-top: 1em;
      max-width: 195px;
      max-height: 4em;
      margin-right: -8em;
  }
    .ptx-content li > .aside-like:last-child {
      position: absolute;
  }
  }