/** FORM RESPONSIVE **/
form div.fieldrow,
    form div.submit {clear:both;margin:6px 0;min-height:2em;}
form div.fieldrow label {display:block;float:left;clear:both;width:160px;min-height:1em;padding:5px 10px 0 0;}
form div.fieldrow input,
    form div.fieldrow select,
    form div.submitrow input {border:1px #666666 solid;background:#ffffff;padding:3px 5px;z-index:10;margin-top:2px;}

/** TEXT AREA **/
form div.fieldrow textarea {width:calc(100% - 175px);height:150px;font-family:Arial,Helvetica,sans-serif;line-height:1.4;padding:5px;font-size:10pt;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
form div.fieldrow div.count {padding-left:170px;width:calc(100% - 175px);text-align:right;color:#666666;}

/** SELECT **/
form div.fieldrow select.time {width:100px;}

/** INPUT **/
form div.fieldrow input, form div.fieldrow div.error {width:calc(100% - 205px);}
form div.fieldrow input.date, form div.fieldrow input.small {width:120px;}
form div.fieldrow input.medium {width:220px;}
form div.fieldrow input.tiny {width:60px;}
body.desktop form div.fieldrow input.date.desktop {display:inline;}
body.desktop form div.fieldrow input.date.mobile {display:none;}
body.mobile form div.fieldrow input.date.desktop {display:none;}
body.mobile form div.fieldrow input.date.mobile {display:inline;}

/** CHECKBOX AND RADIO BUTTON **/
form div.fieldrow input[type="checkbox"], form div.fieldrow input[type="radio"] {width:auto;float:left;margin:3px 7px 0 0;}
form.fontawesome div.fieldrow input[type="checkbox"], form.fontawesome div.fieldrow input[type="radio"] {position:absolute;opacity:0;cursor:pointer;height:0;width:0;margin:0;}
form.fontawesome div.fieldrow label input + span.checkmark {display:block;float:left;margin-right:5px;}
form.fontawesome div.fieldrow label input + span.checkmark::after {font-family:"Font Awesome 6 Free";font-weight:400;color:#CCCCCC;font-size:1.2em;}
form.fontawesome div.fieldrow label input:checked + span.checkmark::after {font-weight:900;color:#00CC00;}
form.fontawesome div.fieldrow label input.error + span.checkmark::after {color:#CC3333;}
form.fontawesome div.fieldrow label input.error:checked + span.checkmark::after {color:#00CC00;}

    /** CHECKBOX **/
    form div.fieldrow label.checkbox {width:auto;float:left;clear:none;}
    form.fontawesome div.fieldrow label input[type="checkbox"] + span.checkmark::after {content:"\f0c8";}
    form.fontawesome div.fieldrow label input[type="checkbox"]:checked + span.checkmark::after {content:"\f14a";}

    /** RADIO BUTTON **/
    form div.fieldrow label.radio {position:relative;top:-20px;width:auto;margin-left:170px;}
    form div.fieldrow label.radiobtn ~ div.error {position:relative;top:-18px;margin-bottom:-12px;}
    form.fontawesome div.fieldrow label input[type="radio"] + span.checkmark::after {content:"\f111";}
    form.fontawesome div.fieldrow label input[type="radio"]:checked + span.checkmark::after {content:"\f192";}
    form.fontawesome div.fieldrow label input[type="radio"].tick:checked + span.checkmark::after {content:"\f058";}
    /*
    form.fontawesome div.fieldrow label span.checkmark {display:block;float:left;margin-right:5px;height:1.3em;width:1.3em;text-align:center;background-color:#ffffff;border:1px #666666 solid;margin-bottom:7px;}
    form.fontawesome div.fieldrow label input:checked + span.checkmark {background-color: #00CC00;}
    form.fontawesome div.fieldrow label span.checkmark i {opacity:0;}
    form.fontawesome div.fieldrow label input:checked + span.checkmark i {opacity:1;color:#FFFFFF;}
    form.fontawesome div.fieldrow label input.error + span.checkmark {border:2px #CC3333 solid;margin-bottom:0px;}
    form.fontawesome div.fieldrow label input.error:checked + span.checkmark {border:1px #666666 solid;}
    */

/** PASSWORD **/
form div.fieldrow input[type="password"] {float:left;width:calc(100% - 379px);}
form div.fieldrow div.score {float:left;}
form div.fieldrow div.score #scoreBox {float:left;width:150px;margin:4px 0 0 10px;border-width:1px;border-color:#000000;border-style:solid;height:20px;}
form div.fieldrow div.score #scoreTxt {float:left;height:20px;margin:8px 0 0 8px;font-weight:bold;}

form div.fieldrow div.score #scoreLevel {height:20px;width:20px;}
form div.fieldrow div.score #scoreLevel.failLevel {background-color:#CCCCCC;}
form div.fieldrow div.score #scoreLevel.weakLevel {background-color:#FF3333;}
form div.fieldrow div.score #scoreLevel.goodLevel {background-color:#FF9900;}
form div.fieldrow div.score #scoreLevel.strongLevel {background-color:#33CC33;}

form div.fieldrow div.score #confirmTxt {float:left;margin:6px 0 0 10px;}
form div.fieldrow div.score #confirmTxt.correct {color:#009900;}
form div.fieldrow div.score #confirmTxt.error {color:#FF0000;}

/** FORM INFO TOOLTIP **/
form div.fieldrow div.info::before {content:"[?]";font-size:10pt;padding-right:5px;color:#0000FF;}
form.fontawesome div.fieldrow div.info::before {font-family:"Font Awesome 6 Free";font-weight:900;content:"\f059";font-size:13pt;color:#0066cc;cursor:pointer;}
form div.fieldrow div.info {position:relative;display:inline-block;cursor:pointer;}
form div.fieldrow div.info span {visibility:hidden;width:200px;background-color:black;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;top:150%;left:50%;margin-left:-170px;}
form div.fieldrow div.info span::after {content:"";position:absolute;bottom:100%;left:50%;margin-left:60px;border-width:8px;border-style:solid;border-color:transparent transparent black transparent;}
form div.fieldrow div.info:hover span {visibility:visible;}
    /* Touchscreen Adjustments */
    @media (hover: none) {
        form div.fieldrow div.info:hover span {visibility:hidden;}
        form div.fieldrow div.info.show span, form div.fieldrow div.info.show:hover span {visibility:visible;}
    }

form div.fieldrow a.copy {color:#666666;font-size:14pt;}
form div.fieldrow a.copy:hover {color:#999999;}

/** ERRORS / WARNINGS **/
form div.fieldrow div.error, form div.submit div.error,
form div.fieldrow div.resolved, form div.submit div.resolved {clear:left;padding:3px 5px;margin-left:170px;}
form div.fieldrow div.resolved, form div.submit div.resolved {background-color:#ccffcc;color:#336600;}
form div.fieldrow div.error, form div.submit div.error {background-color:#FFEEEE;color:#CC3333;}
form div.fieldrow input.error, form div.fieldrow textarea.error {border:2px #CC3333 solid!important;}

/** NO FIELD **/
form div.fieldrow span.value {display:inline-block;min-height:1em;padding-top:5px;}
form div.fieldrow span.value .positive {color:#009900;}
form div.fieldrow span.value .negative {color:#EE0000;}

/** SUBMIT BUTTONS **/
form div.submit input {margin:0 10px 0 170px;width:auto;border-color:#000000;-webkit-appearance:none;}

/** LIVE SEARCH **/
form div.search.dropdown {width:410px;margin-left:170px;background-color:#FFFFFF;position:absolute;max-height:150px;overflow:auto;z-index:20;}
form div.search.dropdown a {display:block;padding:2px 3px;color:#000000;text-decoration:none;}
form div.search.dropdown a:hover {background-color:#cccccc;}


/*********************************************************/
form div.hide {display:none;}
form div.show {display:block;}


/** MOBILE ADJUSTMENTS **/
@media screen and (max-width: 600px) {
    form div.fieldrow label {float:none;width:100%;text-align:left;}
    form div.fieldrow input, form div.fieldrow select {height:30px;}
    form div.fieldrow input, form div.fieldrow select, form div.fieldrow textarea {font-size:12pt;}

    /** TEXT AREA **/
    form div.fieldrow textarea {width:100%;padding-left:0;}
    form div.fieldrow div.count {padding-left:0;width:calc(100% - 175px);}

    /** INPUT **/
    form div.fieldrow input,
    form div.fieldrow div.error, form div.submit div.error,
    form div.fieldrow div.resolved, form div.submit div.resolved {width:calc(100% - 12px);margin:0;}
    form div.fieldrow input.date, form div.fieldrow select.time {width:45%;}
    div.fieldrow input.date.mobile {-webkit-min-logical-height:30px;-webkit-min-logical-width:120px;}

    /** RADIO BUTTONS **/
    form div.fieldrow label.radio {margin-left:0;top:0px;}

    /** PASSWORD **/
    form div.fieldrow input[type="password"] {float:left;width:calc(100% - 12px);}
    form div.fieldrow div.score #scoreBox {clear:left;margin-left:0;}
    form div.fieldrow div.score #confirmTxt {clear:left;margin-left:0;}

    /** SUBMIT BUTTONS **/
    form div.submit input {margin-left:0;}

    /** LIVE SEARCH **/
    form div.search.dropdown {width:90%;margin-left:0;}
    form div.search.dropdown a {padding:5px 3px;}
}