/* Blue Color Change */
:root {
    --bmv-blue: #3d7aa9;
}

.subpage-header {
    background: var(--bmv-blue);
}

.btn-blue {
    border-color: var(--bmv-blue);
    color: var(--bmv-blue) !important;
}

.btn-outline{
    background: white !important;
}

.button.soft i {
    color: #606060;
}

.button.soft i:hover{
    color: var(--bmv-blue);
}

.banner-content{
    margin-top: 30px;
}

.banner-title {
    text-shadow: 2px 2px 6px #000000;
}

.navblock li{
    font-weight: bold;
}
#navLogout {
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

.red-swoosh {
    height: 300px;
    clip-path: ellipse(76% 62% at 52% 32%);
}

.clip-mask {
    background-color: var(--bmv-blue);
    background-image: url(../img/header-photo-dk.jpg);
    background-position: 100% 0%;
    height: 300px;
}

.reg-text-box {
    margin-right: 25px;
}

@media (max-width: 1199.98px) {
    .clip-mask {
        background-color: var(--bmv-blue);
    }
}

@media (max-width: 575px) {
    .clip-mask {
        background: var(--bmv-blue);
        height: 400px;
    }
    .red-swoosh {
        height: 396px;
        clip-path: ellipse(111% 60% at 26% 23%);
    }
    .banner-title::before {
        content: '';
        position: absolute;
        left: 0px;
        top: -10px;
        width: 35px;
        height: 35px;
        clip-path: ellipse(16% 16% at 19% 24%);
        background: var(--bmv-red);
        z-index: 0;
    }
    .banner-title::after {
        display: none;
    }
    .license-edit-btn{
        height:unset
    }
}

/* End of Color Change*/

.classic-switch {
    color: #d18a93;
}
    .classic-switch:hover {
        color: #D3263D;
    }

.list-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}

.list-group-item-action {
    width: 100%;
    color: #495057;
    text-align: inherit;
}

    .list-group-item-action:hover, .list-group-item-action:focus {
        color: #495057;
        text-decoration: none;
        background-color: #f8f9fa;
    }

    .list-group-item-action:active {
        color: #212529;
        background-color: #e9ecef;
    }

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

    .list-group-item:first-child {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    .list-group-item:last-child {
        margin-bottom: 0;
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .list-group-item:hover, .list-group-item:focus {
        z-index: 1;
        text-decoration: none;
    }

    .list-group-item.disabled, .list-group-item:disabled {
        color: #6c757d;
        background-color: #fff;
    }

    .list-group-item.active {
        z-index: 2;
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.list-group-flush:first-child .list-group-item:first-child {
    border-top: 0;
}

.list-group-flush:last-child .list-group-item:last-child {
    border-bottom: 0;
}

.list-group-item-primary {
    color: #004085;
    background-color: #b8daff;
}

    .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
        color: #004085;
        background-color: #9fcdff;
    }

    .list-group-item-primary.list-group-item-action.active {
        color: #fff;
        background-color: #004085;
        border-color: #004085;
    }

.list-group-item-secondary {
    color: #383d41;
    background-color: #d6d8db;
}

    .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
        color: #383d41;
        background-color: #c8cbcf;
    }

    .list-group-item-secondary.list-group-item-action.active {
        color: #fff;
        background-color: #383d41;
        border-color: #383d41;
    }

.list-group-item-success {
    color: #155724;
    background-color: #c3e6cb;
}

    .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
        color: #155724;
        background-color: #b1dfbb;
    }

    .list-group-item-success.list-group-item-action.active {
        color: #fff;
        background-color: #155724;
        border-color: #155724;
    }

.list-group-item-info {
    color: #0c5460;
    background-color: #bee5eb;
}

    .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
        color: #0c5460;
        background-color: #abdde5;
    }

    .list-group-item-info.list-group-item-action.active {
        color: #fff;
        background-color: #0c5460;
        border-color: #0c5460;
    }

