/*

Trapeze Grey: 	#4A4A4A;
Trapeze Blue:	#E0E9F4;
Trapeze Red: 	#ae1939;
Trapeze Background Gray :  #3f3f3f;
Trapeze Blue Border: 81A7CC;
New Blue =287ab3;

Green = #94c55a


trapeze light blue #90C0DD
trapeze blue #4B8AAF
Trapeze background Grey: #D4D5D7

#A8ACB0;
#D4D5D7;
grey: 3F3F3F;
*/


body {
    font: 9pt "Source Sans Pro", sans-serif;
    background-color: transparent;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

font.fontMainColored{
	color: 	#000000;
}

font.fontPrimaryColor{
	color: 	#ffffff;
	font-size: 15pt;
}

font.fontSecondColor {
	color: 	black;
	font-size: 10pt;
}

font.fontLightestColor {
	font: 8pt "Source Sans Pro", sans-serif;
	color: #E0E9F4;
	font-weight: bold;
}

font.fontCalendarColored {
	color: #4B8AAF;
	font-size: 10pt;
	font-weight: bold;
}

font.fontLogin {
	font: 11pt "Source Sans Pro", sans-serif;
	color: darkgrey;
}

div.headerNameFont {
	color: white;
    font-family: "Source Sans Pro", sans-serif;
	font-size: 12pt;
	font-weight: bold;
}

div.headerBadgeFont {
	color: white;
    font-family: "Source Sans Pro", sans-serif;
	font-size: 9pt;
	font-weight: bold;
    margin-bottom: 3px;
}

div.headerDivisionFont {
	color: lightgray;
    font-family: "Source Sans Pro", sans-serif;
	font-size: 11.2pt;
    margin-bottom: -3px;
}

div.employeeHeader {
	width: 100%;
	height: 70px;
	background-color: transparent;
}

tr.employeeHeaderTR {
	height: 70px;
	width:100%;
}

td.employeeHeaderDesktopLogo {
	width: auto;
}

td.employeeHeaderDesktop{
	width: auto;
}

td.employeeHeaderMobileLogo {
	display: none;
}

td.employeeHeaderMobileText {
	display: none;
}

div.CopyRightFooter {
	width: 100%;
	padding-bottom: 6px;
    align-self: flex-end;
}

font.CopyRightFont {
	color: #ffffff;
	font: 10pt;
	font-weight:bold;
}

input {
	font: 8pt "Source Sans Pro", sans-serif;
}

.inputpaddle
{
	border:none;
	background-color: transparent;
	color:#4B8AAF;
	text-decoration: underline;
}

div.headerPicture
{
	width: 100%;
	height:80px;
	background: url('../images/TopBackGround.JPG') no-repeat left top;
}

table.LoginMsgContent{
	width: 100%;
	border: none;
	border-collapse: collapse;

}

td.loginSecondaryColor
{
	padding-top: 50px;
}

td.LoginHeader {
	padding-top: 80px;
}

td.LoginTable{
    padding-left: 0px;
    padding-right: 0px;
	background-color: transparent;
}

table.LoginTable{
    width: 95%;
}

table.LoginHeader{
    width: 95%;
}

td.MessageTable{
}

.zebraLn1 {
	background-color: white;
	border-bottom: #D3D3D3 1px dotted;
	vertical-align: top;
	font-size: 8pt;
}

.zebraLn2 {
	background-color: white;
	border-bottom: #D3D3D3 1px dotted;
	vertical-align: top;
	font-size: 8pt;
}

.zebraLn1 td {
	border-bottom: #D3D3D3 1px dotted;
	border-left: #D3D3D3 1px transparent;
	border-right: #D3D3D3 1px transparent;
	padding: 4px;
}

.zebraLn2 td {
	border-bottom: #D3D3D3 1px dotted;
	border-left: #D3D3D3 1px transparent;
	border-right: #D3D3D3 1px transparent;
	padding: 4px;
}

.OPSZebraLn1 {
	background-color: #EDEDED;
	vertical-align: middle;
}

.OPSZebraLn2 {
	background-color: white;
	vertical-align: middle;
}

.OPSGridFont {
    color: #0F2372;
    font-size: 11pt;
    height: 40px;
    vertical-align: middle;
}

.OPSGridFontSmall {
    color: #0F2372;
    font-size: 10pt;
    height: 28px;
    vertical-align: top;
    
}
tr.OPSGridFontSmall:nth-of-type(odd){
    border-top: 1px solid #c1c1c1

}

tr.OPSGridFontSmallWithTop {
    color: #0F2372;
    font-size: 10pt;
    height: 28px;
    vertical-align: top;
    border-top: 1px solid #c1c1c1;
}

tr.OPSGridFontSmallNoTop {
    color: #0F2372;
    font-size: 10pt;
    height: 28px;
    vertical-align: top;
    border-top: 1px dotted #d1d1d1;
}

.OPSZebraLn1 td, .OPSZebraLn2 td {
	border-top: none !important;
    border-bottom: none !important;
	border-left: none !important;
    border-right: none !important;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 3px;
    padding-bottom: 3px;
}

td.InsideTD {
	border: 0px;
	padding: 0px;
}
div.textLabel{
  color: #6F6F6F !important;
  font-size: 1.2em;
  text-align: right;
  padding-right: 10px;
}
.TextLabelItem {
	color: #FFFFFF;
	font-size: 1em;
	white-space: nowrap;
	font-weight:normal;
	text-align:left;
  margin-right: 20px;
}

.TextDataItem {
	font-size: 1em;
	color: #FFFFFF;
	border:none;
	text-align: left;
	font-weight:bold;
}

.TextLabelItemSmall {
	color: #287ab3;
	font-size: 1em;
	white-space: nowrap;
	font-weight:bold;
}

.ContentHeaderName {
	text-align: left;
	font: 10pt "Source Sans Pro", sans-serif;
	font-weight:bold;
   	color: #4B8AAF;
}

.ContentFilter {
	width:100%;
	vertical-align: middle;
}

.ContentFilterForm{
	float: right;
	vertical-align: middle;
	width: 70%;
	margin:0px 0px 0px 0px;
}

div.BodyBackground {
	margin: 0px;
	width: 100%;
	min-height: 750px;
	background-color: transparent;
    display: flex;
    flex-direction: column;
}

div.OuterWrap {
	width: 100%;
	min-height: 620px;
	padding-top: 20px;
    margin-bottom: auto;
}

div.BorderWrap {
	width: 96%;
	margin: auto;
	background-color: transparent;
	padding: 20px;
}

div.FooterHeaderWrap {
	width: 91.666666%;
	margin: 0px 0px 0px 0px ;
	background-color: #4B8AAF;
	border: 2px solid #ffffff;
	padding-left: 1.666%;
	padding-right: 1.666%;
	padding-top: 10px;
	padding-bottom: 10px;
}

div.BorderTop {
	width:100%;
	height:20px;
	background: url('../images/BorderTop.png') no-repeat;
 	opacity:0.9;
 	filter:alpha(opacity=100);
}

div.BorderBottom {
	width:100%;
	height:25px;
	background: url('../images/BorderBottom.png') no-repeat;
 	opacity:0.9;
 	filter:alpha(opacity=100);
}

div.BorderMiddle {
	width:100%;
	background: url('../images/BorderMiddle.png') repeat-y left top;
 	opacity:0.9;
 	filter:alpha(opacity=100);
}

div.BorderInsideContent {
    width: 100%;
    max-width:80vw;
	min-height: 300px;
	margin: 0px 0px 0px 0px;
}

div.BorderInsideHeaderFooterContent {
	color: white;
}

div.ContentArea {
	width: 100%;
}

div.BorderBottomLeft {
	width:100%;
	height:30px;
	margin:0px auto;
	background:url('../images/BorderBottomLeftCorner.png') no-repeat left bottom;
}

div.BorderBottomRight {
	height:30px;
	background:url('../images/BorderBottomRightCorner.png') no-Repeat right bottom;
	margin: 0px 0px 0px 60px;
}

.BorderBottomLeft span{
	display:block;
	position:relative;
	right:2.5%;
	height:30px;
	background:url('../images/BorderBottomSide.png') repeat-x right bottom;
}

#zebraLn1 td {
	border-bottom: 1px dashed;
}

#zebraLn2 td {
 	border: 1px transparent;
	border-bottom: 1px dashed;
}

table.CalendarTemplate {
	width: 100%;
   	BORDER-COLLAPSE: collapse;
   	border: none;
    background-color: #ffffff;
    color: black;
}

table.CalendarTemplateAsTable {
	width: 100%;
   	 BORDER-COLLAPSE: collapse;
   	 border:1px #D3D3D3 solid;
     background-color: #ffffff;
   	 padding: 2px;
}

.CalendarRow {
	height: 90px;
}

.borderOnMouse:hover {
}

.employeePicture {
	margin-top: 30px;
}

#EmployeeImg {
    border:2px solid #C8C8C8;
}

