html {
        /* font-family: sans-serif; */
        font-family: 'ABeeZee';
    }
  
    body {
        margin: 0px;
        background-color: #011b23;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><defs><filter id="f" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="linearRGB"><feTurbulence type="fractalNoise" baseFrequency="0.114" numOctaves="4" seed="15" stitchTiles="stitch" result="turbulence"/><feSpecularLighting surfaceScale="15" specularConstant="0.75" specularExponent="20" lighting-color="rgb(150,130,180)" in="turbulence" result="light"><feDistantLight azimuth="3" elevation="100"/></feSpecularLighting></filter></defs><rect width="700" height="700" fill="%23001023"/><rect width="700" height="700" fill="%233155a1" filter="url(%23f)"/></svg>');
        background-size: cover;
        background-repeat: repeat;
        background-position: center;
    }

    button, select, input {
        font-family: 'ABeeZee';;
    }

    h1, h2 {
        font-family: 'ABeeZee';
        /* font-family: serif; */
        margin: 1rem 0;
    }

    h3 {
        margin-left: 8px;
        margin-top: 5px;
        margin-bottom: 0.5em;
        font-size: 18px;
    }

    h4 {
        margin-left: 8px;
        margin-top: 5px;
        margin-bottom: 0.5em;
        font-size: 16px;
    }

    .tool-window p {
        font-size: 16px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    #choose-formula p {
        margin-left: 10px;
    }
  
    hr {
        border: none;
        border-top: 1px solid darkgray;
    }

    .indexation-top {
        background: white;
        display: flex;
        margin-top:1.5em;
        padding-inline:17.5em;
        padding-block:0.8em;        
        align-items: center;
    }

    .indexation-top  h1 {
        font-size: 1.4em;    
        color: #4b3c32;
        flex: auto;
        align-self: center;
        margin-block: 4px;
        padding-left: 8px;
    }
    
    .navigation {
        display: flex;
        justify-content: center;
    }
    
    .navigation a {
        font-size: 16px;
        margin-left: 16px;
        color: #6c757d;
        text-decoration: none;
        font-family: system-ui;
    }

    /* imperial */
    .imperial-orange {        
        background: linear-gradient(90deg, rgb(49, 85, 161), rgba(253, 189, 90, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.25rem;    
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    }

    .bg-blur{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.91), rgb(255, 255, 255));
    }
    .bg-glass{
        background: linear-gradient(135deg, rgba(176, 197, 255, 0.05), rgba(253, 189, 90, 0.2));
    }
    /* end */

    .navigation a:hover {
        transform: translate(1px, -1px) scale(1.05) translateZ(5px);
        transition: all 0.3s ease-in;
    }

    .content {
        margin: auto;
        width: 695px;
        margin-block: 2vh;
        border-radius: 6px;
        background: white;
        padding: 30px;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
  
    .content > header {
        display: flex;
        margin-bottom: 1em;
        align-items: flex-end;
    }
  
    .content > header h2 {
        flex: auto;
        margin-top: 0px;
    }

    .tool-area {
        margin: auto;
        width: 800px;
        border-radius: 8px;
        margin-inline: 3%;
        margin-top: 24px;
        margin-bottom: 8px;        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;        
    }
    
    .tool-window {
        width: 758px;
        padding: 20px;
        background-color: whitesmoke;
        border-top: 2px solid darkgray;
        border-inline: 2px solid darkgray;
        border-radius: 8px 8px 0px 0px;
    }

    .tool-window h3 {
        font-size: 24px;
        margin-left: 0px;
    }
  
    .flash {
        margin: 1em 0;
        padding: 1em;
        background: #cae6f6;
        border: 1px solid #3155a1;
    }

    .doe-low-button, .button {
        padding-block: 6px;
        font-size: 18px;
        margin-top: 16px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 6px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        width: 100%;
        text-decoration: none;
        text-align: center;
    }

    .button-no-margin {
        padding-block: 6px;
        font-size: 18px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        cursor: pointer;
        width: 100%;
        font-weight: bold;
        border-radius: 6px;
        text-decoration: none;
        text-align: center;
    }

    .table-button {
        padding-block: 4px;
        font-size: 16px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 6px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        width: 100%;
        text-decoration: none;
        text-align: center; 
    }

    .table-button-special {
        border: none;
        padding: 4px;
        font-size: 16px;
        background-color: #fdbd5a;
        border: 2px solid #fdbd5a;
        color: #4c4c4c;
        font-weight: bold;
        width: 100%;
        border-radius: 6px;
    }

    .tool-button {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        margin-bottom: 1.75px;
        padding-block: 8px;
        text-align: center;
        text-decoration: none;
        font-size: 22px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 0px 0px 7px 7px;
        width: 798px;
        color: white;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
    }

    .margin-top-16 {
        margin-top: 16px;
    }

    .inline-margin-6 {
        margin-inline:6px;
    }

    .inline-margin-8 {
        margin-inline:8px;
    }

    .block-margin {
        margin-block:8px;
    }

    .blue-text {
        color: #3155a1;
    }

    .font-size-15 {
        font-size: 15px;
    }

    .filter-button {
        border: none;
        padding: 4px 8px;
        text-decoration: none;
        cursor: pointer;
        font-weight: bold;
        border-radius: 6px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        margin-top: 1px;
        margin:0.5px;
        margin-bottom: 5px;
    }

    .filter-button.reduced-availability {
        background-color: #274481;
        position: relative;
    }
       
    .filter-button.reduced-availability::after { 
        content: "Alert! many products will be excluded";
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fdbd5a;
        color: #4c4c4c;
        padding: 5px;
        margin-bottom: 5px;
        border-radius: 6px;
        white-space: nowrap; 
    }
    
    .filter-button.reduced-availability:hover::after { 
        display: block; /* Show the tooltip when hovering over the button */ 
    } 

    #add-metric-button {
        padding-block: 2px;
        font-size: 18px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 6px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        width: 100%;
        text-decoration: none;
        text-align: center;
    }

    #update-list-button {
        padding-block: 5px;
        font-size: 16px;
        margin-bottom: 10px;
        cursor: pointer;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        font-weight: bold;
        border-radius: 6px;
        width: 97.5%;
        text-decoration: none;
        text-align: center;
    }

    .button:hover, .filter-button:hover, .response-area button:hover, 
    .tool-button:hover, .choice-button:hover, #load-formula button:hover,
    .doe-low-button:hover, .ing-input button:hover, #add-metric-button:hover,
    .table-button:hover, #update-list-button:hover, .ing-selection .add-comparison:hover,
    .button-no-margin:hover {
        color: black;
        background-color: #fdbd5a;
        border: 2px solid darkgray; 
    }

    .filter-button:active, .response-area button:active, .tool-button:active, 
    .choice-button:active, #load-formula button:active, .doe-low-button:active,
    .ing-input button:active, #add-metric-button:active, #select-excel:active,
    .table-button:active, #update-list-button:active, .ing-selection .add-comparison:active,
    .button-no-margin:active {
        background-color: #fdbd5a;        
        border: 2px solid darkgray; 
        color: #4c4c4c;
    }
  
    .textual-input {
        width:100%;
    }

    .textual-input, #generate-button {
        padding: 9px 12px;
        margin-block: 3px;
        box-sizing: border-box;
        margin-bottom: 14px;
        border-radius: 6px;
    }
  
    input.danger {
        color: #cc2f2e;
    }

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

    .wait-message {
        visibility: hidden;
        font-size: 12px;
        margin: 0px;
        color: #3155a1;
    }

    .logo {
        background:#eee;
        padding-bottom:10px;
    }

    .logo img:hover {
        cursor: pointer;
    }

    .input-container {
        display: flex;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }

    .input-container input, .input-container select.value-select {
        flex-grow: 1;
        margin-right: 10px;
        padding: 3px 6px;
        border-radius: 6px;
        border: 0.5px solid;
        margin-left: 5px;
    }

    .select-category {
        width: 97.5%;
        padding: 3px 6px;
        border-radius: 6px;
        border: 0.5px solid;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .input-container select.operator-select {
        margin-right: 10px;
        padding: 3px 6px;
        border-radius: 6px;
        width: 120px;
    }

    .input-container button, .metric-insertion button{
        border: none;
        padding: 4px 8px;
        background-color: #fdbd5a;
        border: 2px solid #fdbd5a;
        color: #4c4c4c;
        font-weight: bold;
        border-radius: 6px;
    }

    .input-container button:hover, .metric-insertion button:hover, .table-button-special:hover, 
    .ing-selection .remove-comparison:hover, .table-button.update:hover {
        color: #4b3c32;
        border: 2px solid #4b3c32;
        cursor: pointer;
    }

    .metric-insertion button {
        margin-left: auto;
        margin-right: 0;
    }

    .input-container label {
        align-content: center;
        width: 100px;
        margin-right: 5px;
        text-align: right;
    }

    .input-container span {
        align-content: center;
        margin-left: 5px;
        margin-right: 10px;
        text-align: center;
    }

    .input-container select {
        width: 60px;
        margin: 0 5px;
    }

    .response-area {
        background-color: #3155a1;
        border-radius: 6px;
    }

    .response-widget {
        display: none;
        justify-content: center;
    }

    .response-area button {
        width: 49.2%;
        border: none;
        text-decoration: none;
        transition-duration: 0.2s;
        cursor: pointer;
        font-weight: bold;
        font-size: 17px;
        background-color: #3155a1;
        color: white;
        margin-top: 0px;
        margin-bottom: 1.5px;
        margin-inline: 1.5px;
        padding-block: 3px;
    }

    .left-widget {
        border-radius: 0px 0px 0px 6px;
    }

    .right-widget {
        border-radius: 0px 0px 6px 0px;
    }

    .left-round{
        border-radius: 6px 0px 0px 6px;
    }

    .right-round{
        border-radius: 0px 6px 6px 0px;
    }

    .table-button-text {
        font-size: 16px;
    }

    .table{
        padding-bottom:10px;
    }

    .add-ingr-options{
        border-radius: 6px;
        justify-content: center;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .choice-button {
        width: 347.5px;
        text-decoration: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 18px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        transition: all 0.3s ease-out;
        color: white;
        padding-block: 6px;
    }

    .full-round {
        border-radius: 4px;
        width: 100%;
        margin: 1.6px;
    }

    .choice-instruction {
        margin-top: 0%;
        padding-top: 2%;
        margin-inline: 1%;
    }
    
    .ing-input {
        margin-top:10px;
        margin-bottom:15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .ing-concentration {
        margin-block:10px;
        display: flex;
    }

    .ing-input input {
        width: 64%;
        margin-right:10px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    .ing-input select {
        width: 66%;
        margin-right:10px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    #create-graph-form, #predict-kpis-form {
        padding: 10px;
        padding-top: 5px;
        border: 2px solid darkgray;
        border-top: 0px;
        border-radius: 0px 0px 6px 6px;
    }

    .ing-selection {
        margin-top:8px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .ing-selection select {
        width: 100%;
        font-size: 15px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    .graph-creation-area h4 {
        margin-inline:0px;
    }

    .kpi-selection {
        width: 100%;
        font-size: 15px;
        margin-bottom:10px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    .ing-concentration input {
        height: 16px;
        margin-inline:10px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    .ing-concentration p {
        margin-top:4px;
        margin-bottom:0px;
    }

    .ing-input button, .ing-selection .add-comparison {
        border: none;
        width: 30%;
        padding: 4px 8px;
        background-color: #3155a1;
        border: 2px solid #3155a1;
        color: white;
        transition: all 0.3s ease-out;
        cursor: pointer;
        font-weight: bold;
        border-radius: 6px;
    }

    .max-range-row {
        background-color: #fff2de !important;
    }

    .doe-run-container {
        padding: 10px 12px;
        border-radius: 6px;    
        border: 2px solid darkgray;
        margin-bottom:18px;
    }

    .container-flex-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .input-group {
        display: flex;
        align-items: center;
    }
    
    .input-group label {
        margin-right: 8px;  
    }

    .metric-insertion {
        padding-top: 5px;
        margin-bottom: 25px;
    }

    .input-group.checkbox {
        margin-left: 10%;
    }

    input[type='checkbox'] {
        width:20px;
        height:20px;
        accent-color: #3155a1;
    }

    input[type='checkbox']:hover {
        cursor: pointer;
    }

    #choice-ing-selection, #choice-ing-insertion, #add-constraints, #select-doe {   
        display: none; 
        border-radius: 0px 0px 6px 6px;    
        border: 2px solid darkgray;
        border-style: none solid solid solid;
    }

    #dynamic-filters {
        margin-block: 15px;
        margin-right: 10px;
        margin-left: 5px;
    }

    #error-message {
        color: red;
        margin-bottom: 10px;
    }

    #error-message:hover {
        cursor: pointer;
        color: #3155a1;
        text-decoration: underline;
    }

    #response {
        padding: 10px;
        border: 2px solid #3155a1;
        border-radius: 6px;
        font-family: monospace;
        margin-top: 6px;
        margin-bottom: 0px;
        min-height: 100px;
        background-color: white;
    }

    #load-formula {
        flex-direction: row;
    }

    #load-formula input {
        width: 45%;
        margin-inline: 10px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    #ing-table-container {
        display: none;
    }

    .table-input {
        width: 95%;
        height: 16px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
        font-size: 16px;
    }

    .table-input-edit {
        width: 70%;
        text-align: center;
        margin-left: 8%;
        height: 16px;
        padding: 4px 6px;
        border-radius: 6px;
        border: 0.5px solid;
        font-size: 16px;
    }

    .dataTables_wrapper {
        border: 8px solid darkgray;
    }

    .products-number-message {
        color: #3155a1;
    }
    
    .text-left {
        text-align: left !important;
    }​

    .input-container button, .metric-insertion button, .table-button.update  {
        border: none;
        padding: 4px 8px;
        background-color: #fdbd5a;
        border: 2px solid #fdbd5a;
        color: #4c4c4c;
        font-weight: bold;
        border-radius: 6px;
    }

    .doe-parameter-input {
        flex-grow: 1;
        width: 260px;
        font-size: 14.8px;
        padding: 3px 6px;
        border-radius: 6px;
        border: 0.5px solid;
    }

    .doe-parameter-input.range {
        width: 60px;
    }

    .metric-title {
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 10px;
    }

    #constraints-form {
        margin-top: 30px;
    }

    #load-formula button {
        border: none;
        padding: 4px 8px;
        transition-duration: 0.2s;
        cursor: pointer;
        border: 2px solid #3155a1;
        font-weight: bold;
        border-radius: 6px;
        background-color: #3155a1;
        color: white;
    }

    td.editor-edit button, td.editor-delete button, td.editor-continue button, 
    td.editor-get-xlsx button, td.editor-confirm button, td.editor-upload-xlsx button,
    td.editor-show-info button, td.editor-add button, td.editor-select-formula button,
    td.editor-ing-details button {
        background: transparent;
        border: none;
        color: #3155a1;
        font-size:20px;
    }

    .deactivated button {
        background: transparent;
        border: none;
        font-size:20px;
        opacity: 0.2;
        pointer-events: none;
    }

    td.editor-edit button:hover, td.editor-delete button:hover, .editor-continue button:hover, 
    td.editor-get-xlsx button:hover, td.editor-confirm button:hover, td.editor-upload-xlsx button:hover,
    td.editor-show-info button:hover, td.editor-add button:hover, td.editor-select-formula button:hover,
    td.editor-ing-details button:hover {
        color: #fdbd5a;
        cursor: pointer;
    }

    #select-doe .dt-length {
        padding-left: 10px;
    }

    #select-doe .dt-search {
        padding-right: 10px;
    }

    #select-doe .sorting_1 {
        width: 20%;
    }

    #select-doe .editor-continue {
        width: 16%;
    }

    #drop-area {
        border: 3px dashed #ccc;
        border-radius: 6px;
        width: 99%;
        padding-top: 90px;
        padding-bottom: 100px;
        text-align: center;
    }

    #drop-area.highlight {
        border-color: #274481;
    }
    
    #select-excel {
        display: inline-block;
        margin-top: 0px;
        width: 180px;
        border-radius:20px;
    }

    #upload-file-name {
        font-size: 18px;
    }

    input[type='radio'] {
        height: 22px;
        width: 22px;
        accent-color: #3155a1;
    }

    #upload-warning-message {
        font-weight: bold;
        margin-top: 10px;
        color: #3155a1;
        margin-bottom: 0;
        display: none;
    }

    .wrap-cell {
        white-space: normal !important;
        word-wrap: break-word;
        max-width: 0px;
    }

    #predicted-kpis-area {
        background-color: darkgray;
        color: white;
        border-radius: 0px 0px 6px 6px;
        height: 216px;
        padding-top: 14px;
    }

    .resize-image {
        margin-block: 2%;
        margin-inline: 10%;
        max-width: 80%;
        border-radius: 6px;
    }

    .graph-download {
        margin-inline: 10%;
        font-weight: bold;
        font-size: 20px;
        padding-bottom: 2%;
    }

    .graph-download a {
        color: white;
        text-decoration: none;
    }

    .graph-download a:hover {
        color: #fedead;
    }

    .graph-download a:active {
        color: #fdbd5a;
    }

    .rounded-table {
        background-color: white;
        color: black;
        border: 2px solid #3155a1;
        border-radius: 6px;
    }

    .placeholder {
        color: #3155a1;
        padding: 0px;
        margin: 0px;
        font-size: 0px;
    }

    /* Highcharts section */
    .highcharts-figure .chart-container {
        width: 346px;
        height: 200px;
        float: left;
    }
    
    .highcharts-figure,
    .highcharts-data-table table {
        width: 692.5px;
        margin: 0 auto;
    }
    
    .highcharts-data-table table {
        font-family: Garamond;
        /* font-family: Verdana, sans-serif; */
        border-collapse: collapse;
        border: 1px solid #ebebeb;
        margin: 10px auto;
        text-align: center;
        width: 100%;
    }
    
    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }
    
    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }
    
    .highcharts-data-table td,
    .highcharts-data-table th,
    .highcharts-data-table caption {
        padding: 0.5em;
    }
    
    .highcharts-data-table thead tr,
    .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }
    
    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }
    
    @media (max-width: 700px) {
        .highcharts-figure,
        .highcharts-data-table table {
            width: 100%;
        }
    
        .highcharts-figure .chart-container {
            width: 300px;
            float: none;
            margin: 0 auto;
        }

        #predicted-kpis-area {
            height: 61.5vh;
            padding-top: 3vh;
        }
    }
    
    .highcharts-description {
        margin: 0.3rem 10px;
    }