/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --brand-color: #900027;
    --secondary-color: #f7931d;
    --white-color: #fff;
    --black-color: #000;
    --gray-color: #a7a6a7;
    --light-gray: #f2f2f2;

    --main-header-color: #900027;
    --main-header-bg: #f2f2f2;
    /*--body-font-family: Montserrat, sans-sarif;*/
    /*--body-font-family: roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    --body-font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --heading-font-family: Roboto, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

html {
    font-size: 12pt;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
}

body {
    /*font-family: roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: var(--body-font-family);
    /*box-sizing: border-box;*/
    margin-bottom: 60px;
    background-image: url('../images/pierce_fs_background-rev1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    /*background-clip: border-box;*/
    min-height: 93.677vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: var(--heading-font-family);
    color: var(--brand-color);
}

@media (min-width: 992px) {
    /*nav > div.container {
        justify-content: start !important;*/
        /*max-width: 960px !important;*/
        /*width: 90%;
        margin: 0 auto !important;
    }*/
    nav .container {
        width: 80% !important;
        justify-content: start !important;
        margin: 0 auto !important;
    }

    nav .menu {
        display: flex;
        width: 100%;
    }

    nav .menu ul {
        width: 100%;
        justify-content: start;
    }

    nav .menu ul li {
        width: auto;
        gap: 20px;
    }

    nav .menu ul li a {
        padding: 0;
        margin-left: 5px;
    }

    nav .menu-toggler {
        display: none !important;
    }

    nav > div.mobile-menu {
        display: none;
    }

}

@media(min-width: 768px) {
    html {
        font-size: 1.2em;
    }

    nav > div.mobile-menu {
        width: 50%;
        float: right;
    }
    /*.mobile-menu ul {
        flex-direction: column;
        justify-content: start;
        position: absolute;
        width: 100%;*/
        /*background-color: var(--brand-color);*/
        /*background-color: var(--white-color);
        gap: 10px;
        padding: 10px;
        border-radius: 0 0 0 20px;
        min-height: 200px;
    }*/
}

@media print {
    .noPrint {
        display: none;
    }

    .btn, .primary-button {
        display: none;
    }

    .card-container {
        width: 100% !important;
        border: none;
    }

    .form-label {
        color: gray;
    }

    .form-label + input {
        margin-top: 0;
    }

    .form-control, .form-select {
        border: none;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-select:focus, .form-control:focus, .form-check-input:focus {
    border: 1px solid var(--brand-color);
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-color);
}

/*.mask {
    position: absolute;
    z-index: 98;
    background: rgba(0, 0, 0, .3);
    
}*/

a {
    cursor: pointer;
}

/*a.active, a:hover, a:focus, a:active {
    transform: scale(1.01);
}*/

nav a {
    color: var(--brand-color) !important;
}

nav a:hover, nav a:focus, nav a:active {
    transform: scale(1.02);
}

nav a.active{
    font-weight: bold;
}

/* header */
nav {
    display: block;
    background: var(--white-color);
    /*margin-bottom: 1.2em;
    padding: .7em;*/
    /*position: relative;*/
    width: 100%;
}

nav a {
    text-decoration: none;
}

nav > div.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100% !important;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: start;
    gap: 5px;
    margin: 0;
}

nav .mobile-menu ul {
    position: absolute;
    flex-direction: column;
    min-height: 150px;
    z-index: 99;
    border-radius: 0 0 20px 20px;
    background-color: #fff;
    width: 100%;
}

nav .menu ul {
    flex-direction: row;
}

.navbar-brand {
    font-size: 1.6em;
    font-weight: 600;
    color: #fff;
    margin-top: 3px;
    margin-bottom: 3px;
}

.navbar-brand img {
    max-width: 240px;
    height: auto;
}

/*nav ul {
    display: flex;
    flex-direction: row;
    align-items: start;
    list-style: none;
    font-size: 1.2em;
    margin: 0;
    gap: 1.1em;
}*/

nav ul li {
    width: 100%;
}

nav ul li a {
    display: block;
    height: 100%;
    justify-content: center;
    margin-left: 10px;
    padding: 5px;
    /*color: var(--brand-alternative-color);*/
}

.menu {
    display: none;
}

.mobile-menu {
    position: relative;
    width: 100%;
    /*top: 45px;*/
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--brand-color);
    transition: display 1s ease-in-out;
}

