@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Courgette&display=swap');

/*START: Loading status*/
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

html *{
font-family: 'Lato', sans-serif;
}

#loadingModal {
    display:    none;
    position:   fixed;
    z-index:    1100;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/static/images/GIF-wait-199px.gif')
                50% 50% 
                no-repeat;
}

#loadingImageContainer{
	height: 80%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/static/images/GIF-wait-199px.gif')
                50% 50% 
                no-repeat;
}

#progressBarContainer{
	height: 10%;
}

#progressBarContainer .ui-progressbar-value{
	background: var(--wwDarkBlue);
}

#progressTextContainer{
	height: 10%;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading #loadingModal {
    display: block;
}

body {overflow-y:scroll }

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    /*border-radius: 10px;*/
    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 10px;
    height: 10px;
    background-color: rgb(220,220,220);
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: rgb(150,150,150);
}

::-webkit-scrollbar-thumb:hover {
  	background: rgb(140,140,140);
}

/*END: Loading status*/

/*Start: COMMON*/
	
	body{
		font-family: 'Lato', sans-serif;
		text-decoration: none;
		color: black;
		background-color: var(--wwPageBackground);
		padding-top: 0px;
		padding-bottom: 0px;
		overflow: auto;
		background: #f2f2f2;
		font-size: 12px
	}

	body#loginPageBody, body#errorPageBody{
		padding: 0px;
	}

	select.disabled{
		background: lightgrey;
		color: grey;
	}

	select.dropdownProperties2 option.inapplicable
	, select.dropdownProperties3 option.inapplicable
	, select.dropdownProperties4 option.inapplicable{
		display: none;
	}

	/*Styling for the hidden file upload inputs*/
	.hiddenFileUploadInput{
	    height: 0.1px;
	    width: 0.1px;
	    opacity: 0;
	    overflow: hidden;
	    position: absolute;
	    z-index: -1;	
	}	

	.unselectable{
		-webkit-user-select: none; /* Safari */
		user-select: none;         /* Standard syntax */
	}

	/* Vinay to check */
	#tempProjectIDContainer{
		color: black;
		margin-top: 10px;
	}

	#brandLogo{
	  height: 30px;
	  margin-top: 5px;
	  margin-bottom: 5px;
	  padding: 0px;
	  float: left;
	}

	.logoAndPageTitle{
		display: flex;
		align-items: center;
		float: left;
	}

	.logoAndPageTitle a:focus{
		outline: none;
	}

	.sectionBreak{
		border-bottom: 2px solid rgb(200,200,200);
	}

	input:disabled{
	    background: lightgrey;
	    cursor: not-allowed;
	}

	select:disabled{
	    background: lightgrey;
	    cursor: not-allowed;
	}

	select:disabled:hover
	, select:disabled:focus
	, select:disabled:active:hover
	, select:disabled:active:focus {
	    background: lightgrey;
	    cursor: not-allowed;		
	}

/*START: Primary Color Definitions*/

/*Light theme*/
:root{
	--wwDarkBlue: rgb(6,89,169);
	--wwLightBlue: rgb(142,197,238);
	--darkOrange: rgb(254,84,56);
	--wwDarkOrange: rgb(254,102,78);
	--wwLightOrange: #fea395;
	--wwSectionHeader: var(--wwDarkBlue);
	--lightColorBg: rgb(245,245,245);
	--darkColorBg: rgb(60,60,60);
	--lightColorText: white;
	--darkColorText: rgb(50,50,50);
	--filteringGroupingPanelColor: rgb(75,75,75);
	--inputBorder: rgb(220,220,220);
	--projectsText: var(--wwDarkBlue);
	--wwDarkBackground: rgb(50,50,50);
	--wwSelectionButton: rgb(220,220,220);
	/*--wwSelectionButtonSelected: rgb(224,206,184);*/
	--wwSelectionButtonSelected: rgb(198,217,232);
	--wwSelectionButtonHover: rgb(210,210,210);

	--lightInLightDarkInDark: var(--lightColorText);
	--darkInLightLightInDark: var(--darkColorText);
	--wwPageBackground: var(--lightColorBg);
	--wwNavbarBg: rgb(50,50,50);
	--wwSectionContainer: rgb(230,230,230);
	--tableHeaderBg: rgb(210,210,210);
	--tablePropertiesBg: rgb(210,220,230);
	/*--selectedRowBg: rgb(218,235,253);*/
	/*--selectedRowBg: #d6dae2;*/
	--selectedRowBg: #b4c4e4;
	--hoverRowBg: rgb(220,220,220);
	--wellEconomicsTopContainer: rgb(50,50,50);
	--masterFilterColor:  var(--wwDarkBackground);
	--highlightedRows: rgb(255 255 152);
	--focusColor1: rgb(0, 117, 255); /* light blue */
	--wwAlert: rgb(255,54,54);
	--noSelectionDropdown: rgb(255,255,190);
	--noSelectionMandatoryDropdown: #ffdde3;
	--invalidInput: #ffdde3;
	--sortablePlaceholder: rgb(255,255,190);
	--inputLightBackground: rgb(245,245,245);
	--inputLightBackgroundHover: rgb(250,250,250);

	--dropdownBackground: rgb(219,225,234);
    --dropdownBackgroundHover: rgb(209 217 228);
    --dropdownBackgroundActive: rgb(186,195,211);
    --dropdownBorder: rgb(170,179,195);

	/*--userMessageBackgroundHeadline:lightgrey;*/
	--userMessageBackgroundHeadline:#d6bfff;
	--userMessageBackgroundDanger:#f2dede;
	--userMessageBackgroundWarning:#fcf8e3;
	--userMessageBackgroundSuccess:#c8e5bc;
	--userMessageBackgroundInfo:#b9def0;

	/*--userMessageColorHeadline:black;*/
	--userMessageColorHeadline:#2e015e;
	--userMessageColorDanger:#a94442;
	--userMessageColorWarning:#8a6d3b;
	--userMessageColorSuccess:#3c763d;
	--userMessageColorInfo:#31708f;

	/*--userMessageBorderHeadline:#6c757d;*/
	--userMessageBorderHeadline:#2e015e;
	--userMessageBorderDanger:#d43f3a;
	--userMessageBorderWarning:#e8a400;
	--userMessageBorderSuccess:#3c9a3c;
	--userMessageBorderInfo:#2f96b4;
}

/*Dark Theme*/
:root[data-theme-id="1"]{
	--lightInLightDarkInDark: var(--darkColorText);
	--darkInLightLightInDark: var(--lightColorText);
	--wwPageBackground: var(--darkColorBg);
	--wwNavbarBg: rgb(50,50,50);
	--wwSectionContainer: rgb(40,40,40);
	--tableHeaderBg: black;
	--tablePropertiesBg: rgb(55,55,55);
	--selectedRowBg: rgb(33, 59, 84);
	--hoverRowBg: rgb(58,58,58);
	--projectsText: var(--wwLightBlue);
}

/*END: Primary Color Definitions*/

/* START:  Toggle Switch */
.switchContainerParent{
	display: flex;
	flex-direction: row;
}

.switchContainer{
	border: 1px solid transparent;
	/*height: 21px;*/
	display: flex;
	flex-direction: row;
}

.switchContainer .btn{
	height: 20px;
    font-size: 11px;
}

.switchContainer:focus{
	border: 1px solid rgb(0, 117, 255);
	border-radius: 3px;
	outline: none;
}

.switchContainer .btn:focus{
	outline: none;
}

.switchContainer .btn-danger{
	background-image: -webkit-linear-gradient(top,#939393  0,#787878 100%);
    background-image: -o-linear-gradient(top,#939393  0,#787878 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#939393 ),to(#787878));
    background-image: linear-gradient(to bottom,#939393  0,#787878 100%);
    border-color: #939393;
    background-color: #939393;
}

.switchContainer .btn-danger[disabled]:hover{
	border-color: transparent;
}

.switchContainer .btn-danger:active:focus
, .switchContainer .btn-danger:active:hover{
	border-color: #939393;
}

.switchContainer .btn-danger:hover
, .switchContainer .btn-danger:focus{
	background-color: #787878;
}

.switchContainer .btn-success:focus{
	border-color: #3e8f3e;
}
/* END:  Toggle Switch */


/* Start: Dropdown formatting */
	.required-value-selection.selection-not-made
	,.required-value-selection.selection-not-made:hover{
		/*background-image: linear-gradient(to bottom, #ffdde3 0, #ffdde3 100%);*/
		background-image: linear-gradient(to bottom, var(--noSelectionMandatoryDropdown) 0, var(--noSelectionMandatoryDropdown) 100%);
	}

	select.required-value-selection.selection-not-made:disabled{
	    background: lightgrey;
	    cursor: not-allowed;
	}

	/*.dropdownProperties3:hover, .dropdownProperties3:active:hover, */
	.dropdownProperties4:hover, .dropdownProperties4:active:hover {
		background: var(--inputLightBackgroundHover);
	}

	.dropdownProperties2:focus, .dropdownProperties2:active:focus
	, .dropdownProperties3:focus, .dropdownProperties3:active:focus
	, .dropdownProperties4:focus, .dropdownProperties4:active:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.bulkProcessingDropdown.dropdownProperties3{
		width: auto;
	}

	select.removeFormattingForDisabled:disabled
	, input.removeFormattingForDisabled:disabled{
	    background: transparent;
	    color: var(--darkInLightLightInDark);
	    border: none;	
	    opacity: 1;
	    padding-left: 10px;
	    cursor: auto;
	    -webkit-appearance: none;
	    box-shadow: none;
	}

	select.removeFormattingForDisabled:disabled:hover
	, select.removeFormattingForDisabled:disabled:focus
	, select.removeFormattingForDisabled:disabled:active:focus
	, select.removeFormattingForDisabled:disabled:active:hover
	, input.removeFormattingForDisabled:disabled:hover
	, input.removeFormattingForDisabled:disabled:focus
	, input.removeFormattingForDisabled:disabled:active:focus
	, input.removeFormattingForDisabled:disabled:active:hover {
	    background: transparent;
	    color: var(--darkInLightLightInDark);
	    border: none;	
	    opacity: 1;
	    cursor: auto;
	    -webkit-appearance: none;
	    box-shadow: none;	
	}


/* End: Dropdown formatting */

/* Start: Dropdown Row format */

	.formElementRow.dropdownSelectorToShowSection{
	    border: none;
	    border-radius: 3px;
	    margin: 5px 5px 5px 5px;
	    padding: 15px 0px 15px 0px;
	    background: rgb(220,220,220);
	}

/* End: Dropdown Row format */


/* START: Tooltip */

.tooltipContainer{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px !important;
	height: 15px !important;
	font-size: 11px;
	border-radius: 50%;
	background: lightgrey;
	color: rgb(100, 100, 100);
	margin-left: 5px;
	box-shadow: 0 1px 1px #aaa, inset 0 1px 1px #fff;
	cursor: help;
}

/*.tooltipContainer::before {
  content: "i";
}
*/

.tooltipContainerSmall{
	font-family: Georgia, "Times New Roman", serif; /* metric-stable font */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	padding-top: 2px;
	border-radius: 100%;
	font-size: 7px;
	font-weight: bold;
	background: lightgrey;
	color: rgb(100,100,100);
	margin-left: 5px;
	box-shadow: 0px 1px 1px #aaa, inset 0px 1px 1px #fff;
	cursor: help;
}

.tooltipContainerDark{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	line-height: 1;              /* kill inherited line-height */
	font-family: Georgia, "Times New Roman", serif; /* metric-stable font */
	font-size: 9px;
	font-weight: bold;
	font-style: italic;          /* keeps the "i" look without Courgette */
	border-radius: 50%;
	background: rgb(50,50,50);
	color: white;
	margin-left: 5px;
	box-shadow: 0px 1px 1px #000000, inset 0px 1px 1px #a6a6a6;
	cursor: help;
	padding-top: 1px;   /* compensates for missing descender */
}

.tooltip-inner{
    text-align: left;
}

.tool-tip-and-label-container{
	display: flex;
	flex-direction: row;
	/* Let the tooltip drop below the label when the column is too narrow (e.g. col-sm-1 below 1300px) instead of being squeezed against the right edge */
	flex-wrap: wrap;
	align-items: center;
	line-height: 22px;
}

.tooltipIcon{
	height: 10px;
}

.toolTipOrangeHeader{
	margin-top: 15px;
}

/*a.tooltipContainer:hover
,a.tooltipContainer:focus{
	text-decoration: none;
	color: rgb(100,100,100);
}*/

/* END: Tooltip */

.sortableTableHeaderCell{
	cursor: pointer;
}

.sortTableIcon{
	margin-left: 5px;
}

/* Spacing between the header text and the sort glyphicon in the summary tables */
.sortProductionTemplateSummaryIcon,
.sortWellProductionSummaryIcon,
.sortCostBucketSummaryIcon,
.sortCostTemplatesSummaryIcon,
.sortWellCostsSummaryIcon,
.sortPricingStreamSummaryIcon,
.sortPricingDifferentialBucketSummaryIcon,
.sortPricingDifferentialsTemplateSummaryIcon,
.sortWellPricingDifferentialsSummaryIcon,
.sortProjectSummaryIcon,
.sortOwnershipProfileSummaryIcon,
.sortWellSetSummaryIcon,
.sortRiskProfileSummaryIcon,
.sortWorkingCapitalProfileSummaryIcon,
.sortCorporateItemsSummaryIcon,
.sortHedgesSummaryIcon,
.sortMiscCorporateItemsSummaryIcon,
.sortInvestmentsSummaryIcon,
.sortFinancialStatementsSummaryIcon,
.sortScenarioSetsSummaryIcon,
.sortDataMappingSchemeWellInfoSummaryIcon,
.sortDataMappingSchemeMonthlyStreamsSummaryIcon,
.sortDataStreamsSummaryIcon{
	margin-left: 5px;
}

button.hasUnsavedData{
  animation-name: unsavedDataAnimation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;	
}

@keyframes unsavedDataAnimation{
	from {background-color: #0659a9; border-color: #0659a9;}
  	to {background-color: #fe5438; border-color: #fe5438;}  
}

/* Start: Alert Messages */

.userMessageContainer{
	background: transparent;
	/*padding: 0px;*/
}

/* Bootstrap sets min-height: 1px on all .col-* elements. The direct column
   child of this container is empty until a message is shown, and under the
   new layout shell the page content is sized to fit the viewport exactly —
   the reserved 1px would leave a permanent scrollbar in .ww-main, so zero
   it out. */
.userMessageContainer > div{
	min-height: 0;
}

.userMessageContainer .user-message-icon-container{
    width: 50px;
    display: flex;
    align-items: center;
}

.userMessageContainer .user-message-icon-container .user-message-icon{
	height: 20px;
}

.userMessageContainer .user-message-items-container{
	width: stretch;
	height: stretch;
}

.userMessageContainer .alert{
	margin-top: 10px;
	margin-bottom: 10px;
	border: 0px;
	display: flex;
    justify-content: space-between;
    align-items: center;
	max-height: 300px;
	overflow-y: auto;    	
}

.userMessageContainer .alert.alert-headline{
	background-color: var(--userMessageBackgroundHeadline);
	background-image: none;
	color: black;
	font-size: 1.1em;
	border-left: 4px solid var(--userMessageBorderHeadline);
	color: var(--userMessageColorHeadline);
}

.userMessageContainer .alert.alert-danger{
	background-color: var(--userMessageBackgroundDanger);
	background-image: none;
	font-size: 1.1em;
	border-left: 4px solid var(--userMessageBorderDanger);
	color: var(--userMessageColorDanger);
}

.userMessageContainer .alert.alert-warning{
	background-color: var(--userMessageBackgroundWarning);
	background-image: none;
	font-size: 1.1em;
	border-left: 4px solid var(--userMessageBorderWarning);
	color: var(--userMessageColorWarning);
}

.userMessageContainer .alert.alert-success{
	background-color: var(--userMessageBackgroundSuccess);
	background-image: none;
	font-size: 1.1em;
	border-left: 4px solid var(--userMessageBorderSuccess);
	color: var(--userMessageColorSuccess);
}

.userMessageContainer .alert.alert-info{
	background-color: var(--userMessageBackgroundInfo);
	background-image: none;
	font-size: 1.1em;
	border-left: 4px solid var(--userMessageBorderInfo);
	color: var(--userMessageColorInfo);
}

.userMessageContainer .user-message-button-container{
	height: stretch;
	display: flex;
	align-items: baseline;
}

.userMessageContainer .alert-dismissible button{
	top: 0px;		
}

.userMessageContainer .alert-dismissible button:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
}

.helpful-information-alert>div>div{
	background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
	color: #0659a9;
	border-color: rgb(200,200,200);
    min-height: 20px;
   	padding-left: 20px;
   	margin-top: 10px;
   	margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.helpful-information-alert .close:focus{
	outline: none;
}

.helpful-information-alert .close{
	top: 0;
}

.customFilterWarningMessage>div>div{
	background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
    color: #0659a9;
    font-size: 12px;
    border-color: rgb(200,200,200);
    min-height: 20px;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    padding-bottom: 5px;
}

.customFilterWarningMessage .alert-dismissible button{
	top: 0px;
}

.customFilterWarningMessage .alert-dismissible button:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

#pageContainerPM .helpful-information-alert>div>div
, #pageContainerAdmin .helpful-information-alert>div>div{
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 15px;
	display: flex;
    align-items: center;
}

.multiMessageContainer{
	margin-top: 15px;
	padding-top: 5px;
	padding-bottom: 10px;
	background: rgb(230,230,230);
	display: flex;
	flex-direction: column;
}

.multiMessageContainer button.close{
	margin-bottom: 5px;
    margin-right: 15px;
}

.userMessageContainer .multiMessageContainer .alert{
	margin: 2px 15px 2px 15px;
}



.notificationPanel>div>div{
	background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
  color: #0659a9;
  border-color: rgb(200,200,200);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: 8px 35px 8px 20px;
  word-spacing: 1px;
}

.notificationPanel .alert-dismissible button{
	top: 0px;
}

.notificationPanel .alert-dismissible button:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

/* End: Alert Messages */

/*START: Flashed Messages*/

.flashed-messages-container.hasMessages{
	margin-top: 10px;
	margin-bottom: 10px;
}

.flashed-message{
	border-radius: 3px;
	min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 20px;
    margin-bottom: 5px;

}

/*Colors same as those in bootstrap alerts*/
.flashed-message.info{
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
	background: #d1ecf1;
	color: #0c5460;
	border-color: rgb(200,200,200);
}

.flashed-message.warning{
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
	background: #fff3cd;
	color: #856404;
	border-color: rgb(200,200,200);
}


.flashed-message.danger{
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
	background: #f8d7da;
	color: #721c24;
	border-color: rgb(200,200,200);
}

.flashed-message.success{
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
	background: #d4edda;
	color: #155724;	
	border-color: rgb(200,200,200);
}

span.dismiss-flash{
	cursor: pointer;
	font-weight: 700;
	font-size: 18px;
	padding-right: 5px;
	padding-left: 20px;
}


/*Colors same as those in bootstrap alerts*/
/*END: Flashed Messages*/
	
/* Start: Aligment and spacing and colors */

	#builderSettingsFrame >.col-sm-12
	, #drilling-schedule-control-panel >.col-sm-12{
		margin-left: 40px;
		margin-right: 40px;
		background-color: rgb(215,215,215);
		border-top: solid 2px;
		border-bottom: solid 2px;
	}

	.dropdownContainerPanel1{
		margin-left: 40px;
		margin-right: 40px;
		background-color: rgb(215,215,215);
		border-top: solid 2px;
		border-bottom: solid 2px;
	}

	#wellAttributeFrame>div{
		margin-left: 15px;
		margin-right: 15px;
		background-color: rgb(225,225,225);
		border-top: solid 2px var(--wwNavbarBg);
		border-bottom: solid 2px var(--wwNavbarBg);
	}

	#costsLinkageSubcontainer1 .tableContainer
	, #productionLinkageSubcontainer1 .tableContainer
	, #pricingDifferentialsLinkageSubcontainer1 .tableContainer{
		margin-top: 10px;
		border: none;
	}

	#costsLinkageSubcontainer1 .tableContainer.linkageButtonsContainer
	, #productionLinkageSubcontainer1 .tableContainer.linkageButtonsContainer
	, #pricingDifferentialsLinkageSubcontainer1 .tableContainer.linkageButtonsContainer{
		min-height: 35vh;
	}

	#costsLinkageSubcontainer1 .tableContainer.linkageButtonsContainer >div
	, #productionLinkageSubcontainer1 .tableContainer >div
	, #pricingDifferentialsLinkageSubcontainer1 .tableContainer >div{
		margin: 5px 0px;
		text-align: center;
	}

	#builderSettingsFrame >.col-sm-12{
		background-color: rgb(230,230,230);
	}

	#wellAttributeFrame .commandButtons, #builderSettingsFrame .commandButtons{
		width: 7em;
	}

	.tablePropertiesItem{
		margin-right: 15px;
		height: 18px;
	}

	.propertiesRowFlex{
		display: flex;
	}
	
	.propertiesRowFlexCenter{
		display: flex;
		align-items: center;
	}

	.propertiesRowFlexCenterCenter{
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.propertiesRowFlexEndCenter{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.propertiesRowFlexSpaceBetweenCenter{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.orangeHeaderTwoSided{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headerTextRowNoBulkAttributes{
		display: flex;
		align-items: center;
		height: 30px;
	}

	/* Formatting of Create or Edit Sections - Icons */
	.propertiesCreateEditRow1{
		padding-top: 20px;
		display: flex;
		justify-content: space-around;
	}

	/* Formatting of Create or Edit Sections - Text */
	.propertiesCreateEditRow2{
		font-size: 13px;
		padding-top: 5px;
		padding-bottom: 20px;
		display: flex;
		justify-content: space-around;
	}

	.propertiesRowFlexEndCenter .iconSize2{
		padding-right: 5px;
	}

	.propertiesRowFlexLeftCenter{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	input:invalid, input:invalid:hover{
	  background-image: none;
	  background-color: var(--invalidInput) !important;
	}

	.required-input::after {
		content:" * ";
		color: red;
	}

	input.rightAligned{
		text-align: end;
	}

	input.checkboxCollateralizedDebt{
		margin-right: 5px;
		margin-left: 10px;
		margin-top: 0px;
		margin-bottom: 0px;
	}

	/* to align radio button with text label */
	label>input[type="radio"]{
		margin-bottom: 0px;
		margin-top: 2px;
		margin-left: 0px;
		margin-right: 0px;
	}

	#builderSettingsFrame .textBlueDescriptive{
		text-align: center;
	}

	.formRadio2{
		font-size: 12px;
		margin-left: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.formRadio3{
		font-size: 12px;
		padding-top: 20px;
		display: flex;
		align-items: center;
	}

	.formRadio3>form{
		padding-left: 10px;
	}

	.maturity-basis .formRadio2{
		padding-top: 0px;
		padding-bottom: 15px;
		margin-top: 0px;
	}

	/* Padding Top */
	.paddingTop1{
		padding-top: 20px;
	}

	.paddingTop2{
		padding-top: 40px;
	}

	.paddingTop3{
		padding-top: 10px;
	}

	.paddingTop4{
		padding-top: 5px;
	}

	/*Margin Top*/
	.marginTop1{
		margin-top: 5px;
	}

	.marginTop2{
		margin-top: 10px;
	}

	.marginTop3{
		margin-top: 15px;
	}

	.marginTop4{
		margin-top: 20px;
	}

	/*Padding Bottom*/
	.paddingBottom1{
		padding-bottom: 10px;
	}

	.paddingBottom2{
		padding-bottom: 20px;
	}

	.paddingBottom3{
		padding-bottom: 5px;
	}

	/*Margin Bottom*/
	.marginBottom1{
		margin-bottom: 5px;
	}

	.marginBottom2{
		margin-bottom: 10px;
	}

	.marginBottom3{
		margin-bottom: 15px;
	}

	.marginBottom4{
		margin-bottom: 20px;
	}

	/*Margin Left*/
	.marginLeft10, .marginLeft1{
		margin-left: 10px;
	}
	
	.marginLeft5{
		margin-left: 5px;
	}

	.marginLeft2{
		margin-left: 20px;
	}

	.summary-table-expand-collapse{
		margin-right: 5px;
		cursor: pointer;
	}

	/* Margin Right */
	.marginRight15{
		margin-right: 15px;
	}


	.marginRight8{
		margin-right: 8px;
	}

	.marginRight5{
		margin-right: 5px;
	}

	.minHeight50{
		min-height: 50px;
	}

/*		.boe::after {
	  content: '/Boe';
	}

	.mcfe::after {
	  content: '/Mcfe';
	}

	.bbl::after {
	  content: '/Bbl';
	}

	.mcf::after {
	  content: '/Mcf';
	}

	.month::after {
	  content: '/month';
	}

	.percent::after {
	  content: '%';
	}
*/
	.orangeUpperHeader{
		font-weight: bold;
		font-size: 13px;
		padding-left: 20px;
		margin-bottom: 5px;
		color: var(--darkOrange);
		padding-top: 20px;
		text-transform: uppercase;
	}

	.orangeLowerHeader{
		font-weight: bold;
		font-size: 13px;
		margin-bottom: 5px;
		color: var(--darkOrange);
		padding-top: 20px;
	}

	.blueLowerHeader{
		font-size: 13px;
		padding-top: 5px;
		padding-bottom: 0px;
		padding-left: 20px;
		color: var(--wwDarkBlue);
		font-weight: bold;	
		display: flex;
		align-items: center;
	}

	.tool-tip-and-label-container .blueLowerHeader{
		padding-left: 5px;
	}

	.rowNumberTables{
		width: 50px;
		font-weight: bold;
	}

	.separatorLineHz{
		border-bottom: 1px solid lightgrey;
		margin: 20px 20px;
	}
	
/* End: Aligment, spacing and colors*/


/*For modified date pickers*/
.datepicker table tr td span.month.grouped{
  width: 100%;
}

/*Styling for the password guidelines link*/
span.passwordGuidelinesLink{
	cursor: pointer;
	color: blue;
    text-decoration: underline;
    font-size: small;	
}

/* Start: Navbar */

	.navbar-brand{	
		padding-bottom: 5px;
		padding-top: 5px;
		height: 40px;
	}

	.navbar-fixed-top{
		height: 40px;
		min-height: 40px;
	}
			
	.navbar{
		min-height: 40px;
	}

	.topNavBar{
		background: var(--wwNavbarBg);
		margin-bottom: 0px;
		border:none;
		border-radius: 0px;
	}

	.topNavBar .navbar-navigate-button{
		cursor: pointer;
		display: flex;
	}

	.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus{
		border:none;
	}

	.navbar-default .navbar-nav>.open>a{
		background-image: linear-gradient(to bottom,#929292 0,#929292 100%)
	}

	.navbar-toggle.navbarToggleTop {
	    border: none;
	    margin-top: 4px;
	    margin-bottom: 0px;
	}

	.bottomNavBar{
		min-height: 40px;
	 	background: var(--wwNavbarBg);
		margin-bottom: 0px;
		border:none;
		border-radius: 0px;
	}

	.navBottomText{
		color: white;
		font-size: 12px;
		font-style: italic;
		margin-bottom: 0px;
	}

	.navBottomIcon{
		height: 8px;
		width: 8px;
		border-radius: 50%;
		background: var(--wwDarkBlue);
		display: inline-block;
		margin-left: 15px;
		margin-right: 5px;				
	}

	.navbarIcon{
		color: white;
		width: 20px;
		cursor: pointer;
		margin-right: 10px;
	}

	.navbarIcon2{
		color: white;
		height: 20px;
		cursor: pointer;
	}

	.navbarIconLevel1{
		color: white;
		height: 20px;
		cursor: pointer;
		margin-left: 10px;
	}

	.navbarIconBottomRight{
		height: 28px;
		padding-right: 5px;
		padding-left: 10px;
		cursor: pointer;
	}

	.navbar-default .navbarHeaderTopbar .navbar-toggle .icon-bar{
		background-color: white;
	}

	.navbar-default .navbarHeaderTopbar .navbar-toggle:hover, .navbar-default .navbarHeaderTopbar .navbar-toggle:focus{
		background-color: transparent;
	}

	.navbar-collapse, .navbar-header{
		margin-left: 0px;
	}

	ul.nav.navbar-nav.navMiddle{
	    display: flex;
	    align-items: center;
		float: right;
		height: 100%;
		margin:5px;
	}

	.navMiddle .separatorIcon2{
		margin-right: 3px;
		margin-left: 3px;
	}

	.navbar-header.navbarHeaderTopbar{
		margin-left: 0px;
		padding-right: 10px;
		padding-left: 15px;
	}

	.smallScreen{
		background: var(--wwNavbarBg);
		margin-top: 0px;
		margin-bottom: 0px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	ul.smallScreen.nav.navbar-nav li
	, ul.smallScreen.nav.navbar-nav li:focus{
	    padding: 5px 10px 5px 35px;
	    margin-top: 0px;
	    color: white;
	    text-shadow: none;
	    font-size: 11px;
	}

	ul.smallScreen.nav.navbar-nav li:hover
	, ul.smallScreen.nav.navbar-nav li a:hover
	, .navbar-default .navbar-nav>.open>a:focus
	, .navbar-default .navbar-nav>.open>a:hover
	, ul.smallScreen.nav.navbar-nav li a:focus
	, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover
	, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{
		color: var(--wwDarkOrange);
	}

	ul.smallScreen.nav.navbar-nav li a
	, .navbar-default .navbar-nav .open .dropdown-menu>li>a{
		color: white;
		text-shadow: none;
		padding: 0px;
	}

	.navbar-default .navbar-nav>.open>a
	, .navbar-default .navbar-nav>.open>a:focus
	, .navbar-default .navbar-nav>.open>a:hover{
		background-image: none;
		background: none;
	}

	.navbarTopRight.navbar-nav .open .dropdown-menu>li>a{
		color: black;
		padding: 3px 25px;
	}

	ul.smallScreen.nav.navbar-nav li.divider{
	    height: 1px;
	    margin: 9px 0;
	    overflow: hidden;
	    background-color: lightgray;
	    padding: 0px;
	}

	.navbarTopRight{
		height: 40px;
		display: flex;
		align-items: center;
		padding-right: 8px;
	}
	
	.navbar-collapse {
	  /*overflow-y: visible !important;*/ /* Avoid !important, used it here only for priority */
		height: 500px;
	}

	.navbarTopRight >li >a{
		padding: 5px;
		display: flex;
	}

	.navbarTopRight >li >a:focus{
		outline: none;
	}


	.collapsing{
	    -webkit-transition: none;
	    transition: height 0.6s;
	    display: none;
	}

	.topNavBar .separatorIcon{
		padding-left: 10px;
	}

	.showHideAudioIcons{
		height: 20px;
		padding-left: 10px;
		cursor: pointer;
	}

	.topNavBar .container-fluid {
	    padding-right: 15px;
	    padding-left: 15px;
    }

    /* Start: For width greater than 765px but less than 1175px */
	@media (min-width: 765px) and (max-width: 1175px){
		.topNavBar .container-fluid {
		    padding-right: 0px;
		    padding-left: 0px;
	    }

	    .navbar-header.navbarHeaderTopbar {
		    margin-left: 0px;
		    padding-right: 10px;
		    padding-left: 30px;
		}

		.navbarTopRight{
			height: 40px;
			display: flex;
			align-items: center;
			padding-right: 20px;
		}
	}

	/* START: Collapse Navbar below 1175 */
	@media (max-width: 1175px) {

	    .navbar-header {
	        float: none;
	    }
	    .navbar-left,.navbar-right {
	        float: none !important;
	    }
	    .navbar-toggle {
	        display: block;
	    }
	    .navbar-collapse {
	        border-top: 1px solid transparent;
	        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	        height: 500px;
	    }
	    .navbar-fixed-top {
	        top: 0;
	        border-width: 0 0 1px;
	    }
	    .navbar-collapse.collapse {
	        display: none!important;
	        overflow-x: hidden !important;
	        overflow-y: auto !important;
	    }
	    .navbar-nav {
	        float: none!important;
	    }
	    .navbar-nav>li {
	        float: none;
	    }
	    .navbar-nav>li>a {
	        padding-top: 10px;
	        padding-bottom: 10px;
	    }
	    .collapse.in{
	        display:block !important;
	    }
	   .navbar-nav .open .dropdown-menu {
	       position: static;
	       float: none;
	       width: auto;
	       margin-top: 0;
	       background-color: transparent;
	       border: 0;
	       -webkit-box-shadow: none;
	       box-shadow: none;
	    }

	    .navbar-collapse {
		    /* overflow-y: visible !important; */
		    height: 500px;
		}

	    .navbar-collapse.in {
		    overflow-y: auto !important; 
		}

	}
	/* END: Collapse Navbar below 1200 */

	/* Bottom Navbar Height */
	.bottomNavBar>.container-fluid{
		height: 40px !important;
		color: white;
	}

	.bottomNavbarColumns{
		display: flex;
		align-items: center;
		height: 40px;
	}

	.navbarBottomFirstColumn{
		font-size: 9px;
		display: flex;
    	justify-content: flex-start;
	}

	.navbarBottomSecondColumn{
		font-size: 9px;
	}

	.navbarBottomForm{
		width: 100%
	}

	.navbarBottomForm form{
		display: flex;
		flex-direction: column;
	}

	.bottomNavBar .navbarBottomLabel{
		display: flex;
		min-height: 15px;
	}

	.navbarBottomLabel>span{
		width: -webkit-fill-available;
		min-width: 100px;
		max-width: max-content;
	}

	.navbarBottomFourthColumn{
	    font-size: 9px;
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	}

	.footer-title{
		padding-right: 5px;
	}

	td#footer-active-pricing-stream.unavailable, .footer-active-pricing-stream-title.unavailable{
    	color: red;
	}

	td#footer-active-pricing-stream, .footer-active-pricing-stream-title {
    	color: white;
	}

	.bottomNavbarColumns table{
		width: 100%;
		background-color: transparent;
	}

	.bottomNavbarColumns table td, .bottomNavbarColumns table th{
	    /*border: 1px solid white;*/
	    padding-right: 15px;
	    padding-left: 15px;
	    padding-top: 0px;
	    padding-bottom: 0px;
	    white-space: nowrap;
	}

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

	.navbarBottomFourthColumn table th, .navbarBottomFourthColumn table td{
		text-align: center;
		border-bottom: 0.5px solid white;
	}

	.superUserFooter .bottomNavbarColumns{
		height: 50px;
	}

	/*.bottomNavBar.superUserFooter{
		min-height: 50px;
	}
	*/
	
	.greenFont{
		color: lightgreen;
	}

	.yellowFont{
		color: yellow;
	}

	.pinkFont{
		color: pink;
	}

/* End: Navbar */

/* Start: Icons */
	
	.projectManagementNavigationIcon>img{
		padding-bottom: 1px;
	}

	.bulkProcessingModalIcons{
		padding-bottom: 6px;
	}

	.informationIcons{
		height: 17px;
	    padding: 0px 3px;
	    padding-bottom: 3px;
	}

	.separatorIcon{
		height: 22px;
		padding-left: 0px;
		padding-right: 0px;
	}

	.separatorIcon2{
		height: 30px;
		padding-left: 0px;
		padding-right: 0px;
	}

	.buttonIcon{
		height: 18px;
		padding-right: 5px;
	}

	.linkDelinkButtonIcon{
		width: 25px;
	}

	/* Financial buttons with icons */
	.buttonIcon2{
		height: 10px;
		padding-left: 5px;
	}

	.iconRowTop{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 15px;
	}

	/*Styling for the fragments within the iconRowTop*/
	.iconRowTopFragment{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.rightSeparator, .leftSeparator{
		display: none;
	}

	.hasRightSeparator .separatorIcon.rightSeparator{
		display: flex;
	}

	.hasLeftSeparator .separatorIcon.leftSeparator{
		display: flex;
	}

	.executionButtons{
		height:13px;	
	}

	/* Add and remove cicrular icons */
	.addRemoveIcon{
		height: 20px;
		margin-right: 5px;
		cursor: pointer;
	}

	.addRemoveIcon:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}

	.minMaxIcon img{
		height: 10px;
		cursor: pointer;
	}

	th.minMaxIcon{
		width: 20px;
	}

	.minMaxIcon>div{
		display: flex;
	    flex-direction: column;
	    align-items: center;
	}

	.tablePropertiesIcon{
		/*height: 18px;*/
		height: 1.5em;
		cursor: pointer;
		padding-bottom: 1px;
	}

	.tablePropertiesIcon:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}

	.selectionInfo>.tablePropertiesIcon{
		margin-left: 15px;
	}

	.modal-footer.filterEndButtons, .modal-footer.groupingEndButtons{
		border-top: none;
		/*text-align: center;*/
	}

	.filterButtonsBottom, .groupingButtonsBottom{
		border-bottom: solid 2px var(--filteringGroupingPanelColor);
		border-top: none;
	    margin-top: 5px;
	}

	.filterButtonsTop, .groupingButtonsTop{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30px 0px 0px 0px;
	}

	.deleteIcon{
		height: 17px;
		cursor: pointer;
	}

	/* Makes icons active / inactive */
	.toggleIconPairContainer.inactive{
		cursor: pointer;
	}

	.toggleIconPairContainer.active img.active.inapplicable
	, .toggleIconPairContainer.active img.inactive.inapplicable{
		display: none;
	}

	.toggleIconPairContainer.inactive img.active.inapplicable
	, .toggleIconPairContainer.inactive img.inactive.inapplicable{
		display: none;
	}		

	.hoverIconPairContainer{
		cursor: pointer;
	}

	.hoverIconPairContainer:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}

	.hoverIconPairContainer img.active{
		display: none;
	}

	.hoverIconPairContainer img.inactive{
		display: inherit;
	}

	.hoverIconPairContainer:hover img.active{
		display: inherit;
	}

	.hoverIconPairContainer:hover img.inactive{
		display: none;
	}

	.toggleIconPairContainer.active img.active{
		display: block;
	}

	.toggleIconPairContainer.active img.inactive{
		display: none;
	}

	.toggleIconPairContainer.inactive img.active{
		display: none;
	}

	.toggleIconPairContainer.inactive img.inactive{
		display: block;
	}

	.handle{
		cursor: pointer;
	}

	.excelIconsTop{
		height: 20px;
		cursor: pointer;
	}

	.excelTemplateIcons1{
		height: 25px;
		margin-right: 8px;
	}

	.textWithImageButton{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.textWithImageButton>img{
		height: 16px;
		padding-left: 10px;
	}

	.paddingForBorderBottom{
		padding-bottom: 2px;
	}

	.toggleTopContainerData{
		background: var(--wwDarkBackground);
	}

	.toggleTop{
		color: white;
		font-size: 10px;
		background-color: var(--wwDarkBlue);
		height: 15px;
		width: 32px;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.information-button-icon{
		height: 15px;
		margin-left: 5px;
	}

/* End: Icons */

/* Start: Text Formatting */
	.boldText{
		font-weight: bold;
	}

	.boldTextWCursor{
		font-weight: bold;
		cursor: pointer;
	}
	
	.smallNotificationText{
		font-size: 9px;
		color: var(--wwDarkOrange);
	}
	
	.circleStepLabel{
		font-size: 12px;
	    margin-right: 15px;
	}

	.labelText{
		font-size: 14px;
		color: var(--wwDarkOrange);
		font-family: 'Lato', sans-serif;
		margin-left: 10px;
	}

	.labelText2{
		font-size: 14px;
		color: var(--wwDarkBlue);
		font-weight: bold;
		font-family: 'Lato', sans-serif;
	}

	/*
	.economicsLabelText, .dashboardLabelText{
		font-size: 18px;
		color: rgb(248,35,1);
		font-weight: bold;
		padding-left: 15px;
		font-family: 'Lato', sans-serif;
	}
	*/

	.pageLabelRow{
		height: 30px;
		margin-top: 10px;
		display: flex;
		align-items: center;
	}

	.textDescriptiveCheckbox{
		width: 30px;
		text-align: center;
	}

	.textDescriptive{
		width: 10px;
		min-width: 10px;
		text-align: center;
		font-size: 12px;
	}

	.textDescriptive2{
		font-size: 12px;
		color: var(--wwDarkBlue);
		text-transform: capitalize;
		font-weight: normal;
		margin-right: 10px;
	}

	.textDescriptive3{
		font-weight: bold;
		font-size: 12px;
		padding-left: 25px;
		color: var(--darkOrange);
		padding-top: 20px;
		text-transform: uppercase;
	}

	.textRadio1{
		margin-top: 2px;
		padding-left: 20px;
		padding-right: 20px;
		font-weight: bold;
	}

	.heading2{
		padding-top: 20px;
		padding-bottom: 3px;
		padding-left: 20px;
		font-size: 14px;
		font-weight: bold;
		color: var(--wwDarkBlue);
	}

	#costsLinkageSubcontainer1 .heading2
	, #productionLinkageSubcontainer1 .heading2
	, #pricingDifferentialsLinkageSubcontainer1 .heading2{
		padding-top: 20px;
		padding-bottom: 3px;
		padding-left: 0px;
		font-size: 12px;
		font-weight: bold;
		color: var(--wwDarkBlue);
	}

	.heading3{
		font-size: 13px;
		color: black;
		padding-left: 20px;
		line-height: 25px;
	}

	#costsLinkageSubcontainer1 .heading3
	, #productionLinkageSubcontainer1 .heading3
	, #pricingDifferentialsLinkageSubcontainer1 .heading3{
		font-size: 12px;
		color: black;
		padding: 0px;
	}

	#costsLinkageSubcontainer1 .linkagesInformationRow
	, #productionLinkageSubcontainer1 .linkagesInformationRow
	, #pricingDifferentialsLinkageSubcontainer1 .linkagesInformationRow{
		padding: 0px 15px;
	}

	.heading4{
		font-size: 13px;
		font-weight: bold;
		color: var(--wwLightOrange);
	}

	.heading3 .frame1{
		background: rgb(210,210,210);
	}

	/* Blue Heading */
	.textBlueDescriptive{
		font-size: 13px;
		padding-top: 10px;
		padding-bottom: 10px;
		color: var(--wwDarkBlue);
		font-weight: bold;
	}

	/* Blue Heading */
	.textBlueDescriptive2{
		font-size: 13px;
		padding-top: 5px;
		padding-bottom: 5px;
		color: var(--wwDarkBlue);
		font-weight: bold;	
	}

	/* Blue Heading */
	.textBlueDescriptive3{
		font-size: 13px;
		padding-top: 10px;
		padding-bottom: 0px;
		color: var(--wwDarkBlue);
		font-weight: bold;	
	}

	/* Color Palette Formatting */
	.colorSchemeText{
		font-size: 13px;
		padding-left: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
		color: var(--wwDarkBlue);
		font-weight: bold;
	}

	/* Test for Create or Edit Sections */
	.textAddEdit{
		font-size: 14px;
		color: var(--darkInLightLightInDark);
	}

	.textDescriptive5{
		font-weight: bold;
		font-size: 12px;
		padding-left: 10px;
		padding-top: 10px;
		color: var(--wwDarkBlue);
	}

	.textDescriptive6{
		padding-top: 10px;
		padding-bottom: 0px;
		font-size: 13px;
		color: maroon;
		font-weight: bold;	
	}

	.boldText13{
		font-size: 13px;
		font-weight: bold;
	}

	.fontSize11{
		font-size: 11px;	
	}

	.labelProperties{
		/*padding-left: 10px;*/
		font-size: 12px;
		font-weight: normal;
		margin-bottom: 2px;
	}

	.inputProperties{
		/*width: calc(100% - 0px);*/
		width: -webkit-fill-available;
		float: right;
		padding-left: 10px;
		font-size: 12px;
		border-radius: 3px;
		background: var(--inputLightBackground);
		border: 1px solid var(--inputBorder);
		height: 25px;
		color: var(--darkInLightLightInDark);
	}

	.inputProperties:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}
	
	.inputProperties:hover{
		background: var(--inputLightBackgroundHover);
	}

	.inputProperties:disabled:hover{
		background: lightgrey;
	}

	.inputProperties2{
		padding-left: 10px;
		font-size: 12px;
		border-radius: 3px;
		border-color: rgb(200,200,200);
		background-color: rgb(250,250,250);
		border-width:1px;
	}

	.inputProperties2:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}
	
	.inputProperties2:hover{
		background-image: linear-gradient(to bottom,rgb(240,240,240) 0,rgb(240,240,240) 100%);
	}

	.labelPropertiesTitle{
		padding-left: 10px;
		font-size: 12px;
		font-weight: normal;
		margin-bottom: 0px;	
	}

	.toSpan
	, .valueSpan
	, .weightSpan
	, .maturityText2
	, .EELText2
	, .generalPeriodElementText{
		font-size: 12px;
	}

	.toSpan
	, .generalPeriodElementText
	, .weightSpan{
		margin-right: 10px;
	}

	.periodElementTitle{
		min-width: 100px;
    	font-weight: bold;
    	margin-right: 10px;
	}

	.bulkProcessingText
	, .validateText{
		font-size: 12px;
	    text-align: center;
	    margin-right: 10px;
	}

	.textAlignCenter{
		text-align: center;
	}

	.otherOptionsSubSectionHeaderText{
		margin-top: 15px;
	    color: var(--wwDarkBlue);
	    padding-left: 10px;
	    font-size: 13px;
	    font-weight: bold;
	}

