/**
RUF FRAMEWORK changes adopted 2021 Origenate Chrome release
reference the FIS styleguide:
https://brandzone.fisglobal.com/document/93#/overview/getting-started
**/

/*******************************************
           BEGIN Element Selectors
 *******************************************/
body, select, input, textarea, table, tr {
	font: normal 12px Source Sans Pro;
}

body {
	background-color: #ffffff;
	margin-top : 0;
}
/* For cosigner underwriting overview screen */
.cosigner{	
	background-color:#EAF8EA;  /* CHROME TODO */
	margin-top : 0;	
}

/** standardize the size of the input and select boxes so they are uniform **/
input:not([type=checkbox]):not([type=radio]) {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 20px;
	margin: 1px;
}

select {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 20px;
	/* margin: 1px; */
	padding: 2px;
}

input[type=radio] {
	vertical-align: text-bottom;
}

select[multiple], .expanded-select {
	height:auto;
}

/** turn off the ability to resize all text areas **/
textarea {
    resize: none;
    box-sizing: border-box;
    padding: 3px;
}

/*******************************************
           END Element Selectors
 *******************************************/
 
/* common and reusable widths to help with layout of tables/input fields etc */

.full-width {
	width: 100%;
}

/* input and select fields using the full-width class should use 98% width since we are box-sizing:content-box **/
input.full-width, select.full-width, textarea.full-width {
	width: 98%;
}

.half-width {
	width: 50%;
}

.partial-width {
	width: 65%;
}

.third-width {
	width: 33%;
}

.mini-width {
	width: 15%;
}
/* common and reusable widths */


/*******************************************
           BEGIN Button Attributes
 *******************************************/
 /* CHROME TODO can we get rid of all of these?  If not adjust the font*/
 

a, a.normal:hover {  
	font: bold 13px Source Sans Pro;
	color: #285BC5;  /* was E5AA34 CHROME TODO */
	text-decoration: underline;
}

a, a.normal:link {
	font: bold 13px Source Sans Pro;
	color: #285BC5;
	text-decoration: none;
}
.normal { 
	color: #FFFFFF;
}
a.normal:active { 
	font: bold 13px Source Sans Pro;
	text-decoration: none;
}
a.normal:visited { 
	font: bold 13px Source Sans Pro;
	text-decoration: none;
}

a.disable:link { 
	font: bold 13px Source Sans Pro;
	text-decoration: none;
}
.disable {
	color: grey; /* CHROME TODO */
}

a.abnormal:hover {  
	font: bold 13px Source Sans Pro;
	color: #ffffff;  /* CHROME TODO */
	text-decoration: underline;
}
a.abnormal:link { 
	font: bold 14px Source Sans Pro;
	color: #ffffff; 
	text-decoration: underline;
}
.abnormal {  
	color: #ffffff;
}
a.abnormal:active {
	font: bold 14px Source Sans Pro; 
	color: #ffffff; /* CHROME TODO */
	text-decoration: underline; 
}
a.abnormal:visited { 
	font: bold 14px Source Sans Pro;
	color: #ffffff; /* CHROME TODO */
	text-decoration: underline; 
}

/*******************************************
           END Button Attributes
 *******************************************/

/*******************************************
           BEGIN Button Styles
 *******************************************/
/* Global Navigation Button */

/* Local Navigation Button */
.button {
	font-size: 10px;
	background-color: #012834;
	color: white;
	font-weight: bold
}

/* Local Navigation Button: Inactive */
.disabledButton {
	background-color: white;
	color: gray; /* CHROME TODO */
}

.disabledText {
	color: gray; /* CHROME TODO */
}

.disabledLink {
   pointer-events: none;
   cursor: default;
   color: gray; /* CHROME TODO */
}

.activeButton{
	font-size: 10px;
	background-color: #012834;
	color: white;
	font-weight: bold;
}

/* Standard Button */
.ButtonLength {
	width: 	45px;
}

/*******************************************
           END Button Styles
 *******************************************/

 /*******************************************
           BEGIN Text Styles
 *******************************************/
/* Standard Text */
.Text {
	font: normal 12px Source Sans Pro;
	color: black;
}
/* Standard Text Indent*/
.TextIndent {
	font: normal 12px Source Sans Pro;
	text-indent: 12px;
}


