/* Standard input controls */
/* https://moderncss.dev/pure-css-custom-checkbox-style/ */

/* Checkboxes */
input[type="checkbox"] { margin-left: 2px; margin-right: 0px; margin-top: -3px; height: 14px; width: 14px; vertical-align: middle }
    input[type="checkbox"]:focus { box-shadow: 0 0 0 2px #000; }
.customcheckboxcontainer { height: 18px; white-space: nowrap }
    .customcheckboxcontainer label { margin-left: 5px; height: 14px; line-height: 14px; }
.customcheckbox { -webkit-appearance: none; appearance: none; border: 1px solid #fff; background-color: #fff; border-radius: 0px; box-shadow: 0 0 0 1px #000; position: relative; }
    .customcheckbox:checked { box-shadow: 0 0 0 1px #000; background-color: #000; border-width: 2px; }

    /* Tristate */
    .customcheckbox.currentstate { background-color: #fff; box-shadow: 0 0 0 1px #000; border-width: 1px; position: relative; }
        .customcheckbox.currentstate::after { content: ''; position: absolute; top: 1px; left: 1px; width: 0; height: 0; border-left: 10px solid #000; border-bottom: 10px solid transparent; }
        .customcheckbox.currentstate.white::after { border-left: 10px solid #fff; }

    /* Unreviewed / Accepted / Declined */
    .customcheckbox.unreviewed { background-color: #fff; }
        .customcheckbox.unreviewed:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.unreviewed.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.unreviewed.white:checked { background-color: transparent !important; }

    .customcheckbox.accepted { background-color: #fff; }
        .customcheckbox.accepted:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.accepted::after { content: ''; position: absolute; top: 0px; left: 3px; width: 6px; height: 10px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }
        .customcheckbox.accepted.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.accepted.white:checked { background-color: transparent !important; }
            .customcheckbox.accepted.white::after { border-color: #fff; }

    .customcheckbox.declined { background-color: #fff; }
        .customcheckbox.declined:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.declined::before { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: #000; transform: translate(-50%, -50%) rotate(45deg); }
        .customcheckbox.declined::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: #000; transform: translate(-50%, -50%) rotate(-45deg); }
        .customcheckbox.declined.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.declined.white:checked { background-color: transparent !important; }
            .customcheckbox.declined.white::before { background-color: #fff; }
            .customcheckbox.declined.white::after { background-color: #fff; }

    .customcheckbox.multistate { background-color: #fff; box-shadow: 0 0 0 1px #000; border-width: 1px; position: relative; }
        .customcheckbox.multistate:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.multistate::after { content: ''; position: absolute; top: 1px; left: 1px; width: 0; height: 0; border-left: 10px solid #000; border-bottom: 10px solid transparent; }
        .customcheckbox.multistate.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.multistate.white:checked { background-color: transparent !important; }
            .customcheckbox.multistate.white::after { border-left: 10px solid #fff; }

    .customcheckbox:hover { box-shadow: 0 0 0 2px #000; }

/* Radio */
input[type="radio"] { margin-left: 2px; margin-right: 0px; margin-top: -2px; height: 14px; width: 14px; vertical-align: middle; }
    input[type="radio"]:focus { box-shadow: 0 0 0 2px #000; }
.customradiocontainer { height: 16px; white-space: nowrap }
    .customradiocontainer label { margin-left: 5px; height: 14px; line-height: 14px; }
.customradio { -webkit-appearance: none; appearance: none; border: 1px solid #fff; background-color: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
    .customradio:checked { box-shadow: 0 0 0 1px #000; background-color: #000; border-width: 2px; }
    .customradio:hover { box-shadow: 0 0 0 2px #000; }

input[type=text], input[type=number], input[type=password] { height: 24px }
    input[type=text]:hover, input[type=number]:hover, input[type=password]:hover { border: 1px solid #000 }
textarea, input[type=text], input[type=number], input[type=password] { padding: 0px 3px; background-color: #fff; border-radius: 3px; border: 1px solid #ccc; color: #000; font-size: 14px; resize: none }
    textarea:focus, input[type=text]:focus, input[type=password]:focus { border: 1px solid #000; }

input[type="button"] { font-size: 14px; color: #555; border-color: #ccc !important; padding: 4px 10px; border: solid 1px; transition-duration: 0.25s; border-radius: 3px; background-color: #fff; cursor: pointer }
    input[type="button"]:focus { background-color: rgba(0,0,0,0.05); }
    input[type="button"]:hover { background-color: #ddd; border-color: #bbb; color: #000 }
    input[type="button"].small { height: 24px; line-height: 16px }
    input[type="button"].medium { height: 28px; line-height: 20px }

/* Control Colour Styles */
input[type="checkbox"].white:focus { box-shadow: 0 0 0 2px #fff; }
.customcheckbox.white { box-shadow: 0 0 0 1px #fff; }
.customcheckbox.bgblue { border-color: #516aa5; background-color: #516aa5 }
.customcheckbox.white:checked { background-color: #fff !important; }
.customcheckbox.white:hover { box-shadow: 0 0 0 2px #fff; }

input[type="radio"].white:focus { box-shadow: 0 0 0 2px #fff; }
.customradio.white { box-shadow: 0 0 0 1px #fff; }
.customradio.bgblue { border-color: #516aa5; background-color: #516aa5 }
.customradio.white:checked { background-color: #fff !important; }
.customradio.white:hover { box-shadow: 0 0 0 2px #fff; }

input[type="button"].white { border-color: #fff !important; background-color: transparent; color: #fff }
    input[type="button"].white:focus { background-color: rgba(255,255,255,0.2); }
    input[type="button"].white:hover { border-color: #000 !important; background-color: #fff; color: #000 }

/* Custom Controls */
.noselect { user-select: none; cursor: default }
.controlborder { border: solid 1px #ccc; border-radius: 3px }

/* Errors */
input[type=text].errorframe, input[type=number].errorframe, input[type=password].errorframe { border-color: #d00; box-shadow: 10px 10px 20px -10px #d00 }
input[type="checkbox"].errorframe, input[type="radio"].errorframe { box-shadow: 5px 5px 25px 4px #d00, 0 0 0 1px #d00; }
    input[type="checkbox"].errorframe:hover, input[type="radio"].errorframe:hover { box-shadow: 5px 5px 25px 4px #d00, 0 0 0 2px #d00; }
.controlborder.errorframe { border: solid 1px #d00; box-shadow: 5px 5px 25px 4px #d00, 0 0 0 1px #d00; }