/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
    body{
     /*    background-color:lightseagreen; */
        background-color: rgb(68, 63, 63);
    }


    /* H1 */
    h1{
        color: silver;
        text-align: center;
        position: relative;


    }


    #logo img{
        width: 20%;
        position: fixed;
        z-index: 2;
    }

    /* LOGS & GOOGLE SHEETS */
    #logSelect{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

    #logSelect div{
        margin: 2px;
    }

    .nav-box{
        background-color: rgb(26, 25, 25);
        border-radius: 10%;
        width: 20%;
        text-align: center;
        font-size: 1.3rem;
    }

    .fa-garage-car{
        color: lightseagreen;
        font-size: 2rem;
    }

    .fa-gears{
        font-size: 2rem;
        color: lightseagreen;
    }

    .fa-file-spreadsheet{
        font-size: 2rem;
        position: relative;
        top: 25%;
        color: lightseagreen;
    }

    

    /* FORM OPTIONS */
    /* Form */

    
  #formLayer{
    border-radius: 2%;
    width: 70vw;
    height: 31.2em;
    position: absolute;
    left: 20%;   
    margin-right: 10px;
    padding-top: 10px; 
    border-right: none;
    text-align: left;
    top: 7rem;
    background-color: rgb(26, 25, 25);
    filter: drop-shadow(-20px 20px 15px black);
  }

  #formLayer2{
    width: 70vw;
    height: 20em;
    position: absolute;
    left: 20%;   
    margin-right: 10px; 
    border-radius: 2%;
    padding-top: 10px;
    display: none;
        border-right: none;
        text-align: left;
        top: 7rem;
        background-color: rgb(26, 25, 25);
        filter: drop-shadow(-20px 20px 15px black);
  }

  #formTitle{
    position: absolute;
    color: red;
    left: 0;
    z-index: -1;
    filter: drop-shadow(2px 2px 0px black);
    font-size: 1.3rem;
  }

  #mainRepairTitle{
    color: aqua;
    position: relative;
    top:1rem;
    width: 10%;
    
  }
  #mainRepairTitle  li{
    list-style: none;
    text-align: center;
    padding-right: 20px;
    position: relative;
    left: -10px;
     font-family: "Limelight", sans-serif;
  font-weight: 400;
  font-style: normal;
  }

  #autoPartsTitle{
    color: aqua;
    position: relative;
    top: 3rem;
    width: 10%;
        display: none;
    
  }
 #autoPartsTitle  li{
      list-style: none;
    text-align: center;
    padding-right: 20px;
    position: relative;
    left: -10px;
 font-family: "Limelight", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fa-plus{
    color: red;
    position: relative;
    left: 40%;
}

    form{
        display: flex;
        flex-direction: column;
        align-items: center;
        filter: drop-shadow(5px 5px 5px black);
        }
    
        form .user-box input{
            width: 100%;
            margin-bottom: 2px;
            display: flex;
            background-color: transparent;
            border-left: none;
            border-right: none;
            border-top: none;
            color: white;
            text-align: center;
        }

        form ::placeholder {
            color: gray;
            text-align: right;
            font-style: italic; 
        }
    
        form .user-box select{
            width: 130px;
            margin-bottom: 2px;
            display: flex;
            background-color: transparent;
            border-bottom: black;
            text-decoration: none;
            list-style-type: none;
        }
    
        form .user-box #Notes_Issues{
            height: 50px;
        }
    
        form .user-box label{
            font-size: 1.1em;
            color: lightseagreen;
            position: relative;

        }

        button{
            height: 40px;
            position: relative;
            top: 5vw;
            border-radius: 5%;
            background-color: transparent;
            color: lightseagreen;
            font-size: 1em;
        }

    a{
        text-decoration: none;
    }

    

        /* Dashboard */

    

        .Dashboard{
            position: relative;
            top: 40em;
            height: 85vh;
        }

        .Dashboard, h2{
            text-align: center;
            color: white;
            font-weight: 600;
        }


        #carSec{
            width: 100%;
            height: 100px;
            display: flex;
            flex-wrap:wrap;

        }


        #carSec div{
            background-color: rgb(20, 19, 19);
        }


        #carSec div:nth-of-type(1){
            flex-grow: 1; 

        }
        #carSec div:nth-of-type(2){
            flex-grow: 1; 

        }
        #carSec div:nth-of-type(3){
            flex-grow: 1; 
        }
        #carSec div:nth-of-type(4){
            flex-grow: 1; 

        }
        #carSec div:nth-of-type(5){
            flex-grow: 1; 

        }
        #carSec div:nth-of-type(6){
            flex-grow: 1; 
        }
        #carSec div:nth-of-type(7){
            flex-grow: 1; 
        }
        #carSec div:nth-of-type(8){
            flex-grow: 1; 
        }
         #carSec div:nth-of-type(9){
            flex-grow: 1; 
        }
        #carSec div:nth-of-type(10){
            flex-grow: 1; 
    
        }
        #carSec div:nth-of-type(11){
            flex-grow: 1; 
        }

        #carIfo > h2{
            font-size: 1em;
            text-align: center;
            color: lightseagreen;
            padding: 3px;
        }

        #carIfo #linkIcon{
            display: flex;
            justify-content: center;
            font-size: 11vw;
            padding-bottom: 10px;

        }
        
        #carIfo{
            margin: 2px;
            border-radius: 2%;

        }

        #carSec .fa-solid{
            color: white;
        }

        /* OMD2 Scanner Tools */

        #linkIconScanners{
            width: 40%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 2vh;
            }

 
            /* PLATE AND VIN SECTION */
        .plateAndVinLookUp{
            z-index: 3;
            position: fixed;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.82);
            display: none;
        }

        #PlaVinSec{
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        position: relative;
        top: 100px;
        padding-bottom: 50px;
        }

        #PlaVinSec h3{
            font-size: 1.3em;
        }
        #PlaVinSec img{
            width: 40%;
        }
        #PlaVinSec #vinImg{
            width: 70%;
        }
        .fa-x{
            color: white;
            font-size: 2em;
            float: inline-end;
            position: relative;
            top: 5%;
            right: 5%;
        }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body{
        background-color: burlywood;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    body{
        display: none;
        }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    body{
        display: none;
        }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body{
    display: none;
    }
}