/* ----------------------------- Contents 
-- Article
-- Buttons
-- Caption (Articles)
-- Container
-- Footer
-- Forward Prices Home Dropdown
-- Glyphicons Font Awesome
-- Grid & Sidenav
-- Help Section
-- Home Articles Layout 
-- Hr Lines
-- Image with Text Block (Contact Us) 
-- (Navbar) Header and Icons
-- (Navbar) Header Dropdown 
-- Navbar
-- Navbar Scroll menu 
-- Navbar @media
-- Panels
-- Panel Headings (Custom)
-- Panel Bodies (Custom)
-- Panels (Legacy Panels)
-- Panels (Scrollable Panel with Searchable List)
-- Printing (Remove URL when Printing) 
-- Root Pages (About, Contact, Team)
-- Subscribe Box
-- Tabcontent Title
-- Table
-- Table Article Module
-- Table Directory Module
-- Table Port Prices Module
-- Tabs
-- Tabs Oil Futures
-- Text
-- Well 
----------------------------------- */

/* -------------------------------------------------------- Article --------------------------------------------------------------------------------------- */

.article {
	font-size: 1.65rem;
}

.article h3 {
	font-weight: bold;
}

.article h4 {
	font-weight: bold;
}

.article h5 {
	font-weight: bold;
}


.articleBlock {
	font-size: 1.65rem;
}

.articleBlock h3 {
	font-weight: bold;
}

.articleBlock h4 {
	font-weight: bold;
}


/* -------------------------------------------------------- Buttons ---------------------------------------------------------------------------------------*/

/*  Buttons for prices header panel years */

.container-button-year {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 10px;
  gap: 10px;
}

.button-year {
  flex-basis: 8%; /* set a fixed width for each button */
}


/* -------------------------------------------------------- Caption (Articles) --------------------------------------------------------------------------------------- */

.caption { 
	font-style: italic;
	text-align: center;
}


/* -------------------------------------------------------- Container ------------------------------------------------------------------------------------- */

/* For the middle section of page (i.e. excluding the header, nav and footer) */
.container-middle {
  background-color: #BABDC2;
}

/* ------------------------------------------------------- Footer ---------------------------------------------------- */

.footer {
	background-color: #333333;
	color: white;
	padding: 15px;
	font-size: medium;
	text-align: left;	
  }

/* Media blocks with break points for footer - showing footer for small or large screens. */
@media (max-width: 768px) {
	.small-screen-footer {
	display: block !important;
	}
	.large-screen-footer {
	display: none !important;
	}
}

@media (min-width: 769px) {
	.small-screen-footer {
	display: none !important;
	}
	.large-screen-footer {
	display: block !important;
	}						
}

/* -------------------------------------------------------- Forward Prices Home Dropdown ------------------------------------------------------------------------------------- */

.forward-dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}

.forward-dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
}

/* To show dropdown toggle/caret */
.forward-dropdown .dropdown-toggle {
    line-height: 1.5em; /* adjust this value to match your font size */
}

/* This attempt to remove the default caret (i.e. 1 of carets) on page load doesn't work. This code block can be removed and caret will still show */
.forward-dropdown .dropdown-toggle::before {
    display: none;
}

/* To show dropdown toggle/caret */
.forward-dropdown .dropdown-toggle::after {
    content: "";
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}
   
/* ------------------------------------------------------- Glyphicons Font Awesome ----------------------------------- */


.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}


/* ------------------------------------------------------- Grid & Sidenav  ---------------------------------------------------------------------- */

    
/* Set sidenav gray background color and 100% height */
.sidenav {
      padding-top: 20px;
      background-color: #BABDC2;
      height: 100%;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
  height: auto;
  padding: 15px;
}
      
.row.content {height:auto;} 
}


/* ------------------------------------------------------- Help Section  ----------------------------------------------------------------------- */

.helpWrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#helpSidebar {
    min-width: 250px;          
    max-width: 250px;
    min-height: 100vh;
    background-color: #ffffff;            
    color: #fff;
    border-right: 1px solid #ddd;            
    transition: margin-left 0.5s;
}

#helpSidebar.active {
    margin-left: -250px;
}

#helpSidebar .sidebarHeader {
    padding: 20px;
    background-color: #ffffff;
}

