﻿body {
    padding-bottom: 80px;
    font-weight: normal !important;
    color: #222 !important;
    
}

#successMessage {
    display: block;
}

.aspNetDisabled {
    opacity: 0.5 !important;
}
.RedEmphasis{
    color:red;
    font-weight:bold;
}
.newTransaction {
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    font-weight:bold;
    padding-left: 2em;
    color: green;
    background-color: white;
    text-shadow: -1px -1px 0 #000, -1px -1px 0 #000, -1px -1px 0 #000, -1px -1px 0 #000;
}
@media (min-width: 768px) {
    label .xxsmallWidth {
        display: inline-block;
        width: 25px;
    }

    label.xsmallWidth {
        display: inline-block;
        width: 35px;
    }

    label.smallerWidth {
        display: inline-block;
        width: 50px;
    }

    label.smallWidth {
        display: inline-block;
        width: 75px;
    }

    label.standardWidth {
        display: inline-block;
        width: 110px;
    }

    label.mediumWidth {
        display: inline-block;
        width: 175px;
    }

    label.largeWidth {
        display: inline-block;
        width: 225px;
    }

    label.xLargeWidth {
        display: inline-block;
        width: 300px;
    }

    .checkbox input[type=checkbox] {
        margin-right: 6px;
        vertical-align: text-bottom;
    }

    .radio input[type=radio] {
        margin-right: 6px;
        vertical-align: text-top;
    }
    .radio label{
        margin-right: 1em;
    }
    label.iFormsRadioListLabel {
        padding-bottom: 1em;
        font-size: 14px;
        font-weight: normal !important;
        color: #222 !important;
    }
    label.bold {
        font-weight: bold;
    }
}

@media(max-width: 767px) {
    /*Prevent focus zooming on mobile*/
    input {
        font-size: 16pt !important;
    }

    .iFormsCheckboxList .checkbox input[type=checkbox] {
        margin-left: 2px;
    }

    .iFormsRadioButtonList .radio input[type=radio] {
        margin-left: 2px;
    }

    .checkbox input[type=checkbox] {
        margin-left: 2px;
    }

    .iFormsRadioButtonList br {
        display: none;
    }

    label.iFormsRadioListLabel {
        padding-top: .5em;
        font-size: 14px;
        font-weight: normal !important;
        color: #222 !important;
    }

    span.iForms_Textbox, span.iFormsDropdown, span.iFormsCheckbox, span.iFormsDateControl {
        display: block;
        font-size: 16px;
    }

    .iFormsResourceEdit {
        display: none;
    }
}

legend {
    font-size: 24px;
    border: none;
    font-weight: 500;
    line-height: 1.1;
}
/*Needed by iForms*/
.iFormsRequired {
    color: red;
    padding-right: .25em;
}

.iFormsRequired:before{
    content:"*";
}

.iForms_Help i {
    color: #4588CB;
    font-size: 1.4em;
}

.iForms_Label>.iFormsCheckbox{
    margin-left: 4px;
}

.iFormsEditorField {
    min-height: 100px;
    border: thin solid black;
}

.form-group>a.iForms_Help{
    margin-left: 8px;
}

label + a.iForms_Help{
    padding-left: 6px;
}

.iFormsScreenMessage {
    z-index: 19010;
    background-color: #ffffff;
    border: solid 1px black;
    text-align: center;
    padding: 4px;
    width: 80%;
    max-width: 400px;
    min-height:50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    position:fixed;
    top: 0;
    left:0;
    right:0;
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    border-radius: 6px;
    background-clip:padding-box;
}

.iFormsScreenBlock {
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 19009;
    background-color: #ffffff;
    position: fixed;
    filter: alpha(opacity=60);
    opacity: 0.6;
}


/* General Look and feel styles*/
.first-navbar {
    height:42px;
    min-height:0px;
}
.topnav-margins{
    margin-bottom: 4px !important;
    padding-top: 2px;
}
.topnav-color{
    background-color:#0f4c8c;
    color:#fff;
}
.footer-Area{
    background-color: #e6eff8;
    color: #0f4c8c;
    font-size: .9em;
    padding: 2em;
    margin-bottom:0px;
    margin-top:2em;
}

