a:link {  font-family: "Source Sans Pro", sans-serif; text-decoration: underline}
a:hover {  font-family: "Source Sans Pro", sans-serif; color: #3A6EA5; text-decoration: underline}

table {
    font-size: 100%;
    font: 9pt "Source Sans Pro", sans-serif;
}
.tabel-cells-container{
    background: white;
    border-collapse: collapse;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}

.tabel-cells-container >tbody >tr >td {
    background: #f0f0f0;
    padding: 2px 5px;
    border: 1px solid black;

}
td.menuBG{
    background-color: #3F3F3F;
    border-bottom: 2px solid white;
}

td a.cell{
	color: #3333CC;
	display:inline;
	line-height: 100%;
	width:100%;
	height:1.5em;
	}

td a.cell:hover{
	display:inline;
	line-height:100%;
	width:100%;
	height:1em;
    font-weight: bold;
  	border: 3px solid #90C0DD;
}

td a.cell:visited{
	 text-decoration: underline;
    }

td.alternateColor{
	background-color:#CCE0F7;
}

a.small
{
	text-decoration: underline;
    color: #3333CC;
    background-color: transparent;
    font-size: 8pt;
}

a {
    text-decoration: none;
    color: #436976;
    background-color: transparent;
}

a.aTopLevelMenu {
    color: #FFFFFF;
}

img {
    border: none;
    vertical-align: middle;
}
p {
    margin: 1em 0.5em 1em 0.5em;
    line-height: 1.5em;
}
p a {
    text-decoration: underline;
}

p a:visited {
    color: purple;
    background-color: transparent;
}

p a:active {
    color: red;
    background-color: transparent;
}

p img {
    border: 0px none;
    margin: 0
}

h1, h2, h3, h4, h5, h6 {
    color: white;
    background-color: transparent;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 100%;
    font-weight: bold;
    margin: 0;
    padding-top: 0.5em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: Black ! important;
}

h1 {
    font-size: 10pt;
}

h2 {
    font-size: 150%;
}

h3 {
    font-size: 140%;
    border-bottom: none;
    font-weight: bold;
}

h4 {
    font-size: 120%;
    border-bottom: none;
    font-weight: normal;
    color: #4B8AAF;
    padding:5px;
}

h5 {
    font-size: 100%;
    border-bottom: none;
    font-weight: bold;
}

h6 {
    font-size: 85%;
    border-bottom: none;
    font-weight: bold;
}


ul {
    line-height: 1.5em;
    list-style-type: square;
    padding: 0;
    margin-left:0.5em;
    margin-right:0;
    margin-top:0.5em;
    margin-bottom:0
}

ol {
    line-height: 1.5em;
    margin: 0.5em 0 0 1.5em;
    padding: 0;
}
ul a, ol a {
    text-decoration: underline;
}
li {
    list-style-type: none;
}
dt {
    font-weight: bold;
}
dt a {
    text-decoration: underline;
}

dd {
    line-height: 1.5em;
    margin-bottom: 1em;
}
dd a {
    text-decoration: underline;
}

dd.link a {
    text-decoration: none;
    color: Black;
}

.portlet {
    border: none;
    margin-bottom: 1em;
    padding: 0;
}
.portlet h5 {
    background-color: #dee7ec;
    border: 1px solid #8cacbb;
    padding: 0em 1em 0em 1em;
    text-transform: lowercase;
    display: inline;
    font-size: 1em;
    font-weight: normal;
    white-space: nowrap;
    position: relative;
    top: -1px;
}
.portletBody {
    position: relative;
    top: -1px;
    background: transparent;
    border: 1px solid #8cacbb;
}
.portletDetails {
    text-align: right;
}

.portletContent {
    padding: 2em;
}
.helpContent{
	background-color: #eeeeee;
}
.content {
    padding: 2em;
    background-color: #eeeeee;
}
.portletAction {
    float: right;
    width: 0.8em;
    text-align: center;
    display: block;
    text-transform: none;
    border-left: 1px solid #8cacbb;
    padding-left: 0.3em;
}

.portlet .even {
    background-color: #f7f9fa;
}
.portlet .odd {
    background-color: transparent;
}
.portlet input {
    font-size: 80%;
}

.portletSyndication {
    display: block;
    float: left;
    border: 1px solid #8cacbb;
    background-color: #dee7ec;
    font-size: 85%;
}

.navIcon,
.navIconRoot {
    position: relative;
    right: 20px;
}

.navItemText {
    margin-left: -20px;
}

.navRootItem,
.navItem {
    margin: 0 0 0.2em 0;
    border: 1px solid White;
    display: block;
    background-repeat: no-repeat;
    background-position: 0 1px;
    padding: 0.1em 0.25em 0.2em 20px;
    margin: 1px 0;
}

.portlet a:hover {
    background-color: #dee7ec;
    color: #436976;
    border: 1px solid #8cacbb;
}

.visualClear {
    display: block;
    clear: both;
}
.breadcrumbs {
    /* The path bar, including breadcrumbs and add to favorites */
    border-bottom-color: #8cacbb;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-left: 2em;
    padding-right: 2em;
    text-transform: lowercase;
}
#menu{
width:100px;
}

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

