@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;	
	}	

	/* 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(240,240,240);
	--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 */
}

/*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%);;
	}

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

	.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{
	font-family: "Courgette";
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	width: 15px; 
	height: 15px;
	padding-top: 1px;
	border-radius: 100%;
	font-size: 9px;
	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;
}

.tooltipContainerSmall{
	font-family: "Courgette";
	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{
	font-family: "Courgette";
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	width: 15px;
	height: 15px;
	padding-top: 1px;
	border-radius: 100%;
	font-size: 9px;
	font-weight: bold;
	background: rgb(50,50,50);
	color: white;
	margin-left: 5px;
	box-shadow: 0px 1px 1px #000000, inset 0px 1px 1px #a6a6a6;
	cursor: help;
}

.tool-tip-and-label-container{
	display: flex;
	flex-direction: row;
	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;
}

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;*/
}

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

.userMessageContainer .alert.alert-danger{
	background-color: #f2dede;
	background-image: none;
	font-size: 1.1em;
}

.userMessageContainer .alert.alert-warning{
	background-color: #fcf8e3;
	background-image: none;
	font-size: 1.1em;
}

.userMessageContainer .alert.alert-success{
	background-color: #c8e5bc;
	background-image: none;
	font-size: 1.1em;
}

.userMessageContainer .alert.alert-info{
	background-color: #b9def0;
	background-image: none;
	font-size: 1.1em;
}

.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
, #superUserContainer .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: pink !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;
		border-color: rgb(200,200,200);
		background-color: rgb(250,250,250);
		border-width:1px;
	}

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

	.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;
	}

/* 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;
	    border-color: transparent;
	    border-radius: 3px;
	    background-color: white;
	    border-width: 1px;
	    padding-left: 5px;
	    padding-right: 5px;
	    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: rgb(250, 250, 250);
	}

/* 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{
		color: var(--darkInLightLightInDark);
		border-color: var(--inputBorder);
		border-radius: 3px;
		background-color: rgb(250,250,250);
		border-width:1px;
		padding-left: 10px;
		font-size:12px;
	}

	.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: rgb(240,240,240);
	}

	/*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-color: transparent;
		border-radius: 3px;
		background-color: rgb(240,240,240);
		border-width:1px;
		padding-left: 5px;
		padding-right: 5px;
		font-size:10px;
		font-weight: normal;
		height: 18px;
	}

	.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: rgb(240,240,240);
	}

	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: Section Row - Formats the section header rows */

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

	.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:21px;
		font-size: 12px;
		color: black;
		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: 3px;
		border-right-style: hidden;
		border-bottom-style: hidden;
		border-top-style: inset;
		border-left-style: inset;
		background-image: none;
		background-color: rgb(250,250,250);

		border-color: var(--inputBorder);
		-webkit-box-shadow: none;
	}

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

	/* Dropdown Properties 3 - Button-like format */
	.dropdownProperties3{
		height:21px;
		font-size: 12px;
		font-weight: normal;
		color: var(--darkInLightLightInDark);
		padding-right: 20px;
		padding-left: 5px;
		padding-top:1px;
		padding-bottom: 1px;
		width:100%;
		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);	
	}

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

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

		border-color: rgb(200,200,200);
		border-radius: 3px;

		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:20px;
		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;
		background-image: none;
		background-color: rgb(250,250,250);

		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-image: linear-gradient(to bottom,rgb(240,240,240) 0,rgb(210,210,210) 100%);
	}

	button.btn.btn-default.dropdown-toggle.multiselectProperties1:focus
	,button.btn.btn-default.dropdown-toggle.multiselectProperties1:active:focus {
		border: 1px solid rgb(0, 117, 255);
		outline: none;
	}

	/* Multi Select Properties 2 */
	.dropdown-toggle.multiselectProperties2{
		height: 21px;
		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: none;
		outline: none;
		border-radius: 3px;
		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);

		outline: transparent;
    	border: 1px solid transparent;
	}

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

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

	.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;
    	border: 1px solid rgb(0, 117, 255);
	}

	.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 */