/* Standard Text Bold */
.TextBold {
	font: bold 12px Source Sans Pro;
}

/* Label Text */
.TextLabel, span.table-text-label table tr td {
	font: bold 12px Source Sans Pro;
	color: #012834;
	white-space: nowrap;
}

.textLabelWithWrap {
	font: bold 12px Source Sans Pro;
	color: #012834;
	white-space: normal;
}
/* Data Field */
.DataField {
	white-space: nowrap;
}

/* Label Text */
.boldText{
	font: bold 13px Source Sans Pro;
	color: #012834;
}

.TextLabelLarger{
	font: normal 12px Source Sans Pro;
	color: #012834;
}

/* Label Text Indent */
.TextLabelIndent {
	font: bold 12px Source Sans Pro;
	color: #012834;
	text-indent: 12px;
}

/* Fixed Width Fonts */ 
 .Detail{
 	font-size: 9px;
 }

/* select drop down sizing to line up with fields 25 char in length */
select.SelectStandardSize25 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 138px;
}
/* Highlighted Text */

/* Alternating Highlighted Text Row */
/* background color for everyother row. */
.TextAltRow, .TextAltColumn, .second-level-header, .bg_shaded , .highlight-alternate-row tr:nth-child(even){ 
	background-color: #EBEBEB; /* not in RUF link but provided by RUF SME */
}

.highlightedRow {
      background-color: #B3BFC2; /* 100 FIS BLACK */
}

.dark-highlighted-row {
      background-color: #01232D; /* 600 FIS BLACK */
}

/* Background color for bureau row */
.spaced-header-row, .bg_bureau_row {
	background-color: #B3BFC2; /* 100 FIS BLACK */
	height: 35px;
	font-weight: bold;
}

/* Label Text Bold */

/* HyperLink */
.nolink {
	color: black;
	font: bold 13px Source Sans Pro;
	text-decoration: none;
	
}

.link {
	color: black;
	font: normal 12px Source Sans Pro;
	cursor: hand;
}

.applicationLink {
	cursor: hand;
	text-decoration : none;
	font: normal 12px Source Sans Pro;
	color: #285BC5; 
}

.applicationLink:hover {
	text-decoration : underline;
}

.application-link {
	font: normal 12px Source Sans Pro;
	text-align:left;
	cursor: hand;
	text-decoration : none;
	color: #285BC5;
}

.application-link:hover {
	text-decoration : underline;
}


.blueLink {
	color: #012834; /** using fis black for now CHROME TODO - do we want to use a different shade or different color **/
	text-decoration: underline;
	font: bold 13px Source Sans Pro;
}

/* Use in over view screen */
.overviewTable{
	font: normal 12px Source Sans Pro;
	width: 50%;
	margin-left: 0px;
	margin-right: 0px;
	}
/* Use in over view screen activity status */
.policyTrigger{
	background-color: #DC143C; /* CHROME TODO */
	color: #FFFFFF;
}
.exception{
   background-color: #FFD700; /* CHROME TODO */
   color: #000000;
}	
	
/*********************************************************
 			Header / Title Styles
*********************************************************/


.HeaderBanner {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #274852;
	line-height: 28px;
}

.header-banner-dark {
	font: bold 12px Source Sans Pro;
	color: #FFFFFF;
	background-color : #012834;	
}

.HeaderTaskName, .page-title {
	color: #FFFFFF; 
	font-size: 18px;
	font-weight: bold;
}

.page-title-dark {
	color: #FFFFFF; 
	font-size: 18px;
	font-weight: bold;
}

.HeaderApplicantName, .bold-text-med {
	font-size: 14px;
	font-weight: bold;
}
.HeaderDecision {
	font-size: 10px; /* CHROME TODO can we make this bigger */
	font-weight: bold;
}
.HeaderDecisionLabel{
	font-size: 14px;
	color: #012834;
	font-weight: bold;
}
.HeaderPageBanner{
	background-color: #EBEBEB;  /* gray - CHROME TODO Underwriting admin yellow */
	font-size: 12px;
	font-weight: bold;
	color: #012834;
}