.pageTitle h1 {
    font-family: "Roboto";
    font-size: 3em;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    .footer-Content {
        border-left: 1px solid rgba(0,0,0,.25);
        padding-left: 2em;
        height: 116px;
    }

}
.footer-Logo {
    height: 116px;
    width: 116px;
    background: url(../images/logo-dmvSeal.svg) center center no-repeat;
    background-size: contain;
    display: block;
    margin-left:auto;
    margin-right:auto;
}
.footer-text-head{
    text-transform:uppercase;
    font-weight:700;
}
.footer-copyright {
    background-color: #0f4c8c;
    color: #fff;
    margin-bottom: -30px;
}
.footer-copyright span{
    display:block;
    padding-top: 1em;
}
.topnav-Logo{
    height: 105px;
    padding-top:25px;
}
.globalLogo{
    height:55px;
    width: 193px;
    float:left;
    background: url(../images/logo-dmv.svg) center center no-repeat;
    background-size:contain;
    display:block;
}
.globalExitLink{
    float:right;
    padding-top:6px;
    vertical-align:middle;
    font-size:24px;
    font-family: Roboto;
    color:black;
    text-transform:uppercase;
}
.globalExitLink::before{
    font-size:.85em;
    font-weight:lighter;
}

@media(max-width: 767px) {
    .globalLogo {
        height: 50px;
        width: 90px;
    }

    .topnav-Logo {
        height: 50px;
        padding-top: 2px;
    }

    .pageTitle h1 {
        font-size:2em;
        padding-top:5px;
        padding-bottom:5px;
    }

    .footer-Content {
        text-align: center;
    }

    .footer-Logo {
        height: 80px;
        width: 80px;
    }
    .footer-copyright span{
        font-size: .8em;
        text-align:center;
    }
}

.topIcon{
    text-align:center;
    font-size:3.5em;
    color: #0f4c8c;
}
#globalTopPanel {
    border: none;
}
    #globalTopPanel > .panel-heading {
        background-color: white;
        border:none;
        
    }
    #globalTopPanel > .panel-heading > h2 {
        font-size: 24px;
    }
    #globalTopPanel > .panel-body {
        border: 1px solid #aeaeae;
        border-radius: 4px;
    }
#globalTopPanel_click{
    display:block;
    color:#0f4c8c;
    text-decoration:underline;
    font-size:.5em;
    margin-top:.25em;
}
#globalBottomPanel {
    border: none;
}
    #globalBottomPanel > .panel-heading {
        background-color: white;
        border:none;
        
    }
    #globalBottomPanel > .panel-heading > h2 {
        font-size: 24px;
    }
    #globalBottomPanel > .panel-body {
        border: 1px solid #aeaeae;
        border-radius: 4px;
    }


span.iForms_Textbox, span.iFormsDropdown, span.iFormsCheckbox, span.iFormsDateControl {
    color: #0f4c8c;
    vertical-align: middle;
}

.iFormsButton{
    text-transform: uppercase;
    transition: all 0.25s ease;
}
    .iFormsButton:hover,
    .iFormsButton:focus {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    }

.iFormsButton i {
    margin-right: .5em;
}

/*Bootstrap overrides*/
.btn-success:hover,
.btn-success:focus,
.btn-success:active{
    background-color: #308446;
    border-color: #29713c;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background-color: #0f4c8c;
    border-color: #0d3f75;
}
.arrow-Right::after {
    transition: all 0.25s ease;
    font-family: FontAwesome;
    content: '\f061';
    background-size: contain;
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-left: .5em;
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
}
.arrow-Right:hover::after {
    animation: ani-arrow-inlineBlock 1s ease infinite;
    -webkit-animation: ani-arrow-inlineBlock 1s ease infinite;
}

.arrow-Left::before {
    transition: all 0.25s ease;
    font-family: FontAwesome;
    content: '\f060';
    background-size: contain;
    width: 11px;
    height: 11px;
    display: inline-block;
    margin-right: .5em;
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
}
.arrow-Left:hover::before {
    animation: ani-arrow-inlineBlock 1s ease infinite;
    -webkit-animation: ani-arrow-inlineBlock 1s ease infinite;
}

#navigationFooter{
    overflow:hidden;
}
#navigationFooter button {
    min-width: 90px;
}
    #navigationFooter div.nav {
        text-align: center;
    }

.pageNumbers {
    margin-left: .5em;
    margin-right: .5em;
}


