html{
    height: 100%;
	margin: 0;
    padding: 0;
    overflow: hidden;
    background:#FFF;
	font-family:myTPHero, Helvetica, Arial, sans-serif;
}
body{
    height: 100%;
    margin: 0;
    padding: 0;
}
#rol-header, #rol-footer{
	flex: 0 0 auto;
}
#rol-header{
	display:flex;
	justify-content: space-between;
	align-items:center;
	flex-wrap: wrap;
	background:#fff;
	overflow:hidden;
	padding:12px 30px;
	/* next 2 aren't neccessary but prevent jumping when loading */
	box-sizing: border-box;
	height: 68px;
	
}
#rol-container{
    display:flex;
	height: 100vh;
	flex-direction: column;
}
#container{
	width:100%;
}
#rol-content{
	position: relative;
	padding: 0px;
    margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 2;
}
app-root{
	/* viewport height - (header height + footer height) */
	height: calc(100vh - 88px);
	width:100%;
}
#devParent, #totpProvisioning, #myModal{
	float: none;
	position: inherit;
	left: auto;
	top: auto;
	margin-top: auto;
	margin-left: auto;
	max-width: 327px;
}
#devParent.termsOfServiceParent{
	max-width: none;
	margin-left: unset !important;
	margin-top: unset !important;
}
.termsOfServiceParent{
	max-width: none;
}
#myModal.termsOfService{
	border: none;
	width: unset !important;
	max-width: unset;
	min-height: unset !important;
	max-height: unset !important;
	padding: 0 10px;
}
.termsOfService .loginButton{
	width: 40%;
}
.totpProvisioningButton{
	background: #df991b;
}
#myModal{
 box-sizing: border-box;
 background:#fff;
 border:1px solid #ccc;
 color:#888;
 box-shadow:none;
 min-height:350px;
 width:100%;
}
.line {
 border-bottom:1px #ccc solid;
}
#myModal input[type='text'], #myModal input[type='password']{
	width:100%;
	box-sizing: border-box;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .termsOfServiceParent#devParent {
        margin-left: auto !important;
        margin-top: auto !important;
    }
    .termsOfService#myModal {
        max-width: none !important;
    }
    #accept-area {
        padding-top: 20px !important;
    }
}
#imgWrap img {
    max-width: 275px;
}
#forgotPasswordLink {
 color:#df991b;
 text-decoration:none;
}
#identityProviderLogin ul{
	padding:0 25px;
}
#identityProviderLogin li{
	margin: 0 0 16px 0;
	display: table;
	width: 100%;
}
.spinnercnt{
	text-align:center;
}
#spinnerImage,
#spinnerImage:after {
  border-radius: 50%;
  width: 1em;
  height: 1em;
}
#spinnerImage {
  margin: 6px auto 16px auto;
  background: transparent;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  z-index: 9999;
  font-size: 16px;
/* Use font-size to control the size. 
    Use even numbered pixels. 
    em units and odd numbered pixels cause color overlap.*/
  border-top: .4em solid rgba(153, 153, 153, 0.2);
  border-right: .4em solid rgba(153, 153, 153, 0.2);
  border-bottom: .4em solid rgba(153, 153, 153, 0.2);
  border-left: .4em solid #df991b;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: rotation 1.1s infinite linear;
  animation: rotation 1.1s infinite linear;
}
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.loginButton{
 border:1px solid #df991b;
 background:#df991b;
 width:100%;
}
.loginButton:focus, .loginButton:hover:enabled,.loginButton:disabled {
    background-color: #df991b;
	color:#fff;
}
.loginButton:disabled {
	opacity: 0.5;
}
#rssAlert{
	width: unset;
}
#rol-header-logo img{
 max-height:40px;
 width: auto;
 margin:0;
}
#rol-toolbar{
 display:none;
 overflow:visible;
 white-space:nowrap;
}
#rol-toolbar ul{
 display: flex;
 margin: 0;
 list-style:none;
}
#rol-toolbar li{
	height:auto;
	position: relative;
	margin:0 15px;
}
#rol-toolbar a{
 display: block;
 cursor: pointer;
 font-size:14px;
 font-weight:400;
 text-align:center;
 color:#888;
 text-decoration:none;
 text-transform: uppercase;
}
#rol-toolbar a::after{
  position: absolute;
  content: '';
  height: 2px;
  bottom: 0px;
  left: 0;
  right: 100%;
  bottom: -3px;
  opacity: 0;
  background-color: #df991b;
  transition: all .2s ease;
}
#rol-toolbar li:hover > a::after{
  opacity: 1;
  right: 0;
  left: 0;
}

#rol-toolbar li:first-child a{
	padding-left:0;
}
#rol-toolbar li:last-child a{
	padding-right:0;
}
#rol-toolbar a:link, #rol-toolbar a:visited{
 color:#888;
 text-decoration:none;
}
#rol-toolbar a:hover{
 cursor:pointer;
 text-decoration:none;
}
#rol-toolbar a:active{
 color:#888;
 text-decoration:none;
}



#rol-footer{
   background:#1F1F1F ;
}
#rol-footer p{
	line-height:20px;
	font-size:12px;
	margin:0 30px;
	color:#777;
}
#rol-footer a:link, #rol-footer a:visited{
	color:#777;
    text-decoration:none;
}
#rol-footer a:hover{
 color:#777;
 text-decoration:none;
}
#rol-footer a:active{
 color:#777;
 text-decoration:none;
}