/*Inline checkboxes are ugly otherwise on xs */
@media (max-width: 768px) {
    .checkbox-inline {
        display: block;
    }
}

@media (max-width: 440px) {
    #progressbarContainer {
        display: none;
    }
}

@media (max-width: 440px) {
    .containerImg {
        margin-top: 1% !important;
    }
    body {
        padding-top:10px !important;
    }
    #returningIco {
        display:none;
    }
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: #fff;
}

hr {
    border-top: 1px solid #e0e0e0;
}

h3 {
    font-weight: bold !important;
}
/*
span .glyphicon .glyphicon-info-sign {
    color: #212C65 !important;
}*/

span.glyphicon.glyphicon-info-sign {
    color: #212C65 !important;
}

.fauxLabel {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

.fauxList {
    margin-top: .5%;
}

.lpTitle {
    font-size: 18px;
    color: #fff;
    text-align: center !important;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

.step-title {
    font-weight: bold;
    font-size: 24px;
}

.step-subtitles {
    font-weight: bold;
    font-size: 18px;
}

.appContainer {
    background-color: #f4f2f2;
    border-radius: 4px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.srHomeTitle {
    font-size: 24px;
    color: #33428B;
    font-weight: bold;
}

.srHomeSubTxt {
    font-size: 20px;
    font-weight: bold;
}

.srHomeSubLnk {
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.progressbar {
    margin: 0;
    padding: 0;
    counter-reset: step;
}

    .progressbar .active a {
        color: #212C65;
    }

        .progressbar .active a:hover {
            color: #212C65;
        }

    .progressbar .completed a {
        color: #7D7D7D;
    }

        .progressbar .completed a:hover {
            color: #7D7D7D;
        }

    .progressbar li {
        list-style-type: none;
        width: 25%;
        float: left;
        font-size: 12px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        color: #7d7d7d !important;
    }

        .progressbar li:before {
            width: 30px;
            height: 30px;
            content: counter(step);
            counter-increment: step;
            line-height: 30px;
            border: 2px solid #7d7d7d;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            border-radius: 50%;
            background-color: white;
        }

        /*line before active */
        .progressbar li:after {
            width: 100%;
            height: 2px;
            content: '';
            position: absolute;
            background-color: #7d7d7d !important;
            top: 15px;
            left: -50%;
            z-index: -1;
        }

        /*prevent first circle from having a line in front of it*/
        .progressbar li:first-child:after {
            content: none;
        }

        /*text under active circle*/
        .progressbar li.active {
            color: #212C65;
            font-weight: bold;
        }
            /*active dot*/
            .progressbar li.active:before {
                background-color: #212C65 !important;
                border-color: #212C65;
                color: white;
                border: 2px;
            }

            /*line after active circle*/
            .progressbar li.active + li:after {
                background-color: #5CB85C !important;
            }
        /*circle before the active*/
        .progressbar li.completed:before {
            background-color: #7d7d7d !important;
            color: white;
        }

.validation-summary-valid.alert-danger {
    display: none;
}

.field-validation-error text-danger form-label {
    border: 2px solid red;
}

.required:after {
    content: "* ";
    font-weight: 900;
    font-size: 15px;
    color: red;
    margin-left: 5px;
}

.requiredSpan {
    margin-right: 2%;
    font-size: 15px;
    font-weight: 900;
    color: red !important;
}

.fieldsummary {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 12px 6px 12px;
    font-style: italic !important;
}

.arrow {
    border-top-color: #6cbbca !important;
}

#btnAddPhone {
    background-color: #212C65 !important;
    border-color: #212C65 !important;
}

    #btnAddPhone:hover {
        background-color: #33428c !important;
        border-color: #212C65 !important;
    }

#btnRemovePhone {
    background-color: #212C65 !important;
    border-color: #212C65 !important;
}

    #btnRemovePhone:hover {
        background-color: #33428c !important;
        border-color: #212C65 !important;
    }

#nextBtn.submit {
    background-color: #212C65 !important;
    border-color: #212C65 !important;
}

    #nextBtn.submit:hover {
        background-color: #33428c !important;
        border-color: #212C65 !important;
    }

