@font-face {
    font-family: "Artbrush";
    src: url(font/Artbrush.ttf) format("truetype");
}

@font-face {
    font-family: "GothamBook";
    src: url(font/Gotham-Book.otf) format("opentype");
}

@font-face {
    font-family: "GothamUltraItalic";
    src: url(font/Gotham-UltraItalic.otf) format("opentype");
}

@font-face {
    font-family: "GothamBookItalic";
    src: url(font/Gotham-BookItalic.otf) format("opentype");
}

@font-face {
    font-family: "GothamBlack";
    src: url(font/Gotham-Black.otf) format("opentype");
}

@font-face {
    font-family: "Righteous";
    src: url(font/Righteous-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Montserrat";
    src: url(font/Montserrat.ttf) format("truetype");
}

body {
    background-image: url("img/dart_bg_2.jpg");
    background-color: white;
    background-repeat: no-repeat;
    font-family: GothamBook;
    font-size: 16px;
    background-size: cover;
}

input:checked+label.conditionBtn {
    box-shadow: 0 0 5px 5px #6BA4D7;
}

h5{
    color: black;
    font-weight: bold;
}
h5.card-title{
text-align: center;
 font-family: como, sans-serif;
 color: #0a4d89;
}

.container {
    max-width: 1200px !important;
    z-index: -2;
}

.container-footer {
    max-width: 100% !important;
    padding-left: 10%;
    padding-right: 10%
}

.background-body {
    margin-top: 50px;
    background-color: rgb(242, 242, 242, .8);
    border: 3px solid #A6A6A6;
}

.col-6 {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.mainBox {
    background: white;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    align-content: center;
    font-size: 20px;
    overflow: hidden;
}

.mainBox2 {
    background: white;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 3rem;
    width: 100%;
    align-content: center;
    font-size: 20px;
    overflow: hidden;
}

.conditionBtn {
    border: 1px solid transparent;
    border-radius: 0;
}

.conditionBtn:hover {
    background-color: #ededed;
}

.btn.focus,
.btn:focus {
    background-color: #ededed;
    box-shadow: gray;
}

.mcGrathBtnGreen {
    font-family: GothamBlack;
    background-color: #64a70b;
    color: white;
    border: .5px solid transparent;
    font-size: 20px;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 5px;
}

.mcGrathBtnGreen:hover {
    background-color: white;
    color: #64a70b;
    border: .5px solid #64a70b;
}

.mcGrathBtnGray {
    font-family: GothamBlack;
    background-color: #888b8d;
    color: white;
    border: .5px solid transparent;
    font-size: 20px;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.mcGrathBtnGray:hover {
    background-color: white;
    color: #888b8d;
    border: .5px solid #888b8d;
}

.mcGrathBtn {
    font-family: GothamBlack;
    background-color: white;
    color: #003067;
    border: .5px solid #003067;
    font-size: 21px;
    border-radius: 0;
    box-shadow: none;
    margin-top: 25px;
    transition: 0.3s;
    padding: 10px;
    display: block;
    width: max-content;
}

.mcGrathBtn:hover {
    background-color: #003067;
    color: white;
}

.mcGrathBtn2 {
    font-family: GothamBlack;
    background-color: white;
    color: #003067;
    border: .5px solid #003067;
    font-size: 2rem;
    border-radius: 10px;
    box-shadow: none;
    margin-top: 25px;
    transition: 0.3s;
    padding: 10px;
    width: 100%;
    display: block;
}

.mcGrathBtn2:hover {
    background-color: #003067;
    color: white;
    border: .5px solid transparent;
}

.mcGrathBtn3 {
    font-family: GothamBlack;
    color: #003067;
    font-size: 1rem;
    transition: 0.3s;
    padding: 10px;
    width: 100%;
    display: block;
}

.mcGrathBtn3:hover {
    color: #6AA4D6;
}

.modal-body {
    padding: 2rem !important;
}

.modal-open .modal {
    background-color: #003067;
}

.modal-backdrop {
    background-color: transparent;
    z-index: 0;
}

.link {
    padding: 0 !important;
    vertical-align: baseline;
    border: none;
    font-size: 14px !important;
    color: #003067 !important;
}

.link:hover {
    color: #46C1DF !important;
}

.btn-outline-mcGrath {
    background: transparent;
    border: 2px solid #003067;
    color: #003067;
    margin-left: 5px;
    margin-right: 5px;
    min-width: 100px;
    border-radius: 30px !important;
}

.btn-outline-mcGrath:hover {
    background: #003067;
    border: 2px solid transparent;
    color: white;
}

.my-link {
    color: white;
    text-decoration: none;
}

.my-link:hover {
    color: #a5e012;
    text-decoration: none;
}

.hide {
    display: none;
}

.logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 90%;
}

.offerModal {
    color: black;
    font-weight: bold;
    font-size: 16px;
}

.form-select-sm,
.form-control {
    font-size: 1.1rem !important;
    margin-bottom: 10px;
}

.priceBig {
    font-family: GothamBlack;
    font-size: 77px;
    color: #003067;
    letter-spacing: 10px;
}

#spinner {
    display: none;
}

#numOnlyVIN {
    display: none;
}

