:root {
  /*--c01: #54478c; /* dark-slate-blue */
  /*--c02: #2c699a; /* sapphire-blue */
  /*--c03: #048ba8; /* blue-munsell */
  /*--c04: #0db39e; /* keppel*/
  /*--c05: #16db93; /* medium-aquamarine */
  /*--c06: #83e377; /* light-green */
  /*--c07: #b9e769; /* inchworm */
  /*--c08: #efea5a; /* corn */
  /*--c09: #f1c453; /* maize-crayola */
  /*--c10: #f29e4c; /* sandy-brown */
  /*--c11: #f15353; /* red1 */
  /*--c12: #f24c4c; /* red2 */

  /*--c21: #54478c88; /* dark-slate-blue */
  /*--c22: #2c699a88; /* sapphire-blue */
  /*--c23: #048ba888; /* blue-munsell */
  /*--c24: #0db39e88; /* keppel*/
  /*--c25: #16db9388; /* medium-aquamarine */
  /*--c26: #83e37788; /* light-green */
  /*--c27: #b9e76988; /* inchworm */
  /*--c28: #efea5a88; /* corn */
  /*--c29: #f1c45388; /* maize-crayola */
  /*--c30: #f29e4c88; /* sandy-brown */
  /*--c31: #f1535388; /* red1 */
  /*--c32: #f24c4c88; /* red2 */

  --radred: #ff3366;
  --lightradred: #ffc2d1;
  --darkradred: #cc0033;
  --darkradredpills: #cc003344;

  --orange: #ff8811;
  --lightorange: #ffc285;
  --darkorange: #b85c00;
  --darkorangepills: #b85c0044;

  --blue: #24cfc5;
  --lightblue: #8bd0f9;
  --darkblue: #003acc;
  --darkbluepills: #003acc44;

  --green: #20f370;
  --lightgreen: #8bf994;
  --darkgreen: #067430;
  --darkgreenpills: #06743044;

  --slate: rgb(33, 50, 44);
  --transpSlate: rgba(33, 38, 44, 0.5);
  --slate-50: rgb(85, 143, 114);
}

/* ----- Pills ---------------------------------------------------------------------*/

.lh-label-warning {
  background-color: var(--darkorangepills);
  color: var(--lightorange);
}
.lh-label-danger {
  background-color: var(--darkradredpills);
  color: var(--lightradred);
}
.lh-label-info {
  background-color: var(--darkbluepills);
  color: var(--lightblue);
}
.lh-label-success {
  background-color: var(--darkgreenpills);
  color: var(--lightgreen);
}

/* ----- HTML colors ---------------------------------------------------------------------*/
body,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
.nav-item {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: "Source Sans Pro", sans-serif !important;
}

h6 {
  font-size: 0.85em !important;
}

body,
html {
  min-height: 100vh;
  background-attachment: fixed;
  background-color: var(--slate);
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0.5em;
  margin-left: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: #00000000;
}

::-webkit-scrollbar-thumb {
  background-color: #666666;
  border-radius: 10px;
}

/* ----- Text ---------------------------------------------------------------------*/

@media (max-width: 425px) {
  #firstTitle,
  #boldTitle,
  #howtoTitle {
    letter-spacing: 0.01rem !important;
  }
}

.lowercase {
  text-transform: lowercase;
} /* turns input keywords in search bar and Cons data page to lowercase */

.text-dark {
  color: rgba(
    255,
    255,
    255,
    0.15
  ) !important; /* transparent on dark bg for darker font */
}

.text-light {
  color: rgba(255, 255, 255, 0.9) !important; /* title font */
}

.text-primary {
  color: #2c699a !important;
}

.text-info {
  color: var(--blue) !important;
}

.text-warning {
  color: var(--radred) !important;
}

.text-keyword {
  color: rgba(0, 0, 0, 0.8) !important;
}

.textGradient {
  background: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.65)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----- Buttons ---------------------------------------------------------------------*/

.btn {
  height: 40px !important;
  color: #ffffff !important;
  padding: 0.5em 1em !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: inline-block !important;
  outline: none !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  border: #ffffff00 !important;
  background-size: 120% auto !important;
}