.list-group-item-warning {
    color: #856404;
    background-color: #ffeeba;
}

    .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
        color: #856404;
        background-color: #ffe8a1;
    }

    .list-group-item-warning.list-group-item-action.active {
        color: #fff;
        background-color: #856404;
        border-color: #856404;
    }

.list-group-item-danger {
    color: #721c24;
    background-color: #f5c6cb;
}

    .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
        color: #721c24;
        background-color: #f1b0b7;
    }

    .list-group-item-danger.list-group-item-action.active {
        color: #fff;
        background-color: #721c24;
        border-color: #721c24;
    }

.list-group-item-light {
    color: #818182;
    background-color: #fdfdfe;
}

    .list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
        color: #818182;
        background-color: #ececf6;
    }

    .list-group-item-light.list-group-item-action.active {
        color: #fff;
        background-color: #818182;
        border-color: #818182;
    }

.list-group-item-dark {
    color: #1b1e21;
    background-color: #c6c8ca;
}

    .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
        color: #1b1e21;
        background-color: #b9bbbe;
    }

    .list-group-item-dark.list-group-item-action.active {
        color: #fff;
        background-color: #1b1e21;
        border-color: #1b1e21;
    }

.pageLoading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.8);
    z-index: 99999;
    font-size: 40px;
}

.pageLoadingContent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.pageLoadingSpinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
}

.drawer-tile-container {
    background-color: var(--lt-gray);
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}

a.drawer-tile {
    display: block;
    position: relative;
    height: auto;
    padding: 10px;
    border-radius: 4px;
    background: white;
    overflow: hidden;
    transition: all .3s ease-in-out;
    flex-grow: 2;
    flex-shrink: 0;
    font-weight: bold;
    color: var(--black);
    margin: 5px 15px;
    flex-basis: 90%;
}

    a.drawer-tile::after {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        width: 100%;
        height: 8px;
        background: var(--bmv-blue);
        transition: all .25s ease-in-out;
    }

    a.drawer-tile:hover::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background: var(--bmv-blue);
    }

    a.drawer-tile:hover {
        text-decoration: none;
        box-shadow: 0px 0px 30px 0px rgba(0,0,0, 0.05);
    }

.fixed-top {
    width: 100%;
}

.header-fixed,
.online-services-mobile-home {
    width: 100%;
    position: fixed;
    z-index: 997;
}

    .online-services-mobile-home + * {
        margin-top: 91px;
    }

.drawer {
    z-index: 99999;
}


.drawer-header-fixed {
    width: 65%;
    position: fixed;
    top: 0px;
    z-index: 99999;
}

    .drawer-header-fixed + * {
        margin-top: 125px !important;
    }

.button.reverse:hover::after {
    content: none !important;
}

.button.reverse::before {
    font-family: "Material Icons";
    content: "keyboard_arrow_left";
    font-size: 22px;
    display: block;
    position: absolute;
    left: 15px;
    opacity: 0;
    transition: all .2s ease-in-out;
}

.button.reverse:hover::before {
    font-family: "Material Icons";
    content: "keyboard_arrow_left";
    font-size: 22px;
    display: block;
    position: absolute;
    left: 10px;
    opacity: 1;
}

/* Start of step wrapper vertical padding fixes*/

.step-wrapper {
    padding: 15px 30px;
}

.radio-wrapper label {
    padding: 4px 20px 4px 35px;
}

/* End of step wrapper vertical padding fixes*/

.stepper .back {
    z-index: 1;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1055; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-dialog {
    width: 50%;
    max-width: unset;
}

.modal-header{
    height: auto;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    width: 80%; /* Could be more or less, depending on screen size */
    border-radius: 16px 16px 16px 16px;
}

.modal-body {
    padding: 10px 15px 20px 15px;
    border-radius: 0 0 16px 16px;
}

/* The Close Button */
.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    background-color: var(--bmv-blue);
    border: none;
}

    .modal-close:hover,
    .modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 85%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    color: white;
    background-color:var(--bmv-blue);
}

