:root {
  /* === Bootstrap fonts and spacing (Chosen from 3 predefined colors) === */
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0));

  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  /* === Dynamic colors === */
  --bs-primary: #00c26f;
  --bs-primary-rgb: 0,194,111;
  --bs-primary-hover: #00A55E;

  --bs-secondary: #2b2b37;
  --bs-secondary-rgb: 43,43,55;
  --bs-secondary-hover: #25252F;

  --bs-info: #0dcaf0;
  --bs-info-rgb: 13,202,240;
  --bs-info-hover: #0BACCC;

  --bs-success: #198754;
  --bs-success-rgb: 25,135,84;
  --bs-success-hover: #157347;

  --bs-warning: #ffc107;
  --bs-warning-rgb: 255,193,7;
  --bs-warning-hover: #D9A406;

  --bs-danger: #dc3545;
  --bs-danger-rgb: 220,53,69;
  --bs-danger-hover: #BB2D3B;

  --bs-light: #2b2b37;
  --bs-light-rgb: 43,43,55;
  --bs-light-hover: #25252F;

  --bs-dark: #040404;
  --bs-dark-rgb: 4,4,4;
  --bs-dark-hover: #030303;

  --bs-body-bg: #040404;
  --bs-body-color: #2b2b37;

  --bs-link-color: #00c26f;
  --bs-link-hover-color: #2b2b37;

  --bs-border-color: #040404;
}

/* === Base styles === */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Roboto', monospace;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

body#masterhead {
  background-image: url("/themes/changen/bg-profile.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Roboto.ttf') format('truetype');
}

.custom-font {
  font-family: 'Roboto', monospace;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 1px;
}.navbar {
  background-color: var(--bs-dark) !important;
}

.card {
  background-color: var(--bs-dark);
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color);
}

.card-header.bg-primary {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
.card-header.bg-info {
  background-color: var(--bs-info) !important;
  color: var(--bs-dark) !important;
}
.card-header.bg-secondary {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
}

/* === Buttons === */
.btn-primary,
.card-header.bg-primary,
.alert-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-hover);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
  --bs-btn-color: #fff;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary:hover {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
}

.btn-secondary,
.card-header.bg-secondary,
.alert-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background-color: var(--bs-secondary-hover);
  border-color: var(--bs-secondary-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;

  background-color: transparent !important;
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;

  background-color: transparent !important;
  border-color: var(--bs-secondary) !important;
  color: var(--bs-secondary) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--bs-secondary) !important;
  color: #fff !important;
  border-color: var(--bs-secondary) !important;
}

.btn-info,
.card-header.bg-info,
.alert-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: var(--bs-dark) !important;
}
.btn-info:hover {
  background-color: var(--bs-info-hover);
  border-color: var(--bs-info-hover);
}

/* === Alerts === */
.alert-success {
  background-color: var(--bs-success);
  color: var(--bs-light);
  border: 1px solid var(--bs-success-hover);
}
.alert-danger {
  background-color: var(--bs-danger);
  color: var(--bs-light);
  border: 1px solid var(--bs-danger-hover);
}
.alert-info {
  background-color: var(--bs-info);
  color: var(--bs-dark);
  border: 1px solid var(--bs-info-hover);
}
.alert-warning {
  background-color: var(--bs-warning);
  color: var(--bs-dark);
  border: 1px solid var(--bs-warning-hover);
}

/* === Links === */
a {
  color: var(--bs-info);
}
a:hover {
  color: var(--bs-link-hover-color);
}

/* === Form control === */
.form-control.danger-outline {
    border-color: var(--bs-danger) !important;
    box-shadow: 0 0 0 .25rem rgba(220,53,69, .25) !important;
}