.btn-round {
  color: #ffffff !important;
  font-weight: 350 !important;
  padding: 0.5em 0.9em !important;
  height: 40px !important;
  width: 40px;
  border-radius: 50%;
  position: relative !important;
  display: inline-block !important;
  outline: none !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  background-size: 120% auto !important;
  border-color: #ffffff00;
}

.btn-primary {
  background-image: linear-gradient(
    25deg,
    var(--darkblue) 5%,
    var(--blue) 90%
  ) !important; /* Was #4361ee 1%, #4CC9F0 90% */
}
.btn-primary:hover {
  background-position: right center !important;
}
.btn-primary:active {
  top: 2px !important;
}
.btn-primary:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.btn-outline-primary {
  border: 1px solid var(--blue) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
}

.btn-secondary {
  background-image: linear-gradient(
    45deg,
    var(--radred) 1%,
    var(--orange) 90%
  ) !important; /* WAS #7209b7 1%, #f72585 */
}
.btn-secondary:hover {
  background-position: right center !important;
}
.btn-secondary:active {
  top: 2px !important;
}

.btn-outline-secondary {
  border: 1px solid var(--radred) !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background-image: none !important;
}

/* Connect with Google button */
.btn-outline-light {
  border: 1px solid white !important;
}

.btn-outline-light:hover,
.btn-outline-light:active {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  background-image: none !important;
}

