.errorMessage
, .successMessage{
    padding: 12px;
    margin-bottom: 12px;
    font-weight: bold;
}
.errorMessage {
    background-color: #b52c2c;
    color: #fff;
}
.successMessage {
    background-color: #2aa461;
    color: #fff;
}
    .errorMessage ul
    , .successMessage ul {
        padding-left: 20px;
    }

.form {
    padding-top: 24px;
    padding-bottom: 16px;
}
    .form .input {
        padding-bottom: 16px;
    }
    .form label {
        display: block;
        line-height: 18px;
        font-size: 14px;
        text-align: left;
    }
        .form label.alert {
            font-weight: bold;
        }
        .form label .tooltip {
            display: inline-block;
            font-size: 12px;
            line-height: 20px;
            height: 20px;
            width: 20px;
            background-color: #444;
            color: #fff;
            font-weight: bold;
            font-family: Georgia, serif;
            text-align: center;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            cursor: pointer;
        }
            .form label .tooltip::after {
                content: "i";
            }

    .form input[type=date],
    .form input[type=datetime],
    .form input[type=number],
    .form input[type=text],
    .form input[type=tel],
    .form input[type=email],
    .form input[type=password],
    .form textarea,
    .form select {
        height: 40px;
        padding: 0px 4px;
        line-height: 40px;
        font-size: 14px;
        border: none;
        background-color: #f3f4f2;
        color: #555;
        font-family: Roboto, Arial, sans-serif;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none; /* Hides the drop down arrow and the number selector */
    }

    .form select {
        padding: 0px 22px 0px 4px;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 14"><path fill="%23000" d="M0,2 L9,12 L18,2 L14,2 L9,7.55556 L4,2z"/></svg>');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 18px 7px;
        -webkit-appearance: none; /* Hides the drop down arrow and the number selector */
    }

    .form textarea {
        padding: 4px;
        line-height: 18px;
        height: 84px;
    }

        .form input[type=date]:disabled,
        .form input[type=datetime]:disabled,
        .form input[type=number]:disabled,
        .form input[type=text]:disabled,
        .form input[type=tel]:disabled,
        .form input[type=email]:disabled,
        .form input[type=password]:disabled,
        .form textarea:disabled,
        .form select:disabled {
            color: #fff;
            font-style: italic;
            background-color: #888;
        }

        .form input::-webkit-input-placeholder,
        .form textarea::-webkit-input-placeholder,
        .form select::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            font-style: italic;
            color: #ccc;
        }

        .form input::-moz-placeholder,
        .form textarea::-moz-placeholder,
        .form select::-moz-placeholder { /* Firefox 19+ */
            font-style: italic;
            color: #ccc;
        }

        .form input:-ms-input-placeholder,
        .form textarea:-ms-input-placeholder,
        .form select:-ms-input-placeholder { /* IE 10+ */
            font-style: italic;
            color: #ccc;
        }

        .form input:-moz-placeholder,
        .form textarea:-moz-placeholder,
        .form select:-moz-placeholder { /* Firefox 18- */
            font-style: italic;
            color: #ccc;
        }


    .form input[type=number]::-webkit-inner-spin-button,
    .form input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .form .input.default input[type=date],
    .form .input.default input[type=datetime],
    .form .input.default input[type=number],
    .form .input.default input[type=text],
    .form .input.default input[type=tel],
    .form .input.default input[type=email],
    .form .input.default input[type=password],
    .form .input.default select {
        width: 100%;
    }


    .form .input.stacked label {
        text-align: left;
    }
    .form .input.stacked input {
        width: 100%;
    }

    .form .required label {
        font-weight: bold;
    }
        .form .required label::before {
            content: "*";
            font-weight: bold;
            color: #b52c2c;
        }

    .form input[type=date].alert,
    .form input[type=datetime].alert,
    .form input[type=number].alert,
    .form input[type=text].alert,
    .form input[type=tel].alert,
    .form input[type=email].alert,
    .form input[type=password].alert,
    .form textarea.alert,
    .form select.alert {
        height: 40px;
        line-height: 37px;
        border-bottom: solid 3px #f64b2f;
    }
    .form label.alert {
        color: #f64b2f;
    }

    .form .check {
        box-sizing: border-box;
    }
        .form .check label {
            display: block;
            position: relative;
            padding: 11px 4px 11px 34px;
            text-align: left;
            font-size: 14px;
            line-height: 18px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
            .form .check label input {
                position: absolute;
                opacity: 0;
                top: 50%;
                margin-top: -14px;
                left: 0px;
                height: 28px;
                width: 28px;
                cursor: pointer;
            }
            .form .check label:disabled {
                opacity: .3;
            }
                .form .check label:disabled input {
                    cursor: not-allowed;
                }
                    .form .check label:disabled input ~ span {
                        background-color: #f00;
                    }
            .form .check label span {
                position: absolute;
                top: 50%;
                left: 0px;
                margin-top: -14px;
                height: 28px;
                width: 28px;
                background-color: #ccc;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
                border-radius: 4px;
            }
            .form .check label input:focus ~ span {
                border-width: 2px;
                border-style: solid;
                border-color: black;
                height: 24px;
                width: 24px;
            }
            .form .check label input.alert ~ span {
                border-width: 2px;
                border-style: solid;
                border-color: #b52c2c;
                height: 24px;
                width: 24px;
            }
            .form .check label input:checked ~ span {
                background-color: #228b52;
            }
            .form .check label input:disabled ~ span {
                background-color: #f00;
                opacity: .3;
            }
            .form .check label span:after {
                content: "";
                position: absolute;
                display: none;
                border-width: 0 3px 3px 0;
                border-style: solid;
                border-color: white;
            }
        .form .check input:checked ~ span:after {
            display: block;
        }
        .form .check label span:after {
            left: 10px;
            top: 5px;
            width: 6px;
            height: 12px;
            border-style: solid;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .form .check label input:focus ~ span:after {
            top: 3px;
            left: 8px;
        }


        .form .check.small label {
            padding: 11px 4px 11px 20px;
        }
        .form .check.small label input {
            margin-top: -7px;
            height: 14px;
            width: 14px;
        }
        .form .check.small label span {
            margin-top: -7px;
            height: 14px;
            width: 14px;
        }
        .form .check.small label input:focus ~ span {
            border-width: 2px;
            border-style: solid;
            height: 10px;
            width: 10px;
        }
            .form .check.small label span:after {
                border-width: 0 2px 2px 0;
            }
            .form .check.small label span:after {
                left: 4px;
                top: 2px;
                width: 3px;
                height: 7px;
                border-width: 0 2px 2px 0;
            }
            .form .check.small label input:focus ~ span:after {
                top: 0px;
                left: 2px;
            }
        .form .check.unavailable label {
            cursor: not-allowed;
        }
        .form .check.right label {
            padding: 11px 34px 11px 4px;
            text-align: left;
        }
            .form .check.right label input {
                left: auto;
                right: 0px;
            }
                .form .check.right label span {
                    left: auto;
                    right: 0px;
                }


    .form .radio {
        box-sizing: border-box;
    }
        .form .radio label {
            display: block;
            position: relative;
            padding: 11px 4px 11px 34px;
            text-align: left;
            font-size: 14px;
            line-height: 18px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
            .form .radio label input {
                position: absolute;
                opacity: 0;
                top: 50%;
                margin-top: -14px;
                left: 0px;
                height: 28px;
                width: 28px;
                cursor: pointer;
            }
            .form .radio label span {
                position: absolute;
                top: 50%;
                left: 0px;
                margin-top: -14px;
                height: 28px;
                width: 28px;
                background-color: #ccc;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
            }
            .form .radio label input:focus ~ span {
                border-width: 2px;
                border-style: solid;
                border-color: black;
                height: 24px;
                width: 24px;
            }
            .form .radio label input.alert ~ span {
                border-width: 2px;
                border-style: solid;
                border-color: #b52c2c;
                height: 24px;
                width: 24px;
            }
            .form .radio label input:checked ~ span {
                background-color: #228b52;
            }
            .form .radio label input:disabled ~ span {
                background-color: #f00;
                opacity: .3;
            }
            .form .radio label span:after {
                content: "";
                position: absolute;
                display: none;
                border-width: 0 3px 3px 0;
                border-style: solid;
                border-color: white;
            }
        .form .radio input:checked ~ span:after {
            display: block;
        }
        .form .radio label span:after {
            left: 10px;
            top: 5px;
            width: 6px;
            height: 12px;
            border-style: solid;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .form .radio label input:focus ~ span:after {
            top: 3px;
            left: 8px;
        }
        .form .radio.small label {
            padding: 11px 4px 11px 20px;
        }
            .form .radio.small label input {
                margin-top: -7px;
                height: 14px;
                width: 14px;
            }
            .form .radio.small label span {
                margin-top: -7px;
                height: 14px;
                width: 14px;
            }
            .form .radio.small label input:focus ~ span {
                border-width: 2px;
                border-style: solid;
                height: 10px;
                width: 10px;
            }
            .form .radio.small label span:after {
                border-width: 0 2px 2px 0;
            }
            .form .radio.small label span:after {
                left: 4px;
                top: 2px;
                width: 3px;
                height: 7px;
                border-width: 0 2px 2px 0;
            }
            .form .radio.small label input:focus ~ span:after {
                top: 0px;
                left: 2px;
            }
        .form .radio.unavailable label {
            cursor: not-allowed;
        }
        .form .radio.right label {
            padding: 11px 34px 11px 4px;
            text-align: left;
        }
            .form .radio.right label input {
                left: auto;
                right: 0px;
            }
            .form .radio.right label span {
                left: auto;
                right: 0px;
            }


    .form .units {
        display: block;
        position: relative;
    }
        .form .units::before {
            position: absolute;
            left: 0px;
            bottom: 0px;
            display: inline-block;
            padding: 0px 4px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #555;
            font-family: Roboto, Arial, sans-serif;
            color: #fff;
        }
        .form .units.right::before {
            left: auto;
            right: 0px;
            bottom: 0px;
        }
        .form .units.right input {
            padding-right: 50px;
        }
        .form .units.cash::before {
            content: "$";
        }
        .form .units.cash input {
            padding-left: 20px;
        }
        .form .units.slash::before {
            content: "/";
        }
        .form .units.slash input {
            padding-left: 20px;
        }
        .form .units.or::before {
            content: "or";
        }
        .form .units.or input {
            padding-left: 26px;
        }
        .form .units.secs::before {
            content: "secs";
        }

    .form .showHide span,
    .form .clear span,
    .form .confirm span {
        position: relative;
    }

    .form .showHide .showHideIcon,
    .form .clear .clearIcon {
        display: block;
        position: absolute;
        top: 50%;
        right: 4px;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        cursor: pointer;
    }
        .form .showHide .showHideIcon path {
            fill: #555;
        }
    .form .showHide.clear .clearIcon{
        right: 28px;
    }

    .form .confirmIcon {
        display: block;
        position: absolute;
        top: 50%;
        left: 100%;
        width: 20px;
        height: 20px;
        margin-top: -10px;
        margin-left: 4px;
    }
        .form .confirmIcon path {
            fill: #2aa461;
        }
        .form .confirmIcon.alert path {
            fill: #b52c2c;
        }

#ToolTipPanel {
    z-index: 10;
    padding: 20px;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: rgba(0,0,0,.6);
}
    #ToolTipPanel div {
        max-width: 600px;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
    }

@media(min-width: 576px) {
    .form .input.default {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 8px;
    }

    .form .input.check {
        padding-left: 148px;
    }
    .form .input.stacked.check {
        padding-left: 0px;
    }

    .form label {
        text-align: right;
        align-content: center;
        align-self: center;
    }
    .form .check label {
        text-align: left;
    }
    .form .input.stacked label {
        text-align: left;
        align-content: unset;
        align-self: unset;
    }
    .form .input.stacked input {
        width: 100%;
    }
}

/* limit hover events to mouse */
@media(pointer: fine) {
    .form .check label span {
        transition: background-color linear 300ms;
    }
    .form .check label:hover span {
        background-color: #999;
    }
    .form .check label:hover input:disabled ~ span {
        background-color: #f00;
    }
}