.message{
    background-color: #ffffff;
    border: 1px solid #81A7C3;
    margin: auto;
    font-size: 8.2pt;
    margin-bottom: 1em;
}
.message .close{
	display: none;
    background-color: #dee7ec;
    border-bottom: 1px solid #81A7CC;
    float: none;
    font-family: "Source Sans Pro", sans-serif;
    padding: 0.5em 0em 1em 0em;
}

.trigger{
				 cursor: pointer;
				 font-family: "Source Sans Pro", sans-serif;
				 font-size: x-small;
                 Width: 150px;
}
.branchActive{
				display: block;
      	margin-left: 12px;
			  font-family: "Source Sans Pro", sans-serif;
				font-size: x-small;
}
.branch{
				display: none;
      	margin-left: 12px;
			  font-family: "Source Sans Pro", sans-serif;
				font-size: x-small;
}
.field {
    top: 0;
    left: 0;
    margin: 20px; 1em
}

.field .field {
    margin: 1em 0 0 0;
}

.field label {
    font-size: 100%;
    font-weight: bold;
}

.fieldRequired {
    color: White; padding-left:8px; padding-right:0; padding-top:0; padding-bottom:0
}

.formHelp {
    font-size: 90%;
    color: #76797c;
    margin: 0 0 0.2em 0;
}

.formHelp a {
    text-decoration: underline;
}

.formHelp:hover {
    color: Black;
    cursor: default;
}

.formControls {
   margin: 20px;
}

.error {
    /* Class for error indication in forms */
    background-color: white;
    border: 1px solid red;
	color: red;
    margin-bottom: 1em;
    margin-right: auto;
    margin-left: auto;
}

.error .fieldRequired {
   color: #ffce7b;
}


table.tripHeader{
    padding: 2 2 2 2;
}

td.tripHeader{
     padding: 2 2 2 2;
     border:0px;
}


.notScheduled{
	font-size : x-small;
	color : #cc0033;
}
.isScheduled{
	font-size : x-small;
	color : #006633;
}

#menubar {
    background-color: transparent;
    padding: 0em 0em 0em 2em;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    height: auto;
    line-height: normal;
}
#menubar li {
    display: inline;
}
#menubar li a {
    /* The normal, unselected tabs. They are all links */
    background-color: transparent;
    border-color: #8cacbb;
    border-width: 1px;
    border-style: solid solid none solid;
    color: #436976;
    height: auto;
    margin-right: 0.5em;
    padding: 0em 1.5em;
    text-decoration: none;
    text-transform: lowercase;
}
#menubar li.selected a {
    /* The selected tab. There's only one of this */
    background-color: #dee7ec;
    border: 1px solid #8cacbb;
    border-bottom: #dee7ec 1px solid;
    color: #436976;
}
#menubar li a:hover {
    background-color: #dee7ec;
    border-color: #8cacbb;
    border-bottom-color: #dee7ec;
    color: #436976;
}

TABLE.requests-info {
    BORDER-COLLAPSE: collapse;
    background-color: #FFFFFF;
    padding: 2px;
}

TABLE.requests-info-nopadding {
    BORDER-COLLAPSE: collapse;
    background-color: #ffffff;
    padding: 0px;
}

TH.requests-info
{
    background-color:#D8D8D8;
    BORDER-COLLAPSE: collapse;
    border: 1px solid #D3D3D3;
}

td.formItem
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    BORDER-LEFT: medium none;
    BORDER-BOTTOM: medium none;
    BORDER-COLLAPSE: collapse;
    background-color: #EEEEEE
}