.HeaderPageBannerCA{
	background-color: #EBEBEB; /* gray - CHROME TODO Contract admin eggplant */
	font-size: 12px;
	font-weight: bold;
	color: #012834;
}

.UserAlerts{
	font-size: 11px;
	font-weight: bold;
	cursor: hand;
}

.pageTitle, .page-title {
	font-size: 16px !Important;
	font-weight: bold;
}

.page-text-normal {
	font-size: 14px;
}

.bold-text {
	font-weight: bold;
}

/* Large Title */
.LargeTitle, .large-font, .large-text-bold {
	font: bold 16px Source Sans Pro;
	color: #012834;
}

.large-text {
	font: 16px Source Sans Pro;
	color: #012834;
}

.medium-text {
	font: 14px Source Sans Pro;
	color: #012834;
}

/* Medium Title */
.MediumTitle, .medium-font, .medium-text-bold {
	font: bold 14px Source Sans Pro;
	color: #012834;
}

/* Small Title */
.SmallTitle, .small-font, .small-text-bold {
	font: bold 12px Source Sans Pro;
	color: #012834;
}
/* Large Column Header */
.LargeColumnHeader {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #012834;	
}

/* Medium Column Header */
.ColumnHeader {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #4E6971; /* CHROME TODO decide which color #274852 400 FIS BLACK */	 /** #4E6971;  300 FIS BLACK */	 
	line-height: 28px;
}

/* specify the exactly places we want to use the padded-header css, if desired use .standard-padded-header */
.standard-padded-header, tr.standard-padded-header td, tr.columnHeader.padded-header td, td.columnHeader.padded-header, tr.HeaderBanner.padded-header td, td.subColumnHeader.padded-header, td.smallColumnHeader.padded-header {
    padding-left: 3px;
}

.ColumnHeaderIniInfo {
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #274852; /* 400 FIS BLACK */	
} 

/* Medium-light Column Header */
.ColumnHeaderLightColor {
	font-size: 14px;
	font-weight: bold;
	color: black;
	background-color: #EBEBEB;	
	line-height: 28px;
}

.subColumnHeader, .SubColumnHeaderLightColor {
	font-size: 14px;
	font-weight: bold;
	color: #012834;
	background-color: #B3BFC2; /* 100 FIS BLACK*/		
	text-align: left;
	padding-left: 2px;
	line-height: 28px;
}

/* Small Column Header */
.smallColumnHeader {
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #012834;
	line-height: 28px;
}
/* Small Column detail*/
.smallColumnHeaderDetail {
	font-size: 12px; /* CHROME TODO can this be bigger?*/	
	font-weight: bold;	
}

/* Columns headers that can be clicked on for sorting */
.SortColumnHeader {
	font-weight: bold;
	color: White;
	cursor: hand;
	text-decoration : underline;
}

.header-row-height-small, table#tblContractActivityStatus td {
	height: 20px;
}

/******************************************
           Navigation Bar Styles
 *****************************************/
.TopNavBar {
    background-color: #FFFFFF;
}
.queueName {
	font-size: 14px;
	font-weight : bold;
}
.topnavutilityLabel {
	color: #012834;
	font-weight : bold;
	font-size: 11px; 
}

/********************************
     User Information Styles 
********************************/
/* Major Flag */
.MajorFlag {
	background-color: #DE1B36; /* FIS torch red 500 */
	color: #012834;
}

.Bg_alert_bad {
	background-color: #DE1B36; /* FIS torch red 500 */
	color: #FFFFFF;
}

.Bg_alert_good {
	background-color: #009775;
	color: #FFFFFF;
}

/* Minor Flag */
.MinorFlag {
	background-color: #FFC845; /* FIS Sunglow 500 */
	color: #000000;	
}

.bg_alert_caution {
	background-color: #FFD061;  /* FIS Sunglow 400 */
	color: #000000;
}

/*  A field that has failed vaildation */
.invalidField {
	border-color: #DE1B36;  /* FIS torch red 500 */
	background-color: #EBEBEB; /* CHROME using the alt background color for now */
}

.disabledField {
	background-color: #EBEBEB; /* CHROME using the alt background color for now */
}

