.bg-dark {
  background-color: #C4BBAF !important;
}

.navbar {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.nav-link {
  color: #2B2D42 !important;
}
.nav-link.active {
  font-weight: 500;
}

/* Nav button for mobile */
.navbar-toggler {
  border-color: #2B2D42 !important;
  padding: 0.1rem 0.2rem;
  margin-top: 4px;
  margin-bottom: 4px;
}

.navbar-toggler-icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2843, 45, 66, 0.99%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.spanBeta {
  /*padding: 4px;*/
  border: 1px solid #ffffff;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 0.25rem;
  font-weight: 700;
  color: #ffffff;
}

.jumbotron {
  padding-top: 3rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: 6rem;
    padding-bottom: 1rem;
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron h1 {
  font-weight: 300;
  color: #2B2D42;
}

.jumbotron .container {
  max-width: 40rem;
}

.btn-primary {
  background-color: #2B2D42;
  border-color: #2B2D42;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:disabled {
  background-color: #657ED4 !important;
  border-color: #657ED4 !important;
}

/*CSS for spinner animation*/
.sk-wave {
  margin: 0 auto; /* centre in parent div */
}
.sk-wave-rect {
  background-color: #C4BBAF !important;
}

.sectionTitle h1 {
  font-weight: 300;
  color: #2B2D42;
  font-size: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
}
a {
  color: #2B2D42;
}
a:hover {
  color: #657ED4;
}

.subSectionTitle h2 {
  font-weight: 300;
  color: #2B2D42;
  font-size: 1.3rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
  text-align: center!important;
}
.subSectionTitle h3 {
  font-weight: 500;
  color: #2B2D42;
  font-size: 1.75rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
  text-align: center!important;
}
.subSectionTitle canvas {
  width:100%;
}
.subSectionTitle p b {
  color: #2B2D42;
}
.subSectionTitle table th {
  font-weight: 500;
}
.subSectionTitle h4 {
  font-weight: 500;
  font-size: 1rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
  text-align: center!important;
}

.appListsSection h2 {
  font-weight: 300;
  color: #2B2D42;
  font-size: 1.3rem;
  padding-top: 0rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0rem !important;
  text-align: center!important;
}
.appListsSection canvas {
  width:100%;
}

/*Mobile summary charts formatting */
.tdScoreSummarySmallGaugeHeader {
  font-weight: 500;
  font-size: 0.8rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.tdScoreSummarySmallGauge {
  padding-bottom: 0px !important;
}

/*Latest / top apps formatting */
.tdSmallGaugeHeader {
  font-weight: 500;
  font-size: 0.8rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  width: 20%;
}
.tdSmallGaugeIcon {
  vertical-align: middle !important;
  height: 70px;
}
.tdSmallGaugeIcon img {
  vertical-align: middle !important;  
  width: 30px;
  margin-left: 0.4rem !important;
}
.tdSmallGaugeTitle {
  font-weight: 400;
  font-size: 0.8rem;
  vertical-align: middle !important;
  width: 39%;
}
.tdSmallGauge {
  width: 20%;
}
.canvasSmallGauge {
  height: 30px;
  align-content: center;
  width: 100%;
}
.divGaugeTitle {
  font-weight: 400;
  font-size: 0.6rem;
  padding-top: 0rem;
  padding-bottom: 0.2rem;
  text-align: center!important;  
  vertical-align: middle !important;
}


/* Footer formatting */
footer {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

footer p {
  margin-bottom: .1rem;
  font-size: 10px;
}

footer a {
  color: #6c757d;
}

/* Compare page */
.divSearch p, .divResults p {
  font-weight: 200;
  font-size: 1.4rem;
  line-height: 40px;
  vertical-align: middle;
  margin: 0px 10px 0px 0px;
}

.dropdown-item img, .dropdown-toggle img {
  width: 25px;
  height:  25px;
  margin-right: 10px;
}

#buttonClear, #buttonCompare, #spinnerCompare {
  float: left;
}
#buttonCompare, #spinnerCompare {
  margin-left: 10px;
}

#divCanvasFCBubble {
  width: 600px !important;
  height: 600px !important;
  padding: 0;
  margin: auto;
  display: block;
}
@media screen and (max-width: 600px) {
  #divCanvasFCBubble {
    width: 400px !important;
    height: 400px !important;
  }
}

/* Table rotated header text */
th.rotated-text {
  height: 250px;
  white-space: nowrap;
  padding: 0 !important;
}

th.rotated-text > div {
  transform:
    translate(13px, 0px)
    rotate(270deg);
  width: 30px;
}

th.rotated-text > div { margin-top: 10px; }

th.rotated-text > div > span {
  padding: 5px 10px;
}