/* Quiz responses */

/* Quiz is not answered*/
#quizanswer:not([class]) #notanswered {display:block;}
#quizanswer:not([class]) p#whichanswer {display:none;}
#quizanswer p#whichanswer > span {display:none;}

/* Quiz is answered */
#quizanswer.reveal #notanswered {display:none;}

/* Which answer given */
#quizanswer.reveal.American #American {display:initial;}
#quizanswer.reveal.British #British {display:initial;}
#quizanswer.reveal.Other #Other {display:initial;}



/* Customize the label (the container) */
/* From: https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.CSInputContainer {
  display: block;
  position: relative;
  text-align:left;
  padding-left: 40px;
  margin-left:5%;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1.2rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

/* Hide the browser's default radio button */
.CSInputContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.CSInputContainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 26px;
  width: 26px;
  background-color: #eee;
  border-radius: 50%;
  border: 1px dashed grey;
}

/* On mouse-over, add a grey background color */
.CSInputContainer:hover input ~ .checkmark {
  background-color: #ccc;
  border:1px solid black
}

/* When the radio button is checked, add a blue background */
.CSInputContainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.CSInputContainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.CSInputContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.CSInputContainer .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}
.et_builder_inner_content .et_pb_title_container h1 {
    text-align: center !important;
}

#main-content .et_builder_inner_content .et_builder_inner_content .et_pb_section > .et_pb_row {
    margin-inline: 0 3em;
    width: initial;
}

#main-content .et_builder_inner_content > .et_pb_section {
    background:none;
}

#main-content .et_builder_inner_content > .et_pb_section:not(.section_has_divider) {
    background-color:initial !important;
}

/* TOC */
div#newtocparent ul.toc_list > li > a:first-child, ul.toc_list >li > ul > li > a:first-child {
    font-weight:normal;
}
div#newtocparent ul {
    padding-bottom: 0;
    padding-left:0;
    margin-left:1em;
}
div#newtocparent ul li {
    margin-bottom:0.5em;
    list-style-type:decimal;
    /*
    padding-left: 0 !important;
    margin-left: 0;
    */
}
div#newtocparent ul li span.toc_number {
    display:none;
}
div#newtocparent ul > li > ul {
    display:none;
}
div#newtocparent span.toc_number::after {
    content: ") ";
}

/* Tablets */
@media only screen and ( max-width: 980px ) {
    /* Experimental: these next two lines control the inline padding of sections used in Divi posts */
    #et-main-area > #main-content > .et-l--body > .et_builder_inner_content > .et_pb_section  > .et_pb_row:first-child .et_pb_column:not(:first-child){
        padding-inline:1em;
    }
    #et-main-area > #main-content > .et-l--body > .et_builder_inner_content > .et_pb_section:first-child > .et_pb_row:first-child {
        padding-inline:0;
    }

    /* Overrides the above */
    #WashingMachineArgumentSteps {
        & > .et_pb_column:nth-child(2) {
            padding-inline: 0 !important;
        }
    }


    #main-content .et_builder_inner_content .et_builder_inner_content .et_pb_section > .et_pb_row {
        margin-inline: 1em;
    }

    /* Don't let the feedback form take all the space */
    .rwp-review-wrap {
        background-color: transparent;
    }

    #main-content > div.et-l.et-l--body > div.et_builder_inner_content > div.et_pb_section > div.et_pb_row > div.et_pb_column:first-child {
        padding-left:10px;
    }
}

/* Smartphones */
@media only screen and ( max-width: 480px ) {
    /* Why??
    body.single .et_builder_inner_content > .et_pb_section > .et_pb_row {
        padding-bottom:2em !important;
    }
    */
    /*
    body.single .et_pb_section {
        background-color: white !important;
    }
    */
}