#numOnlyYMMSS {
    display: none;
}

#numLetterOnly {
    display: none;
}

.questionButton {
    background-color: transparent;
    box-shadow: none;
    border: none;
    color: #41BCDB;
}

.questionButton:hover {
    color: #003067;
}

.padding-big {
    padding-left: 5%;
    padding-right: 5%;
}

.nav-item {
    padding: 10px;
}

.form-control {
    border: 1px solid gray;
}

.tabStyle {
    width: 50%;
    text-align: center;
    font-family: como;
    font-size: 4vw;
}

#vin-tab {
    padding-top: 0;
}

.nav-tabs {
    border-bottom: 1px solid transparent;
}

.nav-tabs .nav-link {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    color: #0a4d89;
    background-color: #f2f2f2;
    min-height: 100%;
}

.nav-tabs .nav-link:hover {
    color: white;
    background-color: #0a4d89;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: white;
    background-color: #0a4d89;
    border-color: #dee2e6 #dee2e6 #fff;
}

.navbar-nav {
    flex-direction: unset;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

i.far {
    font-size: 2rem !important;
    padding-bottom: 10px !important;
}

.emote {
    width: 60px;
    height: 60px;
}

a.btn {
    display: block;
}

hr.smallBorder {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.form-row>.col,
.form-row>[class*=col-] {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.tradeHeight {
    height: max-content;
}

.sellHeight {
    height: max-content;
}

.red {
    color: red;
    font-size: 1.25rem;
    font-weight: bold;
}

#form {
    text-align: center;
    position: relative;
}

#form fieldset {
    text-align: left;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 20px;
    position: relative;
}

#form fieldset.trade {
    text-align: left;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
    padding-bottom: 20px;
    position: relative;
}

#form fieldset:not(:first-of-type) {
    display: none;
}

#form .previous-step,
.next-step,
.submit-step {
    width: 160px;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 50px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

.form,
.previous-step {
    background: #616161;
}

.form,
.next-step {
    background: #003067;
}

.form,
.submit-step {
    background: #64a70b;
}

#form .previous-step:hover,
#form .previous-step:focus {
    background-color: gray;
}

#form .next-step:hover,
#form .next-step:focus {
    background-color: rgba(0, 75, 135, .9);
}

.text {
    color: #2F8D46;
    font-weight: normal;
}

#progress {
    position: relative;
    margin-bottom: 30px;
}

#progress-bar {
    position: absolute;
    background: #004b87;
    height: 5px;
    width: 0%;
    top: 28%;
    left: 0;
    z-index: 1;
}

#progress-num,
#progress-num-mbl,
#progress-num-mbl-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

#progress-num::before {
    content: "";
    background-color: lightgray;
    position: absolute;
    top: 28%;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 0;
}

#progress-num .step {
    border: 3px solid lightgray;
    border-radius: 0;
    width: 100px;
    height: auto;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    font-family: GothamBook;
    font-size: .6em;
    position: relative;
    z-index: 1;
    padding: 5px;
}

