/* Updated 02/11/18 v4.6 */

:root {
  --yellow-colour: #eeefd1;
  --farnell-blue: #007fac;
  --farnell-orange: #F17C0E;
  --main-configurator-background: #cde6f4;
  --results-background: #007fac;
  --result-colour: #FFFFFF;
  --result-link-colour: #EEF;
  --result-visited-link-colour: #EEF;
  --base-font-size: 14px;
  --main-heading-colour: #000;
  --default-font-colour: #333333;
  --max-calc-width: 550px;
  --min-calc-width: 200px;
  --label-width: 90%;
  --input-width: 100px;
  --dropdown-label-width: 180pc;
  --dropdown-width: 150px;
  --border-width: 2px;
  --border-radius: 25px;
  --form-spacer-height: 6px;
  --default-line-height: 125%;
  --radio-button-size: 1.2em;
  --ai-result-font-size: 115%;
}

body {
  color: var(--default-font-colour);
  line-height: var(--default-line-height);
  font: normal var(--base-font-size) Verdana, Arial, Helvetica, sans-serif;
}

.AI-configurator {
  position: relative;
  margin: 1em auto;
  padding: 1em 2em;
  display: block;

  border: var(--border-width) solid var(--farnell-blue);
  border-radius: var(--border-radius);
  text-align: left;
  background-color: var(--main-configurator-background);
}

@media (min-width: 768px) {
  .AI-configurator {
    width: 100%;
    /*max-width: var(--max-calc-width);*/
    /*min-width: var(--min-calc-width);*/
  }
}

.AI-features,
.AI-services {
  margin: 1em auto;
  padding: 1em 2em;
  width: auto;
  background-color: var( --yellow-colour);
  border-radius: var(--border-radius);
  text-align: left;
}

.AI-config-spacer,
.AI-result-spacer {
  line-height: 100%;
  font-size: var(--form-spacer-height);
}

.AI-result {
  margin: 1em auto;
  padding: 1em 2em;
  width: auto;
  border-radius: var(--border-radius);
  text-align: left;
  background-color: var(--results-background);
  ;
}

#RecommendedProducts a:link,
#RecommendedProducts a:hover,
#MoreInformation a:link,
#MoreInformation a:hover {
  color: var(--result-link-colour);
}

#RecommendedProducts a:visited,
#MoreInformation a:visited {
  color: var(--result-visited-link-colour);
}

.AI-config-label,
.AI-config-label-dropdown,
.AI-result-label {
  width: var(--label-width);
  display: inline-block;
  margin-bottom: 3px;
}

.AI-result-label {
  width: auto;
  display: inline-block;
  margin-bottom: 3px;
}

.AI-config-label-dropdown {
  width: var(--dropdown-label-width);
}

.AI-config-input,
.AI-config-input-dropdown,
.AI-result-value {
  display: inline-block;
  text-align: right;
  margin-bottom: 3px;
}

.AI-config-input,
.AI-result-value {
  /*width: var(--input-width);*/
}

.AI-config-input-dropdown {
  width: var(--dropdown-width);
  margin-right: 5px;
}

.AI-config-unit,
.AI-result-unit {
  width: 50px;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 3px;
}

.CalculateButton {
  margin: 20px auto 20px auto;
  font-size: 150%;
  display: block;
  background-color: var(--farnell-orange);
  padding: 10px;
  font-weight: bold;
}

a.BuyButton {
  margin: 20px auto 20px auto;
  font-size: 150%;
  display: block;
  background-color: var(--farnell-orange);
  padding: 10px;
  font-weight: bold;
  border: 1px solid #dfdfdf;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: var(--result-colour) !important;
  text-decoration: none;
  box-shadow: 1px 1px 10px 0px #000000;
  -webkit-box-shadow: 1px 1px 10px 0px #000000;
  -moz-box-shadow: 1px 1px 10px 0px #000000;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

.BuyButton:hover {
  background-color: var(--farnell-orange);
  text-decoration: none;
}

.AI-configurator input[type="radio"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' xmlns='http:/…000/svg http:/…000/svg'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23EEEEEE'/%3E%3C/svg%3E");
  background-size: var(--radio-button-size);
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 2.6em;
  line-height: var(--radio-button-size);
  min-height: var(--radio-button-size);
  cursor: pointer;
}

.AI-result-label,
.AI-result-value,
.AI-result-unit {
  color: var(--result-colour);
  font-weight: normal;
  font-size: var(--ai-result-font-size);
}

h2 {
  font-weight: bold;
  font-size: 175%;
}

.main-ai-config-heading {
  color: var(--main-heading-colour);
}

.AI-config-heading,
.AI-config-result-heading {
  font-weight: bold;
  font-size: 150%;
  margin-bottom: 15px;
}

.AI-config-result-heading {
  color: var(--result-colour);
}

.AI-hidden-value {
  visibility: hidden;
}