.PictureCorners
{
height: 75px;
width: 75px;
background:url('../images/white_corners.png') no-repeat left top;
margin-top: -74px;
margin-left: 2px;
}

td.tdColored{
	background-color: #287ab3;
}

h1.colored,
h2.colored,
h3.colored,
h4.colored,
h5.colored,
h6.colored {
    color: #000000;
    border-bottom: 0px ;
}

a.HelpLink:link {  font-family: "Source Sans Pro", sans-serif; color: #287ab3; font-size:110%; text-decoration: none}
a.HelpLink:hover {  font-family: "Source Sans Pro", sans-serif; color: #4A4A4A; font-size:110%; text-decoration: none}
a.HelpLink:visited {  font-family: "Source Sans Pro", sans-serif; color: #3A6EA5; font-size:110%; text-decoration: none}

.HelpHeaderFont
{
	color: #6F6F6F;
	font-size: 18pt;
	padding-bottom: 0.5em;
}

hr {
    border: 0;
    height: 4px;
    color: #d3d3d3;
    background-color: #d3d3d3;
    margin-top: 10px;
    margin-bottom: 10px;
}

.calendarRule
{
	border-top: 1px dashed #d3d3d3;
	border-bottom: transparent;
	border-left: transparent;
	border-right: transparent;
	color: transparent;
  	background-color: transparent;
}
.msgIcon
{
    position: relative;
	bottom: -25px;
}

.MainTitle{
	padding-top: 10px;
}

.ImagesColor
{
	border: 2px solid #81A7CC;
	background-color: #4B8AAF;
	border-radius: 10px;
	height: 40px;
	padding:6px;
}

.SmallerImage {
	height:15px;
	padding:3px;
	border-radius: 100px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;
	margin-right: 3px;
}

.SearchImage {
	background-color: #4b8aaf;
	border-radius: 5px;
	height: 18px;
}

.GridImage {
	height:15px;
	padding:3px;
	border-radius: 5px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;
	margin-right: 3px;
}

.GridSpacerImage {
	width:15px;
	height:0px;
	padding:4px;
	margin-right: 3px;
}

.HoverSearchImage
{
	background-color: #000000;
	border-radius: 5px;
	height: 18px;
}

div.ui-datepicker table {
    table-layout: fixed;
}

div.ui-datepicker-header {
    height: 31px;
    padding: 3px 3px !important;
}

div.ui-datepicker-title {
    height: 31px;
    padding-top: 2px;
}

a.ui-datepicker-prev,
a.ui-datepicker-next {
    padding-top: 2px;
}

div.ui-datepicker {
    box-shadow: 0px 2px 4px 1px #ccc, 2px 0px 4px 1px #ccc;
    padding: 0px;
}

div.ui-datepicker span.ui-icon-circle-triangle-w {
    background-image: url('../images/LeftArrow.png');
    background-position: center center;
    background-size: contain;
}

div.ui-datepicker span.ui-icon-circle-triangle-e {
    background-image: url('../images/RightArrow.png');
    background-position: center center;
    background-size: contain;
}

div#ui-datepicker-div.ui-widget {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 13pt !important;
}

div.ui-datepicker, div.ui-datepicker-header {
    border: none !important;
    border-radius: 0px !important;
}

.ui-datepicker-calendar a.ui-state-hover {
    background-color: #90C0DD;
}

.ui-datepicker-header {
    background-color: #90C0DD;
}

 .ui-datepicker-week-end a.ui-state-default {
    color: red;
}

.ui-datepicker-week-end span {
    color: red;
}

#CalendarIconFromDate, #CalendarIconPeriodFromDate, .ui-datepicker-trigger
{
	margin-left: 3px;
    width: 19px;
	height: 19px;
	background-color: #4B8AAF;
    margin-bottom: 3px;
}

#CalendarIconToDate, #CalendarIconPeriodToDate
{
	margin-left: 3px;
    width: 19px;
	height: 19px;
	background-color: #4B8AAF;
	border-radius: 5px;
    margin-bottom: 3px;
}

#ToDate, #FromDate {
	margin-bottom: 5px;
    margin-left: 5px;
}

#cancelButton {
	margin-left: 0px;
}

/*Bid Request Icons*/
#ImportRequest, #RefreshRequest, #Prnt, #PrntPg, #Refresh, #EmployeeBankTypeId {
	margin-right: 0px;
}

.DetailImage
{
	height:15px;
	padding:3px;
	border-radius: 5px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;
}

.CopyImage
{
	height:15px;
	padding:3px;
	border-radius: 5px;
	border: 1px solid #81A7CC;
	background-color: #4B8AAF;
}

.MessageBorderTop
{
	border-top:2px solid #81A7CC;
	border-left:2px solid #81A7CC;

}

.MessageBorderMid
{
	border-top:2px solid #81A7CC;
	border-right:2px solid #81A7CC;

}

.MessageBorderBottom
{
	border-bottom: 2px solid #81A7CC;
	border-right:2px  solid #81A7CC;
	border-left:2px solid #81A7CC;

}

.header {
    background-color: #dee7ec;
    border-top: 1px solid #8cacbb;
    border-bottom: 1px solid #8cacbb;
    float: none;
    font-family: "Source Sans Pro", sans-serif;
    margin: 0.5em 0em 0em 0em;
    padding: 0.5em 0em 0.5em 0em;
    text-align: center;
}

.BRHeader {
    background-color: #EBEBEB;
    color: #0f2372;
    font-size: 12pt;
    padding-top: 10px;
    padding-bottom: 10px;
}

.LoginHeaderOPSWeb {
	font-family: "Source Sans Pro", sans-serif;
    font-weight: bolder;
    font-size: 32pt;
    color: white;
}

.LoginHeaderService {
	font-family: "Source Sans Pro", sans-serif;
    font-size: 12pt;
    color: white;
}

.ContentHeaderOPSWeb {
	font-family: "Source Sans Pro", sans-serif;
    font-weight: bolder;
    font-size: 21pt;
    color: white;
}

.ContentHeaderService {
	font-family: "Source Sans Pro", sans-serif;
    font-size: 8pt;
    color: white;
    font-weight: bold;
}

input[placeholder="Swipe Your Card..."]::placeholder {
    font-size: 15pt;
    color: #121e6a;
}

