:root {
  --dragdropfontsize: 15px;
  --page-bg: #f5f5f5;
  --blue1: #0176D3; /*hsl(206.57,99.06%,41.57%); slds-g-color-brand-base-50 (Brand up)*/
  --blue2: #014486; /*hsl(209.77,98.52%,26.47%); slds-g-color-brand-base-30 (Brand over)*/
  --blue3: #032d60; /*slds-g-color-brand-base-20 (Brand down)*/
  --blue4: #EAF5FE; /*pale blue background; slds-g-color-palette-cloud-blue-95*/
  --blue5: #CEE8FD;
  --blue6: #0070D2; /*Hover buttons*/
  --btnbrandup: hsl(206.57,99.06%,41.57%); /*#0176D3; slds-g-color-brand-base-50 (Brand up)*/
  --btnbrandover: hsl(209.77,98.52%,26.47%); /*#014486; slds-g-color-brand-base-30 (Brand over)*/
  --btnbranddown: #032d60; /*slds-g-color-brand-base-20 (Brand down)*/
  --btnneutralup: #FFFFFF;
  --btnneutralover: #F5F5F5;
  --btnneutraldown: #E2E2E2;
  --grey1: #F3F3F3; /*slds-g-color-neutral-base-95*/
  --grey2: #5F5F5F; /*slds-g-color-neutral-base-65*/
  --grey3: #E5E5E5; /*slds-g-color-neutral-base-90*/
  --grey4: #F5F5F5; /*trailhead background*/
  --grey5: #F1F1F1;
  --grey6: #9A8F87;
  --grey7: #E6E6E6;
  --text1: #233A47; /*slds-g-color-neutral-base-10 (Main text)*/
  --text2: #000000; /*black*/
  --text3: #616161; /*slds-g-color-neutral-base-10 (Main text)*/
  --white: #FFFFFF; /*white*/
  --black: #000;
  --correct: #2e844a !important; /*slds-g-color-success-base-50*/
  --incorrect: #ba0517 !important; /*slds-g-color-error-base-40*/
  --fontsize1: 16px;
  --fontsize2: 14px;
  --fontsize3: 20px;
  --fontsize4: 15px;
  --fontsize5: 18px;
  --dk-brand: #4e758d; /*body gradient color*/
  --dk-gray: #20272c; /*body gradient color*/
  --focus: #d71ef7; /*focus color*/
  --generate: #bc0560; /*pink*/
}
html{
    height:500px;
    width:875px;
  }
body {
  box-sizing: border-box;
  margin: 0;
  background-color: var(--page-bg);
  font-family: 'Salesforce Sans Regular', sans-serif;
  max-width: 875px;
  max-height: 500px;
}
*:focus {
    outline: 2px solid var(--focus);
}
strong {
  font-family: "Salesforce Sans Bold", sans-serif;
}
b {
  font-family: "Salesforce Sans Bold", sans-serif;
}
.boldtext {
  font-family: "Salesforce Sans Bold", sans-serif;
}
.emphasis {
  font-family: "Salesforce Sans Italic", sans-serif;
}
.code {
  font-family:"Salesforce Sans Courier-New", monospace;
}
#container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /*width: 100%;*/
  max-width: 875px;
  min-width: 350px;
  /*height: 500px;*/
  min-height: 500px;
}
/* blue bar */
#topline {
 box-sizing: border-box; /*keeps box size constant, even after applying margins or padding*/
 height: 15px;
 border-radius: 5px 5px 0px 0px;
 border-bottom: solid white 2px;
 background-color: var(--blue3);
 background-image: linear-gradient(135deg, var(--black) 0%, var(--blue3) 20%);
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
}
#midsection {
  min-height: 445px;
  max-height: 445px;
  overflow: auto;
  background-color: white;
}
#bottomline {
  background-color: var(--grey7);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  display: flex;
  justify-content: flex-end;
  max-height: 30px;
  min-height: 30px;
}
button {
  cursor: pointer;
  font-family: 'Salesforce Sans Regular', sans-serif;
}
.button_brand{
  border: solid transparent 1px;
  border-color: var(--blue1);
  background-color:  var(--blue1);
  color: var(--white);
  box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 10%);
  border-radius: 4px;
  width:120px;
}
.button_neutral{
  border: solid transparent 1px;
  border-color: var(--blue1);
  background-color:  var(--white);
  color: var(--blue1);
  box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 10%);
  border-radius: 4px;
  width:120px;
}
.button_brand:hover{
  background-color:  var(--blue2);
}
.button_neutral:hover{
  background-color:  var(--grey4);
}
.button_neutral:disabled{
  border: solid transparent 1px;
  border-color: #c9c7c5;
  background-color:  #fff;
  color: #c9c7c5;
  box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 10%);
  border-radius: 4px;
  width:120px;
}
.button_brand:disabled{
  border: solid transparent 1px;
  border-color: #c9c7c5;
  background-color:  #c9c7c5;
  color: #fff;
  box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 10%);
  border-radius: 4px;
  width:120px;
}
#questionnumber, #question, #options {
  background-color: white;
  padding: 5px;
}
#questionnumber {
  font-size: 0.9rem;
  text-align: right;
  margin-right: 5px;
  color: var(--grey6);
  font-family: 'Salesforce Sans Regular', sans-serif;
}
#question {
  font-size: 1rem;
}
#options {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  padding-left: 10px;
}
#answertext {
  display: flex;
  margin-right: 10px;
  margin-left: 10px;
  align-items: center;
  font-family: 'Salesforce Sans Bold';
  font-size: 0.9rem;
}
.qmargin {
  margin: 20px 5px 20px 10px;
}
.oline {
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
}
.exp {
  font-style: italic;
  margin-left: 55px;
  margin-bottom: 5px;
  font-size: 0.85rem;
}
.sbcolorstart {
    border: #e2e2e2 solid 1px;
    background-color: white;
    color: #585858;
}
.sbcolorselected {
    border: none;
    background-color: #0070CD;
    color: white;
}
.sbcolorcorrect {
  border: none;
  background-color: #2f8718;
  color: white;
}
.sbcolorincorrect {
  border: none;
  background-color: #c64540;
  color: white;
}
.selectbutton {
    border-radius: 100%;
    font-size: 1.125rem;
    font-weight: 700;
    min-width: 2.5rem;
    min-height: 2.5rem;
    max-width: 2.5rem;
    max-height: 2.5rem;
    margin-right: 1%;
    padding: 0;
    font-family: 'Salesforce Sans Bold';
}
.selectbutton:hover {
  cursor: pointer;
}
.sbcolorstart:hover {
    border: var(--blue6) solid 1px;
    background-color: white;
    color: var(--blue6);
}
#xmlbutton{
  background-color: var(--generate);
  color: #ffffff;
  cursor: pointer;
}
#exportxml {
  padding-left: 10px;
  padding-top: 5px;
}