/* a field that has passed validation */
.validField {
	border-color: none;
	background-color: none;
}

/* Background color classes */ 

.bg_alert_non_app_trade {
	background-color : blue; /* CHROME leaving this alone currently only used in act_update_app_status.cfm which looks unused at this time */
	color : white;
}

/* font color classes */ 
.font_alert_bad, .font_alert_caution {
 	color : #DE1B36; /* all bad alert font colors should be red */   /* FIS torch red 500 */
}

.font_alert_good {
	color : #009775;  /* all good alert font colors should be greenish */ /* CHROME TODO is this the right green */
}

 /*******************************************
           END Text Styles
 *******************************************/

 /*******************************************
           BEGIN Table Styles
 *******************************************/
/* Full Table: Currently for 800X600 with margins and sidebar space */
.FullTable {	
	font: normal 12px Source Sans Pro;
	width: 99%;
	margin-left: 6px;
	margin-right: 0px;
}

.FullTablePercent {
	font: normal 12px Source Sans Pro;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}

.MidTablePercent {
	font: normal 12px Source Sans Pro;
	width: 98%;
	margin-left: 8px;
	margin-right: 8px;
}


/* Full Iframe Table: Currently for 800X600 Accounts for included side bar */ 
.IframeTable {
	font: normal 12px Source Sans Pro;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	border: 1px;
	text-indent: 3px;
}


/* Full Iframe Table: Currently for 800X600 Accounts for included side bar AND SideTabs*/ 
/* 1/2 Table: Can place tables side by side */ 
.OneHalfBlock {
	font: normal 12px Source Sans Pro;
	background-color: #ffffff;
	width: 35%;
	margin-left: 0px;
	margin-right: 0px;
}