#progress-num .step.active,
#progress-num-mbl .step-mbl.active {
    border-color: #004b87;
    background-color: #004b87;
    color: #fff;
}

#progress-num-mbl-checks .step-check.active {
    color: #64a70b;
}

#progress-num-mbl .step-mbl {
    border: 3px solid transparent;
    border-radius: 0;
    width: 100px;
    height: auto;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    font-family: GothamBook;
    font-size: .7em;
    position: relative;
    z-index: 1;
}

ul#progress-num-mbl li.step-mbl:last-child {
    font-size: .6em;
}

ul#progress-num li.step.active:last-child,
ul#progress-num-mbl li.step-mbl.active:last-child {
    border-color: #64a70b;
    background-color: #64a70b;
    color: #fff;
}

#progress-num-mbl-checks .step-check {
    border: 3px solid transparent;
    border-radius: 0;
    width: 100px;
    height: auto;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    font-family: GothamBook;
    font-size: 1.3em;
    position: relative;
    z-index: 1;
    color: lightgray;
}

.confirm {
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 0.5rem;
    font-family: inherit;
}

.confirm2 {
    text-align: center;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
    color: inherit;
    margin-bottom: 0.5rem;
    font-family: inherit;
}

.yourCurrentOffer {
    font-family: Montserrat;
    color: #377FC1 !important;
    font-size: 4vh;
    font-weight: 700;
}

.offerDollars {
    font-size: 4vh;
    color: #003067;
    font-family: Montserrat;
}

.spacer {
    color: #A6A6A6;
    font-weight: 100;
}

.almostDone {
    color: #003067;
    text-align: center;
    font-family: Montserrat;
    margin-top: 4rem;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1.2;
}

