.secret-answer{
  font-style: italic;
}

.continue-button{
  width: 100% !important;
}

fieldset{
border: none;
padding: 0px;
margin: 0px;
}

h2{
text-align: center;
}

ul{
padding: 0px;
list-style: none;
}

.preceda-dialog{
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -khtml-border-radius: 10px; 
  border-radius: 10px; 
  background: white; 
  padding: 10px; 
  position: absolute; 
  display: none; 
  font-size: 12px; 
  overflow: hidden;
  color:  #4b5058;
  font-weight: bold;
}

.btn-login{
width: 100% !important;
}

body{
  background: #ef7d00;
  color: white;
  font-family: Arial, 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
  font-size: 16px;
  background-size: 304px 122px;
}

a{
  color: white;
}

.formBoxWide{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.yes-button, .no-button{
  text-transform: capitalize !important;
  width: 80px !important;
}

.preceda-dialog .next{
  width: 80px !important;
  text-transform: capitalize !important;
}

input.cancel, input.next, #logonButton, input.previous, button.mfa-sign-in{
	font-size: 18px;
	height: 45px;
	text-align: center;
	padding: 0px;
	text-align:center; vertical-align:middle;
	margin-left: auto;
	margin-right: auto;
	color: white;
	text-transform: uppercase;
	background: #bebe82;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: #786428;
	background-clip: padding-box;
}

button.btnDisabled{
  -moz-opacity: 0.5;
  opacity: .5;
  filter: alpha(opacity=50);
}

#cancelDB {
  background: #4b5058;
  color: #FFFFFF;
  border-color: #dcdcdc;
}

#logonButton{
	width: 100%;

}

.next, .cancel, .previous, .mfa-sign-in{
width: 49%;
}

.cancel{
float: right;
}

.inner-page{
padding: 0px;
margin: 0px;
}

.logintextfield{
-webkit-appearance: none;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
-webkit-rtl-ordering: logical;
-webkit-transition-delay: 0s, 0s;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-property: border, box-shadow;
-webkit-transition-timing-function: linear, linear;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(204, 204, 204);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(204, 204, 204);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(204, 204, 204);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(204, 204, 204);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: auto;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
height: 30px;
letter-spacing: normal;
line-height: 20px !important;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 30px;
padding-bottom: 4px;
padding-left: 6px;
padding-right: 6px;
padding-top: 4px;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
transition-delay: 0s, 0s;
transition-duration: 0.2s, 0.2s;
transition-property: border, box-shadow;
transition-timing-function: linear, linear;
vertical-align: middle;
width: 100%;
word-spacing: 0px;
writing-mode: lr-tb;

}

.rememberLine, #chgPwdLink{
padding-bottom: 8px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
}

#selectDB-dlg, #confirm-dlg, #pwdExpired-dlg, #expSoon-dlg, #chgPwd-dlg{
	color:  #4b5058;
}

/****** Modal ******/
.EWSLoader {
  background: #ef7d00 50% 50% no-repeat;
  position: fixed;
  display: none;
  z-index: 500;
  height: 100%;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}