.OneHalfBlockPercent {
	font: normal 12px Source Sans Pro;
	background-color: #ffffff;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}


 /*******************************************
           BEGIN Text Styles
 *******************************************/



.red { 
	background-color: #DE1B36;   /* FIS torch red 500 */
}

.redflag {
	color: white;
	font: normal 12px Source Sans Pro;
	background-color: #DE1B36;  /* FIS torch red 500 */
}

.red-font-bold {
	color: #DE1B36;  /* FIS torch red 500 */
	font-size: 14px; 
	font-weight: bold;
}

.errorText {
	font: normal 12px Source Sans Pro;
}

.errorTextRed {
	color: #DE1B36;  /* FIS torch red 500 */
	font: normal 14px Source Sans Pro;

}

.errorTextBlue {
	color: #012834; /** This is set to fis black using the RUF framework even though we called it blue whenever we first created it **/
	font: normal 14px Source Sans Pro;
}

.headerText {
	font: bold 16px Source Sans Pro;
}

.subHeaderText {
	font: bold 12px Source Sans Pro;
	text-indent: 2px
}

.textright, .right{
	text-align : right;
}

 /*******************************************
           END Text Styles
 *******************************************/

.queueTitle{
	color: #012834;
	font-size: 22px;
	font-weight : bold;
	padding: 20px 0px 0px 10px;
}

.queueFilter{
	color: black;
	background-color: #B3BFC2;
	font: normal 12px Source Sans Pro;
	text-align : left;
}

.queueHeader, .queueFooter {
	font: normal 16px Source Sans Pro;
	color : white;
	background-color: #012834; 
	text-align : left;
}

.queue-header-bold {
	font: bold 16px Source Sans Pro;
	color : white;
	background-color: #012834; 
	text-align : left;
}

.tableHeader{
	color : white;
	background-color: #012834;
	font: normal 16px Source Sans Pro;
	text-align : left;
}

.header-bold, .x-column-header {
	font: bold 16px Titillium Web;
	color : white;
	background-color: #012834; 
}

.header-bold-dark-xl {
	font: bold 18px Titillium Web;
	color : #012834;
	background-color: transparent; 
}

.header-bold-dark-xxl {
	font: bold 20px Titillium Web;
	color : #012834;
	background-color: transparent; 
}

.header-bold-dark {
	font: bold 16px Titillium Web;
	color : #012834;
	background-color: transparent; 
}

.under-line {
	text-decoration: underline;
}

.center {
	text-align : center;
}

.left {
	text-align : left;
}

.queueHeaderLight {
	color : black;
	background-color: #E0E5E6; /* CHROME TODO */
	font: bold 12px Source Sans Pro;
	text-align : center;
}

.checklistCategoryHeader, .toleranceRulesPostMessage {
	color : black;
	background-color: #E0E5E6; /* CHROME TODO */
	font: bold 12px Source Sans Pro;	
	padding-top: 2px;
	padding-bottom: 2px;
}

/* Begin CCWeb Classes */
/* This class is a dark table heading meant to draw the users attention
		Created primarily for the queue
*/
.table_heading_dark {
	font: bold 20px Source Sans Pro; /* CHROME TODO font size was font-size : x-small; */
 	font-style : normal;
 	color : White;
 	background-color : #012834;
 	text-decoration : none;
	padding-left: 2px;
 }
 
/* This is a normal heading that should be used throught the system for headings that
	should be bold
*/
.detail_heading_bold {
	font: bold 12px Source Sans Pro; /* CHROME TODO font size was font-size : x-small; */
 	font-style : normal;
 	color : 012834;
 }
 
/* This is a normal heading that should be used throught the system for headings that
 	should not be bold
*/
.detail_heading {
	font: normal 12px Source Sans Pro; /* CHROME TODO font size was font-size : x-small; */
 	font-style : normal;
 	color : 012834;
 }

/* This is a detail style in a fixed spaced font for use in screens like the Bureau RAW TTY
*/
.detail_fixed_char {
	font: normal 12px Source Sans Pro;
 	font-style : normal;
 	color : 012834;
 }


/* Detailed information displayed in a main report detail line should use this class 
*/
.report_detail {
	font: normal 12px Source Sans Pro;
 	font-style : normal;
 	color : 000000;
 }

/* Style of a reports grand total line */
.report_grand_total {
	font: bold 12px Source Sans Pro;
 	font-style: normal;
 	color: #FFFFFF;
	background-color: #012834;
 }
/* Detailed information should use this class */

.detail {
	font: normal 12px Source Sans Pro;
 	font-style: normal;
	height: 22;
 }

/* style for creating horizontal or vertical lines using empty table cells */
.line {
	background-color: #012834;
	color: #012834;
}

/* This class should be used for anyt piece of text that should be
    LARGE and bold, like Customer Name
*/
.standout_text {
	font: bold 12px Source Sans Pro;
 	font-style : normal;
 	color : black;
 }
.standout_text_std {
 	font: normal 12px Source Sans Pro;
 	font-style : normal;
 	color : black;
 }
 
/* Tab classes */
 
.tab_active {
	vertical-align: top;
	font: bold 12px Source Sans Pro;
	font-style: normal; 
	color: white; 
	nowrap: true;
	background-color: #31659C; /* CHROME TODO */
} 
 
.tab_inactive {
	vertical-align: top;
	font: normal 12px Source Sans Pro;
	font-style: normal; 
	color: white; 
	nowrap: true;
	background-color: #EBEBEB;
} 


.textbox_to_label {
	background-color : transparent;
	border : none;
}

.textbox_to_label_right {
    text-align : right;
	background-color : transparent;
	border : none;
}

.textbox-to-label-header {
    background-color: transparent;
    border: none;
    text-align: left;
    color: white;
    padding-left: 5px;
    font-size: 14px;
}
/* Print Styles */


/* Moving a field offscreen instead of making it hidden */
.offscreen_field {
	position: absolute;
	left: -1000em;
}

/* End CCWeb classes */

/* Completion Check classes */

.missing_info_detail {
	font: normal 12px Source Sans Pro;
	font-style : normal;
	color : Blue; /* CHROME TODO */
}

.rulesHeader{
	color : white;
	background-color: #006699; /* CHROME TODO */
	font: normal 12px Source Sans Pro;
	text-align : center;
}


/* TTY Report Styles */
/* Added by JM */
PRE.TTYReport{
  width: 100%;
  height: 100%; 
  font-size: 13px;
  font-family: monospace;
  font-weight: normal;
  font-style: normal;
  color: 000000;
  padding-left: 20;
}
/************************************/
/* Begin VG Defs - Stevet           */
/************************************/

.ColumnOptionFooter {
	font: bold 12px Source Sans Pro;
	color: #FFFFFF;
	background-color: #006699; /* CHROME TODO */
	border: none;
	text-align: center;	
}

.textbox_to_label_center {
	background-color : transparent;
	border : none;
	text-align: center;
}

.textbox_to_label_resid {
	background-color : transparent;
	border : none;
	text-align: center;
	color: white;
}

.IframeTableVG
{
	font: normal 12px Source Sans Pro;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	border: 0px;
	text-indent: 0px;
}

.subColumnOptionFooter{
	font: bold 13px Source Sans Pro;
	color: #012834;
	background-color: #CCCCCC; /* CHFROME TODO */	
	border: none;
	text-align: center;
}

.BBUColHead {
	font: bold 13px Source Sans Pro;
	color: #012834;
	background-color: #EBEBEB;
}
	
.RiskwiseNormal {	
	background-color: #ffffff; /* CHROME TODO */
}

.RiskwiseWarning {
	background-color: #ffff00; /* CHROME TODO (yellow( */
}

.RiskwiseError {
	background-color: #DE1B36; /* CHROME TODO */  /* FIS torch red 500 */
}

/***************************************/
/* Style rule to make Table scrollable */
/***************************************/
/* Scrollable Div for Table (Trade details) */

div#scrollableDiv {
	height:400;
	width:expression(document.body.clientWidth);
	overflow: auto;
	margin: 0px;
}

