﻿/*##################################
CSS Variables
##################################*/

/*Reorder List*/

.row_deleted
{
	background-color:#ddd;
	color:#999;
	padding:5px 5px;
	font-size:12px;
}

.row_deleted td
{
	text-decoration:line-through;
}

.row_deleted input
{
	display:none;
}

.row_deleted input.delbtn
{
	display:inline;
	float:right;
	text-decoration:none;
}

.dragHandle {
	width:10px;
	height:15px;
	background-color:Blue;
	background-image:url(images/bg-menu-main.png);
	cursor:move;
	border:outset thin white;
}

.callbackStyle {
	border:thin blue inset;		
}

.callbackStyle table {
	background-color:#5377A9;	
	color:Black;
}


.reorderListDemo li {
	list-style:none;
	margin:2px;
	background-image:url(images/bg_nav.gif);
	background-repeat:repeat-x;
	color:#FFF;
}

.reorderListDemo li a {color:#FFF !important; font-weight:bold;}

.reorderCue {
	border:dashed thin black;
	width:100%;
	height:25px;
}

.itemArea {
	margin-left:15px;
	font-family:Arial, Verdana, sans-serif;
	font-size:1em;
	text-align:left;
}



body {
	padding: 0px !important;
	margin: 0px;
	font-family: var(--main-content-font-family) !important;
	font-size: 13px;
	color: var(--main-content-text-colour);
	background-image: var(--main-background-image);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: var(--body-background-colour) !important;
}

a, a:visited {
	color: var(--main-content-hyperlink-color);
	text-decoration: underline;
}

.iconbuttonstyle svg {
	background-color: var(--main-content-button-background-colour);
	background: none;
	background-image: none;
	color: var(--main-content-button-font-colour);
	border: none;
	width: 13px !important;
	height: 13px !important;
}

	.iconbuttonstyle svg.red {
		color: red;
	}

	.iconbuttonstyle svg.green {
		color: forestgreen;
	}

.status-icon, #TasksSection2 .status-icon {
	text-align: center;
	width: auto;
	background: none;
	display: block;
	margin: 4px !important;
}

.status-icon svg {
	border: none;
	background: none;
	/*background-color: var(--main-content-button-background-colour);*/
	/*height: 16px !important;*/
}

.status-icon svg.red {
	color: #ff0000;
	/*background-color: var(--main-content-button-background-colour);*/
	/*height: 16px !important;*/
}

	/*.status-icon svg:hover {
		border: 1px solid;
	}*/

/* Toast container: fixed in corner, click-through except on toasts */
.rf-toast-container {
	position: fixed;
	z-index: 9999;
	pointer-events: none; /* allow clicks to pass through container */
}
	.rf-toast-container.rf-toast-middle-page {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.rf-toast-container.rf-toast-bottom-right {
		bottom: 1rem;
		right: 1rem;
	}

.rf-toast-link {
	padding: 1rem 1.5rem 1rem 1.5rem;
	text-decoration: underline !important;
	width: 100%;
}

/*.rf-toast-link > svg {
	color: red;
}*/

/* Toast element: blocks interaction only on itself */
.rf-toast {
	background: lemonchiffon;
	color: black;
	/*padding: 1rem 1.5rem;*/
	margin-top: 0.5rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: auto; /* allow clicks only on the toast */
}

	/* Close button (X) */
	.rf-toast .rf-toast-close {
		background: none;
		border: none;
		color: red !important;
		font-size: 1.2rem;
		cursor: pointer;
		padding: 1rem 1.5rem 1rem 0rem;
	}

		.rf-toast .rf-toast-close > span {
			text-decoration: none !important;
			font-size: 1.5em;
			line-height: 0;
		}

	.rf-toast i, .rf-toast svg {
		padding-right: 1rem;
	}

/*##################################
COMMON WIDTH CSS
##################################*/
	#twocolum-leftbar1024 {
		margin: left;
		text-align: left;
	}
#twocolum-leftbar1024 #main {
	margin:left;
	
	}
#twocolum-leftbar1024 #leftbar {
	float:left;
	}
* html #twocolum-leftbar1024 #leftbar {
	margin-right:-3px;
	}
#twocolum-leftbar1024 #contentarea {
	margin:-17px 0 0 140px;
	}
#contentareaminimal {
	margin:5px 0 0 5px;
	}	
* html #twocolum-leftbar1024 #contentarea {
	margin:0 0 0 137px;
	}
/*##################################*/
/*##################################
CONTAINER CSS
##################################*/
#container {
	margin:0 10px;
	padding:10px 0 0 0;
	}
* html #contentarea {
	height:1px;
	}
#contentarea {
	}
.contenttxt {
	display:table;
	width:100%;	
	}
.sidebar {
	width:130px;
	}
.content {
	margin:0 15px;
	padding:10px 0 20px 0;
	}
	
.contentsmallmargins {
	margin:0 15px;
	padding:5px 0 5px 0;
	}
	
.contentnomargins {
	margin-right:15px;
	margin-bottom:0px;
	margin-top:0px;
	margin-left:0px;
	padding:5px 0 5px 0;
	}

/*##################################
TOPBAR CSS
##################################*/
#topbar {
	color:#FFFFFF;
	margin:left;
	position:relative;
	height:104px;
	}

#topbarminimal {
	color: #FFFFFF;
	margin: left;
	position: relative;
	padding: 0px 0;
	min-height: 0px;
	max-height: 55px;
	overflow-y: auto;
}

	#topbarminimal.show {
		display: block; /* Show the div only when it has content */
		min-height: 10px; /* Sidebar should appear only when content exceeds 20px */
		max-height: 55px;
	}

#topbar .logoimg{
	position:absolute;
	left:10px;
	top:10px;
	height:93px;
	width:130px;
	display:block;
}
#topbar .logoimg a{
	text-indent:-9999px;
	width:130px;
	height:93px;
	background-image:url(graphics/logo.jpg);
	background-repeat:no-repeat;
	position:absolute;
	left:0px;
	top:0px;
}
.topbarnavigation {
	position:absolute;
	right:10px;
	top:10px;
}
.topbarnavigation ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
	text-align:right;
}
.topbarnavigation ul li {
	font-family:var(--main-content-font-family);
	font-size:11px;
	float:right;
	margin:0;
	margin-left:8px;
}
.topbarnavigation li a {
	text-decoration:none;
	color:#FFFFFF;
	font-weight:bold;
	background-image:url(graphics/sidebar_topleftcurve.gif);
	background-repeat:no-repeat;
	background-position:left -19px;
	padding:0 0 0 3px;
	float:left;
	outline:none;
}
.topbarnavigation li a span {
	display:block;
	line-height:19px;
	padding:0px 10px 0px 7px;
	background-image:url(graphics/sidebar_toprightcurve.gif);
	background-repeat:no-repeat;
	background-position:right -19px;
}
.topbarnavigation li a:hover,
.topbarnavigation li .active {
	background-position:left 0;
	color:#558DC8;
}
.topbarnavigation li a:hover span,
.topbarnavigation li .active span{
	background-position:right 0;
}
.topbarnavigation .toptext{
	color:#FFFFFF;
	font-weight:bold;
	text-align:right;
	margin-top:15px;
}
.topbarsummary {
    position: absolute;
    left: 175px;
    top: 20px;
}
.topbarsummary span {
    font-weight: bold;
    left: auto;
    top: auto;
}
/*####################################
	Font Awesome Icon Css
#####################################*/
/* Main icon */
a.icon-font {
	color: var(--main-content-text-colour);
}
/* Sidebar icons */
.sidebarbox .icon-font {

}
/* page title icons */
h1 .icon-font {
	min-width: 18px;
	/*border: 1px solid #003873;*/
	/*padding: 7.5px;*/
	vertical-align: middle;
}


