/* -- Basic Structure -- */
/* Container */
.jfield { padding: 5px; }
.jfield, .jtext, .jpassword, .jnumber, .jradio, .jcheckbox, .jdropdown, .jbutton { position: relative; }
.jtext, .jpassword, .jnumber, .jradio span, .jcheckbox span, .jdropdown, .jbutton { margin-right: 5px; }
.jfield span:before { font-family: "Font Awesome 6 Pro"; }
/* Label */
.jfield label { padding: 0 3px; }
/* Text/Password */
.jtext, .jpassword { padding: 2px 5px; width: 100px; }
/* Number */
.jnumber { padding: 2px 5px; width: 50px; }
/* Radio */
.jradio { cursor: pointer; }
.jradio input { opacity: 0; height: 1px; width: 1px; margin: -1px; overflow: hidden; }
.jradio span:before { border-radius: 50%; }
.jradio input ~ span:before { content: "\f00c"; font-size: 80%; padding: 2px; width: 10px; }
/* Checkbox */
.jcheckbox { cursor: pointer; }
.jcheckbox input { opacity: 0; height: 1px; width: 1px; margin: -1px; overflow: hidden; }
.jcheckbox input ~ span:before { content: "\f00c"; font-size: 80%; padding: 2px; width: 10px; }
/* Dropdown */
.jdropdown { padding: 2px 5px; width: 100px; }
select.jdropdown::-ms-expand { display: none; }  /* IE select change */
.jdropdown-menu { background: #FFFFFF; border: 1px solid #000000; }
.jdropdown-menu ul { list-style: none; padding: 3px; margin: 0; }
.jdropdown-menu li.disabled{ color: grey; cursor: default !important; }
/* Button */
.jbutton { cursor: pointer; }
/* Default states */
.jcheckbox input ~ span:before, .jradio input ~ span:before { color: #FFFFFF; }
.jcheckbox input:checked ~ span:before, .jradio input:checked ~ span:before { color: #000000; }