/*
Core styles for account client flows, stolen mostly from BUI
---
Used for the login/mfa pages in Assist
 */


/* general styles */
hr { margin: 20px auto; }

.inline-block {
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
    *display: inline;
    *vertical-align: auto;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*
All content found in templates within account_client are wrapped
with a classed div of account-client-content
 */
.account-client-content form { margin: 0 0 17px; }

.account-client-content label {
    display: block;
    text-align: left;
    width: auto;
}

.account-client-content input,
.account-client-content select {
    margin-bottom: 8px;
    text-align: left; /* doesn't apply to select, but won't hurt it */
}

.account-client-content h2,
.account-client-content h3 { margin: 5px 0 10px; }

.account-client-content p { max-width: 600px; }

.account-client-content hr {
    margin: 20px 0;
    width: 100%;
}

.account-client-content .error,
.account-client-content .errors,
.account-client-content .field-error { color: #b94a48; }

.account-client-content .error ul,
.account-client-content .errors ul {
    list-style-type: disc;
    margin-left: 20px;
}

.account-client-content ul.errorlist { text-align: left; }


/* verification token styles, for simple and long codes/answers */
.mfa-token-verify input[name="token"] {
    font-size: 26px;
    height: auto;
}

.mfa-long-token-verify input[name="token"] { min-width: 90%; }


/*
Basic custom flexbox based grid system for account client templates,
hoping these styles don't clash with other apps and their grid systems
 */
.flex-row { display: flex; }

.flex-row [class*="flex-col"] {
    box-sizing: border-box;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    padding-right: 30px;
}

.flex-row [class*="flex-col"]:last-child { padding: 0; }

.flex-row .flex-col-1 { flex: 1 100%; }
.flex-row .flex-col-2 { flex: 2; }
.flex-row .flex-col-3 { flex: 3; }
.flex-row .flex-col-4 { flex: 4; }
.flex-row .flex-col-5 { flex: 5; }
.flex-row .flex-col-6 { flex: 6; }
.flex-row .flex-col-7 { flex: 7; }
.flex-row .flex-col-8 { flex: 8; }
.flex-row .flex-col-9 { flex: 9; }
.flex-row .flex-col-10 { flex: 10; }


/* text color styles, copied from BUI */
.text-warning { color: #c09853; }
.text-error { color: #b94a48; }
.text-info { color: #3a87ad; }
.text-success { color: #468847; }


/* login styles */
.login { text-align: center; }
.login ul.errorlist { text-align: center; }

.login .well {
    display: inline-block;
    margin: 0;
    max-width: 400px;
    min-height: 410px;
    vertical-align: top;
    width: 40%;
}

.login p {
    font-size: 110%;
    line-height: 1.3;
    margin: 30px auto;
    max-width: 90%;
}

.login label {
    display: block;
    text-align: center;
    width: auto;
}
.login input { text-align: center; }

.login a.cancel {
    display: block;
    margin-top: 35px;
}

.reset-password.well {
    margin: 0 auto;
    width: 50%;
}

.reset-password.well.initiate,
.reset-password.well.initiate label,
.reset-password.well.initiate input,
.reset-password.well.initiate ul.errorlist { text-align: center; }


/* password verify styles */
.password-verify,
.password-verify label,
.password-verify input,
.password-verify ul.errorlist { text-align: center; }


/* wells, also copied from BUI, based off Bootstrap 2.3.2 */
.well {
    background-color: transparent;
    border: 1px solid #e1e1e1;
    margin-bottom: 20px;
    padding: 25px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* NO .well-*-icon styles, because that assumes font awesome */

.well.well-grey { background-color: #f9f9f9; }

.well.well-warning {
    background-color: #fcf8e3;
    border-color: #fbeed5;
}

.well.well-error {
    background-color: #f2dede;
    border-color: #eed3d7;
}

.well.well-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.well.well-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
}


/* button row styles copied from BUI */
.btn-row {
    *zoom: 1;
    display: inline-block;
    margin-top: 25px;
    text-align: center;
    width: 100%;
}

.btn-row:before,
.btn-row:after {
    display: table;
    content: "";
    line-height: 0;
}

.btn-row:after { clear: both; }

.btn-row .btn { margin: 0 5px; }

.btn-row .btn.right {
    float: right;
    margin: 0 0 0 10px;
}

.btn-row .btn.left {
    float: left;
    margin: 0 10px 0 0;
}

.btn-row.right { text-align: right; }
.btn-row.right .btn { margin: 0 0 0 10px; }

.btn-row.left { text-align: left; }
.btn-row.left .btn { margin: 0 10px 0 0; }

.btn-row.right .btn.right,
.btn-row.left .btn.right { margin: 0 0 0 10px; }

.btn-row.right .btn.left,
.btn-row.left .btn.left { margin: 0 10px 0 0; }


/* step indicator styles copied from BUI */
.steps {
    font-family: sans-serif;
    font-size: 15px;
    list-style: none outside none;
    margin: 0 0 40px;
    padding: 0;
}

.steps li {
    color: #bcbcbc;
    display: inline;
    font-weight: 300;
    margin-left: 58px;
    position: relative;
    text-transform: uppercase;
}

.steps li:first-child { margin-left: 0; }

.steps li.current { color: #222; }

.steps li.current span.step-icon {
    background-color: #222;
    position: relative;
}

.steps li.current span.step-icon:after {
    border-width: 6px 5px 0;
    border-style: solid;
    border-color: #222 transparent;
    bottom: -8.85px;
    content: "";
    display: block;
    height: 5px;
    left: 6.335px;
    position: absolute;
}

.steps li:not(:first-child):after {
    border-bottom: 1px solid #d5d5d5;
    color: #bcbcbc;
    content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
    top: -9.3px;
    position: absolute;
    left: -55px;
}

.steps li span.step-icon {
    background-color: #bcbcbc;
    border-radius: 22.5px;
    color: #ffffff;
    display: inline-block;
    height: 22.5px;
    font-weight: normal;
    line-height: 24px;
    margin-right: 5px;
    text-align: center;
    width: 22.5px;
    z-index: 10;
}



/* Responsive styles */
@media (max-width: 850px) {
    .flex-row,
    .flex-row [class*="flex-col"] {
        display: block;
        padding: 0;
        width: 100%;
    }
}