@font-face 
{
  font-family: "Roboto";
  src: url(/cfr/fonts/Roboto/Regular/Roboto-Regular.ttf) format('truetype'), url(/cfr/fonts/Roboto/Regular/Roboto-Regular.woff) format('woff'), url(/cfr/fonts/Roboto/Regular/Roboto-Regular.woff2) format('woff2');
  font-weight: 500;
  line-height: 1;
}

/* @font-face 
{
  font-family: "Roboto Medium";
  src: url(/cfr/fonts/Roboto/Medium/Roboto-Medium.ttf) format('truetype'), url(/cfr/fonts/Roboto/Medium/Roboto-Medium.woff) format('woff'), url(/cfr/fonts/Roboto/Medium/Roboto-Medium.woff2) format('woff2');
  line-height: 1;
}

@font-face 
{
  font-family: "Roboto Bold";
  src: url(/cfr/fonts/Roboto/Bold/Roboto-Bold.ttf) format('truetype'), url(/cfr/fonts/Roboto/Bold/Roboto-Bold.woff) format('woff'), url(/cfr/fonts/Roboto/Bold/Roboto-Bold.woff2) format('woff2');
  font-weight: 500;
  line-height: 1;
}

@font-face 
{
  font-family: "Roboto Light";
  src: url(/cfr/fonts/Roboto/Light/Roboto-Light.ttf) format('truetype'), url(/cfr/fonts/Roboto/Light/Roboto-Light.woff) format('woff'), url(/cfr/fonts/Roboto/Light/Roboto-Light.woff2) format('woff2');
  line-height: 1;
} */

/*Common REM Sizing*/
/*
  If body font-size changes, these must change as well.
  8px = 0.5714rem;
  10px = 0.7143rem;
  12px = 0.8571rem;
  14px = 1rem;
  18px = 1.286rem;
  all others can be calculated at https://offroadcode.com/prototypes/rem-calculator/
  or use:  pxDesired / pxRoot (ex: 12 / 14 = 0.8571)
*/

body,
html 
{
  font-family: Roboto, arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  margin: 0 .5rem 0;
  padding: 0;  
}



/***** ALERT HEADER CONTAINER *****/
.SystemAlertPageBody
{
  background-color: #f2f5f7;
}

.SystemAlertPageContainer
{
  position: relative;
  margin: 10% auto 0;
  max-width: 42rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
}

.AlertHeaderContainer
{
  background-color: #f4f8f9;
  position: relative;
  padding: 0 2.5rem;
  -webkit-transition: padding ease .5s;
  -moz-transition: padding ease .5s;
  transition: padding ease .5s;  
}

.AlertHeaderImage
{
  background: url(/cfr/images/VTS/Axiom/Assets/SystemAlertMessage.svg) no-repeat center center;
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem;
  display: inline-block;
  vertical-align: middle;
}

.AlertHeaderContainer .AlertHeadingTitle
{
  display: inline-block;
  margin: 2rem 0.5rem;
  position: relative;
  color: #535c60;
  font-size: 1.286rem;
  font-weight: normal;
  text-transform: uppercase;  
  padding: 0;
  letter-spacing: normal;  
  -webkit-transition: font-size ease .5s, margin ease .5s;
  -moz-transition: font-size ease .5s, margin ease .5s;
  transition: font-size ease .5s, margin ease .5s;
}
/***** END *****/


/***** SYSTEM ALERT MESSAGE CONTAINER *****/
.SystemAlertMessageContainer
{
  padding: 2.857rem 3.571rem;
  height: 100%;
  overflow: auto;
  background-color: #ffffff;
  color: #869195;
  text-align: center;
}

.PresentationTitle
{
  color: #869195;
  font-size: 1.285rem;
  text-align: center;  
  margin: 0 0 0.5rem;
}

.SystemAlertMessage
{
  color: #869195;
  font-size: 1.285rem;
  font-family: "Roboto Light";
  text-align: center;
}

#TimerContainer
{
  padding: 1rem 0;
}

#TimerContainer #Timer
{
  font-size: 2.285rem;
  color: #3baef0;
}

.AddToCalendarLink,
#EarlyEntranceLink
{
  color: #1A4C7D;
  text-decoration: none;
  cursor: pointer;
}

.AddToCalendarLink:hover, 
#EarlyEntranceLink:hover 
{
  color: #2F76BC;
  text-decoration: underline;
}

#EarlyEntranceLink
{
  margin: 0.5rem 0 0;
}

.ServerTime
{
  margin: 1rem 0 0;
}

.SystemAlertMessage .ErrorPageMessage
{
  font-family: Roboto, arial, sans-serif;
}

.ErrorPageMessage #ReturnToLogin a
{
  color: #1A4C7D;
  font-size: 1.185rem;
  margin: 0.5rem 0 0;
  display: block;
}

.ErrorPageMessage #ReturnToLogin a:hover
{
  color: #2F76BC;
}
/***** END *****/



/***** MEDIA QUERIES *****/
@media screen and (max-width: 480px)
{
  .SystemAlertMessageContainer
  {
    padding: 2.857rem 1.571rem;
  }  
  .AlertHeaderContainer
  {
    padding: 0 1rem;
  }
  .AlertHeaderContainer .AlertHeadingTitle
  {
    font-size: 1.2rem;
  }  
}
@media screen and (max-width: 360px)
{
  .AlertHeaderContainer
  {
    padding: 1rem 0.5rem;
    text-align: center;
  }
  .AlertHeaderContainer .AlertHeadingTitle
  {
    display: block;
    margin: 0.5rem 0.5rem 0;
  }    
}
/***** END *****/


.AxiomMediaBuffering 
{
  box-shadow: inset 0 0 0 5px #007dbb;
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: AxiomMediaBufferingSpin 1.1s infinite linear;
  animation: AxiomMediaBufferingSpin 1.1s infinite linear;
  position:relative;
  display:  flex;
  align-items:  center;
  justify-content: flex-end;
  align-content:  center;
  overflow:hidden;
} 

.AxiomMediaBuffering 
{
  border-radius: 100%;
  width: 150px;
  height: 150px;
  z-index:0;
} 
.AxiomMediaBuffering:before 
{
  content:"";
  background: #eeeeee;
  display:block;
  transform:translateX(-118px);
  z-index:1;
  width: 80px;
  height:80px;
  left:0;
  right:0;
  bottom:0;
  top:0;
  transform: translateX(7px);
}

.AxiomMediaBuffering:after 
{
  content:"";
  background: #ffffff;
  border-radius:100%;
  position:absolute;
  z-index:1;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  margin:auto;
  left:0;
  right:0;
  bottom:0;
  top:0;
  transform: translateX(0px);
}  

@-webkit-keyframes AxiomMediaBufferingSpin 
{ 
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
} 

@keyframes AxiomMediaBufferingSpin 
{ 
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
/* End */