/*####################################
	Sidebar Css
#####################################*/
.sidebarboxmainborder {
	margin: 0 0 10px 0;
	border: var(--sidebar-menu-border-width) solid var(--sidebar-menu-border-colour);
	border-radius: var(--sidebar-menu-border-radius);
	position: relative;
}
* html .sidebarboxmainborder {
	height:1px;
}
.sidebarboxmainborder .lefttop, 
.sidebarboxmainborder .leftbot{
	left:-1px;
}
.sidebarboxmainborder .leftbot, 
.sidebarboxmainborder .rightbot {
	bottom:-1px;
}
.sidebarboxmainborder .rightbot, 
.sidebarboxmainborder .righttop {
	right:-1px;
}
.sidebarboxmainborder .righttop, 
.sidebarboxmainborder .lefttop {
	top:-1px;
}
.sidebarbox {
    margin: 0;
    border: 0px solid #083260;
    border-radius: 6px;
    padding: 8px 2px;
    background-color: rgba(13,61,112,0);
    min-height: 300px;
}

.sidebarboxmainborder .dxtlDataTable > tbody > tr > td > a {
	/*color: var(--sidebar-menu-parent-text-colour) !important;*/
	font-family: var(--sidebar-menu-font-family);
}

.menuparent {
	color: var(--sidebar-menu-parent-text-colour) !important;
}
.menuchild {
	color: var(--sidebar-menu-child-text-colour) !important;
}
/*====================================*/
.sidebarlinks {
}
.sidebarlinks .normal{
	color:var(--sidebar-menu-parent-text-colour);
	display:block;
	padding:2px 5px;
	position:relative;
	font-size:11px;
	background-image:url(graphics/sidebarlinkhoverbg.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	border:1px solid #19577B;
	font-weight:bold;
}
.sidebarlinks a{
	color:var(--sidebar-menu-parent-text-colour);
	display:block;
	padding:2px 5px;
	position:relative;
	font-size:11px;
	border:1px solid #0D3D70;
	text-decoration: none;
}
.sidebarlinks a:hover {
	color:var(--sidebar-menu-parent-text-colour);
	background-image:url(graphics/sidebarlinkhoverbg.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	border:1px solid #19577B;
}
.sidebarlinks .active {
	color:var(--sidebar-menu-parent-text-colour);
	background-image:url(graphics/sidebarlinkhoverbg.gif);
	background-repeat:repeat-x;
	background-position:left bottom;
	border:1px solid #19577B;
	font-weight:bold;
}
.sidebarlinks a img,
.sidebarlinks .normal img {
	position:absolute;
	right:5px;
	top:3px;
}
/*====================================*/
.sidebarlinks .sublinks {
	padding:5px 0px;
}
.sidebarlinks .sublinks .normal{
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	display:block;
	padding:2px 5px;
	background-color:#0D3D70;
	border:0px solid #E5DFB3;
	position:relative;
	background-image:none;
}
.sidebarlinks .sublinks a{
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	color:#FFFFFF;
	display:block;
	padding:2px 5px;
	background-color:#0D3D70;
	border:0px solid #E5DFB3;

	position:relative;
	background-image:none;
}
.sidebarlinks .sublinks a:hover {
	background-color:#0D3D70;
	background-image:none;
	color:#FFFFFF;
	border:0px solid #E5DFB3;
}
.sidebarlinks .sublinks a span, 
.sidebarlinks .sublinks .normal span{
	margin:0px;
	display:block;
}
.sidebarlinks .sublinks a img, 
.sidebarlinks .sublinks .normal img{
	position:absolute;
	top:4px;
	left:10px;
	width:8px;
}

.linkbutton1 {
	padding: 2px 20px 1px 20px;
	border: var(--main-content-button-border-width) Solid var(--main-content-button-font-colour);
	background-image: url(graphics/buttonbg.png);
	color: var(--main-content-button-font-colour); /*ButtonFontColour*/
}
/*##################################
CONTENT BOX CURVE CSS
##################################*/
.contentbox {
	margin: 0 0 10px 0;
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	min-height: 400px;
	border-radius: 0px 0px var(--main-header-border-radius) var(--main-header-border-radius);
}
* html .contentbox {
	height:1px;
}
.contentbox .lefttop, 
.contentbox .leftbot{
	left:-1px;
}
.contentbox .leftbot, 
.contentbox .rightbot {
	bottom:-1px;
}
.contentbox .rightbot, 
.contentbox .righttop {
	right:-1px;
}
.contentbox .righttop, 
.contentbox .lefttop {
	top:-1px;
}
* html .contentbox .leftbot, 
* html .contentbox .rightbot{
	bottom:-2px;
}

.subselectiontable { 
	width:100%;
	background-color:var(--main-background-colour);
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	font-family:var(--main-content-font-family);
	font-weight:normal;
	text-transform:uppercase;
    
    border-collapse: collapse;  
    border-spacing: 0px; 
    padding: 0px;
	height: 29px;
	border-radius:5px 5px 0 0;

}

.subselectiontable td {
	color:var(--main-content-wuc-header-ext-colour);

    padding: 0px;
}

.outerdivborder td {
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-left:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
}

.completeouterdivborder td {
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-left:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
	border-top:1px solid var(--main-content-textbox-border-colour);
}

.mainheader {
	background-color: var(--main-header-background-colour);
	border-bottom: 1px solid var(--main-content-textbox-border-colour);
	height: 51px;
	margin: 0 57px 0 0px;
	position: relative;
	border-radius: var(--main-header-border-radius) 0px 0px 0px;
}
.mainheader h1 {
	color: var(--main-header-text-colour);
	font-family: var(--main-content-font-family);
	font-size: 20px;
	padding: 7px 25px;
	font-weight: normal;
	text-transform: uppercase;
}
.mainheader img{
	margin-right:8px;
}

.mainheader .lefttop 
{
	left: -10px;
}
.mainheader .righttop 
{
	margin-right:0;
	right: -57px;
}
/*##################################
COMMON CSS
##################################*/
h1, h2, h3, h4 {
	margin:0px;
	padding:0px;
	}
a{
	text-decoration:none;
	}
.elink {
	color:#0038B3;
}
.elink:hover {
	color:#000000;
}
.lefttop {
	position:absolute;
	left:0px;
	top:0px;
}
.leftbot {
	position:absolute;
	left:0px;
	bottom:0px;
}
.righttop {
	position:absolute;
	right:0px;
	top:0px;
}
.rightbot {
	position:absolute;
	right:0px;
	bottom:0px;
}
.border {
	border:1px solid var(--main-content-textbox-border-colour);
}
.borderight {
	border-right:1px solid var(--main-background-colour);
}
.marginbottom {
	margin-bottom:10px;
}
.bg1 {
	/*background-image:url(graphics/bg1.gif);*/
	/*background-repeat:repeat-x;*/
	/*background-position:left top;*/
	padding:6px 10px;
	font-size:13px;
	margin:1px;
}
.bg2 {
	/*background-image:url(graphics/bg2.gif);*/
	background-repeat:repeat-x;
	background-position:left top;
	background-color:var(--main-background-colour);
	padding:6px 10px;
	font-size:13px;
	margin:1px;
}


/*##################################
display CSS
##################################*/
.startbtn{
	background-image:url(graphics/startbtn.gif);
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	height:22px;
	width:53px;
}
.startbtn:hover {
	background-position:0 -22px;
}
.startbtnactive {
	background-image:url(graphics/startbtn.gif);
	background-repeat:no-repeat;
	background-position:0 -22px;
	display:block;
	height:22px;
	width:53px;
}
.prevbtn{
	background-image:url('graphics/prevbtn.gif');
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	height:22px;
	width:30px;
}
.prevbtn:hover {
	background-position:0 -22px;
}
.prevbtnactive {
	background-image:url(graphics/startbtn.gif);
	background-repeat:no-repeat;
	background-position:0 -22px;
	display:block;
	height:22px;
	width:53px;
}
.nextbtn{
	background-image:url(graphics/nextbtn.gif);
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	height:22px;
	width:53px;
}
.nextbtn:hover {
	background-position:0 -22px;
}
.nextbtnactive {
	background-image:url(graphics/nextbtn.gif);
	background-repeat:no-repeat;
	background-position:0 -22px;
	display:block;
	height:22px;
	width:53px;
}
.endbtn{
	background-image:url(graphics/endbtn.gif);
	background-repeat:no-repeat;
	background-position:0 0;
	display:block;
	height:22px;
	width:53px;
}
.endbtn:hover {
	background-position:0 -22px;
}
.endbtnactive {
	background-image:url(graphics/endbtn.gif);
	background-repeat:no-repeat;
	background-position:0 -22px;
	display:block;
	height:22px;
	width:53px;
}
.mainbuttonstyle2 {
	background-color:#88B3F1;
	border-color:White;
	border-style:outset;
	font-weight:bolder;
	color:White;
	}
	
/* When changing mainbuttonstyle 
    Please also change dxbButton[class~="dxgvCommandColumnItem"] 
    to match any style changes which may require differnet style informatin*/

input[type=text] {
    border-radius: 1px !important;
}
button {
	border-radius: var(--main-content-button-border-width) !important;
	color: var(--main-content-button-font-colour); /*ButtonFontColour*/
}

input[type=button]:disabled, input[type=submit]:disabled, 
.mainbuttonstyle:disabled, .mainbuttonstyleDX:disabled, .mainbuttonstyle2:disabled {
	color: gray;
}

.mainbuttonstyle {
	cursor: pointer;
	background-color: var(--main-content-button-background-colour);
	border: var(--main-content-button-border-width) solid;
	color: var(--main-content-button-font-colour); /*ButtonFontColour*/
	border-color: var(--main-content-button-font-colour) var(--main-content-button-font-colour) var(--main-content-button-font-colour) var(--main-content-button-font-colour);
	filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#9cccf7');
	border-radius: 1px !important;
}
    .mainbuttonstyle:focus {
        border: 2px solid;
        border-color: #2C99DE #2C99DE #2C99DE #2C99DE;
    }

.iconbuttonstyle {
	cursor: pointer;
	background-color: var(--main-content-button-background-colour);
	border-width: 1px;
	color: var(--main-content-button-font-colour); /*ButtonFontColour*/
	padding: 3px 2px 3px 2px !important;
	border: 1px solid #00000000 !important;
}
	.iconbuttonstyle:focus {
		border: 2px solid;
		border-color: #2C99DE #2C99DE #2C99DE #2C99DE;
	}
	
	.iconbuttonstyle:hover {
		border: 1px solid #999 !important;
		filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#9cccf7');
		border-radius: 0.2em !important;
		border-color: #2C99DE #2C99DE #2C99DE #2C99DE;
	}

.iconbuttonmedium > svg {
	width: 16px !important;
	height: 16px !important;
}

.iconbuttonlarge > svg {
	width: 22px !important;
	height: 22px !important;
}

.dxbButton[class~="dxgvCommandColumnItem"]:not([data-isimage="true"]), .dxgvEditFormTable div.dxbButton {
	cursor: pointer;
	background-color: var(--main-content-button-background-colour);
	background: var(--main-content-button-background-colour);
	border: var(--main-content-button-border-width) solid;
	color: var(--main-content-button-font-colour); /*ButtonFontColour*/
	border-color: var(--main-content-button-font-colour) var(--main-content-button-font-colour) var(--main-content-button-font-colour) var(--main-content-button-font-colour);
	filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#9cccf7');
	border-radius: 1px !important;
}

	.dxbButton[class~="dxgvCommandColumnItem"]:not([data-isimage="true"]).dxbDisabled, .dxgvEditFormTable div.dxbButton.dxbDisabled {
		color: gray;
	} 

.generichideclass1 .generichideclass2 .generichideclass3 {
}

 .hyperlinkbuttonstyle ,.hyperlinkcolumnstyledx a {
    font: 12px Arial;
    text-decoration: none;
    background-color: var(--main-content-button-background-colour);
    color: #333333;
    padding: 1px 6px 1px 6px;
    border-top: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
    border-right: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
    border-bottom: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
    border-left: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
    Cursor : pointer;
    margin:2px;
    filter:progid:DXImageTransform.Microsoft.Gradient   
	(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffffff');   
    border-radius: 1px !important;
 }


.mainbuttonstyleDX {
	font: 12px Arial;
	cursor: pointer;
	background-color: var(--main-content-button-background-colour);
	/*padding: 1px 6px 1px 6px;*/
	border-top: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
	border-right: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
	border-bottom: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
	border-left: var(--main-content-button-border-width) solid var(--main-content-button-font-colour);
	filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffffff');
	background-image: none;
	color: var(--main-content-text-colour);
	text-align: center;
	text-decoration: none;
	border-radius: 1px !important;
	color: var(--main-content-button-font-colour) /*ButtonFontColour*/
	/*border-style: 1px solid #01305A;*/
} 

.mainbuttonstyleDX div.dxb {
    padding: 0px 7px 1px;
}

.font-button .mainbuttonstyle .font-button div.dxb {
	padding: 2px 0px 2px 4px !important;
}
.font-button .mainbuttonstyle .font-button span.dx-vam {
	display: none !important;
}

td.hyperlinkcolumnstyledx a {
	color: #000 !important;
}
a.hyperlinkbuttonstyle:visited {color: var(--main-content-button-font-colour); /*ButtonFontColour*/}
a.hyperlinkbuttonstyle:link {color: var(--main-content-button-font-colour); /*ButtonFontColour*/}		 
a.hyperlinkbuttonstyle:hover{color:#000;}		
a.hyperlinkbuttonstyle:active{color:#000;}		
a.hyperlinkbuttonstyle:focus{color:#000;}	
a.hyperlinkbuttonstyle:valid{color:Black;}	
a.hyperlinkbuttonstyle:invalid{color:Black;}	
a.hyperlinkbuttonstyle:default{color:Black;}
a.hyperlinkbuttonstyle {color: var(--main-content-button-font-colour); /*ButtonFontColour*/}
/*##################################
Table CSS
##################################*/
.colheader {
	/*background-image:url(graphics/bg2.gif);*/
	background-repeat:repeat-x;
	background-position:left top;
	background-color:var(--main-background-colour);
	padding:5px 5px;
	font-size:13px;
	color:#003873;
	margin:1px;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
}
.colheadersearch {
	/*background-image:url(graphics/bg2.gif);*/
	background-repeat:repeat-x;
	background-position:left top;
	background-color:#FFFF90;
	padding:5px 5px;
	font-size:13px;
	color:#003873;
	margin:1px;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
}
.colcontent {
	background-color:#FFFFFF;
	padding:5px 5px;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
	font-size:12px;
}
.colcontent1 {
	background-color:var(--main-background-colour);
	padding:5px 5px;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
	font-size:12px;
}

table.trcontent tr:nth-child(even) {
    background-color: var(--main-background-colour);
    padding: 5px 5px;
    border-bottom: 1px solid var(--main-content-textbox-border-colour);
    border-right: 1px solid var(--main-content-textbox-border-colour);
    font-size: 12px;
}

table.trcontent tr:nth-child(odd) {
    background-color: #FFFFFF;
    padding: 5px 5px;
    border-bottom: 1px solid var(--main-content-textbox-border-colour);
    border-right: 1px solid var(--main-content-textbox-border-colour);
    font-size: 12px;
}

table.trcontent table {

}

.colcontentsearch {
    background-color: #FFFF90;
    padding: 5px 5px;
    border-bottom: 1px solid var(--main-content-textbox-border-colour);
    border-right: 1px solid var(--main-content-textbox-border-colour);
    font-size: 12px;
}
.colcontentbold {
	background-color:var(--main-content-textbox-border-colour);
	padding:5px 5px;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
	font-size:12px;
	font-weight:bold;
}
.tabletopleftborder {
	border-top:1px solid var(--main-content-textbox-border-colour);
	border-left:1px solid var(--main-content-textbox-border-colour);
}
.colcontentinactive {
    background-color:var(--main-background-colour);
	padding:5px 5px;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
	font-size:12px;
	color: #555555;
}

.colcontentwhiteborderless {
    background-color: white;
    padding: 5px 5px;
    border-bottom: 0px ;
    border-right: 0px ;
    font-size: 12px;
}
.ratetable 
{
    background-color:var(--main-background-colour);
}

.ratetable td 
{
    text-align: center;
    font-size: 8pt;
    width: 100px;
}

/*===================================
COMMON FORM ELEMINTS CSS
===================================*/

input[type=text]:read-only, input[type=datetime]:read-only, input[type=number]:read-only,
textarea:read-only, select[read-only],
span.textboxborder, input[type=password]:read-only,
table.dxeReadOnly {
	border-left: 1px solid transparent !important;
	border-right: 1px solid transparent !important;
	border-top: 1px solid transparent !important;
}


	.dxeEditArea.dxeEditAreaSys:read-only:not(.RO), input[type=datetime]:read-only:not(.RO), input[type=number]:read-only,
	textarea:read-only, select[read-only],
	span.textboxborder, input[type=password]:read-only,
	table.dxeReadOnly {
		border-left: 1px solid transparent !important;
		border-right: 1px solid transparent !important;
		border-top: 1px solid transparent !important;
	}

.textboxborder {
	font-family:var(--main-content-font-family);
	font-size:12px;
	color:#000000;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	}
	
.textboxborderbottom {
	font-family:var(--main-content-font-family);
	font-size:12px;
	color:#000000;
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	}
.searchboxcolour
{
    background-color:#FFFF90 !important;
}
.searchboxborder {
	font-family:var(--main-content-font-family);
	font-size:12px;
	color:#999999;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	}	
.active {	
	border:1px solid #91A8C0;	
	background-color:var(--main-background-colour);
	}
em {
	/*for mandatory star */
	color:#FF0000;
	font-weight:bold;
	font-family:Verdana, var(--main-content-font-family);
	}
.fontsize11px {
	font-size:11px;
}
.formtextpad {
	padding:6px 10px;
	font-size:13px;
}

.formtextnopad {
	padding:0px 0px;
	font-size:13px;
}

.formpad {
	padding:3px 10px;
}

.wuctitle {
    font-family: var(--main-content-font-family);
    font-weight: normal;
    text-transform: uppercase;
    border-collapse: collapse;
    border-spacing: 0px;
    font-size: 13px;
}

/*##################################
FOOTER CSS
##################################*/
.clearfloat {
	font-size:0px;
	line-height:0px;
	height:1px;
	clear:both;
	/*background-color:#FF0000;*/
	}
#footer {
	text-align:right;
	}	
#footer .copyright{
	font-size:11px;
	color:#FFFFFF;
	/*background-image:url(graphics/copyrightbg.gif);*/
	background-repeat:repeat-x;
	padding:4px 10px 10px 10px;
}
#footer .links{
	text-align:center;
	font-size:12px;
	line-height:22px;
	color:#2C99DE;
	border-top:1px solid #D1D1D1;
	padding:10px 70px;
}
#footer .links a{
	color:#2C99DE;
}
#footer .links a:hover{
	color:#FF8D00;
}
#footer .links a img{
	vertical-align:middle;
	padding-left:6px;
}
#footer .links span{
	margin:0px 6px 0px 8px;
	color:#2C99DE;
	font-size:11px;
}
/*##################################
CSS for Panels
##################################*/

.panelLetterPreview  
{
    max-height:400px; 
    max-width:500px;
    overflow:auto; 
}

/*##################################
CSS for tabs
##################################*/

.menuTabs
{
    position:relative;
    top:1px;
    left:10px;
}
.tab
{
    border:1px solid var(--main-content-textbox-border-colour);
    border-bottom:none;
    padding:0px 10px;
    background-color:var(--main-background-colour);   
    color:Black;
}
.selectedTab
{
    border:1px solid var(--main-content-textbox-border-colour);
    border-bottom:Solid 1px white;
    padding:0px 10px;
    background-color:white;
}
.tabBody
{
    border:1px solid var(--main-content-textbox-border-colour);
    padding:20px;
    background-color:white;
}
.tabBody1
{
    border:1px solid var(--main-content-textbox-border-colour);
    padding:12px;
    background-color: white;
    /*filter:alpha(opacity=70);
    opacity:0.7;*/
}

/*##################################
File Manager CSS
##################################*/
.FileManager .dxgvHSDC {
    display: none;
}

.FileManager .colcontent1 {
    background-color: var(--main-background-colour) !important;
}

.FileManager .svg-inline--fa {
    color: var(--main-content-button-font-colour);
}

.FileManager .dxtvControl ul {
    overflow: none !important;
}

.FileManager .dxsplControl {
    border: 1px solid var(--main-content-textbox-border-colour);
}

.FileManager .dxWeb_fmMoveButton, .FileManager .dx .dxm-image-l .dxm-separator {
    display: none !important;
}

.FileManager .dxfm-folder .dxtv-ndTxt {
    margin-right: -1em !important;
}

.FileManager .dxfm-folder .dxtv-ndSel .dxtv-ndTxt {
    margin-right: -0.2em !important;
}


.FileManager .dxtv-nd > li.dxtv-subnd, .FileManager li.dxtv-subnd {
    overflow: hidden !important;
    width: 300%;
}


.FileManager .dxtvControl ul {
    overscroll-behavior: none !important;
    overflow-x: hidden;
    overflow-y: hidden;
}

.FileManager .dxtv-nd .dxfm-folder .impact-droppable, .FileManager .dxfm-mpFoldersC .dxtv-control {
	width: 100% !important;
}

.FileManager .dxfm-folderSI {
    border: 0px !important;
    font-weight: bold;
}

.FileManager .dxtvControl .dxtv-ndSel, .FileManager .dxfmControl .dxtvControl .dxfm-folderSI {
    font-weight: bold;
    background-color: unset !important;
    border: 0px !important;
    width: 20vw;
}

.FileManager .dxsplLCC .dxtv-control, .FileManager .dxsplLCC, .FileManager .dxsplP > tbody > tr:nth-child(2), .FileManager .dxsplP .dxgvCSD, .FileManager .dxfm-filePane, .FileManager .dxsplCC, .FileManager .dxsplP > tbody > tr > td:last-child {
    width: 100% !important;
}

	.FileManager .dxsplLCC .dxtv-control > div > ul > li {
		overflow-x: hidden;
	}

.FileManager .file-manager-folders .dxsplLCC {
    width: 10vw !important;
}

	.FileManager .file-manager-folders .dxsplLCC:hover, .FileManager .file-manager-folders .dxsplLCC:active {
		width: 20vw !important;
		transition-duration: 0.25s;
		transition-delay: 0.25s;
	}

    .FileManager .dxsplLCC > .dxtv-control > div > ul > li > span {
        display: none;
    }

    .FileManager .dxsplLCC > .dxtv-control > div > ul > li > ul > li {
        margin-left: 2px;
    }

.FileManager .dxfm-file .dxgv > div {
    overflow: auto;
}

.FileManager .dxm-image-l > li:nth-child(2), .FileManager .dxm-image-l > li:nth-child(2) {
    display: none !important;
}

.FileManager .dxgvControl {
	width: 100% !important;
}

.FileManager .dxtvControl .dxtv-elbNoLn, .FileManager .dxtvControl .dxtv-elb {
	width: 16px;
}

.FileManager .dxtvControl .dxtv-btn {
	margin-left: 2px;
}

.FileManager .dxfm-file span {
	color: initial;
}
/*##################################
Tree View CSS
##################################*/
.nodeThin {
	padding-top: 1px;
	padding-bottom: 1px;
}

td.nodeThin {
	padding-top: 1px;
	padding-bottom: 1px;
}



/*##################################
CSS for Calanders
##################################*/

.calanderstylemain {
	background-color: White;
	border:1px solid var(--main-content-textbox-border-colour);
}

.calanderstyledayheader {
	background-color:var(--main-background-colour);
}

.calanderstyleday
{
	background-color:var(--main-background-colour);
}

.linegaptd
{
	line-height:20px;
}


/*#################################
CSS for AIPForm
#################################*/

.maininfo
{
	width: 100%;
	padding: 5px 5px 5px 5px;	
}

.AIPhr
{
	width: 95%;
	text-align: center;
}
.applicantdetails
{
	width: 370px;
	padding: 5px 5px 5px 5px;
	float: left;	
}

.fullsizedetails
{
	width: 100%;
	padding: 5px 5px 5px 5px;
	float: left;	
}

.fullsizedetails p
{
	padding: 5px 15px 15px 15px;
}

.sectionheader
{
	font-weight: bold;
	text-align: center;
	line-height: 25px;	
}

.label 
{
	width: 166px;
	float: left;
}

.label150 {
	width: 150px;
}

.labelsmall 
{
	width: 75px;
	position: relative;
	float: left;
	text-align: center;	
}

.small
{
	color: #999999;
	font-size: 8pt;
}

.textbox
{
	width: 204px;
	height: 25px;
	float: left;
}

.textboxsmall
{
	width: 25px;
	height: 25px;
	position: relative;
	float: left;
}

.textboxmultiline
{
	width: 204px;
	height: 50px;
	float: left;
}

.textboxborderRO
{
	background-color: #FFFFFF;
	border: 0px;
}

.invisible
{
	display: none !important;
	float: left;
}

td.invisibleSubInput > input
{
	display: none !important;
	float: left;
}

.fixed {
    position: fixed !important;
}

.hidden{
    display:none;
}

.readonly
{
	background-color: #DDDDDD;
}

.submit
{
	width: 100%;
	text-align: center;
	padding: 0px 0px 0px 5px;
}

.clear
{
	clear: both;
}

/*#################################
CSS for Policy
#################################*/
.contentpage
{
	
}

.csscheckbox
{
	padding:1px;
	margin: 0 0 0 0.638em;
}

.csstxt, .csstxthalf, .csstxtthird, .csstxtsmall, .cssddl, .cssddlhalf
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	}