TD.requests-info
{
    border-bottom: #D3D3D3 1px dotted;
    COLOR: black;
    border: solid 1px #D3D3D3;
    padding: 1px 1px 1px 1px;
}

TD.requests-info-checkbox
{
    border: solid 1px #D3D3D3;
    COLOR: black;
    width: 40px;
	TEXT-ALIGN: center;
    padding: 1px 1px 1px 1px;
}

.GridWorkName
{
    FONT-WEIGHT: bolder;
    COLOR: black;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: right
}
.GridWorkName, .dayOffTimeKeeping
{
    TEXT-ALIGN: right!important;
}

.dayOff
{
    FONT-WEIGHT: bolder;
    COLOR: black;
    BACKGROUND-COLOR: transparent;
    TEXT-ALIGN: center;
}

.context-info
{
    FONT-WEIGHT: bolder;
    COLOR: red
}

.bidrequests-command
{
    CURSOR: pointer;
}

.bidrequests-command-disabled
{
    FILTER: Gray;
    CURSOR: default
}

.menubarBR{
	font-family: "Source Sans Pro", sans-serif;
	font-size : x-small;
    	font-weight: bold;
	color : #000000;
	background-color :#EEEEEE;
	cursor: pointer;
	margin: .5cm;
}

.MinusValue {
    color: red
}

tr.THHead {
    background-image: url('../images/tableHeaderBG.jpg');
    background-position: center;
    BORDER-COLLAPSE: collapse;
    COLOR: white;
    font-size: 8pt;
    border: 1px #D3D3D3;
    height: 30px;
    vertical-align: bottom;
}

tr.OPSTHHead {
    COLOR: #0F2372;
    font-size: 13pt;
    height: 40px;
    vertical-align: bottom;
    text-align: center;
}

tr.OPSTHHeadSmall {
    COLOR: #0F2372;
    font-size: 13pt;
    height: 36px;
    vertical-align: bottom;
    text-align: center;
}

td.OPSColumnHeader, th.OPSColumnHeader {
    border: none !important;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    vertical-align: bottom;
}

td.OPSColumnHeaderLeft, th.OPSColumnHeaderLeft {
    border: none !important;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
    vertical-align: bottom;
}

td.OPSColumnHeaderRight, th.OPSColumnHeaderRight {
    border: none !important;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: right;
    vertical-align: bottom;
}

tr.THHead th {
    padding: 4px;
    border-right: transparent;
    border-left: transparent;
}

.menubarBRSelect{
	font-family: "Source Sans Pro", sans-serif;
	font-size : x-small;
    	font-weight: bold;
	color : #000000;
	background-color :turquoise;
	cursor: pointer;
	margin: .5cm;
}

.tab-selected
{
    PADDING-RIGHT: 2px;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: bolder;
    FONT-SIZE: 10pt;
    PADDING-BOTTOM: 2px;
    CURSOR: pointer;
    COLOR: darkblue;
    PADDING-TOP: 2px;
    BACKGROUND-COLOR: #ede7cb;
}

.tab-unselected
{
    PADDING-RIGHT: 2px;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: bolder;
    FONT-SIZE: 10pt;
    PADDING-BOTTOM: 2px;
    CURSOR: pointer;
    COLOR: white;
    PADDING-TOP: 2px;
    BACKGROUND-COLOR: turquoise
}

TABLE.Help-Detail
{
    BORDER-COLLAPSE: collapse;
    BORDER-COLOR: #D3D3D3;
    border:1px;
}

td.HelpImage
{
	border-left: 0px;
	border-right:0px;
	border-top:0px;
	border-bottom:1px solid #81A7CC;
	padding-top:0;
	padding-right:0;
	padding-left:0;
	padding-bottom:0;
	margin:0;
}

td.Help
{
	border: 1px solid #81A7CC;
	background-color:#FFFFFF;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:1em;
}

.HelpSubHeadFont
{
	font: "Source Sans Pro", sans-serif;
	color: #3A6EA5;
	font-weight: bold;
    font-size: 16px;
}

div.OPSHelpText {
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 1em;
}

ol.HelpOL
{
	padding-left: 1.5em;
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

ul.HelpUL
{
	padding-left: 1.5em;
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}
}


