li {
  color: white; }

strong {
  font-weight: bold; }

#data-notice .modal-title {
  font-size: 20px;
  padding-left: 15px; }

.modal-title {
  padding-left: 0px; }

.disabled-option {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  display: none; }

.disabled .disabled-option {
  display: block; }

.disabled .coin .coin-value {
  color: darkgray !important; }

.diagonal-line {
  height: 154px;
  width: 2px;
  position: absolute;
  top: -10px;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  left: 50px;
  background-color: lightgray; }
  @media screen and (max-width: 576px) {
    .diagonal-line {
      height: 97px;
      top: -3px;
      left: 33px; } }

.diagonal-line.reverse {
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
  right: 50px;
  left: unset; }
  @media screen and (max-width: 576px) {
    .diagonal-line.reverse {
      right: 33px; } }

html {
  overflow-y: scroll; }

h1 {
  font-weight: 700; }
  @media screen and (max-width: 576px) {
    h1 {
      font-size: 2em; } }

body {
  font-family: 'Roboto', sans-serif;
  line-height: 30px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0px; }

div#container {
  width: 90%;
  min-width: 350px;
  max-width: 650px;
  margin: 0px auto; }
  @media screen and (max-width: 576px) {
    div#container {
      max-width: 300px; } }
  @media screen and (max-width: 350px) {
    div#container {
      min-width: 300px; } }

div#container .selectable-options {
  -webkit-transform: translateX(80px);
          transform: translateX(80px);
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s; }
  @media screen and (max-width: 992px) {
    div#container .selectable-options {
      -webkit-transform: translateX(0px);
              transform: translateX(0px); } }

div#container.wide .selectable-options {
  -webkit-transform: translateX(0px) !important;
          transform: translateX(0px) !important; }

.row {
  margin: 0 0 20px 0; }

.learn-more-row {
  margin-bottom: 0px; }

.find-device {
  margin-bottom: 20px; }
  .find-device button {
    background-color: #00447c;
    border-radius: 0;
    -webkit-box-shadow: 0px 10px 14px -7px transparent;
            box-shadow: 0px 10px 14px -7px transparent;
    text-shadow: none; }

.find-device button.overbudget {
  background-color: #CE1126;
  border-radius: 0;
  -webkit-box-shadow: 0px 10px 14px -7px transparent;
  box-shadow: 0px 10px 14px -7px transparent;
  text-shadow: none; }

.component-option {
  border: solid 1px darkgrey;
  -webkit-box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 110px;
  height: 140px;
  margin: 20px 10px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 576px) {
    .component-option {
      margin: 0px 5px;
      max-width: 68px;
      width: 68px;
      height: 95px; } }
  @media screen and (max-width: 350px) {
    .component-option {
      margin: 0px; } }

.worker-1-row,
.worker-2-row,
.worker-3-row {
  display: none; }

@media screen and (max-width: 576px) {
  .component-section {
    margin-left: 6px; } }

