@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i&display=swap');
// base styles
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

html, body {
  font-family: Roboto, sans-serif;
}

strong, b {
  font-weight: $font-weight-medium;
}

// tab styles
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-open-tabs {
    .tab-list {
        border: none;
        width: 100%;
        margin: 0 auto;
        display: flex;
        border-bottom: 1px solid $tab-list-border;
    }

    .tab {
        flex: 1;
        text-align: center;
        text-transform: none;
        color: $tab-color;
        font-size: 14px;
        font-weight: $font-weight-regular;
        border: none;
        cursor: pointer;
        border-bottom: 1px solid $tab-list-border;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .selected {
        border-bottom: 4px solid $spb-purple;
        font-weight: $font-weight-bold;
    }

    .tab-icon {
        img {
            width: 25px;
            height: 25px;
        }
    }
}

// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-square-tabs {
    .tab {
        font-size: 16px;
        font-weight: $font-weight-bold;
        flex: 1;
        cursor: pointer;
        text-align: center;
        padding: 15px 40px;
        color: $gray-medium-2;
        background-color: transparent;
        border: 1px solid white;
        border-bottom: 1px solid $gray-normal-1;
        transition: color 200ms ease-out, background-color 200ms ease-out;
        &:hover {
            cursor: pointer;
            color: black;
            background-color: $tab-hover;
        }
        @media screen and (max-width: $screen-xs-max) {
            padding: 10px 0 10px;
        }
    }

    .selected {
        color: $primary-green;
        text-align: center;
        background-color: white;
        border: solid 1px $tab-container-border;
        border-bottom: 1px solid white;
        &:hover {
            color: $primary-green;
            background-color: white;
        }
    }

    .tab-content {
        width: 100%;
        margin: auto;
        box-sizing: border-box;
        background-color: white;
        border: 1px solid $gray-normal-1;
    }

    .content-padding {
        padding-top: 80px;
    }

    .tab-subtitle {
        font-size: 11px;
        padding-top: 5px;
    }

    .container-heading {
        font-size: 22px;
        text-align: center;
        color: black;
        padding-top: 15px;
    }

    .container-subheading {
        font-size: 13px;
        font-weight: $font-weight-light;
        text-align: center;
        color: black;
        padding-top: 10px;
    }

}

// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-tab-container {
    .content-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
    }

    .tab-list {
        list-style: none;
        display: flex;
        margin-bottom: 0;
        top: 1px;
        position: relative;
        z-index: 1;
        padding: 0;
    }
}



// button styles
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-primary-button button {
  margin: 0;
  width: 250px;
  height: 60px;

  font-size: 18px;
  font-weight: $font-weight-medium;
  text-align: center;
  color: white;
  
  cursor: pointer;
  background-color: $primary-green;
  border: 1px solid $primary-hover;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(87,71,81,.2);
  transition: .2s ease-out;

  &:hover {
    background-color: $secondary-green;
    border: 1px solid $primary-border-hover;
    box-shadow: 0 2px 6px 0 rgba(87,71,81,.2);
  }

  &:focus {
    outline: none;
  }

  &.flat {
    height: 60px;
    font-size: 20px;
    border-radius: 0;
  }

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    height: 45px;
  }
}

// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-primary-flex-button button {
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    height: 47px;

    font-size: 18px;
    font-weight: $font-weight-medium;
    text-align: center;
    color: white;

    cursor: pointer;
    background-color: $primary-green;
    border: 1px solid $primary-hover;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(87, 71, 81, .2);
    transition: .2s ease-out;

    &:hover {
        background-color: $secondary-green;
        border: 1px solid $primary-border-hover;
        box-shadow: 0 2px 6px 0 rgba(87, 71, 81, .2);
    }

    &:focus {
        outline: none;
    }

    &.flat {
        height: 60px;
        font-size: 20px;
        border-radius: 0;
    }

    @media screen and (max-width: $screen-xs-max) {
        height: 45px;
    }
}

// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-secondary-button button {
  height: 40px;
  width: 200px;
  margin: 0;
  
  font-size: 16px;
  color: white;
  cursor: pointer;

  background-color: $secondary-button;
  border: 1px solid $secondary-button-hover;
  border-radius: 5px;
  box-shadow: 0 2px 1px 0 rgba(87,71,81,.2);
  transition: .2s ease-out;
  &:hover {
    background-color: $secondary-button-hover;
    box-shadow: 0 2px 6px 0 rgba(87,71,81,.2);
  }
  &:focus {
    outline: none;
  }

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;
    height: 45px;
  }
}
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-tertiary-button button {  
  margin-top: 7px;
  min-width: 200px;
  height: 25px;
  
  font-size: 13px;
  color: $ghost-button;
  cursor: pointer;

  border-radius: 2px;
  box-shadow: 1px 1px 2px 0 rgba(97,97,97,.07);
  background-color: $gray-light;
  border: 1px solid $ghost-button-hover;
  transition: all .2s ease-out;

  &:hover {
    box-shadow: 1px 1px 2px rgba(97,97,97,.07);
    background-color: $ghost-button-inverted;
  }
  &:focus {
    outline: none;
  }
}
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-ghost-button button {
    min-width: 70px;
    height: 30px;
    cursor: pointer;

    text-align: center;
    font-size: 13px;
    font-weight: $font-weight-regular;
    color: white;

    border-radius: 4px;
    border: 1px solid #666;
    background-color: #777;
    box-shadow: 1px 1px 2px 0 rgba(97, 97, 97, .07);
    transition: all .2s ease-out;
    &:hover {
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }
    &:focus {
        outline: none;
    }
    &.inverted {
        background-color: transparent;
        color: black;
    }
}
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-circular-button button {  
  margin-top: 7px;
  min-width: 142px;
  height: 48px;
  
  font-size: 13px;
  color: $ghost-button;
  cursor: pointer;

  border-radius: 32.6px;
  box-shadow: 1px 1px 2px 0 rgba(97,97,97,.07);
  background-color: $gray-light;
  border: 1px solid $ghost-button-hover;
  transition: all .2s ease-out;

  &:hover {
    background-color: $ghost-button-inverted;
  }
  &:focus {
    outline: none;
  }
}
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.spb-gradient-button {
  div {
    margin: 35px 0 0;
    display: inline-block;
    border-radius: 3px;
  }
  button {
    min-width: 180px;
    height: 45px;
    
    font-size: 15px;
    text-align: center;
    color: white;
    line-height: 20px;
    letter-spacing: .4px;
    
    cursor: pointer;
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 3px;
    box-shadow: 0 2px 4px 0 rgba(87,71,81,.2);
    transition: .2s ease-out;
    
    &:hover {
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.13);
      background-image: none !important;
      background-color: transparent;
    }

    &:focus {
      outline: none;
    }
  }
}



// badge style
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.badge {
  font-size: 11px;
  padding: 0 6px;
  height: 22px;
  color: white;
  border-radius: 3px;
  line-height: 22px;
  width: max-content;

  @media screen and (max-width: $screen-sm-min){
    font-size: 13px;
    height: 28px;
    line-height: 28px;
  }
}

// text inputs styles
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.primary-input-label {
    display: block;
    font-size: 12px;
    color: $input-label;
    font-weight: $font-weight-light;
    cursor: auto;
    padding-bottom: 5px;
}

.required-icon::after {
    content: ' *';
    color: $input-required-icon;
}

.input-box {
    display: flex;
    align-items: center;
    position: relative;
}

.input-icon {
    position: absolute;
    padding-left: 10px;
    width: 25px;
    height: 25px;
}

.primary-input {
    font-size: 13px;
    padding: 7px;
    display: block;
    width: 100%;
    outline: 0;
    color: $input-font;
    background-color: white;
    border: 1px solid $input-border;
    font-weight: $font-weight-regular;
    line-height: 24px;
    box-shadow: 0 0 0 transparent;
    transition: .3s ease-out;
    border-radius: 3px;

    input::-webkit-input-placeholder, input::-moz-placeholder, input::-ms-input-placeholder, input::-moz-placeholder {
        /* Chrome/Opera/Safari */
        font-family: Arial;
        font-size: 13px;
        letter-spacing: 0.6px;
        color: $gray-2;
    }

    &:focus {
        outline: 0;
        border: 1px solid $spb-green;
    }
}