.csstxtlabel, .csstxthalflabel, .csstxtthirdlabel, .csstxtsmalllabel
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	padding:1px;
	width: 18em;
}

.cssddl, .cssddlhalf
{
    height: 18px;
}

.cssddlhalf, .csstxthalf
{
    width: 6em;
}

.RO 
{
	border:1px solid var(--main-content-textbox-readonly-border-colour);
	background-color: var(--main-content-textbox-readonly-bg-colour);
	color: #666666;
}

.listcheckbox
{
	padding:1px;
	margin: 0 0 0 0.638em;
}

.listtxt, .listtxthalf, .listtxtthird, .listtxtsmall, .listtxtDX
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 18em;
	/*background-color: var(--main-background-colour);*/
}

select.listtxt  {
    width: 18.3em;
}

.listtxtlabel, .listtxthalflabel, .listtxtthirdlabel, .listtxtsmalllabel
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 18em;
	/*background-color: var(--main-background-colour);*/
}

.listdate, .listdatehalf, .listdatethird, .listdatesmall, .listdateDX, .listdatehalfDX, .listddlhalfDX, .listddlDX
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 18em;
	/*background-color: var(--main-background-colour);*/
}

table.listdateDX > tbody > tr > td
, table.listdatehalfDX > tbody > tr > td
, table.listddlhalfDX > tbody > tr > td
, table.listddlDX > tbody > tr > td 
{
    padding: 0px !important;
}