.CalendarHeaderFont
{
	color: #0000CC;
	font-family: "Source Sans Pro", sans-serif;
 	font-size: 100%;
   	font-weight: bold;
}

.inline-list {
    border: 0px solid #000;
    /* margin-left: 8%;
    margin-right: 8%; */
    padding: 10px 5px 5px 5px;
    vertical-align: top;
    font-family: "Source Sans Pro", sans-serif;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    list-style: none;
}

.inline-list p {
	vertical-align:top;
}

table.CalendarTable {
	display: block;
	padding: 0;
	color: #339;
	vertical-align:top;
    -ms-flex: 50%; /*work around for IE flex wrap bug*/
}

.CaptionStyle {
    margin:15px 0 0 0;
    padding:0 10px 0 0;
    line-height:15px;
    color: red;
}

.ComboDesc {
    float: left;
	width: 300px;
    color: red;
}

tr.RedBackGround{
	background: url('../images/LoginColorSection.JPG');
}

select{
    font: 9pt "Source Sans Pro", sans-serif;
}

.selectbig{
    font: 9pt "Source Sans Pro", sans-serif;
}

TABLE.requests-info td, TABLE.requests-info-noblock td{
    border-top: dotted #D3D3D3 1.5px ;
    border-left: transparent  #D3D3D3 1px;
    border-right: transparent  #D3D3D3 1px;
    border-bottom: dotted #D3D3D3 1.5px ;
}

.button{
    margin-left: 5px;
}

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

#submenu
{
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.thhead
{
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}

section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
}

.thhead div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding-top: 9px;
  padding-bottom: 9px;
  top: 0;
  line-height: normal;
    BORDER-COLLAPSE: collapse;
    width:inherit;
    overflow: hidden;
}

th:first-child div{
}

.CalendarDayOff
{
    FONT-WEIGHT: bolder;
    COLOR: black;
    BACKGROUND-COLOR: #f3f3f3;
    TEXT-ALIGN: Left;
}

.CalendarDayOff2
{
    FONT-WEIGHT: bolder;
    COLOR: black;
    BACKGROUND-COLOR: #c3c3c3;
    TEXT-ALIGN: Left;
}

.open {
    vertical-align: top;
    padding-left: 15px;
    }
.closed {
    display: none;
    }

.treeimageclosed{

}
.treeimageopen{
}

.expli {
    list-style-type: none;
    font-size: 12px;
    }

.expli img {
    vertical-align: middle;
    }

.expli:hover
{

    background-color:#4B8AAF;
}

.treebackground{
    border: 1px solid #A9A9A9;
    background-color:white;
}

.treenode{
    text-decoration: none;

}
.treenode:hover{
    font-family: "Source Sans Pro", sans-serif;
    color: #3A6EA5;
    text-decoration: none;

}
img.LogoImage{
		width:auto;
		max-width:100%;
		height:auto;
	}

td.FilterLabel{
		text-align: right;
		width: 80px;
	}

td.FilterInput{
		padding-left: 10px;
	}

table.FilterTable{
	width: 100%;
	padding:  0px;
	border-spacing: 0;
	border-collapse: collapse;
	border: 0px;

}
table.FilterTable tr td{
 padding-right: 0px;
}

td.FilterDate{
	width: 150px;
	padding-left: 10px;
}

TABLE.requests-info-noblock
{
    BORDER-COLLAPSE: collapse;
    background-color: #ffffff;
    border: 1px solid #D3D3D3;
    padding: 2px;
}

textarea.inputQA{
	width: 99%;
}

div.ViewPaddle {
    text-align: center;
}

div.AssignmentForDay {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 65px;
}

div.FlexWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

div.FlexWrapItem {
    display: inline-block;
    -ms-flex: 50%;
}

div.FlexWrapItem100 {
    display: inline-block;
    width: 100%;
    flex: none;
    -ms-flex: none;
}

body.ajaxCursorWait * {
    cursor: progress !important;
}

div.NavBody {
	width: 96%;
    margin: auto;
    display: flex;
}

div.NavVMenu {
    flex: 1 1 auto;
    background-color: #212433;
}

div.NavContent, body#wizard {
    background-size:contain;
    height:100%;
	   width: 92%;
    margin: auto;
}
body#wizard{
  background: -webkit-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
  background: -moz-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
  background: -o-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
  background: radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
}



#iHome{
  //trapeze gray
  background: -webkit-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
  background: -moz-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
  background: -o-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
  background: radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
}

