html {
    height: 100%
}

@font-face {
    font-family: Sofia;
    src: url("/static/sofia-pro-medium.otf");
}

#stage-top ul li {
    margin-bottom: .6em;
}

input.ub,
button.ub,
a.ub {
    position: relative;
    display: block;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    text-decoration: none;
    padding: 13px 0px 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: #005bbb;
    border-radius: 3px;
    min-width: 124px;
    margin: 10px auto;
    cursor: pointer;
    transition: background-color 0.5s ease;
    /* max-width:200px; */
    border: none;
    width: 100%;
}

a.ub:hover,
button.ub:hover,
input.ub:hover {
    background: #2f9fd0;
}

/*
.flash {
    position: relative;
    display: block;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    text-decoration: none;
    padding: 13px 18px 12px;
    background: #fff;
    border-radius: 3px;
    min-width: 124px;
    margin: 10px auto;
    border: #990000;
    border-style: solid;
    border-width: 2px;
    color: #990000
}
*/

/* UB blue message */
.flash-info {
    position: relative;
    display: block;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    text-decoration: none;
    padding: 13px 18px 12px;
    background: #fff;
    border-radius: 3px;
    min-width: 124px;
    margin: 10px auto;
    border: #005bbb;
    border-style: solid;
    border-width: 2px;
    color: #005bbb
}

/* default category */
.flash-message {
    position: relative;
    display: block;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    text-decoration: none;
    padding: 13px 18px 12px;
    background: #fff;
    border-radius: 3px;
    min-width: 124px;
    margin: 10px auto;
    border: #990000;
    border-style: solid;
    border-width: 2px;
    color: #990000
}

/* default category */
.flash-error {
    position: relative;
    display: block;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    text-decoration: none;
    padding: 13px 18px 12px;
    background: #fff;
    border-radius: 3px;
    min-width: 124px;
    margin: 10px auto;
    border: #990000;
    border-style: solid;
    border-width: 2px;
    color: #990000
}


div.bypass_codes {
    text-align: center;
}

ul.bypass_codes {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-type: none;
    font-size: 15pt;
    padding: 0px;
    display: inline-block;
}

span.bypass_checkbox {
    border: 1px solid;
    display: inline-block;
    height: 12px;
    margin-right: 10px;
    width: 12px;
}


/* took this from login */

#duo_iframe {
    display: block;
    width: 100%;
    max-width: 700px;
    height: 400px;
    margin: auto;
    border: none;
}

p.intro {
    font-size: 1.3em;
}

p.blurb {
    margin-top: -8px;
    font-size: 1.1em;
}

#stage-top {
    font: 14px/1.2 Helvetica, Arial, sans-serif;
    padding: 1em;
    max-width: 700px;
    margin: auto;
}

.tempnav {
    font-family: courier;
    padding: 8px;
    color: #888;
    position: absolute;
    z-index: 100;
}

.tempnav a {
    font-family: courier;
    color: #888;
}

a {
    color: #005bbb;
}

body {
    margin: 0;
    background: #e4e4e4;
}

#header {
    display: flex;
    padding: 6px 10px 7px;
    background: #005bbb;
    position: relative;
    z-index: 10;
    height: 35px;
    overflow: hidden
}

#header div,
#header-ubidm div {
    width: 960px;
    margin: 0 auto
}

#header a,
#header img {
    display: block;
    border: none;
    color: white;
}

#header-ubidm {
    display: flex;
    padding: 10px;
    background: #002f56;
    /*#002f56; 666666 */
    position: relative;
    z-index: 10;
    overflow: hidden;
    color: #fff;
    font-family: Sofia;
}

#header-ubidm a {
    color: #fff;
    text-decoration: none;
}

#header-ubidm span.logout a {
    color: #ebec00;
    text-decoration: underline;
}

#header-ubidm span.logout form {
    display: inline-block;
}

button.logout {
    color: #ebec00;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: Sofia;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    min-width: 0;
    margin: 0;
}

span.logout {
    float: right;
    margin-top: 3px;
}


/* new stage rule per DR */

#stage {
    font: 14px/1.2 Helvetica, Arial, sans-serif;
    max-width: 600px;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.enhanced .fields,
.fields input {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #fff;
    border: 1px solid #999;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100%
}

.enhanced .fields input,
.fields label {
    display: block;
    width: 100%;
    border: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    background: 0 0;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0
}

.fields label .text {
    font: 14px/1.2 Helvetica, Arial, sans-serif;
    margin: 15px 0 5px;
    display: block
}

.enhanced .fields .text {
    display: none
}

.fields input {
    font-size: 16px;
    padding: 10px
}

.enhanced .fields label {
    border-bottom: 1px solid #999;
    position: relative
}

.enhanced .fields label:last-child {
    border: 0
}

label i {
    display: none
}

div.fields i {
    display: block;
    font-size: 18px;
    position: relative;
    top: -19px;
    left: 12px;
    width: 20px;
    text-align: center;
    color: #999
}

.enhanced input:focus+i {
    color: #000
}