div#scrollableDiv thead th, div#scrollableDiv thead td{
	position:relative;
	z-index: 2;
	top: expression(document.getElementById("scrollableDiv").scrollTop-1); 
	display : table-header-group;
	margin:0px;
}

/* ---- guide label css ---- */
.guidelabelparent {
	position:absolute;
	display:none;
	color:gray;
	font-style:italic;
	font-weight:normal;
	padding-left:5px;
	padding-top:4px;
}
.guidelabel {
	position:static;
	z-index:-100; 
}

/* ---- place holder css for non ie browsers ---- */
::-webkit-input-placeholder { /* WebKit browsers */
	font-style:italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-style:italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-style:italic;
}
/*:-ms-input-placeholder {  Internet Explorer 10+ unused as of now, if we choose to remove guidefields.js logic that was put in place for non ie support
	font-style:italic;
}*/

/* ---- guide label css ---- */

.tableHdrLabel{
	font: bold 13px Source Sans Pro;
	color: #012834;/** was #009; **/
	position:relative;
	left:20px;
	top:4px;
	width:50px;
	padding-left:5px;
	padding-right:5px;
	background-color:#ffffff;
}

/* ---- For FLO Integration Screen css  START---- */

.floIntgrationTable {
    border: 1px solid gray;
    border-collapse: collapse;
   	border-spacing: 0px; 
	width:100%;
	padding-top:10px;
    
}
.floIntgrationTable td {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.floIntgrationTable select {
    width: 150px;
    height: 29px;
    padding: 2px;
    box-sizing: border-box;
}
.floIntgrationTable input{
    width: 141px;
    padding: 2px;
    box-sizing: border-box;
}
/* ---- For FLO Integration Screen css  START---- */

label.selectblock {
	display: block;
	margin-top: -15px;
	margin-left: 20px;
}

.textLabel td{
            padding-top: 2px;
            padding-bottom: 2px;
}
			
#userMessage{
	color: #009775; /* CHROME TODO */
	font: bold 14px Source Sans Pro;

}

/*** START STANDARD CSS FOR SELECT ELEMENT ***/
input.standard-input {
	width:250px;
}

input.short-input {
	width:100px;	
}

input.medium-input {
	width:198px;
}

select.standard-select-medium {
	width:275px;
}

select.standard-select-short {
	width:200px;
}

select.standard-select-long {
	width:350px;
}

select.standard-select {
	border:solid 1px #767676;
	color: #4E4E4E;
	font: normal 14px Source Sans Pro;
}

select.standard-select option:hover {
	background-color: #A7A7A7;
	color: #000000;
}