.operating-system-row {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.component-option.disabled {
  background-color: #EEEEEE;
  cursor: default; }
  .component-option.disabled p {
    color: #444444; }

.card-body p {
  font-size: 16px; }
  @media screen and (max-width: 576px) {
    .card-body p {
      font-size: 12px; } }

.big-icon {
  position: relative;
  width: 55px !important;
  margin: 0px auto;
  overflow: hidden; }

.coin,
.info {
  position: relative;
  width: 35px;
  margin: 0px auto;
  overflow: hidden; }
  @media screen and (max-width: 350px) {
    .coin,
    .info {
      width: 25px; } }

.coin img,
.info img {
  width: 100%; }

.coin p {
  position: absolute;
  top: 49%;
  left: 51%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  color: white !important;
  font-size: 14px;
  margin: 0px;
  font-weight: bold; }

.info {
  margin-top: 10px; }

.component-option .coin {
  margin: 10px auto 10px; }
  @media screen and (max-width: 576px) {
    .component-option .coin {
      margin: 0px auto 12px; } }

p.component-caption {
  font-size: 14px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: 6px 0px 0px 0px;
  width: 100%;
  text-align: center;
  line-height: 1.2em;
  padding: 0px 5px; }
  @media screen and (max-width: 576px) {
    p.component-caption {
      font-size: 9px !important;
      line-height: 1;
      -webkit-hyphens: auto;
          -ms-hyphens: auto;
              hyphens: auto; } }

.component-option.clicked {
  background-color: #F2AF00; }

.component-option.clicked p {
  color: black; }

.component-caption-container {
  height: 60px;
  height: calc(100% - 90px);
  position: relative; }

body {
  font-family: 'Arial', sans-serif;
  color: #868686;
  font-size: 14px;
  font-weight: 400; }

h1 {
  color: #0071C5;
  text-transform: capitalize; }

.introduction {
  padding: 18px;
  background-color: #0076CE; }
  .introduction p,
  .introduction h1 {
    color: white; }
  @media screen and (max-width: 576px) {
    .introduction {
      max-width: 100%; } }

.client-sample p {
  font-size: 14px;
  margin-bottom: 0px; }

.intro-container {
  background-color: #0076CE; }

.logo-container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .logo-container img {
    margin: 31px auto;
    text-align: center; }

.sticky {
  background-color: #00447c;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1000; }

.sticky p {
  margin-bottom: 0px; }

p {
  color: #444444;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0px;
  text-transform: none; }

.credit-bar {
  color: white;
  padding-left: 13px;
  padding-top: 12px; }
  @media screen and (max-width: 992px) {
    .credit-bar {
      padding-left: 13px; } }

@media screen and (max-width: 576px) {
  .credits-remaining {
    padding-bottom: 0px !important; }
    .credits-remaining p {
      padding-right: 2px; } }

.category {
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border: 1px solid;
  padding: 10px;
  -webkit-box-shadow: 5px 10px;
          box-shadow: 5px 10px; }

.spec-button {
  height: 140px;
  margin: 20px 10px;
  width: 130px;
  max-width: 90%;
  max-width: calc(100% - 20px);
  padding: 0px; }
  @media screen and (max-width: 576px) {
    .spec-button {
      max-width: 68px;
      width: 89px;
      font-size: 10px;
      text-align: center;
      height: 95px;
      margin: 0px;
      margin-right: 5px; } }

.no-padding {
  padding: 0px !important; }

.placeholder {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none; }

.red {
  background-color: #CE1126; }

div.credits-used {
  margin-bottom: 0px; }

div.credits-remaining {
  margin-bottom: 0px; }

.spec-title {
  height: 180px;
  max-width: 80%;
  max-width: calc(100% - 20px);
  padding: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  vertical-align: middle;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  @media screen and (max-width: 576px) {
    .spec-title {
      max-width: 68px;
      width: 89px;
      font-size: 10px;
      text-align: center;
      height: 95px;
      margin: 0px;
      margin-right: 5px;
      display: table-cell; } }

@media screen and (max-width: 576px) {
  .component-option-4,
  .component-option-5,
  .component-option-6 {
    margin-top: 20px; } }

.spec-title h5 {
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #0076CE;
  padding-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 18px; }
  @media screen and (max-width: 576px) {
    .spec-title h5 {
      font-size: 12px;
      padding-top: 3px; } }

.spec-title p {
  color: #444444; }
  @media screen and (max-width: 576px) {
    .spec-title p {
      text-align: center;
      font-size: 14px;
      line-height: 1.2;
      padding-top: 5px;
      margin-bottom: 2px; } }

.spec-title a {
  text-align: center; }

.more-info, .more-info-2 {
  border: none;
  padding: 0px;
  font-size: 24px;
  line-height: 16px;
  cursor: pointer;
  background-color: transparent !important;
  background-image: url(../img/plusbox.png);
  background-repeat: no-repeat;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0px;
  background-size: 25px 25px;
  height: 25px;
  width: 25px; }

.more-image {
  border: none;
  padding: 0px;
  font-size: 24px;
  line-height: 16px;
  cursor: pointer;
  background-color: transparent !important;
  background-image: url(../img/Photo-Icons-01.png);
  background-repeat: no-repeat;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0px;
  background-size: 25px 25px;
  height: 25px;
  width: 25px; }

.info-expanded {
  background-color: transparent !important;
  background-image: url(../img/minusbox.png);
  background-repeat: no-repeat;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0px;
  background-size: 25px 25px;
  height: 25px;
  width: 25px; }

.card-body {
  border: none;
  padding-top: 0px; }

.operating-system-row {
  /* For debugging */ }

.learn-more {
  text-align: center; }
  .learn-more p {
    font-size: 14px;
    margin-bottom: 0px; }
    @media screen and (max-width: 576px) {
      .learn-more p {
        font-size: 10px;
        text-align: center; } }

.img-modal {
  margin: 0px 20px; }

.modal-img {
  width: 100%;
  border-bottom: 14px solid #00447c; }
  .modal-img img {
    max-width: 400px;
    width: 90%;
    margin-bottom: 10px; }

.result-name {
  color: #0071C5;
  font-size: 20pt;
  font-weight: 700;
  text-align: center;
  padding: 0px 20px; }

.additional-info {
  padding: 0px 20px;
  text-align: center;
  font-size: 14px;
  margin: 0 auto 15px; }

.result-desc {
  padding: 0px 20px;
  text-align: center; }

.row .result-desc p:last-child {
  margin-bottom: 0px; }

.save-selection {
  border-top: none;
  padding-top: 0px;
  text-align: center; }
  .save-selection button {
    background-color: #6EA204;
    border-radius: 0;
    -webkit-box-shadow: 0px 10px 14px -7px transparent;
            box-shadow: 0px 10px 14px -7px transparent;
    text-shadow: none;
    margin-bottom: 20px;
    width: 220px; }
  .save-selection a {
    color: white; }

.footprint-modal img {
  max-width: 100%; }

.footprint-modal div div {
  margin: 20px auto 0px auto;
  text-align: center; }

#tab_customers {
  display: none; }

#tab_customers td,
.pdf-export-div th {
  padding: 5px;
  color: black; }

#tab_customers th {
  background-color: #0071C5;
  color: white; }

#tab_customers .pdf-value-label {
  font-weight: bold; }

.exclusion-note {
  font-size: 12px; }

.comma:empty {
  display: none; }

.comma:not(:first-child):before {
  content: ", "; }