#login-button {
    font-weight: 700;
    font-size: 14px;
    margin-top: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px;
    display: block;
    border: 1px solid #999;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 100%;
    cursor: pointer;
    background: #f3f3f3;
    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #fff), color-stop(100%, #f3f3f3));
    background-image: -webkit-linear-gradient(#fff, #f3f3f3);
    background-image: -moz-linear-gradient(#fff, #f3f3f3);
    background-image: -o-linear-gradient(#fff, #f3f3f3);
    background-image: linear-gradient(#fff, #f3f3f3);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

#login-button:hover {
    border-color: #000;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    transition: all .1s
}

h1 {
    color: #000;
    padding: 18px 0 0;
    margin: 20px 0;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 20px
}

h2 {
    margin: 20px 0 10px
}

a.btn-tag {
    color: #005bbb;
    text-decoration: none;
    font: 16px/1.2 Helvetica, Arial, sans-serif;
    display: block;
    float: right;
    padding: 6px 12px 5px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin-top: -3px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}

a.btn-tag i:before {
    font-size: 18px;
    vertical-align: -2px;
    width: 24px
}

a.btn-tag:hover {
    background: #FFF;
    -webkit-transition: all .1s;
    -moz-transition: all .1s;
    transition: all .1s
}

.alert {
    border: 1px solid #cc7f7f;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #f0d9d9;
    color: #900;
    font: 14px/1.2 Helvetica, Arial, sans-serif;
    padding: 8px 12px;
    margin: 20px 0 15px
}

.alert [class*=" icon-"],
.alert [class^=icon-] {
    font-size: 18px;
    vertical-align: -2px;
    margin-right: 6px
}

@media only screen and (max-width:360px) {
    #header {
        height: auto
    }

    #header div {
        width: auto
    }

    #header img {
        width: 100%;
        height: auto
    }
}


/* DR - Remove #stage-related media queries, trusting the definitions above to be inherently responsive */

@media only screen and (min-width:700px) {

    #stage-top,
    #stage {
        width: 600px;
    }
}

/* shib-icons no longer used
@font-face {
    font-family: shib-icons;
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"],
[class^=icon-], .icon {
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-help:before {
    font-family: shib-icons;
    content: "\e600"
}

.icon-user:before {
    font-family: shib-icons;
    content: "\e601"
}

.icon-lock:before {
    font-family: shib-icons;
    content: "\e602"
}

.icon-error:before {
    font-family: shib-icons;
    content: "\e603"
}

#togglePassword:before {
    content: "👁";
}

#togglePassword {
    float: right;
    left: -20px;
    cursor: pointer;
} */

.links {
    margin: 20px 0;
    padding-top: 20px;
    border-top: 1px dotted #ccc
}

.links ul {
    margin: 0;
    padding-top: 0;
    padding-left: 1.2em;
    font: 14px/1.2 Helvetica, Arial, sans-serif
}

.links ul li {
    padding: 0;
    margin: 0 0 10px
}

.links ul li a {
    /* DR update link color*/
    color: #005bbb;
    border-bottom: 1px solid #c3d1e3;
    text-decoration: none
}

.links ul li a:hover {
    /* DR update link color*/
    border-bottom-color: #005bbb;
}

.hidden {
    display: none;
}

li.gray {
    color: #505050;
    list-style-type: disc;
}

li.invalid {
    color: red;
    /* red X */
    list-style-type: "\274C  ";
}

li.valid {
    color: green;
    /* green check mark */
    list-style-type: "\2705  ";
}

div.blueTable {
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.divTable.blueTable .divTableCell,
.divTable.blueTable .divTableHead {
    padding: 3px 2px;
}

.divTable.blueTable .divTableRow:nth-child(even) {
    background: #D0E4F5;
}

.divTable.blueTable .divTableHeading {
    background: #1C6EA4;
    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    border-bottom: 2px solid #444444;
}

.divTable.blueTable .divTableHeading .divTableHead {
    font-weight: bold;
    color: #FFFFFF;
    border-left: 2px solid #D0E4F5;
}

.divTable.blueTable .divTableHeading .divTableHead:first-child {
    border-left: none;
}

.blueTable .tableFootStyle {
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    background: #D0E4F5;
    background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
    border-top: 2px solid #444444;
}

.blueTable .tableFootStyle {
    font-size: 14px;
}

.blueTable .tableFootStyle .links {
    text-align: right;
}

.blueTable .tableFootStyle .links a {
    display: inline-block;
    background: #1C6EA4;
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 5px;
}

.blueTable.outerTableFooter {
    border-top: none;
}

.blueTable.outerTableFooter .tableFootStyle {
    padding: 3px 5px;
}

div.inputTable {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.divTable.inputTable .divTableCell,
.divTable.inputTable .divTableHead {
    padding: 3px 2px;
}

div.inputTable .divTableCell input {
    width: 95%;
}

.divTable.inputTable div div:nth-of-type(1) {
    width: 20%;
}

/* DivTable.com */
.divTable {
    display: table;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    display: table-header-group;
}

.divTableCell,
.divTableHead {
    display: table-cell;
}

.divTableHeading {
    display: table-header-group;
}

.divTableFoot {
    display: table-footer-group;
}

.divTableBody {
    display: table-row-group;
}

fieldset.security-question {
    margin-top: 20px;
}

.security-question,
.security-question-missing {
    margin: 1em;
    background-color: #ECECEC;
    border: 1px solid #ccc;
    padding: 1em;
    display: block;
}

.security-question legend {
    font-size: 1.2em;
}

.security-question legend.missing {
    font-size: 1.2em;
    color: #990000;
}

.security-question input[type="text"] {
    margin: 5px;
    padding: 5px;
    width: 90%;
}

.security-question select {
    margin: 5px;
    padding: 5px;
    width: 90%;
    text-overflow: ellipsis;
}

a.cancel,
button.cancel,
input.cancel {
    position: relative;
    display: block;
    font: 16px/1.4 Sofia, Arial, sans-serif;
    text-decoration: none;
    padding: 13px 0px 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: #990000;
    border-radius: 3px;
    min-width: 124px;
    margin: 10px auto;
    cursor: pointer;
    transition: background-color 0.5s ease;
    /* max-width:200px; */
    border: none;
    width: 100%;
}

a.cancel:hover,
button.cancel:hover,
input.cancel:hover {
    background: #c74242;
}