.listdatelabel, .listdatehalflabel, .listdatethirdlabel, .listdatesmalllabel
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 18em;
	/*background-color: var(--main-background-colour);*/
}

.listdatehalf
{
    margin: 0 0 0 0.3em;
	width: 6em;
	height: 18px;
}

.listtxtDX
{
    display:inline-block;
  	height: 20px;
    width: 18.3em;
    border-collapse: collapse;
    overflow: hidden;
}

.listdatehalfDX
{
	margin: 0 0 0 0.3em;
	width: 7.5em;
	height: 17px;
    display:inline-block;
}

.listddlhalfDX
{
	margin: 0 0 0 0.938em;
	width: 7.5em;
    display:inline-block;
 	border:1px solid var(--main-content-textbox-border-colour);
    overflow: hidden;
}

.listddlDX
{
	margin: 0 0 0 0.85em;
    width: 18.4em;
    display:inline-block;
}



.listdatehalflabel
{
    margin: 0 0 0 0.3em;
	width: 6em;
	height: 19px;
}

.listtxthalf
{
	width: 8.25em;
    /*height: 19px;*/
}


select.listtxt {
    width: 8.55em;
}

.listtxtshort
{
    height: 14px !important;
}

.listddlshort
{
    height: 18px !important;
}
	
.listdate
{
	margin: 0 0 0 0.938em;
}

	
.listdateDX
{
	margin: 0 0 0 0.938em;
	width: 7.5em;
	height: 17px;
    display:inline-block;
}



