@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,100&family=Poppins:wght@100;200;300;400;500&display=swap');
:root{
    --main-color:#8e44ad;
    --black:#222;
    --white:#fff;
    --light-black:#777;
    --light-white:#fff9;
    --light-new:rgba(255, 255, 255, 0.872);
    --dark-bg:rgba(0,0,0,.7);
    --light-bg:#eee;
    --border:1rem solid var(var(--black));
    --box-shadow:0 0.5rem 1 rem rgba(0,0,0,.1);
    --text-shadow:0 0.5rem 1 rem rgba(0,0,0,.3);

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
*{
    font-family: 'Poppins',sans-serif;
}
.btn:hover{
    background: var(--white);
    box-shadow: 1px 2px 3px black, 0 0 5px var(--light-black);
}
.page{
height: 2000px;
width: 100vw;
background-color: var(--light-bg);
}
/* .t1{
    position: relative;
    left: -10vw;
    border: 2px solid white;
    width: 40%;
    float: left;
}
.t1 th{
    color: black;
    border: 2px solid white;
    font-size: 1.5em;
    line-height: 1em;
}
.t1 tr{
    border: 2px solid w;
      color: var(--black);
}
.t1 td{
    border: 2px solid black;
    color: var(--black);
    font-size: 1.5em;
    
} */
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    position: relative;
    left: -10vw;
    width: 40%;
    float: left;
}
.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
    border:2px solid black;
}
.styled-table tbody tr {
    background-color:white;
    border:2px solid black;
    color:#009879;
    /* border-bottom: 1px solid #dddddd; */
}

/* .styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
} */


.new{
    display: grid;
    grid-template-columns: auto auto auto auto auto ;
    position: relative;
    left: -10vw;
    padding-bottom: 10px;
}
.new .p1{
    display: inline-flex;
}
.new .p1 .b{
position: relative;
right: -3vw;
top: -1vh;
}
.new .l{
    position: relative;
top:-.5vh;
}
.input-field{
    max-width: 353px;
    width: 200%;
    height: 40px;
    background-color: white;
    margin: 7px 0;
    border-radius: 55px;
    display: grid;
    grid-template-columns:15% 85% ;
    padding: 0 0.4rem;
    position: relative;
}
.input-field i{ 
    text-align: center;
    line-height: 45px;
    color: #acacac;
    font-size: 1.5rem;
}
.input-field input{
    background: none;
    outline: none;
    border: none;
    line-height: 1;
    font-weight: 600;
    font-size: 1.2rem;
    color: #333;
}
.input-field input:placeholder-shown{
    column-rule: #aaa;
    font-weight: 500;
}
.p1 .b1{
margin-left: 10px;
}
.citycreate{
background-color: #aaa;
height: 1000px;
}
.citycreate .s{
    position: relative;
top: -63px;
left: 28vw;

}
.brach .n{
    position: relative;
    left: 1vw;
}
.brach .input-field{
    margin: 2vh;
}
.brach .c{
    position: relative;
    left: 1vw;
}
.div1{
    position: relative;
    left: 60vw;
    top: -62vh;
}
.div2{
    position: relative;
    left: -22vw;
}
.div2 .nu{
    position: relative;
    bottom: -1vh;
    left: -10vw;
}
.pack{
    background:var(--light-black);
    height: 500px;
    width: 100%;
}
.dol1{
    left: 30vw;
    top:-20vh
}
.badder{
    position: relative;
    left: 20vw;
    top:-20vh;
}
.badder .dm{
    position: relative;
    left: 32vw;
}
.badder .km{
    position: relative;
    left: 34vw;
}
.badde{
    background-color:rgba(112, 112, 112, 0.15);
    height: 500px;
    width:100%;
}
.book{
    background-color: var(--black);
    width: 100%;
    height: 700px;
}
.qsa{
    display: none;
}
.select{
    width: 18vw;
    padding: 8px 12px;
    color: #333;
    background-color: #eee;
    cursor: pointer;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
     outline: none;
    border: 1px solid #bbb;
    /* -moz-appearance: none; */

  }
  /* .select:focus{ */
    /* outline: none;
    border: 1px solid #bbb;
  } */
  .select option{
    background: #fff;

  }
  .xc1{
    position: relative;
    top: -6vh;
  
  }
  .vvv{
    position: relative;
    left: -17vw;
  }
  #i2{
    display: none;
  }