/* End: Text Formatting */

/* Start: Subsection Containers - These are for formatting; the dd-containers are for js */
	
	.sectionContainer{
		background-color: var(--wwSectionContainer);
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		margin-left: 2px;
		margin-right: 2px;
	}

	/* Light Blue Header's Body Container */
	.subSectionContainer1{
		/*
		padding-top:8px;
		padding-bottom: 8px;
		*/
		background-color: rgb(230,230,230);
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		margin-left: 15px;
		margin-right: 2px;
	}

	/* Grey Header's Body Container */
	.subSectionContainer2{
		padding-top:8px;
		padding-bottom: 8px;
		background-color: rgb(230,230,230);
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		margin-left: 30px;
		margin-right: 2px;
	}

	/* Orange-lined Header's Body Container - Hedges */
	.subSectionContainer3{
		padding-top:8px;
		padding-bottom: 8px;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	/* Orange--lined Header's Body Container*/
	.subSectionContainer4{
		/*padding-top:8px;
		padding-bottom: 15px;*/
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		margin-left: 0px;
		margin-right: 0px;
		/*background: rgb(220,220,220);*/
	}

/* End: Subsection Containers - These are for formatting; the dd-containers are for js */
	
/* Start: Inputs Container */

.numberInputFormatting1{
	outline: none;
}

.inputsContainer{
	margin-top: 25px;
	margin-bottom: 15px;
}

/* Start: Form Element Rows */

	.formElementRow{
		font-size: 12px;
		height:100%;
		padding-top: 2px;
		padding-bottom: 2px;
		display: flex;
		align-items: center;
	}

	.formElementRow2{
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.formElementRow3{
		width: 100%;
	}

	/* Staggered label and dropdown */
	#historicalProductionUploadFrame .formElementRow3
	, #arpsFrame .formElementRow3{
		width: calc(100% - 60px);
	}

	.formElementRow4{
		font-size: 13px;
		padding-top: 5px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	}

	.formElementRow5{
		padding-left: 10px;
		font-size: 12px;
		padding-top: 2px;
		padding-bottom: 5px;
		display: flex;
		align-items: center;
	}

	.formElementRow6{
		padding-top: 5px;
	    display: flex;
		align-items: flex-end;
	}

	.formElementRow7{
	    display: flex;
		align-items: flex-end;
	}

	.formElementRow8{
	    padding-bottom: 5px;
	    display: flex;
		align-items: flex-end;
	}

/* Start: Form element rows */

.circleStepColumns{
	display: flex;
	align-items: center;
	justify-content: left;
	border-right: 3px solid whitesmoke;
	height: 45px;
}

.excelTemplateColumn .circleStepColumns:last-child{
	border-right: none;
}

/* Start: Form element titles */

	.formElementTitle{
		height: 100%;
		display: flex;
		color: var(--darkInLightLightInDark);
		align-items: center;
		font-size: 12px;
		padding-right: 0px;
	}

	.formElementTitle2{
		padding: 0px;
	    margin: 0px 0px;
	    font-size: 12px;
	    font-weight: bold;
	}

	.formElementTitle3{
		display: flex;
		align-items: center;
		font-size: 11px;
		font-weight: normal;
		padding-right: 1px;
		color: black;
		height: 18px;
	}

	.formElementTitle5{
		display: flex;
		align-items: center;
		font-size: 13px;
		padding-right: 0px;
	}

	.formElementTitle4{
		padding: 0px;
	    margin: 0px 0px;
	    font-size: 12px;
	    font-weight: normal;
	    margin-left: 2px;
	}

/* Start: Form element titles */

/* Start: Input Container */

	input.inputProperties1{
		color: var(--darkInLightLightInDark);
		border-color: var(--inputBorder);
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width:1px;
		font-size:12px;
		height:23px;
		padding-right: 20px;
		padding-left: 5px;
		padding-top:0px;
		padding-bottom: 0px;
		width:100%;
	}

	input.inputProperties1:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	input.inputProperties1:hover{
		background-color: rgb(240,240,240);
	}

	.label-input-pair-column-container{
		max-width: max-content;
		padding: 0px 10px;
	}

	.label-input-pair-column-container>input{
		width: 100%;
	    min-width: 75px;
	    height: 25px;
	    color: var(--darkInLightLightInDark);
	    border: 1px solid var(--inputBorder);
	    border-radius: 3px;
	    background-color: var(--inputLightBackground);
	    padding-left: 10px;
	    padding-right: 10px;
	    font-size: 12px;
	    font-weight: normal;
	}

	.label-input-pair-column-container>input:focus {
	    outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.label-input-pair-column-container>input:hover{
		background-color: var(--inputLightBackgroundHover);
	}

/* End: Input Container */


/* Start: Form element container */

	/*Form Element Container 1*/
	.formElementContainer{
	/*	height:21px; */
		display:flex;
		align-items: center;	
	}

	div.ww-input-group input{
		min-width: fit-content;
	}

	/*Use this class when the input group is the only child of its parent container
	This will let the input group fit the width of the parent container*/
	div.ww-input-group.standalone{
		width: 100%
	}

	div.ww-input-group.standalone>input{
		min-width: auto;
	}

	div.ww-input-group.standalone>input[type="number"]{
		min-width: auto;
		padding-right: 0px;
	}

	div.ww-input-group>input[type="number"]{
		padding-right: 0px;
	}

	div.ww-input-group input.prefixed{
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		margin-left: 0px
	}

	div.ww-input-group input.suffixed{
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		margin-right: 0px		
	}

	div.ww-input-group{
		display: flex;
	}

	div.ww-input-group:not(.prefixed) .prefixSpan{
		display: none;
	}

	div.ww-input-group:not(.suffixed) .suffixSpan{
		display: none;
	}

	span.prefixSpan, span.suffixSpan{
	    background: rgb(138,138,138);
	    color: white;
	    min-width: fit-content;
	    text-align: center;
	    padding-left: 10px;
	    padding-right: 10px;
	    font-size: 12px;
	    display: flex;
    	align-items: center;
	}

	.prefixSpan{
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
		/*margin-left: 10px*/
	}

	.suffixSpan{
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		margin-right: 10px
	}

	.formElementContainer>input{
		width:100%;
	}

	.formElementContainer>input
	, .formElementContainer>.ww-input-group>input{
		background-color: var(--inputLightBackground);
		padding-left: 10px;
		font-size:12px;
		color: var(--darkInLightLightInDark);
		border: 1px solid var(--inputBorder);
		border-radius: 3px;
		height: 25px;
	}

	.formElementContainer>input:focus
	, .formElementContainer>.ww-input-group>input:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.formElementContainer input[type="checkbox"]:focus
	, .formElementRow8 input[type="checkbox"]:focus
	, .formElementRow8 input[type="radio"]:focus
	, .formElementRow input[type="radio"]:focus
	, .subSectionContainer4 input[type="radio"]:focus{
		outline: 1px auto rgb(0, 117, 255);
	}

	.formElementContainer>input:hover
	, .formElementContainer>.ww-input-group>input:hover{
		background-color: var(--inputLightBackgroundHover);
	}

	/*Form Element Container 2*/
	.formElementContainer2{
	/*	height:21px; */
		display:flex;
		align-items: center;	
	}

	.formElementContainer2>input, .formElementContainer2>.ww-input-group>input{
		height: 25px;
		border-color: rgb(200,200,200);
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width: 1px;
		padding-left: 25px;
		font-size:12px;
	}

	.formElementContainer2>input:focus, .formElementContainer2>.ww-input-group>input:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.formElementContainer2>input:hover, .formElementContainer2>.ww-input-group>input:hover{
		background-color: rgb(240,240,240);
	}

	.searchInput{
		background-image: url('/static/images/icons/magnifying-glass.svg');
		background-position: 7px 6px;
		background-repeat: no-repeat;
	}

	/*Form Element Container 3*/
	.formElementContainer3{
		height:100%;
		display:flex;
		align-items: center;
		padding-right: 1px;
		padding-left: 1px;
	}
	.formElementContainer3>input{
		width:100%;
		min-width: 75px;
	}

	.formElementContainer3>input, .formElementContainer3>.ww-input-group>input{
		border: 1px solid var(--inputBorder);
		border-radius: 3px;
		background-color: var(--inputLightBackground);
		padding-left: 5px;
		padding-right: 5px;
		font-size:10px;
		font-weight: normal;
		height: 25px;
	}

	.formElementContainer3>input[type="number"]{
		padding-right: 0px;
	}

	.formElementContainer3>input:focus, .formElementContainer3>.ww-input-group>input:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.formElementContainer3>input:hover, .formElementContainer3>.ww-input-group>input:hover{
		background-color: var(--inputLightBackgroundHover);
	}

	td.formElementContainer3{
		text-align: left;
	    white-space: normal;
	    display: table-cell;
    }

	/*Form Element Container 4 - Visualization dashboard*/
	.formElementContainer4{
		display:flex;
		align-items: center;
		padding-left: 2px;
	}

	.formElementContainer4>input{
		width:100%;
	}

	.formElementContainer4>input, .formElementContainer4>.ww-input-group>input{
		height: 19px;
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width:1px;
		padding-left: 5px;
		margin-right: 8px;
		font-size:11px;
	}

	.formElementContainer4>input:focus, .formElementContainer4>.ww-input-group>input:focus{
		outline-color: rgb(200,200,200);
	}

	.formElementContainer4>input:hover, .formElementContainer4>.ww-input-group>input:hover{
		background-color: rgb(245,245,245);
		border-top-color: rgb(200,200,200);
		border-left-color: rgb(200,200,200);
	}

	/*Form Element Container 5 - Working Capital*/
	.formElementContainer5{
		height:100%;
		display:flex;
		align-items: center;
		padding-right: 1px;
		padding-left: 1px;
	}

	.formElementContainer5>input{
		width:100%;
		min-width: 75px;
		border-color: transparent;
		border-radius: 3px;
		background-color: white;
		border-width:1px;
		padding-left: 5px;
		padding-right: 5px;
		font-size:10px;
		font-weight: normal;
	}

	.formElementContainer5>input[type="number"]{
		padding-right: 0px;
	}

	.formElementContainer5>input:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.formElementContainer5>input:hover{
		background-color: white;
	}

	td.formElementContainer5{
		text-align: left;
	    white-space: normal;
	    display: table-cell;
    }

    /*Form Element Container 6: Data Mapping*/
    .formElementContainer6{
		height:100%;
		padding-right: 1px;
		padding-left: 1px;
		font-size: 12px;
	}

	.formElementContainer6>input{
		width:100%;
		min-width: 75px;
		border-color: transparent;
		border-radius: 3px;
		background-color: white;
		border-width:1px;
		padding-left: 5px;
		padding-right: 5px;
		font-size:12px;
		font-weight: normal;
	}

	.formElementContainer6>input[type="number"]{
		padding-right: 0px;
	}

	.formElementContainer6>input:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.formElementContainer6>input:hover{
		background-color: white;
	}

	td.formElementContainer6{
		text-align: left;
	    white-space: normal;
	    display: table-cell;
    }

    /* START: formElementContainer7 - Risking */

    .formElementContainer7{
		display:flex;
		align-items: center;
		justify-content: center;
		height: 22px;
	}

    .formElementContainer7>input{
		width:100%;
	}

	.formElementContainer7>input
	, .formElementContainer7>.ww-input-group>input{
		border-color: transparent;
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width:1px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 10px;
		font-weight: normal;
		height: 22px;
	}

	.formElementContainer7>input:focus
	, .formElementContainer7>.ww-input-group>input:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.formElementContainer7 input[type="checkbox"]:focus
	, .formElementRow8 input[type="checkbox"]:focus
	, .formElementRow8 input[type="radio"]:focus
	, .formElementRow input[type="radio"]:focus
	, .subSectionContainer4 input[type="radio"]:focus{
		outline: 1px auto rgb(0, 117, 255);
	}

	.formElementContainer7>input:hover
	, .formElementContainer7>.ww-input-group>input:hover{
		background-color: rgb(245,245,245);
	}

	td.formElementContainer7{
		text-align: left;
	    white-space: normal;
	    display: table-cell;
    }

    /* END: formElementContainer7 - Risking */


/* End: Form element container */

/* START: Label & Field Groups */
.labelAndFieldGroup{
	display: flex;
	flex-direction: column;
	margin-right: 5px;
}

.labelAndFieldGroup.checkbox-label-and-field-group-type-1{
	min-width: 10%;
}

.labelAndFieldGroup.checkbox-label-and-field-group-type-1 .labelSpan{
	text-align: center;
}

.labelSpan{
	min-height: 20px;
	font-weight: 600;
}

.periodElementRow .labelAndFieldGroup input[type="text"]
, .revolverSubOptionElement .labelAndFieldGroup input[type="text"]{
	width: 100%;
}


.revolverSubOptionElement:not(:first-child) .labelSpan{
	display: none;
}

/*Start: Icon Containers*/

	/* Single Icon Container 1 - For Dark Blue Header */
	.singleIconContainer1{
		height: 20px;
		min-width: 20px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: white;
		margin-right: 2px;
		margin-left: 2px;
	}

	.singleIconContainer1:first-child{
		margin-left:0px; 
	}

	.singleIconContainer1:last-child{
		margin-right:0px;
	}

	.singleIconContainer1:focus{
		outline: none;
		border: 1px solid var(--focusColor1);
	}

	/* Single Icon Container 2 - For Light Blue Header*/
	.singleIconContainer2{
		height: 19px;
		width: 19px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--wwDarkBlue);
		margin-right: 2px;
		margin-left: 2px;
	}

	.singleIconContainer2:first-child{
		margin-left:0px; 
	}

	.singleIconContainer2:last-child{
		margin-right:0px;
	}

	.singleIconContainer2:focus{
		outline: none;
		border: 1px solid var(--focusColor1);
	}

	/* Single Icon Container 3 - For grey Header */
	.singleIconContainer3{
		height: 19px;
		width: 19px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(100,100,100);
		margin-right: 2px;
		margin-left: 2px;
	}

	.singleIconContainer3:first-child{
		margin-left:0px; 
	}

	.singleIconContainer3:last-child{
		margin-right:0px;
	}

	.singleIconContainer3:focus{
		outline: none;
		border: 1px solid var(--focusColor1);
	}

	/* Single Icon Container 6 - For navbar Icons */
	.singleIconContainer6{
		height: 28px;
		min-width: 30px;
		border-radius: 3px;
		border-style: solid;
		border-color: var(--wwDarkOrange);
		border-width: medium;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--wwDarkOrange);
		margin-left: 3px;
		margin-right: 3px;
		color: white;
	}

	.singleIconContainer6:hover{
		background: #fe4a2e; /* Darker WW Orange: Active of original WW orange; */
		border-color: #fe4a2e;
	}		

	li.singleIconContainer6 > a.mastHeadLink{
		padding: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	li.singleIconContainer6 > .text{
		padding-right: 8px;
		padding-left: 8px;
	}

	img.mastHeadIcon{
		height: 20px;
		cursor: pointer;
	}

	/* Hides navbar text (to show icons instead) */
	span.text{
		display: none;
	}	

	/* Show text for ACTIVE page */
	.singleIconContainer6.active >span.text{
		display: flex;
		font-size: 12px;
	}	

	/* Hide icon for ACTIVE page */
	.singleIconContainer6.active >img.mastHeadIcon{
		display: none;
	}

	/* Formatting of ACTIVE orange icon */
	.singleIconContainer6.active{
		/*box-shadow: 0 0 5px var(--wwDarkOrange);*/
	    border: 1.5px solid var(--wwDarkOrange);
	    padding-right: 10px;
	    padding-left: 10px;
	    background: var(--wwNavbarBg);
	    color: var(--wwDarkOrange);
	    font-weight: bold;
	}

	/* Formatting of ACTIVE grey icon */
	.singleIconContainer6.subIconContainer1.active{
		/*box-shadow: 0 0 5px rgb(175,175,175);*/
	    border: 1.5px solid rgb(175,175,175);
	    padding-right: 10px;
	    padding-left: 10px;
	    background: var(--wwNavbarBg);
	    color: rgb(175,175,175);
	    font-weight: bold;
	}

	/* Make subcontainer grey */
	.singleIconContainer6.subIconContainer1{
		background: rgb(128,128,128);
		border-color: rgb(128,128,128);
	}

	.singleIconContainer6.subIconContainer1.inactive:hover{
		background: rgb(110,110,110);
		border-color: rgb(110,110,110);
	}

	/* Single Icon Container 7 - For Orange-lined Header */
	.singleIconContainer7{
		height: 15px;
		width: 15px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: var(--wwDarkOrange);
		margin-right: 2px;
		margin-left: 2px;
	}

	.singleIconContainer7:focus{
		outline: none;
		border: 1px solid var(--focusColor1);
		box-shadow: 0px 0px 3px var(--focusColor1);
	}

	.singleIconContainer7:first-child{
		margin-left:0px; 
	}

	.singleIconContainer7:last-child{
		margin-right:0px;
	}

	/*Single Icon Container 8 - Black icon for filters and groups */
	.singleIconContainer8{
		height: 23px;
		min-width: 23px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(225,225,225);
		margin-right: 2px;
		margin-left: 2px;
	}

	.singleIconContainer8:focus{
		border: 1px solid var(--focusColor1);
		outline: none;
	}

	/*Single Icon Container 9 - Black circle for CI > Draws and Payouts */
	.singleIconContainer9{
		height: 15px;
		width: 15px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #212121;
		margin-right: 2px;
		margin-left: 2px;
	}

	.singleIconContainer9:focus{
		outline: none;
		border: 1px solid var(--focusColor1);
		box-shadow: 0px 0px 3px var(--focusColor1);
	}

/*End: Icon Containers*/

/* Start: Page Containers */

/* Page containers: zero the Bootstrap 15px left/right padding so page
   content runs edge-to-edge in the content area (margin: auto is the
   Bootstrap default, kept explicit). The > direct-child combinator is
   required on the panels: Production / Costs / Pricing have a nested
   .container-fluid (the Linkages legend,
   .linkages-legend.legendContainer2) that must keep its Bootstrap gutters. */
#wellInfoPanel > .container-fluid,
#productionPanel > .container-fluid,
#costsPanel > .container-fluid,
#pricingPanel > .container-fluid,
#ownershipPanel > .container-fluid,
#developmentPlanPanel > .container-fluid,
#pageContainerRisking,
#pageContainerWorkingCapital,
#pageContainerDataStreams,
#pageContainerCorporateItems,
#pageContainerInvestments,
#pageContainerAdmin,
#pageContainerPM,
#pageContainerSuperUser,
.filterContainerProjectStructure{
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
}

/* End: Page Containers */

/* Start: Section Row - Formats the section header rows */

	/* Section Row 1 - Dark Blue */
	.sectionRow{
		background-color: var(--wwSectionHeader);
		border-radius: 3px;
		color:white;
		margin-left: 2px;
		margin-right: 2px;
	}

	/* Only section rows that follow a sibling section row get the 10px top
	   margin — the first one in a container sits flush. Sibling combinator
	   instead of :first-child because other rows (e.g. filter rows) may
	   precede the first section row. */
	.sectionRow ~ .sectionRow{
		margin-top: 10px;
	}

	/* Pages whose content starts with a section row that is not preceded by
	   a sibling section row (it sits under a button/filter row or at the top
	   of a frame), so the sibling rule above doesn't reach it — give it the
	   same 10px top margin there. */
	#productionPanel .sectionRow, #costsPanel .sectionRow, #pricingPanel .sectionRow,
	#pageContainerFS .sectionRow, #pageContainerDataUpload .sectionRow, #pageContainerSA .sectionRow{
		margin-top: 10px;
	}

	.sectionRow>div{
		height: 25px;
		display: flex;
		align-items: center;
		justify-content:space-between;
	}

	.sectionRow>div>div{
		display: flex;
		align-items: center;
	}

	.sectionHeaderText{	
		padding-left: 10px;
		font-size: 14px;
	}	

	/* Sub Section Row 1 - Light Blue */	
	.subSectionRow1{
		margin-top: 10px;
		background-color: var(--wwLightBlue);
		border-radius: 3px;
		color:black;
		margin-left: 15px;
		margin-right: 2px;
	}

	.subSectionRow1>div{
		height: 25px;
		display: flex;
		align-items: center;
		justify-content:space-between; 
	}

	.subSectionRow1>div>div{
		display: flex;
		align-items: center;
	}

	.subSectionHeaderText1{	
		padding-left: 10px;
		font-size: 13px;
	}	

	.subSectionHeaderText3{	
		width: 100%;
		font-size: 10px;
		font-weight: bold;
		color: var(--darkInLightLightInDark);
		/* color: var(--wwDarkOrange);*/
	}	

	.subSectionHeaderText4{
		font-size: 13px;
		font-weight: bold;
		padding-left: 10px;
		border-bottom: 0.5px solid var(--wwDarkOrange);
		margin-bottom: 5px;
	}

	/* Sub Section Row 2 - Grey */
	.subSectionRow2{
		margin-top: 10px;
		background-color: rgb(175,175,175);
		border-radius: 3px;
		color:black;
		margin-left: 30px;
		margin-right: 2px;
	}

	.subSectionRow2>div{
		height: 25px;
		display: flex;
		align-items: center;
		justify-content:space-between;
	}

	.subSectionRow2>div>div{
		display: flex;
		align-items: center;
	}

	.subSectionHeaderText2{	
		padding-left: 10px;
		font-size: 13px;
		font-weight: bold;
	}	

	/* Sub Section Row 3 - Grey 2 */
	/*.subSectionRow3{
		margin-top: 20px;
		border-bottom: var(--wwDarkOrange) solid;
		border-width: thin;
		color:black;
		margin-left: 15px;
		margin-right: 15px;
	}

	.subSectionRow3>div{
		height: 25px;
		display: flex;
		align-items: center;
		justify-content:space-between;
	}

	.subSectionRow3>div>div{
		display: flex;
		align-items: center;
	}*/

	/* Sub Section Row 4 */
	.subSectionRow4{
		margin-top: 10px;
		border-bottom: var(--wwDarkOrange) solid;
		border-width: 0.5px;
		color:black;
		margin-left: 0px;
		margin-right: 0px;
	}

	.subSectionRow4>div{
		height: 25px;
		display: flex;
		align-items: center;
	}

	/*Debt Repeatable Panel */
	.subSectionRow5{
		margin-top: 10px;
		border-bottom: var(--wwDarkOrange) solid;
		border-width: thin;
		color:black;
		margin-left: 0px;
		margin-right: 0px;
	}

	.subSectionRow5>div{
		height: 25px;
		display: flex;
		align-items: center;
		justify-content:space-between;
		padding-left: 0px;
	}

	.subSectionRow5>div>div{
		display: flex;
		align-items: center;
	}