.listtxtRO
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-readonly-border-colour);
	background-color: var(--main-content-textbox-readonly-bg-colour);
	color: #666666;
	padding: 1px;
	margin: 0 0 0 0.938em;
	width: 18em;
}

.listtxthalfRO
{
	font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-readonly-border-colour);
	background-color: var(--main-content-textbox-readonly-bg-colour);
	color: #666666;
	padding: 1px;
	margin: 0 0 0 0.938em;
	width: 8.25em;	
}

.listtxthalfblank
{
	border:1px solid var(--main-content-textbox-border-colour);		
	padding: 1px;
	margin: 0 0 0 0.938em;	
	width: 8.25em;
}

.listtxtblank
{
	border:1px solid var(--main-content-textbox-border-colour);		
	padding: 1px;
	margin: 0 0 0 0.938em;	
	width: 18em;		
}

.listtxtdropdown
{
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 18.25em;
}

.listtxthalfdropdown
{
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 8.50em;
}


.listtxtthird
{
	margin: 0 0 0 0.3em;
	width: 4em;
}

.listtxtthirdRO
{
    font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-readonly-border-colour);
	background-color: var(--main-content-textbox-readonly-bg-colour);
	color: #666666;
	margin: 0 0 0 0.3em;
	width: 4em;
}

.listtxtsmall
{
	width: 4em;
}

.listtxtsmallblank
{
	border:1px solid var(--main-content-textbox-border-colour);		
	padding: 1px;
	margin: 0 0 0 0.938em;	
	width: 4em;		
}

.listtxttwothirds
{
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
	width: 12em;
}



.dbmenu
{
	text-align: center;
	margin: 15px 0 0 0;
}
.dbmenutop
{
	text-align: center;
	margin: 0 0 15px 0;
}
.batchmailtxtbox
{
    width: 200px;
}
.batchmailddlbox
{
    width: 200px;
}
/*#############################
WUC Styles
#############################*/
.wucborder {
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-left:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
	padding: 2px;
}


/*#############################
one column layout for Case screen
#############################*/
.onecolumncase
{
	margin: 0 0 4px 0;
	width: 100%;
}

.onecolumncase ul
{
	list-style-type: none;	
	margin: 0px 0px 0px -5px;
	padding: 00px 0 0 20px;
}

.onecolumncase li
{
	margin: 2px 0 0 0;
}

.onecolumncase label
{
	width: 108px;
	float: left;
	text-align: left;	
	display: block;
}

.contentborder {
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-left:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
}