.programButtonSelected {
    content: "\f058" !important;
    font-family: FontAwesome;
    background-color: #212C65 !important;
}


/*New App Question Styles*/
@media (max-width: 440px) {
    .inputGroup label {
        padding-right: 20% !important;
        display: none;
    }

    .containerImg .bottom-rightImg {
        /*text-align: right !important;*/
    }

    .bottom-rightImg {
        font-size: 16px !important;
        margin-left: 3% !important;
        /*background: #D1D7DC !important;*/
        background: rgba(0,0,0,.65);
        /*background-color: #212c65 !important;*/
        padding: 2% !important;
        padding-bottom: 2% !important;
        margin-top: 26% !important;
    }

    .inputGroup input:checked ~ label:before {
        transform: translate(-50%, -50%) scale3d(40, 40, 100);
        opacity: 1;
    }

    .allAppLinksFix {
        margin-top: 3% !important;
        margin-left: 2% !important;
    }

    /*   .containerImg {
        display: none;
    }*/

    /* .mobile {
        display: block !important;
        color: #FFF !important;
        background-color: #212c65 !important;
        padding: 2% !important;
        padding-bottom: 5% !important;
    }*/

    .containerImg {
        margin-top: 10%;
    }
}


body {
    /*padding-top: 25px;*/
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/*Div buttons*/
.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
}

    .inputGroup label {
        padding: 12px 30px;
        width: 100%;
        display: block;
        text-align: left;
        color: #3C454C;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 200ms ease-in;
        overflow: hidden;
    }

        .inputGroup label:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            content: "";
            background-color: #212C65;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            z-index: -1;
        }

        .inputGroup label:after {
            width: 32px;
            height: 32px;
            content: "";
            border: 2px solid #D1D7DC;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
            background-repeat: no-repeat;
            background-position: 2px 3px;
            border-radius: 50%;
            z-index: 2;
            position: absolute;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            transition: all 200ms ease-in;
        }

    .inputGroup input:checked ~ label {
        color: #fff;
    }

        .inputGroup input:checked ~ label:before {
            transform: translate(-50%, -50%) scale3d(120, 120, 1);
            opacity: 1;
        }

        .inputGroup input:checked ~ label:after {
            background-color: #6CBBCA;
            border-color: #6CBBCA;
        }

    .inputGroup input {
        /*Commented stuff here leaves a small flaw but adds keyboard support*/
        /*width: 32px;
        height: 32px;*/
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        /*visibility: hidden;*/
    }

/*Override forms.less interferes with custom styling*/
#questionForm > input[type="radio"] {
    margin: unset !important;
    margin-top: 1px \9;
    line-height: normal;
}

    #questionForm > input[type="radio"]:focus + label {
        outline: 2px dotted #FF6600;
    }

.form {
    padding: 0 16px;
    /*max-width: 550px;*/
    margin: 50px auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 36px;
}

body {
    background-color: #FFFFFF;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

#replaceMe {
    background-color: #D1D7DC;
    padding: 2%;
    margin: 1%;
    margin-bottom: 2%;
}

    #replaceMe fieldset {
        padding: 1%;
    }

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

code {
    background-color: #9AA3AC;
    padding: 0 8px;
}

/*Required field styles */
/* Mark input boxes that gets an error on validation: */
input:invalid {
    background-color: #ffdddd;
}



/* Hide all steps by default: */
.form {
    display: none;
}

.jumbotron p {
    font-weight: bold !important;
    font-size: 28px !important;
}

input[type="button"]:focus + label {
    outline: 2px dotted #FF6600;
}

legend {
    border-bottom: none !important;
}

.bottom-rightImg {
    position: absolute;
    bottom: 8px;
    right: 16px;
    text-align: left !important;
    font-size: 28px;
    font-weight: bold;
    padding: 1%;
    background: rgba(0,0,0,.65);
}

.containerImg {
    position: relative;
    text-align: center;
    color: white;
}

.centeredImgOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bottomHr {
    margin-top: 10px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

#replaceMe a {
    color: #212C65;
    text-decoration: underline;
    font-weight: bold;
}

.modal-body {
    max-width: 100%;
    overflow-x: auto;
}