body, textarea, .select:before, input, select, button, .btn {
  font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', 'Nimbus Sans', 'Segoe UI', 'sans-serif' !important;
}

header {
  background: #4D4D4F;
}

.retail-capital img[alt="Powered by Retail Capital"] {
  content: url('/static/images/tymebank_logo_white.png');
}

body {
  background: white;
}

/* Slider fill: black gradient */
.rangeslider__fill {
  background: linear-gradient(to right, #434343);
}

/* Slider handle: Takealot blue */
.rangeslider__handle {
  background: #0B79BF !important;
}

#amountOutput, #monthsOutput {
  position: relative;
  font-weight: bold;
}

/* Wallet icon */
#amountOutput::before {
  content: "";
  display: block;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('/static/images/wallet.svg');
}

/* R currency symbol */
#amountOutput::after {
  content: "R";
  position: absolute;
  right: 235px; /* Adjust this value to move R closer/further from number */
  top: 50%;
  transform: translateY(-50%);
  font-size: inherit;
  color: inherit;
  font-weight: bold;
}

#monthsOutput::before {
  content: "";
  display: block;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0;
  background-image: url('/static/images/calendar.svg');
}

#amountOutput span, #monthsOutput span {
  display: inline-block;
  width: calc(100% - 0px); 
  text-align: center;
}

/* Button: Takealot blue */
.btn,
input[type="submit"] {
  background: #0B79BF !important;
  background-image: none !important;
  color: #fff !important;
}

.btn:hover,
input[type="submit"]:hover {
  background: #0B79BF !important;
  background-image: none !important;
}

.twocolordiv {
  background: linear-gradient(to right, #903579, #633f8f, #18265f) !important;
}

.white-container {
  border: 1px solid #000 !important;
}

.tooltip:after,
[data-tooltip]:after {
  background-color: #0B79BF !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.tooltip:before,
[data-tooltip]:before {
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-top-color: #0B79BF !important;
}
.tooltip:last-child:after,
[data-tooltip]:last-child:after {
  left: auto !important;
  right: 0 !important;
  margin-left: 0 !important;
  transform: translateX(0) !important;
}

/* For tooltips in .results table, target the last column's tooltip */
.results .value:last-of-type .tooltip:after,
.results .value:last-of-type [data-tooltip]:after {
  left: auto !important;
  right: 0 !important;
  margin-left: 0 !important;
  transform: translateX(0) !important;
}

.results .tooltip,
.results [data-tooltip] {
  position: relative;
}
.results .tooltip:after,
.results [data-tooltip]:after {
  left: 100% !important;
  transform: translateX(-90%) !important;
}
.results .tooltip:before,
.results [data-tooltip]:before {
  left: 100% !important;
  transform: translateX(-90%) !important;
}

.results .value {
  background: linear-gradient(to right, #F2F5F9) !important;
}

.feature-icon img[src$="/shared/images/error.png"] {
  content: url('/static/images/takealoterror.png');
}

input,
textarea {
    border: 1px solid black !important;
    border-radius: 4px !important;
}

/* Takealot editable field styling */
input:not([readonly]):not([disabled]),
select:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
input:not(.readonly),
select:not(:disabled),
input.error,
select.error,
textarea.error,
#company_registration_name:not(.readonly),
#company_registration_number:not(.readonly) {
    border-bottom: 2px solid #0B79BF !important;
}

.white-container h2 {
  font-weight: bold !important;
}

.range-sliders button {
  color: #000 !important;
}
.range-sliders button:hover {
  color: #333 !important;
}

img[src*='images/R.png'] {
  max-width: 100px;
  max-height: 100px;
  height: auto;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}