/**************************************************************************************************************************************************/
/** 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 8px 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 .label-icon.active */
.input-field > input:-webkit-autofill + label.label-icon.active {
    transform: translateY(-20px) 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;
}

.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;
}