/* 
 * The following custom widths should be defined in _variables.scss
 * 
 * // sizing
 * $sizes: (
 *     "25": 25%,
 *     "50": 50%,
 *     "75": 75%,
 *     "100": 100%,
 *     "auto": auto,
 *     // custom sizes
 *     "30": 30%,
 *     "60": 60%,
 *     "80": 80%,
 *     "90": 90%,
 * );
 * 
 */
.w-30 {
    width: 30%;
}

.w-60 {
    width: 60%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.mw-90 {
    max-width: 90%;
}


/* 
 * The following custom spacing should be defined in _variables.scss
 * 
 * // spacing
 * $spacer: 1rem;
 * $spacers: (
 *   0: 0,
 *   1: $spacer * .25,
 *   2: $spacer * .5,
 *   3: $spacer,
 *   4: $spacer * 1.5,
 *   5: $spacer * 3,
 *   // custom spacers
 *   6: $spacer * 3.75,
 *   7: $spacer * 5,  
 * );
 */

.py-6 {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem; /* 60px */
}

@media only screen and (max-width: 575px) {
    .py-6 {
        padding-top: 3rem;
        padding-bottom: 3rem; /* 52px */
    }
}

.ps-6 {
    padding-left: 3.75rem; /* 60px */
}

@media only screen and (max-width: 575px) {
    .ps-6 {
        padding-left: 3rem; /* 52px */
    }
}

.pt-7 {
    padding-top: 5rem; /* 80px */
}

@media only screen and (max-width: 575px) {
    .pt-7 {
        padding-top: 3.5rem; /* 56px */
    }
}

.py-7 {
    padding-top: 5rem;
    padding-bottom: 5rem; /* 80px */
}

@media only screen and (max-width: 575px) {
    .py-7 {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem; /* 56px */
    }
}

.my-7 {
    margin-top: 5rem;
    margin-bottom: 5rem; /* 80px */
}

@media only screen and (max-width: 575px) {
    .my-7 {
        margin-top: 3.5rem;
        margin-bottom: 3.5rem; /* 56px */
    }
}

/* 
 *  The following colors should be defined in _variables.scss
 *
 *  //
 *  // Color system
 *  //
 *  $white:    #fff !default;
 *  $gray-100: #f8f9fa !default;
 *  $gray-200: #f3f3f3 !default;
 *  $gray-300: #dee2e6 !default;
 *  $gray-400: #ced4da !default;
 *  $gray-500: #adb5bd !default;
 *  $gray-600: #868e96 !default;
 *  $gray-700: #495057 !default;
 *  $gray-800: #222 !default;
 *  $gray-900: #111 !default;
 *  $black:    #000 !default;
 *  $blue:    #d9edf7 !default;
 *  $indigo:  #6610f2 !default;
 *  $purple:  #6f42c1 !default;
 *  $pink:    #e83e8c !default;
 *  $red:     #c71c22 !default;
 *  $orange:  #fd7e14 !default;
 *  $yellow:  #fbc02d !default;
 *  $green:   #73a839 !default;
 *  $teal:    #20c997 !default;
 *  $cyan:    #0054a4 !default;
 *  $primary:       $cyan !default;
 *  $secondary:     $gray-200 !default;
 *  $success:       $green !default;
 *  $info:          $blue !default;
 *  $warning:       $yellow !default;
 *  $danger:        $red !default;
 *  $light:         $gray-100 !default;
 *  $dark:          $gray-900 !default;
 *  
 */


body .bg-primary {
    background-color: #0054a4 !important;
}

body .btn-primary {
    background-color: #0054a4 !important;
    border-color: #0054a4 !important;
    background-image: none; /* no gradients on the buttons */
}

body .btn-primary:hover, body .btn-primary:active {
    color: #0054a4 !important;
    border-color: #0054a4 !important;
    background-color: #ffffff !important;
    background-image: none;
}

body .btn-outline-primary {
    color: #0054a4 !important;
    border-color: #0054a4 !important;
}

body .btn-outline-primary:hover, body .btn-outline-primary:active {
    background-color: #0054a4 !important;
    border-color: #0054a4 !important;
    color: #ffffff !important;
}

body .text-primary {
    color: #0054a4 !important;
}

body .text-info {
    color: #d9edf7 !important;
}

body a {
    color: #0054a4;
}

body a:hover, body a:active {
    color: #fbc02d;
}

body .bg-primary {
    background-color: #0054a4 !important;
}

body .bg-light {
    background-color: #f3f3f3 !important;
}

body .bg-dark {
    background: #111 !important;
}

body .bg-info {
    background-color: #d9edf7 !important;
}

body .form-check-input:checked {
    background-color: #0054a4;
    border-color: #0054a4;
}

body .border-primary {
    border-color: #0054A4 !important;
}

body .border-light {
    border-color: #f3f3f3 !important;
}

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

body .border-info {
    border-color: #d9edf7 !important;
}

body .border-primary {
    border-color: #0054A4;
}

/* 
 *   The following should be defined in _ees.scss, custom colors for Elliott Electric Supply
 *
 *  // Create custom colors
 *  $custom-colors: (
 *    "primary-dark": #002A53;
 *     "light-gray": $gray-200,
 *     "yellow": $yellow,
 *     "info-light": #d9edf7,
 *  );
 *  // Merge the color maps
 *  $theme-colors: map-merge($theme-colors, $custom-colors);
 *
 */

body .bg-primary-dark {
    /* background: rgba(0, 42, 83, 1) ; */
    /* background: #003a71; */
    background-color: #002A53;
}

body .text-primary-dark {
    color: #002A53;
}

body .btn-primary-dark {
    color: #fff;
    background-color: #002a53;
}

body .btn-primary-dark:hover {
    background-color: #fff;
    color: #002a53;
    border-color: #002a53;
}

body .bg-light-gray {
    background: #f3f3f3;
}

body .bg-info-light {
    background-color: #d9edf7;
}

body .text-yellow {
    color: #fbc02d !important;
}

body .text-light-blue {
    color: #9fd1ff !important;
}



/* 
 *  The following settings should be defined for the body in _variables.scss
 *  
 *  $body-color:              $gray-800 !default;
 *  $font-size-base:          1rem;
 *  $line-height-base:        1.7 !default;
 *  $body-bg:                 $gray-200 !default;
 */

html {
    /*font-size: 16px;  set the root font size */
    font-size: 1rem; /* set the root font size */
}

body, p {
    line-height: 1.7; /* set the base line height */
}

/*
 *  The following font settings should be defined in _variables.scss
 *   
*  // Fonts
 *  $headings-font-family:    "Open Sans", Helvetica, Arial, sans-serif !default;
 *  $headings-font-weight:    900 !default;
 */

body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .loader:before {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 900;
}

/* 
 *  The following settings should be defined in _variables.scss
 *  
 *  $enable-gradients: false;
 *  $enable-shadows: false;
 */

.btn-primary {
    background-image: none; /* no gradients on the buttons */
}

.btn-primary:active, .btn-primary.active, .btn-primary:hover {
    background-image: none;
}


/* the following variable needs to be defined on _root.scss */
body .form-check-input {
    border-color: #0054A4; /* var(--bs-border-color) */
}