﻿
/*This is a style sheet that overrides stock Bootstrap elements as well as contains any other custom NASE specific items.*/

/*Variables*/
:root {
    --Blue1: #003468;
    --Blue2: #241773;
    --Blue3: #006890;
    --Blue4: #e3e8f3;
    --Blue5: #006A71;
    --Red1: #78496A;
    --Red2: #8B005A;
    --Red3: #531841;
    --Red4: #D7A900;
    --Red5: #B45300;
    --Red6: #9C7D0D;
    --Red7: #b08830;
    --Red8: #B42E34 ;
    --Gray1: #D3D3D3;
    --Gray2: #808080;
    --Gray3: #CCCCCC;
    --Green1: #7c9f3d;
    --Green2: #55601C;
    --Start: #812755;
    --Grow: #7c9f3d;
    --Save: #b08830;
    --Form_Validation_Error: #ff5252;
}

body {
    background-color: white !important;
}

/*Headings*/

H1 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

H3 {
    color: var(--Blue1);
    padding-top: 20px !important;
}

H4 {
    color: var(--Blue1);
}

H5 {
    color: var(--Blue1);
}

/*TD*/

td {
    vertical-align: top;
}

hr {
    color: var(--Blue1);
}

/*Colors*/
.Blue1 {
    color: var(--Blue1);
}

.Blue3 {
    color: var(--Blue1);
}

.Blue4 {
    color: var(--Blue4);
}

.Red4 {
    color: var(--Red4);
}

.Red8 {
    color: var(--Red8);
}

.Green1 {
    color: var(--Green1);
}

.BGColor-Gray1 {
    background-color: var(--Gray1);
}

.BGColor-Gray2 {
    background-color: var(--Gray2);
}

.BGColor-Gray3 {
    background-color: var(--Gray3);
}

.BGColor-Red1 {
    background-color: var(--Red1);
}

.BGColor-Red3 {
    background-color: var(--Red3);
}

.BGColor-Red4 {
    background-color: var(--Red4);
}

.BGColor-Red5 {
    background-color: var(--Red5);
}

.BGColor-Red6 {
    background-color: var(--Red6);
}

.BGColor-Red7 {
    background-color: var(--Red7);
}

.BGColor-Red8 {
    background-color: var(--Red8);
}

.BGColor-Blue1 {
    background-color: var(--Blue1);
}

.BGColor-Blue3 {
    background-color: var(--Blue3);
}

.BGColor-Blue4 {
    background-color: var(--Blue4);
}

.BGColor-Blue5 {
    background-color: var(--Blue5);
}

.BGColor-Green1 {
    background-color: var(--Green1);
}

.BGColor-Green2 {
    background-color: var(--Green2);
}

.Start {
    color: var(--Start);
}

.Grow {
    color: var(--Grow);
}

.Save {
    color: var(--Save);
}

.nav-link {
    text-decoration: none;
}
.dropdown-item {
    text-decoration: none;
}

/*Top Header*/
.navTop {
    background-color: var(--Blue1);
    color: #fff;
}

.navTopSecondary {
    color: var(--Blue1);
}

.navTopPgs {
    color: var(--Blue1);
    width: auto;
    margin-right: 0px;
    margin-left: auto;
    height: 75px;
}

.navHeader {
    color: white;
}

    .navHeader:hover {
        color: white;
    }

    .navHeader:visited {
        color: white;
    }

/*Footer*/
.navFooter {
    background-color: var(--Blue1);
    color: #fff;
    padding: 20px;
}

.navFooterList {
    list-style-type: none;
    padding-left: 0;
}

.navFooterList-links {
    color: inherit;
}

.navFooterList-links-social {
    color: inherit;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 15px;
}

/*Floating link to top of page*/

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: none;
}



/*footer - Links*/
.navFooterList-links:hover {
    color: inherit;
}

.navFooterSociaMedia {
    border-radius: 5px;
    background: var(--Blue3);
    padding-top: 20px;
    padding-bottom: 20px;
}

/*Default - Links*/

.navFooterList-links:hover {
    color: inherit;
}

a {
    color: var(--Blue1);
    text-decoration: underline;
    font-weight: bold;
}

    a:hover {
        color: inherit;
    }

/* Homepage - Carousel */

.home-container-slide {
    /*background: rgba(225, 225, 225, .8);*/
    /*padding: 20px;*/
    min-height: 400px;
}

/* Gradient Blue*/
.Gradient-Blue1 {
    background-image: -webkit-linear-gradient(top, var(--Blue3) 0%, var(--Blue1) 100%);
    background-color: var(--Blue1);
    color: white !important;
}