/* End: Section Row - Formats the section header rows */

/* Start: Dropdown Properties */

	/* Dropdown Properties 1 */
	.dropdownProperties1{
		height:25px;
		font-size: 12px;
		color: black;
		padding-right: 25px;
		padding-left: 20px;
		padding-top:0px;
		padding-bottom: 0px;
		width:500px;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-shadow: none;
	}

	.dropdownProperties1:active:focus{
		outline-color: rgb(255,173,126);
	}

	/*.dropdownMenu1{
		max-width:90%;
		min-width:500px;
		position: relative;
		background-color: rgb(240,240,240);
		overflow: hidden;
		font-size: 12px;
	}
	*/

	.dropdownMenu1>li>a{
		padding-top: 1px;
		padding-bottom: 1px;
	}

	/* Dropdown Properties 2 - Input-like format */

	.dropdownProperties2{
		height: 25px;
		font-size: 12px;
		color: var(--darkInLightLightInDark);
		padding-right: 5px;
		padding-left: 5px;
		padding-top:0px;
		padding-bottom: 0px;
		width:100%;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-shadow: none;

		border-radius: 4px;
		background-image: none;
		background-color: var(--inputLightBackground);
		border: 1px solid var(--inputBorder);
		-webkit-box-shadow: none;
	}

	.dropdownProperties2:hover, .dropdownProperties2:active:hover{
		background-color: var(--inputLightBackgroundHover);
	}

	/* Dropdown Properties 3 - Button-like format */
	.dropdownProperties3{
        height:25px;
        font-size: 12px;
        font-weight: normal;
        color: var(--darkInLightLightInDark);
        padding-right: 20px;
        padding-left: 10px;
        padding-top:1px;
        padding-bottom: 1px;
        width:100%;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-shadow: none;
        background: var(--inputLightBackground);
        border-radius: 3px;
        border-color: var(--inputBorder);

        /* Caret */
        -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;

		background-image: url("/static/images/icons/chevron-down.svg");
	    background-repeat: no-repeat;
	    background-position: right 8px center;
	    background-size: 10px 7px;
    }

	.dropdownProperties3 option:not(:first-child){
		color: black;
	}

	.dropdownProperties3:hover{
		background-color: var(--inputLightBackgroundHover);
	}

	

	.dropdownProperties3.dropdownsToBeRenamed {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;

		height: 25px;
		width: 100%;
		font-size: 12px;
		color: var(--darkInLightLightInDark);
		padding: 1px 24px 1px 10px;
		text-align: left;
		text-shadow: none;
		box-sizing: border-box;
		cursor: pointer;

		border: none;
		border-radius: 4px;

		border: 1px solid var(--dropdownBorder);
		background-color: var(--dropdownBackground);
		background-image: url(/static/images/icons/chevron-down.svg);
		background-repeat: no-repeat;
		background-position: right 8px center;
		background-size: 10px 7px;

		transition: background-color .12s ease;
	}

	.dropdownProperties3.dropdownsToBeRenamed:hover {
		background-color: var(--dropdownBackgroundHover);
	}

	.dropdownProperties3.dropdownsToBeRenamed:active {
		background-color: var(--dropdownBackgroundActive);
	}

	.dropdownProperties3.dropdownsToBeRenamed option {
    	background-color: #ffffff;
	    color: #1f2937;
	    padding: 3px 8px;
	}

	/* keep the placeholder muted */
	.dropdownProperties3.dropdownsToBeRenamed option:first-child {
	    color: #909090;
	}


	/* Dropdown Properties 4 - Button-like, shorter height and different dimensions */
	.dropdownProperties4{
		height:25px;
		width: 100%;
		font-weight: normal;
		font-size: 10px;
		padding-right: 5px;
		padding-left: 5px;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-shadow: none;
		color: var(--darkInLightLightInDark);

		background: var(--inputLightBackground);
		border: 1px solid var(--inputBorder);
		border-radius: 4px;

		/*
		background-image: linear-gradient(to bottom,rgb(250,250,250) 0,rgb(210,210,210) 100%);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		*/
	}

	.dropdownProperties4 option:not(:first-child){
		color: black;
	}

/* End: Dropdown Properties */

/* Start: Multi Select Properties */

	/* Multi Select Properties 1 */
	button.btn.btn-default.dropdown-toggle.multiselectProperties1{
		height:25px;
		width: 100%;
		font-size: 12px;
		padding: 0px 5px;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-shadow: none;
		color: black;

		border-radius: 3px;
		border: 1px solid var(--inputBorder);
		background: var(--inputLightBackground);
		-webkit-box-shadow: none;

		/*
		background-image: linear-gradient(to bottom,rgb(250,250,250) 0,rgb(210,210,210) 100%);
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		border-color: rgb(200,200,200);
		*/
	}

	button.btn.btn-default.dropdown-toggle.multiselectProperties1:hover
	,button.btn.btn-default.dropdown-toggle.multiselectProperties1:active:hover{
		background: var(--inputLightBackgroundHover);
	}

	button.btn.btn-default.dropdown-toggle.multiselectProperties1:focus
	,button.btn.btn-default.dropdown-toggle.multiselectProperties1:active:focus {
		outline: none;
		border: 1px solid var(--focusColor1);
	}

	/* Multi Select Properties 2 */
	.dropdown-toggle.multiselectProperties2{
		height: 25px;
		width: 100%;
		font-size: 12px;
		padding: 0px 5px;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-shadow: none;
		color: var(--darkInLightLightInDark);
		border-radius: 3px;
		border: 1px solid var(--inputBorder);
		background: var(--inputLightBackground);
		/*
		background-image: linear-gradient(to bottom, rgb(230, 230, 230) 0, rgb(210, 210, 210) 100%);
		border-color: rgb(200, 200, 200);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
		*/
		-webkit-box-shadow: none;
	}

	.dropdown-toggle.multiselectProperties2:focus
	, .dropdown-toggle.multiselectProperties2:active:focus
	, .open>.dropdown-toggle.btn-default:focus{
		outline: none;
    	border: 1px solid var(--focusColor1);
	}

	.dropdown-toggle.multiselectProperties2:hover{
		background: var(--inputLightBackgroundHover);
	}

	.dropdown-toggle.multiselectProperties2 .dropdownLabel{
		padding-right: 20px;
	    padding-left: 5px;
	    padding-top: 1px;
	    padding-bottom: 1px;
	    width: 100%;
	}

	.dropdown-toggle.multiselectProperties2 .dropdownLabel:focus
	, .dropdown-toggle.multiselectProperties2 .dropdownLabel:active:focus{
		outline: none;
		background: var(--inputLightBackground);
	}

	.dropdown-toggle.multiselectProperties2 .dropdownLabel:hover{
		background-image: none
	}

	ul.dropdown-menu.multiSelectOptions{
	    width: max-content;
	}

	.multiSelectOptions li {
	    display: flex;
	    align-items: center;
	    padding: 0px 10px;
	}

	.multiSelectOptions li input {
	    margin-right: 10px;
	    margin-top: 2px;
	}

	.multiSelectOptions li:hover{
	    background: rgb(25,103,210);
	    color: white;
	}

	.multiSelectOptions li:hover{
	    background: rgb(25,103,210);
	    color: white;
	}

/* End: Multi Select Properties */

/* START: Stream Segments */
.segmentHeaderRow label.with-tooltip{
	display: flex;
}

.periodElementRow input.fixed-width.stream-segment-element-fixed-width-period
, .segmentHeaderRow label.fixed-width.stream-segment-element-fixed-width-period
, div.ww-input-group.fixed-width.stream-segment-element-fixed-width-period{
	width: 10%;
	margin-right: 10px;
}

.periodElementRow select.fixed-width.small-dropdown
, .segmentHeaderRow label.fixed-width.small-dropdown{
	width: 10%;
	margin-right: 10px;
}

.periodElementRow select.fixed-width.medium-dropdown
, .segmentHeaderRow label.fixed-width.medium-dropdown{
	width: 15%;
	margin-right: 10px;
}

.periodElementRow input.fixed-width.stream-segment-element-fixed-width-general-value
, .segmentHeaderRow label.fixed-width.stream-segment-element-fixed-width-general-value
, div.ww-input-group.fixed-width.stream-segment-element-fixed-width-general-value{
	width: 15%;
	margin-right: 10px;
}

.periodElementRow input.fixed-width.stream-segment-element-fixed-width-currency-value
.periodElementRow select.fixed-width.stream-segment-element-fixed-width-currency-value
, .segmentHeaderRow label.fixed-width.stream-segment-element-fixed-width-currency-value
, div.ww-input-group.fixed-width.stream-segment-element-fixed-width-currency-value{
	width: 15%;
	margin-right: 10px;
}

.periodElementRow input.fixed-width.stream-segment-element-fixed-width-percent-value
, .periodElementRow select.fixed-width.stream-segment-element-fixed-width-percent-value
, .segmentHeaderRow label.fixed-width.stream-segment-element-fixed-width-percent-value
, div.ww-input-group.fixed-width.stream-segment-element-fixed-width-percent-value{
	width: 10%;
	margin-right: 10px;
}
/* END: Stream Segments */


/* Start: Repeatable and Non-repeatable Panels */

	/* Repeatable sections*/

	.repeatablePanel1{
		/*background-color: rgb(210,210,210);*/
		border: 1px solid rgb(210, 210, 210);
    	background-color: rgb(235, 235, 235);
		border-radius: 3px;
		margin-right: 5px;
		margin-left: 5px;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 15px;
		border-left: 4px solid var(--wwDarkBlue);
    	border-radius: 6px;
	}

	#createEditCostValues .costBucketInCostValues.first-item-in-repeatable-panel
	, #createEditPricingDifferentials .pricingDifferentialBucketInPricingDifferentialValues.first-item-in-repeatable-panel{
		margin-top: 15px;
	}

	/* To be deleted after Roll Fwd Value constraint for revolver is added using js */
	.repeatablePanelTemp{
		background-color: rgb(210,210,210);
		border-radius: 3px;
		margin-right: 5px;
		margin-left: 5px;
		padding-left: 15px;
		padding-right: 15px;
		margin-top: 10px;
	}

	.repeatablePanel1TitleBottomAdjustment{
		border-bottom: none;
	}

	.repeatablePanel1TitleBottomAdjustment> .repeatablePanel1TitleBorderPartial{
		border-bottom: var(--wwDarkOrange) solid;
		border-width: 0.5px;
		margin-bottom: 5px;
	}

	.addRemoveRepeatablePanel{
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addRepeatablePanelBtn:focus
	, .removeRepeatablePanelBtn:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}

	/* NonRepeatable Panel */
	.nonRepeatablePanel{
		border: 1px solid rgb(210,210,210);
		background-color: rgb(235,235,235);
		border-radius: 3px;
		margin-right: 5px;
    	margin-bottom: 15px;
    	margin-left: 5px;
		padding: 15px 15px;
	}

/* End: Repeatable and Non-repeatable Panels */

/* Start: Glyphicons */

	.alert .glyphicon,
	.glyphicon {
		font-weight: normal !important;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		line-height: 1;
		text-shadow: none;
	}

	.glyphicon{
		top:0px;
	}

	/* For Dark Blue Header Icons */
	.glyphicon1{
		color: var(--wwDarkBlue);
	  	font-size: 12px;
	}

	/* For Light Blue Header Icons */
	.glyphicon2{
		color: white;
	  	font-size: 11px;
	}

	/* For Grey Header Icons */
	.glyphicon3{
		color: white;
	  	font-size: 10px;
	}

	/* For Orange Header Icons */
	.glyphicon4{
		color: white;
	  	font-size: 8px;
	}

	/* For Visualization Frames' Label Icons (Grey) */
	.glyphicon5{
		color: rgb(100,100,100);
	  	font-size: 12px;
	  	vertical-align: middle;
	  	padding-left: 0px;
	}

	.navbarTopRight .glyphicon{
		color: white;
		font-size: 18px;
	}

/* End: Glyphicons */