input[placeholder="Badge"]::placeholder {
    font-size: 15pt;
    color: #121e6a;
    background-image: url('../images/LoginBadge.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 48px) 50%;
}

input[placeholder="Username"]::placeholder {
    font-size: 15pt;
    color: #121e6a;
    background-image: url('../images/LoginBadge.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 60px) 50%;
}

input[placeholder="Password"]::placeholder {
    font-size: 15pt;
    color: #121e6a;
    background-image: url('../images/LoginPin.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 60px) 50%;
}

input[placeholder="New Password"]::placeholder {
    font-size: 15pt;
    color: #121e6a;
    background-image: url('../images/LoginPin.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 75px) 50%;
}

input[placeholder="Repeat New Password"]::placeholder {
    font-size: 15pt;
    color: #121e6a;
    background-image: url('../images/LoginPin.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 105px) 50%;
}

input:-webkit-autofill[placeholder="Password"]::placeholder {
    font-size: 15pt !important;
    color: #121e6a !important;
    background-image: none !important;
}

.LoginTextInput {
    font-size: 18pt;
    height: 50px;
    width: 85%;
    border-radius: 20px;
    background-color: #F1EEEE;
    border: 0px solid;
    text-align: center;
    box-shadow: inset -2px 2px 3px 3px #e8e4e4;
    outline: none;
}

.LoginButtonInput {
    font-size: 18pt;
    height: 52px;
    width: 87%;
    color: white;
    background-color: #121e6a;
    border-radius: 20px;
    border: 0px solid;
    box-shadow: 0px 2px 2px 2px #e8e4e4;
    background-image: url('../images/LoginKey.png');
    background-repeat: no-repeat;
    background-position: calc(50% - 50px) 50%;
    outline: none;
}

.LoginHeaderLogo {
    width: 240px;
    height: 70px;
	background: url('../images/HeaderLogo.png') no-repeat left center;
    background-size: contain;
}

.ContentHeaderLogo {
    width: 164px;
    height: 52px;
	background: url('../images/HeaderLogo.png') no-repeat left center;
    background-size: contain;
}

.LoginHeaderSeperator {
    border: none;
    width: 2px;
    padding-right: 10px;
    padding-left:  10px;
	background: url('../images/liner.gif') repeat-y center top;
}

.ContentHeaderSeperator {
    border: none;
    width: 2px;
    padding-right: 5px;
    padding-left:  5px;
	background: url('../images/liner.gif') repeat-y center top;
}

.LoginHeaderWrap {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

div.ContentHeader {
    margin-right: 16px;
}

.ContentHeaderWrap {
}

table.LoginHeader tr.LoginHeaderRow {
    display: flex;
    text-align: center;
}

table.LoginMessage tr.LoginMessageRow {
    display: flex;
}

.LoginHeaderText {
    transform: translateY(-6px);
}

.ContentHeaderText {
   transform: translate(2px, -3px);
}

table.LoginMessage {
    width: 100%;
}

.LoginMessageImgHolder {
    width: 72px;
    height: 78px;
    display: flex !important;
    align-items: center;
}

.GeneralMessageImg {
    background: url('../images/LoginCalendar.png') no-repeat center center;
    background-size: contain;
}

div.LoginMessageDate {
    font-size: 30pt;
    margin: auto;
}

.DetourMessageImg {
    background: url('../images/DetourBulletin.png') no-repeat center center;
    background-size: contain;
}

div.LoginMessageFirstLine {
    color: white;
    font-size: 18pt;
    font-family: "Source Sans Pro", sans-serif;
    padding-left: 6px;
}

div.LoginMessageSecondLine {
    color: white;
    font-size: 18pt;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: bolder;
    padding-left: 6px;
}

div.LoginMessageSeperator {
    border: none;
    height: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
	background: url('../images/liner.gif') repeat-x left center;
}

div.ContentSeperator {
    border: none;
    height: 2px;
	background: url('../images/liner.gif') repeat-x left bottom;
}

div.BlueLineSeperator {
    border: none;
    height: 2px;
	background: url('../images/blueliner.gif') repeat-x left bottom;
}

td.ExtraPayBLSeperator {
    padding-left: 9px;
}

td.LoginMessageDesc {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

td.MessageContent {
    padding-top: 220px;
}

div.BulletinMessage {
    width: 100%;
	background: url('../images/MessageBG.png') repeat-y left center;
    background-size: contain;
    text-align: left;
}

.BulletinMessageFont {
    color: white;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 12pt;
}

div.CopyRightSeperator {
    border: none;
    height: 2px;
	background: url('../images/liner.gif') repeat-x left bottom;
}

div.CopyRightPaddingLogin {
    padding-top: 100px;
}

div.CopyRightPaddingContent {
}

div.CopyRightLogo {
    width: 100%;
    height: 36px;
    background: url('../images/TrapezeCopyRightLogo.png') no-repeat center center;
}

div.NavEmployeeHeader {
    width: 100%;
    margin: auto;
    padding-bottom: 20px;
    background-color: black;
}

div.NavVMenuHolder {
}

div.ContentHeaderBar {
    display: flex;
    flex-direction: row;
}

div.ContentTitle {
    margin-right: auto;
    color: white;
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 16px;
    font-size: 20pt;
}

tr.OPSBoxLine1 {
    background-color: transparent;
    height: 6px;
}

tr.OPSBoxLine2 {
    background-color: #CCCCCC;
    height: 6px;
}

tr.OPSBoxLine3 {
    background-color: white;
}

tr.OPSBoxContentRow {
    background-color: white;
    height: 40px;
    overflow-y: scroll;

}

div.OPSAddNewButtonRow {
    background-color: white;
    height: 70px;
}

div.OPSMessagBoxHolder {
    position: relative;
    display: table;
    min-width: 322px;
    max-width: 722px;
}

div.OPSMessageBoxIconHolder,
div.OPSCalendarIconHolder,
div.OPSAbsenceRequestsIconHolder {
    position: absolute;
    top: 0px;
    left: 18px;
	background-color: #00205B;
	box-shadow: 4px 6px 10px -3px #aaa, -4px 6px 10px -3px #aaa;
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	border-bottom-left-radius:75px;
	border-bottom-right-radius:75px;
    width: 50px;
    height: 64px;
    display: flex;
}

img.OPSMessageBoxIcon {
    width: 36px;
    height: 38px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}

div.OPSContentHolder {
    position: relative;
    display: table;
    min-width: 950px;
    width: 100%;

}

img.OPSCalendarIcon {
    width: 36px;
    height: 38px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
}

div.CalendarFirstLine {
    color: #6F6F6F;
    font-size: 12pt;
}

div.CalendarSecondLine {
    color: #0F2372;
    font-size: 17pt;
}

div.CalendarMonthCaption {
    font-size: 26pt;
    font-weight: bolder;
    color: #0F2372;
    width: 280px;
    text-align: center;
    margin: auto;
}

div.SearchCalendarBar {
    width: calc(50% - 140px);
    margin-top: auto;
    margin-bottom: auto;
    padding-top: 6px;
}

div.OPSCalendarRow {
    display: flex;
    flex-direction: row;
}

img.OPSAcknowledgeMsgIcon {
    width: 36px;
    height: 32px;
    margin: auto;
    display: block;
}

td.BoxIcon {
    width: 80px;
	min-width: 68px;
}

td.BoxIconSpacing1 {
    width: 15px;
}

td.BoxIconSpacing2 {
    min-width: 80px;
}

td.EmployeeMsgSpacing {
    width: 20px;
    height: 28px;
}

td.BoxDescription {
    min-width: 190px;
    margin-top: 5px;
    margin-left: 0px;
}

td.BoxConfig {
    width: 52px;
}
td.boxAction{
  min-width: 52px;
}
div.BoxAction {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
}
div.BoxAction.noIcon{
  width: 2%;
}
td.BoxActionInfo {
    min-width: 52px;
    background: #6976A6  url('../images/info_icon.png') no-Repeat center;
}

td.BoxActionError {
    min-width: 52px;
    background: #FF0000 url('../images/warning_icon.png') no-Repeat center;
}

td.BoxActionSuccess {
    min-width: 52px;
    background-color: #5BD75B;
}

div.documentContainer{
  display: flex;
  flex-direction: column;
}
div.textActionContainer {
  display: flex;
  flex-direction: row;
  min-width: 302px;

  justify-content: space-around;
  margin-top: 10px;
  background: #EBEBEB;
}

div.MessageBoxFirstLine {
    color: #6F6F6F;
    font-size: 17pt;
}

div.MessageBoxSecondLine {
    color: #0F2372;
    font-size: 21pt;
    margin-top: -8px;
}
td.OPSMessageText {
    background-color: #EBEBEB;
    color: black;
    font-size: 11pt;
    padding:10px 12px;
    max-width: 800px;
	overflow-x: hidden;
}
div.OPSMessageText {
    background-color: #EBEBEB;
    color: black;
    font-size: 11pt;
    padding:10px 12px;
    width: 80%;
}
div.OPSMessageText.noIcon{
  width: 98%;

}
div.OPSMessageTextHolder {
    min-height: 60px;
    display: flex;
}

div.OPSErrorMessageHolder {
    min-width: 200px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
}

div.OPSMessageTextTitle {
    text-decoration: underline;
    font-weight: bold;
}

div.OPSVerticalCenter {
    margin-top: auto;
    margin-bottom: auto;
}

span.WorkInfoLabel {
    font-size: 12pt;
    color: #393838;
    padding-right: 6px;
}

span.WorkInfoDataItem {
    font-size: 12pt;
    color: #6976A6;
    font-weight: bold;
}

span.OPSCheckboxFilter {
    font-size: 12.2pt;
    font-weight: bold;
    color: #0f2372;
    padding-left: 4px;
}

table.OPSCheckboxOffset {
    /*transform: translateX(-9px);*/
}

td.WorkInfoAssignment1 {
    width: 125px;
}

td.WorkInfoAssignment2 {
    width: auto;
}

td.WorkInfoAssignmentSpacing {
    width: 20px;
}

a.WorkInfoButtonInput {
    font-size: 15pt;
    height: 32px;
    width: 100%;
    color: white;
    background-color: #6976A6;
    border: none;
    box-shadow: 0px 2px 5px 0px #7382BC;
    background-repeat: no-repeat;
    background-size: inherit;
    outline: none;
    display: inline-block;
    text-decoration: none;
    margin-top: 12px;
    text-align: center;
    padding-top: 6px;
    cursor: pointer;
}



a.WorkInfoManifestButton {
    background-image: url('../images/Manifest.png');
    background-position: calc(50% - 55px) 50%;
}

a.QuotaAvailabilityButton {
    font-size: 15pt;
    color: white;
    background-color: #6976A6;
    border: none;
    background-repeat: no-repeat;
    outline: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    background-image: url('../images/QuotaConfig.png');
    background-position: calc(50% - 90px) 50%;
    line-height: 37px;
    height: 37px;
    width: 300px;
    background-size: 24px;
    text-decoration: none;
}

div.OPSDocumentLabel {
    font-size: 15pt;
    color: #6F6F6F;
    text-align: justify;
}

a.OPSDocumentLink {
    font-size: 11pt;
    color: #6270A6;
    text-decoration: underline;
}

div.CalendarDescription {
    width: calc(50% - 220px);
    margin-left: 0px;
    padding-left: 80px;
}

div.SingleLineDescription {
    min-width: 190px;
    margin-left: 0px;
    padding-left: 80px;
    color: #0F2372;
    font-size: 22pt;
    margin-top: 8px;
    flex-grow: 1;
}

tr.THHeadCalendar {
    background-color: #EBEBEB;
    color: #565656;
    font-size: 20pt;
    font-weight: 100;
    border: none;
    height: 39px;
    vertical-align: middle;
}

td.CalendarDayHeader {
    padding-left: 8px;
    text-align: left;
    width: 14%;
}

td.CalendarWeekSeperator {
    width: 100%;
    height: 1px;
    background-color: #D3D3D3;
}

td.CalendarDaySeperator {
    height: 100%;
    width: 1px;
    background-color: #D3D3D3;
}

td.CalendarDayHeaderSeperator {
    height: 100%;
    width: 1px;
    background-color: #EBEBEB;
}

table.FixedWidth {
    table-layout: fixed;
}

table.FixedWidth td {
    overflow: hidden;
}

div.OPSCalendarDateLine {
    display: flex;
}

span.OPSCalendarDateValue {
    font-size: 18pt;
    color: #565656;
    margin-left: 10px;
}

span.OPSCalendarDateStatus {
    font-size: 18pt;
    font-weight: bolder;
    color: #0F2372;
    margin-right: 8px;
    flex-grow: 1;
    text-align: right;
}

span.OPSCalendarWorkInfoLabel {
    font-size: 11pt;
    color: white;
    font-weight: bold;
}

span.OPSCalendarWorkInfoTime {
    font-size: 1em;
    color: white;
    font-weight: normal;
}

div.OPSCalendarWorkInfo {
    background-color: #6573A7;
    border: none;
    box-shadow: 0px 3px 4px 0px #B0BADD;
    width: 90%;
    margin-bottom: 10px;
}

div.OPSCalendarPassRunInfo {
    background-color: #6573A7;
    border: none;
    box-shadow: 0px 3px 4px 0px #B0BADD;
    width: 90%;
    margin-bottom: 10px;
}

div.OPSCalendarAbsenceInfo {
    background-color: #687b6f;
    border: none;
    box-shadow: 0px 3px 4px 0px #9ea29b;
    width: 90%;
    margin-bottom: 10px;
}

div.OPSCalendarDayoffInfo {
    background-color: #63635F;
    border: none;
    box-shadow: 0px 3px 4px 0px #86878C;
    width: 90%;
    margin-bottom: 10px;
}

div.OPSCalendarExtraPayInfo {
    background-color: #765DBA;
    border: none;
    box-shadow: 0px 3px 4px 0px #AE97C5;
    width: 90%;
    margin-bottom: 10px;
}

div.OPSCalendarExtraWorkInfo {
    background-color: #6573A7;
    border: none;
    box-shadow: 0px 3px 4px 0px #B0BADD;
    width: 90%;
    margin-bottom: 10px;
}


div.OPSCalendarTrainingInfo {
    background-color: rgb(194, 158, 82);
    border: none;
    box-shadow: 0px 3px 4px 0px rgb(233, 207, 153);
    width: 90%;
    margin-bottom: 10px;
}


table.OPSCalendarWorkInfoTable {
    width: 100%;
    text-align: center;
    margin-top: 4px;
    margin-bottom: 4px;
}

img.OPSCalendarDriverPaddleIcon {
    width: 19px;
    height: 18px;
    margin: 2px;
}

img.OPSCalendarDriverPaddleIconDisabled {
    width: 19px;
    height: 18px;
    margin: 2px;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

span[id*="-button"]:not([id="Year-button"]):not([id="Month-button"]):not([id="WorkSortType-button"]) {
    background-color: transparent;
    border-radius: 0px;
    font-size: 15pt !important;
    padding: 0px;
    height: 39px;
    line-height: 39px;
    text-align: left;
    padding-left: 8px;
    color: #0F2372;
    min-width: 290px;
}

span#VolunteerTypeId-button {
	width: 420px;
	font-size: 14pt !important;
}

span#SelectedWorkId-button {
    width: 420px;
}

#FromTimeHourDropDown-button, #FromTimeMinuteDropDown-button, #FromTimeMeridiemDropDown-button,
#ToTimeHourDropDown-button, #ToTimeMinuteDropDown-button, #ToTimeMeridiemDropDown-button {
    background-color: transparent;
    border-radius: 0px;
    font-size: 16pt !important;
    padding: 0px;
    width: 70px !important;
    min-width: 70px !important;
    height: 39px;
    line-height: 39px;
    text-align: center;
    color: #0F2372;
}


span#FromTimeHourDropDown-button.ui-button,
span#ToTimeHourDropDown-button.ui-button {
    margin-right: 0px;
}

span#FromTimeMinuteDropDown-button.ui-button,
span#ToTimeMinuteDropDown-button.ui-button {
    margin-right: 4px;
}

ul[id*="-menu"] {
    text-align: left;
    max-height: 244px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14.2pt;
}

#AbsenceTypeId-button.ui-state-disabled,
#SelectedWorkId-button.ui-state-disabled {
    opacity: 1;
    background-color: #F6F6F6;
}

div.OPSDatePickerHolderOnForm {
    border: 1px solid #c5c5c5;
    width: 172px;
    background-color: transparent;
}

div.OPSDatePickerHolder {
    border: none;
    width: 190px;
    background-color: transparent;
    margin-right: 20px;
    margin-left: 6px;
}

div.OPSDatePickerHolder:hover, div.OPSDatePickerHolder:focus {
    background-color: #F6F6F6;
    box-shadow: 0px 0px 6px 0px #d3d3d3;
    border-radius: 6px;
}

.OPSCheckboxHolder {
    border: none;
    background-color: transparent;
    margin-left: 4px;
    position: relative;
    overflow: hidden;
}

label.OPSFormCheckboxInput2.ui-checkboxradio-label {
    border-radius: 0px;
    color: #0f2372;
    font-size: 12.2pt;
    border: none;
    background-color: transparent;
    padding: 0px;
}

label.ui-checkboxradio-label {
    border-radius: 0px;
    color: #0f2372;
    font-size: 12.2pt;
    border: none;
    background-color: transparent;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 6px;
    padding-right: 6px;
}

label.OPSFormCheckboxInput,
label.OPSFormCheckboxInput2 {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    white-space: nowrap;
}

label.OPSFormCheckboxInput:hover,
label.OPSFormCheckboxInput.ui-checkboxradio-checked {
    color: white !important;
    background-color: #6976A6 !important;
    border-radius: 3px;
}

label.OPSFormCheckboxInput2:hover,
label.OPSFormCheckboxInput2.ui-checkboxradio-checked {
    border-radius: 3px;
    background-color: transparent;
    color: transparent;
}

label.OPSFormCheckboxInput:hover {
    box-shadow: 0px 1px 8px 0px #a5b1ee !important;
}

label.OPSFormCheckboxInput2 span.ui-checkboxradio-icon:hover {
    box-shadow: 0px 1px 8px 0px #a5b1ee !important;
}

label.ui-checkboxradio-label span.ui-checkboxradio-icon.ui-state-checked {
    background-color: white;
}

label.ui-checkboxradio-label span.ui-check-icon {
    background-color: #eee;
    margin-top: 0px;
}

span#Year-button {
    width: 100px;
    height: 39px;
}

span#Month-button {
    width: 150px;
    height: 39px;
}