.keyword-outline {
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.bg-success {
  background-image: linear-gradient(
    45deg,
    var(--darkgreen) 1%,
    var(--green) 90%
  ) !important;
}
.btn-success {
  background-image: linear-gradient(
    45deg,
    var(--darkgreen) 1%,
    var(--green) 90%
  ) !important;
}
.bg-warning {
  background-image: linear-gradient(
    45deg,
    var(--darkorange) 1%,
    var(--orange) 90%
  ) !important;
}
.btn-warning {
  background-image: linear-gradient(
    45deg,
    var(--darkorange) 1%,
    var(--orange) 90%
  ) !important;
}
.bg-info {
  background-image: linear-gradient(
    45deg,
    var(--darkblue) 1%,
    var(--blue) 90%
  ) !important;
}
.btn-info {
  background-image: linear-gradient(
    45deg,
    var(--darkblue) 1%,
    var(--blue) 90%
  ) !important;
}
.bg-danger {
  background-image: linear-gradient(
    45deg,
    var(--darkradred) 1%,
    var(--radred) 90%
  ) !important;
}
.btn-danger {
  background-image: linear-gradient(
    45deg,
    var(--darkradred) 1%,
    var(--radred) 90%
  ) !important;
}

/* ----- BACKGROUND ---------------------------------------------------------------------*/
.bg-primary {
  background-image: linear-gradient(
    40deg,
    var(--darkblue) 5%,
    var(--blue) 100%
  ) !important;
}

.bg-secondary {
  background-image: linear-gradient(
    40deg,
    var(--darkradred) 5%,
    var(--radred) 100%
  );
}

.bg-light {
  background-color: var(--slate-50) !important; /* lighter green */
}

.bg-dark {
  background-color: var(--slate) !important; /* darker green */
}

.bg-transparent {
  background-color: #ffffff00 !important; /* transparent color for card */
}

.bg-collapseMsg {
  background-color: #ffffff00 !important;
  /* bg color of collapsed msg window in profile */
}
.bg-keywords {
  background-color: var(--lightradred);
}
.blueblue-gradient {
  background: linear-gradient(200deg, var(--blue) 0%, var(--darkblue) 120%);
}
.bluegreen-gradient {
  background: linear-gradient(220.55deg, #8fff85 0%, #39a0ff 100%);
}
.blue-gradient {
  background: linear-gradient(220.55deg, #5ee2ff 0%, #00576a 100%);
}
.orange-gradient {
  background: linear-gradient(220.55deg, #ffdc99 0%, #ff62c0 100%);
}
.blue-bg {
  background-color: var(--lightblue);
}
.green-bg {
  background-color: var(--slate-50);
}
.orange-bg {
  background-color: var(--darkorange);
}
.pink-bg {
  background-color: var(--radred);
}
.green-gradient {
  background: linear-gradient(
    220.55deg,
    var(--lightgreen) 0%,
    var(--green) 100%
  );
}
/* .pink-gradient {background: linear-gradient(220.55deg, #ffdcf0 0%, #ff88dd 100%);} */
.pink-gradient {
  background: linear-gradient(
    220.55deg,
    var(--lightradred) 0%,
    var(--radred) 100%
  );
}
.yellow-gradient {
  background: linear-gradient(220.55deg, #fadd76 0%, #9f3311 130%);
}

/* ----- MISC ---------------------------------------------------------------------*/

.dmxDropzone .dmxDropzoneThumb {
  margin: auto;
  text-align: start;
}

.border-dark {
  color: #00000088 !important;
}

.video-mask {
  width: 100%;
  border-top-left-radius: 0.9rem !important;
  border-top-right-radius: 0.9rem !important;
  background: rgba(255, 255, 255, 0);
  overflow: hidden;
  -webkit-transform: translateZ(0);
}

.rounded-top {
  border-top-left-radius: 0.5rem !important;
  border-top-right-radius: 0.5rem !important;
}
.rounded-bottom {
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.rounded {
  border-radius: 0.5rem !important; /* Smaller border radius than standard */
}

.popover {
  max-width: 100% !important;
}
.tooltip {
  max-width: 100% !important;
}

.card {
  background-color: #ffffff00 !important; /* transparent card */
}
.card.bg-dark {
  /* TEST IT with .CARD.bg-dark */
  background-color: #ffffffbe !important; /* transparent white hue bg of card body */
}
.card-header {
  padding: 1rem !important;
}

.dmxDropzoneMessage {
  color: rgba(255, 255, 255, 0.9) !important;
}

.shadow {
  -webkit-box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.7) !important;
}
.shadow-50 {
  -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.7) !important;
}

.blur {
  backdrop-filter: blur(6px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(100%) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.blur100 {
  background: rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

.modal-content {
  background-color: #ffffff00 !important; /* make modal body transparent to give .blur its effect */
}
.modal-header {
  border-bottom: 0;
}

.img-thumbnail {
  background-color: #ffffff !important; /* white border around photo */
}

i.fas.fa-star,
i.fas.fa-star-half-alt,
i.far.fa-star {
  color: rgb(255, 238, 143) !important;
}

/* ----- Forms ---------------------------------------------------------------------*/

.form-control,
.form-control:focus {
  color: rgba(
    255,
    255,
    255,
    0.8
  ) !important; /* white slight transparent text */
  background-color: rgba(
    255,
    255,
    255,
    0.25
  ) !important; /* transparent input fields background */
  border: 0px !important;
  -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
  backdrop-filter: blur(9px) saturate(120%) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ffffffbb !important;
  border-radius: 3px !important;
}
.form-control::-webkit-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(255, 255, 255, 0.85);
  opacity: 1; /* Firefox */
}
.form-control::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(255, 255, 255, 0.85);
  opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(255, 255, 255, 0.85);
  opacity: 1; /* Firefox */
}

.form-select {
  color: rgba(
    255,
    255,
    255,
    0.8
  ) !important; /* white slight transparent text */
  background-color: rgba(
    255,
    255,
    255,
    0.25
  ) !important; /* transparent input fields background */
  border: 0px !important;
  -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
  backdrop-filter: blur(9px) saturate(120%) !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #ffffffbb !important;
  border-radius: 3px !important;
}

.form-select option {
  color: rgba(0, 0, 0, 0.9) !important;
  background: rgb(255, 255, 255) !important;
}

.col-form-label {
  color: rgba(255, 255, 255, 0.9) !important; /* label font */
}
.col-form-label:focus {
  color: rgba(0, 0, 0, 0.623) !important; /* floating label color */
}

.form-check-input:checked {
  background-color: #0093b8 !important;
  border-color: #0093b8 !important;
}

/* ----- Backgrounds for messages ---------------------------------------------------------------------*/

.bodywriter {
  /* for Dashboards Messaging */
  background-color: #ffffff1a;
  border-radius: 8px;
  border-left: 1px solid white;
  width: 80%;
  padding: 0 5px;
  float: right;
  clear: right;
}
.bodyrecipient {
  /* for Dashboards Messaging */
  background-color: #ffffff2d;
  border-radius: 8px;
  border-left: 1px solid white;
  width: 80%;
  padding: 0 5px;
  float: left;
  clear: left;
}

.framebkg {
  /* for Sessions and Messaging */
  background-color: #ffffff1a;
  border-radius: 8px;
}

.offerbkg {
  /* for Dashboards Messaging */
  background-color: #0196151a;
  padding: 5px 0px;
  margin: 0 0px;
  border-radius: 8px;
  clear: both;
}

.sessionbkg {
  /* for Sessions and Messaging */
  background-color: #ffffff1a;
  padding: 10px;
  margin: 10px 0px;
  border-radius: 8px;
}

.chartbkg {
  /* for Sessions and Messaging */
  background-color: #ffffff1a;
  padding: 0px;
  margin: 0;
  border-radius: 8px;
}

.mouse-hover {
  cursor: pointer !important;
}

/* ----- Navbar ---------------------------------------------------------------------*/

.navbar {
  background-color: transparent;
}
.navbar-toggler,
.navbar-light,
.navbar-toggler:active,
.navbar-light:active {
  /* Navbar burger: Set the icon outside border color */
  color: rgba(255, 255, 255, 0) !important;
  border: none;
  border-color: rgba(255, 255, 255, 0.6) !important;
  margin-right: 0px;
}
.navbar-toggler-icon {
  /* Navbar burger: Set the icon stroke to grey */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.3)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='5' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

.dropdown-menu {
  background-color: var(--slate-50); /* Navbar dropdown */
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Navbar dropdown */
}

/* ----- Footer ---------------------------------------------------------------------*/
/* inside footer.php file
/* -----  ---------------------------------------------------------------------*/

.green-wave {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' id='svg' viewBox='0 0 1440 700' xmlns='http://www.w3.org/2000/svg' class='transition duration-300 ease-in-out delay-150'%3E%3Cpath d='M 0 700 C 0 700 0 350 0 350 C 180.66666666666669 367.3333333333333 361.33333333333337 384.66666666666663 513 371 C 664.6666666666666 357.33333333333337 787.3333333333333 312.6666666666667 937 304 C 1086.6666666666667 295.3333333333333 1263.3333333333335 322.66666666666663 1440 350 C 1440 350 1440 700 1440 700 Z' stroke='none' stroke-width='0' fill='%238eb897ff' class='transition-all duration-300 ease-in-out delay-150 path-0'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

.stacked-waves {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url("../assets/images/stacked-waves-haikei2.svg");
}

.meshBG {
  background-image: url("../assets/images/login-bg.webp");
  background-size: cover;
  background-position: center center;
  height: 100vh;
}

.centerEye {
  position: absolute;
  top: 18px;
  right: 0px;
}

.one {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'width='24' height='24'viewBox='0 0 172 172'style=' fill:%23ffffff%3B'%3E%3Cg fill='none' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cpath d='M0 172v-172h172v172z' fill='none'%3E%3C/path%3E%3Cg id='original-icon' fill='%23ffffff'%3E%3Cpath d='M86 14.33333c-39.41667 0 -71.66667 32.25 -71.66667 71.66667c0 39.41667 32.25 71.66667 71.66667 71.66667c39.41667 0 71.66667 -32.25 71.66667 -71.66667c0 -39.41667 -32.25 -71.66667 -71.66667 -71.66667zM88.86667 118.96667v0c-3.56183 0 -6.45 -2.88817 -6.45 -6.45v-44.43333l-8.97983 2.8595c-3.36117 1.06783 -6.78683 -1.4405 -6.78683 -4.95933v0c0 -2.17867 1.36167 -4.128 3.40417 -4.88767l23.82917 -8.77917h1.43333v60.2c0 3.56183 -2.88817 6.45 -6.45 6.45z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}