@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

@import url("wfmsg-metro.css");
@import url("wfmsg-ui.css");
@import url("wfmsg-theme-core.css");
@font-face {
	font-family: 'wfmsgfonts';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body, form { height:100%; }

body {
    background-color:#f8f8f8;
    _RGB: rgb(248,248,255);
}
/**
 * The following are not by default theme-dependent styles, so 
 * they can go in the 'global' stylesheet class.
 */
 
.wfmsg-wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -55px; }
.wfmsg-footer, .wfmsg-push { font-size:.8em; height: 55px; clear: both; }
.wfmsg-footer { text-align:center; }
.wfmsg-footer .logo { width:50px;height:50px; }
.wfmsg-footer a { text-decoration: underline !important;}
 
/**
 * By default our forms should have a margin of 0 pixels.
 */ 
h1					{font-size:16pt;margin:0px;text-decoration:none;font-weight:normal;}
h2					{font-size:20px;margin:0px;font-weight:normal;color:#4a4a4a;}
h3					{font-size:10pt;margin:0px;font-weight:normal;}
h4					{font-size:8pt;margin:0px;font-weight:normal;}
table				{border-collapse:separate;}

/**
 * Style used for links on the main menu pages, with corresponding hover event
 */ 

A.bigLinkNoColor	{font-size:14pt;text-decoration:none;} /*Check - used twice*/
A.bigLinkNoColor:Hover {color:Red;text-decoration:none;}

A.tinyLink {font-size:8pt;color:#808080;text-decoration:none;} /*Check*/
A.tinyLink:hover	{font-size:8pt;color:red;text-decoration:none;}

A.mediumLink {color: #808080;font-size: 12pt;text-decoration: none;} /*Check - Used 1 time*/
A.mediumLink:hover	{color:red;font-size:12pt;text-decoration:none;}

A.smallLinkNoColor	{font-size:10pt;text-decoration:none;} /**/
A.smallLinkNoColor:hover	{font-size:10pt;text-decoration:none;} /*Check - used 2 times*/

/**
 * Text size styles
 */
.spacerVertical2	{height:2px;}
.spacerVertical4	{height:4px;display:block;}
.spacerVertical5	{height:5px;}
.spacerVertical20	{height:20px;display:block;}
.spacerVertical10	{height:10px;display:block;}
.spacerVertical25   {
    height: 25px;
    display: block;
}
.spacerHorizontal20 {width:20px;display:inline-block;}

.containerPadded {
    padding: 5px;

}

/**
    DoveBar mods.
*/
.wfmsg-container-default {
    background-color: #f8f8ff;
    _background-color: blue;
}
.padded.wfmsg-container-default {
    padding: 5px;
}

.containerWhite		{background-color:White;}
.containerWhitePadded {background-color:White;padding:5px;}
.containerWhiteBorder {background-color:White;border:1px solid #CCCCCC;}
.containerWhiteBorderBottom {background-color:White;border-bottom:1px solid #CCCCCC;}
.containerWhiteBorderBottom table {border-collapse:separate;}

.containerGeneric1	{background-color:#ECF4FC;}
.containerGeneric1Padded {background-color:#ECF4FC;padding:5px;}
.containerGeneric1Border {background-color:#ECF4FC;border:1px solid #CCCCCC;}
.containerGeneric1BorderBottomSides {background-color:#ECF4FC;border-bottom:1px solid #CCCCCC;border-right:1px solid #CCCCCC;border-left:1px solid #CCCCCC;}

.containerGeneric2	{background-color:#DFEFEF;}
.containerGeneric2Padded {background-color:#DFEFEF;padding:5px;}

.containerGeneric4 {background-color:#808080;}
.containerGeneric4Padded {background-color:#808080;padding:2px;}

.containerWhite .reportHeader {} /*Check*/
/** 
 * ==========================================================
 * Chart menu related styles classes
 * ==========================================================
 *
 * Defines the class used for the chart menu (container for chart 
 * thumbnails).
 */
.containerChartMenu	{background-color:#DFEFEF;border:1px solid #CCCCCC;padding:5px;}
.containerChartMenu .containerChartMenuImage {padding:3px;}
.containerChartMenu .containerChartMenuSelectedImage {border:1px solid #000099;background-color:#FEDB90;padding:3px;}

.chartSet {background-color:White; margin:2px; width: 1038px;margin-left:auto;margin-right:auto;}
.chartSet .chartPanel { background-color:AliceBlue; float:left;}
.chartSet .thumbnailPanel {background-color:AliceBlue; border: 1px solid #ECECEC;float:right;width:136px;padding:10px;margin-left:10px;text-align:center;height:425px;overflow-y:auto;}
.chartSet .thumbnailPanel .thumbnailImage {padding:4px;margin-left:auto;margin-right:auto;background-color:White;}
.chartSet .thumbnailPanel .thumbnailSelectedImage {background-color:#FEDB90;padding:4px;margin-left:auto;margin-right:auto;text-align:center;}
.chartSet .thumbnailPanel .label {font-size:x-small;margin-bottom:10px;padding-top:15px;}
.chartSet .thumbnailPanel .fill {height:10px;}
.chartSet .clearPanel {clear:both;}
.small.chartSet {
    width: auto;
}
/**
 * ====================================================
 * Style classes defined for gridview row styles
 */
 
/**
 * Style rules for reports, grids, etc.
 *
 * Style for standard item (grid item, non-alternating and not selected).
 */

.tableHeaderRow {
    background-color: #DFEFEF;
    padding: 4px;
} /*necessary*/

th {font-weight:normal;	position:relative; padding: 6px; text-align: left; }

/**
 * Style rule for the footer row in a grid control.
 */
/**
 * Style rule for tabbed-items, typically used in the
 * adherence and schedule pages.
 */
.tabbedItemRow	{background:#EFEFEF;border-bottom:1px solid #D9D9D9;border-right:1px solid #D9D9D9;	border-top:1px solid #D9D9D9;padding-right:5px;font-size:8pt;}
/**
 * Style rule for selected tabbed-items, typically used in
 * the adherence and schedule pages.
 */
.tabbedSelectedItemRow	{border-top:1px solid #D9D9D9;border-bottom:1px solid #D9D9D9;background-color:White;font-size:8pt;padding-right:5px;}

/**
 * Styles used with the TreeView controls.
 *
 *
 * Basic Treeview style for this theme.
 */
.tree				{
    padding:5px;

}
.tree img {
    width: 16px;
    height: 16px;
}
.treeItem			{
    _font-size:8pt;	
    font-weight:normal;	
    _border:1px solid white;
    padding: 5px !important;
    color: #424242;

}
.treeItemHover {
    background-color: #FEDB90;
    padding: 5px 5px 5px 5px;
}

.treeItemSelected	{
    background-color:aliceblue;
    border:1px solid #8CB5E7;
}

.metro.tree /*Check*/
{
}

/*
 * Page (printed) formatting
 */
div.pageBreak		{page-break-before:always}

/**
 * Styles for the scrolling marquee
 */
.scrollingBanner
{ 
	font-family:Tahoma;
	font-size:12px;
	width:310px; /* must set a width for IE6 */
	border:solid 1px #ECF4FC;
	padding:2px; 
}
.scrollingBanner .ajax__marquee_wrapper
{
	width:300px; /* must set a width for IE6 */
    padding:5px;
}
.scrollingBanner .ajax__marquee_wrapper .item
{
	padding:2px 10px;
	color:#000099;
}
.scrollingBanner .ajax__marquee_wrapper .item .title
{
	font-size:14px;
	color:Green;
}
.scrollingBanner .ajax__marquee_wrapper .item A
{
	color:#105289;
}   
.scrollingBanner .default
{
	background-color:#ECF4FC;    	
}     

.jqueryButton{padding-bottom:2px;padding-top:2px;padding-left:8px;padding-right:8px;vertical-align:top;}
.jqueryButtonContainer{background:#eeeeee;width:auto;border:1px solid #eba;vertical-align:middle;padding:2px;white-space:nowrap;}
.panel {position:relative;padding:10px;border:1px solid #CCCCCC;background-color:White;border-radius:7px;}
.panel .panel-title {position:absolute;top:-13px;background-color:White;padding:2px;}

.agentView {font-size:8pt;}
.agentView .item {background-color:White;} /*Check*/
.agentView .alternateItem {background-color:White; }
.agentView .hoverItem {background-color:#ECF4FC;}
.agentView .selectedItem {background-color:#FEDB90;}

.textVertical {writing-mode:tb-lr;-ms-writing-mode:bt-rl;}
.watermark { color:#AAAAAA; font-style:italic; }

/**
 * For migration to a new UI scheme..
 */

.helpImage { height:32px; width:32px; background: url(../../Images/Icons/m/Blue_dark_grey/32/question.png) no-repeat; background-position:center; } /*One use*/
.warning { background: url(../../Images/metro/32x32/sign_warning.png); } /*Extremely difficult to find out if this should be discarded. Warning is used all over the place in different ways.*/
.error { background: url(../../Images/metro/32x32/sign_stop.png); } /*See "warning" ^^*/

.compass32 { background:url(../../images/metro/32x32/compasses.png) no-repeat center; width:40px;height:100%; }
.signaldisk32 { background:url(../../images/metro/32x32/signaling_disk.png) no-repeat center; width:40px;height:100%; }
.ticket32 { background:url(../../images/metro/32x32/ticket.png) no-repeat center; width:40px;height:100%; }
.user-headset32 { background:url(../../images/metro/32x32/user_headset.png) no-repeat center; width:40px;height:100%; }
.document32 { background:url(../../images/metro/32x32/document2.png) no-repeat center; width:40px;height:100%; }
.flash32 { background:url(../../images/metro/32x32/flash.png) no-repeat center; width:40px;height:100%; }
.copy32 { background:url(../../images/metro/32x32/copy.png) no-repeat center; width:40px;height:100%; }
.delete2_32 { background:url(../../images/metro/32x32/delete2.png) no-repeat center; width:40px;height:100%; }
.checks32 { background:url(../../images/metro/32x32/checks.png) no-repeat center; width:40px;height:100%; }
.eye32 { background:url(../../images/metro/32x32/eye.png) no-repeat center; width:40px;height:100%; }
.sign-forbidden32 { background:url(../../images/metro/32x32/sign_forbidden.png) no-repeat center; width:40px;height:100%; }
.undo32 { background:url(../../images/metro/32x32/undo.png) no-repeat center; width:40px;height:100%; }
.sign-warning32 { background:url(../../images/metro/32x32/sign_warning.png) no-repeat center; width:40px;height:100%; }
.dug-well32 { background:url(../../images/metro/32x32/dug_well.png) no-repeat center; width:40px;height:100%; }
.target32 { background:url(../../images/metro/32x32/target.png) no-repeat center; width:40px;height:100%; }
.help32 { background:url(../../images/metro/32x32/help.png) no-repeat center; width:40px;height:100%; }
.close32 { background:url(../../images/metro/32x32/help.png) no-repeat center; width:40px;height:100%; }
.clock32 { background:url(../../images/metro/32x32/clock.png) no-repeat center; width:40px;height:100%; }
.earth32 { background:url(../../images/metro/32x32/earth.png) no-repeat center; width:40px;height:100%; }
.crystal-ball32 { background:url(../../images/metro/32x32/crystal_ball.png) no-repeat center; width:40px;height:100%; }
.error32 { background:url(../../images/metro/32x32/error.png) no-repeat center; width:40px;height:100%; }
.gear32 { background:url(../../images/metro/32x32/gear.png) no-repeat center; width:40px;height:100%; }
.safe32 { background:url(../../images/metro/32x32/safe.png) no-repeat center; width:40px;height:100%; }
.view32 { background:url(../../images/metro/32x32/view.png) no-repeat center; width:40px;height:100%; }
.security { background:url(../../images/metro/32x32/Login-01.png) no-repeat center; width:40px;height:100%; }


.nav-right-button { background:url(../../images/metro/32x32/nav_right.png) no-repeat right; height:100%; }
.nav-left-button { background:url(../../images/metro/32x32/nav_left.png) no-repeat left; height:100%; }
.undo-button { background:url(../../images/metro/32x32/undo.png) no-repeat right; height:100%; }
.check-button { background:url(../../images/metro/32x32/check.png) no-repeat right; height:100%; }

.nav-right-button span, .undo-button span, .check-button span { margin-right:32px; }
.nav-left-button span { margin-left: 32px; }
.nav-right-button a span, .undo-button span a, .nav-left-button a span { text-decoration:none; }

.warning, .error { height:32px; width:32px; float:left; margin-right:10px; }

.copyTitleSuper { font-size:72px; } /*Check - One use*/
.copyTitle  { font-size:56px; }
.copyTitle0 { font-size:48px; }
.copyTitle1 { font-size:40px; }
.copyTitle15 { font-size: 2.5em; }
.copyTitle2 { font-size:24px; }
.copyTitle3 { font-size:20px; }
.copyTitle4 { font-size:16px; }
.copyTitle5 { font-size:14px; }

.copyTitleSuper, .copyTitle, .copyTitle0, .copyTitle1, .copyTitle2, .copyTitle3, .copyTitle4, .copyTitle5, .copyTitle15 
{
	line-height:1.25;
	xcolor:#4A4A4A;
	margin-top:0px;
	hdisplay:block;
}

.copyTitleSuper, .copyTitle, .copyTitle0, .copyTitle1, .copyTitle2, .copyTitle3, .copyTitle15
{
	font-family: Roboto, Segoe UI Light, Tahoma;    
}

/*.selected, .selected a, a.selected, tr.selected { background-color: #FEDB90 !important; }*/
    .selected, .selected a, a.selected, tr.selected {
        background-color:aliceblue !important ;
    }
.alt-selected, .alt-selected a, a.alt-selected, tr.alt-selected {
    background-color:  azure !important;
}
.classic-selected, classic-selected a, a.classic.alt-selected, tr.classic-selected {
    background-color: #FEDB90 !important;
}
.wfmsg-clear { clear: both; }
.tipText { } /*Check - One use - Empty brackets*/

/** MoPac Styles */
/**
 * For message blocks.
 */
.wfmsg-message-block { position:relative; display:inline-block;padding:15px; }
.wfmsg-message-block .green, .wfmsg-message-block .yellow, .wfmsg-message-block .red { position:absolute; top:0px; left:0px; height:100%; width:10px; }
.wfmsg-message-block span { margin-left: 0px; }
    
.wfmsg-hilite-block, .wfmsg-message-block { background-color:#f3f3f3; color:#424242; }
    
.wfmsg-vertical-menu a span, .wfmsg-steps-menu-header { padding-left:20px; padding-top:5px;padding-bottom:5px; }
.wfmsg-steps-menu-header span { display:inline-block; color: #555555; font-size:20px; }
.wfmsg-steps-menu-header .step-number { text-align:center; width:20px; }
.wfmsg-steps-menu-header .step-text { text-align:left; margin-left:5px; }

/*input,
select
    border-radius: 4px;
}*/

.wfmsg-required-text,
.wfmsg-required-field {
    background-color: #FDEAE7;
}

button,
input[type="button"],
input[type="submit"],
input[type="image"],
.wfmsg-button
{ 
    font-size:10pt; 
    padding:8px;
    background-color:#F9F9F9; 
    color:#000000; 
    border:1px solid #cccccc; 
    border-radius: 4px;
    display:inline-block; 
    margin-top:10px; 
    text-align:center; 
    margin-bottom:10px;
    margin-right:5px; 
    cursor:pointer; 
}
a.wfmsg-button:hover {
    color: #424242;
}


a.wfmsg-button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="image"]:hover,
.wfmsg-button:hover {
    background-color: #ECF4FC;
    text-decoration: none;
    _border: 1px solid #000000;
}

.wfmsg-button a,
.wfmsg-button a:visited 
{ 
    text-decoration:none;
    color: #424242; 
}

textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="images"]:focus {
    background-color: lightgoldenrodyellow;
    border: 1px solid #fbcb09;
}
.wfmsg-button a:hover, 
.wfmsg-button a:active { color:#424242; }

.wfmsg-button .right { margin-right:0px !important; }
.wfmsg-button a span { color: Red; text-decoration:none; display:block; }

.wfmsg-no-margin { margin:0px !Important; }        
.wfmsg-button-small.wfmsg-button 
{ 
    padding:2px; 
    font-size:8pt; 
    margin:0px; 
}
.dark.wfmsg-button {
    background-color: #808080;
    color: white;
}
a:disabled {
    pointer-events: none;
}

input[type="text"]:required,
textarea:required {
    background-color: #FDEAE7;
}

textarea:disabled,
textarea:disabled:required,
button:disabled,
select[class="wfmsg-input-text"]:disabled,
input[type="button"]:disabled,
input[type="button"].wfmsg-disabled,
input[type="text"]:disabled,
input[class="wfmsg-required-field"]:disabled,
.wfmsg-required-field:disabled,
input[type="submit"]:disabled,
input[type="text"]:disabled:required {
    background-color: #eaeaea;
    color: #424242;
    opacity: .6;
    pointer-events: none;
}

    button:disabled:hover,
    input[type="button"]:disabled:hover,
    input[type="submit"]:disabled:hover {
        background-color: #808080;
        color: #424242;
        border: 1px solid #a0a0a0;
    }


.wfmsg-green-field, .wfmsg-message-block .green {background-color: #789600}
.wfmsg-light-green-field { background-color:#00c672 }
.wfmsg-seafoam-field { background-color: #009DAE  }
.wfmsg-slate-field { background-color:#3B659C; }
.wfmsg-red-field, .wfmsg-message-block .red { background-color: #CC3333 }
.wfmsg-yellow-field, .wfmsg-message-block .yellow { background-color: #E4AC04 }  
.wfmsg-blue-field, .wfmsg-message-block .blue { background-color: #0072C6; }
.wfmsg-brown-field { background-color: #A05000 }
.wfmsg-teal-field { background-color: #009DAD; }
.wfmsg-purple-field { background-color: #92019C  }
.wfmsg-light-gray-field { background-color:#F3F3F3; }
.wfmsg-dark-gray-field { background-color:#999999; }
.wfmsg-white-field { background-color: White; }
.wfmsg-orange-field { background-color: #FF9A02; }
.wfmsg-magenta-field { background-color: #FF0097; }
.wfmsg-lite-purple-field { background-color: #AA40FF; }
.wfmsg-maroon-field { background-color:#510103 }
.wfmsg-dark-blue-field { background-color:#015883 }
.wfmsg-mobile-green-field { background-color: #6FA500 }
.wfmsg-azure-field {
    background-color: azure
}
.wfmsg-taupe-field {
    background-color: #f3ecec;
    background-color: #f6f6f6;
}
.wfmsg-black-field {
    background-color: black;
}
.wfmsg-aliceblue-field {
    background-color: #F0F8FF;
    color: blue;
}
    
.wfmsg-green-field, .wfmsg-message-block .green,
.wfmsg-light-green-field,
.wfmsg-seafoam-field,
.wfmsg-slate-field,
.wfmsg-red-field, .wfmsg-message-block .red,
.wfmsg-yellow-field, .wfmsg-message-block .yellow,
.wfmsg-blue-field, .wfmsg-message-block .blue,
.wfmsg-teal-field,
.wfmsg-purple-field,
.wfmsg-orange-field,
.wfmsg-brown-field,
.wfmsg-magenta-field,
.wfmsg-lite-purple-field,
.wfmsg-maroon-field,
.wfmsg-dark-blue-field,
.wfmsg-black-field,
.wfmsg-dark-gray-field
{ 
    color:White; 
}

    .wfmsg-default-field a,
    .wfmsg-default-field a:visited,
    .wfmsg-dark-gray-field a,
    .wfmsg-dark-gray-field a:visited,
    .wfmsg-green-field a,
    .wfmsg-green-field a:visited,
    .wfmsg-green-field a:hover,
    .wfmsg-message-block .green a,
    .wfmsg-message-block .green a:visited,
    .wfmsg-light-green-field a,
    .wfmsg-light-green-field a:hover,
    .wfmsg-light-green-field a:visited,
    .wfmsg-seafoam-field a,
    .wfmsg-seafoam-field a:visited,
    .wfmsg-slate-field a,
    .wfmsg-slate-field a:visited,
    .wfmsg-slate-field a:hover,
    .wfmsg-red-field a,
    .wfmsg-red-field a:visited,
    .wfmsg-message-block .red a,
    .wfmsg-message-block .red a:visited,
    .wfmsg-yellow-field,
    .wfmsg-yellow-field a,
    .wfmsg-yellow-field a:visited,
    .wfmsg-yellow-field a:hover,
    .wfmsg-message-block .yellow a,
    .wfmsg-message-block .yellow a:visited,
    .wfmsg-blue-field a,
    .wfmsg-blue-field a:visited,
    .wfmsg-message-block .blue a,
    .wfmsg-message-block .blue a:visited,
    .wfmsg-teal-field a,
    .wfmsg-teal-field a:visited,
    .wfmsg-purple-field a,
    .wfmsg-purple-field a:visited,
    .wfmsg-orange-field a,
    .wfmsg-orange-field a:visited,
    .wfmsg-brown-field a,
    .wfmsg-brown-field a:visited,
    .wfmsg-magenta-field a,
    .wfmsg-magenta-field a:visited,
    .wfmsg-lite-purple-field a,
    .wfmsg-lite-purple-field a:visited,
    .wfmsg-maroon-field a,
    .wfmsg-maroon-field a:visited,
    .wfmsg-dark-blue-field a,
    .wfmsg-dark-blue-field a:visited,
    .wfmsg-black-field a,
    .wfmsg-black-field a:visited {
        color: White;
    }

.wfmsg-taupe-field,
.wfmsg-taupe-field a,
.wfmsg-taupe-field a:visited,
.wfmsg-white-field,
.wfmsg-white-field a,
.wfmsg-white-field a:visited,
.wfmsg-light-gray-field,
.wfmsg-light-gray-field a,
.wfmsg-light-gray-field a:visited,
.wfmsg-aliceblue-field,
.wfmsg-aliceblue-field a,
.wfmsg-aliceblue-field a:visited {
    color: #424242;
}

/**
    Darker background colors.
*/
.wfmsg-slate-field a:hover,
.wfmsg-red-field a:hover,
.wfmsg-purple-field a:hover,
.wfmsg-magenta-field a:hover,
.wfmsg-default-field a:hover,
.wfmsg-brown-field a:hover,
.wfmsg-maroon-field a:hover,
.wfmsg-black-field a:hover,
.wfmsg-blue-field a:hover {
    color: #A9A9A9;
}

/**
    LIghter / brighter background colors.
*/
.wfmsg-yellow-field a:hover,
.wfmsg-aliceblue-field a:hover,
.wfmsg-taupe-field a:hover,
.wfmsg-white-field a:hover,
.wfmsg-light-gray-field a:hover,
.wfmsg-seafoam-field a:hover,
.wfmsg-orange-field a:hover {
    color: #686868;
}

/*
    Special fields
*/
.wfmsg-teal-field a:hover,
.wfmsg-green-field a:hover,
.wfmsg-seafoam-field a:hover,
.wfmsg-light-green-field a:hover,
.wfmsg-lite-purple-field a:hover,
.wfmsg-dark-gray-field a:hover {
    color: #424242;
}
.wfmsg-selected-field {
    background-color: #FEDB90;
    color: #424242;
}
.blue.wfmsg-selected-field {
    background-color: aliceblue;
}
.taupe.wfmsg-selected-field {
    background-color: #f3ecec;
}

.wfmsg-small-pad { padding:5px; }
.wfmsg-medium-pad { padding: 10px; }
.wfmsg-tiny-pad, .wfmsg-icon-field { padding:2px; }

.wfmsg-icon-field { margin-right: 5px; display: inline-block; }
.navigation-icon.wfmsg-icon-field { cursor: pointer; }
.navigation-icon.wfmsg-icon-field:hover { outline: 2px solid #424242; }

.wfmsg-icon-field img { height: 24px; width: 24px; }
.small-icon.wfmsg-icon-field img, img.small-icon.wfmsg-icon-field { height: 16px; width: 16px; }

.wfmsg-icon-pad { float:left; padding: 5px; }
img.wfmsg-icon-pad { height: 24px; width: 24px; }
img.round.wfmsg-icon-pad {
    border-radius: 21px;
}
*.wfmsg-hover {
    padding: 2px;
    border-radius: 6px;
}
    *.wfmsg-hover:hover {  background-color: lightgray; }

/**
 * Text styles.  Keep this to a MINIMUM.
*/
label, .wfmsg-label-text { font-size: 10pt;font-weight:normal;padding-top:3px;padding-bottom:3px; }
    label.block {
        display: block;
    }
.wfmsg-body-text { font-size: 10pt; }

input.wfmsg-datepicker-control,
.wfmsg-input-text 
{
    font-size: 11pt;
    color:#424242; 
    font-weight:normal;
}

input.wfmsg-input-text,
input.wfmsg-datepicker-control
{
    height: 35px;
}

.wfmsg-tiny-text { font-size: 8pt; }
.wfmsg-small-text { font-size: 9pt; }
.wfmsg-copy-text { font-size: 10px; }
.wfmsg-medium-text {font-size: 12pt;}
.wfmsg-xlarge-text {font-size: 14pt;}
.wfmsg-xxlarge-text { font-size: 16pt;}

.wfmsg-watermark-text {font-size: 11pt; color: #CCCCCC;}
.wfmsg-large-text { font-size: 2.0em; }
.wfmsg-super-text { font-size: 2.5em; }
.wfmsg-giant-text { font-size: 3.0em; } 

.wfmsg-right-text { text-align:right; }
.wfmsg-left-text { text-align:left; }
.wfmsg-center-text { text-align:center; }
.wfmsg-bold-text { font-weight: 400; }

.wfmsg-label-text, .wfmsg-body-text
{
    color:#555555;
}

.wfmsg-input-down {  background-image:url(images/navigate_down.png); background-repeat:no-repeat; background-position:center; }    
.wfmsg-input-down:hover { background-color:#424242; } 

.wfmsg-hover-container { gbackground-color: transparent; }
    .wfmsg-hover-container:hover {
        background-color: #FEDB90;
        color: #424242 !important;
    }
.wfmsg-hover-container a,
.wfmsg-hover-container a:visited,
.wfmsg-hover-container a:hover { color: #424242 !important; }

.wfmsg-clickable-container { cursor: pointer; }

.wfmsg-vertical-menu { width:100%; position:relative;  }
.wfmsg-vertical-menu a { font-size:11pt; color:#555555; text-decoration:none; }
.wfmsg-vertical-menu a span { display:block; padding-left: 20px; padding-top:5px; padding-bottom:5px; } 
.wfmsg-vertical-menu li:hover > a { background-color:#333333; color:White; display:block;}
.wfmsg-vertical-menu li.selected {  background-color:#E4E4E4; }
.wfmsg-vertical-menu li.selected a { color:#555555; }
.wfmsg-vertical-menu li.selected:hover > a { color: White; }
.wfmsg-vertical-menu a img { border:none; float:left; padding-left: 20px; padding-top:6px; padding-bottom:5px; padding-right:5px; } 

a img { text-decoration:none; border:none; }
a img:hover { text-decoration: none; border: none; }
/** 
    * For testing the listview rendering.
    */
.wfmsg-vertical-menu .generic-item { background-color:transparent; }
.wfmsg-vertical-menu .generic-item a { padding:10px; display:block;}
.wfmsg-vertical-menu .generic-item a:hover { background-color:#333333; color:White; display:block;padding:10px; }
/* End */

/*Change to wfmsg naming convention? Worried this is too much */
.wfmsg-fg-green {
    color: #789600;
}
.wfmsg-fg-red {
    color: #CC3333;
}
.wfmsg-fg-blue { color:#0072c6; }
.wfmsg-fg-purple { color:#92019C ;}
.wfmsg-fg-yellow { color:#E4AC04 ; }
.wfmsg-fg-maroon { color:Maroon; }
.wfmsg-fg-gray { color: #AAAAAA; }
.wfmsg-fg-dark { color: #424242; }
.wfmsg-fg-white { color: white; }
.wfmsg-fg-orange { color: #FF9A02; }
.wfmsg-fg-brown { color: #A05000; }
.wfmsg-fg-seafoam { color: #009DAE; }

.wfmsg-box { border:1px solid #e4e4e4; box-shadow: 7px 7px 5px rgba(42, 42, 42, .4); }

.wfmsg-blackout { position:fixed; width:100%; height:100%; left:0px; top:0px; bottom:0px; background: url(../../Images/backgrounds/blackness.png); z-index:9999; display:none; }
.wfmsg-blackout .message { font-size:14pt;  padding:10px; color:#555; width:250px; min-height:32px; background-color:White; border:1px solid #555; position:absolute; top:50%; left:50%; margin-left:-125px; margin-top:-16px; }
.wfmsg-blackout .message .icon { position:relative; float:left; background: url(../../Images/backgrounds/loading2.gif) no-repeat; width:32px; height:32px;margin-right:10px; }

.wfmsg-logo-large { width:320px;height:320px; background-position: center; background-size: 320px 320px; }
.wfmsg-logo-medium { width:200px;height:200px; background-position: center; background-size: 200px 200px; }
.wfmsg-welcome-title { text-align:center; padding: 15px; }
.wfmsg-welcome-title span { font-size: 48px; color:White; }
.wfmsg-admin-welcome-title {
    text-align: center;
    padding: 15px;
}
.wfmsg-admin-welcome-title {
    font-size: 48px;
    color: White;
}

/**
 * jquery ui theme overrides 
 */
.ui-widget {  z-index:1999;font-family:Segoe UI, Tahoma, Verdana, Arial, sans-serif; /*font-size: 1.1em;*/ }
.ui-widget-content { color:#424242; }
/* .ui-dialog .ui-dialog-titlebar {padding: 5px; position: relative;  } */
.ui-widget-header { font-weight:normal; border: none; background: #015883; font-size: 20px; color: #ffffff;}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Segoe UI, Tahoma, Verdana, Arial, sans-serif; /*font-size: 1em;*/ }
/* .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } */
/* .ui-dialog .ui-dialog-buttonpane button { font-size:11pt; float: right; color:#424242; cursor: pointer; padding: 8px;  width:auto; overflow:visible; font-weight:normal; border-radius: 4px; } */
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #424242; background: #E3E3E3; font-weight: normal; color: #424242; outline: none; }
/* .ui-dialog .ui-dialog-titlebar-close { display:none; position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } */
.ui-datepicker table {width: 100%; font-size: 10px; border-collapse: collapse; margin:0 0 .4em; font-weight: normal; }
.ui-datepicker th { padding: .7em .3em; text-align: center; border: 0; font-size: 10px; font-weight: normal;  }

.ui-dialog {
	border-radius: 0px;
	padding: 2px;
	box-shadow: 0 0 30px #666666
}

.ui-dialog-titlebar-close {
	display: none;
}

/* .ui-dialog .ui-widget-header {background:#66A8FD; font-size:13pt; padding-left:5px; font-weight:normal; border-radius:0px; border: 0px;} */

.ui-dialog .ui-dialog-buttonpane button {
	background: #f9f9f9;
	color: #000000;
	font-size: 10pt;
	font-weight: normal;
	border: 1px solid #cccccc;
	padding: 8px;
}

	.ui-dialog .ui-dialog-buttonpane button:active {
		background-color: #DEE6F0;
		border: 1px solid #000000;
	}

	.ui-dialog .ui-dialog-buttonpane button:hover {
		background-color: #DEE6F0;
		border: 1px solid #000000;
	}

.ui-widget-overlay {
	background: #66a8fd;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/** JQUERY UI Accordion Overrides */
ui-accordion-header {
    font-size: 9pt !important;
    color: blue;
    background: #efefef;
    outline: none;
}

.ui-accordion-header-active {
    border-top: 1px solid #FEDB90;
    border-bottom: 0px solid #FEDB90;
    border-left: 1px solid #FEDB90;
    border-right: 1px solid #FEDB90;
    background: #ffffff;
}

.ui-accordion-content {
    padding: 5px 0px 10px 10px !important;
    font-size: 6pt;
}

.ui-accordion-content-active {
    border-top: 0px solid #FEDB90;
    border-bottom: 1px solid #FEDB90;
    border-left: 1px solid #FEDB90;
    border-right: 1px solid #FEDB90;
}

/** WFMSG Accordion Classes*/
.wfmsg-accordion {
    background-color: white;
}

    .wfmsg-accordion a span {
        font-size: 9pt;
        margin-left: 5px;
        color: blue !important;
        font-weight: normal;
    }

    .wfmsg-accordion h3 img {
        float: left;
        padding: 5px;
    }
    .wfmsg-accordion h3:after {
        content: '';
        clear: both;
    }

    .wfmsg-accordion .wfmsg-accordion-panel {
        padding-left: 10px;
    }
        .wfmsg-accordion .wfmsg-accordion-panel .icon {
            float: left;
            padding: 2px;
        }

    .wfmsg-accordion .wfmsg-accordion-content-link {
        font-size: 9pt;
        line-height: 16px;
        margin-left: 10px;
        color: blue;
    }

    .wfmsg-generic-clickable {
    } /*Check - Empty brackets*/

.wfmsg-master-page-banner
{
    color: #FEDB90;
    color: White;
}

.wfmsg-master-page-offset
{
    margin-left: 100px;
}

.wfmsg-breadcrumb-menu
{
    padding-left:5px;
    padding-top:2px;
    font-size: .9em;
    white-space:nowrap;
}        

/** ADD SHARED STUFF **/
.wfmsg-tree 
{
    display:block;
}        
        
.wfmsg-tree .wfmsg-tree-root /*check - Not sure if this is necessary?*/
{
    display:block;
}
        
.wfmsg-tree .wfmsg-tree-sub
{
    display:none;
    clear:both;
    margin-left:22px !important;               
}

.wfmsg-tree .wfmsg-tree-node
{
    display:table;
    width:100%;
}
                                  
.wfmsg-tree .wfmsg-tree-clicker
{
    display:table-cell; 
    vertical-align:middle;
    width:10px;
}
    .wfmsg-tree .wfmsg-tree-draggable {
    }

    .wfmsg-tree .wfmsg-tree-droppable {
    }

    .wfmsg-tree .wfmsg-tree-dragover {
    }

.wfmsg-tree a
{
    display:inline-block;
    padding:0px 4px 4px 0px;
    margin-left:3px;
    cursor:pointer;
}
        
.wfmsg-tree .wfmsg-node-text
{
    padding:5px 5px 5px 5px;
    display:table-cell;
    vertical-align:middle;
    white-space: normal;
    text-align: left;
}
        
.wfmsg-tree .wfmsg-node-image
{
    display:table-cell;
    vertical-align:middle;
    padding: 0px 0px 0px 5px;
    text-overflow: ellipsis;        
    width:16px;
}

    .wfmsg-tree .wfmsg-node-image img {
        width: 16px;
        height: 16px;
    }

    .wfmsg-tree .wfmsg-node-button {
        display: table-cell;
        padding: 0px;
        vertical-align: middle;
        margin-left: 5px;
    }
        
.wfmsg-tree input[type="checkbox"] 
{
    display:table-cell;
    vertical-align:middle;
    padding: 0px 5px 0px 5px;
}

/**
 * styles for block-type UI elements
 */
.wfmsg-monopoly-block { margin-right:5px; float:left; border:1px solid #E0E0E0; padding:1px; margin-bottom:10px; } 
.wfmsg-monopoly-block .header div { font-size: 1.7em; padding:3px; height:32px; }
.wfmsg-monopoly-block .day  { display:block; text-align:center; padding:2px; }
.wfmsg-monopoly-block.borderless { border:0px; }

/**
 * IE 10 specific rules
 *
input[disabled="disabled"][type="button"], input[disabled="disabled"][type="submit"]
{
    background-color:#CCCCCC;
    color: #E3E3E3;
}
*/
input[disabled="disabled"][type="button"]:hover, input[disabled="disabled"][type="submit"]:hover
{
    background-color:#CCCCCC;
    color: #E3E3E3;
    border:1px solid #a0a0a0; 
}

.wfmsg-position-relative
{
    position: relative;
}
                      
.wfmsg-scrollable-y
{
    overflow-y: auto;            
}

.wfmsg-scrollable-x
{
    overflow-x: auto;            
}

.wfmsg-shift-left
{
    float:left;
    margin-right:5px;
}

.wfmsg-shift-right
{
    float:right;
    margin-left:5px;
}

select[class="wfmsg-input-text"]{
    margin: 0;
    /**
     * For IE 8 Compatability, use padding technique
     */
    gpadding: 10px 0px 10px 2px;
    /**
     * But when we move on, use this instead.
     */
    height: 40px;
}
        
input[class="wfmsg-input-text"],
{
    height: 35px;
    line-height: 35px;
    margin: 0;
}

input.wfmsg-tiny-text[type='text']
{
    height: 20px;
    line-height: 20px;
    margin: 0;
}
.wfmsg-hidden
{
    display: none;
}

input[type='checkbox'],
input[type='radio']
{
    margin-right: 5px;
    vertical-align: text-bottom;
}
.wfmsg-margin-bottom
{
    margin-bottom: 5px;
}

blockquote
{
    padding: 10px 20px 10px 10px;
    display: inline-block;
    background-color: #E3E3E3;
    border-left: 10px solid #CCCCFF;
    font-size: 12px;
    color: #333;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
}
    blockquote.full {
        display: block;
        _width: 100%;
    }
    blockquote.warning-message {
        border-left: 10px solid #E4AC04;
    }
    blockquote.error-message {
        border-left: 10px solid #CC3333;
    }
    blockquote.info-message {
        border-left: 10px solid #789600;
    }

.wfmsg-dialog-header-option {
    position: absolute;
    top: 10px;
    right: 40px;
    height: 24px;
    width: 24px;
}
    .wfmsg-dialog-header-option.back {
        background-image: url(../../images/metro/24x24/arrow-back-wht-circle.png);
    }
    .wfmsg-dialog-header-option.back:hover {
        background-image: url(../../images/metro/24x24/arrow-back-orange-circle.png);
        cursor: pointer;
    }

div.wfmsg-table-view-container {
    width: 1100px;
}

table.wfmsg-table-view {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: Roboto;
}

    table.wfmsg-table-view th {
        text-align: left;
        margin: 0px;
        padding: 8px;
        white-space: nowrap;
        font-weight: 400;
    }

        table.wfmsg-table-view th:first-child {
            border-top-left-radius: 5px;
        }
        table.wfmsg-table-view th:last-child {
            border-top-right-radius: 5px;
        }

    table.wfmsg-table-view tr.square-header th:first-child {
        border-top-left-radius: unset;
    }

    table.wfmsg-table-view tr.square-header th:last-child {
        border-top-right-radius: unset;
    }

    table.wfmsg-table-view tr:last-child td:first-child {
        border-bottom-left-radius: 5px;
    }

    table.wfmsg-table-view tr:last-child td:last-child {
        border-bottom-right-radius: 5px;
    }

    table.wfmsg-table-view td {
        padding: 8px;
        white-space: nowrap;
        margin: 0px;
        vertical-align:middle;
    }

        table.wfmsg-table-view th.full, td.full { 
            width: 100%;
        }
    table.wfmsg-table-view th.half, td.half {
        width: 50%;
    }

    table.wfmsg-table-view td.img img {
        width: 24px;
        height: 24px;
    }

    table.wfmsg-table-view th.zero, td.zero {
        width: 0;
    }

        table.wfmsg-table-view th.center, td.center {
            text-align: center;
        }

        table.wfmsg-table-view th.right, td.right {
            text-align: right;
        }

        table.wfmsg-table-view td.wrap,
        table.wfmsg-table-view th.wrap {
            white-space: normal;
        }

    table.wfmsg-table-view tr[disabled='disabled'] {
        background-color: #eaeaea;
        color: unset;
        opacity: .6;
        pointer-events: none;
    }

table.sticky.wfmsg-table-view {
}

table.both.sticky.wfmsg-table-view thead th,
table.vertical.sticky.wfmsg-table-view thead th {
    position: sticky;
    z-index: 1;
    top: 0;
}

table.both.sticky.wfmsg-table-view thead th:first-child,
table.horizontal.sticky.wfmsg-table-view thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: green;
}
table.both.sticky.wfmsg-table-view td:first-child,
table.horizontal.sticky.wfmsg-table-view td:first-child {
    position: sticky;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    font-weight: 400;
}

table.hover.wfmsg-table-view tr:hover {
    background-color: #E7E7E7;
}

    table.wfmsg-table-view tbody tr:nth-child(odd) {
        background-color: #ECF4FC;
    }

    table.wfmsg-table-view tbody tr:nth-child(even) {
        background-color: white;
    }

    /**
     *   Inverted striping table style.
     */
    table.inverted.wfmsg-table-view tbody tr:nth-child(odd) {
        background-color: white;
    }

    table.inverted.wfmsg-table-view tbody tr:nth-child(even) {
        background-color: #ECF4FC;
    }

/**
     * No striping
    */
table.plain.wfmsg-table-view  tbody tr,
table.plain.wfmsg-table-view thead tr th {
    _background-color: white;
}
table.plain.wfmsg-table-view thead tr th {
    _color: unset;
}

table.wfmsg-table-view tr.footer {
    background-color: #FEDB90 !important;
}
table.wfmsg-table-view tr.edit {
    background-color: #8CB5E7 !important;
}
.table.wfmsg-table-view tr.selected {
    background-color: #FEDB90 !important;
}

table.wfmsg-table-plain {
    background-color: white;
}
    
    table.wfmsg-table-plain td {
        padding:2px;
        margin:0px;
    }

table.wfmsg-table-plain tr {
    background-color: white !important;
}

/* PAS - new table variant - plain with bottom borders. */
table.bordered.wfmsg-table-view {
    border-collapse: collapse;
}
    table.bordered.wfmsg-table-view tbody tr {
        background-color: white;
        border-bottom: 1px solid #D9D9D9;
    }

        table.bordered.wfmsg-table-view tbody tr:last-of-type {
            border-bottom: 0px;
        }

.wfmsg-dot {
    width: 22.5px;
    height: 22.5px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: content-box;
    -moz-box-sizing: border-box;
    border-radius: 50%;
    margin-top: 2px;
    margin-right: 2px;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
}
    .wfmsg-dot img {
        width: 64px;
        height: 64px;
        margin-top: -5px;
        margin-left: -5px;
        position: absolute;
        top: 50%;
        left: 50%;
    }

.small.wfmsg-dot img {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
}

.wfmsg-text-upper {
    text-transform: uppercase;
}

.wfmsg-list-participant {
    display: table;
    width: 100%;
    font-size: 0;
    margin-bottom: 10px;
    border-collapse: separate;
    border-bottom: 1px solid #AAAAAA;
    position: relative;
}
    .wfmsg-list-participant .participant-row {
        display: table-row;
        white-space: nowrap;
    }

        .wfmsg-list-participant .participant-row .cell {
            display: table-cell;
            padding: 5px;
            vertical-align: middle;
        }

        .wfmsg-list-participant .participant-row .chip {
            width: 10px;
        }

        .wfmsg-list-participant .participant-row .participant-image {
        }
        /*
            .wfmsg-list-participant .participant-row .participant-image > img {
                height: 52px;
                width: 39px;
            }

            .wfmsg-list-participant .participant-row .large.participant-image > img {
                height: 52px;
                width: 39px;
            }
            */

            .wfmsg-list-participant .participant-row .participant-image .add.badge {
                background-image: url('../../Images/Icons/g/32/check.png');
                background-size: cover;
                position: absolute;
                top: -5px;
                left: 40px;
                height: 24px;
                width: 24px;
            }

            .wfmsg-list-participant .participant-row .participant-image .remove.badge {
                background-image: url('../../Images/Icons/g/32/delete.png');
                background-size: cover;
                position: absolute;
                top: -5px;
                left: 40px;
                height: 24px;
                width: 24px;
            }

        .wfmsg-list-participant .participant-row .participant-text {
            width: 100%;
            font-size: 16px;
        }
        .wfmsg-list-participant .participant-row .full.participant-text {
            width: 100%;
        }
        .wfmsg-list-participant .participant-row .wrap.participant-text {
            white-space: normal;
        }
        .wfmsg-list-participant .participant-row .half.participant-text {
            width: 50%;
        }

            .wfmsg-list-participant .participant-row .participant-text .copyTitle3 {
                font-size: 20px;
            }

            .wfmsg-list-participant .participant-row .participant-text .bold.copyTitle3 {
                font-weight: 400;
            }

            .wfmsg-list-participant .participant-row .participant-text .bodyText {
                font-size: 10pt;
            }

        .wfmsg-list-participant .participant-row .cell .wfmsg-button {
            width: 100px;
            margin: 0px;
        }

div.rounded {
    border-radius: 10px;
}


.wfmsg-layout-table {
    width: 100%;
    display: table;
    vertical-align: top;
    border-collapse: separate;
    border-spacing: 5px;
}

    .wfmsg-layout-table .row {
        display: table-row;
        white-space: nowrap;
        margin-bottom: 10px;
    }
        .wfmsg-layout-table .row .cell {
            display: table-cell;
            padding: 5px;
            vertical-align: middle;
            white-space: nowrap;
        }
        .wfmsg-layout-table .row .full.cell {
            width: 100%;
        }

        .wfmsg-layout-table .row .wrap.cell {
            white-space: normal;
        }
        .wfmsg-layout-table .row .right.cell {
            text-align: right;
        }
        .wfmsg-layout-table .row .nopad.cell {
            padding: 0px;
        }

        .wfmsg-layout-table .row .cell img {
            width: 64px;
            height: 64px;
        }
            .wfmsg-layout-table .row .cell img.small {
                width: 32px;
                height: 32px;
            }

        .wfmsg-layout-table .row .cell span.title {
            font-size: 8pt;
            text-transform: uppercase;
        }
        .wfmsg-layout-table .row .cell span.data {
            color: maroon;
            font-weight: 400;
            font-family: Roboto, 'Segoe UI LIght', Tahoma;
            font-size: 20px;
        }
/**
   Styles for chart library.
*/
.wfmsg-center-pie-text {
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
    font-size: 28px;
    width: 100%;
    line-height: 250px;
}

/**
 * Styles for top-of-page status banner
*/
.wfmsg-status-banner {
    width: 100%;
    display: table;
}

    .wfmsg-status-banner > div {
        display: table-cell;
        vertical-align: middle;
        border-collapse: separate;
    }

        .wfmsg-status-banner > div:first-of-type {
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .wfmsg-status-banner > div:last-of-type {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

.bordered.wfmsg-status-banner > div:first-of-type {
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.bordered.wfmsg-status-banner > div:last-of-type {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

    .wfmsg-status-banner div.full {
        width: 100%;
    }

    /*
        Styles for agent images
    */

    .wfmsg-agent-image-small {
        height: 40px;
        width: 32px;
    }

    .wfmsg-agent-image-medium {
        height: 60px;
        width: 48px;
    }

    .wfmsg-agent-image-large {
        height: 125px;
        width: 100px;
    }

    .wfmsg-agent-image-xl {
        height: 250px;
        width: 200px;
    }

    .wfmsg-div-circle-medium { /* to be used in a div surrounding a circular image */
        width: 40px;
        height: 40px;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
    }

    .wfmsg-agent-image-circle-medium { /* to center a circular image */
        margin-top: -10px;
    }

.rounded.wfmsg-agent-image-small,
.rounded.wfmsg-agent-image-medium,
.rounded.wfmsg-agent-image-large,
.rounded.wfmsg-agent-image-xl {
    border-radius: 10px;
}

.wfmsg-table-view input[type='image'] {
    margin-top: 2px;
    background-color: #F9F9F9;
    border-radius: 4px;
    border: 1px solid #cccccc !important;
    margin: 0;
    height: 16px;
    width: 16px;
}
    .wfmsg-table-view input[type='image']:hover {
        background-color: #ECF4FC;
        _border: 1px solid black;
    }

.wfmsg-table-view .disabled.input[type='image'] {
    pointer-events: none;
    background-color: #eaeaea;
    color: #424242;
    opacity: .6;
}

/**
 * Style rules for image buttons.
 */
img .wfmsg-button {
    background-color: #F9F9F9;
    border-radius: 4px;
    border: 1px solid #cccccc;
    margin: 0;
}

    img.wfmsg-button:hover {
        background-color: #ECF4FC;
        border: 1px solid black;
    }

img.disabled.wfmsg-button {
    pointer-events: none;
    background-color: #eaeaea;
    color: #424242;
    opacity: .6;
}

img.small.wfmsg-button {
    height: 16px;
    width: 16px;
}

.wfmsg-highlighed,
tr.wfmsg-highlighted {
    background-color: #FEDB90 !important;
    font-weight: 400;
}
.subtotal.wfmsg-highlighed,
tr.subtotal.wfmsg-highlighted {
    background-color: #F8DDD7 !important;
    font-weight: 400;
}

.ui-participant-image-container {
    padding-left: 10px;
    border-radius: 10px;
}


table.wfmsg-review-status-selection {
    background-color: transparent;
}
    table.wfmsg-review-status-selection tr {
        background-color: white;
    }

    table.wfmsg-review-status-selection td.selected {
        border: 1px solid #000099;
        border-radius: 4px;
    }

    table.wfmsg-review-status-selection input[type='image'] {
        height: 24px;
        width: 24px;
    }

.wfmsg-master-page-title {
    display: inline-grid;
    font-family: Roboto, Segoe UI Light, Verdana;
    grid-template-columns: auto auto;
    cursor: pointer;
}
    .wfmsg-master-page-title .image {
        height: 125px;
        width: 110px;
        margin-right: 10px;
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .wfmsg-master-page-title .icon {
        height: 64px;
        width: 64px;
        margin-right: 10px;
        margin-top: 10px;
        grid-column: 1;

        grid-row: 1 / span 2;

    }

        .wfmsg-master-page-title .icon img {
            height: 64px;
            width: 64px;
        }

    .wfmsg-master-page-title .title {
        font-size: 3em;
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    .wfmsg-master-page-title .large.title {
        font-size: 4em;
    }

    .wfmsg-master-page-title .subtitle {
        font-size: 1.5em;
        grid-column: 2;
        margin: 0;
    }


.wfmsg-option-menu {
}

    .wfmsg-option-menu .row {
        display: grid;
        grid-template-areas: 'icon name';
        grid-template-columns: 30px auto;
        cursor: pointer;
    }

        .wfmsg-option-menu .row:hover {
            background-color: #FEDB90;
        }
        .wfmsg-option-menu .row .cell {
            vertical-align: middle;
            padding: 5px 10px 5px 10px;
        }

        .wfmsg-option-menu .row .icon.cell {
            grid-area: icon
        }

            .wfmsg-option-menu .row .icon.cell img {
                height: 24px;
                width: 24px;
            }

        .wfmsg-option-menu .row .name.cell {
            grid-area: name;
            line-height: 24px;
        }

.wfmsg-two-column-wrapper {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 10px 10px;
    margin: 10px 10px 0px 0px;
    grid-template-columns: 400px 32px auto;
    _grid-template-columns: repeat(400px, auto);
    grid-template-areas: 'tree trigger content';
    _transition: all .3s ease;
    overflow-y: auto;
}

    .wfmsg-two-column-wrapper .left {
        grid-area: tree;
        background-color: #f3ecec;
        padding: 10px;
        white-space: nowrap;
        overflow: auto;
        display: block;
    }

    .wfmsg-two-column-wrapper .slider-trigger {
        _position: absolute;
        _top: 95px;
        _left: 370px;
        display: block;
        z-index: 100;
        background: url(images/nav_left.png) no-repeat center;
        background: url(images/menu.png) no-repeat center;
        width: 32px;
        height: 32px;
        grid-area: trigger;
        margin-top: 5px;
    }

    .wfmsg-two-column-wrapper .right {
        grid-area: content;
        overflow-y: auto;
        padding: 0px 10px 0px 0px;
    }

.collapsed.wfmsg-two-column-wrapper {
    grid-template-columns: 1px 30px 1fr;
}

    .collapsed.wfmsg-two-column-wrapper .slider-trigger {
        left: 10px;
        background: url(images/nav_right.png) no-repeat center;
        background: url(images/menu.png) no-repeat center;
    }

    .collapsed.wfmsg-two-column-wrapper .left {
        display: none;
    }


.wfmsg-opacity-10 {
    opacity: .1;
}
.wfmsg-opacity-20 {
    opacity: .2;
}
.wfmsg-opacity-30 {
    opacity: .3;
}
.wfmsg-opacity-40 {
    opacity: .4;
}
.wfmsg-opacity-50 {
    opacity: .5;
}
.wfmsg-opacity-60 {
    opacity: .6;
}
.wfmsg-opacity-70 {
    opacity: .7;
}
.wfmsg-opacity-80 {
    opacity: .8;
}
.wfmsg-opacity-90 {
    opacity: .9;
}

/**
 * Styles for top-of-page status banner
*/
.wfmsg-sync-status {
    width: 100%;
    display: table;
}

    .wfmsg-sync-status > div {
        display: table-cell;
        vertical-align: middle;
        border-collapse: separate;
    }

        .wfmsg-sync-status > div:first-of-type {
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .wfmsg-sync-status > div:last-of-type {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

    .wfmsg-sync-status div.full {
        width: 100%;
    }

.wfmsg-validation-text {
    color: #cc3333;
    font-size: 8pt;
}
.bold.wfmsg-validation-text {
    font-weight: bold;
}
.wfmsg-invalid-text {
    text-decoration: line-through;
}