span#Month-button,
span#Year-button {
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 18pt !important;
    color: #6F6F6F !important;
    padding: 2px !important;
    text-align: right !important;
    height: 35px;
    border: none;
    background-color: transparent;
    margin-left: 3px;
}

span.ui-selectmenu-icon {
   background-image: url('../images/DownArrow.png') !important;
   background-position: center !important;
   width: 24px !important;
   height: 100% !important;
}

span#WorkSortType-button span.ui-selectmenu-icon {
    background-image: url('../images/DownArrowW.png') !important;
    background-size: contain;
}

span#SelectedRoster-button span.ui-selectmenu-icon {
    background-image: url('../images/DownArrowW.png') !important;
    background-size: contain;
}

img.OPSSearchImage {
    width: 32px;
	height: 32px;
    margin: auto;
}

img.OPSAddNewImage {
    width: 48px;
	height: 48px;
    margin: auto;
}

a.OPSSearchButtonInput {
    height: 48px;
    width: 48px;
    color: white;
    background-color: #6976A6;
    border: none;
    outline: none;
    display: flex;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 1px 1px 8px 0px #d3d3d3, -1px 1px 8px 0px #d3d3d3, 1px -1px 8px 0px #d3d3d3;
    opacity: .86;
}

a.OPSSearchButtonInput:hover,
a.OPSSearchButtonInput:focus {
    box-shadow: 1px 1px 8px 0px #bbb, -1px 1px 8px 0px #bbb, 1px -1px 8px 0px #bbb;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

a.OPSAddNewButtonInput {
    height: 48px;
    width: 48px;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #0f2372;
    border-radius: 50%;
    display: flex;
    box-shadow: 1px 1px 8px 0px #d3d3d3, -1px 1px 8px 0px #d3d3d3, 1px -1px 8px 0px #d3d3d3;
    opacity: .88;
    margin-right: 21px;
    margin-top: 10px;
}

a.OPSAddNewButtonInput:hover,
a.OPSAddNewButtonInput:focus {
    box-shadow: 1px 1px 8px 0px #a3a3a3, -1px 1px 8px 0px #a3a3a3, 1px -1px 8px 0px #a3a3a3;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

div.OPSTileInfoButtonHolder {
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-left: 130px;
}

a.OPSTileInfoButton {
    height: 48px;
    width: 48px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #0f2372;
    border-radius: 50%;
    box-shadow: 1px 1px 8px 0px #d3d3d3, -1px 1px 8px 0px #d3d3d3, 1px -1px 8px 0px #d3d3d3;
    display: inline-flex;
    margin-left: 10px;
    margin-right: 10px;
    opacity: .88;
}

a.OPSTileInfoButton:hover,
a.OPSTileInfoButton:focus {
    box-shadow: 1px 1px 8px 0px #a3a3a3, -1px 1px 8px 0px #a3a3a3, 1px -1px 8px 0px #a3a3a3;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

div.OPSSearchButtonHolder {
    min-width: 60px;
    padding-right: 15px;
}

div.OPSAddNewButtonHolder {
    min-width: 60px;
    display: flex;

    flex-direction: row-reverse;
}

div.CalendarSearchFilterBar {
    padding-top: 4px;
    padding-bottom: 0px;
    display: inline-block;
}

div.FromDateSearchFilterBar {
    margin-top: 4px;
    margin-bottom: 0px;
    display: flex;
}

input.FilterFromToDateInput {
    border: none;
    padding: 0px;
    background-color: transparent;
    font-size: 20pt;
    vertical-align: middle;
    width: 142px;
    text-align: left;
}

input.FilterFromToDateInputOnForm {
    border: none;
    padding: 0px;
    background-color: transparent;
    font-size: 18pt;
    vertical-align: middle;
    width: 126px;
    text-align: left;
}

div.OPSDatePickerHolder img.ui-datepicker-trigger,
div.OPSDatePickerHolderOnForm img.ui-datepicker-trigger {
    width: 36px;
	height: 36px;
	background-color: transparent;
}

div.OPSDatePickerHolder img.ui-datepicker-trigger {
    margin-top: -10px;
}

img.OPSGridImage {
	width: 28px;
    height: 28px;
    border: none;
	background-color: transparent;
}

img.OPSImageWithBG {
	width: 24px;
    height: 24px;
    border: none;
	background-color: #6976a6;
    border-radius: 3px;
}

img.OPSImageWithBG:hover, img.OPSImageWithBG:focus {
    background-color: #0041a5;
    box-shadow: 0px 0px 6px 0px #6976a6;
}

img.OPSGridImageSmall {
	width: 25px;
    height: 25px;
    border: none;
	background-color: transparent;
}

img.OPSGridImage:hover, img.OPSGridImage:focus {
    background-color: #0041a5;
    box-shadow: 0px 0px 6px 0px #6976a6;
    border-radius: 3px;
}

img.OPSGridImageSmall:hover, img.OPSGridImageSmall:focus {
    background-color: #0041a5;
    box-shadow: 0px 0px 6px 0px #6976a6;
    border-radius: 3px;
}

.OPSFormColorBlue {
    color: #0F2372 !important;
}

.OPSTextEditorFont {
    font-size: 14pt !important;
    min-width: 298px;
    padding: 0px;
}

div.OPSErrorMessage {
    margin-top: auto;
    margin-bottom: auto;
    font-size: 14pt;
    color: red;
}

div.OPSInfoMessage {
    margin-top: auto;
    margin-bottom: auto;
    font-size: 14pt;
    color: #0f2372;
}

div.OPSSuccessMessage {
    margin-top: auto;
    margin-bottom: auto;
    font-size: 14pt;
    color: #228B22;
}

.OPSFormTextLabel {
	color: #565656;
	font-size: 15pt;
	white-space: nowrap;
	text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    align-self: center;
}

.OPSFormTextLabelSmall {
	color: #0F2372;
	font-size: 14pt;
    font-weight: bold;
	text-align: left;
}

.OPSFormHeader {
	display: block;
	padding-left: 10px;
	font-weight: bold;
	color: #565656;
	font-size: 15pt;
	white-space: nowrap;
	text-align: left;
    align-self: center;
}

.OPSVolunteerDetailFormHolder {
	padding-right:50px;
}

.OPSVolunteerUpdateComment {
	font-size: 12pt ! important;
}

.OPSAbsenceBRLegend {
	color:#0F2372;
	border:none;
	font-size:11.6pt;
	color:black;
}

.OPSAbsenceBRLegendRow {
	display: table-cell;
}

.OPSAbsenceBRLegendColorCode {
	padding:10px 10px;
	font-size: 0px;
	vertical-align: middle;
	width: 20px;
}

.OPSAbsenceBRLegendLabel {
	padding-left:10px;
	padding-right:10px;
}

.AbsenceRequestLabelWidth,
.AllowanceLabelWidth,
.OPSEmployeeInfoLabelWidth,
.OPSVolunteerLabelWidth,
.OPSWorkSignOnOffLabelWidth1,
.OPSWorkSignOnOffLabelWidth2 {
    width: 200px;
}

.OPSAbsenceBidRequestLabelWidth,
.OPSEmployeeInfoLongLabelWidth {
	width: 300px;
}

.OPSAbsenceBidInput {
	font-size: 15pt !important;
    width: 100%;
    height: 33px;
    padding-left:8px;
}

.OPSBRFilterLabelWidth {
    width: 112px;
    display: inline-block;
}

.ExtraPayLabelWidth, .BankingTimeLabelWidth {
    width: 250px;
}

.OPSFormTextValue {
	color: #0F2372;
	font-size: 17pt;
	text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.OPSFilterTextValue {
	color: #0F2372;
	font-size: 12.2pt;
	text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    line-height: 30px;
}

.OPSFilterTextValueSmall {
	color: #0F2372;
	font-size: 10.6pt;
    font-weight: bold;
	text-align: left;
    padding-left: 8px;
    padding-right: 8px;
    height: 24px;
    line-height: 24px;
    align-self: center;
}

.OPSFormTextWidth {
    width: 278px;
}

.OPSFormTextBorder {
	border: 1px solid #C5C5C5;
    width: -moz-fit-content;
    width: fit-content;
}

.OPSButton {
    font-size: 13.2pt;
    font-weight: bold;
    height: 37px;
    color: white;
    background-color: #00205B;
    border: 0px solid;
    box-shadow: 1px 1px 4px #5c6788;
    outline: none;
    width: 100px;
    margin-right: 12px !important;
    cursor: pointer;
}

.OPSButtonSmall {
    font-size: 10.6pt;
    font-weight: bold;
    height: 24px;
    color: white;
    background-color: #121e6a;
    border: 0px solid;
    box-shadow: 1px 1px 3px #5c6788;
    outline: none;
    width: auto;
    cursor: pointer;
}

input.OPSButton:disabled,
input.OPSButtonSmall:disabled {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

table.OPSButtonHolder {
    margin-top: 12px;
    margin-bottom: 12px;
}

div.OPSForm-left-right-holder{
    display:flex;

}
iframe#absence-quota-availability{

    width: 45%;
    height: 500px;
    border: 0;
    margin-left: 50px;
    display: none;
}
table.OPSFormHolder {
    border-spacing: 5px;
    border: none;
    padding-left:10px;
    overflow-y: scroll;
}

span.OPSTimeSeperator {
	color: #0F2372;
	font-size: 16pt;
	text-align: center;
    line-height: 100%;
    vertical-align: middle;
}

span.OPSDisableFormInputStyle
{
	opacity: 0.5;
	
}
span.OPSDisableFormInputAction
{
	pointer-events: none;
}

div.OPSFormInputHolder {
    display: flex;
    flex-direction: row;
    align-items: center;
    color:#0F2372;
}

div.OPSFormInputHolder2 {
    display: flex;
    flex-direction: row;
    margin-bottom: 0px;
}

textarea.input {
    max-width: 800px;
}

.ui-state-disabled.ui-menu-item {
  display: none;
}

img.OPSSeverityImage {
    width: 28px;
    height: 28px;
}

img.OPSTileInfoImage {
    width: 30px;
    height: 30px;
    margin: auto;
}

img.OPSWarningImage {
    width: 20px;
    height: 20px;
    vertical-align: bottom;
}

img.OPSLockImage {
    border: none;
    vertical-align: baseline;
}

label.OPSFromToDateLabel {
    display: block;
    font-size: 11pt;
    color: #0f2372;
    text-align: left;
    padding-left: 4px;
    padding-top: 1px;
}

label.OPSCheckboxOnFilterLabel {
    display: block;
    font-size: 11pt;
    color: #0f2372;
    text-align: left;
    padding-left: 2px;
    margin-bottom: 0px;
}

table.OPSFromDateOnLeft {
    float: left;
    height: 100%;
}

table.OPSAbsenceTypeOnLeft {
    float: left;
    height: 100%;
}

table.OPSFilterOnLeft {
    float: left;
    height: 100%;
    margin-right: 2px;
}

table.OPSStayOnBottom {
}

td.DALPrintButton {
    text-align: center;
}

tr.OPSMobileTitleBar {
    background-color: #6573A7;
    font-size: 12pt;
    font-weight: bold;
    color: white;
}

tr.OPSMobileDataBar {
    color: #0f2372;
    font-size: 12pt;
    background-color: white;
}

span#Month-button:hover, span#Month-button:focus,
span#Year-button:hover, span#Year-button:focus {
    box-shadow: 0px 0px 6px 0px #d3d3d3;
    border-radius: 6px;
    border: none;
    background-color: #F6F6F6;
}

td.AbsenceTypeOnFilterBar {
}

td.BidContextOnFilterBar,
td.OPSTextBoxOnFilterBar {
    vertical-align: top;
}

td.AbsenceTypeOnFilterBar span#AbsenceTypeId-button,
td.AbsenceTypeOnFilterBar span#EBTypeId-button,
td.AbsenceTypeOnFilterBar span#VolunteerTypeId-button,
td.BidContextOnFilterBar span#bidId-button,
td.BidContextOnFilterBar span#IntentBidId-button,
div.OPSBidUnit span#AddNewBR-button {
    font-size: 12.2pt !important;
    min-width: 160px;
    height: 30px;
    line-height: 30px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0px;
}

td.BidContextOnFilterBar span#IntentBidId-button {
    width: 380px;
    font-size: 11.2pt !important;
}

div.AbsenceTypeOnFilterHolder {
    height: 39px;
    display: block;
    margin-right: 10px;
}

div.BidContextOnFilterBar {
    height: 39px;
    display: block;
}

td.OnTimePerformanceLabel {
    border-top: none !important;
    border-bottom: 1px solid #393838 !important;
}

span.OnTimePerformanceTitle {
    font-size: 16pt;
    font-weight: normal;
    color: #393838;
}

.HighlightColor {
    color: white !important;
}

.OPSErrorMessageShadow {
    box-shadow: 0 1px 4px 0px #999;
    margin-bottom: 4px;
}

div.OPSHeader {
    background-color: #EBEBEB;
    color: #0f2372;
    font-size: 12pt;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
}

div.OPSCountDownHeader {
    color: red;
    font-size: 16pt;
	font-weight: bold;
    text-align: Right;
}

div.OPSBRLineGroupWidth,
div.OPSBRRosterTypeWidth {
    width: 100px;
    height: 28px;
}

div.OPSBRDivisionWidth,
div.OPSBRDayOffWidth {
    width: auto;
    height: 28px;
}

div.OPSBRDivisionWidth2 {
    width: auto;
    height: 20px;
}

div#WorkTypesFilter h3.ui-accordion-header,
div#WorkTypesFilter div.ui-accordion-content,
div#RosterTypesFilter h3.ui-accordion-header,
div#RosterTypesFilter div.ui-accordion-content,
div#LineGroupsFilter h3.ui-accordion-header,
div#LineGroupsFilter div.ui-accordion-content,
div#DaysOffFilter h3.ui-accordion-header,
div#DaysOffFilter div.ui-accordion-content,
div#DivisionsFilter h3.ui-accordion-header,
div#DivisionsFilter div.ui-accordion-content {
    border-radius: 0px;
    border: 1px solid #C5C5C5;
    background-color: white;
    color: #0f2373;
    font-family: "Source Sans Pro", sans-serif;
	font-size: 10.2pt;
    padding: 6px;
    width: 100%;
}