.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 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
, .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
, .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-radius: 3px;
		margin-right: 5px;
		margin-left: 5px;
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 15px;
	}

	#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 */

	.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: 25px;
		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: transparent;
	    border: 1px solid rgb(200, 200, 200);
	    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);
	}

	.linkagesFilterInputText:hover{
		background-color: rgb(245,245,245);
	}	

	.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 */

   	.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: black;
	}

	.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);
	}
	
	/* Table Format 1 */
	.tableFormat{
		font-size: 10px;
		width: 100%;
		background-color: transparent;
		border-color: white;
	}

	.tableFormat td{
		height: 25px;
		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: -1px;
		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);
	}

	/* 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: -1px;
		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: -1px;
		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.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: -1px;
		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;
		/*white-space: nowrap;*/
		/*top: -1px;*/
		z-index: 3; /* Needed 3 instead of 2 because the buttons in the production table were superimposing */
	}

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

	.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;
	}

/* 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: 25px;
		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: 25px;
		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;
	}

	.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-top: 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"], .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;
	}

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

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

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

	.legendIcon.wet_gas, .legendIcon2.wet_gas, .legendIcon3.wet_gas{
		background: hotpink;
	}

	.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{
		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{
		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;
	}

	.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{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
		/*border: 1px solid red;*/
	}

	.legendIcon.missing.wet_gas, .legendIcon2.missing.wet_gas, .legendIcon3.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.wet_gas, .legendIcon2.missing.wet_gas, .legendIcon3.missing.wet_gas{
		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{
		background: rgb(230,230,230);
		color: rgb(215,215,215);
		border: 1px solid rgb(230,230,230);
	}

	.legendIcon3.no-basis, .legendIcon2.production-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;
	}

	@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: none;
		border-color: rgb(200,200,200);
	}

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

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

/* End: Multiselect */

/* Start: Comments Menu */

	.center{
		text-align: center;
	}

	.commentMenu {
		width: 150px;
		z-index: 1;
		border: 1px solid grey;
		background: rgb(240,240,240);
		box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
		position: fixed;
		display: none;
		transition: 0.2s display ease-in;
		color: black;
	}

	.menu-options {
	    list-style: none;
	    padding: 10px 0px;
	    margin: 0px;
	    z-index: 1;
	}   

    .menu-option {
	    font-weight: 500;
	    z-index: 1;
	    font-size: 13px;
	    padding: 5px 20px 5px 20px;
	    /* border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);*/
	    cursor: pointer;      
	}

	.menu-option:hover {
        background: rgb(225,225,225);
     }
        
	@keyframes move{
	  from{
	    transform: translate(0%);
	  }
	  50%{
	    transform: translate(-40%);
	  }
	  to{
	    transform: transform(0%);
	  }
	}

	/* End: Comments Menu */

	/* 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;
		}
	}

/* END: COMMON */


/* START: Help Section */

.outerContainerHelp{
	background: var(--wwSectionContainer);
	height: 100vh;
    padding-bottom: 50px;
    padding-top: 40px;
}

.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 - 40px - 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: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);
}

#projectBuilderToolsPanel{
    height: 25px;
}

#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{
	max-height: calc(100vh - 208px);
    min-height: calc(100vh - 208px);
	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 */

#wellInfoPanel .hoverIconPairContainer:focus{
	padding-bottom: 2px;
}

#wellInfoDataTableContainer.tableContainer{
	max-height: calc(100vh - 208px);
	min-height: calc(100vh - 208px);
}

#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: Production Panel */

.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);
}

#productionPanel{
	margin-bottom: 15px;
}

.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;
  	/*border: solid;*/
}

.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;
    height: -webkit-fill-available;
}

.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 */

#costsPanel{
	width: 100%;
	background: rgb(245,245,245);
	margin-bottom: 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 */

