/*****************
 * OPS SignInTerminal
 *****************/


@media print
  {
  	.OutFrame { display: none;}
  }
  
body {
	background-color: #A8ACB0;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
}
.OutFrame
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
	align: center;
	width: 100%;
	margin: 0 0 0 0;

}

.ViewFrame{ 
   
    margin: 2em 2em 2em 2em;
    font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    height: 500px;
    width: 700px;

}
.TitleFrame{ 
   	width: 100%;
	height: 80px;
	background-image:url('/Ops/Res/Public/img/WorkHeadBG.png');
}

.HeadKioskName
{
    font-size: 12pt;
    color:#333E48;
    padding: 40px 0px 0px 620px;
	position: absolute;
}
.exitLink
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 9pt;
    font-style: italic;
    color: #000000;
}
a.exitLink:hover {text-decoration:underline;}

.ContentSITFrame{ 
    float: none; 
    align: center;
    padding: 1em 1em 2em 1em;
    clear: both;
    background-image:linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)), 
        url('/Ops/Res/Public/img/SITBackground.jpg');
    background-size:cover;
    height: 500px;   
}

.ContentBioKeyFrame{ 
    float: none; 
    align: center;
    clear: both;
    background-image:url('/Ops/Res/Public/img/BioKeyFrameBG.png');
    width: 520px;
    height: 220px;
}


.ContentFrame{ 
    float: none; 
    align: center;
    padding: 2em 1em 2em 1em;	
    background-image:linear-gradient(
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.6)), 
        url('/Ops/Res/Public/img/SITBackground.jpg');
    clear: both;
    background-size:cover;
    height: 500px;   
    position:relative;
}


.ContentFooter{ 
    float: none; 
    align: center;
    margin: 0 0 0 0;
    padding: 0em 1em 2em 1em;
    clear: both;
    position:absolute;
    bottom: 0;
}


.LogoDiv{
	width: 275px;
}

.LogoDiv2{
	width: 100%;
}

.SITInfoContainer
{
    background: rgba(20, 20, 20, 0.9);
    width: 95%;
    height:335px;
    overflow-y: hidden;
}

.SITInfoSeperator
{
    width:97%;
    background-color:#D0D0D0;
}

.SITInfoTable
{
    width: 100%;
    margin: 5px 0px 5px 0px;
    padding: 0.5em 0.5em 0.5em 0.5em;
    clear: both;
    color: white;
}

.SITWorkLabel
{
    font-size: 8pt;
    font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color: #D0D0D0;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 0px 4px 0px;
}

.SITWorkData
{
    font-size: 10pt;
    font-weight:bold;
    font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color: #FFFFFF;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 1px 4px 0px;
}

.SITImageLabel
{
    font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 10pt;
    text-align: left;
}

.SITInfoName
{
    font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 10pt;
    text-align: left;
    vertical-align: text-top;
    padding-left: 5px;
}

.SITHeadBox
{
    width: 18%;
}

.SITContentBox
{
    width: 82%;
    padding-left: 1em;
}

.StatusSignDiv{
	width: 100px;
    padding: 0.5em 0em 0em 0em;
}


.ClockFrame{ 
	font-family: Segoe 3em; 
	width: 100%;
	align: right;
   	Padding: 20px 10px 20px 10px;
    margin-top:50px;
    margin-bottom:100px;
}

.ClockText
{
    font-size: 75pt;
    color:#ffffff;
    align: right;
}

.SITInfoClock
{
    position: absolute;
    top: 2px;
    right: 2px;
}

.ClockSmallText
{
    font-size: 10pt;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color:#ffffff;
    font-weight:bold;
    align: right;
}

.HeadSideBoxDiv
{
	float: left;
	width: 90px;	
    font-size: 9pt;	
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
   	font-weight:bold;
    color: #ffffff;
	margin: 5px 0px 10px 0px;

}

.ContentTopBoxDiv
{
	width: 570px;
	height: 4px;
   	padding: 0px 0px 0px 0px;	
}
.ContentBottomBoxDiv
{
	width: 570px;
	height: 4px;
   	padding: 0px 0px 0px 0px;	
}
.ContentSideBoxDiv
{
	
	width: 570px;
	min-height: 40px;
   	padding: 0px 0px 0px 0px;	
	border-style: solid;
    border-width: 1px;
	border-color: #00A1DF;
}
.ContentOuterBoxDiv{
	width: 570px;
	
}
.PromptMessage
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 16pt;
    color:#ffffff;
    align: right;
}
.LoginErrorMessageNoTopBottom
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 12pt;
    color: red;
    margin: 0px 20px -10px 30px;
    font-weight:bold;
}
.LoginErrorMessage
{

	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 12pt;
    color: white;
    align: right;
    font-weight:bold;
}
.ErrorImageContainer{
    display: block;
    padding: 10px;
    width: 50px;
    height: 50px;
}
.LoginReasonMessage
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 14pt;
    color: #ffffff;
    align: right;
    Padding: 8px 8px 8px 8px;
}

.LoginStatusMessage
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 14pt;
    color: #ffffff;
    align: right;
    Padding: 4px 4px 4px 4px;
}

.EmployeeInfo
{
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight:bold;
    color: #ffffff;
    align: right;
}

.KeyInput
{
	width:200px;
}
.KeyInputInvisible
{
	width:200px;
	position:absolute; 
	top:0;
	left:-500em;
}
.TransparentSubmit{
	display: none;
}



.WorkTable{
   width:100%;	
   margin: 0px 0px 0px 0px;
}

.WorkCaption{
    font-size: 10pt;
    font-weight:bold;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color: #ffffff;
    text-align: left;
}
.WorkLable{

    width: 16%;
    font-size: 8pt;
    font-weight:bold;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color: #1a99d9;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 0px 0px 0px;
}

.WorkLableNarrow{

    width: 14%;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    font-size: 8pt;
    font-weight:bold;
    color: #1a99d9;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 0px 0px 0px;
}


.EmpPerformanceLable
{
    
    width: 25%;
    font-size: 8pt;
    font-weight:bold;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    color: #1a99d9;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 0px 0px 0px;
}
.WorkData{

    font-size: 9pt;
    font-weight:bold;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    width: 33%;
    color: #ffffff;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 1px 0px 0px;
}
.WorkDataNarrow{

    font-size: 9pt;
    font-weight:bold;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    width: 33%;
    color: #ffffff;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 1px 0px 0px;
}
.EmpPerformanceData
{
    font-size: 9pt;
    font-weight:bold;
	font-family: "Century Gothic", Arial, "Lucida Grande", Verdana, Lucida, Helvetica, sans-serif;
    width: 25%;
    color: #ffffff;
    text-align: left;
    vertical-align: text-top;
    padding: 4px 1px 0px 0px;
}


.EmployeeMsgBox{
	width: 100%;
    color: #ffffff;
	height: 150 px;
	overflow: auto;
}
.SmallImage
{
	height:30px;
	width: 30px;
    filter: brightness(0) invert(1);
}

}

.SmallImageShort
{
	height:25px;
	width: 35px;
}

.MediumImage
{
    padding: 5px 5px 5px 5px;
	height: 70px;
	width: 70px;
}