/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.row
{
    display: :block;
}

table thead {
    background-color: #f0c801; /* SOPA header color */
    color: #FFFFFF;
}

table thead th {
    padding: 12px 15px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #ddd;
    color:#333;
}

table tbody tr:nth-child(even) {
    background-color: #F2F2F2; /* Light background for even rows */
}

table tbody tr:nth-child(odd) {
    background-color: #FFFFFF; /* White background for odd rows */
}

table tbody td {
    padding: 10px 15px;
    text-align: center;
    border: 1px solid #ddd;
    color: #333;
    font-weight: 600;
    font-size: 18px;
}
.soy-product-manufactures tbody td {
    padding: 10px 15px;
    text-align: left;
    border: 1px solid #D3D3D3; /* Light border for table body */
    color: #333;
    font-weight: 600;
    font-size: 18px;
}

/* Change the background color of the 'Month' column */
table tbody td:first-child {
        background-color: #eedea2;
    font-weight: bold;
    color: #333;
    padding: 13px 20px;
    /* color: #fff; */
    border-bottom: 1px solid #ddd;
    font-size: 18px;
}

table tbody tr:hover {
    background-color: #D3E6F3; /* Hover effect for rows */
}

#filter {
    margin-bottom: 20px;
}

#year-filter {
    padding: 5px;
    font-size: 16px;
}

#average-price-table table {
    width: 100%;
    border-collapse: collapse;
}

#average-price-table th, #average-price-table td {
    padding: 10px;
    border: 1px solid #ccc;
}

#average-price-table th {
    background-color: #f5f5f5;
}
/* average-price.css */
#average-price-filters {
    display: flex;
    gap: 15px; /* Increased gap for better spacing */
    margin-bottom: 50px;
    padding: 20px;
    width: 100%;

}

.filter-group {
    flex: 1 1 200px; /* Allow the filter groups to grow and shrink */
    min-width: 190px; /* Set a minimum width for better responsiveness */
}
#soybean-arrival-filters
{
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 60px;
    width: 100%;
}
#trade-select-filter
{
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 60px;
    width: 100%; 
}

#oil-import-process-filters, #oilseeds-filter
{
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 60px;
    width: 100%;

}
#sopa-circular-filter-form
{
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 60px;
    width: 100%;
}

#soy-product-manufactures
{
	  display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 60px;
    width: 70%;
}
#soybean-arrival-filters .filter-group {
 flex: 1 1 200px; /* Allow the filter groups to grow and shrink */
    min-width: 190px; /* Set a minimum width for better responsiveness */
    }
    #soybean-productivity-filter .filter-group {
    flex: 1 1 100%;
   
    }
.filter-group label {
    display: block; /* Ensure labels are on their own line */
    margin-bottom: 5px; /* Space between label and input */
    font-weight: 700;
    font-size: 18px;
}

.filter-group select, .filter-group input[type="date"] {
    width: 100%;
    padding: 14px 10px;
    border: 2px solid #f0c801;
    border-radius: 7px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    font-weight: 700;
    font-size: 15px;
    height: 58px;
}

.filter-group button {
    padding: 19px 15px;
    background-color: #f0c801;
   
    color: #333;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 26px;
    width: 100%;
    font-size: 16px;
}

.filter-group button:hover {
    background-color: #f0c801; /* SOPA header color */
    
}

/*pagination */
.pagination {
   
    margin: 20px 0;
}
.pagination a,
.pagination span {
    padding: 8px 16px;
    margin: 0 4px;
    display: inline-block;
    color: #333;
    border: 1px solid #ddd;
    text-decoration: none;
}
.pagination a:hover {
    background-color:#f0c801;
    color: #fff;
}
.pagination .current {
   background-color: #f0c801;
    color: #333;
    border: 1px solid #f0c801;
    font-weight: 600;
}


#average-price-filters .filter-group button,#oil-import-process-filters .filter-group button, #trade-select-filter .filter-group button, #sopa-circular-filter-form .filter-group button,#whats-new-filters .filter-group button,#soy-product-manufactures .filter-group button
{
    padding: 20px 15px;
    background-color: #f0c801;
    color: #333;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 26px;
    width: 100%;
    font-size: 16px;
}


/* Additional styles for period-selection */
#period-selection {
    display: flex; /* Use flexbox for layout */
    gap: 10px; /* Space between the two selects */
}

.full-width-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

.filter-form-container,
.graph-container,
.table-container {
    width: 100%;
    margin-bottom: 30px;
}