#helpSidebar ul {
margin-top: 0 !important;
padding-top: 0 !important;
}        

#helpSidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#helpSidebar ul p {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#helpSidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
    position: relative;
    color: #000000;      
}

#helpSidebar ul li a[data-toggle] {
    padding-right: 30px; /* Make space for the arrow */
}

#helpSidebar ul li a[data-toggle]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078"; /* Down arrow */
    color: #000000;
    position: absolute;
    right: 10px;
}

#helpSidebar ul li a[data-toggle].collapsed:after {
    content: "\f077"; /* Up arrow */
}

#helpSidebar ul li a:hover {
    color: #5d5d5d;
    background: #fff;
}

#helpSidebar ul li.active > a, a[aria-expanded="true"] {
    color: #000000;
    background: #ffffff;
}

ul.helpUl ul a {
    font-size: 1.1em !important;
    padding-left: 30px !important;
    background: #ffffff;
}

.helpUl a.active {
    color: #7386D5 !important; /* same color as hover */
    text-decoration: underline;
}

ul.helpCTAs {
    padding: 20px;
}

ul.helpCTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}
        
a.helpArticle, a.helpArticle:hover {
    background: #004565 !important;
    color: #fff !important;
}

#helpContent {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

#helpSidebarCollapse {
    width: auto;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border: none;            
}

#helpSidebarCollapse:hover {
    background: #555;
}

/* --------------------------------------------------------  Home Articles Layout ---------------------------------------------------- */

/* Insights Articles: sets the width of each column to 33% of the parent container */
.insightsArticlesCol {
  flex-basis: 33%;
}

/* -------------------------------------------------------- Hr Lines  -------------------------------------------------------- */

.hr1 {
	border: 0.5px solid rgb(240, 236, 236);
	width: 99%;
}



/* -------------------------------------------------------- Image with Text Block (Contact Us) -------------------------------------------------- */

 /* Contact Us page: Container holding the image and the text */
.contactUsImageContainer {
  position: relative;
}

/* Contact Us page: Bottom right text */
.contactUsImageTextBlock {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
} 

/* ------------------------------------------------------  (Navbar) Header and Icons -------------------------------------------- */

.large-screen-navbar.siteHeader {
    overflow: auto;
    margin-top: 7px; /* space between header logo/icons and top of page */
    margin-bottom: 7px;  /* space between header logo/icons and navbar */
}

.large-screen-navbar.siteHeader img {
    float: left;
    margin-right: 10px;
}

.small-screen-navbar.siteHeader {
    overflow: auto;
    margin-top: 7px; /* space between header logo/icons and top of page */
    margin-bottom: 7px; /* space between header logo/icons and navbar */
}

.small-screen-navbar.siteHeader img {
    float: left;
    margin-right: 10px;
}

.siteHeaderIcons {
    float: right;
    margin-right: 20px; /* space between header icons and right of page */     
	display: flex;
	gap: 1.5rem;
	align-items: center;
}

.siteHeaderIcons i {
  font-size: 2.5rem;
  color: black;
  cursor: pointer;
}

.loginBtn{
    display: block;
    color: white;
    background: black;
    padding: 10px 17px;
    border-radius: 7px;    
}

.signupBtn{
	display: block;
	color: white;
	background: green;
	padding: 10px 17px;
	border-radius: 7px;
}

.logoutBtn{
    display: block;
    color: white;
    background: black;
    padding: 10px 17px;
    border-radius: 7px;    
}

/* ------------------------------------------------------ (Navbar) Header Dropdown ------------------------------------------ */





/* ------------------------------------------------------- Navbar  -------------------------------------------------------- */

/* Remove the navbar's default margin-bottom and rounded borders; add a black background color */ 
.navbar {
	margin-bottom: 0;
	border-radius: 0;
	background-color: #000000;
}

/* Change colour of Navbar text on hover (large screen) */
.large-screen-navbar .navbar-nav li a:hover {
    color: #1db954 !important;
}

/* Change colour of Navbar dropdown text on hover (large screen) */
.large-screen-navbar .dropdown-menu li a:hover {
    color: #1db954;
}

/* ------------------------------------------------------- Navbar Scroll menu     -------------------------------------------- */

/* Scroll menu for smaller screens */
div.scrollmenu {
	background-color: #000;
	overflow: auto;
	white-space: nowrap;
}