.input-icon-padding {
    padding-left: 40px;
}

.primary-input-error {
    border: 1px solid $error-color;
}

.error-message {
    color: $error-color;
    font-weight: $font-weight-light;
    font-size: 12px;
    padding-top: 5px;
}
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.radio-container {
    display: flex;
    align-items: center;

    input[type="radio"] {
        -webkit-appearance: none;
        position: static;
        left: inherit;
        float: none;
        height: inherit;
        min-height: 25px;
        min-width: 25px;
        border-radius: 25px;
        background-color: white;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 4px solid white;
        box-shadow: 0px 0px 0px 1px $gray-normal-1;

        &:focus {
            outline: none;
        }
    }

    input[type="radio"]:checked {
        -webkit-appearance: none;
        position: static;
        left: inherit;
        float: none;
        height: inherit;
        min-height: 25px;
        min-width: 25px;
        border-radius: 25px;
        background-color: $spb-green;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 4px solid white;
        box-shadow: 0px 0px 0px 1px $gray-normal-1;

        &:focus {
            outline: none;
        }
    }

    label {
        font-size: 13px;
        display: inline;
        margin-left: 7px;
        letter-spacing: 0.5px;
        cursor: pointer;
        color: $spb-purple;
    }
}

// radio slider style
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

input[type="range"] {
    -webkit-appearance: none;
    width: 200px;
    height: 15px;
    background-color: $light-gray-1;
    border: 1px solid $slider-border;
    border-radius: 10px;
    display: inline-block;
    margin: auto;
    transition: all 0.3s ease;

    @media screen and (max-width: $screen-sm-max) {
        width: 320px;
        height: 24px;
    }
}

input[type="range"]:hover {
    background-color: $slider-hover-color;
}

input[type="range"]:focus {
    outline-width: 0;
    border: 1px solid $spb-green;
    transition: $default-transition;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background-color: $hot-pink;
    border-radius: 30px;
    box-shadow: 0px 0px 3px $slider-box-shadow-color;
    transition: all 0.3s ease;
    border: 1px solid $slider-thumb-border;

    @media screen and (max-width: $screen-sm-max) {
        width: 48px;
        height: 48px;
    }
}

input[type="range"]::-webkit-slider-thumb:hover {
    background-color: $hot-pink;
    box-shadow: 0px 0px 3px $slider-box-shadow-color;
}

input[type="range"]::-webkit-slider-thumb:active {
    box-shadow: 0px 0px 1px $hot-pink;
}

// bullet style
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.bullet {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    color: white;
    background-color: $hot-pink;
    border-radius: 50%;
}

// checkmark style
// Color Variables

// primary colors
$spb-purple: #48485E;
$spb-green: #00C09D;
$hot-pink: #EF2964;

// secondary colors
$link-blue: #2D87B1;
$dark-blue: #004463;
$certificate-green: #2CA893;

// gray scale colors
$medium-gray-1: #7D7F89;
$light-gray-1: #EFEFF6;
$gray-2: #9D9D9D;
$purplish-gray: #A4A4AF;

$primary-purple: #48485e;
$primary-green: #00c09d;
$primary-pink: #ef2964;

$secondary-blue: #2d87b1;
$secondary-darkblue: #004463;
$secondary-green: #2ca893;

$gray-medium-1: #7d7f89;
$gray-normal-1: #b3b3b3;
$gray-light: #efeff6;

$gray-medium-2: #8b8b8b;
$gray-normal-2: #9d9d9d;
$gray-purplish: #a4a4af;
$grey-text: #a4a4a4;

$red: #D0021B;
$error-color: $red;

// Input
$input-label: #444;
$input-required-icon: #1abc9c;
$input-font: #393c3d;
$input-border: #d3d5d5;