table.oilseeds-table {
    width: 100%;

}
#period-selection
{
min-width: 386px;
}
.from-year{
   width: 50%;
}
.to-year
{
    width: 50%;
}
#from-year
{
    width: 100%;
}
#to_year
{
    width: 100%;
}
.filter-button
{
    min-width: 190px;
    margin-top: 8px;
}
#soybean-arrival-filters .filter-button button
{
  width: 100%;
  margin-top: 23px;
}
.soyabean-production
{
    margin-top: 40px;
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 57px;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
}
#whats-new-filters
{
	display: flex;
    gap: 15px;
    margin-bottom: 50px;
    width: 70%;
}

#soybean-productivity-table {
    width: 100%;
    min-width: 600px; /* Adjust this width based on your table's minimum content width */
}
.table-responsive
{
   margin-top: 40px;
    width: 100%;
   
}

/* soybean-productivity-filter */
#soybean-productivity-filter
{
    display: flex;gap: 10px; margin-bottom: 60px;width: 100%;
}


@media (max-width: 768px) {
    #soybean-productivity-table th,
    #soybean-productivity-table td {
        white-space: nowrap; /* Prevent table cells from breaking onto multiple lines */
    }
    #soybean-arrival-table {
        width: 100%;
        min-width: 600px; /* Adjust this width based on your table's minimum content width */
    }
    #soybean-arrival-table th,
    #soybean-arrival-table td {
        white-space: nowrap; /* Prevent table cells from breaking onto multiple lines */
        font-size:13px;
    }
    #soybean-productivity-table th,
    #soybean-productivity-table td {
        white-space: nowrap; /* Prevent table cells from breaking onto multiple lines */
        font-size:13px;
    }
    .table-responsive
    {
       width: 400px;
       padding:20px;
    }
    #average-price-filters
    {
        display: unset;
    }
    #average-price-filters-table th,
    #average-price-filters-table td {
        white-space: nowrap; /* Prevent table cells from breaking onto multiple lines */
        font-size:13px;
    }
    #oil-import-process-filters
{
    display: unset; 
    padding: 20px;
}
#trade-select-filter
{
    display: unset; 
    padding: 20px;  
}
	.soy-product-manufactures tbody td
	{
		font-size:12px;
	}
table tbody td 
	{
		    font-size: 12px;
	}
	table thead th
	{
		  font-size: 12px;
	}

	#whats-new-filters
	{
		display: unset; 
    padding: 20px; 
	}
	.filter-group select
	{
		font-size: 12px;
	}
	
	#average-price-filters .filter-group button,#oil-import-process-filters .filter-group button, #trade-select-filter .filter-group button, #sopa-circular-filter-form .filter-group button,#whats-new-filters .filter-group button,#soy-product-manufactures .filter-group button
{
	font-size: 12px;
	}
}

/* iPad Pro in portrait mode */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
/*  soyabean arrivall css */
#soybean-arrival-filters
{
    padding: 20px;
}
#soybeanWorldChart
{
    padding: 20px;
}
#myLineChart
{
padding:20px;;
}

}
.table-container {
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 20px; /* Space for the arrow */
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.scroll-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 24px;
    color: #333;
    display: none;
    pointer-events: none;
}

@media (max-width: 768px) {
    .scroll-arrow {
        display: block;
    }
}


@media (max-width: 1024px) {
    /* For tablets and smaller devices */
    .table-responsive {
        width: 100%; /* Full width of the container */
        padding: 0 15px; /* Add some padding if desired */
        margin-bottom: 20px;
    }
}


/* Responsive Design */
@media screen and (max-width: 768px) {
    .table-responsive
    {
       width: 400px;
       padding:20px;
    }
  
    #search_type
    {
        width: 100%;
    }
    #myLineChart
    {
    padding:20px;
    }
    #soybean-arrival-filters
    {
        padding: 20px;
        margin-bottom: 20px;
    }
    .table-responsive {
        margin-bottom: 60px;
    }
    /* Background color for 'Month' column in responsive mode */
    table tbody td:first-child {
        background-color: #FFD700;
        font-weight: bold;
		font-size:12px;
    }
    .filter-group
    {
        max-width: unset;
        width: 100% !important;
    }
    .filter-group select
    {
        width: 100%;
    }
    .filter-form-container,
.graph-container,
.table-container, 
.form-filter-container{
    width: 100%;
    margin-bottom: 30px;
    padding: 20px;
}
.filter-group label
{
    font-size: 15px;
}
.form-filter-container{
    padding: 20px;
}
#soybean-productivity-filter .filter-group {
    flex: 1 1 100%;
    max-width: unset !important;
    }
    #soybeanWorldChart
    {
        padding: 20px;
    }
    #myLineChart
{
    padding:20px;
}
#chart-2004-2005
{
    padding:20px;  
}
/* soybean-productivity-filter */
#soybean-productivity-filter
{
    display: unset;gap: 10px; margin-bottom: 0px;
}
#soybean-productivity-filter .filter-button button
{
  width: 100%;
  margin-top: 23px;
}
}