select.standard-select option:checked {
	background-color: #CACACA;
	color: #000000;
}

select.standard-select option:active {
	background-color: #767676;
	color: #000000;
}

select.standard-select option.selected {
	background-color: #767676;
	color: #000000;
}

/*** END STANDARD CSS FOR SELECT ELEMENT ***/


/**** STANDARD CSS ****/

/** make form be inline **/
form.inline {
	 display: inline;
}

form.flatten-bottom {
	margin-block-end: 0em;
}

/** hide on load **/
.hide, .hidden {
	display:none;
}

/** prevent a span from wrapping when the window is resized **/
span.prevent-wrap {
	white-space: nowrap;
}



/** use base-tbl for all standard origenate tables, use table.base-tbl-fill for ones where the fields in a table cell should fill to the size of the cell **/
table.base-tbl, table.base-tbl-fill {
	border: 0px;
	border-spacing: 0px;
	width: 100%;
	padding: 0px;
	font: normal 12px Source Sans Pro;
	margin-left: 0px;
	margin-right: 0px;
}

table.base-tbl tr td, table.base-tbl-fill tr td {
	padding-top: 2px;
	padding-bottom: 2px;
}

table.base-tbl tr.ColumnHeader td, table.base-tbl-fill tr.ColumnHeader td {
	padding-left: 5px;
}

table.base-tbl-fill tr td input, table.base-tbl-fill tr td select {
	width:95%
}

/** use for tables that have headers above individual columns **/
table.standard-header-tbl {
	border: 0px;
    width: 100%;
}

table.revert-border-spacing {
	 border-spacing: 2px; /** use revert for chrome once IE is fully retired */
}

table.top-vertical-alignment td, .top-align {
	vertical-align: top;
}

table.pad-rows td {
  padding-bottom:5px;  
}

table.standard-vertical-alignment td,
.middle-vertical-alignment {
	vertical-align: middle;
}

table.dialog-tbl {
	border: 0px;
	border-spacing: 0px;
	width: 100%;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 10px;
}

table.win-dialog-tbl {
	border: 0px;
	border-spacing: 0px;
	width: 100%;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 2px;
}

table.dialog-tbl tr td, table.win-dialog-tbl tr td {
	height: 25;
	padding-left: 5px;
}

