/* -*- jform styling CSS - (C)2014-2023 JK -*- */
/* based on free hongkiat form example online. */
/* EXTENDED in 2023 - one single unified form CSS for all cases */

#jform {
 box-sizing: border-box;
 width: 90%; max-width: 600px;
}

#jform .txtinput {
 display: block;
 font-family: var(--font-serif); /* LiberationSerif, Times, Roman, serif; */
 border-style: solid;
 border-width: 1px;
 border-color: #dedede;
 margin-bottom: 20px;
 font-size: 1.0em;
 padding: 11px 25px;
 padding-left: 55px;
 width: 90%; max-width: 600px;
 color: #777;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#jform .txtinput:focus {
 color: #333;
 border-color: rgba(41, 92, 161, 0.4);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
 outline: 0 none;
}

#jform .spin {
 display: block;
 font-family: var(--font-serif); /* LiberationSerif, Times, Roman, serif; */
 border-style: solid;
 border-width: 1px;
 border-color: #dedede;
 margin-bottom: 20px;
 font-size: 1.0em;
 padding: 11px 25px;
 padding-left: 55px;
 width: 30%; max-width: 200px;
 color: #777;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#jform .spin:focus {
 color: #333;
 border-color: rgba(41, 92, 161, 0.4);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(41, 92, 161, 0.6);
 outline: 0 none;
}

#jform input#name { /* standard NAME - for first and last */
 background: #fff url('fr-person.png') 5px 4px no-repeat;
}
#jform input#fname { /* FIRST and SURNAME separately */
 background: #fff url('fr-person.png') 5px 4px no-repeat;
}
#jform input#sname {
 background: #fff url('fr-person.png') 5px 4px no-repeat;
}

#jform input#addr { /* single field ADDRESS */
 background: #fff url('fr-addr.png') 5px 4px no-repeat;
}
#jform input#addr1 { /* comprehensive 4-field ADDRESS */
 background: #fff url('fr-addr.png') 5px 4px no-repeat;
}
#jform input#addr2 {
 background: #fff url('fr-addr.png') 5px 4px no-repeat;
}
#jform input#addr3 {
 background: #fff url('fr-addr.png') 5px 4px no-repeat;
}
#jform input#addr4 {
 background: #fff url('fr-addr.png') 5px 4px no-repeat;
}

#jform input#phone { /* simple single PHONE */
 background: #fff url('fr-phone.png') 5px 4px no-repeat;
}
#jform input#phmob { /* detailed MOBILE and LANDLINE*/
 background: #fff url('fr-phone.png') 5px 4px no-repeat;
}
#jform input#phlnd {
 background: #fff url('fr-phone.png') 5px 4px no-repeat;
}

#jform input#email { /* EMAIL */
 background: #fff url('fr-email.png') 5px 4px no-repeat;
}

#jform input#quiz { /*  */
 background: #fff url('fr-quiz.png') 5px 4px no-repeat;
}

#jform textarea {
 display: block;
 font-family: var(--font-serif); /* LiberationSerif, Times, Roman, serif; */
 border-style: solid;
 border-width: 1px;
 border-color: #dedede;
 margin-bottom: 15px;
 font-size: 1.0em;
 padding: 11px 25px;
 padding-left: 55px;
 width: 90%; max-width: 600px;
 height: 140px; /* 180, 120 */
 color: #777;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
 transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
 -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#jform textarea:focus {
 color: #333;
 border-color: rgba(41, 92, 161, 0.4);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(40, 90, 160, 0.6);
 outline: 0 none;
}

#jform textarea#message { /* basic MESSAGE */
 background: #fff url('fr-mesg.png') 5px 4px no-repeat;
}
#jform textarea#mprev { /* specialised MESSAGE fields */
 background: #fff url('fr-mesg.png') 5px 4px no-repeat;
}
#jform textarea#mwork {
 background: #fff url('fr-mesg.png') 5px 4px no-repeat;
}
#jform textarea#mhedt {
 background: #fff url('fr-mesg.png') 5px 4px no-repeat;
}

/* end */