/* Start: Buttons */

	/* Selection Button */

	.selectionButton{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		/*flex-direction: column;*/
	}

	.selectionButton:focus{
		border-bottom: 1px solid var(--focusColor1);
		outline: none;
	}

	div.selectionButton:not(:last-child){
		border-right: 4px solid var(--wwSectionContainer);
	}

	#production-panel-action-type-selector-container div.selectionButton:last-child{
		border-left: 4px solid var(--wwSectionContainer);
	}

	#upload-historical-production-btn{
		border-left: 4px solid var(--wwSectionContainer);
	}

	#edit-existing-well-production-btn{
		border-right: none;
	}

	.selectionButtonRow{
		height: 60px;
		background: var(--wwSelectionButton);
	}

	.selectionButton:hover{
		background: var(--wwSelectionButtonHover);
		cursor: pointer;
	}

	.wellTypeSelectorBtn.active .selectionButtonText
	, .productionPanelActionTypeBtn.active .selectionButtonText
	, .active .selectionButtonText{
		color: var(--darkOrange);
	}

	.selectionButtonText{
		margin-top: 5px;
		margin-left: 15px;
		font-size: 13px;
		color: var(--darkColorText);
	}

	.selectionButton.active{
		background: var(--wwSelectionButtonSelected);
	}

	/* Buttons 1 */
	.commandButtons{
		height:23px;
		min-width: 7em;
		background-image: none;
		border-color: rgb(90,90,90);
		background-color:rgb(100,100,100);
		font-size: 11px;
		padding: 2px 10px; 
		margin-right: 5px;
		margin-left: 5px;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.commandButtons .glyphicon, .commandButtons img:first-child{
		padding-right: 5px;
	}

	.commandButtons:active{
		background-color: var(--wwDarkOrange);
		border-color: rgb(248,35,1);
	}

	.commandButtons:hover, .commandButtons:active:focus, .commandButtons:focus:hover{
		background-color: var(--wwDarkOrange);
		border-color: rgb(248,35,1);
		outline: none;
	}

	.commandButtons:focus{
		background-color:rgb(100,100,100);
		outline: none;
		border: 1px solid var(--focusColor1);
		box-shadow: 0px 0px 3px var(--focusColor1);
	}

	.buttonsRow>div{
		display:flex;
		align-items: center;
		justify-content: center;
	}

	.buttonsRowMargins15{
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.buttonsRowMargins10{
		margin-top: 10px;
		margin-bottom: 10px;
	}

	/*
	.commandButtons-w-Icon{
		display: flex;
		align-items: center;
	}
	*/

	/* Buttons 2 - Linkages section */
	

	.commandButtons2{
		height:25px;
		width: 100%;
		background-image: none;
		border-color: rgb(90,90,90);
		background-color:rgb(100,100,100);
		font-size: 12px;
		padding: 2px 25px; 
		margin-right: 5px;
		margin-left: 5px;
	}

	.commandButtons2:active{
		background-color: var(--wwDarkBlue);
		border-color: rgb(5,73,141);
	}

	.commandButtons2:focus{
		border-color: rgb(90,90,90);
		background-color:rgb(100,100,100);
		outline:none;
	}

	.linkageButtonContainer .commandButtons2{
		font-size: 10px;
	}

	/* Buttons 3 - Production; Type Curve Side Panel Buttons */
	.commandButtons3{
		height:25px;
		width: 100%;
		background-image: none;
		border-color: rgb(90,90,90);
		background-color:rgb(100,100,100);
		font-size: 12px;
		padding: 2px 2px; 
		margin-bottom: 15px;
		margin-top: 5px;
	}

	.commandButtons3:active{
		background-color: var(--wwDarkBlue);
		border-color: rgb(5,73,141);
	}

	.commandButtons3:hover, .commandButtons3:active:focus, .commandButtons3:focus:hover{
		background-color: var(--wwDarkBlue);
		border-color: rgb(5,73,141);
		outline: none;
	}

	.commandButtons3:focus{
		outline: none;
		background-color:rgb(100,100,100);
		border: 1px solid var(--focusColor1);
		box-shadow: 0px 0px 3px var(--focusColor1);
	}

	.toggleButtonsContainer button{
		font-size: 11px;
		padding: 3px 5px;
		text-shadow: none;
	}

	#getStartedOptions button{
		width: 100%;
	}

	.toggleButtonsContainer button:focus
	, .toggleButtonsContainer button:active:focus
	, .toggleButtonsContainer button.active:focus
	, .toggleButtonsContainer button.active:active:focus{
		outline: none;
	}

	.toggleButtonsContainer button.btn-default.active:hover
	, .toggleButtonsContainer button.btn-default.active:focus
	, .toggleButtonsContainer button.btn-default.active:active:focus{
		background-color: green;
		color: white;
	}

	.toggleButtonsContainer button.active{
		background-color: green;
		color: white;
	}

	.toggleButtonsContainer button.active:disabled{
		background-color: green;
		color: white;
	}

	button.btn.btn-default.defaultActive.disabled.active
	, button.btn.btn-default.inactive.disabled {
		background-color: #e0e0e0;
		background-image: none;
		color: #8c8c8c;
		border-color: #ccc;
	}

	.formElementRow .toggleButtonsContainer{
		width: 100%;
	}

	/* Grouped Buttons - Dark - (Well Economics) */
	.splitButtonDropdown{
		margin-left: 5px;
		margin-right: 5px;
	}

	.splitButtonDropdownComponent{
		height:23px;
		min-width: 3em;
		background-image: none;
		border-color: rgb(90,90,90);
		background-color:rgb(100,100,100);
		font-size: 11px;
		padding: 2px 10px;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	#section-project-summary .splitButtonDropdownComponent{
		font-size: 12px;
	}

	.splitButtonDropdownComponent .glyphicon, .splitButtonDropdownComponent img:first-child{
		padding-right: 5px;
	}

	.splitButtonDropdownComponent:active{
		background-color: var(--wwDarkOrange);
		border-color: rgb(248,35,1);
	}

	.splitButtonDropdownComponent:hover, .splitButtonDropdownComponent:active:focus, .splitButtonDropdownComponent:focus:hover{
		background-color: var(--wwDarkOrange);
		border-color: rgb(248,35,1);
		outline: none;
	}

	.splitButtonDropdownComponent:focus{
		background-color:rgb(100,100,100);
		outline: none;
		border: 1px solid var(--focusColor1);
		box-shadow: 0px 0px 3px var(--focusColor1);
	}

	/* Grouped Buttons - Table Properties Row */
	.blueGroup .splitButtonDropdownComponent{
		background-color: transparent;
		border-color: var(--wwDarkBlue);
		color: var(--wwDarkBlue);
		text-shadow: none;
	}

	.blueGroup .splitButtonDropdownComponent:active{
		background-color: transparent;
		border-color: var(--wwDarkBlue);
		color: var(--wwDarkBlue);
		text-shadow: none;
	}

	.blueGroup .dropdown-toggle.splitButtonDropdownComponent:hover
	, .blueGroup .dropdown-toggle.splitButtonDropdownComponent:active:focus
	, .blueGroup .dropdown-toggle.splitButtonDropdownComponent:focus
	, .blueGroup .dropdown-toggle.splitButtonDropdownComponent:focus:hover
	, .blueGroup .splitButtonDropdownComponent:hover
	, .blueGroup .splitButtonDropdownComponent:active:focus
	, .blueGroup .splitButtonDropdownComponent:focus
	, .blueGroup .splitButtonDropdownComponent:focus:hover{
		background-color: transparent;
		border-color: var(--wwDarkBlue);
		color: var(--wwDarkBlue);
		text-shadow: none;
	}

	.table-properties-option-text{
		padding-right: 10px;
	}

	.table-properties-button-wrapper{
		border: 1px solid;
		border-radius: 4px;
		background-color: transparent;
		border-color: var(--wwDarkBlue);
		text-shadow: none;
		margin-left: 5px;
		margin-right: 5px;
		padding: 2px 10px;
		height: 23px;
		cursor: pointer;
	}

	.table-properties-button-wrapper:focus{
		outline: none;
		border: 1px solid var(--focusColor1);
		box-shadow: 0px 0px 3px var(--focusColor1);
	}

	.table-properties-button-wrapper.delete-button{
		border-color: maroon;
		color: maroon;
	}

/* End: Buttons */

/* Start: Linkages Section */
	
	#production-linkage-info-placeholder
	, #costs-linkage-info-placeholder
	, #pricing-differentials-linkage-info-placeholder{
		line-height: 25px;
	}
	
	.linkDelink{
		padding: 0px;
		display: flex;
	}

	#costsLinkageSubcontainer1 .linkDelink
	, #productionLinkageSubcontainer1 .linkDelink
	, #pricingDifferentialsLinkageSubcontainer1 .linkDelink{
		margin-left: 10px;
	}

	.linkDelinkButtons{
		height:25px;
		width: 32px;
		background-image: none;
		padding: 0px; 
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* START: Link De-linked Button */
	.linkDelinkedBtn{
		background-color: var(--wwDarkOrange);
		border-color: transparent;
	}

	.linkDelinkedBtn:disabled
	,.linkDelinkedBtn:disabled:hover{
		background-color: var(--wwLightOrange);
		border-color: transparent;
		background-image: none;
	}

	.linkDelinkedBtn:active{
		background-color: var(--wwDarkOrange);
		border-color: var(--wwDarkOrange);
	}

	.linkDelinkedBtn:hover, .linkDelinkedBtn:active:focus, .linkDelinkedBtn:focus:hover{
		background-color: var(--wwDarkOrange);
		border-color: var(--wwDarkOrange);
		outline: none;
	}

	.linkDelinkedBtn:focus{
		background-color:var(--wwDarkOrange);
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}
	/* END: Link De-linked Button */

	/* START: De-link linked Button */
	.delinkLinkedBtn{
		background-color: rgb(100,100,100);
		border-color: transparent;
	}

	.delinkLinkedBtn:disabled
	, .delinkLinkedBtn:disabled:hover{
		background-color:rgb(100,100,100);
		border-color: transparent;
		background-image: none;
	}

	.delinkLinkedBtn:active{
		background-color: rgb(100,100,100);
		border-color: rgb(100,100,100);
	}

	.delinkLinkedBtn:hover, .delinkLinkedBtn:active:focus, .delinkLinkedBtn:focus:hover{
		background-color: rgb(100,100,100);
		border-color: rgb(100,100,100);
		outline: none;
	}

	.delinkLinkedBtn:focus{
		background-color:rgb(100,100,100);
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}
	/* END: De-link linked Button */

	.linkages-well-identifier-list{
		margin-left: 25px;
		font-size: 12px;
	}

	.linkages-template-identifier-list{
		margin-left: 30px;
		font-size: 12px;
	}

	.linkageButtonContainer{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.linkages-legend{
		margin-top: 15px;
	}
	.linkagesFilterFieldRow{
		padding: 0px 15px;
	}

	#costsLinkageSubcontainer1 .commandButtons2.templateBtn
	, #costsLinkageSubcontainer1 .commandButtons2.wellBtn
	, #productionLinkageSubcontainer1 .commandButtons2.templateBtn
	, #productionLinkageSubcontainer1 .commandButtons2.wellBtn
	, #pricingDifferentialsLinkageSubcontainer1 .commandButtons2.templateBtn
	, #pricingDifferentialsLinkageSubcontainer1 .commandButtons2.wellBtn{
		width: 100%;
	}

	.linkagesFilterInputText{
		width: 100%;
		height: 30px;
		border-color: rgb(200,200,200);
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width:1px;
		font-size:12px;
		background-image: url('/static/images/icons/magnifying-glass.svg');
		background-position: 7px 6px;
		background-repeat: no-repeat;
		padding-left: 30px;
		padding-right: 30px;
	}

	#costsLinkageSubcontainer1 .linkagesFilterInputText
	, #productionLinkageSubcontainer1 .linkagesFilterInputText
	, #pricingDifferentialsLinkageSubcontainer1 .linkagesFilterInputText{
		background-color: var(--inputLightBackground);
	    border: 1px solid var(--inputBorder);
	    background-image: url(/static/images/icons/magnifying-glass.svg);
	    background-position: 7px 6px;
	    background-repeat: no-repeat;
	    padding-left: 30px;
	    padding-right: 30px;
	}
	
	.linkagesFilterInputText:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	#costsLinkageSubcontainer1 .linkagesFilterInputText:hover
	, #productionLinkageSubcontainer1 .linkagesFilterInputText:hover
	, #pricingDifferentialsLinkageSubcontainer1 .linkagesFilterInputText:hover{
		background-color: var(--inputLightBackgroundHover);
	}

	.linkagesFrameFormattingColumn{
		border-left: 20px solid rgb(230,230,230);
		/*border-right: 30px solid rgb(230,230,230);*/
		position: relative;
  		display: inline-flex;
	}

	.linkagesFilterFieldContainer{
		width: 100%;
	}

	.linkagesHeaders{
		margin-bottom: 5px;
		padding: 0px 15px;
	}

	button[name="clearText"] {
	  position: absolute;
	  top: 0;
	  right: 0;
	}

	.clearFiltersBtn
	, .clearFiltersBtn:hover{
		color: rgb(150,150,150);
		margin-right: 15px;
	    height: 25px;
	    width: 30px;
	    border-top-left-radius: 0px;
	    border-bottom-left-radius: 0px;
	    background: transparent;
    	border: transparent;
    	display: flex;
	    justify-content: center;
	    align-items: center;
	    outline: none;
	    box-shadow: none;
	}

	.clearFiltersBtn:active:focus
	, .clearFiltersBtn:focus:hover
	, .clearFiltersBtn:active:hover{
		color: rgb(150,150,150);
		background: transparent;
    	outline: none;
	}

	.clearFiltersBtn:active{
		color: rgb(150,150,150)
		background: rgb(240,240,240);
    	border: 1px solid rgb(240,240,240);
    	outline: none;
	}

	.clearFiltersBtn:focus{
		color: rgb(150,150,150);
		background: transparent;
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

/* End: Linkages Section */

/* Start: Icons */

	/* Add Template, Edit Template, Edit Well Icons */
	.iconSize1{
		height: 35px;
		padding-right: 5px;
		padding-left: 5px;
	}

	/* Circular Buttons and Bulk Expand Collapse Biggest */
	.iconSize2{
		height: 1.8em;
		padding-right: 5px;
		padding-left: 5px;
		cursor: pointer;
		padding-bottom: 1px;
	}

	/* Bulk Expand Collapse 2nd Biggest */
	.iconSize3{
		height: 24px;
		padding-right: 5px;
		padding-left: 5px;
		cursor: pointer;
	}

	/* Bulk Expand Collapse 3rd Biggest */
	.iconSize4{
		height: 23px;
		padding-right: 5px;
		padding-left: 5px;
		cursor: pointer;
	}

	/* Misc - Excel icons, Bulk Expand Collapse Smallest */
	.iconSize5{
		height: 22px;
		padding-right: 5px;
		padding-left: 5px;
		cursor: pointer;
	}

	/* Bottom navbar icon for WW Dark Blue bulk expand/collapse */
	.iconSize6{
		height: 25px;
		padding-right: 5px;
		padding-left: 5px;
		cursor: pointer;
	}

	.iconSize7{
		height: 20px;
		padding-right: 5px;
		padding-left: 5px;
		cursor: pointer;
	}

	.validateFormBtn{
		height: 40px;
		width: 50px;
		background-color: rgba(50,50,50,0.8);
		border: transparent;
		border-top-left-radius: 2px;
		border-bottom-left-radius: 	2px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: right;
		position: fixed;
		left: calc(100vw - 50px);
		top: calc(40px + (100vh - 40px - 40px)/2 - 15px);
		cursor: pointer;
		z-index: 3;
	}

	.validateFormBtn:hover{
		background-color: rgba(50,50,50,1);
	}

	.validateIcon{
		height: 30px;
		margin-right: 10px;
	}

/* End: Icons */

/* Start: Table Formats */

	/* Sticky */
	/* switch the table off collapsed borders */
	.tableContainer table.sticky {
		border-collapse: separate;
		border-spacing: 0;
	}

	/* header cells: solid bg + border drawn as box-shadow (travels with the sticky cell) */
	.tableContainer table.sticky tr th {
		padding: 4px 8px;
		border: none;                       /* remove the collapsed border */
		box-shadow: inset 0 0 0 1px white;  /* fake the 1px white border */
		position: sticky;
	}

   	.itemsSelected{
		padding-right: 5px; /*Added by Vinay on 6/13/2019*/
	}

	.tableContainer, .returnMetricsContainer {
	    overflow-x: auto;
	    overflow-y: auto;
	    max-height: calc(100vh - 275px);
	    max-width: 88vw;
	    min-width: 100%;
       	border: 0.05em solid var(--lightInLightDarkInDark);
       	outline: none;
	}

	.tableContainerFilterRow{
		background: rgb(210,210,210);
	}

	.dropdownTableFormat{
		color: var(--darkInLightLightInDark);
	}

	.tableContainerFilterRow .tableContainerDynamicFilter{
		background-image: url(/static/images/icons/magnifying-glass.svg);
	    background-position: 5px 2px;
	    background-repeat: no-repeat;
	    padding-left: 25px;
	}

	/* Hedges Page */
	.tableProperties{
		width: 30px;
		display: flex;
		align-items: center;
	}
	
	.tableContainer table tr th.checkboxColumnWidth
	, .tableContainer table tr td.checkboxColumnWidth {
		min-width: 50px;
		width: 50px;
		text-align: center;
	}

.tableContainer2{
	    overflow-x: auto;
	    overflow-y: auto;
	}

.tableContainer2::-webkit-scrollbar{
    height: 4px;
    background-color: rgb(220,220,220);
}

/* Horizontal scroll wrapper for .row content inside a Bootstrap col. The -15px margin / +15px padding pair cancels the col's 15px padding,
   so the wrapper spans the full column width and the inner rows' own -15px margins fit inside the scroll area (no permanent scrollbar).
   Use it for non-table content that should x-scroll on narrow screens: unlike .tableContainer it carries no border / max-height / max-width.
   Do not use it outside a col (the negative margins would overflow). */
.colScrollContainer{
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;
	overflow-x: auto;
}

/* No ::-webkit-scrollbar override: the thin 4px bar (the .tableContainer2 look) read as a defect on form sections - keep the browser's native scrollbar */
	
	/* Table Format 1 */
	.tableFormat{
		font-size: 10px;
		width: 100%;
		background-color: transparent;
		border-color: white;
	}

	.tableFormat td{
		height: 30px;
		border: 1px solid white;
		text-align: center;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		white-space: nowrap;
	}

	.tableFormat.sticky{
		border-collapse: separate;
	}

	.tableFormat.sticky th, .tableFormat.sticky td{
		border: none;
	}

	.tableFormat th{
		border: 1px solid white;
		text-align: center;
		padding-right: 8px;
		padding-left: 8px;
		background-color: rgb(210,210,210);
		padding-top: 4px;
		padding-bottom: 4px;
		min-width: 30px;

		position: sticky;
		border-collapse: collapse;
		white-space: nowrap;

		top: 0px;
		z-index: 2;
	}

	.tableFormat.sticky tr td, .tableFormat.sticky tr th{
	    border-bottom: 1px solid white;
	    border-right: 1px solid white;		
	}

	.tableFormat th:after{
	    content:'';
	    position:absolute;
	    left: 0;
	    bottom: 0px;
	    width:100%;
	    /*border-bottom: 1px solid rgb(180,180,180);*/
	}

	.tableFormat tr.selected, .tableFormat tr.selected td
	, .tableFormat8 tr.selected, .tableFormat8 tr.selected td{
		background: var(--selectedRowBg);
	}

	tr.costTemplateSummaryRow, tr.wellCostsSummaryRow
	, tr.pricingStreamSummaryRow, tr.pricingTemplateSummaryRow
	, tr.pricingDifferentialsTemplateSummaryRow, tr.wellPricingDifferentialsSummaryRow
	, tr.parentDerivativeRow
	, tr.corporateItemsSummaryRow, tr.investmentsSummaryRow, tr.financialStatementsSummaryParentRow{
		border-top: 2px solid rgb(180,180,180);
		/*background-color: rgb(250,250,250);*/
		background-color: rgb(220,220,220);
		/*font-weight: bold;*/
	}

	tr.costBucketRow, tr.pricingStreamSummaryProductRow
	, tr.pricingDifferentialsTemplateSummaryBucketRow, tr.wellPricingDifferentialsBucketRow
	, tr.hedgingContractRow
	, tr.corporateItemsSummaryInputRow, tr.investmentsSummaryInputRow, tr.financialStatementsSummaryChildRow
	{
		/*background-color: rgb(220,220,220);*/
		background-color: rgb(230,230,230);
	}

	tr.streamSegmentSummaryRow{
		/*background-color: rgb(230,230,230);*/
		background-color: rgb(230,230,230);
	}

	.tableformat-values-row>td:first-child{
		background-color: rgb(210,210,210);
		font-weight: bold;
		width: 175px;
	}

	/* Table Format 2 - Modal Windows */
	.tableFormat2{
		font-size: 12px;
		width: 100%;
		background-color: transparent;
		border-color: white;
	}

	.tableFormat2 td{
		border: 1px solid transparent;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		min-width: 20px;
		column-width: auto;
	}

	.tableFormat2 th{
		border: 1px solid white;
		background-color: rgb(210,210,210);
		text-align: left;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-right: 8px;
		padding-left: 8px;
		min-width: 20px;
		column-width: auto;

		position: sticky;
		border-collapse: collapse;
		/*white-space: nowrap;*/

		top: 0px;
		z-index: 2;
	}

	.tableFormat2.sticky{
		border-collapse: separate;
	}

	.tableFormat2.sticky tr td, .tableFormat2.sticky tr th{
		border-bottom: 1px solid white;
    	border-right: 1px solid white;
	}

	/* Table Format 3: EUR table in the production page; */
	.tableFormat3{
		font-size: 11px;
		width: 100%;
		background-color: transparent;
		border-color: white;
		color: black;
		font-weight: normal;
	}

	.tableFormat3 td{
		border: 1px solid white;
		text-align: left;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
	}

	.tableFormat3 th{
		border: 1px solid white;
		background-color: rgb(190,190,190);
		text-align: center;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-right: 8px;
		padding-left: 8px;
		min-width: 60px;
	}

	/* Table Format 4 is already taken by color palette */

	/* Table Format 5 - Financial Statements */
	.tableFormat5{
		font-size: 10px;
		width: 100%;
		background-color: transparent;
		border-color: white;
	}	

	.tableContainer .tableFormat5 td{
		border: 1px solid white;
		text-align: right;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		position: relative;
	}

	.tableFormat5 th{
		border: 1px solid white;
		text-align: right;	
		padding-right: 8px;
		padding-left: 8px;
		background-color: rgb(200,200,200);
		padding-top: 4px;
		padding-bottom: 4px;
/*    		min-width: 100px; */

	/* for sticky */
		position: sticky;
		border-collapse: collapse;
		white-space: nowrap;

		top: 0px;
		z-index: 2;
	}

	.tableFormat5 th:after{
	    content:'';
	    position:absolute;
	    left: 0;
	    bottom: 0px;
	    width:100%;
	    /*border-bottom: 1px solid rgb(180,180,180);*/
	}

	/* Right triangle top right for comment */
	.comment:after{
		content: "";
	    position: absolute;
	    /* left: calc(100% - 0.5em); */
	    /* use right: 0; instead */
	    right: 0;
	    top: 0;
	    border-left: 0.5em solid transparent;
	    border-top: 0.5em solid red;
	}	

	.tableContainer td.statementsItems1{
		text-align: left;
		min-width: 200px;
	}

	.tableContainer td.statementsItems2{
		padding-left: 15px;
		text-align: left;
		min-width: 200px;
	}

	.tableContainer td.statementsItems3{
		padding-left: 30px;
		text-align: left;
		min-width: 200px;
	}

	.tableContainer td.statementsItems4{
		padding-left: 45px;
		text-align: left;
		min-width: 200px;
	}	

	.tableContainer td.statementsItems5{
		padding-left: 60px;
		text-align: left;
		min-width: 200px;
	}

	.tableContainer td.groupingColumn{
		text-align: center;
		color: var(--wwDarkBlue);
		font-weight: bold;
	}

	.tableContainer .statementsItalic>td{
		text-align: left;
		font-style: italic;
		padding-left: 30px;
	}

	.tableContainer .statementsHeaders2, .statementsHeaders2{
		font-weight: bold;
		background-color: rgb(210,210,210);
	}	

	.statementsSum1>td{
/*			padding-left: 15px;
*/			border-top-style: solid;
		border-top-color: rgb(175,175,175);
		border-top-width: thick;
	}

	.statementsHeadersBold{
		font-weight: bold;
	}

	.statementsHeadersGrey{
		background: rgb(220,220,220);
	}

	.rowHeader1{
		color: black;
		font-size: 11px;
		font-weight: bold;
		height: 25px;
		text-transform: uppercase;
	}

	.spacingRow2{
		height: 15px;
	}

	.rowHeader2{
		color: var(--wwDarkBlue);
		/*background: rgb(225,225,225);*/
		font-size: 11px;
		font-weight: bold;
		height: 25px;
	}

	/*.tableContainer .tableFormat5 .rowHeader1>td:not(:first-child), .tableContainer .tableFormat5 .rowHeader2>td:not(:first-child){
		border-left: none;
	}*/

	/*.tableContainer .tableFormat5 .rowHeader1>td:not(:last-child):not(:first-child), .tableContainer .tableFormat5 .rowHeader2>td:not(:last-child):not(:first-child){
		border-right: none;
	}*/

	/* Keep left border for the first 2 columns only */
	.tableContainer .tableFormat5 .rowHeader1>td:not(:nth-child(1)):not(:nth-child(2))
	, .tableContainer .tableFormat5 .rowHeader2>td:not(:nth-child(1)):not(:nth-child(2)){
		border-left: none;
	}

	/* Keep the right border of the first 2 columns, and the last column, only */
	.tableContainer .tableFormat5 .rowHeader1>td:not(:last-child):not(:nth-child(1)):not(:nth-child(2))
	, .tableContainer .tableFormat5 .rowHeader2>td:not(:last-child):not(:nth-child(1)):not(:nth-child(2)){
		border-right: none;
	}

	/* Keep the left border of the first column only */
	.tableContainer .tableFormat5 .spacingRow2>td:not(:nth-child(1)){
		border-left: none;
	}

	/* Keep the right border of the last column only */
	.tableContainer .tableFormat5 .spacingRow2>td:not(:last-child){
		border-right: none;
	}

	/* Table Format 6 - Financial Statements PV and IRR (small tables)*/
	.tableFormat6{
		font-size: 10px;
		width: 100%;
		background-color: transparent;
		border-color: white;
	}

	.tableFormat6 td, .tableFormat6 th{
		border: 1px solid white;
		text-align: left;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		white-space: nowrap;
		column-width: 150px;
	}

	.tableFormat6 th{
		background-color: rgb(210,210,210);
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* Table format is already taken by WI Investment */

	/* Table Format 8 - Project Builder Page*/
	.tableFormat8{
		font-size: 11px;
		width: 99.97%;
		background-color: transparent;
		border-color: white;
		padding-left: 10px;
	}

	.tableFormat8 td{
		border: 1px solid transparent;
    	border-bottom: 1px solid var(--lightInLightDarkInDark);
		text-align: left;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		white-space: nowrap;
		height: 30px;
		font-size: 10px;
	}

	.tableContainer .tableFormat8 th{
		border-bottom: 1px solid white;
		padding-right: 8px;
		padding-left: 8px;
		background-color: rgb(210,210,210);
		min-width: 20px;
		height: 50px;
		font-size: 12px;
		text-align: left;

		position: sticky;
		border-collapse: collapse;
		white-space: nowrap;
		top: 0px;
		z-index: 2;
	}

	.tableContainer .tableFormat8 th:after{
	    content:'';
	    position:absolute;
	    left: 0;
	    bottom: 0px;
	    width:100%;
	    /*border-bottom: 1px solid rgb(180,180,180);*/
	}

	/* Table Format 9 - Data mapping */
	.tableFormat9{
		font-size: 12px;
		width: 100%;
		background-color: transparent;
		border-color: white;
	}

	.tableFormat9 td{
		border: 1px solid white;
		min-width: 20px;
		column-width: auto;
		padding: 5px 2px;
		text-align: center;
		height: 35px;
	}

	.tableFormat9 th{
		border: 1px solid white;
		background-color: rgb(225,225,225);
		text-align: center;
		padding: 10px;
		min-width: 20px;
		column-width: auto;

		position: sticky;
		border-collapse: collapse;
		z-index: 3; /* Needed 3 instead of 2 because the buttons in the production table were superimposing */
	}

	.tableFormat9 th.firstRow
	, .tableFormat9 th.firstAndSecondRow{
		top: 0px;
	}

	.tableFormat9 th.secondRow{
		top: 41px;
	}

	.tableFormat9 th.firstAndSecondRow{
		height: 80px;
	}

	.tableFormat9 th.firstRow
	, .tableFormat9 th.secondRow{
		height: 40px;
	}

	.tableFormat9.sticky{
		border-collapse: separate;
	}

	.tableFormat9.sticky tr td, .tableFormat9.sticky tr th{
		border-bottom: 1px solid white;
    	border-right: 1px solid white;
	}

	/* Table align right */
	td.rightAlign{
		text-align: right;
	}

	.rightAlign{
		text-align: right;
	}

	td.centerAlign{
		text-align: center;
	}

	/* Table Format 10 - Corporate item options */
	.tableFormat10{
		font-size: 12px;
    	font-weight: normal;
		width: 100%;
		background-color: transparent;
		border-color: transparent;
	}

	.tableFormat10 td{
		height: 25px;
		border: none;
		text-align: center;
		padding-right: 8px;
		padding-left: 8px;
		padding-top: 2px;
		padding-bottom: 2px;
		white-space: nowrap;
	}

	.tableFormat10 th{
		font-size: 12px;
    	font-weight: normal;
		border: none;
		text-align: center;
		padding-right: 8px;
		padding-left: 8px;
		background-color: transparent;
		padding-top: 4px;
		padding-bottom: 4px;
		min-width: 30px;
	}

	/* Starting to unify table formatting */
	/* START: tableFormat11 */
	.tableFormat11{
		font-size: 11px;
		width: 100%;
		background-color: transparent;
		border-color: white;
		color: black;
		font-weight: normal;
	}

	.tableFormat11 td{
		padding: 10px 15px;
	}

	.tableFormat11 th{
		height: 30px;
		min-height: 30px;
		min-width: 60px;
		padding: 8px;
		background-color: rgb(190,190,190);
		
		position: sticky;
		border-collapse: collapse;
		top: 0px;
		z-index: 2;
	}

	.tableFormat11 td, .tableFormat11 th{
		border: 1px solid white;
		border-bottom: 1px solid white;
	    border-right: 1px solid white;
	    text-align: center;
	}

	.tableFormat11.sticky{
		border-collapse: separate;
	}

	.tableFormat11.sticky tr td, .tableFormat11 tr th{
		border-bottom: 1px solid white;
		border-right: 1px solid white;
	}
	/* END: tableFormat11 */

/* End: Table Formats */

/* Start: Table Properties Rows - Blue rows with selection, edit and delete properties etc */
	
	.tablePropertiesRow{
		background-color: var(--tablePropertiesBg);
		margin: 0px 0px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		height: 25px;
		display: flex;
		align-items: center;
		padding-left: 20px;
		margin-top: 5px;
		color: var(--wwDarkBlue);
		font-size: 12px;
	}

	.tablePropertiesRow2:first-child{
		padding-right: 0px;
	}

	.tablePropertiesRow2:nth-child(2){
		padding-left: 0px;
	}

	.leftTableProperties, .rightTableProperties{
		display: flex;
		align-items: center;
		height: 25px;
		color: var(--wwDarkBlue);
		font-size: 12px;
	}

	.tablePropertiesRow3{
		height: 25px;
		margin-top: 8px;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		color: var(--wwDarkBlue);
	}

	/* For col-sm-6 right side */
	.tablePropertiesRowRight{
		background-color: var(--tablePropertiesBg);
		margin: 0px 0px;
		border-top-right-radius: 3px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 20px;
		margin-top: 5px;
		color: var(--wwDarkBlue);
		font-size: 12px;
	}

	/* For col-sm-6 left side */
	.tablePropertiesRowLeft{
		background-color: var(--tablePropertiesBg);
		margin: 0px 0px;
		border-top-left-radius: 3px;
		height: 35px;
		display: flex;
		align-items: center;
		padding-left: 20px;
		margin-top: 5px;
		color: var(--wwDarkBlue);
		font-size: 12px;
	}

/* End: Table Properties Rows - Blue rows with selection, edit and delete properties etc */

/*Start: Filtering and Grouping */

	.filterContainerProjectStructure .filteringGroupingContainer1{
		margin-top: 0px;
	}

	/* Well Info page: the 5px margin-top below is intentionally REMOVED —
	   the filter row sits flush under the page header. The pinned
	   #wellInfoDataTableContainer offset is adjusted to match (193px ->
	   188px, see the Well Info Panel section below). If this removal is
	   extended to the other pages (ownership, well sets), delete the base
	   .filteringGroupingContainer1 margin-top rule a few lines down and
	   keep these per-page overrides — every pinned offset that bakes in
	   the 5px then drops by 5px. */
	#wellInfoPanel .filteringGroupingContainer1{
		margin-top: 0px;
	}

	/* Production page: same removal as Well Info — the filter row sits
	   flush under the page header. No pinned table offsets exist on this
	   page (its tables use the shared base .tableContainer rule), so no
	   offset adjustment is needed. */
	#productionPanel .filteringGroupingContainer1{
		margin-top: 0px;
	}

	/* Costs page: same removal as Well Info / Production. No pinned table
	   offsets exist on this page (its tables use the shared base
	   .tableContainer rule), so no offset adjustment is needed. */
	#costsPanel .filteringGroupingContainer1{
		margin-top: 0px;
	}

	/* Pricing page: same removal as Well Info / Production / Costs. No
	   pinned table offsets exist on this page (its tables use the shared
	   base .tableContainer rule), so no offset adjustment is needed. */
	#pricingPanel .filteringGroupingContainer1{
		margin-top: 0px;
	}

	.filterContainerProjectStructure .formElementRow5{
		padding-top: 6px;
		padding-bottom: 0px;
		padding-left: 20px;
	}

	.filteringGroupingContainer1{
		margin-top: 5px;
	}

	.filteringGroupingContainer2{
		margin: 0px 0px 10px 0px;
	}

	.filterInfoContainer, .groupingInfoContainer{
		background: var(--filteringGroupingPanelColor);
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
		color: var(--filteringGroupingPanelColor);
		font-size: 12px;
		padding: 5px;
		margin-bottom: 0px;
		display: flex;
    	align-items: center;
    	height: 40px;
	}

	.selectionInfoContainer{
		height: 35px;
		background: rgb(125,125,125);
		border-radius: 3px;
		color: var(--filteringGroupingPanelColor);
		font-size: 12px;
		padding: 5px;
		display: flex;
    	align-items: center;
    	justify-content: flex-end;
    	width: -webkit-fill-available;
	}

	.toggleContainer{
		height: 35px;
		width: fit-content;
		background: rgb(125,125,125);
		border-radius: 3px;
		font-size: 12px;
		padding: 5px;
		display: flex;
    	align-items: center;
    	margin-left: 15px;
	}

	.propertiesContainerWellEconomics{
		height: 35px;
		width: fit-content;
		background: rgb(125,125,125);
		border-radius: 3px;
		font-size: 12px;
		padding: 5px;
		margin-left: 15px;
		display: flex;
    	align-items: center;
    	justify-content: flex-end;
	}


	#declineAnalysisInfoContainer > div{
		display: flex;
		align-items: center;
		border: 3px solid var(--filteringGroupingPanelColor);
		background-color: rgb(225,225,225);
		border-radius: 6px;
		height: 30px;
		overflow: hidden;
	}

	.filteredWellsCount, .filterAttributesCount, .filterAttributes
	, .groupsCount, .groupingAttributesCount, .groupingAttributes
	, .selectionArrows, .selectionCount{
		display: flex;
		align-items: center;
		border: 3px solid var(--filteringGroupingPanelColor);
		background-color: rgb(225,225,225);
		border-radius: 6px;
		height: 30px;
		overflow: hidden;
	}

	.filteredWellsCount, .filterAttributesCount
	, .groupsCount, .groupingAttributesCount{
		width: 125px;
		min-width: 125px;
	    padding: 0px 10px;
	}

	.filterInfoContainer .filterAttributes
	, .groupingInfoContainer .groupingAttributes {
		flex-wrap: wrap;
		overflow-y: auto;
		width: 100%;
		padding: 0px 10px;
	}

	.filterGroupText{
		font-size: 14px;
		color: white;
		padding-left: 7px;
		font-weight: bold;
		width: 75px;
   		min-width: 75px;
	}

	.selectionTextFG1{
		width: 80px;
   		min-width: 80px;
	}

	.selectionArrows {
		display: flex;
	    align-items: center;
	    border: 3px solid rgb(125,125,125);
	    justify-content: center;
	    width: 100px;
		min-width: 100px;
	    padding: 0px 10px;
	}

	.selectionCount{
		border: 3px solid rgb(125,125,125);
		width: 175px;
		min-width: 175px;
	    padding: 0px 10px;
	}

	.selectionDropdown{
		display: flex;
	    align-items: center;
	    border: 3px solid rgb(125,125,125);
	    background-color: rgb(225,225,225);
	    border-radius: 6px;
	    height: 30px;
	    overflow: hidden;
	    padding: 0px 10px;
	    width: 100%;
	}

	.selectionVizDataPanel, .dataPropertiesIconContainer{
		display: flex;
		align-items: center;
		justify-content: center;
		border: 3px solid rgb(125,125,125);
    	background-color: rgb(225,225,225);
    	border-radius: 6px;
	    height: 30px;
	    overflow: hidden;
	}

	.selectionVizDataPanel{
		width: 100px;
		min-width: 100px;
	}

	.dataPropertiesIconContainer{
		width: 75px;
		min-width: 75px;
	}

	/*
	.dataProperties{
		display: flex;
	    align-items: center;
	    justify-content: flex-end;
	    border: 3px solid rgb(125,125,125);
	    background-color: rgb(225,225,225);
	    border-radius: 6px;
	    height: 30px;
	    overflow: hidden;
	    padding: 0px 10px;
	    width: inherit;
	}
	*/

	.toggleText{
		font-size: 12px;
		color: white;
		padding-left: 7px;
		font-weight: bold;
		width: 95px;
   		min-width: 95px;
	}

	.columnsText{
		font-size: 12px;
		color: white;
		padding-left: 7px;
		font-weight: bold;
		width: 75px;
		min-width: 75px;
	}

	.filterCollapseControl, .groupingCollapseControl{
		color: var(--filteringGroupingPanelColor);
		font-size: 15px;
		cursor: pointer;			
	}

	.filterIcon{
		height: 20px;
		padding-left: 8px;
		padding-right: 5px;
		cursor: pointer;
	}