.bitMore {
    font-family: Montserrat;
    text-align: center;
    color: #377FC1;
    margin-top: 1rem !important;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

.bestAbility {
    color: gray;
    text-align: center;
    font-family: GothamBookItalic;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.stepTwoHeader {
    font-family: GothamBlack;
    color: #003067;
    border-bottom: 1px solid lightgray;
    margin-bottom: 20px;
    font-size: 2rem
}

.questionHeader {
    font-size: 1.25rem;
    color: #377FC1;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-family: inherit;
    line-height: 1.2;
}

.questionHeader2 {
    font-size: 1rem;
    color: #003067;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-family: inherit;
    line-height: 1.2;
}

.reqFieldsRed {
    color: red;
    font-size: 20px;
}

.border-bottom-dart {
    border-bottom: 5px solid #003067;
}

label {
    display: unset;
    margin-bottom: 3px !important;
}

#progress-num {
    display: list-item;
}

#tooManyMiles,
#problemPlsCall,
#tooManyMilesYMMSS,
#problemPlsCallYMMSS {
    font-family: Montserrat;
    color: #377FC1;
    text-align: center;
    font-size: 1.2rem;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
    .priceBig {
        font-size: 46px;
        letter-spacing: 4px;
    }
    .tradeHeight {
        height: max-content;
    }
    .sellHeight {
        height: max-content;
    }
    ul {
        padding-left: 0;
    }
    .emote {
        margin-left: 0;
        margin-right: 0;
        display: unset;
    }
    .background-body {
        margin-top: 30px;
        background-color: rgb(242, 242, 242);
        border: none;
    }
    .mainBox {
        padding-top: .5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    #form .previous-step,
    .next-step,
    .submit-step {
        width: 120px;
        font-size: 14px;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 50px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 0 0 2px 1px;
        float: right;
    }
    body {
        background-size: 100% 170%;
    }
    .fieldPadding {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .form-label {
        margin-top: 20px;
    }
    #vin-tab {
        padding-top: 20px;
    }
    label.btn.conditionBtn {
        display: inherit;
    }
    .mcGrathBtn {
        font-size: 26px;
    }
    #progress-num {
        display: none;
    }
    .mainBox2 {
        font-size: 16px;
    }
    .questionHeader {
        font-size: 1.1rem;
    }
    .confirm {
        font-size: 1.2rem;
    }
    .mcGrathBtnGreen,
    .mcGrathBtnGray {
        font-size: 1rem;
    }
    .logoMbl {
        width: 100%;
    }
    .mainBox2 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
    .priceBig {
        font-size: 46px;
        letter-spacing: 4px;
    }
    .modal-dialog {
        max-width: 50% !important;
    }
    ul {
        padding-left: 0;
    }
    label.btn.conditionBtn {
        display: inline-grid;
    }
    .emote {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .background-body {
        margin-top: 30px;
        background-color: rgb(242, 242, 242);
        border: none;
    }
    .mainBox {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .mainBox2 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    body {
        background-size: 100% 170%;
    }
    .tabStyle {
        width: 50%;
        text-align: center;
        font-family: como;
        font-size: 3vw !important;
    }
    .fieldPadding {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .form-label {
        margin-top: 20px;
    }
    #vin-tab {
        padding-top: 10px;
    }
    .mcGrathBtn {
        font-size: 26px;
    }
    #progress-num-mbl {
        display: none;
    }
    #progress-num {
        display: flex;
    }
    .logoMbl {
        width: 100%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
    .priceBig {
        font-size: 46px;
        letter-spacing: 4px;
    }
    ul {
        padding-left: 0;
    }
    label.btn.conditionBtn {
        display: inline-grid;
    }
    .emote {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    .background-body {
        margin-top: 30px;
        background-color: rgb(242, 242, 242);
        border: none;
    }
    .mainBox {
        padding-top: .5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    body {
        background-size: cover;
    }
    .tabStyle {
        width: 50%;
        text-align: center;
        font-family: como;
        font-size: 2vw !important;
    }
    .fieldPadding {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }
    #vin-tab {
        padding-top: .5rem;
    }
    #progress-num-mbl {
        display: none;
    }
    #progress-num {
        display: flex;
    }
    .logoMbl {
        width: 100%;
    }
    .mainBox2 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
    .tabStyle {
        width: 50%;
        text-align: center;
        font-family: como;
        font-size: 2vw !important;
    }
    .priceBig {
        font-size: 67px;
        letter-spacing: 10px;
    }
    ul {
        padding-left: 0;
    }
    label.btn.conditionBtn {
        display: inline-grid;
    }
    .emote {
        margin-left: auto;
        margin-right: auto;
        display: display;
    }
    body {
        background-image: url("img/dart_bg_2.jpg");
        background-color: white;
        background-repeat: no-repeat;
        font-family: GothamBook;
        font-size: 16px;
        background-size: cover;
    }
    .background-body {
        background-color: rgb(242, 242, 242, .8);
        border: 3px solid #A6A6A6;
    }
    .mainBox {
        padding-top: .5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .fieldPadding {
        padding-left: 6rem !important;
        padding-right: 6rem !important;
    }
    #vin-tab {
        padding-top: .5rem;
    }
    .mcGrathBtn {
        font-size: 21px;
    }
    #progress-num-mbl {
        display: none;
    }
    #progress-num {
        display: flex;
    }
    .logoMbl {
        width: 40%;
    }
    .mainBox2 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    .tabStyle {
        width: 50%;
        text-align: center;
        font-family: como;
        font-size: 1.5vw !important;
    }
    .priceBig {
        font-size: 77px;
        letter-spacing: 10px;
    }
    ul {
        padding-left: 0;
    }
    body {
        background-image: url("img/dart_bg_2.jpg");
        background-color: white;
        background-repeat: no-repeat;
        font-family: GothamBook;
        font-size: 16px;
        background-size: cover;
    }
    .background-body {
        background-color: rgb(242, 242, 242, .8);
        border: 3px solid #A6A6A6;
    }
    label.btn.conditionBtn {
        display: inline-block;
    }
    .emote {
        margin-left: 0;
        margin-right: 0;
        display: unset;
    }
    .mainBox {
        padding-top: .5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .fieldPadding {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    #vin-tab {
        padding-top: .5rem;
    }
    .mcGrathBtn {
        font-size: 21px;
    }
    #progress-num-mbl {
        display: none;
    }
    #progress-num {
        display: flex;
    }
    .logoMbl {
        width: 40%;
    }
    .mainBox2 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}