/* This is SnapCheck's main stylesheet, _custom.scss, customized to handle our company website, as well as our webapp and partner products. */
/* We also currently utilize Bootstrap 4 Defaults at bootstrap.css, as well as _button-group.scss, styles.scss, and float-label.css */
/* Bootstrap 4 documentation: https://getbootstrap.com/docs/4.3/getting-started/introduction/ */
/* Bootstrap theme variable overrides follow */

/* Smooth those fonts */
html {
  -webkit-font-smoothing: antialiased;
}
/* Assign the universal font treatment */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  //color: #4c4c4c; /* CAN THIS TEXT COLOR BE REMOVED? */
  text-align: left;
  background-color: #fff;
}
/* Placement, dimensions and call for the logo -- NOTE THAT THIS IS BEING FIGURED OUT (TODD) 6.12.2019 */
logo  {
  div.absolute {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 35px;
  }
}
/* set the font-face */
:root {
  --font-family-sans-serif: "Helvetica Neue", Arial, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
$btn-height:  56px;
$text-letter-space: 1px;
$btn-text-letter-space: $text-letter-space + 0.15;

/* This is where the THEME COLORS live, pulled for each partner by name. Note that we are using color names as indicated below, assigned to a hex value */
// default snapcheck
$snapcheck-colors: (
  "supernova": #f8b636,
  "carrot-orange": #eb9723,
  "air-force-blue": #5f749a,
  "chatham-blue": #2d546d,
  "venetian-red": #d0021b,
  "chateau-green": #28a745,
  "matterhorn": #4c4c4c,
  "dark-gray": #a8a8a8,
  "gainsboro": #d8d8d8,
  "link-water": #ced4da,
  "very-light-grey": #ccc,
  "whisper": #eee,
  "white": #fff,
) !default;
// azlo
$azlo-colors: (
  "primary": #b519f1,
  "primary-dark": #8318b6,
  "white": #fff,
) !default;
// yooz
//$yooz-logo: (
//div.absolute {
//  position: absolute;
//  top: 0px;
//  left: 0px;
//  height: 35px;
//}
//) !default;
$yooz-colors: (
  "supernova": #f8b636,
  "carrot-orange": #eb9723,
  "air-force-blue": #5f749a,
  "chatham-blue": #2d546d,
  "venetian-red": #d0021b,
  "chateau-green": #28a745,
  "matterhorn": #4c4c4c,
  "dark-gray": #a8a8a8,
  "gainsboro": #d8d8d8,
  "link-water": #ced4da,
  "very-light-grey": #ccc,
  "whisper": #eee,
  "white": #fff,
) !default;
$themes: (
  // default snapcheck theme
  default: (
    name: 'default',
    // primary button color
    primary: map_get($snapcheck-colors, "supernova"),
    // secondary button color
    secondary: map_get($snapcheck-colors, "gainsboro"),
    // primary dark for hover effect etc.
    primary-dark: map_get($snapcheck-colors, "carrot-orange"),
    // secondary dark for hover effect etc.
    secondary-dark: map_get($snapcheck-colors, "dark-gray"),
    tertiary-dark: map_get($snapcheck-colors, "very-light-grey"),
    quaternary-dark: map_get($snapcheck-colors, "whisper"),
    primary-button-text: map_get($snapcheck-colors, "matterhorn"),
    secondary-button-text: map_get($snapcheck-colors, "matterhorn"),
    field-border-color: map_get($snapcheck-colors, "link-water"),
    valid-field: map_get($snapcheck-colors, "chateau-green"),
    header: map_get($snapcheck-colors, "matterhorn"),
    white-color: map_get($snapcheck-colors, "white"),

    // The following line was remporarily removed to address the CTA button color not being white 6/14/2019
    //body-text-color: map_get($snapcheck-colors, "matterhorn"),
    card-title-color: map_get($snapcheck-colors, "air-force-blue"),
    link-text-color: map_get($snapcheck-colors, "air-force-blue"),
    error-color: map_get($snapcheck-colors, "venetian-red"),
    radio-button-color: map_get($snapcheck-colors, "supernova"),
  ),
  azlo: (
    // primary button color
    primary: map_get($azlo-colors, "primary"),
    // primary dark for hover effect etc.
    primary-dark: map_get($azlo-colors, "primary-dark"),
    white: map_get($azlo-colors, "white"),
  ),
  darkly: (
    name: 'darkly',
    primary: #008cba,
  ),
  //yooz: (
  //  // primary button color
  //  primary: map_get($yooz-colors, "primary"),
  //  // primary dark for hover effect etc.
  //  primary-dark: map_get($yooz-colors, "primary-dark"),
  //),
);
/* Implementation of themes follows */
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}
@function theme-color($key: "primary") {
  @return map-get($theme-map, $key);
}
@function themed($key) {
  @return map-get($theme-map, $key);
}
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
/* Anything that has color goes HERE; everything else can live outside -----------------------------------------------*/
* {
  @include themify($themes) {
    // custom theme to your needs. Add here
    @if themed('name') == 'default' {
    }
    @if themed('name') == 'yeti' {
    }
    @if themed('name') == 'darkly' {
    }
    @if themed('name') == 'azlo' {
    }
    @if themed('name') == 'yooz' {
    }
    /* Global for all themes */
    * {
      color: themed("body-text-color");
    }
    // Below will effect all themes
    h1, h2, h3, h4, h5, h6 {
      color: theme-color("header");
    }
    // Text links are assigned color here and are always underlined for accessibility best practices
    a {
      color: themed("link-text-color");
      text-decoration: underline !important;
    }
    .input-group .input-group-append {
      border: 0;
      background: themed("white-color");
      a.bg-white:hover, a.bg-white:focus, button.bg-white:hover, button.bg-white:focus {
        background-color: themed("white-color") !important;
      }
    }
/* If using code examples: */
    code {
      color: themed("body-text-color");
    }

/* Action button colors */
    .btn {
      background-color: themed("primary") !important;
      border-color: themed("primary");
      color: themed("white-color");
    }
    .btn:hover {
      background-color: themed("primary-dark") !important;
      border-color: themed("primary-dark");
      text-decoration: none;
    }
    .btn-secondary {
      background-color: themed("secondary") !important;
      border-color: themed("secondary") !important;
      color: themed("white-color");
    }
    .btn-secondary:hover {
      background-color: themed("secondary-dark") !important;
      border-color: themed("secondary-dark") !important;
      color: themed("white-color");
    }
    .btn-lg {
      &:hover {
        background-color: themed("white-color");
        border-color: themed("primary");
      }
    }
    .btn-primary.disabled, .btn-primary:disabled {
      background-color: themed("primary");
      border-color: themed("primary");
    }
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
      background-color: themed("primary");
      border-color: themed("primary");
    }
    .btn-primary:focus, .btn-primary.focus {
      box-shadow: none !important;
      text-decoration: underline;
    }
    .btn-secondary:focus, .btn-secondary.focus {
      box-shadow: none !important;
      text-decoration: underline;
    }
    /* Text color assignment for the "card-title" header content */
    .card-title {
      color: themed("card-title-color");
    }

    /* Error popup attributes */
    .error {
      color: themed("white-color") !important;
      background-color: themed("error-color");
    }
    .form-control::placeholder {
      color: themed("secondary-dark") !important;
    }
    .was-validated .form-control:valid, .form-control.is-valid {
      border-color: themed("field-border-color") !important;
      border-left-color: themed("valid-field") !important;
    }
    .was-validated .form-control:invalid, .form-control.is-invalid, .form-control.is-invalidtextarea{
      border-color: themed("field-border-color") !important;
      border-left-color: themed("error-color") !important;
    }

    /* Form Field border color */
    .form-control {
      &:focus {
        color: themed("body-text-color");
        background-color: themed("white-color");
        border-color: themed("field-border-color");
        border-left-color: themed("primary");
      }
    }
    .form-control:valid-feedback {
      color: themed("valid-field"); /* CHECK TO MAKE SURE THIS IS WORKING */
      background-color: themed("primary");
      border-color: themed("field-border-color");
      border-left-color: themed("valid-field");
    }
    /* Create a custom radio button */
    .snapcheck-checkmark {
      background-color: themed("quaternary-dark");
    }
    /* On mouse-over, add a grey background color */
    .primary-radio-button:hover input ~ .snapcheck-checkmark {
      background-color: themed("tertiary-dark");
    }
    /* When the radio button is checked, add the SnapCheck branded color background */
    .primary-radio-button input:checked ~ .snapcheck-checkmark {
      background-color: themed("primary");
    }
    /* Style the indicator (dot/circle) */
    .primary-radio-button .snapcheck-checkmark:after {
      background: themed("white-color");
    }
    /* Check Boxes */
    /* Create a custom checkbox */
    .checkmark {
      background-color: themed("quaternary-dark");
    }
    /* On mouse-over, add a grey background color */
    .snapcheck-checkbox:hover input ~ .checkmark {
      background-color: themed("tertiary-dark");
    }
    /* When the checkbox is checked, add a supernova background */
    .snapcheck-checkbox input:checked ~ .checkmark {
      background-color: themed("primary");
    }

  }
}
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/*** END OF THEME COLOR AREA ---------------------------------------------------------------------------------------***/
/* Action button attributes */
.btn {
  font-weight: 600;
  height: $btn-height;
  letter-spacing: $btn-text-letter-space;
}
.btn:hover {
  text-decoration: none;
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: none !important;
}
.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: none !important;
}
/* Default padding and margins on body text */
p {
  padding-top: 0.25rem;
  margin-bottom: 10em;
}
/* Different margin bottom on the headings */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .1em !important;
}
ul li, ol li {
  margin-bottom: 1em;
}
#typography {
  font-size: 3rem;
}
.marquee {
  font-size: 3rem;
  font-weight: 400;
}
.line-through {
  text-decoration: line-through;
}
//commented out the padding attributes for now. The were creating a bug in the onboarding process.
.alert-danger {
  font-size: 1rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  //padding-top: .125rem;
  //padding-bottom: .25rem;
  //padding-left: .5rem;
  //padding-right: .5rem;
}
//commented out the padding attributes for now. The were creating a bug in the onboarding process.
.error {
  font-size: 1rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  //padding-top: .125rem;
  //padding-bottom: .25rem;
  //padding-left: .5rem;
  //padding-right: .5rem;
}
.font-bold-600 {
  font-weight: 600;
}