div#WorkTypesFilter h3.ui-accordion-header,
div#RosterTypesFilter h3.ui-accordion-header,
div#LineGroupsFilter h3.ui-accordion-header,
div#DaysOffFilter h3.ui-accordion-header,
div#DivisionsFilter h3.ui-accordion-header {
    font-size: 12pt;
}

div#WorkTypesFilter h3.ui-accordion-header,
div#RosterTypesFilter h3.ui-accordion-header,
div#LineGroupsFilter h3.ui-accordion-header,
div#DaysOffFilter h3.ui-accordion-header,
div#DivisionsFilter h3.ui-accordion-header,
div#BidUnitsFilter {
    background-color: #f6f6f6;
    margin-top: 0px;
}

div#WorkTypesFilter h3.ui-accordion-header-active,
div#RosterTypesFilter h3.ui-accordion-header-active,
div#LineGroupsFilter h3.ui-accordion-header-active,
div#DaysOffFilter h3.ui-accordion-header-active,
div#DivisionsFilter h3.ui-accordion-header-active {
    border-bottom: none;
}

.OPSCheckboxVAlign,
span.ui-checkboxradio-icon-space {
    vertical-align: text-bottom;
}

span.ui-accordion-header-icon {
    float: right;
}

span.ui-checkboxradio-icon.ui-icon-blank {
    background-color: #ddd;
}