.contentborderbox {
	border-top: 1px solid var(--main-content-textbox-border-colour);
	border-bottom: 1px solid var(--main-content-textbox-border-colour);
	border-left: 1px solid var(--main-content-textbox-border-colour);
	border-right: 1px solid var(--main-content-textbox-border-colour);
}


/*#############################
strip column layout
#############################*/
.stripcolumn
{
	float:left;
	margin: 0 0 10px 10px;
}

.stripcolumn ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.stripcolumn li
{
	margin: 2px 4px 2px 0;
	padding: 0px;
}

.stripcolumn label
{
	width: 8em;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

.stripcolumn input
{
	margin: 0 0.5em;	
}



/*#############################
three column layout
#############################*/
.threecolumn
{
	float:left;
	margin: 0 0 10px 10px;
}

.threecolumn ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.threecolumn li
{
	margin: 2px 4px 2px 0;
	padding: 0px;
}

.threecolumn label
{
	width: 8em;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

.threecolumn input
{
	margin: 0 0.5em;	
}

/*#############################
three column layout for Case screen
#############################*/
.threecolumncase
{
	float:left;
	margin: 0 0 4px 0;
	width: 260px;
}

.threecolumncase ul
{
	list-style-type: none;	
	margin: 0px;	
	padding: 0px 0 0 20px;
}

.threecolumncase li
{
	margin: 2px 0 0 0;
}

.threecolumncase label
{
	width: 108px;
	float: left;
	text-align: left;	
	display: block;
}

/*#############################
two column layout
#############################*/
.twocolumn
{
	float:left;
	width:400px;
	/*border: 1 solid black;*/
}

.twocolumn ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.twocolumn li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.twocolumn label
{
	width: 9.4em;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

/*#############################
two column case layout
#############################*/
.twocolumncase
{
	float:left;
	width: 396px;
	/*border: 1 solid black;*/
}

.twocolumncase ul
{
	list-style-type: none;
	margin: 0px 0 0 0px;
	padding: 0px 0 0 10px;
}

.twocolumncase li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.twocolumncase label
{
    width: 108px;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

.twocolumncaseASPlabel 
{
    width: 108px;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

.twocolumncasetxt
{
    width: 230px;
    margin-left:10px;
    border:1px solid var(--main-content-textbox-border-colour);
    font-family: var(--main-content-font-family);
    font-size: 13px;
}

select .twocolumncasetxt 
{
    /*For dropdowns in chrome windows (different on mac)*/
    width:232px;
}

.twocolumncasetxt.ro {
    border: 1px solid var(--main-content-textbox-readonly-border-colour);
    background-color: var(--main-content-textbox-readonly-bg-colour);
    color: #666666;
}

.twocolumncasetxt.dx {
	width: 236px;
    display: inline-table;
}

.twocolumncasetxt.quarter {
    width: 65px;
}

.twocolumncasetxt.half {
    width: 115px;
}

.twocolumncasetxt.multiline {
    width: 230px;
	resize: vertical;
}

.twocolumncasetxtDX
{
    width: 230px;
    margin-left:20px;
    border:1px solid var(--main-content-textbox-border-colour);
}

.twocolumncasetxtDXCheckbox
{
    width: 230px;
    margin-left:5px;
}

.twocolumncasetxtwithcheckbox
{
width: 200px;
margin-left:10px;
border:1px solid var(--main-content-textbox-border-colour);
}

.twocolumncasetxtROwithcheckbox
{
width: 200px;
margin-left:10px;
border:1px solid var(--main-content-textbox-border-colour);
border:1px solid var(--main-content-textbox-readonly-border-colour);
background-color: var(--main-content-textbox-readonly-bg-colour);
color: #666666;
}


.twocolumncasetxtRO
{
    width: 230px;
    margin-left:10px;
    border:1px solid var(--main-content-textbox-border-colour);
    border:1px solid var(--main-content-textbox-readonly-border-colour);
	background-color: var(--main-content-textbox-readonly-bg-colour);
	color: #666666;
}

.twocolumncaseddl {
	width: 236px;
	margin-left: 10px;
	border: 1px solid var(--main-content-textbox-border-colour);
	font-family: var(--main-content-font-family);
}

.twocolumncaseddl.half {
	width: 121px;
}

.twocolumncaseddl.quarter {
	width: 71px;
}

.twocolumncasehalf
{
    width: 115px;
}

/*#############################
two column layout for find screen
#############################*/
.twocolumnfind
{
	float:left;
	width:400px;
	/*border: 1 solid black;*/
}

.twocolumnfind ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.twocolumnfind li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.twocolumnfind label
{
	width: 10em;
	float: left;	
	text-align:left;
	margin: 0 0.5em;
	display: block;
}

/*#############################
two column layout for AC
#############################*/
.twocolumnac
{
	float:left;
	width:400px;
	/*border: 1 solid black;*/
}

.twocolumnac ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.twocolumnac li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.twocolumnac label
{
	width: 8em;
	float: left;
	text-align: left;
	margin: 0 0.0em;
	display: block;
}

.dxCheckBox {
    margin-left: 0px;
    padding-left:0px;
    padding: 0px 0px 0px 0px;
}
/*#############################
five column layout for AC
#############################*/
.fivecolumn
{
	float:left;
	width:800px;
	/*border: 1 solid black;*/
}

.fivecolumn ul
{
	list-style-type: none;
}

.fivecolumn li
{
  
	margin: 4px 0 4px 0;
	padding: 0px;
}
  
.fivecolumnOne
{
    display:block;
    float: left;
    width: 110px;
    padding: 0 10px 0 0;
}

.fivecolumnTwo
{
    Width: 160px;
    font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
}

.fivecolumnThree
{   margin: 0 0 0 50px;
    display:inline-block;
    width: 160px;
    padding: 0 10px 0 0px;
}

.fivecolumnFour
{   
    font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
    width: 20em;
}

.acSubTotal
{
    float:left;
	width:400px;
	/*border: 1 solid black;*/
	margin: 5px 0 10px 0;
}

.acSubTotal ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.acSubTotal li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.acSubTotal label
{
    width:80px;
}

.acSubTotalText
{
    margin:0 0 0 101px; 
    width:80px;
    font-weight:bold;
}

.acSubTotalTB
{
    Width:156px;
    font-family:var(--main-content-font-family);
	font-size:12px;
	border:1px solid var(--main-content-textbox-border-colour);
	padding:1px;
	margin: 0 0 0 0.938em;
}

/*#############################
two column layout on minimal master page
#############################*/
.minimaltwocolumn
{
	width:48%;
	padding: 5px 5px 5px 5px;
	float: left;	
}

.minimaltwocolumn ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.minimaltwocolumn li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.minimaltwocolumn label
{
	width: 166px;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

/*#############################
custom form column layout
#############################*/
/*
customformtable
*/

.customdivtable
{
    display:table;
    width:800%;
    /*background-color:#DDEEFF;*/
    border:0px solid  #666666;
    border-spacing:10px;/*cellspacing:poor IE support for  this*/
    padding:5px;/* border-collapse:separate;*/
    
}
.customdivrow
{
   display:table-row;
   width:auto;
   padding-bottom:20px;
}
.customdivcell
{
    float:left;/*fix for  buggy browsers*/
    display:table-column;
    width:20em;
    /*background-color:#ccc;*/
    margin-right: 20px;
    height: 19px;
}

.wucCustomForm .twocolumncase label, .wucCustomForm .onecolumncase label {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

	.wucCustomForm .twocolumncase label:hover, .wucCustomForm .onecolumncase label:hover {
		overflow: visible;
		text-overflow: unset;
		position: relative;
		z-index: 1;
	}

		.wucCustomForm .twocolumncase label:hover > label, .wucCustomForm .onecolumncase label:hover > label {
			position: absolute;
			background-color: white;
			width: auto ;
		}


/*#############################
one column layout
#############################*/
.onecolumn
{
	width: 100%;
	padding: 5px 5px 5px 5px;
}

.onecolumn ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.onecolumn li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.onecolumn label
{
	width: 166px;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

.contentborder {
	border-bottom:1px solid var(--main-content-textbox-border-colour);
	border-left:1px solid var(--main-content-textbox-border-colour);
	border-right:1px solid var(--main-content-textbox-border-colour);
}

.buttoncolumn
{
	float:left; 	
	margin: 8px 0 0 0;
}

.buttoncolumn ul
{	
	list-style-type: none;
	margin: 0 0 0 0;
	padding: 0px;
}

.buttoncolumn li
{
	margin-top: 2px;
	margin-bottom: 4px;
	padding: 0px;
}

.buttonrow
{
	float:left;
	/*border: 1 solid black;*/
}

.buttonrow ul
{
	list-style-type: none;
	margin: 10px 0 0 1.25em;
	padding: 0px;
}

.buttonrow li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.buttonrow select
{
	float: left;
	text-align: left;
	margin-left: 2px;
	display: block;
}


.ModalPopupStyle
{
    border:2px solid var(--main-content-button-font-colour);
    padding:10px;
    background-color:white;
}

.modalBackground {
	background-color: var(--main-content-wuc-header-ext-colour);
	/*background-color:Gray;*/
	filter: alpha(opacity=60);
	opacity: 0.6;
}

div[style*="z-index: 100001"], div[style*="z-index: 100001"] > div, div[style*="z-index: 100001"] > div > div {
	border-radius: 5px !important;
	border: 0;
}

/*#############################
add product column layout
#############################*/
.addproductcolumn {
	float: left;
	width: 400px;
	/*border: 1 solid black;*/
}

.addproductcolumn ul
{
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

.addproductcolumn li
{
	margin: 4px 0 4px 0;
	padding: 0px;
}

.addproductcolumn label
{
	width: 10em;
	float: left;
	text-align: left;
	margin: 0 0.5em;
	display: block;
}

/*#############################
/* Floating � Pound sign styles*/
/*#############################
/* Floating � - Righthand column, Righthand Text Box */
.fprr
{
     position: absolute;
     left:667px;
     padding-top:2px;
     /*z-index:10;*/
     width:10px;
}
/* Floating � - Righthand column, Lefthand Text Box */
.fprl
{
     position: absolute;
     left:549px;
     padding-top:2px;
     /*z-index:10;*/
     width:10px;
}
/* Floating � - Popup Righthand Column, Righthand Text Box */
.fpprr
{
     position: absolute;
	 left: 382px;
     padding-top:2px;
     /*z-index:10;*/
     width:10px;
}
/* Floating � - Popup Lefthand Column, Lefthand Text Box */
.fppll
{
     position: absolute;
	 left: 155px;
     padding-top:2px;    
     width:10px;
}
/* Floating � - Lefthand threecolumn, Lefthand Text Box */
.fpl3
{
     position: absolute;
     left:140px;
     padding-top:1px;
     z-index:0;
     width:10px;
}
/* Floating � - Lefthand threecolumn, Righthand Text Box */
.fpl3b
{
     position: absolute;
     left:386px;
     padding-top:1px;
     z-index:0;
     width:10px;
}
/* Floating � - Righthand threecolumn, Lefthand Text Box */
.fpr3
{
     position: absolute;
     left:632px;
     padding-top:1px;
     z-index:0;
     width:10px;
}

/*
* Batch Email Styles
*/

#batchEmail
{
	overflow:auto;
	padding:10px;
}

#batchEmail #MessageDetails
{
	float:left;
	width:600px;
}

#batchEmail #MessageDetails span
{
	display:block;
	float:left;
	clear:left;
	width:160px;
	font-weight:bold;
}

#batchEmail #MessageDetails input
{
	display:block;
	float:left;
	clear:right;
	width:200px;
}

    /*For devexress dropdowns on the letter batch email controls*/
    #batchEmail #MessageDetails input.dxeEditArea {
        display: block;
        float: left;
        clear: right;
        width: 100%;
    }

    #batchEmail #MessageDetails input.twocolumncasetxt {
        padding-left: 2px;
    }

.RequiredField {
    background-color: #FF8F8F;
}


/*#################################
CSS for DevExpress
#################################*/

.pagecontrolactivetab {
    background-color: white;
}

.pagecontroltab {
	background-color:var(--main-background-colour);
}

.dxPageControlContent
{
    padding: 0px !important;
    border: none !important;
}


.CompletionListCssClass
{
    font-size: 11px;
    color: #000;
    padding: 3px 5px;
    border: 1px solid #999;
    background: #fff;
    width: 300px;
    float: left;
    z-index: 1000000;
    margin-left:0px;
}

.dxeListBox {
    background-color: white;
    border: 1px solid #A0A0A0;
    color: var(--main-content-text-colour);
    font: 12px Tahoma, Geneva, sans-serif;
    width: 70px;
    height: 109px;
    border-color: var(--main-content-textbox-border-colour);
}

.dxeListBoxItemSelected {
    color: var(--main-content-text-colour);
    background-color: var(--main-background-colour);
}

.dxeListBoxItemHover {
    color: var(--main-content-text-colour);
    background-color: #EEF9FB;
}
.dxeHC {
    background-color: var(--main-background-colour);
}
.dxeHLC {
    background-color: var(--main-background-colour);
}
.dxeHFC {
    background-color: var(--main-background-colour);
}

.dxeCalendarHeader {
    background-color: var(--main-background-colour);
}

.dxeCalendarFooter {
    background-color: var(--main-background-colour);
}

.dxeCalendarSelected {
    color: var(--main-content-button-font-colour);
    background-color: var(--main-content-button-background-colour);
}


/*DEV EXPRESS GRID CONTROLS*/
.dxgvControl {
	border: 1px solid var(--main-content-textbox-border-colour);
	font-family: var(--main-content-font-family);
	font-size: 13px;
}


.dxgvTable.dxgvRBB {
	border-bottom: 1px solid var(--main-content-textbox-border-colour);
}

.dxgvPagerBottomPanel.colcontent1 {
	border-bottom: 0px;
	border-right: 0px;
}

.dxgvDataRow td.dxgv {
	border-bottom: 1px Solid var(--main-content-textbox-border-colour);
	border-right: 1px Solid var(--main-content-textbox-border-colour);
}

.dxgvHeader {
	border: 1px Solid var(--main-content-textbox-border-colour);
}

.colcontent1.dxgvTitlePanel {
	border-right:0;
}

/*** Extracted from Advanced MI Report so it works on i.e Diary,***/
.dxss-trbe, .dxss-brbe, .dxss-lrbe, .dxss-rrbe, .dxssControlSys.icbem .dxss-inputTarget {
	border: 0;
}

/* disables spreadsheet drag and drop*/
.dxss-trbe, .dxss-brbe, .dxss-lrbe, .dxss-rrbe {
	display: none;
}

.dxssControlSys.icbem .dxss-inputTarget, .dxss-fh {
	background-color: transparent;
	border: 0;
}

.dxss-ast, .dxm-popupMain .dxm-shadow .dxm-popup {
	display: none;
}

.dxssControl .dxtcLite, .dxssControl .dxrControl .dxtcLite {
	background-color: white;
}

.dxss-md, .dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-leftIndent, .dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-spacer, .dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-rightIndent, .dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-sbWrapper, .dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-sbIndent, .dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-sbSpacer {
	border-top: 0px !important;
}

.dxtcLite.dxtc-bottom > .dxtc-stripContainer .dxtc-activeTab {
	background-color: white;
}

.dxtcLite > .dxtc-stripContainer .dxtc-activeTab.dxtc-activeTabHover {
	background-color: #F6FDFF !important;
}

.dxss-md, .dxtcLite > .dxtc-stripContainer .dxtc-tab, .dxtcLite > .dxtc-stripContainer .dxtc-activeTab {
	border: 1px solid var(--main-content-textbox-border-colour);
	border-style: solid !important;
}

.dxtc-leftIndent, .dxtc-spacer, .dxtc-filler, .dxtc-sbIndent, .dxtc-rightIndent {
	border-bottom: 1px solid var(--main-content-textbox-border-colour) !important;
}

.dxtc-spacer {
	padding: 1px;
}

.dxssControl .dxtcLite, .dxtcLite.dxtc-bottom > .dxtc-stripContainer {
	padding-bottom: 0;
}

.dxtc-activeTab {
	border-bottom: 0px !important;
	border-top: 1px solid var(--main-content-textbox-border-colour) !important;
	border-style: solid !important;
}

.dxtcLite > .dxtc-stripContainer .dxtc-tab {
	background-color: var(--main-background-colour);
}

.dxeButtonEditButton, .dxeSpinLargeIncButton, .dxeSpinLargeDecButton,
.dxeButtonEditButtonHover, .dxeSpinIncButtonHover, .dxeSpinDecButtonHover, .dxeSpinLargeIncButtonHover, .dxeSpinLargeDecButtonHover {
	background: transparent;
	border: none;
}

.dxeButtonEdit.dxeButtonEditSys {
	min-height: 25px;
}

/*DEV EXPRESS PopOutDivContent */
.PopOutDivContent {
	/*overflow-y: none;*/
	/*position: relative;*/
	overflow: visible;
	/*top: 25%;*/
	left: 1%;
	width: 99%;
	/*height: 50%;*/
	padding: 0px;
	border: 0px solid black;
	background-color: white;
	/*z-index: 1002;*/
}
.PopOutDivContentInner {
    /*overflow-y: none;*/
    /*position: relative;*/
    overflow:visible;
    /*top: 25%;*/
    /*left: 1%;
    width: 94%;*/
    /*height: 50%;*/
    padding: 16px;
    border: 1px solid black;
    background-color: white;
    /*z-index: 1002;*/
            
}
.PopOutDivContentBack {
    /*overflow-y: none;*/
    position: absolute;
    overflow: visible;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    padding: 16px;
    border: 1px solid black;
    background-color: black;
    /*z-index: 1002;*/
    opacity: .4;
    filter: alpha(opacity = 40);
}

/* DevExpress Apply RO to select/dropdown inputs*/
.dxeReadOnly.RO > tbody > tr > td > input:read-only {
	border: 1px solid var(--main-content-textbox-readonly-border-colour);
	background-color: var(--main-content-textbox-readonly-bg-colour);
	color: #666666;
}


/* Rank fix for changed control heights*/
#ctl00_ContentPlaceHolder1_SignOn_ClientRank {
    height: 19px !important;
}

/* Style of the Spreadsheetview for the report screen */
@media (max-width: 1200px) {
	div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_Grid {
		height: 96% !important;
		min-height: 55vh !important;
	}

	div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_ScrollContainer, div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_WBC, div#ctl00_ContentPlaceHolder1_spreadsheetSheetView {
		height: 100% !important;
		min-height: 57.5vh !important;
	}

	div#ctl00_ContentPlaceHolder1_upSheetView {
		height: 100% !important;
		min-height: 60vh !important;
	}
}

@media (min-width: 1201px) {

	div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_Grid {
		height: 96% !important;
		min-height: 62vh !important;
	}

	div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_ScrollContainer, div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_WBC, div#ctl00_ContentPlaceHolder1_spreadsheetSheetView {
		height: 100% !important;
		min-height: 64.5vh !important;
	}

	div#ctl00_ContentPlaceHolder1_upSheetView {
		height: 100% !important;
		min-height: 67vh !important;
	}
}

@media (min-width: 1601px) {

	div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_Grid {
		height: 96% !important;
		min-height: 70vh !important;
	}

	div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_ScrollContainer, div#ctl00_ContentPlaceHolder1_spreadsheetSheetView_WBC, div#ctl00_ContentPlaceHolder1_spreadsheetSheetView {
		height: 100% !important;
		min-height: 72.5vh !important;
	}

	div#ctl00_ContentPlaceHolder1_upSheetView {
		height: 100% !important;
		min-height: 75vh !important;
	}
}