div.NavContent {
    min-width: 1004px;
    /* max-height: 100vh; */
    background: -webkit-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
    background: -moz-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
    background: -o-radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);
    background: radial-gradient(circle, rgba(51, 63, 72, 0.627) 0%, rgb(51, 63, 72) 100%, rgb(51, 63, 72) 100%);

}

.navMenuBar {
    width: 100%;
}

.spanTopLevelMenu:hover {
    cursor: pointer;
}

.spanTopLevelMenu {
}

.spanSecondLevelMenu {
}

.ulTopLevelMenu {
    margin-left: 0px;
    margin-top: 0px;
    text-align: center;
}

.ulSecondLevelMenu {
    margin-left: 0px;
    margin-top: 0px;
    text-align: center;

}

.aTopLevelMenu:link {
    text-decoration: none;
}

.aSecondLevelMenu:link {
    text-decoration: none;
}

.liTopLevelMenu {
}

.liSecondLevelMenu {
    margin-bottom: 0px;
}

table.NoSpacingTable {
    border-spacing: 0px;
    border-collapse: collapse;
}

div.OPSVolunteerDetailSpacing {
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.OPSVolunteerDetailMinHeight {
    min-height: 46px;
}
img.imgSpacer{
  opacity: 0;
}

.ModalBackground{
  background: #25242469;
  opacity: 1;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;

}
.modalContainer{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    margin-top:200px;
    padding: 0;
    border: 0px solid white;
    border-radius: 3px;
    width: 320px;
    min-height: 250px;
    background-color: white;

    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s

}
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.ModalMsg{
  font-size: 1.4em;
  color: Black;
  margin: auto;
  text-align: left;
  padding:15px 10px;
}
.LeaveModalBtnContainer{
  height: 50px;
  width: 100%;
  display: flex;
  font-size: 1.4em;
}

div.BtnTextContainer{
  text-align: center;
  margin:auto;
  margin-top: calc((50px - 1.4em)/2);

}
.LeaveModalConfirm{
  background:#8A1538;
  flex-grow: 1;
  position: relative;
  border-bottom-left-radius: 3px;

}
.LeaveModalCancel{
  background:#212433;
  flex-grow: 1;
  border-bottom-right-radius: 3px;

}
.LeaveModalBtn:hover{
  opacity: 0.8;
  cursor: pointer;
}
.LeaveModalHeader{
  height: 20px;
  width: 100%;
  background:#212433;
}

.opTimeKeepingVersionNum{
    padding-left: 9px;
}
.SingleLineDescription.descriptionSmall{
    font-size: 1.5em;
    padding-left: 0;
    font-weight: bold;

}
.SingleLineDescription.descriptionSmallItalic{
    font-style: italic;
    font-weight: normal;

}
/* Any device with width less than 969 px */
@media screen and (max-width: 969px) {
    /* Force table to not be like tables anymore */
    table.CalendarTemplate, table.requests-info, table.requests-info thead, table.requests-info tbody, table.requests-info th, table.requests-info td, table.requests-info tr, table.requests-info THHead, table.requests-info OPSTHHead, table.requests-info OPSTHHeadSmall
    table.ForceBlock, table.ForceBlock thead, table.ForceBlock tbody, table.ForceBlock th, table.ForceBlock td, table.ForceBlock tr, table.ForceBlock THHead, table.ForceBlock OPSTHHead, table.ForceBlock OPSTHHeadSmall,
    table.requests-info-nopadding, table.requests-info-nopadding thead, table.requests-info-nopadding tbody, table.requests-info-nopadding th, table.requests-info-nopadding td, table.requests-info-nopadding tr, table.requests-info-nopadding THHead, table.requests-info-nopadding OPSTHHead, table.requests-info-nopadding OPSTHHeadSmall,
    table.CalendarTemplateAsTable, table.CalendarTemplateAsTable tbody, table.CalendarTemplateAsTable thead, table.CalendarTemplateAsTable THHead, table.CalendarTemplateAsTable OPSTHHead, table.CalendarTemplateAsTable OPSTHHeadSmall {
        display: block;
        max-height: 999999px;
    }

    div.OPSForm-left-right-holder{
        flex-direction: column;
    }
    #absence-quota-availability{
        margin: 0px;
        padding-left: 10px;
    }
    table.requests-info, table.requests-info-nopadding, table.CalendarTemplate {
        margin-right: 0px;
        padding: 0px;
        width: 100%;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table.requests-info tr.THHead, table.requests-info-nopadding tr.THHead, table.CalendarTemplate tr.THHead, table.CalendarTemplateAsTable tr.THHead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.requests-info tr.OPSTHHead, table.requests-info-nopadding tr.OPSTHHead, table.CalendarTemplate tr.OPSTHHead, table.CalendarTemplateAsTable tr.OPSTHHead,
    table.requests-info tr.OPSTHHeadSmall, table.requests-info-nopadding tr.OPSTHHeadSmall, table.CalendarTemplate tr.OPSTHHeadSmall, table.CalendarTemplateAsTable tr.OPSTHHeadSmall {
        display: none;
    }

    /* Display as a "row" - For the data element */
    table.requests-info td, table.requests-info-nopadding td, table.CalendarTemplate td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        white-space: normal;
        text-align: left;
        width: inherit;
        font-weight: bold;
        min-height: 11px;
        padding-left: 150px;
    }

    table.requests-info td.WiderBeforeSpace, table.requests-info-nopadding td.WiderBeforeSpace, table.CalendarTemplate td.WiderBeforeSpace {
        padding-left: 240px;
    }

    table.CalendarTemplate td {
        padding-left: 10px;
    }

    /* Display as a "row" - For the data element label */
    table.requests-info td::before, table.requests-info-nopadding td::before, table.CalendarTemplate td::before {
        display: inline-block;
        position: absolute;
        left: 6px;
        width: 40px;
        white-space: nowrap;
        text-align: left;
        content: attr(data-title);
        font-weight: normal;
    }

    table.requests-info td[bgHL] {
        background-color: #3d4872;
        font-weight: bold;
        color: white;
    }

    table.requests-info td[bgHL]:before {
        font-weight: bold;
        color: white;
    }

    table.requests-info td[btnalignright] {
        text-align: right;
    }

    table.requests-info input[type="checkbox"] {
        margin-left: 0px;
        height: 13px;
        width: 13px;
    }

    table.requests-info td[valign="middle"]::before {
        top: 50%;
        transform: translateY(-50%);
    }

    table.ForceBlock {
        width: 100%;
    }

    table.ForceTable {
        display: table;
        white-space: normal;
    }

    table.ForceTable td {
        display: table-cell;
    }

    table.ForceTable tr {
        display: table-row;
    }

    table.ForceTableBidRequest {
        display: table;
        white-space: normal;
        border-spacing: 0px;
    }

    table.ForceTableBidRequest td {
        display: table-cell;
        padding: 0px;
        border-bottom: 0px;
    }

    table.ForceTableBidRequest tr {
        display: flex;
        justify-content: flex-end;
    }

    table.CalendarTemplate td table.ForceTable td::before {
        display: inline-block;
        position: absolute;
        left: 0px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        content: attr(data-title);
        font-weight: normal;
    }

    table.CalendarTemplate td table.ForceTable td {
        border: none;
        border-bottom: none;
        text-align: left;
        width: auto;
        font-weight: bold;
        min-height: 11px;
        padding-left: 5px;
    }

    /* For lining up Label and Data items (e.g. Employee Address Info) */
    td.TextLabelItem {
        width: 180px;
    }

    img.LogoImage {
        width: auto;
        max-width: 70%;
        height: auto;
    }

    td.FilterLabel {
        text-align: left;
        width: 30%;
    }

    table.FilterTable {
        width: 300px;
        padding: 0px;
        border-spacing: 0;
        border-collapse: collapse;
        border: 0px;
    }

    td.FilterDate{
	    width: 150px;
	    padding-left: 0px;
    }

    td.FilterInput{
		padding-left: 0px;
	}

    table.CalendarTemplate td.EmptyDay, table.CalendarTemplateAsTable td.EmptyDay {
        display: none;
    }

    td.VolunteerDetail {
        margin-top: -20px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: auto;
        text-align: center;
        min-height: 24px;
        clear: right;
        position: relative;
    }

    div.VolunteerDetailDiv {
        text-align: center;
        order: 1;
    }

    div.VolunteerDetailDiv2 {
        text-align: center;
        order: 2;
    }

    div.OPSVolunteerDetailSpacing {
        margin-right: 4px;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    table.requests-info td.ImgAlignRight {
        text-align: right;
    }

    table.requests-info td.ImgAlignLeft {
        text-align: left;
    }

    /*hide empty cell*/
    div.EmptyCell, table.requests-info td.EmptyCell {
        display: none;
    }

   table.requests-info td.DateHeaderBG {
       background-color: gray;
       font-weight: bold;
       color: white;
   }

   table.requests-info td.DateHeaderBGBlue {
       background-color: #6976A6;
       font-weight: bold;
       color: white;
   }

   table.requests-info td.NoTitleCell {
        left: -146px;
        width: 100%;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: none;
    }

    table.requests-info td.NoTitleCenterCell {
        display: flex;
        justify-content: center;
        align-items:center;
        padding-left:0px;
        content: none;
    }

    table.requests-info thead tr.THHead {
        display: none;
    }

    section.AddBidRequestSection {
        padding-top: 0px;
    }

    table tfoot tr.Fixed {
        display: none;
    }

    .inline-list {
        display: table;
        margin: auto;
        margin: auto;
        text-align: center;
    }

    table.CalendarTable {
        text-align:center;
        margin-left: auto;
        margin-right: auto;
        display: table-row;
        border-spacing: 0px;
    }

    div.ViewPaddle {
        text-align: left;
        margin-left: -6px;
    }

    div.AssignmentForDay {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin-left: -8px;
        min-height: 12px;
        margin-top:10px;
    }

    .message, .error {
        width: 88% !important;
    }

    font.fontCalendarColored3 {
        color: white;
        font-size: 8.5pt;
        font-weight: bold;
    }

    div.NavVMenu {
        background-color: #212433;
        z-index: 100;
    }

    div.NavBody {
	    width: 100%;
    }

    div.NavContent {
	    width: 92%;
        min-width: 320px;
        /* max-height: 100vh; */

    }

    .navMenuBar {
        width: 254px;
    }

    .spanTopLevelMenu:hover {
        cursor: pointer;
    }

    .spanTopLevelMenu {
        padding-left: 16px;
    }

    .spanSecondLevelMenu {
        padding-left: 32px;
    }

    .ulTopLevelMenu {
        margin-left: 0px;
        margin-top: 0px;
        text-align: left;
    }

    .ulSecondLevelMenu {
        margin-left: 0px;
        margin-top: 0px;
        text-align: left;
    }

    .aTopLevelMenu:link {
        text-decoration: none;
    }

    .aSecondLevelMenu:link {
        text-decoration: none;
    }

    .liTopLevelMenu {
    }

    .liSecondLevelMenu {
        margin-bottom: 0px;
    }

    div.OPSVolunteerDetailMinHeight {
        min-height: 2px;
    }
}

@media screen and (max-width: 1190px) and (min-width: 970px) {
    .inline-list {
        display: table;
        margin: auto;
        margin: auto;
        text-align: center;
    }

    table.CalendarTable {
        display: table-row;
    	padding: 0;
	    color: #339;
	    vertical-align:top;
    }

    table.LoginForceTable tr {
    }
}

@media screen and (min-width: 970px) {

    span.fontCalendarColored2 {
        color: #4B8AAF;
        font-size: 10pt;
        font-weight: bold;
        display: none;
    }

    td.VolunteerDetail {
        text-align: right;
        position: relative;
    }

    div.VolunteerDetailDiv {
        text-align: left;
    }

    section.AddBidRequestSection {
        position: relative;
        background: #7F7F7F;
    }

    table.ForceTableBidRequest {
        display: none;
    }
}

/* opUpdateVolunteer */
#dropdownLabel{
  text-overflow: ellipsis;
  font-size: 14pt;
}
.showMultipleSelection{
  cursor: pointer;
  display: inline-block;
  border:1px solid #a9a9a9;
  width: 300px;
  padding: 1px;
}
.multipleSelectionUlContainer{
  width: 300px;
  height: 0;
  position: relative;
  width: 100%;
}
.multipleSelectionUl{
  border:1px solid grey;
  width: 100%;
  background: #ffffff;
  position: absolute;
  margin:2px 0 0 -1px;
  z-index: 600;
  left: 0;
  top: 0;
  display: none;
  font-size: 14pt;
}
.multipleSelectionUl >{
  pointer-events:none;
}
.multipleSelectionUl >li:hover{
  background-color: #E0E9F4;
}