@media (min-width:1025px) {
  .upload{
    margin-left:30%;
    margin-right:30%;
}
}
@media (max-width:1025px) {
  .upload{
    margin-left:3%;
    margin-right:3%;
}
}


.vehicle_vehicleds {
    margin: .5%;
    min-height: 242px;
    display: inline-block;
    padding: 1%;
    width: 20%;
    transform: perspective(800em) rotateX(1deg);
    /* box-shadow: rgba(12, 18, 39, 0.42) 0px 10px 30px -35px, rgba(19, 26, 32, 0.08) 0px 35px 75px -35px; */
    border-radius: 10px;
    border: 1px solid;
    border-color: rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
}

#featuresList{
display: flex;
}


input[type=text],input[type=number], select, textarea {
  width: 90%;
  padding: 2%;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
.submit_button2{
  width: 10%;
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 20%;
    border-radius: 6px;
}

.submit {
  width: 40%;
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    left: 30%;
}



.delete {
  background-color: #af0707;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width:100%;
}
.delete:hover {
  background-color: #8d0303;
}

input[type=submit]:hover {
  background-color: #45a049;
}


.col-25 {
  float: left;
    width: 22%;
    margin-top: 2%;
}

@media screen and (min-width: 1000px) {

  .col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
  }
}

@media screen and (max-width: 1000px) {
  .col-75 {
    float: left;
    width: 100%;
    margin-top: 6px;
  }
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

.no_input{
    width: 100% !important;
    resize: vertical !important;
    border: none !important;
    background-color: #f9f9f9 !important;
    color: black !important;
    font-size: initial !important;
}

@media screen and (min-width: 1000px) {
  #container{
    width: 100%;
    position: relative;
    left: 30%;
  }
  .container {
  border-radius: 5px;
    background-color: #f2f2f2;
    padding: 1%;
    width: 33%;
}

  #login-img{
  width:35%;
}
#upload_button{
    width: 21%;
    position: relative;
    left:0%;
}

}


@media screen and (max-width: 1000px) {
  .container {
  border-radius: 5px;
    background-color: #f2f2f2;
    padding: 1%;
    width: 90%;
}

  #login-img{
  width:75%;
      left: 10%;
    position: relative;
}

  .col-25{
    display:None;
  }

input[type=text],input[type=number], select, textarea {
    width: 90%;
    padding: 2%;
    border: 1px solid #717171;
    border-radius: 4px;
    resize: vertical;
    font-size: 26px;
    color: black;
}


input[type="number"] {
    /* Layout & Sizing */
    width: 100%;             /* Use 100% and box-sizing to prevent overflow */
    max-width: 843px;        /* Prevents it from being too wide on desktop */
    box-sizing: border-box;  /* ESSENTIAL: Includes padding/border in the width */

    /* Modern Spacing */
    padding: 22px 16px;      /* Consistent px padding for better touch targets */

    /* Typography */
    font-size: 26px;         /* Standard accessible size; prevents iOS auto-zoom */
    line-height: 1.5;

    /* Visuals */
    border: 1px solid #404040;
    border-radius: 6px;
    background-color: #fff;
    color: #333;             /* Softer than pure black for better readability */
    margin:2%;
    /* Smooth Interaction */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Clearer Focus State for Accessibility */
input[type="number"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

  #images{
        background-color: #bbcbcb;
    font-size: -webkit-xxx-large;
  }
#preview{
     font-size: -webkit-xxx-large;
  }

  #upload_button{
    width: 100%;
    position: relative;
    font-size: -webkit-xxx-large;
    margin-left: 5%;
    margin-right: 5%;
  }
}


label.cameraButton {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.cameraButton:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
  display: none;
}