:root {
    --primaryColor: #0073AC;
    --lightPrimaryColor: #0073AC;
    --secondaryColor: #F7972D;
    --lightSecondaryColor: #FDE8D1;
    --siteBackground: #FFFFFF;
    --siteForeground: #000000;
    --lightOffset: #303030;
    --darkOffset: #FFFFFF;
    --menuHeaderColor: #505050;
    --siteLinkColor: #303030;
    --harmonyBreadCrumbColor: #FFFFFF;
    --buttonTextColor: #FFFFFF;
    --calendarIcon: url(../Images/calendar-light.png);
    --iconBrightnessFilter: 20%;
    --darkTextColor: #222222;
    --lightTextColor: #FFFFFF;
    --linkFontWeight: 400;
    --redColor: #db3e32;
    --greenColor: #32a852;
    --greyColor: #c7c7c7;
    --dividerLineColor: #AAAAAA;
    --loadImage: url(../Images/ripple-blue-light.gif);
}

[data-theme="default-light"] {
    --primaryColor: #0073AC;
    --lightPrimaryColor: #0073AC;
    --secondaryColor: #F7972D;
    --lightSecondaryColor: #FDE8D1;
    --siteBackground: #FFFFFF;
    --siteForeground: #000000;
    --lightOffset: #303030;
    --darkOffset: #FFFFFF;
    --menuHeaderColor: #505050;
    --siteLinkColor: #303030;
    --harmonyBreadCrumbColor: #FFFFFF;
    --buttonTextColor: #FFFFFF;
    --calendarIcon: url(../Images/calendar-dark.png);
    --iconBrightnessFilter: 20%;
    --darkTextColor: #222222;
    --lightTextColor: #FFFFFF;
    --linkFontWeight: 400;
    --greyColor: #c7c7c7;
    --dividerLineColor: #AAAAAA;
    --loadImage: url(../Images/ripple-blue-light.gif);
}

[data-theme="default-dark"] {
    --primaryColor: #0073AC;
    --lightPrimaryColor: #0073AC;
    --secondaryColor: #F7972D;
    --lightSecondaryColor: #FDE8D1;
    --siteBackground: #222222;
    --siteForeground: #FFFFFF;
    --lightOffset: #FFFFFF;
    --darkOffset: #303030;
    --menuHeaderColor: #FFFFFF;
    --siteLinkColor: #E0E0E0;
    --harmonyBreadCrumbColor: #FFFFFF;
    --buttonTextColor: #FFFFFF;
    --calendarIcon: url(../Images/calendar-light.png);
    --iconBrightnessFilter: 100%;
    --darkTextColor: #222222;
    --lightTextColor: #FFFFFF;
    --linkFontWeight: 700;
    --greyColor: #575757;
    --dividerLineColor: #FFFFFF;
    --loadImage: url(../Images/ripple-blue-dark.gif);
}

[data-theme="alternate-light"] {
    --primaryColor: #6D4AFF;
    --lightPrimaryColor: #6D4AFF;
    --secondaryColor: #FE9832;
    --lightSecondaryColor: #FFDEB8;
    --siteBackground: #FFFFFF;
    --siteForeground: #000000;
    --lightOffset: #303030;
    --darkOffset: #FFFFFF;
    --menuHeaderColor: #505050;
    --siteLinkColor: #303030;
    --harmonyBreadCrumbColor: #FFFFFF;
    --buttonTextColor: #FFFFFF;
    --calendarIcon: url(../Images/calendar-dark.png);
    --iconBrightnessFilter: 20%;
    --darkTextColor: #222222;
    --lightTextColor: #FFFFFF;
    --linkFontWeight: 400;
    --greyColor: #c7c7c7;
    --dividerLineColor: #AAAAAA;
    --loadImage: url(../Images/ripple-purple-light.gif);
}