span.ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-image: url('../images/Expand.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    margin-top: auto;
    margin-bottom: auto;
}

span.ui-accordion-header-icon.ui-icon-triangle-1-s {
    background-image: url('../images/Unexpand.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 28px;
    height: 28px;
    margin-top: auto;
    margin-bottom: auto;
}

div#DetailFilter span.ui-accordion-header-icon.ui-icon-triangle-1-e {
    background-image: url('../images/Expand.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

div#DetailFilter span.ui-accordion-header-icon.ui-icon-triangle-1-s {
    background-image: url('../images/Unexpand.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

div.FlexWrapItem span.OPSCheckboxHolder .ui-icon-blank {
    background-position: 16px 16px;
}

div.FlexWrapItem span.OPSCheckboxHolder .ui-icon-check {
    background-position: -64px -144px;
}

div#WorkTypesFilter,
div#RosterTypesFilter,
div#LineGroupsFilter,
div#DaysOffFilter,
div#DivisionsFilter {
    margin-left: 10px;
    width: 52%;
}

div#BidUnitsFilter {
    margin-left: 10px;
    width: calc(52% + 12px);
}

div.OPSSortByFilterHolder {
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    background-color: #f6f6f6;
    width: calc(52% + 12px);
}

div.OPSSortByFilter {
    margin-top: 7px;
    margin-bottom: 7px;
}

span#WorkSortType-button {
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 12.8pt;
    border: none;
    background-color: #6976a6;
    border-radius: 3px;
    height: 24px !important;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    width: auto;
    min-width: 120px;
}

span#WorkSortType-button span.ui-selectmenu-text {
	padding-left:2px;
	padding-right:10px;
}

span#SelectedRoster-button {
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 12.8pt;
    border: none;
    background-color: #6976a6;
    border-radius: 3px;
    height: 50px !important;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    width: auto;
	width: 80% !important;
}

span#SelectedRoster-button span.ui-selectmenu-text {
	padding-left:10px;
	padding-right:10px;
	padding-top: 5px;
}

li.ui-menu-item.RosterCBItem {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}

li.ui-menu-item.RosterCBHeader {
	font-size: 12.8pt;
	text-align: left;
	width: 98%;
	color: #0F2372;;
}

.ui-menu-item.RosterCBItem .ui-menu-item-wrapper {
  	padding: 1em 2px;
  	flex: 1 1 auto;
}

.ui-menu-item.RosterCBItem .ui-menu-item-wrapper.ui-state-active {
  	border-width: 1px 0 1px 0;
  	border-color: #CCCCCC;
  	background-color: #E4EBF1;
  	color: #000;
}

.ui-menu-item.RosterCBUsed .ui-menu-item-wrapper.ui-state-active {
	color: red;
}

.ui-menu-item.RosterCBItem div.ui-menu-item-wrapper {
  	padding-left: 15px;
  	font-weight: bold;
  	width: 12%;
}

.ui-menu-item .RosterCBInfo {
	width: 12%;
}

.RosterCBUsed {
	color: red !important;
}

a.OPSViewRosterDetailButton {
    height: 48px;
    width: 48px;
    color: white;
    background-color: #6976A6;
    border: none;
    outline: none;
    display: flex;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 1px 1px 8px 0px #d3d3d3, -1px 1px 8px 0px #d3d3d3, 1px -1px 8px 0px #d3d3d3;
    opacity: .86;
}

a.OPSViewRosterDetailButton:hover,
a.OPSViewRosterDetailButton:focus {
    box-shadow: 1px 1px 8px 0px #bbb, -1px 1px 8px 0px #bbb, 1px -1px 8px 0px #bbb;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

a.OPSViewRosterDetailButtonDisabled {
	background-color: grey;
}

div.OPSBidUnitsFilter,
div.OPSBRValidationHolder {
    margin-top: 6px;
    margin-bottom: 6px;
}

div#WorkTypesFilter div.FlexWrap,
div#LineGroupsFilter div.FlexWrap,
div#DaysOffFilter div.FlexWrap,
div#DivisionsFilter div.FlexWrap {
    height: auto !important;
}

div.OPSBRFilterHeader {
    color: #0f2372;
    background-color: transparent;
    font-size: 12pt;
    margin-left: 10px;
    margin-top: 9px;
    float: left;
}