/*Button Gradient*/
.btn {
    background-image: -webkit-linear-gradient(top, var(--Blue3) 0%, var(--Blue1) 100%);
    background-color: var(--Blue1);
    color: white !important;
    width: 100% !important;
    align-content: center;
    /*white-space: nowrap;*/
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 500px;
    text-decoration: none;
}

    .btn:hover {
        background-image: none;
        background-color: var(--Blue3);
        color: white;
    }

    .btn:visited {
        color: white !important;
    }

    .btn::after {
        font-family: FontAwesome;
        display: inline-block;
        vertical-align: middle;
        content: "\f054"; /*Font Awesome - chevron-right*/
        float: right;
        padding-left: 10px;
        color: white !important;
    }

/*Button Compact*/
.btn_compact {
    background-image: -webkit-linear-gradient(top, var(--Blue3) 0%, var(--Blue1) 100%);
    background-color: var(--Blue1);
    color: white !important;
    width: 100% !important;
    align-content: center;
    /*white-space: nowrap;*/
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 500px;
}

    .btn_compact:hover {
        background-image: none;
        background-color: var(--Blue3);
        color: white;
    }

    .btn_compact:visited {
        color: white !important;
    }

    .btn_compact::after {
        font-family: FontAwesome;
        display: inline-block;
        vertical-align: middle;
        content: "\f054"; /*Font Awesome - chevron-right*/
        float: right;
        padding-left: 10px;
        color: white !important;
    }

/*Secondary Button Gradient*/
.btnSecondary {
    background-image: -webkit-linear-gradient(top, var(--Gray1) 0%, var(--Gray3) 100%);
    color: var(--Gray2);
}


.btn-back-to-top {
    background-image: -webkit-linear-gradient(top, var(--Blue3) 0%, var(--Blue1) 100%);
    background-color: var(--Blue1);
    color: white !important;
    width: 35px !important;
    align-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

    .btn-back-to-top::after {
        font-family: FontAwesome;
        vertical-align: middle;
        content: "\f106";
        color: white !important;
    }



/*Form Field Validation*/
.isNotValid {
    color: var(--Form_Validation_Error);
    font-size: smaller;
    padding-left: 5px;
    padding-bottom: 10px;
}

    .isNotValid::before {
        font-family: FontAwesome;
        vertical-align: middle;
        content: "\f12a ";
        padding-right: 5px;
    }

/* Chrome, Safari */
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

/*Browser Scrollbar*/

::-webkit-scrollbar-track-piece {
    background-color: var(--Gray1);
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: var(--Blue1);
}

/*Fill color-profile for spacial area representation.  
Not meant stop embed used input production.*/
.canvas {
    background-color: blue;
    width: 100%;
    height: auto;
    min-height: 100px;
}

/*LI Formatting*/
.naseul {
    list-style-type: "\2713\0020";
    margin: 0;
    padding: 0;
}

    .naseul li:before {
        color: var(--Red1);
    }

/*Page title Bar*/

.pgTitleBar {
    background-color: var(--Blue1);
    color: white;
}



/*Gray Background*/
.GrayBackground {
    background-color: var(--Gray1);
    padding: 20px;
}

/*Homepage - Mid-section*/
.home-mid1 {
    background-color: var(--Red2);
    color: #fff;
}

.home-mid2 {
    background-color: var(--Red3);
    padding: 20px;
}

.home-mid3 {
    background-color: var(--Blue2);
    font-style: italic;
    padding: 20px;
}

/*Accordian Styling*/

.accordion .card-header {
    cursor: pointer;
}

    .accordion .card-header:after {
        font-family: 'FontAwesome';
        content: "\f068";
        float: right;
    }

    .accordion .card-header.collapsed:after {
        /* symbol for "collapsed" panels */
        content: "\f067";
    }

/*Benfit Listings - Grouping Sectional Headers*/
.BenefitGroupingHeader {
    text-align: left;
    padding: 10px;
    color: #ffffff;
    background-color: var(--Grow);
    font-size: large;
}

.BenefitGroupingBenefits {
    /*text-align: left;*/
    padding: 15px;
}

.show-only-on-print {
    display: none !important;
}

@media print {
    .hide-on-print, .hide-on-print *, .btn {
        display: none !important;
    }

    .show-only-on-print, .show-only-on-print * {
        display: block !important;
    }
}

/*Sitefinity pagination override*/
.sf_pagerNumeric {
    margin: 3em 0 2em 0;
    line-height: 2.5em;
}

    .sf_pagerNumeric a {
        padding: .15em .45em;
        margin-right: .35em;
        background-color: var(--Blue4);
        text-decoration: none;
        border: solid 1px var(--Blue1);
    }

        .sf_pagerNumeric a:hover {
            background-color: #EEE;
        }

.sf_PagerCurrent {
    background-color: var(--Blue1) !important;
    border: solid 1px var(--Blue4);
}

    .sf_PagerCurrent a {
        color: white !important;
    }

    .sf_PagerCurrent:visited {
        color: white !important;
    }

.form-control {
    margin-bottom: 10px !important;
}

.card-columns {
    @include media-breakpoint-only(lg) {
        column-count: 2;
    }

    @include media-breakpoint-only(xl) {
        column-count: 3;
    }
}