[data-theme="alternate-dark"] {
    --primaryColor: #6D4AFF;
    --lightPrimaryColor: #6D4AFF;
    --secondaryColor: #FE9832;
    --lightSecondaryColor: #FFDEB8;
    --siteBackground: #222222;
    --siteForeground: #FFFFFF;
    --lightOffset: #FFFFFF;
    --darkOffset: #303030;
    --menuHeaderColor: #FFFFFF;
    --siteLinkColor: #E0E0E0;
    --harmonyBreadCrumbColor: #FFFFFF;
    --buttonTextColor: #FFFFFF;
    --calendarIcon: url(../Images/calendar-light.png);
    --iconBrightnessFilter: 100%;
    --darkTextColor: #222222;
    --lightTextColor: #FFFFFF;
    --linkFontWeight: 700;
    --greyColor: #575757;
    --dividerLineColor: #FFFFFF;
    --loadImage: url(../Images/ripple-purple-dark.gif);
}

html, Body
{
	height: 100%;
}
html
{
	width: 100%;
}
body.waiting * {
    cursor: progress;
}
body {
    margin: 0;
    min-width: 1260px;
    padding-left: 0px;
    padding-right: 0px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--lightOffset);
    background-color: var(--siteBackground);
    font-family: Poppins, Arial, sans-serif;
    padding-top: 0px;
    direction: ltr;
    text-align: left;
    font-size: 90%;
}

.roundTopCorners {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--siteBackground) !important;
    border-color: var(--primaryColor) !important;
    border-width: 1px 1px 0px 1px !important;
    border-style: solid !important;
    color: var(--siteForeground);
}

.roundTopCorners:hover {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-color: var(--primaryColor) !important;
    background-color: var(--secondaryColor) !important;
    border-width: 1px 1px 0px 1px !important;
    border-style: solid !important;
    color: var(--lightTextColor);
}

.roundTopCornersSelected {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-color: var(--primaryColor) !important;
    background-color: var(--primaryColor) !important;
    border-width: 1px 1px 0px 1px !important;
    border-style: solid !important;
    color: var(--lightTextColor);
}

#ctl00_tCPH_UltraWebTab1_cp {
    border-radius: 0px 5px 5px 5px;
    border-color: var(--primaryColor) !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-color: var(--siteBackground) !important;
    padding: 12px !important;
}

input[type="checkbox"] {
    accent-color: var(--primaryColor);
}

.harmonyBreadCrumb button {
    background-color: var(--secondaryColor) !important;
}

.harmonyBreadCrumb .ui-selectmenu-button {
    background-color: var(--secondaryColor) !important;
}

#ctl00_tCPH_UltraWebTab1_tbl tr td:last-child {
    border-style: none !important;
}

.useIconBrightnessFilter {
    filter: brightness(var(--iconBrightnessFilter));
}

.siteTextColor {
    color: var(--siteForeground) !important;
}

.redText {
    color: #db3e32 !important;
}

.greenText {
    color: #32a852 !important;
}

.redButton {
    background-color: #db3e32 !important;
}

.greenButton {
    background-color: #32a852 !important;
}

#tblMenu {
    width: 100%;
    height: 40px;
    padding: 0px;
    margin: 0px;
    background-color: var(--primaryColor);
}

img[src*="Images/svg/edit.svg"] {
    cursor: pointer;
}

img[src*="Images/svg/close.svg"] {
    cursor: pointer;
}

table.dataTable td a {
    color: var(--siteForeground) !important;
    text-decoration: underline !important;
    /*font-weight: var(--linkFontWeight);*/
}

#tblMenu td {
    padding: 0px;
}
#tblMenu .rmItem a
{
	height: 34px;
	font-size: 13px;
	padding: 0px 18px 0px 18px;
}

.ui-state-default {
    border: inherit;
    color: inherit;
    background-color: inherit;
}