.call-to-action {
  position: relative;
  background-color: #343a40;
  background: url("/themes/changen/bg-masthead.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.call-to-action:before {
  content: "";
  position: absolute;
  background-color: #1c375e;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
}

a > i.svgreviews {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 1.5em;
  margin-right: .1em;
  width: 1.5em;
}

.svgreviews.bestchange {
  background-image:url("data:image/svg+xml,%3Csvg baseProfile='basic' xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 112 112'%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='56' y1='0' x2='56' y2='112'%3E%3Cstop offset='0' stop-color='%2383b952'%2F%3E%3Cstop offset='.534' stop-color='%237fb753'%2F%3E%3Cstop offset='.987' stop-color='%2375af55'%2F%3E%3Cstop offset='1' stop-color='%2375af55'%2F%3E%3C%2FlinearGradient%3E%3Cpath fill='url%28%23a%29' d='M92.6 112H19.4C8.7 112 0 103.3 0 92.6V19.4C0 8.7 8.7 0 19.4 0h73.2C103.3 0 112 8.7 112 19.4v73.2c0 10.7-8.7 19.4-19.4 19.4z'%2F%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='31.969' y1='104.061' x2='31.969' y2='7.939'%3E%3Cstop offset='0' stop-color='%23161616'%2F%3E%3Cstop offset='1' stop-color='%234a4a4a'%2F%3E%3C%2FlinearGradient%3E%3Cpath fill='url%28%23b%29' d='M56 104.1H22.8c-8.2 0-14.9-6.7-14.9-14.9V22.8c0-8.2 6.7-14.9 14.9-14.9H56v96.2z'%2F%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='80.031' y1='104.061' x2='80.031' y2='7.939'%3E%3Cstop offset='0' stop-color='%23bcbcbc'%2F%3E%3Cstop offset='1' stop-color='%23f2f2f2'%2F%3E%3C%2FlinearGradient%3E%3Cpath fill='url%28%23c%29' d='M89.2 104.1H56V7.9h33.2c8.2 0 14.9 6.7 14.9 14.9v66.3c0 8.3-6.7 15-14.9 15z'%2F%3E%3Cpath fill='%23FFF' d='M50.5 66.2c0 3.6-.5 6.5-1.5 8.7-1 2.2-2.3 3.8-3.9 4.9-1.6 1.1-3.4 1.9-5.3 2.3-1.9.4-3.9.6-5.8.6H15.3v-53h20.6c2.6 0 4.8.4 6.5 1.3 1.7.9 3 2 4 3.5 1 1.4 1.7 3 2 4.8.4 1.7.5 3.5.5 5.1-.1 4.8-1.3 8.1-3.7 9.8 1.5.7 2.8 2.1 3.8 4s1.5 4.6 1.5 8zM39 44.5c0-1.7-.2-2.9-.6-3.7-.4-.8-1.2-1.2-2.4-1.2H25.4v10.6h9.7c1.5 0 2.5-.5 3.1-1.5.5-1.1.8-2.4.8-4.2zm1.4 21.8c0-1.5-.1-2.6-.4-3.5-.2-.9-.5-1.5-.9-2s-.8-.8-1.2-1c-.5-.1-.9-.2-1.3-.2H25.4v12.7h10.3c1.8 0 3-.5 3.7-1.4.6-.9 1-2.5 1-4.6z'%2F%3E%3Cpath fill='%23333' d='M100.2 63.2c-.2 2.8-.7 5.4-1.4 7.9s-1.8 4.7-3.2 6.5c-1.4 1.9-3.2 3.4-5.5 4.5-2.2 1.1-5 1.7-8.2 1.7-3.7 0-6.8-.6-9.4-1.9-2.6-1.3-4.7-3.1-6.2-5.5-1.6-2.4-2.7-5.3-3.5-8.8-.7-3.5-1.1-7.5-1.1-12 0-4.1.4-7.9 1.2-11.2.8-3.3 2-6.2 3.7-8.5 1.6-2.3 3.7-4.1 6.3-5.4 2.5-1.3 5.5-1.9 9-1.9s6.4.6 8.7 1.7c2.2 1.1 4 2.5 5.4 4.3 1.3 1.8 2.3 3.8 2.9 6.1.6 2.3 1 4.5 1.2 6.8h-9.5c-.2-1.2-.5-2.3-.8-3.4-.3-1.1-.7-2-1.3-2.8-.6-.8-1.3-1.4-2.3-1.9-1-.5-2.2-.7-3.9-.7-2 0-3.6.3-4.9 1-1.3.6-2.4 1.7-3.2 3.1-.8 1.4-1.4 3.3-1.8 5.6-.4 2.3-.5 5.2-.5 8.6 0 3.4.2 6.2.7 8.4.5 2.1 1.2 3.8 2.1 5 .9 1.2 2 2 3.2 2.5 1.3.4 2.7.7 4.3.7 1.6 0 2.9-.2 3.8-.7.9-.5 1.7-1.2 2.2-2.1.5-.9 1-2 1.3-3.2.3-1.3.6-2.7.9-4.2h9.8z'%2F%3E%3C%2Fsvg%3E")
}

.svgreviews.trustpilot {
  background-image:url("data:image/svg+xml,%3Csvg baseProfile='basic' xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 112 112'%3E%3Cg%3E%3Cpath fill='%2353AD77' d='M112 43.5H69.2L56 2.7 42.8 43.5 0 43.4l34.6 25.2-13.3 40.7L56 84.1l34.6 25.1-13.2-40.6L112 43.5z'%2F%3E%3Cpath fill='%23344F40' d='M80.4 77.8l-3-9.2L56 84.1l24.4-6.3z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}