body {

	font-family: 'Arial', sans-serif;

	margin: 20px;

	padding: 0;

}



header {

	text-align: center;

	margin-bottom: 30px;

}



h1 {

	color: #333;

}



h2 {

	color: #555;

}



p {

	color: #777;

}



ul {

	list-style: none;

	padding: 0;

	margin: 0;

}



li::before {

	content: '\2022';

	color: #007BFF;

	font-weight: bold;

	display: inline-block;

	width: 1em;

	margin-left: -1em;

}



.highlight {

	color: #4383e3;

	font-weight: bold;

}



.trial {

	color: #28a745;

	font-weight: bold;

}



.popup {

	display: none;

	position: absolute;

	background: #f8f9fa;

	padding: 10px;

	border: 1px solid #d1d1d1;

	border-radius: 4px;

	color: #333;

	z-index: 1;

}



.highlight:hover .popup {

	display: block;

}

		

.container {

    max-width: 800px;

    margin: 0 auto;

    padding: 20px;

}



h1 {

    color: #333;

}



form {

    max-width: 400px;

    margin: 20px auto;

    background-color: #fff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}



label {

    display: block;

    margin-bottom: 8px;

}



input,

select {

    width: 100%;

    padding: 10px;

    margin-bottom: 10px;

    box-sizing: border-box;

}

input[type="submit"] {

    background-color: #4caf50;

    color: #fff;

    cursor: pointer;

}



input[type="submit"]:hover {

    background-color: #45a049;

}



/* Add these styles to your CSS */

button {

    background-color: #4caf50;

    color: #fff;

    cursor: pointer;

    padding: 10px 15px;

    border: none;

    border-radius: 5px;

    margin-right: 10px; /* Adjust as needed */

}



button:hover {

    background-color: #45a049;

}



/* Specific styles for your buttons */



a {

    color: #3498db;

    text-decoration: none;

}



a:hover {

    text-decoration: underline;

}



/* style.css */



/* Navigation menu styles */

.navigation-menu {

    background-color: #4383e3;

    padding: 10px;

    text-align: center;

    display: flex;

    align-items: center; /* Center vertically */

    justify-content: center; /* Center horizontally */

}



.navigation-menu a {

    color: white;

    text-decoration: none;

    padding: 10px;

    margin: 0 10px;

    font-weight: bold;

    transition: color 0.3s; /* Add a smooth transition effect */

    display: flex;

    align-items: center; /* Center vertically within each menu item */

}



.navigation-menu a:hover {

    color: #ffc107; /* Change color on hover */

}



.navigation-menu .back-arrow i {

    margin-right: 5px; /* Adjust the spacing between the icon and the text */

}





/* Machines*/



.machines-container {

	display: flex;

	flex-wrap: wrap;

	gap: 20px;

}



.machine-card {

    border: 1px solid #ddd;

    padding: 20px;

    width: 250px;

    text-align: center;

    position: relative;

    background-color: #fff;

    border-radius: 8px;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    box-sizing: border-box;

    transition: box-shadow 0.3s ease-in-out;

}



.machine-card:hover {

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}



.old-machine-card {

	border: 1px solid #ddd;

	padding: 10px;

	width: 200px;

	text-align: center;

	position: relative;

}



.machine-card img {

	max-width: 100%;

	max-height: 100px;

	margin-bottom: 10px;

}



.add-machine-icon {

	width: 50px;

	height: 50px;

	background-color: #4CAF50;

	color: white;

	text-align: center;

	line-height: 50px;

	border-radius: 50%;

	cursor: pointer;

	position: fixed;

	bottom: 20px;

	right: 20px;

}



/* Modal styles */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    z-index: 1000;
    width: 70%; /* Gör modalen bredare - justera vid behov */
    max-width: 1000px; /* Ställ in en maxbredd för att undvika att modalen blir för bred */
    max-height: 90vh; /* Begränsar modalens höjd till 90% av viewportens höjd */
    overflow: hidden; /* Dölj överflöd utanför modalens ram */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

/* Modal content styles to enable scrolling */
.modal-content {
    max-height: calc(90vh - 40px); /* Justera för padding och lämna utrymme för rubrik och knappar */
    overflow-y: auto; /* Gör att modalens innehåll kan scrollas vertikalt */
    padding: 20px;
    background-color: #fefefe;
    border-radius: 10px;
}


/* Additional styles for the Machine Configuration page */

.machine-config {
    max-width: 100%;
    margin: 0 auto;
}

.machine-config label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.machine-config input,
.machine-config select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}


/* Additional styling for better visual appeal */

.machine-config h2 {

	margin-bottom: 20px;

}



.machine-config p {

	margin-bottom: 10px;

}


/* Formuläret inom modalen */
#machineConfigForm {
    width: 100%; /* Fyll hela modalens bredd */
    max-width: none; /* Ta bort maxbredd som kan begränsa */
}



/* Add styles for the header */

.modes-header {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    color: #333;
}

/* Form styling */
#hardwareSignalsForm {
    width: 100%;
    max-width: none;
}

/* Styling for individual hardware signals */
.hardware-signal {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.hardware-signal label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.hardware-signal input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Close button styling */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #888;
    font-size: 24px;
    transition: color 0.3s;
}

.close:hover {
    color: #000;
}

/* Button styling within the form */
.machine-config button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-right: 10px;
}

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

select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #fff;
}