/* the telerik radMenu is skinned blackMetro - these override colors for harmony look */
.rmItem, div.rmRootGroup, ul.rmRootGroup {
    background-color: var(--primaryColor) !important;
}

    .rmSelected, .rmItem:hover {
        background-color: var(--secondaryColor) !important;
        color: var(--lightOffset) !important;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

input {
    background-color:var(--siteBackground);
    color:var(--siteForeground);
}

.rmRootLink,  rmRootGroup   
{
    border: none !important;   
    padding-top:0; 
    margin-top:0;
   }
 
/* radGrid  */
.rgHeader, .rgHeader a {
    font: 13px Poppins, Arial, sans-serif !important;
    height: 30px !important;
    background-color: var(--primaryColor) !important;
    border-left-style: none !important;
}

.RadGrid_Metro .rgHeaderDiv {
    border-right-color: transparent !important;
}

.rgMasterTable {
    font: normal 13px Poppins, Arial, sans-serif !important;
    /*line-height: 30px !important;*/
}

.rgRow td, .rgAltRow td {
    height: 30px !important;
    color: var(--lightOffset);
    text-decoration: none !important;
    border-bottom-style: solid !important;
    border-top-style: none !important;
    border-left-style: none !important;
    border-right-style: none !important;
}

/*.rgRow td a, .rgAltRow td a {
    color: var(--primaryColor) !important;
    text-decoration: none !important;
    font-weight:var(--linkFontWeight);
}*/

.rgRow td a, .rgAltRow td a {
    color: var(--siteForeground) !important;
    text-decoration: underline !important;
}

.RadGrid div.rgHeaderWrapper {
    border: none !important;
}

.RadGrid_Metro {
    border: none !important;
    background-color: transparent !important;
    color: var(--siteForeground) !important;
}

.RadGrid .rgRow > td {
    padding-top: 4px !important;
    padding-bottom: 2px !important;
}

.rgDataDiv {
    background-color: transparent !important;
}

.RadInput_Metro .riTextBox, html body .RadInputMgr_Metro {
    background-color: var(--siteBackground) !important;
    color: var(--siteForeground);
}

html body .RadInput_Metro .riTextBox, html body .RadInputMgr_Metro {
    color: var(--siteForeground) !important;
}

html body input[type=text]:focus .RadInput_Metro .riTextBox .riFocused, html body .RadInputMgr_Metro {
    color: var(--darkTextColor) !important;
}

html body input[type=text]:focus .RadInput_Metro .riTextBox .riHover, html body .RadInput_Hover_Metro {
    color: var(--darkTextColor) !important;
}

.riSingle .RadInput .RadInput_Metro {
    color: var(--siteForeground);
}

table.dataTable td {
    background-color: var(--siteBackground) !important;
    color: var(--siteForeground) !important;
}

.darkText {
    color: var(--darkTextColor) !important;
}

/* row colors */
    .rgRow {
    background-color: var(--siteBackground) !important;
}
.rgAltRow {
    background-color: var(--siteBackground) !important;
}   
.LightCoral  {
    background-color:#F08080 !important;
} 
.LightGray  {
    background-color:#D3D3D3 !important;
}   
.LightGreen  {
    background-color:#90EE90 !important;
}   
.SkyBlue  {
    background-color:#87CEEB !important;
}      
.PaleYellowColor  {
    background-color:#FFFF84 !important;
}        
.Cornsilk  {
    background-color:#FFF8DC !important;
}       
.Tan  {
    background-color:#D2B48C !important;
} 
.LightPink  {
    background-color:#FFB6C1 !important;
}
.Khaki  {
    background-color:#F0E68C !important;
}  
.BlueGreen  {
    background-color:#4DBAC8 !important;
}

.TotalRow  {
    background-color:var(--greyColor) !important;
    font-weight:bold;
}

/* flag colors */
.PurpleFlag {
    background-color: #D8B4D8 !important;
}
.OrangeFlag {
    background-color: #FCCA87 !important;
}
.RedFlag {
    background-color: #FFA8A8 !important;
}
.YellowFlag {
    background-color: #FFFF88 !important;
}
.GreenFlag {
    background-color: #91D389 !important;
}
.BlueFlag {
    background-color: #97DDFF !important;
}
.GreyFlag {
    background-color: #A6A6A6 !important;
}
.LightBlueFlag {
    background-color: #D5F1FF !important;
}
.LightOrangeFlag {
    background-color: #FDE6C6 !important;
}
.PinkFlag {
    background-color: #FFCBE0 !important;
}
.BlueGreenFlag {
    background-color: #92E7CB !important;
}
.LightGreenFlag {
    background-color: #C6E8C1 !important;
}
.DarkOrangeFlag {
    background-color: #FABA63 !important;
}
.LightGreyFlag {
    background-color: #DBDBDB !important;
}

.rgSelectedRow, .rgSelectedCell {
    background-color: var(--lightSecondaryColor) !important;
    color: var(--darkTextColor) !important;
}

fieldset {
    border-radius: 5px;
    border-color: var(--secondaryColor);
    border-style: solid;
    margin-bottom: 5px;
}

fieldset legend span {
    padding:5px;
}

.rgSelectedRow td {
    color: var(--darkTextColor) !important;
}

.rgRow td, .rgAltRow td, .rgEditRow td {
    border-color: var(--primaryColor) !important;
}

.RadGrid .rgPager .rgPagerButton {
    border-radius: 5px !important;
}

.RadGrid_Metro .rgNumPart a {
    border-radius: 6px !important;
    margin-right: 2px !important;
    background-color: var(--primaryColor) !important;
}

.RadGrid_Metro .rgNumPart a:hover {
    background-color: var(--secondaryColor) !important;
}

.rgPageFirst {
    background-image: url('../Images/svg/align-left.svg') !important;
    background-position: center !important;
}

.rgPagePrev {
    background-image: url('../Images/svg/arrow-left.svg') !important;
    background-position: center !important;
}

.rgPageNext {
    background-image: url('../Images/svg/arrow-right.svg') !important;
    background-position: center !important;
}

.rgPageLast {
    background-image: url('../Images/svg/align-right.svg') !important;
    background-position: center !important;
}

.OffsetGridBoundaryItem {
    background-color: var(--primaryColor);
}

.OffsetGridItem {
    background-color: var(--siteBackground);
    position: absolute;
    width: 442px;
    height: 23px;
    margin-left: -8px;
    padding-left: 6px;
    padding-top: 4px;
    border-bottom-color: var(--primaryColor);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: var(--primaryColor);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: var(--primaryColor);
    border-right-style: solid;
    border-right-width: 1px;
    text-align: center;
}
  
.rgHoveredRow {


}

.rgRow td:not(.OffsetGridBoundaryItem):Hover , .rgAltRow td:not(.OffsetGridBoundaryItem):Hover, .OffsetGridItem:Hover  {

 

}

.RadGrid_Metro .rgInfoPart strong {
    color: var(--lightTextColor) !important;
}

.rgWrap .rgInfoPart strong {
    color: var(--lightOffset) !important;
}

.riTextBox input {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--lightOffset) !important;
    font-size: 12px;
    font-family: Poppins, Arial, sans-serif;
    border-style: solid;
    border-width: 1px !important;
    border-color: var(--primaryColor) !important;
}
    .riTextBox input:focus {
        background-color: var(--lightSecondaryColor);
        border-color: var(--secondaryColor);
        border-width: 1px;
    }