/* Form field classes below */
/* Color Assignment Above */
.form-control::placeholder {
  opacity: 1;
}
/* Color Assignment Above */
.was-validated .form-control:valid, .form-control.is-valid {
  box-shadow: none !important;
}
/* Color Assignment Above */
.was-validated .form-control:invalid, .form-control.is-invalid, .form-control.is-invalidtextarea{
  box-shadow: none !important;
}
form {
/* "Required" Form Field (with asterisk). Asterisk color and placement in field. Color Assignment STAYS HERE. */
  .required:after {
    content: "*" !important;
    padding-left: 3px;
    color: #d0021b;
  }
/* This controls the left expanding border width and color */
  .form-control {
    &:focus {
/*      border-left-width: 0.125em; */
      outline: 0;
      box-shadow: none;
    }
  }
  /* Valid Feedback Form Field with left border indicator. Color Assignment Above. */
  .form-control:valid-feedback {
/*    border-left-width: 0.125em; */
    outline: 0;
    box-shadow: none !important;
  }
/* Control the dimensions and layout of the form fields and the content within */
  .form-control {
    font-size: 20px;
    height: 56px;
    letter-spacing: 0.1px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    vertical-align: middle;
    padding-top: 24px;
  }
}
/* Radio buttons */
.primary-radio-button {
  display: initial;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 1.25rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.primary-radio-button input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button COLORS ABOVE */
.snapcheck-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.364rem;
  width: 1.364rem;
  border-radius: 50%;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.snapcheck-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.primary-radio-button input:checked ~ .snapcheck-checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) COLOR ABOVE */
