/* user.css for pioneersproductions.com */

:root {
--cassiopeia-color-primary: #ffffff;
--cassiopeia-color-link: #ffffff;
--cassiopeia-color-hover: purple;
--body-text-align: center;
--dark-color: #1a0014;
--light-color: #fff5fd;
--main-background: #000;
--primary-background: #000;
--primary-textColor: #ffffff;
--secondary-background: #760f5e;
--secondary-textColor: #ffffff;
--secondary-color:  #fff5fd;
--accent-background: #85ebff;
--accent-textColor: #000000;
--primary-gradient: linear-gradient(180deg, #cb52af, #a438cc);
--secondary-gradient: linear-gradient(180deg, #9452b7, #3b308d);
--heading-color: #fff;
}

body {
  background: var(--main-background);
  color: var(--main-color);
}

a {
  color: var(--secondary-background);
}

.container-header {
  background: var(--primary-background);
  /*background-image: var(--primary-gradient);*/
}

.mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
  background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
  color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
  border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
}

.btn.btn-primary {
  background-color: var(--primary-background); /* background of your primary buttons */
  border-color: var(--primary-background); /* border color of your primary buttons */
  color: var(--primary-textColor); /* text color of your primary buttons */
}

.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
  background-color: var(--accent-background); /* background of your primary buttons */
  border-color: var(--accent-background); /* border color of your primary buttons */
  color: var(--dark-color); /* text color of your primary buttons */
}

.btn.btn-secondary {
  background-color: var(--secondary-background); /* background of your secondary buttons */
  border-color: var(--secondary-background); /* border color of your secondary buttons */
  color: var(--secondary-textColor); /* text color of your secondary buttons */
}

.bg-info {
  color: var(--accent-textColor);
  background-color: var(--accent-background) !important;
}

.card {
  border: 1px solid var(--primary-background); /* border color of your cards */
  border-radius: 0; /* border radius of your cards */
  background-color: var(--primary-background); /* background color of your cards */
}

.card-header {
  background-color: var(--primary-background); /* background color of your card headers */
  border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
  color: var(--primary-textColor); /* text color of your card headers */
}

.card-body {
  background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
  border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
  color: var(--primary-textColor); /* text color of your card bodies */
}

.card-body a {
  color: var(--primary-textColor); /* text color of your card body links */
}

.card.secondary {
  border: 1px solid var(--secondary-background); /* border color of your secondary cards */
  border-radius: 0; /* border radius of your secondary cards */
  background-color: var(--secondary-background); /* background color of your secondary cards */
}

.card-header.secondary {
  background-color: var(--secondary-background); /* background color of your secondary card headers */
  border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
  color: var(--secondary-textColor); /* text color of your card headers */
}

.card-body.secondary {
  background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
  border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
  color: var(--secondary-textColor); /* text color of your secondary card bodies */
}

.card-body.secondary a {
  color: var(--secondary-textColor); /* text color of your secondary card body links */
}

.plg_system_webauthn_login_button svg {
  fill: var(--primary-color); /* color of your webauthn login button icon */
}

.footer {
  background-color: var(--secondary-background); /* background color of your footer */
  background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
  color: var(--secondary-color); /* text color of your footer */
}

::selection {
  background-color: var(--accent-background); /* background color of your text selection */
  color: var(--dark-color); /* text color of your text selection */
}

.metismenu.mod-menu .metismenu-item > ul {
  background-color: var(--secondary-background); /* background color of your dropdown menu */
  border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
  color: var(--secondary-color); /* text color of your dropdown menu */
}

.metismenu.mod-menu .metismenu-item > ul a {
  color: var(--secondary-color); /* text color of your dropdown menu links */
}

.main-top.card.colorpicker-module {
  background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
  color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
  border: none;
}

.colorpicker-module .card-header, .colorpicker-module .card-body {
  background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
  color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
}

.article-info {
  background-color: var(--main-background); /* background color of your article info */
  padding: 15px 20px; /* padding of your article info */
}

.article-info dd {
  color: var(--main-color); /* text color of your article info */
}

.btn.btn-info {
  background-color: var(--primary-background); /* background color of your info buttons */
  border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
  color: var(--primary-color); /* text color of your info buttons */
}

.btn-primary .icon-white:before {
  color: var(--primary-textColor); /* text color of your info buttons in primary */
}

.btn-secondary .icon-white:before {
  color: var(--secondary-textColor); /* text color of your info buttons in primary */
}

.form-control {
  background-color: var(--main-background); /* background color of your form controls */
  border: 1px solid var(--main-color); /* border color of your form controls */
  color: var(--primary-color); /* text color of your form controls */
  border-radius: 0; /* border radius of your form controls */
}

label {
  font-weight: bold; /* font weight of your labels */
}

/* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
h1, .h1 {
  font-size: clamp(18px, 5vw, 28px);
}

/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
h2, .h2 {
  font-size: clamp(16px, 5vw, 26px);
}

/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
h3, .h3 {
  font-size: clamp(14px, 5vw, 24px);
}

/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
h4, .h4 {
  font-size: clamp(12px, 5vw, 22px);
}



a:link {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

a:hover {
  color: cyan !important;
}

.awesomplete > ul {
    background: linear-gradient(to bottom right, #5c0868, hsla(202.4, 80.4%, 30%, 0.8));
}

.awesomplete > ul::before {
    background: #5c0868;
}

.back-to-top-link {
  background: none;
}

.blog-items .blog-item {
  padding: 20px;
}

.card {
  border-radius: 25px;
}

.card-body {
  border-radius: 25px;
  padding-bottom: 30px;
}

.card-header:first-child {
  border-radius: 25px;
  padding-top: 30px;
}

.container-header .container-nav {
  justify-content: center;
}

.float-center.item-image {
  text-align: center;
}

.form-check-input {
    background-color: #99ccff;
}

.form-control {
    background-color: #99ccff !important;
    font-size: 1.4rem;
}

.form-text {
    color: #aaa;
}

.moduletable.search-center {
  margin: 60px auto !important;
}

.newsflash-title {
  padding-top: 3rem;
}

.nu {
  a {
    text-decoration: none;
  }
}