// Radio Slider
$slider-border: #c5c5c7;
$slider-box-shadow-color: #3c6d59;
$slider-thumb-border: #BC1F4E;
$slider-hover-color: #e6e6f1;

// Tabs
$tab-container-border: $gray-normal-1;
$tab-background: #219bc8;
$tab-list-border: #eef;
$tab-color: #333;
$tab-hover: #e4e4e4;

// Transitions
$default-transition: all 0.3s ease-out;

// Links
$basic-anchor-color: #2D87B0;
$visited-anchor-color: #23769b;
$hover-anchor-color: #23527c;

// Transitions
$default-transition: all 0.3s ease-out;

// Button
$primary-hover: #00ab8c;
$primary-border-hover: #259682;
$secondary-button: #777;
$secondary-button-hover: #666;
$ghost-button: #484860;
$ghost-button-hover: #e3e3f2;
$ghost-button-inverted: #e5e5ef;
$button-green-border: #b1e6dc;
$button-grey-border: #d7d7f2;
$mark-complete-background: #c6efe7;
$mark-complete-hover: #e7e7f4;
$mark-complete-border: #c9c9e6;

// Screen Sizes
$screen-sm: 768px !default;
$screen-lg: 1200px !default;
$screen-md: 992px !default;
$screen-md-min: $screen-md !default;
$screen-lg-min: $screen-lg !default;
$screen-sm-min: $screen-sm !default;

$screen-xs-max: ($screen-sm-min - 1) !default;

$screen-sm-max: ($screen-md-min - 1) !default;

$screen-md-max: ($screen-lg-min - 1) !default;




// Font Variables
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: $font-weight-medium;
$font-size-h1: 24px;
$font-size-h2: 20px;
$font-size-h3: 18px;
$font-size-h4: 16px;
$font-size-h5: 13px;
$font-size-p: 18px;

.checkmark-icon {

    /* Checkmark */
    .checkmark-circle {
        width: 80px;
        height: 80px;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: auto;
        margin-right: auto;
    }
    .background {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: $spb-green;
        position: absolute;
    }
    .checkmark {
        border-radius: 5px;
    }

    .checkmark.draw:after {
        -webkit-animation-delay: 0ms;
        -moz-animation-delay: 0ms;
        animation-delay: 0ms;
        -webkit-animation-duration: 3s;
        -moz-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        animation-timing-function: ease;
        -webkit-animation-name: checkmark;
        -moz-animation-name: checkmark;
        animation-name: checkmark;
        -webkit-transform: scaleX(-1) rotate(135deg);
        -moz-transform: scaleX(-1) rotate(135deg);
        -ms-transform: scaleX(-1) rotate(135deg);
        -o-transform: scaleX(-1) rotate(135deg);
        transform: scaleX(-1) rotate(135deg);
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    .checkmark:after {
        opacity: 1;
        height: 40px;
        width: 20px;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
        border-right: 10px solid white;
        border-top: 10px solid white;
        content: '';
        left: 12px;
        top: 42px;
        position: absolute;
    }

    @-webkit-keyframes checkmark {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }
        20% {
            height: 0;
            width: 20px;
            opacity: 1;
        }
        40% {
            height: 40px;
            width: 20px;
            opacity: 1;
        }
        100% {
            height: 40px;
            width: 20px;
            opacity: 1;
        }
    }
    @-moz-keyframes checkmark {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }
        20% {
            height: 0;
            width: 20px;
            opacity: 1;
        }
        40% {
            height: 40px;
            width: 20px;
            opacity: 1;
        }
        100% {
            height: 40px;
            width: 20px;
            opacity: 1;
        }
    }
    @keyframes checkmark {
        0% {
            height: 0;
            width: 0;
            opacity: 1;
        }
        20% {
            height: 0;
            width: 20px;
            opacity: 1;
        }
        40% {
            height: 40px;
            width: 20px;
            opacity: 1;
        }
        100% {
            height: 40px;
            width: 20px;
            opacity: 1;
        }
    }
}