/*End: Filtering and Grouping */

/* Start: Period Element Row and Offset Element Row*/

	.periodElementRow input[type="text"], .periodElementRow input[type="number"], .periodElementRow select
	, .offsetElementRow input[type="text"], .offsetElementRow input[type="number"], .offsetElementRow select{
		/*margin-left: 10px;*/
		margin-right: 10px;
		width: 15%;
	}

	.periodElementRow input[type="text"]:disabled
	, .periodElementRow input[type="number"]:disabled
	, .offsetElementRow input[type="text"]:disabled
	, .offsetElementRow input[type="number"]:disabled	
	, .tierRow input[type="text"]:disabled
	, .tierRow input[type="number"]:disabled{
		color: grey;
		background: #e1e1e1;
	}

	.periodElementRow input[type="checkbox"], .period-element-row input[type="checkbox"], .psc-dmo-volume-row input[type="checkbox"], .offsetElementRow input[type="checkbox"], .borrowingBaseCashFlowSuppressionElement input[type="checkbox"]{
		width: auto;
		margin-left: 2px;
		margin-right: 2px;
		margin-top: 0px;
	}

	.periodElementRow, .offsetElementRow{
		margin-top: 5px;
	}

	.periodElementRow .EELText1
	, .periodElementRow .EELText2
	, .periodElementRow .P-AND-A-Text1
	, .periodElementRow .P-AND-A-Text2
	, .periodElementRow .EOLText2
	, .periodElementRow .maturityText2
	, .revolverSubOptionElement .EOCText1
	, .revolverSubOptionElement .EOCText2{
		font-size: 12px;
	}

	.periodElementRow .EELText2
	, .periodElementRow .P-AND-A-Text2
	, .periodElementRow .EOLText2
	, .periodElementRow .maturityText2
	, .revolverSubOptionElement .EOCText2{
		margin-right: 10px;
	}

	.periodElementRow .valueSpan{
		margin-left: 10px;
		margin-right: 10px;
	}

	.periodElementRow .addTimePeriodElement, .periodElementRow .removeTimePeriodElement
	, .offsetElementRow .addOffsetElement, .offsetElementRow .removeOffsetElement{
		cursor: pointer;
	}

	.periodElementRow .EELText1.disabled
	, .periodElementRow .EELText2.disabled
	, .periodElementRow .P-AND-A-Text1.disabled
	, .periodElementRow .P-AND-A-Text2.disabled
	, .periodElementRow .maturityText1.disabled
	, .periodElementRow .maturityText2.disabled
	, .periodElementRow .EOLText1.disabled
	, .periodElementRow .EOLText2.disabled
	, .periodElementRow .toSpan.disabled
	, .revolverSubOptionElement .EOCText1.disabled
	, .revolverSubOptionElement .toSpan.disabled
	, .revolverSubOptionElement .EOCText2.disabled
	{
		color: #afafaf;
	}


	.checkboxContainer{
		display: flex;
		align-items: center;
	}

	/* To make the input fields inside the fixed width input groups take up the whole space.
	   The fixed width containers are added so we can include headers above these period element rows
	Used in:
		Equity Investment: Tranches
	*/
	div.ww-input-group.fixed-width.stream-segment-element-fixed-width-currency-value input[type="text"]{
		width: -webkit-fill-available;
	}

	.segmentHeaderRow{
		margin-top: 10px;
	}

	.segmentHeaderRow .labelProperties{
		font-weight: bold;
	}
/*End: Period Element Row*/

/* Start: Legend Formatting */

	.row.wellContent .legendIcon, .row.wellContent .legendIcon2, .row.wellContent .legendIcon3{
		margin-right: 2px;
		display: inline-block;
	}

	.legendHeader{
		font-size: 13px;
		font-weight: bold;
	    color: white;
	    background: grey;
	    height: 30px;
	    display: flex;
	    align-items: center;
	    margin: 0px;
	}

	#project-builder-legend .legendHeader{
		cursor: pointer;
	}

	.legendContent{
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.legendItem, .legendItem2, .legendItem3, .legendItem4{
		display: inline-flex;
		align-items: center;
		padding: 5px;
		width: 49%;
	}

	.legendItem{
		width: 33%;
	}

	.legendItem2{
		width: 48%
	}

	.legendItem3{
		width: 80%;
	}

	.legendItem .legendIcon
	, .legendItem .legendIcon2
	, .legendItem .legendIcon3
	, .legendItem2 .legendIcon
	, .legendItem2 .legendIcon2
	, .legendItem2 .legendIcon3
	, .legendItem3 .legendIcon
	, .legendItem3 .legendIcon2
	, .legendItem3 .legendIcon3{
		margin-right: 15px;
	}

	.legendIcon{
		border-radius: 10px;
	    width: 17px;
	    height: 17px;
	    background: #777777;
	    border: 0px solid #000;			
	    text-align: center;
	    margin-right: 5px;
	    vertical-align: middle;
	    color: #FFFFFF;	
	    display: inline-block;		
	    font-size: 10px;
	    font-weight: bold;
	}

	.legendIcon2{
		border-top-right-radius: 10px;
	    width: 17px;
	    height: 15px;
	    background: #777777;
	    border: 0px solid #000;			
	    text-align: center;
	    margin-right: 5px;
	    vertical-align: middle;
	    color: #FFFFFF;	
	    display: inline-block;		
	    font-size: 10px;
	    font-weight: bold;
	}

	.legendIcon3{
		border-radius: 10%;
	    min-width: 17px;
	    height: 15px;
	    background: #777777;
	    border: 0px solid #000;			
	    text-align: center;
	    margin-right: 5px;
	    vertical-align: middle;
	    color: #FFFFFF;	
	    display: inline-block;		
	    font-size: 10px;
	    font-weight: bold;
	}

	.legendIcon4{
		border-bottom-left-radius: 10px;
	    min-width: 17px;
	    height: 15px;
	    background: #777777;
	    border: 0px solid #000;			
	    text-align: center;
	    margin-right: 5px;
	    vertical-align: middle;
	    color: #FFFFFF;	
	    display: inline-block;		
	    font-size: 10px;
	    font-weight: bold;
	}

	.legendIcon.overlap
	, .legendIcon2.overlap
	, .legendIcon3.overlap
	, .legendIcon4.overlap{
		outline: 2px outset #b70707;
	}

	.legendIcon.oil, .legendIcon2.oil, .legendIcon3.oil{
		background: #5fa713;
	}

	.legendIcon.gas, .legendIcon2.gas, .legendIcon3.gas, .legendIcon4.gas{
		background: red;
	}

	.legendIcon.ngl, .legendIcon2.ngl, .legendIcon3.ngl{
		/*background: #004eff;
		*/
		background:black;
	}

	.legendIcon.water, .legendIcon2.water, .legendIcon3.water{
		background: #5bc0de;
	}

	.legendIcon.wet_gas, .legendIcon2.wet_gas, .legendIcon3.wet_gas, .legendIcon4.wet_gas{
		background: darkorange;
	}

	.legendIcon.total_mcfe, .legendIcon2.total_mcfe, .legendIcon3.total_mcfe{
		background: rgb(128,0,0);
	}

	.legendIcon.total_boe, .legendIcon2.total_boe, .legendIcon3.total_boe{
		background: rgb(0,100,0);
	}

	.legendIcon.grey, .legendIcon2.grey, .legendIcon3.grey, .legendIcon4.grey{
		background: grey;
	}

	.legendIcon3.wellSet.present{
		background: grey;
	}

	.legendIcon3.wellSet.missing{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
	}

	.legendIcon3.notInWellSet{
		color: transparent;
		background: transparent;
	}

	.legendIcon3.ownershipProfileIcon.present{
		background: grey;
	}

	.legendIcon3.ownershipProfileIcon.missing{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
	}

	.legendIcon3.ownershipProfileIcon.suppressed{
		background: repeating-linear-gradient(45deg, grey, transparent 14%);
		color: black;
		font-weight: 900;
	}

	/* PSC Profile Icons: the Input Summary PSC column mirrors the Ownership column's present/missing styling (no suppressed state exists for PSC profiles) */
	.legendIcon3.pscProfileIcon.present{
		background: grey;
	}

	.legendIcon3.pscProfileIcon.missing{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
	}

	.legendIcon.missing.oil, .legendIcon2.missing.oil, .legendIcon3.missing.oil{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
		/*border: 1px solid #5fa713;*/
	}

	.legendIcon.missing.gas, .legendIcon2.missing.gas, .legendIcon3.missing.gas, .legendIcon4.missing.gas{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
	}

	.legendIcon.missing.wet_gas, .legendIcon2.missing.wet_gas, .legendIcon3.missing.wet_gas, .legendIcon4.missing.wet_gas{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
		/*border: 1px solid red;*/
	}

	.legendIcon.missing.ngl, .legendIcon2.missing.ngl, .legendIcon3.missing.ngl{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230)
		/*border: 1px solid black;*/
	}

	.legendIcon.missing.water, .legendIcon2.missing.water, .legendIcon3.missing.water{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230)
		/*border: 1px solid black;*/
	}

	.legendIcon.missing.total, .legendIcon2.missing.total, .legendIcon3.missing.total{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230)
		/*border: 1px solid black;*/
	}

	.legendIcon.missing.total_boe, .legendIcon2.missing.total_boe, .legendIcon3.missing.total_boe{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230)
		/*border: 1px solid black;*/
	}

	.legendIcon.missing.total_mcfe, .legendIcon2.missing.total_mcfe, .legendIcon3.missing.total_mcfe{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230)
		/*border: 1px solid black;*/
	}

	.legendIcon.missing.grey, .legendIcon2.missing.grey, .legendIcon3.missing.grey, .legendIcon4.missing.grey{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
	}

	.legendIcon3.no-basis, .legendIcon2.production-based, .legendIcon4.energy-content-based, .legendIcon.revenue-based{
		background-color: transparent;
		border: solid 2px grey;
	}

	.legendIcon3.darkGrey{
		background: rgb(100,100,100);
	}

	.legendIcon3.darkBlue{
		background: var(--wwDarkBlue);
	}

	.legendIcon3.lightBlue{
		background: rgb(0,148,222);
	}

	.legendIcon3.lightOrange{
		background: var(--wwDarkOrange);
	}

	.legendIcon3.black{
		background: rgb(0,0,0);
	}

	.legendIcon3.green{
		background: rgb(21,128,21);
	}

	.legendIcon3.developmentPlanIcon.developed{
		background: #8ab8e6; /*light blue*/
		/*background: grey;*/
	}

	.legendIcon3.developmentPlanIcon.missing{
		background: transparent;
		color: transparent;
		border: transparent;
	}

	.legendIcon3.developmentPlanIcon.incomplete{
		background: #fea395; /*pink*/
	}

	.legendIcon3.developmentPlanIcon.complete{
		background: var(--wwDarkBlue);
	}

	.legendIcon3.developmentPlanIcon.complete.saleDateBeforePSD{
		background: repeating-linear-gradient(45deg, var(--wwDarkBlue), transparent 1px);
	}

	.legendIcon3.PNAScheduleIcon.missing{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230)
	}

	.legendIcon3.PNAScheduleIcon.suppressed{
		background: repeating-linear-gradient(45deg, grey, transparent 14%);
	}

	.legendLabel{
		display: inline-block;
		font-size: 11px;
	}

	.legendItem > .glyphicon{
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	/* Production, Costs, Pricing Pages */
	.legendContainer2{
		border: 1px solid grey;
		padding: 0px 15px;
	    border-radius: 3px;
	}

	.legendContainerPB .glyphicon-download, .legendContainerPB .glyphicon-upload, .legendContainerPB .glyphicon-tags
	, .legendContainer2 .glyphicon-download, .legendContainer2 .glyphicon-upload, .legendContainer2 .glyphicon-tags {
		font-size: 16px;
	}

	.legendSubHeader2{
		font-weight: bold;
		font-size: 13px;
		border-bottom: 0.5px solid rgb(185,185,185);
	}

	.legendSubHeader3{
		font-weight: bold;
		font-size: 11px;
		padding-top: 5px;
	}

	#allLegendItemsModal{
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.4);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    z-index: 10000;
	}

	#allLegendItemsModal .modalDialog {
	    background: #fff;
	    border-radius: 4px;
	    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
	    max-height: 80vh;
	    max-width: 80vw;
	    min-width: 220px;
	    display: flex;
	    flex-direction: column;
	    font-family: sans-serif;
	}

	#allLegendItemsModal .modalHeader {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    padding: 10px 14px;
	    border-bottom: 1px solid #ddd;
	    font-weight: bold;
	    cursor: move;
	    user-select: none;
	}

	#allLegendItemsModal .modalCloseButton {
	    border: none;
	    background: none;
	    font-size: 16px;
	    line-height: 1;
	    cursor: pointer;
	    padding: 2px 6px;
	    color: #636363;
	}

	#allLegendItemsModal .modalBody{
	    padding: 12px 14px;
	    overflow-y: auto;
	}

	#allLegendItemsModal .modalLegendItem {
	    display: flex;
	    align-items: center;
	    margin-bottom: 6px;
	}

	#allLegendItemsModal .modalLegendItem svg {
	    flex: 0 0 auto;
	    margin-right: 8px;
	}

	@media(min-width: 1200px){
		.legendContainerPB,.legendContainer2{
			min-width:750px;
		}

	}

	@media(min-width: 1400px){
		.legendContainerPB, .legendContainer2{
			min-width:750px;
		}
	}

/* End: Legend Formatting */

/* Start: MultiSelect */
	
	.multiselect{
		margin-bottom: 0px;
		color: black;
	}

	.multiselect button{
		height: 25px;
		font-size: 12px;
	}

	.multiselect .dropdown-menu{
		min-width: 0px;
		text-align: center;
		width: 100%;	
	}

	.multiselect li{
		height: 20px;
		font-size: 12px;
		display: flex;
	}		

	.multiselect li input[type=checkbox]{
		height:12px;
		width: 12px;
		margin-right:5px;
		margin-left:5px;
		flex-shrink: 0;
	}

	.multiselect li span{
		align-self: center;
		margin-right: 5px;
		flex-shrink: 0;
	}
		
	.multiselect button, .multiselect button:hover, .multiselect button:focus{
		background: none;
	}

	.multiselect button.selected{
		background: var(--inputLightBackground);
		border-color: var(--inputBorder);
	}

	ul.dropdown-menu li.multiSelectCheckboxSelectAllListItem{
		background: #e6e6e6;
	}

	ul.dropdown-menu li.multiSelectCheckboxSelectAllListItem:hover{
		background: rgb(25,103,210);
	}

/* End: Multiselect */

	/* START: Dropdown selector */

	.dropdownSelectorWellSet1{
		background: var(--filteringGroupingPanelColor);
	}

	.formElementRow.dropdownSelectorWellSet1{
		display: flex;
	    align-items: center;
	    justify-content: flex-end;
	    width: -webkit-fill-available;
	    border-radius: 3px;
	    margin: 0px;
	    padding: 8px 0px 8px 0px;
	}

	.dropdownSelectorWellSet1 .formElementTitle{
		display: flex;
		font-size: 12px;
	    color: white;
	    padding-left: 4px;
	    padding-right: 8px;
	    font-weight: bold;
	    width: fit-content;
	    min-width: fit-content;
	    margin-left: 10px;
	}

	.dropdownSelectorWellSet1 .formElementContainer{
		margin-left: 3px;
		width: 100%;
	    margin-right: 8px;
	}

	.selectionContainer{
		height: 37px;
		width: fit-content;
		background: var(--filteringGroupingPanelColor);
		border-radius: 3px;
		font-size: 12px;
		padding: 5px;
		display: flex;
    	align-items: center;
    	margin-left: 15px;
	}

	.selectionText{
		display: flex;
    	align-items: center;
		font-size: 12px;
		color: white;
		padding-left: 7px;
		font-weight: bold;
	}

	.selectionContainerSecondary{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border: 3px solid var(--filteringGroupingPanelColor);
	    background-color: rgb(225,225,225);
	    border-radius: 6px;
	    height: 30px;
	    overflow: hidden;
	    padding: 0px 15px;
	}

	/* END: Dropdown selector */

	/*START: Pagination*/
	.tablePropertiesRowBottom{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 3px;
	}

	.collapseContainer{
		display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    width: 30px;
	}

	.paginationContainer{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
	}

	.buttonsContainer{
		display: flex;
		align-items: center;
	}

	.pagination{
		margin: 0px;
		display: flex;
	}

	.paginationNumberOfRows, .paginationPageNumber{
		display: flex;
	    align-items: center;
	    margin-left: 5px;
	}

	.paginationPageNumber .commandButtons3{
		margin: 0px;
		margin-left: 10px;
		font-size: 9px;
		height: 20px;
		width: 25px;
	}

	.dropdownPropertiesPagination{
		height: 20px;
	    font-size: 12px;
	    font-weight: normal;
	    color: var(--darkInLightLightInDark);
	    padding-right: 15px;
	    padding-left: 5px;
	    padding-top: 1px;
	    padding-bottom: 1px;
	    width: max-content;
	    text-align: left;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    text-shadow: none;
	    border-radius: 3px;
	    border-color: rgb(200,200,200);
	    background-image: linear-gradient(to bottom,rgb(250,250,250) 0,rgb(210,210,210) 100%);
	    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
	    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
	    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
	}

	.dropdownPropertiesPagination:hover, .dropdownPropertiesPagination:active:hover{
		background-image: linear-gradient(to bottom,rgb(230,230,230) 0,rgb(210,210,210) 100%);
	}

	.dropdownPropertiesPagination:focus, .dropdownPropertiesPagination:active:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	.paginationSeparatorIcon{
		height: 18px;
		cursor: pointer;
		margin: 0px 20px;
	}

	.titlePagination{
		font-size: 12px;
	    margin-right: 10px;
	    color: var(--wwDarkBlue);
	}

	.paginationControls .pagination-sm>li>span{
		padding: 0px 10px;
		color: var(--wwDarkBlue);
	    background: #f2f2f2;
		font-size: 12px;
		height: 20px;
		cursor: pointer;
	}

	.paginationControls .pageNumberBtn.currentPageNumberBtn span{
		color: var(--wwDarkOrange);
		background: rgb(225,225,225);
	}

	.paginationInput{
		color: var(--darkInLightLightInDark);
		border-color: var(--inputBorder);
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width: 1px;
		padding-left: 5px;
		font-size: 12px;
		width: 65px;
	    height: 20px;
	}

	.paginationInput:hover, .paginationInput:focus{
		outline: none;
		border: 1px solid rgb(0, 117, 255);
	}

	.paginationControls .pagination-sm>li>span.glyphicon{
		font-size: 10px;
	    padding-top: 1px;
	}

	#paginationControlsWE .paginationControls .pagination>li>span:hover{
		background: #e0dede;
	}

	.paginationControls .pagination>li:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}

	.paginationControls .pagination-sm .pageNumberEllipsis span
	, .paginationControls .pagination-sm .pageNumberEllipsis span:hover
	, .paginationControls .pagination-sm .pageNumberEllipsis span:focus{
		background: none;
	    border: none;
	    color: black;
	    padding: 0px 10px 0px 12px;
	    letter-spacing: 2px;
	    cursor: auto;
	}

	.totalRowCount{
		color: var(--wwDarkBlue);
	    font-weight: bold;
	    font-size: 12px;
	}


	/* Modal Window */

	.modalWindowType1 .modal-dialog
	, .bulkProcessingModalWindow .modal-dialog{
		width: 90vw;
	}

	.modalTableRow{
		padding: 0px 10px;
	}

	.modalTableContainer{
		display: flex;
		justify-content: center;	
	    overflow-y: auto;
	    max-height: 60vh;
	    padding: 0px;
	}

	.modalOptionsTable td.modalHeader1{
		padding-top: 10px;
	}

	.modalOptionsTable td{
		padding: 10px 15px;
		vertical-align: baseline;
	}

	.modalOptionsTable tr.hoverOn:hover{
		background: rgb(235,235,235);
	}

	.modalHeader1{
		font-size: 13px;
		font-weight: bold;
		text-align: left;
		color: var(--wwDarkBlue);
	}

	.modalOptionsText{
		font-size: 14px;
	}

	.modaltextDescriptive{
		font-size: 11px;
		color: rgb(130,130,130);
	}

	.modal-options-header{
		font-size: 12px;
		font-weight: bold;
		padding-bottom: 5px;
	}

	.modal-options-header:not(:first-child){
		margin-top: 20px;
	}

	/* START: Standard Modal Window */
	.ww-custom-modal.ww-custom-modal-lg .modal-dialog {
	    width: 70vw;
	    max-width: 1300px;
	}


	/* END: Standard Modal Window */

	/* Mark rows */

	.markUnmarkIcon{
	    cursor: pointer;
	    border-radius: 10px;
	    width: 10px;
	    height: 10px;
	    border: 1px solid rgb(175,175,175);
	    margin: auto;
	    user-select: none; /* CSS3 (little to no support) */
        -ms-user-select: none; /* IE 10+ */
       	-moz-user-select: none; /* Gecko (Firefox) */
    	-webkit-user-select: none; /* Webkit (Safari, Chrome)*/
	}

	.markUnmarkIcon.marked{
		background: grey;
		border: 1px solid grey;
	}

	.markUnmarkIcon.unmarked{
		background:none;
	}

	.messageType1>div>div{
		background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
	    color: #0659a9;
	    border-color: rgb(200,200,200);
	    height: 45px;
	    font-size: 12px;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    margin-bottom: 5px;
	}

	.messageType1 .alert-dismissible button{
		top: 0px;
	}

	.messageType1 .alert-dismissible button:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}

	/* Generic Message Container Formatting */
	.genericAlert>div>div{
		background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
	  color: #0659a9;
	  border-color: rgb(200,200,200);
	  font-size: 12px;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin-bottom: 0px;
	  padding: 8px 35px 8px 20px;
	  word-spacing: 1px;
	}

	.genericAlert .alert-dismissible button{
		top: 0px;
	}

	.genericAlert .alert-dismissible button:focus{
		outline: none;
		border-bottom: 1px solid var(--focusColor1);
		box-shadow: 0px 4px 3px -3px var(--focusColor1);
	}


	/* Settings Options Table Formatting */
	.settingsOptionsText{
		font-weight: bold;
		display: flex;
	}

	.settingsOptionsSubText{
		font-size: 12px;
	}

	.settingsOptionsContainer{
		display: flex;
		margin: 5px 0px 0px 0px;
		overflow-y: auto;
		max-height: calc(100vh - 350px);
	}

	.settingsOptionsContainer .row{
		/*padding: 10px;*/
		padding: 13px 0px;
		background: linear-gradient(white, white) bottom /100% 1px no-repeat, transparent;
	}

	.settingsOptionsContainer form{
		display: flex;
		flex-direction: column;
	}

	.settingsOptionsContainer form label.radio-inline+.radio-inline{
		padding-left: 10px;
	}

	.settingsOptionsContainer form label{
		padding-top: 3px;
		padding-bottom: 3px;
	}

	.inputField1{
    	height:21px;
		padding-right: 20px;
		padding-left: 5px;
		padding-top:0px;
		padding-bottom: 0px;
		text-shadow: none;
		border-radius: 3px;
		border-right-style: hidden;
		border-bottom-style: hidden;
		border-top-style: groove;
		border-left-style: groove;
		background-image: none;
		background-color: rgb(250,250,250);

		border-color: var(--inputBorder);
		-webkit-box-shadow: none;
	}

	.inputField1:hover, .inputField1:active:hover{
    	background-image: linear-gradient(to bottom,rgb(240,240,240) 0,rgb(240,240,240) 100%);
	}

	.inputField1:focus, .inputField1:active:focus{
		outline: none;
	    border: 1px solid rgb(0, 117, 255);
	}

	

	/* Start: For less than 1300px */
	@media (max-width: 1300px){
		.settingsOptionsSubText{
			font-size: 11px;
		}

		.tooltipIcon{
			height: 8px;
		}

		.tableFormat{
			font-size: 10px;
		}

		.formElementContainer3>input, .formElementContainer3>.ww-input-group>input{
			font-size: 10px;

		}

		.dropdownProperties4{
			font-size: 10px;
		}
	}