.badge-red {
    background-color: var(--bmv-red);
}

.cart-badge {
    padding: 0 5px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
    background-color: var(--bmv-red);
    color: white;
    margin-left: -10px;
    margin-bottom: 20px;
    font-size: 10px;
}

.label-warning[href],
.badge-warning[href] {
    background-color: #c67605;
}

#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px;
}

a.float:hover {
    color: lightgrey;
}

.field-validation-error {
    padding: 10px;
    background: #F8E5E7;
    color: var(--alert-red) !important;
    color: white;
    display: flex;
    flex: 1 100%;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 15px;
    margin-top: 10px;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .field-validation-error::before {
        font-family: 'Material Icons';
        font-size: 24px;
        content: "error";
    }

.material-icons {
    display: flex;
}

.drawer .abstract-name-row {
    flex-direction: row;
    justify-content: space-evenly;
}

.alert-banner {
    position: relative;
    left: -50%;
    width: 100%;
    opacity: 0.95;
}

.alert-wrapper {
    width: 100%;
    max-width: 1250px;
    margin: 10px auto 0 auto;
    position: fixed;
    left: 50%;
    z-index: 99999;
    top: 55px;
}

.alert.severe{
    margin-top: 20px;
}

.text-blue {
    color: var(--bmv-blue);
}

.text-red {
    color: var(--bmv-red);
}

.IE-banner {
    display: none !important;
}

nav.topnav {
    justify-content: space-between;
}

    nav.topnav .navblock {
        flex-basis: 60%;
    }

.online-services-home {
    display: flex;
    vertical-align: middle;
    font-size: 22px;
    line-height: 20px;
    padding-left: 15px;
    color: #700017;
    font-weight: 600;
}

    .online-services-home > span:hover {
        color: #D3263D;
    }

.logo-link-box {
    display: flex;
    align-items: center;
    flex-basis: 30%;
    height: 100%
}

nav.topnav .rightblock {
    flex-basis: 30%;
}

    nav.topnav .rightblock li.item:first-child {
        margin-left: auto;
    }

.online-services-mobile-home {
    display: none;
}

.vertical-line {
    border-left: 2px solid darkgrey;
    height: 75%;
}






/* Tile Fixes*/
a.tile {
    min-height: 230px;
    border: 1px solid #e9e9e9;
}

    a.tile > .title {
        max-width: 230px;
        font-size: 24px;
        line-height: 28px;
    }

/* End Tile Fixes*/

/* buttons */

.button.primary {
    background: var(--bmv-blue);
    border-color: var(--bmv-blue);
    color: white;
}

.button.secondary {
    background: var(--bmv-red);
    border-color: var(--bmv-red);
    color: white;
}

a.btn-primary {
    background: var(--bmv-blue);
    color: white;
    max-height: 44px;
}
.w-100 {
    width: 100%;
}
@media (min-width: 62em) {
    a.btn-primary {
        background: var(--bmv-blue);
        color: white;
    }
}

@media (min-width: 75em) {
    a.btn-primary {
        background: var(--bmv-blue);
        color: white;
    }
}

/* End buttons*/

/* Media Query Fixes below*/
/* (IPAD, 768px and up) */
@media (min-width: 48em) {
    .drawer-header-fixed {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .flex-basis-90-xs {
        flex-basis: 90%;
    }
}

@media (max-width: 62em) {
    .flex-basis-90-xs {
        flex-basis: 90%;
    }
}

@media (min-width: 62em) {
    .drawer-header-fixed {
        width: 80%;
    }
}

@media (min-width: 75em) {
    .drawer-header-fixed {
        width: 65%;
    }
}

@media (max-width: 991px) {

    .online-services-mobile-home + * {
        margin-top: 99px;
    }

    .logo-link-box {
        margin-left: auto;
        margin-right: auto;
    }

    .online-services-home, .logo-divider{
        display: none;
    }

    .online-services-mobile-home {
        display: flex;
        background-color: white;
        width: 100%;
        justify-content: center;
        height: 24px;
        position: fixed;
        top: 0px;
        z-index: 996;
        color: #700017;
        font-size: 20px;
    }

    nav.topnav {
        height: 50px;
        padding: 0;
    }

    .logo {
        padding-bottom: 5px;
    }

    .header-fixed + * {
        margin-top: 78px;
    }

    nav.topnav button.mnavtrigger{
        position: unset;
        margin-left: 10px;
        margin-right: unset;
        flex-basis: 30%;
    }
        nav.topnav button.mnavtrigger .material-icons{
            margin-right: auto;
        }

    nav.topnav a.logo {
        display: flex;
        flex: 1 calc(100% - 196px);
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 767px) {
    .header-fixed + * {
        margin-top: 75px;
    }

    .stepper {
        padding-top: 0;
    }

    a.back ~ h1.pull-circle {
        padding-top: 25px;
    }

        a.back ~ h1.pull-circle::before {
            margin-top: 25px;
        }

    .drawer-header-fixed {
        width: 100%
    }

        .drawer-header-fixed + * {
            margin-top: 125px !important;
        }

    .license-edit-btn {
        margin: 0;
    }

    .license-btn-box > div {
        width: 49%;
    }

    .radio-wrapper label {
        height: auto;
    }

    .drawer .abstract-name-row {
        flex-direction: column;
    }

    .action-bar button.button {
        flex: 1 100%;
        flex-basis: 40%;
        display: flex;
        max-width: none;
    }

    .flex-basis-90-xs {
        flex-basis: 90% !important;
    }
}

@media (min-width: 768px) and (orientation:portrait) {
    .modal-sm {
        max-width: 300px;
    }

    .stepper {
        flex: 1 32%;
        padding-left: 0px;
        padding-right: 5px;
    }

    .stepper-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}
/*iphone 5 and galaxy fold */
@media (max-width: 575px) {
    #lnkReinstatement {
        margin-right: 10px !important;
    }

    section.profile {
        padding: 5px 5px 5px;
    }

    .drawer-header-fixed + * {
        margin-top: 170px !important;
    }

    .step-wrapper {
        padding: 20px 15px;
    }
}

@media (min-width: 768px) and (orientation:portrait) {
    #lnkReinstatement {
        margin-right: 0px !important;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .modal-dialog {
        width: 100%;
        margin-left: 0px;
    }
}

@media (max-width: 575px) {
    #YearlyPeriodStartDate, #YearlyPeriodEndDate {
        padding-top: 0px;
        margin-bottom: 0px;
    }
}

@media (max-width: 767px) {
    #cdlOptionsViewDiv {
        padding-bottom: 0px;
    }
}
/* JQuery DatePicker styles*/
#ui-datepicker-div {
    z-index: 9999 !important;
}

button.ui-datepicker-current {
    display: none !important;
}
/* end JQuery DatePicker styles */
@media (max-width: 575px) {
    .cart section article .item, .cart section article .item .cost {
        align-items: flex-start;
    }
}

form .button {
    margin-right: 5px;
}

.lock-position {
    position: fixed;
    overflow: hidden !important;
    width:100%;
}

@media (max-width: 991.98px) {
    nav.topnav .navblock li.item {
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media (min-width: 768px) {
    .banner-title::after {
        clip-path: ellipse(16% 16% at 24% 29%);
    }
}

.drawer .drawer-content {
    padding-bottom: 50px;
    margin-bottom: 50px;
    height: calc(100vh - 125px);
    overflow-y: scroll !important;
}

@media (min-width: 768px) and (max-width:1023px) {
    .license-btn-box > div {
        width: 49%;
    }
}