/*Add your custom style sheets on this file*/

/*html{
    font-size:16px; 
}*/

body {
    font-family: 'Open Sans';
    overflow-x: hidden;
}

form {
    min-height: 70vh;
}

#f p {
    font-size: 16px;
}

p .material-icons, .material-icons {
    vertical-align: text-bottom;
    font-size: 16px;
}

h6 {
    line-height: 1.3;
}


.inner-body {
    background-color: white;
}

.header-wrap {
    padding: 20px 10px;
}

.header-logo {
    max-height: 150px;
    float: none;
    min-height: 120px;
}

.splash {
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.8);
    z-index: 1000;
}

    .splash .splash-content {
        width: 100%;
    }

    .splash h5, .splash h6 {
        color: white;
        width: 100%;
    }

.spacer {
    height: 20px;
    width: 100%;
    float: left;
}



/* THIS IS FOR THE BLINKING CAMERA ICON */
.blinking {
    text-shadow: none;
    -webkit-animation-name: blinking; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 12s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite;
    animation-name: blinking;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes blinking {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.3;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0.3;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}
/* Standard syntax */
@keyframes blinking {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.3;
    }

    20% {
        opacity: 1;
    }

    30% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    60% {
        opacity: 1;
    }

    70% {
        opacity: 0.3;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}


/* PREVENTS TEXT SELECTION */
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.row {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*
    MATERIALIZE OVERRIDES
    MOSTLY USED TO GET THE LAYOUT OF THE TOGGLES AND RADIO
    CONTROLS TO BEHAVE MORE LIKE THE OTHER CONTROLS. MAYBE THEY'LL
    FIX THIS BEHAVIOR ON A LATER RELEASE AND YOU, READER, MAY 
    DELETE THIS WHOLE SECTION.
*/

.input-field {
    text-align: left;
}

.collapsible {
    border: none;
    box-shadow: none;
}

    .collapsible .collapsible-body {
        padding: .5rem;
        border-bottom: none;
    }

.static-label {
    line-height: 1.3;
}

.input-field label.static-label {
    position: relative;
    text-align: left;
    line-height: 1.3;
}

.input-field.col label.static-label {
    left: 0;
}

.small_radio {
    padding-left: 28px;
}

.input-field.switch {
    text-align: center;
}

    .input-field.switch label {
        left: 0;
    }


.switch label {
    position: relative;
}
/* stops the "select* input from poking through things */
.select-wrapper input.select-dropdown {
    z-index: 0;
}

/* impersonate the materialize select with a native select */
select.select-wrapper:focus {
    border-bottom: 1px solid #26a69a;
}

select.select-wrapper {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px;
    padding: 0;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 1;
}


/*
    CUSTOM ERROR LABEL STYLE - TAKES UP LESS SPACE THAN THE DEFAULT ONE
    USED BY MATERIALIZE.
*/

.error-label {
    color: #666666;
    font-size: 12px;
    margin-top: -18px;
    text-align: right;
}

    .error-label.invalid {
        color: #F44336;
    }

.btn {
    /*prevents accidental text selection when tapping buttons*/
    user-select: none;
}

/* makes vin text easier to read, more VIN - like */
.vin {
    letter-spacing: 1px;
    text-transform: uppercase;
} 

@media only screen and (max-width: 600px) {
    body {
        background-color: white;
    }

    .header-wrap {
        padding: 20px 0 10px;
    }

    .header-logo {
        min-height: 100px;
    }

    .header-slogan {
        color: white;
        text-align: center;
        font-size: 16px;
    }
}



@media only screen and (max-width: 800px) {

    .switch label .lever {
        margin: 0 6px;
    }
}


/* MATERIALIZE OVERRIDES */



.material-placeholder {
    margin: auto;
}