/* END: COMMON */


/* START: Help Section */

/* The help panes are pinned to the shell: 100vh minus the .bottomTextHelp
   strip (30) — .ww-main's padding is stripped on this page (ww-layout.css
   section 12), so it doesn't enter the offset. No footer-hidden variant —
   the help page uses .ww-no-footer, so the last grid row is always 0px. */
.outerContainerHelp{
	background: var(--wwSectionContainer);
}

.headerTextHelp{
	background: var(--wwDarkBackground);
	display: flex;
	align-items: center;
	font-size: 16px;
	color: var(--wwDarkOrange);
	padding: 0px 25px;
	height: 40px;
	width: -webkit-fill-available;
}

.headerTextHelp .separatorIcon{
	padding: 0px 10px;
}

.headerIconsHelps{
	text-align: right;
	width: -webkit-fill-available;
	background: var(--wwDarkBackground);
}

.headerIconsHelps .nav>li>a:hover
, .headerIconsHelps .nav>li>a:focus
, .headerIconsHelps .nav>li>a:hover:focus{
	background: none;
	text-decoration: none;
}

.leftPaneHelp{
	height: 100%;
	overflow-y: auto;
	background: rgb(200,200,200);
	padding: 15px 15px 15px 30px;
	border-radius: 10px;

}

.rightPaneHelp{
	height: 100%;
	overflow-y: auto;
	background-color: var(--wwSectionContainer);
	padding-right: 30px;
	padding-left: 30px;
}

.innerContainerHelp{
	height: calc(100vh - 30px);
	padding: 10px;
}

.helpContentContainer{
	outline: none;
}

.bottomTextHelp{
	background: var(--wwDarkBackground);
	font-size: 12px;
	height: 30px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.help-left-top-section{
	display: flex;
	justify-content: space-between;
}

#help-search-icon{
	height: 20px;
	margin-right: 10px;
	color: black;
}

.helpIconsContainer{
	display: flex;
	align-items: center;
}

.helpIconsContainer *{
	padding-right: 10px;
}

.helpIndexTitle{
	font-size: 16px;
	font-weight: bold;
	height: 30px;
	display: flex;
	align-items: center;
}

.help-left-top-section .helpIconsContainer .expand-all-help-items, .help-left-top-section .helpIconsContainer .collapse-all-help-items{
	color: rgb(50,50,50);
	font-size: 15px;
	margin-top: 5px;
	cursor: pointer;
}

.helpIndexItem{
	font-size: 14px;
}

.leftPaneHelp .helpIndexItem .parentIndexItem.selectedItem a.helpIndexItemLink, .leftPaneHelp .helpIndexItem.selectedItem a.helpIndexItemLink{
	color: black;
	font-weight: 600;
}

.helpIndexItem a.helpIndexItemLink{
	word-break: break-word;
	cursor: pointer;
	color: black;
}

.helpIndexItem a.helpIndexItemLink:focus-visible
, .helpIndexItem a.helpIndexItemLink:focus{
	outline: none;
}

.helpIndexItem:hover{
	background-color: rgb(180,180,180);
	text-decoration: none;
}

span.helpIndexItemTitle:hover{
	font-weight: bold;
}

.helpIndexItem.level1{
	padding-left: 5px;
	padding-bottom: 5px;
	padding-top: 5px;
}

.helpIndexItem.level1 .parentIndexItem a.helpIndexItemLink{
	text-decoration: none;
}

.helpIndexItem.level1 .glyphicon{
	font-size: 10px;
	font-weight: normal;
	padding-right: 15px;
	cursor: pointer;
}

.helpIndexItem.level2{
	padding-left: 40px;
	padding-bottom: 3px;
	padding-top: 3px;
}

.helpIndexItem.level2 a.helpIndexItemLink{
	font-size: 14px;
}

.helpIndexItem > a:hover, .helpIndexItem > a:focus, .helpIndexItem > a:hover:focus{
	text-decoration: none;
	font-weight: bold;
}

.helpIndexItem.level2 .glyphicon{
	font-size: 9px;
	font-weight: normal;
	padding-right: 10px;
	padding-bottom: 4px;
}

.glyphicon.glyphicon-custom-dot:before {
    content: "\25cf";
    font-size: 12px;
}

.rightPaneHeaderHelp{
	font-size: 16px;
	font-weight: bold;
	color: var(--wwDarkBlue);
	height: 30px;
    display: flex;
    align-items: center;
}

.rightPaneBody{
	margin-bottom: 30px;
}

.rightPaneHelp .glyphicon.glyphicon-custom-dot{
	width: 15px;
}

.listSectionHeadersHelp>li, .listSubsectionHeadersHelp>li{
	padding-top: 10px;
}

.numberedListHelp .rightPaneBodyText1Help
, .listSectionHeadersHelp .rightPaneBodyText1Help{
	padding-left: 10px;
}

.rightPaneBodyText1Help, .rightPaneBodyHeader1Help, .rightPaneBodyTextNotesHelp
, .numberedListHelp li span, .numberedListHelp li, .listSectionHeadersHelp li span
, .listSectionHeadersHelp li, .unorderedListHelp li, .faqAnswerHelp, .faqQuestionHelp{
	font-size: 13px;
	word-break: break-word;
	line-height: 20px;
	font-weight: normal;
	color: rgb(50,50,50);
	padding-top: 5px;
}

.faqAnswerHelp{
	padding-left: 18px;
	padding-right: 15px;
}

.faqAnswerHelp li>span, .numberedListHelp li>span, .listSectionHeadersHelp li>span
, .unorderedListHelp li>span{
	position: relative;
  	left: 10px;
}

.listSectionHeadersHelp>li>span{
	font-size: 14px;
	font-weight: bold;
}

.listSubsectionHeadersHelp>li>span{
	font-size: 13px;
	font-weight: bold;
	padding-top: 5px;
	color: rgb(70,70,70);
}

.listSectionHeadersHelp .rightPaneBodyTextNotesHelp{
	padding-left: 10px;
}

.faqQuestionHelp{
	font-size: 14px;
	font-weight: bold;
}

.rightPaneBodyHeader1Help{
	font-weight: bold;	
}

.rightPaneBodyTextNotesHelp{
	color: var(--wwDarkOrange);
	padding: 10px 0px;
}

.numberedListHelp{

}

.rightPanePlaceholderHelp>div{
	display: flex;
	align-items: center;
	justify-content: center;
}

.rightPanePlaceholderHelp, .rightPanePlaceholderHelp>div{
	height: 100%
}

.questionSectionFAQHelp{
	margin-top: 10px;
}

.helpTable th{
	min-width: 150px;
	border-bottom: 1px solid lightgrey;
}

.listSectionHeadersHelp .helpHeaderText1{
	color: maroon;
	font-weight: bold;
}

.listSectionHeadersHelp .helpHeaderText2{
	color: var(--darkOrange);
	font-weight: bold;
	padding-top: 15px;
}

.helpSecondLevelIndentation li{
	padding-top: 15px;
}

#help-search-panel{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	flex-direction: column;
	width: -webkit-fill-available;
}

#search-inputs-row{
	display: flex;
	width: 60%;
	max-width: 800px;
}

#search-results-panel{
	margin-left: 20px;
	width: inherit;
}

#search-results-info-panel{
	margin-top: 10px;
}

#help-search-box{
	width: -webkit-fill-available;
	font-size: 14px;
	height: 30px;
	padding: 20px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	outline: none;
    border: 1px solid darkgray;
}

#help-search-btn{
	width: 100px;
	font-size: 14px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border: 1px solid darkgrey;
	height: auto;
	margin-left: -1px;
}

#help-search-panel .search-result-row{
	margin-top: 25px;
}

#help-search-panel .search-result-content-preview mark{
	/*color: red;*/
}

#help-search-panel .search-result-title{
	font-size: 16px;
}

#help-search-panel mark{
	background: lightgreen;
}

.highlightText{
	background: yellow;
}

/* END: Help Section */


/* Start: Login Page */

.container-fluid .row.loginPageRow{
	height: 100vh;
	background-image: url(/static/images/background/login-gradient.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	background-position-y: 100%;
	display: flex;
	align-items: center;
} 

.container-fluid .loginPageColumn{
	display: flex;
	justify-content: center;
 }

.loginPanelRow{
	background-color: rgba(255,255,255,0.1);
	width: 400px;
	padding-right: 10px;
	padding-left: 10px;
}

.loginPanelColumn{
	text-align: center;
}

.loginPanelColumn .flashed-messages-container{
	text-align: left;
}

#loginPageContainer .logoWW{
	/*height: calc(50px + ((5 * (100vw - 800px)) / 799));*/
	height: 70px;
	margin-top: 40px;
	margin-bottom: 20px;
}

#loginPageContainer .formElementContainer>input{
	background-color: transparent;
	border: 1px solid white;
	height: 30px;
}

#loginPageContainer .formElementContainer>input:focus{
	outline-color: white;
}

#loginPageContainer .formElementContainer>input::placeholder{
	color: rgb(160,160,160);
}

#loginPageContainer .formElementContainer>input, #loginPageContainer .formElementTitle{
	font-size: 14px;
	color: white;
	letter-spacing: 1px;
}

#loginPageContainer .commandButtons{
	height: 40px;
	background-color: var(--wwDarkOrange);
	border: none;
	border-radius: 0px;
	margin: 0px;
	font-size: 14px;
	width: 100%;
	font-weight: bold;
	margin-bottom: 10px;
}

#loginPageContainer .commandButtons:hover{
	background-color: rgba(254,102,78,0.9);
}

#loginPageContainer .commandButtons:focus{
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

#loginPageContainer .loginCheckbox{
	margin: 0px 12px 0 0;
}

#loginPageContainer .loginCheckbox:focus{
	outline-offset: -1px;
	outline-color: var(--wwDarkBlue);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);		
}

.loginCheckbox{
	height: 18px;
	width: 18px;
}

.loginCheckbox input[type="checkbox"]{
	color: red;
	background-color: transparent;;
}

.form-check-label{
	margin-bottom: 0px;
}

.forgotPassword>div{
	/*color: white;
	cursor: pointer;
	text-decoration: underline;*/
	margin-bottom: 10px;
}

.forgotPassword a{
	color: white;
	padding: 3px 15px;
}

.forgotPassword a:focus{
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
	outline: 0.5px solid white;
	outline-offset: 0px;
}

.forgotPassword a:visited{
	color: white;
}

.loginPanelColumn>div.row:last-child{
	margin-bottom: 40px;
}

#loginPageContainer .loginPanelColumn .formElementContainer>input:invalid{
  color: black; 
}

/* End: Login Page */

/*START: Password Strength*/
.password-strength-hint-container{
	margin-top: 2px;
}

.password-strength-hint-text{
	text-align: left;
	font-size: 10px;
	font-weight: 700;
	padding-left: 5px;
}

.password-strength-hint-container[data-level="0"] .password-strength-hint-text{
	color: red;
}

.password-strength-hint-container[data-level="1"] .password-strength-hint-text{
	color: orange;
}

.password-strength-hint-container[data-level="2"] .password-strength-hint-text{
	color: goldenrod;
}

.password-strength-hint-container[data-level="3"] .password-strength-hint-text{
	color: chartreuse;
}

.password-strength-hint-container[data-level="4"] .password-strength-hint-text{
	color: green;
}

.password-strength-hint-container .passwordValidIcon
, .password-strength-hint-container .passwordInvalidIcon{
	font-size: 15px;
	margin-right: 10px;
}

.password-strength-hint-container .passwordValidIcon{
	color: green;
}

.password-strength-hint-container .passwordInvalidIcon{
	color: red;
}

.password-strength-hint-container[data-is-valid="NA"] span.passwordValidIcon, .password-strength-hint-container[data-is-valid="NA"] span.passwordInvalidIcon{
	display: none
}

.password-strength-hint-container[data-is-valid="YES"] span.passwordValidIcon, .password-strength-hint-container[data-is-valid="NO"] span.passwordInvalidIcon{
	display: inline-block;
}

.password-strength-hint-container[data-is-valid="NO"] span.passwordValidIcon, .password-strength-hint-container[data-is-valid="YES"] span.passwordInvalidIcon{
	display: none
}
/*END: Password Strength*/

/*START: Password Match*/

.password-match-hint-container{
	margin-top: 2px;
}

.password-match-hint-text{
	text-align: left;
	font-size: 10px;
	font-weight: 700;
	padding-left: 5px;
}

.password-match-hint-container .passwordMatchedIcon
, .password-match-hint-container .passwordNotMatchedIcon{
	font-size: 15px;
	margin-right: 10px;
}

.password-match-hint-container .passwordMatchedIcon{
	color: green;
}

.password-match-hint-container .passwordNotMatchedIcon{
	color: red;
}

.password-match-hint-container[data-is-matched="NA"] span.passwordMatchedIcon, .password-match-hint-container[data-is-matched="NA"] span.passwordNotMatchedIcon{
	display: none;
}

.password-match-hint-container[data-is-matched="YES"] span.passwordMatchedIcon, .password-match-hint-container[data-is-matched="NO"] span.passwordNotMatchedIcon{
	display: inline-block;
}

.password-match-hint-container[data-is-matched="NO"] span.passwordMatchedIcon, .password-match-hint-container[data-is-matched="YES"] span.passwordNotMatchedIcon{
	display: none;
}

.password-match-hint-container[data-is-matched="YES"] .password-match-hint-text{
	color: green;
}

.password-match-hint-container[data-is-matched="NO"] .password-match-hint-text{
	color: red;
}

/*START: Password Match*/

/* Start: Error Page */

.container-fluid .row.errorPageRow{
	height: 100vh;
	background-image: url(/static/images/background/login-gradient.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	background-position-y: 100%;
	display: flex;
	align-items: center;
} 

.container-fluid .errorPageColumn{
	display: flex;
	justify-content: center;
 }

.errorPanelRow{
	background-color: rgba(255,255,255,0.1);
	width: 75vw;
	/*height: 425px;*/
	padding-right: 10px;
	padding-left: 10px;
}

.errorPanelColumn{
	/*height: 100px;*/
	text-align: center;
}

#errorPage .logoWW{
	/*height: calc(50px + ((5 * (100vw - 800px)) / 799));*/
	height: 70px;
	margin-top: 40px;
}

.errorMessageBox{
	margin: 50px 0 50px 0;
	border: 0.5px solid white;
	padding: 20px;
	color: white;
}

.errorMessageHeader{
	font-size: 25px;
}

.errorMessageBody{
	font-size: 18px;
}

#errorPage .commandButtons{
	height: 40px;
	background-color: var(--wwDarkOrange);
	border: none;
	border-radius: 0px;
	margin: 0px;
	font-size: 14px;
	width: 200px;
	font-weight: bold;
	margin-bottom: 30px;
}

#errorPage .commandButtons:hover{
	background-color: rgba(254,102,78,0.9);
}

/* End: Error Page */

/*Start: Project Builder */

.builderFilter2{
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px; 
}

.filterContainerProjectStructure .filterInfoContainer{
	background: var(--masterFilterColor);
}

.filterContainerProjectStructure .filteredWellsCount
, .filterContainerProjectStructure .filterAttributesCount
, .filterContainerProjectStructure .filterAttributes{
	border: 3px solid var(--masterFilterColor);
}

.masterFilterText{
	font-size: 10px;
	color: var(--masterFilterColor);
	padding-left: 5px;
}

.filterContainerProjectStructure .filterCollapseControl{
	color: var(--masterFilterColor);
}

#project-builder-production{
	width: 150px;
}

#project-builder-pricing-differential{
	width: 110px;
}

.legendContainerPB{
	background: #f2f2f2;
	padding: 0px 15px;
    border-radius: 3px;
    border: 1px solid grey;
    margin-bottom: 50px;
}	

.legendSubHeader{
	font-weight: bold;
	font-style: italic;
	font-size: 13px;
	border-bottom: 0.5px solid lightgrey;
}

#project-builder-legend .legendHeader{
	background: grey;
	color: white;
    height: 25px;
    display: flex;
    align-items: center;
    margin: 0px;
}

#builderDataTableContainer.tableContainer{
	/* Pinned to the viewport height — see the matching footer-hidden
	   override in ww-layout.css section 12. */
	max-height: calc(100vh - 180px);
    min-height: calc(100vh - 180px);
	border: none;
	border-bottom: 0.05em solid lightgrey;
}

.paginationContainerPB{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
}


/*End: Project Builder */

/* Start: Well Info Panel */

#wellInfoDataTable.tableFormat td{
	height: 30px;
}

#wellInfoDataTable.tableFormat .wellInfoBulkRow{
	height: 35px;
}

#wellInfoPanel .hoverIconPairContainer:focus{
	padding-bottom: 2px;
}

#wellInfoDataTableContainer.tableContainer{
	/* Pinned to the viewport height — see the matching footer-hidden
	   override in ww-layout.css section 12. */
	max-height: calc(100vh - 183px);
    min-height: calc(100vh - 183px);
}

#textTitleSettings{
	color: black;
	font-weight: bold;
	font-size: 16px;
	padding-top: 10px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.inlineFormElementTitle{
	margin-bottom: 0em;
	font-size: 12px;
	margin-right: 3em;
	font-weight: normal;
	white-space: nowrap;
	color: var(--darkInLightLightInDark);
	min-width: 130px;
}

button.twoButtonIcons{
	display: flex;
	justify-content: space-around;
}

button.twoButtonIcons>img{
	height: 18px;
}

/*
.tablePropertiesRow3 .bulkProcessingText{
	font-size: 12px;

}
*/

#well-info-section-user-messages.userMessageContainer{
	padding-right: 15px;
	padding-left: 15px;
}

/* End: Well Info Panel */



/* Start: Ownership Panel */

#ownershipDataTableContainer.tableContainer{
	/* 723px — DERIVED FROM CSS, ESTIMATED (browser-verify). The Ownership
	   Data table sits deep inside the "Create or Edit Ownership Profile"
	   form (it is only visible after Add New / selecting a profile to
	   edit). 723px = 40px footer + ~441px of chrome ABOVE the table in
	   the EDIT state (the tallest form state — the CREATE state is 29px
	   shorter, so it fits with room to spare):
	     ww-main padding-top 16 + "Ownership Profiles" .sectionRow 10+25
	   + "Active Ownership Profile" .subSectionRow1 10+25 + its dropdown
	   row (.activeOwnership padding 10+10, .formElementRow 10+2+2,
	   .dropdownProperties3 25) 59 + "Create or Edit Ownership Profile"
	   .subSectionRow1 10+25 + .selectionButtonRow 60 + .inputsContainer
	   margin-top 25 + edit-dropdown row 2+2+25 + name row 2+2+34 +
	   description row 2+2+31 + #ownership-profile-nonrepeatable-panel
	   margin-top 15 + border 1 + padding-top 15 + "Ownership Data"
	   .subSectionRow4 10+25+0.5 + table wrapper row margin-top 5 +
	   padding-top 2.
	   + ~282px of chrome BELOW the table (excluding the summary table's
	   own height — if BOTH tables hold enough rows to reach their caps at
	   once, the page can scroll):
	     table wrapper row padding-bottom 2 + margin-bottom 10 +
	   .paginationContainer 30 + non-repeatable panel padding-bottom 15 +
	   border 1 + panel margin-bottom 15 + .inputsContainer margin-bottom
	   15 + Create/Cancel .buttonsRowMargins15 15+23+15 + "Ownership
	   Profiles Summary" .sectionRow 10+25 + .tablePropertiesRow 5+25 +
	   .formElementRow8 padding-bottom 5 + #ownershipPanel
	   margin-bottom 15 + ww-main padding-bottom 16.
	   Old value: shared base .tableContainer rule (calc(100vh - 275px),
	   common2.css:4281), tuned for the OLD layout. */
	max-height: calc(100vh - 723px);
    min-height: calc(100vh - 723px);
}

#summaryOwnership .tableContainer{
	/* Ownership Profiles Summary table — viewport-pinned, browser-tuned.
	   No min-height: content-sized up to the max. See the matching
	   footer-hidden override in ww-layout.css section 12. */
	max-height: calc(100vh - 350px);
}

/* End: Ownership Panel */



/* Start: Production Panel */

#production-forecast-action-subsection .formElementContainer3>input, #production-forecast-action-subsection .formElementContainer3>.ww-input-group>input{
	height: 18px;
}

#production-forecast-action-subsection .dropdownProperties4{
	height: 18px;
}

.marginTopForArpsSecondaryProduct{
	margin-top: 33px;
}

.iconSizeRefreshArps{
	font-size: 14px;
	cursor: pointer;
	padding: 1px;
	color: var(--wwDarkBlue);
	font-weight: bold;
}

.iconSizeRefreshArps.disabled{
	color: grey;
	pointer-events: none;
}

.iconSizeRefreshArps:focus{
	outline: none;
	border: 1px solid rgb(0, 117, 255);
	margin-right: 2px;
}

.bulkProcessingProductionModal .modal-dialog{
	width: 90vw;
}

.numberColumn{
	width: 50px;
}

.bulkProcessingTypeColumn{
	width: -webkit-fill-available;
}

.downloadTemplateColumn
, .uploadTemplateColumn{
	width: 100px;
}

.bulkProcessingOptionsColumn{
	max-width: 45%;
}

.formRadio1{
	font-size: 12px;
	height: 23px;
}

.production-forecast-header-text{
	font-size: 12px;
    font-weight: bold;
    color: var(--wwDarkBlue);
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 1px;
}

.productionForecastHeader{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 0.5px solid rgb(175,175,175);
    margin-bottom: 5px;
    height: 28px;
}

#type-curve-header-text.production-forecast-header-text
, #production-forecast-header-data-source-title.production-forecast-header-text{
	border-bottom:	none;
	background: none;
}

#headingNGL.production-forecast-header-text{
	margin-top: 15px;
}

.formElementRowProduction{
	height:23px;
	width:100%;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-left: -10px;
	display: flex;
	align-items: center;
}

#eurTable{
	margin-bottom: 10px;
	margin-top: 5px;
}

.propertiesCreateEditRow1 .frame-formatting{
	border-top: none;
	border-bottom-width: 15px;
}

#CPSubcontainer1 .propertiesCreateEditRow1, #CPSubcontainer1 .propertiesCreateEditRow2{
    background: rgb(220,220,220);
}

#CPSubcontainer1 .propertiesCreateEditRow1{
	padding-top: 15px;
}

#CPSubcontainer1 .subSectionContainer1{
	padding-top: 0px;
}

.inputProductionColumn, .excelTemplateColumn{
	padding-top: 10px;
}

.typecurveProperties{
	margin: 0px 0px;
}

.subsectionTypecurveProperties{
	border-style: solid;
	border-color: rgb(200,200,200);
	border-radius: 3px;
	margin-bottom: 10px;
}

.sectionTypecurvePropertiesLeft{
	padding-right: 6px;
}

.sectionTypecurvePropertiesRight{
	padding-left: 6px;
}

/*This styling is used for containers of charts in the application which are not on the visualization page*/
.nonVizChartContainer{
	border-color: rgb(200,200,200);
	border-radius: 3px;
	border-style: solid;
	margin: 0px 0px;
}

.typecurveText1{
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
	display: flex;
	align-items: center;
}

#typecurveText2{
	padding-top: 10px;
	padding-bottom: 5px;
	font-size: 12px;
	display: flex;
	align-items: center;
	font-weight: bold;
}

.subsectionTypecurveProperties span.suffixSpan{
	background: rgb(205,205,205);
	color: black;
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 60px;
    margin: 0px;
}

#ngl-forecast-section span.suffixSpan{
	min-width: 50px;
}

/* Hides historicalProductionUploadFrame and arpsFrame*/
#historicalProductionUploadFrame.inactive
, #arpsFrame.inactive
, #developedVisualSummaryUploadFrame.inactive{
	display: none;
}

/* Shows historicalProductionUploadFrame and arpsFrame*/
#historicalProductionUploadFrame.active
, #arpsFrame.active
, #developedVisualSummaryUploadFrame.active{
	display: block;
}

.circleSteps{
	background: rgb(100,100,100);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    color: white;
    margin: 40px 15px 30px 15px;
    font-size: 15px;
}

.circleStepFormElementRow3{
	background: rgb(100,100,100);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    color: white;
    margin: 0px 20px 0px 0px;
    font-size: 15px;
}


.excelIconsDevProduction{
	height: 30px;
    cursor: pointer;
}

.bulkUploadSteps{
	display: flex;
	justify-content: left;
	align-items: center;
	border-right: 3px solid whitesmoke;
}

.bulkUploadSteps:last-child{
	border: none;
}

.bulkIdentifierText{
	font-size: 12px	
}

.bulkUploadSteps .formElementRow3{
	width: calc(100% - 80px);
    margin-left: 10px;
}

.excelTemplateAlignment{
	width: calc(100% - 60px);
	display: inline-flex;
	align-items: center;
}

.sectionTypecurvePropertiesRight .userMessageContainer>div{
	padding: 0px;
}

.sectionTypecurvePropertiesRight .userMessageContainer>div>div{
	margin: 0px;
}

#download-secondary-data-template, #upload-secondary-data-template{
	cursor:  pointer;
}

#zoomToSecondaryBtn.disabled, #download-secondary-data-template.disabled, #upload-secondary-data-template.disabled{
	opacity: 20%;
	cursor: not-allowed;
}