.primary-radio-button .snapcheck-checkmark:after {
  top: 33%;
  left: 33%;
  width: 0.4275rem;
  height: 0.4275rem;
  border-radius: 50%;
}
/* Check Boxes */
.snapcheck-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: 1.25rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.snapcheck-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox COLOR ABOVE */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.364rem;
  width: 1.364rem;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.snapcheck-checkbox input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.snapcheck-checkbox .checkmark:after {
  border: solid white;
  border-width: 0 3px 3px 0;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Buttons! */
.btn {
  -webkit-appearance: button;
  border: 0;
  border-radius: 4px;
  //box-shadow: 1px 2px 4px 0 rgba(76, 76, 76, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  font-size: 1.25rem !important;
  outline: 0;
  text-align: center;
  text-transform: none;
  //transition-property: box-shadow;
  transition-timing-function: ease-in-out;
  width: 47%;
  transition-duration: 350ms;
  transition-property: background-color;
  transition-timing-function: ease-in-out;
}
.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-image: none !important;
    background-repeat: no-repeat;
    background-position: center right calc(1.375em + 0.1875rem) !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: center right calc(1.375em + 0.1875rem) !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-invalidtextarea {
  padding-right: calc(1.5em + 0.75rem);
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: center right calc(1.375em + 0.1875rem) !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

Back to Top