/*.mobile-menu ul {
    flex-direction: column;
    justify-content: start;
    position: absolute;
    width: 100%;*/
/*background-color: var(--brand-color);*/
/*background-color: var(--white-color);
    gap: 10px;
    padding: 10px;
    border-radius: 0 0 20px 20px;
    min-height: 200px;
    z-index: 99;
}*/
/*.mobile-menu ul li:hover {
    width: 100%;
    background: rgba(255, 255, 255, .1);
}
.mobile-menu ul li {
    width: 100%;
}
.mobile-menu ul li a {
    display: block;
    width: 100%;
    padding: 5px;
    text-align: center;
}*/
.mobile-menu .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(0, 0, 0);
    opacity: .3;
    z-index: 98;
}

.heading-container {
    padding: .4em;
    background: var(--main-header-bg);
    color: var(--main-header-color);
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .15);
}

.heading-container h1 {
    margin-bottom: 0;
}

.card-container {
    margin: 5px auto;
    padding: 2em 2em 2.5em 2em;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 2;
    gap: 1.2em;
    width: min(800px, 95%);
    /*align-items: center;*/
    justify-content: center;
    min-height: 60vh;
    border: .1px solid gray;
    border-radius: 20px;
    box-shadow: 0 0 3px 1px #a1a1b1;
    background-color: #fff;
}

.card-container > div:has(h1), .card-container h1 {
    color: var(--brand-color);
}
/* humburger*/
div:has(.menu-toggler) {
    display:block;
    z-index: 99;
}
button.menu-toggler {
    background: transparent;
    border: none;
    /*border: 1px solid var(--button-color, --brand-color);*/
    border-radius: .4em;
    transition: display 10s ease-in-out;
}

button.menu-toggler .line {
    transition: y .3s ease-in-out,
        rotate .3s ease-in-out,
        opacity 0 .3s ease-in-out;
}

/*button.menu-toggler .line {
    transition: y 500ms ease-out, 
        rotate 500ms ease-out, 
        opacity 0 ease-out 500ms;
}*/

svg {
    fill: var(--button-color);
}

button.menu-toggler:not(.close) :is(.one, .three) {
    transform-origin: center;
}

button.menu-toggler:not(.close) .one {
    rotate: 45deg;
    y: 35px;
}
button.menu-toggler:not(.close) .three {
    rotate: -45deg;
    y: 56px;
}
button.menu-toggler:not(.close) .two {
    opacity: 0;
}

.displayElement {
    display: block;
}
.hideElement {
    display: none;
}

label.req:after {
    content: " *";
    color: red;
    font-weight: bold;
    word-spacing: .1em;
}
/*validation*/
.input-validation-error {
    border: 2px solid #dc3545;
    background-color: antiquewhite;
}
.validation-summary-valid {display: none;}
.validation-summary-errors ul {list-style: none;}

.pymnt-msg-card {
    background-color: #fff !important;
    width: min(600px, 90%);
    min-height: 600px;
    border-radius: 2%;
    border: 1px solid #fff;
    padding: 10px 20px;
    margin: 15px;
}

.btn {
    padding: .4em 1em;
    border-radius: 10px;
    /*box-shadow: 0 0 2px rgba(0, 0, 0, .3);*/
}

.btn:active, .btn:focus, .btn:hover{
    /*border: 2px solid #fff;*/
    margin: 3px;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px #fff, 
        var(--brand-color) 0 0 1px 3px !important;
}

.btn-primary {
    color: var(--white-color);
    background-color: var(--brand-color);
}

.btn-outline-primary {
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    background-color: var(--white-color);
}
.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
.btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:hover {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--white-color) !important;
}

/*.btn-outline-primary:active, .btn-primary:active ,
.btn-primary:focus, .btn-outline-primary:focus{
    border: 2px solid #fff;
    margin: 3px;
    box-shadow: 0 0 0 1px #fff, 
        var(--brand-color) 0 0 1px 3px !important;
}*/


.control-buttons {
    margin-top: 20px !important;
    margin-bottom: 10px;
}

.closeMsg {
    font-size: .9em;
}

.alert {
    padding: .5rem .5rem;
}

/* footer */
footer > div {
    background-color: var(--brand-color);
    color: var(--brand-alternative-color);
    border-top: 1px solid var(--brand-color);
    text-align: center;
    width: 100vw !important;
}