/**************************************************************************************************************************************************/
    /** This file will override MaterializeCSS input styles to be more like the material design spec at https://material.io/components/text-fields/  **/
    /**                                                                                                                                              **/
    /** Tweaks to this file should be minimal besides the "top" property of active outlined labels (search for: "input.outline+label.active")        **/
    /** or to the padding of material icons prefixed to an input (search for: i.material-icons.prefix)
    /**************************************************************************************************************************************************/

    /*********************/
    /** STANDARD STYLES **/
    /*********************/

    /* to align select with input field size */
    .input-field select {
        margin: 0 0 20px 0;
    }

    /* extra spacing for all active labels */
    .input-field>label:not(.label-icon).active {
        transform: translateY(-17px) scale(0.8) !important;
        transform-origin: 0 0;
    }

    /* webkit autofill  */
    .input-field>input:-webkit-autofill+label:not(.label-icon).active {
        transform: translateY(-17px) scale(0.8) !important;
        transform-origin: 0 0;
    }

    /* extra spacing for active label's with icons */
    .input-field>label.label-icon.active {
        transform: translateY(-20px) scale(0.8) !important;
        transform-origin: 0 0;
    }

    /* webkit autofill .label-icon.active */
    .input-field>input:-webkit-autofill+label.label-icon.active {
        transform: translateY(-20px) scale(0.8) !important;
        transform-origin: 0 0;
    }

    .input-field>label.label-icon i.material-icons {
        vertical-align: bottom;
    }

    input:not([type]),
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=url],
    input[type=time],
    input[type=date],
    input[type=datetime],
    input[type=datetime-local],
    input[type=tel],
    input[type=number],
    input[type=search],
    textarea.materialize-textarea,
    select {
        background-color: rgba(0, 0, 0, .05) !important;
        border-radius: 4px 4px 0 0 !important;
        padding: 0 0 0 8px !important;
        transition: .3s background-color;
        /* margin-top: 2px !important; */
        -webkit-box-sizing: border-box !important;
        /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box !important;
        /* Firefox, other Gecko */
        box-sizing: border-box !important;
        /* Opera/IE 8+ */
    }

    /* hover */
    input:not([type]):hover,
    input[type=text]:hover,
    input[type=password]:hover,
    input[type=email]:hover,
    input[type=url]:hover,
    input[type=time]:hover,
    input[type=date]:hover,
    input[type=datetime]:hover,
    input[type=datetime-local]:hover,
    input[type=tel]:hover,
    input[type=number]:hover,
    input[type=search]:hover,
    textarea.materialize-textarea:hover,
    select:hover {
        background-color: rgba(0, 0, 0, .16) !important;
        transition: .3s background-color;
    }

    /* focus */
    input:not([type]):focus,
    input[type=text]:focus,
    input[type=password]:focus,
    input[type=email]:focus,
    input[type=url]:focus,
    input[type=time]:focus,
    input[type=date]:focus,
    input[type=datetime]:focus,
    input[type=datetime-local]:focus,
    input[type=tel]:focus,
    input[type=number]:focus,
    input[type=search]:focus,
    textarea.materialize-textarea:focus,
    select:focus {
        background-color: rgba(0, 0, 0, .08) !important;
        transition: .3s background-color;
    }

    /* disabled */
    input:disabled,
    select:disabled,
    input.disabled,
    select.disabled,
    input:disabled+label,
    select:disabled+label,
    input.disabled+label,
    select.disabled+label {
        cursor: not-allowed !important;
    }

    input:disabled,
    select:disabled,
    input.disabled,
    select.disabled {
        opacity: .8;
        border-bottom-style: dotted;
        border-bottom-color: rgb(158, 158, 158) !important;
    }

    input.valid:disabled,
    select.valid:disabled,
    input.valid.disabled,
    select.valid.disabled,
    select.valid {
        border-color: #4CAF50 !important;
    }

    select.valid,
    select.invalid {
        border-bottom-width: 2px;
    }

    input.invalid,
    input.valid,
    input.valid:disabled,
    select.valid:disabled,
    input.valid.disabled,
    select.valid.disabled,
    select.valid input.invalid:disabled,
    select.invalid:disabled,
    input.invalid.disabled,
    select.invalid.disabled {
        box-shadow: none !important;
        border-bottom-width: 2px !important;
        border-bottom-style: dotted;
    }

    input.invalid:disabled,
    select.invalid:disabled,
    input.invalid.disabled,
    select.invalid.disabled,
    select.invalid {
        border-bottom-color: #F44336 !important;
    }

    input.invalid:disabled,
    select.invalid:disabled,
    input.invalid.disabled,
    select.invalid.disabled {
        box-shadow: none !important;
        border-bottom-style: dotted;
    }

    select {
        border-bottom-color: rgb(158, 158, 158);
        border-top: none;
        border-left: none;
        border-right: none;
    }

    select:focus {
        outline: 0 !important;
        border-bottom-color: #35617b;
        /* added for c999 */
        border-width: 2px;
        /* added for c999 */
    }

    /* uncomment this to remove blue chrome autofill */
    /* input:-webkit-autofill, select:-webkit-autofill {
        -webkit-box-shadow : 0 0 0 30px #e8e8e8 inset !important;
        box-shadow         : 0 0 0 30px #e8e8e8 inset !important;
    } */


    /************************/
    /** STANDARD ALTERNATE **/
    /************************/

    input:not(.outline).lighten,
    select:not(.outline).lighten {
        background-color: rgba(255, 255, 255, .05) !important;
    }

    input:not(.outline).lighten:hover,
    select:not(.outline).lighten:hover {
        background-color: rgba(255, 255, 255, .16) !important;
    }

    input:not(.outline).lighten:focus,
    select:not(.outline).lighten:focus {
        background-color: rgba(255, 255, 255, .08) !important;
    }

    i.material-icons.lighten {
        color: rgba(255, 255, 255, 0.57) !important;
    }

    i.material-icons.prefix {
        padding: 8px;
        /* may need to be changed if input prefix icons don't perfectly align */
    }

    /** LABEL OVERRIDES **/
    .input-field.col label,
    input+label,
    select+label,
    input.outline+label,
    select.outline+label {
        left: 1.25rem !important;
        width: auto !important;
    }

    /****************************/
    /** OUTLINE DEFAULT STYLES **/
    /****************************/

    input.outline,
    select.outline {
        border: 1px solid rgba(0, 0, 0, 0.35) !important;
        background-color: rgba(0, 0, 0, 0) !important;
        border-radius: 4px !important;
        transition: .3s all;
    }

    /* for adding .prefix icons to select classes */
    .input-field .prefix~select {
        margin-left: 3rem;
        width: 92%;
        width: calc(100% - 3rem)
    }

    /* label */
    input.outline+label.active,
    select.outline+label.active {
        top: 0.5rem;
        /* THIS IS THE DEFAULT - may need to change depending if body font size has been altered */
        /* top: 1.2rem; /* updated for smaller font size on body */
        background-color: #2d2d2d;
        /* change this to update label colors as needed. DONT USE OPACITY */
        color: #f3f3f3 !important;
        border-radius: 4px;
        padding: 0 4px;
        display: flex;
        align-items: center;
        width: auto !important;
    }

    input.outline+label.active i,
    select.outline+label.active i {
        font-size: 1rem;
        color: #f3f3f3;
    }

    /* invalid */
    input.outline.invalid+label.active,
    select.outline.invalid+label.active {
        background-color: #F44336;
    }

    input.outline.invalid:not([type]):not([readonly]),
    input.outline.invalid[type=text]:not([readonly]),
    input.outline.invalid[type=password]:not([readonly]),
    input.outline.invalid[type=email]:not([readonly]),
    input.outline.invalid[type=url]:not([readonly]),
    input.outline.invalid[type=time]:not([readonly]),
    input.outline.invalid[type=date]:not([readonly]),
    input.outline.invalid[type=datetime]:not([readonly]),
    input.outline.invalid[type=datetime-local]:not([readonly]),
    input.outline.invalid[type=tel]:not([readonly]),
    input.outline.invalid[type=number]:not([readonly]),
    input.outline.invalid[type=search]:not([readonly]),
    textarea.materialize-textarea:not([readonly]),
    select.outline.valid:not(:disabled):not(.disabled):not([readonly]) {
        border: 1px solid #F44336 !important;
        box-shadow: none !important;
    }

    /* valid */
    input.outline.valid+label.active,
    select.outline.valid+label.active,
    input.outline.valid+label.active i,
    select.outline.valid+label.active i {
        background-color: #4CAF50 !important;
        color: black !important;
        transition: .3s all;
    }

    input.outline.valid:not([type]):not([readonly]),
    input.outline.valid[type=text]:not([readonly]),
    input.outline.valid[type=password]:not([readonly]),
    input.outline.valid[type=email]:not([readonly]),
    input.outline.valid[type=url]:not([readonly]),
    input.outline.valid[type=time]:not([readonly]),
    input.outline.valid[type=date]:not([readonly]),
    input.outline.valid[type=datetime]:not([readonly]),
    input.outline.valid[type=datetime-local]:not([readonly]),
    input.outline.valid[type=tel]:not([readonly]),
    input.outline.valid[type=number]:not([readonly]),
    input.outline.valid[type=search]:not([readonly]),
    textarea.materialize-textarea:not([readonly]),
    select.outline.valid:not(:disabled):not(.disabled):not([readonly]) {
        border: 1px solid #4CAF50 !important;
        box-shadow: none;
    }

    /* disabled */
    input.outline:disabled,
    select:disabled.outline {
        border: 1px dotted !important;
    }

    select:disabled.outline {
        opacity: 0.8;
    }

    select:disabled.outline+label.active,
    input.outline:disabled+label.active,
    select:disabled.outline+label.active i,
    input.outline:disabled+label.active i {
        background-color: #929292 !important;
        color: #f3f3f3 !important;
    }

    /* valid - disabled */
    input.outline.valid:disabled,
    select.outline.valid:disabled {
        border-color: #78b37a !important;
    }

    /* invalid - disabled */
    input.outline.invalid:disabled,
    select.outline.invalid:disabled {
        border-color: #f56f66 !important;
    }


    select.outline:not([type]):focus:not([readonly]) {
        outline: inherit;
    }

    /* hover */
    select.outline:not(.lighten):not(:disabled):not(.disabled):not(.invalid):not(.valid):hover {
        /* this should be the border */
        border: 1px solid rgba(0, 0, 0, 0.5) !important;
    }

    input.outline:not(.lighten):hover,
    select.outline:not(.lighten):hover {
        background-color: rgba(0, 0, 0, 0) !important;
        border-color: rgba(0, 0, 0, .62) !important;
        transition: .3s border-color;
    }

    /* focus */
    input.outline:not(.lighten):focus,
    select.outline:not(.lighten):focus {
        outline: inherit;
        background-color: rgba(0, 0, 0, .07) !important;
        border-color: rgba(0, 0, 0, .6) !important;
    }

    input.outline:not([type]):focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=text]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=password]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=email]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=url]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=time]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=date]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=datetime]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=datetime-local]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=tel]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=number]:focus:not([readonly]):not(.invalid):not(.valid),
    input.outline[type=search]:focus:not([readonly]):not(.invalid):not(.valid),
    textarea.materialize-textarea:focus:not([readonly]):not(.invalid):not(.valid) {
        border-bottom: 1px solid #8e8e8e;
        box-shadow: inherit;
    }

    /* focus - .lighten overrides */
    input.outline:not([type]):not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=text]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=password]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=email]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=url]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=time]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=date]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=datetime]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=datetime-local]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=tel]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=number]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    input.outline[type=search]:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid),
    textarea.materialize-textarea:not([readonly]):not(.lighten):focus:not(.invalid):not(.valid) {
        background-color: rgba(0, 0, 0, .07) !important;
        border-color: rgba(0, 0, 0, 0.75) !important;
    }

    select.outline:not(.lighten):focus {
        /* this should be the border */
        background-color: rgba(0, 0, 0, .07) !important;
    }

    /***********************/
    /** OUTLINE ALTERNATE **/
    /***********************/

    input.outline.lighten,
    select.outline.lighten {
        transition: .3s all;
        background-color: rgba(255, 255, 255, .1) !important;
        border-color: rgba(255, 255, 255, .4) !important;
    }

    /* label */
    input.outline.lighten+label,
    select.outline.lighten+label,
    input.outline.lighten+label i,
    select.outline.lighten+label i {
        color: rgba(255, 255, 255, 0.66);
    }

    input.outline.lighten+label.active,
    select.outline.lighten+label.active,
    input.outline.lighten+label.active i,
    select.outline.lighten+label.active i {
        background-color: #f3f3f3;
        color: #2d2d2d !important;
    }

    /* hover */
    input.outline.lighten:hover,
    select.outline.lighten:hover {
        /* background-color: rgba(255,255,255,.25) !important; */
        border-color: rgba(255, 255, 255, .8) !important;
    }

    select.outline.lighten:hover {
        background-color: rgba(255, 255, 255, .1) !important;
    }

    /* focus */
    input.outline.lighten:focus,
    select.outline.lighten:focus {
        outline: inherit;
        background-color: rgba(255, 255, 255, .18) !important;
        border-color: rgba(255, 255, 255, .6) !important;
    }

    select.outline.lighten:focus {
        background-color: rgba(255, 255, 255, .18) !important;
    }

    select.outline.lighten,
    input.lighten,
    input.lighten+label,
    input.lighten+label.active,
    select.lighten+label,
    select.lighten+label.active {
        color: rgba(255, 255, 255, 0.57);
    }

    select.lighten option {
        color: black !important;
    }

    /* disabled */
    select.lighten:disabled,
    input.lighten:disabled {
        color: rgba(255, 255, 255, .35) !important;
    }