.rgPager {
    background-color: var(--primaryColor) !important;
    background: var(--primaryColor) !important;
    color: var(--lightTextColor) !important;
} 
.rgPager table,.rgPager td, rgFooter
{
    border: none !important;
}
.rgPagerButton {
    font: normal 11px Poppins, Arial, sans-serif !important;
    background-color: var(--primaryColor) !important;
    color: var(--siteBackground);
}

.RadGrid_Metro .rgNumPart a {
    color: var(--lightTextColor) !important;
}

.RadGrid_Metro .rgNumPart a.rgCurrentPage {
    border-color: var(--darkTextColor) !important;
}

.RadGrid_Metro .rgPager .rgPagerButton {
    border-color: var(--siteForeground) !important;
}

.RadGrid_Metro .rgInfoPart {
    color: var(--lightTextColor) !important;
}

/* radGrid  end */
/* radDateTimePicker */
.RadPicker input {
    border-color: var(--primaryColor) !important;
    background: var(--siteBackground);
    color: var(--siteForeground);
    font: normal 11px Poppins, Arial, sans-serif !important;
}

    .RadPicker input:focus {
        border-color: var(--secondaryColor) !important;
        background: var(--lightSecondaryColor) !important;
    }
   
    /* radToolTipManager */
 .rtWrapperContent
        {
                       
           font: normal 12px Poppins, Arial, sans-serif  !important;
        } 
 div.RadToolTip table.rtWrapper  {
    padding: 10;
    margin: 10;
     }

