.alert-green {
    background-color: #F5FFF3;
    border: 1px solid green;

    width: 90%;
    margin: 17px auto 17px auto;
    max-width: 1100px;
    font-size: 100%;
    padding-bottom: 15px;

    box-shadow: 4px 4px 8px 0 grey;
    padding: 0px;
    border-width: 3px;
    border-style: solid;
    border-radius: 10px;
}

.alert-green > p {
    margin: 12px 0 12px 0;
    font-size: 16px;
    color: rgb(34, 34, 34);
    line-height: 1.5;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 10px;
}

.alert-green > ul {
  padding-left: 45px !important;
}


.alert-yellow {
    background-color: #feffc7;
    border: 1px solid black;

    width: 90%;
    margin: 17px auto 17px auto;
    max-width: 1100px;
    font-size: 100%;
    padding-bottom: 15px;

    box-shadow: 4px 4px 8px 0 grey;
    padding: 0px;
    border-width: 3px;
    border-style: solid;
    border-radius: 10px;
}

.alert-yellow > p {
    margin: 12px 0 12px 0;
    font-size: 16px;
    color: rgb(34, 34, 34);
    line-height: 1.5;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 10px;
}

.alert-yellow > ul {
  padding-left: 45px !important;
}

.alert-blue {
    background-color: #F4FFFF;
    border: 1px solid black;

    width: 90%;
    margin: 17px auto 17px auto;
    max-width: 1100px;
    font-size: 100%;
    padding-bottom: 15px;

    box-shadow: 4px 4px 8px 0 grey;
    padding: 0px;
    border-width: 3px;
    border-style: solid;
    border-radius: 10px;
}

.alert-blue > p {
    margin: 12px 0 12px 0;
    font-size: 16px;
    color: rgb(34, 34, 34);
    line-height: 1.5;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 10px;
}

.alert-blue > ul {
  padding-left: 45px !important;
}



div.assign-tbl, div.assign-qtbl {
    display: table;
  }

 div.assign-qtr {
    display: table-row;
  }

 div.assign-qtr:nth-child(even) {
    background: #EEE;
  }

 div.assign-qtr:nth-child(odd) {
    background: #DDD;
  }

 div.assign-qtd {
    display: table-cell;
  }

  div.assign-qtd {
    padding-left: 5px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  div.assign-tbl {
    margin-bottom: 15px;
  }

  div.assign-qtbl {
    margin-bottom: 15px;
  }


  details.assign {
    border-radius: 12px;
    background: #DFF;
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 5px 0px;
}

div.assign-btop {
    border-radius: 12px 12px 0 0;
    font-weight: bold;
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    margin: 0px;
  }

  div.assign-bbot {
    border-width: 3px;
    border-style: none solid solid solid;
    border-radius: 0 0 12px 12px;
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 10px 0px;
  }

  div.assign-tiptop {
    background: #3C3;
  }

  div.assign-tiptop > p {
    margin: 5px 0 5px 0 !important;
    color: #FFF !important;
  }


  div.assign-tip {
    border-color: #3C3;
  }

  div.assign-tip > p {
    font-size: 18px;
    line-height: 1.5;
    margin: 4px 0 12px 0;
  }

.rules ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

.rules ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}


.rules ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}


.rules li ol > li {
  margin: 0;
}

.rules li ol > li:before {
  content: counters(item, ".") " ";
}

.rule0 ol {
  counter-reset: item -1;
}

.rule1 ol {
  counter-reset: item 0;
}

.r1 {font-size: 20px; font-weight: bold;}
.r2 {font-size: 18px; font-weight: bold;}
.r3 {font-size: 16px; font-weight: bold;}

textarea.stdin {
  width: 400px;
  background-color: black;
  color: white;
  height: 83%;
  font-family: monospace;
  font-size: 16px;
}



div.alert-btop {
  font-weight: bold;
  font-size: 16px;
  padding: 5px 10px 5px 10px;
  margin: 0px;
}

div.alert-bbot {
  border-width: 3px;
  border-style: none solid solid solid;
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 10px 0px;
}


div.alert-grey {
  padding: 12px 12px 1px 12px;
  background: gainsboro;
}