/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .EWSLoader {
    display: block;
}
/****** End Modal ******/
/****** Spinner Animation *****/
#ewsSpinContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
#ewsSpinner.active {
  display: block;
}
#ewsSpinner {
  display: none;
  position: absolute;
  height: 20px;
  width: 20px;
  top: 50%;
  left: 50%;
  z-index: 1;
}
.ewsSpinner_ball {
  position: absolute;
  display: block;
  background-color: #ef7d00;
  width: 5px;
  height: 5px;
  border-radius: 14px;
}
#ewsSpinner_ball_1 {
  -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.7, 0.7);
  -webkit-animation-name: rotateEWS; 
  -webkit-animation-duration: 1.6s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 20px;
  -moz-animation-timing-function: cubic-bezier(0.7, 0.3, 0.7, 0.7);
  -moz-animation-name: rotateEWS; 
  -moz-animation-duration: 1.6s; 
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0 20px;
  animation-timing-function: cubic-bezier(0.7, 0.3, 0.7, 0.7);
  animation-name: rotateEWS; 
  animation-duration: 1.6s; 
  animation-iteration-count: infinite;
  transform-origin: 0 20px;
}
#ewsSpinner_ball_2 {
  -webkit-animation-timing-function: cubic-bezier(0.6, 0.4, 0.6, 0.7);
  -webkit-animation-name: rotateEWS; 
  -webkit-animation-duration: 1.6s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 20px;
  -moz-animation-timing-function: cubic-bezier(0.6, 0.4, 0.6, 0.7);
  -moz-animation-name: rotateEWS; 
  -moz-animation-duration: 1.6s; 
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0 20px;
  animation-timing-function: cubic-bezier(0.6, 0.4, 0.6, 0.7);
  animation-name: rotateEWS; 
  animation-duration: 1.6s; 
  animation-iteration-count: infinite;
  transform-origin: 0 20px;
}
#ewsSpinner_ball_3 {
  -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.7);
  -webkit-animation-name: rotateEWS; 
  -webkit-animation-duration: 1.6s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 20px;
  -moz-animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.7);
  -moz-animation-name: rotateEWS; 
  -moz-animation-duration: 1.6s; 
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0 20px;
  animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.7);
  animation-name: rotateEWS; 
  animation-duration: 1.6s; 
  animation-iteration-count: infinite;
  transform-origin: 0 20px;
}
#ewsSpinner_ball_4 {
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.6, 0.4, 0.7);
  -webkit-animation-name: rotateEWS; 
  -webkit-animation-duration: 1.6s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 20px;
  -moz-animation-timing-function: cubic-bezier(0.4, 0.6, 0.4, 0.7);
  -moz-animation-name: rotateEWS; 
  -moz-animation-duration: 1.6s; 
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0 20px;
  animation-timing-function: cubic-bezier(0.4, 0.6, 0.4, 0.7);
  animation-name: rotateEWS; 
  animation-duration: 1.6s; 
  animation-iteration-count: infinite;
  transform-origin: 0 20px;
}
#ewsSpinner_ball_5 {
  -webkit-animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 0.7);
  -webkit-animation-name: rotateEWS; 
  -webkit-animation-duration: 1.6s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0 20px;
  -moz-animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 0.7);
  -moz-animation-name: rotateEWS; 
  -moz-animation-duration: 1.6s; 
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0 20px;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 0.7);
  animation-name: rotateEWS; 
  animation-duration: 1.6s; 
  animation-iteration-count: infinite;
  transform-origin: 0 20px;
}
@-webkit-keyframes rotateEWS {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
  }
  100% { 
    -webkit-transform: rotate(360deg) scale(1); 
  }
}
@-moz-keyframes rotateEWS {
  0% {
    -moz-transform: rotate(0deg) scale(1);
  }
  100% { 
    -moz-transform: rotate(360deg) scale(1); 
  }
}
@keyframes rotateEWS {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% { 
    transform: rotate(360deg) scale(1); 
  }
}
/****** Spinner Animation End *****/



  .dbSelectContainer{
    border-bottom-color: #4b5058;
    border-bottom-style: none;
    border-bottom-width: 0px;
    color: #4b5058;
    display: block;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    margin-bottom: 20px;
    padding: 0px;
    width: '100%';
  }

  .listItems{
    color: rgb(51, 51, 51);
    display: list-item;
    float: none;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    height: 42px;
    line-height: 20px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: -1px;
    text-align: left;
  }

.dbSelectContainer li  a {
  border: 1px solid #ddd;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  color: #4b5058;
  cursor: hand !important;
  display: block;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-right: 0px;
  outline-color: #4b5058;
  outline-style: none;
  outline-width: 0px;
  padding-bottom: 10px;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
  text-align: left;
  text-decoration: none ;
  z-index: auto;
  border-bottom-width: 0px;
}

.dbSelectContainer li:first-child a {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-topleft: 4px;
}

.dbSelectContainer li:last-child  a {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-width: 1px;
}

.dbSelectContainer  li  a:hover,
.dbSelectContainer  li  a:focus {
  z-index: 2;
  background-color: #4b5058;
  color: white;
  border-color: #dcdcdc;
}

#mfa-method-selected, #mfa-otp, #mfa-method, #mfa-enrolment, #mfa-enrolled{
  width: 100%;
}

.previous {
  float: left;
}

#mfa-button-container{
  text-align: center;
  margin-top: 5px;
}

.text-container{
  width: 100%;
  min-height: 25px;
  text-align: center;
}

.address{
  text-align: center;
}

#mfa-otp-msg, #mfa-otp-inst, #mfa-method-msg, #mfa-method-inst, #mfa-method-inst-2, #warning-msg,
#mfa-enrolment-title, #mfa-enrolment-desc, #mfa-enrolled-title, #mfa-enrolled-msg{
  min-height: 25px;
}

#mfa-method-inst-2, #mfa-method-inst-3, #anotherDevice, #skip2SV,
#cannotScan, #mfa-qrcode{
  margin-top: 5px;
}

#mfa-method-skip{
  text-align: center;
}

#mfa-enrollment-key{
  font-family: "Courier New", Courier, monospace;
}

#sso-title{
  color: #FFFFFF;
  font-size: 1.5em;
  padding-top: 10px;
}

#sso-desc{
  color: #FFFFFF;
  padding-top: 5px;
}

.warning-message{
  padding-top: 20px;
  font-size: 0.8em;
}

.logo-container{
  height: 108px;
  background: url('images/Preceda_logo.png') center 40px no-repeat #ef7d00;
  width: 100%;
  padding-top: 60px;
}

.logonMsg-inner-content{
  width: 80%;
  margin: 0 auto;
  padding: 16px 0;
}

#logonMsgHeading{
  font-family: Arial,"Bliss2Regular","Liberation Sans",FreeSans,sans-serif;
  font-weight: bold;
  font-size: 11pt;
  color: #FFFFFF;
}

#logonMsgText{
  font-family: Arial,"Bliss2Regular","Liberation Sans",FreeSans,sans-serif;
  font-weight: normal;
  font-size: 10pt;
  line-height: 14pt;
  color: #FFFFFF;
}

#logonMsgText ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

#logonMsgText li::before{
  content: "-";
  padding-right: 5px;
}