.harmonyBreadCrumb {
    color: var(--harmonyBreadCrumbColor) !important;
    background-color: var(--primaryColor) !important;
    background-image: none !important;
    text-align: left;
    vertical-align: top;
    font: Poppins, Arial, sans-serif !important;
    position: static;
    padding-left: 10px;
    padding-top: 10px;
    border-radius: 5px;
}  
.HarmonyBrand {
       border: 0px;
       height: 39px;
       width: 165px;
       margin-left: 10px  ;
       margin-right: 10px !important;
       max-height:60px;
      
}

.CompanyBanner {
       max-height: 60px;
       max-width: 30%;
      
       -webkit-border-radius: 5px !important;
       -moz-border-radius: 5px !important;
       -o-border-radius: 5px !important;
       border-radius: 5px !important;
}



.harmonyButton {
    color: var(--siteBackground);
    background-color: var(--primaryColor);
    border-width: 0px;
    border-color: var(--primaryColor);
    cursor: pointer;
    font-family: Poppins, Arial, sans-serif;
    font-size: large;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -o-border-radius: 3px !important;
    border-radius: 3px !important;
}
    .harmonyButton:hover {
        background-color: var(--secondaryColor) !important;
        border-color: var(--secondaryColor) !important;
    }

.harmonySearchBox:focus {
    border-width: 2px;
    color: var(--lightTextColor) !important;
}

.harmonySearchBox {
    height: 26px;
    width: 220px;
    margin: 0px !important;
    padding-left: 6px;
    padding-right: 6px;
    border: solid;
    border-width: 1px;
    border-color: var(--lightTextColor) !important;
    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    -o-border-radius: 5px !important;
    border-radius: 5px !important;
    background-color: rgba(0, 0, 0, 0) !important;
    color: var(--lightTextColor)
}

.harmonyGradient {
    width: 100%;
    overflow: hidden;
    background: #222222;
}
    
/* this is to get rid of the dotted line around the menu in firefox */
:focus
{
    -moz-outline-style: none;
    outline: none; /* 3.6 */
}



/* These are here to get rid of the warnings they are not actually used as each is generated on the page via the user setting */
.SystemText
{
    color: #999999;
}

.SystemColor
{
    background-color: #111111;
}
/*********************************/

.ParentTable
{
	height:100%;
	border-right: #003366 0px solid;
    border-top: #003366 0px solid;
    border-left: #003366 0px solid;
    border-bottom: #003366 0px solid; 
	font-size:x-small;
    font-family: Poppins, Arial, sans-serif ;
    vertical-align: middle;
    color: black;
    text-align: right;
    margin-right: -10px;
}

