.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative;
    background-color:#002663;
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #FFFFFF;
}

.blocking-spinner-div {
	
}

.overlay-div {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 10;
	background-color: #EBEDF0;
	top: 0px;
	left: 0px;
	opacity: 0.5;
	border-radius: 5px;
}

.spinner1 {
	background-image:url(images/bigsnake.gif);
	background-repeat: no-repeat;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

.field-error {
	padding: 6px 12px; border-radius: 4px; border: 1px solid rgb(204, 0, 0); transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-image: none; width: 100%; height: 34px; color: rgb(85, 85, 85); line-height: 1.4285; font-size: 14px; display: block; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075); background-image: none; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.field-error:focus {
	border-color: rgb(204, 0, 0); outline: 0px; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(204, 0, 0,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6);
}

.field-valid {
	padding: 6px 12px; border-radius: 4px; border: 1px solid rgb(0, 102, 51); transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-image: none; width: 100%; height: 34px; color: rgb(85, 85, 85); line-height: 1.4285; font-size: 14px; display: block; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075); background-image: none; background-color: rgb(255, 255, 255); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.field-valid:focus {
	border-color: rgb(0, 102, 51); outline: 0px; box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(0, 102, 51,0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 102, 51, .6);
}


/*Header*/
.grad1 {
    /*background: rgb(46, 109, 164);*/
	color:#ffffff;	
    background: #1E2D60; /* For browsers that do not support gradients */
	border: 1px solid #c6c6c6;
}

/*Challenge Screen*/
.factorbox{
	text-align:center;
	border: 1px solid #d6d6d6;/*#a5c6dd;#7AC6EF;#B8DCF6 */
	background:#f8f8f8;
}

#content {
    position: relative;
	display:block;
}
#content span {
    position: absolute;
    top: 2px;
    right: 2px;
}
.closeicon{
	border: 1px solid #d6d6d6;
	background:white;
	color:#6b6b6b;
	font-size:17px;
}
.closeicon:hover{
	color:rgb(35, 82, 124);
}

.factorinnertxt{
	padding-top:20px;
}
.factorfont24{
	font-size:24px;
}
.factorfont22{
	font-size:22px;
}
.factorfont20{
	font-size:20px;
}
.factorfont17{
	font-size:17px;
}
.factorfont16{
	font-size:16px;
}
.factorfont15{
	font-size:15px;
}
.factorfont{
	font-size:20px;
}
.pushInfofont{
	font-size:18px;
}
.pushInfoSubfont{
	font-size:16px;
}
#oktapushdiv{
	padding:20px 0px 0px 20px;
	text-align:left;
}
#oktacodediv{
	padding:10px 0px 0px 20px;
	text-align:left;
}
#oktaordiv{
	padding:15px 0px 0px 20px;
	text-align:left;
}
#oktacodediv{
	padding-bottom:20px;
}
#factorinnerbox{
	border: 1px solid #d6d6d6;
	margin:0px 15px 10px 15px;
	display:inline-block;
	background:white;
}
#callinnerbox{
	border: 1px solid #d6d6d6;
	margin:10px 15px 15px 15px;
	background:white;
}
#yubikeyinnerbox,#softtokeninnerbox{
	border: 1px solid #d6d6d6;
	margin:10px 15px 15px 15px;
	background:white;
}
#oktaordiv,#oktapushdiv, #oktacodediv{
	display:inline-block;
}
#codepassdiv{
	padding-left:0px;
}
#callcodediv{
	padding:20px 0px 20px 0px;
	text-align:left;
}
#callbtndiv{
	padding-bottom:30px;
}
#callchallengebtndiv{
	display:inline-block;
	padding:0px 0px 20px 20px;
}
#callverifydiv,#callverifyinputdiv{
	padding-left:0px;
}
#callbtndiv,#callinputdiv, #callverifydiv{
	display:inline-block;
}
#callinputdiv{
	padding-top:20px;
	padding-left:20px;
}
#yubikeydiv{
	padding:30px 0px 20px 20px;
	text-align:left;
}
#yubikeychallengediv{
	padding:20px 0px 20px 20px;
	text-align:left;
}
#yubikeyInput{
	padding-left:0px;
}
#yubikeychallengeInput{
	padding-left:0px;
	padding-right:0px;
}
#yubikeystepsdiv{
	display:inline-block;
	padding-bottom:10px;
}
#yubikeyinputdiv{
	display:inline-block;
	padding-bottom:20px;
}
.yubifactorfont{
	font-size:17px;
}
.yubifactorInnerfont{
	font-size:15px;
}

.qrcodefactorfont{
	font-size:18px;
}

.voicefactorfont{
	font-size:18px;
}

#softtokenstepsdiv{
	display:inline-block;
	padding-top:30px;
}
#softtokenInput{
	display:inline-block;
}