div.OPSBRFilterItem {
    color: white;
    background-color: #6976A6;
    border-radius: 3px;
    font-size: 12pt;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
    padding-top: 1px;
    padding-bottom: 1px;
}

.OPSBRSelectedValuesHolder {
	visibility:hidden;
	height:0px
}

div.OPSBRActionButtons {
    padding-left: 10px;
    width: 42%;
}

div.OPSBRPageButtons {
    padding-right: 8px;
    width: 42%;
}

div.OPSSubHeader {
    padding-top: 0px;
    font-size: 10.2pt;
    font-weight: bold;
    color: #0f2372;
}

tr.OPSBoxEndLine {
    height: 6px;
    background-color: #6976a6;
}

label.OPSBRCheckboxLabel {
    height: 16px;
    display: inherit;
}

label.OPSBRCheckboxLabel2 span.ui-checkboxradio-icon.ui-icon-blank {
    background-color: #bebebe;
    width: 18px;
    height: 18px;
    margin-top: auto;
    margin-bottom: auto;
    box-shadow: none;
}

label.OPSBRCheckboxLabel span.ui-checkboxradio-icon.ui-icon-blank,
label.OPSBRCheckboxLabel2 span.ui-checkboxradio-icon.ui-icon-blank {
    background-color: #bebebe;
}

label.OPSBRCheckboxLabel2:hover span.ui-checkboxradio-icon.ui-icon-blank,
label.OPSFormCheckboxInput2.ui-checkboxradio-label span.ui-checkboxradio-icon.ui-state-checked {
    background-color: #6976a6;
    width: 18px;
    height: 18px;
    margin-top: auto;
    margin-bottom: auto;
    box-shadow: none;
}

label.OPSBRCheckboxLabel:hover span.ui-checkboxradio-icon.ui-icon-blank {
    background-color: white;
}

label.OPSBRCheckboxLabelless span.ui-checkboxradio-icon-space {
	display:none;
}

label.OPSFormCheckboxInput2 span.ui-state-checked,
label.OPSFormCheckboxInput2:hover span.ui-state-checked {
    background-image: url(images/ui-icons_ffffff_256x240.png);
    background-position: -63px -144px;
}

span.OPSBRRequestGroup {
    color: white; 
    background-color: #aaa;
    font-weight: bold;
    width: 19px;
    padding-right: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
    display: inline-block;
}

span.OPSBRRequestGroupGrant {
	color: green;
    background-color: #aaa;
    font-weight: bold;
    width: 19px;
    padding-right: 1px;
    padding-bottom: 1px;
    border-radius: 3px;
    display: inline-block;
}

.OPSTileInfoText {
    font-size: 20pt;
    font-weight: bolder;
    color: #0f2372;
    min-height: 40px;
}

.OPSTileInfoText2 {
    font-size: 16pt;
    color: #5e5e5e;
    min-height: 30px;
}

.OPSTileInfoText3 {
    font-size: 16pt;
    color: #0f2372;
}

.OPSTileInfoText4 {
	font-size:14pt;
	font-weight:normal;
	color: #5e5e5e;
	min-height: 35px;
	padding-left:20px;
}

.OPSTileInfoText4InlineData {
	font-size: 17pt;
	font-weight: bolder;
	color: #0f2372;
	padding-left:4px
}

.OPSTileInfoItem {
    position: relative;
    width: 250px;
    margin: 8px 12px;
    cursor: pointer;
}