.FooterTable
{
	border-right: #003366 0px solid;
    border-top: #003366 0px solid;
    border-left: #003366 0px solid;
    border-bottom: #003366 0px solid; 
	background-color: White;
	font-size:x-small;
    font-family: Poppins, Arial, sans-serif ;
    vertical-align: middle;
    color: black;
    text-align: right;
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

.GridLinkCell, .GridLinkCellDelete
{
	text-decoration: underline;
}

.GridLinkCellDelete
{
    background-repeat:no-repeat;
    background-position:left;
}


.GridCellButton, .GridCellButtonDelete
{
	font-size:11px; 
	text-decoration: underline;
    font-family: Poppins, Arial, sans-serif ;
    vertical-align: middle;
    color: White;
    text-align:left;
    cursor:  pointer;
    border-style:none;
}

.GridCellButtonDelete
{
    background-repeat:no-repeat;
    background-position:left;
}


.GridRow
{
	background-color: White;
    color: Black;
}


.PageHeading
{
    width: 100%;
    margin-left:5px;
}


.PageHeadingTitle {
    text-align: center;
    vertical-align: top;
    font-weight: normal;
    font-size: medium;
    position: static;
    color: var(--primaryColor);
    background-color: var(--siteBackground);
}


.PageHeadingHyperlink {
    text-align: left;
    vertical-align: top;
    font-size: small;
    height: 22px;
    position: static;
    color: var(--primaryColor) !important;
    background-color: var(--siteBackground) !important;
}

.PageHeadingSearch 
{
    text-align: right;
    vertical-align: top;
    margin-right: 5px;
    font-weight: bold;
    height: 22px;
    width: 480px;
}

.TableRow
{
	text-align: left;
	width: auto;
	
}

.Validator
{
	color:Red;
	font-family: Poppins, Arial, sans-serif ;
	font-size: 12px;
}

.Success
{
	color:Blue;
	font-family: Poppins, Arial, sans-serif ;
	font-size: 8pt;
}

.ValidationSummary
{
	color: Red;
	text-align: center;
	width: 100%;
	font-family: Poppins, Arial, sans-serif ;
	font-size: 8pt;
}

.Hover {
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    background-repeat: repeat-x;
    font-family: Poppins, Arial, sans-serif;
    height: 24px;
    font-size: 12px;
    padding-top: 2px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    color: var(--siteBackground);
    text-decoration: none;
    min-width: 70px;
    background-color: var(--secondaryColor) !important;
    border-color: var(--secondaryColor) !important;
}

.Button:hover, .Button:focus, .SearchButton:hover {
    background-color: var(--secondaryColor) !important;
    border-color: var(--secondaryColor) !important;
}
.Button[disabled="disabled"]
{
    background:#C0C0C0 !important;
     border-color: #C0C0C0 !important;
    }
.Button[disabled=""]
{
    background:#bbbbbb  !important;
    }
.Button:disabled {
    background: #bbbbbb !important;
}
.Button {
    margin-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    font-family: Poppins, Arial, sans-serif;
    height: 28px;
    font-size: 13px;
    background-color: var(--primaryColor);
    border-style: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 10px;
    color: var(--buttonTextColor);
    min-width: 80px;
    cursor: pointer;
}
.AddButton:hover {
    background-color: var(--secondaryColor) !important;
    border-color: var(--secondaryColor) !important;
    color: var(--buttonTextColor) !important;
}
.AddButton {
    color: var(--buttonTextColor) !important;
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    padding-top: 0px;
    border-style: solid;
    font-family: Poppins, Arial, sans-serif;
    height: 28px;
    cursor:pointer;
    font-size: 14px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 10px;
    min-width: 70px;
}
.SearchButton {
    color: var(--siteBackground);
    background-color: var(--primaryColor);
    border-color: var(--primaryColor) !important;
    font-size: small;
    cursor: pointer;
    font-family: Poppins, Arial, sans-serif;
    width: 100px;
    height: 25px;
}


.Label {
    font-size: 12px;
    font-family: Poppins, Arial, sans-serif;
    position: relative;
    color: var(--lightOffset);
}


.Value {
    font-size: 12px;
    font-family: Poppins, Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    height: 24px;
    border-color: var(--primaryColor);
    color: var(--siteForeground);
    background-color:var(--siteBackground);
}

input[class="Value"]:disabled {
    border-color: rgba(118, 118, 118, 0.3);
    cursor: default;
    background-color: rgba(239, 239, 239, 0.3);
}

a.Label {
    color: var(--primaryColor);
    font-weight: var(--linkFontWeight);
    text-decoration: none;
}


.ListBox {
    font-size: 12px;
    font-family: Poppins, Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: var(--primaryColor);
    background-color:var(--siteBackground);
    color:var(--siteForeground);
}


/* Rounds the corners of the text box and drop downs in firefox   RDP Radius removed */
form input[type=text], input[type=password], select, textarea
{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  border-color: var(--primaryColor);
}

/* Highlights the border and colors the background of the text boxes and combo boxes */
form input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus, input[type=checkbox]:focus {
    background-color: var(--lightSecondaryColor) !important;
    border-color: var(--secondaryColor);
    border-width: 1px;
    color: var(--darkTextColor) !important;
}

.Calendar
{
    font-size: 10pt;
    font-family: Poppins, Arial, sans-serif ;
}

.CalendarDropDown {
    background-color: var(--siteBackground);
    color: var(--siteForeground);
}

.CalendarStyle
{
    border-color: Transparent;
    border-style: solid;
    border-width: 1px;
}

.MenuIsland
{
	overflow:hidden;
}

.HoverNode
{
    background-image:url(../Images/leftBGshadowHover.gif);
}

.SelectedNode
{
    background-image:url(../Images/leftBGshadowSelected.gif);
}

.RadPicker_Metro .rcCalPopup, .RadPicker_Metro .rcTimePopup {
    background-image: var(--calendarIcon) !important;
}

.RadPicker:hover .rcCalPopup:hover, .RadPicker:hover .rcTimePopup:hover {
    background: url(../Images/calendar-light.png), var(--primaryColor) !important;
    border-radius: 3px;
}

.RadPicker:focus .rcCalPopup:focus, .RadPicker:focus .rcTimePopup:focus {
    background-image: var(--calendarIcon), !important;
}

.header-icon-button {
    color: var(--siteForeground);
    background-color: rgba(0, 0, 0, 0);
    border-radius: var(--bradius-medium);
    border: 0px solid var(--primaryColor) !important;
    padding: 4px;
    margin: 4px;
    height: 38px;
    cursor: pointer;
}

    .header-icon-button:hover {
        color: var(--secondaryColor);
        background-color: rgba(0, 0, 0, 0);
        border-radius: var(--bradius-medium);
        border: 0px solid var(--secondaryColor);
        padding: 4px;
        margin: 4px;
        height: 38px;
        cursor: pointer;
    }

.header-icon-button-img {
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(100%);
    width: 25px;
    height: 25px;
}

.MainContent 
{
    width:100%;
    height:auto;
    min-height:475px;
    vertical-align:top;
}

.HeaderTitle
{
    font-size: 9pt;
    font-family: Poppins, Arial, sans-serif ;
    height: 21px;
    text-align: right;
}

.LeftContent
{
    text-align:left;
    width:190px;
   
    vertical-align:top;
}

.Header
{
	vertical-align: top;
	text-align:left;
}

.HeaderLogout {
    float: right;
    font-size: 9pt;
    font-family: Poppins, Arial, sans-serif;
    vertical-align: top;
    color: var(--siteBackground);
    text-align: right;
}

.buttons {
    height: 6%;
    background-color: var(--siteBackground);
}

.gadgetContainer {
    float: left;
    cursor: move;
    text-align: left;
    position: absolute;
    overflow: hidden;
    border-style: solid;
    border-width: 1px;
    border-color: var(--siteForeground);
}

.gadgetHeader
{
	filter:alpha(opacity=100);
	-moz-opacity:1;
	margin:0px;
}

.gadgetCloseLink
{
	text-decoration:none;
	font-size:11px;
	font-weight:bold;
}

.gadgetContent {
    background-color: var(--siteBackground);
    margin: 0px;
    overflow: hidden;
}

.gadgetIframe
{
	 border:0px;
	 margin:0px;
}

/* Used for the greyed out background for the ajax updating panel */
#progressBackgroundFilter {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: var(--siteForeground);
    filter: alpha(opacity=70);
    opacity: 0.5;
    z-index: 1000;
    height: 100%;
    width: 100%;
}

