* {
        margin:      0;
        padding:     0;
        box-sizing:  border-box;
  }
.can {
        display:          flex;
        flex-direction:   column;
        justify-content:  center;
     }
	 .Specifed3 {

        padding:    10px;
           }
.collar {
        font-size:        30px;
        font-family:      Micro;
        background:       var(--main-color);
        color:            var(--text-color);
        min-height:       65px;
        border-radius:    5px;
        flex-grow:        1;
        display:          flex;
        justify-content:  center;
        align-items:      center;
        }
#gehrung, #Schnitt, #Tangent {
        background-color:  #fff;
        border-radius:     8px;
        display:           flex;
        align-items:       center;
        max-width:         100%;
        padding:           10px;
        border:            var(--rand);
		box-shadow: var(--schatte);
                   }
.mark {
       
        color:        lime;
        margin-left:  10px;
        font-weight:  bold;
        padding:      0 10px 0 10px;
		
      }
.S-cont {
        display:                grid;
        grid-template-columns:  repeat(3, 33%); /* 3 colonne di larghezza uguale */;
        grid-gap:               10px;
        width:                  100%;
		box-sizing:border-box;
        }
.S-cont2 {
        display:                grid;
        grid-template-columns:  33% calc(66% + 10px);
        grid-gap:               10px;
        width:                  100%;
		margin-top:   10px;
		box-sizing:border-box;       
        }
.Specifed1 input{
        width:          125px;
        padding:        3px;
        font-size:      16px;
        border-radius:  3px;
		max-height: 26px;
        outline:        none;
                                    }
.Specifed1 label {
       /* display:    block;*/
        font-size:  16px;
                 }
.Specifed1 {
        display:          flex;
        justify-content:  space-between;
        font-size:        16px;
        margin-bottom:    10px;
           }
		   
.legend {
        display:          grid;
        grid-template-columns:repeat(2, 1fr);
		 grid-template-rows: auto auto;
		grid-gap:1px;
		background:     var(--main-color1);
        color:          var(--text-color1);
		padding: 10px; 
		border-radius:  5px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border:         var(--rand);
  
           }
.submit-button {
        width:  100%;
               }
.t1, .Form-cell {
        box-sizing:     border-box;
        background:     var(--main-color1);
        color:          var(--text-color1);
        border-radius:  5px;
        padding:        20px;
        border:         var(--rand);
		box-shadow: var(--schatte);
                }
.t2 img {
        max-height:     65px;
        border-radius:  8px;
        }
.t2 {
        display:          flex;
        align-items:      center;
        justify-content:  flex-start;
        gap:              10px;
        padding:          1px;
        border-radius:    5px;
        box-shadow:       var(--schatte);
        margin-bottom:    20px;
    }
		 .orizz b{
        

		padding:  5px;
		color:red;
		
		}
		 .orizz strong{
        
 
		padding:  5px;
		color:lime;
		
		} 
	.canvas-cont{
        display:          flex;
        align-items:      center;
        justify-content: space-between;
		flex-direction:row;
		flex-wrap:nowrap;
        gap:              10px;
        padding:          1px;
        border-radius:    5px;
        box-shadow:       0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom:    20px;
		grid-column: span 2; 
    } 
		 .orizz:nth-child(2){
   padding-left:5px;     
border-left:#000099 solid 2px;
		
		}	
/* Media Queries */
@media (max-width: 768px) {
    .S-cont, .S-cont2, .canvas-cont {
	display:grid;
grid-template-columns:1fr;    }

.Form-cell{
grid-row:0;
  
}
.legend {
display:flex;
flex-direction:column;




}
		 .orizz:nth-child(2){
  padding-left:0px;    
border-top:#000099 solid 2px;
border-left:none;		
		}
}