/* Use Flexbox to align the canvas and div horizontally */
.container {
    display: flex;
    align-items: center; /* Align items vertically (optional) */
}
.number-input {
    font-size: 12px;       /* Set font size */
    color: #000000;        /* Set text color */
    background-color: #ffffff; /* Set background color */
    border: 1px solid #ccc; /* Add a border */
    padding: 5px;          /* Add some padding */
    /*border-radius: 8px;    /* Round the corners */
    width: 80px;          /* Set a width */
    text-align: center;    /* Center-align text */
}


/* Style for the canvas */
#myCanvas {
    width: 400px;
    height: 600px;
    border: 0px solid black; /* Optional: Add a border to the canvas */
}   

/* Style for colormap of K1*/
:root {
    --plot-width: 400px;
    --plot-height: 600px;
    --plot-title: 'Darstellung von der Verteilung von K1';
    --xaxis-title: '\u03C6 [deg]';
    --yaxis-title: '\u03D1 [deg]';
  }
  
  #plot {
    width: var(--plot-width);
    height: var(--plot-height);
  }


/* Style for the div */
#myDiv {
    margin-left: 20px; /* Optional: Add spacing between the canvas and div */
    padding: 10px;
    border: 1px solid black; /* Optional: Add a border to the div */
    background-color: lightgray; /* Optional: Set a background color for the div */
}

/* Style for the slider containers */
div > label {
    margin-right: 10px;
}

input[type="range"] {
    width: 200px; /* Adjust width as desired */
    margin: 5px;
}

/* Style for the buttons */
button {
    padding: 5px 10px;
    margin: 5px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #45a049;
}

/* Style for the output display */
#Integrated_K1 {
    font-weight: bold;
    font-size: 1.2em;
}