/* Used for the message box in the ajax updating panel */
#processMessage {
    position: fixed;
    top: 30%;
    left: 30%;
    padding-right: 4%;
    padding-left: 4%;
    padding-top: 3%;
    padding-bottom: 3%;
    width: 30%;
    z-index: 1001;
    background-color: var(--primaryColor);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    border-color: var(--lightSecondaryColor);
    border-style: solid;
    border-width: 0px;
    font-size: 14px;
    color: var(--lightTextColor);
    font-family: Poppins, Arial, sans-serif;
} 

.overFlowHidden
{
	overflow: hidden;
}

/* used for the wizard step over-view */
.stepNotCompleted {
    background-color: rgb(153,153,153);
    width: 15px;
    border: 1px solid rgb(153,153,153);
    color: var(--siteBackground);
    font-family: Arial;
    font-size: 12px;
    text-align: center;
}

.stepCompleted {
    background-color: #3D63A1;
    width: 15px;
    border: 1px solid #3D63A1;
    color: var(--siteBackground);
    font-family: Arial;
    font-size: 12px;
    text-align: center;
}

.stepCurrent {
    background-color: #e01122;
    width: 15px;
    border: 1px solid #e01122;
    color: var(--siteBackground);
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.stepBreak
{
    width: 3px;
    background-color: Transparent;
}

.wizardProgress
{
    padding-right: 10px;
    font-family: Arial;
    color: #333333;
    font-size: 12px;
    border: none;
}

.wizardTitle
{
    font-family: Arial;
    font-size: 120%;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
}

#hoverdiv 
{
    display: none;
    position: absolute;
    font-size: 11px;
    color: Black;
    border: 1px solid Black;
    padding: 5px;
    width: 505px;
    height: 87%;
    text-align: justify;
    z-index: 10;
    overflow: auto;
    margin-left: 9px;
    clear: both;
    font-family: Arial;
    border-radius: 4px;
}

#NotesHover
{
    position: absolute;
    font-size: 12px;
    color: Black;
    border: 1px solid Black;
    padding: 5px;
    width: 100%;
    height: 193px;
    text-align: left;
    z-index: 200;
    overflow: hidden;
    clear: both;
    font-family: Arial;
    border-radius: 4px;
    background-color: #DDDDDD;
}

.Flag {
    position: relative;
    float: right;
    clear: none;
    text-align: center;
    font-size: 11px;
    overflow: hidden;
    padding: 3px;
    border-radius: 5px;
    margin: 2px;
    padding-left: 5px;
    padding-right: 5px;
    width: 220px;
    cursor: pointer;
    color: var(--darkTextColor);
}

.GridButton {
    font-size: xx-small;
    text-decoration: underline;
    font-family: Poppins, Arial, sans-serif;
    vertical-align: middle;
    text-align: left;
    cursor: pointer;
    border-style: none;
    background-color: var(--siteBackground);
}

.RecentLink
{
    overflow: hidden;
    color: White;  
    display:block;
}

.RecentLinkWrapper {
    padding: 3px;
    overflow: hidden;
    background-color: var(--primaryColor);
    display: block;
    padding-right: 4px;
}

.RecentLinkCell {
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    padding: 3px;
    background-color: var(--primaryColor);
}

    .RecentLinkCell:Hover {
        padding: 3px;
        overflow: hidden;
        background-color: var(--secondaryColor);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

@media print 
{
    .noPrint 
    {
        display:none;
    }
}

/* info box (dashboard) */
.info_box_var_1 {
    color: var(--siteBackground);
}
.info_box_var_1.box_bg_a {
  background: #37BC9B;
}
.info_box_var_1.box_bg_b {
  background: #DA4453;
}
.info_box_var_1.box_bg_c {
  background: #F6BB42;
}
.info_box_var_1.box_bg_d {
  background: #4A89DC;
}
.info_box_var_1 .info_box_body {
  padding: 10px 20px;
  height: 60px;
  font: 300 32px / 38px "Open Sans", Arial, sans-serif;
  position: relative;
}
    .info_box_var_1 .info_box_body .info_box_icon {
        position: absolute;
        right: 20px;
        top: 14px;
        font-size: 32px;
        color: var(--siteBackground);
    }
.info_box_var_1 .info_box_footer {
  padding: 4px 20px;
  background: rgba(0, 0, 0, 0.2);
}
.heading_a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin: 0 0 15px;
  padding: 0 4px 4px;
}
.heading_a .heading_text {
  font: 400 16px / 22px "Open Sans", Arial, sans-serif;
  color: #333;
  text-transform: uppercase;
}
.heading_a .heading_icon {
  font-size: 16px;
  line-height: 22px;
  margin-right: 4px;
  color: #999;
}
.heading_a + .row {
  margin-top: 20px;
}
.heading_b {
  margin: 0 0 10px;
}
.heading_b .heading_text {
  font: 400 14px / 20px "Open Sans", Arial, sans-serif;
  text-transform: uppercase;
}