.cssWidth50 {
	min-width: 50px !important;
	max-width: 50px !important;
	width: 50px !important;
}


.cssWidth100 {
	min-width: 100px !important;
	max-width: 100px !important;
	width: 100px !important;
}

.cssWidth150 {
	min-width: 150px !important;
	max-width: 150px !important;
	width: 200px !important;
}

.cssWidth200 {
	min-width: 200px !important;
	max-width: 200px !important;
	width: 200px !important;
}



/*#############################
/* Google Calendar Styles */
/*#############################*/
.CalendarListBox {
	width: 100%;
	border: 1px solid var(--main-content-textbox-border-colour);
	border-bottom: 1px solid var(--main-content-textbox-border-colour);
	border-right: 1px solid var(--main-content-textbox-border-colour);
	overflow: scroll;
}

#CalendarData ul {
	list-style-type: none;
	margin: 10px 0 0 0px;
	padding: 0px;
}

#CalendarData li {
	margin: 4px 0 4px 0;
	padding: 0px;
}

#CalendarData label {
	width: 60px;
	float: left;
	display: block;
}

.ajax__calendar_container{
	z-index: 10;
}

/*#################################
MaskedEdit Related Styles
#################################*/
.MaskedEditFocus {
	background-color: #ffffcc;
	color: #000000;
}

