/* Optional: Normalize button styles */
button, input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit; /* Inherit font styles */
    margin: 0; /* Remove default margin */
}
/* Note this section above mainly overrides browser imposed (and my own) properties.  */
/* Its important this section is at the top of this css file so that any custom css I create below overrides it  */


body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

h1 {
    color: #011e6a;
    font-weight: bolder;
    /* Other existing styles for h1 */
}

.container {
    text-align: center;
    background-color: #7dd3ff; /* new amrize */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px; /* Add margin-top to provide spacing from the top */
    width: auto;  /* Not 100% */
    max-width: 800px; /* Limit the maximum width */
}

.title {
    font-size: 2em;
    margin-bottom: 20px;
    color: #011e6a; /* Set the title font color to amrize blue 100 */
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align the items */
    width: auto; /* Ensure the width is appropriate */
    margin: auto; /* Center the form horizontally */
}

.input-container {
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    align-items: center;
    width: auto; /* Adjust width */
    margin: 10px auto; /* Center the input-container horizontally */
}

.input-container label {
    width: auto; /* Adjust the width of the label */
    text-align: right; /* Align the text to the right */
    padding-right: 10px; /* Add padding to separate the label from the input */
    min-width: 100px; /* Ensure the label has a minimum width */
}

.input-container input {
    width: 30ch; /* Set the width to approximately 30 characters */
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-left: 10px; /* Add some margin to the left to separate from the label */
}

.report-list {
    text-align: left; /* Left align text inside the container */
    padding: 0; /* Remove padding if any */
    margin: 0; /* Remove margin if any */
    line-height: 1; /* Set line-height to minimize spacing */
    margin-bottom: 20px; /* Add some space between the report links and the Home/Back buttons */
}

.report-list div {
    margin: 0; /* Remove margin for the div */
    padding: 2px 0; /* Minimal padding for vertical spacing */
    line-height: 1; /* Set line-height to minimize spacing */
}

.report-list a {
    display: inline; /* inline=only necessary width block=Ensure links take up the full width of their parent div */
    padding: 2px; /* Reduce padding for the links */
    text-decoration: none; /* Optional: Remove underline from links */
    color: #007bff; /* Optional: Change the link color */
    line-height: 1; /* Set line-height to minimize spacing */
}

.report-list a:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}

.form-group {
    margin-bottom: 20px; /* Adjust vertical spacing between form groups */
}

label {
    display: block;
    margin-bottom: 5px; /* Adjust vertical spacing between label and select */
}

select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 2px solid rgba(8, 58, 219, 0.425);
    border-radius: 4px;
    font-family: Arial, sans-serif; /* Set the font family */
    font-size: 16px; /* Set the font size */
    color: #333; /* Set the text color */
    background-color: #f9f9f9; /* Set the background color */
    appearance: none; /* Remove default styling in some browsers */
}

select:focus {
    outline: none; /* Remove outline on focus */
    border-color: #007bff; /* Change border color on focus */
}

option {
    font-family: Arial, sans-serif; /* Set the font family for options */
    font-size: 16px; /* Set the font size for options */
    color: #333; /* Set the text color for options */
    background-color: #fff; /* Set the background color for options */
}

.button-container {
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px; /* Add space between buttons */
}

.button-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%; /* Ensure it takes the full width of the parent container */
}

.button {
    padding: 10px 20px;
    background-color: #011e6a;   /* Amrize deep navy is #011e6a   and previous version was #04AA6D */ 
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: auto !important; /* Ensure the width is auto to fit the content */
    margin: 10px 5px; /* Ensure spacing between buttons */
}

.htmltablebutton {
    padding: 10px 10px;  /* to be centered in a cell*/
    background-color: #011e6a; /* Amrize deep navy is #011e6a   and previous version was #007bff */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: auto;
}

.button:hover {
    background-color: #039e5a;
}

button {
    padding: 10px 20px;
    background-color: #011e6a; /* Amrize deep navy is #011e6a   and previous version was #007bff */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    margin: 10px 5px; /* Ensure spacing between buttons */
}

button:hover {
    background-color: #3648a3 ;
}

.hidden-button {
    opacity: 0.5;
    pointer-events: none;
}

/* Multiple button container styles */
.multi-button-container {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;

    /* adding to try to get buttons side by side in rmx mkt share report
    justify-content: flex-start;   This keeps the buttons next to each other  
    align-items: center;  Ensures vertical alignment */ 
}

.multi-button-container .button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: auto;
}

.multi-button-container .button:hover {
    background-color: #0056b3;
}

.multi-button-container form {
    display: inline-block;
    margin: 0; /* Ensure there's no extra margin around the form */
}

