/**************************************************************************************************************************************************/
    /** 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, .input-field > input[type]:-webkit-autofill:not(.browser-default):not([type=search]) + label, .input-field > input[type=date]:not(.browser-default) + label, .input-field > input[type=time]:not(.browser-default) + label  {
        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;
    }