/* QWF Two-column*/
: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*/

  --white: hsl(0, 0%, 100%);
  --black-050: hsl(0, 0%, 100%);
  --black-100: hsl(210, 8%, 98%);
  --black-150: hsl(210, 8%, 95%);
  --black-200: hsl(210, 8%, 90%);
  --black-225: hsl(210, 8%, 85%);
  --black-250: hsl(210, 8%, 80%);
  --black-300: hsl(210, 9%, 75%);
  --black-350: hsl(210, 8%, 68%);
  --black-400: hsl(210, 8%, 42%);
  --black-500: hsl(210, 8%, 25%);
  --black-600: hsl(210, 8%, 5%);
  --black: hsl(0, 0%, 0%);
  --orange-100: hsl(23, 87%, 97%);
  --orange-200: hsl(27, 87%, 87%);
  --orange-300: hsl(27, 87%, 72%);
  --orange-400: hsl(27, 89%, 48%);
  --orange-500: hsl(27, 87%, 41%);
  --orange-600: hsl(27, 87%, 27%);
  --blue-100: hsl(210, 80%, 96%);
  --blue-200: hsl(210, 80%, 91%);
  --blue-300: hsl(210, 78%, 76%);
  --blue-400: hsl(210, 77%, 46%);
  --blue-500: hsl(210, 77%, 36%);
  --blue-600: hsl(210, 80%, 23%);
  --green-100: hsl(148, 35%, 95%);
  --green-200: hsl(148, 35%, 88%);
  --green-300: hsl(148, 35%, 69%);
  --green-400: hsl(148, 70%, 31%);
  --green-500: hsl(148, 75%, 22%);
  --green-600: hsl(148, 75%, 15%);

  --red-100: hsl(0, 72%, 96%);
  --red-200: hsl(0, 70%, 93%);
  --red-300: hsl(0, 66%, 80%);
  --red-400: hsl(0, 60%, 49%);
  --red-500: hsl(0, 65%, 37%);
  --red-600: hsl(0, 65%, 22%);

  --yellow-100: hsl(43, 85%, 95%);
  --yellow-200: hsl(43, 85%, 88%);
  --yellow-300: hsl(43, 85%, 72%);
  --yellow-400: hsl(43, 85%, 50%);
  --yellow-500: hsl(43, 85%, 33%);
  --yellow-600: hsl(43, 85%, 18%);
  --purple-100: hsl(237, 83%, 98%);
  --purple-200: hsl(237, 78%, 93%);
  --purple-300: hsl(237, 60%, 83%);
  --purple-400: hsl(237, 55%, 57%);
  --purple-500: hsl(237, 50%, 45%);
  --purple-600: hsl(237, 50%, 32%);
  --gold-100: hsl(46, 100%, 91%);
  --gold-200: hsl(46, 100%, 74%);
  --gold-300: hsl(45, 100%, 42%);
  --gold-400: hsl(46, 92%, 26%);
  --silver-100: hsl(0, 0%, 95%);
  --silver-200: hsl(0, 0%, 84%);
  --silver-300: hsl(210, 5%, 68%);
  --silver-400: hsl(210, 2%, 40%);
  --bronze-100: hsl(28, 40%, 92%);
  --bronze-200: hsl(30, 47%, 83%);
  --bronze-300: hsl(28, 43%, 65%);
  --bronze-400: hsl(28, 43%, 39%);
}
html{
    box-sizing: border-box;
    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 {
  color: var(--red-500);
  font-size: .8rem;
  padding: .1em .6em;
  background-color: #f7f7f9;
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  border-radius: 3px;
  line-height: 1.2;
  box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0,0%,100%);
  border: 1px solid hsl(210,8%,68%);
  border-top-color: hsl(210,8%,42%), 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0, 0%, 100%);
  text-shadow: 0 1px 0 hsl(0,0%,100%);
  overflow-wrap: break-word;
  display:inline-block;
  overflow-y: auto;
  margin: 0 2px; /*puts 2px on each side of code*/
}
.codelimit{
  max-width: 600px;
  box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0,0%,100%);
  border: 1px solid hsl(210,8%,68%);
  border-top-color: hsl(210,8%,42%), 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0, 0%, 100%);
  text-shadow: 0 1px 0 hsl(0,0%,100%);
  overflow-wrap: break-word;
  white-space: wrap;
}
pre {
  overflow-x: auto;
  display:block;
  white-space: pre;
  margin-left: 10px;
}
/*#col2.column{
  overflow-x:scroll;
}*/
.column1 {
  float: left;
  width: 25%;
  max-height: 300px;
}
.column1full {
  float: left;
  max-height: 300px;
  width:100%;
}
.column2 {
  float: left;
  width: 75%;
  margin:0;
  max-height: 300px;
}
#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 {
  box-sizing:border-box;
  min-height: 445px;
  max-height: 445px;

  padding: 10px;
  background-color: white;
}
#bottomline {
  box-sizing: border-box;
  background-color: var(--grey7);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  display: flex;
  justify-content: flex-end;
  max-height: 40px;
  min-height: 40px;
}
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;
  margin-left: 5px;
  margin-top: 2px;
  padding: 0px;
  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;
  max-height: 310px; /*so it doesn't overextend*/
  overflow:auto;
}
#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: 5px;
    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;
}
kbd {
  border: 1px solid #babfc5;
  border-top-color: hsl(210,8%,42%), 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0, 0%, 100%);
  box-shadow: hsl(210,9%,75%);
  background-color: hsl(210,8%,90%);
  border-radius: calc(4px);
  /*color: hsl(210,8%,5%);*/
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
  font-size: 11px;
  line-height: 1.5;
  margin: 0 .1em;
  overflow-wrap: break-word;
  padding: .1em .6em;
  text-shadow: 0 1px 0 hsl(0,0%,100%);

  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: var(--red-600);
  text-shadow: 0 1px 0 hsl(0,0%,100%);
  background-color: hsl(210,8%,90%);
  border: 1px solid hsl(210,8%,68%);
  border-radius: 3px;
  box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0,0%,100%);
  white-space: nowrap;
}