table.wrap-content {
	table-layout: fixed;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

table.fixed-layout {
	table-layout: fixed;
}

.wordbreak{
	word-wrap: break-word; 
	word-break: normal; 
	white-space: normal;
}

/* label for the switch toggle */
.switch-label {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
    left: 24px;
	vertical-align: middle;
}

.standard-top-pad {
	padding-top: 5px;
}

.small-top-pad {
	padding-top: 10px;
}

.standard-left-indent, table.standard-left-indent, tr.standard-left-indent-current-row td, table.standard-left-indent-rows tr td, table.standard-left-indent-rows tr th, tr.standard-left-indent-rows td {
	padding-left: 5px;
}

.small-left-indent, table.small-left-indent-rows tr td {
	padding-left: 10px;
}

.medium-left-indent {
	padding-left: 25px;
}

.standard-right-pad, div span.standard-right-pad {
	padding-right: 5px;
}

.medium-right-pad {
	padding-right: 25px;
}

.standard-right-margin {
	margin-right: 5px;
}

.standard-left-margin {
	margin-left: 5px;
}

.standard-top-margin {
	margin-top: 2px;
}

table.align-text-left tr td, .align-text-left {
	text-align: left;
}

.align-text-right {
	text-align: right;
}

/**** END STANDARD CSS ****/

div.reset-cursor {
	cursor: auto;
}
.hide-scrollbar {
	overflow: hidden;
}

.hide-horizontal-scroll {
	overflow-x: hidden; 
	overflow-y: auto; 
}

.hide-vertical-scroll {
	overflow-x: auto; 
	overflow-y: hidden; 
}

table.border-color {
	bordercolor: #012834;
}

.clickable {
	cursor: pointer;
}

.float-right {
	float: right;
}

.float-left {
	float: left;
}

/* allow nested table to align with parent table */
table table.nested-table {
	margin-left: -3px;
}



.message-container {
	width: 100%;
}

.message-text-alignment {
	text-align: center;
	padding-top: 25px;
	padding-left: 25px;
	padding-right: 25px;
	padding-bottom: 25px;
}

.message-box {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px ;
	padding-bottom: 5px;
	border-style:solid;
	border-width:1px;
	border-color:#777;
}

input.transparent-background{
	background: transparent;
    	border: none;
}

.highlight-cell-border {
	border-style: solid;
	border-color: #234FAC;	
}

.highlight-cell-border-select {
	border-style: solid;
	border-color: #234FAC;	
	border-width: 2px;
}

.highlight-text {
	color: #234FAC;
	font-weight: bold;
}

.sticky-position, thead.sticky-position tr th, table.sticky-position thead tr th {
	position: sticky;
	top: 0;
	z-index: 9999;
}

.textbox_to_label_left {
	background-color : transparent;
	border : none;
	text-align: left;
}

.fixed-footer {
	position: sticky; 
	bottom: 0;
}

.valueGuide-inputBox-hideHighlight {
	outline: none;
	border-width: 0px;
}

/* Hide dialog title bar. */
.hideDialogTitleBar .ui-dialog-titlebar {
	display: none;
} 


/**  Portal Styles **/

.portal-label-margin-top {
	margin-top: 5px;
}

.portal-label-margin-bottom {
	margin-bottom: 5px;
}

.label {
    padding-left:5px;
    padding-top: 5px;
    float:left;
    width: 100px;
}

.field {
    float:left;
    margin-right:15px;
    clear:right;
}

/**  Style for portal quick links **/
.quicklinks ul {
        margin:0px;
        padding:0px;
}
.quicklinks ul li {
        display:inline;
        margin:10px 0px;
        padding:0px 10px;
        border-left-style: solid;
        border-color: #666666;
        border-width: 2px;
}
.quicklinks ul li:first-of-type {
        border-left-style: none;
}

/* ---- Portal legend and fieldset css start---- */
legend {
        color:#012834; /* IE styles legends with blue text by default */
        font-size:12px;
        font-weight:bold;
        margin-left:10px;
        padding-left: 5px;
        padding-right: 5px;
}
fieldset {
        border:1px solid #012834; /* Default fieldset borders vary cross browser, so make them the same */
        font-size:12px;
        color:#012834;
        width:310px;
        font-weight:bold;
}

fieldset div {
        overflow:hidden; /* Contain the floating elements */
        display:inline-block; /* Give layout in ie to contain float */
        width:310px;
}
fieldset div {display:inline-block;text-align:left;vertical-align:middle;} /* Reset element back to block leaving layout in ie */

fieldset.header {
        border:0px solid #dedede; /* Default fieldset borders vary cross browser, so make them the same */
        font-size:10px;
        color:#009;
        width:230px;
        font:bold;
}
fieldset.header div {
        overflow:hidden; /* Contain the floating elements */
        /*display:inline-block;*/ /* Give layout in ie to contain float */
        width:230px;
}

/* Fieldset defs */
form.createappform * {
	padding: 0px 0;
} /* Standard margin and padding reset, normally done on the body */

legend.createapplegend {
	font-size: 16px;
	font: bold;
	background-color: transparent;
}

fieldset.createappfieldset {
	border: 2px solid #A7A7A7;
	/* Default fieldset borders vary cross browser, so make them the same */
	font-size: 20px;
	width: 80%;
	height: 100%;
	padding-bottom: 5px;
	font: bold larger;
	background-color : transparent;
	color : Black;
}

fieldset.createappdiv div {
	overflow: hidden;
	/* Contain the floating elements */
	display: inline-block;
	/* Give layout in ie to contain float */
	width: 100%;
	vertical-align: middle;
	font: bold larger;
}

label.createapplabel {
	float: left;
	/* Take out of flow so the input starts at the same height */
	text-align: right;
	vertical-align: middle;
	width: 30%;
	/* Set a width so the inputs line up */
	font-size: 11px;
	font-weight: bold;
}

/* ---- Portal legend and fieldset css end---- */

.float-none {
	float: none;
}

iframe.hiddenframe {
	border: none; 
	display: none;
}