#zoomToSecondaryBtn:focus
, #resetCompressionBtn:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

.productionProperties{
	display: flex;
	justify-content: center;
	align-items: center;
}

.productionProperties span{
	margin-left: 10px;
}

#production-forecast-action-subsection .textRadio1{
	padding-left: 10px;
	padding-right: 10px;
}

.chartBorders{
    width: 100%;
}

.textDescriptiveBulkProcessingModal{
	font-size: 11px;
	color: rgb(130,130,130);
}

.bulkProcessingOptionsText{
	font-size: 14px;
}

.downloadorUploadTemplateTextHeader{
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 5px;
}

.bulkProcessingOptionsTextContainers:not(:last-child){
	margin-bottom: 15px;
}

#production-well-summary-table th.wellProductionSummaryHeaderCell[data-well-production-summary-column-backend-name='WELL_INT_CODE']
, #production-well-summary-table td[data-backend-name='WELL_INT_CODE']{
	min-width: 170px;
	width: 170px;
}

#production-well-summary-table th.wellProductionSummaryHeaderCell[data-well-production-summary-column-backend-name='WELL_NAME']
, #production-well-summary-table td[data-backend-name='WELL_NAME']{
	min-width: 200px;
	width: 200px;
}

#production-well-summary-table td.checkboxStickyCell
, #production-well-summary-table td[data-backend-name='WELL_INT_CODE']
, #production-well-summary-table td[data-backend-name='WELL_NAME']{
	position: sticky;
	z-index: 2;
	background: rgb(230,230,230);
}

#production-well-summary-table th.checkboxStickyCell
, #production-well-summary-table th[data-well-production-summary-column-backend-name='WELL_INT_CODE']
, #production-well-summary-table th[data-well-production-summary-column-backend-name='WELL_NAME']{
	z-index: 4;
}

#production-well-summary-table td.checkboxStickyCell
, #production-well-summary-table th.checkboxStickyCell{
	left: 0px;
}

#production-well-summary-table td[data-backend-name='WELL_INT_CODE']
, #production-well-summary-table th[data-well-production-summary-column-backend-name='WELL_INT_CODE']{
	left: 50px;
}

#production-well-summary-table td[data-backend-name='WELL_NAME']
, #production-well-summary-table th[data-well-production-summary-column-backend-name='WELL_NAME']{
	left: 220px;
}

#production-well-summary-table.tableFormat tr.selected td{
	background: var(--selectedRowBg);
}


.productionInputRow{
	display: flex;
	border-right: 8px solid rgb(230,230,230);
    border-left: 8px solid rgb(230,230,230);
}

.productionInputColumn{
	flex: 1;
	padding: 0px;
  	display: flex;
    flex-direction: column;
}

.productionBackground{
	border-radius: 10px;
    background: rgb(220,220,220);
    border: 7px solid rgb(230,230,230);
    border-top: 6px solid rgb(230,230,230);
    padding: 10px;
    height: 100%;
}

.productionBackgroundNormalization{
	border-radius: 10px;
    background: rgb(220,220,220);
    border: 7px solid rgb(230,230,230);
    border-top: 6px solid rgb(230,230,230);
    padding: 10px;
    height: auto;
}

.productionBackgroundOil{
	border-radius: 10px;
    background: rgb(220,220,220);
    border: 7px solid rgb(230,230,230);
    border-top: 6px solid rgb(230,230,230);
    padding: 10px;
    flex: 1;
    box-sizing: border-box;
}

.productionInputRow span.prefixSpan
, .productionInputRow span.suffixSpan{
	background: rgb(205,205,205);
	color: black;
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 40px;
    margin: 0px;
}

.productionInputColumn .radio-inline{
	font-size: 11px;
}

#normalizationBaseAbsent{
	height: 89px;
}

.productionStreamIconContainer:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

.iconSizeProductionStream{
	height: 35px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	cursor: pointer;
}

/* End: Production Panel */

/* Start: Cost Panel */

#cost-bucket-summary-table.tableFormat td:not(.checkboxColumnWidth){
	text-align: left;
	padding-left: 15px;
}

/*
#costsPanel .formElementRow{
    border-right: 8px solid rgb(230,230,230);
    border-left: 8px solid rgb(230,230,230);
}

#costsPanel .repeatablePanel1 .formElementRow{
	border-right: 8px solid rgb(210,210,210);
    border-left: 8px solid rgb(210,210,210);
}
*/

#createEditCostBucket select:disabled
, #createEditCostBucket input:disabled
, #create-edit-pricing-differentials-type-inputs-container select:disabled
, #create-edit-pricing-differentials-type-inputs-container input:disabled{
    background: transparent;
    color: var(--darkInLightLightInDark);
    border: none;	
    opacity: 1;
    padding-left: 10px;
    cursor: auto;
    -webkit-appearance: none;
}

#createEditCostBucket select:disabled:hover
, #createEditCostBucket select:disabled:focus
, #createEditCostBucket select:disabled:active:focus
, #createEditCostBucket select:disabled:active:hover {
    background: transparent;
    color: var(--darkInLightLightInDark);
    border: none;	
    opacity: 1;
    cursor: auto;
    -webkit-appearance: none;		
}

.bulkProcessingCostsModal .modal-dialog{
	width: 90vw;
}

#costLinkagesOptions .dropdownProperties2{
	max-width: 200px;
}

/* End: Cost Panel */


/* Start: Pricing Panel */

#pricing-stream-section-ngl input#NGLPricingRatio{
	margin-left: 15px;
	width: 6%;
}

#pricing-stream-section-ngl label{
	font-size: 12px;
}

.activePricingContainer{
	margin-top: 15px;
	margin-bottom: 15px;
}

/*
#pricingPanel .formElementRow, #pricingPanel .formElementRow2{
    border-right: 8px solid rgb(230,230,230);
    border-left: 8px solid rgb(230,230,230);
}
*/

#pricingPanel .active-pricing-stream-display-row.formElementRow2{
	padding-top: 0px;
}

#pricing-chart-toggle.formElementRow2{
	padding-bottom: 2px;
}

.filterContainerProjectStructure .formElementRow{
    border-right: 8px solid rgb(245,245,245);
    border-left: 8px solid rgb(245,245,245);
}

.nglPricingText{
	font-size: 12px;
	padding-left: 5px;
	padding-top: 5px;
	width: 100px;
}

.nglPricingText>div{
	display: flex;
	align-items: center;
}

.nglPricingText>div>input{
	padding: 0px 0px;
	margin: 0px 5px;
}

#pricing-stream-section-ngl .NGLComponentPricingRow{
	margin-top: 20px;
}

.NGLComponentsHeader{
	font-size: 12px;
	font-weight: bold;
	margin-left: 10px;
}

.rowNumber{
	font-size: 12px;
	font-weight: bold;
	margin-right: 10px;
}

#createEditPricingStream .repeatablePanel1{
	border: 1px solid rgb(210,210,210);
	background-color: rgb(235,235,235);
	border-radius: 3px;
	margin-right: 5px;
	margin-bottom: 15px;
	margin-left: 5px;
	padding: 15px 15px;
}

#createEditPricingStream .repeatablePanel1[data-product="Oil"]{
	margin-top: 15px;
}

/* End: Pricing Panel */

/* Start: Development Plan */
#summaryWellSet .sectionContainer{
	padding-top: 8px;
    padding-bottom: 8px;
}

.frameCalculateDP{
	height: 170px;
	border-color: rgb(220,220,220);
	border-style: solid;
	border-radius: 3px;
	margin: 0px 0px;
	text-align: center;
	padding: 10px;
	background-color: rgb(220,220,220);
}

.buttonsRow.commandButtonDevPlan>div{
	margin-bottom: 15px;
}


#createEditDPContainer .filterPanelCol{
	background-color: rgb(215,215,215);
}

#generateDrillingScheduleForDPContainer .dropdownSelectorToShowSection
, #pnaSchedulingContainer .dropdownSelectorToShowSection{
	margin-top: 15px;
	margin-bottom: 0px;
	padding: 15px 0px 15px 0px;
}

#generateDrillingScheduleForDPContainer .sectionContainer
, #pnaSchedulingContainer .sectionContainer{
	padding-bottom: 15px;
}

.generate-drilling-schedule-row{
	overflow: hidden;
	border-right: 8px solid rgb(230,230,230);
	border-left: 8px solid rgb(230,230,230);
}

.generate-drilling-schedule-column{
   /*background: rgb(220,220,220);*/
    border-radius: 10px;
    border: 10px solid rgb(230,230,230);
    border-top: 0px;
    border-bottom: 0px;
    /*margin-bottom: -99999px;
    padding-bottom: 99999px;*/
}

.dev-plan-attributes-table-column
, .pna-scheduling-attributes-table-column{
	background: rgb(220,220,220);
    border-radius: 10px;
    border: 10px solid rgb(230,230,230);
    border-top: 0px;
    border-bottom: 0px;
    background: linear-gradient(var(--wwDarkOrange), var(--wwDarkOrange)) top /97% 0.5px no-repeat, rgb(220,220,220);
}

.dev-plan-attributes-table-row
, .pna-scheduling-attributes-table-row{
	border-right: 8px solid rgb(230,230,230);
	border-left: 8px solid rgb(230,230,230);
}

.formElementRowDevPlan{
 	border-right: 8px solid rgb(230,230,230);
    border-left: 8px solid rgb(230,230,230);
}

.rig-and-crew-frame{
    border-top: none;
    border-bottom: 0px;
    padding-bottom: 15px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background: linear-gradient(var(--wwDarkOrange), var(--wwDarkOrange)) top /95% 0.5px no-repeat, 
    rgb(220,220,220);
}

#developmentPlanPanel .subSectionRow4{
	background-color: rgb(220,220,220);
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
    margin-right: -15px;
	margin-left: -15px;
	height: 35px;
    border-right: 10px solid rgb(230,230,230);
    border-left: 10px solid rgb(230,230,230);
    border-bottom: 0px;
    margin-top: 20px;
}

#developmentPlanPanel .subSectionRow4 >div{
	height: 35px;
}

#developmentPlanPanel .singleIconContainer7{
	height: 18px;
	width: 18px;
	margin-left: 5px;
}

#developmentPlanPanel .glyphicon4{
	font-size: 10px;
}

#development-plan-section-user-messages{
	margin-bottom: 10px;
}

#developmentPlanPanel .dev-plan-header-frame
, #developmentPlanPanel .pna-scheduling-header-frame{
	border-right: 18px solid rgb(230,230,230);
    border-left: 18px solid rgb(230,230,230);
}

#createEditDPContainer .subSectionRow4{
	margin-top: 15px;
}

#selectedWells .paginationContainer{
	margin-bottom: 15px;
}

.fdp-undeveloped-alert>div>div{
	background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
    color: #0659a9;
    border-color: rgb(200,200,200);
    height: 45px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.fdp-undeveloped-alert .alert-dismissible button{
	top: 0px;
}

.fdp-undeveloped-alert .alert-dismissible button:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

.fdp-header-text{
	font-size: 12px;
    font-weight: bold;
    color: var(--wwDarkBlue);
    padding-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
    border-bottom: 0.5px solid rgb(175,175,175);
}

#generateDrillingScheduleForDPContainer .propertiesCreateEditRow1, #generateDrillingScheduleForDPContainer .propertiesCreateEditRow2{
	border-right: 18px solid rgb(230,230,230);
    border-left: 18px solid rgb(230,230,230);
    background: rgb(220,220,220);
}

#generateDrillingScheduleForDPContainer .propertiesCreateEditRow1{
	padding-top: 20px;
	margin-top: 10px;
}

.fdpActionTypeBtn{
	cursor: pointer;
}

/*
#drilling-schedule-container.tableContainer{
	border-top: none;
}
*/

#fieldDevelopmentPlanTableExcel .propertiesRowFlexCenter{
	/*padding-right: 20px;*/
}

#fieldDevelopmentPlanTableExcel .paginationContainer{
	margin-bottom: 15px;
}

.generateFDP{
	background: rgb(220,220,220);
    border-radius: 4px;
    padding-bottom: 10px;
    padding-top: 10px;
    float: none;
    display: table-cell;
    vertical-align: top;
}

#wellSetWellSelectionFilterPanelContainer .selectedFilterList
, #wellSetWellSelectionFilterPanelContainer .globalFilterList {
	border: 1px solid rgb(190,190,190);
}

#fieldDevelopmentPlanTableExcel .developmentPlanExcelHeaderRow
, #pnaScheduleTableExcel .pnaScheduleExcelHeaderRow{
	height: 30px;
}

#fieldDevelopmentPlanTableExcel .developmentPlanExcelUploadRow
, #pnaScheduleTableExcel .pnaScheduleExcelUploadRow{
	height: 25px;
}



#fieldDevelopmentPlanTableExcel .developmentPlanExcelUploadRow td:first-child
, #fieldDevelopmentPlanTableExcel .developmentPlanExcelHeaderRow th:first-child
, #pnaScheduleTableExcel .pnaScheduleExcelUploadRow td:first-child
, #pnaScheduleTableExcel .pnaScheduleExcelHeaderRow th:first-child{
	min-width: 50px;
}

#development-plan-drilling-schedule .drillingScheduleDynamicFilter{
	background-image: url(/static/images/icons/magnifying-glass.svg);
    background-position: 5px 2px;
    background-repeat: no-repeat;
    padding-left: 25px;
}

/*#development-plan-section-user-messages.userMessageContainer{
	font-size: 14px;
} */

.getNPVcheckboxFDP{
	display: flex;
    align-items: center;
}

.getNPVcheckboxFDP .getNPVLabelStart{
	margin: 0px 10px;
    font-weight: normal;
}

.getNPVcheckboxFDP .getNPVLabelEnd{
	margin: 0px 0px 2px 4px;
	font-weight: normal;
}

.getNPVcheckboxFDP>input{
	margin: 0px;
}

/* start: move to common */
.selectionWidth1{
	width: max-content;
    min-width: max-content;
}

.selectionText1{
	width: 92px;
	min-width: 92px;
}

.selectionText2{
	width: 70px;
	min-width: 70px;
}


/* end: move to common */

.textRadioFDP1{
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
}

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

.numberSelectedFDP{
	padding-left: 10px;
    display: flex;
    align-items: center;
}

.developmentPlanSettingsHeaderText1{
	margin-top: 15px;
	color: var(--wwDarkBlue);
	padding-left: 10px;
	font-size: 13px;
	font-weight: bold;
}

.tableContainer.developmentPlanSettingsTableContainer{
	border: none;
}

.developmentPlanSettingsTableContainer .row{
	margin: 0px;
}

#development-plan-excel-edit-mode-btn.nonEditable span.nonEditable {
    display: block;
}

.developmentPlanExcelUploadRow td input{
    color: var(--darkInLightLightInDark);
    font-size: 10px;
    width: 100%;
    min-width: 100px;
    outline: none;
    text-align: center;
    border: 1px solid var(--inputBorder);
    border-radius: 3px;
    background: var(--inputLightBackground);
    height: 25px;
}
    
.developmentPlanExcelUploadRow td input:hover{
	background-color: var(--inputLightBackgroundHover);
}

/* End: Development Plan */

/* Start: Well Economics */
/*	
#userMessageContainer>div>div{
	background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
	color: #0659a9;
	border-color: rgb(200,200,200);
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    font-family: 'Lato', sans-serif;
    padding-left: 20px;
    padding-right: 40px;
}
*/

.transparentText{
	color: transparent;
}

#wellEconomicsSettingsFrame>div{
	background-color: rgb(225,225,225);
	border-top: solid 1px var(--darkInLightLightInDark);
	border-bottom: solid 1px var(--darkInLightLightInDark);
}

#wellEconomicsSettingsFrame{
	padding-top: 0px;
}

#selectionPanelWellEconomics{
	margin-left: 0px;
	margin-bottom: 7px;
	margin-right: 45px;
	margin-top: 0px;
}

#selectionPanelWellEconomics>div{
	padding-left: 0px;
}

#selectionPanelWellEconomics .dropdownProperties3{
	height: 21px;
}

.dropDownsContainerWellEconomics .multiselectProperties2{
	height: 21px;
}

.vizDataToggleIcon{
	height: 18px;
	cursor: pointer;
}

.sectionHeader  .wellEconomicsIcons{
	text-align: center;
}

.netEconomicsRescaleBtn{
	font-size: 10px;
	font-weight: bold;
	color: var(--wwDarkBlue);
	cursor: pointer;
	padding: 5px;
}

.netEconomicsRescaleBtn:first-child{
	margin-right: 15px;
}

.textRunAnalysis{
	color: white;
	margin-right: 10px;
}

#pageContainerWE #loadingOptions .controlsRow{
	margin-top: 8px;
}

/* End: Well Economics */

/* Start: Financial Statements */

.selectionTextFS{
	width: 150px;
	min-width: 150px;
}

.selectionGenerateFSButton{
	width: 125px;
	min-width: 125px;
	display: flex;
	justify-content: center;
}

.tabularFinancialStatementsContainer{
	background-color: var(--wwSectionContainer);
    border-radius: 3px;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

#view-financial-statements-frame .levelOneMainSelectorDropDown .dropdownProperties3{
	height: 21px;
}

.levelOneMainSelectorDropDown{
    display: flex;
    align-items: center;
    background: var(--wwDarkBackground);
    padding-bottom: 8px;
    padding-right: 60px;
}

.levelOneMainSelectorDropDown .dropdownProperties3{
	height: 21px;
}

#create-or-edit-financial-statements-frame.topPanelUp{
	/*height: calc(100vh - 95px);*/ /* old layout — navbar 40 + #pageContainerFS margin-top 40 + toggle row 15 */
	/* New shell: toggle row 15 + footer 40 = 55px (browser-verified; the
	   button row is collapsed in this state). Footer-hidden growth
	   (+ var(--ww-footer-height)) lives in ww-layout.css section 12. */
	height: calc(100vh - 55px);
	overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 15px;
}

#create-or-edit-financial-statements-frame.topPanelDown{
	/*height: calc(100vh - 165px);*/ /* old layout — navbar 40 + #pageContainerFS margin-top 40 + button row 70 + toggle row 15 */
	/* New shell: button row 70 + toggle row 15 + footer 40 = 125px
	   (browser-verified). Footer-hidden growth (+ var(--ww-footer-height))
	   lives in ww-layout.css section 12. */
	height: calc(100vh - 125px);
	overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 15px;
}

.viewFinancialStatmentsContainer.topPanelUp{
	/*height: calc(100vh - 139px);*/
	/*height: calc(100vh - 159px);*/ /* old layout — create/edit frame (95) + the 64px selector row inside the view frame */
	/* New shell: toggle row 15 + selector row 64 + footer 40 = 119px.
	   Footer-hidden growth (+ var(--ww-footer-height)) lives in
	   ww-layout.css section 12. */
	height: calc(100vh - 119px);
	overflow-x: auto;
    overflow-y: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.viewFinancialStatmentsContainer.topPanelDown{
	/*height: calc(100vh - 229px);*/ /* old layout — create/edit frame (165) + the 64px selector row inside the view frame */
	/* New shell: button row 70 + toggle row 15 + selector row 64 + footer
	   40 = 189px. Footer-hidden growth (+ var(--ww-footer-height)) lives in
	   ww-layout.css section 12. */
	height: calc(100vh - 189px);
	overflow-x: auto;
    overflow-y: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.toggleButtonFinancialStatements.active {
    display: block;
}

.toggleButtonFinancialStatements.inactive {
    display: none;
}

.levelOneButtons .tabTypeSelectorBtn .selectionButtonText, .levelOneButtons .frameSelectorBtn .selectionButtonText, .levelOneButtons .userPageActionTypeBtn .selectionButtonText{
	color: white;
}

.levelOneButtons .selectionButton:hover{
	background: rgb(60,60,60);
}

.levelOneButtons .selectionButton.active{
	background: var(--wwSelectionButtonSelected);
}

.levelOneButtons .tabTypeSelectorBtn.active .selectionButtonText, .levelOneButtons .frameSelectorBtn.active .selectionButtonText, .levelOneButtons .userPageActionTypeBtn.active .selectionButtonText{
	color: black;
}

.levelOneButtons div.selectionButton:not(:last-child){
	border-right: 1px solid white;
}


.levelOneButtons .selectionButtonRow{
	height: 70px;
    background: var(--wwDarkBackground);
}

/*
.selectionButtonRow.borderBottomBlueLine{
	background: linear-gradient(var(--wwDarkBlue), var(--wwDarkBlue)) bottom /98% 1px no-repeat, var(--wwDarkBackground);
}
*/

.selectionButtonRow.borderBottomBlueLine{
	border-bottom: solid 1px var(--wwDarkBlue);
}

.levelOneButtons .selectionButton{
	height: 60px;
	background: var(--filteringGroupingPanelColor);
}

.toggleTopContainerColumn{
	display: flex;
	justify-content: flex-end;
	padding-right: 15px;
}

.highlightFirstLevelFS{
	font-size: 18px;
	color: rgb(90,90,90);
	font-weight: bold;
}

.highlightSecondLevelFS{
	font-size: 9px;
	color: rgb(90,90,90);
	font-weight: bold;
	text-align: center;
	/*height: 25px;*/
}

.highlightFirstLevelFS.negativeNumber{
	color: red;
}

.heroMetricFS{
	display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 125px;
}

.heroMetricsContainerFS{
	display: flex;
	align-items: center;
	/*height: 80px;*/
	justify-content: space-around;
	margin-top: 10px;
}

#summaryFinancialStatements .sectionContainer{
	padding-top: 8px;
    padding-bottom: 8px;
}

#existingContainerFS2 .dropdownSelectorToShowSection{
	margin-top: 15px;
	margin-bottom: 0px;
	padding: 15px 0px 15px 0px;
}

#existingContainerFS2 .sectionContainer{
	padding-bottom: 15px;
}

select#select-active-well-set-fs option[data-ready-well-count="0"]
, select#detailed-economics-well-set-dropdown option[data-ready-well-count="0"]{
	background: rgb(255,164,164);
}

#displaySettingsFS{
	background: rgb(220,220,220);
	border-right: 15px solid rgb(230,230,230);
	border-left: 15px solid rgb(230,230,230);
	padding-bottom: 15px;
}

.units-label{
	font-size: 11px;
	font-style: italic;
	padding-top: 5px;
	padding-left: 10px;
	font-weight: normal;
}

#add-risk-profiles-frame, #add-corporate-items-frame, #add-hedges-frame, #add-investments-frame{
	margin-top: 10px;
}

.buttons-add-remove-frames{
	display: flex;
	align-items: center;
	margin-top: 15px;
	margin-bottom: 15px;
}

.sectionToggler.inactive .commandButtons, .sectionToggler.inactive .commandButtons:focus{
	background: rgb(100,100,100);
	border: none;
	height: 22px;
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sectionToggler.inactive .commandButtons:hover{
	background: rgb(110,110,110);
}

.sectionToggler.active .commandButtons, .sectionToggler.active .commandButtons:focus{
	background: rgb(0,128,0);
	border: none;
	height: 22px;
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sectionToggler.active .commandButtons:hover{
	background: rgb(0,135,0);
}

.sectionToggler.active .commandButtons:focus
,.sectionToggler.inactive .commandButtons:focus{
	border: 1px solid rgb(0, 117, 255);
}

.sectionToggler .commandButtons.inactive>span, .sectionToggler .commandButtons.active>span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

div.sectionToggler.active img.active, div.sectionToggler.inactive img.inactive{
	display:block;
	padding-right: 0px;
}

div.sectionToggler.inactive img.active, div.sectionToggler.active img.inactive{
	display:none;
}

.financialStatementsTableHeaderText{
	font-size: 12px;
	font-weight: bold;
	padding-left: 5px;
}

#balanceSheetDerivation div.ww-input-group input{
	min-width: 100px;
}

.netEconomicsRescaleBtn, .returnsRescaleBtn{
	font-size: 10px;
	font-weight: bold;
	color: var(--wwDarkBlue);
	cursor: pointer;
	padding: 5px;	
}

.netEconomicsRescaleBtn, .returnsRescaleBtn{
	margin-right: 10px;
}

.netEconomicsRescaleBtn.active, .returnsRescaleBtn.active{
	color: var(--wwDarkBlue);
}

.netEconomicsRescaleBtn.inactive, .returnsRescaleBtn.inactive{
	color: grey;
}

.timelineTextFS{
	font-size: 14px;
	color: white;
	padding-left: 7px;
	font-weight: bold;
	width: 80px;
	min-width: 80px;
}

.selectionPanelControlsContainerFS{
	height: 35px;
	/*width: fit-content;*/
	width: 500px;
	background: rgb(125,125,125);
	border-radius: 3px;
	padding: 5px;
	display: flex;
	align-items: center;
    justify-content: space-evenly;
	margin-left: 15px;
}

.frequencyOptionsText1{
	color: white;
	font-size: 12px;
	font-weight: bold;
}

.fsCountByFrequency{
	color: white;
	font-size: 10px;
	font-weight: normal;
}

.selectionPanelControlsFS, .selection-panel-controls-sa{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px 15px;
}

.selectionPanelControlsFS>div>span, .selection-panel-controls-sa>div>span{
	margin-right: 10px;
	cursor: pointer;
}

.selectionPanelFrequencyFS
, .selectionPanelProductFS
, .selection-panel-controls-frequency-sa{
	width: max-content;
	display: flex;
	align-items: center;
	justify-content: center;
}

.selectionPanelTimelineFS{
	width: 200px;
	min-width: 200px;
}

.selection-panel-controls-timeline-sa{
	width: 200px;
	min-width: 200px;
}

.sectionSwitchesContainerFS{
	display: flex;
	align-items: center;
	justify-content: center;
}
/* End: Financial Statements */	

/* START:  Data Streams */

.dataStreamsAlert>div>div{
	background-image: linear-gradient(to bottom,#d2dce6 0,#d2dce6 100%);
  color: #0659a9;
  border-color: rgb(200,200,200);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: 8px 35px 8px 20px;
  word-spacing: 1px;
}

.dataStreamsAlert .alert-dismissible button{
	top: 0px;
}

.dataStreamsAlert .alert-dismissible button:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

/* END:  Data Streams */

/* Start: Investments Page */
#summaryInvestments .sectionContainer{
	padding-top: 8px;
    padding-bottom: 8px;
}

.incremental-items-subsections{
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 0px;
	padding: 0px;
	padding-bottom: 20px;
	border-bottom: solid rgb(220,220,220);
}

#equity-investment-dividends .inputProperties[type="checkbox"]{
	height: 15px;
}

.incremental-items-subsections>div{
	padding: 0px;
}

#working-interest-equity-investment-frame .tableContainer{
	border: none;
}

#wi-investment-selected-wells-table .WIInvestmentSelectedWellRow.ineligibleWell{
	background: #fdcdcd;
}

#selected-investments-section-header.subSectionRow4{
	margin-top: 25px;
}

#selectedInvestment .informationIcons{
	padding-left: 10px;
}

.serialNumberTextTemp{
	font-size: 12px;
	font-weight: bold;
	width: 30px;
}

#investment-capex-contribution .formRadio2{
	padding-top: 0px;
}

#createInvestmentsContainer .repeatablePanel1{
	margin-top: 0px;
	margin-bottom: 10px;
}

.sale-option .formRadio2{
	margin-bottom: 10px;
}

.booleanOperator{
	display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    min-width: 40px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    padding: 2px;
    cursor: pointer;
}

.reversionHeaderText{
	font-size: 13px;
	font-weight: bold;
	margin-top: 20px;
}

/*START: Investment Summary Table*/
/*Column Widths:
1. checkboxColumnWidth: 50px
2. Investment Name: 250px;
3. Investment Type: 120px;
4. Input Type: 150px;
5. Input Name: 150px;
*/

.investmentsSummaryHeaderRow th:nth-child(2){
	min-width: 250px;
}

.investmentsSummaryHeaderRow th:nth-child(3){
	min-width: 120px;
}

.investmentsSummaryHeaderRow th:nth-child(4){
	min-width: 150px;
}

.investmentsSummaryHeaderRow th:nth-child(5){
	min-width: 150px;
}

.investmentsSummaryHeaderRow th:nth-child(-n+5){
	z-index: 4;
}

