default.css

div.struc2frm {
    padding: 4px;
    margin:  4px;
    border: 1px solid #aaa;
    border-radius: 6px;
}

div.struc2frm  h3 {
    padding: 4px;
    margin:  4px;
} 

div.struc2frm  input, 
div.struc2frm  textarea, 
div.struc2frm  select, 
div.struc2frm  button, 
div.struc2frm  label {
    padding: 4px;
    margin:  4px;
}
/* screen width dependent min-width below */
div.struc2frm  label {
    display: inline-block;
    vertical-align: middle;
    margin-top: 1px;
    text-align: right;
}
div.struc2frm .radio-group  label {
    min-width: unset;
}

div.struc2frm  span.postlabel {
    display: inline-block;
    vertical-align: middle;
    font-size: 90%;
    position: relative;
    top: -0.15em;
    margin-left: 4px;
    line-height: 90%;
    /* max-width: 40px; */
}

div.struc2frm  div.separator {
    height: 1px; 
    border-top: 1px solid #aaa; 

    padding: 0;
    margin: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}

div.struc2frm  fieldset {
    border: 1px solid #aaa; 
    padding: 4px;
    margin:  14px 4px;
    border-radius: 8px;

}
div.struc2frm  legend {
    font-size: 90%;
    margin-left: 8px; 

    color: #444; 
    border: 1px solid #aaa; 
    padding: 0px 8px;
    border-radius: 5px;
}

div.struc2frm  button[type=submit],
div.struc2frm  input[type=submit]
{
    margin-left: 186px; /*some default*/
    width: 280px;
    height: 40px;
    padding: 4px 16px;
    margin-top: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
}

div.struc2frm  input[type="radio"] {
    margin-right: 2rem;
}


/* Hiding spinners for integers/floats  */
/* stackoverflow.com/questions/3790935/ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* 
	artificial arrow icon for select/dropdown
	by wrapping a div around each select ;
	looks more stylish;
	the arrow is creatd by the ::after pseudo tag;
	requires the dropdown button itself to be suppressed;

	even when the pseudo class is disabled, this style must be set;

	also created by struc2frm
*/
.select-arrow {
	position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.DISABLED-select-arrow::after {

	/* display:	inline-block; */
	position: absolute;
	right:		 1.5rem;
	top:			 1.3rem;
	/* z-index: 3; */

	pointer-events: none;

	content: " ";
	width:	0.6em;
	height: 0.6em;

	transform-origin: center;
	transform: rotate(-45deg);
	/* background-color: blueviolet; */
	background: transparent;
	color: var(--clr-pri);
	border-left:	 2px solid var(--clr-pri);
	border-bottom: 2px solid var(--clr-pri);
}


div.struc2frm  .card-label {
    display: inline-block; 
    vertical-align: top;
    
    width: 40%;
}


/* if s2f.Indent == 0   -   set values by CSS */
/* ========================================== */

/* Smartphones (portrait and landscape) */
@media screen and (max-width: 1023px){

    div.struc2frm  label {
        min-width: 90px;
    }
    div.struc2frm  h3 {
        margin-left: 106px;
    }
    div.struc2frm  button[type=submit],
    div.struc2frm  input[type=submit]
    {
        margin-left: 106px;
    }

}



/* Desktops and laptops */
@media screen and (min-width: 1024px){

    div.struc2frm  label {
        min-width: 120px;
    }
    div.struc2frm  h3 {
        margin-left: 136px;
    }
    div.struc2frm  button[type=submit],
    div.struc2frm  input[type=submit]
    {
        margin-left: 136px;
    }

}

/* Large screens */
@media screen and (min-width: 1824px){

    div.struc2frm  label {
        min-width: 150px;
    }
    div.struc2frm  h3 {
        margin-left: 166px;
    }
    div.struc2frm  button[type=submit],
    div.struc2frm  input[type=submit]
    {
        margin-left: 166px;
    }

}


/* change specific inputs */
div.struc2frm label[for="time"] {
    min-width: 20px;
}
div.struc2frm select[name="department"] {
    background-color: darkkhaki;
}

.error-block {
    margin:      0.2rem;
    margin-top:  0.4rem;
    margin-left: 1.6rem;
    font-size: 120%;
    color: var(--clr-err, #d22);
}

div.wildcardselect {
    display: inline-block;
	margin-top: 0.2rem; 
	vertical-align: top;
}
div.wildcardselect input {
    font-size: 80%;
    padding: 1px;
    margin:  2px;
    width:  2.2rem;
}