div.scrollmenu a {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px;
	text-decoration: none;
}

div.scrollmenu a:hover {
	background-color: #000;
	color: #1db954;
}

/* ------------------------------------------------------- Navbar @media    -------------------------------------------- */


/* @media blocks/queries with break points for navbar - showing navbar for small or large screens.*/		
/* Small screens */
@media (max-width: 992px) {
	.small-screen-navbar {
	display: block !important;
	}
	.large-screen-navbar {
	display: none !important;
	}
}

/* Large screens */
@media (min-width: 992px) {
	.small-screen-navbar {
	display: none !important;
	}
	.large-screen-navbar {
	display: block !important;
	}
	
	/* Hide navbar-toggle button when screen size is > 768px */
	.navbar-toggle {
	display: none;
	}

	/* Enable hover in Bootstrap dropdown menu when screen size is > 768px */ 
	.navbar .dropdown:hover .dropdown-menu {			
	display: block;
	}						
}

/* -------------------------------------------------------- Panels   -------------------------------------------------------------------------------- */

.panel {
  border-color: #eeeeee;
}

.panelPortSearch > .panel-heading {
  background: #004565;
  color: #fff;  
  border-color: #004565;
}

.panelRegions > .panel-heading {
  background: #004565;
  color: #fff;  
  border-color: #004565;
}

/* Reduces font size of country abbreviation in panels */
.panelCountryAbbreviation {
	font-size: small;	
}

/* -------------------------------------------------------- Panel Headings (Custom)  ------------------------------------------------------------------------- */

/* Panel heading colour same as BI blue logo colour (#004565) */
.panelHeadingMain {
  background-color: #004565;
  color: #ffffff;   
}

/* Panel heading colour black */
.panelHeadingDark {
  background-color: #000000;
  color: #ffffff;   
}

/* -------------------------------------------------------- Panel Bodies (Custom) (To assign different background colors to panel templates) ----------------- */

/* Light blue panel body. To be used with panelHeadingMain as an alternative to standard panel-body with white background. Alt: Lighter blue: #fdfeff; Darker blue: #f7fbff; */
.panelBodyMainLight {
  background-color: #fbfeff;
}

/* Light blue panel body. To be used with panelHeadingMain as an alternative to standard panel-body with white background. Alt: Lighter blue: #fdfeff; Darker blue: #f7fbff; */
/* Alternatives: #f9feff; #f9fdff; #f9fbff; #f4f8ff; #efe8ff; #f1ecff; */
.panelBodyMain {
  background-color: #f1ecff;
}

/*Lightest green panel body. To be used with Bootstrap panel panel-success. Alt: #fbfefa*/
.panelBodySuccess {
  background-color: #fdfefc;
}


/* --------------------------------------------------------- Panels (Legacy Panels - to change to .panel1 or something else)  -------------------------------  */


/*  Alt: #677D89 */
.panel-1 > .panel-heading {
  background: #004565;
  color: #fff;
  border-color: #004565;
}

.panel-1 > .panel-heading .collapsed {
  background: #004565;
  color: #fff;
}

/*  Alt: #677D89 */
.panel-2 > .panel-heading {
  background: #004565;
  color: #fff;
  border-color: #004565;
}

.panel-2 {
  min-height: 100px;
}


/* ------------------------------------------------------ Panels (Scrollable Panel with Searchable List)  ------------------------------------- */

.scrollablePanel {
  overflow-y: scroll;
  width: 100%;
}

.scrollablePanel-1 {
  height: 200px;
}

#searchableListInput {
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 14px;
  padding: 10px 20px 10px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#searchableListUl {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#searchableListUl li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #ffffff;
  padding: 10px;
  text-decoration: none;
  display: block
}

#searchableListUl li a:hover:not(.header) {
  background-color: #F9FAFB;
}


/* ------------------------------------------------------- Printing (Remove URL when Printing) ------------------------------------------------------- */

@media print{
  a[href]:after {
     content: none
   }
}

/* -------------------------------------------------------- Root Pages (Team, Contact, About) ---------------------------------------------------------------------------- */

/* Font size of team.php */
.rootPageTextStandard {
	font-size: 1.5rem;
}

/* Font size of contact.php, about.php */
.rootPageTextLarge {
	font-size: 1.65rem;
}