@media screen and (max-width: 767px) {
    .pageNumbers {
        margin-left: .25em;
        margin-right: .25em;
    }
}
/*Finish Page*/
.largeButton{
    width: 260px;
    height:135px;
    border-width: 3px;
    color: #000;
    font-weight:bold;
    white-space:normal;
    font-size: 1.2em;
}
.largeButton:hover{
    color:#000;
}
.largeButton i{
    display:block;
    font-weight:normal;
    font-size:2.2em;
    margin-bottom:.4em;
}

.greenButton {
    border-color: #308446;
    background-color: #C9FFDF;
}

.greenButton i{
    color: #308446;
}
.blueButton{
    border-color: #0f4c8c;
    background-color: #CEFFFF;
}

.blueButton i{
    color: #0f4c8c;
}
/*==================================
=            ANIMATIONS            =
==================================*/

@-webkit-keyframes ani-arrow-inlineBlock {
    0% {
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }

    50% {
        -webkit-transform: translate3d(0.25em, -10%, 0);
        transform: translate3d(0.25em, -10%, 0);
    }
}
@keyframes ani-arrow-inlineBlock {
    0% {
        -webkit-transform: translate3d(0, -10%, 0);
        transform: translate3d(0, -10%, 0);
    }

    50% {
        -webkit-transform: translate3d(0.25em, -10%, 0);
        transform: translate3d(0.25em, -10%, 0);
    }
}

@media print{
    body{
        margin:0;
        padding: 0 !important;
        min-width: 768px;
    }
    .container{
        width: auto;
        min-width: 750px;
    }
}

/* Code for Progress Tracker */
.progress-tracker {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    /* Reset ordered list styles. Display list elements in a single line and set light grey background color to indicate incomplete step.  */
    .progress-tracker li {
        list-style-type: none;
        display: inline-block;
        position: relative;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 30px;
        height: 30px;
        background-color: #f0f0f0;
    }

        .progress-tracker li > span {
            display: block;
            color: #999;
            font-size: medium;
            text-transform: uppercase;
        }

        /* Style for current step that's in progress (green background color). */
        .progress-tracker li.current > span {
            color: #fff;
            background-color: #308446;
        }

        /* Style for steps that are complete (dark blue background color). */
        .progress-tracker li.complete > span {
            color: #fff;
            background-color: #0f4c8c;
        }

        /* Styles to add arrows. :before and :after pseudo-elements are used with the trick of giving borders a big size to create corners. */
        .progress-tracker li > span:after,
        .progress-tracker li > span:before {
            content: "";
            display: block;
            width: 0px;
            height: 0px;
            position: absolute;
            top: 0;
            left: 0;
            border: solid transparent;
            border-left-color: #f0f0f0;
            border-width: 15px;
        }

        .progress-tracker li > span:after {
            top: -5px;
            z-index: 1;
            border-left-color: #fff;
            border-width: 20px;
        }

        .progress-tracker li > span:before {
            z-index: 2;
        }

        /* Style to make arrow color match the color of the current step (green color). */
        .progress-tracker li.current + li > span:before {
            border-left-color: #308446;
        }

        /* Style to make arrow color match the color of the completed step (dark blue color). */
        .progress-tracker li.complete + li > span:before {
            border-left-color: #0f4c8c;
        }

        .progress-tracker li:first-child > span:after,
        .progress-tracker li:first-child > span:before {
            display: none;
        }

        /* Style to show arrow at beginning or end of the tracker. Add empty <i> element between <li> element to use. See HTML example below.  */
        .progress-tracker li:first-child i,
        .progress-tracker li:last-child i {
            display: block;
            height: 0;
            width: 0;
            position: absolute;
            top: 0;
            left: 0;
            border: solid transparent;
            border-left-color: #fff;
            border-width: 15px;
        }

        .progress-tracker li:last-child i {
            left: auto;
            right: -15px;
            border-left-color: transparent;
            border-top-color: #fff;
            border-bottom-color: #fff;
        }

/* Progress Tracker example HTML code:
    <div class="row">
        <ol class="progress-tracker">
            <li class="col-md-4 complete">
                <span>Step 1</span>
                <i></i>
            </li>
            <%-- Empty HTML comment below is used to remove the blank space between <li> tags. --%>
            <!-- -->
            <li class="col-md-4 current">
                <span>Step 2</span>
            </li>
            <%-- Empty HTML comment below is used to remove the blank space between <li> tags. --%>
            <!-- -->
            <li class="col-md-4">
                <span>Step 3</span>
                <i></i>
            </li>
        </ol>
    </div>
*/