.alert-red {
    box-shadow: 4px 4px 8px 0 grey;
    padding: 0px;
    margin: 17px 5px 17px 5px;
    border-width: 3px;
    border-style: solid;
    border-radius: 10px;
    font-size: 16px;
    color: rgb(22, 23, 24);
    line-height: 1.5;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

.alert-red > p.block-title  {
    font-weight: 400;
    padding: 2px 5px 5px 10px;
    text-shadow: 2px 2px 2px black;
    color: white;
    display: block;
    margin: 0 0 5px 0 !important;
    font-size: 16px !important;
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
    box-sizing: border-box;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.alert-red > p,
.alert-red > div,
.alert-red > ul li,
.alert-red > ol li{
  padding-left: 10px;
  padding-right: 10px;
}

.alert-red > ul,
.alert-red > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
}


.alert-red > p {
    margin: 0 0 5px 0 !important;
    font-size: 16px !important;
    color: rgb(22, 23, 24);
    line-height: 1.5;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    max-width: 1100px;
}


.alert-red {
  border-color: #80001F;
  width: 80%;
  margin: 17px auto 17px auto;
  max-width: 1100px;
}

.alert-red > p.block-title {
  border-color: #80001F;
  background-color: #80001F;
}





.assign-warning {
  box-shadow: 4px 4px 8px 0 grey;
  padding: 0px;
  margin: 17px 5px 17px 5px;
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.assign-warning > p.block-title  {
  font-weight: 400;
  padding: 2px 5px 5px 10px;
  text-shadow: 2px 2px 2px black;
  color: white;
  display: block;
  margin: 0 0 5px 0;
  font-size: 16px  !important;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.assign-warning > p,
.assign-warning > div,
.assign-warning > ul li,
.assign-warning > ol li{
padding-left: 10px;
padding-right: 10px;
}

.assign-warning > ul,
.assign-warning > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
}


.assign-warning > p {
  margin: 0 0 5px 0 !important;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}


.assign-warning {
border-color: #80001F;
margin: 17px auto 17px auto;
}

.assign-warning > p.block-title {
border-color: #80001F;
background-color: #80001F;
}





.assign-protip {
  box-shadow: 4px 4px 8px 0 grey;
  padding: 0px;
  margin: 17px 5px 17px 5px;
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.assign-protip > p.block-title  {
  font-weight: 400;
  padding: 2px 5px 5px 10px;
  text-shadow: 2px 2px 2px black;
  color: white;
  display: block;
  margin: 0 0 5px 0;
  font-size: 16px  !important;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.assign-protip > p,
.assign-protip > div,
.assign-protip > ul li,
.assign-protip > ol li{
padding-left: 10px;
padding-right: 10px;
}

.assign-protip > ul,
.assign-protip > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
}


.assign-protip > p {
  margin: 0 0 5px 0 !important;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}


.assign-protip {
border-color: #4a9b8b;
margin: 17px auto 17px auto;
}

.assign-protip > p.block-title {
border-color: #4a9b8b;
background-color: #4a9b8b;
}



.assign-note {
  box-shadow: 4px 4px 8px 0 grey;
  padding: 0px;
  margin: 17px 5px 17px 5px;
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.assign-note > p.block-title  {
  font-weight: 400;
  padding: 2px 5px 5px 10px;
  text-shadow: 2px 2px 2px black;
  color: white;
  display: block;
  margin: 0 0 5px 0;
  font-size: 16px  !important;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.assign-note > p,
.assign-note > div,
.assign-note > ul li,
.assign-note > ol li{
padding-left: 10px;
padding-right: 10px;
}
.assign-note > ul,
.assign-note > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
}

.assign-note > p {
  margin: 0 0 5px 0  !important;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}


.assign-note {
border-color: #4c50c4;
margin: 17px auto 17px auto;
}

.assign-note > p.block-title {
border-color: #4c50c4;
background-color: #4c50c4;
}





.assign-black {
  box-shadow: 4px 4px 8px 0 grey;
  padding: 0px;
  margin: 17px 5px 17px 5px;
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.assign-black > p.block-title  {
  font-weight: 400;
  padding: 2px 5px 5px 10px;
  text-shadow: 2px 2px 2px black;
  color: white;
  display: block;
  margin: 0 0 5px 0;
  font-size: 16px  !important;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.assign-black > p,
.assign-black > div,
.assign-black > ul li,
.assign-black > ol li{
padding-left: 10px;
padding-right: 10px;
}

.assign-black > ul,
.assign-black > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
  list-style: lower-alpha !important;
}


.assign-black > p {
  margin: 0 0 5px 0  !important;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}


.assign-black {
border-color: #000000;
margin: 17px auto 17px auto;
}

.assign-black > p.block-title {
border-color: #000000;
background-color: #000000;
}


.assign-gold {
  box-shadow: 4px 4px 8px 0 grey;
  padding: 0px;
  margin: 17px 5px 17px 5px;
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.assign-gold > p.block-title  {
  font-weight: 400;
  padding: 2px 5px 5px 10px;
  text-shadow: 2px 2px 2px black;
  color: white;
  display: block;
  margin: 0 0 5px 0;
  font-size: 16px  !important;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.assign-gold > p,
.assign-gold > div,
.assign-gold > ul li,
.assign-gold > ol li{
padding-left: 10px;
padding-right: 10px;
}

.assign-gold > ul,
.assign-gold > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
  list-style: lower-alpha !important;
}


.assign-gold > p {
  margin: 0 0 5px 0  !important;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}


.assign-gold {
border-color:rgb(187, 153, 51);
margin: 17px auto 17px auto;
}

.assign-gold > p.block-title {
border-color: rgb(187, 153, 51);
background-color: rgb(187, 153, 51);
}


.assign-grey {
  box-shadow: 4px 4px 8px 0 grey;
  padding: 0px;
  border-width: 3px;
  border-style: solid;
  border-radius: 10px;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  border-color: rgb(105, 105, 105);
  margin: 17px auto 17px auto;
}

.assign-grey > p.block-title  {
  font-weight: 400;
  padding: 2px 5px 5px 10px;
  text-shadow: 2px 2px 2px black;
  color: white;
  display: block;
  margin: 0 0 5px 0;
  font-size: 16px  !important;
  font-family: "Open Sans", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-color: rgb(105, 105, 105);
  background-color: rgb(105, 105, 105);
}

.assign-grey > p,
.assign-grey > div,
.assign-grey > ul li,
.assign-grey > ol li{
padding-left: 10px;
padding-right: 10px;
}

.assign-grey > ul,
.assign-grey > ol{
  padding-top: 10px !important;
  padding-left: 40px !important;
  list-style: lower-alpha !important;
}


.assign-grey > p {
  margin: 0 0 5px 0  !important;
  font-size: 16px !important;
  color: rgb(22, 23, 24);
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

.assign-black.internal,
.assign-grey.internal,
.assign-gold.internal,
.assign-note.internal,
.assign-protip.internal,
.assign-warning.internal,
.alert-red.internal {
  width: 90%;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.center_image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.code-output {
  background-color: #F4FFFF;
  border: 1px solid lightgrey;
  width: 80%;
  text-align: left;
  margin: 0 auto;
}

.code-output pre {
  margin: 0px !important;
}