/* -------------------------------------------------------- Subscribe Box ---------------------------------------------------------------------------- */

/* Adds yellow bg colour to any td */ 
.subscribeBox td {
	background-color: #FFFFF5;
	font-size: 1.65rem;
	line-height: 2;		
}

/* Subscribe Box ul li - Used for About Page Subscribe Box without yellow bg. Increases space between li elements. Can either use: line-height: 2;  margin-bottom: 20px; padding-bottom: 20px; */
.subscribeBoxUl ul li {
    line-height: 2; /* Adjust value as needed */
}

/* -------------------------------------------------------- Tabcontent Title ---------------------------------------------------------*/

.tabcontentTitle1 {
	text-align: center;	
 }
 
/* Reduces text size of Product Unit (i.e. $/mt) in Tabcontent Title */ 
.tabcontentTitle1-productUnit {
	font-size: small;
}

/* ------------------------------------------------------- Table ------------------------------------------------------------------------------------ */

table {
  border-spacing: 5px;
  width: 100%; 
}

td {
  padding: 5px; 
}

/* Include the border when there is a header */
.table > thead + tbody > tr:first-child > td {
    border-top: 1px solid #ddd;
}

/* Nowrap for specific tds/columns when we decide not to have a nowrap for the whole table */
.colNowrap {
	white-space: nowrap;
}


/* ------------------------------------------------------- Table Article Module -------------------------------------------------------------------*/

.tableArticle1>tbody>tr:nth-child(odd)>td, 
.tableArticle1>tbody>tr:nth-child(odd)>th {
	background-color: white;
}

.tableArticle1>tbody>tr:nth-child(even)>td, 
.tableArticle1>tbody>tr:nth-child(even)>th {
	background-color: #F9FAFB;    
}

.tableArticle1-div {
	overflow-x:auto;
}


/* ------------------------------------------------------- Table Directory Module ------------------------------------------------------------------*/

/* tableDirectory1: all directory tables that are not a datatables table */
.tableDirectory1>tbody>tr:nth-child(odd)>td, 
.tableDirectory1>tbody>tr:nth-child(odd)>th {
	background-color: white;
}

.tableDirectory1>tbody>tr:nth-child(even)>td, 
.tableDirectory1>tbody>tr:nth-child(even)>th {
	background-color: #F9FAFB;    
}

.tableDirectory1-div {
	overflow-x:auto;
}

/* tableDirectory2: all directory tables that are a datatables table */
.tableDirectory2-div {
	overflow-x:auto;
}


/* ------------------------------------------------------- Table Prices Modules --------------------------------------------------------- */

/* tablePrices1: all prices tables where 1) wrap is not needed for port names and 2)table is not a datatables table */
.tablePrices1 td {
	white-space: nowrap;
}

.tablePrices1>tbody>tr:nth-child(odd)>td, 
.tablePrices1>tbody>tr:nth-child(odd)>th {
	background-color: white;
}

.tablePrices1>tbody>tr:nth-child(even)>td, 
.tablePrices1>tbody>tr:nth-child(even)>th {
	background-color: #F9FAFB;    
}

.tablePrices1-div {
	overflow-x:auto;
}

/* tablePrices2: all prices tables that are a datatables table */
.tablePrices2 td {
	white-space: nowrap;
}

.tablePrices2-div {
	overflow-x:auto;
}


/* -------------------------------------------------------- Tabs -------------------------------------------------------- */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #004565;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color: rgb(82, 80, 80);
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #40c640 ;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #40c640;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* -------------------------------------------------------- Tabs Oil Futures -------------------------------------------------------- */

.tabsOilFutures li {
	list-style:none;
	display:inline;
}

.tabsOilFutures  a {
	padding:5px 5px;
	display:inline-block;
	background:#666;
	color:#fff;
	text-decoration:none;
}

.tabsOilFutures  a.active {
	background:#fff;
	color:#000;
}

/* -------------------------------------------------------- Text --------------------------------------------------------------------- */

html,body,textarea,textfield,select,input {
	font-family: Arial, Helvetica, sans-serif;	
}

a {
	color: #004565;
}


h1 {
font-weight: bold;
}

strong {
	font-weight: bold;
}


/* --------------------------------------------------------- Well  -------------------------------------------------------- */

.well {
  background-color: rgb(255, 255, 255);
}