#investments-summary-table tr:not(.investmentsSummaryHeaderRow) td:nth-child(-n+5){
	z-index: 3;
	position: sticky;
	background: inherit;
}

.investmentsSummaryHeaderRow th:nth-child(1), #investments-summary-table tr:not(.investmentsSummaryHeaderRow) td:nth-child(1){
	left: 0px;
}

.investmentsSummaryHeaderRow th:nth-child(2), #investments-summary-table tr:not(.investmentsSummaryHeaderRow) td:nth-child(2){
	left: 50px;
}

.investmentsSummaryHeaderRow th:nth-child(3), #investments-summary-table tr:not(.investmentsSummaryHeaderRow) td:nth-child(3){
	left: 300px;
}

.investmentsSummaryHeaderRow th:nth-child(4), #investments-summary-table tr:not(.investmentsSummaryHeaderRow) td:nth-child(4){
	left: 420px;
}

.investmentsSummaryHeaderRow th:nth-child(5), #investments-summary-table tr:not(.investmentsSummaryHeaderRow) td:nth-child(5){
	left: 570px;
}

.disableCashSweepCheckboxContainer{
	display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.disableCashSweepCheckboxContainer input{
	width: auto;
}

#investments-summary-table .investmentsSummaryRow td:nth-child(2) {
    text-align: left;
    padding-left: 20px;
}

/*END: Investment Summary Table*/

.returnValueContainer:first-child{
	margin-right: 20px; 	
}

/* Table format 7:  Working Interest Equity + Draws/Payouts */

.tableContainer .tableFormat7{
	font-size: 12px;
	background-color: transparent;
	padding-left: 10px;
}

.tableContainer .tableFormat7 th{
	font-size: 12px;
	height: 25px;
	text-align: left;

	position: sticky;
	border-collapse: collapse;
	white-space: nowrap;

	top: 0px;
	z-index: 2;
}

.tableContainer .tableFormat7 td{
	font-size: 12px;
	text-align: left;
	padding-top: 2px;
	padding-bottom: 2px;
	white-space: nowrap;
	height: 30px;
}

.tableFormat7.sticky{
	border-collapse: separate;
}

.tableFormat7.sticky th, .tableFormat7.sticky td{
	border: none;
}

.tableFormat7.sticky tr td, .tableFormat7.sticky tr th{
    border-bottom: 1px solid white;
    border-right: 1px solid white;		
}

#wi-investment-filtered-wells-table .WIInvestmentFilteredWellRow.isIdentical
, #wi-investment-selected-wells-table .WIInvestmentSelectedWellRow.isIdentical{
	background: #cfe8bf;
}

#working-interest-ownership-frame .tableContainer .tableFormat7 th.ownershipFieldWidth
,#working-interest-ownership-frame .tableContainer .tableFormat7 td.ownershipFieldWidth{
	max-width: 250px;
	width: 250px;
}


.WIContributionTableContainer.tableContainer .tableFormat7 th
,.WIContributionTableContainer.tableContainer .tableFormat7 td 
,.WIReversionTableContainer.tableContainer .tableFormat7 th
,.WIReversionTableContainer.tableContainer .tableFormat7 td {
	min-width: 125px;
}

.WIOwnershipTableContainer.tableContainer .tableFormat7 .initialOwnershipWI>div{
	width: 75px;
}

.hurdleBoolean{
	display: flex;
	align-items: center;
	justify-content: center;
}

.hurdleBoolean .booleanOperator{
	width: 50px;
	max-width: 50px;
}

#working-interest-equity-investment-frame .tableFormat7 td{
	padding-right: 20px;
}

#working-interest-equity-investment-frame .inputProperties{
	height:25px;
	font-size: 12px;
	color: var(--darkInLightLightInDark);
	padding-right: 20px;
	padding-left: 5px;
	padding-top:0px;
	padding-bottom: 0px;
	width:100%;
}

.WIOwnershipTableContainer.tableContainer .tableFormat7 td.tier1label{
	font-weight: bold;
	width: 75px;
	min-width: 75px;
}

#wi-investment-contribution-table .affectsReversion.inputProperties{
	height: 15px;
}

#equity-investment-dividends .tableContainer{
	border: none;
}

.dataPresenceIndicatorMessage{
	color: grey;
    border: 1px solid rgb(200, 200, 200);
    text-align: center;
    padding: 20px;
}

#common-equity-historical-data-table-container-parent{
	margin-top: 20px;
	padding: 0px 15px;
}

#common-equity-historical-data-table-container.tableContainer{
	border: none;
}

#common-equity-historical-data-table-container .labelProperties{
	font-weight: bold;
}

.equity-investment-tranche-row div.ww-input-group.fixed-width.stream-segment-element-fixed-width-percent-value
, .equity-investment-redemption-row div.ww-input-group.fixed-width.stream-segment-element-fixed-width-percent-value{
	width: auto;
	margin-right: 0px;
}

#common-equity-on-investments-reversions-header-row{
	height: 30px;
}

tr.cew-reversion-tier-row td{
	text-align: center;
	min-height: 30px;
	padding: 10px;
}

td.move-icon-cell {
	text-align: center;
}

#common-equity-historical-data-table-container-parent[data-is-data-present="YES"] .tableContainer
, #common-equity-historical-data-table-container-parent[data-is-data-present="NO"] .dataPresenceIndicatorMessage{
	display: block;
}

#common-equity-historical-data-table-container-parent[data-is-data-present="NO"] .tableContainer
, #common-equity-historical-data-table-container-parent[data-is-data-present="YES"] .dataPresenceIndicatorMessage{
	display: none;
}

/* START: Common Equity Reversion styling (used for Common Equity Waterfall CI and the Reversion section on Common Equity Investment) */
.commonEquityWaterfallReversionTableContainer.tableContainer
{
	min-height: 300px;
	margin-bottom: 20px;
}

.cew-tier-move-row-icon{
	cursor: move;
    font-size: 16px;
    color: grey;
}

.cew-reversion-trigger{
	display: flex;
	align-items: center;
	min-width: 300px;
	min-height: 25px;
	margin-bottom: 5px;
}

.cew-reversion-trigger select.cew-reversion-trigger-type{
	width: 160px;
	margin-right: 10px;
}

.cew-reversion-trigger .cew-reversion-trigger-value-input-group{
	min-width: 200px;
	margin-right: 10px;
}

.cew-reversion-trigger .cew-reversion-trigger-value-input-group .suffixSpan{
	margin-right: 0px;
}

.sortable-cew-reversion-tiers-placeholder{
	background: var(--sortablePlaceholder);
}


/* START: Making the first two columns in the Reversion table sticky */
#common-equity-on-investments-reversions-table #common-equity-on-investments-reversions-header-row th:nth-child(2){
	min-width: 100px;
}

#common-equity-on-investments-reversions-table #common-equity-on-investments-reversions-header-row th:nth-child(-n+2){
	z-index: 4;
}

#common-equity-on-investments-reversions-table tr:not(#common-equity-on-investments-reversions-header-row) td:nth-child(-n+2){
	z-index: 3;
	position: sticky;
	background: rgb(235,235,235);
}

#common-equity-on-investments-reversions-table #common-equity-on-investments-reversions-header-row th:nth-child(1)
, #common-equity-on-investments-reversions-table tr:not(#common-equity-on-investments-reversions-header-row) td:nth-child(1){
	left: 0px;
}

#common-equity-on-investments-reversions-table #common-equity-on-investments-reversions-header-row th:nth-child(2)
, #common-equity-on-investments-reversions-table tr:not(#common-equity-on-investments-reversions-header-row) td:nth-child(2){
	left: 60px;
}
/* END: Making the first two columns in the Reversion table sticky */


.cew-reversion-trigger-combination-method
, .cew-reversion-value-type
, .cew-reversion-target-type
, .cew-multi-target-handling-method
, .cew-reversion-targets{
	min-width: 130px;
}
/* END: Common Equity Reversion styling (used for Common Equity Waterfall CI and the Reversion section on Common Equity Investment) */


.tableFormatEquityReversions{
	font-size: 11px;
	width: 100%;
	background-color: transparent;
	border-color: white;
	color: black;
	font-weight: normal;
}

.tableFormatEquityReversions td{
	border: 1px solid white;
	text-align: left;
	padding-right: 8px;
	padding-left: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.tableFormatEquityReversions th{
	border: 1px solid white;
	background-color: rgb(190,190,190);
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 8px;
	padding-left: 8px;
	min-width: 60px;

	position: sticky;
	border-collapse: collapse;
	top: 0px;
	z-index: 2;
}

.tableFormatEquityReversions.sticky{
	border-collapse: separate;
}

.tableFormatEquityReversions.sticky tr td, .tableFormatEquityReversions tr th{
	border-bottom: 1px solid white;
	border-right: 1px solid white;
}

.tableContainer.otherOptionsTableContainer{
	border: none;
}

/* End: Investments Page */


/* Start: User Page */

.editIcon{
	height: 15px;
	padding-left: 5px;
}

/*Form Element Container User Page*/

.contentContainer{
	margin-top: 50px;
}

.formElementContainerUserPage{
	display:flex;
	align-items: center;
}

.formElementContainerUserPage>input{
	width:100%;
	height: 25px;
	border-color: rgb(200,200,200);
	border-radius: 3px;
	background-color: rgb(250,250,250);
	border-width:1px;
	padding-left: 10px;
	font-size:13px;
}

.formElementContainerUserPage>input:focus{
	outline: none;
    border: 1px solid rgb(0, 117, 255);
}

.formElementContainerUserPage>input:hover{
	background-color: rgb(240,240,240);
}

.formElementContainerUserPage>input:disabled{
	background-color: rgb(230,230,230);
	cursor: not-allowed;
}

.changePasswordButton.commandButtons{
	width: 100%;
	margin: 0px;
}

.passwordConfirmationSuccess, .confirmationSuccessText{
	color: green;
}

.passwordConfirmationSuccess, .passwordConfirmationFailure{
	font-size: 15px;
	padding-right: 10px;
}

.confirmationSuccessText, .confirmationFailureText{
	font-size: 10px;
	font-weight: bold;
}

.passwordConfirmationFailure, .confirmationFailureText{
	color: red;
}

/* End: User Page */ 

/* Start: Signup page */

/*Form Element Container User Page*/
.formElementContainerSignupPage{
	display:flex;
	align-items: center;
}

.formElementContainerSignupPage>input{
	width:100%;
	height: 25px;
	border-color: rgb(200,200,200);
	border-radius: 3px;
	background-color: rgb(250,250,250);
	border-width:1px;
	padding-left: 10px;
	font-size:13px;
}

.formElementContainerSignupPage>input:focus{
	outline: none;
    border: 1px solid rgb(0, 117, 255);
}

.formElementContainerSignupPage>input:hover{
	background-color: rgb(240,240,240);
}

.formElementContainerSignupPage>input:disabled{
	background-color: rgb(230,230,230);
	cursor: not-allowed;
}

/* End: signup page */

/* Start: Super User Page */

.projectAccessIcon{
	height: 18px;
	margin-left: 8px;
}

#projectAccess .tablePropertiesIcon{
	margin-right: 15px;
	cursor: pointer;
}

#projectAccessTable .projectAccessIcon{
	cursor: pointer;
}

.projectPermissionIcon, .projectShareIcon{
	height: 18px;
	cursor: pointer;
	margin-left: 8px;
}


.legendIcons{
	color: black;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

.tableCellSpacing td{
	height: 35px;
}

#licenseSummary .tableContainer .passwordCell{
	width: 100px;
	text-align: center;
}

#pageContainerSuperUser .tableFormat{
	font-size: 11px;
}


/* End: Super User Page */ 


/* Start: Color Palette Formatting */

/* Table Format 4 - Color Palette Section */
.tableFormat4{
	font-size: 11px;
	width: 100%;
	background-color: transparent;
	color: black;
	font-weight: normal;
	margin-bottom: 10px;
	border-top: solid rgb(200,200,200);
	border-right: solid rgb(200,200,200);
	border-bottom: solid rgb(200,200,200);
	border-left: solid rgb(200,200,200);
}

.tableFormat4 td{
	text-align: center;
	padding-right: 8px;
	padding-left: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.tableFormat4 th{
	border: none;
	background-color: transparent;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 8px;
	padding-left: 8px;
	min-width: 60px;
}

.defaultColorPaletteRow{
	padding: 0px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.defaultColorPalette{
	height: 20px;
	width: 30px;
	border-radius: 3px;
	background-color: none;
	border-color: white;
	border-style: solid;
	border-width: thin;
	margin: 0px 0px;
}

input.defaultColorPalette[type="color"] {
	-webkit-appearance: none;
	border: none;
	width: 30px;
	height: 20px;
}

input.defaultColorPalette[type="color"]:focus {
	outline-color: rgb(200,200,200);
}

input.defaultColorPalette[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input.defaultColorPalette[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 3px;
}

.colorPaletteViz{
	height: 10px;
	width: 10px;
	border-radius: 1px;
	background-color: transparent;
	border-color: white;
	border-style: solid;
	border-width: thin;
	margin: 0px 0px;
}

input.colorPaletteViz[type="color"] {
	-webkit-appearance: none;
	padding: 0px;
	border: 1px solid white;
	width: 15px;
	height: 13px;
}

input.colorPaletteViz[type="color"]:focus {
	outline-color: rgb(200,200,200);
}

input.colorPaletteViz[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input.colorPaletteViz[type="color"]::-webkit-color-swatch {
	border: none;
	border-radius: 0px;
}

#CSContainer .formElementRow2{
    border-right: 8px solid rgb(230,230,230);
    border-left: 8px solid rgb(230,230,230);
}		

/* End: Color Paletter Formatting */		


/*Start: bulkExpandCollapseControl*/		



/*End: bulkExpandCollapseControl*/

/* Start: Project Builder*/
#pageContainer{
	background: rgb(245,245,245);
}


/* End: Project Builder*/

/* Start: Project Management*/

#section-project-summary .sectionContainer{
	padding-top: 8px;
	padding-bottom: 8px;
}

.project-summary-header-row>th{
	font-size: 12px;
	font-weight: bold;
}

.project-summary-project-row{
	padding:2px;
	text-align: left;
	border: 0.5px solid white;
}

.project-summary-project-row .project-name{
	cursor: pointer;
	color: var(--projectsText);
	font-weight: 550;
}

.project-summary-project-row:hover{
	background: var(--hoverRowBg);
}

.project-summary-project-row.selected{
	background: var(--selectedRowBg);	
}

.project-summary-project-row{
	font-size: 12px;
	color: var(--darkInLightLightInDark);
	background-color: transparent;	
}

#tableMargins{
	padding-right: 30px;
	padding-left: 30px;
}

.checkboxColumnWidth{
	text-align: center;
    width: 50px;
}

.project-id{
	width: 100px;
	text-align: center;
}

.project-name{
	/* Fixed width so the flexible Project Description column can take the remaining table width.
	   Project names are up to 100 characters, which cannot fit on one line at 500px (12px font),
	   so long names WRAP onto extra lines instead of being clipped */
	width: 500px;
	max-width: 500px;
}

.tableFormatPM tr th.project-name
, .tableFormatPM tr td.project-name{
	text-align: left;
	/* Wrap at word boundaries (overrides the base word-break: break-all rule above) so names
	   break across lines at spaces, never mid-word */
	word-break: normal;
}

/* Project Description column: the flexible column (all other columns are fixed width), so it
   takes the remaining table width. The full description (up to 1000 characters) is displayed and
   wraps onto multiple lines. Left-aligned to match the Project Name column. The selector carries
   .tableFormatPM tr th/td so it overrides the center-alignment and word-break rules above. */
.tableFormatPM tr th.project-desc
, .tableFormatPM tr td.project-desc{
	width: auto;
	text-align: left;
	/* Wrap at word boundaries (overrides the base word-break: break-all rule above) so
	   truncated descriptions break across lines at spaces, never mid-word */
	word-break: normal;
}

/* Fixed layout: sizes columns from the header row, so long wrapped descriptions can never push
   the table wider than its container. The fixed-width columns keep their widths and the
   description column (the only width:auto column) takes the remaining space. */
#existing-projects-summary-table.tableFormatPM{
	table-layout: fixed;
}

/* The Project ID header cell carries class .project-code (the data cells carry .project-id,
   whose 100px width has no effect in fixed layout); it needs its own width */
.project-code{
	width: 100px;
}

.last-modified-date, .last-modified-by{
	width: 150px;
}

.project-start-date{
	width: 110px;
}

.project-size, .project-well-count{
	width: 110px;
}

.textAreaProperties{
	height:100%;
	display:flex;
	align-items: center;	
}

.textAreaProperties>textarea{
	width:100%;
	border-radius: 3px;
	background-color: var(--inputLightBackground);
	padding-left: 10px;
	font-size:12px;
	border: 1px solid var(--inputBorder);
}

.textAreaProperties>textarea:hover{
	background: var(--inputLightBackgroundHover);
}

.textAreaProperties>textarea:focus{
	outline: none;
	border: 1px solid rgb(0, 117, 255);
}

#create-or-edit-project-start-date{
	min-width: 80px;
}

.tableFormatPM{
	font-size: 12px;
	width: 100%;
	background-color: transparent;
	border-color: white;
}

.tableFormatPM td, .tableFormatPM th{
	border-bottom: 0.5px solid var(--lightInLightDarkInDark);
	text-align: center;
	padding-right: 8px;
	padding-left: 8px;
	padding-top: 5px;
	padding-bottom: 5px;
	word-break: break-all;
}

#existing-projects-summary-table.tableFormatPM tr th{
	background-color: var(--tableHeaderBg);
	color: var(--darkInLightLightInDark);
	height: 35px;
	padding-top: 4px;
	padding-bottom: 4px;
	position: sticky;
	border-collapse: collapse;
	white-space: nowrap;
	top: 0px;
	z-index: 2;
	box-shadow: none;
}

/* No bottom border on the last row, so there is no stray line under the table */
#existing-projects-summary-table.tableFormatPM tr:last-child td{
	border-bottom: none;
}

/* 2nd and 3rd columns */
/*
.tableFormatPM tr th:nth-child(n+2):nth-child(-n+3)
, .tableFormatPM tr td:nth-child(n+2):nth-child(-n+3){
	text-align: left;
}
*/

.tableFormatPM.sticky{
	border-collapse: separate;
}

.tableFormatPM th:after{
    content:'';
    position:absolute;
    left: 0;
    bottom: 0px;
    width:100%;
    /*border-bottom: 1px solid rgb(180,180,180);*/
}

#section-project-summary .tableContainer{
	overflow-x: auto;
	overflow-y: auto;
	border: none;
}

.separatorIconProjectManagement{
	height: 18px;
	margin-left: 10px;
}

#section-project-summary .textWithImageButton img{
	height: 16px;
}

#section-project-summary .unclickable-button
, #section-project-summary .unclickable-button:active
, #section-project-summary .unclickable-button:focus{
	cursor: auto;
	outline: none;
	box-shadow: none;
}


/* Temporarily over-riding margin set by tablePropertiesIcon */
.table-properties-button-wrapper img{
	margin: 0px;
	padding-bottom: 3px;
}

.button-group-row-input-wrapper{
	display: flex;
	align-items: center;
	padding: 15px 25px;
	width: max-content;
}

#share-project-project-management li:not(:last-child)
, #clone-project-project-management li:not(:last-child) {
	border-bottom: 1px solid rgb(225,225,225);
}

.button-group-row-input-wrapper input{
	padding-right: 15px;
	margin-right: 10px;
	padding-left: 15px;
	font-size: 12px;
	color: black;
	text-shadow: none;
}

.button-group-row-input-wrapper input:focus{
	outline: none;
	border: 1px solid var(--focusColor1);
	box-shadow: 0px 0px 3px var(--focusColor1);
}

.button-group-row-input-wrapper .button-group-dropdown-text{
	font-size: 12px;
	color: black;
	margin-right: 10px;
	min-width: 175px;
	display: flex;
}

.button-group-row-input-wrapper .commandButtons{
	margin-right: 10px;
}

.clone-external-project-label-text{
	font-size: 12px;
	color: black;
	margin-right: 15px;
	width: 90px;
}

.button-group-clone-external-project-subrow{
	display: flex;
	align-items: center;
	padding: 10px;
}

/* End: Project Management*/

/* Start: Visualization*/

#visualizationChart .dropdownProperties4{
	width: 100%;
}

.vizContainer.container-fluid{
	padding-right: 0px !important;
	padding-bottom: 0px !important;
}

.vizMainRow{
	margin-right: 0px;
	position: relative;
}

.vizLayoutRow{
	border-top-color: rgb(220,220,220);
	border-top-style: solid;
	margin-top: 15px;
	margin-right: 0px;
}

.colRow1{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0px;
	padding-top: 10px;
}

.mainLeftColumn{
	border-right-style: solid;
	border-right-color: black;
	border-right-width: 5px;
	height: calc(100vh - 80px);
	overflow-y: scroll;
}

.mainRightColumn{
	/*position: absolute;*/
	right: 0;
	background-color: rgb(220,220,220);
	height: calc(100vh - 80px);
	overflow-y: scroll;
	padding: 0px 5px;
	overflow-x:scroll;
}

.propertiesTabText{
	font-size: 13px;
	color: black;
	font-weight: bold;
	padding-top: 10px;
	text-align: center;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.pencilIcon{
	height: 15px;
}

.crossIcon{
	height: 15px;
	cursor: pointer;
}

.plusArrowIcon{
	height: 20px;
	cursor: pointer;
}

.plusIcon{
	height: 75px;
}

.spannerIcon{
	height: 20px;
}

.playIcon{
	height: 10px;
	padding-right: 5px;
}

.arrowIcons{
	height: 10px;
	padding-right: 5px;
}

.arrowIconsGlyph{
	font-size: 20px;
	cursor: pointer;
}

.arrowIconsGlyph:focus{
	outline: none;
	border-bottom: 1px solid var(--focusColor1);
	box-shadow: 0px 4px 3px -3px var(--focusColor1);
}

.layoutIcon{
	height: 75px;
	cursor: pointer;
}

.vizUnit{
	padding: 0px 5px;
}

.vizHeaderRow{
	height: 25px;
	background-color: var(--wwDarkBlue);
	color: white;
	margin: 0px 0px;
	display: flex;
	align-items: center;
	border-radius: 5px;
	justify-content: space-between;
}

.vizChartRow{
	height: 250px;
	margin: 10px 0px;
	display: flex;
	align-items: center;
}

.vizHeaderRow>div{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vizHeaderRow>div>div{
	display: flex;
	align-items: center;
}

.vizAnnotationRow{
	min-height: 25px;
	margin: 10px 10px;
	border-radius: 3px;
	display: flex;
	align-items: center;
}

.addChartButton{
	min-height: 250px;
	width: 100%;
	background-color: rgb(220,220,220);
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.lastRow{
	padding: 30px 0px;
}

.vizPropertiesToggle{
	background-color: black;
	height: 30px;
	width: 32px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mainRightBorder{
	margin-right: 0px;
	margin-left: 0px;
}

.rightRow2{
	border-bottom-color: grey;
	border-bottom-style: solid;
	border-bottom-width: thick;
	margin-bottom: 10px;
}

.propertiesPanel{
	padding: 0px 0px;
}

.propertiesPanelRow{
	display: flex;
	align-items: center;
	padding-top: 2px;
	padding-bottom: 2px;
}

.propertiesPanelBorder{
	border-bottom-color: white;
	border-bottom-style: solid;
	border-bottom-width: thin; 
	padding-top: 5px;
}

.propertiesPanelBorderTop{
	border-top-color: white;
	border-top-style: solid;
	border-top-width: thin; 
	padding-top: 5px;
	margin-top: 5px;
	margin-left: 2px;
	margin-right: 2px;
	cursor: pointer;
}

.propertiesPanelBorderTop>div{
	padding-left: 0px;
}

.propertiesPanelBorderGap{
	padding-top: 5px;
}

.propertiesPanelTitle{
	font-size: 11px;
	padding-left: 33px;
	padding-right: 2px;
}

.propertiesPanelColor{
	padding-left: 33px;
	padding-right: 2px;
}

.panelColorDisplay{
	height: 10px;
	width: 10px;
	background-color: black;
	border-color: white;
	border-style: solid;
	border-width: thin;
}

.propertiesPanelColor2{
	padding: 0px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.panelColorDisplay2{
	height: 10px;
	width: 10px;
	background-color: black;
	border-color: white;
	border-style: solid;
	border-width: thin;
	margin: 0px 0px;
}

.propertiesPanelTitle2{
	font-size: 11px;
	font-weight: bold;
	color: rgb(234, 88, 22);
	cursor: pointer;
	padding-left: 3px;
}

.propertiesPanelContainer{
	font-size: 11px;
	padding-right: 22px;
	padding-left: 2px;
}

.panelCheckbox{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 0px;
	font-size: 16px;
	transform: scale(1.5);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	color: white;
}

.panelCheckbox>input{
	height: 10px;
	width: 10px;
	margin: 0px 0px;
}

.panelArrowButtons{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
}

.panelTextArea{
	height:100%;
	display:flex;
	align-items: center;
	padding: 0px;
	padding-right: 22px;	
}

.panelTextArea>textarea{
	width:100%;
	border-radius: 3px;
	background-color: rgb(245,245,245);
	border-width:1px;
	padding-left: 10px;
	font-size:11px;
	border-bottom-style: hidden;
	border-right-style: hidden;
}

.panelTextArea>textarea:focus{
	outline: none;
	border: 1px solid rgb(0, 117, 255);
}

.panelNavigation{
	list-style: none;
	display: flex;
	justify-content: space-around;
	padding: 0px;
	padding-top: 0px;
	margin:0px;
	margin-bottom: 2px;
}

li.propertiesTab.inactive{
	color: var(--wwDarkOrange);
	font-size: 12px;
	text-shadow: none;
	margin:0px 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 15px;
	padding-left: 15px;
	text-decoration: none;
	font-weight: bold;
	transition: .3s;
	font-family: 'Lato', sans-serif;
	cursor: pointer;
}

li.propertiesTab.active{
	color: var(--wwDarkOrange);
	background-color: rgb(190,190,190);
	font-size: 12px;
	text-shadow: none;
	margin:0px 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 15px;
	padding-left: 15px;
	text-decoration: none;
	font-weight: bold;
	transition: .3s;
	font-family: 'Lato', sans-serif;
}

.vizRowControls{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: 30px; 
}

.vizRowControls img{
	padding-left: 10px;
}

.layoutSelectRow{
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-top: 5px;
	padding-bottom: 50px;
}

.layoutText{
	font-size: 16px;
	text-align: center;
	color: grey;
	padding-bottom: 10px;
	padding-top: 5px;
}

.chartIcon{
	height: 20px;
	cursor: pointer;
	margin-right: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.dropInSampleChart{
	width: 300px;
	height: 250px;
}

.rightRow3{
	text-align: center;
	margin-bottom: 15px;
	background-color: rgb(210,210,210);
	border-radius: 5px;
	line-height: 32px;
}

.rightRow3>button{
	height: 22px;
	padding-top: 0px;
	padding-bottom: 0px; 
}

.predefinedChartsDescription{
	margin: 0px 2px;
	border-top: solid 1px white;
	padding-top: 10px;
	padding-bottom: 10px;
}

.predefinedChartsDescription:hover{
	background-color: rgb(210,210,210);
	cursor: pointer;
}

.predefinedChartsDescription:active{
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.predefinedChartsDescriptionHeader{
	font-size: 13px;
	font-weight: bold;
}

.predefinedChartsDescriptionText{
	font-size: 12px;
}

.editChartBtn{
	cursor: pointer;
}

/* End: Visualization*/


div[hidden]{
  display:none;
}

/* START: Styling for the Downloadable Response Container */
.downloadableResponseDownloadResponseBtn{
	height: 1.5em;
	cursor: pointer;
	margin-right: 10px;
}

.responseUtilitiesContainer{
	display: flex;
	justify-content: end;
}

#downloadable-response-container .multiMessageContainer{
	margin-bottom: 30px;
}
/* END: Styling for the Downloadable Response Container */