#pricingPanel{
	width: 100%;
	background: rgb(245,245,245);
	margin-bottom: 15px;
}

#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 */
#developmentPlanPanel{
	margin-bottom: 15px;
}

#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);
    border-color: var(--inputBorder);
    border-radius: 3px;
    background-color: rgb(250, 250, 250);
    border-width: 1px;
    font-size: 10px;
    width: 100%;
    min-width: 100px;
    outline: none;
    text-align: center;
}
    
/* 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;
}

.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;
}

#textCalculateEconomics{
	color: white;
	margin-right: 10px;
}

.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;
}

.levelOneMainSelectorDropDown{
    display: flex;
    align-items: center;
    background: var(--wwDarkBackground);
    padding-bottom: 8px;
    padding-right: 60px;
}

#create-or-edit-financial-statements-frame.topPanelUp{
	height: calc(100vh - 95px);
	overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 15px;
}

#create-or-edit-financial-statements-frame.topPanelDown{
	height: calc(100vh - 165px);
	overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 15px;
}

.viewFinancialStatmentsContainer.topPanelUp{
	/*height: calc(100vh - 139px);*/
	height: calc(100vh - 159px);
	overflow-x: auto;
    overflow-y: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.viewFinancialStatmentsContainer.topPanelDown{
	height: calc(100vh - 229px);
	overflow-x: auto;
    overflow-y: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

.toggleButtonFinancialStatements.active {
    display: block;
}

.toggleButtonFinancialStatements.inactive {
    display: none;
}

.levelOneButtons .tabTypeSelectorBtn .selectionButtonText{
	color: white;
}

.levelOneButtons .selectionButton:hover{
	background: rgb(60,60,60);
}

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

.levelOneButtons .tabTypeSelectorBtn.active .selectionButtonText{
	color: black;
}

.levelOneButtons div.selectionButton:not(:last-child){
	border-right: 1px solid white;
}


.levelOneButtons .selectionButtonRow{
	height: 70px;
    background: var(--wwDarkBackground);
    background: linear-gradient(var(--wwDarkBlue), var(--wwDarkBlue)) bottom /98% 1px no-repeat, var(--wwDarkBackground);
}

.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{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px 15px;
}

.selectionPanelControlsFS>div>span{
	margin-right: 10px;
	cursor: pointer;
}

.selectionPanelFrequencyFS
, .selectionPanelProductFS{
	width: max-content;
	display: flex;
	align-items: center;
	justify-content: center;
}

.selectionPanelTimelineFS{
	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);
}

.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;
}

#pageContainerInvestments{
	background: rgb(245,245,245);
	margin-bottom: 55px;
	margin-top: 40px;
	font-size: 12px;
}

.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;
}

/*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: -1px;
	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:23px;
	font-size: 12px;
	color: black;
	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;
}


/* 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;
}

.userPageIconsContainer{
	/*
	width: 50%;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    margin-bottom: 20px;
    */
    margin: 0px;
}

.userPageFieldContainer{
	margin: 10px 0px;
	border: 1px solid lightgrey;
	border-radius: 2px;
	padding: 10px 10px 30px 10px;
}

.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{
	width: auto;
}

.tableFormatPM tr th.project-name
, .tableFormatPM tr td.project-name{
	text-align: left;
}

.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: rgb(245,245,245);
	border-width:1px;
	padding-left: 10px;
	font-size:12px;
	border-bottom-style: hidden;
	border-right-style: hidden;
}

.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: 2px;
	padding-bottom: 2px;
	word-break: break-all;
}

.tableFormatPM th{
	background-color: var(--tableHeaderBg);
	color: var(--darkInLightLightInDark);
	padding-top: 4px;
	padding-bottom: 4px;
	position: sticky;
	border-collapse: collapse;
	white-space: nowrap;
	top: -1px;
	z-index: 2;
}

/* 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 */