* {
		font-size: 13px;
	}
	body {
	    margin: 0;
	    font-family: Arial, sans-serif;
	}
	#header {
	    padding: 10px;
	    background-color: #f1f1f1;
	    text-align: center;
	    box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.1);
	}
	#main-container {
	    display: flex;
	    flex-direction: row;
        align-items: flex-start; /* Align children to the top */
	}
	#right-sidebar {
	    width: 40vh;
	    display: flex;
	    flex-direction: column;
	    padding: 20px 20px 20px 0;
	}
	#left-sidebar {
		width: 30vh;
		/*min-height: 80 vh; */
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		padding: 20px;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	}
	#canvas-container {
	 	width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    flex: 1;
	    max-height: 95vh; 
	    overflow-y: auto;
	}

	.form-group, .form-group-color {
	    margin-bottom: 10px;
	}
	.form-group label {
	    display: block;
	    margin-bottom: 5px;
	    color: #333;
	    font-weight: normal;
	}
	.form-group-color {
	    display: flex;
	    justify-content: space-between;
	    
	}
	.form-group-color label {
	    margin-bottom: 5px;
	    color: #333;
	    font-weight: normal;
	    align-self: center;
	}
	.form-group input[type="text"], 
	.form-group input[type="color"] {
	    padding: 5px;
	    border: 1px solid #ddd;
	    border-radius: 4px;
	}
	.range-group {
	    display: flex;
	    align-items: center;
	}
	.range-group input[type="range"] {
	    flex-grow: 1;
	    margin-right: 5px;
	    width: 15vh;
	}
	.range-group output {
	    min-width: 30px;
	    text-align: center;
	}
	fieldset.form-group {
	    border: 1px solid black;
	    padding: 0;
	    margin-bottom: 20px;
	}
	fieldset.form-group legend {
	    font-weight: bold;
	    color: #333;
	}

	#transferFunctionContainer label {
	    display: block;
	    margin-bottom: 3px;
	    color: #333;
	    font-weight: normal;
	}
	
	#transferFunctionContainer select {
	    width: 50%;
	    padding: 5px;
	    border: 1px solid #ddd;
	    border-radius: 4px;
	    background-color: white;
	    margin-bottom: 3px; /* Space between each select box */
	}
	#transferFunctionContainer select option {
	    padding: 4px;
	}
	#textInput {
	    height: 80vh;
	    resize: none;
	    box-shadow: 0px 0px 10px #bebebe;
	    padding: 5px;
	    border-radius: 4px;
	}
	
	#networkDiv {
		margin-top: 20px;
	}
	#networkDiv, #graphDiv, #dataDiv, #divPrepoznavanje, #useDiv {
	    margin-bottom: 20px;
	    margin-top: 20px;
	    background-color: #f1f1f1;
	    align-items: center;
	    box-shadow: 0px 0px 10px #bebebe;
	}
    #dataDiv {
        display: none;
    }	
	#graphDiv {
		display: none;
	}	
	#myCanvas {
		
	}
    #useDiv {
       display: none;
    }	
	button {
	    padding: 5px 10px;
	    border: none;
	    background-color: #007bff; /* Primary color */
	    color: white;
	    text-transform: uppercase;
	    border-radius: 5px;
	    cursor: pointer;
	    transition: background-color 0.3s, box-shadow 0.3s;
	    outline: none;
	}
	button:hover, button:focus {
	    background-color: #0056b3; /* Darker shade for hover state */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	button:active {
	    background-color: #003885; /* Even darker for active state */
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}
	
	.radioButtonDiv {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}
	
	.radioButtonDiv input[type="radio"] {
	    margin-right: 8px; /* Prostor između radio dugmeta i labele */
	}
	
	.radioButtonDiv label {
	    margin-bottom: 0px;
	}

    iframe {
    	border: none;
    	padding: 0;
    	margin: 0;
    }
    
    .flex-container {
	    display: flex;
	    align-items: center;
	}
	
	.flex-container label {
	    margin-right: 5px;
	}	
	
	
	#drawingCanvas {
	    border: 1px solid #ddd;
	    background-color: rgb(255, 255, 255);

	    border-radius: 5px;
	    margin-bottom: 10px;
	    margin-top: 10px;
	}
	
	#matrixOutput {
	    margin-left: 20px; /* Dodaje razmak izmedu canvas-a i matrice */
	    font-family: 'Courier New', monospace;
	    background-color: rgb(255, 255, 255);
	    border: 1px solid #ddd;
	    padding: 10px;
	    border-radius: 5px;
	    white-space: pre-wrap;
	    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	    display: inline-block; /* Osigurava da se element ponaša kao inline blok */
	    vertical-align: top; /* Poravnava sa vrhom canvas-a ako je potrebno */
	}