/* CSS WC; Template date: 20241217*/
:root {
--page-bg: #f5f5f5;
--blue1: hsl(206.57,99.06%,41.57%); /*#0176d3; slds-g-color-brand-base-50 (Brand up)*/
--blue2: hsl(209.77,98.52%,26.47%); /*#014486; slds-g-color-brand-base-30 (Brand over)*/
--blue3: #032d60; /*slds-g-color-brand-base-20 (Brand down)*/
--blue4: #eaf5fe; /*slds-g-color-palette-cloud-blue-95*/
--blue5: #215CA0;
--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: #E6E6E6;
--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*/
--generate: #bc0560; /*pink*/
--fontsize1: 16px;
--fontsize2: 14px;
--fontsize3: 12px;
--fontsize4: 20px;
--dk-brand: #4e758d; /*body gradient color*/
--dk-gray: #20272c; /*body gradient color*/
--focus: #d71ef7; /*focus color*/
max-width: 815px;
font-size: var(--fontsize1);
}
html {
  box-sizing:border-box;
  height:500px;
  width:815px;
  }
*:focus {
    outline: 2px solid var(--focus);
}
body {
  box-sizing: border-box;
  margin: 0;
  background-color: var(--grey4);
  font-family: "Salesforce Sans Regular", sans-serif;
  font-size: var(--fontsize1);
  /*font-size: calc(12px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));*/
  /*font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/
  max-width: 815px;
  max-height: 500px;
}
[id^="item"] {
  margin-left: 20px;
  margin-right: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--blue3);
  border-radius: 3px;
  background-color: var(--grey4);
  padding: 10px;
}
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;
}

.containerall {
  box-sizing: border-box;
  position: relative;
  max-width: 875px;
  min-width: 350px;
  height: 500px;
  min-height: 500px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
ul {
  background: ;
  padding-left: 15px;
  text-align: left;
}
ol{
  background: ;
  padding-left: 10px;
}
ul li {
  background: ;
  color: ;
  list-style-type:disc; /*disc, circle, square, none*/
  letter-spacing: normal; /* normal, length */
  line-height: normal; /* number, length, percent */
  white-space: normal; /* normal, nowrap, pre, pre-line, pre-wrap  */
  word-spacing: 0px;
  margin-top: 0px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-left: 15px;
}
ol li {
  background: ;
  color: ;
  letter-spacing: normal; /* normal, length */
  line-height: normal; /* number, length, percent */
  white-space: normal; /* normal, nowrap, pre, pre-line, pre-wrap  */
  word-spacing: 0px;
  margin-top: 0px;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-left: 15px;
}
ul:first-child {
  margin-top: 0px;
}
ul:last-child {
  margin-bottom: 0px;
}
.li2 {
  list-style-type:circle; /*disc, circle, square, none*/
  margin-left: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.li3 {
  list-style-type:square; /*disc, circle, square, none*/
  margin-left: 80px;
  margin-top: 10px;
  margin-bottom: 10px;
}
emphasis {
  font-family: "Salesforce Sans Italic", sans-serif;
}

.directions {
  margin: 10px 50px 10px 50px;
  font-family: 'Salesforce Sans Regular';
  font-size: 16px;
}

[id^="selectbox"] {
  font-size: var(--fontsize1);
  /*font-size: calc(12px + (17 - 10) * ((100vw - 300px) / (1600 - 300)));*/
  font-family: 'Salesforce Sans Regular', sans-serif;
  background-color: var(--white);
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
}
.containerall {
  box-sizing: border-box;
  background-color: var(--blue4);
  position: relative;
  max-width:815px;
  min-width:350px;
  height: 500px;
  min-height: 500px;
  max-height: 500px;
}
/* blue bar */
#topline {
  box-sizing: border-box; /*keeps box size constant, even after applying margins or padding*/
  /*background-color: var(--blue3);*/
  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: 400px;
 max-height: 400px;
 /*overflow: auto;*/
 padding: 0px;
}
#bottomline {
 box-sizing: border-box;
 background-color: var(--grey7);
 padding-top: 5px;
 padding-bottom: 5px;
 padding-right: 5px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 max-height: 44px;
 min-height: 44px;
}
button {
 cursor: pointer;
}
.button_brand {
  font-family: 'Salesforce Sans Regular', sans-serif;
  color: var(--white);
  box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 10%);
  border: solid transparent 1px;
  background-color:  var(--blue1);
  border-radius: 4px;
  cursor: pointer;
  width:120px;
  height: 30px;
}
.button_brand:hover{
  background-color:  var(--blue2);
}
.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;
  cursor: not-allowed;
  width:120px;
  height:30px;
}
#footer button {
  font-size: var(--fontsize5);
  font-family: 'Salesforce Sans Bold';
}
#footer button:hover {
  cursor: pointer;
  background-color: var(--blue2);
}
#footer button:active {
  cursor: pointer;
  background-color: var(--blue3);
}
.button_neutral{
  color: #0070D2;
  box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 10%);
  border: solid transparent 1px;
  border-color: #0070D2;
  background-color:  #FFFFFF;
  border-radius: 4px;
}
#footer button.button_neutral:hover {
  background-color: #e7ebf1;
}
#footer button.button_neutral:active {
  background-color: #e2e2e2;
}
#answertext {
  margin-left: 10px;
  font-family: 'Salesforce Sans Bold';
  padding-right: 50px;
}
#footerbuttons {
  text-align: right;
}

.hide {
  display: none;
}
[id^="answerariat"] {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 3px;
  border: none;
  margin-bottom: 0px;
}
select {
  margin-top: 2px;
  font-size: 14px;
  font-family: 'Salesforce Sans Regular'
}
/* remove the caret from the dropdown boxes for Firefox and Chrome
[id^="item"] select {
  -moz-appearance: none;
  -webkit-appearance: none;
}*/
/* remove the caret from the dropdown boxes for IE */
/*[id^="item"] select::-ms-expand {
  display: none;
}*/

/* for IE10 */
/*.dropdown-container select::-ms-expand {
  display: none;
}*/

#textariaanswer {
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  font-family: 'Salesforce Sans Bold';
  margin-bottom: 0px;
}
#xmlbutton{
  background-color: var(--generate);
  color: #ffffff;
  cursor: pointer;
}
#exportxml {
  padding-left: 10px;
  padding-top: 5px;
}

@media only screen and (max-width: 750px) and (min-width: 616px) {
  #footer button {
    font-size: 16px;
  }
  #answertext {
    font-size: 14px;
  }
  #col1data div, #col2data div, #col3data div {
    min-height: 46.3px;
  }
}
@media only screen and (max-width: 615px) {
  #col1data div, #col2data div, #col3data div {
    min-height: 46.3px;
  }
  #footer button {
    font-size: 12px;
  }
  #answertext {
    font-size: 10px;
  }
}
@media only screen and (max-width: 499px) {
  #footer button {
    font-size: 10px;
  }
}
#correct{
  font-weight: 900;
  color: var(--correct);
}
#incorrect{
  font-weight: 900;
  color: var(--incorrect);
}