/* -----------To-Do Note------------- */
.todo {
  padding: 1em;
  margin: 0 0;
  padding-left: 15px;
  padding-top: 15px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  min-height: 120px;
  color: #000000;
  background-color: #fffdc0;
  border: solid 3px #ffb71e;
  border-radius: 25px;
  }
  

/* -----------Protip Note (Centered)------------- */

.protip {
  padding: 1em;
  margin: 1em 0;
  padding-left: 15px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: table;
  vertical-align: middle;
  color: #000;
  background-color: #fffdc0;
  border: solid 3px #ffb71e;
  box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border-bottom-right-radius: 225px 15px;
  border-bottom-left-radius:15px 255px;
  }
  

/* -----------FYI Note (Left-Aligned)------------- */

.fyi {
  padding: 1em;
  margin: 1em 0;
  padding-left: 15px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: table;
  vertical-align: middle;
  color: #000;
  background-color: #fffdc0;
  border: solid 3px #ffb71e;
  box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border-bottom-right-radius: 225px 15px;
  border-bottom-left-radius:15px 255px;
  }
  

/* -----------Grey Math Note------------- */

.mathnote {
  padding: 1em;
  margin: 1em 0;
  padding-left: 100px;
  min-height: 120px;
  color: #000;
  background-color: #edeeea;
  border: dashed 5px #869889;
  }  
  
  
/* -----------Yellow Interpretation Note------------- */

.codeout {
  padding: 1em;
  margin: 1em 0;
  padding-left: 10;
  background-size: 70px;
  background-repeat: no-repeat;
  background-position: 15px 50%;
  min-height: 120px;
  background-color: #f2f0ef;
  font-family: $monofont;
  }