.mktsharepage-container {
    display: flex;
    flex-direction: column;
    margin-top: 15x; /* Adjust the value as needed */
}

.error {
    color: red;
    margin-top: 10px;
}
 
.shrink-font {
    font-size: 0.75em; /* Shrink the font size of the font you want to shrink */
    vertical-align: top; /* Align the text to the top */
}


.tooltip {
    display: inline; /* Ensure the tooltip is inline */
    position: relative;
    cursor: pointer;
    text-decoration: none; /* Remove underline from the tooltip */
    color: #007bff; /* Optional: Change the color of the tooltip */
    font-size: 1.0em; /* Shrink the font size of tooltip */
}

.tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.7em; /* Shrink font size  */
    max-width: 95vw; /* Adjust the max-width */
    min-width: 800px; /* Set a minimum width to ensure it's wide */
    white-space: normal; /* Allow the text to wrap */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    margin-top: -50px; /* Add some space above the tooltip */
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s;
}

.tooltip:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    z-index: 10;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Ensure the tooltip stays within the viewport */
.tooltip:hover::after,
.tooltip:hover::before {
    left: 50%;
    transform: translateX(-50%);
}

.image-slider {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    text-align: center;
}

.slider-image {
    width: 100%;
    height: 250px; /* Set a fixed height for all images */
    object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */
}
 
#mktsharetable {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
  }
  
  #mktsharetable td, #mktsharetable th {
    border: 1px solid green;
    font-weight: bold;
    padding: 5px;
  }
  
  #mktsharetable tr:nth-child(even){
    background-color: #f2f2f2;
  }
  
  #mktsharetable tr:nth-child(odd) {
    background-color: white;
  }

  #mktsharetable tr:hover {background-color: #ddd;}
  
  #mktsharetable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    background-color: #04AA6D;
    color: white;
  
  }

.mktsharebottomcontainer {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

.box {
        flex: 1; /* Makes both divs the same size */
        margin: 10px;   /* puts a border (top, right, bottom, and left) of the .box */
        padding: 20px;  /* adds 20px of space inside the .box on all sides (top, right, bottom, and left)  */
        border: 1px solid #ccc;
        background-color: #f9f9f9;

}

.box img {
        max-width: 90%; /* Scale image to fit 90% of the box */
        max-height: 90%; /* Ensure it doesn't exceed box height */
        object-fit: contain; /* Ensure the image keeps its aspect ratio */
        display: block; /* Make the image a block element */
        margin: 0; /* Remove auto margins since flexbox handles centering */
}

.image-wrapper {
    display: flex; /* Make the wrapper a flex container */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    height: 100%; /* Ensure the wrapper takes up full height of the .box */
}

.fakebutton-link {
    padding: 10px 20px;
    background-color: #007bff; /* Blue background color */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline from the link */
    display: inline-block; /* Make the link behave like a button */
}

.fakebutton-link:hover {
    background-color: #0056b3; /* Darker blue on hover */
}


.inactivebutton-link {
    padding: 10px 20px;
    background-color: #C0C0C0; /* gray background color */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline from the link */
    display: inline-block; /* Make the link behave like a button */
}

.inactivebutton-link:hover {
    background-color: #A9A9A9; /* Darker gray on hover */
}

/* Styling for the category buttons */
.category-button {
    background-color: #3399ff; /* Lighter shade of blue */
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

/* Hover effect for category buttons */
.category-button:hover {
    background-color: #66b2ff; /* Slightly lighter on hover */
}

#marketSharePieChart {
    width: 50%; /* Set width to half the page */
    max-width: 600px; /* Limit maximum width */
    margin: 0 auto; /* Center the chart */
    border: 2px solid #000; /* Add a border around the chart */
    padding: 10px; /* Add some padding around the chart */
}

/* =============== Choices.js Customization =============== */

.choices {
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

.choices__inner {
    padding: 10px;
    border: 2px solid rgba(8, 58, 219, 0.425);
    border-radius: 4px;
    background-color: #f9f9f9;
    min-height: auto;
    line-height: 1.4;
}

.choices__placeholder {
    color: #888;
    opacity: 1; /* ensure it's readable */
}

.choices__list--dropdown {
    background-color: #fff;
    border: 2px solid rgba(8, 58, 219, 0.425);
    font-size: 16px;
}

.choices__list--multiple .choices__item {
    background-color: #e6f0ff;
    border: 1px solid #b3d4fc;
    border-radius: 4px;
    padding: 3px 8px;
    margin: 3px 4px;
    font-size: 15px;
    color: #333;
}

.choices__item--selectable {
    padding-right: 10px; /* prevent overflow from remove button */
}

.choices__button {
    background: none;
    border: none;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    margin-left: 5px;
}