#softbtndiv{
	padding-top:20px;
	padding-bottom:30px;
}

#softtokenInputDiv{
	padding-top:20px;
}

#softtokenverifydiv{
	padding:20px 10px 20px 10px;
}

#stcodepassdiv{
	padding-left:0px;
}

#pushenrollinnerbox,#yubikeyenrollinnerbox,#softenrollinnerbox{
	border: 1px solid #d6d6d6;
	margin:15px;
	background:white;
}

#voiceenrollinnerbox{
	border: 1px solid #d6d6d6;
	margin:15px;
	background:white;
}

#qnaenrollinnerbox{
	border: 1px solid #d6d6d6;
	margin:15px;
	background:white;
}

#callbtndiv{
	padding:20px;
}
.hovertxt:hover{
	text-decoration:underline;
}
.txtstyle{
	padding-top:5px;
	padding-bottom:5px;
}

.newtxtstyle{
	padding-top:5px;
	padding-bottom:25px;
}

.oktaenrolldivbox{
	display:inline-block;
	padding:10px;
	text-align:left;
}

#appleimg:hover,#androidimg:hover,#windowsimg:hover{
	opacity: 0.8;
    filter: alpha(opacity=80);
}

.enrolledstyle{
	color:white;padding-top:45px; padding-bottom:45px; font-size:17px;font-weight:bold;
}

.resetbtnstyle{
	margin-top:20px;margin-bottom:20px;border:1px solid #959595;background:#E5463E;color:white;padding-top:10px; padding-bottom:10px;
}

.setupbtnstyle{
	margin-top:20px;margin-bottom:20px;border:1px solid #959595;background:#769b51;color:white;padding-top:10px; padding-bottom:10px;
}

.weffects{

	-webkit-box-shadow: 0px 0px 6px 1px #999999;
	   -moz-box-shadow: 0px 0px 6px 1px #999999;
	        box-shadow: 0px 0px 6px 1px #999999;
			
	-webkit-border-radius: 4px;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-moz-border-radius: 4px;/* Firefox 1-3.6 */
			border-radius: 4px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */			
}
.radiuseffects{
	-webkit-border-radius: 4px;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-moz-border-radius: 4px;/* Firefox 1-3.6 */
			border-radius: 4px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

.deviceoptions{
	border:1px solid #d6d6d6;padding-top:10px;padding-bottom:10px;
	-webkit-border-radius: 4px;/* Safari 3-4, iOS 1-3.2, Android 1.6- */
		-moz-border-radius: 4px;/* Firefox 1-3.6 */
			border-radius: 4px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}

.grow1 {
	transition: all .2s ease-in-out;
}

.grow1:hover {
	transform: scale(1.050);
}

.grow {
	transition: all .2s ease-in-out;
}

.grow:hover {
	transform: scale(1.009);
}

.right-angle-arrow,.bottom-angle-arrow {
	display: inline-block;
	position: relative;
}
.bottom-angle-arrow:after {
	content: '';
	display: inline-block;  
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top: -22px;
	width: 0;
	height: 0;
	border-top: 7px solid #ffffff;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid transparent;
}

.right-angle-arrow:after {
	content: '';
	display: inline-block;  
	position: absolute;
	right: 100%;
	top: 50%;
	margin-top: -22px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 7px solid #ffffff;
}

.onoffswitch {
    position: relative; width: 50px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 30px; padding: 0; line-height: 30px;
    border: 2px solid #CCCCCC; border-radius: 30px;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 30px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 22px;
    border: 2px solid #CCCCCC; border-radius: 36px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: rgb(51, 122, 183);
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: rgb(51, 122, 183);
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px; 
}
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

.spacestyle{
	padding-bottom:20px;
}
.newspacestyle{
	padding-bottom:0px;
}
#vpnWell:hover, #citrixWell:hover, #epvWell:hover, #psaWell:hover, #f5vpnWell:hover {
	background-color:rgb(240, 240, 240)!important;
}
img {
    max-width: 100%;
    height: auto;
}
.spaceoptstyle{
	margin-bottom:2px;display:inline-block;
}
.newspaceoptstyle{
	margin-bottom:2px;display:inline-block;padding-bottom:25px;
}

#newnumbtn, #receivecodebtn{
	background:#1E2D60;
	color:#ffffff;
}
#newnumbtn:hover, #receivecodebtn:hover{
	background:#48547d;
	color:#ffffff;
}

#successPopup{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	padding: 20px;
	border: 2px solid #2ecc71;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#successPopup p {
	margin: 0;
}

#failPopup{
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	padding: 20px;
	border: 2px solid #ac2925;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.center-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 25px;
}
.note-box {
	height: 5px;
}
.example {
	margin-left: 20px;
	font-size: 0.9em;
	color: #555;
}