div.OPSTileInfoHolder {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

div.OPSVolunteerStatusLockImgHolder {
    margin-left: 11px;
}

td.OPSVolunteerStatusDate {
    width: 39px;
}

td.OPSVolunteerDetailHolder {
    display: flex !important;
    flex-direction: column;
    border: none !important;
}

div.OPSBRComboBoxContainer {
	border-radius: 3px;
	width: 100%;
}

div.OPSBRComboBox {
	background-color: #6976A6;
	color: white;
	cursor: pointer;
	margin-top: 5px;
	border-radius:3px;
	width: 175px;
}

div.OPSBRComboBox input {
	background-color: #6976A6;
	border: none;
	color: white;
	width: 125px;
}

 div.OPSBRComboBoxDropdown {
	position: absolute;
	max-width: 350px;
	max-height: 150px;
	overflow: auto;
	z-index: 999;
}
div.closeBtn{
  text-align: right;
  background: #333f48;
  width: 100%;
  height: 30px;
}
div.closeBtn > span{
  font-size: 2em;
  margin-left: 40px;
}
div.tableContainer{
  overflow-y: scroll;
  background: white!important;
  height:570px!important;
}
div.OPSBRComboBoxDropdown.modal {
  margin-left: 0px;
  position: fixed;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 600px;
  max-width: none!important;
  max-height: none!important;
  top: 200px;
  width: 600px;
  left: calc(50% - 250PX);
  box-shadow: rgba(0, 0, 0, 0.2) 17px 14px 8px 0px;
  border:1px solid black;
}
tr.OPSBRComboBoxItem {
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: white;
	color: black;
	cursor: pointer;
}

tr.OPSBRComboBoxItem:hover {
	background-color: #007FFF;
	color: white;
}

td.OPSBRComboBoxItemDetail {
}

li.OPSHelpTab a {
	font-size: 16px;
	color: #0F2372;
}

/* li.OPSHelpTab.ui-tabs-active,
li.OPSHelpTab.ui-tabs-active a {
	color: #FFF!important;
	background-color: #0F2372!important;
	border-color: #0F2372!important;
} */

div.OPSHelpTabContent {
	display:none;
	height:440px;
	overflow-y:scroll
}

table.OPSFooterMessage {
    background-color: transparent;
}

td.OPSFooterMessageText {
    text-align: center;
    padding-top: 9px;
    padding-bottom: 9px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

}

tr.OPSBoxLineAssignment {
    display: table-row;
}

div.OPSCountDownBannerHolder {
    font-size: 12.8pt;
    box-shadow: 0 -1px 0px 0px #fff, 0 1px 0px 0px #999;
    margin-top: 1px;
    margin-bottom: 1px;
    overflow: hidden;
    width: 100%;
    height: auto;
    text-align: left;
    background-color: #F1F1F1;
}

p.OPSCountDownBanner {
    margin-top: 2px;
    margin-bottom: 2px;
}

div.OPSLoginHelpMessage {
    font-size: 11pt;
    border-radius: 5px;
	border: 1px white solid;
    margin-bottom: 24px;
    width: 100%;
}

span.OPSSignOnMessageText {
    font-size: 14pt;
}

span.WorkSignOnOffText {
    font-size: 15pt;
    color: #6976A6;
    font-weight: bold;
}

div.OPSWorkSignOnOffHolder {
    display: flex;
    flex-direction: row;
}

div.OPSWorkSignOnOffTextHolder {
    display: flex;
    flex-direction: row;
}

table.OPSWorkSignOnOffTopAdjustment {
    margin-top: 0px;
}


/* Any device with width less than 969 px */
@media screen and (max-width: 969px) {

	/* 2px border between each "row" */
	.zebraLn2, .zebraLn1 {
		border-bottom: #D3D3D3 2px solid;
	}

	/* No bottom border on last "row" */
	.zebraLn1:last-of-type, .zebraLn2:last-of-type {
		border-bottom: initial;
	}

	/* Losing screen size on mobile devices*/
	td.loginSecondaryColor {
		padding-top: 30px;
	}

    td.LoginHeader {
	    padding-top: 30px;
    }

	div.BorderInsideContent {
		margin:0px 0px 0px 0px;
        width: 100%;
	}

	div.BorderWrap {
		padding: 1px;
        width: 98%;
	}

	textarea.input {
        max-width: 90vw;
	}

	div.headerNameFont {
	    font-size: 9pt;
	    font-weight: bold;
	}

	div.headerBadgeFont {
	    font-size: 8pt;
	    font-weight: bold;
        margin-bottom: 0px;
	}

	div.headerDivisionFont {
	    font-size: 9pt;
	}

	font.fontPrimaryColor {
	    color: 	#ffffff;
	    font-size: 10pt;
	}

	td.employeeHeaderMobileLogo {
		display: block;
		width: 150px;
	}

	td.employeeHeaderMobileText {
		display: table-cell;
	}

	td.employeeHeaderDesktopLogo {
	    display: none;
	    width: auto;
	}

	td.employeeHeaderDesktop {
	    display: none;
	    width: auto;
	}

	td.LoginTable {
		width: 100%;
		background-color: transparent;
        padding-left:0px;
        padding-right:0px;
	}

	table.LoginTable {
		width: 88%;
	}

    table.LoginHeader {
        width: 88%;
    }

    table.LoginMessage {
        width: 88%;
        margin: auto;
    }

	td.MessageContent {
		min-height: 200px;
        background-color: transparent;
        padding-top: 30px;
	}

    table.CalendarTemplate {
	    width: 100%;
   	    BORDER-COLLAPSE: collapse;
   	    border: none;
        background-color: #ffffff;
	}

	.CalendarRow {
		height: auto;
	}

	.CalendarDate {
		border:1px #D3D3D3 solid;
	}

    #cancelButton {
	    margin-left: 0px;
    }

    .LoginHeaderOPSWeb {
        font-size: 6.6vw;
        text-align: center;
    }

    .LoginHeaderService {
        font-size: 2.8vw;
        text-align: center;
    }

    .LoginHeaderLogo {
        width: 42vw;
        height: 12vw;
    	background: url('../images/HeaderLogo.png') no-repeat center center;
        background-size: contain;
        margin: auto;
    }

    .LoginHeaderText {
        transform: translateY(-3px);
    }

    div.CopyRightSeperator {
        margin: auto;
    }

    div.CopyRightPaddingLogin {
        padding-top: 50px;
        width: 88%;
    }

    div.NavEmployeeHeader {
        display: none;
    }

    td#navMenu {
        text-align: left;
        vertical-align: middle;
    }

    #navMenuImg {
        padding-left: 10px;
        width: 40px;
        height: 40px;
    }

    .employeePicture {
	    margin-top: 9px;
        margin-right: 9px;
        margin-left: 5px;
    }

    div.NavVMenuHolder {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    td.OPSBoxWrap {
        text-align: left;
    }

    table.CalendarTemplate tr.THHeadCalendar,
    table.CalendarTemplate td.CalendarWeekSeperator,
    table.CalendarTemplate td.CalendarDaySeperator,
    table.CalendarTemplate td.CalendarDayHeaderSeperator,
    table.CalendarTemplate td.CalendarDayHeader,
    div.CalendarMonthCaption {
        display: none;
    }

    div.OPSCalendarDateLine {
        width: 100%;
        height: 23px;
        line-height: 23px;
        display: flex;
    }

    span.OPSCalendarDateValue {
        font-size: 12pt;
        color: #242222;
        margin-left: 0px;
    }

    span.OPSCalendarDateStatus {
        font-size: 12pt;
        font-weight: bolder;
        color: #0F2372;
        margin-right: 6px;
        flex-grow: 1;
        text-align: right;
    }

    div.CalendarDescription {
        width: calc(100% - 80px);
    }

    div.OPSCalendarRow {
        flex-direction: column;
    }

    div.CalendarSearchFilterBar {
        padding-top: 0px;
        padding-bottom: 8px;
    }

    div.FromDateSearchFilterBar {
        margin-top: 20px;
        margin-bottom: 6px;
        display: block;
    }

    div.OPSContentHolder {
        min-width: 300px;
    }

    div.OPSSearchButtonHolder {
        min-width: 50px;
    }

    .OPSGridFont {
        font-size: 11pt;
        height: auto;
        vertical-align: middle;
    }

    .OPSGridFontSmall {
        font-size: 10pt;
        height: auto;
        vertical-align: middle;
    }

    tr.OPSGridFontSmallNoTop {
        color: #0F2372;
        font-size: 10pt;
        height: auto;
        vertical-align: middle;
        border-top: 1px dotted #d1d1d1;
    }
    
    div.SingleLineDescription {
        min-width: 190px;
        padding-top: 8px;
        padding-left: 80px;
        color: #0F2372;
        font-size: 22pt;
        margin-top: auto;
        margin-bottom: auto;
    }

    div.LoginMessageDate {
        font-size: 26pt;
        margin: auto;
    }

    .OPSFormTextLabel {
        display: block;
        padding-left: 0px;
    }

    .OPSFormHeader {
		display: block;
		padding-left: 0px;
	}

	.OPSVolunteerDetailFormHolder {
		padding-right:0px;
		display:block;
	}

    div.OPSFormInputHolder {
        padding-left: 2px;
        display: block;
    }

    div.OPSFormInputHolder2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 12px;
    }

    td.ExtraPayBLSeperator {
        padding-left: 2px;
    }

    span#SelectedWorkId-button {
        width: 290px;
    }

    table.OPSFromDateOnLeft {
        float: none;
        height: auto;
        transform: translateX(-34px);
    }

    table.OPSAbsenceTypeOnLeft {
        float: none;
        height: auto;
        transform: translateX(6px);
    }

    table.OPSFilterOnLeft {
        float: none;
        height: auto;
        margin-right: auto;
		transform: translateX(28px);
    }

    td.DALPrintButton {
        text-align: left;
    }

    .OPSCheckboxHolder {
        margin-bottom: 2px;
    }

    td.OnTimePerformanceLabel {
        border-bottom: none !important;
    }

    tr.OPSBoxContentRow table.requests-info td.requests-info,
    tr.OPSBoxContentRow table.requests-info td.dayOff {
        min-height: 21px;
    }

    img.OPSGridImageSmall {
        width: 28px;
        height: 28px;
    }

    div#BidUnitsFilter,
    div.OPSSortByFilterHolder {
        margin-left: 18px;
        margin-right: 18px;
        width: calc(88% + 12px);
    }

    div#WorkTypesFilter,
    div#RosterTypesFilter,
    div#LineGroupsFilter,
    div#DaysOffFilter,
    div#DivisionsFilter {
        margin-left: 18px;
        margin-right: 18px;
        width: 88%;
    }

    div.OPSBRActionButtons,
    div.OPSBRPageInfo,
    div.OPSBRPageButtons {
        align-self: center;
        /* margin-bottom: 10px; */
    }

    div.OPSBRActionButtons {
        padding-left: 0px;
        width: auto;
    }

    div.OPSBRPageButtons {
        padding-right: 0px;
        width: auto;
    }

    div.OPSTileInfoHolder {
        justify-content: center;
    }

    div.OPSTileInfoHolder:after {
        content: "";
        width: 250px;
    }

    span#Year-button {
        width: 80px;
        height: 29px;
    }

    span#Month-button {
        width: 130px;
        height: 29px;
    }

    span#Month-button,
    span#Year-button {
        font-size: 16pt !important;
    }

    img.OPSSearchImage {
        width: 30px;
	    height: 30px;
    }

    td.OPSVolunteerStatusDate {
        border: none !important;
        padding-left: 0px !important;
    }

    div.OPSVolunteerStatusLockImgHolder {
        margin-left: 0px;
    }

	div.OPSBRComboBoxContainer {
		text-align: left;
	}

    div.OPSBRComboBox {
		margin-top: 0px;
		margin-left: 0px;
	}




	tr.OPSBRComboBoxItem {
		margin-top: 0px;
		margin-bottom: 0px;
	}

	table.OPSBRComboBoxTable {
		background-color: white;
		color: black;
	}

	table.OPSBRComboBoxTable:hover {
		background-color: #007FFF;
		color: white;
	}

	td.OPSBRComboBoxItemDetail {
		float: left !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
		text-align: center !important;
	}

	td.OPSAbsenceBRLegendRow {
		display: block;
	}

    div.OPSMessagBoxHolder {
        position: relative;
        display: table;
        width: 100%;
        min-width: 100%;
        margin: 0 auto;
    }

    tr.OPSBoxLineAssignment {
        display: block !important;
		height: 100%;
    }

    div.OPSLoginHelpMessage {
        width: 88%;
        margin: 0 auto;
        margin-bottom: 24px;
    }

    .OPSWorkSignOnOffLabelWidth1 {
        width: 172px;
    }

    .OPSWorkSignOnOffLabelWidth2 {
        width: auto;
    }

    div.OPSWorkSignOnOffHolder {
        flex-direction: column;
    }

    table.OPSWorkSignOnOffTopAdjustment {
        margin-top: -5px;
    }

    span#VolunteerTypeId-button {
		width: 325px;
	}
}

@supports (-webkit-touch-callout: none) {	
	.OPSButton {
	font-size: 13.2pt;
	font-weight: bold;
	height: 37px;
	color: white;
	background-color: #00205B;
	border: 0px solid;
	box-shadow: 1px 1px 4px #5c6788;
	outline: none;
	width: 127px;
	margin-right: 12px !important;
	cursor: pointer;
	}		
}

.LoginLabelFont {
    color: #ffffff;
}

.LoginButton {
    margin-left: 5px;
}

.LoginRememberMe {
    color: #121e6a;
    vertical-align: middle;
    font-size: 12pt;
}

input.LoginRememberMe {
    margin-left: 7%;
    margin-right: 6px;
}

input.form-text::-ms-clear {
    display: none;
}

div.slide-right p {
    animation: 24s 2s slide-right infinite;
    -webkit-animation: 24s 2s slide-right infinite;
    margin:0;
}

@keyframes slide-right
{
  from { margin-left: 100%; width: 200%; }
  to { margin-left: 0%; width: 100%; }
}

@-webkit-keyframes slide-right {
  from { margin-left: 100%; width: 200%; }
  to { margin-left: 0%; width: 100%; }
}

div#FullScreenOption {
    font-size: 11pt;
    margin-left: calc(50% - 52px);
    margin-bottom: 12px;
}

div.NavContent {
    overflow-x: auto;
    margin-top: 0px;
    min-height: 800px!important;

}

div.NavVMenu {
    min-width: 255px;
    min-height: 750px;

    /* max-height: 100vh!important; */
}