.MaskedEditMessage {
	color: #ff0000;
	font-weight: bold;
}

.MaskedEditError {
	background-color: #ffcccc;
}

.MaskedEditFocusNegative {
	background-color: #ffffcc;
	color: #ff0000;
}

.MaskedEditBlurNegative {
	color: #ff0000;
}

/*#################################
Horizontal seperator in companies house search
#################################*/
.seperator {
	width: 100%;
	height: 1px;
	color: var(--main-content-textbox-border-colour);
	background-color: var(--main-content-textbox-border-colour);
	border-width: 0;
	margin-top: 0;
	margin-bottom: 0;
}


/*

.FoldersHideRoot > div > div > div > ul > li > *:not(ul) {
	display: none !important;
}

.FoldersHideRoot > div > div > div > ul > li > ul > li {
	margin-left: 0px;
}*/



/*#################################
Helper CssClasses
##################################*/
.wrap, label.wrap > label {
	text-overflow: unset !important;
	overflow: visible !important;
	white-space: normal !important;
	position: unset !important;
}

.no-wrap > label.no-wrap > label {
	text-overflow: unset !important;
	overflow: visible !important;
	white-space: nowrap !important;
}

label.full-width, label.full-width > label {
	width: 8.3em;
}

span {
	font-size: inherit;
	color: inherit;
}


.font-weight-bold, .font-weight-bold > label {
	font-weight: bold !important;
}

.font-weight-normal, .font-weight-normal > label {
	font-weight: normal !important;
}

.font-italic, .font-italic > label {
	font-style: italic !important;
}

.font-oblique {
	font-style: oblique !important;
}
/*

*/

.mfacb > input[type=checkbox] {
	margin-left: 0;
	border-color: var(--main-content-textbox-border-colour);
}

.mfa-alternate {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid black;
	border-radius: var(--main-content-textbox-border-radius);
	width: 100%;
	max-width: 270px;
	color: var(--main-content-text-colour);
}

	.mfa-alternate:not(:last-child) {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom:none;
	}
	.mfa-alternate:not(:last-child):not(:first-child) {
		border-radius: 0;
		border-bottom: none;
	}
	.mfa-alternate:last-child {
		border-top-left-radius: 0;
		border-top-right-radius: 0
	}

	.mfa-alternate:hover {
		background-color: var(--main-background-colour);
	}

.mfa-options {
	margin-top:50px;
	display: flex;
	flex-direction: column;
	align-items: center;
}